germanandClaude Opus 4.8
7d683dd1f4
- hero + портрет «О художнике» + 8 карточек «Направления» + 12 плиток masonry-галереи заменены с CSS-градиентов на реальные фото - 22 изображения оптимизированы в WebP (+JPG fallback), assets/img/, hero≤40КБ, плитки≤150КБ - lightbox галереи и og:image переведены на новые изображения - вёрстка/форма/секции без изменений Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1203 lines
80 KiB
HTML
1203 lines
80 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>NIKA — Искусство, которое живёт на теле</title>
|
||
<meta name="description" content="NIKA ART — цифровая художественная галерея премиум-класса. Body Art, Face Art, живопись, фотография, современное искусство." />
|
||
<meta property="og:title" content="NIKA — художник" />
|
||
<meta property="og:description" content="Искусство, которое живёт на теле." />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:url" content="https://1nika.ru/" />
|
||
<meta property="og:image" content="https://1nika.ru/assets/img/hero.jpg" />
|
||
<meta property="og:locale" content="ru_RU" />
|
||
<meta property="og:locale:alternate" content="en_US" />
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="NIKA — художник" />
|
||
<meta name="twitter:description" content="Искусство, которое живёт на теле." />
|
||
<meta name="twitter:image" content="https://1nika.ru/assets/img/hero.jpg" />
|
||
<meta name="theme-color" content="#F7F7F5" />
|
||
<link rel="canonical" href="https://1nika.ru/" />
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet" />
|
||
|
||
<style>
|
||
/* ============================================================
|
||
NIKA ART — Design System
|
||
Palette bg #F7F7F5 / #FAFAFA · ink #111 · gold #C8A55A · graphite #444
|
||
Type Space Grotesk (display) · Manrope (UI) · Cormorant (accent)
|
||
============================================================ */
|
||
:root{
|
||
--bg:#F7F7F5;
|
||
--bg-alt:#FAFAFA;
|
||
--ink:#111111;
|
||
--ink-soft:#1b1b1b;
|
||
--gold:#C8A55A;
|
||
--gold-deep:#a9863d;
|
||
--gold-text:#8a6a26; /* darker gold for text on light bg — AA contrast */
|
||
--graphite:#444444;
|
||
--muted:#6e6e6a;
|
||
--line:rgba(17,17,17,.10);
|
||
--line-soft:rgba(17,17,17,.06);
|
||
--glass:rgba(247,247,245,.65);
|
||
--glass-brd:rgba(255,255,255,.55);
|
||
--shadow-s:0 2px 10px rgba(17,17,17,.05);
|
||
--shadow-m:0 18px 50px -20px rgba(17,17,17,.22);
|
||
--shadow-l:0 40px 90px -30px rgba(17,17,17,.35);
|
||
--r-s:10px; --r-m:18px; --r-l:28px;
|
||
--f-display:'Space Grotesk',system-ui,sans-serif;
|
||
--f-ui:'Manrope',system-ui,sans-serif;
|
||
--f-serif:'Cormorant Garamond',Georgia,serif;
|
||
--ease:cubic-bezier(.16,1,.3,1);
|
||
--maxw:1320px;
|
||
}
|
||
|
||
*,*::before,*::after{box-sizing:border-box}
|
||
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
|
||
body{
|
||
margin:0;background:var(--bg);color:var(--ink);
|
||
font-family:var(--f-ui);font-weight:400;line-height:1.6;
|
||
overflow-x:hidden;
|
||
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
|
||
}
|
||
img{max-width:100%;display:block}
|
||
a{color:inherit;text-decoration:none}
|
||
button{font-family:inherit;cursor:pointer}
|
||
::selection{background:var(--gold);color:#fff}
|
||
|
||
/* global keyboard focus — visible on every interactive element ------- */
|
||
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
|
||
.nav:not(.solid) a:focus-visible,
|
||
.nav:not(.solid) button:focus-visible{outline-color:#fff}
|
||
|
||
/* film grain overlay ---------------------------------------- */
|
||
body::after{
|
||
content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;
|
||
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||
mix-blend-mode:multiply;
|
||
}
|
||
|
||
/* custom cursor --------------------------------------------- */
|
||
.cursor,.cursor-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;
|
||
transform:translate(-50%,-50%);will-change:transform}
|
||
.cursor{width:6px;height:6px;background:var(--ink);transition:opacity .3s}
|
||
.cursor-ring{width:38px;height:38px;border:1px solid rgba(17,17,17,.35);
|
||
transition:width .35s var(--ease),height .35s var(--ease),background .35s,border-color .35s,opacity .3s}
|
||
.cursor-ring.hover{width:64px;height:64px;background:rgba(200,165,90,.12);border-color:var(--gold)}
|
||
@media (hover:none){.cursor,.cursor-ring{display:none}}
|
||
|
||
/* layout ---------------------------------------------------- */
|
||
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px)}
|
||
section{position:relative}
|
||
.eyebrow{font-family:var(--f-ui);font-weight:600;font-size:12px;letter-spacing:.32em;
|
||
text-transform:uppercase;color:var(--gold-text);display:inline-flex;align-items:center;gap:12px}
|
||
.eyebrow::before{content:"";width:30px;height:1px;background:var(--gold)}
|
||
|
||
/* reveal ---------------------------------------------------- */
|
||
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
|
||
[data-reveal].in{opacity:1;transform:none}
|
||
[data-reveal][data-d="1"]{transition-delay:.08s}
|
||
[data-reveal][data-d="2"]{transition-delay:.16s}
|
||
[data-reveal][data-d="3"]{transition-delay:.24s}
|
||
[data-reveal][data-d="4"]{transition-delay:.32s}
|
||
|
||
/* ============ NAV ========================================== */
|
||
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:transform .5s var(--ease),background .4s,box-shadow .4s,backdrop-filter .4s}
|
||
.nav.hide{transform:translateY(-105%)}
|
||
.nav.solid{background:var(--glass);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
|
||
box-shadow:0 1px 0 var(--line-soft),0 12px 40px -28px rgba(17,17,17,.4)}
|
||
.nav__in{display:flex;align-items:center;justify-content:space-between;height:74px}
|
||
.logo{font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:.24em;padding-left:.24em}
|
||
.logo b{color:var(--gold)}
|
||
.nav__links{display:flex;gap:34px;align-items:center}
|
||
.nav__links a{font-size:14px;font-weight:500;color:var(--graphite);position:relative;padding:6px 0;letter-spacing:.01em}
|
||
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ink);transition:width .4s var(--ease)}
|
||
.nav__links a:hover{color:var(--ink)}
|
||
.nav__links a:hover::after{width:100%}
|
||
.nav__right{display:flex;align-items:center;gap:18px}
|
||
.lang{display:flex;border:1px solid var(--line);border-radius:100px;overflow:hidden}
|
||
.lang button{background:none;border:0;padding:7px 12px;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.05em}
|
||
.lang button.on{background:var(--ink);color:#fff}
|
||
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14px;letter-spacing:.01em;
|
||
border-radius:100px;padding:13px 24px;transition:transform .4s var(--ease),background .4s,color .4s,box-shadow .4s;border:1px solid transparent}
|
||
.btn--dark{background:var(--ink);color:#fff}
|
||
.btn--dark:hover{background:var(--gold-deep);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(169,134,61,.7)}
|
||
.btn--ghost{border-color:var(--line);color:var(--ink)}
|
||
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
|
||
.btn--gold{background:var(--gold);color:#fff}
|
||
.btn--gold:hover{background:var(--gold-deep);transform:translateY(-2px)}
|
||
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px}
|
||
.burger span{width:24px;height:2px;background:var(--ink);transition:.3s}
|
||
.nav__menucta{display:none}
|
||
|
||
/* nav color states: light over hero, dark when solid */
|
||
.nav:not(.solid) .logo{color:#fff}
|
||
.nav:not(.solid) .nav__links a{color:rgba(255,255,255,.78)}
|
||
.nav:not(.solid) .nav__links a:hover{color:#fff}
|
||
.nav:not(.solid) .nav__links a::after{background:#fff}
|
||
.nav:not(.solid) .lang{border-color:rgba(255,255,255,.3)}
|
||
.nav:not(.solid) .lang button{color:rgba(255,255,255,.72)}
|
||
.nav:not(.solid) .lang button.on{background:#fff;color:var(--ink)}
|
||
.nav:not(.solid) .btn--dark{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32);color:#fff;
|
||
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
|
||
.nav:not(.solid) .btn--dark:hover{background:#fff;color:var(--ink);box-shadow:none}
|
||
.nav:not(.solid) .burger span{background:#fff}
|
||
|
||
/* ============ HERO ========================================= */
|
||
.hero{min-height:100svh;display:flex;align-items:flex-end;padding-bottom:clamp(40px,7vh,90px);
|
||
padding-top:120px;overflow:hidden}
|
||
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
|
||
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:74% center;
|
||
z-index:0;filter:saturate(.92) contrast(1.02)}
|
||
.hero__art{position:absolute;inset:-8% -4% -4% -4%;z-index:1;background:
|
||
radial-gradient(70% 60% at 78% 32%,rgba(200,165,90,.22),transparent 62%),
|
||
linear-gradient(115deg,rgba(8,8,8,.82) 0%,rgba(18,16,14,.5) 42%,rgba(18,16,14,.12) 72%),
|
||
linear-gradient(180deg,transparent 58%,rgba(20,18,16,.12) 78%,var(--bg) 99.5%);
|
||
will-change:transform}
|
||
.hero__art::after{content:"";position:absolute;inset:0;
|
||
background:linear-gradient(180deg,transparent 40%,rgba(247,247,245,.02) 70%,var(--bg) 99%)}
|
||
.hero__veil{position:absolute;inset:0;z-index:-1;
|
||
background:linear-gradient(90deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.15) 45%,transparent 70%)}
|
||
.hero__grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;width:100%}
|
||
.hero h1{font-family:var(--f-display);font-weight:500;color:#fff;margin:0;
|
||
font-size:clamp(44px,8.4vw,132px);line-height:.96;letter-spacing:-.02em;
|
||
text-shadow:0 2px 30px rgba(0,0,0,.45)}
|
||
.hero h1 em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--gold)}
|
||
.hero__tag{color:rgba(255,255,255,.92);max-width:44ch;margin:26px 0 34px;font-size:clamp(15px,1.5vw,19px);
|
||
font-weight:400;text-shadow:0 1px 16px rgba(0,0,0,.55)}
|
||
.hero__cta{display:flex;gap:16px;flex-wrap:wrap}
|
||
.hero__meta{display:flex;flex-direction:column;gap:22px;text-align:right;color:rgba(255,255,255,.6);padding-bottom:8px}
|
||
.hero__meta .n{font-family:var(--f-display);font-size:34px;color:#fff;font-weight:600;line-height:1}
|
||
.hero__meta small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
|
||
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
|
||
display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.6);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
|
||
.scrollcue i{width:1px;height:44px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:cue 2.2s var(--ease) infinite}
|
||
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
|
||
|
||
/* marquee --------------------------------------------------- */
|
||
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;overflow:hidden;background:var(--bg-alt)}
|
||
.marquee__t{display:flex;gap:56px;white-space:nowrap;width:max-content;animation:slide 34s linear infinite}
|
||
.marquee__t span{font-family:var(--f-display);font-size:clamp(18px,2.4vw,30px);font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:56px;letter-spacing:-.01em}
|
||
.marquee__t span::after{content:"✦";color:var(--gold);font-size:.6em}
|
||
@keyframes slide{to{transform:translateX(-50%)}}
|
||
|
||
/* ============ SECTION shell ================================ */
|
||
.sec{padding:clamp(80px,13vh,150px) 0}
|
||
.sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(40px,6vh,72px);flex-wrap:wrap}
|
||
.sec__title{font-family:var(--f-display);font-weight:500;letter-spacing:-.02em;line-height:1.02;margin:16px 0 0;
|
||
font-size:clamp(30px,4.6vw,60px)}
|
||
.sec__lead{max-width:46ch;color:var(--graphite);font-size:clamp(15px,1.4vw,18px);font-weight:300}
|
||
|
||
/* ============ ABOUT ======================================== */
|
||
.about{background:var(--bg-alt)}
|
||
.about__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center}
|
||
.about__ph{position:relative;aspect-ratio:4/5;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-l)}
|
||
.about__ph .img{position:absolute;inset:0;background:
|
||
radial-gradient(90% 70% at 30% 20%,rgba(200,165,90,.25),transparent 55%),
|
||
linear-gradient(150deg,#20201d,#3b352e 60%,#5a4f42);will-change:transform}
|
||
.about__ph .badge{position:absolute;left:20px;bottom:20px;z-index:2;background:var(--glass);backdrop-filter:blur(14px);
|
||
border:1px solid var(--glass-brd);border-radius:100px;padding:10px 18px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--ink)}
|
||
.about__body p{color:var(--graphite);font-size:clamp(15px,1.35vw,18px);margin:0 0 20px;max-width:52ch}
|
||
.about__body p.lead{font-family:var(--f-serif);font-style:italic;font-size:clamp(22px,2.6vw,30px);color:var(--ink);line-height:1.35;max-width:20ch}
|
||
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;border-top:1px solid var(--line);padding-top:32px}
|
||
.facts .n{font-family:var(--f-display);font-size:clamp(26px,3vw,40px);font-weight:600;line-height:1}
|
||
.facts small{display:block;margin-top:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
|
||
|
||
/* ============ DIRECTIONS =================================== */
|
||
.dirs__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.5vw,22px)}
|
||
.dir{position:relative;border-radius:var(--r-m);overflow:hidden;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;
|
||
padding:26px;color:#fff;isolation:isolate;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
|
||
.dir:hover{transform:translateY(-6px);box-shadow:var(--shadow-l)}
|
||
.dir__bg{position:absolute;inset:0;z-index:-2;transition:transform 1.1s var(--ease)}
|
||
.dir:hover .dir__bg{transform:scale(1.07)}
|
||
.dir::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,0) 30%,rgba(10,10,10,.82))}
|
||
.dir span.k{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
|
||
.dir h3{font-family:var(--f-display);font-weight:500;font-size:clamp(20px,2.1vw,27px);margin:10px 0 6px;letter-spacing:-.01em}
|
||
.dir p{font-size:14px;color:rgba(255,255,255,.72);margin:0;max-width:34ch;
|
||
max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s,margin .5s}
|
||
.dir:hover p{max-height:120px;opacity:1;margin-top:2px}
|
||
.dir .more{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#fff}
|
||
.dir .more::after{content:"→";transition:transform .4s var(--ease)}
|
||
.dir:hover .more::after{transform:translateX(6px)}
|
||
.dir.big{grid-column:span 6;min-height:420px}
|
||
.dir.med{grid-column:span 4}
|
||
.dir.sm{grid-column:span 3}
|
||
/* touch devices have no hover — reveal descriptions so mobile users see them */
|
||
@media (hover:none){
|
||
.dir p{max-height:160px;opacity:1;margin-top:2px}
|
||
.dir .more::after{transform:none}
|
||
}
|
||
/* placeholder art fills */
|
||
.pa1{background:linear-gradient(140deg,#161514,#3a2f28 55%,#6b5240)}
|
||
.pa2{background:linear-gradient(140deg,#1a1a1f,#2f3b46 60%,#5a7184)}
|
||
.pa3{background:linear-gradient(140deg,#241a1a,#4a2f2f 60%,#8a5a54)}
|
||
.pa4{background:linear-gradient(140deg,#1c1c19,#3a3a30 60%,#6f6b4e)}
|
||
.pa5{background:linear-gradient(140deg,#191622,#332a4a 60%,#5f4f84)}
|
||
.pa6{background:linear-gradient(140deg,#141414,#2a2a2a 60%,#555)}
|
||
.pa7{background:linear-gradient(140deg,#201a16,#443228 60%,#7a5a3e)}
|
||
.pa8{background:linear-gradient(140deg,#16201c,#274a3c 60%,#3e8a6a)}
|
||
|
||
/* ============ GALLERY ====================================== */
|
||
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
|
||
.filters button{background:none;border:1px solid var(--line);border-radius:100px;padding:9px 18px;font-size:13px;font-weight:500;
|
||
color:var(--graphite);transition:all .35s var(--ease)}
|
||
.filters button:hover{border-color:var(--ink);color:var(--ink)}
|
||
.filters button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
|
||
.masonry{columns:3;column-gap:clamp(14px,1.5vw,22px)}
|
||
.tile{break-inside:avoid;margin-bottom:clamp(14px,1.5vw,22px);border-radius:var(--r-m);overflow:hidden;position:relative;cursor:pointer;
|
||
box-shadow:var(--shadow-s);transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .5s}
|
||
.tile.hiddn{display:none}
|
||
.tile:hover{box-shadow:var(--shadow-l)}
|
||
.tile .img{width:100%;transition:transform 1s var(--ease)}
|
||
.tile:hover .img{transform:scale(1.05)}
|
||
.tile__ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;color:#fff;
|
||
background:linear-gradient(180deg,transparent 50%,rgba(10,10,10,.78));opacity:0;transition:opacity .5s var(--ease)}
|
||
.tile:hover .tile__ov,.tile:focus-visible .tile__ov{opacity:1}
|
||
.tile__ov h3{font-family:var(--f-display);font-weight:500;font-size:19px;margin:0 0 4px}
|
||
.tile__ov small{font-size:12px;color:var(--gold);letter-spacing:.06em;text-transform:uppercase}
|
||
|
||
/* ============ CLUB ========================================= */
|
||
.club{background:var(--ink);color:#fff;border-radius:clamp(20px,3vw,40px);margin:0 clamp(0px,3vw,20px);overflow:hidden;position:relative}
|
||
.club__glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:
|
||
radial-gradient(50% 60% at 15% 15%,rgba(200,165,90,.28),transparent 60%),
|
||
radial-gradient(50% 60% at 90% 90%,rgba(90,80,130,.30),transparent 60%)}
|
||
.club__in{position:relative;z-index:1;padding:clamp(50px,8vw,96px)}
|
||
.club .eyebrow{color:var(--gold)}
|
||
.club h2{font-family:var(--f-display);font-weight:500;font-size:clamp(30px,4.6vw,58px);letter-spacing:-.02em;margin:16px 0 18px;line-height:1.02}
|
||
.club__lead{color:rgba(255,255,255,.7);max-width:56ch;font-weight:300;font-size:clamp(15px,1.4vw,18px)}
|
||
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:44px 0 40px}
|
||
.tier{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-m);padding:24px;background:rgba(255,255,255,.03);
|
||
transition:transform .5s var(--ease),background .5s,border-color .5s}
|
||
.tier:hover{transform:translateY(-6px);background:rgba(255,255,255,.06);border-color:rgba(200,165,90,.5)}
|
||
.tier .k{font-family:var(--f-display);font-size:20px;font-weight:600;color:var(--gold)}
|
||
.tier p{color:rgba(255,255,255,.62);font-size:14px;margin:10px 0 0}
|
||
.club__cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
|
||
|
||
/* ============ FOOTER ======================================= */
|
||
.foot{padding:clamp(60px,9vh,110px) 0 40px}
|
||
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:50px;border-bottom:1px solid var(--line)}
|
||
.foot__h{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;font-weight:600}
|
||
.foot__grid a,.foot__linkbtn{display:block;color:var(--graphite);font-size:15px;padding:5px 0;transition:color .3s,transform .3s}
|
||
.foot__grid a:hover,.foot__linkbtn:hover{color:var(--ink);transform:translateX(4px)}
|
||
.foot__linkbtn{background:none;border:0;text-align:left;font-family:inherit;width:100%}
|
||
.foot__mail{word-break:break-word}
|
||
.foot__soon{font-size:12px;color:var(--gold-text);margin:0 0 12px;font-weight:600;letter-spacing:.02em}
|
||
.foot__soc{list-style:none;margin:0;padding:0}
|
||
.foot__soc li{color:var(--muted);font-size:15px;padding:5px 0}
|
||
.foot__logo{font-family:var(--f-display);font-size:clamp(40px,7vw,84px);font-weight:700;letter-spacing:.1em;line-height:1}
|
||
.foot__logo b{color:var(--gold)}
|
||
.foot__sub{color:var(--graphite);max-width:34ch;margin:18px 0 0;font-weight:300}
|
||
.foot__bar{display:flex;justify-content:space-between;align-items:center;padding-top:28px;color:var(--muted);font-size:13px;flex-wrap:wrap;gap:14px}
|
||
|
||
/* ============ SERVICES ===================================== */
|
||
.serv__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
|
||
.serv{display:flex;flex-direction:column;align-items:flex-start;background:#fff;border:1px solid var(--line);
|
||
border-radius:var(--r-m);padding:clamp(24px,2.6vw,34px);box-shadow:var(--shadow-s);
|
||
transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
|
||
.serv:hover{transform:translateY(-6px);box-shadow:var(--shadow-m);border-color:rgba(200,165,90,.5)}
|
||
.serv__k{font-family:var(--f-display);font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--gold-text)}
|
||
.serv__t{font-family:var(--f-display);font-weight:500;font-size:clamp(19px,2vw,24px);letter-spacing:-.01em;margin:12px 0 8px}
|
||
.serv__p{color:var(--graphite);font-size:15px;margin:0 0 24px;max-width:36ch}
|
||
.serv__cta{margin-top:auto}
|
||
.serv--accent{background:linear-gradient(150deg,#1b1b1b,#2a241a);border-color:transparent;color:#fff}
|
||
.serv--accent .serv__t{color:#fff}
|
||
.serv--accent .serv__p{color:rgba(255,255,255,.72)}
|
||
.serv--accent .serv__k{color:var(--gold)}
|
||
.club__note{color:rgba(255,255,255,.55);font-size:13px;margin:22px 0 0;max-width:52ch}
|
||
|
||
/* ============ REQUEST MODAL ================================ */
|
||
.modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
|
||
padding:5vh 5vw;background:rgba(12,12,11,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
|
||
opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
|
||
.modal[hidden]{display:none}
|
||
.modal.open{opacity:1;visibility:visible}
|
||
.modal__card{background:var(--bg-alt);border-radius:var(--r-l);box-shadow:var(--shadow-l);
|
||
width:min(560px,100%);max-height:90vh;overflow:auto;padding:clamp(28px,4vw,44px);
|
||
transform:translateY(16px) scale(.98);transition:transform .5s var(--ease)}
|
||
.modal.open .modal__card{transform:none}
|
||
.modal__x{position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
|
||
background:#fff;color:var(--ink);font-size:20px;line-height:1;transition:.35s var(--ease)}
|
||
.modal__x:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}
|
||
.modal__eyebrow{color:var(--gold-text)}
|
||
.modal__title{font-family:var(--f-display);font-weight:500;font-size:clamp(24px,3vw,32px);letter-spacing:-.01em;margin:14px 0 6px}
|
||
.modal__lead{color:var(--graphite);font-size:15px;margin:0 0 22px}
|
||
.field{display:block;margin-bottom:16px}
|
||
.field span{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px;letter-spacing:.01em}
|
||
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);
|
||
background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;transition:border-color .3s}
|
||
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-deep)}
|
||
.field textarea{resize:vertical;min-height:96px}
|
||
.modal__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
|
||
.modal__actions .btn{flex:1;justify-content:center;min-width:150px}
|
||
.modal__todo{font-size:12px;color:var(--muted);margin:18px 0 0;line-height:1.5}
|
||
.modal__todo code{background:rgba(17,17,17,.06);padding:2px 6px;border-radius:4px;font-size:12px}
|
||
|
||
/* ============ RESPONSIVE =================================== */
|
||
@media (max-width:1000px){
|
||
.nav__links{display:none}
|
||
.burger{display:flex}
|
||
/* mobile dropdown menu (burger) */
|
||
.nav.menu-open{background:var(--glass);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}
|
||
.nav.menu-open .nav__links{
|
||
display:flex;flex-direction:column;align-items:stretch;gap:2px;
|
||
position:absolute;top:100%;left:0;right:0;
|
||
background:var(--bg-alt);padding:12px clamp(20px,5vw,64px) 22px;
|
||
box-shadow:0 24px 44px -26px rgba(17,17,17,.55);border-top:1px solid var(--line-soft)}
|
||
.nav.menu-open .nav__links a{color:var(--ink);font-size:17px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
|
||
.nav.menu-open .nav__links a::after{display:none}
|
||
.nav.menu-open .nav__menucta{display:inline-flex;justify-content:center;margin-top:14px;background:var(--ink);color:#fff;border-color:var(--ink)}
|
||
.nav.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
|
||
.nav.menu-open .burger span:nth-child(2){opacity:0}
|
||
.nav.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
|
||
.hero__grid{grid-template-columns:1fr}
|
||
.hero__meta{flex-direction:row;text-align:left;justify-content:flex-start;gap:38px}
|
||
.about__grid{grid-template-columns:1fr}
|
||
.masonry{columns:2}
|
||
.dir.big,.dir.med,.dir.sm{grid-column:span 6}
|
||
.tiers{grid-template-columns:1fr}
|
||
.serv__grid{grid-template-columns:1fr 1fr}
|
||
.foot__grid{grid-template-columns:1fr 1fr}
|
||
}
|
||
@media (max-width:560px){
|
||
.masonry{columns:1}
|
||
.facts{grid-template-columns:repeat(2,1fr)}
|
||
.dir.big,.dir.med,.dir.sm{grid-column:span 12}
|
||
.serv__grid{grid-template-columns:1fr}
|
||
.foot__grid{grid-template-columns:1fr}
|
||
.hero__meta{display:none}
|
||
.nav__in{height:64px}
|
||
.nav .btn--dark{display:none}
|
||
}
|
||
@media (prefers-reduced-motion:reduce){
|
||
*{animation:none!important;transition:none!important}
|
||
[data-reveal]{opacity:1!important;transform:none!important}
|
||
}
|
||
|
||
/* ---- real photos in image slots (cover-fit over gradient fallbacks) ---- */
|
||
.about__ph .img picture,.about__ph .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
|
||
.dir__bg picture{position:absolute;inset:0;display:block}
|
||
.dir__bg img{width:100%;height:100%;object-fit:cover;display:block}
|
||
.tile .img picture{display:block;width:100%;height:100%}
|
||
.tile .img img{width:100%;height:100%;object-fit:cover;display:block}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="cursor"></div>
|
||
<div class="cursor-ring"></div>
|
||
|
||
<!-- ===================== NAV ===================== -->
|
||
<header class="nav" id="nav">
|
||
<div class="wrap nav__in">
|
||
<a href="#top" class="logo" aria-label="Ника — на главную">
|
||
<picture>
|
||
<source srcset="assets/mark.webp" type="image/webp" />
|
||
<img class="logo__mark" src="assets/mark.png" alt="" width="683" height="554" decoding="async" />
|
||
</picture>
|
||
<span class="logo__txt">NI<b>K</b>A</span>
|
||
</a>
|
||
<nav class="nav__links" id="navLinks" aria-label="Основная навигация">
|
||
<a href="#about" data-i18n="nav_about">О художнике</a>
|
||
<a href="#dirs" data-i18n="nav_dirs">Направления</a>
|
||
<a href="#services" data-i18n="nav_services">Услуги</a>
|
||
<a href="#gallery" data-i18n="nav_gallery">Галерея</a>
|
||
<a href="#club" data-i18n="nav_club">Клуб</a>
|
||
<button type="button" class="btn nav__menucta" data-req data-service="general" data-i18n="nav_cta">Оставить заявку</button>
|
||
</nav>
|
||
<div class="nav__right">
|
||
<div class="lang" id="lang" role="group" aria-label="Язык сайта / Site language">
|
||
<button type="button" data-lang="ru" class="on" aria-pressed="true">RU</button>
|
||
<button type="button" data-lang="en" aria-pressed="false">EN</button>
|
||
</div>
|
||
<button type="button" class="btn btn--dark" data-cursor data-req data-service="general" data-i18n="nav_cta">Оставить заявку</button>
|
||
<button class="burger" id="burger" type="button" aria-label="Открыть меню" aria-expanded="false" aria-controls="navLinks"><span></span><span></span><span></span></button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ===================== HERO ===================== -->
|
||
<section class="hero" id="top">
|
||
<div class="hero__bg">
|
||
<picture>
|
||
<source srcset="assets/img/hero.webp" type="image/webp" />
|
||
<img class="hero__photo" src="assets/img/hero.jpg" alt="Художественный образ Ники: фигура в золоте и графите на тёмном фоне" width="1600" height="900" fetchpriority="high" decoding="async" />
|
||
</picture>
|
||
<div class="hero__art" data-parallax="0.18"></div>
|
||
</div>
|
||
<div class="hero__veil"></div>
|
||
<div class="wrap hero__grid">
|
||
<div>
|
||
<span class="eyebrow" style="color:var(--gold)" data-reveal data-i18n="hero_eyebrow">NIKA · современный художник</span>
|
||
<h1 data-reveal data-d="1"><span data-i18n="hero_l1">Искусство,</span><br /><span data-i18n="hero_l2">которое живёт</span> <em data-i18n="hero_l3">на теле</em></h1>
|
||
<p class="hero__tag" data-reveal data-d="2" data-i18n="hero_tag">Body Art, Face Art, живопись и художественная фотография. Тело как холст, свет как краска, момент как галерея.</p>
|
||
<div class="hero__cta" data-reveal data-d="3">
|
||
<a href="#gallery" class="btn btn--gold" data-cursor data-i18n="hero_cta1">Смотреть галерею</a>
|
||
<button type="button" class="btn btn--ghost" style="color:#fff;border-color:rgba(255,255,255,.35)" data-cursor data-req data-service="general" data-i18n="hero_cta2">Оставить заявку</button>
|
||
</div>
|
||
</div>
|
||
<div class="hero__meta" data-reveal data-d="4">
|
||
<div><div class="n">12</div><small data-i18n="hero_m1">лет практики</small></div>
|
||
<div><div class="n">40+</div><small data-i18n="hero_m2">выставок</small></div>
|
||
<div><div class="n">300</div><small data-i18n="hero_m3">работ</small></div>
|
||
</div>
|
||
</div>
|
||
<div class="scrollcue"><span data-i18n="scroll">Листайте</span><i></i></div>
|
||
</section>
|
||
|
||
<!-- ===================== MARQUEE ===================== -->
|
||
<div class="marquee" aria-hidden="true">
|
||
<div class="marquee__t">
|
||
<span>Body Art</span><span>Face Art</span><span>Живопись</span><span>Фотография</span><span>Инсталляции</span><span>Графика</span>
|
||
<span>Body Art</span><span>Face Art</span><span>Живопись</span><span>Фотография</span><span>Инсталляции</span><span>Графика</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== ABOUT ===================== -->
|
||
<section class="sec about" id="about">
|
||
<div class="wrap about__grid">
|
||
<div class="about__ph" data-reveal>
|
||
<div class="img" data-parallax="0.08">
|
||
<picture>
|
||
<source srcset="assets/img/about.webp" type="image/webp" />
|
||
<img src="assets/img/about.jpg" alt="Портрет Ники в мягком свете — золото на коже, графитовая палитра" width="1400" height="788" loading="lazy" decoding="async" />
|
||
</picture>
|
||
</div>
|
||
<span class="badge" data-i18n="about_badge">Ника · автор</span>
|
||
</div>
|
||
<div class="about__body">
|
||
<span class="eyebrow" data-reveal data-i18n="about_eyebrow">О художнике</span>
|
||
<p class="lead" data-reveal data-d="1" data-i18n="about_lead">Я превращаю тело и пространство в живую картину.</p>
|
||
<p data-reveal data-d="2" data-i18n="about_p1">Ника работает на стыке body art, живописи и фотографии. Её проекты — это исследование границы между телом, светом и материей: каждая работа существует один вечер и остаётся в кадре навсегда.</p>
|
||
<p data-reveal data-d="3" data-i18n="about_p2">За плечами — персональные выставки, международные фестивали body art, публикации и коллаборации с фотографами и модельными агентствами. Её узнают по чистой геометрии, тёплому золоту и внимательной работе со светом.</p>
|
||
<div class="facts" data-reveal data-d="3">
|
||
<div><div class="n">2013</div><small data-i18n="fact1">начало пути</small></div>
|
||
<div><div class="n">40+</div><small data-i18n="fact2">выставок</small></div>
|
||
<div><div class="n">15</div><small data-i18n="fact3">наград</small></div>
|
||
<div><div class="n">9</div><small data-i18n="fact4">стран</small></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===================== DIRECTIONS ===================== -->
|
||
<section class="sec" id="dirs">
|
||
<div class="wrap">
|
||
<div class="sec__head">
|
||
<div>
|
||
<span class="eyebrow" data-reveal data-i18n="dirs_eyebrow">Направления искусства</span>
|
||
<h2 class="sec__title" data-reveal data-d="1" data-i18n="dirs_title">Языки, на которых говорит Ника</h2>
|
||
</div>
|
||
<p class="sec__lead" data-reveal data-d="2" data-i18n="dirs_lead">Восемь направлений — от росписи по телу до масштабных инсталляций. Заказать любое можно в разделе «Услуги».</p>
|
||
</div>
|
||
<div class="dirs__grid">
|
||
<article class="dir big" data-reveal data-cursor>
|
||
<div class="dir__bg pa1"><picture><source srcset="assets/img/dir-bodyart.webp" type="image/webp" /><img src="assets/img/dir-bodyart.jpg" alt="Body Art — золотая роспись по коже плеча" width="1200" height="675" loading="lazy" decoding="async" /></picture></div>
|
||
<span class="k">01</span><h3 data-i18n="d1_t">Body Art</h3>
|
||
<p data-i18n="d1_p">Художественная роспись тела: от минималистичной графики до полного превращения фигуры в скульптуру света и цвета.</p> </article>
|
||
<article class="dir med" data-reveal data-d="1" data-cursor>
|
||
<div class="dir__bg pa3"><picture><source srcset="assets/img/dir-faceart.webp" type="image/webp" /><img src="assets/img/dir-faceart.jpg" alt="Face Art — графичная роспись лица золотом и графитом" width="1200" height="675" loading="lazy" decoding="async" /></picture></div>
|
||
<span class="k">02</span><h3 data-i18n="d2_t">Face Art</h3>
|
||
<p data-i18n="d2_p">Лицо как холст — образы для съёмок, сцены и подиума.</p> </article>
|
||
<article class="dir med" data-reveal data-d="1" data-cursor>
|
||
<div class="dir__bg pa7"><picture><source srcset="assets/img/dir-painting.webp" type="image/webp" /><img src="assets/img/dir-painting.jpg" alt="Живопись — абстрактный холст в золоте, охре и графите" width="1200" height="675" loading="lazy" decoding="async" /></picture></div>
|
||
<span class="k">03</span><h3 data-i18n="d3_t">Живопись</h3>
|
||
<p data-i18n="d3_p">Холст, акрил, смешанная техника. Крупные форматы и тёплая палитра.</p> </article>
|
||
<article class="dir sm" data-reveal data-cursor>
|
||
<div class="dir__bg pa5"><picture><source srcset="assets/img/dir-illustration.webp" type="image/webp" /><img src="assets/img/dir-illustration.jpg" alt="Иллюстрация — линейная графика с золотым акцентом на бумаге" width="1200" height="675" loading="lazy" decoding="async" /></picture></div>
|
||
<span class="k">04</span><h3 data-i18n="d4_t">Иллюстрация</h3>
|
||
<p data-i18n="d4_p">Авторская графика и цифровые серии.</p> </article>
|
||
<article class="dir sm" data-reveal data-d="1" data-cursor>
|
||
<div class="dir__bg pa2"><picture><source srcset="assets/img/dir-photography.webp" type="image/webp" /><img src="assets/img/dir-photography.jpg" alt="Фотография — художественная студийная съёмка со светом и камерой" width="1200" height="675" loading="lazy" decoding="async" /></picture></div>
|
||
<span class="k">05</span><h3 data-i18n="d5_t">Фотография</h3>
|
||
<p data-i18n="d5_p">Художественная съёмка работ и перформансов.</p> </article>
|
||
<article class="dir sm" data-reveal data-d="2" data-cursor>
|
||
<div class="dir__bg pa4"><picture><source srcset="assets/img/dir-projects.webp" type="image/webp" /><img src="assets/img/dir-projects.jpg" alt="Проекты — мудборд и материалы авторского художественного проекта" width="1200" height="675" loading="lazy" decoding="async" /></picture></div>
|
||
<span class="k">06</span><h3 data-i18n="d6_t">Проекты</h3>
|
||
<p data-i18n="d6_p">Авторские художественные проекты и коллаборации.</p> </article>
|
||
<article class="dir sm" data-reveal data-d="3" data-cursor>
|
||
<div class="dir__bg pa8"><picture><source srcset="assets/img/dir-installation.webp" type="image/webp" /><img src="assets/img/dir-installation.jpg" alt="Инсталляции — пространственная работа со светом в тёмном зале" width="1200" height="675" loading="lazy" decoding="async" /></picture></div>
|
||
<span class="k">07</span><h3 data-i18n="d7_t">Инсталляции</h3>
|
||
<p data-i18n="d7_p">Пространственные работы и свет.</p> </article>
|
||
<article class="dir big" data-reveal data-cursor>
|
||
<div class="dir__bg pa6"><picture><source srcset="assets/img/dir-collections.webp" type="image/webp" /><img src="assets/img/dir-collections.jpg" alt="Авторские коллекции — ряд обрамлённых работ в галерее" width="1200" height="675" loading="lazy" decoding="async" /></picture></div>
|
||
<span class="k">08</span><h3 data-i18n="d8_t">Авторские коллекции</h3>
|
||
<p data-i18n="d8_p">Лимитированные серии работ, доступные коллекционерам и для приобретения на аукционе.</p> </article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===================== FEATURED (real photos) ===================== -->
|
||
<section class="sec featured" id="featured">
|
||
<div class="wrap">
|
||
<div class="sec__head">
|
||
<div>
|
||
<span class="eyebrow" data-reveal data-i18n="feat_eyebrow">Пространство и айдентика</span>
|
||
<h2 class="sec__title" data-reveal data-d="1" data-i18n="feat_title">Атмосфера галереи</h2>
|
||
</div>
|
||
<p class="sec__lead" data-reveal data-d="2" data-i18n="feat_lead">Выставочные залы, свет и фирменный стиль Ники — визуальный язык, в котором живут работы. Нажмите на изображение, чтобы рассмотреть.</p>
|
||
</div>
|
||
<div class="gmas" id="gmas">
|
||
<figure class="gcard" data-reveal data-cursor tabindex="0" role="button"
|
||
data-full="assets/3.webp" data-fallback="3.png" data-cap="Выставочный зал" data-cape="Exhibition hall"
|
||
aria-label="Открыть изображение: выставочный зал галереи Ника">
|
||
<picture>
|
||
<source srcset="assets/3.webp" type="image/webp" />
|
||
<img src="3.png" alt="Выставочный зал галереи Ника со скульптурой и картинами в тёплом свете" width="1672" height="941" loading="lazy" decoding="async" />
|
||
</picture>
|
||
<figcaption class="gcard__ov"><span class="gcard__t" data-i18n="g3_t">Выставочный зал</span></figcaption>
|
||
</figure>
|
||
<figure class="gcard" data-reveal data-d="1" data-cursor tabindex="0" role="button"
|
||
data-full="assets/1.webp" data-fallback="1.png" data-cap="Фирменный знак" data-cape="Monogram"
|
||
aria-label="Открыть изображение: монограмма Ника">
|
||
<picture>
|
||
<source srcset="assets/1.webp" type="image/webp" />
|
||
<img src="1.png" alt="Монограмма Ника — золотой мазок в графитовой рамке" width="1254" height="1254" loading="lazy" decoding="async" />
|
||
</picture>
|
||
<figcaption class="gcard__ov"><span class="gcard__t" data-i18n="g1_t">Фирменный знак</span></figcaption>
|
||
</figure>
|
||
<figure class="gcard" data-reveal data-d="2" data-cursor tabindex="0" role="button"
|
||
data-full="assets/4.webp" data-fallback="4.png" data-cap="Ника · Галерея искусства" data-cape="Nika · Art gallery"
|
||
aria-label="Открыть изображение: логотип Ника — галерея искусства">
|
||
<picture>
|
||
<source srcset="assets/4.webp" type="image/webp" />
|
||
<img src="4.png" alt="Логотип «Ника — галерея искусства»" width="1254" height="1254" loading="lazy" decoding="async" />
|
||
</picture>
|
||
<figcaption class="gcard__ov"><span class="gcard__t" data-i18n="g4_t">Ника · Галерея искусства</span></figcaption>
|
||
</figure>
|
||
<figure class="gcard" data-reveal data-d="3" data-cursor tabindex="0" role="button"
|
||
data-full="assets/2.webp" data-fallback="2.png" data-cap="Уголок аукциона" data-cape="Auction corner"
|
||
aria-label="Открыть изображение: пространство аукциона галереи Ника">
|
||
<picture>
|
||
<source srcset="assets/2.webp" type="image/webp" />
|
||
<img src="2.png" alt="Пространство галереи Ника — аукционный молоток и картина в золотых тонах" width="1672" height="941" loading="lazy" decoding="async" />
|
||
</picture>
|
||
<figcaption class="gcard__ov"><span class="gcard__t" data-i18n="g2_t">Уголок аукциона</span></figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===================== GALLERY ===================== -->
|
||
<section class="sec about" id="gallery">
|
||
<div class="wrap">
|
||
<div class="sec__head">
|
||
<div>
|
||
<span class="eyebrow" data-reveal data-i18n="gal_eyebrow">Галерея</span>
|
||
<h2 class="sec__title" data-reveal data-d="1" data-i18n="gal_title">Избранные работы</h2>
|
||
</div>
|
||
<p class="sec__lead" data-reveal data-d="2" data-i18n="gal_lead">Открытая часть коллекции. Полный архив и эксклюзивные серии — в закрытом клубе.</p>
|
||
</div>
|
||
<div class="filters" data-reveal id="filters">
|
||
<button class="on" data-f="all" data-i18n="f_all">Все</button>
|
||
<button data-f="body" data-i18n="f_body">Body Art</button>
|
||
<button data-f="face" data-i18n="f_face">Face Art</button>
|
||
<button data-f="paint" data-i18n="f_paint">Живопись</button>
|
||
<button data-f="photo" data-i18n="f_photo">Фотография</button>
|
||
<button data-f="install" data-i18n="f_install">Инсталляции</button>
|
||
</div>
|
||
<div class="masonry" id="masonry"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===================== SERVICES (commercial) ===================== -->
|
||
<section class="sec" id="services">
|
||
<div class="wrap">
|
||
<div class="sec__head">
|
||
<div>
|
||
<span class="eyebrow" data-reveal data-i18n="serv_eyebrow">Сотрудничество</span>
|
||
<h2 class="sec__title" data-reveal data-d="1" data-i18n="serv_title">Что можно заказать</h2>
|
||
</div>
|
||
<p class="sec__lead" data-reveal data-d="2" data-i18n="serv_lead">Живые форматы работы с Никой — от росписи по телу до покупки картины. Выберите, что нужно, и оставьте заявку: ответим лично.</p>
|
||
</div>
|
||
<div class="serv__grid">
|
||
<article class="serv" data-reveal>
|
||
<span class="serv__k">01</span>
|
||
<h3 class="serv__t" data-i18n="serv1_t">Боди-арт / фейс-арт</h3>
|
||
<p class="serv__p" data-i18n="serv1_p">Художественная роспись тела и лица для съёмок, сцены, показа или события.</p>
|
||
<button type="button" class="btn btn--dark serv__cta" data-req data-service="bodyart" data-i18n="serv_order">Оставить заявку</button>
|
||
</article>
|
||
<article class="serv" data-reveal data-d="1">
|
||
<span class="serv__k">02</span>
|
||
<h3 class="serv__t" data-i18n="serv2_t">Художественная съёмка</h3>
|
||
<p class="serv__p" data-i18n="serv2_p">Фотосессия работ и перформансов — от идеи до готового кадра.</p>
|
||
<button type="button" class="btn btn--dark serv__cta" data-req data-service="shoot" data-i18n="serv_order">Оставить заявку</button>
|
||
</article>
|
||
<article class="serv" data-reveal data-d="2">
|
||
<span class="serv__k">03</span>
|
||
<h3 class="serv__t" data-i18n="serv3_t">Покупка картины</h3>
|
||
<p class="serv__p" data-i18n="serv3_p">Приобретение работы из коллекции или заказ авторской вещи под интерьер.</p>
|
||
<button type="button" class="btn btn--dark serv__cta" data-req data-service="buy" data-i18n="serv_order">Оставить заявку</button>
|
||
</article>
|
||
<article class="serv" data-reveal>
|
||
<span class="serv__k">04</span>
|
||
<h3 class="serv__t" data-i18n="serv4_t">Приглашение на мероприятие</h3>
|
||
<p class="serv__p" data-i18n="serv4_p">Живое выступление или арт-перформанс на вашем событии, показе, открытии.</p>
|
||
<button type="button" class="btn btn--dark serv__cta" data-req data-service="event" data-i18n="serv_order">Оставить заявку</button>
|
||
</article>
|
||
<article class="serv" data-reveal data-d="1">
|
||
<span class="serv__k">05</span>
|
||
<h3 class="serv__t" data-i18n="serv5_t">Коллаборация</h3>
|
||
<p class="serv__p" data-i18n="serv5_p">Совместный проект с брендом, фотографом, агентством или площадкой.</p>
|
||
<button type="button" class="btn btn--dark serv__cta" data-req data-service="collab" data-i18n="serv_order">Оставить заявку</button>
|
||
</article>
|
||
<article class="serv serv--accent" data-reveal data-d="2">
|
||
<span class="serv__k">06</span>
|
||
<h3 class="serv__t" data-i18n="serv6_t">Закрытый клуб</h3>
|
||
<p class="serv__p" data-i18n="serv6_p">Ранний доступ к сериям, закрытые показы и аукционы — по заявке.</p>
|
||
<button type="button" class="btn btn--gold serv__cta" data-req data-service="club" data-i18n="serv6_cta">Хочу в клуб</button>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===================== CLUB ===================== -->
|
||
<section class="sec" id="club">
|
||
<div class="wrap">
|
||
<div class="club" data-reveal>
|
||
<div class="club__glow"></div>
|
||
<div class="club__in">
|
||
<span class="eyebrow" data-i18n="club_eyebrow">Закрытый клуб</span>
|
||
<h2 data-i18n="club_title">Эксклюзивный доступ по приглашению</h2>
|
||
<p class="club__lead" data-i18n="club_lead">Закрытая галерея, ранний доступ к новым сериям, приглашения на закрытые показы и аукционы. Доступ открывается после одобрения — с уровнем под вашу роль.</p>
|
||
<div class="tiers">
|
||
<div class="tier" data-cursor><div class="k">VIP</div><p data-i18n="tier_vip">Полный доступ ко всем сериям и закрытым показам.</p></div>
|
||
<div class="tier" data-cursor><div class="k" data-i18n="tier_col_k">Коллекционеры</div><p data-i18n="tier_col">Приобретение работ, сертификаты, участие в аукционах.</p></div>
|
||
<div class="tier" data-cursor><div class="k" data-i18n="tier_press_k">Пресса и партнёры</div><p data-i18n="tier_press">Материалы для публикаций, портфолио, аккредитация.</p></div>
|
||
</div>
|
||
<div class="club__cta">
|
||
<button type="button" class="btn btn--gold" data-cursor data-req data-service="club" data-i18n="club_cta1">Хочу в закрытый клуб</button>
|
||
<button type="button" class="btn btn--ghost" style="color:#fff;border-color:rgba(255,255,255,.3)" data-cursor data-req data-service="general" data-i18n="club_cta2">Задать вопрос</button>
|
||
</div>
|
||
<p class="club__note" data-i18n="club_note">Вход в личный кабинет по Яндекс ID появится после запуска платформы. Пока — заявка, ответим лично.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===================== FOOTER ===================== -->
|
||
<footer class="foot" id="contacts">
|
||
<div class="wrap">
|
||
<div class="foot__grid">
|
||
<div data-reveal>
|
||
<div class="foot__brand">
|
||
<picture>
|
||
<source srcset="assets/wordmark.webp" type="image/webp" />
|
||
<img class="foot__mark" src="assets/wordmark.png" alt="Ника — галерея искусства" width="1030" height="982" loading="lazy" decoding="async" />
|
||
</picture>
|
||
</div>
|
||
<p class="foot__sub" data-i18n="foot_sub">Цифровая художественная галерея. Body art, живопись, фотография, современное искусство.</p>
|
||
</div>
|
||
<div data-reveal data-d="1">
|
||
<h3 class="foot__h" data-i18n="foot_nav">Навигация</h3>
|
||
<a href="#about" data-i18n="nav_about">О художнике</a>
|
||
<a href="#services" data-i18n="nav_services">Услуги</a>
|
||
<a href="#gallery" data-i18n="nav_gallery">Галерея</a>
|
||
<a href="#club" data-i18n="nav_club">Клуб</a>
|
||
</div>
|
||
<div data-reveal data-d="2">
|
||
<h3 class="foot__h" data-i18n="foot_soc">Соцсети</h3>
|
||
<p class="foot__soon" data-i18n="foot_soon">Скоро — ссылки уточняются</p>
|
||
<ul class="foot__soc" aria-label="Соцсети (скоро)">
|
||
<li>Instagram</li><li>ВКонтакте</li><li>Telegram</li><li>Behance</li>
|
||
</ul>
|
||
</div>
|
||
<div data-reveal data-d="3">
|
||
<h3 class="foot__h" data-i18n="foot_contact">Контакты</h3>
|
||
<a href="mailto:[EMAIL/Telegram Ники]" class="foot__mail">[EMAIL/Telegram Ники]</a>
|
||
<button type="button" class="foot__linkbtn" data-req data-service="shoot" data-i18n="foot_book">Записаться на съёмку</button>
|
||
<a href="#club" data-i18n="foot_join">Вступить в клуб</a>
|
||
</div>
|
||
</div>
|
||
<div class="foot__bar">
|
||
<span>© <span id="year"></span> NIKA ART. <span data-i18n="foot_rights">Все права защищены.</span></span>
|
||
<span data-i18n="foot_made">Современная художественная галерея · NIKA ART</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ===================== REQUEST MODAL ===================== -->
|
||
<div class="modal" id="reqModal" role="dialog" aria-modal="true" aria-labelledby="reqTitle" hidden>
|
||
<div class="modal__card">
|
||
<button type="button" class="modal__x" id="reqClose" aria-label="Закрыть форму">✕</button>
|
||
<span class="eyebrow modal__eyebrow" data-i18n="req_eyebrow">Заявка</span>
|
||
<h2 class="modal__title" id="reqTitle" data-i18n="req_title">Оставить заявку</h2>
|
||
<p class="modal__lead" data-i18n="req_lead">Заполните — заявка откроется письмом (или в Telegram), ответим лично.</p>
|
||
<form id="reqForm" novalidate>
|
||
<label class="field">
|
||
<span data-i18n="req_f_name">Как к вам обращаться</span>
|
||
<input type="text" name="name" autocomplete="name" required />
|
||
</label>
|
||
<label class="field">
|
||
<span data-i18n="req_f_contact">Ваш контакт (телефон / Telegram / email)</span>
|
||
<input type="text" name="contact" required />
|
||
</label>
|
||
<label class="field">
|
||
<span data-i18n="req_f_service">Что нужно</span>
|
||
<select name="service" id="reqService">
|
||
<option value="bodyart" data-i18n="req_s_bodyart">Боди-арт / фейс-арт</option>
|
||
<option value="shoot" data-i18n="req_s_shoot">Художественная съёмка</option>
|
||
<option value="buy" data-i18n="req_s_buy">Покупка картины</option>
|
||
<option value="event" data-i18n="req_s_event">Приглашение на мероприятие</option>
|
||
<option value="collab" data-i18n="req_s_collab">Коллаборация</option>
|
||
<option value="club" data-i18n="req_s_club">Вступление в закрытый клуб</option>
|
||
<option value="general" data-i18n="req_s_general">Другое / вопрос</option>
|
||
</select>
|
||
</label>
|
||
<label class="field">
|
||
<span data-i18n="req_f_msg">Сообщение</span>
|
||
<textarea name="message" rows="3"></textarea>
|
||
</label>
|
||
<div class="modal__actions">
|
||
<button type="submit" class="btn btn--dark" data-i18n="req_send">Отправить письмом</button>
|
||
<button type="button" class="btn btn--gold" id="reqTg" data-i18n="req_send_tg">В Telegram</button>
|
||
</div>
|
||
<p class="modal__todo">
|
||
<!-- TODO ВЛАДЕЛЕЦ: заменить плейсхолдеры на реальные реквизиты Ники -->
|
||
<span data-i18n="req_todo">Заявка уходит на</span> <code>[EMAIL/Telegram Ники]</code>.
|
||
<span data-i18n="req_todo2">Реквизиты уточняются.</span>
|
||
</p>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== LIGHTBOX ===================== -->
|
||
<div class="lb" id="lb"></div>
|
||
|
||
<!-- featured photo lightbox -->
|
||
<div class="lb2" id="lb2" role="dialog" aria-modal="true" aria-label="Просмотр изображения">
|
||
<button class="lb2__x" id="lb2x" type="button" aria-label="Закрыть">✕</button>
|
||
<button class="lb2__nav prev" id="lb2p" type="button" aria-label="Предыдущее изображение">←</button>
|
||
<button class="lb2__nav next" id="lb2n" type="button" aria-label="Следующее изображение">→</button>
|
||
<figure class="lb2__fig">
|
||
<img class="lb2__img" id="lb2img" alt="" />
|
||
<figcaption class="lb2__cap" id="lb2cap"></figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
<style>
|
||
.lb{position:fixed;inset:0;z-index:200;background:rgba(12,12,11,.94);backdrop-filter:blur(8px);
|
||
display:flex;align-items:center;justify-content:center;padding:5vh 5vw;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
|
||
.lb.open{opacity:1;visibility:visible}
|
||
.lb__fig{max-width:min(1000px,92vw);width:100%;transform:scale(.96);transition:transform .6s var(--ease)}
|
||
.lb.open .lb__fig{transform:none}
|
||
.lb__img{width:100%;border-radius:var(--r-m);box-shadow:var(--shadow-l);aspect-ratio:16/9;object-fit:cover;background:#efe9dd;display:block}
|
||
.lb__cap{display:flex;justify-content:space-between;color:#fff;margin-top:18px;align-items:baseline;flex-wrap:wrap;gap:8px}
|
||
.lb__cap h3{font-family:var(--f-display);font-weight:500;font-size:22px;margin:0}
|
||
.lb__cap small{color:var(--gold);letter-spacing:.08em;text-transform:uppercase;font-size:12px}
|
||
.lb__x{position:absolute;top:24px;right:28px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
|
||
background:none;color:#fff;font-size:22px;transition:.35s var(--ease)}
|
||
.lb__x:hover{background:#fff;color:var(--ink);transform:rotate(90deg)}
|
||
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
|
||
border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.05);color:#fff;font-size:20px;transition:.35s}
|
||
.lb__nav:hover{background:#fff;color:var(--ink)}
|
||
.lb__nav.prev{left:24px}.lb__nav.next{right:24px}
|
||
@media(max-width:560px){.lb__nav{display:none}}
|
||
|
||
/* ---- brand marks (nav + footer) ---- */
|
||
.logo{display:inline-flex;align-items:center;gap:12px}
|
||
.logo__mark{height:38px;width:auto;border-radius:8px;display:block;
|
||
box-shadow:0 2px 10px rgba(17,17,17,.14);background:#efe9dd;transition:box-shadow .4s var(--ease)}
|
||
.nav:not(.solid) .logo__mark{box-shadow:0 6px 18px rgba(0,0,0,.30)}
|
||
.foot__brand{max-width:210px}
|
||
.foot__mark{width:100%;height:auto;display:block;border-radius:var(--r-s)}
|
||
|
||
/* ---- featured real-photo gallery ---- */
|
||
.gmas{columns:2;column-gap:clamp(14px,1.5vw,22px)}
|
||
.gcard{break-inside:avoid;margin:0 0 clamp(14px,1.5vw,22px);position:relative;overflow:hidden;
|
||
border-radius:var(--r-m);cursor:pointer;box-shadow:var(--shadow-s);background:#efe9dd;
|
||
transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
|
||
.gcard img{width:100%;height:auto;display:block;transition:transform 1.1s var(--ease)}
|
||
.gcard:hover{box-shadow:var(--shadow-l);transform:translateY(-4px)}
|
||
.gcard:hover img{transform:scale(1.05)}
|
||
.gcard:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
|
||
.gcard::after{content:"";position:absolute;inset:0;border:1px solid var(--line-soft);
|
||
border-radius:var(--r-m);pointer-events:none}
|
||
.gcard__ov{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;
|
||
padding:20px;color:#fff;background:linear-gradient(180deg,transparent 45%,rgba(10,10,10,.72));
|
||
opacity:0;transition:opacity .5s var(--ease)}
|
||
.gcard:hover .gcard__ov,.gcard:focus-visible .gcard__ov{opacity:1}
|
||
.gcard__t{font-family:var(--f-display);font-weight:500;font-size:18px;letter-spacing:-.01em}
|
||
@media (max-width:720px){.gmas{columns:1}}
|
||
|
||
/* ---- featured lightbox ---- */
|
||
.lb2{position:fixed;inset:0;z-index:210;background:rgba(12,12,11,.94);backdrop-filter:blur(8px);
|
||
-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;
|
||
padding:6vh 5vw;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
|
||
.lb2.open{opacity:1;visibility:visible}
|
||
.lb2__fig{max-width:min(1080px,92vw);margin:0;transform:scale(.96);transition:transform .6s var(--ease)}
|
||
.lb2.open .lb2__fig{transform:none}
|
||
.lb2__img{width:100%;height:auto;max-height:82vh;object-fit:contain;border-radius:var(--r-m);
|
||
box-shadow:var(--shadow-l);background:#efe9dd}
|
||
.lb2__cap{color:#fff;margin-top:16px;font-family:var(--f-display);font-weight:500;font-size:18px;
|
||
letter-spacing:-.01em;text-align:center}
|
||
.lb2__x{position:absolute;top:24px;right:28px;width:48px;height:48px;border-radius:50%;
|
||
border:1px solid rgba(255,255,255,.3);background:none;color:#fff;font-size:22px;transition:.35s var(--ease)}
|
||
.lb2__x:hover,.lb2__x:focus-visible{background:#fff;color:var(--ink);transform:rotate(90deg);outline:none}
|
||
.lb2__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
|
||
border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.05);color:#fff;font-size:20px;transition:.35s}
|
||
.lb2__nav:hover,.lb2__nav:focus-visible{background:#fff;color:var(--ink);outline:none}
|
||
.lb2__nav.prev{left:24px}.lb2__nav.next{right:24px}
|
||
@media(max-width:560px){.lb2__nav{display:none}}
|
||
</style>
|
||
|
||
<script>
|
||
/* =====================================================================
|
||
NIKA ART — prototype interactions (vanilla, offline-safe)
|
||
===================================================================== */
|
||
(function(){
|
||
'use strict';
|
||
const $ = (s,c)=> (c||document).querySelector(s);
|
||
const $$ = (s,c)=> Array.from((c||document).querySelectorAll(s));
|
||
const rm = matchMedia('(prefers-reduced-motion:reduce)').matches;
|
||
|
||
document.getElementById('year').textContent = new Date().getFullYear();
|
||
|
||
/* ---------- GALLERY DATA (replace img gradients with real photos) ---- */
|
||
const CATS = ['pa1','pa3','pa2','pa7','pa5','pa4','pa8','pa6'];
|
||
const works = [
|
||
{t:'Gold Lines', te:'Gold Lines', c:'body', cat:'Body Art', cate:'Body Art', y:2024, h:420, img:'g01'},
|
||
{t:'Луна на коже', te:'Moon on Skin', c:'body', cat:'Body Art', cate:'Body Art', y:2023, h:300, img:'g02'},
|
||
{t:'Портрет №7', te:'Portrait №7', c:'face', cat:'Face Art', cate:'Face Art', y:2024, h:360, img:'g03'},
|
||
{t:'Тёплый свет', te:'Warm Light', c:'photo', cat:'Фотография', cate:'Photography', y:2022, h:480, img:'g04'},
|
||
{t:'Графит', te:'Graphite', c:'paint', cat:'Живопись', cate:'Painting', y:2023, h:340, img:'g05'},
|
||
{t:'Инсталляция «Поток»', te:'Flow', c:'install',cat:'Инсталляция', cate:'Installation', y:2024, h:300, img:'g06'},
|
||
{t:'Медь и тень', te:'Copper & Shadow', c:'body', cat:'Body Art', cate:'Body Art', y:2023, h:420, img:'g07'},
|
||
{t:'Маска', te:'Mask', c:'face', cat:'Face Art', cate:'Face Art', y:2022, h:300, img:'g08'},
|
||
{t:'Абстракция III', te:'Abstraction III', c:'paint', cat:'Живопись', cate:'Painting', y:2024, h:380, img:'g09'},
|
||
{t:'Ночная съёмка', te:'Night Shoot', c:'photo', cat:'Фотография', cate:'Photography', y:2023, h:340, img:'g10'},
|
||
{t:'Зеркало', te:'Mirror', c:'install',cat:'Инсталляция', cate:'Installation', y:2024, h:440, img:'g11'},
|
||
{t:'Золотое сечение', te:'Golden Ratio', c:'body', cat:'Body Art', cate:'Body Art', y:2022, h:320, img:'g12'}
|
||
];
|
||
const mas = $('#masonry');
|
||
works.forEach((w,i)=>{
|
||
const el = document.createElement('figure');
|
||
el.className='tile'; el.dataset.cat=w.c; el.dataset.i=i; el.setAttribute('data-cursor','');
|
||
el.tabIndex = 0; el.setAttribute('role','button');
|
||
el.setAttribute('aria-label','Открыть работу: '+w.t+' ('+w.cat+', '+w.y+')');
|
||
el.innerHTML =
|
||
'<div class="img '+CATS[i%CATS.length]+'" style="height:'+w.h+'px">'+
|
||
'<picture><source srcset="assets/img/'+w.img+'.webp" type="image/webp" />'+
|
||
'<img src="assets/img/'+w.img+'.jpg" alt="'+w.t+' — '+w.cat+'" loading="lazy" decoding="async" /></picture>'+
|
||
'</div>'+
|
||
'<div class="tile__ov"><h3 data-tt="'+i+'">'+w.t+'</h3><small><span data-ct="'+i+'">'+w.cat+'</span> · '+w.y+'</small></div>';
|
||
mas.appendChild(el);
|
||
});
|
||
|
||
/* ---------- FILTERS -------------------------------------------------- */
|
||
$('#filters').addEventListener('click', e=>{
|
||
const b = e.target.closest('button'); if(!b) return;
|
||
$$('#filters button').forEach(x=>x.classList.remove('on')); b.classList.add('on');
|
||
const f = b.dataset.f;
|
||
$$('.tile').forEach(t=>{
|
||
const show = f==='all' || t.dataset.cat===f;
|
||
t.classList.toggle('hiddn', !show);
|
||
});
|
||
});
|
||
|
||
/* ---------- LIGHTBOX ------------------------------------------------- */
|
||
const lb = $('#lb'); let cur = 0, lbOpener = null;
|
||
lb.setAttribute('role','dialog');
|
||
lb.setAttribute('aria-modal','true');
|
||
lb.setAttribute('aria-label','Просмотр работы');
|
||
function openLb(i){
|
||
if(!lb.classList.contains('open')) lbOpener = document.activeElement;
|
||
cur = i; const w = works[i];
|
||
lb.innerHTML =
|
||
'<button type="button" class="lb__x" aria-label="Закрыть">✕</button>'+
|
||
'<button type="button" class="lb__nav prev" aria-label="Предыдущая работа">←</button>'+
|
||
'<button type="button" class="lb__nav next" aria-label="Следующая работа">→</button>'+
|
||
'<figure class="lb__fig"><img class="lb__img" src="assets/img/'+w.img+'.webp" alt="'+(LANG==='en'?w.te:w.t)+'" onerror="this.onerror=null;this.src=this.src.replace(/\\.webp$/,\'.jpg\')" />'+
|
||
'<figcaption class="lb__cap"><h3>'+(LANG==='en'?w.te:w.t)+'</h3><small>'+(LANG==='en'?w.cate:w.cat)+' · '+w.y+'</small></figcaption></figure>';
|
||
lb.classList.add('open'); document.body.style.overflow='hidden';
|
||
const x = lb.querySelector('.lb__x'); if(x) x.focus();
|
||
}
|
||
function closeLb(){
|
||
lb.classList.remove('open'); document.body.style.overflow='';
|
||
lb.innerHTML='';
|
||
if(lbOpener && lbOpener.focus) lbOpener.focus();
|
||
}
|
||
function step(d){ let n=(cur+d+works.length)%works.length; openLb(n); }
|
||
mas.addEventListener('click', e=>{ const t=e.target.closest('.tile'); if(t) openLb(+t.dataset.i); });
|
||
mas.addEventListener('keydown', e=>{
|
||
const t=e.target.closest('.tile'); if(!t) return;
|
||
if(e.key==='Enter'||e.key===' '){ e.preventDefault(); openLb(+t.dataset.i); }
|
||
});
|
||
lb.addEventListener('click', e=>{
|
||
if(e.target.classList.contains('lb__x')||e.target===lb) closeLb();
|
||
if(e.target.classList.contains('prev')) step(-1);
|
||
if(e.target.classList.contains('next')) step(1);
|
||
});
|
||
document.addEventListener('keydown', e=>{
|
||
if(!lb.classList.contains('open')) return;
|
||
if(e.key==='Escape'){ closeLb(); return; }
|
||
if(e.key==='ArrowLeft') step(-1);
|
||
if(e.key==='ArrowRight') step(1);
|
||
if(e.key==='Tab'){ // keep focus inside the dialog
|
||
const f=$$('button',lb); if(!f.length) return;
|
||
const first=f[0], last=f[f.length-1];
|
||
if(e.shiftKey && document.activeElement===first){ e.preventDefault(); last.focus(); }
|
||
else if(!e.shiftKey && document.activeElement===last){ e.preventDefault(); first.focus(); }
|
||
else if(!lb.contains(document.activeElement)){ e.preventDefault(); first.focus(); }
|
||
}
|
||
});
|
||
|
||
/* ---------- REVEAL --------------------------------------------------- */
|
||
if('IntersectionObserver' in window && !rm){
|
||
const io = new IntersectionObserver((ents)=>{
|
||
ents.forEach(en=>{ if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target);} });
|
||
},{threshold:.12, rootMargin:'0px 0px -8% 0px'});
|
||
$$('[data-reveal]').forEach(el=>io.observe(el));
|
||
} else { $$('[data-reveal]').forEach(el=>el.classList.add('in')); }
|
||
|
||
/* ---------- NAV state on scroll ------------------------------------- */
|
||
const nav = $('#nav'); let lastY = 0;
|
||
function onScroll(){
|
||
const y = window.scrollY;
|
||
nav.classList.toggle('solid', y>40);
|
||
nav.classList.toggle('hide', y>lastY && y>500);
|
||
lastY = y;
|
||
if(!rm) $$('[data-parallax]').forEach(el=>{
|
||
const r = el.getBoundingClientRect(); const off = (r.top+r.height/2 - innerHeight/2);
|
||
el.style.transform = 'translateY('+(off*-parseFloat(el.dataset.parallax))+'px)';
|
||
});
|
||
}
|
||
addEventListener('scroll', onScroll, {passive:true}); onScroll();
|
||
|
||
/* ---------- CUSTOM CURSOR ------------------------------------------- */
|
||
if(matchMedia('(hover:hover)').matches && !rm){
|
||
const dot = $('.cursor'), ring = $('.cursor-ring');
|
||
let mx=innerWidth/2,my=innerHeight/2,rx=mx,ry=my;
|
||
addEventListener('mousemove',e=>{ mx=e.clientX;my=e.clientY;
|
||
dot.style.transform='translate('+mx+'px,'+my+'px) translate(-50%,-50%)'; });
|
||
(function loop(){ rx+=(mx-rx)*.16; ry+=(my-ry)*.16;
|
||
ring.style.transform='translate('+rx+'px,'+ry+'px) translate(-50%,-50%)'; requestAnimationFrame(loop); })();
|
||
document.addEventListener('mouseover',e=>{
|
||
if(e.target.closest('[data-cursor],a,button')) ring.classList.add('hover'); });
|
||
document.addEventListener('mouseout',e=>{
|
||
if(e.target.closest('[data-cursor],a,button')) ring.classList.remove('hover'); });
|
||
}
|
||
|
||
/* ---------- BURGER (real mobile dropdown menu) --------------------- */
|
||
(function(){
|
||
const burger=$('#burger'), links=$('#navLinks'); if(!burger||!links) return;
|
||
function setOpen(on){
|
||
nav.classList.toggle('menu-open', on);
|
||
burger.setAttribute('aria-expanded', on?'true':'false');
|
||
burger.setAttribute('aria-label', on ? (LANG==='en'?'Close menu':'Закрыть меню')
|
||
: (LANG==='en'?'Open menu':'Открыть меню'));
|
||
}
|
||
burger.addEventListener('click',()=> setOpen(!nav.classList.contains('menu-open')) );
|
||
// close when a nav link (not the request CTA) is chosen
|
||
links.addEventListener('click', e=>{ if(e.target.closest('a,.nav__menucta')) setOpen(false); });
|
||
// close on Escape
|
||
document.addEventListener('keydown', e=>{
|
||
if(e.key==='Escape' && nav.classList.contains('menu-open')) setOpen(false);
|
||
});
|
||
// close when leaving mobile breakpoint
|
||
const mq=matchMedia('(max-width:1000px)');
|
||
const onMq=ev=>{ if(!ev.matches) setOpen(false); };
|
||
if(mq.addEventListener) mq.addEventListener('change',onMq); else if(mq.addListener) mq.addListener(onMq);
|
||
})();
|
||
|
||
/* ---------- I18N ---------------------------------------------------- */
|
||
let LANG = 'ru';
|
||
const EN = {
|
||
nav_about:'About', nav_dirs:'Practice', nav_services:'Services', nav_gallery:'Gallery', nav_club:'Club', nav_cta:'Leave a request',
|
||
hero_eyebrow:'NIKA · contemporary artist', hero_l1:'Art that', hero_l2:'lives on', hero_l3:'the skin',
|
||
hero_tag:'Body art, face art, painting and fine-art photography. The body as canvas, light as paint, the moment as gallery.',
|
||
hero_cta1:'View gallery', hero_cta2:'Leave a request', hero_m1:'years of practice', hero_m2:'exhibitions', hero_m3:'works',
|
||
scroll:'Scroll',
|
||
about_badge:'Nika · artist', about_eyebrow:'About the artist', about_lead:'I turn the body and space into a living painting.',
|
||
about_p1:'Nika works where body art, painting and photography meet. Her projects explore the boundary between body, light and matter — each piece exists for one evening and stays in the frame forever.',
|
||
about_p2:'Solo shows, international body-art festivals, publications and collaborations with photographers and modeling agencies. She is recognised by her clean geometry, warm gold and attentive work with light.',
|
||
fact1:'the beginning', fact2:'exhibitions', fact3:'awards', fact4:'countries',
|
||
dirs_eyebrow:'Fields of art', dirs_title:'The languages Nika speaks',
|
||
dirs_lead:'Eight directions — from body painting to large-scale installations. Order any of them in the Services section.',
|
||
d1_t:'Body Art', d1_p:'Fine-art body painting: from minimal graphics to a full transformation of the figure into a sculpture of light and colour.',
|
||
d2_t:'Face Art', d2_p:'The face as canvas — looks for shoots, stage and runway.',
|
||
d3_t:'Painting', d3_p:'Canvas, acrylic, mixed media. Large formats and a warm palette.',
|
||
d4_t:'Illustration', d4_p:'Original graphics and digital series.',
|
||
d5_t:'Photography', d5_p:'Fine-art documentation of works and performances.',
|
||
d6_t:'Projects', d6_p:'Original art projects and collaborations.',
|
||
d7_t:'Installations', d7_p:'Spatial works and light.',
|
||
d8_t:'Signature collections', d8_p:'Limited series available to collectors and at auction.',
|
||
more:'Explore',
|
||
gal_eyebrow:'Gallery', gal_title:'Selected works', gal_lead:'The open part of the collection. Full archive and exclusive series live in the private club.',
|
||
f_all:'All', f_body:'Body Art', f_face:'Face Art', f_paint:'Painting', f_photo:'Photography', f_install:'Installations',
|
||
serv_eyebrow:'Work with Nika', serv_title:'What you can order',
|
||
serv_lead:'Real ways to work with Nika — from body painting to buying a canvas. Pick what you need and leave a request: we reply personally.',
|
||
serv1_t:'Body / face art', serv1_p:'Fine-art body and face painting for shoots, stage, runway or an event.',
|
||
serv2_t:'Fine-art photography', serv2_p:'A photo session of works and performances — from idea to final frame.',
|
||
serv3_t:'Buy a painting', serv3_p:'Acquire a piece from the collection or commission an original for your space.',
|
||
serv4_t:'Invite to an event', serv4_p:'A live performance or art act at your event, show or opening.',
|
||
serv5_t:'Collaboration', serv5_p:'A joint project with a brand, photographer, agency or venue.',
|
||
serv6_t:'Private club', serv6_p:'Early access to series, closed shows and auctions — by request.',
|
||
serv_order:'Leave a request', serv6_cta:'Join the club',
|
||
club_eyebrow:'Private club', club_title:'Exclusive access by invitation',
|
||
club_lead:'A private gallery, early access to new series, invitations to closed shows and auctions. Access opens after approval — at a tier matched to your role.',
|
||
tier_vip:'Full access to all series and closed shows.',
|
||
tier_col_k:'Collectors', tier_col:'Acquiring works, certificates, auction participation.',
|
||
tier_press_k:'Press & partners', tier_press:'Media assets, portfolio, accreditation.',
|
||
club_cta1:'Join the private club', club_cta2:'Ask a question',
|
||
club_note:'Personal-account sign-in via Yandex ID will arrive once the platform launches. For now — a request, and we reply personally.',
|
||
foot_sub:'A digital art gallery. Body art, painting, photography, contemporary art.',
|
||
foot_nav:'Navigation', foot_soc:'Social', foot_contact:'Contact', foot_soon:'Coming soon — links to be confirmed',
|
||
foot_book:'Book a shoot', foot_join:'Join the club', foot_rights:'All rights reserved.', foot_made:'Contemporary art gallery · NIKA ART',
|
||
feat_eyebrow:'Space & identity', feat_title:'The gallery mood',
|
||
feat_lead:'Exhibition halls, light and Nika’s visual identity — the language the works live in. Tap an image to explore.',
|
||
g3_t:'Exhibition hall', g1_t:'Monogram', g4_t:'Nika · Art gallery', g2_t:'Auction corner',
|
||
req_eyebrow:'Request', req_title:'Leave a request',
|
||
req_lead:'Fill this in — the request opens as an email (or in Telegram) and we reply personally.',
|
||
req_f_name:'Your name', req_f_contact:'Your contact (phone / Telegram / email)',
|
||
req_f_service:'What you need', req_f_msg:'Message',
|
||
req_s_bodyart:'Body / face art', req_s_shoot:'Fine-art photography', req_s_buy:'Buy a painting',
|
||
req_s_event:'Invite to an event', req_s_collab:'Collaboration', req_s_club:'Join the private club', req_s_general:'Other / question',
|
||
req_send:'Send by email', req_send_tg:'Via Telegram',
|
||
req_todo:'Requests go to', req_todo2:'Details to be confirmed.'
|
||
};
|
||
const RU = {}; // captured from DOM on load
|
||
$$('[data-i18n]').forEach(el=>{ RU[el.dataset.i18n] = el.innerHTML; });
|
||
function setLang(l){
|
||
LANG = l;
|
||
const dict = l==='en' ? EN : RU;
|
||
$$('[data-i18n]').forEach(el=>{ const k=el.dataset.i18n; if(dict[k]!=null) el.innerHTML = dict[k]; });
|
||
document.documentElement.lang = l;
|
||
// gallery captions
|
||
$$('[data-tt]').forEach(el=>{ const w=works[+el.dataset.tt]; el.textContent = l==='en'?w.te:w.t; });
|
||
$$('[data-ct]').forEach(el=>{ const w=works[+el.dataset.ct]; el.textContent = l==='en'?w.cate:w.cat; });
|
||
$$('#lang button').forEach(b=>{ const on=b.dataset.lang===l; b.classList.toggle('on',on); b.setAttribute('aria-pressed',on?'true':'false'); });
|
||
}
|
||
$('#lang').addEventListener('click',e=>{ const b=e.target.closest('button'); if(b) setLang(b.dataset.lang); });
|
||
|
||
/* ---------- FEATURED PHOTO LIGHTBOX -------------------------------- */
|
||
(function(){
|
||
const cards = $$('#gmas .gcard'); if(!cards.length) return;
|
||
const box=$('#lb2'), img=$('#lb2img'), cap=$('#lb2cap'),
|
||
bx=$('#lb2x'), bp=$('#lb2p'), bn=$('#lb2n');
|
||
let idx=0, opener=null;
|
||
function render(i){
|
||
idx=(i+cards.length)%cards.length;
|
||
const c=cards[idx], en=document.documentElement.lang==='en';
|
||
img.onerror=function(){ if(c.dataset.fallback && img.src.indexOf(c.dataset.fallback)<0){ img.onerror=null; img.src=c.dataset.fallback; } };
|
||
img.src=c.dataset.full;
|
||
img.alt=(c.querySelector('img')||{}).alt||'';
|
||
cap.textContent=en?(c.dataset.cape||''):(c.dataset.cap||'');
|
||
}
|
||
function open(i){ opener=document.activeElement; render(i);
|
||
box.classList.add('open'); document.body.style.overflow='hidden'; bx.focus(); }
|
||
function close(){ box.classList.remove('open'); document.body.style.overflow='';
|
||
if(opener&&opener.focus) opener.focus(); }
|
||
cards.forEach((c,i)=>{
|
||
c.addEventListener('click',()=>open(i));
|
||
c.addEventListener('keydown',e=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); open(i);} });
|
||
});
|
||
bx.addEventListener('click',close);
|
||
bp.addEventListener('click',()=>render(idx-1));
|
||
bn.addEventListener('click',()=>render(idx+1));
|
||
box.addEventListener('click',e=>{ if(e.target===box) close(); });
|
||
document.addEventListener('keydown',e=>{
|
||
if(!box.classList.contains('open')) return;
|
||
if(e.key==='Escape') close();
|
||
else if(e.key==='ArrowLeft') render(idx-1);
|
||
else if(e.key==='ArrowRight') render(idx+1);
|
||
else if(e.key==='Tab'){ // simple focus trap among controls
|
||
const f=[bx,bp,bn]; const first=f[0], last=f[f.length-1];
|
||
if(e.shiftKey&&document.activeElement===first){ e.preventDefault(); last.focus(); }
|
||
else if(!e.shiftKey&&document.activeElement===last){ e.preventDefault(); first.focus(); }
|
||
}
|
||
});
|
||
})();
|
||
|
||
/* ---------- REQUEST FORM MODAL (mailto/Telegram, no backend) -------- */
|
||
(function(){
|
||
/* TODO ВЛАДЕЛЕЦ: заменить плейсхолдеры на реальные реквизиты Ники.
|
||
email — почта для заявок; telegram — username без @ (если задан,
|
||
кнопка «В Telegram» ведёт в t.me/<username>, иначе — падение на почту). */
|
||
const CONTACT = { email:'[EMAIL/Telegram Ники]', telegram:'' };
|
||
const modal=$('#reqModal'), closeBtn=$('#reqClose'),
|
||
form=$('#reqForm'), sel=$('#reqService'), tgBtn=$('#reqTg');
|
||
if(!modal||!form) return;
|
||
let opener=null;
|
||
function focusables(){ return $$('button,input,select,textarea,a[href]',modal).filter(el=>!el.disabled); }
|
||
function open(service){
|
||
opener=document.activeElement;
|
||
if(service){ const o=$$('option',sel).find(x=>x.value===service); if(o) sel.value=service; }
|
||
modal.hidden=false;
|
||
requestAnimationFrame(()=>modal.classList.add('open'));
|
||
document.body.style.overflow='hidden';
|
||
const first=form.querySelector('input[name=name]'); if(first) first.focus();
|
||
}
|
||
function close(){
|
||
modal.classList.remove('open'); document.body.style.overflow='';
|
||
setTimeout(()=>{ modal.hidden=true; },320);
|
||
if(opener&&opener.focus) opener.focus();
|
||
}
|
||
function build(){
|
||
const d=new FormData(form);
|
||
const label=(sel.options[sel.selectedIndex]||{}).text||'';
|
||
const en=document.documentElement.lang==='en';
|
||
const lines = en
|
||
? ['Service: '+label,'Name: '+(d.get('name')||''),'Contact: '+(d.get('contact')||''),'Message: '+(d.get('message')||''),'','Sent from 1nika.ru']
|
||
: ['Услуга: '+label,'Имя: '+(d.get('name')||''),'Контакт: '+(d.get('contact')||''),'Сообщение: '+(d.get('message')||''),'','Отправлено с 1nika.ru'];
|
||
return { subj:(en?'Request — ':'Заявка — ')+label, body:lines.join('\n') };
|
||
}
|
||
function validate(){
|
||
const req=[form.querySelector('[name=name]'),form.querySelector('[name=contact]')];
|
||
for(const f of req){
|
||
if(f && !f.value.trim()){
|
||
f.focus(); f.style.borderColor='#c0392b';
|
||
f.addEventListener('input',function h(){ f.style.borderColor=''; f.removeEventListener('input',h); });
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
}
|
||
function sendMail(){
|
||
if(!validate()) return;
|
||
const {subj,body}=build();
|
||
window.location.href='mailto:'+CONTACT.email+'?subject='+encodeURIComponent(subj)+'&body='+encodeURIComponent(body);
|
||
}
|
||
/* delegated open — любой элемент с [data-req] */
|
||
document.addEventListener('click', e=>{
|
||
const t=e.target.closest('[data-req]'); if(!t) return;
|
||
e.preventDefault(); open(t.getAttribute('data-service')||'general');
|
||
});
|
||
closeBtn.addEventListener('click', close);
|
||
modal.addEventListener('click', e=>{ if(e.target===modal) close(); });
|
||
form.addEventListener('submit', e=>{ e.preventDefault(); sendMail(); });
|
||
tgBtn.addEventListener('click', ()=>{
|
||
if(CONTACT.telegram) window.open('https://t.me/'+CONTACT.telegram.replace(/^@/,''),'_blank','noopener');
|
||
else sendMail(); /* нет TG-реквизита → падение на почту */
|
||
});
|
||
document.addEventListener('keydown', e=>{
|
||
if(modal.hidden||!modal.classList.contains('open')) return;
|
||
if(e.key==='Escape'){ close(); return; }
|
||
if(e.key==='Tab'){
|
||
const f=focusables(); if(!f.length) return;
|
||
const first=f[0], last=f[f.length-1];
|
||
if(e.shiftKey && document.activeElement===first){ e.preventDefault(); last.focus(); }
|
||
else if(!e.shiftKey && document.activeElement===last){ e.preventDefault(); first.focus(); }
|
||
else if(!modal.contains(document.activeElement)){ e.preventDefault(); first.focus(); }
|
||
}
|
||
});
|
||
})();
|
||
})();
|
||
</script>
|
||
<script>
|
||
/* FAILSAFE: гарантированно показать контент, если reveal/IntersectionObserver не отработал
|
||
(медленная/заблокированная сеть, старый браузер). Быстрым клиентам анимация не мешает. */
|
||
(function(){
|
||
function revealAll(){try{document.querySelectorAll('[data-reveal]').forEach(function(e){e.classList.add('in')});}catch(_){}}
|
||
// сразу показать то, что в первом экране
|
||
function revealAbove(){try{var h=innerHeight||800;document.querySelectorAll('[data-reveal]').forEach(function(e){if(e.getBoundingClientRect().top<h)e.classList.add('in')});}catch(_){}}
|
||
if(document.readyState!=='loading')revealAbove();else document.addEventListener('DOMContentLoaded',revealAbove);
|
||
addEventListener('load',function(){setTimeout(revealAll,400);});
|
||
setTimeout(revealAll,2500); // жёсткий предохранитель
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|