<section class="kb-project">
<div class="kb-project__inner">
<!-- NAGŁÓWEK SEKCJI -->
<div class="kb-project__header">
<div class="kb-project__eyebrow">
O PROJEKCIE
<span></span>
</div>
<h2 class="kb-project__title">
Dobry produkt to za mało
</h2>
<p class="kb-project__intro">
Kolory Biznesu to 6 perspektyw, które pomagają spojrzeć
na produkt szerzej.
</p>
</div>
<!-- 6 KOLORÓW BIZNESU -->
<div class="kb-project__grid">
<!-- PRODUKT -->
<article class="kb-project__card kb-project__card--product">
<div class="kb-project__icon" aria-hidden="true">
<svg viewBox="0 0 32 32">
<path d="M16 4L27 10V22L16 28L5 22V10L16 4Z"></path>
<path d="M5 10L16 16L27 10"></path>
<path d="M16 16V28"></path>
</svg>
</div>
<div class="kb-project__card-content">
<h3>Produkt</h3>
<p>
Czy robimy coś, co naprawdę warto robić?
</p>
</div>
</article>
<!-- DYSTRYBUCJA -->
<article class="kb-project__card kb-project__card--distribution">
<div class="kb-project__icon" aria-hidden="true">
<svg viewBox="0 0 32 32">
<path d="M5 11H20V22H5Z"></path>
<path d="M20 15H25L28 19V22H20Z"></path>
<circle cx="10" cy="24" r="2.5"></circle>
<circle cx="24" cy="24" r="2.5"></circle>
</svg>
</div>
<div class="kb-project__card-content">
<h3>Dystrybucja</h3>
<p>
Jak sprawić, żeby produkt zaczął trafiać do rynku?
</p>
</div>
</article>
<!-- MARKA -->
<article class="kb-project__card kb-project__card--brand">
<div class="kb-project__icon" aria-hidden="true">
<svg viewBox="0 0 32 32">
<path d="M16 4L19.4 11L27 12.1L21.5 17.4L22.8 25L16 21.4L9.2 25L10.5 17.4L5 12.1L12.6 11L16 4Z"></path>
</svg>
</div>
<div class="kb-project__card-content">
<h3>Marka</h3>
<p>
Dlaczego klient ma zapamiętać właśnie nas?
</p>
</div>
</article>
<!-- STRATEGIA -->
<article class="kb-project__card kb-project__card--strategy">
<div class="kb-project__icon" aria-hidden="true">
<svg viewBox="0 0 32 32">
<path d="M7 25C7 19 10 15 14 13"></path>
<path d="M14 13L12 8L16 5L19 10L16 14"></path>
<path d="M10 26H24"></path>
<path d="M20 18L25 23"></path>
</svg>
</div>
<div class="kb-project__card-content">
<h3>Strategia</h3>
<p>
Jak wybrać kierunek, priorytety i model wzrostu?
</p>
</div>
</article>
<!-- EGZEKUCJA -->
<article class="kb-project__card kb-project__card--execution">
<div class="kb-project__icon" aria-hidden="true">
<svg viewBox="0 0 32 32">
<circle cx="16" cy="16" r="11"></circle>
<circle cx="16" cy="16" r="6"></circle>
<circle cx="16" cy="16" r="2"></circle>
<path d="M16 16L25 7"></path>
</svg>
</div>
<div class="kb-project__card-content">
<h3>Egzekucja</h3>
<p>
Jak dowozić strategię bez wiecznego chaosu?
</p>
</div>
</article>
<!-- BALANS -->
<article class="kb-project__card kb-project__card--balance">
<div class="kb-project__icon" aria-hidden="true">
<svg viewBox="0 0 32 32">
<path d="M16 5V26"></path>
<path d="M8 9H24"></path>
<path d="M8 9L4 17H12L8 9Z"></path>
<path d="M24 9L20 17H28L24 9Z"></path>
<path d="M10 27H22"></path>
</svg>
</div>
<div class="kb-project__card-content">
<h3>Balans</h3>
<p>
Jak budować firmę i nie pracować w niej 24/7?
</p>
</div>
</article>
</div>
</div>
</section>
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&display=swap');
/* =========================================================
EASYTOOLS RESET
========================================================= */
#project,
#project > div {
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
BASE
========================================================= */
.kb-project,
.kb-project * {
box-sizing: border-box;
}
.kb-project {
width: 100%;
margin: 0;
padding: 0;
background: #fffdfa;
color: #201814;
font-family: Inter, Arial, sans-serif;
}
/* =========================================================
CONTAINER
========================================================= */
.kb-project__inner {
width: min(1180px, calc(100% - 48px));
margin: 0 auto;
padding:
28px
0
72px;
}
/* =========================================================
HEADER
========================================================= */
.kb-project__header {
margin-bottom: 32px;
}
.kb-project__eyebrow {
margin: 0 0 17px;
display: flex;
align-items: center;
gap: 14px;
color: #504944;
font-size: 11px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.22em;
}
.kb-project__eyebrow span {
display: block;
width: 42px;
height: 1px;
background: #a45e46;
}
.kb-project__title {
margin: 0 0 13px;
color: #171310;
font-family:
"Playfair Display",
Georgia,
"Times New Roman",
serif;
font-size: clamp(44px, 3vw, 56px);
font-weight: 500;
line-height: 1;
letter-spacing: -0.035em;
}
.kb-project__intro {
margin: 0;
color: #625b55;
font-size: 15px;
font-weight: 400;
line-height: 1.55;
}
/* =========================================================
GRID
========================================================= */
.kb-project__grid {
width: 100%;
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 16px;
}
/* =========================================================
CARD
========================================================= */
.kb-project__card {
min-height: 180px;
padding: 28px 28px;
display: flex;
align-items: flex-start;
gap: 22px;
border-radius: 10px;
overflow: hidden;
}
/* =========================================================
CARD COLORS
========================================================= */
.kb-project__card--product {
background:
linear-gradient(
135deg,
#656747 0%,
#76795a 100%
);
color: #ffffff;
}
.kb-project__card--distribution {
background:
linear-gradient(
135deg,
#909580 0%,
#a8ae9a 100%
);
color: #ffffff;
}
.kb-project__card--brand {
background:
linear-gradient(
135deg,
#725342 0%,
#886654 100%
);
color: #ffffff;
}
.kb-project__card--strategy {
background:
linear-gradient(
135deg,
#b56f47 0%,
#c78358 100%
);
color: #ffffff;
}
.kb-project__card--execution {
background:
linear-gradient(
135deg,
#ddcfc2 0%,
#eadfd6 100%
);
color: #302620;
}
.kb-project__card--balance {
background:
linear-gradient(
135deg,
#f5f1ec 0%,
#fbf9f6 100%
);
color: #302620;
border: 1px solid rgba(66, 49, 39, 0.04);
}
/* =========================================================
ICON
========================================================= */
.kb-project__icon {
width: 54px;
height: 54px;
flex: 0 0 54px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid currentColor;
border-radius: 50%;
opacity: 0.92;
}
.kb-project__icon svg {
width: 27px;
height: 27px;
fill: none;
stroke: currentColor;
stroke-width: 1.45;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================================
CARD COPY
========================================================= */
.kb-project__card-content {
min-width: 0;
}
.kb-project__card h3 {
margin: 2px 0 9px;
color: inherit;
font-family:
"Playfair Display",
Georgia,
"Times New Roman",
serif;
font-size: 25px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.025em;
}
.kb-project__card p {
max-width: 230px;
margin: 0;
color: inherit;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
opacity: 0.9;
}
/* =========================================================
SUBTLE HOVER
========================================================= */
.kb-project__card {
transition:
transform 180ms ease,
box-shadow 180ms ease;
}
.kb-project__card:hover {
transform: translateY(-2px);
box-shadow:
0 12px 30px rgba(49, 37, 29, 0.08);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1050px) {
.kb-project__inner {
padding-bottom: 64px;
}
.kb-project__grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.kb-project__card {
min-height: 170px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.kb-project__inner {
width: calc(100% - 40px);
padding:
18px
0
54px;
}
.kb-project__header {
margin-bottom: 27px;
}
.kb-project__title {
font-size: clamp(40px, 10vw, 50px);
}
.kb-project__intro {
font-size: 14px;
}
.kb-project__grid {
grid-template-columns: 1fr;
gap: 12px;
}
.kb-project__card {
min-height: 0;
padding: 25px 24px;
gap: 19px;
}
.kb-project__card p {
max-width: none;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.kb-project__inner {
width: calc(100% - 32px);
padding-bottom: 48px;
}
.kb-project__title {
font-size: 40px;
}
.kb-project__card {
padding: 23px 20px;
}
.kb-project__icon {
width: 50px;
height: 50px;
flex-basis: 50px;
}
.kb-project__card h3 {
font-size: 23px;
}
.kb-project__card p {
font-size: 12px;
}
}
/* =========================================================
ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) {
.kb-project__card {
transition: none;
}
.kb-project__card:hover {
transform: none;
}
}
</style>