/* ============================================================ ערכות עיצוב — 10 themes (soft / academic palettes) Switched via [data-theme="N"] on . Theme 1 = :root default. Each theme overrides color tokens + fonts. The *-rgb triplets feed the translucent overlays (hero, gallery, quotes) so the whole site re-tints cohesively — not just solid fills. ============================================================ */ /* ---- extra Hebrew font families used by some themes ---- */ @import url('https://fonts.googleapis.com/css2?family=David+Libre:wght@400;500;700&family=Noto+Serif+Hebrew:wght@400;500;600;700;800&family=Rubik:wght@400;500;600;700;800&family=Suez+One&display=swap'); /* ===== Theme 1 — נייבי קלאסי רך (default) ===== */ :root, [data-theme="1"] { --ink:#1B2D45; --ink-2:#122036; --ink-soft:#33486A; --ink-rgb:27,45,69; --ink-2-rgb:18,32,54; --ink-soft-rgb:51,72,106; --bronze:#B0894F; --bronze-deep:#8C6A38; --bronze-soft:#DEC9A4; --bronze-rgb:176,137,79; --parchment:#F7F3EC; --stone:#ECE5DA; --stone-2:#E2D9CB; --cream:#FBF9F5; --charcoal:#23272E; --muted:#5C6675; --line:rgba(27,45,69,.12); --serif:'Frank Ruhl Libre',Georgia,serif; --sans:'Heebo','Assistant',system-ui,sans-serif; } /* ===== Theme 2 — מרווה (sage + clay) ===== */ [data-theme="2"] { --ink:#3A4A40; --ink-2:#2A3830; --ink-soft:#56685B; --ink-rgb:58,74,64; --ink-2-rgb:42,56,48; --ink-soft-rgb:86,104,91; --bronze:#A9805E; --bronze-deep:#876446; --bronze-soft:#D8C3AE; --bronze-rgb:169,128,94; --parchment:#F4F2EA; --stone:#E7E4D8; --stone-2:#DCD8C8; --cream:#FAF9F3; --charcoal:#2B2E29; --muted:#66695F; --line:rgba(58,74,64,.13); --serif:'David Libre',Georgia,serif; --sans:'Assistant','Heebo',system-ui,sans-serif; } /* ===== Theme 3 — לבנדר (muted plum/mauve) ===== */ [data-theme="3"] { --ink:#463A52; --ink-2:#342B3E; --ink-soft:#685A76; --ink-rgb:70,58,82; --ink-2-rgb:52,43,62; --ink-soft-rgb:104,90,118; --bronze:#9B7BA3; --bronze-deep:#7A5C82; --bronze-soft:#D9C9DE; --bronze-rgb:155,123,163; --parchment:#F5F2F6; --stone:#EAE3EE; --stone-2:#DFD6E4; --cream:#FBF9FC; --charcoal:#2C2832; --muted:#6B6472; --line:rgba(70,58,82,.13); --serif:'Frank Ruhl Libre',Georgia,serif; --sans:'Heebo','Assistant',system-ui,sans-serif; } /* ===== Theme 4 — כחול ערפילי (dusty slate-blue + teal) ===== */ [data-theme="4"] { --ink:#3A5160; --ink-2:#2A3D49; --ink-soft:#5C7585; --ink-rgb:58,81,96; --ink-2-rgb:42,61,73; --ink-soft-rgb:92,117,133; --bronze:#5E8B89; --bronze-deep:#467370; --bronze-soft:#BFD8D6; --bronze-rgb:94,139,137; --parchment:#F0F4F5; --stone:#E1EAEB; --stone-2:#D4E0E1; --cream:#F8FBFB; --charcoal:#26302F; --muted:#5E6B72; --line:rgba(58,81,96,.13); --serif:'Noto Serif Hebrew',Georgia,serif; --sans:'Heebo','Assistant',system-ui,sans-serif; } /* ===== Theme 5 — טרקוטה (warm brown + terracotta) ===== */ [data-theme="5"] { --ink:#3E332E; --ink-2:#2E2622; --ink-soft:#5E4F47; --ink-rgb:62,51,46; --ink-2-rgb:46,38,34; --ink-soft-rgb:94,79,71; --bronze:#C07A56; --bronze-deep:#9E5E3C; --bronze-soft:#E6C3AC; --bronze-rgb:192,122,86; --parchment:#F6F1EB; --stone:#EDE3D7; --stone-2:#E3D6C6; --cream:#FBF8F3; --charcoal:#2D2622; --muted:#6B5E54; --line:rgba(62,51,46,.13); --serif:'Suez One',Georgia,serif; --sans:'Assistant','Heebo',system-ui,sans-serif; } /* ===== Theme 6 — אזמרגד רך (soft emerald-teal + gold) ===== */ [data-theme="6"] { --ink:#234540; --ink-2:#163330; --ink-soft:#3F635C; --ink-rgb:35,69,64; --ink-2-rgb:22,51,48; --ink-soft-rgb:63,99,92; --bronze:#C2A35A; --bronze-deep:#9E8240; --bronze-soft:#E4D3A6; --bronze-rgb:194,163,90; --parchment:#EFF4F1; --stone:#DFE9E4; --stone-2:#D1DFD9; --cream:#F8FBF9; --charcoal:#212E2B; --muted:#566963; --line:rgba(35,69,64,.13); --serif:'Frank Ruhl Libre',Georgia,serif; --sans:'Heebo','Assistant',system-ui,sans-serif; } /* ===== Theme 7 — פחם מינימלי (neutral charcoal + muted blue, modern sans) ===== */ [data-theme="7"] { --ink:#2C2C30; --ink-2:#1E1E21; --ink-soft:#4D4D54; --ink-rgb:44,44,48; --ink-2-rgb:30,30,33; --ink-soft-rgb:77,77,84; --bronze:#5B7A99; --bronze-deep:#466079; --bronze-soft:#C2D0DE; --bronze-rgb:91,122,153; --parchment:#F4F4F3; --stone:#E8E8E6; --stone-2:#DCDCD9; --cream:#FCFCFB; --charcoal:#262629; --muted:#66666C; --line:rgba(44,44,48,.12); --serif:'Rubik',system-ui,sans-serif; --sans:'Rubik','Heebo',system-ui,sans-serif; } /* ===== Theme 8 — בורדו (soft wine + rose-gold) ===== */ [data-theme="8"] { --ink:#4A2F35; --ink-2:#38242A; --ink-soft:#6E4A52; --ink-rgb:74,47,53; --ink-2-rgb:56,36,42; --ink-soft-rgb:110,74,82; --bronze:#B0846A; --bronze-deep:#8E6249; --bronze-soft:#E2C6B5; --bronze-rgb:176,132,106; --parchment:#F6F0F1; --stone:#ECE0E1; --stone-2:#E1D2D3; --cream:#FBF8F8; --charcoal:#2E2528; --muted:#6E5E61; --line:rgba(74,47,53,.13); --serif:'David Libre',Georgia,serif; --sans:'Heebo','Assistant',system-ui,sans-serif; } /* ===== Theme 9 — פטרול עמוק (deep petrol + amber) ===== */ [data-theme="9"] { --ink:#1F3A41; --ink-2:#142A30; --ink-soft:#3C5C63; --ink-rgb:31,58,65; --ink-2-rgb:20,42,48; --ink-soft-rgb:60,92,99; --bronze:#C9A45C; --bronze-deep:#A38440; --bronze-soft:#E7D4A8; --bronze-rgb:201,164,92; --parchment:#EEF3F3; --stone:#DEE8E8; --stone-2:#CFDEDE; --cream:#F7FBFB; --charcoal:#1F2B2D; --muted:#566A6D; --line:rgba(31,58,65,.13); --serif:'Frank Ruhl Libre',Georgia,serif; --sans:'Assistant','Heebo',system-ui,sans-serif; } /* ===== Theme 10 — חול ושמנת אוורירי (soft taupe + olive-gold) ===== */ [data-theme="10"] { --ink:#4A443B; --ink-2:#38332C; --ink-soft:#6B6456; --ink-rgb:74,68,59; --ink-2-rgb:56,51,44; --ink-soft-rgb:107,100,86; --bronze:#9A8C5A; --bronze-deep:#7C6F42; --bronze-soft:#DBD0AB; --bronze-rgb:154,140,90; --parchment:#F7F5EF; --stone:#EEE9DD; --stone-2:#E4DDCC; --cream:#FCFBF6; --charcoal:#2C2820; --muted:#6C665A; --line:rgba(74,68,59,.13); --serif:'Heebo','Assistant',system-ui,sans-serif; --sans:'Assistant','Heebo',system-ui,sans-serif; } /* smooth transition when switching themes */ body, .header, .hero, .stats, .domains, .leaders, .membership, .contact, .footer, .cmt, .bento__cell, .leader, .tl-body, .train-card, .k-item, .gphoto, .btn, .brand__txt strong { transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); } /* ============================================================ THEME DOCK — 10 floating swatch buttons (bottom-inline-end) ============================================================ */ .theme-dock { position: fixed; right: 18px; left: auto; bottom: 18px; z-index: 1500; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; direction: ltr; } .theme-dock__toggle { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: var(--sh-2); align-self: flex-end; transition: transform .35s var(--ease), background .4s var(--ease); } .theme-dock__toggle:hover { transform: rotate(-12deg) scale(1.06); } .theme-dock__toggle svg { width: 26px; height: 26px; } .theme-dock__panel { background: var(--cream); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-3); padding: 14px; width: 168px; transform-origin: bottom right; transition: opacity .3s var(--ease), transform .35s var(--ease); } .theme-dock.collapsed .theme-dock__panel { opacity: 0; transform: scale(.85) translateY(10px); pointer-events: none; visibility: hidden; } .theme-dock__title { display: block; font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); text-align: center; margin-bottom: 10px; text-transform: uppercase; } .theme-dock__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; } .theme-swatch { position: relative; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--a) 0 52%, var(--b) 52% 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .theme-swatch span { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 1rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); } .theme-swatch:hover { transform: translateY(-3px) scale(1.05); } .theme-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--cream), 0 0 0 5px var(--bronze); transform: scale(1.04); } @media (max-width: 760px) { .theme-dock { right: 12px; left: auto; bottom: 12px; gap: 10px; } .theme-dock__toggle { width: 46px; height: 46px; } .theme-dock__panel { width: 150px; padding: 12px; } } @media (prefers-reduced-motion: reduce) { body, .header, .hero, .stats, .domains, .leaders, .membership, .contact, .footer, .cmt, .bento__cell, .leader, .tl-body, .train-card, .k-item, .gphoto, .btn { transition: none; } }