/* ========================================================================== Spotless Mind — Components Navigation, buttons, cards, forms, overlays. Tokens only. ========================================================================== */ /* -------------------------------------------------------------------------- Header / primary navigation A floating pill that gains weight and a solid ground once you scroll. -------------------------------------------------------------------------- */ nav#nav { position: fixed; top: var(--space-3); left: 50%; transform: translateX(-50%); z-index: var(--z-nav); display: flex; align-items: center; gap: var(--space-3); height: var(--nav-height); padding: 0 var(--space-2) 0 var(--space-5); width: min(var(--page-max), calc(100% - var(--space-6))); background: var(--nav-bg); border: 1px solid var(--border-subtle); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); border-radius: var(--radius-full); box-shadow: var(--shadow-2); transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out); } /* Scrolled state — set by JS on . Denser, more opaque, closer to the edge. */ nav#nav.is-stuck { top: var(--space-2); background: var(--nav-bg-stuck); border-color: var(--border); box-shadow: var(--shadow-4); } .logo { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); color: var(--text); white-space: nowrap; cursor: pointer; border-radius: var(--radius-sm); text-decoration: none; } .logo em { font-style: normal; color: var(--brand); transition: letter-spacing var(--dur-slow) var(--ease-out); } .logo:hover em { letter-spacing: .04em; } .nv-links { display: flex; align-items: center; gap: var(--space-1); flex: 1; justify-content: center; min-width: 0; } .nv-top { display: inline-flex; align-items: center; gap: var(--space-1); text-decoration: none; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-muted); padding: var(--space-3) var(--space-4); min-height: 2.75rem; border-radius: var(--radius-full); white-space: nowrap; line-height: 1; position: relative; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .nv-top:hover { color: var(--text); background: var(--glass-quiet); } .nv-top i { font-style: normal; font-size: .62em; opacity: .7; transition: transform var(--dur-fast) var(--ease-out); } /* Active section indicator — an underline that grows from the centre */ .nv-top::after { content: ""; position: absolute; left: 50%; bottom: .45rem; width: 0; height: 2px; border-radius: 2px; background: currentColor; transform: translateX(-50%); transition: width var(--dur-base) var(--ease-out); } .nv-top:hover::after { width: 42%; } .nv-top.active, .nv-grp.active > .nv-top { color: var(--text-on-brand); background: var(--brand); } .nv-top.active::after, .nv-grp.active > .nv-top::after { width: 0; } /* Dropdown group */ .nv-grp { position: relative; } .nv-grp.open .nv-top i { transform: rotate(180deg); } .nv-panel { position: absolute; top: calc(100% + var(--space-3)); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 20rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-2); box-shadow: var(--shadow-5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast); } /* Invisible bridge so the pointer can travel from trigger to panel */ .nv-panel::before { content: ""; position: absolute; top: calc(var(--space-3) * -1); left: 0; right: 0; height: var(--space-3); } .nv-grp.open .nv-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nv-item { display: block; text-decoration: none; color: var(--text); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); transition: background var(--dur-fast) var(--ease-out); } .nv-item:hover, .nv-item:focus-visible { background: var(--brand-tint); } .nv-item b { display: block; font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semi); } .nv-item span { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; line-height: var(--leading-normal); } .nv-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .nv-login { border: 1px solid var(--border); color: var(--text); font-size: var(--text-base); font-weight: var(--weight-semi); padding: var(--space-3) var(--space-4); border-radius: var(--radius-full); white-space: nowrap; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .nv-login:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); } .nv-login.on { background: var(--brand-tint-2); border-color: var(--brand); } /* Icon buttons in the nav rail — 44px touch target minimum */ #themeBtn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--border); border-radius: 50%; color: var(--text); flex-shrink: 0; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring); } #themeBtn:hover { border-color: var(--brand); background: var(--brand-tint); } #themeBtn:active { transform: scale(.92); } #themeBtn svg { width: 1.125rem; height: 1.125rem; } /* Show the sun in dark mode (what you'd switch TO) and the moon in light */ #themeBtn .i-sun { display: none; } :root[data-theme="dark"] #themeBtn .i-sun { display: block; } :root[data-theme="dark"] #themeBtn .i-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #themeBtn .i-sun { display: block; } :root:not([data-theme="light"]) #themeBtn .i-moon { display: none; } } .nv-burger { display: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--border); flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .nv-burger:hover { border-color: var(--brand); background: var(--brand-tint); } .nv-burger span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } @media (max-width: 1140px) { .nv-hide-1100 { display: none; } } @media (max-width: 960px) { nav#nav { height: 3.5rem; width: calc(100% - var(--space-4)); top: var(--space-2); padding: 0 var(--space-2) 0 var(--space-4); gap: var(--space-2); } .nv-links, .nv-login { display: none; } .nv-burger { display: flex; } .page { padding-top: calc(3.5rem + var(--space-7)); } } /* -------------------------------------------------------------------------- Mobile menu -------------------------------------------------------------------------- */ .mn { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--bg); display: flex; flex-direction: column; opacity: 0; transform: translateY(-8px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); overflow: auto; overscroll-behavior: contain; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } .mn.on { opacity: 1; transform: none; } .mn-top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5) var(--space-3); } .mn-close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--border); background: var(--glass); color: var(--text); } .mn-close svg { width: 1rem; height: 1rem; } .mn-body { padding: var(--space-1) var(--space-5) var(--space-5); flex: 1; } .mn-link, .mn-grp-h { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 3.5rem; text-align: left; text-decoration: none; border-bottom: 1px solid var(--border-subtle); color: var(--text); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semi); padding: var(--space-4) var(--space-1); transition: color var(--dur-fast) var(--ease-out); } .mn-link:hover, .mn-grp-h:hover { color: var(--brand); } .mn-link.active { color: var(--brand); } .mn-grp-h i { font-style: normal; font-size: var(--text-xl); color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out); } .mn-grp.open .mn-grp-h i { transform: rotate(45deg); } .mn-grp-b { display: none; padding: var(--space-1) 0 var(--space-3); } .mn-grp.open .mn-grp-b { display: block; } .mn-sub { display: block; width: 100%; min-height: 3.25rem; text-align: left; background: var(--glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text); padding: var(--space-3) var(--space-4); margin: var(--space-2) 0; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .mn-sub:hover { border-color: var(--brand); background: var(--brand-tint); } .mn-sub.active { border-color: var(--brand); background: var(--brand-tint); } .mn-sub b { display: block; font-family: var(--font-display); font-size: var(--text-md); } .mn-sub span { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; line-height: var(--leading-normal); } .mn-foot { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-7); flex-wrap: wrap; } .mn-foot .btn { flex: 1; justify-content: center; min-width: 9rem; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-weight: var(--weight-semi); font-size: var(--text-base); line-height: 1.2; min-height: 2.875rem; padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); border: 1px solid transparent; text-decoration: none; position: relative; overflow: hidden; isolation: isolate; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .btn:active { transform: translateY(0) scale(.985); } /* Cursor-aware sheen. Position comes from --bx/--by set by JS; it degrades to a centred highlight if that never runs. */ .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(9rem circle at var(--bx, 50%) var(--by, 50%), rgba(255,255,255,.28), transparent 60%); opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); } .btn:hover::after { opacity: 1; } .btn-primary { background: var(--brand); color: var(--text-on-brand); box-shadow: var(--shadow-brand); } .btn-primary:hover { background: var(--brand-hover); transform: translateY(-2px); box-shadow: var(--shadow-4), var(--shadow-brand); } .btn-ghost { background: var(--glass); color: var(--text); border-color: var(--border); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); transform: translateY(-2px); } .btn-sm { min-height: 2.75rem; padding: var(--space-2) var(--space-5); font-size: var(--text-base); } .btn-block { width: 100%; } /* -------------------------------------------------------------------------- Icons — one set, uniform 1.6px stroke on a 24 grid, currentColor -------------------------------------------------------------------------- */ .icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand); margin-bottom: var(--space-3); flex: none; transition: transform var(--dur-slow) var(--ease-spring), background var(--dur-base) var(--ease-out); } .icon svg { width: 1.375rem; height: 1.375rem; } .icon-sm { width: 2rem; height: 2rem; border-radius: var(--radius-sm); } .icon-sm svg { width: 1.0625rem; height: 1.0625rem; } /* Accent variants so a grid of cards is not one flat colour */ .icon-warm { background: color-mix(in oklab, var(--deco-warm) 15%, transparent); color: var(--accent-warm); } .icon-cool { background: color-mix(in oklab, var(--deco-cool) 15%, transparent); color: var(--accent-cool); } .icon-rose { background: color-mix(in oklab, var(--deco-rose) 15%, transparent); color: var(--accent-rose); } .icon-plum { background: color-mix(in oklab, var(--deco-plum) 15%, transparent); color: var(--accent-plum); } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .card { position: relative; background: var(--glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-6); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .card > h3 { transition: color var(--dur-fast) var(--ease-out); } .card p { color: var(--text-muted); font-size: var(--text-base); } .card p + p { margin-top: var(--space-3); } .card:hover, .card:focus-visible { transform: translateY(-3px); border-color: var(--border-brand); box-shadow: var(--shadow-4); background: var(--glass-strong); } .card:hover > h3 { color: var(--brand); } .card:hover .icon { transform: scale(1.08) rotate(-4deg); } /* Pointer-following sheen; --mx/--my are set by JS, centred if not. */ .card .sheen { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--brand) 12%, transparent), transparent 60%); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); } .card:hover .sheen { opacity: 1; } /* Cards that act as links get the affordance and a real hit target */ .card[role="link"], .card[role="button"], a.card, button.card { cursor: pointer; text-align: left; width: 100%; color: inherit; font: inherit; } .card-go { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-3); font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--brand); } .card-go svg { width: .9em; height: .9em; transition: transform var(--dur-base) var(--ease-out); } .card:hover .card-go svg { transform: translateX(4px); } /* -------------------------------------------------------------------------- Badges, pills, chips -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--glass); border: 1px solid var(--border); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-size: var(--text-xs); color: var(--text-muted); width: fit-content; } .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; animation: pulse 2.4s var(--ease-in-out) infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--brand-ring); } 50% { box-shadow: 0 0 0 7px transparent; } } @media (prefers-reduced-motion: reduce) { .pulse { animation: none; } } .premium, .pm-badge, .pr-tag, .rq-badge { display: inline-block; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-semi); letter-spacing: var(--tracking-wide); text-transform: uppercase; background: color-mix(in oklab, var(--deco-warm) 18%, transparent); color: var(--accent-warm); border: 1px solid color-mix(in oklab, var(--deco-warm) 34%, transparent); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); white-space: nowrap; } .card > .premium { position: absolute; top: var(--space-4); right: var(--space-4); } .soon { font-size: var(--text-xs); border: 1px dashed var(--border); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); color: var(--accent-warm); } .cat-pill { background: var(--glass); border: 1px solid var(--border); color: var(--text-muted); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-size: var(--text-base); min-height: 2.375rem; font-family: var(--font-body); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .cat-pill:hover { color: var(--text); border-color: var(--brand); transform: translateY(-1px); } .cat-pill.on { background: var(--brand); color: var(--text-on-brand); border-color: transparent; } .pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--block-gap); } .skill-chip { display: inline-block; font-size: var(--text-xs); background: color-mix(in oklab, var(--deco-warm) 13%, transparent); color: var(--accent-warm); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); margin: var(--space-2) var(--space-2) 0 0; transition: transform var(--dur-fast) var(--ease-spring); } .skill-chip:hover { transform: scale(1.07); } /* Generic "pill link" used by the compass, quest, profile and course panels */ .fc-pill, .pf-pill, .sj-pill, .rq-pill { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--glass); border: 1px solid var(--border); color: var(--text); padding: var(--space-2) var(--space-4); min-height: 2.5rem; border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--text-base); text-align: left; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .fc-pill:hover, .pf-pill:hover, .sj-pill:hover, .rq-pill:hover { border-color: var(--brand); background: var(--brand-tint); transform: translateY(-2px); } .fc-pill span, .pf-pill span, .sj-pill span, .rq-pill span { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-warm); } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .field-label, .pr-form-org label, .sj-write label { display: block; font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--text); margin-bottom: var(--space-2); } input[type="text"], input[type="email"], input[type="search"], textarea, select, .pr-form-org input, .pr-form-org select, .pr-form-org textarea, .sj-write textarea, .sj-write input { display: block; width: 100%; min-height: 2.875rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); color: var(--text); font-family: var(--font-body); font-size: var(--text-base); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } textarea { resize: vertical; min-height: 6rem; line-height: var(--leading-normal); } input::placeholder, textarea::placeholder { color: var(--text-faint); } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); } input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--accent-rose); } /* Newsletter form — input + button on one line, stacking when narrow */ .nl-form { display: flex; gap: var(--space-3); max-width: 32rem; margin: var(--block-gap) auto 0; flex-wrap: wrap; } .nl-form input { flex: 1 1 14rem; border-radius: var(--radius-full); padding-inline: var(--space-5); } .nl-form .btn { flex: 0 0 auto; } .nl-msg { margin-top: var(--space-3); font-size: var(--text-base); color: var(--brand); min-height: 1.4em; } .nl-msg[data-state="error"] { color: var(--accent-rose); } .search { border-radius: var(--radius-full); padding: var(--space-4) var(--space-5); background: var(--glass); margin: var(--space-5) 0 var(--block-gap); font-size: var(--text-md); } .pr-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); margin-bottom: var(--space-4); } @media (max-width: 560px) { .pr-row { grid-template-columns: 1fr; } } /* Honeypot */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* -------------------------------------------------------------------------- Accordion / FAQ -------------------------------------------------------------------------- */ .faq-item { border-bottom: 1px solid var(--border-subtle); } .faq-q { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); width: 100%; text-align: left; font-family: var(--font-display); font-weight: var(--weight-semi); font-size: var(--text-lg); color: var(--text); padding: var(--space-5) var(--space-1); transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-base) var(--ease-out); } .faq-q:hover { color: var(--brand); padding-left: var(--space-2); } .faq-q .faq-mark { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--border); color: var(--brand); transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out); } .faq-q .faq-mark svg { width: .8rem; height: .8rem; } .faq-item.open .faq-mark { transform: rotate(45deg); background: var(--brand-tint); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); color: var(--text-muted); font-size: var(--text-base); line-height: var(--leading-prose); } .faq-a > div { overflow: hidden; } .faq-item.open .faq-a { grid-template-rows: 1fr; } .faq-item.open .faq-a > div { padding-bottom: var(--space-5); } .faq-a p + p { margin-top: var(--space-3); } /* Pricing FAQ shares the mechanic in a boxed skin */ .pr-fq { background: var(--glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); margin-bottom: var(--space-3); overflow: hidden; transition: border-color var(--dur-fast) var(--ease-out); } .pr-fq:hover { border-color: var(--border); } .pr-fq-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; padding: var(--space-4) var(--space-5); color: var(--text); font-family: var(--font-display); font-size: var(--text-lg); text-align: left; min-height: 3.5rem; } .pr-fq-h:hover { background: var(--glass-quiet); } .pr-fq-h i { font-style: normal; font-size: var(--text-xl); color: var(--text-muted); flex: none; transition: transform var(--dur-base) var(--ease-out); } .pr-fq.open .pr-fq-h i { transform: rotate(45deg); color: var(--brand); } .pr-fq-b { display: none; padding: 0 var(--space-5) var(--space-5); } .pr-fq-b.on { display: block; } .pr-fq-b p { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text-muted); } /* -------------------------------------------------------------------------- Overlays: toast, modals, article reader -------------------------------------------------------------------------- */ #toast { position: fixed; bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateY(5rem); z-index: var(--z-toast); background: var(--surface-inverse); color: var(--text-inverse); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); font-size: var(--text-base); opacity: 0; pointer-events: none; box-shadow: var(--shadow-5); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); max-width: calc(100vw - var(--space-8)); } #toast.on { opacity: 1; transform: translateX(-50%) translateY(0); } .au-modal, .pwa-modal { position: fixed; inset: 0; z-index: var(--z-modal); background: color-mix(in oklab, var(--green-950) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: var(--space-5); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); } .au-modal.on, .pwa-modal.on { opacity: 1; } .au-card, .pwa-card { position: relative; width: min(34rem, 100%); max-height: 88svh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: var(--space-7); box-shadow: var(--shadow-5); text-align: left; animation: modalIn var(--dur-slow) var(--ease-entrance); } .pwa-card { width: min(36rem, 100%); } @keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } @media (max-width: 560px) { .au-card, .pwa-card { padding: var(--space-5); } } .au-x { position: absolute; top: var(--space-3); right: var(--space-3); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--border); background: var(--glass); color: var(--text); transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .au-x:hover { border-color: var(--accent-rose); transform: rotate(90deg); } .au-x svg { width: .9rem; height: .9rem; } .au-card h3, .pwa-card h3 { font-size: var(--text-2xl); margin: var(--space-2) 0 var(--space-3); padding-right: var(--space-7); } .au-card p, .pwa-card p, .pwa-card li { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text-muted); margin-bottom: var(--space-4); } .au-modal-b { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); } .au-fine, .pwa-fine { font-size: var(--text-sm) !important; margin: 0 !important; } /* Article reader */ #reader { position: fixed; inset: 0; z-index: var(--z-reader); display: none; align-items: flex-start; justify-content: center; overflow-y: auto; overscroll-behavior: contain; /* A heavier dim instead of a backdrop blur: blurring the entire viewport while a long illustrated story scrolls over it costs a full-screen re-raster per frame, and the dim reads the same. */ background: color-mix(in oklab, var(--green-950) 82%, transparent); padding: var(--space-8) var(--space-4); } #reader.on { display: flex; } .reader-card { position: relative; max-width: 48rem; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: clamp(1.5rem, 4vw, 3.25rem); margin-bottom: var(--space-9); box-shadow: var(--shadow-5); animation: readerIn var(--dur-slower) var(--ease-entrance); } @keyframes readerIn { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } } #readerClose { position: sticky; top: 0; float: right; margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--border); background: var(--glass-strong); color: var(--text); z-index: 2; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } #readerClose:hover { border-color: var(--accent-rose); transform: rotate(90deg); } #readerClose svg { width: 1rem; height: 1rem; } /* Category banner at the head of an article */ .art-banner { position: relative; height: 7.5rem; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--block-gap); display: grid; place-items: center; background: linear-gradient(130deg, color-mix(in oklab, var(--b1) 22%, var(--surface)), color-mix(in oklab, var(--b2) 20%, var(--surface))); border: 1px solid var(--border-subtle); } .art-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; } .art-banner-i { position: relative; width: 2.75rem; height: 2.75rem; color: var(--text); opacity: .78; } .reader-card .cat { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--accent-rose); font-weight: var(--weight-medium); } .reader-card h1 { font-size: var(--text-3xl); margin: var(--space-3) 0 var(--space-2); } .reader-card .rmeta { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--block-gap); } .reader-card h2 { font-size: var(--text-xl); margin: var(--space-7) 0 var(--space-3); color: var(--brand); } .reader-card p { color: var(--text-body); font-size: var(--text-md); line-height: var(--leading-loose); margin-bottom: var(--space-4); max-width: var(--measure); } .reader-card .pull { border-left: 3px solid var(--brand); padding: var(--space-4) var(--space-5); margin: var(--block-gap) 0; background: var(--brand-tint); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-family: var(--font-display); font-size: var(--text-lg); color: var(--text); } .reader-card .tryit { background: var(--brand-tint); border: 1px solid var(--border-brand); border-radius: var(--radius-lg); padding: var(--space-5); margin: var(--block-gap) 0; } .reader-card .tryit b { font-family: var(--font-display); color: var(--brand); } .reader-card .tryit ol { margin: var(--space-3) 0 0; padding-left: var(--space-5); } .reader-card .tryit li { margin-bottom: var(--space-2); } /* Cookie notice */ #cookie { position: fixed; bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); left: var(--space-4); right: var(--space-4); max-width: 26rem; z-index: var(--z-menu); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); display: none; box-shadow: var(--shadow-5); } #cookie p { font-size: var(--text-base); color: var(--text-muted); } #cookie .row { margin-top: var(--space-3); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border-subtle); background: var(--bg-sunk); margin-top: var(--section-gap); padding: var(--space-9) var(--page-gutter) calc(var(--space-7) + env(safe-area-inset-bottom, 0px)); color: var(--text-muted); font-size: var(--text-base); } .footer-inner { max-width: var(--page-max); margin-inline: auto; display: grid; grid-template-columns: minmax(16rem, 1.3fr) repeat(3, minmax(9rem, 1fr)); gap: var(--space-8) var(--space-6); } @media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-inner { grid-template-columns: 1fr; gap: var(--space-6); } } .footer-brand .logo { font-size: var(--text-2xl); display: inline-block; margin-bottom: var(--space-3); } .footer-brand p { max-width: 30ch; line-height: var(--leading-normal); } .footer-cred { margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); line-height: var(--leading-normal); } .footer-col h3 { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-4); } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); } .footer-col a { display: inline-block; color: var(--text-muted); text-decoration: none; padding: var(--space-3) 0; min-height: 2.75rem; transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .footer-col a:hover { color: var(--brand); transform: translateX(3px); } .footer-base { max-width: var(--page-max); margin: var(--space-8) auto 0; padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-faint); } .footer-base p { max-width: 62ch; }