Кожаные предметы клуба | BY.SKOROBOGATOV × Российский сигарный союз
:root {
—ink: #241c16;
—ink-soft: #51473f;
—paper: #faf6ee;
—paper-deep: #f5eee2;
—sand: #efe4d4;
—sand-deep: #ddcbb4;
—brown: #593727;
—brown-deep: #321f16;
—blue: #a9c1d1;
—blue-deep: #526f84;
—white: #fffdf8;
—line: rgba(36, 28, 22, 0.17);
—line-strong: rgba(36, 28, 22, 0.29);
—line-light: rgba(255, 253, 248, 0.2);
—muted: rgba(36, 28, 22, 0.68);
—muted-light: rgba(255, 253, 248, 0.7);
—shadow: 0 22px 58px rgba(50, 31, 22, 0.12);
—radius: 6px;
—container: min(1180px, calc(100% — 48px));
—serif: Georgia, «Times New Roman», Times, serif;
—sans: Arial, «Helvetica Neue», Helvetica, sans-serif;
}
* {
box-sizing: border-box;
letter-spacing: 0;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
overflow-x: hidden;
color: var(—ink);
background: var(—paper);
font-family: var(—sans);
line-height: 1.52;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img {
display: block;
width: 100%;
max-width: 100%;
}
a {
color: inherit;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
:focus-visible {
outline: 2px solid var(—blue-deep);
outline-offset: 4px;
}
.container {
width: var(—container);
margin: 0 auto;
}
.page-section {
padding: 100px 0;
scroll-margin-top: 84px;
}
.eyebrow {
margin: 0 0 14px;
color: var(—blue-deep);
font-size: 0.76rem;
font-weight: 700;
text-transform: uppercase;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1,
h2,
.display {
font-family: var(—serif);
font-weight: 400;
}
h1 {
max-width: 760px;
margin-bottom: 26px;
font-size: 4.7rem;
line-height: 0.98;
}
h2 {
max-width: 790px;
margin-bottom: 18px;
font-size: 3.35rem;
line-height: 1.04;
}
h3 {
margin-bottom: 10px;
font-size: 1.17rem;
line-height: 1.24;
}
.lead {
max-width: 700px;
margin-bottom: 0;
color: var(—muted);
font-size: 1.08rem;
}
.section-head {
display: grid;
grid-template-columns: 70px minmax(0, 1fr);
gap: 26px;
align-items: start;
margin-bottom: 46px;
}
.section-number {
display: grid;
width: 54px;
height: 54px;
place-items: center;
color: var(—brown);
font-size: 0.75rem;
font-weight: 700;
border: 1px solid var(—line);
border-radius: 50%;
}
.header {
position: sticky;
top: 0;
z-index: 30;
min-height: 71px;
border-bottom: 0;
background: #fef5e8;
box-shadow: rgba(53, 35, 24, 0.05) 0 1px 0;
}
.header__inner {
display: flex;
min-height: 71px;
align-items: center;
gap: 20px;
padding: 12px 0;
}
.brand {
display: inline-flex;
align-items: center;
gap: 14px;
flex: 0 0 auto;
text-decoration: none;
}
.brand__logo {
width: 46px;
height: 46px;
padding: 7px;
border: 1px solid rgba(53, 35, 24, 0.3);
border-radius: 50%;
object-fit: contain;
}
.brand__name {
font-family: «PT Serif», Georgia, serif;
font-size: 1.375rem;
font-weight: 700;
}
.nav {
display: flex;
align-items: center;
gap: 18px;
margin-left: auto;
}
.nav a {
padding: 0;
color: #352318;
font-family: «PT Serif», Georgia, serif;
font-size: 0.94rem;
font-weight: 700;
text-decoration: none;
transition: color 160ms ease, background-color 160ms ease;
}
.nav a:hover {
color: var(—blue-deep);
background: transparent;
}
.header__action {
min-height: 42px;
margin-left: 4px;
padding: 9px 15px;
font-size: 0.78rem;
}
.button {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 21px;
border: 1px solid var(—brown-deep);
border-radius: 4px;
color: var(—white);
background: var(—brown-deep);
font-size: 0.91rem;
font-weight: 700;
text-decoration: none;
transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
}
.button:hover {
transform: translateY(-2px);
background: var(—brown);
}
.button—light {
border-color: var(—line-strong);
color: var(—ink);
background: transparent;
}
.button—light:hover {
color: var(—paper);
background: var(—brown);
}
.button—white {
border-color: var(—white);
color: var(—brown-deep);
background: var(—white);
}
.button—white:hover {
color: var(—paper);
background: transparent;
}
.arrow {
font-size: 1.08rem;
line-height: 1;
}
.hero {
padding: 38px 0 0;
background:
linear-gradient(90deg, rgba(82, 111, 132, 0.08) 1px, transparent 1px) 0 0 / 96px 96px,
var(—paper);
}
.hero__frame {
display: grid;
min-height: 670px;
grid-template-columns: minmax(0, 1.03fr) minmax(390px, 0.97fr);
border: 1px solid var(—line);
background: rgba(255, 253, 248, 0.82);
box-shadow: var(—shadow);
}
.hero__copy {
display: flex;
min-width: 0;
flex-direction: column;
justify-content: center;
padding: 70px 66px;
}
.hero__copy h1 {
max-width: 100%;
font-size: clamp(3.5rem, 4.35vw, 4.35rem);
line-height: 1.01;
}
.hero__lead {
max-width: 640px;
margin-bottom: 34px;
color: var(—ink-soft);
font-size: 1.12rem;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.hero__note {
max-width: 540px;
margin: 28px 0 0;
padding-top: 22px;
color: var(—muted);
font-size: 0.82rem;
border-top: 1px solid var(—line);
}
.hero__media {
position: relative;
min-width: 0;
min-height: 670px;
overflow: hidden;
background: var(—brown-deep);
}
.hero__media img {
height: 100%;
object-fit: cover;
object-position: 54% 50%;
}
.hero__media::after {
position: absolute;
inset: 0;
content: «»;
background: linear-gradient(180deg, transparent 54%, rgba(25, 14, 9, 0.72));
pointer-events: none;
}
.hero__caption {
position: absolute;
z-index: 1;
right: 26px;
bottom: 24px;
left: 26px;
margin: 0;
color: rgba(255, 253, 248, 0.8);
font-size: 0.78rem;
}
.context-strip {
margin-top: 34px;
border-top: 1px solid var(—line);
border-bottom: 1px solid var(—line);
background: var(—sand);
}
.context-strip__inner {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.context-point {
min-height: 156px;
padding: 30px 32px;
border-right: 1px solid var(—line);
}
.context-point:last-child {
border-right: 0;
}
.context-point strong {
display: block;
margin-bottom: 7px;
font-family: var(—serif);
font-size: 1.75rem;
font-weight: 400;
line-height: 1.08;
}
.context-point span {
color: var(—muted);
font-size: 0.88rem;
}
.context-point a {
text-underline-offset: 3px;
}
.principles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 38px;
border-top: 1px solid var(—line-strong);
border-bottom: 1px solid var(—line-strong);
}
.principle {
min-height: 210px;
padding: 32px 34px 34px 0;
border-right: 1px solid var(—line);
}
.principle + .principle {
padding-left: 34px;
}
.principle:last-child {
border-right: 0;
}
.principle__index {
display: block;
margin-bottom: 32px;
color: var(—blue-deep);
font-size: 0.72rem;
font-weight: 700;
}
.principle p {
margin-bottom: 0;
color: var(—muted);
font-size: 0.92rem;
}
.directions {
background: var(—paper-deep);
border-top: 1px solid var(—line);
border-bottom: 1px solid var(—line);
}
.direction-list {
display: grid;
gap: 28px;
}
.direction {
display: grid;
min-height: 590px;
grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
border: 1px solid var(—line);
background: var(—paper);
box-shadow: 0 14px 38px rgba(50, 31, 22, 0.06);
}
.direction—reverse .direction__media {
order: 2;
}
.direction__media {
position: relative;
min-width: 0;
min-height: 590px;
overflow: hidden;
background: var(—brown-deep);
}
.direction__media img {
height: 100%;
object-fit: cover;
}
.direction__media—member img {
object-position: 48% 50%;
}
.direction__media—craft img {
object-position: 51% 56%;
}
.direction__media-label {
position: absolute;
right: 18px;
bottom: 18px;
left: 18px;
margin: 0;
padding: 12px 14px;
color: var(—paper);
background: rgba(50, 31, 22, 0.82);
font-size: 0.72rem;
backdrop-filter: blur(10px);
}
.direction__mosaic {
display: grid;
height: 100%;
grid-template-rows: 1.1fr 0.9fr;
gap: 1px;
background: var(—line);
}
.direction__mosaic img {
min-height: 0;
object-fit: cover;
}
.direction__mosaic img:first-child {
object-position: 52% 50%;
}
.direction__mosaic img:last-child {
object-position: 52% 52%;
}
.direction__copy {
display: flex;
min-width: 0;
flex-direction: column;
justify-content: center;
padding: 56px 58px;
}
.direction__number {
margin: 0 0 24px;
color: var(—blue-deep);
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
}
.direction__copy h3 {
margin-bottom: 17px;
font-family: var(—serif);
font-size: 2.55rem;
font-weight: 400;
line-height: 1.04;
}
.direction__intro {
margin-bottom: 26px;
color: var(—ink-soft);
font-size: 1rem;
}
.decision {
margin: 0 0 24px;
padding: 19px 20px;
border-left: 3px solid var(—blue-deep);
background: rgba(169, 193, 209, 0.22);
color: var(—ink-soft);
font-size: 0.9rem;
}
.evidence {
display: grid;
margin: 0;
border-top: 1px solid var(—line);
}
.evidence__row {
display: grid;
grid-template-columns: 132px minmax(0, 1fr);
gap: 18px;
padding: 15px 0;
border-bottom: 1px solid var(—line);
}
.evidence dt {
margin: 0;
color: var(—muted);
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
}
.evidence dd {
margin: 0;
color: var(—ink-soft);
font-size: 0.87rem;
}
.reference-carousel {
position: relative;
min-width: 0;
min-height: 590px;
overflow: hidden;
background: var(—brown-deep);
}
.reference-carousel__viewport,
.reference-slide,
.reference-slide__image {
height: 100%;
}
.reference-slide {
position: absolute;
inset: 0;
display: none;
margin: 0;
overflow: hidden;
}
.reference-slide.is-active {
display: block;
}
.reference-slide__image {
display: block;
text-decoration: none;
}
.reference-slide img {
height: 100%;
object-fit: cover;
transition: transform 420ms ease;
}
.reference-slide__image:hover img {
transform: scale(1.018);
}
.reference-slide—contain img {
padding: 42px;
object-fit: contain;
background: #ebe8e0;
}
.reference-slide::after {
position: absolute;
inset: auto 0 0;
height: 44%;
content: «»;
background: linear-gradient(180deg, transparent, rgba(24, 14, 9, 0.9));
pointer-events: none;
}
.reference-slide figcaption {
position: absolute;
z-index: 2;
right: 142px;
bottom: 20px;
left: 22px;
color: var(—paper);
font-size: 0.76rem;
line-height: 1.42;
}
.reference-slide figcaption strong {
display: block;
margin-bottom: 3px;
font-size: 0.87rem;
}
.reference-slide figcaption a {
color: var(—blue);
text-underline-offset: 3px;
}
.reference-carousel__controls {
position: absolute;
z-index: 4;
right: 18px;
bottom: 18px;
display: flex;
align-items: center;
gap: 8px;
}
.reference-carousel__button {
display: grid;
width: 46px;
height: 46px;
padding: 0;
place-items: center;
border: 1px solid rgba(255, 253, 248, 0.56);
border-radius: 50%;
color: var(—ink);
background: rgba(255, 253, 248, 0.92);
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
transition: transform 160ms ease, background-color 160ms ease;
backdrop-filter: blur(8px);
}
.reference-carousel__button:hover {
transform: translateY(-2px);
background: var(—white);
}
.reference-carousel__dots {
position: absolute;
z-index: 4;
top: 20px;
left: 20px;
display: flex;
gap: 8px;
padding: 8px 10px;
border-radius: 20px;
background: rgba(36, 28, 22, 0.55);
backdrop-filter: blur(8px);
}
.reference-carousel__dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 253, 248, 0.48);
cursor: pointer;
transition: width 160ms ease, background-color 160ms ease;
}
.reference-carousel__dot.is-active {
width: 24px;
border-radius: 6px;
background: var(—white);
}
.reference-note {
margin: 24px 0 0;
color: var(—muted);
font-size: 0.78rem;
}
.additional {
margin-top: 28px;
padding: 48px 50px;
color: var(—paper);
background: var(—brown-deep);
}
.additional__head {
display: grid;
grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
gap: 40px;
align-items: end;
margin-bottom: 35px;
}
.additional__head h3 {
margin: 0;
font-family: var(—serif);
font-size: 2.25rem;
font-weight: 400;
}
.additional__head p {
max-width: 580px;
margin: 0;
color: var(—muted-light);
font-size: 0.9rem;
}
.additional__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(—line-light);
}
.additional-item {
min-height: 190px;
padding: 28px 28px 10px 0;
border-right: 1px solid var(—line-light);
}
.additional-item + .additional-item {
padding-left: 28px;
}
.additional-item:last-child {
border-right: 0;
}
.additional-item span {
display: block;
margin-bottom: 25px;
color: var(—blue);
font-size: 0.71rem;
font-weight: 700;
text-transform: uppercase;
}
.additional-item h3 {
font-family: var(—serif);
font-size: 1.52rem;
font-weight: 400;
}
.additional-item p {
margin: 0;
color: var(—muted-light);
font-size: 0.83rem;
}
.scenario-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(—line-strong);
border-bottom: 1px solid var(—line-strong);
}
.scenario {
min-height: 330px;
padding: 34px 34px 30px 0;
border-right: 1px solid var(—line);
}
.scenario + .scenario {
padding-left: 34px;
}
.scenario:last-child {
border-right: 0;
}
.scenario__volume {
margin-bottom: 28px;
color: var(—brown);
font-family: var(—serif);
font-size: 2.3rem;
line-height: 1;
}
.scenario p {
color: var(—muted);
font-size: 0.9rem;
}
.scenario__status {
display: inline-block;
margin-top: 18px;
padding-top: 14px;
color: var(—blue-deep);
font-size: 0.74rem;
font-weight: 700;
border-top: 1px solid var(—line);
}
.scenario-note {
max-width: 850px;
margin: 24px 0 0;
color: var(—muted);
font-size: 0.8rem;
}
.personalization {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
border: 1px solid var(—line);
background: var(—paper);
}
.personalization__media {
min-height: 620px;
overflow: hidden;
background: var(—brown-deep);
}
.personalization__media img {
height: 100%;
object-fit: cover;
object-position: 50% 54%;
}
.personalization__copy {
padding: 58px 60px;
}
.personalization__copy h3 {
margin-bottom: 20px;
font-family: var(—serif);
font-size: 2.7rem;
font-weight: 400;
line-height: 1.05;
}
.personalization__copy > p {
color: var(—muted);
}
.personalization-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 32px;
border-top: 1px solid var(—line);
}
.personalization-item {
min-height: 126px;
padding: 21px 22px 18px 0;
border-right: 1px solid var(—line);
border-bottom: 1px solid var(—line);
}
.personalization-item:nth-child(even) {
padding-left: 22px;
border-right: 0;
}
.personalization-item strong {
display: block;
margin-bottom: 6px;
font-size: 0.9rem;
}
.personalization-item span {
color: var(—muted);
font-size: 0.79rem;
}
.legal-note {
margin-top: 28px;
padding: 25px 28px;
border-left: 3px solid var(—blue-deep);
background: var(—sand);
}
.legal-note strong {
display: block;
margin-bottom: 7px;
font-size: 0.88rem;
}
.legal-note p {
margin: 0;
color: var(—muted);
font-size: 0.8rem;
}
.legal-note a {
text-underline-offset: 3px;
}
.process {
color: var(—paper);
background: var(—brown-deep);
}
.process .eyebrow {
color: var(—blue);
}
.process .section-number {
color: var(—paper);
border-color: var(—line-light);
}
.process .lead {
color: var(—muted-light);
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(—line-light);
border-bottom: 1px solid var(—line-light);
}
.process-step {
min-height: 255px;
padding: 29px 26px 28px 0;
border-right: 1px solid var(—line-light);
}
.process-step + .process-step {
padding-left: 26px;
}
.process-step:last-child {
border-right: 0;
}
.process-step__number {
display: block;
margin-bottom: 40px;
color: var(—blue);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.process-step h3 {
color: var(—white);
font-family: var(—serif);
font-size: 1.55rem;
font-weight: 400;
}
.process-step p {
margin: 0;
color: var(—muted-light);
font-size: 0.95rem;
}
.process__footer {
margin: 38px 0 0;
color: var(—muted-light);
font-size: 0.78rem;
text-transform: uppercase;
}
.quality {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 1px;
margin-top: 28px;
background: var(—line-light);
border: 1px solid var(—line-light);
}
.quality__copy {
padding: 36px 38px;
background: rgba(255, 253, 248, 0.05);
}
.quality__copy h3 {
font-family: var(—serif);
font-size: 2rem;
font-weight: 400;
}
.quality__copy p {
max-width: 680px;
margin: 0;
color: var(—muted-light);
font-size: 0.88rem;
}
.quality__media {
min-height: 250px;
overflow: hidden;
background: var(—brown);
}
.quality__media img {
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
.commercial-table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(—line);
background: var(—white);
}
.commercial-table th,
.commercial-table td {
padding: 22px 20px;
vertical-align: top;
text-align: left;
border-right: 1px solid var(—line);
border-bottom: 1px solid var(—line);
}
.commercial-table th:last-child,
.commercial-table td:last-child {
border-right: 0;
}
.commercial-table tr:last-child td {
border-bottom: 0;
}
.commercial-table th {
color: var(—muted);
background: var(—sand);
font-size: 0.72rem;
text-transform: uppercase;
}
.commercial-table td {
color: var(—ink-soft);
font-size: 0.85rem;
}
.commercial-table td:first-child {
color: var(—ink);
font-weight: 700;
}
.status {
color: var(—blue-deep);
font-weight: 700;
}
.price-note {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 40px;
margin-top: 26px;
padding: 30px 32px;
border: 1px solid var(—line);
background: var(—paper-deep);
}
.price-note strong {
font-family: var(—serif);
font-size: 1.62rem;
font-weight: 400;
}
.price-note p {
margin: 0;
color: var(—muted);
font-size: 0.84rem;
}
.brief {
background: var(—blue);
border-top: 1px solid rgba(82, 111, 132, 0.35);
border-bottom: 1px solid rgba(82, 111, 132, 0.35);
}
.brief-layout {
display: grid;
grid-template-columns: minmax(0, 0.83fr) minmax(0, 1.17fr);
gap: 70px;
align-items: start;
}
.brief-copy h2 {
margin-bottom: 24px;
}
.brief-copy p {
max-width: 500px;
color: rgba(36, 28, 22, 0.72);
}
.brief-copy .button {
margin-top: 16px;
}
.brief-list {
counter-reset: brief;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid rgba(36, 28, 22, 0.28);
}
.brief-list li {
display: grid;
min-height: 82px;
grid-template-columns: 44px minmax(0, 1fr);
gap: 16px;
align-items: center;
color: var(—ink-soft);
border-bottom: 1px solid rgba(36, 28, 22, 0.28);
counter-increment: brief;
}
.brief-list li::before {
content: «0» counter(brief);
color: var(—brown);
font-size: 0.73rem;
font-weight: 700;
}
.faq-list {
max-width: 920px;
margin-left: auto;
border-top: 1px solid var(—line-strong);
}
details {
border-bottom: 1px solid var(—line-strong);
}
summary {
display: flex;
min-height: 82px;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 18px 0;
font-family: var(—serif);
font-size: 1.34rem;
cursor: pointer;
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
summary::after {
flex: 0 0 auto;
content: «+»;
color: var(—blue-deep);
font-family: var(—sans);
font-size: 1.15rem;
}
details[open] summary::after {
content: «−»;
}
details p {
max-width: 760px;
margin: 0 0 24px;
color: var(—muted);
font-size: 0.88rem;
}
.final {
padding: 88px 0;
color: var(—paper);
background: var(—brown-deep);
}
.final__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 44px;
align-items: end;
}
.final h2 {
max-width: 850px;
margin-bottom: 20px;
color: var(—white);
}
.final p {
max-width: 690px;
margin: 0;
color: var(—muted-light);
}
.final__actions {
display: grid;
gap: 10px;
min-width: 230px;
}
.final__contact {
margin-top: 34px;
padding-top: 25px;
color: var(—muted-light);
font-size: 0.8rem;
border-top: 1px solid var(—line-light);
}
.final__contact a {
margin-right: 20px;
text-underline-offset: 4px;
}
.sources {
padding: 28px 0;
border-top: 1px solid var(—line);
background: var(—paper-deep);
}
.sources__inner {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 30px;
}
.sources p {
max-width: 780px;
margin: 0;
color: var(—muted);
font-size: 0.7rem;
}
.sources a {
text-underline-offset: 3px;
}
.footer {
padding: 26px 0;
border-top: 1px solid var(—line);
background: var(—paper);
}
.footer__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.footer p {
margin: 0;
color: var(—muted);
font-size: 0.72rem;
}
@media (max-width: 1040px) {
h1 {
font-size: 3.85rem;
}
h2 {
font-size: 2.9rem;
}
.nav {
display: none;
}
.hero__frame {
grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
}
.hero__copy {
padding: 58px 46px;
}
.direction__copy {
padding: 44px 42px;
}
.additional {
padding: 42px 38px;
}
.personalization__copy {
padding: 48px 44px;
}
.brief-layout {
gap: 48px;
}
}
@media (max-width: 860px) {
:root {
—container: min(100% — 32px, 720px);
}
.page-section {
padding: 78px 0;
}
h1 {
font-size: 3.45rem;
}
h2 {
font-size: 2.6rem;
}
.nav {
display: none;
}
.header__action {
display: inline-flex;
min-height: 39px;
padding: 8px 12px;
font-size: 0.74rem;
}
.hero {
padding-top: 22px;
}
.hero__frame,
.direction,
.personalization,
.quality,
.brief-layout,
.final__inner {
grid-template-columns: 1fr;
}
.hero__frame {
min-height: 0;
}
.hero__copy {
min-height: 520px;
padding: 56px 48px;
}
.hero__media {
min-height: 520px;
}
.context-strip__inner,
.principles,
.scenario-grid,
.additional__grid {
grid-template-columns: 1fr;
}
.context-point,
.principle,
.principle + .principle,
.scenario,
.scenario + .scenario,
.additional-item,
.additional-item + .additional-item {
min-height: 0;
padding: 27px 0;
border-right: 0;
border-bottom: 1px solid var(—line);
}
.context-point:last-child,
.principle:last-child,
.scenario:last-child,
.additional-item:last-child {
border-bottom: 0;
}
.principle__index {
margin-bottom: 13px;
}
.direction—reverse .direction__media {
order: 0;
}
.direction__media {
min-height: 510px;
}
.reference-carousel {
min-height: 560px;
}
.direction__mosaic {
min-height: 760px;
}
.additional__head {
grid-template-columns: 1fr;
gap: 14px;
}
.additional__grid {
border-color: var(—line-light);
}
.additional-item,
.additional-item + .additional-item {
border-color: var(—line-light);
}
.scenario-grid {
border-bottom: 0;
}
.personalization__media {
min-height: 560px;
}
.process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.process-step:nth-child(2) {
border-right: 0;
}
.process-step:nth-child(-n+2) {
border-bottom: 1px solid var(—line-light);
}
.quality__media {
min-height: 420px;
}
.commercial-table {
min-width: 820px;
}
.table-scroll {
overflow-x: auto;
padding-bottom: 8px;
}
.price-note {
grid-template-columns: 1fr;
gap: 12px;
}
.brief-layout {
gap: 42px;
}
.final__actions {
width: min(100%, 360px);
}
}
@media (max-width: 600px) {
:root {
—container: calc(100% — 24px);
}
.page-section {
padding: 62px 0;
}
.header__inner {
min-height: 64px;
}
.brand__logo {
width: 33px;
height: 33px;
padding: 5px;
}
.brand__name {
font-size: 0.95rem;
}
.header__action {
width: auto;
flex: 0 0 auto;
padding-inline: 10px;
}
h1 {
font-size: 2.75rem;
line-height: 1;
}
h2 {
font-size: 2.25rem;
}
.lead {
font-size: 0.98rem;
}
.section-head {
grid-template-columns: 46px minmax(0, 1fr);
gap: 14px;
margin-bottom: 34px;
}
.section-number {
width: 42px;
height: 42px;
}
.hero__copy {
min-height: 0;
padding: 46px 24px;
}
.hero__lead {
font-size: 1rem;
}
.hero__actions {
display: grid;
}
.button {
width: 100%;
}
.button.header__action {
width: auto;
}
.hero__media {
min-height: 430px;
}
.context-point {
padding-inline: 18px;
}
.direction {
min-height: 0;
}
.direction__media {
min-height: 420px;
}
.reference-carousel {
min-height: 500px;
}
.reference-slide figcaption {
right: 22px;
bottom: 82px;
}
.reference-carousel__controls {
right: 14px;
bottom: 14px;
}
.reference-carousel__dots {
top: 14px;
left: 14px;
}
.reference-slide—contain img {
padding: 28px;
}
.direction__mosaic {
min-height: 600px;
}
.direction__copy {
padding: 38px 24px;
}
.direction__copy h3 {
font-size: 2.15rem;
}
.evidence__row {
grid-template-columns: 1fr;
gap: 7px;
}
.additional {
padding: 38px 24px;
}
.additional__head h3 {
font-size: 1.95rem;
}
.personalization__media {
min-height: 440px;
}
.personalization__copy {
padding: 40px 24px;
}
.personalization__copy h3 {
font-size: 2.25rem;
}
.personalization-list {
grid-template-columns: 1fr;
}
.personalization-item,
.personalization-item:nth-child(even) {
min-height: 0;
padding: 18px 0;
border-right: 0;
}
.process-grid {
grid-template-columns: 1fr;
}
.process-step,
.process-step + .process-step {
min-height: 0;
padding: 25px 0;
border-right: 0;
border-bottom: 1px solid var(—line-light);
}
.process-step:last-child {
border-bottom: 0;
}
.process-step__number {
margin-bottom: 16px;
}
.quality__copy {
padding: 30px 24px;
}
.quality__media {
min-height: 340px;
}
.commercial-table th,
.commercial-table td {
padding: 17px 15px;
}
.price-note {
padding: 25px 23px;
}
.brief-list li {
min-height: 74px;
}
summary {
font-size: 1.15rem;
}
.final {
padding: 68px 0;
}
.final__contact {
display: grid;
gap: 8px;
}
.sources__inner,
.footer__inner {
display: grid;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media print {
.header {
position: static;
}
.page-section {
padding: 54px 0;
}
.button {
border-color: var(—ink);
color: var(—ink);
background: transparent;
}
.hero__frame,
.direction,
.personalization,
.quality {
break-inside: avoid;
box-shadow: none;
}
}
/* WordPress compatibility: preserve the standalone proposal layout. */
body.page-id-959 {
—brown: #593727;
—container: min(1180px, calc(100% — 48px));
margin: 0 !important;
overflow-x: hidden !important;
color: var(—ink) !important;
background: var(—paper) !important;
font-family: var(—sans) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.52 !important;
}
body.page-id-959 > .sk-header,
body.page-id-959 > .sk-overlay,
body.page-id-959 > .sk-drawer,
body.page-id-959 > .sk-footer,
body.page-id-959 .sk-page__title {
display: none !important;
}
body.page-id-959 .sk-page,
body.page-id-959 .sk-page > .sk-container,
body.page-id-959 .sk-content,
body.page-id-959 .sk-content > main {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-id-959 .sk-content p {
margin-top: 0;
font-weight: 400;
}
body.page-id-959 .sk-content h1,
body.page-id-959 .sk-content h2,
body.page-id-959 .sk-content h3 {
color: var(—ink);
border-top: 0;
padding-top: 0;
}
body.page-id-959 .sk-content h1,
body.page-id-959 .sk-content h2,
body.page-id-959 .sk-content .display {
font-family: var(—serif);
font-weight: 400;
}
body.page-id-959 .sk-content .button,
body.page-id-959 .header .button {
color: var(—white);
text-decoration: none;
}
body.page-id-959 .sk-content .button—light,
body.page-id-959 .sk-content .button—white {
color: var(—brown-deep);
}
body.page-id-959 .sk-content .process h2,
body.page-id-959 .sk-content .process h3,
body.page-id-959 .sk-content .final h2,
body.page-id-959 .sk-content .final h3 {
color: var(—white) !important;
}
body.page-id-959 .sk-content .process p,
body.page-id-959 .sk-content .final p {
color: var(—muted-light);
}
body.admin-bar.page-id-959 .header {
top: 32px;
}
@media (max-width: 782px) {
body.admin-bar.page-id-959 .header {
top: 46px;
}
}
Предложение для Российского сигарного союза
Кожаные аксессуары для участников клуба
Обложка на паспорт, чехол для блокнота и новые конструкции под сигары, зажигалку и каттер.
Кожаные лотки BY.SKOROBOGATOV: ручная работа, натуральная итальянская кожа и персонализация.
Задача
Подарки участникам, клубные аксессуары и предмет членства.
До 500 штук
Тираж из брифа. Производственный график — после выбора конструкции.
Россия
Условия доставки уточняются при расчёте.
01
Для первого расчёта достаточно выбрать один предмет и его назначение
Из брифа
Подарки участникам
На изделие можно нанести имя, номер участника, год вступления или дату события.
Готовая основа
Лоток и обложка
Эти позиции уже существуют в ассортименте. Для расчёта нужны размер, цвет и вариант тиснения.
Новая конструкция
Футляр и чехлы
Изготовим функциональный образец под индивидуальные пожелания — сигары, зажигалка, каттер.
Позиция 01 · личный аксессуар
Обложка на паспорт
Готовая конструкция из натуральной кожи. Подходит для клубной серии, подарков участникам и именных выпусков.
Для расчёта: выбрать цвет кожи, вариант тиснения, тираж и упаковку.
Основа
Существующая конструкция обложки на паспорт.
Нанесение
Имя, номер, инициалы, год и знак клуба.
Нужно уточнить
Цвет, тираж, персональные данные и упаковку.
Позиция 02 · клубные записи
Чехол для блокнота
Кожаный чехол изготавливается под выбранный блокнот или сменный бумажный блок. Подходит для дегустационных записей, встреч и клубных событий.
Основа
Существующая конструкция кожаного чехла.
Формат
Нужен формат блокнота или сменного бумажного блока.
Нанесение
Знак клуба, имя, инициалы, номер или дата.
Позиция 03 · разработка по референсу
Футляры и чехлы для сигарных аксессуаров
Можно разработать футляр на сигары, отдельные чехлы под зажигалку и каттер, дорожный комплект или другой клубный аксессуар.
Для разработки: нужны реальные сигары, зажигалка, каттер или точные модели предметов.
Конструкция
Определяется по составу комплекта и сценарию использования.
Первый шаг
Функциональный образец в согласованных материалах.
Расчёт
После выбора направления, размеров и тиража.
В карусели показаны сторонние изделия как референсы конструкции, а не работы мастерской BY.SKOROBOGATOV.
Персонализация
Что можно нанести на изделия
Состав персонализации зависит от позиции. Для именного тиража – имена, номера и даты.
Имя и инициалы
Для личных предметов и подарков участникам.
Номер участника
Для членской серии и лимитированных выпусков.
Знак клуба
Тиснение после согласования масштаба и места.
Цвет и фурнитура
Единая палитра или разные серии по годам.
Дата и событие
Для наград, церемоний и памятных выпусков.
Упаковка
Коробка, вкладыш, именная карточка и комплектация.
03
Процесс
Как мы работаем
Вы подключаетесь только там, где нужно принять решение. Всё остальное мы ведём сами.
Шаг 1 · Бриф
Вы отправляете повод, тираж, бюджет и срок.
Шаг 2 · Подбор
Мы предлагаем 2–3 решения с ориентиром по стоимости и подаче.
Шаг 3 · Согласование
Фиксируем материал, персонализацию, упаковку и образец, если он нужен.
Шаг 4 · Партия
Производим, проверяем, упаковываем и передаём готовый заказ.
04
Расчёт
Стоимость изделий
Цены для готовых конструкций. Футляр и модельные чехлы рассчитываются после определения характеристик.
Для расчёта достаточно выбрать изделие и тираж.
Персонализация, упаковка, доставка, срок и условия оплаты фиксируются в конкретном предложении.
Короткий бриф
Что прислать для расчёта
Ответы можно отправить одним сообщением. По ним определяется состав расчёта и необходимость образца.
Связаться в Telegram ↗
Кому вручаем: участникам, гостям, спикерам или лауреатам?
Какой ориентир по тиражу внутри диапазона до 500?
К какому событию или дате нужна партия?
Нужны ли имя, номер участника или дата?
Какой бюджетный коридор удобен для сравнения?
05
До расчёта
Коротко о главных рисках
Футляр подойдёт для разных форматов?
Сначала нужно выбрать диапазон витол. На образце проверяются реальные размеры; по результату может понадобиться одна или несколько конструкций.
Можно ли сделать до 500 предметов?
Возможность, этапность и срок подтверждаются после выбора изделия, образца и оценки количества ручных операций.
Будет ли знак клуба выглядеть аккуратно?
Перед партией утверждаются масштаб, место и тест тиснения на выбранной коже. Имя и номер участника можно вынести отдельно.
Можно ли начать с одной позиции?
Да. Сначала можно рассчитать одну позицию, изготовить образец и после утверждения добавить остальные.
Следующий шаг
Выбрать первую позицию и получить расчёт
Для старта достаточно указать изделие, тираж и дату. После этого определяется состав расчёта и необходимость образца.
document.querySelectorAll(‘[data-carousel]’).forEach(function (carousel) {
var slides = Array.from(carousel.querySelectorAll(‘[data-slide]’));
var dots = Array.from(carousel.querySelectorAll(‘[data-dot]’));
var previous = carousel.querySelector(‘[data-prev]’);
var next = carousel.querySelector(‘[data-next]’);
var current = 0;
var pointerStart = null;
function show(index) {
current = (index + slides.length) % slides.length;
slides.forEach(function (slide, slideIndex) {
var active = slideIndex === current;
slide.classList.toggle(‘is-active’, active);
slide.hidden = !active;
});
dots.forEach(function (dot, dotIndex) {
var active = dotIndex === current;
dot.classList.toggle(‘is-active’, active);
if (active) {
dot.setAttribute(‘aria-current’, ‘true’);
} else {
dot.removeAttribute(‘aria-current’);
}
});
}
previous.addEventListener(‘click’, function () { show(current — 1); });
next.addEventListener(‘click’, function () { show(current + 1); });
dots.forEach(function (dot, index) {
dot.addEventListener(‘click’, function () { show(index); });
});
carousel.addEventListener(‘keydown’, function (event) {
if (event.key === ‘ArrowLeft’) show(current — 1);
if (event.key === ‘ArrowRight’) show(current + 1);
});
carousel.addEventListener(‘pointerdown’, function (event) {
pointerStart = event.clientX;
});
carousel.addEventListener(‘pointerup’, function (event) {
if (pointerStart === null) return;
var distance = event.clientX — pointerStart;
pointerStart = null;
if (Math.abs(distance) < 45) return;
show(current + (distance < 0 ? 1 : -1));
});
carousel.setAttribute('tabindex', '0');
show(0);
});
