:root {
--koami-white: #FFFFFF;
--koami-black: #000000;
--koami-yellow: #FFD017;
--koami-yellow-warm: #FAB23D;
--koami-orange: #F28A2E;
--koami-paper: #FAFAF7;
--koami-stone: #F4F2EC;
--koami-line: #E8E5DD;
--koami-muted: #77746D;
--koami-container: 1320px;
--koami-radius: 28px;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--koami-black);
background: var(--koami-white);
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
img, svg { max-width: 100%; display: block; }
.koami-container {
width: min(100% - 48px, var(--koami-container));
margin-inline: auto;
}
.koami-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 999px;
padding: 14px 26px;
border: 1px solid var(--koami-black);
background: var(--koami-white);
color: var(--koami-black);
font-weight: 700;
font-size: 14px;
cursor: pointer;
}
.koami-button--primary {
background: var(--koami-yellow);
border-color: var(--koami-yellow);
}
.koami-button--primary:hover {
background: var(--koami-black);
border-color: var(--koami-black);
color: var(--koami-white);
}
.koami-site-header {
position: sticky;
top: 0;
z-index: 20;
background: rgba(255,255,255,.9);
backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(0,0,0,.07);
}
.koami-header-inner {
min-height: 92px;
display: grid;
grid-template-columns: 180px 1fr auto;
align-items: center;
gap: 28px;
}
.koami-logo img { width: 150px; height: auto; }
.koami-nav {
display: flex;
justify-content: center;
gap: clamp(18px, 2.4vw, 34px);
font-size: 14px;
font-weight: 600;
}
.koami-nav a {
position: relative;
padding: 12px 0;
}
.koami-nav a.is-active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 5px;
height: 3px;
background: var(--koami-yellow);
border-radius: 999px;
}
.koami-header-actions {
display: flex;
align-items: center;
gap: 18px;
font-size: 13px;
font-weight: 600;
}
.koami-mobile-icons { display: none; }
.koami-hero {
padding: 52px 0 36px;
}
.koami-breadcrumb {
display: flex;
gap: 10px;
color: var(--koami-muted);
font-size: 13px;
margin-bottom: 26px;
}
.koami-hero-grid {
display: grid;
grid-template-columns: 1fr 420px;
gap: 70px;
align-items: center;
}
.koami-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
font-size: 12px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.koami-eyebrow::before {
content: "";
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--koami-yellow);
}
.koami-hero h1 {
margin: 0;
font-size: clamp(56px, 8vw, 108px);
line-height: .86;
letter-spacing: -.06em;
font-weight: 800;
}
.koami-hero p {
max-width: 640px;
margin: 24px 0 0;
font-size: clamp(17px, 1.8vw, 24px);
line-height: 1.35;
}
.koami-highlight {
position: relative;
display: inline-block;
font-weight: 800;
z-index: 1;
}
.koami-highlight::after {
content: "";
position: absolute;
left: -4px;
right: -4px;
bottom: 4px;
height: .52em;
background: var(--koami-yellow);
border-radius: 8px;
transform: rotate(-1deg);
z-index: -1;
}
.koami-hero-art {
position: relative;
min-height: 260px;
}
.koami-hero-art .cloud {
width: 280px;
position: absolute;
top: 30px;
right: 70px;
}
.koami-hero-art .dots {
width: 120px;
position: absolute;
right: 0;
bottom: 0;
}
.koami-mobile-filter-button { display: none; width: 100%; margin-top: 26px; }
.koami-categories {
padding: 20px 0 44px;
border-bottom: 1px solid rgba(0,0,0,.07);
}
.koami-category-row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 18px;
}
.koami-category {
display: grid;
justify-items: center;
gap: 12px;
padding: 18px 10px;
border-radius: var(--koami-radius);
}
.koami-category:hover { background: var(--koami-paper); }
.koami-category-icon {
width: 92px;
height: 92px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--koami-paper);
}
.koami-category strong { font-size: 15px; }
.koami-category span { margin-top: -8px; color: var(--koami-muted); font-size: 12px; }
.koami-shop {
padding: 30px 0 84px;
}
.koami-shop-layout {
display: grid;
grid-template-columns: 292px 1fr;
gap: 34px;
align-items: start;
}
.koami-filter {
position: sticky;
top: 112px;
border-right: 1px solid var(--koami-line);
padding: 24px 22px 28px 0;
}
.koami-filter-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
gap: 16px;
}
.koami-filter-title { font-size: 14px; font-weight: 800; }
.koami-reset { border: 0; background: transparent; color: var(--koami-muted); font-size: 11px; cursor: pointer; }
.koami-filter-group {
padding: 19px 0;
border-bottom: 1px solid var(--koami-line);
}
.koami-filter-group h3 {
margin: 0 0 14px;
font-size: 13px;
}
.koami-check {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 7px 0;
font-size: 13px;
}
.koami-check input {
appearance: none;
width: 18px;
height: 18px;
border: 1.5px solid #c9c5bb;
border-radius: 50%;
}
.koami-check input:checked {
border-color: var(--koami-yellow);
background: radial-gradient(circle, var(--koami-yellow) 0 43%, transparent 47%);
}
.koami-price-line {
height: 5px;
margin: 22px 2px 16px;
border-radius: 999px;
background: linear-gradient(90deg, var(--koami-yellow) 12%, var(--koami-yellow) 88%, var(--koami-line) 88%);
position: relative;
}
.koami-price-line::before,
.koami-price-line::after {
content: "";
position: absolute;
top: 50%;
width: 20px;
height: 20px;
border-radius: 999px;
background: var(--koami-white);
border: 1.5px solid var(--koami-muted);
transform: translateY(-50%);
}
.koami-price-line::before { left: 4%; }
.koami-price-line::after { right: 0; }
.koami-price-values {
display: flex;
justify-content: space-between;
font-size: 12px;
font-weight: 600;
}
.koami-swatches {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.koami-swatch {
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid #d7d2c8;
background: var(--swatch);
}
.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: 600; }
.koami-sort {
width: 260px;
border: 1px solid var(--koami-line);
border-radius: 12px;
padding: 12px 16px;
background: var(--koami-white);
font-size: 13px;
font-weight: 600;
}
.koami-product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 34px 24px;
}
.koami-card-image {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--koami-stone);
border-radius: 10px;
border: 1px solid rgba(0,0,0,.04);
}
.koami-card-image::after {
content: "Vaata toodet →";
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
padding: 12px 18px;
border-radius: 999px;
background: var(--koami-black);
color: var(--koami-white);
text-align: center;
font-size: 13px;
font-weight: 700;
opacity: 0;
transform: translateY(14px);
transition: .22s ease;
}
.koami-product-card:hover .koami-card-image::after {
opacity: 1;
transform: translateY(0);
}
.koami-heart {
position: absolute;
z-index: 2;
top: 12px;
right: 12px;
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.14);
background: rgba(255,255,255,.88);
display: grid;
place-items: center;
}
.koami-product-visual {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 18px;
transition: transform .22s ease;
}
.koami-product-card:hover .koami-product-visual { transform: scale(1.025); }
.koami-product-card h2 {
margin: 14px 0 0;
font-size: 15px;
font-weight: 700;
letter-spacing: -.015em;
}
.koami-price {
margin: 7px 0 0;
font-size: 15px;
font-weight: 800;
}
.koami-badge {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 7px;
font-size: 12px;
font-weight: 600;
}
.koami-badge::before {
content: "";
width: 9px;
height: 9px;
border-radius: 999px;
background: var(--koami-yellow);
}
.koami-seo,
.koami-custom-cta,
.koami-elementor-notes {
margin-top: 70px;
border-radius: 34px;
padding: clamp(32px, 5vw, 64px);
}
.koami-seo {
background: var(--koami-paper);
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: 46px;
}
.koami-seo h2,
.koami-custom-cta h2 {
margin: 0;
font-size: clamp(32px, 4.4vw, 62px);
line-height: .95;
letter-spacing: -.055em;
font-weight: 800;
}
.koami-seo p,
.koami-custom-cta p,
.koami-elementor-notes p,
.koami-elementor-notes li {
font-size: 16px;
line-height: 1.65;
}
.koami-custom-cta {
margin-top: 32px;
background: var(--koami-black);
color: var(--koami-white);
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 48px;
align-items: center;
overflow: hidden;
}
.koami-custom-cta p { color: rgba(255,255,255,.78); max-width: 580px; }
.koami-custom-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.koami-button--dark-ghost { color: var(--koami-white); border-color: rgba(255,255,255,.28); background: transparent; }
.koami-yellow-blob {
width: min(100%, 390px);
aspect-ratio: 1.2;
justify-self: end;
border-radius: 56% 44% 50% 50% / 45% 51% 49% 55%;
background: var(--koami-yellow);
position: relative;
transform: rotate(-5deg);
}
.koami-yellow-blob::before {
content: "";
position: absolute;
left: 18%;
right: 18%;
top: 50%;
height: 8px;
background: var(--koami-black);
border-radius: 999px;
box-shadow: 0 28px 0 var(--koami-black), 0 -28px 0 var(--koami-black);
transform: rotate(-8deg);
}
.koami-footer {
border-top: 1px solid var(--koami-line);
padding: 46px 0 38px;
background: var(--koami-white);
}
.koami-footer-grid {
display: grid;
grid-template-columns: 1.2fr repeat(3, .7fr);
gap: 32px;
}
.koami-footer h3 { margin: 0 0 14px; font-size: 13px; }
.koami-footer p, .koami-footer a { display: block; color: var(--koami-muted); font-size: 13px; line-height: 1.9; margin: 0; }
.koami-sticky-mobile-cta { display: none; }
.koami-sheet-backdrop,
.koami-bottom-sheet { display: none; }
@media (max-width: 1100px) {
.koami-header-inner { grid-template-columns: 150px 1fr auto; }
.koami-header-actions .hide-tablet { display: none; }
.koami-hero-grid { grid-template-columns: 1fr 320px; gap: 34px; }
.koami-product-grid { grid-template-columns: repeat(2, 1fr); }
.koami-category-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
.koami-container { width: min(100% - 32px, 100%); }
.koami-header-inner { min-height: 72px; display: flex; justify-content: space-between; }
.koami-logo img { width: 112px; }
.koami-nav, .koami-header-actions { display: none; }
.koami-mobile-icons { display: flex; gap: 16px; }
.koami-mobile-icons button { border: 0; background: transparent; padding: 0; }
.koami-hero { padding: 28px 0 20px; }
.koami-breadcrumb { margin-bottom: 18px; font-size: 12px; }
.koami-hero-grid { display: block; position: relative; }
.koami-hero h1 { font-size: 48px; }
.koami-hero p { max-width: 315px; margin-top: 16px; font-size: 15px; }
.koami-hero-art { position: absolute; right: 0; top: 10px; width: 126px; min-height: 92px; }
.koami-hero-art .cloud { width: 124px; right: 0; top: 0; }
.koami-hero-art .dots { display: none; }
.koami-mobile-filter-button { display: flex; }
.koami-categories { padding: 4px 0 26px; border-bottom: 0; }
.koami-category-row { display: flex; overflow-x: auto; gap: 14px; padding-bottom: 10px; }
.koami-category { min-width: 86px; padding: 0; }
.koami-category-icon { width: 72px; height: 72px; }
.koami-category strong { font-size: 12px; }
.koami-category span { display: none; }
.koami-shop { padding: 0 0 96px; }
.koami-shop-layout { display: block; }
.koami-filter { display: none; }
.koami-sort { display: none; }
.koami-toolbar { margin-bottom: 16px; }
.koami-toolbar p { font-size: 12px; }
.koami-product-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
.koami-card-image { aspect-ratio: 1 / 1.08; }
.koami-card-image::after { display: none; }
.koami-heart { width: 32px; height: 32px; top: 8px; right: 8px; }
.koami-product-card h2 { margin-top: 10px; font-size: 12px; line-height: 1.28; }
.koami-price { font-size: 13px; margin-top: 5px; }
.koami-badge { font-size: 11px; margin-top: 6px; }
.koami-seo,
.koami-custom-cta,
.koami-elementor-notes {
margin-top: 48px;
border-radius: 24px;
padding: 30px 24px;
grid-template-columns: 1fr;
}
.koami-seo h2, .koami-custom-cta h2 { font-size: 34px; }
.koami-seo p, .koami-custom-cta p, .koami-elementor-notes p, .koami-elementor-notes li { font-size: 14px; }
.koami-yellow-blob { justify-self: start; width: 230px; margin-top: 8px; }
.koami-footer-grid { grid-template-columns: 1fr; gap: 24px; }
.koami-sticky-mobile-cta {
position: fixed;
left: 16px;
right: 16px;
bottom: 14px;
z-index: 30;
display: flex;
justify-content: center;
box-shadow: 0 14px 34px rgba(0,0,0,.18);
border-radius: 999px;
}
.koami-sticky-mobile-cta .koami-button { width: 100%; padding: 16px 22px; }
.koami-sheet-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,.22);
z-index: 40;
}
.koami-bottom-sheet {
position: fixed;
z-index: 50;
inset: auto 0 0;
height: min(86vh, 720px);
overflow: auto;
background: var(--koami-white);
border-radius: 28px 28px 0 0;
padding: 18px 24px 110px;
box-shadow: 0 -22px 70px rgba(0,0,0,.18);
}
body.koami-filter-open .koami-sheet-backdrop,
body.koami-filter-open .koami-bottom-sheet { display: block; }
} .admin-bar .koami-site-header { top: 32px; }
@media (max-width: 782px) {
.admin-bar .koami-site-header { top: 46px; }
}
.koami-shop-mockup {
width: 100%;
overflow-x: clip;
}
.koami-shop-mockup a {
text-decoration: none;
}