prototype: styles v2 — soft spa elevated

prototype/styles.css

@@ -1,4 +1,4 @@
-/* Hallmark · styles for Phoenix Split Studio prototype */
+/* Phoenix homepage v2 — Ashley vision · soft elevated spa */
 
 *,
 *::before,
@@ -19,7 +19,7 @@ body {
   margin: 0;
   font-family: var(--font-body);
   font-size: var(--text-base);
-  line-height: 1.6;
+  line-height: 1.65;
   color: var(--color-ink);
   background: var(--color-paper);
   -webkit-font-smoothing: antialiased;
@@ -32,12 +32,12 @@ img {
 }
 
 a {
-  color: var(--color-accent);
+  color: var(--color-gold-deep);
   text-underline-offset: 0.18em;
 }
 
 a:hover {
-  text-decoration-thickness: 2px;
+  color: var(--color-ink);
 }
 
 a:focus-visible,
@@ -74,18 +74,18 @@ input:focus-visible {
   border: 0;
 }
 
-/* Header — edge-aligned, sparse */
+/* Header */
 .site-header {
   position: sticky;
   top: 0;
   z-index: 300;
-  background: color-mix(in oklch, var(--color-paper) 92%, transparent);
+  background: color-mix(in srgb, var(--color-paper) 90%, transparent);
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--color-rule);
 }
 
 .site-header__inner {
-  max-width: var(--page);
+  width: min(1080px, calc(100% - 2.5rem));
   margin: 0 auto;
   min-height: var(--banner-height);
   display: flex;
@@ -98,14 +98,14 @@ input:focus-visible {
 .wordmark {
   display: inline-flex;
   align-items: center;
-  gap: 0.65rem;
+  gap: 0.6rem;
   text-decoration: none;
   color: var(--color-ink);
 }
 
 .wordmark img {
-  width: 2.1rem;
+  width: 2rem;
-  height: 2.1rem;
+  height: 2rem;
   object-fit: contain;
 }
 
@@ -117,17 +117,18 @@ input:focus-visible {
 
 .wordmark__name {
   font-family: var(--font-display);
-  font-size: 1.45rem;
+  font-size: 1.4rem;
   font-weight: 500;
   font-style: normal;
   letter-spacing: 0.01em;
 }
 
 .wordmark__sub {
-  font-size: 0.68rem;
+  font-size: 0.65rem;
-  letter-spacing: 0.14em;
+  letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--color-muted);
+  font-weight: 500;
 }
 
 .nav {
@@ -137,7 +138,7 @@ input:focus-visible {
 }
 
 .nav a {
-  color: var(--color-ink);
+  color: var(--color-charcoal);
   text-decoration: none;
   font-size: var(--text-sm);
   font-weight: 500;
@@ -145,10 +146,10 @@ input:focus-visible {
 }
 
 .nav a:hover {
-  color: var(--color-accent);
+  color: var(--color-gold-deep);
 }
 
-@media (min-width: 860px) {
+@media (min-width: 820px) {
   .nav {
     display: flex;
   }
@@ -160,7 +161,7 @@ input:focus-visible {
   align-items: center;
   justify-content: center;
   min-height: 44px;
-  padding: 0.65rem 1.15rem;
+  padding: 0.7rem 1.25rem;
   border: 1px solid transparent;
   border-radius: var(--radius);
   font-family: var(--font-body);
@@ -182,30 +183,46 @@ input:focus-visible {
 }
 
 .btn--primary:hover {
-  background: var(--color-accent);
+  background: var(--color-gold-deep);
-  border-color: var(--color-accent);
+  border-color: var(--color-gold-deep);
-  color: var(--color-accent-ink);
+  color: #fff;
 }
 
 .btn--primary:active {
   transform: translateY(1px);
 }
 
+.btn--soft {
+  background: transparent;
+  color: var(--color-ink);
+  border-color: var(--color-rule);
+}
+
+.btn--soft:hover {
+  border-color: var(--color-gold);
+  background: var(--color-paper-2);
+}
+
 .text-link {
   font-weight: 500;
   color: var(--color-ink);
   text-decoration: underline;
-  text-decoration-color: var(--color-rule);
+  text-decoration-color: var(--color-gold);
-  text-underline-offset: 0.2em;
+  text-underline-offset: 0.22em;
   white-space: nowrap;
 }
 
 .text-link:hover {
-  color: var(--color-accent);
+  color: var(--color-gold-deep);
-  text-decoration-color: var(--color-accent);
+}
+
+/* Layout helpers */
+.wrap {
+  width: min(1080px, calc(100% - 2.5rem));
+  margin-left: auto;
+  margin-right: auto;
 }
 
-/* Split layout */
 .split {
   display: grid;
   gap: var(--space-xl);
@@ -214,87 +231,66 @@ input:focus-visible {
 
 @media (min-width: 900px) {
   .split {
-    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
     gap: var(--space-3xl);
   }
 
-  .service--flip,
+  .split--flip {
-  .founder {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
   }
 
-  .service--flip .service__media,
+  .split--flip .split__media {
-  .founder .founder__media {
     order: 2;
   }
 
-  .service--flip .service__copy,
+  .split--flip .split__copy {
-  .founder .founder__copy {
     order: 1;
   }
 }
 
-/* Hero */
-.hero {
-  max-width: var(--page);
-  margin: 0 auto;
-  padding: var(--space-2xl) 0 var(--space-3xl);
-}
-
-.hero__media {
-  margin: 0;
-  background: var(--color-paper-2);
-}
-
-.hero__media img {
-  width: 100%;
-  aspect-ratio: 16 / 11;
-  object-fit: cover;
-}
-
-.hero__copy {
-  max-width: 34rem;
-}
-
 .place {
   margin: 0 0 var(--space-md);
   font-size: 0.72rem;
   font-weight: 600;
-  letter-spacing: 0.16em;
+  letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--color-muted);
 }
 
-.hero h1,
+h1,
-.section h2,
+h2,
-.service h3,
+h3 {
-.mem h3,
-.founder h2 {
   font-family: var(--font-display);
   font-style: normal;
   font-weight: 500;
   letter-spacing: -0.01em;
-  line-height: 1.08;
+  line-height: 1.12;
-  margin: 0 0 var(--space-md);
   color: var(--color-ink);
+  margin: 0 0 var(--space-md);
   overflow-wrap: anywhere;
   min-width: 0;
 }
 
-.hero h1 {
+h1 {
   font-size: var(--text-display);
-  max-width: 14ch;
+}
+
+h2 {
+  font-size: var(--text-2xl);
+}
+
+h3 {
+  font-size: var(--text-xl);
 }
 
 .lede {
   margin: 0 0 var(--space-xl);
   font-size: var(--text-md);
-  line-height: 1.55;
+  line-height: 1.6;
   max-width: var(--measure);
-  color: color-mix(in oklch, var(--color-ink) 88%, var(--color-muted));
+  color: color-mix(in srgb, var(--color-ink) 88%, var(--color-muted));
 }
 
-.hero__actions,
 .cta-row {
   display: flex;
   flex-wrap: wrap;
@@ -311,9 +307,45 @@ input:focus-visible {
   line-height: 1.5;
 }
 
-/* Awards ribbon — one line, not a modal/section */
+/* Hero */
+.hero {
+  padding: var(--space-2xl) 0 var(--space-3xl);
+}
+
+.hero__media {
+  margin: 0;
+  background: var(--color-paper-2);
+  border-radius: var(--radius);
+  overflow: hidden;
+  min-width: 0;
+}
+
+.hero__media img {
+  width: 100%;
+  aspect-ratio: 5 / 4;
+  object-fit: cover;
+}
+
+.hero__copy {
+  max-width: 32rem;
+}
+
+.hero h1 {
+  max-width: 16ch;
+}
+
+.trust-line {
+  margin: 0 0 var(--space-lg);
+  padding-left: var(--space-md);
+  border-left: 2px solid var(--color-gold);
+  font-size: var(--text-md);
+  line-height: 1.5;
+  color: var(--color-charcoal);
+  max-width: 38ch;
+}
+
+/* Soft ribbon */
 .ribbon {
-  max-width: var(--page);
   margin: 0 auto var(--space-3xl);
   padding: var(--space-md) 0;
   border-top: 1px solid var(--color-rule);
@@ -329,54 +361,79 @@ input:focus-visible {
 
 /* Sections */
 .section {
-  max-width: var(--page);
-  margin: 0 auto;
   padding: var(--space-3xl) 0;
 }
 
-.section--narrow {
-  max-width: min(42rem, calc(100% - 2.5rem));
-}
-
 .section--band {
   background: var(--color-band);
-  max-width: none;
-  padding-left: max(1.25rem, calc((100% - 1120px) / 2));
-  padding-right: max(1.25rem, calc((100% - 1120px) / 2));
 }
 
-.section--band > * {
+.section--narrow .narrow {
-  max-width: 1120px;
+  max-width: 40rem;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.section--narrow.section--band > * {
-  max-width: 42rem;
 }
 
 .section__intro {
-  max-width: 40rem;
+  max-width: 38rem;
   margin-bottom: var(--space-2xl);
 }
 
-.section h2 {
-  font-size: var(--text-2xl);
-}
-
 .section p {
   margin: 0 0 var(--space-md);
   max-width: var(--measure);
 }
 
+/* Decision path — not three equal cards */
+.decide {
+  list-style: none;
+  margin: 0 0 var(--space-xl);
+  padding: 0;
+  border-top: 1px solid var(--color-rule);
+}
+
+.decide li {
+  border-bottom: 1px solid var(--color-rule);
+}
+
+.decide a {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-md);
+  padding: var(--space-md) 0;
+  text-decoration: none;
+  color: var(--color-ink);
+}
+
+.decide a:hover .decide__go {
+  color: var(--color-gold-deep);
+}
+
+.decide__label {
+  font-family: var(--font-display);
+  font-size: var(--text-lg);
+}
+
+.decide__go {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--color-muted);
+  white-space: nowrap;
+}
+
 /* Services */
 .service {
   margin-bottom: var(--space-3xl);
 }
 
+.service:last-child {
+  margin-bottom: 0;
+}
+
 .service__media {
   margin: 0;
   background: var(--color-paper-2);
+  border-radius: var(--radius);
+  overflow: hidden;
   min-width: 0;
 }
 
@@ -386,41 +443,28 @@ input:focus-visible {
   object-fit: cover;
 }
 
-.service__copy h3 {
-  font-size: var(--text-xl);
-}
-
 .service-pair {
   display: grid;
   gap: var(--space-xl);
-  grid-template-columns: 1fr;
+  margin-top: var(--space-2xl);
 }
 
 @media (min-width: 700px) {
   .service-pair {
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    gap: var(--space-2xl);
   }
 }
 
-.service-card {
+.service-pair article img {
-  min-width: 0;
-}
-
-.service-card img {
   width: 100%;
   aspect-ratio: 5 / 4;
   object-fit: cover;
+  border-radius: var(--radius);
   margin-bottom: var(--space-md);
   background: var(--color-paper-2);
 }
 
-.service-card h3 {
+/* Membership */
-  font-size: var(--text-lg);
-  margin-bottom: var(--space-xs);
-}
-
-/* Memberships */
 .mem-grid {
   display: grid;
   gap: var(--space-xl);
@@ -428,8 +472,7 @@ input:focus-visible {
 
 @media (min-width: 800px) {
   .mem-grid {
-    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
-    align-items: stretch;
   }
 }
 
@@ -437,23 +480,24 @@ input:focus-visible {
   padding: var(--space-xl);
   background: var(--color-paper);
   border: 1px solid var(--color-rule);
+  border-radius: var(--radius);
 }
 
 .mem--lead {
-  background: var(--color-ink);
+  background: var(--color-dark);
-  color: var(--color-paper);
+  color: var(--color-on-dark);
-  border-color: var(--color-ink);
+  border-color: var(--color-dark);
-}
-
-.mem--lead .mem__kicker,
-.mem--lead p,
-.mem--lead li {
-  color: color-mix(in oklch, var(--color-paper) 82%, transparent);
 }
 
 .mem--lead h3,
 .mem--lead .mem__price {
-  color: var(--color-paper);
+  color: var(--color-on-dark);
+}
+
+.mem--lead p,
+.mem--lead li,
+.mem--lead .mem__kicker {
+  color: var(--color-on-dark-muted);
 }
 
 .mem--lead .btn--primary {
@@ -463,24 +507,20 @@ input:focus-visible {
 }
 
 .mem--lead .btn--primary:hover {
-  background: var(--color-accent);
+  background: var(--color-gold);
-  border-color: var(--color-accent);
+  border-color: var(--color-gold);
-  color: var(--color-accent-ink);
+  color: var(--color-ink);
 }
 
 .mem__kicker {
   margin: 0 0 var(--space-xs);
   font-size: 0.72rem;
-  letter-spacing: 0.14em;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
   font-weight: 600;
   color: var(--color-muted);
 }
 
-.mem h3 {
-  font-size: var(--text-xl);
-}
-
 .mem__price {
   margin: 0 0 var(--space-lg);
   font-family: var(--font-display);
@@ -489,7 +529,6 @@ input:focus-visible {
 
 .mem__price span {
   font-size: var(--text-2xl);
-  font-weight: 500;
 }
 
 .mem ul {
@@ -501,13 +540,11 @@ input:focus-visible {
   margin-bottom: var(--space-xs);
 }
 
-/* Founder */
+/* Ashley */
-.founder {
-  padding-top: 0;
-}
-
 .founder__media {
   margin: 0;
+  border-radius: var(--radius);
+  overflow: hidden;
   background: var(--color-paper-2);
   min-width: 0;
 }
@@ -521,24 +558,23 @@ input:focus-visible {
 
 .founder blockquote {
   margin: 0 0 var(--space-lg);
-  padding: 0;
+  padding: 0 0 0 var(--space-md);
-  font-family: var(--font-outlier);
+  border-left: 2px solid var(--color-pink);
+  font-family: var(--font-display);
   font-size: var(--text-md);
   line-height: 1.45;
-  border-left: 2px solid var(--color-accent);
+  color: var(--color-charcoal);
-  padding-left: var(--space-md);
 }
 
 /* Quotes */
 .quote {
   margin: 0 0 var(--space-2xl);
-  padding: 0;
 }
 
 .quote blockquote {
   margin: 0 0 var(--space-sm);
   padding: 0;
-  font-family: var(--font-outlier);
+  font-family: var(--font-display);
   font-size: var(--text-lg);
   line-height: 1.4;
   font-weight: 400;
@@ -569,11 +605,11 @@ input:focus-visible {
 }
 
 .list-form input:hover {
-  border-color: color-mix(in oklch, var(--color-ink) 35%, var(--color-rule));
+  border-color: color-mix(in srgb, var(--color-ink) 25%, var(--color-rule));
 }
 
 .list-form input:focus {
-  border-color: var(--color-accent);
+  border-color: var(--color-gold);
   outline: 2px solid var(--color-focus);
   outline-offset: 1px;
 }
@@ -582,30 +618,24 @@ input:focus-visible {
   width: fit-content;
 }
 
-/* Visit */
 .address {
   font-size: var(--text-md);
-  line-height: 1.5;
+  line-height: 1.55;
 }
 
 /* Footer */
 .site-footer {
   border-top: 1px solid var(--color-rule);
-  margin-top: var(--space-3xl);
+  margin-top: var(--space-2xl);
   padding: var(--space-3xl) 0 var(--space-2xl);
   background: var(--color-paper-2);
 }
 
-.site-footer__inner {
-  max-width: var(--page);
-  margin: 0 auto;
-}
-
 .site-footer__statement {
   font-family: var(--font-display);
   font-size: var(--text-xl);
-  line-height: 1.25;
+  line-height: 1.3;
-  max-width: 28ch;
+  max-width: 26ch;
   margin: 0 0 var(--space-xl);
 }
 
@@ -625,38 +655,15 @@ input:focus-visible {
   border-top: 1px solid var(--color-rule);
   font-size: 0.8rem;
   color: var(--color-muted);
-  max-width: 60ch;
+  max-width: 58ch;
 }
 
-/* Page gutters */
+.gold-rule {
-body > header > .site-header__inner,
+  width: 3rem;
-body > main > .hero,
+  height: 2px;
-body > main > .ribbon,
+  background: var(--color-gold);
-body > main > .section:not(.section--band),
+  border: 0;
-body > footer > .site-footer__inner {
+  margin: 0 0 var(--space-lg);
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-
-@media (min-width: 900px) {
-  body > header > .site-header__inner,
-  body > main > .hero,
-  body > main > .ribbon,
-  body > main > .section:not(.section--band),
-  body > footer > .site-footer__inner {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .hero,
-  .ribbon,
-  .section:not(.section--band),
-  .site-header__inner,
-  .site-footer__inner {
-    width: min(1120px, calc(100% - 2.5rem));
-    margin-left: auto;
-    margin-right: auto;
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -664,8 +671,7 @@ body > footer > .site-footer__inner {
     scroll-behavior: auto;
   }
 
-  .btn,
+  .btn {
-  a {
     transition: none;
   }
 }