/*
* MatCalc Theme — full visual redesign
* Based on matcalc-redesign-red.html reference
* Applies to: matcalc3 Joomla template
*/
/* ================================================================
DESIGN TOKENS (light theme — default)
================================================================ */
:root {
--paper: #F1ECE1;
--paper-2: #E8E1D2;
--paper-bright: #FBF8F0;
--ink: #15140F;
--ink-2: #3A372E;
--ink-3: #6B6655;
--rule: #C8C0AE;
--accent: #A82017;
--accent-deep: #71140E;
--steel: #1B2A3A;
--max: 1280px;
--gutter: clamp(20px, 4vw, 56px);
/* Tells the browser which colour scheme this page uses, so
native form controls / scrollbars match. Updated by the dark
overrides below. */
color-scheme: light;
}
/* ================================================================
DARK MODE — greyscale palette that keeps the design language
----------------------------------------------------------------
Applied when EITHER:
a) `data-theme="dark"` is explicitly set on by the
toggle button (overrides system preference), OR
b) the user's OS prefers dark AND they haven't explicitly
forced light via `data-theme="light"` on .
================================================================ */
:root[data-theme="dark"],
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { /* placeholder */ }
}
:root[data-theme="dark"] {
--paper: #1E1E1E; /* page background */
--paper-2: #2A2A2A; /* card / hex inner */
--paper-bright: #353535; /* hover-lighter / highlights */
--ink: #ECECEC; /* primary text */
--ink-2: #BDBDBD; /* secondary text */
--ink-3: #888888; /* tertiary text / labels */
--rule: #404040; /* borders, dividers, hex rings */
--accent: #E5413A; /* brighter red for legibility on dark */
--accent-deep: #B0291F;
--steel: #5085B5;
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--paper: #1E1E1E;
--paper-2: #2A2A2A;
--paper-bright: #353535;
--ink: #ECECEC;
--ink-2: #BDBDBD;
--ink-3: #888888;
--rule: #404040;
--accent: #E5413A;
--accent-deep: #B0291F;
--steel: #5085B5;
color-scheme: dark;
}
}
/* ================================================================
RESET & BASE
================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--paper);
color: var(--ink);
font-family: "IBM Plex Sans", system-ui, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
margin: 0;
padding: 0;
}
/* Paper grain overlay.
NOTE: `mix-blend-mode: multiply` was removed here. When any descendant
element creates a new stacking context via `transform` (e.g. the hex
hover panel's scale-in transition on the homepage), multiply blends
against a transparent backdrop and falls back to black, turning the
whole page dark. The grain still reads correctly because the SVG
noise paints near-black pixels at low alpha. */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: .35;
background-image: url("data:image/svg+xml;utf8,");
}
/* Atom lattice — applied as main::before so it is physically
bounded by the main element and can never reach the header
or footer. Only active on the frontpage. */
body::after { content: none; } /* old full-page overlay disabled */
.frontpage main {
overflow: hidden; /* clip the pseudo-element to main's bounds */
}
/* FCC lattice — left side, hourglass mask */
.frontpage main::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 10;
background-image: url('../img/atom-lattice.svg');
background-size: 80px 70px;
background-repeat: repeat;
-webkit-mask-image:
linear-gradient(to right, black 0%, black 8%, rgba(0,0,0,.4) 14%, transparent 22%),
radial-gradient(ellipse 32% 38% at 0% 50%, black 0%, black 55%, transparent 100%);
-webkit-mask-composite: source-over;
mask-image:
linear-gradient(to right, black 0%, black 8%, rgba(0,0,0,.4) 14%, transparent 22%),
radial-gradient(ellipse 32% 38% at 0% 50%, black 0%, black 55%, transparent 100%);
mask-composite: add;
opacity: 0.45;
}
/* BCC lattice — right side, matching hourglass mask */
.frontpage main::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 10;
background-image: url('../img/atom-lattice-bcc.svg');
background-size: 64px 64px;
background-repeat: repeat;
-webkit-mask-image:
linear-gradient(to left, black 0%, black 8%, rgba(0,0,0,.4) 14%, transparent 22%),
radial-gradient(ellipse 32% 38% at 100% 50%, black 0%, black 55%, transparent 100%);
-webkit-mask-composite: source-over;
mask-image:
linear-gradient(to left, black 0%, black 8%, rgba(0,0,0,.4) 14%, transparent 22%),
radial-gradient(ellipse 32% 38% at 100% 50%, black 0%, black 55%, transparent 100%);
mask-composite: add;
opacity: 0.45;
}
a { color: var(--ink-2); text-decoration: none; }
a:hover { color: var(--accent); }
/* Underline policy:
We need underlines on most links (nav / footer / body prose) but
NOT on:
• hexagon-related anchors (icon_box / mc-box-expandable /
mc-sub-hex* subtree)
• links wrapping an image (.mc-logo, .mc-mceng-logo, body
content with image-as-link)
The tricky bit: when a wrapping has text-decoration:underline
(Bootstrap's a:hover default), the underline VISUALLY draws on
every descendant text node. Setting text-decoration:none on the
descendant doesn't undo this — text-decoration is rendered at
the decorating-box level of the ancestor that declared it. The
reliable workaround is `text-decoration-color: transparent` on
the wrapper: the underline still technically exists, but it's
invisible, so the descendant text reads clean. We apply BOTH
`text-decoration: none` (for cases where it does work) AND
`text-decoration-color: transparent` (for the cascade case). */
a:has(> img):hover,
a:has(img):hover,
.icon_box:hover,
a.icon_box:hover,
.mc-box-expandable:hover,
a.mc-box-expandable:hover {
text-decoration: none !important;
text-decoration-color: transparent !important;
-webkit-text-decoration-color: transparent !important;
}
/* THE REAL UNDERLINE CULPRIT — redesign.css section 7 applies an
"animated underline" to ALL anchors via a 1px linear-gradient
background-image (background-size: 0 1px → 100% 1px on hover).
text-decoration:none can't touch that — it's a background. We
strip the background-image / background-size on the same
carve-outs (hexagon subtree + image-wrapping links) so the
fake underline disappears too. Selector specificity (0,2,3+)
beats redesign.css's `html body main * a:hover` (0,1,4) on
second-column (classes) which wins regardless of source order. */
html body main .icon_box,
html body main .icon_box a,
html body main .icon_box a:hover,
html body main .mc-box-expandable,
html body main .mc-box-expandable a,
html body main .mc-box-expandable a:hover,
html body main .mc-sub-hex,
html body main .mc-sub-hex a,
html body main .mc-sub-hex a:hover,
html body main .mc-sub-hex-in,
html body main .mc-sub-hex-in a,
html body main .mc-sub-hex-in a:hover,
html body a.icon_box,
html body a.icon_box:hover,
html body a.mc-box-expandable,
html body a.mc-box-expandable:hover,
html body a.mc-logo,
html body a.mc-logo:hover,
html body a.mc-mceng-logo,
html body a.mc-mceng-logo:hover,
html body a:has(img),
html body a:has(img):hover,
html body main a:has(img),
html body main a:has(img):hover {
background-image: none !important;
background-size: 0 0 !important;
}
img { max-width: 100%; height: auto; } /* no forced display:block — preserves inline/float images */
/* ================================================================
LAYOUT WRAPPER
================================================================ */
.mc-wrap {
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--gutter);
position: relative;
z-index: 2;
}
/* ================================================================
UTILITY BAR
================================================================ */
.mc-util {
border-bottom: 1px solid var(--rule);
background: var(--paper);
font-family: "IBM Plex Mono", monospace;
font-size: 11.5px;
letter-spacing: .04em;
color: var(--ink-2);
position: relative;
z-index: 60;
}
/* Dark-mode layered greys:
.mc-util → --paper (darkest, the strip at the very top)
header.mc-header → --paper-bright (mid-grey for the main nav)
body / main → #4A4A4A (lightest, the page background)
This gives three distinct horizontal bands of brightness without
any blending. .changed is the scroll-state class on .mc-header. */
:root[data-theme="dark"] header.mc-header,
:root[data-theme="dark"] header.mc-header.changed {
background: var(--paper-bright) !important;
}
:root[data-theme="dark"] body,
:root[data-theme="dark"] main,
:root[data-theme="dark"] html body main,
:root[data-theme="dark"] html body.frontpage main,
:root[data-theme="dark"] html body.no-frontpage main {
background: #6A6A6A !important;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) header.mc-header,
:root:not([data-theme="light"]) header.mc-header.changed {
background: var(--paper-bright) !important;
}
:root:not([data-theme="light"]) body,
:root:not([data-theme="light"]) main,
:root:not([data-theme="light"]) html body main,
:root:not([data-theme="light"]) html body.frontpage main,
:root:not([data-theme="light"]) html body.no-frontpage main {
background: #6A6A6A !important;
}
}
.mc-util .mc-wrap {
display: flex;
justify-content: space-between;
align-items: center;
height: 36px;
gap: 24px;
flex-wrap: wrap;
}
.mc-util a { color: var(--ink-2); }
.mc-util a:hover { color: var(--accent); }
/* Theme toggle button in the utility bar. Sized to match the
bar's mono 11.5px / 36px-tall layout. Active state (panel open
on dark theme) flips the icon and label via JS — no separate
visual treatment needed. */
.mc-util .mc-theme-toggle {
background: transparent;
border: 1px solid var(--rule);
color: var(--ink-2);
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
letter-spacing: .06em;
padding: 2px 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
vertical-align: middle;
line-height: 1.4;
transition: color 0.15s ease, border-color 0.15s ease;
}
.mc-util .mc-theme-toggle:hover {
color: var(--accent);
border-color: var(--accent);
}
.mc-util .mc-theme-toggle:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.mc-util .mc-theme-icon { font-size: 13px; line-height: 1; }
/* ================================================================
THEME-SWITCHED LOGO IMAGES
----------------------------------------------------------------
Each header logo (MatCalc 6 and MatCalc Engineering) carries
two ![]()
tags:
• .mc-logo-light — the bright/external version (in normal flow)
• .mc-logo-dark — local PNG stripped of its white fringe
(absolutely positioned on top)
We use VISIBILITY rather than DISPLAY for the swap, with the
dark image absolute-positioned over the light one. This means
the LIGHT image always defines the container's box dimensions
in both themes — switching themes never changes any layout
measurement, so the rest of the header (nav, CTA logo) never
reflows or shifts. The dark image inherits the light image's
rendered size via width/height: 100%.
================================================================ */
a.mc-logo,
a.mc-mceng-logo {
position: relative; /* anchor for the absolute-positioned dark img */
}
img.mc-logo-light {
position: relative;
z-index: 1;
}
img.mc-logo-dark {
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: inherit; /* matches the light img's positioning */
z-index: 2;
visibility: hidden;
}
:root[data-theme="dark"] img.mc-logo-light { visibility: hidden; }
:root[data-theme="dark"] img.mc-logo-dark { visibility: visible; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) img.mc-logo-light { visibility: hidden; }
:root:not([data-theme="light"]) img.mc-logo-dark { visibility: visible; }
}
.mc-util .mc-dot {
display: inline-block;
width: 18px;
height: 18px;
background-image: url('../img/spheres.png');
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-color: transparent;
border-radius: 0;
margin-right: 6px;
vertical-align: middle;
}
/* ================================================================
MAIN NAV / HEADER
================================================================ */
/* Neutralise the .changed class that script.js adds on scroll */
header.changed,
header.mc-header.changed,
header.mc-header.changed.navbar-fixed-top {
background-color: var(--paper-2) !important;
background: var(--paper-2) !important;
border: none !important;
border-bottom: 1px solid var(--rule) !important;
-webkit-transition: none !important;
transition: none !important;
}
/* Reset old header styles — override desktop.css height + background */
header.mc-header {
position: sticky !important;
top: 0 !important;
z-index: 50 !important;
background: var(--paper-2) !important;
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid var(--rule) !important;
height: auto !important;
padding: 0;
}
header.mc-header .mc-wrap {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
height: 80px;
gap: 24px;
}
/* Logo — img tag approach, no conflict with desktop.css .logo float rules */
a.mc-logo {
display: flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
}
a.mc-logo img.mc-logo-img {
display: block;
height: 64px;
width: auto;
max-width: 320px;
}
/* MatCalc Engineering logo in nav CTA — see consolidated rules near bottom */
/* Nav links — wraps the Joomla menu module output */
.mc-nav-links {
display: flex;
justify-content: center;
gap: 28px;
font-size: 16px;
color: var(--ink-2);
flex: 1;
}
/* Style the Joomla menu module inside mc-nav-links */
.mc-nav-links .moduletable,
.mc-nav-links > ul {
display: flex;
gap: 28px;
margin: 0;
padding: 0;
list-style: none;
}
.mc-nav-links .moduletable ul {
display: flex;
flex-wrap: wrap;
gap: 4px 28px;
list-style: none;
margin: 0;
padding: 0;
align-items: center;
}
.mc-nav-links .moduletable ul li {
background: transparent !important;
color: var(--ink-2) !important;
display: block !important;
float: none !important;
list-style: none !important;
}
.mc-nav-links .moduletable ul li a,
.mc-nav-links .moduletable ul li a:visited {
position: relative;
padding: 6px 0;
font-size: 16px;
color: var(--ink-2) !important;
background: transparent !important;
font-weight: 600;
text-shadow: none;
text-decoration: none;
display: block;
white-space: nowrap;
}
.mc-nav-links .moduletable ul li a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .35s ease;
}
.mc-nav-links .moduletable ul li a:hover,
.mc-nav-links .moduletable ul li a:focus {
color: var(--ink) !important;
background: transparent !important;
text-decoration: none !important;
}
.mc-nav-links .moduletable ul li a:hover::after,
.mc-nav-links .moduletable ul li a:focus::after {
transform: scaleX(1);
}
.mc-nav-links .moduletable ul li.active a {
color: var(--ink) !important;
}
.mc-nav-links .moduletable ul li.active a::after {
transform: scaleX(1);
}
/* Dropdown inside nav */
.mc-nav-links .moduletable ul li ul {
display: none;
position: absolute;
background: rgba(241, 236, 225, .97);
border: 1px solid var(--rule);
z-index: 100;
flex-direction: column;
gap: 0;
min-width: 180px;
padding: 8px 0;
top: 100%;
left: 0;
}
.mc-nav-links .moduletable ul li:hover ul {
display: flex;
}
.mc-nav-links .moduletable ul li ul li a {
padding: 8px 18px;
font-size: 14px;
}
.mc-nav-links .moduletable ul li ul li a::after {
display: none;
}
/* ── Dark-mode: nav-bar dropdown panels ────────────────────────────
The dropdown panel's background above is the warm cream
rgba(241,236,225,.97), which stays bright in dark mode and
renders the (light) item text unreadable. Swap to a dark grey
in dark mode only. Using --paper-2 (#2A2A2A) — sits between the
nav (#353535) and the utility bar (#1E1E1E), so the panel reads
as a distinct surface dropping out of the nav. Border stays
var(--rule) (#404040 in dark mode), which is visible against
#2A2A2A; item text already uses var(--ink-2) → light, so contrast
is fine. Light mode is untouched. */
html[data-theme="dark"] .mc-nav-links .moduletable ul li ul {
background: var(--paper-2);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .mc-nav-links .moduletable ul li ul {
background: var(--paper-2);
}
}
/* CTA area */
.mc-nav-cta {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
/* ================================================================
BUTTONS
================================================================ */
.mc-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 18px;
font-size: 14px;
font-family: "IBM Plex Sans", sans-serif;
font-weight: 500;
border: 1px solid var(--ink);
background: var(--ink);
color: var(--paper) !important;
transition: transform .2s ease, background .2s ease, border-color .2s ease;
cursor: pointer;
text-decoration: none;
line-height: 1.3;
border-radius: 0;
}
.mc-btn:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--paper) !important;
}
.mc-btn .mc-arrow { transition: transform .25s ease; }
.mc-btn:hover .mc-arrow { transform: translateX(3px); }
.mc-btn-sm { padding: 8px 14px; font-size: 13px; }
.mc-btn-ghost {
background: transparent;
color: var(--ink) !important;
border-color: var(--ink);
}
.mc-btn-ghost:hover {
background: var(--ink);
color: var(--paper) !important;
}
/* ================================================================
MAIN CONTENT AREA
================================================================
IMPORTANT: redesign.css ships `html body main { background: transparent }`
at specificity (0,0,3). The naked `main` selector below is (0,0,1) and
loses the cascade — leaving main transparent and producing the
"black bleed-through" symptom on the homepage (you see through main
to a stacking context that has no paper backdrop). The follow-up
rule with `html body main` matches redesign.css's specificity and
wins because matcalc-theme.css is loaded later. Do not remove. */
main {
margin-top: 0 !important;
background: var(--paper);
position: relative;
z-index: 2;
}
html body main,
html body.frontpage main,
html body.no-frontpage main {
background: var(--paper) !important;
}
/* Override old style.css values that push main down by 130px / 260px */
main * { color: inherit; }
.no-frontpage main { margin-top: 0 !important; }
.no-frontpage main .content {
background: var(--paper);
padding-top: 56px;
padding-bottom: 80px;
}
.frontpage main .content {
background: transparent;
}
/* Content typography */
main .content h1,
main .content h2,
main .content h3,
main .content h4 {
font-family: "Fraunces", serif;
font-weight: 400;
color: var(--ink);
letter-spacing: -.02em;
line-height: 1.05;
}
main .content h1 { font-size: clamp(34px, 4.4vw, 60px); margin: 0 0 28px; }
main .content h2 { font-size: clamp(28px, 3vw, 46px); margin: 40px 0 20px; }
main .content h3 { font-size: clamp(22px, 2vw, 32px); margin: 32px 0 16px; }
main .content h4 {
font-size: 24px;
margin: 28px 0 12px;
font-weight: 500;
color: var(--ink) !important;
}
main .content p { color: var(--ink-2); line-height: 1.65; margin: 0 0 18px; }
main .content ul {
list-style: none;
padding: 0;
margin: 0 0 18px;
}
main .content ul li {
padding: 8px 0;
border-top: 1px dashed var(--rule);
color: var(--ink-2);
font-size: 15px;
}
main .content ul li::before {
content: "→";
color: var(--accent);
margin-right: 10px;
}
main .content a { color: var(--accent); }
/* Content links — underline on hover, BUT only for real article
prose. We exclude .icon_box and .mc-sub-hex* descendants because
those wrap their own elements (hex title, sub-hex menu items)
and a hover underline on those reads as a styling bug. */
main .content a:hover { color: var(--accent-deep); text-decoration: underline; }
main .content .icon_box a:hover,
main .content .icon_box:hover,
main .content .mc-box-expandable a:hover,
main .content .mc-sub-hex a:hover,
main .content .mc-sub-hex-in a:hover { text-decoration: none !important; }
/* Page header */
.page-header {
border: none;
border-bottom: 1px solid var(--rule);
margin: 0 0 40px;
padding: 0 0 24px;
}
.page-header h1 {
font-family: "Fraunces", serif;
font-weight: 400;
color: var(--ink) !important;
font-size: clamp(34px, 4.4vw, 60px) !important;
letter-spacing: -.02em;
margin: 0;
}
/* Sub-menu / tab strip */
.no-frontpage main > .moduletable {
background: var(--paper-2);
border-bottom: 1px solid var(--rule);
}
.no-frontpage main > .moduletable ul {
display: flex;
flex-wrap: wrap;
gap: 0;
margin: 0 auto;
padding: 0 var(--gutter);
max-width: var(--max);
list-style: none;
}
.no-frontpage main > .moduletable ul li {
background: transparent !important;
color: var(--ink-2) !important;
display: block !important;
float: none !important;
}
.no-frontpage main > .moduletable ul li a {
display: block;
padding: 12px 18px;
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-3) !important;
background: transparent !important;
border-bottom: 2px solid transparent;
}
.no-frontpage main > .moduletable ul li a:hover {
color: var(--ink) !important;
border-bottom-color: var(--accent);
text-decoration: none !important;
}
.no-frontpage main > .moduletable ul li.active a {
color: var(--ink) !important;
border-bottom-color: var(--accent);
}
/* ================================================================
FRONT PAGE MODULES (contentfirst / contentsecond)
================================================================ */
.frontpage main .moduletable {
margin: 0;
width: 100%;
}
/* ----------------------------------------------------------------
Typography for ALL injected Joomla content — ensures the
"scientific toolbox" headline and similar text uses the new fonts
---------------------------------------------------------------- */
main .moduletable,
main .moduletable p,
main .moduletable div,
main .moduletable span,
main .content,
main .content p,
main .content div {
font-family: "IBM Plex Sans", system-ui, sans-serif;
color: var(--ink-2);
}
/* Large centred display headings (e.g. "The scientific toolbox…") */
main .moduletable h1,
main .moduletable h2,
main .moduletable .center h1,
main .moduletable .center h2,
main .moduletable .center h3,
main .content .center h1,
main .content .center h2 {
font-family: "Fraunces", serif !important;
font-weight: 400 !important;
letter-spacing: -.025em;
line-height: 1.05;
color: var(--ink) !important;
}
/* Big background-text hero overlays */
main .bg_txt,
main .moduletable .bg_txt {
font-family: "Fraunces", serif !important;
font-weight: 400 !important;
color: var(--ink) !important;
background: rgba(241, 236, 225, 0.72) !important;
letter-spacing: -.02em;
}
/* Sub-headings in modules */
main .moduletable h3,
main .moduletable h4 {
font-family: "Fraunces", serif !important;
font-weight: 500 !important;
color: var(--ink) !important;
letter-spacing: -.01em;
}
/* Small mono labels / eyebrow text */
main .moduletable .section-num,
main .moduletable .eyebrow {
font-family: "IBM Plex Mono", monospace !important;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-3) !important;
}
/* ================================================================
HOMEPAGE CONTACT CTA STRIP
================================================================ */
.mc-contact-cta {
border: 1px solid var(--rule);
background: var(--paper-2);
padding: 20px 48px;
margin: 32px auto 40px;
width: fit-content;
position: relative;
z-index: 11;
}
.mc-contact-cta .mc-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
text-align: center;
padding: 0;
max-width: none;
}
.mc-contact-cta-text {
font-family: "IBM Plex Sans", sans-serif;
font-size: 18px;
color: var(--ink-2);
}
/* ================================================================
FOOTER
================================================================ */
footer.mc-footer {
background: var(--paper-2);
border-top: 1px solid var(--rule);
padding: 64px 0 0;
font-size: 14px;
color: var(--ink-2);
position: relative;
z-index: 10; /* above lattice overlay (z:3) */
}
.mc-foot-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 32px;
margin-bottom: 48px;
}
.mc-foot-brand h4 {
font-family: "Fraunces", serif;
font-weight: 500;
font-size: 22px;
margin: 0 0 12px;
letter-spacing: -.01em;
color: var(--ink);
display: flex;
align-items: center;
gap: 10px;
}
.mc-foot-brand h4 .mc-mark {
display: inline-block;
width: 32px;
height: 32px;
background-image: url('../img/spheres.png');
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-color: transparent;
transform: none;
position: static;
top: auto;
flex-shrink: 0;
}
.mc-foot-brand p {
margin: 0;
font-size: 14px;
color: var(--ink-3);
max-width: 32ch;
line-height: 1.55;
}
.mc-foot-col h5 {
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ink-3);
margin: 6px 0 18px;
}
.mc-foot-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.mc-foot-col ul li { padding: 0; border: 0; }
.mc-foot-col ul li::before { display: none; }
.mc-foot-col a {
color: var(--ink-2);
font-size: 14px;
}
.mc-foot-col a:hover { color: var(--accent); }
.mc-foot-bot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-top: 1px solid var(--rule);
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
color: var(--ink-3);
letter-spacing: .06em;
flex-wrap: wrap;
gap: 12px;
}
.mc-foot-bot a { color: var(--ink-3); }
.mc-foot-bot a:hover { color: var(--accent); }
/* ================================================================
HIDE OLD NAV / FOOTER ELEMENTS
================================================================ */
#bottom-nav { display: none !important; }
.supersized_test { display: none !important; }
#supersized { display: none !important; }
/* ================================================================
OVERRIDE OLD BOOTSTRAP / TEMPLATE CONFLICTS
================================================================ */
header.mc-header,
header.mc-header * {
box-sizing: border-box;
}
/* Ensure Bootstrap nav classes don't interfere */
header.mc-header .navbar-collapse {
display: block !important;
height: auto !important;
overflow: visible !important;
padding: 0;
border: 0;
box-shadow: none;
}
header.mc-header .navbar-toggle { display: none; }
/* ================================================================
SECTION STYLES (for Joomla content injected via modules)
================================================================ */
.mc-section {
padding: clamp(80px, 10vw, 140px) 0;
position: relative;
z-index: 2;
}
.mc-section-kicker {
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 18px;
}
.mc-section-num {
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
color: var(--accent);
letter-spacing: .16em;
text-transform: uppercase;
margin-bottom: 16px;
}
.mc-section-title {
font-family: "Fraunces", serif;
font-weight: 400;
font-size: clamp(34px, 4.4vw, 60px);
line-height: 1;
letter-spacing: -.02em;
margin: 0;
color: var(--ink);
}
.mc-section-title em { font-style: italic; color: var(--accent); }
/* Dark showcase section */
.mc-showcase {
background: var(--ink);
color: var(--paper);
}
.mc-showcase .mc-section-title { color: var(--paper); }
/* Stats row */
.mc-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
}
.mc-stat {
padding: 36px 28px;
border-right: 1px solid var(--rule);
}
.mc-stat:last-child { border-right: 0; }
.mc-stat .mc-num {
font-family: "Fraunces", serif;
font-weight: 400;
font-size: clamp(48px, 5.6vw, 76px);
line-height: 1;
letter-spacing: -.02em;
color: var(--ink);
}
.mc-stat .mc-num em { font-style: italic; color: var(--accent); }
.mc-stat .mc-lab {
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
color: var(--ink-3);
letter-spacing: .1em;
text-transform: uppercase;
margin-top: 14px;
line-height: 1.5;
}
/* Card / app box */
.mc-card {
border: 1px solid var(--rule);
padding: 28px 26px 30px;
background: #FBF8F0;
position: relative;
transition: transform .3s ease, box-shadow .3s ease;
}
.mc-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 0 -3px var(--paper-2), 0 12px 0 -2px var(--rule);
}
.mc-card .mc-card-ix {
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
color: var(--accent);
letter-spacing: .14em;
}
.mc-card h3 {
font-family: "Fraunces", serif;
font-weight: 500;
font-size: 24px;
line-height: 1.1;
margin: 14px 0 10px;
letter-spacing: -.01em;
color: var(--ink) !important;
}
.mc-card p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
/* Diagram / figure box */
.mc-diagram {
position: relative;
border: 1px solid var(--rule);
background: #FBF8F0;
padding: 28px 28px 22px;
box-shadow: 0 1px 0 var(--rule), 22px 22px 0 -1px var(--paper-2), 22px 22px 0 0 var(--rule);
}
.mc-diagram-cap {
margin-top: 12px;
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: .06em;
color: var(--ink-3);
}
/* ================================================================
RESPONSIVE
================================================================ */
@media (max-width: 980px) {
.mc-foot-grid { grid-template-columns: 1fr 1fr; }
.mc-stats { grid-template-columns: repeat(2, 1fr); }
.mc-stat { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 767px) {
/* Nav */
.mc-nav-links { display: none; }
.mc-nav-links.mc-open { display: flex; flex-direction: column; }
/* Header */
header.mc-header .mc-wrap {
flex-wrap: wrap;
height: auto;
padding-top: 12px;
padding-bottom: 12px;
gap: 10px;
}
/* Shrink MatCalc logo on mobile */
a.mc-logo img.mc-logo-img {
height: 44px;
max-width: 220px;
}
/* Hide MatCalc Engineering logo on mobile */
.mc-mceng-logo { display: none; }
/* Nav dropdown */
.mc-nav-links {
width: 100%;
border-top: 1px solid var(--rule);
padding-top: 12px;
flex-direction: column;
gap: 0;
}
.mc-nav-links .moduletable ul {
flex-direction: column;
gap: 0;
width: 100%;
}
.mc-nav-links .moduletable ul li a {
padding: 12px 0;
border-top: 1px solid var(--rule);
}
/* Utility bar */
.mc-util .mc-util-right { display: none; }
/* Icon boxes — full width, shorter on small screens */
main .icon_box {
height: 160px !important;
}
/* Footer */
.mc-foot-grid { grid-template-columns: 1fr; }
}
/* ================================================================
FONT OVERRIDES — broad selectors to beat style.css specificity
These cover content rendered directly under main without .moduletable
================================================================ */
/* Force new font stack on every element inside main */
main, main * {
font-family: "IBM Plex Sans", system-ui, sans-serif;
}
/* All headings anywhere in main → Fraunces */
main h1, main h2, main h3, main h4, main h5, main h6 {
font-family: "Fraunces", serif !important;
font-weight: 400 !important;
color: var(--ink) !important;
letter-spacing: -.02em;
}
/* Override style.css bold/coloured headings */
.no-frontpage main h1,
.no-frontpage main h2,
main .center h1,
main .center h2,
main .center h3,
main .center h4,
main .center h5 {
font-family: "Fraunces", serif !important;
font-weight: 400 !important;
color: var(--ink) !important;
}
/* The big centred hero text block (.bg_txt) */
main .bg_txt {
font-family: "Fraunces", serif !important;
font-weight: 300 !important;
color: var(--ink) !important;
background: rgba(241, 236, 225, 0.78) !important;
letter-spacing: -.025em;
line-height: 1.1;
}
/* ================================================================
MCENG LOGO — vertically centred in flex header row
================================================================ */
.mc-mceng-logo {
display: flex;
align-items: center;
align-self: center;
flex-shrink: 0;
}
.mc-mceng-logo img {
display: block;
height: 46px;
width: auto;
opacity: .82;
transition: opacity .2s ease;
}
.mc-mceng-logo:hover img { opacity: 1; }
/* ================================================================
NEUTRALISE #navbar RULES FROM desktop.css
The menu module sets id="navbar" on the , which desktop.css
then targets with float:right and margin-top:55px — breaking the
flex header on pages where that module is active.
================================================================ */
header.mc-header #navbar,
header.mc-header ul#navbar,
.mc-nav-links #navbar,
.mc-nav-links ul#navbar {
float: none !important;
margin-top: 0 !important;
margin-right: 0 !important;
position: static !important;
}
/* Also neutralise the moduletable wrapper float inside #navbar */
header.mc-header #navbar > div.moduletable,
.mc-nav-links #navbar > div.moduletable,
.mc-nav-links > div.moduletable {
float: none !important;
margin-right: 0 !important;
}
/* ================================================================
RESTORE ITEM-101 (Home menu item)
style.css hides it with display:none — show it in the new nav
================================================================ */
.mc-nav-links .item-101 {
display: block !important;
}
/* ================================================================
HOMEPAGE ICON BOXES — restyle backgrounds + labels
================================================================ */
/* Centre the icon-box row (CSS :has() as primary, JS as fallback).
Targets whatever element directly wraps the .icon_box columns. */
.frontpage main .row:has(.icon_box),
.frontpage main [class*="col-"]:has(.icon_box) ~ [class*="col-"],
.frontpage main *:has(> .icon_box) {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: flex-start !important;
}
.frontpage main .row:has(.icon_box) > *,
.frontpage main *:has(> .icon_box) > * {
float: none !important;
}
main .icon_box {
background: var(--paper-2) !important;
border: 1px solid var(--rule);
transition: background .2s ease, transform .25s ease;
position: relative;
z-index: 11; /* above the frontpage lattice overlay (z:10) */
}
main .icon_box:hover {
background: var(--paper) !important;
transform: translateY(-2px);
}
main .icon_box p {
font-family: "IBM Plex Mono", monospace !important;
font-size: 14px !important;
font-weight: 400 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: var(--ink-3) !important;
line-height: 1.4 !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
}
main .icon_box p:hover {
text-decoration: none !important;
color: var(--ink) !important;
}
/* ================================================================
NEUTRALISE OLD .logo BACKGROUND-IMAGE RULE (desktop.css)
desktop.css sets background: url(logo_desktop.png) + height:105px
+ float:left on any .logo element. Override it everywhere except
the header link (which uses .mc-logo, not .logo).
================================================================ */
main .logo,
.content .logo,
.moduletable .logo,
footer .logo {
background-image: none !important;
height: auto !important;
float: none !important;
width: auto !important;
margin-top: 0 !important;
}
/* ================================================================
CONTENT IMAGES — keep inline behaviour, just cap their size
(Global img rule above removed display:block to avoid breaking
LinkedIn / partner logos that are used inline)
================================================================ */
main .content img,
main .moduletable img {
max-width: 100%;
height: auto;
}
/* LinkedIn / social icons used inline in module content */
main .moduletable img[src*="linkedin"],
main .moduletable a img {
display: inline-block;
vertical-align: middle;
}
/* ── Dark-mode: LinkedIn "follow us" link is white ─────────────────
The "For more information follow us on" anchor (links to
linkedin.com/company/matcalc-engineering) sits in a module and
inherits the default link/ink colour, which disappears against
the dark-mode greys. Force white in dark mode only — light mode
keeps its default. Selector targets the anchor by href so it
works wherever the link is rendered (footer, sidebar, body).
Includes a :not([data-theme="light"]) + prefers-color-scheme
branch to mirror the dark-mode trigger pattern used elsewhere. */
html[data-theme="dark"] a[href*="linkedin.com/company/matcalc-engineering"],
html[data-theme="dark"] a[href*="linkedin.com/company/matcalc-engineering"]:link,
html[data-theme="dark"] a[href*="linkedin.com/company/matcalc-engineering"]:visited,
html[data-theme="dark"] a[href*="linkedin.com/company/matcalc-engineering"]:hover,
html[data-theme="dark"] a[href*="linkedin.com/company/matcalc-engineering"]:active,
html[data-theme="dark"] a[href*="linkedin.com/company/matcalc-engineering"] * {
color: #FFFFFF !important;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) a[href*="linkedin.com/company/matcalc-engineering"],
html:not([data-theme="light"]) a[href*="linkedin.com/company/matcalc-engineering"]:link,
html:not([data-theme="light"]) a[href*="linkedin.com/company/matcalc-engineering"]:visited,
html:not([data-theme="light"]) a[href*="linkedin.com/company/matcalc-engineering"]:hover,
html:not([data-theme="light"]) a[href*="linkedin.com/company/matcalc-engineering"]:active,
html:not([data-theme="light"]) a[href*="linkedin.com/company/matcalc-engineering"] * {
color: #FFFFFF !important;
}
}
/* ================================================================
HOMEPAGE HEADLINE — replace 16schrift_mc6_hp.png with live text
The image is in a
![]() | inside a Joomla module.
Hide the PNG and inject styled Fraunces text via ::after.
================================================================ */
img[src*="16schrift_mc6_hp"] {
display: none !important;
}
td:has(img[src*="16schrift_mc6_hp"]) br {
display: none;
}
td:has(img[src*="16schrift_mc6_hp"]) {
text-align: center;
padding: 24px 20px 32px;
}
/* Line 1 — display headline matching reference h1.display style */
td:has(img[src*="16schrift_mc6_hp"])::before {
content: "The scientific toolbox";
display: block;
font-family: "Fraunces", serif;
font-weight: 400;
font-size: clamp(34px, 5vw, 72px);
line-height: .96;
letter-spacing: .01em;
font-kerning: none;
font-variation-settings: "opsz" 144, "SOFT" 30;
font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "kern" 0;
color: var(--ink);
text-align: center;
margin-bottom: 16px;
}
/* Lines 2 & 3 — subtitle, wraps naturally after "materials" */
td:has(img[src*="16schrift_mc6_hp"])::after {
content: "for enjoyable computational materials engineering";
display: block;
max-width: 520px;
margin: 0 auto;
font-family: "Fraunces", serif;
font-weight: 400;
font-size: clamp(20px, 2.4vw, 30px);
line-height: 1.25;
letter-spacing: -.02em;
font-variation-settings: "opsz" 72, "SOFT" 20;
color: var(--ink-2);
text-align: center;
}
/* ================================================================
ICON BOX HEXAGONS + HOVER DROPDOWN
Flat-top hexagon: clip-path polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)
Regular flat-top: width / height = 2 / √3 ≈ 1.155
================================================================ */
/* Outer container — no clip (so dropdown can overflow), just positioning.
Uses double-class selector to beat the specificity of "main .icon_box" above. */
main .icon_box.mc-box-expandable,
.mc-box-expandable {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 8px 16px 12px !important;
z-index: 20;
overflow: visible !important;
cursor: default;
transform: none !important;
}
main .icon_box.mc-box-expandable:hover,
.mc-box-expandable:hover,
main .icon_box.mc-box-expandable.mc-panel-open,
.mc-box-expandable.mc-panel-open {
background: transparent !important;
transform: none !important;
z-index: 500; /* float above sibling icon boxes */
}
/* Also neutralise the p-inside-icon_box rule for hex inner content */
main .icon_box.mc-box-expandable .mc-hex-inner > p {
font-family: "IBM Plex Mono", monospace !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
color: var(--ink) !important;
display: block !important;
margin: 0 !important;
text-align: center !important;
}
main .icon_box.mc-box-expandable:hover .mc-hex-inner > p,
main .icon_box.mc-box-expandable.mc-panel-open .mc-hex-inner > p {
color: #7D3226 !important; /* muted warm red */
}
/* ── Main hex dimensions
Flat-top regular hex: w/h = 2/√3 = 1.155
Outer: 200×174px Inner: 192×166px
Height is EVEN (174 not 173) so wrapper's 50% lands on an integer
pixel — see notes on the .mc-box-panel rule below for why this
matters for sub-pixel-stable child placement. Visual ratio 1.149
vs the "perfect" 1.155 is invisible. Override style3.css
"main .icon_box > div { width:100%; height:80% }" with !important ── */
/* Mother hex outer — the ring colour. position:relative so the
::before pseudo-element below can absolute-position over it. */
.mc-hex-outer {
position: relative;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background: var(--rule);
width: 200px !important;
height: 174px !important;
min-width: 200px !important;
min-height: 174px !important;
display: flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.2s;
}
.mc-box-expandable:hover .mc-hex-outer,
.mc-box-expandable.mc-panel-open .mc-hex-outer { background: var(--accent); }
/* Mother hex INNER FILL — drawn as a ::before pseudo-element that
exactly overlays the outer, then UNIFORMLY scaled down. Because
both shapes share the same clip-path and the scale is the same
factor on width AND height, the visible ring is mathematically
uniform on all 6 edges of the hex (apothem difference is
constant for every side at any non-regular outer ratio).
scale(0.9655) ≈ 3 px ring on the 200×174 mother:
ring = (1 − 0.9655) × apothem = 0.0345 × 87 ≈ 3.0 */
.mc-hex-outer::before {
content: "";
position: absolute;
inset: 0;
background: var(--paper-2);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
transform: scale(0.9655);
transform-origin: center center;
z-index: 0;
transition: background 0.2s, transform 0.2s;
}
.mc-box-expandable:hover .mc-hex-outer::before,
.mc-box-expandable.mc-panel-open .mc-hex-outer::before { background: var(--paper); }
/* Mother hex inner — now JUST the content container (icon + title).
No background, no clip-path, no fixed dimensions. Sits on top of
the ::before pseudo via z-index 1. The icon + title are still
centred via flex. */
.mc-hex-inner {
position: relative;
z-index: 1;
background: transparent;
width: 100%;
height: 100%;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
}
/* Support icons — fit inside the larger hex (video_icon included) */
.mc-hex-inner .support_icon,
.mc-hex-inner .download_icon,
.mc-hex-inner .training_icon,
.mc-hex-inner .application_icon,
.mc-hex-inner .video_icon,
.mc-hex-inner [class$="_icon"],
.mc-hex-inner [class*="_icon"] {
width: 72px !important;
height: 72px !important;
min-width: 72px !important;
min-height: 72px !important;
max-width: 72px !important;
max-height: 72px !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
margin: 0 !important;
float: none !important;
flex-shrink: 0;
display: block !important;
}
/* ── Dark-mode mother-hex icons ────────────────────────────────────
The four icons inside the mother hexagons (support / download /
training / application — plus the hidden video tile, included for
completeness) are dark-red (or dark-blue, for pikto_icon) PNGs
defined via `background: url(...)` in style.css / style3.css.
In dark mode they vanish against the layered greys, so we swap
in near-white-grey variants (img/*_dark.png) generated by
preserving the alpha channel and flattening RGB to #DDDDDD.
Light mode is intentionally untouched. Mirrors the dark-mode
trigger pattern used elsewhere in this file:
- explicit override: [data-theme="dark"]
- OS preference: prefers-color-scheme: dark, but ONLY when
the user hasn't explicitly chosen light
Specificity-padded with `html body main` so we beat
`main .icon_box .support_icon { background: url(...) }` in
style.css / style3.css. */
html[data-theme="dark"] body main .icon_box .support_icon,
html[data-theme="dark"] body main .mc-hex-inner .support_icon {
background-image: url(../img/documentation_dark.png) !important;
}
html[data-theme="dark"] body main .icon_box .download_icon,
html[data-theme="dark"] body main .mc-hex-inner .download_icon {
background-image: url(../img/download_dark.png) !important;
}
html[data-theme="dark"] body main .icon_box .training_icon,
html[data-theme="dark"] body main .mc-hex-inner .training_icon {
background-image: url(../img/training2_dark.png) !important;
}
html[data-theme="dark"] body main .icon_box .application_icon,
html[data-theme="dark"] body main .mc-hex-inner .application_icon {
background-image: url(../img/pikto_icon_dark.png) !important;
}
html[data-theme="dark"] body main .icon_box .video_icon,
html[data-theme="dark"] body main .mc-hex-inner .video_icon {
background-image: url(../img/video_icon_dark.png) !important;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) body main .icon_box .support_icon,
html:not([data-theme="light"]) body main .mc-hex-inner .support_icon {
background-image: url(../img/documentation_dark.png) !important;
}
html:not([data-theme="light"]) body main .icon_box .download_icon,
html:not([data-theme="light"]) body main .mc-hex-inner .download_icon {
background-image: url(../img/download_dark.png) !important;
}
html:not([data-theme="light"]) body main .icon_box .training_icon,
html:not([data-theme="light"]) body main .mc-hex-inner .training_icon {
background-image: url(../img/training2_dark.png) !important;
}
html:not([data-theme="light"]) body main .icon_box .application_icon,
html:not([data-theme="light"]) body main .mc-hex-inner .application_icon {
background-image: url(../img/pikto_icon_dark.png) !important;
}
html:not([data-theme="light"]) body main .icon_box .video_icon,
html:not([data-theme="light"]) body main .mc-hex-inner .video_icon {
background-image: url(../img/video_icon_dark.png) !important;
}
}
/* ================================================================
ICON-BOX SUBTREE — STRIP ALL UNDERLINES
The icon_box wrapper is an , and each sub-hex tile is an .
The real culprit is `main .content a:hover { text-decoration:
underline }` in redesign.css (specificity 0,2,2). The icon_boxes
live inside `main .content`, so that rule matches. We beat it
with `html body main` prefix (specificity 0,2,4) and !important.
The JS in index.php ALSO sets `style.textDecoration = 'none'`
inline on every cloned sub-hex anchor as a defense-in-depth
measure no stylesheet can override. */
html body main .icon_box,
html body main .icon_box *,
html body main .icon_box a,
html body main .icon_box a:hover,
html body main .icon_box a:focus,
html body main .icon_box a:active,
html body main .icon_box a:visited,
html body main .mc-box-expandable,
html body main .mc-box-expandable *,
html body main .mc-box-expandable a,
html body main .mc-box-expandable a:hover,
html body main .mc-sub-hex,
html body main .mc-sub-hex *,
html body main .mc-sub-hex a,
html body main .mc-sub-hex a:hover,
html body main .mc-sub-hex a:focus,
html body main .mc-sub-hex-in,
html body main .mc-sub-hex-in *,
html body main .mc-sub-hex-in a,
html body main .mc-sub-hex-in a:hover {
text-decoration: none !important;
text-decoration-line: none !important;
text-underline-offset: 0 !important;
border-bottom: 0 !important;
}
/* Title inside hex */
.mc-hex-inner > p,
main .icon_box.mc-box-expandable .mc-hex-inner > p {
margin: 0 !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .09em !important;
text-transform: uppercase !important;
color: var(--ink) !important;
text-align: center !important;
display: block !important;
height: auto !important;
line-height: 1.3 !important;
transition: color 0.2s;
}
.mc-box-expandable:hover .mc-hex-inner > p,
.mc-box-expandable.mc-panel-open .mc-hex-inner > p { color: #7D3226 !important; font-weight: 700 !important; } /* muted warm red, bold */
/* "explore ▾" hint — hidden */
.mc-box-hint { display: none !important; }
/* ── Hex wrapper — exact mother-hex bounding box, positioning context for panel ──
200×174 is critical: EVEN height ensures top:50% is an integer
pixel (87 instead of 86.5). With odd height, every child in the
ring gets a sub-pixel half-pixel offset baked into its top-left
coordinate (grid_top = 86.5 + shift - 191), which the browser
then anti-aliases or rounds inconsistently across positions,
producing asymmetric "1 px off on this side, fine on that side"
placement at non-integer device-pixel ratios. ── */
.mc-hex-wrapper {
position: relative;
width: 200px !important;
height: 174px !important;
min-width: 200px !important;
min-height: 174px !important;
max-width: 200px !important;
max-height: 174px !important;
flex-shrink: 0 !important;
flex-grow: 0 !important;
flex-basis: 174px !important;
overflow: visible;
/* flex-shrink: 0 alone wasn't enough — the parent .mc-box-expandable
(flex column with limited content height after padding) was still
compressing the wrapper to ~162px, which moved the wrapper's 50%
reference and threw the panel placement off by ~6 px. Lock height
hard with min/max + flex-basis so no flex algorithm can squish it. */
}
/* ── Dropdown panel — centred on the mother hex ──
--mc-panel-shift-y is a manual tuning knob: positive shifts the
entire child cluster DOWN (top child further from top, bottom
child further from bottom-edge of mother). Use when the rendered
wrapper height differs from 173 in a particular browser / Joomla
layout context and the math-perfect centre looks off-axis. ── */
.mc-box-expandable { --mc-panel-shift-y: 0px; }
.mc-box-panel {
position: absolute;
left: 50%;
top: calc(50% + var(--mc-panel-shift-y, 0px));
/* translate3d() instead of translate() promotes the panel to its
own GPU layer — sub-pixel positions get anti-aliased smoothly
instead of integer-rounded inconsistently. will-change tells
the browser to keep the layer composited. */
transform: translate3d(-50%, -50%, 0);
will-change: transform, opacity;
z-index: 200;
background: none;
border: none;
opacity: 0;
pointer-events: none;
/* Opacity-only transition (no scale): the previous scale(0.85)→
scale(1) animation placed every child at a different fractional
position on every animation frame, which is the worst case for
sub-pixel jitter. Pure opacity fade keeps children pinned at
their final pixel position the whole time. */
transition: opacity 0.18s ease;
}
.mc-box-expandable:hover .mc-box-panel,
.mc-box-expandable.mc-panel-open .mc-box-panel {
opacity: 1;
pointer-events: auto;
}
/* ── Sub-item hexagons — absolute-positioned honeycomb cluster ──
JS places each sub-hex at pixel-perfect (left, top) coordinates.
Fill order: centre column first (item 0 = topmost), then left (−1),
right (+1), left (−2) … Max 3 items per column.
Grid div is sized to the cluster; panel centres it on the big hex. ── */
.mc-hex-grid {
position: relative;
overflow: visible;
/* width / height set by JS */
}
/* Sub-hex outer — accent-red at all times. position:relative so
the ::before pseudo can absolute-overlay. */
.mc-sub-hex {
position: absolute;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background: var(--accent);
width: 120px !important;
height: 104px !important;
display: flex !important;
align-items: center;
justify-content: center;
transition: background 0.15s;
cursor: pointer;
}
/* Sub-hex INNER FILL — drawn as ::before pseudo, uniformly scaled.
Same clip-path as the outer + uniform scale = mathematically
uniform ring on all 6 edges.
scale(0.9808) → 1 px ring at rest (52 × (1 − 0.9808) ≈ 1)
scale(0.9423) → 3 px ring on hover (52 × (1 − 0.9423) ≈ 3)
Transitioning `transform` is GPU-cheap (no layout reflow) and
smoother than animating width/height. */
.mc-sub-hex::before {
content: "";
position: absolute;
inset: 0;
background: var(--paper-2);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
transform: scale(0.9808);
transform-origin: center center;
z-index: 0;
transition: transform 0.15s ease, background 0.15s;
}
.mc-sub-hex:hover { background: var(--accent); }
.mc-sub-hex:hover::before { transform: scale(0.9423); }
/* Sub-hex inner — now JUST the content container for the cloned
menu anchor. No background, no clip-path, no fixed size. Sits
on top of ::before via z-index 1. */
.mc-sub-hex-in {
position: relative;
z-index: 1;
background: transparent;
width: 100%;
height: 100%;
display: flex !important;
align-items: center;
justify-content: center;
}
/* ── Mother-page hex — red border ring, links back to the section page ── */
.mc-sub-hex.mc-sub-hex-mother {
background: rgba(168, 32, 23, 0.55);
}
.mc-sub-hex.mc-sub-hex-mother .mc-sub-hex-in {
background: var(--paper);
}
.mc-sub-hex.mc-sub-hex-mother:hover {
background: var(--accent) !important;
}
.mc-sub-hex.mc-sub-hex-mother:hover .mc-sub-hex-in {
background: var(--paper-2) !important;
}
.mc-sub-hex.mc-sub-hex-mother .mc-sub-hex-in a {
color: #7D3226 !important;
font-weight: 700 !important;
}
.mc-sub-hex.mc-sub-hex-mother:hover .mc-sub-hex-in a {
color: var(--ink) !important;
}
/* Sub-hex link text */
.mc-sub-hex-in a,
main .icon_box .mc-sub-hex-in a {
display: block !important;
font-family: "IBM Plex Sans", sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
color: var(--ink) !important;
text-decoration: none !important;
text-align: center !important;
line-height: 1.3 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
padding: 0 10px !important;
width: 100% !important;
white-space: normal !important;
transition: color 0.15s;
}
.mc-sub-hex:hover .mc-sub-hex-in a { color: var(--ink) !important; }