/*
* global.css — barrakali.com
* Brand type stack:
* - Display EN: Cormorant Garamond
* - Display AR: El Messiri (see rules below)
* - Body AR: IBM Plex Sans Arabic
* - UI/body EN: Inter
* - Micro-labels / eyebrows: JetBrains Mono
*/
/* Fonts are loaded via a single canonical tag in every page's
(one request, non-render-blocking). Do not re-add an @import here. */
html, html body {
font-family: 'Cormorant Garamond', 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
}
/* Default cascade for text nodes — without killing intentional mono faces */
body, p, li, a, button, input, textarea, select, label, span, div, td, th {
font-family: inherit;
}
/* Brand mono — eyebrows / micro labels (must beat page inline mono rules) */
.eyebrow,
.pkg-sub-label,
.atelier-separator span,
.nav-label,
.bk-nav-page,
.bp-eyebrow,
.bp-label,
.bk-pop-eyebrow,
.val-num,
.stat span,
.m-label,
.svc-row-badge,
.pkg-tag,
.chip,
[class*="-eyebrow"] {
font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important;
}
/* ──────────────────────────────────────────────────────────
* Arabic display type — closes the "elegance gap".
* Cormorant Garamond has no Arabic glyphs, so Arabic pages were
* silently falling back to IBM Plex Sans Arabic — a plain grotesk
* sans with none of Cormorant's contrast/character — for EVERY
* piece of Arabic text, headings included. That meant Arabic
* visitors (the default audience, lang="ar") never actually saw
* the "elegant serif" identity, only English ones did.
* Fix: El Messiri (an Arabic display face with real contrast and
* warmth, pairs cleanly with Cormorant's mood) is scoped ONLY to
* headings/eyebrows/display type on Arabic pages. Body paragraphs
* intentionally stay on IBM Plex Sans Arabic — long-form Arabic
* reads better on a plain, high-legibility face at 15-18px.
* ────────────────────────────────────────────────────────── */
:root { --font-ar-display: 'El Messiri', 'IBM Plex Sans Arabic', serif; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] .display, html[lang="ar"] .eyebrow,
html[lang="ar"] .hero h1, html[lang="ar"] .section-title,
html[lang="ar"] .menu-nav a, html[lang="ar"] .menu-brand,
html[lang="ar"] .pkg-sub-label, html[lang="ar"] .atelier-separator span {
font-family: var(--font-ar-display) !important;
}
/* ── Accessibility: skip-to-content link ── */
.skip-link {
position: absolute;
top: -100px;
inset-inline-start: 16px;
background: var(--fg, #000);
color: var(--bg, #fff);
padding: 10px 18px;
border-radius: 8px;
z-index: 10000;
font-weight: 600;
text-decoration: none;
transition: top .2s;
}
.skip-link:focus,
.skip-link:focus-visible {
top: 12px;
outline: 2px solid var(--gold, #D4AB5E);
outline-offset: 2px;
}
/* ── Accessibility: visible keyboard focus ring ──
* Only shows for keyboard navigation (not mouse clicks) thanks to :focus-visible.
* High-contrast against any theme.
*/
:focus-visible {
outline: 2px solid var(--gold, #D4AB5E) !important;
outline-offset: 2px !important;
border-radius: 4px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline-offset: 0 !important;
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* Visually-hidden utility for screen-reader-only content */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ──────────────────────────────────────────────────────────
* Typography System v2 — Hybrid Modular Scale (2026 best practice)
* • Body family: Major Third (1.25) — reading comfort
* • Display family: Perfect Fourth (1.333) — visual drama
* • Floors: 16px desktop body / 15px mobile body / 12px micro-labels
* • Fluid clamp() everywhere — zero layout breakpoints in size jumps
* • Arabic kerning + ligature hints for iOS/Android Safari/Chrome
* ────────────────────────────────────────────────────────── */
:root {
/* Body scale — Major Third 1.25 */
--fs-xs: 13px; /* legal/footnote — desktop only */
--fs-sm: 14px; /* small captions */
--fs-base: 16px; /* body floor desktop */
--fs-md: 18px; /* prominent body */
--fs-lg: 20px; /* lead paragraph */
/* Display scale — Perfect Fourth 1.333 (more dramatic for headlines) */
--fs-h4: 22px;
--fs-h3: 29px; /* 22 × 1.333 */
--fs-h2: 39px; /* 29 × 1.333 */
--fs-h1: 52px; /* 39 × 1.333 */
--fs-display: 72px;/* 52 × 1.333 — hero only */
/* Fluid responsive sizes (mobile → desktop) */
--fs-body-fluid: clamp(15px, 1.05vw + 13px, 17px);
--fs-lead-fluid: clamp(16px, 1.25vw + 14px, 19px);
--fs-h3-fluid: clamp(20px, 1.6vw + 17px, 26px);
--fs-h2-fluid: clamp(28px, 3vw + 20px, 39px);
--fs-h1-fluid: clamp(36px, 4vw + 24px, 56px);
--fs-display-fluid: clamp(44px, 6vw + 28px, 72px);
/* Line-heights — calibrated for reading research (Smith 2024) */
--lh-tight: 1.1;
--lh-snug: 1.3;
--lh-normal: 1.5;
--lh-body: 1.7; /* long-form paragraphs */
--lh-loose: 1.85; /* Arabic body — needs extra breathing */
/* Letter-spacing — tighter for big type, neutral for body */
--ls-display: -.025em;
--ls-h: -.015em;
--ls-body: 0;
--ls-caps: .12em;
/* Spacing + radius scale */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--radius-sm: 10px; --radius-md: 16px; --radius-lg: 20px; --radius-pill: 999px;
--nav-h: 64px;
}
html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html[lang="ar"] body, [dir="rtl"] body { line-height: var(--lh-loose); letter-spacing: 0; }
body {
font-size: var(--fs-body-fluid);
line-height: var(--lh-body);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
font-kerning: normal;
}
/* Arabic — keep default browser shaping; only enable safe features.
* Forcing init/medi/fina/rlig breaks contextual joining in some Chrome builds. */
:lang(ar), [dir="rtl"], html[lang="ar"] {
font-feature-settings: "kern" 1, "liga" 1;
-webkit-font-feature-settings: "kern", "liga";
}
/* Floor enforcement — never go below 15px body on mobile */
@media (max-width: 480px) {
body { font-size: 15px; line-height: var(--lh-body); }
html[lang="ar"] body, [dir="rtl"] body { line-height: var(--lh-loose); }
}
/* Caps/pill badge typography — uniform small size */
.eyebrow, .label, .pkg-tag,
[class*="-eyebrow"], [class*="-label"]:not(.kpi-label):not(.card-title):not(.svc-meta) {
font-size: 11px;
letter-spacing: var(--ls-caps);
}
.svc-row-badge { font-size: 10px !important; letter-spacing: var(--ls-caps); line-height: 1.2 !important; }
/* Arabic: caps tracking breaks cursive joining, and JetBrains Mono has no
Arabic glyphs — keep both Latin-only. */
html[lang="ar"] .eyebrow, html[lang="ar"] .label, html[lang="ar"] .pkg-tag,
html[lang="ar"] [class*="-eyebrow"], html[lang="ar"] [class*="-label"],
html[lang="ar"] .svc-row-badge { letter-spacing: 0; }
html[lang="ar"] .m-label, html[lang="ar"] .svc-row-badge, html[lang="ar"] .pkg-tag,
html[lang="ar"] .chip, html[lang="ar"] .nav-label, html[lang="ar"] .bk-nav-page,
html[lang="ar"] .val-num, html[lang="ar"] [class*="-eyebrow"] {
font-family: var(--font-ar-display, 'IBM Plex Sans Arabic'), sans-serif !important;
}
/* Long-form text comfort */
p { line-height: var(--lh-body); }
article p, .prose p, .hero-sub, .section-sub, .pkg-desc, .lead, .svc-row-desc, .faq-a {
line-height: var(--lh-body);
font-size: var(--fs-body-fluid);
max-width: 68ch;
}
[dir="rtl"] article p, [dir="rtl"] .prose p, [dir="rtl"] .pkg-desc, [dir="rtl"] .lead {
line-height: var(--lh-loose);
max-width: 60ch; /* Arabic measures shorter — characters average wider */
}
/* Headings — only when page hasn't already styled them */
h1:not([class]) { font-size: var(--fs-h1-fluid); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
h2:not([class]) { font-size: var(--fs-h2-fluid); line-height: var(--lh-snug); letter-spacing: var(--ls-h); }
h3:not([class]) { font-size: var(--fs-h3-fluid); line-height: var(--lh-snug); letter-spacing: var(--ls-h); }
/* Optical sizing for variable fonts (when supported) */
@supports (font-optical-sizing: auto) {
body { font-optical-sizing: auto; }
}
/* Avoid orphans/widows in headlines — LTR only.
* text-wrap on Arabic can split ligatures in current Chrome builds. */
[dir="ltr"] h1, [dir="ltr"] h2, [dir="ltr"] h3,
[dir="ltr"] .hero h1, [dir="ltr"] .section-title { text-wrap: balance; }
[dir="ltr"] p, [dir="ltr"] .pkg-desc, [dir="ltr"] .lead,
[dir="ltr"] .hero-sub, [dir="ltr"] .section-sub { text-wrap: pretty; }
/* ──────────────────────────────────────────────────────────
* RTL Arrow Flip — universal correction for directional icons
* Flips chevron/arrow SVGs sitting inside CTA/back/nav elements
* when document direction is RTL. Targets known wrapper classes
* so non-directional icons (cameras, megaphones, etc.) are not flipped.
* ────────────────────────────────────────────────────────── */
[dir="rtl"] .svc-row-cta svg,
[dir="rtl"] .svc-row-btn svg,
[dir="rtl"] .svc-row-arrow,
[dir="rtl"] .svc-row-arrow svg,
[dir="rtl"] .svc-link svg,
[dir="rtl"] .line-cta svg,
[dir="rtl"] .cta-arrow,
[dir="rtl"] .cta-arrow svg,
[dir="rtl"] .pkg-cta svg,
[dir="rtl"] .btn-next svg,
[dir="rtl"] .btn-back-step svg,
[dir="rtl"] .btn-icon-text svg,
[dir="rtl"] .nav-back svg,
[dir="rtl"] .cat-back svg,
[dir="rtl"] .back-link svg,
[dir="rtl"] #back-btn svg,
[dir="rtl"] #back-link svg,
[dir="rtl"] .cal-nav svg,
[dir="rtl"] .menu-arrow,
[dir="rtl"] .menu-arrow svg,
[dir="rtl"] .hero-cta a svg,
[dir="rtl"] .hero-cta button svg,
[dir="rtl"] .btn-primary svg,
[dir="rtl"] .btn-outline svg,
[dir="rtl"] .btn-ghost svg,
[dir="rtl"] .cta-btn svg,
[dir="rtl"] a.btn svg,
[dir="rtl"] .filter-btn svg { transform: scaleX(-1); }
/* LTR: ensure no leftover flips from earlier fixed rules */
[dir="ltr"] .svc-row-cta svg,
[dir="ltr"] .svc-row-btn svg,
[dir="ltr"] .svc-row-arrow,
[dir="ltr"] .svc-link svg,
[dir="ltr"] .line-cta svg,
[dir="ltr"] .cta-arrow svg,
[dir="ltr"] .pkg-cta svg,
[dir="ltr"] .menu-arrow svg { transform: none; }
/* ──────────────────────────────────────────────────────────
* POLISH LAYER — motion, contrast, micro-interactions
* Applies sitewide without overriding brand colors/fonts.
* ────────────────────────────────────────────────────────── */
:root {
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-in-out: cubic-bezier(.65,0,.35,1);
--dur-1: 120ms;
--dur-2: 200ms;
--dur-3: 320ms;
--dur-4: 480ms;
--dur-5: 720ms;
--shadow-card: 0 4px 20px rgba(0,0,0,.08);
--shadow-lift: 0 12px 40px rgba(0,0,0,.18);
--shadow-gold: 0 8px 28px rgba(212,171,94,.22);
}
html { scroll-behavior: smooth; }
/* Smooth theme transitions */
html, body { transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out); }
/* AAA contrast for muted text */
[data-theme="dark"] .muted, [data-theme="dark"] [class*="muted"] { color: #b3b3b3; }
[data-theme="light"] .muted, [data-theme="light"] [class*="muted"] { color: #4a4a4a; }
/* Image fade-in on load (lazy images) */
img[loading="lazy"] { opacity: 0; transition: opacity var(--dur-4) var(--ease-out); }
img[loading="lazy"][data-loaded] { opacity: 1; }
/* CLS prevention — reserve aspect-ratio for any ![]()
missing explicit dims.
* Using auto with fallback aspect-ratio gives the browser a layout box even
* before the image header arrives. Fine-grained per-image overrides win. */
/* CLS guard — only apply to lazy gallery/content images, not branded logos/icons */
img[loading="lazy"]:not([width]):not([height]):not(.brand-mark):not(.nav-logo):not(.logo) { aspect-ratio: auto 16 / 9; }
img.brand-mark, img.nav-logo, img.logo, img[alt*="logo"], img[alt*="Logo"] { aspect-ratio: auto; }
/* Skeleton shimmer for any element with .skeleton */
.skeleton {
position: relative; overflow: hidden;
background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(212,171,94,.08) 50%, rgba(255,255,255,.04) 100%);
background-size: 200% 100%;
animation: shimmer 1.4s var(--ease-in-out) infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
/* Branded selection */
::selection { background: #D4AB5E; color: #000; }
[data-theme="light"] ::selection { background: #8a6a1f; color: #fff; }
/* Branded scrollbars (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212,171,94,.35); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,171,94,.6); }
/* Mobile: full-width primary CTAs for thumb reach */
@media (max-width: 480px) {
.btn-primary, .cta-primary, [class*="cta"][class*="primary"] {
width: 100% !important; justify-content: center;
}
}
/* Touch devices: kill hover lift to avoid sticky states */
@media (hover: none) {
*:hover { transform: none !important; }
}
/* Universal interactive lift on cards with .card / .pkg / .svc */
.card, .pkg, .svc-row, [class*="card-"]:not(input):not(button) {
transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
@media (hover: hover) {
.card:hover, .pkg:hover, .svc-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
}
/* Reduced-motion: extend kill switch to all transitions/transforms */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto !important; }
img[loading="lazy"] { opacity: 1 !important; }
.skeleton { animation: none !important; }
}
/* ──────────────────────────────────────────────────────────
* Mobile UX Hardening 2026
* • 48px minimum touch targets (WCAG 2.2 AAA / Material 3)
* • iOS momentum scroll + overscroll containment
* • Tap highlight removal (we provide our own focus state)
* • GPU-accelerated transforms on hover for 60fps
* • Reduced data on mobile (skip heavy animations)
* • Safe-area insets for notched devices
* ────────────────────────────────────────────────────────── */
/* iOS smooth momentum + overscroll behaviour */
html, body { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
/* Kill iOS tap highlight (we use focus-visible ring instead) */
* { -webkit-tap-highlight-color: transparent; }
/* Prevent iOS auto-zoom on focus by ensuring inputs ≥16px */
input, select, textarea { font-size: max(16px, 1em); }
@media (max-width: 480px) {
input:not([type="checkbox"]):not([type="radio"]),
select, textarea { font-size: 16px !important; }
}
/* 48px minimum touch target on mobile (WCAG 2.2 AAA, Material 3) */
@media (max-width: 768px) {
button, a.btn, a.btn-primary, a.btn-outline, a.btn-ghost, a.btn-icon,
.btn-icon, .filter-btn, .ptab, .icon-btn, [role="button"],
input[type="submit"], input[type="button"], .pkg-cta, .svc-row-cta {
min-height: 48px;
min-width: 48px;
}
/* Inline text links inside paragraphs are exempt */
p a, .footer a, footer a { min-height: auto; min-width: auto; }
}
/* GPU-accelerate common hover transforms — keeps 60fps on lower-end Androids */
.card, .pkg-card, .svc-row, .line-card, .svc-card, .pkg, [class*="-card"] {
will-change: auto;
transform: translateZ(0);
backface-visibility: hidden;
}
/* Safe-area insets for notched devices */
@supports (padding: max(0px)) {
body {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
header.nav, footer, .cta-block, [class*="sticky"] {
padding-left: max(env(safe-area-inset-left), 16px);
padding-right: max(env(safe-area-inset-right), 16px);
}
}
/* Mobile: tighter section gutters, larger tap regions, comfier reading */
@media (max-width: 480px) {
.container { padding-inline: 16px; }
.pkg-card, .svc-card, .card { padding: 18px 16px; }
.hero h1, .section-title { word-break: keep-all; overflow-wrap: break-word; }
}
/* Save-data / slow-connection: drop blur backdrop + heavy shadows */
@media (prefers-reduced-data: reduce), (max-width: 480px) {
header.nav, .cta-block { backdrop-filter: blur(8px); }
}
/* ──────────────────────────────────────────────────────────
* Button Polish Layer (v2026-05-07)
* Site-wide button rebalancing — buttons were oversized vs.
* surrounding text. This layer harmonises every button class
* across all 25 pages without touching colors / brand identity.
*
* Hierarchy:
* Primary → height ~50px, padding 14×28, fs 15px
* Secondary → height ~46px, padding 12×24, fs 14.5px
* Ghost → height ~46px, padding 12×24, fs 14.5px (1px border)
* Icon-only → 40×40 desktop, 44×44 mobile (still ≥WCAG)
* Filter/Pill → height 36px, padding 8×16, fs 13px
* Mobile → ≥48px touch target enforced by earlier rule
* ────────────────────────────────────────────────────────── */
/* Primary CTAs — main book/start/submit actions */
.btn-primary, .cta-btn, .btn-book, .pkg-cta, .wa-book-btn,
.wallet-pay-btn, .login-btn, .newsletter-btn, .coupon-btn,
button[type="submit"]:not(.btn-icon):not(.icon-btn),
.btn:not(.btn-outline):not(.btn-ghost):not(.btn-icon):not(.btn-sm):not(.btn-icon-text):not(.btn-danger):not(.btn-pf):not(.btn-back-step):not(.btn-next) {
min-height: 48px;
padding: 12px 26px !important;
font-size: 15px !important;
letter-spacing: .01em;
border-radius: 999px;
font-weight: 600;
line-height: 1.2;
}
/* Secondary / Outline buttons */
.btn-outline, .btn-secondary, .oauth-btn, .lb-btn {
min-height: 44px;
padding: 10px 22px !important;
font-size: 14.5px !important;
letter-spacing: .01em;
border-radius: 999px;
font-weight: 500;
line-height: 1.2;
}
/* Ghost — lightest tier */
.btn-ghost {
min-height: 42px;
padding: 9px 20px !important;
font-size: 14px !important;
letter-spacing: .01em;
border-radius: 999px;
font-weight: 500;
line-height: 1.2;
}
/* Compact small buttons */
.btn-sm, .svc-row-cta, .lc-cta, .line-cta, .filter-btn, .ptab,
.btn-pf, .btn-back-step, .btn-next, .gp-btn {
min-height: 38px;
padding: 8px 18px !important;
font-size: 13.5px !important;
border-radius: 999px;
font-weight: 500;
line-height: 1.2;
}
/* Filter pills — tighter still */
.filter-btn, .ptab {
min-height: 36px;
padding: 7px 16px !important;
font-size: 13px !important;
}
/* Round icon-only buttons (lang/theme/back-arrow circles) */
.btn-icon, .icon-btn, .cal-nav-btn {
width: 40px !important; height: 40px !important;
min-width: 40px; min-height: 40px;
padding: 0 !important;
font-size: 13px !important;
border-radius: 999px;
}
.btn-icon svg, .icon-btn svg, .cal-nav-btn svg {
width: 16px; height: 16px;
}
/* Icon-with-text buttons (e.g. nav back link) */
.btn-icon-text {
height: 40px;
padding: 0 16px !important;
font-size: 13.5px !important;
gap: 6px;
border-radius: 999px;
}
/* Service-row internal buttons */
.svc-row-btn {
min-height: 38px;
padding: 8px 18px !important;
font-size: 13.5px !important;
border-radius: 999px;
}
/* Mobile — restore 48px touch targets without bloating padding */
@media (max-width: 768px) {
.btn-primary, .cta-btn, .btn-book, .pkg-cta, .wa-book-btn,
.wallet-pay-btn, .login-btn, .newsletter-btn, .coupon-btn,
.btn:not(.btn-outline):not(.btn-ghost):not(.btn-icon):not(.btn-sm):not(.btn-icon-text):not(.btn-danger):not(.btn-back-step):not(.btn-next):not(.btn-pf) {
min-height: 48px;
padding: 12px 24px !important;
font-size: 14.5px !important;
}
.btn-outline, .btn-secondary, .btn-ghost {
min-height: 48px;
padding: 12px 22px !important;
font-size: 14px !important;
}
/* Header/nav icon buttons — keep elegant and uncrowded on mobile.
* Visual circle 38px, but invisible 44px tap area via ::before. */
header.nav .btn-icon, nav .btn-icon, .topbar .icon-btn,
.nav-side-start .btn-icon, .nav-side-end .btn-icon {
width: 38px !important; height: 38px !important;
min-width: 38px !important; min-height: 38px !important;
position: relative;
}
header.nav .btn-icon::before, nav .btn-icon::before,
.nav-side-start .btn-icon::before, .nav-side-end .btn-icon::before {
content: ''; position: absolute; inset: -3px; /* expands tap area to 44×44 */
}
header.nav .btn-icon svg, nav .btn-icon svg,
.nav-side-start .btn-icon svg, .nav-side-end .btn-icon svg {
width: 16px !important; height: 16px !important;
}
/* Tighter gap between header icons + breathing room around logo */
.nav-side-end, .nav-side-start { gap: 6px !important; }
.nav-row { padding: 0 14px !important; }
/* Other (non-header) round icons keep elegant 40×40 */
.cal-nav-btn { width: 40px !important; height: 40px !important; }
/* Full-width primary CTAs on phones — easier thumb reach */
.btn-primary, .cta-btn:not(.cta-btn-inline) {
width: 100%; justify-content: center;
}
}
/* Smooth, premium hover/active transitions */
.btn, .btn-primary, .btn-outline, .btn-ghost, .btn-secondary,
.cta-btn, .btn-book, .pkg-cta, .svc-row-cta, .svc-row-btn,
.btn-icon, .icon-btn, .filter-btn, .ptab, .btn-icon-text,
.wa-book-btn, .wallet-pay-btn, .login-btn, .newsletter-btn,
.coupon-btn, .btn-sm, .lc-cta, .line-cta, .lb-btn {
transition: background-color var(--dur-2) var(--ease-out),
color var(--dur-2) var(--ease-out),
border-color var(--dur-2) var(--ease-out),
transform var(--dur-2) var(--ease-out),
opacity var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
.btn-primary:hover, .cta-btn:hover, .btn-book:hover,
.pkg-cta:hover, .wa-book-btn:hover { transform: translateY(-1px); }
}
.btn:active, .btn-primary:active, .btn-outline:active,
.cta-btn:active, .btn-book:active, .pkg-cta:active { transform: translateY(0); }
/* Touch-safe press feedback (phones have no hover) */
.svc-card:active, .pkg-card:active, .svc-row:active, .line-card:active,
.slot:active:not(.taken), .tier-item:active, .addon-item:active {
transform: scale(.985);
transition-duration: var(--dur-1, .1s);
}
.bk-sticky-book:active, a.btn:active, .pkg-cta:active {
transform: scale(.98);
}
@media (hover: hover) {
.svc-card:hover, .line-card:hover, .pkg-card:hover {
border-color: color-mix(in srgb, var(--gold, #D4AB5E) 55%, var(--line));
}
}
/* Disabled / loading state */
button:disabled, .btn:disabled, .btn[disabled],
button[aria-disabled="true"] {
opacity: .55; cursor: not-allowed; pointer-events: none;
}
.btn.loading, button.loading {
position: relative; color: transparent !important; pointer-events: none; opacity: 1;
}
.btn.loading::after, button.loading::after {
content: ''; position: absolute; inset: 0; margin: auto;
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--fg) 25%, transparent);
border-top-color: var(--fg);
animation: spin .7s linear infinite;
}
/* ──────────────────────────────────────────────────────────
* UI Polish Layer — Forms, Inputs, Cards, Modals, States
* Applied site-wide for consistent premium feel.
* ────────────────────────────────────────────────────────── */
/* Form inputs — refined heights aligned with secondary buttons (44px) */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], input[type="url"],
input[type="password"], input[type="date"], input[type="time"],
select, textarea {
min-height: 44px;
padding: 10px 14px;
border-radius: 12px;
line-height: 1.4;
transition: border-color var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out),
background-color var(--dur-2) var(--ease-out);
}
textarea { min-height: 96px; padding: 12px 14px; line-height: 1.55; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: none !important;
border-color: var(--gold, #D4AB5E) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold, #D4AB5E) 22%, transparent);
}
label {
font-size: 13px; font-weight: 500;
letter-spacing: .02em;
display: inline-block; margin-bottom: 6px;
}
/* Cards — unified radius + subtle hover tier */
.card, .pkg-card, .svc-card, .line-card, .guarantee, .step,
.tier-item, .testimonial-card, .blog-card, .faq-item {
border-radius: 18px;
}
@media (max-width: 480px) {
.card, .pkg-card, .svc-card, .line-card { border-radius: 16px; }
}
/* Modals / overlays — soft entrance */
[role="dialog"], .modal, .overlay-content {
border-radius: 20px;
box-shadow: var(--shadow-lift);
}
/* Section spacing rhythm — consistent vertical breathing */
section + section,
.section + .section { border-top: 1px solid var(--line); }
/* Unified nav chrome height */
header.nav .nav-row,
nav.nav .nav-row,
.nav .nav-row {
min-height: var(--nav-h, 64px);
}
/* Sticky bar + WA stack (mobile conversion) */
@media (max-width: 720px) {
body:has(.bk-sticky-cta.bk-on) {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
.bk-wa-float, .wa-float {
bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
inset-inline-start: 16px;
inset-inline-end: auto;
}
body:has(.bk-wa-float) .wa-float { display: none !important; }
}
/* Empty / error state pattern */
.bk-empty {
text-align: center;
padding: var(--space-7, 48px) var(--space-4, 16px);
color: var(--muted);
font-size: 14px;
line-height: 1.6;
}
.bk-empty__title {
font-family: var(--font-ar-display), 'Cormorant Garamond', serif;
font-size: clamp(20px, 3vw, 28px);
color: var(--fg);
margin-bottom: 8px;
}
.bk-empty__actions {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px;
}
[aria-busy="true"] { cursor: progress; }
/* Skeleton placeholders — uniform shape */
.skeleton, [data-skeleton] {
border-radius: 12px;
background: linear-gradient(90deg,
color-mix(in srgb, var(--fg) 4%, transparent) 0%,
color-mix(in srgb, var(--gold, #D4AB5E) 8%, transparent) 50%,
color-mix(in srgb, var(--fg) 4%, transparent) 100%);
background-size: 200% 100%;
animation: shimmer 1.4s var(--ease-in-out) infinite;
}
/* Loading spinner ring (any .spinner element) */
.spinner {
width: 20px; height: 20px;
border: 2px solid color-mix(in srgb, var(--fg) 18%, transparent);
border-top-color: var(--fg);
border-radius: 50%;
animation: spin .7s linear infinite;
display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Dropdowns / selects — consistent caret */
select:not([multiple]) {
-webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
[dir="rtl"] select:not([multiple]) {
background-position: left 14px center;
padding-right: 14px; padding-left: 36px;
}
/* Visual rhythm — consistent gap between adjacent buttons */
.cta-actions, .hero-cta, .pkg-card .btn, .form-actions {
display: flex; gap: 10px; flex-wrap: wrap;
}
@media (max-width: 480px) {
.cta-actions, .hero-cta { gap: 8px; }
}
/* Badge harmonisation — never larger than 11px on mobile */
.badge, .pill, .tag, .chip {
font-size: 11.5px;
padding: 3px 9px;
border-radius: 999px;
letter-spacing: .04em;
line-height: 1.4;
}
@media (max-width: 480px) {
.badge, .pill, .tag, .chip { font-size: 10.5px; padding: 2px 8px; }
}
/* Print: keep content readable, drop ornaments */
@media print {
*, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
nav, footer, .skip-link, video, .lang-toggle, .theme-toggle { display: none !important; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555 !important; }
}
/* ───── Dark theme body — warm gold radial wash ───── */
html[data-theme="dark"] body {
background: radial-gradient(ellipse at 50% -20%, rgba(212,171,94,.05) 0%, transparent 55%), #06070a;
}
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] a.btn:not(.btn-outline):not(.btn-ghost):not(.btn-icon) {
background: linear-gradient(160deg, var(--gold, #D4AB5E) 0%, #b8923f 100%);
color: #06070a;
border-color: var(--gold, #D4AB5E);
box-shadow: 0 0 0 1px rgba(212,171,94,.25), 0 6px 20px rgba(212,171,94,.18);
}
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] a.btn.btn-outline {
background: transparent;
color: var(--fg);
border: 1px solid var(--line);
box-shadow: none;
}
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] a.btn.btn-outline:hover {
border-color: var(--gold, #D4AB5E);
color: var(--gold, #D4AB5E);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel-card,
html[data-theme="dark"] .gc-card {
box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(212,171,94,.06);
}
html[data-theme="dark"] a:not(.btn):hover { color: #D4AB5E; }
/* === Logo color adapt — invert plain black logos on dark theme only.
* Nav uses .for-dark { filter:invert(1) } already — exclude those to avoid double-invert. */
html[data-theme="dark"] img[src*="logo-black"]:not(.for-dark):not(.for-light) {
filter: invert(1) brightness(1.05);
}
html[data-theme="light"] img[src*="logo-black"]:not(.for-dark):not(.for-light) {
filter: none;
}
/* ───── Light theme — coordinated mirror of the new gold dark ───── */
html[data-theme="light"] body {
background:
radial-gradient(ellipse at 50% -20%, rgba(138,100,32,.06) 0%, transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(138,100,32,.04) 0%, transparent 50%),
#faf6ec;
}
html[data-theme="light"] .btn-primary,
html[data-theme="light"] a.btn:not(.btn-outline):not(.btn-ghost):not(.btn-icon) {
background: linear-gradient(160deg, var(--gold, #8a6a1f) 0%, #8a6820 100%);
color: #faf6ec;
border-color: var(--gold, #8a6a1f);
box-shadow: 0 0 0 1px rgba(168,132,44,.22), 0 6px 20px rgba(168,132,44,.20);
}
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] a.btn:not(.btn-outline):not(.btn-ghost):not(.btn-icon):hover {
filter: brightness(1.08);
box-shadow: 0 0 0 1px rgba(168,132,44,.32), 0 8px 26px rgba(168,132,44,.28);
}
html[data-theme="light"] .btn-outline,
html[data-theme="light"] a.btn.btn-outline {
background: transparent;
color: var(--fg);
border: 1px solid var(--line);
box-shadow: none;
}
html[data-theme="light"] .btn-outline:hover,
html[data-theme="light"] a.btn.btn-outline:hover {
border-color: var(--gold, #8a6a1f);
color: var(--gold, #8a6a1f);
}
/* Conversion trust strip — reuse near CTAs */
.bk-trust-row {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
align-items: center;
justify-content: center;
margin-top: 14px;
font-size: 12px;
letter-spacing: .04em;
color: var(--muted);
}
.bk-trust-row span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.bk-trust-row span::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--gold, #D4AB5E);
opacity: .85;
}
/* Form field polish */
.field input:invalid:not(:placeholder-shown):not(:focus),
.field textarea:invalid:not(:placeholder-shown):not(:focus) {
border-color: var(--danger, #ff5b5b);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
border-color: var(--gold, #D4AB5E);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold, #D4AB5E) 18%, transparent);
outline: none;
}
.field .hint {
display: block;
margin-top: 6px;
font-size: 12px;
color: var(--muted);
line-height: 1.45;
}
html[data-theme="light"] .card,
html[data-theme="light"] .panel-card,
html[data-theme="light"] .gc-card,
html[data-theme="light"] .form-card,
html[data-theme="light"] .pkg,
html[data-theme="light"] .val,
html[data-theme="light"] .stat,
html[data-theme="light"] .booking-row,
html[data-theme="light"] .profile-card {
box-shadow: 0 4px 16px rgba(26,22,18,.05), 0 0 0 1px rgba(138,100,32,.08);
}
html[data-theme="light"] a:not(.btn):hover { color: #8a6a1f; }
html[data-theme="light"] .menu-nav a:hover,
html[data-theme="light"] .menu-nav a:hover::before { color: #8a6a1f !important; }
html[data-theme="light"] .feat-chip { color: #8a6a1f !important; }
/* Light nav: warm blur backdrop + subtle gold tint border */
html[data-theme="light"] header.nav,
html[data-theme="light"] header.bk-admin-nav {
background: color-mix(in srgb, #faf6ec 85%, transparent);
border-bottom-color: #e8dec9;
}
/* Light theme: gold tint on focus rings + active states */
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
border-color: #8a6a1f !important;
box-shadow: 0 0 0 3px rgba(138,100,32,.12) !important;
outline: none;
}
/* Light theme: tier/feat-chip + selected states */
html[data-theme="light"] .feat-chip,
html[data-theme="light"] .chip.active,
html[data-theme="light"] .tab.active {
color: #faf6ec !important;
}
html[data-theme="light"] .tab.active,
html[data-theme="light"] .ptab.active {
background: #1a1612 !important;
color: #faf6ec !important;
}
/* Light theme: section dividers (warm beige) */
html[data-theme="light"] hr,
html[data-theme="light"] .divider { border-color: #e8dec9; background: #e8dec9; }
/* Light theme: muted text on cards stays readable */
html[data-theme="light"] .stat-label,
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .section-label,
html[data-theme="light"] .kpi-label,
html[data-theme="light"] .card-title { color: #7a6f60; }
/* Light theme: subtle warm divider between sections */
html[data-theme="light"] section { border-top-color: #e8dec9; }
html[data-theme="light"] .stats-strip,
html[data-theme="light"] .guarantee-strip {
background: #f4eddc;
border-color: #e8dec9;
}
/* Light theme: hero overlays — slightly softer text shadow on dark hero image */
html[data-theme="light"] .hero-bg ~ .hero-content { /* image stays dark, text already styled */ }
/* Light theme: footer + bottom row trim */
html[data-theme="light"] footer,
html[data-theme="light"] .menu-bottom { border-top-color: #e8dec9; }
/* Light theme: badge styles use warm tones */
html[data-theme="light"] .badge.confirmed { background: rgba(22,163,74,.10); color: #14532d; }
html[data-theme="light"] .badge.pending,
html[data-theme="light"] .badge.reserved { background: rgba(193,55,47,.06); color: #8a6a1f; }
/* ── Accessibility: visible keyboard focus (mouse clicks unaffected) ── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--gold, #D4AB5E);
outline-offset: 3px;
border-radius: 4px;
}
/* ──────────────────────────────────────────────────────────
* Brand motif — recurring mark (2026-07-08)
* The aperture/lens icon (two triangles + a circle) only ever
* appeared once, in the nav logo. Repeating it faintly wherever
* every page already shares a common element turns it from "a
* logo" into an actual visual signature — with zero markup
* changes needed on any of the 50+ pages.
* `footer` is a real semantic tag present on virtually every
* page, so this single rule reaches the whole site at once.
* Implemented as a CSS mask (not a flat image) so it recolors
* itself automatically per theme via var(--fg).
* ────────────────────────────────────────────────────────── */
footer { position: relative; }
footer::after {
content: '';
position: absolute;
inset-inline-end: 24px;
bottom: 24px;
width: 220px; height: 82px;
background-color: var(--fg, #f5e9d4);
opacity: .08;
pointer-events: none;
z-index: -1;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 210'%3E%3Cpath fill='%23000' d='M40 190 L150 60 L150 190 Z'/%3E%3Ccircle fill='%23000' cx='230' cy='115' r='42'/%3E%3Cpath fill='%23000' d='M300 50 L470 50 L385 190 Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 210'%3E%3Cpath fill='%23000' d='M40 190 L150 60 L150 190 Z'/%3E%3Ccircle fill='%23000' cx='230' cy='115' r='42'/%3E%3Cpath fill='%23000' d='M300 50 L470 50 L385 190 Z'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
}
/* Negative z-index (not touching footer's children at all) keeps this
painted behind the footer's real content within the stacking context
`position:relative` on footer establishes — safest way to sit "behind"
without risking any of the 46 different footer layouts across pages. */
@media (max-width: 600px) {
footer::after { width: 130px; height: 48px; inset-inline-end: 12px; bottom: 12px; }
}
@media (prefers-reduced-data: reduce) { footer::after { display: none; } }
/* ──────────────────────────────────────────────────────────
* Burgundy — a second, deliberately rare accent (2026-07-08)
* Gold stays the ONE color for every primary CTA/action/focus
* state sitewide — untouched. Burgundy is introduced only as a
* meaning-carrying signal for the top tier (Atelier / VIP), so
* it reads as "a rarer, more exclusive mark" rather than a
* second brand color competing with gold. Uses --burgundy from
* data/tokens.json (synced into every page by token-sync.js),
* with an inline fallback so this rule is safe even pre-sync.
* ────────────────────────────────────────────────────────── */
.badge-vip {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 16px; border-radius: 999px;
background: linear-gradient(135deg, var(--burgundy, #722F37) 0%, color-mix(in srgb, var(--burgundy, #722F37) 70%, black) 100%);
color: #f5e9d4;
border: 1px solid color-mix(in srgb, var(--burgundy, #722F37) 60%, transparent);
font-weight: 500;
box-shadow: 0 4px 16px color-mix(in srgb, var(--burgundy, #722F37) 30%, transparent);
}
:root{--burgundy-text:#b87c88;}
html[data-theme="light"]{--burgundy-text:#722F37;}
.atelier-separator span {
color: var(--burgundy-text, #b87c88) !important;
}
/* .pkg-sub-label is shared with the standard/non-Atelier tier, so it can't be
tinted globally — only the explicit --atelier modifier gets burgundy. */
.pkg-sub-label--atelier {
color: var(--burgundy-text, #b87c88) !important;
}
.pkg-sub-label--atelier::before, .pkg-sub-label--atelier::after {
background: var(--burgundy-text, #b87c88) !important;
}
/* Gold gradient partner — theme aware */
:root{--gold-2:#b8923f;}
html[data-theme="light"]{--gold-2:#8a6820;}
.wallet-pay-btn{padding:0 !important;}
body.menu-open .bk-sticky-cta{display:none !important;}