/* ============================================================ MERIK SOKONI — MODERN LAYER Loaded after main.css. Additive: extends the existing tokens (Kenyan green + orange, Playfair/DM Sans) rather than replacing them. Mobile-first, dark-theme aware, motion-safe. ============================================================ */ /* ── 1. FOUNDATIONS ─────────────────────────────────────────── */ :root { /* Layered shadows — one big blur reads flat; stacked reads real */ --sh-xs: 0 1px 2px rgba(15,28,46,.05); --sh-sm: 0 1px 3px rgba(15,28,46,.06), 0 1px 2px rgba(15,28,46,.04); --sh-md: 0 4px 6px -1px rgba(15,28,46,.07), 0 2px 4px -2px rgba(15,28,46,.05); --sh-lg: 0 12px 20px -6px rgba(15,28,46,.10), 0 4px 8px -4px rgba(15,28,46,.06); --sh-xl: 0 24px 48px -12px rgba(15,28,46,.18); --sh-brand: 0 8px 24px -6px rgba(27,107,58,.35); --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px; /* Space scale (4px base) */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ring: 0 0 0 3px rgba(27,107,58,.18); } [data-theme="dark"] { --sh-sm: 0 1px 3px rgba(0,0,0,.5); --sh-md: 0 4px 10px rgba(0,0,0,.55); --sh-lg: 0 14px 28px rgba(0,0,0,.6); --sh-xl: 0 28px 56px rgba(0,0,0,.7); --ring: 0 0 0 3px rgba(76,175,110,.28); } /* ── 2. MOBILE FUNDAMENTALS (was entirely missing) ──────────── */ /* A single over-wide element used to pan the whole page sideways. */ html, body { /* `overflow-x: hidden` makes the element a SCROLL CONTAINER. Any position:sticky descendant then sticks relative to that container instead of the viewport — and because is what actually scrolls here, the admin sidebar never stuck at all: it scrolled away with the content (measured: top 64px -> -148px). `overflow-x: clip` clips exactly the same way but does NOT create a scroll container, so sticky keeps working. `hidden` stays first as the fallback for engines without clip. */ overflow-x: hidden; overflow-x: clip; max-width: 100%; } img, video, iframe, canvas, table, pre { max-width: 100%; } img, video { height: auto; } /* Long provider names / URLs must never force a horizontal scroll */ .sk-card, .sk-provider-card, .sk-pcard { overflow-wrap: anywhere; } /* Comfortable, thumb-sized targets */ @media (max-width: 640px) { .sk-btn { min-height: 44px; } .sk-btn--sm { min-height: 38px; } .sk-input, .sk-textarea, select { min-height: 44px; font-size: 16px; } /* 16px stops iOS zoom-on-focus */ .sk-container { padding-left: var(--s4); padding-right: var(--s4); } } /* Respect the notch / home indicator */ body { padding-bottom: env(safe-area-inset-bottom, 0); } /* ── 3. TYPOGRAPHY ──────────────────────────────────────────── */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, .sk-hero h1 { letter-spacing: -.02em; text-wrap: balance; } p { text-wrap: pretty; } /* Fluid headings — no fixed jumps between breakpoints */ .sk-hero h1 { font-size: clamp(1.75rem, 5.5vw, 3.25rem); line-height: 1.08; } .sk-section-head h2 { font-size: clamp(1.35rem, 3.4vw, 2rem); line-height: 1.2; } /* ── 4. CARDS ───────────────────────────────────────────────── */ .sk-card, .sk-provider-card, .sk-pcard { border-radius: var(--r-md); box-shadow: var(--sh-sm); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); transition: transform .28s var(--ease-out), box-shadow .28s var(--ease), border-color .2s var(--ease); } .sk-card:hover, .sk-provider-card:hover, .sk-pcard:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); } /* Media inside cards shouldn't poke out of the rounded corner */ .sk-provider-card img, .sk-pcard img, .sk-card > img { border-radius: inherit; } /* ── 5. BUTTONS ─────────────────────────────────────────────── */ .sk-btn { border-radius: var(--r-pill); font-weight: 600; letter-spacing: -.01em; transition: transform .16s var(--ease), box-shadow .22s var(--ease), background .2s var(--ease), filter .2s var(--ease); will-change: transform; } .sk-btn:active { transform: translateY(1px) scale(.985); } .sk-btn--primary { background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 82%, #2E9E5B) 100%); box-shadow: var(--sh-brand); border: 0; } .sk-btn--primary:hover { filter: brightness(1.06); box-shadow: 0 12px 28px -6px rgba(27,107,58,.45); transform: translateY(-1px); } .sk-btn--accent { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); box-shadow: 0 8px 24px -6px rgba(244,132,31,.38); border: 0; } .sk-btn--accent:hover { filter: brightness(1.06); transform: translateY(-1px); } .sk-btn--outline:hover, .sk-btn--ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } /* ── 6. FORMS ───────────────────────────────────────────────── */ .sk-input, .sk-textarea, select { border-radius: var(--r-sm); transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } .sk-input:focus, .sk-textarea:focus, select:focus { border-color: var(--primary); box-shadow: var(--ring); outline: none; } /* Visible keyboard focus everywhere (accessibility + looks intentional) */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs); } /* ── 7. BADGES / CHIPS ──────────────────────────────────────── */ .sk-badge, .sk-tier-badge { border-radius: var(--r-pill); font-weight: 600; letter-spacing: .01em; } .sk-cat-item { border-radius: var(--r-md); transition: transform .24s var(--ease-out), box-shadow .24s var(--ease), background .2s var(--ease); } .sk-cat-item:hover { transform: translateY(-2px); box-shadow: var(--sh-md); } /* Live "open now" dot — a real pulse reads as live data */ .sk-dot--green { position: relative; } .sk-dot--green::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 currentColor; animation: sk-pulse 2.2s var(--ease-out) infinite; } @keyframes sk-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* ── 8. NAV — glass, only once scrolled ─────────────────────── */ .sk-nav { backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); background: color-mix(in srgb, var(--surface) 82%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); transition: box-shadow .25s var(--ease), background .25s var(--ease); } .sk-nav.is-stuck { box-shadow: var(--sh-md); background: color-mix(in srgb, var(--surface) 94%, transparent); } /* ── 9. HERO ────────────────────────────────────────────────── */ .sk-hero { position: relative; isolation: isolate; } .sk-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 15% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 70%), radial-gradient(50% 45% at 95% 10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%); pointer-events: none; } /* ── 10. IMAGES — stop layout shift, fade in ────────────────── */ .sk-provider-card img, .sk-pcard img, .sk-cat-item img { background: color-mix(in srgb, var(--border) 45%, transparent); object-fit: cover; } img[loading="lazy"] { animation: sk-fade .45s var(--ease) both; } @keyframes sk-fade { from { opacity: 0 } to { opacity: 1 } } /* ── 11. SKELETON (for MK.skeleton-style loading states) ────── */ .sk-skel { background: linear-gradient(90deg, color-mix(in srgb, var(--border) 45%, transparent) 25%, color-mix(in srgb, var(--border) 22%, transparent) 37%, color-mix(in srgb, var(--border) 45%, transparent) 63%); background-size: 400% 100%; animation: sk-shimmer 1.3s ease infinite; border-radius: var(--r-xs); } @keyframes sk-shimmer { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } } /* ── 12. SCROLLBAR + SELECTION ──────────────────────────────── */ ::selection { background: color-mix(in srgb, var(--primary) 22%, transparent); } @media (min-width: 641px) { * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 38%, transparent); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 60%, transparent); background-clip: content-box; } } /* ── 13. HORIZONTAL SCROLLERS — hide the bar, fade the edge ── */ .sk-cat-grid, .sk-chips-row { scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .sk-cat-grid::-webkit-scrollbar, .sk-chips-row::-webkit-scrollbar { display: none; } .sk-cat-grid > * , .sk-chips-row > * { scroll-snap-align: start; } /* ── 14. MOTION SAFETY ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }