/* * Menu Aksesibilitas (1.9.0, part 2): entry button, menu panel, reader bar and every setting of the menu. * Settings are data attributes on (set before first paint by the head script in layout.php, changed by a11y.js): * data-mm-text 1-3 (zoom 115/130/150 %) data-mm-space 1-2 data-mm-line 1-2 data-mm-dys data-mm-align data-mm-contrast * data-mm-dark data-mm-sat 1-2 (50 % / grey) data-mm-links data-mm-noimg data-mm-motion data-mm-cursor data-mm-focus data-mm-tips * Loaded after app.css (same specificity rules win by order; the menu uses its own fixed colours so it stays readable in every mode). */ @font-face { font-family: "Lexend"; src: url("fonts/Lexend-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Lexend"; src: url("fonts/Lexend-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Entry button ---------- */ .mm-ax-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--mm-dark); border-radius: 50%; background: var(--mm-card); color: var(--mm-dark); cursor: pointer; } .mm-ax-btn[aria-expanded="true"] { background: var(--mm-dark); color: #fff; } .mm-ax-btn--pill { width: auto; height: auto; gap: 10px; padding: 12px 22px 12px 16px; padding-inline: 16px 22px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--mm-r-full); background: rgba(255, 255, 255, 0.14); color: #fff; font: 800 15px/1.3 var(--mm-font); white-space: nowrap; } .mm-ax-btn--pill[aria-expanded="true"] { background: rgba(255, 255, 255, 0.28); color: #fff; } .mm-ax-btn--float { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 6; } .mm-ax-btn--float.mm-ax-btn--pill { top: 20px; inset-inline-end: 24px; border-color: var(--mm-border-ui); background: var(--mm-card); color: var(--mm-text); } .mm-k__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--mm-s3); width: 100%; } .mm-k__tools { display: inline-flex; align-items: center; gap: var(--mm-s3); } .mm-nav__actions--end { justify-content: flex-end; min-width: 36px; } .mm-screen-tablet .mm-t__top .mm-k__bar { font-size: inherit; } .mm-screen-tablet .mm-ax-btn--pill { font-size: 0.9em; padding: 0.7em 1.4em 0.7em 1em; } /* kiosk Denah top bar: icon only (56px circle) so "Denah Museum" keeps one line next to Kembali and the language pill; the name stays in aria-label */ .mm-denah__knav .mm-ax-btn--pill { width: 56px; min-width: 56px; height: 56px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; } .mm-denah__knav .mm-ax-btn--pill .mm-ax-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .mm-denah__nav .mm-nav__actions { gap: var(--mm-s2); } /* ---------- Menu panel ---------- */ .mm-ax { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Yu Gothic UI", "Malgun Gothic", "Microsoft YaHei", Tahoma, sans-serif; color: #0d2618; } .mm-ax *, .mm-ax *::before, .mm-ax *::after { box-sizing: border-box; } .mm-ax__scrim { position: absolute; inset: 0; background: rgba(13, 38, 24, 0.6); } .mm-ax__panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 395px; height: calc(100vh - 72px); height: calc(100dvh - 72px); border-radius: 32px 32px 0 0; background: #f6fbf8; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3); overflow: hidden; animation: mm-sheet-in 0.28s cubic-bezier(0.16, 1, 0.3, 1); --mm-ring: #0d2618; --mm-ring-gap: #fff; } .mm-ax__panel.is-sub { height: auto; max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); } .mm-ax__head { flex: none; display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 20px; padding-inline: 20px 16px; background: #0d2618; color: #fff; --mm-ring: #fff; --mm-ring-gap: #0d2618; } .mm-ax__badge, .mm-ax__back { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 14px; background: #15803d; color: #fff; } .mm-ax__back { background: rgba(255, 255, 255, 0.14); cursor: pointer; } .mm-ax__titles { flex: 1; min-width: 0; } .mm-ax__titles h2 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; color: #fff; } .mm-ax__titles h2:focus { outline: none; box-shadow: none; } .mm-ax__titles p { margin: 2px 0 0; font-size: 14px; line-height: 1.35; font-weight: 600; color: #86efac; } .mm-ax__close { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 2px solid #86efac; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; } .mm-ax__view { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; } .mm-ax__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 24px; } .mm-ax__h { margin: 22px 0 10px; font-size: 13px; line-height: 1.3; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #3a5546; } .mm-ax__scroll > .mm-ax__h:first-child { margin-top: 0; } .mm-ax__lang { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 18px; border: 1.5px solid #6b8c7b; border-radius: 20px; background: #fff; color: #0d2618; font-family: inherit; font-size: 17px; font-weight: 800; line-height: 1.3; text-align: start; cursor: pointer; } .mm-ax__lang-name { flex: 1; min-width: 0; } .mm-ax__lang .mm-icon:last-of-type { margin-inline-start: auto; } /* Profiles */ .mm-ax__profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mm-ax-prof { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border: 1.5px solid #6b8c7b; border-radius: 24px; background: #fff; color: #0d2618; font: inherit; text-align: start; cursor: pointer; } .mm-ax-prof__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: #dcfce7; color: #166534; } .mm-ax-prof__radio { position: absolute; top: 14px; inset-inline-end: 14px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid #6b8c7b; border-radius: 50%; color: transparent; } .mm-ax-prof__text { display: grid; gap: 4px; } .mm-ax-prof__text strong { font-size: 16px; line-height: 1.25; font-weight: 800; } .mm-ax-prof__text span { font-size: 14px; line-height: 1.4; font-weight: 500; color: #375243; } .mm-ax-prof[aria-pressed="true"] { padding: 15.5px; border: 2.5px solid #15803d; background: #ecfdf5; } .mm-ax-prof[aria-pressed="true"] .mm-ax-prof__icon { background: #15803d; color: #fff; } .mm-ax-prof[aria-pressed="true"] .mm-ax-prof__radio { border-color: #15803d; background: #15803d; color: #fff; } /* Tiles */ .mm-ax__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .mm-ax-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 108px; padding: 22px 6px 12px; border: 1.5px solid #6b8c7b; border-radius: 22px; background: #fff; color: #0d2618; font: inherit; text-align: center; cursor: pointer; } .mm-ax-tile__icon { color: #0d2618; } .mm-ax-tile__aa { font-size: 26px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; } .mm-ax-tile__label { font-size: 14px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; } .mm-ax-tile__dots { position: absolute; top: 10px; inset-inline-end: 12px; display: inline-flex; gap: 3px; } .mm-ax-tile__dots i { width: 8px; height: 8px; border-radius: 50%; background: #b9d3c3; } .mm-ax-tile[data-level="1"] .mm-ax-tile__dots i:nth-child(-n+1), .mm-ax-tile[data-level="2"] .mm-ax-tile__dots i:nth-child(-n+2), .mm-ax-tile[data-level="3"] .mm-ax-tile__dots i:nth-child(-n+3) { background: #15803d; } .mm-ax-tile__check { position: absolute; top: 9px; inset-inline-end: 9px; display: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #15803d; color: #fff; } .mm-ax-tile__go { position: absolute; top: 9px; inset-inline-end: 11px; color: #0d2618; } .mm-ax-tile[aria-pressed="true"] { padding: 21.5px 5.5px 11.5px; border: 2.5px solid #15803d; background: #ecfdf5; } .mm-ax-tile[aria-pressed="true"] .mm-ax-tile__check { display: flex; } .mm-ax-tile[aria-pressed="true"] .mm-ax-tile__icon { color: #166534; } .mm-ax__note { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 0; padding: 14px; border: 1px solid #bbf7d0; border-radius: 20px; background: #ecfdf5; font-size: 14px; line-height: 1.5; font-weight: 500; color: #375243; } .mm-ax__note-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #15803d; color: #fff; } .mm-ax__reset { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 16px; padding: 14px 20px; border: 1.5px solid #86efac; border-radius: var(--mm-r-full); background: #dcfce7; color: #0d2618; font-family: inherit; font-size: 16px; font-weight: 800; line-height: 1.3; cursor: pointer; } .mm-ax__more { position: absolute; inset-inline: 0; bottom: 18px; margin-inline: auto; width: max-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: var(--mm-r-full); background: #0d2618; color: #fff; font-size: 14px; line-height: 1.3; font-weight: 800; box-shadow: 0 10px 24px rgba(13, 38, 24, 0.35); cursor: pointer; transition: opacity 0.2s; } .mm-ax__more.is-hidden { opacity: 0; pointer-events: none; } .mm-ax__toast { position: absolute; inset-inline: 0; bottom: 18px; z-index: 5; margin-inline: auto; width: max-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--mm-r-full); background: #0d2618; color: #fff; font-size: 15px; line-height: 1.3; font-weight: 800; box-shadow: 0 10px 24px rgba(13, 38, 24, 0.4); animation: mm-sheet-in 0.2s ease-out; } .mm-ax__toast .mm-icon { color: #4ade80; } /* Page structure view */ .mm-ax__view--sub .mm-ax__scroll { padding-top: 16px; } .mm-ax__tabs { flex: none; display: flex; gap: 4px; margin: 18px 20px 0; padding: 4px; border: 1.5px solid #6b8c7b; border-radius: var(--mm-r-full); background: #f6fbf8; } .mm-ax__tabs [role="tab"] { flex: 1; min-height: 48px; padding: 8px 10px; border: 0; border-radius: var(--mm-r-full); background: transparent; color: #0d2618; font-family: inherit; font-size: 16px; font-weight: 800; line-height: 1.2; cursor: pointer; } .mm-ax__tabs [role="tab"][aria-selected="true"] { background: #15803d; color: #fff; } .mm-ax__hint { margin: 0 0 14px; font-size: 15px; line-height: 1.5; font-weight: 500; color: #375243; } .mm-ax__count { margin: 14px 0 0; text-align: center; font-size: 14px; line-height: 1.4; font-weight: 700; color: #3a5546; } [data-mm-ax-list] { display: grid; gap: 10px; } .mm-ax-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px; border: 1.5px solid #6b8c7b; border-radius: 20px; background: #fff; color: #0d2618; font: inherit; text-align: start; cursor: pointer; } .mm-ax-row.is-first { border: 2.5px solid #15803d; background: #ecfdf5; padding: 10.5px 14.5px; } .mm-ax-row[data-level="2"] { padding-inline-start: 24px; } .mm-ax-row[data-level="3"] { padding-inline-start: 34px; } .mm-ax-row__badge { flex: none; min-width: 38px; padding: 5px 9px; border-radius: 8px; background: #dcfce7; color: #14532d; font-size: 13px; line-height: 1.2; font-weight: 800; text-align: center; } .mm-ax-row[data-level="1"] .mm-ax-row__badge { background: #0d2618; color: #fff; } .mm-ax-row__text { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 16px; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; } .mm-ax-row__text small { font-size: 13px; line-height: 1.3; font-weight: 500; color: #375243; } .mm-ax-row__go { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; color: #14532d; } /* Kiosk / tablet: big centred panel */ .mm-ax--kiosk { align-items: center; } .mm-ax--kiosk .mm-ax__panel { width: min(726px, calc(100% - 40px)); max-width: none; height: auto; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); border-radius: 40px; } .mm-ax--kiosk .mm-ax__head { padding: 18px 20px; gap: 18px; } .mm-ax--kiosk .mm-ax__titles h2 { font-size: 26px; } .mm-ax--kiosk .mm-ax__titles p { font-size: 20px; } .mm-ax--kiosk .mm-ax__badge, .mm-ax--kiosk .mm-ax__back, .mm-ax--kiosk .mm-ax__close { width: 56px; height: 56px; } .mm-ax--kiosk .mm-ax__head .mm-ax__lang { width: auto; min-width: 260px; min-height: 56px; padding: 10px 20px; border: 0; border-radius: var(--mm-r-full); font-size: 20px; } .mm-ax--kiosk .mm-ax__scroll { padding: 22px 24px 24px; } .mm-ax--kiosk .mm-ax__h { margin: 22px 0 12px; font-size: 20px; } .mm-ax--kiosk .mm-ax__profiles { gap: 14px; } .mm-ax--kiosk .mm-ax-prof { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px 52px 16px 16px; padding-inline: 16px 52px; min-height: 124px; } .mm-ax--kiosk .mm-ax-prof[aria-pressed="true"] { padding: 15.5px 51.5px 15.5px 15.5px; padding-inline: 15.5px 51.5px; } .mm-ax--kiosk .mm-ax-prof__text strong { font-size: 22px; } .mm-ax--kiosk .mm-ax-prof__text span { font-size: 20px; } .mm-ax--kiosk .mm-ax__tiles { grid-template-columns: repeat(4, 1fr); gap: 12px; } .mm-ax--kiosk .mm-ax-tile { min-height: 112px; gap: 8px; padding: 18px 8px 12px; } .mm-ax--kiosk .mm-ax-tile[aria-pressed="true"] { padding: 17.5px 7.5px 11.5px; } .mm-ax--kiosk .mm-ax-tile__label { font-size: 20px; } .mm-ax--kiosk .mm-ax-tile__aa { font-size: 30px; } .mm-ax--kiosk .mm-ax__note { font-size: 20px; } .mm-ax--kiosk .mm-ax__reset { min-height: 68px; font-size: 22px; } .mm-ax--kiosk .mm-ax__tabs [role="tab"] { min-height: 60px; font-size: 22px; } .mm-ax--kiosk .mm-ax__hint { font-size: 20px; } .mm-ax--kiosk .mm-ax-row { min-height: 72px; } .mm-ax--kiosk .mm-ax-row__text { font-size: 22px; } .mm-ax--kiosk .mm-ax-row__badge { font-size: 18px; } .mm-ax--kiosk .mm-ax-row__go { font-size: 18px; } .mm-ax--kiosk .mm-ax__count, .mm-ax--kiosk .mm-ax__more, .mm-ax--kiosk .mm-ax__toast { font-size: 20px; } .mm-screen-tablet .mm-ax--kiosk .mm-ax__panel { width: min(860px, calc(100% - 40px)); } @media (max-width: 560px) { .mm-ax--kiosk .mm-ax__tiles { grid-template-columns: repeat(2, 1fr); } .mm-ax--kiosk .mm-ax__profiles { grid-template-columns: 1fr; } .mm-ax--kiosk .mm-ax__head .mm-ax__lang { min-width: 0; } } @media (max-width: 340px) { .mm-ax__profiles { grid-template-columns: 1fr; } .mm-ax__tiles { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 480px) { .mm-ax:not(.mm-ax--kiosk) .mm-ax__panel { height: auto; } /* drawer: full height (top: 0; bottom: 0) */ } /* ---------- Drawer: the menu slides in from the end side (right; left in Arabic) and leaves part of the page visible ---------- Phone: 86 % of the 395 px column, kiosk: 68 % of the 766 px column, tablet: 62 % of the screen. Full height, the scrim covers the rest and closes the menu on tap. */ .mm-ax, .mm-ax--kiosk { align-items: stretch; justify-content: flex-start; } .mm-ax .mm-ax__panel, .mm-ax .mm-ax__panel.is-sub { position: absolute; top: 0; bottom: 0; inset-inline-end: max(0px, calc((100% - 395px) / 2)); width: calc(min(100%, 395px) * 0.86); max-width: none; height: auto; max-height: none; border-radius: 0; border-start-start-radius: 28px; border-end-start-radius: 28px; box-shadow: -12px 0 40px rgba(0, 0, 0, 0.3); animation: mm-ax-drawer-in 0.28s cubic-bezier(0.16, 1, 0.3, 1); } [dir="rtl"] .mm-ax .mm-ax__panel { box-shadow: 12px 0 40px rgba(0, 0, 0, 0.3); animation-name: mm-ax-drawer-in-rtl; } @keyframes mm-ax-drawer-in { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes mm-ax-drawer-in-rtl { from { transform: translateX(-32px); opacity: 0; } to { transform: none; opacity: 1; } } .mm-ax .mm-ax__head { padding-top: max(16px, env(safe-area-inset-top, 0px)); } .mm-ax .mm-ax__scroll { padding: 18px 16px 24px; } .mm-ax .mm-ax__profiles, .mm-ax .mm-ax__tiles { gap: 10px; } .mm-ax .mm-ax-prof { padding: 14px; gap: 10px; } .mm-ax .mm-ax-prof[aria-pressed="true"] { padding: 13.5px; } .mm-ax .mm-ax-prof__text strong { font-size: 15px; } .mm-ax .mm-ax-prof__text span { font-size: 13px; } .mm-ax .mm-ax-tile { min-height: 100px; padding: 20px 4px 10px; } .mm-ax .mm-ax-tile[aria-pressed="true"] { padding: 19.5px 3.5px 9.5px; } .mm-ax .mm-ax-tile__label { font-size: 13px; } /* kiosk: 3 columns, profiles stacked icon-over-text, the language pill wraps under the title */ .mm-ax--kiosk .mm-ax__panel, .mm-ax--kiosk .mm-ax__panel.is-sub { inset-inline-end: max(0px, calc((100% - 766px) / 2)); width: calc(min(100%, 766px) * 0.68); border-start-start-radius: 40px; border-end-start-radius: 40px; } .mm-screen-tablet .mm-ax--kiosk .mm-ax__panel, .mm-screen-tablet .mm-ax--kiosk .mm-ax__panel.is-sub { inset-inline-end: 0; width: max(480px, 62%); } .mm-ax--kiosk .mm-ax__head { flex-wrap: wrap; row-gap: 14px; } .mm-ax--kiosk .mm-ax__head .mm-ax__lang { order: 3; flex: 1 0 100%; min-width: 0; } .mm-ax--kiosk .mm-ax__scroll { padding: 22px 20px 28px; } .mm-ax--kiosk .mm-ax__tiles { grid-template-columns: repeat(3, 1fr); gap: 12px; } .mm-ax--kiosk .mm-ax-tile { min-height: 120px; padding: 22px 6px 12px; } .mm-ax--kiosk .mm-ax-tile[aria-pressed="true"] { padding: 21.5px 5.5px 11.5px; } .mm-ax--kiosk .mm-ax-tile__label { font-size: 20px; } .mm-ax--kiosk .mm-ax-prof, .mm-ax--kiosk .mm-ax-prof[aria-pressed="true"] { flex-direction: column; min-height: 0; padding: 16px; } .mm-ax--kiosk .mm-ax-prof[aria-pressed="true"] { padding: 15.5px; } .mm-ax--kiosk .mm-ax-prof__text strong { font-size: 21px; } .mm-ax--kiosk .mm-ax-prof__text span { font-size: 20px; } /* ---------- Reader bar ("Baca Halaman") ---------- */ .mm-reader { position: fixed; inset-inline: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: flex; align-items: center; gap: 8px; width: calc(100% - 24px); max-width: 395px; margin-inline: auto; padding: 8px 10px; border-radius: 44px; background: #0d2618; color: #fff; box-shadow: 0 16px 40px rgba(13, 38, 24, 0.45); --mm-ring: #fff; --mm-ring-gap: #0d2618; animation: mm-sheet-in 0.25s ease-out; } body:has(.mm-bottom-nav) .mm-reader { bottom: calc(var(--mm-bnav-h) + 16px + env(safe-area-inset-bottom, 0px)); } .mm-reader__btn { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; } .mm-reader__btn--main { width: 52px; height: 52px; background: #15803d; } .mm-reader__btn--ring { border-color: #86efac; background: transparent; } .mm-reader__text { flex: 1; min-width: 0; display: grid; gap: 1px; } .mm-reader__text strong { font-size: 16px; line-height: 1.25; font-weight: 800; white-space: nowrap; } .mm-reader__text span { font-size: 14px; line-height: 1.3; font-weight: 600; color: #86efac; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mm-reader__speed { flex: none; min-width: 46px; height: 44px; padding: 0 10px; border: 2px solid #86efac; border-radius: var(--mm-r-full); background: transparent; color: #fff; font: 800 15px/1 var(--mm-font); cursor: pointer; } .mm-screen-kiosk .mm-reader, .mm-screen-tablet .mm-reader { max-width: 640px; gap: 14px; padding: 14px 16px; bottom: 28px; } .mm-screen-kiosk .mm-reader__btn, .mm-screen-tablet .mm-reader__btn { width: 64px; height: 64px; } .mm-screen-kiosk .mm-reader__btn--main, .mm-screen-tablet .mm-reader__btn--main { width: 76px; height: 76px; } .mm-screen-kiosk .mm-reader__text strong, .mm-screen-tablet .mm-reader__text strong { font-size: 22px; } .mm-screen-kiosk .mm-reader__text span, .mm-screen-tablet .mm-reader__text span { font-size: 18px; } .mm-screen-kiosk .mm-reader__speed, .mm-screen-tablet .mm-reader__speed { height: 64px; min-width: 76px; font-size: 20px; } .mm-ax-reading, .mm-ax-reading * { color: #0d2618 !important; } .mm-ax-reading { background: #dcfce7 !important; box-shadow: 0 0 0 5px #dcfce7; border-radius: 6px; } .mm-ax-live-focus { outline: 3px solid #15803d; outline-offset: 4px; } /* room under the page so the reader bar never covers the last block */ html.mm-ax-reader-on .mm-app { padding-bottom: 110px; } /* ---------- Teks Lebih Besar: the content scales (CSS zoom reflows like a larger browser zoom); fixed bars and sheets follow ---------- */ html[data-mm-text="1"] { --mm-zoom: 1.15; } html[data-mm-text="2"] { --mm-zoom: 1.3; } html[data-mm-text="3"] { --mm-zoom: 1.5; } html[data-mm-text] .mm-app, html[data-mm-text] body > .mm-sheet .mm-sheet__panel, html[data-mm-text] body > .mm-modal .mm-modal__panel { zoom: var(--mm-zoom); } html[data-mm-text] .mm-app { min-height: calc(100vh / var(--mm-zoom)); min-height: calc(100dvh / var(--mm-zoom)); } html[data-mm-text] .mm-page--poster, html[data-mm-text] .mm-kt { height: calc(100vh / var(--mm-zoom)); height: calc(100dvh / var(--mm-zoom)); } @media (min-width: 480px) { html[data-mm-text] .mm-app { min-height: calc((100vh - 48px) / var(--mm-zoom)); min-height: calc((100dvh - 48px) / var(--mm-zoom)); } html[data-mm-text] .mm-kiosk .mm-app { min-height: calc(100dvh / var(--mm-zoom)); } html[data-mm-text] .mm-page--poster { height: calc((100dvh - 48px) / var(--mm-zoom)); } } html[data-mm-text] .mm-denah__stage { zoom: calc(1 / var(--mm-zoom)); } /* the map canvas is not zoomed twice: its pins and pan maths stay at 1:1 */ html[data-mm-text] .mm-screen-tablet:has(.mm-t) .mm-app { zoom: 1; min-height: 100dvh; } /* the tablet layout is sized in em of 100vw / 48: the text scales through that unit instead */ html[data-mm-text="1"] .mm-screen-tablet:has(.mm-t) { --mm-tu: calc(100vw / 48 * 1.15); } html[data-mm-text="2"] .mm-screen-tablet:has(.mm-t) { --mm-tu: calc(100vw / 48 * 1.3); } html[data-mm-text="3"] .mm-screen-tablet:has(.mm-t) { --mm-tu: calc(100vw / 48 * 1.5); } /* ---------- Spasi Teks / Tinggi Garis (WCAG 1.4.12 values at the top level) ---------- */ html[data-mm-space="1"] :is(.mm-app, .mm-sheet__panel, .mm-modal__panel) *:not(svg *):not(.mm-pin *) { letter-spacing: 0.05em !important; word-spacing: 0.08em !important; } html[data-mm-space="2"] :is(.mm-app, .mm-sheet__panel, .mm-modal__panel) *:not(svg *):not(.mm-pin *) { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } html[data-mm-space="2"] :is(.mm-app, .mm-sheet__panel, .mm-modal__panel) :is(p, li) { margin-block-end: 0.5em; } html[data-mm-line="1"] :is(.mm-app, .mm-sheet__panel, .mm-modal__panel) *:not(svg *):not(.mm-pin *) { line-height: 1.5 !important; } html[data-mm-line="2"] :is(.mm-app, .mm-sheet__panel, .mm-modal__panel) *:not(svg *):not(.mm-pin *) { line-height: 1.8 !important; } /* ---------- Ramah Disleksia (Lexend, loaded only now) / Perataan Teks ---------- */ html[data-mm-dys] { --mm-font: "Lexend", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Yu Gothic UI", "Malgun Gothic", "Microsoft YaHei", Tahoma, sans-serif; } html[data-mm-dys] .mm-body { font-family: var(--mm-font); } html[data-mm-dys] :is(.mm-app, .mm-sheet__panel, .mm-modal__panel) *:not(svg *):not(.mm-pin *) { font-family: var(--mm-font); font-style: normal; } html[data-mm-align] :is(.mm-app, .mm-sheet__panel, .mm-modal__panel) :is(p, li, h1, h2, h3, h4, blockquote, figcaption, dd, dt, label, small, .mm-k__head, .mm-t__head, .mm-nf__card, .mm-hero__sub, .mm-count__text, .mm-foot) { text-align: start !important; text-align-last: auto !important; text-justify: auto; } /* ---------- Kontras Tinggi ---------- */ html[data-mm-contrast] { --mm-canvas: #fff; --mm-backdrop: #fff; --mm-input: #fff; --mm-chip: #fff; --mm-prefix: #fff; --mm-text: #000; --mm-text-2: #0d2618; --mm-text-3: #0d2618; --mm-muted: #0d2618; --mm-placeholder: #3d4f45; --mm-border: #0d2618; --mm-border-ui: #0d2618; --mm-border-soft: #0d2618; --mm-primary: #166534; --mm-primary-pressed: #14532d; --mm-ring: #000; --mm-ring-gap: #fff; --mm-warn-text: #451a03; --mm-danger-text: #9f1239; } html[data-mm-contrast] .mm-blob, html[data-mm-contrast] .mm-hero__pill, html[data-mm-contrast] .mm-hero__burst, html[data-mm-contrast] .mm-hero__arrow, html[data-mm-contrast] .mm-nf__art::before { display: none !important; } html[data-mm-contrast] :is(.mm-card, .mm-denah-card, .mm-btn--outline, .mm-btn--primary, .mm-btn--dark, .mm-lang, .mm-tag, .mm-pill-badge, .mm-nav__back, .mm-input, .mm-control, .mm-choice, .mm-pill-choice, .mm-lrow, .mm-fcard, .mm-quick__card, .mm-fact__icon, .mm-seg, .mm-bm, .mm-fab, .mm-sugg, .mm-lang-item, .mm-modal__panel, .mm-bottom-nav, .mm-nf__card, .mm-qopt, .mm-kcard, .mm-tcard) { border: 2px solid #0d2618 !important; } html[data-mm-contrast] .mm-hero__title, html[data-mm-contrast] .mm-hero__title * { color: #000 !important; } html[data-mm-contrast] .mm-tag { background: transparent; color: #000; } html[data-mm-contrast] .mm-fact__icon { background: transparent; } html[data-mm-contrast] .mm-denah-card__go { background: #0d2618; color: #fff; } html[data-mm-contrast] .mm-btn--primary { background: #166534; color: #fff; } html[data-mm-contrast] .mm-btn--outline { color: #000; } html[data-mm-contrast] .mm-ax-btn { background: #0d2618; color: #fff; } html[data-mm-contrast] .mm-bottom-nav__tab.is-active { color: #14532d; } /* ---------- Mode Gelap ---------- */ html[data-mm-dark] { color-scheme: dark; --mm-canvas: #0b1a12; --mm-backdrop: #050d09; --mm-card: #14281c; --mm-input: #102218; --mm-chip: #17301f; --mm-prefix: #17301f; --mm-dark: #1b3a28; --mm-mint: #1a4430; --mm-mint-50: #123324; --mm-sage: #1a3a28; --mm-cream: #132a1d; --mm-border: #2f5340; --mm-border-ui: #7fa690; --mm-border-soft: #2f5340; --mm-text: #ecf8f0; --mm-text-2: #cfe5d6; --mm-text-3: #b6d1c0; --mm-muted: #b0ccba; --mm-placeholder: #a3c2b0; --mm-primary-pressed: #86efac; --mm-danger-text: #fda4af; --mm-danger-bg: #3a1620; --mm-danger-border: #7f1d3a; --mm-warn-bg: #3a2a0a; --mm-warn-border: #7a5a14; --mm-warn-text: #fde68a; --mm-ring: #fff; --mm-ring-gap: #0b1a12; --mm-shadow-card: 0 8px 25px -5px rgba(0, 0, 0, 0.4); --mm-shadow-editorial: 0 20px 50px -12px rgba(0, 0, 0, 0.5); } html[data-mm-dark] .mm-blob { color: rgba(26, 68, 48, 0.55); } html[data-mm-dark] .mm-app { box-shadow: none; } html[data-mm-dark] .mm-logo__word b, html[data-mm-dark] .mm-hero__arrow, html[data-mm-dark] .mm-valid, html[data-mm-dark] .mm-bottom-nav__tab.is-active { color: #86efac; } html[data-mm-dark] .mm-hero__pill { background: #15803d; } html[data-mm-dark] .mm-hero__line2 > span:not(.mm-hero__pill) { color: #fff; } html[data-mm-dark] .mm-hero__burst { color: rgba(236, 248, 240, 0.8); } html[data-mm-dark] .mm-btn--outline { color: var(--mm-text); border-color: var(--mm-border-ui); } html[data-mm-dark] .mm-btn--outline .mm-btn__arrow { background: rgba(255, 255, 255, 0.14); color: #fff; } html[data-mm-dark] .mm-btn--dark { background: #1f4a33; border: 1px solid var(--mm-border-ui); } html[data-mm-dark] .mm-pill-badge, html[data-mm-dark] .mm-lang, html[data-mm-dark] .mm-nav__back, html[data-mm-dark] .mm-ax-btn { border-color: var(--mm-border-ui); } html[data-mm-dark] .mm-pill-badge { background: rgba(20, 40, 28, 0.8); color: var(--mm-text); } html[data-mm-dark] .mm-ax-btn { color: var(--mm-text); } html[data-mm-dark] .mm-ax-btn[aria-expanded="true"] { background: #15803d; color: #fff; } html[data-mm-dark] .mm-ax-btn--pill { color: #fff; } html[data-mm-dark] .mm-kcard__icon, html[data-mm-dark] .mm-tcard__icon, html[data-mm-dark] .mm-tcard__arrow, html[data-mm-dark] .mm-first__burst { color: var(--mm-text); } html[data-mm-dark] .mm-tcard__icon { background: var(--mm-mint); } html[data-mm-dark] .mm-tcard__arrow { background: var(--mm-mint); } html[data-mm-dark] .mm-tcard--qr { color: var(--mm-text); } html[data-mm-dark] .mm-kthanks .mm-app, html[data-mm-dark] .mm-thanks .mm-app, html[data-mm-dark] .mm-kthanks.mm-screen-kiosk, html[data-mm-dark] .mm-kthanks.mm-screen-tablet, html[data-mm-dark]:has(.mm-kthanks) { background: var(--mm-canvas); } html[data-mm-dark] .mm-poster img { filter: none; } html[data-mm-dark] .mm-switch::after { background: #fff; } html[data-mm-dark] .mm-input::placeholder, html[data-mm-dark] .mm-textarea::placeholder { color: var(--mm-placeholder); } html[data-mm-dark] .mm-input, html[data-mm-dark] .mm-textarea { color: var(--mm-text); } /* what sits on the map photo, a QR code or a printed poster keeps the light palette: those pictures stay as they are */ html[data-mm-dark] .mm-denah__world, html[data-mm-dark] .mm-qr-box, html[data-mm-dark] .mm-tcard__qr, html[data-mm-dark] .mm-kframe__qr, html[data-mm-dark] .mm-fcard__img, html[data-mm-dark] .mm-peek__top img { --mm-card: #fff; --mm-text: #0d2618; --mm-text-2: #375243; --mm-text-3: #526d5e; --mm-dark: #0d2618; --mm-border: #d5eadf; --mm-primary-pressed: #166534; --mm-mint: #dcfce7; --mm-mint-50: #ecfdf5; --mm-ring: #0d2618; --mm-ring-gap: #fff; } html[data-mm-dark] .mm-denah__stage { background: linear-gradient(180deg, #e7fbee, #d9f8e3); } html[data-mm-dark] .mm-denah__world .mm-pin__disc { color: #0d2618; } /* ---------- Kejenuhan (on : a filter there leaves position: fixed children alone) ---------- */ html[data-mm-sat="1"] { filter: saturate(0.5); } html[data-mm-sat="2"] { filter: grayscale(1); } /* ---------- Sorot Tautan ---------- */ html[data-mm-links] :is(.mm-app, .mm-sheet__panel, .mm-modal__panel) a[href]:not(.mm-skip), html[data-mm-links] :is(.mm-app, .mm-sheet__panel, .mm-modal__panel) a[href]:not(.mm-skip) :is(span, strong, b, p, small) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; } html[data-mm-links] :is(.mm-app, .mm-sheet__panel, .mm-modal__panel) a[href]:not(.mm-skip):not(.mm-logo):not(.mm-nav__back) { outline: 2px solid var(--mm-primary-pressed); outline-offset: 2px; } html[data-mm-links] .mm-app a[href]:not(.mm-btn):not(.mm-logo):not(.mm-nav__back):not([class*="card"]):not([class*="item"]) { background-color: rgba(250, 204, 21, 0.28); } html[data-mm-dark][data-mm-links] .mm-app a[href]:not(.mm-btn):not(.mm-logo):not(.mm-nav__back):not([class*="card"]):not([class*="item"]) { background-color: rgba(250, 204, 21, 0.18); } /* ---------- Sembunyikan Gambar (the map itself, the QR code, the logo and icons stay) ---------- */ html[data-mm-noimg] .mm-app img:not(.mm-denah__map):not(.mm-logo__tile img), html[data-mm-noimg] body > .mm-sheet img { display: none !important; } html[data-mm-noimg] .mm-app img[alt]:not([alt=""]):not(.mm-denah__map) { display: block !important; content: attr(alt); width: auto !important; height: auto !important; max-width: 100%; padding: 10px 14px; border: 1px dashed var(--mm-border-ui); border-radius: 12px; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--mm-text-2); background: var(--mm-chip); } html[data-mm-noimg] .mm-nf__art, html[data-mm-noimg] .mm-kden__map, html[data-mm-noimg] .mm-denah-card__map { display: none !important; } html[data-mm-noimg] .mm-k--welcome::before { background: var(--mm-dark) !important; } html[data-mm-noimg] .mm-t--welcome::before { background: var(--mm-dark) !important; } html[data-mm-noimg] .mm-fcard__img, html[data-mm-noimg] .mm-detail__media:not(:has(.mm-fbadge:not([hidden]))) { min-height: 0; } /* ---------- Animasi Dijeda (same as prefers-reduced-motion) ---------- */ html[data-mm-motion] *:not(.mm-count__fill), html[data-mm-motion] *:not(.mm-count__fill)::before, html[data-mm-motion] *:not(.mm-count__fill)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html[data-mm-motion] .mm-hero__burst, html[data-mm-motion] .mm-success__ring, html[data-mm-motion] .mm-kwait i, html[data-mm-motion] .mm-pin.is-target::before { animation: none !important; } html[data-mm-motion] .mm-count__fill { animation: none; transform: scaleX(var(--mm-left, 1)); } /* ---------- Kursor Besar ---------- */ html[data-mm-cursor], html[data-mm-cursor] * { cursor: url("data:image/svg+xml;utf8,") 6 4, auto !important; } html[data-mm-cursor] :is(a, button, [role="button"], [role="tab"], [role="radio"], summary, label, select, input[type="checkbox"], input[type="radio"], input[type="submit"], [data-choice] [data-value], .mm-star, .mm-pin), html[data-mm-cursor] :is(a, button, [role="button"], [role="tab"], label, .mm-pin) * { cursor: url("data:image/svg+xml;utf8,") 10 2, pointer !important; } html[data-mm-cursor] :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], textarea) { cursor: text !important; } /* ---------- Fokus Jelas ---------- */ html[data-mm-focus] .mm-body :focus-visible, html[data-mm-focus] .mm-ax :focus-visible { outline: 4px solid var(--mm-ring) !important; outline-offset: 3px !important; box-shadow: 0 0 0 3px var(--mm-ring-gap), 0 0 0 11px rgba(251, 191, 36, 0.75) !important; border-radius: inherit; } html[data-mm-focus] :is(.mm-field, .mm-lrow, .mm-qopt, .mm-country, .mm-lang-item, .mm-fact):has(:focus-visible) { background-color: #fef9c3 !important; outline: 3px dashed #b45309; outline-offset: 4px; } html[data-mm-focus][data-mm-dark] :is(.mm-field, .mm-lrow, .mm-qopt, .mm-country, .mm-lang-item, .mm-fact):has(:focus-visible) { background-color: #3a3410 !important; outline-color: #fbbf24; } /* ---------- Keterangan Alat: aria-label of icon-only buttons as a visible tip (kiosk: always visible, below the icon) ---------- */ html[data-mm-tips] [data-mm-rel] { position: relative; } html[data-mm-tips] [data-mm-tip]::after { content: attr(aria-label); position: absolute; top: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%); z-index: 70; padding: 5px 10px; border-radius: 8px; background: #0d2618; color: #fff; font: 700 12px/1.3 var(--mm-font); letter-spacing: 0 !important; white-space: nowrap; text-decoration: none; opacity: 0; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } [dir="rtl"] html[data-mm-tips] [data-mm-tip]::after, html[data-mm-tips][dir="rtl"] [data-mm-tip]::after { transform: translateX(50%); } html[data-mm-tips] [data-mm-tip="s"]::after { inset-inline-start: 0; transform: none; } html[data-mm-tips] [data-mm-tip="e"]::after { inset-inline-start: auto; inset-inline-end: 0; transform: none; } html[data-mm-tips] [data-mm-tip]:hover::after, html[data-mm-tips] [data-mm-tip]:focus-visible::after { opacity: 1; } html[data-mm-tips] :is(.mm-screen-kiosk, .mm-screen-tablet) [data-mm-tip]::after { opacity: 1; font-size: 14px; padding: 5px 12px; } html[data-mm-tips] [data-mm-tip-below="no"]::after { top: auto; bottom: calc(100% + 8px); } /* ---------- Layout helpers ---------- */ .mm-kw__top { width: 100%; } .mm-logo { flex: none; } .mm-logo__word { overflow-wrap: normal !important; white-space: nowrap; } /* Bigger text: the top bars may wrap to a second row instead of squeezing the logo */ html[data-mm-text] :is(.mm-nav, .mm-k__nav, .mm-k__bar) { flex-wrap: wrap; row-gap: 8px; } html[data-mm-text] .mm-nav--title { flex-wrap: nowrap; } html[data-mm-text] .mm-nav__actions { flex-wrap: wrap; justify-content: flex-end; } /* Dark mode: surfaces that were hard-coded light in app.css */ html[data-mm-dark] .mm-seg { background: rgba(16, 34, 24, 0.92); } html[data-mm-dark] .mm-quick__card.is-soon { background: #0f2118; } html[data-mm-dark] .mm-quick__card.is-soon .mm-quick__icon { background: #1d3a2a; } /* Bigger text / wider spacing / Lexend: single-line headings and chips may wrap instead of colliding */ html:is([data-mm-text], [data-mm-space], [data-mm-dys], [data-mm-line]) :is(.mm-feat__head h2, .mm-denah--kiosk .mm-quick__card strong, .mm-pills--wrap .mm-pill-choice, .mm-feat__badge) { white-space: normal; } html:is([data-mm-text], [data-mm-space], [data-mm-dys]) .mm-feat__head { flex-wrap: wrap; row-gap: 6px; } html[data-mm-space] .mm-body ::placeholder { letter-spacing: 0 !important; word-spacing: 0 !important; } html[data-mm-text] .mm-nav--title { flex-wrap: wrap; row-gap: 6px; } html[data-mm-text] .mm-nav--title .mm-nav__title { order: 3; flex: 1 0 100%; } html[data-mm-text] .mm-nav--title .mm-nav__actions--end { margin-inline-start: auto; } /* Bigger text: words keep their width in flex rows (break-word does not shrink min-content like "anywhere"), rows wrap */ html:is([data-mm-text], [data-mm-space], [data-mm-dys]) .mm-body :where(h1, h2, h3, p, label, strong, span, a) { overflow-wrap: break-word; } html:is([data-mm-text], [data-mm-space], [data-mm-dys]) :is(.mm-peek__actions, .mm-peek__top, .mm-detail__chips, .mm-peek__chips) { flex-wrap: wrap; } html:is([data-mm-text], [data-mm-space], [data-mm-dys]) .mm-peek__text { flex: 1 1 140px; } html:is([data-mm-text], [data-mm-space], [data-mm-dys]) .mm-peek__actions .mm-btn, html:is([data-mm-text], [data-mm-space], [data-mm-dys]) .mm-peek__actions .mm-listen { flex: 1 1 auto; min-width: max-content; } /* the language sheet opened from the menu stacks above it */ .mm-sheet[data-mm-lang-sheet] { z-index: 80; } /* tips of the map buttons (a vertical stack on the right edge) open sideways so they never cover their neighbours */ html[data-mm-tips] [data-mm-tip="l"]::after { top: 50%; inset-inline-start: auto; inset-inline-end: calc(100% + 8px); transform: translateY(-50%); }