/* SHAFARINA v7 "built live" (SHF-59b). Boards of frames on a 12-column grid; bright, solid logo colours. Desktop >= 1024px. Below 1024px: one column, floating dock + menu. Phone <= 760px: Home is a snap story. */ @font-face { font-family: "Unbounded"; src: url(/assets/v7/fonts/unbounded-cyrillic.woff2?v=e30bf6a606) format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Unbounded"; src: url(/assets/v7/fonts/unbounded-latin-ext.woff2?v=845e1c9fe2) format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Unbounded"; src: url(/assets/v7/fonts/unbounded-latin.woff2?v=22f9b928aa) format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Ysabeau Office"; src: url(/assets/v7/fonts/ysabeau-office-cyrillic.woff2?v=57433e6cc1) format("woff2"); font-weight: 1 1000; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Ysabeau Office"; src: url(/assets/v7/fonts/ysabeau-office-latin-ext.woff2?v=325a853735) format("woff2"); font-weight: 1 1000; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Ysabeau Office"; src: url(/assets/v7/fonts/ysabeau-office-latin.woff2?v=91513964c2) format("woff2"); font-weight: 1 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --ink: #16121f; --ink-2: #5b5670; --mist: #f1f0f4; --line: #dedbe6; --line-strong: #8b86a0; --paper: #ffffff; --violet: #483090; --violet-deep: #38257a; --violet-50: #efebfa; --blue: #0066d2; --red: #cc3024; --green: #78a200; --err: #b3261b; --display: "Unbounded", "Arial Black", sans-serif; --text: "Ysabeau Office", "Segoe UI", sans-serif; --gap: 8px; --pad: 8px; --hdr: 64px; --dock: 0px; --in: clamp(24px, 3vw, 52px); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --focus: var(--blue); color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 8px); } body { margin: 0; background: var(--paper); color: var(--ink); font: 460 1.0625rem/1.5 var(--text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; padding-bottom: var(--dock); } img, video { display: block; max-width: 100%; } h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .tone-violet, .tone-blue, .tone-red, .tone-ink, .cta { --focus: #fff; } .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: fixed; left: 8px; top: -60px; z-index: 100; padding: 12px 16px; background: var(--ink); color: #fff; } .skip:focus { top: 8px; } .ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .dot { display: inline-block; width: 9px; height: 9px; flex: none; background: currentColor; } .dot--violet { background: var(--violet); } .dot--blue { background: var(--blue); } .dot--red { background: var(--red); } .dot--green { background: var(--green); } /* tones: solid logo colours. White text on green fails contrast, so green carries ink. */ .tone-violet { background: var(--violet); color: #fff; } .tone-blue { background: var(--blue); color: #fff; } .tone-red { background: var(--red); color: #fff; } .tone-green { background: var(--green); color: var(--ink); } .tone-ink { background: var(--ink); color: #fff; } .tone-paper { background: var(--mist); color: var(--ink); } /* ------------------------------------------------------------------ buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 2px; background: var(--violet); color: #fff; font: 500 0.875rem/1.1 var(--display); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: transform 140ms var(--ease-out), background-color 200ms ease; } .btn:active { transform: scale(0.97); } .btn--lg { min-height: 56px; padding: 0 28px; font-size: 1rem; } .btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.8125rem; } .btn--light { background: #fff; color: var(--violet); } .btn--ink { background: var(--ink); color: #fff; } .btn .ico { transition: transform 240ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--violet-deep); } .btn--light:hover { background: var(--violet-50); } .btn--ink:hover { background: #2c2638; } .btn:hover .ico { transform: translateX(4px); } } /* ------------------------------------------------------------------ header */ .hdr { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px; height: var(--hdr); padding: 0 calc(var(--pad) + 16px); background: rgb(255 255 255 / 0.96); border-bottom: 1px solid var(--line); view-transition-name: hdr; } .brand { display: inline-flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; color: var(--ink); text-decoration: none; } .brand__logo { width: 36px; height: 36px; } .brand__word { font: 600 0.9375rem/1 var(--display); letter-spacing: 0.06em; } .hdr__nav { margin-left: auto; } .hdr__nav ul { display: flex; gap: 4px; } .hdr__link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; font-weight: 600; text-decoration: none; text-underline-offset: 6px; } .hdr__link[aria-current="page"] { text-decoration: underline 2px; text-decoration-color: var(--violet); } @media (hover: hover) and (pointer: fine) { .hdr__link:hover { color: var(--violet); } } .lang { display: inline-flex; gap: 2px; } .lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font: 500 0.75rem/1 var(--display); text-decoration: none; color: var(--ink-2); } .lang a[aria-current="true"] { color: var(--ink); text-decoration: underline 2px; text-underline-offset: 5px; } /* ------------------------------------------------------------------ boards and frames */ main { display: block; } main:focus { outline: none; } .board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--pad); margin-top: var(--gap); } .f { position: relative; min-width: 0; overflow: clip; } :where(.f) { background: var(--mist); } .f img { width: 100%; height: 100%; object-fit: cover; } .big-h { font: 500 clamp(2.25rem, 4.4vw, 4.5rem)/1.02 var(--display); letter-spacing: -0.025em; text-wrap: balance; } .f--bare, .auds__q, .rail__head, .rail-f, .adv__title, .advs-f, .made-f, .chain__head, .mission__head, .steps__head, .tiers__head, .tiers-f, .brand__head, .index-f, .seg-f { background: transparent; } /* ------------------------------------------------------------------ Home: hero */ .board--hero { grid-template-rows: auto min(55.8vw, 800px) clamp(240px, 30svh, 320px); } .hero__field { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: 32px 48px; align-items: end; padding: var(--in); } .hero__h { font: 500 clamp(2.5rem, 4.6vw, 4.25rem)/1.02 var(--display); letter-spacing: -0.03em; text-wrap: balance; } .hero__side { display: grid; gap: 24px; } .hero__lead { font-size: 1.1875rem; line-height: 1.45; } .hero__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; } .hero__more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 6px; } .hero__camp { grid-column: 1 / -1; } .hero__img { object-position: 50% 42%; } .hero__since { grid-column: 1 / 4; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; } .hero__year { font: 600 clamp(3.5rem, 6.2vw, 7rem)/0.85 var(--display); letter-spacing: -0.05em; } .hero__year-note { font-weight: 600; font-size: 1.0625rem; } .hero__loop { grid-column: 4 / 10; } .loop__poster, .loop__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .loop__video { opacity: 0; transition: opacity 600ms ease; } .loop__video.is-playing { opacity: 1; } .hero__soxuz-f { grid-column: 10 / -1; background: var(--mist); } .hero__brand { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; height: 100%; padding: 28px; color: var(--ink); text-decoration: none; font-weight: 600; } .hero__brand img { width: 108px; height: auto; object-fit: contain; } .hero__brand .ico { width: 32px; height: 32px; transition: transform 300ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .hero__brand:hover .ico { transform: translateX(8px); } } .hero__3d { display: none; } /* lines: socks and knitwear halves */ .board--lines { grid-template-rows: clamp(560px, 86svh, 940px); } .line-f--socks { grid-column: 1 / 7; } .line-f--knit { grid-column: 7 / -1; } .line { position: absolute; inset: 0; display: block; color: var(--ink); text-decoration: none; } .line__img { position: absolute; inset: 0; transition: transform 900ms var(--ease-out); } .line__text { position: absolute; left: 0; bottom: 0; display: grid; gap: 4px; min-width: min(64%, 420px); padding: 26px 30px 28px; background: #fff; } .line__name { font: 500 clamp(3rem, 6vw, 6.25rem)/0.95 var(--display); letter-spacing: -0.035em; } .line__sub { margin-top: 10px; font-weight: 600; font-size: 1.125rem; } .line__note { color: var(--ink-2); } .line__text .ico { position: absolute; right: 26px; bottom: 28px; width: 34px; height: 34px; transition: transform 300ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .line:hover .line__img { transform: scale(1.035); } .line:hover .line__text .ico { transform: translateX(8px); } } /* audiences */ .auds__q { grid-column: 1 / -1; padding: clamp(48px, 6vw, 96px) var(--in) 16px; } .aud-f { grid-column: span 4; min-height: clamp(240px, 32svh, 360px); } .aud { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; height: 100%; min-height: inherit; padding: 30px 42% 30px 30px; color: inherit; text-decoration: none; } .aud__name { font: 500 clamp(1.75rem, 2.9vw, 3.25rem)/1 var(--display); letter-spacing: -0.03em; transition: transform 400ms var(--ease-out); } .aud__img { position: absolute; top: 0; right: 0; bottom: 0; width: 38% !important; height: 100% !important; object-fit: cover; } .aud .ico { position: relative; z-index: 1; } .aud__sub { max-width: 26em; font-weight: 600; font-size: 1rem; line-height: 1.35; } .aud .ico { width: 36px; height: 36px; margin-top: -60px; align-self: flex-end; transition: transform 300ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .aud:hover .aud__name { transform: translateY(-8px); } .aud:hover .ico { transform: translateX(8px); } } /* products: horizontal drag rail */ .rail__head { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 32px; padding: clamp(56px, 7vw, 112px) var(--in) 24px; } .rail__lead { grid-column: 1; color: var(--ink-2); font-size: 1.1875rem; } .rail__nav { grid-column: 2; grid-row: 1 / 3; display: flex; gap: 8px; } .rail__btn { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1.5px solid var(--ink); border-radius: 2px; background: #fff; cursor: pointer; transition: transform 140ms var(--ease-out), background-color 200ms ease, color 200ms ease; } .rail__btn:active { transform: scale(0.95); } @media (hover: hover) and (pointer: fine) { .rail__btn:hover { background: var(--ink); color: #fff; } } .rail-f { grid-column: 1 / -1; } .rail { display: flex; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; } .rail::-webkit-scrollbar { display: none; } .rail.is-drag { cursor: grabbing; scroll-snap-type: none; } .rail.is-drag .pc { pointer-events: none; } .rail li { flex: 0 0 clamp(240px, 22vw, 340px); scroll-snap-align: start; } .pc { display: block; color: var(--ink); text-decoration: none; -webkit-user-drag: none; user-select: none; } .pc__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: clip; background: var(--mist); } .pc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out), opacity 320ms ease; } .pc__alt { opacity: 0; background: #fff; object-fit: contain !important; } .pc__media { container-type: inline-size; } .pc__insets { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; gap: 6px; pointer-events: none; } .pc__media .pc__inset { position: static; width: 26cqw; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid #fff; box-shadow: 0 6px 16px -8px rgb(22 18 31 / 0.5); } .pc-f--big .pc__media .pc__inset { width: 18cqw; } .pc__line { display: block; margin-top: 14px; color: var(--ink-2); font-weight: 600; font-size: 0.875rem; } .pc__name { display: block; margin-top: 2px; font: 500 1.0625rem/1.2 var(--display); } @media (hover: hover) and (pointer: fine) { .pc:hover .pc__img { transform: scale(1.04); } .pc:hover .pc__alt { opacity: 1; } } .sw { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 20px; background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.1) 0 3px, transparent 3px 12px); } .sw.tone-green { background-image: repeating-linear-gradient(90deg, rgb(22 18 31 / 0.08) 0 3px, transparent 3px 12px); } .sw__name { font: 500 1.5rem/1.05 var(--display); letter-spacing: -0.02em; } /* advantages: sticky stack of colour cards, each with a product shot on the same backdrop colour */ .adv__title { grid-column: 1 / -1; padding: clamp(56px, 7vw, 112px) var(--in) 24px; } .advs-f { grid-column: 1 / -1; overflow: visible; } .advs { display: grid; gap: var(--gap); padding-bottom: 12svh; } .adv { position: sticky; top: calc(var(--hdr) + 10px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); height: clamp(360px, 56svh, 520px); overflow: clip; } .adv:nth-child(2) { top: calc(var(--hdr) + 22px); } .adv:nth-child(3) { top: calc(var(--hdr) + 34px); } .adv:nth-child(4) { top: calc(var(--hdr) + 46px); } .adv:nth-child(5) { top: calc(var(--hdr) + 58px); } .adv__text { display: flex; flex-direction: column; justify-content: flex-start; gap: 24px; padding: var(--in); } .adv__h { font: 500 clamp(2.5rem, 4.4vw, 5rem)/0.98 var(--display); letter-spacing: -0.035em; text-wrap: balance; } .adv__p { max-width: 24em; font-size: 1.375rem; line-height: 1.4; } .adv__img { height: 100%; object-position: 50% 22%; } /* keep heads in frame */ /* production teaser: scroll-scrubbed statement and three real workshop photos */ .made-f { grid-column: 1 / -1; display: grid; gap: 28px; justify-items: start; padding: clamp(56px, 7vw, 112px) var(--in) 40px; } .made__h { font: 500 1.375rem/1.2 var(--display); color: var(--violet); } .scrub { max-width: 30ch; font: 400 clamp(1.875rem, 3.7vw, 3.875rem)/1.14 var(--display); letter-spacing: -0.02em; } .chain-f { grid-column: span 4; height: clamp(420px, 66svh, 700px); } .chain__img { object-position: 50% 30%; } .chain__step { position: absolute; left: 0; right: 0; bottom: 0; display: grid; align-content: start; gap: 4px; min-height: 112px; padding: 18px 22px 20px; background: #fff; } .chain__step b { font: 500 1.25rem/1.15 var(--display); } .chain__step span { color: var(--ink-2); font-size: 0.9375rem; } /* call to action */ .board--cta { margin-top: var(--gap); } .cta { grid-column: 1 / -1; display: grid; align-content: space-between; gap: 48px; min-height: clamp(420px, 64svh, 680px); padding: clamp(36px, 5.5vw, 96px); } .cta__h { max-width: 15ch; font: 500 clamp(2.5rem, 5.4vw, 5.75rem)/1 var(--display); letter-spacing: -0.035em; text-wrap: balance; } .cta__go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; } .cta__alt { font-weight: 600; } .cta__links { display: flex; flex-wrap: wrap; gap: 4px 22px; } .cta__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 5px; } .about-f { grid-column: 1 / -1; display: grid; justify-items: start; gap: 22px; padding: clamp(48px, 6vw, 96px) var(--in); background: transparent; } .about__lead { max-width: 40em; font-size: 1.25rem; line-height: 1.45; } /* ------------------------------------------------------------------ footer */ .ftr { margin-top: var(--gap); padding-bottom: var(--pad); } .ftr__brand { grid-column: 1 / -1; display: grid; gap: 20px; padding: clamp(28px, 3vw, 48px) var(--in) var(--in); } .ftr__word { font: 600 clamp(3rem, 13vw, 15rem)/0.82 var(--display); letter-spacing: -0.045em; color: var(--violet); white-space: nowrap; text-align: center; } .ftr__logos { display: flex; align-items: center; gap: 20px; } .ftr__logos img { width: 52px; height: 52px; object-fit: contain; } .ftr__logos .ftr__soxuz { width: 64px; height: auto; } .ftr__col { grid-column: span 4; display: grid; align-content: start; gap: 2px; padding: 28px var(--in) 32px; } .ftr__col ul { display: grid; gap: 2px; } .ftr__h { margin-bottom: 10px; font: 500 0.9375rem/1.2 var(--display); color: var(--violet); } .ftr__col a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; text-decoration: none; } .ftr__big { font: 500 1.375rem/1.2 var(--display); } .ftr__msg { display: flex; gap: 20px; } @media (hover: hover) and (pointer: fine) { .ftr__col a:hover { color: var(--violet); text-decoration: underline; text-underline-offset: 4px; } } .ftr__base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; padding: 14px var(--in); color: var(--ink-2); font-size: 0.9375rem; background: transparent; } .ftr__base a { display: inline-flex; align-items: center; min-height: 44px; } .rebuild { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } @media (max-width: 1023px), (prefers-reduced-motion: reduce) { .rebuild { display: none; } } /* ------------------------------------------------------------------ inner page heads */ .board--head { grid-template-rows: minmax(clamp(420px, 60svh, 640px), auto); } .head__field { grid-column: 1 / 7; display: flex; flex-direction: column; justify-content: flex-start; gap: 32px; padding: var(--in); transition: background-color 320ms ease, color 320ms ease; } .head__h { font: 500 clamp(2.5rem, 5vw, 5.5rem)/1 var(--display); letter-spacing: -0.035em; text-wrap: balance; } .head__lead { max-width: 28em; font-size: 1.25rem; line-height: 1.45; } .head__top { display: grid; justify-items: start; gap: 28px; } .head__media { grid-column: 7 / -1; } .board--band { grid-template-rows: clamp(360px, 60svh, 700px); } .band-f { grid-column: 1 / -1; } .band__img { object-position: 50% 30%; } /* catalogue: sticky audience filter, colour bands, mosaics */ .catalog { display: block; } .seg-f { position: sticky; top: var(--hdr); z-index: 30; margin: var(--gap) var(--pad) 0; padding: 10px 0; background: rgb(255 255 255 / 0.96); overflow: visible; } .seg { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--ink); } .seg__b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; font-size: 0.9375rem; border: 0; background: #fff; font-weight: 600; cursor: pointer; transition: background-color 200ms ease, color 200ms ease; } .seg__b + .seg__b { border-left: 1.5px solid var(--ink); } .seg__b[aria-pressed="true"] { background: var(--ink); color: #fff; } .seg__b[aria-pressed="true"] .dot { box-shadow: 0 0 0 1.5px #fff; } @media (hover: hover) and (pointer: fine) { .seg__b[aria-pressed="false"]:hover { background: var(--mist); } } body[data-tone="men"] .board--catalog-head .head__field { background: var(--blue); } body[data-tone="women"] .board--catalog-head .head__field { background: var(--red); } body[data-tone="kids"] .board--catalog-head .head__field { background: var(--green); color: var(--ink); } .group[hidden] { display: none; } .group__band { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; min-height: 200px; padding: var(--in); } .group__h { font: 500 clamp(2.5rem, 5.6vw, 6rem)/0.95 var(--display); letter-spacing: -0.035em; } .group__sub { flex: 1 1 18em; max-width: 30em; font-weight: 600; font-size: 1.125rem; } .mosaic { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-auto-flow: dense; gap: var(--gap); } .pc-f { grid-column: span 3; } .pc-f[hidden] { display: none; } .pc-f--big { grid-column: span 6; grid-row: span 2; } .pc--tile { display: flex; flex-direction: column; height: 100%; user-select: auto; } .pc-f--big .pc__media { flex: 1; aspect-ratio: auto; min-height: 420px; } .pc__body { display: grid; gap: 8px; padding: 16px 20px 20px; } .pc__tags { display: flex; flex-wrap: wrap; gap: 4px 14px; } .tag { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 0.875rem; } .pc--tile .pc__name { margin: 0; font-size: 1.25rem; } .pc-f--big .pc__name { font-size: clamp(1.5rem, 2.4vw, 2.25rem); letter-spacing: -0.02em; } .pc__meta { color: var(--ink-2); font-size: 1rem; } .pc__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--violet); font-weight: 600; font-size: 0.9375rem; } .pc__cta .ico { transition: transform 240ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .pc--tile:hover .pc__cta .ico { transform: translateX(5px); } } .custom-f { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 28px; padding: var(--in); } .custom-f--1 { grid-column: span 3; } .custom-f--2 { grid-column: span 6; } .custom-f--3 { grid-column: span 9; } .custom-f--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; } .custom__q { max-width: 18ch; font: 500 clamp(1.25rem, 2vw, 1.875rem)/1.1 var(--display); letter-spacing: -0.02em; } /* knitwear index with the cursor-following preview */ .index-f { grid-column: 1 / -1; } .index { border-top: 1.5px solid var(--ink); } .row { border-bottom: 1px solid var(--line); } .row[hidden] { display: none; } .row__a { display: grid; grid-template-columns: minmax(0, 1fr) auto 96px auto; align-items: center; gap: 16px 32px; min-height: 104px; padding: 18px var(--in); color: var(--ink); text-decoration: none; transition: background-color 200ms ease; } .row__name { font: 500 clamp(1.75rem, 3.4vw, 3.5rem)/1 var(--display); letter-spacing: -0.03em; transition: transform 400ms var(--ease-out); } .row__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; } .row__meta { color: var(--ink-2); font-weight: 600; font-size: 0.9375rem; } .row__thumb { display: block; width: 96px; height: 120px; object-fit: cover; } .row__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--violet); font-weight: 600; } @media (hover: hover) and (pointer: fine) { .row__a:hover { background: var(--mist); } .row__a:hover .row__name { transform: translateX(14px); } } .preview { position: fixed; left: 0; top: 0; z-index: 40; width: 280px; aspect-ratio: 4 / 5; overflow: clip; pointer-events: none; opacity: 0; transition: opacity 220ms ease; } .preview.is-on { opacity: 1; } .preview__img { width: 100%; height: 100%; object-fit: cover; } .preview__sw { position: absolute; inset: 0; display: none; } .preview.is-sw .preview__sw { display: block; } .preview.is-sw .preview__img { display: none; } @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce), (max-width: 1023px) { .preview { display: none; } } /* ------------------------------------------------------------------ Production */ .chain__head { grid-column: 1 / -1; display: grid; gap: 12px; padding: clamp(56px, 7vw, 112px) var(--in) 24px; } .chain__cap { color: var(--ink-2); font-weight: 600; } .chapters { grid-column: 1 / -1; display: grid; gap: var(--gap); } .ch { position: sticky; top: calc(var(--hdr) + 8px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); height: clamp(520px, calc(100svh - var(--hdr) - 16px), 860px); background: var(--paper); } .ch__text { display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: var(--in); font-size: 1.1875rem; } .ch__h { font: 500 clamp(2.25rem, 4vw, 4.25rem)/1 var(--display); letter-spacing: -0.03em; } .ch__photos { display: grid; gap: var(--gap); min-height: 0; } .ch__photos--3 { grid-template-columns: 2fr 1fr 1fr; } .ch__photos--2 { grid-template-columns: 1fr 1fr; } .ch__ph { position: relative; min-height: 0; overflow: clip; background: var(--mist); } .ch__ph img { width: 100%; height: 100%; object-fit: cover; } .ch__ph figcaption { position: absolute; left: 0; bottom: 0; padding: 10px 14px; background: #fff; font-weight: 600; font-size: 0.9375rem; } .board--qc { grid-template-rows: minmax(clamp(420px, 62svh, 680px), auto); } .qc-f { grid-column: 1 / 8; display: flex; align-items: flex-end; padding: var(--in); } .qc__h { font: 500 clamp(2.5rem, 5vw, 5.5rem)/1 var(--display); letter-spacing: -0.03em; text-wrap: balance; } .qc-t { grid-column: 8 / -1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: var(--in); font-size: 1.125rem; } .qc__lead { margin-bottom: 20px; font: 400 clamp(1.375rem, 2vw, 1.875rem)/1.25 var(--display); letter-spacing: -0.01em; } .qc-t h3 { font: 500 1.25rem/1.2 var(--display); } .mission__head { grid-column: 1 / -1; display: grid; gap: 24px; padding: clamp(56px, 7vw, 112px) var(--in) 24px; } .mission__head .scrub { max-width: 24ch; } .mi { grid-column: span 4; display: flex; flex-direction: column; gap: 12px; min-height: clamp(360px, 52svh, 560px); padding: var(--in); } .mi__q { font-weight: 600; } .mi__h { font: 500 clamp(1.75rem, 2.8vw, 2.75rem)/1.02 var(--display); letter-spacing: -0.025em; } .mi__s { margin-top: auto; font-size: 1.3125rem; line-height: 1.38; } /* ------------------------------------------------------------------ Wholesale */ .board--steps .big-h, .board--tiers .big-h, .board--send .big-h, .board--brand .big-h { font-size: clamp(2rem, 3.4vw, 3.5rem); } .steps__head, .brand__head { grid-column: 1 / -1; padding: clamp(56px, 7vw, 112px) var(--in) 24px; } .steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); } .st { display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; min-height: 260px; padding: 26px 24px; } .st__h { margin-top: 0; font: 500 1.375rem/1.1 var(--display); letter-spacing: -0.015em; } .st--opt { background: var(--paper); outline: 1.5px dashed var(--ink-2); outline-offset: -1.5px; } .st__opt { color: var(--violet); font-weight: 600; font-size: 0.9375rem; } .tiers__head { grid-column: 1 / 5; display: grid; align-content: start; gap: 16px; padding: 40px var(--in); } .note { color: var(--ink-2); font-size: 1.0625rem; } .tiers-f { grid-column: 5 / -1; } .tiers { width: 100%; border-collapse: separate; border-spacing: 0 var(--gap); } .tiers thead th { padding: 24px 28px 4px; color: var(--ink-2); font-weight: 600; font-size: 0.9375rem; text-align: left; } .tiers tbody th, .tiers tbody td { padding: 30px 28px; text-align: left; vertical-align: top; } .tiers tbody th { font: 500 1.375rem/1.1 var(--display); white-space: nowrap; } .tiers .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .tiers tbody .num { font: 500 clamp(1.5rem, 2.8vw, 2.75rem)/1 var(--display); letter-spacing: -0.03em; } .tiers tbody td:last-child { max-width: 22em; font-size: 1.0625rem; } .send__head { grid-column: 1 / 5; grid-row: span 3; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: var(--in); background: var(--violet-50); } .send-f { grid-column: span 4; display: grid; align-content: start; gap: 8px; padding: 26px 28px; } .send-f h3 { font: 500 1.25rem/1.15 var(--display); } .pair { grid-column: span 6; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 440px; padding: var(--in); font-size: 1.125rem; } .pair .btn { margin-top: auto; } .pair__h { font: 500 clamp(1.75rem, 2.6vw, 2.75rem)/1 var(--display); letter-spacing: -0.03em; } .pair__sub { font-weight: 600; } .pair__logo { width: 150px !important; height: auto !important; object-fit: contain !important; margin-bottom: 8px; } .board--export { margin-top: var(--gap); } .exp { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 20px; min-height: 500px; padding: var(--in); font-size: 1.1875rem; } .exp__h { font: 500 1.375rem/1.2 var(--display); } .exp__regions { margin-top: auto; font: 500 clamp(2rem, 3.6vw, 3.75rem)/1 var(--display); letter-spacing: -0.035em; text-wrap: balance; } .terms-f { grid-column: 8 / -1; padding: var(--in); } .terms__h { margin-bottom: 16px; font: 500 1.375rem/1.2 var(--display); } .terms__line { font: 500 clamp(1.25rem, 1.8vw, 1.625rem)/1.3 var(--display); letter-spacing: -0.01em; } .terms th, .terms td { padding: 16px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .terms th { padding-right: 20px; font-weight: 600; } .terms td { text-align: right; } /* ------------------------------------------------------------------ Contact */ .board--contact-head .head__field { grid-column: 1 / 8; } .ct { grid-column: 8 / -1; display: flex; flex-direction: column; gap: 16px; padding: var(--in); font-size: 1.0625rem; } .ct__h { font: 500 1.75rem/1.1 var(--display); } .ct__list { display: grid; gap: 18px; margin-top: auto; } .ct__list dt { color: var(--ink-2); font-weight: 600; font-size: 0.9375rem; } .ct__list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 5px; } .ct__main { font: 500 1.5rem/1.2 var(--display) !important; } .ct__msg { display: flex; gap: 20px; } .calc-steps { display: grid; gap: 10px; counter-reset: s; font-weight: 600; font-size: 1.0625rem; } .calc-steps li { display: flex; gap: 12px; align-items: baseline; } .calc-steps li::before { content: ""; width: 10px; height: 10px; flex: none; background: currentColor; } .form-f { grid-column: 1 / 9; padding: var(--in); } .form-ph-f { grid-column: 9 / -1; background: transparent; overflow: visible; } .form__ph { position: sticky; top: calc(var(--hdr) + 8px); } .form__ph img { aspect-ratio: 3 / 4; height: auto; } .form__ph figcaption { padding: 12px 4px; color: var(--ink-2); font-weight: 600; } .form { display: grid; gap: 26px; } .form__notice { padding: 18px 20px; background: var(--violet); color: #fff; font-weight: 600; --focus: #fff; } .fld { display: grid; gap: 8px; min-width: 0; } .fld > label, .fld legend { font-weight: 600; } .fld--group { margin: 0; padding: 0; border: 0; } .fld--group legend { margin-bottom: 10px; padding: 0; } .opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .opt { position: relative; display: block; cursor: pointer; } .opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .opt__box { display: grid; gap: 4px; height: 100%; min-height: 76px; padding: 14px 16px; border: 1.5px solid var(--line-strong); background: #fff; transition: border-color 160ms ease, background-color 160ms ease; } .opt__box b { font: 500 1rem/1.15 var(--display); } .opt__box small { color: var(--ink-2); font-size: 0.9375rem; } .opt input:checked + .opt__box { border-color: var(--violet); background: var(--violet-50); box-shadow: inset 4px 0 0 var(--violet); } .opt input:focus-visible + .opt__box { outline: 3px solid var(--focus); outline-offset: 2px; } .form__summary { font: 500 1.125rem/1.3 var(--display); color: var(--violet); } .form__req, .hint { color: var(--ink-2); font-size: 0.9375rem; } .form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fld input:not([type="radio"]):not([type="file"]), .fld select, .fld textarea { width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: 2px; background: #fff; font-size: 1rem; } .fld textarea { padding: 12px 14px; resize: vertical; } .fld input::placeholder, .fld textarea::placeholder { color: var(--ink-2); opacity: 1; } .fld [aria-invalid="true"] { border-color: var(--err) !important; } .err { color: var(--err); font-weight: 600; font-size: 0.9375rem; } .qty { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; } .form__more summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; } .form__more > .form__row, .form__more > .fld { margin-top: 12px; } .upload { position: relative; } .upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .upload__face { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 0 18px; border: 1.5px dashed var(--line-strong); background: #fff; } .upload:focus-within .upload__face { outline: 3px solid var(--focus); outline-offset: 2px; } .form__send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .form__send .hint a { display: inline-flex; align-items: center; min-height: 44px; } .btn:disabled, .dock__cta:disabled { opacity: 0.55; cursor: not-allowed; } /* 1024-1439px: six links, seven language codes and the CTA do not fit one header line; the language switch stays in the footer (and the menu below 1024px), the header keeps the links and the CTA. */ @media (min-width: 1024px) and (max-width: 1439.98px) { .hdr__lang { display: none; } } /* From 1440px the seven codes come back. Where the full line (logo word, links, codes, CTA) is still too long, the word next to the logo yields first (measured per language with a 16px clearance before the first link). */ @media (min-width: 1440px) and (max-width: 1519.98px) { html:lang(uz) .hdr .brand__word { display: none; } } @media (min-width: 1440px) and (max-width: 1549.98px) { html:lang(pl) .hdr .brand__word { display: none; } } @media (min-width: 1440px) and (max-width: 1459.98px) { html:is(:lang(ru), :lang(de)) .hdr .brand__word { display: none; } } /* 1024-1199px: the same desktop design, tighter header and a full-width tiers table */ @media (min-width: 1024px) and (max-width: 1199px) { .hdr { gap: 14px; } .brand__word { display: none; } .hdr__link { padding: 0 9px; font-size: 1rem; } .tiers__head, .tiers-f { grid-column: 1 / -1; } .tiers__head { padding-bottom: 0; } } .hdr__link, .hdr__cta { white-space: nowrap; } .hdr__cta { min-height: 44px; } /* ------------------------------------------------------------------ dock and menu (below 1024px) */ .dock, .menu { display: none; } @media (max-width: 1023px) { :root { --dock: calc(76px + env(safe-area-inset-bottom)); } .hdr { gap: 12px; padding: 0 16px; } .hdr__nav, .hdr__cta { display: none; } .hdr__lang { margin-left: auto; } .lang a { min-width: 44px; min-height: 44px; } .dock { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; view-transition-name: dock; } .dock__menu, .dock__cta { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px; border: 0; border-radius: 2px; font: 500 0.875rem/1.1 var(--display); text-decoration: none; cursor: pointer; box-shadow: 0 14px 30px -12px rgb(22 18 31 / 0.5); transition: transform 140ms var(--ease-out); } .dock__menu { background: var(--ink); color: #fff; --focus: var(--blue); } .dock__cta { justify-content: space-between; background: var(--violet); color: #fff; } .dock__menu:active, .dock__cta:active { transform: scale(0.97); } .menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0 20px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; border: 0; background: var(--violet); color: #fff; --focus: #fff; clip-path: circle(0 at 54px calc(100% - 48px)); transition: clip-path 460ms var(--ease-out), display 460ms allow-discrete, overlay 460ms allow-discrete; } .menu[open] { display: flex; flex-direction: column; clip-path: circle(150% at 54px calc(100% - 48px)); } @starting-style { .menu[open] { clip-path: circle(0 at 54px calc(100% - 48px)); } } .menu::backdrop { background: transparent; } .menu__top { display: flex; align-items: center; gap: 10px; min-height: 64px; } .menu__top .brand__logo { width: 34px; height: 34px; } .menu__close { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-left: auto; padding: 0; border: 1.5px solid #fff; border-radius: 2px; background: transparent; color: #fff; cursor: pointer; } .menu__list { display: grid; margin-top: 24px; } .menu__link { display: flex; align-items: center; min-height: 64px; border-bottom: 1px solid rgb(255 255 255 / 0.28); font: 500 clamp(1.75rem, 8vw, 2.75rem)/1 var(--display); letter-spacing: -0.03em; text-decoration: none; } .menu__link[aria-current="page"] { text-decoration: underline 3px; text-underline-offset: 8px; } .menu__base { display: grid; gap: 12px; margin-top: auto; padding-top: 28px; } .menu__lang a { color: rgb(255 255 255 / 0.86); } .menu__lang a[aria-current="true"] { color: #fff; } .menu__msg { display: flex; flex-wrap: wrap; gap: 4px 22px; } .menu__msg a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; } html:has(.menu[open]) { overflow: hidden; } /* one column */ .board { grid-template-columns: minmax(0, 1fr); } .board > *, .mosaic > *, .steps > * { grid-column: 1 / -1 !important; grid-row: auto !important; } .board--hero, .board--lines, .board--head, .board--band, .board--qc { grid-template-rows: none; } .hero__field { grid-template-columns: minmax(0, 1fr); } .hero__camp { aspect-ratio: 16 / 10; } .hero__since, .hero__loop, .hero__soxuz-f { min-height: 220px; } .line-f { height: min(100svh, 900px); } .head__media { aspect-ratio: 4 / 5; max-height: 80svh; } .band-f { aspect-ratio: 16 / 10; } .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mosaic > .pc-f { grid-column: span 1 !important; } .mosaic > .pc-f--big, .mosaic > .pc-f--big + .custom-f { grid-column: 1 / -1 !important; } .mosaic > .custom-f { grid-column: span 1 !important; } .pc-f--big .pc__media { flex: none; aspect-ratio: 4 / 5; min-height: 0; } .steps { grid-template-columns: minmax(0, 1fr); } .chapters .ch { position: relative; top: auto; grid-template-columns: minmax(0, 1fr); height: auto; } .ch__photos { grid-template-columns: 1fr 1fr !important; } .ch__photos .ch__ph { aspect-ratio: 3 / 4; } .ch__photos--3 .ch__ph:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; } .adv { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); } .chain-f { height: auto; aspect-ratio: 3 / 4; } .form__ph { position: static; } .tiers-f, .terms-f { overflow-x: visible; } } /* ------------------------------------------------------------------ phone (760px and below) */ .hdr__menu, .stitch, .m4 { display: none; } @media (max-width: 760px) { /* Phone M4 (owner, GetLayers references): near-black grid canvas, floating capsule menu, framed boxes with "+" corners, headings that decode, a knitted first visit. The colour tokens flip; the logo colours stay. */ :root { --ink: #f2f0f7; --ink-2: #bbb7cb; --mist: rgb(255 255 255 / 0.035); --line: rgb(255 255 255 / 0.16); --line-strong: rgb(255 255 255 / 0.5); --paper: #0e0c18; --violet-50: rgb(155 133 255 / 0.16); --vtext: #b9a8ff; --err: #ff9b92; --focus: #9cc2ff; --hdr: 76px; --dock: 0px; --gap: 10px; --pad: 12px; --in: 18px; color-scheme: dark; } html { background: #0e0c18; scroll-padding-top: 84px; } body { padding-top: 76px; background-color: #0e0c18; color: var(--ink); font-size: 1rem; background-image: linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px); background-size: 28px 28px; } .big-h { font-size: clamp(1.625rem, 7.4vw, 2.125rem); text-transform: uppercase; letter-spacing: 0; } .tone-green, .tone-green .tag, body[data-tone="kids"] .board--catalog-head .head__field { color: #0e0c18; } .tone-violet, .tone-blue, .tone-red { --focus: #fff; } .tone-ink { background: #231e3c; color: var(--ink); } /* --ink is the light text colour here */ .btn--ink { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); } .made__h, .ftr__h, .pc__cta, .st__opt, .form__summary { color: var(--vtext); } .ftr__word { color: var(--vtext); } .ftr__soxuz, .pair__logo { filter: invert(1); } /* the SOXUZ mark is dark grey on transparent */ .line { color: #16112b; --focus: #0066d2; } /* About line cards keep their white text panel: dark text on it */ .line__text { padding-right: 64px; } /* the arrow keeps clear of the subline */ .board--head .head__img[src*="364314-a"] { object-position: 35% 50% !important; } /* the smiling worker stays in the 390px crop */ .ftr__col a { min-width: 44px; } /* frames: thin borders and "+" marks in the corners (they rhyme with the desktop swarm frames) */ .f { border: 1px solid var(--line); } .head__field, .hero__field { view-transition-name: none !important; transition: none; } .pc__media .pc__inset { border-color: #0e0c18; } :is(.hero__field, .head__field, .made-f, .rail__head, .adv__title, .cta, .form-f, .ct, .group__band, .index-f, .chain__head, .mission__head, .steps__head, .tiers__head, .send__head, .brand__head, .exp, .terms-f, .qc-t, .about-f, .ftr__brand, .ftr__col, .auds__q)::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; --m: rgb(242 240 247 / 0.7); background: linear-gradient(var(--m), var(--m)) 0 4px / 9px 1px, linear-gradient(var(--m), var(--m)) 4px 0 / 1px 9px, linear-gradient(var(--m), var(--m)) 100% 4px / 9px 1px, linear-gradient(var(--m), var(--m)) calc(100% - 4px) 0 / 1px 9px, linear-gradient(var(--m), var(--m)) 0 calc(100% - 4px) / 9px 1px, linear-gradient(var(--m), var(--m)) 4px 100% / 1px 9px, linear-gradient(var(--m), var(--m)) 100% calc(100% - 4px) / 9px 1px, linear-gradient(var(--m), var(--m)) calc(100% - 4px) 100% / 1px 9px; background-repeat: no-repeat; } /* floating capsule: logo mark, Request a quote, menu */ .hdr { position: fixed; top: 10px; left: 50%; z-index: 50; gap: 6px; height: 56px; padding: 0 6px 0 4px; border: 1px solid var(--line); border-radius: 14px; background: rgb(14 12 24 / 0.86); transform: translateX(-50%); box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.8); } .brand__word, .hdr__lang { display: none; } .brand__logo { width: 34px; height: 34px; } .hdr .hdr__cta { display: inline-flex; min-height: 44px; padding: 0 14px; border-radius: 8px; font-size: 0.8125rem; } .hdr__menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; } .hdr__menu .ico { width: 22px; height: 22px; } .dock { display: none !important; } .stitch { position: fixed; top: 72px; left: 50%; z-index: 49; display: block; width: min(240px, 62vw); height: 6px; overflow: clip; transform: translateX(-50%); background: rgb(255 255 255 / 0.07); } .stitch__fill { display: block; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='6'%3E%3Cpath d='M1 1 4 5 7 1' fill='none' stroke='%23483090' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M9 1 12 5 15 1' fill='none' stroke='%230066d2' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M17 1 20 5 23 1' fill='none' stroke='%23cc3024' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M25 1 28 5 31 1' fill='none' stroke='%2378a200' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 32px 6px repeat-x; transform: scaleX(0); transform-origin: left; } .menu { background: #0e0c18; background-image: linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px); background-size: 28px 28px; clip-path: circle(0 at calc(100% - 40px) 38px); } .menu[open] { clip-path: circle(150% at calc(100% - 40px) 38px); } @starting-style { .menu[open] { clip-path: circle(0 at calc(100% - 40px) 38px); } } .menu__link { border-bottom-color: var(--line); text-transform: uppercase; font-size: clamp(1.5rem, 7.4vw, 2.25rem); } .menu__close { border-color: var(--line); } .menu__lang { display: flex; flex-wrap: wrap; gap: 4px; } /* seven language codes, 44px each, in the sheet */ .menu__lang a { min-width: 48px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; } /* surfaces that were white on the light site */ .seg-f { top: 76px; background: rgb(14 12 24 / 0.92); } .seg { border-color: var(--line-strong); } .seg__b { background: transparent; color: var(--ink); } .seg__b + .seg__b { border-left-color: var(--line-strong); } .seg__b[aria-pressed="true"] { background: var(--ink); color: #0e0c18; } .chain__step, .ch__ph figcaption { background: rgb(14 12 24 / 0.88); color: var(--ink); } .opt__box, .upload__face, .fld input:not([type="radio"]):not([type="file"]), .fld select, .fld textarea { background: rgb(255 255 255 / 0.04); border-color: var(--line-strong); color: var(--ink); } .fld select option { background: #0e0c18; } .opt input:checked + .opt__box { background: var(--violet-50); border-color: var(--vtext); box-shadow: inset 4px 0 0 var(--vtext); } .st--opt { outline-color: var(--line-strong); } .terms th, .terms td, .row { border-color: var(--line); } .index { border-top-color: var(--line-strong); } /* Home: framed campaign photo, the live H1, one outlined button */ .board--hero { display: flex; flex-direction: column; gap: 0; margin-top: 0; } .hero__since, .hero__loop, .hero__soxuz-f, .hero__lead, .hero__more, body[data-page="home"] .board--lines, .board--auds { display: none; } .hero__camp { order: -1; display: block; aspect-ratio: auto; height: max(220px, calc(100svh - 76px - 290px)); } /* photo, H1 and button fit 100svh under the capsule */ .hero__img { object-position: 47% 50%; } .hero__field { display: block; padding: 22px 18px 24px; background: transparent; color: var(--ink); border-top: 0; --focus: #9cc2ff; } .hero__h { font-size: clamp(1.375rem, 6.4vw, 1.75rem); line-height: 1.12; letter-spacing: -0.015em; } .hero__side { margin-top: 18px; } .hero__go .btn { justify-content: space-between; width: 100%; background: var(--violet); color: #fff; } /* category cards: a snap rail with the neighbours peeking; a tap hands the image to the page head */ .m4 { display: block; margin-top: var(--gap); } .m4-h { padding: 26px var(--in) 14px; font: 600 1.375rem/1.1 var(--display); text-transform: uppercase; } .cards { display: flex; gap: 12px; padding: 0 12vw 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 12vw; scrollbar-width: none; } .cards::-webkit-scrollbar { display: none; } .cards li { flex: 0 0 76vw; scroll-snap-align: center; } .card { display: block; color: var(--ink); text-decoration: none; transition: transform 160ms var(--ease-out); } .card:active { transform: scale(0.98); } .card__img { height: auto; aspect-ratio: 4 / 5; } .card__name { display: block; padding: 14px 16px 2px; font: 600 1.25rem/1.1 var(--display); text-transform: uppercase; } .card__sub { display: block; padding: 0 16px 16px; color: var(--ink-2); font-size: 0.9375rem; } .m4-para { padding: 24px 0 8px; overflow: clip; } .para { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 12px; view-timeline-name: --para; } .para__col { display: grid; align-content: start; gap: 10px; } .para__col--b { margin-top: 70px; } .para__tile { display: block; color: var(--ink); text-decoration: none; } .para__img { height: auto; aspect-ratio: 4 / 5; } .para__name { display: block; padding: 8px 10px 10px; font-weight: 600; font-size: 0.875rem; line-height: 1.25; } /* long German and Polish words break instead of running out of their frame */ :is(p, .line__sub) { overflow-wrap: break-word; hyphens: auto; } /* Headings never break inside a word: site.js sizes each display heading so its longest word fits the frame. Only German and Polish compounds may still hyphenate where one word cannot fit at all. */ :is(h1, h2, h3, .line__name, .card__name, .tile__name, .custom__q, .exp__regions) { overflow-wrap: normal; hyphens: none; } html:is(:lang(de), :lang(pl)) :is(h1, h2, h3, .line__name, .card__name, .custom__q, .exp__regions) { hyphens: auto; } .line__name { font-size: clamp(1.875rem, 9vw, 2.625rem); } /* the rest of Home, compact on the dark canvas */ .rail__head { padding: 28px 20px 18px; } .rail__lead { font-size: 1rem; } .rail__nav { display: none; } .rail { padding-inline: 14px; scroll-padding-inline: 14px; } .rail li { flex-basis: 70vw; } .pc__media { background: rgb(255 255 255 / 0.04); } .adv__title { padding: 26px 20px 12px; } .advs { padding-bottom: 0; gap: 6px; } .adv, .adv:nth-child(n) { position: relative; top: auto; height: auto; min-height: 100px; grid-template-columns: minmax(0, 1fr) 96px; } .adv.tone-paper { border: 1px solid var(--line); } .adv__text { gap: 4px; padding: 12px 16px; } .adv__h { font-size: 1.125rem; line-height: 1.1; letter-spacing: -0.015em; } .adv__p { font-size: 0.9375rem; line-height: 1.35; } .board--made { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; } .board--made > .chain-f { grid-column: span 1 !important; } .made-f { gap: 16px; padding: 28px 20px 16px; } .scrub { font-size: clamp(1.25rem, 5.6vw, 1.5rem); line-height: 1.22; } .chain__step { position: static; max-width: none; padding: 8px 8px 10px; } .chain__step b { font-size: 0.8125rem; } .chain__step span { display: none; } .board--made .chain-f { aspect-ratio: auto; height: auto; } .board--made .chain__img { aspect-ratio: 3 / 4; height: auto; } .cta { min-height: 0; padding: 32px 20px; } .cta__h { font-size: clamp(1.875rem, 8.6vw, 2.375rem); } .cta .btn { width: 100%; } } /* knitting machine: first phone visit per session (site.js builds it; CSS alone hides it after 2.8 s) */ .knit { position: fixed; inset: 0; z-index: 95; display: grid; grid-template-rows: repeat(14, minmax(0, 1fr)); overflow: clip; background: #0e0c18; cursor: pointer; animation: knit-out 420ms ease 2.1s forwards; } .knit.is-skip { animation: knit-out 180ms ease forwards; } .knit__row { background-size: 14px 12px; transform: scaleX(0); transform-origin: left; animation: knit-row 130ms linear forwards; } .knit__row:nth-child(even) { transform-origin: right; } .knit__row--violet { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12'%3E%3Cpath d='M1.5 1.5 7 10.5 12.5 1.5' fill='none' stroke='%23483090' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .knit__row--blue { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12'%3E%3Cpath d='M1.5 1.5 7 10.5 12.5 1.5' fill='none' stroke='%230066d2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .knit__row--red { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12'%3E%3Cpath d='M1.5 1.5 7 10.5 12.5 1.5' fill='none' stroke='%23cc3024' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .knit__row--green { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12'%3E%3Cpath d='M1.5 1.5 7 10.5 12.5 1.5' fill='none' stroke='%2378a200' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .knit__car { position: absolute; left: 0; top: 0; width: 28px; height: calc(100% / 14); background: #f2f0f7; box-shadow: 0 0 18px 2px rgb(185 168 255 / 0.8); } @keyframes knit-row { to { transform: scaleX(1); } } @keyframes knit-out { to { opacity: 0; visibility: hidden; } } @media (max-width: 760px) and (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { .stitch__fill { animation: stitch-grow linear both; animation-timeline: scroll(root block); } .para__col--a { animation: para-a linear both; animation-timeline: --para; } .para__col--b { animation: para-b linear both; animation-timeline: --para; } } } @keyframes stitch-grow { to { transform: scaleX(1); } } @keyframes para-a { from { transform: translateY(40px); } to { transform: translateY(-40px); } } @keyframes para-b { from { transform: translateY(-50px); } to { transform: translateY(90px); } } @media (max-width: 760px) { /* inner pages */ .head__field { gap: 24px; padding: 28px 20px 30px; } .head__h { font-size: clamp(2rem, 9.4vw, 2.625rem); } .head__lead { font-size: 1.0625rem; } .board--head { padding: 0; gap: 0; } .head__media { order: -1; aspect-ratio: 4 / 5; max-height: 72svh; } .seg-f { padding: 8px 0; margin-inline: var(--pad); } .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; } .seg__b { justify-content: center; gap: 6px; min-height: 46px; padding: 0 4px; font-size: 0.9375rem; } .group__band { min-height: 0; padding: 24px 20px; } .group__h { font-size: clamp(1.875rem, 9vw, 2.5rem); } .group__sub { font-size: 1rem; } .pc__body { padding: 12px 12px 14px; gap: 6px; } .pc--tile .pc__name { font-size: 1rem; } .pc-f--big .pc__name { font-size: 1.375rem; } .pc__cta { font-size: 0.9375rem; } .pc--tile .pc__cta { min-height: 32px; } .pc--tile { position: relative; } .custom-f { padding: 24px 20px; } .custom__q { font-size: 1.125rem; } .mosaic .custom-f { gap: 16px; padding: 18px 14px; } .mosaic .custom-f .btn { width: 100%; height: auto; padding: 10px 12px; min-height: 48px; font-size: 0.75rem; line-height: 1.2; text-align: left; white-space: normal; } .mosaic > .pc-f--big + .custom-f .btn { width: auto; } .row__a { grid-template-columns: minmax(0, 1fr) 72px; gap: 8px 14px; min-height: 112px; padding: 14px 20px; } .row__name { font-size: clamp(1.375rem, 6.4vw, 1.75rem); } .row__tags { justify-content: flex-start; grid-column: 1; } .row__thumb { display: block; grid-column: 2; grid-row: 1 / 3; width: 72px; height: 90px; object-fit: cover; } .row__thumb--sw { background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.12) 0 2px, transparent 2px 8px); } .row__cta { display: none; } .ch__text { padding: 24px 20px; font-size: 1.0625rem; } .ch__h { font-size: 2rem; } .qc-f, .qc-t, .mi, .exp, .pair, .send__head, .send-f, .terms-f, .st { padding: 24px 20px; min-height: 0; } .qc__h { font-size: 1.75rem; } .mi { min-height: 300px; } .st { min-height: 0; } .tiers thead { display: none; } .tiers, .tiers tbody { display: block; } .tiers tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 16px; margin-bottom: var(--gap); padding: 20px; } .tiers tbody .num { text-align: left; } .tiers tbody th, .tiers tbody td { padding: 0; } .tiers tbody td:last-child { grid-column: 1 / -1; } .tiers tbody .num { font-size: 1.5rem; } .exp { min-height: 360px; } .exp__regions { font-size: 2.25rem; } .ct { padding: 24px 20px; } .form-f { padding: 22px 16px; } .form__row, .form__row--3, .opts { grid-template-columns: minmax(0, 1fr); } .form__send { display: contents; } .form__submit { position: sticky; bottom: 12px; z-index: 5; justify-content: space-between; width: 100%; box-shadow: 0 0 0 10px #0e0c18; } .ftr__brand { padding: 24px 20px; } .ftr__word { font-size: 12vw; } .ftr__col { padding: 22px 20px 24px; } .ftr__col a { min-height: 44px; } .ftr__base { padding: 10px 20px 24px; } } /* ------------------------------------------------------------------ motion: scroll-scrubbed words */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .scrub .w { animation: w-in linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; } } } @keyframes w-in { from { opacity: 0.4; } to { opacity: 1; } } /* ------------------------------------------------------------------ motion: View Transitions between pages */ @view-transition { navigation: auto; } ::view-transition-group(*) { animation-duration: 520ms; animation-timing-function: var(--ease-in-out); } ::view-transition-old(root) { animation: vt-out 240ms var(--ease-out) both; } ::view-transition-new(root) { animation: vt-in 420ms var(--ease-out) 80ms both; } ::view-transition-group(hdr), ::view-transition-group(dock) { animation: none; } ::view-transition-old(field), ::view-transition-new(field) { height: 100%; object-fit: none; overflow: clip; } @keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; transform: translateY(24px); } } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .menu, .menu[open] { clip-path: none; } } /* ------------------------------------------------------------------ seven languages (SHF-60b) */ /* Unbounded and Ysabeau Office have no CJK or Arabic glyphs. They stay first in the stack, so Latin wordmarks, SOXUZ and numbers keep the brand faces while Chinese and Arabic fall to the system faces. */ html:lang(zh) { --display: "Unbounded", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; --text: "Ysabeau Office", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; } html:lang(ar) { --display: "Unbounded", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", "Tahoma", sans-serif; --text: "Ysabeau Office", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", "Tahoma", sans-serif; } /* Tight Latin tracking and leading collide in Han and break Arabic joining. */ html:is(:lang(zh), :lang(ar)) body :not(.brand__word, .hero__word, .ftr__word, .hero__year, .qc__num) { letter-spacing: normal !important; } html:is(:lang(zh), :lang(ar)) :is(h1, h2, h3, h4, .scrub, .qc__lead, .exp__regions) { line-height: 1.22; } /* Chinese headings keep their words whole and break at punctuation; a word breaks only when a line cannot fit. */ html:lang(zh) :is(h1, h2, h3, .line__name, .card__name, .tile__name) { word-break: keep-all; overflow-wrap: anywhere; } /* Long German compounds in the display headings. */ html:lang(de) :is(h1, h2, h3, h4) { hyphens: auto; } /* Right to left (AR): mirror the physical left/right rules; the grids and flex rows follow dir by themselves. */ [dir="rtl"] .skip { left: auto; right: 8px; } [dir="rtl"] .hdr__nav { margin-left: 0; margin-inline-start: auto; } [dir="rtl"] .line__text, [dir="rtl"] .chain__step, [dir="rtl"] .ch__ph figcaption { left: auto; right: 0; } [dir="rtl"] .line__text .ico { right: auto; left: 26px; } [dir="rtl"] .rebuild { margin-left: 0; margin-inline-start: auto; } [dir="rtl"] .rebuild .dot:last-of-type { margin-right: 0; margin-inline-end: 8px; } [dir="rtl"] .seg__b + .seg__b { border-left: 0; border-inline-start: 1.5px solid var(--ink); } [dir="rtl"] :is(.tiers thead th, .tiers tbody th, .tiers tbody td, .terms th) { text-align: start; } [dir="rtl"] :is(.tiers .num, .terms td) { text-align: end; } [dir="rtl"] .terms th { padding-right: 0; padding-inline-end: 20px; } /* Phone numbers keep their digit groups in order inside Arabic text. */ [dir="rtl"] a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; justify-content: flex-end; } /* Arrows point the reading way; the hover nudges follow. */ [dir="rtl"] .ico { transform: scaleX(-1); } @media (hover: hover) and (pointer: fine) { [dir="rtl"] .btn:hover .ico, [dir="rtl"] .pc--tile:hover .pc__cta .ico { transform: scaleX(-1) translateX(4px); } [dir="rtl"] .hero__brand:hover .ico, [dir="rtl"] .line:hover .line__text .ico, [dir="rtl"] .aud:hover .ico { transform: scaleX(-1) translateX(8px); } [dir="rtl"] .row__a:hover .row__name { transform: translateX(-14px); } } @media (max-width: 1023px) { .hdr__lang, .menu__close { margin-left: 0; margin-inline-start: auto; } } /* Phone: seven language codes share the top bar with the logo, so the small wordmark yields (the hero wordmark sits right below) and the codes split the free width, 44px tall each. */ @media (max-width: 760px) { .hdr .brand__word { display: none; } .hdr__lang { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 0; } .hdr__lang a { flex: 0 1 44px; min-width: 0; } [dir="rtl"] .line__text { left: 0; } [dir="rtl"] .mosaic .custom-f .btn { text-align: start; } } /* ---- SHF-60c port of the live form into v7 (tools/v7_port.css, appended by tools/v7_to_php.py; edit here, not in assets/v7). */ .hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* send.php error (?err=): first in the form, read out and focused. */ .form-error { padding: 18px 20px; background: var(--err); color: #fff; font-weight: 600; --focus: #fff; } /* Form off or disk ceiling: the live contacts card takes the form's place. */ .form-off { display: grid; gap: 16px; } .form-off .contacts { display: grid; gap: 12px; } .form-off h2 { font: 700 1.375rem/1.2 var(--display); } .form-off .contact-list { display: grid; gap: 10px; } .form-off .contact-list li { display: grid; gap: 2px; } .form-off .c-label { color: var(--ink-2); font-size: 0.9375rem; } .form-off .contact-list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; } .form__submit:disabled, .dock__cta:disabled { cursor: progress; opacity: 0.7; } /* Style attributes of the design as classes (CSP style-src 'self'), written by tools/v7_to_php.py. */ .v7s-00c0e503 { object-position: 100% 50% !important; view-transition-name: img-prod !important; } .v7s-11205067 { object-position: 100% 50% !important; } .v7s-2246681d { view-transition-name: field !important; } .v7s-3d970cac { object-position: 0% 50% !important; } .v7s-618f01a0 { object-position: 75% 50% !important; } .v7s-648eb6f8 { view-transition-name: img-knit !important; } .v7s-c616f880 { view-transition-name: img-ws !important; } .v7s-e3c73eb8 { view-transition-name: img-socks !important; } /* swarm.js styles, moved out of the