הנה הקוד המלא של האתר כמסמך HTML עצמאי אחד — העתק הכל לקובץ בשם alen.html ופתח בדפדפן:
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>תכשיטי ALEN</title>
<meta name="description" content="אתר מכירות מלא בעברית (RTL) למותג תכשיטי היוקרה ALEN — עגלת קניות חיה, אקורדיון שאלות נפוצות, ומצב כהה." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Frank+Ruhl+Libre:wght@400;500;700;900&display=swap" />
<style>
/* ============================================================
ALEN — Fine Jewelry. Single file. RTL Hebrew.
Palette: Warm Ivory / Rich Mocha / Antique Gold / Champagne
Type: Fraunces + Frank Ruhl Libre (headlines) · Assistant (body)
============================================================ */
:root {
color-scheme: light;
--ground: #FAF6F0;
--ground-2: #F4EDE1;
--surface: #FFFFFF;
--surface-2: #F7F1E7;
--ink: #2A2420;
--ink-soft: #6E6157;
--ink-mute: #9C9086;
--gold: #9C7A3C;
--gold-deep: #7C5E2C;
--gold-tint: #C7A970;
--champagne: #E6D7BD;
--champagne-2: #F1E8D7;
--line: rgba(42, 36, 32, 0.08);
--line-2: rgba(42, 36, 32, 0.16);
--glass: rgba(250, 246, 240, 0.72);
--scrim: rgba(28, 22, 18, 0.34);
--ok: #4B7B54;
--sale: #A24B39;
--shadow-sm: 0 1px 2px rgba(42,36,32,.04), 0 3px 10px rgba(42,36,32,.05);
--shadow-md: 0 6px 16px rgba(42,36,32,.06), 0 18px 44px rgba(42,36,32,.09);
--shadow-lg: 0 10px 28px rgba(42,36,32,.09), 0 34px 74px rgba(42,36,32,.14);
--r-sm: 10px;
--r: 16px;
--r-lg: 26px;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
--maxw: 1240px;
--pad: clamp(1.15rem, 5vw, 3.75rem);
--step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.88rem);
--step-0: clamp(0.98rem, 0.93rem + 0.24vw, 1.10rem);
--step-1: clamp(1.18rem, 1.06rem + 0.6vw, 1.5rem);
--step-2: clamp(1.5rem, 1.28rem + 1.1vw, 2.25rem);
--step-3: clamp(2rem, 1.55rem + 2.2vw, 3.4rem);
--step-4: clamp(2.7rem, 1.9rem + 4vw, 5.2rem);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--ground: #1A1613;
--ground-2: #211C17;
--surface: #241F19;
--surface-2: #2C261F;
--ink: #F6F0E7;
--ink-soft: #C3B7A8;
--ink-mute: #8E8175;
--gold: #C6A467;
--gold-deep: #A88748;
--gold-tint: #D8BC88;
--champagne: #4A4030;
--champagne-2: #35301F;
--line: rgba(246, 240, 231, 0.10);
--line-2: rgba(246, 240, 231, 0.20);
--glass: rgba(26, 22, 19, 0.72);
--scrim: rgba(0, 0, 0, 0.55);
--ok: #7FB187;
--sale: #D98A76;
--shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 3px 10px rgba(0,0,0,.34);
--shadow-md: 0 6px 16px rgba(0,0,0,.36), 0 18px 44px rgba(0,0,0,.44);
--shadow-lg: 0 10px 28px rgba(0,0,0,.44), 0 34px 74px rgba(0,0,0,.55);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--ground: #1A1613;
--ground-2: #211C17;
--surface: #241F19;
--surface-2: #2C261F;
--ink: #F6F0E7;
--ink-soft: #C3B7A8;
--ink-mute: #8E8175;
--gold: #C6A467;
--gold-deep: #A88748;
--gold-tint: #D8BC88;
--champagne: #4A4030;
--champagne-2: #35301F;
--line: rgba(246, 240, 231, 0.10);
--line-2: rgba(246, 240, 231, 0.20);
--glass: rgba(26, 22, 19, 0.72);
--scrim: rgba(0, 0, 0, 0.55);
--ok: #7FB187;
--sale: #D98A76;
--shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 3px 10px rgba(0,0,0,.34);
--shadow-md: 0 6px 16px rgba(0,0,0,.36), 0 18px 44px rgba(0,0,0,.44);
--shadow-lg: 0 10px 28px rgba(0,0,0,.44), 0 34px 74px rgba(0,0,0,.55);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
margin: 0;
background: var(--ground);
color: var(--ink);
font-family: 'Assistant', -apple-system, 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
font-size: var(--step-0);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: 'Fraunces', 'Frank Ruhl Libre', 'Georgia', serif;
font-weight: 500;
line-height: 1.12;
letter-spacing: -0.005em;
text-wrap: balance;
margin: 0;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 4px;
}
.wrap {
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--pad);
}
.eyebrow {
font-family: 'Assistant', sans-serif;
font-size: var(--step--1);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: 0.7em;
}
.eyebrow::before {
content: "";
width: 26px;
height: 1px;
background: currentColor;
opacity: 0.7;
}
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section-head { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head h2 { font-size: var(--step-3); margin-top: 0.7rem; }
.section-head p { color: var(--ink-soft); margin-top: 0.9rem; }
/* ---------- Buttons ---------- */
.btn {
--bg: var(--ink);
--fg: var(--ground);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55em;
padding: 0.92em 1.6em;
background: var(--bg);
color: var(--fg);
border: 1px solid transparent;
border-radius: 999px;
font-weight: 600;
font-size: var(--step--1);
letter-spacing: 0.04em;
transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out),
box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: scale(0.975); }
.btn--gold { --bg: var(--gold); --fg: #fff; }
.btn--gold:hover { --bg: var(--gold-deep); }
.btn--ghost {
--bg: transparent; --fg: var(--ink);
border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); box-shadow: none; }
.btn--block { width: 100%; }
.icon-btn {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 999px;
background: transparent;
border: 1px solid transparent;
color: var(--ink);
transition: transform 150ms var(--ease-out), background-color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--line); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 20px; height: 20px; }
/* ---------- Header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 60;
transition: box-shadow 240ms var(--ease-out), background-color 240ms var(--ease-out);
}
.site-header::before {
content: "";
position: absolute;
inset: 0;
background: var(--glass);
backdrop-filter: blur(14px) saturate(1.4);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
border-bottom: 1px solid transparent;
transition: border-color 240ms var(--ease-out);
z-index: -1;
}
.site-header[data-scrolled="true"] { box-shadow: 0 1px 0 var(--line), var(--shadow-sm); }
.site-header[data-scrolled="true"]::before { border-bottom-color: var(--line); }
.header-inner {
display: flex;
align-items: center;
gap: clamp(1rem, 3vw, 2.5rem);
padding-block: clamp(0.85rem, 2vw, 1.25rem);
transition: padding-block 240ms var(--ease-out);
}
.site-header[data-scrolled="true"] .header-inner { padding-block: 0.7rem; }
.wordmark {
font-family: 'Fraunces', serif;
font-weight: 600;
font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem);
letter-spacing: 0.42em;
padding-inline-start: 0.42em;
color: var(--ink);
white-space: nowrap;
}
.wordmark span { color: var(--gold); }
.nav {
display: flex;
gap: clamp(1rem, 2.4vw, 2rem);
margin-inline-end: auto;
}
.nav a {
position: relative;
font-size: var(--step--1);
font-weight: 600;
letter-spacing: 0.06em;
color: var(--ink-soft);
padding-block: 0.4em;
transition: color 180ms var(--ease-out);
}
.nav a::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 1.5px;
background: var(--gold);
transform: scaleX(0);
transform-origin: center;
transition: transform 220ms var(--ease-out);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 0.25rem; }
.search {
display: flex;
align-items: center;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
overflow: hidden;
transition: box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(156,122,60,.12); }
.search input {
width: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--ink);
font: inherit;
font-size: var(--step--1);
opacity: 0;
transition: width 260ms var(--ease-out), opacity 200ms var(--ease-out), padding 260ms var(--ease-out);
}
.search[data-open="true"] input {
width: clamp(140px, 22vw, 230px);
padding-inline: 0.9rem;
opacity: 1;
}
.search input::placeholder { color: var(--ink-mute); }
.cart-btn { position: relative; }
.cart-count {
position: absolute;
top: -2px;
inset-inline-end: -2px;
min-width: 18px;
height: 18px;
padding-inline: 4px;
display: grid;
place-items: center;
background: var(--gold);
color: #fff;
font-family: 'Assistant', sans-serif;
font-size: 11px;
font-weight: 700;
line-height: 1;
border-radius: 999px;
border: 2px solid var(--ground);
transform: scale(0);
transition: transform 220ms var(--ease-out);
}
.cart-count[data-visible="true"] { transform: scale(1); }
.cart-btn[data-bump="true"] svg { animation: bump 380ms var(--ease-out); }
@keyframes bump {
30% { transform: scale(1.18) rotate(-6deg); }
60% { transform: scale(0.94) rotate(3deg); }
}
.menu-toggle { display: none; }
/* mobile menu panel */
.mobile-menu {
display: none;
position: fixed;
inset: 0 0 auto 0;
top: 0;
padding: 6rem var(--pad) 2rem;
background: var(--glass);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
border-bottom: 1px solid var(--line);
z-index: 55;
transform: translateY(-100%);
transition: transform 320ms var(--ease-drawer);
}
.mobile-menu[data-open="true"] { transform: translateY(0); }
.mobile-menu a {
display: block;
font-family: 'Fraunces','Frank Ruhl Libre',serif;
font-size: var(--step-2);
padding-block: 0.55rem;
border-bottom: 1px solid var(--line);
color: var(--ink);
}
/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
.hero-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.hero-copy h1 {
font-size: var(--step-4);
font-weight: 500;
margin-block: 1.1rem 0;
}
.hero-copy h1 em {
font-style: italic;
color: var(--gold);
}
.hero-lede {
color: var(--ink-soft);
font-size: var(--step-1);
line-height: 1.55;
max-width: 40ch;
margin-top: 1.4rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.hero-meta {
display: flex;
gap: clamp(1.4rem, 4vw, 2.6rem);
margin-top: 2.6rem;
padding-top: 1.6rem;
border-top: 1px solid var(--line);
}
.hero-meta div { line-height: 1.2; }
.hero-meta b {
font-family: 'Fraunces','Frank Ruhl Libre',serif;
font-size: var(--step-2);
font-weight: 500;
display: block;
}
.hero-meta span { font-size: var(--step--1); color: var(--ink-mute); }
.hero-visual { position: relative; aspect-ratio: 4 / 4.5; }
.hero-stage {
position: absolute;
inset: 0;
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--line);
box-shadow: var(--shadow-lg);
}
.gem {
position: absolute;
inset: 0;
background:
radial-gradient(120% 90% at 22% 18%, rgba(255,255,255,.85), transparent 46%),
radial-gradient(90% 80% at 78% 82%, rgba(124,94,44,.5), transparent 55%),
linear-gradient(135deg, #d9bd85 0%, #b98f4f 34%, #8a6a38 62%, #c9ad78 100%);
}
.gem::after {
content: "";
position: absolute;
inset: -40%;
background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
transform: translateX(-30%);
transition: transform 900ms var(--ease-in-out);
}
.hero-stage:hover .gem::after,
.card:hover .gem::after { transform: translateX(30%); }
.gem--gold { background:
radial-gradient(120% 90% at 22% 18%, rgba(255,255,255,.82), transparent 44%),
radial-gradient(90% 80% at 80% 84%, rgba(120,90,42,.55), transparent 55%),
linear-gradient(135deg, #e6cfa0 0%, #c39d5c 36%, #906c3a 66%, #d8bd8b 100%); }
.gem--silver { background:
radial-gradient(120% 90% at 24% 16%, rgba(255,255,255,.95), transparent 46%),
radial-gradient(90% 80% at 82% 86%, rgba(70,74,82,.45), transparent 55%),
linear-gradient(135deg, #eef0f2 0%, #c3c8ce 38%, #9aa0a8 66%, #dfe3e7 100%); }
.gem--palladium{ background:
radial-gradient(120% 90% at 24% 16%, rgba(255,255,255,.86), transparent 46%),
radial-gradient(90% 80% at 82% 86%, rgba(58,66,78,.5), transparent 55%),
linear-gradient(135deg, #dfe6ec 0%, #aab6c2 38%, #7f8b98 66%, #c8d2db 100%); }
.gem--beads { background:
radial-gradient(120% 90% at 22% 18%, rgba(255,255,255,.8), transparent 42%),
radial-gradient(circle at 30% 32%, #e9d8bd 0 12%, transparent 13%),
radial-gradient(circle at 68% 26%, #dcc7a4 0 9%, transparent 10%),
radial-gradient(circle at 52% 62%, #ecdcc4 0 14%, transparent 15%),
radial-gradient(circle at 24% 74%, #d8c19c 0 10%, transparent 11%),
radial-gradient(circle at 78% 70%, #e4d3b4 0 11%, transparent 12%),
linear-gradient(135deg, #f0e6d4, #d9c5a2); }
.float-badge {
position: absolute;
inset-block-start: clamp(0.75rem, 3vw, 1.5rem);
inset-inline-start: clamp(0.75rem, 3vw, 1.5rem);
width: clamp(88px, 15vw, 122px);
aspect-ratio: 1;
display: grid;
place-items: center;
border-radius: 999px;
background: var(--glass);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--line-2);
box-shadow: var(--shadow-md);
text-align: center;
animation: floaty 6s ease-in-out infinite;
}
.float-badge b {
font-family: 'Fraunces','Frank Ruhl Libre',serif;
font-size: var(--step-1);
font-weight: 500;
color: var(--gold);
display: block;
}
.float-badge span { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
@keyframes floaty { 50% { transform: translateY(-10px); } }
.float-chip {
position: absolute;
inset-block-end: clamp(0.9rem, 3vw, 1.8rem);
inset-inline-end: clamp(-0.4rem, 2vw, 0.6rem);
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.6rem 0.9rem 0.6rem 0.6rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
box-shadow: var(--shadow-lg);
animation: floaty 6s ease-in-out infinite 1.5s;
}
.float-chip .mini {
width: 38px; height: 38px; border-radius: 999px; overflow: hidden; flex: none;
border: 1px solid var(--line);
}
.float-chip b { font-family:'Fraunces','Frank Ruhl Libre',serif; font-weight: 500; }
.float-chip span { display: block; font-size: var(--step--1); color: var(--ink-mute); line-height: 1; }
/* ---------- Trust bar ---------- */
.trust {
background: var(--ink);
color: var(--ground);
}
.trust-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(255,255,255,.1);
}
.trust-item {
background: var(--ink);
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
padding: 1.15rem 1rem;
text-align: center;
font-size: var(--step--1);
letter-spacing: 0.02em;
}
.trust-item svg { width: 20px; height: 20px; color: var(--gold-tint); flex: none; }
.trust-item b { font-weight: 600; }
/* ---------- Categories ---------- */
.cat-grid {
display: grid;
grid-template-columns: 1.25fr 1fr 1.05fr;
grid-template-rows: clamp(190px, 24vw, 250px) clamp(190px, 24vw, 250px);
grid-template-areas:
"gold silver beads"
"gold palladium beads";
gap: clamp(0.9rem, 2vw, 1.4rem);
}
.cat {
position: relative;
border-radius: var(--r);
overflow: hidden;
border: 1px solid var(--line);
display: flex;
align-items: flex-end;
padding: clamp(1rem, 2.4vw, 1.6rem);
isolation: isolate;
transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.cat > .gem { z-index: -2; transition: transform 500ms var(--ease-out); }
.cat::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(200deg, rgba(28,22,18,0) 30%, rgba(28,22,18,.62) 100%);
}
.cat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cat:hover > .gem { transform: scale(1.05); }
.cat h3 { color: #fff; font-size: var(--step-2); }
.cat p { color: rgba(255,255,255,.82); font-size: var(--step--1); }
.cat .arrow {
position: absolute;
inset-block-start: clamp(1rem, 2.4vw, 1.6rem);
inset-inline-end: clamp(1rem, 2.4vw, 1.6rem);
width: 34px; height: 34px;
display: grid; place-items: center;
border-radius: 999px;
background: var(--glass);
color: var(--ink);
transition: transform 240ms var(--ease-out);
}
.cat:hover .arrow { transform: translate(-4px, -2px); }
.cat--gold { grid-area: gold; }
.cat--silver { grid-area: silver; }
.cat--palladium { grid-area: palladium; }
.cat--beads { grid-area: beads; }
/* ---------- Products ---------- */
.prod-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.search-status { font-size: var(--step--1); color: var(--ink-mute); }
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
gap: clamp(1rem, 2.4vw, 1.75rem);
}
.card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.card-media {
position: relative;
aspect-ratio: 1;
overflow: hidden;
isolation: isolate;
}
.card-badges {
position: absolute;
inset-block-start: 0.8rem;
inset-inline-start: 0.8rem;
display: flex;
gap: 0.4rem;
z-index: 2;
}
.tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
padding: 0.32em 0.7em;
border-radius: 999px;
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line);
text-transform: uppercase;
}
.tag--sale { background: var(--sale); color: #fff; border-color: transparent; }
.tag--new { background: var(--ink); color: var(--ground); border-color: transparent; }
.card-quick {
position: absolute;
inset-inline: 0.8rem;
inset-block-end: 0.8rem;
z-index: 2;
transform: translateY(calc(100% + 0.9rem));
opacity: 0;
transition: transform 260ms var(--ease-out), opacity 200ms var(--ease-out);
}
.card-body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.card-body h3 { font-size: var(--step-1); font-weight: 500; }
.card-cat { font-size: var(--step--1); color: var(--gold); font-weight: 600; letter-spacing: 0.08em; }
.price { display: flex; align-items: baseline; gap: 0.55rem; margin-top: auto; padding-top: 0.5rem; }
.price b { font-size: var(--step-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.price s { color: var(--ink-mute); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.card-cta { margin-top: 0.7rem; }
@media (hover: hover) and (pointer: fine) {
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.card:hover .card-quick { transform: translateY(0); opacity: 1; }
.card:hover .card-cta { display: none; }
}
/* ---------- Reviews ---------- */
.reviews-scroll {
display: grid;
grid-auto-flow: column;
grid-auto-columns: min(88vw, 380px);
gap: clamp(1rem, 2.4vw, 1.6rem);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 1rem;
margin-inline: calc(var(--pad) * -1);
padding-inline: var(--pad);
scrollbar-width: none;
}
.reviews-scroll::-webkit-scrollbar { display: none; }
.review {
scroll-snap-align: start;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
padding: clamp(1.4rem, 3vw, 2rem);
display: flex;
flex-direction: column;
gap: 1rem;
}
.stars { display: flex; gap: 3px; color: var(--gold); }
.stars svg { width: 16px; height: 16px; }
.review p { font-family: 'Fraunces','Frank Ruhl Libre',serif; font-size: var(--step-1); line-height: 1.5; }
.review footer { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; }
.review .avatar {
width: 42px; height: 42px; border-radius: 999px;
display: grid; place-items: center;
background: var(--champagne-2); color: var(--gold-deep);
font-family: 'Fraunces',serif; font-weight: 600;
border: 1px solid var(--line);
}
.review cite { font-style: normal; font-weight: 600; }
.review span { display: flex; align-items: center; gap: 0.35rem; font-size: var(--step--1); color: var(--ok); }
.review span svg { width: 13px; height: 13px; }
.reviews-nav { display: flex; gap: 0.5rem; }
/* ---------- About ---------- */
.about-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.about-visual { aspect-ratio: 5/6; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); position: relative; }
.about-copy h2 { font-size: var(--step-3); margin-top: 0.8rem; }
.about-copy p { color: var(--ink-soft); margin-top: 1.1rem; }
.stats { display: flex; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.stats b { font-family: 'Fraunces','Frank Ruhl Libre',serif; font-size: var(--step-3); font-weight: 500; display: block; color: var(--gold); }
.stats span { font-size: var(--step--1); color: var(--ink-mute); }
/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: clamp(1.15rem, 2.5vw, 1.6rem) 0;
background: transparent;
border: 0;
text-align: start;
font-family: 'Fraunces','Frank Ruhl Libre',serif;
font-size: var(--step-1);
font-weight: 500;
color: var(--ink);
}
.faq-q .pm {
flex: none;
width: 28px; height: 28px;
display: grid; place-items: center;
border: 1px solid var(--line-2);
border-radius: 999px;
position: relative;
transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.faq-q .pm::before, .faq-q .pm::after {
content: "";
position: absolute;
background: currentColor;
transition: transform 240ms var(--ease-out), opacity 200ms var(--ease-out);
}
.faq-q .pm::before { width: 11px; height: 1.5px; }
.faq-q .pm::after { width: 1.5px; height: 11px; }
.faq-item[data-open="true"] .pm { background: var(--gold); border-color: var(--gold); color: #fff; }
.faq-item[data-open="true"] .pm::after { transform: rotate(90deg); opacity: 0; }
.faq-a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 260ms var(--ease-out);
}
.faq-a > div { overflow: hidden; }
.faq-a p { color: var(--ink-soft); padding-bottom: clamp(1.15rem, 2.5vw, 1.6rem); max-width: 68ch; }
.faq-item[data-open="true"] .faq-a { grid-template-rows: 1fr; }
/* ---------- Newsletter ---------- */
.newsletter { }
.news-box {
position: relative;
background: var(--ink);
color: var(--ground);
border-radius: var(--r-lg);
padding: clamp(2.2rem, 6vw, 4.5rem);
overflow: hidden;
text-align: center;
}
.news-box .glow {
position: absolute;
width: 420px; height: 420px;
border-radius: 999px;
background: radial-gradient(circle, rgba(199,169,112,.45), transparent 70%);
inset-block-start: -180px;
inset-inline-start: -120px;
pointer-events: none;
}
.news-box .eyebrow { color: var(--gold-tint); }
.news-box h2 { font-size: var(--step-3); margin-top: 0.8rem; }
.news-box p { color: rgba(250,246,240,.72); margin-top: 0.9rem; max-width: 44ch; margin-inline: auto; }
.news-form {
display: flex;
gap: 0.6rem;
max-width: 460px;
margin: 1.8rem auto 0;
flex-wrap: wrap;
}
.news-form input {
flex: 1 1 220px;
padding: 0.95em 1.3em;
border-radius: 999px;
border: 1px solid rgba(250,246,240,.24);
background: rgba(250,246,240,.06);
color: var(--ground);
font: inherit;
font-size: var(--step--1);
transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
.news-form input::placeholder { color: rgba(250,246,240,.5); }
.news-form input:focus-visible { outline: none; border-color: var(--gold-tint); background: rgba(250,246,240,.1); }
.news-form input[aria-invalid="true"] { border-color: var(--sale); }
.news-note { font-size: var(--step--1); color: rgba(250,246,240,.55); margin-top: 1rem; min-height: 1.2em; transition: color 200ms; }
.news-note[data-state="ok"] { color: var(--gold-tint); }
.news-note[data-state="err"] { color: #E7A18F; }
/* ---------- Contact ---------- */
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
gap: clamp(1rem, 2.4vw, 1.6rem);
}
.contact-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
padding: clamp(1.4rem, 3vw, 1.9rem);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.contact-card .ico {
width: 40px; height: 40px; border-radius: 999px;
display: grid; place-items: center;
background: var(--champagne-2); color: var(--gold-deep);
margin-bottom: 0.5rem;
}
.contact-card .ico svg { width: 19px; height: 19px; }
.contact-card h3 { font-size: var(--step-1); font-weight: 500; }
.contact-card p { color: var(--ink-soft); font-size: var(--step--1); }
.contact-card a.line { color: var(--gold); font-weight: 600; }
.wa-btn { --bg:#25a05a; --fg:#fff; align-self: flex-start; margin-top: 0.4rem; }
.wa-btn:hover { --bg:#1f8b4d; }
/* ---------- Footer ---------- */
.site-footer {
background: var(--ground-2);
border-top: 1px solid var(--line);
padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer-top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: clamp(1.6rem, 4vw, 3rem);
}
.footer-brand .wordmark { font-size: 1.5rem; }
.footer-brand p { color: var(--ink-soft); font-size: var(--step--1); margin-top: 1rem; max-width: 34ch; }
.footer-col h4 { font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); font-family: 'Assistant',sans-serif; font-weight: 700; margin-bottom: 1rem; }
.footer-col a { display: block; color: var(--ink-soft); font-size: var(--step--1); padding-block: 0.35rem; transition: color 160ms var(--ease-out); }
.footer-col a:hover { color: var(--gold); }
.pay-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.pay {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
padding: 0.4em 0.7em;
border: 1px solid var(--line-2);
border-radius: 7px;
color: var(--ink-soft);
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-top: clamp(2rem, 5vw, 3.5rem);
padding-top: 1.6rem;
border-top: 1px solid var(--line);
font-size: var(--step--1);
color: var(--ink-mute);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-bottom a:hover { color: var(--gold); }
/* ---------- Cart drawer ---------- */
.scrim {
position: fixed;
inset: 0;
background: var(--scrim);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 280ms var(--ease-out);
z-index: 90;
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
.drawer {
position: fixed;
inset-block: 0;
left: 0;
width: min(430px, 92vw);
background: var(--ground);
border-inline-end: 1px solid var(--line);
box-shadow: var(--shadow-lg);
transform: translateX(-101%);
transition: transform 420ms var(--ease-drawer);
z-index: 100;
display: flex;
flex-direction: column;
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.3rem 1.4rem;
border-bottom: 1px solid var(--line);
}
.drawer-head h2 { font-size: var(--step-1); font-weight: 500; }
.ship-bar { padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.ship-bar .track { height: 6px; border-radius: 999px; background: var(--surface-2); margin-top: 0.6rem; overflow: hidden; border: 1px solid var(--line); }
.ship-bar .fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-tint), var(--gold)); border-radius: 999px; transition: width 400ms var(--ease-out); }
.ship-bar b { color: var(--gold); }
.drawer-items {
flex: 1;
overflow-y: auto;
padding: 0.6rem 1.4rem;
display: flex;
flex-direction: column;
}
.line {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 0.9rem;
padding: 1rem 0;
border-bottom: 1px solid var(--line);
}
.line .thumb { width: 64px; height: 64px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.line h3 { font-size: var(--step-0); font-weight: 500; }
.line .l-cat { font-size: var(--step--1); color: var(--gold); }
.line .qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; margin-top: 0.5rem; }
.line .qty button { width: 26px; height: 26px; display: grid; place-items: center; background: transparent; border: 0; color: var(--ink); border-radius: 999px; transition: background-color 150ms; }
.line .qty button:hover { background: var(--surface-2); }
.line .qty span { min-width: 26px; text-align: center; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.line .l-price { text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.line .l-remove { background: transparent; border: 0; color: var(--ink-mute); font-size: var(--step--1); padding: 0; margin-top: 0.5rem; text-align: end; transition: color 150ms; }
.line .l-remove:hover { color: var(--sale); }
.cart-empty { text-align: center; color: var(--ink-mute); padding: 3rem 1rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.cart-empty svg { width: 40px; height: 40px; opacity: 0.4; }
.drawer-foot { padding: 1.3rem 1.4rem calc(1.3rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--ground); }
.drawer-foot .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
.drawer-foot .row.total { font-size: var(--step-1); }
.drawer-foot .row.total b { font-family: 'Fraunces','Frank Ruhl Libre',serif; font-weight: 600; font-variant-numeric: tabular-nums; }
.drawer-foot small { color: var(--ink-mute); font-size: var(--step--1); }
/* ---------- Toast ---------- */
.toast {
position: fixed;
inset-block-end: 24px;
left: 50%;
z-index: 120;
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.85rem 1.3rem;
background: var(--ink);
color: var(--ground);
border-radius: 999px;
box-shadow: var(--shadow-lg);
font-size: var(--step--1);
font-weight: 600;
transform: translate(-50%, 14px);
opacity: 0;
pointer-events: none;
transition: transform 220ms var(--ease-out), opacity 200ms var(--ease-out);
}
.toast[data-show="true"] { transform: translate(-50%, 0); opacity: 1; }
.toast svg { width: 17px; height: 17px; color: var(--gold-tint); }
/* ---------- Reveal on load ---------- */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
}
/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-visual { max-width: 460px; margin-inline: auto; width: 100%; }
.about-grid { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
html { scroll-padding-top: 84px; }
.nav, .search { display: none; }
.menu-toggle { display: inline-grid; }
.mobile-menu { display: block; }
.cat-grid {
grid-template-columns: 1fr 1fr;
grid-template-areas: "gold gold" "silver palladium" "beads beads";
grid-template-rows: repeat(3, clamp(160px, 40vw, 210px));
}
}
@media (max-width: 620px) {
.trust-inner { grid-template-columns: 1fr; }
.trust-item { justify-content: flex-start; text-align: start; }
.cat-grid { grid-template-columns: 1fr; grid-template-areas: "gold" "silver" "palladium" "beads"; grid-template-rows: repeat(4, clamp(180px, 52vw, 220px)); }
.footer-top { grid-template-columns: 1fr; }
.hero-meta { flex-wrap: wrap; gap: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
.float-badge, .float-chip { animation: none; }
}
</style>
</head>
<body>
<!-- ============ HEADER ============ -->
<header class="site-header" id="top">
<div class="wrap header-inner">
<a href="#top" class="wordmark" aria-label="ALEN — עמוד הבית">AL<span>E</span>N</a>
<nav class="nav" aria-label="ניווט ראשי">
<a href="#top">בית</a>
<a href="#collections">קולקציות</a>
<a href="#about">אודות</a>
<a href="#faq">שאלות נפוצות</a>
<a href="#contact">צור קשר</a>
</nav>
<div class="header-actions">
<form class="search" id="search" role="search" aria-label="חיפוש בקטלוג">
<button type="button" class="icon-btn" id="searchToggle" aria-label="פתיחת חיפוש" aria-expanded="false">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
</button>
<input type="search" id="searchInput" placeholder="חיפוש תכשיט…" aria-label="מונח חיפוש" />
</form>
<button type="button" class="icon-btn" id="themeToggle" aria-label="החלפת מצב תצוגה">
<svg id="themeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2M12 19.5v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M2.5 12h2M19.5 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
</button>
<button type="button" class="icon-btn cart-btn" id="cartToggle" aria-label="פתיחת סל הקניות" data-bump="false">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8h12l-1 12H7L6 8Z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>
<span class="cart-count" id="cartCount" data-visible="false">0</span>
</button>
<button type="button" class="icon-btn menu-toggle" id="menuToggle" aria-label="תפריט" aria-expanded="false">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
</button>
</div>
</div>
</header>
<nav class="mobile-menu" id="mobileMenu" aria-label="ניווט למובייל">
<a href="#top">בית</a>
<a href="#collections">קולקציות</a>
<a href="#about">אודות</a>
<a href="#faq">שאלות נפוצות</a>
<a href="#contact">צור קשר</a>
</nav>
<main>
<!-- ============ HERO ============ -->
<section class="hero wrap" aria-labelledby="hero-title">
<div class="hero-grid">
<div class="hero-copy reveal">
<span class="eyebrow">עבודת יד · תל אביב</span>
<h1 id="hero-title">פשטות היא הצורה הכי <em>יקרה</em> של יופי</h1>
<p class="hero-lede">
ALEN הוא בית תכשיטים קטן שמאמין שפריט אחד מדויק שווה יותר מעשרה בינוניים.
כל טבעת, שרשרת וצמיד נוצקים אצלנו בסטודיו, בציפוי שנשאר יפה שנים.
</p>
<div class="hero-actions">
<a href="#collections" class="btn btn--gold">גלו את הקולקציה
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
</a>
<a href="#about" class="btn btn--ghost">הסיפור שלנו</a>
</div>
<div class="hero-meta">
<div><b>12</b><span>שנות אומנות</span></div>
<div><b>40K+</b><span>לקוחות מרוצים</span></div>
<div><b>4.9</b><span>דירוג ממוצע</span></div>
</div>
</div>
<div class="hero-visual reveal">
<div class="hero-stage">
<div class="gem gem--gold"></div>
</div>
<div class="float-badge">
<div>
<b>18K</b>
<span>Gold Fill</span>
</div>
</div>
<div class="float-chip">
<div class="mini"><div class="gem gem--silver" style="position:static;width:100%;height:100%"></div></div>
<div>
<b>טבעת Solitaire</b>
<span>₪189</span>
</div>
</div>
</div>
</div>
</section>
<!-- ============ TRUST BAR ============ -->
<section class="trust" aria-label="הבטחות המותג">
<div class="wrap">
<div class="trust-inner">
<div class="trust-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13h11V5H3v8Z"/><path d="M14 8h4l3 3v2h-7"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></svg>
<span>משלוח חינם בקנייה מעל <b>₪250</b></span>
</div>
<div class="trust-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
<span>החזרה תוך <b>30 יום</b>, ללא שאלות</span>
</div>
<div class="trust-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.5-3 8.5-7 10-4-1.5-7-5.5-7-10V6l7-3Z"/><path d="M9 12l2 2 4-4"/></svg>
<span>אחריות ציפוי <b>לכל החיים</b></span>
</div>
</div>
</div>
</section>
<!-- ============ CATEGORIES ============ -->
<section class="section wrap" id="collections" aria-labelledby="cat-title">
<div class="section-head reveal">
<span class="eyebrow">קולקציות</span>
<h2 id="cat-title">ארבע משפחות, שפה עיצובית אחת</h2>
<p>בחרו את החומר שמדבר אליכם. כל קטגוריה נבנתה סביב גימור, משקל ומרקם משלה.</p>
</div>
<div class="cat-grid reveal">
<a class="cat cat--gold" href="#bestsellers">
<div class="gem gem--gold"></div>
<span class="arrow"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg></span>
<div>
<h3>זהב</h3>
<p>גוון חם, ציפוי 18 קראט · 14 דגמים</p>
</div>
</a>
<a class="cat cat--silver" href="#bestsellers">
<div class="gem gem--silver"></div>
<span class="arrow"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg></span>
<div>
<h3>כסף</h3>
<p>כסף 925 סטרלינג · 21 דגמים</p>
</div>
</a>
<a class="cat cat--palladium" href="#bestsellers">
<div class="gem gem--palladium"></div>
<span class="arrow"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg></span>
<div>
<h3>פלדיום</h3>
<p>לבן קריר, עמיד להשחרה · 9 דגמים</p>
</div>
</a>
<a class="cat cat--beads" href="#bestsellers">
<div class="gem gem--beads"></div>
<span class="arrow"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg></span>
<div>
<h3>חרוזים</h3>
<p>אבני חן טבעיות, השחלה ידנית · 12 דגמים</p>
</div>
</a>
</div>
</section>
<!-- ============ BEST SELLERS ============ -->
<section class="section wrap" id="bestsellers" aria-labelledby="best-title" style="padding-top:0">
<div class="prod-head reveal">
<div class="section-head" style="margin-bottom:0">
<span class="eyebrow">הכי נמכרים</span>
<h2 id="best-title">הפריטים שחוזרים אלינו הכי הרבה</h2>
</div>
<p class="search-status" id="searchStatus" role="status" aria-live="polite"></p>
</div>
<div class="grid" id="productGrid">
<!-- product cards injected by JS -->
</div>
</section>
<!-- ============ REVIEWS ============ -->
<section class="section" id="reviews" aria-labelledby="rev-title">
<div class="wrap">
<div class="prod-head reveal">
<div class="section-head" style="margin-bottom:0">
<span class="eyebrow">לקוחות מספרים</span>
<h2 id="rev-title">4.9 מתוך 5, על בסיס 2,140 ביקורות</h2>
</div>
<div class="reviews-nav">
<button type="button" class="icon-btn" id="revPrev" aria-label="ביקורת קודמת">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>
</button>
<button type="button" class="icon-btn" id="revNext" aria-label="ביקורת הבאה">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
</button>
</div>
</div>
</div>
<div class="reviews-scroll reveal" id="reviewsScroll">
<article class="review">
<div class="stars" aria-label="5 מתוך 5 כוכבים"></div>
<p>"הזמנתי את שרשרת הזהב לאירוסין של אחותי. הגיעה תוך יומיים באריזה מהממת, והגימור נראה יקר בהרבה מהמחיר."</p>
<footer><span class="avatar">מ</span><div><cite>מאיה ל.</cite><span><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>רכישה מאומתת</span></div></footer>
</article>
<article class="review">
<div class="stars" aria-label="5 מתוך 5 כוכבים"></div>
<p>"לובשת את טבעת הפלדיום כל יום כבר שנה, כולל מקלחות וים. אפס השחרה. שירות הלקוחות בוואטסאפ ענו לי תוך דקות."</p>
<footer><span class="avatar">ד</span><div><cite>דניאל כ.</cite><span><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>רכישה מאומתת</span></div></footer>
</article>
<article class="review">
<div class="stars" aria-label="5 מתוך 5 כוכבים"></div>
<p>"קניתי סט צמידי חרוזים למתנה והוספתי הקדשה. קיבלתי תמונה של האריזה לפני המשלוח. רמת תשומת לב שלא רואים היום."</p>
<footer><span class="avatar">ש</span><div><cite>שירה ב.</cite><span><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>רכישה מאומתת</span></div></footer>
</article>
<article class="review">
<div class="stars" aria-label="5 מתוך 5 כוכבים"></div>
<p>"התלבטתי במידה, שלחתי הודעה וקיבלתי מדריך מדידה מדויק. הטבעת יושבת מושלם. הוחזרתי לקוחה קבועה."</p>
<footer><span class="avatar">נ</span><div><cite>נועה פ.</cite><span><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>רכישה מאומתת</span></div></footer>
</article>
<article class="review">
<div class="stars" aria-label="5 מתוך 5 כוכבים"></div>
<p>"הזמנתי שרשרת כסף מינימליסטית לעצמי אחרי חודשים של חיפושים. סוף סוף משהו עדין באמת. כבר הזמנתי שנייה במתנה."</p>
<footer><span class="avatar">א</span><div><cite>איתי ר.</cite><span><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>רכישה מאומתת</span></div></footer>
</article>
</div>
</section>
<!-- ============ ABOUT ============ -->
<section class="section wrap" id="about" aria-labelledby="about-title">
<div class="about-grid">
<div class="about-visual reveal">
<div class="gem gem--beads" style="position:absolute;inset:0"></div>
</div>
<div class="about-copy reveal">
<span class="eyebrow">אודות ALEN</span>
<h2 id="about-title">התחלנו בשולחן אחד ליד חלון בפלורנטין</h2>
<p>
ב-2014 אלן פתחה סטודיו קטן עם מבער אחד, פינצטה ורעיון עקשן: תכשיטים
שנראים כמו יורשה משפחתית, במחיר שאפשר לחיות איתו. עד היום כל פריט עובר
דרך ידיים אנושיות לפני שהוא נכנס לקופסה.
</p>
<p>
אנחנו לא עושים קולקציות ענק. אנחנו משחררים מעט דגמים בשנה, מלטשים כל אחד
עד שהוא מרגיש נכון, ומלווים אותו באחריות ציפוי לכל החיים.
</p>
<div class="stats">
<div><b>2014</b><span>שנת ההקמה</span></div>
<div><b>200+</b><span>דגמים ייחודיים</span></div>
<div><b>100%</b><span>יציקה בישראל</span></div>
</div>
</div>
</div>
</section>
<!-- ============ FAQ ============ -->
<section class="section wrap" id="faq" aria-labelledby="faq-title">
<div class="section-head reveal">
<span class="eyebrow">שאלות נפוצות</span>
<h2 id="faq-title">כל מה שכדאי לדעת לפני שמזמינים</h2>
</div>
<div class="faq-list reveal" id="faqList">
<div class="faq-item" data-open="true">
<button type="button" class="faq-q" aria-expanded="true">
כמה זמן לוקח משלוח ומה העלות?
<span class="pm" aria-hidden="true"></span>
</button>
<div class="faq-a"><div><p>משלוח שליח עד הבית מגיע תוך 2–4 ימי עסקים. איסוף עצמי מהסטודיו בתל אביב זמין תוך 24 שעות. משלוח חינם בכל הזמנה מעל ₪250, אחרת ₪29. כל חבילה נשלחת עם מספר מעקב ובאריזת מתנה סטנדרטית.</p></div></div>
</div>
<div class="faq-item" data-open="false">
<button type="button" class="faq-q" aria-expanded="false">
איך מטפלים בתכשיט כדי שהציפוי יחזיק?
<span class="pm" aria-hidden="true"></span>
</button>
<div class="faq-a"><div><p>הימנעו ממגע עם בושם, קרם ידיים וכלור ישירות על הפריט. אחרי שימוש נגבו עם המטלית הרכה שמצורפת לכל הזמנה, ואחסנו בשקית הבד. לניקוי יסודי — מים פושרים וסבון עדין. פריטי פלדיום עמידים גם למים ולמלח.</p></div></div>
</div>
<div class="faq-item" data-open="false">
<button type="button" class="faq-q" aria-expanded="false">
אפשר להזמין מידה מיוחדת או התאמה אישית?
<span class="pm" aria-hidden="true"></span>
</button>
<div class="faq-a"><div><p>בהחלט. רוב הטבעות זמינות במידות 5–12, וניתן להזמין מידה מדויקת או חריטה אישית עד 15 תווים בתוספת ₪45 וכ-5 ימי עבודה. שלחו לנו הודעת וואטסאפ עם הדגם והבקשה ונחזור עם הצעה ותאריך אספקה.</p></div></div>
</div>
<div class="faq-item" data-open="false">
<button type="button" class="faq-q" aria-expanded="false">
מה מדיניות ההחזרות וההחלפות?
<span class="pm" aria-hidden="true"></span>
</button>
<div class="faq-a"><div><p>יש לכם 30 יום להחזיר או להחליף כל פריט שלא נחרט, כל עוד הוא במצב חדש ובאריזתו. ההחזר הכספי מתבצע לאותו אמצעי תשלום תוך 5–7 ימי עסקים. עלות המשלוח חזרה על חשבוננו בהחלפה הראשונה.</p></div></div>
</div>
<div class="faq-item" data-open="false">
<button type="button" class="faq-q" aria-expanded="false">
איך עובדת אחריות הציפוי לכל החיים?
<span class="pm" aria-hidden="true"></span>
</button>
<div class="faq-a"><div><p>אם הציפוי נשחק בשימוש רגיל — בכל שלב — שלחו לנו את הפריט ונחדש אותו ללא עלות מלבד דמי משלוח סמליים. האחריות אישית ותקפה כל עוד הפריט בבעלותכם. שמרו את מייל האישור של ההזמנה כהוכחת רכישה.</p></div></div>
</div>
</div>
</section>
<!-- ============ NEWSLETTER ============ -->
<section class="section wrap newsletter" aria-labelledby="news-title">
<div class="news-box reveal">
<span class="glow" aria-hidden="true"></span>
<span class="eyebrow">מועדון ALEN</span>
<h2 id="news-title">10% הנחה על ההזמנה הראשונה</h2>
<p>הצטרפו לרשימה ותהיו הראשונים לדעת על דגמים חדשים, מבצעים סגורים וטיפים לטיפוח. בלי ספאם, אפשר להסיר בכל רגע.</p>
<form class="news-form" id="newsForm" novalidate>
<input type="email" id="newsEmail" placeholder="כתובת האימייל שלכם" aria-label="כתובת אימייל" autocomplete="email" required />
<button type="submit" class="btn btn--gold">קבלו את הקוד</button>
</form>
<p class="news-note" id="newsNote" role="status" aria-live="polite">מבצע לחברי מועדון חדשים בלבד.</p>
</div>
</section>
<!-- ============ CONTACT ============ -->
<section class="section wrap" id="contact" aria-labelledby="contact-title">
<div class="section-head reveal">
<span class="eyebrow">צור קשר</span>
<h2 id="contact-title">מדברים איתנו ישירות</h2>
<p>הצוות בסטודיו זמין בכל ערוץ. רוב ההודעות מקבלות מענה תוך שעה בשעות הפעילות.</p>
</div>
<div class="contact-grid reveal">
<div class="contact-card">
<span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20 15.5v3a2 2 0 0 1-2.2 2A18 18 0 0 1 3 5.2 2 2 0 0 1 5 3h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .8 2.9a2 2 0 0 1-.5 2.1L9 13a15 15 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.4 1.9.7 2.9.8a2 2 0 0 1 1.7 2Z"/></svg></span>
<h3>וואטסאפ</h3>
<p>הדרך המהירה ביותר — לשאלות על מידה, מלאי ומעקב הזמנה.</p>
<a class="btn wa-btn" href="https://wa.me/972501234567" target="_blank" rel="noopener">
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 2a10 10 0 0 0-8.6 15l-1.3 4.7 4.8-1.3A10 10 0 1 0 12 2Zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.5-4-4.7-4.2-.1-.2-1-1.4-1-2.6s.6-1.8.9-2.1c.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .5l-.4.5-.3.4c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.7-.1l.9-1c.2-.3.4-.2.7-.1l2 .9c.3.2.5.2.6.4.1.1.1.7-.1 1.3Z"/></svg>
050-1234567
</a>
</div>
<div class="contact-card">
<span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></svg></span>
<h3>אימייל</h3>
<p>לפניות התאמה אישית, שיתופי פעולה וסיטונאות.</p>
<a class="line" href="mailto:studio@alen.co.il">studio@alen.co.il</a>
</div>
<div class="contact-card">
<span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s7-5.7 7-11a7 7 0 1 0-14 0c0 5.3 7 11 7 11Z"/><circle cx="12" cy="10" r="2.5"/></svg></span>
<h3>הסטודיו</h3>
<p>רחוב הרצל 48, פלורנטין, תל אביב-יפו. ביקור בתיאום מראש.</p>
<a class="line" href="#contact">א׳–ה׳ · 10:00–18:00</a>
</div>
</div>
</section>
</main>
<!-- ============ FOOTER ============ -->
<footer class="site-footer">
<div class="wrap">
<div class="footer-top">
<div class="footer-brand">
<span class="wordmark">AL<span>E</span>N</span>
<p>בית תכשיטים עצמאי מתל אביב. יציקה ידנית, ציפוי שמחזיק, ואחריות לכל החיים.</p>
<div class="pay-row" aria-label="אמצעי תשלום">
<span class="pay">Visa</span>
<span class="pay">Mastercard</span>
<span class="pay">American Express</span>
<span class="pay">PayPal</span>
<span class="pay">Apple Pay</span>
<span class="pay">bit</span>
</div>
</div>
<div class="footer-col">
<h4>קנייה</h4>
<a href="#collections">כל הקולקציות</a>
<a href="#bestsellers">הכי נמכרים</a>
<a href="#collections">כרטיס מתנה</a>
<a href="#faq">מדריך מידות</a>
</div>
<div class="footer-col">
<h4>שירות</h4>
<a href="#faq">משלוחים והחזרות</a>
<a href="#faq">אחריות ציפוי</a>
<a href="#contact">צור קשר</a>
<a href="#faq">טיפוח תכשיטים</a>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 ALEN Fine Jewelry. כל הזכויות שמורות.</span>
<nav aria-label="קישורים משפטיים">
<a href="#faq">תקנון</a>
<a href="#faq">מדיניות פרטיות</a>
<a href="#faq">מדיניות החזרות</a>
<a href="#faq">הצהרת נגישות</a>
</nav>
</div>
</div>
</footer>
<!-- ============ CART DRAWER ============ -->
<div class="scrim" id="scrim" hidden></div>
<aside class="drawer" id="drawer" aria-label="סל קניות" aria-hidden="true">
<div class="drawer-head">
<h2>סל הקניות</h2>
<button type="button" class="icon-btn" id="drawerClose" aria-label="סגירת הסל">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg>
</button>
</div>
<div class="ship-bar" id="shipBar">
<span id="shipMsg">הוסיפו פריטים כדי ליהנות ממשלוח חינם.</span>
<div class="track"><div class="fill" id="shipFill"></div></div>
</div>
<div class="drawer-items" id="drawerItems"></div>
<div class="drawer-foot" id="drawerFoot" hidden>
<div class="row"><span>סכום ביניים</span><span id="subtotal">₪0</span></div>
<div class="row"><span>משלוח</span><span id="shipCost">מחושב בקופה</span></div>
<div class="row total"><span>סה״כ</span><b id="total">₪0</b></div>
<small>המסים כלולים במחיר. קופונים מוזנים בעמוד התשלום.</small>
<button type="button" class="btn btn--block btn--gold" id="checkoutBtn" style="margin-top:1rem">מעבר לתשלום מאובטח</button>
</div>
</aside>
<div class="toast" id="toast" role="status" aria-live="polite">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
<span id="toastMsg">נוסף לסל</span>
</div>
<script>
(function () {
"use strict";
var $ = function (s, c) { return (c || document).querySelector(s); };
var $$ = function (s, c) { return Array.prototype.slice.call((c || document).querySelectorAll(s)); };
var ILS = function (n) { return "₪" + Math.round(n).toLocaleString("he-IL"); };
/* ---------- Data ---------- */
var PRODUCTS = [
{ id: "p1", name: "טבעת Solitaire זהב", cat: "זהב", price: 189, old: 240, badge: "sale", gem: "gem--gold" },
{ id: "p2", name: "שרשרת חוליה כסף", cat: "כסף", price: 149, old: 0, badge: "new", gem: "gem--silver" },
{ id: "p3", name: "צמיד פלדיום Cuff", cat: "פלדיום", price: 320, old: 0, badge: "", gem: "gem--palladium" },
{ id: "p4", name: "עגילי חרוז אקוומרין", cat: "חרוזים", price: 96, old: 128, badge: "sale", gem: "gem--beads" },
{ id: "p5", name: "טבעת חותם זהב", cat: "זהב", price: 210, old: 0, badge: "", gem: "gem--gold" },
{ id: "p6", name: "שרשרת טניס כסף", cat: "כסף", price: 265, old: 330, badge: "sale", gem: "gem--silver" },
{ id: "p7", name: "טבעת נישואין פלדיום", cat: "פלדיום", price: 380, old: 0, badge: "new", gem: "gem--palladium" },
{ id: "p8", name: "צמיד חרוזי אוניקס", cat: "חרוזים", price: 118, old: 0, badge: "", gem: "gem--beads" }
];
var FREE_SHIP = 250;
var byId = {};
PRODUCTS.forEach(function (p) { byId[p.id] = p; });
/* ---------- Render products ---------- */
var grid = $("#productGrid");
PRODUCTS.forEach(function (p) {
var badge = p.badge === "sale"
? '<span class="tag tag--sale">מבצע</span>'
: (p.badge === "new" ? '<span class="tag tag--new">חדש</span>' : "");
var oldPrice = p.old ? '<s>' + ILS(p.old) + '</s>' : "";
var el = document.createElement("article");
el.className = "card";
el.setAttribute("data-name", p.name);
el.setAttribute("data-cat", p.cat);
el.innerHTML =
'<div class="card-media">' +
'<div class="card-badges">' + badge + '</div>' +
'<div class="gem ' + p.gem + '"></div>' +
'<button type="button" class="btn btn--gold card-quick add-btn" data-id="' + p.id + '">הוספה מהירה</button>' +
'</div>' +
'<div class="card-body">' +
'<span class="card-cat">' + p.cat + '</span>' +
'<h3>' + p.name + '</h3>' +
'<div class="price"><b>' + ILS(p.price) + '</b>' + oldPrice + '</div>' +
'<button type="button" class="btn btn--ghost card-cta add-btn" data-id="' + p.id + '">הוספה לסל</button>' +
'</div>';
grid.appendChild(el);
});
/* ---------- Star ratings ---------- */
var starSvg = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.5l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.8 6.2 20.9l1.1-6.5L2.6 9.8l6.5-.9z"/></svg>';
$$(".stars").forEach(function (s) { s.innerHTML = new Array(5).fill(starSvg).join(""); });
/* ---------- Cart ---------- */
var cart = {};
try {
var saved = localStorage.getItem("alen_cart");
if (saved) {
var parsed = JSON.parse(saved) || {};
Object.keys(parsed).forEach(function (k) {
if (byId[k] && parsed[k] > 0) cart[k] = Math.floor(parsed[k]);
});
}
} catch (e) { cart = {}; }
var elCount = $("#cartCount");
var elItems = $("#drawerItems");
var elFoot = $("#drawerFoot");
var elCartBtn = $("#cartToggle");
function persist() {
try { localStorage.setItem("alen_cart", JSON.stringify(cart)); } catch (e) {}
}
function cartQty() {
return Object.keys(cart).reduce(function (a, k) { return a + cart[k]; }, 0);
}
function cartSubtotal() {
return Object.keys(cart).reduce(function (a, k) { return a + byId[k].price * cart[k]; }, 0);
}
function renderCart() {
var keys = Object.keys(cart).filter(function (k) { return cart[k] > 0; });
var qty = cartQty();
elCount.textContent = qty;
elCount.setAttribute("data-visible", qty > 0 ? "true" : "false");
if (!keys.length) {
elItems.innerHTML =
'<div class="cart-empty">' +
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8h12l-1 12H7L6 8Z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>' +
'<p>הסל שלכם עדיין ריק.<br>הזמן להוסיף משהו יפה.</p>' +
'</div>';
elFoot.hidden = true;
} else {
elItems.innerHTML = keys.map(function (k) {
var p = byId[k], q = cart[k];
return '' +
'<div class="line">' +
'<div class="thumb"><div class="gem ' + p.gem + '" style="position:static;width:100%;height:100%"></div></div>' +
'<div>' +
'<span class="l-cat">' + p.cat + '</span>' +
'<h3>' + p.name + '</h3>' +
'<div class="qty" role="group" aria-label="כמות עבור ' + p.name + '">' +
'<button type="button" class="q-dec" data-id="' + k + '" aria-label="הפחתת כמות">–</button>' +
'<span>' + q + '</span>' +
'<button type="button" class="q-inc" data-id="' + k + '" aria-label="הוספת כמות">+</button>' +
'</div>' +
'</div>' +
'<div>' +
'<div class="l-price">' + ILS(p.price * q) + '</div>' +
'<button type="button" class="l-remove" data-id="' + k + '">הסרה</button>' +
'</div>' +
'</div>';
}).join("");
elFoot.hidden = false;
}
var sub = cartSubtotal();
$("#subtotal").textContent = ILS(sub);
$("#total").textContent = ILS(sub);
$("#shipCost").textContent = sub >= FREE_SHIP && sub > 0 ? "חינם" : "מחושב בקופה";
var remain = Math.max(0, FREE_SHIP - sub);
var pct = Math.min(100, sub / FREE_SHIP * 100);
$("#shipFill").style.width = pct + "%";
$("#shipMsg").innerHTML = sub <= 0
? "הוסיפו פריטים כדי ליהנות ממשלוח חינם."
: (remain > 0
? "עוד <b>" + ILS(remain) + "</b> ותקבלו משלוח חינם"
: "מגניב — יש לכם <b>משלוח חינם</b>");
persist();
}
function flash(msg) {
var t = $("#toast");
$("#toastMsg").textContent = msg || "נוסף לסל";
t.setAttribute("data-show", "true");
clearTimeout(flash._t);
flash._t = setTimeout(function () { t.setAttribute("data-show", "false"); }, 2400);
}
function addToCart(id) {
if (!byId[id]) return;
cart[id] = (cart[id] || 0) + 1;
renderCart();
flash(byId[id].name + " נוסף לסל");
elCartBtn.setAttribute("data-bump", "true");
setTimeout(function () { elCartBtn.setAttribute("data-bump", "false"); }, 420);
}
document.addEventListener("click", function (e) {
var add = e.target.closest(".add-btn");
if (add) { addToCart(add.getAttribute("data-id")); return; }
var inc = e.target.closest(".q-inc");
if (inc) { cart[inc.getAttribute("data-id")]++; renderCart(); return; }
var dec = e.target.closest(".q-dec");
if (dec) {
var d = dec.getAttribute("data-id");
cart[d] = Math.max(0, (cart[d] || 0) - 1);
if (cart[d] === 0) delete cart[d];
renderCart();
return;
}
var rm = e.target.closest(".l-remove");
if (rm) { delete cart[rm.getAttribute("data-id")]; renderCart(); return; }
});
$("#checkoutBtn").addEventListener("click", function () {
flash("מעבר לתשלום — דמו בלבד");
});
/* ---------- Drawer open/close ---------- */
var drawer = $("#drawer");
var scrim = $("#scrim");
var lastFocus = null;
function openDrawer() {
lastFocus = document.activeElement;
scrim.hidden = false;
requestAnimationFrame(function () { scrim.setAttribute("data-open", "true"); });
drawer.setAttribute("data-open", "true");
drawer.setAttribute("aria-hidden", "false");
document.body.style.overflow = "hidden";
$("#drawerClose").focus();
}
function closeDrawer() {
scrim.setAttribute("data-open", "false");
drawer.setAttribute("data-open", "false");
drawer.setAttribute("aria-hidden", "true");
document.body.style.overflow = "";
setTimeout(function () { scrim.hidden = true; }, 300);
if (lastFocus) lastFocus.focus();
}
$("#cartToggle").addEventListener("click", openDrawer);
$("#drawerClose").addEventListener("click", closeDrawer);
scrim.addEventListener("click", closeDrawer);
/* ---------- Search ---------- */
var search = $("#search");
var searchInput = $("#searchInput");
var searchStatus = $("#searchStatus");
$("#searchToggle").addEventListener("click", function () {
var open = search.getAttribute("data-open") === "true";
search.setAttribute("data-open", open ? "false" : "true");
this.setAttribute("aria-expanded", open ? "false" : "true");
if (!open) setTimeout(function () { searchInput.focus(); }, 60);
else { searchInput.value = ""; applySearch(""); }
});
function applySearch(q) {
q = (q || "").trim();
var cards = $$("#productGrid .card");
var shown = 0;
cards.forEach(function (c) {
var hit = !q ||
c.getAttribute("data-name").indexOf(q) > -1 ||
c.getAttribute("data-cat").indexOf(q) > -1;
c.style.display = hit ? "" : "none";
if (hit) shown++;
});
searchStatus.textContent = q ? (shown + " תוצאות עבור “" + q + "”") : "";
}
searchInput.addEventListener("input", function () { applySearch(this.value); });
search.addEventListener("submit", function (e) {
e.preventDefault();
applySearch(searchInput.value);
document.getElementById("bestsellers").scrollIntoView({ behavior: "smooth", block: "start" });
});
/* ---------- Theme toggle ---------- */
var root = document.documentElement;
var sunPath = '<circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2M12 19.5v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M2.5 12h2M19.5 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/>';
var moonPath = '<path d="M20 14.5A8 8 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5Z"/>';
try {
var savedTheme = localStorage.getItem("alen_theme");
if (savedTheme) root.setAttribute("data-theme", savedTheme);
} catch (e) {}
function syncThemeIcon() {
var dark = root.getAttribute("data-theme") === "dark" ||
(!root.getAttribute("data-theme") && window.matchMedia("(prefers-color-scheme: dark)").matches);
$("#themeIcon").innerHTML = dark ? moonPath : sunPath;
}
syncThemeIcon();
$("#themeToggle").addEventListener("click", function () {
var cur = root.getAttribute("data-theme");
var next = cur === "dark" ? "light" : (cur === "light" ? "dark" : (window.matchMedia("(prefers-color-scheme: dark)").matches ? "light" : "dark"));
root.setAttribute("data-theme", next);
try { localStorage.setItem("alen_theme", next); } catch (e) {}
syncThemeIcon();
});
/* ---------- Mobile menu ---------- */
var menu = $("#mobileMenu");
$("#menuToggle").addEventListener("click", function () {
var open = menu.getAttribute("data-open") === "true";
menu.setAttribute("data-open", open ? "false" : "true");
this.setAttribute("aria-expanded", open ? "false" : "true");
});
$$("#mobileMenu a").forEach(function (a) {
a.addEventListener("click", function () {
menu.setAttribute("data-open", "false");
$("#menuToggle").setAttribute("aria-expanded", "false");
});
});
/* ---------- FAQ accordion ---------- */
$$("#faqList .faq-q").forEach(function (btn) {
btn.addEventListener("click", function () {
var item = btn.closest(".faq-item");
var open = item.getAttribute("data-open") === "true";
item.setAttribute("data-open", open ? "false" : "true");
btn.setAttribute("aria-expanded", open ? "false" : "true");
});
});
/* ---------- Reviews nav ---------- */
var rs = $("#reviewsScroll");
function scrollReviews(dir) {
var card = rs.querySelector(".review");
var step = card ? card.offsetWidth + 22 : 360;
rs.scrollBy({ left: dir * step, behavior: "smooth" });
}
$("#revNext").addEventListener("click", function () { scrollReviews(-1); });
$("#revPrev").addEventListener("click", function () { scrollReviews(1); });
/* ---------- Newsletter ---------- */
var newsForm = $("#newsForm");
var newsEmail = $("#newsEmail");
var newsNote = $("#newsNote");
newsForm.addEventListener("submit", function (e) {
e.preventDefault();
var v = newsEmail.value.trim();
var ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
if (!ok) {
newsEmail.setAttribute("aria-invalid", "true");
newsNote.setAttribute("data-state", "err");
newsNote.textContent = "כתובת האימייל לא נראית תקינה. נסו שוב.";
newsEmail.focus();
return;
}
newsEmail.removeAttribute("aria-invalid");
newsNote.setAttribute("data-state", "ok");
newsNote.textContent = "מעולה! קוד ההנחה ALEN10 בדרך לתיבה שלכם.";
newsForm.reset();
});
/* ---------- Header scroll state ---------- */
var header = $(".site-header");
var onScroll = function () {
header.setAttribute("data-scrolled", window.scrollY > 12 ? "true" : "false");
};
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
/* ---------- Esc key ---------- */
document.addEventListener("keydown", function (e) {
if (e.key !== "Escape") return;
if (drawer.getAttribute("data-open") === "true") closeDrawer();
if (menu.getAttribute("data-open") === "true") { menu.setAttribute("data-open", "false"); $("#menuToggle").setAttribute("aria-expanded", "false"); }
if (search.getAttribute("data-open") === "true") { search.setAttribute("data-open", "false"); $("#searchToggle").setAttribute("aria-expanded", "false"); }
});
/* ---------- Reveal on scroll ---------- */
if ("IntersectionObserver" in window && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (en) {
if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); }
});
}, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
$$(".reveal").forEach(function (el) { io.observe(el); });
} else {
$$(".reveal").forEach(function (el) { el.classList.add("in"); });
}
renderCart();
})();
</script>
</body>
</html>