/* About page body (/bg/about-us, /about-us). 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-round { 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, .bd-round: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--small { height: 44px; padding: 0 var(--space-15); gap: var(--space-8); border-width: 1px; font-weight: 400; font-size: 16px; } .bd-btn--small .bd-slide { font-size: 18px; } .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-round { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--t-bright); background: transparent; color: var(--t-bright); cursor: pointer; padding: 0; transition: transform var(--bd-medium) var(--bd-ease); } .bd-round:hover { transform: scale(1.04); } .bd-round--small { width: 40px; height: 40px; font-size: 18px; } .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; } .bd-stitle__descr { margin: 0; max-width: 620px; font: 400 18px/1.6 var(--font-inter); color: var(--t-medium); } @media (min-width: 768px) { .bd-stitle__title { font-size: 70px; } } @media (min-width: 1600px) { .bd-stitle { gap: 42px; } .bd-stitle__descr { font-size: 22px; } } .bd-testi { box-sizing: border-box; margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 46px; padding: var(--space-30); background: var(--base-tint); border-radius: var(--radius-m); min-height: 480px; max-width: 460px; } @media (min-width: 768px) { .bd-testi { padding: var(--space-40); border-radius: 26px; } } .bd-testi__content { display: flex; flex-direction: column; gap: 49px; flex: 1 1 auto; } .bd-testi__media { display: flex; justify-content: space-between; align-items: center; min-height: 80px; } .bd-testi__source { max-width: 160px; font: 400 14px/1.2 var(--font-inter); color: var(--t-muted); text-align: right; } .bd-testi__text { margin: 0; } .bd-testi__text p { margin: 0 0 33px; font: 400 18px/1.6 var(--font-inter); color: var(--t-medium); } .bd-testi__author { display: flex; flex-direction: column; gap: 6px; } .bd-testi__name { font: 600 22px/1.2 var(--font-inter); color: var(--t-bright); } .bd-testi__role { font: 400 16px/1.6 var(--font-inter); color: var(--t-muted); } .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-manifest { display: flex; flex-direction: column; gap: var(--space-30); max-width: 1180px; margin: 0 auto; } .bd-manifest--center { align-items: center; text-align: center; } .bd-manifest__text { margin: 0; font: 400 28px/1.6 var(--font-inter); color: var(--t-bright); } .bd-manifest__text em { font-style: normal; color: var(--accent-ink); } .bd-manifest .bd-btngroup { margin-top: 14px; } @media (min-width: 768px) { .bd-manifest__text { font-size: 44px; } .bd-manifest .bd-btngroup { margin-top: 20px; } } .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-awards { display: flex; flex-direction: column; } .bd-awards__item { position: relative; display: block; margin-top: -2px; border-top: 2px solid var(--t-bright); border-bottom: 2px solid var(--t-bright); color: var(--t-bright); text-decoration: none; } .bd-awards__item:first-child { margin-top: 0; } .bd-awards__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; padding: var(--space-30) 0; } .bd-awards__title { grid-column: 1 / -1; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 10px; overflow: hidden; } .bd-awards__name { font: 700 30px/1.2 var(--font-syne); letter-spacing: -0.6px; } :lang(bg) .bd-awards__name { font-family: var(--font-unbounded); font-weight: 500; } .bd-awards__icon { display: flex; font-size: 30px; } @media (min-width: 768px) { .bd-awards__name, .bd-awards__icon { font-size: 44px; } } .bd-awards__tags { display: flex; flex-direction: column; gap: 2px; font: 400 16px/1.6 var(--font-inter); } .bd-awards__date { text-align: right; font: 400 16px/1.6 var(--font-inter); } .bd-awards__reveal { display: none; } @media (min-width: 1200px) { .bd-awards__row { grid-template-columns: 8fr 2fr 2fr; align-items: center; } .bd-awards__title { grid-column: auto; flex-direction: row; justify-content: flex-start; } .bd-awards__title > span { transform: translateX(-54px); transition: transform var(--bd-medium) var(--bd-ease); } .bd-awards__item:hover .bd-awards__title > span, .bd-awards__item:focus-visible .bd-awards__title > span { transform: translateX(0); } .bd-awards__reveal { display: block; position: absolute; left: 58%; top: 50%; width: 220px; height: 220px; border-radius: var(--radius-m); overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -40%) scale(.9); transition: opacity var(--bd-medium) var(--bd-ease), transform var(--bd-medium) var(--bd-ease); z-index: 2; } .bd-awards__reveal img { width: 100%; height: 100%; object-fit: cover; } .bd-awards__item:hover .bd-awards__reveal { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @media (min-width: 1200px) and (hover: hover) and (prefers-reduced-motion: no-preference) { .bd-awards__item { transition: opacity .3s ease; } .bd-awards:hover > .bd-awards__item:not(:hover) { opacity: .2; } } .bd-awards__item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; } .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; } .bd-awards__image { display: none; } .bd-slist { display: flex; flex-direction: column; } .bd-slist__item { position: relative; display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: -2px; padding: 60px 0; border-top: 2px solid var(--t-bright); border-bottom: 2px solid var(--t-bright); color: var(--t-bright); text-decoration: none; } .bd-slist__item:first-child { margin-top: 0; } .bd-slist__title { font: 700 36px/1.05 var(--font-syne); letter-spacing: -0.6px; } :lang(bg) .bd-slist__title { font-family: var(--font-unbounded); font-weight: 500; } @media (min-width: 768px) { .bd-slist__title { font-size: 50px; } } @media (min-width: 1200px) { .bd-slist__title { font-size: 70px; } } .bd-slist__descr, .bd-slist__tags { font: 400 18px/1.6 var(--font-inter); color: var(--t-medium); } .bd-slist__tags { display: flex; flex-direction: column; } @media (min-width: 1200px) { .bd-slist__item { grid-template-columns: 6fr 3fr 3fr; gap: 30px; align-items: start; } .bd-slist__tags { padding-left: 30px; } } @media (min-width: 1200px) and (hover: hover) and (prefers-reduced-motion: no-preference) { .bd-slist__item { transition: opacity .3s ease; } .bd-slist:hover > .bd-slist__item:not(:hover) { opacity: .2; } } .bd-approach { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .bd-approach__item { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: -2px; padding: 70px 0; border-top: 2px solid var(--t-bright); border-bottom: 2px solid var(--t-bright); } .bd-approach__item:first-child { margin-top: 0; } @media (min-width: 768px) { .bd-approach__item { padding: 80px 0; } } .bd-approach__icon { display: block; width: 70px; height: 70px; font-size: 70px; color: var(--t-bright); } .bd-approach__icon img, .bd-approach__icon .bd-icon { display: block; width: 100%; height: 100%; animation: bd-spin 5s linear infinite; animation-play-state: paused; } .bd-approach__item:hover .bd-approach__icon img, .bd-approach__item:hover .bd-approach__icon .bd-icon { animation-play-state: running; } @keyframes bd-spin {to { transform: rotate(360deg); }} @media (prefers-reduced-motion: reduce) { .bd-approach__icon .bd-icon, .bd-approach__icon img { animation: none; } } .bd-approach__title { margin: 0; font: 700 30px/1.2 var(--font-inter); color: var(--t-bright); } .bd-approach__body p { margin: 0 0 18px; max-width: 620px; font: 400 18px/1.6 var(--font-inter); color: var(--t-medium); } @media (min-width: 1200px) { .bd-approach__item { grid-template-columns: 2fr 4fr 6fr; gap: 30px; align-items: start; } .bd-approach__title { padding: 0 30px; text-align: right; } } @media (min-width: 1200px) and (hover: hover) and (prefers-reduced-motion: no-preference) { .bd-approach__item { transition: opacity var(--bd-medium) ease; } .bd-approach:hover > .bd-approach__item:not(:hover) { opacity: .2; } } .bd-timeline { display: flex; flex-direction: column; } .bd-timeline__item { display: flex; flex-direction: column-reverse; justify-content: space-between; gap: 11px; margin-top: -2px; padding: 36px 0 35px; border-top: 2px solid var(--t-bright); border-bottom: 2px solid var(--t-bright); } .bd-timeline__item:first-child { margin-top: 0; } .bd-timeline__data { display: flex; flex-direction: column; gap: 16px; } .bd-timeline__title { margin: 0; font: 700 30px/1.2 var(--font-inter); color: var(--t-bright); } .bd-timeline__source { margin: 2px 0 0; font: 400 16px/1.6 var(--font-inter); color: var(--t-muted); } .bd-timeline__descr { margin: 0; max-width: 560px; font: 400 18px/1.6 var(--font-inter); color: var(--t-medium); } .bd-timeline__year { margin: 0; font: 500 18px/1.6 var(--font-inter); color: var(--t-bright); white-space: nowrap; } @media (min-width: 1200px) { .bd-timeline__item { flex-direction: row; padding: 60px 0 70px; gap: 30px; } .bd-timeline__data { gap: 28px; } .bd-timeline__title { font-size: 44px; } } @media (min-width: 1200px) and (hover: hover) and (prefers-reduced-motion: no-preference) { .bd-timeline__item { transition: opacity .3s ease; } .bd-timeline:hover > .bd-timeline__item:not(:hover) { opacity: .2; } } .bd-tslider { display: grid; grid-template-columns: 1fr; gap: var(--space-40); } .bd-tslider__intro { display: flex; flex-direction: column; gap: var(--space-22); } .bd-tslider__title { margin: 0; font: 700 44px/1.1 var(--font-syne); letter-spacing: -0.6px; color: var(--t-bright); } :lang(bg) .bd-tslider__title { font-family: var(--font-unbounded); font-weight: 500; } .bd-tslider__descr { margin: 0; max-width: 360px; font: 400 16px/1.6 var(--font-inter); color: var(--t-medium); } .bd-tslider__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .bd-tslider__score { font: 600 30px/1 var(--font-inter); color: var(--t-bright); } .bd-tslider__stars { display: inline-flex; gap: 2px; font-size: 16px; color: var(--accent-ink); } .bd-tslider__source { width: 100%; font: 400 14px/1.2 var(--font-inter); color: var(--t-muted); } .bd-tslider__controls { display: flex; gap: 10px; margin-top: auto; } .bd-tslider__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(460px, 88%); gap: var(--space-30); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .bd-tslider__track::-webkit-scrollbar { display: none; } .bd-tslider__track:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; border-radius: var(--radius-m); } .bd-tslider__slide { scroll-snap-align: start; display: flex; } .bd-tslider__slide .bd-testi { max-width: none; width: 100%; } @media (min-width: 768px) { .bd-tslider__title { font-size: 70px; } } @media (min-width: 1200px) { .bd-tslider { grid-template-columns: 4fr 8fr; gap: var(--space-30); } .bd-tslider__intro { padding-bottom: 10px; } } .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-ihead__text { margin: 0; max-width: 620px; font: 400 18px/1.6 var(--font-inter); color: var(--t-medium); } .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); } @keyframes bd-parallax {from { transform: translateY(-16%); } to { transform: translateY(0); }} @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 About page: only what the design-system components do not already give. Same vocabulary as the case pages (.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-last { padding-bottom: 90px; } @media (min-width: 1200px) { .bd-bc .bc-last { padding-bottom: 140px; } } .bd-bc .bc-under { margin-top: 60px; } @media (min-width: 1200px) { .bd-bc .bc-under { margin-top: 80px; } } /* Hero: one column from the left edge; the four facts run across the full width. */ .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; } } @media (min-width: 1400px) { .bd-bc .bd-data { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bd-bc .bd-data__col { display: contents; } } .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; } /* Running text. */ .bd-bc .bc-head { display: flex; flex-direction: column; gap: 26px; } .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; } @media (min-width: 576px) { .bd-bc .bc-lead, .bd-bc .bc-body p, .bd-bc .bd-cta-split__text { text-align: justify; } } /* A two-part block: the lead on the left (six columns), the text on the right. */ .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)); column-gap: 30px; margin-top: 80px; } .bd-bc .bc-chapter--lead > .bc-side { grid-column: 1 / span 6; padding-right: 45px; } .bd-bc .bc-chapter--lead > .bc-text, .bd-bc .bc-chapter--note > .bc-text { grid-column: 7 / span 6; } } /* The founder: the portrait on the left, name, role and text on the right; on phones the portrait comes first. */ .bd-bc .bc-founder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 50px; } @media (min-width: 768px) and (max-width: 1199px) { .bd-bc .bc-portrait { max-width: 560px; } } @media (min-width: 1200px) { .bd-bc .bc-founder { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 30px; align-items: start; } .bd-bc .bc-portrait { grid-column: 1 / span 6; position: sticky; top: 120px; } .bd-bc .bc-founder__text { grid-column: 7 / span 6; } } .bd-bc .bc-portrait { margin: 0; } .bd-bc .bc-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 26px; background: var(--base-tint); } /* Desktop: the portrait takes six columns and a slightly taller frame (Nikola enlarged it on the canvas). */ @media (min-width: 1200px) { .bd-bc .bc-portrait img { aspect-ratio: 3 / 4; object-position: 50% 30%; } } @media (max-width: 767px) { .bd-bc .bc-portrait img { border-radius: 16px; } } .bd-bc .bc-founder__text { display: flex; flex-direction: column; gap: 40px; } .bd-bc .bc-founder__text .bc-head { gap: 20px; } .bd-bc .bc-role { margin: -16px 0 0; font: 500 22px/1.4 var(--font-inter); color: var(--accent-ink); } @media (max-width: 767px) { .bd-bc .bc-role { font-size: 18px; } } /* The statement: left-aligned like the rest of the page, one step smaller than the component's default. */ @media (min-width: 768px) and (max-width: 1599px) { .bd-bc .bd-manifest__text { font-size: 40px; line-height: 1.5; } } @media (max-width: 767px) { .bd-bc .bd-manifest__text { font-size: 22px; line-height: 1.5; } } /* The three terms: the star and the term together on the left, the description on the right half (Nikola's note on the canvas: titles beside the stars, descriptions a step larger). */ .bd-bc .bd-approach__title { letter-spacing: 0; } .bd-bc .bd-approach__body p { max-width: none; font-size: 19px; line-height: 1.55; } @media (min-width: 768px) { .bd-bc .bd-approach__body p { font-size: 21px; } } @media (min-width: 1200px) { .bd-bc .bd-approach__item { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 30px; align-items: center; } .bd-bc .bd-approach__icon { grid-column: 1 / span 1; } .bd-bc .bd-approach__title { grid-column: 2 / span 5; padding: 0; text-align: left; } .bd-bc .bd-approach__body { grid-column: 7 / span 6; } .bd-bc .bd-approach__body p { margin-bottom: 0; font-size: 22px; } } /* The three figures, equal across from 1200px; one column on phones (the component's grid needs 330px for its gaps alone). */ @media (min-width: 1200px) { .bd-bc .bc-stats .bd-stats__item { grid-column: span 4; } } @media (min-width: 768px) and (max-width: 1199px) { .bd-bc .bc-stats .bd-stats__item { grid-column: span 6; } .bd-bc .bc-stats .bd-stats__item:last-child { grid-column: span 12; } } @media (min-width: 768px) { .bd-bc .bc-stats .bd-stats__item { height: 360px; } } @media (min-width: 1600px) { .bd-bc .bc-stats .bd-stats__item { height: 440px; } } .bd-bc .bd-stats__number { font-family: var(--font-unbounded); font-weight: 500; letter-spacing: -1px; } .bd-bc .bc-stats .bd-stats__label { white-space: pre-line; max-width: 340px; } @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; 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); } } /* Timeline, services and proof rows: the titles a step smaller so long names keep to one or two lines. */ @media (min-width: 1200px) { .bd-bc .bd-timeline__title { font-size: 36px; } } /* Reviews: the grid tracks may shrink below the width of the scrolling row of cards. */ .bd-bc .bc-reviews .bd-tslider { grid-template-columns: minmax(0, 1fr); } @media (min-width: 1200px) { .bd-bc .bc-reviews .bd-tslider { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } } /* Closing call to action: the crowned pawn stands on the bottom edge of the card. */ .bd-bc .bc-cta { overflow: hidden; padding: 40px 30px 0; border-radius: 26px; background: var(--base-tint); } @media (min-width: 768px) { .bd-bc .bc-cta { padding: 60px 60px 0; border-radius: 50px; } } @media (min-width: 1200px) { .bd-bc .bc-cta { padding: 80px 80px 0; } } .bd-bc .bc-cta .bd-cta-split { grid-template-columns: minmax(0, 1fr); align-items: end; } @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__content { padding-bottom: 40px; } @media (min-width: 768px) { .bd-bc .bc-cta .bd-cta-split__content { padding-bottom: 60px; } } @media (min-width: 1200px) { .bd-bc .bc-cta .bd-cta-split__content { padding-bottom: 80px; } } .bd-bc .bc-cta .bd-cta-split__media { overflow: visible; background: transparent; border-radius: 0; } .bd-bc .bc-cta .bd-cta-split__media img { display: block; width: 140%; max-width: none; margin: 0 0 0 -20%; } @media (max-width: 991px) { .bd-bc .bc-cta .bd-cta-split__media img { width: 100%; max-width: 420px; margin: 0 auto; } } /* Headings: lines fill naturally and break where the line ends; the markup joins the last two words (or whole phrases) with no-break spaces, so nothing ends on a lone word. */ .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; } .bd-bc .bc-cta .bd-cta-split__title { font-size: 40px; } } @media (min-width: 992px) and (max-width: 1199px) { .bd-bc .bd-stitle__title { font-size: 44px; } .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-founder .bd-stitle__title { font-size: min(30px, 7.6vw); } .bd-bc .bc-cta { margin: 0 -14px; padding: 36px 16px 0; } } /* Phones: buttons one step smaller; a long caption wraps inside its button instead of being cut. */ @media (max-width: 575px) { .bd-bc .bd-btn { max-width: 100%; font-size: 17px; padding-left: 18px; padding-right: 18px; 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; } } /* Small phones (under 390px): text one step smaller, so the narrow column keeps whole phrases on each line. */ @media (max-width: 389px) { .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 { font-size: 15px; padding-left: 14px; padding-right: 14px; gap: 8px; } .bd-bc .bd-btn .bd-slide { font-size: 20px; } } /* The page title is a whole sentence in a wide face. Its size follows the column width, so the Bulgarian title always sits in three lines of two words each ("В претъпкан / пазар яснотата / побеждава шума.") and never leaves a word alone. */ .bd-bc:lang(bg) .bd-ihead__title { font-size: calc((min(100vw, 1920px) - 60px) * 0.0846); } @media (min-width: 768px) { .bd-bc:lang(bg) .bd-ihead__title { font-size: calc((min(100vw, 1920px) - 120px) * 0.0846); } } @media (min-width: 1600px) { .bd-bc:lang(bg) .bd-ihead__title { font-size: calc((min(100vw, 1920px) - 180px) * 0.0846); } } @media (max-width: 575px) { .bd-bc:lang(en) .bd-ihead__title { font-size: min(42px, 10.4vw); } } @media (min-width: 576px) and (max-width: 767px) { .bd-bc:lang(en) .bd-ihead__title { font-size: 7.4vw; } } /* ---------- Line lengths: every list title, card and label keeps whole phrases at every width ---------- */ .bd-bc .bd-ihead__lead { font-size: 24px; } @media (max-width: 575px) { .bd-bc .bd-ihead__lead { font-size: 20px; } } @media (max-width: 389px) { .bd-bc .bd-ihead__lead { font-size: 18px; } } /* Services: the names in the display face, one size for the whole list. */ .bd-bc .bd-slist__title { font-size: 26px; line-height: 1.15; } @media (min-width: 768px) { .bd-bc .bd-slist__title { font-size: 36px; } } @media (min-width: 1200px) { .bd-bc .bd-slist__title { font-size: 44px; } } @media (min-width: 1600px) { .bd-bc .bd-slist__title { font-size: 54px; } } /* Where to check: the row names. */ @media (max-width: 767px) { .bd-bc .bd-awards__name { font-size: 22px; } } @media (min-width: 768px) and (max-width: 1199px) { .bd-bc .bd-awards__name { font-size: 34px; } } /* Reviews: the title beside the cards, the quotes one step smaller on phones. */ .bd-bc .bd-tslider__title { font-size: min(21px, 4.9vw); line-height: 1.3; } @media (min-width: 768px) { .bd-bc .bd-tslider__title { font-size: 44px; line-height: 1.1; } } @media (min-width: 1200px) { .bd-bc .bd-tslider__title { font-size: 36px; } } @media (min-width: 1600px) { .bd-bc .bd-tslider__title { font-size: 44px; } } @media (max-width: 767px) { .bd-bc .bd-testi__text p { font-size: 17px; } } /* The history: titles one step smaller on phones. */ @media (max-width: 767px) { .bd-bc .bd-timeline__title { font-size: 22px; } } /* Small buttons (the review links) never wrap. */ @media (max-width: 575px) { .bd-bc .bd-btn--small, .bd-bc .bd-btn--small .bd-roll > span { white-space: nowrap; } } @media (max-width: 430px) { .bd-bc .bd-testi__text p { font-size: 16px; } } @media (min-width: 1200px) and (max-width: 1399px) { .bd-bc .bd-slist__descr { font-size: 16px; } } @media (max-width: 389px) { .bd-bc .bd-manifest__text { font-size: 19px; } .bd-bc .bd-timeline__title { font-size: 19px; } .bd-bc .bd-stitle__descr, .bd-bc .bd-stitle p, .bd-bc .bd-slist__descr, .bd-bc .bd-timeline__descr { font-size: 16px; } .bd-bc .bd-slist__title { font-size: 21px; } .bd-bc .bd-awards__name { font-size: 19px; } } /* Phones: wider review cards with less padding, so the quotes keep whole phrases on each line. */ @media (max-width: 575px) { .bd-bc .bd-tslider__track { grid-auto-columns: 92%; gap: 16px; } .bd-bc .bd-testi { padding: 24px 22px; gap: 30px; min-height: 0; } .bd-bc .bd-testi__content { gap: 30px; } } @media (max-width: 389px) { .bd-bc .bd-testi__text p { font-size: 15px; } } /* ---------- The live pages set fonts globally with !important. These restore the faces the design uses. ---------- */ /* BG: