:root { --xf-ink: #14171a; --xf-ink-soft: #4b5563; --xf-bg: #ffffff; --xf-card-bg: #f8fafc; --xf-accent: #ea580c; --xf-accent-dark: #c2410c; --xf-border: #e5e7eb; --xf-max: 960px; --xf-hero-max: 1120px; } /* Dark mode: the inline script in (see templates) sets data-theme on before first paint — from a saved xf-theme choice in localStorage, falling back to the browser's prefers-color-scheme. The toggle button then just flips the attribute and persists the choice. */ :root[data-theme="dark"] { --xf-ink: #f3f4f6; --xf-ink-soft: #9aa1ac; --xf-bg: #0d0f13; --xf-card-bg: #171a20; --xf-border: #262a31; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--xf-bg); color: var(--xf-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.55; overflow-x: hidden; } .xf-page { max-width: var(--xf-max); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px) 64px; } .xf-header-row { max-width: var(--xf-hero-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 24px 0 20px; } .xf-logo { display: inline-block; } .xf-logo-img { height: 40px; display: none; } :root:not([data-theme="dark"]) .xf-logo-img--light { display: block; } :root[data-theme="dark"] .xf-logo-img--dark { display: block; } .xf-header-right { display: flex; align-items: center; gap: 16px; } .xf-lang-switch { font-size: 0.85rem; color: var(--xf-ink-soft); text-decoration: underline; } .xf-lang-switch:hover { color: var(--xf-ink); } .xf-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--xf-border); border-radius: 999px; background: var(--xf-card-bg); color: var(--xf-ink-soft); cursor: pointer; } .xf-theme-toggle:hover { color: var(--xf-ink); } .xf-theme-icon { display: none; } :root:not([data-theme="dark"]) .xf-theme-toggle .xf-theme-icon--sun { display: block; } :root[data-theme="dark"] .xf-theme-toggle .xf-theme-icon--moon { display: block; } /* Full-bleed photographic hero, matching the storefront's dark-overlay treatment — hero body copy stretches to the viewport edge like the storefront hero, while everything else stays within .xf-page's max-width. */ .xf-hero-wrap { position: relative; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; min-height: 420px; display: flex; align-items: center; } .xf-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .xf-hero-overlay { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(10, 11, 13, 0.94) 0%, rgba(10, 11, 13, 0.82) 42%, rgba(10, 11, 13, 0.55) 100%); } .xf-hero-content { position: relative; z-index: 1; width: 100%; max-width: var(--xf-hero-max); margin: 0 auto; padding: 72px clamp(20px, 5vw, 56px); } .xf-hero-content h1 { color: #fff; font-size: 2.5rem; line-height: 1.15; margin: 0 0 14px; max-width: 20ch; } .xf-subhead { font-size: 1.1rem; color: var(--xf-ink-soft); margin: 0 0 24px; } .xf-hero-content .xf-subhead { color: rgba(255, 255, 255, 0.82); max-width: 42ch; } .xf-cta { display: inline-block; background: var(--xf-accent); color: #fff; font-weight: 600; font-size: 1.05rem; text-decoration: none; padding: 14px 28px; border-radius: 8px; } .xf-cta:hover { background: var(--xf-accent-dark); } .xf-store-link { display: block; margin-top: 12px; font-size: 0.9rem; color: var(--xf-ink-soft); text-decoration: underline; } .xf-store-link:hover { color: var(--xf-ink); } .xf-hero-content .xf-store-link { color: rgba(255, 255, 255, 0.75); } .xf-hero-content .xf-store-link:hover { color: #fff; } .xf-trust { margin-top: 16px; font-size: 0.85rem; color: var(--xf-ink-soft); } .xf-hero-content .xf-trust { color: rgba(255, 255, 255, 0.65); } .xf-body { margin-top: 40px; padding-top: 8px; } .xf-body h2 { font-size: 1.3rem; margin: 32px 0 8px; } .xf-body p { margin: 0 0 16px; } .xf-body ul { margin: 0 0 16px; padding-left: 20px; } .xf-cross-link-box { margin-top: 24px; padding: 16px 20px; background: var(--xf-card-bg); border: 1px solid var(--xf-border); border-radius: 10px; } .xf-cross-link-box p { margin: 0 0 10px; font-size: 0.9rem; color: var(--xf-ink-soft); } .xf-cross-link-box a { display: inline-block; margin-right: 20px; font-weight: 600; color: var(--xf-accent-dark); text-decoration: none; } .xf-cross-link-box a:hover { text-decoration: underline; } .xf-sample-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 20px 0 32px; } .xf-sample-card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--xf-border); border-radius: 10px; padding: 12px; text-align: center; transition: box-shadow 0.15s, transform 0.15s; } .xf-sample-card:hover { box-shadow: 0 6px 16px rgba(20, 23, 26, 0.1); transform: translateY(-2px); } .xf-sample-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 6px; background: var(--xf-card-bg); margin-bottom: 8px; } .xf-sample-name { font-size: 0.85rem; font-weight: 600; margin: 0 0 2px; } .xf-sample-price { font-size: 0.85rem; color: var(--xf-accent-dark); font-weight: 600; margin: 0; } .xf-express-badge { display: inline-block; background: #dbeafe; color: #1e40af; font-size: 0.8rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; margin-bottom: 16px; } .xf-coming-soon { display: inline-block; background: #fef3c7; color: #92400e; font-size: 0.8rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; margin-bottom: 16px; } .xf-cta-bottom { margin-top: 40px; text-align: center; } .xf-footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--xf-border); font-size: 0.8rem; color: var(--xf-ink-soft); } .xf-footer a { color: var(--xf-ink-soft); }