Lumen

Lumen is an unhurried online magazine for Celena CMS. A warm sand canvas instead of flat white, deep-navy text, a single teal accent and small yellow markers that show where a section begins. Nothing shouts; everything moves gently.

• Stories strip: your news rubrics as round covers in gradient rings that lift and tilt on hover — a fast way into any section straight from the top of the page.
• Front page: a lead story card next to three compact ones, a masonry feed on CSS columns that fades in as you scroll, a full-width «Topic of the week» slider with large split cards (autoplay pauses on hover, dots, arrows, swipe), a quote-of-the-day panel and a subscription block on deep navy.
• Article: a narrow reading column, a sticky share rail floating in the left margin with a copy-link button, and a table of contents on the right that JavaScript builds from the H2 headings and highlights as you read. With one heading or none, the layout re-centres itself — no empty column.
• Header that stays compact and shrinks further as you scroll: round logo mark, rubric menu with a yellow underline, an inline search field and a burger drawer on mobile.
• Everything else in the same key: rubric listings as cards with a sticky sidebar, search, static pages, a 404 with a highlighted numeral and a fresh feed, and the visitor account (sign-in, registration, profile, security).
• Buttons are outlines that fill with colour on hover, cards lift, photos zoom slowly, sections fade up via IntersectionObserver — and every animation switches off under prefers-reduced-motion. Focus rings stay visible, controls are labelled for screen readers.
• Responsive at 1200 / 900 / 620 px. Light-only, system sans-serif stack, monochrome inline SVG icons, no web fonts and no external CDN — CSP-friendly out of the box. Storefront templates for the Shop plugin are included.