/* ═══════════════════════════════════════════════════════════════════ Nexov's Gateway, Storefront ═══════════════════════════════════════════════════════════════════ Monochrome by instruction: black, white and neutral greys, no hue anywhere. Deliberately self-contained rather than built on /css/tokens.css, those tokens carry the console's blue and a full dark theme, and inheriting them would drag colour back in through any component that referenced an accent. Light only. theme.js is not loaded on these pages, so nothing can put class="dark" on and no dark overrides are needed. Sizing is held down on purpose: 15px body, 13px small, and a 1.4 to 2.2rem heading range. Nothing here should read as a landing-page template with 4rem hero type and oversized cards. ═══════════════════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { color-scheme: light; --ink: #000000; /* headings, buttons, primary text */ --ink-2: #404040; /* body copy */ --ink-3: #737373; /* captions, meta, muted */ --rule: #e5e5e5; /* borders and separators */ --rule-2: #d4d4d4; /* stronger border, hover */ --wash: #fafafa; /* alternate rows, hover fills */ --paper: #ffffff; /* page ground */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* One accent only, and only on Telegram affordances, where the colour carries a platform meaning rather than decoration. Structure, type and every border stay monochrome. */ --tg: #2AABEE; --tg-dark: #1e93d0; --radius: 6px; --page: 1080px; /* content measure; wider reads as a marketing template */ } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--ink-2); background: var(--paper); -webkit-font-smoothing: antialiased; } .wrap { max-width: var(--page); margin: 0 auto; padding: 0 24px; } a { color: var(--ink); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* ── Header ──────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--rule); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 60px; } .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; font-size: 15px; color: var(--ink); letter-spacing: -0.01em; } .brand img { display: block; width: 24px; height: 24px; } /* The wordmark lockup replaces the square logo + text; size it to the header. */ .brand img.brand-wordmark { width: auto; height: 26px; } .site-nav { display: flex; align-items: center; gap: 22px; font-size: 14px; } /* `:not(.btn)` is load-bearing, not tidiness. `.site-nav a` (0,1,1) outranks * `.btn` (0,1,0), so without it the Contact button in the header kept its black * background and lost its white text, rendering grey on black. */ .site-nav a:not(.btn) { color: var(--ink-2); } .site-nav a:not(.btn):hover { color: var(--ink); } /* Current page: the active nav link reads as ink, weighted, with a short * underline so the section you are on is obvious. Monochrome, no colour. */ .site-nav a:not(.btn)[aria-current="page"] { color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } .site-nav a:not(.btn)[aria-current="page"]:hover { text-decoration: underline; } /* ── Buttons ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: var(--radius); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity 0.12s ease; } .btn:hover { opacity: 0.86; text-decoration: none; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); } .btn-ghost:hover { background: var(--wash); opacity: 1; } .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; } .btn-tg { background: var(--tg); border-color: var(--tg); color: #ffffff; } .btn-tg:hover { background: var(--tg-dark); border-color: var(--tg-dark); opacity: 1; } /* ── Hero ────────────────────────────────────────────────────── */ .hero { padding: 72px 0 52px; border-bottom: 1px solid var(--rule); } .hero h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); line-height: 1.2; letter-spacing: -0.025em; font-weight: 680; color: var(--ink); max-width: 26ch; } .hero p { margin-top: 12px; font-size: 16px; color: var(--ink-2); max-width: 58ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .eyebrow { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } /* Three short reassurances directly under the hero buttons, at the moment of * decision. A small ink check precedes each; the escrow item links out. */ .hero-proof { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; list-style: none; font-size: 13px; color: var(--ink-3); } .hero-proof li { display: inline-flex; align-items: center; gap: 7px; } .hero-proof li::before { content: ''; flex: none; width: 14px; height: 14px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E"); } .hero-proof a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; } .hero-proof a:hover { color: var(--ink); } /* ── Sections ────────────────────────────────────────────────── */ .section { padding: 48px 0; border-bottom: 1px solid var(--rule); } .section-head { margin-bottom: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); } .section-head h2 { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); } .section-head p { margin-top: 5px; font-size: 14px; color: var(--ink-3); max-width: 62ch; } /* ── Trust band ──────────────────────────────────────────────── */ /* * Sits between the hero and the services on a --wash ground, so the page reads * as white / wash / white bands. Four reassurance tiles; the first is a link to * the escrow page. No section-head: the tiles are the message. */ .trust { background: var(--wash); } .trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px 28px; } .trust-item { display: flex; align-items: flex-start; gap: 12px; color: inherit; } /* The escrow tile is a link; keep it feeling like a tile, not a text link. */ a.trust-item { text-decoration: none; } a.trust-item:hover { text-decoration: none; } a.trust-item:hover .trust-icon { border-color: var(--ink); color: var(--ink); } a.trust-item:hover .trust-body strong { text-decoration: underline; text-underline-offset: 3px; } .trust-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--paper); color: var(--ink-2); transition: border-color 0.14s ease, color 0.14s ease; } .trust-icon svg { width: 20px; height: 20px; display: block; } .trust-body { display: flex; flex-direction: column; gap: 3px; } .trust-body strong { font-size: 14px; font-weight: 650; color: var(--ink); letter-spacing: -0.005em; } .trust-body span { font-size: 13px; line-height: 1.55; color: var(--ink-3); } /* ── Services ────────────────────────────────────────────────── */ .services { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .service { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease; } .service:hover { border-color: var(--ink-3); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); transform: translateY(-1px); } /* The one product that is bought rather than quoted. A slightly heavier border is enough to separate it; a coloured card would fight the theme. */ .service.is-featured { border-color: var(--ink); } .service.is-featured:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .service-name { font-size: 15px; font-weight: 650; color: var(--ink); } .service-desc { margin-top: 6px; font-size: 14px; color: var(--ink-2); } /* `margin-top:auto` pins the footer to the card bottom while the content above * stays top-aligned. The description used to carry `flex:1`, which stretched it * and pushed the bullets and footer of a short card (Blog Removal) down into a * visible mid-card gap. Pinning the footer instead lines every row up cleanly. */ .service-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); } /* The quote cards' call to action. A light Telegram-blue text link rather than a * filled button, so the page is not five identical blue rectangles and the one * featured card's solid button stays the clear primary. Blue is kept because it * is the sanctioned Telegram cue; everything structural stays monochrome. */ .service-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--tg); white-space: nowrap; } .service-cta svg { width: 13px; height: 13px; display: block; } .service-cta:hover { color: var(--tg-dark); text-decoration: underline; } .service:hover .service-cta svg { transform: translateX(2px); transition: transform 0.12s ease; } .service-price { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink); } /* ── Steps ───────────────────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; counter-reset: step; } .step { padding: 18px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--wash); } .step::before { counter-increment: step; content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-bottom: 9px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12px; font-weight: 600; } .step h3 { font-size: 14px; font-weight: 650; color: var(--ink); } .step p { margin-top: 4px; font-size: 13.5px; color: var(--ink-2); } /* Illustration paired with the steps. The graphic sits left, the steps stack * beside it as a single column so the section reads as a picture plus a list * rather than a template banner. Monochrome PNG, no colour. */ .how-grid { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 40px; align-items: center; } .how-illustration { width: 100%; height: auto; display: block; } .how-grid .steps { grid-template-columns: 1fr; gap: 12px; } @media (max-width: 720px) { .how-grid { grid-template-columns: 1fr; gap: 22px; } .how-illustration { max-width: 300px; margin: 0 auto; } } /* Hero illustration (escrow): sits in the hero's second column, vertically * centred against the copy. Monochrome PNG. */ .hero-illustration { width: 100%; height: auto; display: block; align-self: center; } /* Small illustration at the top of the contact sidebar. */ .aside-illustration { width: 100%; max-width: 240px; height: auto; display: block; margin: 0 0 22px; } @media (max-width: 720px) { .hero-illustration { max-width: 340px; margin: 6px auto 0; } .aside-illustration { margin: 0 auto 18px; } } /* Thank-you confirmation illustration (replaces the old small tick). */ .thanks-illustration { width: 172px; height: auto; display: block; margin: 0 auto 22px; } /* Small mark at the top of a legal page's table-of-contents sidebar. */ .legal-illustration { width: 100%; max-width: 150px; height: auto; display: block; margin: 2px 0 22px; } /* On narrow screens the TOC collapses to a horizontal row; the mark would sit * oddly above it, so it is hidden there. */ @media (max-width: 760px) { .legal-illustration { display: none; } } /* ── Contact strip ───────────────────────────────────────────── */ .contact { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px; border-radius: var(--radius); background: var(--ink); color: #ffffff; } .contact h2 { font-size: 1.05rem; font-weight: 650; color: #ffffff; } .contact p { margin-top: 5px; font-size: 14px; color: #b3b3b3; } .contact p strong { color: #ffffff; font-weight: 600; } /* On the black strip the outline button needs a light border to exist. */ .contact .btn { background: #ffffff; border-color: #ffffff; color: var(--ink); } .contact .btn:hover { opacity: 0.9; } /* ── Legal / prose pages ─────────────────────────────────────── */ .prose { max-width: 68ch; padding: 44px 0 56px; } .prose h1 { font-size: 1.6rem; font-weight: 680; letter-spacing: -0.02em; color: var(--ink); } .prose .updated { margin-top: 6px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); } .prose h2 { margin-top: 32px; font-size: 1.02rem; font-weight: 650; color: var(--ink); } .prose h3 { margin-top: 20px; font-size: 14.5px; font-weight: 650; color: var(--ink); } .prose p, .prose li { font-size: 14.5px; color: var(--ink-2); } .prose p { margin-top: 10px; } .prose ul, .prose ol { margin-top: 10px; padding-left: 20px; } .prose li { margin-top: 5px; } .prose strong { color: var(--ink); font-weight: 650; } .prose .callout { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--rule-2); border-left: 3px solid var(--ink); border-radius: 0 var(--radius) var(--radius) 0; background: var(--wash); } .prose .callout p { margin-top: 0; font-size: 14px; } .prose table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 14px; } .prose th, .prose td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; } .prose th { color: var(--ink); font-weight: 650; background: var(--wash); } /* ── Footer ──────────────────────────────────────────────────── */ .site-footer { padding: 36px 0 30px; border-top: 1px solid var(--rule); background: var(--wash); } /* Explicit tracks. `1.6fr repeat(auto-fit, ...)` looks reasonable but auto-fit cannot resolve its repeat count when it follows a flexible track, so every column collapsed onto its own row at full width. */ .footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 28px; align-items: start; } .footer-about p { margin-top: 10px; font-size: 13.5px; color: var(--ink-3); max-width: 40ch; } .footer-col h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 6px; } .footer-col a { font-size: 13.5px; color: var(--ink-2); } .footer-col a:hover { color: var(--ink); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 720px) { .wrap { padding: 0 18px; } .site-header .wrap { height: 56px; } .site-nav { gap: 16px; font-size: 13.5px; } .hero { padding: 44px 0 34px; } .section { padding: 36px 0; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px; } .footer-about { grid-column: 1 / -1; } .contact { flex-direction: column; align-items: flex-start; } } @media (max-width: 460px) { .site-nav a[data-optional] { display: none; } .footer-grid { grid-template-columns: 1fr; } .hero-actions .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ── Service card internals ──────────────────────────────────── */ /* Icon and tag share a row, so the card gains an identifying mark without * gaining height. The icon inherits `currentColor`, which keeps one copy * working on both themes and matches the storefront's monochrome rule. */ .service-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .service-icon { display: inline-flex; flex: none; color: var(--ink-2); } .service-icon svg { display: block; width: 19px; height: 19px; } .service:hover .service-icon { color: var(--ink); } .service-tag { display: inline-block; align-self: flex-start; padding: 2px 7px; border: 1px solid var(--rule-2); border-radius: 3px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); } .service-list { margin-top: 11px; padding-left: 0; list-style: none; } .service-list li { position: relative; padding-left: 15px; margin-top: 5px; font-size: 13.5px; color: var(--ink-2); } .service-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); } .service-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 13px; font-size: 12.5px; color: var(--ink-3); } .service-meta strong { color: var(--ink-2); font-weight: 600; } /* Price is intentionally not shown, quoting happens in the chat. */ .service-ask { font-size: 13px; color: var(--ink-3); } /* ── Hero layout ─────────────────────────────────────────────── */ /* * Two columns rather than a single left-pinned block. The copy previously * sat in the left half of a 1080px container with the right half empty, * which reads as an unfinished page rather than a deliberate one. */ .hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: start; } .hero-panel { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--wash); overflow: hidden; } .hero-panel h2 { padding: 13px 18px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .hero-panel ul { list-style: none; } .hero-panel li + li { border-top: 1px solid var(--rule); } .hero-panel a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; font-size: 14px; color: var(--ink-2); transition: background-color 0.12s ease, color 0.12s ease; } .hero-panel a:hover { background: var(--paper); color: var(--ink); text-decoration: none; } .hero-panel a span:last-child { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } /* ── Legal page shell ────────────────────────────────────────── */ /* * A twelve-section policy needs navigation. Previously these pages were a * single 68ch column with no way to jump, and no indication of how long * the document was. */ .legal-shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 48px; align-items: start; padding: 40px 0 56px; } .legal-toc { position: sticky; top: 84px; } .legal-toc h2 { margin-bottom: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .legal-toc ol { list-style: none; padding: 0; border-left: 1px solid var(--rule); } .legal-toc li { margin: 0; } .legal-toc a { display: block; padding: 5px 0 5px 13px; margin-left: -1px; border-left: 1px solid transparent; font-size: 13px; line-height: 1.4; color: var(--ink-3); } .legal-toc a:hover { color: var(--ink); border-left-color: var(--ink); text-decoration: none; } /* The sticky header would otherwise cover the heading an anchor lands on. */ .prose h2 { scroll-margin-top: 78px; } .legal-shell .prose { max-width: 70ch; padding: 0; } @media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; } .legal-shell { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 30px; } .legal-toc { position: static; } .legal-toc ol { display: flex; flex-wrap: wrap; gap: 2px 14px; border-left: 0; padding-bottom: 14px; border-bottom: 1px solid var(--rule); } .legal-toc a { padding: 3px 0; border-left: 0; } } /* ── Contact form ─────────────────────────────────────────────── */ .contact-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 34px; align-items: start; } .form-row { margin-bottom: 15px; } .form-label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: var(--ink); } .form-input { width: 100%; padding: 9px 11px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-family: inherit; font-size: 14px; line-height: 1.5; } .form-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06); } textarea.form-input { resize: vertical; min-height: 118px; } .form-hint { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); } .form-foot { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); } .form-notice { margin-bottom: 16px; padding: 10px 12px; border: 1px solid var(--rule-2); border-left-width: 3px; border-radius: var(--radius); font-size: 13.5px; line-height: 1.5; } .form-notice.hidden { display: none; } /* The only two colours on an otherwise monochrome page, because a form that * reports failure in the same grey as its hint text is not reporting it. */ .form-notice.is-success { border-left-color: #1a7f37; background: #f2f9f4; color: #14682e; } .form-notice.is-error { border-left-color: #b42318; background: #fdf3f2; color: #91201a; } /* Honeypot. Off-screen rather than display:none, because some form-fillers * skip anything with display:none and this one is meant to be filled. */ .form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-aside { padding: 18px 20px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--wash); } .contact-aside-title { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin-bottom: 8px; } .contact-aside-title + .contact-aside-title { margin-top: 18px; } .contact-aside-list { margin: 0; padding-left: 17px; font-size: 13.5px; line-height: 1.6; } .contact-aside-list li { margin-bottom: 7px; } .contact-aside-text { font-size: 13.5px; } @media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; gap: 22px; } .contact-aside { order: -1; } } /* ── Thank you ────────────────────────────────────────────────── */ .thanks { max-width: 560px; margin: 0 auto; padding: 64px 0 72px; } .thanks-mark { width: 44px; height: 44px; margin-bottom: 20px; color: #1a7f37; } .thanks-mark svg { width: 100%; height: 100%; display: block; } .thanks-title { font-size: 1.5rem; font-weight: 680; letter-spacing: -0.025em; color: var(--ink); line-height: 1.2; } .thanks-lead { margin-top: 10px; font-size: 15px; color: var(--ink-2); } /* Numbered because the reassurance people want after sending a message is what happens next, in order, not another paragraph of copy. */ .thanks-steps { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: thanks; } .thanks-steps li { position: relative; counter-increment: thanks; padding: 12px 0 12px 34px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); } .thanks-steps li::before { content: counter(thanks); position: absolute; left: 0; top: 12px; width: 21px; height: 21px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 11.5px; font-weight: 650; display: flex; align-items: center; justify-content: center; } .thanks-steps strong { color: var(--ink); font-weight: 650; } .thanks-note { margin-top: 22px; padding: 11px 13px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--wash); font-size: 13.5px; color: var(--ink-2); } .thanks-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } @media (max-width: 520px) { .thanks { padding: 44px 0 56px; } .thanks-actions .btn { width: 100%; } } /* Deter casual saving/copying of image assets: no drag-to-save, no selection. * Reinforced by protect-assets.js (blocks right-click / dragstart on media). */ img, svg, picture, video { -webkit-user-drag: none; -khtml-user-drag: none; user-select: none; -webkit-user-select: none; }