/* ============================================================ PRIMAL INTEGRATIVE WELLNESS Master Brand Stylesheet — piw-brand.css Single source of truth for all colors, typography, spacing, layout, and component styles. Link in every page : ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;1,300;1,400&family=Nunito+Sans:wght@200;300;400;600&display=swap'); /* ============================================================ 1. CSS CUSTOM PROPERTIES (DESIGN TOKENS) ============================================================ */ :root { /* ── Base Backgrounds ── */ --piw-charcoal-deep: #1e1c1f; --piw-charcoal-mid: #2a2730; --piw-charcoal-soft: #35313d; --piw-charcoal-raised: #3d3947; /* ── Smoky Violet-Gray ── */ --piw-violet-darkest: #2d2838; --piw-violet-dark: #3d3648; --piw-violet-mid: #5c5270; --piw-violet-mist: #8b7fa0; --piw-violet-pale: #c4b8d4; --piw-violet-whisper: #e8e2f0; /* ── Sage Green (Accent 1) ── */ --piw-sage-deep: #5a7060; --piw-sage-mid: #7a9882; --piw-sage-soft: #a8c4ae; --piw-sage-pale: #d4e8d8; --piw-sage-whisper: #eef6f0; /* ── Soft Rose (Accent 2) ── */ --piw-rose-deep: #8c5c68; --piw-rose-mid: #b07c8a; --piw-rose-soft: #d4a0ae; --piw-rose-pale: #f0dce2; --piw-rose-whisper: #faf0f3; /* ── Semantic Text Colors ── */ --piw-text-primary: #e8e2f0; --piw-text-secondary: #c4b8d4; --piw-text-muted: #8b7fa0; --piw-text-faint: #5c5270; --piw-text-on-sage: #1e1c1f; --piw-text-on-rose: #1e1c1f; /* ── Borders ── */ --piw-border: rgba(140, 120, 168, 0.18); --piw-border-mid: rgba(140, 120, 168, 0.28); --piw-border-strong: rgba(140, 120, 168, 0.45); --piw-border-sage: rgba(168, 196, 174, 0.3); --piw-border-rose: rgba(176, 124, 138, 0.25); /* ── Glow / Overlay ── */ --piw-glow-violet: rgba(140, 120, 168, 0.08); --piw-glow-violet-md: rgba(140, 120, 168, 0.14); --piw-glow-sage: rgba(122, 152, 130, 0.08); --piw-glow-sage-md: rgba(122, 152, 130, 0.14); --piw-glow-rose: rgba(176, 124, 138, 0.07); --piw-glow-rose-md: rgba(176, 124, 138, 0.13); /* ── Typography ── */ --piw-font-primary: 'Nunito', sans-serif; --piw-font-secondary: 'Nunito Sans', sans-serif; /* Font Sizes */ --piw-text-2xs: 0.82rem; --piw-text-xs: 0.92rem; --piw-text-sm: 0.95rem; --piw-text-base: 0.95rem; --piw-text-md: 1.05rem; --piw-text-lg: 1.25rem; --piw-text-xl: 1.6rem; --piw-text-2xl: 2.2rem; --piw-text-3xl: 3rem; --piw-text-4xl: 3.8rem; /* Font Weights */ --piw-weight-thin: 200; --piw-weight-light: 300; --piw-weight-regular: 400; --piw-weight-semibold: 600; --piw-weight-bold: 700; /* Line Heights */ --piw-leading-tight: 1.2; --piw-leading-snug: 1.5; --piw-leading-base: 1.75; --piw-leading-loose: 2; /* Letter Spacing */ --piw-tracking-tight: -0.01em; --piw-tracking-base: 0.01em; --piw-tracking-wide: 0.08em; --piw-tracking-wider: 0.2em; --piw-tracking-widest: 0.38em; /* ── Spacing Scale ── */ --piw-space-2xs: 0.25rem; --piw-space-xs: 0.4rem; --piw-space-sm: 0.8rem; --piw-space-md: 1.5rem; --piw-space-lg: 2.5rem; --piw-space-xl: 4rem; --piw-space-2xl: 6rem; /* ── Border Radius ── */ --piw-radius-xs: 2px; --piw-radius-sm: 4px; --piw-radius-md: 8px; --piw-radius-lg: 16px; --piw-radius-xl: 24px; --piw-radius-pill: 999px; /* ── Shadows ── */ --piw-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --piw-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35); --piw-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.45); --piw-shadow-violet: 0 4px 24px rgba(92, 82, 112, 0.25); --piw-shadow-sage: 0 4px 24px rgba(90, 112, 96, 0.2); /* ── Transitions ── */ --piw-transition-fast: all 0.15s ease; --piw-transition: all 0.25s ease; --piw-transition-slow: all 0.4s ease; /* ── Layout ── */ --piw-container-sm: 640px; --piw-container-md: 800px; --piw-container-lg: 1100px; --piw-container-xl: 1400px; --piw-grid-gap: 1.5rem; --piw-section-padding: 5rem 1.5rem; } /* ============================================================ 2. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: var(--piw-charcoal-deep); color: var(--piw-text-secondary); font-family: var(--piw-font-primary); font-weight: var(--piw-weight-light); font-size: var(--piw-text-base); line-height: var(--piw-leading-base); } img, video { max-width: 100%; display: block; } a { color: var(--piw-rose-soft); text-decoration: none; border-bottom: 1px solid rgba(212, 160, 174, 0.3); transition: var(--piw-transition); } a:hover { color: var(--piw-rose-pale); border-color: rgba(240, 220, 226, 0.5); } ul, ol { list-style: none; } /* ============================================================ 3. TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--piw-font-primary); color: var(--piw-text-primary); font-weight: var(--piw-weight-thin); line-height: var(--piw-leading-tight); letter-spacing: var(--piw-tracking-tight); } h1 { font-size: var(--piw-text-3xl); } h2 { font-size: var(--piw-text-2xl); } h3 { font-size: var(--piw-text-xl); font-weight: var(--piw-weight-light); } h4 { font-size: var(--piw-text-lg); font-weight: var(--piw-weight-light); } h5 { font-size: var(--piw-text-md); font-weight: var(--piw-weight-regular); } h6 { font-size: var(--piw-text-base); font-weight: var(--piw-weight-regular); } p { font-size: var(--piw-text-md); font-weight: var(--piw-weight-light); line-height: var(--piw-leading-base); color: var(--piw-text-secondary); } strong { font-weight: var(--piw-weight-semibold); color: var(--piw-text-primary); } em { font-style: italic; color: var(--piw-violet-pale); } .piw-eyebrow { font-size: var(--piw-text-xs); font-weight: var(--piw-weight-light); letter-spacing: var(--piw-tracking-widest); text-transform: uppercase; color: var(--piw-sage-mid); display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-bottom: var(--piw-space-sm); } .piw-eyebrow::before, .piw-eyebrow::after { content: ''; display: block; width: 40px; height: 1px; background: var(--piw-sage-deep); opacity: 0.5; } .piw-eyebrow--left { justify-content: flex-start; } .piw-eyebrow--left::before { display: none; } .piw-section-label { font-size: var(--piw-text-xs); font-weight: var(--piw-weight-regular); letter-spacing: var(--piw-tracking-widest); text-transform: uppercase; color: var(--piw-sage-soft); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.7rem; } .piw-section-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--piw-sage-deep), transparent); opacity: 0.3; } .piw-caption { font-size: 1rem; font-weight: var(--piw-weight-light); letter-spacing: var(--piw-tracking-wider); color: var(--piw-text-secondary); line-height: var(--piw-leading-snug); } .piw-overline { font-size: var(--piw-text-2xs); font-weight: var(--piw-weight-light); letter-spacing: var(--piw-tracking-widest); text-transform: uppercase; color: var(--piw-text-faint); } .piw-text-sage { color: var(--piw-sage-mid); } .piw-text-rose { color: var(--piw-rose-soft); } .piw-text-violet { color: var(--piw-violet-mist); } .piw-text-muted { color: var(--piw-text-muted); } .piw-text-faint { color: var(--piw-text-faint); } .piw-text-primary { color: var(--piw-text-primary); } /* ============================================================ 4. LAYOUT & GRID ============================================================ */ .piw-container { width: 100%; max-width: var(--piw-container-lg); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } .piw-container--sm { max-width: var(--piw-container-sm); } .piw-container--md { max-width: var(--piw-container-md); } .piw-container--xl { max-width: var(--piw-container-xl); } .piw-section { padding: var(--piw-section-padding); } .piw-section--sm { padding: 3rem 1.5rem; } .piw-section--lg { padding: 7rem 1.5rem; } /* Grid system */ .piw-grid { display: grid; gap: var(--piw-grid-gap); } .piw-grid--2 { grid-template-columns: repeat(2, 1fr); } .piw-grid--3 { grid-template-columns: repeat(3, 1fr); } .piw-grid--4 { grid-template-columns: repeat(4, 1fr); } .piw-grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* Flex utilities */ .piw-flex { display: flex; } .piw-flex-center { display: flex; align-items: center; justify-content: center; } .piw-flex-between { display: flex; align-items: center; justify-content: space-between; } .piw-flex-col { display: flex; flex-direction: column; } .piw-flex-wrap { flex-wrap: wrap; } .piw-gap-sm { gap: var(--piw-space-sm); } .piw-gap-md { gap: var(--piw-space-md); } .piw-gap-lg { gap: var(--piw-space-lg); } /* Text alignment */ .piw-text-center { text-align: center; } .piw-text-left { text-align: left; } .piw-text-right { text-align: right; } /* ============================================================ 5. DIVIDERS ============================================================ */ .piw-divider { width: 100%; height: 1px; background: linear-gradient(to right, transparent, var(--piw-violet-mid) 30%, var(--piw-violet-mid) 70%, transparent); opacity: 0.3; margin: 1.8rem 0; border: none; } .piw-divider--sage { background: linear-gradient(to right, transparent, var(--piw-sage-deep) 30%, var(--piw-sage-deep) 70%, transparent); opacity: 0.3; } .piw-divider--rose { background: linear-gradient(to right, transparent, var(--piw-rose-mid) 30%, var(--piw-rose-mid) 70%, transparent); opacity: 0.25; } .piw-divider--full { opacity: 1; background: var(--piw-border); } /* ============================================================ 6. BUTTONS ============================================================ */ .piw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--piw-font-primary); font-size: var(--piw-text-sm); font-weight: var(--piw-weight-regular); letter-spacing: var(--piw-tracking-wide); text-transform: uppercase; text-decoration: none; border: none; border-bottom: none; cursor: pointer; padding: 0.85rem 2rem; border-radius: var(--piw-radius-pill); transition: var(--piw-transition); white-space: nowrap; } /* Primary — Sage */ .piw-btn--primary { background: var(--piw-sage-mid); color: var(--piw-charcoal-deep); border: 1px solid transparent; box-shadow: var(--piw-shadow-sage); } .piw-btn--primary:hover { background: var(--piw-sage-soft); color: var(--piw-charcoal-deep); border-color: transparent; box-shadow: 0 6px 28px rgba(90, 112, 96, 0.35); transform: translateY(-1px); } /* Secondary — Outline Violet */ .piw-btn--secondary { background: transparent; color: var(--piw-violet-pale); border: 1px solid var(--piw-border-mid); } .piw-btn--secondary:hover { background: var(--piw-glow-violet); color: var(--piw-text-primary); border-color: var(--piw-border-strong); transform: translateY(-1px); } /* Ghost — Rose */ .piw-btn--ghost { background: transparent; color: var(--piw-rose-soft); border: 1px solid var(--piw-border-rose); } .piw-btn--ghost:hover { background: var(--piw-glow-rose); color: var(--piw-rose-pale); border-color: rgba(176, 124, 138, 0.45); transform: translateY(-1px); } /* Small modifier */ .piw-btn--sm { font-size: var(--piw-text-xs); padding: 0.6rem 1.4rem; } /* Large modifier */ .piw-btn--lg { font-size: var(--piw-text-base); padding: 1.1rem 2.8rem; } /* ============================================================ 7. CARDS ============================================================ */ .piw-card { background: var(--piw-charcoal-mid); border: 1px solid var(--piw-border); border-radius: var(--piw-radius-lg); padding: var(--piw-space-lg); position: relative; overflow: hidden; transition: var(--piw-transition); } .piw-card:hover { border-color: var(--piw-border-mid); box-shadow: var(--piw-shadow-violet); transform: translateY(-2px); } /* Violet glow top */ .piw-card--glow::before { content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 400px; height: 160px; background: radial-gradient(ellipse, rgba(140, 120, 168, 0.12) 0%, transparent 70%); pointer-events: none; } /* Rose glow corner */ .piw-card--glow::after { content: ''; position: absolute; bottom: -60px; right: -60px; width: 240px; height: 240px; background: radial-gradient(ellipse, rgba(176, 124, 138, 0.07) 0%, transparent 70%); pointer-events: none; } .piw-card--sage { border-color: var(--piw-border-sage); background: linear-gradient(135deg, var(--piw-charcoal-mid) 0%, rgba(90, 112, 96, 0.06) 100%); } .piw-card--rose { border-color: var(--piw-border-rose); background: linear-gradient(135deg, var(--piw-charcoal-mid) 0%, rgba(176, 124, 138, 0.06) 100%); } .piw-card--elevated { background: var(--piw-charcoal-soft); } .piw-card__header { margin-bottom: var(--piw-space-md); } .piw-card__title { font-size: var(--piw-text-lg); font-weight: var(--piw-weight-light); color: var(--piw-text-primary); margin-bottom: var(--piw-space-xs); } .piw-card__body { font-size: var(--piw-text-base); color: var(--piw-text-secondary); line-height: var(--piw-leading-base); } .piw-card__footer { margin-top: var(--piw-space-md); padding-top: var(--piw-space-md); border-top: 1px solid var(--piw-border); } /* ============================================================ 8. BADGES & TAGS ============================================================ */ .piw-badge { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--piw-radius-pill); padding: 0.35rem 1rem; font-size: var(--piw-text-xs); font-weight: var(--piw-weight-light); letter-spacing: var(--piw-tracking-wider); text-transform: uppercase; } .piw-badge--sage { background: var(--piw-glow-sage); border: 1px solid var(--piw-border-sage); color: var(--piw-sage-soft); } .piw-badge--rose { background: var(--piw-glow-rose); border: 1px solid var(--piw-border-rose); color: var(--piw-rose-soft); } .piw-badge--violet { background: var(--piw-glow-violet); border: 1px solid var(--piw-border-mid); color: var(--piw-violet-pale); } .piw-badge__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ============================================================ 9. NAVIGATION ============================================================ */ .piw-nav { width: 100%; background: var(--piw-charcoal-mid); border-bottom: 1px solid var(--piw-border); padding: 1.2rem 2rem; position: relative; z-index: 100; } .piw-nav::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient( to right, transparent 0%, var(--piw-violet-mid) 35%, var(--piw-sage-deep) 50%, var(--piw-violet-mid) 65%, transparent 100% ); opacity: 0.35; } .piw-nav__inner { max-width: var(--piw-container-xl); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--piw-space-md); } .piw-nav__logo { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; border-bottom: none; } .piw-nav__logo-text { font-family: var(--piw-font-primary); font-size: var(--piw-text-base); font-weight: var(--piw-weight-light); letter-spacing: var(--piw-tracking-wide); text-transform: uppercase; color: var(--piw-text-primary); } .piw-nav__links { display: flex; align-items: center; gap: 2.5rem; list-style: none; } .piw-nav__links a { font-size: var(--piw-text-sm); font-weight: var(--piw-weight-light); letter-spacing: var(--piw-tracking-wide); text-transform: uppercase; color: var(--piw-text-muted); text-decoration: none; border-bottom: none; transition: var(--piw-transition); } .piw-nav__links a:hover, .piw-nav__links a.active { color: var(--piw-text-primary); } .piw-nav__cta { flex-shrink: 0; } /* ============================================================ 10. HERO SECTION ============================================================ */ .piw-hero { padding: 7rem 1.5rem 5rem; text-align: center; position: relative; overflow: hidden; } /* Ambient background glow */ .piw-hero::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 800px; height: 400px; background: radial-gradient(ellipse, rgba(140, 120, 168, 0.1) 0%, transparent 65%); pointer-events: none; } .piw-hero::after { content: ''; position: absolute; bottom: -80px; right: 10%; width: 500px; height: 400px; background: radial-gradient(ellipse, rgba(122, 152, 130, 0.07) 0%, transparent 65%); pointer-events: none; } .piw-hero__inner { position: relative; z-index: 1; max-width: var(--piw-container-md); margin: 0 auto; } .piw-hero__title { font-size: var(--piw-text-4xl); font-weight: var(--piw-weight-thin); color: var(--piw-text-primary); letter-spacing: var(--piw-tracking-tight); line-height: 1.1; margin-bottom: var(--piw-space-md); } .piw-hero__title em { font-style: italic; color: var(--piw-violet-pale); } .piw-hero__title strong { font-weight: var(--piw-weight-semibold); color: var(--piw-sage-soft); } .piw-hero__subtitle { font-size: var(--piw-text-lg); font-weight: var(--piw-weight-light); color: var(--piw-text-muted); line-height: var(--piw-leading-snug); margin-bottom: var(--piw-space-lg); max-width: 600px; margin-left: auto; margin-right: auto; } .piw-hero__actions { display: flex; align-items: center; justify-content: center; gap: var(--piw-space-sm); flex-wrap: wrap; } /* ============================================================ 11. FORMS & INPUTS ============================================================ */ .piw-form { display: flex; flex-direction: column; gap: var(--piw-space-md); } .piw-form-group { display: flex; flex-direction: column; gap: 0.4rem; } .piw-label { font-size: var(--piw-text-xs); font-weight: var(--piw-weight-light); letter-spacing: var(--piw-tracking-wider); text-transform: uppercase; color: var(--piw-text-secondary); } .piw-input, .piw-textarea, .piw-select { font-family: var(--piw-font-primary); font-size: var(--piw-text-base); font-weight: var(--piw-weight-light); color: var(--piw-text-primary); background: var(--piw-charcoal-soft); border: 1px solid var(--piw-border); border-radius: var(--piw-radius-md); padding: 0.85rem 1.2rem; width: 100%; outline: none; transition: var(--piw-transition); -webkit-appearance: none; appearance: none; } .piw-input::placeholder, .piw-textarea::placeholder { color: var(--piw-text-muted); } .piw-input:focus, .piw-textarea:focus, .piw-select:focus { border-color: var(--piw-violet-mid); box-shadow: 0 0 0 3px rgba(92, 82, 112, 0.15); } .piw-textarea { resize: vertical; min-height: 140px; } .piw-input--error { border-color: var(--piw-rose-mid); } .piw-form-hint { font-size: var(--piw-text-xs); color: var(--piw-text-faint); letter-spacing: var(--piw-tracking-base); } .piw-form-error { font-size: var(--piw-text-xs); color: var(--piw-rose-soft); letter-spacing: var(--piw-tracking-base); } /* ============================================================ 12. ALERT / CALLOUT BLOCKS ============================================================ */ .piw-alert { border-radius: 0 var(--piw-radius-sm) var(--piw-radius-sm) 0; padding: 1rem 1.5rem; font-size: var(--piw-text-sm); font-weight: var(--piw-weight-light); line-height: var(--piw-leading-snug); border-left-width: 3px; border-left-style: solid; border-top: 1px solid; border-right: 1px solid; border-bottom: 1px solid; } .piw-alert--rose { background: rgba(176, 124, 138, 0.07); border-color: rgba(176, 124, 138, 0.2); border-left-color: var(--piw-rose-mid); color: var(--piw-rose-soft); } .piw-alert--sage { background: rgba(122, 152, 130, 0.07); border-color: rgba(122, 152, 130, 0.2); border-left-color: var(--piw-sage-mid); color: var(--piw-sage-soft); } .piw-alert--violet { background: var(--piw-glow-violet); border-color: var(--piw-border); border-left-color: var(--piw-violet-mid); color: var(--piw-violet-pale); } .piw-alert__label { font-weight: var(--piw-weight-regular); letter-spacing: var(--piw-tracking-wider); text-transform: uppercase; font-size: var(--piw-text-xs); opacity: 0.85; display: block; margin-bottom: 0.25rem; } /* ============================================================ 13. DISCLAIMER PAGE COMPONENT ============================================================ */ .piw-disclaimer-wrapper { max-width: var(--piw-container-md); width: 100%; margin: 0 auto; padding: 3rem 1.5rem; } .piw-disclaimer-header { text-align: center; margin-bottom: var(--piw-space-lg); } .piw-disclaimer-card { background: var(--piw-charcoal-mid); border: 1px solid var(--piw-border); border-radius: var(--piw-radius-lg); padding: 3rem 3.5rem; position: relative; overflow: hidden; } .piw-disclaimer-card::before { content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 600px; height: 200px; background: radial-gradient(ellipse, rgba(140, 120, 168, 0.12) 0%, transparent 70%); pointer-events: none; } .piw-disclaimer-card::after { content: ''; position: absolute; bottom: -60px; right: -60px; width: 300px; height: 300px; background: radial-gradient(ellipse, rgba(176, 124, 138, 0.07) 0%, transparent 70%); pointer-events: none; } .piw-disclaimer-section { margin-bottom: 1.8rem; } .piw-disclaimer-card-footer { text-align: center; padding-top: 1.8rem; border-top: 1px solid var(--piw-border); margin-top: 0.5rem; } .piw-disclaimer-card-footer p { font-size: var(--piw-text-xs); font-weight: var(--piw-weight-light); letter-spacing: var(--piw-tracking-wider); text-transform: uppercase; color: var(--piw-text-faint); line-height: var(--piw-leading-loose); } .piw-disclaimer-card-footer p span { color: var(--piw-violet-mist); } /* ============================================================ 14. FOOTER COMPONENT ============================================================ */ .piw-footer { width: 100%; background: var(--piw-charcoal-mid); border-top: 1px solid var(--piw-border); padding: 1.8rem 2.5rem; position: relative; overflow: hidden; } .piw-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( to right, transparent 0%, var(--piw-violet-mid) 35%, var(--piw-sage-deep) 50%, var(--piw-violet-mid) 65%, transparent 100% ); opacity: 0.4; } .piw-footer__inner { max-width: var(--piw-container-lg); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; text-align: center; } .piw-footer__disclaimer { font-size: var(--piw-text-sm); font-weight: var(--piw-weight-light); line-height: var(--piw-leading-base); color: var(--piw-text-secondary); max-width: 860px; letter-spacing: var(--piw-tracking-base); } .piw-footer__disclaimer strong { color: var(--piw-violet-pale); font-weight: var(--piw-weight-regular); } .piw-footer__disclaimer a { color: var(--piw-rose-soft); border-bottom: 1px solid rgba(212, 160, 174, 0.3); } .piw-footer__disclaimer a:hover { color: var(--piw-rose-pale); border-color: rgba(240, 220, 226, 0.5); } .piw-footer__cert { font-size: var(--piw-text-xs); font-weight: var(--piw-weight-light); letter-spacing: var(--piw-tracking-wider); text-transform: uppercase; color: var(--piw-text-secondary); display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: center; } .piw-footer__cert span { color: var(--piw-violet-pale); opacity: 1; } .piw-footer__sep { color: var(--piw-text-muted); opacity: 0.8; } /* ============================================================ 15. UTILITY CLASSES ============================================================ */ /* Spacing */ .piw-mt-xs { margin-top: var(--piw-space-xs); } .piw-mt-sm { margin-top: var(--piw-space-sm); } .piw-mt-md { margin-top: var(--piw-space-md); } .piw-mt-lg { margin-top: var(--piw-space-lg); } .piw-mt-xl { margin-top: var(--piw-space-xl); } .piw-mb-xs { margin-bottom: var(--piw-space-xs); } .piw-mb-sm { margin-bottom: var(--piw-space-sm); } .piw-mb-md { margin-bottom: var(--piw-space-md); } .piw-mb-lg { margin-bottom: var(--piw-space-lg); } .piw-mb-xl { margin-bottom: var(--piw-space-xl); } .piw-pt-sm { padding-top: var(--piw-space-sm); } .piw-pt-md { padding-top: var(--piw-space-md); } .piw-pt-lg { padding-top: var(--piw-space-lg); } .piw-pb-sm { padding-bottom: var(--piw-space-sm); } .piw-pb-md { padding-bottom: var(--piw-space-md); } .piw-pb-lg { padding-bottom: var(--piw-space-lg); } /* Display */ .piw-hidden { display: none; } .piw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Backgrounds */ .piw-bg-deep { background-color: var(--piw-charcoal-deep); } .piw-bg-mid { background-color: var(--piw-charcoal-mid); } .piw-bg-soft { background-color: var(--piw-charcoal-soft); } .piw-bg-violet { background-color: var(--piw-violet-dark); } /* Width */ .piw-w-full { width: 100%; } /* Borders */ .piw-border-top { border-top: 1px solid var(--piw-border); } .piw-border-bottom { border-bottom: 1px solid var(--piw-border); } /* ============================================================ 16. RESPONSIVE BREAKPOINTS ============================================================ */ @media (max-width: 1024px) { .piw-grid--4 { grid-template-columns: repeat(2, 1fr); } .piw-hero__title { font-size: var(--piw-text-3xl); } } @media (max-width: 768px) { :root { --piw-section-padding: 3.5rem 1.2rem; --piw-grid-gap: 1.2rem; } h1 { font-size: var(--piw-text-2xl); } h2 { font-size: var(--piw-text-xl); } h3 { font-size: var(--piw-text-lg); } .piw-grid--2, .piw-grid--3, .piw-grid--4 { grid-template-columns: 1fr; } .piw-nav__links { display: none; } .piw-hero { padding: 4rem 1.2rem 3rem; } .piw-hero__title { font-size: var(--piw-text-2xl); } .piw-hero__subtitle { font-size: var(--piw-text-base); } .piw-disclaimer-card { padding: 2rem 1.5rem; } .piw-footer { padding: 1.5rem 1.2rem; } /* footer disclaimer font-size intentionally not overridden here — see Section 14 */ } @media (max-width: 480px) { .piw-hero__actions { flex-direction: column; align-items: stretch; } .piw-btn { width: 100%; justify-content: center; } .piw-footer__cert { flex-direction: column; gap: 0.3rem; } .piw-footer__sep { display: none; } } /* ============================================================ 17. MOBILE HAMBURGER NAV (extends Section 9 & 16) ============================================================ */ .piw-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; z-index: 200; } .piw-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--piw-text-muted); border-radius: 2px; transition: var(--piw-transition); } .piw-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .piw-hamburger.open span:nth-child(2) { opacity: 0; } .piw-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 768px) { .piw-hamburger { display: flex; } .piw-nav__cta { display: none; } .piw-nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--piw-charcoal-mid); flex-direction: column; gap: 0; border-top: 1px solid var(--piw-border); padding: 0.5rem 0 1rem; z-index: 99; box-shadow: var(--piw-shadow-md); } .piw-nav__links.open { display: flex; } .piw-nav__links li a { display: block; padding: 0.9rem 2rem; border-bottom: 1px solid var(--piw-border); width: 100%; } .piw-nav { position: relative; } } @media (max-width: 480px) { .piw-nav { padding: 1rem 1.2rem; } .piw-nav__logo img { height: 52px !important; } } /* ============================================================ 18. SCROLL FADE-IN ANIMATION ============================================================ */ .piw-fade { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; } .piw-fade.visible { opacity: 1; transform: translateY(0); } /* ============================================================ 19. PAGE-HERO (inner pages) ============================================================ */ .piw-page-hero { padding: 5rem 1.5rem 3.5rem; text-align: center; background: var(--piw-charcoal-mid); border-bottom: 1px solid var(--piw-border); position: relative; overflow: hidden; } .piw-page-hero::before { content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 600px; height: 220px; background: radial-gradient(ellipse, rgba(140,120,168,0.1) 0%, transparent 70%); pointer-events: none; } .piw-page-hero__inner { position: relative; z-index: 1; max-width: var(--piw-container-md); margin: 0 auto; } .piw-page-hero h1 { font-size: var(--piw-text-3xl); font-weight: var(--piw-weight-thin); color: var(--piw-text-primary); margin-bottom: var(--piw-space-sm); } .piw-page-hero p { font-size: var(--piw-text-lg); color: var(--piw-text-muted); line-height: var(--piw-leading-snug); } @media (max-width: 768px) { .piw-page-hero h1 { font-size: var(--piw-text-2xl); } .piw-page-hero p { font-size: var(--piw-text-base); } .piw-page-hero { padding: 3.5rem 1.2rem 2.5rem; } } /* ============================================================ 20. COMPREHENSIVE MOBILE RESPONSIVENESS ============================================================ */ /* ── Tablet: 900px ── */ @media (max-width: 900px) { /* Container */ .piw-container { padding-left: 1.2rem; padding-right: 1.2rem; } /* Nav */ .piw-nav { padding: 1rem 1.5rem; } /* Hero */ .piw-hero { padding: 5rem 1.5rem 4rem; } .piw-hero__title { font-size: var(--piw-text-2xl); } /* 3-col grids → 2-col at tablet */ .piw-grid--3 { grid-template-columns: repeat(2, 1fr); } /* Inline 2-col flex/grid layouts used in book.html what-to-expect */ .piw-grid--2[style*="gap:3rem"], .piw-grid--2[style*="gap: 3rem"] { gap: var(--piw-space-lg); } } /* ── Mobile: 768px (consolidates & fills gaps in existing rules) ── */ @media (max-width: 768px) { /* Container */ .piw-container { padding-left: 1rem; padding-right: 1rem; } /* Nav logo — keep reasonable size */ .piw-nav__logo img { height: 56px !important; } /* All grids → single column */ .piw-grid--2, .piw-grid--3, .piw-grid--4, .piw-grid--auto { grid-template-columns: 1fr !important; } /* Inline flex rows that need to stack */ .piw-card[style*="display:flex"], .piw-card[style*="display: flex"] { flex-direction: column !important; } /* Philosophy belief cards (have inline display:flex) */ [style*="display:flex"][style*="gap:1.5rem"], [style*="display:flex"][style*="gap: 1.5rem"] { flex-direction: column; gap: var(--piw-space-md); } /* Step items in book.html (numbered circles + text) */ [style*="display:flex"][style*="gap:1rem"], [style*="display:flex"][style*="gap: 1rem"] { flex-direction: column; gap: var(--piw-space-sm); } /* Lead magnet form — stack name + email inputs */ [style*="display:flex"][style*="gap:0.8rem"], [style*="display:flex"][style*="gap: 0.8rem"] { flex-direction: column; gap: var(--piw-space-sm); } /* Cards — ensure full width, comfortable padding */ .piw-card { padding: var(--piw-space-md); } /* Badges — wrap cleanly */ .piw-badge { font-size: 0.82rem; padding: 0.3rem 0.8rem; } /* Sections */ .piw-section { padding: 3rem 1rem; } .piw-section--lg { padding: 4rem 1rem; } /* Hero */ .piw-hero { padding: 3.5rem 1rem 2.5rem; } .piw-hero__subtitle { font-size: var(--piw-text-base); max-width: 100%; margin-left: 0; margin-right: 0; } /* Page hero */ .piw-page-hero { padding: 3rem 1rem 2rem; } .piw-page-hero h1 { font-size: var(--piw-text-xl); } /* Alert / callout blocks */ .piw-alert { padding: 0.9rem 1rem; } /* Dividers */ .piw-divider { margin: 1.2rem 0; } /* Footer logo — shrink on mobile */ .piw-footer img[style*="height:110px"] { height: 72px !important; } /* Footer cert row — stack */ .piw-footer__cert { gap: 0.4rem; } /* Footer disclaimer — keep readable size */ .piw-footer__disclaimer { font-size: var(--piw-text-sm); } /* Calendly widget — reduce height on mobile */ .calendly-inline-widget { height: 580px !important; } /* Disclaimer card */ .piw-disclaimer-card { padding: 1.5rem 1rem; } /* Form inputs — full width */ .piw-input, .piw-textarea, .piw-select { font-size: 1rem; /* prevents iOS zoom on focus */ } /* Eyebrow lines — shorten decorative dashes */ .piw-eyebrow::before, .piw-eyebrow::after { width: 24px; } } /* ── Small mobile: 480px ── */ @media (max-width: 480px) { /* Typography */ h1 { font-size: var(--piw-text-xl); } h2 { font-size: var(--piw-text-lg); } h3 { font-size: var(--piw-text-md); } /* Nav */ .piw-nav { padding: 0.8rem 1rem; } .piw-nav__logo img { height: 46px !important; } /* Hero */ .piw-hero__title { font-size: var(--piw-text-xl); line-height: 1.2; } .piw-hero__actions { flex-direction: column; align-items: stretch; gap: var(--piw-space-sm); } .piw-btn { width: 100%; justify-content: center; text-align: center; white-space: normal; } /* Section padding */ .piw-section { padding: 2.5rem 0.9rem; } /* Cards */ .piw-card { padding: 1.2rem; border-radius: var(--piw-radius-md); } /* Footer */ .piw-footer { padding: 1.5rem 1rem; } .piw-footer img[style*="height:110px"] { height: 58px !important; } .piw-footer__cert { flex-direction: column; gap: 0.25rem; } .piw-footer__sep { display: none; } /* Form */ .piw-form { gap: var(--piw-space-sm); } /* Calendly */ .calendly-inline-widget { height: 520px !important; } /* Disclaimer card */ .piw-disclaimer-wrapper { padding: 1.5rem 0.9rem; } } /* ── Footer 3-col layout responsive (Section 20 extension) ── */ @media (max-width: 768px) { .piw-footer [style*="grid-template-columns:1fr 2fr 1fr"], .piw-footer [style*="grid-template-columns: 1fr 2fr 1fr"] { grid-template-columns: 1fr !important; text-align: center; } .piw-footer [style*="grid-template-columns:1fr 2fr 1fr"] > div, .piw-footer [style*="grid-template-columns: 1fr 2fr 1fr"] > div { justify-content: center !important; align-items: center !important; } /* Stack logos centrally on mobile */ .piw-footer img[style*="height:110px"] { height: 72px !important; } .piw-footer img[style*="height:90px"] { height: 60px !important; } } @media (max-width: 480px) { .piw-footer img[style*="height:110px"] { height: 58px !important; } .piw-footer img[style*="height:90px"] { height: 48px !important; } } /* ── Calendly widget centering fix ── */ .calendly-inline-widget { width: 100% !important; min-width: 0 !important; margin-left: auto; margin-right: auto; display: block; }