patx/miadruck
Refine shared site styling while preserving coastal brand
Commit ab151a5 · patx · 2026-09-21T19:51:22-04:00
Comments
No comments yet.
Diff
diff --git a/docs/assets/site.css b/docs/assets/site.css
index 395f8d2..62488c0 100644
--- a/docs/assets/site.css
+++ b/docs/assets/site.css
@@ -1,6 +1,6 @@
/* ==========================================================================
Mia Druck — Ocean Glades Realty
- Editorial design system. Shared by index.html and every area page.
+ Shared styles for the homepage and area pages.
========================================================================== */
/* Fonts (self-hosted, latin subset) */
@@ -24,7 +24,7 @@
}
:root{
- /* Palette — no gradients anywhere. */
+ /* Coastal brand palette. */
--ink:#0F2436;
--ink-80:rgba(15,36,54,.80);
--ink-60:rgba(15,36,54,.62);
@@ -44,12 +44,12 @@
--t-body:17px;
--t-lead:clamp(19px,1.4vw,21px);
--t-h3:clamp(22px,2vw,26px);
- --t-h2:clamp(30px,4vw,52px);
- --t-h1:clamp(46px,7vw,96px);
+ --t-h2:clamp(30px,3.2vw,42px);
+ --t-h1:clamp(40px,5.5vw,72px);
--wrap:1180px;
--gutter:clamp(20px,5vw,48px);
- --section:clamp(72px,10vw,140px);
+ --section:clamp(60px,7vw,96px);
--photo-max:560px; /* hard cap — see plan: keeps photos at ~1.3x native */
}
@@ -81,8 +81,8 @@ h1,h2,h3,h4{
letter-spacing:-.02em;
margin:0;
}
-h1{ font-size:var(--t-h1); line-height:.98; }
-h2{ font-size:var(--t-h2); line-height:1.04; }
+h1{ font-size:var(--t-h1); line-height:1.08; }
+h2{ font-size:var(--t-h2); line-height:1.15; }
h3{ font-size:var(--t-h3); line-height:1.18; letter-spacing:-.015em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
@@ -110,11 +110,10 @@ p:last-child{ margin-bottom:0; }
/* Shared bits ------------------------------------------------------------ */
.eyebrow{
font-family:var(--sans);
- font-size:12px;
- font-weight:600;
- letter-spacing:.18em;
- text-transform:uppercase;
- color:var(--brass);
+ font-size:14px;
+ font-weight:500;
+ letter-spacing:.02em;
+ color:var(--brass-dark);
margin:0;
}
@@ -143,7 +142,7 @@ p:last-child{ margin-bottom:0; }
}
.prose a:hover,.underline-link:hover{ text-decoration-thickness:2px; }
-/* Buttons — square, hairline, no gradient. */
+/* Buttons */
.btn{
display:inline-flex;
align-items:center;
@@ -162,7 +161,7 @@ p:last-child{ margin-bottom:0; }
cursor:pointer;
transition:background .14s ease,color .14s ease,border-color .14s ease;
}
-.btn:hover{ background:var(--brass); border-color:var(--brass); }
+.btn:hover{ background:var(--brass-dark); border-color:var(--brass-dark); }
.btn-ghost{
background:transparent;
@@ -265,12 +264,13 @@ p:last-child{ margin-bottom:0; }
padding:8px var(--gutter) 20px;
background:var(--paper);
border-bottom:1px solid var(--rule);
+ visibility:hidden;
opacity:0;
transform:translateY(-10px);
pointer-events:none;
transition:opacity .18s ease,transform .18s ease;
}
- .topbar.nav-open .navlinks{ opacity:1; transform:translateY(0); pointer-events:auto; }
+ .topbar.nav-open .navlinks{ visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto; }
.navlinks a{
padding:15px 0;
font-size:16px;
@@ -290,7 +290,7 @@ p:last-child{ margin-bottom:0; }
/* Hero — the only full-bleed image on the site. ---------------------------- */
.hero{
position:relative;
- min-height:min(88vh,820px);
+ min-height:clamp(560px,76vh,720px);
display:flex;
align-items:flex-end;
overflow:hidden;
@@ -312,7 +312,7 @@ p:last-child{ margin-bottom:0; }
position:relative;
width:min(var(--wrap),100% - var(--gutter)*2);
margin-inline:auto;
- padding:clamp(48px,9vw,104px) 0;
+ padding:clamp(48px,6vw,76px) 0;
color:#fff;
}
.hero .eyebrow{ color:var(--sand); }
@@ -322,8 +322,8 @@ p:last-child{ margin-bottom:0; }
color:#fff;
}
.hero h1 em{
- font-style:italic;
- font-weight:400;
+ font-style:normal;
+ font-weight:inherit;
}
.hero-sub{
margin:22px 0 0;
@@ -342,7 +342,7 @@ p:last-child{ margin-bottom:0; }
.hero-actions over a light background and must keep the default button
colours, so this must not leak out of .hero. */
.hero .hero-actions .btn{ background:#fff; border-color:#fff; color:var(--ink); }
-.hero .hero-actions .btn:hover{ background:var(--brass); border-color:var(--brass); color:#fff; }
+.hero .hero-actions .btn:hover{ background:var(--brass-dark); border-color:var(--brass-dark); color:#fff; }
.hero .hero-actions .btn-light{ background:transparent; color:#fff; }
.hero .hero-actions .btn-light:hover{ background:#fff; color:var(--ink); }
@@ -374,7 +374,7 @@ p:last-child{ margin-bottom:0; }
transition:color .12s ease,border-color .12s ease;
}
.proof-areas a:hover{ color:#fff; border-bottom-color:var(--sand); }
-.proof-sep{ color:rgba(255,255,255,.34); }
+.proof-sep{ color:rgba(255,255,255,.68); }
/* Section framework ------------------------------------------------------- */
.section{ padding:var(--section) 0; }
@@ -390,12 +390,9 @@ p:last-child{ margin-bottom:0; }
justify-content:space-between;
gap:24px;
flex-wrap:wrap;
- padding-bottom:22px;
- margin-bottom:clamp(36px,5vw,64px);
- border-bottom:1px solid var(--rule);
+ margin-bottom:clamp(28px,4vw,44px);
}
-.section--ink .section-head{ border-bottom-color:rgba(255,255,255,.18); }
-.section-head .eyebrow{ margin-bottom:14px; }
+.section-head .eyebrow{ margin-bottom:8px; }
.section-head h2{ max-width:20ch; }
.section-head .hint{
font-size:var(--t-meta);
@@ -409,8 +406,8 @@ p:last-child{ margin-bottom:0; }
.section-head .hint{ text-align:left; }
}
-/* Listings — editorial index rows, alternating sides. ---------------------- */
-.listing-index{ display:grid; gap:clamp(52px,7vw,96px); }
+/* Listings — consistent photo and detail columns. ------------------------- */
+.listing-index{ display:grid; gap:clamp(40px,5vw,64px); }
.listing{
display:grid;
@@ -418,7 +415,6 @@ p:last-child{ margin-bottom:0; }
gap:clamp(28px,5vw,64px);
align-items:center;
}
-.listing:nth-child(even) .listing-media{ order:2; }
.listing-media{
position:relative;
@@ -453,10 +449,9 @@ p:last-child{ margin-bottom:0; }
}
.listing-body h3{ margin:14px 0 4px; }
.listing-city{
- font-family:var(--serif);
- font-style:italic;
+ font-family:var(--sans);
font-weight:400;
- font-size:var(--t-lead);
+ font-size:16px;
color:var(--ink-60);
}
.listing-rule{
@@ -470,8 +465,6 @@ p:last-child{ margin-bottom:0; }
gap:8px 18px;
font-size:var(--t-meta);
font-weight:500;
- letter-spacing:.06em;
- text-transform:uppercase;
color:var(--ink-80);
}
.listing-specs li{ list-style:none; }
@@ -479,19 +472,14 @@ p:last-child{ margin-bottom:0; }
.listing-tags{
display:flex;
flex-wrap:wrap;
- gap:8px;
- margin:20px 0 0;
+ gap:6px 16px;
+ margin:16px 0 0;
padding:0;
}
.listing-tags li{
list-style:none;
- font-size:12px;
- font-weight:500;
- letter-spacing:.08em;
- text-transform:uppercase;
+ font-size:14px;
color:var(--ink-60);
- border:1px solid var(--rule);
- padding:6px 12px;
}
.listing-actions{
margin-top:28px;
@@ -521,7 +509,6 @@ p:last-child{ margin-bottom:0; }
@media (max-width:860px){
.listing{ grid-template-columns:1fr; gap:24px; }
- .listing:nth-child(even) .listing-media{ order:0; }
.listing-media{ max-width:none; }
}
@@ -565,18 +552,7 @@ p:last-child{ margin-bottom:0; }
}
@media (max-width:900px){ .reviews-grid{ grid-template-columns:1fr; max-width:66ch; } }
-.review{ position:relative; padding-top:18px; }
-.review::before{
- content:'\201C';
- position:absolute;
- top:-24px; left:-6px;
- font-family:var(--serif);
- font-size:96px;
- line-height:1;
- color:var(--brass);
- opacity:.34;
- pointer-events:none;
-}
+.review{ margin:0; }
.review blockquote{
margin:0;
position:relative;
@@ -586,12 +562,8 @@ p:last-child{ margin-bottom:0; }
}
.review figcaption{
margin-top:18px;
- padding-top:14px;
- border-top:1px solid var(--rule);
- font-size:12px;
+ font-size:14px;
font-weight:600;
- letter-spacing:.14em;
- text-transform:uppercase;
}
.review figcaption .src{
display:block;
@@ -641,9 +613,7 @@ p:last-child{ margin-bottom:0; }
.areas-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
- gap:1px;
- background:var(--rule);
- border:1px solid var(--rule);
+ gap:32px;
}
@media (max-width:900px){ .areas-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .areas-grid{ grid-template-columns:1fr; } }
@@ -651,7 +621,7 @@ p:last-child{ margin-bottom:0; }
.area-card{
display:block;
background:var(--paper);
- padding:32px 26px 28px;
+ padding:12px 0 20px;
transition:background .16s ease,color .16s ease;
}
.section--sand .area-card{ background:var(--sand-soft); }
@@ -666,17 +636,12 @@ p:last-child{ margin-bottom:0; }
.area-card .go{
display:inline-block;
margin-top:20px;
- font-size:12px;
+ font-size:14px;
font-weight:600;
- letter-spacing:.14em;
- text-transform:uppercase;
- color:var(--brass);
+ color:var(--brass-dark);
transition:color .16s ease;
}
-.area-card:hover{ background:var(--ink); color:#fff; }
-.area-card:hover h3{ color:#fff; }
-.area-card:hover p{ color:rgba(255,255,255,.72); }
-.area-card:hover .go{ color:var(--sand); }
+.area-card:hover h3,.area-card:hover .go{ color:var(--brass-dark); text-decoration:underline; text-underline-offset:4px; }
/* FAQ --------------------------------------------------------------------- */
.faq{ max-width:80ch; }
@@ -758,23 +723,19 @@ p:last-child{ margin-bottom:0; }
.field{ display:grid; gap:8px; }
.field > span{
- font-size:11px;
- font-weight:600;
- letter-spacing:.16em;
- text-transform:uppercase;
- color:var(--ink-60);
+ font-size:14px;
+ font-weight:500;
+ color:var(--ink-80);
}
.field .req{ color:var(--brass); }
input,textarea,select{
font:inherit;
font-size:16px; /* 16px stops iOS zoom-on-focus */
color:var(--ink);
- background:transparent;
- border:0;
- border-bottom:1px solid var(--rule-strong);
- border-radius:0;
- padding:12px 2px;
- outline:none;
+ background:#fff;
+ border:1px solid var(--rule-strong);
+ border-radius:2px;
+ padding:12px;
transition:border-color .14s ease;
}
textarea{ resize:vertical; min-height:104px; }
@@ -892,9 +853,9 @@ footer a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px
/* Area page — compact hero (no full-bleed photo). -------------------------- */
.page-hero{
padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,72px);
- border-bottom:1px solid var(--rule);
}
-.page-hero h1{ max-width:16ch; margin:18px 0 0; }
+.page-hero h1{ max-width:22ch; margin:18px 0 0; }
+.page-hero h1 em{ font-style:normal; }
.page-hero .lead{ margin-top:24px; }
/* Buttons here use the default .btn / .btn-ghost colours — no overrides needed. */
@@ -908,10 +869,9 @@ footer a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px
}
.chip-list li{
list-style:none;
- border:1px solid var(--rule);
- padding:9px 15px;
- font-size:13px;
- letter-spacing:.04em;
+ padding:5px 0;
+ margin-right:16px;
+ font-size:15px;
color:var(--ink-80);
}
@@ -990,15 +950,13 @@ body.property-promo-open{ overflow:hidden; }
position:absolute;
top:0;
left:0;
- background:var(--brass);
+ background:var(--brass-dark);
color:#fff;
font-family:var(--sans);
font-size:11px;
font-weight:600;
- letter-spacing:.16em;
- line-height:1;
+ line-height:1.4;
padding:10px 15px;
- text-transform:uppercase;
}
.property-promo-body{
align-self:center;
@@ -1007,8 +965,8 @@ body.property-promo-open{ overflow:hidden; }
.property-promo-body .eyebrow{ margin-bottom:14px; }
.property-promo-body h2{
max-width:11ch;
- font-size:clamp(38px,5.2vw,64px);
- line-height:.95;
+ font-size:clamp(32px,4vw,48px);
+ line-height:1.12;
}
.property-promo-rule{
width:54px;
@@ -1029,9 +987,7 @@ body.property-promo-open{ overflow:hidden; }
.property-promo-location{
margin:0;
color:var(--ink-60);
- font-family:var(--serif);
- font-size:17px;
- font-style:italic;
+ font-size:16px;
}
.property-promo-specs{
margin:20px 0 0;