/* ST Brochure Library — protected magazine viewer. * * A dark reading room built on the site's own palette: the theme's near-black * (#0F0D1D) as the ground and its red (#DF0A0A) as the single accent, so the * viewer reads as part of Swedish Technology rather than as a browser plugin. * * The book is two leaves side by side with a centre gutter, sized in JS to fit * the stage. Everything is scoped under .stbl-pv; the one exception is the * scroll lock on , which has to sit outside the overlay to work. */ .stbl-pv-lock, .stbl-pv-lock body { overflow: hidden !important; } .stbl-pv { --pv-ink: #0f0d1d; --pv-ground: #14121f; --pv-panel: #1c1a2b; --pv-panel-2: #262338; --pv-line: rgba(255, 255, 255, 0.11); --pv-text: #f4f4f8; --pv-dim: #a5a3b8; --pv-accent: #df0a0a; --pv-radius: 8px; position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; background: var(--pv-ground); color: var(--pv-text); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; } .stbl-pv[hidden] { display: none !important; } .stbl-pv *, .stbl-pv *::before, .stbl-pv *::after { box-sizing: border-box; } /* ---------------------------------------------------------- top row */ .stbl-pv-top { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: var(--pv-ink); border-bottom: 1px solid var(--pv-line); flex: 0 0 auto; } .stbl-pv-id { min-width: 0; flex: 1 1 auto; } .stbl-pv-title { margin: 0; font-family: 'Urbanist', 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.25; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stbl-pv-title[lang='ar'] { font-family: 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif; } .stbl-pv-sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--pv-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stbl-pv-sub[hidden] { display: none; } /* ---------------------------------------------------------- language */ .stbl-pv-langs { display: flex; gap: 2px; padding: 3px; background: var(--pv-panel); border: 1px solid var(--pv-line); border-radius: 999px; flex: 0 0 auto; } .stbl-pv-langs[hidden] { display: none; } .stbl-pv-lang { appearance: none; border: 0; background: transparent; color: var(--pv-dim); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 160ms ease, color 160ms ease; } .stbl-pv-lang:hover { color: #fff; } .stbl-pv-lang.is-on { background: var(--pv-accent); color: #fff; } .stbl-pv-lang[lang='ar'] { font-family: 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif; font-size: 14px; } /* ---------------------------------------------------------- toolbar */ .stbl-pv-bar { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 9px 16px; background: var(--pv-panel); border-bottom: 1px solid var(--pv-line); flex: 0 0 auto; } .stbl-pv-group { display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--pv-ink); border: 1px solid var(--pv-line); border-radius: var(--pv-radius); } .stbl-pv-btn, .stbl-pv-txt, .stbl-pv-zval { appearance: none; border: 0; background: transparent; color: var(--pv-text); font: inherit; cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: background 140ms ease, color 140ms ease, opacity 140ms ease; } .stbl-pv-btn { width: 34px; height: 34px; flex: 0 0 auto; font-size: 15px; line-height: 1; } .stbl-pv-btn svg { width: 17px; height: 17px; } .stbl-pv-txt { height: 34px; padding: 0 13px; font-size: 13px; font-weight: 600; white-space: nowrap; } .stbl-pv-zval { height: 34px; min-width: 58px; padding: 0 6px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .stbl-pv-btn:hover:not(:disabled), .stbl-pv-txt:hover:not(:disabled), .stbl-pv-zval:hover:not(:disabled) { background: var(--pv-panel-2); } .stbl-pv-btn:disabled, .stbl-pv-txt:disabled, .stbl-pv-zval:disabled { opacity: 0.32; cursor: default; } .stbl-pv-txt.is-on, .stbl-pv-btn.is-on { background: var(--pv-accent); color: #fff; } .stbl-pv-btn:focus-visible, .stbl-pv-txt:focus-visible, .stbl-pv-zval:focus-visible, .stbl-pv-lang:focus-visible, .stbl-pv-pagein:focus-visible, .stbl-pv-thumb:focus-visible { outline: 2px solid var(--pv-accent); outline-offset: 1px; } .stbl-pv-close { flex: 0 0 auto; background: var(--pv-panel); border: 1px solid var(--pv-line); } .stbl-pv-close:hover { background: var(--pv-accent); border-color: var(--pv-accent); } .stbl-pv-pagein { width: 44px; height: 30px; margin: 0 2px; padding: 0 4px; text-align: center; font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pv-text); background: var(--pv-panel-2); border: 1px solid var(--pv-line); border-radius: 5px; } .stbl-pv-sep, .stbl-pv-total { font-size: 13px; color: var(--pv-dim); font-variant-numeric: tabular-nums; } .stbl-pv-sep { margin: 0 3px; } .stbl-pv-total { margin-inline-end: 6px; font-weight: 600; } .stbl-pv-more { display: none; } /* ---------------------------------------------------------- stage */ .stbl-pv-stage { position: relative; flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; } .stbl-pv-scroll { flex: 1 1 auto; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 20px; /* Our own pinch handling, not the browser's. */ touch-action: pan-x pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .stbl-pv-scroll:focus { outline: none; } /* The book: two leaves and a gutter. */ .stbl-pv-book { display: flex; align-items: flex-start; justify-content: center; margin: auto; flex: 0 0 auto; /* Perspective is what makes the flip read as paper rather than as a slide. */ perspective: 2400px; transform-origin: center center; filter: drop-shadow(0 14px 40px rgba(0, 0, 0, 0.55)); } /* Arabic falls open the other way: the earlier page sits on the right. The * leaves are reordered, never mirrored — each page's own artwork is untouched. */ .stbl-pv.is-rtl .stbl-pv-book { flex-direction: row-reverse; } .stbl-pv-leaf { position: relative; flex: 0 0 auto; background: #fff; overflow: hidden; transform-style: preserve-3d; backface-visibility: hidden; } /* A subtle gutter shadow so a spread reads as one sheet folded, not two * separate pages floating side by side. */ .stbl-pv-leaf.is-verso { border-radius: 3px 0 0 3px; box-shadow: inset -14px 0 22px -14px rgba(0, 0, 0, 0.45); } .stbl-pv-leaf.is-recto { border-radius: 0 3px 3px 0; box-shadow: inset 14px 0 22px -14px rgba(0, 0, 0, 0.45); } .stbl-pv-book.is-single .stbl-pv-leaf { border-radius: 3px; box-shadow: none; } .stbl-pv-plabel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; color: #d6d5e0; background: #f2f1f6; pointer-events: none; transition: opacity 200ms ease; } .stbl-pv-leaf.is-ready .stbl-pv-plabel { opacity: 0; } .stbl-pv-canvas { position: relative; display: block; /* The page is not a saveable image and its text is not selectable. */ user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; pointer-events: none; } /* ---------------------------------------------------------- page turn * * The outgoing recto rotates about the gutter and the incoming page is revealed * underneath. Half the duration runs before the swap and half after, which is * why the JS waits FLIP_MS/2 — the eye reads it as one continuous motion. */ @keyframes stbl-flip-fwd { from { transform: rotateY(0deg); } to { transform: rotateY(-96deg); } } @keyframes stbl-flip-back { from { transform: rotateY(0deg); } to { transform: rotateY(96deg); } } .stbl-pv-book.is-flip-fwd .stbl-pv-leaf.is-recto, .stbl-pv-book.is-flip-fwd.is-single .stbl-pv-leaf { transform-origin: left center; animation: stbl-flip-fwd 240ms cubic-bezier(0.4, 0, 0.7, 0.35) forwards; z-index: 2; box-shadow: 0 0 34px rgba(0, 0, 0, 0.5); } .stbl-pv-book.is-flip-back .stbl-pv-leaf.is-verso, .stbl-pv-book.is-flip-back.is-single .stbl-pv-leaf { transform-origin: right center; animation: stbl-flip-back 240ms cubic-bezier(0.4, 0, 0.7, 0.35) forwards; z-index: 2; box-shadow: 0 0 34px rgba(0, 0, 0, 0.5); } /* In Arabic the gutter is on the other side of each leaf. */ .stbl-pv.is-rtl .stbl-pv-book.is-flip-fwd .stbl-pv-leaf.is-recto { transform-origin: right center; animation-name: stbl-flip-back; } .stbl-pv.is-rtl .stbl-pv-book.is-flip-back .stbl-pv-leaf.is-verso { transform-origin: left center; animation-name: stbl-flip-fwd; } @media (prefers-reduced-motion: reduce) { .stbl-pv-book .stbl-pv-leaf { animation: none !important; } } /* ---------------------------------------------------------- edge buttons */ .stbl-pv-edge { appearance: none; flex: 0 0 auto; width: 54px; border: 0; background: transparent; color: var(--pv-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 150ms ease, background 150ms ease, opacity 150ms ease; } .stbl-pv-edge svg { width: 30px; height: 30px; } .stbl-pv-edge:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.05); } .stbl-pv-edge:disabled { opacity: 0.18; cursor: default; } /* ---------------------------------------------------------- thumbnails */ .stbl-pv-foot { flex: 0 0 auto; background: var(--pv-ink); border-top: 1px solid var(--pv-line); padding: 8px 14px; } .stbl-pv-thumbs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; } .stbl-pv-thumb { appearance: none; flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--pv-line); border-radius: 5px; background: var(--pv-panel); color: var(--pv-dim); font: inherit; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; } .stbl-pv-thumb:hover { color: #fff; background: var(--pv-panel-2); } .stbl-pv-thumb.is-on { background: var(--pv-accent); border-color: var(--pv-accent); color: #fff; } /* ---------------------------------------------------------- loading */ .stbl-pv-spinner { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(20, 18, 31, 0.94); z-index: 5; } .stbl-pv-spinner.is-on { display: flex; } .stbl-pv-spin { width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, 0.16); border-top-color: var(--pv-accent); border-radius: 50%; animation: stbl-pv-turn 800ms linear infinite; } .stbl-pv-spinner.is-error .stbl-pv-spin { display: none; } .stbl-pv-note { margin: 0; max-width: 34ch; text-align: center; font-size: 14px; line-height: 1.5; color: var(--pv-dim); } .stbl-pv-spinner.is-error .stbl-pv-note { color: #ffb4b4; } @keyframes stbl-pv-turn { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .stbl-pv-spin { animation-duration: 2.4s; } } /* ---------------------------------------------------------- RTL chrome */ .stbl-pv.is-rtl .stbl-pv-txt { font-family: 'Noto Naskh Arabic', 'Plus Jakarta Sans', 'Segoe UI', Tahoma, sans-serif; } /* ---------------------------------------------------------- fullscreen */ .stbl-pv:fullscreen { background: var(--pv-ground); } .stbl-pv.is-full .stbl-pv-sub { display: none; } /* ---------------------------------------------------------- tablet */ @media (max-width: 1024px) { .stbl-pv-title { font-size: 15px; } .stbl-pv-bar { gap: 8px; padding: 8px 12px; } .stbl-pv-txt { padding: 0 10px; } .stbl-pv-edge { width: 40px; } .stbl-pv-edge svg { width: 24px; height: 24px; } } /* ---------------------------------------------------------- phone */ @media (max-width: 700px) { .stbl-pv-top { padding: 10px 12px; gap: 10px; } .stbl-pv-sub { display: none; } .stbl-pv-title { font-size: 14px; } .stbl-pv-lang { padding: 5px 11px; font-size: 12px; } .stbl-pv-bar { justify-content: space-between; flex-wrap: nowrap; padding: 8px 10px; gap: 6px; } /* Compact bar: page navigation, zoom, overflow. Fit, spread, sound and * fullscreen move into the drawer. */ .stbl-pv-more { display: inline-flex; background: var(--pv-ink); border: 1px solid var(--pv-line); } .stbl-pv-adv { display: none; } .stbl-pv.is-more .stbl-pv-adv { display: flex; position: absolute; top: calc(100% + 6px); inset-inline-end: 10px; z-index: 6; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px; background: var(--pv-panel); border: 1px solid var(--pv-line); border-radius: var(--pv-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .stbl-pv.is-more .stbl-pv-adv .stbl-pv-txt, .stbl-pv.is-more .stbl-pv-adv .stbl-pv-btn { width: 100%; justify-content: flex-start; padding: 0 14px; height: 38px; } /* The edges take too much width from the page on a phone; swipe replaces * them, and the toolbar arrows remain. */ .stbl-pv-edge { display: none; } .stbl-pv-scroll { padding: 10px; } .stbl-pv-btn { width: 36px; height: 36px; } .stbl-pv-pagein { width: 40px; height: 30px; } .stbl-pv-foot { padding: 6px 10px; } .stbl-pv-thumb { min-width: 28px; height: 28px; font-size: 12px; } } @media (max-width: 400px) { .stbl-pv-langs { padding: 2px; } .stbl-pv-lang { padding: 5px 8px; font-size: 11.5px; } .stbl-pv-zval { min-width: 48px; font-size: 12px; } } /* ---------------------------------------------------------- share sheet * * A centred panel over the reader, not a popover anchored to the button: the * button moves into the overflow drawer on a phone and swaps sides in Arabic, * and a centred panel behaves identically in both, and in fullscreen. */ .stbl-pv-sheet { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 9, 16, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .stbl-pv-sheet[hidden] { display: none !important; } .stbl-pv-sheet-box { position: relative; width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto; background: var(--pv-panel); border: 1px solid var(--pv-line); border-radius: 14px; padding: 26px 24px 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); } .stbl-pv-sheet-close { position: absolute; top: 12px; inset-inline-end: 12px; width: 32px; height: 32px; appearance: none; border: 0; border-radius: 8px; background: transparent; color: var(--pv-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .stbl-pv-sheet-close svg { width: 16px; height: 16px; } .stbl-pv-sheet-close:hover { background: var(--pv-panel-2); color: #fff; } .stbl-pv-sheet-title { margin: 0 34px 6px 0; font-family: 'Urbanist', 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 18px; font-weight: 700; color: #fff; } .stbl-pv.is-rtl .stbl-pv-sheet-title { margin: 0 0 6px 34px; font-family: 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif; } .stbl-pv-sheet-note { margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--pv-dim); } .stbl-pv.is-rtl .stbl-pv-sheet-note, .stbl-pv.is-rtl .stbl-pv-chan-label { font-family: 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif; } /* Channels. Four across normally, three on a narrow phone. */ .stbl-pv-sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 20px; } .stbl-pv-chan { appearance: none; border: 1px solid transparent; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 4px; border-radius: 10px; text-decoration: none; color: var(--pv-text); font: inherit; cursor: pointer; transition: background 140ms ease; } .stbl-pv-chan:hover { background: var(--pv-panel-2); } .stbl-pv-chan:focus-visible { outline: 2px solid var(--pv-accent); outline-offset: 1px; } .stbl-pv-chan-icon { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; } .stbl-pv-chan-icon svg { width: 21px; height: 21px; } .stbl-pv-chan-label { font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--pv-dim); } .stbl-pv-chan:hover .stbl-pv-chan-label { color: #fff; } /* The link itself, readable and selectable, so it can still be copied by hand * where the clipboard API is unavailable. */ .stbl-pv-sheet-url { display: flex; gap: 8px; align-items: stretch; } .stbl-pv-sheet-input { flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 12px; font: inherit; font-size: 12.5px; color: var(--pv-text); background: var(--pv-ink); border: 1px solid var(--pv-line); border-radius: 8px; /* A URL reads left-to-right even inside the Arabic interface. */ direction: ltr; text-align: left; } .stbl-pv-sheet-copy { flex: 0 0 auto; appearance: none; height: 38px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--pv-accent); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background 140ms ease; } .stbl-pv-sheet-copy:hover { background: #b30808; } .stbl-pv-sheet-copy.is-copied { background: #00a32a; } @media (max-width: 480px) { .stbl-pv-sheet { padding: 12px; align-items: flex-end; } .stbl-pv-sheet-box { padding: 22px 18px 18px; border-radius: 14px 14px 0 0; } .stbl-pv-sheet-grid { grid-template-columns: repeat(3, 1fr); } }