/* Fonts: Open Sans for body (mirrors GoogleFonts.openSans), Playfair Display italic for the big titles (mirrors GoogleFonts.playfairDisplay italic 500). */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900&family=Playfair+Display:ital,wght@1,500&display=swap'); /* Material Symbols for event-type icons, matching the Flutter Icons.* set. */ @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0'); :root { /* Ported from pkgs/shared_ui/lib/src/theme/colors.dart */ --text: #333333; /* _Colors.black = ARGB(255,51,51,51) */ --link: #009DE6; /* _Colors.blue */ --coral: #FF6857; /* subtitle, bright action button, top-menu selection */ --light-orange: #FFC209; /* place icon / low cost */ --cloud: #F0EEE9; /* grayCloudDancer: dividers, card border, selected lang */ --cloud-dark: #C0BEBA; /* grayCloudDancer darkened .2: month header, app-bar tint */ --bg: #FFFFFF; /* Event genre colors (pkgs/shared_ui/lib/src/primitives/event_type.dart) */ --genre-constellations: #DAF0E8; --genre-education: #D4EFF8; --genre-seminar: #fbfdd7; --genre-conference: #FAD4D4; --genre-workshop: #FFEFD4; --content-width: 900px; --card-side: 424px; --card-corner-radius: 16px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; } body { background: var(--bg); color: var(--text); font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--link); } /* ---------- Language visibility ---------- Every localized block is rendered once per language; JS sets data-lang on and CSS reveals only the matching one. Defaults to English before JS runs (covers no-JS crawlers too). */ .lang { display: none; } html:not([data-lang]) .lang.lang-en, html[data-lang='en'] .lang.lang-en, html[data-lang='ru'] .lang.lang-ru, html[data-lang='de'] .lang.lang-de, html[data-lang='es'] .lang.lang-es { display: revert; } /* ---------- App bar ---------- */ .app-bar { position: sticky; top: 0; z-index: 10; width: 100%; background: var(--bg); box-shadow: 0 1px 0 var(--cloud); } .app-bar-inner { display: flex; /* Stretch children to the full bar height so the selected tab's underline lands on the gray divider at the bottom (like the Flutter tab indicator). */ align-items: stretch; gap: 12px; /* Fill the bar (up to the content width) so `margin-left: auto` on the menu can push it to the true right edge; without this the flex row shrink-wraps to its content and ends up centered. */ width: 100%; max-width: var(--content-width); margin: 0 auto; /* No bottom padding: tabs reach the divider so the indicator sits on it. */ padding: 10px 16px 0; } .app-bar.home .app-bar-inner { justify-content: flex-end; } .app-bar-logo { width: 46px; height: 46px; flex: none; align-self: center; cursor: pointer; } .app-bar-logo img { width: 100%; height: 100%; object-fit: contain; } .app-bar-spacer { flex: 1; } /* ---------- Menu ---------- */ .menu { display: flex; align-items: stretch; gap: 6px; /* Always pin the menu to the right edge of the app bar, on every page (including home, where there is no logo to push it over). */ margin-left: auto; } .menu a { display: flex; align-items: center; font-size: 24px; color: var(--text); text-decoration: none; padding: 6px 12px; white-space: nowrap; /* Straight underline flush with the divider; transparent until selected so there is no layout shift. */ border-bottom: 3px solid transparent; } .menu a:hover { background: var(--cloud); } .menu a.selected { font-weight: 900; border-bottom-color: var(--coral); } /* The wide-screen tab row. Must be a flex row so the (now flex) tab links flow horizontally and stretch to full height; hidden on narrow screens below. */ .menu-tabs { display: flex; align-items: stretch; gap: 6px; } /* Hamburger (narrow screens) — mirrors the Flutter _HamburgerMenu: the current page label (coral underline) next to a ⋮ dropdown, right-aligned. */ .menu-toggle, .menu-hamburger { display: none; } @media (max-width: 640px) { .menu-tabs { display: none; } .menu-hamburger { display: flex; align-items: stretch; justify-content: flex-end; gap: 8px; position: relative; } /* Current page, shown and clickable (navigates to itself). Straight coral underline flush with the divider. Selector is `.menu a.hamburger-selected` (not just `.hamburger-selected`) so it outranks `.menu a`, which would otherwise override the border-bottom back to transparent. */ .menu a.hamburger-selected { display: flex; align-items: center; font-size: 24px; font-weight: 900; color: var(--text); text-decoration: none; white-space: nowrap; padding: 6px 2px; border-bottom: 3px solid var(--coral); } .menu-dots { display: flex; align-items: center; font-size: 30px; line-height: 1; cursor: pointer; padding: 2px 8px; user-select: none; -webkit-user-select: none; } .menu-dropdown { display: none; position: absolute; right: 0; top: 100%; background: var(--bg); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-radius: 10px; padding: 8px 0; z-index: 20; min-width: 200px; } .menu-dropdown a { display: block; font-size: 20px; padding: 10px 24px; color: var(--text); text-decoration: none; white-space: nowrap; border-left: 4px solid transparent; } .menu-dropdown a:hover { background: var(--cloud); } /* The current page in the dropdown: bold with a coral marker. */ .menu-dropdown a.current { font-weight: 900; border-left-color: var(--coral); } .menu-toggle:checked~.menu-dropdown { display: block; } } /* ---------- Layout ---------- */ .content { max-width: var(--content-width); margin: 0 auto; padding: 24px 12px 0; display: flex; flex-direction: column; align-items: center; min-height: 60vh; } .screen { display: flex; flex-direction: column; align-items: center; width: 100%; } .app-column { width: 100%; max-width: 100%; margin: 0 auto; } .center { text-align: center; } .spacer-16 { height: 16px; } .spacer-32 { height: 32px; } /* ---------- Titles / typography ---------- */ .title1 { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; font-size: 86px; line-height: 0.87; text-align: center; white-space: pre-line; margin: 0; } .subtitle { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; font-size: 32px; line-height: 1; color: var(--coral); text-align: center; } .topic-header { font-weight: 900; font-size: 22px; color: var(--link); text-decoration: none; } .topic-header:hover { text-decoration: underline; } @media (max-width: 720px) { .title1 { font-size: 56px; } .subtitle { font-size: 26px; } } /* ---------- Markdown ---------- */ .markdown { width: 100%; } .markdown h1 { font-size: 26px; font-weight: 900; } .markdown h2 { font-weight: 900; font-size: 24px; line-height: 1.5; margin: 1.2em 0 0.3em; } .markdown h3 { font-weight: 700; font-size: 20px; line-height: 1.4; margin: 0.9em 0 0.2em; } .markdown p { font-size: 18px; margin: 0.5em 0; } .markdown a { color: var(--link); } .markdown ul { list-style: none; padding-left: 1.2em; margin: 0.4em 0; } .markdown ol { padding-left: 1.4em; margin: 0.4em 0; } .markdown ul li { position: relative; margin: 0.35em 0; } .markdown ul li::before { content: '\203A'; /* › arrow marker, mirrors the Flutter list marker */ position: absolute; left: -1em; color: var(--link); font-weight: 700; } .markdown img { max-width: 100%; height: auto; border-radius: 8px; } .center .markdown, .markdown.center { text-align: center; } /* ---------- Copy button ---------- */ .copy-btn { border: none; background: none; cursor: pointer; font-family: inherit; font-size: 0.9em; line-height: 1; padding: 0 4px; border-radius: 6px; color: var(--link); vertical-align: baseline; transition: background 0.15s ease, color 0.15s ease; } .copy-btn:hover { background: var(--cloud); } .copy-btn.copied { color: #2e7d32; } /* ---------- Language switch ---------- */ .lang-switch { display: inline-flex; border: 1px solid var(--cloud-dark); border-radius: 20px; overflow: hidden; margin: 20px 0; } .lang-switch button { border: none; background: transparent; font-family: inherit; font-size: 16px; padding: 8px 16px; cursor: pointer; color: var(--text); border-left: 1px solid var(--cloud-dark); } .lang-switch button:first-child { border-left: none; } html[data-lang='en'] .lang-switch [data-lang-opt='en'], html[data-lang='ru'] .lang-switch [data-lang-opt='ru'], html[data-lang='de'] .lang-switch [data-lang-opt='de'], html[data-lang='es'] .lang-switch [data-lang-opt='es'], html:not([data-lang]) .lang-switch [data-lang-opt='en'] { background: var(--cloud); font-weight: 800; } .lang-switch.right { align-self: flex-end; } /* Calendar language filter: active state toggled by JS via `.selected`. */ .cal-lang button.selected { background: var(--cloud); font-weight: 800; } /* Master page: pure-CSS language toggle (radio buttons reveal one block). */ .master-radio { display: none; } .master-part { display: none; } #ml-0:checked~.master-part-0, #ml-1:checked~.master-part-1, #ml-2:checked~.master-part-2, #ml-3:checked~.master-part-3 { display: block; } .master-lang label { cursor: pointer; padding: 8px 16px; font-size: 16px; border-left: 1px solid var(--cloud-dark); } .master-lang label:first-child { border-left: none; } #ml-0:checked~.master-lang label[for='ml-0'], #ml-1:checked~.master-lang label[for='ml-1'], #ml-2:checked~.master-lang label[for='ml-2'], #ml-3:checked~.master-lang label[for='ml-3'] { background: var(--cloud); font-weight: 800; } /* ---------- Buttons ---------- */ .action-btn { display: inline-block; background: var(--coral); color: #fff; font-size: 24px; font-weight: 500; text-decoration: none; padding: 15px 30px; border-radius: 24px; border: none; cursor: pointer; } .action-btn:hover { filter: brightness(0.95); } /* ---------- Avatars ---------- */ .circle-avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; flex: none; } .square-avatar { width: 100px; height: 100px; border-radius: var(--card-corner-radius); border: 0.5px solid var(--text); object-fit: cover; flex: none; overflow: hidden; } /* ---------- Home ---------- */ .home { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; } .home-logo { width: 183px; margin: 40px 0 25px; } .home-topics { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 16px; margin-top: 50px; width: 100%; } .topic { width: var(--card-side); max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .topic-content { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 26px; } /* ---------- Calendar ---------- */ .calendar-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 20px 0; position: relative; width: 100%; } .calendar-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; } .calendar-tabs button { border: none; background: transparent; font-family: inherit; font-size: 22px; font-weight: 700; padding: 8px 16px; cursor: pointer; color: var(--text); border-bottom: 3px solid transparent; } .calendar-tabs button.selected { border-bottom-color: var(--link); } .add-event { position: absolute; top: -8px; right: 0; } .add-event a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cloud); color: var(--text); font-size: 28px; text-decoration: none; } .calendar-tab-panel { display: none; width: 100%; } .calendar-tab-panel.active { display: block; } .month { display: flex; flex-direction: column; align-items: center; width: 100%; } .month-header { font-weight: 900; font-size: 28px; color: var(--cloud-dark); margin: 32px 0 18px; } .month.empty { display: none; } .cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; width: 100%; } /* ---------- Event card ---------- */ .event-card { width: var(--card-side); /* A perfect square, mirroring the Flutter card (side x side). */ height: var(--card-side); max-width: 100%; position: relative; border: 1px solid var(--cloud); border-radius: var(--card-corner-radius); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); background: var(--bg); overflow: hidden; text-decoration: none; color: var(--text); display: flex; flex-direction: column; } /* Master-page cards (no master row) size to their content instead. */ .event-card--no-master { height: auto; } .event-card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); } .event-card.hidden { display: none; } .type-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 200px; max-width: 60%; padding: 8px 8px 8px 16px; font-weight: 900; margin-left: auto; border-bottom-left-radius: var(--card-corner-radius); } /* Inside a card the label floats in the top-right corner (overlapping) so it doesn't take a full row of vertical space above the content. */ .event-card .type-label { position: absolute; top: 0; right: 0; margin-left: 0; } .type-label.rounded { border-top-right-radius: var(--card-corner-radius); } .type-icon { font-size: 28px; line-height: 1; flex: none; } /* Material Symbols icon (school / groups_2 / apps / handyman). */ .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 28px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Custom constellations glyph, tinted to the current text color via a mask. */ .genre-svg { display: inline-block; width: 28px; height: 28px; background-color: currentColor; -webkit-mask: url('/icons/constellations.svg') center / contain no-repeat; mask: url('/icons/constellations.svg') center / contain no-repeat; } .card-body { flex: 1 1 auto; min-height: 0; /* Top padding = the space above the avatar (space 1). */ padding: 22px 20px 18px; display: flex; flex-direction: column; gap: 10px; } /* Without a master row the title is at the top, so leave room for the overlapping type label. */ .event-card--no-master .card-body { padding-top: 48px; } .card-master { display: flex; align-items: center; gap: 32px; } .card-master .circle-avatar { width: 150px; height: 150px; } .card-master .name { font-weight: 900; font-size: 18px; /* Clamp long master names to two lines (mirrors the Flutter AppText.bold maxLines: 2) so they can't blow out the square card. */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-title { font-weight: 900; font-size: 18px; width: 100%; text-align: left; flex-shrink: 0; /* Always a single line, with an ellipsis if it's too long. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .divider { height: 1px; background: var(--cloud); width: 100%; } .card-row { /* Extra room above the date row (space 3), on top of the card-body gap. */ margin-top: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; } /* Left column (period + place): fills the remaining width and left-aligns its content (mirrors the Flutter Expanded). min-width:0 lets the place clamp. */ .card-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .card-period { display: inline-block; padding: 0 2px; } .card-place { margin-top: 4px; width: 100%; text-align: left; /* Clamp long place names to two lines with an ellipsis (mirrors the Flutter AppText maxLines: 2). */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-more { margin-top: auto; text-align: right; color: var(--link); } .card-more a { text-decoration: none; } /* ---------- Event / master detail ---------- */ .detail { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; width: 100%; max-width: 640px; } .detail .event-title { font-weight: 900; font-size: 22px; /* Double the space between the title and the master avatar below it (this margin adds to the .detail flex gap: 16 + 16 = 32). */ margin-bottom: 16px; } .detail .description { max-width: 500px; } .place-view { display: flex; flex-direction: column; align-items: center; gap: 8px; } .location-map { width: 100%; max-width: 500px; border-radius: var(--card-corner-radius); overflow: hidden; border: 1px solid var(--cloud); } .location-map svg { display: block; width: 100%; height: auto; background: var(--bg); } .map-country { fill: var(--cloud); stroke: var(--bg); stroke-width: 0.3; } .map-marker { fill: var(--coral); stroke: var(--bg); stroke-width: 1.5; } /* ---------- Contact / about ---------- */ .member { display: flex; flex-direction: column; align-items: flex-start; margin: 16px 0; } .member .circle-avatar { margin: 22px; } /* ---------- Footer ---------- */ .footer { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 210px; padding-bottom: 57px; } .footer .telegram-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; } .footer .version { font-size: 12px; color: var(--text); } /* ---------- Debug page (/debug) ---------- */ .debug { align-items: stretch; max-width: 900px; } .debug h2 { font-weight: 900; font-size: 24px; margin: 36px 0 12px; } .debug-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .debug-list { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }