/*
Theme Name: MIM 2000
Theme URI: https://mim2000.cz
Description: MIM 2000 — strategic consulting, technology partnerships. Square identity from Marusankakushikaku.
Version: 1.17.0
Author: zemla.org studio
Text Domain: mim2000
*/
:root {
--c-primary: #0b5c78;
--c-secondary: #0e7a9e;
--c-accent: #1da1c8;
--c-accent-2: #5bc4e0;
--c-bg: #eef6fa;
--c-surface: #f8fcfe;
--c-ink: #0c2535;
--c-ink-2: #1e4258;
--c-ink-3: #4a7a95;
--c-ink-4: #8ab5ca;
--c-ink-5: #cce5f0;
--c-border: #b0d4e4;
--f-body: 'Georgia', serif;
--f-ui: 'Inter', 'Segoe UI', sans-serif;
--f-mono: 'JetBrains Mono', monospace;
--fs-xs: 0.75rem;
--fs-sm: 0.875rem;
--fs-md: 1rem;
--fs-lg: 1.125rem;
--fs-xl: 1.25rem;
--fs-2xl: 1.5rem;
--fs-3xl: 2rem;
--fs-4xl: 2.5rem;
--lh-base: 1.7;
--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
--sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem;
--sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;
--r-sm: 4px; --r-md: 8px; --r-lg: 16px;
--w-content: 680px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: var(--fs-md);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--f-body);
font-size: var(--fs-md);
line-height: var(--lh-base);
color: var(--c-ink);
background: var(--c-bg);
}
a {
color: var(--c-accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--f-ui);
font-weight: 600;
line-height: 1.3;
color: var(--c-primary);
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
p {
margin-bottom: var(--sp-4);
}
ul, ol {
margin-left: var(--sp-6);
margin-bottom: var(--sp-4);
}
li {
margin-bottom: var(--sp-2);
}
button, input, textarea, select {
font-family: inherit;
font-size: inherit;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--sp-6);
}
/* ── Site header ─────────────────────────────────────────────────────── */
.site-header {
background: var(--c-surface);
border-bottom: 2px solid var(--c-primary);
padding: var(--sp-4) 0;
position: sticky; top: 0; z-index: 100;
box-shadow: 0 1px 8px rgba(22,36,86,.07);
}
.site-header__inner {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
}
.site-title {
font-family: var(--f-ui); font-size: var(--fs-xl); font-weight: 700;
color: var(--c-primary); text-decoration: none; letter-spacing: .04em;
}
.site-title::before { content: '■ '; font-size: .7em; opacity: .6; }
.site-nav ul { list-style: none; display: flex; gap: var(--sp-6); }
.site-nav a { font-family: var(--f-ui); font-size: var(--fs-sm); color: var(--c-ink-2); text-decoration: none; }
.site-nav a:hover { color: var(--c-primary); }
.lang-switcher { display: flex; gap: var(--sp-2); }
.lang-switcher { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.lang-btn { font-family: var(--f-ui); font-size: var(--fs-xs); padding: 3px 8px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: none; color: var(--c-ink-3); cursor: pointer; text-decoration: none; }
.lang-btn--active, .lang-btn:hover { background: var(--c-primary); color: white; border-color: var(--c-primary); }
/* Header responsive: stack on narrow screens */
@media (max-width: 600px) {
.site-header__inner {
-webkit-flex-wrap: wrap; flex-wrap: wrap;
gap: var(--sp-2);
}
.site-nav ul { gap: var(--sp-3); -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.site-nav a { font-size: var(--fs-xs); }
}
/* ── Buttons ─────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); border-radius: var(--r-md); font-family: var(--f-ui); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: opacity .15s, transform .1s; }
.btn:hover { opacity: .88; transform: translateY(-1px); }
.btn--primary { background: var(--c-primary); color: white; }
.btn--outline { background: none; border: 1.5px solid var(--c-primary); color: var(--c-primary); }
/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer { background: var(--c-ink); color: var(--c-ink-4); padding: var(--sp-10) 0; margin-top: var(--sp-24); font-family: var(--f-ui); font-size: var(--fs-sm); }
.site-footer a { color: var(--c-ink-4); text-decoration: none; }
.site-footer a:hover { color: var(--c-accent); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-4); }
/* ══════════════════════════════════════════════════════════════════════════
* FRONT PAGE — v1.4.1
* Entity naming convention (fp namespace):
* fp-b-section Body section wrapper
* fp-aozi-stage Three-column horizontal container
* fp-aozi-cs Alpha Omega Zero Infinity Calligraphic Square
* fp-aozi-svg The calligraphic SVG element inside AOZI-CS
* fp-ct-aozi Central Text of AOZI-CS (same font, same size both lines)
* fp-ct-aozi__line--brand "MIM 2000"
* fp-ct-aozi__line--ask Language-specific tagline
* fp-lwfs Left Wing Field of the Square (∞ Vision + 0 History)
* fp-rwfs Right Wing Field of the Square (α Projects + Ω Contacts)
* fp-corner--nw/ne/se/sw Corner symbol links at SVG path vertices
* fp-carousel Rotating thesis carousel (below stage, above footer)
* fp-carousel__slide Individual slide; --active = visible
* fp-nav Mobile-only navigation grid (display:none on desktop)
* fp-nav__item / __symbol / __text / __title / __desc Nav card slots
*
* Desktop layout (>860px):
* [LWFS top-aligned] [AOZI-CS + CT-AOZI centred] [RWFS bottom-aligned]
* fp-carousel centred below
*
* Mobile layout (≤860px): AOZI-CS + fp-nav grid + fp-carousel
*
* Vertex positions (% of 660×660 viewBox):
* NW(∞) left:29.7% top:5.6% NE(α) left:93.8% top:29.5%
* SE(Ω) left:70.3% top:93.9% SW(0) left:6.1% top:70.3%
*
* Safari: 100svh+100vh, -webkit- prefixes, translateZ(0) GPU hint.
* ────────────────────────────────────────────────────────────────────── */
/* ── Outer container ───────────────────────────────────────────────── */
.fp-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
/* no justify-content: center — fp-b-section uses flex:1 to absorb space */
min-height: calc(100vh - 80px);
min-height: calc(100svh - 80px);
padding: var(--sp-6) var(--sp-4) var(--sp-6);
gap: 0;
}
/* ── B Section: flex:1 → fills available height → centres AOZI stage ── */
.fp-b-section {
display: -webkit-flex;
display: flex;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
padding: var(--sp-4) 0;
}
/* ── AOZI Stage: three-column horizontal layout ─────────────────────── */
.fp-aozi-stage {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-justify-content: center;
justify-content: center;
gap: var(--sp-6);
width: 100%;
}
/* ── AOZI-CS: calligraphic square — centre column ───────────────────── */
/* v1.4.1: +10% size across all breakpoints (460→506, etc.) */
.fp-aozi-cs {
position: relative;
width: min(557px, 56vw); /* +10% from 506px — task #6 */
height: min(557px, 56vw);
max-width: 557px;
max-height: 557px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.fp-aozi-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* Safari: GPU compositing for SVG filter */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
/* ── CT-AOZI: central text inside square ───────────────────────────── */
.fp-ct-aozi {
position: absolute;
inset: 0;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
z-index: 1;
pointer-events: none;
/* Buffer from calligraphic stroke (≈ 93/660 × square = ~15% half-stroke) */
padding: 16%;
gap: .4em;
}
/* Both lines: identical font and size (per spec) */
.fp-ct-aozi__line {
font-family: var(--f-ui);
font-size: clamp(.85rem, 1.9vw, 1.15rem);
font-weight: 400;
line-height: 1.35;
letter-spacing: .04em;
color: var(--c-primary);
display: block;
}
.fp-ct-aozi__line--brand {
font-weight: 600;
letter-spacing: .1em;
}
.fp-ct-aozi__line--ask {
color: var(--c-ink-2);
}
/* ── Corner symbols: at SVG path vertices ──────────────────────────── */
.fp-corner {
position: absolute;
z-index: 2;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
text-decoration: none;
/* Centre symbol exactly on vertex */
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: rgba(238,246,250,.72);
-webkit-transition: background .18s, -webkit-transform .18s;
transition: background .18s, transform .18s;
-webkit-tap-highlight-color: transparent;
}
.fp-corner:hover {
background: rgba(238,246,250,.94);
-webkit-transform: translate(-50%, -50%) scale(1.18);
transform: translate(-50%, -50%) scale(1.18);
}
.fp-corner__symbol {
font-size: clamp(1.3rem, 2.6vw, 1.8rem);
color: var(--c-primary);
font-family: var(--f-ui);
font-weight: 400;
line-height: 1;
}
.fp-corner:hover .fp-corner__symbol { color: var(--c-accent); }
/* Vertex coordinates as % of 660 viewBox: */
.fp-corner--nw { top: 5.6%; left: 29.7%; }
.fp-corner--ne { top: 29.5%; left: 93.8%; }
.fp-corner--se { top: 93.9%; left: 70.3%; }
.fp-corner--sw { top: 70.3%; left: 6.1%; }
/* ── LWFS — Left Wing Field: top-aligned to ∞ vertex (flex-start) ─── */
.fp-lwfs,
.fp-rwfs {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
gap: var(--sp-3);
width: 210px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.fp-lwfs { -webkit-justify-content: flex-start; justify-content: flex-start; }
.fp-rwfs { -webkit-justify-content: flex-end; justify-content: flex-end; }
/* ── Nav item — shared by LWFS/RWFS (desktop) and fp-nav (mobile) ─── */
.fp-nav__item {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items: flex-start;
gap: var(--sp-3);
padding: var(--sp-4);
border-radius: var(--r-lg);
text-decoration: none;
color: inherit;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-left: 4px solid var(--c-primary);
-webkit-transition: box-shadow .2s, -webkit-transform .15s;
transition: box-shadow .2s, transform .15s;
-webkit-tap-highlight-color: rgba(11,92,120,.08);
}
.fp-nav__item:hover {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(11,92,120,.1);
text-decoration: none;
}
.fp-nav__symbol {
font-size: clamp(1.2rem, 2vw, 1.5rem);
color: var(--c-primary);
font-family: var(--f-ui);
line-height: 1;
-webkit-flex-shrink: 0;
flex-shrink: 0;
margin-top: .1em;
}
.fp-nav__item:hover .fp-nav__symbol { color: var(--c-accent); }
.fp-nav__text {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
gap: 2px;
}
.fp-nav__title {
font-family: var(--f-ui);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--c-ink);
line-height: 1.3;
}
.fp-nav__desc {
font-size: var(--fs-xs);
color: var(--c-ink-3);
line-height: 1.5;
}
/* ── HMSW25 divider between AOZI stage and motto banner ─────────────── */
.mim-aozi-carousel-divider {
--hmsw-opacity: 0.14;
width: 100%;
max-width: 640px;
margin: var(--sp-3) auto var(--sp-3);
}
/* ── Motto banner — redesigned carousel (HMSW33 borders) ───────────── */
.fp-carousel {
width: 100%;
max-width: 640px;
margin-bottom: var(--sp-5);
border-left: 1px solid rgba(11,92,120,.12);
border-right: 1px solid rgba(11,92,120,.12);
border-top: none;
border-bottom: none;
background: rgba(11,92,120,.02);
overflow: visible;
}
/* HMSW33 borders are rendered as
siblings above/below in front-page.php */
.fp-carousel__inner {
position: relative;
height: 4rem;
}
.fp-carousel__slide {
position: absolute;
inset: 0;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
font-family: var(--f-ui);
font-size: clamp(var(--fs-base), 2vw, var(--fs-xl));
font-weight: 700;
letter-spacing: .09em;
color: var(--c-primary);
text-align: center;
opacity: 0;
padding: 0 var(--sp-6);
-webkit-transition: opacity .7s ease-in-out;
transition: opacity .7s ease-in-out;
pointer-events: none;
}
.fp-carousel__slide--active {
opacity: 1;
pointer-events: auto;
}
/* ── Mobile nav: hidden on desktop ─────────────────────────────────── */
.fp-nav { display: none; }
/* ──────────────────────────────────────────────────────────────────── */
/* RESPONSIVE BREAKPOINTS */
/* ──────────────────────────────────────────────────────────────────── */
/* ≤1060px: tighten sidebars */
@media (max-width: 1060px) {
.fp-aozi-cs {
width: min(440px, 48vw);
height: min(440px, 48vw);
}
.fp-lwfs, .fp-rwfs { width: 185px; }
.fp-aozi-stage { gap: var(--sp-4); }
}
/* ≤860px: collapse to mobile layout (sidebars → fp-nav below) */
@media (max-width: 860px) {
.fp-container {
padding: var(--sp-4) var(--sp-4) var(--sp-4);
min-height: calc(100vh - 60px);
min-height: calc(100svh - 60px);
}
.fp-b-section { padding: var(--sp-2) 0; }
.fp-aozi-stage {
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
gap: 0;
}
.fp-lwfs, .fp-rwfs { display: none; }
.fp-aozi-cs {
width: min(374px, 77vw);
height: min(374px, 77vw);
}
/* Show mobile nav grid */
.fp-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-3);
width: 100%;
max-width: 520px;
margin-top: var(--sp-5);
}
.fp-nav__item {
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
text-align: center;
gap: var(--sp-2);
padding: var(--sp-3);
}
.fp-nav__desc { display: none; }
.fp-nav__symbol { font-size: 1.4rem; }
.fp-nav__title { font-size: var(--fs-sm); }
/* Carousel and divider fit full width on mobile */
.fp-carousel { max-width: 100%; }
.mim-aozi-carousel-divider { max-width: 100%; }
}
/* ≤600px: smaller square, larger corner symbols */
@media (max-width: 600px) {
.fp-aozi-cs {
width: min(308px, 75vw);
height: min(308px, 75vw);
}
.fp-corner { width: 40px; height: 40px; }
.fp-corner__symbol { font-size: 1.25rem; }
.fp-ct-aozi { padding: 18%; }
}
/* ≤480px: single-column nav list, descriptions restored */
@media (max-width: 480px) {
.fp-container { padding: var(--sp-3) var(--sp-3) var(--sp-3); }
.fp-aozi-cs {
width: min(253px, 68vw);
height: min(253px, 68vw);
}
.fp-corner { width: 34px; height: 34px; }
.fp-corner__symbol { font-size: 1.05rem; }
.fp-nav {
grid-template-columns: 1fr;
gap: var(--sp-3);
}
.fp-nav__item {
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
text-align: left;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
border-left-width: 3px;
}
.fp-nav__desc { display: block; }
.fp-nav__title { font-size: var(--fs-sm); }
.fp-nav__symbol { font-size: 1.2rem; }
.fp-carousel__inner { height: 3.4rem; }
}
/* ── Marusankakushikaku widget ────────────────────────────────────── */
.msks-widget { position: fixed; bottom: var(--sp-6); left: var(--sp-6); z-index: 200; background: rgba(255,255,255,.92); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.msks-svg { width: 94px; height: 36px; display: block; }
.msks-widget circle, .msks-widget rect, .msks-widget polygon { transition: fill .2s; }
.msks-link:hover .msks-circle { fill: #1a1a1a; }
.msks-link:hover .msks-square { fill: #0b5c78; }
.msks-link:hover .msks-tri { fill: #8b1a0a; }
/* ── Page / post content ─────────────────────────────────────────────── */
.page-header { padding: var(--sp-16) 0 var(--sp-10); }
.page-symbol { font-size: 4rem; color: var(--c-primary); opacity: .6; display: block; margin-bottom: var(--sp-4); font-family: var(--f-ui); }
.page-header h1 { font-size: clamp(1.6rem, 4vw, var(--fs-4xl)); font-weight: 400; line-height: 1.2; color: var(--c-primary); }
.page-header .page-lead { font-size: var(--fs-lg); color: var(--c-ink-2); margin-top: var(--sp-4); max-width: 560px; }
.post-content { font-size: var(--fs-md); line-height: var(--lh-base); max-width: var(--w-content); }
.post-content h2 { font-size: var(--fs-xl); margin-top: var(--sp-12); margin-bottom: var(--sp-4); color: var(--c-primary); }
.post-content h3 { font-size: var(--fs-lg); margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.post-content p { margin-bottom: var(--sp-4); }
.post-content a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb { font-family: var(--f-ui); font-size: var(--fs-sm); color: var(--c-ink-3); margin-bottom: var(--sp-8); }
.breadcrumb a { color: var(--c-ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-primary); }
/* ── Persona grid (contacts page) ────────────────────────────────────── */
.persona-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-6); margin-top: var(--sp-8); }
.persona-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-6); border-top: 3px solid var(--c-primary); display: flex; flex-direction: column; /* MIM-04 */ }
.persona-card__role { font-family: var(--f-ui); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-accent); margin-bottom: var(--sp-2); }
.persona-card__name { font-family: var(--f-ui); font-size: var(--fs-lg); font-weight: 600; color: var(--c-ink); margin-bottom: var(--sp-3); }
.persona-card__desc { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.6; flex: 1; /* MIM-04 */ }
/* v1.2.2 — featured persona card (has real content) */
.persona-card--featured { border-top-color: var(--c-accent); border-top-width: 4px; }
.persona-card__email { font-family: var(--f-ui); font-size: var(--fs-sm); margin-top: var(--sp-3); }
.persona-card__email a { color: var(--c-primary); text-decoration: none; }
.persona-card__email a:hover { text-decoration: underline; }
.persona-card__photo {
width: 100%; max-height: 240px; object-fit: cover;
border-radius: var(--r-md); margin-bottom: var(--sp-4);
}
/* v1.2.2 — full-width profile card spanning grid */
.persona-profile {
grid-column: 1 / -1;
background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
padding: var(--sp-8); border-left: 4px solid var(--c-primary);
margin-top: var(--sp-4);
}
.persona-profile__header {
display: -webkit-flex; display: flex;
gap: var(--sp-6); -webkit-align-items: flex-start; align-items: flex-start;
margin-bottom: var(--sp-6);
}
.persona-profile__photo {
width: 160px; height: 160px; object-fit: cover; border-radius: var(--r-lg);
-webkit-flex-shrink: 0; flex-shrink: 0;
border: 2px solid var(--c-border);
}
.persona-profile__meta { -webkit-flex: 1; flex: 1; }
.persona-profile__name { font-family: var(--f-ui); font-size: var(--fs-2xl); font-weight: 600; color: var(--c-ink); margin-bottom: var(--sp-1); }
.persona-profile__roles { font-family: var(--f-ui); font-size: var(--fs-sm); color: var(--c-accent); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-2); }
.persona-profile__tagline { font-size: var(--fs-md); color: var(--c-ink-2); line-height: 1.6; margin-bottom: var(--sp-3); }
.persona-profile__body { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.7; }
.persona-profile__body p { margin-bottom: var(--sp-3); }
.persona-profile__domains { margin-top: var(--sp-4); display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: var(--sp-2); }
.persona-profile__domain-tag {
font-family: var(--f-ui); font-size: var(--fs-xs); padding: .2em .7em;
background: rgba(11,92,120,.06); color: var(--c-primary);
border-radius: 99px; border: 1px solid var(--c-border);
}
@media (max-width: 600px) {
.persona-profile__header { -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; text-align: center; }
.persona-profile__photo { width: 120px; height: 120px; }
.persona-profile { padding: var(--sp-5); }
}
/* v1.2.2 — Company info section ─────────────────────────────────────── */
.mim-company-info {
background: var(--c-surface); border: 1px solid var(--c-border);
border-radius: var(--r-lg); padding: var(--sp-6);
border-top: 3px solid var(--c-primary);
margin-top: var(--sp-6);
}
.mim-company-info__title {
font-family: var(--f-ui); font-size: var(--fs-lg); font-weight: 600;
color: var(--c-primary); margin-bottom: var(--sp-4);
}
.mim-company-info__grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--sp-3);
}
.mim-company-info__item { font-size: var(--fs-sm); line-height: 1.6; }
.mim-company-info__label {
font-family: var(--f-ui); font-weight: 600; color: var(--c-ink);
display: block; margin-bottom: .15rem;
}
.mim-company-info__value { color: var(--c-ink-2); }
.mim-company-info__value a { color: var(--c-primary); text-decoration: none; }
.mim-company-info__value a:hover { text-decoration: underline; }
/* ── Section sub-topic grid ──────────────────────────────────────────── */
.mim-subtopic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-6); margin: var(--sp-10) 0; }
.mim-subtopic-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-6) var(--sp-8); border-left: 4px solid var(--c-primary); transition: box-shadow .2s, transform .15s; display: flex; flex-direction: column; /* MIM-04 */ }
.mim-subtopic-card:hover { box-shadow: 0 4px 18px rgba(11,92,120,.09); transform: translateY(-2px); }
.mim-subtopic-card__icon { font-size: 1.8rem; color: var(--c-primary); opacity: .7; display: block; margin-bottom: var(--sp-3); font-family: var(--f-ui); line-height: 1; }
.mim-subtopic-card__title { font-family: var(--f-ui); font-size: var(--fs-lg); font-weight: 600; color: var(--c-ink); margin-bottom: var(--sp-2); min-height: 2.4em; /* MIM-04 */ }
.mim-subtopic-card__desc { font-size: var(--fs-sm); color: var(--c-ink-3); line-height: 1.55; flex: 1; /* MIM-04 */ }
.mim-subtopic-card--placeholder { border-left-color: var(--c-border); opacity: .72; }
.mim-subtopic-card--placeholder .mim-subtopic-card__title::after { content: ' ···'; color: var(--c-ink-4); }
/* Live anchor cards — used as */
a.mim-subtopic-card { display: block; cursor: pointer; }
a.mim-subtopic-card.mim-subtopic-card--live { border-left-color: var(--c-accent); }
a.mim-subtopic-card.mim-subtopic-card--live .mim-subtopic-card__title::after { content: ' ↓'; color: var(--c-accent); font-weight: 400; }
a.mim-subtopic-card:hover { box-shadow: 0 4px 20px rgba(11,92,120,.14); transform: translateY(-3px); }
a.mim-subtopic-card * { pointer-events: none; }
/* ── Section "In preparation" badge ─────────────────────────────────── */
.mim-prep-badge { display: inline-block; font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 2px 8px; margin-left: var(--sp-3); vertical-align: middle; }
/* ── Album / media / video placeholder blocks ───────────────────────── */
.mim-embed-placeholder { border: 2px dashed var(--c-border); border-radius: var(--r-md); min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); color: var(--c-ink-4); font-family: var(--f-ui); font-size: var(--fs-sm); margin: var(--sp-8) 0; text-align: center; padding: var(--sp-8); }
.mim-embed-placeholder__icon { font-size: 2.4rem; opacity: .5; }
.mim-embed-placeholder__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; }
/* ═══════════════════════════════════════════════════════════
MIM2000 v1.2.0 — NEW COMPONENT STYLES
═══════════════════════════════════════════════════════════ */
/* ── Mission badge ──────────────────────────────────────── */
.page-mission-badge {
font-family: var(--f-ui); font-size: var(--fs-xs, .78rem);
color: var(--c-accent, #0b5c78); letter-spacing: .18em;
text-transform: uppercase; margin-top: var(--sp-2);
font-weight: 400; opacity: .8;
}
/* ── Section layout ─────────────────────────────────────── */
.mim-section { margin: var(--sp-14) 0; }
.mim-section__title {
font-family: var(--f-ui); font-size: var(--fs-2xl); font-weight: 600;
color: var(--c-primary); margin-bottom: var(--sp-3);
border-bottom: 2px solid var(--c-primary); padding-bottom: var(--sp-2);
}
.mim-section__lead { color: var(--c-ink-2); font-size: var(--fs-md); margin-bottom: var(--sp-6); max-width: 72ch; }
/* ── Page nav (in-page anchor links) ────────────────────── */
.mim-page-nav, .mim-subsection-nav {
display: flex; flex-wrap: wrap; gap: var(--sp-2);
margin: var(--sp-6) 0; padding: var(--sp-3) 0;
border-bottom: 1px solid var(--c-border);
}
.mim-page-nav a, .mim-subsection-nav a {
font-family: var(--f-ui); font-size: var(--fs-sm);
color: var(--c-primary); text-decoration: none;
padding: var(--sp-1) var(--sp-3);
border: 1px solid var(--c-primary);
border-radius: var(--r-sm, 4px);
transition: background .15s, color .15s;
}
.mim-page-nav a:hover, .mim-subsection-nav a:hover {
background: var(--c-primary); color: #fff;
}
/* ── Alliance grid ──────────────────────────────────────── */
.mim-alliance-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 30%, 340px), 1fr));
gap: var(--sp-5); margin-top: var(--sp-6);
}
.mim-alliance-card {
background: var(--c-surface); border: 1px solid var(--c-border);
border-radius: var(--r-lg); padding: var(--sp-5);
border-left: 4px solid var(--c-secondary);
transition: box-shadow .2s;
display: flex; flex-direction: column; /* MIM-04: card flex */
}
.mim-alliance-card:hover { box-shadow: 0 4px 18px rgba(11,92,120,.09); }
.mim-alliance-card__header { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.mim-alliance-card__icon { font-size: 2rem; color: var(--c-secondary); flex-shrink: 0; line-height: 1.1; }
.mim-alliance-card__title { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); line-height: 1.4; min-height: 2.8em; /* MIM-04: 2-line floor — aligns partner badge across all cards */ }
.mim-alliance-card__partner {
display: inline-block; font-size: var(--fs-xs); font-weight: 700;
color: var(--c-surface); background: var(--c-secondary);
border-radius: var(--r-sm); padding: .1em .55em;
margin-bottom: var(--sp-3); letter-spacing: .03em;
}
.mim-alliance-card__desc {
font-size: var(--fs-sm); color: var(--c-ink); line-height: 1.72; margin-bottom: var(--sp-3);
flex: 1; /* MIM-04 */
display: -webkit-box; -webkit-box-orient: vertical;
-webkit-line-clamp: 5; overflow: hidden;
}
.mim-alliance-card__link, .mim-alliance-card__projects { font-size: var(--fs-sm); }
.mim-alliance-card__projects { margin-top: var(--sp-2); border-top: 1px solid var(--c-border); padding-top: var(--sp-2); }
/* ── Coop grid ──────────────────────────────────────────── */
.mim-coop-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 28%, 320px), 1fr));
gap: var(--sp-5); margin-top: var(--sp-6);
}
.mim-coop-card {
background: var(--c-surface); border: 1px solid var(--c-border);
border-radius: var(--r-lg); padding: var(--sp-5);
display: flex; flex-direction: column; /* MIM-04: universal card flex */
}
.mim-coop-card--featured { border-color: var(--c-primary); border-width: 2px; }
.mim-coop-card__icon { font-size: 1.5rem; color: var(--c-primary); display: block; margin-bottom: var(--sp-2); }
.mim-coop-card__title { font-size: var(--fs-md); font-weight: 700; color: var(--c-ink); margin-bottom: var(--sp-1); }
.mim-coop-card__domain { font-size: var(--fs-xs, .8rem); color: var(--c-primary); letter-spacing: .05em; text-transform: uppercase; margin-bottom: var(--sp-3); min-height: 2.4em; /* MIM-04: 2-line floor — equalises domain tag zone */ }
.mim-coop-card__desc {
font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.6; margin-bottom: var(--sp-3);
flex: 1; /* MIM-04: absorbs variable header height */
display: -webkit-box; -webkit-box-orient: vertical;
-webkit-line-clamp: 5; overflow: hidden; /* MIM-04: cap at 5 lines → uniform row height */
}
/* ── Essay / advisory article ───────────────────────────── */
.mim-essay, .mim-advisory-article {
background: var(--c-surface); border-left: 4px solid var(--c-primary);
padding: var(--sp-6); border-radius: 0 var(--r-md) var(--r-md) 0;
margin: var(--sp-6) 0;
}
.mim-essay__title, .mim-advisory-article__title {
font-size: var(--fs-xl); font-weight: 700; color: var(--c-ink); margin-bottom: var(--sp-2);
}
.mim-essay__attribution { font-size: var(--fs-sm); color: var(--c-ink-3); font-style: italic; margin-bottom: var(--sp-4); }
.mim-essay p, .mim-advisory-article p { margin-bottom: var(--sp-3); line-height: 1.75; color: var(--c-ink-2); }
.mim-advisory-article__sub { font-size: var(--fs-md); font-weight: 600; color: var(--c-primary); margin: var(--sp-5) 0 var(--sp-2); }
.mim-advisory-refs { font-size: var(--fs-xs, .8rem); color: var(--c-ink-3); margin-top: var(--sp-4); }
/* ── Blockquote ─────────────────────────────────────────── */
.mim-blockquote {
border-left: 3px solid var(--c-accent, #0b5c78); margin: var(--sp-4) 0;
padding: var(--sp-3) var(--sp-5); background: rgba(11,92,120,.04);
font-style: italic; color: var(--c-ink); line-height: 1.7;
}
/* ── Project card ───────────────────────────────────────── */
.mim-project-card {
background: var(--c-surface); border: 1px solid var(--c-border);
border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-4);
}
.mim-project-card--construction { border-color: #e5a000; }
.mim-project-card__header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.mim-project-card__icon { font-size: 1.4rem; color: var(--c-primary); }
.mim-project-card__title { font-size: var(--fs-xl); font-weight: 700; color: var(--c-ink); }
.mim-project-card__desc { color: var(--c-ink-2); line-height: 1.7; margin-bottom: var(--sp-2); }
.mim-project-card__note { font-size: var(--fs-sm); color: var(--c-ink-3); font-style: italic; }
/* ── Badges ─────────────────────────────────────────────── */
.mim-badge { display: inline-block; padding: .2em .7em; border-radius: 99px; font-size: var(--fs-xs, .75rem); font-weight: 600; }
.mim-badge--construction { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
/* ── Table ──────────────────────────────────────────────── */
.mim-v-table-wrap { overflow-x: auto; margin: var(--sp-4) 0; }
.mim-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.mim-table th { background: var(--c-primary); color: #fff; padding: var(--sp-2) var(--sp-3); text-align: left; }
.mim-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-border); }
.mim-table tr:nth-child(even) td { background: var(--c-bg-alt, #f8f9fa); }
/* ── History ─────────────────────────────────────────────── */
.mim-history-list { list-style: disc; padding-left: 1.5em; margin: var(--sp-4) 0; }
.mim-history-list li { margin-bottom: var(--sp-3); line-height: 1.75; color: var(--c-ink-2); }
.mim-timeline { position: relative; padding-left: var(--sp-8); margin-top: var(--sp-4); }
.mim-timeline::before { content: ''; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 2px; background: var(--c-primary); opacity: .3; }
.mim-timeline__event { position: relative; margin-bottom: var(--sp-5); }
.mim-timeline__year { display: inline-block; font-family: var(--f-ui); font-weight: 700; color: var(--c-primary); font-size: var(--fs-sm); min-width: 6rem; }
.mim-timeline__desc { color: var(--c-ink-2); line-height: 1.6; margin-top: var(--sp-1); }
.mim-timeline__event::before { content: ''; position: absolute; left: calc(-1 * var(--sp-8) + 2px); top: .4rem; width: 10px; height: 10px; border-radius: 50%; background: var(--c-primary); transform: translateX(-50%); }
/* ── Technology cards ────────────────────────────────────── */
.mim-tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 30%, 320px), 1fr)); gap: var(--sp-5); margin-top: var(--sp-4); }
.mim-tech-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); }
.mim-tech-card__icon { font-size: 2rem; color: var(--c-primary); display: block; margin-bottom: var(--sp-2); }
.mim-tech-card__title { font-size: var(--fs-md); font-weight: 700; color: var(--c-ink); margin-bottom: var(--sp-3); }
.mim-tech-card__text { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.7; }
/* ── External links ─────────────────────────────────────── */
.mim-ext-link { color: var(--c-primary); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
.mim-ext-link:hover { text-decoration: underline; }
/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
.mim-alliance-grid, .mim-coop-grid, .mim-tech-grid { grid-template-columns: 1fr; }
.mim-essay, .mim-advisory-article { padding: var(--sp-4); }
.mim-page-nav, .mim-subsection-nav { gap: var(--sp-1); }
.mim-page-nav a, .mim-subsection-nav a { font-size: .75rem; padding: .3rem .6rem; }
}
/* ═══════════════════════════════════════════════════════════════════
3-FOLD-PATH GRAPHIC ELEMENTS — HMSW / VMSW series (v1.4.2)
Horizontal Motif Strip Width-25 — Sengai □△○ repeating divider
Source: assets/images/HMSW25.svg
═══════════════════════════════════════════════════════════════════ */
:root {
--hmsw-tile-w: 22px; /* mim2000.cz override — compact professional tile */
--hmsw-tile-h: 11px;
--hmsw-opacity: 0.10; /* minimal — clean professional site aesthetic */
}
.hmsw25 {
border: none;
height: var(--hmsw-tile-h);
width: 100%;
background-image: url('assets/images/HMSW25.svg');
background-repeat: repeat-x;
background-size: var(--hmsw-tile-w) var(--hmsw-tile-h);
background-position: center;
opacity: var(--hmsw-opacity);
margin: var(--sp-6) 0;
display: block;
}
.hmsw25--accent {
--hmsw-opacity: 0.20;
--hmsw-tile-w: 30px;
--hmsw-tile-h: 15px;
}
/* HMSW33 — finer 1/33 downscale; carousel-border-only use */
.hmsw33 {
border: none;
height: 8px;
background-image: url('assets/images/HMSW25.svg');
background-repeat: repeat-x;
background-size: 17px 8px;
background-position: center;
opacity: 0.18;
margin: 0;
display: block;
}
.hmsw33--carousel-top { margin-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.hmsw33--carousel-bottom { margin-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm); }
.hmsw-dynamic {
border: none;
height: var(--hmsw-tile-h, 11px);
background-image: url('assets/images/HMSW25.svg');
background-repeat: repeat-x;
background-size: var(--hmsw-tile-w, 22px) var(--hmsw-tile-h, 11px);
background-position: center;
opacity: var(--hmsw-opacity, 0.10);
margin: var(--sp-5) 0;
display: block;
}
.hmsw25-strip::before,
.hmsw25-strip::after {
content: '';
display: block;
height: var(--hmsw-tile-h, 11px);
background-image: url('assets/images/HMSW25.svg');
background-repeat: repeat-x;
background-size: var(--hmsw-tile-w, 22px) var(--hmsw-tile-h, 11px);
background-position: center;
opacity: var(--hmsw-opacity, 0.10);
}
/* ── CEO Personal Blog — /ceo-blog/ ─────────────────────────────── */
.mim-ceo-blog { max-width: 780px; margin: 0 auto; padding: var(--sp-8) var(--sp-4); }
.mim-ceo-blog__header { margin-bottom: var(--sp-8); }
.mim-ceo-blog__title { font-size: var(--fs-2xl); font-weight: 700; color: var(--c-ink); margin-bottom: var(--sp-2); }
.mim-ceo-blog__byline { font-size: var(--fs-sm); color: var(--c-ink-3); letter-spacing: .04em; text-transform: uppercase; }
.mim-ceo-post { margin-bottom: var(--sp-10); border-bottom: 1px solid var(--c-border); padding-bottom: var(--sp-8); }
.mim-ceo-post:last-of-type { border-bottom: none; }
.mim-ceo-post__meta { font-size: var(--fs-sm); color: var(--c-ink-3); margin-bottom: var(--sp-2); letter-spacing: .03em; }
.mim-ceo-post__title { font-size: var(--fs-xl); font-weight: 700; color: var(--c-ink); margin-bottom: var(--sp-4); line-height: 1.3; }
.mim-ceo-post__body { font-size: var(--fs-base); color: var(--c-ink-2); line-height: 1.8; }
.mim-ceo-post__body p { margin-bottom: var(--sp-4); }
.mim-ceo-post__body h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink); margin: var(--sp-6) 0 var(--sp-2); }
.mim-ceo-post__body h4 { font-size: var(--fs-md); font-weight: 700; color: var(--c-ink); margin: var(--sp-4) 0 var(--sp-2); }
.mim-ceo-post__refs { font-size: var(--fs-sm); color: var(--c-ink-3); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px dashed var(--c-border); }
.mim-ceo-post__refs a { color: var(--c-primary); text-decoration: none; }
.mim-ceo-post__refs a:hover { text-decoration: underline; }
/* ══════════════════════════════════════════════════════════════════════
3-FOLD-PATH PAGE BORDERS — VMSW25 series + HMSW25 header/footer dividers
v1.4.3
══════════════════════════════════════════════════════════════════════ */
:root {
--vmsw-tile-w: 13px; /* VMSW25 tile width (320/25) */
--vmsw-tile-h: 21px; /* VMSW25 tile height (530/25) */
--vmsw-opacity: 0.08; /* subtle side lining on professional site */
}
/* Fixed vertical strips — left and right page borders */
.mim-vmsw-left,
.mim-vmsw-right {
position: fixed;
top: 0;
bottom: 0;
width: var(--vmsw-tile-w);
background-image: url('assets/images/VMSW25.svg');
background-repeat: repeat-y;
background-size: var(--vmsw-tile-w) var(--vmsw-tile-h);
background-position: top center;
opacity: var(--vmsw-opacity);
pointer-events: none;
z-index: 9999;
}
.mim-vmsw-left { left: 0; }
.mim-vmsw-right { right: 0; }
/* Header / footer divider overrides */
.mim-header-divider,
.mim-footer-divider {
--hmsw-opacity: 0.18; /* slightly bolder at structural breaks */
--hmsw-tile-w: 24px;
--hmsw-tile-h: 12px;
margin: 0;
}
.mim-footer-divider { margin-bottom: 0; }
/* ══════════════════════════════════════════════════════════════════════
FRIENDS & ADVISORS — 3×3 responsive grid
══════════════════════════════════════════════════════════════════════ */
.mim-friends-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-5);
margin-bottom: var(--sp-12);
}
@media (max-width: 900px) {
.mim-friends-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.mim-friends-grid { grid-template-columns: 1fr; }
}
.mim-friend-card {
background: var(--c-bg-alt);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: var(--sp-5);
display: flex;
flex-direction: column;
gap: var(--sp-2);
transition: border-color .2s, box-shadow .2s;
}
.mim-friend-card:hover {
border-color: var(--c-primary);
box-shadow: 0 2px 12px rgba(11,92,120,.10);
}
.mim-friend-card__tag {
font-size: var(--fs-xs);
font-weight: 700;
color: var(--c-primary);
text-transform: uppercase;
letter-spacing: .06em;
}
.mim-friend-card__name {
font-size: var(--fs-md);
font-weight: 700;
color: var(--c-ink);
margin: 0;
}
.mim-friend-card__desc {
font-size: var(--fs-sm);
color: var(--c-ink-2);
line-height: 1.65;
flex: 1;
}
.mim-friend-card__link {
font-size: var(--fs-sm);
color: var(--c-primary);
text-decoration: none;
font-weight: 600;
margin-top: auto;
display: inline-block;
}
.mim-friend-card__link:hover { text-decoration: underline; }
/* ══════════════════════════════════════════════════════════════════════
CEO / CTO MUGEN SIGN
無限 kanji as clickable personal signature element
══════════════════════════════════════════════════════════════════════ */
.mim-mugen-sign {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
text-decoration: none;
color: inherit;
transition: opacity .25s;
}
.mim-mugen-sign:hover { opacity: .7; }
.mim-mugen-sign__kanji {
font-size: 2.4rem;
line-height: 1;
font-family: 'Hiragino Mincho Pro', 'Yu Mincho', 'MS Mincho', serif;
color: var(--c-primary);
letter-spacing: -.02em;
}
.mim-mugen-sign__label {
font-size: var(--fs-xs);
color: var(--c-ink-3);
text-transform: uppercase;
letter-spacing: .08em;
line-height: 1.4;
}
/* ══════════════════════════════════════════════════════════════════════
TECHNOLOGY PARTNERS — 4-column grid
══════════════════════════════════════════════════════════════════════ */
.mim-partners-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-5);
margin-bottom: var(--sp-10);
}
@media (max-width: 640px) {
.mim-partners-grid { grid-template-columns: 1fr; }
}
.mim-partner-card {
background: var(--c-bg-alt);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: var(--sp-5);
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.mim-partner-card__name {
font-size: var(--fs-lg);
font-weight: 700;
color: var(--c-ink);
}
.mim-partner-card__role {
font-size: var(--fs-xs);
color: var(--c-primary);
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 700;
}
.mim-partner-card__people {
font-size: var(--fs-sm);
color: var(--c-ink-3);
font-style: italic;
}
.mim-partner-card__desc {
font-size: var(--fs-sm);
color: var(--c-ink-2);
line-height: 1.65;
}
.mim-partner-card__link {
font-size: var(--fs-sm);
color: var(--c-primary);
text-decoration: none;
font-weight: 600;
margin-top: auto;
}
.mim-partner-card__link:hover { text-decoration: underline; }
/* ══════════════════════════════════════════════════════════════════════
OUTLINE BUTTON — mim-btn-outline
Used in CEO profile and CTO card for service/blog links
══════════════════════════════════════════════════════════════════════ */
.mim-btn-outline {
display: inline-block;
padding: var(--sp-2) var(--sp-4);
border: 1px solid var(--c-primary);
border-radius: var(--r-sm);
color: var(--c-primary);
font-size: var(--fs-sm);
font-family: var(--f-ui);
font-weight: 600;
text-decoration: none;
letter-spacing: .03em;
transition: background .18s, color .18s;
}
.mim-btn-outline:hover {
background: var(--c-primary);
color: #fff;
}
/* ══════════════════════════════════════════════════════════════════════
MUGEN HERO SIGN — larger variant for CEO blog page header
══════════════════════════════════════════════════════════════════════ */
.mim-mugen-sign--hero {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
cursor: default;
text-decoration: none;
}
.mim-mugen-sign--hero .mim-mugen-sign__kanji {
font-size: 3.8rem;
color: var(--c-primary);
opacity: .72;
font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
line-height: 1;
}
.mim-mugen-sign--profile {
margin-top: var(--sp-3);
}
/* ══════════════════════════════════════════════════════════════════════
FRIENDS MISSION STATEMENT — Bridging the Gaps intro block
══════════════════════════════════════════════════════════════════════ */
.mim-friends-mission {
border-left: 3px solid var(--c-primary);
background: rgba(11, 92, 120, .04);
padding: var(--sp-6);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
/* ══════════════════════════════════════════════════════════════════════
PROJECTS PAGE — v1.5.1
MI-M-T domain wireframe · coop group labels · header-row · crossref
══════════════════════════════════════════════════════════════════════ */
/* ── MI-M-T project card extensions ──────────────────────────────── */
.mim-project-card--active { border-color: var(--c-primary); }
.mi-m-t-arch {
margin: var(--sp-6) 0 var(--sp-4);
padding: var(--sp-4) var(--sp-5);
background: rgba(11,92,120,.04);
border-left: 3px solid var(--c-primary);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.mi-m-t-arch__title {
font-size: var(--fs-sm);
font-family: var(--f-ui);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--c-primary);
font-weight: 700;
margin-bottom: var(--sp-2);
}
.mi-m-t-arch__stack {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-1);
align-items: center;
}
.mi-m-t-stack-tag {
font-family: var(--f-mono, 'Courier New', monospace);
font-size: var(--fs-xs);
background: rgba(11,92,120,.10);
color: var(--c-primary);
padding: 2px 8px;
border-radius: var(--r-sm);
letter-spacing: .03em;
}
.mi-m-t-stack-sep {
color: var(--c-ink-3);
font-size: var(--fs-xs);
}
/* ── Domain grid ──────────────────────────────────────────────────── */
.mi-m-t-domain-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--sp-4);
margin: var(--sp-4) 0 var(--sp-6);
}
.mi-m-t-domain {
border: 1px solid var(--c-border);
border-radius: var(--r-sm);
padding: var(--sp-4);
position: relative;
}
.mi-m-t-domain__label {
font-family: var(--f-ui);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
margin-bottom: var(--sp-2);
padding-bottom: var(--sp-1);
border-bottom: 1px solid var(--c-border);
}
.mi-m-t-domain__entities {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: var(--sp-3);
}
.mi-m-t-domain__entities span {
font-family: var(--f-mono, 'Courier New', monospace);
font-size: 11px;
background: var(--c-surface-2, #f5f5f5);
padding: 1px 6px;
border-radius: 3px;
color: var(--c-ink-2);
}
.mi-m-t-domain__desc {
font-size: var(--fs-sm);
color: var(--c-ink-2);
line-height: 1.55;
margin: 0;
}
/* Domain colour accent on left border */
.mi-m-t-domain--impuls { border-left: 3px solid #0B5C78; }
.mi-m-t-domain--analyticals { border-left: 3px solid #2E7D32; }
.mi-m-t-domain--exec { border-left: 3px solid #D97706; }
.mi-m-t-domain--issues { border-left: 3px solid #8B1A1A; }
.mi-m-t-domain--reporting { border-left: 3px solid #5B21B6; }
.mi-m-t-domain--impuls .mi-m-t-domain__label { color: #0B5C78; }
.mi-m-t-domain--analyticals .mi-m-t-domain__label { color: #2E7D32; }
.mi-m-t-domain--exec .mi-m-t-domain__label { color: #D97706; }
.mi-m-t-domain--issues .mi-m-t-domain__label { color: #8B1A1A; }
.mi-m-t-domain--reporting .mi-m-t-domain__label { color: #5B21B6; }
.mi-m-t-entity-summary {
font-size: var(--fs-sm);
color: var(--c-ink-2);
margin-top: var(--sp-4);
padding-top: var(--sp-4);
border-top: 1px solid var(--c-border);
}
/* ── Cooperations: group labels and header-row ───────────────────── */
.mim-coop-group-label {
font-family: var(--f-ui);
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--c-primary);
margin: var(--sp-6) 0 var(--sp-3);
padding-bottom: var(--sp-1);
border-bottom: 1px solid var(--c-border);
}
.mim-coop-card__header-row {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
margin-bottom: var(--sp-3);
}
.mim-coop-card__header-row .mim-coop-card__icon {
flex-shrink: 0;
margin-bottom: 0;
}
.mim-coop-card__header-row h4.mim-coop-card__title {
margin-bottom: var(--sp-1);
}
/* Research group: 2-column on wider screens */
.mim-coop-grid--research {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* ── Cross-reference note (projects → contacts) ──────────────────── */
.mim-crossref-note {
display: flex;
align-items: baseline;
gap: var(--sp-3);
margin-top: var(--sp-8);
padding: var(--sp-4) var(--sp-5);
border: 1px solid rgba(11,92,120,.20);
border-radius: var(--r-sm);
background: rgba(11,92,120,.03);
font-size: var(--fs-sm);
color: var(--c-ink-2);
}
.mim-crossref-note__icon {
font-size: 1.1rem;
color: var(--c-primary);
flex-shrink: 0;
}
.mim-crossref-note p {
margin: 0;
}
.mim-crossref-note a {
color: var(--c-primary);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── Advisory articles: HMSW divider spacing ────────────────────── */
.mim-advisory-article + .hmsw25 { margin-top: var(--sp-8); }
.hmsw25 + .mim-advisory-article { margin-top: var(--sp-6); }
/* Responsive: collapse domain grid to 2 cols on tablet */
@media (max-width: 700px) {
.mi-m-t-domain-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.mi-m-t-domain-grid { grid-template-columns: 1fr; }
.mim-coop-card__header-row { flex-direction: column; }
}
/* ══════════════════════════════════════════════════════════════════════
v1.5.2 — CEO Blog multilingual redesign
══════════════════════════════════════════════════════════════════════ */
/* Language bar above post listing */
.mim-ceo-blog__lang-bar {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-6);
padding: var(--sp-3) var(--sp-4);
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
flex-wrap: wrap;
}
.mim-ceo-blog__lang-label {
font-family: var(--f-ui);
font-size: var(--fs-xs);
color: var(--c-ink-3);
text-transform: uppercase;
letter-spacing: .06em;
white-space: nowrap;
}
/* Per-post cross-language links footer */
.mim-ceo-post__lang-links {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-top: var(--sp-5);
padding-top: var(--sp-3);
border-top: 1px dashed var(--c-border);
font-size: var(--fs-xs);
color: var(--c-ink-3);
flex-wrap: wrap;
}
.mim-ceo-post__lang-links .lang-link-label {
font-family: var(--f-ui);
text-transform: uppercase;
letter-spacing: .05em;
margin-right: var(--sp-1);
}
.mim-ceo-post__lang-links a {
font-family: var(--f-ui);
font-size: var(--fs-xs);
padding: 2px 7px;
border: 1px solid var(--c-border);
border-radius: var(--r-sm);
color: var(--c-ink-3);
text-decoration: none;
transition: background .15s, color .15s;
}
.mim-ceo-post__lang-links a:hover {
background: var(--c-primary);
color: white;
border-color: var(--c-primary);
}
/* Active lang indicator in post meta */
.mim-ceo-post__lang-badge {
display: inline-block;
font-family: var(--f-ui);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .06em;
padding: 1px 6px;
border-radius: var(--r-sm);
background: var(--c-accent-2);
color: var(--c-ink);
vertical-align: middle;
margin-left: var(--sp-2);
}
/* ══════════════════════════════════════════════════════════════════════
v1.5.3 — MI-M-T Mermaid classDiagram embed
══════════════════════════════════════════════════════════════════════ */
/* Mermaid diagram container */
.mim-mermaid-wrap {
margin-top: var(--sp-8);
padding-top: var(--sp-6);
border-top: 1px solid var(--c-border);
}
.mim-mermaid-wrap__title {
font-family: var(--f-ui);
font-size: var(--fs-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--c-ink-2);
margin-bottom: var(--sp-4);
}
.mim-mermaid-wrap__note {
font-size: var(--fs-xs);
color: var(--c-ink-3);
margin-top: var(--sp-3);
font-style: italic;
}
/* Scrollable mermaid diagram — diagram auto-sizes, but constrain height */
.mim-mermaid-scroll {
overflow-x: auto;
overflow-y: visible;
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: var(--sp-4);
-webkit-overflow-scrolling: touch;
}
.mim-mermaid-scroll .mermaid {
min-width: 700px; /* prevent excessive shrink on narrow viewports */
}
/* Override mermaid default font to match theme */
.mim-mermaid-scroll svg text,
.mim-mermaid-scroll svg .label {
font-family: var(--f-ui) !important;
font-size: 12px !important;
}
/* ══════════════════════════════════════════════════════════════════
v1.5.4 — MI-M-T module chips · Demo subpage UI components
══════════════════════════════════════════════════════════════════ */
/* ── Module chip row in MI-M-T project card ──────────────────── */
.mi-m-t-module-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
margin: var(--sp-4) 0 var(--sp-2);
}
.mi-m-t-module-chip {
font-family: var(--f-mono, 'Courier New', monospace);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--c-primary);
background: rgba(11,92,120,.08);
border: 1px solid rgba(11,92,120,.25);
border-radius: var(--r-sm);
padding: 3px 10px;
text-decoration: none;
transition: background .15s, border-color .15s;
}
.mi-m-t-module-chip:hover {
background: rgba(11,92,120,.16);
border-color: var(--c-primary);
}
.mi-m-t-module-sep {
color: var(--c-ink-3);
font-size: var(--fs-sm);
}
/* Demo link inside domain card */
.mi-m-t-domain__demo-link {
display: inline-block;
margin-top: var(--sp-3);
font-size: var(--fs-xs);
font-weight: 600;
font-family: var(--f-ui);
color: var(--c-primary);
text-decoration: none;
letter-spacing: .03em;
}
.mi-m-t-domain__demo-link:hover { text-decoration: underline; }
/* ── Demo notice banner ───────────────────────────────────────── */
.mim-demo-notice {
display: flex;
align-items: center;
gap: var(--sp-3);
margin: var(--sp-6) 0;
padding: var(--sp-3) var(--sp-5);
background: rgba(11,92,120,.06);
border-left: 3px solid var(--c-accent);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
font-size: var(--fs-sm);
color: var(--c-ink-2);
}
.mim-demo-notice__icon { font-size: 1.1em; flex-shrink: 0; }
/* DEMO tag badge */
.mim-demo-tag {
display: inline-block;
font-family: var(--f-mono, 'Courier New', monospace);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: .1em;
padding: 2px 8px;
background: var(--c-accent);
color: #fff;
border-radius: var(--r-sm);
}
/* ── Module navigation bar ────────────────────────────────────── */
.mim-demo-modnav {
display: flex;
flex-wrap: wrap;
gap: 0;
margin-bottom: var(--sp-8);
border-bottom: 2px solid var(--c-border);
}
.mim-demo-modnav__item {
font-family: var(--f-mono, 'Courier New', monospace);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--c-ink-2);
padding: var(--sp-2) var(--sp-4);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: color .15s, border-color .15s;
}
.mim-demo-modnav__item:hover { color: var(--c-primary); }
.mim-demo-modnav__item.is-active {
color: var(--c-primary);
border-bottom-color: var(--c-primary);
}
/* ── Demo panel container ─────────────────────────────────────── */
.mim-demo-panel {
border: 1px solid var(--c-border);
border-radius: var(--r-md);
overflow: hidden;
margin-bottom: var(--sp-8);
}
/* ── Tab toolbar ──────────────────────────────────────────────── */
.mim-demo-toolbar {
display: flex;
flex-wrap: wrap;
background: rgba(11,92,120,.04);
border-bottom: 1px solid var(--c-border);
gap: 0;
}
.mim-demo-tab {
font-family: var(--f-ui);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--c-ink-2);
background: none;
border: none;
border-bottom: 2px solid transparent;
padding: var(--sp-3) var(--sp-5);
cursor: pointer;
transition: color .15s, border-color .15s;
white-space: nowrap;
}
.mim-demo-tab:hover { color: var(--c-primary); }
.mim-demo-tab.is-active {
color: var(--c-primary);
border-bottom-color: var(--c-primary);
background: rgba(11,92,120,.06);
}
.mim-demo-count {
display: inline-block;
font-size: 11px;
font-weight: 700;
background: var(--c-accent);
color: #fff;
border-radius: 10px;
padding: 0 6px;
margin-left: var(--sp-1);
}
/* ── Pane content ─────────────────────────────────────────────── */
.mim-demo-pane { display: none; padding: var(--sp-5); }
.mim-demo-pane.is-active { display: block; }
.mim-demo-pane__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--c-border);
}
.mim-demo-pane__label { font-size: var(--fs-sm); color: var(--c-ink-2); }
/* ── Data table ───────────────────────────────────────────────── */
.mim-demo-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mim-demo-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.mim-demo-table th {
text-align: left;
font-family: var(--f-ui);
font-size: var(--fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--c-ink-2);
padding: var(--sp-2) var(--sp-3);
border-bottom: 2px solid var(--c-border);
white-space: nowrap;
}
.mim-demo-table td {
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--c-border);
vertical-align: middle;
}
.mim-demo-table tbody tr:hover { background: rgba(11,92,120,.03); }
/* ── Buttons ──────────────────────────────────────────────────── */
.mim-demo-btn {
font-family: var(--f-ui);
font-size: var(--fs-sm);
font-weight: 600;
padding: var(--sp-2) var(--sp-4);
border-radius: var(--r-sm);
border: none;
cursor: pointer;
transition: background .15s;
}
.mim-demo-btn:disabled { opacity: .45; cursor: default; }
.mim-demo-btn--ghost {
background: none;
border: 1px solid var(--c-border);
color: var(--c-ink-2);
}
.mim-demo-btn--ghost:hover:not(:disabled) { background: var(--c-surface-2, #f5f5f5); }
.mim-demo-btn--primary {
background: var(--c-primary);
color: #fff;
}
.mim-demo-btn--primary:hover:not(:disabled) { background: var(--c-secondary); }
/* ── Inline code monospace ────────────────────────────────────── */
.mim-demo-code {
font-family: var(--f-mono, 'Courier New', monospace);
font-size: .85em;
background: rgba(11,92,120,.08);
color: var(--c-primary);
padding: 1px 5px;
border-radius: 3px;
}
/* ── Demo link (tab-switching anchor) ────────────────────────── */
.mim-demo-link {
color: var(--c-primary);
font-size: var(--fs-sm);
text-decoration: none;
font-weight: 600;
cursor: pointer;
}
.mim-demo-link:hover { text-decoration: underline; }
/* ── Status / severity badges ─────────────────────────────────── */
.mim-demo-badge {
display: inline-block;
font-family: var(--f-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
padding: 2px 7px;
border-radius: 3px;
white-space: nowrap;
}
.mim-demo-badge--pass { background: #dcfce7; color: #166534; }
.mim-demo-badge--fail { background: #fee2e2; color: #991b1b; }
.mim-demo-badge--blocked { background: #fef9c3; color: #854d0e; }
.mim-demo-badge--not-run { background: #f3f4f6; color: #374151; }
.mim-demo-badge--in-progress { background: rgba(11,92,120,.12); color: var(--c-primary); }
.mim-demo-badge--in-review { background: #ede9fe; color: #5b21b6; }
.mim-demo-badge--open { background: #fee2e2; color: #991b1b; }
.mim-demo-badge--critical { background: #7f1d1d; color: #fff; }
.mim-demo-badge--high { background: #fee2e2; color: #991b1b; }
.mim-demo-badge--medium { background: #fef9c3; color: #854d0e; }
.mim-demo-badge--low { background: #dcfce7; color: #166534; }
.mim-demo-badge--neutral { background: var(--c-surface-2, #f5f5f5); color: var(--c-ink-2); }
.mim-demo-badge--strategy { background: rgba(11,92,120,.12); color: var(--c-primary); font-size: 10px; }
.mim-demo-badge--type-api { background: #ede9fe; color: #5b21b6; }
.mim-demo-badge--type-batch { background: rgba(11,92,120,.1); color: var(--c-primary); }
.mim-demo-badge--type-integration { background: #dcfce7; color: #166534; }
/* ── TestSet cards ────────────────────────────────────────────── */
.mim-demo-set-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--sp-4);
}
.mim-demo-set-card {
border: 1px solid var(--c-border);
border-radius: var(--r-sm);
padding: var(--sp-4);
}
.mim-demo-set-card__header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
}
.mim-demo-set-card__scope { font-size: var(--fs-xs); color: var(--c-ink-2); margin-bottom: var(--sp-3); }
.mim-demo-set-card__stats { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-3); margin-bottom: var(--sp-3); }
/* Progress bar */
.mim-demo-progress-bar {
height: 6px;
background: var(--c-border);
border-radius: 3px;
overflow: hidden;
}
.mim-demo-progress-bar__inner {
height: 100%;
background: var(--c-primary);
border-radius: 3px;
transition: width .4s;
}
/* ── Environment vars table ───────────────────────────────────── */
.mim-demo-env-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--sp-5);
}
.mim-demo-env-card {
border: 1px solid var(--c-border);
border-radius: var(--r-sm);
overflow: hidden;
}
.mim-demo-env-card__header {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
background: rgba(11,92,120,.04);
border-bottom: 1px solid var(--c-border);
}
.mim-demo-env-vars {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-xs);
font-family: var(--f-mono, 'Courier New', monospace);
}
.mim-demo-env-vars th {
text-align: left;
padding: var(--sp-1) var(--sp-3);
background: rgba(11,92,120,.04);
border-bottom: 1px solid var(--c-border);
font-family: var(--f-ui);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--c-ink-2);
}
.mim-demo-env-vars td {
padding: var(--sp-1) var(--sp-3);
border-bottom: 1px solid var(--c-border);
}
.mim-demo-env-vars tr:last-child td { border-bottom: none; }
/* ── Schema card (TestDataClass) ──────────────────────────────── */
.mim-demo-dataclass-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--sp-4);
}
.mim-demo-schema-card {
border: 1px solid var(--c-border);
border-radius: var(--r-sm);
overflow: hidden;
}
.mim-demo-schema-card__header {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-4);
background: rgba(11,92,120,.04);
border-bottom: 1px solid var(--c-border);
font-size: var(--fs-sm);
}
.mim-demo-schema {
margin: 0;
padding: var(--sp-4);
font-family: var(--f-mono, 'Courier New', monospace);
font-size: 12px;
line-height: 1.6;
color: var(--c-ink-1);
white-space: pre-wrap;
background: var(--c-bg);
}
/* ── Metric grid (projectreport dashboard) ────────────────────── */
.mim-demo-metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
gap: var(--sp-3);
margin-bottom: var(--sp-5);
}
.mim-demo-metric {
text-align: center;
padding: var(--sp-4);
border: 1px solid var(--c-border);
border-radius: var(--r-sm);
background: var(--c-bg);
}
.mim-demo-metric__value {
font-family: var(--f-display, serif);
font-size: 2rem;
font-weight: 700;
line-height: 1;
margin-bottom: var(--sp-1);
}
.mim-demo-metric__label {
font-family: var(--f-ui);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--c-ink-3);
}
/* Result distribution bar */
.mim-demo-distbar {
display: flex;
height: 10px;
border-radius: 5px;
overflow: hidden;
margin-bottom: var(--sp-2);
}
.mim-demo-distbar__seg { height: 100%; }
.mim-demo-distbar__legend {
display: flex;
gap: var(--sp-5);
font-size: var(--fs-xs);
font-family: var(--f-ui);
font-weight: 600;
margin-bottom: var(--sp-5);
}
/* Issue row in dashboard */
.mim-demo-dashboard-issues {}
.mim-demo-issue-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-3);
padding: var(--sp-2) 0;
border-bottom: 1px solid var(--c-border);
font-size: var(--fs-sm);
}
.mim-demo-issue-row:last-child { border-bottom: none; }
/* Report card */
.mim-demo-report-card {
border: 1px solid var(--c-border);
border-radius: var(--r-sm);
padding: var(--sp-5);
}
.mim-demo-report-card__header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
}
.mim-demo-report-card__meta {
font-size: var(--fs-xs);
color: var(--c-ink-2);
margin-bottom: var(--sp-3);
}
.mim-demo-report-card__summary {
font-size: var(--fs-sm);
color: var(--c-ink-1);
line-height: 1.6;
}
/* ── Domain entity reference footer ──────────────────────────── */
.mim-demo-domain-ref {
margin-top: var(--sp-8);
padding-top: var(--sp-6);
border-top: 1px solid var(--c-border);
}
.mim-demo-domain-ref__title {
font-family: var(--f-ui);
font-size: var(--fs-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--c-ink-2);
margin-bottom: var(--sp-3);
}
.mim-demo-entity-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
}
.mim-demo-entity-chip {
font-family: var(--f-mono, 'Courier New', monospace);
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 3px;
}
.mim-demo-entity-chip--impuls { background: rgba(11,92,120,.1); color: #0B5C78; }
.mim-demo-entity-chip--analyticals { background: rgba(46,125,50,.1); color: #2E7D32; }
.mim-demo-entity-chip--exec { background: rgba(217,119,6,.1); color: #D97706; }
.mim-demo-entity-chip--issues { background: rgba(139,26,26,.1); color: #8B1A1A; }
.mim-demo-entity-chip--reporting { background: rgba(91,33,182,.1); color: #5B21B6; }
.mim-demo-chain-arrow {
font-size: var(--fs-xs);
color: var(--c-ink-3);
white-space: nowrap;
}
/* Responsive */
@media (max-width: 600px) {
.mim-demo-modnav { gap: 0; overflow-x: auto; flex-wrap: nowrap; }
.mim-demo-metric-grid { grid-template-columns: repeat(3, 1fr); }
.mim-demo-entity-row { gap: var(--sp-1); }
}
/* ── A-F1-01 PORT — Noto Serif JP activation (v1.5.5) ───────────────────
Ported from zemla-theme v1.6.1.
.lang-ja body class (mim_body_lang_class filter) activates font for
cookie-based JA locale; :lang(ja) activates when
(mim_html_lang_attribute filter). Both selectors required for full
cross-browser coverage.
─────────────────────────────────────────────────────────────────────── */
.lang-ja,
:lang(ja) {
font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
}
/* ================================================================
mim2000 v1.7.0 — DESIGN-MIM-01
AOZI shape: slow 3D clockwise rotation + center topic cycling
================================================================ */
/* Slight perspective on container gives depth to the Y-wobble */
.fp-aozi-cs { perspective: 1000px; }
/* SVG-only rotation — corners + CT-AOZI stay stationary */
@keyframes fp-aozi-rotate3d {
0% { transform: rotate( 0deg) rotateY( 0deg); }
25% { transform: rotate( 90deg) rotateY( 8deg); }
50% { transform: rotate(180deg) rotateY( 0deg); }
75% { transform: rotate(270deg) rotateY( -8deg); }
100% { transform: rotate(360deg) rotateY( 0deg); }
}
.fp-aozi-svg {
animation: fp-aozi-rotate3d 32s linear infinite;
transform-origin: 50% 50%;
will-change: transform;
/* Safari GPU layer */
-webkit-animation: fp-aozi-rotate3d 32s linear infinite;
-webkit-transform-origin: 50% 50%;
}
/* Topic cycle container — replaces static tagline */
.fp-ct-topics {
position: relative;
height: 1.55em;
width: 100%;
overflow: hidden;
}
.fp-ct-topic {
position: absolute;
inset: 0;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
font-family: var(--f-ui);
font-size: clamp(.82rem, 1.8vw, 1.1rem);
font-weight: 500;
letter-spacing: .06em;
color: var(--c-ink-2);
opacity: 0;
-webkit-transition: opacity .65s ease-in-out;
transition: opacity .65s ease-in-out;
pointer-events: none;
text-align: center;
}
.fp-ct-topic--active {
opacity: 1;
pointer-events: auto;
}
/* Reduce motion: disable rotation, keep static first topic */
@media (prefers-reduced-motion: reduce) {
.fp-aozi-svg { animation: none; -webkit-animation: none; }
.fp-ct-topic { transition: none; }
}
/* ================================================================
mim2000 v1.8.0 — DESIGN-MIM-01 revision 2
Wrap-level rotation: .fp-aozi-cs rotates, corners + center
counter-rotate to stay upright while orbiting.
Sandstone 3D in SVG. 45s rotation. Corners repositioned 30%
toward geometric centre (330,330 in 660×660 viewBox).
================================================================ */
/* ── Cancel v1.7.x SVG-only rotation ───────────────────────────── */
.fp-aozi-svg {
animation: none !important;
-webkit-animation: none !important;
transform: none;
will-change: auto;
}
/* Cancel v1.7.0 perspective on cs (now in keyframe fn) */
.fp-aozi-cs { perspective: none; }
/* ── Keyframe: whole AOZI-CS clockwise rotation + Y-wobble ─────── */
@keyframes fp-cs-rotate {
0% { transform: perspective(1000px) rotate( 0deg) rotateY( 0deg); }
25% { transform: perspective(1000px) rotate( 90deg) rotateY( 8deg); }
50% { transform: perspective(1000px) rotate(180deg) rotateY( 0deg); }
75% { transform: perspective(1000px) rotate(270deg) rotateY( -8deg); }
100% { transform: perspective(1000px) rotate(360deg) rotateY( 0deg); }
}
/* ── Keyframe: corner counter-rotation (bakes translate centering) */
@keyframes fp-corner-counter {
0% { transform: translate(-50%,-50%) rotate( 0deg); }
25% { transform: translate(-50%,-50%) rotate(-90deg); }
50% { transform: translate(-50%,-50%) rotate(-180deg); }
75% { transform: translate(-50%,-50%) rotate(-270deg); }
100% { transform: translate(-50%,-50%) rotate(-360deg); }
}
/* ── Keyframe: CT-AOZI counter-rotation (inset:0 overlay, no translate) */
@keyframes fp-ct-counter {
0% { transform: rotate( 0deg); }
25% { transform: rotate(-90deg); }
50% { transform: rotate(-180deg); }
75% { transform: rotate(-270deg); }
100% { transform: rotate(-360deg); }
}
/* ── Apply animations ───────────────────────────────────────────── */
.fp-aozi-cs {
animation: fp-cs-rotate 45s linear infinite;
transform-origin: 50% 50%;
will-change: transform;
-webkit-animation: fp-cs-rotate 45s linear infinite;
}
/* Corners orbit vertices — counter-rotate to keep symbols upright */
.fp-corner {
animation: fp-corner-counter 45s linear infinite;
transform-origin: 50% 50%;
-webkit-animation: fp-corner-counter 45s linear infinite;
}
/* Central text block stays upright */
.fp-ct-aozi {
animation: fp-ct-counter 45s linear infinite;
transform-origin: 50% 50%;
-webkit-animation: fp-ct-counter 45s linear infinite;
}
/* ── Corner positions — 30% toward centre (330,330 in 660 vB) ─── */
/* NW(196,40)→(236,127) NE(621,196)→(534,236) */
/* SE(465,623)→(424,535) SW(38,466)→(126,425) */
.fp-corner--nw { top: 19.2%; left: 35.8%; }
.fp-corner--ne { top: 35.8%; left: 80.9%; }
.fp-corner--se { top: 81.1%; left: 64.2%; }
.fp-corner--sw { top: 64.4%; left: 19.1%; }
/* ── Reduce motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.fp-aozi-cs { animation: none; -webkit-animation: none; }
.fp-corner { animation: none; -webkit-animation: none;
transform: translate(-50%,-50%); }
.fp-ct-aozi { animation: none; -webkit-animation: none; }
}
/* ================================================================
Seed Page Template — shared across zemla / mim2000 / bodyterapie
================================================================ */
.seed-page {
max-width: var(--w-content, 72ch);
margin-left: auto;
margin-right: auto;
padding: var(--sp-12, 3rem) var(--sp-6, 1.5rem) var(--sp-24, 6rem);
}
.seed-header {
text-align: center;
margin-bottom: var(--sp-16, 4rem);
}
.seed-symbol {
font-size: clamp(2.4rem, 5vw, 4rem);
color: var(--c-primary);
line-height: 1;
margin-bottom: var(--sp-4, 1rem);
font-family: var(--f-ui);
font-weight: 300;
}
.seed-title {
font-size: clamp(1.55rem, 3.5vw, 2.4rem);
font-weight: 700;
color: var(--c-ink);
margin-bottom: var(--sp-4, 1rem);
line-height: 1.2;
}
.seed-lead {
font-size: var(--fs-md, 1rem);
color: var(--c-ink-2);
max-width: 52ch;
margin: 0 auto var(--sp-6, 1.5rem);
line-height: 1.68;
}
.seed-badge {
display: inline-block;
font-family: var(--f-ui);
font-size: .72rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
padding: 3px 12px;
border-radius: var(--r-sm, 4px);
}
.seed-badge--seed { background: rgba(11,92,120,.07); color: var(--c-primary); border: 1px solid rgba(11,92,120,.2); }
.seed-badge--growing { background: rgba(40,140,40,.07); color: #256f25; border: 1px solid rgba(40,140,40,.2); }
.seed-badge--mature { background: rgba(130,88,0,.07); color: #6a4800; border: 1px solid rgba(130,88,0,.2); }
/* ── Body content area ──────────────────────────────────────────── */
.seed-body { margin-bottom: var(--sp-16, 4rem); }
.seed-body p,
.seed-body li { line-height: 1.75; }
/* Gutenberg video/iframe embeds — responsive 16:9 */
.seed-body .wp-block-embed__wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: var(--r-md, 8px);
}
.seed-body .wp-block-embed__wrapper iframe,
.seed-body .wp-block-embed__wrapper video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Image blocks */
.seed-body .wp-block-image img {
max-width: 100%;
height: auto;
border-radius: var(--r-md, 8px);
display: block;
}
.seed-body .wp-block-image figcaption {
font-size: var(--fs-xs, .8rem);
color: var(--c-ink-3);
text-align: center;
margin-top: var(--sp-2, .5rem);
}
/* Audio block */
.seed-body .wp-block-audio audio {
width: 100%;
border-radius: var(--r-sm, 4px);
}
/* Table block */
.seed-body table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm, .875rem);
margin: var(--sp-6, 1.5rem) 0;
}
.seed-body th,
.seed-body td {
padding: var(--sp-2, .5rem) var(--sp-4, 1rem);
border: 1px solid var(--c-border);
text-align: left;
vertical-align: top;
}
.seed-body th {
background: var(--c-surface);
font-weight: 600;
color: var(--c-ink);
}
/* Cross-site reference block styling (use .wp-block-group with class) */
.seed-xref-block {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-left: 4px solid var(--c-primary);
border-radius: var(--r-md, 8px);
padding: var(--sp-5, 1.25rem) var(--sp-6, 1.5rem);
margin: var(--sp-8, 2rem) 0;
font-size: var(--fs-sm, .875rem);
}
.seed-xref-block p { margin: 0 0 var(--sp-2, .5rem); color: var(--c-ink-2); }
.seed-xref-block a { color: var(--c-primary); font-weight: 500; }
/* Back navigation */
.seed-back-nav {
text-align: center;
margin-top: var(--sp-16, 4rem);
padding-top: var(--sp-8, 2rem);
border-top: 1px solid var(--c-border);
}
.seed-back-nav a {
color: var(--c-accent);
font-size: var(--fs-sm, .875rem);
text-decoration: none;
font-family: var(--f-ui);
}
.seed-back-nav a:hover { text-decoration: underline; }
/* ================================================================
mim2000 v1.9.0 — DESIGN-MIM-01 revision 2
Corner symbols carved ON the stone at SVG path vertices.
Restore vertex positions (cancel v1.8.0 30%-inward shift).
Remove circle bubble — transparent background.
Enlarge symbols, add calligraphic carved text-shadow.
================================================================ */
/* ── Cancel v1.8.0 circle background — transparent now ─────────── */
.fp-corner {
background: transparent !important;
-webkit-transition: none;
transition: none;
}
.fp-corner:hover {
background: transparent !important;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
/* ── Restore to SVG path vertex coordinates ─────────────────────── */
/* viewBox 660×660: NW(196,40) NE(622,196) SE(465,623) SW(38,466) */
/* rendered at 660×660px — percentages of that container */
.fp-corner--nw { top: 5.6%; left: 29.7%; }
.fp-corner--ne { top: 29.5%; left: 93.8%; }
.fp-corner--se { top: 93.9%; left: 70.3%; }
.fp-corner--sw { top: 70.3%; left: 6.1%; }
/* ── Carved symbol — large, dark, manual-chisel shadow ──────────── */
.fp-corner__symbol {
font-size: clamp(2.4rem, 4.8vw, 3.4rem);
color: rgba(3,12,18,0.82);
font-family: var(--f-ui);
font-weight: 700;
line-height: 1;
/* Carved depth: inner shadow + subtle light reflection on top edge */
text-shadow:
1px 2px 4px rgba(0,0,0,0.58),
2px 3px 6px rgba(0,0,0,0.32),
-1px -1px 2px rgba(255,255,255,0.14);
-webkit-text-stroke: 0.5px rgba(0,0,0,0.28);
}
.fp-corner:hover .fp-corner__symbol {
color: rgba(3,12,18,0.95);
text-shadow:
1px 2px 5px rgba(0,0,0,0.65),
2px 4px 8px rgba(0,0,0,0.38),
-1px -1px 2px rgba(255,255,255,0.18);
}
/* ================================================================
mim2000 v1.9.0 — mobile / iOS Safari refinement
rotateY wobble in fp-cs-rotate uncompensated by corner
counter-rotation → corner symbols drift on iOS Safari.
Switch to pure 2D rotation throughout.
fp-aozi-cs already fluid (min(557px,56vw)) — no wrap fix needed.
================================================================ */
/* ── Pure 2D CS rotation — replaces 3D wobble definition ────────── */
@keyframes fp-cs-rotate {
from { transform: rotate( 0deg); }
to { transform: rotate(360deg); }
}
@-webkit-keyframes fp-cs-rotate {
from { -webkit-transform: rotate( 0deg); transform: rotate( 0deg); }
to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/* ── -webkit- prefixed counter-rotation (older Safari compat) ───── */
@-webkit-keyframes fp-corner-counter {
0% { -webkit-transform: translate(-50%,-50%) rotate( 0deg); transform: translate(-50%,-50%) rotate( 0deg); }
25% { -webkit-transform: translate(-50%,-50%) rotate( -90deg); transform: translate(-50%,-50%) rotate( -90deg); }
50% { -webkit-transform: translate(-50%,-50%) rotate(-180deg); transform: translate(-50%,-50%) rotate(-180deg); }
75% { -webkit-transform: translate(-50%,-50%) rotate(-270deg); transform: translate(-50%,-50%) rotate(-270deg); }
100% { -webkit-transform: translate(-50%,-50%) rotate(-360deg); transform: translate(-50%,-50%) rotate(-360deg); }
}
@-webkit-keyframes fp-ct-counter {
0% { -webkit-transform: rotate( 0deg); transform: rotate( 0deg); }
25% { -webkit-transform: rotate( -90deg); transform: rotate( -90deg); }
50% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
75% { -webkit-transform: rotate(-270deg); transform: rotate(-270deg); }
100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}
/* ── Re-apply animations with -webkit- prefix ────────────────────── */
.fp-aozi-cs {
-webkit-animation: fp-cs-rotate 45s linear infinite;
animation: fp-cs-rotate 45s linear infinite;
}
.fp-corner {
-webkit-animation: fp-corner-counter 45s linear infinite;
animation: fp-corner-counter 45s linear infinite;
}
.fp-ct-aozi {
-webkit-animation: fp-ct-counter 45s linear infinite;
animation: fp-ct-counter 45s linear infinite;
}
/* ── Carved symbol size — scale down at mobile ───────────────────── */
@media (max-width: 480px) {
.fp-corner__symbol {
font-size: clamp(1.6rem, 5vw, 2.2rem);
}
}
/* ── Reduce motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.fp-aozi-cs { animation: none; -webkit-animation: none; }
.fp-corner { animation: none; -webkit-animation: none;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%); }
.fp-ct-aozi { animation: none; -webkit-animation: none; }
}
/* ================================================================
mim2000 v1.9.1 — azure symbols + Ω↔0 swap (CSS comment only)
Dual-layer SVG applied in PHP (sandstone-sq + brushstone-sq).
Symbol colour: azure #1a7a9a matching bodyterapie 3-fold-path.
================================================================ */
/* ── Symbol colour: azure carved, same palette as bodyterapie ──── */
.fp-corner__symbol {
color: #1a7a9a !important;
text-shadow:
1px 2px 4px rgba(0,0,0,0.50),
2px 3px 6px rgba(0,0,0,0.28),
-1px -1px 2px rgba(255,255,255,0.18) !important;
-webkit-text-stroke: 0.4px rgba(0,50,70,0.35);
}
.fp-corner:hover .fp-corner__symbol {
color: #0d5e78 !important;
}
/* ── Fine-tune: corner centering already at vertex % — restate ── */
/* (Ensures later mobile block doesn't override with wrong values) */
.fp-corner--nw { top: 5.6%; left: 29.7%; }
.fp-corner--ne { top: 29.5%; left: 93.8%; }
.fp-corner--se { top: 93.9%; left: 70.3%; }
.fp-corner--sw { top: 70.3%; left: 6.1%; }
/* ═══════════════════════════════════════════════════════════════════════════
Projects & Services Alpha — mim2000-theme v1.10.0
Scope: page-templates/page-projects-services.php (.ps-* namespace)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Page header ─────────────────────────────────────────────────────────── */
.ps-page-header h1 {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.4em;
}
.ps-alpha-badge {
display: inline-block;
padding: 0.15em 0.5em;
font-size: 0.55em;
font-weight: 500;
background: #e8eef4;
color: #5a7796;
border-radius: 3px;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.6;
}
/* ── Card grid ───────────────────────────────────────────────────────────── */
.ps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
margin: var(--space-lg) 0;
}
/* ── Individual card ─────────────────────────────────────────────────────── */
.ps-card {
padding: var(--space-lg);
background: #fafbfc;
border: 1px solid #e1e7ee;
border-radius: 6px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
display: flex;
flex-direction: column;
}
.ps-card:hover {
border-color: var(--mim2000-azure, #2c5f8b);
box-shadow: 0 2px 8px rgba(44, 95, 139, 0.08);
}
.ps-card--coming-soon {
opacity: 0.72;
}
.ps-card--coming-soon:hover {
border-color: #c0ccd8;
box-shadow: none;
}
/* ── Card icon ───────────────────────────────────────────────────────────── */
.ps-card-icon {
display: block;
margin-bottom: var(--space-md);
flex-shrink: 0;
}
/* ── Coming-soon badge ───────────────────────────────────────────────────── */
.ps-badge {
display: inline-block;
margin-bottom: 0.75rem;
padding: 0.2em 0.6em;
font-size: 0.75rem;
font-weight: 500;
border-radius: 3px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.ps-badge--soon {
background: #f0f4f8;
color: #7a94a8;
border: 1px solid #d0dce8;
}
/* ── Card typography ─────────────────────────────────────────────────────── */
.ps-card__title {
font-size: 1.05rem;
font-weight: 600;
margin: 0 0 var(--space-sm) 0;
line-height: 1.35;
color: var(--c-ink, #0c2535);
}
.ps-status {
font-size: 0.82rem;
color: #5a7796;
margin: 0 0 var(--space-sm) 0;
font-style: italic;
}
.ps-summary {
font-size: 0.93rem;
line-height: 1.58;
color: var(--c-ink-2, #1e4258);
margin: 0 0 var(--space-md) 0;
flex-grow: 1;
}
/* ── Links ───────────────────────────────────────────────────────────────── */
.ps-links {
display: flex;
flex-direction: column;
gap: var(--space-xs);
margin-top: auto;
}
.ps-link {
font-size: 0.88rem;
color: var(--c-primary, #0b5c78);
text-decoration: none;
}
.ps-link:hover {
text-decoration: underline;
}
.ps-link--inert {
font-size: 0.88rem;
color: #9eb5c4;
cursor: default;
pointer-events: none;
}
/* ── About section ───────────────────────────────────────────────────────── */
.ps-about {
margin-top: 2.5rem;
}
.ps-about__block {
margin-bottom: 2rem;
}
.ps-about__block h2,
.ps-about__block h3 {
color: var(--c-primary, #0b5c78);
}
.ps-about__block p {
line-height: 1.72;
color: var(--c-ink-2, #1e4258);
max-width: 72ch;
}
.ps-about__cta {
margin-top: 0.75rem;
}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.ps-grid {
grid-template-columns: 1fr;
}
.ps-alpha-badge {
font-size: 0.6em;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
* v1.12.0 — Blog reorg: Testing Overdose + About stars, quarks and bowl of Tea
* ═══════════════════════════════════════════════════════════════════════════ */
/* ── Shared blog listing layout ─────────────────────────────────────────── */
.mim-blog-header {
margin-bottom: var(--sp-6, 2rem);
}
.mim-blog-title {
font-size: var(--fs-2xl, 2rem);
line-height: 1.2;
margin-bottom: var(--sp-2, 0.5rem);
}
.mim-blog-tagline {
font-size: var(--fs-md, 1rem);
color: var(--c-ink-2);
margin-bottom: var(--sp-4, 1rem);
}
.mim-blog-header__lang-bar {
margin-top: var(--sp-3, 0.75rem);
}
.mim-blog__section-heading {
font-size: var(--fs-lg, 1.25rem);
font-family: var(--f-ui);
font-weight: 600;
color: var(--c-ink-2);
margin: var(--sp-6, 2rem) 0 var(--sp-3, 0.75rem);
border-bottom: 1px solid var(--c-border);
padding-bottom: var(--sp-1, 0.25rem);
}
.mim-blog-post {
margin-bottom: var(--sp-6, 2rem);
}
.mim-blog-post__meta {
font-size: var(--fs-sm, 0.875rem);
color: var(--c-ink-3);
display: flex;
align-items: center;
gap: var(--sp-2, 0.5rem);
margin-bottom: var(--sp-1, 0.25rem);
}
.mim-blog-post__lang-badge {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.05em;
background: var(--c-ink-5);
color: var(--c-ink-2);
border-radius: 2px;
padding: 1px 5px;
}
.mim-blog-post__title {
font-size: var(--fs-lg, 1.25rem);
margin: var(--sp-1, 0.25rem) 0;
}
.mim-blog-post__title a {
color: inherit;
text-decoration: none;
}
.mim-blog-post__title a:hover {
color: var(--c-accent);
}
.mim-blog-post__excerpt {
color: var(--c-ink-2);
margin: var(--sp-2, 0.5rem) 0;
font-size: var(--fs-base, 1rem);
}
.mim-blog-post__read-more {
font-size: var(--fs-sm, 0.875rem);
font-weight: 600;
color: var(--c-primary);
text-decoration: none;
}
.mim-blog-post__read-more:hover {
color: var(--c-accent);
}
.mim-blog__empty {
color: var(--c-ink-3);
font-style: italic;
}
.mim-blog__about {
margin-top: var(--sp-8, 3rem);
padding: var(--sp-4, 1rem) var(--sp-5, 1.5rem);
background: var(--c-surface);
border-left: 3px solid var(--c-border);
border-radius: 0 4px 4px 0;
}
.mim-blog__about p {
font-size: var(--fs-sm, 0.875rem);
color: var(--c-ink-3);
margin: 0;
}
/* ── Testing Overdose — azure-strong accent ─────────────────────────────── */
body.mim-blog-track--to .mim-blog-title,
body.page-testing-overdose .mim-blog-title {
color: var(--c-primary);
}
body.mim-blog-track--to .mim-blog__section-heading,
body.page-testing-overdose .mim-blog__section-heading {
border-color: var(--c-accent);
color: var(--c-primary);
}
body.mim-blog-track--to .mim-blog-post {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--sp-6, 2rem);
align-items: start;
}
body.mim-blog-track--to .mim-blog-post__meta,
body.mim-blog-track--to .mim-blog-post__title {
grid-column: 1 / -1;
}
body.mim-blog-track--to .mim-blog__about {
border-color: var(--c-accent);
}
/* ── Stars, quarks and Tea — warm/stone, single-column, literary ────────── */
body.mim-blog-track--sqt .mim-blog-title,
body.page-stars-quarks-tea .mim-blog-title {
color: var(--c-ink);
font-weight: 500;
}
body.mim-blog-track--sqt .mim-blog-tagline,
body.page-stars-quarks-tea .mim-blog-tagline {
font-family: var(--f-body, Georgia, serif);
font-style: italic;
}
body.mim-blog-track--sqt .mim-blog__section-heading,
body.page-stars-quarks-tea .mim-blog__section-heading {
font-weight: 500;
color: var(--c-ink-3);
border-color: var(--c-ink-5);
}
body.mim-blog-track--sqt .mim-blog-post__excerpt,
body.page-stars-quarks-tea .mim-blog-post__excerpt {
font-family: var(--f-body, Georgia, serif);
font-size: var(--fs-base, 1rem);
line-height: 1.7;
}
body.mim-blog-track--sqt .mim-blog-post__excerpt p:first-child::first-line,
body.page-stars-quarks-tea .mim-blog-post__excerpt p:first-child::first-line {
font-variant-caps: small-caps;
}
body.mim-blog-track--sqt .mim-blog-post {
max-width: 680px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--sp-8, 3rem);
}
body.mim-blog-track--sqt .mim-blog__about {
border-color: var(--c-ink-4);
}
/* ── Responsive: collapse TO 2-col grid on narrow screens ───────────────── */
@media (max-width: 600px) {
body.mim-blog-track--to .mim-blog-post {
display: block;
}
}
/* ══════════════════════════════════════════════════════════════════
v1.16.0 — Blog layout foundation (BLOG-06)
Provides: mim-container, mim-page-main, mim-page-header,
mim-breadcrumb, mim-page-title, mim-page-lead, mim-blog,
mim-blog--* variants, mim-blog__section, mim-blog-header--* .
Also reduces site-nav gap for 6-item primary menu.
══════════════════════════════════════════════════════════════════ */
/* ── Page layout foundation ──────────────────────────────────────── */
.mim-page-main {
padding: var(--sp-8) 0 var(--sp-16);
min-height: 60vh;
}
.mim-container {
max-width: 860px;
margin: 0 auto;
padding: 0 var(--sp-6);
}
/* ── Page header ─────────────────────────────────────────────────── */
.mim-page-header {
margin-bottom: var(--sp-8);
}
.mim-breadcrumb {
font-size: var(--fs-sm);
color: var(--c-ink-3);
margin-bottom: var(--sp-6);
}
.mim-breadcrumb a {
color: var(--c-secondary);
text-decoration: none;
}
.mim-breadcrumb a:hover { text-decoration: underline; }
.mim-page-title {
font-size: var(--fs-3xl);
font-weight: 700;
color: var(--c-ink);
line-height: 1.2;
margin: var(--sp-3) 0 var(--sp-4);
}
.mim-page-lead {
font-size: var(--fs-lg);
color: var(--c-ink-2);
line-height: 1.65;
max-width: 66ch;
margin-bottom: var(--sp-4);
}
/* ── Blog header track accents ───────────────────────────────────── */
/* Testing Overdose — azure left border */
.mim-blog-header--to {
border-left: 4px solid var(--c-primary);
padding-left: var(--sp-4);
}
/* Stars, Quarks & Tea — muted blue-grey, literary weight */
.mim-blog-header--sqt {
border-left: 4px solid var(--c-ink-4);
padding-left: var(--sp-4);
}
/* ── Blog listing container ──────────────────────────────────────── */
.mim-blog {
display: flex;
flex-direction: column;
}
/* Track modifiers (.mim-blog--to / --sqt) — differentiation handled
by body.page-testing-overdose / body.page-stars-quarks-tea selectors
defined above; no additional rules needed here. */
.mim-blog--to {}
.mim-blog--sqt {}
/* ── Blog post track modifiers ───────────────────────────────────── */
/* Grid layout for --to / single-col for --sqt handled via body class. */
.mim-blog-post--to {}
.mim-blog-post--sqt {}
/* ── Blog section block ──────────────────────────────────────────── */
.mim-blog__section {
margin-bottom: var(--sp-10);
}
/* ── Nav: tighten gap for 6-item primary menu ────────────────────── */
.site-nav ul { gap: var(--sp-4); }
@media (max-width: 900px) {
.site-nav ul { gap: var(--sp-2); }
.site-nav a { font-size: 0.8rem; }
}