/* ============================================================ Parizoda — romantik mini sayt Pastel pushti, yumshoq, mobil-birinchi ============================================================ */ /* Shriftlar index.html da orqali yuklanadi (preconnect bilan) — @import render'ni bloklardi. */ :root { /* Warm cream base + pastel pink + deep rose accents */ --blush: #FBF5F1; /* page background (warm ivory) */ --blush-2: #F7EAE6; /* alt background band (rose-cream) */ --cream: #FFFFFF; /* cards */ --petal: #F4D3DD; /* soft pink */ --rose: #E79FB6; /* primary pink */ --rose-deep: #D06B92; /* deeper rose */ --berry: #B14A72; /* accent / headings (deep rose) */ --plum: #6E3850; /* dark text on pink */ --ink: #4A3640; /* body text */ --ink-soft: #927580; /* muted text */ --lav: #EFD9F2; /* lavender accent */ --gold: #C9A24B; /* refined gold mark */ --line: #ECDCD7; /* hairline borders */ --white: #FFFFFF; --shadow-sm: 0 2px 12px rgba(110, 56, 80, 0.06); --shadow-md: 0 14px 38px rgba(110, 56, 80, 0.10); --shadow-lg: 0 28px 64px rgba(110, 56, 80, 0.14); --r-sm: 16px; --r-md: 24px; --r-lg: 34px; --font-serif: 'Prata', 'Playfair Display', Georgia, serif; /* luxe display serif */ --font-serif-soft: 'Cormorant Garamond', Georgia, serif; /* nafis ikkilamchi serif */ --font-body: 'Golos Text', system-ui, sans-serif; --font-script: 'Marck Script', cursive; --font-hand: 'Caveat', cursive; --maxw: 480px; /* mobile-first column width */ /* living mesh background blobs (day) */ --mesh-1: rgba(255, 211, 226, 0.55); --mesh-2: rgba(239, 217, 242, 0.42); --mesh-3: rgba(255, 226, 235, 0.50); } /* ===================================================== TUN-LUXE — 2c yo'nalish (qorong'u, oltin urg'u) Standart tema (body'ga .night doim qo'yiladi). ===================================================== */ body.night { --blush: #0E0A13; /* app foni (deyarli qora-siyoh) */ --blush-2: #160F1E; /* muqobil band */ --cream: #1D1428; /* kartalar bazasi */ --petal: #3A2B46; --rose: #E79FB6; --rose-deep: #ED93B4; --berry: #F2D8E4; /* sarlavha matni (pushti-oq) */ --plum: #F2D8E4; --ink: #E9CFE2; --ink-soft: #8E7A94; /* xira mauve */ --line: #2E2138; --gold: #D9B36A; /* oltin urg'u */ --card-grad: linear-gradient(165deg, #1D1428, #2A1B33); --tile: #191221; --shadow-sm: 0 2px 12px rgba(0,0,0,0.42); --shadow-md: 0 18px 44px rgba(0,0,0,0.52); --shadow-lg: 0 28px 64px rgba(0,0,0,0.62); --mesh-1: rgba(217, 179, 106, 0.14); /* oltin porlash */ --mesh-2: rgba(80, 50, 90, 0.42); --mesh-3: rgba(150, 70, 120, 0.20); } /* keep white-text buttons legible on dark */ body.night .btn-yes, body.night .login-btn, body.night .bucket-add-btn, body.night .chat-send, body.night .chat-fab, body.night .music-btn, body.night .dash-refresh, body.night .bucket-item.done .bucket-check { background: linear-gradient(150deg, #C76E92, #8E3A5C); border-color: #8E3A5C; } body.night .logout-btn, body.night .theme-btn { background: rgba(51,33,45,.88); color: var(--berry); } /* theme-aware shart / status cards (hardcoded light pink → dark rose at night) */ body.night .dash-shart { background: linear-gradient(160deg, var(--cream), var(--blush-2)); border-color: var(--rose-deep); } body.night .dash-shart .dsh-label { color: var(--rose-deep); } body.night .dash-shart .dsh-text { color: var(--plum); } body.night .dash-shart .dsh-time { color: var(--ink-soft); } /* RPS game shart card */ body.night .shart-box { background: linear-gradient(160deg, var(--cream), var(--blush-2)); border-color: var(--rose-deep); } body.night .shart-label { color: var(--rose-deep); } body.night .shart-text { color: var(--plum); } body.night #shartInput { background: var(--blush); color: var(--ink); border-color: var(--rose-deep); } * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); color: var(--ink); background: radial-gradient(120% 60% at 50% -10%, var(--blush-2) 0%, var(--blush) 55%), var(--blush); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background-color .55s ease, color .55s ease; } /* living, slowly drifting mesh of soft light */ body::before { content: ""; position: fixed; inset: -25%; z-index: 0; pointer-events: none; background: radial-gradient(38% 32% at 22% 26%, var(--mesh-1), transparent 60%), radial-gradient(44% 36% at 82% 18%, var(--mesh-2), transparent 60%), radial-gradient(48% 42% at 72% 84%, var(--mesh-3), transparent 62%), radial-gradient(40% 38% at 26% 80%, var(--mesh-2), transparent 60%); filter: blur(10px); animation: meshDrift 28s ease-in-out infinite alternate; will-change: transform; } @keyframes meshDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2.5%, -2%, 0) scale(1.08); } 100% { transform: translate3d(-2%, 1.5%, 0) scale(1.05); } } /* smooth day/night crossfade for surfaces */ .count-card, .tl-card, .game-card, .rps-card, .reason, .bucket-item, .letter-paper, .dash-card, .memory-calendar, .chat-panel, .chat-head, .chat-input-bar, .hms-box, .login-card, .footer { transition: background-color .55s ease, border-color .55s ease, color .55s ease; } img { max-width: 100%; display: block; } /* page column */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; } section { position: relative; z-index: 2; } /* ---------- shared section header ---------- */ .eyebrow { font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--rose-deep); text-align: center; margin-bottom: 14px; } .sec-title { font-family: var(--font-serif); font-weight: 600; font-size: 2.5rem; color: var(--berry); text-align: center; line-height: 1.16; letter-spacing: -.01em; margin-bottom: 32px; } .sec-title .small { font-size: 1.5rem; font-style: italic; font-weight: 500; } .pad { padding: 80px 0; } /* divider — refined hairline + small mark */ .divider { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--rose-deep); margin: 0 auto 22px; } .divider::before, .divider::after { content: ""; height: 1px; width: 64px; background: linear-gradient(90deg, transparent, var(--petal)); } .divider::after { background: linear-gradient(90deg, var(--petal), transparent); } .divider span { font-size: .95rem; color: var(--rose-deep); opacity: .8; } /* ===================================================== HERO ===================================================== */ .hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px 70px; position: relative; } .hero-ring { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff, var(--petal)); box-shadow: var(--shadow-md), inset 0 0 0 6px rgba(255,255,255,.6); margin-bottom: 26px; animation: floaty 5s ease-in-out infinite; } .hero-ring .heart-ico { font-size: 3.4rem; filter: drop-shadow(0 4px 6px rgba(214,83,126,.3)); } .hero .for-label { font-family: var(--font-body); font-size: .74rem; color: var(--rose-deep); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 22px; line-height: 1.5; } .hero h1 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(3rem, 16vw, 5rem); color: var(--berry); line-height: 1.04; margin: 0 0 20px; letter-spacing: -.015em; max-width: 100%; word-break: keep-all; } .hero .tagline { font-size: 1.02rem; color: var(--plum); max-width: 330px; margin: 0 auto 14px; text-wrap: balance; line-height: 1.65; } .hero .signed { font-family: var(--font-script); font-size: 1.5rem; color: var(--rose-deep); margin-top: 8px; } .scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--rose-deep); font-size: .8rem; font-family: var(--font-body); animation: bob 1.8s ease-in-out infinite; } .scroll-cue .chev { font-size: 1.2rem; } @keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} } @keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)} } /* ===================================================== COUNTERS ===================================================== */ .counters { display: flex; flex-direction: column; gap: 22px; } .count-card { background: var(--cream); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 30px 24px 26px; text-align: center; border: 1px solid var(--line); position: relative; overflow: hidden; } .count-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% -20%, rgba(255,211,226,.5), transparent 60%); pointer-events: none; } .count-card .c-emoji { font-size: 1.8rem; } .count-card .c-label { font-family: var(--font-body); font-size: .95rem; font-weight: 600; color: var(--plum); line-height: 1.4; margin: 8px 0 6px; } .count-card .c-date { font-size: .78rem; color: var(--ink-soft); margin-bottom: 18px; line-height: 1.45; } .count-days { font-family: var(--font-serif); font-weight: 600; font-size: 3.6rem; color: var(--berry); line-height: 1; } .count-days .unit { font-family: var(--font-body); font-size: .95rem; font-weight: 500; color: var(--ink-soft); } .count-hms { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } .hms-box { background: var(--blush-2); border-radius: var(--r-sm); padding: 8px 0 6px; min-width: 58px; flex: 1; } .hms-box b { display: block; font-size: 1.35rem; color: var(--berry); font-weight: 700; font-family: var(--font-serif); } .hms-box small { font-size: .62rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .5px; } /* ===================================================== LOVE LETTER ===================================================== */ .letter-stage { display: flex; flex-direction: column; align-items: center; } .envelope { width: 100%; max-width: 360px; aspect-ratio: 3 / 2; position: relative; cursor: pointer; perspective: 1000px; transition: transform .3s ease; } .envelope:active { transform: scale(.98); } .env-body { position: absolute; inset: 0; background: linear-gradient(160deg, #ffd9e6, #ffc2d7); border-radius: var(--r-md); box-shadow: var(--shadow-md); overflow: hidden; } .env-flap { position: absolute; top: 0; left: 0; right: 0; height: 56%; background: linear-gradient(160deg, #ffcadc, #ffb3cd); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .6s ease; z-index: 4; border-radius: var(--r-md) var(--r-md) 0 0; } .env-seal { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--rose), var(--berry)); display: grid; place-items: center; color: #fff; font-size: 1.5rem; box-shadow: 0 6px 14px rgba(214,83,126,.4); z-index: 5; transition: opacity .3s ease; } .env-hint { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-family: var(--font-hand); font-size: 1.2rem; color: var(--berry); z-index: 6; } .envelope.open .env-flap { transform: rotateX(180deg); z-index: 1; } .envelope.open .env-seal { opacity: 0; } .envelope.open .env-hint { opacity: 0; } .letter-paper { width: 100%; max-width: 420px; background: var(--cream); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 30px 26px 34px; margin-top: 22px; border: 1px solid var(--line); max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-14px); transition: max-height .7s ease, opacity .5s ease, transform .5s ease, padding .5s ease; padding-top: 0; padding-bottom: 0; } .letter-paper.show { max-height: 1200px; opacity: 1; transform: translateY(0); padding-top: 30px; padding-bottom: 34px; } .letter-paper h3 { font-family: var(--font-hand); font-size: 1.7rem; color: var(--berry); margin-bottom: 10px; } .letter-paper p { font-family: var(--font-hand); font-size: 1.34rem; color: var(--ink); line-height: 1.5; margin-bottom: 14px; } /* elegant drop cap on the opening line */ .letter-paper p:first-of-type::first-letter { font-family: var(--font-serif); font-weight: 700; font-size: 3.3rem; line-height: .8; float: left; margin: 8px 10px 0 0; color: var(--berry); } .letter-paper .sign { font-family: var(--font-script); font-size: 1.6rem; color: var(--rose-deep); text-align: right; margin-top: 8px; } /* ===================================================== REASONS ===================================================== */ .reasons { display: flex; flex-direction: column; gap: 14px; } .reason { display: flex; align-items: flex-start; gap: 14px; background: var(--cream); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); } .reason.pre { transform: translateY(20px); opacity: 0; } .reason.in { animation: slideUp .55s ease; } .reason .num { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(150deg, var(--petal), var(--rose)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1rem; box-shadow: 0 4px 10px rgba(214,83,126,.3); } .reason p { font-size: .96rem; color: var(--plum); } .reason p b { color: var(--berry); font-weight: 600; } /* ===================================================== TIMELINE ===================================================== */ .timeline { position: relative; padding-left: 30px; } .timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: linear-gradient(var(--rose), var(--petal)); } .tl-item { position: relative; margin-bottom: 26px; } .tl-item.pre { transform: translateY(20px); opacity: 0; } .tl-item.in { animation: slideUp .55s ease; } .tl-item::before { content: ""; position: absolute; left: -29px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--rose); border: 3px solid var(--blush); box-shadow: 0 0 0 3px rgba(255,159,190,.35); } .tl-date { font-family: var(--font-hand); font-size: 1.25rem; color: var(--rose-deep); } .tl-card { background: var(--cream); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 12px; margin-top: 6px; border: 1px solid var(--line); } .tl-card image-slot { width: 100%; height: 180px; display: block; border-radius: var(--r-sm); margin-bottom: 10px; } .tl-card h4 { font-size: 1rem; color: var(--berry); margin-bottom: 2px; } .tl-card p { font-size: .9rem; color: var(--ink-soft); } /* ===================================================== GALLERY ===================================================== */ .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .gallery image-slot { width: 100%; height: 150px; display: block; box-shadow: var(--shadow-sm); } .gallery .tall { grid-row: span 2; height: 312px; } .gallery-note { text-align: center; font-size: .82rem; color: var(--ink-soft); margin-top: 14px; font-family: var(--font-body); } /* ===================================================== PEACE / yarash card ===================================================== */ .pad-sm { padding: 34px 0 8px; } .peace-card { background: var(--cream); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 30px 24px 28px; text-align: center; border: 1.5px solid rgba(255,159,190,.35); position: relative; overflow: hidden; } .peace-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 90% at 50% -10%, rgba(239,217,242,.55), transparent 60%); pointer-events: none; } .peace-emoji { font-size: 2.4rem; } .peace-title { font-family: var(--font-script); font-weight: 400; font-size: 2.1rem; color: var(--berry); margin: 4px 0 14px; } .peace-card p { font-size: .98rem; color: var(--plum); margin-bottom: 12px; position: relative; } .peace-card p b { color: var(--berry); font-weight: 600; } .peace-sign { font-family: var(--font-hand); font-size: 1.3rem; color: var(--rose-deep); margin-top: 6px; line-height: 1.3; } /* ===================================================== SINGLE PHOTO (polaroid feel) ===================================================== */ .single-photo { display: flex; flex-direction: column; align-items: center; } .photo-frame { background: #fff; padding: 12px 12px 16px; border-radius: 8px; box-shadow: var(--shadow-lg); transform: rotate(-2deg); border: 1px solid var(--line); max-width: 320px; width: 100%; } .photo-frame image-slot { width: 100%; height: 360px; display: block; border-radius: 4px; } .photo-frame { position: relative; } .photo-slot { position: relative; width: 100%; height: 360px; border-radius: 4px; overflow: hidden; cursor: pointer; background: var(--blush); display: grid; place-items: center; } .photo-slot img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-empty { position: absolute; inset: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--rose-deep); font-family: var(--font-body); font-size: .92rem; text-align: center; padding: 20px; text-wrap: balance; border: 2px dashed var(--rose); border-radius: 14px; background: var(--blush-2); } .photo-empty .pe-ico { font-size: 2.8rem; } .photo-change { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: var(--berry); font-size: 1.1rem; cursor: pointer; box-shadow: var(--shadow-sm); display: grid; place-items: center; z-index: 2; } .photo-cap { font-family: var(--font-hand); font-size: 1.45rem; color: var(--berry); text-align: center; margin-top: 20px; transform: rotate(-1deg); line-height: 1.3; } /* lightbox */ .lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(126,59,87,.82); display: none; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(4px); } .lightbox.show { display: flex; } .lightbox img { max-width: 100%; max-height: 86vh; border-radius: var(--r-md); box-shadow: var(--shadow-lg); } .lightbox .lb-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.9); color: var(--berry); font-size: 1.4rem; cursor: pointer; box-shadow: var(--shadow-sm); } /* ===================================================== GAME ===================================================== */ .game-card { background: var(--cream); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 28px 22px 30px; text-align: center; border: 1px solid var(--line); } .game-card .q { font-family: var(--font-serif); font-weight: 600; font-size: 1.6rem; color: var(--berry); margin-bottom: 6px; } .game-card .sub { font-size: .9rem; color: var(--ink-soft); margin-bottom: 22px; } .love-meter { margin: 8px 0 6px; } .love-meter input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 10px; background: var(--blush-2); outline: none; } .love-meter input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--rose), var(--berry)); box-shadow: 0 4px 10px rgba(214,83,126,.4); cursor: pointer; border: 3px solid #fff; } .love-meter input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 35% 30%, var(--rose), var(--berry)); box-shadow: 0 4px 10px rgba(214,83,126,.4); cursor: pointer; } .meter-readout { font-family: var(--font-serif); font-weight: 600; font-size: 2.8rem; color: var(--berry); margin: 14px 0 4px; min-height: 2.6rem; line-height: 1; } .meter-msg { font-family: var(--font-body); font-style: italic; font-size: 1rem; color: var(--plum); min-height: 1.4em; } .yesno { margin-top: 26px; } .yesno .yn-q { font-family: var(--font-hand); font-size: 1.7rem; color: var(--berry); margin-bottom: 16px; } .yn-btns { position: relative; display: flex; gap: 14px; justify-content: center; min-height: 60px; align-items: center; } .btn { font-family: var(--font-body); font-weight: 600; font-size: 1rem; border: none; border-radius: 100px; padding: 13px 26px; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; } .btn-yes { background: linear-gradient(150deg, var(--rose), var(--berry)); color: #fff; box-shadow: 0 8px 18px rgba(214,83,126,.4); } .btn-yes:active { transform: scale(.95); } .btn-no { background: var(--blush-2); color: var(--ink-soft); position: relative; transition: transform .2s ease; } .yn-result { font-family: var(--font-script); font-size: 1.9rem; color: var(--berry); margin-top: 14px; opacity: 0; transform: scale(.8); transition: opacity .4s ease, transform .4s ease; } .yn-result.show { opacity: 1; transform: scale(1); } /* ===================================================== DON-DON ZIKI (Tosh-Qaychi-Qog'oz) ===================================================== */ .rps-card { background: var(--cream); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 26px 20px 30px; text-align: center; border: 1px solid var(--line); } .rps-intro { font-family: var(--font-serif); font-weight: 600; font-size: 1.4rem; color: var(--berry); line-height: 1.3; margin-bottom: 4px; } .rps-rule { font-size: .86rem; color: var(--ink-soft); margin-bottom: 22px; text-wrap: balance; } /* arena: two hands face to face */ .rps-arena { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 8px; } .rps-side { display: flex; flex-direction: column; align-items: center; gap: 8px; } .rps-hand { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 2.6rem; background: var(--blush-2); box-shadow: inset 0 2px 8px rgba(214,83,126,.12); } .rps-side.me .rps-hand { background: radial-gradient(circle at 35% 30%, #fff, var(--petal)); } .rps-name { font-family: var(--font-body); font-weight: 600; font-size: .95rem; color: var(--plum); } .rps-vs { font-family: var(--font-serif); font-size: 1.4rem; color: var(--rose-deep); opacity: .7; } .rps-hand.shake-hand { animation: rpsShake .42s ease-in-out 3; } @keyframes rpsShake { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-12px) rotate(-8deg)} } .rps-count { font-family: var(--font-serif); font-style: italic; font-size: 1.4rem; color: var(--rose-deep); min-height: 1.8rem; margin: 4px 0 14px; } /* choice buttons */ .rps-choices { display: flex; gap: 12px; justify-content: center; } .rps-choice { flex: 1; max-width: 100px; background: var(--blush); border: 1.5px solid var(--petal); border-radius: var(--r-md); padding: 14px 6px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; font-family: var(--font-body); } .rps-choice .emo { font-size: 2rem; } .rps-choice .lbl { font-size: .82rem; color: var(--plum); } .rps-choice:active { transform: scale(.94); } .rps-choice:hover { border-color: var(--rose); box-shadow: var(--shadow-sm); } .rps-choice:disabled { opacity: .45; cursor: default; } .rps-choice.picked { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(255,159,190,.3); transform: translateY(-2px); } /* result + romantic condition */ .rps-result { margin-top: 18px; opacity: 0; max-height: 0; overflow: hidden; transform: translateY(8px); transition: opacity .5s ease, max-height .6s ease, transform .5s ease; } .rps-result.show { opacity: 1; max-height: 800px; transform: translateY(0); } .rps-verdict { font-family: var(--font-serif); font-weight: 600; font-size: 2rem; color: var(--berry); line-height: 1.1; margin-bottom: 4px; } .rps-tease { font-size: .9rem; color: var(--ink-soft); margin-bottom: 16px; } .shart-box { background: linear-gradient(160deg, #FFE6F0, #FFD8E6); border-radius: var(--r-md); padding: 20px 18px; border: 1.5px dashed var(--rose); text-align: center; } .shart-label { font-family: var(--font-body); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--rose-deep); margin-bottom: 8px; } .shart-text { font-family: var(--font-hand); font-size: 1.55rem; color: var(--plum); line-height: 1.35; min-height: 2.6em; text-wrap: balance; } #shartInput { width: 100%; border: 1.5px solid var(--rose); border-radius: var(--r-sm); background: #fff; padding: 11px 13px; font-family: var(--font-body); font-size: .95rem; color: var(--ink); outline: none; resize: vertical; line-height: 1.4; margin-top: 4px; } #shartInput:focus { box-shadow: 0 0 0 4px rgba(255,159,190,.25); } .shart-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; } .btn-soft { background: var(--cream); color: var(--berry); border: 1.5px solid var(--petal); } .rps-done { font-family: var(--font-script); font-size: 1.7rem; color: var(--rose-deep); margin-top: 16px; opacity: 0; transform: scale(.85); transition: opacity .45s ease, transform .45s ease; } .rps-done.show { opacity: 1; transform: scale(1); } /* ===================================================== FOOTER ===================================================== */ .footer { text-align: center; padding: 56px 24px 90px; } .footer .heart-big { font-size: 2.6rem; animation: beat 1.4s ease-in-out infinite; } .footer .f-msg { font-family: var(--font-serif); font-weight: 600; font-size: 2.1rem; color: var(--berry); margin: 12px 0 6px; line-height: 1.18; } .footer .f-from { font-family: var(--font-hand); font-size: 1.4rem; color: var(--rose-deep); } .footer .f-tap { font-size: .76rem; color: var(--ink-soft); margin-top: 18px; } @keyframes beat { 0%,100%{transform:scale(1)} 14%{transform:scale(1.18)} 28%{transform:scale(1)} 42%{transform:scale(1.12)} } /* ===================================================== MUSIC BUTTON (floating) ===================================================== */ .music-btn { position: fixed; right: 16px; bottom: 16px; z-index: 900; width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(150deg, var(--rose), var(--berry)); color: #fff; font-size: 1.4rem; box-shadow: var(--shadow-md); display: grid; place-items: center; } .music-btn .ring2 { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); opacity: 0; } .music-btn.playing .ring2 { animation: pulse 1.6s ease-out infinite; } .music-btn.playing .ico { animation: spin 4s linear infinite; } @keyframes pulse { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.7);opacity:0} } @keyframes spin { to { transform: rotate(360deg); } } .music-hint { position: fixed; right: 80px; bottom: 30px; z-index: 900; background: var(--cream); color: var(--berry); font-family: var(--font-body); font-weight: 500; font-size: .82rem; padding: 8px 15px; border-radius: 100px; box-shadow: var(--shadow-sm); opacity: 0; transform: translateX(8px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; } .music-hint.show { opacity: 1; transform: translateX(0); } /* ===================================================== floating hearts / falling petals layers ===================================================== */ .bg-hearts { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .float-heart { position: absolute; bottom: -40px; font-size: 1.4rem; opacity: .5; animation: rise linear forwards; } @keyframes rise { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .55; } 100% { transform: translateY(-115svh) rotate(40deg); opacity: 0; } } /* tap heart burst */ .tap-heart { position: fixed; z-index: 1200; pointer-events: none; font-size: 1.6rem; animation: tapfly .9s ease-out forwards; } @keyframes tapfly { 0% { transform: translate(-50%,-50%) scale(.4); opacity: 1; } 100% { transform: translate(-50%,-160%) scale(1.3); opacity: 0; } } /* reveal-on-scroll for section blocks. Base state is VISIBLE. JS adds .pre to hide; removing .pre restores the visible base INSTANTLY (no motion dependency) — so opacity is never gated on a transition/animation that some preview environments freeze. The .in entrance animates TRANSFORM only: if it doesn't run, content is still fully visible (just not slid). */ .reveal.pre { opacity: 0; transform: translateY(22px); } .reveal.in { animation: slideUp .65s ease; } @keyframes slideUp { from { transform: translateY(22px); } to { transform: none; } } /* ===================================================== LOGIN + view gating ===================================================== */ #login { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(130% 70% at 50% 0%, var(--blush-2), var(--blush)); } body.locked #login { display: flex; } body.locked #viewParizoda, body.locked #viewJaxongir { display: none; } #viewJaxongir { display: none; } body.as-jaxongir #viewJaxongir { display: block; } body.as-jaxongir #viewParizoda { display: none; } body.as-parizoda #viewJaxongir { display: none; } .login-card { width: 100%; max-width: 360px; background: var(--cream); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 34px 26px 28px; text-align: center; } .login-heart { font-size: 3rem; animation: beat 1.4s ease-in-out infinite; } .login-title { font-family: var(--font-serif); font-weight: 700; font-size: 2.7rem; color: var(--berry); line-height: 1.05; margin: 6px 0 4px; letter-spacing: -.01em; } .login-sub { font-family: var(--font-body); font-size: .82rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-deep); margin-bottom: 24px; } .fld { display: block; text-align: left; margin-bottom: 14px; } .fld span { display: block; font-size: .8rem; color: var(--ink-soft); margin: 0 0 6px 4px; font-family: var(--font-body); } .fld input { width: 100%; border: 1.5px solid var(--petal); background: var(--blush); border-radius: var(--r-sm); padding: 13px 16px; font-size: 1rem; font-family: var(--font-body); color: var(--ink); outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .fld input:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(255,159,190,.25); } .login-err { display: none; color: var(--berry); font-size: .85rem; margin: 2px 0 10px; } .login-err.show { display: block; } .login-btn { width: 100%; margin-top: 8px; } .login-foot { font-family: var(--font-body); font-size: .8rem; color: var(--ink-soft); margin-top: 18px; } .shake { animation: shake .4s ease; } @keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} } /* logout */ .logout-btn { position: fixed; top: 12px; right: 12px; z-index: 950; border: none; background: rgba(255,255,255,.82); color: var(--berry); font-family: var(--font-body); font-size: .78rem; padding: 8px 14px; border-radius: 100px; box-shadow: var(--shadow-sm); cursor: pointer; display: none; } body.as-parizoda .logout-btn, body.as-jaxongir .logout-btn { display: block; } /* day/night toggle */ .theme-btn { position: fixed; top: 12px; left: 12px; z-index: 950; border: none; background: rgba(255,255,255,.82); color: var(--berry); font-family: var(--font-body); font-weight: 600; font-size: .76rem; padding: 8px 13px; border-radius: 100px; box-shadow: var(--shadow-sm); cursor: pointer; display: none; align-items: center; gap: 6px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } body.as-parizoda .theme-btn, body.as-jaxongir .theme-btn { display: inline-flex; } .theme-btn .tb-ico { font-size: .95rem; line-height: 1; } /* music only on Parizoda view */ .music-btn { display: none; } body.as-parizoda .music-btn { display: grid; } .music-hint { display: none; } body.as-parizoda .music-hint { display: block; } /* toast */ .toast { position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%) translateY(12px); z-index: 1500; background: var(--plum); color: #fff; font-family: var(--font-body); font-size: .9rem; padding: 11px 20px; border-radius: 100px; box-shadow: var(--shadow-md); opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none; max-width: 86vw; text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ===================================================== DASHBOARD (Jaxongir) ===================================================== */ #viewJaxongir { min-height: 100svh; padding: 66px 0 80px; } .dash-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; text-align: center; } .dash-ring { margin: 0 auto 18px; } .dash-h1 { font-family: var(--font-serif); font-weight: 600; font-size: 2.4rem; color: var(--berry); line-height: 1.08; margin: 2px 0 30px; letter-spacing: -.01em; } .dash-card { background: var(--cream); border-radius: var(--r-lg); box-shadow: var(--shadow-md); border: 1px solid var(--line); padding: 28px 24px 26px; } .dash-label { font-family: var(--font-body); font-size: .95rem; font-weight: 600; color: var(--plum); line-height: 1.35; display: block; } .dash-pct { font-family: var(--font-serif); font-weight: 600; font-size: 5rem; color: var(--berry); line-height: 1; margin: 14px 0 16px; } .dash-bar { height: 16px; border-radius: 10px; background: var(--blush-2); overflow: hidden; } .dash-fill { height: 100%; width: 0%; border-radius: 10px; background: linear-gradient(90deg, var(--petal), var(--rose), var(--berry)); transition: width .8s cubic-bezier(.2,.8,.2,1); } .dash-sub { font-size: .95rem; color: var(--plum); margin-top: 16px; text-wrap: balance; } .dash-shart { background: linear-gradient(160deg, #FFE6F0, #FFD8E6); border: 1.5px dashed var(--rose); border-radius: var(--r-md); padding: 18px 18px 16px; margin: 14px 0 6px; text-align: center; } .dash-shart .dsh-label { font-family: var(--font-body); font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rose-deep); margin-bottom: 8px; line-height: 1.4; } .dash-shart .dsh-text { font-family: var(--font-hand); font-size: 1.5rem; color: var(--plum); line-height: 1.35; text-wrap: balance; } .dash-shart .dsh-time { font-size: .72rem; color: var(--ink-soft); margin-top: 10px; } .dash-photo { margin: 14px 0 6px; } .dash-photo-label { font-family: var(--font-body); font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-deep); margin-bottom: 8px; } .dash-photo-img { width: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-sm); border: 1px solid var(--line); display: block; } /* ===================================================== MEMORY CALENDAR ===================================================== */ .memory-calendar { background: var(--cream); border-radius: var(--r-lg); box-shadow: var(--shadow-md); border: 1px solid var(--line); padding: 18px 16px 20px; } .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .cal-month { font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem; color: var(--berry); white-space: nowrap; } .cal-nav { width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; background: var(--blush-2); color: var(--berry); font-size: 1.4rem; line-height: 1; display: grid; place-items: center; transition: background .2s ease; } .cal-nav:active { background: var(--petal); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .cal-wd { margin-bottom: 6px; } .cal-wd-cell { text-align: center; font-size: .68rem; color: var(--ink-soft); font-weight: 600; letter-spacing: .3px; } .cal-cell { position: relative; aspect-ratio: 1; border: none; cursor: pointer; border-radius: 12px; background: var(--blush); color: var(--plum); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: .9rem; padding: 0; transition: transform .12s ease, background .2s ease; } .cal-cell.empty { background: transparent; cursor: default; } .cal-cell:not(.empty):active { transform: scale(.92); } .cal-cell.today { box-shadow: inset 0 0 0 2px var(--rose); font-weight: 700; } .cal-cell.special { background: linear-gradient(150deg, var(--petal), #FFE0EC); } .cal-cell.has-mem { background: linear-gradient(150deg, var(--rose), var(--rose-deep)); color: #fff; } .cal-num { position: relative; z-index: 1; } .cal-sp { position: absolute; top: 3px; right: 5px; font-size: .62rem; color: var(--berry); } .cal-cell.has-mem .cal-sp { color: #fff; } .cal-dot { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); min-width: 6px; height: 6px; border-radius: 100px; background: #fff; font-size: .56rem; line-height: 1; color: var(--berry); padding: 0 3px; display: flex; align-items: center; justify-content: center; } .cal-cell:not(.has-mem) .cal-dot { background: var(--rose); } .cal-legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 16px; font-size: .74rem; color: var(--ink-soft); } .cal-legend span { display: inline-flex; align-items: center; gap: 6px; } .cal-legend i { width: 14px; height: 14px; border-radius: 5px; display: inline-block; } .cal-leg-sp { background: linear-gradient(150deg, var(--petal), #FFE0EC); } .cal-leg-mem { background: linear-gradient(150deg, var(--rose), var(--rose-deep)); } /* calendar modal */ .cal-modal { position: fixed; inset: 0; z-index: 1100; display: none; align-items: flex-end; justify-content: center; background: rgba(126,59,87,.55); backdrop-filter: blur(3px); } .cal-modal.show { display: flex; } .cal-sheet { width: 100%; max-width: var(--maxw); background: var(--cream); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 22px 20px 28px; max-height: 88svh; overflow-y: auto; position: relative; box-shadow: var(--shadow-lg); animation: sheetUp .35s cubic-bezier(.2,.8,.2,1); } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .cal-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--blush-2); color: var(--berry); font-size: 1.1rem; cursor: pointer; } .cal-modal-date { font-family: var(--font-serif); font-weight: 600; font-size: 1.7rem; color: var(--berry); margin-bottom: 16px; padding-right: 40px; } .cal-mem-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .cal-empty { font-family: var(--font-body); font-style: italic; font-size: 1rem; color: var(--ink-soft); text-align: center; padding: 14px 0; } .cal-mem { background: var(--blush); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); } .cal-mem-img { width: 100%; max-height: 220px; object-fit: cover; display: block; cursor: pointer; } .cal-mem-body { padding: 12px 14px 10px; } .cal-mem-text { font-family: var(--font-hand); font-size: 1.3rem; color: var(--ink); line-height: 1.35; margin-bottom: 8px; white-space: pre-wrap; } .cal-mem-meta { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: var(--ink-soft); } .cal-mem-meta .cm-author { font-weight: 600; color: var(--rose-deep); } .cal-mem-actions { display: flex; gap: 14px; margin-top: 8px; } .cal-mem-actions button { border: none; background: none; cursor: pointer; font-size: .78rem; font-family: var(--font-body); padding: 2px 0; } .cal-mem-actions .cm-edit { color: var(--berry); } .cal-mem-actions .cm-del { color: var(--ink-soft); } .cal-add { border-top: 1px dashed var(--petal); padding-top: 16px; } .cal-add textarea { width: 100%; border: 1.5px solid var(--petal); border-radius: var(--r-sm); background: var(--blush); padding: 12px 14px; font-family: var(--font-body); font-size: .95rem; color: var(--ink); outline: none; resize: vertical; line-height: 1.45; } .cal-add textarea:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(255,159,190,.22); } .cal-add-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .cal-photo-btn { background: var(--blush-2); color: var(--berry); border-radius: 100px; padding: 11px 16px; font-size: .85rem; cursor: pointer; white-space: nowrap; font-family: var(--font-body); } .cal-photo-prev { width: 42px; height: 42px; object-fit: cover; border-radius: 10px; } .cal-save { margin-left: auto; padding: 11px 22px; } /* ===================================================== MEMORY ALBUM (vaqt bo'yicha) ===================================================== */ .album { display: flex; flex-direction: column; gap: 26px; } .album-empty { text-align: center; font-family: var(--font-hand); font-size: 1.4rem; color: var(--ink-soft); background: var(--cream); border-radius: var(--r-lg); padding: 36px 24px; border: 1.5px dashed var(--petal); text-wrap: balance; } .album-group-title { font-family: var(--font-script); font-size: 1.6rem; color: var(--berry); text-align: center; margin-bottom: 14px; } .album-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .album-card { background: var(--cream); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); } .album-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; cursor: pointer; } .album-card .ac-body { padding: 9px 11px 11px; } .album-card .ac-date { font-size: .68rem; color: var(--rose-deep); font-weight: 600; } .album-card .ac-text { font-family: var(--font-hand); font-size: 1.05rem; color: var(--ink); line-height: 1.3; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .album-card .ac-author { font-size: .64rem; color: var(--ink-soft); margin-top: 5px; } .dash-upd { font-size: .72rem; color: var(--ink-soft); margin: 10px 0 18px; } .dash-refresh { width: auto; } .dash-note { font-size: .8rem; color: var(--ink-soft); margin-top: 18px; text-wrap: balance; } .dash-cal-wrap { margin-top: 40px; padding-top: 12px; border-top: 1px dashed var(--petal); } .dash-cal-wrap .sec-title { margin-bottom: 18px; } .dash-section { margin-top: 40px; padding-top: 12px; border-top: 1px dashed var(--petal); } .dash-section .sec-title { margin-bottom: 18px; } /* ===================================================== BUCKET LIST — Орзулар рўйхати ===================================================== */ .bucket-stat { text-align: center; font-family: var(--font-body); font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--rose-deep); margin-bottom: 18px; } #bucketForm, #dashBucketForm { display: flex; gap: 8px; margin-bottom: 18px; } #bucketInput, #dashBucketInput { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 100px; background: var(--cream); padding: 12px 18px; font-family: var(--font-body); font-size: .92rem; color: var(--ink); outline: none; } #bucketInput:focus, #dashBucketInput:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(231,159,182,.2); } .bucket-add-btn { flex: 0 0 auto; border: none; border-radius: 50%; width: 46px; height: 46px; background: linear-gradient(150deg, var(--rose), var(--berry)); color: #fff; font-size: 1.5rem; cursor: pointer; box-shadow: var(--shadow-sm); line-height: 1; display: grid; place-items: center; } .bucket-add-btn:active { transform: scale(.94); } #bucketList, #dashBucketList { display: flex; flex-direction: column; gap: 10px; } .bucket-item { display: flex; align-items: flex-start; gap: 12px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 14px; box-shadow: var(--shadow-sm); transition: opacity .25s ease, background .25s ease; } .bucket-check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px; border: 2px solid var(--rose); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; font-size: .85rem; font-weight: 700; transition: background .2s ease, border-color .2s ease; } .bucket-item.done .bucket-check { background: linear-gradient(150deg, var(--rose), var(--berry)); border-color: var(--berry); } .bucket-body { flex: 1; min-width: 0; } .bucket-text { font-size: .96rem; color: var(--plum); line-height: 1.4; } .bucket-item.done .bucket-text { text-decoration: line-through; color: var(--ink-soft); } .bucket-meta { font-size: .68rem; color: var(--ink-soft); margin-top: 3px; } .bucket-del { flex: 0 0 auto; border: none; background: transparent; color: var(--ink-soft); font-size: .85rem; cursor: pointer; padding: 4px 6px; border-radius: 8px; line-height: 1; } .bucket-del:hover { background: var(--blush-2); color: var(--berry); } .bucket-empty { text-align: center; font-family: var(--font-hand); font-size: 1.3rem; color: var(--ink-soft); padding: 22px 10px; line-height: 1.4; } /* ===================================================== COUPLE CHAT — Иккимиз ===================================================== */ .chat-fab { position: fixed; left: 16px; bottom: 16px; z-index: 905; width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(150deg, var(--rose), var(--berry)); color: #fff; font-size: 1.4rem; box-shadow: var(--shadow-md); display: none; place-items: center; } body.as-parizoda .chat-fab, body.as-jaxongir .chat-fab { display: grid; } .chat-fab:active { transform: scale(.94); } .chat-fab .cf-ico { line-height: 1; } .chat-dot { position: absolute; top: 8px; right: 8px; width: 13px; height: 13px; background: #fff; border-radius: 50%; border: 2.5px solid var(--berry); box-shadow: 0 0 0 2px rgba(255,255,255,.4); } .chat-panel { position: fixed; inset: 0; z-index: 1400; display: flex; flex-direction: column; background: var(--blush); transform: translateY(100%); transition: transform .32s cubic-bezier(.4,0,.2,1); max-width: var(--maxw); margin: 0 auto; } .chat-panel.show { transform: translateY(0); box-shadow: 0 0 60px rgba(110,56,80,.2); } .chat-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--cream); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); padding-top: max(16px, env(safe-area-inset-top)); } .chat-head-t { display: flex; flex-direction: column; gap: 1px; } .chat-head-title { font-family: var(--font-serif); font-weight: 600; font-size: 1.4rem; color: var(--berry); line-height: 1; } .chat-head-sub { font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-deep); } .chat-close { width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; background: var(--blush-2); color: var(--berry); font-size: 1rem; display: grid; place-items: center; } .chat-list { flex: 1 1 auto; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 8px; -webkit-overflow-scrolling: touch; } .chat-empty { margin: auto; text-align: center; font-family: var(--font-hand); font-size: 1.4rem; color: var(--ink-soft); line-height: 1.5; max-width: 260px; } .chat-day { text-align: center; margin: 10px 0 6px; } .chat-day span { font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-soft); background: var(--blush-2); padding: 4px 12px; border-radius: 100px; } .chat-row { display: flex; } .chat-row.me { justify-content: flex-end; } .chat-row.them { justify-content: flex-start; } .chat-bub { position: relative; max-width: 78%; padding: 9px 13px 7px; border-radius: 18px; box-shadow: var(--shadow-sm); word-wrap: break-word; overflow-wrap: anywhere; } .chat-row.them .chat-bub { background: var(--cream); border: 1px solid var(--line); border-bottom-left-radius: 6px; } .chat-row.me .chat-bub { background: linear-gradient(150deg, var(--rose), var(--rose-deep)); border-bottom-right-radius: 6px; } .chat-txt { font-family: var(--font-body); font-size: .94rem; line-height: 1.4; color: var(--plum); white-space: pre-wrap; } .chat-row.me .chat-txt { color: #fff; } .chat-time { font-family: var(--font-body); font-size: .62rem; margin-top: 3px; text-align: right; color: var(--ink-soft); } .chat-row.me .chat-time { color: rgba(255,255,255,.8); } .chat-del { position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--cream); color: var(--ink-soft); font-size: .62rem; cursor: pointer; box-shadow: var(--shadow-sm); opacity: 0; transition: opacity .2s ease; display: grid; place-items: center; } .chat-row.me .chat-bub:hover .chat-del, .chat-row.me .chat-bub:active .chat-del { opacity: 1; } .chat-input-bar { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 9px; padding: 12px 14px; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: var(--cream); border-top: 1px solid var(--line); } #chatInput { flex: 1; min-width: 0; resize: none; border: 1px solid var(--line); border-radius: 22px; background: var(--blush); padding: 11px 16px; font-family: var(--font-body); font-size: .94rem; color: var(--ink); outline: none; line-height: 1.35; max-height: 120px; } #chatInput:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(231,159,182,.2); } .chat-send { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(150deg, var(--rose), var(--berry)); color: #fff; font-size: 1.05rem; display: grid; place-items: center; box-shadow: var(--shadow-sm); } .chat-send:active { transform: scale(.92); } /* --- chat oyoq qismi: kiritish + ovoz yozish --- */ .chat-foot { flex: 0 0 auto; position: relative; } .chat-mic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: var(--blush-2); color: var(--berry); font-size: 1.15rem; display: grid; place-items: center; box-shadow: var(--shadow-sm); } .chat-mic:active { transform: scale(.92); } .chat-rec { display: flex; align-items: center; gap: 10px; padding: 12px 14px; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: var(--cream); border-top: 1px solid var(--line); } .chat-rec-cancel, .chat-rec-send { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; font-size: 1rem; box-shadow: var(--shadow-sm); } .chat-rec-cancel { background: var(--blush-2); color: var(--ink-soft); } .chat-rec-send { background: linear-gradient(150deg, var(--rose), var(--berry)); color: #fff; font-size: 1.05rem; } .chat-rec-cancel:active, .chat-rec-send:active { transform: scale(.92); } .chat-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #e0245e; flex: 0 0 auto; animation: recpulse 1.1s ease-in-out infinite; } @keyframes recpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } } .chat-rec-time { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--berry); font-size: .95rem; } .chat-rec-hint { flex: 1; font-family: var(--font-body); font-size: .8rem; color: var(--ink-soft); } /* --- ovozli xabar pleyeri --- */ .chat-bub.has-voice { padding-top: 8px; } .chat-voice { display: flex; align-items: center; gap: 9px; min-width: 168px; } .cv-play { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; background: var(--blush-2); color: var(--berry); font-size: .85rem; display: grid; place-items: center; } .chat-row.me .cv-play { background: rgba(255,255,255,.92); color: var(--berry); } .cv-bar { flex: 1; height: 5px; border-radius: 100px; background: rgba(150,90,115,.25); cursor: pointer; position: relative; } .chat-row.me .cv-bar { background: rgba(255,255,255,.4); } .cv-prog { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 100px; background: var(--rose-deep); } .chat-row.me .cv-prog { background: #fff; } .cv-time { flex: 0 0 auto; font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: .72rem; color: var(--ink-soft); min-width: 30px; text-align: right; } .chat-row.me .cv-time { color: rgba(255,255,255,.85); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } body::before { animation: none !important; } .reveal.pre, .reason.pre, .tl-item.pre { opacity: 1 !important; transform: none !important; } } /* ===================================================== 2c TUN-LUXE — APP SHELL + TAB-BAR (yangi dizayn) ===================================================== */ /* Aktiv view = to'liq ekran, ustki kontent scroll + pastda tab-bar */ body.as-parizoda #viewParizoda, body.as-jaxongir #viewJaxongir { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 5; max-width: var(--maxw); margin-inline: auto; height: 100svh; height: 100dvh; padding: 0; background: radial-gradient(120% 55% at 50% -8%, var(--blush-2) 0%, var(--blush) 60%), var(--blush); } .app-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 24px; } .tabpage { display: block; } .tabpage > section:first-child { padding-top: 8px; } /* Tab almashganda yangi sahifa keskin sakramasдан yumshoq chiqadi (kontent darhol ochiq/interaktiv) */ .tabpage:not([hidden]) { animation: tabFade .16s ease-out both; } @keyframes tabFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* pastki tab-bar */ .tabbar { flex: 0 0 auto; display: flex; align-items: stretch; /* Fon 94% shaffofmas — blur deyarli ko'rinmasdi, lekin scroll'da GPU'ni yeyardi. Olib tashlandi. */ background: rgba(14,10,19,.97); border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); } .tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; padding: 8px 4px 5px; color: var(--ink-soft); font-family: var(--font-body); font-size: .64rem; font-weight: 600; letter-spacing: .01em; transition: color .2s ease; } .tab svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.6; } .tab.active { color: var(--gold); } .tab.active .tab-lbl { color: var(--gold); } .tab:active { transform: scale(.94); } /* o'qilmagan chat belgisi tab ustida */ .tab .tab-dot { position: absolute; top: 6px; right: calc(50% - 18px); width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--blush); display: none; } .tab.has-unread .tab-dot { display: block; } /* Bu dizaynda: chat tab orqali ochiladi, kun/tun yo'q (doim luxe) */ .chat-fab { display: none !important; } .theme-btn { display: none !important; } /* logout — qorong'u pill, oltin */ .logout-btn { background: rgba(29,20,40,.72); color: var(--gold); border: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* music tugmasi tab-bar ustida */ body.as-parizoda .music-btn { bottom: calc(78px + env(safe-area-inset-bottom)); } .music-btn { background: linear-gradient(150deg, #3A2740, #241A2B); border: 1px solid var(--line); color: var(--gold); } .music-hint { bottom: calc(92px + env(safe-area-inset-bottom)); background: var(--tile); color: var(--gold); border: 1px solid var(--line); } /* eyebrow / divider / raqamlar — oltin urg'u */ .eyebrow { color: var(--gold); letter-spacing: .28em; } .count-days .big, .dash-pct { color: var(--gold); font-family: var(--font-serif); } .for-label { color: var(--gold); } /* asosiy "voy" kartalar — gradient + nozik chegara */ .count-card, .letter-paper, .game-card, .rps-card, .dash-card, .login-card, .dash-shart, .shart-box { background: var(--card-grad); border: 1px solid var(--petal); } .count-card, .dash-card { box-shadow: var(--shadow-md); } /* oltin porlashli hero uzugi + monogram */ .hero-ring { background: linear-gradient(160deg, #241A2B, #1A1222); border: 1px solid var(--gold); box-shadow: 0 0 40px rgba(217,179,106,.20); } .hero-mono { font-family: var(--font-serif); color: var(--gold); font-size: 1.6rem; letter-spacing: .05em; } /* tab-page ichidagi bo'lim orasidagi ortiqcha fon-band' larni tekislash */ .tabpage .pad { background: transparent !important; } /* login — luxe */ #login { background: radial-gradient(130% 70% at 50% 0%, #1A1222, var(--blush)); } .login-heart { filter: saturate(.6); } /* ===================================================== АЛЬБОМ + фон мусиқаси (yangi bo'lim) ===================================================== */ /* 5 tab sig'ishi uchun biroz ixchamlashtiramiz */ .tabbar .tab { font-size: .6rem; padding: 8px 2px 5px; } .tabbar .tab svg { width: 22px; height: 22px; } /* Фон мусиқаси kartasi */ .music-card { display: flex; align-items: center; gap: 12px; background: var(--card-grad); border: 1px solid var(--petal); border-radius: var(--r-md); padding: 13px 15px; margin: 4px 0 16px; } .music-card .mc-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; color: var(--gold); background: var(--tile); border: 1px solid var(--line); } .music-card .mc-body { flex: 1; min-width: 0; } .music-card .mc-title { font-family: var(--font-body); font-weight: 600; color: var(--berry); font-size: .95rem; } .music-card .mc-sub { font-size: .72rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; } .music-card .mc-btn { flex: 0 0 auto; cursor: pointer; border-radius: 100px; padding: 9px 15px; font-family: var(--font-body); font-weight: 600; font-size: .8rem; background: linear-gradient(150deg, #C76E92, #8E3A5C); color: #fff; border: 1px solid #8E3A5C; } .music-card .mc-btn:active { transform: scale(.95); } /* Расм/видео қўшиш tugmasi */ .album-add { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed var(--gold); border-radius: var(--r-md); padding: 15px; margin-bottom: 14px; cursor: pointer; color: var(--gold); font-family: var(--font-body); font-weight: 600; font-size: .9rem; background: rgba(217,179,106,.05); } .album-add:active { transform: scale(.99); } .album-add .aa-plus { font-size: 1.3rem; line-height: 1; } .album-add.busy { opacity: .6; pointer-events: none; } .album-add.busy .aa-txt { display: none; } .album-add.busy::after { content: attr(data-label); font-weight: 600; } /* Grid */ .album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .album-empty { grid-column: 1 / -1; text-align: center; font-family: var(--font-hand); font-size: 1.3rem; color: var(--ink-soft); padding: 28px 10px; line-height: 1.5; } .album-cell { position: relative; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: var(--tile); border: 1px solid var(--line); cursor: pointer; } .album-cell img, .album-cell video { width: 100%; height: 100%; object-fit: cover; display: block; } .album-cell .album-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5rem; color: #fff; background: rgba(0,0,0,.22); pointer-events: none; text-shadow: 0 2px 8px rgba(0,0,0,.55); } .album-cell .album-author { position: absolute; left: 6px; bottom: 6px; font-size: .6rem; color: #fff; background: rgba(0,0,0,.45); padding: 2px 7px; border-radius: 100px; font-family: var(--font-body); max-width: 78%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .album-cell .album-del { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff; font-size: .68rem; cursor: pointer; display: grid; place-items: center; opacity: .92; } .album-cell .album-del:active { transform: scale(.9); } /* Видео modal */ .videobox { position: fixed; inset: 0; z-index: 1600; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(6,4,10,.93); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .videobox.show { display: flex; } .videobox video { max-width: 100%; max-height: 86vh; border-radius: 14px; background: #000; } /* ===================================================== Уй: JONLI MODULLAR (xat / kayfiyat / savol-javob) ===================================================== */ /* --- Jonli xat --- */ .letter-body { font-family: var(--font-serif-soft); font-size: 1.12rem; line-height: 1.7; color: var(--ink); white-space: pre-wrap; } .letter-meta { margin-top: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .letter-meta .lm-by { font-family: var(--font-hand); font-size: 1.35rem; color: var(--rose-deep); } .letter-meta .lm-when { font-family: var(--font-body); font-size: .7rem; color: var(--ink-soft); } .letter-edit { margin-top: 14px; border: 1px solid var(--line); background: var(--tile); color: var(--gold); font-family: var(--font-body); font-size: .78rem; padding: 7px 15px; border-radius: 100px; cursor: pointer; } .letter-edit:active { transform: scale(.96); } .letter-editor textarea { width: 100%; border: 1px solid var(--petal); background: var(--blush); color: var(--ink); border-radius: 12px; padding: 12px; font-family: var(--font-serif-soft); font-size: 1.05rem; line-height: 1.6; resize: vertical; outline: none; } .letter-editor-row { display: flex; gap: 8px; margin-top: 10px; } /* --- Kundalik kayfiyat --- */ .mood-cards { display: flex; gap: 10px; margin-bottom: 16px; } .mood-card { flex: 1; min-width: 0; background: var(--card-grad); border: 1px solid var(--petal); border-radius: var(--r-md); padding: 16px 12px; text-align: center; } .mood-card.mine { border-color: var(--gold); box-shadow: 0 0 24px rgba(217,179,106,.12); } .mood-card .mc-emoji { font-size: 2.4rem; line-height: 1; } .mood-card .mc-name { font-family: var(--font-body); font-weight: 600; font-size: .8rem; color: var(--berry); margin-top: 8px; } .mood-card .mc-note { font-size: .78rem; color: var(--ink); margin-top: 4px; line-height: 1.35; word-wrap: break-word; } .mood-card.empty .mc-note { color: var(--ink-soft); font-style: italic; } .mood-card .mc-when { font-size: .64rem; color: var(--ink-soft); margin-top: 6px; } .mood-set { background: var(--tile); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; } .mood-emojis { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .mood-emoji { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; transition: transform .12s ease, border-color .2s ease, background .2s ease; } .mood-emoji.sel { border-color: var(--gold); background: rgba(217,179,106,.14); transform: scale(1.08); } .mood-note-row { display: flex; gap: 8px; margin-top: 12px; } .mood-note-row input { flex: 1; min-width: 0; border: 1px solid var(--petal); background: var(--blush); color: var(--ink); border-radius: 100px; padding: 10px 15px; font-family: var(--font-body); font-size: .88rem; outline: none; } .mood-note-row input:focus { border-color: var(--gold); } .mood-save { flex: 0 0 auto; border: none; border-radius: 100px; padding: 10px 18px; cursor: pointer; background: linear-gradient(150deg, #C76E92, #8E3A5C); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: .85rem; } .mood-save:active { transform: scale(.95); } /* --- Savol-javob --- */ .qa-today { background: var(--card-grad); border: 1px solid var(--petal); border-radius: var(--r-md); padding: 18px; } .qa-q { font-family: var(--font-serif); font-size: 1.22rem; color: var(--berry); line-height: 1.35; margin-bottom: 14px; } .qa-me, .qa-partner { margin-top: 10px; } .qa-answer-btn { border: 1.5px dashed var(--gold); background: rgba(217,179,106,.05); color: var(--gold); border-radius: 100px; padding: 10px 18px; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: .85rem; } .qa-answer-btn:active { transform: scale(.97); } .qa-ans { background: var(--tile); border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; position: relative; } .qa-ans.mine { border-color: rgba(217,179,106,.4); } .qa-ans .qa-who { display: block; font-family: var(--font-body); font-weight: 600; font-size: .66rem; color: var(--gold); letter-spacing: .04em; margin-bottom: 3px; } .qa-ans .qa-text { font-size: .92rem; color: var(--ink); line-height: 1.45; white-space: pre-wrap; } .qa-ans .qa-edit { position: absolute; top: 8px; right: 10px; border: none; background: none; color: var(--ink-soft); font-size: .68rem; cursor: pointer; } .qa-wait { font-family: var(--font-hand); font-size: 1.15rem; color: var(--ink-soft); text-align: center; padding: 8px; } .qa-editor textarea { width: 100%; border: 1px solid var(--petal); background: var(--blush); color: var(--ink); border-radius: 12px; padding: 11px; font-family: var(--font-body); font-size: .95rem; resize: vertical; outline: none; } .qa-editor-row { display: flex; gap: 8px; margin-top: 10px; } .qa-history { margin-top: 16px; } .qa-hist-title { font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; text-align: center; } .qa-hist-card { background: var(--tile); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; } .qa-hist-q { font-family: var(--font-serif-soft); font-size: 1.02rem; color: var(--berry); margin-bottom: 6px; } .qa-hist-line { font-size: .84rem; color: var(--ink); margin-top: 3px; } .qa-hist-line .qa-who { color: var(--rose-deep); font-weight: 600; margin-right: 6px; } .qa-hist-date { font-size: .62rem; color: var(--ink-soft); margin-top: 6px; text-align: right; } /* --- taqvim: rasm/video preview + xotiradagi video --- */ .cal-video-btn { background: var(--blush-2); color: var(--berry); border-radius: 100px; padding: 11px 16px; font-size: .85rem; cursor: pointer; white-space: nowrap; font-family: var(--font-body); } .cal-prev-wrap { display: flex; flex-wrap: wrap; gap: 10px; } .cal-prev-item { position: relative; display: inline-block; margin-top: 12px; max-width: 100%; } .cal-prev-rm { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: .68rem; cursor: pointer; display: grid; place-items: center; line-height: 1; } .cal-prev-rm:active { transform: scale(.9); } .cal-photo-prev { display: block; width: auto; max-width: 150px; max-height: 150px; height: auto; object-fit: cover; border-radius: 12px; } .cal-video-prev { display: block; max-width: 100%; max-height: 200px; border-radius: 12px; background: #000; } .cal-up-status { margin-top: 10px; font-family: var(--font-body); font-size: .8rem; color: var(--gold); } .cal-mem-video { width: 100%; max-height: 260px; display: block; background: #000; }