/* ========================================================= Lagos Hotel Nairobi — Design System Mobile-first, ADA/WCAG 2.2 compliant ========================================================= */ /* --- Google Fonts Preconnect (in ) handles loading --- */ /* ========================================================= 1. DESIGN TOKENS ========================================================= */ :root { /* Primary — Header & Footer backgrounds */ --color-slate: #3e343d; --color-brown: #493821; /* Accents — borders, secondary buttons, UI elements */ --color-gold: #c29952; --color-gold-muted: #dfb55d; --color-bronze: #7c6138; --color-tan: #cbaf7d; /* Highlights — CTA buttons & hover states */ --color-champagne: #f1d780; --color-ochre: #a3793b; /* Body — light, welcoming */ --color-body-bg: #faf8f5; --color-surface: #ffffff; --color-surface-warm: #f5f0e8; --color-text: #2a2228; --color-text-muted: #5a4f58; --color-border: #e0d4c0; --color-border-dark: #cbaf7d; /* Status */ --color-success: #2e7d32; --color-error: #c62828; /* Typography */ --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* Type scale (fluid) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: clamp(1.75rem, 3vw, 2.25rem); --text-4xl: clamp(2rem, 4vw, 3rem); --text-hero: clamp(2.25rem, 6vw, 4rem); /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06); --shadow-lg: 0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06); --shadow-xl: 0 20px 50px rgba(0,0,0,0.15); /* Transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --transition: 250ms var(--ease-out); --transition-fast: 150ms var(--ease-out); /* Layout */ --container-max: 1200px; --container-pad: var(--space-6); --header-height: 72px; } /* ========================================================= 2. CSS RESET & BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--color-text); background-color: var(--color-body-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.2; font-weight: 700; color: var(--color-text); } /* ========================================================= 3. ACCESSIBILITY UTILITIES ========================================================= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100%; left: var(--space-4); z-index: 9999; padding: var(--space-3) var(--space-6); background: var(--color-champagne); color: var(--color-text); font-weight: 600; border-radius: var(--radius-md); transition: top var(--transition-fast); } .skip-link:focus { top: var(--space-4); outline: 3px solid var(--color-slate); outline-offset: 2px; } *:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; border-radius: var(--radius-sm); } /* ========================================================= 4. LAYOUT UTILITIES ========================================================= */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .section { padding-block: var(--space-20); } .section--alt { background-color: var(--color-surface-warm); } .section__header { text-align: center; max-width: 700px; margin-inline: auto; margin-bottom: var(--space-12); } .section__eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ochre); margin-bottom: var(--space-3); } .section__title { font-size: var(--text-3xl); margin-bottom: var(--space-4); color: var(--color-text); } .section__desc { font-size: var(--text-lg); color: var(--color-text-muted); line-height: 1.7; } /* ========================================================= 5. BUTTONS ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.875rem 1.75rem; font-size: var(--text-base); font-weight: 600; border-radius: var(--radius-md); border: 2px solid transparent; transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition-fast), box-shadow var(--transition); min-height: 48px; min-width: 120px; cursor: pointer; white-space: nowrap; text-decoration: none; line-height: 1; } .btn:active { transform: translateY(1px); } /* Primary CTA — Champagne background, Dark Slate text Default: #f1d780 bg + #3e343d text = ~10.5:1 ✓ WCAG AAA Hover: #493821 bg + #f1d780 text = ~7.9:1 ✓ WCAG AAA Previous hover (#a3793b bg + #fff text = 3.87:1) failed AA — fixed. */ .btn-primary { background-color: var(--color-champagne); color: var(--color-slate); border-color: var(--color-champagne); } .btn-primary:hover, .btn-primary:focus-visible { background-color: var(--color-brown); border-color: var(--color-brown); color: var(--color-champagne); box-shadow: var(--shadow-md); } /* Secondary — Gold border, transparent bg */ .btn-secondary { background-color: transparent; color: var(--color-gold); border-color: var(--color-gold); } .btn-secondary:hover, .btn-secondary:focus-visible { background-color: var(--color-gold); color: var(--color-text); box-shadow: var(--shadow-sm); } /* Ghost — on dark backgrounds */ .btn-ghost { background-color: transparent; color: #fff; border-color: rgba(255,255,255,0.5); } .btn-ghost:hover, .btn-ghost:focus-visible { background-color: rgba(255,255,255,0.15); border-color: #fff; } /* Full width */ .btn--full { width: 100%; } /* Small */ .btn--sm { padding: 0.625rem 1.25rem; font-size: var(--text-sm); min-height: 40px; } /* ========================================================= 6. STICKY HEADER ========================================================= */ .header { position: sticky; top: 0; z-index: 500; background-color: var(--color-slate); height: var(--header-height); display: flex; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.25); transition: background-color var(--transition); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); width: 100%; } .header__logo { flex-shrink: 0; display: flex; align-items: center; text-decoration: none; } .header__logo img { height: 48px; width: auto; } .header__logo-text { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: #fff; line-height: 1.1; } .header__logo-text span { display: block; font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-tan); font-family: var(--font-body); } /* Desktop nav handled by .nav-menu / .nav-link in Section 21c */ .header__actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; /* order intentionally omitted — DOM order (logo → phone → hamburger) is correct on mobile */ } .header__phone { display: flex; align-items: center; gap: var(--space-2); color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; transition: color var(--transition); min-height: 44px; padding: 0 var(--space-2); border-radius: var(--radius-sm); } .header__phone:hover, .header__phone:focus-visible { color: var(--color-champagne); outline: 2px solid var(--color-champagne); outline-offset: 2px; } /* .header__phone svg — removed: icon stripped from header HTML */ .header__phone-text { display: none; } @media (max-width: 479px) { /* Prevent header overflow at 320px: tighten gap and reduce logo flex rigidity */ .header__inner { gap: var(--space-3); } .header__logo { flex-shrink: 1; } .header__logo img { height: 40px; } /* Hide phone link below 480px — no text, no icon; nothing visible to show */ .header__phone { display: none; } } @media (min-width: 480px) { .header__phone-text { display: inline; } } .header__book-btn { /* Visible at all widths — sole header CTA on mobile (nav-cta removed from drawer) */ display: inline-flex; flex-shrink: 0; padding: 0.625rem 1.25rem; font-size: var(--text-sm); min-height: 40px; min-width: auto; } @media (max-width: 479px) { /* Tighter padding at 320px so logo + Book Now + hamburger fit comfortably */ .header__book-btn { padding: 0.5rem 0.875rem; font-size: 0.75rem; } } /* Mobile nav handled by .nav-toggle / .nav-menu in Section 21 */ /* ========================================================= 7. HERO SECTION ========================================================= */ .hero { position: relative; min-height: calc(100svh - var(--header-height)); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: var(--space-16) 0 var(--space-10); } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( 160deg, rgba(62, 52, 61, 0.75) 0%, rgba(73, 56, 33, 0.65) 60%, rgba(0,0,0,0.55) 100% ); z-index: 1; } .hero__content { position: relative; z-index: 2; text-align: center; max-width: 780px; padding-inline: var(--space-6); } .hero__eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-champagne); margin-bottom: var(--space-4); } .hero__title { font-size: var(--text-hero); font-family: var(--font-heading); font-weight: 700; color: #fff; line-height: 1.15; text-shadow: 0 2px 20px rgba(0,0,0,0.3); margin-bottom: var(--space-5); } .hero__title em { font-style: italic; color: var(--color-champagne); } .hero__tagline { font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255,255,255,0.88); margin-bottom: var(--space-10); line-height: 1.6; } /* --- Booking Widget (Step 1) --- */ .booking-widget { background: rgba(255,255,255,0.97); backdrop-filter: blur(8px); border-radius: var(--radius-xl); padding: var(--space-6) var(--space-6); box-shadow: var(--shadow-xl); width: 100%; max-width: 720px; margin-inline: auto; } .booking-widget__title { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-text); margin-bottom: var(--space-5); font-weight: 700; } /* .booking-widget__fields layout is controlled by Section 21g alias rules below */ .field { display: flex; flex-direction: column; gap: var(--space-1); } .field label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } .field input, .field select { padding: 0.75rem 1rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-base); font-family: var(--font-body); color: var(--color-text); background: var(--color-surface); min-height: 48px; transition: border-color var(--transition), box-shadow var(--transition); width: 100%; } .field input:focus, .field select:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(194,153,82,0.15); } /* .booking-widget__submit / __btn controlled by Section 21g alias rules */ /* ========================================================= 8. ROOMS SECTION ========================================================= */ .rooms-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } .room-card { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); transition: transform var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; } .room-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } /* .room-card__img removed — live rules use .room-card__media (below) */ .room-card__badge { position: absolute; top: var(--space-3); right: var(--space-3); background: var(--color-champagne); color: var(--color-text); font-size: var(--text-xs); font-weight: 700; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); } .room-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; } /* .room-card__name removed — live rule uses .room-card__title (below) */ .room-card__price { font-size: var(--text-lg); font-weight: 700; color: var(--color-gold); } .room-card__price span { font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); } .room-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; } /* .amenity-tag / .room-card__cta removed — live rules below use .room-card__amenities li / .room-card__footer */ /* ── HTML uses these class names — aliases for original CSS names ── */ .room-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; flex-shrink: 0; } .room-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); } .room-card:hover .room-card__media img { transform: scale(1.04); } .room-card__title { font-size: var(--text-xl); font-family: var(--font-heading); margin: 0; } .room-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .room-card__amenities { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; } .room-card__amenities li { display: inline-block; font-size: var(--text-xs); padding: var(--space-1) var(--space-3); background: var(--color-surface-warm); color: var(--color-bronze); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-weight: 500; margin: var(--space-1) var(--space-1) 0 0; } /* ── Badge variants ── */ .room-card__badge--suite { background: var(--color-slate); color: var(--color-champagne); text-transform: uppercase; letter-spacing: 0.06em; } .room-card__badge--popular { background: var(--color-gold); color: var(--color-brown); } /* ── Featured card wrapper ── */ .rooms-wrapper { display: flex; flex-direction: column; gap: var(--space-8); } /* ── Safari Suite hero card helpers ── */ .suite-eyebrow { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-gold); margin: 0; } .room-card__title--lg { font-size: var(--text-3xl); line-height: 1.2; } /* ========================================================= 9. DINING SECTION ========================================================= */ .dining-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; } .dining-gallery { border-radius: var(--radius-lg); overflow: hidden; } .dining-gallery__main { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg); } .dining-gallery__thumb { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; } .dining-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; } .dining-content { display: flex; flex-direction: column; gap: var(--space-6); } .dining-content__eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ochre); } .dining-content__title { font-size: var(--text-3xl); } .dining-content__desc { color: var(--color-text-muted); line-height: 1.75; } .dining-highlights { display: flex; flex-direction: column; gap: var(--space-3); } .dining-highlight { display: flex; gap: var(--space-3); align-items: flex-start; } .dining-highlight__icon { flex-shrink: 0; width: 36px; height: 36px; background: var(--color-surface-warm); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .dining-highlight__text strong { display: block; font-size: var(--text-sm); font-weight: 600; } .dining-highlight__text span { font-size: var(--text-sm); color: var(--color-text-muted); } /* ========================================================= 10. MEETINGS SECTION ========================================================= */ .meetings-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; } /* .meetings-content / .meetings-gallery / .meetings-gallery img — canonical rules live in Section 21j (below); these early drafts are superseded. Tombstoned to avoid cascade confusion. */ /* .meetings-content { display: flex; flex-direction: column; gap: var(--space-6); } */ /* .meetings-gallery { border-radius: var(--radius-lg); overflow: hidden; } */ /* .meetings-gallery img { … aspect-ratio: 16/9; object-fit: cover; … } */ /* .meetings-img — orphaned selector (HTML uses .meetings-gallery); kept as tombstone */ /* .meetings-img { … } */ /* .meetings-img img { … } */ /* Vertical bulleted amenity list — AEO-friendly plain