/* ============================================================ SERVICE LANDING PAGES — Supplemental Styles Creative Touch Day Spa & Salon Supplements css/style.css — does NOT duplicate base styles. All rules are scoped to body.page-* classes. Page classes (add to element on each service page): body.page-massage body.page-balayage body.page-facials body.page-keratin body.page-waxing body.page-nails body.page-spray-tan body.page-lash-lift body.page-prom body.page-home body.page-about Breakpoints (mobile-first): Base: < 480px Small: 480px+ Tablet: 768px+ Desktop:1024px+ ============================================================ */ /* ------------------------------------------------------------ Reduced Motion — wraps all animation/transition overrides ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .page-massage .sp-wave-separator::after, .page-nails .sp-shimmer-hero::after, .page-spray-tan .sp-hero-glow::after, .page-lash-lift .sp-hero-shimmer::after { animation: none; } .sp-comparison-card, .sp-editorial-card, .sp-concern-badge, .sp-treatment-col, .sp-service-cell, .sp-nail-card, .sp-shade-bar, .sp-checklist-item, .sp-timeline-item { transition: none; } } /* ============================================================ 1. MASSAGE — Calm, flowing, organic, earth tones ============================================================ */ /* Hero: photo background */ body.page-massage .hero-bg { background: url('../img/massage-hero.jpg') center/cover no-repeat; } body.page-massage .hero-overlay { background: linear-gradient( to bottom, rgba(30, 25, 25, 0.15) 0%, rgba(30, 25, 25, 0.45) 100% ); } /* Wave separator between sections */ .sp-wave-separator { position: relative; overflow: hidden; } .sp-wave-separator::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background: var(--color-light); clip-path: ellipse(55% 100% at 50% 100%); pointer-events: none; } /* Massage: services section gets wave top edge */ body.page-massage .section.about { background-color: #F5EFEC; } body.page-massage .section.services-overview { background-color: var(--color-light); position: relative; } body.page-massage .section.services-overview::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 64px; background: #F5EFEC; clip-path: ellipse(55% 100% at 50% 0%); pointer-events: none; z-index: 0; } /* Comparison grid — Swedish / Deep Tissue / Hot Stone side by side */ .sp-massage-comparison { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 48px 0; } @media (min-width: 768px) { .sp-massage-comparison { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .sp-massage-comparison { grid-template-columns: repeat(3, 1fr); } } .sp-comparison-card { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 32px 28px; transition: transform var(--transition), box-shadow var(--transition); } .sp-comparison-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .sp-comparison-card--featured { border-color: var(--color-accent); position: relative; } .sp-comparison-card--featured::before { content: 'Most Popular'; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: var(--color-accent); color: var(--color-white); font-family: var(--font-body); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 14px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .sp-comparison-card__type { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold-text); margin-bottom: 8px; } .sp-comparison-card__name { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 500; color: var(--color-dark); margin-bottom: 12px; line-height: 1.2; } .sp-comparison-card__desc { font-size: 0.875rem; color: var(--color-muted); line-height: 1.7; flex: 1; margin-bottom: 24px; } .sp-comparison-card__meta { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin-bottom: 20px; } .sp-comparison-card__meta-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8125rem; } .sp-comparison-card__meta-label { color: var(--color-muted); font-weight: 400; } .sp-comparison-card__meta-value { font-weight: 600; color: var(--color-dark); } .sp-comparison-card__price { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 500; color: var(--color-dark); margin-bottom: 4px; } .sp-comparison-card__price-note { font-size: 0.75rem; color: var(--color-muted); display: block; margin-bottom: 16px; } /* Key facts strip below intro image */ .about-key-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; } .key-fact { background: var(--color-light); border-radius: var(--radius-md); padding: 14px 16px; } .key-fact dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px; } .key-fact dd { font-family: var(--font-heading); font-size: 1rem; font-weight: 500; color: var(--color-dark); } /* ============================================================ 2. BALAYAGE — Artistic, dimensional, editorial ============================================================ */ /* Hero: responsive picture element fills the hero-bg */ body.page-balayage .hero-bg picture, body.page-balayage .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } body.page-balayage .hero-overlay { background: linear-gradient( to bottom, rgba(45, 30, 10, 0.10) 0%, rgba(45, 30, 10, 0.38) 100% ); } /* Color spectrum strip */ .sp-color-spectrum { width: 100%; height: 6px; background: linear-gradient( 90deg, #F5E6C8 0%, /* platinum blonde */ #E8C97A 15%, /* golden blonde */ #C8963A 32%, /* honey */ #A06828 48%, /* warm brunette */ #7A4A1E 64%, /* deep brunette */ #4A2C10 80%, /* chocolate */ #2D1A08 100% /* espresso */ ); border-radius: 999px; margin: 0; display: block; } .sp-spectrum-wrapper { padding: 0; overflow: hidden; } .sp-spectrum-wrapper + .section { border-top: none; } /* Editorial service cards */ .sp-editorial-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 48px 0; } @media (min-width: 768px) { .sp-editorial-grid { grid-template-columns: repeat(2, 1fr); } } .sp-editorial-card { display: grid; grid-template-columns: 6px 1fr; gap: 0; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); } .sp-editorial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .sp-editorial-card__accent { background: linear-gradient(to bottom, #D4A96A, #9E6A38); border-radius: 0; } .sp-editorial-card__body { padding: 28px 24px; } .sp-editorial-card__eyebrow { font-family: var(--font-body); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold-text); margin-bottom: 8px; } .sp-editorial-card__name { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 500; color: var(--color-dark); margin-bottom: 10px; line-height: 1.25; } .sp-editorial-card__desc { font-size: 0.875rem; color: var(--color-muted); line-height: 1.7; margin-bottom: 20px; } .sp-editorial-card__price { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 500; color: var(--color-dark); } .sp-editorial-card__price-note { font-size: 0.75rem; color: var(--color-muted); margin-left: 6px; font-family: var(--font-body); } /* Before / After split section */ .sp-before-after { display: grid; grid-template-columns: 1fr 1fr; min-height: 280px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); margin: 48px 0; } .sp-before-after__side { display: flex; flex-direction: column; justify-content: center; padding: 48px 36px; } .sp-before-after__side--before { background: #F0E8E4; border-right: 1px solid var(--color-border); } .sp-before-after__side--after { background: linear-gradient(135deg, #D4A96A22 0%, #C4A09244 100%); } .sp-before-after__label { font-family: var(--font-body); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 12px; } .sp-before-after__heading { font-family: var(--font-heading); font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 500; color: var(--color-dark); margin-bottom: 12px; line-height: 1.3; } .sp-before-after__text { font-size: 0.875rem; color: var(--color-muted); line-height: 1.7; } @media (max-width: 600px) { .sp-before-after { grid-template-columns: 1fr; } .sp-before-after__side--before { border-right: none; border-bottom: 1px solid var(--color-border); } } /* ============================================================ 3. FACIALS — Clinical luxury, clean, precise ============================================================ */ /* Hero: photo background */ body.page-facials .hero-bg { background: url('../img/facials-hero.jpg') center/cover no-repeat; } body.page-facials .hero-overlay { background: linear-gradient( to bottom, rgba(30, 40, 35, 0.12) 0%, rgba(30, 40, 35, 0.36) 100% ); } /* Concern badge grid */ .sp-concern-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 48px; justify-content: center; } .sp-concern-badge { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; border-radius: 999px; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; border: 1.5px solid var(--color-border); background: var(--color-white); color: var(--color-muted); cursor: default; transition: background var(--transition), color var(--transition), border-color var(--transition); user-select: none; } .sp-concern-badge__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } /* Concern color coding */ .sp-concern-badge--acne { --concern-color: #8BAA7A; } .sp-concern-badge--antiaging { --concern-color: #C4A092; } .sp-concern-badge--hydration { --concern-color: #7A9EBB; } .sp-concern-badge--brightening { --concern-color: #D4A96A; } .sp-concern-badge .sp-concern-badge__dot { background-color: var(--concern-color, var(--color-accent)); } .sp-concern-badge:hover, .sp-concern-badge.is-active { border-color: var(--concern-color, var(--color-accent)); background: color-mix(in srgb, var(--concern-color, var(--color-accent)) 10%, white); color: var(--color-dark); } /* Facial service cards — clean, airy */ .sp-facial-cards { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 32px 0; } @media (min-width: 600px) { .sp-facial-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .sp-facial-cards { grid-template-columns: repeat(3, 1fr); } } .sp-facial-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow var(--transition), transform var(--transition); } .sp-facial-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); } .sp-facial-card__concern { font-family: var(--font-body); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); } .sp-facial-card__name { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 500; color: var(--color-dark); line-height: 1.3; } .sp-facial-card__desc { font-size: 0.85rem; color: var(--color-muted); line-height: 1.65; flex: 1; } .sp-facial-card__footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--color-border); margin-top: auto; } .sp-facial-card__price { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 500; color: var(--color-dark); } .sp-facial-card__duration { font-size: 0.8rem; color: var(--color-muted); } /* PCA Skin brand blockquote */ .sp-brand-callout { background: linear-gradient(135deg, #F0F4F1 0%, #EAF0EA 100%); border-left: 3px solid #8BAA7A; border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 32px 36px; margin: 48px 0; position: relative; } .sp-brand-callout::before { content: '"'; font-family: var(--font-accent); font-size: 5rem; line-height: 0.5; color: rgba(139, 170, 122, 0.3); position: absolute; top: 20px; left: 20px; pointer-events: none; } .sp-brand-callout__text { font-family: var(--font-accent); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--color-dark); line-height: 1.6; margin-bottom: 16px; position: relative; z-index: 1; } .sp-brand-callout__source { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #5A7A50; } /* ============================================================ 4. KERATIN TREATMENT — Transformation, bold, dramatic ============================================================ */ /* Hero: photo background */ body.page-keratin .hero-bg { background: url('../img/keratin-hero.jpg?v=2') center/cover no-repeat; } body.page-keratin .hero-overlay { background: linear-gradient( to bottom, rgba(25, 15, 5, 0.12) 0%, rgba(25, 15, 5, 0.42) 100% ); } /* Stronger heading weight on keratin pages */ body.page-keratin .section-heading { font-weight: 700; letter-spacing: -0.01em; } /* Express vs Full Treatment comparison columns */ .sp-treatment-compare { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 48px 0; } @media (min-width: 768px) { .sp-treatment-compare { grid-template-columns: 1fr 1fr; align-items: start; } } .sp-treatment-col { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); } .sp-treatment-col:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .sp-treatment-col--featured { border-color: #9A6A40; box-shadow: 0 4px 24px rgba(154, 106, 64, 0.18); } .sp-treatment-col__header { padding: 24px 28px; border-bottom: 1px solid var(--color-border); } .sp-treatment-col--featured .sp-treatment-col__header { background: linear-gradient(135deg, #7A5030 0%, #9A6A40 100%); border-bottom-color: transparent; } .sp-treatment-col--featured .sp-treatment-col__name, .sp-treatment-col--featured .sp-treatment-col__tag { color: var(--color-white); } .sp-treatment-col__tag { font-family: var(--font-body); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold-text); margin-bottom: 6px; display: block; } .sp-treatment-col__name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-dark); line-height: 1.15; } .sp-treatment-col__body { padding: 24px 28px; } .sp-treatment-spec { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 0.875rem; } .sp-treatment-spec:last-of-type { border-bottom: none; } .sp-treatment-spec__label { color: var(--color-muted); font-weight: 400; } .sp-treatment-spec__value { font-weight: 600; color: var(--color-dark); text-align: right; } .sp-treatment-col__price { font-family: var(--font-heading); font-size: 2rem; font-weight: 600; color: var(--color-dark); margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--color-border); } .sp-treatment-col--featured .sp-treatment-col__price { color: #7A5030; } .sp-treatment-col__price-note { display: block; font-family: var(--font-body); font-size: 0.75rem; color: var(--color-muted); font-weight: 400; margin-top: 4px; } /* Kelly Frerer specialist callout */ .sp-specialist-feature { display: grid; grid-template-columns: 1fr; gap: 32px; background: linear-gradient(135deg, #F5EDE4 0%, #F0E4D8 100%); border-radius: var(--radius-lg); padding: 48px 36px; margin: 48px 0; position: relative; overflow: hidden; } @media (min-width: 768px) { .sp-specialist-feature { grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: center; } } .sp-specialist-feature::before { content: ''; position: absolute; bottom: -40px; right: -40px; width: 220px; height: 220px; border-radius: 50%; background: rgba(154, 106, 64, 0.08); pointer-events: none; } .sp-specialist-feature__quote { font-family: var(--font-accent); font-style: italic; font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 300; color: var(--color-dark); line-height: 1.55; position: relative; } .sp-specialist-feature__quote::before { content: '"'; font-size: 4rem; line-height: 0.5; color: rgba(154, 106, 64, 0.3); display: block; margin-bottom: 16px; font-family: var(--font-accent); font-style: normal; } .sp-specialist-feature__name { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 600; color: var(--color-dark); margin-bottom: 6px; } .sp-specialist-feature__credentials { font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-muted); line-height: 1.6; } .sp-specialist-feature__bio { font-size: 0.9375rem; color: var(--color-text); line-height: 1.75; margin-top: 16px; } /* Keratin — specialist credential bio block in intro */ .sp-specialist-bio { border-left: 3px solid var(--color-gold); padding: 16px 20px; background: rgba(184, 149, 106, 0.06); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-top: 24px; } .sp-specialist-bio__name { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; color: var(--color-dark); margin-bottom: 4px; } .sp-specialist-bio__title { font-size: 0.8125rem; color: var(--color-muted); letter-spacing: 0.02em; margin-bottom: 12px; } .sp-specialist-bio__list { list-style: disc; padding-left: 18px; font-size: 0.875rem; color: var(--color-text); line-height: 1.7; } /* ============================================================ 5. WAXING — Clean, efficient, scan-friendly ============================================================ */ /* Hero: responsive picture element fills the hero-bg (same pattern as balayage). CSS background-image removed — the