/* ============================================================ Moonbaerer — Nocturnal Ethereal custom styles ============================================================ */ body { background-color: #18111a; color: #eddeec; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ---- Glassmorphism + glow ---------------------------------- */ .glass-card { background: rgba(37, 29, 39, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(217, 190, 222, 0.1); } .ambient-glow { box-shadow: 0 0 60px 10px rgba(157, 129, 167, 0.12); } .hero-gradient { background: linear-gradient(to bottom, rgba(24,17,26,0.15), rgba(24,17,26,1)); } .hover-lift { transition: transform .3s ease, box-shadow .3s ease; } .hover-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(157,129,167,.15); } /* ---- Reveal-on-scroll -------------------------------------- */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ============================================================ AUTOMATIC PHOTO TONE TREATMENT ------------------------------------------------------------ Any photo placed in a .photo-frame renders dark & ethereal: a fixed 4:5 crop, a colour grade that cools daylight shots, and a plum vignette + glow overlay. Turned on site-wide by the `treat-photos` class on (Admin > Settings). Drop in a normal bright photo and it instantly matches. ============================================================ */ .photo-frame { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0.25rem; background: #130c15; } .photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease, filter .7s ease; } /* The grade — only applied when body.treat-photos is present */ .treat-photos .photo-frame img { filter: brightness(0.82) contrast(1.08) saturate(0.82) sepia(0.10) hue-rotate(255deg); } /* Plum gradient + vignette laid over every treated photo */ .treat-photos .photo-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 0%, rgba(157,129,167,0.18) 0%, rgba(24,17,26,0) 45%), linear-gradient(180deg, rgba(24,17,26,0.10) 0%, rgba(24,17,26,0.0) 35%, rgba(24,17,26,0.55) 100%), radial-gradient(130% 130% at 50% 50%, rgba(0,0,0,0) 55%, rgba(11,7,13,0.65) 100%); mix-blend-mode: multiply; } /* A faint top edge of light, like glass catching the moon */ .treat-photos .photo-frame::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(217,190,222,0.35), transparent); pointer-events: none; } .photo-frame.group-hover\:zoom:hover img, .group:hover .photo-frame img { transform: scale(1.07); } /* ---- Buttons ----------------------------------------------- */ .btn-primary { background: #d9bede; color: #3c2942; padding: 1rem 2.5rem; border-radius: 9999px; font-family: Manrope; font-weight: 700; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .5rem; transition: transform .3s ease, background .3s ease; box-shadow: 0 0 30px rgba(217,190,222,0.2); } .btn-primary:hover { transform: scale(1.04); } .btn-ghost { border: 1px solid rgba(151,142,150,0.5); color: #cec4cc; padding: 1rem 2.5rem; border-radius: 9999px; font-family: Manrope; font-weight: 700; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .5rem; transition: border .3s ease, color .3s ease; } .btn-ghost:hover { border-color: #d9bede; color: #d9bede; } /* ---- Admin tweaks ------------------------------------------ */ .admin-input { width: 100%; background: #211922; border: 1px solid #4b454b; color: #eddeec; padding: .75rem 1rem; border-radius: .375rem; font-family: Manrope; } .admin-input:focus { outline: none; border-color: #d9bede; box-shadow: 0 0 0 3px rgba(217,190,222,0.15); } .admin-label { font-family: Manrope; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #978e96; margin-bottom: .4rem; display: block; }