/* Standalone /app/ page. Brand colours and backdrop follow the theme (assets/css/style-v2.css). */ :root { --ybb-ea-purple: #574a9e; --ybb-ea-purple-dark: #3d355f; --ybb-ea-text: #4f4f4f; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; overflow-x: clip; color: var(--ybb-ea-text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } /* * Cosmic backdrop, copied from the theme (assets/css/style-v2.css, the * ".main" backdrop used on /менюта/ and site-wide) so /app/ matches it * without loading the whole theme stylesheet. Keep in step with the theme. * The planet image variables (--planet-*) are set in views/page.php, which * knows the theme URL. */ :root { --cosmic-sky-tile: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27200%27%20height%3D%27200%27%20viewBox%3D%270%200%20200%20200%27%3E%0A%3Ccircle%20cx%3D%2714%27%20cy%3D%2722%27%20r%3D%271.2%27%20fill%3D%27%23fff%27%20opacity%3D%270.65%27/%3E%0A%3Ccircle%20cx%3D%2738%27%20cy%3D%278%27%20r%3D%270.9%27%20fill%3D%27%23fef3c7%27%20opacity%3D%270.75%27/%3E%0A%3Ccircle%20cx%3D%2762%27%20cy%3D%2744%27%20r%3D%271.1%27%20fill%3D%27%23fff%27%20opacity%3D%270.5%27/%3E%0A%3Ccircle%20cx%3D%2788%27%20cy%3D%2718%27%20r%3D%270.8%27%20fill%3D%27%23fbcfe8%27%20opacity%3D%270.55%27/%3E%0A%3Ccircle%20cx%3D%27112%27%20cy%3D%2752%27%20r%3D%271.3%27%20fill%3D%27%23fff%27%20opacity%3D%270.7%27/%3E%0A%3Ccircle%20cx%3D%27136%27%20cy%3D%2712%27%20r%3D%270.9%27%20fill%3D%27%23fde68a%27%20opacity%3D%270.8%27/%3E%0A%3Ccircle%20cx%3D%27162%27%20cy%3D%2738%27%20r%3D%271%27%20fill%3D%27%23fff%27%20opacity%3D%270.45%27/%3E%0A%3Ccircle%20cx%3D%27182%27%20cy%3D%2766%27%20r%3D%271.1%27%20fill%3D%27%23e9d5ff%27%20opacity%3D%270.55%27/%3E%0A%3Ccircle%20cx%3D%2728%27%20cy%3D%2772%27%20r%3D%270.85%27%20fill%3D%27%23fff%27%20opacity%3D%270.55%27/%3E%0A%3Ccircle%20cx%3D%2754%27%20cy%3D%2796%27%20r%3D%271.15%27%20fill%3D%27%23fef08a%27%20opacity%3D%270.65%27/%3E%0A%3Ccircle%20cx%3D%2778%27%20cy%3D%2774%27%20r%3D%270.75%27%20fill%3D%27%23fff%27%20opacity%3D%270.5%27/%3E%0A%3Ccircle%20cx%3D%27104%27%20cy%3D%27108%27%20r%3D%271%27%20fill%3D%27%23fbcfe8%27%20opacity%3D%270.45%27/%3E%0A%3Ccircle%20cx%3D%27128%27%20cy%3D%2782%27%20r%3D%271.2%27%20fill%3D%27%23fff%27%20opacity%3D%270.6%27/%3E%0A%3Ccircle%20cx%3D%27154%27%20cy%3D%27118%27%20r%3D%270.9%27%20fill%3D%27%23fde68a%27%20opacity%3D%270.7%27/%3E%0A%3Ccircle%20cx%3D%27178%27%20cy%3D%2794%27%20r%3D%270.85%27%20fill%3D%27%23fff%27%20opacity%3D%270.48%27/%3E%0A%3Ccircle%20cx%3D%2718%27%20cy%3D%27128%27%20r%3D%271%27%20fill%3D%27%23e9d5ff%27%20opacity%3D%270.5%27/%3E%0A%3Ccircle%20cx%3D%2744%27%20cy%3D%27154%27%20r%3D%271.1%27%20fill%3D%27%23fff%27%20opacity%3D%270.62%27/%3E%0A%3Ccircle%20cx%3D%2770%27%20cy%3D%27132%27%20r%3D%270.8%27%20fill%3D%27%23fbcfe8%27%20opacity%3D%270.55%27/%3E%0A%3Ccircle%20cx%3D%2796%27%20cy%3D%27168%27%20r%3D%271.25%27%20fill%3D%27%23fef3c7%27%20opacity%3D%270.72%27/%3E%0A%3Ccircle%20cx%3D%27122%27%20cy%3D%27142%27%20r%3D%270.9%27%20fill%3D%27%23fff%27%20opacity%3D%270.52%27/%3E%0A%3Ccircle%20cx%3D%27148%27%20cy%3D%27176%27%20r%3D%271%27%20fill%3D%27%23e9d5ff%27%20opacity%3D%270.48%27/%3E%0A%3Ccircle%20cx%3D%27174%27%20cy%3D%27148%27%20r%3D%270.85%27%20fill%3D%27%23fff%27%20opacity%3D%270.58%27/%3E%0A%3Ccircle%20cx%3D%278%27%20cy%3D%27178%27%20r%3D%271.1%27%20fill%3D%27%23fde68a%27%20opacity%3D%270.68%27/%3E%0A%3Ccircle%20cx%3D%27190%27%20cy%3D%27182%27%20r%3D%270.95%27%20fill%3D%27%23fff%27%20opacity%3D%270.5%27/%3E%0A%3Ccircle%20cx%3D%2732%27%20cy%3D%27188%27%20r%3D%270.75%27%20fill%3D%27%23fbcfe8%27%20opacity%3D%270.45%27/%3E%0A%3Ccircle%20cx%3D%2768%27%20cy%3D%2714%27%20r%3D%271%27%20fill%3D%27%23fff%27%20opacity%3D%270.55%27/%3E%0A%3Ccircle%20cx%3D%27118%27%20cy%3D%2728%27%20r%3D%270.85%27%20fill%3D%27%23fef08a%27%20opacity%3D%270.7%27/%3E%0A%3Ccircle%20cx%3D%27168%27%20cy%3D%27130%27%20r%3D%271.05%27%20fill%3D%27%23fff%27%20opacity%3D%270.48%27/%3E%0A%3Ccircle%20cx%3D%2792%27%20cy%3D%2762%27%20r%3D%270.7%27%20fill%3D%27%23e9d5ff%27%20opacity%3D%270.5%27/%3E%0A%3Ccircle%20cx%3D%2752%27%20cy%3D%27118%27%20r%3D%271.15%27%20fill%3D%27%23fff%27%20opacity%3D%270.6%27/%3E%0A%3Ccircle%20cx%3D%27138%27%20cy%3D%27188%27%20r%3D%270.8%27%20fill%3D%27%23fde68a%27%20opacity%3D%270.65%27/%3E%0A%3Ccircle%20cx%3D%2724%27%20cy%3D%2746%27%20r%3D%270.65%27%20fill%3D%27%23fff%27%20opacity%3D%270.42%27/%3E%0A%3Ccircle%20cx%3D%2776%27%20cy%3D%2726%27%20r%3D%271%27%20fill%3D%27%23fbcfe8%27%20opacity%3D%270.5%27/%3E%0A%3Ccircle%20cx%3D%27156%27%20cy%3D%2772%27%20r%3D%270.9%27%20fill%3D%27%23fff%27%20opacity%3D%270.54%27/%3E%0A%3Ccircle%20cx%3D%27108%27%20cy%3D%27166%27%20r%3D%270.78%27%20fill%3D%27%23fef3c7%27%20opacity%3D%270.6%27/%3E%0A%3C/svg%3E"); --cosmic-light-tile: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27180%27%20height%3D%27180%27%20viewBox%3D%270%200%20180%20180%27%3E%0A%3Ccircle%20cx%3D%2722%27%20cy%3D%2718%27%20r%3D%271.1%27%20fill%3D%27%23a855f7%27%20opacity%3D%270.35%27/%3E%0A%3Ccircle%20cx%3D%2756%27%20cy%3D%2742%27%20r%3D%270.85%27%20fill%3D%27%23f472b6%27%20opacity%3D%270.4%27/%3E%0A%3Ccircle%20cx%3D%2788%27%20cy%3D%2712%27%20r%3D%271%27%20fill%3D%27%23eab308%27%20opacity%3D%270.55%27/%3E%0A%3Ccircle%20cx%3D%27118%27%20cy%3D%2758%27%20r%3D%270.75%27%20fill%3D%27%23c084fc%27%20opacity%3D%270.35%27/%3E%0A%3Ccircle%20cx%3D%27148%27%20cy%3D%2728%27%20r%3D%271.05%27%20fill%3D%27%23f472b6%27%20opacity%3D%270.38%27/%3E%0A%3Ccircle%20cx%3D%2732%27%20cy%3D%2772%27%20r%3D%270.9%27%20fill%3D%27%23fde047%27%20opacity%3D%270.5%27/%3E%0A%3Ccircle%20cx%3D%2768%27%20cy%3D%2796%27%20r%3D%271.15%27%20fill%3D%27%23a855f7%27%20opacity%3D%270.32%27/%3E%0A%3Ccircle%20cx%3D%27104%27%20cy%3D%2778%27%20r%3D%270.7%27%20fill%3D%27%23f472b6%27%20opacity%3D%270.42%27/%3E%0A%3Ccircle%20cx%3D%27138%27%20cy%3D%27112%27%20r%3D%271%27%20fill%3D%27%23eab308%27%20opacity%3D%270.48%27/%3E%0A%3Ccircle%20cx%3D%27164%27%20cy%3D%2784%27%20r%3D%270.8%27%20fill%3D%27%23e9d5ff%27%20opacity%3D%270.45%27/%3E%0A%3Ccircle%20cx%3D%2714%27%20cy%3D%27118%27%20r%3D%271%27%20fill%3D%27%23c084fc%27%20opacity%3D%270.38%27/%3E%0A%3Ccircle%20cx%3D%2748%27%20cy%3D%27142%27%20r%3D%270.85%27%20fill%3D%27%23fde047%27%20opacity%3D%270.52%27/%3E%0A%3Ccircle%20cx%3D%2782%27%20cy%3D%27124%27%20r%3D%271.1%27%20fill%3D%27%23f472b6%27%20opacity%3D%270.33%27/%3E%0A%3Ccircle%20cx%3D%27116%27%20cy%3D%27156%27%20r%3D%270.72%27%20fill%3D%27%23a855f7%27%20opacity%3D%270.36%27/%3E%0A%3Ccircle%20cx%3D%27152%27%20cy%3D%27138%27%20r%3D%270.95%27%20fill%3D%27%23eab308%27%20opacity%3D%270.45%27/%3E%0A%3Ccircle%20cx%3D%27172%27%20cy%3D%27168%27%20r%3D%270.78%27%20fill%3D%27%23fbcfe8%27%20opacity%3D%270.4%27/%3E%0A%3Ccircle%20cx%3D%2744%27%20cy%3D%2734%27%20r%3D%270.65%27%20fill%3D%27%23fde047%27%20opacity%3D%270.42%27/%3E%0A%3Ccircle%20cx%3D%2794%27%20cy%3D%27166%27%20r%3D%271.05%27%20fill%3D%27%23c084fc%27%20opacity%3D%270.35%27/%3E%0A%3Ccircle%20cx%3D%27126%27%20cy%3D%2794%27%20r%3D%270.68%27%20fill%3D%27%23a855f7%27%20opacity%3D%270.4%27/%3E%0A%3C/svg%3E"); /* Cosmic page canvas — soft lavender / blush / peach */ --cosmic-canvas: linear-gradient(165deg, #ebe4f8 0%, #faf4ff 38%, #fff5ee 72%, #eef8ff 100%); --cosmic-wash-violet: radial-gradient(ellipse 70% 55% at 4% 24%, rgba(139, 92, 246, 0.18), transparent 62%); --cosmic-wash-pink: radial-gradient(ellipse 60% 50% at 96% 18%, rgba(244, 114, 182, 0.14), transparent 60%); --cosmic-wash-gold: radial-gradient(ellipse 65% 45% at 72% 88%, rgba(250, 204, 21, 0.12), transparent 58%); --cosmic-wash-mint: radial-gradient(ellipse 55% 40% at 18% 78%, rgba(52, 211, 238, 0.08), transparent 55%); --cosmic-nebula-overlay: linear-gradient(125deg, rgba(237, 233, 254, 0.42) 0%, rgba(255, 241, 250, 0.28) 45%, rgba(255, 251, 235, 0.32) 100%); --cosmic-planet-opacity: 0.7; /* 30% softer PNG decor (planets, rocket, moon) */ } /* Site-wide cosmic backdrop — tinted canvas, stars, specks, and planet accents */ body { position: relative; isolation: isolate; background: var(--cosmic-wash-violet), var(--cosmic-wash-pink), var(--cosmic-wash-gold), var(--cosmic-wash-mint), var(--cosmic-canvas); } body::before { content: ''; position: absolute; inset: 0; min-height: 100%; z-index: 0; pointer-events: none; opacity: 0.88; background-image: var(--cosmic-sky-tile), var(--cosmic-light-tile), var(--cosmic-light-tile), var(--cosmic-nebula-overlay), radial-gradient(ellipse 50% 42% at 14% 28%, rgba(167, 139, 250, 0.2), transparent 68%), radial-gradient(ellipse 45% 38% at 86% 62%, rgba(251, 113, 133, 0.14), transparent 65%), radial-gradient(ellipse 40% 32% at 55% 8%, rgba(253, 224, 71, 0.12), transparent 62%), radial-gradient(2px 2px at 8% 8%, rgba(234, 179, 8, 0.95), transparent), radial-gradient(1.5px 1.5px at 18% 22%, rgba(244, 114, 182, 0.75), transparent), radial-gradient(2px 2px at 92% 12%, rgba(234, 179, 8, 0.9), transparent), radial-gradient(1px 1px at 78% 28%, rgba(167, 139, 250, 0.65), transparent), radial-gradient(2px 2px at 5% 38%, rgba(253, 224, 71, 0.85), transparent), radial-gradient(1.5px 1.5px at 88% 42%, rgba(251, 113, 133, 0.65), transparent), radial-gradient(1px 1px at 42% 6%, rgba(224, 231, 255, 0.85), transparent), radial-gradient(2px 2px at 62% 18%, rgba(250, 204, 21, 0.8), transparent); background-size: 200px 200px, 180px 180px, 180px 180px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-position: 0 0, 0 0, 90px 55px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } /* Planets, rocket, moon — separate layer so opacity does not affect stars/specks */ body::after { content: ''; position: absolute; inset: 0; min-height: 100%; z-index: 0; pointer-events: none; opacity: calc(0.78 * var(--cosmic-planet-opacity)); background-image: var(--planet-saturn), var(--planet-rocket), var(--planet-jupiter-alt), var(--planet-saturn-alt), var(--planet-moon); background-repeat: no-repeat; background-size: min(22vw, 140px) auto, min(240px, 46vw) auto, min(130px, 30vw) auto, min(150px, 32vw) auto, min(100px, 24vw) auto; background-position: 96% 22%, -2% 48%, 94% 72%, -4% 86%, 88% 38%; } @media (max-width: 900px) { body::after { background-size: min(100px, 28vw) auto, min(160px, 52vw) auto, min(88px, 32vw) auto, min(100px, 40vw) auto, min(72px, 28vw) auto; } } /* Content above the backdrop layers. */ .ybb-ea { position: relative; z-index: 1; } /* Centred vertically in the window; taller content just scrolls from the top. */ .ybb-ea { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; max-width: 440px; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); text-align: center; } .ybb-ea__logo img { max-width: 140px; height: auto; } .ybb-ea__title { margin: 16px 0; color: var(--ybb-ea-purple-dark); font-family: "Comfortaa", system-ui, sans-serif; font-size: clamp(20px, 6.5vw, 26px); font-weight: 700; } .ybb-ea__intro a { color: var(--ybb-ea-purple); } /* * Subtitle under the page title, styled the same whether it was typed as * plain text or as a heading. Follows the page: centred on phones, * left-aligned beside the phone on wide screens. */ .ybb-ea__intro { margin-bottom: 24px; color: var(--ybb-ea-purple-dark); font-family: "Comfortaa", system-ui, sans-serif; font-size: clamp(17px, 4.6vw, 21px); font-weight: 700; line-height: 1.35; } .ybb-ea__intro p { margin: 0 0 8px; } .ybb-ea__intro > :first-child { margin-top: 0; } .ybb-ea__intro > :last-child { margin-bottom: 0; } /* Headings typed into "Текст над бутоните" look the same as plain text there. */ .ybb-ea__intro h2, .ybb-ea__intro h3, .ybb-ea__intro h4 { margin: 0 0 8px; font: inherit; } /* Hand holding a phone with the app; never taller than ~half a phone screen. */ .ybb-ea__visual { margin: 4px 0 12px; } .ybb-ea__visual img { display: block; width: auto; max-width: min(80vw, 340px); height: auto; max-height: 48vh; max-height: 48svh; margin: 0 auto; } /* The bundled picture's phone sits at ~28% of its width (the arm fills the rest); shift it so the phone, not the picture, is centred on phones. */ .ybb-ea__visual--bundled img { transform: translateX(22%); } /* * Wide screens: text and badges on the left, the phone on the right, * like a landing-page hero. */ @media (min-width: 900px) { .ybb-ea--hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); grid-template-areas: "head visual" "actions visual"; align-content: center; column-gap: 64px; max-width: 1080px; padding-inline: 48px; text-align: left; } .ybb-ea--hero .ybb-ea__head { grid-area: head; align-self: end; } .ybb-ea--hero .ybb-ea__title { margin: 24px 0 16px; font-size: clamp(36px, 4vw, 52px); line-height: 1.15; } .ybb-ea--hero .ybb-ea__intro { max-width: 420px; } .ybb-ea--hero .ybb-ea__visual { grid-area: visual; align-self: center; margin: 0; } .ybb-ea--hero .ybb-ea__visual img { max-width: 100%; max-height: 82vh; } .ybb-ea--hero .ybb-ea__visual--bundled img { transform: none; } .ybb-ea--hero .ybb-ea__actions { grid-area: actions; align-self: start; margin-top: 16px; } .ybb-ea--hero .ybb-ea__stores { justify-content: flex-start; } .ybb-ea--hero .ybb-ea__forget button { padding-left: 0; } } .ybb-ea__stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; } .ybb-ea__store { display: block; border-radius: 9px; } .ybb-ea__store:focus-visible { outline: 3px solid var(--ybb-ea-purple-dark); outline-offset: 2px; } /* Same height for both; Apple's badge must stay at least 40px tall. */ .ybb-ea__store img { display: block; width: auto; height: clamp(40px, 12vw, 52px); } .ybb-ea__form { display: grid; gap: 12px; text-align: left; } .ybb-ea__form input { width: 100%; padding: 14px 16px; border: 2px solid #d8d3e8; border-radius: 12px; font: inherit; } .ybb-ea__form input:focus { border-color: var(--ybb-ea-purple); outline: none; } .ybb-ea__form button { padding: 14px 16px; border: 0; border-radius: 12px; background: var(--ybb-ea-purple); color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .ybb-ea__error { margin: 0; color: #b00020; font-size: 14px; } .ybb-ea__forget { margin-top: 20px; } .ybb-ea__forget button { border: 0; background: none; color: var(--ybb-ea-text); font: inherit; min-height: 44px; padding: 8px 12px; font-size: 14px; text-decoration: underline; cursor: pointer; }