/* ============================================================ Theme system ------------------------------------------------------------ Every color is driven from CSS variables so we can swap the entire palette by setting `data-theme` on . Defaults to "forest". The theme picker (script.js) toggles the attribute and persists the choice in localStorage. ============================================================ */ :root, :root[data-theme="forest"] { --ink: #1a2e22; --ink-soft: #2a3d31; --ivory: #f6f1e6; --ivory-warm: #ede5d2; --gold: #a08856; --gold-soft: #d9c89e; /* Hero overlay — sits above the property photo and tints it. Higher opacity = more atmosphere, less postcard. */ --hero-grad: radial-gradient(ellipse at 70% 20%, rgba(160, 136, 86, 0.20) 0%, transparent 55%), radial-gradient(ellipse at 20% 90%, rgba(0, 0, 0, 0.50) 0%, transparent 60%), linear-gradient(165deg, rgba(22, 39, 28, 0.78) 0%, rgba(31, 58, 42, 0.55) 45%, rgba(20, 36, 26, 0.88) 100%); } :root[data-theme="midnight"] { --ink: #0e1419; --ink-soft: #1c2530; --ivory: #f0ece2; --ivory-warm: #e4dfd1; --gold: #b8985e; --gold-soft: #ddc89a; --hero-grad: radial-gradient(ellipse at 70% 20%, rgba(184, 152, 94, 0.18) 0%, transparent 55%), radial-gradient(ellipse at 20% 90%, rgba(0, 0, 0, 0.6) 0%, transparent 60%), linear-gradient(165deg, rgba(10, 14, 19, 0.88) 0%, rgba(24, 31, 39, 0.65) 50%, rgba(6, 10, 14, 0.94) 100%); } :root[data-theme="walnut"] { --ink: #2e2418; --ink-soft: #4a3a26; --ivory: #efe5d2; --ivory-warm: #e2d4ba; --gold: #8a6d3f; --gold-soft: #c9a972; --hero-grad: radial-gradient(ellipse at 70% 20%, rgba(201, 169, 114, 0.20) 0%, transparent 55%), radial-gradient(ellipse at 20% 90%, rgba(0, 0, 0, 0.50) 0%, transparent 60%), linear-gradient(165deg, rgba(42, 31, 18, 0.80) 0%, rgba(58, 44, 28, 0.55) 50%, rgba(29, 21, 10, 0.90) 100%); } :root[data-theme="slate"] { --ink: #1d2e33; --ink-soft: #2c424a; --ivory: #ebe8e0; --ivory-warm: #d9d6cb; --gold: #8a9a92; --gold-soft: #c8cfc7; --hero-grad: radial-gradient(ellipse at 70% 20%, rgba(200, 207, 199, 0.18) 0%, transparent 55%), radial-gradient(ellipse at 20% 90%, rgba(0, 0, 0, 0.55) 0%, transparent 60%), linear-gradient(165deg, rgba(22, 37, 42, 0.80) 0%, rgba(33, 56, 64, 0.52) 50%, rgba(14, 29, 34, 0.90) 100%); } :root[data-theme="terracotta"] { --ink: #4a2820; --ink-soft: #6b3a2c; --ivory: #f4ebd9; --ivory-warm: #e8dac0; --gold: #a55c44; --gold-soft: #d9a98c; --hero-grad: radial-gradient(ellipse at 70% 20%, rgba(217, 169, 140, 0.22) 0%, transparent 55%), radial-gradient(ellipse at 20% 90%, rgba(0, 0, 0, 0.50) 0%, transparent 60%), linear-gradient(165deg, rgba(58, 29, 22, 0.80) 0%, rgba(94, 51, 38, 0.55) 50%, rgba(44, 21, 15, 0.90) 100%); } :root[data-theme="onyx"] { --ink: #0d0d0d; --ink-soft: #1c1c1c; --ivory: #f1ece2; --ivory-warm: #e2dccd; --gold: #b69962; --gold-soft: #d8c596; --hero-grad: radial-gradient(ellipse at 70% 20%, rgba(216, 197, 150, 0.16) 0%, transparent 55%), radial-gradient(ellipse at 20% 90%, rgba(0, 0, 0, 0.65) 0%, transparent 60%), linear-gradient(165deg, rgba(5, 5, 5, 0.92) 0%, rgba(26, 26, 26, 0.65) 50%, rgba(0, 0, 0, 0.96) 100%); } :root[data-theme="turquoise"] { --ink: #0c3a44; --ink-soft: #14525e; --ivory: #f1ede1; --ivory-warm: #e3dcc8; --gold: #c8a865; --gold-soft: #ebd9a8; /* Lighter overlay — let the Andaman water carry the mood */ --hero-grad: radial-gradient(ellipse at 70% 20%, rgba(235, 217, 168, 0.22) 0%, transparent 55%), radial-gradient(ellipse at 20% 90%, rgba(0, 0, 0, 0.40) 0%, transparent 60%), linear-gradient(165deg, rgba(12, 58, 68, 0.62) 0%, rgba(20, 82, 94, 0.38) 50%, rgba(8, 42, 50, 0.78) 100%); } /* ============================================================ Base ============================================================ */ :root { --rule: color-mix(in srgb, var(--ink) 18%, transparent); --rule-light: color-mix(in srgb, var(--ivory) 22%, transparent); --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --max: 1200px; --max-narrow: 720px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.7; text-rendering: optimizeLegibility; transition: background 0.4s ease, color 0.4s ease; } a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity 0.2s ease; } a:hover { opacity: 0.6; } /* ============================================================ Header ============================================================ */ .site-header { position: absolute; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: flex-start; justify-content: space-between; padding: 28px clamp(20px, 5vw, 56px); color: var(--ivory); } .brand { display: inline-flex; align-items: center; align-self: flex-start; border: none; } .brand__logo { height: 90px; width: auto; display: block; } .nav { display: flex; gap: clamp(18px, 3vw, 36px); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; } .nav a { border: none; position: relative; padding-bottom: 2px; } .nav a::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .nav a:hover::after { transform: scaleX(1); } /* ============================================================ Hero ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ivory); padding: 120px 24px 80px; overflow: hidden; background-color: var(--ink); background-image: var(--hero-grad), url("/assets/dsp_luxury.webp"); background-position: center; background-size: cover; background-repeat: no-repeat; transition: background-image 0.5s ease, background-color 0.5s ease; } .hero::before, .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .hero::before { background: repeating-linear-gradient( 120deg, transparent 0 6px, rgba(0, 0, 0, 0.04) 6px 7px ); opacity: 0.6; } .hero::after { background: linear-gradient( 180deg, transparent 70%, color-mix(in srgb, var(--ink) 90%, transparent) 100% ); } .hero__inner { position: relative; z-index: 2; max-width: 760px; } .eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; margin: 0 0 28px; color: var(--ink-soft); } .eyebrow::before { content: ""; display: block; width: 36px; height: 1px; margin-bottom: 18px; background: var(--gold); } .section--narrow .eyebrow::before, .hero .eyebrow::before { margin-left: auto; margin-right: auto; } .hero .eyebrow { color: var(--ivory); } .eyebrow--light { color: var(--gold-soft); } .eyebrow--light::before { background: var(--gold-soft); } .display { font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 9vw, 112px); line-height: 1.02; letter-spacing: 0.01em; margin: 0 0 36px; } .hero__lede { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(18px, 2vw, 22px); line-height: 1.5; max-width: 520px; margin: 0 auto; color: color-mix(in srgb, var(--ivory) 90%, transparent); } .hero__scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 2; } .hero__scroll span { display: block; width: 1px; height: 56px; background: linear-gradient(180deg, transparent, var(--gold-soft)); animation: drip 2.6s ease-in-out infinite; } @keyframes drip { 0%, 100% { opacity: 0.2; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } } /* ============================================================ Sections ============================================================ */ .section { padding: clamp(96px, 14vh, 160px) clamp(24px, 6vw, 56px); transition: background 0.4s ease, color 0.4s ease; } .section--narrow { max-width: var(--max-narrow); margin: 0 auto; text-align: center; } .section--dark { background: var(--ink); color: var(--ivory); } .section__inner { max-width: var(--max); margin: 0 auto; } .heading { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4.5vw, 48px); line-height: 1.2; letter-spacing: 0.005em; margin: 0 0 40px; } .heading--light { color: var(--ivory); } .prose p { margin: 0 0 20px; } .prose p:last-child { margin-bottom: 0; } /* ============================================================ Property card ============================================================ */ .property { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 80px); padding-top: 48px; border-top: 1px solid var(--rule-light); } .property__meta p { margin: 0; } .property__location { font-family: var(--serif); font-size: 22px; font-style: italic; color: var(--gold-soft); margin-bottom: 8px !important; } .property__status { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: color-mix(in srgb, var(--ivory) 60%, transparent); } .property__body p { margin: 0 0 20px; color: color-mix(in srgb, var(--ivory) 84%, transparent); } .property__note { font-style: italic; color: color-mix(in srgb, var(--ivory) 60%, transparent) !important; font-family: var(--serif); font-size: 16px; } @media (max-width: 600px) { .site-header { flex-direction: column; align-items: center; gap: 14px; padding: 24px 20px; } .brand__logo { height: 60px; } .nav { gap: 20px; } .hero { padding-top: 40px; } } @media (max-width: 720px) { .property { grid-template-columns: 1fr; gap: 24px; } } /* ============================================================ Contact ============================================================ */ .contact { margin: 0 auto; max-width: 520px; display: grid; gap: 28px; text-align: left; } .contact div { display: grid; grid-template-columns: 160px 1fr; align-items: baseline; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); } .contact dt { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft); opacity: 0.7; } .contact dd { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.5; } @media (max-width: 560px) { .contact div { grid-template-columns: 1fr; gap: 6px; } } /* ============================================================ Footer ============================================================ */ .site-footer { background: var(--ink); color: var(--ivory); padding: 56px clamp(24px, 6vw, 56px); text-align: center; border-top: 1px solid var(--rule-light); transition: background 0.4s ease; } .site-footer__brand { font-family: var(--serif); font-size: 20px; letter-spacing: 0.06em; margin: 0 0 8px; color: var(--gold-soft); } .site-footer__legal { margin: 0; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--ivory) 50%, transparent); } /* ============================================================ Theme picker (preview tool — remove before launch) ============================================================ */ .theme-picker { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: inline-flex; align-items: center; gap: 5px; padding: 10px 14px; background: color-mix(in srgb, var(--ink) 88%, transparent); color: var(--ivory); border: 1px solid var(--rule-light); border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .theme-picker__label { color: var(--gold-soft); font-size: 10px; letter-spacing: 0.28em; } .theme-picker__select { appearance: none; -webkit-appearance: none; background: transparent; color: var(--ivory); border: none; outline: none; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 4px 22px 4px 4px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--gold-soft) 50%), linear-gradient(135deg, var(--gold-soft) 50%, transparent 50%); background-position: calc(100% - 11px) center, calc(100% - 6px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .theme-picker__select option { background: var(--ink); color: var(--ivory); } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero__scroll span { animation: none; } body, .hero, .section, .site-footer, .theme-picker { transition: none; } }