YaltopiaTech/Shitaye-FrontEnd
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): use flat mustard accent instead of CSS gradients

Browse Source 
Gradients were not rendering consistently after build/deploy. Replace
accent-highlight/deep gradient tokens with solid --color-accent and
soft fills so staging and production match local.

Made-with: Cursor
This commit is contained in:
“kirukib” 2026-03-25 00:23:29 +03:00
parent 1a37b91795
commit 0065ea5c34
10 changed files with 37 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/booking/BookingPageClient.tsx
View File

@ -201,7 +201,7 @@ export function BookingPageClient() {
disabled={!canContinue || pending !== null}
aria-busy={pending === "reserve"}
onClick={() => placeHold("reserve")}
className="w-full rounded-full border-2 border-[var(--color-primary)] bg-transparent py-3.5 text-sm font-semibold text-[var(--color-primary)] transition hover:border-transparent hover:bg-gradient-to-br hover:from-[var(--color-accent-highlight)] hover:via-[var(--color-accent)] hover:to-[var(--color-accent-deep)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)] disabled:cursor-not-allowed disabled:opacity-50"
className="w-full rounded-full border-2 border-[var(--color-primary)] bg-transparent py-3.5 text-sm font-semibold text-[var(--color-primary)] transition hover:border-transparent hover:bg-[var(--color-accent)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)] disabled:cursor-not-allowed disabled:opacity-50"
>
{pending === "reserve" ? "Saving your hold…" : "Reserve now — pay later"}
</button>

69
src/app/globals.css
View File

@ -8,11 +8,9 @@
/* —— Brand base —— */
--color-brand-teal: #174746;
--color-brand-teal-hover: #0f3234;
/* Softer champagne gold — muted, smooth; still readable with teal type */
--color-brand-mustard: #c9b07e;
--color-brand-mustard-hover: #bda270;
--color-accent-highlight: #e4dcc8;
--color-accent-deep: #a89462;
/* Mustard / gold — flat brand swatch (no gradients on CTAs) */
--color-brand-mustard: #d8a23a;
--color-brand-mustard-hover: #c4932a;
--color-brand-gray: #bdbbb4;
/* —— Semantic —— */
@ -29,10 +27,10 @@
--color-on-primary: #f4f5f4;
--color-accent: var(--color-brand-mustard);
--color-accent-hover: var(--color-brand-mustard-hover);
--color-accent-soft: #faf7ef;
--color-accent-soft: #faf6ea;
--color-on-accent: #174746;
--shadow-mustard: 0 3px 14px rgba(120, 98, 62, 0.2);
--shadow-mustard-hover: 0 6px 22px rgba(120, 98, 62, 0.28);
--shadow-mustard: 0 3px 14px rgba(216, 162, 58, 0.22);
--shadow-mustard-hover: 0 6px 22px rgba(216, 162, 58, 0.32);
--color-lemon-green: #9cae6b;
--color-success: #174746;
/* Rollgates: hotel name in navbar only */
@ -78,12 +76,12 @@ body {
.bg-pattern-brand-gold {
background-color: var(--color-bg);
background-image:
linear-gradient(90deg, rgba(200, 175, 130, 0.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(216, 162, 58, 0.1) 1px, transparent 1px),
linear-gradient(rgba(23, 71, 70, 0.045) 1px, transparent 1px);
background-size: 28px 28px;
}
/* Primary CTAs — soft champagne gradient, gentle depth */
/* Primary CTAs — flat mustard */
.btn-mustard {
display: inline-flex;
align-items: center;
@ -92,37 +90,25 @@ body {
border-radius: 9999px;
font-weight: 600;
color: var(--color-on-accent);
background: linear-gradient(
165deg,
var(--color-accent-highlight) 0%,
var(--color-accent) 48%,
var(--color-accent-deep) 100%
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(0, 0, 0, 0.06),
var(--shadow-mustard);
background-color: var(--color-accent);
box-shadow: var(--shadow-mustard);
transition:
filter 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.15s ease;
}
.btn-mustard:hover {
filter: brightness(1.03) saturate(1.03);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -1px 0 rgba(0, 0, 0, 0.05),
var(--shadow-mustard-hover);
background-color: var(--color-accent-hover);
box-shadow: var(--shadow-mustard-hover);
}
.btn-mustard:active {
transform: translateY(1px);
filter: brightness(0.99);
}
.btn-mustard:disabled {
opacity: 0.55;
cursor: not-allowed;
filter: grayscale(0.12) brightness(0.96);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
background-color: var(--color-accent);
box-shadow: none;
}
/* Compact rating / score badges (non-pill) */
@ -136,27 +122,16 @@ body {
line-height: 1rem;
padding: 0.125rem 0.5rem;
color: var(--color-on-accent);
background: linear-gradient(
180deg,
#e8ddd0 0%,
var(--color-accent) 55%,
var(--color-accent-deep) 100%
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.45),
0 1px 4px rgba(120, 98, 62, 0.2);
background-color: var(--color-accent);
box-shadow: 0 1px 3px rgba(216, 162, 58, 0.35);
}
/* Pills / chips — warm wash + soft gold ring */
/* Pills / chips — flat soft fill + gold border */
.chip-mustard {
border-radius: 9999px;
border: 1px solid rgba(180, 155, 110, 0.35);
background: linear-gradient(
135deg,
rgba(252, 249, 242, 0.98) 0%,
rgba(255, 255, 255, 0.92) 100%
);
box-shadow: 0 1px 2px rgba(100, 80, 50, 0.06);
border: 1px solid rgba(216, 162, 58, 0.45);
background-color: var(--color-accent-soft);
box-shadow: none;
color: var(--color-primary);
font-weight: 600;
font-size: 0.75rem;
@ -182,7 +157,7 @@ body {
transform: translateY(-4px);
box-shadow:
0 20px 44px rgba(23, 71, 70, 0.12),
0 0 0 1px rgba(200, 180, 140, 0.14);
0 0 0 1px rgba(216, 162, 58, 0.16);
}
@keyframes mock3d-rotate {

6
src/app/page.tsx
View File

@ -74,7 +74,7 @@ export default function HomePage() {
href={siteConfig.bookingComReviewsUrl}
target="_blank"
rel="noopener noreferrer"
className="text-sm font-semibold text-[var(--color-accent-deep)] underline-offset-4 transition hover:text-[var(--color-accent)] hover:underline"
className="text-sm font-semibold text-[var(--color-accent)] underline-offset-4 transition hover:text-[var(--color-accent)] hover:underline"
>
Read all reviews
</Link>
@ -158,7 +158,7 @@ export default function HomePage() {
</div>
<Link
href="/booking"
className="text-sm font-semibold text-[var(--color-accent-deep)] underline-offset-4 transition hover:text-[var(--color-accent)] hover:underline"
className="text-sm font-semibold text-[var(--color-accent)] underline-offset-4 transition hover:text-[var(--color-accent)] hover:underline"
>
Book a room →
</Link>
@ -214,7 +214,7 @@ export default function HomePage() {
<p className="mt-5 text-sm leading-relaxed text-[var(--color-muted)] md:mt-6 md:text-base md:leading-relaxed">
{w.description}
</p>
<p className="mt-5 text-sm font-semibold text-[var(--color-accent-deep)] md:mt-6">
<p className="mt-5 text-sm font-semibold text-[var(--color-accent)] md:mt-6">
{w.hours}
</p>
<ul className="mt-8 grid gap-3 sm:grid-cols-2 md:mt-10">

2
src/app/payment/PaymentPageClient.tsx
View File

@ -142,7 +142,7 @@ export function PaymentPageClient() {
<button
type="button"
onClick={applyCoupon}
className="rounded-full border border-[var(--color-primary)] px-4 py-2 text-sm font-semibold text-[var(--color-primary)] transition hover:border-transparent hover:bg-gradient-to-br hover:from-[var(--color-accent-highlight)] hover:via-[var(--color-accent)] hover:to-[var(--color-accent-deep)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
className="rounded-full border border-[var(--color-primary)] px-4 py-2 text-sm font-semibold text-[var(--color-primary)] transition hover:border-transparent hover:bg-[var(--color-accent)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
>
Apply
</button>

2
src/components/BookingSearchWidget.tsx
View File

@ -14,7 +14,7 @@ export function BookingSearchWidget() {
return (
<div className="overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[0_16px_48px_rgba(23,71,70,0.12)] ring-1 ring-[var(--color-accent)]/15">
<div className="border-l-[4px] border-[var(--color-accent)]/40 bg-gradient-to-br from-[var(--color-accent-soft)] via-[var(--color-surface)] to-[var(--color-surface)] px-5 py-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.65)] sm:px-6 sm:py-7 md:px-8 md:py-8">
<div className="border-l-[4px] border-[var(--color-accent)]/40 bg-[var(--color-accent-soft)] px-5 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-[var(--color-primary)]">
Direct booking
</p>

4
src/components/CallUsFab.tsx
View File

@ -9,14 +9,14 @@ export function CallUsFab() {
<div className="pointer-events-none fixed bottom-5 right-5 z-[60] flex flex-col items-end gap-2 md:bottom-8 md:right-8">
<a
href={`mailto:${siteConfig.email}`}
className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-primary)] shadow-lg transition hover:bg-gradient-to-br hover:from-[var(--color-accent-highlight)] hover:to-[var(--color-accent-deep)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)] md:h-14 md:w-14"
className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-primary)] shadow-lg transition hover:bg-[var(--color-accent)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)] md:h-14 md:w-14"
aria-label={`Email ${siteConfig.email}`}
>
<MailIcon />
</a>
<a
href={`tel:${tel}`}
className="group pointer-events-auto flex items-center gap-3 rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] py-3 pl-4 pr-5 text-sm font-semibold text-[var(--color-text)] shadow-lg transition hover:bg-gradient-to-r hover:from-[var(--color-accent-highlight)] hover:via-[var(--color-accent)] hover:to-[var(--color-accent-deep)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)]"
className="group pointer-events-auto flex items-center gap-3 rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] py-3 pl-4 pr-5 text-sm font-semibold text-[var(--color-text)] shadow-lg transition hover:bg-[var(--color-accent)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)]"
aria-label={`Call us at ${siteConfig.primaryPhone}`}
>
<span

8
src/components/Footer.tsx
View File

@ -73,7 +73,7 @@ export function Footer() {
href={siteConfig.social.facebook}
target="_blank"
rel="noopener noreferrer"
className="flex h-10 w-10 items-center justify-center rounded-full border border-stone-500 text-white transition hover:border-transparent hover:bg-gradient-to-br hover:from-[var(--color-accent-highlight)] hover:via-[var(--color-accent)] hover:to-[var(--color-accent-deep)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
className="flex h-10 w-10 items-center justify-center rounded-full border border-stone-500 text-white transition hover:border-transparent hover:bg-[var(--color-accent)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
aria-label="Facebook"
>
<IconFacebook />
@ -84,7 +84,7 @@ export function Footer() {
href={siteConfig.social.instagram}
target="_blank"
rel="noopener noreferrer"
className="flex h-10 w-10 items-center justify-center rounded-full border border-stone-500 text-white transition hover:border-transparent hover:bg-gradient-to-br hover:from-[var(--color-accent-highlight)] hover:via-[var(--color-accent)] hover:to-[var(--color-accent-deep)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
className="flex h-10 w-10 items-center justify-center rounded-full border border-stone-500 text-white transition hover:border-transparent hover:bg-[var(--color-accent)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
aria-label="Instagram"
>
<IconInstagram />
@ -95,7 +95,7 @@ export function Footer() {
href={siteConfig.social.twitter}
target="_blank"
rel="noopener noreferrer"
className="flex h-10 w-10 items-center justify-center rounded-full border border-stone-500 text-white transition hover:border-transparent hover:bg-gradient-to-br hover:from-[var(--color-accent-highlight)] hover:via-[var(--color-accent)] hover:to-[var(--color-accent-deep)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
className="flex h-10 w-10 items-center justify-center rounded-full border border-stone-500 text-white transition hover:border-transparent hover:bg-[var(--color-accent)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
aria-label="Twitter / X"
>
<IconTwitter />
@ -106,7 +106,7 @@ export function Footer() {
href={siteConfig.social.whatsapp}
target="_blank"
rel="noopener noreferrer"
className="flex h-10 w-10 items-center justify-center rounded-full border border-stone-500 text-white transition hover:border-transparent hover:bg-gradient-to-br hover:from-[var(--color-accent-highlight)] hover:via-[var(--color-accent)] hover:to-[var(--color-accent-deep)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
className="flex h-10 w-10 items-center justify-center rounded-full border border-stone-500 text-white transition hover:border-transparent hover:bg-[var(--color-accent)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
aria-label="WhatsApp"
>
<IconWhatsApp />

2
src/components/Header.tsx
View File

@ -46,7 +46,7 @@ export function Header() {
<Link
key={item.href}
href={item.href}
className="transition-colors hover:text-[var(--color-accent-deep)]"
className="transition-colors hover:text-[var(--color-accent)]"
>
{item.label}
</Link>

2
src/components/Mock3DPlaceholder.tsx
View File

@ -45,7 +45,7 @@ export function Mock3DPlaceholder({
return (
<div
className={`relative aspect-video w-full overflow-hidden rounded-2xl border border-[var(--color-border)] bg-gradient-to-br from-[var(--color-surface-muted)] via-[var(--color-surface)] to-[var(--color-accent-soft)] shadow-lg ${className}`}
className={`relative aspect-video w-full overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface-muted)] shadow-lg ${className}`}
role="img"
aria-label="Demonstration 3D preview placeholder — drag to tilt the mock room view"
>

2
src/components/OutletCard.tsx
View File

@ -34,7 +34,7 @@ export function OutletCard({ outlet }: Props) {
<ul className="space-y-2 border-t border-[var(--color-border)] p-5 text-sm text-[var(--color-muted)] md:p-6">
{outlet.bullets.map((b) => (
<li key={b} className="flex gap-2">
<span className="text-lg font-bold leading-none text-[var(--color-accent-highlight)]" aria-hidden>
<span className="text-lg font-bold leading-none text-[var(--color-accent)]" aria-hidden>
·
</span>
{b}