/* ============================================================ VARIABLES — "Less is more" 3-colour system ------------------------------------------------------------ Only three real colours exist: --bg, --text, --highlight. Every other tone is derived from those three via color-mix(). Legacy token names are kept but re-pointed at the new system, so existing selectors update automatically. Dark mode first; light via prefers-color-scheme + .theme-light. ============================================================ */ :root { /* —— palette: each colour literal defined exactly once per theme —— */ --dark-bg: #1c1c1e; /* dark grey */ --dark-text: #ffffff; /* white */ --dark-highlight: #8fc7ff; /* light blue */ --light-bg: #f9f7f3; /* paper-like beige */ --light-text: #000000; /* black */ --light-highlight: #db4f18; /* peach */ /* —— active colours: dark by default —— */ --bg: var(--dark-bg); --text: var(--dark-text); --highlight: var(--dark-highlight); /* —— derived neutrals (mixes of the three) —— */ --line: color-mix(in srgb, var(--text) 30%, var(--bg)); /* hairline */ --line-faint: color-mix(in srgb, var(--text) 14%, var(--bg)); --menu-text: color-mix(in srgb, var(--text) 75%, var(--bg)); /* nav items */ --text-2: color-mix(in srgb, var(--text) 70%, var(--bg)); --text-muted: color-mix(in srgb, var(--text) 48%, var(--bg)); --bg-hover: color-mix(in srgb, var(--text) 8%, var(--bg)); /* —— legacy aliases → collapsed onto the system —— */ --bg-surface: var(--bg); /* no separate surface fills */ --bg-surface-2: var(--bg); --surface-2: var(--bg); --text-1: var(--text); --border: var(--line); --border-subtle: var(--line-faint); --accent: var(--highlight); --accent-hover: var(--highlight); --accent-text: var(--bg); /* label on a highlight fill (dark) */ --accent-glow: transparent; /* no glow */ /* filled button look: 60% bg / 40% highlight, highlight-coloured label */ --btn-fill: color-mix(in srgb, var(--bg) 70%, var(--highlight) 30%); --header-bg: var(--bg); --header-h: 80px; /* flat — minimal rounding, no shadows */ --radius: 6px; --radius-lg: 9px; --shadow-card: none; --shadow-sm: none; --gap: 1.5rem; --section-gap: 1.5rem; --font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif; --max-w: 1180px; --max-w-narrow: 720px; --ease: 150ms ease; } /* —— Light mode: paper-beige bg, black text, peach highlight —— */ @media (prefers-color-scheme: light) { :root { --bg: var(--light-bg); --text: var(--light-text); --highlight: var(--light-highlight); --accent-text: var(--text); /* dark label on peach fill */ } } /* Manual overrides (applied to by inline script in ) */ .theme-light { --bg: var(--light-bg); --text: var(--light-text); --highlight: var(--light-highlight); --accent-text: var(--text); } .theme-dark { --bg: var(--dark-bg); --text: var(--dark-text); --highlight: var(--dark-highlight); --accent-text: var(--bg); } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); letter-spacing: 0.02em; } main { flex: 1; padding-top: var(--header-h); } img { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; transition: color var(--ease); } a:hover { color: var(--accent-hover); } ul, ol { list-style: none; } h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; letter-spacing: 0; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 1.4rem; border-radius: var(--radius); font-family: var(--font); font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--ease), color var(--ease), border-color var(--ease); white-space: nowrap; text-decoration: none; } /* Buttons are the only filled elements in the design. */ .btn--primary { background: var(--btn-fill); color: var(--highlight); border-color: var(--btn-fill); } .btn--primary:hover { /* invert for feedback — no glow */ background: var(--text); border-color: var(--text); color: var(--bg); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--line); } .btn--ghost:hover { background: transparent; color: var(--highlight); border-color: var(--highlight); } .btn--lg { padding: 0.85rem 2.2rem; font-size: 1rem; } /* ============================================================ SITE HEADER & NAV ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h); background: var(--bg); } /* bottom hairline only as wide as the centered content (matches subnav) */ .site-header::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--max-w); border-bottom: 1px solid var(--line); } .site-header__inner { max-width: calc(var(--max-w) + 2 * var(--gap)); margin: 0 auto; padding: 0 var(--gap); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--gap); } .site-header__logo { display: flex; align-items: center; gap: 1rem; color: var(--text); flex-shrink: 0; line-height: 1; } .site-header__logo-icon { height: 42px; width: 42px; fill: currentColor; flex-shrink: 0; display: block; } .site-header__logo-text { font-size: 1.1rem; font-weight: 500; letter-spacing: 0.01em; display: flex; flex-direction: column; line-height: 1.2; } .site-header__logo-sub { font-size: 0.6rem; font-weight: 400; letter-spacing: 0.04em; opacity: 0.5; } .site-header__logo:hover { color: var(--text); opacity: 0.8; } .site-nav__list { display: flex; align-items: center; gap: 0.25rem; } .site-nav__list li a { display: block; padding: 0.4rem 0.9rem; border-radius: var(--radius); color: var(--menu-text); /* 75% text + 25% bg */ font-size: 0.9rem; font-weight: 500; transition: color var(--ease); } .site-nav__list li a:hover, .site-nav__list li.active a { color: var(--highlight); background: transparent; } /* Hamburger (mobile) */ .site-nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; border-radius: var(--radius); } .site-nav__toggle span { display: block; width: 22px; height: 2px; background: var(--text-2); border-radius: 2px; transition: transform var(--ease), opacity var(--ease); } .site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ SITE FOOTER ============================================================ */ .site-footer { position: relative; padding: 3rem var(--gap) 2.5rem; margin-top: var(--section-gap); background: var(--bg); } /* top hairline only as wide as the centered content (matches site-header) */ .site-footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--max-w); border-top: 1px solid var(--line); } .site-footer__inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; } .site-footer__brand { display: flex; flex-direction: column; gap: 0.25rem; } .site-footer__name { font-weight: 700; font-size: 0.95rem; color: var(--text); } .site-footer__copy { font-size: 0.8rem; color: var(--text-muted); } .site-footer__nav { display: flex; gap: 1.5rem; flex-wrap: wrap; } .site-footer__nav a { font-size: 0.85rem; color: var(--text-2); } .site-footer__nav a:hover { color: var(--text); } .site-footer__social { display: flex; align-items: center; gap: 1rem; } .site-footer__social a { display: inline-flex; color: var(--text-2); transition: color var(--ease); } .site-footer__social a:hover { color: var(--accent); } .site-footer__social svg { width: 18px; height: 18px; display: block; } /* ============================================================ COOKIE BANNER ============================================================ */ /* The banner sits over the page but does NOT trap interaction: the fixed layer is click-through (pointer-events: none) so only the panel itself catches clicks, and the rest of the page stays fully usable behind it. Only the page behind the panel is blurred. Anchored to the bottom on desktop while keeping its own width; a full-width bottom sheet in one-column mode. */ .cookie-banner { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; padding: var(--gap); overflow-y: auto; /* Let clicks and scrolls reach the page; the panel re-enables them below. */ pointer-events: none; } .cookie-banner__inner { /* The one interactive part — everything else on the layer passes through. */ pointer-events: auto; width: min(90vw, 615px); min-width: 37.5vw; min-height: 37.5vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 1.125rem; padding: 1.875rem; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: var(--radius-lg); } .cookie-banner__text { max-width: 62ch; font-size: 1.05rem; line-height: 1.7; color: var(--text-2); } .cookie-banner__text a { color: var(--accent); } .cookie-banner__actions { display: flex; justify-content: center; gap: 0.75rem; flex-shrink: 0; flex-wrap: wrap; } /* both answers identical in size, so neither choice is nudged */ .cookie-banner__actions .btn { min-width: 12rem; } /* ============================================================ SECTION LAYOUT ============================================================ */ .section { padding: var(--section-gap) var(--gap); } .section + .section { padding-top: 0; } .section--compact { padding: 2rem var(--gap); } .section--compact + .section--compact { padding-top: 0; } .title-banner { line-height: 0; position: relative; } .title-banner .section__inner { position: relative; } /* dark mode: soft circular glow behind the banner, confined to the inner section */ .title-banner .section__inner::before { content: ''; position: absolute; inset: 0; background: radial-gradient( 75% 50% at 50% 50%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.125) 75%, rgba(255, 255, 255, 0) 100% ); pointer-events: none; z-index: 0; } /* glow is dark-mode only */ @media (prefers-color-scheme: light) { .title-banner .section__inner::before { display: none; } } .theme-light .title-banner .section__inner::before { display: none; } .theme-dark .title-banner .section__inner::before { display: block; } /* manual Dark re-enables it on a light OS */ .title-banner img { width: 100%; height: auto; display: block; position: relative; z-index: 1; } .section__inner { max-width: var(--max-w); margin: 0 auto; } .section__inner--narrow { max-width: var(--max-w-narrow); } .section__title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 1rem; color: var(--text); } .section__intro { color: var(--text-2); font-size: 1.05rem; margin-bottom: 2.5rem; max-width: 55ch; } /* ============================================================ HERO ============================================================ */ .hero, .product-hero { padding: 2.5rem var(--gap) 1rem; /* hero image if one is set, otherwise transparent (--bg shows through) */ background: var(--hero-bg-img, none) center / cover no-repeat; position: relative; overflow: hidden; } .hero__inner, .product-hero__inner { max-width: var(--max-w); margin: 0 auto; position: relative; } .hero__title, .product-hero__title { font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: 0; margin-bottom: 1rem; color: var(--text); position: relative; z-index: 1; } .hero__sub { font-size: 1.15rem; color: var(--text); max-width: 50ch; position: relative; z-index: 1; } /* ============================================================ PRODUCT CARDS ============================================================ */ /* Multi-column above the single-column breakpoint (see PRODUCT CARDS — SINGLE COLUMN below); the grid never drops to one column on its own. */ .product-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); } .product-card { --card-pad-x: 1.25rem; background: var(--bg); border: 1px solid transparent; border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--ease); position: relative; cursor: pointer; } .product-card__link::after { content: ''; position: absolute; inset: 0; } .product-card .btn { position: relative; z-index: 1; } .product-card:hover { border-color: var(--highlight); } /* Shared horizontal inset for every full-width row of a card (image, body, footer) so their edges line up. */ .product-card__inset { padding-left: var(--card-pad-x); padding-right: var(--card-pad-x); } .product-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--bg-surface-2); padding-top: 1.25rem; padding-bottom: 1.25rem; } .product-card__body { padding-top: 1.25rem; padding-bottom: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: 0.75rem; } .product-card__name { font-size: 1.1rem; color: var(--text); } .product-card__name a { color: inherit; text-decoration: none; } .product-card__desc { font-size: 0.875rem; color: var(--text-2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .product-card__formats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; } .product-card__formats li { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 4px; background: var(--bg-surface-2); border: 1px solid var(--border); color: var(--text-muted); } .product-card__bundle-items { font-size: 0.85rem; color: var(--text-2); display: flex; flex-direction: column; gap: 0.3rem; } .product-card__bundle-items li::before { content: '+ '; color: var(--accent); font-weight: 700; } .product-card__footer { padding-top: 1rem; padding-bottom: 1rem; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .product-card__pricing { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; } .product-card__price { font-size: 1.4rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } .product-card__price-alt { font-size: 0.85rem; color: var(--text-muted); } .product-card__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .product-card--bundle { border-style: dashed; } .product-card--bundle:hover { border-style: solid; } /* ── Product cards — single column ──────────────────────────── One breakpoint drives every single-column change, so the column count and the card padding always switch at the same page width: 2 x 280px track + 1 grid gap + 2 x page padding (= 3 x --gap); below that a second column no longer fits. NOTE: var() is invalid inside a media condition, so --gap's value (1.5rem) is spelled out here — keep both in sync. */ @media (max-width: calc(2 * 280px + 3 * 1.5rem - 0.02px)) { .product-cards { grid-template-columns: 1fr; } /* card rows span the full card width */ .product-card { --card-pad-x: 0; } .product-card__img { aspect-ratio: auto; } } /* ── Product sub-navigation (Overview / Manual tabs) ─────── */ .product-subnav { background: var(--bg-surface); position: sticky; top: var(--header-h); z-index: 10; } .product-subnav__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gap); display: flex; border-bottom: 1px solid var(--border); } .product-subnav__tab { padding: 0.875rem 1.25rem; color: var(--text-2); font-size: 0.9rem; font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--ease), border-color var(--ease); } .product-subnav__tab:hover { color: var(--text); } .product-subnav__tab.is-active { color: var(--accent); border-bottom-color: var(--accent); } /* ============================================================ PRODUCT DETAIL PAGE ============================================================ */ .product-hero__logo { max-width: 360px; position: relative; z-index: 1; } .product-hero__logo svg { width: 100%; height: 60px; fill: var(--text); } .product-detail__inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 300px; gap: 3rem; align-items: start; } .product-detail__image-wrap { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 2rem; } .product-detail__image { width: 100%; max-height: 300px; object-fit: contain; } .product-detail__name { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--text); margin-bottom: 1.25rem; } .product-detail__desc { font-size: 1rem; color: var(--text-2); line-height: 1.75; margin-bottom: 1.75rem; } .product-detail__formats { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; } .product-detail__formats li { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 4px; background: var(--bg-surface-2); border: 1px solid var(--border); color: var(--text-2); } .product-detail__sidebar { position: sticky; top: calc(var(--header-h) + 2rem); display: flex; flex-direction: column; gap: 1.25rem; } .product-detail__buy-card { background: var(--bg-surface); border-radius: var(--radius-lg); padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; } .product-detail__pricing { display: flex; align-items: baseline; gap: 0.5rem; } .product-detail__price { font-size: 2.2rem; font-weight: 700; color: var(--text); letter-spacing: -0.03em; } .product-detail__price-alt { font-size: 1rem; color: var(--text-muted); } .btn--full { width: 100%; } .product-detail__unavailable { font-size: 0.85rem; color: var(--text-2); margin-bottom: 1rem; } .product-detail__downloads { border-top: 1px solid var(--border-subtle); padding-top: 1rem; } .product-detail__downloads-title { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.75rem; } .product-detail__download-list { display: flex; flex-direction: column; gap: 0.4rem; list-style: none; } .product-detail__download-list a { font-size: 0.875rem; color: var(--accent); } /* download links grouped under a single platform heading (Mac / Windows) */ .download-group + .download-group { margin-top: 0.75rem; } .download-group__platform { display: block; font-size: 0.78rem; font-weight: 700; color: var(--text-2); margin-bottom: 0.3rem; } .download-group__platform small { font-weight: 400; color: var(--text-muted); } .download-info { margin-top: 0.75rem; font-size: 0.8rem; line-height: 1.5; color: var(--text-muted); } /* ── System requirements ───────────────────────────────────── Sits under the buy card, grouped by platform exactly as the download links above it are, so Mac and Windows read the same way in both. A hairline separates it rather than a fill of its own. */ .product-requirements { margin-top: var(--gap); padding-top: var(--gap); border-top: 1px solid var(--line-faint); } .product-requirements__title { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.75rem; } .product-requirements__group + .product-requirements__group { margin-top: 0.9rem; } /* Matches .download-group__platform, including its body font — a heading element for the structure, styled as the label it reads as. */ .product-requirements__platform { font-family: var(--font); font-size: 0.78rem; font-weight: 700; color: var(--text-2); margin-bottom: 0.3rem; } .product-requirements__list { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; line-height: 1.45; color: var(--text-muted); } .product-detail__download-list a:hover { color: var(--accent-hover); } .product-detail__back { font-size: 0.875rem; color: var(--text-muted); text-decoration: none; align-self: flex-start; } .product-detail__back:hover { color: var(--text-2); } /* ============================================================ BUY PAGE ============================================================ */ .buy-page__header { margin-bottom: 2.5rem; } .buy-page__back { font-size: 0.875rem; color: var(--text-2); display: inline-block; margin-bottom: 1rem; } .buy-page__back:hover { color: var(--text); } .buy-page__title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 0.5rem; } .buy-page__intro { color: var(--text-2); font-size: 1rem; margin-bottom: 1rem; } .buy-page__header .currency-toggle { margin-top: 0.25rem; } .discount-banner { display: flex; align-items: center; gap: 1.25rem; background: var(--bg); border: 1px solid var(--highlight); color: var(--text); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; } .discount-banner__badge { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.03em; white-space: nowrap; color: var(--highlight); } .discount-banner__body { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; } .discount-banner__headline { font-size: 1.05rem; font-weight: 700; } .discount-banner__sub { font-size: 0.875rem; opacity: 0.9; } /* colours come from .btn--primary (--btn-fill); only layout here */ .discount-banner__cta { white-space: nowrap; flex-shrink: 0; } .buy-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .buy-option { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem; display: flex; flex-direction: column; gap: 1.1rem; position: relative; } .buy-option--bundle { border-color: var(--highlight); } .buy-option--upgrade { border-color: var(--text-muted); } /* Featured option: a slowly rotating rainbow shine in place of the border. Registering the angle lets the conic gradient itself animate; where @property is unsupported the ring simply stands still. */ @property --shine-angle { syntax: ''; initial-value: 0deg; inherits: false; } .buy-option--featured { border-color: transparent; } .buy-option--featured::before { content: ''; position: absolute; inset: -3px; border-radius: calc(var(--radius-lg) + 2px); padding: 3px; /* ring thickness */ background: conic-gradient(from var(--shine-angle), #ff0040, #ff8a00, #ffd500, #00d15a, #00b8d4, #4b6bff, #a13bff, #ff0040); /* show the padding ring only, not the area behind the card */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: buy-option-shine 9s linear infinite; pointer-events: none; } @keyframes buy-option-shine { to { --shine-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { .buy-option--featured::before { animation: none; } .product-slideshow__slide, .product-slideshow__slide.is-active { transition: none; } } .buy-option__upgrade-from { font-size: 0.85rem; color: var(--text-muted); margin: 0; } .buy-option__badge { color: var(--highlight); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; align-self: flex-start; } .buy-option__type { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .buy-option__name { font-size: 1.1rem; font-weight: 700; color: var(--text); line-height: 1.3; } .buy-option__includes { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; } .buy-option__includes li { font-size: 0.9rem; color: var(--text-2); padding-left: 1rem; position: relative; } .buy-option__includes li::before { content: '–'; position: absolute; left: 0; color: var(--text-muted); } .buy-option__includes li.is-this { color: var(--text); font-weight: 600; } .buy-option__includes li.is-this::before { content: '✓'; color: var(--accent); } .buy-option__this-tag { font-size: 0.75rem; color: var(--accent); font-weight: 400; margin-left: 0.35rem; } .buy-option__pricing { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; } .buy-option__price { font-size: 2rem; font-weight: 800; color: var(--text); letter-spacing: -0.03em; } .buy-option__price-alt { font-size: 0.9rem; color: var(--text-muted); } .buy-option__was { font-size: 0.875rem; color: var(--text-muted); text-decoration: line-through; } /* ============================================================ VERSION HISTORY PAGE ============================================================ */ /* Product carousel ============================================================ */ .product-carousel-section { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 3rem !important; position: relative; z-index: 1; } .has-product-carousel .site-footer { margin-top: var(--section-gap); } .has-newsletter .newsletter { margin-top: 3rem; padding-top: 3rem !important; position: relative; z-index: 1; } /* top hairline only as wide as the centered content (matches site-header) */ .has-newsletter .newsletter::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--max-w); border-top: 1px solid var(--line); } .has-newsletter .site-footer { margin-top: var(--section-gap); } .product-carousel { display: flex; align-items: center; gap: 0.75rem; } .product-carousel__track-wrap { overflow: hidden; flex: 1; } .product-carousel__track { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; margin: 0; padding: 0.25rem 0.1rem; } .product-carousel__track::-webkit-scrollbar { display: none; } .product-carousel__item { scroll-snap-align: start; flex: 0 0 calc(25% - 1rem); min-width: 160px; } @media (max-width: 900px) { .product-carousel__item { flex: 0 0 calc(33.33% - 1rem); } } @media (max-width: 600px) { .product-carousel__item { flex: 0 0 calc(50% - 0.75rem); } } .product-carousel__card { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1.25rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); text-align: center; text-decoration: none; color: inherit; transition: border-color var(--ease); height: 100%; box-sizing: border-box; } .product-carousel__card:hover { border-color: var(--highlight); } .product-carousel__img { width: auto; height: 64px; object-fit: contain; } .product-carousel__name { font-size: 0.9rem; font-weight: 700; color: var(--text); } .product-carousel__desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; } .product-carousel__btn { flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--ease), border-color var(--ease); } .product-carousel__btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--accent); } .product-carousel__btn:disabled { opacity: 0.3; cursor: default; } /* Checkout redirect ============================================================ */ .checkout-redirect { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-top: 5rem; padding-bottom: 5rem; text-align: center; } .checkout-redirect__spinner { width: 2.5rem; height: 2.5rem; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .checkout-redirect__msg { font-size: 1rem; color: var(--text-muted); margin: 0; } /* Version downloads ============================================================ */ .version-downloads { margin-bottom: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--border); } .version-downloads__title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.875rem; } /* Legacy downloads — folded away until the out-of-support notice is confirmed */ .legacy-downloads { margin-bottom: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--border); } /* As a subsection under the support page's download wizard: separated from it by a rule above instead of below, and no trailing gap. */ .legacy-downloads--sub { margin-top: 2.5rem; margin-bottom: 0; padding-top: 1.75rem; padding-bottom: 0; border-top: 1px solid var(--border-subtle); border-bottom: none; } .legacy-downloads__title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.875rem; } .legacy-downloads__note { font-size: 0.85rem; line-height: 1.5; color: var(--text-2); max-width: 60ch; margin-bottom: 0.875rem; } .legacy-downloads__toggle { accent-color: var(--accent); margin-right: 0.5rem; vertical-align: -0.1em; } .legacy-downloads__confirm { font-size: 0.85rem; color: var(--text-2); cursor: pointer; } .legacy-downloads__toggle:focus-visible + .legacy-downloads__confirm { outline: 2px solid var(--accent); outline-offset: 3px; } /* Unfold: the panel is a 0fr grid row until the checkbox is ticked. */ .legacy-downloads__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ease); } .legacy-downloads__toggle:checked ~ .legacy-downloads__panel { grid-template-rows: 1fr; } .legacy-downloads__list { overflow: hidden; min-height: 0; } .legacy-downloads__toggle:checked ~ .legacy-downloads__panel .legacy-downloads__list { padding-top: 0.875rem; } /* One retired product inside the folded legacy section (support page) */ .legacy-product + .legacy-product { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-subtle); } .legacy-product__name { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 0.6rem; } .version-history { display: flex; flex-direction: column; gap: 0; } .version-entry { padding: 1.5rem 0; border-bottom: 1px solid var(--border-subtle); display: grid; grid-template-columns: 160px 1fr; gap: 0 2rem; align-items: start; } .version-entry:last-child { border-bottom: none; } .version-entry__header { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.1rem; } .version-entry__number { font-size: 0.95rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .version-entry__date { font-size: 0.8rem; color: var(--text-muted); } .version-entry__changes { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; } .version-entry__changes li { font-size: 0.9rem; color: var(--text-2); padding-left: 1rem; position: relative; line-height: 1.5; } .version-entry__changes li::before { content: '–'; position: absolute; left: 0; color: var(--text-muted); } @media (max-width: 540px) { .version-entry { grid-template-columns: 1fr; gap: 0.75rem; } } /* ============================================================ PRODUCT SLIDESHOW ============================================================ */ .product-slideshow { margin-bottom: 2rem; } /* The image frame: the slides and the prev/next arrows sit inside it, the number buttons below it. */ .product-slideshow__frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-surface); aspect-ratio: 16 / 10; } /* Slides are stacked and cross-faded: the incoming one fades in over the outgoing one. visibility is delayed by the fade so a hidden slide is not reachable by pointer or keyboard while it is still visible. */ .product-slideshow__slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 700ms ease, visibility 0s linear 700ms; } .product-slideshow__slide.is-active { opacity: 1; visibility: visible; transition: opacity 700ms ease, visibility 0s; } .product-slideshow__slide img { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; } /* centred underneath the image frame, never on top of it */ .product-slideshow__pager { display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.75rem; } /* numbered round buttons, one per image */ .product-slideshow__page { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-2); font-family: var(--font); font-size: 0.9rem; font-weight: 600; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background var(--ease), color var(--ease), border-color var(--ease); } .product-slideshow__page:hover { color: var(--text); border-color: var(--accent); } .product-slideshow__page.is-active { background: var(--btn-fill); border-color: var(--btn-fill); color: var(--highlight); } @media (max-width: 768px) { .product-detail__inner { grid-template-columns: 1fr; } .product-detail__sidebar { position: static; } /* One-column mode: the image spans the full slide width, no gaps left or right. Drop the fixed 16/10 frame ratio and stack the slides in one grid cell so the frame height follows the image at full width (instead of letterboxing it inside a fixed-ratio box), and remove the inset padding. */ .product-slideshow__frame { aspect-ratio: auto; display: grid; border-radius: 0; } .product-slideshow__slide { position: static; grid-area: 1 / 1; } .product-slideshow__slide img { height: auto; padding: 0; } } /* one-column mode: the panel becomes a full-width sheet at the bottom */ @media (max-width: 768px) { .cookie-banner { align-items: flex-end; padding: 0; } .cookie-banner__inner { width: 100%; min-width: 0; padding: 2rem var(--gap); border-width: 1px 0 0; border-radius: 0; } .cookie-banner__text { font-size: 0.9rem; line-height: 1.6; } } /* ============================================================ NEWS ============================================================ */ .news-list { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; } .news-list__item { display: grid; grid-template-columns: 10rem 1fr; gap: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-subtle); align-items: baseline; } .news-list__item:last-child { border-bottom: none; padding-bottom: 0; } .news-list__date { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); padding-top: 0.1rem; } .news-list__text { font-size: 0.95rem; color: var(--text-2); line-height: 1.6; } /* ============================================================ NEWSLETTER ============================================================ */ .newsletter { text-align: center; } .newsletter .section__inner { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 3rem 2rem; } .newsletter .section__title { font-size: clamp(1.4rem, 3vw, 2rem); } .newsletter p { color: var(--text-2); margin-bottom: 1.75rem; } /* ============================================================ PURCHASE TABLE ============================================================ */ .purchase-table { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 2rem; } .purchase-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding: 1rem 1.25rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--ease), background var(--ease); flex-wrap: wrap; } .purchase-row:hover { border-color: var(--border); background: var(--bg-hover); } .purchase-row--bundle { border-color: var(--accent); border-style: solid; background: var(--bg-surface-2); align-items: flex-start; padding: 1.25rem; } .purchase-row__info { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0; } .purchase-row__img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: var(--bg-surface-2); flex-shrink: 0; } .purchase-row__name { font-weight: 600; font-size: 0.95rem; color: var(--text); } .purchase-row__items { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.35rem; } .purchase-row__items li { font-size: 0.78rem; color: var(--text-muted); } .purchase-row__items li::before { content: '+ '; color: var(--accent); font-weight: 700; } .purchase-row__action { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; } .purchase-row__price { font-size: 1.2rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; min-width: 3.5rem; text-align: right; } .purchase-row__bundle-products { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .bundle-product { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.6rem 0.75rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); min-width: 72px; } .bundle-product__img { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; } .bundle-product__name { font-size: 0.72rem; font-weight: 600; color: var(--text); text-align: center; white-space: nowrap; } .bundle-sep { font-size: 1rem; font-weight: 700; color: var(--accent); flex-shrink: 0; } /* ============================================================ FAQ ============================================================ */ .manual-select { width: 100%; padding: 0.85rem 1.25rem; background: var(--bg-surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font); font-size: 1rem; cursor: pointer; transition: border-color var(--ease); } .manual-select:focus { outline: none; border-color: var(--accent); } .manual-select option { padding-top: 0.5lh; padding-bottom: 0.5lh; } .faq-list { display: flex; flex-direction: column; gap: 0; margin-top: 2rem; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .faq-item { padding: 1.5rem; border-bottom: 1px solid var(--border-subtle); transition: background var(--ease); } .faq-item:last-child { border-bottom: none; } .faq-item:hover { background: var(--bg-hover); } .faq-item__question { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 0.75rem; } .faq-item__answer { font-size: 0.9rem; color: var(--text-2); line-height: 1.7; } .faq-item__answer a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .faq-item__answer p + p { margin-top: 0.75rem; } /* ============================================================ CONTACT ============================================================ */ .contact-block { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; font-size: 0.95rem; color: var(--text-2); line-height: 1.8; margin-top: 2rem; } .contact-block strong { color: var(--text); } .contact-block__note { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); font-size: 0.85rem; line-height: 1.6; color: var(--text-muted); max-width: 62ch; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { :root { --gap: 1rem; --section-gap: 3rem; } .site-nav__toggle { display: flex; } .site-nav__list { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--bg-surface); border-bottom: 1px solid var(--border); padding: 0.75rem; gap: 0.25rem; } .site-nav__list.is-open { display: flex; } .site-nav__list li a { padding: 0.75rem 1rem; } .news-list__item { grid-template-columns: 1fr; gap: 0.35rem; } .purchase-row { gap: 0.75rem; } .purchase-row__action { width: 100%; justify-content: space-between; } .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; } } @media (max-width: 480px) { .cookie-banner__actions { flex-direction: column; width: 100%; } .cookie-banner__actions .btn { width: 100%; } .hero__title { font-size: 2rem; } } /* ── Theme toggle ────────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 3px; gap: 2px; } .theme-toggle__btn { padding: 0.25rem 0.65rem; border: none; background: none; color: var(--text-2); font-size: 0.75rem; font-family: var(--font); cursor: pointer; border-radius: calc(var(--radius) - 3px); transition: background var(--ease), color var(--ease); line-height: 1.5; } .theme-toggle__btn:hover { color: var(--text); background: var(--bg-hover); } .theme-toggle__btn.is-active { background: var(--btn-fill); color: var(--highlight); } /* ── Currency toggle ─────────────────────────────────────── */ .currency-toggle { display: inline-flex; align-items: center; background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 3px; gap: 2px; flex-shrink: 0; } .currency-toggle__btn { padding: 0.25rem 0.75rem; border: none; background: none; color: var(--text-2); font-size: 0.8rem; font-weight: 600; font-family: var(--font); cursor: pointer; border-radius: calc(var(--radius) - 3px); transition: background var(--ease), color var(--ease); line-height: 1.5; } .currency-toggle__btn:hover { color: var(--text); background: var(--bg-hover); } .currency-toggle__btn.is-active { background: var(--btn-fill); color: var(--highlight); } .purchase-page__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .purchase-page__header .section__title { margin-bottom: 0.5rem; } /* ── Prose (legal pages) ─────────────────────────────────── */ .prose h2 { font-size: 1.1rem; font-weight: 600; color: var(--text-1); margin: 2rem 0 0.5rem; } .prose h2:first-child { margin-top: 0; } .prose p, .prose ul { font-size: 0.95rem; color: var(--text-2); line-height: 1.7; margin: 0 0 1rem; } .prose ul { padding-left: 1.25rem; } .prose li { margin-bottom: 0.35rem; } .prose a { color: var(--accent); text-decoration: underline; } /* ── Manual Table of Contents ────────────────────────────── */ .manual-content h5, .manual-content h6 { font-size: 1rem; } .manual-content h7, .manual-content h8, .manual-content h9, .manual-content h10 { display: block; font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); margin-top: 1rem; margin-bottom: 0.25rem; } .manual-content p { margin-top: 0.5lh; margin-bottom: 0.5lh; } .manual-content li { list-style: disc; margin-left: 1.5rem; } .manual-toc { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 2.5rem; } .manual-toc:empty { display: none; } .toc { list-style: none; margin: 0; padding: 0; } .toc__item { padding-top: 0.2rem; padding-bottom: 0.2rem; } .toc__item--lvl1 { padding-left: 0; } .toc__item--lvl2 { padding-left: 1rem; } .toc__item--lvl3 { padding-left: 2rem; } .toc__item--lvl4 { padding-left: 3rem; } .toc__item--lvl5 { padding-left: 4rem; } .toc__item--lvl6 { padding-left: 5rem; } .toc__item--lvl7 { padding-left: 6rem; } .toc__item--lvl8 { padding-left: 7rem; } .toc__item--lvl9 { padding-left: 8rem; } .toc__item--lvl10 { padding-left: 9rem; } .toc__link { color: var(--text-2); font-size: 0.875rem; text-decoration: none; transition: color var(--ease); } .toc__link:hover { color: var(--accent); } /* The section currently in view, tracked by the scrollspy in tableOfContent.php */ .toc__link--active { color: var(--accent); font-weight: 600; } /* Heading indentation — margin-left so the whole background block shifts */ #content .heading-indent--lvl1 { margin-left: 0; } #content .heading-indent--lvl2 { margin-left: 1.25rem; } #content .heading-indent--lvl3 { margin-left: 2.5rem; } #content .heading-indent--lvl4 { margin-left: 3.75rem; } #content .heading-indent--lvl5 { margin-left: 5rem; } #content .heading-indent--lvl6 { margin-left: 6.25rem; } #content .heading-indent--lvl7 { margin-left: 7.5rem; } #content .heading-indent--lvl8 { margin-left: 8.75rem; } #content .heading-indent--lvl9 { margin-left: 10rem; } #content .heading-indent--lvl10 { margin-left: 11.25rem; } .manual-content :is(h1,h2,h3,h4,h5,h6,h7,h8,h9,h10) { display: flex; align-items: center; background: var(--bg-surface); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 0.4rem 0.75rem; } .manual-toc-back { margin-left: auto; flex-shrink: 0; font-size: 0.7rem; color: var(--text-muted); background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.15rem 0.4rem; text-decoration: none; line-height: 1; } .manual-toc-back:hover { color: var(--text); border-color: var(--text-muted); } /* Content indentation by heading hierarchy */ #content .content-indent--lvl1 { padding-left: 0; } #content .content-indent--lvl2 { padding-left: 1.25rem; } #content .content-indent--lvl3 { padding-left: 2.5rem; } #content .content-indent--lvl4 { padding-left: 3.75rem; } #content .content-indent--lvl5 { padding-left: 5rem; } #content .content-indent--lvl6 { padding-left: 6.25rem; } #content .content-indent--lvl7 { padding-left: 7.5rem; } #content .content-indent--lvl8 { padding-left: 8.75rem; } #content .content-indent--lvl9 { padding-left: 10rem; } #content .content-indent--lvl10 { padding-left: 11.25rem; } /* Offset anchor targets so sticky header + subnav don't cover headings */ #content :is(h1, h2, h3, h4, h5, h6) { scroll-margin-top: calc(var(--header-h) + 4rem); margin-top: 1.75rem; margin-bottom: 0.5rem; } /* ── Manual two-column layout (wide screens) ─────────────── */ .manual-section-inner { max-width: var(--max-w-narrow); } @media (min-width: 1200px) { .manual-section-inner { max-width: calc(var(--max-w-narrow) + 18rem); } .manual-layout { display: flex; align-items: flex-start; gap: 2rem; } .manual-layout .manual-toc { flex: 0 0 15rem; width: 15rem; position: sticky; top: calc(var(--header-h) + 4rem); max-height: calc(100vh - var(--header-h) - 5rem); overflow-y: auto; margin-bottom: 0; } .manual-layout .manual-content { flex: 1; min-width: 0; } } /* ── Notice / info banner ────────────────────────────────── */ .notice { background: var(--bg-surface-2); border-left: 4px solid var(--accent); padding: 1rem 1.5rem; margin: 1.5rem 0; border-radius: 0 var(--radius) var(--radius) 0; color: var(--text-2); } .notice a { color: var(--accent); } /* ============================================================ DOWNLOAD WIZARD ============================================================ */ .download-wizard__intro { color: var(--text-2); margin-bottom: 1.5rem; } .download-wizard { display: flex; flex-direction: column; gap: 1.5rem; } .download-wizard__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 640px) { .download-wizard__steps { grid-template-columns: 1fr; } } .download-wizard__step { display: flex; flex-direction: column; gap: 0.5rem; } .download-wizard__label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); } .download-wizard__select { width: 100%; padding: 0.85rem 1.25rem; background: var(--bg-surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font); font-size: 1rem; cursor: pointer; transition: border-color var(--ease); appearance: auto; } .download-wizard__select:focus { outline: none; border-color: var(--accent); } .download-wizard__select:disabled { opacity: 0.35; cursor: not-allowed; } .download-wizard__btn--disabled { opacity: 0.4; pointer-events: none; } .license-recovery__desc { color: var(--text-2); margin-bottom: 1.25rem; } .license-recovery__form { display: flex; flex-direction: column; gap: 0.5rem; } .license-recovery__label { font-size: 0.875rem; font-weight: 600; color: var(--text-2); } .license-recovery__row { display: flex; gap: 0.75rem; flex-wrap: wrap; } .license-recovery__input { flex: 1; min-width: 220px; padding: 0.6rem 0.9rem; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font-family: var(--font); font-size: 0.95rem; transition: border-color var(--ease); } .license-recovery__input:focus { outline: none; border-color: var(--accent); } .license-recovery__result { margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--surface-2); border-radius: var(--radius); border-left: 3px solid var(--accent); } .license-recovery__privacy-note { margin-top: 1rem; font-size: 0.8rem; color: var(--text-2); line-height: 1.5; } /* Every reply the recovery form renders — the backend's wording, a validation complaint, or the fallback when the service is down. __error is kept for the fixed message the form's own script writes when the request never lands. */ .license-recovery__message, .license-recovery__error { color: var(--text-2); } .license-recovery__loading { display: flex; align-items: center; gap: 0.6rem; color: var(--text-2); font-size: 0.95rem; } .license-recovery__spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: lr-spin 0.7s linear infinite; flex-shrink: 0; } @keyframes lr-spin { to { transform: rotate(360deg); } } /* video wrapper */ .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 0px; height: 0; margin-top: 5px; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .yt-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--surface-2) center / cover no-repeat; display: flex; align-items: center; justify-content: center; } .yt-placeholder__inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem 2rem; background: rgba(0, 0, 0, 0.65); border-radius: var(--radius); text-align: center; } .yt-placeholder__link { color: #fff; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; } .yt-placeholder__link:hover { color: var(--accent); }