/* Theme Name: MyThrivelytics Theme URI: https://mythrivelytics.com Author: MyThrivelytics Author URI: https://mythrivelytics.com Description: Custom theme for MyThrivelytics — OligoScan & Styku wellness studio, Rockville MD. Built from mythrivelytics-accessible.html design system. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: Proprietary Text Domain: mythrivelytics */ /* ============================================================ DESIGN TOKENS — must match mythrivelytics-accessible.html ============================================================ */ :root { /* ── Core palette (Theme: Default Sky Blue) ── */ --sky: #6FA8DC; --sky-dark: #3b75ad; --sky-light: #c2daf2; --sage: #8FAF9A; --sage-dark: #6a9178; --sage-light: #c4dace; --stone: #8C9196; --cloud: #F5F7F9; --slate: #3E4A59; --slate-dark: #293340; --sand: #D9CFC1; --white: #ffffff; --cta-bg: #3e78b0; /* ── Semantic aliases (these are what components actually use) ── */ --color-primary: var(--sky); /* buttons, links, highlights */ --color-primary-dark: var(--sky-dark); /* hover, active states */ --color-secondary: var(--sage); /* secondary buttons, accents */ --color-bg: var(--cloud); /* page / section background */ --color-bg-dark: var(--slate-dark);/* dark section background */ --color-heading: var(--slate); /* h1-h4 */ --color-body: var(--stone); /* body copy */ --color-warm: var(--sand); /* warm neutral accents */ --color-cta: var(--cta-bg); /* primary CTA button */ --color-hero-from: var(--sky-dark); /* hero gradient start */ --color-hero-to: var(--slate-dark);/* hero gradient end */ --font-display: 'DM Serif Display', serif; --font-ui: 'Syne', sans-serif; --font-body: 'DM Sans', sans-serif; --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============================================================ COLOUR THEMES Applied via data-theme="[name]" on Persisted in localStorage key: mt_theme ============================================================ */ /* Default — Sky Blue (already set above, explicit for completeness) */ [data-theme="sky"] { --color-primary: #6FA8DC; --color-primary-dark: #3b75ad; --color-secondary: #8FAF9A; --color-bg: #F5F7F9; --color-bg-dark: #293340; --color-heading: #3E4A59; --color-body: #8C9196; --color-warm: #D9CFC1; --color-cta: #3e78b0; --color-hero-from: #3b75ad; --color-hero-to: #293340; /* pass-through to legacy vars so all existing CSS still works */ --sky: #6FA8DC; --sky-dark: #3b75ad; --sage: #8FAF9A; --cloud: #F5F7F9; --slate: #3E4A59; --slate-dark: #293340; --stone: #8C9196; --sand: #D9CFC1; --cta-bg: #3e78b0; } /* Forest Green */ [data-theme="forest"] { --color-primary: #4a8c6a; --color-primary-dark: #2e6648; --color-secondary: #8FAF9A; --color-bg: #F2F7F4; --color-bg-dark: #1e3028; --color-heading: #1e3028; --color-body: #556b5e; --color-warm: #c9b99a; --color-cta: #2e6648; --color-hero-from: #2e6648; --color-hero-to: #1e3028; --sky: #4a8c6a; --sky-dark: #2e6648; --sage: #8FAF9A; --cloud: #F2F7F4; --slate: #1e3028; --slate-dark: #152218; --stone: #556b5e; --sand: #c9b99a; --cta-bg: #2e6648; } /* Warm Sand */ [data-theme="sand"] { --color-primary: #b8956a; --color-primary-dark: #8c6640; --color-secondary: #c9b99a; --color-bg: #faf7f2; --color-bg-dark: #3d2e1e; --color-heading: #3d2e1e; --color-body: #7a6555; --color-warm: #D9CFC1; --color-cta: #8c6640; --color-hero-from: #8c6640; --color-hero-to: #3d2e1e; --sky: #b8956a; --sky-dark: #8c6640; --sage: #c9b99a; --cloud: #faf7f2; --slate: #3d2e1e; --slate-dark: #2a1f14; --stone: #7a6555; --sand: #e8ddd0; --cta-bg: #8c6640; } /* Midnight Slate */ [data-theme="midnight"] { --color-primary: #7eaacc; --color-primary-dark: #5080a0; --color-secondary: #8faf9a; --color-bg: #f0f2f5; --color-bg-dark: #1a2030; --color-heading: #1a2030; --color-body: #6a7585; --color-warm: #c8b8a8; --color-cta: #5080a0; --color-hero-from: #1a2030; --color-hero-to: #0d1018; --sky: #7eaacc; --sky-dark: #5080a0; --sage: #8faf9a; --cloud: #f0f2f5; --slate: #1a2030; --slate-dark: #0d1018; --stone: #6a7585; --sand: #c8b8a8; --cta-bg: #5080a0; } /* Rose Quartz */ [data-theme="rose"] { --color-primary: #c4788a; --color-primary-dark: #8c4a5e; --color-secondary: #d4a8b0; --color-bg: #fdf5f6; --color-bg-dark: #3a1e24; --color-heading: #3a1e24; --color-body: #7a5560; --color-warm: #e8d0c0; --color-cta: #8c4a5e; --color-hero-from: #8c4a5e; --color-hero-to: #3a1e24; --sky: #c4788a; --sky-dark: #8c4a5e; --sage: #d4a8b0; --cloud: #fdf5f6; --slate: #3a1e24; --slate-dark: #260f14; --stone: #7a5560; --sand: #e8d0c0; --cta-bg: #8c4a5e; } /* Golden Hour */ [data-theme="gold"] { --color-primary: #c9a84c; --color-primary-dark: #9a7a28; --color-secondary: #8faf9a; --color-bg: #fdfaf2; --color-bg-dark: #2e2410; --color-heading: #2e2410; --color-body: #7a6840; --color-warm: #e8d890; --color-cta: #9a7a28; --color-hero-from: #9a7a28; --color-hero-to: #2e2410; --sky: #c9a84c; --sky-dark: #9a7a28; --sage: #8faf9a; --cloud: #fdfaf2; --slate: #2e2410; --slate-dark: #1e1808; --stone: #7a6840; --sand: #e8d890; --cta-bg: #9a7a28; } /* ── Apply semantic aliases to existing components ─────────── */ /* Hero section */ .hero-section, .hero-section .hero-inner { background: linear-gradient(135deg, var(--color-hero-from) 0%, var(--color-hero-to) 100%) !important; } /* Buttons */ .btn-primary, .cta-button, .book-cta-btn { background-color: var(--color-cta) !important; } .btn-primary:hover, .cta-button:hover, .book-cta-btn:hover { background-color: var(--color-primary-dark) !important; } .btn-secondary { border-color: var(--color-secondary) !important; color: var(--color-secondary) !important; } /* Body bg */ body { background-color: var(--color-bg) !important; } /* Headings */ h1, h2, h3, h4, .section-title { color: var(--color-heading); } /* Accent lines, pills */ .eyebrow-pill, .stat-pill, .service-tag { background: color-mix(in srgb, var(--color-primary) 12%, transparent); border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); color: var(--color-primary); } /* Nav active + links */ .nav-link:hover, .nav-link.active { color: var(--color-primary) !important; } /* Scan result bar fills */ .bar-optimal { background: var(--color-secondary) !important; } .bar-watch { background: var(--color-primary) !important; } /* ============================================================ THEME SWITCHER WIDGET ============================================================ */ #mt-theme-switcher { position: fixed; bottom: 24px; right: 24px; z-index: 9999; font-family: var(--font-body); } .mt-ts-toggle { width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.2); transition: transform 0.2s var(--ease-bounce), background 0.3s; margin-left: auto; } .mt-ts-toggle:hover { transform: scale(1.1); } .mt-ts-toggle svg { width: 20px; height: 20px; fill: white; } .mt-ts-panel { display: none; background: white; border-radius: 16px; padding: 16px; margin-bottom: 10px; box-shadow: 0 8px 40px rgba(0,0,0,0.18); width: 220px; border: 1px solid rgba(0,0,0,0.06); } .mt-ts-panel.open { display: block; animation: tsSlideUp 0.2s var(--ease-smooth); } @keyframes tsSlideUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} } .mt-ts-title { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #888; margin-bottom: 12px; } .mt-ts-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mt-ts-swatch { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; border: none; background: none; padding: 6px 4px; border-radius: 10px; transition: background 0.15s; } .mt-ts-swatch:hover { background: #f5f5f5; } .mt-ts-swatch.active { background: #f0f0f0; outline: 2px solid currentColor; outline-offset: 1px; } .mt-ts-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.6); box-shadow: 0 2px 8px rgba(0,0,0,0.15); position: relative; overflow: hidden; } .mt-ts-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 60%); } .mt-ts-label { font-size: 10px; font-weight: 600; color: #555; text-align: center; line-height: 1.2; } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--cloud); color: var(--slate); overflow-x: hidden; font-size: 16px; line-height: 1.6; } /* WordPress removes default margins — restore for content */ .mt-content p { margin-bottom: 1em; } .mt-content h2 { margin-bottom: 0.5em; margin-top: 1.5em; } .mt-content h3 { margin-bottom: 0.4em; margin-top: 1.2em; } .mt-content ul, .mt-content ol { margin-bottom: 1em; padding-left: 1.5em; } .mt-content li { margin-bottom: 0.25em; } /* ── Missing global utility classes ─────────────────────────── */ .section-title { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 52px); color: var(--slate-dark); letter-spacing: -1.5px; line-height: 1.05; margin-bottom: 12px; } .section-sub { font-size: 17px; color: var(--stone); font-weight: 300; line-height: 1.7; } /* About section right-column content wrapper */ .about-content { display: flex; flex-direction: column; justify-content: center; } /* FAQ section left-column header wrapper */ .faq-section-header { position: sticky; top: 100px; }