/* Alexandria — shared stylesheet */ :root { --bg: #0a0708; --bg-2: #130d0e; --bg-3: #1c1315; --line: #2c1414; --line-bright: #6e2020; --ink: #f0e8e0; --ink-dim: #c2b3a8; --ink-faint: #8a7d78; /* colors sampled directly from alexandria.png */ --red: #e0504f; --red-rgb: 224, 80, 79; --red-deep: #bd1313; --red-glow: rgba(224, 80, 79, .35); --blue: #4fa8d8; --yellow: #c9cf2a; --bg-alpha: rgba(10, 7, 8, .85); --selection-ink: #0a0708; --serif-display: 'Cinzel', 'Trebuchet MS', serif; --serif-body: 'Spectral', Georgia, serif; --mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace; } /* Theme variants. All swap the same variable set the dark theme (above) defines, so no other rule in this file -- or any page -- needs to change; applied via data-theme on , set by theme.js from localStorage. */ :root[data-theme="light"] { --bg: #f7f1e8; --bg-2: #efe4d3; --bg-3: #e6d7c0; --line: #d9c7a8; --line-bright: #a9814f; --ink: #251a12; --ink-dim: #5a4736; --ink-faint: #7d6a57; --red: #a02318; --red-rgb: 160, 35, 24; --red-deep: #c0392b; --red-glow: rgba(160, 35, 24, .25); --blue: #0f6489; --yellow: #7a6a05; --bg-alpha: rgba(247, 241, 232, .85); /* this theme's blue is deliberately deep (for contrast on a light bg), so dark selection text would itself fail contrast against it -- use light */ --selection-ink: #ffffff; } :root[data-theme="high-contrast"] { --bg: #000000; --bg-2: #0d0d0d; --bg-3: #1a1a1a; --line: #666666; --line-bright: #ffffff; --ink: #ffffff; --ink-dim: #eeeeee; --ink-faint: #cccccc; --red: #ff2b2b; --red-rgb: 255, 43, 43; --red-deep: #ff2b2b; --red-glow: rgba(255, 43, 43, .45); --blue: #33b1ff; --yellow: #ffe000; --bg-alpha: rgba(0, 0, 0, .85); --selection-ink: #000000; } :root[data-theme="rainbow"] { /* deliberately loud -- hot magenta / acid chartreuse / vivid cyan against a deep violet-black, closer to a Fillmore poster than a "nice" palette */ --bg: #12002e; --bg-2: #1e0048; --bg-3: #2b0060; --line: #4a0d8f; --line-bright: #b026ff; --ink: #ffffff; --ink-dim: #e0c9ff; --ink-faint: #b98fef; --red: #ff00c8; --red-rgb: 255, 0, 200; --red-deep: #a3008c; --red-glow: rgba(255, 0, 200, .45); --blue: #00fff2; --yellow: #ccff00; --bg-alpha: rgba(18, 0, 46, .85); --selection-ink: #12002e; } * { box-sizing: border-box; } /* rem units are relative to this, not body's -- this was previously unset, so every rem-sized element site-wide was silently computing against the browser's 16px default instead of the size actually intended here. */ html { font-size: 18px; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif-body); line-height: 1.75; -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; } ::selection { background: var(--blue); color: var(--selection-ink); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--line-bright); border: 2px solid var(--bg); border-radius: 6px; } .lattice-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(30deg, rgba(var(--red-rgb),.06) 1px, transparent 1px), linear-gradient(150deg, rgba(var(--red-rgb),.06) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--red-rgb),.045) 1px, transparent 1px); background-size: 64px 111px; animation: drift 70s linear infinite; } :root[data-theme="rainbow"] .lattice-bg { animation: drift 70s linear infinite, psychedelic-hue 7s linear infinite; } .vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(var(--red-rgb),.07), transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.6), transparent 60%); } @keyframes drift { to { background-position: 64px 111px; } } @keyframes psychedelic-hue { 0% { filter: hue-rotate(0deg) saturate(1.4); } 100% { filter: hue-rotate(360deg) saturate(1.4); } } a { color: var(--blue); text-decoration: none; font-weight: 500; background-image: linear-gradient(var(--red), var(--red)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size .25s ease, color .25s ease; } a:hover, a:focus-visible { color: var(--red); background-size: 100% 1px; } a:focus-visible { outline: 1px dashed var(--red-deep); outline-offset: 3px; } h1, h2, h3, h4 { font-weight: normal; color: var(--ink); } p { font-size: 1.05rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* header / nav */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg-alpha); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .site-header nav { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; } .brand { font-family: var(--serif-display); letter-spacing: .18em; font-size: 1.05rem; color: var(--ink); background-image: none; font-weight: 600; } .site-header ul { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; flex-wrap: wrap; } .site-header a.nav-link { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); background-image: none; font-weight: 500; padding-bottom: .15rem; border-bottom: 1px solid transparent; } .site-header a.nav-link:hover { color: var(--red); } .site-header a.nav-link[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); } /* rainbow theme: fan the 7 nav links across the hue wheel. ink-dim is too desaturated for hue-rotate to do anything visible, so give them a vivid base color first, then rotate each list position by a different amount */ :root[data-theme="rainbow"] .site-header a.nav-link { color: var(--red); } :root[data-theme="rainbow"] .site-header ul li:nth-child(1) a.nav-link { filter: hue-rotate(0deg); } :root[data-theme="rainbow"] .site-header ul li:nth-child(2) a.nav-link { filter: hue-rotate(50deg); } :root[data-theme="rainbow"] .site-header ul li:nth-child(3) a.nav-link { filter: hue-rotate(100deg); } :root[data-theme="rainbow"] .site-header ul li:nth-child(4) a.nav-link { filter: hue-rotate(150deg); } :root[data-theme="rainbow"] .site-header ul li:nth-child(5) a.nav-link { filter: hue-rotate(200deg); } :root[data-theme="rainbow"] .site-header ul li:nth-child(6) a.nav-link { filter: hue-rotate(250deg); } :root[data-theme="rainbow"] .site-header ul li:nth-child(7) a.nav-link { filter: hue-rotate(300deg); } .site-header li.theme-picker { display: flex; align-items: center; } #theme-select { font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 500; color: var(--ink-dim); background: var(--bg-2); border: 1px solid var(--line); padding: .3rem .5rem; cursor: pointer; } #theme-select:hover { border-color: var(--red-deep); color: var(--ink); } #theme-select:focus-visible { outline: 1px dashed var(--red-deep); outline-offset: 2px; } /* hero */ .hero { max-width: 780px; margin: 0 auto; padding: 5rem 1.5rem 4.5rem; text-align: center; position: relative; z-index: 1; } .hero-art { position: relative; max-width: 620px; margin: 0 auto; padding: 3rem 1rem 2rem; } .hero-art .lattice-orb { position: absolute; top: 50%; left: 50%; width: min(440px, 92vw); height: min(440px, 92vw); transform: translate(-50%, -50%); color: var(--red-deep); animation: spin 220s linear infinite; filter: drop-shadow(0 0 22px var(--red-glow)); z-index: 0; } .lattice-orb svg.lattice-layer { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.8s ease; } .lattice-orb svg.lattice-layer.visible { opacity: .4; } :root[data-theme="rainbow"] .hero-art .lattice-orb { animation: spin 220s linear infinite, psychedelic-hue-glow 7s linear infinite; } :root[data-theme="rainbow"] .lattice-orb svg.lattice-layer.visible { opacity: .55; } @keyframes psychedelic-hue-glow { 0% { filter: hue-rotate(0deg) saturate(1.5) drop-shadow(0 0 22px var(--red-glow)); } 100% { filter: hue-rotate(360deg) saturate(1.5) drop-shadow(0 0 22px var(--red-glow)); } } .hero-art img.logo { position: relative; z-index: 1; width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 34px rgba(0,0,0,.75)); } @keyframes spin { to { transform: rotate(360deg); } } .tagline { font-family: var(--serif-body); font-style: italic; font-size: 1.4rem; color: var(--red); margin: .7rem 0 1.4rem; } .lede { font-size: 1.18rem; line-height: 1.75; color: var(--ink); max-width: 580px; margin: 0 auto; } .notice { font-style: italic; font-size: 1.05rem; color: var(--ink-dim); margin-top: 1.8rem; } /* homepage table-of-contents grid */ .toc-grid { max-width: 980px; margin: 0 auto; padding: 0 1.5rem 6rem; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; } .toc-card { position: relative; display: block; border: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-2), var(--bg)); padding: 1.8rem 1.9rem; background-image: none; transition: border-color .25s ease, transform .25s ease; } .toc-card:hover { border-color: var(--line-bright); transform: translateY(-2px); } .toc-card .num { font-family: var(--serif-display); font-size: .85rem; letter-spacing: .2em; color: var(--red); } .toc-card h2 { font-family: var(--serif-display); font-size: 1.4rem; letter-spacing: .03em; margin: .5rem 0 .6rem; color: var(--ink); } .toc-card p { color: var(--ink-dim); font-size: 1rem; margin: 0; line-height: 1.6; } /* chapters */ main.page { max-width: 980px; margin: 0 auto; padding: 3.5rem 1.5rem 6rem; position: relative; z-index: 1; } .chapter { padding-top: .5rem; } .chapter > h1 { font-family: var(--serif-display); font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: .05em; display: flex; align-items: baseline; gap: .9rem; margin: 0 0 1.8rem; border-bottom: 1px solid var(--line); padding-bottom: .9rem; } .chapter > h1 .num { font-family: var(--serif-display); font-size: 1rem; color: var(--red); letter-spacing: .2em; } .chapter h3 { font-family: var(--serif-body); font-weight: 600; font-size: 1.4rem; margin: 0 0 1.1rem; } .chapter h3 a { background-image: none; } .chapter > p.intro { color: var(--ink-dim); font-size: 1.1rem; margin-bottom: 2rem; } .chapter > ul, .codex ul, ul.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; } .chapter > ul li, .codex li, ul.plain li { position: relative; padding-left: 1.4rem; color: var(--ink); font-size: 1.08rem; line-height: 1.7; } .chapter > ul li::before, .codex li::before, ul.plain li::before { content: '◆'; position: absolute; left: 0; top: .22em; font-size: .5em; color: var(--blue); } /* sub-navigation (used on the Databases page) */ .subnav { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2.6rem; } .subnav a { font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--line); padding: .4rem .9rem; background-image: none; font-weight: 500; } .subnav a:hover { color: var(--red); border-color: var(--red-deep); } /* database cards */ .codex { position: relative; border: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-2), var(--bg)); padding: 2rem 2.1rem; margin-bottom: 2rem; scroll-margin-top: 5.5rem; transition: border-color .25s ease; } .codex:hover { border-color: var(--line-bright); } .codex::before, .codex::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid var(--red-deep); opacity: .6; } .codex::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } .codex::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } .codex .refs { margin: -.4rem 0 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); font-size: .98rem; color: var(--ink-dim); line-height: 1.7; } .field-label { display: inline-block; font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-right: .5rem; font-weight: 500; } /* per-entry reference line -- same field-label prefix as the codex-header .refs block, but inline with the entry body instead of a bordered banner */ .entry p.entry-refs { color: var(--ink-dim); font-size: .95rem; line-height: 1.7; } .ref-pending { color: var(--ink-faint); font-style: italic; } /* reference line outside of a databases-style .entry, e.g. the cabinet page */ .chapter p.refs-line { color: var(--ink-dim); font-size: .95rem; line-height: 1.7; margin: .3rem 0 1.4rem; } /* TUGA project mark (see the hidden ): the two fills are theme CSS variables rather than fixed colors, since (unlike the third-party partner logos in the footer) this is our own brand and we can freely recolor it to sit correctly on every theme -- tuga-ink is the silhouette, tuga-cutout is the negative-space detail that should read as "background showing through", so it tracks --bg-2 rather than a fixed white/black. */ .model-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: .6rem; } .model-head h3 { margin: 0 0 .3rem; } .tuga-logo { width: 64px; height: 64px; flex-shrink: 0; } .tuga-ink { fill: var(--ink); } .tuga-cutout { fill: var(--bg-2); } .tag-soon { display: inline-block; color: var(--blue); font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; margin-left: .7rem; vertical-align: middle; } a.chip { display: inline-flex; align-items: center; font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); font-weight: 500; border: 1px solid var(--red-deep); padding: .3rem .7rem; margin: .15rem .35rem .15rem 0; background-image: none; transition: background .2s ease, color .2s ease, border-color .2s ease; } a.chip:hover { background: var(--red); color: #140506; border-color: var(--red); } .btn { display: inline-block; font-family: var(--mono); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--ink); background: transparent; background-image: none; border: 1px solid var(--red-deep); padding: .65rem 1.6rem; cursor: pointer; transition: background .2s ease, color .2s ease; } .btn:hover { background: var(--red); color: #140506; border-color: var(--red); } button.btn:disabled { opacity: .5; cursor: default; background: none; color: var(--ink); } .tag-date { color: var(--yellow); font-size: .85em; } /* long-form entries (older datasets / other) */ .entry { padding: 1.4rem 0; border-top: 1px solid var(--line); } .entry:first-child, .refs + .entry { border-top: none; padding-top: 0; } .entry h4 { font-family: var(--serif-body); font-weight: 600; font-size: 1.28rem; margin: 0 0 .5rem; } .entry p { color: var(--ink); font-size: 1.05rem; line-height: 1.7; margin: .45rem 0; } .entry p.desc { color: var(--ink-dim); font-size: 1rem; } .entry .chip-row { margin-top: .6rem; } details { margin-top: .8rem; } details summary { cursor: pointer; font-family: var(--mono); font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: var(--red); font-weight: 500; } details summary:hover { color: var(--yellow); } details .scale-text { font-family: var(--mono); font-size: .88rem; color: var(--ink-dim); line-height: 1.85; margin-top: .8rem; } details p { margin: .6rem 0; color: var(--ink); font-size: 1.02rem; } /* license */ .license-block { border-left: 2px solid var(--red-deep); padding-left: 1.5rem; font-style: italic; font-size: 1.18rem; color: var(--ink); line-height: 1.85; } /* funding */ .chapter h2.sub { text-transform: uppercase; letter-spacing: .1em; font-size: 1.1rem; color: var(--blue); font-weight: 600; margin: 2.2rem 0 1rem; font-family: var(--serif-body); } .chapter h2.sub:first-of-type { margin-top: 0; } /* contributors */ ul.contributors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; } ul.contributors li { border: 1px solid var(--line); padding: 1.5rem 1.6rem; text-align: center; } ul.contributors li::before { content: none; } ul.contributors li .name { display: block; font-size: 1.25rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; background-image: none; } ul.contributors .affil { display: block; font-size: .95rem; color: var(--ink-faint); } footer { position: relative; z-index: 1; text-align: center; padding: 3rem 1.5rem 4rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); border-top: 1px solid var(--line); } /* partner/funder logos -- given a fixed dark backdrop independent of the active site theme, rather than var(--bg), since RUB's mark is a white-only asset with no light-theme variant. rcFEMS's original navy/gray colorway is recolored (see logos/rcfems_original.png for the source) to the same white + light-gray palette RUB and ICAMS already use, so all three read as one consistent set on this backdrop rather than three unrelated treatments. */ .partner-logos { display: flex; justify-content: center; align-items: stretch; gap: 1rem; flex-wrap: wrap; margin: 0 0 2rem; padding: 1rem 1.4rem; background: #14100f; border: 1px solid var(--line); } .partner-logos a { display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, .045); background-image: none; border-radius: 5px; padding: .55rem 1.05rem; transition: background-color .2s ease; } .partner-logos a:hover { background-color: rgba(255, 255, 255, .08); } .partner-logos img { height: 28px; width: auto; display: block; opacity: .92; transition: opacity .2s ease; } .partner-logos a:hover img { opacity: 1; } @media (max-width: 640px) { .site-header nav { justify-content: center; text-align: center; } .site-header ul { justify-content: center; gap: 1rem 1.3rem; } html { font-size: 16.5px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }