/* Luxelle Salon Studios — shared stylesheet * * Single source of truth for every page. Each HTML file used to carry its own * copy of these rules; four copies of the design tokens drift apart the moment * someone edits one file and not the others. * * Structure: * 1. Shared — tokens, base type, header/nav shell, layout helpers. * 2. .page-home — home page only (hero, stylist cards, grand opening, visit). * 3. .page-profile — stylist profile pages only. * 4. Responsive — shared breakpoints. * * Why the page scopes: a handful of class names (.btn, .chip, .highlights, * .socials, footer) are deliberately styled differently on the home page than on * a profile. Scoping by a class lets both live here without fighting. * * IMPORTANT — components are scoped as a whole. If any rule for a component * differs between page types, EVERY rule for that component is page-scoped, * including its modifiers and :hover states. Leaving e.g. `.btn.ghost` unscoped * while `.btn` is scoped gives them equal specificity, and the later scoped rule * silently wins — which is how the ghost buttons lost their gold text once. * Add new rules inside the matching scope, not the shared block. * * Set the body class: or . * Deployed to /assets/site.css — see deploy.sh. */ /* ============ 1. Shared ============ */ :root { --bg: #141110; --panel: #1e1815; --panel-2: #241d19; --gold: #e9c9a3; --rose: #c9a999; --text: #cbb8a5; --text-dim: #a4948a; --head: #efe4d6; --line: rgba(233, 201, 163, 0.14); --line-strong: rgba(233, 201, 163, 0.28); --stripe-a: #241d19; --stripe-b: #1a1512; --maxw: 1120px; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); line-height: 1.7; -webkit-font-smoothing: antialiased; } h1, h2, h3, .display { font-family: Fraunces, Georgia, "Times New Roman", serif; color: var(--head); font-weight: 500; line-height: 1.1; text-wrap: balance; } a { color: var(--gold); } .label { font-family: Inter, sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rose); } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 3rem); } header.site { position: sticky; top: 0; z-index: 50; background: rgba(20, 17, 16, 0.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(0.7rem, 1.4vw, 1.1rem) 0; } .foot-grid { display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; justify-content: space-between; align-items: flex-start; } .copyright { margin-top: 2rem; font-size: 0.78rem; color: var(--text-dim); } /* ============ 2. Home page ============ */ .page-home img { max-width: 100%; display: block; } .page-home .ph { background: repeating-linear-gradient(45deg, var(--stripe-a) 0 14px, var(--stripe-b) 14px 28px); border: 1px solid var(--line); } .page-home .brand img { height: clamp(50px, 3vw + 1.8rem, 76px); width: auto; } .page-home .nav-links { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2.4vw, 2.2rem); list-style: none; } .page-home .nav-links a { white-space: nowrap; } .page-home .nav-links a { font-family: Inter, sans-serif; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); text-decoration: none; padding: 0.3rem 0; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .page-home .nav-links a:hover, .page-home .nav-links a:focus-visible { color: var(--gold); border-bottom-color: var(--gold); outline: none; } .page-home .hero { position: relative; min-height: clamp(460px, 74vh, 720px); display: flex; align-items: center; overflow: hidden; } .page-home .hero h1 { font-size: clamp(2.6rem, 6vw + 0.5rem, 5.4rem); letter-spacing: -0.01em; max-width: 15ch; } .page-home .hero .tagline { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--text); max-width: 42ch; } .page-home .hero .eyebrow { margin-bottom: 0.3rem; } .page-home .hero .btn { justify-self: start; } .page-home .hero-bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 15%, rgba(233, 201, 163, 0.12), transparent 55%), repeating-linear-gradient(45deg, #201a16 0 16px, #171210 16px 32px); z-index: 0; } .page-home .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,17,16,0.35) 0%, rgba(20,17,16,0.7) 70%, var(--bg) 100%); } .page-home .hero-inner { position: relative; z-index: 1; width: 100%; } .page-home .hero-inner .wrap { display: grid; gap: 1.4rem; max-width: var(--maxw); } .page-home .btn { display: inline-block; align-self: flex-start; background: var(--gold); color: #1a1410; text-decoration: none; font-family: Inter, sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.95rem 1.8rem; border: 1px solid var(--gold); border-radius: 2px; transition: background 0.2s, color 0.2s; } .page-home .btn:hover, .page-home .btn:focus-visible { background: transparent; color: var(--gold); outline: none; } .page-home .btn.ghost { background: transparent; color: var(--gold); } .page-home .btn.ghost:hover, .page-home .btn.ghost:focus-visible { background: var(--gold); color: #1a1410; } .page-home .btn.small { padding: 0.7rem 1.3rem; font-size: 0.74rem; } .page-home section.block { padding: clamp(3.5rem, 8vw, 7rem) 0; } .page-home section.block.alt { background: var(--panel); } .page-home section.block.alt .card { background: var(--panel-2); } .page-home .section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); display: grid; gap: 0.9rem; } .page-home .section-head h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); } .page-home .section-head p { color: var(--text-dim); } .page-home .stylist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); } .page-home .card { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.6rem, 2.6vw, 2.2rem); display: flex; flex-direction: column; } .page-home .card h3 { font-size: 1.5rem; } .page-home .card .specialty { font-family: Inter, sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose); margin-top: 0.35rem; } .page-home .card .bio { font-size: 0.95rem; color: var(--text-dim); margin-bottom: 1.2rem; } .page-home .card .foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.9rem; height: 100%; justify-content: flex-end; } .page-home .card .actions { display: grid; gap: 0.9rem; } .page-home .card-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.3rem; } .page-home .headshot { flex: none; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; position: relative; } .page-home .headshot img { width: 100%; height: 100%; object-fit: cover; display: block; } .page-home .headshot .initial { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Fraunces, serif; font-size: 2rem; color: var(--gold); } .page-home .card-link { color: var(--head); text-decoration: none; border-bottom: 1px solid transparent; } .page-home .card-link:hover, .page-home .card-link:focus-visible { color: var(--gold); border-bottom-color: var(--gold); outline: none; } .page-home .chip { display: inline-block; font-family: Inter, sans-serif; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.24rem 0.6rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--rose); margin-top: 0.55rem; } .page-home .chip.live { color: var(--gold); border-color: var(--gold); } .page-home .price-list { list-style: none; display: grid; gap: 0.7rem; margin: 0 0 1.4rem; } .page-home .price-list li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); } .page-home .price-list li:last-child { border-bottom: none; padding-bottom: 0; } .page-home .price-list .svc { color: var(--text); } .page-home .price-list .amt { font-family: Inter, sans-serif; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; } .page-home .socials { display: flex; flex-wrap: wrap; gap: 0.6rem 1.1rem; } .page-home .socials a { font-family: Inter, sans-serif; font-size: 0.76rem; color: var(--rose); text-decoration: none; border-bottom: 1px solid transparent; } .page-home .socials a:hover, .page-home .socials a:focus-visible { color: var(--gold); border-bottom-color: var(--gold); outline: none; } .page-home .visit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.4rem, 3vw, 2.5rem); align-items: start; } .page-home .visit-info dl { display: grid; gap: 1.3rem; } .page-home .visit-info dt { font-family: Inter, sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose); margin-bottom: 0.3rem; } .page-home .visit-info dd { color: var(--head); font-size: 1.05rem; } .page-home .visit-info a { color: var(--gold); text-decoration: none; border-bottom: 1px solid transparent; } .page-home .visit-info a:hover, .page-home .visit-info a:focus-visible { border-bottom-color: var(--gold); outline: none; } .page-home .map { min-height: 320px; height: 100%; width: 100%; border: 1px solid var(--line); border-radius: 4px; filter: grayscale(0.35) contrast(0.95); } .page-home .prose { max-width: 62ch; } .page-home .prose p { color: var(--text); } .page-home .prose p + p { margin-top: 1rem; } .page-home .prose + .section-head, .page-home .byline + .section-head { margin-top: clamp(2.6rem, 5vw, 4.2rem); } .page-home .byline { margin-top: 1.3rem; font-family: Inter, sans-serif; font-size: 0.85rem; letter-spacing: 0.05em; color: var(--rose); } .page-home .byline a { color: var(--head); text-decoration: none; border-bottom: 1px solid var(--line-strong); } .page-home .byline a:hover, .page-home .byline a:focus-visible { color: var(--gold); border-bottom-color: var(--gold); outline: none; } .page-home .highlights { list-style: none; display: grid; gap: clamp(1.1rem, 2vw, 1.5rem); margin-top: clamp(1.8rem, 3vw, 2.4rem); max-width: 64ch; } .page-home .highlights li { position: relative; padding-left: 1.6rem; color: var(--text-dim); } .page-home .highlights li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.85rem; height: 2px; background: var(--gold); } .page-home .highlights strong { display: block; color: var(--head); font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 1.15rem; margin-bottom: 0.15rem; } .page-home .event { background: var(--bg); border: 1px solid var(--line-strong); border-radius: 4px; padding: clamp(1.7rem, 3vw, 2.6rem); } .page-home .event dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(1.3rem, 2.6vw, 2rem); } .page-home .event dt { font-family: Inter, sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose); } .page-home .event dd { margin-top: 0.35rem; color: var(--head); font-size: 1.1rem; line-height: 1.5; } .page-home footer.site { border-top: 1px solid var(--line); padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--bg); } .page-home footer.site img { height: 62px; width: auto; opacity: 0.85; } .page-home footer.site .addr { font-size: 0.9rem; color: var(--text-dim); line-height: 1.9; } .page-home footer.site a { color: var(--rose); text-decoration: none; } .page-home footer.site a:hover { color: var(--gold); } /* ============ 3. Stylist profile pages ============ */ .page-profile .brand img { height: clamp(50px, 3vw + 1.8rem, 76px); width: auto; display: block; } .page-profile .nav-links { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2.4vw, 2.2rem); list-style: none; } .page-profile .nav-links a { white-space: nowrap; font-family: Inter, sans-serif; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); text-decoration: none; padding: 0.3rem 0; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .page-profile .nav-links a:hover, .page-profile .nav-links a:focus-visible { color: var(--gold); border-bottom-color: var(--gold); outline: none; } .page-profile .btn { display: inline-block; background: var(--gold); color: #1a1410; text-decoration: none; font-family: Inter, sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.95rem 1.8rem; border: 1px solid var(--gold); border-radius: 2px; transition: background 0.2s, color 0.2s; } .page-profile .btn:hover, .page-profile .btn:focus-visible { background: transparent; color: var(--gold); outline: none; } .page-profile .btn.ghost { background: transparent; color: var(--gold); } .page-profile .btn.ghost:hover, .page-profile .btn.ghost:focus-visible { background: var(--gold); color: #1a1410; } .page-profile .chip { display: inline-block; margin-top: 0.7rem; font-family: Inter, sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.28rem 0.7rem; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold); } .page-profile .socials { display: flex; flex-wrap: wrap; gap: 0.6rem 1.3rem; } .page-profile .socials a { font-family: Inter, sans-serif; font-size: 0.82rem; color: var(--rose); text-decoration: none; border-bottom: 1px solid transparent; } .page-profile .socials a:hover, .page-profile .socials a:focus-visible { color: var(--gold); border-bottom-color: var(--gold); outline: none; } .page-profile .highlights { list-style: none; display: grid; gap: clamp(1rem, 2vw, 1.4rem); margin-top: clamp(1.4rem, 3vw, 2rem); max-width: 60ch; } .page-profile .highlights li { position: relative; padding-left: 1.5rem; color: var(--head); font-family: Fraunces, Georgia, serif; font-size: 1.1rem; } .page-profile .highlights li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.8rem; height: 2px; background: var(--gold); } .page-profile footer.site { border-top: 1px solid var(--line); padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--bg); margin-top: clamp(2rem, 5vw, 4rem); } .page-profile footer.site img { height: 62px; width: auto; opacity: 0.85; display: block; } .page-profile footer.site .addr { font-size: 0.9rem; color: var(--text-dim); line-height: 1.9; } .page-profile footer.site a { color: var(--rose); text-decoration: none; } .page-profile footer.site a:hover { color: var(--gold); } .page-profile main { max-width: 60rem; margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 3rem); } .page-profile .back { display: inline-block; margin-top: clamp(1.6rem, 3vw, 2.4rem); font-family: Inter, sans-serif; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose); text-decoration: none; } .page-profile .back:hover, .page-profile .back:focus-visible { color: var(--gold); outline: none; } .page-profile .profile-head { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2rem); flex-wrap: wrap; padding: clamp(1.6rem, 4vw, 2.8rem) 0 clamp(1.2rem, 3vw, 2rem); } .page-profile .avatar { flex: none; width: clamp(110px, 20vw, 150px); height: clamp(110px, 20vw, 150px); border-radius: 50%; position: relative; background: repeating-linear-gradient(45deg, var(--stripe-a) 0 14px, var(--stripe-b) 14px 28px); border: 1px solid var(--line-strong); overflow: hidden; } .page-profile .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; } .page-profile .avatar .initial { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Fraunces, serif; font-size: clamp(2.4rem, 6vw, 3.4rem); color: var(--gold); } .page-profile .profile-meta h1 { font-size: clamp(2.6rem, 6vw, 4rem); } .page-profile .profile-meta .specialty { font-family: Inter, sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose); margin-top: 0.5rem; } .page-profile .bio { max-width: 62ch; padding: clamp(1.2rem, 3vw, 2rem) 0; border-top: 1px solid var(--line); } .page-profile .bio p { color: var(--text); } .page-profile .bio p + p { margin-top: 1rem; } .page-profile .heart { color: var(--rose); } .page-profile section.slice { padding: clamp(1.8rem, 4vw, 3rem) 0; border-top: 1px solid var(--line); } .page-profile section.slice h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin: 0.7rem 0 0.4rem; } .page-profile section.slice p { max-width: 62ch; color: var(--text); } .page-profile section.slice p + p { margin-top: 1rem; } .page-profile .connect { display: flex; flex-wrap: wrap; gap: 0.9rem 1.1rem; margin-top: clamp(1.4rem, 3vw, 2rem); align-items: center; } /* ============ 4. Responsive ============ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* :is(...) carries the same two-class weight as the page-scoped rules above, so these still win inside the breakpoint. */ @media (max-width: 640px) { :is(.page-home, .page-profile) .nav { flex-direction: column; gap: 0.55rem; } :is(.page-home, .page-profile) .brand img { height: 72px; } :is(.page-home, .page-profile) .nav-links { gap: 1.4rem; font-size: 0.72rem; justify-content: center; } :is(.page-home, .page-profile) .nav-links a { letter-spacing: 0.08em; } }