/* Neverlull – Joomla site template. Colours, fonts, radius and page width live in the template parameters and are printed as custom properties into the by index.php, so this file never hard-codes a brand value. Everything below is the same design as the static neverlull.com, plus the chrome Joomla itself renders (menus, system messages, article typography, pagination). Dark-only, like the game. */ * { box-sizing: border-box; } html { background: var(--ground); scroll-behavior: smooth; scroll-padding-top: 64px; } body { margin: 0; background: var(--ground); color: var(--cream); font-family: var(--body); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; /* Editors paste long URLs and compound nouns; neither may widen the page. */ overflow-wrap: break-word; } img, svg { max-width: 100%; } a { color: var(--orange); } a:hover { color: #FFB84D; } :focus-visible { outline: 2px solid var(--crystal); outline-offset: 3px; border-radius: 4px; } .wrap { width: 100%; max-width: var(--page, 1120px); margin-inline: auto; padding-inline: var(--gutter); } h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0; text-wrap: balance; } h2 { font-size: clamp(34px, 5vw, 52px); letter-spacing: 0.01em; } h3 { font-size: 26px; letter-spacing: 0.02em; } p { margin: 0; } .eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); } .lede { color: var(--muted); max-width: 60ch; } /* ---------- Header ---------- */ .site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(18, 18, 18, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cream); } .brand svg { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; } .brand span { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 0.08em; } .nav { display: flex; gap: 24px; } .nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 16px; } .nav a:hover { color: var(--cream); } /* ---------- Hero ---------- */ .hero { background: var(--band); border-bottom: 1px solid var(--line); } .hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: clamp(32px, 6vw, 72px); padding-block: clamp(48px, 9vw, 104px); } .hero-copy { display: flex; flex-direction: column; gap: 22px; } .wordmark { font-family: var(--display); font-weight: 700; font-size: clamp(44px, 7.2vw, 88px); letter-spacing: 0.08em; line-height: 0.95; color: var(--cream); } .hero h1 { font-family: var(--body); font-weight: 500; font-size: clamp(24px, 3vw, 32px); line-height: 1.25; color: var(--cream); max-width: 24ch; } .hero .lede { font-size: 19px; } .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: var(--radius); font-family: var(--body); font-size: 17px; font-weight: 700; text-decoration: none; transition: transform 0.15s ease, background-color 0.15s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--orange); color: #1A1206; } .btn-primary:hover { background: #FFAD33; color: #1A1206; } .btn-ghost { background: transparent; color: var(--cream); border: 1.5px solid #3A3F48; } .btn-ghost:hover { border-color: var(--cream); color: var(--cream); } .btn svg { width: 20px; height: 20px; flex-shrink: 0; } .soon { font-size: 15px; color: var(--caption); } .hero-mark { justify-self: center; width: min(100%, 400px); aspect-ratio: 1; border-radius: 22%; background: #1B1F25; box-shadow: 0 0 0 1px #262B33, 0 30px 80px -30px rgba(255, 153, 0, 0.35); } .hero-mark svg { width: 100%; height: 100%; display: block; } /* The ring is a circular progress bar: the crystal orbits and the orange trails behind it up to its position. Static pose is the logo (75 %). */ .ring-fill { stroke-dasharray: 100; stroke-dashoffset: 25; } .ring-crystal { transform-origin: 50px 50px; } /* ---------- Sections ---------- */ section { padding-block: clamp(64px, 9vw, 112px); } section + section { border-top: 1px solid var(--line); } .section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); } /* How it works */ .loop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; } .steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; } .steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; } .step-no { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--orange); color: var(--orange); font-family: var(--display); font-size: 22px; font-weight: 700; } .steps h3 { margin-bottom: 6px; } .steps p { color: var(--muted); } .summary { background: var(--panel); border-radius: var(--radius); border: 1px solid #2A2A2A; padding: 24px; display: flex; flex-direction: column; gap: 18px; } .summary-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .summary-title { font-family: var(--display); font-size: 28px; font-weight: 700; } .tag { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--caption); border: 1px solid #3A3A3A; border-radius: 999px; padding: 2px 10px; } .summary-away { color: var(--muted); font-size: 16px; } .summary-block { display: flex; flex-direction: column; gap: 8px; } .summary-block h4 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); } .row { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; padding-block: 6px; border-bottom: 1px solid #2A2A2A; } .row:last-child { border-bottom: 0; } .row span:first-child { color: var(--muted); } .row span:last-child { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; } .up { color: var(--crystal); } .bar { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; } .bar i { display: block; height: 100%; width: var(--w, 72%); background: var(--orange); border-radius: inherit; } /* Skills */ .skill-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .skill-group { background: var(--panel); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 16px; } .skill-group p { color: var(--caption); font-size: 16px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .chips li { font-size: 16px; font-weight: 500; padding: 6px 14px; border-radius: 999px; background: #262626; color: var(--cream); } .levels { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 32px; color: var(--muted); font-size: 17px; } .levels strong { color: var(--cream); font-family: var(--display); font-size: 24px; margin-right: 6px; } /* Combat */ .combat { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 5vw, 64px); } .areas { list-style: none; margin: 0; padding: 0; counter-reset: area; } .areas li { counter-increment: area; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--line); font-size: 19px; } .areas li::before { content: counter(area); font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--caption); text-align: right; font-variant-numeric: tabular-nums; } .areas li:first-child::before { color: var(--crystal); } .areas li:last-child { border-bottom: 0; } .areas li:last-child::before { color: var(--legendary); } .loot { display: flex; flex-direction: column; gap: 20px; } .loot > p { color: var(--muted); } .rarities { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; } .rarities li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--panel); border-radius: var(--radius); font-weight: 700; font-size: 18px; } .gem { width: 14px; height: 14px; transform: rotate(45deg); border-radius: 2px; flex-shrink: 0; } .r-common { color: var(--common); } .r-common .gem { background: var(--common); } .r-rare { color: var(--rare); } .r-rare .gem { background: var(--rare); } .r-legendary { color: var(--legendary); } .r-legendary .gem { background: var(--legendary); } .slots { color: var(--caption); font-size: 16px; } /* More features */ .features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; } .feature { display: flex; flex-direction: column; gap: 10px; } .feature svg { width: 32px; height: 32px; color: var(--orange); } .feature p { color: var(--muted); font-size: 17px; } /* Closing CTA */ .closing { background: var(--band); text-align: left; } .closing .wrap { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } /* Footer */ .site-footer { border-top: 1px solid var(--line); padding-block: 32px; } .site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; color: var(--caption); font-size: 15px; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; } .site-footer a { color: var(--muted); text-decoration: none; } .site-footer a:hover { color: var(--cream); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .skill-groups, .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skill-groups .skill-group:last-child { grid-column: 1 / -1; } } @media (max-width: 760px) { .nav { display: none; } .hero .wrap, .loop, .combat { grid-template-columns: minmax(0, 1fr); } .hero-mark { order: -1; width: min(64%, 260px); justify-self: start; } /* NEVERLULL is one long word; 13vw overflowed a 390px phone, so the wordmark is sized to the gutter-less width it actually has. */ .wordmark { font-size: clamp(32px, 9.4vw, 88px); } .skill-groups, .features { grid-template-columns: minmax(0, 1fr); } .skill-groups .skill-group:last-child { grid-column: auto; } } @media (max-width: 420px) { body { font-size: 17px; } .btn { width: 100%; justify-content: center; } .summary { padding: 18px; } } /* ---------- Motion ---------- */ /* Header gains depth once the page scrolls. */ .site-header { transition: box-shadow 0.3s ease, background-color 0.3s ease; } .site-header.scrolled { background: rgba(18, 18, 18, 0.96); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9); } .brand svg { transition: transform 0.6s cubic-bezier(0.3, 0.1, 0.2, 1); } .brand:hover svg { transform: rotate(-90deg); } .nav a { position: relative; } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--orange); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .nav a:hover::after, .nav a.active::after { transform: scaleX(1); } .nav a.active { color: var(--cream); } /* Hero: embers, staggered copy, living logo. */ .hero { position: relative; overflow: hidden; } .hero .wrap { position: relative; z-index: 1; } .embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .hero-copy > * { animation: rise-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .hero-copy > :nth-child(1) { animation-delay: 0.05s; } .hero-copy > :nth-child(2) { animation-delay: 0.15s; } .hero-copy > :nth-child(3) { animation-delay: 0.3s; } .hero-copy > :nth-child(4) { animation-delay: 0.45s; } .hero-copy > :nth-child(5) { animation-delay: 0.6s; } .hero-copy > :nth-child(6) { animation-delay: 0.75s; } @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .wordmark { background: linear-gradient(100deg, var(--cream) 0%, var(--cream) 40%, #FFC266 50%, var(--cream) 60%, var(--cream) 100%); background-size: 250% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: rise-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both, sheen 6s ease-in-out 1.2s infinite; } @keyframes sheen { 0% { background-position: 100% 0; } 35%, 100% { background-position: 0% 0; } } .hero-mark { animation: mark-in 1s cubic-bezier(0.2, 0.7, 0.2, 1) both, float 7s ease-in-out 1s infinite, glow 7s ease-in-out 2.4s infinite; } .hero-mark svg { transform: perspective(700px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 0.4s ease-out; } @keyframes mark-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } } @keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } @keyframes glow { 0%, 100% { box-shadow: 0 0 0 1px #262B33, 0 30px 80px -30px rgba(255, 153, 0, 0.35); } 50% { box-shadow: 0 0 0 1px #3A2F20, 0 30px 90px -24px rgba(255, 153, 0, 0.55); } } /* Loop that rests on the logo pose (75 %): push on to 100 %, flash like a level-up, drain, then fill back to the logo spot. Both animations share duration and keyframe timing so the crystal stays on the tip. The negative delay starts the first run with the refill from empty. */ .ring-fill { animation: ring-lap 8s -5.28s infinite; } .ring-crystal { animation: crystal-lap 8s -5.28s infinite; } @keyframes ring-lap { 0%, 40% { stroke-dashoffset: 25; opacity: 1; filter: none; animation-timing-function: cubic-bezier(0.5, 0, 1, 1); } 51% { stroke-dashoffset: 0; opacity: 1; filter: none; } 55% { stroke-dashoffset: 0; opacity: 1; filter: drop-shadow(0 0 4px #FF9900); } 58% { stroke-dashoffset: 0; opacity: 1; filter: none; } 66% { stroke-dashoffset: 0; opacity: 0; } 66.01% { stroke-dashoffset: 100; opacity: 1; animation-timing-function: cubic-bezier(0.2, 0, 0.3, 1); } 100% { stroke-dashoffset: 25; opacity: 1; filter: none; } } @keyframes crystal-lap { 0%, 40% { transform: rotate(0deg) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 1, 1); } 51% { transform: rotate(90deg) scale(1); } 55% { transform: rotate(90deg) scale(1.35); } 58%, 66% { transform: rotate(90deg) scale(1); } 66.01% { transform: rotate(-270deg) scale(1); animation-timing-function: cubic-bezier(0.2, 0, 0.3, 1); } 100% { transform: rotate(0deg) scale(1); } } /* Buttons: a light sweep on hover, a slow pulse on the closing CTA. */ .btn { position: relative; overflow: hidden; isolation: isolate; } .btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.6s ease; } .btn-primary:hover::after { transform: translateX(120%); } .closing .btn-primary { animation: cta-pulse 2.8s ease-in-out infinite; } @keyframes cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.45); } 60% { box-shadow: 0 0 0 14px rgba(255, 153, 0, 0); } } /* Scroll reveals. Only hidden when JS runs, so the page never stays blank. */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0s); } .js .reveal.from-left { transform: translateX(-24px); } .js .reveal.is-in { opacity: 1; transform: none; } /* How it works */ .step-no { position: relative; transition: background-color 0.4s ease, color 0.4s ease; } .step-no::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; } .steps li.is-in .step-no::after { animation: ping 1.2s ease-out calc(var(--d, 0s) + 0.3s); } .steps li:hover .step-no { background: var(--orange); color: #1A1206; } @keyframes ping { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(1.8); } } .summary { transition: border-color 0.3s ease; } .summary:hover { border-color: #3A3F48; } .js .bar i { width: 0; transition: width 1.6s cubic-bezier(0.3, 0.1, 0.2, 1) 0.5s; } .js .summary.is-in .bar i { width: var(--w, 72%); } .bar i { position: relative; overflow: hidden; } .bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: bar-shine 2.6s ease-in-out 2.2s infinite; transform: translateX(-100%); } @keyframes bar-shine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } } .up.bump { animation: bump 0.5s ease; display: inline-block; } @keyframes bump { 50% { transform: scale(1.25); text-shadow: 0 0 12px rgba(111, 227, 255, 0.7); } } /* Skills */ .skill-group { border: 1px solid transparent; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .skill-group:hover { transform: translateY(-4px); border-color: rgba(255, 153, 0, 0.35); box-shadow: 0 20px 40px -24px rgba(255, 153, 0, 0.4); } .chips li { transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .chips li:hover { background: var(--orange); color: #1A1206; transform: translateY(-2px); } .js .chips li { opacity: 0; transform: scale(0.8); } .js .skill-group.is-in .chips li { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1), background-color 0.2s ease, color 0.2s ease; transition-delay: calc(var(--d, 0s) + 0.25s + var(--i, 0) * 60ms), calc(var(--d, 0s) + 0.25s + var(--i, 0) * 60ms), 0s, 0s; } .js .skill-group.is-in .chips li:hover { transform: translateY(-2px); transition-delay: 0s; } /* Combat */ .areas li { transition: padding-left 0.25s ease, color 0.25s ease; } .areas li::before { transition: color 0.25s ease; } .areas li:hover { padding-left: 8px; color: var(--orange); } .areas li:hover::before { color: var(--orange); } .rarities li { position: relative; overflow: hidden; transition: transform 0.25s ease; } .rarities li:hover { transform: translateX(6px); } .rarities li:hover .gem { transform: rotate(225deg); } .gem { transition: transform 0.5s ease; } .r-rare .gem { animation: gem-glow-rare 3s ease-in-out infinite; } .r-legendary .gem { animation: gem-glow-legendary 2.2s ease-in-out infinite; } @keyframes gem-glow-rare { 50% { box-shadow: 0 0 10px 1px rgba(74, 158, 255, 0.7); } } @keyframes gem-glow-legendary { 50% { box-shadow: 0 0 14px 3px rgba(255, 140, 26, 0.8); } } .r-legendary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 140, 26, 0.18) 50%, transparent 65%); transform: translateX(-100%); animation: legendary-sweep 3.5s ease-in-out 1s infinite; } @keyframes legendary-sweep { 0% { transform: translateX(-100%); } 50%, 100% { transform: translateX(100%); } } /* Features: icons draw themselves in. */ .js .feature svg * { stroke-dasharray: 1; stroke-dashoffset: 1; } .js .feature.is-in svg * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(0.3, 0.1, 0.2, 1) calc(var(--d, 0s) + 0.2s); } .feature svg { transition: transform 0.3s ease; } .feature:hover svg { transform: translateY(-3px) rotate(-6deg); } /* While the hero is fully off-screen its animations are cleared, so they play again from the start when it scrolls back in. */ .hero.is-out .hero-copy > *, .hero.is-out .hero-mark, .hero.is-out .ring-fill, .hero.is-out .ring-crystal { animation: none; } .hero.is-out .hero-copy > *, .hero.is-out .hero-mark { opacity: 0; } /* Reduced motion: keep fades, glows, counters and the ring lap, but drop anything that travels across the screen (embers, float, tilt, slides). */ @media (prefers-reduced-motion: reduce) { @keyframes rise-in { from { opacity: 0; } to { opacity: 1; } } @keyframes mark-in { from { opacity: 0; } to { opacity: 1; } } .hero-mark { animation: mark-in 1s ease both, glow 7s ease-in-out 2.4s infinite; } .embers { display: none; } .js .reveal, .js .reveal.from-left, .js .chips li { transform: none; } .btn:hover, .skill-group:hover, .rarities li:hover, .chips li:hover, .js .skill-group.is-in .chips li:hover, .feature:hover svg, .brand:hover svg { transform: none; } .areas li:hover { padding-left: 0; } .hero-mark svg { transform: none; } } /* ================================================================== Legal and long-form pages (Impressum, Datenschutz, blog posts). The same typography as the static datenschutz.html, but scoped to .prose so it never fights the landing-page headings above. ================================================================== */ .page-legal main { padding-block: clamp(40px, 7vw, 80px); } .prose { max-width: 72ch; } .prose h1 { font-size: clamp(40px, 7vw, 64px); margin-top: 10px; line-height: 1.1; } .prose h2 { font-size: clamp(28px, 4vw, 36px); margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); line-height: 1.1; } .prose h3 { font-size: 24px; margin-top: 32px; color: var(--cream); letter-spacing: 0.01em; } .prose p, .prose ul, .prose ol, .prose dl { margin: 14px 0 0; } .prose ul, .prose ol { padding-left: 1.2em; } .prose li + li { margin-top: 6px; } .prose .lede { color: var(--muted); margin-top: 16px; } .prose .meta { color: var(--caption); font-size: 15px; margin-top: 12px; } .prose strong { font-weight: 700; } .toc { margin-top: 36px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; } .toc ol { margin: 10px 0 0; padding-left: 1.3em; columns: 2 16em; column-gap: 32px; } .toc li { break-inside: avoid; } .toc a { color: var(--muted); text-decoration: none; } .toc a:hover { color: var(--cream); } /*
– a label/value table that collapses on phones. */ .facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; font-size: 16px; margin-top: 14px; } .facts dt { color: var(--caption); } .facts dd { margin: 0; } @media (max-width: 560px) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: 8px; } } /* Tables are wrapped in .table-scroll by the plugin, so wide tables scroll instead of widening the page. */ .table-scroll { overflow-x: auto; margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); } .table-scroll table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 16px; margin: 0; } .table-scroll th, .table-scroll td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); } .table-scroll th { font-weight: 700; color: var(--caption); background: var(--panel); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; } .table-scroll tr:last-child td { border-bottom: 0; } /*

– an aside in the crystal colour. */ .note { margin-top: 18px; border-left: 3px solid var(--crystal); padding: 4px 0 4px 16px; color: var(--muted); } /* – a placeholder still to be filled in before going live. */ .todo { background: rgba(255, 153, 0, 0.14); outline: 1px dashed var(--orange); border-radius: 4px; padding: 0 4px; color: #FFB84D; } .back { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 16px; } .back:hover { color: var(--cream); } .site-footer a[aria-current] { color: var(--cream); } /* ================================================================== Joomla chrome ================================================================== */ /* Menu modules rendered into the header. The overrides in html/mod_menu output bare elements, so active states match the static site. */ .nav a.active, .nav .current > a { color: var(--cream); } .nav ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; } /* Language switcher (mod_languages, "Use dropdown" off). */ .lang-switch { display: flex; align-items: center; gap: 10px; } .lang-switch ul { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; } .lang-switch a { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: border-color 0.2s ease, color 0.2s ease; } .lang-switch a:hover { color: var(--cream); border-color: var(--cream); } .lang-switch .lang-active > a, .lang-switch a[aria-current] { color: #1A1206; background: var(--orange); border-color: var(--orange); } .lang-switch img { display: none; } /* Burger menu: below 760px the inline nav is hidden, so the same menu is offered behind a toggle. Pure CSS target of a checkbox, no extra JS. */ .nav-toggle { display: none; } .nav-toggle-label { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; place-items: center; color: var(--cream); } .nav-toggle-label:hover { border-color: var(--cream); } .nav-toggle-label svg { width: 22px; height: 22px; } @media (max-width: 760px) { .nav-toggle-label { display: grid; } .nav-drawer { display: none; border-top: 1px solid var(--line); background: var(--band); } .nav-toggle:checked ~ .nav-drawer { display: block; } .nav-drawer .wrap { display: flex; flex-direction: column; gap: 4px; padding-block: 12px; } .nav-drawer a, .nav-drawer ul { display: block; } .nav-drawer ul { list-style: none; margin: 0; padding: 0; } .nav-drawer a { display: block; padding: 12px 0; color: var(--muted); text-decoration: none; font-size: 18px; font-weight: 500; border-bottom: 1px solid var(--line); } .nav-drawer li:last-child a { border-bottom: 0; } .nav-drawer a:hover, .nav-drawer .current > a { color: var(--cream); } } @media (min-width: 761px) { .nav-drawer { display: none; } } /* System messages (jdoc:include type="message"). */ .system-messages { padding-block: 16px; } .system-messages .alert { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 12px; color: var(--cream); } .system-messages .alert-success { border-left-color: var(--crystal); } .system-messages .alert-danger, .system-messages .alert-error { border-left-color: var(--legendary); } .system-messages .alert-heading { font-family: var(--display); font-size: 20px; margin: 0 0 4px; } .system-messages .alert button, .system-messages .joomla-alert-close { background: none; border: 0; color: var(--caption); cursor: pointer; font-size: 18px; } /* Generic component output that is not one of our own sections – article lists, search results, contact forms. Enough to stay readable and on brand. An article built from plugin sections brings its own vertical rhythm, so the wrapper padding is dropped for those. */ .com-content-article, .com-content-category-blog, .com-finder, .com-contact { padding-block: clamp(40px, 7vw, 80px); } .com-content-article:has(.nl-section), .com-content-article__body:has(> .nl-section) { padding-block: 0; } .page-header h1, .page-header h2 { margin-bottom: 8px; } .article-info { color: var(--caption); font-size: 15px; margin-top: 8px; } .article-info dd { display: inline; margin: 0 12px 0 0; } .pagination { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 32px 0 0; padding: 0; } .pagination a, .pagination span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; background: var(--panel); color: var(--muted); text-decoration: none; } .pagination .active span { background: var(--orange); color: #1A1206; font-weight: 700; } blockquote { margin: 18px 0 0; border-left: 3px solid var(--orange); padding-left: 16px; color: var(--muted); } hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; } pre { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; overflow-x: auto; } /* Form controls, so Joomla's own forms (contact, login, search) stay dark. */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], textarea, select { width: 100%; min-height: 44px; padding: 10px 14px; background: var(--panel); color: var(--cream); border: 1px solid var(--line); border-radius: 10px; font-family: var(--body); font-size: 17px; } textarea { min-height: 140px; } label { display: inline-block; color: var(--caption); font-size: 15px; margin-bottom: 6px; } button, .btn-joomla, input[type="submit"] { min-height: 48px; padding: 12px 22px; border: 0; border-radius: var(--radius); background: var(--orange); color: #1A1206; font-family: var(--body); font-size: 17px; font-weight: 700; cursor: pointer; } /* Skip link for keyboard users. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--orange); color: #1A1206; padding: 12px 18px; border-radius: 0 0 var(--radius) 0; font-weight: 700; } .skip-link:focus { left: 0; color: #1A1206; } /* The offline page centres a single panel. */ .page-offline main { display: grid; place-items: center; min-height: 70vh; } .page-offline .offline-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; max-width: 460px; width: 100%; } /* Long-form sections rendered by the plugin (legal pages, plain prose). */ .section-legal { padding-block: clamp(40px, 7vw, 80px); } /* Optional back-to-top button (template parameter). */ .back-to-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 9; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); color: var(--cream); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; } .back-to-top:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); } .back-to-top svg { width: 22px; height: 22px; } /* The summary card is a

, which the browser indents by default. */ .summary { margin: 0; }