/* ========================================================= Single Post (blog) - warm modern magazine layer ----------------------------------------------------------- This file overrides the cool, gray "CEO Blog" treatment in style.css with a warm cream + gold palette that matches the rest of the HosPall brand language. It is enqueued only on `is_single()` from functions.php and loads AFTER `hospall_main_styles`, so its single-class selectors override the equivalent rules in style.css by cascade order (no specificity arms race, no !important required). Design intent: - Warm ivory background everywhere. No dark navy hero slab, no gray content frame. - Brand blue reserved for headings and the few moments it should signal authority. Gold (the theme's secondary palette) does the heavy lifting on accents. - Body type breathes: larger size, generous line-height, warmer ink color, tighter measure. - One stylish flourish per element, not five. ========================================================= */ .single-post-page { /* Local design tokens. Pulled from the theme palette so the blog page reads as native, kept local so we can tune it without touching global styles. */ --blog-surface: #faf6ed; /* warm ivory, page bg */ --blog-surface-soft: #f3ecd8; /* sand, used inside cards */ --blog-card: #fffdf6; /* very pale cream, used for chips and pills */ --blog-ink: #2b2620; /* warm dark brown-gray, body text */ --blog-muted: #6b6052; /* warm muted, meta + secondary */ --blog-rule: rgba(110, 95, 70, 0.18); --blog-brand: var(--color-brand, #255487); --blog-brand-dark: #173d68; --blog-gold: var(--color-accent, #8a7a4e); --blog-gold-light: var(--color-accent-light, #c9b27a); --blog-gold-deep: var(--color-accent-dark, #5a4a22); /* Magazine-style display face. Fraunces is a variable serif with an optical-size axis, so the title can render at display weight while subheadings stay readable. Loaded ONLY on single posts so the rest of the site keeps the existing accessible sans. */ --blog-display: "Fraunces", "Source Serif 4", "Source Serif Pro", "Georgia", "Times New Roman", serif; /* Warm cream surface + an inline SVG fractal-noise tile that gives the page subtle "paper tooth" without an external asset. The texture lives on the static element background, so it does NOT slide with the aurora animation - otherwise the paper would feel like it was moving, which breaks the illusion. */ background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.30 0 0 0 0 0.24 0 0 0 0 0.16 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.24'/%3E%3C/svg%3E"), #faf6ed; background-size: 240px 240px, auto; background-repeat: repeat, no-repeat; background-attachment: fixed, scroll; /* Establish a stacking context for the aurora background. The fixed-position ::before below sits behind page content; child sections (hero, article, comments) all stack above it. */ position: relative; isolation: isolate; } /* ---------- AMBIENT BACKGROUND --------------------------- */ /* Deep navy rails on the left and right edges of the viewport. They are taller than the viewport (130vh) so the falloff never shows during scroll, and dark enough (0.82 alpha over near-black navy) that the cream centre column reads as a brightly lit page between two shadowed margins - a vignette that pulls the eye to the text. Gold accents at the top and bottom tie the rails back to the HosPall palette. */ .single-post-page::before { content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none; background: /* Left side navy rail */ radial-gradient(40vw 130vh at -8% 50%, rgba(5, 15, 36, 0.82), transparent 55%), /* Right side navy rail */ radial-gradient(40vw 130vh at 108% 50%, rgba(5, 15, 36, 0.82), transparent 55%), /* Top gold cap */ radial-gradient(80vw 24vh at 50% -3%, rgba(201, 178, 122, 0.55), transparent 62%), /* Bottom deep-gold cap */ radial-gradient(80vw 24vh at 50% 103%, rgba(138, 122, 78, 0.55), transparent 62%); will-change: transform; transform: translate3d(0, 0, 0); } /* Slow, easing drift. Only animates when the user has not asked to reduce motion. Browsers without `prefers-reduced-motion` support will animate (graceful default). */ @media (prefers-reduced-motion: no-preference) { .single-post-page::before { animation: blog-aurora-drift 48s ease-in-out infinite alternate; } } @keyframes blog-aurora-drift { 0% { transform: translate3d(0%, 0%, 0) scale(1); } 50% { transform: translate3d(0%, -2.5%, 0) scale(1.05); } 100% { transform: translate3d(0%, 3%, 0) scale(1.08); } } /* ---------- READING PROGRESS BAR ------------------------- */ /* A 4px gold ribbon fixed to the top of the viewport that fills left-to-right as the reader scrolls. Driven by a small inline script in single.php that updates `--blog-scroll` on the `.single-post-page` element, so the bar works in every browser without depending on the newer scroll-driven CSS spec. z-index sits ABOVE the WordPress admin bar (99999) so logged-in editors can still see it. */ .single-post-page::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px; transform-origin: 0 50%; transform: scaleX(var(--blog-scroll, 0)); background: linear-gradient(90deg, #e9d49a 0%, #c9b276 35%, #8a7a4e 70%, #5a4a22 100%); box-shadow: 0 1px 6px rgba(138, 122, 78, 0.45); z-index: 100000; pointer-events: none; transition: transform 0.06s linear; } /* ---------- HERO ----------------------------------------- */ /* The hero is visually distinct from the article body. A deep brand-blue gradient is the default, but it can be replaced by an image (or a video poster) by setting the inline custom property `--hero-bg-image` on the .single-post-hero element:
For a full