/* ============================================================ 1. TOKENS ============================================================ */ :root { /* Violet spectrum — principal accent at --v-600 (#7c45f0). Re-anchored from the POC so the principal aligns with the design-system spec while keeping the POC's perceived hue. */ --v-100: #f0e7ff; --v-200: #e0c9ff; --v-300: #c8a3ff; --v-400: #b08cff; --v-500: #9466f8; --v-600: #7c45f0; --v-700: #6430e0; --v-800: #4a20b0; --v-900: #2d1570; --v-glow: rgba(124, 69, 240, 0.6); --v-glow-soft: rgba(124, 69, 240, 0.15); --accent: var(--v-600); /* Semantic colors */ --success: #00e68a; --success-dim: rgba(0, 230, 138, 0.12); --error: #ff4d6a; --error-dim: rgba(255, 77, 106, 0.12); --warning: #ffb020; --warning-dim: rgba(255, 176, 32, 0.12); --info: #4da6ff; --info-dim: rgba(77, 166, 255, 0.12); --severity-minor: #f5c842; --severity-minor-dim: rgba(245, 200, 66, 0.14); /* Surfaces (dark only) */ --bg: #06060e; --abyss: #0b0b19; --depth: #101024; --surface: #16162e; --elevated: #1e1e3a; /* Text */ --t-1: #f0eef8; --t-2: #b0adc0; --t-3: #706d82; --t-4: #4a4860; /* Borders */ --border: rgba(124, 69, 240, 0.1); --border-hover: rgba(124, 69, 240, 0.25); --border-active: rgba(124, 69, 240, 0.4); --border-glass: rgba(255, 255, 255, 0.06); /* Glass surfaces */ --glass-1: rgba(18, 18, 42, 0.45); --glass-2: rgba(22, 22, 50, 0.55); --glass-hover: rgba(124, 69, 240, 0.08); --glass-solid: rgba(14, 14, 32, 0.82); /* Typography families — Latin subset, font-display: swap loaded in */ --f-display: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-mono: 'IBM Plex Mono', Menlo, Consolas, monospace; /* Radius */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 24px; /* Blur */ --blur-sm: blur(12px); --blur-md: blur(24px); --blur-lg: blur(40px); --blur-xl: blur(60px); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 40px rgba(124, 69, 240, 0.15); --shadow-window: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 1px rgba(255, 255, 255, 0.05), 0 0 60px rgba(124, 69, 240, 0.08); /* Easing */ --easing-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================ 2. RESET & GLOBALS ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* The HTML `hidden` attribute (and `element.hidden = true`) is a semantic signal that must always win over component-level `display: …` declarations. */ [hidden] { display: none !important; } fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } legend { display: block; width: 100%; padding: 0; } html, body { margin: 0; padding: 0; min-height: 100vh; background: var(--bg); color: var(--t-1); font-family: var(--f-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { position: relative; overflow-x: hidden; } a { color: var(--v-300); text-decoration: none; } a:hover { color: var(--v-200); } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--t-1); } p { margin: 0; } button { font-family: inherit; } .muted { color: var(--t-2); } .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; } /* ============================================================ 3. LAYOUT ============================================================ */ .app-shell { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .center-stage { display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 100vh; position: relative; z-index: 1; } .dashboard-shell { display: flex; flex-direction: column; justify-content: center; max-width: 1080px; min-height: 100vh; margin: 0 auto; padding: 32px 40px; gap: 32px; box-sizing: border-box; position: relative; z-index: 1; } .dashboard-logout { position: fixed; top: 20px; right: 32px; z-index: 10; } .dashboard-grid { display: flex; gap: 20px; align-items: stretch; justify-content: center; min-height: 380px; height: 380px; } .dashboard-grid > .tile-download { flex: 0 0 600px; } .dashboard-grid > .tile-bug { flex: 0 0 380px; } @media (max-width: 880px) { .dashboard-grid { flex-direction: column; height: auto; } .dashboard-grid > .tile-download, .dashboard-grid > .tile-bug { flex: 1 1 auto; aspect-ratio: 8 / 5; } .dashboard-grid > .tile-bug { aspect-ratio: 1 / 1; } .dashboard-shell { padding: 24px 20px; gap: 24px; } .dashboard-logout { top: 16px; right: 16px; } } /* ============================================================ 4. COMPONENTS ============================================================ */ /* --- Glass surfaces --- */ .glass-panel { background: var(--glass-1); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); border: 1px solid var(--border-glass); border-radius: var(--r-sm); } .glass-panel-solid { background: var(--glass-solid); -webkit-backdrop-filter: var(--blur-md); backdrop-filter: var(--blur-md); border: 1px solid var(--border-glass); border-radius: var(--r-md); } .glass-inset { background: rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--r-sm); } /* --- Buttons --- */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: var(--r-sm); font-family: var(--f-body); font-weight: 600; font-size: 14px; letter-spacing: 0.2px; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: transform 160ms var(--easing-out), box-shadow 200ms var(--easing-out), border-color 160ms var(--easing-out), background 160ms var(--easing-out), color 160ms var(--easing-out); } .btn-primary { background: linear-gradient(135deg, var(--v-600), var(--v-400)); color: var(--t-1); box-shadow: 0 2px 12px var(--v-glow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 28px var(--v-glow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.2); filter: brightness(1.05); } .btn-primary:active { transform: translateY(0); } .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--v-glow-soft), 0 0 0 1px var(--v-400), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .btn-primary:disabled { opacity: 0.5; pointer-events: none; transform: none; } .btn-secondary { background: transparent; color: var(--t-1); border-color: var(--border-hover); } .btn-secondary:hover { transform: translateY(-1px); border-color: var(--v-400); box-shadow: 0 6px 20px var(--v-glow-soft); color: var(--v-100); } .btn-secondary:active { transform: translateY(0); } .btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--v-glow-soft), 0 0 0 1px var(--v-400); } .btn-secondary:disabled { opacity: 0.5; pointer-events: none; transform: none; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); background: transparent; border-radius: var(--r-sm); color: var(--t-3); cursor: pointer; transition: transform 160ms var(--easing-out), color 160ms var(--easing-out), border-color 160ms var(--easing-out), box-shadow 200ms var(--easing-out); } .btn-icon:hover { transform: translateY(-1px); color: var(--t-1); border-color: var(--border-hover); box-shadow: 0 6px 18px var(--v-glow-soft); } .btn-icon:active { transform: translateY(0); } .btn-icon:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--v-glow-soft), 0 0 0 1px var(--v-400); } .btn-icon:disabled { opacity: 0.5; pointer-events: none; transform: none; } .btn-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* --- Inputs --- */ .input { width: 100%; padding: 12px 14px; background: var(--abyss); border: 1px solid var(--border-glass); border-radius: var(--r-sm); color: var(--t-1); font-family: var(--f-body); font-size: 15px; line-height: 1.45; transition: border-color 120ms ease, box-shadow 160ms ease; } .input::placeholder { color: var(--t-3); opacity: 0.85; } .input:focus { outline: none; border-color: var(--v-400); box-shadow: 0 0 0 3px var(--v-glow-soft); } .input[aria-invalid='true'] { border-color: var(--error); } .input[aria-invalid='true']:focus { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-dim); } textarea.input { resize: vertical; min-height: 140px; } /* --- Chips / pills --- */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-family: var(--f-body); font-size: 12px; font-weight: 600; letter-spacing: 0.2px; } .chip-version { background: var(--success-dim); color: var(--success); } .chip-testers { background: var(--v-glow-soft); color: var(--v-300); } .chip-testers .dot-pulse { --dot-color: var(--v-400); } /* --- Mono Braille spinner --- */ .spinner-mono { display: inline-block; font-family: var(--f-mono); color: var(--v-300); width: 1ch; } .spinner-mono::before { content: '⠋'; display: inline-block; animation: spinner-mono-frames 1s steps(10) infinite; } @keyframes spinner-mono-frames { 0% { content: '⠋'; } 10% { content: '⠙'; } 20% { content: '⠹'; } 30% { content: '⠸'; } 40% { content: '⠼'; } 50% { content: '⠴'; } 60% { content: '⠦'; } 70% { content: '⠧'; } 80% { content: '⠇'; } 90% { content: '⠏'; } 100% { content: '⠋'; } } /* --- Skeleton shimmer --- */ .skeleton { display: inline-block; min-width: 60px; height: 1em; border-radius: var(--r-xs); background: linear-gradient( 90deg, var(--glass-1) 25%, var(--glass-hover) 50%, var(--glass-1) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; vertical-align: middle; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* --- Dot pulse (testers counter) --- */ .dot-pulse { display: inline-flex; align-items: center; --dot-color: var(--success); } .dot-pulse::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dot-color); box-shadow: 0 0 8px var(--dot-color); animation: dot-pulse 2s ease-in-out infinite alternate; margin-right: 8px; vertical-align: baseline; } @keyframes dot-pulse { 0% { opacity: 0.4; } 100% { opacity: 1; } } /* --- Severity cards (used by /report) --- */ .severity-card { --sev-color: var(--t-3); --sev-bg: var(--glass-1); position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px; background: var(--sev-bg); border: 1px solid var(--border-glass); border-radius: var(--r-sm); cursor: pointer; text-align: left; font-family: var(--f-body); color: var(--t-1); transition: border-color 160ms var(--easing-out), background 160ms var(--easing-out); } .severity-card[data-severity='blocker'] { --sev-color: var(--error); } .severity-card[data-severity='major'] { --sev-color: var(--warning); } .severity-card[data-severity='minor'] { --sev-color: var(--severity-minor); } .severity-card[data-severity='cosmetic'] { --sev-color: var(--t-3); } .severity-card__row { display: flex; align-items: center; gap: 10px; } .severity-card__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sev-color); } .severity-card__label { font-size: 14px; font-weight: 600; color: var(--t-1); } .severity-card__helper { font-size: 12.5px; color: var(--t-2); line-height: 1.4; } .severity-card[data-selected='true'] { background: color-mix(in srgb, var(--sev-color) 20%, transparent); border-color: var(--sev-color); } .severity-card[data-selected='true'] .severity-card__label, .severity-card[data-selected='true'] .severity-card__dot { text-shadow: 0 0 8px color-mix(in srgb, var(--sev-color) 40%, transparent); } .severity-card[data-severity='cosmetic'][data-selected='true'] .severity-card__label, .severity-card[data-severity='cosmetic'][data-selected='true'] .severity-card__dot { text-shadow: none; } .severity-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--v-glow-soft); } /* --- Drop zone (attachments) --- */ .drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 18px; background: rgba(0, 0, 0, 0.15); border: 1px dashed var(--border-glass); border-radius: var(--r-sm); cursor: pointer; color: var(--t-2); font-size: 14px; text-align: center; transition: border-color 160ms var(--easing-out), background 160ms var(--easing-out); } .drop-zone__icon { width: 28px; height: 28px; color: var(--v-300); stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .drop-zone__hint { color: var(--t-1); font-weight: 500; } .drop-zone__limits { color: var(--t-3); font-size: 12.5px; } .drop-zone--active { border-color: var(--v-400); background: var(--v-glow-soft); color: var(--t-1); } /* --- Field error / inline validation --- */ .field-label { display: block; font-size: 13px; font-weight: 500; color: var(--t-2); margin-bottom: 8px; } .field-help { margin: 0; font-size: 12.5px; color: var(--t-3); } .field-error { margin: 6px 0 0; min-height: 1em; font-size: 13px; color: var(--error); } .input[aria-invalid='true'] ~ .field-error, [aria-invalid='true'] + .field-error { /* ensures inline errors are visible alongside invalid inputs */ } /* --- Generic error block --- */ .error { margin-top: 12px; padding: 10px 12px; background: var(--error-dim); border: 1px solid color-mix(in srgb, var(--error) 35%, transparent); border-radius: var(--r-sm); color: var(--error); font-size: 13.5px; } /* --- Wordmark --- */ .wordmark { font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--t-1); } .wordmark svg { height: 1em; width: auto; display: inline-block; vertical-align: middle; } /* --- Expand row (generic collapsible list shell) --- Used by /download (per release) and /vps (per provider). Page-specific styles add their own classes (.release-row__version, .vps-row__brand, …) on top of this shell. */ .expand-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-glass); } .expand-row { background: transparent; border: none; border-bottom: 1px solid var(--border-glass); border-radius: 0; overflow: hidden; } .expand-row__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 32px 4px; background: transparent; border: none; cursor: pointer; color: var(--t-1); text-align: left; font-family: var(--f-body); transition: color 160ms var(--easing-out); } .expand-row__header:hover { color: var(--t-1); } .expand-row__header:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--v-400); border-radius: var(--r-xs); } .expand-row__chevron { color: var(--t-3); font-size: 18px; line-height: 1; font-weight: 300; font-family: var(--f-body); transition: transform 200ms var(--easing-out), color 160ms var(--easing-out); display: inline-block; } .expand-row__header:hover .expand-row__chevron { color: var(--t-1); } .expand-row[data-expanded='true'] .expand-row__chevron { transform: rotate(90deg); color: var(--t-1); } .expand-row__body { padding: 0 4px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 320ms var(--easing-out), opacity 240ms var(--easing-out), padding 320ms var(--easing-out); } .expand-row[data-expanded='true'] .expand-row__body { max-height: 600px; opacity: 1; padding: 4px 4px 40px; } /* --- Reduced motion: disable looping animations --- */ @media (prefers-reduced-motion: reduce) { .spinner-mono::before, .skeleton, .dot-pulse::before, .expand-row--animating { animation: none !important; } .btn-primary, .btn-secondary, .btn-icon { transition: none; } .expand-row__body { transition: none; } } /* ============================================================ 5. PAGES ============================================================ */ /* --- 5.1 Login (route / when unauthenticated) --- */ .login-card { width: 100%; max-width: 420px; padding: 36px 32px 32px; display: flex; flex-direction: column; gap: 16px; border-radius: var(--r-md); background: var(--glass-solid); -webkit-backdrop-filter: var(--blur-md); backdrop-filter: var(--blur-md); border: 1px solid var(--border-glass); box-shadow: var(--shadow-window); } .login-card__head { text-align: center; margin-bottom: 4px; } .login-card__head .wordmark { font-size: 32px; } .login-card__subtitle { margin-top: 8px; color: var(--t-2); font-size: 14px; } .login-form { display: flex; flex-direction: column; gap: 14px; } .login-form .btn-primary { margin-top: 6px; width: 100%; } /* --- 5.2 Dashboard (route / when authenticated) --- */ .dashboard-welcome { display: flex; flex-direction: column; gap: 10px; max-width: 720px; text-align: left; width: 100%; } .dashboard-welcome__tagline { font-family: var(--f-display); font-size: clamp(40px, 6vw, 64px); font-weight: 700; letter-spacing: -0.025em; color: var(--t-1); line-height: 1.05; } .dashboard-welcome__pitch { font-family: var(--f-body); font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--t-2); max-width: 640px; } .dashboard-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 13px; color: var(--t-2); margin-top: 6px; } .dashboard-status__version-tag { font-family: var(--f-mono); } .tile { display: flex; flex-direction: column; gap: 18px; padding: 24px 24px 22px; background: var(--glass-2); -webkit-backdrop-filter: var(--blur-md); backdrop-filter: var(--blur-md); border: 1px solid var(--border-glass); border-radius: var(--r-md); box-shadow: var(--shadow-md); } .tile__title { font-family: var(--f-display); font-size: 22px; font-weight: 600; color: var(--t-1); margin: 0; } .tile__description { font-size: 14.5px; color: var(--t-2); margin: 0; } .tile__cta { align-self: flex-start; margin-top: auto; } /* Full-bleed illustration tile: background image covers the whole tile, content overlays the lower portion with a gradient overlay for legibility. */ .tile--illustrated { position: relative; overflow: hidden; gap: 10px; padding: 24px 26px 22px; background-color: var(--depth); background-size: cover; background-position: center; background-repeat: no-repeat; justify-content: flex-end; height: 100%; } .tile--illustrated::before { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.35) 65%, rgba(0, 0, 0, 0.7) 100% ); pointer-events: none; z-index: 0; } .tile--illustrated > * { position: relative; z-index: 1; } .tile--illustrated .tile__title { font-size: 28px; letter-spacing: -0.01em; } .tile--illustrated .tile__description { color: var(--t-1); font-size: 14.5px; line-height: 1.45; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); max-width: 36ch; } .tile--illustrated .tile__cta { margin-top: 6px; } .tile-download.tile--illustrated { background-image: url('/img/tile-download-bg.png'); } .tile-bug.tile--illustrated { background-image: url('/img/tile-bug-bg.png'); } /* Wide variant: horizontal layout (text left, CTA right), short height. Used by the dashboard VPS tile that spans the width of the two tiles above it. */ .tile--illustrated-wide { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 28px; height: 140px; } .tile--illustrated-wide::before { background: linear-gradient( to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.1) 100% ); } .tile--illustrated-wide .tile__title { font-size: 22px; margin: 0; } .tile--illustrated-wide .tile__description { margin: 4px 0 0; max-width: 56ch; } .tile--illustrated-wide .tile-vps__text { display: flex; flex-direction: column; min-width: 0; } .tile--illustrated-wide .tile__cta { align-self: center; margin: 0; flex-shrink: 0; } .tile-vps.tile--illustrated { background-image: url('/img/tile-vps-bg.png'); } .dashboard-vps { display: flex; justify-content: stretch; } .dashboard-vps > .tile-vps { flex: 1 1 auto; width: 100%; } @media (max-width: 880px) { .tile--illustrated-wide { flex-direction: column; align-items: flex-start; height: auto; padding: 20px; } .tile--illustrated-wide .tile__cta { align-self: flex-start; } } /* --- 5.3 Download (route /download) --- Dark mode like the rest of the portal; the body.page-download scope only carries page-specific layout and the orb-hiding rule. */ body.page-download .download-page { max-width: 1200px; margin: 0 auto; padding: 32px 40px 96px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0; } body.page-download .download-page__top { display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding-bottom: 64px; } body.page-download .download-page__back { font-size: 13px; color: var(--t-3); text-decoration: none; transition: color 160ms var(--easing-out); } body.page-download .download-page__back:hover { color: var(--t-1); } /* Hero banner: large title plus description, full bleed inside the container. */ body.page-download .download-hero { padding: 24px 0 56px; display: flex; flex-direction: column; gap: 24px; max-width: 760px; } body.page-download .download-hero__title { font-family: var(--f-display); font-size: clamp(40px, 6vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; color: var(--t-1); margin: 0; display: inline-flex; align-items: baseline; gap: 4px; } body.page-download .download-hero__cursor { display: inline-block; width: 4px; height: 0.85em; margin-left: 6px; border-radius: 1px; background: linear-gradient(180deg, var(--v-300) 0%, var(--v-500) 100%); transform: translateY(0.06em); animation: download-hero-cursor-blink 1.1s steps(2, end) infinite; } @keyframes download-hero-cursor-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } body.page-download .download-hero__description { font-family: var(--f-body); font-size: 15px; line-height: 1.6; color: var(--t-2); margin: 0; max-width: 640px; } body.page-download .release-row__version { display: flex; align-items: baseline; gap: 14px; font-size: 15px; color: var(--t-3); font-weight: 400; min-width: 180px; } body.page-download .release-row__version-prefix { color: var(--t-3); font-weight: 400; } body.page-download .release-row__version-tag { color: var(--t-1); font-weight: 400; font-size: 15px; } body.page-download .expand-row__body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; } body.page-download .expand-row[data-expanded='true'] .expand-row__body { max-height: 600px; } body.page-download .release-os { display: flex; flex-direction: column; gap: 16px; } body.page-download .release-os__heading { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-body); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--t-1); padding-bottom: 4px; } body.page-download .release-os__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--t-1); } body.page-download .release-os__icon svg { display: block; } body.page-download .release-binary { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; border-radius: 0; border: none; background: transparent; color: var(--t-1); font-size: 14px; text-decoration: none; transition: color 160ms var(--easing-out); } body.page-download .release-binary__glyph { display: inline-flex; align-items: center; justify-content: center; color: var(--t-1); transition: color 160ms var(--easing-out); } body.page-download .release-binary__glyph svg { display: block; } body.page-download .release-binary:hover { color: var(--v-300); } body.page-download .release-binary:hover .release-binary__glyph { color: var(--v-300); } body.page-download .release-binary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--v-400); border-radius: var(--r-xs); } body.page-download .release-binary[aria-disabled='true'] { pointer-events: none; opacity: 0.6; color: var(--t-3); } body.page-download .release-binary[aria-disabled='true'] .release-binary__glyph { color: var(--t-3); } body.page-download .download-error { padding: 32px; text-align: center; background: var(--glass-1); border: 1px solid var(--border-glass); border-radius: var(--r-md); color: var(--t-2); } body.page-download .download-error__retry { margin-top: 12px; display: inline-block; } @media (max-width: 720px) { body.page-download .download-page { padding: 40px 20px 60px; } body.page-download .expand-row__body { grid-template-columns: 1fr; gap: 24px; } } @media (prefers-reduced-motion: reduce) { body.page-download .expand-row__body, body.page-download .expand-row__chevron, body.page-download .release-binary, body.page-download .release-binary__glyph, body.page-download .download-page__back, body.page-download .expand-row__header { transition: none !important; } } /* --- 5.x VPS (route /vps) --- */ body.page-vps .vps-page { max-width: 1200px; margin: 0 auto; padding: 32px 40px 96px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0; } body.page-vps .vps-page__top { display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding-bottom: 64px; } body.page-vps .vps-page__back { font-size: 13px; color: var(--t-3); text-decoration: none; transition: color 160ms var(--easing-out); } body.page-vps .vps-page__back:hover { color: var(--t-1); } body.page-vps .vps-hero { padding: 24px 0 40px; display: flex; flex-direction: column; gap: 18px; max-width: 760px; } body.page-vps .vps-hero__title { font-family: var(--f-display); font-size: clamp(40px, 6vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; color: var(--t-1); margin: 0; } body.page-vps .vps-hero__description { font-family: var(--f-body); font-size: 15px; line-height: 1.6; color: var(--t-2); margin: 0; max-width: 640px; } body.page-vps .vps-hero__spec { font-family: var(--f-body); font-size: 14px; color: var(--t-2); margin: 4px 0 0; } body.page-vps .vps-hero__spec-glyph { color: var(--t-3); font-size: 15px; } body.page-vps .vps-row__brand { display: inline-flex; align-items: center; gap: 14px; min-width: 220px; } body.page-vps .vps-row__logo { width: 28px; height: 28px; object-fit: contain; } body.page-vps .vps-row__name { font-size: 16px; font-weight: 600; color: var(--t-1); letter-spacing: -0.005em; } body.page-vps .vps-row__price { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--f-body); color: var(--t-2); font-size: 14px; margin-left: auto; margin-right: 16px; } body.page-vps .vps-row__price-prefix { color: var(--t-3); font-size: 13px; } body.page-vps .vps-row__price-amount { color: var(--t-1); font-weight: 500; font-family: var(--f-mono); font-size: 14px; } body.page-vps .vps-row__bonus { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-xs); background: var(--success-dim); color: var(--success); font-size: 12px; font-weight: 600; letter-spacing: 0.2px; margin-right: 14px; } body.page-vps .expand-row__body { display: flex; flex-direction: column; gap: 16px; } body.page-vps .vps-row__plan { font-family: var(--f-mono); font-size: 13px; color: var(--t-3); margin: 0; } body.page-vps .vps-row__description { font-family: var(--f-body); font-size: 14.5px; line-height: 1.55; color: var(--t-1); margin: 0; max-width: 760px; } body.page-vps .vps-row__advantage-block { padding: 16px 18px; margin: 4px 0; max-width: 760px; display: flex; flex-direction: column; gap: 8px; } body.page-vps .vps-row__advantage-heading { font-family: var(--f-body); font-size: 12.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--success); margin: 0; } body.page-vps .vps-row__advantage-body { font-size: 14px; line-height: 1.55; color: var(--t-1); margin: 0; } body.page-vps .vps-row__advantage-code { margin: 4px 0 0; } body.page-vps .vps-row__advantage-code code { display: inline-block; padding: 4px 10px; border-radius: var(--r-xs); background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border-glass); font-family: var(--f-mono); font-size: 13px; color: var(--t-1); letter-spacing: 0.4px; } body.page-vps .vps-row__cta { align-self: flex-start; margin-top: 8px; } body.page-vps .vps-row__download-note { margin: 6px 0 0; font-size: 13px; color: var(--t-3); } body.page-vps .vps-row__download-note a { color: var(--v-300); } body.page-vps .vps-row__download-note a:hover { color: var(--v-200); } /* --- 5.4 Report (route /report) --- */ .report-page { max-width: 720px; margin: 0 auto; padding: 36px 28px 56px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0; } .report-page__top { display: flex; align-items: center; justify-content: flex-start; padding-bottom: 64px; } .report-page__back { font-size: 13px; color: var(--t-3); text-decoration: none; transition: color 160ms var(--easing-out); } .report-page__back:hover { color: var(--t-1); } .report-hero { padding: 24px 0 32px; display: flex; flex-direction: column; gap: 24px; max-width: 760px; } .report-hero__title { font-family: var(--f-display); font-size: clamp(40px, 6vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; color: var(--t-1); margin: 0; } .report-hero__description { font-family: var(--f-body); font-size: 15px; line-height: 1.6; color: var(--t-2); margin: 0; max-width: 640px; } .report-form { display: flex; flex-direction: column; gap: 18px; padding: 0; } .report-form > .field-block { padding-top: 24px; border-top: 1px solid var(--border-glass); } .report-form > .field-block:first-child, .report-form > .field-block--no-divider { padding-top: 0; border-top: none; } .report-form .field-block { display: flex; flex-direction: column; } .report-form .report-reporter { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 600px) { .report-form .report-reporter { grid-template-columns: 1fr; } } .report-reporter__email { display: block; padding: 12px 14px; background: var(--elevated); border: 1px dashed var(--border-glass); border-radius: var(--r-sm); font-family: var(--f-body); font-size: 15px; line-height: 1.45; color: var(--t-3); cursor: default; word-break: break-all; } .telegram-input { display: flex; align-items: stretch; border: 1px solid var(--border-glass); border-radius: var(--r-sm); background: var(--abyss); overflow: hidden; transition: border-color 120ms ease, box-shadow 160ms ease; } .telegram-input:focus-within { border-color: var(--v-400); box-shadow: 0 0 0 3px var(--v-glow-soft); } .telegram-input__prefix { display: inline-flex; align-items: center; padding: 0 12px; background: rgba(0, 0, 0, 0.18); color: var(--t-3); font-family: var(--f-mono); font-size: 14px; user-select: none; } .telegram-input input { flex: 1 1 auto; border: none; background: transparent; padding: 12px 14px; font: inherit; color: var(--t-1); outline: none; min-width: 0; } .telegram-input[aria-invalid='true'], .telegram-input:has(input[aria-invalid='true']) { border-color: var(--error); } .severity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 760px) { .severity-grid { grid-template-columns: repeat(2, 1fr); } } .report-form .drop-zone-block { display: flex; flex-direction: column; gap: 10px; } .attachments-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .attachment-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: rgba(0, 0, 0, 0.15); border: 1px solid var(--border-glass); border-radius: var(--r-xs); font-size: 13.5px; } .attachment-row__name { flex: 1 1 auto; word-break: break-all; } .attachment-row__size { flex: 0 0 auto; font-size: 12px; color: var(--t-3); } .attachment-row__remove { flex: 0 0 auto; background: transparent; border: 1px solid var(--border); color: var(--t-3); border-radius: var(--r-xs); padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: var(--f-body); } .attachment-row__remove:hover { border-color: var(--error); color: var(--error); } .attachments-counter { margin: 0; font-size: 12px; color: var(--t-3); min-height: 1em; } .report-form .btn-primary { width: 100%; margin-top: 8px; } .draft-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; padding: 12px 16px; background: var(--glass-1); border: 1px solid var(--border-glass); border-radius: var(--r-sm); font-size: 13.5px; } .draft-banner[hidden] { display: none; } .draft-banner__text { margin: 0; flex: 1 1 240px; color: var(--t-2); } .draft-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; } .draft-banner .btn-primary, .draft-banner .btn-secondary { padding: 7px 14px; font-size: 13px; } /* Confirmation (in-place) */ .report-confirm { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 32px; } .report-confirm[hidden] { display: none; } .report-confirm__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--success-dim); color: var(--success); font-size: 22px; font-weight: 700; } .report-confirm__heading { font-family: var(--f-display); font-size: 24px; font-weight: 700; color: var(--t-1); } .report-confirm__subheading { color: var(--t-2); font-size: 14.5px; } .report-confirm__ticket { font-family: var(--f-mono); font-size: 14px; padding: 6px 12px; border-radius: var(--r-xs); background: var(--v-glow-soft); color: var(--v-200); } .report-confirm__contact { font-size: 13.5px; color: var(--t-3); } .report-confirm__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } /* --- 5.5 Severity-specific borders/states defaults (resting) --- */ .severity-card[data-severity='blocker'][data-selected='true'], .severity-card[data-severity='major'][data-selected='true'], .severity-card[data-severity='minor'][data-selected='true'], .severity-card[data-severity='cosmetic'][data-selected='true'] { border-width: 1px; }