/* ===========================================================================
Luxembourg Ville — runtime stylesheet.
Extracted from app.js's injectCSS(). Loaded synchronously via in every page's , so the browser paints styled
content on first paint — no FOUC.
=========================================================================== */
/* ---------------------------------------------------------------------------
Themes — CSS custom properties.
:root defaults to "casemates"; [data-skin="kirchberg"] overrides.
--------------------------------------------------------------------------- */
:root,
[data-skin="casemates"] {
--lv-bg: #f3ede0;
--lv-surface: #fffaf0;
--lv-ink: #1d1d1f;
--lv-ink-soft: #5b5b60;
--lv-rule: #e7decb;
--lv-accent: #ed1c24;
--lv-accent-2: #00a4e4;
--lv-link: #00457c;
--lv-quote-bg: #f6f3ea;
--lv-quote-bar: #00a4e4;
--lv-shadow: 0 2px 12px rgba(0,0,0,.06);
--lv-shadow-strong:0 4px 14px rgba(0,0,0,.08);
--lv-radius: 14px;
--lv-nav-grad: linear-gradient(135deg, #f7f0df 0, #eef6fb 36%, #e9d9b0 100%);
--lv-nav-grad-rtl: linear-gradient(225deg, #f7f0df 0, #eef6fb 36%, #e9d9b0 100%);
--lv-chip-bg: rgba(255,255,255,.85);
--lv-comment-bg: #fdf6e8;
--lv-comment-rule: #ead8a6;
--lv-persona: #8a4f00;
--lv-fiction-bg: #fde6cf;
--lv-fiction-ink: #7a3e00;
}
[data-skin="kirchberg"] {
--lv-bg: #0d1117;
--lv-surface: #161c25;
--lv-ink: #e6edf3;
--lv-ink-soft: #9aa4b2;
--lv-rule: #2a3340;
--lv-accent: #ff4d57;
--lv-accent-2: #48c8ff;
--lv-link: #8bd4ff;
--lv-quote-bg: #1b2230;
--lv-quote-bar: #48c8ff;
--lv-shadow: 0 2px 16px rgba(0,0,0,.4);
--lv-shadow-strong:0 6px 24px rgba(0,0,0,.5);
--lv-radius: 14px;
--lv-nav-grad: linear-gradient(135deg, #232c3c 0, #161c25 45%, #2b4258 100%);
--lv-nav-grad-rtl: linear-gradient(225deg, #232c3c 0, #161c25 45%, #2b4258 100%);
--lv-chip-bg: rgba(22,28,37,.78);
--lv-comment-bg: #131a24;
--lv-comment-rule: #1f2a3a;
--lv-persona: #48c8ff;
--lv-fiction-bg: #2a1f0f;
--lv-fiction-ink: #ffce8a;
}
/* ---------------------------------------------------------------------------
Page baseline
--------------------------------------------------------------------------- */
html, body { margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--lv-bg);
color: var(--lv-ink);
line-height: 1.6;
transition: background .25s ease, color .25s ease;
-webkit-font-smoothing: antialiased;
}
/* ---------------------------------------------------------------------------
Skip-link (keyboard accessibility)
--------------------------------------------------------------------------- */
.lv-skip {
position: absolute; inset-inline-start: 1rem; top: -100px;
background: var(--lv-accent); color: #fff;
padding: .5rem 1rem; border-radius: 4px;
text-decoration: none; font-weight: 600;
}
.lv-skip:focus { top: .5rem; z-index: 1000; }
/* ---------------------------------------------------------------------------
Top bar (injected by app.js)
--------------------------------------------------------------------------- */
.lv-topbar {
position: relative; isolation: isolate;
display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
background: var(--lv-nav-grad);
padding: .95rem 1rem .9rem;
border-radius: var(--lv-radius);
margin: 1rem 1.25rem .5rem;
box-shadow: var(--lv-shadow-strong);
overflow: hidden;
border: 1px solid rgba(29,42,61,.08);
}
[dir="rtl"] .lv-topbar { background: var(--lv-nav-grad-rtl); }
.lv-topbar-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lv-topbar-art svg { display: block; width: 100%; height: 100%; }
.lv-brand {
display: inline-flex; align-items: center; gap: .55rem;
font-weight: 800; letter-spacing: .5px;
color: var(--lv-ink);
background: rgba(255,255,255,.72);
padding: .35rem .8rem .35rem .45rem;
border-radius: 999px;
margin-inline-end: auto;
text-decoration: none;
border: 1px solid rgba(29,42,61,.08);
backdrop-filter: blur(4px);
position: relative; z-index: 1;
}
.lv-flag {
width: 42px; height: 24px; border-radius: 999px;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(0,0,0,.06);
overflow: hidden;
}
.lv-nav-link {
color: var(--lv-ink); text-decoration: none; font-weight: 600;
padding: .3rem .65rem; border-radius: 8px;
background: var(--lv-chip-bg);
transition: transform .15s ease;
position: relative; z-index: 1;
}
.lv-nav-link:hover { transform: translateY(-1px); }
.lv-nav-link[aria-current="page"] { background: var(--lv-ink); color: var(--lv-bg); }
/* ---------------------------------------------------------------------------
Controls row (language chips + theme toggle)
--------------------------------------------------------------------------- */
.lv-controls {
display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
margin: 0 1.25rem 1rem;
}
.lv-langs { display: flex; gap: .35rem; flex-wrap: wrap; flex: 1; }
.lv-lang-chip {
font-size: .8rem; font-weight: 600; text-decoration: none;
padding: .2rem .55rem; border-radius: 999px;
background: var(--lv-surface); color: var(--lv-ink-soft);
border: 1px solid var(--lv-rule);
}
.lv-lang-chip[aria-current="true"] {
background: var(--lv-ink); color: var(--lv-bg);
border-color: var(--lv-ink);
}
.lv-theme-toggle {
font-size: .8rem; font-weight: 600;
background: var(--lv-surface); color: var(--lv-ink);
border: 1px solid var(--lv-rule);
padding: .25rem .65rem; border-radius: 999px;
cursor: pointer; font-family: inherit;
}
.lv-theme-toggle:hover { border-color: var(--lv-accent-2); }
/* ---------------------------------------------------------------------------
Tagline (lang-home only)
--------------------------------------------------------------------------- */
.lv-tagline {
color: var(--lv-ink-soft); font-size: .92rem;
margin: 0 1.5rem 1rem; font-style: italic;
}
/* ---------------------------------------------------------------------------
Main shell
--------------------------------------------------------------------------- */
main.lv-shell { max-width: 760px; margin: 0 auto; padding: 0 1.25rem 3rem; }
/* ---------------------------------------------------------------------------
Article card
--------------------------------------------------------------------------- */
.lv-article {
background: var(--lv-surface);
padding: 2rem 2.25rem;
border-radius: var(--lv-radius);
box-shadow: var(--lv-shadow);
margin-bottom: 1.5rem;
}
.lv-article-head { margin-bottom: 1.25rem; }
.lv-kicker {
color: var(--lv-ink-soft); font-size: .78rem;
text-transform: uppercase; letter-spacing: 1px;
margin: 0 0 .5rem; font-weight: 600;
}
.lv-kicker .lv-fiction-chip {
display: inline-block; font-size: .7rem;
background: var(--lv-fiction-bg); color: var(--lv-fiction-ink);
padding: .05rem .4rem; border-radius: 3px;
margin-inline-start: .3rem; letter-spacing: .5px;
}
.lv-article h1 {
margin: 0 0 .5rem;
color: var(--lv-accent); font-size: 2rem;
line-height: 1.2; letter-spacing: -.01em;
}
.lv-byline {
color: var(--lv-ink-soft); font-size: .95rem;
margin: 0; font-style: italic;
}
.lv-byline .lv-persona-name {
font-weight: 600; color: var(--lv-ink); font-style: normal;
}
/* ---------------------------------------------------------------------------
Hero image
--------------------------------------------------------------------------- */
.lv-hero { margin: 1rem 0 1.5rem; }
.lv-hero img {
max-width: 100%; height: auto;
border-radius: 8px; display: block; margin: 0 auto;
}
.lv-article img[alt*="banner" i] { width: 100%; }
/* ---------------------------------------------------------------------------
Article body
--------------------------------------------------------------------------- */
.lv-body h2 {
color: var(--lv-link);
border-bottom: 2px solid var(--lv-rule);
padding-bottom: .25rem; margin-top: 2rem; font-size: 1.35rem;
}
.lv-body h3 { color: var(--lv-link); margin-top: 1.5rem; font-size: 1.1rem; }
.lv-body a { color: var(--lv-link); }
.lv-body ul, .lv-body ol { padding-inline-start: 1.25rem; }
.lv-body li { margin: .25rem 0; }
.lv-body blockquote {
border-inline-start: 4px solid var(--lv-quote-bar);
margin: 1.25rem 0; padding: .5rem 1rem;
background: var(--lv-quote-bg);
color: var(--lv-ink-soft);
border-start-end-radius: 8px; border-end-end-radius: 8px;
font-style: italic;
}
.lv-body code {
background: var(--lv-quote-bg);
padding: .1rem .35rem; border-radius: 4px;
font-size: .92em;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.lv-body p { margin: .75rem 0; }
/* ---------------------------------------------------------------------------
Related links
--------------------------------------------------------------------------- */
.lv-related {
margin-top: 2rem; padding-top: 1rem;
border-top: 1px solid var(--lv-rule);
}
.lv-related h2 {
font-size: .85rem; color: var(--lv-ink-soft);
text-transform: uppercase; letter-spacing: 1px;
margin: 0 0 .5rem; border: none; padding: 0;
}
.lv-related ul { list-style: none; padding: 0; margin: 0; }
.lv-related li { margin: .35rem 0; }
.lv-related a { color: var(--lv-link); }
/* ---------------------------------------------------------------------------
"Latest" section on language home pages
--------------------------------------------------------------------------- */
.lv-latest {
background: var(--lv-surface);
padding: 1.5rem 2.25rem;
border-radius: var(--lv-radius);
box-shadow: var(--lv-shadow);
margin-bottom: 1.5rem;
}
.lv-latest > h2 {
margin: 0 0 1rem; color: var(--lv-link);
font-size: .85rem; letter-spacing: 1.2px; text-transform: uppercase;
border: none; padding: 0;
}
.lv-latest-item { margin: 0 0 .75rem; }
.lv-latest-item h3 { margin: 0 0 .25rem; font-size: 1.15rem; line-height: 1.3; }
.lv-latest-item h3 a { color: var(--lv-accent); text-decoration: none; }
.lv-latest-item h3 a:hover { text-decoration: underline; }
.lv-latest-item p { margin: 0; color: var(--lv-ink); }
.lv-latest-item .lv-byline { font-size: .85rem; }
.lv-latest-more {
margin: .75rem 0 0; font-size: .9rem;
color: var(--lv-ink-soft);
}
.lv-latest-more a { color: var(--lv-link); }
/* ---------------------------------------------------------------------------
Comments section
--------------------------------------------------------------------------- */
.lv-comments {
background: var(--lv-comment-bg);
padding: 1.5rem 1.75rem;
border-radius: var(--lv-radius);
box-shadow: var(--lv-shadow);
margin-bottom: 1.5rem;
}
.lv-comments-head { margin-bottom: 1rem; }
.lv-comments-head h2 {
margin: 0 0 .25rem; color: var(--lv-link);
font-size: .85rem; letter-spacing: 1.2px; text-transform: uppercase;
}
.lv-comments-note {
color: var(--lv-ink-soft); font-size: .8rem;
font-style: italic; margin: 0;
}
.lv-comment { margin: 1.1rem 0; }
.lv-comment-head {
font-size: .92rem; font-weight: 700;
color: var(--lv-persona);
margin-bottom: .2rem; line-height: 1.4;
}
.lv-comment-head .lv-comment-quartier { color: var(--lv-ink-soft); font-weight: 500; }
.lv-comment-head time { color: var(--lv-ink-soft); font-weight: 500; }
.lv-comment-head .lv-reply-to {
color: var(--lv-ink-soft); font-weight: 500; font-size: .85rem;
}
.lv-comment-head .lv-reply-to a { color: var(--lv-ink-soft); text-decoration: none; }
.lv-comment-head .lv-reply-to a:hover { text-decoration: underline; }
.lv-comment p { margin: .15rem 0 .5rem; color: var(--lv-ink); }
/* Reply nesting — pre-enhancement fallback (single indent for any reply) */
.lv-comment.lv-reply {
margin-inline-start: 1.5rem;
padding-inline-start: .85rem;
border-inline-start: 2px solid var(--lv-comment-rule);
}
/* Reply nesting — depth-specific indent applied after threadComments() */
body.lv-enhanced .lv-comment[data-depth="0"] {
margin-inline-start: 0; padding-inline-start: 0; border-inline-start: none;
}
body.lv-enhanced .lv-comment[data-depth="1"] {
margin-inline-start: 1.5rem;
padding-inline-start: .85rem;
border-inline-start: 2px solid var(--lv-comment-rule);
}
body.lv-enhanced .lv-comment[data-depth="2"] {
margin-inline-start: 3rem;
padding-inline-start: .85rem;
border-inline-start: 2px solid var(--lv-comment-rule);
}
body.lv-enhanced .lv-comment[data-depth="3"] {
margin-inline-start: 4.5rem;
padding-inline-start: .85rem;
border-inline-start: 2px solid var(--lv-comment-rule);
}
body.lv-enhanced .lv-comment[data-depth="4"] {
margin-inline-start: 6rem;
padding-inline-start: .85rem;
border-inline-start: 2px solid var(--lv-comment-rule);
}
/* Thread break between comment clusters */
.lv-thread-break {
border: none; border-top: 1px solid var(--lv-comment-rule);
margin: .6rem 0;
}
/* ---------------------------------------------------------------------------
Footer
--------------------------------------------------------------------------- */
.lv-footer {
text-align: center; color: var(--lv-ink-soft);
margin: 1.75rem 0 0; font-size: .82rem;
padding: 0 1.5rem; max-width: 760px;
margin-inline: auto;
}
/* ---------------------------------------------------------------------------
Pre-JS / no-JS baseline — keep unstyled HTML readable
--------------------------------------------------------------------------- */
body:not(.lv-enhanced) main.lv-shell { padding-top: 1.5rem; }
/* ---------------------------------------------------------------------------
Icon sprites — use via
Sprite atlas: /assets/core/sprites.svg
Strokes/fills use currentColor so icons pick up the surrounding text colour.
--------------------------------------------------------------------------- */
.lv-icon {
width: 1em; height: 1em;
display: inline-block; vertical-align: -.15em;
fill: none; stroke: currentColor;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.lv-icon--solid { fill: currentColor; stroke: none; }
.lv-icon--lg { width: 1.4em; height: 1.4em; }
.lv-icon--xl { width: 2em; height: 2em; }