/* ============================================================================ Xeno Executor — main.css Concept: "official software site". A light-grey surface, white cards with soft shadows, a purple ("xeno") accent and dark "terminal window" code blocks. Header and footer are full-bleed; a .frame constrains content. Token vocabulary: --surface/--sheet/--terminal/--brand/--text/--line and .frame/.topbar/.botbar/ .hero/.btn-x/.pill/.lcard/.codewin/.gate. ========================================================================== */ /* ── Fonts (self-hosted; strong fallbacks so the theme works before the woff2 files are dropped into assets/fonts/) ─────────────────────────────────── */ @font-face { font-family:'Play'; src:url('../fonts/Play-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:'Inter'; src:url('../fonts/Inter-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Inter'; src:url('../fonts/Inter-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'PT Mono';src:url('../fonts/PTMono-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } /* ── Design tokens (light "official software" palette) ────────────────────── */ :root { --surface: #F5F6F8; /* light-grey page background */ --sheet: #FFFFFF; /* white cards / header / footer */ --terminal: #14121A; /* DARK code blocks — the "terminal window" */ --terminal-ink: #C9BFF2; /* code text inside the dark block */ --text: #191724; /* primary text */ --dim: #6B6880; /* secondary text */ --brand: #6D28D9; /* purple — buttons, links, active states */ --brand-hi: #7C3AED; /* lighter purple — hover */ --brand-soft: #EDE7FB; /* light purple — chip/badge backing */ --live: #14915F; /* "working" — dark green (reads on light) */ --hold: #B45309; /* "being checked" — dark amber */ --line: #E3E1EB; /* borders */ --on-brand: #FFFFFF; /* text on a purple button */ --ff-head: 'Play', system-ui, 'Segoe UI', Arial, sans-serif; --ff-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --ff-code: 'PT Mono', ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, monospace; --r-card: 12px; /* cards */ --r-btn: 8px; /* buttons + code block */ --r-pill: 999px; /* chips = pills */ --shadow: 0 1px 3px rgba(25,23,36,.07); --shadow-hi: 0 6px 18px rgba(25,23,36,.10); --span: 1140px; color-scheme: light; } /* ── Dark theme — applied to by the header's inline init script (from a saved choice or prefers-color-scheme) and the toggle. Only the token VALUES change; every component reads the same variables. ────────── */ :root[data-theme="dark"] { --surface: #131019; /* dark page background */ --sheet: #1D1926; /* dark cards / header / footer */ --terminal: #0B0910; /* code blocks — darkest, still a distinct window */ --terminal-ink: #CFC5F5; --text: #ECEAF3; --dim: #A6A1B8; --brand: #A78BFA; /* light purple — links + button fill (dark text on it) */ --brand-hi: #B9A3FC; --brand-soft: #2A2340; /* dark-purple chip/badge backing */ --live: #34D399; /* green that reads on dark */ --hold: #FBBF24; /* amber that reads on dark */ --line: #302A40; --on-brand: #17131F; /* dark text on the light-purple button */ --shadow: 0 1px 3px rgba(0,0,0,.45); --shadow-hi: 0 8px 22px rgba(0,0,0,.55); color-scheme: dark; } /* ── Reset + layout rules (brief §2.5) ─────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 74px; } body { background: var(--surface); color: var(--text); font-family: var(--ff-text); font-size: 16px; font-weight: 400; line-height: 1.65; /* Sticky footer: body is a flex column and
absorbs the free space, so on short pages the footer anchors to the viewport bottom instead of floating. */ display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } main { flex: 1 0 auto; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--ff-head); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; } p { margin: 0 0 1em; } ul, ol { margin: 0 0 1em; padding-left: 1.25em; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ── Content container (brief §2.5) ────────────────────────────────────── */ .frame { width: 100%; max-width: var(--span); margin: 0 auto; padding: 0 20px; } /* ── Accessibility helpers ─────────────────────────────────────────────── */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .to-content { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--brand); color: var(--on-brand); padding: 10px 16px; font-weight: 600; } .to-content:focus { left: 8px; top: 8px; border-radius: var(--r-btn); } /* ── Header — FULL-BLEED (brief §2.5). .topbar spans 100% with its own white background + bottom border; .frame inside constrains the content. No margin anywhere on the header → 0px above the bar. ──────────────────────────── */ .topbar { width: 100%; background: var(--sheet); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; } .topbar__nav { display: flex; align-items: center; gap: 20px; padding: 12px 20px; /* spacing on the header is padding only */ } .topbar__nav > :first-child { margin-top: 0; } .topbar__logo { display: inline-flex; align-items: baseline; white-space: nowrap; font-family: var(--ff-head); font-weight: 700; font-size: 19px; letter-spacing: .3px; color: var(--text); } .topbar__x { color: var(--brand); font-weight: 700; margin-right: 1px; } .topbar__links { display: flex; align-items: center; gap: 2px; margin-left: auto; list-style: none; padding: 0; margin-block: 0; flex-wrap: wrap; } .topbar__links li { margin: 0; } .topbar__links a { display: inline-block; padding: 8px 12px; border-radius: var(--r-btn); color: var(--dim); font-weight: 600; font-size: 15px; transition: color .15s, background .15s; } .topbar__links a:hover { color: var(--text); background: var(--brand-soft); } .topbar__links a.is-here { color: var(--brand); } .topbar__cta { padding: 9px 18px; } .langset { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-btn); overflow: hidden; } .langset__opt { padding: 6px 10px; font-weight: 600; font-size: 13px; color: var(--dim); } .langset__opt + .langset__opt { border-left: 1px solid var(--line); } .langset__opt.is-here { color: var(--on-brand); background: var(--brand); } /* ── Light/dark theme toggle button ────────────────────────────────────── */ .themetoggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; padding: 0; cursor: pointer; background: transparent; border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--text); font-size: 16px; line-height: 1; transition: border-color .15s, color .15s, background .15s; } .themetoggle:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } .themetoggle__sun { display: none; } :root[data-theme="dark"] .themetoggle__moon { display: none; } :root[data-theme="dark"] .themetoggle__sun { display: inline; } /* mobile menu (CSS-only checkbox toggle) */ .navtoggle__box { display: none; } .navtoggle { display: none; cursor: pointer; flex-direction: column; gap: 4px; padding: 8px; margin-left: auto; } .navtoggle__bar { width: 22px; height: 2px; background: var(--text); border-radius: 2px; } @media (max-width: 820px) { .topbar__nav { flex-wrap: wrap; gap: 12px; } .themetoggle { order: 2; margin-left: auto; } .navtoggle { display: flex; order: 3; margin-left: 0; } .topbar__cta { order: 4; } .topbar__links { order: 5; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; margin-left: 0; max-height: 0; overflow: hidden; transition: max-height .2s ease; } .navtoggle__box:checked ~ .topbar__links { max-height: 360px; } .topbar__links a { padding: 12px; } } /* ── Buttons ───────────────────────────────────────────────────────────── */ .btn-x { display: inline-flex; align-items: center; justify-content: center; padding: 11px 20px; border-radius: var(--r-btn); font-weight: 600; font-size: 15px; font-family: var(--ff-text); cursor: pointer; border: 1px solid transparent; background: var(--brand); color: var(--on-brand); transition: transform .12s, background .15s, box-shadow .15s; } .btn-x:hover { transform: translateY(-1px); background: var(--brand-hi); box-shadow: var(--shadow-hi); } .btn-x--big { padding: 16px 34px; font-size: 18px; } @media (max-width: 480px) { .btn-x--big { width: 100%; } } /* Secondary — white with a border → hover purple text + border. */ .btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 11px 20px; border-radius: var(--r-btn); font-weight: 600; font-size: 15px; font-family: var(--ff-text); cursor: pointer; background: var(--sheet); color: var(--text); border: 1px solid var(--line); transition: color .15s, border-color .15s; } .btn-ghost:hover { color: var(--brand); border-color: var(--brand); } .btn-ghost--big { padding: 16px 30px; font-size: 18px; } @media (max-width: 480px) { .btn-ghost--big { width: 100%; } } /* ── Hero — a white full-bleed band with a soft purple glow. ───────────── */ .hero { width: 100%; background: radial-gradient(760px 300px at 85% -10%, rgba(109,40,217,.10), transparent 60%), linear-gradient(180deg, var(--sheet), var(--surface)); border-bottom: 1px solid var(--line); padding: 60px 0 52px; } .hero__h1 { font-size: clamp(30px, 6vw, 52px); max-width: 20ch; } .hero__sub { color: var(--dim); font-size: clamp(16px, 2.3vw, 20px); max-width: 60ch; } .hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; align-items: center; } .hero__note { color: var(--dim); font-size: 13px; margin: 18px 0 0; font-family: var(--ff-code); } /* ── Page scaffolding ─────────────────────────────────────────────────── */ .canvas { padding-top: 36px; padding-bottom: 24px; } .pagehead { margin-bottom: 24px; } .pagehead__title { font-size: clamp(26px, 5vw, 40px); } .pagehead__sub { color: var(--dim); font-size: 18px; max-width: 66ch; margin: 0; } .pagehead__sub a { color: var(--brand); } .pagehead__sub a:hover { text-decoration: underline; } .pagehead__cta { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; } /* ── Sections ──────────────────────────────────────────────────────────── */ .block { padding: 22px 0 10px; } .block--sunk { background: var(--sheet); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .block__title { font-size: clamp(22px, 3.4vw, 28px); margin: 0 0 14px; } .block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .block__head .block__title { margin: 0; } .block__more { color: var(--brand); font-weight: 600; font-size: 15px; white-space: nowrap; } .block__more:hover { text-decoration: underline; } .block p a { color: var(--brand); } .block p a:hover { text-decoration: underline; } /* honest "info / not available" notice */ .notice { background: var(--sheet); border: 1px solid var(--line); border-left: 3px solid var(--hold); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 16px 20px; margin: 4px 0 20px; } .notice p { margin: 0; } .notice a { color: var(--brand); } .notice a:hover { text-decoration: underline; } /* generic long-form content (index.php) */ .doc { max-width: 72ch; } .doc a { color: var(--brand); text-decoration: underline; } /* ── Footer — FULL-BLEED like the header (brief §2.5). ──────────────────── */ .botbar { width: 100%; background: var(--sheet); border-top: 1px solid var(--line); margin-top: 64px; } .botbar__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; padding: 40px 20px; } .botbar__brand { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .botbar__logo { font-family: var(--ff-head); font-weight: 700; font-size: 18px; color: var(--text); } .botbar__logo .topbar__x { color: var(--brand); } .botbar__tag { color: var(--dim); max-width: 44ch; margin: 0; font-size: 14px; } .botbar__col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .botbar__h { font-family: var(--ff-code); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin: 0 0 4px; } .botbar__col a { color: var(--text); font-weight: 600; font-size: 15px; } .botbar__col a:hover { color: var(--brand); } .botbar__legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 18px; } .botbar__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; } .botbar__meta a { color: var(--text); font-weight: 600; font-size: 14px; } .botbar__meta a:hover { color: var(--brand); } .botbar__disclaimer, .botbar__copy { color: var(--dim); font-size: 13px; margin: 0 0 6px; } @media (max-width: 720px) { .botbar__inner { grid-template-columns: 1fr 1fr; } .botbar__brand { grid-column: 1 / -1; } } @media (max-width: 460px) { .botbar__inner { grid-template-columns: 1fr; } }