/wire-template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Obi-Wan Kenobi EP4 Lightsaber — ArtSabers | The Archive</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);
--green: #6BCB77;
--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;
}
button {
cursor: pointer;
border: none;
background: none;
font-family: inherit;
}
/* ========================================
UTILITY
======================================== */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
/* ========================================
SCROLL REVEAL
======================================== */
.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);
}
.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); }
.stagger.revealed > *:nth-child(7) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }
.stagger.revealed > *:nth-child(8) { transition-delay: 0.7s; 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);
}
.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);
}
.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. BREADCRUMBS
======================================== */
.breadcrumbs {
padding: 20px 0;
border-bottom: 1px solid var(--ghost-border);
}
.breadcrumbs-trail {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 1.5px;
color: var(--ghost);
text-transform: uppercase;
}
.breadcrumbs-trail a {
color: var(--text-secondary);
transition: color 0.25s ease;
}
.breadcrumbs-trail a:hover {
color: var(--accent-peach);
}
.breadcrumbs-trail .separator {
color: var(--ghost);
padding: 0 8px;
}
.breadcrumbs-trail .current {
color: var(--accent-peach);
}
/* ========================================
4. PRODUCT HEADER
======================================== */
.product-header {
padding: 48px 0 64px;
}
.product-header .container {
display: grid;
grid-template-columns: 55% 45%;
gap: 48px;
align-items: start;
}
/* Gallery */
.gallery {
position: sticky;
top: 100px;
}
.gallery-main {
aspect-ratio: 1 / 1;
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;
margin-bottom: 12px;
position: relative;
overflow: hidden;
}
.gallery-main::after {
display: none;
}
.gallery-thumbs {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
}
.gallery-thumb {
aspect-ratio: 1 / 1;
background: var(--surface-tertiary);
border: 2px solid transparent;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 8px;
color: var(--ghost);
letter-spacing: 1px;
cursor: pointer;
transition: border-color 0.25s ease;
position: relative;
overflow: hidden;
}
.gallery-thumb:hover {
border-color: var(--ghost);
}
.gallery-thumb.active {
border-color: var(--accent-peach);
}
.gallery-thumb--video::before {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 10px solid var(--accent-peach);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
.gallery-thumb--video {
font-size: 0;
}
/* Product data */
.product-data {
padding-left: 16px;
}
.product-data__record {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 3px;
color: var(--accent-peach);
margin-bottom: 12px;
text-transform: uppercase;
}
.product-data__title {
font-family: var(--font-heading);
font-size: clamp(26px, 3.5vw, 38px);
font-weight: 700;
letter-spacing: -0.5px;
color: var(--text-primary);
margin-bottom: 16px;
line-height: 1.2;
}
.product-data__electronics-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 2px;
padding: 6px 14px;
border: 1px solid var(--accent-peach);
color: var(--accent-peach);
margin-bottom: 16px;
text-transform: uppercase;
}
.product-data__rating {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
cursor: pointer;
}
.product-data__rating .stars {
color: var(--accent-peach);
font-size: 16px;
letter-spacing: 2px;
}
.product-data__rating .rating-text {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
letter-spacing: 1px;
}
.product-data__rating:hover .rating-text {
color: var(--accent-peach);
text-decoration: underline;
}
.product-data__price {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 6px;
}
.product-data__sku {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 2px;
color: var(--ghost);
margin-bottom: 28px;
text-transform: uppercase;
}
/* Electronics selector */
.selector-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 2px;
color: var(--ghost);
text-transform: uppercase;
margin-bottom: 10px;
}
.electronics-selector {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 24px;
}
.electronics-option {
background: var(--surface-card);
border: 2px solid var(--ghost-border);
padding: 16px;
text-align: center;
cursor: pointer;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.electronics-option:hover {
border-color: var(--ghost);
}
.electronics-option.active {
border-color: var(--accent-peach);
box-shadow: 0 0 20px rgba(255, 156, 128, 0.08);
}
.electronics-option__name {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-primary);
margin-bottom: 4px;
}
.electronics-option__price {
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-secondary);
}
.electronics-option.active .electronics-option__price {
color: var(--accent-peach);
}
/* Blade length selector */
.blade-selector {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 24px;
}
.blade-option {
background: var(--surface-card);
border: 2px solid var(--ghost-border);
padding: 12px;
text-align: center;
cursor: pointer;
transition: border-color 0.25s ease;
}
.blade-option:hover {
border-color: var(--ghost);
}
.blade-option.active {
border-color: var(--accent-peach);
}
.blade-option__size {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 2px;
}
.blade-option__cm {
font-family: var(--font-mono);
font-size: 10px;
color: var(--ghost);
letter-spacing: 1px;
}
.blade-option.active .blade-option__size {
color: var(--accent-peach);
}
/* Quantity */
.quantity-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
}
.quantity-stepper {
display: flex;
align-items: center;
border: 1px solid var(--ghost-border);
}
.quantity-stepper button {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--text-primary);
background: var(--surface-card);
transition: background 0.2s ease, color 0.2s ease;
}
.quantity-stepper button:hover {
background: var(--surface-hover);
color: var(--accent-peach);
}
.quantity-stepper input {
width: 56px;
height: 44px;
text-align: center;
background: var(--surface-tertiary);
border: none;
border-left: 1px solid var(--ghost-border);
border-right: 1px solid var(--ghost-border);
color: var(--text-primary);
font-family: var(--font-heading);
font-size: 16px;
font-weight: 600;
outline: none;
}
/* ATC button */
.btn-atc {
display: block;
width: 100%;
padding: 18px 32px;
background: var(--accent-peach);
color: var(--bg-primary);
font-family: var(--font-heading);
font-size: 14px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
text-align: center;
border: none;
cursor: pointer;
transition: background 0.25s ease, box-shadow 0.25s ease;
margin-bottom: 20px;
}
.btn-atc:hover {
background: var(--accent-peach-light);
box-shadow: 0 4px 24px rgba(255, 156, 128, 0.25);
}
/* Stock status */
.stock-status {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 1.5px;
color: var(--green);
text-transform: uppercase;
margin-bottom: 20px;
}
.stock-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green);
display: inline-block;
animation: stockPulse 2s ease-in-out infinite;
}
@keyframes stockPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(107, 203, 119, 0.4); }
50% { box-shadow: 0 0 0 6px rgba(107, 203, 119, 0); }
}
/* USA Warehouse strip */
.warehouse-strip {
background: var(--surface-card);
border: 1px solid rgba(255, 156, 128, 0.15);
padding: 16px 20px;
text-align: center;
}
.warehouse-strip__readout {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 2.5px;
color: var(--accent-peach);
text-transform: uppercase;
line-height: 1.8;
}
.warehouse-strip__readout .separator {
color: var(--ghost);
padding: 0 6px;
}
/* ========================================
5. TRUST STRIP
======================================== */
.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__icon {
font-size: 24px;
margin-bottom: 8px;
color: var(--accent-peach);
}
.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: 13px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 1px;
}
/* ========================================
SECTIONS (shared)
======================================== */
.section {
padding: 96px 0;
}
.section--alt {
background: var(--bg-void);
}
/* ========================================
6. MANIFEST — What's Included
======================================== */
.manifest-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.manifest-item {
background: var(--surface-card);
border: 1px solid var(--ghost-border);
padding: 24px 16px;
text-align: center;
position: relative;
}
.manifest-item__icon {
width: 48px;
height: 48px;
margin: 0 auto 12px;
background: var(--surface-tertiary);
border: 1px solid var(--ghost-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.manifest-item__label {
font-family: var(--font-heading);
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-primary);
margin-bottom: 4px;
}
.manifest-item__check {
position: absolute;
top: 8px;
right: 10px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--green);
}
/* ========================================
7. FIELD NOTES — Description
======================================== */
.field-notes {
display: grid;
grid-template-columns: 65% 35%;
gap: 48px;
align-items: start;
}
.field-notes__body {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.9;
}
.field-notes__body p {
margin-bottom: 20px;
}
.field-notes__body h3 {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: 0.5px;
margin-bottom: 12px;
margin-top: 32px;
}
.field-notes__body h3:first-child {
margin-top: 0;
}
.field-notes__sidebar {
background: var(--surface-card);
border: 1px solid var(--ghost-border);
padding: 32px 24px;
position: sticky;
top: 100px;
}
.field-notes__sidebar-title {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 3px;
color: var(--accent-peach);
text-transform: uppercase;
margin-bottom: 20px;
}
.field-notes__sidebar-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--ghost-border);
}
.field-notes__sidebar-item:last-child {
border-bottom: none;
}
.field-notes__sidebar-key {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 1.5px;
color: var(--ghost);
text-transform: uppercase;
}
.field-notes__sidebar-val {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
/* ========================================
8. TECHNICAL DATA — Specifications
======================================== */
.specs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 48px;
}
.spec-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 14px 0;
border-bottom: 1px solid var(--ghost-border);
}
.spec-key {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 2px;
color: var(--ghost);
text-transform: uppercase;
flex-shrink: 0;
}
.spec-val {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
text-align: right;
}
.spec-val--list {
text-align: right;
font-size: 12px;
line-height: 1.7;
}
/* ========================================
9. BLADE LENGTH GUIDE
======================================== */
.blade-guide {
max-width: 800px;
margin: 0 auto;
}
.blade-guide__chart {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 48px;
padding: 40px 0;
border-bottom: 2px solid var(--ghost-border);
position: relative;
min-height: 300px;
}
.blade-guide__bar {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.blade-guide__shaft {
width: 12px;
background: linear-gradient(to top, var(--accent-peach), rgba(255, 156, 128, 0.3));
border-radius: 6px 6px 0 0;
transition: height 0.8s ease;
}
.blade-guide__label {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
}
.blade-guide__cm {
font-family: var(--font-mono);
font-size: 10px;
color: var(--ghost);
letter-spacing: 1px;
}
.blade-guide__human {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-left: 48px;
}
.blade-guide__human-bar {
width: 4px;
background: var(--ghost);
border-radius: 2px;
}
.blade-guide__human-label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--ghost);
letter-spacing: 1px;
text-transform: uppercase;
}
.blade-guide__ref {
text-align: center;
padding-top: 16px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 2px;
color: var(--ghost);
text-transform: uppercase;
}
/* ========================================
10. ELECTRONICS COMPARISON
======================================== */
.comparison-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.comparison-col {
border: 1px solid var(--ghost-border);
margin-left: -1px;
}
.comparison-col:first-child {
margin-left: 0;
}
.comparison-col--highlighted {
border-color: var(--accent-peach);
position: relative;
}
.comparison-col--highlighted::before {
content: 'VIEWING';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 2px;
color: var(--bg-primary);
background: var(--accent-peach);
padding: 2px 12px;
}
.comparison-header {
background: var(--surface-card);
padding: 24px 20px;
text-align: center;
border-bottom: 1px solid var(--ghost-border);
}
.comparison-col--highlighted .comparison-header {
background: rgba(255, 156, 128, 0.06);
}
.comparison-header__name {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-primary);
margin-bottom: 4px;
}
.comparison-header__price {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
}
.comparison-col--highlighted .comparison-header__price {
color: var(--accent-peach);
}
.comparison-row {
display: flex;
justify-content: space-between;
padding: 12px 20px;
border-bottom: 1px solid var(--ghost-border);
font-size: 12px;
}
.comparison-row:last-child {
border-bottom: none;
}
.comparison-row__key {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 1px;
color: var(--ghost);
text-transform: uppercase;
}
.comparison-row__val {
font-family: var(--font-heading);
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
text-align: right;
}
.comparison-row__val--yes {
color: var(--green);
}
.comparison-row__val--no {
color: var(--ghost);
}
/* ========================================
11. PRODUCT VIDEO
======================================== */
.video-placeholder {
aspect-ratio: 16 / 9;
background: var(--surface-card);
border: 1px solid var(--ghost-border);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
max-width: 900px;
margin: 0 auto;
position: relative;
cursor: pointer;
}
.video-placeholder__play {
width: 80px;
height: 80px;
border: 2px solid var(--accent-peach);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.video-placeholder__play::after {
content: '';
width: 0;
height: 0;
border-left: 22px solid var(--accent-peach);
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
margin-left: 4px;
}
.video-placeholder:hover .video-placeholder__play {
background: rgba(255, 156, 128, 0.1);
box-shadow: 0 0 40px rgba(255, 156, 128, 0.15);
}
.video-placeholder__label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 3px;
color: var(--ghost);
text-transform: uppercase;
}
.video-placeholder__scanline {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: rgba(255, 156, 128, 0.15);
animation: scanline 4s linear infinite;
}
@keyframes scanline {
0% { top: 0; }
100% { top: 100%; }
}
/* ========================================
12. FAQ ACCORDION
======================================== */
.faq-list {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid var(--ghost-border);
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
cursor: pointer;
width: 100%;
text-align: left;
}
.faq-question__text {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0.5px;
}
.faq-question__icon {
font-family: var(--font-mono);
font-size: 18px;
color: var(--accent-peach);
transition: transform 0.3s ease;
flex-shrink: 0;
margin-left: 20px;
}
.faq-item.active .faq-question__icon {
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-item.active .faq-answer {
max-height: 200px;
}
.faq-answer__text {
padding: 0 0 20px;
font-size: 14px;
color: var(--text-secondary);
line-height: 1.7;
}
/* ========================================
13. REVIEWS — User Reports
======================================== */
.reviews-summary {
display: grid;
grid-template-columns: 260px 1fr;
gap: 48px;
margin-bottom: 48px;
align-items: start;
}
.reviews-aggregate {
text-align: center;
background: var(--surface-card);
border: 1px solid var(--ghost-border);
padding: 32px 24px;
}
.reviews-aggregate__score {
font-family: var(--font-heading);
font-size: 48px;
font-weight: 700;
color: var(--text-primary);
line-height: 1;
margin-bottom: 4px;
}
.reviews-aggregate__max {
font-family: var(--font-mono);
font-size: 14px;
color: var(--ghost);
}
.reviews-aggregate__stars {
color: var(--accent-peach);
font-size: 20px;
letter-spacing: 3px;
margin: 12px 0;
}
.reviews-aggregate__count {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 2px;
color: var(--text-secondary);
text-transform: uppercase;
}
/* Star breakdown bars */
.reviews-breakdown {
padding-top: 8px;
}
.reviews-breakdown__row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.reviews-breakdown__label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
width: 24px;
text-align: right;
flex-shrink: 0;
}
.reviews-breakdown__bar {
flex: 1;
height: 8px;
background: var(--surface-card);
border: 1px solid var(--ghost-border);
overflow: hidden;
}
.reviews-breakdown__fill {
height: 100%;
background: var(--accent-peach);
width: 0;
transition: width 1s ease;
}
.reviews-breakdown__num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ghost);
width: 28px;
flex-shrink: 0;
}
/* Individual reviews */
.review-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 32px;
}
.review-card {
background: var(--surface-card);
border: 1px solid var(--ghost-border);
padding: 28px 24px;
}
.review-card__stars {
color: var(--accent-peach);
font-size: 14px;
letter-spacing: 2px;
margin-bottom: 14px;
}
.review-card__text {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 18px;
font-style: italic;
}
.review-card__author {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 1px;
}
.review-card__verified {
font-family: var(--font-mono);
font-size: 10px;
color: var(--green);
letter-spacing: 1px;
margin-top: 4px;
text-transform: uppercase;
}
.reviews-actions {
display: flex;
align-items: center;
justify-content: space-between;
}
.btn-write-review {
display: inline-block;
padding: 12px 28px;
background: transparent;
border: 1px solid var(--accent-peach);
color: var(--accent-peach);
font-family: var(--font-heading);
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease;
}
.btn-write-review:hover {
background: var(--accent-peach);
color: var(--bg-primary);
}
.trustpilot-badge {
text-align: center;
padding: 16px 24px;
border: 1px solid var(--ghost-border);
background: var(--surface-tertiary);
}
.trustpilot-badge p {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 1px;
}
.trustpilot-badge span {
color: var(--accent-peach);
}
/* ========================================
14 & 15 & 16. 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;
overflow: hidden;
}
.product-image::after {
display: none;
}
.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: var(--green);
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 16px;
}
.product-stock .stock-dot {
width: 6px;
height: 6px;
animation: none;
}
.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);
}
/* Small accessory cards */
.product-card--small .product-image {
aspect-ratio: 4 / 3;
}
.product-card--small .product-info {
padding: 16px;
}
.product-card--small .product-name {
font-size: 14px;
margin-bottom: 6px;
}
.product-card--small .product-price {
font-size: 16px;
margin-bottom: 10px;
}
/* Recently viewed — even smaller */
.product-grid--small {
gap: 16px;
}
.product-grid--small .product-info {
padding: 14px;
}
.product-grid--small .product-name {
font-size: 13px;
}
.product-grid--small .product-price {
font-size: 15px;
margin-bottom: 0;
}
.product-grid--small .product-stock,
.product-grid--small .btn-quick-view {
display: none;
}
/* ========================================
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); }
}
/* ========================================
STICKY ATC BAR
======================================== */
.sticky-atc {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
background: rgba(14, 14, 14, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid var(--ghost-border);
padding: 12px 0;
transform: translateY(100%);
transition: transform 0.35s ease;
}
.sticky-atc.visible {
transform: translateY(0);
}
.sticky-atc .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.sticky-atc__info {
display: flex;
align-items: center;
gap: 16px;
}
.sticky-atc__name {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.sticky-atc__price {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
color: var(--accent-peach);
}
.sticky-atc__btn {
padding: 12px 32px;
background: var(--accent-peach);
color: var(--bg-primary);
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: background 0.25s ease;
flex-shrink: 0;
}
.sticky-atc__btn:hover {
background: var(--accent-peach-light);
}
/* ========================================
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;
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 1024px) {
.product-header .container {
grid-template-columns: 1fr;
gap: 32px;
}
.gallery {
position: static;
}
.product-data {
padding-left: 0;
}
.field-notes {
grid-template-columns: 1fr;
}
.specs-grid {
grid-template-columns: 1fr;
}
.comparison-grid {
grid-template-columns: 1fr;
}
.comparison-col {
margin-left: 0;
}
.reviews-summary {
grid-template-columns: 1fr;
}
.product-grid {
grid-template-columns: repeat(2, 1fr);
}
.manifest-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.container {
padding: 0 20px;
}
.nav-links {
display: none;
}
.nav-toggle {
display: flex;
}
.trust-bar .container {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.trust-metric {
border-right: none;
padding: 8px;
}
.gallery-thumbs {
grid-template-columns: repeat(4, 1fr);
}
.electronics-selector {
grid-template-columns: 1fr;
}
.review-grid {
grid-template-columns: 1fr;
}
.product-grid {
grid-template-columns: 1fr;
}
.section {
padding: 64px 0;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
.sticky-atc__name {
display: none;
}
.blade-guide__chart {
gap: 24px;
min-height: 220px;
}
}
@media (max-width: 480px) {
.trust-bar .container {
grid-template-columns: 1fr;
}
.manifest-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
}
.blade-selector {
grid-template-columns: 1fr;
}
.warehouse-strip__readout .separator {
display: block;
height: 0;
padding: 0;
}
}
/* ========================================
PRINT STYLES
======================================== */
@media print {
.promo-bar,
.navbar,
.sticky-atc,
.subscribe {
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="archive-homepage.html" 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. BREADCRUMBS
========================================== -->
<div class="breadcrumbs">
<div class="container">
<div class="breadcrumbs-trail">
<a href="#">Archive</a>
<span class="separator">/</span>
<a href="#">Lightsabers</a>
<span class="separator">/</span>
<a href="#">Proffie 2.2</a>
<span class="separator">/</span>
<span class="current">Obi-Wan Kenobi EP4</span>
</div>
</div>
</div>
<!-- ==========================================
4. PRODUCT HEADER
========================================== -->
<section class="product-header">
<div class="container">
<!-- LEFT: Gallery -->
<div class="gallery reveal">
<div class="gallery-main" id="gallery-main">
<img src="https://camcom.dev/wp-content/uploads/2026/04/obi-wan-ep4.jpg" alt="Obi-Wan Kenobi EP4 Lightsaber — front view" style="width: 100%; height: 100%; object-fit: contain;">
</div>
<div class="gallery-thumbs">
<div class="gallery-thumb active" data-index="0"><img src="https://camcom.dev/wp-content/uploads/2026/04/obi-wan-ep4.jpg" loading="lazy" alt="Front view" style="width: 100%; height: 100%; object-fit: cover;"></div>
<div class="gallery-thumb" data-index="1"><img src="https://camcom.dev/wp-content/uploads/2026/04/obi-wan-ep4.jpg" loading="lazy" alt="Hilt detail" style="width: 100%; height: 100%; object-fit: cover;"></div>
<div class="gallery-thumb" data-index="2"><img src="https://camcom.dev/wp-content/uploads/2026/04/obi-wan-ep4.jpg" loading="lazy" alt="Blade ignited" style="width: 100%; height: 100%; object-fit: cover;"></div>
<div class="gallery-thumb" data-index="3"><img src="https://camcom.dev/wp-content/uploads/2026/04/obi-wan-ep4.jpg" loading="lazy" alt="Pommel view" style="width: 100%; height: 100%; object-fit: cover;"></div>
<div class="gallery-thumb" data-index="4"><img src="https://camcom.dev/wp-content/uploads/2026/04/obi-wan-ep4.jpg" loading="lazy" alt="Activation box" style="width: 100%; height: 100%; object-fit: cover;"></div>
<div class="gallery-thumb" data-index="5"><img src="https://camcom.dev/wp-content/uploads/2026/04/obi-wan-ep4.jpg" loading="lazy" alt="Weathered finish" style="width: 100%; height: 100%; object-fit: cover;"></div>
<div class="gallery-thumb gallery-thumb--video" data-index="6">VIDEO</div>
</div>
</div>
<!-- RIGHT: Product Data -->
<div class="product-data reveal">
<div class="product-data__record">RECORD_001</div>
<h1 class="product-data__title">Obi-Wan Kenobi EP4 Lightsaber</h1>
<div class="product-data__electronics-badge">Proffie 2.2</div>
<div class="product-data__rating" onclick="document.getElementById('reviews').scrollIntoView({behavior:'smooth'})">
<span class="stars">★★★★★</span>
<span class="rating-text">4.8 (127 reviews)</span>
</div>
<div class="product-data__price" id="product-price">$619.99</div>
<div class="product-data__sku">SKU: LS-TXQ001PF-OBIWANEP4</div>
<!-- Electronics selector -->
<div class="selector-label">Electronics</div>
<div class="electronics-selector">
<div class="electronics-option" data-price="499.99" onclick="selectElectronics(this)">
<div class="electronics-option__name">SNV4 Pro</div>
<div class="electronics-option__price">$499.99</div>
</div>
<div class="electronics-option active" data-price="619.99" onclick="selectElectronics(this)">
<div class="electronics-option__name">Proffie 2.2</div>
<div class="electronics-option__price">$619.99</div>
</div>
</div>
<!-- Blade length selector -->
<div class="selector-label">Blade Length</div>
<div class="blade-selector">
<div class="blade-option" onclick="selectBlade(this)">
<div class="blade-option__size">26"</div>
<div class="blade-option__cm">66 cm</div>
</div>
<div class="blade-option active" onclick="selectBlade(this)">
<div class="blade-option__size">32"</div>
<div class="blade-option__cm">82 cm</div>
</div>
<div class="blade-option" onclick="selectBlade(this)">
<div class="blade-option__size">36"</div>
<div class="blade-option__cm">92 cm</div>
</div>
</div>
<!-- Quantity -->
<div class="selector-label">Quantity</div>
<div class="quantity-row">
<div class="quantity-stepper">
<button type="button" onclick="changeQty(-1)">−</button>
<input type="number" id="qty" value="1" min="1" max="10" readonly>
<button type="button" onclick="changeQty(1)">+</button>
</div>
</div>
<!-- Add to Cart -->
<button class="btn-atc" id="btn-atc">Add to Archive</button>
<!-- Stock -->
<div class="stock-status">
<span class="stock-dot"></span>
In Stock — Ships Within 2 Working Days
</div>
<!-- USA Warehouse -->
<div class="warehouse-strip">
<div class="warehouse-strip__readout">
Origin: USA
<span class="separator">•</span>
Dispatch: 24hrs
<span class="separator">•</span>
Delivery: 2–3 Days
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================
5. TRUST STRIP
========================================== -->
<div class="trust-bar">
<div class="container stagger reveal">
<div class="trust-metric">
<div class="trust-metric__icon">✈</div>
<div class="trust-metric__label">Shipping</div>
<div class="trust-metric__value">Free Express</div>
</div>
<div class="trust-metric">
<div class="trust-metric__icon">↺</div>
<div class="trust-metric__label">Returns</div>
<div class="trust-metric__value">30-Day Returns</div>
</div>
<div class="trust-metric">
<div class="trust-metric__icon">⚿</div>
<div class="trust-metric__label">Checkout</div>
<div class="trust-metric__value">Secure Payment</div>
</div>
<div class="trust-metric">
<div class="trust-metric__icon">⚑</div>
<div class="trust-metric__label">Warehouse</div>
<div class="trust-metric__value">USA Based</div>
</div>
</div>
</div>
<!-- ==========================================
6. MANIFEST — What's Included
========================================== -->
<section class="section">
<div class="container">
<div class="section-header reveal">
<div class="section-label">MANIFEST</div>
<h2 class="section-title">What’s Included</h2>
<div class="section-line"></div>
</div>
<div class="manifest-grid stagger reveal">
<div class="manifest-item">
<div class="manifest-item__check">✓</div>
<div class="manifest-item__icon">⚔</div>
<div class="manifest-item__label">Lightsaber Hilt</div>
</div>
<div class="manifest-item">
<div class="manifest-item__check">✓</div>
<div class="manifest-item__icon">|</div>
<div class="manifest-item__label">Pixel Blade</div>
</div>
<div class="manifest-item">
<div class="manifest-item__check">✓</div>
<div class="manifest-item__icon">▱</div>
<div class="manifest-item__label">Hard Case</div>
</div>
<div class="manifest-item">
<div class="manifest-item__check">✓</div>
<div class="manifest-item__icon">⏚</div>
<div class="manifest-item__label">Display Stand</div>
</div>
<div class="manifest-item">
<div class="manifest-item__check">✓</div>
<div class="manifest-item__icon">◉</div>
<div class="manifest-item__label">Blade Plug</div>
</div>
<div class="manifest-item">
<div class="manifest-item__check">✓</div>
<div class="manifest-item__icon">⚆</div>
<div class="manifest-item__label">Pouch Bag</div>
</div>
<div class="manifest-item">
<div class="manifest-item__check">✓</div>
<div class="manifest-item__icon">⚡</div>
<div class="manifest-item__label">Charging Cable</div>
</div>
<div class="manifest-item">
<div class="manifest-item__check">✓</div>
<div class="manifest-item__icon">⚙</div>
<div class="manifest-item__label">Hex Key</div>
</div>
</div>
</div>
</section>
<!-- ==========================================
7. FIELD NOTES — Description
========================================== -->
<section class="section section--alt">
<div class="container">
<div class="section-header reveal">
<div class="section-label">FIELD_NOTES</div>
<h2 class="section-title">Description</h2>
<div class="section-line"></div>
</div>
<div class="field-notes reveal">
<div class="field-notes__body">
<h3>A Weapon from a More Civilised Age</h3>
<p>This is the lightsaber that defined a generation. Modelled after the weathered hilt carried by Obi-Wan Kenobi during his years of exile on Tatooine, this replica captures every detail of the Episode IV design — from the distinctive booster grip and clamp-style activation box to the carefully aged surface finish that tells the story of decades spent hidden in the Jundland Wastes.</p>
<p>The hilt is machined from aircraft-grade aluminium with a hand-applied weathered finish that gives each unit its own character. No two hilts are exactly alike. The ergonomics have been refined to feel natural in the hand during both display and active duelling, with a balanced weight distribution that rewards controlled, deliberate swordsmanship.</p>
<h3>Proffie 2.2 Sound Board</h3>
<p>At the heart of this saber is the Proffie 2.2 — the most advanced sound board available in the lightsaber community. Unlike consumer-grade boards that ship with locked firmware, the Proffie is fully open-source and infinitely programmable. Upload custom sound fonts, create blade styles from scratch using ProffieOS, and fine-tune every parameter from ignition delay to swing sensitivity. The board ships pre-loaded with 25 curated sound fonts and ready to use out of the box — but the ceiling for customisation is limitless.</p>
<p>The Smooth Swing engine delivers real-time audio response that tracks your movement with zero perceptible latency. Flash on Clash, Lock-Up, Blaster Deflect, and character voice lines are all pre-configured and triggered by the built-in motion sensor. The 3200 mAh rechargeable battery delivers hours of continuous use, and the 32 GB SD card provides enough storage for dozens of additional sound font packs.</p>
<h3>Built for Collectors and Duelists Alike</h3>
<p>Whether this saber lives on a display stand in your collection room or takes a beating at your local duelling club, it is built to last. The polycarbonate pixel blade produces vivid, scroll-ignition effects with infinite colour options, and the chassis is designed for easy maintenance and battery replacement. Every unit is individually tested before shipping and backed by our 30-day satisfaction guarantee.</p>
</div>
<div class="field-notes__sidebar">
<div class="field-notes__sidebar-title">Key Data</div>
<div class="field-notes__sidebar-item">
<span class="field-notes__sidebar-key">Board</span>
<span class="field-notes__sidebar-val">Proffie 2.2</span>
</div>
<div class="field-notes__sidebar-item">
<span class="field-notes__sidebar-key">Swing</span>
<span class="field-notes__sidebar-val">Smooth Swing</span>
</div>
<div class="field-notes__sidebar-item">
<span class="field-notes__sidebar-key">Colours</span>
<span class="field-notes__sidebar-val">Infinite</span>
</div>
<div class="field-notes__sidebar-item">
<span class="field-notes__sidebar-key">Fonts</span>
<span class="field-notes__sidebar-val">25 Pre-loaded</span>
</div>
<div class="field-notes__sidebar-item">
<span class="field-notes__sidebar-key">Battery</span>
<span class="field-notes__sidebar-val">3200 mAh</span>
</div>
<div class="field-notes__sidebar-item">
<span class="field-notes__sidebar-key">Storage</span>
<span class="field-notes__sidebar-val">32 GB SD</span>
</div>
<div class="field-notes__sidebar-item">
<span class="field-notes__sidebar-key">Origin</span>
<span class="field-notes__sidebar-val">USA Warehouse</span>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================
8. TECHNICAL DATA — Specifications
========================================== -->
<section class="section">
<div class="container">
<div class="section-header reveal">
<div class="section-label">TECHNICAL_DATA</div>
<h2 class="section-title">Specifications</h2>
<div class="section-line"></div>
</div>
<div class="specs-grid reveal">
<div>
<div class="spec-row">
<span class="spec-key">Electronics</span>
<span class="spec-val">Proffie 2.2</span>
</div>
<div class="spec-row">
<span class="spec-key">Duelling Level</span>
<span class="spec-val">Heavy</span>
</div>
<div class="spec-row">
<span class="spec-key">Hilt Style</span>
<span class="spec-val">Straight</span>
</div>
<div class="spec-row">
<span class="spec-key">Hilt Finish</span>
<span class="spec-val">Weathered</span>
</div>
<div class="spec-row">
<span class="spec-key">Blade Lengths</span>
<span class="spec-val">26" / 32" / 36"</span>
</div>
<div class="spec-row">
<span class="spec-key">Blade Style</span>
<span class="spec-val">Neopixel</span>
</div>
<div class="spec-row">
<span class="spec-key">Allegiance</span>
<span class="spec-val">Jedi</span>
</div>
<div class="spec-row">
<span class="spec-key">Force Side</span>
<span class="spec-val">Light Side</span>
</div>
</div>
<div>
<div class="spec-row">
<span class="spec-key">Features</span>
<span class="spec-val spec-val--list">Smooth Swing<br>Flash on Clash<br>Blaster Effect<br>Character Voices<br>Lock-Up<br>Motion Control<br>Infinite Colours</span>
</div>
<div class="spec-row">
<span class="spec-key">Battery</span>
<span class="spec-val">3200 mAh (18650)</span>
</div>
<div class="spec-row">
<span class="spec-key">Soundfonts</span>
<span class="spec-val">25 Pre-installed</span>
</div>
<div class="spec-row">
<span class="spec-key">SD Card</span>
<span class="spec-val">32 GB</span>
</div>
<div class="spec-row">
<span class="spec-key">Weight</span>
<span class="spec-val">7 lbs</span>
</div>
<div class="spec-row">
<span class="spec-key">Dimensions</span>
<span class="spec-val">40 × 6 × 4 in</span>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================
9. BLADE LENGTH GUIDE
========================================== -->
<section class="section section--alt">
<div class="container">
<div class="section-header reveal">
<div class="section-label">REFERENCE</div>
<h2 class="section-title">Blade Length Guide</h2>
<div class="section-line"></div>
</div>
<div class="blade-guide reveal">
<div class="blade-guide__chart" id="blade-chart">
<div class="blade-guide__bar">
<div class="blade-guide__shaft" data-height="130" style="height: 0;"></div>
<div class="blade-guide__label">26"</div>
<div class="blade-guide__cm">66 cm</div>
</div>
<div class="blade-guide__bar">
<div class="blade-guide__shaft" data-height="170" style="height: 0;"></div>
<div class="blade-guide__label">32"</div>
<div class="blade-guide__cm">82 cm</div>
</div>
<div class="blade-guide__bar">
<div class="blade-guide__shaft" data-height="200" style="height: 0;"></div>
<div class="blade-guide__label">36"</div>
<div class="blade-guide__cm">92 cm</div>
</div>
<div class="blade-guide__human">
<div class="blade-guide__human-bar" style="height: 230px;"></div>
<div class="blade-guide__human-label">5’9"</div>
<div class="blade-guide__cm">Avg. Height</div>
</div>
</div>
<div class="blade-guide__ref">Reference: Average Human Height 5’9" — Blade Length Shown to Scale</div>
</div>
</div>
</section>
<!-- ==========================================
10. ELECTRONICS COMPARISON
========================================== -->
<section class="section">
<div class="container">
<div class="section-header reveal">
<div class="section-label">COMPARISON</div>
<h2 class="section-title">Why Proffie?</h2>
<div class="section-line"></div>
</div>
<div class="comparison-grid reveal">
<!-- S-RGB -->
<div class="comparison-col">
<div class="comparison-header">
<div class="comparison-header__name">S-RGB</div>
<div class="comparison-header__price">From $149</div>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Colours</span>
<span class="comparison-row__val">12 Preset</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Sound Fonts</span>
<span class="comparison-row__val">6</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Smooth Swing</span>
<span class="comparison-row__val comparison-row__val--yes">Yes</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Programmable</span>
<span class="comparison-row__val comparison-row__val--no">No</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Bluetooth</span>
<span class="comparison-row__val comparison-row__val--no">No</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">App Control</span>
<span class="comparison-row__val comparison-row__val--no">No</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Pixel Blade</span>
<span class="comparison-row__val comparison-row__val--no">No</span>
</div>
</div>
<!-- Xenopixel -->
<div class="comparison-col">
<div class="comparison-header">
<div class="comparison-header__name">Xenopixel</div>
<div class="comparison-header__price">From $299</div>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Colours</span>
<span class="comparison-row__val">Infinite</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Sound Fonts</span>
<span class="comparison-row__val">34</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Smooth Swing</span>
<span class="comparison-row__val comparison-row__val--yes">Yes</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Programmable</span>
<span class="comparison-row__val comparison-row__val--no">No</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Bluetooth</span>
<span class="comparison-row__val comparison-row__val--yes">Yes</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">App Control</span>
<span class="comparison-row__val comparison-row__val--yes">Yes</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Pixel Blade</span>
<span class="comparison-row__val comparison-row__val--yes">Yes</span>
</div>
</div>
<!-- Proffie (highlighted) -->
<div class="comparison-col comparison-col--highlighted">
<div class="comparison-header">
<div class="comparison-header__name">Proffie 2.2</div>
<div class="comparison-header__price">From $499</div>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Colours</span>
<span class="comparison-row__val">Infinite</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Sound Fonts</span>
<span class="comparison-row__val">25+</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Smooth Swing</span>
<span class="comparison-row__val comparison-row__val--yes">Yes</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Programmable</span>
<span class="comparison-row__val comparison-row__val--yes">Fully</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Bluetooth</span>
<span class="comparison-row__val comparison-row__val--no">No</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">App Control</span>
<span class="comparison-row__val">ProffieOS</span>
</div>
<div class="comparison-row">
<span class="comparison-row__key">Pixel Blade</span>
<span class="comparison-row__val comparison-row__val--yes">Yes</span>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================
11. PRODUCT VIDEO
========================================== -->
<section class="section section--alt">
<div class="container">
<div class="section-header reveal">
<div class="section-label">SPECIMEN_DEMO</div>
<h2 class="section-title">Product Video</h2>
<div class="section-line"></div>
</div>
<div class="video-placeholder reveal">
<div class="video-placeholder__scanline"></div>
<div class="video-placeholder__play"></div>
<div class="video-placeholder__label">Specimen Demonstration</div>
</div>
</div>
</section>
<!-- ==========================================
12. FAQ — Frequently Requested Data
========================================== -->
<section class="section">
<div class="container">
<div class="section-header reveal">
<div class="section-label">FAQ</div>
<h2 class="section-title">Frequently Requested Data</h2>
<div class="section-line"></div>
</div>
<div class="faq-list reveal">
<div class="faq-item">
<button class="faq-question" onclick="toggleFaq(this)">
<span class="faq-question__text">Is this saber suitable for duelling?</span>
<span class="faq-question__icon">+</span>
</button>
<div class="faq-answer">
<p class="faq-answer__text">Yes. The Obi-Wan EP4 is rated for heavy duelling. The aluminium hilt is built to withstand full-contact sparring, and the polycarbonate blade is virtually indestructible under normal duelling conditions. We recommend the 32" blade for most duelists as it offers the best balance of reach and manoeuvrability.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="toggleFaq(this)">
<span class="faq-question__text">How do I change blade colours?</span>
<span class="faq-question__icon">+</span>
</button>
<div class="faq-answer">
<p class="faq-answer__text">With the Proffie 2.2 board, blade colours are fully customisable. You can cycle through presets using the button combination on the hilt, or connect the saber to your computer via USB and edit blade styles directly in the ProffieOS configuration file. The possibilities are truly infinite — any colour, any pattern, any transition effect.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="toggleFaq(this)">
<span class="faq-question__text">What app do I need for Proffie 2.2?</span>
<span class="faq-question__icon">+</span>
</button>
<div class="faq-answer">
<p class="faq-answer__text">The Proffie 2.2 does not use a mobile app. Instead, it is programmed via the Arduino IDE on a computer using ProffieOS, which is an open-source operating system. This gives you vastly more control than app-based boards, though it does require a basic level of technical comfort. We provide setup guides and community links with every purchase.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="toggleFaq(this)">
<span class="faq-question__text">How long does the battery last?</span>
<span class="faq-question__icon">+</span>
</button>
<div class="faq-answer">
<p class="faq-answer__text">The 3200 mAh 18650 battery provides approximately 1–2 hours of continuous heavy use (full brightness, active sound). In standby mode or light use, the battery lasts significantly longer. Charging time is approximately 2–3 hours via the included USB-C cable.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" onclick="toggleFaq(this)">
<span class="faq-question__text">What is the return policy?</span>
<span class="faq-question__icon">+</span>
</button>
<div class="faq-answer">
<p class="faq-answer__text">We offer a 30-day return policy on all products. If you are not completely satisfied, contact our support team for a prepaid return label. Items must be returned in original condition with all accessories. Refunds are processed within 5 business days of receiving the returned item.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================
13. REVIEWS — User Reports
========================================== -->
<section class="section section--alt" id="reviews">
<div class="container">
<div class="section-header reveal">
<div class="section-label">USER_REPORTS</div>
<h2 class="section-title">Reviews</h2>
<div class="section-line"></div>
</div>
<!-- Summary -->
<div class="reviews-summary reveal">
<div class="reviews-aggregate">
<div class="reviews-aggregate__score">4.8</div>
<div class="reviews-aggregate__max">/ 5.0</div>
<div class="reviews-aggregate__stars">★★★★★</div>
<div class="reviews-aggregate__count">127 Reports Filed</div>
</div>
<div class="reviews-breakdown" id="reviews-breakdown">
<div class="reviews-breakdown__row">
<span class="reviews-breakdown__label">5★</span>
<div class="reviews-breakdown__bar">
<div class="reviews-breakdown__fill" data-width="70"></div>
</div>
<span class="reviews-breakdown__num">89</span>
</div>
<div class="reviews-breakdown__row">
<span class="reviews-breakdown__label">4★</span>
<div class="reviews-breakdown__bar">
<div class="reviews-breakdown__fill" data-width="22"></div>
</div>
<span class="reviews-breakdown__num">28</span>
</div>
<div class="reviews-breakdown__row">
<span class="reviews-breakdown__label">3★</span>
<div class="reviews-breakdown__bar">
<div class="reviews-breakdown__fill" data-width="5.5"></div>
</div>
<span class="reviews-breakdown__num">7</span>
</div>
<div class="reviews-breakdown__row">
<span class="reviews-breakdown__label">2★</span>
<div class="reviews-breakdown__bar">
<div class="reviews-breakdown__fill" data-width="1.6"></div>
</div>
<span class="reviews-breakdown__num">2</span>
</div>
<div class="reviews-breakdown__row">
<span class="reviews-breakdown__label">1★</span>
<div class="reviews-breakdown__bar">
<div class="reviews-breakdown__fill" data-width="0.8"></div>
</div>
<span class="reviews-breakdown__num">1</span>
</div>
</div>
</div>
<!-- Individual reviews -->
<div class="review-grid stagger reveal">
<div class="review-card">
<div class="review-card__stars">★★★★★</div>
<p class="review-card__text">“The hilt quality is museum-grade. Proffie sound is incredible. The weathered finish looks like it was actually pulled from the set of A New Hope.”</p>
<div class="review-card__author">Marcus T.</div>
<div class="review-card__verified">✓ Verified Purchase</div>
</div>
<div class="review-card">
<div class="review-card__stars">★★★★★</div>
<p class="review-card__text">“Second Proffie purchase from ArtSabers. The smoothswing on this one is chef’s kiss. Already programming custom blade styles.”</p>
<div class="review-card__author">Sarah K.</div>
<div class="review-card__verified">✓ Verified Purchase</div>
</div>
<div class="review-card">
<div class="review-card__stars">★★★★☆</div>
<p class="review-card__text">“Shipping was fast, 2 days to my door. Blade brightness is outstanding. Only reason for 4 stars is I wish it came with more sound fonts pre-loaded.”</p>
<div class="review-card__author">Jake R.</div>
<div class="review-card__verified">✓ Verified Purchase</div>
</div>
</div>
<div class="reviews-actions reveal">
<button class="btn-write-review">Write a Report</button>
<div class="trustpilot-badge">
<p>Rated <span>Excellent</span> — 4.9/5 on Trustpilot</p>
</div>
</div>
</div>
</section>
<!-- ==========================================
14. RELATED RECORDS
========================================== -->
<section class="section">
<div class="container">
<div class="section-header reveal">
<div class="section-label">RELATED_RECORDS</div>
<h2 class="section-title">You May Also Access</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/anakin-ep3.jpg" loading="lazy" alt="Anakin Skywalker EP3 Lightsaber" style="width: 100%; height: 100%; object-fit: cover;"></div>
<div class="product-info">
<div class="product-name">Anakin Skywalker EP3</div>
<div class="product-rating">
<span class="stars">★★★★★</span>
<span class="review-count">4.7 (98 reviews)</span>
</div>
<div class="product-price">$549.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" loading="lazy" alt="Luke Skywalker ROTJ Lightsaber" style="width: 100%; height: 100%; object-fit: cover;"></div>
<div class="product-info">
<div class="product-name">Luke Skywalker ROTJ</div>
<div class="product-rating">
<span class="stars">★★★★★</span>
<span class="review-count">4.9 (203 reviews)</span>
</div>
<div class="product-price">$599.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/ahsoka-tano.jpg" loading="lazy" alt="Ahsoka Tano Lightsaber" style="width: 100%; height: 100%; object-fit: cover;"></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/mace-windu-se.jpg" loading="lazy" alt="Mace Windu SE Lightsaber" style="width: 100%; height: 100%; object-fit: cover;"></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>
<!-- ==========================================
15. CROSS-SELL — Complete Your Loadout
========================================== -->
<section class="section section--alt">
<div class="container">
<div class="section-header reveal">
<div class="section-label">LOADOUT</div>
<h2 class="section-title">Complete Your Loadout</h2>
<div class="section-line"></div>
</div>
<div class="product-grid stagger reveal">
<div class="product-card product-card--small">
<div class="product-image" style="background: linear-gradient(135deg, #1a1918 0%, #252321 100%); flex-direction: column; gap: 8px;">
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#A28C86" stroke-width="1.5" stroke-linecap="round"><line x1="12" y1="2" x2="12" y2="22"/><circle cx="12" cy="22" r="1.5"/></svg>
<span style="font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--ghost); text-transform: uppercase;">Blade</span>
</div>
<div class="product-info">
<div class="product-name">Pixel Blade — 36in</div>
<div class="product-price">$49.99</div>
<button class="btn-quick-view">Add to Archive</button>
</div>
</div>
<div class="product-card product-card--small">
<div class="product-image" style="background: linear-gradient(135deg, #1a1918 0%, #252321 100%); flex-direction: column; gap: 8px;">
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#A28C86" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 10h18"/></svg>
<span style="font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--ghost); text-transform: uppercase;">Case</span>
</div>
<div class="product-info">
<div class="product-name">Premium Hard Case</div>
<div class="product-price">$29.99</div>
<button class="btn-quick-view">Add to Archive</button>
</div>
</div>
<div class="product-card product-card--small">
<div class="product-image" style="background: linear-gradient(135deg, #1a1918 0%, #252321 100%); flex-direction: column; gap: 8px;">
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#A28C86" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v6"/><path d="M6 12h12"/><path d="M8 12v8a2 2 0 002 2h4a2 2 0 002-2v-8"/></svg>
<span style="font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--ghost); text-transform: uppercase;">Stand</span>
</div>
<div class="product-info">
<div class="product-name">Display Stand — Obsidian</div>
<div class="product-price">$34.99</div>
<button class="btn-quick-view">Add to Archive</button>
</div>
</div>
<div class="product-card product-card--small">
<div class="product-image" style="background: linear-gradient(135deg, #1a1918 0%, #252321 100%); flex-direction: column; gap: 8px;">
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#A28C86" stroke-width="1.5" stroke-linecap="round"><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
<span style="font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--ghost); text-transform: uppercase;">Plug</span>
</div>
<div class="product-info">
<div class="product-name">Blade Plug — Chrome</div>
<div class="product-price">$9.99</div>
<button class="btn-quick-view">Add to Archive</button>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================================
16. RECENTLY VIEWED — Recent Access Log
========================================== -->
<section class="section">
<div class="container">
<div class="section-header reveal">
<div class="section-label">ACCESS_LOG</div>
<h2 class="section-title">Recent Access Log</h2>
<div class="section-line"></div>
</div>
<div class="product-grid product-grid--small stagger reveal">
<div class="product-card">
<div class="product-image"><img src="https://camcom.dev/wp-content/uploads/2026/04/darth-vader-rotj.jpg" loading="lazy" alt="Darth Vader ROTJ Lightsaber" style="width: 100%; height: 100%; object-fit: cover;"></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</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/starkiller-se.jpg" loading="lazy" alt="Starkiller SE Lightsaber" style="width: 100%; height: 100%; object-fit: cover;"></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</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/carbon-strike.jpg" loading="lazy" alt="Carbon Strike Lightsaber" style="width: 100%; height: 100%; object-fit: cover;"></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</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" loading="lazy" alt="Dark Hunter Lightsaber" style="width: 100%; height: 100%; object-fit: cover;"></div>
<div class="product-info">
<div class="product-name">Red Simplex V3</div>
<div class="product-rating">
<span class="stars">★★★★☆</span>
<span class="review-count">4.6</span>
</div>
<div class="product-price">$114.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>
<!-- ==========================================
17. 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>
<!-- ==========================================
STICKY ATC BAR
========================================== -->
<div class="sticky-atc" id="sticky-atc">
<div class="container">
<div class="sticky-atc__info">
<span class="sticky-atc__name">Obi-Wan Kenobi EP4 Lightsaber</span>
<span class="sticky-atc__price">$619.99</span>
</div>
<button class="sticky-atc__btn">Add to Archive</button>
</div>
</div>
<!-- ==========================================
JAVASCRIPT
========================================== -->
<script>
/*
* Intersection Observer — scroll reveals.
* Watches .reveal, .reveal-left, .stagger, .section-header.
* Adds 'revealed' class when 15% visible. Each element animates once.
*/
(function() {
var targets = document.querySelectorAll('.reveal, .reveal-left, .stagger, .section-header');
if (!('IntersectionObserver' in window)) {
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);
});
})();
/*
* Review bar chart — animate fill widths on scroll.
*/
(function() {
var breakdown = document.getElementById('reviews-breakdown');
if (!breakdown) return;
var animated = false;
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting && !animated) {
animated = true;
var fills = breakdown.querySelectorAll('.reviews-breakdown__fill');
fills.forEach(function(fill) {
var w = fill.getAttribute('data-width');
fill.style.width = w + '%';
});
observer.unobserve(entry.target);
}
});
}, { threshold: 0.3 });
observer.observe(breakdown);
})();
/*
* Blade length guide — animate bar heights on scroll.
*/
(function() {
var chart = document.getElementById('blade-chart');
if (!chart) return;
var animated = false;
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting && !animated) {
animated = true;
var shafts = chart.querySelectorAll('.blade-guide__shaft');
shafts.forEach(function(shaft) {
var h = shaft.getAttribute('data-height');
shaft.style.height = h + 'px';
});
observer.unobserve(entry.target);
}
});
}, { threshold: 0.3 });
observer.observe(chart);
})();
/*
* Sticky ATC bar — appears when original ATC button scrolls out of view.
*/
(function() {
var btnAtc = document.getElementById('btn-atc');
var stickyAtc = document.getElementById('sticky-atc');
if (!btnAtc || !stickyAtc) return;
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
stickyAtc.classList.remove('visible');
} else {
stickyAtc.classList.add('visible');
}
});
}, { threshold: 0 });
observer.observe(btnAtc);
})();
/*
* Gallery thumbnail click — swaps main image text.
*/
(function() {
var thumbs = document.querySelectorAll('.gallery-thumb');
var main = document.getElementById('gallery-main');
if (!thumbs.length || !main) return;
thumbs.forEach(function(thumb) {
thumb.addEventListener('click', function() {
thumbs.forEach(function(t) { t.classList.remove('active'); });
thumb.classList.add('active');
});
});
})();
/*
* Electronics selector — updates price display.
*/
function selectElectronics(el) {
var options = document.querySelectorAll('.electronics-option');
options.forEach(function(opt) { opt.classList.remove('active'); });
el.classList.add('active');
var price = el.getAttribute('data-price');
var priceEl = document.getElementById('product-price');
var stickyPrice = document.querySelector('.sticky-atc__price');
if (priceEl) priceEl.textContent = '$' + price;
if (stickyPrice) stickyPrice.textContent = '$' + price;
}
/*
* Blade length selector.
*/
function selectBlade(el) {
var options = document.querySelectorAll('.blade-option');
options.forEach(function(opt) { opt.classList.remove('active'); });
el.classList.add('active');
}
/*
* Quantity stepper.
*/
function changeQty(delta) {
var input = document.getElementById('qty');
if (!input) return;
var val = parseInt(input.value, 10) + delta;
if (val < 1) val = 1;
if (val > 10) val = 10;
input.value = val;
}
/*
* FAQ accordion.
*/
function toggleFaq(btn) {
var item = btn.parentElement;
var isActive = item.classList.contains('active');
/* Close all */
document.querySelectorAll('.faq-item').forEach(function(faq) {
faq.classList.remove('active');
});
/* Toggle clicked */
if (!isActive) {
item.classList.add('active');
}
}
</script>
</body>
</html>