/* Korra storefront. * * Three theme states, not two. An explicit choice stamps data-theme="light" or * "dark" on ; with no choice stored, nothing is stamped and * prefers-color-scheme decides. That third state is the default, and it is the * one most implementations get wrong by forcing everyone into light until they * click something. * * Every colour is defined once here on bare :root. The dark blocks redefine * only the tokens, never add new ones -- a colour whose only definition lives * inside a media query is invisible in the other scheme. */ :root { --violet: #6c3bff; --pink: #ff4fa3; --cyan: #22c7e8; /* Links and prices, kept separate from --violet so the brand gradient is never altered to satisfy contrast. The brand violet reaches 5.3:1 on the light page but only 3.1:1 on a dark card, which is below WCAG 2.2 AA -- hence a lighter tint in the dark palette rather than one colour for both. */ --link: #6c3bff; --paper: #f7f6ff; /* page background */ --surface: #ffffff; /* cards, panels, footer */ --surface-2: #ffffff; /* inputs and inner wells */ --ink: #17152b; /* body text */ --muted: #625f70; /* secondary text */ --border: #d9d5e8; --badge-bg: #eceaf6; --shadow: rgba(40, 25, 90, .09); --shadow-strong: rgba(40, 25, 90, .15); --image-well: linear-gradient(135deg, #eeeaff, #ffeaf5); /* The bar, the navigation and the hero are the largest areas on the page. They used to be a fixed dark navbar over a saturated gradient in both schemes, which meant neither theme was really one: the light theme wore a dark bar, and the dark theme opened with a blaze of violet and pink. They follow the theme now, and the brand colours stay where they read as deliberate -- buttons, badges and small accents. */ --nav-bg: rgba(255, 255, 255, .93); --nav-ink: #17152b; --nav-ink-quiet: #55516b; --nav-border: #e6e2f2; --nav-hover: rgba(23, 21, 43, .06); --announce-bg: #efebff; --announce-ink: #3b3163; /* Status colours, kept apart from the brand palette: "this worked" and "this failed" must not change meaning when somebody picks a new accent. */ --ok-bg: #e4f6ea; --ok-ink: #14663d; --info-bg: #e7f0ff; --info-ink: #1b3f7c; --warn-bg: #fff3e2; --warn-ink: #7a4906; --bad-bg: #fdeaea; --bad-ink: #8b1f1f; --hero-bg: linear-gradient(135deg, #f4f0ff 0%, #fdeef7 55%, #e9f7fd 100%); --hero-ink: #17152b; --hero-muted: #4a4663; --hero-card-bg: rgba(255, 255, 255, .72); --hero-card-border: rgba(23, 21, 43, .10); --hero-card-shadow: rgba(40, 25, 90, .12); color-scheme: light; } /* System preference, unless an explicit light choice overrides it. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --link: #a99bff; --paper: #09090b; --surface: #141419; --surface-2: #1c1c24; --ink: #f2f2f5; --muted: #a1a1ac; --border: #26262f; --badge-bg: #22222b; --shadow: rgba(0, 0, 0, .55); --shadow-strong: rgba(0, 0, 0, .7); --image-well: linear-gradient(135deg, #171720, #1f1a2b); --nav-bg: rgba(9, 9, 11, .82); --nav-ink: #f2f2f5; --nav-ink-quiet: #a1a1ac; --nav-border: #1e1e26; --nav-hover: rgba(255, 255, 255, .06); --announce-bg: #0e0e12; --announce-ink: #c4c4cf; --ok-bg: #10241a; --ok-ink: #86e2ac; --info-bg: #141d2e; --info-ink: #a2c8ff; --warn-bg: #271e10; --warn-ink: #f2c67f; --bad-bg: #2a1517; --bad-ink: #ffa3a3; --hero-bg: linear-gradient(135deg, #16122b 0%, #1d1436 55%, #101a2b 100%); --hero-ink: #fafafc; --hero-muted: #b4b4c0; --hero-card-bg: rgba(255, 255, 255, .035); --hero-card-border: rgba(255, 255, 255, .09); --hero-card-shadow: rgba(0, 0, 0, .6); color-scheme: dark; } } /* An explicit dark choice wins in both directions. */ :root[data-theme="dark"] { --link: #a99bff; --paper: #09090b; --surface: #141419; --surface-2: #1c1c24; --ink: #f2f2f5; --muted: #a1a1ac; --border: #26262f; --badge-bg: #22222b; --shadow: rgba(0, 0, 0, .55); --shadow-strong: rgba(0, 0, 0, .7); --image-well: linear-gradient(135deg, #171720, #1f1a2b); --nav-bg: rgba(9, 9, 11, .82); --nav-ink: #f2f2f5; --nav-ink-quiet: #a1a1ac; --nav-border: #1e1e26; --nav-hover: rgba(255, 255, 255, .06); --announce-bg: #0e0e12; --announce-ink: #c4c4cf; --ok-bg: #10241a; --ok-ink: #86e2ac; --info-bg: #141d2e; --info-ink: #a2c8ff; --warn-bg: #271e10; --warn-ink: #f2c67f; --bad-bg: #2a1517; --bad-ink: #ffa3a3; --hero-bg: linear-gradient(135deg, #16122b 0%, #1d1436 55%, #101a2b 100%); --hero-ink: #fafafc; --hero-muted: #b4b4c0; --hero-card-bg: rgba(255, 255, 255, .035); --hero-card-border: rgba(255, 255, 255, .09); --hero-card-shadow: rgba(0, 0, 0, .6); color-scheme: dark; } /* Bootstrap reads its own custom properties, and its components fall back to them rather than to anything of ours. Left alone, a dropdown keeps Bootstrap's near-black link colour on a panel we had already darkened -- black text on a black menu. Aliasing the handful of variables its components are built from fixes all of them together, and because the aliases point at tokens that change per theme, one block covers all three states. */ :root { --bs-body-bg: var(--paper); --bs-body-color: var(--ink); --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--muted); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--badge-bg); --bs-border-color: var(--border); --bs-heading-color: var(--ink); --bs-link-color: var(--link); --bs-link-hover-color: var(--link); /* Panels sit above the page rather than on it. */ --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--ink); --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-color: var(--ink); --bs-dropdown-link-hover-bg: var(--nav-hover); --bs-dropdown-link-active-bg: var(--nav-hover); --bs-dropdown-link-active-color: var(--ink); --bs-dropdown-border-color: var(--border); --bs-dropdown-divider-bg: var(--border); --bs-modal-bg: var(--surface); --bs-modal-color: var(--ink); --bs-card-bg: var(--surface); --bs-list-group-bg: var(--surface); --bs-list-group-color: var(--ink); --bs-table-bg: var(--surface); --bs-table-color: var(--ink); --bs-pagination-bg: var(--surface); --bs-pagination-color: var(--link); --bs-pagination-border-color: var(--border); } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } a { color: var(--link); } /* The navigation takes its colours from tokens rather than Bootstrap's navbar-dark, which hardcodes light-on-dark and cannot follow a theme. */ .glass-nav { background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); /* Prefixed first: Safari only accepted the unprefixed property from version 18, and the iPhones and iPads still in daily use are older than that. Without it there is no blur, and --nav-bg is deliberately semi-transparent, so the page scrolls visibly through the bar. */ -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .glass-nav .navbar-brand, .glass-nav .nav-link { color: var(--nav-ink); } .glass-nav .nav-link { color: var(--nav-ink-quiet); } .glass-nav .nav-link:focus, .glass-nav .nav-link.show { color: var(--nav-ink); background: var(--nav-hover); border-radius: .5rem; } @media (hover: hover) { .glass-nav .nav-link:hover { color: var(--nav-ink); background: var(--nav-hover); border-radius: .5rem; } } .glass-nav .dropdown-menu { border-color: var(--border); } .glass-nav .navbar-toggler { border-color: var(--nav-border); color: var(--nav-ink); } .glass-nav .navbar-toggler-icon { /* Bootstrap paints this as a background image with a baked-in colour, so it is redrawn here from currentColor and follows the theme. */ background-image: none; position: relative; } .glass-nav .navbar-toggler-icon::before { content: ""; position: absolute; inset: 25% 10%; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; } .glass-nav .navbar-toggler-icon::after { content: ""; position: absolute; left: 10%; right: 10%; top: calc(50% - 1px); border-top: 2px solid currentColor; } /* The search field, as a single pill with its own control rather than a bare input. It is the widest thing in the bar, so it sets the bar's character. */ .search-box { width: min(460px, 100%); position: relative; display: flex; align-items: center; } .search-box .form-control { border-radius: 999px; padding: .55rem 3rem .55rem 1.1rem; background: var(--surface-2); border-color: var(--border); } .search-box .form-control:focus { border-color: var(--link); box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--link) 22%, transparent); } .search-go { position: absolute; right: .3rem; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; } .search-go:hover { color: var(--link); } .search-go:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } /* Wishlist and cart carry a glyph and a count. The word stays for anyone reading with a screen reader, and on a narrow screen where the menu is a list rather than a row it is shown, because a bare icon in a stacked list has nothing to sit beside. */ .nav-icon { display: inline-flex; align-items: center; gap: .4rem; position: relative; } .nav-icon-label { font-size: .95rem; } .nav-count { min-width: 1.25rem; padding: 0 .35rem; border-radius: 999px; background: var(--badge-bg); color: var(--ink); font-size: .72rem; font-weight: 800; line-height: 1.25rem; text-align: center; font-variant-numeric: tabular-nums; } .nav-count-cart { background: var(--link); color: #fff; } @media (min-width: 992px) { /* In the bar the glyph carries it; the label is announced, not drawn. */ .nav-icon-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .nav-icon { padding-left: .6rem; padding-right: .6rem; } } .hero { color: var(--hero-ink); background: var(--hero-bg); } .hero .lead, .hero p { color: var(--hero-muted); } .min-vh-50 { min-height: 58vh; min-height: 58dvh; } .eyebrow { font-size: .75rem; letter-spacing: .18em; font-weight: 800; } .hero .eyebrow { color: var(--link); } .hero-card { padding: 3rem; border: 1px solid var(--hero-card-border); border-radius: 2rem; background: var(--hero-card-bg); color: var(--hero-ink); box-shadow: 0 25px 70px var(--hero-card-shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .hero-card p { color: var(--hero-muted); } /* The hero's own buttons, which used to rely on sitting on a dark gradient. */ .hero .btn-light { background: var(--surface); color: var(--ink); border: 1px solid var(--border); } .hero .btn-outline-light { color: var(--hero-ink); border-color: var(--hero-card-border); } .hero .btn-outline-light:hover { background: var(--nav-hover); color: var(--hero-ink); } .product-card { background: var(--surface); border-radius: 1.4rem; overflow: hidden; box-shadow: 0 12px 35px var(--shadow); transition: .25s transform, .25s box-shadow; } @media (hover: hover) { .product-card:hover { transform: translateY(-7px); box-shadow: 0 22px 50px var(--shadow-strong); } } .product-image { height: 250px; position: relative; background: var(--image-well); } .product-image img { width: 100%; height: 100%; object-fit: cover; } .product-badge { position: absolute; top: 1rem; left: 1rem; background: var(--surface); color: var(--ink); padding: .35rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 800; } .placeholder-art { height: 100%; display: grid; place-items: center; font-size: 5rem; color: #8f74ff; } .placeholder-art.large { min-height: 540px; } .price { color: var(--link); } .product-gallery { background: var(--surface); border-radius: 1.5rem; overflow: hidden; box-shadow: 0 15px 45px var(--shadow); } .product-gallery img { height: 620px; object-fit: cover; } .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; font-size: .85rem; } .trust-grid div { background: var(--surface); padding: 1rem; border-radius: 1rem; text-align: center; } .filter-panel, .summary-card, .auth-card, .cart-row, .empty-state, .success-card { background: var(--surface); border-radius: 1.3rem; box-shadow: 0 12px 35px var(--shadow); } .filter-panel { padding: 1rem; } .cart-row { padding: 1.3rem; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; } .summary-card { padding: 1.5rem; position: sticky; top: 100px; } .empty-state, .success-card { padding: 4rem; text-align: center; } .auth-shell { min-height: 72vh; min-height: 72dvh; display: grid; place-items: center; padding: 2rem; } .auth-card { width: min(560px, 100%); padding: 2.2rem; } .auth-card input { display: block; width: 100%; padding: .75rem; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: .7rem; } .auth-card label { font-weight: 700; margin-bottom: .3rem; } .auth-card .helptext, .auth-card ul { font-size: .8rem; color: var(--muted); } .btn-primary { background: linear-gradient(135deg, var(--violet), var(--pink)); border: 0; } .footer { background: var(--surface); } .footer a { text-decoration: none; color: var(--ink); } /* The theme control. A button, not a link: it changes state rather than navigating, and it must be reachable and announced like any other control. */ .theme-toggle { background: transparent; border: 1px solid var(--nav-border); color: var(--nav-ink); border-radius: 999px; /* 44px keeps it at the accessible touch-target floor on both platforms. */ min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: 0 .8rem; font-size: .95rem; line-height: 1; cursor: pointer; } @media (hover: hover) { .theme-toggle:hover { background: var(--nav-hover); } } .theme-toggle:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } /* Only the glyph for the active scheme is shown; the other is hidden from assistive technology too, so the button announces one label, not two. */ .theme-toggle .theme-dark-glyph { display: none; } :root[data-theme="dark"] .theme-toggle .theme-dark-glyph { display: inline; } :root[data-theme="dark"] .theme-toggle .theme-light-glyph { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .theme-dark-glyph { display: inline; } :root:not([data-theme="light"]) .theme-toggle .theme-light-glyph { display: none; } } @media (max-width: 768px) { .hero h1 { font-size: 3rem; } .product-gallery img { height: 420px; } .placeholder-art.large { min-height: 380px; } .trust-grid { grid-template-columns: 1fr; } } .ad-section { min-height: 100px; } .ad-label { text-align: center; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; } .direct-ad { display: grid; grid-template-columns: minmax(160px, 280px) 1fr auto; align-items: center; gap: 1.5rem; padding: 1.25rem; border-radius: 1.5rem; background: var(--surface); text-decoration: none; color: var(--ink); box-shadow: 0 12px 35px var(--shadow); } .direct-ad img { width: 100%; height: 150px; object-fit: cover; border-radius: 1rem; } .direct-ad h2 { margin: .2rem 0; } .direct-ad p { margin: 0; color: var(--muted); } .ad-consent-placeholder { padding: 1.5rem; border: 1px dashed var(--border); border-radius: 1rem; text-align: center; color: var(--muted); background: var(--surface); } .consent-banner { position: fixed; z-index: 1080; left: calc(1rem + env(safe-area-inset-left)); right: calc(1rem + env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.2rem 1.4rem; border-radius: 1.2rem; background: var(--surface); color: var(--ink); box-shadow: 0 18px 60px var(--shadow-strong); } .consent-banner p { margin: .25rem 0 0; color: var(--muted); } .checkout-divider { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--muted); } .checkout-divider:before, .checkout-divider:after { content: ""; height: 1px; background: var(--border); flex: 1; } /* Bootstrap's own surfaces, which are otherwise white in both schemes. */ .card, .list-group-item, .table, .modal-content, .dropdown-menu { background-color: var(--surface); color: var(--ink); } .form-control, .form-select { background-color: var(--surface-2); color: var(--ink); border-color: var(--border); } .form-control:focus, .form-select:focus { background-color: var(--surface-2); color: var(--ink); } .form-control::placeholder { color: var(--muted); } .text-secondary { color: var(--muted) !important; } /* Bootstrap's utilities name a literal colour, so they invert wrongly: a product title marked text-dark is near-black on a near-black card, and a text-bg-light badge is a white block. Both are re-pointed at tokens. */ .text-dark { color: var(--ink) !important; } .text-bg-light { background-color: var(--badge-bg) !important; color: var(--ink) !important; } .border, .border-top, .border-bottom { border-color: var(--border) !important; } .table > :not(caption) > * > * { background-color: var(--surface); color: var(--ink); } @media (max-width: 768px) { .direct-ad { grid-template-columns: 1fr; } .consent-banner { align-items: stretch; flex-direction: column; } .consent-banner form { flex-direction: column; } .direct-ad .btn { width: 100%; } } /* --- storefront furniture --------------------------------------------------- Announcement bar, category row, trust row, footer and product-card badges. Every colour here is a token, so all of it themes with the rest. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: .7rem 1rem; background: var(--surface); color: var(--ink); border-radius: 0 0 .6rem 0; } /* Visible only once focused, which is the whole point of it. */ .skip-link:focus { left: 0; } .announcement-bar { background: var(--announce-bg); color: var(--announce-ink); border-bottom: 1px solid var(--nav-border); font-size: .82rem; padding: .5rem 0; text-align: center; } .announcement-bar a { color: var(--announce-ink); text-decoration: underline; } /* On a phone the bar wraps, and a separator that lands at the end of a line reads as a missing word. Below this width the gap does the separating. */ @media (max-width: 576px) { .announcement-bar [aria-hidden="true"] { display: none; } .announcement-bar .container { gap: .15rem 1rem !important; } } /* Flex-wrap rather than an auto-fit grid: a shop with three departments should show three tiles of a normal size, centred, not three tiles stretched across the full width because the grid had columns to fill. */ .category-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 2rem; padding: 1.5rem; margin-top: -2.5rem; position: relative; z-index: 2; background: var(--surface); border-radius: 1.4rem; box-shadow: 0 12px 35px var(--shadow); } .category-row a { width: 96px; } .category-row a { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); font-size: .82rem; text-align: center; } .category-tile { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; background: var(--image-well); } @media (hover: hover) { .category-row a:hover .category-tile { transform: translateY(-3px); } } .category-tile { transition: .2s transform; } .trust-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; list-style: none; padding: 1.4rem; margin: 3rem 0 0; background: var(--surface); border-radius: 1.4rem; box-shadow: 0 12px 35px var(--shadow); } .trust-row li { display: flex; align-items: center; gap: .7rem; font-size: .87rem; } .trust-text { display: flex; flex-direction: column; gap: .15rem; } .trust-icon { width: 30px; height: 30px; flex: none; color: var(--link); padding: .3rem; border-radius: 50%; background: var(--badge-bg); box-sizing: content-box; } .trust-row span { color: var(--muted); } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr) 1.4fr; gap: 2rem; padding-bottom: 2rem; } .footer-heading { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; margin-bottom: .7rem; } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin-bottom: .4rem; font-size: .9rem; } .footer-grid a { color: var(--muted); text-decoration: none; } @media (hover: hover) { .footer-grid a:hover { color: var(--ink); text-decoration: underline; } } .newsletter-form { display: flex; gap: .5rem; } .footer-legal { border-top: 1px solid var(--border); padding-top: 1.2rem; margin: 0; font-size: .82rem; color: var(--muted); } /* Card badges. Positioned in a flow rather than absolutely stacked, so a product that is both new and reduced shows both rather than one on top of the other. */ .badge-stack { position: absolute; top: 1rem; left: 1rem; display: flex; gap: .35rem; z-index: 2; } .tag { padding: .3rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .02em; } .tag-new { background: var(--violet); color: #fff; } .tag-sale { background: var(--pink); color: #fff; } .tag-out { background: var(--badge-bg); color: var(--muted); } .compare-at { color: var(--muted); text-decoration: line-through; font-weight: 500; margin-left: .4rem; } .stars { color: #f5a623; letter-spacing: .05em; } .stars .star-off { color: var(--border); } .rating-count { color: var(--muted); font-size: .8rem; } /* The heart. A submit button in a form, not a link -- it changes stored state, so it must not be reachable by a crawler following links. */ .wish-button { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface); color: var(--muted); display: grid; place-items: center; font-size: 1.05rem; cursor: pointer; box-shadow: 0 4px 14px var(--shadow); } @media (hover: hover) { .wish-button:hover { color: var(--pink); } } .wish-button[aria-pressed="true"] { color: var(--pink); } .wish-button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } .page-prose { max-width: 68ch; } .page-prose h2 { margin-top: 2rem; font-size: 1.25rem; } .page-prose li { margin-bottom: .4rem; } @media (max-width: 992px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } .category-row { margin-top: 1.5rem; } } @media (max-width: 576px) { .footer-grid { grid-template-columns: 1fr; } .newsletter-form { flex-direction: column; } } /* Marks the staff area, so it is never mistaken for the shop at a glance. */ .staff-tag { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; background: var(--pink); color: #fff; } /* Django's messages, and any Bootstrap alert. Bootstrap ships fixed pastel backgrounds that stay pale on a dark page, so they are re-pointed at the status tokens. */ .alert { border: 1px solid transparent; } .alert-success { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-ink); } .alert-info, .alert-debug { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-ink); } .alert-warning { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-ink); } .alert-danger, .alert-error { background: var(--bad-bg); color: var(--bad-ink); border-color: var(--bad-ink); } .alert a { color: inherit; } .hero-proof { display: flex; align-items: center; gap: .6rem; margin: 1.4rem 0 0; font-size: .9rem; color: var(--hero-muted); } .hero-proof .stars { font-size: 1rem; } /* --- devices ---------------------------------------------------------------- A phone drawn around a screenshot. CSS rather than a composited image, so the picture inside is the file that was uploaded: crisp on a retina screen, swappable without regenerating anything, and the frame follows the theme. */ .device { margin: 0; /* Sized against the viewport rather than fixed at 220px. Three devices at that size sat in the middle of a 1200px page looking like thumbnails of themselves; the clip inside one is the point of the section, and it has to be big enough to see what the app is doing. */ --device-width: clamp(240px, 24vw, 360px); width: var(--device-width); flex: none; } .device-screen { position: relative; overflow: hidden; background: var(--image-well); border: 2px solid var(--ink); box-shadow: 0 18px 40px var(--shadow-strong), inset 0 0 0 3px var(--surface); } .device-screen img { display: block; width: 100%; height: 100%; object-fit: cover; } .device-empty { display: grid; place-items: center; height: 100%; font-size: 3rem; color: var(--muted); } .device figcaption { margin-top: .85rem; text-align: center; display: grid; gap: .15rem; font-size: 1rem; font-weight: 700; line-height: 1.25; } .device figcaption a { color: var(--ink); text-decoration: none; } .device figcaption a:hover { text-decoration: underline; } .device figcaption span { font-weight: 600; color: var(--muted); font-size: .9rem; } /* An iPhone: tall, heavily rounded, with the island at the top. */ .device-iphone .device-screen { aspect-ratio: 9 / 19.5; border-radius: 2rem; } .device-iphone .device-screen::before { content: ""; position: absolute; z-index: 2; top: .5rem; left: 50%; transform: translateX(-50%); width: 32%; height: 1.15rem; border-radius: 999px; background: var(--ink); } /* An Android handset: slightly squarer corners, a punched-out camera. */ .device-android .device-screen { aspect-ratio: 9 / 20; border-radius: 1.4rem; } .device-android .device-screen::before { content: ""; position: absolute; z-index: 2; top: .5rem; left: 50%; transform: translateX(-50%); width: .6rem; height: .6rem; border-radius: 50%; background: var(--ink); } /* A tablet: wider, gentler corners, no cut-out. */ .device-tablet { --device-width: clamp(300px, 30vw, 450px); } .device-tablet .device-screen { aspect-ratio: 3 / 4; border-radius: 1.1rem; } /* The row itself. Staggered so it reads as a shelf of devices rather than a line of thumbnails, and levelled again on a phone where there is no room. */ .device-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 1.75rem; } @media (min-width: 992px) { .device-row .device:nth-child(odd) { transform: translateY(-1.25rem); } } @media (max-width: 575px) { .device { --device-width: 150px; } .device-tablet { --device-width: 190px; } /* One per row on a phone, at a size worth looking at. */ .device-row { gap: 1.25rem; } } /* A merchant-uploaded demo, which is usually a portrait phone recording. Capped by height so a tall clip cannot run off the page, and centred so a narrow one is not stranded against the left edge. */ .product-demo { display: flex; justify-content: center; } .product-demo video { max-width: 100%; max-height: 70vh; border-radius: 1rem; background: #000; box-shadow: 0 14px 40px var(--shadow-strong); } .video-title { font-size: .85rem; color: var(--muted); } /* Contained, not cropped. A 9:16 film in a 9:19.5 iPhone frame loses a strip off each side under object-fit: cover, which is exactly where the title and the price sit -- "scape Terminal" and "$5.9" were what a visitor actually read. Small bars top and bottom are the cheaper price. */ .device-screen video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; } /* Two-factor setup. The key and the codes are read off a screen and typed or copied, so they are monospaced, spaced out, and selectable in one go. */ /* White tile whatever the theme: a camera wants contrast, and the code itself is drawn black on white. */ .mfa-qr svg { width: 190px; height: auto; background: #fff; padding: .6rem; border-radius: .6rem; } .mfa-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; letter-spacing: .09em; word-break: break-all; background: var(--surface-2); border: 1px solid var(--border); border-radius: .6rem; padding: .6rem .8rem; user-select: all; } .recovery-codes { list-style: none; padding: 1rem; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: .8rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; user-select: all; } /* --- premium surface treatment ---------------------------------------------- The brief asks for soft glow and gentle depth rather than flat panels and heavy glass. These are the two shared treatments the redesign leans on, kept here so a card, a panel and a purchase box all read as the same material. */ /* A hairline that catches the brand colour along the top edge, which is what makes a dark card look lit rather than merely dark. */ .lifted { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 40px var(--shadow); } .lifted::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--violet), var(--pink), transparent); opacity: .5; border-radius: 1rem 1rem 0 0; } /* Motion is opt-in per element and always removable. Everything below is a transform or an opacity, which the compositor handles without repainting. */ @media (prefers-reduced-motion: no-preference) { .lift-on-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .lift-on-hover:hover { transform: translateY(-4px); box-shadow: 0 26px 60px var(--shadow-strong); } } .lift-on-hover:hover { border-color: color-mix(in srgb, var(--violet) 45%, var(--border)); } /* Section headings, which the redesign uses everywhere in place of the current eyebrow-plus-display-heading pairing. */ .section-head { max-width: 62ch; margin-bottom: 2rem; } .section-head .eyebrow { color: var(--link); display: block; margin-bottom: .6rem; } .section-head h2 { font-weight: 700; letter-spacing: -.02em; } .section-head p { color: var(--muted); margin-bottom: 0; } /* === the shop ============================================================== Sidebar and results, collapsing to a single column on a phone where a permanent filter rail would eat the screen the products need. */ .grad-text { background: linear-gradient(90deg, var(--violet), var(--pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .shop-crumbs { font-size: .82rem; color: var(--muted); margin-bottom: 1.1rem; display: flex; gap: .5rem; } .shop-crumbs a { color: var(--muted); text-decoration: none; } .shop-crumbs a:hover { color: var(--ink); text-decoration: underline; } .shop-top { display: grid; gap: 1.5rem; align-items: center; margin-bottom: 1.75rem; } @media (min-width: 992px) { .shop-top { grid-template-columns: 1fr 1fr; } } .shop-intro h1 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 .5rem; } .shop-intro p { color: var(--muted); margin: 0; max-width: 52ch; } .shop-promo { padding: 1.4rem 1.5rem; background: linear-gradient(120deg, color-mix(in srgb, var(--violet) 22%, var(--surface)), color-mix(in srgb, var(--pink) 14%, var(--surface))); } .shop-promo-head { display: flex; align-items: center; gap: .6rem; margin: 0 0 .35rem; font-size: 1.15rem; } .shop-promo-pill { font-size: .7rem; font-weight: 800; letter-spacing: .04em; padding: .2rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .16); color: var(--hero-ink); } .shop-promo-text { color: var(--hero-muted); font-size: .9rem; margin: 0 0 .9rem; } .shop-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; } .shop-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 600; } .shop-chip:hover { border-color: color-mix(in srgb, var(--violet) 50%, var(--border)); } .shop-chip.is-on { border-color: transparent; color: #fff; background: linear-gradient(120deg, var(--violet), var(--pink)); } .shop-chip-count { font-size: .72rem; opacity: .75; font-variant-numeric: tabular-nums; } .shop-chip-clear { margin-left: auto; background: transparent; color: var(--muted); } .shop-grid { display: grid; gap: 1.5rem; align-items: start; } @media (min-width: 992px) { .shop-grid { grid-template-columns: 264px 1fr; } } .shop-side { padding: 1.25rem; position: sticky; top: 88px; } @media (max-width: 991px) { .shop-side { position: static; } } .shop-side-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; } .shop-side-head h2 { font-size: .95rem; font-weight: 700; margin: 0; } .shop-side-head a { font-size: .78rem; color: var(--muted); } .shop-facet { border: 0; padding: 0 0 1.1rem; margin: 0 0 1.1rem; border-bottom: 1px solid var(--border); } .shop-facet:last-of-type { border-bottom: 0; } .shop-facet legend { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 800; color: var(--muted); margin-bottom: .6rem; float: none; width: auto; } .shop-option { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; font-size: .87rem; cursor: pointer; } .shop-option-name { flex: 1; } .shop-option-count { color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; } /* Kept visible rather than hidden: a filter that disappears makes the list jump, and its absence is harder to understand than a nil count. */ .shop-option.is-empty { opacity: .4; cursor: default; } .shop-price { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; } .shop-bands { display: flex; flex-wrap: wrap; gap: .4rem; } .shop-band { font-size: .78rem; padding: .35rem .6rem; border-radius: 999px; border: 1px solid var(--border); cursor: pointer; } .shop-band input { position: absolute; opacity: 0; width: 0; height: 0; } .shop-band.is-on { border-color: var(--link); color: var(--link); } .shop-band:focus-within { outline: 3px solid var(--cyan); outline-offset: 2px; } .shop-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .shop-count { margin: 0; color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; } .shop-toolbar-controls { display: flex; align-items: center; gap: .75rem; } .shop-sort { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--muted); margin: 0; } .shop-view { display: inline-flex; border: 1px solid var(--border); border-radius: .6rem; overflow: hidden; } .shop-view-button { display: grid; place-items: center; width: 34px; height: 32px; color: var(--muted); background: var(--surface); } .shop-view-button.is-on { color: #fff; background: var(--link); } .shop-view-button:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; } /* auto-fit, not auto-fill. auto-fill keeps the empty tracks it could not fill, so a shop with three products left them huddled against the left edge with a column of nothing beside them. auto-fit collapses the empty tracks and the cards share the full width evenly -- which also makes each one bigger, and easier to read. */ .pgrid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .pgrid-list { grid-template-columns: 1fr; } .shop-pages { display: flex; justify-content: center; gap: .4rem; margin-top: 2.5rem; } .shop-page { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: .55rem; border: 1px solid var(--border); color: var(--ink); text-decoration: none; font-size: .88rem; font-variant-numeric: tabular-nums; } .shop-page:hover { border-color: var(--link); } .shop-page.is-on { background: var(--link); border-color: var(--link); color: #fff; font-weight: 700; } .shop-page-gap { border-color: transparent; color: var(--muted); } /* === the product card ===================================================== */ .pcard { position: relative; display: flex; flex-direction: column; overflow: hidden; } .pcard-badge { position: absolute; top: .7rem; left: .7rem; z-index: 2; font-size: .68rem; font-weight: 800; letter-spacing: .02em; padding: .28rem .55rem; border-radius: 999px; color: #fff; } .pcard-badge-sale { background: var(--pink); } .pcard-badge-new { background: var(--violet); } .pcard-badge-top { background: linear-gradient(120deg, var(--violet), var(--cyan)); } .pcard-badge-bundle { background: linear-gradient(120deg, var(--cyan), var(--violet)); } .pcard-wish { position: absolute; top: .55rem; right: .55rem; z-index: 2; } .pcard-wish .wish-button { position: static; width: 34px; height: 34px; box-shadow: none; background: rgba(0,0,0,.35); } /* Contained rather than cropped: these are screenshots, and cropping one to fill a landscape box shows a band of a phone screen with the part that explains the product cut off. */ /* A grid box with max-height on the image rather than height:100%. A percentage height inside an auto-height parent resolves to auto, so the picture's own height won and a phone screenshot made the card 900px tall. */ /* Absolutely positioned inside a box that has its own aspect ratio. A percentage height on a flow child of an auto-height parent resolves to auto, so the picture's own height won and a phone screenshot made the card 900 px tall; against a positioned ancestor there is no such circularity and object-fit finally has a box to fit into. */ .pcard-art { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--image-well); } .pcard-art img { position: absolute; inset: .5rem; width: calc(100% - 1rem); height: calc(100% - 1rem); object-fit: contain; } .pcard-art-empty { display: grid; place-items: center; height: 100%; font-size: 2.4rem; color: var(--muted); } .pcard-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .28rem; flex: 1; } .pcard-name { font-size: .98rem; font-weight: 700; margin: 0; line-height: 1.3; } .pcard-name a { color: var(--ink); text-decoration: none; } .pcard-name a:hover { text-decoration: underline; } .pcard-kind { font-size: .76rem; color: var(--muted); margin: 0; } .pcard-rating { display: flex; align-items: center; gap: .35rem; font-size: .78rem; margin: .1rem 0; } .pcard-score { font-weight: 700; } .pcard-reviews, .pcard-unrated { color: var(--muted); } .pcard-summary { font-size: .85rem; color: var(--muted); margin: .2rem 0; } .pcard-price { display: flex; align-items: baseline; gap: .45rem; margin: .3rem 0 .1rem; } .pcard-price strong { font-size: 1.15rem; } .pcard-was { color: var(--muted); text-decoration: line-through; font-size: .82rem; } .pcard-off { color: var(--pink); font-size: .76rem; font-weight: 800; } .pcard-delivery { font-size: .75rem; font-weight: 700; margin: .15rem 0; display: flex; gap: .3rem; align-items: center; } .pcard-delivery-download { color: var(--ok-ink); } .pcard-delivery-stock { color: var(--ok-ink); } .pcard-delivery-none { color: var(--muted); } .pcard-platforms { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 0; } .pcard-platform { font-size: .68rem; padding: .18rem .45rem; border-radius: .35rem; background: var(--badge-bg); color: var(--muted); } .pcard-actions { display: flex; gap: .5rem; margin-top: auto; padding-top: .8rem; } .pcard-actions form { flex: 1; } .pcard-actions .btn { width: 100%; } /* The list layout puts the art beside the detail rather than above it. */ @media (min-width: 576px) { .pcard-row { flex-direction: row; } .pcard-row .pcard-art { width: 220px; flex: none; aspect-ratio: 1; } .pcard-row .pcard-actions { max-width: 320px; } } /* Action labels are two short words; letting them wrap makes a card look broken at exactly the moment somebody is deciding to press one. */ .pcard-actions .btn { white-space: nowrap; } .shop-sort span { white-space: nowrap; } /* --- product detail ------------------------------------------------------ Every colour here is a token, so the page follows the theme cookie rather than carrying a second palette that would have to be kept in step. */ .pdp-head { margin-bottom: 1.75rem; } .pdp-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; margin: 0; } .pdp-tagline { color: var(--muted); font-size: 1.05rem; margin: .55rem 0 .75rem; max-width: 62ch; } .pdp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .9rem; color: var(--muted); } .pdp-meta-rating { display: inline-flex; align-items: center; gap: .4rem; } .pdp-meta-rating strong { color: var(--ink); } .pdp-meta-rating a, .pdp-meta-item { color: var(--muted); text-decoration: none; } .pdp-meta-rating a:hover, a.pdp-meta-item:hover { color: var(--link); text-decoration: underline; } .pdp-dot { opacity: .5; } .pdp-layout { display: grid; gap: 1.75rem; align-items: start; } /* A grid item is min-content wide by default, so the thumbnail strip -- five thumbnails plus gaps, wider than a phone -- pushed the whole column past the viewport and took the purchase panel off the right of the screen with it. min-width: 0 lets the column shrink and the strip scroll on its own. */ .pdp-preview, .pdp-buy, .pdp-main, .pdp-specs { min-width: 0; } @media (min-width: 992px) { .pdp-layout { grid-template-columns: minmax(0, 1fr) 22rem; } } /* Gallery. The stage stacks every screenshot in one grid cell and the checked radio reveals one of them -- no script, and the thumbnails are a real radio group, so arrow keys move through them the way a keyboard user expects. */ .pdp-gallery { border-radius: 1.25rem; padding: 1rem; background: var(--surface); } /* A phone screenshot is 1212x2616. Without a cap the stage grows to the picture's own height and the buy panel ends up two screens above the fold. Capped and contained, so the whole screen is visible whatever shape it is. */ .pdp-stage { display: grid; background: var(--image-well); border-radius: .9rem; overflow: hidden; height: min(72vh, 42rem); } .pdp-shot { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .25s ease; } .pdp-shot img { width: 100%; height: 100%; object-fit: contain; display: block; } #shot-1:checked ~ .pdp-stage .shot-1, #shot-2:checked ~ .pdp-stage .shot-2, #shot-3:checked ~ .pdp-stage .shot-3, #shot-4:checked ~ .pdp-stage .shot-4, #shot-5:checked ~ .pdp-stage .shot-5, #shot-6:checked ~ .pdp-stage .shot-6, #shot-7:checked ~ .pdp-stage .shot-7, #shot-8:checked ~ .pdp-stage .shot-8 { opacity: 1; visibility: visible; } .pdp-thumbs { display: flex; gap: .6rem; margin-top: .85rem; overflow-x: auto; padding-bottom: .25rem; } .pdp-thumb { flex: 0 0 5rem; height: 3.6rem; border: 2px solid var(--border); border-radius: .55rem; overflow: hidden; cursor: pointer; background: var(--surface-2); } .pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } #shot-1:checked ~ .pdp-thumbs [for="shot-1"], #shot-2:checked ~ .pdp-thumbs [for="shot-2"], #shot-3:checked ~ .pdp-thumbs [for="shot-3"], #shot-4:checked ~ .pdp-thumbs [for="shot-4"], #shot-5:checked ~ .pdp-thumbs [for="shot-5"], #shot-6:checked ~ .pdp-thumbs [for="shot-6"], #shot-7:checked ~ .pdp-thumbs [for="shot-7"], #shot-8:checked ~ .pdp-thumbs [for="shot-8"] { border-color: var(--violet); } /* The radio is off-screen, so its focus ring has to be borrowed by the thumbnail -- without this the keyboard user cannot see where they are. */ #shot-1:focus-visible ~ .pdp-thumbs [for="shot-1"], #shot-2:focus-visible ~ .pdp-thumbs [for="shot-2"], #shot-3:focus-visible ~ .pdp-thumbs [for="shot-3"], #shot-4:focus-visible ~ .pdp-thumbs [for="shot-4"], #shot-5:focus-visible ~ .pdp-thumbs [for="shot-5"], #shot-6:focus-visible ~ .pdp-thumbs [for="shot-6"], #shot-7:focus-visible ~ .pdp-thumbs [for="shot-7"], #shot-8:focus-visible ~ .pdp-thumbs [for="shot-8"] { outline: 3px solid var(--link); outline-offset: 2px; } .pdp-gallery-empty { display: grid; place-items: center; min-height: 18rem; font-size: 3rem; color: var(--muted); background: var(--image-well); } /* Purchase panel */ .pdp-buy-inner { border-radius: 1.25rem; padding: 1.5rem; background: var(--surface); } @media (min-width: 992px) { .pdp-buy-inner { position: sticky; top: 5.5rem; } } .pdp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin: 0; } .pdp-price strong { font-size: 2.25rem; font-weight: 800; letter-spacing: -.02em; } .pdp-was { color: var(--muted); text-decoration: line-through; } .pdp-off { background: var(--ok-bg); color: var(--ok-ink); border-radius: 999px; padding: .1rem .55rem; font-size: .78rem; font-weight: 700; } .pdp-terms { color: var(--muted); font-size: .88rem; margin: .15rem 0 1.1rem; } .pdp-form { display: grid; gap: .75rem; } .pdp-field { display: grid; gap: .3rem; font-size: .85rem; color: var(--muted); } .pdp-save { margin-top: .6rem; } .pdp-assurances { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .5rem; font-size: .9rem; } .pdp-assurances li { display: flex; align-items: flex-start; gap: .5rem; } .pdp-tick { color: #2e9e63; font-weight: 700; } .pdp-compat { margin: 1rem 0 0; font-size: .85rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: .9rem; } .pdp-arch { opacity: .8; } /* Jump links */ .pdp-nav { display: flex; gap: .35rem; overflow-x: auto; margin: 2.5rem 0 1.5rem; border-bottom: 1px solid var(--border); } .pdp-nav a { flex: 0 0 auto; padding: .6rem .9rem; color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; } .pdp-nav a:hover { color: var(--ink); border-bottom-color: var(--border); } .pdp-body { display: grid; gap: 2rem; align-items: start; } @media (min-width: 992px) { .pdp-body { grid-template-columns: minmax(0, 1fr) 19rem; } } .pdp-section { margin-bottom: 3rem; scroll-margin-top: 5.5rem; } .pdp-section > h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 1.1rem; } .pdp-bundle { margin-top: 1.5rem; } .pdp-bundle-list { list-style: none; padding: 0; display: grid; gap: .5rem; } .pdp-bundle-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: .7rem; } .pdp-features { display: grid; gap: 1rem; } @media (min-width: 576px) { .pdp-features { grid-template-columns: 1fr 1fr; } } .pdp-feature { display: flex; gap: .8rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: .9rem; } .pdp-feature-icon { font-size: 1.3rem; line-height: 1.2; } .pdp-feature h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .2rem; } .pdp-feature p { margin: 0; color: var(--muted); font-size: .9rem; } .pdp-screens { display: grid; gap: 1rem; } @media (min-width: 768px) { .pdp-screens { grid-template-columns: 1fr 1fr; } } .pdp-screen { margin: 0; border-radius: .9rem; overflow: hidden; background: var(--image-well); } .pdp-screen img { width: 100%; display: block; } .pdp-screen figcaption { padding: .6rem .85rem; font-size: .82rem; color: var(--muted); background: var(--surface); } .pdp-video { margin-bottom: 1.5rem; border-radius: .9rem; overflow: hidden; } .pdp-included { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; } .pdp-included li { display: flex; gap: .55rem; align-items: flex-start; } .pdp-reqs { display: grid; gap: 1rem; } @media (min-width: 576px) { .pdp-reqs { grid-template-columns: 1fr 1fr; } } .pdp-req { padding: 1.1rem; border-radius: .9rem; background: var(--surface); } .pdp-req h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .7rem; } .pdp-req dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0; font-size: .88rem; } .pdp-req dt { color: var(--muted); } .pdp-req dd { margin: 0; } .pdp-req-note { margin: .7rem 0 0; font-size: .82rem; color: var(--muted); } .pdp-changelog { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; } .pdp-release { border-left: 2px solid var(--border); padding-left: 1.2rem; position: relative; } .pdp-release::before { content: ""; position: absolute; left: -.42rem; top: .45rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--violet); } .pdp-release-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem; } .pdp-release-head h3 { font-size: 1.05rem; font-weight: 700; margin: 0; } .pdp-release-head time { color: var(--muted); font-size: .85rem; } .pdp-change-kind { margin: .8rem 0 .25rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; } .pdp-change { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; font-size: .92rem; } .pdp-change li { padding-left: 1.2rem; position: relative; } /* The sign is decoration on top of a heading that already says which list this is, so it is drawn rather than typed -- a screen reader announcing "plus" before every line adds nothing. */ .pdp-change li::before { position: absolute; left: 0; font-weight: 700; } .pdp-change-added li::before { content: "+"; color: #2e9e63; } .pdp-change-fixed li::before { content: "−"; color: var(--pink); } .pdp-change-improved li::before { content: "↑"; color: var(--cyan); } .pdp-release-empty { color: var(--muted); font-size: .88rem; margin: .5rem 0 0; } .pdp-review-summary { display: grid; gap: 1.25rem; padding: 1.25rem; border-radius: 1rem; background: var(--surface); margin-bottom: 1.5rem; } @media (min-width: 576px) { .pdp-review-summary { grid-template-columns: auto 1fr; align-items: center; } } .pdp-score { text-align: center; padding-right: 1.25rem; } .pdp-score strong { display: block; font-size: 2.6rem; font-weight: 800; line-height: 1; } .pdp-score-count { display: block; font-size: .8rem; color: var(--muted); margin-top: .2rem; } .pdp-bars { display: grid; gap: .35rem; } .pdp-bar-row { display: grid; grid-template-columns: 2.5rem 1fr 2rem; align-items: center; gap: .6rem; font-size: .82rem; color: var(--muted); } .pdp-bar { height: .45rem; border-radius: 999px; background: var(--badge-bg); overflow: hidden; } .pdp-bar > span { display: block; height: 100%; background: #f5a623; } .pdp-bar-count { text-align: right; font-variant-numeric: tabular-nums; } .pdp-review { padding: 1.1rem 1.25rem; border-radius: .9rem; background: var(--surface); margin-bottom: .85rem; } .pdp-review-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem; } .pdp-review-head h3 { font-size: 1rem; font-weight: 700; margin: 0; } .pdp-review-by { color: var(--muted); font-size: .82rem; margin: .25rem 0 .6rem; } .pdp-review-body p:last-child { margin-bottom: 0; } .pdp-review-form { padding: 1.5rem; border-radius: 1rem; background: var(--surface); margin-top: 1.5rem; } .pdp-faqs { display: grid; gap: .7rem; } .pdp-faq { border-radius: .9rem; background: var(--surface); border: 1px solid var(--border); } .pdp-faq summary { padding: 1rem 1.25rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; } .pdp-faq summary::-webkit-details-marker { display: none; } .pdp-faq summary::after { content: "+"; color: var(--muted); font-weight: 700; } .pdp-faq[open] summary::after { content: "−"; } .pdp-faq-answer { padding: 0 1.25rem 1.1rem; color: var(--muted); } .pdp-faq-answer p:last-child { margin-bottom: 0; } .pdp-specs-inner { padding: 1.25rem; border-radius: 1rem; background: var(--surface); } @media (min-width: 992px) { .pdp-specs-inner { position: sticky; top: 5.5rem; } } .pdp-specs-inner h2 { margin-bottom: .9rem; } .pdp-specs-inner dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem .9rem; margin: 0; font-size: .86rem; } .pdp-specs-inner dt { color: var(--muted); } .pdp-specs-inner dd { margin: 0; text-align: right; } @media (prefers-reduced-motion: reduce) { .pdp-shot { transition: none; } } /* --- home page ------------------------------------------------------------ */ .hero-grid { display: grid; gap: 2.5rem; align-items: center; padding: 3.5rem 0 4rem; } .hero-copy, .hero-stage { min-width: 0; } @media (min-width: 992px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } } .hero-copy h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: .8rem 0 0; text-wrap: balance; } .hero-lead { font-size: 1.12rem; max-width: 46ch; margin: 1.1rem 0 1.75rem; color: var(--hero-muted); } .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; } .hero-promises { list-style: none; padding: 0; margin: 1.9rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; } .hero-promises li { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; padding: .4rem .8rem; border-radius: 999px; background: var(--hero-card-bg); border: 1px solid var(--hero-card-border); } .hero-facts { display: flex; flex-wrap: wrap; gap: 2.25rem; margin: 1.9rem 0 0; } .hero-facts dt { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .hero-facts dd { margin: 0; font-size: .82rem; color: var(--hero-muted); } /* The showcase: real featured products, gently adrift. */ .hero-stage { position: relative; min-height: 22rem; display: grid; place-items: center; } .hero-glow { position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(108, 59, 255, .55), transparent 62%), radial-gradient(circle at 72% 62%, rgba(255, 79, 163, .45), transparent 60%); filter: blur(48px); } .hero-deck { position: relative; display: grid; gap: .9rem; width: min(24rem, 100%); } .hero-tile { display: flex; align-items: center; gap: .85rem; padding: .8rem; border-radius: 1rem; background: var(--hero-card-bg); border: 1px solid var(--hero-card-border); box-shadow: 0 18px 40px var(--hero-card-shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .hero-tile-art { flex: 0 0 3.4rem; height: 3.4rem; border-radius: .7rem; overflow: hidden; background: var(--image-well); display: grid; place-items: center; } .hero-tile-art img { width: 100%; height: 100%; object-fit: cover; } .hero-tile-body { display: grid; gap: .1rem; font-size: .85rem; min-width: 0; } .hero-tile-body strong { font-size: .95rem; } .hero-tile-body span { color: var(--hero-muted); } .hero-tile-price { font-weight: 700; color: inherit !important; } .hero-tile-1 { transform: translateX(-.9rem); animation: hero-drift 9s ease-in-out infinite; } .hero-tile-2 { transform: translateX(1.4rem); animation: hero-drift 9s ease-in-out infinite 1.2s; } .hero-tile-3 { transform: translateX(-.4rem); animation: hero-drift 9s ease-in-out infinite 2.4s; } @keyframes hero-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.55rem; } } @media (prefers-reduced-motion: reduce) { .hero-tile-1, .hero-tile-2, .hero-tile-3 { animation: none; } } /* Section headings, shared by every row on the page. */ .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.75rem; } .section-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin: .35rem 0 0; } .section-sub { color: var(--muted); margin: .5rem 0 0; max-width: 58ch; } .section-more { font-weight: 600; text-decoration: none; white-space: nowrap; } .section-head-center { justify-content: center; text-align: center; } .section-head-center .section-sub { margin-inline: auto; } .pgrid-feature { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .pcard-summary { color: var(--muted); font-size: .87rem; margin: 0 0 .5rem; } .pcard-version { font-size: .75rem; color: var(--muted); margin: 0 0 .4rem; font-variant-numeric: tabular-nums; } /* Promotional videos */ .promo-row { display: grid; gap: 1.25rem; } @media (min-width: 768px) { .promo-row { grid-template-columns: repeat(3, 1fr); } } .promo-card { border-radius: 1.1rem; overflow: hidden; background: var(--surface); } .promo-art { position: relative; aspect-ratio: 16 / 9; background: var(--image-well); display: grid; place-items: center; } .promo-art img { width: 100%; height: 100%; object-fit: cover; } .promo-art-empty { font-size: 2.5rem; color: var(--muted); } .promo-play { position: absolute; inset: 0; margin: auto; width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 1.2rem; background: linear-gradient(135deg, var(--violet), var(--pink)); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); } .promo-play:hover { transform: scale(1.06); } .promo-pending { position: absolute; top: .7rem; left: .7rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .25rem .6rem; border-radius: 999px; background: var(--warn-bg); color: var(--warn-ink); } .promo-length { position: absolute; bottom: .7rem; right: .7rem; font-size: .75rem; font-variant-numeric: tabular-nums; padding: .15rem .5rem; border-radius: .4rem; background: rgba(0, 0, 0, .65); color: #fff; } .promo-body { padding: 1rem 1.15rem 1.25rem; } .promo-body h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 .3rem; } .promo-body p { margin: 0; color: var(--muted); font-size: .88rem; } .promo-modal { border: 0; border-radius: 1rem; padding: 0; width: min(60rem, 92vw); background: #000; color: #fff; } .promo-modal::backdrop { background: rgba(0, 0, 0, .8); } .promo-modal video { width: 100%; display: block; max-height: 78dvh; background: #000; } .promo-modal-title { font-size: .95rem; font-weight: 600; margin: 0; padding: .85rem 3rem .85rem 1.1rem; } .promo-close { position: absolute; top: .5rem; right: .6rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; } .promo-close:hover { background: rgba(255, 255, 255, .26); } @media (prefers-reduced-motion: reduce) { .promo-play:hover { transform: none; } } /* Testimonials, which are real reviews */ .quote-row { display: grid; gap: 1.25rem; } @media (min-width: 768px) { .quote-row { grid-template-columns: repeat(3, 1fr); } } .quote { margin: 0; padding: 1.4rem; border-radius: 1.1rem; background: var(--surface); display: grid; gap: .55rem; align-content: start; } .quote blockquote { margin: 0; font-size: 1.05rem; font-weight: 700; } .quote-body { margin: 0; color: var(--muted); font-size: .92rem; } .quote figcaption { font-size: .85rem; font-weight: 600; } .quote figcaption span { display: block; font-weight: 400; color: var(--muted); } /* --- the customer account area -------------------------------------------- */ .account-shell { display: grid; gap: 2rem; align-items: start; } .account-nav, .account-main { min-width: 0; } @media (min-width: 992px) { .account-shell { grid-template-columns: 15rem minmax(0, 1fr); } } .account-nav { border-radius: 1rem; background: var(--surface); border: 1px solid var(--border); padding: 1.1rem; } @media (min-width: 992px) { .account-nav { position: sticky; top: 5.5rem; } } .account-who { margin: 0 0 .9rem; font-size: .85rem; display: grid; } .account-who span { color: var(--muted); font-size: .78rem; } .account-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .15rem; } .account-nav a { display: block; padding: .5rem .7rem; border-radius: .55rem; color: var(--ink); text-decoration: none; font-size: .9rem; } .account-nav a:hover { background: var(--badge-bg); } .account-nav a.is-on { background: linear-gradient(135deg, var(--violet), var(--pink)); color: #fff; font-weight: 600; } .account-signout { margin-top: 1rem; } .account-head { margin-bottom: 1.5rem; } .account-head h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; margin: 0; } .account-head p { color: var(--muted); margin: .4rem 0 0; } .account-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); margin-bottom: 2.25rem; } .account-card { display: grid; gap: .1rem; padding: 1.1rem; border-radius: 1rem; background: var(--surface); text-decoration: none; color: inherit; } .account-card strong { font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .account-card span { font-size: .85rem; } .account-card-detail { color: var(--muted); font-size: .78rem !important; } .account-section { margin-bottom: 2.5rem; } .account-section > h2, .account-section-head h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .9rem; } .account-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .account-section-head a { font-size: .85rem; } .account-stack, .account-list { display: grid; gap: 1rem; } .account-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .9rem 1.1rem; border-radius: .9rem; background: var(--surface); } .account-item-art { width: 3rem; height: 3rem; border-radius: .6rem; overflow: hidden; background: var(--image-well); display: grid; place-items: center; } .account-item-art img { width: 100%; height: 100%; object-fit: cover; } .account-item-body h3 { font-size: 1rem; font-weight: 700; margin: 0; } .account-item-body p { margin: .15rem 0 0; color: var(--muted); font-size: .84rem; } .account-update { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border-radius: .9rem; background: var(--surface); } .account-update p { margin: .15rem 0 0; color: var(--muted); font-size: .86rem; } .account-table { width: 100%; border-collapse: collapse; font-size: .88rem; } .account-table th, .account-table td { padding: .6rem .5rem; text-align: left; border-bottom: 1px solid var(--border); } .account-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .account-table .num { text-align: right; font-variant-numeric: tabular-nums; } .account-back { font-size: .88rem; margin-bottom: 1rem; } .muted { color: var(--muted); } .pill { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--badge-bg); color: var(--ink); } .pill-paid, .pill-active, .pill-completed { background: var(--ok-bg); color: var(--ok-ink); } .pill-pending, .pill-processing { background: var(--warn-bg); color: var(--warn-ink); } .pill-canceled, .pill-revoked, .pill-expired, .pill-suspended { background: var(--bad-bg); color: var(--bad-ink); } .pill-refunded, .pill-shipped { background: var(--info-bg); color: var(--info-ink); } /* Owned software */ .owned { padding: 1.25rem; border-radius: 1rem; background: var(--surface); scroll-margin-top: 5.5rem; } .owned-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .owned-art { width: 3.4rem; height: 3.4rem; border-radius: .7rem; overflow: hidden; background: var(--image-well); display: grid; place-items: center; } .owned-art img { width: 100%; height: 100%; object-fit: cover; } .owned-title { flex: 1 1 12rem; min-width: 0; } .owned-title h2 { font-size: 1.1rem; font-weight: 700; margin: 0; } .owned-title p { margin: .15rem 0 0; color: var(--muted); font-size: .85rem; } .owned-flag { padding: .25rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--info-bg); color: var(--info-ink); } .owned-downloads { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .owned-note { margin: .6rem 0 0; font-size: .82rem; color: var(--muted); } .owned-note-warn { color: var(--warn-ink); } .owned-keys { margin-top: 1rem; display: grid; gap: .5rem; } .keyline { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; font-size: .85rem; } .keyline code { font-size: .9rem; letter-spacing: .04em; } /* Licences */ .licence { padding: 1.25rem; border-radius: 1rem; background: var(--surface); } .licence-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; } .licence-head h2 { font-size: 1.1rem; font-weight: 700; margin: 0; } .licence-head p { margin: .15rem 0 0; color: var(--muted); font-size: .85rem; } .licence-key { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1rem 0; padding: .75rem 1rem; border-radius: .7rem; background: var(--surface-2); border: 1px solid var(--border); } /* A key is transcribed by hand, so it gets the highest-contrast token rather than the accent a element would otherwise inherit. */ .licence-key code, .keyline code { color: var(--ink); } .licence-key code { font-size: 1.02rem; letter-spacing: .08em; font-weight: 600; } .licence-facts { display: grid; gap: .5rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 0; } .licence-facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .licence-facts dd { margin: .1rem 0 0; font-size: .9rem; } .licence-update { margin: 1rem 0 0; font-size: .87rem; color: var(--info-ink); background: var(--info-bg); padding: .5rem .8rem; border-radius: .55rem; } .licence-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; } .integration-note { padding: 1.15rem; border-radius: .9rem; background: var(--surface); border: 1px dashed var(--border); } .integration-note p { margin: 0 0 .6rem; } .history { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: .87rem; } .history li { display: flex; gap: .9rem; padding: .45rem 0; border-bottom: 1px solid var(--border); } .history-when { color: var(--muted); flex: 0 0 10rem; font-variant-numeric: tabular-nums; } /* The page after payment */ .receipt { max-width: 44rem; margin: 0 auto; text-align: center; } .receipt-icon { font-size: 3rem; margin: 0; color: #2e9e63; } .receipt-icon-wait { color: var(--warn-ink); } .receipt h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; margin: .4rem 0 .3rem; } .receipt-sub { color: var(--muted); font-size: .88rem; } .receipt-block { text-align: left; padding: 1.25rem; border-radius: 1rem; background: var(--surface); margin-top: 1.5rem; } .receipt-block h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .8rem; } .receipt-facts { display: grid; gap: .5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 0 0 1rem; } .receipt-facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .receipt-facts dd { margin: .1rem 0 0; } .receipt-facts code { font-size: 1rem; letter-spacing: .06em; } .receipt-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; } .receipt-note { margin: .9rem 0 0; font-size: .84rem; color: var(--muted); } .receipt-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 2rem; } /* Invoice */ .invoice { padding: 2rem; border-radius: 1rem; background: var(--surface); max-width: 52rem; } .invoice-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; } .invoice-head h1 { font-size: 1.8rem; font-weight: 800; margin: 0; } .invoice-ref { color: var(--muted); font-size: .82rem; margin: .2rem 0 0; font-variant-numeric: tabular-nums; } .invoice-shop { text-align: right; display: grid; font-size: .85rem; } .invoice-shop span { color: var(--muted); } .invoice-parties { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 1.5rem 0; } .invoice-parties h2 { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 .4rem; } .invoice-parties p { margin: 0; font-size: .9rem; } .invoice-address { line-height: 1.5; } .invoice-note { color: var(--muted); font-size: .82rem !important; } .invoice-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: .5rem; } .invoice-table th, .invoice-table td { padding: .55rem .4rem; border-bottom: 1px solid var(--border); text-align: left; } .invoice-table .num { text-align: right; font-variant-numeric: tabular-nums; } .invoice-table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .invoice-table tfoot th { text-align: right; font-weight: 500; color: var(--muted); } .invoice-total th, .invoice-total td { font-weight: 800; font-size: 1.05rem; color: var(--ink); } .invoice-foot { margin: 1.5rem 0 0; font-size: .8rem; color: var(--muted); } @media print { /* Everything that is navigation, not document. */ .no-print, .site-header, .site-footer, .announcement, nav.account-nav { display: none !important; } .invoice { box-shadow: none; border: 0; padding: 0; max-width: none; } .invoice::before { display: none; } body { background: #fff; color: #000; } } /* --- paying --------------------------------------------------------------- Two ways to pay, presented as equals. The crypto button previously used Bootstrap's btn-outline-dark, which is near-black text and a near-black border: on a dark page it was invisible, and a payment method nobody can see is a payment method the shop does not offer. */ .pay-methods { display: grid; gap: .55rem; margin-top: .25rem; } .pay-note { margin: 0 0 .35rem; font-size: .8rem; color: var(--muted); } .pay-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; margin: .35rem 0; color: var(--muted); font-size: .8rem; } .pay-or::before, .pay-or::after { content: ""; height: 1px; background: var(--border); } .btn-crypto { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); font-weight: 600; } .btn-crypto:hover, .btn-crypto:focus-visible { background: var(--badge-bg); color: var(--ink); border-color: var(--link); } .btn-crypto span { color: #f7931a; font-weight: 700; } /* --- contact --------------------------------------------------------------- The topic is radio buttons rather than a select: it decides who reads the message, and a select shows one option and hides the rest. */ .contact-topics legend { font-size: .85rem; color: var(--muted); margin-bottom: .6rem; } .contact-topics ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; } .contact-topics li { margin: 0; } .contact-topics label { display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; border-radius: .6rem; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; font-size: .92rem; } .contact-topics label:hover { border-color: var(--link); } /* A form-wide rule stretches inputs to the full width, which turned each radio into a wide bar and shoved its wording against the right edge. */ .contact-topics input[type="radio"] { width: auto; flex: none; margin: 0; } .contact-topics label { justify-content: flex-start; text-align: left; } /* --- the author credit ------------------------------------------------------ An image, not text, so a harvester reading markup finds nothing. Two renderings swapped by the same three-state mechanism as every colour: the bare rule is the light theme, the media query handles a dark system setting unless light was chosen explicitly, and the stamp wins over both. */ .footer-byline { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 0; font-size: .82rem; color: var(--muted); } .footer-byline img { height: 22px; width: auto; display: block; } .byline-on-dark { display: none; } .byline-on-light { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .byline-on-dark { display: block; } :root:not([data-theme="light"]) .byline-on-light { display: none; } } :root[data-theme="dark"] .byline-on-dark { display: block; } :root[data-theme="dark"] .byline-on-light { display: none; } /* What the shop accepts, shown before the last step. */ .pay-accepted { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1rem; } .pay-accepted-label { font-size: .78rem; color: var(--muted); margin-right: .15rem; } .pay-chip { font-size: .74rem; font-weight: 600; padding: .22rem .55rem; border-radius: .4rem; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); white-space: nowrap; } .pay-chip-crypto span { color: #f7931a; } .pay-accepted-note { margin: .5rem 0 0; font-size: .74rem; color: var(--muted); }