Chris Olson
50e8b1bcd3
Content & media - Replace placeholder slides with optimized real estate photos (img/gallery) - Rebuild hero video from the HD intro clip + drone "common area" clips (gate -> vineyard -> home front -> Vineyard sign -> pavilion -> fountain), cutting the private backyard segment; add mobile variant + poster - Add "Community & Common Areas" aerial gallery and a community map - Galleries split strictly by style: Vineyard = Tuscan homes only, Custom Homes = non-Tuscan estates HOA / Homeowner Information - Real board roster (sourced from pinecreekhoa.com) in a responsive table - Homeowner Information document library (CC&Rs, Vineyard covenants, safety rules, architectural review form, delinquency policy, event reimbursement) linking the live PDFs; Premier Management Company reference - Real general contact email Design & UX - Modern full-screen video hero with overlay, sticky nav, refined typography - Click-to-zoom lightbox for all galleries (keyboard + swipe) - Google Maps embed in the Kannapolis section - Favicon set generated from the Pine Creek emblem (svg/png/ico) - Positive reframe of the Custom Homes copy + lot-availability note - SEO/Open Graph meta, lazy-loaded images, responsive board/doc layouts Housekeeping - SCSS source kept in sync (new partials: hero, sections, gallery, board, features); remove stale placeholders, old.index.php, and map artifact - Add .gitignore (.DS_Store, .claude/, css map); fix docs (index.php -> index.html) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
100 lines
1.9 KiB
SCSS
100 lines
1.9 KiB
SCSS
// Section layout, headings, feature images, map, contact, footer
|
|
|
|
.section {
|
|
padding-top: 72px;
|
|
padding-bottom: 72px;
|
|
|
|
@media (max-width: $s-break) { padding-top: 48px; padding-bottom: 48px; }
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-block;
|
|
@include Libre;
|
|
text-transform: uppercase;
|
|
letter-spacing: 3px;
|
|
font-size: 12px;
|
|
color: $gold;
|
|
margin-bottom: 10px;
|
|
|
|
&.light { color: #d8c9a3; }
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 36px;
|
|
margin: 0 0 16px;
|
|
line-height: 1.2;
|
|
|
|
@media (max-width: $s-break) { font-size: 28px; }
|
|
}
|
|
|
|
.section-subtitle {
|
|
color: $gray;
|
|
font-style: italic;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.section-lead {
|
|
max-width: 780px;
|
|
margin: 0 auto 8px;
|
|
color: $gray;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.section-divider {
|
|
border: 0;
|
|
border-top: 1px solid rgba(171, 153, 109, 0.35);
|
|
margin: 0;
|
|
}
|
|
|
|
.feature-img {
|
|
width: 100%;
|
|
height: 440px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
|
|
|
|
@media (max-width: $s-break) { height: 280px; }
|
|
}
|
|
|
|
// Community map
|
|
.map-frame {
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.4);
|
|
border: 1px solid rgba(171, 153, 109, 0.3);
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
.map-img { display: block; width: 100%; }
|
|
|
|
// Contact
|
|
.contact-section {
|
|
background: $black;
|
|
color: $white;
|
|
|
|
.section-title { color: $white; }
|
|
.section-lead { color: #cfcabd; }
|
|
}
|
|
.contact-btn {
|
|
margin-top: 18px;
|
|
background: $gold;
|
|
border-color: $gold;
|
|
color: $white;
|
|
@include Libre;
|
|
padding: 0.7rem 2rem;
|
|
|
|
&:hover { background: darken($gold, 10%); border-color: darken($gold, 10%); color: $white; }
|
|
}
|
|
|
|
// Footer
|
|
.site-footer {
|
|
background: $cream;
|
|
text-align: center;
|
|
padding: 44px 0;
|
|
border-top: 1px solid rgba(171, 153, 109, 0.3);
|
|
|
|
.footer-logo { height: 70px; margin-bottom: 14px; }
|
|
.footer-tagline { @include Libre; color: $gray; margin-bottom: 6px; }
|
|
.footer-copy { color: $light-gray; font-size: 13px; margin: 0; }
|
|
}
|