/wire-template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ArtSabers — The Archive v2</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
/* ========================================
CSS CUSTOM PROPERTIES
======================================== */
:root {
--bg-primary: #131313;
--bg-void: #0E0E0E;
--surface-card: #1C1B1B;
--surface-tertiary: #201F1F;
--surface-hover: #2A2A2A;
--surface-float: #353534;
--accent-peach: #FF9C80;
--accent-peach-light: #FFC4B4;
--text-primary: #E5E2E1;
--text-secondary: #DAC1BB;
--outline: #A28C86;
--ghost: #54433E;
--ghost-border: rgba(84, 67, 62, 0.18);
--font-heading: 'Space Grotesk', sans-serif;
--font-body: 'Manrope', sans-serif;
--font-mono: 'Space Mono', monospace;
}
/* ========================================
RESET & BASE
======================================== */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-body);
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
/* ========================================
UTILITY
======================================== */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
/* ========================================
SCROLL REVEAL — elements hidden until observed
======================================== */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.revealed {
opacity: 1;
transform: translateY(0);
}
.reveal-left {
opacity: 0;
transform: translateX(-40px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-left.revealed {
opacity: 1;
transform: translateX(0);
}
/* Staggered children */
.stagger > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger.revealed > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.stagger.revealed > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.stagger.revealed > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.stagger.revealed > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.stagger.revealed > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.stagger.revealed > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
/* ========================================
SECTION HEADER PATTERN
======================================== */
.section-header {
margin-bottom: 48px;
}
.section-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 3px;
color: var(--accent-peach);
margin-bottom: 12px;
opacity: 0;
transform: translateX(-30px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.section-header.revealed .section-label {
opacity: 1;
transform: translateX(0);
}
.section-title {
font-family: var(--font-heading);
font-size: clamp(28px, 4vw, 42px);
font-weight: 700;
letter-spacing: -0.5px;
text-transform: uppercase;
color: var(--text-primary);
margin-bottom: 16px;
opacity: 0;
transform: translateY(15px);
transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}
.section-header.revealed .section-title {
opacity: 1;
transform: translateY(0);
}
.section-line {
width: 0;
height: 2px;
background: var(--accent-peach);
transition: width 0.6s ease 0.35s;
}
.section-header.revealed .section-line {
width: 20%;
}
/* ========================================
1. PROMO BAR
======================================== */
.promo-bar {
background: var(--bg-void);
overflow: hidden;
white-space: nowrap;
padding: 10px 0;
border-bottom: 1px solid var(--ghost-border);
}
.promo-track {
display: inline-flex;
animation: promoScroll 30s linear infinite;
}
.promo-track span {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 2px;
color: var(--accent-peach);
padding: 0 40px;
text-transform: uppercase;
}
@keyframes promoScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ========================================
2. NAV BAR
======================================== */
.navbar {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(19, 19, 19, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--ghost-border);
padding: 0 0;
}
.navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
.nav-logo {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-primary);
}
.nav-links {
display: flex;
gap: 32px;
list-style: none;
}
.nav-links a {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
letter-spacing: 0.5px;
transition: color 0.25s ease;
}
.nav-links a:hover {
color: var(--accent-peach);
}
.nav-actions {
display: flex;
align-items: center;
gap: 20px;
}
.nav-icon {
color: var(--text-secondary);
font-size: 14px;
cursor: pointer;
transition: color 0.25s ease;
position: relative;
font-family: var(--font-body);
font-weight: 500;
}
.nav-icon:hover {
color: var(--accent-peach-light);
}
.cart-count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent-peach);
}
/* Mobile menu toggle */
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--text-primary);
transition: transform 0.3s ease;
}
/* ========================================
3. HERO — SPLIT LAYOUT
======================================== */
.hero {
position: relative;
min-height: 85vh;
display: flex;
align-items: center;
padding: 80px 0;
overflow: hidden;
}
/* Grid dot background */
.hero::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, var(--ghost) 1px, transparent 1px);
background-size: 30px 30px;
opacity: 0.03;
pointer-events: none;
}
.hero .container {
display: grid;
grid-template-columns: 55% 45%;
align-items: center;
gap: 40px;
position: relative;
z-index: 1;
}
.hero-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.hero-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 4px;
color: var(--accent-peach);
text-transform: uppercase;
margin-bottom: 20px;
}
.hero-headline {
font-family: var(--font-heading);
font-size: clamp(36px, 5.5vw, 72px);
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--text-primary);
margin-bottom: 20px;
line-height: 1.1;
}
/* Typing / scanning animation */
.hero-headline .typing-text {
display: inline-block;
border-right: 3px solid var(--accent-peach);
animation: typing 2.5s steps(18) 0.5s forwards, cursorBlink 0.8s step-end infinite;
overflow: hidden;
white-space: nowrap;
width: 0;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes cursorBlink {
50% { border-color: transparent; }
}
.hero-sub {
font-family: var(--font-body);
font-size: 15px;
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 36px;
max-width: 460px;
}
/* Search bar */
.hero-search {
width: 100%;
max-width: 480px;
position: relative;
}
.hero-search input {
width: 100%;
padding: 16px 24px;
padding-right: 50px;
background: var(--surface-card);
border: 1px solid var(--ghost-border);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 14px;
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.hero-search input::placeholder {
color: var(--ghost);
font-style: italic;
}
.hero-search input:focus {
border-color: var(--accent-peach);
box-shadow: 0 0 20px rgba(255, 156, 128, 0.1);
}
.hero-search-icon {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
color: var(--ghost);
font-size: 16px;
}
/* Specimen display — right side */
.hero-specimen {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.specimen {
position: relative;
width: 100%;
max-width: 520px;
}
.specimen-image {
width: 100%;
aspect-ratio: 3 / 4;
background: var(--surface-card);
border: 1px solid var(--ghost-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 13px;
color: var(--ghost);
letter-spacing: 2px;
}
/* Floating metadata labels */
.specimen-label {
position: absolute;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 1.5px;
color: var(--accent-peach);
background: rgba(19, 19, 19, 0.85);
padding: 6px 12px;
border: 1px solid rgba(255, 156, 128, 0.2);
white-space: nowrap;
animation: labelFlicker 4s ease-in-out infinite;
}
.specimen-label:nth-child(2) { top: 8%; left: -12%; animation-delay: 0s; }
.specimen-label:nth-child(3) { top: 32%; right: -14%; animation-delay: 0.7s; }
.specimen-label:nth-child(4) { bottom: 30%; left: -10%; animation-delay: 1.4s; }
.specimen-label:nth-child(5) { bottom: 10%; right: -12%; animation-delay: 2.1s; }
@keyframes labelFlicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* ========================================
4. TRUST BAR
======================================== */
.trust-bar {
background: var(--bg-void);
border-top: 1px solid var(--ghost-border);
border-bottom: 1px solid var(--ghost-border);
padding: 28px 0;
}
.trust-bar .container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.trust-metric {
text-align: center;
padding: 0 16px;
border-right: 1px solid var(--ghost-border);
}
.trust-metric:last-child {
border-right: none;
}
.trust-metric-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 2px;
color: var(--ghost);
text-transform: uppercase;
margin-bottom: 6px;
}
.trust-metric-value {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 1px;
}
.trust-metric-value .peach {
color: var(--accent-peach);
}
/* ========================================
5. SECTION 01 — CLASSIFICATION
======================================== */
.section {
padding: 96px 0;
}
.section--alt {
background: var(--bg-void);
}
.tier-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.tier-card {
background: var(--surface-card);
border: 1px solid var(--ghost-border);
padding: 32px 24px;
position: relative;
overflow: hidden;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tier-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent-peach);
}
.tier-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(255, 156, 128, 0.08);
}
.tier-name {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-primary);
margin-bottom: 8px;
}
.tier-price {
font-family: var(--font-mono);
font-size: 13px;
color: var(--accent-peach);
margin-bottom: 16px;
}
.tier-desc {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 24px;
}
.tier-link {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 600;
color: var(--accent-peach);
letter-spacing: 1px;
transition: color 0.25s ease;
}
.tier-link:hover {
color: var(--accent-peach-light);
}
/* ========================================
6 & 8. PRODUCT CARDS
======================================== */
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.product-card {
background: var(--surface-card);
border: 1px solid var(--ghost-border);
overflow: hidden;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(255, 156, 128, 0.08);
}
.product-image {
aspect-ratio: 1 / 1;
background: var(--surface-tertiary);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ghost);
letter-spacing: 2px;
position: relative;
overflow: hidden;
}
/* Saber silhouette in image placeholder — hidden when real image present */
.product-image::after {
content: '';
position: absolute;
width: 60%;
height: 3px;
background: linear-gradient(90deg, var(--ghost-border), rgba(84, 67, 62, 0.06));
transform: rotate(-30deg);
top: 50%;
left: 20%;
pointer-events: none;
}
.product-image:has(img)::after {
display: none;
}
.product-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.product-badge {
position: absolute;
top: 12px;
left: 12px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 1.5px;
padding: 4px 10px;
background: var(--accent-peach);
color: var(--bg-primary);
font-weight: 700;
}
.product-info {
padding: 20px;
}
.product-name {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.product-rating {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.stars {
color: var(--accent-peach);
font-size: 13px;
letter-spacing: 1px;
}
.review-count {
font-size: 12px;
color: var(--text-secondary);
}
.product-price {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
}
.product-stock {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-family: var(--font-mono);
color: #6BCB77;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 16px;
}
.stock-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #6BCB77;
display: inline-block;
}
.btn-quick-view {
display: block;
width: 100%;
padding: 10px 0;
text-align: center;
font-family: var(--font-heading);
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent-peach);
background: transparent;
border: 1px solid rgba(255, 156, 128, 0.25);
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease;
}
.btn-quick-view:hover {
background: var(--accent-peach);
color: var(--bg-primary);
}
/* ========================================
7. BROWSE BY ORIGIN
======================================== */
.origin-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.origin-card {
background: var(--surface-card);
border: 1px solid var(--ghost-border);
padding: 48px 32px;
text-align: center;
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.origin-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(255, 156, 128, 0.06);
}
/* Subtle background pattern */
.origin-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 156, 128, 0.02), transparent 60%);
pointer-events: none;
}
.origin-name {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-primary);
margin-bottom: 10px;
}
.origin-count {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 2px;
color: var(--text-secondary);
text-transform: uppercase;
}
/* ========================================
9. SYSTEM STATUS — FULL-WIDTH DASHBOARD
======================================== */
.system-dashboard {
width: 100%;
}
.dashboard-panels {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 28px;
}
.dashboard-panel {
background: var(--surface-card);
border: 1px solid var(--ghost-border);
padding: 32px 24px;
text-align: center;
position: relative;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.dashboard-panel:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(255, 156, 128, 0.06);
}
.dashboard-panel-value {
font-family: var(--font-heading);
font-size: clamp(22px, 2.5vw, 32px);
font-weight: 700;
color: var(--text-primary);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.dashboard-panel-value--online {
color: #6BCB77;
}
.dashboard-panel-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 2.5px;
color: var(--ghost);
text-transform: uppercase;
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #6BCB77;
display: inline-block;
flex-shrink: 0;
animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(107, 203, 119, 0.4); }
50% { box-shadow: 0 0 0 8px rgba(107, 203, 119, 0); }
}
.dashboard-body {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
background: var(--surface-card);
border: 1px solid var(--ghost-border);
padding: 28px 32px;
}
.dashboard-body-text {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.7;
flex: 1;
}
.btn-dashboard-cta {
display: inline-block;
padding: 14px 28px;
background: var(--accent-peach);
border: none;
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--bg-primary);
cursor: pointer;
transition: background 0.25s ease;
white-space: nowrap;
flex-shrink: 0;
}
.btn-dashboard-cta:hover {
background: var(--accent-peach-light);
}
/* ========================================
10. USER FEEDBACK
======================================== */
.review-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 48px;
}
.review-card {
background: var(--surface-card);
border: 1px solid var(--ghost-border);
padding: 32px 24px;
}
.review-stars {
color: var(--accent-peach);
font-size: 14px;
letter-spacing: 2px;
margin-bottom: 16px;
}
.review-text {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 20px;
font-style: italic;
}
.review-author {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 1px;
}
.trustpilot-badge {
text-align: center;
padding: 24px;
border: 1px solid var(--ghost-border);
background: var(--surface-tertiary);
}
.trustpilot-badge p {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 1px;
}
.trustpilot-badge span {
color: var(--accent-peach);
}
/* ========================================
11. ABOUT
======================================== */
.about-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.about-text p {
font-size: 16px;
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 28px;
}
.about-cta {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 600;
color: var(--accent-peach);
letter-spacing: 1px;
transition: color 0.25s ease;
}
.about-cta:hover {
color: var(--accent-peach-light);
}
.about-image {
aspect-ratio: 4 / 3;
background: var(--surface-card);
border: 1px solid var(--ghost-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ghost);
letter-spacing: 2px;
}
/* ========================================
12. SUBSCRIBE
======================================== */
.subscribe {
padding: 80px 0;
text-align: center;
}
.subscribe-heading {
font-family: var(--font-heading);
font-size: clamp(22px, 3vw, 32px);
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-primary);
margin-bottom: 12px;
}
.subscribe-sub {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 36px;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.subscribe-form {
display: flex;
max-width: 480px;
margin: 0 auto;
border: 1px solid var(--ghost-border);
overflow: hidden;
}
.subscribe-form input {
flex: 1;
padding: 14px 20px;
background: var(--surface-card);
border: none;
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 13px;
outline: none;
}
.subscribe-form input::placeholder {
color: var(--ghost);
}
.subscribe-form input:focus {
box-shadow: inset 0 0 0 1px var(--accent-peach);
}
.subscribe-btn {
padding: 14px 28px;
background: var(--accent-peach);
border: none;
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--bg-primary);
cursor: pointer;
transition: background 0.25s ease;
}
.subscribe-btn:hover {
background: var(--accent-peach-light);
}
/* Terminal prompt styling */
.subscribe-prompt {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 2px;
color: var(--ghost);
margin-bottom: 20px;
}
.subscribe-prompt span {
color: var(--accent-peach);
}
/* ========================================
13. FOOTER
======================================== */
.footer {
background: var(--bg-void);
border-top: 1px solid var(--ghost-border);
padding: 64px 0 32px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
margin-bottom: 48px;
}
.footer-col-title {
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-primary);
margin-bottom: 20px;
}
.footer-col ul {
list-style: none;
}
.footer-col li {
margin-bottom: 10px;
}
.footer-col a {
font-size: 13px;
color: var(--text-secondary);
transition: color 0.25s ease;
}
.footer-col a:hover {
color: var(--accent-peach);
}
.footer-bottom {
border-top: 1px solid var(--ghost-border);
padding-top: 28px;
text-align: center;
}
.payment-icons {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 2px;
color: var(--text-secondary);
margin-bottom: 16px;
}
.nerdworks-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 2px;
color: var(--ghost);
border: 1px solid var(--ghost-border);
padding: 6px 14px;
text-transform: uppercase;
margin-bottom: 12px;
}
.footer-copy {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 1.5px;
color: var(--ghost);
text-transform: uppercase;
}
/* ========================================
PEACH GLOW PULSE
======================================== */
.glow-pulse {
animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
0%, 100% { text-shadow: 0 0 0 transparent; }
50% { text-shadow: 0 0 12px rgba(255, 156, 128, 0.3); }
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 1024px) {
.tier-grid,
.product-grid {
grid-template-columns: repeat(2, 1fr);
}
.origin-grid {
grid-template-columns: repeat(2, 1fr);
}
.dashboard-panels {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.container {
padding: 0 20px;
}
.nav-links {
display: none;
}
.nav-toggle {
display: flex;
}
.hero {
min-height: auto;
padding: 60px 0;
}
.hero .container {
grid-template-columns: 1fr;
gap: 48px;
}
.hero-content {
align-items: flex-start;
text-align: left;
}
.hero-headline {
font-size: clamp(28px, 8vw, 48px);
letter-spacing: 3px;
}
.hero-search {
max-width: 100%;
}
.specimen {
max-width: 360px;
margin: 0 auto;
}
.specimen-label {
display: none;
}
.trust-bar .container {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.trust-metric {
border-right: none;
padding: 8px;
}
.tier-grid,
.product-grid {
grid-template-columns: 1fr;
}
.origin-grid {
grid-template-columns: 1fr;
}
.review-grid {
grid-template-columns: 1fr;
}
.about-split {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
.section {
padding: 64px 0;
}
.dashboard-panels {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.dashboard-panel {
padding: 24px 16px;
}
.dashboard-panel-value {
font-size: 18px;
}
.dashboard-body {
flex-direction: column;
text-align: center;
padding: 24px 20px;
gap: 20px;
}
.subscribe-form {
flex-direction: column;
}
.subscribe-btn {
width: 100%;
}
}
@media (max-width: 480px) {
.trust-bar .container {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
}
.dashboard-panels {
grid-template-columns: 1fr;
}
}
/* ========================================
PRINT STYLES
======================================== */
@media print {
.promo-bar,
.navbar,
.subscribe,
.hero-search {
display: none;
}
.footer {
padding: 20px 0;
}
.footer-grid {
display: none;
}
body {
background: white;
color: black;
}
}
</style>
</head>
<body>
<!-- ==========================================
1. PROMO BAR
========================================== -->
<div class="promo-bar">
<div class="promo-track">
<span>FREE SHIPPING ON ALL ORDERS</span>
<span>•</span>
<span>NEW DROPS EVERY WEEK</span>
<span>•</span>
<span>ORDER BY 2PM — SHIPS TODAY</span>
<span>•</span>
<span>FREE SHIPPING ON ALL ORDERS</span>
<span>•</span>
<span>NEW DROPS EVERY WEEK</span>
<span>•</span>
<span>ORDER BY 2PM — SHIPS TODAY</span>
<span>•</span>
<span>FREE SHIPPING ON ALL ORDERS</span>
<span>•</span>
<span>NEW DROPS EVERY WEEK</span>
<span>•</span>
<span>ORDER BY 2PM — SHIPS TODAY</span>
<span>•</span>
<span>FREE SHIPPING ON ALL ORDERS</span>
<span>•</span>
<span>NEW DROPS EVERY WEEK</span>
<span>•</span>
<span>ORDER BY 2PM — SHIPS TODAY</span>
<span>•</span>
</div>
</div>
<!-- ==========================================
2. NAV BAR
========================================== -->
<nav class="navbar">
<div class="container">
<a href="#" class="nav-logo">ArtSabers</a>
<ul class="nav-links">
<li><a href="#">Lightsabers</a></li>
<li><a href="#">Helmets</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Offers & Deals</a></li>
<li><a href="#">Blog</a></li>
</ul>
<div class="nav-actions">
<span class="nav-icon" title="Search">⚲</span>
<span class="nav-icon" title="Account">⚭</span>
<span class="nav-icon" title="Wishlist">♡</span>
<span class="nav-icon" title="Cart">☰ <span class="cart-count">(3)</span></span>
</div>
<div class="nav-toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<!-- ==========================================
3. HERO — SPLIT LAYOUT
========================================== -->
<section class="hero" id="hero">
<div class="container">
<div class="hero-content">
<div class="hero-label reveal-left">CLASSIFIED WEAPONS DATABASE</div>
<h1 class="hero-headline">
<span class="typing-text glow-pulse">ACCESS THE ARCHIVE</span>
</h1>
<p class="hero-sub reveal">Search over 2,000 classified lightsaber replicas. Every specimen inspected, catalogued, and ready for immediate dispatch from the US warehouse.</p>
<div class="hero-search reveal">
<input type="text" placeholder="Search the archive...">
<span class="hero-search-icon">⌕</span>
</div>
</div>
<div class="hero-specimen">
<div class="specimen reveal">
<div class="specimen-image" style="background: transparent; border: none;">
<img src="https://camcom.dev/wp-content/uploads/2026/04/obi-wan-ep4.jpg" alt="Obi-Wan Kenobi EP4 Lightsaber" loading="lazy" style="width: 100%; height: 100%; object-fit: contain;">
</div>
<div class="specimen-label">SKU: LS-TXQ001</div>
<div class="specimen-label">ORIGIN: JEDI ORDER</div>
<div class="specimen-label">BLADE: NEOPIXEL</div>
<div class="specimen-label">RATING: 4.9★</div>
</div>
</div>
</div>
</section>
<!-- ==========================================
4. TRUST BAR
========================================== -->
<div class="trust-bar">
<div class="container stagger reveal">
<div class="trust-metric">
<div class="trust-metric-label">Trustpilot</div>
<div class="trust-metric-value"><span class="peach">5.0★</span> Excellent</div>
</div>
<div class="trust-metric">
<div class="trust-metric-label">Units Archived</div>
<div class="trust-metric-value">2,000+</div>
</div>
<div class="trust-metric">
<div class="trust-metric-label">Shipping</div>
<div class="trust-metric-value">Free Express</div>
</div>
<div class="trust-metric">
<div class="trust-metric-label">Guarantee</div>
<div class="trust-metric-value">30 Days</div>
</div>
</div>
</div>
<!-- ==========================================
5. SECTION 01 — CLASSIFICATION
========================================== -->
<section class="section">
<div class="container">
<div class="section-header reveal">
<div class="section-label">SECTION_01</div>
<h2 class="section-title">Classification</h2>
<div class="section-line"></div>
</div>
<p style="font-size: 15px; color: var(--text-secondary); margin-bottom: 40px; max-width: 560px;" class="reveal">Choose your path. Every tier delivers uncompromising quality — the difference is depth of customisation.</p>
<div class="tier-grid stagger reveal">
<div class="tier-card">
<div class="tier-name">Base Lit</div>
<div class="tier-price">From $89</div>
<div class="tier-desc">Heavy duelling, 12 preset colours</div>
<a href="#" class="tier-link">Browse →</a>
</div>
<div class="tier-card">
<div class="tier-name">S-RGB</div>
<div class="tier-price">From $149</div>
<div class="tier-desc">Smooth swing, 12 colours, sound fonts</div>
<a href="#" class="tier-link">Browse →</a>
</div>
<div class="tier-card">
<div class="tier-name">Xenopixel</div>
<div class="tier-price">From $299</div>
<div class="tier-desc">Pixel blade, 34 fonts, Bluetooth</div>
<a href="#" class="tier-link">Browse →</a>
</div>
<div class="tier-card">
<div class="tier-name">Proffie</div>
<div class="tier-price">From $499</div>
<div class="tier-desc">Fully programmable, infinite colours</div>
<a href="#" class="tier-link">Browse →</a>
</div>
</div>
</div>
</section>
<!-- ==========================================
6. SECTION 02 — MOST ACCESSED
========================================== -->
<section class="section section--alt">
<div class="container">
<div class="section-header reveal">
<div class="section-label">SECTION_02</div>
<h2 class="section-title">Most Accessed</h2>
<div class="section-line"></div>
</div>
<div class="product-grid stagger reveal">
<div class="product-card">
<div class="product-image">
<img src="https://camcom.dev/wp-content/uploads/2026/04/ahsoka-tano.jpg" alt="Ahsoka Tano" loading="lazy" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #1C1B1B;">
</div>
<div class="product-info">
<div class="product-name">Ahsoka Tano</div>
<div class="product-rating">
<span class="stars">★★★★★</span>
<span class="review-count">4.8 (127 reviews)</span>
</div>
<div class="product-price">$534.99</div>
<div class="product-stock"><span class="stock-dot"></span> In Stock</div>
<button class="btn-quick-view">Quick View</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://camcom.dev/wp-content/uploads/2026/04/starkiller-se.jpg" alt="Starkiller SE" loading="lazy" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #1C1B1B;">
</div>
<div class="product-info">
<div class="product-name">Starkiller SE</div>
<div class="product-rating">
<span class="stars">★★★★★</span>
<span class="review-count">4.9 (89 reviews)</span>
</div>
<div class="product-price">$449.99</div>
<div class="product-stock"><span class="stock-dot"></span> In Stock</div>
<button class="btn-quick-view">Quick View</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://camcom.dev/wp-content/uploads/2026/04/darth-vader-rotj.jpg" alt="Darth Vader ROTJ" loading="lazy" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #1C1B1B;">
</div>
<div class="product-info">
<div class="product-name">Darth Vader ROTJ</div>
<div class="product-rating">
<span class="stars">★★★★☆</span>
<span class="review-count">4.7 (203 reviews)</span>
</div>
<div class="product-price">$619.99</div>
<div class="product-stock"><span class="stock-dot"></span> In Stock</div>
<button class="btn-quick-view">Quick View</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://camcom.dev/wp-content/uploads/2026/04/mace-windu-se.jpg" alt="Mace Windu SE" loading="lazy" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #1C1B1B;">
</div>
<div class="product-info">
<div class="product-name">Mace Windu SE</div>
<div class="product-rating">
<span class="stars">★★★★★</span>
<span class="review-count">4.8 (156 reviews)</span>
</div>
<div class="product-price">$499.99</div>
<div class="product-stock"><span class="stock-dot"></span> In Stock</div>
<button class="btn-quick-view">Quick View</button>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================
7. SECTION 03 — BROWSE BY ORIGIN
========================================== -->
<section class="section">
<div class="container">
<div class="section-header reveal">
<div class="section-label">SECTION_03</div>
<h2 class="section-title">Browse by Origin</h2>
<div class="section-line"></div>
</div>
<div class="origin-grid stagger reveal">
<div class="origin-card" style="background: linear-gradient(rgba(19,19,19,0.7), rgba(19,19,19,0.85)), url('https://camcom.dev/wp-content/uploads/2026/04/spotlight.jpg'); background-size: cover; background-position: center;">
<div class="origin-name">Jedi</div>
<div class="origin-count">142 archived</div>
</div>
<div class="origin-card" style="background: linear-gradient(rgba(19,19,19,0.7), rgba(19,19,19,0.85)), url('https://camcom.dev/wp-content/uploads/2026/04/smoke-atmosphere.jpg'); background-size: cover; background-position: center;">
<div class="origin-name">Sith</div>
<div class="origin-count">98 archived</div>
</div>
<div class="origin-card" style="background: linear-gradient(rgba(19,19,19,0.7), rgba(19,19,19,0.85)), url('https://camcom.dev/wp-content/uploads/2026/04/tech-dark.jpg'); background-size: cover; background-position: center;">
<div class="origin-name">Mandalorian</div>
<div class="origin-count">64 archived</div>
</div>
<div class="origin-card" style="background: linear-gradient(rgba(19,19,19,0.7), rgba(19,19,19,0.85)), url('https://camcom.dev/wp-content/uploads/2026/04/neon-dark.jpg'); background-size: cover; background-position: center;">
<div class="origin-name">Clone Wars</div>
<div class="origin-count">87 archived</div>
</div>
<div class="origin-card" style="background: linear-gradient(rgba(19,19,19,0.7), rgba(19,19,19,0.85)), url('https://camcom.dev/wp-content/uploads/2026/04/workshop.jpg'); background-size: cover; background-position: center;">
<div class="origin-name">Original Trilogy</div>
<div class="origin-count">112 archived</div>
</div>
<div class="origin-card" style="background: linear-gradient(rgba(19,19,19,0.7), rgba(19,19,19,0.85)), url('https://camcom.dev/wp-content/uploads/2026/04/spotlight.jpg'); background-size: cover; background-position: center;">
<div class="origin-name">New Republic</div>
<div class="origin-count">53 archived</div>
</div>
</div>
</div>
</section>
<!-- ==========================================
8. SECTION 04 — RECENTLY ARCHIVED
========================================== -->
<section class="section section--alt">
<div class="container">
<div class="section-header reveal">
<div class="section-label">SECTION_04</div>
<h2 class="section-title">Recently Archived</h2>
<div class="section-line"></div>
</div>
<div class="product-grid stagger reveal">
<div class="product-card">
<div class="product-image">
<img src="https://camcom.dev/wp-content/uploads/2026/04/carbon-strike.jpg" alt="Carbon Strike" loading="lazy" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #1C1B1B;">
<span class="product-badge">NEW</span>
</div>
<div class="product-info">
<div class="product-name">Carbon Strike</div>
<div class="product-rating">
<span class="stars">★★★★★</span>
<span class="review-count">New arrival</span>
</div>
<div class="product-price">$389.99</div>
<div class="product-stock"><span class="stock-dot"></span> In Stock</div>
<button class="btn-quick-view">Quick View</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://camcom.dev/wp-content/uploads/2026/04/dark-hunter.jpg" alt="Dark Hunter" loading="lazy" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #1C1B1B;">
<span class="product-badge">NEW</span>
</div>
<div class="product-info">
<div class="product-name">Dark Hunter</div>
<div class="product-rating">
<span class="stars">★★★★★</span>
<span class="review-count">New arrival</span>
</div>
<div class="product-price">$299.99</div>
<div class="product-stock"><span class="stock-dot"></span> In Stock</div>
<button class="btn-quick-view">Quick View</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://camcom.dev/wp-content/uploads/2026/04/elzar-mann.jpg" alt="Elzar Mann" loading="lazy" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #1C1B1B;">
<span class="product-badge">NEW</span>
</div>
<div class="product-info">
<div class="product-name">Elzar Mann</div>
<div class="product-rating">
<span class="stars">★★★★★</span>
<span class="review-count">New arrival</span>
</div>
<div class="product-price">$449.99</div>
<div class="product-stock"><span class="stock-dot"></span> In Stock</div>
<button class="btn-quick-view">Quick View</button>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://camcom.dev/wp-content/uploads/2026/04/luke-rotj.jpg" alt="Shadow Vanguard" loading="lazy" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #1C1B1B;">
<span class="product-badge">NEW</span>
</div>
<div class="product-info">
<div class="product-name">Shadow Vanguard</div>
<div class="product-rating">
<span class="stars">★★★★★</span>
<span class="review-count">New arrival</span>
</div>
<div class="product-price">$534.99</div>
<div class="product-stock"><span class="stock-dot"></span> In Stock</div>
<button class="btn-quick-view">Quick View</button>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================
9. SECTION 05 — SYSTEM STATUS DASHBOARD
========================================== -->
<section class="section">
<div class="container">
<div class="section-header reveal">
<div class="section-label">SECTION_05</div>
<h2 class="section-title">System Status</h2>
<div class="section-line"></div>
</div>
<div class="system-dashboard reveal">
<div class="dashboard-panels stagger reveal">
<div class="dashboard-panel">
<div class="dashboard-panel-value dashboard-panel-value--online">
<span class="status-dot"></span>
ONLINE
</div>
<div class="dashboard-panel-label">Archive Status</div>
</div>
<div class="dashboard-panel">
<div class="dashboard-panel-value">UNITED STATES</div>
<div class="dashboard-panel-label">Origin</div>
</div>
<div class="dashboard-panel">
<div class="dashboard-panel-value">24 HOURS</div>
<div class="dashboard-panel-label">Dispatch Latency</div>
</div>
<div class="dashboard-panel">
<div class="dashboard-panel-value">2-3 DAYS</div>
<div class="dashboard-panel-label">Delivery Time</div>
</div>
</div>
<div class="dashboard-body">
<p class="dashboard-body-text">While other stores dropship from overseas factories with 2–4 week delivery times, every ArtSabers order ships from our US warehouse. Fast, reliable, and always in stock.</p>
<a href="#" class="btn-dashboard-cta">Verify System Status →</a>
</div>
</div>
</div>
</section>
<!-- ==========================================
10. SECTION 06 — USER FEEDBACK
========================================== -->
<section class="section section--alt">
<div class="container">
<div class="section-header reveal">
<div class="section-label">SECTION_06</div>
<h2 class="section-title">User Feedback</h2>
<div class="section-line"></div>
</div>
<div class="review-grid stagger reveal">
<div class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">“The build quality is insane. Proffie board is incredibly responsive.”</p>
<div class="review-author">Marcus T.</div>
</div>
<div class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">“Arrived in 2 days. Blade is bright, sound is crisp. Better than I expected.”</p>
<div class="review-author">Sarah K.</div>
</div>
<div class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">“Third saber from ArtSabers. They never disappoint. Customer service is A+.”</p>
<div class="review-author">Jake R.</div>
</div>
</div>
<div class="trustpilot-badge reveal">
<p>Rated <span>Excellent</span> — 4.9/5 on Trustpilot</p>
</div>
</div>
</section>
<!-- ==========================================
11. SECTION 07 — ABOUT
========================================== -->
<section class="section">
<div class="container">
<div class="section-header reveal">
<div class="section-label">SECTION_07</div>
<h2 class="section-title">About the Archive</h2>
<div class="section-line"></div>
</div>
<div class="about-split">
<div class="about-text reveal">
<p>Masterfully crafted replicas for collectors, cosplayers, and duelists. Every hilt is precision-engineered and warehouse-stocked in the USA for rapid delivery.</p>
<p>From base-lit training sabers to fully programmable Proffie builds, every weapon in the archive is inspected, tested, and ready to ship within 24 hours.</p>
<a href="#" class="about-cta">Read Full Record →</a>
</div>
<div class="about-image reveal" style="padding: 0; overflow: hidden;">
<img src="https://camcom.dev/wp-content/uploads/2026/04/workshop.jpg" alt="ArtSabers workshop" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;">
</div>
</div>
</div>
</section>
<!-- ==========================================
12. SUBSCRIBE TO ARCHIVE UPDATES
========================================== -->
<section class="subscribe section--alt">
<div class="container">
<div class="subscribe-prompt reveal"><span>></span> SUBSCRIBE TO ARCHIVE UPDATES_</div>
<h2 class="subscribe-heading reveal">Stay Connected</h2>
<p class="subscribe-sub reveal">Get 10% off your first saber + early access to new archive entries.</p>
<form class="subscribe-form reveal" onsubmit="return false;">
<input type="email" placeholder="enter.your@email.com">
<button type="submit" class="subscribe-btn">Subscribe</button>
</form>
</div>
</section>
<!-- ==========================================
13. FOOTER
========================================== -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<div class="footer-col-title">Shop</div>
<ul>
<li><a href="#">Lightsabers</a></li>
<li><a href="#">Helmets</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Offers & Deals</a></li>
</ul>
</div>
<div class="footer-col">
<div class="footer-col-title">Support</div>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Shipping Policy</a></li>
<li><a href="#">Returns & Refunds</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Track My Order</a></li>
</ul>
</div>
<div class="footer-col">
<div class="footer-col-title">Company</div>
<ul>
<li><a href="#">About ArtSabers</a></li>
<li><a href="#">Blog & News</a></li>
<li><a href="#">Affiliate Program</a></li>
</ul>
</div>
<div class="footer-col">
<div class="footer-col-title">Connect</div>
<ul>
<li><a href="#">Instagram →</a></li>
<li><a href="#">TikTok →</a></li>
<li><a href="#">YouTube →</a></li>
<li><a href="#">Facebook →</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div class="payment-icons">Visa • Mastercard • Amex • Apple Pay • Google Pay</div>
<div class="nerdworks-badge">A Nerdworks Brand</div>
<p class="footer-copy">© 2024–2026 ArtSabers. All Rights Reserved.</p>
</div>
</div>
</footer>
<!-- ==========================================
JAVASCRIPT — Intersection Observer for reveals
========================================== -->
<script>
/*
* Intersection Observer — watches all .reveal, .reveal-left,
* .stagger, and .section-header elements. Adds the 'revealed'
* class when they scroll into view (20% visible threshold).
* Each element only animates once (unobserve after reveal).
*/
(function() {
var targets = document.querySelectorAll('.reveal, .reveal-left, .stagger, .section-header');
if (!('IntersectionObserver' in window)) {
/* Fallback: show everything immediately */
targets.forEach(function(el) {
el.classList.add('revealed');
});
return;
}
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add('revealed');
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.15,
rootMargin: '0px 0px -40px 0px'
});
targets.forEach(function(el) {
observer.observe(el);
});
})();
/*
* Simple parallax on hero — translates the hero section
* background dots on scroll. Uses requestAnimationFrame
* for smooth performance. Only active on desktop.
*/
(function() {
var hero = document.getElementById('hero');
if (!hero || window.innerWidth < 768) return;
var ticking = false;
window.addEventListener('scroll', function() {
if (!ticking) {
window.requestAnimationFrame(function() {
var scrolled = window.pageYOffset;
if (scrolled < window.innerHeight) {
hero.style.setProperty(
'background-position',
'0 ' + (scrolled * 0.3) + 'px'
);
}
ticking = false;
});
ticking = true;
}
});
})();
</script>
</body>
</html>