/* PurpleOwl Seminars — one stylesheet. Values copied from purpleowl.io (Tailwind purple/slate ramp, src/index.css, PurpleOwlStyle.md). Dark mode is a .dark class on , set by /js/theme.js (localStorage "theme", else OS preference), exactly like the main site. */ :root { color-scheme: light; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; --font-heading: var(--font-body); --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Monaco, Consolas, monospace; --purple: #9333ea; /* purple-600: links, buttons, focus */ --purple-hover: #7e22ce; /* purple-700 */ --purple-deep: #6b21a8; /* purple-800, gradient end */ --purple-mark: #7c3aed; /* owl body */ --purple-wordmark: #581c87; /* purple-900 */ --purple-50: #faf5ff; --purple-100: #f3e8ff; --purple-200: #e9d5ff; --purple-400: #c084fc; --purple-800-text: #6b21a8; --bg: linear-gradient(to bottom right, #faf5ff, #ffffff, #faf5ff); --bg-solid: #ffffff; --bg-section: rgba(255, 255, 255, 0.5); --text: #0f172a; /* slate-900 headings */ --text-body: #334155; /* slate-700 */ --text-muted: #475569; /* slate-600 subtitles */ --text-faint: #64748b; /* slate-500 meta */ --border: #e9d5ff; /* purple-200 */ --border-neutral: #e2e8f0; /* slate-200 */ --card-bg: #ffffff; --card-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --card-shadow-hover: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --panel-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --radius: 0.375rem; /* rounded-md controls */ --radius-card: 0.5rem; /* rounded-lg cards */ --radius-input: 0.75rem; /* rounded-xl, TLDR input */ --radius-panel: 1rem; /* rounded-2xl gradient panels */ --radius-pill: 9999px; --content-width: 56rem; /* max-w-4xl, blog post */ --site-width: 80rem; /* max-w-7xl */ --section-gap: 5rem; /* py-20 */ --code-bg: #1a1b26; --code-chip-bg: #f3e8ff; --code-chip-text: #7e22ce; --code-chip-border: rgb(233 213 255 / 0.5); --pre-bg: #f1f5f9; --focus: #9333ea; --error: #dc2626; --success: #16a34a; --footer-bg: #0f172a; --footer-text: #94a3b8; /* slate-400 */ --footer-faint: #64748b; --footer-border: #1e293b; } .dark { color-scheme: dark; --bg: linear-gradient(to bottom right, #020617, #0f172a, #3b0764); --bg-solid: #0f172a; --bg-section: rgba(15, 23, 42, 0.5); --text: #ffffff; --text-body: #cbd5e1; /* slate-300 */ --text-muted: #94a3b8; /* slate-400 */ --text-faint: #94a3b8; --border: #581c87; /* purple-900 */ --border-neutral: #334155; --card-bg: #0f172a; --purple-wordmark: #f3e8ff; /* purple-100 */ --purple: #c084fc; /* purple-400 for links/text on dark */ --code-chip-bg: rgb(88 28 135 / 0.4); --code-chip-text: #d8b4fe; --code-chip-border: rgb(126 34 206 / 0.5); --pre-bg: #0f172a; --focus: #a855f7; --footer-bg: #020617; --footer-border: #1e293b; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--text-body); background: var(--bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; } /* faint centered owl, as on the site */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: url("/img/logo.svg") center / min(800px, 90vw) no-repeat; opacity: 0.015; z-index: 0; } .dark body::before { opacity: 0.03; } body > * { position: relative; z-index: 1; } main { flex: 1; } h1, h2, h3 { font-family: var(--font-heading); color: var(--text); margin: 0; } p { margin: 0; } a { color: var(--purple); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } code, pre, kbd { font-family: var(--font-mono); } *:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } *:focus:not(:focus-visible) { outline: none; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .skip-link { position: absolute; left: 1rem; top: -3rem; background: var(--purple); color: #fff; padding: 0.5rem 1rem; border-radius: var(--radius); z-index: 100; } .skip-link:focus { top: 1rem; } /* ---------- layout ---------- */ .container { width: 100%; max-width: var(--site-width); margin: 0 auto; padding-left: 1rem; padding-right: 1rem; } .narrow { max-width: var(--content-width); } .reading { max-width: 48rem; /* max-w-3xl */ } @media (min-width: 640px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .container { padding-left: 2rem; padding-right: 2rem; } } .section { padding-top: var(--section-gap); padding-bottom: var(--section-gap); } .section.alt { background: var(--bg-section); } .section-head { text-align: center; margin-bottom: 3rem; } .section-head h2, h2.section-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; margin-bottom: 1rem; } .section-head .subtitle { font-size: 1.25rem; line-height: 1.75rem; color: var(--text-muted); max-width: 48rem; margin: 0 auto; } @media (min-width: 640px) { .section-head h2, h2.section-title { font-size: 2.25rem; line-height: 2.5rem; } } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .dark .site-header { background: rgb(2 6 23 / 0.8); } .header-inner { height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--purple-wordmark); font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; text-decoration: none; } .brand:hover { text-decoration: none; } /* logo.png is 213x256; the main site renders it 32px wide with height:auto (Tailwind preflight) */ .brand img { width: 32px; height: auto; } .site-nav { display: flex; align-items: center; gap: 2rem; /* space-x-8 */ } .site-nav .nav-link { color: var(--text-body); text-decoration: none; transition: color 0.15s; } .site-nav .nav-link:hover { color: var(--purple); text-decoration: none; } .header-right { display: flex; align-items: center; gap: 1rem; color: var(--text-body); font-size: 0.875rem; } .header-right:empty { display: none; } .header-right .name { font-weight: 500; } /* sun/moon toggle: p-2 rounded-lg bg-purple-100 text-purple-900 (dark: bg-purple-900 text-purple-100) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0.5rem; border: 0; border-radius: var(--radius-card); background: var(--purple-100); color: #581c87; cursor: pointer; transition: background-color 0.15s; } .theme-toggle:hover { background: var(--purple-200); } .theme-toggle svg { width: 1.25rem; height: 1.25rem; } .theme-toggle .icon-sun { display: none; } .dark .theme-toggle { background: #581c87; color: #f3e8ff; } .dark .theme-toggle:hover { background: #6b21a8; } .dark .theme-toggle .icon-sun { display: block; } .dark .theme-toggle .icon-moon { display: none; } @media (max-width: 479px) { .site-nav { gap: 1rem; } } .btn-text { background: none; border: 0; padding: 0.375rem 0.75rem; font: inherit; font-size: 0.875rem; font-weight: 500; color: var(--purple); border-radius: var(--radius); cursor: pointer; background: var(--purple-100); } .btn-text:hover { background: var(--purple-200); } .dark .btn-text { background: rgb(88 28 135 / 0.5); color: #d8b4fe; } .dark .btn-text:hover { background: rgb(107 33 168 / 0.5); } /* ---------- hero ---------- */ .hero { padding-top: 3rem; padding-bottom: 3.5rem; } .hero-grid { display: grid; gap: 2.5rem; align-items: start; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1fr) 26rem; gap: 4rem; align-items: center; } } .hero-inner { display: grid; gap: 1.5rem; } .hero-inner > * { max-width: 48rem; } .hero h1 { font-size: 2.25rem; line-height: 1.25; font-weight: 700; } .hero-subtitle { font-size: 1.25rem; line-height: 1.75rem; color: var(--purple); font-weight: 600; } .hero-body { font-size: 1.125rem; line-height: 1.75rem; color: var(--text-body); } .contact-line { font-size: 1.125rem; line-height: 1.75rem; color: var(--text-body); } .contact-line a, .contact-line strong { color: var(--purple); font-weight: 700; } .contact-line .sep { margin: 0 0.35em; } .contact-line .soft { opacity: 0.8; } @media (min-width: 640px) { .hero h1 { font-size: 3rem; } } @media (min-width: 1024px) { .hero h1 { font-size: 3.5rem; } } /* ---------- upcoming sessions (hero card) ---------- */ .events { padding: 1.5rem; display: grid; gap: 1rem; text-align: left; } .events h2 { font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .event-list { list-style: none; margin: 0; padding: 0; display: grid; } .event { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.5rem 1rem; padding: 1rem 0; border-top: 1px solid var(--border-neutral); } .event:first-child { border-top: 0; padding-top: 0; } .event:last-child { padding-bottom: 0; } .event-date { display: grid; justify-items: center; align-content: start; padding: 0.375rem 0; border-radius: var(--radius-card); background: var(--purple-100); color: var(--purple-800-text); line-height: 1.1; } .dark .event-date { background: #581c87; color: #f3e8ff; } .event-date .mon { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .event-date .day { font-size: 1.5rem; font-weight: 700; } .event-body { display: grid; gap: 0.125rem; min-width: 0; } .event-body strong { color: var(--text); font-weight: 600; line-height: 1.35; } .event-when, .event-meta { font-size: 0.875rem; color: var(--text-muted); } .event-seats { font-size: 0.875rem; font-weight: 500; color: var(--purple); } .event-seats.full { color: var(--text-muted); } .event-action { grid-column: 2; margin-top: 0.375rem; } .event-action .btn { height: 2.5rem; padding: 0 1.25rem; } .event-status { font-size: 0.875rem; font-weight: 500; color: var(--text-muted); } .event.none { grid-template-columns: 1fr; gap: 0.5rem; } .event.none p { color: var(--text-body); } .event.none .btn { justify-self: start; margin-top: 0.5rem; } .event-skeleton { display: grid; gap: 0.5rem; } /* ---------- quote / sender block ---------- */ .quote-block { background: linear-gradient(to bottom right, var(--purple), var(--purple-deep)); color: #fff; border-radius: var(--radius-panel); padding: 2rem; box-shadow: var(--panel-shadow); display: grid; gap: 1.25rem; text-align: center; max-width: var(--content-width); margin: 0 auto; } .dark .quote-block { background: linear-gradient(to bottom right, #9333ea, #6b21a8); } .quote-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto; border: 3px solid rgb(255 255 255 / 0.4); background: rgb(255 255 255 / 0.2); } .quote-mark { font-size: 3.75rem; line-height: 1; opacity: 0.9; } .quote-text { font-size: 1.5rem; line-height: 2rem; font-weight: 500; color: #fff; margin: 0; } .quote-attr { color: var(--purple-100); font-size: 1.125rem; } @media (min-width: 640px) { .quote-block { padding: 3rem; } .quote-text { font-size: 1.875rem; line-height: 2.25rem; } } @media (min-width: 768px) { .quote-block.with-photo { grid-template-columns: auto 1fr; text-align: left; align-items: center; column-gap: 2rem; } .quote-block.with-photo .quote-photo { grid-row: 1 / span 3; width: 128px; height: 128px; margin: 0; } } /* ---------- agenda steps ---------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; counter-reset: step; } .step { text-align: center; } .step-num { width: 4rem; height: 4rem; border-radius: 50%; background: #9333ea; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; margin: 0 auto 1rem; } .step h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; margin-bottom: 0.5rem; } .step p { color: var(--text-muted); } @media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .steps.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .steps.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---------- content sections (how it works, prepare, who, bio) ---------- */ .split { display: grid; gap: 2.5rem; max-width: var(--content-width); margin: 0 auto; } @media (min-width: 900px) { .split { grid-template-columns: 3fr 2fr; align-items: start; } .split.even { grid-template-columns: 1fr 1fr; } } .prose-block p { font-size: 1.125rem; line-height: 1.75; color: var(--text-body); } .prose-block > :not(:first-child) { margin-top: 1.25rem; } .prose-block h3, .card.facts h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; margin-bottom: 1rem; } .prose-block .fine, .card.facts .fine { font-size: 0.875rem; line-height: 1.5; color: var(--text-faint); } .card.facts { display: grid; gap: 1.25rem; align-content: start; } .card.facts h3, .card.facts > * + * { margin: 0; } .fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; } .fact-list li { position: relative; padding-left: 1.25rem; color: var(--text-body); line-height: 1.6; } .fact-list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #9333ea; } .fact-list strong { color: var(--text); font-weight: 600; } .numbered { list-style: none; margin: 0; padding: 0; counter-reset: n; display: grid; gap: 1.25rem; } .numbered li { counter-increment: n; display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.875rem; color: var(--text-body); line-height: 1.6; } .numbered li::before { content: counter(n); width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #9333ea; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; } .numbered strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 0.25rem; } .pullquote { margin: 0; padding-left: 1.25rem; border-left: 4px solid #9333ea; } .pullquote p { font-size: 1.25rem; line-height: 1.7; color: var(--text); font-weight: 500; } .pullquote footer { margin-top: 0.75rem; font-size: 0.95rem; color: var(--text-muted); } /* FOX 32 segment: thumbnail that links out to YouTube (no embed, no third-party script) */ .video-card { position: relative; display: block; border-radius: var(--radius-panel); overflow: hidden; box-shadow: var(--card-shadow); background: #0f172a; color: #fff; text-decoration: none; aspect-ratio: 16 / 9; /* hqdefault.jpg is 4:3 with black bars; object-fit: cover crops them */ align-self: center; } .video-card:hover { text-decoration: none; box-shadow: var(--card-shadow-hover); } .video-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .video-card:hover img { transform: scale(1.03); } .video-play { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 4.5rem; height: 4.5rem; border-radius: 50%; background: rgb(147 51 234 / 0.92); display: flex; align-items: center; justify-content: center; box-shadow: var(--card-shadow); transition: background-color 0.15s; } .video-card:hover .video-play { background: #7e22ce; } .video-play svg { width: 2.25rem; height: 2.25rem; margin-left: 0.2rem; } .video-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.25rem 1rem; background: linear-gradient(to top, rgb(2 6 23 / 0.9), rgb(2 6 23 / 0)); display: grid; gap: 0.125rem; } .video-caption strong { font-size: 1.125rem; font-weight: 600; } .video-caption span { font-size: 0.875rem; color: #cbd5e1; } /* ---------- attendee quotes ---------- */ .quote-grid { display: grid; gap: 1.5rem; } @media (min-width: 768px) { .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .tcard { margin: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } .tcard p { flex: 1; font-size: 1.0625rem; line-height: 1.65; color: var(--text-body); } .tcard footer { font-size: 0.875rem; line-height: 1.4; color: var(--text-faint); padding-top: 1rem; border-top: 1px solid var(--border-neutral); } .tcard footer strong { display: block; color: var(--text); font-weight: 600; } /* ---------- cards ---------- */ .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); padding: 1.5rem; } .card.elevated { box-shadow: var(--card-shadow); } /* ---------- seats + form ---------- */ .seats { text-align: center; font-weight: 500; color: var(--purple); margin-bottom: 1.5rem; } .seats.full { color: var(--text-muted); } form { margin: 0; } .form-grid { display: grid; gap: 1.25rem; } @media (min-width: 768px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .span-2 { grid-column: 1 / -1; } } .field { display: grid; gap: 0.375rem; } .field label { font-size: 0.875rem; font-weight: 500; color: var(--text); } .field .hint { font-size: 0.75rem; color: var(--text-faint); } .input, .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-input); padding: 0.625rem 1rem; min-height: 2.75rem; transition: border-color 0.15s; } .field textarea { min-height: 7rem; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: #94a3b8; } .field input:focus, .field textarea:focus, .input:focus { outline: none; border-color: #a855f7; box-shadow: 0 0 0 2px rgb(168 85 247 / 0.25); } .field.invalid input, .field.invalid textarea { border-color: var(--error); } .field-error { font-size: 0.875rem; color: var(--error); min-height: 1.25rem; } .field-foot { display: flex; justify-content: space-between; gap: 1rem; } .counter { font-size: 0.75rem; color: var(--text-faint); white-space: nowrap; } .checkbox { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.95rem; color: var(--text-body); cursor: pointer; } .checkbox input { appearance: none; -webkit-appearance: none; flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; border: 1.5px solid var(--border); border-radius: 0.25rem; background: var(--card-bg); display: grid; place-content: center; cursor: pointer; } .checkbox input:checked { background: #9333ea; border-color: #9333ea; } .checkbox input:checked::after { content: ""; width: 0.4rem; height: 0.7rem; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); } .honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font: inherit; font-size: 0.875rem; font-weight: 500; border-radius: var(--radius); height: 2.75rem; padding: 0 2rem; border: 1px solid transparent; cursor: pointer; transition: background-color 0.15s, color 0.15s; text-decoration: none; } .btn:hover { text-decoration: none; } .btn-primary { background: #9333ea; color: #fff; } .btn-primary:hover { background: #7e22ce; } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-outline { background: transparent; color: var(--purple); border-color: var(--purple); } .btn-outline:hover { background: var(--purple-50); } .dark .btn-outline:hover { background: #3b0764; } .btn-block { width: 100%; } .form-actions { display: grid; gap: 0.75rem; margin-top: 0.5rem; } @media (min-width: 640px) { .form-actions { grid-template-columns: auto 1fr; align-items: center; } } .form-note { font-size: 0.875rem; color: var(--text-faint); } .form-error { color: var(--error); font-size: 0.95rem; margin-top: 0.75rem; } .spinner { width: 1rem; height: 1rem; border: 2px solid rgb(255 255 255 / 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- state messages ---------- */ .state-msg { text-align: center; display: grid; gap: 1rem; justify-items: center; } .state-msg h3 { font-size: 1.5rem; font-weight: 700; } .state-msg p { font-size: 1.125rem; color: var(--text-body); max-width: 40rem; } .state-msg .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .mini-form { display: grid; gap: 0.75rem; width: 100%; max-width: 36rem; text-align: left; } @media (min-width: 640px) { .mini-form.inline { grid-template-columns: 1fr 1fr auto; align-items: end; } } /* ---------- get in touch ---------- */ .touch-block { background: linear-gradient(to bottom right, #9333ea, #6b21a8); color: #fff; border-radius: var(--radius-panel); padding: 2rem; box-shadow: var(--card-shadow-hover); text-align: center; max-width: 48rem; margin: 0 auto; } .touch-icons { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1.5rem; color: #fff; } .touch-icons svg { width: 2.5rem; height: 2.5rem; } .touch-block .label { color: var(--purple-100); font-size: 1.125rem; margin-bottom: 0.5rem; } .touch-block a { color: #fff; font-size: 1.5rem; font-weight: 700; text-decoration: none; } .touch-block a:hover { color: var(--purple-200); } .touch-block .divider { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgb(192 132 252 / 0.3); } .touch-block .small { color: var(--purple-200); font-size: 0.875rem; margin-top: 0.25rem; } @media (min-width: 640px) { .touch-block a { font-size: 1.875rem; } } /* ---------- resources grid (blog cards) ---------- */ .resource-grid { display: grid; gap: 2rem; } @media (min-width: 768px) { .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .rcard { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; transition: box-shadow 0.3s, transform 0.3s; height: 100%; } .rcard:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-4px); } .rcard-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } .pill { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); font-size: 0.75rem; line-height: 1rem; font-weight: 500; background: var(--purple-100); color: var(--purple-800-text); } .dark .pill { background: #581c87; color: #e9d5ff; } .meta { font-size: 0.75rem; line-height: 1rem; color: var(--text-faint); display: inline-flex; align-items: center; gap: 0.375rem; } .rcard h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.01em; } .rcard h3 a { color: inherit; } .rcard h3 a:hover { color: var(--purple); text-decoration: none; } .rcard h3 .title-btn { all: unset; font: inherit; color: inherit; cursor: pointer; } .rcard h3 .title-btn:hover { color: var(--purple); } .rcard-desc { color: var(--text-muted); font-size: 0.875rem; line-height: 1.25rem; flex: 1; margin-bottom: 0.75rem; } .rcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .rcard-foot .date { font-size: 0.875rem; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .action { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 500; color: var(--purple); background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; white-space: nowrap; } .action:hover { color: var(--purple-hover); text-decoration: none; } .action svg { width: 1rem; height: 1rem; } .empty { text-align: center; color: var(--text-muted); font-size: 1.125rem; padding: 2rem 0; } /* ---------- article (blog post layout) ---------- */ .article { max-width: var(--content-width); margin: 0 auto; } .article .back { margin-bottom: 2rem; } .article-head { margin-bottom: 2rem; } .article-head .pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .article-head .pill { font-size: 0.875rem; line-height: 1.25rem; } .article-head h1 { font-size: 2.25rem; line-height: 1.25; font-weight: 700; margin-bottom: 1.5rem; } @media (min-width: 640px) { .article-head h1 { font-size: 3rem; } } .article-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; color: var(--text-muted); margin-bottom: 1.5rem; } .article-head .lede { font-size: 1.25rem; line-height: 1.75; color: var(--text-body); } .prose { font-size: 1.125rem; line-height: 1.75; color: var(--text-body); } .prose h2 { margin-top: 2em; margin-bottom: 1em; font-size: 1.5em; font-weight: 700; } .prose h3 { margin-top: 1.6em; margin-bottom: 0.6em; font-size: 1.25em; font-weight: 600; } .prose h4 { margin-top: 1.5em; margin-bottom: 0.5em; font-size: 1.1em; font-weight: 600; color: var(--text); } .prose p { margin-top: 1.25em; margin-bottom: 1.25em; line-height: 1.75; } .prose ul, .prose ol { margin-top: 1.25em; margin-bottom: 1.25em; padding-left: 1.625em; } .prose li { margin-top: 0.5em; margin-bottom: 0.5em; } .prose strong { font-weight: 600; color: var(--text); } .prose a { color: var(--purple); text-decoration: underline; font-weight: 500; } .prose a:hover { text-decoration: none; } .prose code { padding: 0.125rem 0.375rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; background: var(--code-chip-bg); color: var(--code-chip-text); border: 1px solid var(--code-chip-border); } .prose pre { margin: 1.5rem 0; padding: 1rem; border-radius: var(--radius-input); overflow-x: auto; background: var(--code-bg); color: #cbd5e1; border: 1px solid rgb(51 65 85 / 0.3); box-shadow: var(--card-shadow); font-size: 0.875rem; line-height: 1.7; position: relative; padding-top: 2.75rem; } /* header bar with three dots and the language label, as CodeBlock.js renders */ .prose pre::before { content: ""; position: absolute; left: 1rem; top: 0.9rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: rgb(239 68 68 / 0.8); box-shadow: 1.125rem 0 0 rgb(234 179 8 / 0.8), 2.25rem 0 0 rgb(34 197 94 / 0.8); } .prose pre::after { content: attr(data-lang); position: absolute; left: 4.25rem; top: 0.65rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; font-family: var(--font-body); } .prose pre code { background: transparent; border: 0; padding: 0; color: inherit; font-size: inherit; font-weight: 400; } .prose blockquote { margin: 1.6em 0; padding-left: 1em; border-left: 4px solid #9333ea; font-style: italic; color: var(--text-muted); } .prose img { margin: 2em auto; border-radius: var(--radius-card); } .prose table { width: 100%; margin: 2em 0; border-collapse: collapse; font-size: 0.95em; } .prose th { padding: 0.75em; text-align: left; border-bottom: 2px solid var(--border-neutral); font-weight: 600; color: var(--text); } .prose td { padding: 0.75em; border-bottom: 1px solid var(--border-neutral); } .prose hr { margin: 3em 0; border: 0; border-top: 1px solid var(--border-neutral); } /* ---------- access form (TLDR input styling) ---------- */ .access { max-width: 32rem; margin: 0 auto; text-align: center; display: grid; gap: 1rem; } .access p { color: var(--text-muted); font-size: 1.125rem; } .access-row { display: flex; align-items: center; gap: 0.5rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-input); padding: 0.5rem 0.5rem 0.5rem 1rem; transition: border-color 0.15s; } .access-row:focus-within { border-color: #a855f7; } .access-row input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 0.95rem; color: var(--text); padding: 0.375rem 0; outline: none; } .access-row input::placeholder { color: #94a3b8; } .access-row .btn { height: 2.5rem; padding: 0 1rem; border-radius: var(--radius-card); } .access .fine { font-size: 0.75rem; color: #94a3b8; } /* ---------- alerts ---------- */ .notice { border-radius: var(--radius-card); padding: 0.875rem 1rem; font-size: 0.95rem; border: 1px solid var(--border); background: var(--purple-50); color: var(--text-body); } .dark .notice { background: rgb(59 7 100 / 0.4); } .notice.error { border-color: rgb(220 38 38 / 0.4); background: rgb(220 38 38 / 0.06); color: var(--error); } .notice.success { border-color: rgb(22 163 74 / 0.4); background: rgb(22 163 74 / 0.06); } /* ---------- skeletons ---------- */ .skeleton { display: block; border-radius: var(--radius); background: linear-gradient(90deg, rgb(148 163 184 / 0.15), rgb(148 163 184 / 0.3), rgb(148 163 184 / 0.15)); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .sk-h1 { height: 3rem; width: 80%; max-width: 40rem; } .sk-line { height: 1.25rem; width: 100%; max-width: 36rem; } .sk-line.short { width: 55%; } .sk-card { height: 14rem; border-radius: var(--radius-card); } @media (prefers-reduced-motion: reduce) { .skeleton, .spinner { animation: none; } html { scroll-behavior: auto; } } /* ---------- cookie notice ---------- */ .cookie-notice { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-panel); box-shadow: var(--panel-shadow); padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; font-size: 0.875rem; color: var(--text-body); } .cookie-notice p { flex: 1 1 16rem; } .cookie-notice .btn { height: 2.25rem; padding: 0 1rem; border-radius: var(--radius-card); } .cookie-notice .btn-quiet { background: transparent; color: var(--text-body); border-color: #cbd5e1; } .cookie-notice .btn-quiet:hover { background: #f8fafc; } .dark .cookie-notice .btn-quiet { border-color: #334155; color: #cbd5e1; } .dark .cookie-notice .btn-quiet:hover { background: #1e293b; } @media (min-width: 640px) { .cookie-notice { left: auto; max-width: 32rem; } } /* ---------- footer ---------- */ /* Mirrors the purpleowl.io homepage footer: 4 columns, then a bordered bottom bar. */ .site-footer { background: var(--footer-bg); color: #fff; padding: 3rem 0; margin-top: 3rem; } .site-footer .brand { color: #fff; margin-bottom: 1rem; } .site-footer a { color: var(--footer-text); transition: color 0.15s; } .site-footer a:hover { color: var(--purple-400); text-decoration: none; } .footer-grid { display: grid; gap: 2rem; margin-bottom: 2rem; } @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .footer-blurb { color: var(--footer-text); } .footer-col h3 { color: #fff; font-size: 1rem; font-weight: 600; margin-bottom: 1rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; color: var(--footer-text); } .footer-col .soft { opacity: 0.8; } .footer-bottom { padding-top: 2rem; border-top: 1px solid var(--footer-border); text-align: center; } .footer-line { color: var(--footer-text); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 1.5rem; margin-bottom: 1rem; } .footer-line .link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--footer-text); cursor: pointer; transition: color 0.15s; } .footer-line .link-btn:hover { color: var(--purple-400); } .footer-copy { color: var(--footer-text); } .site-footer.compact .footer-inner { text-align: center; } .site-footer.compact .footer-copy { color: var(--footer-faint); font-size: 0.875rem; } /* ---------- utilities ---------- */ .center { text-align: center; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-8 { margin-top: 2rem; } .mb-4 { margin-bottom: 1rem; } .mb-8 { margin-bottom: 2rem; } .muted { color: var(--text-muted); }