/* ========================================================================= YukKuliah — Custom styles layered on top of Tailwind CDN ========================================================================= */ :root { --brand: #2563eb; --accent: #f59e0b; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; /* Offset smooth-scroll anchors below the sticky 64px navbar */ scroll-padding-top: 5rem; /* Prevent iOS rotating text resize */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; } /* Guard against any accidental horizontal scroll on small screens. Use `clip` (not `hidden`) so we don't turn into a scroll container — `overflow-x: hidden` silently breaks `position: sticky` on the header. `clip` blocks horizontal scroll without that side effect. */ html, body { overflow-x: clip; max-width: 100%; } /* Softer, on-brand tap highlight instead of the default grey box */ * { -webkit-tap-highlight-color: rgba(37, 99, 235, 0.12); } /* Momentum scrolling for horizontal filter chips / tab bars on touch */ .overflow-x-auto { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } /* Subtle entrance animation utility */ @keyframes yk-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .yk-fade-up { animation: yk-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } .yk-delay-1 { animation-delay: 0.08s; } .yk-delay-2 { animation-delay: 0.16s; } .yk-delay-3 { animation-delay: 0.24s; } .yk-delay-4 { animation-delay: 0.32s; } /* Card lift on hover */ .yk-card { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease; } .yk-card:hover { transform: translateY(-4px); } /* Hero gradient mesh background */ .yk-hero-bg { background: radial-gradient(60% 60% at 15% 10%, rgba(37, 99, 235, 0.10) 0%, transparent 60%), radial-gradient(50% 50% at 90% 20%, rgba(245, 158, 11, 0.10) 0%, transparent 55%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); } /* Decorative dotted grid */ .yk-dots { background-image: radial-gradient(rgba(37, 99, 235, 0.12) 1px, transparent 1px); background-size: 22px 22px; } /* Custom scrollbar (desktop) */ @media (min-width: 768px) { ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } } /* Line clamp helper (fallback if plugin unavailable) */ .yk-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .yk-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Tab underline transition */ .yk-tab { position: relative; transition: color 0.2s ease; } .yk-tab[data-active="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 9999px; background: var(--brand); } /* ========================================================================= MOBILE & TOUCH REFINEMENTS ========================================================================= */ /* Safe-area padding for notched phones (sticky navbar & footer) */ @supports (padding: max(0px)) { header { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); } footer { padding-bottom: env(safe-area-inset-bottom); } } /* On phones, force form controls to 16px so iOS Safari does NOT auto-zoom when a field gains focus. Keeps the compact look on larger screens. */ @media (max-width: 640px) { input, select, textarea { font-size: 16px !important; } /* Give the hero headline a touch more breathing room on narrow screens */ h1 { overflow-wrap: break-word; word-break: break-word; } } /* Tactile press feedback on touch devices (no hover) */ @media (hover: none) { a[class*="rounded"]:active, button:active { transform: scale(0.97); } } /* Comfortable minimum tap target (Apple/Google guideline ~44px) for the small icon-only and pagination controls. */ @media (max-width: 640px) { #pagination button { min-width: 2.75rem; height: 2.75rem; } .filter-chip { scroll-snap-align: start; } } /* ========================================================================= MODERN MOBILE-APP REDESIGN — soft, rounded "oval / pill" aesthetic ========================================================================= */ /* 1. Global radius softening (cosmetic only — beats Tailwind via !important) */ .rounded-lg { border-radius: 0.9rem !important; } .rounded-xl { border-radius: 1.3rem !important; } .rounded-2xl { border-radius: 1.75rem !important; } .rounded-3xl { border-radius: 2.25rem !important; } /* 2. Interactive elements become full pills/ovals. [class~="rounded-xl"] matches only elements that literally have the `rounded-xl` token, so buttons / links / inputs / selects turn into pills while content cards (rounded-2xl/3xl) keep their card shape. */ a[class~="rounded-xl"], button[class~="rounded-xl"], input[class~="rounded-xl"], select[class~="rounded-xl"] { border-radius: 9999px !important; } /* Give pill inputs/selects a touch more horizontal breathing room */ input[class~="rounded-xl"], select[class~="rounded-xl"] { padding-right: 1.25rem; } /* 3. Softer, colored depth on primary buttons & cards for that app feel */ a[class~="rounded-xl"][class*="bg-brand-600"], button[class~="rounded-xl"][class*="bg-brand-600"] { box-shadow: 0 12px 26px -10px rgba(37, 99, 235, 0.55) !important; } .yk-card:hover { box-shadow: 0 22px 44px -16px rgba(37, 99, 235, 0.22) !important; } /* ========================================================================= FLOATING BOTTOM NAVIGATION BAR (mobile only) — the signature app element ========================================================================= */ .yk-bottomnav { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 0.2rem; width: calc(100% - 1.5rem); max-width: 25rem; padding: 0.4rem; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(226, 232, 240, 0.9); border-radius: 9999px; box-shadow: 0 16px 38px -12px rgba(15, 23, 42, 0.28); } .yk-bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0.5rem 0.1rem; border-radius: 9999px; color: #64748b; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.005em; transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease; } .yk-bn-item i, .yk-bn-item svg { width: 1.35rem; height: 1.35rem; } .yk-bn-item.active { color: #2563eb; background: #eff6ff; } .yk-bn-item:active { transform: scale(0.92); } /* Reserve space so the floating bar never covers footer/content on phones */ @media (max-width: 767px) { body { padding-bottom: 5.75rem; } } @media (min-width: 768px) { .yk-bottomnav { display: none; } } /* ========================================================================= DESIGN SYSTEM v2 — vivid, premium, friendly (aurora · glass · gradients) ========================================================================= */ /* ---- Gradient text ---- */ .text-gradient-brand { background-image: linear-gradient(110deg, #1d4ed8 0%, #2563eb 32%, #0ea5e9 66%, #f59e0b 128%); -webkit-background-clip: text; background-clip: text; color: transparent; } .text-gradient-amber { background-image: linear-gradient(110deg, #f59e0b, #f97316); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- Aurora mesh backgrounds ---- */ .bg-aurora { background: radial-gradient(42% 52% at 8% -5%, rgba(37, 99, 235, 0.20), transparent 70%), radial-gradient(38% 46% at 95% 0%, rgba(245, 158, 11, 0.18), transparent 70%), radial-gradient(46% 58% at 50% 118%, rgba(139, 92, 246, 0.16), transparent 70%), linear-gradient(180deg, #ffffff, #f5f8ff 55%, #ffffff); } .bg-aurora-dark { background: radial-gradient(42% 60% at 8% -5%, rgba(59, 130, 246, 0.40), transparent 70%), radial-gradient(42% 60% at 95% 8%, rgba(139, 92, 246, 0.34), transparent 70%), radial-gradient(54% 64% at 50% 122%, rgba(245, 158, 11, 0.24), transparent 70%), #0b1120; } /* ---- Glassmorphism ---- */ .glass { background: rgba(255, 255, 255, 0.62); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.8); } .glass-soft { background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(226, 232, 240, 0.7); } .glass-dark { background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.14); } /* ---- Colored glows ---- */ .glow-brand { box-shadow: 0 26px 64px -20px rgba(37, 99, 235, 0.62); } .glow-amber { box-shadow: 0 26px 64px -20px rgba(245, 158, 11, 0.5); } .glow-soft { box-shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.45); } /* ---- Gradient ring border (reveals on hover) ---- */ .ring-grad { position: relative; } .ring-grad::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(37, 99, 235, 0.65), rgba(245, 158, 11, 0.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .ring-grad:hover::after { opacity: 1; } /* ---- Always-on gradient ring (for featured tiles) ---- */ .ring-grad-on::after { opacity: 1; } /* ---- Floating + spin animations for decorative elements ---- */ @keyframes yk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .animate-float { animation: yk-float 6s ease-in-out infinite; } .animate-float-slow { animation: yk-float 9s ease-in-out infinite; } .animate-float-delay { animation: yk-float 7s ease-in-out infinite; animation-delay: -3.2s; } @keyframes yk-spin { to { transform: rotate(360deg); } } .animate-spin-slow { animation: yk-spin 24s linear infinite; } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { .animate-float, .animate-float-slow, .animate-float-delay, .animate-spin-slow { animation: none !important; } } /* ---- Marquee-free decorative blob ---- */ .blob { filter: blur(40px); border-radius: 9999px; }