/* ---------- Sendy Study Tool — Apple HIG-inspired theme ---------- Semantic tokens, light + dark. Dark kicks in via prefers-color-scheme or the manual toggle (html[data-theme]). */ :root { /* Apple system palette — light */ --blue: #007aff; --green: #34c759; --orange: #ff9500; --red: #ff3b30; --purple: #af52de; --teal: #30b0c7; --bg: #f2f2f7; /* grouped background */ --bg-elevated: #ffffff; /* cards */ --bg-secondary: #f7f7fa; --sidebar-glass: rgba(246, 246, 248, 0.78); --ink: #1d1d1f; --logo-tile: #1d1d1f; --ink-secondary: rgba(60, 60, 67, 0.78); --muted: rgba(60, 60, 67, 0.6); --line: rgba(60, 60, 67, 0.14); --line-strong: rgba(60, 60, 67, 0.24); --fill: rgba(120, 120, 128, 0.12); /* system fill */ --fill-hover: rgba(120, 120, 128, 0.2); /* Brand accent: the mug's amber, everywhere (no blue). Text/links use the deeper shade in light mode for contrast; solid fills stay amber with dark text on top (--on-accent). Dark mode sets --accent to the bright amber. */ --brand: #f5a524; /* fills, and text in dark mode */ --brand-deep: #b8700a; /* text in light mode */ --accent: var(--brand-deep); --accent-fill: var(--brand); --on-accent: #0a0a0a; --accent-soft: color-mix(in srgb, var(--brand) 18%, transparent); --ok: #248a3d; --ok-soft: color-mix(in srgb, #34c759 16%, transparent); --warn: #c93400; --warn-soft: color-mix(in srgb, #ff9500 16%, transparent); --fail: #d70015; --fail-soft: color-mix(in srgb, #ff3b30 12%, transparent); --audio: #8944ab; --audio-soft: color-mix(in srgb, #af52de 14%, transparent); --radius-sm: 7px; --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06); --shadow-lg: 0 2px 8px rgba(0, 0, 0, .08), 0 24px 60px rgba(0, 0, 0, .12); color-scheme: light; } /* ---------- accent palettes ---------- Profile.accent renders as (context_processors.sidebar_courses, picked in the sidebar "Colours" row). Each palette swaps the brand pair every accent token derives from; amber is the default and public pages always keep it. */ html[data-accent="blue"] { --brand: #0a84ff; --brand-deep: #0a60c8; --on-accent: #ffffff; } html[data-accent="green"] { --brand: #30d158; --brand-deep: #1f8a3d; --on-accent: #06210f; } html[data-accent="teal"] { --brand: #40cbe0; --brand-deep: #177d91; --on-accent: #06272e; } html[data-accent="purple"] { --brand: #bf5af2; --brand-deep: #7f2fb8; --on-accent: #ffffff; } html[data-accent="rose"] { --brand: #ff375f; --brand-deep: #c3103b; --on-accent: #ffffff; } html[data-accent="graphite"] { --brand: #a1a1a6; --brand-deep: #48484a; --on-accent: #0a0a0a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --blue: #0a84ff; --green: #30d158; --orange: #ff9f0a; --red: #ff453a; --purple: #bf5af2; --teal: #40cbe0; --accent: var(--brand); --accent-soft: color-mix(in srgb, var(--brand) 14%, transparent); --bg: #0d0d0f; --bg-elevated: #1c1c1e; --bg-secondary: #161618; --sidebar-glass: rgba(22, 22, 24, 0.72); --ink: #f5f5f7; --logo-tile: #2c2c2e; --ink-secondary: rgba(235, 235, 245, 0.72); --muted: rgba(235, 235, 245, 0.55); --line: rgba(84, 84, 88, 0.48); --line-strong: rgba(84, 84, 88, 0.72); --fill: rgba(120, 120, 128, 0.24); --fill-hover: rgba(120, 120, 128, 0.36); --ok: #30d158; --warn: #ffd60a; --fail: #ff6961; --audio: #d8a9f0; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5); --shadow-lg: 0 2px 8px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .6); color-scheme: dark; } } :root[data-theme="dark"] { --blue: #0a84ff; --green: #30d158; --orange: #ff9f0a; --red: #ff453a; --purple: #bf5af2; --teal: #40cbe0; --accent: var(--brand); --accent-soft: color-mix(in srgb, var(--brand) 14%, transparent); --bg: #0d0d0f; --bg-elevated: #1c1c1e; --bg-secondary: #161618; --sidebar-glass: rgba(22, 22, 24, 0.72); --ink: #f5f5f7; --logo-tile: #2c2c2e; --ink-secondary: rgba(235, 235, 245, 0.72); --muted: rgba(235, 235, 245, 0.55); --line: rgba(84, 84, 88, 0.48); --line-strong: rgba(84, 84, 88, 0.72); --fill: rgba(120, 120, 128, 0.24); --fill-hover: rgba(120, 120, 128, 0.36); --ok: #30d158; --warn: #ffd60a; --fail: #ff6961; --audio: #d8a9f0; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5); --shadow-lg: 0 2px 8px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .6); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", sans-serif; background: var(--bg); color: var(--ink); font-size: 15.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background .25s ease, color .25s ease; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 1.9rem; margin: 0 0 .25rem; font-weight: 700; letter-spacing: -0.022em; } h1[style*="--accent"] { border-left: 4px solid var(--accent); padding-left: .65rem; } .muted { color: var(--muted); } .error-text { color: var(--fail); font-size: .9rem; margin: .3rem 0; } /* ---------- layout ---------- */ .layout { display: flex; min-height: 100vh; } .sidebar { width: 256px; flex-shrink: 0; background: var(--sidebar-glass); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-right: 1px solid var(--line); padding: 1.2rem 1rem; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } /* Brand lockup = brand/sendy-wordmark.svg: tile icon, "Sendy" over spaced "STUDY TOOL" */ .brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); margin-bottom: 1.2rem; text-decoration: none; } .brand:hover { text-decoration: none; } .brand .logo-beer { width: 2.25rem; height: 2.25rem; flex: none; } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-name { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.04em; } .brand-sub { margin-top: .22rem; font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .brand-hero { gap: .9rem; } .brand-hero .logo-beer { width: 3.6rem; height: 3.6rem; } .brand-hero .brand-name { font-size: 2.3rem; } .brand-hero .brand-sub { font-size: .8rem; margin-top: .35rem; } .side-course { margin-bottom: 1rem; } .side-course-head { display: flex; align-items: center; gap: .25rem; border-left: 3px solid var(--accent); padding-left: .55rem; margin-bottom: .3rem; border-radius: 1px; } .side-course-title { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); font-size: .93rem; } .side-course-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: none; color: var(--muted); border-radius: var(--radius-sm); cursor: pointer; transition: background .12s ease, color .12s ease; } .side-course-toggle:hover { background: var(--fill); color: var(--ink); } .side-course-toggle svg { transition: transform .18s ease; } .side-course.collapsed .side-course-toggle svg { transform: rotate(-90deg); } .side-course.collapsed .side-units { display: none; } .side-course.collapsed { margin-bottom: .55rem; } @media (prefers-reduced-motion: reduce) { .side-course-toggle svg { transition: none; } } .side-units { display: flex; flex-direction: column; gap: 1px; margin-left: .6rem; padding-left: .4rem; border-left: 1px solid var(--line); } .side-units a { color: var(--ink-secondary); font-size: .88rem; padding: .28rem .6rem; border-radius: var(--radius-sm); transition: background .12s ease; } .side-units a:hover { background: var(--fill); text-decoration: none; } /* active unit: a tint of the class colour with a bar, not a solid brand fill (2026-09-18) */ .side-units a.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); } [data-reorder-url] a[data-slug] { cursor: grab; } [data-reorder-url] a[data-slug].dragging { opacity: .4; cursor: grabbing; } .side-section-label { font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: .3rem .35rem .5rem; } .sidebar nav { flex: 1; overflow-y: auto; min-height: 0; } .side-add { display: block; margin-top: .2rem; padding: .34rem .6rem; font-size: .88rem; font-weight: 500; color: var(--muted); border-radius: var(--radius-sm); transition: background .12s ease, color .12s ease; } .side-add:hover { background: var(--fill); color: var(--accent); text-decoration: none; } .side-profile { display: flex; align-items: center; gap: .65rem; margin-top: .8rem; padding-top: .9rem; border-top: 1px solid var(--line); } .side-avatar { width: 40px; height: 40px; border-radius: 11px; overflow: hidden; flex-shrink: 0; box-shadow: var(--shadow); } .side-avatar svg { display: block; width: 100%; height: 100%; } .side-profile-info { flex: 1; min-width: 0; line-height: 1.3; } .side-profile-name { display: block; font-weight: 600; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; font-size: .8rem; color: var(--muted); } .side-switch { font-size: .8rem; color: var(--muted); } .side-switch:hover { color: var(--accent); } .content { flex: 1; padding: 2.2rem 2.6rem 4rem; min-width: 0; } .content-solo { display: grid; place-items: center; min-height: 100vh; background: var(--bg); max-width: none; } /* theme toggle */ .theme-toggle { background: var(--fill); border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; font-size: .95rem; line-height: 1; display: inline-grid; place-items: center; transition: background .12s ease; } .theme-toggle:hover { background: var(--fill-hover); } /* accent picker (sidebar "Colours" row; app.js `accentPicker`) */ .side-accent { margin-top: .55rem; } .side-accent summary { list-style: none; cursor: pointer; font-size: .8rem; color: var(--muted); width: max-content; } .side-accent summary::-webkit-details-marker { display: none; } .side-accent summary:hover { color: var(--accent); } .accent-form { display: flex; flex-wrap: wrap; gap: .45rem; padding: .55rem 0 .1rem; } .accent-swatch { width: 1.4rem; height: 1.4rem; padding: 0; border-radius: 50%; cursor: pointer; background: var(--swatch); border: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--bg); transition: transform .15s ease, border-color .15s ease; } .accent-swatch:hover { transform: scale(1.12); } .accent-swatch.is-on { border-color: var(--ink); } .accent-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- buttons / pills / forms ---------- */ .btn { display: inline-block; border: none; cursor: pointer; font-size: .92rem; font-weight: 600; font-family: inherit; line-height: 1.3; padding: .5rem 1rem; border-radius: 9px; text-decoration: none !important; transition: transform .07s ease, background .1s ease, filter .1s ease, box-shadow .1s ease; } .btn:active { transform: translateY(1px) scale(.99); filter: brightness(.92); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--accent-fill); color: var(--on-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); } .btn-primary:hover { filter: brightness(1.08); } .btn-ghost { background: var(--fill); color: var(--accent); } .btn-ghost:hover { background: var(--fill-hover); } .btn-danger { background: var(--fill); color: var(--fail); } .btn-danger:hover { background: var(--fail-soft); } .btn-sm { padding: .3rem .8rem; font-size: .85rem; } .btn-row { display: flex; gap: .5rem; align-items: center; } .link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; } .link-btn:hover { text-decoration: underline; } .icon-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .95rem; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; transition: background .12s ease; } .icon-btn:hover { background: var(--fail-soft); color: var(--fail); } .icon-btn-neutral:hover { background: var(--fill-hover); color: var(--ink); } .pill { font-size: .74rem; font-weight: 600; padding: .16rem .55rem; border-radius: 6px; background: var(--fill); color: var(--muted); white-space: nowrap; } .pill-ok { background: var(--ok-soft); color: var(--ok); } .pill-wait { background: var(--warn-soft); color: var(--warn); } .pill-fail { background: var(--fail-soft); color: var(--fail); } .pill-audio { background: var(--audio-soft); color: var(--audio); } input[type="text"], input[type="url"], input[type="password"], textarea, select { font: inherit; padding: .55rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--ink); width: 100%; transition: border-color .12s ease, box-shadow .12s ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px var(--accent-soft); } textarea { resize: vertical; } label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .8rem; } label input, label textarea, label select { margin-top: .3rem; font-weight: 400; } .form-card, .login-card { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.7rem; max-width: 480px; } .login-card { width: 390px; text-align: center; box-shadow: var(--shadow-lg); } .login-card h1 { margin-bottom: 0; border: none; padding: 0; } .login-card form { text-align: left; margin-top: 1.1rem; } .login-card .btn { width: 100%; margin-top: .4rem; } .stack-form { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; } .form-error { color: var(--fail); font-size: .88rem; display: block; margin: .2rem 0 .6rem; } /* class accent colour: preset swatches instead of a colour dropper */ .swatches { border: 0; padding: 0; margin: 0 0 1rem; } .swatches legend { font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: .45rem; padding: 0; } .swatch-row { display: flex; flex-wrap: wrap; gap: .55rem; } .swatch { position: relative; width: 2rem; height: 2rem; cursor: pointer; } .swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .swatch-dot { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); transition: transform .12s ease, box-shadow .12s ease; } .swatch:hover .swatch-dot { transform: scale(1.08); } .swatch input:checked + .swatch-dot { transform: scale(1.1); box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--swatch); } .swatch input:focus-visible + .swatch-dot { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--ink); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .inline-form { display: flex; gap: .5rem; flex: 1; } /* ---------- page furniture ---------- */ .page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .greeting { margin-bottom: 1.6rem; } .greeting h1 { margin-bottom: .25rem; } .greeting-line { color: var(--muted); font-size: 1.02rem; margin: 0; } .greeting-exams_now .greeting-line, .greeting-exams_soon .greeting-line, .greeting-midterms_now .greeting-line, .greeting-midterms_soon .greeting-line { color: var(--ink); font-weight: 500; } .page-subhead { margin: 0; font-size: 1.15rem; } .crumb { margin: 0 0 .1rem; font-size: .85rem; } .card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } @media (max-width: 900px) { .card-grid { grid-template-columns: minmax(0, 1fr); } } .course-card { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.2rem 1.3rem; color: var(--ink); position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; } .course-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); } .course-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); } .course-card h2 { margin: .2rem 0 .2rem; font-size: 1.15rem; letter-spacing: -0.01em; } .course-card p { margin: .15rem 0; font-size: .88rem; } .course-card-head { display: block; color: var(--ink); } .course-card-head:hover { text-decoration: none; } .course-card-head:hover h2 { color: var(--accent); } .course-card-units { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .5rem; display: flex; flex-direction: column; } .course-card-unit { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .42rem .5rem; margin: 0 -.5rem; border-radius: var(--radius-sm); color: var(--ink); font-size: .92rem; transition: background .12s ease; } .course-card-unit:hover { background: var(--fill); text-decoration: none; } .course-card-unit-name { font-weight: 500; flex: 1 1 40%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .course-card .unit-badges { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; } .course-card-none { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .7rem; } .empty-state { background: var(--bg-elevated); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); padding: 2.6rem 2rem; text-align: center; color: var(--muted); margin-top: 1rem; } .empty-state p { margin: .2rem auto; max-width: 440px; } .empty-state .btn { margin-top: 1rem; } .empty-title { font-weight: 600; color: var(--ink); font-size: 1.05rem; } .unit-list { display: flex; flex-direction: column; gap: .55rem; } .unit-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1.15rem; color: var(--ink); transition: border-color .12s ease, transform .12s ease; } .unit-row:hover { text-decoration: none; border-color: var(--accent); transform: translateX(2px); } .unit-badges { display: flex; gap: .4rem; } /* ---------- tabs (segmented-control style) ---------- */ .tab-groups { display: flex; gap: 1.6rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.3rem; } .tab-groups .tabs { margin-bottom: 0; } .tab-group-label { display: block; margin: 0 0 .35rem .5rem; font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .tab-group + .tab-group { border-left: 1px solid var(--line); padding-left: 1.6rem; } .tabs { display: inline-flex; gap: 2px; background: var(--fill); padding: 3px; border-radius: 9px; margin-bottom: 1.3rem; } .tab { padding: .38rem 1rem; color: var(--ink-secondary); font-weight: 600; font-size: .92rem; border-radius: 7px; transition: background .15s ease, color .15s ease; } .tab:hover { text-decoration: none; color: var(--ink); } .tab.active { color: var(--ink); background: var(--bg-elevated); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); } .tab-count { font-size: .74rem; background: var(--fill); border-radius: 5px; padding: 0 .4rem; margin-left: .15rem; } .tab-panel { animation: fadein .18s ease-in; } @keyframes fadein { from { opacity: .5; transform: translateY(3px); } to { opacity: 1; transform: none; } } .panel-actions { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; flex-wrap: wrap; } /* generate card */ .generate-card { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.1rem 1.3rem; margin-bottom: 1rem; position: relative; overflow: hidden; } .generate-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); } .generate-form { display: flex; flex-direction: column; gap: .7rem; } .generate-copy { display: flex; flex-direction: column; gap: .1rem; } .generate-copy strong { font-size: 1rem; letter-spacing: -0.01em; } .generate-copy span { color: var(--muted); font-size: .87rem; } .generate-controls { display: flex; gap: .6rem; align-items: center; } .generate-controls input { flex: 1; } .generate-controls .btn { flex-shrink: 0; } /* toolbar above the rendered notes */ .notes-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .2rem 0 .7rem; } .notes-meta { color: var(--muted); font-size: .82rem; } .version-select { width: auto; font-size: .85rem; padding: .3rem .6rem; } /* ---------- upload / sources ---------- */ .upload-zone { border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--bg-elevated); padding: 1.7rem; text-align: center; margin-bottom: .9rem; transition: border-color .15s, background .15s; } .upload-zone.dragover { border-color: var(--accent); background: var(--accent-soft); } .upload-zone p { margin: .2rem 0; } .upload-icon { width: 40px; height: 40px; margin: 0 auto .5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 1.15rem; font-weight: 700; } .add-row { display: flex; gap: .8rem; margin-bottom: 1.3rem; align-items: flex-start; flex-wrap: wrap; } .paste-details summary { list-style: none; } .paste-details summary::-webkit-details-marker { display: none; } .paste-details form { min-width: 340px; } .source-list { display: flex; flex-direction: column; gap: .45rem; } .source-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem 1rem; } .src-toggle input { width: 17px; height: 17px; accent-color: var(--accent); } .src-kind { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .14rem .5rem; border-radius: 6px; } .kind-pptx { background: var(--warn-soft); color: var(--warn); } .kind-pdf { background: var(--fail-soft); color: var(--fail); } .kind-docx { background: var(--accent-soft); color: var(--accent); } .kind-youtube, .kind-video { background: var(--fail-soft); color: var(--fail); } .kind-text, .kind-link { background: var(--fill); color: var(--muted); } .kind-pocket { background: var(--ok-soft); color: var(--ok); } /* Pocket note-taker panel: the student's own class notes */ .pocket-panel { background: var(--bg-elevated); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: var(--radius-lg); padding: 1rem 1.1rem 1.1rem; margin-bottom: 1.3rem; } .pocket-form { display: flex; flex-direction: column; gap: .6rem; } .pocket-head { display: flex; gap: .8rem; align-items: flex-start; } .pocket-head p { margin: .15rem 0 0; font-size: .88rem; } .pocket-title { margin: 0; font-size: 1rem; } .pocket-icon { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; font-size: 1.05rem; font-weight: 700; } .pocket-form textarea { font-size: .9rem; } .pocket-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; justify-content: space-between; } .pocket-file-label { cursor: pointer; font-size: .85rem; } .pocket-file-label.has-file { border-color: var(--ok); color: var(--ok); } .src-title { flex: 1; min-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .src-title a { color: var(--ink); } .src-fail-detail { flex-basis: 100%; padding-left: 2rem; } .src-player summary { list-style: none; cursor: pointer; } .src-player summary::-webkit-details-marker { display: none; } .src-player[open] { flex-basis: 100%; padding-left: 2rem; } .src-player video { display: block; width: 100%; max-width: 720px; margin-top: .5rem; border-radius: 10px; background: #000; } .src-fail-detail textarea { font-size: .85rem; } .token-bar { margin-top: .8rem; font-size: .85rem; } /* ---------- jobs ---------- */ .job-banner { display: flex; align-items: center; gap: .6rem; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: .65rem 1rem; margin-bottom: 1rem; font-size: .92rem; } .job-failed { background: var(--fail-soft); border-color: var(--fail); } .job-done { background: var(--ok-soft); border-color: var(--ok); } .job-stopped { color: var(--muted); } .job-stop { margin-left: auto; } .job-stop .btn { padding: .18rem .7rem; font-size: .8rem; } .spinner { width: 14px; height: 14px; border: 2px solid var(--accent); border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- notes body ---------- */ .notes-body { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 2.4rem 2.8rem; margin-bottom: .6rem; font-size: 16px; line-height: 1.8; } /* Readable measure: cap text line length so long lines don't overwhelm */ .notes-body > p, .notes-body > ul, .notes-body > ol, .notes-body > dl, .notes-body > blockquote { max-width: 46rem; } .notes-body h2 { font-size: 1.4rem; margin: 2.4rem 0 .9rem; letter-spacing: -0.018em; padding-bottom: .35rem; border-bottom: 1px solid var(--line); } .notes-body h2:first-child { margin-top: 0; } .notes-body h3 { font-size: 1.12rem; margin: 1.7rem 0 .55rem; letter-spacing: -0.01em; } .notes-body h4 { font-size: 1rem; margin: 1.3rem 0 .4rem; } .notes-body p { margin: .85rem 0; } .notes-body ul, .notes-body ol { margin: .7rem 0; padding-left: 1.5rem; } .notes-body li { margin: .45rem 0; } .notes-body li::marker { color: var(--accent); } .notes-body hr { border: none; border-top: 1px solid var(--line); margin: 1.6rem 0; } .notes-body img { max-width: 100%; height: auto; } .notes-body figure { margin: 1.3rem auto; padding: 1rem 1rem .8rem; max-width: 640px; background: var(--bg-secondary); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; } .notes-body figure img { border-radius: var(--radius-sm); background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .1); } .notes-body figcaption { font-size: .84rem; color: var(--muted); margin-top: .6rem; text-align: left; line-height: 1.5; } /* Generated HTML comes from a model: it must never be able to break the layout. Long words and URLs wrap at the box edge (break-word does not shrink table columns the way `anywhere` does), and cells keep their inner spacing tight. */ .notes-body { overflow-wrap: break-word; } .notes-body a { overflow-wrap: anywhere; } .notes-body td > :first-child, .notes-body th > :first-child { margin-top: 0; } .notes-body td > :last-child, .notes-body th > :last-child { margin-bottom: 0; } .notes-body td ul, .notes-body td ol { padding-left: 1.1rem; margin: .25rem 0; } .notes-body td li { margin: .15rem 0; } /* Tables: words never break mid-word (the chat bubble's overflow-wrap:anywhere would otherwise let the auto layout squeeze a column to one letter per line). Wide tables scroll sideways inside .table-wrap (added by app.js) instead. */ .notes-body .table-wrap { overflow-x: auto; margin: 1.1rem 0; border-radius: var(--radius); -webkit-overflow-scrolling: touch; } .notes-body .table-wrap > table { margin: 0; } .notes-body table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 1.1rem 0; font-size: .92rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .notes-body th, .notes-body td { border: none; border-bottom: 1px solid var(--line); padding: .6rem .85rem; text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; hyphens: manual; min-width: 5.5rem; } .notes-body td:first-child { font-weight: 600; } .notes-body th { background: var(--accent-soft); color: var(--accent); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .notes-body tbody tr:last-child td { border-bottom: none; } .notes-body tbody tr:nth-child(even) td { background: var(--bg-secondary); } .notes-body tbody tr { transition: background .12s ease; } .notes-body tbody tr:hover td { background: var(--fill); } /* timeline: chronological content gets a spine, dots, and a scroll-in reveal */ .notes-body .timeline { position: relative; margin: 1.3rem 0; padding-left: 1.7rem; max-width: 46rem; } .notes-body .timeline::before { content: ""; position: absolute; left: .42rem; top: .4rem; bottom: .4rem; width: 2.5px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--teal)); } .notes-body .tl-item { position: relative; margin: 0 0 1.15rem; opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; } .notes-body .tl-item.in-view { opacity: 1; transform: none; } .notes-body .tl-item::before { content: ""; position: absolute; left: -1.55rem; top: .3rem; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3.5px var(--accent-soft); } .notes-body .tl-date { display: block; font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: .1rem; } .notes-body .tl-body p { margin: .2rem 0; } @media (prefers-reduced-motion: reduce) { .notes-body .tl-item { opacity: 1; transform: none; transition: none; } } .notes-body code { background: var(--fill); padding: .12rem .4rem; border-radius: 6px; font-size: .88em; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; } .notes-body pre { background: #1c1c1e; color: #f5f5f7; padding: 1rem 1.2rem; border-radius: var(--radius); overflow-x: auto; } .notes-body pre code { background: none; color: inherit; } .notes-body blockquote { border-left: 3px solid var(--line-strong); margin: .9rem 0; padding: .2rem 1rem; color: var(--muted); } .notes-body .tldr { background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 1rem 1.3rem; margin-bottom: 1.5rem; } .notes-body .tldr::before { content: "TL;DR"; display: block; font-weight: 700; font-size: .76rem; letter-spacing: .08em; color: var(--accent); margin-bottom: .3rem; } .notes-body .callout { background: var(--ok-soft); border-left: 4px solid var(--ok); border-radius: var(--radius); padding: .8rem 1.2rem; margin: 1rem 0; } .notes-body .callout::before { content: "Key insight"; display: block; font-weight: 700; font-size: .76rem; color: var(--ok); margin-bottom: .2rem; } .notes-body .key-term { background: var(--audio-soft); border-radius: var(--radius); padding: .7rem 1.1rem; margin: .8rem 0; } .notes-body .key-term dt { font-weight: 700; color: var(--audio); } .notes-body .key-term dd { margin: .15rem 0 0; } .notes-body .example { background: var(--bg-secondary); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1.2rem; margin: 1rem 0; } .notes-body .example::before { content: "Example"; display: block; font-weight: 700; font-size: .76rem; color: var(--muted); margin-bottom: .2rem; } .notes-body .warning { background: var(--warn-soft); border-left: 4px solid var(--warn); border-radius: var(--radius); padding: .8rem 1.2rem; margin: 1rem 0; } .notes-body .warning::before { content: "Watch out"; display: block; font-weight: 700; font-size: .76rem; color: var(--warn); margin-bottom: .2rem; } .notes-body .recall { background: var(--bg-secondary); border: 1.5px dashed var(--accent); border-radius: var(--radius); padding: .8rem 1.2rem; margin: 1rem 0; } .notes-body .recall::before { content: "Try it from memory first"; display: block; font-weight: 700; font-size: .76rem; letter-spacing: .04em; color: var(--accent); margin-bottom: .2rem; } .notes-body .misconception { background: var(--fail-soft); border-left: 4px solid var(--fail); border-radius: var(--radius); padding: .8rem 1.2rem; margin: 1rem 0; } .notes-body .misconception::before { content: "Feels true, but isn't"; display: block; font-weight: 700; font-size: .76rem; color: var(--fail); margin-bottom: .2rem; } .notes-body .mcq { background: var(--bg-secondary); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.2rem; margin: 1.1rem 0; } .notes-body .mcq::before { content: "Quick check"; display: block; font-weight: 700; font-size: .76rem; letter-spacing: .04em; color: var(--accent); margin-bottom: .35rem; } .notes-body .mcq-q { font-weight: 600; margin: 0 0 .55rem; } .notes-body .mcq-option { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: .45rem .8rem; margin: .35rem 0; cursor: pointer; font-size: .94rem; transition: background .12s ease, border-color .12s ease; } .notes-body .mcq:not(.mcq-answered) .mcq-option:hover { background: var(--fill); border-color: var(--accent); } .notes-body .mcq-answered .mcq-option { cursor: default; opacity: .75; } .notes-body .mcq-answered .mcq-correct { background: var(--ok-soft); border-color: var(--ok); opacity: 1; font-weight: 600; } .notes-body .mcq-answered .mcq-correct::after { content: " ✓"; color: var(--ok); font-weight: 700; } .notes-body .mcq-answered .mcq-picked:not(.mcq-correct) { background: var(--fail-soft); border-color: var(--fail); opacity: 1; } .notes-body .mcq-answered .mcq-picked:not(.mcq-correct)::after { content: " ✕"; color: var(--fail); font-weight: 700; } .notes-body .mcq-why { display: none; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-secondary); } .notes-body .mcq-answered .mcq-why { display: block; } /* margin notes (saved annotations) */ .annotation-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; } .annotation-kind { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); } .annotation-user .annotation-kind { color: var(--warn); } .annotation.unanchored .annotation-kind::after { content: ", from an older version of these notes"; color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; } .annotation-user .clarify-answer { background: var(--warn-soft); border-radius: var(--radius-sm); padding: .5rem .8rem; } .annotation-x { width: 22px; height: 22px; font-size: .8rem; } .annotation-empty { padding: .5rem .2rem; font-size: .9rem; } /* reading progress bar (notes pages) */ .read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--accent), var(--teal)); z-index: 300; transition: width .1s linear; border-radius: 0 2px 2px 0; } /* "Picked up where you left off" toast after a resumed scroll */ .resume-pill { position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, 12px); background: var(--bg-elevated); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); padding: .45rem .95rem; font-size: .85rem; opacity: 0; z-index: 320; pointer-events: none; transition: opacity .3s ease, transform .3s ease; } .resume-pill.show { opacity: 1; transform: translate(-50%, 0); } .draft-status { font-size: .82rem; min-width: 7rem; } /* ---------- highlight-to-ask (clarify) ---------- */ ::highlight(sendy-clarify) { background-color: rgba(255, 204, 0, .38); } .clarify-hint { font-size: .82rem; margin: .2rem 0 0; } .clarify-fab { position: fixed; z-index: 60; border: none; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; line-height: 1.2; padding: .42rem .9rem; border-radius: 980px; background: var(--accent-fill); color: var(--on-accent); box-shadow: var(--shadow-lg); animation: fadein .12s ease-out; } .clarify-fab:hover { filter: brightness(1.1); } .clarify-fab:active { transform: scale(.97); } /* Word-style margin: annotation cards float beside the passage they anchor to. */ .notes-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.4rem; align-items: start; } .notes-main { min-width: 0; } .clarify-panel { position: relative; } #clarify-close, .clarify-head { display: none; } .clarify-exchange { padding: .6rem .75rem; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); font-size: .88rem; transition: box-shadow .18s ease, border-color .18s ease, top .3s ease; } .annotation.floating { position: absolute; left: 0; right: 0; } .annotation.hot, .clarify-exchange:hover { box-shadow: var(--shadow-lg); border-color: var(--accent); } /* connector lines from highlight to card (Word-style) */ .notes-layout { position: relative; } svg.ann-lines { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 4; overflow: visible; } .ann-lines path { fill: none; stroke: color-mix(in srgb, var(--warn) 45%, transparent); stroke-width: 1.5; transition: stroke .15s ease, stroke-width .15s ease; } .ann-lines path.hot { stroke: var(--warn); stroke-width: 2; } /* long cards collapse to a preview; click expands */ .annotation:not(.expanded) .clarify-answer.clampable { max-height: 150px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 97%); mask-image: linear-gradient(180deg, #000 62%, transparent 97%); } .annotation .clarify-answer.clampable { cursor: pointer; } /* the highlighted passage in the text */ mark.ann-anchor { background: color-mix(in srgb, var(--warn) 20%, transparent); color: inherit; border-bottom: 2px solid var(--warn); border-radius: 2px; cursor: pointer; transition: background .15s ease; } mark.ann-anchor.hot, mark.ann-anchor:hover { background: color-mix(in srgb, var(--warn) 38%, transparent); } /* composer: appears in the margin at the height of the selection */ .margin-composer { position: absolute; left: 0; right: 0; z-index: 6; background: var(--bg-elevated); border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .7rem .75rem; } /* high-specificity hide: the later .clarify-form{display:flex} must not win */ .clarify-panel:not(.composing) .margin-composer { display: none; } .margin-composer .clarify-quote[hidden] { display: none; } @media (max-width: 1150px) { /* Narrow screens: fall back to a slide-over drawer with a static list. */ .notes-layout { grid-template-columns: 1fr; } .clarify-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 55; width: min(400px, 100vw); display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--bg-elevated); box-shadow: var(--shadow-lg); transform: translateX(110%); visibility: hidden; transition: transform .22s ease, visibility .22s; } .clarify-panel.open { transform: none; visibility: visible; } #clarify-close { display: inline-grid; } .clarify-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); } .clarify-log { flex: 1; overflow-y: auto; padding: .9rem .9rem 0; } .clarify-exchange { margin-bottom: .9rem; } /* drawer keeps a permanent composer at the bottom */ .clarify-panel:not(.composing) .margin-composer { display: flex; } .margin-composer { position: static; border-color: var(--line); border-radius: 0; border-left: none; border-right: none; border-bottom: none; box-shadow: none; } } .clarify-quote { margin: 0 0 .45rem; padding: .45rem .8rem; border-left: 3px solid var(--warn); border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--ink-secondary); font-size: .84rem; line-height: 1.45; } .clarify-question { margin: 0 0 .45rem; font-size: .9rem; font-weight: 600; } .clarify-answer.notes-body { padding: 0; margin-bottom: 0; font-size: .92rem; line-height: 1.55; background: none; border: none; border-radius: 0; box-shadow: none; } .clarify-answer.notes-body > :first-child { margin-top: 0; } .clarify-answer.notes-body > :last-child { margin-bottom: 0; } .clarify-answer.notes-body h2 { font-size: 1.02rem; margin: .7rem 0 .3rem; border: none; padding: 0; } .clarify-answer.notes-body h3 { font-size: .95rem; margin: .6rem 0 .25rem; } /* Margin answers stay flat: neutralize any boxed elements older answers used. */ .clarify-answer .tldr, .clarify-answer .callout, .clarify-answer .key-term, .clarify-answer .example, .clarify-answer .warning, .clarify-answer .misconception, .clarify-answer .recall, .clarify-answer .mcq { background: none; border: none; box-shadow: none; padding: 0; margin: .45rem 0; } .clarify-answer .tldr::before, .clarify-answer .callout::before, .clarify-answer .example::before, .clarify-answer .warning::before, .clarify-answer .misconception::before, .clarify-answer .recall::before, .clarify-answer .mcq::before { display: none; } .clarify-answer .key-term dt { color: inherit; } .clarify-error { background: var(--fail-soft); border: 1px solid var(--fail); border-radius: var(--radius); padding: .6rem .9rem; font-size: .9rem; } .clarify-form { display: flex; flex-direction: column; gap: .5rem; border-top: 1px solid var(--line); padding: .85rem 1.1rem; } .clarify-form .clarify-quote { max-height: 108px; overflow-y: auto; } .clarify-form .btn { align-self: flex-end; } .clarify-panel .chat-typing { padding: 0 1.1rem .4rem; } /* Answered highlights pinned into the notes so they survive scrolling */ ::highlight(sendy-pinned) { background-color: rgba(255, 204, 0, .2); } /* ---------- podcast ---------- */ .podcast-card { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.5rem 1.7rem; } .podcast-card h3 { margin: 0 0 .8rem; letter-spacing: -0.01em; } .podcast-card audio { width: 100%; } .transcript { white-space: pre-wrap; font-size: .88rem; background: var(--bg-secondary); border: 1px solid var(--line); padding: 1rem; border-radius: var(--radius); max-height: 400px; overflow-y: auto; } /* ---------- print: just the notes ---------- */ @media print { .sidebar, .tabs, .page-head .btn-row, .panel-actions, .job-banner, .clarify-fab, .clarify-panel, .clarify-hint { display: none !important; } .content { padding: 0; max-width: none; } .notes-body { border: none; box-shadow: none; padding: 0; } body { background: #fff; } } @media (max-width: 760px) { .layout { flex-direction: column; } .sidebar { width: 100%; height: auto; position: static; } .content { padding: 1.2rem; } .notes-body { padding: 1.3rem; } .generate-controls { flex-direction: column; align-items: stretch; } } /* ---------- Ask Sendy chat ---------- */ .side-ask { display: block; font-weight: 600; font-size: .93rem; color: var(--ink); padding: .38rem .6rem; border-radius: var(--radius-sm); margin-bottom: 1rem; background: var(--fill); text-align: center; position: relative; overflow: hidden; transition: background .12s ease, transform .15s ease, box-shadow .15s ease; } .side-ask::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 22%, color-mix(in srgb, var(--accent) 18%, transparent) 50%, transparent 78%); transform: translateX(-100%); animation: ask-shimmer 8s ease-in-out infinite; } .side-ask.active::after { background: linear-gradient(105deg, transparent 22%, rgba(255, 255, 255, .34) 50%, transparent 78%); } /* a wide band that takes ~3s to cross, then rests for the remaining ~5s */ @keyframes ask-shimmer { 0%, 62% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .side-ask:hover { background: var(--fill-hover); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); } .side-ask:active { transform: scale(.97); } .side-ask.active { background: var(--accent-soft); color: var(--accent); } /* the same periodic shimmer on every box where you can ask Sendy something */ .query-shimmer { position: relative; overflow: hidden; } .query-shimmer::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(105deg, transparent 22%, color-mix(in srgb, var(--accent) 14%, transparent) 50%, transparent 78%); transform: translateX(-100%); animation: ask-shimmer 8s ease-in-out infinite; } .query-shimmer:focus-within::after { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .side-ask::after, .query-shimmer::after { animation: none; } } .chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 12rem); min-height: 360px; } .chat-scroll { flex: 1; overflow-y: auto; padding: .2rem .2rem 1rem; } .chat-msg { display: flex; margin: .55rem 0; } .chat-user { justify-content: flex-end; } .chat-assistant { justify-content: flex-start; } .chat-bubble { max-width: 78%; min-width: 0; padding: .65rem 1rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); font-size: .95rem; overflow-wrap: break-word; } .chat-user .chat-bubble { background: var(--accent-soft); color: var(--ink); border-bottom-right-radius: 6px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .chat-assistant .chat-bubble { background: var(--bg-elevated); border: 1px solid var(--line); border-bottom-left-radius: 6px; } .chat-bubble.notes-body { padding: .65rem 1.1rem; } /* A bubble holding a table needs the full column so columns aren't crushed. */ .chat-assistant .chat-bubble:has(table) { max-width: 100%; } .chat-bubble.notes-body > :first-child { margin-top: 0; } .chat-bubble.notes-body > :last-child { margin-bottom: 0; } .chat-error { background: var(--fail-soft); border: 1px solid var(--fail); color: var(--ink); } .chat-form { display: flex; gap: .6rem; align-items: flex-end; border-top: 1px solid var(--line); padding-top: .9rem; } .chat-form .chat-input-wrap { flex: 1; min-width: 0; border-radius: var(--radius); } .chat-form textarea { display: block; width: 100%; max-height: 140px; } .chat-form .btn { flex-shrink: 0; } .chat-typing { display: none; gap: 5px; padding: .4rem .6rem; } .chat-typing.htmx-request { display: inline-flex; } .chat-typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: chat-bounce 1.2s infinite ease-in-out; } .chat-typing span:nth-child(2) { animation-delay: .15s; } .chat-typing span:nth-child(3) { animation-delay: .3s; } @keyframes chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } } /* Past chats: history list, search, read-only thread view */ .history-search { position: relative; margin-bottom: 1.3rem; max-width: 46rem; } .history-search input[type="search"] { width: 100%; box-sizing: border-box; padding: .7rem 2.4rem .7rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-elevated); color: var(--ink); font: inherit; font-size: 1rem; } .history-search input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .history-spinner { position: absolute; right: .9rem; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; opacity: 0; animation: spin .8s linear infinite; } .history-search.htmx-request .history-spinner { opacity: 1; } @keyframes spin { to { transform: rotate(360deg); } } .thread-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; max-width: 46rem; } .thread-card { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; transition: border-color .12s ease, transform .07s ease; } .thread-card:hover { border-color: var(--line-strong); } .thread-current { border-left: 3px solid var(--accent); } .thread-main { display: block; padding: .85rem 1.1rem; text-decoration: none; color: inherit; } .thread-main:hover .thread-title { color: var(--accent); } .thread-title { display: block; font-weight: 600; font-size: 1rem; line-height: 1.35; } .thread-meta { display: block; color: var(--muted); font-size: .82rem; margin-top: .2rem; } .thread-hits { list-style: none; margin: 0; padding: .2rem .6rem .7rem; border-top: 1px solid var(--line); } .thread-hit a { display: flex; gap: .6rem; padding: .4rem .5rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); font-size: .88rem; line-height: 1.45; } .thread-hit a:hover { background: var(--fill); } .thread-hit.muted { padding: .2rem .5rem; font-size: .8rem; } .hit-who { flex-shrink: 0; width: 3.2rem; font-weight: 600; font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); padding-top: .15rem; } .thread-hit-user .hit-who { color: var(--accent); } .hit-text mark, .chat-readonly mark { background: var(--warn-soft); color: inherit; border-radius: 3px; padding: 0 .1em; } .crumb { margin: 0 0 .2rem; font-size: .85rem; } .crumb a { color: var(--muted); text-decoration: none; } .crumb a:hover { color: var(--accent); } .thread-heading { font-size: 1.5rem; margin: 0 0 .2rem; } .chat-readonly { max-width: 62rem; } .chat-readonly .chat-msg:target .chat-bubble { outline: 2px solid var(--accent); outline-offset: 3px; } .chat-readonly .chat-msg { scroll-margin-top: 1.5rem; } /* ---------- class context: how the weeks connect ---------- */ .links-card { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1rem 1.2rem 1.1rem; margin-bottom: 1.3rem; } .links-title { margin: 0 0 .15rem; font-size: 1rem; } .links-card > .muted { margin: 0 0 .7rem; font-size: .85rem; } .links-list { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .7rem; } .links-unit { font-weight: 600; color: var(--ink); } .links-summary { margin: .15rem 0 .25rem; font-size: .9rem; } .links-builds, .links-strip { margin: 0; font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } .links-strip { margin: -.3rem 0 .9rem; } .chip { display: inline-block; padding: .12rem .55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; text-decoration: none; } .chip:hover { background: var(--accent-fill); color: var(--on-accent); } /* ---------- class summary ---------- */ .course-summary { margin-top: 2.2rem; } .course-summary .generate-card::before { background: var(--audio); } .chat-bubble.notes-body { font-size: .95rem; line-height: 1.55; margin-bottom: 0; box-shadow: var(--shadow); border-radius: var(--radius-lg); border-bottom-left-radius: 6px; } .chat-bubble.notes-body h2 { font-size: 1.1rem; margin: .8rem 0 .3rem; } .chat-bubble.notes-body h3 { font-size: 1rem; margin: .7rem 0 .25rem; } /* ---------- home layout: main column + year-round right rail ---------- */ .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 34vw, 520px); gap: 2rem; align-items: start; } .home-rail { display: flex; flex-direction: column; gap: 1.2rem; position: sticky; top: 1.6rem; } @media (max-width: 1150px) { .home-grid { grid-template-columns: 1fr; } .home-rail { position: static; } } /* ---------- dashboard: calendar + agenda ---------- */ .dashboard { display: grid; grid-template-columns: 320px 1fr; gap: 1.2rem; margin-bottom: 2.4rem; align-items: stretch; } .dash-title { margin: 0 0 .9rem; font-size: 1.12rem; letter-spacing: -0.01em; } .dash-calendar, .dash-agenda { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.4rem 1.5rem; } .dash-agenda { display: flex; flex-direction: column; } .agenda-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.2rem; gap: .1rem; } .agenda-empty p { margin: .15rem 0; max-width: 380px; } .agenda-empty-title { font-weight: 600; color: var(--ink); font-size: 1rem; } .cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; } .cal-grid th { font-size: .68rem; font-weight: 600; color: var(--muted); text-transform: uppercase; padding: .2rem 0 .45rem; text-align: center; } .cal-grid td { text-align: center; padding: .3rem 0 .38rem; border-radius: 8px; vertical-align: top; height: 50px; } .cal-day { font-size: .95rem; display: block; line-height: 1.55; } .cal-today { background: var(--accent-soft); } .cal-today .cal-day { color: var(--accent); font-weight: 700; } .cal-dots { display: flex; gap: 2px; justify-content: center; margin-top: 2px; min-height: 6px; } .cal-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; } .cal-more { font-size: .6rem; color: var(--muted); line-height: 6px; } .agenda-group { margin-bottom: .9rem; } .agenda-label { margin: 0 0 .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .agenda-row { display: flex; align-items: baseline; gap: .65rem; padding: .42rem .5rem; border-radius: var(--radius-sm); font-size: .95rem; } .agenda-row:hover { background: var(--fill); } .agenda-date { flex-shrink: 0; width: 74px; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; } .agenda-body { flex: 1; min-width: 0; } .agenda-course { font-size: .8rem; color: var(--ink-secondary); border-left: 3px solid var(--accent); padding-left: .4rem; } .agenda-body .agenda-course { display: block; width: fit-content; margin-top: .15rem; } .ev-kind { flex-shrink: 0; font-size: .68rem; font-weight: 700; padding: .1rem .45rem; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; } .ev-homework { background: var(--accent-soft); color: var(--accent); } .ev-quiz { background: var(--audio-soft); color: var(--audio); } .ev-test, .ev-exam { background: var(--fail-soft); color: var(--fail); } .ev-project { background: var(--warn-soft); color: var(--warn); } .ev-lecture, .ev-other { background: var(--fill); color: var(--muted); } .syllabus-card { margin: 1.4rem 0; } .event-details summary { cursor: pointer; color: var(--accent); font-size: .9rem; padding: .4rem 0; } .event-list { margin-top: .4rem; } @media (max-width: 900px) { .dashboard { grid-template-columns: 1fr; } } /* ---------- home: ask bar + left-off resume pill ---------- */ .left-off { display: inline-flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .9rem; padding: .6rem 1.05rem; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); font-size: 1.02rem; color: var(--ink); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .left-off:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-lg); border-color: var(--accent); } .left-off-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .left-off-label { font-weight: 600; letter-spacing: -0.01em; } .left-off-when { font-size: .85rem; color: var(--muted); } .left-off-arrow { color: var(--accent); font-weight: 600; transition: transform .12s ease; } /* brand icon (partials/_logo.html); inline size for prose, overridden in .brand */ .logo-beer { width: 1.25em; height: 1.25em; vertical-align: -0.22em; border-radius: 22.6%; } .agenda-cheers .logo-beer { width: 1.4em; height: 1.4em; } .left-off:hover .left-off-arrow { transform: translateX(2px); } .home-ask { display: flex; align-items: center; gap: .6rem; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: .45rem .6rem .45rem 1rem; margin: 1.1rem 0 1.6rem; max-width: 640px; } .home-ask::after { border-radius: 12px; } .home-ask input { border: none; background: transparent; box-shadow: none; padding: .3rem 0; } .home-ask input:focus { border: none; box-shadow: none; outline: none; } .home-ask .btn { flex-shrink: 0; } /* ---------- full-window drag-and-drop overlay ---------- */ .drop-overlay { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; pointer-events: none; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(3px); } .drop-overlay.active { display: grid; } .drop-overlay-box { border: 2.5px dashed var(--accent); border-radius: var(--radius-lg); background: var(--bg-elevated); box-shadow: var(--shadow-lg); padding: 2.4rem 3.2rem; text-align: center; color: var(--ink); } .drop-overlay-box strong { font-size: 1.2rem; display: block; margin-bottom: .3rem; } .drop-overlay-box span { color: var(--muted); font-size: .92rem; } /* ---------- Flashcards ---------- */ .fc-deck { max-width: 620px; margin-top: 1.4rem; } .fc-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; } .fc-card { perspective: 1200px; height: 300px; cursor: pointer; outline: none; } .fc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.4, .1, .2, 1); } .fc-card.flipped .fc-inner { transform: rotateY(180deg); } .fc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem 2.4rem; font-size: 1.15rem; line-height: 1.5; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .fc-front { font-weight: 600; } .fc-back { transform: rotateY(180deg); background: var(--accent-soft); border-color: var(--accent); } .fc-hint { position: absolute; bottom: .9rem; left: 0; right: 0; font-size: .75rem; font-weight: 500; color: var(--muted); } .fc-controls { display: flex; justify-content: center; gap: .7rem; margin-top: 1.1rem; } .fc-keys { text-align: center; font-size: .8rem; margin-top: .5rem; } @media (prefers-reduced-motion: reduce) { .fc-inner { transition: none; } } /* ---------- Test Mode ---------- */ .test-week-picker { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; } .test-week { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .88rem; font-weight: 500; cursor: pointer; background: var(--fill); border-radius: 8px; padding: .28rem .75rem; } .test-week:has(input:checked) { background: var(--accent-soft); color: var(--accent); } .test-week input { accent-color: var(--accent); margin: 0; } .test-list { display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem; } .test-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.15rem; } .test-row-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .test-row-info .muted { font-size: .85rem; } .test-why { font-style: italic; } .test-instructions { background: var(--accent-soft); border-radius: var(--radius); padding: .7rem 1rem; max-width: 780px; } .test-form { max-width: 780px; } .test-question { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.1rem 1.3rem; margin-bottom: 1rem; } .test-q-head { margin: 0 0 .6rem; font-weight: 500; } .test-q-num { color: var(--accent); font-weight: 700; margin-right: .25rem; } .test-q-pts { font-size: .82rem; } .test-options { display: flex; flex-direction: column; gap: .35rem; } .test-option { display: flex; align-items: baseline; gap: .55rem; margin: 0; font-weight: 400; font-size: .95rem; cursor: pointer; border-radius: var(--radius-sm); padding: .4rem .6rem; } .test-option:hover { background: var(--fill); } .test-option:has(input:checked) { background: var(--accent-soft); } .test-option input { accent-color: var(--accent); } .test-submit-row { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0 2rem; } .test-score-card { display: flex; align-items: center; gap: 1.3rem; max-width: 780px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.2rem 1.4rem; margin-bottom: 1.4rem; } .test-score-big { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); } .test-overall { margin-top: .3rem; font-size: .95rem; } .test-result { max-width: 780px; border-left: 4px solid var(--warn); } .test-result.test-full { border-left-color: var(--ok); } .test-result.test-zero { border-left-color: var(--fail); } .test-q-score { float: right; font-weight: 700; color: var(--ink-secondary); } .test-your-answer { margin: .5rem 0; font-size: .93rem; } blockquote.test-your-answer { border-left: 3px solid var(--line-strong); padding: .4rem .8rem; margin-left: 0; background: var(--bg-secondary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .test-feedback { font-size: .93rem; } .test-feedback p:first-child { margin-top: .3rem; } /* ---------- video overview ---------- */ .podcast-video { width: 100%; border-radius: var(--radius); background: #000; margin: .3rem 0; } .video-head { margin-top: 1.2rem; } .video-hint { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: 1rem; } /* ---------- Bierparty: logo-click easter egg ---------- */ .bierparty { position: fixed; right: 16px; bottom: 16px; z-index: 1000; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: bierparty-in .35s cubic-bezier(.34, 1.4, .64, 1); } .bierparty iframe { display: block; } .bierparty-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--ink); background: linear-gradient(90deg, color-mix(in srgb, var(--orange) 22%, transparent), transparent); } .bierparty-close { border: 0; background: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 2px 4px; border-radius: var(--radius-sm); } .bierparty-close:hover { color: var(--ink); background: var(--fill); } @keyframes bierparty-in { from { transform: translateY(24px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } } .bierparty-wiggle { animation: bierparty-prost .6s ease-in-out infinite; transform-origin: 50% 90%; } @keyframes bierparty-prost { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-11deg) translateY(-1px); } 75% { transform: rotate(11deg) translateY(-1px); } } /* ---------- motion & feedback (app-wide) ---------- Press, ripple, loading and page-entry feedback. Everything non-essential sits under prefers-reduced-motion: no-preference; the reduce block at the end kills the rest. Ripple spans are added by app.js `buttonRipple`. */ .btn, .l-btn { position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; } .btn-primary { transition: transform .12s ease, background .1s ease, filter .1s ease, box-shadow .18s ease; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent-fill) 70%, transparent), 0 1px 2px rgba(0, 0, 0, .18); } .btn-primary:active { transform: translateY(0) scale(.98); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); } .btn-ghost:active, .btn-danger:active { transform: scale(.97); } .ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; width: var(--d); height: var(--d); left: var(--x); top: var(--y); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); background: currentColor; opacity: .16; transform: scale(0); animation: ripple .55s cubic-bezier(.2, .7, .3, 1) forwards; } @keyframes ripple { to { transform: scale(1); opacity: 0; } } /* htmx in flight: the submit button shows a spinner and stops taking clicks */ form.htmx-request .btn[type="submit"], .btn.htmx-request { pointer-events: none; opacity: .82; } form.htmx-request .btn[type="submit"]::before, .btn.htmx-request::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .5em; vertical-align: -0.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; } /* page entry: content settles in on every full load */ @media (prefers-reduced-motion: no-preference) { .content { animation: page-in .32s cubic-bezier(.2, .7, .2, 1) both; } @keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .side-units a { transition: background .12s ease, transform .15s ease, color .12s ease; } .side-units a:hover { transform: translateX(2px); } .tab { transition: background .18s ease, color .18s ease, transform .12s ease; } .tab:active { transform: scale(.97); } .job-banner { animation: fadein .28s ease-out; } } @media (prefers-reduced-motion: reduce) { .ripple { display: none; } .btn-primary:hover, .btn-primary:active, .btn-ghost:active, .btn-danger:active { transform: none; } } /* ---------- site tour (app.js `siteTour`) ---------- Spotlight over a dashboard element (the box-shadow on .tour-spot dims the rest of the page) plus a card with Back / Next / Skip. Built on the app tokens, so it follows the dashboard's light and dark palettes. */ .tour { position: fixed; inset: 0; z-index: 60; opacity: 0; transition: opacity .25s ease; pointer-events: none; } .tour.is-open { opacity: 1; pointer-events: auto; } .tour.is-closing { opacity: 0; pointer-events: none; } .tour-backdrop { position: absolute; inset: 0; } .tour-spot { position: fixed; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .62), 0 0 0 2px var(--accent-fill), 0 0 40px -6px color-mix(in srgb, var(--accent-fill) 60%, transparent); transition: left .4s cubic-bezier(.2, .7, .2, 1), top .4s cubic-bezier(.2, .7, .2, 1), width .4s cubic-bezier(.2, .7, .2, 1), height .4s cubic-bezier(.2, .7, .2, 1), opacity .25s ease; } .tour-card { position: fixed; width: 360px; max-width: calc(100vw - 32px); padding: 1.15rem 1.25rem 1rem; background: var(--bg-elevated); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); transition: left .35s cubic-bezier(.2, .7, .2, 1), top .35s cubic-bezier(.2, .7, .2, 1); } .tour-card.is-centered { left: 50%; top: 50%; transform: translate(-50%, -50%); } .tour-card-in { animation: tour-in .35s cubic-bezier(.2, .7, .2, 1); } @keyframes tour-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } } .tour-count { margin: 0 0 .45rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .tour-title { margin: 0 0 .4rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; border: none; padding: 0; } .tour-body { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--ink-secondary); } .tour-actions { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: 1rem; } .tour-skip { font-size: .82rem; color: var(--muted); } .tour-skip:hover { color: var(--ink); text-decoration: none; } .tour-nav { display: inline-flex; gap: .4rem; } .tour [hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { .tour, .tour-spot, .tour-card { transition: none; } .tour-card-in { animation: none; } } /* ---------- Landing page (anonymous /): black, white, amber ---------- */ body:has(.landing) { background: #0a0a0a; color-scheme: dark; } .content-solo:has(.landing) { display: block; place-items: unset; background: #0a0a0a; min-height: 100vh; padding: 0; } .landing { --l-bg: #0a0a0a; --l-ink: #f5f5f3; --l-ink-2: rgba(245, 245, 243, .62); --l-line: rgba(255, 255, 255, .12); --l-amber: #f5a524; --l-amber-text: #f5a524; --l-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --logo-tile: #1c1c1e; --accent: var(--l-amber); color: var(--l-ink); background: var(--l-bg); max-width: none; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } .landing a { color: inherit; } .landing .brand-name { color: var(--l-ink); } .landing .brand-sub { color: var(--l-ink-2); } .landing .btn-primary { color: #0a0a0a; } .landing-wrap { width: calc(100% - 6rem); margin: 0 auto; } /* nav */ .landing-nav { position: sticky; top: 0; z-index: 5; background: rgba(10, 10, 10, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--l-line); } .landing-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 0; } .landing-nav-links { display: flex; align-items: center; gap: 1.6rem; font-size: .92rem; color: var(--l-ink-2); } .landing-nav-links a:hover { color: var(--l-ink); text-decoration: none; } .landing-nav-signin { color: var(--l-ink); } /* buttons */ .l-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem 1.5rem; border-radius: 10px; border: 1px solid transparent; background: var(--l-amber); color: #0a0a0a; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; line-height: 1.2; transition: background .15s ease, border-color .15s ease, transform .15s ease; } .l-btn:hover { background: #ffb845; color: #0a0a0a; text-decoration: none; transform: translateY(-1px); } .l-btn-ghost { background: transparent; color: var(--l-ink); border-color: var(--l-line); } .l-btn-ghost:hover { background: transparent; color: var(--l-ink); border-color: var(--l-ink); } .l-btn-sm { padding: .5rem .95rem; font-size: .88rem; border-radius: 8px; } .l-btn-block { width: 100%; } .l-btn.is-disabled { opacity: .45; pointer-events: none; } .l-btn:focus-visible { outline: 2px solid var(--l-amber); outline-offset: 3px; } /* type */ .landing-eyebrow { margin: 0 0 1.1rem; font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; color: var(--l-amber-text); } .landing h1, .landing h2, .landing h3 { border: none; padding: 0; color: var(--l-ink); } .landing-hero { padding: 6.5rem 0 4.5rem; } .landing-hero h1 { margin: 0; max-width: 15ch; display: block; font-size: clamp(2.9rem, 7.4vw, 5.8rem); font-weight: 700; letter-spacing: -0.045em; line-height: .98; } .landing-hero h1 em { font-style: normal; color: var(--l-amber); } .landing-hero-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; align-items: end; margin-top: 3rem; padding-top: 2.2rem; border-top: 1px solid var(--l-line); } .landing-lede { margin: 0; max-width: 40rem; font-size: 1.12rem; line-height: 1.6; color: var(--l-ink-2); } .landing-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; justify-self: end; } /* the Get Sendy button reads short now that the price is off it: give it room */ .landing-cta .l-btn:not(.l-btn-ghost) { min-width: 14rem; padding-left: 2.2rem; padding-right: 2.2rem; } .landing-fineprint { flex-basis: 100%; margin: .4rem 0 0; font-size: .78rem; color: var(--l-ink-2); } /* "Secure checkout by [Stripe]": the wordmark sits inline, sized to the text */ .stripe-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35em; } .stripe-mark { height: 1.5em; width: auto; display: inline-block; vertical-align: -0.2em; } /* supported inputs */ .landing-types { border-top: 1px solid var(--l-line); padding: 2.6rem 0 3.2rem; } .landing-types .landing-eyebrow { margin-bottom: 1.2rem; } .landing-types-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--l-line); border: 1px solid var(--l-line); border-radius: 14px; overflow: hidden; } .landing-types-grid li { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.4rem .5rem 1.2rem; background: var(--l-bg); text-align: center; transition: background .2s ease; } .landing-types-grid li:hover { background: #111113; } .landing-types-grid svg { width: 36px; height: 36px; margin-bottom: .55rem; fill: currentColor; color: var(--l-ink); transition: color .2s ease; } .landing-types-grid li:hover svg { color: var(--b, var(--l-ink)); } .landing-types-grid svg .ink { stroke: var(--l-bg); } .landing-types-grid svg .ink-text { fill: var(--l-bg); } .landing-types-grid li:hover svg .ink { stroke: #fff; } .landing-types-grid li:hover svg .ink-text { fill: #fff; } .landing-type-more { grid-column: span 2; justify-content: center; gap: .35rem; } .landing-type-more-label { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--l-amber-text); } .landing-type-more-sub { font-size: .8rem; color: var(--l-ink-2); } .landing-trio li { padding-top: 1.8rem; } .landing-type-name { font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; } .landing-type-ext { font-size: .78rem; color: var(--l-ink-2); } /* sections */ .landing-section { padding: 5.5rem 0; } .landing-section-head { max-width: 44rem; } .landing-section h2 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; } .landing-section-lede { margin: 1.4rem 0 0; max-width: 36rem; font-size: 1.05rem; line-height: 1.6; color: var(--l-ink-2); } .landing-paper { background: #f5f5f3; --l-ink: #0a0a0a; --l-ink-2: rgba(10, 10, 10, .6); --l-line: rgba(10, 10, 10, .14); --l-amber-text: #b8700a; color: var(--l-ink); } /* feature grid */ .landing-list { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem 2.5rem; } .landing-list li::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--l-amber); margin-bottom: 1rem; } .landing-list h3 { margin: 0 0 .4rem; font-size: 1.2rem; font-weight: 650; letter-spacing: -0.02em; } .landing-list p { margin: 0; font-size: .98rem; line-height: 1.55; color: var(--l-ink-2); } /* steps */ .landing-how { border-top: 1px solid var(--l-line); padding-top: 4rem; } .landing-steps { list-style: none; margin: 3.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--l-line); } .landing-steps li { padding: 2.2rem 2rem 2.4rem 0; border-right: 1px solid var(--l-line); } .landing-steps li + li { padding-left: 2rem; } .landing-steps li:last-child { border-right: none; padding-right: 0; } .landing-step-num { display: block; margin-bottom: 1.4rem; font-size: 2.4rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--l-amber-text); } .landing-steps h3 { margin: 0 0 .45rem; font-size: 1.15rem; font-weight: 650; letter-spacing: -0.02em; } .landing-steps p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--l-ink-2); } /* pricing */ .landing-pricing-section { padding-top: 2rem; } .landing-pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .landing-pricing-card { border: 1px solid var(--l-line); border-radius: 16px; padding: 2.2rem; background: rgba(255, 255, 255, .03); } .landing-price { margin: 0 0 1.4rem; font-size: clamp(2.2rem, 4.6vw, 3.2rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; } .landing-pricing-list { list-style: none; padding: 0; margin: 0 0 1.8rem; border-top: 1px solid var(--l-line); } .landing-pricing-list li { display: flex; gap: .8rem; padding: .75rem 0; border-bottom: 1px solid var(--l-line); font-size: .97rem; } .landing-pricing-list li::before { content: "+"; font-weight: 600; color: var(--l-amber-text); } .landing-pricing-card .landing-fineprint { margin-top: 1rem; } /* footer */ .landing-footer { border-top: 1px solid var(--l-line); } .landing-footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding: 2rem 0 3rem; font-size: .85rem; color: var(--l-ink-2); } .landing-footer-links { display: flex; gap: 1.6rem; } .landing-footer a:hover { color: var(--l-ink); text-decoration: none; } /* landing motion: hero entrance, drifting glow, nav, scroll reveals, button sheen. Reveal classes are toggled by app.js `landingMotion`; without JS (or under reduced motion) everything is simply visible. */ @media (prefers-reduced-motion: no-preference) { .l-rise { animation: l-rise .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * .13s + .05s); } @keyframes l-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .landing-hero { position: relative; overflow: hidden; } .landing-hero::before { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 70vw; height: 70vw; max-width: 980px; max-height: 980px; right: -22vw; top: -34vw; border-radius: 50%; background: radial-gradient(circle at center, rgba(245, 165, 36, .17), rgba(245, 165, 36, .05) 38%, transparent 62%); animation: hero-drift 22s ease-in-out infinite alternate; } .landing-hero .landing-wrap { position: relative; z-index: 1; } @keyframes hero-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8vw, 6vw) scale(1.12); } } .js .reveal, .js .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .45s cubic-bezier(.2, .7, .2, 1), transform .45s cubic-bezier(.2, .7, .2, 1); } .js .reveal-stagger > * { transition-delay: calc(min(var(--i, 0), 8) * 40ms); } .js .reveal.in, .js .reveal-stagger.in > * { opacity: 1; transform: none; } .landing-nav { transition: padding .2s ease, background .2s ease, border-color .2s ease; } .landing-nav-inner { transition: padding .25s ease; } .landing-nav.is-scrolled { background: rgba(10, 10, 10, .9); border-bottom-color: rgba(255, 255, 255, .18); } .landing-nav.is-scrolled .landing-nav-inner { padding: .6rem 0; } .l-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .42) 50%, transparent 68%); transform: translateX(-130%); transition: transform .05s; } .l-btn:hover::after { transform: translateX(130%); transition: transform .65s cubic-bezier(.2, .7, .2, 1); } .l-btn-ghost::after { background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .12) 50%, transparent 68%); } .l-btn:not(.l-btn-ghost):hover { box-shadow: 0 10px 28px -8px rgba(245, 165, 36, .6); } .l-btn:active { transform: translateY(0) scale(.98); transition-duration: .06s; } .landing-types-grid li { transition: background .2s ease, transform .2s ease; } .landing-types-grid li:hover { transform: translateY(-2px); } .landing-types-grid svg { transition: color .2s ease, transform .25s cubic-bezier(.2, .7, .2, 1); } .landing-types-grid li:hover svg { transform: scale(1.12); } .landing-pricing-card { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .landing-pricing-card:hover { border-color: rgba(245, 165, 36, .55); box-shadow: 0 30px 80px -30px rgba(245, 165, 36, .35); transform: translateY(-2px); } .landing-list li::before { transform-origin: left; transition: transform .3s ease; } .landing-list li:hover::before { transform: scaleX(1.6); } } /* ---- product walkthrough (.demo, partials/_landing_demo.html) ---- A faux app window. Scenes stack in .demo-main; app.js gives one .is-active at a time and the CSS below plays each scene's choreography from that class. Every element's resting state is its *final* state, so with no animation (reduced motion) a scene still reads as finished. */ .landing-demo { padding: 1.5rem 0 5.5rem; } .landing-demo-head { margin-bottom: 2.4rem; } .demo { position: relative; --d-bg: #0d0d0f; --d-el: #1c1c1e; --d-line: rgba(255, 255, 255, .1); --d-ink: #f5f5f3; --d-ink2: rgba(245, 245, 243, .6); --d-mute: rgba(245, 245, 243, .42); font-size: 13px; line-height: 1.4; } .demo::before { content: ""; position: absolute; inset: -12% -6% auto; height: 80%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, rgba(245, 165, 36, .14), rgba(245, 165, 36, .04) 45%, transparent 68%); } .demo-window { position: relative; z-index: 1; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; overflow: hidden; background: var(--d-bg); color: var(--d-ink); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); } .demo-chrome { display: flex; align-items: center; gap: 1rem; padding: .6rem .9rem; border-bottom: 1px solid var(--d-line); background: #121214; } .demo-dots { display: inline-flex; gap: 6px; } .demo-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); } .demo-url { flex: 1; text-align: center; font-size: 11.5px; color: var(--d-mute); padding: .28rem 1rem; border-radius: 6px; background: rgba(255, 255, 255, .04); margin-right: 3.2rem; } .demo-body { display: grid; grid-template-columns: 184px 1fr; min-height: 440px; } /* sidebar */ .demo-side { border-right: 1px solid var(--d-line); padding: .95rem .85rem; font-size: 12px; background: #101012; display: flex; flex-direction: column; gap: .35rem; } .demo-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 14px; letter-spacing: -0.02em; margin-bottom: .55rem; } .demo-brand svg, .demo-brand .logo { width: 22px; height: 22px; } .demo-ask { padding: .38rem .6rem; border-radius: 7px; border: 1px solid var(--d-line); font-weight: 600; color: var(--d-ink2); transition: background .3s ease, color .3s ease, border-color .3s ease; } .demo.at-ask .demo-ask { background: rgba(245, 165, 36, .14); color: #f5a524; border-color: transparent; } .demo-side-label { margin: .7rem .2rem .25rem; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--d-mute); } .demo-course { display: flex; flex-direction: column; margin-bottom: .35rem; } .demo-course span { padding: .22rem .5rem .22rem .85rem; color: var(--d-ink2); border-radius: 6px; position: relative; transition: background .3s ease, color .3s ease; } .demo-course-title { font-weight: 600; color: var(--d-ink) !important; padding-left: .5rem !important; } .demo-course-title::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: .45rem; vertical-align: 1px; } /* mirrors .side-units a.active: a tint of the class colour with a bar */ .demo-course span.on { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--d-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--c); border-radius: 0 6px 6px 0; } .demo.at-ask .demo-course span.on { background: transparent; color: var(--d-ink2); font-weight: 500; box-shadow: none; } .demo.at-ask .demo-course-title { color: #f5a524 !important; } /* main + scenes */ .demo-main { position: relative; overflow: hidden; } .demo-scene { position: absolute; inset: 0; padding: 1.15rem 1.35rem; display: flex; flex-direction: column; gap: .8rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; } .demo-scene.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease, visibility 0s; } .demo-head { display: flex; align-items: baseline; gap: .6rem; } .demo-h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; } .demo-h1-sub { font-size: 12px; color: var(--d-mute); } .demo-tabs { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 8px; background: rgba(255, 255, 255, .07); font-size: 11.5px; font-weight: 600; color: var(--d-ink2); } .demo-tabs span { padding: .28rem .6rem; border-radius: 6px; white-space: nowrap; } .demo-tabs span.on { background: var(--d-el); color: var(--d-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); } .demo-tabs-tight { margin-bottom: -.2rem; } .demo-btn { display: inline-flex; align-items: center; justify-content: center; padding: .42rem .85rem; border-radius: 7px; background: #f5a524; color: #0a0a0a; font-weight: 600; font-size: 12px; white-space: nowrap; } /* shared choreography primitives */ .demo-swap { display: inline-grid; } .demo-swap > * { grid-area: 1 / 1; } .demo-swap > .a { opacity: 0; } .demo-swap > .b { opacity: 1; } .is-active .demo-swap > .a { animation: demo-a var(--t, 2s) step-end both; } .is-active .demo-swap > .b { animation: demo-b var(--t, 2s) step-end both; } @keyframes demo-a { from { opacity: 1; } to { opacity: 0; } } @keyframes demo-b { from { opacity: 0; } to { opacity: 1; } } @keyframes demo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes demo-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } @keyframes demo-press { 0%, 100% { transform: none; filter: none; } 50% { transform: scale(.93); filter: brightness(.85); } } @keyframes demo-spin { to { transform: rotate(360deg); } } .is-active .demo-press { animation: demo-press .3s ease .7s both; } .is-active .demo-press-late { animation: demo-press .3s ease 1.5s both; } /* 1 upload */ .demo-dropzone { position: relative; border: 1.5px dashed rgba(255, 255, 255, .22); border-radius: 12px; padding: 1.15rem; text-align: center; color: var(--d-mute); font-size: 12.5px; overflow: hidden; } .demo-drop-file { position: absolute; left: 50%; top: 50%; padding: .35rem .7rem; border-radius: 7px; background: var(--d-el); border: 1px solid var(--d-line); color: var(--d-ink); font-size: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); opacity: 0; transform: translate(-50%, -50%); } .is-active .demo-drop-file { animation: demo-drop 2.2s cubic-bezier(.3, .8, .3, 1) .1s both; } @keyframes demo-drop { 0% { opacity: 0; transform: translate(40%, -180%) rotate(6deg); } 20% { opacity: 1; } 45% { opacity: 1; transform: translate(-50%, -50%) rotate(0); } 58% { opacity: 0; transform: translate(-50%, -50%) scale(.85); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.85); } } .is-active .demo-dropzone { animation: demo-glow 2.2s ease .1s both; } @keyframes demo-glow { 0%, 100% { border-color: rgba(255, 255, 255, .22); background: transparent; } 30%, 50% { border-color: #f5a524; background: rgba(245, 165, 36, .07); } } .demo-rows { display: flex; flex-direction: column; } .demo-row { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--d-line); font-size: 12.5px; } .is-active .demo-row { animation: demo-in .35s ease both; animation-delay: calc(var(--i) * .3s + .1s); } .demo-kind { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .12rem .4rem; border-radius: 5px; background: rgba(255, 255, 255, .08); color: var(--d-ink2); } .demo-row-title { flex: 1; color: var(--d-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .demo-pill { font-size: 10.5px; font-weight: 600; padding: .15rem .5rem; border-radius: 6px; border: 1px solid; white-space: nowrap; } .demo-pill.wait { color: var(--d-ink2); border-color: rgba(255, 255, 255, .2); } .demo-pill.ok { color: #30d158; border-color: rgba(48, 209, 88, .45); } /* 2 generate */ .demo-gen { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1rem; border-radius: 12px; border: 1px solid var(--d-line); background: var(--d-el); } .demo-gen::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: #f5a524; } .demo-gen-copy { display: flex; flex-direction: column; gap: .15rem; font-size: 12.5px; color: var(--d-ink2); } .demo-gen-copy strong { color: var(--d-ink); font-size: 13.5px; } .demo-job { display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; border-radius: 10px; border: 1px solid var(--d-line); background: rgba(255, 255, 255, .03); font-size: 12.5px; color: var(--d-ink2); } .demo-job strong { color: var(--d-ink); } .demo-job:not(.demo-job-done) { display: none; } .is-active .demo-job:not(.demo-job-done) { display: flex; animation: demo-job-life var(--t) step-end 1s both; } @keyframes demo-job-life { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } .demo-job-done { color: #30d158; border-color: rgba(48, 209, 88, .4); background: rgba(48, 209, 88, .08); font-weight: 600; margin-top: -.2rem; } .is-active .demo-job-done { animation: demo-pop .35s ease calc(var(--t) + 1s) both; } .demo-spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #f5a524; border-right-color: transparent; } .is-active .demo-spinner { animation: demo-spin .7s linear infinite; } .demo-job-steps { display: inline-grid; } .demo-job-steps span { grid-area: 1 / 1; opacity: 0; } /* each message is invisible until its slot, shown for one second (step-end holds the `from` value), then hidden again by `forwards`; the last one stays */ .is-active .demo-job-steps span { animation: demo-step .6s step-end forwards; animation-delay: calc(var(--i) * .6s + 1s); } .is-active .demo-job-steps span:last-child { animation-name: demo-step-last; } @keyframes demo-step { from { opacity: 1; } to { opacity: 0; } } @keyframes demo-step-last { from { opacity: 1; } to { opacity: 1; } } /* 3 notes */ .demo-notes-layout { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 1.2rem; align-items: start; } .demo-notes { display: flex; flex-direction: column; gap: .55rem; font-size: 12.5px; color: var(--d-ink2); } .demo-notes h4 { margin: 0 0 .1rem; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--d-ink); border: none; padding: 0; } .demo-notes p { margin: 0; } .demo-math { font-family: "Times New Roman", Times, serif; font-size: 14px; color: var(--d-ink); text-align: center; padding: .35rem 0; } .demo-recall { padding: .55rem .75rem; border-radius: 9px; border: 1px solid rgba(245, 165, 36, .4); background: rgba(245, 165, 36, .08); color: var(--d-ink); } .demo-recall strong { color: #f5a524; margin-right: .4rem; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; } .is-active .demo-notes > * { animation: demo-in .4s ease both; animation-delay: calc(var(--i) * .22s + .05s); } /* highlight-to-ask: the mark sweeps as a selection, a pill pops under it, the margin composer types the question, then Sendy's card takes its place and the mark settles into the persistent anchor style (the resting state). */ .demo-notes { position: relative; } .demo-sel { position: relative; color: inherit; border-radius: 2px; padding: 0 .1em; margin: 0 -.1em; background-color: rgba(255, 159, 10, .22); border-bottom: 2px solid #ff9f0a; background-image: linear-gradient(rgba(255, 204, 0, .38), rgba(255, 204, 0, .38)); background-repeat: no-repeat; background-size: 0% 100%; } .is-active .demo-sel { animation: demo-select 3.9s linear both; } @keyframes demo-select { 0%, 22% { background-size: 0% 100%; background-color: transparent; border-bottom-color: transparent; } 38%, 99.9% { background-size: 100% 100%; background-color: transparent; border-bottom-color: transparent; } 100% { background-size: 0% 100%; background-color: rgba(255, 159, 10, .22); border-bottom-color: #ff9f0a; } } .demo-fab { position: absolute; left: 0; top: calc(100% + 5px); z-index: 3; white-space: nowrap; padding: .3rem .7rem; border-radius: 999px; background: #f5a524; color: #0a0a0a; font-size: 11px; font-weight: 600; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .8); opacity: 0; transform: scale(.9); pointer-events: none; } .is-active .demo-fab { animation: demo-fab 2.8s ease both; } @keyframes demo-fab { 0%, 57% { opacity: 0; transform: scale(.9) translateY(4px); } 62%, 82% { opacity: 1; transform: none; } 87% { opacity: 1; transform: scale(.92); filter: brightness(.85); } 91% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; transform: none; } } .demo-margin { display: grid; padding-top: 2.4rem; min-width: 0; } .demo-margin > * { grid-area: 1 / 1; min-width: 0; max-width: 100%; } .demo-composer, .demo-ann { position: relative; display: flex; flex-direction: column; gap: .4rem; padding: .65rem .75rem; border-radius: 10px; border: 1px solid var(--d-line); background: var(--d-el); font-size: 11.5px; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6); } .demo-composer { border-color: #f5a524; opacity: 0; visibility: hidden; } .is-active .demo-composer { animation: demo-composer 4.2s step-end both; } @keyframes demo-composer { 0% { opacity: 0; visibility: hidden; } 64% { opacity: 1; visibility: visible; } 93%, 100% { opacity: 0; visibility: hidden; } } .demo-composer-quote { font-style: italic; color: var(--d-ink2); } .demo-composer-input { display: block; width: 100%; min-width: 0; box-sizing: border-box; padding: .35rem .5rem; border-radius: 6px; border: 1px solid var(--d-line); background: var(--d-bg); min-height: 1.6em; color: var(--d-ink); overflow: hidden; white-space: nowrap; } .demo-type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: max-content; max-width: 100%; } .is-active .demo-type { animation: demo-type .8s steps(23) 2.85s both; } @keyframes demo-type { from { max-width: 0; } to { max-width: 100%; } } .demo-composer-ask { align-self: flex-end; padding: .3rem .7rem; font-size: 11px; } .is-active .demo-composer-ask { animation: demo-press .3s ease 3.55s both; } .demo-ann::before { content: ""; position: absolute; left: -1.2rem; top: 1.1rem; width: 1.2rem; height: 1px; background: #ff9f0a; } .is-active .demo-ann { animation: demo-pop .4s ease 3.9s both; } .demo-ann-head { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f5a524; } .demo-ann-x { color: var(--d-mute); letter-spacing: 0; } .demo-ann-q { font-weight: 600; color: var(--d-ink); } .demo-ann-a { color: var(--d-ink2); } /* 4 flashcards */ .demo-fc { display: flex; flex-direction: column; gap: .7rem; max-width: 440px; width: 100%; margin: 1.6rem auto 0; } .demo-fc-top { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--d-mute); } .demo-fc-card { perspective: 1000px; height: 168px; } .demo-fc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(180deg); } .is-active .demo-fc-inner { animation: demo-flip 3s cubic-bezier(.4, 0, .2, 1) both; } @keyframes demo-flip { 0%, 55% { transform: none; } 72%, 100% { transform: rotateY(180deg); } } .demo-fc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; text-align: center; padding: 1.2rem 1.5rem; border-radius: 14px; border: 1px solid var(--d-line); background: var(--d-el); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--d-ink); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .7); } .demo-fc-front { flex-direction: column; } .demo-fc-hint { display: block; margin-top: .6rem; font-size: 10.5px; font-weight: 500; color: var(--d-mute); } .demo-fc-back { transform: rotateY(180deg); background: rgba(245, 165, 36, .12); border-color: #f5a524; font-weight: 500; font-size: 13.5px; } .demo-fc-controls { display: flex; justify-content: center; gap: .5rem; font-size: 12px; font-weight: 600; } .demo-fc-controls > span:not(.demo-btn) { padding: .42rem .8rem; border-radius: 7px; background: rgba(255, 255, 255, .07); color: var(--d-ink2); } /* 5 podcast */ .demo-pod { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; margin-top: .9rem; } .demo-slide { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border-radius: 12px; background: #f5f5f3; color: #0a0a0a; min-height: 190px; } .demo-slide-kicker { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #b8700a; } .demo-slide-title { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: .35rem; } .demo-slide ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; font-size: 12.5px; } .demo-slide li { padding-left: .9rem; position: relative; } .demo-slide li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: #f5a524; } .is-active .demo-slide li { animation: demo-in .4s ease both; animation-delay: calc(var(--i) * .55s + .35s); } .demo-player { display: flex; flex-direction: column; gap: .55rem; padding: .9rem 1rem; border-radius: 12px; border: 1px solid var(--d-line); background: var(--d-el); } .demo-hosts { display: flex; gap: .4rem; font-size: 11px; font-weight: 600; } .demo-hosts span { padding: .18rem .55rem; border-radius: 999px; border: 1px solid var(--d-line); color: var(--d-ink2); } .demo-hosts .demo-host-live { border-color: #f5a524; color: #f5a524; } .demo-wave { display: flex; align-items: center; gap: 3px; height: 38px; } .demo-wave i { flex: 1; height: calc(var(--h) * 100%); border-radius: 2px; background: #f5a524; opacity: .85; transform-origin: center; } .is-active .demo-wave i { animation: demo-wave 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -.13s); } @keyframes demo-wave { from { transform: scaleY(.35); opacity: .5; } to { transform: scaleY(1); opacity: 1; } } .demo-timeline { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; } .demo-timeline i { display: block; height: 100%; width: 41%; background: #f5a524; } .is-active .demo-timeline i { animation: demo-progress 4.8s linear both; } @keyframes demo-progress { from { width: 38%; } to { width: 44%; } } .demo-times { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--d-mute); } .demo-caption { margin: .1rem 0 0; font-size: 12px; color: var(--d-ink2); } .demo-caption strong { color: var(--d-ink); } .is-active .demo-caption { animation: demo-in .4s ease .9s both; } /* 6 ask */ .demo-chat { display: flex; flex-direction: column; gap: .6rem; flex: 1; } .demo-msg { max-width: 82%; padding: .6rem .85rem; border-radius: 12px; font-size: 12.5px; line-height: 1.45; } .demo-msg-user { align-self: flex-end; background: rgba(245, 165, 36, .14); color: var(--d-ink); border: 1px solid rgba(245, 165, 36, .3); border-bottom-right-radius: 4px; } .demo-msg-sendy { align-self: flex-start; background: var(--d-el); border: 1px solid var(--d-line); color: var(--d-ink2); border-bottom-left-radius: 4px; } .demo-msg-sendy strong { color: var(--d-ink); } .is-active .demo-msg-user { animation: demo-pop .35s ease .15s both; } .is-active .demo-msg-sendy { animation: demo-pop .35s ease .7s both; } .demo-typing { display: inline-flex; gap: 4px; padding: .2rem 0; } .demo-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--d-ink2); } .is-active .demo-typing i { animation: demo-dot 1s ease-in-out infinite; } .demo-typing i:nth-child(2) { animation-delay: .15s; } .demo-typing i:nth-child(3) { animation-delay: .3s; } @keyframes demo-dot { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-3px); opacity: 1; } } .demo-chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; } .demo-chip { font-size: 11px; font-weight: 600; padding: .22rem .55rem; border-radius: 6px; border: 1px solid rgba(245, 165, 36, .5); color: #f5a524; } .demo-composer { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem .35rem .35rem .9rem; border-radius: 10px; border: 1px solid var(--d-line); color: var(--d-mute); font-size: 12.5px; } /* step buttons under the window */ .demo-steps { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; position: relative; z-index: 1; } .demo-steps button { position: relative; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--l-ink-2); background: transparent; border: none; border-top: 1px solid var(--l-line); padding: .9rem .1rem 0; overflow: hidden; transition: color .2s ease; } .demo-steps button:hover, .demo-steps button:focus-visible { color: var(--l-ink); outline: none; } .demo-steps li.is-active button { color: var(--l-ink); } .demo-step-name { display: block; font-weight: 650; font-size: .95rem; letter-spacing: -0.01em; color: inherit; } .demo-step-sub { display: block; margin-top: .15rem; font-size: .78rem; color: var(--l-ink-2); } .demo-step-bar { position: absolute; left: 0; top: -1px; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--l-amber); } .demo-steps li.is-active .demo-step-bar { animation: demo-bar var(--dur, 5s) linear forwards; } .demo-steps li.is-done .demo-step-bar { transform: scaleX(1); opacity: .35; } @keyframes demo-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .demo-scene *, .demo-step-bar, .demo-spinner, .demo-typing i { animation: none !important; } .demo-scene { transition: none; } .demo-steps li.is-active .demo-step-bar { transform: scaleX(1); } .demo-job:not(.demo-job-done) { display: none !important; } } @media (max-width: 1000px) { .demo-steps { grid-template-columns: repeat(3, 1fr); } } /* /story/ */ .story-hero { padding-bottom: 3.5rem; } .story-hero h1 { max-width: 18ch; font-size: clamp(2.4rem, 5.6vw, 4.4rem); } .story-body { border-top: 1px solid var(--l-line); padding: 4.5rem 0 3rem; } .story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem; align-items: start; } .story-aside { position: sticky; top: 6rem; } .story-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--l-line); } .story-facts li { display: flex; gap: .8rem; padding: .75rem 0; border-bottom: 1px solid var(--l-line); font-size: .95rem; color: var(--l-ink-2); } .story-facts li::before { content: "+"; font-weight: 600; color: var(--l-amber-text); } .story-prose { max-width: 40rem; } .story-prose p { margin: 0 0 1.4rem; font-size: 1.08rem; line-height: 1.65; color: var(--l-ink-2); } .story-lead { font-size: 1.35rem !important; line-height: 1.45 !important; color: var(--l-ink) !important; letter-spacing: -0.01em; } .story-signoff { color: var(--l-ink) !important; font-weight: 500; } .story-cta { border-top: 1px solid var(--l-line); } .story-cta-row { margin-top: 2rem; justify-self: start; } /* /thanks/ */ .landing-thanks { min-height: 100vh; padding: 2rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; } .landing-thanks .brand-hero { justify-content: center; } .landing-thanks h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.04em; } .landing-thanks .landing-lede { max-width: 34rem; } .landing-thanks .landing-lede a { color: var(--l-amber); } .btn-lg { padding: .85rem 1.7rem; font-size: 1.05rem; border-radius: 10px; } .btn.is-disabled { opacity: .55; cursor: default; pointer-events: none; } @media (max-width: 1000px) { .landing-types-grid { grid-template-columns: repeat(4, 1fr); } .landing-type-more { grid-column: span 4; } } @media (max-width: 760px) { .landing-wrap { width: calc(100% - 2rem); } .landing-nav-links { gap: 1rem; } .landing-nav-links a:not(.landing-nav-signin):not(.l-btn) { display: none; } .landing-hero { padding: 3.6rem 0 3rem; } .landing-hero-row { grid-template-columns: 1fr; gap: 1.8rem; margin-top: 2rem; } .landing-cta { justify-self: start; } .landing-section { padding: 3.6rem 0; } .landing-types-grid { grid-template-columns: repeat(4, 1fr); } .landing-types-grid li { padding: 1rem .3rem .9rem; } .landing-types-grid svg { width: 30px; height: 30px; } .landing-type-name { font-size: .82rem; } .landing-list { grid-template-columns: 1fr; gap: 1.8rem; } .landing-steps { grid-template-columns: 1fr; } .landing-steps li { border-right: none; border-bottom: 1px solid var(--l-line); padding: 1.8rem 0; } .landing-steps li + li { padding-left: 0; } .landing-steps li:last-child { border-bottom: none; } .landing-pricing { grid-template-columns: 1fr; gap: 2rem; } .landing-pricing-card { padding: 1.6rem; } .story-grid { grid-template-columns: 1fr; gap: 2rem; } .story-aside { position: static; } .story-body { padding: 3rem 0 1.5rem; } .landing-demo { padding: .5rem 0 3.4rem; } .landing-demo-head { margin-bottom: 1.6rem; } .demo { font-size: 12px; } .demo-body { grid-template-columns: 1fr; min-height: 400px; } .demo-side { display: none; } .demo-scene { padding: .9rem .9rem; } .demo-tabs { max-width: 100%; overflow: hidden; font-size: 10px; } .demo-tabs span { padding: .25rem .3rem; } .demo-fc { margin-top: .6rem; } .demo-pod { margin-top: .2rem; } .demo-notes-layout, .demo-pod { grid-template-columns: 1fr; } .demo-margin { padding-top: .3rem; } .demo-ann::before { display: none; } .demo-scene[data-scene="notes"] .demo-recall { display: none; } .demo-slide { min-height: 0; } .demo-steps { grid-template-columns: repeat(2, 1fr); gap: .4rem; } .demo-step-sub { display: none; } .demo-url { display: none; } /* phone pass (2026-09-19): shorter page, less stacked text. Headline fits two lines, lists go compact or two-up, inputs become pills. */ .landing-nav-inner { padding: .7rem 0; } .landing-hero { padding: 2.6rem 0 2.4rem; } .landing-hero h1 { font-size: 2.25rem; letter-spacing: -0.04em; line-height: 1.02; max-width: none; } .landing-hero-row { margin-top: 1.4rem; padding-top: 1.4rem; gap: 1.3rem; } .landing-lede { font-size: 1rem; line-height: 1.5; } .landing-cta { width: 100%; } .landing-cta .l-btn { flex: 1 1 0; min-width: 0; padding-left: 1rem; padding-right: 1rem; } .landing-eyebrow { margin-bottom: .7rem; font-size: .85rem; } .landing-section { padding: 3rem 0; } .landing-section h2 { font-size: 1.75rem; letter-spacing: -0.035em; } .landing-demo { padding: .25rem 0 2.6rem; } .landing-demo-head { margin-bottom: 1.1rem; } .demo-body { min-height: 350px; } .demo-steps { grid-template-columns: repeat(3, 1fr); } /* steps: number beside the text instead of a tall block per step */ .landing-how { padding-top: 3rem; } .landing-steps { margin-top: 1.4rem; } .landing-steps li { display: grid; grid-template-columns: 2rem 1fr; column-gap: .8rem; align-items: baseline; padding: 1.05rem 0; } .landing-step-num { grid-row: 1 / span 2; margin: 0; font-size: 1.5rem; } .landing-steps h3 { font-size: 1.02rem; margin-bottom: .2rem; } .landing-steps p { font-size: .9rem; line-height: 1.45; } .landing-trio li { grid-template-columns: 1fr; padding: .95rem 0; } /* supported inputs: a wrapped row of pills, names only */ .landing-types { padding: 2.2rem 0 2.4rem; } .landing-types .landing-eyebrow { margin-bottom: .9rem; } .landing-types-grid { display: flex; flex-wrap: wrap; gap: .45rem; background: none; border: none; border-radius: 0; overflow: visible; } .landing-types-grid li { flex-direction: row; gap: .45rem; padding: .42rem .7rem .42rem .55rem; border: 1px solid var(--l-line); border-radius: 999px; background: transparent; } .landing-types-grid svg { width: 16px; height: 16px; margin: 0; } .landing-type-name { font-size: .84rem; } .landing-type-ext, .landing-type-more-sub { display: none; } .landing-type-more { grid-column: auto; border-style: dashed; } .landing-type-more-label { font-size: .84rem; } /* features: two-up */ .landing-list { grid-template-columns: 1fr 1fr; gap: 1.3rem 1.1rem; margin-top: 1.6rem; } .landing-list li::before { width: 22px; margin-bottom: .55rem; } .landing-list h3 { font-size: 1rem; margin-bottom: .2rem; } .landing-list p { font-size: .86rem; line-height: 1.45; } .landing-pricing-section { padding-top: 1rem; } .landing-pricing-card { padding: 1.4rem; } .landing-price { font-size: 2.1rem; margin-bottom: 1rem; } .landing-pricing-list li { padding: .6rem 0; font-size: .92rem; } .landing-footer-inner { padding: 1.5rem 0 2.2rem; flex-direction: column; gap: .8rem; } } /* ---------- Dashboard (home.html): the landing aesthetic, signed in ---------- Tokens sit on so the sidebar matches the page. Dark theme = the landing's black band, light theme = its white "paper" band. Amber is the accent; per-class colours stay on the cards, sidebar and calendar dots. */ body:has(.dash) { --bg: #0a0a0a; --bg-elevated: #111113; --bg-secondary: #0f0f11; --sidebar-glass: rgba(10, 10, 10, .82); --ink: #f5f5f3; --ink-secondary: rgba(245, 245, 243, .62); --muted: rgba(245, 245, 243, .55); --line: rgba(255, 255, 255, .12); --line-strong: rgba(255, 255, 255, .24); --fill: rgba(255, 255, 255, .06); --fill-hover: rgba(255, 255, 255, .1); --accent: var(--brand); --accent-soft: color-mix(in srgb, var(--brand) 14%, transparent); --logo-tile: #1c1c1e; --l-ink: var(--ink); --l-ink-2: var(--ink-secondary); --l-line: var(--line); --l-amber: var(--brand); --l-amber-text: var(--brand); /* labels: the app's own sans, tracked small caps, not the landing's monospace */ --l-mono: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --shadow: none; --shadow-lg: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) body:has(.dash) { --bg: #f5f5f3; --bg-elevated: #ffffff; --bg-secondary: #efefec; --sidebar-glass: rgba(245, 245, 243, .86); --ink: #0a0a0a; --ink-secondary: rgba(10, 10, 10, .6); --muted: rgba(10, 10, 10, .55); --line: rgba(10, 10, 10, .14); --line-strong: rgba(10, 10, 10, .26); --fill: rgba(10, 10, 10, .05); --fill-hover: rgba(10, 10, 10, .09); --accent: var(--brand-deep); --accent-soft: color-mix(in srgb, var(--brand) 18%, transparent); --logo-tile: #1d1d1f; --l-amber-text: var(--brand-deep); } } :root[data-theme="light"] body:has(.dash) { --bg: #f5f5f3; --bg-elevated: #ffffff; --bg-secondary: #efefec; --sidebar-glass: rgba(245, 245, 243, .86); --ink: #0a0a0a; --ink-secondary: rgba(10, 10, 10, .6); --muted: rgba(10, 10, 10, .55); --line: rgba(10, 10, 10, .14); --line-strong: rgba(10, 10, 10, .26); --fill: rgba(10, 10, 10, .05); --fill-hover: rgba(10, 10, 10, .09); --accent: var(--brand-deep); --accent-soft: color-mix(in srgb, var(--brand) 18%, transparent); --logo-tile: #1d1d1f; --l-amber-text: var(--brand-deep); } .dash { max-width: 1280px; } .dash-eyebrow { margin: 0 0 .7rem; font-family: var(--l-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--l-amber-text); } /* hero: date eyebrow, big salutation, lede, resume row */ .dash-hero { margin: 0; padding: .6rem 0 2.2rem; border-bottom: 1px solid var(--line); } .dash-hero h1 { margin: 0; max-width: 18ch; font-size: clamp(2.4rem, 4.6vw, 3.8rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; } .dash .greeting-line { margin: 1rem 0 0; max-width: 40rem; font-size: 1.1rem; line-height: 1.55; color: var(--ink-secondary); } .dash .greeting-exams_now .greeting-line, .dash .greeting-exams_soon .greeting-line, .dash .greeting-midterms_now .greeting-line, .dash .greeting-midterms_soon .greeting-line { color: var(--ink); } .dash .left-off { margin-top: 1.5rem; padding: .7rem 1.1rem; gap: .9rem; background: transparent; border: 1px solid var(--line); border-radius: 10px; box-shadow: none; font-size: 1rem; transition: border-color .15s ease; } .dash .left-off:hover { transform: none; box-shadow: none; border-color: var(--ink); } .dash .left-off-kicker { font-family: var(--l-mono); font-weight: 600; letter-spacing: .1em; color: var(--l-amber-text); } .dash .left-off-when { font-size: .85rem; } /* ask bar: hairline box, amber button */ .dash .home-ask { margin: 2rem 0 0; max-width: 760px; background: transparent; border: 1px solid var(--line); border-radius: 12px; box-shadow: none; padding: .5rem .5rem .5rem 1.1rem; transition: border-color .15s ease; } .dash .home-ask:focus-within { border-color: var(--ink); } .dash .home-ask input { color: var(--ink); font-size: 1rem; } .dash .home-ask input::placeholder { color: var(--ink-secondary); } .dash .home-ask .l-btn { flex-shrink: 0; } /* section heads: eyebrow + tight h2, button on the right, like a landing band */ .dash .home-grid { margin-top: 2.6rem; } .dash-band-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; } .dash-band-head .dash-eyebrow { margin-bottom: .5rem; } .dash-h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; } /* class cards: flat, hairline, still colour-coded by --accent */ .dash .course-card { background: transparent; border: 1px solid var(--line); border-radius: 14px; box-shadow: none; padding: 1.3rem 1.4rem 1.1rem; transition: border-color .15s ease, background .15s ease; } .dash .course-card::before { height: 3px; } .dash .course-card:hover { transform: none; box-shadow: none; border-color: var(--accent); background: color-mix(in srgb, var(--ink) 2%, transparent); } .course-card-kicker { margin: 0 0 .35rem; font-family: var(--l-mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .dash .course-card h2 { margin: 0; font-size: 1.3rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1.15; } .dash .course-card-units { margin-top: 1rem; padding-top: 0; } .dash .course-card-unit { margin: 0; padding: .6rem 0; border-radius: 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; row-gap: .35rem; transition: color .12s ease; } .dash .course-card-unit-name { flex: 1 1 14ch; white-space: normal; line-height: 1.3; } .dash .course-card-unit:last-child { border-bottom: none; padding-bottom: .1rem; } .dash .course-card-unit:hover { background: transparent; } .dash .course-card-unit:hover .course-card-unit-name { color: var(--accent); } .dash .course-card-none { margin-top: 1rem; padding-top: .8rem; font-size: .9rem; } .dash .pill { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .18rem .5rem; border-radius: 6px; background: transparent; border: 1px solid var(--line); color: var(--ink-secondary); } .dash .pill-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); } .dash .pill-audio { color: var(--audio); border-color: color-mix(in srgb, var(--audio) 45%, transparent); } /* empty state */ .dash .empty-state { background: transparent; border: 1px dashed var(--line-strong); border-radius: 14px; padding: 3rem 2rem; margin-top: 0; } .dash .empty-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; } .dash .empty-state .l-btn { margin-top: 1.4rem; } /* right rail: calendar + agenda as bordered panels */ .dash .home-rail { top: 1.2rem; } .dash .dash-calendar, .dash .dash-agenda { background: color-mix(in srgb, var(--ink) 3%, transparent); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; padding: 1.4rem 1.5rem 1.3rem; } .dash .dash-title { margin: 0 0 1rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; } .dash .cal-grid th { font-weight: 600; letter-spacing: .08em; font-size: .64rem; } .dash .cal-grid td { border-radius: 6px; } .dash .agenda-label { font-family: var(--l-mono); font-weight: 600; letter-spacing: .1em; color: var(--l-amber-text); margin-bottom: .2rem; } .dash .agenda-group { margin-bottom: 1.2rem; } .dash .agenda-row { padding: .6rem 0; border-radius: 0; border-bottom: 1px solid var(--line); } .dash .agenda-row:hover { background: transparent; } .dash .agenda-group .agenda-row:last-child { border-bottom: none; } .dash .agenda-date { font-size: .8rem; width: 78px; } .dash .agenda-empty { padding: 1.6rem 1rem 1.2rem; } .dash .agenda-empty-title { font-size: 1.05rem; } @media (max-width: 760px) { .dash-hero { padding-bottom: 1.6rem; } .dash .home-grid { margin-top: 2rem; } .dash .course-card { padding: 1.1rem 1.1rem .9rem; } } /* django.contrib.messages (billing, password changes) */ .flash-stack { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.2rem; } .flash { padding: .7rem 1rem; border-radius: var(--radius-sm); font-size: .92rem; background: var(--accent-soft); color: var(--ink); border: 1px solid var(--line); } .flash-error { background: var(--fail-soft); color: var(--fail); } .flash-success { background: var(--ok-soft, var(--accent-soft)); }