/* ========================================================================== Lollygood — design tokens Digabung dari Lollygood v2 Design System (tokens/fonts, colors, typography, spacing, shape, motion, base). Urutan import dipertahankan seperti aslinya. ========================================================================== */ /* ── Fonts ──────────────────────────────────────────────────────────────── Display: Baloo 2 (700, 800) · Text/UI: Plus Jakarta Sans (400-800) Fallback: Poppins (400-700) — sesuai guideline §4.1. Font di-load lewat Google Fonts (lihat di index.html), bukan woff2 lokal seperti di design system. Family-nya identik, hanya saja versi Google memuat karakter penuh (bukan subset latin). Kalau nanti mau self-host, taruh woff2 di assets/fonts/ dan kembalikan blok @font-face di sini. */ /* ── Colors ─────────────────────────────────────────────────────────────── */ :root{ /* Foundation (±60% dari tiap aset) */ --lg-vanilla:#FFF6EF; --lg-white:#FFFFFF; /* Leader: pink family (±25%) */ --lg-lolly-pink:#E63E86; --lg-deep-lolly:#A82255; --lg-blush:#F8AECD; --lg-sugar-pink:#FDE7F1; /* Text (±10%) */ --lg-cocoa-ink:#2B1B22; /* Candy accents (±5% total, maksimal SATU accent per aset) */ --lg-mint-candy:#2FB57F; --lg-mint-tint:#E1F6EC; --lg-mint-ink:#1D7A54; --lg-soda-blue:#3FA4DE; --lg-soda-tint:#E4F2FB; --lg-soda-ink:#1F6E9E; --lg-lemon-drop:#FFC93C; --lg-lemon-tint:#FFF3D6; --lg-lemon-ink:#8A6100; /* Ink alphas — satu-satunya cara sah melembutkan teks */ --lg-ink-80:rgba(43,27,34,.80); --lg-ink-70:rgba(43,27,34,.70); --lg-ink-60:rgba(43,27,34,.60); --lg-ink-40:rgba(43,27,34,.40); --lg-ink-14:rgba(43,27,34,.14); --lg-ink-08:rgba(43,27,34,.08); --lg-ink-06:rgba(43,27,34,.06); /* Semantic aliases */ --lg-bg-page:var(--lg-vanilla); --lg-bg-section:var(--lg-white); --lg-bg-tint:var(--lg-sugar-pink); --lg-surface-card:var(--lg-white); --lg-surface-soft:var(--lg-sugar-pink); --lg-surface-candy:var(--lg-blush); --lg-surface-inverse:var(--lg-cocoa-ink); --lg-text-body:var(--lg-cocoa-ink); --lg-text-heading:var(--lg-cocoa-ink); --lg-text-muted:var(--lg-ink-70); --lg-text-caption:var(--lg-ink-60); --lg-text-on-pink:var(--lg-white); --lg-text-pink-small:var(--lg-deep-lolly); --lg-text-on-inverse:var(--lg-vanilla); --lg-action-primary:var(--lg-lolly-pink); --lg-action-primary-hover:var(--lg-deep-lolly); --lg-action-primary-text:var(--lg-white); --lg-action-secondary-border:var(--lg-lolly-pink); --lg-action-secondary-text:var(--lg-deep-lolly); --lg-focus-ring:var(--lg-deep-lolly); --lg-border-hairline:var(--lg-ink-08); --lg-border-strong:var(--lg-ink-14); --lg-divider-dashed:var(--lg-ink-14); /* accent meanings: growth · logistics · price highlight */ --lg-accent-growth:var(--lg-mint-candy); --lg-accent-growth-bg:var(--lg-mint-tint); --lg-accent-growth-ink:var(--lg-mint-ink); --lg-accent-logistics:var(--lg-soda-blue); --lg-accent-logistics-bg:var(--lg-soda-tint); --lg-accent-logistics-ink:var(--lg-soda-ink); --lg-accent-price:var(--lg-lemon-drop); --lg-accent-price-bg:var(--lg-lemon-tint); --lg-accent-price-ink:var(--lg-lemon-ink); /* candy-soft stage: gradien tetap di keluarga pink/vanilla */ --lg-candy-soft:radial-gradient(120% 100% at 82% 8%, var(--lg-sugar-pink) 0%, var(--lg-vanilla) 62%); --lg-candy-soft-strong:radial-gradient(110% 95% at 88% 0%, var(--lg-blush) 0%, var(--lg-sugar-pink) 46%, var(--lg-vanilla) 82%); --lg-pink-block:linear-gradient(168deg, var(--lg-lolly-pink) 0%, var(--lg-deep-lolly) 100%); } /* ── Typography ─────────────────────────────────────────────────────────── */ :root{ --lg-font-display:'Baloo 2', Poppins, system-ui, sans-serif; --lg-font-text:'Plus Jakarta Sans', Poppins, system-ui, sans-serif; --lg-font-fallback:Poppins, system-ui, sans-serif; --lg-weight-regular:400; --lg-weight-medium:500; --lg-weight-semibold:600; --lg-weight-bold:700; --lg-weight-black:800; /* Web scale — nilai persis dari guideline 4.2 */ --lg-display-size:56px; --lg-display-lh:1.05; --lg-display-weight:800; --lg-h1-size:40px; --lg-h1-lh:1.1; --lg-h1-weight:700; --lg-h2-size:32px; --lg-h2-lh:1.15; --lg-h2-weight:700; --lg-h3-size:24px; --lg-h3-lh:1.25; --lg-h3-weight:700; --lg-body-lg-size:18px; --lg-body-lg-lh:1.55; --lg-body-size:16px; --lg-body-lh:1.6; --lg-small-size:14px; --lg-small-lh:1.5; --lg-label-size:12px; --lg-label-lh:1.4; --lg-label-tracking:.08em; /* Instagram 1080 scale — guideline 4.2 */ --lg-ig-hook-min:96px; --lg-ig-hook-max:120px; --lg-ig-subhead:48px; --lg-ig-body:38px; --lg-ig-bignumber-min:140px; --lg-ig-bignumber-max:220px; --lg-ig-footer:28px; --lg-measure-body:70ch; } /* ── Spacing ────────────────────────────────────────────────────────────── */ :root{ --lg-space-1:4px; --lg-space-2:8px; --lg-space-3:12px; --lg-space-4:16px; --lg-space-5:20px; --lg-space-6:24px; --lg-space-8:32px; --lg-space-10:40px; --lg-space-12:52px; --lg-space-14:64px; --lg-space-18:88px; --lg-container:1140px; --lg-container-pad:32px; --lg-section-y:88px; --lg-ig-canvas:1080px; --lg-ig-margin:80px; } /* ── Shape ──────────────────────────────────────────────────────────────── */ :root{ --lg-radius-sm:8px; --lg-radius-md:14px; --lg-radius-card:20px; /* guideline: cards 20-24px */ --lg-radius-card-lg:24px; --lg-radius-hero:32px; --lg-radius-pill:999px; /* Shadow lembut & rendah — tidak pernah outline berat atau drop shadow keras */ --lg-shadow-card:0 4px 16px rgba(43,27,34,.06); --lg-shadow-card-hover:0 8px 24px rgba(43,27,34,.10); --lg-shadow-pill:0 4px 16px rgba(43,27,34,.08); --lg-shadow-pink:0 6px 20px rgba(230,62,134,.22); --lg-shadow-none:none; --lg-border-width:1px; --lg-border-width-strong:2px; } /* ── Motion ─────────────────────────────────────────────────────────────── */ :root{ /* Motion di luar scope brand v1.0 — ini default yang ditahan: pendek, eased, tanpa bounce, tanpa spring, tanpa parallax. */ --lg-duration-fast:120ms; --lg-duration:200ms; --lg-duration-slow:320ms; --lg-ease:cubic-bezier(.2,.6,.3,1); --lg-ease-out:cubic-bezier(.16,.84,.44,1); --lg-press-scale:.985; } /* ── Base ───────────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} body{margin:0;font-family:var(--lg-font-text);background:var(--lg-bg-page);color:var(--lg-text-body);font-size:var(--lg-body-size);line-height:var(--lg-body-lh);-webkit-font-smoothing:antialiased} h1,h2,.lg-display{font-family:var(--lg-font-display)} a{color:var(--lg-deep-lolly);text-decoration:none} a:hover{color:var(--lg-lolly-pink);text-decoration:underline} :focus-visible{outline:2px solid var(--lg-focus-ring);outline-offset:2px}