.mj-guide { --guide-bg: #f5f2ea;
--guide-surface: #fbfaf6;
--guide-surface-strong: #f7f2ea; --guide-accent: #23302e;
--guide-accent-soft: #538479;
--guide-accent-soft-bg: rgba(83, 132, 121, 0.14);
--guide-accent-soft-border: rgba(83, 132, 121, 0.22); --guide-text: #23302e;
--guide-text-strong: rgba(35, 48, 46, 0.92);
--guide-text-body: rgba(35, 48, 46, 0.84);
--guide-text-faint: rgba(35, 48, 46, 0.72);
--guide-text-muted: rgba(35, 48, 46, 0.58);
--guide-text-on-accent: #f5f2ea; --guide-line: rgba(35, 48, 46, 0.08);
--guide-line-strong: rgba(35, 48, 46, 0.14);
--guide-line-soft: rgba(224, 221, 213, 0.7); --guide-panel: rgba(35, 48, 46, 0.03);
--guide-panel-soft: rgba(35, 48, 46, 0.04);
--guide-panel-strong: rgba(35, 48, 46, 0.06); --guide-shadow: 0 2px 8px rgba(35, 48, 46, 0.08);
--guide-shadow-hover: 0 4px 16px rgba(35, 48, 46, 0.12);
--guide-card-shadow:
0 10px 26px rgba(35, 48, 46, 0.07),
0 2px 8px rgba(35, 48, 46, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.72);
--guide-card-shadow-hover:
0 14px 32px rgba(35, 48, 46, 0.1),
0 4px 12px rgba(35, 48, 46, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.78); --guide-alert-border: rgba(212, 165, 116, 0.34);
--guide-alert-accent: #d4a574;
--guide-alert-ico-clr: #b8904d; --guide-focus-ring: rgba(35, 48, 46, 0.4);
--guide-nav-border: rgba(35, 48, 46, 0.1);
--guide-nav-shadow-sm: rgba(35, 48, 46, 0.08);
--guide-nav-shadow-lg: rgba(35, 48, 46, 0.06); --space-1: 8px;
--space-2: 12px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
background: var(--guide-bg);
color: var(--guide-text);
min-height: 100vh;
padding-bottom: calc(92px + env(safe-area-inset-bottom));
}
.mj-guide *,
.mj-guide *::before,
.mj-guide *::after {
box-sizing: border-box;
}
.mj-guide a {
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.mj-guide img {
display: block;
max-width: 100%;
height: auto;
} .mj-svg {
width: 22px;
height: 22px;
display: block;
}
.mj-svg--stroke {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.mj-svg--stroke * {
fill: none;
stroke: inherit;
vector-effect: non-scaling-stroke;
}
.mj-svg--fill {
fill: currentColor;
stroke: none;
}
.mj-svg--fill * {
fill: currentColor;
stroke: none;
} .mj-header {
max-width: 640px;
margin: 0 auto 24px;
padding: 14px 14px 0;
text-align: center;
}
.mj-logo {
width: min(320px, 92vw);
margin: 0 auto 12px;
}
.mj-kicker {
margin: 24px 0 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--guide-text-muted);
}
.mj-h1 {
margin: 12px 0 14px;
font-family: "Cormorant Garamond", serif;
font-size: 30px;
line-height: 1.05;
letter-spacing: -0.02em;
font-weight: 600;
color: var(--guide-text);
}
.mj-sub {
max-width: 440px;
margin: 0 auto 14px;
font-size: 14.5px;
line-height: 1.45;
color: var(--guide-text-muted);
font-style: italic;
}
.mj-header .mj-langactions {
max-width: 640px;
margin: 0 auto 18px;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.mj-langintro {
margin: 6px 0 14px;
font-size: 13px;
line-height: 1.35;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--guide-text-muted);
}
.mj-langbtn {
min-height: 58px;
padding: 8px 6px 7px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
background: var(--guide-surface);
border: 1px solid var(--guide-line);
border-radius: 12px;
box-shadow: var(--guide-shadow);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 10.5px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--guide-text);
transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease, background 200ms ease;
}
.mj-langbtn:hover,
.mj-langbtn:focus-visible {
box-shadow: var(--guide-shadow-hover);
transform: translateY(-2px);
border-color: var(--guide-line-strong);
}
.mj-langbtn:active {
transform: translateY(0) scale(0.98);
}
.mj-langbtn.is-active,
.mj-langbtn[aria-current="page"] {
background: rgba(83, 132, 121, 0.13);
border-color: rgba(83, 132, 121, 0.34);
color: var(--guide-accent);
box-shadow: 0 3px 10px rgba(35, 48, 46, 0.08);
}
.mj-langflag {
width: 20px;
height: 15px;
flex: 0 0 auto;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
} .mj-quickactions {
max-width: 640px;
margin: 0 auto 24px;
padding: 0 14px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.mj-quickbtn {
min-height: 74px;
padding: 12px 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
background: var(--guide-surface);
border: 1px solid var(--guide-line);
border-radius: 12px;
box-shadow: var(--guide-shadow);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 11.5px;
font-weight: 600;
color: var(--guide-text);
transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
cursor: pointer;
}
.mj-quickbtn:hover,
.mj-quickbtn:focus-visible {
box-shadow: var(--guide-shadow-hover);
transform: translateY(-2px);
border-color: var(--guide-line-strong);
}
.mj-quickbtn:active {
transform: translateY(0) scale(0.98);
}
.mj-quickbtn .mj-svg {
width: 24px;
height: 24px;
} .mj-content {
max-width: 640px;
margin: 0 auto;
padding: 8px 14px 22px;
}
.mj-stack {
display: grid;
gap: 16px;
}
.mj-section {
margin-bottom: 24px;
}
.mj-sectiontitle {
margin: 0 0 16px;
padding: 0 6px;
font-family: "Cormorant Garamond", serif;
font-size: 24px;
line-height: 1.2;
font-weight: 600;
color: var(--guide-text);
}
.mj-sectiontitle .mj-svg {
width: 26px;
height: 26px;
color: var(--guide-accent-soft);
} .mj-card {
position: relative;
overflow: hidden;
display: flex;
align-items: flex-start;
gap: 18px;
padding: 22px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, var(--guide-surface) 18%, var(--guide-surface-strong) 100%);
border: 1px solid var(--guide-line);
border-radius: 18px;
box-shadow: var(--guide-card-shadow);
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.mj-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 34%);
pointer-events: none;
}
.mj-card:hover {
transform: translateY(-1px);
border-color: rgba(35, 48, 46, 0.12);
box-shadow: var(--guide-card-shadow-hover);
}
.mj-card:active {
transform: scale(0.995);
}
.mj-card--link {
color: inherit;
text-decoration: none;
cursor: pointer;
}
.mj-card--link:focus-visible {
outline: 3px solid var(--guide-focus-ring);
outline-offset: 3px;
}
.mj-card--highlight {
border: 2px solid var(--guide-accent);
background: linear-gradient(135deg, var(--guide-surface) 0%, rgba(212, 165, 116, 0.03) 100%);
}
.mj-ico {
width: 48px;
height: 48px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 14px;
background: linear-gradient(135deg, #2d3c39 0%, #23302e 100%);
color: var(--guide-text-on-accent);
box-shadow:
0 8px 18px rgba(35, 48, 46, 0.13),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.mj-ico--wifi {
background: linear-gradient(135deg, #3f625c 0%, #23302e 100%);
}
.mj-ico .mj-svg,
.mj-ico svg {
width: 24px;
height: 24px;
display: block;
color: currentColor;
}
.mj-ico .mj-svg--stroke,
.mj-ico .mj-svg--stroke * {
stroke: currentColor !important;
}
.mj-ico .mj-svg--fill,
.mj-ico .mj-svg--fill * {
fill: currentColor !important;
}
.mj-ico svg[fill="currentColor"],
.mj-ico svg[fill="currentColor"] * {
fill: currentColor !important;
}
.mj-ico svg[stroke="currentColor"],
.mj-ico svg[stroke="currentColor"] * {
stroke: currentColor !important;
}
.mj-body {
flex: 1;
min-width: 0;
display: grid;
gap: 12px;
}
.mj-cardtitle {
margin: 0;
font-family: "Cormorant Garamond", serif;
font-size: 20px;
line-height: 1.18;
font-weight: 600;
color: var(--guide-text);
}
.mj-text {
margin: 0;
font-size: 15px;
line-height: 1.58;
color: var(--guide-text-body);
}
.mj-text strong {
font-weight: 700;
color: var(--guide-text);
}
.mj-meta {
margin: 0;
font-size: 13.5px;
line-height: 1.5;
color: var(--guide-text-faint);
}
.mj-foot {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: var(--guide-text-faint);
}
.mj-foot strong {
font-weight: 700;
color: var(--guide-text);
} .mj-panel {
padding: 14px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(35, 48, 46, 0.028), rgba(35, 48, 46, 0.045));
border: 1px solid rgba(35, 48, 46, 0.06);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.mj-sep {
padding-top: 14px;
border-top: 1px solid rgba(35, 48, 46, 0.08);
}
.mj-divider {
height: 1px;
margin: 16px 0;
border: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(35, 48, 46, 0.06) 12%,
rgba(35, 48, 46, 0.12) 50%,
rgba(35, 48, 46, 0.06) 88%,
transparent 100%
);
}
.mj-entrylist {
display: grid;
gap: 0;
}
.mj-entry + .mj-entry {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(35, 48, 46, 0.08);
} .mj-times {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 0;
}
.mj-time {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 12px 10px;
background: rgba(35, 48, 46, 0.03);
border: 1px solid rgba(35, 48, 46, 0.06);
border-radius: 12px;
}
.mj-timelabel {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--guide-text-muted);
}
.mj-timeval {
font-family: "Cormorant Garamond", serif;
font-size: 26px;
line-height: 1;
font-weight: 700;
color: var(--guide-text);
}
.mj-timesep {
flex: 0 0 auto;
font-size: 18px;
color: var(--guide-text-muted);
}
.mj-schedule {
display: grid;
gap: 9px;
margin: 0;
}
.mj-scheditem {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 11px 12px;
background: rgba(35, 48, 46, 0.032);
border: 1px solid rgba(35, 48, 46, 0.06);
border-left: 3px solid var(--guide-accent-soft);
border-radius: 11px;
}
.mj-schedday {
font-size: 13.5px;
font-weight: 700;
color: var(--guide-text);
}
.mj-schedhours {
font-family: "Cormorant Garamond", serif;
font-size: 18px;
font-weight: 700;
color: var(--guide-text);
}
.mj-wifibox {
display: grid;
gap: 10px;
margin: 0;
}
.mj-wifiitem {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 12px;
background: rgba(35, 48, 46, 0.032);
border: 1px solid rgba(35, 48, 46, 0.06);
border-radius: 11px;
}
.mj-wifilabel {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--guide-text-muted);
}
.mj-wifivalue {
padding: 6px 10px;
background: rgba(35, 48, 46, 0.055);
border-radius: 8px;
font-family: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;
font-size: 13.5px;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--guide-text);
} .mj-badge {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
margin: 0;
padding: 9px 12px;
background: rgba(35, 48, 46, 0.04);
border: 1px solid rgba(35, 48, 46, 0.06);
border-radius: 999px;
font-size: 13.5px;
line-height: 1.35;
color: var(--guide-text-strong);
}
.mj-badge strong {
font-weight: 700;
color: var(--guide-text);
}
.mj-badge .mj-svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
}
.mj-phonelist {
display: grid;
gap: 8px;
margin: 0;
}
.mj-phoneitem {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: var(--guide-panel-soft);
border-left: 3px solid var(--guide-accent);
border-radius: 8px;
}
.mj-phonelabel {
font-size: 13.5px;
font-weight: 600;
color: var(--guide-text);
}
.mj-phonevalue {
padding: 4px 12px;
background: var(--guide-panel-strong);
border-radius: 6px;
font-family: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;
font-size: 15px;
font-weight: 700;
color: var(--guide-text);
} .mj-inlinebtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
min-height: 44px;
padding: 0 16px;
border-radius: 13px;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 13.5px;
font-weight: 700;
line-height: 1;
color: var(--guide-text-on-accent) !important;
background: linear-gradient(135deg, #31433f 0%, #23302e 100%);
border: 1px solid rgba(35, 48, 46, 0.14);
box-shadow: 0 8px 18px rgba(35, 48, 46, 0.12);
transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.mj-inlinebtn:hover,
.mj-inlinebtn:focus-visible {
transform: translateY(-1px);
box-shadow: 0 12px 22px rgba(35, 48, 46, 0.16);
filter: brightness(1.02);
}
.mj-inlinebtn:active {
transform: scale(0.985);
}
.mj-inlinebtn,
.mj-inlinebtn:visited {
color: var(--guide-text-on-accent) !important;
}
.mj-inlinebtn .mj-svg,
.mj-inlinebtn svg {
width: 18px;
height: 18px;
display: block;
color: currentColor;
}
.mj-inlinebtn .mj-svg--stroke,
.mj-inlinebtn .mj-svg--stroke * {
stroke: currentColor !important;
}
.mj-inlinebtn .mj-svg--fill,
.mj-inlinebtn .mj-svg--fill * {
fill: currentColor !important;
}
.mj-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
margin: 24px 0 0;
padding: 0 20px;
background: linear-gradient(135deg, #31433f 0%, #23302e 100%);
border: 1px solid rgba(35, 48, 46, 0.14);
border-radius: 13px;
box-shadow: 0 12px 24px rgba(35, 48, 46, 0.16);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 15.5px;
font-weight: 700;
color: var(--guide-text-on-accent);
transition: box-shadow 220ms ease, transform 220ms ease, filter 220ms ease;
}
.mj-cta:hover,
.mj-cta:focus-visible {
box-shadow: 0 16px 30px rgba(35, 48, 46, 0.2);
transform: translateY(-2px);
filter: brightness(1.02);
}
.mj-cta:active {
transform: scale(0.98);
}
.mj-cta:focus-visible {
outline: 3px solid var(--guide-focus-ring);
outline-offset: 3px;
}
.mj-ctasvg {
width: 24px;
height: 24px;
flex: 0 0 24px;
display: grid;
place-items: center;
}
.mj-cta .mj-svg {
width: 24px;
height: 24px;
}
.mj-cta,
.mj-cta:visited {
color: var(--guide-text-on-accent) !important;
}
.mj-cta .mj-svg--stroke,
.mj-cta .mj-svg--stroke * {
stroke: currentColor !important;
}
.mj-cta .mj-svg--fill,
.mj-cta .mj-svg--fill * {
fill: currentColor !important;
} .mj-alert {
position: relative;
overflow: hidden;
display: flex;
align-items: flex-start;
gap: 18px;
margin: 20px 0;
padding: 22px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, #fbf7ef 18%, #f8f2e8 100%);
border: 1px solid var(--guide-alert-border);
border-left: 4px solid var(--guide-alert-accent);
border-radius: 18px;
box-shadow:
0 10px 26px rgba(35, 48, 46, 0.07),
0 2px 8px rgba(35, 48, 46, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.72);
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.mj-alert::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 34%);
pointer-events: none;
}
.mj-alert:hover {
transform: translateY(-1px);
box-shadow:
0 14px 32px rgba(35, 48, 46, 0.09),
0 4px 12px rgba(35, 48, 46, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.78);
}
.mj-alertico {
width: 44px;
height: 44px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 12px;
background: linear-gradient(135deg, #e9dcc6 0%, #f3e9d8 100%);
border: 1px solid rgba(212, 165, 116, 0.2);
color: var(--guide-alert-ico-clr);
box-shadow:
0 6px 14px rgba(212, 165, 116, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.mj-alertico .mj-svg {
width: 22px;
height: 22px;
}
.mj-alertbody {
flex: 1;
min-width: 0;
display: grid;
gap: 12px;
} .mj-footer {
max-width: 640px;
margin: 32px auto 10px;
padding: 0 14px;
text-align: center;
font-size: 12.5px;
color: var(--guide-text);
}
.mj-footer p {
margin: 0;
}
.mj-footer a {
padding-bottom: 1px;
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--guide-line-strong);
transition: border-color 0.2s ease;
}
.mj-footer a:hover,
.mj-footer a:focus-visible {
border-color: var(--guide-accent);
} .mj-home-benefits {
max-width: 1120px;
margin: 0 auto;
padding: 18px;
}
.mj-home-benefits__grid {
display: grid;
gap: 14px;
}
.mj-home-benefit {
padding: 20px 18px;
background: var(--guide-surface);
border: 1px solid var(--guide-line);
border-radius: 16px;
box-shadow: var(--guide-shadow);
text-align: center;
transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
}
.mj-home-benefit:hover {
box-shadow: var(--guide-shadow-hover);
transform: translateY(-2px);
border-color: var(--guide-line-strong);
}
.mj-home-benefit__ico {
width: 46px;
height: 46px;
margin: 0 auto 12px;
display: grid;
place-items: center;
border-radius: 14px;
background: var(--guide-accent);
color: var(--guide-text-on-accent);
}
.mj-home-benefit__ico .mj-svg {
width: 22px;
height: 22px;
}
.mj-home-benefit__title {
margin: 0 0 8px;
font-family: "Cormorant Garamond", serif;
font-size: 20px;
line-height: 1.15;
font-weight: 600;
color: var(--guide-text);
}
.mj-home-benefit__text {
margin: 0;
font-size: 14.5px;
line-height: 1.45;
color: var(--guide-text-strong);
}
.mj-home-benefit__text strong {
font-weight: 700;
color: var(--guide-text);
}
.mj-home-benefit__sep {
padding: 0 6px;
opacity: 0.55;
} .mj-pricegrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 0;
}
.mj-priceitem {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 14px 10px;
background: var(--guide-panel);
border: 1px solid var(--guide-line);
border-radius: 10px;
text-align: center;
}
.mj-priceitem--main {
background: var(--guide-panel-soft);
border-color: var(--guide-line-strong);
}
.mj-pricelabel {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--guide-text-muted);
}
.mj-priceval {
font-family: "Cormorant Garamond", serif;
font-size: 26px;
line-height: 1;
font-weight: 600;
color: var(--guide-text);
}
.mj-priceitem--main .mj-priceval {
font-size: 30px;
}
.mj-priceval--small {
font-size: 18px;
padding-top: 4px;
}
.mj-pricesub {
font-size: 11.5px;
line-height: 1.3;
color: var(--guide-text-muted);
}
.mj-buffetlist {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 0;
}
.mj-buffetitem {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 10px 12px;
background: var(--guide-panel);
border-radius: 8px;
font-size: 13.5px;
line-height: 1.3;
color: var(--guide-text-strong);
}
.mj-buffetitem--wide {
grid-column: span 2;
}
.mj-buffetitem small {
display: block;
margin-top: 2px;
font-size: 11.5px;
font-style: italic;
color: var(--guide-text-muted);
}
.mj-infocard {
display: flex;
align-items: flex-start;
gap: 18px;
margin-top: 2px;
padding: 20px;
background: rgba(83, 132, 121, 0.07);
border: 1px solid rgba(83, 132, 121, 0.25);
border-radius: 14px;
}
.mj-infocard__ico {
width: 44px;
height: 44px;
flex: 0 0 auto;
display: grid;
place-items: center;
background: rgba(83, 132, 121, 0.15);
border-radius: 11px;
color: var(--guide-accent-soft);
}
.mj-infocard__ico .mj-svg {
width: 24px;
height: 24px;
}
.mj-infocard__body {
flex: 1;
}
.mj-infocard__title {
margin: 0 0 8px;
font-family: "Cormorant Garamond", serif;
font-size: 19px;
line-height: 1.25;
font-weight: 600;
color: var(--guide-text);
}
.mj-infocard__text {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: var(--guide-text-strong);
}
.mj-infocard__text strong {
font-weight: 700;
color: var(--guide-text);
} .mj-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
font-size: 15px;
line-height: 1.58;
}
.mj-list li {
position: relative;
padding-left: 18px;
margin: 0;
color: var(--guide-text-body);
}
.mj-list li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
color: var(--guide-accent-soft);
}
.mj-subtitle {
margin: 0;
font-size: 15px;
line-height: 1.3;
font-weight: 800;
color: var(--guide-text);
} .mj-tvdetails {
margin-top: 12px;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(35, 48, 46, 0.1);
background: rgba(35, 48, 46, 0.018);
}
.mj-tvsummary {
list-style: none;
cursor: pointer;
padding: 14px 16px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
background: rgba(35, 48, 46, 0.035);
border-left: 3px solid var(--guide-accent-soft);
color: var(--guide-text);
}
.mj-tvsummary::-webkit-details-marker {
display: none;
}
.mj-tvchev {
width: 10px;
height: 10px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: 0.25s;
flex: 0 0 auto;
opacity: 0.72;
}
.mj-tvdetails[open] .mj-tvchev {
transform: rotate(225deg);
}
.mj-tvpanel {
background: rgba(255, 255, 255, 0.32);
border-top: 1px solid rgba(35, 48, 46, 0.07);
padding: 16px;
display: grid;
gap: 18px;
}
.mj-tvgroup {
display: grid;
gap: 10px;
}
.mj-tvgroup + .mj-tvgroup {
padding-top: 18px;
border-top: 1px solid rgba(35, 48, 46, 0.08);
}
.mj-tvtitle {
margin: 0;
font-size: 14px;
line-height: 1.35;
font-weight: 800;
color: var(--guide-text);
}
.mj-tvlist {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 8px 16px;
}
.mj-tvitem {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
gap: 10px;
align-items: start;
}
.mj-tvnum {
min-width: 40px;
text-align: left;
font-variant-numeric: tabular-nums;
font-size: 13px;
font-weight: 800;
color: var(--guide-text-muted);
white-space: nowrap;
}
.mj-tvname {
min-width: 0;
font-size: 14px;
line-height: 1.35;
font-weight: 700;
color: rgba(35, 48, 46, 0.86);
} .mj-transit-list {
display: grid;
gap: 10px;
}
.mj-transit-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(35, 48, 46, 0.032);
border: 1px solid rgba(35, 48, 46, 0.06);
}
.mj-transit-badges {
display: flex;
gap: 6px;
flex-shrink: 0;
flex-wrap: wrap;
width: 112px;
min-width: 112px;
}
.mj-transit-stop {
flex: 1;
min-width: 0;
font-size: 14px;
font-weight: 700;
color: var(--guide-text);
}
.mj-journey-list {
display: grid;
gap: 12px;
}
.mj-journey {
padding: 14px;
border-radius: 14px;
background: rgba(35, 48, 46, 0.032);
border: 1px solid rgba(35, 48, 46, 0.06);
display: grid;
gap: 10px;
}
.mj-journey-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 12px;
align-items: center;
}
.mj-journey-name {
font-size: 14.5px;
font-weight: 800;
color: var(--guide-text);
line-height: 1.2;
}
.mj-journey-sub {
font-size: 12px;
color: var(--guide-text-muted);
font-weight: 600;
}
.mj-journey-time {
justify-self: end;
align-self: start;
font-size: 12.5px;
font-weight: 800;
color: var(--guide-text);
padding: 5px 9px;
border-radius: 999px;
background: var(--guide-accent-soft-bg);
border: 1px solid var(--guide-accent-soft-border);
}
.mj-journey-route {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
line-height: 1.4;
}
.mj-journey-arrow {
font-size: 13px;
color: var(--guide-text-muted);
opacity: 0.9;
}
.mj-journey-via {
font-size: 13px;
color: var(--guide-text-body);
font-weight: 600;
}
.mj-journey-dest {
font-size: 13px;
color: var(--guide-text);
font-weight: 800;
}
.mj-card--weather .mj-body {
gap: 14px;
}  .mj-badge--bus,
.mj-badge--train,
.mj-badge--metro,
.mj-badge--rer,
.mj-badge--tram {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
box-sizing: border-box;
flex-shrink: 0;
white-space: nowrap;
font-family: "DIN", "DIN Next", "Bahnschrift", "Inter", system-ui, sans-serif;
font-weight: 800;
line-height: 1;
border: 0;
box-shadow: none;
} .mj-badge--bus,
.mj-badge--train {
height: 24px;
padding: 0 8px;
border-radius: 6px;
font-size: 12px;
} .mj-badge--bus {
min-width: 32px;
color: #fff;
} .mj-badge--bus162 {
background: #006CB8;
color: #fff;
}
.mj-badge--bus190 {
background: #8E6539;
color: #fff;
}
.mj-badge--bus290 {
background: #C6A3CD;
color: #fff;
}
.mj-badge--bus395 {
background: #005FB9;
color: #fff;
}
.mj-badge--busclamibus {
background: #FFCE29;
color: #373535;
}
.mj-badge--train {
min-width: 24px;
}
.mj-badge--train-n {
background: #00A88F;
color: #fff;
}
.mj-badge--metro,
.mj-badge--rer {
width: 24px;
height: 24px;
padding: 0;
border-radius: 50%;
font-size: 13px;
} .mj-badge--metro14 {
background: #62259D;
color: #fff;
} .mj-badge--rerb {
background: #4B92DB;
color: #fff;
}
.mj-badge--rerc {
background: #F5C400;
color: #1A1A1A;
} .mj-badge--tram {
height: 24px;
min-width: 30px;
padding: 0 6px;
border-radius: 0;
background: #fff;
color: #000;
font-size: 12px;
border-top: 4px solid #FF0000;
border-bottom: 4px solid #FF0000;
} .mj-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
display: flex;
justify-content: space-around;
align-items: flex-end;
gap: 6px;
padding: 0 12px calc(12px + env(safe-area-inset-bottom));
background: transparent;
}
.mj-nav::before {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom));
height: 68px;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--guide-nav-border);
border-radius: 24px;
box-shadow:
0 4px 16px var(--guide-nav-shadow-sm),
0 10px 36px var(--guide-nav-shadow-lg);
outline: 1px solid rgba(255, 255, 255, 0.55);
outline-offset: -1px;
}
.mj-navlink {
position: relative;
z-index: 1;
flex: 1 1 0;
height: 56px;
margin-bottom: 6px;
padding: 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
background: transparent;
border-radius: 16px;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 10.5px;
line-height: 1;
font-weight: 600;
color: var(--guide-text-faint);
text-decoration: none;
transition: background 160ms ease, color 160ms ease, transform 160ms ease;
-webkit-tap-highlight-color: transparent;
}
.mj-navico {
width: 24px;
height: 24px;
display: grid;
place-items: center;
transition: transform 160ms ease, opacity 160ms ease;
}
.mj-navico .mj-svg {
width: 22px;
height: 22px;
}
.mj-navtxt {
display: block;
font-size: 10px;
line-height: 1;
white-space: nowrap;
}
.mj-navlink[aria-current="page"] {
color: var(--guide-accent);
}
.mj-navlink[aria-current="page"]::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 56px;
height: 56px;
transform: translate(-50%, -50%);
background: rgba(83, 132, 121, 0.14);
border-radius: 18px;
z-index: -1;
}
.mj-navlink[aria-current="page"] .mj-navico {
opacity: 1;
}
.mj-entrylist {
display: grid;
gap: 16px;
} @media (min-width: 640px) {
.mj-header .mj-langactions,
.mj-quickactions {
gap: 12px;
}
.mj-langbtn {
min-height: 62px;
font-size: 11px;
}
.mj-langflag {
width: 22px;
height: 16px;
}
.mj-quickbtn {
min-height: 82px;
font-size: 12px;
}
.mj-nav {
max-width: 600px;
margin: 0 auto;
}
.mj-nav::before {
left: 50%;
right: auto;
width: min(600px, calc(100vw - 48px));
transform: translateX(-50%);
}
}
@media (min-width: 768px) {
.mj-h1 {
font-size: 34px;
}
.mj-logo {
width: 340px;
}
.mj-card {
padding: 24px;
}
.mj-cardtitle {
font-size: 21px;
}
.mj-sectiontitle {
font-size: 26px;
}
.mj-home-benefits__grid {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.mj-tvlist {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.mj-card {
padding: 20px 18px;
gap: 14px;
}
.mj-cardtitle {
font-size: 18px;
}
.mj-ico {
width: 44px;
height: 44px;
border-radius: 13px;
}
.mj-timeval {
font-size: 23px;
}
.mj-schedhours {
font-size: 17px;
}
.mj-transit-badges {
width: 96px;
min-width: 96px;
}
.mj-journey-header {
grid-template-columns: 1fr;
}
.mj-journey-time {
justify-self: start;
}
}
@media (max-width: 420px) {
.mj-tvlist {
grid-template-columns: 1fr;
}
}
@media (max-width: 400px) {
.mj-times {
flex-direction: column;
align-items: stretch;
}
.mj-timesep {
display: none;
}
.mj-wifiitem,
.mj-scheditem,
.mj-phoneitem {
flex-direction: column;
align-items: flex-start;
}
.mj-pricegrid,
.mj-buffetlist {
grid-template-columns: 1fr;
}
.mj-buffetitem--wide {
grid-column: span 1;
}
}
@media (max-width: 380px) {
.mj-header .mj-langactions,
.mj-quickactions {
gap: 8px;
}
.mj-langbtn {
min-height: 54px;
padding: 7px 4px 6px;
font-size: 10px;
gap: 4px;
}
.mj-langflag {
width: 18px;
height: 13px;
}
.mj-quickbtn {
min-height: 68px;
padding: 10px 4px;
font-size: 11px;
}
} @media (prefers-reduced-motion: reduce) {
.mj-card,
.mj-quickbtn,
.mj-langbtn,
.mj-navlink,
.mj-navico,
.mj-cta,
.mj-inlinebtn {
transition: none !important;
}
}