@tailwind base; @tailwind components; @tailwind utilities; /* ========================================================================== Design Tokens — Sukuto v2 (consolidated) -------------------------------------------------------------------------- Source of truth. Every color/shadow/radius used in components should resolve to one of these. Tailwind exposes them in tailwind.config.js. ========================================================================== */ :root { /* ── Primary (coral) — 4 tokens, NOT 9 ─────────────────────────────────── */ --color-primary: #ff5a5f; /* CTAs, top bar, active tab */ --color-primary-dark: #e04e52; /* hover */ --color-primary-deep: #c13333; /* pressed / active-toggle text */ --color-primary-light: #ff8a8d; /* highlights, second-level emphasis */ --color-primary-muted: #c9444a; /* coral on a DARK backdrop (promo) */ /* Soft red surfaces */ --color-red-50: #fff5f5; /* hover wash, active toggle bg */ --color-red-100: #ffe5e5; /* filter pill hover, status pill bg */ --color-red-200: #ffd6d6; /* filter pill border */ /* ── Accent palette (used sparingly) ───────────────────────────────────── */ --color-accent-teal: #087878; --color-accent-olive: #5b5c00; --color-accent-cyan: #6ed3dc; /* ── Text colors ───────────────────────────────────────────────────────── */ --color-heading: #111111; /* h1/h2 */ --color-sub-heading: #222222; /* h3/h4 */ --color-heading-hover: #333333; /* dark-button hover state */ --color-text-primary: #1a1a2e; /* body default */ --color-text-secondary: #4a4a68; --color-text-muted: #6b6b82; --color-text-muted-soft:#868686; /* date-field secondary, app-badge */ --color-text-placeholder: #aaaaaa; --color-text-disabled: #cccccc; --color-text-disabled-cool: #b6bdc8; /* mobile nav inactive — bluish gray */ /* ── Surfaces ──────────────────────────────────────────────────────────── */ --color-bg-page: #fafbfc; /* body bg */ --color-bg-card: #ffffff; --color-bg-gray-50: #fafafa; /* alt surface tint */ --color-bg-gray-100: #f4f4f4; /* deeper surface tint */ --color-bg-gray-150: #f0f0f0; /* hairline surface */ --color-brown-dark: #1f0b0b; /* footer / deep dark surface */ /* ── Lines ─────────────────────────────────────────────────────────────── */ --color-line: rgba(0, 0, 0, 0.08); /* canonical divider */ --color-line-soft: rgba(0, 0, 0, 0.06); /* subtle card border */ --color-line-strong: rgba(0, 0, 0, 0.12); /* hover/focus border */ --color-line-mid: #dddddd; /* date-field divider */ --color-line-dark: #1c1c1c; /* on dark surface */ /* ── Semantic system ───────────────────────────────────────────────────── */ --color-success: #16a34a; --color-success-bg: #e8f7ee; --color-success-text: #3d8c20; /* deeper green for status pill text */ --color-warn: #f59e0b; --color-warn-bg: #fff4d9; --color-danger: #dc2626; --color-danger-bg: #fdecec; --color-danger-deep: #b91c1c; /* cancelled-booking pill text */ --color-info: #3b82f6; --color-rating: #f4a02b; --color-whatsapp: #25d366; /* ── Brand-channel colors (third-party, never recolor) ─────────────────── */ --color-facebook: #1877f2; --color-linkedin: #0a66c2; --color-instagram: #e1306c; /* ── Typography ────────────────────────────────────────────────────────── */ --font-dm-sans-stack: var(--font-dm-sans), "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-poppins-stack: var(--font-poppins), "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: var(--font-dm-sans-stack); /* ── Radii ─────────────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* card default per design spec */ --radius-xl: 20px; /* large card */ --radius-2xl: 24px; --radius-3xl: 32px; /* MobileBar sheet */ --radius-pill: 9999px; /* tags, CTAs, toggle pills */ --radius-search:200px; /* hero search pill (per design spec) */ /* ── Elevation / shadows — 5 tiers ─────────────────────────────────────── */ --shadow-card-sm: 0 2px 12px rgba(0, 0, 0, 0.04); /* rest */ --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08); /* hover */ --shadow-card-lift: 0 8px 32px rgba(0, 0, 0, 0.10); /* big lift */ --shadow-search: 0 8px 32px rgba(0, 0, 0, 0.12); /* hero pill */ --shadow-dropdown: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04); /* menus */ --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.18); /* sheets */ --shadow-sticky: 0 0 22px rgba(0, 0, 0, 0.25); /* mobile pill */ /* CTA coral glow */ --shadow-cta: 0 4px 12px rgba(255, 90, 95, 0.30); --shadow-cta-strong:0 6px 20px rgba(255, 90, 95, 0.32); /* Focus rings */ --shadow-ring: 0 0 0 3px rgba(255, 90, 95, 0.25); --shadow-ring-soft: 0 0 0 3px rgba(255, 90, 95, 0.08); /* input focus */ /* ── Motion ────────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; } /* ========================================================================== Base Element Overrides (supplements Tailwind Preflight) ========================================================================== */ html { font-family: var(--font-body); font-variation-settings: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { color: var(--color-text-primary); background-color: var(--color-bg-page); } /* ========================================================================== CMS / Dynamic HTML Content (dangerouslySetInnerHTML — can't use Tailwind) ========================================================================== */ .dynamic-code-content h2 { font-size: 24px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 0.5rem; } .dynamic-code-content h3 { font-size: 20px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 0.5rem; } .dynamic-code-content h4 { font-size: 18px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 0.5rem; } .dynamic-code-content ul { padding-left: 1.5rem; margin-bottom: 1.5rem; list-style-type: disc; } .dynamic-code-content ol { padding-left: 1.5rem; margin-bottom: 1.5rem; list-style-type: decimal; } .dynamic-code-content li { margin-bottom: 0.5rem; } .dynamic-code-content a { color: var(--color-info); text-decoration: underline; } .dynamic-code-content a:hover { color: #1e40af; text-decoration: none; } .dynamic-code-content blockquote { padding: 1rem; margin: 1.5rem 0; background-color: #f3f4f6; border-left: 4px solid var(--color-text-disabled); } .dynamic-code-content img { max-width: 100%; height: auto; margin: 1rem 0; display: block; } .dynamic-code-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; } .dynamic-code-content th, .dynamic-code-content td { padding: 0.75rem; border: 1px solid var(--color-text-disabled); text-align: left; } .dynamic-code-content pre { background-color: #f3f4f6; padding: 1rem; margin: 1.5rem 0; overflow-x: auto; font-family: "Courier New", monospace; } .dynamic-code-content code { background-color: #f3f4f6; padding: 0.2rem 0.4rem; font-family: "Courier New", monospace; font-size: 0.875rem; border-radius: 4px; } .dynamic-code-content hr { border: none; border-top: 1px solid var(--color-text-disabled); margin: 2rem 0; } /* Quill editor alignment classes (embedded in CMS HTML payloads) */ .ql-align-left { text-align: left; } .ql-align-center { text-align: center; } .ql-align-right { text-align: right; } .ql-align-justify { text-align: justify; } /* ========================================================================== Third-Party: React Calendar (FIXED: was #fc5555 — now token) ========================================================================== */ .react-calendar__navigation { display: flex !important; } .react-calendar__navigation__label { color: #374151; } .react-calendar__month-view__days__day { color: #374151; } .react-calendar__month-view__days__day--neighboringMonth { color: #9ca3af; } .react-calendar__tile { background-color: white; font-size: 1rem; font-weight: 400; line-height: 1; padding: 10px 0; border-radius: 5px; } .react-calendar__tile--active { background-color: var(--color-primary); color: white; } .react-calendar__month-view__weekdays { margin-top: 5px; } .react-calendar__month-view__weekdays__weekday { color: #374151; text-align: center; font-size: 0.875rem; font-weight: 400; line-height: 1; } .react-calendar__month-view__weekdays__weekday > abbr { text-decoration: none; } /* ========================================================================== Legal Page (CMS descendant selectors) ========================================================================== */ .legal-content p { margin-bottom: 10px; } .legal-content ol ol { padding-left: 20px; margin-left: 20px; } .legal-content > div { margin-bottom: 20px; } /* ========================================================================== Third-Party: react-custom-scrollbars (child selectors on generated markup) ========================================================================== */ .scrollbar-style > div:first-child { overflow-x: auto !important; overflow-y: hidden !important; } .scrollbar-style > div:nth-child(2) { width: 30%; margin: 0 auto; background-color: rgba(217, 217, 217, 0.3) !important; } .scrollbar-style > div:nth-child(2) > div { background-color: rgba(248, 186, 77, 0.7) !important; } /* ========================================================================== Third-Party: react-loading-skeleton ========================================================================== */ @keyframes react-loading-skeleton { 100% { transform: translateX(100%); } } .react-loading-skeleton { --base-color: #ebebeb; --highlight-color: #f5f5f5; --animation-duration: 1.5s; --animation-direction: normal; --pseudo-element-display: block; background-color: var(--base-color); width: 100%; border-radius: 0.25rem; display: inline-flex; line-height: 1; position: relative; user-select: none; overflow: hidden; } .react-loading-skeleton::after { content: " "; display: var(--pseudo-element-display); position: absolute; inset: 0; height: 100%; background-repeat: no-repeat; background-image: linear-gradient(90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100%); transform: translateX(-100%); animation: react-loading-skeleton var(--animation-duration) ease-in-out infinite var(--animation-direction); } /* ========================================================================== Responsive Overrides (max-width: 1023px) ========================================================================== */ @media (max-width: 1023px) { #fc_frame, #fc_frame.fc-widget-normal { bottom: 90px !important; } .dynamic-code-content h2 { font-size: 20px; } .dynamic-code-content h3 { font-size: 18px; } .dynamic-code-content h4 { font-size: 16px; } } /* ========================================================================== Accessibility ========================================================================== */ @media (prefers-reduced-motion) { .react-loading-skeleton { --pseudo-element-display: none; } }