/* Theme Name: Accelerated JoyWorks Blog Theme URI: https://www.acceleratedjoyworks.com/ Author: Tiffany M. Bastedo Author URI: https://www.acceleratedjoyworks.com/ Description: A blog companion theme for Accelerated JoyWorks. Matches the main AcceleratedJoyWorks.com HTML site — deep forest greens, antique gold accents, Cormorant Garamond / Cinzel / Raleway typography — so the blog feels like a seamless extension of the brand. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ajw-blog Tags: blog, one-column, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready */ /* ============================================================ ACCELERATED JOYWORKS — GLOBAL STYLESHEET ============================================================ Project : Accelerated JoyWorks Author : Built for Tiffany M. Bastedo Site : www.AcceleratedJoyWorks.com Version : 1.0 Updated : 2024 ARCHITECTURE OVERVIEW ───────────────────── This stylesheet is the single source of truth for all visual design across every page. It is structured as: 1. Design Tokens (CSS custom properties / variables) 2. Reset & Base styles 3. Typography utilities 4. Background utilities 5. Border utilities 6. Buttons 7. Cards 8. Dividers & Ornaments 9. Badges & Tags 10. Layout utilities 11. Animations 12. Navigation 13. Footer 14. Hero — Homepage 15. Page Hero (inner pages) 16. Section Header 17. Service Cards 18. Split Layout 19. Quote / Testimonial 20. CTA Band 21. Booking Cards (Joyful Choices page) 22. Approach Steps 23. Coaching Is 24. About Page 25. JoyCircle Page 26. Utility extras FONT STACK (loaded via Google Fonts in each HTML ) ───────────────────────────────────────────────────────── Display : Cormorant Garamond — Used for large headlines, pull quotes, and decorative italic text. Heading : Cinzel — Used for eyebrow labels, nav links, button text, and uppercase UI elements. Body : Raleway — Used for all paragraph and body copy. COLOR PHILOSOPHY ───────────────── Deep forest greens form the primary surface palette, evoking growth, depth, and trust. Antique gold provides the luxury accent for interactive elements and emphasis. Brown/parchment tones add warmth to muted text. HOW TO MODIFY ───────────── • To change brand colors: edit the :root variables only. Every color in the site flows from those tokens. • To add a new page: copy an existing HTML file and reuse existing component classes. No new CSS should be needed for standard layouts. • To add a new card type: extend .service-card or .booking-card rather than writing new card styles. • Gradient on heading tags is controlled by the "h1 em, h2 em, h3 em" rule in the Typography section. ============================================================ */ /* ============================================================ VERDANT PALETTE — Luxury Green, Gold & Brown ============================================================ */ /* ── VARIABLES ── */ :root { /* ── RAW COLOR PALETTE ────────────────────────────────────── These are the raw named swatches. Prefer using semantic aliases below rather than referencing raw colors directly in component styles. ────────────────────────────────────────────────────────── */ /* Greens — darkest to lightest */ --midnight-grove: #0D2118; /* Page background for dark sections */ --deep-forest: #1B3A2D; /* Primary card & surface background */ --emerald-noir: #2C5F47; /* Card gradient highlight (top-left) */ --moss-shadow: #3A7A55; /* Mid-tone green for hover states */ --jewel-green: #3D8B5E; /* .btn-green fill color */ --verdant-mist: #5FAF82; /* Muted accent; badge text; gradient start on em */ /* Golds — the luxury accent family */ --antique-gold: #C9A84C; /* Primary accent: borders, icons, CTAs */ --warm-brass: #B8860B; /* Darker gold for shimmer animation start/end */ --champagne: #E8D5A3; /* Light gold for nav text, gradient end on em */ /* Browns — warmth tones */ --aged-leather: #6B4226; /* .badge-leather background tint */ --walnut: #4A2E1A; /* .card-warm background */ --parchment: #D4B896; /* Default muted body text color */ /* Neutrals */ --cream-ivory: #F5F0E8; /* Heading text, high-contrast body text */ --smoke: #1A1A18; /* Global page background (body) */ /* ── SEMANTIC ALIASES ─────────────────────────────────────── Use these in component styles so that a single palette change here propagates everywhere automatically. ────────────────────────────────────────────────────────── */ --color-bg: var(--smoke); /* body background */ --color-surface: var(--deep-forest); /* card / panel background */ --color-surface-2: var(--emerald-noir); /* elevated surface / card hover */ --color-border: rgba(201, 168, 76, 0.25); /* default border color */ --color-accent: var(--antique-gold); /* primary interactive accent */ --color-text: var(--cream-ivory); /* primary text */ --color-text-muted:var(--parchment); /* secondary / body text */ --color-highlight: var(--verdant-mist); /* highlight / badge accent */ /* ── TYPOGRAPHY ───────────────────────────────────────────── Fonts must be loaded in each HTML via Google Fonts. Import URL: https://fonts.googleapis.com/css2?family=Cormorant+Garamond :ital,wght@0,300;0,400;0,500;1,300;1,400;1,500 &family=Cinzel:wght@400;500;600 &family=Raleway:wght@300;400;500;600&display=swap ────────────────────────────────────────────────────────── */ --font-display: 'Cormorant Garamond', Georgia, serif; /* Large decorative headings & quotes */ --font-heading: 'Cinzel', serif; /* Eyebrow labels, nav, buttons, badges */ --font-body: 'Raleway', sans-serif; /* All paragraph and UI body copy */ /* ── TYPE SCALE ───────────────────────────────────────────── Based on a 16px root. Use these tokens rather than hardcoded px/rem values so the scale stays consistent. ────────────────────────────────────────────────────────── */ --text-xs: 0.625rem; /* 10px — eyebrow labels, badge text */ --text-sm: 0.75rem; /* 12px — fine print, footer copy */ --text-base: 0.875rem; /* 14px — standard body/paragraph text */ --text-md: 1rem; /* 16px — slightly larger body text */ --text-lg: 1.25rem; /* 20px — lead paragraphs */ --text-xl: 1.5rem; /* 24px — h4 headings */ --text-2xl: 2rem; /* 32px — h3 headings */ --text-3xl: 3rem; /* 48px — h2 section headings */ --text-4xl: 4rem; /* 64px — h1 page headings */ /* ── SPACING SCALE ─────────────────────────────────────────── Multiples of 0.25rem. Use these for margin/padding/gap. ────────────────────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ── BORDERS & RADIUS ─────────────────────────────────────── Three tiers of gold border opacity: subtle (ghost), default (standard cards), strong (highlighted/focused). ────────────────────────────────────────────────────────── */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 9999px; --border-subtle: 1px solid rgba(201, 168, 76, 0.15); /* ghost borders, resting state */ --border-default: 1px solid rgba(201, 168, 76, 0.30); /* standard card/section borders */ --border-strong: 1px solid rgba(201, 168, 76, 0.60); /* active/focus/hover borders */ /* ── SHADOWS ───────────────────────────────────────────────── --shadow-gold is used for card hover glow effects. ────────────────────────────────────────────────────────── */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6); --shadow-gold:0 0 24px rgba(201, 168, 76, 0.15); /* warm gold glow for card hover */ /* ── TRANSITIONS ───────────────────────────────────────────── Use --transition-fast for color/opacity changes. Use --transition-base for transforms and layout shifts. Use --transition-slow for nav drawers and overlays. ────────────────────────────────────────────────────────── */ --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; } /* ============================================================ RESET & BASE ───────────────────────────────────────────────────────────── Box-sizing normalization, smooth scrolling, and base element resets. img/video are set to block to eliminate the inline baseline gap below media elements. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-weight: 300; line-height: 1.6; } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: inherit; } ul, ol { list-style: none; } /* ============================================================ TYPOGRAPHY ───────────────────────────────────────────────────────────── Utility classes for font families, colors, and styles. The h1–h6 base styles set Cormorant Garamond for all headings at font-weight 300 (elegant thin look). GRADIENT HEADING RULE: Any nested inside h1/h2/h3 automatically receives a verdant-mist → antique-gold → champagne gradient via the "h1 em, h2 em, h3 em" rule below. This is the primary mechanism for making key heading words "pop". To disable the gradient on a specific em, add a custom inline style. .eyebrow — small all-caps Cinzel label above headings. Used as a section category identifier. ============================================================ */ .font-display { font-family: var(--font-display); } .font-heading { font-family: var(--font-heading); } .font-body { font-family: var(--font-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 300; line-height: 1.1; color: var(--color-text); } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-md); } p { font-size: var(--text-base); line-height: 1.7; color: var(--color-text-muted); } /* Eyebrow / label text */ .eyebrow { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.35em; text-transform: uppercase; color: var(--antique-gold); } .text-gold { color: var(--antique-gold); } .text-brass { color: var(--warm-brass); } .text-champagne{ color: var(--champagne); } .text-parchment{ color: var(--parchment); } .text-mist { color: var(--verdant-mist); } .text-muted { color: var(--color-text-muted); opacity: 0.7; } .text-italic { font-style: italic; } /* Gradient on em inside headings */ h1 em, h2 em, h3 em { background: linear-gradient( 115deg, var(--verdant-mist) 0%, var(--antique-gold) 45%, var(--champagne) 75%, var(--antique-gold) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: italic; } /* ============================================================ BACKGROUNDS ============================================================ */ .bg-smoke { background-color: var(--smoke); } .bg-midnight { background-color: var(--midnight-grove); } .bg-forest { background-color: var(--deep-forest); } .bg-emerald { background-color: var(--emerald-noir); } .bg-moss { background-color: var(--moss-shadow); } .bg-walnut { background-color: var(--walnut); } .bg-leather { background-color: var(--aged-leather); } /* Gradient surfaces */ .bg-gradient-forest { background: linear-gradient(160deg, var(--deep-forest), var(--midnight-grove)); } .bg-gradient-gold { background: linear-gradient(135deg, var(--warm-brass), var(--antique-gold)); } .bg-gradient-warm { background: linear-gradient(135deg, var(--walnut), #1a0f08); } /* ============================================================ BORDERS ============================================================ */ .border { border: var(--border-default); } .border-subtle { border: var(--border-subtle); } .border-strong { border: var(--border-strong); } .border-t { border-top: var(--border-default); } .border-b { border-bottom: var(--border-default); } .border-l { border-left: var(--border-default); } .border-r { border-right: var(--border-default); } /* ============================================================ BUTTONS ───────────────────────────────────────────────────────────── All buttons share the base .btn class. Apply one modifier: .btn-gold — Filled antique gold; primary CTA .btn-ghost — Transparent with gold border; secondary CTA .btn-green — Filled jewel green; alternative CTA .btn-link — Underline-style text link; inline CTAs Buttons use Cinzel (--font-heading) at 0.625rem/10px with wide letter-spacing for the luxury uppercase label look. All buttons shift up 1px on hover (transform: translateY). ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.25em; text-transform: uppercase; padding: 0.85rem 2rem; border: none; transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } /* Gold filled */ .btn-gold { background: var(--antique-gold); color: var(--smoke); } .btn-gold:hover { background: var(--champagne); } /* Ghost / outline */ .btn-ghost { background: transparent; color: var(--champagne); border: var(--border-default); } .btn-ghost:hover { border-color: var(--antique-gold); color: var(--antique-gold); } /* Green filled */ .btn-green { background: var(--jewel-green); color: var(--cream-ivory); } .btn-green:hover { background: var(--moss-shadow); } /* Text link style */ .btn-link { background: transparent; color: var(--antique-gold); border-bottom: 1px solid rgba(201, 168, 76, 0.4); padding: 0 0 2px; border-radius: 0; font-family: var(--font-body); letter-spacing: 0.15em; } .btn-link:hover { border-color: var(--antique-gold); opacity: 1; } /* ============================================================ CARDS — Base ───────────────────────────────────────────────────────────── The base .card class is rarely used directly. Most cards in the site use the more specific .service-card, .booking-card, or .value-card variants defined later. All cards use a 145° gradient: emerald-noir → deep-forest → midnight-grove This creates depth and lifts the card off the page background (which is plain --smoke). Modifiers: .card-sm — reduced padding .card-lg — increased padding .card-surface-2 — uses emerald-noir background .card-dark — uses midnight-grove background .card-warm — uses walnut background ============================================================ */ .card { background: linear-gradient(145deg, var(--emerald-noir) 0%, var(--deep-forest) 55%, var(--midnight-grove) 100%); border: var(--border-subtle); padding: var(--space-8); transition: transform var(--transition-base), box-shadow var(--transition-base); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-gold); } .card-sm { padding: var(--space-6); } .card-lg { padding: var(--space-12); } .card-surface-2 { background: var(--emerald-noir); } .card-dark { background: var(--midnight-grove); } .card-warm { background: var(--walnut); } /* ============================================================ DIVIDERS & ORNAMENTS ───────────────────────────────────────────────────────────── .divider — Full-width gold gradient horizontal rule. Fades to transparent at edges. Use between major sections within a page block. .divider-short — 3rem wide solid gold bar. Use directly below .eyebrow labels and above headings for a luxury editorial accent. .ornament-* — Four-corner bracket decorations for image containers and hero sections. Apply all four (.ornament-tl, -tr, -bl, -br) to the parent (position: relative) element. ============================================================ */ .divider { width: 100%; height: 1px; background: linear-gradient(to right, transparent, var(--antique-gold), transparent); opacity: 0.35; border: none; margin: var(--space-8) 0; } .divider-short { width: 3rem; height: 1px; background: var(--antique-gold); opacity: 0.6; margin: var(--space-4) 0; } /* Corner bracket ornament */ .ornament { position: absolute; width: 60px; height: 60px; opacity: 0.3; } .ornament-tl { top: 1.5rem; left: 1.5rem; border-top: 1px solid var(--antique-gold); border-left: 1px solid var(--antique-gold); } .ornament-tr { top: 1.5rem; right: 1.5rem; border-top: 1px solid var(--antique-gold); border-right: 1px solid var(--antique-gold); } .ornament-bl { bottom: 1.5rem; left: 1.5rem; border-bottom: 1px solid var(--antique-gold); border-left: 1px solid var(--antique-gold); } .ornament-br { bottom: 1.5rem; right: 1.5rem; border-bottom: 1px solid var(--antique-gold); border-right: 1px solid var(--antique-gold); } /* ============================================================ BADGES & TAGS ───────────────────────────────────────────────────────────── Inline labels for categorizing content. Three variants: .badge-gold — gold tint; used on service/booking cards to flag premium or intensive options .badge-green — green tint; used for community/group offerings (e.g. JoyCircle) .badge-leather — warm brown tint; available for alternative category labeling Usage: Intensive ============================================================ */ .badge { display: inline-block; font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; padding: 0.3rem 0.75rem; } .badge-gold { background: rgba(201, 168, 76, 0.12); border: 1px solid rgba(201, 168, 76, 0.45); color: var(--antique-gold); } .badge-green { background: rgba(61, 139, 94, 0.15); border: 1px solid rgba(61, 139, 94, 0.45); color: var(--verdant-mist); } .badge-leather { background: rgba(107, 66, 38, 0.2); border: 1px solid rgba(107, 66, 38, 0.5); color: var(--parchment); } /* ============================================================ LAYOUT UTILITIES ───────────────────────────────────────────────────────────── .container — Max 1280px centered with 4rem side padding. Used for all full-width sections. .container-narrow — Max 800px centered. Use for text-heavy sections, quotes, single-column content. .section — 8rem top/bottom padding (desktop). The standard vertical rhythm unit. .section-sm — 4rem top/bottom padding. For tighter accent bands (quotes, philosophy strips). .grid-2/3/4 — Responsive fixed grid helpers. Prefer .service-grid (auto-fit) for card layouts since it handles varied column counts. ============================================================ */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-16); } .container-narrow { max-width: 800px; margin: 0 auto; padding: 0 var(--space-8); } .section { padding: var(--space-32) 0; } .section-sm { padding: var(--space-16) 0; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .justify-between{ justify-content: space-between; } .justify-center { justify-content: center; } .gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } .relative { position: relative; } .overflow-hidden { overflow: hidden; } .text-center { text-align: center; } /* ============================================================ ANIMATIONS ───────────────────────────────────────────────────────────── All scroll-triggered animations are paused by default via JS (animationPlayState: 'paused') and unpaused when the element enters the viewport via IntersectionObserver. This script runs at the bottom of each HTML page. .animate-fade-up — Elements rise 20px and fade in. The standard entrance animation. .animate-fade-in — Fade in only, no movement. .animate-float — Gentle bob for decorative elements. .delay-1 → .delay-5 — Stagger children by 0.1s increments. Apply to siblings for cascade effect. .text-shimmer — Animated gold shimmer for hero text. Used on the homepage hero h1 . Uses background-clip: text technique. Do NOT apply to elements with a border or box-shadow (webkit clipping conflict). ============================================================ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .animate-fade-up { animation: fadeUp 0.7s ease both; } .animate-fade-in { animation: fadeIn 0.7s ease both; } .animate-float { animation: float 6s ease-in-out infinite; } /* Stagger delays */ .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } .delay-5 { animation-delay: 0.5s; } /* Gold shimmer text effect */ .text-shimmer { background: linear-gradient( 90deg, var(--warm-brass) 0%, var(--antique-gold) 40%, var(--champagne) 50%, var(--antique-gold) 60%, var(--warm-brass) 100% ); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 10s linear infinite; } /* ============================================================ NAVIGATION ───────────────────────────────────────────────────────────── Fixed top navigation with two states: DEFAULT (transparent): Used on pages with a full-bleed hero (index.html, joycircle.html). The nav gradient fades to transparent so it blends with the hero image/video. SCROLLED / .scrolled: Triggered by JS when window.scrollY > 60px. Also applied as a static class on inner pages (about, approach, coaching, joyful-choices) that have a solid page-hero background instead of a full hero. Adds backdrop-filter blur for the frosted glass effect. MOBILE (< 960px): .nav-toggle (hamburger) becomes visible. .nav-links slides in from the right as a full-height drawer. .nav-overlay darkens the page behind it. JS toggles .open on both elements. To add a new nav link: add an
  • to .nav-links in every HTML file. The .nav-cta modifier wraps the "Joyful Choices" booking link in a ghost button style. ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.5rem 0; background: rgba(10,26,19,0.10); transition: background var(--transition-base), padding var(--transition-base); } .nav.scrolled { background: rgba(10,26,19,0.10); padding: 0.85rem 0; border-bottom: var(--border-subtle); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .nav .container { display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--warm-brass); text-decoration: none; transition: color var(--transition-fast); white-space: nowrap; } .nav-logo:hover { opacity: 0.8; } .nav-links { display: flex; align-items: center; gap: 2.25rem; list-style: none; } .nav-links a { font-family: var(--font-heading); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--champagne); transition: color var(--transition-fast); } .nav-links a:hover, .nav-links a.active { color: var(--antique-gold); } .nav-links .nav-cta a { background: transparent; border: 1px solid rgba(201,168,76,0.5); color: var(--antique-gold); padding: 0.5rem 1.25rem; transition: all var(--transition-fast); } .nav-links .nav-cta a:hover { background: var(--antique-gold); color: var(--smoke); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 110; } .nav-toggle span { display: block; width: 24px; height: 1px; background: var(--champagne); transition: all var(--transition-base); } .nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 960px) { .nav-toggle { display: flex; } .nav-links { position: fixed; top: 0; right: -100%; width: 82%; max-width: 320px; height: 100vh; background: var(--midnight-grove); flex-direction: column; align-items: flex-start; padding: 6rem 2.5rem 2.5rem; gap: 2rem; border-left: var(--border-default); transition: right var(--transition-slow); } .nav-links.open { right: 0; } .nav-links a { font-size: 0.75rem; } .nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 98; opacity: 0; pointer-events: none; transition: opacity var(--transition-base); } .nav-overlay.open { opacity: 1; pointer-events: all; } } /* ============================================================ FOOTER ───────────────────────────────────────────────────────────── Three-column grid: brand/contact (2fr) + two nav columns. Collapses to single column on mobile (< 768px). UPDATE CHECKLIST — when site info changes: • Business email → .footer-contact a[href^="mailto"] • Phone → .footer-contact a[href^="tel"] • Address → third

    in .footer-contact • Social links → .footer-social anchors • Copyright year → .footer-copy (appears in every page) ============================================================ */ .footer { background: var(--midnight-grove); border-top: var(--border-subtle); padding: 5rem 0 2.5rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: var(--border-subtle); margin-bottom: 2rem; } .footer-logo { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--warm-brass); text-decoration: none; display: inline-block; margin-bottom: 1.25rem; } .footer-logo:hover { opacity: 0.8; } .footer-tagline { font-family: var(--font-display); font-size: 1rem; font-style: italic; color: var(--parchment); margin-bottom: 1.25rem; line-height: 1.6; } .footer-contact p { font-size: 0.78rem; color: var(--parchment); opacity: 0.75; margin-bottom: 0.4rem; } .footer-contact a { color: var(--antique-gold); } .footer-social { display: flex; gap: 0.75rem; margin-top: 1.5rem; } .footer-social a { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: var(--border-subtle); color: var(--parchment); font-size: 0.7rem; font-family: var(--font-heading); letter-spacing: 0.05em; transition: all var(--transition-fast); } .footer-social a:hover { border-color: var(--antique-gold); color: var(--antique-gold); } .footer-nav-col h6 { font-family: var(--font-heading); font-size: 0.58rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--antique-gold); margin-bottom: 1.5rem; } .footer-nav-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; } .footer-nav-col a { font-size: 0.78rem; color: var(--parchment); opacity: 0.75; transition: all var(--transition-fast); } .footer-nav-col a:hover { color: var(--antique-gold); opacity: 1; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-copy { font-size: 0.7rem; color: var(--parchment); opacity: 0.4; } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; } .footer-bottom { flex-direction: column; text-align: center; } } /* ============================================================ HERO — HOMEPAGE (index.html only) ───────────────────────────────────────────────────────────── Full-screen hero with video background. ASSET REFERENCES: Video : images/Acceleraed JoyWorks Brand Video.mp4 (note: "Acceleraed" is the actual filename — typo in original asset, do not rename without updating the src in index.html) Poster : images/StockCake-Golden_Hour_Romance-2984152-medium.jpg Displayed while the video loads or if autoplay is blocked by the browser. .hero-media video — autoplay, muted, loop (required for autoplay in modern browsers). .hero-media img — hidden fallback (display:none). The browser shows this if video fails. .hero-overlay — dark gradient over the video to ensure text remains readable at all times. .hero-scroll — decorative scroll indicator at bottom center. Fades in after 1s delay. ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; } .hero-media img { display: none; } /* ── Mobile orientation: portrait → show image, landscape → show video ── */ @media screen and (max-width: 900px) and (orientation: portrait) { .hero-media video { display: none; } .hero-media picture { display: block; } .hero-media img { display: block; } } @media screen and (max-width: 900px) and (orientation: landscape) { .hero-media video { display: block; } .hero-media picture { display: none; } .hero-media img { display: none; } } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(10,26,19,0.88) 0%, rgba(13,33,24,0.55) 55%, rgba(13,33,24,0.78) 100% ); z-index: 1; } .hero-content { position: relative; z-index: 2; max-width: 760px; padding: 0 var(--space-16); padding-top: 7rem; } .hero h1 { font-size: clamp(2.6rem, 5.5vw, 5.2rem); line-height: 1.05; margin: 0.75rem 0 1.5rem; } .hero-sub { font-size: 1.05rem; color: var(--parchment); margin-bottom: 2.75rem; max-width: 540px; line-height: 1.8; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; } .hero-scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0.5; animation: fadeUp 1s ease 1s both; } .hero-scroll span { font-family: var(--font-heading); font-size: 0.5rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--champagne); } .hero-scroll-line { width: 1px; height: 50px; background: linear-gradient(to bottom, var(--antique-gold), transparent); animation: float 2s ease-in-out infinite; } @media (max-width: 600px) { .hero-content { padding: 0 var(--space-8); padding-top: 6rem; } } /* ============================================================ PAGE HERO — Inner pages (about, approach, coaching, etc.) ───────────────────────────────────────────────────────────── Shorter hero for non-homepage pages. Uses a deep forest gradient background with an optional full-bleed image at low opacity (via .page-hero-img) for visual texture. Structure:

    [optional ornament divs]

    ...

    ......

    ...

    NOTE: Inner pages apply .scrolled directly to .nav as a static class (not JS-toggled) since there's no transparent hero phase — the nav is always opaque on these pages. ============================================================ */ .page-hero { padding: 11rem 0 5.5rem; position: relative; overflow: hidden; text-align: center; background: linear-gradient(160deg, var(--deep-forest) 0%, var(--midnight-grove) 100%); } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% -10%, rgba(201,168,76,0.09) 0%, transparent 65%); } .page-hero-img { position: absolute; inset: 0; } .page-hero-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.12; } .page-hero-content { position: relative; z-index: 1; } .page-hero h1 { font-size: clamp(2.2rem, 4.5vw, 4rem); margin: 0.75rem 0 1.25rem; } .page-hero p { font-size: 1rem; max-width: 560px; margin: 0 auto; line-height: 1.8; } .ornament-tl, .ornament-tr, .ornament-bl, .ornament-br { position: absolute; } /* ============================================================ SECTION HEADER ───────────────────────────────────────────────────────────── Centered text block used at the top of most content sections. Recommended structure inside .section-header:

    Category Label

    Main Heading

    Optional supporting paragraph.

    Max-width 620px keeps line lengths comfortable at all viewport sizes. ============================================================ */ .section-header { max-width: 620px; margin: 0 auto var(--space-16); text-align: center; } .section-header h2 { margin: 0.75rem 0 1rem; } .section-header p { font-size: 0.92rem; line-height: 1.85; } /* ============================================================ SERVICE CARDS ───────────────────────────────────────────────────────────── Used on: index.html, about.html, approach.html, coaching.html .service-grid uses auto-fit with minmax(260px, 1fr) so it adapts from 1 column (mobile) to 4 columns (desktop) automatically without media queries. Each card has: • A gradient background (emerald-noir → deep-forest → midnight-grove) at 145° for depth against the flat section background. • A ::before pseudo-element (gold top line) that fades in on hover for a premium reveal effect. • translateY(-4px) lift + gold box-shadow on hover. .service-icon — Large decorative character (typographic symbol from Unicode). Not an icon font. Change the character directly in HTML. Current icons used: ✦ ◈ ❧ ✉ ⬡ ◉ ⟡ ============================================================ */ .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .service-card { background: linear-gradient(145deg, var(--emerald-noir) 0%, var(--deep-forest) 50%, var(--midnight-grove) 100%); border: var(--border-subtle); padding: 2.25rem; position: relative; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--antique-gold), transparent); opacity: 0; transition: opacity var(--transition-base); } .service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 48px rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.3); } .service-card:hover::before { opacity: 1; } .service-icon { font-family: var(--font-display); font-size: 2rem; color: var(--antique-gold); margin-bottom: 1rem; line-height: 1; } .service-card h4 { font-family: var(--font-heading); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--champagne); margin-bottom: 0.85rem; } .service-card p { font-size: 0.82rem; line-height: 1.85; } /* ============================================================ SPLIT LAYOUT ───────────────────────────────────────────────────────────── Two-column 50/50 layout for image + text pairs. .split — image left, text right .split-reverse — text left, image right (uses direction:rtl trick so markup order stays logical for screen readers) .split-img::after — Gold border inset 1.25rem behind the image for a layered depth effect. The z-index: -1 keeps it behind the img. Collapses to single column below 900px. Image height reduces from 580px to 420px on mobile. USAGE:
    ... text content ...
    ============================================================ */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .split-reverse { direction: rtl; } .split-reverse > * { direction: ltr; } .split-img { position: relative; } .split-img img { width: 100%; height: 580px; object-fit: cover; display: block; } .split-img::after { content: ''; position: absolute; inset: -1.25rem; border: var(--border-subtle); pointer-events: none; z-index: -1; } @media (max-width: 900px) { .split, .split-reverse { grid-template-columns: 1fr; gap: 3rem; direction: ltr; } .split-img img { height: 420px; } } /* ============================================================ QUOTE / TESTIMONIAL ───────────────────────────────────────────────────────────── Styled pull-quote block with a large decorative quotation mark and a left gold border. USAGE:
    "

    Quote text here...

    Attribution  ·  Title

    To add client testimonials in future: duplicate this component inside a grid or slider container. ============================================================ */ .quote-block { position: relative; padding: 2.5rem 2.5rem 2.5rem 3.75rem; border-left: 2px solid var(--antique-gold); } .quote-mark { position: absolute; top: 1rem; left: 1rem; font-family: var(--font-display); font-size: 5rem; line-height: 1; color: var(--antique-gold); opacity: 0.25; } .quote-text { font-family: var(--font-display); font-size: 1.35rem; font-style: italic; color: var(--cream-ivory); line-height: 1.65; margin-bottom: 1.25rem; } .quote-attr { font-family: var(--font-heading); font-size: 0.58rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--antique-gold); } /* ============================================================ CTA BAND ============================================================ */ .cta-band { background: linear-gradient(135deg, var(--deep-forest), var(--midnight-grove)); border-top: var(--border-subtle); border-bottom: var(--border-subtle); padding: 7rem 0; text-align: center; position: relative; overflow: hidden; } .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(201,168,76,0.06) 0%, transparent 65%); } .cta-band .container { position: relative; } .cta-band h2 { margin-bottom: 1rem; } .cta-band > .container > p { margin-bottom: 2.75rem; max-width: 500px; margin-left: auto; margin-right: auto; font-size: 0.95rem; } .cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ============================================================ BOOKING CARDS — joyful-choices.html ───────────────────────────────────────────────────────────── Used exclusively on the Joyful Choices booking page. Similar to .service-card but taller with a flex column layout so the "Book Now" button always sticks to the bottom regardless of content length. Each card has a data-category attribute used by the JS filter system. Values: individual | couples | family | support | community. The ::after pseudo-element (gold bottom line) reveals on hover, mirroring the ::before top line on service cards but positioned at the bottom for visual variety. BOOKING LINK: All "Book Now" buttons link to: https://www.AcceleratedJoyWorks.as.me (Acuity Scheduling). Update this URL in joyful-choices.html if the scheduling platform changes. ============================================================ */ .booking-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .booking-card { background: linear-gradient(145deg, var(--emerald-noir) 0%, var(--deep-forest) 55%, var(--midnight-grove) 100%); border: var(--border-subtle); padding: 2.5rem; display: flex; flex-direction: column; gap: 1rem; transition: all var(--transition-base); position: relative; } .booking-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--antique-gold), transparent); opacity: 0; transition: opacity var(--transition-base); } .booking-card:hover { border-color: rgba(201,168,76,0.35); box-shadow: 0 8px 40px rgba(201,168,76,0.08); } .booking-card:hover::after { opacity: 1; } .booking-category { font-family: var(--font-heading); font-size: 0.55rem; letter-spacing: 0.38em; text-transform: uppercase; color: var(--verdant-mist); } .booking-card h4 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: var(--cream-ivory); line-height: 1.2; } .booking-card p { font-size: 0.82rem; line-height: 1.85; flex: 1; } .booking-card .btn { align-self: flex-start; margin-top: 0.5rem; } /* ============================================================ APPROACH STEPS — approach.html ───────────────────────────────────────────────────────────── Numbered step list for the coaching process section. .approach-steps — wrapper flex column .approach-step — two-column grid: [80px number] [content] .step-number — Large semi-transparent number (0.18 opacity gold) for decorative numbering. Not meant to be a primary visual — purely decorative. To add a new step: duplicate an .approach-step div and update the number and content. The last child automatically loses its bottom border via :last-child selector. ============================================================ */ .approach-steps { display: flex; flex-direction: column; } .approach-step { display: grid; grid-template-columns: 80px 1fr; gap: 2rem; align-items: start; padding: 2.5rem 0; border-bottom: var(--border-subtle); } .approach-step:last-child { border-bottom: none; } .step-number { font-family: var(--font-display); font-size: 3.5rem; color: rgba(201,168,76,0.18); line-height: 1; text-align: center; padding-top: 0.2rem; } .step-content h4 { font-family: var(--font-heading); font-size: 0.68rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--antique-gold); margin-bottom: 0.75rem; } .step-content p { font-size: 0.875rem; line-height: 1.85; } @media (max-width: 600px) { .approach-step { grid-template-columns: 50px 1fr; gap: 1rem; } .step-number { font-size: 2.5rem; } } /* ============================================================ COACHING IS — coaching.html ───────────────────────────────────────────────────────────── Checklist-style list for the "Coaching Is..." section. .coaching-check — Gold border square with a ✦ symbol inside. Pure CSS — no icon fonts required. .coaching-item — Flexbox row: [check icon] [text block] Border animates to stronger gold on hover. To add a new item: duplicate a .coaching-item div and update the h5 title and p description. ============================================================ */ .coaching-list { display: flex; flex-direction: column; gap: 1rem; } .coaching-item { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.5rem 1.75rem; border: var(--border-subtle); transition: border-color var(--transition-fast), background var(--transition-fast); } .coaching-item:hover { border-color: rgba(201,168,76,0.3); background: linear-gradient(145deg, rgba(44,95,71,0.7) 0%, rgba(27,58,45,0.5) 100%); } .coaching-check { width: 20px; height: 20px; border: 1px solid var(--antique-gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .coaching-check::after { content: '✦'; font-size: 0.55rem; color: var(--antique-gold); } .coaching-item-text h5 { font-family: var(--font-heading); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne); margin-bottom: 0.4rem; } .coaching-item-text p { font-size: 0.82rem; line-height: 1.8; } /* ============================================================ ABOUT PAGE — about.html ───────────────────────────────────────────────────────────── ASSET: images/Tiffany.jpeg object-position: top center — ensures Tiffany's face is always visible regardless of the crop height. .about-photo::after — gradient overlay at the bottom of the image to fade it into the page background for a seamless feel. .about-photo-caption — positioned inside the ::after gradient zone; uses z-index: 3 to sit above the gradient layer. .values-grid — 3-column grid on desktop, 1-column mobile. Reused from values cards on index.html. ============================================================ */ .about-photo { position: relative; overflow: hidden; } .about-photo img { width: 100%; height: 680px; object-fit: cover; object-position: top center; display: block; } .about-photo-caption { position: absolute; bottom: 2rem; left: 2rem; z-index: 2; } .about-photo::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 45%; background: linear-gradient(to top, rgba(13,33,24,0.9), transparent); } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .value-card { padding: 2.25rem; border: var(--border-subtle); background: linear-gradient(145deg, var(--emerald-noir) 0%, var(--deep-forest) 55%, var(--midnight-grove) 100%); text-align: center; } .value-card .value-icon { font-family: var(--font-display); font-size: 2.5rem; color: var(--antique-gold); margin-bottom: 1rem; } .value-card h4 { font-family: var(--font-heading); font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--champagne); margin-bottom: 0.75rem; } .value-card p { font-size: 0.82rem; line-height: 1.8; } @media (max-width: 768px) { .values-grid { grid-template-columns: 1fr; } } /* ============================================================ JOYCIRCLE PAGE — joycircle.html ───────────────────────────────────────────────────────────── ASSETS: Background image : images/WSJCJoyBackgroung.png (note: typo in original filename) Logo image : images/WSJC Joy.png Video : images/joycircle.webm .joycircle-hero — Full-screen hero (85vh) using the WSJC background image at 0.25 opacity layered beneath a dark overlay gradient. .joycircle-logo — The WSJC program logo displayed above the hero headline. Max-width 300px. .joycircle-hero-overlay — Separate overlay div (not a pseudo-element) for cleaner z-index stacking with the content. The nav on this page is NOT pre-scrolled (.scrolled is not applied statically) because the full-screen hero needs the transparent nav state initially, just like index.html. ============================================================ */ .joycircle-hero { position: relative; min-height: 85vh; display: flex; align-items: center; overflow: hidden; } .joycircle-hero-bg { position: absolute; inset: 0; } .joycircle-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.25; } .joycircle-hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,26,19,0.9) 0%, rgba(13,33,24,0.6) 100%); } .joycircle-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-16); padding-top: 7rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .joycircle-hero-logo { display: flex; align-items: center; justify-content: center; } .joycircle-hero-content { text-align: left; } .joycircle-logo { max-width: 480px; display: block; margin: 0 auto; } .joycircle-hero h1 { margin: 0.75rem 0 1.5rem; } .joycircle-hero p { font-size: 1.05rem; line-height: 1.85; margin-bottom: 2.5rem; max-width: 580px; margin-left: auto; } /* ============================================================ UTILITY EXTRAS ───────────────────────────────────────────────────────────── .img-cover — Full-width image at 480px height with cover fit. For standalone image blocks. .img-cover-tall — Same but 600px height. .prose — Wrapper for multi-paragraph long-form text. Adds bottom margin between

    tags and slightly larger font size. .mt-* / .mb-* — Margin-top/bottom utility classes using spacing scale tokens. .w-full — width: 100% helper. ============================================================ */ .img-cover { width: 100%; height: 480px; object-fit: cover; display: block; } .img-cover-tall { height: 600px; } .prose p { font-size: 0.92rem; line-height: 1.9; margin-bottom: 1.25rem; color: var(--parchment); } .prose p:last-child { margin-bottom: 0; } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-12 { margin-top: var(--space-12); } .mt-16 { margin-top: var(--space-16); } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mb-12 { margin-bottom: var(--space-12); } .mb-16 { margin-bottom: var(--space-16); } .w-full { width: 100%; } /* ============================================================ ═════════════════════════════════════════════════════════════ WORDPRESS BLOG — THEME-SPECIFIC ADDITIONS ═════════════════════════════════════════════════════════════ Everything above this banner is imported verbatim from the main AcceleratedJoyWorks.com stylesheet so the blog shares the exact same tokens, type scale, nav, footer, cards, and animations. Everything below adds the pieces WordPress needs that the static HTML site did not: post layout, archive loops, pagination, sidebar & widgets, comments, Gutenberg/editor alignments, and accessibility helpers. ============================================================ */ /* ── WP-required accessibility helper ───────────────────── */ .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: var(--deep-forest); clip: auto; -webkit-clip-path: none; clip-path: none; color: var(--antique-gold); display: block; font-size: 0.875rem; font-weight: 600; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } .skip-link { position: absolute; left: -9999px; top: 0; } .skip-link:focus { left: 6px; top: 6px; z-index: 100001; } /* ============================================================ BLOG POST GRID / ARCHIVE LOOP ──────────────────────────────────────────────────────────── Reuses the .booking-card visual (gold bottom reveal, gradient forest fill) so blog cards feel native to the site. ============================================================ */ .post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; } .post-card { background: linear-gradient(145deg, var(--emerald-noir) 0%, var(--deep-forest) 55%, var(--midnight-grove) 100%); border: var(--border-subtle); display: flex; flex-direction: column; transition: all var(--transition-base); position: relative; overflow: hidden; } .post-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--antique-gold), transparent); opacity: 0; transition: opacity var(--transition-base); } .post-card:hover { border-color: rgba(201,168,76,0.35); box-shadow: 0 8px 40px rgba(201,168,76,0.08); transform: translateY(-4px); } .post-card:hover::after { opacity: 1; } .post-card-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--midnight-grove); } .post-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow), opacity var(--transition-base); opacity: 0.9; } .post-card:hover .post-card-thumb img { transform: scale(1.04); opacity: 1; } .post-card-body { padding: 2rem 2rem 2.25rem; display: flex; flex-direction: column; gap: 0.85rem; flex: 1; } .post-card-meta { font-family: var(--font-heading); font-size: 0.55rem; letter-spacing: 0.38em; text-transform: uppercase; color: var(--verdant-mist); display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; } .post-card-meta a { color: var(--verdant-mist); transition: color var(--transition-fast); } .post-card-meta a:hover { color: var(--antique-gold); } .post-card-meta .sep { opacity: 0.5; color: var(--antique-gold); } .post-card h2, .post-card h3 { font-family: var(--font-display); font-size: 1.55rem; font-weight: 400; color: var(--cream-ivory); line-height: 1.2; margin: 0; } .post-card h2 a, .post-card h3 a { color: inherit; transition: color var(--transition-fast); } .post-card h2 a:hover, .post-card h3 a:hover { color: var(--antique-gold); } .post-card-excerpt { font-size: 0.82rem; line-height: 1.85; color: var(--parchment); flex: 1; } .post-card-more { margin-top: 0.75rem; align-self: flex-start; font-family: var(--font-heading); font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--antique-gold); border-bottom: 1px solid rgba(201,168,76,0.4); padding-bottom: 2px; transition: all var(--transition-fast); } .post-card-more:hover { color: var(--champagne); border-color: var(--champagne); letter-spacing: 0.35em; } /* ============================================================ BLOG LAYOUT — content + sidebar ============================================================ */ .blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 4rem; align-items: start; } @media (max-width: 960px) { .blog-layout { grid-template-columns: 1fr; gap: 3rem; } .blog-sidebar { order: 2; } } /* ============================================================ SINGLE POST — article body ──────────────────────────────────────────────────────────── .post-article wraps a single post's title, meta, featured image, and body. The body uses the same gradient surface as cards so long-form content floats above the smoke bg. ============================================================ */ .post-article { background: linear-gradient(145deg, var(--emerald-noir) 0%, var(--deep-forest) 45%, var(--midnight-grove) 100%); border: var(--border-subtle); padding: clamp(2rem, 5vw, 4rem); } .post-article-header { text-align: center; max-width: 680px; margin: 0 auto var(--space-12); padding-bottom: var(--space-8); border-bottom: var(--border-subtle); } .post-article-header .eyebrow { margin-bottom: 1rem; display: block; } .post-article-header h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.15; margin-bottom: 1.25rem; color: var(--cream-ivory); } .post-article-meta { font-family: var(--font-heading); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--parchment); opacity: 0.75; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .post-article-meta a { color: var(--antique-gold); } .post-article-meta .sep { color: var(--antique-gold); opacity: 0.5; } .post-featured-image { margin: 0 auto var(--space-12); position: relative; } .post-featured-image img { width: 100%; height: auto; display: block; } .post-featured-image::after { content: ''; position: absolute; inset: -0.75rem; border: var(--border-subtle); pointer-events: none; z-index: -1; } /* ── Post body / long-form prose ─────────────────────────── */ .post-body { font-family: var(--font-body); font-size: 1rem; line-height: 1.85; color: var(--parchment); max-width: 720px; margin: 0 auto; } .post-body > * + * { margin-top: 1.5rem; } .post-body p { font-size: 1rem; color: var(--parchment); line-height: 1.9; } .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 { font-family: var(--font-display); font-weight: 400; color: var(--cream-ivory); line-height: 1.25; margin-top: 2.75rem; margin-bottom: 1rem; } .post-body h2 { font-size: 2rem; } .post-body h3 { font-size: 1.6rem; } .post-body h4 { font-size: 1.3rem; } .post-body h5 { font-size: 1.1rem; } .post-body h6 { font-family: var(--font-heading); font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--antique-gold); } .post-body a { color: var(--antique-gold); border-bottom: 1px solid rgba(201,168,76,0.35); transition: all var(--transition-fast); } .post-body a:hover { color: var(--champagne); border-color: var(--champagne); } .post-body strong { color: var(--cream-ivory); font-weight: 500; } .post-body em { font-family: var(--font-display); font-style: italic; color: var(--champagne); } .post-body ul, .post-body ol { padding-left: 1.5rem; color: var(--parchment); } .post-body ul { list-style: disc; } .post-body ol { list-style: decimal; } .post-body li { margin-bottom: 0.6rem; line-height: 1.85; } .post-body li::marker { color: var(--antique-gold); } .post-body blockquote { position: relative; padding: 2rem 2rem 2rem 3.5rem; margin: 2.5rem 0; border-left: 2px solid var(--antique-gold); background: rgba(10,26,19,0.35); font-family: var(--font-display); font-size: 1.3rem; font-style: italic; color: var(--cream-ivory); line-height: 1.65; } .post-body blockquote::before { content: '\201C'; position: absolute; top: 0.5rem; left: 0.9rem; font-family: var(--font-display); font-size: 4rem; line-height: 1; color: var(--antique-gold); opacity: 0.3; } .post-body blockquote cite { display: block; margin-top: 1rem; font-family: var(--font-heading); font-style: normal; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--antique-gold); } .post-body code { font-family: 'SFMono-Regular', Consolas, Monaco, monospace; font-size: 0.85em; background: rgba(201,168,76,0.12); color: var(--champagne); padding: 0.15em 0.4em; border-radius: 2px; } .post-body pre { background: var(--midnight-grove); border: var(--border-subtle); border-left: 2px solid var(--antique-gold); padding: 1.5rem; overflow-x: auto; font-size: 0.85rem; line-height: 1.6; } .post-body pre code { background: transparent; color: var(--parchment); padding: 0; } .post-body hr { border: none; height: 1px; background: linear-gradient(to right, transparent, var(--antique-gold), transparent); opacity: 0.35; margin: 3rem 0; } .post-body img, .post-body figure { margin: 2rem auto; max-width: 100%; height: auto; } .post-body figcaption { font-family: var(--font-heading); font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--parchment); opacity: 0.7; text-align: center; margin-top: 0.75rem; } .post-body table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 0.9rem; } .post-body table th, .post-body table td { padding: 0.85rem 1rem; border-bottom: var(--border-subtle); text-align: left; } .post-body table th { font-family: var(--font-heading); font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--antique-gold); } /* ── Post footer: tags + share ───────────────────────────── */ .post-footer { max-width: 720px; margin: var(--space-16) auto 0; padding-top: var(--space-8); border-top: var(--border-subtle); display: flex; flex-direction: column; gap: 1.25rem; } .post-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .post-tags-label { font-family: var(--font-heading); font-size: 0.55rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--antique-gold); margin-right: 0.25rem; } .post-tags a { font-family: var(--font-heading); font-size: 0.58rem; letter-spacing: 0.25em; text-transform: uppercase; padding: 0.35rem 0.85rem; border: 1px solid rgba(201,168,76,0.3); color: var(--parchment); transition: all var(--transition-fast); } .post-tags a:hover { color: var(--antique-gold); border-color: var(--antique-gold); background: rgba(201,168,76,0.08); } /* ── Post navigation (prev / next) ───────────────────────── */ .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: var(--space-16); } @media (max-width: 700px) { .post-nav { grid-template-columns: 1fr; } } .post-nav a { display: block; padding: 1.75rem; background: var(--deep-forest); border: var(--border-subtle); transition: all var(--transition-fast); } .post-nav a:hover { border-color: rgba(201,168,76,0.35); background: var(--emerald-noir); } .post-nav-dir { font-family: var(--font-heading); font-size: 0.55rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--antique-gold); margin-bottom: 0.6rem; display: block; } .post-nav-title { font-family: var(--font-display); font-size: 1.05rem; color: var(--cream-ivory); line-height: 1.4; } .post-nav .next { text-align: right; } /* ============================================================ PAGINATION (numbered + prev/next) ============================================================ */ .pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--space-16); flex-wrap: wrap; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 0.85rem; font-family: var(--font-heading); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--parchment); border: 1px solid rgba(201,168,76,0.2); transition: all var(--transition-fast); } .pagination a.page-numbers:hover { color: var(--antique-gold); border-color: var(--antique-gold); background: rgba(201,168,76,0.06); } .pagination .page-numbers.current { color: var(--smoke); background: var(--antique-gold); border-color: var(--antique-gold); } .pagination .page-numbers.dots { border-color: transparent; opacity: 0.5; } /* ============================================================ SIDEBAR & WIDGETS ============================================================ */ .blog-sidebar { display: flex; flex-direction: column; gap: 2rem; position: sticky; top: 6rem; } .widget { background: var(--deep-forest); border: var(--border-subtle); padding: 1.75rem 1.85rem; } .widget-title, .widget h2, .widget h3 { font-family: var(--font-heading); font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--antique-gold); margin: 0 0 1.25rem; padding-bottom: 0.85rem; border-bottom: var(--border-subtle); } .widget ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .widget ul li { font-size: 0.82rem; } .widget ul a { color: var(--parchment); transition: color var(--transition-fast); border-bottom: 1px solid transparent; padding-bottom: 1px; } .widget ul a:hover { color: var(--antique-gold); border-color: rgba(201,168,76,0.4); } .widget p { font-size: 0.82rem; line-height: 1.8; } .widget select { width: 100%; padding: 0.7rem 0.85rem; background: var(--midnight-grove); border: 1px solid rgba(201,168,76,0.25); color: var(--parchment); font-family: var(--font-body); font-size: 0.85rem; } /* Search widget + form */ .search-form { display: flex; gap: 0; border: 1px solid rgba(201,168,76,0.25); transition: border-color var(--transition-fast); } .search-form:focus-within { border-color: var(--antique-gold); } .search-form input[type="search"] { flex: 1; background: transparent; border: none; padding: 0.75rem 0.95rem; color: var(--cream-ivory); font-family: var(--font-body); font-size: 0.85rem; } .search-form input[type="search"]:focus { outline: none; } .search-form input[type="search"]::placeholder { color: var(--parchment); opacity: 0.6; } .search-form button, .search-form input[type="submit"] { background: var(--antique-gold); color: var(--smoke); border: none; padding: 0 1.25rem; font-family: var(--font-heading); font-size: 0.55rem; letter-spacing: 0.25em; text-transform: uppercase; cursor: pointer; transition: background var(--transition-fast); } .search-form button:hover, .search-form input[type="submit"]:hover { background: var(--champagne); } /* ============================================================ COMMENTS ============================================================ */ .comments-area { max-width: 720px; margin: var(--space-16) auto 0; padding-top: var(--space-12); border-top: var(--border-subtle); } .comments-title { font-family: var(--font-display); font-size: 1.75rem; color: var(--cream-ivory); margin-bottom: var(--space-8); text-align: center; } .comment-list { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; } .comment-list ol.children { list-style: none; margin-top: 1.5rem; padding-left: 2rem; border-left: 1px solid rgba(201,168,76,0.2); display: flex; flex-direction: column; gap: 1.5rem; } .comment-body { background: var(--deep-forest); border: var(--border-subtle); padding: 1.5rem 1.75rem; } .comment-author { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.85rem; } .comment-author .avatar { border-radius: 50%; border: 1px solid rgba(201,168,76,0.35); } .comment-author .fn { font-family: var(--font-heading); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne); font-style: normal; } .comment-metadata { font-size: 0.7rem; color: var(--parchment); opacity: 0.7; margin-top: 0.2rem; } .comment-metadata a { color: inherit; } .comment-content { font-size: 0.88rem; line-height: 1.8; color: var(--parchment); } .comment-content p { font-size: inherit; } .reply { margin-top: 0.85rem; } .reply .comment-reply-link { font-family: var(--font-heading); font-size: 0.55rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--antique-gold); border-bottom: 1px solid rgba(201,168,76,0.35); padding-bottom: 2px; } .reply .comment-reply-link:hover { color: var(--champagne); border-color: var(--champagne); } /* Comment form */ .comment-respond { margin-top: var(--space-12); padding: 2rem; background: var(--deep-forest); border: var(--border-subtle); border-left: 2px solid var(--antique-gold); } .comment-reply-title { font-family: var(--font-display); font-size: 1.4rem; color: var(--cream-ivory); margin-bottom: 0.4rem; } .comment-notes, .logged-in-as { font-size: 0.8rem; color: var(--parchment); opacity: 0.75; margin-bottom: 1.5rem; } .comment-form p { margin-bottom: 1rem; } .comment-form label { display: block; font-family: var(--font-heading); font-size: 0.55rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--antique-gold); margin-bottom: 0.5rem; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; background: var(--midnight-grove); border: 1px solid rgba(201,168,76,0.25); padding: 0.85rem 1rem; color: var(--cream-ivory); font-family: var(--font-body); font-size: 0.9rem; transition: border-color var(--transition-fast); } .comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--antique-gold); } .comment-form textarea { resize: vertical; min-height: 140px; } .form-submit .submit { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 0.25em; text-transform: uppercase; padding: 0.85rem 2rem; border: none; background: var(--antique-gold); color: var(--smoke); cursor: pointer; transition: background var(--transition-base), transform var(--transition-fast); } .form-submit .submit:hover { background: var(--champagne); transform: translateY(-1px); } /* ============================================================ WP CORE ALIGNMENT / CAPTION / GALLERY ============================================================ */ .alignleft { float: left; margin: 0.5rem 1.5rem 1rem 0; } .alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; } .aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; } .alignwide { margin-left: -4rem; margin-right: -4rem; max-width: calc(100% + 8rem); } .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; } @media (max-width: 900px) { .alignwide { margin-left: 0; margin-right: 0; max-width: 100%; } } .wp-caption-text, .gallery-caption { font-family: var(--font-heading); font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--parchment); opacity: 0.75; text-align: center; margin-top: 0.75rem; } .sticky .post-card { border-color: rgba(201,168,76,0.45); } .sticky .post-card::before { content: 'Featured'; position: absolute; top: 1rem; right: 1rem; font-family: var(--font-heading); font-size: 0.5rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--antique-gold); background: rgba(10,26,19,0.85); padding: 0.35rem 0.75rem; border: 1px solid rgba(201,168,76,0.45); z-index: 2; } .bypostauthor { /* stylistic marker hook */ } /* ============================================================ PAGE (static) — content wrapper ============================================================ */ .page-article { background: linear-gradient(145deg, var(--emerald-noir) 0%, var(--deep-forest) 50%, var(--midnight-grove) 100%); border: var(--border-subtle); padding: clamp(2rem, 5vw, 4rem); } /* ============================================================ EMPTY / NO-RESULTS / 404 ============================================================ */ .no-results { text-align: center; padding: var(--space-16) 0; max-width: 620px; margin: 0 auto; } .no-results h2, .error-404 h1 { font-family: var(--font-display); font-size: 2.25rem; color: var(--cream-ivory); margin-bottom: 1rem; } .no-results p, .error-404 p { color: var(--parchment); line-height: 1.8; margin-bottom: 1.75rem; } /* ============================================================ RESPONSIVE — tighten container padding + hero on mobile (extends the main stylesheet where needed for blog context) ============================================================ */ @media (max-width: 768px) { .container { padding: 0 var(--space-6); } .section { padding: var(--space-16) 0; } .post-article { padding: 1.75rem 1.25rem; } .post-card-body { padding: 1.5rem 1.5rem 1.75rem; } }