:root {
--koami-white: #FFFFFF;
--koami-black: #000000;
--koami-yellow: #FFD017;
--koami-warm-yellow: #FAB23D;
--koami-orange: #F28A2E;
--koami-cream: #FBFAF7;
--koami-beige: #F7F2E8;
--koami-stone: #F4F2EC;
--koami-line: #E8E5DD;
--koami-muted: #6F6B63;
--koami-radius: 32px;
--koami-container: 1280px;
}
.koami-site,
.koami-site * {
box-sizing: border-box;
}
.koami-site {
margin: 0;
font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--koami-black);
background: var(--koami-white);
line-height: 1.4;
overflow-x: hidden;
}
.koami-site a {
color: inherit;
text-decoration: none;
}
.koami-site img,
.koami-site svg {
display: block;
max-width: 100%;
}
.koami-wrap {
width: min(100% - 48px, var(--koami-container));
margin-inline: auto;
}
.koami-announcement {
background: var(--koami-black);
color: var(--koami-white);
text-align: center;
padding: 9px 16px;
font-size: 12px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.koami-header {
position: sticky;
top: 0;
z-index: 50;
border-bottom: 1px solid rgba(0,0,0,.08);
background: rgba(255,255,255,.92);
backdrop-filter: blur(18px);
}
.koami-header-inner {
min-height: 86px;
display: grid;
grid-template-columns: 180px 1fr auto;
align-items: center;
gap: 28px;
}
.koami-logo-img {
width: 154px;
height: auto;
}
.koami-logo-text {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 26px;
font-weight: 900;
letter-spacing: -.08em;
}
.koami-logo-mark {
position: relative;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--koami-black);
color: var(--koami-white);
font-size: 15px;
letter-spacing: -.08em;
font-weight: 900;
}
.koami-logo-mark::after {
content: "";
position: absolute;
right: -3px;
top: -3px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--koami-yellow);
}
.koami-nav {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(18px, 2.3vw, 34px);
font-size: 14px;
font-weight: 700;
color: rgba(0,0,0,.68);
}
.koami-nav a {
position: relative;
padding: 10px 0;
}
.koami-nav a:hover,
.koami-nav a.is-active {
color: var(--koami-black);
}
.koami-nav a.is-active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 2px;
height: 3px;
border-radius: 99px;
background: var(--koami-yellow);
}
.koami-actions {
display: flex;
align-items: center;
gap: 12px;
}
.koami-lang {
border: 1px solid rgba(0,0,0,.16);
border-radius: 999px;
padding: 10px 14px;
font-size: 13px;
font-weight: 800;
background: var(--koami-white);
}
.koami-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 46px;
border: 2px solid transparent;
border-radius: 999px;
padding: 13px 22px;
font-size: 14px;
font-weight: 900;
line-height: 1;
cursor: pointer;
transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
white-space: nowrap;
}
.koami-btn:hover {
transform: translateY(-1px);
}
.koami-btn-yellow {
background: var(--koami-yellow);
color: var(--koami-black);
}
.koami-btn-yellow:hover {
background: var(--koami-warm-yellow);
}
.koami-btn-black {
background: var(--koami-black);
color: var(--koami-white);
}
.koami-btn-white {
background: var(--koami-white);
color: var(--koami-black);
}
.koami-btn-outline {
background: transparent;
border-color: var(--koami-black);
color: var(--koami-black);
}
.koami-btn-outline:hover {
background: var(--koami-black);
color: var(--koami-white);
}
.koami-mobile-menu {
display: none;
border: 1px solid rgba(0,0,0,.15);
background: var(--koami-white);
border-radius: 999px;
padding: 10px 14px;
font-size: 13px;
font-weight: 900;
} .koami-hero {
position: relative;
overflow: hidden;
background: var(--koami-white);
padding: 82px 0 92px;
}
.koami-hero::before {
content: "";
position: absolute;
left: -160px;
top: 120px;
width: 360px;
height: 360px;
border-radius: 50%;
background: rgba(255,208,23,.24);
filter: blur(60px);
}
.koami-hero-grid {
position: relative;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 62px;
align-items: center;
}
.koami-tag {
display: inline-flex;
border-radius: 999px;
background: #FFF8DB;
padding: 10px 15px;
font-size: 12px;
font-weight: 900;
letter-spacing: .17em;
text-transform: uppercase;
}
.koami-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .16em;
color: rgba(0,0,0,.48);
}
.koami-kicker::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--koami-yellow);
}
.koami-title-xl {
margin: 24px 0 0;
max-width: 860px;
font-size: clamp(56px, 8vw, 118px);
line-height: .84;
letter-spacing: -.09em;
font-weight: 900;
}
.koami-title-lg {
margin: 0;
font-size: clamp(42px, 5.8vw, 82px);
line-height: .92;
letter-spacing: -.075em;
font-weight: 900;
}
.koami-title-md {
margin: 0;
font-size: clamp(34px, 4vw, 58px);
line-height: .95;
letter-spacing: -.065em;
font-weight: 900;
}
.koami-highlight {
position: relative;
display: inline-block;
z-index: 1;
white-space: nowrap;
}
.koami-highlight::after {
content: "";
position: absolute;
left: 3px;
right: 1px;
bottom: .03em;
z-index: -1;
height: .23em;
border-radius: 999px;
background: var(--koami-yellow);
transform: rotate(-1.5deg);
}
.koami-lead {
margin: 30px 0 0;
max-width: 700px;
font-size: clamp(17px, 1.7vw, 21px);
line-height: 1.7;
color: rgba(0,0,0,.68);
}
.koami-hero-actions {
margin-top: 32px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.koami-trust-cards {
margin-top: 38px;
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 12px;
max-width: 650px;
}
.koami-trust-card {
border: 1px solid rgba(0,0,0,.1);
border-radius: 16px;
background: var(--koami-white);
padding: 13px 14px;
font-size: 12px;
font-weight: 800;
color: rgba(0,0,0,.7);
box-shadow: 0 10px 30px rgba(0,0,0,.04);
}
.koami-product-visual {
position: relative;
display: flex;
min-height: 430px;
align-items: center;
justify-content: center;
border-radius: 36px;
background: var(--koami-beige);
padding: 34px;
}
.koami-product-visual::before {
content: "Loomingust loodud";
position: absolute;
top: 28px;
right: 28px;
rotate: 9deg;
border-radius: 999px;
background: var(--koami-yellow);
padding: 9px 15px;
font-size: 12px;
font-weight: 900;
}
.koami-dots {
position: absolute;
left: 28px;
top: 30px;
display: flex;
gap: 7px;
}
.koami-dots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--koami-black);
}
.koami-hoodie {
position: relative;
width: min(78%, 305px);
border-radius: 36px 36px 48px 48px;
background: var(--koami-white);
padding: 58px 34px 70px;
box-shadow: 0 26px 70px rgba(0,0,0,.08);
border: 1px solid rgba(0,0,0,.05);
}
.koami-hoodie::before,
.koami-hoodie::after {
content: "";
position: absolute;
top: 78px;
width: 78px;
height: 120px;
background: var(--koami-white);
box-shadow: 0 10px 20px rgba(0,0,0,.04);
}
.koami-hoodie::before {
left: -55px;
border-radius: 42px 20px 26px 42px;
transform: rotate(-18deg);
}
.koami-hoodie::after {
right: -55px;
border-radius: 20px 42px 42px 26px;
transform: rotate(18deg);
}
.koami-neck {
width: 88px;
height: 42px;
border: 2px solid rgba(0,0,0,.10);
border-top: 0;
border-radius: 0 0 999px 999px;
margin: 0 auto 28px;
}
.koami-cloud-svg {
margin: 0 auto;
width: 210px;
height: 100px;
color: var(--koami-black);
}
.koami-yellow-line {
width: 138px;
height: 10px;
border-radius: 999px;
background: var(--koami-yellow);
margin: 14px auto 0;
}
.koami-fridge-art {
margin: 14px 0 0;
text-align: center;
font-size: 11px;
font-weight: 900;
letter-spacing: .24em;
text-transform: uppercase;
color: rgba(0,0,0,.45);
}
.koami-spark {
position: absolute;
width: 38px;
height: 38px;
color: var(--koami-black);
}
.koami-spark-yellow {
color: var(--koami-yellow);
width: 20px;
height: 20px;
}
.koami-trust-ribbon {
border-block: 1px solid rgba(0,0,0,.1);
background: var(--koami-yellow);
padding: 12px 0;
}
.koami-ribbon-row {
display: flex;
justify-content: center;
align-items: center;
gap: 26px;
flex-wrap: wrap;
text-align: center;
font-size: 12px;
font-weight: 900;
letter-spacing: .16em;
text-transform: uppercase;
}
.koami-ribbon-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--koami-black);
}
.koami-section {
padding: 94px 0;
}
.koami-section-cream {
background: var(--koami-cream);
}
.koami-section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 32px;
margin-bottom: 40px;
}
.koami-section-head p {
max-width: 470px;
margin: 0;
color: rgba(0,0,0,.62);
line-height: 1.75;
}
.koami-category-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 18px;
}
.koami-category-card {
position: relative;
overflow: hidden;
min-height: 405px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 34px;
background: var(--koami-white);
padding: 28px;
box-shadow: 0 10px 34px rgba(0,0,0,.035);
transition: transform 180ms ease, box-shadow 180ms ease;
}
.koami-category-card:hover {
transform: translateY(-4px);
box-shadow: 0 25px 70px rgba(0,0,0,.08);
}
.koami-card-icon {
width: 58px;
height: 58px;
display: grid;
place-items: center;
border-radius: 18px;
background: var(--koami-black);
color: var(--koami-white);
font-size: 28px;
font-weight: 900;
margin-bottom: 62px;
}
.koami-category-card h3 {
margin: 0;
font-size: 31px;
line-height: .96;
letter-spacing: -.055em;
font-weight: 900;
}
.koami-category-card p {
min-height: 112px;
margin: 17px 0 0;
color: rgba(0,0,0,.62);
font-size: 14px;
line-height: 1.72;
}
.koami-elementor-note {
margin: 16px 0 0;
border-radius: 14px;
background: var(--koami-cream);
padding: 12px;
font-size: 11px;
font-weight: 800;
color: rgba(0,0,0,.45);
}
.koami-text-link {
display: inline-flex;
gap: 8px;
align-items: center;
margin-top: 22px;
font-size: 14px;
font-weight: 900;
}
.koami-process {
background: var(--koami-black);
color: var(--koami-white);
border-radius: 42px;
padding: clamp(42px, 6vw, 76px);
}
.koami-process-grid {
margin-top: 44px;
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 16px;
}
.koami-process-card {
min-height: 270px;
border-radius: 28px;
background: var(--koami-white);
color: var(--koami-black);
padding: 24px;
}
.koami-step-number {
display: inline-flex;
margin-bottom: 48px;
border-radius: 999px;
background: var(--koami-yellow);
padding: 8px 12px;
font-size: 12px;
font-weight: 900;
}
.koami-process-card h3 {
margin: 0;
font-size: 24px;
line-height: 1;
letter-spacing: -.045em;
}
.koami-process-card p {
margin: 15px 0 0;
color: rgba(0,0,0,.62);
font-size: 14px;
line-height: 1.68;
}
.koami-banner-stack {
display: grid;
gap: 20px;
}
.koami-campaign-banner {
display: grid;
grid-template-columns: 1fr .72fr;
gap: 34px;
align-items: center;
min-height: 380px;
border-radius: 36px;
padding: clamp(32px, 5vw, 62px);
overflow: hidden;
position: relative;
}
.koami-campaign-yellow {
background: var(--koami-yellow);
color: var(--koami-black);
}
.koami-campaign-light {
background: var(--koami-white);
color: var(--koami-black);
border: 1px solid rgba(0,0,0,.1);
}
.koami-campaign-dark {
background: var(--koami-black);
color: var(--koami-white);
}
.koami-campaign-banner p {
max-width: 610px;
margin: 18px 0 0;
line-height: 1.7;
color: currentColor;
opacity: .68;
}
.koami-banner-visual {
position: relative;
min-height: 250px;
border-radius: 30px;
background: rgba(255,255,255,.24);
display: grid;
place-items: center;
}
.koami-campaign-dark .koami-banner-visual {
background: rgba(255,255,255,.08);
}
.koami-starter-grid,
.koami-gift-grid,
.koami-shop-category-row {
display: grid;
gap: 18px;
}
.koami-starter-grid {
grid-template-columns: repeat(4, minmax(0,1fr));
}
.koami-starter-card {
border: 1px solid rgba(0,0,0,.1);
border-radius: 30px;
background: var(--koami-white);
padding: 16px;
}
.koami-product-mini {
aspect-ratio: 1.15;
border-radius: 24px;
background: var(--koami-beige);
display: grid;
place-items: center;
font-size: 54px;
margin-bottom: 18px;
}
.koami-starter-card h3 {
margin: 0;
font-size: 20px;
line-height: 1.04;
letter-spacing: -.045em;
}
.koami-starter-card p {
margin: 8px 0 0;
color: rgba(0,0,0,.55);
font-size: 13px;
font-weight: 700;
}
.koami-starter-card strong {
display: block;
margin-top: 12px;
font-size: 15px;
}
.koami-story {
position: relative;
overflow: hidden;
border-radius: 42px;
background: var(--koami-cream);
padding: clamp(42px, 7vw, 86px);
}
.koami-story p {
max-width: 780px;
margin: 24px 0 0;
color: rgba(0,0,0,.66);
font-size: 18px;
line-height: 1.75;
}
.koami-gift-grid {
grid-template-columns: repeat(6, minmax(0,1fr));
}
.koami-gift-chip {
min-height: 132px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 28px;
background: var(--koami-white);
padding: 20px;
}
.koami-gift-chip strong {
display: block;
font-size: 20px;
letter-spacing: -.04em;
font-weight: 900;
}
.koami-gift-chip span {
display: block;
margin-top: 10px;
color: rgba(0,0,0,.58);
font-size: 13px;
line-height: 1.55;
}
.koami-elementor-handoff {
border: 2px dashed rgba(0,0,0,.25);
border-radius: 34px;
background: var(--koami-cream);
padding: clamp(32px, 5vw, 50px);
}
.koami-handoff-grid {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 16px;
}
.koami-handoff-card {
border: 1px solid rgba(0,0,0,.1);
border-radius: 28px;
background: var(--koami-white);
padding: 22px;
}
.koami-handoff-card h3 {
margin: 0;
font-size: 20px;
letter-spacing: -.04em;
}
.koami-handoff-card p {
margin: 12px 0 0;
color: rgba(0,0,0,.62);
line-height: 1.65;
font-size: 14px;
} .koami-shop-hero {
position: relative;
padding: 54px 0 40px;
background:
radial-gradient(circle at 10% 0%, rgba(255,208,23,.16), transparent 28%),
var(--koami-white);
}
.koami-breadcrumb {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 28px;
color: var(--koami-muted);
font-size: 13px;
font-weight: 600;
}
.koami-shop-hero-grid {
min-height: 260px;
display: grid;
grid-template-columns: 1fr 420px;
gap: 42px;
align-items: center;
}
.koami-shop-title {
margin: 0;
font-size: clamp(58px, 8vw, 112px);
line-height: .86;
letter-spacing: -.07em;
font-weight: 900;
}
.koami-shop-lead {
margin: 24px 0 0;
max-width: 650px;
font-size: clamp(16px, 1.8vw, 22px);
line-height: 1.45;
}
.koami-doodle-stage {
position: relative;
min-height: 230px;
}
.koami-doodle-cloud {
position: absolute;
right: 44px;
top: 30px;
width: 280px;
height: 130px;
color: var(--koami-black);
}
.koami-spark-line {
position: absolute;
right: 10px;
bottom: 40px;
width: 54px;
height: 54px;
transform: rotate(45deg);
}
.koami-spark-line::before,
.koami-spark-line::after {
content: "";
position: absolute;
background: var(--koami-black);
border-radius: 999px;
}
.koami-spark-line::before {
width: 4px;
height: 54px;
left: 25px;
}
.koami-spark-line::after {
width: 54px;
height: 4px;
top: 25px;
}
.koami-shop-cats {
padding: 22px 0 42px;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.koami-shop-category-row {
grid-template-columns: repeat(6, minmax(0,1fr));
}
.koami-shop-cat {
display: grid;
justify-items: center;
gap: 12px;
border-radius: 28px;
padding: 18px 10px;
transition: background 180ms ease, transform 180ms ease;
}
.koami-shop-cat:hover {
background: var(--koami-cream);
transform: translateY(-2px);
}
.koami-shop-cat-icon {
width: 88px;
height: 88px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--koami-cream);
font-size: 34px;
}
.koami-shop-cat strong {
font-size: 15px;
line-height: 1;
}
.koami-shop-cat span {
margin-top: -6px;
color: var(--koami-muted);
font-size: 12px;
}
.koami-shop-area {
padding: 28px 0 86px;
}
.koami-shop-layout {
display: grid;
grid-template-columns: 292px 1fr;
gap: 34px;
align-items: start;
}
.koami-filter {
position: sticky;
top: 114px;
min-height: 720px;
border-right: 1px solid var(--koami-line);
padding: 24px 22px 28px 0;
}
.koami-filter-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
margin-bottom: 22px;
}
.koami-filter-title {
font-size: 14px;
font-weight: 900;
}
.koami-reset {
border: 0;
background: transparent;
color: var(--koami-muted);
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
.koami-filter-group {
padding: 20px 0;
border-bottom: 1px solid var(--koami-line);
}
.koami-filter-group h3 {
margin: 0 0 13px;
font-size: 13px;
font-weight: 900;
}
.koami-check {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 7px 0;
font-size: 13px;
cursor: pointer;
}
.koami-check input {
appearance: none;
width: 18px;
height: 18px;
border: 1.5px solid #C9C5BB;
border-radius: 50%;
display: grid;
place-items: center;
}
.koami-check input:checked {
border-color: var(--koami-yellow);
background: radial-gradient(circle, var(--koami-yellow) 0 44%, transparent 48%);
}
.koami-range {
position: relative;
height: 5px;
margin: 22px 8px 16px;
border-radius: 999px;
background: linear-gradient(90deg, var(--koami-yellow) 9%, var(--koami-yellow) 86%, var(--koami-line) 86%);
}
.koami-range::before,
.koami-range::after {
content: "";
position: absolute;
top: 50%;
width: 20px;
height: 20px;
border: 1.5px solid var(--koami-muted);
border-radius: 50%;
background: var(--koami-white);
transform: translateY(-50%);
}
.koami-range::before {
left: 3%;
}
.koami-range::after {
right: 3%;
}
.koami-range-values {
display: flex;
justify-content: space-between;
font-size: 12px;
font-weight: 800;
}
.koami-swatches {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.koami-swatch {
width: 29px;
height: 29px;
border: 1px solid #D7D2C8;
border-radius: 50%;
background: var(--swatch, #fff);
}
.koami-products-panel {
min-width: 0;
}
.koami-mobile-filter-btn {
display: none;
width: 100%;
margin: 26px 0 20px;
}
.koami-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 24px;
}
.koami-toolbar p {
margin: 0;
font-size: 13px;
font-weight: 800;
}
.koami-sort {
width: 260px;
border: 1px solid var(--koami-line);
border-radius: 14px;
background: var(--koami-white);
padding: 12px 16px;
font-size: 13px;
font-weight: 700;
}
.koami-product-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 34px 24px;
}
.koami-product-card {
min-width: 0;
}
.koami-product-image {
position: relative;
overflow: hidden;
aspect-ratio: 4/3;
border-radius: 12px;
border: 1px solid rgba(0,0,0,.04);
background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(244,242,236,.95));
}
.koami-product-emoji {
width: 100%;
height: 100%;
display: grid;
place-items: center;
font-size: clamp(68px, 8vw, 120px);
transition: transform 180ms ease;
}
.koami-product-card:hover .koami-product-emoji {
transform: scale(1.035);
}
.koami-heart {
position: absolute;
z-index: 2;
top: 12px;
right: 12px;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 1px solid rgba(0,0,0,.14);
border-radius: 50%;
background: rgba(255,255,255,.88);
font-size: 21px;
}
.koami-quick {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
z-index: 3;
opacity: 0;
transform: translateY(14px);
transition: opacity 180ms ease, transform 180ms ease;
}
.koami-product-card:hover .koami-quick {
opacity: 1;
transform: translateY(0);
}
.koami-quick .koami-btn {
width: 100%;
}
.koami-product-card h3 {
margin: 14px 0 0;
font-size: 15px;
line-height: 1.25;
font-weight: 800;
letter-spacing: -.015em;
}
.koami-price {
margin: 7px 0 0;
font-size: 15px;
font-weight: 900;
}
.koami-badge {
margin-top: 7px;
display: inline-flex;
align-items: center;
gap: 7px;
color: #333;
font-size: 12px;
font-weight: 700;
}
.koami-badge::before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--koami-yellow);
}
.koami-shop-seo,
.koami-custom-cta {
margin-top: 72px;
border-radius: 36px;
}
.koami-shop-seo {
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: 44px;
align-items: start;
background: var(--koami-cream);
padding: clamp(32px, 5vw, 62px);
}
.koami-shop-seo p,
.koami-custom-cta p {
margin: 0;
color: rgba(0,0,0,.66);
font-size: 16px;
line-height: 1.75;
}
.koami-custom-cta {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 44px;
align-items: center;
min-height: 415px;
background: var(--koami-black);
color: var(--koami-white);
padding: clamp(34px, 6vw, 76px);
overflow: hidden;
}
.koami-custom-cta p {
margin-top: 22px;
color: rgba(255,255,255,.75);
max-width: 600px;
}
.koami-custom-actions {
margin-top: 28px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.koami-yellow-blob {
justify-self: end;
width: min(100%, 390px);
aspect-ratio: 1.15;
border-radius: 56% 44% 50% 50% / 45% 51% 49% 55%;
background: var(--koami-yellow);
display: grid;
place-items: center;
transform: rotate(-5deg);
}
.koami-yellow-blob::before {
content: "";
width: 64%;
height: 8px;
border-radius: 999px;
background: var(--koami-black);
box-shadow: 0 28px 0 var(--koami-black), 0 -28px 0 var(--koami-black);
transform: rotate(-8deg);
} .koami-footer {
background: var(--koami-black);
color: var(--koami-white);
padding: 64px 0;
}
.koami-footer-grid {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 50px;
align-items: start;
}
.koami-footer h2 {
max-width: 720px;
margin: 34px 0 0;
font-size: clamp(38px, 5vw, 64px);
line-height: .92;
letter-spacing: -.07em;
}
.koami-footer p {
margin: 20px 0 0;
color: rgba(255,255,255,.62);
}
.koami-newsletter {
border: 1px solid rgba(255,255,255,.12);
border-radius: 32px;
background: rgba(255,255,255,.08);
padding: 22px;
}
.koami-form-row {
display: flex;
gap: 12px;
}
.koami-form-row input {
flex: 1;
min-height: 52px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 999px;
background: var(--koami-white);
padding: 0 20px;
color: var(--koami-black);
font-size: 14px;
font-weight: 700;
} .koami-sheet-backdrop,
.koami-filter-sheet {
display: none;
}
@media (max-width: 1180px) {
.koami-header-inner {
grid-template-columns: 160px 1fr auto;
}
.koami-actions .koami-lang {
display: none;
}
.koami-hero-grid,
.koami-shop-hero-grid {
grid-template-columns: 1fr .8fr;
}
.koami-category-grid,
.koami-process-grid,
.koami-starter-grid {
grid-template-columns: repeat(2, minmax(0,1fr));
}
.koami-gift-grid {
grid-template-columns: repeat(3, minmax(0,1fr));
}
.koami-product-grid {
grid-template-columns: repeat(2, minmax(0,1fr));
}
.koami-shop-category-row {
grid-template-columns: repeat(3, minmax(0,1fr));
}
}
@media (max-width: 820px) {
.koami-wrap {
width: min(100% - 32px, 100%);
}
.koami-announcement {
font-size: 10px;
letter-spacing: .1em;
}
.koami-header-inner {
min-height: 72px;
display: flex;
justify-content: space-between;
}
.koami-logo-img {
width: 120px;
}
.koami-logo-text {
font-size: 22px;
}
.koami-nav,
.koami-actions {
display: none;
}
.koami-mobile-menu {
display: inline-flex;
}
.koami-hero {
padding: 50px 0 62px;
}
.koami-hero-grid,
.koami-shop-hero-grid,
.koami-campaign-banner,
.koami-shop-seo,
.koami-custom-cta,
.koami-footer-grid {
grid-template-columns: 1fr;
}
.koami-title-xl {
font-size: clamp(48px, 17vw, 72px);
}
.koami-lead {
font-size: 16px;
line-height: 1.65;
}
.koami-trust-cards {
grid-template-columns: repeat(2, minmax(0,1fr));
}
.koami-product-visual {
min-height: 360px;
margin-top: 14px;
}
.koami-section {
padding: 58px 0;
}
.koami-section-head {
display: block;
}
.koami-section-head p {
margin-top: 18px;
}
.koami-category-grid,
.koami-process-grid,
.koami-starter-grid,
.koami-gift-grid,
.koami-handoff-grid {
grid-template-columns: 1fr;
}
.koami-category-card {
min-height: 0;
}
.koami-card-icon {
margin-bottom: 36px;
}
.koami-process {
border-radius: 30px;
padding: 32px 22px;
}
.koami-process-card {
min-height: 0;
}
.koami-step-number {
margin-bottom: 30px;
}
.koami-campaign-banner {
min-height: 0;
border-radius: 28px;
}
.koami-banner-visual {
min-height: 180px;
}
.koami-shop-hero {
padding: 30px 0 18px;
}
.koami-shop-title {
font-size: 52px;
}
.koami-shop-lead {
font-size: 15px;
max-width: 340px;
}
.koami-doodle-stage {
position: absolute;
right: 10px;
top: 104px;
width: 150px;
min-height: 104px;
opacity: .95;
}
.koami-doodle-cloud {
right: 0;
top: 0;
width: 138px;
height: 74px;
}
.koami-spark-line {
right: 10px;
bottom: 0;
width: 28px;
height: 28px;
}
.koami-spark-line::before {
height: 28px;
left: 13px;
width: 3px;
}
.koami-spark-line::after {
width: 28px;
top: 13px;
height: 3px;
}
.koami-mobile-filter-btn {
display: inline-flex;
}
.koami-shop-cats {
padding: 4px 0 24px;
border-bottom: 0;
}
.koami-shop-category-row {
display: flex;
gap: 14px;
overflow-x: auto;
padding-bottom: 10px;
scroll-snap-type: x mandatory;
}
.koami-shop-cat {
min-width: 86px;
padding: 0;
scroll-snap-align: start;
}
.koami-shop-cat-icon {
width: 70px;
height: 70px;
font-size: 28px;
}
.koami-shop-cat strong {
font-size: 12px;
}
.koami-shop-cat span {
display: none;
}
.koami-shop-layout {
display: block;
}
.koami-filter {
display: none;
}
.koami-toolbar {
margin-bottom: 16px;
}
.koami-sort {
display: none;
}
.koami-product-grid {
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 24px 12px;
}
.koami-product-image {
aspect-ratio: 1/1.05;
border-radius: 10px;
}
.koami-product-emoji {
font-size: 56px;
}
.koami-heart {
width: 32px;
height: 32px;
top: 8px;
right: 8px;
}
.koami-quick {
display: none;
}
.koami-product-card h3 {
margin-top: 10px;
font-size: 12px;
}
.koami-price {
font-size: 13px;
}
.koami-badge {
font-size: 11px;
}
.koami-shop-seo,
.koami-custom-cta {
margin-top: 50px;
border-radius: 28px;
padding: 30px 24px;
}
.koami-yellow-blob {
justify-self: start;
width: 230px;
}
.koami-form-row {
flex-direction: column;
}
.koami-sheet-backdrop {
position: fixed;
inset: 0;
z-index: 80;
background: rgba(0,0,0,.24);
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease;
}
.koami-sheet-backdrop.is-open {
display: block;
opacity: 1;
pointer-events: auto;
}
.koami-filter-sheet {
position: fixed;
z-index: 90;
left: 0;
right: 0;
bottom: 0;
display: block;
max-height: 88vh;
overflow: auto;
border-radius: 28px 28px 0 0;
background: var(--koami-white);
padding: 18px 24px 120px;
box-shadow: 0 -24px 70px rgba(0,0,0,.18);
transform: translateY(105%);
transition: transform 260ms ease;
}
.koami-filter-sheet.is-open {
transform: translateY(0);
}
.koami-sheet-handle {
width: 46px;
height: 5px;
border-radius: 999px;
background: var(--koami-line);
margin: 0 auto 20px;
}
.koami-sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.koami-sheet-head h2 {
margin: 0;
font-size: 24px;
letter-spacing: -.04em;
}
.koami-sheet-close {
width: 42px;
height: 42px;
border: 0;
border-radius: 50%;
background: var(--koami-cream);
font-size: 22px;
}
.koami-sheet-actions {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 12px;
padding: 16px 24px 24px;
background: linear-gradient(180deg, rgba(255,255,255,.2), #fff 30%);
}
}
@media (max-width: 420px) {
.koami-trust-cards {
grid-template-columns: 1fr;
}
.koami-title-xl {
letter-spacing: -.08em;
}
}