/* Ivayla.BG case study body (/bg/work/ivayla, /work/ivayla). Brand Design Ltd. design system components, trimmed to what this page uses, scoped under .bd-bc. Generated from the design system bundle; change the design system, not this file, for component changes. */ /* ---------- Tokens (scoped: the site keeps its own --base, --accent ... outside .bd-bc) ---------- */ .bd-bc, .bd-bc [data-theme="dark"]{--base:#161616;--base-tint:#1c1c1c;--base-opp:#faf7f6;--accent:#daf561;--accent-ink:var(--accent);--on-accent:#161616;--t-bright:#ffffff;--t-medium:#acacac;--t-muted:#858585;--t-opp-bright:#161616;--t-opp-medium:#303030;--t-opp-muted:#585858;--mark-peach:#f9c7a4;} .bd-bc [data-theme="light"]{--base:#faf7f6;--base-tint:#ffffff;--base-opp:#161616;--accent:#daf561;--accent-ink:#566200;--on-accent:#161616;--t-bright:#161616;--t-medium:#303030;--t-muted:#585858;--t-opp-bright:#ffffff;--t-opp-medium:#acacac;--t-opp-muted:#858585;--mark-peach:#f9c7a4;} .bd-bc{--space-8:8px;--space-12:12px;--space-15:15px;--space-22:22px;--space-30:30px;--space-34:34px;--space-40:40px;--space-60:60px;--space-70:70px;--space-90:90px;--radius-s:10px;--radius-m:16px;--radius-l:38px;--radius-xl:60px;--radius-pill:999px;--bp-md:768px;--bp-nav:991px;--bp-lg:1200px;--bp-xl:1400px;--bp-xxl:1600px;--font-syne:"Syne", sans-serif;--font-unbounded:"Unbounded", sans-serif;--font-inter:"Inter", system-ui, sans-serif;} /* ---------- Components ---------- */ .bd-bc { --bd-ease: cubic-bezier(0.23, 0.65, 0.74, 1.09); --bd-fast: 0.1s; --bd-medium: 0.3s; --bd-slow: 0.6s; } .bd-icon { display: block; flex: none; } .bd-roll { position: relative; display: inline-flex; flex-direction: column; overflow: hidden; height: 1.5em; line-height: 1.5em; } .bd-roll > span { display: block; white-space: nowrap; transition: transform var(--bd-medium) var(--bd-ease); } .bd-roll__b { position: absolute; top: 100%; left: 0; color: var(--accent-ink); } .bd-slide { position: relative; display: inline-flex; overflow: hidden; width: 1em; height: 1em; } .bd-slide .bd-icon { transition: transform var(--bd-medium) var(--bd-ease); } .bd-slide__b { position: absolute; inset: 0; transform: translate(-110%, 110%); } a:hover > .bd-roll > span, button:hover > .bd-roll > span { transform: translateY(-100%); } a:hover > .bd-slide .bd-slide__a, button:hover > .bd-slide .bd-slide__a { transform: translate(110%, -110%); } a:hover > .bd-slide .bd-slide__b, button:hover > .bd-slide .bd-slide__b { transform: translate(0, 0); } @media (prefers-reduced-motion: reduce) { .bd-roll > span, .bd-slide .bd-icon, .bd-btn, .bd-tag { transition: none !important; } a:hover > .bd-roll > span, button:hover > .bd-roll > span { transform: none; } a:hover > .bd-slide .bd-slide__a, button:hover > .bd-slide .bd-slide__a { transform: none; } } .bd-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; } .bd-btn { position: relative; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-12); height: 56px; padding: 0 var(--space-22); border-radius: var(--radius-pill); border: 2px solid transparent; font: 500 22px/1.5 var(--font-inter); text-decoration: none; cursor: pointer; white-space: nowrap; background: transparent; transition: background-color var(--bd-medium) var(--bd-ease), border-color var(--bd-medium) var(--bd-ease), color var(--bd-medium) var(--bd-ease); } .bd-btn .bd-slide { font-size: 26px; } .bd-btn--outline { border-color: var(--t-bright); color: var(--t-bright); } .bd-btn--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .bd-btn--accent .bd-roll__b { color: inherit; } .bd-btn--accent:hover { background: var(--t-bright); border-color: var(--t-bright); color: var(--t-opp-bright); } .bd-tag { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); height: 32px; padding: 0 var(--space-12); border-radius: var(--radius-pill); border: 1px solid transparent; font: 400 14px/1.5 var(--font-inter); white-space: nowrap; text-decoration: none; transition: all var(--bd-medium) var(--bd-ease); } @media (min-width: 1600px) { .bd-tag { height: 36px; padding: 0 14px; font-size: 16px; } } .bd-tag--muted { border-color: var(--t-muted); color: var(--t-medium); } .bd-stitle { display: flex; flex-direction: column; gap: var(--space-34); text-align: left; } .bd-stitle__title { margin: 0; font: 700 44px/1.1 var(--font-syne); letter-spacing: -0.6px; color: var(--t-bright); } .bd-stitle--bg .bd-stitle__title { font-family: var(--font-unbounded); font-weight: 500; } @media (min-width: 768px) { .bd-stitle__title { font-size: 70px; } } @media (min-width: 1600px) { .bd-stitle { gap: 42px; } } .bd-btngroup { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 576px) { .bd-btngroup { flex-direction: row; flex-wrap: wrap; gap: 20px; } } .bd-bc [data-theme] { color: var(--t-medium); } .bd-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 400 22px/1.2 var(--font-inter); color: var(--t-bright); } .bd-eyebrow__star { width: 19px; height: 19px; flex: none; } .bd-stats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-30); } .bd-stats__item { grid-column: span 12; height: 540px; } @media (min-width: 768px) { .bd-stats__item { height: 420px; } } @media (min-width: 1200px) { .bd-stats__item--narrow { grid-column: span 5; } .bd-stats__item--wide { grid-column: span 7; } } @media (min-width: 1600px) { .bd-stats__item { height: 600px; } } .bd-stats__card { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; gap: 34px; width: 100%; height: 100%; padding: 26px 30px; border-radius: var(--radius-m); overflow: hidden; background: var(--base-tint); } .bd-stats__card--accent { background: var(--accent); } .bd-stats__card--paper { background: var(--base); } @media (min-width: 768px) { .bd-stats__card { justify-content: space-between; gap: 0; padding: 36px 40px; border-radius: 26px; } .bd-stats__card--end { align-items: flex-end; text-align: right; } } .bd-stats__counter { position: relative; z-index: 1; } .bd-stats__counter { display: flex; flex-direction: column; gap: 30px; } .bd-stats__card--end .bd-stats__counter { align-items: flex-end; } .bd-stats__number { margin: 0; font: 500 70px/0.8 var(--font-inter); letter-spacing: -1px; color: var(--t-bright); } @media (min-width: 1200px) { .bd-stats__number { font-size: 90px; } } @media (min-width: 1600px) { .bd-stats__number { font-size: 120px; } } .bd-stats__label { margin: 0; max-width: 250px; font: 400 18px/1.4 var(--font-inter); color: var(--t-bright); } .bd-cta-split { display: grid; grid-template-columns: 1fr; gap: var(--space-40); align-items: center; } @media (min-width: 992px) { .bd-cta-split { grid-template-columns: 7fr 5fr; gap: var(--space-60); } } .bd-cta-split__content { display: flex; flex-direction: column; gap: var(--space-30); } .bd-cta-split__title { margin: 0; font: 700 44px/1.1 var(--font-syne); letter-spacing: -0.6px; color: var(--t-bright); } [lang="bg"] .bd-cta-split__title, .bd-cta-split__title:lang(bg) { font-family: var(--font-unbounded); font-weight: 500; } @media (min-width: 768px) { .bd-cta-split__title { font-size: 70px; } } .bd-cta-split__text { margin: 0; max-width: 620px; font: 400 18px/1.6 var(--font-inter); color: var(--t-medium); } .bd-cta-split__media { border-radius: var(--radius-l); overflow: hidden; background: var(--base-tint); } .bd-cta-split__media img { display: block; width: 100%; height: auto; } @keyframes bd-spin {to { transform: rotate(360deg); }} .bd-ihead { padding: 130px var(--space-30) 60px; } @media (min-width: 768px) { .bd-ihead { padding: 150px var(--space-60) 80px; } } @media (min-width: 1200px) { .bd-ihead { padding-top: 136px; } } .bd-ihead__top, .bd-ihead__bottom { display: grid; grid-template-columns: 1fr; gap: 20px; } .bd-ihead__bottom { margin-top: 44px; } @media (min-width: 1200px) { .bd-ihead__top { grid-template-columns: 2fr 10fr; gap: 30px; } .bd-ihead__bottom { grid-template-columns: 2fr 6fr 4fr; gap: 30px; margin-top: 54px; } .bd-ihead__name { padding-top: 20px; } } .bd-ihead__title { margin: 0; font: 700 60px/1.1 var(--font-syne); letter-spacing: -0.6px; color: var(--t-bright); overflow-wrap: anywhere; hyphens: auto; } :lang(bg) .bd-ihead__title { font-family: var(--font-unbounded); font-weight: 500; } @media (min-width: 768px) { .bd-ihead__title { font-size: 80px; } } @media (min-width: 1200px) { .bd-ihead__title { font-size: 100px; } } @media (min-width: 1600px) { .bd-ihead__title { font-size: 120px; } } .bd-ihead__lead { margin: 33px 0 0; max-width: 820px; font: 400 25px/1.4 var(--font-inter); color: var(--t-bright); } .bd-data { display: grid; grid-template-columns: 1fr; gap: 28px; margin: 44px 0 0; } @media (min-width: 768px) { .bd-data { grid-template-columns: 1fr 1fr; gap: 30px; } } .bd-data__col { display: flex; flex-direction: column; gap: 28px; } @media (min-width: 1200px) { .bd-data__col { gap: 34px; } } .bd-data__item { display: flex; flex-direction: column; gap: 6px; } .bd-data dt { font: 400 18px/1.2 var(--font-inter); color: var(--t-medium); } .bd-data dd { margin: 0; font: 500 22px/1.2 var(--font-inter); color: var(--t-bright); } .bd-data dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--t-muted); text-underline-offset: 4px; } .bd-data dd a:hover { text-decoration-color: var(--accent-ink); } .bd-ihead__tags { display: flex; flex-wrap: wrap; gap: 10px; } @media (min-width: 1200px) { .bd-ihead__tags { flex-direction: column; align-items: flex-end; justify-content: flex-end; } } .bd-divider { position: relative; margin: 0; height: 460px; border-radius: var(--radius-l); overflow: hidden; background: var(--base-tint); } @media (min-width: 768px) { .bd-divider { height: 600px; border-radius: 50px; } } @media (min-width: 1200px) { .bd-divider { height: 760px; } } @media (min-width: 1600px) { .bd-divider { height: 930px; } } .bd-divider__img { display: block; width: 100%; height: 100%; object-fit: cover; } @keyframes bd-parallax {from { transform: translateY(-16%); } to { transform: translateY(0); }} .bd-divider video.bd-divider__img { background: var(--base); } @media (max-width: 767px) { :lang(bg) .bd-stitle__title, .bd-stitle--bg .bd-stitle__title { font-size: min(44px, 8.2vw); overflow-wrap: normal; } :lang(bg) .bd-ihead__title { font-size: min(60px, 11.5vw); overflow-wrap: normal; hyphens: manual; } } /* ---------- Page layout ---------- */ /* Page layout for the Ivayla.BG case study: only what the design-system components do not already give. Same vocabulary as the Brand Design Ltd. case (.bd-bc, .bc-*). */ .bd-bc { overflow-x: clip; font-family: var(--font-inter); color: var(--t-medium); background: var(--base); } .bd-bc *, .bd-bc *::before, .bd-bc *::after { box-sizing: border-box; } .bd-bc .bc-wrap { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 30px; } @media (min-width: 768px) { .bd-bc .bc-wrap { padding: 0 60px; } } @media (min-width: 1600px) { .bd-bc .bc-wrap { padding: 0 90px; } } .bd-bc .bc-sec { padding-top: 110px; } @media (min-width: 1200px) { .bd-bc .bc-sec { padding-top: 160px; } } .bd-bc .bc-tight { padding-top: 60px; } @media (min-width: 1200px) { .bd-bc .bc-tight { padding-top: 90px; } } .bd-bc .bc-last { padding-bottom: 90px; } @media (min-width: 1200px) { .bd-bc .bc-last { padding-bottom: 140px; } } /* Hero: one column from the left edge; the facts run across the full width, the tags under them. */ .bd-bc .bd-ihead__bottom > .bd-ihead__name { display: none; } .bd-bc .bd-ihead__text, .bd-bc .bd-ihead__lead { max-width: 900px; } @media (min-width: 1200px) { .bd-bc .bd-ihead__top { grid-template-columns: minmax(0, 1fr); gap: 26px; } .bd-bc .bd-ihead__bottom { grid-template-columns: minmax(0, 1fr); } .bd-bc .bd-ihead__name { padding-top: 0; } .bd-bc .bd-data { margin-top: 54px; } .bd-bc .bd-ihead__tags { justify-content: flex-start; flex-direction: row; } } /* The eyebrow over the title is the link back to the case list. */ .bd-bc .bc-back { color: inherit; text-decoration: none; } .bd-bc .bc-back:hover { color: var(--accent-ink); } /* The four facts in one row from 1400px; two columns below that, so the services keep whole phrases. */ @media (min-width: 1400px) { .bd-bc .bd-data { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bd-bc .bd-data__col { display: contents; } } /* Hero: the two actions under the facts. */ .bd-bc .bc-hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } @media (min-width: 1200px) { .bd-bc .bc-hero-actions { flex-direction: row; align-items: center; gap: 40px; } } .bd-bc .bc-hero-actions .bd-btngroup { flex: none; } .bd-bc .bc-film { padding-top: 60px; } @media (min-width: 1200px) { .bd-bc .bc-film { padding-top: 80px; } } /* The two photo bands keep their own proportions on wide screens and crop to a steadier frame on phones. */ @media (min-width: 768px) { .bd-bc .bc-film .bd-divider { height: auto; aspect-ratio: 2560 / 985; } .bd-bc .bc-still .bd-divider { height: auto; aspect-ratio: 16 / 9; } } @media (min-width: 1600px) { .bd-bc .bc-still .bd-divider { aspect-ratio: 2 / 1; } } @media (max-width: 767px) { .bd-bc .bc-film .bd-divider, .bd-bc .bc-still .bd-divider { height: auto; aspect-ratio: 4 / 5; } .bd-bc .bc-film .bd-divider__img { object-position: 62% 50%; } .bd-bc .bc-still .bd-divider__img { object-position: 58% 50%; } } /* A chapter: eyebrow and title across, then media left and text right (text first below 1200px). */ .bd-bc .bc-head { display: flex; flex-direction: column; gap: 26px; } .bd-bc .bc-chapter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 60px; } @media (min-width: 1200px) { .bd-bc .bc-chapter { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 30px; row-gap: 0; margin-top: 80px; } .bd-bc .bc-chapter > .bc-text { grid-column: 7 / span 6; grid-row: 1 / span 2; } .bd-bc .bc-chapter > .bc-media, .bd-bc .bc-chapter > .bc-side { grid-column: 1 / span 5; grid-row: 1; align-self: start; } } @media (max-width: 1199px) { .bd-bc .bc-chapter > .bc-media, .bd-bc .bc-chapter > .bc-side { order: 2; } } .bd-bc .bc-text { display: flex; flex-direction: column; gap: 40px; } .bd-bc .bc-media { margin: 0; } .bd-bc .bc-media img { display: block; width: 100%; height: auto; border-radius: 26px; } @media (max-width: 767px) { .bd-bc .bc-media img { border-radius: 16px; } } @media (min-width: 768px) and (max-width: 1199px) { .bd-bc .bc-chapter > .bc-media, .bd-bc .bc-chapter > .bc-side { max-width: 640px; } } .bd-bc .bc-lead { margin: 0; font: 400 25px/1.4 var(--font-inter); color: var(--t-bright); } @media (min-width: 1600px) { .bd-bc .bc-lead { font-size: 30px; } } @media (max-width: 767px) { .bd-bc .bc-lead { font-size: 20px; line-height: 1.5; } } .bd-bc .bc-lead a, .bd-bc .bc-body a { color: var(--t-bright); text-decoration: underline; text-decoration-color: var(--t-muted); text-underline-offset: 3px; } .bd-bc .bc-lead a:hover, .bd-bc .bc-body a:hover { color: var(--accent-ink); } .bd-bc .bc-body { display: flex; flex-direction: column; gap: 20px; } .bd-bc .bc-body p { margin: 0; font: 400 18px/1.6 var(--font-inter); color: var(--t-medium); } .bd-bc .bc-actions { display: flex; flex-wrap: wrap; gap: 16px 20px; } /* Running text is justified from 576px up; phones keep a ragged right edge, where justification opens gaps. */ @media (min-width: 576px) { .bd-bc .bc-lead, .bd-bc .bc-body p, .bd-bc .bd-cta-split__text { text-align: justify; } } /* The task: the lead takes six columns, the second paragraph the other six. */ @media (min-width: 1200px) { .bd-bc .bc-chapter--lead > .bc-side { grid-column: 1 / span 6; padding-right: 45px; order: 0; } .bd-bc .bc-chapter--lead > .bc-text { grid-column: 7 / span 6; } } .bd-bc .bc-chapter--lead > .bc-side { order: 0; max-width: none; } /* 01 Migration: the store's own product photo. */ .bd-bc .bc-photo img { aspect-ratio: 1 / 1; object-fit: cover; } /* 02 WooCommerce: the homepage banner, wide on top, the phone version under it. */ .bd-bc .bc-banners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: end; } .bd-bc .bc-banners__wide { grid-column: 1 / -1; } .bd-bc .bc-shot { margin: 0; } .bd-bc .bc-shot img { display: block; width: 100%; height: auto; border-radius: 16px; } @media (max-width: 767px) { .bd-bc .bc-banners { gap: 14px; } .bd-bc .bc-shot img { border-radius: 10px; } } /* 03 B2A Brand Signal: the store's logo on its own white. */ .bd-bc .bc-logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 4; border-radius: 26px; background: #ffffff; } .bd-bc .bc-logo img { width: 52%; max-width: 313px; height: auto; border-radius: 0; } @media (max-width: 767px) { .bd-bc .bc-logo { border-radius: 16px; } } /* Results: the catalogue page beside the text, then the four figures two by two. */ .bd-bc .bc-docside { display: flex; flex-direction: column; gap: 30px; } .bd-bc .bc-doc { margin: 0; } .bd-bc .bc-doc img { display: block; width: 100%; height: auto; border-radius: 16px; } .bd-bc .bc-doc figcaption { margin-top: 14px; font: 400 14px/1.5 var(--font-inter); color: var(--t-muted); } .bd-bc .bc-doc figcaption a { color: var(--t-bright); } .bd-bc .bc-doc figcaption a:hover { color: var(--accent-ink); } @media (min-width: 768px) { .bd-bc .bc-stats .bd-stats__item { grid-column: span 6; height: 360px; } } @media (min-width: 1600px) { .bd-bc .bc-stats .bd-stats__item { height: 420px; } } .bd-bc .bd-stats__number { font-family: var(--font-unbounded); font-weight: 500; letter-spacing: -1px; } .bd-bc .bd-stats__label { max-width: 330px; } @media (min-width: 768px) and (max-width: 1199px) { .bd-bc .bd-stats__number { font-size: 60px; } } @media (max-width: 767px) { .bd-bc .bc-stats .bd-stats__item { height: auto; } .bd-bc .bc-stats .bd-stats__card { gap: 26px; padding: 26px 30px 30px; } .bd-bc .bc-stats .bd-stats__card--end .bd-stats__counter { align-items: flex-start; } .bd-bc .bd-stats__number { font-size: min(52px, 12vw); } } /* Closing call to action: the split promo with the store's sample photo. */ .bd-bc .bc-cta { padding: 40px 30px; border-radius: 26px; background: var(--base-tint); } @media (min-width: 768px) { .bd-bc .bc-cta { padding: 60px; border-radius: 50px; } } @media (min-width: 1200px) { .bd-bc .bc-cta { padding: 80px; } } .bd-bc .bc-cta .bd-cta-split { grid-template-columns: minmax(0, 1fr); align-items: center; } @media (min-width: 992px) { .bd-bc .bc-cta .bd-cta-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } } .bd-bc .bc-cta .bd-cta-split__media { background: transparent; border-radius: 0; } .bd-bc .bc-cta .bd-cta-split__media img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 0 0 auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 26px; } @media (max-width: 991px) { .bd-bc .bc-cta .bd-cta-split__media img { max-width: 420px; margin: 0; } } @media (max-width: 767px) { .bd-bc .bc-cta .bd-cta-split__media img { border-radius: 16px; } } /* Lines fill naturally and break where the line ends; the last two words of every heading and paragraph are joined with a no-break space in the markup, so nothing ends on a lone word. Hyphenated words stay whole. */ .bd-bc .bc-nw { white-space: nowrap; } @media (min-width: 1200px) { .bd-bc .bd-stitle__title { font-size: 60px; } .bd-bc .bc-cta .bd-cta-split__title { font-size: 44px; } } @media (min-width: 1600px) { .bd-bc .bd-stitle__title { font-size: 70px; } .bd-bc .bc-cta .bd-cta-split__title { font-size: 54px; } } @media (min-width: 768px) and (max-width: 991px) { .bd-bc .bd-stitle__title { font-size: 36px; } } @media (min-width: 992px) and (max-width: 1199px) { .bd-bc .bd-stitle__title { font-size: 44px; } } @media (min-width: 768px) and (max-width: 991px) { .bd-bc .bc-cta .bd-cta-split__title { font-size: 40px; } } @media (min-width: 992px) and (max-width: 1199px) { .bd-bc .bc-cta .bd-cta-split__title { font-size: 36px; } } @media (max-width: 767px) { .bd-bc .bd-stitle__title, .bd-bc .bd-cta-split__title { font-size: min(21px, 4.9vw); line-height: 1.3; letter-spacing: -0.03em; } .bd-bc .bc-cta { margin: 0 -14px; padding: 36px 16px; } } /* Phones: buttons one step smaller so the longest caption fits the column. */ @media (max-width: 575px) { .bd-bc .bd-btn { max-width: 100%; font-size: 17px; padding-left: 18px; padding-right: 18px; } } @media (max-width: 575px) { .bd-bc .bc-cta .bd-btn { font-size: 16px; padding-left: 16px; padding-right: 16px; } } /* The figure's label on one line, its date or source on the next. */ .bd-bc .bc-stats .bd-stats__label { white-space: pre-line; max-width: 360px; } /* Phones: a long caption wraps inside its button instead of being cut; the service or case name stays whole. */ @media (max-width: 575px) { .bd-bc .bd-btn { height: auto; min-height: 56px; padding-top: 12px; padding-bottom: 12px; white-space: normal; } .bd-bc .bd-btn .bd-roll { height: auto; } .bd-bc .bd-btn .bd-roll > span { white-space: normal; } .bd-bc .bd-btn .bd-roll__b { display: none; } } /* Narrow desktops: the call to action gives its title eight columns so the phrases keep together. */ @media (min-width: 992px) and (max-width: 1399px) { .bd-bc .bc-cta .bd-cta-split { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } } /* Phones: the chapter label one step smaller, so "02 · WooCommerce оптимизация" stays on one line. */ @media (max-width: 575px) { .bd-bc .bc-head .bd-eyebrow { font-size: min(17px, 4.3vw); } } /* Phones: the figures stack in one column. (The component's twelve-column grid needs 330px for its gaps alone.) */ @media (max-width: 767px) { .bd-bc .bc-stats .bd-stats { grid-template-columns: minmax(0, 1fr); gap: 20px; } .bd-bc .bc-stats .bd-stats__item { grid-column: 1 / -1; } } /* Small phones (under 375px): text one step smaller, so the narrow column keeps whole phrases on each line. */ @media (max-width: 374px) { .bd-bc .bd-ihead__lead, .bd-bc .bc-lead { font-size: 18px; } .bd-bc .bd-data dd { font-size: 18px; } .bd-bc .bc-body p, .bd-bc .bd-cta-split__text { font-size: 16px; } .bd-bc .bd-stats__label { font-size: 16px; } .bd-bc .bd-stitle__title, .bd-bc .bd-cta-split__title { font-size: 4.6vw; } .bd-bc .bd-btn, .bd-bc .bc-cta .bd-btn { font-size: 15px; padding-left: 14px; padding-right: 14px; gap: 8px; } .bd-bc .bd-btn .bd-slide { font-size: 20px; } } /* ---------- The live pages set fonts globally with !important. These restore the faces the design uses. ---------- */ /* BG: