/* ============================================================ Вид «Голограмма» — голо-стикеры и интерфейсы начала 2000-х. Включается в настройках (theme.js), живёт на ; без него этот файл не делает ничего, классика не тронута. Смысл цвета тот же, что в классике: - фольга --holo — «общее»: собрана из цветов пары, стоит там, где раньше градиент --me→--partner; - личные цвета — сплошные, «чьё это»; - серебро --chrome — нейтральное: заголовки и выбранные пилюли фильтра; - янтарь и коралл — «скоро» и «просрочено», как везде. ============================================================ */ :root[data-theme="y2k"] { --bg: #0a0912; --bg-soft: #12101d; --surface: rgba(255, 255, 255, .05); --surface-2: rgba(255, 255, 255, .11); --line: rgba(255, 255, 255, .1); --line-strong: rgba(255, 255, 255, .2); --text: #f3f1ff; --muted: #9a96b3; --on-accent: #16131f; --radius: 20px; --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --edge: inset 0 1px 0 rgba(255, 255, 255, .09); /* фольга: цвета пары, разбавленные светом, между ними — перламутр */ --holo-a: color-mix(in srgb, var(--me) 68%, #fff); --holo-b: color-mix(in srgb, var(--partner) 68%, #fff); --holo: linear-gradient(120deg, var(--holo-a) 0%, #b9a6ff 14%, #9fdfff 28%, var(--holo-b) 42%, #ffe39c 56%, #a4f2d4 70%, #c3aaff 84%, var(--holo-a) 100%); --holo-v: linear-gradient(180deg, var(--holo-a), #fff1ca 50%, var(--holo-b)); --holo-h: linear-gradient(90deg, var(--holo-a), #fff1ca 50%, var(--holo-b)); --edge-holo: linear-gradient(135deg, rgba(255, 255, 255, .42), rgba(207, 192, 255, .2) 26%, rgba(255, 255, 255, .04) 52%, rgba(191, 240, 255, .26) 78%, color-mix(in srgb, var(--partner) 42%, transparent)); --chrome: linear-gradient(180deg, #ffffff 0%, #e2e0ee 38%, #8d89a6 51%, #f1f0f8 63%, #b6b3c9 100%); --chrome-fill: linear-gradient(165deg, #ffffff, #d7d5e6 44%, #aaa7bf 56%, #eceaf5); --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 8 4 11.2 12 12-8 .8-11.2 4-12 12-.8-8-4-11.2-12-12 8-.8 11.2-4 12-12z' fill='%23fff'/%3E%3C/svg%3E"); scrollbar-color: rgba(255, 255, 255, .18) transparent; } [data-theme="y2k"] body { caret-color: var(--me); } /* фон: фиолетовая дымка снизу, огоньки пары сверху, поверх — зерно */ [data-theme="y2k"] body::before { background: radial-gradient(95vw 55vh at 50% 110%, rgba(118, 66, 224, .34), transparent 70%), radial-gradient(60vw 40vh at 8% -6%, color-mix(in srgb, var(--me) 15%, transparent), transparent 70%), radial-gradient(55vw 38vh at 96% 0%, color-mix(in srgb, var(--partner) 15%, transparent), transparent 70%); } [data-theme="y2k"] body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--noise); opacity: .06; } @keyframes holo-drift { from { background-position: 0% 30%; } to { background-position: 100% 70%; } } /* ---------- каркас ---------- */ [data-theme="y2k"] .screen { padding-bottom: calc(116px + var(--safe-b)); } [data-theme="y2k"] body:has(> .fab) .screen { padding-bottom: calc(172px + var(--safe-b)); } /* заголовки — хром капсом; только пять мест с Unbounded, как в классике */ [data-theme="y2k"] .topline h1, [data-theme="y2k"] .sheet h2, [data-theme="y2k"] .login h1, [data-theme="y2k"] .accent-head h1, [data-theme="y2k"] .boot-name { text-transform: uppercase; letter-spacing: .01em; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="y2k"] .topline h1 { font-size: 20px; line-height: 1.15; text-wrap: balance; } [data-theme="y2k"] .sheet h2 { font-size: 17px; } /* служебное — моно капсом: подписи, даты, счётчики */ [data-theme="y2k"] .topline .sub, [data-theme="y2k"] .section-head, [data-theme="y2k"] .field > label:not(:has(input)), [data-theme="y2k"] .note .who-line, [data-theme="y2k"] .habit-streak, [data-theme="y2k"] .room-count, [data-theme="y2k"] .chip, [data-theme="y2k"] .cal-wd, [data-theme="y2k"] .cal-nav span, [data-theme="y2k"] .quick b, [data-theme="y2k"] .shop-widget-head span, [data-theme="y2k"] .countdown { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; } [data-theme="y2k"] .topline .sub { display: inline-block; margin-top: 8px; padding: 4px 10px; font-size: 10px; line-height: 1.3; border: 1px solid var(--line-strong); border-radius: 999px; } [data-theme="y2k"] .topline > .sub { margin-top: 0; align-self: center; } [data-theme="y2k"] .section-head { font-size: 11px; letter-spacing: .14em; margin-top: 26px; } [data-theme="y2k"] .field > label:not(:has(input)) { font-size: 10px; letter-spacing: .12em; margin-bottom: 7px; } [data-theme="y2k"] .note .who-line { font-size: 9.5px; } [data-theme="y2k"] .habit-streak, [data-theme="y2k"] .room-count { font-size: 10px; letter-spacing: .06em; } [data-theme="y2k"] .chip { font-size: 9.5px; padding: 4px 9px; } [data-theme="y2k"] .cal-wd { font-size: 9px; letter-spacing: .1em; } [data-theme="y2k"] .cal-nav span { font-size: 12px; font-weight: 500; } [data-theme="y2k"] .cal-day { font-family: var(--font-mono); font-size: 11px; } /* ---------- нижняя панель: плавающий стеклянный док ---------- */ [data-theme="y2k"] .tabbar { left: max(10px, calc((100vw - 468px) / 2)); right: max(10px, calc((100vw - 468px) / 2)); bottom: calc(8px + var(--safe-b)); padding: 6px; border-radius: 26px; background: rgba(14, 12, 24, .74); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08); } [data-theme="y2k"] .tabbar a { isolation: isolate; border-radius: 20px; transition: color .2s ease; font-size: 10.5px; letter-spacing: -.01em; } /* «ты здесь» — фольга: этот раздел общий, как и всё приложение */ [data-theme="y2k"] .tabbar a.active { color: var(--on-accent); font-weight: 500; } [data-theme="y2k"] .tabbar a.active::before { inset: 0; width: auto; height: auto; z-index: -1; border-radius: 20px; background: var(--holo); background-size: 240% 240%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); animation: holo-drift 14s ease-in-out infinite alternate; } /* ---------- кнопка «+»: голо-стикер с зубчатым краем ---------- */ [data-theme="y2k"] .fab { width: 62px; height: 62px; border-radius: 50%; isolation: isolate; bottom: calc(94px + var(--safe-b)); background: none; box-shadow: none; color: var(--on-accent); filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .55)); } [data-theme="y2k"] .fab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--holo); background-size: 240% 240%; clip-path: var(--zigzag); animation: holo-drift 10s ease-in-out infinite alternate; transition: transform .45s cubic-bezier(.2, .8, .2, 1); } [data-theme="y2k"] .fab:active { transform: scale(.93); box-shadow: none; } [data-theme="y2k"] .fab:active::before { transform: rotate(26deg); } [data-theme="y2k"] .fab svg { stroke-width: 2.4; } /* ---------- главная: голо-стикер «дней вместе» ---------- */ .holo-card { position: relative; overflow: hidden; isolation: isolate; border-radius: 30px; padding: 12px; color: var(--on-accent); background: var(--holo); background-size: 190% 190%; animation: holo-drift 16s ease-in-out infinite alternate; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--partner) 60%, transparent), 0 18px 36px -20px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .75); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); -webkit-user-select: none; user-select: none; } .holo-card.is-tilting { transition: transform .08s linear; } /* зерно плёнки */ .holo-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--noise); opacity: .5; mix-blend-mode: overlay; } /* блик, который едет за пальцем, и тонкая штриховка голограммы */ .holo-sheen { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at var(--mx, 26%) var(--my, 16%), rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 44%), repeating-linear-gradient(118deg, rgba(255, 255, 255, 0) 0 9px, rgba(255, 255, 255, .13) 9px 11px); transition: background-position .3s ease; } .holo-art { display: block; width: min(100%, 280px); margin: 0 auto 6px; overflow: visible; } .holo-ring { transform-box: view-box; transform-origin: 50% 50%; animation: ring-spin 70s linear infinite; } .holo-ring text { font-family: var(--font-display); font-weight: 600; font-size: 11px; fill: rgba(22, 19, 31, .8); } @keyframes ring-spin { to { transform: rotate(360deg); } } .holo-plates { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; } .holo-plates .plate, .holo-caption { display: flex; align-items: center; border-radius: 14px; background: rgba(22, 19, 33, .82); color: #f4f2ff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); } .holo-plates .plate { min-height: 50px; padding: 0 15px; } .plate-num { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .plate-rule i { display: block; width: 100%; height: 1px; background: rgba(255, 255, 255, .45); } .plate-unit, .holo-caption { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; } .holo-plates .plate-link { grid-column: 1 / -1; justify-content: center; min-height: var(--tap); font-size: var(--fs-label); text-decoration: none; color: #f4f2ff; } .holo-caption { justify-content: space-between; gap: 12px; margin-top: 6px; min-height: 36px; padding: 0 15px; font-size: 9.5px; color: rgba(244, 242, 255, .8); } .holo-caption span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ближайшее дело — стеклянная панель под стикером */ .next-panel { margin-top: 10px; } .next-panel .next-title { font-size: var(--fs-body); font-weight: 600; color: var(--text); } [data-theme="y2k"] .next-panel .countdown { color: var(--amber); font-size: 10.5px; margin-top: 4px; } [data-theme="y2k"] .next-panel .countdown.plain { color: var(--muted); } /* похвала под приветствием: живая фраза, не служебная подпись; звезда моего цвета */ [data-theme="y2k"] .praise { margin-top: 10px; color: var(--text); } [data-theme="y2k"] .praise svg.sym { position: relative; width: 16px; height: 16px; margin-top: 1px; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--me) 60%, transparent)); } /* новая похвала — звезда один раз вспыхивает, как свежая звезда привычки */ [data-theme="y2k"] .praise.fresh svg.sym { animation: flare-star .75s .5s cubic-bezier(.2, .8, .2, 1) both; } @media (prefers-reduced-motion: reduce) { [data-theme="y2k"] .praise.fresh svg.sym { animation: none; } } /* ---------- стеклянные панели с переливчатой кромкой ---------- */ [data-theme="y2k"] .quick, [data-theme="y2k"] .room-tile { position: relative; border: none; background: linear-gradient(165deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)); box-shadow: var(--edge); } [data-theme="y2k"] .quick::before, [data-theme="y2k"] .room-tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--edge-holo); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* метка-звёздочка в углу панели — как на листах с голограммами */ [data-theme="y2k"] .quick::after { content: ""; position: absolute; right: 12px; bottom: 12px; width: 9px; height: 9px; background: var(--sparkle) center / contain no-repeat; opacity: .45; pointer-events: none; } [data-theme="y2k"] a.quick:active { background: linear-gradient(165deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)); } [data-theme="y2k"] .quick b, [data-theme="y2k"] .shop-widget-head b { font-size: 11.5px; font-weight: 500; letter-spacing: .1em; } [data-theme="y2k"] .shop-widget-head b svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; } [data-theme="y2k"] .shop-widget-head span { font-size: 9.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); } [data-theme="y2k"] .quick .navcard-body > span:not(.progress):not(.roomdots) { margin-top: 2px; } [data-theme="y2k"] .navcard .iconbtn { width: 42px; height: 42px; border-radius: 50%; color: var(--text); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); } [data-theme="y2k"] .quick .progress { height: 4px; background: rgba(255, 255, 255, .1); } [data-theme="y2k"] .shop-widget-item .box { border-radius: 7px; } [data-theme="y2k"] .room-tile:active { background: rgba(255, 255, 255, .12); } [data-theme="y2k"] .roomgrid.editing .room-tile { outline: 1px dashed var(--line-strong); outline-offset: -1px; } /* ---------- списки ---------- */ /* «общее» — полоска из фольги */ [data-theme="y2k"] .who.both, [data-theme="y2k"] .accent-demo .who.both { background: var(--holo-v); } [data-theme="y2k"] .cal-dot.both { background: var(--holo-h); } [data-theme="y2k"] .iconbtn { border-radius: 50%; } /* ---------- кнопки ---------- */ [data-theme="y2k"] .btn { border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035)); border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); } [data-theme="y2k"] .btn.primary { background: var(--holo); background-size: 240% 240%; background-position: 0% 50%; color: var(--on-accent); font-weight: 600; border: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .12); transition: var(--press), background-position .7s cubic-bezier(.2, .8, .2, 1); } [data-theme="y2k"] .btn.primary:active:not(:disabled) { background-position: 100% 50%; } [data-theme="y2k"] .btn.ghost { background: transparent; box-shadow: none; } [data-theme="y2k"] .btn.danger { border-color: rgba(255, 123, 123, .4); } /* переключатель: подложка из фольги едет по кнопкам, перелив меняется по дороге */ [data-theme="y2k"] .segment { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 15px; } [data-theme="y2k"] .segment-thumb { background: var(--holo); background-size: 100% 100%; } [data-theme="y2k"] .segment button { transition: color .2s ease; } [data-theme="y2k"] .segment button.active { color: var(--on-accent); font-weight: 600; } [data-theme="y2k"] .filter-btn { border-radius: 15px; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); } /* выбранная пилюля фильтра — серебро: нейтрально, не «чьё» и не «общее» */ [data-theme="y2k"] .pillset button, [data-theme="y2k"] .filters button { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); } [data-theme="y2k"] .pillset button.active, [data-theme="y2k"] .filters button.active { background: var(--chrome-fill); color: var(--on-accent); box-shadow: inset 0 1px 0 #fff; } /* ---------- поля ---------- */ [data-theme="y2k"] .field input:not([type="checkbox"]), [data-theme="y2k"] .field textarea, [data-theme="y2k"] .field select, [data-theme="y2k"] .shop-add input { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); border-radius: 14px; } [data-theme="y2k"] .field select option { background: #15131f; } [data-theme="y2k"] .field input::placeholder, [data-theme="y2k"] .field textarea::placeholder, [data-theme="y2k"] .shop-add input::placeholder { color: #77738f; } [data-theme="y2k"] .field input:focus, [data-theme="y2k"] .field textarea:focus, [data-theme="y2k"] .field select:focus, [data-theme="y2k"] .shop-add input:focus { border-color: var(--me); box-shadow: 0 0 0 3px color-mix(in srgb, var(--me) 18%, transparent); } [data-theme="y2k"] .field input[type="checkbox"]:not(:checked), [data-theme="y2k"] .shop-list .shop-item input[type="checkbox"]:not(:checked) { background: rgba(255, 255, 255, .05); } [data-theme="y2k"] .field input[type="checkbox"]::after { border-color: var(--on-accent); } /* ---------- шторка: тёмное стекло с радужной кромкой сверху ---------- */ [data-theme="y2k"] .sheet-bg { background: rgba(5, 4, 10, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } [data-theme="y2k"] .sheet { position: relative; background: rgba(17, 15, 28, .9); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); border-color: rgba(255, 255, 255, .12); border-radius: 28px 28px 0 0; } [data-theme="y2k"] .sheet .grab { width: 44px; height: 5px; background: var(--holo-h); opacity: .9; } /* ---------- лента ---------- */ [data-theme="y2k"] .note { border-radius: 20px; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); } [data-theme="y2k"] .note.mine { border-color: color-mix(in srgb, var(--me) 30%, transparent); } /* ---------- календарь ---------- */ [data-theme="y2k"] .cal-cell { border-radius: 11px; background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .07); } [data-theme="y2k"] .cal-cell.blank { background: transparent; } [data-theme="y2k"] .cal-cell.today { border-color: rgba(255, 255, 255, .75); } [data-theme="y2k"] .cal-cell.sel { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .3); } [data-theme="y2k"] .cal-nav button { border-radius: 50%; } /* ---------- привычки: звезда вспыхивает бликом, когда её только что поставили ---------- */ [data-theme="y2k"] .star-btn.flash svg { animation: flare-star .75s cubic-bezier(.2, .8, .2, 1); } [data-theme="y2k"] .star-btn.flash::after { content: ""; position: absolute; left: -16px; right: -16px; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, #fff 50%, transparent); pointer-events: none; opacity: 0; animation: flare-line .75s ease-out; } [data-theme="y2k"] .star-btn.flash::before { content: ""; position: absolute; top: -16px; bottom: -16px; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, #fff 50%, transparent); pointer-events: none; opacity: 0; animation: flare-line-v .75s ease-out; } @keyframes flare-star { 0% { transform: scale(.5) rotate(-45deg); } 45% { transform: scale(1.3) rotate(0); filter: drop-shadow(0 0 8px var(--me)) drop-shadow(0 0 16px #fff); } 100% { transform: scale(1); } } @keyframes flare-line { 0% { opacity: 0; transform: scaleX(0); } 35% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.25); } } @keyframes flare-line-v { 0% { opacity: 0; transform: scaleY(0); } 35% { opacity: .8; transform: scaleY(.8); } 100% { opacity: 0; transform: scaleY(1); } } /* ---------- пустой экран: звезда из фольги ---------- */ [data-theme="y2k"] .empty::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23bff0ff'/%3E%3Cstop offset='.5' stop-color='%23d4c2ff'/%3E%3Cstop offset='1' stop-color='%23ffc6e8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M10.4 4Q12.3 11.7 20 13.6 12.3 15.5 10.4 23.2 8.5 15.5 .8 13.6 8.5 11.7 10.4 4ZM19.8.6Q20.6 3.4 23.4 4.2 20.6 5 19.8 7.8 19 5 16.2 4.2 19 3.4 19.8.6Z'/%3E%3C/svg%3E") center / contain no-repeat; } [data-theme="y2k"] .chat .empty::before, [data-theme="y2k"] .empty[style]::before { width: 28px; height: 28px; margin-bottom: 10px; } /* ---------- подсказка внизу ---------- */ [data-theme="y2k"] .toast { bottom: calc(104px + var(--safe-b)); border-radius: 16px; background: rgba(22, 20, 36, .9); border-color: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } /* ---------- медиатека, карта ---------- */ [data-theme="y2k"] .roulette { border-radius: 20px; background: rgba(255, 255, 255, .03); } [data-theme="y2k"] .roulette::before { background: linear-gradient(90deg, var(--bg), transparent); } [data-theme="y2k"] .roulette::after { background: linear-gradient(-90deg, var(--bg), transparent); } [data-theme="y2k"] .roulette-mark { background: var(--holo-v); } [data-theme="y2k"] .leaflet-control-attribution { background: rgba(10, 9, 18, .7); } [data-theme="y2k"] #map { border-color: rgba(255, 255, 255, .14); } /* ---------- вход: хромовое имя над каркасной сферой ---------- */ [data-theme="y2k"] .login { position: relative; overflow: hidden; } [data-theme="y2k"] .login::before { content: ""; position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; margin: -360px 0 0 -230px; pointer-events: none; opacity: .5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200' fill='none' stroke='%23fff' stroke-width='.45' stroke-opacity='.6'%3E%3Ccircle r='98'/%3E%3Cellipse rx='24' ry='98'/%3E%3Cellipse rx='52' ry='98'/%3E%3Cellipse rx='78' ry='98'/%3E%3Cellipse rx='98' ry='18'/%3E%3Cellipse cy='-42' rx='88.5' ry='15'/%3E%3Cellipse cy='42' rx='88.5' ry='15'/%3E%3Cellipse cy='-74' rx='64' ry='10'/%3E%3Cellipse cy='74' rx='64' ry='10'/%3E%3C/svg%3E") center / contain no-repeat; } [data-theme="y2k"] .login-card { position: relative; } [data-theme="y2k"] .login h1 { font-size: 32px; } [data-theme="y2k"] .login p { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; } /* ---------- экран «Твой цвет» ---------- */ [data-theme="y2k"] .accent-head h1 { font-size: 20px; } @media (prefers-reduced-motion: reduce) { [data-theme="y2k"] .tabbar a.active::before, [data-theme="y2k"] .fab::before, .holo-card, .holo-ring, [data-theme="y2k"] .star-btn.flash svg, [data-theme="y2k"] .star-btn.flash::before, [data-theme="y2k"] .star-btn.flash::after { animation: none; } } /* ============================================================ Символы и экраны ============================================================ */ /* Y2K-символы: 24 px в кнопках и панели, 22 — в строках списка, 14 — рядом с текстом */ [data-theme="y2k"] svg.sym { width: 24px; height: 24px; } [data-theme="y2k"] .row .iconbtn svg.sym, [data-theme="y2k"] .note .iconbtn svg.sym { width: 22px; height: 22px; } [data-theme="y2k"] .meta-ico svg.sym, [data-theme="y2k"] .shop-widget-head svg.sym, [data-theme="y2k"] .filter-btn:not(.icon-only):not(.dice-btn) svg.sym, [data-theme="y2k"] .photo-wrap button svg.sym, [data-theme="y2k"] .tag svg.sym { width: 14px; height: 14px; } [data-theme="y2k"] .iconbtn-sm svg.sym { width: 16px; height: 16px; } [data-theme="y2k"] .fab svg.sym { width: 28px; height: 28px; } /* включённое своё (лайк, звезда, оценка) — горит своим цветом */ [data-theme="y2k"] .iconbtn.on.me svg.sym { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--me) 70%, transparent)); } /* подпись-пилюля рядом с заголовком — в одну строку */ [data-theme="y2k"] .topline .sub { white-space: nowrap; } /* заголовок раздела без кнопок — с тонкой линией до края, как на листах 2000-х */ [data-theme="y2k"] .section-head:not(:has(*))::after { content: ""; flex: 1; height: 1px; margin-left: 14px; background: linear-gradient(90deg, rgba(255, 255, 255, .22), transparent); } /* зубчатый стикер — общий край для «+» и кнопки добавления покупки */ :root[data-theme="y2k"] { --zigzag: polygon(50% 0%, 59.6% 8.1%, 71.7% 5%, 76.8% 16.4%, 89.1% 18.8%, 88.7% 31.3%, 98.7% 38.9%, 93% 50%, 98.7% 61.1%, 88.7% 68.7%, 89.1% 81.2%, 76.8% 83.6%, 71.7% 95%, 59.6% 91.9%, 50% 100%, 40.4% 91.9%, 28.3% 95%, 23.2% 83.6%, 10.9% 81.2%, 11.3% 68.7%, 1.3% 61.1%, 7% 50%, 1.3% 38.9%, 11.3% 31.3%, 10.9% 18.8%, 23.2% 16.4%, 28.3% 5%, 40.4% 8.1%); } /* шкала делений: «запущенность» дела, прогресс привычек, срочность комнаты */ [data-theme="y2k"] .chore-bar, [data-theme="y2k"] .quick .progress { height: 7px; border-radius: 0; background: rgba(255, 255, 255, .1); -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 5px); mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 5px); } [data-theme="y2k"] .chore-bar { margin-top: 9px; } [data-theme="y2k"] .quick .progress i { border-radius: 0; } [data-theme="y2k"] .room-tile::after { left: 10px; right: 10px; bottom: 8px; height: 5px; -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 5px); mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 5px); } [data-theme="y2k"] .room-tile { padding-bottom: 20px; } [data-theme="y2k"] .room-tile svg.sym { color: var(--text); } /* привычки: цепочка дней — пиксели */ [data-theme="y2k"] .habit-chain { gap: 3px; } [data-theme="y2k"] .chain-day { width: 9px; height: 9px; border-radius: 1px; } /* ---------- хотелки: метки ---------- */ .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 7px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text); border: 1px solid var(--line-strong); white-space: nowrap; } .tag-holo { background: var(--holo); background-size: 200% 200%; color: var(--on-accent); border-color: transparent; } .tag-silver { background: var(--chrome-fill); color: var(--on-accent); border-color: transparent; } .tag-me { background: var(--me); color: var(--on-accent); border-color: transparent; } /* ---------- места: карта в переливчатой рамке, метки-звёзды ---------- */ [data-theme="y2k"] #map { border: 1px solid transparent; border-radius: 22px; background: linear-gradient(var(--bg-soft), var(--bg-soft)) padding-box, var(--edge-holo) border-box; } .map-star { background: none; border: none; color: var(--acc, #f3f1ff); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9)) drop-shadow(0 0 7px color-mix(in srgb, var(--acc, #fff) 70%, transparent)); } .map-star.visited { color: #c9c6da; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9)); opacity: .75; } .map-star svg { display: block; } [data-theme="y2k"] .leaflet-popup-content-wrapper, [data-theme="y2k"] .leaflet-popup-tip { background: #17151f; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); } [data-theme="y2k"] .leaflet-popup-content-wrapper { border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); } /* ---------- календарь: «сегодня» в хромовой рамке ---------- */ [data-theme="y2k"] .cal-cell.today { border-color: transparent; background: linear-gradient(#15131f, #15131f) padding-box, var(--chrome) border-box; } [data-theme="y2k"] .cal-cell.today.sel { background: linear-gradient(#2b2939, #2b2939) padding-box, var(--chrome) border-box; } [data-theme="y2k"] .cal-dot { height: 5px; border-radius: 1px; } /* ---------- медиатека ---------- */ [data-theme="y2k"] .thumb.poster { padding: 1px; border: none; border-radius: 9px; background: var(--holo); } [data-theme="y2k"] .chip.rating { background: var(--chrome-fill); color: var(--on-accent); border-color: transparent; font-weight: 500; } [data-theme="y2k"] .roulette.done .roulette-card.is-winner { box-shadow: 0 0 0 2px #fff, 0 0 26px color-mix(in srgb, var(--me) 65%, transparent); animation: win-flash .9s cubic-bezier(.2, .8, .2, 1); } @keyframes win-flash { 0% { filter: brightness(2.2) saturate(0); } 100% { filter: none; } } /* ---------- лента: записки — окошки со строкой заголовка ---------- */ [data-theme="y2k"] .note { position: relative; padding: 0; overflow: hidden; } [data-theme="y2k"] .note .who-line { display: flex; align-items: center; gap: 4px; min-height: 46px; margin: 0; padding: 0 100px 0 14px; background: rgba(255, 255, 255, .045); border-bottom: 1px solid rgba(255, 255, 255, .08); } [data-theme="y2k"] .note:not(.mine) .who-line { padding-right: 54px; } [data-theme="y2k"] .note .txt { padding: 11px 14px 13px; } [data-theme="y2k"] .note > div:last-child { position: absolute; top: -2px; right: 0; } [data-theme="y2k"] .note.thanks { border-color: transparent; background: linear-gradient(#16141f, #16141f) padding-box, var(--holo) border-box; } /* ---------- покупки: добавить — тот же зубчатый стикер, что «+» ---------- */ [data-theme="y2k"] .shop-add .btn.primary { width: 50px; height: 50px; min-height: 50px; padding: 0; align-self: center; isolation: isolate; position: relative; background: none; box-shadow: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); } [data-theme="y2k"] .shop-add .btn.primary::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--zigzag); background: var(--holo); background-size: 240% 240%; transition: transform .45s cubic-bezier(.2, .8, .2, 1); } [data-theme="y2k"] .shop-add .btn.primary:active:not(:disabled)::before { transform: rotate(26deg); } [data-theme="y2k"] .shop-item.done .title, [data-theme="y2k"] .row.done .title { text-decoration-color: #c9c6da; text-decoration-thickness: 1.5px; } /* ---------- настройки: разделы — стеклянные панели ---------- */ [data-theme="y2k"] .set-block { padding: 14px; border-radius: 20px; background: linear-gradient(165deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1); } @media (prefers-reduced-motion: reduce) { [data-theme="y2k"] .roulette.done .roulette-card.is-winner { animation: none; } } [data-theme="y2k"] .set-block .btn { padding: 0 10px; } /* ============================================================ Движение: свет на фольге. Отклик — до 0,45 с, переходы — до 0,5 с, заставка — 0,8 с. Классы fx-* вешает fx() из ui.js, и только когда движение разрешено; без него остаётся смена цвета и прозрачности. ============================================================ */ /* ---------- заставка: две звезды пары сливаются в звезду из фольги ---------- */ [data-theme="y2k"] .boot-pair { width: 96px; height: 96px; } [data-theme="y2k"] .boot-pair i, [data-theme="y2k"] .boot-pair i:first-child, [data-theme="y2k"] .boot-pair i:last-child { top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 0; -webkit-mask: var(--sparkle) center / contain no-repeat; mask: var(--sparkle) center / contain no-repeat; animation: y2k-meet .6s cubic-bezier(.16, 1, .3, 1) both; } [data-theme="y2k"] .boot-pair i:first-child { --from: -74px; } [data-theme="y2k"] .boot-pair i:last-child { --from: 74px; } [data-theme="y2k"] .boot-pair::after { content: ""; position: absolute; inset: 0; background: var(--holo); background-size: 200% 200%; -webkit-mask: var(--sparkle) center / contain no-repeat; mask: var(--sparkle) center / contain no-repeat; animation: y2k-star .5s .4s cubic-bezier(.16, 1, .3, 1) both; } [data-theme="y2k"] .boot-pair::before { content: ""; position: absolute; left: -70px; right: -70px; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, #fff 50%, transparent); opacity: 0; animation: flare-line .65s .42s ease-out both; } @keyframes y2k-meet { 0% { opacity: 0; transform: translateX(var(--from)) rotate(-120deg) scale(.4); } 65% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.7); } } @keyframes y2k-star { from { opacity: 0; transform: scale(.3) rotate(-45deg); } } /* ---------- блик по хрому: заголовок экрана при переходе и имя на заставке ---------- */ [data-theme="y2k"] .topline h1.shine, [data-theme="y2k"] .boot-name { background-image: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%), var(--chrome); background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 130% 0, 0 0; } [data-theme="y2k"] .topline h1.shine { animation: chrome-shine .9s .08s cubic-bezier(.3, .6, .3, 1) both; } [data-theme="y2k"] .boot-name { animation: boot-name .5s .35s ease-out both, chrome-shine 1s .6s cubic-bezier(.3, .6, .3, 1) both; } @keyframes chrome-shine { from { background-position: 130% 0, 0 0; } to { background-position: -30% 0, 0 0; } } /* ---------- нижняя панель: одна подложка из фольги едет к вкладке ---------- */ [data-theme="y2k"] .tabbar a.active::before { display: none; } [data-theme="y2k"] .tabbar a { z-index: 1; } [data-theme="y2k"] .tabbar a.active { transition: color .2s .12s ease; } [data-theme="y2k"] .tab-pill { display: block; position: absolute; left: 0; top: 6px; z-index: 0; border-radius: 20px; pointer-events: none; background: var(--holo); background-size: 240% 240%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); animation: holo-drift 14s ease-in-out infinite alternate; } [data-theme="y2k"] .tab-pill.ready { transition: transform .42s cubic-bezier(.16, 1, .3, 1); } /* ---------- дело сделано: вспышка на галочке, шкала гаснет, название прочёркивается ---------- */ [data-theme="y2k"] .row.fx-done [data-act="done"] { color: var(--me); } [data-theme="y2k"] .row.fx-done [data-act="done"] svg { animation: flare-star .46s cubic-bezier(.2, .8, .2, 1); } [data-theme="y2k"] .row.fx-done [data-act="done"]::after { content: ""; position: absolute; left: -12px; right: -12px; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, #fff 50%, transparent); pointer-events: none; opacity: 0; animation: flare-line .46s ease-out; } [data-theme="y2k"] .row.fx-done [data-act="done"]::before { content: ""; position: absolute; top: -12px; bottom: -12px; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, #fff 50%, transparent); pointer-events: none; opacity: 0; animation: flare-line-v .46s ease-out; } [data-theme="y2k"] .row.fx-done .chore-bar i { transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.4, 0, .2, 1); } [data-theme="y2k"] .row.fx-done .title, [data-theme="y2k"] .row.fx-bought .title, [data-theme="y2k"] .shop-widget-item.fx-bought span:last-child { display: inline; background: linear-gradient(#d6d3e6, #d6d3e6) no-repeat 0 58% / 0 1.5px; animation: strike .3s .04s ease-out forwards; } @keyframes strike { to { background-size: 100% 1.5px; } } /* ---------- куплено: прочеркнули — строка уходит ---------- */ [data-theme="y2k"] .shop-widget-item.checking { opacity: 1; text-decoration: none; } [data-theme="y2k"] .row.fx-bought, [data-theme="y2k"] .shop-widget-item.fx-bought { animation: row-away .42s cubic-bezier(.4, 0, 1, 1) forwards; } [data-theme="y2k"] .shop-widget-item.fx-bought .box { background: var(--me); border-color: var(--me); } @keyframes row-away { 0%, 55% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(16px); } } /* ---------- лайк: сердце подпрыгивает, две искры разлетаются ---------- */ [data-theme="y2k"] .iconbtn.fx-like svg { animation: like-pop .45s cubic-bezier(.2, .8, .2, 1); } [data-theme="y2k"] .iconbtn.fx-like::before, [data-theme="y2k"] .iconbtn.fx-like::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: var(--me); pointer-events: none; opacity: 0; -webkit-mask: var(--sparkle) center / contain no-repeat; mask: var(--sparkle) center / contain no-repeat; animation: spark-l .55s ease-out; } [data-theme="y2k"] .iconbtn.fx-like::after { width: 8px; height: 8px; margin: -4px 0 0 -4px; animation-name: spark-r; } @keyframes like-pop { 0% { transform: scale(.6); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } } @keyframes spark-l { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: translate(-17px, -19px) rotate(90deg) scale(1); } } @keyframes spark-r { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: translate(18px, -15px) rotate(-90deg) scale(1); } } /* ---------- новая записка «открывается окошком»: сначала строка заголовка, потом текст ---------- */ [data-theme="y2k"] .note.fx-open { animation: note-open .45s cubic-bezier(.16, 1, .3, 1) both; } [data-theme="y2k"] .note.fx-open .txt { animation: fade-in .3s .22s ease-out both; } @keyframes note-open { from { clip-path: inset(0 0 100% 0 round 20px); } to { clip-path: inset(0 0 0 0 round 20px); } } @keyframes fade-in { from { opacity: 0; } } /* ---------- кнопки из фольги: по нажатию пробегает блик ---------- */ [data-theme="y2k"] .btn.primary { position: relative; overflow: hidden; } [data-theme="y2k"] .btn.primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%); background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%); } [data-theme="y2k"] .btn.primary.fx-sheen::after { animation: sheen .6s cubic-bezier(.3, .6, .3, 1); } [data-theme="y2k"] .shop-add .btn.primary { overflow: visible; } [data-theme="y2k"] .shop-add .btn.primary::after { display: none; } @keyframes sheen { to { transform: translateX(120%); } } /* ---------- «Вернуть»: тает полоска — сколько осталось до отправки ---------- */ [data-theme="y2k"] .toast { overflow: hidden; } [data-theme="y2k"] .toast-time { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--holo-h); transform-origin: left; animation: toast-time linear forwards; } @keyframes toast-time { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* ---------- календарь: новый месяц въезжает с той стороны, куда листали ---------- */ [data-theme="y2k"] .cal-grid.fx-next { animation: cal-next .34s cubic-bezier(.16, 1, .3, 1) both; } [data-theme="y2k"] .cal-grid.fx-prev { animation: cal-prev .34s cubic-bezier(.16, 1, .3, 1) both; } @keyframes cal-next { from { opacity: 0; transform: translateX(28px); } } @keyframes cal-prev { from { opacity: 0; transform: translateX(-28px); } } /* ---------- шторка: радужная линия разворачивается от центра, фон плавно размывается ---------- */ [data-theme="y2k"] .sheet::before { content: ""; position: absolute; top: 0; left: 6%; right: 6%; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--holo-a) 22%, #fff1ca 50%, var(--holo-b) 78%, transparent); animation: line-draw .55s .08s cubic-bezier(.16, 1, .3, 1) both; } [data-theme="y2k"] .sheet-bg { animation: veil .3s ease-out both; } @keyframes line-draw { from { transform: scaleX(0); } } @keyframes veil { from { background-color: rgba(5, 4, 10, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } } /* ---------- загрузка: мерцает звёздочка из фольги ---------- */ [data-theme="y2k"] .loader-pair { display: none; } [data-theme="y2k"] .loader-star { display: block; width: 26px; height: 26px; background: var(--holo); background-size: 200% 200%; -webkit-mask: var(--sparkle) center / contain no-repeat; mask: var(--sparkle) center / contain no-repeat; animation: twinkle 1.1s ease-in-out infinite; } @keyframes twinkle { 0%, 100% { opacity: .5; transform: scale(.7); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } } @media (prefers-reduced-motion: reduce) { [data-theme="y2k"] .boot-pair i, [data-theme="y2k"] .boot-pair::before, [data-theme="y2k"] .boot-pair::after, [data-theme="y2k"] .boot-name, [data-theme="y2k"] .sheet::before, [data-theme="y2k"] .sheet-bg, [data-theme="y2k"] .loader-star { animation: none; } [data-theme="y2k"] .boot-pair i { opacity: 0; } [data-theme="y2k"] .tab-pill.ready { transition: none; } } /* ---------- наклейки: счётчики, серия, непрочитанное ---------- Не рамка, а наклейка с листа: белая кромка вырубки, наклеена чуть криво, лежит поверх панели и отбрасывает тень. Цвет по смыслу: фольга — общее, коралл — просрочено, личный — серия, цвет второго — непрочитанное от него. Блик проходит при появлении и от касания (.glint, theme.js). Кромку звезды и печати рисует маска с толстой обводкой — так она ровная и во впадинах. */ :root[data-theme="y2k"] { --star-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 3Q29 19 45 24Q29 29 24 45Q19 29 3 24Q19 19 24 3Z'/%3E%3C/svg%3E"); --star-cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 3Q29 19 45 24Q29 29 24 45Q19 29 3 24Q19 19 24 3Z' stroke='%23000' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"); --cut: #f6f4ff; --glint: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%) 100% 0 / 300% 100% no-repeat; } /* ярлык: счётчик рядом с заголовком экрана и в виджете покупок */ :root[data-theme="y2k"] .sticker { --tilt: -2.5deg; position: relative; overflow: hidden; isolation: isolate; display: inline-block; padding: 5px 11px 4px; border: none; border-radius: 999px; font-size: 9.5px; font-weight: 500; line-height: 1.3; letter-spacing: .1em; color: var(--on-accent); background: var(--holo); background-size: 240% 240%; box-shadow: 0 0 0 2px var(--cut), 0 7px 10px -4px rgba(0, 0, 0, .8); rotate: var(--tilt); animation: holo-drift 12s ease-in-out infinite alternate; } /* штриховка голограммы */ :root[data-theme="y2k"] .sticker::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(118deg, transparent 0 5px, rgba(255, 255, 255, .22) 5px 6px); } /* блик */ :root[data-theme="y2k"] .sticker::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 50%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .92) 50%, transparent); transform: translateX(-160%) skewX(-20deg); animation: sticker-glint .95s cubic-bezier(.3, .6, .2, 1) .3s both; } :root[data-theme="y2k"] .sticker.alarm { background: var(--danger); } :root[data-theme="y2k"] .shop-widget-head .sticker { --tilt: 3deg; margin-right: 4px; } :root[data-theme="y2k"] .topline > .sticker { margin-right: 4px; } :root[data-theme="y2k"] .topline div > .sticker { margin: 10px 0 2px 2px; } /* звезда: серия привычки, цвет того, чья она */ :root[data-theme="y2k"] .streak-n.long { font-size: 8.5px; letter-spacing: -.04em; } :root[data-theme="y2k"] .habit-streak.lit { display: inline-flex; align-items: center; gap: 7px; } :root[data-theme="y2k"] .streak-n { position: relative; isolation: isolate; flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; margin: -9px -2px; font-size: 10px; font-weight: 500; letter-spacing: 0; color: var(--on-accent); rotate: -9deg; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .6)); } :root[data-theme="y2k"] .streak-n::before, :root[data-theme="y2k"] .streak-n::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } /* кромка вырубки */ :root[data-theme="y2k"] .streak-n::before { background: var(--cut); -webkit-mask: var(--star-cut) center / 100% 100% no-repeat; mask: var(--star-cut) center / 100% 100% no-repeat; } /* сама наклейка: цвет + мягкий свет сверху слева + блик */ :root[data-theme="y2k"] .streak-n::after { background: var(--glint), radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .5), transparent 55%), var(--acc); -webkit-mask: var(--star-m) center / 100% 100% no-repeat; mask: var(--star-m) center / 100% 100% no-repeat; animation: glint-bg .95s cubic-bezier(.3, .6, .2, 1) .3s both; } /* гелевая капля: непрочитанное на вкладке и на кнопке обсуждения — от второго, его цветом. Цветное стекло, светится изнутри; от значка отделена зазором цвета панели */ :root[data-theme="y2k"] .tabbar .badge, :root[data-theme="y2k"] .iconbtn .badge { isolation: isolate; overflow: hidden; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; color: var(--on-accent); font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: 0; background: radial-gradient(110% 80% at 50% 115%, color-mix(in srgb, var(--partner) 55%, #fff) 0%, transparent 70%), var(--partner); box-shadow: 0 0 0 2px #0e0c18, inset 0 -1.5px 2px color-mix(in srgb, var(--partner) 55%, #000), 0 4px 10px -2px color-mix(in srgb, var(--partner) 60%, transparent); transform-origin: 25% 75%; animation: gel-in .36s cubic-bezier(.2, .8, .2, 1) both; } :root[data-theme="y2k"] .tabbar .badge { top: 2px; right: auto; left: calc(50% + 7px); } :root[data-theme="y2k"] .iconbtn .badge { top: 4px; right: 4px; } /* блик геля на верхнюю половину */ :root[data-theme="y2k"] .tabbar .badge::before, :root[data-theme="y2k"] .iconbtn .badge::before { content: ""; position: absolute; left: 2px; right: 2px; top: 1px; height: 45%; z-index: -1; border-radius: 999px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .1)); } /* пробегающий блик — при появлении и от касания */ :root[data-theme="y2k"] .tabbar .badge::after, :root[data-theme="y2k"] .iconbtn .badge::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%); transform: translateX(-130%); animation: gel-glint .6s .22s ease-out both; } @keyframes gel-in { from { opacity: 0; scale: .6; } } @keyframes gel-glint { from { transform: translateX(-130%); } to { transform: translateX(130%); } } @keyframes gel-press { 40% { scale: 1.15; } } /* касание: наклейку чуть приподняли — она выпрямилась и поймала свет */ :root[data-theme="y2k"] .sticker.glint { animation: holo-drift 12s ease-in-out infinite alternate, sticker-lift .5s cubic-bezier(.2, .8, .2, 1); } :root[data-theme="y2k"] .streak-n.glint { animation: sticker-lift .5s cubic-bezier(.2, .8, .2, 1); } :root[data-theme="y2k"] .sticker.glint::after { animation: sticker-glint-tap .7s cubic-bezier(.3, .6, .2, 1) both; } :root[data-theme="y2k"] .streak-n.glint::after { animation: glint-bg-tap .7s cubic-bezier(.3, .6, .2, 1) both; } /* капля от касания чуть проминается и ловит свет */ :root[data-theme="y2k"] .badge.glint { animation: gel-press .4s cubic-bezier(.2, .8, .2, 1); } :root[data-theme="y2k"] .badge.glint::after { animation: gel-glint .55s ease-out both; } @keyframes sticker-glint { from { transform: translateX(-160%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } } @keyframes sticker-glint-tap { from { transform: translateX(-160%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } } @keyframes glint-bg { from { background-position: 100% 0, 0 0, 0 0; } to { background-position: 0% 0, 0 0, 0 0; } } @keyframes glint-bg-tap { from { background-position: 100% 0, 0 0, 0 0; } to { background-position: 0% 0, 0 0, 0 0; } } @keyframes sticker-lift { 35% { rotate: 0deg; scale: 1.1; } } @media (prefers-reduced-motion: reduce) { :root[data-theme="y2k"] .sticker, :root[data-theme="y2k"] .sticker.glint, :root[data-theme="y2k"] .streak-n.glint, :root[data-theme="y2k"] .badge.glint, :root[data-theme="y2k"] .tabbar .badge, :root[data-theme="y2k"] .iconbtn .badge { animation: none; } :root[data-theme="y2k"] .sticker::after, :root[data-theme="y2k"] .streak-n::after, :root[data-theme="y2k"] .badge::after { animation: none !important; } }