/* ============================================================ Aperture — Neural AI design system Light by default: near-white surfaces, near-black text, hairline structure, one desaturated blue reserved for action and focus. Depth is a hairline plus one soft shadow, never a glow. There is no ambient decoration. Entry surfaces (landing, sign-in) set data-surface="dark" on , which swaps the tokens. Components below are written against tokens only, so both surfaces share them. ============================================================ */ :root { --page: #FCFCFD; --panel: #FFFFFF; --sunken: #F6F6F8; --hover: #F2F2F5; --line: #E8E8EC; --line-2: #DCDCE2; --text: #16161A; --dim: #6E6E78; --faint: #9B9BA4; --accent: #3A5BC7; --accent-lit: #4A6DDB; --accent-deep: #2C4699; --accent-a10: rgba(58, 91, 199, .10); --accent-a20: rgba(58, 91, 199, .20); --accent-soft: #EFF2FC; --ok: #1E7A52; --danger: #B4323A; --ok-soft: #ECF7F1; --danger-soft: #FDF0F0; --lift-1: 0 1px 2px rgba(16,16,26,.05); --lift-2: 0 1px 3px rgba(16,16,26,.06), 0 6px 20px -6px rgba(16,16,26,.08); --lift-3: 0 1px 3px rgba(16,16,26,.07), 0 18px 44px -14px rgba(16,16,26,.14); --r-sm: 5px; --r: 8px; --r-lg: 12px; --spring: cubic-bezier(.34, 1.4, .64, 1); --ease: cubic-bezier(.32, .72, 0, 1); --fast: 130ms; --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; --gut: clamp(20px, 4.5vw, 56px); } /* Entry surfaces only. Same components, inverted ground. */ [data-surface="dark"] { --page: #0B0B0E; --panel: #131317; --sunken: #0F0F12; --hover: #1A1A1F; --line: #222228; --line-2: #2D2D35; --text: #EDEDF0; --dim: #8F8F99; --faint: #61616B; --accent: #7D93E8; --accent-lit: #94A7EF; --accent-deep: #5B72C9; --accent-a10: rgba(125, 147, 232, .10); --accent-a20: rgba(125, 147, 232, .22); --accent-soft: #1A1E2E; --ok: #5FBF92; --danger: #E8767C; --ok-soft: #14231C; --danger-soft: #241618; --lift-1: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.35); --lift-2: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 16px -6px rgba(0,0,0,.5); --lift-3: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 44px -14px rgba(0,0,0,.65); } * { margin: 0; padding: 0; box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); background: var(--page); color: var(--text); font-size: 15px; line-height: 1.55; letter-spacing: -0.009em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- Type ---------- */ .display { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.034em; text-wrap: balance; } h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.028em; line-height: 1.15; } h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.022em; line-height: 1.25; } h3 { font-size: 1rem; font-weight: 600; letter-spacing: -0.016em; } .lede { font-size: 1.0312rem; color: var(--dim); max-width: 58ch; line-height: 1.6; } .dim { color: var(--dim); } .faint { color: var(--faint); } .small { font-size: .875rem; } .tiny { font-size: .8125rem; } .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .mono { font-family: var(--mono); font-size: .8125rem; } .label { font-size: .75rem; font-weight: 500; color: var(--faint); } a { color: var(--text); text-decoration: none; transition: color var(--fast) var(--ease); } a:hover { color: var(--accent); } a.underline, p a, dd a, li a, .prose a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; text-decoration-thickness: 1px; } a.underline:hover, p a:hover, dd a:hover, li a:hover { text-decoration-color: var(--accent); } p a.btn, li a.btn { text-decoration: none; } /* ---------- Structure ---------- */ .shell { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gut); } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--lift-2); } hr, .rule { border: 0; border-top: 1px solid var(--line); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--lift-1); color: var(--text); font: inherit; font-size: .8938rem; font-weight: 500; letter-spacing: -0.008em; cursor: pointer; white-space: nowrap; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--spring); } .btn:hover { background: var(--hover); border-color: var(--faint); } .btn:active { transform: scale(.985); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } [data-surface="dark"] .btn-primary { color: #0B0B0E; } [data-surface="dark"] .btn-primary:hover { background: var(--accent-lit); border-color: var(--accent-lit); } .btn-quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--dim); } .btn-quiet:hover { background: var(--hover); border-color: var(--line); color: var(--text); } .btn-block { display: flex; width: 100%; } .btn:disabled { opacity: .45; pointer-events: none; } /* ---------- Forms ---------- */ .field { display: block; margin-bottom: 15px; } .field > label { display: block; font-size: .8438rem; font-weight: 500; color: var(--text); margin-bottom: 6px; } .field .hint { display: block; font-size: .8125rem; color: var(--faint); margin-top: 6px; } input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=search], select, textarea { width: 100%; padding: 9px 12px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); color: var(--text); font: inherit; font-size: .9375rem; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--faint); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-a20); } ::placeholder { color: var(--faint); } textarea { min-height: 104px; resize: vertical; line-height: 1.55; } select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236E6E78' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } /* Chrome paints autofilled fields its own colour; an inset shadow is the only override. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--panel) inset; caret-color: var(--text); transition: background-color 600000s 0s; } input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--panel) inset, 0 0 0 3px var(--accent-a20); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } .choice { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; margin-inline: -11px; border-radius: var(--r); cursor: pointer; transition: background var(--fast) var(--ease); } .choice:hover { background: var(--hover); } .choice input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; width: 15px; height: 15px; } .choice span { font-size: .9375rem; } .choice:has(input:checked) { background: var(--accent-soft); } /* ---------- Notices ---------- */ .notice { padding: 10px 13px; border-radius: var(--r); font-size: .875rem; margin-bottom: 16px; border: 1px solid var(--line-2); background: var(--panel); } .notice-error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } .notice-ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); } .notice-info { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); } [data-surface="dark"] .notice-info { color: var(--accent-lit); } /* ---------- Nav ---------- */ .nav { display: flex; align-items: center; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); } .nav .brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9375rem; letter-spacing: -0.016em; margin-right: 16px; } .nav .brand img { width: 22px; height: 22px; } .nav .spacer { flex: 1; } .nav a.navlink { font-size: .8938rem; color: var(--dim); padding: 6px 10px; border-radius: var(--r-sm); transition: color var(--fast) var(--ease), background var(--fast) var(--ease); } .nav a.navlink:hover { color: var(--text); background: var(--hover); } .nav a.navlink[aria-current="page"] { color: var(--text); background: var(--hover); font-weight: 500; } /* ---------- Ledger ---------- */ .ledger { border-top: 1px solid var(--line); } .ledger-row { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); } .ledger-row dt { flex: 1; font-weight: 500; font-size: .9375rem; min-width: 0; } .ledger-row dd { color: var(--dim); font-size: .875rem; flex: 2; max-width: 46ch; min-width: 0; } .ledger-row .fig { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; } /* ---------- Meter ---------- */ .meter { display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; } .meter > i { display: block; height: 100%; border-radius: 4px; background: var(--accent); width: 0; transition: width .9s var(--ease); } /* ---------- Entrance ---------- */ @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .rise { animation: rise .5s var(--ease) both; } /* ---------- Shooting stars — dark surfaces only ---------- */ .stars-container { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } :root:not([data-surface="dark"]) .stars-container { display: none; } .shooting-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,255,255,.9); opacity: 0; animation: shoot linear infinite; } .shooting-star::before { content: ''; position: absolute; width: 96px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.5), transparent); transform: translateX(-100%); } @keyframes shoot { 0% { opacity: 0; transform: translate(0,0) rotate(45deg); } 8% { opacity: .55; } 65% { opacity: .2; } 100% { opacity: 0; transform: translate(420px,420px) rotate(45deg); } } /* ---------- Narrow screens ---------- */ @media (max-width: 720px) { .nav { flex-wrap: wrap; gap: 6px 2px; } .nav .brand { width: 100%; margin-right: 0; margin-bottom: 2px; } .nav .spacer { display: none; } } @media (prefers-reduced-motion: reduce) { .stars-container { display: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }