Enhance Pine Creek marketing site: real media, galleries, HOA info
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>
This commit is contained in:
78
css/components/_board.scss
Normal file
78
css/components/_board.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
// HOA board roster table (stacks into cards on mobile)
|
||||
.board-heading {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
margin: 40px 0 24px;
|
||||
}
|
||||
|
||||
.board-table {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
border-collapse: collapse;
|
||||
background: $white;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.4);
|
||||
|
||||
thead th {
|
||||
background: $black;
|
||||
color: $white;
|
||||
@include Libre;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
padding: 16px 22px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
padding: 16px 22px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) { background: $cream; }
|
||||
tbody tr:hover { background: rgba(171, 153, 109, 0.12); }
|
||||
|
||||
td a { color: darken($gold, 10%); text-decoration: none; }
|
||||
td a:hover { text-decoration: underline; }
|
||||
td[data-label="Position"] { @include Libre; }
|
||||
|
||||
// Stacked cards on phones
|
||||
@media (max-width: $xs-break) {
|
||||
box-shadow: none;
|
||||
|
||||
thead { display: none; }
|
||||
&, tbody, tr, td { display: block; width: 100%; }
|
||||
|
||||
tbody tr {
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid rgba(171, 153, 109, 0.3);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.4);
|
||||
|
||||
&:nth-child(even) { background: $white; }
|
||||
}
|
||||
|
||||
tbody td {
|
||||
border-top: none;
|
||||
padding: 10px 18px;
|
||||
|
||||
&:first-child { padding-top: 16px; font-weight: 700; font-size: 17px; }
|
||||
&:last-child { padding-bottom: 16px; }
|
||||
|
||||
&::before {
|
||||
content: attr(data-label);
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-size: 10px;
|
||||
color: $gold;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
&:first-child::before { content: ""; margin: 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
178
css/components/_features.scss
Normal file
178
css/components/_features.scss
Normal file
@@ -0,0 +1,178 @@
|
||||
// Availability note, Google map embed, homeowner documents, lightbox
|
||||
|
||||
.availability-note {
|
||||
border-left: 3px solid $gold;
|
||||
padding: 4px 0 4px 16px;
|
||||
margin: 22px 0;
|
||||
color: $gray;
|
||||
font-style: italic;
|
||||
|
||||
a { color: darken($gold, 10%); font-weight: 700; }
|
||||
}
|
||||
|
||||
// Google map embed (Kannapolis)
|
||||
.map-embed {
|
||||
margin-top: 40px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 42%;
|
||||
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);
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (max-width: $s-break) { padding-top: 75%; }
|
||||
}
|
||||
|
||||
// Homeowner documents
|
||||
.doc-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 18px;
|
||||
max-width: 900px;
|
||||
margin: 28px auto 0;
|
||||
|
||||
@media (max-width: $s-break) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.doc-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 18px 20px;
|
||||
background: $white;
|
||||
border: 1px solid rgba(171, 153, 109, 0.35);
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
color: $black;
|
||||
box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.4);
|
||||
transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.45);
|
||||
border-color: $gold;
|
||||
text-decoration: none;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.doc-icon {
|
||||
flex: 0 0 auto;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: rgba(171, 153, 109, 0.14);
|
||||
color: darken($gold, 10%);
|
||||
|
||||
svg { width: 24px; height: 24px; }
|
||||
}
|
||||
|
||||
.doc-text { display: flex; flex-direction: column; }
|
||||
.doc-title { @include Libre; font-size: 16px; line-height: 1.3; margin-bottom: 3px; }
|
||||
.doc-meta { font-size: 12.5px; color: $gray; }
|
||||
.doc-note {
|
||||
text-align: center;
|
||||
color: $gray;
|
||||
margin-top: 24px;
|
||||
font-size: 15px;
|
||||
|
||||
a { color: darken($gold, 10%); font-weight: 700; }
|
||||
}
|
||||
|
||||
// Lightbox
|
||||
.gallery-track.zoomable { cursor: zoom-in; }
|
||||
|
||||
.lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(20, 18, 18, 0.92);
|
||||
padding: 24px;
|
||||
|
||||
&[hidden] { display: none; }
|
||||
|
||||
&-figure {
|
||||
margin: 0;
|
||||
max-width: 92vw;
|
||||
max-height: 88vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-img {
|
||||
max-width: 92vw;
|
||||
max-height: 80vh;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-caption {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 13px;
|
||||
margin-top: 12px;
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
&-close,
|
||||
&-arrow {
|
||||
position: absolute;
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover { background: rgba(255, 255, 255, 0.28); }
|
||||
}
|
||||
|
||||
&-close {
|
||||
top: 18px;
|
||||
right: 18px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
|
||||
svg { width: 26px; height: 26px; }
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
|
||||
svg { width: 28px; height: 28px; }
|
||||
|
||||
&.prev { left: 20px; }
|
||||
&.next { right: 20px; }
|
||||
|
||||
@media (max-width: $xs-break) {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
&.prev { left: 8px; }
|
||||
&.next { right: 8px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
78
css/components/_gallery.scss
Normal file
78
css/components/_gallery.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
// Image gallery / carousel
|
||||
.gallery {
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
|
||||
|
||||
&-track {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
|
||||
@media (max-width: $m-break) { height: 360px; }
|
||||
@media (max-width: $xs-break) { height: 260px; }
|
||||
}
|
||||
|
||||
&-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
|
||||
&.is-active { opacity: 1; }
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
color: $black;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
transition: background 0.2s, transform 0.15s;
|
||||
|
||||
&:hover { background: $white; }
|
||||
&:active { transform: translateY(-50%) scale(0.92); }
|
||||
|
||||
svg { width: 22px; height: 22px; }
|
||||
|
||||
&.prev { left: 14px; }
|
||||
&.next { right: 14px; }
|
||||
}
|
||||
|
||||
&-dots {
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&-dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.2s;
|
||||
|
||||
&.is-active { background: $gold; transform: scale(1.25); }
|
||||
}
|
||||
}
|
||||
85
css/components/_hero.scss
Normal file
85
css/components/_hero.scss
Normal file
@@ -0,0 +1,85 @@
|
||||
// Full-bleed video hero
|
||||
.hero {
|
||||
position: relative;
|
||||
height: calc(100vh - 92px);
|
||||
min-height: 480px;
|
||||
max-height: 820px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: $m-break) { height: calc(100vh - 72px); }
|
||||
|
||||
&-video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgba(35, 31, 32, 0.35) 0%, rgba(35, 31, 32, 0.15) 40%, rgba(35, 31, 32, 0.6) 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: $white;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
&-eyebrow {
|
||||
@include Libre;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 5px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
color: #f2e9d6;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 84px;
|
||||
margin: 0 0 14px;
|
||||
line-height: 1;
|
||||
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
|
||||
|
||||
@media (max-width: $s-break) { font-size: 52px; }
|
||||
}
|
||||
|
||||
&-sub {
|
||||
@include Libre;
|
||||
font-size: 20px;
|
||||
margin-bottom: 28px;
|
||||
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
|
||||
|
||||
@media (max-width: $s-break) { font-size: 16px; }
|
||||
}
|
||||
|
||||
&-btn { font-size: 15px; padding: 0.7rem 2rem; }
|
||||
|
||||
&-scroll {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 2;
|
||||
color: $white;
|
||||
opacity: 0.85;
|
||||
animation: heroBounce 2s infinite;
|
||||
|
||||
svg { width: 34px; height: 34px; }
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes heroBounce {
|
||||
0%, 100% { transform: translate(-50%, 0); }
|
||||
50% { transform: translate(-50%, 8px); }
|
||||
}
|
||||
@@ -4,11 +4,17 @@ nav.main-nav {
|
||||
border-bottom-right-radius: 100% 64px;
|
||||
box-shadow: 0 4px 5px 0px rgba(0,0,0,.16);
|
||||
display: flex;
|
||||
padding: 16px 0 32px;
|
||||
padding: 12px 0 28px;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
z-index: 20;
|
||||
transition: box-shadow .25s, padding .25s;
|
||||
|
||||
&.scrolled {
|
||||
padding: 8px 0 20px;
|
||||
box-shadow: 0 6px 14px 0px rgba(0,0,0,.18);
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@@ -50,7 +56,7 @@ nav.main-nav {
|
||||
|
||||
&:hover {
|
||||
&> div {
|
||||
background-color: $gray;
|
||||
background-color: $gold;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,6 +73,7 @@ nav.main-nav {
|
||||
& div:nth-child(2) {
|
||||
transform: translate(-17px);
|
||||
width: 40px;
|
||||
opacity: 0;
|
||||
}
|
||||
& div:last-child {
|
||||
bottom: 1px;
|
||||
@@ -108,7 +115,7 @@ nav.main-nav {
|
||||
|
||||
a {
|
||||
@include Libre;
|
||||
|
||||
|
||||
color: $black;
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
@@ -117,10 +124,13 @@ nav.main-nav {
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
|
||||
transition: color .2s;
|
||||
|
||||
&:hover { color: $gold; }
|
||||
|
||||
@media (max-width: $m-break) {
|
||||
font-size: 14px;
|
||||
padding-bottom: 16px;
|
||||
font-size: 16px;
|
||||
padding-bottom: 22px;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@@ -148,7 +158,9 @@ nav.main-nav {
|
||||
&.main-nav--logo {
|
||||
a {
|
||||
img {
|
||||
margin: 0 8px;
|
||||
margin: 0 14px;
|
||||
height: 52px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
99
css/components/_sections.scss
Normal file
99
css/components/_sections.scss
Normal file
@@ -0,0 +1,99 @@
|
||||
// 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; }
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
.slides {
|
||||
position: relative;
|
||||
|
||||
&.vineyard {
|
||||
min-height: 300px;
|
||||
img {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
&.house {
|
||||
min-height: 400px;
|
||||
img {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
img {
|
||||
border-radius: 5px;
|
||||
object-fit: cover;
|
||||
opacity: 1;
|
||||
transition: .15s;
|
||||
width: 100%;
|
||||
|
||||
&::selection {
|
||||
background: rgba(255,255,255,0);
|
||||
}
|
||||
|
||||
&.out {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slides-arrow {
|
||||
align-items: center;
|
||||
background: $white;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
justify-content: center;
|
||||
left: -25px;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: .15s;
|
||||
width: 50px;
|
||||
|
||||
&.out {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
background-color: $light-gray;
|
||||
border-radius: 3px;
|
||||
color: $white;
|
||||
height: 32px;
|
||||
padding: 4px;
|
||||
pointer-events: none;
|
||||
transition: .1s;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
left: auto;
|
||||
right: -25px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
background-color: darken($light-gray, 5%);
|
||||
border-radius: 4px;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
svg {
|
||||
background-color: darken($light-gray, 10%);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user