/* ========================================================================= fallenzen.com — modern stylesheet Space theme, fully responsive. No frameworks, no jQuery, no Cufón. ========================================================================= */ /* ---- Fonts -------------------------------------------------------------- */ /* Proxima Nova OTFs ship in /Proxima_Nova. OTF works in all modern browsers; converting these to WOFF2 later would cut their weight by ~60%. */ @font-face { font-family: "Proxima Nova"; src: url("../../Proxima_Nova/Proxima%20Nova%20Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova"; src: url("../../Proxima_Nova/Proxima%20Nova%20Reg.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova"; src: url("../../Proxima_Nova/Proxima%20Nova%20Sbold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova"; src: url("../../Proxima_Nova/Proxima%20Nova%20Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova"; src: url("../../Proxima_Nova/Proxima%20Nova%20Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } /* ---- Design tokens ------------------------------------------------------ */ :root { --font-sans: "Proxima Nova", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Space palette */ --bg-space: #05070d; --bg-deep: #02030a; --ink: #d7dde2; --ink-dim: #97a3ad; --ink-faint: #6c7884; /* Accents — warm sun + cool nebula, carried over from the original skin */ --gold: #ec9921; --gold-bright: #ffbc1c; --ember: #d97626; --cyan: #7ebac8; --cyan-glow: #68dffd; --link: #6fb6c8; /* Surfaces */ --panel-bg: rgba(10, 16, 26, 0.62); --panel-border: rgba(126, 186, 200, 0.16); --card-line: rgba(126, 186, 200, 0.14); --maxw: 1080px; --radius: 16px; --shadow-panel: 0 30px 80px rgba(0, 0, 0, 0.65); } /* ---- Reset / base ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--font-sans); font-weight: 400; font-size: clamp(15px, 0.9rem + 0.2vw, 17px); line-height: 1.6; color: var(--ink); /* Tiled stars scroll with the page and fill the whole document height — the texture between the top nebula and the bottom clouds. */ background-color: var(--bg-deep); background-image: url("../../images/stars_repeat.png"); background-repeat: repeat; background-position: top center; position: relative; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--link); text-decoration: none; } a:hover, a:focus-visible { color: var(--cyan-glow); text-decoration: underline; } :focus-visible { outline: 2px solid var(--cyan-glow); outline-offset: 3px; border-radius: 4px; } h1, h2, h3 { line-height: 1.15; margin: 0; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 1000; background: var(--gold); color: #1a1205; padding: 0.6rem 1rem; border-radius: 0 0 8px 0; font-weight: 700; } .skip-link:focus { left: 0; } /* ---- Space backdrop ----------------------------------------------------- */ /* The nebula is pinned to the TOP of the document and scrolls away as you move down, handing off to the tiled stars on . It is NOT fixed. */ .space { position: absolute; top: 0; left: 0; right: 0; height: min(1200px, 130vh); z-index: -1; overflow: hidden; pointer-events: none; background: url("../../images/stars_top.jpg") no-repeat top center; background-size: 100% auto; } .parallax { position: absolute; inset: 0; } .parallax__layer { position: absolute; background-repeat: no-repeat; will-change: transform; /* --py is the scroll offset set by main.js; base transform stays intact. */ transform: translate3d(0, var(--py, 0px), 0); } #planet1 { width: min(520px, 55vw); aspect-ratio: 569 / 590; background-image: url("../../images/planet1.png"); background-size: contain; top: 8%; left: -20%; } #planet2 { width: min(380px, 40vw); aspect-ratio: 433 / 446; background-image: url("../../images/planet2.png"); background-size: contain; top: 52%; right: -12%; } /* ---- Page shell --------------------------------------------------------- */ .page { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; padding-block: clamp(1.5rem, 4vw, 3rem); } /* ---- Masthead / nav ----------------------------------------------------- */ .masthead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: clamp(1.5rem, 4vw, 2.75rem); } /* Brand is the positioning context for the sun that lights its baked-in flare. */ .masthead__brand { position: relative; z-index: 0; } .masthead__brand img { position: relative; z-index: 1; width: clamp(220px, 26vw, 327px); filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.6)); } /* The sun sits behind the logo — its core aligned to the logo's centre — so it reads as the light source for the flare, in any layout the brand lands in. */ .brand__sun { position: absolute; z-index: -1; left: 50%; top: 50%; width: min(620px, 78vw); aspect-ratio: 1025 / 1287; background: url("../../images/sun.png") no-repeat center / contain; /* centre the sun artwork on the sign so the glow sits right behind it */ transform: translate(-50%, -50%); opacity: 0.9; pointer-events: none; } .nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; list-style: none; } .nav a { display: block; padding: 0.5rem 1rem; border-radius: 10px; color: var(--ink-dim); font-weight: 600; line-height: 1.2; transition: background-color 0.18s ease, color 0.18s ease; } .nav a span { display: block; font-size: 0.72rem; font-weight: 400; color: var(--ink-faint); white-space: nowrap; } .nav a:hover, .nav a:focus-visible { color: #fff; text-decoration: none; background: rgba(126, 186, 200, 0.1); } .nav a[aria-current="page"] { color: var(--gold-bright); background: rgba(236, 153, 33, 0.12); } .nav a[aria-current="page"] span { color: var(--ember); } /* ---- Content panel (glass) --------------------------------------------- */ .panel { position: relative; z-index: 1; /* sits above the masthead sun so its lower glow tucks behind */ display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(1.5rem, 3.5vw, 3rem); background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: var(--shadow-panel); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); } /* ---- Posts -------------------------------------------------------------- */ .post { margin: 0 0 clamp(2rem, 4vw, 3rem); } .post:last-child { margin-bottom: 0; } .post + .post { padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--card-line); } .post__title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 700; color: var(--gold); text-wrap: balance; } .post--featured .post__title { background: linear-gradient(90deg, var(--ember), var(--gold-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Title links to the post permalink but keeps the title colour, not link blue. */ .post__title a { color: inherit; text-decoration: none; } .post__title a:hover, .post__title a:focus-visible { color: inherit; text-decoration: underline; } .post__back { margin: 0 0 1.25rem; font-size: 0.85rem; font-weight: 600; } .draft-notice { margin: 0 0 1.5rem; padding: 0.6rem 0.9rem; border-radius: 10px; border: 1px solid rgba(236, 153, 33, 0.35); background: rgba(236, 153, 33, 0.1); color: var(--gold-bright); font-size: 0.85rem; font-weight: 600; } /* "NEW" ribbon for posts published within the last week (set server-side). */ .post--new .post__title::before { content: ""; display: inline-block; width: 51px; height: 27px; margin-right: 0.55rem; vertical-align: middle; background: url("../../images/new.png") no-repeat left center; background-size: contain; } .post__meta { margin: 0.35rem 0 1rem; font-size: 0.8rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; } .post p { margin: 0 0 1rem; font-weight: 300; } .post a { text-decoration: underline; } .post__figure { margin: 1.5rem 0; } .post__figure img { width: 100%; border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); } .post__figure figcaption { margin-top: 0.6rem; font-size: 0.82rem; font-weight: 300; color: var(--ink-faint); text-align: center; } .gallery { margin: 1.5rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; padding: 0.75rem; border-radius: 12px; background: rgba(3, 16, 18, 0.6); box-shadow: inset 0 0 30px rgba(3, 16, 18, 0.9); border: 1px solid rgba(126, 186, 200, 0.12); } .gallery img { width: 100%; border-radius: 8px; transition: transform 0.2s ease; } .gallery img:hover { transform: scale(1.03); } /* Responsive video embeds (YouTube etc.): wrap an