/* =========================== Wonderfully Made Style — Theme Jewel-tone fabric background + typography =========================== */ /* Brand palette */ :root{ --peacock-teal:#0f766e; --sapphire:#1d4ed8; --amethyst:#7c3aed; --gold:#f59e0b; /* Fabric controls */ --fabric-opacity:0.85; /* overall intensity of the gradient layer */ --weave-opacity:0.08; /* cross-hatch strength */ --noise-opacity:0.05; /* tiny speckle amount */ --gold-opacity:0.06; /* subtle gold flecks */ } /* Base typography */ body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans"; } .font-serif{ font-family:"Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } a{ color: var(--sapphire); } a:hover{ color: var(--amethyst); } /* Prose niceties */ .prose img{ border-radius:1rem; } .prose h1,.prose h2,.prose h3{ color:var(--peacock-teal); } /* ========================================== Jewel Fabric Background Usage: add class="jewel-fabric" on ========================================== */ .jewel-fabric{ background: transparent; position: relative; min-height: 100%; } .jewel-fabric::before{ /* Layer 1: jewel gradient “cloth” */ content:""; position: fixed; inset:0; z-index:-3; background: radial-gradient(1400px 800px at 85% -10%, rgba(124,58,237,0.35), transparent 60%), radial-gradient(1200px 700px at -10% 110%, rgba(13,148,136,0.35), transparent 60%), linear-gradient(135deg, rgba(15,118,110,var(--fabric-opacity)) 0%, rgba(29,78,216,var(--fabric-opacity)) 55%, rgba(124,58,237,var(--fabric-opacity)) 100% ); filter: saturate(105%) contrast(105%); } /* Layer 2: woven cross-hatch (very light) */ .jewel-fabric::after{ content:""; position: fixed; inset:0; z-index:-2; background: /* diagonal threads */ repeating-linear-gradient(145deg, rgba(255,255,255,var(--weave-opacity)) 0px, rgba(255,255,255,var(--weave-opacity)) 1px, transparent 3px, transparent 6px ), /* counter-diagonal threads */ repeating-linear-gradient(35deg, rgba(0,0,0,calc(var(--weave-opacity) * 0.65)) 0px, rgba(0,0,0,calc(var(--weave-opacity) * 0.65)) 1px, transparent 3px, transparent 6px ), /* tiny gold flecks */ radial-gradient(2px 2px at 20% 30%, rgba(245,158,11,var(--gold-opacity)) 0, transparent 60%), radial-gradient(1.5px 1.5px at 70% 65%, rgba(245,158,11,var(--gold-opacity)) 0, transparent 60%), radial-gradient(1.5px 1.5px at 40% 80%, rgba(245,158,11,var(--gold-opacity)) 0, transparent 60%), /* micro-noise dither */ repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,var(--noise-opacity)) 0 0.5px, transparent 0.5px 1px ); mix-blend-mode: overlay; pointer-events:none; } /* Card polish so content sits on fabric nicely */ .card{ background: rgba(255,255,255,0.92); backdrop-filter: blur(2px); border:1px solid rgba(0,0,0,0.06); border-radius: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,0.06); } /* Header stays readable over fabric */ .site-header{ background: rgba(255,255,255,0.88); backdrop-filter: blur(8px); border-bottom:1px solid rgba(0,0,0,0.08); } /* Optional: jewel accent for small logo circle if you want to tweak */ .logo-dot{ fill: var(--gold); } /* =========================== Peacock feather corner ornament =========================== */ :root{ --feather-opacity: 0.32; /* overall visibility */ --feather-size: min(38vw, 520px); --feather-offset: clamp(8px, 3vw, 24px); } .feather-ornament{ position: fixed; right: var(--feather-offset); bottom: var(--feather-offset); width: var(--feather-size); height: calc(var(--feather-size) * 1.6); background: url('/img/peacock-feather.svg') no-repeat bottom right / contain; opacity: var(--feather-opacity); filter: drop-shadow(0 10px 24px rgba(0,0,0,0.18)); pointer-events: none; /* never blocks clicks */ z-index: -1; /* above bg layers, below content */ } /* smaller screens: tuck it away a bit */ @media (max-width: 768px){ :root{ --feather-size: min(54vw, 360px); } } /* accessibility adjustments */ @media (prefers-contrast: more){ :root{ --feather-opacity: 0.22; } } @media print{ .feather-ornament{ display: none; } } /* ========================================== Blog Post Title Styling ========================================== */ .post-header{ text-align: center; margin-bottom: 2rem; padding-top: 1.5rem; } .post-header h1{ font-family: "Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); color: var(--gold); text-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 0 12px rgba(15,118,110,0.35); /* peacock teal glow */ margin-bottom: 0.75rem; } .post-header .meta{ font-family: Inter, system-ui, sans-serif; font-size: 1rem; color: rgba(255,255,255,0.88); font-weight: 500; letter-spacing: 0.3px; text-shadow: 0 1px 2px rgba(0,0,0,0.4); } .post-header .meta a{ color: var(--amethyst); font-weight: 600; } .post-header .meta a:hover{ color: var(--sapphire); text-decoration: underline; } /* =========================== Watercolor Peacock Background =========================== */ :root{ --wc-peacock-opacity: 0.23; /* overall visibility */ --wc-peacock-size: min(1200px, 85vw); /* scales with viewport */ --wc-peacock-x: clamp(8px, 4vw, 40px); /* right offset */ --wc-peacock-y: clamp(8px, 6vh, 60px); /* bottom offset */ } /* =========================== Watercolor Peacock Background (now under jewel-fabric) =========================== */ :root { --wc-peacock-opacity: 0.25; --wc-peacock-size: min(1200px, 85vw); --wc-peacock-x: clamp(8px, 4vw, 40px); --wc-peacock-y: clamp(8px, 6vh, 60px); } /* Base image sits beneath the jewel-fabric layers */ .peacock-watercolor-bg { position: fixed; inset: 0; z-index: -4; /* 👈 push it further back than fabric (-3/-2) */ pointer-events: none; background: radial-gradient(1400px 900px at 55% 35%, rgba(255,255,255,0.3), transparent 70%), url('/img/peacock-watercolor.jpg') no-repeat right bottom; background-size: auto var(--wc-peacock-size); background-position: calc(100% - var(--wc-peacock-x)) calc(100% - var(--wc-peacock-y)); opacity: var(--wc-peacock-opacity); mix-blend-mode: normal; /* let jewel-fabric’s overlay shine through */ filter: brightness(1.05) contrast(1.1) saturate(1.1); } /* Widen on large screens */ @media (min-width: 1400px) { :root { --wc-peacock-size: min(1400px, 90vw); } } /* Dim or hide on smaller screens */ @media (max-width: 900px) { :root { --wc-peacock-opacity: 0.18; } } @media (max-width: 640px) { .peacock-watercolor-bg { display: none; } } /* Put all interactive content above decorative backgrounds */ .site-shell{ position: relative; z-index: 1; /* content layer */ } /* Fabric layers stay at the very back */ .jewel-fabric::before{ z-index: -3; } /* gradient cloth */ .jewel-fabric::after{ z-index: -2; } /* weave/noise */ /* Watercolor sits ABOVE fabric but BELOW content */ .peacock-watercolor-bg{ position: fixed; inset: 0; z-index: 0; /* <-- the important bit */ pointer-events: none; background: radial-gradient(1400px 900px at 55% 35%, rgba(255,255,255,0.30), transparent 70%), url('/img/peacock-watercolor.jpg') no-repeat right bottom; background-size: auto var(--wc-peacock-size, min(1200px, 85vw)); background-position: calc(100% - var(--wc-peacock-x, clamp(8px, 4vw, 40px))) calc(100% - var(--wc-peacock-y, clamp(8px, 6vh, 60px))); opacity: var(--wc-peacock-opacity, 0.25); mix-blend-mode: normal; filter: brightness(1.05) contrast(1.1) saturate(1.1); }