/* ── Parthenon entry pages — design system ────────────────────────────── Calm, modern, a little editorial. Warm paper + ink, one lapis accent. Light/dark via prefers-color-scheme. No frameworks, no external assets. */ :root { color-scheme: light; --bg: #f5f3ed; --surface: #fdfcf9; --ink: #221f19; --muted: #6f6a5e; --faint: #a49e90; --line: #e4dfd2; --line-strong: #d2ccbc; --accent: #2b5fae; --accent-hover: #234f92; --accent-ink: #ffffff; --accent-soft: rgba(43, 95, 174, 0.07); --ring: rgba(43, 95, 174, 0.28); --err: #a04a35; --err-soft: rgba(160, 74, 53, 0.08); --ok: #3e7d53; --shadow: 0 1px 2px rgba(35, 28, 15, 0.04), 0 24px 60px -28px rgba(35, 28, 15, 0.25); --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ── Themes ────────────────────────────────────────────────────────────── The theme is a token set selected by `data-theme` on . assets/theme.js sets it before first paint (localStorage choice, or the OS when "system"). Every component reads these tokens, so a new theme is ONLY a value block. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #14161a; --surface: #1b1e24; --ink: #e9e7e0; --muted: #98948a; --faint: #6b675e; --line: #2b2f37; --line-strong: #3a3f49; --accent: #8ab0ea; --accent-hover: #a3c2f2; --accent-ink: #10121a; --accent-soft: rgba(138, 176, 234, 0.08); --ring: rgba(138, 176, 234, 0.3); --err: #de9483; --err-soft: rgba(222, 148, 131, 0.09); --ok: #8ec9a3; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 60px -28px rgba(0, 0, 0, 0.6); } /* no-JS fallback: follow the OS until theme.js has stamped data-theme */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #14161a; --surface: #1b1e24; --ink: #e9e7e0; --muted: #98948a; --faint: #6b675e; --line: #2b2f37; --line-strong: #3a3f49; --accent: #8ab0ea; --accent-hover: #a3c2f2; --accent-ink: #10121a; --accent-soft: rgba(138, 176, 234, 0.08); --ring: rgba(138, 176, 234, 0.3); --err: #de9483; --err-soft: rgba(222, 148, 131, 0.09); --ok: #8ec9a3; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 60px -28px rgba(0, 0, 0, 0.6); } } /* Azure — pure white, vivid blue accent (light) */ :root[data-theme="azure"] { color-scheme: light; --bg: #ffffff; --surface: #ffffff; --ink: #16202e; --muted: #5b6878; --faint: #93a0b1; --line: #e4e8ef; --line-strong: #cdd5e1; --accent: #1d63e0; --accent-hover: #174fb5; --accent-ink: #ffffff; --accent-soft: rgba(29, 99, 224, 0.06); --ring: rgba(29, 99, 224, 0.28); --err: #b3442e; --err-soft: rgba(179, 68, 46, 0.07); --ok: #2e7d4f; --shadow: 0 1px 2px rgba(20, 30, 50, 0.05), 0 24px 60px -28px rgba(20, 30, 50, 0.22); } /* Olympus gold — warm marble, bronze-gold accent (light) */ :root[data-theme="gold"] { color-scheme: light; --bg: #f7f3e9; --surface: #fefaf1; --ink: #26200f; --muted: #776c52; --faint: #a89c7f; --line: #e8e0c9; --line-strong: #d6ccae; --accent: #8a6510; --accent-hover: #715208; --accent-ink: #ffffff; --accent-soft: rgba(138, 101, 16, 0.08); --ring: rgba(138, 101, 16, 0.28); --err: #a04a35; --err-soft: rgba(160, 74, 53, 0.08); --ok: #3e7d53; --shadow: 0 1px 2px rgba(46, 36, 10, 0.05), 0 24px 60px -28px rgba(46, 36, 10, 0.28); } /* Olive grove — deep green-charcoal, laurel accent (dark) */ :root[data-theme="olive"] { color-scheme: dark; --bg: #141711; --surface: #1b1f17; --ink: #e8e9dd; --muted: #9aa08b; --faint: #6c7260; --line: #2b3123; --line-strong: #3b4230; --accent: #a9c46a; --accent-hover: #bcd581; --accent-ink: #151a0d; --accent-soft: rgba(169, 196, 106, 0.09); --ring: rgba(169, 196, 106, 0.3); --err: #de9483; --err-soft: rgba(222, 148, 131, 0.09); --ok: #8ec9a3; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 60px -28px rgba(0, 0, 0, 0.6); } /* ── Base ── */ * { box-sizing: border-box; } html { height: 100%; } body { margin: 0; min-height: 100svh; background: radial-gradient(1100px 560px at 50% -8%, var(--accent-soft), transparent 62%), var(--bg); color: var(--ink); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; } /* thin editorial rule across the very top */ body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 2px; background: var(--accent); opacity: 0.85; z-index: 10; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ── Wordmark ── */ .wordmark { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink); text-align: center; } .wordmark:hover { text-decoration: none; } .wordmark .mark { color: var(--accent); } .wordmark .word { font: 400 21px/1 var(--serif); text-transform: uppercase; letter-spacing: 0.34em; margin-right: -0.34em; /* optically re-center the tracked text */ } .wordmark .org { font: 500 10px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.32em; margin-right: -0.32em; color: var(--faint); } /* compact horizontal variant (landing header) */ .wordmark--row { flex-direction: row; gap: 12px; } .wordmark--row .word { font-size: 15px; } .wordmark--row .mark { width: 26px; height: auto; } /* ── Auth layout ── */ .auth-wrap { flex: 1; display: grid; place-items: center; padding: 48px 20px; } .card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 44px 40px 36px; animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .card .wordmark { width: 100%; margin-bottom: 30px; } .card h1 { font: 400 24px/1.25 var(--serif); letter-spacing: 0.01em; margin: 0 0 6px; text-align: center; } .card .lede { margin: 0 0 28px; text-align: center; color: var(--muted); font-size: 14px; } /* ── Fields ── */ .field { margin-bottom: 18px; } .field label { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 6px; } .field .hint { display: block; margin-top: 5px; font-size: 12.5px; color: var(--faint); } .field input { width: 100%; padding: 11px 14px; font: 400 15px/1.4 var(--sans); color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: 10px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field input::placeholder { color: var(--faint); } .field input:hover { border-color: var(--muted); } .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } /* password + show/hide toggle */ .pw-wrap { position: relative; } .pw-wrap input { padding-right: 64px; } .pw-toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); border: 0; background: none; padding: 5px 8px; font: 500 12.5px/1 var(--sans); color: var(--muted); cursor: pointer; border-radius: 6px; } .pw-toggle:hover { color: var(--ink); } /* ── Error line — calm, not alarming ── */ .form-error { display: flex; align-items: baseline; gap: 8px; margin: 0 0 16px; padding: 10px 13px; font-size: 13.5px; color: var(--err); background: var(--err-soft); border-radius: 9px; animation: settle 0.3s ease both; } .form-error::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transform: translateY(-1px); } .form-error[hidden] { display: none; } @keyframes settle { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 18px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font: 600 15px/1.3 var(--sans); letter-spacing: 0.01em; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .btn:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 6px 18px -8px var(--ring); } .btn:active:not(:disabled) { transform: none; box-shadow: none; } .btn:disabled { opacity: 0.65; cursor: default; } .btn .spinner { flex: none; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; } .btn .spinner[hidden] { display: none; } @keyframes spin { to { transform: rotate(360deg); } } .btn--ghost { width: auto; background: none; color: var(--muted); border: 1px solid var(--line-strong); padding: 8px 16px; font-size: 13.5px; } .btn--ghost:hover:not(:disabled) { background: var(--accent-soft); color: var(--ink); border-color: var(--muted); transform: none; box-shadow: none; } /* ── Under-form link ── */ .alt-link { margin: 22px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); } /* a button that reads as a link (#42: "Forgot password?") */ .link-btn { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .link-btn:hover { color: var(--accent-hover); } /* ── Success state ── */ .card-success { display: none; } .card.is-success form, .card.is-success .alt-link { display: none; } .card.is-success .card-success { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0 8px; text-align: center; animation: rise 0.4s ease both; } .card-success .check { color: var(--ok); } .card-success .check circle { stroke-dasharray: 132; stroke-dashoffset: 132; animation: draw 0.5s 0.05s ease-out forwards; } .card-success .check path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: draw 0.3s 0.4s ease-out forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .card-success h2 { font: 400 21px/1.3 var(--serif); margin: 0; } .card-success p { margin: 0; color: var(--muted); font-size: 14px; } /* ── Theme picker (built by assets/theme.js) ── */ .theme-picker { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .theme-glyph { font-size: 14px; line-height: 1; color: var(--muted); } .theme-picker select { padding: 6px 8px; font: 500 12.5px/1.2 var(--sans); color: var(--muted); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .theme-picker select:hover { color: var(--ink); border-color: var(--muted); } .theme-picker select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-picker--corner { position: fixed; top: 12px; right: 14px; z-index: 30; } /* ── Page footer ── */ .page-foot { padding: 26px 20px 30px; text-align: center; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); } .page-foot .sep { margin: 0 8px; opacity: 0.6; } /* ── Landing shell ── */ .shell-header { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(8px); } .shell-header .inner, .shell-main { width: 100%; max-width: 1020px; margin: 0 auto; padding: 0 24px; } .shell-header .inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 62px; } .shell-header .who { display: flex; align-items: center; gap: 14px; min-width: 0; } .shell-header .who .name { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .badge { display: inline-block; padding: 3px 10px 4px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 10.5px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.18em; } .shell-main { flex: 1; padding-top: 72px; padding-bottom: 48px; } .eyebrow { font: 500 11.5px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.28em; color: var(--accent); margin: 0 0 14px; } .shell-main h1 { font: 400 clamp(30px, 5vw, 42px)/1.15 var(--serif); letter-spacing: 0.005em; margin: 0 0 10px; } .shell-main .sub { margin: 0; max-width: 52ch; color: var(--muted); font-size: 15.5px; } .hall-label { margin: 56px 0 16px; font: 500 11.5px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.28em; color: var(--faint); display: flex; align-items: center; gap: 14px; } .hall-label::after { content: ""; flex: 1; height: 1px; background: var(--line); } .halls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .hall { border: 1px dashed var(--line-strong); border-radius: 14px; padding: 22px 22px 20px; transition: border-color 0.2s ease, background 0.2s ease; } .hall:hover { border-color: var(--muted); background: var(--accent-soft); } .hall h3 { font: 400 18px/1.2 var(--serif); margin: 0 0 6px; } .hall .state { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--faint); } .hall .state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: breathe 2.6s ease-in-out infinite; } @keyframes breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } /* boot state: hide the shell until /api/auth/me answers */ body.booting .shell-header, body.booting .shell-main, body.booting .page-foot { visibility: hidden; } .boot-hint { position: fixed; inset: 0; display: none; place-items: center; color: var(--faint); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; } body.booting .boot-hint { display: grid; } .boot-hint span { animation: breathe 1.6s ease-in-out infinite; } /* ── Small screens ── */ @media (max-width: 480px) { .card { padding: 34px 24px 28px; border-radius: 14px; } .auth-wrap { padding: 28px 14px; align-items: start; } .shell-header .who .name { display: none; } .shell-main { padding-top: 48px; } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .card-success .check circle, .card-success .check path { stroke-dashoffset: 0; } }