/* ============================================================ * [feature/content-cube-slider] Scroll-driven 3D cube для раздела * «Контент». Адаптация CodePen «Six Faces / Walking The Cow V2» * (luis-lessrain / ByLmGYq, MIT) под #sectionContent. * Тема — через .dark-theme на (MiniAppTheme). * ============================================================ */ #sectionContent.content-cube-section { --cc-dark-bg: #1c1814; --cc-dark-fg: #ede8df; --cc-dark-muted: #8a7b6e; --cc-light-bg: #f0ece3; --cc-light-fg: #0d0d14; --cc-light-muted: #9a9aaa; --cc-accent-dark: #d4a84b; --cc-accent-light: #3a6e00; --cc-bg: var(--cc-light-bg); --cc-fg: var(--cc-light-fg); --cc-muted: var(--cc-light-muted); --cc-accent: var(--cc-accent-light); --cc-card-bg: rgba(240, 236, 227, 0.88); --cc-card-border: rgba(58, 110, 0, 0.18); /* Oswald ≈ Bebas Neue (condensed caps), JetBrains Mono ≈ DM Mono; оба с кириллицей — иначе ru падает на системный sans. */ --cc-font-display: "Oswald", "Bebas Neue", sans-serif; --cc-font-mono: "JetBrains Mono", "DM Mono", ui-monospace, monospace; --cc-hairline: 0.0625rem; --cc-ui-inset: 1.25rem; --cc-nav-x: calc(var(--cc-ui-inset) + 0.125rem); --cc-reveal-offset: 0.625rem; --cc-reveal-duration: 0.5s; --cc-z-ui: 10; max-width: none; width: 100%; margin: 0; padding: 0; position: relative; overflow: hidden; background: var(--cc-bg); color: var(--cc-fg); font-family: var(--cc-font-mono); /* Высота видимой области над bottom-nav (+ safe-area). */ height: calc(100dvh - 132px - env(safe-area-inset-bottom, 0px)); min-height: 420px; transition: background 0.3s ease, color 0.3s ease; } html.dark-theme #sectionContent.content-cube-section { --cc-bg: var(--cc-dark-bg); --cc-fg: var(--cc-dark-fg); --cc-muted: var(--cc-dark-muted); --cc-accent: var(--cc-accent-dark); --cc-card-bg: rgba(28, 24, 20, 0.82); --cc-card-border: rgba(212, 168, 75, 0.2); } body.content-cube-active { overflow: hidden; } body.content-cube-active #app { padding-left: 0; padding-right: 0; padding-top: 0; } #contentCube { position: absolute; inset: 0; overflow: hidden; } #contentCube .cc-scene { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; perspective: 1100px; pointer-events: none; } #contentCube .cc-scroll { position: absolute; inset: 0; z-index: 1; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; } #contentCube .cc-scroll::-webkit-scrollbar { display: none; } #contentCube .cc-slide { min-height: 100%; display: flex; align-items: center; padding: 4.5rem calc(2.5rem + var(--cc-ui-inset)) 5rem 2.5rem; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; } #contentCube .cc-cube { --s: min(62vw, 52vh, 420px); width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; transform: rotateX(90deg) rotateY(0deg); will-change: transform; } #contentCube .cc-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 48px ), repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 48px ), #ddd8cf; } html.dark-theme #contentCube .cc-face { background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 48px ), repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 48px ), #14100d; } #contentCube .cc-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } #contentCube .cc-face-ph { position: absolute; bottom: 1.25rem; left: 1.5rem; font-family: var(--cc-font-display); font-weight: 600; font-size: clamp(1.6rem, 6vw, 3.5rem); letter-spacing: 0.04em; color: rgba(0, 0, 0, 0.07); pointer-events: none; user-select: none; } html.dark-theme #contentCube .cc-face-ph { color: rgba(255, 255, 255, 0.06); } #contentCube .cc-face:has(img) .cc-face-ph { display: none; } #contentCube .cc-face[data-face="front"] { transform: translateZ(calc(var(--s) / 2)); } #contentCube .cc-face[data-face="back"] { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); } #contentCube .cc-face[data-face="right"] { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); } #contentCube .cc-face[data-face="left"] { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); } #contentCube .cc-face[data-face="top"] { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); } #contentCube .cc-face[data-face="bottom"] { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); } #contentCube .cc-hud { position: absolute; top: var(--cc-ui-inset); right: var(--cc-ui-inset); z-index: var(--cc-z-ui); text-align: right; font-size: 0.65rem; letter-spacing: 0.15em; color: var(--cc-muted); text-transform: uppercase; pointer-events: none; } /* Верхний левый селект разделов */ #contentCube .cc-nav { position: absolute; top: var(--cc-ui-inset); left: var(--cc-ui-inset); z-index: calc(var(--cc-z-ui) + 2); max-width: min(18rem, calc(100% - 8rem)); } #contentCube .cc-nav-btn { display: inline-flex; align-items: center; gap: 0.55rem; width: auto; max-width: 100%; margin: 0; padding: 0.55rem 0.75rem; border-radius: 0; border: var(--cc-hairline) solid color-mix(in srgb, var(--cc-accent) 45%, transparent); background: var(--cc-card-bg); color: var(--cc-fg); font-family: var(--cc-font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; box-shadow: none; backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); transition: border-color 0.2s, background 0.2s, color 0.2s; } #contentCube .cc-nav-btn:hover { border-color: var(--cc-accent); color: var(--cc-accent); } #contentCube .cc-nav.is-open .cc-nav-btn { border-color: var(--cc-accent); color: var(--cc-accent); } #contentCube .cc-nav-num { color: var(--cc-accent); letter-spacing: 0.2em; flex-shrink: 0; } #contentCube .cc-nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } #contentCube .cc-nav-chevron { font-size: 0.55rem; color: var(--cc-muted); flex-shrink: 0; transition: transform 0.25s ease, color 0.2s; } #contentCube .cc-nav.is-open .cc-nav-chevron { transform: rotate(180deg); color: var(--cc-accent); } #contentCube .cc-nav-menu { position: absolute; top: calc(100% + 0.4rem); left: 0; min-width: 100%; width: max(100%, 16rem); max-width: min(20rem, calc(100vw - 2rem)); max-height: min(55vh, 22rem); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--cc-card-bg); border: var(--cc-hairline) solid var(--cc-card-border); backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); scrollbar-width: thin; scrollbar-color: var(--cc-accent) transparent; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); } #contentCube .cc-nav-menu[hidden] { display: none; } #contentCube .cc-nav-item { display: flex; align-items: center; gap: 0.65rem; width: 100%; margin: 0; padding: 0.65rem 0.8rem; border: none; border-bottom: var(--cc-hairline) solid color-mix(in srgb, var(--cc-muted) 22%, transparent); border-radius: 0; background: transparent; color: var(--cc-fg); font-family: var(--cc-font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: left; cursor: pointer; box-shadow: none; transition: background 0.15s, color 0.15s; } #contentCube .cc-nav-item:last-child { border-bottom: none; } #contentCube .cc-nav-item:hover { background: color-mix(in srgb, var(--cc-accent) 12%, transparent); color: var(--cc-accent); } #contentCube .cc-nav-item.is-active { background: color-mix(in srgb, var(--cc-accent) 16%, transparent); color: var(--cc-accent); } #contentCube .cc-nav-item-num { flex-shrink: 0; color: var(--cc-accent); letter-spacing: 0.18em; opacity: 0.85; } #contentCube .cc-nav-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #contentCube .cc-nav-item-cost { flex-shrink: 0; color: var(--cc-muted); letter-spacing: 0.08em; font-size: 0.55rem; } #contentCube .cc-nav-item.is-active .cc-nav-item-cost, #contentCube .cc-nav-item:hover .cc-nav-item-cost { color: var(--cc-accent); } #contentCube .cc-progress { width: 7.5rem; height: var(--cc-hairline); background: var(--cc-muted); margin-block-start: 0.5rem; margin-inline-start: auto; position: relative; overflow: hidden; } #contentCube .cc-progress-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0%; background: var(--cc-accent); transition: width 0.1s linear; } #contentCube .cc-scene-label { font-size: 0.6rem; color: var(--cc-accent); margin-block-start: 0.4rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-inline-start: auto; } #contentCube .cc-strip { position: absolute; left: var(--cc-nav-x); top: 50%; translate: -50% -50%; z-index: var(--cc-z-ui); display: flex; flex-direction: column; gap: 0.55rem; max-height: 70%; overflow: hidden; } #contentCube .cc-dot { position: relative; display: block; width: 0.25rem; height: 0.25rem; flex-shrink: 0; border-radius: 50%; background: var(--cc-muted); transition: background 0.3s, scale 0.3s; cursor: pointer; border: none; padding: 0; margin: 0; } #contentCube .cc-dot::before { content: ""; position: absolute; inset: -0.25rem; } #contentCube .cc-dot.active { background: var(--cc-accent); scale: 1.8; } #contentCube .cc-caption { position: absolute; bottom: var(--cc-ui-inset); left: 50%; translate: -50% 0; z-index: var(--cc-z-ui); text-align: center; pointer-events: none; user-select: none; max-width: calc(100% - 2rem); } #contentCube .cc-caption-num { font-size: 0.58rem; letter-spacing: 0.28em; color: var(--cc-accent); text-transform: uppercase; margin-block-end: 0.15rem; } #contentCube .cc-caption-name { font-family: var(--cc-font-display); font-weight: 600; font-size: clamp(1.4rem, 4.5vw, 2.8rem); letter-spacing: 0.08em; color: var(--cc-muted); opacity: 0.45; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #contentCube .cc-text-card { max-width: 22rem; padding: 1.75rem 1.5rem; background: var(--cc-card-bg); border-left: var(--cc-hairline) solid var(--cc-card-border); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); overflow: hidden; transition: background 0.3s ease, border-color 0.3s ease; pointer-events: auto; } #contentCube .cc-text-card.right { margin-inline-start: auto; border-left: none; border-right: var(--cc-hairline) solid var(--cc-card-border); text-align: right; } #contentCube .cc-text-card.right .cc-hline { transform-origin: right; margin-inline-start: auto; } #contentCube .cc-text-card.center { margin-inline: auto; border-left: none; border-top: var(--cc-hairline) solid var(--cc-card-border); text-align: center; max-width: 26rem; } #contentCube .cc-text-card.center .cc-hline { transform-origin: center; margin-inline: auto; } #contentCube .cc-tag { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cc-accent); margin-block-end: 0.9rem; } #contentCube .cc-tag-cost { display: inline-flex; align-items: center; gap: 0.3rem; } #contentCube .cc-tag-cost i { font-size: 0.55rem; } #contentCube .cc-title { font-family: var(--cc-font-display); /* Oswald 600 ≈ визуальный вес Bebas Neue (у Bebas один вес = 400). */ font-weight: 600; letter-spacing: 0.03em; line-height: 0.95; font-size: clamp(2rem, 5.5vw, 3.6rem); color: var(--cc-fg); margin: 0; text-transform: uppercase; } #contentCube .cc-intro-title { font-size: clamp(2.6rem, 8vw, 5rem); } #contentCube .cc-body { font-size: 0.78rem; line-height: 1.7; color: color-mix(in srgb, var(--cc-fg) 58%, transparent); margin-block-start: 1rem; margin-block-end: 0; } #contentCube .cc-hline { width: 3.125rem; height: var(--cc-hairline); background: var(--cc-accent); margin-block-end: 1rem; transform-origin: left; } #contentCube .cc-cta-row { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 0.65rem; margin-block-start: 1.35rem; } #contentCube .cc-text-card.right .cc-cta-row { justify-content: flex-end; } #contentCube .cc-text-card.center .cc-cta-row { justify-content: center; } /* Перебиваем глобальные button { width:100%; margin:10px 0 } из style.css */ #contentCube button.cc-cta, #contentCube button.cc-cta-soft { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: auto; max-width: 100%; margin: 0; padding: 0.55rem 1.05rem; border-radius: 0; font-family: var(--cc-font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; box-shadow: none; transition: background 0.2s, color 0.2s, border-color 0.2s; } #contentCube button.cc-cta { border: var(--cc-hairline) solid var(--cc-accent); background: transparent; color: var(--cc-accent); } #contentCube button.cc-cta:hover { background: var(--cc-accent); color: var(--cc-bg); } #contentCube button.cc-cta-soft { border: var(--cc-hairline) solid color-mix(in srgb, var(--cc-muted) 45%, transparent); background: transparent; color: var(--cc-muted); } #contentCube button.cc-cta-soft:hover { background: color-mix(in srgb, var(--cc-muted) 12%, transparent); border-color: var(--cc-muted); color: var(--cc-fg); } #contentCube button.cc-cta i, #contentCube button.cc-cta-soft i { font-size: 0.7rem; } /* Reveal */ #contentCube .cc-tag, #contentCube .cc-title, #contentCube .cc-body, #contentCube .cc-cta, #contentCube .cc-cta-soft { opacity: 0; translate: 0 var(--cc-reveal-offset); } #contentCube .cc-title { translate: 0 1rem; transition: opacity var(--cc-reveal-duration) ease 0.08s, translate var(--cc-reveal-duration) ease 0.08s; } #contentCube .cc-tag { transition: opacity var(--cc-reveal-duration) ease, translate var(--cc-reveal-duration) ease; } #contentCube .cc-body { transition: opacity var(--cc-reveal-duration) ease 0.2s, translate var(--cc-reveal-duration) ease 0.2s; } #contentCube .cc-cta, #contentCube .cc-cta-soft { transition: opacity var(--cc-reveal-duration) ease 0.35s, translate var(--cc-reveal-duration) ease 0.35s, background 0.2s, color 0.2s, border-color 0.2s; } #contentCube .cc-hline { opacity: 0; scale: 0 1; transition: opacity 0.4s ease, scale 0.4s ease; } #contentCube .cc-tag.visible, #contentCube .cc-title.visible, #contentCube .cc-body.visible, #contentCube .cc-cta.visible, #contentCube .cc-cta-soft.visible { opacity: 1; translate: 0 0; } #contentCube .cc-hline.visible { opacity: 1; scale: 1 1; } @media (max-width: 56.25em) { #sectionContent.content-cube-section { --cc-ui-inset: 1rem; height: calc(100dvh - 118px - env(safe-area-inset-bottom, 0px)); } #contentCube .cc-nav { max-width: min(14.5rem, calc(100% - 6.5rem)); } #contentCube .cc-nav-btn { padding: 0.5rem 0.65rem; font-size: 0.58rem; } #contentCube .cc-nav-menu { width: max(100%, 14rem); max-height: min(48vh, 18rem); } #contentCube .cc-strip { display: none; } #contentCube .cc-cube { --s: min(78vw, 42vh, 340px); } #contentCube .cc-slide { min-height: 145%; align-items: flex-end; padding: 0 1.15rem 3.25rem; } #contentCube .cc-slide[data-cc-index="0"] { min-height: 100%; align-items: center; padding: 3.5rem 1.15rem; } #contentCube .cc-text-card, #contentCube .cc-text-card.right, #contentCube .cc-text-card.center { max-width: 100%; padding: 1.35rem 1.15rem; } #contentCube .cc-body { line-height: 1.55; } #contentCube .cc-cta-row { margin-block-start: 1.1rem; } } @media (prefers-reduced-motion: reduce) { #contentCube .cc-cube { transition: none !important; } #contentCube .cc-tag, #contentCube .cc-title, #contentCube .cc-body, #contentCube .cc-cta, #contentCube .cc-cta-soft, #contentCube .cc-hline { opacity: 1 !important; translate: none !important; scale: 1 !important; transition: none !important; } }