Spaces:
Running
Running
| /* ========================================== | |
| # File: styles.css | |
| # Tailwind utility layer + small components | |
| # ========================================== */ | |
| .nav-link { @apply text-sm font-medium text-slate-700 hover:text-primary dark:text-slate-200 dark:hover:text-primary; } | |
| .mobile-link { @apply px-3 py-2 rounded text-slate-700 dark:text-slate-200 hover:bg-slate-200/60 dark:hover:bg-slate-700/40; } | |
| .btn-primary { @apply inline-flex items-center justify-center rounded-lg bg-primary px-5 py-2.5 font-bold text-white shadow hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary; } | |
| .btn-secondary { @apply inline-flex items-center justify-center rounded-lg bg-white/15 px-5 py-2.5 font-bold text-white ring-1 ring-white/30 hover:bg-white/25 focus-visible:ring-2 focus-visible:ring-white; } | |
| .pill { @apply rounded-lg bg-primary/10 dark:bg-primary/20 px-4 py-3 font-semibold text-primary dark:text-white; } | |
| .h2 { @apply text-3xl sm:text-4xl font-bold tracking-tight; } | |
| .h3 { @apply text-2xl font-bold; } | |
| .h4 { @apply text-xl font-bold; } | |
| .input { @apply w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-900 placeholder:text-slate-500 focus:border-primary focus:ring-primary dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100; } | |
| .label { @apply block text-sm font-medium; } | |
| .link { @apply text-primary hover:underline; } | |
| .link.muted { @apply text-slate-500 hover:text-primary dark:text-slate-400; } | |
| .section { @apply py-16 sm:py-24; } | |
| .container { @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8; } | |
| .card { @apply flex flex-col gap-2 overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-6 shadow-soft; } | |
| .list { @apply list-disc pl-5 text-sm; } | |
| .muted { @apply opacity-80; } | |
| .filter-chip { @apply rounded-full px-4 py-2 text-sm font-semibold border border-slate-300 dark:border-slate-600 hover:bg-slate-100 dark:hover:bg-slate-800; } | |
| .filter-chip.active { @apply bg-primary text-white border-primary; } | |
| .portfolio-card { @apply text-left overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 hover:shadow-lg transition; } | |
| .portfolio-card img { @apply w-full aspect-[4/3] object-cover; } | |
| .th { @apply p-4 text-left font-bold; } | |
| .td { @apply p-3 align-top; } | |
| .quote { @apply rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-6 shadow-soft; } | |
| .about-card { @apply p-4 rounded-lg border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-900/60; } | |
| .nav-link.active { @apply text-primary font-bold; } | |
| /* Slider */ | |
| .slider { position: relative; } | |
| .slide { display: none; } | |
| .slide.is-active { display: block; } | |
| .slider-btn { | |
| position: absolute; top: 50%; transform: translateY(-50%); | |
| background: rgba(0,0,0,.45); color: #fff; border-radius: 9999px; | |
| padding: .4rem .7rem; font-size: 1.5rem; line-height: 1; z-index: 10; | |
| } | |
| .slider-btn.prev { left: .5rem; } | |
| .slider-btn.next { right: .5rem; } | |
| .demo-pill { | |
| position: absolute; bottom: .75rem; right: .75rem; z-index: 10; | |
| background: rgba(17,147,212,.9); color: #fff; padding: .45rem .7rem; border-radius: .5rem; font-weight: 700; | |
| } | |