diff --git a/prototype/styles.css b/prototype/styles.css index a0f1607..eff995b 100644 --- a/prototype/styles.css +++ b/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); - backdrop-filter: blur(8px); + background: color-mix(in srgb, var(--color-paper) 90%, transparent); + 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; - height: 2.1rem; + width: 2rem; + 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; - letter-spacing: 0.14em; + font-size: 0.65rem; + 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); - border-color: var(--color-accent); - color: var(--color-accent-ink); + background: var(--color-gold-deep); + border-color: var(--color-gold-deep); + 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-underline-offset: 0.2em; + text-decoration-color: var(--color-gold); + text-underline-offset: 0.22em; white-space: nowrap; } .text-link:hover { - color: var(--color-accent); - text-decoration-color: var(--color-accent); + color: var(--color-gold-deep); +} + +/* 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, - .founder { - grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); + .split--flip { + grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } - .service--flip .service__media, - .founder .founder__media { + .split--flip .split__media { order: 2; } - .service--flip .service__copy, - .founder .founder__copy { + .split--flip .split__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, -.section h2, -.service h3, -.mem h3, -.founder h2 { +h1, +h2, +h3 { font-family: var(--font-display); font-style: normal; font-weight: 500; letter-spacing: -0.01em; - line-height: 1.08; - margin: 0 0 var(--space-md); + line-height: 1.12; 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 > * { - max-width: 1120px; - margin-left: auto; - margin-right: auto; -} - -.section--narrow.section--band > * { - max-width: 42rem; +.section--narrow .narrow { + max-width: 40rem; } .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 { - min-width: 0; -} - -.service-card img { +.service-pair article 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 { - font-size: var(--text-lg); - margin-bottom: var(--space-xs); -} - -/* Memberships */ +/* Membership */ .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); - align-items: stretch; + grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } } @@ -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); - color: var(--color-paper); - border-color: var(--color-ink); -} - -.mem--lead .mem__kicker, -.mem--lead p, -.mem--lead li { - color: color-mix(in oklch, var(--color-paper) 82%, transparent); + background: var(--color-dark); + color: var(--color-on-dark); + border-color: var(--color-dark); } .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); - border-color: var(--color-accent); - color: var(--color-accent-ink); + background: var(--color-gold); + border-color: var(--color-gold); + 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 */ -.founder { - padding-top: 0; -} - +/* Ashley */ .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; - font-family: var(--font-outlier); + padding: 0 0 0 var(--space-md); + 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); - padding-left: var(--space-md); + color: var(--color-charcoal); } /* 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; - max-width: 28ch; + line-height: 1.3; + 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 */ -body > header > .site-header__inner, -body > main > .hero, -body > main > .ribbon, -body > main > .section:not(.section--band), -body > footer > .site-footer__inner { - 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; - } +.gold-rule { + width: 3rem; + height: 2px; + background: var(--color-gold); + border: 0; + margin: 0 0 var(--space-lg); } @media (prefers-reduced-motion: reduce) { @@ -664,8 +671,7 @@ body > footer > .site-footer__inner { scroll-behavior: auto; } - .btn, - a { + .btn { transition: none; } }