/* ========================================================================== Sattva Courtyard — Global Stylesheet Mobile-first, lightweight, no CSS framework dependency. Sections: 01. Design tokens 02. Reset & base 03. Typography & utilities 04. Buttons & CTAs 05. Header / navigation 06. Hero & slider 07. Lead forms 08. Cards, grids & tables 09. Media placeholders & gallery/lightbox 10. Timeline, FAQ, breadcrumbs 11. Footer, sticky mobile bar, modal 12. Responsive breakpoints 13. Accessibility & motion preferences ========================================================================== */ /* ---------------------------------------------------------------- 01. Design tokens — edit here to re-skin the entire website ---------------------------------------------------------------- */ :root { --primary: #0f2a24; /* Deep emerald — headers, footer, headings */ --primary-700: #16382f; --primary-500: #1f4d41; --secondary: #2f5d52; /* Supporting green */ --accent: #b48b45; /* Muted antique gold — CTAs, rules */ --accent-600: #9b7634; --accent-100: #f3ead9; --text: #1c1f1e; /* Body copy */ --muted: #5f6b66; /* Secondary copy */ --light: #faf8f4; /* Warm off-white page ground */ --light-2: #f2efe8; /* Alternating section ground */ --white: #ffffff; --border: #e3ded3; --border-strong: #cfc7b6; --success: #1c7a52; --error: #b3261e; --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --container: 1200px; --radius: 4px; --radius-lg: 8px; --shadow-sm: 0 1px 2px rgba(15, 42, 36, .06), 0 2px 8px rgba(15, 42, 36, .05); --shadow-md: 0 4px 16px rgba(15, 42, 36, .08); --shadow-lg: 0 12px 40px rgba(15, 42, 36, .12); --space-section: 40px; /* x2 = 80px between sections on mobile */ --header-h: 64px; --transition: 220ms cubic-bezier(.4, 0, .2, 1); } /* ---------------------------------------------------------------- 02. Reset & base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); /* The closed off-canvas nav is position:fixed and parked off-screen to the right; body overflow cannot clip a fixed element, so the root must. Use `clip` rather than `hidden` — hidden would make a scroll container and break the sticky header. */ overflow-x: clip; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--text); background: var(--light); overflow-x: clip; -webkit-font-smoothing: antialiased; } img, svg, iframe { max-width: 100%; } img { height: auto; display: block; } a { color: var(--primary-500); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-600); } ul, ol { padding-left: 1.15rem; } table { border-collapse: collapse; width: 100%; } figure { margin: 0; } hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; } @supports not (overflow: clip) { html, body { overflow-x: hidden; } } /* ---------------------------------------------------------------- 03. Typography & layout utilities ---------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--primary); font-weight: 600; line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.01em; } h1 { font-size: clamp(2rem, 6vw, 3.1rem); } h2 { font-size: clamp(1.6rem, 4.6vw, 2.35rem); } h3 { font-size: clamp(1.2rem, 3.2vw, 1.45rem); } h4 { font-size: 1.075rem; font-family: var(--font-body); font-weight: 600; } p { margin: 0 0 1.05rem; } p:last-child { margin-bottom: 0; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 18px; } .container--narrow { max-width: 860px; } .section { padding-block: var(--space-section); } .section--tight { padding-block: 30px; } .section--alt { background: var(--light-2); } .section--dark { background: var(--primary); color: #dfe7e3; } .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); } .section--dark a { color: var(--accent-100); } .section-head { margin-bottom: 26px; } .section-head--center { text-align: center; max-width: 760px; margin-inline: auto; } .eyebrow { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-600); margin-bottom: .55rem; } .section--dark .eyebrow { color: var(--accent); } .lede { font-size: 1.06rem; color: var(--muted); } .section--dark .lede { color: #c3d0cb; } .muted { color: var(--muted); } .small { font-size: .86rem; } .tiny { font-size: .78rem; } .center { text-align: center; } .rule { width: 54px; height: 2px; background: var(--accent); margin: 0 0 18px; border: 0; } .section-head--center .rule { margin-inline: auto; } .stack > * + * { margin-top: 14px; } .prose p { color: #33403b; } .prose h3 { margin-top: 1.6em; } /* First branded mention in the body copy — bold, linked to the site root. */ .brand-link { color: inherit; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--accent); transition: color var(--transition), border-color var(--transition); } .brand-link:hover, .brand-link:focus-visible { color: var(--accent-600); } /* On the dark page-hero band the inherited colour is white, so only the underline needs adjusting for contrast. */ .page-hero .brand-link { color: #fff; border-bottom-color: rgba(180, 139, 69, .85); } .page-hero .brand-link:hover, .page-hero .brand-link:focus-visible { color: var(--accent); } /* Outbound authority links (Wikipedia, BIAL, BMRCL) */ .ext-link { color: inherit; font-weight: 700; text-decoration: none; border-bottom: 1px dotted var(--accent); transition: color var(--transition), border-color var(--transition); } .ext-link:hover, .ext-link:focus-visible { color: var(--accent-600); border-bottom-style: solid; } .page-hero .ext-link, .section--dark .ext-link { color: #fff; border-bottom-color: rgba(180, 139, 69, .85); } .page-hero .ext-link:hover, .section--dark .ext-link:hover { color: var(--accent); } /* One-line factual note under the H1, carrying an authority link for a term the page does not otherwise mention. */ .hero-note { margin-top: 16px; max-width: 740px; font-size: .84rem; line-height: 1.6; opacity: .92; } /* Disclaimer / note strip */ .note { border-left: 3px solid var(--accent); background: var(--accent-100); padding: 14px 16px; border-radius: 0 var(--radius) var(--radius) 0; font-size: .9rem; color: #4a3d25; } .note--plain { background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--accent); color: var(--muted); } .badge { display: inline-flex; align-items: center; gap: 7px; background: var(--accent-100); color: var(--accent-600); border: 1px solid #e6d6b4; border-radius: 100px; padding: 5px 13px; font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; } .badge--light { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; } .badge--status { background: rgba(180, 139, 69, .16); border-color: rgba(180, 139, 69, .45); color: var(--accent); } /* ---------------------------------------------------------------- 04. Buttons & CTAs ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; /* thumb-friendly tap target */ padding: 12px 26px; border: 1px solid transparent; border-radius: var(--radius); font-family: var(--font-body); font-size: .93rem; font-weight: 600; letter-spacing: .02em; text-align: center; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-600); border-color: var(--accent-600); color: #fff; } .btn--dark { background: var(--primary); border-color: var(--primary); color: #fff; } .btn--dark:hover { background: var(--primary-700); color: #fff; } .btn--outline { background: transparent; border-color: var(--primary); color: var(--primary); } .btn--outline:hover { background: var(--primary); color: #fff; } .btn--ghost-light { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .55); color: #fff; backdrop-filter: blur(2px); } .btn--ghost-light:hover { background: #fff; color: var(--primary); } .btn--wa { background: #1fa855; border-color: #1fa855; color: #fff; } .btn--wa:hover { background: #17843f; color: #fff; } .btn--block { width: 100%; } .btn--sm { min-height: 40px; padding: 8px 18px; font-size: .85rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .btn-row--center { justify-content: center; } .cta-band { background: linear-gradient(115deg, rgba(15, 42, 36, .95) 0%, rgba(31, 77, 65, .92) 100%), repeating-linear-gradient(45deg, #0f2a24 0 10px, #123029 10px 20px); color: #fff; border-radius: var(--radius-lg); padding: 34px 24px; text-align: center; } .cta-band h2, .cta-band h3 { color: #fff; margin-bottom: .4em; } .cta-band p { color: #c6d3ce; max-width: 640px; margin-inline: auto; } .cta-band .btn-row { margin-top: 20px; justify-content: center; } /* ---------------------------------------------------------------- 05. Header & navigation ---------------------------------------------------------------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--accent); color: #fff; padding: 12px 20px; font-weight: 600; } .skip-link:focus { left: 0; color: #fff; } .topbar { display: none; background: var(--primary); color: #b9c8c2; font-size: .8rem; } .topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; } .topbar a { color: #dfe7e3; } .topbar a:hover { color: var(--accent); } .topbar__meta { display: flex; gap: 18px; align-items: center; } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .site-header.is-scrolled { box-shadow: var(--shadow-sm); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: var(--header-h); } .brand { display: flex; align-items: center; gap: 11px; color: var(--primary); flex-shrink: 0; } .brand:hover { color: var(--primary); } .brand__mark { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; background: var(--primary); color: var(--accent); font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; border-radius: 3px; letter-spacing: .02em; } .brand__name { font-family: var(--font-display); font-size: 1.22rem; font-weight: 700; line-height: 1.1; display: block; } .brand__sub { display: block; font-size: .63rem; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 11px; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; } .nav-toggle span { display: block; height: 2px; background: var(--primary); transition: transform var(--transition), opacity var(--transition); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .header-actions { display: flex; align-items: center; gap: 10px; } .header-actions .btn--primary { display: none; } .main-nav { position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); background: var(--white); border-left: 1px solid var(--border); padding: 20px 20px 40px; transform: translateX(100%); transition: transform var(--transition); overflow-y: auto; z-index: 130; visibility: hidden; } .main-nav.is-open { transform: translateX(0); visibility: visible; } .main-nav__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--border); } .main-nav__title { font-family: var(--font-display); font-size: 1.05rem; color: var(--primary); font-weight: 700; } .nav-close { width: 40px; height: 40px; border: 1px solid var(--border); background: transparent; border-radius: var(--radius); font-size: 1.3rem; line-height: 1; color: var(--primary); cursor: pointer; } .main-nav ul { list-style: none; margin: 0; padding: 0; } .main-nav li + li { border-top: 1px solid var(--border); } .main-nav a { display: block; padding: 13px 2px; color: var(--primary); font-weight: 500; font-size: .97rem; } .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--accent-600); } .main-nav .btn { margin-top: 18px; } .nav-backdrop { position: fixed; inset: 0; background: rgba(12, 26, 22, .5); opacity: 0; visibility: hidden; transition: opacity var(--transition); z-index: 120; } .nav-backdrop.is-visible { opacity: 1; visibility: visible; } body.nav-open { overflow: hidden; } /* ---------------------------------------------------------------- 06. Hero & slider ---------------------------------------------------------------- */ .hero { position: relative; background: var(--primary); color: #fff; overflow: hidden; } .hero__slider { position: relative; min-height: 540px; display: grid; } /* Slides share one grid cell. The incoming slide fades in ON TOP of the outgoing one (is-prev), so the cross-fade never dips to the background. */ .hero__slide { grid-area: 1 / 1; display: flex; align-items: center; opacity: 0; visibility: hidden; z-index: 0; transition: opacity 700ms ease; padding-block: 54px 46px; } .hero__slide.is-prev { opacity: 1; visibility: visible; z-index: 1; transition: none; } .hero__slide.is-active { opacity: 1; visibility: visible; z-index: 2; } /* Project photography fills each slide; the ::before layer is the legibility scrim that keeps white text readable over it. Slides share one grid cell so swapping them causes zero layout shift. */ .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .hero__slide::before { content: ""; position: absolute; inset: 0; z-index: 1; /* Strong enough on the left for white text to pass contrast, clearing to almost nothing on the right so the render stays visible. */ background: linear-gradient(to right, rgba(6, 18, 15, .9) 0%, rgba(7, 21, 18, .82) 26%, rgba(8, 24, 20, .55) 44%, rgba(9, 26, 22, .22) 62%, rgba(9, 26, 22, .06) 80%, rgba(9, 26, 22, .02) 100%), linear-gradient(to top, rgba(6, 18, 15, .34) 0%, transparent 36%); } @media (max-width: 899px) { /* On phones the copy sits over the whole image, so the scrim is even. */ .hero__slide::before { background: linear-gradient(180deg, rgba(8, 22, 18, .72) 0%, rgba(8, 22, 18, .82) 55%, rgba(8, 22, 18, .92) 100%); } } /* Faint architectural grid for depth (pure CSS, zero extra requests) */ .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 96px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 96px); z-index: 3; } .hero__inner { position: relative; z-index: 4; width: 100%; } /* Hero lead form: white card floating over the imagery */ .hero__form .lead-card { padding: 18px 18px 20px; } .hero__form .lead-card__head { margin-bottom: 12px; } .hero__form .lead-card__head h2 { font-size: 1.16rem; } .hero__form .lead-card__head p { font-size: .82rem; } .hero__form .form-grid { gap: 10px; } .hero__form .field input, .hero__form .field select { min-height: 42px; padding: 9px 12px; } .hero__form .field textarea { min-height: 64px; } .hero__form .form-note { font-size: .69rem; } .hero__grid { display: grid; gap: 30px; align-items: center; } .hero__copy { text-shadow: 0 1px 14px rgba(5, 16, 13, .55); } .hero h1, .hero .hero__title { color: #fff; margin: 14px 0 12px; font-size: clamp(2.15rem, 8vw, 3.5rem); letter-spacing: -.015em; } .hero__title-sub { display: block; font-family: var(--font-body); font-size: clamp(.85rem, 2.6vw, 1rem); font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-top: 12px; } .hero p { color: #cedbd6; max-width: 560px; } .hero__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 18px 0 6px; } .hero__price strong { font-family: var(--font-display); font-size: clamp(1.7rem, 5vw, 2.3rem); color: #fff; font-weight: 600; } .hero__facts { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; max-width: 520px; } .hero__facts li { border-left: 2px solid rgba(180, 139, 69, .6); padding-left: 12px; } .hero__facts b { display: block; font-family: var(--font-display); font-size: 1.32rem; color: #fff; font-weight: 600; line-height: 1.2; } .hero__facts span { font-size: .78rem; letter-spacing: .06em; color: #a9bbb5; text-transform: uppercase; } .hero__dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 4; display: flex; justify-content: center; gap: 9px; } .hero__dot { width: 30px; height: 3px; padding: 0; border: 0; background: rgba(255, 255, 255, .35); cursor: pointer; border-radius: 2px; transition: background var(--transition); } .hero__dot[aria-selected="true"] { background: var(--accent); } .hero__arrows { display: none; } .hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: rgba(10, 28, 24, .35); color: #fff; font-size: 1.1rem; cursor: pointer; transition: background var(--transition); } .hero__arrow:hover { background: var(--accent); border-color: var(--accent); } .hero__arrow--prev { left: 14px; } .hero__arrow--next { right: 14px; } /* Page banner for inner pages */ .page-hero { position: relative; background: linear-gradient(105deg, rgba(10, 28, 24, .95) 0%, rgba(21, 58, 49, .88) 100%), radial-gradient(circle at 82% 25%, rgba(180, 139, 69, .3) 0%, transparent 60%), #0f2a24; color: #fff; padding-block: 40px 44px; } .page-hero h1 { color: #fff; margin-bottom: .35em; } .page-hero p { color: #c6d3ce; max-width: 720px; } .page-hero .btn-row { margin-top: 22px; } /* ---------------------------------------------------------------- 07. Lead forms ---------------------------------------------------------------- */ .lead-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 22px 20px; color: var(--text); } .lead-card__head { margin-bottom: 16px; } .lead-card__head h2, .lead-card__head h3 { font-size: 1.32rem; margin-bottom: .25em; } .lead-card__head p { font-size: .87rem; color: var(--muted); } .form-grid { display: grid; gap: 13px; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: .8rem; font-weight: 600; color: var(--primary); letter-spacing: .02em; } .field .req { color: var(--error); } .field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 11px 13px; font-family: var(--font-body); font-size: .93rem; color: var(--text); background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); } .field textarea { min-height: 86px; resize: vertical; } .field select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235f6b66' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 11px; padding-right: 34px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(180, 139, 69, .18); } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--error); } .field__error { display: none; font-size: .76rem; color: var(--error); } .field.has-error .field__error { display: block; } .field--phone { position: relative; } .field--phone .phone-wrap { display: flex; } .field--phone .phone-prefix { display: inline-flex; align-items: center; padding: 0 11px; border: 1px solid var(--border-strong); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--light-2); font-size: .9rem; color: var(--muted); } .field--phone input { border-radius: 0 var(--radius) var(--radius) 0; } .field--consent { flex-direction: row; align-items: flex-start; gap: 9px; } .field--consent input { width: 18px; height: 18px; min-height: 0; margin-top: 3px; flex: 0 0 18px; accent-color: var(--accent); } .field--consent label { font-size: .78rem; font-weight: 400; color: var(--muted); line-height: 1.5; } .form-note { font-size: .74rem; color: var(--muted); margin-top: 4px; } .form-status { display: none; margin-top: 12px; padding: 11px 13px; border-radius: var(--radius); font-size: .87rem; } .form-status.is-success { display: block; background: #e8f5ee; border: 1px solid #b7dfc9; color: #14603f; } .form-status.is-pending { display: block; background: var(--light-2); border: 1px solid var(--border-strong); color: var(--muted); } .form-status.is-error { display: block; background: #fdeceb; border: 1px solid #f2c4c1; color: var(--error); } /* Honeypot — hidden from users, catches naive bots */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ---------------------------------------------------------------- 08. Cards, grids & tables ---------------------------------------------------------------- */ .grid { display: grid; gap: 18px; } .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 20px; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); } .card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .card h3 { font-size: 1.2rem; } .card__meta { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-600); font-weight: 600; } /* Highlight stat cards */ .stat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 16px; text-align: center; box-shadow: var(--shadow-sm); } .stat-card b { display: block; font-family: var(--font-display); font-size: 1.75rem; color: var(--primary); font-weight: 600; line-height: 1.15; } .stat-card span { display: block; margin-top: 4px; font-size: .8rem; color: var(--muted); letter-spacing: .04em; } /* Configuration / price cards */ .config-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); } .config-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .config-card__head { background: var(--primary); color: #fff; padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .config-card__head h3 { color: #fff; margin: 0; font-size: 1.28rem; } .config-card__body { padding: 18px; flex: 1; } .config-card__body dl { margin: 0 0 14px; display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: .9rem; } .config-card__body dt { color: var(--muted); } .config-card__body dd { margin: 0; text-align: right; font-weight: 600; color: var(--primary); } .config-card__foot { padding: 0 18px 18px; display: flex; gap: 10px; flex-wrap: wrap; } /* Category icon on the connectivity cards. Inline SVG, so it inherits colour and costs no extra request. */ .cat-icon { width: 38px; height: 38px; color: var(--accent-600); margin-bottom: 14px; display: block; } /* Feature / amenity list */ .feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .feature-list li { position: relative; padding-left: 26px; font-size: .94rem; } .feature-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border: 2px solid var(--accent); transform: rotate(45deg); } .section--dark .feature-list li::before { border-color: var(--accent); } /* Responsive tables */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); } .data-table { min-width: 560px; font-size: .92rem; } .data-table caption { caption-side: top; text-align: left; padding: 14px 16px 0; font-size: .85rem; color: var(--muted); } .data-table th, .data-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } .data-table thead th { background: var(--light-2); color: var(--primary); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; white-space: nowrap; } .data-table tbody tr:last-child td { border-bottom: 0; } .data-table tbody tr:hover { background: #fbfaf7; } .data-table td b { color: var(--primary); } .data-table .num { text-align: right; white-space: nowrap; } /* Spec table: two column key/value */ .spec-table td:first-child { width: 34%; font-weight: 600; color: var(--primary); } .tag-awaited { display: inline-block; background: var(--light-2); border: 1px dashed var(--border-strong); color: var(--muted); font-size: .76rem; padding: 2px 9px; border-radius: 100px; } /* Split content block (text + media) */ .split { display: grid; gap: 26px; align-items: center; } .split--reverse .split__media { order: -1; } /* ---------------------------------------------------------------- 09. Media placeholders, gallery & lightbox ---------------------------------------------------------------- */ /* Placeholder keeps a fixed aspect ratio so nothing shifts when the official image is dropped in later. */ .media { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: var(--light-2); border: 1px solid var(--border); } .media img, .media iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; } .media--tall { aspect-ratio: 3 / 4; } .media--square { aspect-ratio: 1 / 1; } .media--wide { aspect-ratio: 16 / 9; } .media--plan { aspect-ratio: 4 / 3; } .media-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px; background: repeating-linear-gradient(135deg, #f2efe8 0 12px, #ece8de 12px 24px); color: var(--muted); } .media-placeholder__icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--white); color: var(--accent-600); font-size: 1.1rem; } .media-placeholder b { font-family: var(--font-display); font-size: 1.05rem; color: var(--primary); font-weight: 600; } .media-placeholder span { font-size: .76rem; max-width: 280px; line-height: 1.5; } .media__caption { font-size: .82rem; color: var(--muted); margin-top: 9px; } /* Gallery */ .gallery-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; } .filter-btn { min-height: 40px; padding: 8px 16px; border: 1px solid var(--border-strong); background: var(--white); color: var(--primary); border-radius: 100px; font-family: var(--font-body); font-size: .85rem; font-weight: 500; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .filter-btn:hover { border-color: var(--accent); } .filter-btn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; } .gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .gallery-item { position: relative; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; border-radius: var(--radius-lg); overflow: hidden; display: block; width: 100%; } .gallery-item .media { border-radius: var(--radius-lg); } .gallery-item__label { display: block; padding: 9px 2px 0; font-size: .82rem; color: var(--muted); } .gallery-item:hover .media { border-color: var(--accent); } .gallery-item[hidden] { display: none; } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(8, 20, 17, .92); } .lightbox.is-open { display: flex; } .lightbox__inner { position: relative; width: min(920px, 100%); max-height: 88vh; overflow: auto; background: var(--white); border-radius: var(--radius-lg); padding: 16px; } .lightbox__caption { margin-top: 12px; font-size: .9rem; color: var(--muted); text-align: center; } .lightbox__close, .lightbox__nav { position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--white); color: var(--primary); font-size: 1.2rem; line-height: 1; cursor: pointer; z-index: 2; } .lightbox__nav { top: 50%; transform: translateY(-50%); } .lightbox__nav--prev { left: 10px; right: auto; } .lightbox__nav--next { right: 10px; } /* Map area */ .map-embed { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--light-2); } .map-embed iframe { width: 100%; height: 100%; border: 0; } /* ---------------------------------------------------------------- 10. Timeline, FAQ, breadcrumbs, nearby lists ---------------------------------------------------------------- */ .timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--border-strong); display: grid; gap: 24px; } .timeline li { position: relative; } .timeline li::before { content: ""; position: absolute; left: -29px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 3px solid var(--border-strong); } .timeline li.is-current::before { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(180, 139, 69, .18); } .timeline__label { display: block; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent-600); font-weight: 600; } .timeline b { display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--primary); font-weight: 600; } .timeline p { font-size: .89rem; color: var(--muted); margin: 3px 0 0; } /* FAQ accordion */ .faq { display: grid; gap: 10px; } .faq__item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .faq__q { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 16px 18px; background: transparent; border: 0; font-family: var(--font-body); font-size: .97rem; font-weight: 600; color: var(--primary); text-align: left; cursor: pointer; min-height: 52px; } .faq__q:hover { color: var(--accent-600); } .faq__icon { flex: 0 0 20px; width: 20px; height: 20px; position: relative; margin-top: 2px; } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--accent); transition: transform var(--transition); } .faq__icon::before { left: 0; right: 0; top: 9px; height: 2px; } .faq__icon::after { top: 0; bottom: 0; left: 9px; width: 2px; } .faq__q[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); } .faq__a { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height var(--transition), padding var(--transition); color: var(--muted); font-size: .93rem; } .faq__a.is-open { padding: 0 18px 17px; } /* Breadcrumbs */ .breadcrumbs { background: var(--light-2); border-bottom: 1px solid var(--border); font-size: .82rem; } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; padding: 11px 0; } .breadcrumbs li { display: flex; align-items: center; gap: 7px; color: var(--muted); } .breadcrumbs li + li::before { content: "›"; color: var(--border-strong); } .breadcrumbs a { color: var(--muted); } .breadcrumbs a:hover { color: var(--accent-600); } .breadcrumbs [aria-current="page"] { color: var(--primary); font-weight: 600; } /* Nearby / connectivity list */ .nearby { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .nearby li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--border); font-size: .93rem; } .nearby li:last-child { border-bottom: 0; } .nearby__dist { flex-shrink: 0; text-align: right; font-size: .84rem; color: var(--muted); white-space: nowrap; } /* Quick anchor chips */ .chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .chips a { display: inline-block; padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: 100px; background: var(--white); font-size: .82rem; color: var(--primary); } .chips a:hover { border-color: var(--accent); color: var(--accent-600); } /* ---------------------------------------------------------------- 11. Footer, sticky mobile bar, modal, 404 ---------------------------------------------------------------- */ .site-footer { background: var(--primary); color: #aebdb8; padding-block: 42px 0; font-size: .9rem; } .site-footer h3, .site-footer h4 { color: #fff; } .site-footer h4 { font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 14px; color: var(--accent); } .site-footer a { color: #cdd9d5; } .site-footer a:hover { color: var(--accent); } .footer-grid { display: grid; gap: 30px; padding-bottom: 32px; } .footer-brand .brand { color: #fff; margin-bottom: 14px; } .footer-brand .brand__mark { background: var(--accent); color: var(--primary); } .footer-brand .brand__sub { color: #8ea09a; } .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .footer-contact li { margin-bottom: 10px; } .footer-disclaimer { border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 22px; font-size: .78rem; color: #8ea09a; line-height: 1.6; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 16px 22px; display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; font-size: .78rem; color: #8ea09a; } .footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; } /* Sticky mobile action bar */ .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: grid; grid-template-columns: repeat(3, 1fr); /* default: Call | WhatsApp | Enquire */ background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 -2px 14px rgba(15, 42, 36, .1); padding-bottom: env(safe-area-inset-bottom); } .mobile-cta a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 8px 4px; font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--primary); border-right: 1px solid var(--border); } .mobile-cta a:last-child { border-right: 0; } .mobile-cta a.is-primary { background: var(--accent); color: #fff; } .mobile-cta a.is-wa { color: #17843f; } /* The bar carries fewer actions while the direct-contact channels are off. */ .mobile-cta--1 { grid-template-columns: 1fr; } .mobile-cta--2 { grid-template-columns: 1fr 1fr; } .mobile-cta svg { width: 19px; height: 19px; fill: currentColor; } body { padding-bottom: 56px; } /* room for sticky bar on mobile */ /* Modal enquiry */ .modal { position: fixed; inset: 0; z-index: 210; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(8, 20, 17, .72); } .modal.is-open { display: flex; } .modal__dialog { position: relative; width: min(460px, 100%); max-height: 92vh; overflow-y: auto; background: var(--white); border-radius: var(--radius-lg); padding: 24px 20px; box-shadow: var(--shadow-lg); } .modal__close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--white); font-size: 1.2rem; line-height: 1; color: var(--primary); cursor: pointer; } /* 404 */ .error-page { min-height: 62vh; display: grid; place-items: center; text-align: center; padding-block: 60px; } .error-code { font-family: var(--font-display); font-size: clamp(4.5rem, 22vw, 9rem); line-height: 1; color: var(--primary); opacity: .13; font-weight: 700; margin-bottom: -.25em; } /* Back-to-top */ .to-top { position: fixed; right: 14px; bottom: 68px; z-index: 105; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--white); color: var(--primary); font-size: 1rem; cursor: pointer; box-shadow: var(--shadow-sm); opacity: 0; visibility: hidden; transition: opacity var(--transition); } .to-top.is-visible { opacity: 1; visibility: visible; } /* ---------------------------------------------------------------- 12. Responsive breakpoints (mobile-first upgrades) ---------------------------------------------------------------- */ @media (min-width: 480px) { .gallery-grid { gap: 16px; } } @media (min-width: 640px) { :root { --space-section: 46px; } /* x2 = 92px */ .container { padding-inline: 24px; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lead-card { padding: 26px 24px; } .form-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid--2col .field--full, .form-grid--2col .field--consent, .form-grid--2col .form-submit { grid-column: 1 / -1; } .cta-band { padding: 42px 34px; } .hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { :root { --space-section: 56px; --header-h: 76px; } /* x2 = 112px */ body { padding-bottom: 0; } .topbar { display: block; } .mobile-cta { display: none; } .to-top { bottom: 24px; right: 24px; } .nav-toggle { display: none; } .header-actions .btn--primary { display: inline-flex; } .main-nav { position: static; width: auto; transform: none; visibility: visible; background: transparent; border: 0; padding: 0; overflow: visible; } .main-nav__head { display: none; } .main-nav ul { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; } .main-nav li + li { border-top: 0; } .main-nav a { padding: 8px 9px; font-size: .85rem; position: relative; white-space: nowrap; /* never let a two-word item wrap */ } .main-nav a::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 2px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); } .main-nav .btn { display: none; } .nav-backdrop { display: none; } .hero__slider { min-height: 620px; } .hero__grid { grid-template-columns: 1.08fr 400px; gap: 44px; } .hero__slide { padding-block: 48px 54px; } .hero__arrows { display: block; } .page-hero { padding-block: 58px 62px; } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; } .split--wide-text { grid-template-columns: 1.15fr .85fr; } .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 36px; } .section-head { margin-bottom: 32px; } .sticky-aside { position: sticky; top: calc(var(--header-h) + 20px); } .layout-with-aside { display: grid; grid-template-columns: 1fr 380px; gap: 44px; align-items: start; } } @media (min-width: 1200px) { .container { padding-inline: 28px; } .hero__slider { min-height: 690px; } } /* ---------------------------------------------------------------- 13. Accessibility, focus & motion ---------------------------------------------------------------- */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .btn:hover, .card--hover:hover, .config-card:hover { transform: none; } } @media print { .site-header, .mobile-cta, .to-top, .modal, .lightbox, .cta-band, .hero__dots, .hero__arrows { display: none !important; } body { padding-bottom: 0; background: #fff; } }