/* ============================================================ Amitid — concept-skin.css ערכת נושא לקונספט: פרקים, מסילה, רמזי גלילה, אקסנטים, כרטיס זהות. כל אתר בוחר וריאנט אחד על ה- ומכוונן את המשתנים לצבעי הלקוח: .cs.cs--elegant יופי / תכשיטים / סטודיו — סריף, רגוע, זהוב .cs.cs--tech תיקוני סלולר / שירות טכני — מונו, קונטרסט, "מסופי" .cs.cs--warm מסעדות / בתי קפה — עגול, חמים, תיאבון .cs.cs--bold מספרות / כושר / שיפוצים — כבד, גרפי, אנרגטי ============================================================ */ .cs { --cs-accent: #8A6BA6; --cs-ink: #292233; --cs-soft: rgba(41, 34, 51, .14); --cs-muted: #6A5A78; --cs-num: 700 13px/1 ui-monospace, "SF Mono", Menlo, monospace; --cs-label: 800 13px/1 "Assistant", sans-serif; --cs-track: .12em; } .cs--elegant { --cs-accent: #A8874F; --cs-num: 400 15px/1 "Bellefair", "Frank Ruhl Libre", serif; --cs-label: 400 15px/1 "Bellefair", serif; --cs-track: .22em; } .cs--tech { --cs-accent: #2E9BE6; --cs-num: 700 12px/1 ui-monospace, Menlo, monospace; --cs-label: 700 12px/1 ui-monospace, Menlo, monospace; --cs-track: .16em; } .cs--warm { --cs-accent: #D9702B; --cs-num: 800 14px/1 "Assistant", sans-serif; --cs-label: 800 14px/1 "Assistant", sans-serif; --cs-track: .06em; } .cs--bold { --cs-accent: #F25C05; --cs-num: 900 15px/1 "Karantina", "Assistant", sans-serif; --cs-label: 900 15px/1 "Karantina", "Assistant", sans-serif; --cs-track: .1em; } /* ---------- כותרת פרק ---------- */ .cs-chapter { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .cs-chapter__n { font: var(--cs-num); color: var(--cs-accent); letter-spacing: var(--cs-track); } .cs-chapter__line { flex: none; width: 46px; height: 1px; background: var(--cs-accent); opacity: .55; } .cs-chapter__label { font: var(--cs-label); color: var(--cs-muted); letter-spacing: var(--cs-track); text-transform: uppercase; } /* ---------- מסילת פרקים ---------- */ .cs-rail { position: fixed; inset-inline-start: 18px; top: 50%; transform: translateY(-50%); display: grid; gap: 14px; z-index: 40; } .cs-rail__dot { display: flex; align-items: center; gap: 8px; text-decoration: none; } .cs-rail__dot i { flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--cs-accent); background: transparent; transition: all .25s; } .cs-rail__dot span { font: var(--cs-num); color: var(--cs-muted); letter-spacing: var(--cs-track); opacity: 0; transform: translateX(6px); transition: all .25s; white-space: nowrap; } .cs-rail__dot.on i { background: var(--cs-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cs-accent) 22%, transparent); } .cs-rail__dot.on span, .cs-rail__dot:hover span { opacity: 1; transform: none; } @media (max-width: 900px) { .cs-rail { display: none; } } /* ---------- רמז גלילה ---------- */ .cs-cue { display: inline-flex; align-items: center; gap: 10px; font: var(--cs-label); color: var(--cs-muted); letter-spacing: var(--cs-track); transition: opacity .4s, transform .4s; } .cs-cue.gone { opacity: 0; transform: translateY(8px); pointer-events: none; } .cs-cue__arrow { width: 1px; height: 26px; background: var(--cs-accent); transform-origin: top; animation: cs-drop 1.8s ease-in-out infinite; } @keyframes cs-drop { 0%, 100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } } /* ---------- אקסנט דאטה ---------- */ .cs-readout { display: inline-block; font: var(--cs-num); color: var(--cs-accent); letter-spacing: var(--cs-track); font-variant-numeric: tabular-nums; border: 1px solid var(--cs-soft); border-radius: 999px; padding: 6px 12px; background: color-mix(in srgb, var(--cs-accent) 8%, transparent); } /* ---------- כרטיס זהות עסק ---------- */ .cs-id { border: 1px solid var(--cs-soft); border-radius: 18px; padding: 18px 20px; background: color-mix(in srgb, var(--cs-accent) 5%, transparent); max-width: 420px; } .cs-id__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px dashed var(--cs-soft); } .cs-id__name { font: var(--cs-label); font-size: 17px; color: var(--cs-ink); letter-spacing: var(--cs-track); } .cs-id__status { display: inline-flex; align-items: center; gap: 6px; font: var(--cs-num); color: var(--cs-muted); } .cs-id__status i { width: 7px; height: 7px; border-radius: 50%; background: #C0392B; } .cs-id__status.on i { background: #1E7A44; box-shadow: 0 0 0 3px rgba(30, 122, 68, .18); } .cs-id__body { margin: 0; padding-top: 12px; display: grid; gap: 8px; } .cs-id__row { display: flex; justify-content: space-between; gap: 14px; } .cs-id__row dt { font: var(--cs-num); color: var(--cs-muted); letter-spacing: var(--cs-track); margin: 0; } .cs-id__row dd { margin: 0; font-weight: 700; color: var(--cs-ink); font-size: 14.5px; text-align: end; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .cs-cue__arrow { animation: none; } .cs-cue, .cs-rail__dot i, .cs-rail__dot span { transition: none; } }