/* ============================================================= יומיומי · onboarding.css Welcome wizard · personalisation · background layer · appearance Matches the dark + gold vocabulary of redesign.css. ============================================================= */ /* ---------- text size (set on so rem-based type scales) ---------- */ html[data-textsize="compact"] { font-size: 15px; } html[data-textsize="normal"] { font-size: 16px; } html[data-textsize="comfort"] { font-size: 17.5px; } /* ============================================================= BACKGROUND LAYER — full-screen, behind .page (which is z-index:2) ============================================================= */ .yy-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .yy-bg-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; mix-blend-mode: screen; } .yy-bg-orb.a { width: 60vw; height: 60vw; top: -18vw; right: -10vw; background: var(--gold, #d4a843); } .yy-bg-orb.b { width: 52vw; height: 52vw; bottom: -16vw; left: -8vw; background: var(--rgb-b, #6c63ff); } .yy-bg-orb.c { width: 40vw; height: 40vw; top: 30%; left: 32%; background: var(--rgb-p, #c660ff); opacity: 0.32; } .yy-bg-stars { position: absolute; inset: 0; opacity: 0; } /* --- aurora (animated) : drifting gold / violet / pink orbs --- */ body[data-bg="aurora"] .yy-bg-orb { animation: yy-float 16s ease-in-out infinite; } body[data-bg="aurora"] .yy-bg-orb.b { animation-delay: -5s; animation-duration: 20s; } body[data-bg="aurora"] .yy-bg-orb.c { animation-delay: -9s; animation-duration: 24s; } /* --- starfield (animated) : faint orbs + twinkling stars --- */ body[data-bg="starfield"] .yy-bg-orb { opacity: 0.18; filter: blur(120px); } body[data-bg="starfield"] .yy-bg-orb.c { display: none; } body[data-bg="starfield"] .yy-bg-stars { opacity: 1; background-image: radial-gradient(1.6px 1.6px at 20% 30%, #fff, transparent), radial-gradient(1.4px 1.4px at 70% 60%, #fff, transparent), radial-gradient(1.2px 1.2px at 40% 80%, #ffe9b0, transparent), radial-gradient(1.8px 1.8px at 85% 20%, #fff, transparent), radial-gradient(1.3px 1.3px at 55% 45%, #cfe0ff, transparent), radial-gradient(1.2px 1.2px at 10% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 92% 78%, #fff, transparent), radial-gradient(1.2px 1.2px at 33% 12%, #ffe9b0, transparent); background-repeat: repeat; background-size: 100% 100%; animation: yy-twinkle 4.5s ease-in-out infinite; } body[data-bg="starfield"] .yy-bg-stars::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 25% 55%, #fff, transparent), radial-gradient(1px 1px at 65% 25%, #fff, transparent), radial-gradient(1px 1px at 80% 65%, #cfe0ff, transparent), radial-gradient(1px 1px at 15% 35%, #fff, transparent), radial-gradient(1px 1px at 48% 88%, #fff, transparent); opacity: 0.6; animation: yy-twinkle 6.5s ease-in-out infinite reverse; } /* --- embers (animated) : warm orbs + rising sparks --- */ body[data-bg="embers"] .yy-bg-orb { background: var(--gold, #d4a843); opacity: 0.3; } body[data-bg="embers"] .yy-bg-orb.b { background: #ff7a3c; } body[data-bg="embers"] .yy-bg-orb.c { display: none; } body[data-bg="embers"] .yy-bg-stars { opacity: 1; background-image: radial-gradient(2px 2px at 20% 90%, #ffcf7a, transparent), radial-gradient(1.6px 1.6px at 50% 90%, #ffb14d, transparent), radial-gradient(2.2px 2.2px at 75% 90%, #ffd98a, transparent), radial-gradient(1.4px 1.4px at 35% 90%, #ff9b3d, transparent), radial-gradient(1.8px 1.8px at 90% 90%, #ffcf7a, transparent), radial-gradient(1.5px 1.5px at 8% 90%, #ffd98a, transparent); background-repeat: repeat; background-size: 100% 60%; filter: drop-shadow(0 0 4px rgba(255,180,80,0.5)); animation: yy-embers 9s linear infinite; } /* --- mesh (static) : calm multi-gradient, orbs faint & still --- */ body[data-bg="mesh"] .yy-bg-orb { opacity: 0.34; filter: blur(110px); animation: none; } /* --- midnight (static, minimal) --- */ body[data-bg="midnight"] .yy-bg-orb { opacity: 0.12; filter: blur(130px); animation: none; } body[data-bg="midnight"] .yy-bg-orb.b, body[data-bg="midnight"] .yy-bg-orb.c { display: none; } @keyframes yy-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(3vw, 4vh) scale(1.08); } 66% { transform: translate(-2vw, -3vh) scale(0.96); } } @keyframes yy-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes yy-embers { 0% { transform: translateY(8vh); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(-90vh); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .yy-bg-orb, .yy-bg-stars, .yy-bg-stars::after { animation: none !important; } } /* keep the existing mood veil from competing with our chosen bg */ body[data-bg] { background-attachment: fixed; } body[data-bg="midnight"] { background: linear-gradient(180deg, #08060f 0%, #050409 100%) fixed; } body[data-bg="mesh"] { background: radial-gradient(ellipse 60% 50% at 15% 10%, rgba(212,168,67,0.16), transparent 60%), radial-gradient(ellipse 55% 55% at 90% 25%, rgba(108,99,255,0.16), transparent 60%), radial-gradient(ellipse 60% 50% at 70% 95%, rgba(198,96,255,0.13), transparent 60%), linear-gradient(180deg, #0c0a18 0%, #08060f 100%) fixed; } /* light tone: lighten the stage so dark-text components read */ body[data-tone="light"] .yy-bg-orb { opacity: 0.4; mix-blend-mode: multiply; } /* ============================================================= NAV — greeting + settings gear (injected by nav.js) ============================================================= */ .hub-greet { font-size: 0.82rem; font-weight: 700; color: var(--gold-light, #f0c668); white-space: nowrap; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; padding-inline-end: 0.2rem; } #prefsBtn { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: var(--r-pill, 999px); background: rgba(255,255,255,0.05); border: 1px solid var(--c-border, rgba(255,255,255,0.08)); color: var(--c-text-2, #cfc8e8); font-size: 1.05rem; cursor: pointer; transition: transform 200ms ease, color 200ms ease, border-color 200ms ease, background 200ms ease; } #prefsBtn:hover { color: var(--gold, #d4a843); border-color: rgba(212,168,67,0.4); background: rgba(212,168,67,0.08); transform: rotate(35deg); } /* ============================================================= BIRTHDAY banner ============================================================= */ .yy-bday { position: fixed; top: 14px; left: 50%; transform: translate(-50%, -140%); z-index: 1300; display: flex; align-items: center; gap: 0.9rem; max-width: min(520px, calc(100vw - 2rem)); padding: 0.9rem 1.1rem; background: linear-gradient(135deg, rgba(20,16,10,0.96), rgba(10,10,12,0.96)); border: 1px solid rgba(212,168,67,0.5); border-radius: 18px; box-shadow: var(--sh-lg, 0 24px 60px rgba(0,0,0,0.7)), 0 0 50px -12px var(--gold-glow, rgba(212,168,67,0.35)); backdrop-filter: blur(20px); opacity: 0; transition: transform 600ms cubic-bezier(0.34,1.56,0.64,1), opacity 400ms ease; } .yy-bday.show { transform: translate(-50%, 0); opacity: 1; } .yy-bday-emoji { font-size: 2rem; animation: yy-float 4s ease-in-out infinite; } .yy-bday-text strong { display: block; color: var(--gold-light, #f0c668); font-size: 1.1rem; } .yy-bday-text span { display: block; color: var(--c-text-2, #cfc8e8); font-size: 0.85rem; margin-top: 0.15rem; } .yy-bday-x { margin-inline-start: auto; align-self: flex-start; background: transparent; border: 0; color: var(--c-text-3, #8c85a8); font-size: 1.3rem; cursor: pointer; line-height: 1; } .yy-bday-x:hover { color: var(--gold, #d4a843); } /* ============================================================= WIZARD ============================================================= */ .onb-root { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: clamp(0.75rem, 3vw, 2rem); opacity: 0; transition: opacity 360ms ease; } .onb-root.show { opacity: 1; } .onb-backdrop { position: absolute; inset: 0; background: rgba(4, 3, 9, 0.78); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); } .onb-panel { position: relative; width: min(620px, 100%); max-height: calc(100vh - 2rem); display: flex; flex-direction: column; background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(212,168,67,0.12), transparent 60%), linear-gradient(160deg, rgba(24,20,40,0.96), rgba(10,9,18,0.97)); border: 1px solid var(--c-border-strong, rgba(255,255,255,0.18)); border-radius: 24px; box-shadow: 0 40px 100px -20px rgba(0,0,0,0.8), 0 0 60px -20px var(--gold-glow, rgba(212,168,67,0.35)); overflow: hidden; transform: translateY(14px) scale(0.985); transition: transform 420ms cubic-bezier(0.16,1,0.3,1); } .onb-root.show .onb-panel { transform: translateY(0) scale(1); } .onb-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--gold, #d4a843), transparent 45%, var(--rgb-b, #6c63ff)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.55; pointer-events: none; } /* top bar: progress + skip */ .onb-top { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.4rem 0.4rem; } .onb-progress { display: flex; gap: 0.4rem; flex: 1; } .onb-dot { height: 4px; flex: 1; border-radius: 999px; background: rgba(255,255,255,0.1); transition: background 300ms ease; } .onb-dot.active { background: var(--gold, #d4a843); } .onb-dot.done { background: rgba(212,168,67,0.45); } .onb-skip { flex: 0 0 auto; background: transparent; border: 0; color: var(--c-text-3, #8c85a8); font-family: var(--f-sans); font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 0.3rem 0.4rem; border-radius: 8px; } .onb-skip:hover { color: var(--gold-light, #f0c668); } /* stage (scrollable content) */ .onb-stage { padding: 0.6rem 1.6rem 0.4rem; overflow-y: auto; } .onb-step { animation: onb-in 360ms ease both; } @keyframes onb-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .onb-h { font-size: clamp(1.4rem, 3.4vw, 2rem); font-weight: 900; letter-spacing: -0.01em; margin: 0.4rem 0 0.5rem; color: var(--c-text, #f4f0ff); } .onb-lead { color: var(--c-text-2, #cfc8e8); font-size: 1rem; line-height: 1.65; margin: 0 0 1.2rem; } .onb-lead strong { color: var(--gold-light, #f0c668); } .onb-hint { color: var(--c-text-3, #8c85a8); font-size: 0.8rem; line-height: 1.5; margin: 0.8rem 0 0; } /* welcome */ .onb-welcome { text-align: center; } .onb-mark { font-size: 1rem; font-weight: 800; letter-spacing: 0.12em; color: var(--gold, #d4a843); text-transform: uppercase; margin-top: 0.6rem; } .onb-bullets { list-style: none; margin: 0.4rem auto 0.6rem; padding: 0; display: inline-flex; flex-direction: column; gap: 0.7rem; text-align: right; } .onb-bullets li { color: var(--c-text-2, #cfc8e8); font-size: 0.98rem; background: rgba(255,255,255,0.03); border: 1px solid var(--c-border, rgba(255,255,255,0.08)); border-radius: 12px; padding: 0.7rem 1rem; } /* fields */ .onb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; } .onb-field { display: flex; flex-direction: column; gap: 0.35rem; } .onb-field-wide { grid-column: 1 / -1; } .onb-field > span { font-size: 0.82rem; font-weight: 600; color: var(--c-text-2, #cfc8e8); } .onb-field input, .onb-search { width: 100%; box-sizing: border-box; padding: 0.8rem 1rem; background: rgba(255,255,255,0.04); border: 1px solid var(--c-border, rgba(255,255,255,0.08)); border-radius: var(--r-md, 14px); color: var(--c-text, #f4f0ff); font-family: var(--f-sans); font-size: 1rem; min-height: 48px; transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease; } .onb-field input::placeholder, .onb-search::placeholder { color: var(--c-text-3, #8c85a8); } .onb-field input:focus, .onb-search:focus { outline: none; border-color: var(--gold, #d4a843); background: rgba(212,168,67,0.06); box-shadow: 0 0 0 3px rgba(212,168,67,0.15); } /* location step */ .onb-search { margin-bottom: 0.6rem; } .onb-city-results { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.6rem; } .onb-city-res { text-align: right; width: 100%; padding: 0.6rem 0.9rem; background: rgba(255,255,255,0.03); border: 1px solid var(--c-border, rgba(255,255,255,0.08)); border-radius: 10px; color: var(--c-text, #f4f0ff); font-family: var(--f-sans); font-size: 0.95rem; cursor: pointer; transition: border-color 180ms ease, background 180ms ease; } .onb-city-res:hover { border-color: var(--gold, #d4a843); background: rgba(212,168,67,0.07); } .onb-city-loading { color: var(--c-text-3, #8c85a8); font-size: 0.85rem; padding: 0.3rem 0.2rem; } .onb-city-label { font-size: 0.78rem; color: var(--c-text-3, #8c85a8); margin: 0.4rem 0 0.5rem; font-weight: 600; } .onb-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; } .onb-chip { padding: 0.5rem 0.9rem; background: rgba(255,255,255,0.04); border: 1px solid var(--c-border, rgba(255,255,255,0.08)); border-radius: var(--r-pill, 999px); color: var(--c-text-2, #cfc8e8); font-family: var(--f-sans); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 180ms ease; } .onb-chip:hover { border-color: rgba(212,168,67,0.4); color: var(--gold-light, #f0c668); } .onb-chip.active { background: linear-gradient(135deg, var(--gold, #d4a843), var(--gold-deep, #a67c20)); color: #0a0a0a; border-color: transparent; box-shadow: 0 4px 14px -2px var(--gold-glow, rgba(212,168,67,0.35)); } .onb-chosen { margin-top: 0.8rem; min-height: 1.6rem; } .onb-chosen-pill { display: inline-block; padding: 0.4rem 0.9rem; background: rgba(48,209,88,0.12); border: 1px solid rgba(48,209,88,0.4); border-radius: var(--r-pill, 999px); color: #6fe79a; font-size: 0.85rem; font-weight: 700; } /* connect step */ .onb-google-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-height: 44px; } .onb-google { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.4rem; background: #fff; color: #1a1a1a; border: 0; border-radius: var(--r-pill, 999px); font-family: var(--f-sans); font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease; } .onb-google:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -8px rgba(0,0,0,0.6); } .onb-google-disabled { opacity: 0.85; } .onb-g-ico { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: conic-gradient(from -45deg, #ea4335, #fbbc05, #34a853, #4285f4, #ea4335); color: #fff; font-weight: 900; font-size: 0.85rem; } .onb-or { display: flex; align-items: center; gap: 0.8rem; color: var(--c-text-3, #8c85a8); font-size: 0.8rem; margin: 1.1rem 0 0.9rem; } .onb-or::before, .onb-or::after { content: ""; flex: 1; height: 1px; background: var(--c-border, rgba(255,255,255,0.08)); } .onb-email-msg { font-size: 0.85rem; font-weight: 600; margin-top: 0.5rem; min-height: 1.1rem; } .onb-email-msg.ok { color: #6fe79a; } .onb-email-msg.err { color: #ff7a9c; } /* background grid */ .onb-bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.7rem; } .onb-bg-opt { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; background: transparent; border: 2px solid var(--c-border, rgba(255,255,255,0.08)); border-radius: 14px; cursor: pointer; transition: border-color 200ms ease, transform 200ms ease; } .onb-bg-opt:hover { transform: translateY(-3px); border-color: rgba(212,168,67,0.4); } .onb-bg-opt.active { border-color: var(--gold, #d4a843); box-shadow: 0 0 0 3px rgba(212,168,67,0.18); } .onb-bg-prev { position: relative; display: block; height: 72px; overflow: hidden; background: linear-gradient(180deg, #0c0a18, #08060f); } .onb-bg-prev .yy-bg-orb { filter: blur(18px); } .onb-bg-prev .yy-bg-orb.a { width: 70px; height: 70px; top: -20px; right: -10px; } .onb-bg-prev .yy-bg-orb.b { width: 60px; height: 60px; bottom: -18px; left: -10px; } .onb-bg-prev .yy-bg-orb.c { width: 44px; height: 44px; top: 25%; left: 35%; } .onb-bg-prev .yy-bg-stars { background-size: 100% 100%; } .onb-bg-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; padding: 0.55rem 0.7rem; background: rgba(0,0,0,0.3); } .onb-bg-meta b { color: var(--c-text, #f4f0ff); font-size: 0.88rem; } .onb-bg-meta i { color: var(--gold, #d4a843); font-size: 0.68rem; font-style: normal; font-weight: 700; letter-spacing: 0.04em; } /* look step — segmented controls */ .onb-look-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.08)); flex-wrap: wrap; } .onb-look-row:last-child { border-bottom: 0; } .onb-look-lbl { font-size: 0.95rem; font-weight: 700; color: var(--c-text, #f4f0ff); } .onb-seg { display: inline-flex; gap: 0.3rem; background: rgba(255,255,255,0.04); border: 1px solid var(--c-border, rgba(255,255,255,0.08)); border-radius: var(--r-pill, 999px); padding: 0.25rem; } .onb-seg button { background: transparent; border: 0; padding: 0.5rem 0.9rem; border-radius: var(--r-pill, 999px); color: var(--c-text-2, #cfc8e8); font-family: var(--f-sans); font-size: 0.88rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 180ms ease; } .onb-seg button:hover { color: var(--gold-light, #f0c668); } .onb-seg button.active { background: linear-gradient(135deg, var(--gold, #d4a843), var(--gold-deep, #a67c20)); color: #0a0a0a; box-shadow: 0 3px 12px -2px var(--gold-glow, rgba(212,168,67,0.35)); } /* done */ .onb-done { text-align: center; } .onb-done-emoji { font-size: 3rem; margin-top: 0.4rem; animation: yy-float 4s ease-in-out infinite; } .onb-summary { list-style: none; margin: 0.4rem auto 0.6rem; padding: 0; display: inline-flex; flex-direction: column; gap: 0.5rem; text-align: right; } .onb-summary li { color: var(--c-text, #f4f0ff); font-size: 0.95rem; font-weight: 600; background: rgba(212,168,67,0.07); border: 1px solid rgba(212,168,67,0.2); border-radius: 10px; padding: 0.55rem 1rem; } /* footer nav */ .onb-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.6rem 1.3rem; border-top: 1px solid var(--c-border, rgba(255,255,255,0.08)); } .onb-back { background: transparent; border: 0; color: var(--c-text-2, #cfc8e8); font-family: var(--f-sans); font-size: 0.95rem; font-weight: 600; cursor: pointer; padding: 0.5rem 0.6rem; border-radius: 10px; } .onb-back:hover { color: var(--gold-light, #f0c668); } .onb-next { padding: 0.85rem 2rem; background: linear-gradient(135deg, var(--gold, #d4a843), var(--gold-deep, #a67c20)); color: #0a0a0a; border: 0; border-radius: var(--r-pill, 999px); font-family: var(--f-sans); font-size: 1rem; font-weight: 800; cursor: pointer; box-shadow: 0 6px 20px -6px var(--gold-glow, rgba(212,168,67,0.35)); transition: transform 180ms ease, box-shadow 180ms ease; } .onb-next:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -6px var(--gold-glow, rgba(212,168,67,0.35)); } .onb-next:active { transform: scale(0.97); } @media (max-width: 540px) { .onb-fields { grid-template-columns: 1fr; } .onb-look-row { justify-content: flex-start; } .onb-next { padding: 0.85rem 1.4rem; } }