/* ========================================================================== base.css — Foundation -------------------------------------------------------------------------- Project: Kali Villas Mentawai Layer: Settings + Generic + Elements (ITCSS) Loaded by: All HTML pages (FIRST) -------------------------------------------------------------------------- Contains: 1. CSS custom properties (the brand palette and typographic tokens) 2. Box-sizing reset 3. and defaults 4. Smooth scroll behaviour -------------------------------------------------------------------------- Brand palette: Sand — page backgrounds, warm canvas Terra — terracotta accents, calls to action, emphasis Navy — primary text, dark sections, footer ========================================================================== */ /* -------------------------------------------------------------------------- 1. Custom properties -------------------------------------------------------------------------- */ :root { /* Sand palette — used as base canvas and alternating section backgrounds */ --sand: #f5efe3; /* page background — warm sandy cream */ --sand-dark: #ede5d4; /* slightly deeper cream for alternating sections */ --sand-deeper: #e2d8c6; /* borders and subtle dividers */ /* Terra palette — terracotta accents derived from the brand mark */ --terra: #b35318; /* primary terracotta (logo mark) */ --terra-light: #c9622a; /* hover state for terracotta elements */ --terra-pale: #f0d8c8; /* very faint terracotta tint, for soft fills */ /* Navy palette — primary text and dark sections */ --navy: #1c2b4a; /* body text and dark backgrounds */ --navy-soft: #2e3f62; /* slightly lighter navy for hover states */ --navy-muted: #3d4f6e; /* muted body copy */ --navy-dim: #5a6a8a; /* captions and labels */ } /* -------------------------------------------------------------------------- 2. Universal reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* -------------------------------------------------------------------------- 3. Document defaults -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; overflow-x: hidden; /* belt-and-braces with body — iOS Safari ignores body-only x-clip when fixed/absolute children extend past the viewport (e.g. the off-canvas mobile nav at translateX(100%)) */ } body { background: var(--sand); color: var(--navy); font-family: 'Jost', sans-serif; font-weight: 300; overflow-x: hidden; } /* -------------------------------------------------------------------------- 4. Image protection — best-effort piracy deterrents -------------------------------------------------------------------------- Applied site-wide. Combined with js/protect.js, this discourages casual image saving via: — disabling user selection on images — disabling drag-to-desktop — disabling the iOS long-press "Save Image" sheet Screenshots cannot be technically prevented; the diagonal watermark overlay (see .wm utility below) is what protects content visually. -------------------------------------------------------------------------- */ img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; /* iOS long-press save sheet */ } /* -------------------------------------------------------------------------- Custom Elements (defined in js/components.js) -------------------------------------------------------------------------- , and inject their inner markup on connect. `display: contents` removes the wrapper itself from the layout tree so existing CSS selectors (`nav`, `footer`, `.lightbox`) continue to apply to the children unchanged. -------------------------------------------------------------------------- */ site-nav, site-footer, site-lightbox, site-surf-map { display: contents; } /* -------------------------------------------------------------------------- 5. Watermark utility — diagonal repeating brand mark -------------------------------------------------------------------------- Apply by adding the .wm class to any element that contains an image. The pseudo-element overlays a low-opacity, rotated, repeating brand mark across the parent. pointer-events:none keeps clicks reaching the image / parent link beneath it. -------------------------------------------------------------------------- */ .wm { position: relative; } .wm::after { content: 'KALI VILLAS · MENTAWAI © KALI VILLAS · MENTAWAI © KALI VILLAS · MENTAWAI © KALI VILLAS · MENTAWAI © KALI VILLAS · MENTAWAI © KALI VILLAS · MENTAWAI ©'; position: absolute; inset: -50%; display: flex; align-items: center; justify-content: center; pointer-events: none; font-family: 'Jost', sans-serif; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.45em; text-transform: uppercase; color: rgba(245, 239, 227, 0.18); text-shadow: 0 1px 2px rgba(12, 10, 8, 0.25); word-spacing: 2.2rem; line-height: 4rem; transform: rotate(-28deg); overflow: hidden; z-index: 5; } /* -------------------------------------------------------------------------- 6. Right-click toast — replaces the native context menu on images -------------------------------------------------------------------------- Created on demand by js/protect.js when the user right-clicks an image. Positioned at the cursor, fades in for ~1.8s then fades out. -------------------------------------------------------------------------- */ .copyright-toast { position: absolute; z-index: 9999; padding: 0.65rem 1.1rem; background: rgba(28, 43, 74, 0.96); color: rgba(245, 239, 227, 0.96); font-family: 'Cormorant Garamond', serif; font-size: 0.95rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 24px rgba(12, 10, 8, 0.35); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.18s ease, transform 0.18s ease; } .copyright-toast.is-visible { opacity: 1; transform: translateY(0); }