/* ============================================================ New KCC Digital Catalog — shared design system Brand: trustworthy, fresh, family-friendly, premium dairy ============================================================ */ :root { /* Brand palette */ --blue: #0057A8; --blue-dark: #00427f; --blue-soft: #e8f1fb; --red: #E11B22; --red-dark: #c0141b; --cream: #FFF7E8; --ink: #172033; --muted: #5b6472; --white: #ffffff; --border: #eadfc9; /* warm hairline that reads on cream */ --border-cool: #e3e8ef; --whatsapp: #25D366; --whatsapp-dk: #128C7E; /* Elevation */ --shadow-sm: 0 1px 2px rgba(23,32,51,.06), 0 2px 8px rgba(23,32,51,.05); --shadow-md: 0 6px 18px rgba(23,32,51,.08), 0 2px 6px rgba(23,32,51,.05); --shadow-lg: 0 20px 48px rgba(0,66,127,.14); /* Radii */ --r-sm: 12px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px; /* Type */ --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* Layout */ --max: 1180px; --gutter: clamp(16px, 4vw, 32px); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); color: var(--ink); background: var(--cream); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: 0; background: none; } ul { list-style: none; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } /* i18n: JS injects textContent from data-en / data-sw based on . */ /* ---------------- Buttons ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: var(--r-pill); font-weight: 700; font-size: .95rem; letter-spacing: .01em; min-height: 46px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn svg { width: 18px; height: 18px; flex: none; } .btn--primary { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(0,87,168,.28); } .btn--primary:hover { background: var(--blue-dark); box-shadow: 0 10px 22px rgba(0,87,168,.32); } .btn--red { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(225,27,34,.26); } .btn--red:hover { background: var(--red-dark); } .btn--ghost { background: #fff; color: var(--blue); border: 1.5px solid var(--border-cool); box-shadow: var(--shadow-sm); } .btn--ghost:hover { border-color: var(--blue); } .btn--wa { background: var(--whatsapp); color: #fff; box-shadow: 0 6px 16px rgba(37,211,102,.3); } .btn--wa:hover { background: var(--whatsapp-dk); } .btn--block { width: 100%; } .btn--sm { padding: 9px 16px; min-height: 40px; font-size: .85rem; } .linklike { color: var(--blue); font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: 5px; } .linklike:hover { text-decoration: underline; } /* ---------------- Demo banner ---------------- */ .demo-banner { background: var(--ink); color: #fff; text-align: center; font-size: .8rem; font-weight: 600; letter-spacing: .01em; padding: 8px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; } .demo-banner .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; box-shadow: 0 0 0 3px rgba(225,27,34,.25); } .demo-banner b { color: #ffd7a0; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } @media (max-width: 480px) { .demo-banner { font-size: .72rem; } } /* ---------------- Header ---------------- */ .site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--border); } .site-header__row { display: flex; align-items: center; gap: 18px; height: 72px; } .brand { display: flex; align-items: center; gap: 10px; margin-right: auto; } .brand img { height: 40px; width: auto; } .brand__tag { font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); background: var(--blue-soft); padding: 4px 9px; border-radius: var(--r-pill); } .nav { display: flex; align-items: center; gap: 4px; } .nav a { padding: 9px 14px; border-radius: var(--r-pill); font-weight: 600; font-size: .92rem; color: var(--ink); transition: background .15s, color .15s; } .nav a:hover { background: var(--blue-soft); color: var(--blue); } .nav a.is-active { color: var(--blue); } .header-actions { display: flex; align-items: center; gap: 10px; } /* Language toggle */ .lang-toggle { display: inline-flex; background: var(--blue-soft); border-radius: var(--r-pill); padding: 3px; border: 1px solid #d7e6f7; } .lang-toggle button { padding: 6px 12px; border-radius: var(--r-pill); font-weight: 800; font-size: .78rem; color: var(--blue); letter-spacing: .04em; transition: background .15s, color .15s; } .lang-toggle button.is-active { background: var(--blue); color: #fff; } .menu-btn { display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; color: var(--ink); } .menu-btn svg { width: 26px; height: 26px; } /* Mobile drawer */ .mobile-nav { position: fixed; inset: 0; z-index: 80; visibility: hidden; pointer-events: none; } .mobile-nav.open { visibility: visible; pointer-events: auto; } .mobile-nav__scrim { position: absolute; inset: 0; background: rgba(23,32,51,.45); opacity: 0; transition: opacity .25s; } .mobile-nav.open .mobile-nav__scrim { opacity: 1; } .mobile-nav__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(320px, 86vw); background: #fff; box-shadow: var(--shadow-lg); padding: 20px; transform: translateX(100%); transition: transform .28s cubic-bezier(.22,1,.36,1); display: flex; flex-direction: column; gap: 6px; } .mobile-nav.open .mobile-nav__panel { transform: translateX(0); } .mobile-nav__panel .close-btn { align-self: flex-end; width: 42px; height: 42px; border-radius: 12px; color: var(--ink); display: grid; place-items: center; } .mobile-nav__panel .close-btn svg { width: 24px; height: 24px; } .mobile-nav__panel a { padding: 14px 12px; border-radius: 12px; font-weight: 700; font-size: 1.05rem; border-bottom: 1px solid var(--border); } .mobile-nav__panel a:hover { background: var(--blue-soft); color: var(--blue); } .mobile-nav__panel .btn { margin-top: 14px; } /* ---------------- Sections ---------------- */ section { padding-block: clamp(44px, 7vw, 84px); } .section-head { max-width: 640px; margin-bottom: 34px; } .eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--red); display: inline-block; margin-bottom: 12px; } h1, h2, h3 { line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; } h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); } h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); } h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); letter-spacing: -0.01em; } .lead { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--muted); } /* ---------------- Product card ---------------- */ .grid { display: grid; gap: 22px; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .p-card { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; } .p-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .p-card__media { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(120% 90% at 50% 20%, #fff 0%, var(--cream) 100%); display: grid; place-items: center; padding: 22px; } .p-card__media img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(23,32,51,.16)); } .p-card__cat { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.92); color: var(--blue); font-weight: 800; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); } .wa-icon-btn { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--whatsapp); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-md); transition: transform .15s; } .wa-icon-btn:hover { transform: scale(1.08); } .wa-icon-btn svg { width: 21px; height: 21px; } .p-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .p-card__name { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; } .p-card__desc { color: var(--muted); font-size: .92rem; flex: 1; } .packs { display: flex; flex-wrap: wrap; gap: 6px; } .pack-chip { font-size: .74rem; font-weight: 700; color: var(--ink); background: var(--cream); border: 1px solid var(--border); padding: 4px 10px; border-radius: var(--r-pill); } .p-card__actions { display: flex; gap: 8px; margin-top: 4px; } .p-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } /* Tag pills */ .tags { display: flex; flex-wrap: wrap; gap: 6px; } .tag { font-size: .72rem; font-weight: 700; color: var(--blue); background: var(--blue-soft); padding: 4px 10px; border-radius: var(--r-pill); } /* ---------------- Footer ---------------- */ .site-footer { background: var(--ink); color: #cdd5e0; margin-top: 40px; } .site-footer a { color: #cdd5e0; } .site-footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding-block: 56px 40px; } .footer-grid h4 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 16px; font-weight: 800; } .footer-grid li { margin-bottom: 10px; font-size: .92rem; } .footer-brand img { height: 42px; margin-bottom: 14px; filter: brightness(0) invert(1); } .footer-brand p { font-size: .9rem; color: #97a2b4; max-width: 30ch; } .social-row { display: flex; gap: 10px; margin-top: 6px; } .social-row a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; transition: background .15s; } .social-row a:hover { background: var(--blue); } .social-row svg { width: 19px; height: 19px; } .footer-legal { border-top: 1px solid rgba(255,255,255,.1); padding-block: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: #8b97a9; } /* ---------------- Fulfillment notice ---------------- */ .fulfil-note { display: flex; gap: 12px; align-items: flex-start; background: var(--blue-soft); border: 1px solid #cfe2f6; color: var(--blue-dark); border-radius: var(--r-md); padding: 14px 18px; font-size: .9rem; font-weight: 600; } .fulfil-note svg { width: 22px; height: 22px; flex: none; color: var(--blue); margin-top: 1px; } /* ---------------- Utility ---------------- */ .center { text-align: center; margin-inline: auto; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .divider { height: 1px; background: var(--border); border: 0; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .grid--3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .nav { display: none; } .menu-btn { display: inline-flex; } .site-header__row { height: 64px; } } @media (max-width: 560px) { .grid--3, .grid--auto { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .brand__tag { display: none; } }