/* Refecture.Studio — shared design system (studio / work / about / contact / brief) */ :root { --accent: #de7356; --bg: #08090a; --bg-raised: #0b0c0e; --bg-card: #0d0e10; --bg-card-head: #111214; --border-soft: #16181a; --border: #1b1d20; --border-strong: #1e2124; --border-hover: #2a2d31; --text: #f4f3f1; --text-num: #eceae7; --text-soft: #c9c9cd; --text-muted: #a4a4aa; --text-muted2: #8b8b91; --text-muted3: #7a7b80; --text-dim: #6e6f74; --text-dimmer: #5f6165; --text-faint: #4e5054; --light-bg: #eae7e1; --light-text: #0a0b0c; --light-muted: #6b675f; --light-muted2: #4d4a44; --light-border: rgba(10, 11, 12, 0.18); --font-display: 'Archivo', sans-serif; --font-body: 'Inter', -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', monospace; } /* ===== СВЕТЛАЯ ТЕМА Studio — только на . Другие страницы не трогает. Токены переворачиваются в свет; --light-* (были светлыми островами на тёмном) → тёмные острова. ===== */ html[data-theme="light"] { --accent: #de7356; --bg: #f6f4ee; --bg-raised: #efece2; --bg-card: #fffefb; --bg-card-head: #f2efe7; --border-soft: #e7e2d7; --border: #ded9cc; --border-strong: #d3cdbd; --border-hover: #b9b19f; --text: #191811; --text-num: #201e16; --text-soft: #34322a; --text-muted: #5c584d; --text-muted2: #6f6b5f; --text-muted3: #7d7972; --text-dim: #8a8578; --text-dimmer: #9a9488; --text-faint: #b3ad9c; /* --light-* остаются СВЕТЛЫМИ островами (не инвертируем в тёмное — Стас не хочет чёрные блоки) */ --light-bg: #efece2; --light-text: #191811; --light-muted: #5c584d; --light-muted2: #7d7972; --light-border: rgba(25,24,17,.14); --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; } html[data-theme="light"] ::selection { color: #fff; } html[data-theme="light"] .btn-primary { color: #fff; } html[data-theme="light"] .chip.on { color: #fff; } html[data-theme="light"] .site-nav-links a.cta { color: #fff; } html[data-theme="light"] .site-nav-links a.cta:hover { color: #fff; } html[data-theme="light"] .card-row { border-bottom-color: var(--border); } html[data-theme="light"] .site-nav { background: rgba(246,244,238,.9); } html[data-theme="light"] .req-glow { animation: none; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); overflow-x: hidden; } * { box-sizing: border-box; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } ::selection { background: var(--accent); color: #08090a; } input, textarea { font-family: var(--font-mono); background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text); padding: 14px 15px; font-size: 14px; width: 100%; border-radius: 0; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--text-faint); } input:focus, textarea:focus { outline: none; border-color: var(--accent); } label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @keyframes req-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,105,75,0); border-color: var(--border); } 50% { box-shadow: 0 0 16px 2px rgba(217,105,75,.4); border-color: rgba(217,105,75,.7); } } .req-glow { animation: req-glow 2.6s ease-in-out infinite; } /* ---- vertical video rail (work.html) ---- */ @keyframes chevBounce { 0%, 100% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(5px); opacity: 1; } } .chev-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; } .chev { opacity: .35; } .chev.chev1 { animation: chevBounce 1.6s ease-in-out infinite; } .chev.chev2 { opacity: .65; animation: chevBounce 1.6s ease-in-out infinite .12s; } .chev.chev3 { opacity: 1; animation: chevBounce 1.6s ease-in-out infinite .24s; } @media (prefers-reduced-motion: reduce) { .chev { animation: none !important; } } .side-jump { position: fixed; right: 0; top: 55%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border-strong); border-right: none; padding: 16px 9px 14px; text-decoration: none; transition: border-color .18s ease; } .side-jump:hover { border-color: var(--accent); } .side-jump-label { writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted2); transition: color .18s ease; } .side-jump:hover .side-jump-label { color: var(--accent); } .side-jump-arrow { display: flex; animation: chevBounce 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .side-jump-arrow { animation: none !important; } } @media (max-width: 640px) { .side-jump { padding: 12px 7px 10px; gap: 8px; } .side-jump-label { font-size: 9px; } } .vertical-rail { display: flex; gap: 14px; overflow-x: auto; padding: 4px clamp(20px,4vw,64px) 18px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--border-hover) transparent; } .vertical-rail::-webkit-scrollbar { height: 3px; } .vertical-rail::-webkit-scrollbar-track { background: transparent; } .vertical-rail::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 2px; } .vertical-rail::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } .rail-fade { position: absolute; top: 0; bottom: 14px; width: 64px; pointer-events: none; z-index: 2; } .rail-fade-left { left: 0; background: linear-gradient(90deg, var(--bg), transparent); } .rail-fade-right { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); } .vtile { flex: 0 0 auto; width: clamp(150px,17vw,196px); scroll-snap-align: start; cursor: pointer; } .vtile-frame { position: relative; aspect-ratio: 9/16; border: 1px solid var(--border-strong); background: linear-gradient(160deg,#16181b,#0a0b0c); overflow: hidden; transition: border-color .18s ease; } .vtile-frame:hover { border-color: var(--border-hover); } .vtile-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; z-index: 1; } .vtile-poster.loaded { opacity: 1; } .vtile-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; z-index: 1; pointer-events: none; } .vtile-video.active { opacity: 1; } .vplay { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.28); display: flex; align-items: center; justify-content: center; background: rgba(8,9,10,.35); backdrop-filter: blur(2px); transition: border-color .18s ease, background .18s ease, opacity .18s ease; z-index: 2; pointer-events: none; } .vplay.hide { opacity: 0; } .vtile-frame:hover .vplay { border-color: var(--accent); background: rgba(8,9,10,.55); } .vplay .tri { width: 0; height: 0; border-left: 12px solid var(--accent); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; } .vtag { position: absolute; top: 10px; left: 10px; font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--border-hover); padding: 3px 6px; background: rgba(8,9,10,.55); z-index: 2; pointer-events: none; } .vtag-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; color: var(--accent); border: none; background: none; border-radius: 0; } .vcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px 11px; background: linear-gradient(180deg, rgba(8,9,10,0), rgba(8,9,10,.86) 55%); z-index: 2; pointer-events: none; } .vcaption .t { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: -.005em; text-transform: uppercase; color: var(--text); line-height: 1.2; } .vcaption .s { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-top: 3px; } .vimeo-modal { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(4,5,6,.94); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 3vh 4vw; } .vimeo-modal.open { display: flex; } .vimeo-modal-frame { position: relative; width: min(94vw, 94vh * 9 / 16); aspect-ratio: 9/16; background: #000; box-shadow: 0 0 0 1px var(--border-hover); } .vimeo-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .vimeo-modal-close { position: fixed; top: 20px; right: 24px; width: 40px; height: 40px; border: 1px solid var(--border-hover); background: rgba(8,9,10,.6); color: var(--text); font-size: 16px; cursor: pointer; z-index: 201; } .vimeo-modal-close:hover { border-color: var(--accent); color: var(--accent); } .case-vimeo-modal { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(4,5,6,.94); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 4vh 4vw; } .case-vimeo-modal.open { display: flex; } .case-vimeo-modal-inner { width: min(92vw, 92vh * 16 / 9); max-width: 1100px; } .case-vimeo-modal-frame { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; box-shadow: 0 0 0 1px var(--border-hover); } .case-vimeo-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .case-vimeo-modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; font-family: var(--font-mono); } .case-vimeo-modal-footer span { font-size: 12px; color: var(--text-muted2); } .case-vimeo-modal-footer a { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .case-vimeo-modal-close { position: fixed; top: 20px; right: 24px; width: 40px; height: 40px; border: 1px solid var(--border-hover); background: rgba(8,9,10,.6); color: var(--text); font-size: 16px; cursor: pointer; z-index: 201; } .case-vimeo-modal-close:hover { border-color: var(--accent); color: var(--accent); } .vimeo-modal-nav { position: fixed; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-hover); background: rgba(8,9,10,.6); color: var(--text-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 201; transition: border-color .18s ease, color .18s ease; } .vimeo-modal-nav:hover { border-color: var(--accent); color: var(--accent); } .vimeo-modal-prev { bottom: calc(50% + 30px); } .vimeo-modal-next { bottom: calc(50% - 74px); } .vimeo-modal-caption { position: fixed; left: 24px; bottom: 24px; z-index: 201; font-family: var(--font-mono); pointer-events: none; } .vimeo-modal-caption .t { font-family: var(--font-display); font-weight: 700; font-size: 15px; text-transform: uppercase; color: var(--text); margin-bottom: 4px; } .vimeo-modal-caption .s { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); } .vimeo-modal-ig { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted2); pointer-events: auto; width: fit-content; transition: color .18s ease; } .vimeo-modal-ig:hover { color: var(--accent); } @media (max-width: 640px) { .vimeo-modal-nav { right: 12px; width: 38px; height: 38px; } .vimeo-modal-prev { bottom: calc(50% + 26px); } .vimeo-modal-next { bottom: calc(50% - 64px); } .vimeo-modal-caption { left: 12px; bottom: 12px; } } /* language toggle: html[data-lang] controls which spans/blocks show */ [data-lang="ru"] .lang-en { display: none !important; } [data-lang="en"] .lang-ru { display: none !important; } .btn-primary { display: inline-flex; align-items: center; gap: 12px; background: var(--accent); color: #08090a; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 15px 22px; border: none; cursor: pointer; transition: filter .15s ease; } .btn-primary:hover { filter: brightness(1.12); } .btn-secondary { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--border-hover); color: var(--text-soft); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 15px 22px; background: transparent; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .btn-secondary:hover { border-color: #4a4e53; color: var(--text); } .card { border: 1px solid var(--border-strong); background: var(--bg-card); } .card-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-strong); background: var(--bg-card-head); font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted2); } .card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: 1px solid #17191b; } .card-row .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); } .card-row .v { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-num); text-align: right; } .chip { cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; padding: 9px 12px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); } .chip:hover { border-color: #4a4e53; } .chip.on { color: #08090a; border-color: var(--accent); background: var(--accent); } .tile { background: var(--bg-card); border: 1px solid var(--border); margin: 0 -1px -1px 0; } .site-topbar { border-bottom: 1px solid var(--border-soft); background: var(--bg-raised); } .site-topbar-inner { max-width: 1440px; margin: 0 auto; padding: 9px clamp(20px,4vw,64px); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dimmer); } .site-topbar-links { display: flex; gap: clamp(12px,1.8vw,24px); flex-wrap: wrap; } .site-topbar-links a.current { color: var(--accent); } .lang-toggle { display: flex; gap: 2px; } .lang-toggle span { cursor: pointer; padding: 2px 8px; border-bottom: 2px solid transparent; } .lang-toggle span.active { border-bottom-color: var(--accent); color: var(--text); } .lang-toggle span:not(.active) { color: var(--text-dimmer); } .site-nav { position: sticky; top: 0; z-index: 50; background: rgba(10,11,12,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .site-nav-inner { max-width: 1440px; margin: 0 auto; padding: 14px clamp(20px,4vw,64px); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .site-nav-logo { display: flex; align-items: center; gap: 10px; } .site-nav-links { display: flex; align-items: center; gap: clamp(14px,2.2vw,30px); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted2); } .site-nav-links a.current { color: var(--accent); } .site-nav-links a.cta { display: flex; align-items: center; gap: 8px; background: var(--accent); color: #08090a; font-weight: 600; padding: 9px 15px; } .site-nav-links a.cta:hover { color: #08090a; filter: brightness(1.1); } .site-footer-inner { max-width: 1440px; margin: 0 auto; padding: 24px clamp(20px,4vw,64px) 32px; display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted3); border-top: 1px solid var(--border-soft); } .site-footer-links { display: flex; gap: clamp(14px,2.2vw,30px); }