/* ================================================================ MINMAX — Joomla 5 Template (Editorial Dark) All colors use CSS custom properties so the params + live Tweaks stay in sync. Data attributes on drive variants. ================================================================ */ :root { /* Core palette — dark (default). Light variant overrides below. */ --mm-bg: #0e0d0c; --mm-bg-elev: #17150f; --mm-fg: #f3ece0; --mm-muted: rgba(243, 236, 224, 0.55); --mm-line: rgba(243, 236, 224, 0.12); --mm-accent: #c9a96e; /* overridden inline from templateDetails param */ --mm-maxw: 1440px; --mm-gutter: 56px; --mm-gutter-sm: 24px; --mm-pad-sec: 96px; --mm-radius: 2px; --mm-ff-display: "Instrument Serif", Georgia, serif; --mm-ff-body: "Inter", system-ui, sans-serif; --mm-ff-mono: "JetBrains Mono", ui-monospace, monospace; --mm-fs-body: 16px; --mm-fs-small: 13px; --mm-fs-xs: 11px; } /* ---- Light variant --------------------------------------------- */ html[data-scheme="light"] { --mm-bg: #f3ece0; --mm-bg-elev:#ece3d3; --mm-fg: #1a1612; --mm-muted: rgba(26, 22, 18, 0.55); --mm-line: rgba(26, 22, 18, 0.14); } /* ---- Section spacing variants ---------------------------------- */ html[data-spacing="tight"] { --mm-pad-sec: 64px; } html[data-spacing="comfortable"] { --mm-pad-sec: 96px; } html[data-spacing="open"] { --mm-pad-sec: 140px; } /* ---- Font-pair variants ---------------------------------------- */ html[data-display-font="fraunces"] { --mm-ff-display: "Fraunces", Georgia, serif; } html[data-display-font="grotesk"] { --mm-ff-display: "Space Grotesk", sans-serif; } html[data-display-font="system"] { --mm-ff-display: system-ui, sans-serif; } html[data-body-font="fraunces"] { --mm-ff-body: "Fraunces", Georgia, serif; } html[data-body-font="grotesk"] { --mm-ff-body: "Space Grotesk", sans-serif; } html[data-body-font="system"] { --mm-ff-body: system-ui, sans-serif; } /* ================================================================ Reset & base ================================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--mm-bg); color: var(--mm-fg); font-family: var(--mm-ff-body); font-size: var(--mm-fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--mm-ff-display); font-weight: 400; letter-spacing: -0.02em; margin: 0 0 0.4em; line-height: 1; } h1 { font-size: clamp(44px, 7vw, 112px); } h2 { font-size: clamp(32px, 4.5vw, 64px); } h3 { font-size: clamp(20px, 1.8vw, 28px); } p { margin: 0 0 1em; } a { color: var(--mm-fg); } img, svg { max-width: 100%; display: block; } /* Mono accents — for labels/kickers */ .mm-kicker, .mm-meta { font-family: var(--mm-ff-mono); font-size: var(--mm-fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mm-muted); } .mm-kicker--accent { color: var(--mm-accent); } .mm-shell { max-width: var(--mm-maxw); margin: 0 auto; padding: 0 var(--mm-gutter); } .mm-skip { position: absolute; left: -9999px; top: 0; background: var(--mm-accent); color: var(--mm-bg); padding: 10px 14px; font-family: var(--mm-ff-mono); font-size: 12px; z-index: 999; } .mm-skip:focus { left: 12px; top: 12px; } /* ================================================================ Header ================================================================ */ .mm-header { border-bottom: 1px solid var(--mm-line); position: relative; z-index: 10; } .mm-header__inner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 40px; padding: 28px 0; } .mm-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--mm-fg); } .mm-brand__mark { width: 36px; height: 36px; } .mm-brand__text { display: flex; flex-direction: column; line-height: 1; } .mm-brand__name { font-family: var(--mm-ff-display); font-size: 24px; letter-spacing: -0.02em; } .mm-brand__tag { font-family: var(--mm-ff-mono); font-size: 10px; color: var(--mm-muted); text-transform: uppercase; margin-top: 4px; letter-spacing: 0.06em; } /* Joomla's default menu markup (ul.mod-menu) — restyle inline */ .mm-header__nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 28px; justify-content: flex-end; } .mm-header__nav a { font-family: var(--mm-ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mm-muted); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; } .mm-header__nav a:hover { color: var(--mm-fg); } .mm-header__nav li.current > a, .mm-header__nav li.active > a { color: var(--mm-fg); border-bottom-color: var(--mm-accent); } .mm-header__aux { font-family: var(--mm-ff-mono); font-size: 11px; color: var(--mm-muted); } .mm-header__burger { display: none; background: none; border: 1px solid var(--mm-line); width: 40px; height: 40px; cursor: pointer; padding: 0; } .mm-header__burger span { display: block; width: 18px; height: 1px; background: var(--mm-fg); margin: 4px auto; } /* ================================================================ Hero / slider section (module host) ================================================================ */ .mm-hero { position: relative; min-height: clamp(480px, 64vh, 720px); background: var(--mm-bg-elev); overflow: hidden; } .mm-hero > * { position: relative; z-index: 1; } .mm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.45)); pointer-events: none; } /* ================================================================ Blog-top row (featured articles module host) ================================================================ */ .mm-blog-top { padding: var(--mm-pad-sec) 0; border-bottom: 1px solid var(--mm-line); } /* ================================================================ Main + sidebar grid ================================================================ */ .mm-main { padding: var(--mm-pad-sec) 0; } .mm-main__grid[data-sidebar="yes"] { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; } .mm-main__content { min-width: 0; } .mm-main__side { border-left: 1px solid var(--mm-line); padding-left: 40px; } .mm-main__top, .mm-main__bottom { margin-bottom: 48px; } /* ================================================================ Breadcrumbs ================================================================ */ .mm-breadcrumbs { padding: 20px 0; border-bottom: 1px solid var(--mm-line); font-family: var(--mm-ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mm-muted); } .mm-breadcrumbs a { color: var(--mm-muted); text-decoration: none; } .mm-breadcrumbs a:hover { color: var(--mm-fg); } /* ================================================================ Footer ================================================================ */ .mm-footer { background: var(--mm-bg-elev); padding: var(--mm-pad-sec) 0 40px; margin-top: var(--mm-pad-sec); } .mm-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--mm-line); } .mm-footer__col h3, .mm-footer__col h4 { font-size: 20px; margin-bottom: 16px; } .mm-footer__col ul { list-style: none; padding: 0; margin: 0; } .mm-footer__col li { margin-bottom: 8px; } .mm-footer__col a { color: var(--mm-muted); text-decoration: none; font-size: 14px; transition: color .12s; } .mm-footer__col a:hover { color: var(--mm-fg); } .mm-footer__bottom { padding-top: 32px; display: flex; justify-content: space-between; gap: 24px; font-family: var(--mm-ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mm-muted); } .mm-footer__meta { display: flex; justify-content: space-between; width: 100%; } /* ================================================================ Card wrapper style (for modules rendered with style="mm-card") Joomla fallback — this matches the chromeStyle we'll register. ================================================================ */ .mm-card { padding: 24px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); margin-bottom: 24px; background: var(--mm-bg); } .mm-card > h3, .mm-card > h4 { margin-top: 0; } /* ================================================================ Component output — Joomla article / category defaults Keep it editorial. ================================================================ */ .item-page h1, .blog h1, .category-list h1, .contact h1 { font-size: clamp(40px, 5vw, 72px); margin-bottom: 12px; } .item-page .article-info, .item-info { font-family: var(--mm-ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mm-muted); margin-bottom: 32px; } .item-page p { font-size: 18px; line-height: 1.75; max-width: 70ch; } .item-page img { margin: 32px 0; border-radius: var(--mm-radius); } .readmore a, .btn { display: inline-block; font-family: var(--mm-ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; padding: 12px 18px; border: 1px solid var(--mm-fg); color: var(--mm-fg); text-decoration: none; transition: background .15s, color .15s; } .readmore a:hover, .btn:hover { background: var(--mm-fg); color: var(--mm-bg); } /* Joomla blog/category list items → 2- or 3-col editorial grid */ .blog .items-row, .category-list ul.category { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; list-style: none; padding: 0; } .blog .item, .category-list ul.category li { padding: 0; border: none; } .blog .item h2, .category-list h3 { font-size: 28px; letter-spacing: -0.01em; } /* ================================================================ Forms (contact, search, login) ================================================================ */ input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="url"], textarea, select { background: transparent; border: none; border-bottom: 1px solid var(--mm-line); color: var(--mm-fg); font-family: var(--mm-ff-body); font-size: 15px; padding: 12px 0; width: 100%; outline: none; transition: border-color .15s; } input:focus, textarea:focus, select:focus { border-bottom-color: var(--mm-accent); } label { font-family: var(--mm-ff-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mm-muted); display: block; margin-bottom: 6px; } button, .button, input[type="submit"] { background: var(--mm-fg); color: var(--mm-bg); border: none; font-family: var(--mm-ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; padding: 14px 22px; cursor: pointer; transition: background .15s; } button:hover, .button:hover, input[type="submit"]:hover { background: var(--mm-accent); } /* ================================================================ System messages ================================================================ */ #system-message-container { margin: 20px 0; } .alert { padding: 14px 18px; border-left: 2px solid var(--mm-accent); background: var(--mm-bg-elev); margin-bottom: 12px; font-size: 14px; } /* ================================================================ Debug overlay — positions helper ================================================================ */ html[data-debug="1"] [data-mm-pos] { outline: 1px dashed var(--mm-accent); outline-offset: -1px; position: relative; } html[data-debug="1"] [data-mm-pos]::before { content: attr(data-mm-pos); position: absolute; top: 0; left: 0; background: var(--mm-accent); color: var(--mm-bg); font-family: var(--mm-ff-mono); font-size: 9px; padding: 2px 6px; text-transform: uppercase; letter-spacing: 0.08em; z-index: 20; } .mm-debug { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; pointer-events: none; } .mm-debug__bar { pointer-events: auto; background: rgba(20,18,16,0.95); backdrop-filter: blur(14px); color: var(--mm-fg); font-family: var(--mm-ff-mono); font-size: 11px; letter-spacing: 0.06em; padding: 10px 20px; display: flex; gap: 28px; align-items: center; border-top: 1px solid var(--mm-line); text-transform: uppercase; } .mm-debug__bar strong { color: var(--mm-accent); font-weight: 600; } .mm-debug__bar [data-mm-debug-close] { margin-left: auto; background: transparent; border: none; color: var(--mm-fg); font-size: 18px; cursor: pointer; padding: 0; width: 24px; height: 24px; } /* ================================================================ Responsive ================================================================ */ @media (max-width: 960px) { :root { --mm-gutter: 24px; --mm-pad-sec: 64px; } .mm-header__inner { grid-template-columns: auto 1fr auto; gap: 20px; } .mm-header__nav { display: none; } .mm-header__nav.is-open { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--mm-bg); border-bottom: 1px solid var(--mm-line); padding: 20px 24px; } .mm-header__nav.is-open ul { flex-direction: column; gap: 16px; align-items: flex-start; } .mm-header__burger { display: block; } .mm-main__grid[data-sidebar="yes"] { grid-template-columns: 1fr; } .mm-main__side { border-left: none; padding-left: 0; border-top: 1px solid var(--mm-line); padding-top: 40px; margin-top: 40px; } .mm-footer__cols { grid-template-columns: 1fr; gap: 32px; } .mm-footer__bottom { flex-direction: column; } }