/* killihu.com — site theme (colors come from CSS variables set in ) */ @font-face { font-family: 'Ubuntu'; src: url('/assets/fonts/Ubuntu-R.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Ubuntu'; src: url('/assets/fonts/Ubuntu-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Ubuntu'; src: url('/assets/fonts/Ubuntu-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* Quicksand — the site typeface (Ubuntu for product titles, chips, buttons) */ @font-face { font-family: 'Quicksand'; src: url('/assets/fonts/Quicksand-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Quicksand'; src: url('/assets/fonts/Quicksand-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Quicksand'; src: url('/assets/fonts/Quicksand-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } /* Stop Chrome/Android auto-inflating body text after the address bar retracts on scroll (font-boosting) — we set font sizes deliberately. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { /* background-color (not the shorthand) so the color always shows under a transparent background image; the image rule is emitted per-site in */ background-color: var(--bg); color: var(--text); /* Quicksand everywhere; Ubuntu for product titles, chips and buttons (below) */ font: 1rem/1.5 'Quicksand', Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; /* sticky footer: main area stretches so the footer always reaches the bottom of the screen, even on short pages */ display: flex; flex-direction: column; min-height: 100vh; } .subtitle, .site-btn { font-weight: 700; } /* Ubuntu: product titles (grid cards + product page), chips and buttons */ .product-head h1, .card-title, .chip, .site-btn, .show-btn, .pagination button { font-family: 'Ubuntu', 'Quicksand', sans-serif; } .brand-name { font-family: 'Ubuntu', 'Quicksand', sans-serif; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); } img { max-width: 100%; height: auto; } hr { border: none; border-top: 1px solid color-mix(in srgb, var(--text) 15%, transparent); margin: 32px 0; } .draft-banner { background: #a33; color: #fff; text-align: center; padding: 6px; font-size: 0.8125rem; letter-spacing: .1em; text-transform: uppercase; } /* ------------------------------------------------------------------ header */ .site-header { background: var(--header-bg); border-bottom: 1px solid var(--accent); position: sticky; top: 0; z-index: 10; } /* header: one row like the reference site (~60px tall, 16px nav) */ .header-inner { max-width: 1560px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 16px; } /* everything in the brand row is centered on the logo's vertical axis; only logo + name are the link, the tagline is plain text */ .brand-row { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; } .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand img { display: block; } .brand-name { color: var(--accent); font-weight: 500; font-size: 1.3rem; letter-spacing: .03em; line-height: 1.2; } .brand-tagline { color: var(--text); font-size: 0.9rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; top: 2px; /* drop to the brand name's baseline */ } .header-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .header-link { color: var(--text); font-size: 0.95rem; font-weight: 400; padding: 6px 12px; border-radius: 4px; } .header-link:hover { color: var(--link-hover); } .cart-link { display: inline-flex; align-items: center; gap: 7px; } .cart-link svg { flex-shrink: 0; } .cart-badge { display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; padding: 0 6px; min-width: 16px; height: 17px; border-radius: 4px; background: var(--accent); color: var(--bg); font-size: 0.8rem; font-weight: 600; line-height: 1; } .cart-menu { position: relative; } .cart-dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: 300px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--accent); border-radius: 6px; padding: 15px; box-shadow: 0 12px 28px rgba(0, 0, 0, .4); } .cart-dropdown-items { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; /* Chrome picks a light/dark native scrollbar per scrolling element from that element's own background-color, not what's visually behind it -- this element is transparent (just showing dark .cart-dropdown through it), so without this it defaults to a light scrollbar unlike the root document (which has bg set explicitly). Firefox already matched without this; harmless there. */ color-scheme: dark; /* padding+negative margin reserves a gutter so the scrollbar doesn't sit over the remove buttons at the row's right edge. -15px exactly matches .cart-dropdown's own 15px padding, landing the scrollbar flush with the popup's border (16px overshot it by 1px, confirmed visually) */ scrollbar-gutter: stable; padding-right: 15px; margin-right: -15px; } .cart-dropdown-empty { color: var(--muted); font-size: 0.88rem; text-align: center; padding: 10px 4px; } .cart-dropdown-item { display: flex; align-items: center; gap: 10px; } .cart-dropdown-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: linear-gradient(var(--thumb-top), var(--thumb-bottom)); } .cart-dropdown-item-info { flex: 1; min-width: 0; } .cart-dropdown-item-name { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cart-dropdown-item-price { font-size: 0.8rem; color: var(--muted); } .cart-dropdown-item-remove { flex-shrink: 0; width: 22px; height: 22px; border-radius: 4px; line-height: 1; border: 1px solid var(--separator); background: transparent; color: var(--muted); cursor: pointer; font-size: 0.7rem; } .cart-dropdown-item-remove:hover { color: var(--accent); border-color: var(--accent); } .cart-dropdown-checkout { display: block; width: 100%; margin-top: 15px; padding: 8px 12px; text-align: center; border-radius: 4px; background: var(--accent); color: #151515; font-weight: 600; font-size: 0.9rem; transition: transform .15s ease; } /* same "zoom out" feel as the grid card thumbnails on hover (.card:hover .card-thumb); color repeated on :hover to override the global a:hover (var(--link-hover) equals --accent here, so without this the label would vanish into the button's own background) */ .cart-dropdown-checkout:hover { color: #151515; transform: scale(.95); } .cart-dropdown-notice { font-size: 0.8rem; color: var(--muted); margin: 10px 0 0; text-align: center; } .site-main { max-width: 1560px; margin: 0 auto; padding: 28px 24px 60px; width: 100%; flex: 1; } /* --------------------------------------------------------------- front page */ .filterbar { margin-bottom: 22px; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .chip { background: none; border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); color: var(--text); border-radius: 4px; padding: 5px 9px; font-size: 1rem; font-family: inherit; cursor: pointer; letter-spacing: .02em; transition: background .15s ease, color .15s ease, border-color .15s ease; } .chip:hover { border-color: var(--chip-color, var(--accent)); color: var(--chip-color, var(--accent)); } .chip.active { background: var(--chip-color, var(--accent)); border-color: var(--chip-color, var(--accent)); color: #151515; font-weight: 500; } .chip-row.small .chip { padding: 3px 12px; font-size: .875rem; } /* the "All" category chip uses the main text color; tag chips use their own configurable accent (Settings > Colors) */ #cat-chips .chip[data-cat=""] { --chip-color: var(--text); } #tag-chips .chip { --chip-color: var(--tag-accent); } /* category + tag chips carry the category color even when not selected (border transparent until hovered/selected); hover looks exactly like selected */ #cat-chips .chip, #tag-chips .chip { color: var(--chip-color, var(--accent)); border-color: transparent; } #cat-chips .chip { font-size: 1rem; font-weight: 600; } /* icon before the chip label, same pattern as .product-actions .site-btn */ #cat-chips .chip { display: inline-flex; align-items: center; gap: 8px; } #cat-chips .chip svg { flex-shrink: 0; } #tag-chips .chip { font-size: 0.9rem; font-weight: 500; } #cat-chips .chip:hover, #tag-chips .chip:hover, #cat-chips .chip.active, #tag-chips .chip.active { background: var(--chip-color, var(--accent)); border-color: var(--chip-color, var(--accent)); color: #151515; } /* the "All" chip's unselected color stays neutral (--text, set above); only its selected/hover state should match the tag chips' accent color */ #cat-chips .chip[data-cat=""]:hover, #cat-chips .chip[data-cat=""].active { background: var(--tag-accent); border-color: var(--tag-accent); color: #151515; } .filter-top { display: flex; gap: 12px 18px; align-items: flex-start; flex-wrap: wrap; /* 28px = same distance as from the header to the first row */ padding-bottom: 28px; margin-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--text) 25%, transparent); } /* the category chips keep one line; when the dropdowns/search don't fit beside them, the whole controls group wraps to its own full-width row (the .wrapped class is toggled by site.js when that happens) */ .filter-top .chip-row { flex: 0 1 auto; min-width: 0; margin-bottom: 0; } .filter-controls { display: flex; gap: 8px; margin-left: auto; padding-left: 40px; flex: 0 0 auto; flex-wrap: wrap; min-width: 0; } .filter-top.wrapped .filter-controls { padding-left: 0; margin-left: 0; margin-right: auto; } .filter-label { color: var(--muted); font-size: 0.9rem; } .filter-controls select, .filter-controls input[type=search], #tag-select { background: var(--surface); color: var(--text); border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); /* 5px vertical padding = same height as the filter chips */ border-radius: 4px; padding: 5px 10px; font-size: 0.9rem; font-family: inherit; } .filter-controls input[type=search] { min-width: 130px; width: 150px; } /* macOS Safari keeps its own native control background on . appearance:none breaks Firefox's own automatic color-matching of the unfolded option list specifically when a background-image is present (confirmed: removing just the image fixes the list color, but then the arrow is gone) and the option{} rule above doesn't fix it either. Rather than chase that, opt Firefox out of this whole block and let it keep doing what already worked before any of this: native appearance, native arrow, author background/color applied correctly on its own. -moz-document is Firefox's only reliable "Firefox itself" CSS hook. */ @-moz-document url-prefix() { .filter-controls select, #tag-select { -moz-appearance: auto; appearance: auto; background-image: none; padding-right: 10px; } } .filter-controls select:focus, .filter-controls input:focus, #tag-select:focus { outline: none; border-color: var(--accent); } /* the category/tag dropdowns replace the chip rows on small screens only */ #cat-select, #tag-select { display: none; } /* like the reference site: selected category + (count) above the grid */ .result-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 20px 0 10px; } .result-count { color: var(--text); font-weight: 500; font-size: 1.5rem; } /* desktop-only pagination mirror shown next to the result count, right-aligned; hidden under 720px (see responsive block) so mobile keeps just the bottom one. A standalone block (not reusing .pagination) so its size/spacing can be tuned here without touching the bottom pagination. Single line, no top padding so it doesn't push the row taller than the count text; scrolls horizontally in the rare case of many page buttons. */ .pagination-top { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; padding-top: 0; overflow-x: auto; scrollbar-width: none; } .pagination-top::-webkit-scrollbar { display: none; } .pagination-top button { background: none; border: 1px solid var(--tag-accent); color: var(--tag-accent); border-radius: 4px; min-width: 30px; padding: 5px 10px 5px; font-size: .8125rem; font-family: 'Ubuntu', 'Quicksand', sans-serif; cursor: pointer; transition: background .15s ease, color .15s ease; } .pagination-top button:hover:not([disabled]) { background: var(--tag-accent); color: #151515; } .pagination-top button.current { background: var(--tag-accent); border-color: var(--tag-accent); color: #151515; font-weight: 700; } .pagination-top button[disabled] { opacity: .35; cursor: default; } .cat-description { color: var(--text); font-size: 0.95rem; margin: -4px 0 30px; max-width: 75ch; } /* tags row sits under the top filter row with the same separator treatment: 28px above (14px row margin + 14px padding) and 28px below, like the top row */ .filter-tags { display: flex; align-items: center; gap: 12px; padding: 14px 0 28px; border-bottom: 1px solid color-mix(in srgb, var(--text) 25%, transparent); } .filter-tags .chip-row { margin-bottom: 0; } .grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .grid-item[hidden] { display: none; } .grid-item { position: relative; } /* drafts are only rendered in the offline build — never online */ .draft-tag { position: absolute; top: 8px; left: 8px; z-index: 2; pointer-events: none; background: #a33; color: #fff; font-size: .71875rem; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 3px; } .card { display: block; color: var(--text); position: relative; } .card-thumb { position: relative; display: block; border-radius: 6px; overflow: hidden; background: linear-gradient(var(--thumb-top), var(--thumb-bottom)); aspect-ratio: 1; transition: transform .25s ease; } /* hides the alt text while a slow connection is still loading the thumb (the gradient placeholder shows through instead) without touching the alt attribute itself, so screen readers are unaffected */ .card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; text-indent: 100%; white-space: nowrap; overflow: hidden; } /* diagonal LEGACY ribbon (discontinued products): a 600x600 transparent PNG (theme/static/legacy-ribbon.png) covering the whole thumb, so it scales and animates in perfect sync with the product image on hover */ .legacy-ribbon { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } /* hover shrinks the whole rounded card box; the price badge lives outside it (pinned to the card itself) so it keeps its size and position */ .card:hover .card-thumb { transform: scale(.93); } .price-badge { position: absolute; right: 6px; top: 6px; font-size: 0.71875rem; font-weight: 600; letter-spacing: .06em; /* letter-spacing adds a trailing gap after the last character with no matching gap before the first one, so the right padding needs to shrink by that same amount to keep the text optically centered */ padding: 2px calc(6px - .06em) 2px 6px; border-radius: 3px; background: var(--badge-bg); color: var(--text); /* overridden inline with the product's category color */ } .card-title { display: block; font-weight: 400; margin-top: 10px; font-size: 1.2rem; line-height: 1.3; } .card-excerpt { display: block; color: var(--text); font-size: 0.9rem; line-height: 1.4; margin-top: 3px; } .pagination { display: flex; gap: 6px; justify-content: center; margin-top: 84px; flex-wrap: wrap; } /* text-colored borders + solid fill on hover/current, like the MANUAL/BUY buttons */ .pagination button { background: none; border: 1px solid var(--tag-accent); color: var(--tag-accent); border-radius: 4px; min-width: 30px; padding: 4px 10px 6px; font-size: .8125rem; font-family: inherit; cursor: pointer; transition: background .15s ease, color .15s ease; font-family: 'Ubuntu', 'Quicksand', sans-serif; } .pagination button:hover:not([disabled]) { background: var(--tag-accent); color: #151515; } .pagination button.current { background: var(--tag-accent); border-color: var(--tag-accent); color: #151515; font-weight: 700; } .pagination button[disabled] { opacity: .35; cursor: default; } /* ------------------------------------------------------------- contact form */ /* the footer subscribe form shares this exact visual language (labels, inputs, honeypot, status text, button) — same rules, both selectors */ .contact-form, .subscribe-form { margin: 12px 0; } .contact-form label, .subscribe-form label { display: block; margin-bottom: 14px; font-size: 0.9rem; } .contact-form input[type=text], .contact-form input[type=email], .contact-form textarea, .subscribe-form input[type=text], .subscribe-form input[type=email] { display: block; width: 100%; margin-top: 5px; margin-bottom: 15px; background: var(--surface); color: var(--text); border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); border-radius: 4px; padding: 6px 10px; font-size: 0.9rem; font-family: inherit; } .contact-form input:focus, .contact-form textarea:focus, .subscribe-form input:focus { outline: none; border-color: var(--accent); } .contact-form textarea { resize: vertical; } /* email + SUBSCRIBE button side by side, not stacked */ .subscribe-row { display: flex; align-items: stretch; gap: 8px; } .subscribe-row input[type=email] { width: auto; flex: 1; margin: 0; } .subscribe-row .site-btn { flex-shrink: 0; } .cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } @media (max-width: 560px) { .cf-grid { grid-template-columns: 1fr; } } /* honeypot: visually gone but still in the form for bots to fill */ .cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .contact-form .site-btn { cursor: pointer; font-size: 0.95rem; } /* same size as .info-section h2 .show-btn */ .subscribe-form .site-btn { cursor: pointer; padding: 4px 9px; font-size: 0.65rem; font-weight: 600; line-height: 1.4; } .contact-form .site-btn[disabled], .subscribe-form .site-btn[disabled] { opacity: .6; cursor: default; } .cf-status { margin-top: 12px; font-size: 0.9rem; } .cf-status.ok { color: #6fc98f; } .cf-status.error { color: #e35c5c; } /* ------------------------------------------------------------- support bot */ /* same visual language as the contact form: soft borders, surface inputs, accent focus, primary-style SEND button; full width of the container */ .bot-widget { width: 100%; margin: 26px 0; background: var(--info-box-bg, var(--surface)); border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); border-radius: 4px; overflow: hidden; } .bot-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--info-box-bg, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--text) 25%, transparent); } .bot-title { font-weight: 600; font-size: 0.9375rem; letter-spacing: .2px; color: var(--accent); } .bot-badge { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); } .bot-messages { min-height: 260px; max-height: 360px; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; background: var(--bg); /* default browser scrollbar, same as the popup windows */ } .bot-bubble { max-width: 88%; padding: 10px 13px; border-radius: 4px; font-size: 0.9rem; line-height: 1.45; overflow-wrap: break-word; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); animation: bot-fade-in .18s ease-out; } @keyframes bot-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .bot-bubble.bot-user { align-self: flex-end; } .bot-bubble.bot-answer, .bot-bubble.bot-loading { align-self: flex-start; } .bot-bubble.bot-error { align-self: flex-start; color: #e35c5c; background: rgba(227, 92, 92, .08); border-color: rgba(227, 92, 92, .4); } .bot-answer-meta { margin-top: 8px; } .bot-product-link { font-size: 0.85rem; font-weight: 500; color: var(--link); } .bot-product-link:hover { color: var(--accent); } .bot-dots { display: inline-flex; gap: 3px; align-items: center; } .bot-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: bot-bounce 1.2s infinite ease-in-out; } .bot-dots span:nth-child(2) { animation-delay: .15s; } .bot-dots span:nth-child(3) { animation-delay: .3s; } @keyframes bot-bounce { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } } .bot-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; } .bot-chip { font-size: 0.8125rem; font-family: inherit; color: var(--accent); background: none; border: 1px solid var(--accent); border-radius: 4px; padding: 6px 12px; cursor: pointer; transition: background .15s ease, color .15s ease; } .bot-chip:hover { background: var(--accent); color: #151515; } .bot-input-row { display: flex; gap: 8px; padding: 14px 16px; margin: 0; border-top: 1px solid color-mix(in srgb, var(--text) 25%, transparent); } .bot-input { flex: 1; min-width: 0; background: var(--surface); color: var(--text); border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); border-radius: 4px; padding: 8px 10px; font-family: inherit; font-size: 0.95rem; outline: none; } .bot-input::placeholder { color: var(--muted); } .bot-input:focus { border-color: var(--accent); } .bot-input:disabled { opacity: .6; } .bot-send { /* like the contact form's SEND button (.site-btn.primary) */ color: var(--accent); background: transparent; border: 1px solid var(--accent); border-radius: 4px; padding: 0 15px; font-size: 0.8rem; font-family: 'Ubuntu', 'Quicksand', sans-serif; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; transition: background .15s ease, color .15s ease; } .bot-send:hover:not(:disabled) { background: var(--accent); color: #151515; } .bot-send:disabled { opacity: .6; cursor: default; } .bot-status { padding: 0 16px 12px; font-size: 0.75rem; color: var(--text); text-align: center; } @media (max-width: 480px) { .bot-bubble { max-width: 94%; } .bot-messages { max-height: 300px; } } /* ------------------------------------------------------------ product pages */ .manual, .basic { max-width: 860px; margin: 0 auto; } /* manual + static pages: same title top padding as the product page */ .manual, .basic { padding-top: 28px; } /* basic page title color is set inline per-page (title_color field, default accent) */ /* product: full container width, content left / specs column right; padding-top doubles the 28px gap under the site header */ .product { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 64px; align-items: start; padding-top: 28px; } /* subtitle -> content gap: 36px (doubles the default 18px) */ .product .page-body { margin-top: 65px; } /* everything under the sidebar thumbnail sits in its own box: same width and rounded corners as the thumbnail, background color from Settings; all the text in the boxes (titles included) is 1rem */ .product-side .info-section { background: var(--info-box-bg, var(--surface)); border-radius: 6px; padding: 16px 20px; max-width: 360px; margin: 0 0 16px; font-size: 0.85rem; } .product-side .info-section h2 { font-size: 0.85rem; font-weight: 600; margin: 0 0 12px; color: var(--cat-color, var(--text)); padding-bottom: 0; border-bottom: none; /* no separator line in the sidebar boxes */ } .product-side .info-section h3 { font-size: 1rem; } .product-side .info-section > :last-child { margin-bottom: 0; } /* sidebar bullet lists (Requirements/Notes): bullets flush left, hanging in the padding so wrapped lines align with the text */ .product-side .info-section ul { margin: 0; padding-left: 0; list-style: none; } .product-side .info-section li { margin: 4px 0; position: relative; padding-left: 18px; } .product-side .info-section li::before { content: '•'; position: absolute; left: 0; } .product-side .info-section p { margin: 0 0 8px; } /* Compatibility: OS entries side by side, icon + name */ .info-section .os-row { display: flex; flex-wrap: wrap; gap: 8px 18px; } .os-tag { display: inline-flex; align-items: center; gap: 6px; } .os-tag svg { opacity: .8; } /* header-only boxes (Bugs / FAQ / Changelog) keep just the title row */ .product-side .info-section h2:only-child { margin-bottom: 0; } .faq-sep { border: none; margin: 14px 0; border-top: 1px solid var(--separator); /* line color from Settings */ } /* Bugs / FAQ / Changelog boxes: a "Show" button in the box header opens the content in a popup; content-size text, category color, action-button hover */ /* last version sits in the header after "Changelog —", formatted like content text (the dash stays outside this span so it keeps the h2 category color) */ .changelog-last { color: var(--text); font-weight: 400; font-size: 0.85rem; } .info-section h2 .show-btn { float: right; background: none; margin-top: -3px; padding: 4px 9px; border: 1px solid var(--cat-color, var(--text)); border-radius: 4px; font-family: inherit; font-size: 0.75rem; font-weight: 600; line-height: 1.4; color: var(--cat-color, var(--text)); cursor: pointer; transition: background .15s ease, color .15s ease; } .info-section h2 .show-btn:hover { background: var(--cat-color, var(--text)); color: #151515; } .pop-modal { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .9); display: flex; align-items: center; justify-content: center; padding: 24px; } .pop-modal .modal-box { position: relative; background: var(--info-box-bg, var(--surface)); border-radius: 8px; border: 1px solid var(--cat-color, var(--text)); max-width: 980px; width: 100%; max-height: 82vh; overflow: auto; padding: 26px 30px; } .pop-modal .modal-box > h2 { margin: 0 0 24px; color: var(--cat-color, var(--text)); font-weight: 600; font-size: 1.3rem; } /* close button styled like the filter chips: category-colored X, fills with the category color (X turns black) on hover */ .pop-modal .modal-close { position: absolute; top: 14px; right: 14px; background: none; border: 1px solid transparent; border-radius: 4px; color: var(--cat-color, var(--text)); font-size: 1.125rem; line-height: 1; padding: 5px 8px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .pop-modal .modal-close:hover { background: var(--cat-color, var(--text)); border-color: var(--cat-color, var(--text)); color: #151515; } /* bugs popup: bullets start flush left, like the FAQ question bullets; the bullet hangs in the padding so wrapped lines align with the text, not under it */ #bugs-modal .modal-box ul { margin: 0; padding-left: 0; list-style: none; } #bugs-modal .modal-box li { position: relative; padding-left: 18px; } #bugs-modal .modal-box li::before { content: '•'; position: absolute; left: 0; } .product-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0 24px; } .product-head .btn-row { margin: 30px 0 0; } /* gap below the title/subtitle */ .product-head h1 { font-size: 2.125rem; line-height: 1.2; margin: 6px 0 8px; font-weight: 400; } /* sidebar thumbnail: same square + global gradient as the grid cards */ .side-thumb { position: relative; /* anchors the LEGACY ribbon overlay */ border-radius: 6px; overflow: hidden; background: linear-gradient(var(--thumb-top), var(--thumb-bottom)); aspect-ratio: 1; max-width: 360px; margin: 6px 0 16px; /* same gap as the boxes below */ } .side-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .subtitle { color: var(--text); font-weight: 600; font-size: 1.0625rem; margin: 0 0 18px; } .btn-row { display: flex; flex-wrap: wrap; gap: 20px; margin: 18px 0; } /* buttons like the original site: colored frame + text, filled with color (text turns black) on hover */ .site-btn { display: inline-block; padding: 6px 13px; border-radius: 4px; border: 1px solid var(--text); background: transparent; color: var(--text); font-weight: 500; letter-spacing: .02em; font-size: 0.95rem; transition: background .15s ease, color .15s ease; } .site-btn:hover { background: var(--text); color: #151515; } .site-btn.primary { border-color: var(--accent); color: var(--accent); background: transparent; } .site-btn.primary:hover { background: var(--accent); color: #151515; } /* product page actions take the product's category color; icon before text */ .product-actions .site-btn { display: inline-flex; align-items: center; gap: 11px; font-weight: 600; font-family: 'Quicksand', sans-serif; /* MANUAL/DEMO/BUY keep the body font */ } .product-actions .site-btn svg { flex-shrink: 0; } .product-actions .site-btn, .product-actions .site-btn.primary { border-color: var(--cat-color, var(--text)); color: var(--cat-color, var(--text)); } .product-actions .site-btn.in-cart, .product-actions .site-btn.in-cart:hover { background: var(--cat-color, var(--text)); color: #151515; } .product-actions .site-btn.pending { opacity: .6; pointer-events: none; } .product-actions .site-btn:hover, .product-actions .site-btn.primary:hover { background: var(--cat-color, var(--text)); color: #151515; } .page-body { margin-top: 18px; } .page-body h2, .info-section h2 { font-size: 1.275rem; margin: 38px 0 12px; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); } .page-body h3, .info-section h3 { font-size: 1rem; margin: 26px 0 8px; } .img-block { margin: 12px 0; text-align: center; } .img-block img { border-radius: 0; } .img-block figcaption, .img-row figcaption { font-size: 0.8125rem; margin-top: 8px; } /* single image block: horizontal align positions the image (and its caption, which stays centered under it) within the full-width column. The figure shrinks to the image's own width as a flex item, so the caption — centered inside the figure — tracks the image instead of the full column width */ .img-align { display: flex; } .img-align .img-block { max-width: 100%; } .img-align.ha-left { justify-content: flex-start; } .img-align.ha-center { justify-content: center; } .img-align.ha-right { justify-content: flex-end; } .img-row { display: grid; gap: 16px; margin: 26px 0; } .img-row.cols-1 { grid-template-columns: 1fr; } .img-row.cols-2 { grid-template-columns: repeat(2, 1fr); } .img-row.cols-3 { grid-template-columns: repeat(3, 1fr); } .img-row.cols-4 { grid-template-columns: repeat(4, 1fr); } /* per-image % widths from the editor (inline --row-cols var; the property lives here so the mobile media-query stacking below still wins) */ .img-row.custom-cols { grid-template-columns: var(--row-cols); } .img-row figure { margin: 0; text-align: center; } .img-row img { border-radius: 0; } /* image grid: N equal columns (--grid-cols, editor field), clicking an image opens the lightbox with previous/next cycling the whole grid */ .img-grid { display: grid; grid-template-columns: repeat(var(--grid-cols, 3), 1fr); gap: 16px; margin: 26px 0; } .img-grid .img-block { margin: 0; text-align: center; } .img-grid img { border-radius: 0; } /* per-image "Rounded corners" option (image, image row, image grid, text+image image column) — same radius as the info boxes (.pop-modal .modal-box) */ .page-body img.rounded { border-radius: 6px; } /* text + image block: mixed columns, widths set per cell via --ti-cols */ .ti-row { display: grid; grid-template-columns: var(--ti-cols, 1fr 1fr); gap: 24px; align-items: center; margin: 12px 0; } .ti-row .img-block { margin: 0; text-align: inherit; } .ti-text > :first-child { margin-top: 0; } .ti-text > :last-child { margin-bottom: 0; } /* per-cell alignment (va-center is the row default via align-items) */ .ti-cell.va-top { align-self: start; } .ti-cell.va-bottom { align-self: end; } .ti-cell.ha-left { text-align: left; } .ti-cell.ha-center { text-align: center; } .ti-cell.ha-right { text-align: right; } /* tabs block: nav buttons like the front-page filter chips, active tab filled with the category color (falls back to accent off product/manual pages, where --cat-color isn't set) */ .tabs-block { margin: 26px 0; } .tabs-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid color-mix(in srgb, var(--text) 15%, transparent); padding-bottom: 12px; } .tab-btn { background: none; border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); color: var(--text); border-radius: 4px; padding: 6px 14px; font-size: 0.95rem; font-family: inherit; cursor: pointer; letter-spacing: .02em; transition: background .15s ease, color .15s ease, border-color .15s ease; } .tab-btn:hover { border-color: var(--cat-color, var(--accent)); color: var(--cat-color, var(--accent)); } .tab-btn.active { background: var(--cat-color, var(--accent)); border-color: var(--cat-color, var(--accent)); color: #151515; font-weight: 600; } /* nested tabs (a Tabs block inside a tab's own content) get a touch less top margin so they don't stack too far from their parent's nav */ .tab-panel .tabs-block { margin-top: 6px; } .yt-lite { position: relative; margin: 26px 0; cursor: pointer; aspect-ratio: 16/9; background: #000; border-radius: 6px; overflow: hidden; } .yt-lite img { width: 100%; height: 100%; object-fit: cover; } .yt-play { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; background: #f00; border-radius: 10px; /* YouTube red, like the real player */ } .yt-play::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; } .yt-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* YouTube row: the grid gap replaces the single block's vertical margin */ .yt-row .yt-lite { margin: 0; } /* single YouTube block: width is 50/100% (inline style), horizontal align positions the box within the full-width column when narrower */ .yt-block { margin: 26px 0; } .yt-block .yt-fig { margin: 0; text-align: center; } .yt-block .yt-lite { margin: 0; } .yt-block.ha-center { margin-left: auto; margin-right: auto; } .yt-block.ha-right { margin-left: auto; } .yt-block .yt-fig figcaption { font-size: 0.8125rem; margin-top: 8px; } /* inline slideshow: one slide visible at a time (site.js toggles [hidden]), arrows overlaid on the image, dots below to jump to a given slide. Standalone block and a text+image column kind share this markup. The track holds only the images (no caption), so top:0/bottom:0 centers the arrows on the image itself, unaffected by caption height. */ .slideshow { position: relative; margin: 26px 0; } .slideshow-track { position: relative; text-align: center; } .slideshow-slide { display: inline-block; border-radius: 6px; max-width: 100%; height: auto; } .slideshow-captions { text-align: center; } .slideshow-caption { font-size: 0.8125rem; margin: 8px 0 0; } .slideshow-arrow { position: absolute; top: 0; bottom: 0; margin: auto 0; height: 36px; width: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0px solid var(--muted); color: var(--text); border-radius: 8px; font-size: 2.6rem; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; } .slideshow-arrow:hover { color: var(--muted); } .slideshow-arrow.prev { left: 10px; } .slideshow-arrow.next { right: 10px; } .slideshow-dots { display: flex; justify-content: center; gap: 8px; margin-top: 15px; } /* inactive: outline only, no fill; hover/active: solid text-color fill */ .slideshow-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--muted); background: transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .slideshow-dot:hover, .slideshow-dot.active { background: var(--text); border-color: var(--text); } /* nested in a text+image column: no vertical margin, matching the text column's own lack of padding */ .ti-row .slideshow { margin: 0; } /* video popup ("play in a popup" videos in a YouTube row) */ #video-modal { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; cursor: zoom-out; } #video-modal .video-box { /* 16:9 box as large as the viewport allows (163vh ≈ 92vh × 16/9) */ width: min(1200px, 94vw, 163vh); aspect-ratio: 16/9; background: #000; cursor: default; } #video-modal iframe { width: 100%; height: 100%; border: 0; } .info-section { margin-top: 8px; } /* question: content text but semibold, with a bullet to set it apart from the answer; the bullet hangs in the padding so wrapped lines align with the text */ .faq-q { color: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.5; position: relative; padding-left: 18px; } .faq-q::before { content: '•'; position: absolute; left: 0; } .faq-a { color: var(--text); } /* version + note: same format as the FAQ question (semibold), no bullet; same gap before the changes list as the FAQ question-to-answer gap */ .changelog-entry h3 { margin: 0 0 12px; color: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.5; } .changelog-entry ul { margin: 0; } .related { margin-top: 56px; } .related h2 { font-size: 1.25rem; margin-bottom: 18px; } .related-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } /* manual */ .toc { background: var(--info-box-bg, var(--surface)); border-radius: 6px; padding: 22px 22px; margin: 40px 0; } .toc ul { margin: 0; padding-left: 20px; } .toc li::marker { color: var(--link); } /* current platform button in the manual switcher: filled like an active pagination button, but in the page's category color */ .product-actions .site-btn.current { background: var(--cat-color, var(--text)); color: #151515; cursor: default; } .manual-section { background: var(--info-box-bg, var(--surface)); border-radius: 6px; padding: 16px 28px 16px; margin: 0 0 24px; } .manual-section:last-child { margin-bottom: 0; } .manual-section > h2:first-child, .manual-section > h3:first-child { margin-top: 0; } /* --------------------------------------------------------------- lightbox */ #lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: zoom-out; } #lightbox img { max-width: 94vw; max-height: 88vh; width: auto; height: auto; } #lightbox .lightbox-caption { color: #fff; font-size: 0.9375rem; text-align: center; max-width: 80vw; margin: 0; } /* previous/next: cycle through the current gallery group (image grid); a single ungrouped image has no siblings to cycle to, so they stay hidden */ .lightbox-arrow { position: fixed; top: 50%; transform: translateY(-50%); z-index: 101; height: 48px; width: 48px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .12); color: #fff; border: none; border-radius: 20%; font-size: 1.75rem; line-height: 1; cursor: pointer; transition: background .15s ease; } .lightbox-arrow:hover { background: rgba(255, 255, 255, .25); } .lightbox-arrow.prev { left: 16px; } .lightbox-arrow.next { right: 16px; } /* ----------------------------------------------------------------- footer */ .site-footer { border-top: 1px solid var(--accent); background: var(--footer-bg); margin-top: 40px; } .footer-inner { max-width: 1560px; margin: 0 auto; padding: 36px 24px 20px; display: flex; flex-wrap: wrap; gap: 90px; } /* bio/newsletter grow twice as eagerly as links, which stays narrower and capped — a fixed grid fraction can't do this per-column since Links may or may not be present depending on settings (footer_bio/newsletter are both conditional), so this needs to be flex, not grid-template-columns */ .footer-col { flex: 2 1 220px; min-width: 0; } .footer-col h4 { margin: 0 0 10px; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); } .footer-col p { margin: 0; font-size: 0.95rem; color: var(--text); } .footer-links { flex: 1 1 140px; max-width: 170px; } .footer-links ul { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; } .footer-links li { margin-bottom: 6px; } /* footer links match the header nav links: same default/hover colors */ .footer-links a { color: var(--text); } .footer-links a:hover { color: var(--link-hover); } /* social icons: under the About bio text; accent color */ .footer-socials { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; padding-top: 10px; font-size: 0.875rem; } .footer-socials a { display: inline-flex; align-items: center; color: var(--accent); transition: transform .15s ease; } .footer-socials a:hover { transform: scale(1.2); } .footer-socials svg { display: block; width: 23px; height: 23px; } .copyright { text-align: center; color: var(--muted); font-size: 0.78125rem; padding: 16px 20px 22px; } /* --------------------------------------------------------------- responsive */ @media (max-width: 960px) { .product { grid-template-columns: 1fr; } .product-side { margin-top: 34px; } } @media (max-width: 720px) { .brand-tagline { display: none; } .site-main { padding: 20px 14px 40px; } .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .product-head h1 { font-size: 1.6875rem; } .img-row.cols-3, .img-row.cols-4 { grid-template-columns: repeat(2, 1fr); } .img-grid { grid-template-columns: repeat(min(var(--grid-cols, 3), 2), 1fr); } .ti-row { grid-template-columns: 1fr; } .filter-controls { flex: 1 1 100%; margin-left: 0; } .filter-controls input[type=search] { min-width: 0; flex: 1; } /* chips become dropdowns on mobile */ #cat-chips, #tag-chips, .filter-tags .filter-label { display: none; } #cat-select { display: block; flex: 1 1 100%; } #tag-select { display: block; width: 100%; } .pagination-top { display: none; } } @media (max-width: 420px) { .img-row.cols-2, .img-row.cols-3, .img-row.cols-4 { grid-template-columns: 1fr; } .img-grid { grid-template-columns: 1fr; } }