/* * Styles for the 4 public channel pages: /start, /gram, /przeszedlem, * /platformy. * * Hand-authored (no Tailwind build) port of content-manager2's site-public * "Amiga Workbench" theme (design-system/src/tokens.css + src/styles.css + * SiteHeader.tsx/SiteFooter.tsx — site-public-spec.md §§1,3). Everything here * is scoped under `.rmp-channel` (the template's own class) so nothing * leaks onto — or is leaked onto by — the shop's `_rmd` theme: * - the token layer is a `.rmp-channel { --rmp-color-*: ...; }` block, NOT * the source's generic `--color-*` names (those WOULD collide with the * theme's own custom properties); * - the box-sizing reset is scoped to `.rmp-channel *`, never the bare `*` * the source's styles.css uses (a global reset from a plugin stylesheet * would silently change every shop page's box model); and * - `body` itself is never selected bare — only `body.rmp-channel`, which * only ever matches this plugin's own template (templates/channel.php * is a full, theme-free HTML document, so there is no theme `` to * collide with in the first place, but the selector stays scoped anyway * for the same reason as everything else in this file). * * Enqueued ONLY on a valid channel request (rmp_channel_enqueue_assets) — * never site-wide, and the theme's own stylesheet is never dequeued. * * There is no build step: every value below is a literal px/em/color/ * tracking value transcribed from the source TSX, including the `rmp-*` * hover states that site-public's styles.css does NOT define (those live in * the Tailwind utility classes on the JSX itself, which this hand port must * spell out explicitly instead). */ /* ============================================================= Token layer — namespaced --rmp-* custom properties (never --color-*, never the theme's own names). Values are the Amiga Workbench token set verbatim (design-system/src/tokens.css), with the source's `color-mix()` border tints pre-computed to literal rgba() — same visual result, no dependency on `color-mix()` baseline support. ============================================================= */ .rmp-channel { --rmp-font-vt323: 'VT323', ui-monospace, monospace; --rmp-font-jetbrains: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --rmp-font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif; --rmp-color-surface: #0a1020; --rmp-color-surface-2: #111a35; --rmp-color-surface-3: #1a2647; --rmp-color-border: rgba(255, 255, 255, 0.10); --rmp-color-border-subtle: rgba(255, 255, 255, 0.05); --rmp-color-border-blue: rgba(0, 119, 221, 0.40); --rmp-color-border-orange: rgba(232, 130, 30, 0.40); --rmp-color-foreground: #f0eaf8; --rmp-color-muted: #8a93b5; --rmp-color-faint: #5b6488; --rmp-color-primary: #0077dd; --rmp-color-primary-bright: #1e6fe0; --rmp-color-accent: #e8821e; --rmp-color-terminal: #39ff14; --rmp-color-ring: #0077dd; --rmp-color-info: #0077dd; --rmp-color-success: #39ff14; --rmp-color-warning: #e8821e; --rmp-color-danger: #ff2244; --rmp-color-neutral: #8a93b5; --rmp-radius-md: 0px; --rmp-radius-lg: 2px; --rmp-shadow-pixel: 4px 4px 0 var(--rmp-color-primary); --rmp-shadow-glow: 0 0 12px rgba(0, 119, 221, 0.35); font-family: var(--rmp-font-jetbrains); color: var(--rmp-color-foreground); background: var(--rmp-color-surface); } /* Scoped box-sizing reset — never a bare `*`. */ .rmp-channel, .rmp-channel *, .rmp-channel *::before, .rmp-channel *::after { box-sizing: border-box; } body.rmp-channel { margin: 0; min-height: 100%; } a.rmp-header__logo-link, a.rmp-header__cta-link, a.rmp-mobile-menu__cta-link, a.rmp-nav-link, a.rmp-mobile-nav-row, a.rmp-link, a.rmp-soc { text-decoration: none; } /* ============================================================= Shell — mirrors mount.tsx's ThemeProvider wrapper ("flex min-h-screen flex-col") +

container ("mx-auto w-full max-w-[1180px] flex-1 px-[22px] pt-[34px] pb-[56px]"). ============================================================= */ .rmp-channel__shell { display: flex; flex-direction: column; min-height: 100vh; position: relative; } .rmp-channel__main { flex: 1 1 auto; width: 100%; max-width: 1180px; margin: 0 auto; padding: 34px 22px 56px; } /* ============================================================= Scanline overlay (opt-in via ThemeProvider `scanline` prop upstream — here it is simply always-on on the shell) + blink/LED keyframes. ============================================================= */ .rmp-scanline { position: relative; } .rmp-scanline::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.1) 4px); pointer-events: none; z-index: 1; } @keyframes rmp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes rmp-led { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .rmp-channel .rmp-blink { animation: rmp-blink 1s step-end infinite; display: inline-block; } .rmp-channel .rmp-led { animation: rmp-led 1.4s step-end infinite; display: inline-block; } @media (prefers-reduced-motion: reduce) { .rmp-scanline::after { background: none; } .rmp-channel .rmp-blink, .rmp-channel .rmp-led { animation: none; } } /* ============================================================= Button — hand port of the DS