108 lines
3.4 KiB
CSS
108 lines
3.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ── CSS custom properties ─────────────────────────────────────────────────── */
|
|
:root {
|
|
--color-brand: #2b5916;
|
|
--color-brand-dark: #1e3f10;
|
|
--color-gold: #c4952a;
|
|
--color-gold-light: #f4da99;
|
|
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
|
--safe-top: env(safe-area-inset-top, 0px);
|
|
}
|
|
|
|
/* ── Base ───────────────────────────────────────────────────────────────────── */
|
|
@layer base {
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
scroll-behavior: smooth;
|
|
/* Prevents iOS rubber-band on the outer scroll */
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
body {
|
|
@apply bg-gray-50 text-gray-900 antialiased;
|
|
font-feature-settings: "kern" 1, "liga" 1;
|
|
}
|
|
|
|
/* Make all tap highlights match brand */
|
|
* {
|
|
-webkit-tap-highlight-color: rgb(43 89 22 / 0.12);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
@apply font-bold tracking-tight;
|
|
}
|
|
}
|
|
|
|
/* ── Component layer ────────────────────────────────────────────────────────── */
|
|
@layer components {
|
|
/* Primary button */
|
|
.btn-primary {
|
|
@apply inline-flex items-center justify-center gap-2
|
|
rounded-xl px-5 py-3
|
|
bg-brand-700 text-white font-semibold text-sm
|
|
shadow-bid-btn
|
|
hover:bg-brand-800
|
|
active:scale-[0.97]
|
|
transition-all duration-150
|
|
disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none;
|
|
}
|
|
|
|
/* Ghost / secondary button */
|
|
.btn-ghost {
|
|
@apply inline-flex items-center justify-center gap-2
|
|
rounded-xl px-5 py-3
|
|
border border-brand-200 bg-white text-brand-700 font-semibold text-sm
|
|
hover:bg-brand-50
|
|
active:scale-[0.97]
|
|
transition-all duration-150
|
|
disabled:opacity-40 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
/* Gold accent button */
|
|
.btn-gold {
|
|
@apply inline-flex items-center justify-center gap-2
|
|
rounded-xl px-5 py-3
|
|
bg-gold-500 text-white font-semibold text-sm
|
|
hover:bg-gold-600
|
|
active:scale-[0.97]
|
|
transition-all duration-150
|
|
disabled:opacity-40 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
/* Card surface */
|
|
.card {
|
|
@apply bg-white rounded-2xl shadow-card border border-gray-100;
|
|
}
|
|
|
|
/* Form input */
|
|
.field {
|
|
@apply w-full rounded-xl border border-gray-200 bg-white
|
|
px-4 py-3 text-sm text-gray-900
|
|
placeholder:text-gray-400
|
|
focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20
|
|
transition-colors;
|
|
}
|
|
|
|
/* Subtle badge */
|
|
.badge {
|
|
@apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold;
|
|
}
|
|
|
|
/* Section header inside a page */
|
|
.section-title {
|
|
@apply text-xs uppercase tracking-widest font-semibold text-gray-400;
|
|
}
|
|
}
|
|
|
|
/* ── Bottom nav safe area ───────────────────────────────────────────────────── */
|
|
.pb-safe {
|
|
padding-bottom: calc(4rem + var(--safe-bottom));
|
|
}
|
|
|
|
.bottom-nav {
|
|
padding-bottom: var(--safe-bottom);
|
|
}
|