/* ===================================================================== meta-design: tokens + structure --------------------------------------------------------------------- This file is skin-independent. It holds: 1. design tokens for the light and dark modes (data-mode on ) 2. structural layout that every skin shares (grids, sticky bar, graphic sizing, switcher chrome) Decoration (colours, borders, radii, type) belongs to a skin; see skins.js. Native is the default skin and lives there too. ===================================================================== */ :root { /* brand palette, mode-independent */ --amber: #F0A030; --amber-deep: #D98A12; --font: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --t: .25s ease; --radius: 14px; --radius-sm: 8px; --maxw: 960px; /* light mode tokens */ --bg: #FFFFFF; --surface: #FFFFFF; --ink: #1B2430; --granite: #2A3540; --fog: #EEF1F4; --fog-deep: #D8DFE5; --muted: #5F6D79; --amber-tint: #FCEFD9; --ok: #1F7A4D; --err: #B3261E; --shadow: 0 10px 30px rgba(27, 36, 48, .08); /* graphics tokens (room + map) */ --g-wall: #EEF1F4; --g-floor: #D8DFE5; --g-skirt: #C9D3DC; --g-line: #2A3540; --g-night: #2A3540; --g-night-deep: #1B2430; --g-paper: #FFFFFF; --g-cloth: #DCE3E9; --g-cloth-2: #E9EDF1; --g-wood: #B59A7C; --g-wood-deep: #A98A6B; --g-rubber: #B4433A; --g-card: #E3BE86; --g-card-deep: #C79A5A; --g-sea: #D6E2EA; --g-river: #B8CAD8; --g-label: #7A8B99; --g-steam: #AEBAC4; /* icon tokens (used by the icon renderers) */ --icon-stroke: var(--granite); --icon-fill: var(--amber); --icon-fill-2: var(--amber-tint); --icon-depth: #7A4C0A; --icon-shadow: rgba(27, 36, 48, .18); /* declarations: the default icon style for the page; a skin or a theme can override, and any icon can be overridden individually with --icon-, e.g. --icon-box: "3d-dpd"; */ --icon-style: line; color-scheme: light; } html[data-mode="dark"] { --bg: #0F151C; --surface: #161E27; --ink: #EEF1F4; --granite: #C9D3DC; --fog: #1E2731; --fog-deep: #2E3A47; --muted: #9AA7B3; --amber-tint: #3A2C15; --ok: #4CC38A; --err: #F28B82; --shadow: 0 10px 30px rgba(0, 0, 0, .45); --g-wall: #1E2731; --g-floor: #161E27; --g-skirt: #2E3A47; --g-line: #C9D3DC; --g-night: #0B1016; --g-night-deep: #05080B; --g-paper: #EEF1F4; --g-cloth: #33414F; --g-cloth-2: #3D4C5B; --g-wood: #8A7159; --g-wood-deep: #6F5A46; --g-rubber: #B4433A; --g-card: #C79A5A; --g-card-deep: #9A7440; --g-sea: #1C2A36; --g-river: #33506A; --g-label: #8A9AA8; --g-steam: #5F6D79; --icon-stroke: #C9D3DC; --icon-depth: #5A3706; --icon-shadow: rgba(0, 0, 0, .5); color-scheme: dark; } /* ---------- base ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html:not([data-md-ready]) body { opacity: 0; } body { margin: 0; background: var(--bg); color: var(--ink); transition: background var(--t), color var(--t); } button { font: inherit; } svg text { font-family: var(--font); } [hidden] { display: none !important; } /* ---------- structure shared by every skin ---------- */ .md-main { max-width: var(--maxw); margin: 0 auto; padding-inline: 20px; padding-bottom: 120px; } .md-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 0 8px; } .md-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: center; padding: 24px 0 8px; } .md-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } .md-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .md-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .md-kits { display: grid; gap: 12px; } .md-addons { display: grid; gap: 8px; } .md-section { padding: 34px 0 6px; } @media (max-width: 720px) { .md-hero, .md-cols, .md-steps { grid-template-columns: 1fr; } .md-hero { gap: 18px; } } @media (max-width: 460px) { .md-two { grid-template-columns: 1fr; } } /* graphics */ md-graphic { display: block; } md-graphic svg { display: block; width: 100%; height: auto; direction: ltr; } md-graphic[name="room"] svg { border-radius: 18px; background: var(--g-wall); } md-graphic[name="map"] svg { max-width: 300px; margin: 0 auto; } md-graphic[name="room"] .g-arrival, md-graphic[name="room"] .g-winter { opacity: 0; transition: opacity var(--t); } md-graphic[name="room"][state~="arrival"] .g-arrival, md-graphic[name="room"][state~="winter"] .g-winter { opacity: 1; } md-graphic[name="room"] .g-base { opacity: 1; transition: opacity var(--t); } md-graphic[name="room"][state~="arrival"] .g-base { opacity: 0; } md-graphic[name="map"] .stop circle { transition: r var(--t), fill var(--t); } md-graphic[name="map"] .stop text { font-size: 12px; fill: var(--g-label); } md-graphic[name="map"] .stop.on circle { fill: var(--amber); r: 9; } md-graphic[name="map"] .stop.on text { fill: var(--ink); font-weight: 700; } md-graphic[name="map"] .anywhere { opacity: 0; transition: opacity var(--t); } md-graphic[name="map"][state~="anywhere"] .anywhere { opacity: 1; } /* icons: every renderer produces */ md-icon { display: inline-block; width: 1em; height: 1em; line-height: 0; vertical-align: -0.15em; } md-icon svg { width: 100%; height: 100%; display: block; overflow: visible; } md-icon[size="s"] { width: 24px; height: 24px; } md-icon[size="m"] { width: 34px; height: 34px; } md-icon[size="l"] { width: 44px; height: 44px; } /* geometry sheet: shapes inherit fill/stroke from the that instantiates them */ #md-icon-defs rect, #md-icon-defs circle, #md-icon-defs ellipse { fill: var(--md-shape-fill, none); } #md-icon-defs path { fill: var(--md-path-fill, none); } /* packages */ md-package { display: inline-block; } md-package[name="PaymentGateway"] { display: block; } .md-pay { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; border-radius: 999px; padding: 12px 20px; border: 0; cursor: pointer; font-size: 16px; line-height: 1.2; } .md-pay svg { width: 22px; height: 22px; flex: none; } .md-pay .md-pay-amount { font-weight: 800; } .md-pay-note { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); } .md-pay[data-provider="monobank"] { background: #111111; color: #FFFFFF; } .md-pay[data-provider="stripe"] { background: #635BFF; color: #FFFFFF; } .md-pay[data-provider="paypal"] { background: #FFC439; color: #003087; } .md-pay[data-provider="none"] { background: var(--fog); color: var(--ink); } /* switcher (mode / language / skin) */ .md-switcher { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .md-seg { display: inline-flex; border: 2px solid var(--fog-deep); border-radius: 999px; padding: 2px; background: var(--surface); } .md-seg button { border: 0; background: transparent; color: var(--muted); border-radius: 999px; width: 34px; height: 30px; display: grid; place-items: center; cursor: pointer; padding: 0; } .md-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); } .md-seg button:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; } .md-seg svg { width: 18px; height: 18px; } .md-switcher .md-ico use { stroke: currentColor; } .md-sel { position: relative; display: inline-flex; align-items: center; } .md-sel select { appearance: none; -webkit-appearance: none; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); background: var(--surface); border: 2px solid var(--fog-deep); border-radius: 999px; padding: 6px 30px 6px 34px; cursor: pointer; max-width: 170px; } .md-sel select:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; } .md-sel > svg { position: absolute; left: 11px; width: 16px; height: 16px; pointer-events: none; color: var(--muted); } .md-sel::after { content: ""; position: absolute; right: 13px; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); pointer-events: none; } [dir="rtl"] .md-sel select { padding: 6px 34px 6px 30px; } [dir="rtl"] .md-sel > svg { left: auto; right: 11px; } [dir="rtl"] .md-sel::after { right: auto; left: 13px; } .md-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } html { scroll-behavior: auto; } }