/* ========================================================= NIKA BALLET STUDIO. Editorial site system (drkassir-grade) Structure is theme-agnostic. All colour/type via tokens. 10 palettes live in the [data-theme="..."] blocks below. ========================================================= */ /* ---------- TOKEN CONTRACT (defaults = Morning) ---------- */ :root{ --paper:#F4F6F8; --paper-2:#E9EEF3; --paper-3:#FBFCFD; --ink:#2C4059; --body:#465A6E; --muted:#7E8FA0; --line:rgba(44,64,89,.16); --line-soft:rgba(44,64,89,.10); --accent:#B8902F; --accent-2:#E7C766; --accent-ink:#1B2838; /* --accent-text = the same gold, darkened for text at body size and below. The display gold fails WCAG 1.4.3 (4.5:1) at 10 to 16px on every light paper tone, so small gold text uses this token while fills, borders and display numerals keep --accent. */ --accent-text:#7E5C1C; --dark:#23364B; --dark-2:#1A2A3C; --dark-fg:#EEF2F6; --dark-muted:#9FB0C0; --on-photo:#FFFFFF; --on-photo-muted:rgba(255,255,255,.78); --hero-overlay:linear-gradient(to bottom,rgba(26,38,54,.42)0%,rgba(26,38,54,.12)32%,rgba(26,38,54,.16)60%,rgba(20,30,44,.66)100%); --hero-filter:saturate(1.02) contrast(1.02); --img-filter:none; --img-tint:transparent; --img-tint-blend:normal; --gold-sheen:linear-gradient(110deg,var(--accent-2)0%,var(--accent)45%,#8C6B30 100%); --serif:'Cormorant Garamond',Georgia,serif; --sans:'Montserrat',system-ui,-apple-system,sans-serif; --cream:#F7F2E2; /* just below the logo's lightest cream so mix-blend-mode:darken clamps the logo's whole cream bg to exactly this (no square); navy ink stays */ --sp:clamp(76px,11vh,150px); --maxw:1280px; --ease-editorial:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.4,0,.2,1); --shadow-sm:0 1px 2px rgba(30,41,59,.06),0 4px 12px rgba(30,41,59,.06); --shadow-lg:0 24px 60px -30px rgba(30,41,59,.30),0 8px 24px -16px rgba(30,41,59,.18); } /* ---------- 1. MORNING (light, airy, blue-gray + champagne) ---------- */ [data-theme="morning"]{ --paper:#F6F2EA; --paper-2:#ECE6D9; --paper-3:#FBF8F1; --ink:#2C4059; --body:#4A5567; --muted:#8A8576; --accent:#B8902F; --accent-2:#E7C766; --accent-ink:#1B2838; --dark:#23364B; --dark-2:#1A2A3C; --serif:'Cormorant Garamond',Georgia,serif; --img-filter:saturate(1.03); } /* ---------- 2. SMOKY (mid blue-gray, warm honey gold) ---------- */ [data-theme="smoky"]{ --paper:#EAEEF1; --paper-2:#DBE3E9; --paper-3:#F4F7F9; --ink:#33485C; --body:#4C6072; --muted:#556270; --line:rgba(51,72,92,.16); --line-soft:rgba(51,72,92,.10); --accent:#B0832F; --accent-2:#E0BC6E; --accent-ink:#2A2017; /* small-text gold. #B0832F is 2.64:1 on paper-2; #7E5C1C is 5.24 / 4.71 / 5.68 on paper / paper-2 / paper-3 */ --accent-text:#7E5C1C; --dark:#33424E; --dark-2:#27333D; --dark-fg:#F3EFE6; --dark-muted:#B2AB99; --serif:'Playfair Display',Georgia,serif; --img-filter:saturate(1.04) contrast(1.02); } /* ---------- 3. PEARL (warm beige-gray, antique matte gold) ---------- */ [data-theme="pearl"]{ --paper:#F5F2EA; --paper-2:#EAE5D9; --paper-3:#FBF9F3; --ink:#475360; --body:#5C6772; --muted:#8E8C82; --line:rgba(71,83,96,.15); --line-soft:rgba(71,83,96,.09); --accent:#9F7E40; --accent-2:#CDAE6C; --accent-ink:#2B2418; --dark:#454F58; --dark-2:#363E46; --dark-fg:#F4F0E7; --dark-muted:#ABA697; --serif:'Cardo',Georgia,serif; --img-filter:saturate(.96) sepia(.06) contrast(1.01); } /* ---------- 4. ATELIER NOIR (dark editorial, blue-gray + gold) ---------- */ [data-theme="noir"]{ --paper:#15191E; --paper-2:#1C2127; --paper-3:#11151A; --ink:#ECEFF3; --body:#B7C2CD; --muted:#7E8B98; --line:rgba(236,239,243,.16); --line-soft:rgba(236,239,243,.08); --accent:#CBA85C; --accent-2:#E7CE8E; --accent-ink:#15191E; --accent-text:var(--accent); /* dark theme: the display gold is already 7.17:1+ on these papers */ --dark:#0D1116; --dark-2:#0A0D11; --dark-fg:#ECEFF3; --dark-muted:#8F9CA9; --hero-overlay:linear-gradient(to bottom,rgba(8,11,15,.5)0%,rgba(8,11,15,.28)40%,rgba(8,11,15,.72)100%); --serif:'Fraunces',Georgia,serif; --img-filter:grayscale(.35) contrast(1.08) brightness(.94); --hero-filter:grayscale(.55) contrast(1.08) brightness(.82); } /* ---------- 5. PORCELAIN (very light, minimal, pale gold) ---------- */ [data-theme="porcelain"]{ --paper:#FBFCFD; --paper-2:#F0F3F6; --paper-3:#FFFFFF; --ink:#3F5366; --body:#5B6E7E; --muted:#94A2AE; --line:rgba(63,83,102,.13); --line-soft:rgba(63,83,102,.07); --accent:#BBA164; --accent-2:#DAC692; --accent-ink:#2A3540; --dark:#2E3D4A; --dark-2:#243038; --dark-fg:#F3F6F8; --dark-muted:#A6B2BC; --serif:'Marcellus',Georgia,serif; --img-filter:saturate(.9) brightness(1.04); } /* ---------- 6. BOLSHOI (deep navy blue-gray, rich gold, prestige) ---------- */ [data-theme="bolshoi"]{ --paper:#F1F4F7; --paper-2:#E2E8EF; --paper-3:#F9FBFC; --ink:#1E3047; --body:#3C4F64; --muted:#76879A; --line:rgba(30,48,71,.18); --line-soft:rgba(30,48,71,.10); --accent:#B0851F; --accent-2:#DCB45A; --accent-ink:#13243A; --dark:#16263A; --dark-2:#0F1C2C; --dark-fg:#EAF0F6; --dark-muted:#94A6B8; --serif:'Cormorant Garamond',Georgia,serif; --img-filter:saturate(1.02) contrast(1.03); } /* ---------- 7. MONOCHROME GOLD (pure Kassir: white/black/gold) ---------- */ [data-theme="mono"]{ --paper:#FFFFFF; --paper-2:#F6F6F6; --paper-3:#FFFFFF; --ink:#121212; --body:#3A3A3A; --muted:#8F8F8F; --line:rgba(0,0,0,.14); --line-soft:rgba(0,0,0,.08); --accent:#B79355; --accent-2:#D8B878; --accent-ink:#FFFFFF; --dark:#101010; --dark-2:#000000; --dark-fg:#F4F4F4; --dark-muted:#A0A0A0; --hero-overlay:linear-gradient(to bottom,rgba(0,0,0,.42)0%,rgba(0,0,0,.18)40%,rgba(0,0,0,.66)100%); --serif:'Fraunces',Georgia,serif; --img-filter:grayscale(1) contrast(1.06); --hero-filter:grayscale(1) contrast(1.05) brightness(.9); } /* ---------- 8. CHAMPAGNE (warm ivory, soft blue-gray, bright gold) ---------- */ [data-theme="champagne"]{ --paper:#FBF7EF; --paper-2:#F2EBDD; --paper-3:#FFFCF6; --ink:#3D4E5E; --body:#566778; --muted:#8C8A7E; --line:rgba(61,78,94,.15); --line-soft:rgba(61,78,94,.09); --accent:#C39B34; --accent-2:#EBC972; --accent-ink:#2C2415; --dark:#3A4856; --dark-2:#2C3742; --dark-fg:#F6F1E7; --dark-muted:#ADA693; --serif:'Cormorant Garamond',Georgia,serif; --img-filter:saturate(1.05) sepia(.05) brightness(1.03); } /* ---------- 9. SLATE (cool steel, modern editorial, pale champagne) ---------- */ [data-theme="slate"]{ --paper:#EEF1F4; --paper-2:#E0E5EA; --paper-3:#F7F9FA; --ink:#28333D; --body:#46535F; --muted:#7C8893; --line:rgba(40,51,61,.16); --line-soft:rgba(40,51,61,.09); --accent:#A99A6A; --accent-2:#CCC097; --accent-ink:#222B33; --dark:#222C35; --dark-2:#1A222A; --dark-fg:#EEF1F4; --dark-muted:#99A4AE; --serif:'Spectral',Georgia,serif; --hero-filter:saturate(.82) contrast(1.04); --img-filter:saturate(.86) contrast(1.04) brightness(1.01); } /* ---------- 10. AQUAMARINE (nod to the original L7 aqua + gold) ---------- */ [data-theme="aqua"]{ --paper:#EFF5F4; --paper-2:#DEEAE8; --paper-3:#F8FBFA; --ink:#234A4D; --body:#3C5E60; --muted:#739392; --line:rgba(35,74,77,.16); --line-soft:rgba(35,74,77,.09); --accent:#BC9433; --accent-2:#E3C56E; --accent-ink:#11302F; --dark:#1C4042; --dark-2:#143032; --dark-fg:#EAF4F2; --dark-muted:#8FB0AE; --serif:'Cormorant Garamond',Georgia,serif; --img-filter:saturate(1.02) hue-rotate(-4deg); } /* ========================================================= RESET + BASE ========================================================= */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--sans);background:var(--paper);color:var(--body); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden; transition:background .6s ease,color .6s ease} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--accent);color:var(--accent-ink)} /* Focus. One ring for every interactive element, form controls included (WCAG 2.4.7 / 1.4.11). Gold outline for visibility on dark chrome, dark halo for visibility on light paper. */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible, summary:focus-visible,[tabindex]:focus-visible, .card:focus-visible,.btn:focus-visible,.lnk:focus-visible,.burger:focus-visible{ outline:2px solid var(--accent-2);outline-offset:2px;box-shadow:0 0 0 4px rgba(20,26,32,.6);border-radius:1px} /* Text for screen readers and search engines, off screen for everyone else. Not display:none, which would remove it from the accessibility tree too. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* Skip link. First tab stop on every page, invisible until focused. */ .skip{position:absolute;left:16px;top:-100px;z-index:200;background:var(--dark); color:var(--dark-fg);font-family:var(--sans);font-weight:600;font-size:12px; letter-spacing:.16em;text-transform:uppercase;padding:14px 22px; transition:top .2s ease} .skip:focus{top:16px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,72px)} .eyebrow{font-family:var(--sans);font-weight:600;font-size:clamp(10px,.78vw,12px); letter-spacing:.26em;text-transform:uppercase;color:var(--accent-text)} .serif{font-family:var(--serif)} /* Inline link inside body copy. Underlined, because colour alone is not an accessible affordance inside a paragraph. */ .lnk-inline{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:3px;transition:color .3s} .lnk-inline:hover{color:var(--accent-text)} .h-sec{font-family:var(--serif);font-weight:500;line-height:.98;letter-spacing:.01em; font-size:clamp(2.4rem,6vw,5.2rem);color:var(--ink);text-transform:uppercase} .h-sub{font-family:var(--serif);font-weight:500;line-height:1.04; font-size:clamp(2rem,4.4vw,3.6rem);color:var(--ink)} .lead{font-size:clamp(15px,1.15vw,17px);line-height:1.8;color:var(--body);max-width:46ch} .rule{height:1px;width:64px;background:var(--gold-sheen);border:0} /* ---------- BUTTONS ---------- */ .btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-weight:600; font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:17px 34px;border-radius:0; border:1px solid transparent;cursor:pointer;transition:.35s ease;white-space:nowrap} .btn .arr{font-size:14px;transition:transform .35s ease} .btn:hover .arr{transform:translateX(5px)} .btn-solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .btn-solid:hover{background:transparent;color:var(--ink);border-color:var(--ink)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent-text)} .btn-onphoto{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)} .btn-onphoto:hover{background:#fff;color:#111;border-color:#fff} /* ---------- PHOTO TREATMENT ---------- */ .ph{position:relative;overflow:hidden} .ph img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter);transition:transform 1.4s var(--ease-editorial)} .ph::after{content:"";position:absolute;inset:0;background:var(--img-tint);mix-blend-mode:var(--img-tint-blend);pointer-events:none} .ph.zoom:hover img{transform:scale(1.05)} /* ========================================================= NAV ========================================================= */ /* solid cream header so the L7 logo (cream bg) blends with no square */ .nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center; justify-content:space-between;gap:24px;padding:10px clamp(20px,5vw,56px); background:transparent; transition:padding .45s var(--ease-soft),background .45s var(--ease-soft),backdrop-filter .45s var(--ease-soft),box-shadow .45s var(--ease-soft)} .nav.scrolled{padding:4px clamp(20px,5vw,56px);background:rgba(39,51,61,.82);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(224,188,110,.22),0 14px 34px -24px rgba(8,14,22,.55)} .brand{display:flex;align-items:center;line-height:0} .brand-logo{height:70px;width:auto;display:block;transition:height .4s ease;filter:drop-shadow(0 3px 16px rgba(8,14,22,.6))} .nav.scrolled .brand-logo{height:54px} .menu{display:flex;align-items:center;gap:clamp(18px,2vw,32px)} .menu a.lnk{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(8,14,22,.55);position:relative;padding:6px 0;transition:color .3s} .menu a.lnk::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px; background:var(--accent);transition:width .35s ease} .menu a.lnk:hover{color:var(--accent-2)} .menu a.lnk:hover::after{width:100%} .slash{width:1px;height:24px;background:rgba(255,255,255,.32);transform:rotate(20deg)} .nav .btn-nav{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent); font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase; padding:13px 22px;transition:.35s} .nav .btn-nav:hover{background:transparent;color:#fff;border-color:#fff} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:6px;position:relative;z-index:65} .burger span{width:24px;height:1.5px;background:#fff;transition:transform .3s var(--ease-soft),opacity .2s ease;display:block} .nav--solid{background:rgba(39,51,61,.82);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(224,188,110,.22)} .nav--solid .menu a.lnk,.nav--solid .burger span{color:#fff} /* ========================================================= HERO ========================================================= */ .hero{position:relative;height:100vh;height:100svh;min-height:660px;display:flex;align-items:center;justify-content:center;overflow:hidden} .hero__media{position:absolute;inset:0;z-index:0} .hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;filter:var(--hero-filter)} .hero__media img{animation:kenburns 26s ease-in-out infinite alternate} @keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.13)}} .hero__scrim{position:absolute;inset:0;z-index:1;background:var(--hero-overlay)} .hero__grain{position:absolute;inset:0;z-index:2;opacity:.05;mix-blend-mode:overlay;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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")} /* The hero holds two things now, the logo and one button (Dasha, 2026-08-04: "убрать полностью все слова"). A two-element block is much shorter than the old logo + tagline + button + reassurance stack, so plain centring would have dropped the mark LOWER than she saw it. margin-bottom on the flex item lifts the block off the vertical centre, which is where a lockup wants to sit anyway, and it scales with the viewport instead of a fixed nudge. */ .hero__inner{position:relative;z-index:5;text-align:center;color:#fff;padding:0 22px;max-width:1000px; /* Measured 2026-08-04 after the audit: the first lift was not enough. A margin-bottom on a centred flex item moves the content up by HALF the margin, while dropping the tagline and the reassurance line shrank the block by 141px and centring gave 70px of that straight back. Net result was the logo sitting 12px LOWER than in her screenshot, the opposite of "лого выше немного". Doubled, and re-measured at 390, 1280, 1440, 1920. */ margin-bottom:clamp(150px,26vh,300px)} .hero__inner::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:142%;height:152%;z-index:-1;pointer-events:none;filter:blur(10px); /* Deepened 2026-08-03 when the L7 logo replaced the typographic word: the delicate ellipse-and-script mark needs more separation from the bright centre of the stage video than the heavy white letters did. */ background:radial-gradient(ellipse 58% 54% at 50% 50%,rgba(10,15,22,.62)0%,rgba(10,15,22,.30)46%,rgba(10,15,22,0)72%)} .hero .eyebrow{color:var(--accent-2);opacity:0;animation:rise .9s .2s ease forwards} .hero__word{font-family:var(--serif);font-weight:500;font-size:clamp(4.4rem,15vw,12.5rem);line-height:.9; letter-spacing:.14em;padding-left:.14em;margin:14px 0 0;text-shadow:0 6px 60px rgba(10,16,24,.5); opacity:0;animation:rise 1.1s .34s ease forwards} /* The client's L7 logo in place of the typographic word ("Do logo", 2026-08-03). Same entrance beat the word had; drop-shadow separates it from the busy video. */ .hero__logo{display:block;width:clamp(250px,32vw,430px);height:auto;margin:6px auto 0; filter:drop-shadow(0 12px 44px rgba(8,12,18,.55)); opacity:0;animation:rise 1.1s .34s ease forwards} .hero__lockup{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:12px; opacity:0;animation:rise 1s .52s ease forwards} .hero__lockup .ln{height:1px;width:clamp(34px,8vw,118px);background:var(--gold-sheen)} .hero__lockup .lb{font-family:var(--sans);font-weight:600;font-size:clamp(10px,1vw,13px); letter-spacing:.5em;text-transform:uppercase;padding-left:.5em} .hero__est{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.4em; color:rgba(255,255,255,.86);margin-top:18px;opacity:0;animation:rise 1s .66s ease forwards} /* The button is the last beat of the entrance now that the tagline between the logo and it is gone, so it comes in a little sooner and closer. */ .hero__cta{margin-top:30px;opacity:0;animation:rise 1s .82s ease forwards} /* Dasha, 2026-08-04 14:58: "я бы убрала book по середине, но оставила два лого". Done, but only where it is genuinely a duplicate. Measured on the live site: the nav button is visible at 1024 and 1440 and NOT at 390 or 768, because under 1000px it sits inside the burger overlay. Drop the hero button on a phone as well and the first screen has no visible call to action at all. So it goes exactly where she saw it double, and stays where it is the only one. Same 1000px breakpoint the rest of the layout already uses. */ @media(min-width:1000px){.hero .hero__cta{display:none}} .scrollcue{position:absolute;z-index:5;left:50%;bottom:30px;transform:translateX(-50%);display:flex; flex-direction:column;align-items:center;gap:9px;opacity:0;animation:rise 1s 1.3s ease forwards} .scrollcue .tk{width:1px;height:44px;background:rgba(255,255,255,.3);position:relative;overflow:hidden} .scrollcue .tk::after{content:"";position:absolute;top:-44px;left:0;width:1px;height:44px;background:var(--accent-2);animation:drop 2.4s ease-in-out infinite} .scrollcue span{font-family:var(--sans);font-size:8.5px;letter-spacing:.36em;text-transform:uppercase;color:rgba(255,255,255,.66)} @keyframes drop{0%{top:-44px}60%{top:44px}100%{top:44px}} @keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} /* ========================================================= STATEMENT + WATERMARK ========================================================= */ .statement{position:relative;text-align:center;padding:var(--sp) 0;overflow:hidden;background:var(--paper)} .watermark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--serif); font-weight:500;font-size:clamp(7rem,26vw,24rem);letter-spacing:.1em;line-height:1;white-space:nowrap; color:transparent;-webkit-text-stroke:1px var(--line);z-index:0;pointer-events:none;user-select:none} .statement__in{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:0 22px} .statement .h-sub{margin:18px 0 0} /* Wider measure than the 46ch default: the client's own paragraph (2026-08-04) is three times the length of the line it replaced, and at 46ch it set as a narrow ten-line column under a two-line display heading. */ .statement .lead{margin:22px auto 0;max-width:58ch} /* real L7 logo presented as a cream seal-plate (theme-independent) */ .logo-plate{display:inline-block;background:#F4EFE1;padding:14px;border:1px solid rgba(31,40,32,.08); box-shadow:0 34px 80px -38px rgba(15,25,38,.45);position:relative} .logo-plate::after{content:"";position:absolute;inset:9px;border:1px solid rgba(40,55,75,.16);pointer-events:none} .logo-plate img{display:block;width:clamp(230px,26vw,310px);height:auto} .statement .logo-plate{margin-bottom:34px} .foot .logo-plate{padding:10px;box-shadow:0 18px 44px -26px rgba(15,25,38,.4)} .foot .logo-plate::after{inset:6px} .foot .logo-plate img{width:150px} /* ========================================================= SPLIT (overlap composition: text / photo / list) ========================================================= */ .split{background:var(--paper-2);padding:var(--sp) 0;position:relative} .split__grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:0;align-items:center} /* Two columns where the third was removed (the /about facts list, Dasha 2026-08-04 "весь блок"). Text and photograph, nothing collapsing into a gap where the list used to be. */ .split__grid--two{grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,70px)} .split__text{padding-right:clamp(16px,3vw,48px)} .split__text .h-sec{margin:16px 0 22px} .split__photo{position:relative;z-index:2;margin:0 -6%;aspect-ratio:3/4;box-shadow:0 40px 90px -40px rgba(15,25,38,.45)} /* A 3:2 group photograph in the portrait frame loses the dancers at both ends, so where the photograph is a wide one the frame matches it (Dasha, 2026-08-04). */ /* A 3:2 frame is half the height of the 3:4 one, so it needs a little more width to hold the middle of the composition against the tall list column. */ .split__photo--wide{aspect-ratio:3/2;margin:0 -10%} .split__list{padding-left:clamp(20px,4vw,60px)} .flist{list-style:none} .flist li{border-top:1px solid var(--line-soft)} .flist li:last-child{border-bottom:1px solid var(--line-soft)} .flist a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px; font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,2.15rem);color:var(--ink);font-weight:500; transition:.4s ease;position:relative} .flist a .ix{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--muted);transition:.4s} .flist a::before{content:"";position:absolute;left:-18px;top:50%;width:0;height:1px;background:var(--accent);transition:width .4s} .flist a:hover{color:var(--accent-text);padding-left:20px} .flist a:hover::before{width:12px} .flist a:hover .ix{color:var(--accent-text)} /* ========================================================= EDITORIAL FEATURE (full-bleed photo + overlay copy) ========================================================= */ .feature{position:relative;min-height:84vh;display:flex;align-items:center;overflow:hidden} .feature .ph{position:absolute;inset:0;z-index:0} .feature .ph img{height:100%} .feature__scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(10,15,22,.74)0%,rgba(10,15,22,.42)42%,rgba(10,15,22,.08)100%)} .feature__in{position:relative;z-index:3;color:#fff;max-width:560px;padding:60px 0} .feature .eyebrow{color:var(--accent-2)} .feature h1,.feature h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.04;margin:16px 0 20px} .feature p{font-size:16px;line-height:1.8;color:rgba(255,255,255,.86);max-width:44ch;margin-bottom:30px} /* ========================================================= PROGRAM CARD GRID (asymmetric, photo + serif label) ========================================================= */ .cards{background:var(--paper);padding:var(--sp) 0} .cards__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:46px;flex-wrap:wrap} .cards__grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:230px;gap:16px} .card{position:relative;overflow:hidden;display:flex;align-items:flex-end} .card.c-tall{grid-row:span 2}.card.c-wide{grid-column:span 3}.card.c-3{grid-column:span 3}.card.c-2{grid-column:span 2}.card.c-4{grid-column:span 4} .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-filter);transition:transform 1.3s var(--ease-editorial)} .card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,15,22,.7)0%,rgba(10,15,22,.05)55%);transition:.4s} .card:hover img{transform:scale(1.06)} .card__label{position:relative;z-index:2;padding:24px;color:#fff;width:100%} .card__label .nm{font-family:var(--serif);font-size:clamp(1.4rem,2vw,2rem);font-weight:500;line-height:1.05;display:block} .card__label .mt{font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-top:8px;display:block} /* ========================================================= FACULTY / PRESTIGE ========================================================= */ .prestige{background:var(--dark);color:var(--dark-fg);padding:var(--sp) 0} .prestige__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,90px);align-items:center} .prestige .ph{aspect-ratio:4/5;box-shadow:0 40px 90px -40px rgba(0,0,0,.6)} .prestige .eyebrow{color:var(--accent-2)} .prestige h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4vw,3.4rem);line-height:1.08;color:var(--dark-fg);margin:16px 0 22px} .prestige p{font-size:16px;line-height:1.85;color:var(--dark-muted);max-width:46ch;margin-bottom:18px} .prestige .sig{font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--accent-2);margin-top:6px} /* ========================================================= STAGE ========================================================= */ .stage{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden} .stage .ph{position:absolute;inset:0;z-index:0} .stage .ph img{height:100%} .stage__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(8,10,16,.82)0%,rgba(8,10,16,.2)60%,rgba(8,10,16,.4)100%)} .stage__in{position:relative;z-index:3;color:#fff;padding-bottom:clamp(50px,9vh,110px);max-width:620px} .stage .eyebrow{color:var(--accent-2)} .stage h1,.stage h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.06;margin:16px 0 18px} .stage p{font-size:16px;line-height:1.8;color:rgba(255,255,255,.84);max-width:42ch;margin-bottom:28px} /* ---- video parity with .ph img (real hero + stage reels) ---- */ .ph video{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)} /* ---- FACULTY team grid ---- */ .faculty{background:var(--dark-2);color:var(--dark-fg);padding:var(--sp) 0} .faculty__head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:clamp(34px,5vw,64px)} .faculty .eyebrow{color:var(--accent-2)} .faculty h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4vw,3.4rem);line-height:1.06;color:var(--dark-fg);margin-top:14px} .faculty__lead{font-size:15px;line-height:1.8;color:var(--dark-muted);max-width:34ch;padding-bottom:6px} .faculty__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px);max-width:1000px;margin:0 auto;align-items:start} .fac{display:block} .fac__ph{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:5px;background:#1a222a;box-shadow:0 30px 60px -40px rgba(0,0,0,.7)} .fac__ph img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) contrast(1.02);transition:transform 1.2s var(--ease-editorial)} .fac:hover .fac__ph img{transform:scale(1.05)} .fac__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,16,22,.55),transparent 52%)} .fac__name{font-family:var(--serif);font-size:1.14rem;font-weight:500;color:var(--dark-fg);margin-top:15px;line-height:1.22} .fac__role{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);margin-top:7px} /* Client-written bios live inside a native disclosure, so they work without JS and keep the grid compact until a parent actually asks for the detail. */ .fac__bio{margin-top:10px} .fac__bio summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dark-muted);transition:color .3s} .fac__bio summary::-webkit-details-marker{display:none} .fac__bio summary::after{content:"+";font-size:13px;line-height:1;color:var(--accent-2)} .fac__bio[open] summary::after{content:"\2212"} .fac__bio summary:hover,.fac__bio summary:focus-visible{color:var(--dark-fg)} .fac__bio p{font-family:var(--sans);font-size:13px;line-height:1.75;color:var(--dark-muted);margin:10px 0 0} @media(max-width:640px){.faculty__grid{grid-template-columns:repeat(2,1fr);gap:16px}.faculty__head{flex-direction:column;align-items:flex-start;gap:8px}.faculty__lead{max-width:none}} /* ---- ABOUT story (client-written copy) ---- */ .story{background:var(--paper);padding:var(--sp) 0} .story__in{max-width:72ch;margin:0 auto} .story__lede{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.6;color:var(--ink);margin:22px 0 8px} .story__body p{font-size:clamp(15px,1.1vw,16.5px);line-height:1.85;color:var(--body);margin-top:1.25em} /* ---- STAGE performance video ---- */ .stage-video{background:var(--paper-2);padding:var(--sp) 0} .stage-video__frame{max-width:1000px;margin:0 auto;border-radius:6px;overflow:hidden;background:#0c1016;box-shadow:0 40px 80px -50px rgba(0,0,0,.6)} /* "Это видео можно пустить на весь экран?" (Dasha, 2026-08-04). Full-bleed: it breaks out of .wrap to the viewport edges, so a 1920x1080 reel is not sitting in a 1000px box on a wide screen. No radius or shadow at that width, both read as a frame around something that no longer has a frame. */ /* Dasha asked for this twice: 2026-08-04 10:51 "это видео можно пустить на весь экран?" and again 2026-08-05 11:14 "Это хочется на весь экран", "Не частично". The first pass capped the width at 1920px, the file's own width, to avoid upscaling a reel she had already called soft. That cap IS the "частично" she is seeing: on a monitor wider than 1920 the clip sat centred with white bands down both sides. Measured on the live page at 1470px, where the frame is already exactly viewport-wide with no gap and no overflow, so the cap is the only mechanism left that could produce bands on her screen. Her instruction wins over our sharpness caution: full bleed at every width. Above 1920 the browser upscales, and the fix for that is a wider master, not a white band. */ .stage-video__frame--full{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;box-shadow:none} .stage-video__frame video{display:block;width:100%;height:auto} /* ========================================================= TESTIMONIALS ========================================================= */ .quotes{background:var(--paper-2);padding:var(--sp) 0} .quotes__head{text-align:center;margin-bottom:54px} .quotes__row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .qcard{background:var(--paper-3);border:1px solid var(--line-soft);padding:38px 34px;display:flex;flex-direction:column;gap:22px} .qcard .qm{font-family:var(--serif);font-size:3.4rem;line-height:.6;color:var(--accent);height:24px} .qcard p{font-size:15px;line-height:1.75;color:var(--body);flex:1} .qcard .by{display:flex;align-items:center;gap:12px} .qcard .by .dot{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent-text);font-size:13px} .qcard .by .who{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)} .qcard .by .src{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--muted)} .qcard .cred{font-family:var(--serif);font-weight:500;font-size:3.1rem;line-height:1;color:var(--accent)} .qcard h3{font-family:var(--serif);font-weight:500;font-size:1.45rem;line-height:1.1;color:var(--ink);margin:10px 0 2px} .quotes__cta{text-align:center;margin-top:46px} /* ========================================================= INSTAGRAM BAND ========================================================= */ .social{position:relative;background:var(--dark-2);color:#fff;padding:var(--sp) 0;text-align:center;overflow:hidden} .social .watermark{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10)} .social__in{position:relative;z-index:2} .social .handle{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.4vw,2rem);color:#fff} .social .handle b{color:var(--accent-2);font-style:normal;font-weight:500} .social .eyebrow{color:var(--accent-2);margin-bottom:14px;display:block} /* ========================================================= FINAL CTA ========================================================= */ .finale{background:var(--paper);padding:var(--sp) 0;text-align:center} .finale .h-sec{margin:16px 0 14px} .finale .lead{margin:0 auto 34px;text-align:center} /* ========================================================= FOOTER ========================================================= */ .foot{background:var(--paper);color:var(--body);padding:56px 0 28px;border-top:1px solid var(--line-soft)} .foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:44px;border-bottom:1px solid var(--line-soft)} .foot .brand-logo{height:96px;width:auto;margin:-8px 0 4px -6px} .foot p{font-size:13.5px;line-height:1.8;color:var(--muted)} /* Column headings are h3, not h4: the preceding page heading is an h2 and skipping a level breaks the document outline. .foot h4 is kept so any stale copy of the footer still styles. */ .foot h3,.foot h4{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:16px} .foot a.fl{display:block;font-size:13.5px;line-height:2.1;color:var(--body);transition:.3s} .foot a.fl:hover{color:var(--accent-text)} .foot__a11y{padding-top:24px;font-size:12px;line-height:1.8;color:var(--muted);max-width:78ch} .foot__a11y a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:.3s} .foot__a11y a:hover{color:var(--accent-text)} .foot__bot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:16px;flex-wrap:wrap} .foot__bot small{font-size:11.5px;letter-spacing:.04em;color:var(--muted)} /* ========================================================= SCROLL REVEAL ========================================================= */ .reveal{opacity:0;transform:translateY(50px);transition:opacity .85s var(--ease-editorial),transform .85s var(--ease-editorial)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s} @media(prefers-reduced-motion:reduce){ /* smooth scroll is the largest motion on the site: every in-page CTA animates a full-viewport scroll. Kill it first. */ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} .hero__word,.hero__logo,.hero .eyebrow,.hero__lockup,.hero__est,.hero__cta, .hero__media img,.hero__media video{animation:none!important;opacity:1!important;transform:none!important} .scrollcue .tk::after{animation:none} /* image zoom on hover, and the arrow nudge inside buttons */ .ph img,.card img,.fac__ph img{transition:none} .ph.zoom:hover img,.card:hover img,.fac:hover .fac__ph img{transform:none} .btn .arr,.btn:hover .arr{transition:none;transform:none} } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1000px){ .split__grid{grid-template-columns:1fr;gap:38px} .split__photo{margin:0;max-width:520px} .split__list,.split__text{padding:0} .prestige__grid{grid-template-columns:1fr;gap:36px} .quotes__row{grid-template-columns:1fr;max-width:520px;margin:0 auto} .cards__grid{grid-auto-rows:200px} .foot__top{grid-template-columns:1fr 1fr} } /* NAV BREAKPOINT. The horizontal menu is 5 links + the phone link + the slash + the CTA button. It does not fit on one line until about 964px, so at every tablet width (768, 820, 834) the phone number and "Book a Free Trial" used to break into stacked fragments. Nothing overflowed, so overflow checks never caught it. The burger now takes over at the same 1000px the rest of the layout already collapses at. */ @media(max-width:1000px){ .burger{display:flex} .menu{position:fixed;inset:0;z-index:58;flex-direction:column;justify-content:center;align-items:center;gap:30px; background:#1B2128;transform:translateX(100%);visibility:hidden;transition:transform .45s var(--ease-soft),visibility 0s linear .45s} .nav.open{background:#1B2128;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none} .nav.open .brand-logo{filter:none} .nav.open .menu{transform:none;visibility:visible;transition:transform .45s var(--ease-soft),visibility 0s linear 0s} .menu a.lnk{display:block;font-size:19px;color:#fff;text-shadow:none;letter-spacing:.16em} .menu a.lnk::after{display:none} .menu .slash{display:none} .menu .btn-nav{font-size:14px;padding:16px 32px} .nav.open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .nav.open .burger span:nth-child(2){opacity:0} .nav.open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} body.nav-lock{overflow:hidden} } @media(max-width:720px){ /* The client's longer statement paragraph (2026-08-04) now runs eight lines on a phone and crosses the middle of the NIKA outline instead of clearing it. Softening the stroke keeps the texture and stops it cutting through the words. Checked on the 390px render, not assumed. */ .statement .watermark{opacity:.5} /* 170px tall at full width made every card 2:1, and a standing dancer does not fit in a 2:1 letterbox: the grid turned into a head above a pair of legs (Dima, 2026-07-27). At 240px the cards are about 1.44:1, which is enough to hold a figure from tiara to tutu, and it also stops cropping the group shots sideways, since those photos are 1.5:1 and now crop on width instead. */ .cards__grid{grid-template-columns:repeat(2,1fr) !important;grid-auto-rows:240px} .card.c-wide,.card.c-3,.card.c-4{grid-column:span 2} .card.c-tall{grid-row:span 1} .foot__top{grid-template-columns:1fr} .watermark{font-size:36vw} } /* NARROW PHONES. .btn carries white-space:nowrap, which gives "Book a Free Trial Class" a 309.7px min-content floor and the trial submit button a 293.9px one. Add the page gutters and the form-card padding and the layout could not go below ~396px, so on a 320px or 360px screen the CTA and the form card were silently clipped (body{overflow-x:hidden} hides the overflow instead of scrolling it). Below 420px the label may wrap and the horizontal padding tightens. Above 420px nothing changes: buttons still hold one line. */ @media(max-width:420px){ .btn{white-space:normal;text-align:center;justify-content:center;padding:15px 22px;letter-spacing:.13em} .nav .btn-nav{padding:12px 18px} } /* Magnetic-CTA + reveal behaviour live in each page's inline script. Single locked theme: smoky. */ /* ========================================================= PAGE-LEVEL OVERRIDES (contrast + focus) Each page carries its own