/* Degrees of Satoshi — base stylesheet. House rules: longhand padding-top/bottom (never shorthand that wipes gutters), minmax(0,1fr) on grid tracks, never overflow-x:clip on . Additions go at the end of the file rather than editing selectors in place. */ :root { --bg: #0c0e16; --panel: #12141f; --border: #232838; --text: #e9ebf3; --muted: #8b93a8; --amber: #d9a441; --violet: #8f8af0; --blue: #6ba5f5; --coral: #e8927c; --mint: #5fd6a5; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --maxw: 980px; } * { box-sizing: border-box; } html { background: var(--bg); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.55; min-height: 100vh; } .wrap { width: 100%; max-width: var(--maxw); margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; padding-top: 40px; padding-bottom: 64px; } .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); } h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.15; margin-top: 18px; margin-bottom: 12px; font-weight: 600; letter-spacing: -0.5px; } .lede { color: var(--muted); font-size: 17px; max-width: 62ch; margin-top: 0; margin-bottom: 28px; } /* ---- input ---- */ .lookup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 22px; margin-bottom: 14px; } @media (max-width: 560px) { .lookup { grid-template-columns: minmax(0, 1fr); } } input[type='text'] { width: 100%; min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: var(--mono); font-size: 15px; padding-top: 15px; padding-bottom: 15px; padding-left: 16px; padding-right: 16px; } input[type='text']:focus { outline: none; border-color: var(--violet); } input[type='text']::placeholder { color: #5b6377; } button { font-family: var(--mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding-top: 15px; padding-bottom: 15px; padding-left: 22px; padding-right: 22px; cursor: pointer; } button:hover { border-color: var(--violet); } button.primary { background: var(--violet); border-color: var(--violet); color: #0b0c14; font-weight: 600; } button:disabled { opacity: 0.5; cursor: default; } .err { color: var(--coral); font-family: var(--mono); font-size: 13px; min-height: 20px; } /* ---- result ---- */ .degree { font-size: clamp(64px, 16vw, 132px); line-height: 1; font-weight: 300; letter-spacing: -3px; margin-top: 8px; margin-bottom: 0; } .degree .sup { color: var(--amber); font-size: 0.32em; vertical-align: super; } .ancestry { font-style: italic; font-size: clamp(17px, 3vw, 23px); color: #c7cbdb; margin-top: 14px; margin-bottom: 22px; } .ancestry b { color: var(--text); font-style: italic; font-weight: 600; } .chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .chip { font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); padding-top: 9px; padding-bottom: 9px; padding-left: 16px; padding-right: 16px; } .chip.tier { border-color: var(--amber); color: var(--amber); } .center { text-align: center; } .map { margin-top: 26px; margin-bottom: 10px; } .map svg { width: 100%; height: auto; display: block; border-radius: 14px; } .caption { font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); text-align: center; margin-top: 6px; margin-bottom: 26px; } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding-top: 22px; padding-bottom: 22px; padding-left: 22px; padding-right: 22px; } .actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin-top: 16px; } .foot { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #5b6377; text-align: center; margin-top: 40px; } .foot a { color: var(--muted); text-decoration: none; } /* ---- presets ---- */ .presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; margin-top: 26px; } .preset { display: block; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding-top: 14px; padding-bottom: 14px; padding-left: 16px; padding-right: 16px; color: var(--text); text-decoration: none; } .preset:hover { border-color: var(--violet); } .preset .name { font-size: 14px; font-weight: 600; } .preset .meta { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 1px; } .skeleton { color: var(--muted); font-family: var(--mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; text-align: center; padding-top: 60px; padding-bottom: 60px; } .hidden { display: none; } /* ---- appended: fresh-address redirect + "best of" -------------------------- */ .hint { background: var(--panel); border: 1px solid var(--border); border-left: 2px solid var(--amber); border-radius: 10px; color: #c7cbdb; font-size: 15px; padding-top: 16px; padding-bottom: 16px; padding-left: 18px; padding-right: 18px; margin-top: 8px; margin-bottom: 20px; } .hint b { color: var(--text); } .hint-how { display: block; margin-top: 10px; color: var(--muted); font-size: 13px; } .inline-hint { color: var(--muted); font-size: 13px; margin-top: 2px; margin-bottom: 0; } .inline-hint b { color: #c7cbdb; } .checked { border: 1px solid var(--border); border-radius: 12px; padding-top: 16px; padding-bottom: 16px; padding-left: 18px; padding-right: 18px; margin-top: 18px; } .checked-head { font-size: 15px; margin-bottom: 12px; } .checked-head b { color: var(--mint); } .checked-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; } .checked-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; text-decoration: none; color: var(--text); } .checked-row:hover { border-color: var(--violet); } .checked-row.best { border-color: var(--mint); } .checked-deg { font-family: var(--mono); font-size: 15px; color: var(--text); } .checked-addr { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; } .checked-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mint); } .checked-note { color: var(--muted); font-size: 12px; margin-top: 12px; } /* ---- appended: composition polish ---------------------------------------- */ /* The design target frames everything in a single bordered card rather than letting content run to the page edges. */ .wrap { max-width: 940px; } #result { border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg, rgba(18, 20, 31, 0.6) 0%, rgba(12, 14, 22, 0) 40%); padding-top: 34px; padding-bottom: 30px; padding-left: 26px; padding-right: 26px; } @media (max-width: 560px) { #result { padding-left: 16px; padding-right: 16px; border-radius: 14px; } } /* The eyebrow above a result should sit clearly apart from the number. */ #r-brand { margin-bottom: 22px; } /* Degree glyph: the superscript ring is a defining mark in the target. */ .degree .sup { font-size: 0.26em; vertical-align: super; margin-left: 4px; } /* The map had no breathing room against the chips above it. */ .map { margin-top: 34px; } /* Chips wrap awkwardly at two-per-row on narrow screens; keep them centred and let them stack cleanly. */ @media (max-width: 480px) { .chips { flex-direction: column; align-items: center; } .chip { width: fit-content; } } /* Action row was three equal columns even on mobile, squeezing the labels. */ @media (max-width: 560px) { .actions { grid-template-columns: minmax(0, 1fr); } } /* Preset cards: give the title room and stop the era line crowding it. */ .preset .name { line-height: 1.35; } .preset .meta { margin-top: 6px; } /* ---- appended: site-wide starfield --------------------------------------- The star map's field is the strongest part of the identity, so the whole site sits on it. Fixed attachment means it never tiles or seams however long the page runs, and the map itself renders transparent so it merges into this rather than stamping an opaque rectangle on top. 4.9KB gzipped, one request, no JS. */ body { background-color: var(--bg); background-image: url('/starfield.svg'); background-size: cover; background-position: center top; background-repeat: no-repeat; background-attachment: fixed; } /* A faint warm centre, echoing the anchor glow in the map. */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient( ellipse 70% 50% at 50% 22%, rgba(217, 164, 65, 0.07) 0%, rgba(217, 164, 65, 0.02) 40%, rgba(12, 14, 22, 0) 72% ); z-index: 0; } .wrap { position: relative; z-index: 1; } /* Panels need slight opacity now that there is texture behind them, or the starfield reads straight through the text. */ .panel, .preset, .checked-row, .hint { background-color: rgba(18, 20, 31, 0.82); backdrop-filter: blur(2px); } input[type='text'] { background-color: rgba(18, 20, 31, 0.88); } /* The result card previously had its own gradient; with a starfield behind it a flat translucent panel reads more cleanly. */ #result { background: rgba(12, 14, 22, 0.34); backdrop-filter: blur(1px); } /* Mobile: fixed attachment is unreliable on iOS Safari and can cause repaint jank, so pin the image to the viewport instead. */ @media (max-width: 700px) { body { background-attachment: scroll; background-size: 140% auto; } }