/* LeMakros — shared "warung warmth" theme Palette pulled from the app icon. Link this in after Tailwind. Class prefix `lm-` avoids collisions with Tailwind utilities. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;700;800&display=swap'); body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } h1, h2, h3, .lm-font-outfit { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } :root { --kuning: #DE9C34; /* turmeric / theme color */ --kuning-deep: #c1842a; --leaf: #87a06f; /* banana-leaf / Agak-agak */ --leaf-deep: #6f8a59; --sambal: #d97706; /* amber / Precision */ --sambal-deep: #b45309; --cream: #fdfaf2; /* warm off-white surface */ --ink: #2a2620; /* warm charcoal text */ --muted: #7b7367; /* warm grey text */ /* Default theme color settings (maps to saffron/Precision by default) */ --theme-primary: var(--sambal); --theme-primary-deep: var(--sambal-deep); --theme-primary-light: #fffbeb; } /* Agak-Agak mode overrides dynamic theme color variables to banana-leaf sage */ body.agak-agak-mode { --theme-primary: var(--leaf); --theme-primary-deep: var(--leaf-deep); --theme-primary-light: #faf8f3; } body.precision-mode { --theme-primary: var(--sambal); --theme-primary-deep: var(--sambal-deep); --theme-primary-light: #fffbeb; } /* Custom replacements for generic blue Tailwind classes */ .lm-bg-primary { background-color: var(--theme-primary) !important; } .lm-bg-primary-deep { background-color: var(--theme-primary-deep) !important; } .lm-text-primary { color: var(--theme-primary) !important; } .lm-text-primary-deep { color: var(--theme-primary-deep) !important; } .lm-border-primary { border-color: var(--theme-primary) !important; } .lm-active-bg-primary:active { background-color: var(--theme-primary-deep) !important; } .lm-focus-ring:focus { box-shadow: 0 0 0 2px var(--theme-primary) !important; outline: none; } /* Global overrides for default Tailwind blue utilities to unify under brand palette */ .font-sans, body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } .bg-blue-500 { background-color: var(--theme-primary) !important; } .active\:bg-blue-600:active { background-color: var(--theme-primary-deep) !important; } .text-blue-500, .text-blue-600 { color: var(--theme-primary) !important; } .active\:text-blue-500:active, .active\:text-blue-700:active { color: var(--theme-primary-deep) !important; } .bg-blue-50 { background-color: var(--theme-primary-light) !important; } .border-blue-100 { border-color: var(--theme-primary) !important; } .focus\:ring-blue-400:focus { box-shadow: 0 0 0 2px var(--theme-primary) !important; } .text-blue-300 { color: var(--theme-primary) !important; } .active\:text-blue-100:active { color: var(--theme-primary-light) !important; } /* Glassmorphism backdrop blur for premium modal layering */ .absolute.inset-0.bg-black\/40, .absolute.inset-0.bg-black\/50, .fixed.inset-0.bg-black\/50, .absolute.inset-0.bg-black\/30 { backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; transition: backdrop-filter 0.3s ease; } /* Faint kawung (batik) lattice — texture, not noise. Put on an absolutely positioned overlay div at low opacity (e.g. opacity:.05). */ .lm-batik { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23DE9C34' stroke-width='1.2'%3E%3Ccircle cx='0' cy='22' r='13'/%3E%3Ccircle cx='44' cy='22' r='13'/%3E%3Ccircle cx='22' cy='0' r='13'/%3E%3Ccircle cx='22' cy='44' r='13'/%3E%3Ccircle cx='22' cy='22' r='13'/%3E%3C/g%3E%3C/svg%3E"); background-size: 44px 44px; } /* Warm backgrounds */ .lm-cream { background: var(--cream); } .lm-hero-warm { background: radial-gradient(120% 90% at 50% 0%, #fbe6c4 0%, #fdf3dd 38%, var(--cream) 78%); } .lm-band-kuning { background: linear-gradient(180deg, #fcefd2 0%, #fbe8bf 100%); } /* Text colors */ .lm-ink { color: var(--ink); } .lm-muted { color: var(--muted); } /* Warm primary button (replaces generic blue CTAs on public pages) */ .lm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--sambal); color: #fff; font-weight: 600; border-radius: 1rem; padding: .85rem 1.5rem; font-size: .95rem; box-shadow: 0 8px 22px -10px rgba(193,132,42,.6); } .lm-btn:active { transform: translateY(1px); } /* White Google sign-in button on warm grounds */ .lm-cta-google { display: inline-flex; align-items: center; gap: .75rem; background: #fff; border: 1px solid #eadfca; border-radius: 1rem; padding: .9rem 1.6rem; font-size: .95rem; font-weight: 600; color: #3b352b; box-shadow: 0 6px 20px -8px rgba(193,132,42,.45); } .lm-cta-google:active { transform: translateY(1px); } /* ── Shared components (used across landing / about / tips) ───────────── */ /* Uppercase section label */ .lm-eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--kuning-deep); } /* White content card on warm grounds */ .lm-card { background:#fff; border:1px solid #efe7d6; border-radius:1.25rem; box-shadow:0 8px 24px -16px rgba(80,60,20,.35); } /* Rounded icon chip (3rem coloured square) */ .lm-icon-chip { width:3rem; height:3rem; border-radius:.9rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; } /* Inline / footer link */ .lm-link { color:var(--kuning-deep); font-weight:600; } .lm-link:active { opacity:.7; } /* Pill toggle (tabs, mode switch) */ .lm-pill { padding:.45rem 1.1rem; border-radius:9999px; font-size:.8rem; font-weight:600; transition:all .15s; color:var(--muted); background:transparent; } .lm-pill-active { background:var(--ink); color:#fff; } /* FAQ accordion (native
) */ .lm-faq { background:#fff; border:1px solid #efe7d6; border-radius:1rem; box-shadow:0 6px 18px -14px rgba(80,60,20,.3); } .lm-faq > summary { list-style:none; cursor:pointer; } .lm-faq > summary::-webkit-details-marker { display:none; } .lm-faq[open] > summary .lm-chev { transform:rotate(180deg); } .lm-chev { transition:transform .2s; } /* Soft tinted callout box (replaces the off-brand blue boxes) */ .lm-callout { background:linear-gradient(180deg,#fdf3dd 0%,#fbe8bf 100%); border:1px solid #f0dca8; border-radius:1.25rem; } /* Code/keycap chip */ .lm-kbd { background:#f3ece0; border:1px solid #e6dcc8; border-radius:.4rem; padding:.05rem .4rem; font-size:.75rem; color:var(--ink); } /* Steam-curl drift animation (use on decorative SVG paths with class lm-steam) */ .lm-steam { animation: lm-drift 4s ease-in-out infinite; transform-origin: bottom center; } .lm-steam.s2 { animation-delay: .8s; } .lm-steam.s3 { animation-delay: 1.6s; } @keyframes lm-drift { 0%,100% { opacity: .55; transform: translateY(0) scaleY(1); } 50% { opacity: .9; transform: translateY(-3px) scaleY(1.04); } } /* Allow modal sheet to expand scroll height when search suggestions are active */ #addModalSheet.has-suggestions { padding-bottom: 320px !important; }