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>
79 lines
1.8 KiB
SCSS
79 lines
1.8 KiB
SCSS
// 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; }
|
|
}
|
|
}
|
|
}
|