/* ╔══════════════════════════════════════════════════════════════╗ ║ FAIRYNESS · DESIGN SYSTEM ║ ║ מערכת העיצוב של נסיה הפיה · גרסה 1.0 ║ ║ ║ ║ מערכת אחת · שני מצבי תאורה: ║ ║ → עולם הלילה (מכתב, אינטימי) ║ ║ → עולם הנשף (הזמנה, חגיגה) ║ ║ ║ ║ כל הרכיבים עובדים בשני המצבים. אף פעם אל תכתבי צבע ידני — ║ ║ השתמשי תמיד במשתנים (var(--...)). ככה הכל נשאר עקבי. ║ ║ ║ ║ גופנים נדרשים (הוסיפי ל- של כל דף): ║ ║ Frank+Ruhl+Libre · Assistant · Great+Vibes · ║ ║ Playpen+Sans+Hebrew · Bellefair · Varela+Round · Heebo ║ ╚══════════════════════════════════════════════════════════════╝ */ /* ═══════════════ 1 · TOKENS · עולם הלילה (ברירת מחדל) ═══════════════ */ :root, [data-theme="night"]{ /* רקעים ומשטחים */ --bg: #120b1b; --bg-2: #1d1129; --surface: rgba(43,26,60,.42); --surface-2: rgba(50,30,70,.55); --surface-glass:rgba(43,26,60,.42); /* מותג — ורוד */ --brand: #f2b3cd; /* ורוד פיה */ --brand-strong: #e487ae; /* רוז עמוק */ --brand-soft: #f9d9e6; /* רוז רך */ /* מבטא — זהב */ --gold: #e9c87f; --champagne: #eed9b4; /* טקסט */ --text: #f9f0f6; --text-soft: #d9c6d6; --text-dim: #b29ab0; --on-brand: #120b1b; /* טקסט מעל כפתור זהב/ורוד מלא */ /* קווים וזוהר */ --line: rgba(242,179,205,.26); --line-gold: rgba(238,217,180,.32); --glow: 0 0 30px rgba(242,179,205,.22), 0 0 80px rgba(228,135,174,.10); --shadow-card: 0 18px 50px rgba(0,0,0,.45); /* גרדיאנטים חתומים */ --grad-shimmer: linear-gradient(110deg,var(--brand-soft) 15%,var(--brand-strong) 38%,var(--champagne) 58%,var(--brand-soft) 80%); --grad-gold: linear-gradient(135deg,var(--champagne),var(--brand)); --grad-sky: radial-gradient(ellipse 120% 80% at 50% -10%, rgba(124,72,158,.30), transparent 60%); color-scheme: dark; } /* ═══════════════ 2 · TOKENS · עולם הנשף ═══════════════ */ [data-theme="day"]{ --bg: #FFF9F7; --bg-2: #FBE3E8; --surface: rgba(255,255,255,.55); --surface-2: rgba(255,244,240,.74); --surface-glass:rgba(255,252,251,.6); --brand: #E8A2B5; --brand-strong: #C76E8A; --brand-soft: #F7C6D0; --gold: #D9A982; --champagne: #F4E3C2; --text: #5C2E42; --text-soft: #84516B; --text-dim: #A8718C; --on-brand: #FFF9F7; --line: rgba(199,110,138,.22); --line-gold: rgba(217,169,130,.42); --glow: 0 18px 50px rgba(199,110,138,.18), 0 0 44px rgba(232,162,181,.22); --shadow-card: 0 22px 55px rgba(199,110,138,.22); --grad-shimmer: linear-gradient(105deg,#C9A8D8 0%,#FFFFFF 18%,#FFD9E4 34%,#D9A982 50%,#C9B8F0 70%,#FFE9F2 86%,#C9A8D8 100%); --grad-gold: linear-gradient(135deg,#B8842F,#D9AD5C 40%,#F7E3B0 65%,#D9AD5C 100%); --grad-sky: radial-gradient(ellipse 90% 55% at -10% 35%, rgba(251,227,232,.7), transparent 55%); color-scheme: light; } /* ═══════════════ 3 · TOKENS · משותף לשני העולמות ═══════════════ */ :root{ --radius-sm: 14px; --radius: 24px; --radius-lg: 32px; --maxw: 820px; --font-body: 'Assistant', 'Heebo', sans-serif; --font-display: 'Frank Ruhl Libre', 'Bellefair', serif; --font-accent: 'Playpen Sans Hebrew', cursive; /* עברית רכה ומשחקית */ --font-script: 'Great Vibes', cursive; /* חתימה לטינית */ --ease-spring: cubic-bezier(.34,1.4,.4,1); --ease-out: cubic-bezier(.22,1,.36,1); --step: clamp(70px, 12vw, 120px); /* מרווח בין סקשנים */ } /* גופני עולם הנשף — רכים יותר */ [data-theme="day"]{ --font-body: 'Varela Round', 'Heebo', sans-serif; --font-display: 'Bellefair', serif; } /* ═══════════════ 4 · RESET ═══════════════ */ *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth} img,svg{max-width:100%;height:auto;display:block} button{font-family:inherit;cursor:pointer;color:inherit;background:none;border:none} a{color:var(--brand-strong);text-decoration:none} ::selection{background:rgba(228,135,174,.45);color:#fff} :focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px} body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:17.5px; line-height:1.78; direction:rtl; min-height:100dvh; overflow-x:hidden; touch-action:manipulation; } /* שמיים פסטליים לעולם הנשף */ [data-theme="day"] body{ background: radial-gradient(ellipse 120% 70% at 50% -5%, rgba(247,198,208,.55) 0%, transparent 60%), radial-gradient(ellipse 90% 55% at -10% 35%, rgba(251,227,232,.7) 0%, transparent 55%), radial-gradient(ellipse 80% 50% at 110% 60%, rgba(232,162,181,.30) 0%, transparent 55%), radial-gradient(ellipse 70% 45% at 30% 100%, rgba(244,227,194,.35) 0%, transparent 60%), var(--bg); background-attachment:fixed; } /* ═══════════════ 5 · LAYOUT ═══════════════ */ .fy-main{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 22px 90px} .fy-section{margin-top:var(--step)} .fy-center{text-align:center} /* ═══════════════ 6 · AURORA / רקע אווירה (לעולם הלילה) ═══════════════ */ .fy-aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.85} .fy-aurora span{position:absolute;border-radius:50%;mix-blend-mode:screen} .fy-aurora i:nth-child(1),.fy-aurora span:nth-child(1){width:55vmax;height:55vmax;top:-12vmax;right:-10vmax; background:radial-gradient(circle at 40% 40%, rgba(228,135,174,.34), transparent 65%); animation:fy-drift1 26s ease-in-out infinite alternate} .fy-aurora span:nth-child(2){width:48vmax;height:48vmax;top:30%;left:-14vmax; background:radial-gradient(circle at 60% 40%, rgba(124,72,158,.42), transparent 65%); animation:fy-drift2 32s ease-in-out infinite alternate} .fy-aurora span:nth-child(3){width:42vmax;height:42vmax;bottom:-10vmax;right:18%; background:radial-gradient(circle at 50% 50%, rgba(238,217,180,.16), transparent 62%); animation:fy-drift3 38s ease-in-out infinite alternate} [data-theme="day"] .fy-aurora{opacity:.5} @keyframes fy-drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(-9vmax,7vmax) scale(1.18)}} @keyframes fy-drift2{from{transform:translate(0,0) scale(1.1)}to{transform:translate(8vmax,-6vmax) scale(.92)}} @keyframes fy-drift3{from{transform:translate(0,0) scale(.95)}to{transform:translate(-6vmax,-8vmax) scale(1.15)}} /* קנבסים שמוזרקים ע"י fairyness.js */ .fy-canvas-dust{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1} .fy-canvas-burst{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60} /* ═══════════════ 7 · SCROLL PROGRESS ═══════════════ */ .fy-progress{position:fixed;top:0;right:0;height:4px;width:0;z-index:70;border-radius:0 0 0 6px; background:linear-gradient(90deg,var(--champagne),var(--brand-strong),var(--brand)); box-shadow:0 0 14px rgba(242,179,205,.8)} .fy-progress::after{content:"";position:absolute;left:-5px;top:-3px;width:10px;height:10px;border-radius:50%; background:#fff;box-shadow:0 0 12px 4px rgba(242,179,205,.9)} /* ═══════════════ 8 · TYPOGRAPHY ═══════════════ */ .fy-eyebrow{display:flex;align-items:center;gap:14px;color:var(--champagne);font-weight:600; font-size:.85rem;letter-spacing:.24em;margin-bottom:14px} .fy-eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-gold),transparent)} .fy-h1{font-family:var(--font-display);font-weight:900;font-size:clamp(2.5rem,7.6vw,4rem);line-height:1.18; color:var(--brand-soft)} .fy-h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.75rem,4.8vw,2.4rem);line-height:1.25; color:var(--brand-soft);margin:0} .fy-h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,3.6vw,1.5rem);color:var(--brand-soft)} .fy-lead{margin-top:16px;color:var(--text-soft);font-size:1.06rem} .fy-script{font-family:var(--font-script);direction:ltr;color:var(--brand);font-size:2.2rem; text-shadow:0 0 22px rgba(242,179,205,.45)} .fy-hand{font-family:var(--font-accent)} /* טקסט נצנוץ — הזהב/ורוד הזורם. החתימה הויזואלית של המותג */ .fy-shimmer{ background:var(--grad-shimmer);background-size:220% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:fy-shimmer 7s linear infinite; filter:drop-shadow(0 0 26px rgba(242,179,205,.28))} @keyframes fy-shimmer{to{background-position:-220% 0}} /* שורת משמעות שלמה — לא נשברת באמצע משפט (כלל מותג) */ .fy-line{display:block;white-space:nowrap;font-size:clamp(.8rem,3.6vw,1rem)} /* ═══════════════ 9 · BUTTONS ═══════════════ */ .fy-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 34px;border-radius:99px; font-family:var(--font-body);font-weight:700;font-size:1.05rem;color:var(--on-brand); background:var(--grad-gold);border:1px solid var(--line-gold);min-height:48px; box-shadow:0 0 30px rgba(238,217,180,.35),inset 0 1px 0 rgba(255,255,255,.45); transition:transform .25s var(--ease-spring),box-shadow .3s} .fy-btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 0 44px rgba(238,217,180,.55),inset 0 1px 0 rgba(255,255,255,.45)} .fy-btn:active{transform:scale(.96)} .fy-btn-ghost{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:99px; font-weight:600;color:var(--brand);background:var(--surface);border:1px solid var(--line); backdrop-filter:blur(10px);transition:transform .25s var(--ease-spring),border-color .3s,color .3s;min-height:46px} .fy-btn-ghost:hover{transform:translateY(-2px);border-color:var(--brand);color:var(--brand-soft)} /* ═══════════════ 10 · CHIP / BADGE ═══════════════ */ .fy-chip{display:inline-flex;align-items:center;gap:10px;padding:9px 22px;border-radius:99px; border:1px solid var(--line-gold);background:var(--surface);backdrop-filter:blur(10px); color:var(--champagne);font-size:.85rem;letter-spacing:.22em;font-weight:600} .fy-badge{display:inline-block;padding:7px 18px;border-radius:99px;border:1px solid var(--line-gold); color:var(--champagne);font-weight:600;font-size:.85rem;background:rgba(238,217,180,.1)} /* ═══════════════ 11 · GLASS CARD ═══════════════ */ .fy-card{position:relative;background:var(--surface-glass);border:1px solid var(--line); border-radius:var(--radius);padding:32px 30px;box-shadow:var(--glow);backdrop-filter:blur(14px);overflow:hidden} .fy-card--gold{background:linear-gradient(165deg,rgba(238,217,180,.12),var(--surface-2) 60%);border-color:var(--line-gold)} /* ═══════════════ 12 · LETTER (מכתב קסום) ═══════════════ */ .fy-letter{position:relative;background:var(--surface-glass);border:1px solid var(--line);border-radius:var(--radius); padding:42px 34px 36px;box-shadow:var(--glow);backdrop-filter:blur(14px);overflow:hidden} .fy-letter::before{content:"”";position:absolute;top:-26px;left:18px;font-family:var(--font-display); font-size:9rem;color:rgba(242,179,205,.14);line-height:1;pointer-events:none} .fy-letter p{margin-bottom:16px;position:relative;z-index:1} .fy-letter p:last-child{margin-bottom:0} .fy-letter strong{color:var(--brand)} /* ═══════════════ 13 · QUESTION (גבול נוזלי מסתובב) ═══════════════ */ .fy-question{position:relative;text-align:center;padding:60px 30px;border-radius:var(--radius); background:linear-gradient(165deg,rgba(228,135,174,.13),var(--surface-2) 55%);backdrop-filter:blur(12px);overflow:hidden} .fy-question::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px; background:conic-gradient(from var(--fy-ang,0deg),var(--brand-strong),var(--champagne),rgba(255,255,255,.7),var(--brand-strong)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;animation:fy-spin 7s linear infinite} @property --fy-ang{syntax:"";initial-value:0deg;inherits:false} @keyframes fy-spin{to{--fy-ang:360deg}} .fy-question .q-kicker{font-family:var(--font-display);font-size:1rem;letter-spacing:.3em;color:var(--champagne);font-weight:600} .fy-question .q-text{font-family:var(--font-display);font-weight:900;font-size:clamp(1.2rem,6.5vw,2.8rem);margin-top:16px;color:var(--text)} .fy-question .q-text em{font-style:normal;color:var(--brand)} /* ═══════════════ 14 · TREASURE ACCORDION (data-fy-treasure) ═══════════════ */ .fy-treasures{display:flex;flex-direction:column;gap:28px} .fy-treasure{position:relative;background:var(--surface-glass);border:1px solid var(--line);border-radius:var(--radius); backdrop-filter:blur(12px);overflow:hidden;transition:box-shadow .35s,border-color .35s} .fy-treasure:hover{box-shadow:var(--glow);border-color:var(--brand)} .fy-treasure::before{content:"";position:absolute;inset-inline:16%;top:0;height:2px;border-radius:2px;z-index:2; background:linear-gradient(90deg,transparent,var(--brand-strong),var(--champagne),transparent)} .fy-treasure .glare{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .3s; background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.09),transparent 65%)} .fy-treasure:hover .glare{opacity:1} .fy-treasure .t-toggle{display:flex;align-items:center;gap:18px;width:100%;text-align:right;padding:26px 28px;position:relative;z-index:2;min-height:44px} .fy-treasure .t-icon{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center; background:radial-gradient(circle at 35% 30%,rgba(242,179,205,.38),rgba(228,135,174,.08)); border:1px solid var(--line);box-shadow:inset 0 0 16px rgba(242,179,205,.12);transition:transform .5s var(--ease-spring)} .fy-treasure.open .t-icon{transform:rotate(-12deg) scale(1.08);box-shadow:0 0 22px rgba(242,179,205,.5)} .fy-treasure .t-meta{flex:1;min-width:0} .fy-treasure .t-kicker{display:block;font-size:.8rem;letter-spacing:.26em;color:var(--champagne);font-weight:600} .fy-treasure .t-title{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,3.6vw,1.5rem);color:var(--brand-soft);line-height:1.3;margin-top:4px} .fy-treasure .t-chev{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%; border:1px solid var(--line);background:rgba(228,135,174,.1);transition:transform .5s var(--ease-spring),background .3s} .fy-treasure.open .t-chev{background:rgba(228,135,174,.28);transform:rotate(180deg)} .fy-treasure .t-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease-out);position:relative;z-index:2} .fy-treasure.open .t-body{grid-template-rows:1fr} .fy-treasure .t-inner{overflow:hidden} .fy-treasure .t-content{padding:0 28px 30px;color:var(--text-soft);opacity:0;transform:translateY(-8px);transition:opacity .5s .15s,transform .5s .15s} .fy-treasure.open .t-content{opacity:1;transform:none} .fy-quote{margin-top:18px;padding:18px 22px;border-right:3px solid var(--brand-strong); background:rgba(228,135,174,.09);border-radius:14px;color:var(--text);font-weight:600;font-size:1.06rem} /* ═══════════════ 15 · MANTRA ═══════════════ */ .fy-mantra{text-align:center;padding:90px 16px;position:relative} .fy-mantra .m-small{color:var(--champagne);letter-spacing:.3em;font-size:.85rem;font-weight:600} .fy-mantra .m-big{font-family:var(--font-display);font-weight:900;font-size:clamp(2.2rem,7.5vw,3.8rem);line-height:1.3;margin-top:22px} .fy-mantra .m-note{margin-top:24px;color:var(--text-soft)} /* ═══════════════ 16 · COUNTER (נקודות אוצרות) ═══════════════ */ .fy-counter{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap} .fy-counter .tc-label{color:var(--text-soft);font-size:.95rem} .fy-counter .tc-label strong{color:var(--champagne);font-size:1.1rem} .fy-dots{display:flex;gap:9px} .fy-dot{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--line-gold);background:transparent;transition:all .5s var(--ease-spring)} .fy-dot.lit{background:var(--grad-gold);border-color:transparent;box-shadow:0 0 14px rgba(238,217,180,.8);transform:scale(1.25)} /* ═══════════════ 17 · ID CARD (כרטיס מתהפך · data-fy-flip) ═══════════════ */ .fy-idcard-scene{perspective:1300px;width:min(420px,92vw);margin-inline:auto} .fy-idcard{position:relative;width:100%;aspect-ratio:1.586;transform-style:preserve-3d; transition:transform .9s var(--ease-spring);cursor:pointer;will-change:transform} .fy-idcard.flipped{transform:rotateY(180deg)} .fy-idcard .face{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;overflow:hidden; border:1px solid var(--line);background:linear-gradient(150deg,var(--surface-2),var(--bg-2)); box-shadow:var(--shadow-card),var(--glow);display:flex;flex-direction:column;padding:22px 24px} .fy-idcard .face::before{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 25%,rgba(242,179,205,.16) 38%,rgba(238,217,180,.18) 46%,rgba(255,255,255,.12) 52%,transparent 68%); background-size:260% 100%;animation:fy-holo 5.5s ease-in-out infinite alternate} @keyframes fy-holo{from{background-position:110% 0}to{background-position:-30% 0}} .fy-idcard .back{transform:rotateY(180deg);align-items:center;justify-content:center;text-align:center;gap:10px} /* ═══════════════ 18 · DIVIDER ═══════════════ */ .fy-divider{display:flex;align-items:center;justify-content:center;gap:14px;margin:34px 0;color:var(--brand)} .fy-divider::before,.fy-divider::after{content:"";height:1px;width:min(120px,22vw); background:linear-gradient(90deg,transparent,var(--brand))} .fy-divider::after{background:linear-gradient(90deg,var(--brand),transparent)} /* ═══════════════ 19 · REVEAL ON SCROLL (data-fy-reveal) ═══════════════ */ .fy-reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)} .fy-reveal.in{opacity:1;transform:none} .fy-stagger>*{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)} .fy-stagger.in>*{opacity:1;transform:none} .fy-stagger.in>*:nth-child(1){transition-delay:.05s} .fy-stagger.in>*:nth-child(2){transition-delay:.16s} .fy-stagger.in>*:nth-child(3){transition-delay:.27s} .fy-stagger.in>*:nth-child(4){transition-delay:.38s} .fy-stagger.in>*:nth-child(5){transition-delay:.49s} .fy-stagger.in>*:nth-child(6){transition-delay:.60s} /* ═══════════════ 20 · FLOATY (ריחוף עדין ללוגו/אלמנט) ═══════════════ */ .fy-floaty{animation:fy-floaty 7s ease-in-out infinite} @keyframes fy-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .fy-glow-img{filter:drop-shadow(0 0 30px rgba(242,179,205,.4))} /* ═══════════════ 21 · RESPONSIVE ═══════════════ */ @media (max-width:560px){ .fy-letter,.fy-card{padding:30px 22px} .fy-treasure .t-toggle{padding:22px 20px;gap:13px} .fy-treasure .t-content{padding:0 20px 26px} .fy-treasure .t-icon{width:48px;height:48px} } /* ═══════════════ 22 · REDUCED MOTION ═══════════════ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.15s !important} html{scroll-behavior:auto} .fy-reveal,.fy-stagger>*{opacity:1;transform:none} .fy-floaty{animation:none} .fy-canvas-dust,.fy-canvas-burst{display:none} }