/* ============================================================================ STARTER KIT — MAISON VARIANT ============================================================================ Variant: Maison (The Private Practice) Buyer type: Luxury practitioner, executive coach, attorney, therapist, consultant billing premium rates Relationship: Analogous warm (oxblood + ochre) + cool complementary punch (royal peacock) Mood: Private library, wine cellar, wood-paneled office, referral-only energy Version: 1.0.0 ============================================================================ DEPENDENCIES ---------------------------------------------------------------------------- Google Fonts (loaded in the HTML ): Abril Fatface - display (single weight 400, raging-bull serif) Cormorant Garamond - body (300/400/500, italic variants) Jost - labels and meta (300/400/500/600, geometric sans) USAGE ---------------------------------------------------------------------------- Load this file after the base reset and before any page-specific styles. The color mode is controlled by the data-color-mode attribute on : (default) (toggles on override) FILE STRUCTURE ---------------------------------------------------------------------------- 1. Design tokens (custom properties) 2. Light mode overrides 3. Reset and base 4. Typography 5. Layout primitives (container, section, grid) 6. Nameplate (fixed top bar) 7. Hero 8. Section markers and titles 9. Offerings (pricing cards) 10. Buttons 11. Forms 12. Ornaments (diamonds, hairlines, Roman numerals) 13. Motion (entrance animations) 14. Utilities 15. Responsive adjustments ============================================================================ */ /* ============================================================================ 1. DESIGN TOKENS ============================================================================ */ :root { /* ------------------------------------------------------------------- Core palette (locked) ------------------------------------------------------------------- */ --maison-inkwell: #0B0706; --maison-oxblood: #8A1028; --maison-vellum: #E4D9C0; --maison-ochre: #E8671A; --maison-peacock: #1D4E8C; /* ------------------------------------------------------------------- Derived tones (for surfaces, borders, text hierarchy) ------------------------------------------------------------------- */ --maison-inkwell-warm: #14100D; --maison-inkwell-lift: #1C1612; --maison-oxblood-deep: #5A0A1A; --maison-oxblood-whisper: rgba(138, 16, 40, 0.12); --maison-vellum-dim: #B8A987; --maison-vellum-mute: rgba(228, 217, 192, 0.45); --maison-vellum-ghost: rgba(228, 217, 192, 0.15); --maison-vellum-fog: rgba(228, 217, 192, 0.08); --maison-ochre-deep: #B64E0D; --maison-peacock-whisper: rgba(29, 78, 140, 0.2); /* ------------------------------------------------------------------- Semantic tokens (dark mode defaults) Use these in component styles so light mode can override cleanly. ------------------------------------------------------------------- */ --bg-base: var(--maison-inkwell); --bg-elevated: var(--maison-inkwell-warm); --bg-lifted: var(--maison-inkwell-lift); --text-primary: var(--maison-vellum); --text-secondary: var(--maison-vellum-dim); --text-muted: var(--maison-vellum-mute); --text-inverse: var(--maison-inkwell); --accent-primary: var(--maison-ochre); --accent-secondary: var(--maison-oxblood); --accent-cool: var(--maison-peacock); --border-hairline: var(--maison-vellum-ghost); --border-rule: var(--maison-vellum-mute); --border-strong: var(--maison-vellum-dim); --surface-glass: rgba(11, 7, 6, 0.72); /* ------------------------------------------------------------------- Typography ------------------------------------------------------------------- */ --font-display: 'Abril Fatface', Georgia, serif; --font-body: 'Cormorant Garamond', Georgia, serif; --font-label: 'Jost', 'Helvetica Neue', Arial, sans-serif; --font-size-xs: 0.65rem; --font-size-sm: 0.8rem; --font-size-base: 1.125rem; --font-size-lg: 1.3rem; --font-size-xl: 1.6rem; --font-size-2xl: 2.25rem; --font-size-3xl: 3.5rem; --font-size-4xl: 5rem; --font-size-display: clamp(4.5rem, 14vw, 11rem); --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.6; --line-height-loose: 1.75; --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; --letter-spacing-wider: 0.22em; --letter-spacing-widest: 0.36em; /* ------------------------------------------------------------------- Spacing scale ------------------------------------------------------------------- */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 8rem; --space-5xl: 10rem; /* ------------------------------------------------------------------- Layout ------------------------------------------------------------------- */ --container-max: 1280px; --container-narrow: 820px; --container-text: 680px; --container-padding: 3rem; /* ------------------------------------------------------------------- Motion (ceremonial, slow, deliberate) ------------------------------------------------------------------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-entrance: cubic-bezier(0.2, 0, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --duration-fast: 0.2s; --duration-normal: 0.4s; --duration-slow: 0.8s; --duration-ceremonial: 1.2s; /* ------------------------------------------------------------------- Z-index scale ------------------------------------------------------------------- */ --z-base: 1; --z-elevated: 10; --z-sticky: 50; --z-nameplate: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 2000; } /* ============================================================================ 2. LIGHT MODE OVERRIDES ============================================================================ Activated by setting data-color-mode="light" on the element. Inverts surfaces and adjusts borders. Accent colors remain identical so the brand signature stays consistent across modes. ============================================================================ */ [data-color-mode="light"] { --bg-base: var(--maison-vellum); --bg-elevated: #EEE5CF; --bg-lifted: #F5EDD9; --text-primary: var(--maison-inkwell); --text-secondary: #4A3E2E; --text-muted: #6B5D48; --text-inverse: var(--maison-vellum); --border-hairline: rgba(11, 7, 6, 0.12); --border-rule: rgba(11, 7, 6, 0.3); --border-strong: rgba(11, 7, 6, 0.5); --surface-glass: rgba(228, 217, 192, 0.8); } /* ============================================================================ 3. RESET AND BASE ============================================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); font-size: var(--font-size-base); font-weight: 400; line-height: var(--line-height-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard); } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } ::selection { background-color: var(--accent-primary); color: var(--maison-inkwell); } /* ============================================================================ 4. TYPOGRAPHY ============================================================================ */ .display { font-family: var(--font-display); font-weight: 400; line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-wide); color: var(--text-primary); } .display--xl { font-size: var(--font-size-display); } .display--lg { font-size: clamp(2.5rem, 5vw, var(--font-size-4xl)); } .display--md { font-size: clamp(2rem, 4vw, var(--font-size-3xl)); } .display--sm { font-size: var(--font-size-2xl); } .lede { font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: var(--font-size-lg); line-height: var(--line-height-snug); color: var(--text-secondary); } .body-text { font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height-loose); color: var(--text-primary); } .body-text p { margin-bottom: var(--space-md); } .body-text p:last-child { margin-bottom: 0; } .body-text strong { font-weight: 500; color: var(--text-primary); } .body-text em { font-style: italic; color: var(--accent-primary); } .body-text a { color: var(--accent-cool); border-bottom: 1px solid var(--accent-cool); transition: all var(--duration-fast) var(--ease-standard); } .body-text a:hover { color: var(--accent-primary); border-bottom-color: var(--accent-primary); } .drop-cap::first-letter { font-family: var(--font-display); font-size: 4.5rem; float: left; line-height: 0.85; margin: 0.2rem 0.6rem -0.2rem 0; color: var(--accent-primary); } .label { font-family: var(--font-label); font-size: var(--font-size-xs); font-weight: 500; letter-spacing: var(--letter-spacing-widest); text-transform: uppercase; color: var(--text-secondary); } .label--accent { color: var(--accent-primary); } .label--cool { color: var(--accent-cool); } .meta { font-family: var(--font-label); font-size: var(--font-size-xs); font-weight: 400; letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; color: var(--text-muted); } /* ============================================================================ 5. LAYOUT PRIMITIVES ============================================================================ */ .container { max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-padding); padding-right: var(--container-padding); } .container--narrow { max-width: var(--container-narrow); } .container--text { max-width: var(--container-text); } .section { padding-top: var(--space-5xl); padding-bottom: var(--space-5xl); position: relative; } .section--compact { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); } .grid { display: grid; gap: var(--space-lg); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .stack { display: flex; flex-direction: column; gap: var(--space-md); } .stack--lg { gap: var(--space-lg); } .stack--xl { gap: var(--space-2xl); } .row { display: flex; align-items: center; gap: var(--space-md); } .row--between { justify-content: space-between; } .row--center { justify-content: center; } /* ============================================================================ 6. NAMEPLATE (fixed top bar) ============================================================================ */ .nameplate { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nameplate); padding: 1.25rem var(--container-padding); background-color: var(--surface-glass); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border-bottom: 1px solid var(--border-hairline); display: flex; align-items: center; justify-content: space-between; transition: background-color var(--duration-normal) var(--ease-standard); } .nameplate__mark { font-family: var(--font-label); font-size: var(--font-size-xs); font-weight: 500; letter-spacing: var(--letter-spacing-widest); text-transform: uppercase; color: var(--text-primary); display: flex; align-items: center; gap: 0.75rem; } .nameplate__mark::before { content: "◆"; color: var(--accent-primary); font-size: 0.6rem; } .nameplate__nav { display: flex; align-items: center; gap: 2.5rem; } .nameplate__link { font-family: var(--font-label); font-size: 0.7rem; font-weight: 400; letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; color: var(--text-secondary); transition: color var(--duration-normal) var(--ease-standard); } .nameplate__link:hover { color: var(--accent-cool); } .nameplate__link--active { color: var(--text-primary); } /* ============================================================================ 7. HERO ============================================================================ */ .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-4xl) var(--container-padding) var(--space-3xl); text-align: center; position: relative; } .hero__hairline { width: 1px; height: 80px; background-color: var(--accent-primary); margin-bottom: var(--space-xl); } .hero__serial { font-family: var(--font-label); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-lg); } .hero__ornament { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); margin-bottom: var(--space-xl); } .hero__ornament-rule { width: 80px; height: 1px; background-color: var(--accent-primary); } .hero__ornament-mark { color: var(--accent-primary); font-size: 0.85rem; } .hero__name { font-family: var(--font-display); font-size: var(--font-size-display); font-weight: 400; letter-spacing: var(--letter-spacing-wide); line-height: 0.95; color: var(--text-primary); margin-bottom: var(--space-lg); } .hero__tagline { font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--text-secondary); max-width: 640px; line-height: var(--line-height-snug); margin-bottom: var(--space-2xl); } .hero__tagline em { color: var(--accent-primary); font-style: italic; } .hero__meta { display: flex; align-items: center; gap: var(--space-xl); } .hero__meta-item { font-family: var(--font-label); font-size: 0.65rem; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-muted); } .hero__meta-item strong { color: var(--text-primary); font-weight: 500; display: block; margin-top: 0.4rem; font-size: 0.75rem; } .hero__meta-divider { width: 1px; height: 32px; background-color: var(--border-hairline); } /* ============================================================================ 8. SECTION MARKERS AND TITLES ============================================================================ */ .section-marker { font-family: var(--font-label); font-size: var(--font-size-xs); font-weight: 500; letter-spacing: var(--letter-spacing-widest); text-transform: uppercase; color: var(--accent-primary); display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xl); } .section-marker::before { content: ""; width: 40px; height: 1px; background-color: var(--accent-primary); } .section-title { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 400; line-height: var(--line-height-tight); color: var(--text-primary); max-width: var(--container-narrow); margin-bottom: var(--space-lg); } .section-lede { font-family: var(--font-body); font-style: italic; font-size: 1.35rem; line-height: var(--line-height-normal); color: var(--text-secondary); max-width: var(--container-text); margin-bottom: var(--space-2xl); } /* ============================================================================ 9. OFFERINGS (pricing cards) ============================================================================ */ .offering { border: 1px solid var(--border-hairline); padding: var(--space-xl) var(--space-lg); background-color: var(--bg-elevated); transition: transform var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard); position: relative; } .offering:hover { transform: translateY(-4px); border-color: var(--accent-cool); } .offering--featured { border-color: var(--accent-primary); background-color: var(--bg-lifted); } .offering--featured:hover { border-color: var(--accent-primary); } .offering__label { font-family: var(--font-label); font-size: 0.65rem; font-weight: 500; letter-spacing: var(--letter-spacing-widest); text-transform: uppercase; color: var(--accent-primary); margin-bottom: var(--space-md); } .offering__name { font-family: var(--font-display); font-size: 2rem; font-weight: 400; line-height: var(--line-height-tight); color: var(--text-primary); margin-bottom: var(--space-sm); } .offering__caption { font-family: var(--font-body); font-style: italic; font-size: 1rem; color: var(--text-secondary); margin-bottom: var(--space-lg); } .offering__price { font-family: var(--font-display); font-size: 3rem; font-weight: 400; line-height: 1; color: var(--text-primary); margin-bottom: var(--space-xs); } .offering__price-meta { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-lg); } .offering__features { list-style: none; margin: var(--space-lg) 0; padding-top: var(--space-lg); border-top: 1px solid var(--border-hairline); } .offering__features li { font-family: var(--font-body); font-size: 1rem; line-height: var(--line-height-normal); color: var(--text-secondary); padding: var(--space-sm) 0; padding-left: var(--space-lg); position: relative; } .offering__features li::before { content: "◆"; position: absolute; left: 0; top: var(--space-sm); color: var(--accent-primary); font-size: 0.6rem; } /* ============================================================================ 10. BUTTONS ============================================================================ */ .btn { font-family: var(--font-label); font-size: 0.75rem; font-weight: 500; letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; padding: 0.9rem 2rem; border: 1px solid currentColor; background: transparent; cursor: pointer; transition: color var(--duration-normal) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard); display: inline-block; text-align: center; position: relative; overflow: hidden; z-index: var(--z-base); } .btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: currentColor; transition: left var(--duration-normal) var(--ease-standard); z-index: -1; } .btn:hover::before { left: 0; } /* Primary: ochre outline, sweeps to ochre fill with inkwell text */ .btn--primary { color: var(--accent-primary); border-color: var(--accent-primary); } .btn--primary:hover { color: var(--maison-inkwell); } /* Secondary: oxblood fill, no sweep, subtle hover */ .btn--secondary { color: var(--text-primary); background-color: var(--accent-secondary); border-color: var(--accent-secondary); } .btn--secondary::before { display: none; } .btn--secondary:hover { background-color: var(--maison-oxblood-deep); border-color: var(--maison-oxblood-deep); } /* Cool: peacock outline, the complementary punch CTA */ .btn--cool { color: var(--accent-cool); border-color: var(--accent-cool); } .btn--cool:hover { color: var(--text-primary); } /* Ghost: vellum outline, minimal */ .btn--ghost { color: var(--text-secondary); border-color: var(--border-rule); } .btn--ghost::before { background-color: var(--text-primary); } .btn--ghost:hover { color: var(--maison-inkwell); border-color: var(--text-primary); } .btn--lg { padding: 1.1rem 2.5rem; font-size: 0.8rem; } .btn--sm { padding: 0.6rem 1.25rem; font-size: 0.65rem; } .btn--full { display: block; width: 100%; } /* ============================================================================ 11. FORMS ============================================================================ */ .form-group { margin-bottom: var(--space-lg); } .form-label { font-family: var(--font-label); font-size: 0.7rem; font-weight: 500; letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; color: var(--text-secondary); display: block; margin-bottom: var(--space-xs); } .form-input, .form-textarea, .form-select { font-family: var(--font-body); font-size: 1.1rem; font-weight: 400; color: var(--text-primary); background-color: transparent; border: none; border-bottom: 1px solid var(--border-rule); padding: 0.75rem 0; width: 100%; transition: border-color var(--duration-normal) var(--ease-standard); } .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-bottom-color: var(--accent-primary); } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); font-style: italic; } .form-textarea { min-height: 120px; resize: vertical; font-family: var(--font-body); line-height: var(--line-height-normal); } .form-help { font-family: var(--font-label); font-size: 0.7rem; color: var(--text-muted); margin-top: var(--space-xs); font-style: italic; } .form-error { font-family: var(--font-label); font-size: 0.75rem; color: var(--accent-secondary); margin-top: var(--space-xs); } /* ============================================================================ 12. ORNAMENTS ============================================================================ */ .hairline { width: 100%; height: 1px; background-color: var(--border-hairline); border: none; margin: var(--space-xl) 0; } .hairline--accent { background-color: var(--accent-primary); } .hairline--short { width: 80px; } .hairline--vertical { width: 1px; height: 80px; background-color: var(--border-hairline); } .diamond { color: var(--accent-primary); font-size: 0.85rem; display: inline-block; } .diamond--lg { font-size: 1.25rem; } .ornament-divider { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); margin: var(--space-2xl) 0; } .ornament-divider__rule { flex: 1; height: 1px; background-color: var(--border-hairline); max-width: 160px; } .ornament-divider__mark { color: var(--accent-primary); font-size: 1rem; letter-spacing: 0.5em; } .roman { font-family: var(--font-display); font-size: 1rem; color: var(--accent-primary); letter-spacing: 0.1em; } .serial { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-muted); } /* ============================================================================ 13. MOTION (entrance animations) ============================================================================ Ceremonial, staggered, slow. Elements unfurl rather than pop. Apply via the data-motion attribute and delays via inline --delay. ============================================================================ */ @keyframes maison-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes maison-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes maison-draw-line { from { height: 0; } to { height: 80px; } } @keyframes maison-draw-line-horizontal { from { width: 0; } to { width: 100%; } } [data-motion="fade"] { opacity: 0; animation: maison-fade-in var(--duration-slow) var(--ease-entrance) forwards; animation-delay: var(--delay, 0s); } [data-motion="rise"] { opacity: 0; animation: maison-rise var(--duration-slow) var(--ease-entrance) forwards; animation-delay: var(--delay, 0s); } [data-motion="draw"] { height: 0; animation: maison-draw-line var(--duration-ceremonial) var(--ease-entrance) forwards; animation-delay: var(--delay, 0s); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-motion] { opacity: 1 !important; transform: none !important; height: auto !important; } } /* ============================================================================ 14. UTILITIES ============================================================================ */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-accent { color: var(--accent-primary); } .text-cool { color: var(--accent-cool); } .italic { font-style: italic; } .uppercase { text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); } .mt-0 { margin-top: 0; } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mt-2xl { margin-top: var(--space-2xl); } .mb-0 { margin-bottom: 0; } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } .mb-2xl { margin-bottom: var(--space-2xl); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================================ 15. RESPONSIVE ADJUSTMENTS ============================================================================ */ @media (max-width: 1024px) { :root { --container-padding: 2rem; } .grid--3 { grid-template-columns: repeat(2, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } .section { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); } } @media (max-width: 768px) { :root { --container-padding: 1.5rem; --font-size-base: 1rem; } .nameplate { padding: 1rem 1.5rem; } .nameplate__nav { gap: 1.25rem; } .nameplate__link:not(.nameplate__link--primary) { display: none; } .hero { padding: var(--space-3xl) 1.5rem var(--space-2xl); min-height: 90vh; } .hero__meta { flex-direction: column; gap: var(--space-md); } .hero__meta-divider { display: none; } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .section { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); } .section-title { font-size: 2rem; } .offering { padding: var(--space-lg) var(--space-md); } } @media (max-width: 480px) { .hero__name { font-size: 3.5rem; } .hero__tagline { font-size: 1rem; } .btn { padding: 0.8rem 1.5rem; font-size: 0.7rem; } } /* ============================================================================ END OF MAISON VARIANT STYLESHEET ============================================================================ */