/* ============================================================= THABA LEGAE GUEST LODGE — CSS DESIGN SYSTEM Warm African Luxury · Rustic & Earthy · Sleek & Modern ============================================================= TABLE OF CONTENTS ------------------------------------------------- 01. Design Tokens (CSS Variables) 02. Font Imports 03. Reset & Base 04. Typography Scale 05. Global Utilities 06. Buttons & CTAs 07. Preloader 08. Sub-Header Info Bar 09. Main Navigation 09.1 icons colors 10. Page Banners / Hero 11. Video Embed 12. Gallery — 4-col grid + filmstrip lightbox 13. Footer 14. Responsive (core) 15. Property Listing Template 16. Packages / Promotions Page 17. About Page 18. Contact Page 19. Booking Page 20. Homepage — extracted inline styles ============================================================= */ /* ------------------------------------------------------------- 01. DESIGN TOKENS ------------------------------------------------------------- */ :root { /* Palette */ --cream-light: #FDF1E7; --cream: #F9F4EF; --cream-dark: #EDE4D8; --stone: #C8B89A; --amber: #D9780A; --amber-hover: #B8620A; --charcoal: #1C1916; --charcoal-mid: #2E2A26; --charcoal-soft: #4A453F; --white: #FFFFFF; --text-primary: #1C1916; --text-secondary: #6B6157; --text-muted: #9A9088; --border: #DDD5C8; --border-light: #EDE4D8; /* Typography */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', sans-serif; /* Font weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; /* Spacing scale */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; --space-xxl: 10rem; /* Transitions */ --transition-fast: 0.2s ease; --transition-base: 0.35s ease; --transition-slow: 0.6s cubic-bezier(0.22, 0.8, 0.36, 1); /* Shadows */ --shadow-sm: 0 2px 12px rgba(28, 25, 22, 0.06); --shadow-md: 0 8px 32px rgba(28, 25, 22, 0.10); --shadow-lg: 0 20px 60px rgba(28, 25, 22, 0.14); } /* ------------------------------------------------------------- 02. FONT IMPORTS @import ensures fonts load on every HTML page that links this stylesheet, even if the tag is absent from . ------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap'); /* ------------------------------------------------------------- 03. RESET & BASE ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Prevent iOS/Android font inflation on orientation change */ -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-body); font-weight: var(--fw-light); font-size: 1rem; line-height: 1.75; color: var(--charcoal-soft); background-color: var(--white); overflow-x: hidden; /* Prevent iOS callout menu on long-press */ -webkit-touch-callout: none; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; transition: color var(--transition-base); /* Remove tap highlight flash on iOS and Android */ -webkit-tap-highlight-color: transparent; } img { display: block; width: 100%; height: auto; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-light); color: var(--text-primary); line-height: 1.2; margin: 0; } p { font-family: var(--font-body); font-weight: var(--fw-light); font-size: 0.95rem; line-height: 1.85; color: var(--charcoal-soft); } ::selection { background: var(--amber); color: var(--white); } /* Strip default iOS/Android styling from form controls */ input, textarea, select, button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; } /* Prevent iOS auto-zoom on input focus — font-size must be >= 16px */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], textarea, select { font-size: 16px; } /* ------------------------------------------------------------- 04. TYPOGRAPHY SCALE ------------------------------------------------------------- */ /* Eyebrow — small uppercase label above headings */ .t-eyebrow { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); display: block; } /* Section h2 heading */ .t-heading { font-family: var(--font-display); font-weight: var(--fw-light); font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: 0.01em; line-height: 1.2; } /* ------------------------------------------------------------- 05. GLOBAL UTILITIES ------------------------------------------------------------- */ .section { padding: var(--space-xl) 0; } .section--cream { background-color: var(--cream); } .section--white { background-color: var(--white); } /* Two-column split layouts */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; } .split--wide-right { grid-template-columns: 1fr 1.4fr; } /* Section heading block */ .section-heading { margin-bottom: var(--space-md); } .section-heading h2 { font-family: var(--font-display); font-weight: var(--fw-light); font-size: clamp(2rem, 4vw, 3.2rem); color: var(--text-primary); line-height: 1.2; margin-top: 0.5rem; } .section-heading h2 em { font-style: italic; color: var(--amber); } .section-heading h6 { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); } /* Homepage welcome split — left image column */ .left-image { overflow: hidden; } .left-image img { width: 100%; height: 460px; object-fit: cover; display: block; } /* Homepage welcome split — right content column */ .services-content { display: flex; flex-direction: column; gap: 1.2rem; } /* Homepage "featured" section wrapper */ .featured { padding: var(--space-xl) 0; } /* Homepage full-width section utility */ .full-width { width: 100%; } /* Feature list used in AccomodationDetails, ConferenceDetails, OrganizedEventsDetails */ .chalets-feature { margin-top: var(--space-md); } .feature-list li { font-family: var(--font-body); font-weight: var(--fw-light); font-size: 0.9rem; color: var(--charcoal-soft); padding: 0.45rem 0; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; gap: 0.9rem; } .feature-list li:last-child { border-bottom: none; } .feature-list li i { color: var(--amber); font-size: 1.1rem; flex-shrink: 0; } /* widget-reviews section wrapper (index.html — inline bg overrides) */ .widget-reviews { padding: var(--space-xl) 0; background: var(--cream); } /* ------------------------------------------------------------- 06. BUTTONS & CTAs ------------------------------------------------------------- */ /* Base outlined button */ .btn { display: inline-block; font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.9rem 2.4rem; border: 1px solid var(--charcoal); color: var(--charcoal); background: transparent; transition: all var(--transition-base); cursor: pointer; /* iOS/Android minimum tap target */ min-height: 44px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .btn:hover { background: var(--charcoal); color: var(--cream-light); } /* Filled (dark) variant — used on all CTA links */ .btn--filled { background: var(--charcoal); color: var(--cream-light); border-color: var(--charcoal); min-height: 44px; display: inline-flex; align-items: center; margin-top: 0.4rem; } .btn--filled:hover { background: var(--charcoal-mid); border-color: var(--charcoal-mid); } /* Icon-only booking button in desktop nav */ .btn-icon-nav { display: inline-flex; align-items: center; justify-content: center; /* Increased to 44px for iOS/Android tap target compliance */ width: 44px; height: 44px; border: 1px solid var(--border); color: var(--text-primary); transition: all var(--transition-base); margin-left: 0.5rem; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .btn-icon-nav:hover { border-color: var(--amber); color: var(--amber); } .btn-icon-nav i { font-size: 0.9rem; } /* Book Now CTA link in booking page (amber text) */ .btn-amber-text { color: var(--amber); transition: color var(--transition-fast); -webkit-tap-highlight-color: transparent; } .btn-amber-text:hover { color: var(--amber-hover); } /* ------------------------------------------------------------- 07. PRELOADER ------------------------------------------------------------- */ .js-preloader { position: fixed; /* Use longhand instead of inset shorthand for Android < 87 / iOS < 14.5 */ top: 0; right: 0; bottom: 0; left: 0; background: var(--charcoal); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0.4s ease; } .js-preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; } @keyframes dot { 50% { transform: translateX(96px); } } @keyframes dots { 50% { transform: translateX(-31px); } } .preloader-inner { position: relative; width: 142px; height: 40px; } .preloader-inner .dot { position: absolute; width: 12px; height: 12px; top: 14px; left: 15px; background: var(--amber); border-radius: 50%; animation: dot 2.8s infinite; } .preloader-inner .dots { margin-top: 14px; margin-left: 31px; animation: dots 2.8s infinite; } .preloader-inner .dots span { display: block; float: left; width: 12px; height: 12px; margin-left: 16px; background: var(--stone); border-radius: 50%; } /* ------------------------------------------------------------- 08. SUB-HEADER INFO BAR ------------------------------------------------------------- */ .sub-header { background: var(--charcoal); padding: 0.55rem 0; border-bottom: 1px solid rgba(200, 184, 154, 0.14); } .sub-header ul.info { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 2.5rem; list-style: none; } .sub-header ul.info li { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; } .sub-header ul.info li i { color: var(--amber); font-size: 0.78rem; } .sub-header ul.info li a { font-family: var(--font-body); font-weight: var(--fw-light); font-size: 0.78rem; letter-spacing: 0.05em; color: var(--stone); transition: color var(--transition-fast); } .sub-header ul.info li a:hover { color: var(--cream-light); } @media (max-width: 991px) { .sub-header { display: none; } } /* ------------------------------------------------------------- 09. MAIN NAVIGATION ------------------------------------------------------------- */ .header-area { position: sticky; top: 0; z-index: 1000; background: var(--white); padding: 1.2rem 0; border-bottom: 1px solid var(--border-light); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .header-area.scrolled { padding: 0.65rem 0; background: rgba(255, 255, 255, 0.97); box-shadow: var(--shadow-sm); /* Both prefixed and unprefixed for full iOS/macOS/Android support */ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .header-area .main-nav { display: flex; align-items: center; justify-content: space-between; position: relative; } .logo-img { max-height: 4.8rem; width: auto; transition: max-height 0.4s ease; } .header-area.scrolled .logo-img { max-height: 3rem; } /* Desktop nav */ .nav { display: flex; align-items: center; gap: 0.1rem; list-style: none; } .nav li a { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-primary); padding: 0.5rem 0.85rem; position: relative; transition: color var(--transition-base); /* Adequate touch target height */ min-height: 44px; display: inline-flex; align-items: center; -webkit-tap-highlight-color: transparent; } .nav li a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: var(--amber); transition: width var(--transition-base), left var(--transition-base); } .nav li a:hover::after, .nav li a.active::after { width: 60%; left: 20%; } .nav li a:hover, .nav li a.active { color: var(--amber); } /* Hamburger */ .menu-trigger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 0.3rem; /* 44x44 minimum tap target for iOS/Android */ min-width: 44px; min-height: 44px; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .menu-trigger span { display: block; width: 22px; height: 1.5px; background: var(--text-primary); transition: all 0.35s ease; } .menu-trigger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .menu-trigger.active span:nth-child(2) { opacity: 0; } .menu-trigger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile menu */ .mobile-nav { display: none; flex-direction: column; background: var(--white); position: absolute; top: 100%; left: 0; width: 100%; border-top: 1px solid var(--border-light); box-shadow: var(--shadow-md); z-index: 999; padding: 0.8rem 0 1.5rem; /* Smooth momentum scrolling on iOS */ -webkit-overflow-scrolling: touch; } .mobile-nav.active { display: flex !important; } .mobile-nav li a { display: flex; align-items: center; padding: 0.85rem 2rem; font-family: var(--font-body); font-weight: var(--fw-regular); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-primary); border-bottom: 1px solid var(--border-light); transition: all var(--transition-fast); min-height: 44px; -webkit-tap-highlight-color: transparent; } .mobile-nav li a:hover, .mobile-nav li a.active { color: var(--amber); background: var(--cream); } /* Mobile Book Now CTA */ .mobile-nav .btn-book-mobile { display: flex; align-items: center; justify-content: center; margin: 1.2rem 2rem 0; padding: 0.85rem 1.5rem; font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; color: var(--white); background: var(--charcoal); transition: background var(--transition-base); min-height: 44px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .mobile-nav .btn-book-mobile:hover { background: var(--amber); } body.menu-open { overflow: hidden; } @media (max-width: 991px) { .menu-trigger { display: flex; } .main-nav .nav { display: none !important; } } /* ------------------------------------------------------------- 09.1 icons colors ------------------------------------------------------------- */ /* Change all icons to your desired color */ i, .icon, [class^="icon-"], [class*=" icon-"], .fa, .fas, .far, .fab { color: #your-color-here; /* Replace with your theme color */ } /* Change icon color on hover */ i:hover, .icon:hover, [class^="icon-"]:hover, [class*=" icon-"]:hover { color: #your-hover-color-here; /* Replace with hover color */ } /* If you only want to change specific icons */ .specific-icon-class { color: #your-color-here; } /* For Font Awesome icons specifically */ .fa, .fas { color: #your-color-here; } /* For specific sections */ .social-icons i, .feature-icons i, .service-icons i { color: #your-color-here; } /* ------------------------------------------------------------- 10. PAGE BANNERS / HERO ------------------------------------------------------------- */ .main-banner { position: relative; overflow: hidden; } .main-banner .item { height: 92vh; min-height: 560px; max-height: 1080px; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } .main-banner .item::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(28, 25, 22, 0.42); z-index: 1; } /* Video slide wrapper */ .video-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: var(--charcoal); } .banner-video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block !important; opacity: 0; transition: opacity 0.8s ease; } .banner-video.loaded { opacity: 1; } /* Hero text block */ .header-text { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; padding: 2rem 1.5rem; max-width: 75%; } .header-text h2, .header-text h3 { font-family: var(--font-display); font-weight: var(--fw-light); color: var(--white); text-shadow: 0 2px 20px rgba(28, 25, 22, 0.5); margin-bottom: 1.5rem; } .header-text h2 { font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: 0.03em; } .header-text h3 { font-size: clamp(1.8rem, 4.5vw, 3.5rem); letter-spacing: 0.02em; } /* Slide-in animation (Owl active class triggers it) */ .header-text > * { opacity: 0; transform: translateY(28px); transition: all 1s cubic-bezier(0.22, 0.8, 0.36, 1); } .owl-item.active .header-text > * { opacity: 1; transform: translateY(0); } .header-text .t-eyebrow { transition-delay: 0.2s; } .header-text h2, .header-text h3 { transition-delay: 0.4s; } .header-text .btn { transition-delay: 0.6s; } /* Owl Carousel controls — classes injected by Owl JS */ .owl-nav button { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; background: rgba(253, 241, 231, 0.10) !important; border: 1px solid rgba(253, 241, 231, 0.28) !important; color: var(--white) !important; font-size: 1.1rem !important; transition: all var(--transition-base); /* Adequate touch target */ min-width: 44px; min-height: 44px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .owl-nav button:hover { background: rgba(217, 120, 10, 0.55) !important; border-color: var(--amber) !important; } .owl-prev { left: 28px; } .owl-next { right: 28px; } .owl-dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 8px; align-items: center; } .owl-dots .owl-dot { width: 22px; height: 1.5px; background: rgba(253, 241, 231, 0.35) !important; border-radius: 0 !important; transition: all var(--transition-base); /* Enlarged invisible tap area without affecting visual size */ padding: 10px 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .owl-dots .owl-dot.active { width: 44px; background: var(--amber) !important; } /* Inner page heading banners */ .page-heading { background-position: center; background-repeat: no-repeat; background-size: cover; padding: 120px 0; text-align: center; position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; } .page-heading::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(28, 25, 22, 0.48); } .page-heading .container { position: relative; z-index: 1; } .page-heading .breadcrumb { display: inline-block; font-family: var(--font-body); font-weight: var(--fw-regular); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone); margin-bottom: 1rem; } .page-heading .breadcrumb a { color: var(--stone); transition: color var(--transition-fast); } .page-heading .breadcrumb a:hover { color: var(--cream-light); } .page-heading h3 { font-family: var(--font-display); font-weight: var(--fw-light); font-size: clamp(2rem, 5vw, 3.8rem); color: var(--white); letter-spacing: 0.04em; } /* Background images per page */ .accommodation-page-heading { background-image: url(../images/accommodation-heading-bg.jpg); } .functions-page-heading { background-image: url(../images/functions-heading-bg.jpg); } .organizedevents-page-heading { background-image: url(../images/events-heading-bg.jpg); } /* ------------------------------------------------------------- 11. VIDEO EMBED ------------------------------------------------------------- */ /* .video is used on index.html — background image set inline per page */ .video { background-repeat: no-repeat; background-size: cover; background-position: center; padding: var(--space-xl) 0; position: relative; } .video::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(28, 25, 22, 0.55); } .video .container { position: relative; z-index: 1; } .video .section-heading h2 { color: var(--white); } .video-frame { position: relative; max-width: 680px; margin: 0 auto; } .video-frame img { width: 100%; display: block; } .video-frame a { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border: 1px solid rgba(253, 241, 231, 0.55); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1rem; transition: all var(--transition-base); /* Adequate touch target */ min-width: 44px; min-height: 44px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .video-frame a:hover { background: var(--amber); border-color: var(--amber); } /* ------------------------------------------------------------- 12. GALLERY — 4-col grid + filmstrip lightbox Moved from gallery.html