/* * "px" template — "Index" system, with 3 selectable palette+type themes. * This shell renders AI-generated product/category/article content for a * different niche on every domain, so the identity comes from how content * gets filed and labeled (a card-catalog index), not from any one subject. * Signature shape: a notched index-tab, reused at two scales — as the * eyebrow label on every page and as the small logomark by the site name. * That shape (and its 10px notch) stays constant across all 3 themes below * so a domain still reads as "this template" no matter which palette runs. * * Theming: every color/type value is a custom property. Switching themes is * just swapping the `data-px-theme` attribute on (see * /js/px/theme-switcher.js) — every rule below reads from the properties, * nothing is hardcoded per-component. */ :root, html[data-px-theme="paper"] { --px-bg: #f0f1ea; --px-surface: #ffffff; --px-ink: #1e2a26; --px-ink-soft: #4b564f; --px-ink-rgb: 30, 42, 38; --px-muted: #6b7268; --px-accent: #c1852e; --px-accent-dark: #9c6b23; --px-accent-rgb: 193, 133, 46; --px-accent-2: #2f4c46; --px-accent-2-dark: #223833; --px-accent-2-rgb: 47, 76, 70; --px-line: #d7dad2; --px-shadow-rgb: 30, 42, 38; --px-hairline-rgb: 30, 42, 38; --px-footer-bg: #223833; --px-hero-bg: radial-gradient(circle at 12% 15%, rgba(var(--px-accent-rgb), .16), transparent 45%), repeating-linear-gradient(to bottom, rgba(var(--px-hairline-rgb), .05) 0, rgba(var(--px-hairline-rgb), .05) 1px, transparent 1px, transparent 32px), var(--px-bg); --px-hero-ink: var(--px-ink); --px-hero-ink-soft: var(--px-ink-soft); --px-radius: 10px; --px-radius-sm: 6px; --px-lead-style: italic; --px-font-display: 'Fraunces', serif; --px-font-body: 'IBM Plex Sans', sans-serif; --px-font-mono: 'IBM Plex Mono', monospace; } /* Ledger Night — dark reading-room. Deliberately not near-black-plus-neon: the base is a teal-charcoal (not pure black) and the accent is a warm rust rather than an acid green, so it doesn't collapse into that cliché. */ html[data-px-theme="night"] { --px-bg: #17211e; --px-surface: #1f2b27; --px-ink: #ede7d8; --px-ink-soft: #c9c2ad; --px-ink-rgb: 237, 231, 216; --px-muted: #9a9686; --px-accent: #d97756; --px-accent-dark: #c25f3f; --px-accent-rgb: 217, 119, 86; --px-accent-2: #8fb39d; --px-accent-2-dark: #729480; --px-accent-2-rgb: 143, 179, 157; --px-line: #33403a; --px-shadow-rgb: 0, 0, 0; --px-hairline-rgb: 237, 231, 216; --px-footer-bg: #0f1613; --px-hero-bg: radial-gradient(circle at 18% 0%, rgba(var(--px-accent-rgb), .28), transparent 55%), radial-gradient(circle at 100% 100%, rgba(var(--px-accent-2-rgb), .14), transparent 50%), var(--px-bg); --px-hero-ink: var(--px-ink); --px-hero-ink-soft: var(--px-ink-soft); --px-radius: 4px; --px-radius-sm: 3px; --px-lead-style: italic; --px-font-display: 'Newsreader', serif; --px-font-body: 'Work Sans', sans-serif; --px-font-mono: 'Space Mono', monospace; } /* Field Guide — a topographic-map identity: warm tan "paper" for reading content (distinctly warmer/yellower than Index Paper's cool sage-grey), and a 3-stop moss→gold→clay gradient — like elevation bands on a terrain map — used pervasively across hero, footer, buttons and the tab signature rather than tucked into one corner, so the theme reads as structurally different, not just a recolor of Index Paper. */ html[data-px-theme="field"] { --px-bg: #ece3c8; --px-surface: #fbf7ec; --px-ink: #2b2418; --px-ink-soft: #5a4f3a; --px-ink-rgb: 43, 36, 24; --px-muted: #7d735c; --px-accent: #b5651d; --px-accent-dark: #8f4f16; --px-accent-rgb: 181, 101, 29; --px-accent-2: #55703a; --px-accent-2-dark: #435a2e; --px-accent-2-rgb: 85, 112, 58; --px-line: #d8c9a0; --px-shadow-rgb: 43, 36, 24; --px-hairline-rgb: 43, 36, 24; --px-terrain-gradient: linear-gradient(135deg, #3f4a28 0%, #8c6b26 55%, #93431e 100%); --px-footer-bg: var(--px-terrain-gradient); --px-hero-bg: var(--px-terrain-gradient); --px-hero-ink: #f7f1de; --px-hero-ink-soft: #e4d9b8; --px-radius: 16px; --px-radius-sm: 9px; --px-lead-style: normal; --px-font-display: 'Space Grotesk', sans-serif; --px-font-body: 'Public Sans', sans-serif; --px-font-mono: 'JetBrains Mono', monospace; } :root { --px-white: #ffffff; --px-white-rgb: 255, 255, 255; --px-tab-notch: 10px; } @media (prefers-reduced-motion: reduce) { .px-body * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; } } .px-body :focus-visible { outline: 2px solid var(--px-accent); outline-offset: 2px; } body.px-body { font-family: var(--px-font-body); color: var(--px-ink); background-color: var(--px-bg); min-height: 100vh; display: flex; flex-direction: column; transition: background-color .2s ease, color .2s ease; } .px-body h1, .px-body h2 { font-family: var(--px-font-display); font-weight: 600; color: var(--px-ink); letter-spacing: -0.01em; } .px-body h3, .px-body h4, .px-body h5, .px-body h6 { font-family: var(--px-font-body); font-weight: 600; color: var(--px-ink); } /* ---------- Signature: index-tab eyebrow ---------- One notched-flag shape, reused everywhere a page needs to say what a section is: page-header banners, the hero, and (at small scale) the logomark. Kept out of buttons/cards/chips so it stays a single accent. */ .px-eyebrow { position: relative; display: inline-flex; align-items: center; background: linear-gradient(135deg, var(--px-accent), var(--px-accent-dark)); color: var(--px-ink); font-family: var(--px-font-mono); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.4rem 1.1rem 0.4rem 0.8rem; margin-bottom: 1rem; clip-path: polygon(0 0, calc(100% - var(--px-tab-notch)) 0, 100% 50%, calc(100% - var(--px-tab-notch)) 100%, 0 100%); } html[data-px-theme="night"] .px-eyebrow { color: var(--px-bg); } html[data-px-theme="field"] .px-eyebrow { color: var(--px-surface); } .px-logo-mark { display: inline-block; width: 16px; height: 11px; margin-right: 0.55rem; background: linear-gradient(135deg, var(--px-accent), var(--px-accent-dark)); clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 0 100%); vertical-align: middle; } /* ---------- Top navigation ---------- */ .px-navbar { background-color: var(--px-surface) !important; border-bottom: 1px solid var(--px-line); padding-top: .85rem; padding-bottom: .85rem; } .px-navbar .navbar-brand { font-family: var(--px-font-display); font-weight: 600; font-size: 1.35rem; color: var(--px-ink) !important; display: inline-flex; align-items: center; } .px-navbar .nav-link { color: var(--px-ink-soft) !important; font-weight: 500; padding: .5rem .9rem !important; border-bottom: 2px solid transparent; transition: color .15s ease-in-out, border-color .15s ease-in-out; } .px-navbar .dropdown-toggle { display: inline-flex; align-items: center; } .px-navbar .dropdown-toggle::after { margin-left: .4em; vertical-align: 0; } .px-navbar .nav-link:hover, .px-navbar .nav-link:focus, .px-navbar .nav-link.active { color: var(--px-ink) !important; background-color: transparent !important; border-bottom-color: var(--px-accent); } .px-navbar .dropdown-menu { background-color: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-sm); box-shadow: 0 12px 30px rgba(var(--px-shadow-rgb), .12); padding: .5rem; } .px-navbar .dropdown-item { color: var(--px-ink); border-radius: 4px; padding: .5rem .75rem; font-size: .92rem; } .px-navbar .dropdown-item:hover, .px-navbar .dropdown-item:focus { background-color: rgba(var(--px-accent-rgb), .12); color: var(--px-accent-dark); } .px-navbar .navbar-toggler { border-color: var(--px-line); } /* ---------- Buttons ---------- */ .px-body .btn { font-family: var(--px-font-body); font-weight: 600; border-radius: var(--px-radius-sm); padding: .65rem 1.4rem; } .px-body .btn-primary { background: linear-gradient(135deg, var(--px-accent), var(--px-accent-dark)) !important; border-color: var(--px-accent) !important; color: var(--px-ink) !important; } html[data-px-theme="night"] .px-body .btn-primary { color: var(--px-bg) !important; } html[data-px-theme="field"] .px-body .btn-primary { color: var(--px-surface) !important; } .px-body .btn-primary:hover, .px-body .btn-primary:focus { background: var(--px-accent-dark) !important; border-color: var(--px-accent-dark) !important; color: var(--px-white) !important; } .px-body .btn-outline-primary { background-color: transparent !important; border-color: var(--px-accent-2) !important; color: var(--px-accent-2) !important; } .px-body .btn-outline-primary:hover, .px-body .btn-outline-primary:focus { background-color: var(--px-accent-2) !important; border-color: var(--px-accent-2) !important; color: var(--px-white) !important; } /* ---------- Hero ---------- */ .px-hero { background: var(--px-hero-bg); color: var(--px-hero-ink); padding: 4.5rem 0 5rem; border-bottom: 1px solid var(--px-line); } .px-eyebrow-hero { margin-bottom: 1.5rem; } .px-hero h1 { color: var(--px-hero-ink); font-size: clamp(2.1rem, 4vw, 3.1rem); line-height: 1.12; margin-bottom: 1.1rem; } .px-hero p.lead { font-family: var(--px-font-display); font-style: var(--px-lead-style); font-weight: 500; color: var(--px-hero-ink-soft); font-size: 1.15rem; max-width: 640px; } .px-hero .px-hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .85rem; } .px-hero-stats { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .5rem; } .px-hero-stats .px-chip { background-color: var(--px-surface); border: 1px solid var(--px-line); color: var(--px-ink-soft); font-family: var(--px-font-mono); font-size: .8rem; border-radius: var(--px-radius-sm); padding: .4rem .85rem; } a.px-chip:hover { border-color: var(--px-accent-2); color: var(--px-accent-2); } /* ---------- Page header banner (category/product listing pages) ---------- */ .px-page-header { background-color: var(--px-bg); color: var(--px-ink); border-bottom: 1px solid var(--px-line); padding: 2.75rem 0; } .px-page-header h1, .px-page-header h4 { color: var(--px-ink); } /* ---------- Category showcase rows ---------- */ .px-showcase-row { align-items: center; } .px-showcase-row img { border-radius: var(--px-radius); border: 1px solid var(--px-line); } .px-showcase-row .px-tagline { font-family: var(--px-font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--px-accent-2); } /* ---------- Media frame + panel (product detail page) ---------- */ .px-media-frame { border: 1px solid var(--px-line); border-radius: var(--px-radius); } .px-panel { background-color: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius); } .px-price-label { font-family: var(--px-font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--px-muted); } .px-price { font-family: var(--px-font-mono); font-weight: 600; color: var(--px-ink); } .px-price-was { font-family: var(--px-font-mono); font-size: .82rem; color: var(--px-muted); text-decoration: line-through; } .px-price--sale { color: var(--px-accent-dark); } /* ---------- Cards (products / articles) ---------- */ .px-body .card { border: 1px solid var(--px-line); border-radius: var(--px-radius); background-color: var(--px-surface); box-shadow: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; overflow: hidden; } .px-body .card:hover { transform: translateY(-3px); border-color: var(--px-accent); box-shadow: 0 10px 24px rgba(var(--px-shadow-rgb), .12); } .px-body .card-title a { color: var(--px-ink); } .px-body .card-title a:hover { color: var(--px-accent-dark); } .px-body .card-body { color: var(--px-ink-soft); } .px-body .card-text { color: var(--px-ink-soft); } /* ---------- Long-form content blocks (AI-generated prose) ---------- Shared across category, about, contact, terms, privacy, buy-this-domain and article pages so the AI-generated copy always reads the same way, regardless of which wrapper class the block uses. */ .px-prose p, .px-article p, .about-us p, .contact-us p, .terms-content p, .privacy-content p, .home-content p { color: var(--px-ink-soft); font-size: 1rem; line-height: 1.75; margin-bottom: 1.25rem; } .px-prose p:last-child, .px-article p:last-child, .about-us p:last-child, .contact-us p:last-child, .terms-content p:last-child, .privacy-content p:last-child, .home-content p:last-child { margin-bottom: 0; } /* !important below: the AI-generated content ships its own Bootstrap spacing utilities (mt-4, mt-5, my-4, ...) inconsistently from one piece of content to the next, and those utility classes are !important themselves — so without it, heading spacing would vary article to article/page to page depending on what the AI happened to output. */ .px-article h1 { margin-top: 0 !important; margin-bottom: 1.5rem !important; } .px-article h2, .about-us h2, .contact-us h2, .terms-content h2, .privacy-content h2, .home-content h2 { font-size: 1.3rem; margin-top: 1.75rem !important; margin-bottom: 1rem !important; padding-top: 1.5rem; border-top: 1px solid var(--px-line); } .px-article h3, .about-us h3, .contact-us h3, .terms-content h3, .privacy-content h3, .home-content h3 { font-size: 1.1rem; color: var(--px-accent-2); margin-top: 1.25rem !important; margin-bottom: .75rem !important; } /* The AI-generated contact intro sometimes includes its own

title; the page already renders one in .px-page-header, so hide the duplicate. */ .contact-us h1 { display: none; } /* ---------- Section heading above a product grid ---------- */ .px-section-title { display: flex; align-items: center; gap: .75rem; font-size: 1.25rem; margin-bottom: 1.5rem; } .px-count-badge { background-color: var(--px-bg); border: 1px solid var(--px-line); color: var(--px-muted); font-family: var(--px-font-mono); font-weight: 600; font-size: .8rem; border-radius: var(--px-radius-sm); padding: .25rem .7rem; } /* ---------- FAQ content (AI-generated Q&A) ---------- */ .faq-content section { margin-bottom: 2.75rem; } .faq-content section:last-child { margin-bottom: 0; } .faq-content h2 { font-size: 1.3rem; color: var(--px-ink); padding-bottom: .6rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--px-accent); display: inline-block; } .faq-content h3 { background-color: var(--px-surface); border: 1px solid var(--px-line); border-left: 4px solid var(--px-accent-2); border-radius: var(--px-radius) var(--px-radius) 0 0; padding: 1rem 1.25rem; margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--px-ink); } .faq-content h3 + p { background-color: var(--px-surface); border: 1px solid var(--px-line); border-left: 4px solid var(--px-accent-2); border-top: none; border-radius: 0 0 var(--px-radius) var(--px-radius); padding: 0 1.25rem 1.25rem; margin: 0 0 1.25rem; color: var(--px-ink-soft); line-height: 1.6; } /* ---------- Article content (AI-generated long-form article) ---------- */ .px-article .lead { color: var(--px-ink-soft); line-height: 1.6; } .px-article a { color: var(--px-accent-2); font-weight: 600; text-decoration-color: rgba(var(--px-accent-2-rgb), .35); } .px-article a:hover { color: var(--px-accent-dark); } .px-article img { display: block; max-width: 100%; height: auto; margin: 2rem auto; border: 1px solid var(--px-line); border-radius: var(--px-radius); box-shadow: 0 8px 24px rgba(var(--px-shadow-rgb), .1); } .px-article ul, .px-article ol { line-height: 1.8; color: var(--px-ink); margin-bottom: 1.25rem; } /* ---------- Footer ---------- */ .px-footer { background: var(--px-footer-bg); color: rgba(var(--px-white-rgb), .75); margin-top: auto; padding: 3.5rem 0 1.5rem; } .px-footer h6 { color: var(--px-white); text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; margin-bottom: 1rem; } .px-footer a { color: rgba(var(--px-white-rgb), .7); text-decoration: none; } .px-footer a:hover { color: var(--px-white); } .px-footer .px-footer-brand { font-family: var(--px-font-display); font-weight: 600; color: var(--px-white); font-size: 1.2rem; display: flex; align-items: center; } .px-footer .px-footer-bottom { border-top: 1px solid rgba(var(--px-white-rgb), .12); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .85rem; color: rgba(var(--px-white-rgb), .55); } .grecaptcha-badge { display: none !important; } img.bb-img { float: right; margin: 10px; max-height: 240px; border-radius: var(--px-radius); } h2.bb-h2 { clear: both; } /* ---------- Theme switcher widget ---------- */ .px-theme-widget { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1050; font-family: var(--px-font-body); } .px-theme-toggle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--px-line); background-color: var(--px-surface); box-shadow: 0 6px 18px rgba(var(--px-shadow-rgb), .2); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .px-theme-toggle-icon { position: relative; width: 20px; height: 20px; display: inline-block; } .px-theme-toggle-icon i { position: absolute; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); } .px-theme-toggle-icon i:nth-child(1) { background: #c1852e; top: 0; left: 3px; } .px-theme-toggle-icon i:nth-child(2) { background: #2f4c46; bottom: 0; left: 0; } .px-theme-toggle-icon i:nth-child(3) { background: #d97756; bottom: 0; right: 0; } .px-theme-panel { position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 190px; background-color: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-sm); box-shadow: 0 14px 34px rgba(var(--px-shadow-rgb), .2); padding: .6rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; } .px-theme-widget:hover .px-theme-panel, .px-theme-widget:focus-within .px-theme-panel, .px-theme-widget.is-open .px-theme-panel { opacity: 1; visibility: visible; transform: translateY(0); } .px-theme-panel-title { font-family: var(--px-font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--px-muted); margin: 0 0 .5rem; padding: 0 .3rem; } .px-theme-swatch { display: flex; align-items: center; gap: .6rem; width: 100%; border: 1px solid transparent; background: none; border-radius: var(--px-radius-sm); padding: .45rem .5rem; cursor: pointer; color: var(--px-ink); font-size: .85rem; text-align: left; } .px-theme-swatch:hover, .px-theme-swatch:focus-visible { background-color: var(--px-bg); border-color: var(--px-line); } .px-theme-swatch[aria-pressed="true"] { border-color: var(--px-accent); } .px-theme-swatch-preview { width: 26px; height: 18px; border-radius: 4px; flex: none; border: 1px solid rgba(0, 0, 0, .12); } .px-theme-swatch-preview--paper { background: linear-gradient(135deg, #f0f1ea 50%, #c1852e 50%); } .px-theme-swatch-preview--night { background: linear-gradient(135deg, #17211e 50%, #d97756 50%); } .px-theme-swatch-preview--field { background: linear-gradient(135deg, #3f4a28 0%, #8c6b26 55%, #93431e 100%); } @media (max-width: 768px) { img.bb-img { float: none; margin: 0; max-height: 100%; } h2.bb-h2 { clear: none; } .px-showcase-row .row { flex-direction: column !important; } .px-theme-widget { right: .85rem; bottom: .85rem; } }