/* ============================================================================ AETHER — Design System Tokens מותג: בית תוכנה פרימיום | "מהרעיון ועד למערכת חיה" כיוון ויזואלי: פיוצ'ריסטי 3D · Deep Space · Neon · Glassmorphism · Holographic ---------------------------------------------------------------------------- קובץ זה מגדיר אך ורק :root tokens (ועזרי מערכת). אין כאן עיצוב סקשנים. כל סקשן צורך את המשתנים האלה דרך var(--...). אל תדרסו את הפלטה. ============================================================================ */ /* @property — מאפשר אינטרפולציה חלקה של זווית ה-aurora ב-GPU (animatable custom prop). נדרש לפני השימוש ב---grad-aurora-live. דפדפנים ללא תמיכה פשוט יקבלו זווית סטטית. */ @property --aurora-angle { syntax: ""; inherits: false; initial-value: 120deg; } :root { color-scheme: dark; /* ========================================================================== 1. פלטת בסיס — DEEP SPACE --------------------------------------------------------------------------- שכבות עומק מ"חלל עמוק" (כמעט שחור עם גוון נייבי) ועד משטחים מוארים. בנוי כסולם עולה: 0 = העמוק ביותר (רקע), גבוה יותר = משטח קרוב יותר. הגוונים מעט קרים (נייבי) כדי לתת תחושת אטמוספרה תלת-ממדית. ========================================================================== */ --space-0: #04060f; /* רקע אבסולוטי — תהום החלל */ --space-50: #070a17; /* רקע ראשי של העמוד */ --space-100:#0a0e20; /* רקע סקשן מורם */ --space-200:#0e1430; /* כרטיס / משטח */ --space-300:#141b3e; /* כרטיס מורם / hover */ --space-400:#1c244f; /* גבול עדין מואר */ --space-500:#2a3468; /* גבול / מפריד */ --space-600:#3a4685; /* טקסט mute עמוק */ /* "טמפרטורת חלל" פר-אזור — מדרגים את הרקע מסקשן לסקשן (oklab tint עדין) */ --space-tint-cyan: color-mix(in oklab, var(--space-50), var(--cyan) 6%); --space-tint-violet: color-mix(in oklab, var(--space-50), var(--violet) 6%); --space-tint-magenta: color-mix(in oklab, var(--space-50), var(--magenta) 5%); /* state surfaces — מצבי משטח/גבול אחידים (לפני זה hover היה מפוזר ב-styles) */ --surface-hover: rgba(255 255 255 / 0.07); --surface-active: rgba(255 255 255 / 0.10); --border-hover: rgba(var(--cyan-rgb) / 0.30); /* גוונים ניטרליים-קרירים לטקסט וקווים על רקע כהה */ --ink-0: #f4f7ff; /* לבן כמעט-טהור עם נגיעת קרח — כותרות */ --ink-100: #dfe6fb; /* טקסט גוף בהיר */ --ink-200: #b3bee0; /* טקסט משני */ --ink-300: #9aa6cf; /* טקסט mute / תוויות — הובהר ל-WCAG AA */ --ink-400: #7d88b5; /* placeholder / disabled — הובהר ל-≥4.5:1 על space-50 */ --ink-500: #5b6492; /* mute עמוק יותר — מספור/total דקורטיבי בלבד (לא לטקסט גוף) */ /* ========================================================================== 2. אקסנטים — NEON --------------------------------------------------------------------------- אקסנט ראשי: Cyan/Electric blue (אנרגיה, טכנולוגיה). אקסנט שני: סגול/מג'נטה (פרימיום, יצירתיות). לכל אחד גרסת bright (לזוהר/הדגשה) ו-deep (לרקעים/מצבים). נשמרים גם כ-RGB טריפלטים לשימוש ב-rgba() עם שקיפות (glow/glass). ========================================================================== */ --cyan: #2de2ff; /* ניאון ציאן ראשי */ --cyan-bright: #7af2ff; /* היילייט ציאן */ --cyan-deep: #0a9fc4; /* ציאן עמוק */ --cyan-rgb: 45 226 255; --violet: #9b5cff; /* סגול אלקטרי */ --violet-bright: #c79bff; /* היילייט סגול */ --violet-deep: #5e2bc4; /* סגול עמוק */ --violet-rgb: 155 92 255; --magenta: #ff4dd2; /* מג'נטה ניאון */ --magenta-bright: #ff8ee4; --magenta-deep: #c01f99; --magenta-rgb: 255 77 210; /* גוון iridescent/holographic נוסף — טורקיז-ירקרק לנגיעות קשת */ --iris: #4dffd2; --iris-rgb: 77 255 210; /* גוונים חמים נוספים — לאקסנטים של מותגים (תיק עבודות) */ --gold: #ffc66e; /* זהב חם — יוקרה/קולינריה */ --gold-rgb: 255 198 110; --rose: #ff7ea8; /* ורד פודרתי — טיפוח/פרימיום */ --rose-rgb: 255 126 168; /* אקסנטים סמנטיים */ --accent: var(--cyan); /* אקסנט המותג הראשי */ --accent-2: var(--violet); /* אקסנט משני */ --accent-3: var(--magenta); /* אקסנט שלישי / נדיר */ --accent-rgb: var(--cyan-rgb); /* triplet סמנטי לאקסנט הפעיל — glow/focus עוקבים אחריו (אפשר override לוקלי) */ --success: #38f5b0; --warning: #ffcf5c; --danger: #ff5d7a; /* דיו כהה על גרדיאנט/אקסנט בהיר — token יחיד לאחידות (כפתור ראשי, badge, check) */ --on-accent: #051018; /* גוונים נגזרים תפיסתית-נכונים (oklab) — hover/active אחידים במקום ערכים קשיחים */ --cyan-hover: color-mix(in oklab, var(--cyan), white 12%); --cyan-active: color-mix(in oklab, var(--cyan), black 10%); --violet-hover: color-mix(in oklab, var(--violet), white 12%); --violet-active: color-mix(in oklab, var(--violet), black 10%); --magenta-hover: color-mix(in oklab, var(--magenta), white 12%); /* ========================================================================== 3. גרדיאנטים בשם --------------------------------------------------------------------------- שמות תיאוריים. שימוש: background: var(--grad-aurora); ל-text-gradient: background:var(--grad-...); -webkit-background-clip:text; ========================================================================== */ /* aurora — קשת זוהרת cyan→violet→magenta. גיבור הכותרות וה-text gradient */ --grad-aurora: linear-gradient( 120deg, var(--cyan) 0%, var(--violet) 52%, var(--magenta) 100% ); /* glow — הילה רכה ציאן→סגול, לכפתורים ו-CTA */ --grad-glow: linear-gradient( 135deg, var(--cyan) 0%, var(--violet) 100% ); /* holographic — קשת מלאה איריזית, לקצוות/גבולות מנצנצים */ --grad-holographic: linear-gradient( 100deg, var(--iris) 0%, var(--cyan) 28%, var(--violet) 60%, var(--magenta) 82%, var(--iris) 100% ); /* iridescent — קונית רכה, לאפקטי "שמן על מים" / orbs */ --grad-iridescent: conic-gradient( from 210deg at 50% 50%, var(--cyan) 0deg, var(--violet) 90deg, var(--magenta) 170deg, var(--iris) 250deg, var(--cyan) 360deg ); /* nebula — רקע אטמוספרי כהה עם נגיעות צבע. רקע סקשנים / הירו */ --grad-nebula: radial-gradient( 120% 120% at 18% 0%, rgba(var(--violet-rgb) / 0.22) 0%, transparent 46% ), radial-gradient( 120% 120% at 100% 8%, rgba(var(--cyan-rgb) / 0.18) 0%, transparent 50% ), radial-gradient( 90% 90% at 50% 110%, rgba(var(--magenta-rgb) / 0.14) 0%, transparent 55% ), linear-gradient(180deg, var(--space-50) 0%, var(--space-0) 100%); /* surface — גרדיאנט עדין לכרטיסים (תחושת זכוכית מוארת מלמעלה) */ --grad-surface: linear-gradient( 160deg, rgba(255 255 255 / 0.06) 0%, rgba(255 255 255 / 0.015) 38%, rgba(255 255 255 / 0) 100% ); /* line — קו מפריד זוהר שדועך בקצוות */ --grad-line: linear-gradient( 90deg, transparent 0%, rgba(var(--cyan-rgb) / 0.6) 50%, transparent 100% ); /* sheen — ברק חולף לכפתורים/כרטיסים (אנימציית hover) */ --grad-sheen: linear-gradient( 105deg, transparent 0%, rgba(255 255 255 / 0) 38%, rgba(255 255 255 / 0.35) 50%, rgba(255 255 255 / 0) 62%, transparent 100% ); /* aurora-soft — אותם צבעים ב-opacity נמוך, ל-glow אטמוספרי מאחורי כרטיסים */ --grad-aurora-soft: linear-gradient( 120deg, rgba(var(--cyan-rgb) / 0.6) 0%, rgba(var(--violet-rgb) / 0.6) 52%, rgba(var(--magenta-rgb) / 0.6) 100% ); /* aurora חיה — מסתובבת דרך @property --aurora-angle (אינטרפולציה ב-GPU, אפס repaint). שימוש: background: var(--grad-aurora-live) על text-clip בלבד, עם האנימציה ב-styles.css */ --grad-aurora-live: linear-gradient( var(--aurora-angle, 120deg), var(--cyan) 0%, var(--violet) 52%, var(--magenta) 100% ); /* mesh — gradient רב-מוקדי לא-סימטרי, ה-look של 2025/2026. רקע סקשנים/hero ambient */ --grad-mesh: radial-gradient(40% 50% at 15% 20%, rgba(var(--cyan-rgb) / 0.20) 0%, transparent 60%), radial-gradient(45% 55% at 80% 10%, rgba(var(--violet-rgb) / 0.20) 0%, transparent 62%), radial-gradient(50% 50% at 85% 80%, rgba(var(--magenta-rgb) / 0.16) 0%, transparent 60%), radial-gradient(55% 60% at 25% 90%, rgba(var(--iris-rgb) / 0.12) 0%, transparent 64%), radial-gradient(70% 70% at 50% 50%, rgba(var(--violet-rgb) / 0.08) 0%, transparent 70%); /* noise overlay — SVG turbulence data-URI נגד banding בגרדיאנטים כהים. שימוש: background-image: var(--noise-overlay); opacity: var(--grain-opacity) */ --noise-overlay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* ========================================================================== 4. זכוכית — GLASSMORPHISM --------------------------------------------------------------------------- ערכים מוכנים לשכבת זכוכית: רקע, גבול, ו-blur. שימוש: background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter: var(--glass-blur); ========================================================================== */ --glass-bg: rgba(255 255 255 / 0.045); --glass-bg-strong: rgba(255 255 255 / 0.085); --glass-border: rgba(255 255 255 / 0.12); --glass-border-lit: rgba(var(--cyan-rgb) / 0.35); --glass-blur: blur(18px) saturate(160%); --glass-blur-soft: blur(10px) saturate(140%); /* ========================================================================== 5. צללים וזוהר — SHADOWS & GLOWS --------------------------------------------------------------------------- צללים אמביינטיים נקיים (depth) + glows צבעוניים (neon). ========================================================================== */ /* depth — צללים אמביינטיים לעומק תלת-ממדי */ --shadow-xs: 0 1px 2px rgba(0 0 0 / 0.4); --shadow-sm: 0 2px 8px rgba(0 0 0 / 0.45); --shadow-md: 0 10px 30px -8px rgba(0 0 0 / 0.55); --shadow-lg: 0 24px 60px -16px rgba(0 0 0 / 0.65); --shadow-xl: 0 40px 100px -24px rgba(0 0 0 / 0.75); /* elevation לכרטיסי זכוכית — צל + קו אור פנימי עליון */ --shadow-card: 0 24px 60px -20px rgba(0 0 0 / 0.7), 0 2px 0 0 rgba(255 255 255 / 0.06) inset, 0 0 0 1px rgba(255 255 255 / 0.04) inset; /* float ramp — צללים מרובדים (2-4 שכבות) לאובייקט מרחף מעל "רצפת חלל" — ריאליזם depth */ --shadow-float-sm: 0 1px 2px rgba(0 0 0 / 0.30), 0 4px 10px -2px rgba(0 0 0 / 0.35); --shadow-float-md: 0 2px 4px rgba(0 0 0 / 0.30), 0 8px 16px rgba(0 0 0 / 0.35), 0 24px 48px -12px rgba(0 0 0 / 0.50); --shadow-float-lg: 0 2px 4px rgba(0 0 0 / 0.28), 0 10px 22px -4px rgba(0 0 0 / 0.38), 0 28px 56px -10px rgba(0 0 0 / 0.50), 0 56px 110px -24px rgba(0 0 0 / 0.62); /* contact-shadow צבעוני — קושר אלמנט לרקע ע"י "צביעת הרצפה" (חתימת depth של Stripe/Linear) */ --shadow-contact-cyan: 0 32px 64px -24px rgba(var(--cyan-rgb) / 0.40); --shadow-contact-violet: 0 32px 64px -24px rgba(var(--violet-rgb) / 0.40); --shadow-contact-magenta: 0 32px 64px -24px rgba(var(--magenta-rgb) / 0.36); /* edge-light — קצה זכוכית שתופס אור עליון (inner top highlight + hairline) */ --edge-light: inset 0 1px 0 rgba(255 255 255 / 0.14), inset 0 0 0 1px rgba(255 255 255 / 0.04); /* glows ניאון — להילה סביב אלמנטים אינטראקטיביים */ --glow-cyan: 0 0 24px rgba(var(--cyan-rgb) / 0.55), 0 0 64px rgba(var(--cyan-rgb) / 0.30); --glow-cyan-sm: 0 0 12px rgba(var(--cyan-rgb) / 0.45); --glow-violet: 0 0 24px rgba(var(--violet-rgb) / 0.55), 0 0 64px rgba(var(--violet-rgb) / 0.30); --glow-magenta: 0 0 24px rgba(var(--magenta-rgb) / 0.50), 0 0 64px rgba(var(--magenta-rgb) / 0.28); /* glow לכפתור ראשי — שילוב cyan+violet */ --glow-cta: 0 0 0 1px rgba(var(--cyan-rgb) / 0.4), 0 8px 24px -6px rgba(var(--cyan-rgb) / 0.5), 0 8px 40px -8px rgba(var(--violet-rgb) / 0.45); --glow-cta-hover: 0 0 0 1px rgba(var(--cyan-rgb) / 0.7), 0 10px 30px -6px rgba(var(--cyan-rgb) / 0.7), 0 12px 56px -8px rgba(var(--violet-rgb) / 0.6); /* text glow — לכותרות זוהרות */ --glow-text: 0 0 18px rgba(var(--cyan-rgb) / 0.45); --glow-text-violet: 0 0 18px rgba(var(--violet-rgb) / 0.45); /* glow מתואם-אקסנט — עוקב אוטומטית אחרי --accent-rgb (override לוקלי דרך data-accent) */ --glow-accent: 0 0 24px rgba(var(--accent-rgb) / 0.50), 0 0 64px rgba(var(--accent-rgb) / 0.28); --glow-accent-sm: 0 0 12px rgba(var(--accent-rgb) / 0.45); /* ring — focus ring נגיש (ניגודיות גבוהה). עוקב אחרי האקסנט הפעיל (cyan/violet/magenta) */ --focus-ring: 0 0 0 3px var(--space-0), 0 0 0 5px var(--accent); /* ========================================================================== 6. טיפוגרפיה --------------------------------------------------------------------------- Heebo — עברית/גוף. Space Grotesk — לטיני, מספרים, eyebrows, קוד. סולם פלואידי עם clamp(min, fluid, max). הבסיס ~16px נייד → גדל בדסקטופ. ========================================================================== */ --font-sans: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Space Grotesk", "Heebo", system-ui, sans-serif; /* מספרים/לטיני/eyebrow */ --font-mono: "Space Grotesk", ui-monospace, "SF Mono", monospace; /* סולם גודל — מבוסס יחס מודולרי ~1.25, פלואידי */ --fs-2xs: clamp(0.69rem, 0.66rem + 0.15vw, 0.78rem); /* תוויות זעירות */ --fs-xs: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem); /* eyebrow / caption */ --fs-sm: clamp(0.88rem, 0.83rem + 0.25vw, 1rem); /* טקסט קטן */ --fs-base:clamp(1rem, 0.95rem + 0.3vw, 1.13rem); /* גוף */ --fs-md: clamp(1.13rem, 1.05rem + 0.45vw, 1.35rem); /* lead / גוף גדול */ --fs-lg: clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem); /* כותרת משנה */ --fs-xl: clamp(1.65rem, 1.4rem + 1.3vw, 2.4rem); /* h3 */ --fs-2xl: clamp(2.1rem, 1.7rem + 2vw, 3.35rem); /* h2 */ --fs-3xl: clamp(2.7rem, 2rem + 3.6vw, 4.75rem); /* h1 סקשן */ /* קצה עליון בקונטרסט מתפוצץ — כותרות ענק ברמת Awwwards (הגוף נשאר שמרני) */ --fs-4xl: clamp(3.5rem, 2rem + 7vw, 8.5rem); /* כותרת הירו ענקית */ --fs-5xl: clamp(4.5rem, 2.2rem + 11vw, 12rem); /* display / מספרים אדירים */ --fs-display: clamp(5rem, 1rem + 16vw, 15rem); /* hero display בלבד — מפלצת */ /* גובה שורה */ --lh-display: 0.92; /* כותרות ענק עבריות — דחיסה כשאין ניקוד/נקודות-עומק */ --lh-tight: 1.05; /* כותרות display */ --lh-snug: 1.18; /* כותרות */ --lh-normal: 1.55; /* גוף עברי — מרווח לקריאות RTL */ --lh-relaxed: 1.7; /* פסקאות ארוכות */ /* רוחב שורה אופטימלי */ --measure-tight: 18ch; /* כותרות */ --measure: 64ch; /* גוף (alias ל---max-readable) */ /* משקלים */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* tracking — בעברית קרוב ל-0; tracking שלילי לכותרות גדולות, חיובי ל-eyebrow לטיני */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.16em; /* eyebrows/labels באנגלית caps */ --tracking-display: -0.015em; /* כותרות-ענק (סריף עברי לא אוהב tracking שלילי אגרסיבי) */ --tracking-display-he: -0.01em; /* display עברי דווקא עדין יותר */ /* ========================================================================== 7. SPACING SCALE --------------------------------------------------------------------------- בסיס 4px. סולם מרחבי עקבי. space-section פלואידי לפדינג אנכי של סקשנים. ========================================================================== */ --space-px: 1px; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 2.5rem; /* 40 */ --space-8: 3rem; /* 48 */ --space-9: 4rem; /* 64 */ --space-10: 5rem; /* 80 */ --space-11: 6rem; /* 96 */ --space-12: 8rem; /* 128 */ --space-13: 11rem; /* 176 — display gap */ --space-14: 14rem; /* 224 — display gap גדול */ /* פדינג אנכי לסקשן — פלואידי */ --space-section: clamp(4rem, 2.5rem + 7vw, 9rem); /* סקשני-גיבור (hero/showcase) — אוויר קולנועי רחב יותר */ --space-section-lg: clamp(6rem, 3rem + 10vw, 14rem); /* מרווח בין גוש כותרת לתוכן בסקשנים גדולים */ --gap-display: clamp(5rem, 3rem + 9vw, 11rem); /* רוחב קונטיינר ומרווח צד */ --wrap-max: 1200px; --wrap-wide: 1440px; --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem); /* ========================================================================== 8. RADII — פינות ========================================================================== */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-2xl: 44px; --radius-pill: 999px; --radius-round:50%; /* ========================================================================== 9. BORDERS ========================================================================== */ --border-hairline: 1px solid var(--glass-border); --border-lit: 1px solid var(--glass-border-lit); --border-width: 1px; /* ========================================================================== 10. MOTION — easings ומשכי זמן --------------------------------------------------------------------------- easings מתקדמים בסגנון Awwwards/Apple. שימוש: transition: ... var(--ease-out-expo); ========================================================================== */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* כניסה חלקה ודרמטית */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot עדין */ --ease-in-out-quint:cubic-bezier(0.83, 0, 0.17, 1); /* גלילה/מעברים גדולים */ --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1); /* קפיצי */ --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* כללי */ /* easings קולנועיים מתקדמים (ברמת Awwwards) */ --ease-out-expo-strong: cubic-bezier(0.19, 1, 0.22, 1); /* דרמטי מ-expo — כניסות hero */ --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1); /* סקראב Lenis / מעברים */ --ease-out-circ: cubic-bezier(0, 0.55, 0.45, 1); /* חשיפת מסכות clip-path */ --ease-anticipate: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* drawer/overlay עם "נשימה" לאחור */ /* משכי זמן */ --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 520ms; --dur-slower: 820ms; --dur-cinematic: 1200ms; /* מעברי סצנה / הירו */ /* transition מוכן לאינטראקציה כללית */ --transition: var(--dur-base) var(--ease-out-expo); /* ========================================================================== 11. Z-INDEX SCALE ========================================================================== */ --z-behind: -1; /* קנבסים/particles מאחורי תוכן */ --z-base: 0; --z-raised: 10; --z-sticky: 100; /* כותרת sticky */ --z-overlay: 500; --z-modal: 1000; --z-popover: 1500; --z-toast: 2000; --z-cursor: 9999; /* cursor מותאם אם קיים */ /* ========================================================================== 12. שונות ========================================================================== */ --canvas-bg: var(--space-0); /* רקע ל-WebGL/three.js */ --grain-opacity: 0.035; /* עוצמת grain/noise overlay */ --max-readable: 64ch; /* רוחב מקסימלי לטקסט קריא */ } /* ============================================================================ הפחתת תנועה — חובת נגישות מבטל אנימציות כבדות וזמני מעבר ארוכים עבור מי שביקש פחות תנועה. ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-slower: 0ms; --dur-cinematic: 0ms; --transition: 0ms linear; } }