Adopt Montserrat typography and add type variants
This commit is contained in:
parent
7c6409974c
commit
a760fe059a
@ -6,7 +6,7 @@
|
||||
<title>DP Trade — Catalog</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/site.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
179
css/site.css
179
css/site.css
@ -66,11 +66,11 @@ select {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
color: var(--color-accent-blue);
|
||||
font-size: 30px;
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
font-family: var(--font-heading-retail);
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
line-height: 0.8;
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
.brand-logo span:first-child {
|
||||
@ -83,7 +83,6 @@ select {
|
||||
top: 27px;
|
||||
color: var(--color-primary-wine-80);
|
||||
font-size: 8px;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -210,7 +209,7 @@ select {
|
||||
.product-card h3 {
|
||||
margin: 0;
|
||||
font-family: var(--font-heading);
|
||||
line-height: 1.12;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.mega-intro p:last-child {
|
||||
@ -351,7 +350,10 @@ select {
|
||||
|
||||
.hero h1 {
|
||||
margin: 12px 0 20px;
|
||||
font-size: clamp(44px, 7vw, 88px);
|
||||
max-width: 920px;
|
||||
font-size: clamp(44px, 6.5vw, 82px);
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero p:not(.eyebrow) {
|
||||
@ -370,8 +372,147 @@ select {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.section-heading--split {
|
||||
grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.7fr);
|
||||
gap: 28px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.section-heading--split > p {
|
||||
margin: 0;
|
||||
color: var(--color-neutral-gray-600);
|
||||
}
|
||||
|
||||
.section-heading h2 {
|
||||
font-size: clamp(34px, 4vw, 52px);
|
||||
font-size: clamp(32px, 4vw, 50px);
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.type-lab-section {
|
||||
background: #fffdfa;
|
||||
}
|
||||
|
||||
.type-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.type-card {
|
||||
min-width: 0;
|
||||
min-height: 390px;
|
||||
padding: 24px;
|
||||
border: 1px solid rgba(102, 96, 95, 0.16);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
box-shadow: var(--shadow-soft);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.type-card.is-selected {
|
||||
border-color: rgba(75, 15, 36, 0.48);
|
||||
background: linear-gradient(180deg, #fffdfa 0%, #f7efe8 100%);
|
||||
box-shadow: var(--shadow-lift);
|
||||
}
|
||||
|
||||
.type-card.is-selected::before {
|
||||
content: "Выбрано для системы";
|
||||
width: fit-content;
|
||||
padding: 7px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-primary-wine-100);
|
||||
color: var(--color-surface);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.type-card__meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
color: var(--color-neutral-gray-600);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.type-card__meta strong {
|
||||
color: var(--color-primary-wine-100);
|
||||
}
|
||||
|
||||
.type-card h3 {
|
||||
margin: 0;
|
||||
color: var(--color-neutral-black);
|
||||
}
|
||||
|
||||
.type-card p {
|
||||
margin: 0;
|
||||
color: var(--color-neutral-gray-600);
|
||||
}
|
||||
|
||||
.type-scale {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.type-scale span {
|
||||
padding: 6px 9px;
|
||||
border: 1px solid rgba(75, 15, 36, 0.16);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-primary-wine-100);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.type-card--editorial {
|
||||
font-family: "Manrope", "Inter", Arial, sans-serif;
|
||||
}
|
||||
|
||||
.type-card--editorial h3 {
|
||||
font-family: "Cormorant Garamond", Georgia, serif;
|
||||
font-size: 46px;
|
||||
font-weight: 700;
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.type-card--neo {
|
||||
font-family: "Manrope", "Inter", Arial, sans-serif;
|
||||
}
|
||||
|
||||
.type-card--neo h3 {
|
||||
font-family: "Manrope", "Inter", Arial, sans-serif;
|
||||
font-size: 34px;
|
||||
font-weight: 800;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.type-card--classic {
|
||||
font-family: "Inter", Arial, sans-serif;
|
||||
}
|
||||
|
||||
.type-card--classic h3 {
|
||||
font-family: "Playfair Display", Georgia, serif;
|
||||
font-size: 38px;
|
||||
font-weight: 700;
|
||||
line-height: 1.04;
|
||||
}
|
||||
|
||||
.type-card--retail {
|
||||
font-family: "Inter", Arial, sans-serif;
|
||||
}
|
||||
|
||||
.type-card--retail h3 {
|
||||
font-family: "Montserrat", "Inter", Arial, sans-serif;
|
||||
font-size: 31px;
|
||||
font-weight: 800;
|
||||
line-height: 1.14;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
@ -438,7 +579,9 @@ select {
|
||||
|
||||
.product-card h3 {
|
||||
margin-top: 8px;
|
||||
font-size: 24px;
|
||||
font-size: 21px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.product-card p {
|
||||
@ -503,8 +646,10 @@ select {
|
||||
.detail-copy h1 {
|
||||
margin: 10px 0 18px;
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(40px, 5vw, 64px);
|
||||
font-size: clamp(38px, 5vw, 62px);
|
||||
line-height: 1.08;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.meta-list {
|
||||
@ -555,11 +700,11 @@ select {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
color: var(--color-accent-blue);
|
||||
font-size: clamp(40px, 5vw, 68px);
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
font-family: var(--font-heading-retail);
|
||||
font-size: clamp(38px, 5vw, 64px);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
line-height: 0.95;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.footer-brand span:first-child {
|
||||
@ -672,6 +817,10 @@ select {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.type-options {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.mega-menu {
|
||||
top: 206px;
|
||||
}
|
||||
@ -700,6 +849,8 @@ select {
|
||||
.menu-grid,
|
||||
.appellations,
|
||||
.product-grid,
|
||||
.type-options,
|
||||
.section-heading--split,
|
||||
.footer-nav {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@ -10,8 +10,11 @@
|
||||
--color-accent-gold: #b9965b;
|
||||
--color-accent-blue: #1f3476;
|
||||
|
||||
--font-heading: "Playfair Display", Georgia, serif;
|
||||
--font-heading: "Montserrat", "Inter", Arial, sans-serif;
|
||||
--font-body: "Inter", Arial, sans-serif;
|
||||
--font-heading-classic: "Playfair Display", Georgia, serif;
|
||||
--font-body-classic: "Inter", Arial, sans-serif;
|
||||
--font-heading-retail: "Montserrat", "Inter", Arial, sans-serif;
|
||||
|
||||
--spacing-4: 4px;
|
||||
--spacing-8: 8px;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
--color-white: #ffffff;
|
||||
--color-error: #a33a2f;
|
||||
|
||||
--font-heading: "Playfair Display", Georgia, serif;
|
||||
--font-heading: "Montserrat", "Inter", Arial, sans-serif;
|
||||
--font-body: "Inter", Arial, sans-serif;
|
||||
|
||||
--spacing-1: 4px;
|
||||
@ -160,23 +160,28 @@ h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: var(--font-heading);
|
||||
line-height: 1.16;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 780px;
|
||||
margin-bottom: 20px;
|
||||
font-size: clamp(42px, 6vw, 76px);
|
||||
font-size: clamp(40px, 5.5vw, 72px);
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
font-size: 42px;
|
||||
font-size: 40px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 25px;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.kit-hero p:not(.eyebrow) {
|
||||
@ -333,6 +338,8 @@ code {
|
||||
.text-h2,
|
||||
.text-h3 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.text-h1 {
|
||||
@ -510,7 +517,8 @@ code {
|
||||
|
||||
.product-meta h3 {
|
||||
margin: 8px 0 6px;
|
||||
font-size: 24px;
|
||||
font-size: 21px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.product-meta p {
|
||||
@ -689,7 +697,9 @@ tbody tr:hover {
|
||||
place-items: center;
|
||||
color: var(--color-primary-wine-100);
|
||||
font-family: var(--font-heading);
|
||||
font-size: 22px;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -712,8 +722,10 @@ tbody tr:hover {
|
||||
|
||||
.template-card strong {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 22px;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.screen-preview {
|
||||
@ -744,7 +756,8 @@ tbody tr:hover {
|
||||
.screen-preview__hero h3 {
|
||||
max-width: 520px;
|
||||
margin: 8px 0 20px;
|
||||
font-size: 52px;
|
||||
font-size: 48px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.screen-preview__content {
|
||||
|
||||
87
index.html
87
index.html
@ -6,7 +6,7 @@
|
||||
<title>DP Trade — Home</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Montserrat:wght@500;600;700;800&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/site.css" />
|
||||
</head>
|
||||
<body>
|
||||
@ -72,6 +72,91 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section type-lab-section">
|
||||
<div class="container">
|
||||
<div class="section-heading section-heading--split">
|
||||
<div>
|
||||
<p class="eyebrow">Typography direction</p>
|
||||
<h2>4 варианта типографики</h2>
|
||||
</div>
|
||||
<p>
|
||||
Выбранное направление — Premium Retail: сильная витрина, крупные уверенные заголовки
|
||||
и читаемый интерфейс для каталога.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="type-options">
|
||||
<article class="type-card type-card--editorial">
|
||||
<div class="type-card__meta">
|
||||
<span>Option 01</span>
|
||||
<strong>Editorial Wine</strong>
|
||||
</div>
|
||||
<h3>Редкие вина для профессиональной торговли</h3>
|
||||
<p>
|
||||
Cormorant Garamond для крупных заголовков и Manrope для интерфейса. Больше премиальности,
|
||||
культурного контекста и ощущения curated selection.
|
||||
</p>
|
||||
<div class="type-scale">
|
||||
<span>H1 72/78</span>
|
||||
<span>Body 16/25</span>
|
||||
<span>Label 12/16</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="type-card type-card--neo">
|
||||
<div class="type-card__meta">
|
||||
<span>Option 02</span>
|
||||
<strong>Neo Trade</strong>
|
||||
</div>
|
||||
<h3>Каталог, который работает как торговый инструмент</h3>
|
||||
<p>
|
||||
Manrope везде: современно, ровно, технологично. Хорошо подойдет, если сайт должен читаться
|
||||
как быстрый B2B-продукт.
|
||||
</p>
|
||||
<div class="type-scale">
|
||||
<span>H1 64/70</span>
|
||||
<span>Body 16/24</span>
|
||||
<span>Label 12/16</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="type-card type-card--classic">
|
||||
<div class="type-card__meta">
|
||||
<span>Option 03</span>
|
||||
<strong>Modern Classic</strong>
|
||||
</div>
|
||||
<h3>Вино, регионы и производители в ясной системе</h3>
|
||||
<p>
|
||||
Playfair Display + Inter. Более классический premium retail, но с аккуратной цифровой
|
||||
читаемостью в карточках, фильтрах и таблицах.
|
||||
</p>
|
||||
<div class="type-scale">
|
||||
<span>H1 68/74</span>
|
||||
<span>Body 16/24</span>
|
||||
<span>Label 12/16</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="type-card type-card--retail is-selected">
|
||||
<div class="type-card__meta">
|
||||
<span>Option 04</span>
|
||||
<strong>Выбрано</strong>
|
||||
</div>
|
||||
<h3>Сильная витрина с акцентом на выбор</h3>
|
||||
<p>
|
||||
Montserrat для заголовков и Inter для текста. Более собранный, коммерческий, уверенный
|
||||
вариант для каталога с большим количеством позиций.
|
||||
</p>
|
||||
<div class="type-scale">
|
||||
<span>H1 60/66</span>
|
||||
<span>Body 16/24</span>
|
||||
<span>Label 12/16</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<title>DP Trade — Product</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/site.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap"
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@500;600;700;800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/ui-kit.css" />
|
||||
@ -113,15 +113,15 @@
|
||||
<div class="subsection typography-specimen">
|
||||
<h3>Typography</h3>
|
||||
<div class="type-row">
|
||||
<span>Text / Heading / H1 / Playfair / 48 / 56</span>
|
||||
<span>Text / Heading / H1 / Montserrat / 48 / 56</span>
|
||||
<p class="text-h1">Rare wines for trade</p>
|
||||
</div>
|
||||
<div class="type-row">
|
||||
<span>Text / Heading / H2 / Playfair / 36 / 44</span>
|
||||
<span>Text / Heading / H2 / Montserrat / 36 / 44</span>
|
||||
<p class="text-h2">Catalog collections</p>
|
||||
</div>
|
||||
<div class="type-row">
|
||||
<span>Text / Heading / H3 / Playfair / 28 / 36</span>
|
||||
<span>Text / Heading / H3 / Montserrat / 28 / 36</span>
|
||||
<p class="text-h3">Producer selection</p>
|
||||
</div>
|
||||
<div class="type-row">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user