/* ========================================================================== pages.css — Page-specific layouts -------------------------------------------------------------------------- Only styles that apply to a single page live here, namespaced by a body class (set on each page's ). Keeps the shared files clean. Loads LAST so it can override components when needed. ========================================================================== */ /* ---- Masterplan page ------------------------------------------------- */ .masterplan-figure { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border-soft); } .masterplan-figure img { width: 100%; } .masterplan-figure figcaption { background: var(--color-white); padding: var(--space-2) var(--space-3); font-size: var(--fs-small); color: var(--text-muted); border-top: 1px solid var(--border-soft); } .legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-4); margin-top: var(--space-4); } .legend li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); } .legend .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; } @media (max-width: 560px) { .legend { grid-template-columns: 1fr; } } /* Phase timeline */ .timeline { display: grid; gap: var(--space-3); } .timeline__item { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-soft); } .timeline__phase { font-family: var(--font-serif); font-size: 1.4rem; color: var(--accent-ink); } .timeline__item h3 { margin-bottom: 0.2em; } .timeline__item p { font-size: var(--fs-small); color: var(--text-muted); } @media (max-width: 560px) { .timeline__item { grid-template-columns: 1fr; gap: var(--space-1); } } /* ---- Amenities page -------------------------------------------------- */ .amenity-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2) var(--space-5); } .amenity-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-body); display: flex; align-items: center; gap: var(--space-2); } .amenity-list li::before { content: "—"; color: var(--accent-ink); } @media (max-width: 760px) { .amenity-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .amenity-list { grid-template-columns: 1fr; } } /* ---- Contact page ---------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .contact-detail { margin-bottom: var(--space-4); } .contact-detail h4 { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-ink); margin-bottom: var(--space-1); } .contact-detail p { color: var(--text-muted); } .map-embed { width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: var(--color-cream-100); } @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } } /* ---- About page ------------------------------------------------------ */ .value-list { display: grid; gap: var(--space-4); } .value-list__item { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-3); align-items: start; } .value-list__num { font-family: var(--font-serif); font-size: 2.2rem; color: var(--accent-ink); line-height: 1; } .value-list__item h3 { margin-bottom: 0.3em; } .value-list__item p { color: var(--text-muted); } @media (max-width: 560px) { .value-list__item { grid-template-columns: 1fr; gap: var(--space-1); } }