@charset "UTF-8"; @font-face { font-family: "Inter"; src: url("../../media/fonts/inter/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../../media/fonts/inter/InterVariable-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } :root { /* Color variables */ --main_color: #0093a5; --main_color_lighter: #0092a5c9; --main_color_lighter1: #0092a59c; --main_color_lighter2: #0092a56e; --main_color_lighter3: #0092a547; --main_color_lighter4: #0092a527; --main_color_lighter5: #0092a50f; --main_color_darker: #007584; --main_color_darker1: #005561; --main_color_darker2: #004650; --main_color_darker3: #00353c; --secondary_color: #c35900; --secondary_color_lighter1: #de7218; --secondary_color_lighter2: #f48b33; --secondary_color_lighter3: #ffa85f; --secondary_color_lighter4: #ffc594; --secondary_color_darker1: #ffe1c8; --bg_color: #f5fafd; --bg_color_darker: #f4faff; --bg_color_darker1: #eaf1f8; --bg_color_darker2: #e8eef4; --bg_color_darker3: #cfdde3; --border_color: #e5e5e5; --border_color_lighter: #f0f0f0; --border_color_lighter1: #f4f4f4; --border_color_lighter2: #f6f6f6; --border_color_darker: #ddd; --border_color_darker1: #d8d8d8; --border_color_darker2: #ccc; --white_color: #fff; --light_gray_color: #f5f5f5; --green_color: #13972f; --green_color_lighter: #42be5d; --warning_color: #d4792f; --warning_color_lighter1: #e38c45; --warning_color_lighter2: #d4792f90; --dark_red: #b93333; --light_red: #e44040; --light_red_1: #f65f5f; --light_red_2: #ffa0a0; --text_color: #666; --text_color_lighter1: #888; --text_color_lighter2: #aaa; --popover_shadow: 0 2px 10px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04); --app_overlay_z: 1400; --scrollbar-width: calc(100vw - 100%); } * { box-sizing: border-box; outline: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-family: "Inter", sans-serif; font-size: 100%; color: var(--text_color); transition: 0.1s; scroll-behavior: smooth; /* scrollbar-gutter: stable; */ -webkit-tap-highlight-color: transparent; /* For Chrome and Safari */ user-select: text; -moz-user-select: text; -ms-user-select: text; /* cursor: default; Prevents pointer cursor which may trigger highlights */ } /* width */ ::-webkit-scrollbar { width: 8px; height: 10px; } /* Track */ ::-webkit-scrollbar-track { background: #eee; border-radius: 20px; } /* Handle */ ::-webkit-scrollbar-thumb { background: var(--border_color_darker); border-radius: 10px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #bbb; } *::-webkit-scrollbar, *::-webkit-scrollbar-track, *::-webkit-scrollbar-thumb, *::-webkit-scrollbar-corner { box-shadow: none !important; } body, html { overflow: hidden; height: 100%; margin: 0; padding: 0; background: #fff; scrollbar-gutter: stable; } /* * Listing pages (gallery, events, projects, finances, documents, history) * mark their #main_container with `.native_scroll` to opt OUT of the app's * default viewport-locked layout and use the browser's own document * scrollbar instead of an inner scroll container. * * `:has()` keeps this reactive across HTMX navigation: the / * tags persist between page swaps, but #main_container (the hx-target) is * replaced, so the rule re-evaluates whenever the active page changes. * * The root keeps a stable scrollbar gutter so moving between short and long * native-scroll pages does not nudge the content sideways. */ html:has(#main_container.native_scroll) { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; } body:has(#main_container.native_scroll) { height: auto; min-height: 100%; overflow: visible; } #loading { position: fixed; inset: 0 0 auto; z-index: 9999; width: 100%; height: 2.5px; pointer-events: none; } #loading #loader_line { width: 0; height: 100%; margin: auto; background: var(--main_color); } #loading.htmx-request #loader_line { animation: racinageLoadingBar 0.4s linear infinite; } @keyframes racinageLoadingBar { from { width: 0; } to { width: 100%; } } html:has(> body > #main_container.manage_main), body:has(> #main_container.manage_main) { scrollbar-gutter: auto; } html:has(.tree_container), body:has(.tree_container) { scrollbar-gutter: auto; } .family_switcher_view_all { position: sticky; bottom: -0.5rem; min-height: 40px; display: flex; align-items: center; justify-content: center; margin: 0.5rem -0.1rem -0.5rem; padding: 0.55rem 0.75rem; border-top: 1px solid var(--border_color); background: var(--white_color); color: var(--main_color_darker); font-size: 0.75rem; font-weight: 700; text-decoration: none; } .family_switcher_view_all:hover { background: var(--main_color_lighter5); } #main_container.manage_main { scrollbar-gutter: auto; animation: none !important; transition: none !important; transform: none !important; scroll-behavior: auto; } #main_container.manage_main .manage_page, #main_container.manage_main .manage_page *, #main_container.manage_main .manage_page *::before, #main_container.manage_main .manage_page *::after { animation: none !important; transition: none !important; scroll-behavior: auto; } #main_container.manage_main .manage_content_inner, #main_container.manage_main .manage_section_header, #main_container.manage_main .manage_section_body, #main_container.manage_main .stats_redesign_container { opacity: 1 !important; transform: none !important; } #main_container.manage_main .manage_family_icon_picker { min-width: 0; margin: 0; padding: 0; border: 0; } #main_container.manage_main .manage_family_icon_picker legend { margin-bottom: 6px; padding: 0; color: var(--text_color); font-size: 0.8125rem; font-weight: 600; } #main_container.manage_main .manage_family_icon_picker .manage_family_icon_options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } #main_container.manage_main .manage_family_icon_picker label { position: relative; min-width: 0; cursor: pointer; } #main_container.manage_main .manage_family_icon_picker input { position: absolute; width: 1px; height: 1px; opacity: 0; } #main_container.manage_main .manage_family_icon_picker .manage_family_icon_choice { display: grid; place-items: center; gap: 3px; min-height: 58px; padding: 6px 4px; border: 1px solid var(--border_color); border-radius: 8px; color: var(--text_color_lighter1); background: var(--bg_color); } #main_container.manage_main .manage_family_icon_picker .manage_family_icon_choice svg { width: 24px; height: 24px; fill: currentColor; } #main_container.manage_main .manage_family_icon_picker .manage_family_icon_choice small { max-width: 100%; overflow: hidden; color: inherit; font-size: 0.7rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } #main_container.manage_main .manage_family_icon_picker input:checked + .manage_family_icon_choice { border-color: var(--main_color_lighter3); color: var(--main_color); background: var(--main_color_lighter5); } #main_container.manage_main .manage_family_icon_picker input:focus-visible + .manage_family_icon_choice { outline: 2px solid var(--main_color); outline-offset: 2px; } /* * Fill at least the viewport (below the sticky header) so the container's own * background always covers the visible area. Without this, short content left * the page background cut off partway down with the body colour showing * underneath. Using the container's own background keeps light and dark mode * correct automatically. */ #main_container.native_scroll { height: auto; min-height: calc(100vh - 3.4375rem); overflow: visible; } img, svg { display: block; width: 100%; object-fit: cover; } .family_switcher_dropdown, .global_search_panel, .header_notifications_dropdown, .manage_new_family_popover, .popup_user_results_popover, .pwa_install_popover, .layout_dropdown_menu, .public_language_menu, .manage_user_menu { box-shadow: var(--popover_shadow); } .family_switcher_group + .family_switcher_group { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid var(--border_color_lighter); } .family_switcher_group_title { margin: 0.25rem 0.5rem 0.35rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text_color_lighter1); } .racinage_modal_backdrop, .tree_modal_backdrop, .onboarding_backdrop, .announcement_popup_backdrop, .gallery_dialog_backdrop, .events_modal_backdrop, .manage_popup_overlay, .transfer_modal_backdrop, .summary_share_backdrop, .manage_family_update_backdrop, .manage_family_public_backdrop, .manage_collab_invites_modal, .pwa_collab_invite_backdrop, .plugin_modal_backdrop, .document_modal_backdrop, .history_modal_backdrop { z-index: var(--app_overlay_z); } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: 600; } p { margin: 0; padding: 0; font-size: 1rem; font-weight: 400; } a { text-decoration: none; } img, svg { display: block; width: 100%; object-fit: cover; } hr { width: 100%; height: 0.0313rem; margin: 0.375rem auto 0.375rem auto; background-color: var(--border_color_lighter); border: none; } .button1, .button2, .button3 { margin: 0; padding: 12px 15px; background: var(--main_color); border: 1px solid var(--main_color); border-radius: 10px; text-transform: uppercase; text-align: center; font-size: 15px; font-weight: 500; color: #fff; transition: 0.1s; cursor: pointer; } .button1:hover, .button2:hover, .button3:hover { background: var(--secondary_color); border: 1px solid var(--secondary_color); color: #fff !important; } .button1.smaller, .button2.smaller, .button3.smaller { padding: 8px 12px; border-radius: 12px; } .button1.thinner, .button2.thinner, .button3.thinner { padding: 6px 12px; border-radius: 6px; } .button1.much_thinner, .button2.much_thinner, .button3.much_thinner { padding: 3px 10px; border-radius: 4px; } .button1.larger, .button2.larger, .button3.larger { padding: 12px 20px; } .button1._100_percent_width, .button2._100_percent_width, .button3._100_percent_width { width: 100%; } .button1.round_radius, .button2.round_radius, .button3.round_radius { border-radius: 50px; } .button1.full_width, .button2.full_width, .button3.full_width { display: inline-block; width: 100%; text-align: center; } .button1.left_padding, .button2.left_padding, .button3.left_padding { margin: 0 0 0 5px; } .button1.green, .button2.green, .button3.green { background: var(--green_color); border: 1px solid var(--green_color); color: #fff; } .button1.green:hover, .button2.green:hover, .button3.green:hover { background: var(--green_color); border: 1px solid var(--green_color); } .button1.red, .button2.red, .button3.red { background: var(--dark_red); border: 1px solid var(--dark_red); color: #fff; } .button1.red:hover, .button2.red:hover, .button3.red:hover { background: var(--light_red); border: 1px solid var(--light_red); } .button2 { background: var(--bg_color_darker1); border: 1px solid var(--bg_color_darker2); color: #555; } .button2.hover { background: var(--secondary_color); border: 1px solid var(--secondary_color); color: #fff !important; } .button3 { background: transparent; border: 1px solid #aaa; color: #fff; } .back_to_top { position: fixed; display: grid; place-items: center; left: 20px; bottom: 20px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--main_color); border-radius: 50%; background: var(--main_color); text-decoration: none; color: #fff !important; cursor: pointer; z-index: 10; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, background-color 0.18s ease; } .back_to_top.is_visible { opacity: 1; visibility: visible; pointer-events: auto; } .back_to_top:hover { background: var(--secondary_color); border-color: var(--secondary_color); } .back_to_top:focus-visible { outline: 3px solid var(--secondary_color_lighter4); outline-offset: 3px; } .back_to_top svg { display: block; width: 22px; height: 22px; color: #fff; fill: #fff; transform: rotate(-90deg); } .pwa_install_popover { position: fixed; left: 15px; right: 15px; bottom: 15px; z-index: 1250; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 32px; gap: 10px; align-items: center; max-width: 560px; margin: 0 auto; padding: 10px; border: 1px solid var(--border_color); border-radius: 8px; background: rgba(255, 255, 255, 0.97); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .pwa_install_popover.visible { opacity: 1; pointer-events: auto; } .pwa_install_popover .pwa_install_icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border_color); background: var(--bg_color); overflow: hidden; } .pwa_install_popover .pwa_install_icon img { width: 100%; height: 100%; object-fit: cover; } .pwa_install_popover .pwa_install_copy { min-width: 0; } .pwa_install_popover .pwa_install_copy strong { display: block; color: var(--text_color); font-size: 14px; line-height: 1.15; } .pwa_install_popover .pwa_install_copy span { display: block; margin-top: 2px; color: var(--text_color_lighter1); font-size: 12px; line-height: 1.3; } .pwa_install_popover .pwa_install_button, .pwa_install_popover .pwa_install_close { border: 1px solid var(--border_color); border-radius: 7px; cursor: pointer; font-weight: 700; } .pwa_install_popover .pwa_install_button { padding: 8px 12px; background: var(--main_color); border-color: var(--main_color); color: #fff; } .pwa_install_popover .pwa_install_close { width: 32px; height: 32px; background: var(--border_color_lighter); color: var(--text_color_lighter1); font-size: 20px; line-height: 1; } .shared_link_main { min-height: calc(100dvh - var(--header_height, 64px)); background: var(--bg_color); } .shared_link_page { max-width: 900px; display: grid; align-content: start; gap: 18px; padding-top: clamp(24px, 5vw, 58px); } .shared_link_header .page_kicker { margin: 0 0 6px; color: var(--main_color); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .shared_link_card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 15px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--border_color); border-radius: 14px; background: var(--white_color); } .shared_link_card .shared_link_icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: var(--main_color_lighter5); color: var(--main_color); } .shared_link_card .shared_link_icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .shared_link_card .shared_link_content { min-width: 0; display: grid; gap: 7px; } .shared_link_card .shared_link_content small { color: var(--main_color); font-weight: 800; } .shared_link_card .shared_link_content h2, .shared_link_card .shared_link_content p { margin: 0; } .shared_link_card .shared_link_content h2 { color: var(--text_color); font-size: clamp(19px, 3vw, 25px); } .shared_link_card .shared_link_content p { color: var(--text_color_lighter1); line-height: 1.55; } .shared_link_card .shared_link_content .shared_link_url { overflow: hidden; color: var(--main_color); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .shared_link_card footer { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .shared_link_card footer form { margin: 0; } .shared_link_card footer a, .shared_link_card footer button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .shared_link_queue_note { margin: 0; color: var(--text_color_lighter1); text-align: center; } .shared_link_empty { display: grid; justify-items: start; gap: 10px; padding: 24px; border: 1px solid var(--border_color); border-radius: 14px; background: var(--white_color); } .shared_link_empty h2, .shared_link_empty p { margin: 0; } .shared_link_empty p { color: var(--text_color_lighter1); } @media (max-width: 520px) { .shared_link_card { grid-template-columns: 1fr; } .shared_link_card .shared_link_icon { width: 46px; height: 46px; } .shared_link_card footer { grid-column: 1; display: grid; } .shared_link_card footer a, .shared_link_card footer button, .shared_link_card footer form { width: 100%; } .pwa_install_popover { position: fixed; grid-template-columns: 34px minmax(0, 1fr); padding-right: 10px; } .pwa_install_popover .pwa_install_icon { width: 34px; height: 34px; } .pwa_install_popover .pwa_install_copy { padding-right: 38px; } .pwa_install_popover .pwa_install_button { grid-column: 1/-1; width: 100%; } .pwa_install_popover .pwa_install_close { position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; } } .display_block { display: block; } .text_center { text-align: center; } .display_grid { display: grid; gap: 1rem; } .display_grid.gap0 { gap: 0px; } .display_grid.gap05 { gap: 0.5rem; } .display_grid.gap1 { gap: 1rem; } .display_grid.gap15 { gap: 1.5rem; } .display_grid.gap2 { gap: 2rem; } .display_grid.gap3 { gap: 3rem; } .display_grid.gap4 { gap: 4rem; } .display_grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .display_grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .display_grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .display_grid.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .display_grid.auto2 { grid-template-columns: auto auto; } .display_grid.auto3 { grid-template-columns: auto auto auto; } .display_grid.auto4 { grid-template-columns: auto auto auto auto; } .display_flex { display: flex; justify-content: center; align-items: center; } .display_flex.center_center { justify-content: center; } .display_flex.left_center { justify-content: left; } .display_flex.text_align_left { text-align: left; } .display_flex.right_center { justify-content: right; } .display_flex.text_align_right { text-align: right; } .display_flex.center_top { align-items: top; } .display_flex.center_bottom { align-items: bottom; } .display_flex.top_right { justify-content: right; } .display_flex.left_top { justify-content: left; align-items: start; } .display_flex.left_bottom { justify-content: left; align-items: bottom; } .display_flex.right_top { justify-content: right; align-items: start; } .display_flex.right_bottom { justify-content: right; align-items: end; } .text_non_wrap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .limit_lines { flex-shrink: 0; text-align: left; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .limit_lines.l1 { -webkit-line-clamp: 1; line-clamp: 1; } .limit_lines.l2 { -webkit-line-clamp: 2; line-clamp: 2; } .limit_lines.l3 { -webkit-line-clamp: 3; line-clamp: 3; } .limit_lines.l4 { -webkit-line-clamp: 4; line-clamp: 4; } .limit_lines.l5 { -webkit-line-clamp: 5; line-clamp: 5; } .limit_lines.l6 { -webkit-line-clamp: 6; line-clamp: 6; } .align_center { text-align: center; } /* Hide the default checkbox/radio and draw a custom one */ input[type=checkbox], input[type=radio] { appearance: none; -webkit-appearance: none; width: 28px !important; height: 28px !important; padding: 10px !important; border: 2px solid var(--border_color_darker); border-radius: 6px; outline: none; cursor: pointer; position: relative; } input[type=radio] { border-radius: 50px; } input[type=checkbox]:checked, input[type=radio]:checked { background-color: var(--main_color); border-color: var(--main_color); } input[type=checkbox]:checked::after, input[type=radio]:checked::after { content: ""; position: absolute; top: 4px; left: 9px; width: 6px; height: 12px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } input[type=checkbox]:hover, input[type=radio]:hover { border-color: var(--main_color); } .label_form { position: relative; padding: 15px 8px 10px 8px; font-weight: 600; color: #888; } .label_form.required { color: var(--light_red_2); } .label_form.required.asterisk { font-size: 22px; font-style: normal !important; line-height: 1; } .label_form.left { position: relative; display: inline-block; inset: 0 0 0 10px; } .label_form.padding_bottom { margin: -10px 0 0 0; } .label_form .type { position: absolute; top: 18px; right: 12px; font-size: 14px; font-style: italic; color: #aaa; } .label_form .type.required { color: var(--light_red_2); } .form_input { width: 100%; margin: 0 0 10px 0; padding: 10px 16px; background: #fff; border: 0.0625rem solid #eaeaea; border-radius: 12px; font-size: 1rem; font-weight: 400; resize: vertical; } .form_input:focus { border: 0.0625rem solid var(--secondary_color_lighter4); } .form_input::placeholder { text-transform: none; color: #bbb; } .form_input.italic_text { font-style: italic; } .form_input.bigger { padding: 15.6px 1rem; } .form_input.auto_resize { margin: 0 0 2px 0; } .form_input.select { padding: 14px 16px; } .form_input.file_picker { padding: 0.5rem 0 0.75rem 10px; border: 0.0625rem solid transparent; } .form_input.submit { margin: 2rem 0 0 0; padding: 10px 0.625rem; background: var(--main_color); border: 0.0625rem solid var(--main_color); font-weight: 600; color: #fff; cursor: pointer; } .form_input.submit:hover { background: var(--secondary_color); border: 0.0625rem solid var(--secondary_color); } .form_input.submit.thinner { padding: 10px; } .form_input.submit.much_thinner { width: auto; padding: 5px 15px !important; border-radius: 10px; } .form_input.submit.cancel_btn { background: var(--secondary_color); border: 0.0625rem solid var(--secondary_color); } .form_input.submit.cancel_btn:hover { background: var(--green_color); border: 0.0625rem solid var(--green_color); } .form_input.submit.red { background: var(--dark_red); border: 0.0625rem solid var(--dark_red); } .form_input.submit.red:hover { background: var(--light_red); border: 0.0625rem solid var(--light_red); } .form_input.submit.gray_btn { background: #eee; border: 1px solid #e8e8e8; color: #555; } .form_input.submit.gray_btn:hover { background: #e5e5e5; border: 1px solid #e0e0e0; } .phone_input { padding-top: 0.875rem; padding-bottom: 0.875rem; border: 0.0625rem solid #eaeaea; border-radius: 0.75rem; font-size: 1.125rem !important; font-weight: 500; color: var(--text_color); } .email_status, .username_status { margin: -5px 0 15px 0; padding: 0 0 0 10px; color: var(--dark_red); font-weight: 600; } .email_status .availability_result.available, .username_status .availability_result.available { color: var(--green_color); } .email_status .availability_result.taken, .username_status .availability_result.taken { color: var(--dark_red); } .email_status .availability_result.invalid, .username_status .availability_result.invalid { color: var(--dark_red); } .email_status .availability_result.checking, .username_status .availability_result.checking { color: var(--text_color_lighter1); } .feedback_popup { position: fixed; top: 71px; left: 50%; width: min(400px, 100% - 24px); max-width: 400px; transform: translate(-50%, 0%); z-index: 1100; pointer-events: none; } .feedback_popup.center-bottom { top: auto; bottom: 16px; } .feedback_popup .wrapper_feedback { --feedback_popup_color: var(--green_color); position: relative; min-height: 54px; display: flex; align-items: center; padding: 13px 16px; background: color-mix(in srgb, var(--feedback_popup_color) 94%, #000); border: 1px solid color-mix(in srgb, var(--feedback_popup_color) 72%, #fff); border-radius: 10px; font-size: 1rem; font-weight: 500; color: #fff !important; pointer-events: auto; } .feedback_popup .wrapper_feedback, .feedback_popup .wrapper_feedback * { color: #fff !important; } .feedback_popup .wrapper_feedback.has_close_button { padding-right: 42px; } .feedback_popup .wrapper_feedback.success { background: var(--green_color); } .feedback_popup .wrapper_feedback.warning { --feedback_popup_color: var(--warning_color); } .feedback_popup .wrapper_feedback.fail { --feedback_popup_color: var(--dark_red); } .feedback_popup .wrapper_feedback.info { --feedback_popup_color: var(--main_color); } .feedback_popup .wrapper_feedback .feedback_popup_content { min-width: 0; display: grid; gap: 4px; } .feedback_popup .wrapper_feedback .feedback_popup_content strong, .feedback_popup .wrapper_feedback .feedback_popup_content p { margin: 0; color: #fff !important; } .feedback_popup .wrapper_feedback .feedback_popup_content strong { font-size: 0.94rem; font-weight: 800; line-height: 1.3; letter-spacing: 0.01em; } .feedback_popup .wrapper_feedback .feedback_popup_content p { font-size: 0.86rem; line-height: 1.45; } .feedback_popup .wrapper_feedback .feedback_popup_content p:first-child:last-child { font-weight: 650; } .feedback_popup .wrapper_feedback .close_btn_popup { top: 10px; right: 9px; width: 30px; height: 30px; min-height: 30px; display: grid; place-items: center; padding: 0; border: 0; background: rgba(255, 255, 255, 0.08); } .feedback_popup .wrapper_feedback .close_btn_popup svg { display: block; fill: #fff !important; } .feedback_popup .wrapper_feedback .close_btn_popup svg * { fill: #fff !important; } .feedback_popup .wrapper_feedback .close_btn_popup:hover, .feedback_popup .wrapper_feedback .close_btn_popup:focus-visible { background: rgba(255, 255, 255, 0.18); box-shadow: none; } .close_btn_popup { position: absolute; top: 0; right: 0; width: 35px; padding: 1px; background: var(--green_color); border-radius: 50%; cursor: pointer; } .close_btn_popup svg { width: 100%; fill: #eee; } .close_btn_popup:hover { box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); } .close_btn_popup:hover svg { fill: var(--secondary_color); } .orange_bg { background: rgba(255, 115, 0, 0.06) !important; border: 1px solid rgba(255, 115, 0, 0.06) !important; } .green_bg { background: rgba(0, 197, 62, 0.06) !important; border: 1px solid rgba(0, 197, 62, 0.06) !important; } .blue_bg { background: rgba(0, 137, 242, 0.06) !important; border: 1px solid rgba(0, 137, 242, 0.06) !important; } .violet_bg { background: rgba(225, 0, 232, 0.06) !important; border: 1px solid rgba(225, 0, 232, 0.06) !important; } .login_attempts { padding: 2px 0 12px 8px; font-size: 14px; font-style: italic; line-height: 1.2; color: #888; } .login_attempts.last_attempt { color: var(--light_red); } .login_attempts span { font-size: 15px; color: var(--light_red); } .nothing_to_show { width: 100%; margin: 18px auto 0; padding: 34px 18px; border: 1px solid var(--border_color_lighter); border-radius: 14px; background: var(--white_color); text-align: center; } .nothing_to_show.smaller { padding: 22px 12px; } .nothing_to_show.smaller .illustration img { width: 130px; } .nothing_to_show.smaller .text { margin: 0.625rem 0 0 0; font-size: 0.875rem; } .nothing_to_show.smaller .text b { font-size: 0.875rem; } .nothing_to_show.smaller .cta { margin: 1.25rem 0 0 0; } .nothing_to_show.centered_vertically { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .nothing_to_show .illustration img { width: 12.5rem; margin: auto; opacity: 0.8; } .nothing_to_show strong, .nothing_to_show .title { display: block; margin: 0; color: #aaa; font-size: 22px; font-weight: 700; font-style: italic; line-height: 1.25; } .nothing_to_show strong b, .nothing_to_show .title b { color: #aaa; } .nothing_to_show span, .nothing_to_show .text { display: block; margin: 8px 0 0 0; color: #c5c5c5; font-size: 18px; font-weight: 300; font-style: italic; line-height: 1.35; } .nothing_to_show span b, .nothing_to_show .text b { font-size: 1.0625rem; } .nothing_to_show .cta { margin: 1.875rem 0 0 0; } .placeholder_htmx { position: sticky; top: 0; z-index: 10; } .not_found { padding: 50px 0; text-align: center; } .not_found h2 { font-size: 35px; } .not_found p { margin-top: 20px; font-size: 18px; } .not_found button { margin-top: 30px !important; } #header.header { position: sticky; top: 0; z-index: 1200; } .header { position: sticky; top: 0; width: 100%; height: 3.4375rem; background: var(--white_color); z-index: 1200; border-bottom: 1px solid var(--light_gray_color); box-shadow: 0px 0.125rem 0.5rem rgba(0, 0, 0, 0.05); } .header::-webkit-scrollbar { width: 0; } .header { /* hide scrollbar */ } .header .wrapper_header { width: 100%; padding: 0 20px; align-items: center; gap: 16px; } .header .wrapper_header .logo { display: flex; align-items: center; max-width: 140px; } .header .wrapper_header .logo img { display: block; max-width: 100%; height: auto; max-height: 44px; object-fit: contain; } .header .wrapper_header .logo .mobile { display: none; } .header .wrapper_header.logged_in { grid-template-columns: auto max-content minmax(180px, 1fr) auto; } .header .wrapper_header.logged_out { grid-template-columns: minmax(0, 1fr) auto; } .header .wrapper_header.public_family_header { grid-template-columns: auto minmax(0, 1fr) auto; } .header .wrapper_header.public_family_header .public_family_brand .public_badge { margin-left: 30px; font-size: 14px; } .header .wrapper_header.public_family_header .cta_header { justify-self: end; } .header .wrapper_header.public_family_header .cta_header .wrapper_cta_header { display: flex; justify-content: flex-end; } .header .wrapper_header.public_family_header .cta_header .cta_icons { max-width: none; align-items: center; } .header .wrapper_header.public_family_header .public_language_menu { box-shadow: none; } .header .wrapper_header.public_family_header .public_language_toggle .flag { width: 20px; height: 20px; flex: 0 0 20px; } .header .wrapper_header.public_family_header .public_language_toggle .flag img { display: block; width: 100%; height: 100%; border-radius: 4px; object-fit: cover; } .header .wrapper_header.public_family_header .public_copy_link_btn { gap: 7px; color: #fff; } .header .wrapper_header.public_family_header .public_copy_link_btn span { color: inherit; } .header .wrapper_header.public_family_header .public_copy_link_btn svg { width: 18px; height: 18px; } .header .wrapper_header.public_family_header .public_copy_link_btn svg, .header .wrapper_header.public_family_header .public_copy_link_btn svg path { fill: #fff; } .header .wrapper_header .main_menu { height: 3.4375rem; min-width: 0; padding: 0 clamp(0.5rem, 1vw, 1.25rem); } .header .wrapper_header .main_menu .wrapper_main_menu { display: flex; align-items: center; gap: clamp(14px, 1.25vw, 24px); justify-content: flex-start; white-space: nowrap; } .header .wrapper_header .main_menu .wrapper_main_menu .one_menu_item { height: 55px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; cursor: pointer; } .header .wrapper_header .main_menu .wrapper_main_menu .one_menu_item:hover { border-bottom: 5px solid var(--secondary_color_lighter4); color: var(--secondary_color_lighter2); } .header .wrapper_header .main_menu .wrapper_main_menu .one_menu_item.active { border-bottom: 5px solid var(--main_color_lighter2); color: var(--main_color); } .header .wrapper_header .middle_header_admin { height: 100%; min-width: 0; } .header .wrapper_header .middle_header_admin .wrapper_search { position: relative; width: 100%; min-width: 0; padding: 2px 2px 2px 14px; background: var(--white_color); border: 1px solid var(--border_color); border-radius: 50px; display: grid; gap: 0.5rem; grid-template-columns: auto 32px; } .header .wrapper_header .middle_header_admin .wrapper_search:focus-within { border: 1px solid var(--main_color_lighter5); } .header .wrapper_header .middle_header_admin .wrapper_search .search_bar_input { width: 100%; background: transparent; border: none; } .header .wrapper_header .middle_header_admin .wrapper_search .search_bar_input::placeholder { font-weight: 300; color: #aaa; } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_indicator { position: absolute; right: 42px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; opacity: 0; pointer-events: none; } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_indicator.htmx-request { opacity: 1; } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_indicator .circle { display: block; width: 16px; height: 16px; border: 2px solid var(--border_color); border-top-color: var(--main_color); border-radius: 50%; animation: global_search_spin 0.7s linear infinite; } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; max-height: 70vh; overflow-y: auto; display: none; } .header .wrapper_header .middle_header_admin .wrapper_search.has_results .global_search_results { display: block; } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_panel { background: var(--white_color); border: 1px solid var(--border_color); border-radius: 16px; padding: 6px; overflow: hidden; } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_empty { padding: 18px 14px; font-size: 0.85rem; color: #888; text-align: center; } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_empty span { display: block; margin-top: 2px; color: #aaa; font-size: 0.8rem; } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_group { padding: 4px 2px; } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_group + .global_search_group { border-top: 1px solid var(--border_color); } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_group_title { padding: 6px 12px 4px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--main_color); } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_result { display: grid; grid-template-columns: 34px auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; text-decoration: none; color: inherit; cursor: pointer; } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_result:hover { background: var(--bg_color); } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_result_avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: var(--main_color); background: var(--main_color_lighter5); text-transform: uppercase; } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_result_body { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_result_code { font-size: 0.875rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_result_title { font-size: 0.8rem; color: var(--secondary_color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header .wrapper_header .middle_header_admin .wrapper_search .global_search_result_desc { font-size: 0.75rem; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header .wrapper_header .middle_header_admin .wrapper_search .search_button { width: 30px; height: 30px; background: var(--bg_color); border: 1px solid var(--border_color); border-radius: 50%; font-size: 13px; cursor: pointer; } .header .wrapper_header .middle_header_admin .wrapper_search .search_button i { color: #ccc; } .header .wrapper_header .middle_header_admin .wrapper_search .search_button:hover { background: var(--bg_color_darker1); } .header .wrapper_header .middle_header_admin .wrapper_search .search_button svg { opacity: 9; width: 1.125rem; fill: #aaa; } .header .wrapper_header .middle_header_admin .wrapper_search .search_button svg:hover { fill: var(--main_color); } .header .wrapper_header .cta_header .wrapper_cta_header { width: 100%; grid-template-columns: auto auto; align-items: center; } .header .wrapper_header .cta_header .wrapper_cta_header .manage_profile_group { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_form { position: relative; min-width: 10rem; max-width: 13rem; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_form.is_open .family_switcher_trigger { border-color: var(--main_color_lighter2); } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_form.is_open::after { rotate: -135deg; margin-top: -0.1rem; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_form .family_switcher_current_icon { position: absolute; top: 50%; left: 0.75rem; width: 1rem; height: 1rem; color: var(--main_color); transform: translateY(-50%); pointer-events: none; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_form .family_switcher_current_icon svg { width: 100%; height: 100%; fill: currentColor; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_form::after { content: ""; position: absolute; top: 50%; right: 0.875rem; width: 0.4rem; height: 0.4rem; border-right: 1.5px solid var(--text_color_lighter1); border-bottom: 1.5px solid var(--text_color_lighter1); rotate: 45deg; margin-top: -0.25rem; pointer-events: none; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_form.family_switcher_single::after { display: none; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_trigger { display: flex; align-items: center; width: 100%; height: 2rem; padding: 0 2rem 0 2.15rem; border: 1px solid var(--border_color); border-radius: 100px; background: var(--bg_color); color: var(--text_color); font-size: 0.8125rem; font-weight: 500; line-height: 1.2; text-align: left; cursor: pointer; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_trigger:focus { outline: none; border-color: var(--main_color_lighter2); } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_trigger_static { cursor: default; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_current_label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_dropdown { position: absolute; top: calc(100% + 6px); right: 0; left: auto; width: min(18rem, 92vw); max-height: 20rem; overflow-y: auto; padding: 0.5rem; border: 1px solid var(--border_color); border-radius: 0.75rem; background: var(--white_color); z-index: 1300; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_group + .family_switcher_group { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid var(--border_color_lighter); } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_group_title { margin: 0.25rem 0.5rem 0.35rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text_color_lighter1); } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_option { display: flex; align-items: flex-start; gap: 0.625rem; width: 100%; padding: 0.5rem 0.625rem; border: 0; border-radius: 0.5rem; background: transparent; color: var(--text_color); text-align: left; cursor: pointer; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_option:hover { background: var(--main_color_lighter5); } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_option.is_active { background: var(--main_color_lighter5); cursor: default; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_option.is_active strong { color: var(--main_color_darker); } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_option:disabled { opacity: 1; cursor: default; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_option_icon { flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin-top: 0.1rem; color: var(--main_color); } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_option_icon svg { width: 100%; height: 100%; fill: currentColor; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_option_body { min-width: 0; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_option_body strong { display: block; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_option_body small { display: block; margin-top: 0.15rem; font-size: 0.6875rem; color: var(--text_color_lighter1); } .header .wrapper_header .cta_header .wrapper_cta_header .manage_btn_header { display: flex; align-items: center; gap: 5px; padding: 6px 14px; border: 1px solid var(--main_color_lighter2); border-radius: 100px; font-size: 0.8125rem; font-weight: 500; color: var(--main_color) !important; text-decoration: none; white-space: nowrap; cursor: pointer; } .header .wrapper_header .cta_header .wrapper_cta_header .manage_btn_header svg { width: 14px; fill: var(--main_color); transition: 0.15s; } .header .wrapper_header .cta_header .wrapper_cta_header .manage_btn_header:hover { background: var(--main_color); color: #fff !important; } .header .wrapper_header .cta_header .wrapper_cta_header .manage_btn_header:hover svg { fill: #fff; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons { max-width: 25rem; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notify_wrap { position: relative; height: 100%; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .one_cta_icon { height: 100%; cursor: pointer; border: 0; background: transparent; position: relative; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .one_cta_icon:hover svg { fill: var(--secondary_color); } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .one_cta_icon.active svg { fill: var(--main_color_lighter); } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .one_cta_icon.smaller_icon svg { width: 20px; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .one_cta_icon svg { width: 26px; fill: #888; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .one_cta_icon.active svg { fill: #eee !important; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_badge { position: absolute; top: 1px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border: 1px solid var(--bg_color); border-radius: 999px; background: var(--secondary_color); color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notifications_dropdown { display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 1300; width: min(340px, 100vw - 30px); overflow: hidden; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color); } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notifications_dropdown.open { display: block; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notifications_head, .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notifications_footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border_color); } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notifications_head strong, .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notifications_footer strong { color: var(--text_color); font-size: 0.9rem; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notifications_head a, .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notifications_head button, .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notifications_footer a, .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notifications_footer button { border: 0; background: transparent; color: var(--main_color); cursor: pointer; font-size: 0.78rem; font-weight: 700; padding: 0; text-decoration: none; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notifications_list { max-height: 330px; overflow-y: auto; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notifications_empty { padding: 22px 14px; color: var(--text_color_lighter1); font-size: 0.85rem; text-align: center; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; position: relative; padding: 10px 12px; border-bottom: 1px solid var(--border_color); background: var(--bg_color); color: var(--text_color); text-decoration: none; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item.unread { padding-left: 12px; background: rgba(0, 147, 165, 0.08); } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item:hover { background: var(--bg_color_lighter); } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item .header_notification_unread_dot { position: absolute; top: 16px; left: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--main_color); } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item .header_notification_link { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; color: var(--text_color); text-decoration: none; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item span:not(.header_notification_icon), .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item strong, .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item em, .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item small, .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item time { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item .header_notification_icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border_color); border-radius: 50%; background: var(--white_color); } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item .header_notification_icon svg { width: 16px; height: 16px; fill: var(--main_color); } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item .header_notification_icon.notif_recommendation_received svg { fill: var(--secondary_color); } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item .header_notification_icon.notif_share_deleted svg { fill: var(--light_red); } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item strong { font-size: 0.84rem; color: var(--text_color); } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item em { margin-top: 2px; color: var(--text_color_lighter1); font-size: 0.78rem; font-style: normal; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item small, .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item time { color: var(--text_color_lighter2); font-size: 0.72rem; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item .header_notification_mark { min-height: 32px; border: 1px solid rgba(0, 147, 165, 0.28); border-radius: 999px; background: rgba(0, 147, 165, 0.08); color: var(--main_color); cursor: pointer; font-size: 0.68rem; font-weight: 700; line-height: 1; padding: 7px 10px; white-space: nowrap; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notification_item .header_notification_mark:hover { border-color: var(--main_color); background: var(--main_color); color: #fff; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons .header_notifications_footer { justify-content: center; border-top: 1px solid var(--border_color); border-bottom: 0; color: var(--main_color); font-size: 0.82rem; font-weight: 700; } .header .wrapper_header .cta_header .wrapper_cta_header .profile_photo { padding: 0.125rem; cursor: pointer; gap: 0; grid-template-columns: auto 15px; } .header .wrapper_header .cta_header .wrapper_cta_header .profile_photo:hover .actual_photo img { border: 0.125rem solid var(--main_color_lighter); } .header .wrapper_header .cta_header .wrapper_cta_header .profile_photo:hover .arrow_down svg { fill: var(--main_color_lighter); } .header .wrapper_header .cta_header .wrapper_cta_header .profile_photo .actual_photo img { width: 2.625rem; height: 2.625rem; object-fit: cover; border: 0.125rem solid #ddd; border-radius: 2.8125rem; } .header .wrapper_header .cta_header .wrapper_cta_header .profile_photo .arrow_down svg { fill: #aaa; transform: rotate(90deg); } .header .wrapper_header .profile_header { padding: 0.125rem; cursor: pointer; gap: 0; grid-template-columns: auto 15px; } .header .wrapper_header .profile_header:hover .actual_photo img { border: 0.125rem solid var(--secondary_color_lighter2); } .header .wrapper_header .profile_header:hover .arrow_down svg { fill: var(--main_color_lighter); } .header .wrapper_header .profile_header .actual_photo img { width: 38px; height: 38px; object-fit: cover; border: 0.125rem solid #ddd; border-radius: 2.8125rem; } .header .wrapper_header .profile_header .arrow_down svg { fill: #aaa; transform: rotate(90deg); } .lang_right_lower_header { position: relative; } .lang_right_lower_header .selected_language { margin: 2.88px 0 0 0; padding: 2px; border-radius: 4.96px; cursor: pointer; gap: 6.4px; display: grid; grid-template-columns: 1.134em auto; } .lang_right_lower_header .selected_language .flag img { width: 100%; } .lang_right_lower_header .selected_language .text { cursor: pointer; } .lang_right_lower_header .selected_language .text .dropdown_arrow svg { width: 1.25rem; fill: #888; transform: rotate(90deg); } .lang_right_lower_header .actual_other_languages { position: absolute; top: 140%; width: 140px; padding: 5px; background: #fff; border: 1px solid var(--bg_color_darker1); border-radius: 10px; box-shadow: 0rem 10px 10px rgba(0, 0, 0, 0.2); cursor: pointer; z-index: 10; } .lang_right_lower_header .actual_other_languages .one_lang { width: 100%; padding: 5px 6px 6px 8px; border: 0; border-radius: 6px; background: transparent; color: inherit; display: grid; gap: 6.4px; grid-template-columns: 22px auto; font: inherit; text-align: left; cursor: pointer; } .lang_right_lower_header .actual_other_languages .one_lang:hover { background: var(--bg_color_darker1); } .lang_right_lower_header .actual_other_languages .one_lang .flag img { width: 100%; } .lang_right_lower_header .actual_other_languages .one_lang .text { font-size: 16px; } .small_menu_logged { position: fixed; overflow: auto; top: 0; left: 0; width: 100%; height: 0%; transition: 0s; z-index: 30; /* hide scrollbar */ } .small_menu_logged::-webkit-scrollbar { width: 0px; } .small_menu_logged:hover { display: block; } .small_menu_logged .wrapper_small_menu { position: relative; overflow: auto; width: 100%; max-width: unset; height: 100%; } .small_menu_logged .wrapper_small_menu .actual_small_menu { position: absolute; top: 4.3rem; right: 1rem; width: 16.25rem; margin: 0 0 3.125rem 0; padding: 0.625rem 0.625rem 0.875rem 0.625rem; background: #fff; border: 0.0625rem solid #f2f2f2; border-radius: 1.25rem; box-shadow: 0px 0.9375rem 1.25rem rgba(0, 0, 0, 0.1); z-index: 6; } .small_menu_logged .wrapper_small_menu .actual_small_menu.sell_page { top: 3.6rem; right: 34.2%; } .small_menu_logged .wrapper_small_menu .actual_small_menu.left_order_list { top: 3.6rem; right: 0.8%; } .small_menu_logged .wrapper_small_menu .actual_small_menu .profile_small_menu { position: relative; padding: 0.3125rem 0.3125rem 0.3125rem 0.5rem; background: var(--bg_color_darker); border: 1px solid var(--bg_color_darker); border-radius: 1rem; display: grid; gap: 0.6rem; grid-template-columns: 40px auto 30px; } .small_menu_logged .wrapper_small_menu .actual_small_menu .profile_small_menu:hover { background: var(--bg_color); border-color: var(--bg_color_darker2); } .small_menu_logged .wrapper_small_menu .actual_small_menu .profile_small_menu:hover .user_details .wrapper_profile .name { color: var(--main_color); } .small_menu_logged .wrapper_small_menu .actual_small_menu .profile_small_menu .photo img { width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: 50%; border: 0.0625rem solid #ddd; } .small_menu_logged .wrapper_small_menu .actual_small_menu .profile_small_menu .user_details { font-size: 1rem; display: flex; justify-content: left; align-items: center; } .small_menu_logged .wrapper_small_menu .actual_small_menu .profile_small_menu .user_details .wrapper_profile .name { font-size: 1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .small_menu_logged .wrapper_small_menu .actual_small_menu .profile_small_menu .user_details .wrapper_profile .account { margin: 3px 0 0 0; font-size: 0.6875rem; } .small_menu_logged .wrapper_small_menu .actual_small_menu .profile_small_menu .user_details .wrapper_profile .account .verification_badge { float: left; width: 1rem; margin: 2px 5px 0 0; padding: 2px; background: #fff; border-radius: 50%; /* box-shadow: -0px 4px 6px rgba(0,0,0,.1); */ } .small_menu_logged .wrapper_small_menu .actual_small_menu .profile_small_menu .user_details .wrapper_profile .account .verification_badge img { width: 14px; height: 14px; object-fit: cover; } .small_menu_logged .wrapper_small_menu .actual_small_menu .profile_small_menu .arrow { display: flex; justify-content: center; align-items: center; } .small_menu_logged .wrapper_small_menu .actual_small_menu .profile_small_menu .arrow svg { fill: #ddd; } .small_menu_logged .wrapper_small_menu .actual_small_menu .menu_items_small_menu { margin: 0.5rem 0 0 0; } .small_menu_logged .wrapper_small_menu .actual_small_menu .menu_items_small_menu .one_menu_item_small_menu { padding: 8px 0.625rem; display: grid; gap: 1rem; grid-template-columns: 20px auto auto; } .small_menu_logged .wrapper_small_menu .actual_small_menu .menu_items_small_menu .one_menu_item_small_menu.active .icon svg { fill: var(--main_color); } .small_menu_logged .wrapper_small_menu .actual_small_menu .menu_items_small_menu .one_menu_item_small_menu.active .text { color: var(--main_color); } .small_menu_logged .wrapper_small_menu .actual_small_menu .menu_items_small_menu .one_menu_item_small_menu:hover .icon svg { fill: var(--secondary_color); } .small_menu_logged .wrapper_small_menu .actual_small_menu .menu_items_small_menu .one_menu_item_small_menu:hover .text, .small_menu_logged .wrapper_small_menu .actual_small_menu .menu_items_small_menu .one_menu_item_small_menu:hover .value { color: var(--secondary_color); } .small_menu_logged .wrapper_small_menu .actual_small_menu .menu_items_small_menu .one_menu_item_small_menu .icon svg { width: 100%; fill: #aaa; } .small_menu_logged .wrapper_small_menu .actual_small_menu .menu_items_small_menu .one_menu_item_small_menu .text { font-size: 15px; } .cta_panel { position: absolute; overflow: hidden; right: 0; bottom: 6rem; margin: 15px; border: 1px solid var(--light_gray_color); border-radius: 0.5rem; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); z-index: 5; } .cta_panel > *:not(:last-child) { border-bottom: 1px solid var(--light_gray_color) !important; } .cta_panel .one_btn_cta_panel { width: 25px; height: 25px; padding: 3px 5px; background: var(--white_color); border: none; box-sizing: content-box; cursor: pointer; -webkit-user-select: text; -moz-user-select: text; user-select: text; text-transform: none; display: flex; justify-content: center; align-items: center; } .cta_panel .one_btn_cta_panel:hover { background: var(--light_gray_color); } .cta_panel .one_btn_cta_panel svg { max-width: 1.5625rem; max-height: 1.5625rem; vertical-align: middle; fill: var(--text_color_lighter1); cursor: pointer; } .stats_bottom_container { position: fixed; bottom: 0; width: 100%; height: 2.125rem; background: var(--white_color); border-top: 1px solid var(--light_gray_color); z-index: 2; } .stats_bottom_container .wrapper_stats { position: relative; width: 100%; height: 100%; padding: 6px 15px 0 15px; overflow: auto; overflow-x: scroll; white-space: nowrap; scroll-snap-type: x mandatory; scroll-behavior: smooth !important; } .stats_bottom_container .wrapper_stats::-webkit-scrollbar { width: 0; } .stats_bottom_container .wrapper_stats::-webkit-scrollbar { height: 0; } .stats_bottom_container .wrapper_stats span { margin: 0 0.625rem; } .stats_bottom_container .wrapper_stats .one_value_stats { display: inline-block; } .stats_bottom_container .wrapper_stats .one_value_stats:hover { cursor: pointer; } .stats_bottom_container .wrapper_stats .one_value_stats:hover .wrapper_one_value_stats .title { color: var(--main_color); } .stats_bottom_container .wrapper_stats .one_value_stats:hover .wrapper_one_value_stats .value { color: var(--main_color); } .stats_bottom_container .wrapper_stats .one_value_stats .wrapper_one_value_stats .title { font-size: 15px; width: fit-content; } .stats_bottom_container .wrapper_stats .one_value_stats .wrapper_one_value_stats .value { width: fit-content; font-weight: 600; } .middle { display: none; position: fixed; top: 0; left: 50%; transform: translate(-50%, 0); width: 2px; height: 100%; background: #ffcaca; z-index: 1000; } /* Actual tree container */ .tree_container { position: relative; overflow: hidden; width: 100vw; height: 100vh; background-color: #edf4f7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23cfdde3'/%3E%3C/svg%3E"); background-size: 22px 22px; cursor: grab; } .tree_container::-webkit-scrollbar { width: 0; } .tree_container { /* hide scrollbar */ } .tree_container:active { cursor: grabbing; } .tree_container:not(.vertical) .add_child, .tree_container:not(.vertical) .add_parents, .tree_container:not(.vertical) .add_spouse, .tree_container:not(.vertical) .add_partner, .tree_container:not(.vertical) .external_add_child { cursor: pointer; } .tree_container:not(.vertical) .add_child .plus_btn, .tree_container:not(.vertical) .add_parents .plus_btn, .tree_container:not(.vertical) .add_spouse .plus_btn, .tree_container:not(.vertical) .add_partner .plus_btn, .tree_container:not(.vertical) .external_add_child .plus_btn { cursor: pointer; } .tree_container .tree_canvas { position: absolute; top: -60px; left: 0; width: 100%; height: 100%; transform-origin: 0 0; /* transform will be set by JS */ display: flex; /* Pin the tree to the canvas origin and let JS position it via the transform. Centring here would make the tree's place depend on the canvas width, so it would slide sideways whenever the window or DevTools resized the viewport. */ justify-content: flex-start; align-items: flex-start; /* Align to top */ opacity: 0; /* Hide initially to prevent flicker */ transition: opacity 0.3s ease-in-out; } .tree_container .tree_canvas::-webkit-scrollbar { width: 0; } .tree_container .tree_canvas { /* hide scrollbar */ } .tree_container .tree_canvas .tree_connector_layer { position: absolute; inset: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 0; } .tree_container .tree_canvas .tree_connector_layer .tree_connector_path { fill: none; stroke: var(--border_color); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke 0.15s; } .tree_container .tree_canvas .tree_connector_layer .tree_connector_path.hovered { stroke: #c8e8ff; } .tree_container .tree_canvas .tree { /* overflow: auto; */ position: relative; z-index: 1; width: max-content; height: auto; /* text-align: center; */ } .tree_container .tree_canvas .tree ul { position: relative; padding-top: 1.875rem; padding-left: 0; transition: 0.5s; white-space: nowrap; /* Ensure siblings stay on one line */ } .tree_container .tree_canvas .tree ul ul::before { display: none; } .tree_container .tree_canvas .tree .only_child_root::before { display: none !important; } .tree_container .tree_canvas .tree li { position: relative; display: inline-table; padding: 1.25rem 0.8rem; list-style-type: none; text-align: center; transition: 0.5s; } .tree_container .tree_canvas .tree li .couple { position: relative; } .tree_container .tree_canvas .tree li .couple .one_person { margin: 0 -4px 0 0; border-radius: 14px 0 0 14px !important; } .tree_container .tree_canvas .tree li .couple .one_person.wife { margin: 0 0 0 -2px; border-radius: 0 14px 14px 0 !important; } .tree_container .tree_canvas .tree li .couple:first-child::after { border-radius: 0.625rem 0 0 0; -webkit-border-radius: 0.625rem 0 0 0; -moz-border-radius: 0.625rem 0 0 0; } .tree_container .tree_canvas .tree li .couple:hover .one_person { background: #e9f6ff; border-color: #c8e8ff; } .tree_container .tree_canvas .tree li .couple:hover .add_child { opacity: 1; visibility: visible; } .tree_container .tree_canvas .tree li .couple:hover i, .tree_container .tree_canvas .tree li .couple:hover + ul li .one_person { background: #f2fff1; border-color: #ccffc4; } .tree_container .tree_canvas .tree li .couple:hover + ul li::after, .tree_container .tree_canvas .tree li .couple:hover + ul li::before, .tree_container .tree_canvas .tree li .couple:hover + ul::before, .tree_container .tree_canvas .tree li .couple:hover + ul ul::before { border-color: #c8e8ff; } .tree_container .tree_canvas .tree li .couple .add_child { position: absolute; opacity: 0; visibility: hidden; transition: opacity 0.8s, visibility 0.8s; bottom: -30px; left: 50%; transform: translate(-50%, -50%); z-index: 5; } .tree_container .tree_canvas .tree li .couple .add_child .plus_btn { margin: 0 0 3px 0; padding: 2px; background: var(--warning_color_lighter1); border-radius: 50%; cursor: pointer; } .tree_container .tree_canvas .tree li .couple .add_child .plus_btn svg { width: 18px; fill: #fff; transform: rotate(-45deg); } .tree_container .tree_canvas .tree li .one_person { position: relative; display: inline-grid; width: 100px; margin: 0 4px; padding: 6px 4px 6px 4px; background: #fff; border: 2px solid var(--border_color_darker); box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.08); border-radius: 14px; text-decoration-line: none; transition: 0.5s; cursor: pointer; } .tree_container .tree_canvas .tree li .one_person > .person_birthday_icon { position: absolute; top: 5px; right: 5px; } .tree_container .tree_canvas .tree li .one_person.sibling { border-bottom: 6px solid #dfdfdf; } .tree_container .tree_canvas .tree li .one_person img { width: 60px; height: 60px; margin: auto; margin-bottom: 6px !important; border-radius: 100px; object-fit: cover; object-position: center center; cursor: pointer; } .tree_container .tree_canvas .tree li .one_person span { margin-top: -2px; border: 1px solid transparent; border-radius: 5px; font-size: 12px; /* text-transform: uppercase; */ letter-spacing: 1px; font-weight: 500; color: #666; cursor: pointer; /* display name on one line */ flex-shrink: 0; text-align: left; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; line-clamp: 1; text-align: center; } .tree_container .tree_canvas .tree li .one_person:hover { background: #e9f6ff; border-color: #c8e8ff; } .tree_container .tree_canvas .tree li .one_person.no_spouse:hover .add_spouse { opacity: 1; visibility: visible; } .tree_container .tree_canvas .tree li .one_person.no_partner:hover .add_partner { opacity: 1; visibility: visible; } .tree_container .tree_canvas .tree li .one_person:hover i, .tree_container .tree_canvas .tree li .one_person:hover + ul li .one_person { background: #f2fff1; border-color: #ccffc4; } .tree_container .tree_canvas .tree li .one_person:hover + ul li::after, .tree_container .tree_canvas .tree li .one_person:hover + ul li::before, .tree_container .tree_canvas .tree li .one_person:hover + ul::before, .tree_container .tree_canvas .tree li .one_person:hover + ul ul::before { border-color: #c8e8ff; } .tree_container .tree_canvas .tree li .one_person.dead { position: relative; background: #ffeeee; border: 2px solid #ffd1d1; /* border-right: 2px solid transparent; */ opacity: 1; } .tree_container .tree_canvas .tree li .one_person.dead::before { content: "✝"; position: absolute; top: 2px; left: 6px; font-size: 15px; font-weight: 700; color: var(--light_red); z-index: 1; opacity: 0.6; } .tree_container .tree_canvas .tree li .one_person.tree_person_hidden img { filter: grayscale(1) opacity(0.22); } .tree_container .tree_canvas .tree li .one_person.tree_person_hidden span { color: var(--text_color_lighter2); font-style: italic; } .tree_container .tree_canvas .tree li .one_person.tree_person_focus_flash { animation: treePersonFocusFlash 0.58s ease-in-out 0s 6; } .tree_container .tree_canvas .tree li .one_person .add_parents, .tree_container .tree_canvas .tree li .one_person .add_spouse, .tree_container .tree_canvas .tree li .one_person .add_partner { position: absolute; opacity: 0; visibility: hidden; transition: opacity 0.8s, visibility 0.8s; top: 50%; transform: translate(85px, -50%); z-index: 5; } .tree_container .tree_canvas .tree li .one_person .add_parents.F, .tree_container .tree_canvas .tree li .one_person .add_spouse.F, .tree_container .tree_canvas .tree li .one_person .add_partner.F { transform: translate(-12px, -50%); } .tree_container .tree_canvas .tree li .one_person .add_parents .plus_btn, .tree_container .tree_canvas .tree li .one_person .add_spouse .plus_btn, .tree_container .tree_canvas .tree li .one_person .add_partner .plus_btn { margin: 0 0 3px 0; padding: 2px; background: var(--green_color_lighter); border-radius: 50%; } .tree_container .tree_canvas .tree li .one_person .add_parents .plus_btn svg, .tree_container .tree_canvas .tree li .one_person .add_spouse .plus_btn svg, .tree_container .tree_canvas .tree li .one_person .add_partner .plus_btn svg { width: 18px; fill: #fff; transform: rotate(-45deg); } .tree_container .tree_canvas .tree li .one_person .add_parents { top: -10px; left: 50%; transform: translate(-50%, -50%); } .tree_container .tree_canvas .tree li .one_person .add_parents .plus_btn { background: #7c5cff; } .tree_container .tree_canvas .tree li .one_person .add_partner { transform: translate(-20px, -50%); } .tree_container .tree_canvas .tree li .one_person .add_partner.F { transform: translate(75px, -50%); } .tree_container .tree_canvas .tree li .one_person .add_partner .plus_btn { background: var(--light_red_1); } .tree_container .tree_canvas .tree li::before, .tree_container .tree_canvas .tree li::after { display: none; } .tree_container .tree_canvas .tree li::after { display: none; } .tree_container .tree_canvas .tree li { /* &:only-child::after, &:only-child::before { display: none; } */ } .tree_container .tree_canvas .tree li:only-child { padding-top: 1.25rem; } .tree_container .tree_canvas .tree li:only-child::before { border-radius: 0 !important; -webkit-border-radius: 0 !important; } .tree_container .tree_canvas .tree li:first-child::before, .tree_container .tree_canvas .tree li:last-child::after { border: 0 none; } .tree_container .tree_canvas .tree li:last-child::before { display: none; } .tree_container .tree_canvas .tree li:first-child::after { display: none; } .tree_container .tree_canvas .tree .external_partner { /* Float each partner's branch out to the side of the couple (husband → left, wife → right) instead of leaving it inside the children row. Being taken out of the row's flow means a long list of the partner's children can no longer push the couple's own children away from the parents - the actual children stay centred under the couple. */ position: absolute; top: 0; right: auto; left: var(--external-partner-left); padding: 0 1.25rem 0.3125rem 1.25rem; --external-partner-left: 0px; --external-partner-card-left: 0px; --external-partner-card-top: -70px; } .tree_container .tree_canvas .tree .external_partner .first_ul { /* Match the children-row ul padding so the partner's children land on the same generation line as the main couple's children. */ padding-top: 1.875rem; } .tree_container .tree_canvas .tree .external_partner .first_ul::before { display: none; } .tree_container .tree_canvas .tree .external_partner.husband::before { display: none; } .tree_container .tree_canvas .tree .external_partner.husband::after { display: none; } .tree_container .tree_canvas .tree .external_partner.wife::before { display: none; } .tree_container .tree_canvas .tree .external_partner.wife::after { display: none; } .tree_container .tree_canvas .tree .external_partner .one_person.partner { position: absolute; top: var(--external-partner-card-top); /* JS keeps the card level with the main couple and centered over this external partner's own children. */ left: var(--external-partner-card-left); width: 100px; height: 100px; margin: 0; padding: 5px 4px 8px 4px; border-radius: 50%; } .tree_container .tree_canvas .tree .external_partner .one_person.partner .add_child.external_add_child { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 6; } .tree_container .tree_canvas .tree .external_partner .one_person.partner .add_child.external_add_child .plus_btn { margin: 0; padding: 2px; background: var(--warning_color_lighter1); border-radius: 50%; } .tree_container .tree_canvas .tree .external_partner .one_person.partner .add_child.external_add_child .plus_btn svg { width: 18px; fill: #fff; transform: rotate(-45deg); } .tree_container .tree_canvas .tree .first_child_after_external::before { display: none; } .tree_container .tree_canvas .tree .first_child_after_external::after { border-radius: 10px 0 0 0; -webkit-border-radius: 10px 0 0 0; -moz-border-radius: 10px 0 0 0; } .tree_container .tree_canvas .tree .first_child_before_external::before { border-right: 2px solid var(--border_color); border-radius: 0 10px 0 0; -webkit-border-radius: 0 10px 0 0; -moz-border-radius: 0 10px 0 0; } .tree_container .tree_canvas .tree .first_child_before_external::after { display: none; } /* Layout toggle buttons */ .layout_toggle_btns { position: absolute; display: flex; gap: 8px; top: 8px; right: 15px; z-index: 25; } .layout_toggle_btns .layout_dropdown { position: relative; } .layout_toggle_btns .layout_dropdown .layout_dropdown_toggle { display: flex; align-items: center; gap: 8px; min-width: 142px; padding: 7px 11px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--border_color); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text_color); transition: border-color 0.15s; } .layout_toggle_btns .layout_dropdown .layout_dropdown_toggle .layout_toggle_icon { display: flex; } .layout_toggle_btns .layout_dropdown .layout_dropdown_toggle .layout_toggle_icon svg { width: 17px; height: 17px; display: block; fill: var(--main_color); } .layout_toggle_btns .layout_dropdown .layout_dropdown_toggle .layout_current_label { flex: 1; text-align: left; color: var(--text_color); } .layout_toggle_btns .layout_dropdown .layout_dropdown_toggle .layout_caret { display: flex; } .layout_toggle_btns .layout_dropdown .layout_dropdown_toggle .layout_caret svg { width: 13px; height: 13px; stroke: var(--text_color_lighter1); transition: transform 0.15s; } .layout_toggle_btns .layout_dropdown.open .layout_dropdown_toggle { border-color: var(--main_color_lighter3); } .layout_toggle_btns .layout_dropdown.open .layout_caret svg { transform: rotate(180deg); } .layout_toggle_btns .layout_dropdown .layout_dropdown_menu { position: absolute; top: calc(100% + 6px); right: 0; display: none; flex-direction: column; gap: 3px; min-width: 184px; padding: 6px; background: #fff; border: 1px solid var(--border_color); border-radius: 12px; z-index: 30; } .layout_toggle_btns .layout_dropdown.open .layout_dropdown_menu { display: flex; } .layout_toggle_btns .layout_btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 12px; border: 1px solid transparent; background: transparent; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text_color); text-align: left; transition: background 0.15s, color 0.15s; } .layout_toggle_btns .layout_btn .layout_btn_icon { display: flex; } .layout_toggle_btns .layout_btn .layout_btn_icon svg { width: 18px; height: 18px; display: block; fill: currentColor; flex-shrink: 0; } .layout_toggle_btns .layout_btn span { color: inherit; } .layout_toggle_btns .layout_btn.active { background: var(--main_color_lighter5); border-color: var(--main_color_lighter4); color: var(--main_color); } .layout_toggle_btns .layout_btn:not(.active):hover { background: var(--border_color_lighter); color: #444; } .layout_toggle_btns .v_edit_toggle { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 12px; border: 1px solid var(--border_color); background: rgba(255, 255, 255, 0.94); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); cursor: pointer; } .layout_toggle_btns .v_edit_toggle .v_edit_label { font-size: 12px; font-weight: 500; color: #888; } .layout_toggle_btns .v_edit_toggle .perm_toggle_btn { position: relative; width: 38px; height: 22px; border-radius: 100px; border: none; background: var(--border_color); cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .layout_toggle_btns .v_edit_toggle .perm_toggle_btn.on { background: var(--main_color); } .layout_toggle_btns .v_edit_toggle .perm_toggle_btn .perm_toggle_knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .layout_toggle_btns .v_edit_toggle .perm_toggle_btn.on .perm_toggle_knob { left: 19px; } .layout_toggle_btns .v_edit_toggle:hover { background: var(--border_color_lighter); } .layout_toggle_btns .v_edit_toggle:hover .v_edit_label { color: #555; } .family_tree_picker { position: absolute; top: 8px; left: 15px; z-index: 26; } .family_tree_picker .family_tree_picker_toggle { display: flex; align-items: center; gap: 8px; min-width: 180px; max-width: min(320px, 100vw - 32px); padding: 7px 11px; border: 1px solid var(--border_color); border-radius: 8px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text_color); transition: border-color 0.15s; } .family_tree_picker .family_tree_picker_toggle .family_tree_picker_name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; text-align: left; color: var(--text_color); } .family_tree_picker .family_tree_picker_toggle svg { width: 13px; height: 13px; fill: var(--text_color_lighter1); flex-shrink: 0; transition: transform 0.15s; } .family_tree_picker .family_tree_picker_toggle[aria-expanded=true] { border-color: var(--main_color_lighter3); } .family_tree_picker .family_tree_picker_toggle[aria-expanded=true] svg { transform: rotate(180deg); } .family_tree_picker .family_tree_picker_menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; width: 240px; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid var(--border_color); border-radius: 12px; background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14); } .family_tree_picker .family_tree_picker_menu.open { display: grid; gap: 2px; } .family_tree_picker .family_tree_picker_menu button { width: 100%; border: none; border-radius: 5px; background: transparent; cursor: pointer; text-align: left; font-size: 13px; } .family_tree_picker .family_tree_picker_menu .family_tree_picker_row { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; border-radius: 5px; } .family_tree_picker .family_tree_picker_menu .family_tree_picker_row.active { background: var(--main_color_lighter5); } .family_tree_picker .family_tree_picker_menu .family_tree_picker_row.active .family_tree_picker_item { color: var(--main_color); font-weight: 700; } .family_tree_picker .family_tree_picker_menu .family_tree_picker_row:hover { background: var(--border_color_lighter); } .family_tree_picker .family_tree_picker_menu .family_tree_picker_item { padding: 8px 9px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .family_tree_picker .family_tree_picker_menu .family_tree_more_btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; } .family_tree_picker .family_tree_picker_menu .family_tree_more_btn span { width: 3px; height: 3px; margin: 0 1px; border-radius: 50%; background: #9aa3ad; } .family_tree_picker .family_tree_picker_menu .family_tree_more_btn:hover { background: rgba(0, 0, 0, 0.06); } .family_tree_picker .family_tree_picker_menu .family_tree_picker_new { display: flex; align-items: center; gap: 7px; margin-top: 5px; padding: 8px 9px; border-top: 1px solid var(--border_color); color: var(--main_color); font-size: 13px; font-weight: 600; } .family_tree_picker .family_tree_picker_menu .family_tree_picker_new span { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; background: var(--main_color); color: #fff; line-height: 1; } .tree_generation_indicator { position: absolute; top: 0; bottom: 0; left: 0; width: 20px; max-width: 20px; z-index: 1; overflow: hidden; pointer-events: none; } .tree_generation_indicator .tree_generation_interval { position: absolute; left: 0; width: 20px; max-width: 20px; min-height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px 0 0 6px; border-left: 1px solid rgba(255, 255, 255, 0.28); background: var(--generation-color, rgba(0, 147, 165, 0.22)); color: rgba(28, 44, 50, 0.72); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; writing-mode: vertical-rl; transform: rotate(180deg); user-select: none; } .tree_container.vertical .tree_generation_indicator { display: none; } .tree_manage_menu { position: fixed; display: none; width: 180px; padding: 5px; border: 1px solid var(--border_color); border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); z-index: 90; } .tree_manage_menu.open { display: grid; gap: 2px; } .tree_manage_menu button { width: 100%; padding: 8px 9px; border: none; border-radius: 5px; background: transparent; color: #555; text-align: left; font-size: 13px; cursor: pointer; } .tree_manage_menu button:hover { background: var(--border_color_lighter); } .tree_manage_menu button.danger { color: var(--light_red); font-weight: 700; } .empty_tree_canvas { display: grid; place-items: center; gap: 14px; min-width: 320px; min-height: 320px; padding: 0; } .empty_tree_canvas .empty_tree_add_first { display: grid; place-items: center; width: 76px; height: 76px; border: 2px dashed var(--main_color_lighter3); border-radius: 10px; background: rgba(255, 255, 255, 0.92); cursor: pointer; color: var(--main_color); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .empty_tree_canvas .empty_tree_add_first span { font-size: 42px; line-height: 1; margin-top: -4px; } .empty_tree_canvas .empty_tree_add_first:hover { background: var(--main_color_lighter5); border-style: solid; } .empty_tree_canvas .onboarding_build_interactive { border: 1px solid var(--main_color); border-radius: 8px; background: var(--white_color); color: var(--main_color); padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; } .empty_tree_canvas .onboarding_build_interactive:hover { background: var(--main_color_lighter5); } .person_birthday_icon { width: 15px; height: 15px; fill: var(--warning_color); object-fit: contain; } .person_birthday_icon.today { fill: var(--secondary_color); } .tree_modal_backdrop { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.25); overflow-y: auto; overscroll-behavior: contain; } .tree_modal_backdrop.open { display: flex; } .tree_modal_backdrop#treePersonModal { align-items: center; } .tree_modal_backdrop .tree_action_modal { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--main_color_lighter2) transparent; padding: 16px; border-radius: 10px; background: #fff; cursor: default; } .tree_modal_backdrop .tree_action_modal::-webkit-scrollbar { width: 12px; } .tree_modal_backdrop .tree_action_modal::-webkit-scrollbar-track { background: transparent; border-left: 3px solid transparent; border-right: 3px solid transparent; background-clip: padding-box; } .tree_modal_backdrop .tree_action_modal::-webkit-scrollbar-thumb { background: var(--main_color_lighter4); border-left: 3px solid transparent; border-right: 3px solid transparent; background-clip: padding-box; border-radius: 999px; } .tree_modal_backdrop .tree_modal_header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .tree_modal_backdrop .tree_modal_header h3 { margin: 0; font-size: 18px; color: #333; } .tree_modal_backdrop .tree_modal_header .tree_modal_close { width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--border_color_lighter); cursor: pointer; font-size: 22px; line-height: 1; color: #777; } .tree_modal_backdrop .tree_form_section { display: grid; gap: 12px; } .tree_modal_backdrop .tree_form_section[hidden] { display: none; } .tree_modal_backdrop .tree_form_section.tree_new_person_hidden { display: none; } .tree_modal_backdrop .tree_form_section label { display: grid; gap: 5px; font-size: 12px; font-weight: 700; color: #777; } .tree_modal_backdrop .tree_form_section label > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tree_modal_backdrop .tree_form_section label > span em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--text_color_lighter2); text-transform: uppercase; } .tree_modal_backdrop .tree_form_section label > span em.required { color: var(--light_red); } .tree_modal_backdrop .tree_form_section input, .tree_modal_backdrop .tree_form_section select { width: 100%; padding: 10px 16px; border: 0.0625rem solid #eaeaea; border-radius: 12px; background: #fff; color: #333; } .tree_modal_backdrop .tree_form_section input:focus, .tree_modal_backdrop .tree_form_section select:focus { border-color: var(--secondary_color_lighter4); } .tree_modal_backdrop .tree_form_section input[type=file] { padding: 8px; font-size: 12px; cursor: pointer; } .tree_modal_backdrop .tree_person_source_tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin-bottom: 14px; padding: 4px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--bg_color_lighter); } .tree_modal_backdrop .tree_person_source_tabs[hidden] { display: none; } .tree_modal_backdrop .tree_person_source_tab { border: 1px solid transparent; border-radius: 8px; padding: 9px 12px; background: transparent; color: var(--text_color_lighter1); font-weight: 600; font-size: 0.9rem; line-height: 1.2; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .tree_modal_backdrop .tree_person_source_tab:hover { color: var(--text_color); } .tree_modal_backdrop .tree_person_source_tab.active { background: var(--white_color); color: var(--main_color); border-color: var(--border_color); } .tree_modal_backdrop .tree_existing_person_section { margin-bottom: 12px; } .tree_modal_backdrop .tree_form_grid { display: grid; gap: 10px; } .tree_modal_backdrop .tree_form_grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tree_modal_backdrop .tree_form_grid .wide { grid-column: 1/-1; } .tree_modal_backdrop .tree_existing_person_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; max-height: min(44vh, 360px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; } .tree_modal_backdrop .tree_existing_person_card { position: relative; display: grid; justify-items: center; gap: 6px; min-height: 132px; padding: 12px 8px; border: 1px solid var(--border_color); border-radius: 12px; background: #fff; cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s; } .tree_modal_backdrop .tree_existing_person_card img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border_color); } .tree_modal_backdrop .tree_existing_person_card span { width: 100%; color: var(--text_color); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tree_modal_backdrop .tree_existing_person_card small { color: var(--text_color_lighter2); font-size: 11px; font-weight: 700; } .tree_modal_backdrop .tree_existing_person_card .tree_existing_person_deceased { position: absolute; top: 6px; right: 8px; color: var(--light_red); font-size: 15px; font-style: normal; font-weight: 700; line-height: 1; } .tree_modal_backdrop .tree_existing_person_card:hover, .tree_modal_backdrop .tree_existing_person_card:focus-visible, .tree_modal_backdrop .tree_existing_person_card.loading { border-color: var(--main_color); background: var(--main_color_lighter5); } .tree_modal_backdrop .tree_existing_person_card:disabled { cursor: wait; opacity: 0.68; } .tree_modal_backdrop .tree_existing_person_empty { grid-column: 1/-1; padding: 18px; border: 1px solid var(--border_color_lighter); border-radius: 12px; background: var(--white_color); color: #c5c5c5; text-align: center; font-style: italic; font-weight: 500; } .tree_modal_backdrop .tree_image_picker { justify-items: center; gap: 8px !important; cursor: pointer; } .tree_modal_backdrop .tree_image_picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .tree_modal_backdrop .tree_image_picker strong { color: var(--text_color_lighter2); font-size: 12px; } .tree_modal_backdrop .tree_image_preview { display: flex; align-items: center; justify-content: center; width: 118px; aspect-ratio: 1; border-radius: 12px; border: 1px dashed var(--main_color); background: var(--main_color_lighter5); overflow: hidden; } .tree_modal_backdrop .tree_image_preview span { display: grid; place-items: center; width: 100%; height: 100%; color: var(--main_color); font-size: 30px; line-height: 1; font-weight: 600; } .tree_modal_backdrop .tree_image_preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .tree_modal_backdrop .tree_parent_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tree_modal_backdrop .tree_parent_grid fieldset { display: grid; gap: 10px; margin: 0; padding: 12px; border: 1px solid var(--border_color); border-radius: 12px; } .tree_modal_backdrop .tree_parent_grid fieldset legend { padding: 0 4px; color: #555; font-weight: 700; } .tree_modal_backdrop .tree_form_hint { margin: 0; font-size: 12px; color: #888; } .tree_modal_backdrop .tree_form_error { min-height: 18px; margin-top: 10px; font-size: 12px; color: var(--light_red); font-weight: 700; } .tree_modal_backdrop .tree_modal_actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } .tree_modal_backdrop .tree_existing_source .tree_modal_actions { display: none; } .tree_modal_backdrop .tree_person_summary { display: grid; gap: 8px; padding: 10px 0 14px; font-size: 13px; } .tree_modal_backdrop .tree_person_modal { width: min(720px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; } .tree_modal_backdrop .tree_person_modal:not(.editing) .tree_person_actions { display: none; } .tree_modal_backdrop .tree_person_profile { display: grid; gap: 14px; } .tree_modal_backdrop .tree_person_large_photo { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 18px; min-height: 122px; padding: 16px 18px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border_color); background: var(--bg_color_lighter); } .tree_modal_backdrop .tree_person_large_photo img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; object-position: center center; display: block; } .tree_modal_backdrop .tree_person_large_photo strong { color: var(--text_color); font-size: 21px; line-height: 1.15; } .tree_modal_backdrop .tree_person_large_photo .tree_person_large_identity { display: grid; gap: 5px; min-width: 0; } .tree_modal_backdrop .tree_person_large_photo .tree_person_large_identity small { color: var(--text_color_lighter2); font-size: 13px; font-weight: 700; } .tree_modal_backdrop .tree_person_large_photo .tree_person_identity_meta { color: var(--main_color_darker); } .tree_modal_backdrop .tree_person_large_photo .tree_person_identity_facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .tree_modal_backdrop .tree_person_large_photo .tree_person_identity_facts span { min-height: 24px; display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid var(--border_color); border-radius: 999px; background: var(--bg_color_darker1); color: var(--text_color_lighter1); font-size: 12px; font-weight: 700; line-height: 1.2; } .tree_modal_backdrop .tree_person_listing_dot { position: absolute; top: 16px; right: 16px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--bg_color_lighter); background: #17a36b; } .tree_modal_backdrop .tree_person_listing_dot.hidden { background: #d9a220; } .tree_modal_backdrop .tree_person_listing_dot.deceased { background: #d94343; } .tree_modal_backdrop .tree_person_detail_grid { display: grid; border: 1px solid var(--border_color); border-radius: 12px; overflow: hidden; } .tree_modal_backdrop .tree_person_detail_row { display: grid; grid-template-columns: minmax(110px, 0.42fr) minmax(120px, 1fr) minmax(96px, auto); gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--border_color); } .tree_modal_backdrop .tree_person_detail_row:last-child { border-bottom: none; } .tree_modal_backdrop .tree_person_detail_row span { color: var(--text_color_lighter2); font-weight: 700; } .tree_modal_backdrop .tree_person_detail_row strong { color: var(--text_color); font-weight: 700; overflow-wrap: anywhere; } .tree_modal_backdrop .tree_person_detail_row div { justify-self: end; text-align: right; color: var(--text_color_lighter2); font-weight: 500; opacity: 0.8; overflow-wrap: anywhere; } .tree_modal_backdrop .tree_person_detail_row .tree_detail_inline_action { min-height: 28px; padding: 4px 9px; border: 1px solid var(--main_color_lighter3); border-radius: 999px; background: var(--main_color_lighter5); color: var(--main_color); font-size: 12px; font-weight: 700; cursor: pointer; } .tree_modal_backdrop .tree_person_actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; overflow: visible; } .tree_modal_backdrop .tree_person_actions .tree_person_remove_btn { background: #d94343; border-color: #d94343; color: #fff; } .tree_modal_backdrop .tree_person_actions .tree_person_remove_btn:hover { background: #c73535; border-color: #c73535; } .tree_modal_backdrop .tree_utility_message { margin: 0 0 14px; color: var(--text_color); line-height: 1.45; } .tree_modal_backdrop .tree_utility_field { display: grid; gap: 6px; margin-bottom: 8px; } .tree_modal_backdrop .tree_utility_field span { font-size: 12px; font-weight: 700; color: #777; } .tree_modal_backdrop .tree_utility_field input { width: 100%; padding: 9px 10px; border: 1px solid var(--border_color); border-radius: 7px; background: #fff; color: #333; } .tree_modal_backdrop .tree_utility_field[hidden] { display: none; } .tree_modal_backdrop .tree_utility_choices { display: grid; gap: 8px; margin: 10px 0 14px; } .tree_modal_backdrop .tree_utility_choices[hidden] { display: none; } .tree_modal_backdrop .tree_utility_choice { display: grid; gap: 3px; width: 100%; padding: 12px; border: 1px solid var(--border_color); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s; } .tree_modal_backdrop .tree_utility_choice strong { color: var(--text_color); font-size: 14px; } .tree_modal_backdrop .tree_utility_choice span { color: var(--text_color_lighter2); font-size: 12px; line-height: 1.35; } .tree_modal_backdrop .tree_utility_choice:hover, .tree_modal_backdrop .tree_utility_choice:focus-visible { border-color: var(--main_color); background: var(--main_color_lighter5); } .tree_modal_backdrop .tree_utility_modal.danger #treeUtilityConfirm { background: var(--light_red); border-color: var(--light_red); } .tree_person_action_tip { position: fixed; width: 220px; padding: 8px 10px; border: 1px solid var(--border_color); border-radius: 7px; background: var(--text_color); color: var(--white_color); font-size: 12px; font-weight: 700; line-height: 1.3; text-align: center; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s ease, visibility 0s linear 0.12s; z-index: 1300; } .tree_person_action_tip::after { content: ""; position: absolute; left: var(--action-tip-arrow-left, calc(50% - 6px)); bottom: -12px; border: 6px solid transparent; border-top-color: var(--text_color); } .tree_person_action_tip.visible { opacity: 1; visibility: visible; transition-delay: 0s; } @media screen and (max-width: 620px) { .tree_modal_backdrop { padding: 12px; align-items: flex-start; } .tree_modal_backdrop .tree_action_modal { max-height: calc(100vh - 24px); } .tree_modal_backdrop .tree_parent_grid, .tree_modal_backdrop .tree_form_grid.two, .tree_modal_backdrop .tree_person_profile { grid-template-columns: 1fr; } .tree_modal_backdrop .tree_person_large_photo { grid-template-columns: 1fr; width: 100%; margin: 0 auto; text-align: center; } .tree_modal_backdrop .tree_person_large_photo img { margin: 0 auto; } .tree_modal_backdrop .tree_person_large_photo .tree_person_identity_facts { justify-content: center; } .tree_modal_backdrop .tree_person_detail_row { grid-template-columns: minmax(92px, 0.55fr) 1fr; } .tree_modal_backdrop .tree_person_detail_row div { grid-column: 2; justify-self: start; text-align: left; } } @keyframes treePersonFocusFlash { 0%, 100% { box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.08); border-color: var(--border_color_darker); } 50% { box-shadow: 0 0 0 6px var(--main_color_lighter3), 0 10px 24px rgba(0, 147, 165, 0.22); border-color: var(--main_color); } } /* Vertical tree menu mode */ .tree_container.vertical { height: calc(100vh - 3.4375rem - 2.125rem - 6px) !important; overflow: hidden !important; cursor: default !important; width: 100% !important; background: none !important; } .tree_container.vertical .tree_canvas { display: none !important; } .tree_container.vertical .cta_panel { display: none !important; } .tree_container.vertical .v_tree_container { display: block; } .tree_container[data-tree-layout-pending=true] { visibility: hidden; } .tree_container[data-tree-layout-pending=true] * { transition: none !important; } .tree_container .external_partner, .tree_container .external_partner > .one_person.partner, .tree_container .tree_connector_layer .tree_connector_path { transition: none !important; } /* Vertical menu container - isolated scroll area */ .v_tree_container { display: none; width: 100%; height: 100%; padding: 56px 16px 100px; overflow-x: auto; overflow-y: scroll; scrollbar-gutter: stable both-edges; -webkit-overflow-scrolling: touch; } .v_tree_container .v_tree { width: min(700px, 100%); min-width: 400px; margin: 0 auto; } .public_tree_view .v_tree_container { padding-top: 18px; } .tree_feedback_toast { position: fixed; left: 50%; bottom: 28px; z-index: 1200; opacity: 0; transform: translateX(-50%); padding: 10px 16px; border: 1px solid var(--main_color_lighter3); border-radius: 999px; background: var(--white_color); color: var(--main_color); font-size: 14px; font-weight: 700; pointer-events: none; transition: opacity 0.18s ease; } .tree_feedback_toast.visible { opacity: 1; } /* Vertical menu node */ .v_node { margin-bottom: 10px; } .v_node .v_node_header { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; background: #fff; border-radius: 10px; border: 1px solid var(--border_color); cursor: pointer; user-select: text; transition: background 0.15s, border-color 0.15s; } .v_node .v_node_header:hover { background: #f4f9ff; border-color: #d6ebff; } .v_node .v_node_header.tree_person_focus_flash { animation: treePersonFocusFlash 0.58s ease-in-out 0s 6; } .v_node .v_node_header .v_toggle { width: 24px; height: 24px; border: none; background: none; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; cursor: pointer; color: #c8c8c8; transition: transform 0.25s ease, color 0.15s; } .v_node .v_node_header .v_toggle svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .v_node .v_node_header .v_leaf_dot { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .v_node .v_node_header .v_leaf_dot::after { content: ""; display: block; width: 7px; height: 7px; border-radius: 50%; background: #ddd; } .v_node .v_node_header .v_photos { display: flex; flex-shrink: 0; } .v_node .v_node_header .v_photos img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border_color_darker1); object-fit: cover; object-position: center center; } .v_node .v_node_header .v_photos img + img { margin-left: -10px; } .v_node .v_node_header .v_photos img.v_actual_child_photo { border: 2px solid var(--main_color_lighter3); } .v_node .v_node_header .v_photos img.v_dead_photo { filter: grayscale(0.7) opacity(0.75); } .v_node .v_node_header .v_names { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: #333; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .v_node .v_node_header .v_names .v_person_name { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; } .v_node .v_node_header .v_names .v_person_name .person_birthday_icon { position: static; flex: 0 0 14px; } .v_node .v_node_header .v_names .v_actual_child_name { padding-bottom: 2px; color: var(--main_color); font-weight: 700; } .v_node .v_node_header .v_names .v_dead_name { opacity: 0.5; } .v_node .v_node_header .v_names .v_couple_sep { color: #ccc; font-weight: 300; font-size: 15px; } .v_node .v_node_header .v_names .v_person_actions { display: none; align-items: center; gap: 4px; } .v_node .v_node_header .v_node_actions { display: none; align-items: center; gap: 4px; flex-shrink: 0; } .v_node .v_node_header .v_add_btn { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 50%; background: var(--green_color_lighter); cursor: pointer; flex-shrink: 0; } .v_node .v_node_header .v_add_btn .v_add_plus { color: #fff; font-size: 18px; line-height: 1; } .v_node .v_node_header .v_add_btn.v_add_partner { background: var(--light_red_1); } .v_node .v_node_header .v_add_btn.v_add_parents { background: #7c5cff; } .v_node .v_node_header .v_add_btn.v_add_child { background: var(--warning_color_lighter1); } .v_node .v_node_header .v_external_badge { font-size: 10px; font-weight: 600; color: #aaa; background: #f7f7f7; border: 1px solid #e5e5e5; border-radius: 20px; padding: 2px 8px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.4px; } .v_node .v_node_header .v_child_count { font-size: 12px; font-weight: 700; color: var(--main_color); border: 1.5px solid var(--main_color); border-radius: 20px; padding: 1px 8px; flex-shrink: 0; min-width: 26px; text-align: center; } .v_node .v_children { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; margin-left: 22px; margin-top: 3px; } .v_node .v_children .v_children_inner { overflow: hidden; min-height: 0; padding-left: 14px; padding-top: 4px; border-left: 2px solid var(--border_color_lighter); } .v_node.expanded > .v_node_header { border-color: #d4eaff; } .v_node.expanded > .v_node_header .v_toggle { transform: rotate(90deg); color: var(--main_color); } .v_node.expanded > .v_children { grid-template-rows: 1fr; } .v_node.v_external > .v_node_header { background: #fafafa; border-style: dashed; } .tree_container:not(.tree_editing) .add_child, .tree_container:not(.tree_editing) .add_parents, .tree_container:not(.tree_editing) .add_spouse, .tree_container:not(.tree_editing) .add_partner { opacity: 0 !important; visibility: hidden !important; } .tree_container.tree_editing .tree_canvas .tree li .one_person:hover .add_parents, .tree_container.tree_editing .tree_canvas .tree li .one_person:hover .add_spouse, .tree_container.tree_editing .tree_canvas .tree li .one_person:hover .add_partner, .tree_container.tree_editing .tree_canvas .tree li .couple:hover > .add_child, .tree_container.tree_editing .tree_canvas .tree li .external_partner .one_person.partner:hover .add_child.external_add_child { opacity: 1; visibility: visible; } .tree_container.tree_editing .v_person_actions, .tree_container.tree_editing .v_node_actions { display: flex; } @media (max-width: 760px) { .tree_container.tree_editing .add_child, .tree_container.tree_editing .add_parents, .tree_container.tree_editing .add_spouse, .tree_container.tree_editing .add_partner, .tree_container.tree_editing .external_add_child { opacity: 1 !important; visibility: visible !important; } .tree_container.tree_editing .plus_btn svg { width: 24px !important; } .tree_container { margin-top: 0; } .tree_container .tree_canvas { top: -24px; } .tree_container .tree_canvas .tree li { padding: 1rem 0.55rem; } .tree_container .tree_canvas .tree li .couple .one_person { margin-right: -5px; } .tree_container .tree_canvas .tree li .couple .one_person.wife { margin-left: -5px; } .tree_container .tree_canvas .tree li .one_person { width: 86px; padding: 5px 3px; border-radius: 12px; } .tree_container .tree_canvas .tree li .one_person img { width: 50px; height: 50px; } .tree_container .tree_canvas .tree li .one_person span { font-size: 11px; letter-spacing: 0; } .tree_container .tree_canvas .tree li .one_person .add_parents { top: -7px; } .tree_container .tree_canvas .tree li .external_partner .one_person.partner { width: 86px; height: 86px; } .family_tree_picker { left: 10px; } .family_tree_picker .family_tree_picker_toggle { min-width: 0; max-width: calc(48vw - 18px); padding: 7px 9px; } .family_tree_picker .family_tree_picker_menu { width: min(280px, 100vw - 20px); } .layout_toggle_btns { right: 10px; max-width: calc(52vw - 18px); } .layout_toggle_btns .layout_dropdown_toggle { min-width: 0; } .layout_toggle_btns .v_edit_toggle { gap: 5px; } .layout_toggle_btns .v_edit_toggle .v_edit_label { font-size: 11px; } .layout_toggle_btns .v_edit_toggle .perm_toggle_btn { width: 34px; height: 20px; } .layout_toggle_btns .v_edit_toggle .perm_toggle_btn .perm_toggle_knob { width: 14px; height: 14px; } .layout_toggle_btns .v_edit_toggle .perm_toggle_btn.on .perm_toggle_knob { left: 17px; } .tree_container.vertical { height: calc(100vh - 3.4375rem - 2.125rem) !important; } .tree_container.vertical .layout_toggle_btns { max-width: calc(50vw - 14px); } .v_tree_container { padding: 54px 8px 92px; } .v_tree_container .v_tree { width: min(620px, 100%); min-width: 340px; } .v_node { margin-bottom: 8px; } .v_node .v_node_header { gap: 7px; padding: 8px; border-radius: 12px; } .v_node .v_node_header .v_toggle, .v_node .v_node_header .v_leaf_dot { width: 20px; height: 20px; } .v_node .v_node_header .v_photos img { width: 32px; height: 32px; } .v_node .v_node_header .v_names { font-size: 13px; line-height: 1.35; } .v_node .v_node_header .v_names .v_person_name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; } .v_node .v_node_header .v_external_badge { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; } .v_node .v_children { margin-left: 10px; } .v_node .v_children .v_children_inner { padding-left: 9px; } } @media (max-width: 520px) { .family_tree_picker { left: 8px; right: 8px; } .family_tree_picker .family_tree_picker_toggle { width: 100%; max-width: none; } .layout_toggle_btns { top: 48px; right: 8px; left: 8px; max-width: none; justify-content: stretch; } .layout_toggle_btns .layout_dropdown { flex: 1; min-width: 0; } .layout_toggle_btns .layout_dropdown_toggle { width: 100%; } .layout_toggle_btns .v_edit_toggle { flex-shrink: 0; } .tree_container .tree_canvas { top: -42px; } .tree_container.vertical .layout_toggle_btns { max-width: none; } .v_tree_container { padding-top: 96px; } .tree_modal_backdrop { align-items: flex-end; padding: 10px; } .tree_modal_backdrop .tree_action_modal { max-height: calc(100vh - 20px); overflow: auto; } .tree_modal_backdrop .tree_parent_grid { grid-template-columns: 1fr; } } .tree_minimap { position: absolute; bottom: 110px; z-index: 20; width: 220px; padding: 5px; overflow: hidden; border: 1px solid var(--border_color_darker1); border-radius: 12px; background: rgba(255, 255, 255, 0.96); } .tree_minimap.bottom-left { left: 32px; } .tree_minimap.bottom-right { right: 70px; } .tree_minimap_stage { position: relative; height: 136px; border-radius: 8px; overflow: hidden; background: var(--bg_color_darker); cursor: grab; touch-action: none; } .tree_minimap_stage:active { cursor: grabbing; } .tree_minimap_content { position: absolute; inset: 0 auto auto 0; transform-origin: top left; pointer-events: none; } .tree_minimap_content .tree { transform-origin: top left; } .tree_minimap_content img { visibility: hidden; } .tree_minimap_marker { position: absolute; display: block; border: 2px solid color-mix(in srgb, var(--main_color) 68%, white); border-radius: 8px; background: color-mix(in srgb, var(--main_color) 32%, var(--white_color)); } .tree_minimap_marker.deceased { border-color: var(--text_color_lighter2); background: var(--border_color); } .tree_minimap_viewport { position: absolute; min-width: 12px; min-height: 10px; border: 2px solid var(--main_color); border-radius: 4px; background: rgba(0, 147, 165, 0.14); cursor: grab; } .auth_container { padding: 3.125rem 1.25rem 12.5rem 1.25rem; } .auth_container.other_pages { padding: 4rem 1.25rem; } .auth_container .wrapper_auth_container { width: 100%; max-width: 28.125rem; margin: auto; } .auth_container .wrapper_auth_container .logo_auth { margin-bottom: 1.25rem; } .auth_container .wrapper_auth_container .auth_nav { position: relative; margin: 0 0 0.9375rem 0; padding: 0 0 1.875rem 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } .auth_container .wrapper_auth_container .auth_nav::before { content: ""; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, -50%); width: 20%; border-bottom: 0.3125rem solid var(--main_color_lighter1); border-radius: 3.125rem; } .auth_container .wrapper_auth_container .auth_nav .one_btn_auth_nav { padding: 0.5rem 0.3125rem; background: var(--bg_color_darker1); border: 0.0625rem solid #e0ede4; border-radius: 0.625rem 0 0 0.625rem; text-align: center; font-size: 15px; cursor: pointer; } .auth_container .wrapper_auth_container .auth_nav .one_btn_auth_nav.right { border-radius: 0 0.625rem 0.625rem 0; } .auth_container .wrapper_auth_container .auth_nav .one_btn_auth_nav:hover { background: #e0ede4; } .auth_container .wrapper_auth_container .header_auth { padding: 0 0.5rem; font-size: 1.75rem; font-weight: 700; text-align: center; } .auth_container .wrapper_auth_container .form_auth #feedback_auth .auth_msg { margin: 10px 0; padding: 10px 20px; background: var(--warning_color); border-radius: 10px; text-align: center; color: #fff; } /* ── HTMX global loading bar ──────────────────────────────────────────────── */ #loading { display: block; position: fixed; top: 0; left: -100%; width: 100%; height: 3px; background: var(--main_color); z-index: 99999; opacity: 0; transition: opacity 0.15s ease; pointer-events: none; } #loading.htmx-request { opacity: 1; animation: racinage_loading_bar 1.6s ease-in-out infinite; } @keyframes racinage_loading_bar { 0% { left: -100%; } 100% { left: 100%; } } .manage_page { display: grid; grid-template-columns: 260px 1fr; height: calc(100vh - 3.4375rem); overflow: hidden; max-width: 1500px; margin: auto; } .manage_page .manage_sidebar { display: flex; flex-direction: column; overflow: hidden; padding: 15px 14px; border-right: 1px solid var(--border_color_lighter); } .manage_page .manage_sidebar .manage_profile_card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.625rem; align-items: center; margin-bottom: 15px; padding: 6px 10px; border-radius: 12px; background: var(--white_color); border: 1px solid var(--border_color_lighter); text-decoration: none; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .manage_page .manage_sidebar .manage_profile_card:hover { border-color: var(--main_color_lighter3); } .manage_page .manage_sidebar .manage_profile_card:hover .manage_profile_name { color: var(--main_color); } .manage_page .manage_sidebar .manage_profile_card .manage_profile_link { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0.625rem; align-items: center; min-width: 0; color: inherit; cursor: pointer; text-decoration: none; } .manage_page .manage_sidebar .manage_profile_card .manage_profile_photo img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border_color); } .manage_page .manage_sidebar .manage_profile_card .manage_profile_info { overflow: hidden; } .manage_page .manage_sidebar .manage_profile_card .manage_profile_info .manage_profile_name { font-weight: 600; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; } .manage_page .manage_sidebar .manage_profile_card .manage_profile_info .manage_profile_username { font-size: 0.75rem; color: var(--text_color_lighter2); } .manage_page .manage_sidebar .manage_profile_card .manage_nav_toggle { display: none; align-items: center; justify-content: center; flex-direction: column; width: 38px; height: 38px; border: 1px solid var(--border_color_lighter); border-radius: 8px; background: var(--white_color); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .manage_page .manage_sidebar .manage_profile_card .manage_nav_toggle:hover { border-color: var(--main_color); background: var(--light_main_color); } .manage_page .manage_sidebar .manage_profile_card .manage_nav_toggle span { display: block; width: 17px; height: 2px; border-radius: 999px; background: var(--text_color); } .manage_page .manage_sidebar .manage_profile_card .manage_nav_toggle span + span { margin-top: 4px; } .manage_page .manage_sidebar .manage_nav { min-height: 0; display: flex; flex: 1 1 auto; gap: 2px; flex-direction: column; overflow-y: auto; padding: 0 4px 0 0; scrollbar-gutter: stable; scrollbar-color: transparent transparent; scrollbar-width: thin; } .manage_page .manage_sidebar .manage_nav:hover { scrollbar-color: var(--border_color) transparent; } .manage_page .manage_sidebar .manage_nav::-webkit-scrollbar { width: 4px; } .manage_page .manage_sidebar .manage_nav::-webkit-scrollbar-thumb { border-radius: 999px; background: transparent; } .manage_page .manage_sidebar .manage_nav:hover::-webkit-scrollbar-thumb { background: var(--border_color); } .manage_page .manage_sidebar .manage_nav .manage_nav_divider { width: calc(100% - 0.75rem); min-height: 1px; flex: 0 0 1px; height: 1px; background: var(--border_color); margin: 10px 0.375rem; } .manage_page .manage_sidebar .manage_nav .manage_nav_item { display: grid; gap: 0.625rem; grid-template-columns: 22px 1fr; align-items: center; padding: 5px 0.75rem; border-radius: 0.5rem; text-decoration: none; cursor: pointer; transition: background 0.15s; } .manage_page .manage_sidebar .manage_nav .manage_nav_item:hover { background: var(--main_color_lighter5); } .manage_page .manage_sidebar .manage_nav .manage_nav_item:hover .manage_nav_icon svg { fill: var(--main_color); } .manage_page .manage_sidebar .manage_nav .manage_nav_item:hover .manage_nav_text { color: var(--main_color); } .manage_page .manage_sidebar .manage_nav .manage_nav_item.active { background: var(--main_color_lighter5); } .manage_page .manage_sidebar .manage_nav .manage_nav_item.active .manage_nav_icon svg { fill: var(--main_color) !important; } .manage_page .manage_sidebar .manage_nav .manage_nav_item.active .manage_nav_text { color: var(--main_color) !important; } .manage_page .manage_sidebar .manage_nav .manage_nav_item .manage_nav_icon { display: flex; align-items: center; justify-content: center; align-self: center; justify-self: center; width: 22px; height: 22px; } .manage_page .manage_sidebar .manage_nav .manage_nav_item .manage_nav_icon svg { width: 100%; height: 100%; display: block; fill: #aaa; transition: fill 0.15s; } .manage_page .manage_sidebar .manage_nav .manage_nav_item .manage_nav_text { font-size: 0.875rem; font-weight: 500; transition: color 0.15s; } .manage_page .manage_sidebar .manage_sidebar_collapse { position: sticky; z-index: 3; bottom: -20px; display: none; flex: 0 0 auto; margin: 12px -14px -20px; padding: 10px 14px; border-top: 1px solid var(--border_color_lighter); background: var(--white_color); } .manage_page .manage_sidebar .manage_sidebar_collapse button { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 12px; border: 1px solid var(--border_color_lighter); border-radius: 9px; background: var(--bg_color); color: var(--text_color_lighter1); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; } .manage_page .manage_sidebar .manage_sidebar_collapse button:hover, .manage_page .manage_sidebar .manage_sidebar_collapse button:focus-visible { border-color: var(--main_color); color: var(--main_color); } .manage_page .manage_sidebar .manage_sidebar_collapse button:focus-visible { outline: 2px solid var(--main_color_lighter4); outline-offset: 2px; } .manage_page .manage_sidebar .manage_sidebar_collapse button:disabled { cursor: wait; opacity: 0.65; } .manage_page .manage_sidebar .manage_sidebar_collapse button svg { width: 20px; height: 20px; flex: 0 0 20px; fill: currentColor; } .manage_page .manage_content { overflow-y: auto; } .manage_page .manage_content .manage_content_inner { padding: 2rem 2rem 3rem; } .manage_page .manage_content .manage_content_inner.manage_content_inner_stats { padding: 14px 18px 28px; } .manage_page .manage_content .manage_content_inner.manage_content_inner_stats .manage_section_header { display: none; } .manage_page .manage_content .manage_content_inner .manage_section_header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_section_heading { min-height: 44px; display: flex; align-items: center; gap: 10px; font-size: 15px; } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_section_title { min-height: 44px; display: flex; align-items: center; margin: 0; padding: 0 8px; font-size: 1.375rem; font-weight: 700; } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_section_description { margin: 6px 8px 0; color: var(--text_color_lighter1); } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_section_actions { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_section_actions .manage_family_limit_notice { max-width: 300px; margin: 0; padding: 8px 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color); color: var(--text_color_lighter1); font-size: 0.8125rem; line-height: 1.35; } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_section_actions .manage_collab_invites_btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); font-size: 0.875rem; font-weight: 700; cursor: pointer; } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_section_actions .manage_collab_invites_btn.has_pending { background: #dc7e2d; border-color: #dc7e2d; color: #fff; } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_section_actions .manage_collab_invites_btn span { display: inline-grid; min-width: 20px; height: 20px; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.22); color: inherit; font-size: 0.75rem; } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_new_family_details { position: relative; } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_new_family_details summary { list-style: none; } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_new_family_details summary::-webkit-details-marker { display: none; } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_new_family_popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: min(280px, 100vw - 48px); padding: 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color); display: grid; gap: 8px; } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_new_family_popover label { font-size: 0.8125rem; font-weight: 600; } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_new_family_popover .form_input { width: 100%; max-width: unset; } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_new_family_popover .manage_add_new_btn { width: 100%; } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_new_family_popover p { margin: 0; color: var(--text_color_lighter1); font-size: 0.75rem; line-height: 1.35; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_overview { display: grid; gap: 20px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_summary { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 14px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_summary .manage_stat_highlight { --stat-color: var(--main_color); --stat-tint: rgba(0, 147, 165, 0.10); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; min-height: 112px; padding: 18px; background: var(--white_color); border: 1px solid var(--border_color_lighter); border-radius: 12px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_summary .manage_stat_highlight.color_main { --stat-color: var(--main_color); --stat-tint: rgba(0, 147, 165, 0.10); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_summary .manage_stat_highlight.color_blue { --stat-color: #3f7edb; --stat-tint: rgba(63, 126, 219, 0.10); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_summary .manage_stat_highlight.color_green { --stat-color: var(--green_color); --stat-tint: rgba(13, 150, 82, 0.10); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_summary .manage_stat_highlight.color_purple { --stat-color: #8f55bd; --stat-tint: rgba(143, 85, 189, 0.11); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_summary .manage_stat_highlight .manage_stat_highlight_icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--stat-tint); color: var(--stat-color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_summary .manage_stat_highlight .manage_stat_highlight_icon svg { width: 21px; height: 21px; fill: currentColor; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_summary .manage_stat_highlight span { display: block; color: var(--text_color_lighter1); font-size: 13px; font-weight: 700; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_summary .manage_stat_highlight strong { display: block; margin-top: 5px; color: var(--stat-color); font-size: 2rem; line-height: 1; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_summary .manage_stat_highlight small { display: block; margin-top: 6px; color: var(--text_color_lighter1); font-size: 12px; line-height: 1.4; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_board { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.05fr) minmax(260px, 0.72fr); gap: 14px; align-items: start; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_group { display: grid; gap: 14px; min-width: 0; padding: 18px; border: 1px solid var(--border_color_lighter); border-radius: 12px; background: var(--white_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_group_family, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_group_tiles { grid-column: span 2; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_group_head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_group_head a { display: inline-flex; align-items: center; min-height: 32px; color: #3f7edb; font-size: 0.8125rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_group_title { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text_color); font-size: 1rem; font-weight: 700; line-height: 1.2; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_group_title svg { width: 18px; height: 18px; fill: var(--main_color); flex: 0 0 auto; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stat_highlight, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_metric_row, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_tile { --stat-color: var(--main_color); --stat-tint: rgba(0, 147, 165, 0.10); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stat_highlight.color_main, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_metric_row.color_main, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_tile.color_main { --stat-color: var(--main_color); --stat-tint: rgba(0, 147, 165, 0.10); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stat_highlight.color_blue, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_metric_row.color_blue, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_tile.color_blue { --stat-color: #3f7edb; --stat-tint: rgba(63, 126, 219, 0.10); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stat_highlight.color_pink, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_metric_row.color_pink, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_tile.color_pink { --stat-color: #d7447b; --stat-tint: rgba(215, 68, 123, 0.10); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stat_highlight.color_green, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_metric_row.color_green, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_tile.color_green { --stat-color: var(--green_color); --stat-tint: rgba(13, 150, 82, 0.10); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stat_highlight.color_gray, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_metric_row.color_gray, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_tile.color_gray { --stat-color: #8a8f98; --stat-tint: rgba(138, 143, 152, 0.14); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stat_highlight.color_orange, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_metric_row.color_orange, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_tile.color_orange { --stat-color: var(--secondary_color); --stat-tint: rgba(205, 101, 0, 0.11); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stat_highlight.color_purple, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_metric_row.color_purple, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_tile.color_purple { --stat-color: #8f55bd; --stat-tint: rgba(143, 85, 189, 0.11); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_family_body { display: grid; grid-template-columns: minmax(180px, 0.85fr) repeat(2, minmax(170px, 1fr)); gap: 16px; align-items: stretch; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_metric_list { display: grid; gap: 8px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_metric_row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 32px; color: var(--text_color_lighter1); font-size: 0.8125rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_metric_row span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_metric_row svg { width: 15px; height: 15px; fill: var(--stat-color); flex: 0 0 auto; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_metric_row strong { color: var(--text_color); font-size: 0.875rem; font-weight: 800; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_split, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_record_total { display: grid; align-content: center; gap: 12px; min-height: 178px; padding: 16px; border: 1px solid var(--border_color_lighter); border-radius: 12px; background: var(--bg_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_split h3 { margin: 0; color: var(--text_color); font-size: 0.875rem; font-weight: 700; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_split > strong { display: grid; justify-items: center; color: var(--text_color); font-size: 1.9rem; line-height: 1; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_split > strong small { margin-top: 5px; color: var(--text_color_lighter1); font-size: 0.75rem; font-weight: 600; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_split p { display: grid; gap: 5px; margin: 0; color: var(--text_color_lighter1); font-size: 0.75rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_split p span { display: flex; justify-content: space-between; gap: 10px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_split p b { color: var(--text_color); font-weight: 800; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_meter { height: 8px; overflow: hidden; border-radius: 999px; background: var(--border_color_lighter); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_meter span { display: block; height: 100%; min-width: 3px; background: var(--main_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_meter.color_green span { background: var(--green_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_meter.color_blue span { background: #3f7edb; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_records_body { display: grid; grid-template-columns: minmax(140px, 0.75fr) minmax(180px, 1fr); gap: 16px; align-items: stretch; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_record_total { justify-items: center; text-align: center; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_record_total strong { color: var(--main_color); font-size: 2.25rem; line-height: 1; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_record_total span { color: var(--text_color_lighter1); font-size: 0.8125rem; font-weight: 700; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_action_list { display: grid; gap: 8px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_action_list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border_color_lighter); border-radius: 8px; color: var(--text_color); font-size: 0.8125rem; font-weight: 700; text-decoration: none; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_action_list a span { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_action_list a svg { width: 16px; height: 16px; fill: var(--main_color); flex: 0 0 auto; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_action_list a b { color: var(--text_color_lighter1); font-size: 1.25rem; font-weight: 500; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_action_list a:hover { border-color: var(--main_color); color: var(--main_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_tile_row { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); overflow: hidden; border: 1px solid var(--border_color_lighter); border-radius: 12px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_tile { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 110px; padding: 12px 10px; border-right: 1px solid var(--border_color_lighter); text-align: center; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_tile:last-child { border-right: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_tile svg { width: 24px; height: 24px; padding: 8px; border-radius: 10px; background: var(--stat-tint); fill: var(--stat-color); box-sizing: content-box; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_tile span { color: var(--text_color_lighter1); font-size: 0.72rem; font-weight: 700; line-height: 1.25; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_tile strong { color: var(--text_color); font-size: 1.35rem; line-height: 1; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_activity_list { display: grid; gap: 8px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_activity_list > p { margin: 0; color: var(--text_color_lighter1); font-size: 0.8125rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_activity_list > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px 10px; align-items: center; min-height: 46px; padding: 8px; border: 1px solid var(--border_color_lighter); border-radius: 10px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_activity_list > div span { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 147, 165, 0.1); color: var(--main_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_activity_list > div span svg { width: 16px; height: 16px; fill: currentColor; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_activity_list > div strong { overflow: hidden; color: var(--text_color); font-size: 0.8125rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_activity_list > div small { color: var(--text_color_lighter1); font-size: 0.72rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_redesign_container { --stats-ink: #1f2933; --stats-muted: #66727f; --stats-line: #e1e8ef; --stats-soft: #f8fbfd; display: grid; gap: 16px; color: var(--stats-ink); } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_grid, .manage_page .manage_content .manage_content_inner .manage_section_body .stats_main_grid, .manage_page .manage_content .manage_content_inner .manage_section_body .stats_bottom_grid { display: grid; gap: 16px; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_main_grid, .manage_page .manage_content .manage_content_inner .manage_section_body .stats_bottom_grid { grid-template-columns: minmax(520px, 1.45fr) minmax(420px, 1.2fr) minmax(280px, 0.82fr); } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_card, .manage_page .manage_content .manage_content_inner .manage_section_body .stats_grid_card { min-width: 0; border: 1px solid var(--stats-line); border-radius: 9px; background: var(--white_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_card { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 16px; min-height: 106px; padding: 17px 20px; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_card .highlight_icon_wrap { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_card .highlight_icon_wrap svg { width: 29px; height: 29px; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_card .highlight_content { display: grid; gap: 3px; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_card .highlight_label { color: var(--stats-ink); font-size: 0.875rem; font-weight: 500; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_card .highlight_val { font-size: 1.95rem; font-weight: 600; line-height: 1; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_card .highlight_sub { color: #5f6f8b; font-size: 0.82rem; font-weight: 500; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_card.border_teal .highlight_val { color: var(--main_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_card.border_blue .highlight_val { color: #3f7edb; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_card.border_green .highlight_val { color: var(--green_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_card.border_purple .highlight_val { color: #8f55bd; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_grid_card { display: grid; gap: 18px; padding: 14px 20px 20px 22px; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_card_header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_card_title { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--stats-ink); font-size: 1rem; font-weight: 600; line-height: 1.2; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_card_title .title_icon { width: 19px; height: 19px; color: var(--main_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .view_all_link { color: #4777d6; font-size: 0.76rem; font-weight: 500; text-decoration: none; white-space: nowrap; } .manage_page .manage_content .manage_content_inner .manage_section_body .family_overview_content { display: grid; grid-template-columns: 190px minmax(150px, 1fr) minmax(150px, 1fr); align-items: center; gap: 20px; } .manage_page .manage_content .manage_content_inner .manage_section_body .family_metrics_column, .manage_page .manage_content .manage_content_inner .manage_section_body .records_list_column { display: grid; gap: 10px; } .manage_page .manage_content .manage_content_inner .manage_section_body .family_metrics_column { padding-right: 16px; border-right: 1px solid var(--stats-line); } .manage_page .manage_content .manage_content_inner .manage_section_body .metric_row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 18px; color: var(--stats-muted); font-size: 0.8125rem; font-weight: 400; } .manage_page .manage_content .manage_content_inner .manage_section_body .metric_label_wrap { display: inline-flex; align-items: center; gap: 9px; min-width: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .metric_dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; } .manage_page .manage_content .manage_content_inner .manage_section_body .metric_value { color: var(--stats-ink); font-size: 0.8125rem; font-weight: 600; } .manage_page .manage_content .manage_content_inner .manage_section_body .row_icon { width: 16px; height: 16px; flex: 0 0 auto; } .manage_page .manage_content .manage_content_inner .manage_section_body .overview_chart_block { display: grid; justify-items: center; gap: 12px; min-width: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .chart_title { color: var(--stats-ink); font-size: 0.79rem; font-weight: 500; } .manage_page .manage_content .manage_content_inner .manage_section_body .doughnut_ring { position: relative; width: 138px; height: 138px; aspect-ratio: 1/1; flex: 0 0 auto; } .manage_page .manage_content .manage_content_inner .manage_section_body .records_doughnut { width: 166px; height: 166px; } .manage_page .manage_content .manage_content_inner .manage_section_body .doughnut_svg { width: 100%; height: 100%; aspect-ratio: 1/1; display: block; overflow: visible; } .manage_page .manage_content .manage_content_inner .manage_section_body .doughnut_track, .manage_page .manage_content .manage_content_inner .manage_section_body .doughnut_segment { fill: none; } .manage_page .manage_content .manage_content_inner .manage_section_body .doughnut_track { stroke: #eef2f6; } .manage_page .manage_content .manage_content_inner .manage_section_body .doughnut_segment { transform: rotate(-90deg); transform-box: view-box; transform-origin: 50% 50%; cursor: pointer; } .manage_page .manage_content .manage_content_inner .manage_section_body .doughnut_center { position: absolute; inset: 28px; display: grid; place-content: center; justify-items: center; border-radius: 50%; background: var(--white_color); text-align: center; } .manage_page .manage_content .manage_content_inner .manage_section_body .records_doughnut .doughnut_center { inset: 34px; } .manage_page .manage_content .manage_content_inner .manage_section_body .total_val { color: var(--stats-ink); font-size: 1.75rem; font-weight: 600; line-height: 1; } .manage_page .manage_content .manage_content_inner .manage_section_body .total_lbl { color: var(--stats-muted); font-size: 0.74rem; font-weight: 400; } .manage_page .manage_content .manage_content_inner .manage_section_body .chart_legend { display: grid; grid-template-columns: 1fr; gap: 6px; width: 100%; max-width: 180px; } .manage_page .manage_content .manage_content_inner .manage_section_body .legend_item { display: flex; align-items: center; gap: 8px; color: var(--stats-muted); font-size: 0.74rem; font-weight: 400; } .manage_page .manage_content .manage_content_inner .manage_section_body .legend_val { margin-left: auto; color: var(--stats-ink); font-weight: 500; } .manage_page .manage_content .manage_content_inner .manage_section_body .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .manage_page .manage_content .manage_content_inner .manage_section_body .records_card_content { display: grid; grid-template-columns: minmax(180px, 0.92fr) minmax(210px, 1fr); align-items: center; gap: 28px; } .manage_page .manage_content .manage_content_inner .manage_section_body .records_chart_wrap { display: flex; align-items: center; justify-content: center; min-height: 210px; padding-right: 24px; border-right: 1px solid var(--stats-line); } .manage_page .manage_content .manage_content_inner .manage_section_body .records_list_column { gap: 14px; padding-left: 4px; } .manage_page .manage_content .manage_content_inner .manage_section_body .quick_actions_list, .manage_page .manage_content .manage_content_inner .manage_section_body .recent_activity_column { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--stats-line); border-radius: 10px; } .manage_page .manage_content .manage_content_inner .manage_section_body .action_btn_item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 14px; border-bottom: 1px solid var(--stats-line); color: var(--stats-muted); font-size: 0.84rem; font-weight: 500; text-decoration: none; } .manage_page .manage_content .manage_content_inner .manage_section_body .action_btn_item:last-child { border-bottom: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .action_btn_item:hover { color: var(--main_color); background: #f8fcfd; } .manage_page .manage_content .manage_content_inner .manage_section_body .action_left { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .action_icon_holder, .manage_page .manage_content .manage_content_inner .manage_section_body .chevron_right { color: var(--main_color); flex: 0 0 auto; } .manage_page .manage_content .manage_content_inner .manage_section_body .action_icon_holder svg { width: 17px; height: 17px; fill: currentColor; } .manage_page .manage_content .manage_content_inner .manage_section_body .chevron_right { width: 17px; height: 17px; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_tiles_row { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); overflow: hidden; border-radius: 10px; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_tile_card { display: grid; justify-items: center; align-content: center; gap: 7px; min-height: 118px; padding: 12px 8px; border-right: 1px solid var(--stats-line); text-align: center; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_tile_card:last-child { border-right: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .tile_icon_circle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; } .manage_page .manage_content .manage_content_inner .manage_section_body .tile_icon_circle svg { width: 20px; height: 20px; } .manage_page .manage_content .manage_content_inner .manage_section_body .tile_label { min-height: 28px; color: var(--stats-muted); font-size: 0.67rem; font-weight: 500; line-height: 1.2; } .manage_page .manage_content .manage_content_inner .manage_section_body .tile_val { color: var(--stats-ink); font-size: 1.45rem; font-weight: 600; line-height: 1; } .manage_page .manage_content .manage_content_inner .manage_section_body .recent_activity_column { border: 0; gap: 11px; overflow: visible; } .manage_page .manage_content .manage_content_inner .manage_section_body .activity_row { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 34px; } .manage_page .manage_content .manage_content_inner .manage_section_body .activity_icon_circle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; } .manage_page .manage_content .manage_content_inner .manage_section_body .activity_icon_circle svg { width: 17px; height: 17px; } .manage_page .manage_content .manage_content_inner .manage_section_body .activity_body { display: grid; gap: 2px; min-width: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .activity_title { overflow: hidden; color: var(--stats-muted); font-size: 0.76rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .manage_page .manage_content .manage_content_inner .manage_section_body .activity_time { color: #8a95a8; font-size: 0.68rem; font-weight: 400; } .manage_page .manage_content .manage_content_inner .manage_section_body .empty_activity_msg { margin: 0; color: var(--stats-muted); font-size: 0.82rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_footer_branding { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; padding-top: 8px; color: #8a95a8; font-size: 0.8rem; font-weight: 400; } .manage_page .manage_content .manage_content_inner .manage_section_body .footer_left, .manage_page .manage_content .manage_content_inner .manage_section_body .footer_right { display: inline-flex; align-items: center; gap: 10px; } .manage_page .manage_content .manage_content_inner .manage_section_body .footer_right { grid-column: 2; justify-self: center; } .manage_page .manage_content .manage_content_inner .manage_section_body .heart_icon { width: 18px; height: 18px; color: #ef5b82; } .manage_page .manage_content .manage_content_inner .manage_section_body .lock_icon { width: 16px; height: 16px; color: #9aa5b8; } .manage_page .manage_content .manage_content_inner .manage_section_body .bg_teal { background: #e4f5f7; color: var(--main_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .bg_blue { background: #e8f0ff; color: #3f7edb; } .manage_page .manage_content .manage_content_inner .manage_section_body .bg_green { background: #e8f6ea; color: var(--green_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .bg_purple { background: #f1e8f8; color: #8f55bd; } .manage_page .manage_content .manage_content_inner .manage_section_body .bg_gray { background: #c7ccd3; color: #7b8491; } .manage_page .manage_content .manage_content_inner .manage_section_body .bg_pink { background: #fbe6ef; color: #e24a82; } .manage_page .manage_content .manage_content_inner .manage_section_body .dot.bg_green { background: #65bd5b; } .manage_page .manage_content .manage_content_inner .manage_section_body .dot.bg_gray { background: #c7ccd3; } .manage_page .manage_content .manage_content_inner .manage_section_body .dot.bg_blue { background: #3f7edb; } .manage_page .manage_content .manage_content_inner .manage_section_body .dot.bg_pink { background: #e24a82; } .manage_page .manage_content .manage_content_inner .manage_section_body .metric_dot.bg_purple_alt { background: #8f55bd; } .manage_page .manage_content .manage_content_inner .manage_section_body .metric_dot.bg_indigo { background: #557cda; } .manage_page .manage_content .manage_content_inner .manage_section_body .metric_dot.bg_sky { background: #56c5cf; } .manage_page .manage_content .manage_content_inner .manage_section_body .metric_dot.bg_orange { background: #f19a2d; } .manage_page .manage_content .manage_content_inner .manage_section_body .metric_dot.bg_emerald { background: #71bf59; } .manage_page .manage_content .manage_content_inner .manage_section_body .metric_dot.bg_rose { background: #d55f84; } .manage_page .manage_content .manage_content_inner .manage_section_body .metric_dot.bg_navy { background: #395a9b; } .manage_page .manage_content .manage_content_inner .manage_section_body .metric_dot.bg_gold { background: #c08a24; } .manage_page .manage_content .manage_content_inner .manage_section_body .tint_teal { color: var(--main_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .tint_blue { color: #3f7edb; } .manage_page .manage_content .manage_content_inner .manage_section_body .tint_pink { color: #e24a82; } .manage_page .manage_content .manage_content_inner .manage_section_body .tint_green { color: var(--green_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .tint_gray { color: #8a95a8; } .manage_page .manage_content .manage_content_inner .manage_section_body .tint_orange { color: var(--secondary_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .tint_purple, .manage_page .manage_content .manage_content_inner .manage_section_body .tint_purple_alt { color: #8f55bd; } .manage_page .manage_content .manage_content_inner .manage_section_body .tint_indigo { color: #557cda; } .manage_page .manage_content .manage_content_inner .manage_section_body .tint_sky { color: #56c5cf; } .manage_page .manage_content .manage_content_inner .manage_section_body .tint_emerald { color: #35a565; } .manage_page .manage_content .manage_content_inner .manage_section_body .doughnut_tooltip { position: fixed; z-index: 1000; max-width: 220px; padding: 7px 9px; border: 1px solid var(--stats-line); border-radius: 7px; background: var(--white_color); color: var(--stats-ink); font-size: 0.75rem; font-weight: 500; pointer-events: none; white-space: nowrap; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; margin-bottom: 1rem; padding: 14px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_users_search_wrap { position: relative; flex: 1; min-width: 180px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_users_search_wrap .manage_search_icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: var(--text_color_lighter2); pointer-events: none; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_users_search_wrap .manage_search_input { width: 100%; height: 42px; padding-left: 34px; padding-right: 0.75rem; background: var(--white_color); border: 0.0625rem solid var(--border_color); border-radius: 0.5rem; font-size: 0.875rem; outline: none; transition: border-color 0.15s; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_users_search_wrap .manage_search_input:focus { border-color: var(--main_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_users_filters { display: flex; gap: 0.5rem; flex-wrap: wrap; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_users_filters .manage_filter_select { height: 42px; padding: 0 0.625rem; font-size: 0.8125rem; border: 0.0625rem solid var(--border_color); border-radius: 0.5rem; background: var(--white_color); cursor: pointer; transition: border-color 0.15s; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_users_filters .manage_filter_select:focus { outline: none; border-color: var(--main_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_view_toggle { display: flex; border: 1px solid var(--border_color); border-radius: 0.5rem; overflow: hidden; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_view_toggle .view_toggle_btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--white_color); border: none; cursor: pointer; transition: background 0.15s; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_view_toggle .view_toggle_btn svg { width: 16px; height: 16px; fill: var(--text_color_lighter2); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_view_toggle .view_toggle_btn.active { background: var(--main_color_lighter5); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_view_toggle .view_toggle_btn.active svg { fill: var(--main_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_view_toggle .view_toggle_btn:hover:not(.active) { background: var(--bg_color_lighter); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_add_new_btn { display: flex; align-items: center; gap: 0.375rem; min-height: 42px; padding: 0 0.875rem; background: var(--main_color); color: #fff; border: none; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_add_new_btn svg { width: 18px; height: 18px; fill: #fff; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_add_new_btn:hover { opacity: 0.88; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_add_new_btn:disabled { opacity: 0.45; cursor: default; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_count_bar { font-size: 0.8125rem; color: var(--text_color_lighter2); margin-bottom: 0.75rem; padding: 0 2px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_count_bar strong { color: var(--text_color); } .manage_page .manage_content .manage_content_inner .manage_section_body #manage_users_container { min-height: 120px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_empty_full { width: 100%; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_empty_full .nothing_to_show { max-width: none; margin-left: 0; margin-right: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_loading, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_empty:not(.nothing_to_show) { display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; color: var(--text_color_lighter2); font-size: 0.9rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_loading_spinner { width: 28px; height: 28px; border: 3px solid var(--border_color); border-top-color: var(--main_color); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap.view_grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap.view_grid .manage_user_card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap.view_grid .manage_user_card .manage_user_card_top { display: flex; align-items: center; gap: 0.75rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap.view_grid .manage_user_card .manage_user_email { font-size: 0.8rem; color: var(--text_color_lighter1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap.view_list { display: flex; flex-direction: column; gap: 8px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap.view_list .manage_user_card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 0.8fr) minmax(180px, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap.view_list .manage_user_card .manage_user_card_top { display: flex; align-items: center; gap: 0.75rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap.view_list .manage_user_card .manage_user_email { font-size: 0.8125rem; color: var(--text_color_lighter1); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap.view_list .manage_user_card .manage_user_families { margin-top: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card { background: var(--white_color); border: 1px solid var(--border_color); border-radius: 0.75rem; transition: border-color 0.15s; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card:hover { border-color: var(--main_color_lighter3); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_photo img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border_color); flex-shrink: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_info { flex: 1; overflow: hidden; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_info .manage_user_name { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_info .manage_user_username { font-size: 0.78rem; color: var(--text_color_lighter2); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_status_badge { font-size: 0.6875rem; font-weight: 700; padding: 3px 9px; border-radius: 100px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.4px; align-self: flex-start; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_status_badge.status_active { background: #e6f9ec; color: var(--green_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_status_badge.status_inactive { background: #fde8e8; color: var(--light_red); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_status_badge.status_deleted { background: #f0f0f0; color: #888; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_families { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0.625rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_families span { max-width: 100%; padding: 3px 7px; border: 1px solid var(--border_color); border-radius: 100px; background: var(--bg_color_lighter); color: var(--text_color_lighter1); font-size: 0.72rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_families span.muted { color: var(--text_color_lighter2); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_dots_wrapper { position: relative; flex-shrink: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_dots_wrapper .manage_user_dots_btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; border-radius: 50%; cursor: pointer; transition: background 0.15s; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_dots_wrapper .manage_user_dots_btn svg { width: 18px; height: 18px; fill: var(--text_color_lighter2); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_dots_wrapper .manage_user_dots_btn:hover { background: var(--bg_color_lighter); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_dots_wrapper .manage_user_dots_btn:hover svg { fill: var(--text_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_dots_wrapper .manage_user_menu { display: none; position: absolute; right: 0; top: 100%; background: var(--white_color); border: 1px solid var(--border_color); border-radius: 0.5rem; z-index: 200; min-width: 160px; overflow: hidden; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_dots_wrapper .manage_user_menu.open { display: block; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_dots_wrapper .manage_user_menu button { display: block; width: 100%; padding: 9px 14px; text-align: left; background: none; border: none; font-size: 0.875rem; cursor: pointer; transition: background 0.12s; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_dots_wrapper .manage_user_menu button:hover { background: var(--bg_color_lighter); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_dots_wrapper .manage_user_menu button.danger_btn { color: var(--light_red); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap .manage_user_card .manage_user_dots_wrapper .manage_user_menu button.restore_btn { color: var(--green_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_pagination { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1.25rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_pagination .page_btn { padding: 7px 16px; background: var(--white_color); border: 1px solid var(--border_color); border-radius: 0.5rem; font-size: 0.875rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_pagination .page_btn:hover:not(:disabled) { border-color: var(--main_color); color: var(--main_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_pagination .page_btn:disabled { opacity: 0.4; cursor: default; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_pagination .page_info { font-size: 0.875rem; color: var(--text_color_lighter1); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_pagination .page_info strong { color: var(--text_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_popup_overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(2px); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_popup_overlay.active { display: flex; animation: popup_fadein 0.22s ease; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_popup_overlay .manage_popup_box { background: var(--white_color); border-radius: 1rem; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2); width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; animation: popup_slidein 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_popup_overlay .manage_popup_header { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.125rem 1.5rem 1rem; border-bottom: 1px solid var(--border_color); flex-shrink: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_popup_overlay .manage_popup_header .manage_popup_header_top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_popup_overlay .manage_popup_header .manage_popup_title { font-weight: 700; font-size: 1rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_popup_overlay .manage_popup_header .manage_popup_tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--border_color); border-radius: 0.625rem; background: var(--bg_color_lighter); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_popup_overlay .manage_popup_header .manage_popup_tabs[hidden] { display: none; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_popup_overlay .manage_popup_header .manage_popup_tabs .manage_popup_tab { flex: 1; min-height: 32px; border: none; border-radius: 0.5rem; background: transparent; color: var(--text_color_lighter1); cursor: pointer; font-size: 0.85rem; font-weight: 600; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_popup_overlay .manage_popup_header .manage_popup_tabs .manage_popup_tab.active { background: var(--main_color_lighter5); color: var(--main_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_popup_overlay .manage_popup_header .manage_popup_close_btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: transparent; border-radius: 50%; cursor: pointer; transition: background 0.15s; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_popup_overlay .manage_popup_header .manage_popup_close_btn svg { width: 14px; height: 14px; fill: var(--text_color_lighter2); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_popup_overlay .manage_popup_header .manage_popup_close_btn:hover { background: var(--bg_color_lighter); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_popup_overlay .manage_popup_body { overflow-y: auto; flex: 1; padding: 1.5rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_popup_overlay .manage_popup_spinner { display: flex; align-items: center; justify-content: center; padding: 2rem; } @keyframes popup_fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes popup_slidein { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_form, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_confirm, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions { display: flex; flex-direction: column; gap: 1rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_tab_panel { display: none; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_tab_panel.active { display: block; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_picker { display: grid; gap: 8px; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_picker .popup_family_picker_title { font-size: 0.8125rem; font-weight: 600; color: var(--text_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_picker .popup_family_option { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: 68px; padding: 0.75rem 0.875rem 0.75rem 3.625rem; border: 1px solid var(--border_color); border-radius: 0.5rem; background: var(--white_color); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_picker .popup_family_option:hover { border-color: var(--main_color_lighter3); background: var(--main_color_lighter5); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_picker .popup_family_option:has(input:checked) { border-color: var(--main_color); background: var(--main_color_lighter5); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_picker .popup_family_option:has(input:focus-visible) { outline: 2px solid var(--main_color); outline-offset: 2px; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_picker .popup_family_option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_picker .popup_family_option .popup_family_check { position: absolute; top: calc(50% - 16px); left: 0.875rem; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border_color_darker); border-radius: 0.5rem; color: transparent; background: var(--bg_color); font-size: 1rem; font-weight: 700; line-height: 1; align-self: start; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_picker .popup_family_option .popup_family_check::before { content: "✓"; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_picker .popup_family_option input:checked + .popup_family_check { position: absolute; border-color: var(--main_color); background: var(--main_color); color: #fff; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_picker .popup_family_option .popup_family_text { min-width: 0; display: grid; gap: 4px; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_picker .popup_family_option .popup_family_text strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text_color); font-size: 0.9rem; line-height: 1.25; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_picker .popup_family_option .popup_family_text small { display: block; color: var(--text_color_lighter2); font-size: 0.75rem; line-height: 1.3; letter-spacing: 0.02em; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_access_cards { display: grid; gap: 10px; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_access_cards .popup_family_picker_title { font-size: 0.8125rem; font-weight: 600; color: var(--text_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_access_card { display: grid; gap: 8px; padding: 0 10px 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); overflow: hidden; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_access_card:has(> .popup_family_option input:checked) { border-color: var(--main_color_lighter3); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_access_card .popup_family_option { margin: 0; padding: 6px 0 10px; border: 0; border-bottom: 1px solid var(--border_color_lighter); border-radius: 0; background: var(--bg_color_lighter); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_access_card .popup_family_option .popup_family_text { display: inline-flex; flex-direction: column; padding-left: 5px; vertical-align: 14px; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_access_card .popup_family_option .popup_family_text strong, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_access_card .popup_family_option .popup_family_text small { display: block; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_access_card .popup_family_option .popup_family_text small { font-size: 15px; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_access_card .popup_family_option .popup_family_text small { margin: 2px; font-size: 13px; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_permissions { display: grid; gap: 6px; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_permissions details { border: 1px solid var(--border_color_lighter); border-radius: 8px; background: var(--bg_color_lighter); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_permissions summary { padding: 8px 10px; color: var(--text_color); font-size: 0.8125rem; font-weight: 700; cursor: pointer; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_perm_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 10px 10px; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_perm_grid label { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text_color_lighter1); font-size: 0.75rem; line-height: 1.3; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_perm_grid label span { min-width: 0; overflow-wrap: anywhere; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_empty_note, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_user_no_results { padding: 0.625rem 0.75rem; border: 1px solid var(--border_color); border-radius: 0.625rem; color: var(--text_color_lighter1); font-size: 0.85rem; background: var(--bg_color_lighter); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_user_search_field { position: relative; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_user_results { position: relative; z-index: 5; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_user_results_popover { position: absolute; left: 0; right: 0; top: 2px; display: grid; gap: 4px; padding: 6px; border: 1px solid var(--border_color); border-radius: 0.625rem; background: var(--white_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_user_result_card, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_selected_user_card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 0.5rem; border: 1px solid var(--border_color); border-radius: 0.625rem; background: var(--white_color); text-align: left; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_user_result_card .popup_user_result_photo img, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_selected_user_card .popup_user_result_photo img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_user_result_card .popup_user_result_main, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_selected_user_card .popup_user_result_main { min-width: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_user_result_card .popup_user_result_main strong, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_user_result_card .popup_user_result_main small, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_selected_user_card .popup_user_result_main strong, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_selected_user_card .popup_user_result_main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_user_result_card .popup_user_result_main strong, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_selected_user_card .popup_user_result_main strong { font-size: 0.875rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_user_result_card .popup_user_result_main small, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_selected_user_card .popup_user_result_main small { color: var(--text_color_lighter2); font-size: 0.78rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_user_result_card { cursor: pointer; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_user_result_card:hover { border-color: var(--main_color_lighter3); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_selected_user_card { margin-top: 0.5rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_selected_user_card button { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 50%; background: var(--bg_color_lighter); color: var(--text_color_lighter1); cursor: pointer; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_user_details { display: grid; gap: 1rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_details_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_details_grid div { padding: 0.75rem; border: 1px solid var(--border_color); border-radius: 0.625rem; background: var(--bg_color_lighter); min-width: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_details_grid div span { display: block; color: var(--text_color_lighter2); font-size: 0.75rem; margin-bottom: 0.25rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_details_grid div strong { display: block; overflow-wrap: anywhere; font-size: 0.9rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_detail_section { display: grid; gap: 0.5rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_detail_section .popup_detail_section_title { font-size: 0.875rem; font-weight: 700; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_chips { display: flex; flex-wrap: wrap; gap: 6px; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_family_chips span { padding: 4px 8px; border: 1px solid var(--border_color); border-radius: 100px; background: var(--bg_color_lighter); color: var(--text_color_lighter1); font-size: 0.78rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_photo_row { display: flex; align-items: center; gap: 0.875rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_photo_row .popup_photo_preview img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_photo_row .popup_photo_name { font-weight: 600; font-size: 0.9375rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_photo_row .popup_photo_username { font-size: 0.8rem; color: var(--text_color_lighter2); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_fields { display: flex; flex-direction: column; gap: 0.75rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_fields .popup_field { display: flex; flex-direction: column; gap: 0.25rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_fields .popup_field label { font-size: 0.8125rem; font-weight: 500; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_fields .popup_field .form_input { width: 100%; max-width: unset; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_actions { position: sticky; z-index: 2; bottom: -1.5rem; display: flex; gap: 0.625rem; justify-content: flex-end; margin: 0 -1.5rem -1.5rem; padding: 0.875rem 1.5rem; border-top: 1px solid var(--border_color); background: var(--white_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_actions .button1.secondary { background: transparent; border: 1px solid var(--border_color); color: var(--text_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_actions .button1.secondary:hover { border-color: var(--main_color); color: var(--main_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_actions .button1.danger { background: var(--light_red); border-color: var(--light_red); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_actions .button1.danger:hover { opacity: 0.88; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_msg, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_result_msg, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_error { font-size: 0.875rem; padding: 0.625rem 0.875rem; border-radius: 0.5rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_msg.success, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_result_msg.success, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_error.success { background: #e6f9ec; color: var(--green_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_msg.error, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_result_msg.error, .manage_page .manage_content .manage_content_inner .manage_section_body .popup_error.error { background: #fde8e8; color: var(--light_red); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_confirm { align-items: center; text-align: center; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_confirm .popup_confirm_icon { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_confirm .popup_confirm_icon svg { width: 28px; height: 28px; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_confirm .popup_confirm_icon.danger { background: #fde8e8; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_confirm .popup_confirm_icon.danger svg { fill: var(--light_red); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_confirm .popup_confirm_icon.success { background: #e6f9ec; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_confirm .popup_confirm_icon.success svg { fill: var(--green_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_confirm .popup_confirm_text p { margin: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_confirm .popup_confirm_sub { font-size: 0.8125rem; color: var(--text_color_lighter2); margin-top: 0.25rem !important; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_confirm .popup_actions { justify-content: center; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions { gap: 16px; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_section { border: 1px solid var(--border_color); border-radius: 0.625rem; overflow: hidden; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_section .perm_section_header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: var(--bg_color_lighter); cursor: pointer; user-select: text; transition: background 0.15s; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_section .perm_section_header:hover { background: var(--main_color_lighter5); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_section .perm_section_header .perm_section_info { display: flex; align-items: center; gap: 0.5rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_section .perm_section_header .perm_section_info .perm_section_label { font-weight: 600; font-size: 0.875rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_section .perm_section_header .perm_section_info .perm_section_count { font-size: 0.75rem; color: var(--text_color_lighter2); background: var(--border_color); padding: 2px 7px; border-radius: 100px; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_section .perm_section_header .perm_section_actions { display: flex; align-items: center; gap: 0.5rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_section .perm_section_header .perm_section_actions .perm_group_toggle_btn { font-size: 0.7rem; font-weight: 600; padding: 3px 8px; border: 1px solid var(--border_color); border-radius: 100px; background: var(--white_color); cursor: pointer; transition: all 0.15s; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_section .perm_section_header .perm_section_actions .perm_group_toggle_btn.all_on { background: var(--main_color_lighter5); border-color: var(--main_color); color: var(--main_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_section .perm_section_header .perm_section_actions .perm_group_toggle_btn:hover { border-color: var(--main_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_section .perm_section_header .perm_section_actions .perm_section_chevron { width: 18px; height: 18px; fill: var(--text_color_lighter2); transition: transform 0.2s; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_section .perm_section_body { border-top: 1px solid var(--border_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_section.collapsed .perm_section_body { display: none; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_section.collapsed .perm_section_chevron { transform: rotate(-90deg); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_toggle_row { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 1rem; cursor: pointer; transition: background 0.12s; border-bottom: 1px solid var(--border_color_lighter); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_toggle_row:last-child { border-bottom: none; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_toggle_row:hover:not(.perm_toggle_locked) { background: var(--main_color_lighter5); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_toggle_row.perm_toggle_locked { opacity: 0.6; cursor: default; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_toggle_row .perm_toggle_label { font-size: 0.875rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_toggle_row .perm_toggle_btn { position: relative; width: 38px; height: 22px; border-radius: 100px; border: none; background: var(--border_color); cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_toggle_row .perm_toggle_btn.on { background: var(--main_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_toggle_row .perm_toggle_btn:disabled { cursor: default; } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_toggle_row .perm_toggle_btn .perm_toggle_knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .manage_page .manage_content .manage_content_inner .manage_section_body .popup_permissions .perm_toggle_row .perm_toggle_btn.on .perm_toggle_knob { left: 19px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card { background: var(--white_color); border: 1px solid var(--border_color); border-radius: 0.875rem; overflow: hidden; max-width: 1180px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card .manage_form_section { display: grid; grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr); gap: 22px; padding: 1.4rem 1.5rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card .manage_form_section .manage_form_section_title { font-weight: 600; font-size: 0.9375rem; margin: 0; line-height: 1.35; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card .manage_form_section .manage_photo_edit { display: flex; align-items: center; gap: 1.25rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card .manage_form_section .manage_photo_edit .manage_photo_preview img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border_color); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card .manage_form_section .manage_form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card .manage_form_section .manage_form .manage_field { display: flex; flex-direction: column; gap: 0.25rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card .manage_form_section .manage_form .manage_field .manage_label { font-size: 0.8125rem; font-weight: 500; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card .manage_form_section .manage_form .manage_field .form_input { max-width: none; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card .manage_form_section .manage_form .manage_field:nth-of-type(3) { grid-column: 1/-1; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card .manage_form_section .manage_form .manage_field_msg { grid-column: 1/-1; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card .manage_form_section .manage_form .button1 { width: fit-content; margin-top: 0.25rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card.manage_account_card .manage_photo_edit { align-items: center; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card.manage_account_card .manage_photo_edit .manage_photo_actions { max-width: 420px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card .manage_divider { border: none; border-top: 1px solid var(--border_color); margin: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_coming_soon { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5rem 2rem; gap: 1rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_coming_soon .manage_coming_soon_icon svg { width: 3rem; height: 3rem; fill: var(--border_color_darker1); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_coming_soon .manage_coming_soon_text { font-size: 1rem; color: var(--text_color_lighter2); } /* ── Manage families ─────────────────────────────────────────────────────── */ .manage_families_page { display: grid; gap: 18px; } .manage_families_page .manage_family_feedback { color: var(--main_color); font-size: 14px; font-weight: 700; min-height: 20px; text-align: right; } .manage_families_page .manage_family_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .manage_families_page .manage_family_owner_tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; padding: 4px 10px 4px 4px; border: 1px solid var(--border_color_lighter); border-radius: 999px; background: var(--bg_color); } .manage_families_page .manage_family_owner_tag.muted { padding: 4px 10px; color: var(--text_color_lighter1); font-size: 12px; font-weight: 600; } .manage_families_page .manage_family_owner_tag .manage_family_owner_photo { flex: 0 0 22px; width: 22px; height: 22px; overflow: hidden; border-radius: 50%; background: var(--main_color_lighter5); } .manage_families_page .manage_family_owner_tag .manage_family_owner_photo img { width: 100%; height: 100%; object-fit: cover; } .manage_families_page .manage_family_owner_tag .manage_family_owner_name { min-width: 0; color: var(--text_color); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1200px) { .manage_families_page .manage_family_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .manage_families_page .manage_family_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .manage_families_page .manage_family_grid { grid-template-columns: minmax(0, 1fr); } } .manage_families_page .manage_family_card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); cursor: default !important; transition: border-color 0.15s; } .manage_families_page .manage_family_card:hover { border-color: var(--main_color_lighter3); } .manage_families_page .manage_family_card.selected_family { border-color: var(--main_color_lighter2); } .manage_families_page .manage_user_card_top { display: flex; align-items: center; gap: 12px; } .manage_families_page .manage_family_icon { width: 42px; height: 42px; flex: 0 0 42px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--main_color_lighter5); } .manage_families_page .manage_family_icon svg { width: 22px; height: 22px; fill: var(--main_color); } .manage_families_page .manage_user_info { flex: 1; min-width: 0; } .manage_families_page .manage_user_info .manage_user_name { font-weight: 600; font-size: 0.95rem; color: var(--text_color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .manage_families_page .manage_user_info .manage_user_username { margin-top: 2px; font-size: 0.78rem; color: var(--text_color_lighter2); } .manage_families_page .manage_user_dots_wrapper { position: relative; flex-shrink: 0; } .manage_families_page .manage_user_dots_wrapper .manage_user_dots_btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid transparent; background: transparent; border-radius: 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .manage_families_page .manage_user_dots_wrapper .manage_user_dots_btn svg { width: 20px; height: 20px; fill: var(--text_color_lighter2); } .manage_families_page .manage_user_dots_wrapper .manage_user_dots_btn:hover { background: var(--bg_color_darker1); } .manage_families_page .manage_user_dots_wrapper .manage_user_dots_btn:hover svg { fill: var(--text_color); } .manage_families_page .manage_user_dots_wrapper .manage_user_menu { display: none; position: absolute; right: 0; top: 100%; margin-top: 6px; min-width: 160px; max-width: min(320px, 100vw - 32px); padding: 6px; background: var(--white_color); border: 1px solid var(--border_color); border-radius: 10px; z-index: 200; } .manage_families_page .manage_user_dots_wrapper .manage_user_menu.open { display: block; } .manage_families_page .manage_user_dots_wrapper .manage_user_menu form { margin: 0; } .manage_families_page .manage_user_dots_wrapper .manage_user_menu details summary { display: block; padding: 9px 12px; border-radius: 7px; color: var(--text_color); font-size: 0.85rem; font-weight: 500; cursor: pointer; list-style: none; transition: background 0.12s; } .manage_families_page .manage_user_dots_wrapper .manage_user_menu details summary:hover { background: var(--bg_color_darker1); } .manage_families_page .manage_user_dots_wrapper .manage_user_menu details summary::-webkit-details-marker { display: none; } .manage_families_page .manage_user_dots_wrapper .manage_user_menu .manage_family_menu_form { display: grid; gap: 8px; padding: 8px 6px 6px; } .manage_families_page .manage_user_dots_wrapper .manage_user_menu .manage_family_menu_form label { display: grid; gap: 4px; color: var(--text_color_lighter1); font-size: 0.72rem; font-weight: 700; } .manage_families_page .manage_user_dots_wrapper .manage_user_menu .manage_family_menu_form .form_input, .manage_families_page .manage_user_dots_wrapper .manage_user_menu .manage_family_menu_form .form_textarea { width: 100%; border: 1px solid var(--border_color); border-radius: 7px; background: var(--white_color); color: var(--text_color); font-size: 0.82rem; } .manage_families_page .manage_user_dots_wrapper .manage_user_menu .manage_family_menu_form .form_input { height: 34px; } .manage_families_page .manage_user_dots_wrapper .manage_user_menu .manage_family_menu_form .form_textarea { min-height: 68px; padding: 8px 10px; resize: vertical; } .manage_families_page .manage_user_dots_wrapper .manage_user_menu .manage_family_menu_row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .manage_families_page .manage_user_dots_wrapper .manage_user_menu .manage_family_delete_form { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border_color_lighter); } .manage_families_page .manage_user_dots_wrapper .manage_user_menu button { display: block; width: 100%; padding: 9px 12px; text-align: left; background: none; border: none; border-radius: 7px; color: var(--text_color); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background 0.12s; } .manage_families_page .manage_user_dots_wrapper .manage_user_menu button:hover { background: var(--bg_color_darker1); } .manage_families_page .manage_user_dots_wrapper .manage_user_menu button:disabled { opacity: 0.4; cursor: default; background: none; } .manage_families_page .manage_user_dots_wrapper .manage_user_menu button.danger_btn { color: var(--light_red); } .manage_families_page .manage_user_dots_wrapper .manage_user_menu button.manage_family_form_submit { background: var(--main_color); color: var(--white_color); text-align: center; } .manage_families_page .manage_user_dots_wrapper .manage_user_menu button.manage_family_form_submit:hover { background: var(--main_color_darker1); } .manage_families_page .manage_user_status_badge { align-self: flex-start; font-size: 0.6875rem; font-weight: 700; padding: 3px 10px; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.4px; } .manage_families_page .manage_user_status_badge.status_active { background: #e6f9ec; color: var(--green_color); } .manage_families_page .manage_user_status_badge.status_inactive { background: var(--bg_color_darker1); color: var(--text_color_lighter1); } .manage_families_page .manage_user_status_badge.status_selected { background: var(--main_color_lighter5); color: var(--main_color); } .manage_families_page .manage_family_badges { display: flex; flex-wrap: wrap; gap: 8px; } .manage_families_page .manage_family_meta { display: flex; flex-wrap: wrap; gap: 8px; } .manage_families_page .manage_family_meta button { min-height: 32px; border: 1px solid var(--border_color_lighter); border-radius: 999px; padding: 4px 9px; background: var(--white_color); color: var(--text_color_lighter1); font-size: 12px; font-weight: 600; cursor: pointer; } .manage_families_page .manage_family_meta button:hover, .manage_families_page .manage_family_meta button:focus-visible { border-color: var(--main_color); color: var(--main_color); outline: none; } .manage_families_page .racinage_modal_backdrop[data-family-details-modal] { display: flex; align-items: center; justify-content: center; } .manage_families_page .manage_family_details_modal { width: min(760px, 100vw - 28px); max-height: min(82dvh, 760px); display: grid; grid-template-rows: auto minmax(0, 1fr); margin: auto; padding: 0; overflow: hidden; } .manage_families_page .manage_family_details_modal .tree_modal_header { margin: 0; padding: 18px 20px; border-bottom: 1px solid var(--border_color_lighter); } .manage_families_page .manage_family_details_modal .tree_modal_header > div { min-width: 0; } .manage_families_page .manage_family_details_modal .tree_modal_header h3 { margin: 0; color: var(--text_color); font-size: 18px; } .manage_families_page .manage_family_details_modal .tree_modal_header p { margin: 4px 0 0; color: var(--text_color_lighter1); font-size: 12px; } .manage_families_page .manage_family_details_modal .manage_family_details_close { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border_color); border-radius: 9px; background: var(--white_color); color: var(--text_color); font-size: 24px; cursor: pointer; } .manage_families_page .manage_family_details_modal .manage_family_details_close:hover, .manage_families_page .manage_family_details_modal .manage_family_details_close:focus-visible { border-color: var(--main_color); color: var(--main_color); outline: none; } .manage_families_page .manage_family_details_modal .manage_family_details_list { min-height: 0; display: grid; gap: 10px; padding: 16px 20px 20px; overflow-y: auto; } .manage_families_page .manage_family_details_modal .manage_family_permissions_success { margin: 0; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--main_color) 30%, var(--border_color_lighter)); border-radius: 9px; background: var(--main_color_lighter5); color: var(--text_color); font-size: 13px; line-height: 1.45; } .manage_families_page .manage_family_details_modal .manage_family_permissions_success strong { color: var(--main_color); } .manage_families_page .manage_family_details_modal .manage_family_user_detail, .manage_families_page .manage_family_details_modal .manage_family_record_detail { border: 1px solid var(--border_color_lighter); border-radius: 10px; background: var(--bg_color); } .manage_families_page .manage_family_details_modal .manage_family_user_detail { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 12px; } .manage_families_page .manage_family_details_modal .manage_family_user_avatar { width: 48px; height: 48px; border: 1px solid var(--border_color_lighter); border-radius: 50%; object-fit: cover; background: var(--white_color); } .manage_families_page .manage_family_details_modal .manage_family_user_identity { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; } .manage_families_page .manage_family_details_modal .manage_family_user_identity > span { min-width: 0; display: grid; gap: 3px; } .manage_families_page .manage_family_details_modal .manage_family_user_identity strong, .manage_families_page .manage_family_details_modal .manage_family_user_identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .manage_families_page .manage_family_details_modal .manage_family_user_identity strong { color: var(--text_color); font-size: 14px; } .manage_families_page .manage_family_details_modal .manage_family_user_identity small { color: var(--text_color_lighter1); font-size: 12px; } .manage_families_page .manage_family_details_modal .manage_family_user_edit { min-height: 36px; padding: 0 11px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--main_color); font-size: 12px; font-weight: 700; cursor: pointer; } .manage_families_page .manage_family_details_modal .manage_family_user_edit:hover, .manage_families_page .manage_family_details_modal .manage_family_user_edit:focus-visible { border-color: var(--main_color); outline: none; } .manage_families_page .manage_family_details_modal .manage_family_owner_badge { align-self: start; padding: 4px 8px; border-radius: 999px; background: var(--main_color_lighter5); color: var(--main_color); font-size: 11px; font-weight: 700; } .manage_families_page .manage_family_details_modal .manage_family_permission_summary { grid-column: 2/-1; display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border_color_lighter); } .manage_families_page .manage_family_details_modal .manage_family_permission_summary summary { min-height: 34px; display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; color: var(--text_color_lighter1); cursor: pointer; list-style: none; } .manage_families_page .manage_family_details_modal .manage_family_permission_summary summary::-webkit-details-marker { display: none; } .manage_families_page .manage_family_details_modal .manage_family_permission_summary summary > span { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .manage_families_page .manage_family_details_modal .manage_family_permission_summary summary > small { min-width: 22px; padding: 2px 6px; border-radius: 999px; background: var(--white_color); color: var(--text_color_lighter1); font-size: 10px; font-weight: 700; text-align: center; } .manage_families_page .manage_family_details_modal .manage_family_permission_summary summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; margin-top: -4px; } .manage_families_page .manage_family_details_modal .manage_family_permission_summary summary:hover, .manage_families_page .manage_family_details_modal .manage_family_permission_summary summary:focus-visible { background: var(--white_color); color: var(--main_color); outline: none; } .manage_families_page .manage_family_details_modal .manage_family_permission_summary[open] summary { margin-bottom: 2px; } .manage_families_page .manage_family_details_modal .manage_family_permission_summary[open] summary::after { rotate: -135deg; margin-top: 4px; } .manage_families_page .manage_family_details_modal .manage_family_permission_summary:not([open]) > div { display: none; } .manage_families_page .manage_family_details_modal .manage_family_permission_summary > div { display: flex; flex-wrap: wrap; gap: 5px; } .manage_families_page .manage_family_details_modal .manage_family_permission_summary > div > small { padding: 4px 7px; border: 1px solid var(--border_color_lighter); border-radius: 999px; background: var(--white_color); color: var(--text_color_lighter1); font-size: 11px; text-transform: capitalize; } .manage_families_page .manage_family_details_modal .manage_family_record_group { display: grid; gap: 8px; } .manage_families_page .manage_family_details_modal .manage_family_record_group > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 0; } .manage_families_page .manage_family_details_modal .manage_family_record_group > div:first-child h4 { margin: 0; color: var(--text_color); font-size: 13px; } .manage_families_page .manage_family_details_modal .manage_family_record_group > div:first-child small { min-width: 24px; padding: 3px 7px; border-radius: 999px; background: var(--main_color_lighter5); color: var(--main_color); font-size: 11px; font-weight: 700; text-align: center; } .manage_families_page .manage_family_details_modal .manage_family_record_group > div:last-child { display: grid; gap: 7px; } .manage_families_page .manage_family_details_modal .manage_family_record_detail { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; } .manage_families_page .manage_family_details_modal .manage_family_record_detail > div { min-width: 0; display: grid; gap: 3px; } .manage_families_page .manage_family_details_modal .manage_family_record_detail > div strong, .manage_families_page .manage_family_details_modal .manage_family_record_detail > div small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .manage_families_page .manage_family_details_modal .manage_family_record_detail > div strong { color: var(--text_color); font-size: 13px; } .manage_families_page .manage_family_details_modal .manage_family_record_detail > div small { color: var(--text_color_lighter1); font-size: 11px; } .manage_families_page .manage_family_details_modal .manage_family_record_detail a { min-height: 40px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--main_color); font-size: 12px; font-weight: 700; } .manage_families_page .manage_family_details_modal .manage_family_record_detail a svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; } .manage_families_page .manage_family_details_modal .manage_family_record_detail a:hover, .manage_families_page .manage_family_details_modal .manage_family_record_detail a:focus-visible { border-color: var(--main_color); outline: none; } .manage_families_page .manage_family_details_modal .manage_family_record_icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; background: var(--main_color_lighter5); color: var(--main_color); } .manage_families_page .manage_family_details_modal .manage_family_record_icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; } .manage_families_page .manage_family_public_url_row { display: flex; align-items: center; gap: 8px; } .manage_families_page .manage_family_public_url_row .manage_family_public_url { min-width: 0; color: var(--main_color); font-size: 12px; line-height: 1.35; word-break: break-all; } .manage_families_page .manage_family_public_url_row .manage_family_public_copy { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--main_color); cursor: pointer; } .manage_families_page .manage_family_public_url_row .manage_family_public_copy svg { width: 16px; height: 16px; fill: currentColor; } .manage_families_page .manage_family_public_url_row .manage_family_public_copy:hover { background: var(--bg_color); } .manage_families_page .manage_collab_invites_modal { display: flex; } .manage_families_page .manage_collab_invites_modal[hidden] { display: none !important; } .manage_families_page .manage_collab_invites_dialog { display: grid; gap: 14px; } .manage_families_page .manage_collab_invite_list, .manage_families_page .pwa_collab_invite_body { display: grid; gap: 12px; } .manage_families_page .manage_collab_invite_item { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color_lighter); } .manage_families_page .manage_collab_invite_item p { margin: 0; color: var(--text_color_lighter1); font-size: 0.875rem; line-height: 1.45; } .manage_families_page .manage_collab_invite_item ul { margin: 0; padding-left: 18px; color: var(--text_color); } .manage_families_page .manage_collab_invite_item_head, .manage_families_page .manage_collab_invite_actions, .manage_families_page .pwa_collab_invite_actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .manage_families_page .manage_collab_status { padding: 3px 9px; border-radius: 999px; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; } .manage_families_page .manage_collab_status.status_pending { background: #fff3e8; color: #dc7e2d; } .manage_families_page .manage_collab_status.status_approved { background: #e6f9ec; color: var(--green_color); } .manage_families_page .manage_collab_status.status_rejected { background: #ffecec; color: var(--light_red); } .hamburger_btn { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 5px 0; border-radius: 6px; transition: background 0.15s; } .hamburger_btn:hover { background: rgba(0, 0, 0, 0.06); } .hamburger_btn svg { width: 22px; height: 22px; flex-shrink: 0; fill: #888; transition: fill 0.2s; } .hamburger_btn:hover svg, .hamburger_btn.open svg { fill: var(--main_color); } .mobile_nav_overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 500; backdrop-filter: blur(2px); } .mobile_nav_overlay.open { display: block; animation: fadein_overlay 0.25s ease; } @keyframes fadein_overlay { from { opacity: 0; } to { opacity: 1; } } .mobile_nav_drawer, .public_mobile_nav_drawer { position: fixed; top: 0; right: 0; width: min(250px, 85vw); height: 100vh; background: var(--white_color); z-index: 600; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: none; } .mobile_nav_drawer.open, .open.public_mobile_nav_drawer { transform: translateX(0); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); } .mobile_nav_drawer .mobile_nav_header, .public_mobile_nav_drawer .mobile_nav_header { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; height: 3.4375rem; border-bottom: 1px solid var(--border_color); flex-shrink: 0; } .mobile_nav_drawer .mobile_nav_header .mobile_nav_logo img, .public_mobile_nav_drawer .mobile_nav_header .mobile_nav_logo img { width: 110px; height: auto; object-fit: contain; } .mobile_nav_drawer .mobile_nav_header .mobile_nav_close, .public_mobile_nav_drawer .mobile_nav_header .mobile_nav_close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; cursor: pointer; border-radius: 50%; transition: background 0.15s; } .mobile_nav_drawer .mobile_nav_header .mobile_nav_close svg, .public_mobile_nav_drawer .mobile_nav_header .mobile_nav_close svg { width: 14px; height: 14px; fill: var(--text_color_lighter2); } .mobile_nav_drawer .mobile_nav_header .mobile_nav_close:hover, .public_mobile_nav_drawer .mobile_nav_header .mobile_nav_close:hover { background: var(--bg_color_lighter); } .mobile_nav_drawer .mobile_nav_links, .public_mobile_nav_drawer .mobile_nav_links { flex: 1; overflow-y: auto; padding: 0.75rem 0.625rem; display: flex; flex-direction: column; gap: 2px; } .mobile_nav_drawer .mobile_nav_links .mobile_nav_link, .public_mobile_nav_drawer .mobile_nav_links .mobile_nav_link { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; border-radius: 0.625rem; text-decoration: none; transition: background 0.15s; } .mobile_nav_drawer .mobile_nav_links .mobile_nav_link .mobile_nav_link_icon, .public_mobile_nav_drawer .mobile_nav_links .mobile_nav_link .mobile_nav_link_icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; } .mobile_nav_drawer .mobile_nav_links .mobile_nav_link .mobile_nav_link_icon svg, .public_mobile_nav_drawer .mobile_nav_links .mobile_nav_link .mobile_nav_link_icon svg { width: 22px; height: 22px; fill: var(--text_color_lighter1); } .mobile_nav_drawer .mobile_nav_links .mobile_nav_link .mobile_nav_link_label, .public_mobile_nav_drawer .mobile_nav_links .mobile_nav_link .mobile_nav_link_label { font-size: 0.9375rem; font-weight: 500; color: var(--text_color); } .mobile_nav_drawer .mobile_nav_links .mobile_nav_link:hover, .public_mobile_nav_drawer .mobile_nav_links .mobile_nav_link:hover { background: var(--bg_color_lighter); } .mobile_nav_drawer .mobile_nav_links .mobile_nav_link.active, .public_mobile_nav_drawer .mobile_nav_links .mobile_nav_link.active { background: var(--main_color_lighter5); } .mobile_nav_drawer .mobile_nav_links .mobile_nav_link.active .mobile_nav_link_icon svg, .public_mobile_nav_drawer .mobile_nav_links .mobile_nav_link.active .mobile_nav_link_icon svg { fill: var(--main_color); } .mobile_nav_drawer .mobile_nav_links .mobile_nav_link.active .mobile_nav_link_label, .public_mobile_nav_drawer .mobile_nav_links .mobile_nav_link.active .mobile_nav_link_label { color: var(--main_color); } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts { display: grid; gap: 8px; margin-top: 0.75rem; padding: 0.875rem 0.25rem 0.25rem; border-top: 1px solid var(--border_color); } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .mobile_family_accounts_title, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .mobile_family_accounts_title { padding: 0 0.625rem; color: var(--text_color); font-size: 0.875rem; font-weight: 600; } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .mobile_family_accounts_groups, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .mobile_family_accounts_groups { display: grid; gap: 6px; } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_group + .family_switcher_group, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_group + .family_switcher_group { margin-top: 2px; padding-top: 8px; } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_group_title, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_group_title { margin-inline: 0.625rem; } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_group_list, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_group_list { display: grid; gap: 2px; } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option { min-height: 50px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 1px solid transparent; border-radius: 0.625rem; background: transparent; color: var(--text_color); text-align: left; cursor: pointer; } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option:hover, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option:hover, .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option:focus-visible, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option:focus-visible { border-color: var(--border_color); background: var(--bg_color_lighter); outline: none; } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option.is_active, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option.is_active { border-color: var(--main_color_lighter3); background: var(--main_color_lighter5); cursor: default; } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option.is_active strong, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option.is_active strong { color: var(--main_color); } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option:disabled:not(.is_active), .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option:disabled:not(.is_active) { opacity: 0.55; cursor: wait; } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option_icon, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option_icon { width: 22px; height: 22px; color: var(--main_color); } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option_icon svg, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option_icon svg { width: 100%; height: 100%; fill: currentColor; } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option_body, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option_body { min-width: 0; display: grid; gap: 2px; } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option_body strong, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option_body strong, .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option_body small, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option_body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option_body strong, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option_body strong { color: var(--text_color); font-size: 0.8125rem; font-weight: 600; } .mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option_body small, .public_mobile_nav_drawer .mobile_nav_links .mobile_family_accounts .family_switcher_option_body small { color: var(--text_color_lighter1); font-size: 0.6875rem; } .mobile_nav_drawer .mobile_nav_footer, .public_mobile_nav_drawer .mobile_nav_footer { padding: 0.75rem 0.625rem; border-top: 1px solid var(--border_color); flex-shrink: 0; } .mobile_nav_drawer .mobile_nav_footer .mobile_nav_manage_link, .public_mobile_nav_drawer .mobile_nav_footer .mobile_nav_manage_link { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 0.875rem; border-radius: 0.625rem; border: 1px solid var(--main_color_lighter2); color: var(--main_color); text-decoration: none; font-size: 0.875rem; font-weight: 600; transition: background 0.15s; } .mobile_nav_drawer .mobile_nav_footer .mobile_nav_manage_link svg, .public_mobile_nav_drawer .mobile_nav_footer .mobile_nav_manage_link svg { width: 16px; height: 16px; fill: var(--main_color); } .mobile_nav_drawer .mobile_nav_footer .mobile_nav_manage_link:hover, .public_mobile_nav_drawer .mobile_nav_footer .mobile_nav_manage_link:hover { background: var(--main_color_lighter5); } .account_toast { position: fixed; top: 4.5rem; left: 50%; transform: translateX(-50%) translateY(-14px); padding: 0.7rem 1.5rem; border-radius: 2rem; font-size: 0.875rem; font-weight: 500; white-space: nowrap; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); z-index: 9999; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; } .account_toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } .account_toast.success { background: #e6f9ec; color: var(--green_color); border: 1px solid #b2e8c0; } .account_toast.error { background: #fde8e8; color: var(--light_red); border: 1px solid #f9b8b8; } .manage_photo_edit { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .manage_photo_edit .manage_photo_preview img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border_color); transition: border-color 0.2s; } .manage_photo_edit .manage_photo_actions { display: flex; flex-direction: column; gap: 0.5rem; } .manage_photo_edit .manage_photo_actions small { color: var(--text_color_lighter1); line-height: 1.35; } .manage_field_msg { font-size: 0.875rem; padding: 10px 0.75rem; border-radius: 0.5rem; margin-top: 0.25rem; } .manage_field_msg.error { background: #fde8e8; color: var(--light_red); } .manage_field_msg.success { background: #e6f9ec; color: var(--green_color); } .manage_field_msg:empty { display: none; } .manage_profile_photo_section .manage_form_section_title { margin-bottom: 4px; } .manage_profile_photo_section .manage_section_hint { margin: 0; color: var(--text_color_lighter1); line-height: 1.45; } .manage_profile_photo_section .manage_photo_actions { align-items: flex-start; } .manage_content_inner_account .manage_account_card { display: grid; gap: 12px; border: 0; background: transparent; overflow: visible; } .manage_content_inner_account .manage_account_card .manage_divider { display: none; } .manage_content_inner_account .manage_account_card .manage_form_section { display: grid; grid-template-columns: minmax(260px, 0.38fr) minmax(0, 1fr); gap: 24px; align-items: center; min-height: 112px; padding: 18px 20px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--white_color); } .manage_content_inner_account .manage_account_card .manage_profile_photo_section { grid-template-columns: minmax(0, 1fr) auto; } .manage_content_inner_account .manage_account_card .manage_profile_identity { min-width: 0; display: flex; align-items: center; gap: 22px; } .manage_content_inner_account .manage_account_card .manage_photo_preview img { width: 84px; height: 84px; border-width: 1px; } .manage_content_inner_account .manage_account_card .manage_photo_edit { justify-self: end; padding: 0; border: 0; background: transparent; } .manage_content_inner_account .manage_account_card .manage_photo_actions { max-width: 280px; display: grid; grid-template-columns: repeat(2, auto); align-items: center; justify-content: end; } .manage_content_inner_account .manage_account_card .manage_photo_actions small { grid-column: 1/-1; max-width: 260px; } .manage_content_inner_account .manage_account_card .manage_account_section_intro { display: flex; align-items: flex-start; gap: 14px; } .manage_content_inner_account .manage_account_card .manage_account_section_intro p { margin: 5px 0 0; color: var(--text_color_lighter1); line-height: 1.5; } .manage_content_inner_account .manage_account_card .manage_account_section_icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 40px; border-radius: 50%; background: var(--main_color_lighter5); color: var(--main_color); } .manage_content_inner_account .manage_account_card .manage_account_section_icon svg { width: 20px; height: 20px; fill: currentColor; } .manage_content_inner_account .manage_account_card .manage_form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } .manage_content_inner_account .manage_account_card .manage_form .manage_field:nth-of-type(3), .manage_content_inner_account .manage_account_card .manage_form .button1 { grid-column: 1/-1; } .manage_content_inner_account .manage_account_card .manage_form .button1 { justify-self: start; } .manage_content_inner_account .manage_account_card .manage_account_section_body { justify-self: end; } .manage_content_inner_account .manage_account_card .manage_account_section_body p { margin: 0 0 14px; color: var(--text_color_lighter1); } .manage_content_inner_account .manage_account_card .button1 svg { width: 17px; height: 17px; flex: 0 0 17px; fill: currentColor; } .manage_content_inner_account .manage_account_card .manage_danger_zone { border-color: #ef8e8e; background: color-mix(in srgb, var(--white_color) 94%, #ff4c4c 6%); } .manage_content_inner_account .manage_account_card .manage_danger_zone .manage_account_section_icon { background: color-mix(in srgb, var(--white_color) 78%, #ff4c4c 22%); color: var(--light_red); } .manage_content_inner_account .manage_section_header, .manage_content_inner_account .manage_account_overview { width: 100%; max-width: 1180px; } .manage_account_overview { display: grid; gap: 16px; } .manage_account_identity_card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 20px; } .manage_account_identity_card .manage_account_identity_photo img { width: 78px; height: 78px; border: 1px solid var(--border_color); border-radius: 50%; object-fit: cover; } .manage_account_identity_card .manage_account_identity_copy { min-width: 0; } .manage_account_identity_card .manage_account_identity_copy h2 { margin: 0; color: var(--text_color); font-size: 1.35rem; } .manage_account_identity_card .manage_account_identity_copy p { margin: 5px 0 0; color: var(--text_color_lighter1); } .manage_account_details_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 4px 20px 20px; } .manage_account_details_grid div { min-width: 0; padding: 14px 16px; border: 1px solid var(--border_color_lighter); border-radius: 10px; background: var(--bg_color_darker1); } .manage_account_details_grid dt { color: var(--text_color_lighter1); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .manage_account_details_grid dd { margin: 6px 0 0; overflow-wrap: anywhere; color: var(--text_color); font-size: 15px; font-weight: 600; } .manage_account_action_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .manage_account_readonly_action { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; } .manage_account_readonly_action .manage_account_section_intro { display: flex; align-items: flex-start; gap: 14px; min-width: 0; } .manage_account_readonly_action .manage_account_section_intro p { margin: 5px 0 0; color: var(--text_color_lighter1); line-height: 1.5; } .manage_account_readonly_action .manage_account_section_icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 40px; border-radius: 50%; background: var(--main_color_lighter5); color: var(--main_color); } .manage_account_readonly_action .manage_account_section_icon svg { width: 20px; height: 20px; fill: currentColor; } .manage_account_readonly_action .manage_form_section_title { color: var(--text_color); font-weight: 700; } .manage_account_readonly_action .button1 { flex: 0 0 auto; } .manage_account_readonly_action .button1 svg { width: 17px; height: 17px; flex: 0 0 17px; fill: currentColor; } .manage_account_edit_dialog { width: min(880px, 100vw - 28px); max-width: none; max-height: calc(100dvh - 28px); margin: auto; padding: 0; border: 0; border-radius: 14px; background: transparent; color: var(--text_color); } .manage_account_edit_dialog::backdrop { background: rgba(0, 0, 0, 0.38); } .manage_account_edit_dialog .racinage_modal { width: 100%; max-height: calc(100dvh - 28px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; border-radius: 12px; } .manage_account_edit_dialog .tree_modal_header { align-items: flex-start; margin-bottom: 0; padding-bottom: 18px; border-bottom: 1px solid var(--border_color); } .manage_account_edit_dialog .tree_modal_header > div { min-width: 0; padding-right: 8px; } .manage_account_edit_dialog .tree_modal_header h2 { margin: 0; } .manage_account_edit_dialog .tree_modal_header p { margin: 5px 0 0; color: var(--text_color_lighter1); line-height: 1.4; } .manage_account_edit_dialog .manage_account_modal_close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color_lighter1); cursor: pointer; } .manage_account_edit_dialog .manage_account_modal_close svg { width: 18px; height: 18px; fill: currentColor; } .manage_account_edit_dialog .manage_account_modal_close:hover { border-color: var(--main_color); color: var(--main_color); background: var(--main_color_lighter5); } .manage_account_edit_dialog .manage_account_card { gap: 0; } .manage_account_edit_dialog .manage_account_card .manage_form_section { min-height: 0; padding: 18px 0; border: 0; border-top: 1px solid var(--border_color); border-radius: 0; background: transparent; } .manage_account_edit_dialog .manage_account_card .manage_profile_photo_section { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 16px 18px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); } .manage_account_edit_dialog .manage_account_card .manage_profile_identity { display: flex; align-items: center; flex: 1 1 auto; gap: 14px; min-width: 0; } .manage_account_edit_dialog .manage_account_card .manage_photo_preview { flex: 0 0 80px; width: 80px; height: 80px; overflow: hidden; border: 1px solid var(--border_color); border-radius: 50%; background: var(--white_color); } .manage_account_edit_dialog .manage_account_card .manage_photo_preview > * { width: 100%; height: 100%; } .manage_account_edit_dialog .manage_account_card .manage_photo_preview img { display: block; width: 100%; height: 100%; border: 0; border-radius: 50%; object-fit: cover; } .manage_account_edit_dialog .manage_account_card .manage_profile_heading { min-width: 0; } .manage_account_edit_dialog .manage_account_card .manage_profile_heading .manage_section_hint { margin-top: 3px; white-space: nowrap; } .manage_account_edit_dialog .manage_account_card .manage_photo_edit { flex: 0 0 auto; justify-content: flex-end; gap: 8px; } .manage_account_edit_dialog .manage_account_card .manage_photo_picker { display: inline-flex; min-height: 44px; color: #fff; cursor: pointer; } .manage_account_edit_dialog .manage_account_card .manage_photo_picker span { color: inherit; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_account_edit_dialog .manage_account_card .manage_profile_photo_section { display: flex; } .manage_password_input { position: relative; display: block; } .manage_password_input .form_input { width: 100%; padding-right: 44px; } .manage_password_input button { position: absolute; top: 50%; right: 5px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--text_color_lighter1); cursor: pointer; translate: 0 -50%; } .manage_danger_zone { border: 1px solid #e7a3a3; border-radius: 12px; padding: 18px; } .manage_danger_zone .manage_form_section_title { color: var(--light_red); } .manage_danger_zone p { margin: 6px 0 14px; color: var(--text_color_lighter1); } .manage_danger_zone .danger_btn { border-color: var(--light_red); background: var(--light_red); color: #fff; } .manage_delete_account_dialog { width: min(480px, 100vw - 28px); border: 1px solid var(--border_color); border-radius: 12px; padding: 22px; color: var(--text_color); background: var(--background_color); } .manage_delete_account_dialog form { display: grid; gap: 14px; } .manage_delete_account_dialog h2, .manage_delete_account_dialog p { margin: 0; } .manage_settings_card { border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); overflow: hidden; } .manage_settings_card_header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border_color_lighter); } .manage_settings_card_header h2 { margin: 0; color: var(--text_color); font-size: 18px; font-weight: 600; } .manage_settings_card_header p { margin-top: 5px; color: var(--text_color_lighter1); font-size: 14px; line-height: 1.45; } .manage_settings_form { display: grid; gap: 20px; max-width: 1180px; } .manage_settings_form .manage_settings_quicknav { display: flex; flex-wrap: wrap; gap: 8px; position: sticky; top: 0; z-index: 1; padding: 10px 12px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); } .manage_settings_form .manage_settings_quicknav_link { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--border_color); border-radius: 999px; background: var(--bg_color_darker); color: var(--text_color); font-size: 13px; font-weight: 600; text-decoration: none; } .manage_settings_form .manage_settings_quicknav_link:hover { border-color: var(--main_color_lighter2); background: var(--main_color_lighter5); color: var(--main_color_darker); } .manage_settings_form .manage_settings_cluster { display: grid; gap: 14px; scroll-margin-top: 72px; } .manage_settings_form .manage_settings_cluster_label { margin: 0; padding: 9px 12px; border-left: 3px solid var(--main_color); border-radius: 0 8px 8px 0; background: var(--main_color_lighter5); color: var(--main_color_darker); font-size: 15px; font-weight: 700; letter-spacing: 0; } .manage_settings_form .manage_settings_cluster_cards { display: grid; gap: 16px; } .manage_settings_form .manage_settings_subsection { padding: 0 20px; } .manage_settings_form .manage_settings_subsection:first-of-type { padding-top: 18px; } .manage_settings_form .manage_settings_subsection:last-of-type { padding-bottom: 20px; } .manage_settings_form .manage_settings_subsection + .manage_settings_subsection { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--border_color_lighter); } .manage_settings_form .manage_settings_subsection_title { margin: 0 0 12px; color: var(--main_color_darker); font-size: 14px; font-weight: 700; } .manage_settings_form .manage_settings_card_header { background: var(--main_color_lighter5); } .manage_settings_form .manage_settings_grid_single { grid-template-columns: minmax(0, 1fr); max-width: 600px; } .manage_settings_form .manage_settings_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px 20px 20px; } .manage_settings_form .settings_info_tile, .manage_settings_form .settings_input_tile { min-height: 82px; display: grid; align-content: center; gap: 8px; padding: 14px 16px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--bg_color_darker); } .manage_settings_form .settings_info_tile span, .manage_settings_form .settings_input_tile span { color: var(--text_color_lighter1); font-size: 12px; font-weight: 700; text-transform: uppercase; } .manage_settings_form .settings_info_tile strong, .manage_settings_form .settings_input_tile strong { color: var(--text_color); font-size: 18px; font-weight: 600; } .manage_settings_form .settings_info_tile input, .manage_settings_form .settings_info_tile select, .manage_settings_form .settings_input_tile input, .manage_settings_form .settings_input_tile select { width: 100%; min-height: 44px; padding: 10px 16px; border: 0.0625rem solid #eaeaea; border-radius: 12px; background: var(--white_color); color: var(--text_color); font-size: 16px; font-weight: 700; } .manage_settings_form .settings_info_tile input:focus, .manage_settings_form .settings_info_tile select:focus, .manage_settings_form .settings_input_tile input:focus, .manage_settings_form .settings_input_tile select:focus { border-color: var(--secondary_color_lighter4); } .manage_settings_form .manage_radio_group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 20px 20px; } .manage_settings_form .manage_radio_card { position: relative; display: grid; gap: 10px; grid-template-columns: 22px 1fr; align-items: start; min-height: 88px; padding: 14px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); cursor: pointer; } .manage_settings_form .manage_radio_card input { position: absolute; opacity: 0; pointer-events: none; } .manage_settings_form .manage_radio_card .manage_radio_indicator { width: 22px; height: 22px; border: 2px solid var(--border_color_darker); border-radius: 50%; background: var(--white_color); margin-top: 1px; } .manage_settings_form .manage_radio_card .manage_radio_content { display: grid; gap: 7px; } .manage_settings_form .manage_radio_card .manage_radio_content strong { color: var(--text_color); font-size: 16px; font-weight: 600; } .manage_settings_form .manage_radio_card .manage_radio_content small { color: var(--text_color_lighter1); font-size: 13px; line-height: 1.45; } .manage_settings_form .manage_radio_card:hover { border-color: var(--main_color_lighter2); background: var(--main_color_lighter5); } .manage_settings_form .manage_radio_card:has(input:checked) { background: var(--main_color_lighter5); border-color: var(--main_color_lighter4); } .manage_settings_form .manage_radio_card:has(input:checked) .manage_radio_indicator { border-color: var(--main_color); background: var(--main_color); box-shadow: inset 0 0 0 5px var(--white_color); } .manage_settings_form .manage_radio_card:has(input:checked) .manage_radio_content strong { color: var(--main_color_darker); } .manage_settings_form .gallery_appearance_settings { display: grid; gap: 16px; padding: 18px 20px 20px; } .manage_settings_form .gallery_appearance_views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .manage_settings_form .gallery_view_option { position: relative; display: grid; grid-template-rows: 94px auto; gap: 12px; min-height: 178px; padding: 14px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); cursor: pointer; } .manage_settings_form .gallery_view_option input { position: absolute; opacity: 0; pointer-events: none; } .manage_settings_form .gallery_view_option:hover, .manage_settings_form .gallery_view_option:has(input:checked) { border-color: var(--main_color_lighter2); background: var(--main_color_lighter5); } .manage_settings_form .gallery_view_option:has(input:checked) { border-color: var(--main_color_lighter4); } .manage_settings_form .gallery_view_option:has(input:checked) .gallery_view_option_text strong { color: var(--main_color_darker); } .manage_settings_form .gallery_view_preview { display: grid; gap: 6px; } .manage_settings_form .gallery_view_preview i { display: block; border-radius: 5px; background: var(--main_color_lighter4); min-height: 14px; } .manage_settings_form .gallery_view_preview.preview_grid { grid-template-columns: repeat(2, 1fr); } .manage_settings_form .gallery_view_preview.preview_list { grid-template-columns: 1fr; } .manage_settings_form .gallery_view_preview.preview_list i { min-height: 18px; } .manage_settings_form .gallery_view_preview.preview_masonry { grid-template-columns: repeat(2, 1fr); } .manage_settings_form .gallery_view_preview.preview_masonry i:nth-child(1) { min-height: 22px; } .manage_settings_form .gallery_view_preview.preview_masonry i:nth-child(2) { min-height: 38px; } .manage_settings_form .gallery_view_preview.preview_masonry i:nth-child(3) { min-height: 34px; } .manage_settings_form .gallery_view_preview.preview_masonry i:nth-child(4) { min-height: 20px; } .manage_settings_form .gallery_view_option_text { display: grid; gap: 5px; } .manage_settings_form .gallery_view_option_text strong { color: var(--text_color); font-size: 16px; font-weight: 700; } .manage_settings_form .gallery_view_option_text small { color: var(--text_color_lighter1); font-size: 13px; line-height: 1.4; } .manage_settings_form .gallery_appearance_controls { display: grid; grid-template-columns: minmax(100px, 0.59fr) minmax(260px, 1.2fr); gap: 12px; align-items: stretch; } .manage_settings_form .gallery_appearance_controls .settings_input_tile { min-height: 96px; } .manage_settings_form .gallery_density_tile input { text-align: center; } .manage_settings_form .gallery_detail_toggle { min-height: 96px; display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--bg_color_darker); cursor: pointer; } .manage_settings_form .gallery_detail_toggle input { position: absolute; opacity: 0; pointer-events: none; } .manage_settings_form .gallery_detail_toggle .gallery_detail_toggle_knob { width: 52px; height: 30px; border: 1px solid var(--border_color_darker); border-radius: 999px; background: var(--white_color); position: relative; } .manage_settings_form .gallery_detail_toggle .gallery_detail_toggle_knob::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--text_color_lighter2); } .manage_settings_form .gallery_detail_toggle input:checked + .gallery_detail_toggle_knob { border-color: var(--main_color); background: var(--main_color_lighter4); } .manage_settings_form .gallery_detail_toggle input:checked + .gallery_detail_toggle_knob::after { left: 26px; background: var(--main_color); } .manage_settings_form .gallery_detail_toggle strong { color: var(--text_color); font-size: 15px; font-weight: 700; } .manage_settings_form .gallery_detail_toggle small { display: block; margin-top: 4px; color: var(--text_color_lighter1); font-size: 13px; line-height: 1.4; } .manage_settings_form .notification_settings_matrix { display: grid; gap: 8px; padding: 18px 20px 20px; } .manage_settings_form .notification_settings_row { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(96px, 120px)); gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--bg_color_darker); } .manage_settings_form .notification_settings_row strong { color: var(--text_color); font-size: 14px; font-weight: 700; } .manage_settings_form .notification_settings_row > span { color: var(--text_color_lighter1); font-size: 12px; font-weight: 700; text-transform: uppercase; text-align: center; } .manage_settings_form .notification_settings_row.notification_settings_head { min-height: 0; padding: 0 12px; border: 0; background: transparent; } .manage_settings_form .notification_settings_row.notification_settings_head span:first-child { text-align: left; } .manage_settings_form .settings_toggle_option { position: relative; display: flex; justify-content: center; cursor: pointer; } .manage_settings_form .settings_toggle_option input { position: absolute; opacity: 0; pointer-events: none; } .manage_settings_form .settings_toggle_option .settings_toggle_knob { width: 52px; height: 30px; border: 1px solid var(--border_color_darker); border-radius: 999px; background: var(--white_color); position: relative; } .manage_settings_form .settings_toggle_option .settings_toggle_knob::after { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--text_color_lighter2); } .manage_settings_form .settings_toggle_option input:checked + .settings_toggle_knob { border-color: var(--main_color); background: var(--main_color_lighter4); } .manage_settings_form .settings_toggle_option input:checked + .settings_toggle_knob::after { left: 26px; background: var(--main_color); } .manage_settings_form .appearance_settings_grid input[type=color] { padding: 4px; } .manage_settings_form .appearance_radio_group { grid-template-columns: repeat(3, minmax(0, 1fr)); } .manage_settings_form .appearance_radio_group .appearance_toggle { min-height: 138px; } .manage_settings_form .manage_settings_actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; } .manage_settings_form .manage_settings_actions .manage_field_msg { margin: 0; flex: 1; } .manage_settings_form .manage_settings_actions .button1 { border-radius: 12px; min-height: 44px; } .manage_content_inner_settings .manage_section_body { display: grid; gap: 18px; max-width: 1180px; } .manage_content_inner_settings .manage_settings_form { max-width: 1180px; gap: 22px; } .manage_content_inner_settings .manage_settings_card { max-width: 1180px; border-radius: 10px; } .manage_content_inner_settings .manage_settings_card_header { margin-bottom: 0; padding: 20px 22px 16px; } .manage_content_inner_settings .manage_settings_grid, .manage_content_inner_settings .notification_settings_matrix, .manage_content_inner_settings .gallery_appearance_settings { padding: 20px 22px 22px; } .manage_content_inner_settings .manage_settings_grid { gap: 14px; } .manage_content_inner_settings .settings_input_tile, .manage_content_inner_settings .settings_info_tile { min-height: 96px; gap: 9px; padding: 16px 18px; border-radius: 10px; } .manage_content_inner_settings .settings_input_tile input, .manage_content_inner_settings .settings_input_tile select { font-weight: 500; } .manage_content_inner_settings .manage_settings_actions { margin-top: 0; padding: 16px 22px 22px; } .gallery_main { --gallery_main_surface: var(--bg_color); background: var(--bg_color); } .projects_page { margin: 0 auto; padding: 20px 0 44px; } .projects_page .page_header { margin-bottom: 14px; } .projects_page .page_toolbar { gap: 10px; padding: 10px; } .projects_toolbar { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) auto; } .projects_notice { margin-top: 14px; padding: 11px 14px; border: 1px solid var(--main_color_lighter3); border-radius: 8px; background: var(--main_color_lighter5); color: var(--main_color); font-size: 14px; font-weight: 600; } .projects_notice.error { border-color: var(--light_red); background: var(--light_red2); color: var(--light_red); } .projects_list { display: grid; gap: 12px; margin-top: 14px; } .projects_page[data-projects-view=grid] .projects_list { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } .project_card { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 176px; overflow: hidden; border: 1px solid var(--border_color_lighter); border-radius: 8px; background: var(--white_color); } .project_media { min-height: 176px; overflow: hidden; background: var(--main_color_lighter5); } .project_media img { width: 100%; height: 100%; min-height: 176px; display: block; object-fit: cover; } .project_media span { width: 100%; height: 100%; min-height: 176px; display: grid; place-items: center; color: var(--main_color); font-size: 52px; font-weight: 700; } .project_card_body { min-width: 0; display: grid; align-content: start; gap: 8px; padding: 16px 56px 16px 18px; } .project_card_body h2 { margin: 0; color: var(--text_color); font-size: 19px; line-height: 1.2; } .project_card_body > p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text_color_lighter1); font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .project_card_top, .project_meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .project_category, .project_status, .project_priority { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border-radius: 8px; background: var(--main_color_lighter5); color: var(--main_color); font-size: 11px; font-weight: 700; } .project_priority_high { background: var(--light_red2); color: var(--light_red); } .project_priority_low { background: var(--bg_color); color: var(--text_color_lighter1); } .project_status_completed { background: #e9f7ee; color: #27864b; } .project_status_on_hold { background: #fff4dc; color: #9b6811; } .project_meta { margin-top: 0; color: var(--text_color_lighter1); font-size: 12px; } .project_meta span + span::before { margin-right: 7px; content: "•"; color: var(--border_color_darker); } .project_progress { margin-top: 4px; } .project_progress > div { display: flex; align-items: baseline; gap: 6px; margin-bottom: 7px; } .project_progress > div strong { color: var(--text_color); font-size: 14px; } .project_progress > div span { color: var(--text_color_lighter1); font-size: 12px; } .project_progress > div em { margin-left: auto; color: var(--main_color); font-size: 12px; font-style: normal; font-weight: 700; } .project_progress > span { display: block; height: 7px; overflow: hidden; border-radius: 6px; background: var(--bg_color); } .project_progress > span i { display: block; height: 100%; border-radius: inherit; background: var(--main_color); } .project_menu_btn { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); cursor: pointer; font-size: 20px; line-height: 1; } .project_menu_btn:hover { border-color: var(--main_color_lighter3); color: var(--main_color); } .project_card_menu { position: fixed; z-index: 10020; width: 190px; display: none; overflow: hidden; padding: 5px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .project_card_menu.open { display: grid; } .project_card_menu button { padding: 9px 11px; border: 0; border-radius: 6px; background: transparent; color: var(--text_color); cursor: pointer; font: inherit; font-size: 13px; text-align: left; } .project_card_menu button:hover { background: var(--main_color_lighter5); color: var(--main_color); } .project_card_menu button.danger { color: var(--light_red); } .projects_page[data-projects-view=grid] .project_card { grid-template-columns: 1fr; min-height: 0; } .projects_page[data-projects-view=grid] .project_media, .projects_page[data-projects-view=grid] .project_media img, .projects_page[data-projects-view=grid] .project_media span { min-height: 176px; height: 176px; } .projects_page[data-projects-view=grid] .project_card_body { padding: 14px 16px 16px; } .projects_empty { margin-top: 18px; } .projects_modal_backdrop { position: fixed; z-index: 10030; inset: 0; display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 24px 16px; background: rgba(0, 0, 0, 0.55); } .projects_modal_backdrop.open { display: flex; } .projects_modal { width: min(760px, 100%); margin: auto 0; padding: 20px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .projects_modal > header, .projects_modal form > header, .projects_modal .project_detail_modal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .projects_modal > header h2, .projects_modal form > header h2, .projects_modal .project_detail_modal > header h2 { margin: 0; color: var(--text_color); font-size: 22px; } .projects_modal > header small, .projects_modal form > header small, .projects_modal .project_detail_modal > header small { display: block; color: var(--text_color_lighter1); font-size: 11px; font-weight: 700; text-transform: uppercase; } .projects_modal > header button, .projects_modal form > header button, .projects_modal .project_detail_modal > header button { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border_color); border-radius: 50%; background: var(--bg_color); color: var(--text_color); cursor: pointer; font-size: 20px; } .projects_edit_modal { width: min(820px, 100%); } .projects_image_drop { position: relative; width: 100%; height: 220px; display: grid; place-items: center; overflow: hidden; margin-bottom: 18px; border: 1px dashed var(--main_color_lighter2); border-radius: 8px; background: var(--main_color_lighter5); cursor: pointer; } .projects_image_drop.dragging { border-style: solid; } .projects_image_drop img { width: 100%; height: 100%; display: block; object-fit: cover; } .projects_image_drop > span { display: grid; place-items: center; gap: 6px; color: var(--text_color_lighter1); text-align: center; } .projects_image_drop > span i { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--main_color_lighter2); border-radius: 8px; color: var(--main_color); font-size: 28px; font-style: normal; } .projects_image_drop > span strong { color: var(--text_color); } .projects_image_drop > span small { font-size: 12px; } .projects_form_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .projects_field, .project_inline_form label { display: grid; gap: 6px; } .projects_field > span, .project_inline_form label > span { display: flex; justify-content: space-between; gap: 8px; color: var(--text_color); font-size: 12px; font-weight: 700; } .projects_field > span em, .project_inline_form label > span em { color: var(--text_color_lighter1); font-size: 9px; font-style: normal; text-transform: uppercase; } .projects_field input, .projects_field select, .projects_field textarea, .project_inline_form label input, .project_inline_form label select, .project_inline_form label textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); font: inherit; } .projects_field input:focus, .projects_field select:focus, .projects_field textarea:focus, .project_inline_form label input:focus, .project_inline_form label select:focus, .project_inline_form label textarea:focus { border-color: var(--main_color_lighter2); } .projects_field textarea, .project_inline_form label textarea { min-height: 105px; resize: vertical; } .projects_field_wide { grid-column: 1/-1; } .projects_form_feedback { min-height: 20px; margin: 12px 0 0; color: #27864b; font-size: 13px; } .projects_form_feedback.error { color: var(--light_red); } .projects_modal_actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; } .projects_modal_actions > span { flex: 1; } .projects_modal_actions .tree_primary_action.danger { border-color: var(--light_red); background: var(--light_red); } .projects_confirm_modal { width: min(430px, 100%); } .projects_confirm_text { color: var(--text_color_lighter1); } .projects_detail_dialog { width: min(940px, 100%); } .project_detail_tabs { display: flex; gap: 4px; margin-bottom: 18px; padding: 4px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color); } .project_detail_tabs button { flex: 1; min-height: 36px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text_color_lighter1); cursor: pointer; font-weight: 700; } .project_detail_tabs button.active { border-color: var(--main_color_lighter3); background: var(--white_color); color: var(--main_color); } .project_detail_image { width: 100%; max-height: 360px; display: block; object-fit: cover; border-radius: 8px; } .project_detail_summary > p { color: var(--text_color_lighter1); line-height: 1.55; } .project_detail_summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; } .project_detail_summary dl div { padding: 12px; border: 1px solid var(--border_color_lighter); border-radius: 8px; background: var(--bg_color); } .project_detail_summary dl dt { margin-bottom: 4px; color: var(--text_color_lighter1); font-size: 10px; font-weight: 700; text-transform: uppercase; } .project_detail_summary dl dd { margin: 0; color: var(--text_color); font-weight: 600; } .checklist_progress { display: grid; gap: 7px; margin-bottom: 12px; } .checklist_progress div { display: flex; align-items: center; gap: 8px; color: var(--text_color_lighter1); font-size: 13px; } .checklist_progress strong { color: var(--text_color); } .checklist_progress em { margin-left: auto; color: var(--main_color); font-style: normal; font-weight: 700; } .checklist_progress > span { height: 8px; overflow: hidden; border-radius: 999px; background: var(--border_color_lighter); } .checklist_progress > span i { display: block; height: 100%; border-radius: inherit; background: var(--main_color); } .checklist_row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border_color_lighter); } .checklist_row > div { display: grid; gap: 3px; min-width: 0; } .checklist_row strong { color: var(--text_color); } .checklist_row small, .checklist_row em { color: var(--text_color_lighter1); font-size: 13px; font-style: normal; } .checklist_row.done strong { color: var(--text_color_lighter1); text-decoration: line-through; } .checklist_done { width: 28px; height: 28px; display: grid; place-items: center; } .checklist_done input { position: absolute; opacity: 0; } .checklist_done span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--border_color); border-radius: 6px; background: var(--white_color); } .checklist_done input:checked + span { border-color: var(--main_color); background: var(--main_color); } .checklist_done input:checked + span::after { content: "✓"; color: var(--white_color); font-size: 14px; font-weight: 700; } .project_detail_row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(120px, auto) 34px; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border_color_lighter); } .project_detail_row > div { display: grid; gap: 3px; min-width: 0; } .project_detail_row strong { color: var(--text_color); } .project_detail_row small { color: var(--text_color_lighter1); } .project_detail_row > span, .project_detail_row > em { color: var(--text_color_lighter1); font-size: 13px; font-style: normal; } .project_detail_row select { min-height: 36px; padding: 7px 9px; border: 1px solid var(--border_color); border-radius: 7px; background: var(--white_color); color: var(--text_color); } .project_contribution_row { grid-template-columns: minmax(0, 1fr) auto 34px; } .project_row_delete { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--light_red); border-radius: 7px; background: transparent; color: var(--light_red); cursor: pointer; } .project_detail_empty { margin: 20px 0; color: var(--text_color_lighter1); font-style: italic; text-align: center; } .project_inline_form { display: grid; grid-template-columns: minmax(150px, 1.5fr) repeat(4, minmax(110px, 1fr)) auto; align-items: end; gap: 9px; margin-top: 18px; padding: 14px; border: 1px solid var(--border_color_lighter); border-radius: 8px; background: var(--bg_color); } .project_inline_form .tree_primary_action { min-height: 42px; } .project_checkbox { display: flex !important; align-items: center; min-height: 42px; } .project_checkbox input { width: 18px !important; min-height: 18px !important; } .project_public_share_modal { width: 100% !important; max-height: none; overflow: visible; padding: 0 !important; border: 0; } .projects_public_dialog { width: min(760px, 100%); } .project_public_context { display: grid; gap: 4px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--main_color_lighter4); border-radius: 8px; background: var(--main_color_lighter5); } .project_public_context span { color: var(--text_color_lighter1); font-size: 10px; font-weight: 700; text-transform: uppercase; } .project_public_context strong { color: var(--text_color); } .project_public_context small { color: var(--text_color_lighter1); } .project_public_share_modal .public_share_manager { justify-content: space-between; } .project_public_share_modal .public_share_instance_list { display: flex; flex-wrap: wrap; gap: 7px; } .project_public_share_modal .public_share_instance_list button { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border_color); border-radius: 7px; background: var(--white_color); color: var(--text_color); cursor: pointer; text-align: left; } .project_public_share_modal .public_share_instance_list button.active { border-color: var(--main_color); color: var(--main_color); } .project_public_share_modal .public_share_instance_list button small { display: block; color: var(--text_color_lighter1); font-size: 10px; } .project_public_share_modal .public_share_link { margin: 12px 0 16px; } .project_public_share_modal .public_share_options { margin-bottom: 20px; } .public_project_view { width: min(1120px, 100% - 32px); margin: 24px auto 48px; } .public_project_hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); overflow: hidden; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .public_project_hero > img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; } .public_project_content { padding: 28px; } .public_project_content:only-child { grid-column: 1/-1; } .public_project_content h2 { margin: 0 0 12px; color: var(--text_color); } .public_project_content > p { color: var(--text_color_lighter1); line-height: 1.55; } .public_project_content dl { display: grid; gap: 10px; margin-top: 20px; } .public_project_content dl div { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--border_color_lighter); } .public_project_content dl dt { color: var(--text_color_lighter1); } .public_project_content dl dd { margin: 0; color: var(--text_color); font-weight: 700; } .public_project_items { margin-top: 18px; padding: 20px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .public_project_items h2 { margin-top: 0; } .public_project_items article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border_color_lighter); } .public_project_items article:last-child { border-bottom: 0; } .public_project_items article strong { color: var(--text_color); } .public_project_items article span, .public_project_items article em { color: var(--text_color_lighter1); font-size: 13px; font-style: normal; } .public_checklist .public_checklist_progress { display: grid; gap: 8px; margin-bottom: 12px; } .public_checklist .public_checklist_progress > span { height: 8px; overflow: hidden; border-radius: 999px; background: var(--border_color_lighter); } .public_checklist .public_checklist_progress > span i { display: block; height: 100%; border-radius: inherit; background: var(--main_color); } .public_checklist .public_checklist_progress strong { color: var(--text_color_lighter1); font-size: 13px; } .public_checklist article { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 12px; } .public_checklist article div { display: grid; gap: 3px; } .public_checklist article small, .public_checklist article em { display: block; } .public_checklist article.done strong { color: var(--text_color_lighter1); text-decoration: line-through; } .public_checklist_tick { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--border_color); border-radius: 6px; color: var(--main_color); font-weight: 700; } @media (max-width: 900px) { .projects_toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project_card { grid-template-columns: 170px minmax(0, 1fr); } .project_inline_form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .public_project_hero { grid-template-columns: 1fr; } .public_project_hero > img { min-height: 280px; } } @media (max-width: 620px) { .projects_page { width: min(100% - 20px, 1320px); padding-top: 16px; } .projects_toolbar, .projects_form_grid, .project_detail_summary dl { grid-template-columns: 1fr; } .projects_field_wide { grid-column: auto; } .project_card { grid-template-columns: 1fr; } .project_media, .project_media img, .project_media span { min-height: 190px; height: 190px; } .project_card_body { padding: 15px; } .projects_image_drop { height: 180px; } .project_detail_tabs { overflow-x: auto; } .project_detail_tabs button { min-width: 120px; flex: 0 0 auto; } .project_detail_row, .project_contribution_row { grid-template-columns: minmax(0, 1fr) auto; } .project_detail_row select, .project_contribution_row select { grid-column: 1/-1; } .project_inline_form { grid-template-columns: 1fr; } .project_public_share_modal .public_share_manager { align-items: stretch; flex-direction: column; } .public_project_view { width: calc(100% - 20px); } .public_project_content { padding: 20px; } .public_project_items article { grid-template-columns: 1fr; gap: 4px; } .public_checklist article, .checklist_row { grid-template-columns: 28px minmax(0, 1fr); } .public_checklist article > .project_row_delete, .checklist_row > .project_row_delete { grid-column: 2; } } .finances_main { background: #f6fbfd; } .page_wrap.finances_page { width: min(1400px, 100% - 96px); margin: 0 auto; padding: 34px 0 48px; } .page_wrap.finances_page .page_header { align-items: flex-start; margin-bottom: 26px; padding-left: 0; } .page_wrap.finances_page .page_header h1 { margin: 0; font-size: 34px; line-height: 1.1; } .page_wrap.finances_page .page_header .page_header_actions { padding-top: 2px; } .page_wrap.finances_page .page_header .page_header_actions .page_search { position: relative; min-width: min(420px, 30vw); } .page_wrap.finances_page .page_header .page_header_actions .page_search input { width: 100%; height: 44px; padding: 0 48px 0 18px; border-color: var(--border_color_darker); border-radius: 10px; } .page_wrap.finances_page .page_header .page_header_actions .page_search::after { content: ""; position: absolute; top: 12px; right: 20px; width: 13px; height: 13px; border: 2px solid #7d8a9d; border-radius: 50%; } .page_wrap.finances_page .page_header .page_header_actions .page_search::before { content: ""; position: absolute; top: 29px; right: 16px; width: 8px; height: 2px; background: #7d8a9d; rotate: 45deg; } .page_wrap.finances_page .page_header .page_header_actions .page_add_btn { min-height: 44px; padding: 0 20px; } .finances_dashboard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 440px); gap: 24px; align-items: start; } .finances_dashboard_main { min-width: 0; } .finance_total_panel { min-height: 174px; display: grid; grid-template-columns: minmax(220px, 0.75fr) minmax(260px, 1fr) minmax(150px, 220px); align-items: center; gap: 36px; margin-bottom: 18px; padding: 28px 36px; border: 1px solid #bfe8ef; border-radius: 8px; background: #effbfe; } .finance_total_panel > div:first-child { display: grid; gap: 15px; } .finance_total_panel > div:first-child span, .finance_total_panel > div:first-child small { color: var(--text_color_lighter1); } .finance_total_panel > div:first-child span { font-size: 12px; font-weight: 700; text-transform: uppercase; } .finance_total_panel > div:first-child strong { margin-top: 5px; color: var(--main_color); font-size: 30px; line-height: 1.05; } .finance_total_panel > div:first-child small { font-size: 16px; } .finance_total_explainer { max-width: 420px; padding-left: 48px; border-left: 1px solid #d1e3e8; color: var(--text_color_lighter1); font-size: 15px; line-height: 1.5; } .finance_total_art { justify-self: end; width: min(220px, 100%); color: var(--main_color); } .finance_total_art svg { width: 100%; display: block; fill: currentColor; opacity: 0.82; } .finance_total_art svg path:nth-child(-n+3) { fill: #d9f0f3; } .finance_total_art svg rect { fill: #20adbf; } .finance_total_art svg path:nth-of-type(4) { fill: none; stroke: #dcf8fb; stroke-width: 5; stroke-linecap: round; } .finance_total_art svg circle { fill: #fff; stroke: #9ce2ea; stroke-width: 5; } .finance_total_art svg path:last-child { fill: none; stroke: #20adbf; stroke-width: 3; stroke-linecap: round; } .finances_toolbar { display: grid; grid-template-columns: minmax(280px, 1.1fr) minmax(220px, 0.8fr) auto auto; align-items: end; gap: 28px; min-height: 104px; margin-bottom: 18px; padding: 16px 28px; border-radius: 8px; } .finances_toolbar label select { min-width: 290px; height: 46px; border-radius: 8px; } .finances_toolbar .filter_buttons button { height: 46px; min-width: 88px; border-radius: 8px; } .finances_toolbar .page_count { justify-self: end; height: 46px; font-weight: 700; } .finance_view_control { display: grid; gap: 8px; } .finance_view_control > span { padding-left: 1px; color: var(--text_color_lighter1); font-size: 11px; font-weight: 700; text-transform: uppercase; } .finance_view_control > div { display: inline-grid; grid-template-columns: repeat(2, 46px); height: 46px; overflow: hidden; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .finance_view_control > div button { display: grid; place-items: center; border: 0; border-right: 1px solid var(--border_color); background: transparent; color: var(--text_color_lighter1); cursor: pointer; } .finance_view_control > div button:last-child { border-right: 0; } .finance_view_control > div button.active, .finance_view_control > div button:hover { background: var(--main_color_lighter5); color: var(--main_color); } .finance_view_control > div button svg { width: 20px; height: 20px; fill: currentColor; } .finances_notice { margin-top: 14px; padding: 11px 14px; border: 1px solid var(--main_color_lighter3); border-radius: 8px; background: var(--main_color_lighter5); color: var(--main_color); font-weight: 600; } .finances_notice.error { border-color: var(--light_red); background: var(--light_red2); color: var(--light_red); } .finance_wallet_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; } .finance_wallet_card { position: relative; min-height: 234px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; overflow: hidden; padding: 18px 26px 0 18px; border: 1px solid var(--border_color_lighter); border-radius: 15px; background: var(--white_color); cursor: pointer; } .finance_wallet_card .finance_wallet_color { position: absolute; inset: 0 auto 0 0; width: 5px; } .finance_wallet_card h2 { margin: 7px 0 10px; color: var(--text_color); font-size: 19px; line-height: 1.2; } .finance_wallet_icon, .finance_activity_icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--main_color_lighter5); background: color-mix(in srgb, var(--wallet-color) 12%, #fff); color: var(--wallet-color); } .finance_wallet_icon svg, .finance_activity_icon svg { width: 24px; height: 24px; fill: currentColor; } .finance_wallet_content { min-width: 0; display: grid; grid-template-rows: auto auto auto 1fr auto; } .finance_wallet_content > h2 { padding: 10px 0; font-size: 16px; } .finance_wallet_content > strong { display: block; color: var(--text_color); font-size: 22px; line-height: 1.1; } .finance_wallet_content > p { margin: 12px 0 14px; color: var(--text_color_lighter1); font-size: 15px; line-height: 1.5; } .finance_wallet_content footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding-top: 0px; border-top: 1px solid var(--border_color_lighter); } .finance_wallet_content footer span { color: var(--text_color_lighter1); font-size: 13px; font-weight: 600; } .finance_wallet_arrow { width: 24px; height: 24px; display: grid; place-items: center; color: var(--text_color_lighter1); } .finance_wallet_arrow svg { width: 20px; height: 20px; fill: currentColor; } .finance_wallet_menu_btn { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; opacity: 1; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); cursor: pointer; font-size: 18px; } .finance_wallet_card:hover .finance_wallet_menu_btn, .finance_wallet_menu_btn:focus-visible { opacity: 1; } .finance_wallet_heading { display: flex; align-items: center; gap: 7px; } .finance_wallet_heading span { color: var(--text_color_lighter1); font-size: 10px; font-weight: 700; text-transform: uppercase; } .finances_page[data-finances-view-mode=list] .finance_wallet_grid { grid-template-columns: 1fr; } .finances_page[data-finances-view-mode=list] .finance_wallet_card { min-height: 132px; grid-template-columns: 52px minmax(0, 1fr); padding-bottom: 0; } .finances_page[data-finances-view-mode=list] .finance_wallet_content { grid-template-columns: minmax(180px, 1fr) auto minmax(220px, 1.3fr) auto; grid-template-rows: auto auto; column-gap: 20px; align-items: center; } .finances_page[data-finances-view-mode=list] .finance_wallet_content .finance_wallet_heading, .finances_page[data-finances-view-mode=list] .finance_wallet_content h2 { grid-column: 1; } .finances_page[data-finances-view-mode=list] .finance_wallet_content > strong { grid-column: 2; grid-row: 1/span 2; white-space: nowrap; } .finances_page[data-finances-view-mode=list] .finance_wallet_content > p { grid-column: 3; grid-row: 1/span 2; margin: 0; } .finances_page[data-finances-view-mode=list] .finance_wallet_content footer { grid-column: 4; grid-row: 1/span 2; min-width: 140px; padding-top: 0; border-top: 0; } .finances_dashboard_sidebar { display: grid; gap: 18px; } .finance_side_panel { padding: 26px; border: 1px solid var(--border_color_lighter); border-radius: 8px; background: var(--white_color); } .finance_side_panel h2 { margin: 0; color: var(--text_color); font-size: 18px; line-height: 1.2; } .finance_activity_panel header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; } .finance_activity_panel header span { color: var(--main_color); font-size: 12px; font-weight: 700; } .finance_activity_list { display: grid; gap: 22px; } .finance_activity_item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; } .finance_activity_item > span:not(.finance_activity_icon):not(.finance_activity_meta) { min-width: 0; display: grid; gap: 6px; } .finance_activity_item strong { overflow: hidden; color: var(--text_color); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .finance_activity_item small, .finance_activity_item time { color: var(--text_color_lighter1); font-size: 13px; } .finance_activity_meta { display: grid; gap: 6px; justify-items: end; } .finance_activity_meta b { font-size: 14px; } .finance_activity_meta b.deposit { color: #2da75d; } .finance_activity_meta b.withdrawal { color: var(--light_red); } .finance_side_empty { margin: 24px 0; color: var(--text_color_lighter1); font-style: italic; } .finance_summary_body { display: grid; grid-template-columns: 138px minmax(0, 1fr); align-items: center; gap: 24px; margin: 28px 0 26px; } .finance_summary_chart { width: 130px; aspect-ratio: 1; position: relative; border-radius: 50%; background: var(--finance-chart); } .finance_summary_chart::after { content: ""; position: absolute; inset: 36px; border-radius: 50%; background: var(--white_color); } .finance_summary_rows { display: grid; gap: 13px; } .finance_summary_rows div { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: 12px; } .finance_summary_rows span { min-width: 0; display: flex; align-items: center; gap: 9px; overflow: hidden; color: var(--text_color_lighter1); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; } .finance_summary_rows span i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; } .finance_summary_rows strong { color: var(--text_color); font-size: 12px; } .finance_summary_rows em { color: var(--text_color_lighter1); font-size: 12px; font-style: normal; text-align: right; } .finance_summary_panel footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 22px; border-top: 1px solid var(--border_color_lighter); } .finance_summary_panel footer span { color: var(--text_color); font-size: 16px; font-weight: 700; } .finance_summary_panel footer strong { color: var(--text_color); font-size: 20px; } .finance_wallet_menu { position: fixed; z-index: 10020; width: 190px; display: none; padding: 5px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .finance_wallet_menu.open { display: grid; } .finance_wallet_menu button { padding: 9px 11px; border: 0; border-radius: 6px; background: transparent; color: var(--text_color); cursor: pointer; font: inherit; text-align: left; } .finance_wallet_menu button:hover { background: var(--main_color_lighter5); color: var(--main_color); } .finance_wallet_menu button.danger { color: var(--light_red); } .finance_modal_backdrop { position: fixed; z-index: 10030; inset: 0; display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 24px 16px; background: rgba(0, 0, 0, 0.55); } .finance_modal_backdrop.open { display: flex; } .finance_modal { width: min(720px, 100%); margin: auto 0; padding: 20px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .finance_modal header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .finance_modal header h2 { margin: 0; color: var(--text_color); font-size: 22px; } .finance_modal header small { color: var(--text_color_lighter1); font-size: 10px; font-weight: 700; text-transform: uppercase; } .finance_modal header button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border_color); border-radius: 50%; background: var(--bg_color); color: var(--text_color); cursor: pointer; font-size: 20px; } .finance_form_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } .finance_field { display: grid; gap: 6px; } .finance_field > span { display: flex; justify-content: space-between; color: var(--text_color); font-size: 12px; font-weight: 700; } .finance_field > span em { color: var(--light_red); font-size: 9px; font-style: normal; text-transform: uppercase; } .finance_field input, .finance_field select, .finance_field textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); font: inherit; } .finance_field input[type=color] { padding: 5px; } .finance_field textarea { min-height: 90px; resize: vertical; } .finance_field_wide { grid-column: 1/-1; } .finance_form_feedback { min-height: 20px; margin: 12px 0 0; color: #27864b; font-size: 13px; } .finance_form_feedback.error { color: var(--light_red); } .finance_modal_actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; } .finance_modal_actions > span { flex: 1; } .finance_modal_actions .tree_primary_action.danger { border-color: var(--light_red); background: var(--light_red); } .finance_detail_dialog { width: min(980px, 100%); } .finance_wallet_detail_balance { padding: 16px; border: 1px solid var(--border_color); border-left-width: 5px; border-radius: 8px; background: var(--bg_color); } .finance_wallet_detail_balance span { color: var(--text_color_lighter1); font-size: 10px; font-weight: 700; text-transform: uppercase; } .finance_wallet_detail_balance strong { display: block; margin-top: 3px; color: var(--text_color); font-size: 28px; } .finance_wallet_detail_balance p { margin: 7px 0 0; color: var(--text_color_lighter1); } .finance_ledger_toolbar { display: grid; grid-template-columns: minmax(200px, 1fr) 140px 140px auto; gap: 9px; margin: 16px 0 5px; } .finance_ledger_toolbar input, .finance_ledger_toolbar select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); } .finance_transaction_list { border-top: 1px solid var(--border_color_lighter); } .finance_transaction_row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 110px auto 32px; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border_color_lighter); } .finance_transaction_row > div { display: grid; gap: 3px; } .finance_transaction_row strong { color: var(--text_color); } .finance_transaction_row small, .finance_transaction_row time { color: var(--text_color_lighter1); font-size: 12px; } .finance_transaction_row b.deposit { color: #27864b; } .finance_transaction_row b.withdrawal { color: var(--light_red); } .finance_transaction_row > button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--light_red); border-radius: 7px; background: transparent; color: var(--light_red); cursor: pointer; } .finance_transaction_type { display: inline-flex; justify-content: center; padding: 4px 7px; border-radius: 7px; font-size: 10px; font-weight: 700; text-transform: uppercase; } .finance_transaction_type.deposit { background: #e9f7ee; color: #27864b; } .finance_transaction_type.withdrawal { background: var(--light_red2); color: var(--light_red); } .finance_empty_ledger { padding: 28px 0; color: var(--text_color_lighter1); font-style: italic; text-align: center; } .finance_transaction_switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; } .finance_transaction_switch label { position: relative; } .finance_transaction_switch label input { position: absolute; opacity: 0; } .finance_transaction_switch label span { min-height: 42px; display: grid; place-items: center; border: 1px solid var(--border_color); border-radius: 8px; color: var(--text_color_lighter1); cursor: pointer; font-weight: 700; } .finance_transaction_switch label input:checked + span { border-color: var(--main_color); background: var(--main_color_lighter5); color: var(--main_color); } .finance_confirm_dialog { width: min(420px, 100%); } .finance_public_dialog { width: min(760px, 100%); } .finance_public_context { display: grid; gap: 4px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--main_color_lighter4); border-radius: 8px; background: var(--main_color_lighter5); } .finance_public_context span { color: var(--text_color_lighter1); font-size: 10px; font-weight: 700; text-transform: uppercase; } .finance_public_context strong { color: var(--text_color); } .finance_public_context small { color: var(--text_color_lighter1); } .finance_public_dialog .public_share_instance_list { display: flex; flex-wrap: wrap; gap: 7px; } .finance_public_dialog .public_share_instance_list button { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border_color); border-radius: 7px; background: var(--white_color); color: var(--text_color); cursor: pointer; text-align: left; } .finance_public_dialog .public_share_instance_list button.active { border-color: var(--main_color); color: var(--main_color); } .finance_public_dialog .public_share_instance_list button small { color: var(--text_color_lighter1); font-size: 10px; } .finance_public_dialog .public_share_link { margin: 12px 0 16px; } .finance_public_dialog .public_share_options { margin-bottom: 20px; } .public_finance_wallet { width: min(920px, 100% - 32px); margin: 24px auto 48px; } .public_finance_wallet > header, .public_finance_wallet > section { padding: 22px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); } .public_finance_wallet > header { border-top-width: 5px; } .public_finance_wallet > header span { color: var(--text_color_lighter1); font-size: 10px; font-weight: 700; text-transform: uppercase; } .public_finance_wallet > header h2 { margin: 5px 0; color: var(--text_color); } .public_finance_wallet > header strong { display: block; color: var(--main_color); font-size: 32px; } .public_finance_wallet > header p { color: var(--text_color_lighter1); } .public_finance_wallet > section { margin-top: 14px; } .public_finance_wallet > section > h2 { margin-top: 0; } .public_finance_wallet > section > article { display: grid; grid-template-columns: 100px minmax(0, 1fr) 110px auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border_color_lighter); } .public_finance_wallet > section > article:last-child { border-bottom: 0; } .public_finance_wallet > section > article strong { color: var(--text_color); } .public_finance_wallet > section > article time { color: var(--text_color_lighter1); } @media (max-width: 1280px) { .page_wrap.finances_page { width: min(100% - 48px, 1400px); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_board { grid-template-columns: repeat(2, minmax(0, 1fr)); } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_group_family, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_group_tiles { grid-column: 1/-1; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_main_grid, .manage_page .manage_content .manage_content_inner .manage_section_body .stats_bottom_grid { grid-template-columns: minmax(0, 1fr); } .manage_page .manage_content .manage_content_inner .manage_section_body .family_overview_content, .manage_page .manage_content .manage_content_inner .manage_section_body .records_card_content { grid-template-columns: minmax(0, 1fr); } .manage_page .manage_content .manage_content_inner .manage_section_body .family_metrics_column, .manage_page .manage_content .manage_content_inner .manage_section_body .records_chart_wrap { padding-right: 0; border-right: 0; } .manage_page .manage_content .manage_content_inner .manage_section_body .records_chart_wrap { min-height: 170px; padding-bottom: 14px; border-bottom: 1px solid var(--stats-line); } .finances_dashboard { grid-template-columns: 1fr; } .finances_dashboard_sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 980px) { .plugins_developer_stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .finance_total_panel { grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr); } .finance_total_panel .finance_total_explainer { padding-left: 28px; } .finance_total_panel .finance_total_art { display: none; } .finances_toolbar { grid-template-columns: minmax(0, 1fr) minmax(220px, 0.75fr) auto; } .finances_toolbar .page_count { grid-column: 1/-1; justify-self: start; } .finance_wallet_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .finances_page[data-finances-view-mode=list] .finance_wallet_content { grid-template-columns: minmax(150px, 1fr) auto; } .finances_page[data-finances-view-mode=list] .finance_wallet_content > p, .finances_page[data-finances-view-mode=list] .finance_wallet_content footer { grid-column: 1/-1; grid-row: auto; } .finances_page[data-finances-view-mode=list] .finance_wallet_content footer { min-width: 0; padding-top: 12px; border-top: 1px solid var(--border_color_lighter); } } @media (max-width: 760px) { .page_wrap.finances_page { width: calc(100% - 28px); padding-top: 20px; } .finance_total_panel { grid-template-columns: 1fr; gap: 20px; min-height: 0; padding: 22px; } .finance_total_panel .finance_total_explainer { padding-left: 0; border-left: 0; } .finances_toolbar, .finance_ledger_toolbar { grid-template-columns: 1fr; } .finances_toolbar { gap: 16px; min-height: 0; padding: 16px; } .finances_toolbar label select { min-width: 0; width: 100%; } .finances_toolbar .page_filters { padding-right: 0; } .finances_toolbar .page_filters .filter_buttons { overflow-x: auto; } .finance_view_control > div { width: max-content; } .finance_wallet_grid, .finances_dashboard_sidebar { grid-template-columns: 1fr; } .finance_form_grid { grid-template-columns: 1fr; } .finance_field_wide { grid-column: auto; } .finance_transaction_row { grid-template-columns: 80px minmax(0, 1fr) auto; } .finance_transaction_row time { grid-column: 2; } .finance_public_dialog .public_share_manager { align-items: stretch; flex-direction: column; } .public_finance_wallet > section > article { grid-template-columns: 90px minmax(0, 1fr); } .public_finance_wallet > section > article time, .public_finance_wallet > section > article b { grid-column: 2; } } @media (max-width: 520px) { .page_wrap.finances_page { width: calc(100% - 20px); padding-top: 16px; } .finance_total_panel > div:first-child strong { font-size: 32px; } .finance_wallet_card { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; min-height: 220px; padding-right: 18px; } .finance_wallet_icon, .finance_activity_icon { width: 46px; height: 46px; } .finance_activity_item { grid-template-columns: 46px minmax(0, 1fr); } .finance_activity_item .finance_activity_meta { grid-column: 2; justify-items: start; } .finance_summary_body { grid-template-columns: 1fr; justify-items: center; } .finance_summary_rows { width: 100%; } } @media (hover: none) { .finance_wallet_menu_btn { opacity: 1; } } .events_empty { display: block; min-height: 220px; margin-top: 20px; align-content: center; } .events_empty strong { color: #aaa; font-size: 22px; } .events_empty span { color: #c5c5c5; } .documents_page { margin: 0 auto; padding: 24px 0 64px; } .documents_toolbar { grid-template-columns: repeat(5, minmax(130px, 1fr)) auto; } .documents_notice { margin-top: 14px; padding: 11px 14px; border: 1px solid var(--main_color_lighter3); border-radius: 8px; background: var(--main_color_lighter5); color: var(--main_color); font-size: 14px; font-weight: 600; } .documents_notice.error { border-color: var(--light_red); background: var(--light_red2); color: var(--light_red); } .documents_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; margin-top: 24px; } .document_card { position: relative; min-width: 0; overflow: visible; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); } .document_preview { position: relative; width: 100%; aspect-ratio: 3/4; min-height: 250px; display: grid; place-content: center; gap: 8px; overflow: hidden; border: 0; border-bottom: 1px solid var(--border_color_lighter); border-radius: 11px 11px 0 0; background: #edf4f7; color: #477081; cursor: pointer; text-align: center; } .document_preview .document_preview_image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .document_preview .document_preview_icon { position: relative; z-index: 1; font-size: 26px; font-weight: 700; letter-spacing: 0; } .document_preview small { position: relative; z-index: 1; color: currentColor; font-weight: 600; } .document_cover_category { position: absolute; z-index: 2; top: 12px; left: 12px; max-width: calc(100% - 64px); overflow: hidden; padding: 5px 8px; border: 1px solid currentColor; border-radius: 999px; background: rgba(255, 255, 255, 0.88); color: currentColor; font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .document_book_spine { position: absolute; top: 15%; bottom: 15%; left: calc(50% - 58px); width: 9px; border: 2px solid currentColor; border-right: 0; border-radius: 5px 0 0 5px; opacity: 0.28; } .document_preview_fold { position: absolute; top: 15%; left: 50%; width: 108px; height: 70%; margin-left: -54px; border: 2px solid currentColor; border-radius: 5px; opacity: 0.2; } .document_preview_fold::after { position: absolute; top: -2px; right: -2px; width: 25px; height: 25px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; background: inherit; content: ""; } .document_preview_pdf, .document_detail_placeholder.document_preview_pdf, .public_document_preview.document_preview_pdf { background: #fff0f0; color: #bd3e43; } .document_preview_word, .document_detail_placeholder.document_preview_word, .public_document_preview.document_preview_word { background: #edf3ff; color: #3568b7; } .document_preview_sheet, .document_detail_placeholder.document_preview_sheet, .public_document_preview.document_preview_sheet { background: #edf8f1; color: #277a4b; } .document_preview_slides, .document_detail_placeholder.document_preview_slides, .public_document_preview.document_preview_slides { background: #fff4e9; color: #b6632b; } .document_menu_btn { position: absolute; z-index: 3; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 50%; background: rgba(20, 28, 32, 0.68); color: #fff; cursor: pointer; font-size: 19px; line-height: 1; } .document_card_body { padding: 15px 16px 17px; } .document_card_body h2 { margin: 0; overflow: hidden; color: var(--text_color); font-size: 17px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .document_card_body > p { display: -webkit-box; min-height: 38px; margin: 8px 0 0; overflow: hidden; color: var(--text_color_lighter1); font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .document_card_heading { display: flex; align-items: center; gap: 7px; } .document_card_heading .public_badge { flex: 0 0 auto; padding: 2px 6px; font-size: 9px; } .document_meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; color: var(--text_color_lighter1); font-size: 11px; } .document_meta span + span::before, .document_meta span + time::before { margin-right: 6px; content: "•"; color: var(--border_color_darker); } .document_action_menu { position: absolute; z-index: 12; top: 48px; right: 10px; min-width: 132px; padding: 5px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .document_action_menu button { width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text_color); cursor: pointer; text-align: left; } .document_action_menu button:hover { background: var(--bg_color); } .document_action_menu button.danger { color: var(--light_red); } .documents_page[data-documents-view=list] .documents_grid { grid-template-columns: 1fr; gap: 12px; } .documents_page[data-documents-view=list] .document_card { display: grid; grid-template-columns: 94px minmax(0, 1fr); min-height: 126px; } .documents_page[data-documents-view=list] .document_preview { min-height: 124px; border-right: 1px solid var(--border_color_lighter); border-bottom: 0; border-radius: 11px 0 0 11px; } .documents_page[data-documents-view=list] .document_preview .document_preview_icon { font-size: 21px; } .documents_page[data-documents-view=list] .document_preview small { font-size: 10px; } .documents_page[data-documents-view=list] .document_cover_category { display: none; } .documents_page[data-documents-view=list] .document_book_spine { left: calc(50% - 26px); width: 5px; } .documents_page[data-documents-view=list] .document_preview_fold { top: 18px; width: 50px; height: 88px; margin-left: -27px; } .documents_page[data-documents-view=list] .document_preview_fold::after { width: 16px; height: 16px; } .documents_page[data-documents-view=list] .document_card_body { display: grid; align-content: center; padding: 18px 58px 18px 20px; } .documents_page[data-documents-view=list] .document_card_body > p { min-height: 0; } .documents_loading { padding: 24px; color: var(--text_color_lighter1); font-style: italic; text-align: center; } .documents_sentinel { width: 100%; height: 1px; } .document_modal_backdrop { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 28px 16px; background: rgba(12, 18, 22, 0.62); } .document_modal_backdrop.open { display: flex; } .document_modal { width: min(700px, 100%); max-height: calc(100vh - 56px); overflow-y: auto; padding: 20px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .document_modal > header, .document_modal form > header, .document_modal article > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .document_modal > header h2, .document_modal form > header h2, .document_modal article > header h2 { margin: 0; color: var(--text_color); } .document_modal > header button, .document_modal form > header button, .document_modal article > header button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border_color); border-radius: 50%; background: var(--bg_color); color: var(--text_color_lighter1); cursor: pointer; font-size: 21px; } .document_edit_modal, .document_detail_modal, .document_public_dialog { width: min(780px, 100%); } .document_dropzone { min-height: 170px; display: grid; place-content: center; gap: 7px; margin-bottom: 16px; padding: 22px; border: 1px dashed var(--main_color_lighter2); border-radius: 8px; background: var(--main_color_lighter5); color: var(--text_color); cursor: pointer; text-align: center; } .document_dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; } .document_dropzone small { color: var(--text_color_lighter1); } .document_dropzone em { min-height: 18px; color: var(--main_color); font-size: 12px; font-style: normal; font-weight: 600; } .document_dropzone.dragging { border-style: solid; } .document_drop_icon { width: 46px; height: 46px; display: grid; place-items: center; margin: 0 auto 3px; border: 1px solid var(--main_color_lighter2); border-radius: 8px; color: var(--main_color); font-size: 27px; font-weight: 700; } .document_form_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .document_field { display: grid; gap: 6px; } .document_field > span { display: flex; justify-content: space-between; color: var(--text_color); font-size: 12px; font-weight: 700; } .document_field > span em { color: var(--text_color_lighter1); font-size: 9px; font-style: normal; text-transform: uppercase; } .document_field input, .document_field select, .document_field textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); } .document_field textarea { min-height: 96px; resize: vertical; } .document_field_wide { grid-column: 1/-1; } .document_form_feedback { min-height: 20px; margin: 12px 0 0; color: var(--green_color); } .document_form_feedback.error { color: var(--light_red); } .document_modal_actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; } .document_modal_actions .tree_primary_action, .document_modal_actions .tree_secondary_action { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .document_detail iframe { width: 100%; height: min(58vh, 620px); border: 1px solid var(--border_color); border-radius: 8px; background: #fff; } .document_detail_placeholder { min-height: 260px; display: grid; place-content: center; gap: 7px; border-radius: 8px; text-align: center; } .document_detail_placeholder strong { font-size: 42px; } .document_detail_body { margin-top: 16px; color: var(--text_color_lighter1); } .document_detail_body > p { line-height: 1.5; } .document_detail_body .document_detail_excerpt { color: var(--text_color); font-weight: 600; } .document_detail_body dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; } .document_detail_body dl div { padding: 10px; border: 1px solid var(--border_color_lighter); border-radius: 7px; background: var(--bg_color); } .document_detail_body dl dt { color: var(--text_color_lighter1); font-size: 10px; font-weight: 700; text-transform: uppercase; } .document_detail_body dl dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--text_color); } .document_public_context { display: grid; gap: 3px; margin-bottom: 16px; padding: 13px; border: 1px solid var(--main_color_lighter3); border-radius: 8px; background: var(--main_color_lighter5); } .document_public_context span { color: var(--text_color_lighter1); font-size: 10px; font-weight: 700; text-transform: uppercase; } .document_public_context strong { color: var(--text_color); } .document_public_context small { color: var(--text_color_lighter1); } .document_public_share_modal [hidden] { display: none; } .document_public_share_modal .public_share_instance_list { display: flex; flex-wrap: wrap; gap: 7px; } .document_public_share_modal .public_share_instance_list button { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border_color); border-radius: 7px; background: var(--white_color); color: var(--text_color); cursor: pointer; text-align: left; } .document_public_share_modal .public_share_instance_list button.active { border-color: var(--main_color); color: var(--main_color); } .document_public_share_modal .public_share_instance_list button small { color: var(--text_color_lighter1); font-size: 10px; } .document_public_share_modal .public_share_link { margin: 12px 0 16px; } .document_public_share_modal .public_share_options { margin-bottom: 22px; } .public_document_view { width: min(1180px, 100% - 32px); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.7fr); gap: 18px; margin: 24px auto 48px; } .public_document_preview, .public_document_details { border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .public_document_preview { min-height: 70vh; overflow: hidden; } .public_document_preview iframe { width: 100%; height: 70vh; display: block; border: 0; background: #fff; } .public_document_preview > div { min-height: 70vh; display: grid; place-content: center; gap: 8px; text-align: center; } .public_document_preview > div strong { font-size: 48px; } .public_document_details { align-self: start; padding: 20px; } .public_document_details > span { color: var(--main_color); font-size: 10px; font-weight: 700; text-transform: uppercase; } .public_document_details h2 { margin: 6px 0 12px; color: var(--text_color); } .public_document_details p { color: var(--text_color_lighter1); line-height: 1.55; } .public_document_details .public_document_excerpt { color: var(--text_color); font-weight: 600; } .public_document_details dl { margin: 18px 0; } .public_document_details dl div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border_color_lighter); } .public_document_details dl dt { color: var(--text_color_lighter1); } .public_document_details dl dd { margin: 0; overflow-wrap: anywhere; color: var(--text_color); } .public_document_download { display: inline-flex; text-decoration: none; } @media (max-width: 1100px) { .documents_toolbar { grid-template-columns: repeat(3, minmax(140px, 1fr)); } .documents_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .documents_toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .documents_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .document_form_grid { grid-template-columns: 1fr; } .document_field_wide { grid-column: auto; } .public_document_view { grid-template-columns: 1fr; } .public_document_preview, .public_document_preview iframe, .public_document_preview > div { min-height: 55vh; height: 55vh; } } @media (max-width: 520px) { .documents_page { width: min(100% - 20px, 1480px); } .documents_toolbar, .documents_grid { grid-template-columns: 1fr; } .documents_page[data-documents-view=list] .document_card { grid-template-columns: 92px minmax(0, 1fr); } .document_modal_backdrop { padding: 10px; } .document_modal { padding: 15px; } .document_detail_body dl { grid-template-columns: 1fr; } .document_modal_actions { flex-wrap: wrap; } } .events_page .page_header { margin-bottom: 14px; } .events_page .page_toolbar { gap: 10px; padding: 10px; } .events_list { display: grid; gap: 10px; margin-top: 14px; } .events_page[data-events-view=grid] .events_list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .event_card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; align-items: stretch; padding: 12px 56px 12px 12px; border: 1px solid var(--border_color_lighter); border-radius: 10px; background: var(--white_color); } .public_badge { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 7px; background: var(--main_color_lighter5); border: 1px solid var(--main_color_lighter3); border-radius: 10px; text-align: center; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--main_color); } .family_tree_picker_toggle .tree_current_public_badge { margin-left: auto; } .family_tree_picker_menu .family_tree_picker_item { display: flex; align-items: center; gap: 7px; } .family_tree_picker_menu .family_tree_picker_item span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .public_share_backdrop.open { display: flex; } .public_share_modal { width: min(720px, 100vw - 32px) !important; max-height: calc(100vh - 40px); overflow-y: auto; padding: 20px !important; border: 1px solid var(--border_color); box-shadow: none !important; } .tree_action_modal.public_share_modal { max-height: none; overflow: visible; } .public_share_intro { margin: -4px 0 18px; color: var(--text_color_lighter1); font-size: 14px; line-height: 1.5; } .public_share_manager { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; padding-bottom: 14px; border-bottom: 1px solid var(--border_color); } .tree_primary_action, .tree_secondary_action { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 9px 14px; border: 1px solid var(--main_color); border-radius: 8px; background: var(--main_color); color: #fff; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; } .tree_primary_action:hover, .tree_secondary_action:hover { border-color: var(--main_color_darker); background: var(--main_color_darker); } .tree_primary_action:focus-visible, .tree_secondary_action:focus-visible { outline: 2px solid var(--main_color_lighter2); outline-offset: 2px; } .tree_primary_action:disabled, .tree_secondary_action:disabled { cursor: not-allowed; opacity: 0.55; } .tree_secondary_action { border-color: var(--border_color_darker); background: var(--white_color); color: var(--text_color); } .tree_secondary_action:hover { border-color: var(--main_color_lighter2); background: var(--main_color_lighter5); color: var(--main_color); } .tree_secondary_action.danger { background: transparent; border-color: var(--light_red); color: var(--light_red); } .tree_secondary_action.danger:hover { border-color: var(--light_red); background: var(--light_red); color: #fff; } .public_share_instance_list { min-width: 0; flex: 1; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px; } .public_share_instance_list > button { flex: 0 0 auto; min-width: 130px; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border_color); border-radius: 7px; background: var(--white_color); color: var(--text_color); cursor: pointer; text-align: left; } .public_share_instance_list > button.active { background: var(--main_color_lighter5); border-color: var(--main_color_lighter3); color: var(--main_color); } .public_share_instance_list > button small { color: var(--text_color_lighter1); font-size: 11px; } .public_share_options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } .public_share_option, .public_share_field { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 78px; padding: 14px 16px; background: var(--bg_color); border: 1px solid var(--border_color_lighter); border-radius: 10px; color: var(--text_color); cursor: pointer; } .public_share_option > span, .public_share_field > span { min-width: 0; display: grid; gap: 4px; } .public_share_option strong, .public_share_field strong { font-size: 16px; line-height: 1.25; } .public_share_option small, .public_share_field small { color: var(--text_color_lighter1); font-size: 12px; line-height: 1.35; } .public_share_option input[type=checkbox], .public_share_field input[type=checkbox] { position: relative; appearance: none !important; -webkit-appearance: none !important; flex: 0 0 auto; width: 44px !important; height: 26px !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--border_color); border-radius: 999px; background: var(--white_color); cursor: pointer; outline: none; } .public_share_option input[type=checkbox]::before, .public_share_field input[type=checkbox]::before { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--text_color_lighter2); } .public_share_option input[type=checkbox]::after, .public_share_field input[type=checkbox]::after { display: none !important; content: none !important; } .public_share_option input[type=checkbox]:checked, .public_share_field input[type=checkbox]:checked { border-color: var(--main_color); background: var(--main_color); } .public_share_option input[type=checkbox]:checked::before, .public_share_field input[type=checkbox]:checked::before { left: 22px; background: #fff; } .public_share_option input[type=checkbox]:focus-visible, .public_share_field input[type=checkbox]:focus-visible { outline: 2px solid var(--main_color_lighter2); outline-offset: 2px; } .public_share_discovery_option { margin-top: 12px; } .public_share_options .public_share_discovery_option { grid-column: 1/-1; margin-top: 0; } .public_share_discovery_option strong { display: inline-flex; align-items: center; gap: 7px; } .public_share_tooltip { width: 18px; height: 18px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--main_color_lighter3); border-radius: 50%; background: var(--white_color); color: var(--main_color); cursor: help; font-size: 11px; font-style: normal; font-weight: 700; line-height: 1; } .public_share_tooltip:focus-visible { outline: 2px solid var(--main_color_lighter2); outline-offset: 2px; } .public_share_discovery_meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; padding: 14px; border: 1px solid var(--main_color_lighter3); border-radius: 10px; background: var(--main_color_lighter5); } .public_share_discovery_meta[hidden] { display: none; } .public_share_discovery_meta legend { padding: 0 6px; color: var(--text_color); font-size: 14px; font-weight: 700; } .public_share_discovery_meta > small { grid-column: 1/-1; color: var(--text_color_lighter1); font-size: 12px; } .public_share_discovery_meta .public_share_field { grid-column: auto; min-height: 0; align-items: stretch; flex-direction: column; padding: 12px; cursor: default; } .public_share_discovery_meta .public_share_field > span { font-size: 12px; font-weight: 700; } .public_share_discovery_meta .public_share_field input, .public_share_discovery_meta .public_share_field textarea { width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--border_color); border-radius: 7px; background: var(--white_color); color: var(--text_color); font: inherit; } .public_share_discovery_meta .public_share_field textarea { resize: vertical; } .public_share_field { grid-column: 1/-1; } .public_share_field select, .public_share_field input { min-width: 170px; padding: 9px 11px; border: 1px solid var(--border_color); border-radius: 7px; background: var(--white_color); color: var(--text_color); } .event_countdown { width: max-content; padding: 3px 8px; border: 1px solid var(--main_color_lighter3); border-radius: 7px; background: var(--main_color_lighter5); color: var(--main_color); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .event_public_badge { color: var(--main_color); font-size: 12px; font-weight: 700; } .events_participants_modal, .events_public_share_modal { width: min(680px, 100vw - 30px); } .events_participant_list { display: grid; gap: 7px; max-height: 230px; overflow-y: auto; margin-bottom: 14px; } .events_participant_list > article { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 32px; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--border_color); border-radius: 8px; } .events_participant_list > article img, .events_participant_list > article .events_participant_placeholder { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--bg_color_darker); } .events_participant_list > article > span { display: grid; } .events_participant_list > article > span small { color: var(--text_color_lighter1); } .events_participant_list > article > em { color: var(--main_color); font-style: normal; font-weight: 700; } .events_participant_list > article > button { width: 30px; height: 30px; border: 1px solid var(--border_color); border-radius: 7px; background: transparent; color: var(--light_red); cursor: pointer; } .events_participant_list > p { margin: 0; color: var(--text_color_lighter1); font-style: italic; } .events_participant_form { display: grid; gap: 10px; } .events_participant_form > label, .events_participant_form .events_participant_contribution label { display: grid; gap: 5px; color: var(--text_color); font-weight: 600; } .events_participant_form > label input, .events_participant_form > label select, .events_participant_form .events_participant_contribution label input, .events_participant_form .events_participant_contribution label select { width: 100%; padding: 10px 11px; border: 1px solid var(--border_color); border-radius: 7px; background: var(--white_color); color: var(--text_color); } .events_participant_contribution { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .public_event_view { display: grid; gap: 18px; } .public_event_hero { position: relative; display: grid; min-height: 340px; overflow: hidden; border: 1px solid var(--border_color); border-radius: 14px; background: var(--white_color); } .public_event_hero.no_media { min-height: 0; } .public_event_hero.no_media .public_event_hero_text { position: static; inset: auto; max-width: none; border: none; border-radius: 0; background: transparent; padding: 22px 24px; } .public_event_image { width: 100%; height: 100%; min-height: 340px; object-fit: cover; } .public_event_hero_text { position: absolute; left: 24px; right: 24px; bottom: 24px; display: grid; gap: 8px; max-width: 560px; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 12px; background: rgba(255, 255, 255, 0.92); color: var(--text_color); } .public_event_hero_text time { font-weight: 700; } .public_event_hero_text p { margin: 0; } .public_event_content { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr); gap: 18px; color: var(--text_color); } .public_event_countdown { width: max-content; color: var(--main_color); font-size: 22px; } .public_event_block { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); } .public_event_block h2 { margin: 0; font-size: 18px; } .public_event_block p { margin: 0; line-height: 1.6; } .public_event_summary { align-content: start; } .public_event_summary > div { display: flex; justify-content: space-between; gap: 16px; } .public_event_summary > div strong { color: var(--main_color); font-size: 22px; } .public_event_summary ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } .public_event_summary ul li { display: flex; justify-content: space-between; gap: 12px; padding-top: 7px; border-top: 1px solid var(--border_color_lighter); } .public_event_participants { grid-column: 1/-1; } .public_event_participants > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .public_event_participants article { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border_color_lighter); border-radius: 10px; background: var(--bg_color_darker); } .public_event_participants article img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; } .public_event_participants article span { display: grid; min-width: 0; } .public_event_participants article small { color: var(--text_color_lighter1); } .public_share_link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 20px; } .public_share_link input { min-width: 0; padding: 10px 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); font-size: 16px; } .public_share_link button { padding: 9px 13px; border: 1px solid var(--main_color); border-radius: 8px; background: var(--main_color); color: #fff; cursor: pointer; font-weight: 700; } .public_share_actions { position: sticky; bottom: -20px; margin: 25px -20px -20px !important; padding: 14px 20px; background: var(--white_color); border-top: 1px solid var(--border_color); z-index: 2; } .public_share_actions .danger { margin-right: auto; border-color: var(--light_red_2); color: var(--light_red); } .public_share_subtitle { margin: 8px 0 0; color: var(--text_color); font-size: 14px; } .public_share_detail_options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .public_share_detail_options .public_share_option.compact { min-height: 44px; padding: 9px 11px; } .public_recommendation_review { display: grid; gap: 8px; margin-top: 14px; } .public_recommendation_review h4 { margin: 0; } .public_recommendation_review > div { display: grid; gap: 7px; max-height: 240px; overflow-y: auto; padding-right: 3px; } .public_recommendation_item { display: grid; gap: 6px; padding: 10px 11px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color); } .public_recommendation_item p { margin: 0; color: var(--text_color); } .public_recommendation_item small { color: var(--text_color_lighter1); } .public_recommendation_item > span { display: flex; gap: 7px; justify-content: flex-end; } .public_recommendation_item button { padding: 6px 9px; border: 1px solid var(--main_color); border-radius: 6px; background: transparent; color: var(--main_color); cursor: pointer; font-weight: 700; } .public_recommendation_item button.danger { border-color: var(--light_red); color: var(--light_red); } .public_recommendation_item em { justify-self: end; color: var(--text_color_lighter1); font-size: 12px; } .public_recommendation_item.approved { border-color: var(--main_color_lighter3); } .public_recommendation_item.rejected { opacity: 0.66; } .public_share_body { font-family: "Inter", sans-serif; min-height: 100vh; overflow: auto; } .public_share_header { display: flex; align-items: center; gap: 24px; min-height: 68px; padding: 10px clamp(16px, 4vw, 56px); border-bottom: 1px solid var(--border_color); background: var(--white_color); } .public_share_header .public_share_brand { display: flex; align-items: center; flex: 0 0 auto; } .public_share_header img { display: block; width: 150px; max-height: 48px; object-fit: contain; } .public_share_header .public_share_favicon { display: none; width: 36px; height: 36px; } .tree_action_modal.public_share_modal .public_share_actions { position: static; bottom: auto; margin: 18px 0 0 !important; padding: 0; background: transparent; border-top: 0; } .tree_action_modal.public_share_modal .public_share_actions .danger { margin-right: auto; } .public_share_header .public_share_title { min-width: 0; flex: 1; margin: 0; } .public_share_header .public_share_title h1 { overflow: hidden; color: var(--text_color); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; } .public_share_header .public_share_title p { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .public_share_header_actions { display: flex; align-items: center; gap: 10px; } .public_share_menu_btn { display: none; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); cursor: pointer; } .public_share_menu_btn svg { width: 20px; height: 20px; fill: var(--text_color_lighter1); } .public_share_menu_btn:hover, .public_share_menu_btn.open { border-color: var(--main_color_lighter2); } .public_share_menu_btn:hover svg, .public_share_menu_btn.open svg { fill: var(--main_color); } .public_language_switcher { position: relative; } .public_language_switcher .public_language_toggle { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); cursor: pointer; font-weight: 600; } .public_language_switcher .public_language_toggle img { width: 20px; height: 20px; border-radius: 50%; } .public_language_switcher .public_language_menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; display: none; min-width: 140px; padding: 5px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .public_language_switcher .public_language_menu button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; } .public_language_switcher .public_language_menu button img { width: 20px; height: 20px; border-radius: 50%; } .public_language_switcher .public_language_menu button:hover { background: var(--bg_color); } .public_language_switcher.open .public_language_menu { display: block; } .public_mobile_nav_overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 500; } .public_mobile_nav_overlay.open { display: block; } .public_mobile_nav_drawer .public_mobile_nav_links { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding: 0.75rem 0.625rem; } .public_mobile_nav_drawer .public_mobile_action { display: flex; align-items: center; width: 100%; min-height: 42px; padding: 0.75rem 0.875rem; border: 0; border-radius: 0.625rem; background: transparent; color: var(--text_color); cursor: pointer; font-size: 0.9375rem; font-weight: 600; text-align: left; text-decoration: none; } .public_mobile_nav_drawer .public_mobile_action:hover, .public_mobile_nav_drawer .public_mobile_action.active { background: var(--main_color_lighter5); color: var(--main_color); } .public_mobile_nav_drawer .public_mobile_action span { margin-left: auto; color: var(--text_color_lighter1); font-size: 12px; } .public_theme_switcher { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color_lighter1); cursor: pointer; } .public_theme_switcher svg { width: 20px; height: 20px; fill: currentColor; } .public_theme_switcher:hover { border-color: var(--main_color_lighter2); color: var(--main_color); } .public_theme_switcher.active { border-color: var(--main_color_lighter3); background: var(--main_color_lighter5); color: var(--main_color); } .public_theme_switcher:focus-visible { outline: 2px solid var(--main_color_lighter2); outline-offset: 2px; } .public_tree_layout_switch { display: flex; align-items: center; padding: 3px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color); } .public_tree_layout_switch button { padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text_color_lighter1); font-weight: 600; font-size: 15px; cursor: pointer; } .public_tree_layout_switch button.active { background: var(--white_color); color: var(--main_color); } .public_copy_link_btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 11px; border: 1px solid var(--main_color); border-radius: 8px; background: var(--main_color); color: #fff; cursor: pointer; font-weight: 700; line-height: 1; text-decoration: none; } .public_share_page { width: min(1440px, 100%); margin: 0 auto; padding: 24px clamp(14px, 3vw, 40px) 48px; } .public_share_page.public_tree_page { width: 100%; max-width: none; min-height: calc(100vh - 68px); margin: 0; padding: 0; } .public_share_title { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .public_share_title h1 { margin: 0; } .public_share_title p { margin: 4px 0 0; color: var(--text_color_lighter1); } .public_share_title button { padding: 9px 13px; border: 1px solid var(--main_color); border-radius: 8px; background: transparent; color: var(--main_color); cursor: pointer; font-weight: 700; } .public_tree_view { position: relative; width: 100%; height: calc(100vh - 68px); min-height: 480px; margin: 0; overflow: hidden; border: 0; border-radius: 0; background-color: var(--white_color); } .public_tree_view .cta_panel { right: -10px; bottom: 0.5rem; } .public_gallery_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .public_gallery_card { overflow: hidden; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .public_gallery_card > a:first-child { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; } .public_gallery_card img { width: 100%; height: 100%; object-fit: cover; } .public_gallery_card > strong, .public_gallery_card > small { display: block; padding: 8px 11px; color: var(--text_color); } .public_gallery_card > small { padding-top: 4px; color: var(--text_color_lighter1); } .public_gallery_card .public_download { display: inline-flex; margin: 10px 11px 11px; color: var(--main_color); font-weight: 700; } .public_video_badge { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: rgba(0, 0, 0, 0.68); color: #fff; } .public_media_lightbox { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 32px; background: rgba(0, 0, 0, 0.86); } .public_media_lightbox[hidden] { display: none; } .public_media_lightbox > button { position: absolute; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; cursor: pointer; font-size: 26px; } .public_media_lightbox .public_media_lightbox_close { top: 18px; right: 18px; } .public_media_lightbox .public_media_lightbox_nav { top: 50%; margin-top: -20px; } .public_media_lightbox .public_media_lightbox_prev { left: 18px; } .public_media_lightbox .public_media_lightbox_next { right: 18px; } .public_media_lightbox img, .public_media_lightbox video { display: block; max-width: min(92vw, 1400px); max-height: 88vh; } .public_recommendation_form { display: grid; gap: 10px; width: min(720px, 100%); margin: 28px auto 0; padding: 18px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .public_recommendation_form > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .public_recommendation_form input, .public_recommendation_form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color); color: var(--text_color); } .public_recommendation_form textarea { min-height: 120px; resize: vertical; } .public_recommendation_form > button { justify-self: end; padding: 10px 14px; border: 1px solid var(--main_color); border-radius: 8px; background: var(--main_color); color: #fff; cursor: pointer; font-weight: 700; } .public_recommendation_form > p { margin: 0; color: var(--main_color); } .public_recommendation_form > p.error { color: var(--light_red); } .public_recommendation_form > p.success { color: var(--main_color); } @media (max-width: 680px) { .public_share_option, .public_share_field { align-items: flex-start; } .public_share_field { display: grid; } .public_share_field select { width: 100%; min-width: 0; } .public_share_options { grid-template-columns: 1fr; } .public_share_link { grid-template-columns: 1fr; } .public_share_header { align-items: center; gap: 10px; } .public_share_header .public_share_logo { display: none; } .public_share_header .public_share_favicon { display: block; } .public_share_header .public_share_title { flex: 1; } .public_share_header .public_share_title h1 { font-size: 16px; } .public_share_header_actions { display: none; } .public_share_menu_btn { display: grid; margin-left: auto; } .public_tree_layout_switch button { padding: 6px 8px; } .public_event_content { grid-template-columns: 1fr; } .public_event_hero_text { left: 12px; right: 12px; bottom: 12px; } .public_share_detail_options { grid-template-columns: 1fr; } .public_recommendation_form > div { grid-template-columns: 1fr; } .public_share_page.public_tree_page { min-height: calc(100vh - 112px); } .public_tree_view { height: calc(100vh - 112px); min-height: 440px; } } .events_page[data-events-view=grid] .event_card { overflow: hidden; grid-template-columns: 1fr; padding: 0; } .events_page[data-events-view=grid] .event_card .event_media { border-radius: 0; } .events_page[data-events-view=grid] .event_card .event_card_body { padding: 12px 15px 15px; } .event_media { width: 184px; min-height: 92px; border-radius: 8px; overflow: hidden; background: var(--bg_color_darker); cursor: pointer; } .event_media img { width: 100%; height: 100%; min-height: 92px; display: block; object-fit: cover; } .events_page[data-events-view=grid] .event_media { width: 100%; aspect-ratio: 16/10; } .events_page[data-events-view=grid] .event_media img { min-height: 0; } .event_date_badge { width: 100%; height: 100%; min-height: 92px; display: grid; place-items: center; align-content: center; border: 1px solid var(--main_color_lighter3); border-radius: 12px; background: var(--main_color_lighter5); } .event_date_badge strong { color: var(--main_color); font-size: 12px; text-transform: uppercase; } .event_date_badge span { color: var(--text_color); font-size: 24px; font-weight: 700; } .event_card_body { min-width: 0; display: grid; align-content: start; gap: 6px; } .event_card_body h2 { margin: 0; color: var(--text_color); font-size: 17px; line-height: 1.25; } .event_card_body p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text_color_lighter1); font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .event_card_top, .event_meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; color: var(--text_color_lighter1); font-size: 12px; } .event_status { padding: 3px 8px; border: 1px solid var(--main_color_lighter3); border-radius: 999px; color: var(--main_color); background: var(--main_color_lighter5); font-weight: 700; font-size: 12px; } .event_status_canceled { border-color: var(--light_red_2, #f4b0b0); background: var(--light_red_4, #ffeaea); color: var(--light_red); } .event_actions { display: flex; align-items: center; gap: 6px; } .event_actions button { height: 34px; padding: 7px 10px; border: 1px solid var(--border_color); border-radius: 10px; background: transparent; color: var(--text_color); cursor: pointer; font-weight: 600; } .event_actions button.danger { border-color: var(--light_red); color: var(--light_red); } .event_actions button:hover { border-color: var(--main_color_lighter3); color: var(--main_color); } .event_menu_btn { position: absolute; top: 14px; right: 14px; z-index: 7; width: 38px; height: 38px; min-width: 38px; min-height: 38px; padding: 0; display: grid; place-items: center; border: 1px solid var(--border_color); border-radius: 10px; background: var(--white_color); color: var(--text_color_lighter1); cursor: pointer; font-size: 20px; line-height: 1; } .event_menu_btn.active, .event_menu_btn:hover { border-color: var(--main_color); background: color-mix(in srgb, var(--white_color) 88%, var(--main_color) 12%); color: var(--main_color_darker); } .event_card_menu, .person_action_menu { position: absolute; top: 58px; right: 14px; z-index: 8; width: 220px; display: grid; gap: 4px; padding: 6px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); } .event_card_menu button, .person_action_menu button { width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text_color); cursor: pointer; text-align: left; font-weight: 600; } .event_card_menu button:hover, .person_action_menu button:hover { border-color: var(--main_color_lighter4); background: var(--main_color_lighter5); color: var(--main_color); } .event_card_menu button.danger, .person_action_menu button.danger { color: var(--light_red); } .event_card_menu button.danger:hover, .person_action_menu button.danger:hover { border-color: var(--light_red_2, #f4b0b0); background: var(--light_red_4, #ffeaea); } .events_notice { margin-top: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text_color); background: var(--main_color_lighter5); } .events_notice.error { color: var(--light_red); background: #fde8e8; } .events_notice.success { color: var(--green_color); background: #e9f8ee; } .events_notice[hidden] { display: none; } .progress_viz { display: flex; align-items: center; gap: 10px; color: var(--main_color); font-variant-numeric: tabular-nums; } .progress_viz .progress_viz_text { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.2; } .progress_viz .progress_viz_text strong { color: var(--text_color); font-weight: 700; font-size: 14px; } .progress_viz .progress_viz_text span { color: var(--text_color_lighter1); font-size: 12px; } .progress_viz .progress_viz_text em { color: var(--main_color); font-style: normal; font-weight: 600; font-size: 12px; } .progress_viz_bar { flex-direction: column; align-items: stretch; gap: 6px; } .progress_viz_bar .progress_viz_track { position: relative; height: 6px; border-radius: 100px; background: var(--main_color_lighter5); overflow: hidden; } .progress_viz_bar .progress_viz_fill { position: absolute; inset: 0 auto 0 0; background: var(--main_color); border-radius: 100px; transition: width 0.25s ease; } .progress_viz_circle { align-items: center; } .progress_viz_circle .progress_viz_circle { position: relative; width: 42px; height: 42px; border-radius: 50%; background: var(--main_color_lighter5); border: 4px solid var(--main_color); display: grid; place-items: center; flex-shrink: 0; } .progress_viz_circle .progress_viz_circle::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--white_color); } .progress_viz_circle .progress_viz_circle span { position: relative; z-index: 1; font-size: 11px; font-weight: 700; color: var(--main_color); } .progress_viz_sparkline { align-items: center; } .progress_viz_sparkline .progress_viz_spark { width: 96px; height: 30px; color: var(--main_color); flex-shrink: 0; border-bottom: 1px solid var(--border_color_lighter); } .events_toolbar_right { margin-left: auto; display: flex; align-items: end; gap: 12px; } .events_toolbar_progress { display: flex; align-items: center; min-height: 38px; padding: 4px 12px; border: 1px solid var(--border_color_lighter); border-radius: 10px; background: var(--white_color); } .events_toolbar_progress[hidden] { display: none; } .events_toolbar_progress .events_toolbar_viz { min-width: 180px; max-width: 260px; } .events_contrib_btn { color: #fff; } .events_contrib_btn .events_contrib_icon { display: grid; place-items: center; color: #fff; } .events_contrib_btn .events_contrib_icon svg { display: block; width: 16px; height: 16px; fill: #fff; } .events_contrib_btn span { font-size: 15px !important; } .event_card_progress { margin-top: 4px; cursor: pointer; } .event_card_progress:hover .progress_viz_fill { filter: brightness(1.05); } .event_card_progress.progress_viz_circle { flex-direction: row; } .event_card_progress.progress_viz_circle .progress_viz_text { flex-direction: column; align-items: flex-start; gap: 2px; } .events_contrib_modal { width: min(100%, 760px); max-height: 92vh; overflow-y: auto; } .events_contrib_modal .events_contrib_event_pick { display: grid; gap: 6px; margin-bottom: 12px; } .events_contrib_modal .events_contrib_event_pick span { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text_color_lighter1); padding-left: 6px; } .events_contrib_modal .events_contrib_event_pick select { padding: 10px 12px; border: 1px solid var(--border_color_lighter); border-radius: 10px; background: var(--white_color); color: var(--text_color); } .events_contrib_modal .events_contrib_no_event { margin-top: 10px; padding: 18px; border-radius: 10px; background: var(--bg_color_darker); color: var(--text_color_lighter1); text-align: center; } .events_contrib_modal .events_contrib_no_event[hidden] { display: none; } .events_contrib_modal .events_contrib_body[hidden] { display: none; } .events_contrib_goal { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border_color_lighter); border-radius: 12px; background: var(--bg_color_darker); margin-bottom: 14px; } .events_contrib_goal .events_contrib_goal_row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; } .events_contrib_goal .events_contrib_goal_row label { display: grid; gap: 4px; } .events_contrib_goal .events_contrib_goal_row label span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text_color_lighter1); padding-left: 4px; } .events_contrib_goal .events_contrib_goal_row label input, .events_contrib_goal .events_contrib_goal_row label select { height: 42px; padding: 8px 12px; border: 1px solid var(--border_color_lighter); border-radius: 10px; background: var(--white_color); color: var(--text_color); font-size: 17px; font-weight: 600; } .events_contrib_goal .events_contrib_progress { min-height: 0; } .events_contrib_goal .events_contrib_progress .progress_viz_bar { gap: 6px; } .events_contrib_list_wrap { margin-bottom: 14px; } .events_contrib_list_wrap h3 { font-size: 14px; font-weight: 700; color: var(--text_color); text-transform: uppercase; margin-bottom: 8px; padding-left: 4px; letter-spacing: 0.02em; } .events_contrib_list { display: grid; gap: 6px; list-style: none; padding: 0; } .events_contrib_row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--border_color_lighter); border-radius: 10px; background: var(--white_color); font-size: 13px; } .events_contrib_row .events_contrib_person { color: var(--text_color); font-weight: 600; } .events_contrib_row .events_contrib_amount { color: var(--main_color); font-weight: 700; } .events_contrib_row .events_contrib_method { color: var(--text_color_lighter1); text-transform: capitalize; } .events_contrib_row .events_contrib_date { color: var(--text_color_lighter1); font-variant-numeric: tabular-nums; } .events_contrib_row .events_contrib_del { width: 28px; height: 28px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text_color_lighter1); cursor: pointer; line-height: 1; font-size: 16px; } .events_contrib_row .events_contrib_del:hover { color: var(--light_red); border-color: var(--light_red_2); background: var(--light_red_4, #ffeaea); } .events_contrib_empty { padding: 12px; border-radius: 10px; background: var(--bg_color_darker); color: var(--text_color_lighter1); text-align: center; font-size: 13px; } .events_contrib_empty[hidden] { display: none; } .events_contrib_add { padding: 14px; border: 1px dashed var(--border_color_darker); border-radius: 12px; background: var(--bg_color_darker); } .events_contrib_add h3 { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--text_color); text-transform: uppercase; padding-left: 4px; letter-spacing: 0.02em; } .events_contrib_add .events_contrib_add_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .events_contrib_add .events_contrib_add_grid label { display: grid; gap: 4px; } .events_contrib_add .events_contrib_add_grid label span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text_color_lighter1); padding-left: 4px; } .events_contrib_add .events_contrib_add_grid label input, .events_contrib_add .events_contrib_add_grid label select { height: 38px; padding: 8px 12px; border: 1px solid var(--border_color_lighter); border-radius: 10px; background: var(--white_color); color: var(--text_color); } .events_contrib_add .events_contrib_add_grid .events_contrib_anonymous { grid-column: span 1; flex-direction: row; display: flex; align-items: center; gap: 8px; padding: 10px 0 0 0; } .events_contrib_add .events_contrib_add_grid .events_contrib_anonymous input { width: auto !important; height: auto !important; } .events_contrib_add .events_contrib_add_grid .events_contrib_anonymous span { padding-left: 0; } .events_contrib_add .events_contrib_add_grid .is_disabled { opacity: 0.55; pointer-events: none; } .events_contrib_add .events_contrib_add_grid .events_contrib_note { grid-column: 1/-1; } .currencies_panel { display: grid; gap: 16px; padding: 20px; } .currencies_panel .ct_center { text-align: center; } .currencies_panel .ct_right { text-align: right; } .currencies_panel .currencies_base_field { display: grid; gap: 6px; max-width: none; padding: 14px; border: 1px solid var(--border_color_lighter); border-radius: 14px; background: var(--bg_color_darker); } .currencies_panel .currencies_base_field > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text_color_lighter1); padding-left: 2px; } .currencies_panel .currencies_base_field select { width: 100%; height: 46px; padding: 10px 14px; border: 0.0625rem solid #eaeaea; border-radius: 12px; background: var(--white_color); color: var(--text_color); font-size: 15px; font-weight: 600; cursor: pointer; } .currencies_panel .currencies_base_field select:focus { border-color: var(--secondary_color_lighter4); } .currencies_panel .currencies_base_field small { padding-left: 2px; font-size: 12px; color: var(--text_color_lighter2); } .currencies_panel .currencies_table_wrap { border: 1px solid var(--border_color); border-radius: 14px; overflow: hidden; background: var(--white_color); } .currencies_panel .currencies_table { width: 100%; border-collapse: separate; border-spacing: 0; } .currencies_panel .currencies_table th, .currencies_panel .currencies_table td { padding: 12px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border_color_lighter); vertical-align: middle; } .currencies_panel .currencies_table th { background: var(--bg_color_darker1); color: var(--text_color_lighter1); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .currencies_panel .currencies_table tbody tr { transition: background 0.12s; } .currencies_panel .currencies_table tbody tr:hover { background: var(--bg_color_darker); } .currencies_panel .currencies_table tbody tr.is_base { background: var(--main_color_lighter5); } .currencies_panel .currencies_table tbody tr:last-child td { border-bottom: none; } .currencies_panel .currencies_table .currencies_code { font-weight: 700; color: var(--text_color); letter-spacing: 0.02em; } .currencies_panel .currencies_table .currencies_rate_cell { font-variant-numeric: tabular-nums; color: var(--text_color); font-weight: 600; } .currencies_panel .currencies_table .currencies_base_badge { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 100px; background: var(--main_color); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; } .currencies_panel .currencies_table .currencies_status { display: inline-block; padding: 3px 12px; border-radius: 100px; font-size: 11px; font-weight: 700; text-transform: capitalize; } .currencies_panel .currencies_table .currencies_status_active { background: var(--main_color_lighter5); color: var(--main_color); } .currencies_panel .currencies_table .currencies_status_archived { background: var(--border_color_lighter); color: var(--text_color_lighter1); } .currencies_panel .currencies_table .currencies_row_actions { text-align: right; white-space: nowrap; } .currencies_panel .currencies_table .currencies_delete_btn { padding: 6px 12px; border: 1px solid var(--border_color_darker); border-radius: 8px; background: var(--white_color); color: var(--text_color_lighter1); cursor: pointer; font-size: 12px; font-weight: 600; transition: 0.12s; } .currencies_panel .currencies_table .currencies_delete_btn:hover { border-color: var(--light_red); color: var(--light_red); background: var(--light_red_4, #ffeaea); } .currencies_panel .currencies_add_form { padding: 18px; border: 1px solid var(--border_color_lighter); border-radius: 14px; background: var(--bg_color_darker); } .currencies_panel .currencies_add_form h3 { font-size: 12px; font-weight: 700; color: var(--text_color); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 12px; } .currencies_panel .currencies_add_form .currencies_add_grid { display: grid; grid-template-columns: 110px minmax(180px, 1fr) 110px 140px auto; gap: 12px; align-items: end; } .currencies_panel .currencies_add_form .currencies_add_grid label { display: grid; gap: 5px; } .currencies_panel .currencies_add_form .currencies_add_grid label span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text_color_lighter1); padding-left: 2px; } .currencies_panel .currencies_add_form .currencies_add_grid label input { width: 100%; height: 44px; padding: 9px 14px; border: 0.0625rem solid #eaeaea; border-radius: 12px; background: var(--white_color); color: var(--text_color); font-size: 15px; } .currencies_panel .currencies_add_form .currencies_add_grid label input::placeholder { color: var(--text_color_lighter2); } .currencies_panel .currencies_add_form .currencies_add_grid label input:focus { border-color: var(--secondary_color_lighter4); } .currencies_panel .currencies_add_form .currencies_add_btn { height: 44px; padding: 0 22px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--main_color); border-radius: 12px; background: var(--main_color); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: 0.12s; } .currencies_panel .currencies_add_form .currencies_add_btn span { font-size: 18px; line-height: 1; color: inherit; } .currencies_panel .currencies_add_form .currencies_add_btn:hover { background: var(--main_color_darker); border-color: var(--main_color_darker); } .currencies_panel .currencies_add_form .currencies_msg { margin-top: 10px; font-size: 13px; font-weight: 600; } .currencies_panel .currencies_add_form .currencies_msg:empty { display: none; } .currencies_panel .currencies_add_form .currencies_msg.error { color: var(--light_red); } .currencies_panel .currencies_add_form .currencies_msg.success { color: var(--green_color); } .events_modal_backdrop { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 42px 16px; overflow-y: auto; background: rgba(0, 0, 0, 0.55); } .events_modal { width: min(100%, 620px); position: relative; display: grid; gap: 14px; padding: 20px; border: 1px solid var(--border_color_lighter); border-radius: 14px; background: var(--white_color); } .events_modal h2 { color: var(--text_color); font-size: 22px; } .events_modal form { display: grid; gap: 12px; } .events_modal label { display: grid; gap: 6px; } .events_modal label span { display: flex; justify-content: space-between; gap: 8px; color: var(--text_color_lighter1); font-size: 12px; font-weight: 700; text-transform: uppercase; } .events_modal label em { color: var(--light_red); font-style: normal; font-size: 10px; } .events_modal input, .events_modal textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--white_color); color: var(--text_color); resize: vertical; } .events_modal input:focus, .events_modal textarea:focus { border-color: var(--main_color_lighter2); } .events_image_field { display: grid; gap: 6px; } .events_image_field > span { display: flex; justify-content: space-between; gap: 8px; color: var(--text_color_lighter1); font-size: 12px; font-weight: 700; text-transform: uppercase; } .events_image_drop { position: relative; min-height: 200px; display: grid !important; place-items: center; padding: 26px; overflow: hidden; border: 2px dashed var(--main_color_lighter2); border-radius: 12px; background: var(--main_color_lighter5); cursor: pointer; } .events_image_drop input { display: none; } .events_image_drop img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .events_image_drop img[hidden] { display: none; } .events_image_drop .events_image_hint { position: relative; z-index: 1; display: grid; place-items: center; gap: 8px; text-align: center; text-transform: none !important; } .events_image_drop .events_image_hint .events_image_icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--main_color_lighter3); border-radius: 12px; color: var(--main_color); background: var(--white_color); } .events_image_drop .events_image_hint .events_image_icon::before { content: "+"; display: block; color: var(--main_color); font-size: 28px; font-weight: 700; line-height: 42px; text-align: center; } .events_image_drop .events_image_hint strong { color: var(--text_color); font-size: 17px; line-height: 1.35; } .events_image_drop .events_image_hint small { color: var(--text_color_lighter1); line-height: 1.4; } .events_image_drop.is_dragging { border-style: solid; background: var(--main_color_lighter4); } .events_detail_modal { padding: 0; overflow: hidden; } .events_detail_modal .events_modal_close { background: var(--white_color); } .events_detail_modal .events_detail_image { width: 100%; max-height: 420px; display: block; object-fit: cover; background: var(--bg_color_darker); } .events_detail_modal .events_detail_body { display: grid; gap: 12px; padding: 10px 0; } .events_detail_modal .events_detail_body dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; } .events_detail_modal .events_detail_body dl div { padding: 10px; border: 1px solid var(--border_color_lighter); border-radius: 10px; background: var(--bg_color_darker); } .events_detail_modal .events_detail_body dl dt { color: var(--text_color_lighter1); font-size: 11px; font-weight: 700; text-transform: uppercase; } .events_detail_modal .events_detail_body dl dd { margin: 3px 0 0; color: var(--text_color); font-weight: 600; } .events_detail_modal .events_detail_body p { color: var(--text_color_lighter1); line-height: 1.55; } .events_form_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .checklist_section_head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .checklist_section_head h3 { font-size: 16px; } .checklist_form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; } .checklist_form label { min-width: 0; } .checklist_form[hidden] { display: none; } .checklist_form_actions { grid-column: 1/-1; display: flex; justify-content: flex-end; gap: 9px; } .events_modal_close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 1px solid var(--border_color); border-radius: 50%; background: transparent; color: var(--text_color); cursor: pointer; font-size: 22px; line-height: 1; } .events_modal_actions { display: flex; justify-content: flex-end; gap: 10px; } .events_primary_btn, .events_secondary_btn { min-height: 38px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--main_color); background: var(--main_color); color: #fff; cursor: pointer; font-weight: 700; } .events_primary_btn.danger, .events_secondary_btn.danger { border-color: var(--light_red); background: var(--light_red); } .events_secondary_btn { border-color: var(--border_color_darker); background: transparent; color: var(--text_color); } .events_confirm_modal p { color: var(--text_color_lighter1); line-height: 1.45; } /* ============================================================ Reusable page components (header + toolbar) Used by the gallery, events, and any future listing page. ============================================================ */ .page_wrap { width: min(1400px, 100% - 96px); margin: 0 auto; padding: 24px 0 48px; } @media (max-width: 760px) { .page_wrap { width: calc(100% - 28px); } } @media (max-width: 520px) { .page_wrap { width: calc(100% - 20px); } } .page_header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; padding: 0 0 0 8px; } .page_header h1 { font-size: 30px; color: var(--text_color); } .page_header p { margin-top: 5px; color: var(--text_color_lighter1); } .page_header .page_description { display: none; } .page_header .page_header_actions { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: 10px; flex: 1; } .page_header .page_header_actions .page_search { display: grid; flex: 1 1 280px; gap: 6px; width: min(34vw, 420px); min-width: 220px; max-width: 420px; } .page_header .page_header_actions .page_search span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text_color_lighter1); } .page_header .page_header_actions .page_search input { padding: 12px 16px; border: 0.0625rem solid #eaeaea; border-radius: 12px; background: var(--white_color); color: var(--text_color); } .page_header .page_header_actions .page_search input::placeholder { font-weight: 300; color: #aaa; } .page_header .page_header_actions .page_search input:focus, .page_header .page_header_actions .page_search input:focus-within { border-color: var(--secondary_color_lighter4); } .page_header .page_header_actions .page_view_switch { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); } .page_header .page_header_actions .page_view_switch button { min-height: 32px; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text_color_lighter1); font-weight: 600; font-size: 13px; cursor: pointer; } .page_header .page_header_actions .page_view_switch button.active, .page_header .page_header_actions .page_view_switch button:hover { background: var(--main_color_lighter5); border-color: var(--main_color_lighter4); color: var(--main_color); } .page_title_row { display: flex; align-items: center; gap: 10px; } .page_info_btn { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border_color); border-radius: 50%; background: var(--white_color); color: var(--main_color); cursor: help; } .page_info_btn span { color: inherit; font-size: 15px; font-weight: 700; line-height: 1; } .page_info_btn small { position: absolute; top: calc(100% + 8px); left: 0; width: min(280px, 76vw); display: none; padding: 10px 12px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--white_color); color: var(--text_color); font-size: 13px; font-weight: 500; line-height: 1.35; text-align: left; z-index: 10; } .page_info_btn:hover, .page_info_btn:focus-visible { border-color: var(--main_color_lighter2); } .page_info_btn:hover small, .page_info_btn:focus-visible small { display: block; } .page_add_btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 11px 14px; border-radius: 12px; background: var(--main_color); border: 1px solid var(--main_color); font-weight: 500; font-size: 15px; color: #fff; white-space: nowrap; cursor: pointer; } .page_add_btn span { color: inherit; font-size: 18px; line-height: 1; } .page_add_btn:hover { background: var(--main_color_darker); border-color: var(--main_color_darker); } .page_toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 12px; border: 1px solid var(--border_color_lighter); border-radius: 12px; background: var(--white_color); } .page_toolbar label { display: grid; gap: 6px; } .page_toolbar label .filter_title { padding: 0 0 0 5px; } .page_toolbar label span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text_color_lighter1); } .page_toolbar input, .page_toolbar select { height: 38px; padding: 8px 12px; border: 0.0625rem solid #eaeaea; border-radius: 10px; background: var(--white_color); color: var(--text_color); } .page_toolbar input:focus, .page_toolbar select:focus { border-color: var(--secondary_color_lighter4); } .page_toolbar .page_filters > span { display: block; padding: 0 0 8px 6px; align-self: center; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text_color_lighter1); } .page_toolbar .page_filters .filter_buttons { gap: 6px; display: flex; align-items: end; } .page_toolbar .page_filters .filter_buttons button { height: 38px; padding: 6px 12px; border: 1px solid var(--border_color); border-radius: 10px; background: transparent; color: var(--text_color_lighter1); font-size: 14px; font-weight: 500; cursor: pointer; } .page_toolbar .page_filters .filter_buttons button.active, .page_toolbar .page_filters .filter_buttons button:hover { background: var(--main_color_lighter5); border-color: var(--main_color_lighter4); color: var(--main_color); } .page_toolbar .page_count { height: 38px; display: flex; align-items: center; white-space: nowrap; color: var(--text_color_lighter1); font-weight: 600; } .gallery_page { margin: 0 auto; padding: 24px 0 48px; } .gallery_page .page_toolbar { position: relative; display: grid; grid-template-columns: auto minmax(180px, auto) minmax(130px, auto) minmax(130px, auto) auto auto; padding-right: 62px; } .gallery_page .gallery_header_actions { display: flex; align-items: end; justify-content: flex-end; gap: 10px; flex: 1; } .gallery_page .gallery_add_btn, .gallery_page .gallery_upload_btn, .gallery_page .gallery_secondary_btn { min-height: 38px; padding: 11px 14px; border-radius: 12px; background: var(--main_color); border: 1px solid var(--main_color); font-weight: 500; font-size: 15px; color: #fff; cursor: pointer; } .gallery_page .gallery_add_btn:hover, .gallery_page .gallery_upload_btn:hover, .gallery_page .gallery_secondary_btn:hover { background: var(--main_color_darker); border-color: var(--main_color_darker); } .gallery_page .gallery_add_btn.cancel, .gallery_page .gallery_upload_btn.cancel, .gallery_page .gallery_secondary_btn.cancel { background: var(--bg_color); border-color: var(--border_color_darker); } .gallery_page .gallery_secondary_btn { background: transparent; border-color: var(--border_color_darker); color: var(--text_color); } .gallery_page .gallery_secondary_btn:hover { background: var(--bg_color_darker1); border-color: var(--main_color_lighter2); color: var(--main_color); } .gallery_page .gallery_upload_panel { display: grid; gap: 14px; margin-bottom: 18px; padding: 16px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); } .gallery_page .gallery_upload_panel[hidden] { display: none; } .gallery_page .gallery_upload_panel label { display: grid; gap: 8px; } .gallery_page .gallery_upload_panel label span { display: flex; justify-content: space-between; gap: 10px; padding: 0 8px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0; color: var(--text_color_lighter1); } .gallery_page .gallery_upload_panel label span em { font-style: normal; text-transform: capitalize; color: var(--text_color_lighter2); } .gallery_page .gallery_upload_panel label input[type=text], .gallery_page .gallery_upload_panel label input[type=date] { width: 100%; padding: 14px 16px; border: 0.0625rem solid #eaeaea; border-radius: 12px; background: var(--white_color); color: var(--text_color); } .gallery_page .gallery_upload_panel label input[type=text]:focus, .gallery_page .gallery_upload_panel label input[type=date]:focus { border-color: var(--secondary_color_lighter4); } .gallery_page .gallery_upload_top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .gallery_page .gallery_dropzone { display: grid; gap: 14px; min-height: 190px; padding: 26px; border: 2px dashed var(--main_color_lighter2); border-radius: 12px; background: var(--main_color_lighter5); text-align: center; } .gallery_page .gallery_dropzone .gallery_dropzone_prompt { min-height: 134px; place-items: center; justify-content: center; cursor: pointer; } .gallery_page .gallery_dropzone input { display: none; } .gallery_page .gallery_dropzone .gallery_drop_icon { position: relative; display: block; width: 44px; height: 44px; border: 1px solid var(--main_color_lighter2); border-radius: 12px; color: var(--main_color); font-size: 0; line-height: 1; text-align: center; } .gallery_page .gallery_dropzone .gallery_drop_icon::before { content: "+"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--main_color); font-size: 28px; font-weight: 700; line-height: 1; } .gallery_page .gallery_dropzone strong { color: var(--text_color); font-size: 17px; } .gallery_page .gallery_dropzone small { color: var(--text_color_lighter1); line-height: 1.4; } .gallery_page .gallery_dropzone.dragging { border-style: solid; background: var(--main_color_lighter4); } .gallery_page .gallery_dropzone.has-files { min-height: 0; padding: 18px; } .gallery_page .gallery_selected_files { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; width: 100%; } .gallery_page .gallery_selected_files[hidden] { display: none; } .gallery_page .gallery_queue_actions { display: flex; justify-content: center; gap: 8px; width: 100%; } .gallery_page .gallery_queue_actions[hidden] { display: none; } .gallery_page .gallery_selected_file { position: relative; overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--border_color); border-radius: 10px; background: var(--bg_color_darker1); } .gallery_page .gallery_selected_file img, .gallery_page .gallery_selected_file video { display: block; width: 100%; height: 100%; object-fit: cover; } .gallery_page .gallery_selected_file_name { position: absolute; right: 0; bottom: 0; left: 0; padding: 7px 9px; background: rgba(15, 23, 42, 0.78); color: #fff; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gallery_page .gallery_selected_file_remove { position: absolute; top: 7px; right: 7px; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(15, 23, 42, 0.82); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; } .gallery_page .gallery_selected_file_remove:hover, .gallery_page .gallery_selected_file_remove:focus-visible { background: var(--light_red); } .gallery_page .gallery_upload_progress { height: 8px; overflow: hidden; border-radius: 999px; background: var(--bg_color_darker1); } .gallery_page .gallery_upload_progress span { display: block; width: 0%; height: 100%; background: var(--main_color); transition: width 0.18s; } .gallery_page .gallery_upload_progress[hidden] { display: none; } .gallery_page .gallery_upload_status { min-height: 18px; font-size: 13px; font-weight: 700; } .gallery_page .gallery_upload_status.error { color: var(--light_red); } .gallery_page .gallery_upload_status.success { color: var(--green_color); } .gallery_page .gallery_upload_status[hidden] { display: none; } .gallery_page .gallery_upload_actions { display: flex; justify-content: flex-end; gap: 10px; } .gallery_page .gallery_toolbar_title { align-self: center; color: var(--text_color_lighter1); font-size: 11px; font-weight: 700; text-transform: uppercase; } .gallery_page .gallery_search { display: grid; gap: 6px; min-width: min(34vw, 420px); } .gallery_page .gallery_search span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text_color_lighter1); } .gallery_page .gallery_search input { padding: 12px 16px; border: 0.0625rem solid #eaeaea; border-radius: 12px; background: var(--white_color); color: var(--text_color); } .gallery_page .gallery_search input::placeholder { font-weight: 300; color: #aaa; } .gallery_page .gallery_search input:focus, .gallery_page .gallery_search input:focus-within { border-color: var(--secondary_color_lighter4); } .gallery_page .gallery_view_switch { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); } .gallery_page .gallery_view_switch button { min-height: 32px; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text_color_lighter1); font-weight: 600; font-size: 13px; cursor: pointer; } .gallery_page .gallery_view_switch button.active, .gallery_page .gallery_view_switch button:hover { background: var(--main_color_lighter5); border-color: var(--main_color_lighter4); color: var(--main_color); } .gallery_page .gallery_album_control { display: grid !important; grid-template-columns: minmax(0, 1fr) 38px; gap: 6px !important; } .gallery_page .gallery_album_control select { font-size: 14px; } .gallery_page .gallery_album_control button { height: 38px; border-radius: 10px; background: var(--white_color); border: 1px solid var(--border_color); color: var(--text_color_lighter1); font-size: 18px; cursor: pointer; } .gallery_page .gallery_album_control button:hover { border-color: var(--main_color_lighter2); color: var(--main_color); } .gallery_page .gallery_filters > span { display: block; padding: 0 0 8px 6px; align-self: center; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text_color_lighter1); } .gallery_page .gallery_filters .filter_buttons { gap: 6px; display: flex; align-items: end; } .gallery_page .gallery_filters .filter_buttons button { height: 38px; padding: 6px 12px; border: 1px solid var(--border_color); border-radius: 10px; background: transparent; color: var(--text_color_lighter1); font-size: 14px; font-weight: 500; cursor: pointer; } .gallery_page .gallery_filters .filter_buttons button.active, .gallery_page .gallery_filters .filter_buttons button:hover { background: var(--main_color_lighter5); border-color: var(--main_color_lighter4); color: var(--main_color); } .gallery_page .gallery_count { height: 38px; display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text_color_lighter1); font-weight: 600; } .gallery_page .gallery_count_group { display: flex; align-items: flex-end; } .gallery_page .gallery_album_public_badge { align-self: end; height: 38px; padding: 0 10px; border-radius: 10px; justify-content: center; } .gallery_page .gallery_album_public_badge[hidden] { display: none; } .gallery_page .gallery_toolbar_album_menu { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--white_color); color: var(--text_color_lighter1); cursor: pointer; font-size: 20px; line-height: 1; } .gallery_page .gallery_toolbar_album_menu[hidden] { display: none; } .gallery_page .gallery_toolbar_album_menu:hover { border-color: var(--main_color_lighter2); color: var(--main_color); } .gallery_page .gallery_grid { display: grid; grid-template-columns: repeat(var(--gallery-items-per-row, 5), minmax(0, 1fr)); gap: 14px; margin: 20px 0 0 0; padding-bottom: 100px; } .gallery_page .gallery_grid[hidden] { display: none; } .gallery_page .gallery_grid.is_grouped { display: block; } .gallery_page .gallery_grid.is_grouped .gallery_album_group { position: relative; } .gallery_page .gallery_grid.is_grouped .gallery_album_group + .gallery_album_group { margin-top: 30px; } .gallery_page .gallery_grid.is_grouped .gallery_album_group_header { position: sticky; top: 3.4375rem; z-index: 40; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; padding: 4px 0; border-bottom: 1px solid var(--border_color); background: var(--gallery_main_surface); } .gallery_page .gallery_grid.is_grouped .gallery_album_group_header h2 { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text_color); font-size: 16px; font-weight: 500; } .gallery_page .gallery_grid.is_grouped .gallery_album_group_header .gallery_album_group_public_badge { flex: 0 0 auto; min-height: 22px; padding: 2px 8px; font-size: 11px; } .gallery_page .gallery_grid.is_grouped .gallery_album_group_header .gallery_album_group_public_badge[hidden] { display: none; } .gallery_page .gallery_grid.is_grouped .gallery_album_selection_controls, .gallery_page .gallery_grid.is_grouped .gallery_album_bulk_actions { display: flex; align-items: center; gap: 8px; } .gallery_page .gallery_grid.is_grouped .gallery_album_select_toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--text_color_lighter1); font-size: 13px; font-weight: 700; cursor: pointer; } .gallery_page .gallery_grid.is_grouped .gallery_album_select_toggle:has(input:disabled) { color: var(--text_color_lighter2); cursor: not-allowed; } .gallery_page .gallery_grid.is_grouped .gallery_album_select_toggle input { position: absolute; opacity: 0; pointer-events: none; } .gallery_page .gallery_grid.is_grouped .gallery_album_select_toggle i { position: relative; width: 36px; height: 22px; border: 1px solid var(--border_color_darker); border-radius: 999px; background: var(--bg_color_darker1); transition: background-color 0.18s ease, border-color 0.18s ease; } .gallery_page .gallery_grid.is_grouped .gallery_album_select_toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text_color_lighter2); transition: left 0.18s ease, background-color 0.18s ease; } .gallery_page .gallery_grid.is_grouped .gallery_album_select_toggle input:checked + i { border-color: var(--main_color); background: var(--main_color); } .gallery_page .gallery_grid.is_grouped .gallery_album_select_toggle input:checked + i::after { left: 17px; background: #fff; } .gallery_page .gallery_grid.is_grouped .gallery_album_select_toggle input:focus-visible + i { outline: 3px solid var(--secondary_color_lighter4); outline-offset: 2px; } .gallery_page .gallery_grid.is_grouped .gallery_album_select_toggle input:disabled + i { opacity: 0.5; cursor: not-allowed; } .gallery_page .gallery_grid.is_grouped .gallery_album_bulk_actions { padding-right: 10px; border-right: 1px solid var(--border_color); } .gallery_page .gallery_grid.is_grouped .gallery_album_bulk_actions[hidden] { display: none; } .gallery_page .gallery_grid.is_grouped .gallery_album_bulk_actions .gallery_selected_count { color: var(--text_color_lighter1); font-size: 12px; white-space: nowrap; } .gallery_page .gallery_grid.is_grouped .gallery_album_bulk_actions .gallery_selected_count b { color: var(--text_color); } .gallery_page .gallery_grid.is_grouped .gallery_album_bulk_actions button { min-height: 36px; padding: 7px 11px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); cursor: pointer; font-size: 13px; font-weight: 700; } .gallery_page .gallery_grid.is_grouped .gallery_album_bulk_actions button:hover, .gallery_page .gallery_grid.is_grouped .gallery_album_bulk_actions button:focus-visible { border-color: var(--main_color_lighter2); color: var(--main_color); } .gallery_page .gallery_grid.is_grouped .gallery_album_bulk_actions button.danger { border-color: color-mix(in srgb, var(--light_red) 40%, var(--border_color)); color: var(--light_red); } .gallery_page .gallery_grid.is_grouped .gallery_album_group_menu { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border_color); border-radius: 10px; background: var(--white_color); color: var(--text_color_lighter1); cursor: pointer; font-size: 20px; line-height: 1; } .gallery_page .gallery_grid.is_grouped .gallery_album_group_menu:hover, .gallery_page .gallery_grid.is_grouped .gallery_album_group_menu:focus-visible { border-color: var(--main_color_lighter2); color: var(--main_color); } .gallery_page .gallery_grid.is_grouped .gallery_album_group_grid { display: grid; grid-template-columns: repeat(var(--gallery-items-per-row, 5), minmax(0, 1fr)); gap: 14px; } .gallery_page[data-gallery-view=list] .gallery_grid { grid-template-columns: 1fr; } .gallery_page[data-gallery-view=list] .gallery_grid.is_grouped .gallery_album_group_grid { grid-template-columns: 1fr; } .gallery_page[data-gallery-view=list] .gallery_grid .gallery_card { display: grid; grid-template-columns: 180px minmax(0, 1fr); } .gallery_page[data-gallery-view=list] .gallery_grid .gallery_card .gallery_card_image { height: 100%; aspect-ratio: 16/10; border-radius: 8px 0 0 8px; } .gallery_page[data-gallery-view=list] .gallery_grid .gallery_card .gallery_card_body { display: grid; align-content: start; gap: 6px; padding: 14px 18px; } .gallery_page[data-gallery-view=list] .gallery_grid .gallery_card .gallery_card_body .gallery_card_title { white-space: normal; font-size: 16px; font-weight: 600; } .gallery_page[data-gallery-view=list] .gallery_grid .gallery_card .gallery_card_body .gallery_card_album { display: inline-block; justify-self: start; padding: 2px 8px; border-radius: 100px; background: var(--main_color_lighter5); color: var(--main_color); font-weight: 600; } .gallery_page[data-gallery-view=list] .gallery_grid .gallery_card .gallery_card_body .gallery_card_description { white-space: normal; color: var(--text_color_lighter1); font-weight: 400; } .gallery_page[data-gallery-view=list] .gallery_grid .gallery_card .gallery_card_body .gallery_card_meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 18px; margin: 6px 0 0 0; padding: 10px 0 0 0; border-top: 1px dashed var(--border_color_lighter); } .gallery_page[data-gallery-view=list] .gallery_grid .gallery_card .gallery_card_body .gallery_card_meta div { display: grid; gap: 2px; min-width: 0; } .gallery_page[data-gallery-view=list] .gallery_grid .gallery_card .gallery_card_body .gallery_card_meta dt { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text_color_lighter2); } .gallery_page[data-gallery-view=list] .gallery_grid .gallery_card .gallery_card_body .gallery_card_meta dd { margin: 0; font-size: 13px; color: var(--text_color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gallery_page[data-gallery-view=masonry] .gallery_grid { column-count: var(--gallery-items-per-row, 5); column-gap: 14px; display: block; } .gallery_page[data-gallery-view=masonry] .gallery_grid.is_grouped { column-count: auto; } .gallery_page[data-gallery-view=masonry] .gallery_grid.is_grouped .gallery_album_group_grid { display: block; column-count: var(--gallery-items-per-row, 5); column-gap: 14px; } .gallery_page[data-gallery-view=masonry] .gallery_grid .gallery_card { display: inline-block; width: 100%; margin: 0 0 14px; break-inside: avoid; } .gallery_page[data-gallery-view=masonry] .gallery_grid .gallery_card .gallery_card_image { aspect-ratio: auto; } .gallery_page[data-gallery-view=masonry] .gallery_grid .gallery_card .gallery_card_image img { height: auto; } .gallery_page[data-gallery-show-card-body=no]:not([data-gallery-view=list]) .gallery_grid:not(.is_grouped):not([data-gallery-show-media-meta]) > .gallery_card .gallery_card_body { display: none; } .gallery_page:not([data-gallery-view=list]) .gallery_card .gallery_card_meta { display: none; } .gallery_page[data-gallery-can-manage=no] .gallery_card_menu_btn { display: none; } .gallery_page .gallery_card { position: relative; overflow: visible; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); } .gallery_page .gallery_card.is_selected { border-color: var(--main_color); outline: 2px solid var(--main_color_lighter4); outline-offset: 1px; } .gallery_page .gallery_card .gallery_media_select { position: absolute; top: 8px; left: 8px; z-index: 4; display: grid; place-items: center; width: 34px; height: 34px; cursor: pointer; } .gallery_page .gallery_card .gallery_media_select input { position: absolute; opacity: 0; } .gallery_page .gallery_card .gallery_media_select span { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid rgba(255, 255, 255, 0.94); border-radius: 7px; background: rgba(0, 0, 0, 0.48); } .gallery_page .gallery_card .gallery_media_select input:checked + span { border-color: var(--main_color); background: var(--main_color); } .gallery_page .gallery_card .gallery_media_select input:checked + span::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; rotate: -45deg; margin-top: -2px; } .gallery_page .gallery_card .gallery_media_select input:focus-visible + span { outline: 3px solid var(--secondary_color_lighter4); outline-offset: 2px; } .gallery_page .gallery_card .gallery_card_image { position: relative; width: 100%; aspect-ratio: 4/3; padding: 0; border: none; border-radius: 8px 8px 0 0; background: var(--bg_color_darker1); overflow: hidden; cursor: pointer; } .gallery_page .gallery_card .gallery_card_image img { width: 100%; height: 100%; object-fit: cover; } .gallery_page .gallery_card .gallery_card_image .gallery_video_badge { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, 0.68); color: #fff; font-size: 13px; } .gallery_page .gallery_card .gallery_card_menu_btn { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 50%; background: rgba(0, 0, 0, 0.42); color: #fff; cursor: pointer; font-size: 18px; line-height: 1; } .gallery_page .gallery_card:not(:has(.gallery_card_body)) .gallery_card_image { border-radius: 12px; } .gallery_page .gallery_card .gallery_card_body { display: grid; gap: 4px; padding: 10px; } .gallery_page .gallery_card .gallery_card_body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text_color); font-size: 14px; } .gallery_page .gallery_card .gallery_card_body span { color: var(--text_color_lighter1); font-size: 12px; } .gallery_page .gallery_card .gallery_card_body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--main_color); font-size: 12px; font-weight: 600; } .gallery_page .gallery_navigation { display: flex; justify-content: center; margin: 10px 0; } .gallery_page .gallery_show_more_btn, .gallery_page .gallery_pager button { min-height: 38px; padding: 8px 14px; border: 1px solid var(--main_color_lighter2); border-radius: 12px; background: var(--white_color); color: var(--main_color); font-weight: 600; cursor: pointer; } .gallery_page .gallery_show_more_btn:hover, .gallery_page .gallery_pager button:hover { background: var(--main_color_lighter5); } .gallery_page .gallery_show_more_btn:disabled, .gallery_page .gallery_pager button:disabled { opacity: 0.45; cursor: default; } .gallery_page .gallery_pager { display: flex; align-items: center; gap: 12px; } .gallery_page .gallery_pager span { color: var(--text_color_lighter1); font-weight: 600; } .gallery_page:not([data-gallery-view=list]) .gallery_album_group[data-gallery-show-media-meta=no] .gallery_card .gallery_card_body, .gallery_page:not([data-gallery-view=list]) .gallery_grid[data-gallery-show-media-meta=no] > .gallery_card .gallery_card_body { display: none; } .gallery_page .gallery_add_files_form { margin-bottom: 0; } .gallery_page .gallery_add_files_form .gallery_upload_top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery_page:not([data-gallery-view=list]) .gallery_album_group[data-gallery-show-media-meta=no] .gallery_card .gallery_card_image, .gallery_page:not([data-gallery-view=list]) .gallery_grid[data-gallery-show-media-meta=no] > .gallery_card .gallery_card_image { border-radius: 12px; } .gallery_page:not([data-gallery-view=list]) .gallery_album_group[data-gallery-show-media-titles=no] .gallery_card_title, .gallery_page:not([data-gallery-view=list]) .gallery_grid[data-gallery-show-media-titles=no] > .gallery_card .gallery_card_title, .gallery_page:not([data-gallery-view=list]) .gallery_album_group[data-gallery-show-album-name=no] .gallery_card_album, .gallery_page:not([data-gallery-view=list]) .gallery_grid[data-gallery-show-album-name=no] > .gallery_card .gallery_card_album, .gallery_page:not([data-gallery-view=list]) .gallery_album_group[data-gallery-show-media-dates=no] .gallery_card_date, .gallery_page:not([data-gallery-view=list]) .gallery_grid[data-gallery-show-media-dates=no] > .gallery_card .gallery_card_date { display: none; } .gallery_page .gallery_show_more_btn { margin-top: 30px; } .gallery_page .gallery_infinite_sentinel { width: 100%; height: 1px; } .gallery_page .gallery_empty { display: block; align-content: center; min-height: 220px; } .gallery_page .gallery_empty strong { color: #aaa; font-size: 22px; } .gallery_page .gallery_empty span { color: #c5c5c5; } .gallery_page .gallery_empty[hidden] { display: none; } .gallery_card_menu, .gallery_dialog { border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); } .gallery_card_menu { position: absolute; gap: 4px; top: 44px; right: 8px; width: 160px; padding: 6px; display: grid; z-index: 130; } .gallery_card_menu button { width: 100%; padding: 9px 10px; border: none; border-radius: 6px; background: transparent; color: var(--text_color); text-align: left; cursor: pointer; font-size: 14px; font-weight: 600; } .gallery_card_menu button:hover { background: var(--bg_color_darker1); } .gallery_card_menu button.danger { color: var(--light_red); } .gallery_dialog_backdrop { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 58px 16px 24px; overflow-y: auto; background: rgba(0, 0, 0, 0.55); } .gallery_dialog { width: min(640px, 100%); padding: 18px; position: relative; } .gallery_dialog h2 { margin-bottom: 14px; color: var(--text_color); } .gallery_dialog .gallery_dialog_close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 1px solid var(--border_color); border-radius: 50%; background: var(--bg_color); color: var(--text_color); cursor: pointer; } .gallery_public_share_dialog { width: min(760px, 100%); } .gallery_dialog .gallery_public_share_form { display: grid; gap: 14px; width: 100% !important; max-width: 100%; max-height: none; overflow: visible; padding: 0 !important; border: 0; background: transparent; } .gallery_dialog .gallery_public_share_form [hidden] { display: none !important; } .gallery_dialog .gallery_public_share_form .public_share_manager { margin-bottom: 0; } .gallery_dialog .gallery_public_share_form .public_share_field { cursor: default; } .gallery_dialog .gallery_public_share_form .public_share_options { margin: 0 0 4px; } .gallery_dialog .gallery_public_share_form .public_share_link { margin-top: 0; } .gallery_dialog .gallery_public_share_form .gallery_dialog_hint { min-height: 0; margin: -4px 0 0; } .gallery_dialog .gallery_public_share_form .gallery_dialog_actions { align-items: center; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--border_color); } .gallery_dialog .gallery_public_share_form .gallery_dialog_actions .danger { margin-right: auto; } .gallery_public_share_context { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 14px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--main_color_lighter4); border-radius: 8px; background: var(--main_color_lighter5); } .gallery_public_share_context > .gallery_album_thumbs { width: 104px; height: 78px; } .gallery_public_share_context .gallery_public_share_context_text { display: grid; gap: 4px; } .gallery_public_share_context .gallery_public_share_context_text > span { color: var(--text_color_lighter1); font-size: 11px; font-weight: 700; text-transform: uppercase; } .gallery_public_share_context strong { overflow: hidden; color: var(--text_color); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; } .gallery_public_share_context small { color: var(--text_color_lighter1); line-height: 1.4; } .gallery_assign_album { display: grid; gap: 14px; } .gallery_assign_album [hidden] { display: none; } .gallery_assign_preview { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "image label" "image title" "image type"; align-items: center; gap: 3px 12px; padding: 10px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--bg_color); } .gallery_assign_preview img { grid-area: image; width: 76px; height: 62px; border-radius: 8px; object-fit: cover; background: var(--bg_color_darker1); } .gallery_assign_preview span { grid-area: label; color: var(--text_color_lighter1); font-size: 11px; font-weight: 700; text-transform: uppercase; } .gallery_assign_preview strong { grid-area: title; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text_color); } .gallery_assign_preview small { grid-area: type; color: var(--main_color); font-size: 12px; font-weight: 700; text-transform: uppercase; } .gallery_album_tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; border: 1px solid var(--border_color); border-radius: 14px; background: var(--bg_color_darker1); } .gallery_album_tabs button { min-height: 38px; background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--text_color_lighter1); cursor: pointer; font-weight: 700; } .gallery_album_tabs button.active, .gallery_album_tabs button:hover { background: var(--white_color); border-color: var(--main_color_lighter3); color: var(--main_color); } .gallery_album_search { display: grid; gap: 6px; margin: 10px 0 0 0; } .gallery_album_search span { padding: 2px 6px; font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--text_color_lighter1); } .gallery_album_search input { width: 100%; padding: 14px 16px; border: 0.0625rem solid #eaeaea; border-radius: 12px; background: var(--white_color); color: var(--text_color); } .gallery_album_search input::placeholder { font-weight: 300; color: #aaa; } .gallery_album_search input:focus, .gallery_album_search input:focus-within { border-color: var(--secondary_color_lighter4); } .gallery_album_grid { overflow-y: auto; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: min(360px, 45vh); margin: 8px 0 0 0; padding-right: 3px; } .gallery_album_card { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); color: var(--text_color); cursor: pointer; text-align: left; } .gallery_album_card:hover { background: var(--main_color_lighter5); border-color: var(--main_color_lighter3); } .gallery_album_card.already_added, .gallery_album_card:disabled { opacity: 0.58; cursor: default; } .gallery_album_card.already_added:hover, .gallery_album_card:disabled:hover { border-color: var(--border_color); background: var(--white_color); } .gallery_album_card strong { padding: 5px 5px 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gallery_album_card small { padding: 0 0 0 5px; font-size: 12px; color: var(--text_color_lighter1); } .gallery_album_manage_card { position: relative; padding: 0; cursor: default; } .gallery_album_manage_card .gallery_album_card_main { display: grid; gap: 7px; width: 100%; padding: 10px; border: 0; border-radius: inherit; background: transparent; color: inherit; cursor: pointer; text-align: left; } .gallery_album_manage_card .album_name { display: flex; align-items: center; gap: 6px; padding-right: 34px; } .gallery_album_card_menu_btn { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 8px; background: rgba(0, 0, 0, 0.56); color: #fff; cursor: pointer; font-size: 18px; line-height: 1; } .gallery_album_action_menu { position: fixed; z-index: calc(var(--app_overlay_z) + 1); display: grid; gap: 3px; width: 190px; padding: 6px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .gallery_album_action_menu button { width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text_color); cursor: pointer; font-size: 14px; font-weight: 600; text-align: left; } .gallery_album_action_menu button:hover { background: var(--bg_color_darker1); color: var(--main_color); } .gallery_album_action_menu button.danger { color: var(--light_red); } .gallery_album_thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; height: 120px; overflow: hidden; border-radius: 8px; background: var(--bg_color_darker1); } .gallery_album_thumbs img { width: 100%; height: 100%; min-height: 0; object-fit: cover; } .gallery_album_thumbs .gallery_album_empty_thumb { grid-column: 1/-1; display: grid; place-items: center; color: var(--main_color); font-size: 24px; font-weight: 700; } .gallery_album_loading, .gallery_album_empty { grid-column: 1/-1; padding: 18px; border: 1px solid var(--border_color_lighter); border-radius: 12px; background: var(--white_color); color: #c5c5c5; text-align: center; font-style: italic; } .gallery_edit_form { display: grid; gap: 12px; } .gallery_edit_form label { display: grid; gap: 6px; } .gallery_edit_form label span { color: var(--text_color_lighter1); font-size: 12px; font-weight: 700; text-transform: uppercase; } .gallery_edit_form input, .gallery_edit_form textarea { width: 100%; padding: 12px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); color: var(--text_color); } .gallery_edit_form textarea { min-height: 100px; resize: vertical; } .gallery_edit_form .gallery_form_divider { width: 100%; margin: 2px 0; border: 0; border-top: 1px solid var(--border_color); } .gallery_dialog_wide { width: min(1080px, 100%); } .record_link_manager { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border_color_lighter); border-radius: 8px; background: var(--bg_color); } .record_link_manager h3 { margin: 0; color: var(--text_color); font-size: 14px; } .record_link_group { display: grid; gap: 8px; } .record_link_group strong { color: var(--text_color_lighter1); font-size: 12px; text-transform: uppercase; } .record_link_chips { display: flex; flex-wrap: wrap; gap: 6px; } .record_link_chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 9px; border: 1px solid var(--border_color); border-radius: 999px; background: var(--white_color); color: var(--text_color); cursor: pointer; } .record_link_chip i { color: var(--light_red); font-style: normal; font-weight: 700; } .record_link_add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .record_link_add select { min-width: 0; padding: 9px 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); } .record_link_actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .record_link_choice { display: grid; gap: 8px; } .record_link_choice button { padding: 10px 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); text-align: left; cursor: pointer; } .record_link_choice button:hover { border-color: var(--main_color_lighter2); color: var(--main_color); } .gallery_dialog_btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 9px 14px; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 700; } .gallery_dialog_btn.primary { border: 1px solid var(--main_color); background: var(--main_color); color: #fff; } .gallery_dialog_btn.primary:hover { background: var(--main_color_darker); border-color: var(--main_color_darker); } .gallery_dialog_btn.secondary { border: 1px solid var(--border_color_darker); background: var(--white_color); color: var(--text_color); } .gallery_dialog_btn.secondary:hover { background: var(--bg_color_darker1); border-color: var(--main_color_lighter2); color: var(--main_color); } .gallery_dialog_btn.danger { border: 1px solid var(--light_red); background: var(--light_red); color: #fff; } .gallery_dialog_actions { display: flex; justify-content: flex-end; gap: 10px; } .gallery_dialog_hint { margin-top: 12px; color: var(--text_color_lighter1); font-size: 13px; } .gallery_dialog_hint.success { color: var(--green_color); } .gallery_dialog_hint.error { color: var(--light_red); } .gallery_duplicate_list { display: grid; gap: 8px; } .gallery_duplicate_row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border_color); border-radius: 12px; } .gallery_duplicate_row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text_color); font-weight: 700; } .gallery_duplicate_row button { padding: 8px 10px; border: 1px solid var(--main_color_lighter2); border-radius: 12px; background: var(--white_color); color: var(--main_color); cursor: pointer; font-weight: 600; } .gallery_lightbox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(0, 0, 0, 0.78); z-index: 100000; } .gallery_lightbox.open { display: flex; } .gallery_lightbox .gallery_lightbox_inner { position: relative; width: min(100%, 1220px); max-height: calc(100vh - 44px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; } .gallery_lightbox .gallery_lightbox_inner > * { pointer-events: auto; } .gallery_lightbox .gallery_lightbox_inner .gallery_lightbox_media { width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; } .gallery_lightbox .gallery_lightbox_inner .gallery_lightbox_meta { width: min(100%, 760px); max-height: 120px; overflow: auto; padding: 15px 20px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; background: rgba(0, 0, 0, 0.28); color: rgba(255, 255, 255, 0.72); opacity: 0.78; } .gallery_lightbox .gallery_lightbox_inner .gallery_lightbox_meta dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; } .gallery_lightbox .gallery_lightbox_inner .gallery_lightbox_meta dt { margin-bottom: 8px; color: rgba(255, 255, 255, 0.64); font-size: 10px; font-weight: 700; text-transform: uppercase; } .gallery_lightbox .gallery_lightbox_inner .gallery_lightbox_meta dd { overflow-wrap: anywhere; margin: 0; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, 0.84); } .gallery_lightbox .gallery_lightbox_inner img { width: auto; max-width: 100%; max-height: calc(100vh - 190px); object-fit: contain; border-radius: 12px; } .gallery_lightbox .gallery_lightbox_inner video { width: min(100%, 1060px); max-height: calc(100vh - 190px); border-radius: 12px; background: #000; } .gallery_lightbox .gallery_lightbox_nav { position: absolute; top: calc(50% - 24px); width: 46px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: rgba(0, 0, 0, 0.52); color: #fff; cursor: pointer; font-size: 34px; line-height: 1; display: grid; place-items: center; z-index: 2; } .gallery_lightbox .gallery_lightbox_nav[hidden] { display: none; } .gallery_lightbox .gallery_lightbox_prev { left: 10px; } .gallery_lightbox .gallery_lightbox_next { right: 10px; } .gallery_lightbox .gallery_lightbox_close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } .gallery_bulk_edit_form .gallery_bulk_field { padding: 12px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--bg_color_darker1); } .gallery_bulk_edit_form .gallery_bulk_field > span { display: flex; align-items: center; gap: 8px; color: var(--text_color); font-weight: 700; } .gallery_bulk_edit_form .gallery_bulk_field > input:not([type=checkbox]), .gallery_bulk_edit_form .gallery_bulk_field > textarea { width: 100%; box-sizing: border-box; } .gallery_bulk_edit_form .gallery_bulk_field > input:disabled, .gallery_bulk_edit_form .gallery_bulk_field > textarea:disabled { opacity: 0.55; cursor: not-allowed; } .gallery_delete_confirmation { display: grid; gap: 18px; } .gallery_delete_confirmation p { margin: 0; color: var(--text_color_lighter1); line-height: 1.55; } .gallery_action_menu_divider { width: 100%; height: 1px; margin: 4px 0; border: 0; background: var(--border_color); } .gallery_undo_popover { position: fixed; left: 50%; bottom: 110px; z-index: 10050; display: grid; grid-template-columns: minmax(0, 1fr) auto 34px; align-items: center; gap: 12px; width: min(520px, 100vw - 28px); min-height: 76px; padding: 14px 14px 17px; overflow: hidden; border: 1px solid var(--border_color_darker); border-radius: 12px; background: var(--white_color); color: var(--text_color); translate: -50% 0; } .gallery_undo_popover .gallery_undo_copy { display: grid; gap: 3px; min-width: 0; } .gallery_undo_popover .gallery_undo_copy strong { font-size: 14px; } .gallery_undo_popover .gallery_undo_copy small { color: var(--text_color_lighter1); font-size: 12px; } .gallery_undo_popover .gallery_undo_button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--main_color); border-radius: 8px; background: var(--main_color); color: #fff; cursor: pointer; font-weight: 700; } .gallery_undo_popover .gallery_undo_button:disabled { opacity: 0.55; cursor: wait; } .gallery_undo_popover .gallery_undo_close { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border_color); border-radius: 8px; background: transparent; color: var(--text_color_lighter1); cursor: pointer; } .gallery_undo_popover .gallery_undo_progress { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: var(--main_color); transform-origin: left center; animation: gallery_undo_countdown 10s linear forwards; } .record_editor_main { overflow: auto; } .record_editor_page { max-width: 1040px; padding-bottom: 90px; } .record_editor_header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 18px 20px; border: 1px solid var(--border_color_lighter); border-radius: 12px; background: var(--white_color); } .record_editor_header > div:first-child { min-width: 0; } .record_editor_header h1 { margin: 2px 0 5px; font-size: clamp(21px, 2vw, 26px); line-height: 1.2; } .record_editor_header p { max-width: 68ch; margin: 0; color: var(--text_color_lighter1); line-height: 1.5; } .record_editor_back { display: inline-flex; align-items: center; min-height: 36px; margin: -6px 0 0 -8px; padding: 6px 8px; border-radius: 7px; color: var(--main_color); font-size: 14px; font-weight: 700; } .record_editor_back:hover, .record_editor_back:focus-visible { background: var(--main_color_lighter5); } .record_editor_status { min-width: 120px; min-height: 36px; display: flex; align-items: center; justify-content: flex-end; color: var(--text_color_lighter1); font-size: 13px; line-height: 1.4; text-align: right; } .record_editor_status[data-type=warning] { color: var(--orange_color); } .record_editor_status[data-type=error] { color: var(--light_red); } .record_editor_draft_prompt { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--main_color_lighter3); border-radius: 10px; background: var(--main_color_lighter5); } .record_editor_draft_prompt[hidden] { display: none; } .record_editor_draft_prompt div { display: flex; gap: 8px; } .record_editor_form { display: grid; gap: 14px; } .record_editor_section { min-width: 0; overflow: visible; padding: 18px; border: 1px solid var(--border_color_lighter); border-radius: 12px; background: var(--white_color); } .record_editor_section > header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; } .record_editor_section > header > span { display: inline-flex; flex: 0 0 28px; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--main_color_lighter5); color: var(--main_color); font-weight: 800; } .record_editor_section > header > div { min-width: 0; } .record_editor_section > header h2 { margin: 1px 0 3px; font-size: 18px; } .record_editor_section > header p { margin: 0; color: var(--text_color_lighter1); font-size: 13px; line-height: 1.45; } .record_editor_section > header .record_editor_cost { margin-left: auto; color: var(--main_color); white-space: nowrap; } .record_editor_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .record_editor_field { display: grid; align-content: start; gap: 6px; min-width: 0; } .record_editor_field > span, .record_editor_field > label { color: var(--text_color_lighter1); font-size: 13px; font-weight: 700; } .record_editor_field input, .record_editor_field select, .record_editor_field textarea { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); font: inherit; } .record_editor_field textarea { resize: vertical; } .record_editor_wide { grid-column: 1/-1; } .record_rich_editor { width: 100%; height: auto !important; min-height: 220px; overflow: visible; color: var(--text_color); } .record_rich_editor.ql-container.ql-snow { height: auto !important; overflow: visible; border-color: var(--border_color); border-radius: 0 0 8px 8px; font: inherit; } .record_rich_editor .ql-editor { width: 100%; height: auto; min-height: 220px; overflow: visible; overflow-wrap: anywhere; line-height: 1.65; } .record_editor_section .ql-toolbar.ql-snow { border-color: var(--border_color); border-radius: 8px 8px 0 0; background: var(--bg_color_lighter); } .record_editor_fallback { width: 100%; min-height: 220px; padding: 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); } .record_items { display: grid; gap: 10px; } .record_item_card { position: relative; display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(110px, 0.65fr) minmax(110px, 0.65fr) minmax(180px, 1fr) minmax(145px, 0.8fr); gap: 10px; padding: 14px 54px 14px 14px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--bg_color_lighter); } .record_item_card .record_item_details { grid-column: 1/-1; } .record_item_remove { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--light_red); cursor: pointer; font-size: 22px; } .record_item_remove:hover { background: var(--bg_color); } .record_add_item { margin-top: 12px; min-height: 44px; } .record_attendance_section[hidden] { display: none; } .record_attendance { display: grid; gap: 10px; } .record_attendee_card { position: relative; min-width: 0; overflow: visible; border: 1px solid var(--border_color); border-radius: 10px; background: var(--bg_color_lighter); } .record_attendee_card:focus-within { z-index: 2; } .record_attendee_card > header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--border_color_lighter); } .record_attendee_card > header strong { color: var(--text_color); font-size: 14px; } .record_attendee_remove { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--light_red); cursor: pointer; font-size: 22px; } .record_attendee_remove:hover, .record_attendee_remove:focus-visible { background: var(--bg_color); } .record_attendee_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px; } .record_attendee_grid .record_attendee_name, .record_attendee_grid .record_attendee_text { grid-column: span 2; } .record_attendee_grid .record_attendee_notes { grid-column: 1/-1; } .record_attendee_lookup { position: relative; } .record_attendee_lookup_help { color: var(--text_color_lighter1); font-size: 12px; line-height: 1.4; } .record_attendee_options { position: absolute; z-index: 6; top: calc(100% + 4px); left: 0; width: 100%; max-height: 286px; overflow-y: auto; border: 1px solid var(--border_color); border-radius: 9px; background: var(--white_color); } .record_attendee_options[hidden] { display: none; } .record_attendee_option { width: 100%; min-height: 58px; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--border_color_lighter); background: transparent; color: var(--text_color); cursor: pointer; text-align: left; } .record_attendee_option:last-child { border-bottom: 0; } .record_attendee_option:hover, .record_attendee_option:focus-visible { background: var(--main_color_lighter5); outline: 0; } .record_attendee_option img { width: 40px; height: 40px; display: block; border-radius: 50%; object-fit: cover; } .record_attendee_option span { min-width: 0; display: grid; gap: 3px; } .record_attendee_option strong, .record_attendee_option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .record_attendee_option strong { font-size: 14px; } .record_attendee_option small { color: var(--text_color_lighter1); font-size: 12px; } .record_attendee_lookup_status { margin: 0; padding: 12px; color: var(--text_color_lighter1); font-size: 13px; line-height: 1.4; } .record_attendee_lookup_status.is_error { color: var(--light_red); } .record_attendee_identity { min-height: 48px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 44px; align-items: center; gap: 9px; padding: 5px 4px 5px 7px; border: 1px solid var(--main_color_lighter3); border-radius: 8px; background: var(--main_color_lighter5); } .record_attendee_identity[hidden] { display: none; } .record_attendee_identity > img { width: 36px; height: 36px; display: block; border-radius: 50%; object-fit: cover; } .record_attendee_identity > span { min-width: 0; display: grid; gap: 2px; } .record_attendee_identity strong, .record_attendee_identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .record_attendee_identity strong { color: var(--text_color); font-size: 13px; } .record_attendee_identity small { color: var(--text_color_lighter1); font-size: 11px; } .record_attendee_identity button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text_color_lighter1); cursor: pointer; font-size: 20px; } .record_attendee_identity button:hover, .record_attendee_identity button:focus-visible { background: var(--white_color); color: var(--light_red); } .record_add_attendee { margin-top: 12px; min-height: 44px; } .record_editor_cover_wrap { position: relative; width: min(100%, 420px); } .record_editor_cover_dropzone { position: relative; width: 100%; aspect-ratio: 16/9; display: grid; place-items: center; overflow: hidden; border: 2px dashed var(--main_color_lighter3); border-radius: 10px; background: var(--main_color_lighter5); color: var(--main_color); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .record_editor_cover_dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .record_editor_cover_dropzone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .record_editor_cover_dropzone img[hidden] { display: none; } .record_editor_cover_dropzone.has_image .record_editor_cover_prompt { opacity: 0; } .record_editor_cover_dropzone:hover .record_editor_cover_prompt, .record_editor_cover_dropzone:focus-within .record_editor_cover_prompt, .record_editor_cover_dropzone.is_dragging .record_editor_cover_prompt { opacity: 1; } .record_editor_cover_dropzone.has_image .record_editor_cover_prompt { background: color-mix(in srgb, var(--white_color) 82%, transparent); } .record_editor_cover_dropzone.is_dragging { border-color: var(--main_color); background: var(--main_color_lighter4); } .record_editor_cover_dropzone:focus-within { outline: 2px solid var(--main_color); outline-offset: 2px; } .record_editor_cover_prompt { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 18px; text-align: center; transition: opacity 0.15s; } .record_editor_cover_prompt b { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; font-size: 30px; font-weight: 300; line-height: 1; } .record_editor_cover_prompt span { max-width: 230px; font-size: 14px; font-weight: 700; line-height: 1.4; } .record_editor_cover_remove { position: absolute; z-index: 2; top: 10px; right: 10px; width: 46px; height: 46px; display: grid; place-items: center; padding: 10px; border: 1px solid var(--light_red); border-radius: 9px; background: var(--white_color); color: var(--light_red); cursor: pointer; } .record_editor_cover_remove svg { width: 100%; height: 100%; fill: currentColor; } .record_editor_cover_remove:hover, .record_editor_cover_remove:focus-visible { background: var(--red_color_lighter, #fff3f2); } .record_editor_cover_remove[hidden] { display: none; } .record_editor_actions { position: sticky; z-index: 5; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border_color); background: var(--bg_color); } .record_editor_actions .tree_primary_action, .record_editor_actions .tree_secondary_action { min-height: 44px; } .event_title_link { color: inherit; } .event_detail_category { display: flex; gap: 10px; margin: 14px 0; padding: 10px 0; border-top: 1px solid var(--border_color_lighter); border-bottom: 1px solid var(--border_color_lighter); } .event_detail_category strong { color: var(--text_color_lighter1); } .event_detail_description { margin-top: 18px; } .event_detail_description h3 { margin: 0 0 8px; } .record_rich_content { line-height: 1.65; overflow-wrap: anywhere; } .record_rich_content > :first-child { margin-top: 0; } .record_rich_content > :last-child { margin-bottom: 0; } .record_rich_content blockquote { margin-left: 0; padding-left: 14px; border-left: 3px solid var(--main_color_lighter3); } .summary_share_expiry { display: grid; gap: 6px; margin: 10px 0 2px; } .summary_share_expiry span { color: var(--text_color_lighter1); font-size: 13px; font-weight: 700; } .summary_share_expiry select { min-height: 44px; padding: 9px 11px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); } html[data-theme=dark] .ql-snow .ql-stroke { stroke: var(--text_color); } html[data-theme=dark] .ql-snow .ql-fill { fill: var(--text_color); } html[data-theme=dark] .ql-snow .ql-picker { color: var(--text_color); } .gallery_selection_pill { position: fixed; left: 50%; bottom: 20px; z-index: 10040; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 10px 17px; border: 1px solid var(--border_color_darker); border-radius: 999px; background: var(--white_color); box-shadow: var(--popover_shadow); color: var(--text_color); cursor: pointer; font-size: 14px; font-weight: 650; translate: -50% 0; } .gallery_selection_pill[hidden] { display: none; } .gallery_selection_pill:focus-visible { outline: 2px solid var(--main_color); outline-offset: 3px; } .gallery_selection_pill strong { color: var(--main_color); } @keyframes gallery_undo_countdown { to { transform: scaleX(0); } } @media screen and (max-width: 1300px) { .header .wrapper_header { gap: 12px; } .header .wrapper_header .main_menu { display: none !important; } .header .wrapper_header > form { display: none !important; } .header .wrapper_header .logo { max-width: 128px; } .header .wrapper_header .logo img { max-height: 42px; } .header .wrapper_header.logged_in { grid-template-columns: auto minmax(0, 1fr) auto; } .header .wrapper_header.logged_in .middle_header_admin { grid-column: 2; min-width: 0; } .header .wrapper_header.logged_in .cta_header { grid-column: 3; min-width: max-content; } .header .wrapper_header.logged_in .cta_header .wrapper_cta_header { gap: 10px; } .header .wrapper_header.logged_out { grid-template-columns: minmax(0, 1fr) auto; } } @media screen and (max-width: 1024px) { .header .wrapper_header { gap: 10px; padding: 0 10px 0 15px !important; } .header .wrapper_header.logged_in { grid-template-columns: auto minmax(0, 1fr) auto auto !important; } .header .wrapper_header .logo .desktop { display: none; } .header .wrapper_header .logo .mobile { display: block !important; width: 40px; } .header .wrapper_header .main_menu .wrapper_main_menu { gap: 15px; } .header .wrapper_header.logged_in .cta_header { grid-column: 4; grid-row: 1; } .header .wrapper_header.logged_in .cta_header .wrapper_cta_header { grid-template-columns: auto !important; } .header .wrapper_header.logged_in .hamburger_btn { display: flex !important; grid-column: 3; grid-row: 1; } .header .wrapper_header .cta_header .wrapper_cta_header .family_switcher_header { display: none !important; } .header .wrapper_header .cta_header .wrapper_cta_header .cta_icons { display: none !important; } .header .wrapper_header .cta_header .wrapper_cta_header .manage_btn_header { display: none !important; } } @media screen and (max-width: 768px) { .back_to_top { left: 14px; } .small_menu_logged .wrapper_small_menu { right: 10px; } .small_menu_logged .wrapper_small_menu .actual_small_menu { right: 10px; } .small_menu_logged .wrapper_small_menu .actual_small_menu .menu_items_small_menu .one_menu_item_small_menu { padding: 5px 10px; grid-template-columns: 22px auto auto; } .small_menu_logged .wrapper_small_menu .actual_small_menu .menu_items_small_menu .one_menu_item_small_menu .text { font-size: 1rem; } #main_container.manage_main { height: calc(100vh - 3.4375rem); overflow-y: auto; -webkit-overflow-scrolling: touch; } .manage_page { grid-template-columns: 1fr; height: auto; min-height: unset; } .manage_page .manage_sidebar { border-right: none; border-bottom: 1px solid var(--border_color); padding: 0.625rem; } .manage_page .manage_sidebar .manage_profile_card { margin-bottom: 0; } .manage_page .manage_sidebar .manage_profile_card .manage_nav_toggle { display: flex; } .manage_page .manage_sidebar .manage_nav { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 8px; padding: 8px; border: 1px solid var(--border_color_lighter); border-radius: 10px; background: var(--white_color); } .manage_page .manage_sidebar .manage_nav .manage_nav_divider { width: 100%; display: block; grid-column: 1/-1; margin-inline: 0; } .manage_page .manage_sidebar .manage_nav .manage_nav_item { grid-template-columns: 16px auto; gap: 5px; min-height: 38px; padding: 8px 10px; } .manage_page .manage_sidebar .manage_nav .manage_nav_item .manage_nav_text { font-size: 0.8125rem; } .manage_page .manage_sidebar.manage_nav_open .manage_nav { display: grid; } .manage_page .manage_content .manage_content_inner { padding: 1rem 1rem 2rem; max-width: 100%; } .manage_page .manage_content .manage_content_inner.manage_content_inner_stats { padding: 12px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_summary, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_board, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_family_body, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_records_body { grid-template-columns: 1fr; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_group, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stat_highlight, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_split, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_record_total { padding: 14px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_group_family, .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_group_tiles { grid-column: auto; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_group_head { align-items: flex-start; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_group_head a { min-height: 28px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_stats_tile_row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_grid, .manage_page .manage_content .manage_content_inner .manage_section_body .stats_main_grid, .manage_page .manage_content .manage_content_inner .manage_section_body .stats_bottom_grid, .manage_page .manage_content .manage_content_inner .manage_section_body .family_overview_content, .manage_page .manage_content .manage_content_inner .manage_section_body .records_card_content { grid-template-columns: 1fr; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_highlight_card { min-height: 96px; padding: 16px; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_grid_card { padding: 14px 20px 20px 22px; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_tiles_row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_footer_branding { grid-template-columns: 1fr; } .manage_page .manage_content .manage_content_inner .manage_section_body .stats_footer_branding .footer_right { grid-column: auto; justify-self: start; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar { gap: 0.5rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_toolbar .manage_users_filters { flex-wrap: wrap; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap.view_grid { grid-template-columns: 1fr; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_users_wrap.view_list .manage_user_email { display: none; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_settings_grid { grid-template-columns: 1fr; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card .manage_form_section { grid-template-columns: 1fr; gap: 12px; padding: 1rem; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card .manage_form { grid-template-columns: 1fr; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_form_card .manage_form .manage_field:nth-of-type(3) { grid-column: auto; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_transfers_page .settings_group { padding: 12px; } .manage_page .manage_content .manage_content_inner .manage_section_body .manage_transfers_page .settings_group_head { grid-template-columns: 1fr; } .manage_popup_overlay .manage_popup_box { border-radius: 0.75rem; } .manage_settings_form { max-width: 100%; } .manage_settings_form .manage_settings_quicknav { flex-wrap: nowrap; overflow-x: auto; padding: 10px 12px; -webkit-overflow-scrolling: touch; } .manage_settings_form .manage_settings_quicknav_link { flex: 0 0 auto; } .manage_settings_form .manage_settings_subsection { padding-left: 16px; padding-right: 16px; } .manage_settings_form .manage_settings_card_header { padding: 16px; } .manage_settings_form .manage_settings_grid, .manage_settings_form .manage_radio_group, .manage_settings_form .gallery_appearance_views, .manage_settings_form .gallery_appearance_controls { grid-template-columns: 1fr; padding: 16px; } .manage_settings_form .gallery_appearance_settings { padding: 0; } .manage_settings_form .manage_radio_card { min-height: unset; } .manage_settings_form .notification_settings_matrix { overflow-x: auto; padding: 16px; } .manage_settings_form .notification_settings_row { min-width: 520px; grid-template-columns: minmax(150px, 1fr) repeat(3, 90px); } .manage_settings_form .manage_settings_actions { flex-direction: column; align-items: stretch; } .manage_settings_form .manage_settings_actions .button1 { width: 100%; } .page_header { flex-direction: column; align-items: stretch; } .page_header h1 { font-size: 24px; } .page_header .page_header_actions { flex-direction: column; align-items: stretch; width: 100%; } .page_header .page_header_actions .page_search { width: 100%; min-width: 0; max-width: none; } .page_header .page_header_actions .page_add_btn { width: 100%; } .page_header .page_header_actions .page_view_switch { overflow-x: auto; } .page_header .page_header_actions .page_view_switch button { flex: 1 0 auto; } .page_toolbar { display: grid; grid-template-columns: 1fr; align-items: stretch; } .page_toolbar .page_filters { overflow-x: auto; padding-right: 46px; padding-bottom: 2px; } .page_toolbar .page_filters button { flex: 0 0 auto; } .gallery_page { width: min(100% - 20px, 1320px); } .gallery_page .gallery_header_actions { flex-direction: column; align-items: stretch; } .gallery_page .gallery_header_actions .gallery_search { min-width: 0; } .gallery_page .gallery_header_actions .gallery_view_switch { overflow-x: auto; } .gallery_page .gallery_header_actions .gallery_view_switch button { flex: 1 0 auto; } .gallery_page .page_toolbar { grid-template-columns: 1fr; align-items: stretch; } .gallery_page .page_toolbar .gallery_filters { overflow-x: auto; padding-right: 46px; padding-bottom: 2px; } .gallery_page .page_toolbar .gallery_filters button { flex: 0 0 auto; } .gallery_page .page_toolbar .gallery_count_group, .gallery_page .page_toolbar .gallery_album_public_badge { justify-self: start; } .gallery_page .gallery_album_grid { grid-template-columns: 1fr; } .gallery_page .gallery_upload_top { grid-template-columns: 1fr; } .gallery_page .gallery_add_files_form .gallery_upload_top { grid-template-columns: 1fr; } .gallery_page .gallery_grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .gallery_page .gallery_grid.is_grouped .gallery_album_group_grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .gallery_page .gallery_grid .gallery_album_group_header { align-items: flex-start; } .gallery_page .gallery_grid .gallery_album_group_header h2 { flex-basis: calc(100% - 48px); } .gallery_page .gallery_grid .gallery_album_selection_controls { order: 3; width: 100%; align-items: flex-start; flex-direction: column-reverse; } .gallery_page .gallery_grid .gallery_album_bulk_actions { width: 100%; overflow-x: auto; padding: 8px 0 0; border-top: 1px solid var(--border_color); border-left: 0; border-right: 0; } .gallery_page .gallery_grid .gallery_album_bulk_actions button { min-height: 42px; } .gallery_page .gallery_upload_actions { flex-direction: column-reverse; } .gallery_page .gallery_upload_actions .gallery_upload_btn, .gallery_page .gallery_upload_actions .gallery_secondary_btn { width: 100%; } .gallery_undo_popover { bottom: calc(150px + env(safe-area-inset-bottom)); grid-template-columns: minmax(0, 1fr) 42px; } .gallery_undo_popover .gallery_undo_button { grid-column: 1/-1; width: 100%; } .gallery_undo_popover .gallery_undo_close { grid-column: 2; grid-row: 1; } .gallery_selection_pill { max-width: calc(100vw - 28px); } .gallery_public_share_dialog { padding: 16px; } .gallery_public_share_context { grid-template-columns: 82px minmax(0, 1fr); } .gallery_public_share_context > .gallery_album_thumbs { width: 82px; height: 66px; } .gallery_dialog .gallery_public_share_form .public_share_manager { align-items: stretch; flex-direction: column; } .gallery_dialog .gallery_public_share_form .public_share_options { grid-template-columns: 1fr; } .gallery_dialog .gallery_public_share_form .gallery_dialog_actions { flex-wrap: wrap; } .gallery_dialog .gallery_public_share_form .gallery_dialog_actions .danger { margin-right: auto; } .gallery_lightbox { padding: 12px; } .gallery_lightbox .gallery_lightbox_inner { gap: 10px; } .gallery_lightbox .gallery_lightbox_inner .gallery_lightbox_meta { width: 100%; max-height: 145px; } .gallery_lightbox .gallery_lightbox_inner .gallery_lightbox_meta dl { grid-template-columns: 1fr 1fr; } .gallery_lightbox .gallery_lightbox_inner img, .gallery_lightbox .gallery_lightbox_inner video { max-height: calc(100vh - 220px); } .gallery_lightbox .gallery_lightbox_nav { top: auto; bottom: 172px; width: 40px; height: 42px; font-size: 30px; } .event_card { grid-template-columns: 1fr; padding: 14px; } .record_editor_header, .record_editor_draft_prompt { align-items: stretch; flex-direction: column; } .record_editor_header { padding: 16px; } .record_editor_header .record_editor_status { min-width: 0; justify-content: flex-start; text-align: left; } .record_editor_grid, .record_item_card, .record_attendee_grid { grid-template-columns: 1fr; } .record_item_card .record_item_details, .record_attendee_grid .record_attendee_name, .record_attendee_grid .record_attendee_text, .record_attendee_grid .record_attendee_notes, .record_editor_wide { grid-column: auto; } .record_editor_section { padding: 14px; } .record_editor_section > header { flex-wrap: wrap; } .record_editor_section > header .record_editor_cost { width: 100%; margin-left: 38px; } .record_editor_actions .tree_primary_action, .record_editor_actions .tree_secondary_action { flex: 1; } .event_media { width: 100%; aspect-ratio: 16/9; } .event_menu_btn { position: absolute; top: 24px; right: 24px; z-index: 2; background: var(--white_color); } .event_card_menu { top: 52px; right: 12px; } .event_actions, .events_modal_actions { flex-wrap: wrap; justify-content: stretch; } .event_actions button, .events_modal_actions button { flex: 1; } .events_form_grid { grid-template-columns: 1fr; } .checklist_form { grid-template-columns: 1fr; } .events_detail_modal .events_detail_body dl { grid-template-columns: 1fr; } .wrapper_cta_header .manage_btn_header { padding: 5px 10px; font-size: 0.75rem; } .events_toolbar_right { margin-left: 0; width: 100%; flex-wrap: nowrap; justify-content: space-between; } .events_toolbar_progress { flex: 1; overflow: hidden; } .events_toolbar_progress .events_toolbar_viz { min-width: 0; max-width: 100%; } .events_toolbar_progress .events_toolbar_viz.progress_viz_bar .progress_viz_text strong, .events_toolbar_progress .events_toolbar_viz.progress_viz_bar .progress_viz_text span, .events_toolbar_progress .events_toolbar_viz.progress_viz_bar .progress_viz_track, .events_toolbar_progress .events_toolbar_viz.progress_viz_bar .progress_viz_spark, .events_toolbar_progress .events_toolbar_viz.progress_viz_sparkline .progress_viz_text strong, .events_toolbar_progress .events_toolbar_viz.progress_viz_sparkline .progress_viz_text span, .events_toolbar_progress .events_toolbar_viz.progress_viz_sparkline .progress_viz_track, .events_toolbar_progress .events_toolbar_viz.progress_viz_sparkline .progress_viz_spark { display: none; } .events_toolbar_progress .events_toolbar_viz.progress_viz_bar .progress_viz_text em, .events_toolbar_progress .events_toolbar_viz.progress_viz_sparkline .progress_viz_text em { display: inline-block; font-weight: 700; } .events_contrib_btn { padding: 9px 12px; } .events_contrib_modal { padding: 16px; } .events_contrib_modal .events_contrib_goal .events_contrib_goal_row { grid-template-columns: 1fr; } .events_contrib_modal .events_contrib_add .events_contrib_add_grid { grid-template-columns: 1fr; } .events_contrib_row { grid-template-columns: 1fr auto; grid-template-areas: "person amount" "method method" "date date"; } .events_contrib_row .events_contrib_person { grid-area: person; } .events_contrib_row .events_contrib_amount { grid-area: amount; } .events_contrib_row .events_contrib_method { grid-area: method; font-size: 12px; } .events_contrib_row .events_contrib_date { grid-area: date; font-size: 12px; } .events_contrib_row .events_contrib_del { position: absolute; } .events_contrib_row { position: relative; } .gallery_page[data-gallery-view=list] .gallery_grid .gallery_card { grid-template-columns: 1fr; } .gallery_page[data-gallery-view=list] .gallery_grid .gallery_card .gallery_card_image { width: 100%; aspect-ratio: 16/10; border-radius: 8px 8px 0 0; } .gallery_page[data-gallery-view=list] .gallery_grid .gallery_card .gallery_card_body { padding: 12px 14px; } .gallery_page[data-gallery-view=list] .gallery_grid .gallery_card .gallery_card_body .gallery_card_meta { grid-template-columns: 1fr 1fr; gap: 8px 12px; } .currencies_panel { padding: 14px; } .currencies_panel .currencies_table { font-size: 13px; } .currencies_panel .currencies_table th, .currencies_panel .currencies_table td { padding: 9px 10px; } .currencies_panel .currencies_table_wrap { overflow-x: auto; } .currencies_panel .currencies_add_form .currencies_add_grid { grid-template-columns: 1fr 1fr; } .currencies_panel .currencies_add_form .currencies_add_grid .ca_name { grid-column: 1/-1; } .currencies_panel .currencies_add_form .currencies_add_grid .currencies_add_btn { grid-column: 1/-1; justify-content: center; } } /* ── History timeline ──────────────────────────────────────────────────── */ .history_page { margin: 0 auto; padding: 24px 0 56px; } .history_toolbar { grid-template-columns: repeat(2, minmax(150px, 220px)) auto; } .history_notice { margin-top: 14px; padding: 11px 14px; border: 1px solid var(--main_color_lighter3); border-radius: 8px; background: var(--main_color_lighter5); color: var(--main_color); font-size: 14px; font-weight: 600; } .history_notice.error { border-color: var(--light_red); background: var(--light_red2); color: var(--light_red); } .history_results { margin-top: 18px; } .history_timeline { display: flex; flex-direction: column; gap: 24px; } .history_entry { position: relative; min-width: 0; } .history_entry_marker { position: absolute; display: none; } .history_entry_dot { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--main_color); border: 3px solid var(--white_color); box-shadow: 0 0 0 2px var(--main_color_lighter3); } .history_entry_card { position: relative; min-width: 0; overflow: visible; border: 1px solid var(--border_color_lighter); border-radius: 10px; background: var(--white_color); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .history_entry_card:hover { border-color: var(--main_color_lighter5); background: var(--main_color_lighter5); } .history_entry_card:hover .history_entry_body h2 { color: var(--main_color); } .history_entry_media { position: relative; overflow: hidden; background: #eef4f7; } .history_entry_media img { width: 100%; height: 100%; object-fit: cover; display: block; } .history_entry_date_badge { width: 100%; height: 100%; min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--main_color); line-height: 1.1; } .history_entry_date_badge strong { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; } .history_entry_date_badge span { font-size: 30px; font-weight: 700; } .history_entry_date_badge small { font-size: 12px; color: var(--text_color_lighter1); } .history_entry_body { padding: 14px 16px; min-width: 0; } .history_entry_body time { color: var(--main_color); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .history_entry_body h2 { margin: 5px 0 0; color: var(--text_color); font-size: 16px; line-height: 1.3; } .history_entry_body > p { display: -webkit-box; margin: 8px 0 0; overflow: hidden; color: var(--text_color_lighter1); font-size: 13px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .history_entry_people { display: flex; margin-top: 12px; } .history_avatar { width: 28px; height: 28px; display: grid; place-items: center; margin-left: -8px; overflow: hidden; border: 2px solid var(--white_color); border-radius: 50%; background: var(--main_color_lighter4); color: var(--main_color); font-size: 11px; font-weight: 700; } .history_avatar:first-child { margin-left: 0; } .history_avatar img { width: 100%; height: 100%; object-fit: cover; } .history_avatar em { font-style: normal; } .history_avatar_more { font-size: 10px; } .history_menu_btn { position: absolute; z-index: 3; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border_color); border-radius: 50%; background: var(--white_color); color: var(--text_color_lighter1); cursor: pointer; font-size: 19px; line-height: 1; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .history_menu_btn:hover { background: var(--bg_color_darker1); color: var(--text_color); border-color: var(--main_color_lighter3); } .history_action_menu { position: absolute; z-index: 12; top: 48px; right: 10px; min-width: 132px; padding: 5px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); box-shadow: 0 12px 30px rgba(13, 38, 46, 0.14); } .history_action_menu button { width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text_color); cursor: pointer; text-align: left; } .history_action_menu button:hover { background: var(--bg_color); } .history_action_menu button.danger { color: var(--light_red); } /* Timeline view (vertical rail) */ .history_page[data-history-view=timeline] .history_timeline { position: relative; padding-left: 38px; } .history_page[data-history-view=timeline] .history_timeline::before { position: absolute; top: 8px; bottom: 8px; left: 13px; width: 2px; background: var(--main_color_lighter3); content: ""; } .history_page[data-history-view=timeline] .history_entry_marker { display: block; top: 10px; left: -32px; } .history_page[data-history-view=timeline] .history_entry_card { display: grid; grid-template-columns: 160px minmax(0, 1fr); } .history_page[data-history-view=timeline] .history_entry_media { min-height: 130px; border-radius: 9px 0 0 9px; } /* Grid view */ .history_page[data-history-view=grid] .history_timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .history_page[data-history-view=grid] .history_entry_card { display: flex; flex-direction: column; height: 100%; } .history_page[data-history-view=grid] .history_entry_media { height: 175px; border-radius: 9px 9px 0 0; } /* List view */ .history_page[data-history-view=list] .history_timeline { gap: 10px; } .history_page[data-history-view=list] .history_entry_card { display: grid; grid-template-columns: 130px minmax(0, 1fr); min-height: 116px; } .history_page[data-history-view=list] .history_entry_media { min-height: 116px; border-radius: 9px 0 0 9px; } .history_page[data-history-view=list] .history_entry_body > p { -webkit-line-clamp: 1; } /* Ribbon view (horizontal chronicle) */ .history_page[data-history-view=ribbon] .history_timeline { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 360px); gap: 18px; overflow-x: auto; padding: 38px 4px 18px; scroll-padding-inline: 4px; scroll-snap-type: x proximity; } .history_page[data-history-view=ribbon] .history_entry { scroll-snap-align: start; } .history_page[data-history-view=ribbon] .history_entry::before { position: absolute; z-index: 1; top: -30px; left: 22px; width: 13px; height: 13px; border: 3px solid var(--white_color); border-radius: 50%; background: var(--main_color); outline: 2px solid var(--main_color_lighter3); content: ""; } .history_page[data-history-view=ribbon] .history_entry:not(:last-of-type)::after { position: absolute; top: -24px; left: 28px; width: calc(100% + 18px); height: 2px; background: var(--main_color_lighter3); content: ""; } .history_page[data-history-view=ribbon] .history_entry_card { height: 100%; display: flex; flex-direction: column; } .history_page[data-history-view=ribbon] .history_entry_media { height: 210px; border-radius: 9px 9px 0 0; } /* Story view (image-led chapters) */ .history_page[data-history-view=story] .history_timeline { width: min(1080px, 100%); gap: 28px; margin: 0 auto; } .history_page[data-history-view=story] .history_entry_card { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr); min-height: 320px; } .history_page[data-history-view=story] .history_entry_media { min-height: 320px; border-radius: 9px 0 0 9px; } .history_page[data-history-view=story] .history_entry_body { display: flex; flex-direction: column; justify-content: center; padding: 30px 34px; } .history_page[data-history-view=story] .history_entry_body h2 { margin-top: 9px; font-size: 26px; line-height: 1.2; } .history_page[data-history-view=story] .history_entry_body > p { margin-top: 14px; font-size: 15px; -webkit-line-clamp: 5; } .history_page[data-history-view=story] .history_entry:nth-child(even) .history_entry_media { grid-column: 2; grid-row: 1; border-radius: 0 9px 9px 0; } .history_page[data-history-view=story] .history_entry:nth-child(even) .history_entry_body { grid-column: 1; grid-row: 1; } .history_public_context { display: grid; gap: 3px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--border_color_lighter); border-radius: 9px; background: var(--bg_color); } .history_public_context span, .history_public_context small { color: var(--text_color_lighter1); font-size: 12px; } .history_public_context strong { color: var(--text_color); } .public_history_record { width: min(1080px, 100% - 32px); display: grid; grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr); min-height: 430px; margin: 28px auto; overflow: hidden; border: 1px solid var(--border_color_lighter); border-radius: 12px; background: var(--white_color); } .public_history_media { min-height: 430px; background: var(--bg_color_darker1); } .public_history_media img { width: 100%; height: 100%; display: block; object-fit: cover; } .public_history_content { display: flex; flex-direction: column; justify-content: center; padding: 34px; } .public_history_content time { color: var(--main_color); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .public_history_content h2 { margin: 8px 0 16px; color: var(--text_color); font-size: 30px; line-height: 1.2; } .public_history_content .history_rich { color: var(--text_color_lighter1); line-height: 1.65; } .public_history_participants { margin-top: 22px; } .public_history_participants h3 { margin: 0 0 9px; color: var(--text_color); font-size: 13px; } /* ── History modal ─────────────────────────────────────────────────────── */ .history_modal_backdrop { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 28px 16px; background: rgba(12, 18, 22, 0.62); } .history_modal_backdrop.open { display: flex; } .history_modal { width: min(720px, 100%); max-height: calc(100vh - 56px); overflow-y: auto; padding: 20px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--white_color); } .history_modal > header, .history_modal form > header, .history_modal article > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .history_modal > header time, .history_modal form > header time, .history_modal article > header time { color: var(--main_color); font-size: 12px; font-weight: 700; text-transform: uppercase; } .history_modal > header h2, .history_modal form > header h2, .history_modal article > header h2 { margin: 4px 0 0; color: var(--text_color); } .history_modal > header > button, .history_modal form > header > button, .history_modal article > header > button { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--border_color); border-radius: 50%; background: var(--bg_color); color: var(--text_color_lighter1); cursor: pointer; font-size: 21px; } .history_confirm_modal { width: min(420px, 100%); } .history_dropzone { position: relative; min-height: 180px; display: grid; place-content: center; gap: 6px; margin-bottom: 16px; padding: 22px; border: 1px dashed var(--main_color_lighter2); border-radius: 10px; background: var(--main_color_lighter5); color: var(--text_color); cursor: pointer; text-align: center; overflow: hidden; } .history_dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; } .history_dropzone small { color: var(--text_color_lighter1); } .history_dropzone em { min-height: 16px; color: var(--main_color); font-size: 12px; font-style: normal; font-weight: 600; } .history_dropzone.dragging { border-style: solid; } .history_dropzone.has_file .history_drop_icon, .history_dropzone.has_file strong, .history_dropzone.has_file small { position: relative; z-index: 1; color: #fff; } .history_dropzone.has_file .history_drop_icon { border-color: rgba(255, 255, 255, 0.6); } .history_image_preview { position: absolute; inset: 0; background-position: center; background-size: cover; } .history_image_preview::after { position: absolute; inset: 0; background: rgba(12, 18, 22, 0.45); content: ""; } .history_dropzone:not(.has_file) .history_image_preview { display: none; } .history_drop_icon { position: relative; z-index: 1; width: 46px; height: 46px; display: grid; place-items: center; margin: 0 auto 3px; border: 1px solid var(--main_color_lighter2); border-radius: 8px; color: var(--main_color); font-size: 27px; font-weight: 700; } .history_form_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .history_field { display: grid; gap: 6px; } .history_field > span { display: flex; justify-content: space-between; color: var(--text_color); font-size: 12px; font-weight: 700; } .history_field > span em { color: var(--text_color_lighter1); font-size: 9px; font-style: normal; text-transform: uppercase; } .history_field input, .history_field select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); } .history_field_wide { grid-column: 1/-1; } /* Rich-text editor */ .history_rte { border: 1px solid var(--border_color); border-radius: 8px; overflow: hidden; background: var(--white_color); } .history_rte_toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border_color_lighter); background: var(--bg_color); } .history_rte_toolbar button { min-width: 32px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text_color); cursor: pointer; font-size: 14px; line-height: 1; } .history_rte_toolbar button:hover { background: var(--main_color_lighter5); border-color: var(--main_color_lighter3); } .history_rte_area { min-height: 130px; max-height: 320px; overflow-y: auto; padding: 12px; color: var(--text_color); font-size: 14px; line-height: 1.55; } .history_rte_area:focus { outline: none; } .history_rte_area:empty::before { color: var(--text_color_lighter2); content: attr(data-placeholder); } .history_rte_area p { margin: 0 0 8px; } .history_rte_area ul, .history_rte_area ol { margin: 0 0 8px; padding-left: 22px; } .history_rte_area a { color: var(--main_color); } /* Participant picker */ .history_participant_picker { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .history_participant_controls { display: flex; gap: 8px; } .history_participant_controls select, .history_participant_controls input { flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 9px 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); } .history_participant_controls .tree_secondary_action { flex: 0 0 auto; } .history_chip_list { display: flex; flex-wrap: wrap; gap: 7px; } .history_chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 11px; border: 1px solid var(--main_color_lighter3); border-radius: 999px; background: var(--main_color_lighter5); color: var(--main_color); font-size: 13px; font-weight: 600; } .history_chip button { width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--main_color_lighter3); color: var(--white_color); cursor: pointer; font-size: 13px; line-height: 1; } .history_chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; } .history_chip_person { padding-left: 5px; } .history_chip_empty { color: var(--text_color_lighter1); font-size: 13px; font-style: italic; } .history_form_feedback { min-height: 20px; margin: 12px 0 0; color: var(--green_color); } .history_form_feedback.error { color: var(--light_red); } .history_modal_actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; } .history_modal_actions .tree_primary_action, .history_modal_actions .tree_secondary_action { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* Detail modal */ .history_detail_media { margin-bottom: 16px; border-radius: 8px; overflow: hidden; } .history_detail_media img { width: 100%; max-height: 360px; object-fit: cover; display: block; } .history_rich { color: var(--text_color); font-size: 14px; line-height: 1.6; } .history_rich p { margin: 0 0 10px; } .history_rich ul, .history_rich ol { margin: 0 0 10px; padding-left: 22px; } .history_rich a { color: var(--main_color); } .history_detail_participants { margin-top: 16px; } .history_detail_participants h3 { margin: 0 0 8px; color: var(--text_color); font-size: 14px; } @media (max-width: 1100px) { .history_page[data-history-view=grid] .history_timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sa_plugin_toolbar .form_input { flex: 1 1 150px; } .sa_plugin_toolbar .sa_search { flex-basis: 240px; } .sa_plugin_toolbar .sa_view_switch { margin-left: auto; } .sa_plugin_toolbar .form_input, .sa_plugin_toolbar .sa_btn { min-height: 44px; } .gallery_album_display_settings h3 { margin: 0; color: var(--text_color); font-size: 14px; } .gallery_album_display_settings .public_share_option { display: flex; } .gallery_album_display_settings .public_share_option:has(input:disabled) { opacity: 0.55; cursor: not-allowed; } .gallery_album_display_settings .public_share_option input:disabled { cursor: not-allowed; } .sa_view_switch { display: inline-flex; gap: 4px; } .sa_admin_plugin_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .sa_admin_plugin_grid.is_list { grid-template-columns: 1fr; } .sa_admin_plugin_card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--border_color); border-radius: 12px; background: var(--bg_color, #fff); } .sa_admin_plugin_cover { display: grid; place-items: center; width: 100%; aspect-ratio: 16/6; padding: 0; overflow: hidden; border: 0; background: var(--bg_color_darker); color: var(--main_color); font: inherit; font-size: 2rem; font-weight: 800; cursor: pointer; } .sa_admin_plugin_cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .sa_admin_plugin_cover img.is_logo { width: 72px; height: 72px; object-fit: contain; } .sa_admin_plugin_cover:focus-visible { outline: 3px solid var(--main_color_lighter3); outline-offset: -3px; } .sa_admin_plugin_body { display: grid; gap: 12px; padding: 16px; } .sa_admin_plugin_heading { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .sa_admin_plugin_heading h3 { margin: 0 0 2px; } .sa_admin_plugin_heading > span { min-width: 0; } .sa_admin_plugin_heading .sa_badge { margin-left: auto; } .sa_admin_plugin_heading:focus-visible { outline: 2px solid var(--main_color); outline-offset: 4px; border-radius: 6px; } .sa_admin_plugin_card .sa_admin_plugin_actions { position: absolute; top: 10px; right: 10px; z-index: 4; } .sa_admin_plugin_card .sa_admin_plugin_actions .sa_dots_btn { width: 40px; min-width: 40px; height: 40px; background: var(--white_color); } .sa_admin_plugin_card .sa_admin_plugin_actions .sa_actions_menu { min-width: 230px; } .sa_admin_plugin_logo { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--border_color); border-radius: 10px; } .sa_plugin_chips { display: flex; flex-wrap: wrap; gap: 6px; } .sa_plugin_chips span, .sa_plugin_chips a { padding: 4px 8px; border: 1px solid var(--border_color); border-radius: 999px; color: inherit; font-size: 0.78rem; } .plugin_card_taxonomy { display: flex; flex-wrap: wrap; gap: 6px; } .plugin_card_taxonomy span, .plugin_card_taxonomy a { padding: 3px 7px; border: 1px solid var(--border_color); border-radius: 999px; color: inherit; font-size: 0.74rem; } .plugin_card_taxonomy .is_category, .sa_plugin_chips .is_category { white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .plugin_card_taxonomy .is_category:nth-child(4n+1):hover, .plugin_card_taxonomy .is_category:nth-child(4n+1):focus-visible, .sa_plugin_chips .is_category:nth-child(4n+1):hover, .sa_plugin_chips .is_category:nth-child(4n+1):focus-visible { border-color: #79c4cd; background: #e8f7f8; color: #075d67; } .plugin_card_taxonomy .is_category:nth-child(4n+2):hover, .plugin_card_taxonomy .is_category:nth-child(4n+2):focus-visible, .sa_plugin_chips .is_category:nth-child(4n+2):hover, .sa_plugin_chips .is_category:nth-child(4n+2):focus-visible { border-color: #efb36f; background: #fff3e5; color: #8a4700; } .plugin_card_taxonomy .is_category:nth-child(4n+3):hover, .plugin_card_taxonomy .is_category:nth-child(4n+3):focus-visible, .sa_plugin_chips .is_category:nth-child(4n+3):hover, .sa_plugin_chips .is_category:nth-child(4n+3):focus-visible { border-color: #b8a4dc; background: #f3eefb; color: #574080; } .plugin_card_taxonomy .is_category:nth-child(4n):hover, .plugin_card_taxonomy .is_category:nth-child(4n):focus-visible, .sa_plugin_chips .is_category:nth-child(4n):hover, .sa_plugin_chips .is_category:nth-child(4n):focus-visible { border-color: #88c5a6; background: #eaf7f0; color: #236342; } .sa_plugin_metrics { display: flex; flex-wrap: wrap; gap: 14px; color: var(--text_secondary, #5d6670); } .sa_plugin_metrics span { display: inline-flex; align-items: center; gap: 4px; } .sa_plugin_metrics svg { width: 17px; height: 17px; fill: currentColor; } .sa_plugin_taxonomy_assign { display: grid; gap: 12px; margin-top: 12px; } .sa_plugin_taxonomy_assign fieldset { display: flex; flex-wrap: wrap; gap: 8px 14px; border: 1px solid var(--border_color); border-radius: 8px; padding: 10px; } .sa_plugin_status_actions { display: grid; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border_color); } .sa_plugin_detail { display: grid; gap: 18px; } .sa_plugin_detail_section { padding-top: 16px; border-top: 1px solid var(--border_color); } .sa_plugin_detail_section h4 { margin: 0 0 8px; } .sa_plugin_detail_section p { margin: 0; line-height: 1.6; } .sa_plugin_detail_section ul { margin: 0; padding-left: 20px; } .sa_plugin_config_section { padding: 18px 0; border-bottom: 1px solid var(--border_color); } .sa_plugin_config_section:first-child { padding-top: 0; } .sa_plugin_config_section:last-child { padding-bottom: 0; border-bottom: 0; } .sa_plugin_config_section h4 { margin: 0 0 8px; } .sa_plugin_config_section .sa_plugin_review { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border_color); } .sa_plugins_page_head { align-items: flex-start; } .sa_plugins_page_head .sa_page_head_actions { flex-direction: column; align-items: flex-end; } .sa_plugins_page_head .sa_plugin_new_btn { min-height: 40px; } .sa_developer_identity { display: flex; align-items: center; gap: 10px; min-width: 180px; } .sa_developer_identity strong, .sa_developer_identity small { display: block; } .sa_admin_taxonomy_grid, .sa_newsletter_recent_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .sa_taxonomy_row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) 80px 110px auto; gap: 8px; align-items: center; margin-bottom: 8px; } .sa_recent_list { display: grid; } .sa_recent_item { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 9px 0; border-bottom: 1px solid var(--border_color); } .sa_recent_item:last-child { border-bottom: 0; } .sa_recent_item div { min-width: 0; } .sa_recent_item strong, .sa_recent_item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1100px) { .sa_admin_plugin_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .sa_admin_plugin_grid, .sa_admin_taxonomy_grid, .sa_newsletter_recent_grid { grid-template-columns: 1fr; } .sa_taxonomy_row { grid-template-columns: 1fr; padding-bottom: 12px; border-bottom: 1px solid var(--border_color); } .history_page { width: min(100% - 20px, 1480px); } .history_toolbar { grid-template-columns: 1fr 1fr; } .history_form_grid { grid-template-columns: 1fr; } .record_link_add { grid-template-columns: 1fr; } .history_page[data-history-view=grid] .history_timeline, .history_page[data-history-view=timeline] .history_entry_card, .history_page[data-history-view=list] .history_entry_card, .history_page[data-history-view=story] .history_entry_card { grid-template-columns: 1fr; } .history_page[data-history-view=timeline] .history_entry_media, .history_page[data-history-view=list] .history_entry_media { min-height: 150px; border-radius: 9px 9px 0 0; } .history_page[data-history-view=story] .history_entry_media, .history_page[data-history-view=story] .history_entry:nth-child(even) .history_entry_media { min-height: 210px; grid-column: 1; grid-row: 1; border-radius: 9px 9px 0 0; } .history_page[data-history-view=story] .history_entry_body, .history_page[data-history-view=story] .history_entry:nth-child(even) .history_entry_body { grid-column: 1; grid-row: 2; padding: 20px; } .history_page[data-history-view=story] .history_entry_body h2, .history_page[data-history-view=story] .history_entry:nth-child(even) .history_entry_body h2 { font-size: 21px; } .public_share_discovery_meta { grid-template-columns: 1fr; } .public_history_record { width: min(100% - 20px, 1080px); grid-template-columns: 1fr; } .public_history_media { min-height: 230px; } .public_history_content { padding: 22px; } .history_modal_backdrop { padding: 10px; } .history_modal { padding: 15px; } } @keyframes global_search_spin { to { transform: rotate(360deg); } } .racinage_modal_backdrop { position: fixed; inset: 0; align-items: flex-start; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.25); overflow-y: auto; overscroll-behavior: contain; } .racinage_modal, .tree_modal_backdrop .tree_action_modal, .events_modal, .projects_modal, .finance_modal, .gallery_dialog, .history_modal, .document_modal { width: min(560px, 100%); padding: 20px; border: 1px solid var(--border_color); border-radius: 16px; background: var(--white_color); box-shadow: none !important; color: var(--text_color); cursor: default; } .racinage_modal { width: min(860px, 100%); } .racinage_modal > header, .racinage_modal form > header, .tree_modal_backdrop .tree_modal_header, .events_modal > header, .events_modal form > header, .projects_modal > header, .projects_modal form > header, .finance_modal header, .gallery_dialog > h2, .history_modal > header, .document_modal > header { margin-bottom: 16px; } .racinage_modal .tree_modal_header { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .manage_content_inner_account .manage_account_card, .manage_content_inner_settings .manage_section_body, .manage_content_inner_subscription .subscription_panel, .manage_content_inner_apis .api_connectors_page, .manage_content_inner_plugins .manage_plugins_page, .manage_content_inner_transfers .manage_transfers_page { width: 100%; max-width: 1180px; } .pwa_collab_invite_backdrop { display: flex; } .pwa_collab_invite_modal { display: grid; gap: 14px; } .pwa_collab_invite_body { display: grid; gap: 12px; } .pwa_collab_invite_body p { margin: 0; color: var(--text_color_lighter1); line-height: 1.5; } .pwa_collab_invite_body ul { margin: 0; padding-left: 18px; color: var(--text_color); } .pwa_collab_invite_actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; } .racinage_modal h2, .racinage_modal h3, .racinage_modal > header h2, .racinage_modal form > header h2 { color: var(--text_color); font-size: 20px; line-height: 1.25; } .racinage_modal form, .racinage_modal .public_share_modal { display: grid; gap: 12px; } .racinage_modal label, .tree_modal_backdrop .tree_form_section label, .tree_utility_field, .events_modal label, .projects_modal_form label, .finance_modal label, .gallery_edit_form label, .history_field, .document_field { display: grid; gap: 8px; color: var(--text_color); font-size: 14px; font-weight: 700; } .racinage_modal label > span, .tree_modal_backdrop .tree_form_section label > span, .tree_utility_field span, .events_modal label span, .projects_modal_form label > span, .finance_modal label > span, .gallery_edit_form label > span, .history_field > span, .document_field > span { color: var(--text_color); font-size: 14px; line-height: 1.35; } .racinage_modal label strong { font-weight: 700; } .public_share_option.public_share_discovery_option { width: 100%; display: flex; align-items: center; justify-content: space-between; } .public_share_option.public_share_discovery_option > span { display: grid; flex: 1 1 auto; gap: 4px; } .public_share_option.public_share_discovery_option strong { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; } .racinage_modal input, .racinage_modal select, .racinage_modal textarea, .tree_modal_backdrop .tree_form_section input, .tree_modal_backdrop .tree_form_section select, .tree_utility_field input, .events_modal input, .events_modal textarea, .projects_modal_form input, .projects_modal_form select, .projects_modal_form textarea, .finance_modal input, .finance_modal select, .finance_modal textarea, .gallery_edit_form input, .gallery_edit_form textarea, .history_field input, .history_field select, .document_field input, .document_field select, .document_field textarea { width: 100%; min-width: 0; min-height: 44px; padding: 10px 16px; border: 1px solid #eaeaea; border-radius: 12px; background: var(--white_color); color: var(--text_color); font-size: 1rem; line-height: 1.4; } .racinage_modal input:focus, .racinage_modal select:focus, .racinage_modal textarea:focus, .tree_modal_backdrop .tree_form_section input:focus, .tree_modal_backdrop .tree_form_section select:focus, .tree_utility_field input:focus, .events_modal input:focus, .events_modal textarea:focus, .projects_modal_form input:focus, .projects_modal_form select:focus, .projects_modal_form textarea:focus, .finance_modal input:focus, .finance_modal select:focus, .finance_modal textarea:focus, .gallery_edit_form input:focus, .gallery_edit_form textarea:focus, .history_field input:focus, .history_field select:focus, .document_field input:focus, .document_field select:focus, .document_field textarea:focus { border-color: var(--secondary_color_lighter4); } .racinage_modal input::placeholder, .racinage_modal select::placeholder, .racinage_modal textarea::placeholder, .tree_modal_backdrop .tree_form_section input::placeholder, .tree_modal_backdrop .tree_form_section select::placeholder, .tree_utility_field input::placeholder, .events_modal input::placeholder, .events_modal textarea::placeholder, .projects_modal_form input::placeholder, .projects_modal_form select::placeholder, .projects_modal_form textarea::placeholder, .finance_modal input::placeholder, .finance_modal select::placeholder, .finance_modal textarea::placeholder, .gallery_edit_form input::placeholder, .gallery_edit_form textarea::placeholder, .history_field input::placeholder, .history_field select::placeholder, .document_field input::placeholder, .document_field select::placeholder, .document_field textarea::placeholder { color: #bbb; } .racinage_modal input[type=checkbox], .racinage_modal input[type=radio] { min-height: 0; padding: 10px !important; } .racinage_form_photo, .tree_image_picker, .events_image_drop, .projects_image_drop, .gallery_dropzone, .document_dropzone, .history_dropzone { position: relative; display: grid !important; place-items: center; justify-content: center; gap: 10px; overflow: hidden; min-height: 190px; margin: 0 0 0.5rem 0; padding: 26px; border: 2px dashed var(--main_color_lighter2); border-radius: 12px; background: var(--main_color_lighter5); text-align: center; cursor: pointer; } .racinage_form_photo input[type=file], .tree_image_picker input[type=file], .events_image_drop input[type=file], .projects_image_drop input[type=file], .gallery_dropzone input[type=file], .document_dropzone input[type=file], .history_dropzone input[type=file] { display: none; } .racinage_form_photo strong, .tree_image_picker strong, .events_image_drop strong, .projects_image_drop strong, .gallery_dropzone strong, .document_dropzone strong, .history_dropzone strong { color: var(--text_color); font-size: 17px; line-height: 1.3; } .racinage_form_photo small, .tree_image_picker small, .events_image_drop small, .projects_image_drop small, .gallery_dropzone small, .document_dropzone small, .history_dropzone small { color: var(--text_color_lighter1); font-size: 13px; line-height: 1.4; } .racinage_form_photo:hover, .tree_image_picker:hover, .events_image_drop:hover, .projects_image_drop:hover, .gallery_dropzone:hover, .document_dropzone:hover, .history_dropzone:hover { border-color: var(--main_color_lighter2); } .racinage_form_photo.dragging, .tree_image_picker.dragging, .events_image_drop.dragging, .projects_image_drop.dragging, .gallery_dropzone.dragging, .document_dropzone.dragging, .history_dropzone.dragging { border-style: solid; background: var(--main_color_lighter4); } .tree_image_preview { border-color: var(--main_color_lighter2); background: transparent; } .racinage_modal_actions, .tree_modal_actions, .events_modal_actions, .projects_modal_actions, .finance_modal_actions, .gallery_dialog_actions, .history_modal_actions, .document_modal_actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } /* ── Help Centre (manage/help) ───────────────────────────────────────────── */ .help_centre .help_tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; } .help_centre .help_tabs .help_tab { padding: 8px 16px; border: 1px solid var(--border_color); background: var(--white_color); border-radius: 100px; font-size: 0.85rem; cursor: pointer; color: inherit; } .help_centre .help_tabs .help_tab.active { background: var(--main_color); border-color: var(--main_color); color: #fff; } .help_centre .help_tabs .help_add_new { margin-left: auto; height: 36px; border-radius: 100px; } .help_centre .help_tabs .help_add_new span { font-size: 1rem; line-height: 1; } .help_centre .help_panel { display: none; } .help_centre .help_panel.active { display: flex; flex-direction: column; min-height: calc(100vh - 250px); margin-bottom: 40px; } .help_system_layout { display: grid; grid-template-columns: 290px 1fr; flex: 1; height: auto; min-height: min(420px, 100vh - 250px); overflow: hidden; border: 1px solid var(--border_color); border-radius: 14px; background: var(--white_color); } .help_left_panel { display: flex; flex-direction: column; background: var(--bg_color); border-right: 1px solid var(--border_color); overflow: hidden; border-radius: 14px 0 0 14px; } .help_left_panel .help_search_wrap { padding: 12px; border-bottom: 1px solid var(--border_color); flex-shrink: 0; } .help_left_panel .help_search_wrap .help_search_input { width: 100%; padding: 8px 12px; font-size: 0.85rem; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); outline: none; box-sizing: border-box; } .help_left_panel .help_search_wrap .help_search_input:focus { border-color: var(--main_color); } .help_left_panel .help_articles_list { flex: 1; overflow-y: auto; padding: 6px 0 12px; } .help_category { margin-bottom: 4px; } .help_category .help_category_title { padding: 10px 16px 4px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--main_color); } .help_article_item { display: flex; align-items: center; gap: 4px; padding: 0 6px 0 12px; border-radius: 8px; margin: 1px 8px; position: relative; } .help_article_item:hover, .help_article_item.active { background: var(--main_color_lighter5); } .help_article_item:hover .doc_dots_btn { opacity: 1; } .help_article_item.active .help_article_item_title { color: var(--main_color); } .help_article_item .help_article_link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 0; cursor: pointer; } .help_article_item .help_article_item_title { font-size: 0.85rem; line-height: 1.35; } .help_article_item .help_article_item_cat { font-size: 0.68rem; color: #999; } .help_article_item .help_article_actions { flex-shrink: 0; position: relative; } .help_article_item .doc_dots_btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent; cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s; } .help_article_item .doc_dots_btn:hover { background: var(--bg_color); } .help_article_item .doc_dots_btn svg { width: 14px; height: 14px; fill: #888; } .doc_ctx_menu { display: none; position: fixed; z-index: 200; background: var(--white_color); border: 1px solid var(--border_color); border-radius: 10px; padding: 6px 0; min-width: 150px; } .doc_ctx_menu.open { display: block; } .doc_ctx_menu .doc_ctx_item { padding: 8px 16px; font-size: 0.82rem; cursor: pointer; } .doc_ctx_menu .doc_ctx_item:hover { background: var(--bg_color); } .doc_ctx_menu .doc_ctx_item.archive { color: var(--secondary_color); } .doc_ctx_menu .doc_ctx_item.delete { color: #c0392b; } .help_article_form { display: flex; flex-direction: column; gap: 14px; max-width: 640px; } .help_article_form .help_form_title { margin: 0; font-size: 1.25rem; } .help_article_form .help_form_field { display: flex; flex-direction: column; gap: 6px; } .help_article_form .help_form_field span { font-size: 0.8rem; color: #888; } .help_article_form .help_form_field input, .help_article_form .help_form_field select, .help_article_form .help_form_field textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: inherit; font-family: inherit; font-size: 0.9rem; } .help_article_form .help_form_field input:focus, .help_article_form .help_form_field select:focus, .help_article_form .help_form_field textarea:focus { outline: none; border-color: var(--main_color); } .help_article_form .help_form_field textarea { resize: vertical; line-height: 1.5; } .help_article_form .help_form_actions { display: flex; gap: 10px; justify-content: flex-end; } .help_article_form .tree_primary_action, .help_article_form .tree_secondary_action { padding: 9px 20px; border-radius: 8px; font-size: 0.85rem; cursor: pointer; border: 1px solid var(--border_color); background: var(--white_color); color: inherit; } .help_article_form .tree_primary_action { background: var(--main_color); border-color: var(--main_color); color: #fff; } .help_form_feedback { font-size: 0.82rem; } .help_form_feedback.error { color: #c0392b; } .help_form_feedback.success { color: var(--green_color, #1c9c4d); } .help_form_feedback:empty { display: none; } .help_support_form .help_support_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .help_support_form .help_support_card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border_color); border-radius: 12px; padding: 14px 16px; background: var(--bg_color); } .help_support_form .help_support_card input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: inherit; font-size: 0.9rem; } .help_support_form .help_support_card input:focus { outline: none; border-color: var(--main_color); } .help_support_form .help_support_form_actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; } .help_search_results_label { padding: 10px 16px 4px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #999; } .help_no_results { padding: 22px 16px; font-size: 0.85rem; color: #999; text-align: center; } .help_right_panel { overflow-y: auto; border-radius: 0 14px 14px 0; } #help_article_content { min-height: 100%; padding: 30px 36px; } .help_article_welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50vh; text-align: center; color: #bbb; } .help_article_welcome .help_welcome_icon svg { width: 50px; height: 50px; fill: var(--border_color); margin-bottom: 14px; } .help_article_welcome .help_welcome_title { font-size: 1.1rem; font-weight: 600; color: #bbb; margin: 0 0 6px; } .help_article_welcome .help_welcome_sub { font-size: 0.85rem; color: #bbb; margin: 0; } .help_article_view .help_article_view_meta { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--main_color); } .help_article_view .help_article_view_title { margin: 6px 0 0; font-size: 1.4rem; } .help_article_view .help_article_view_divider { border: none; border-top: 1px solid var(--border_color); margin: 14px 0 18px; } .help_article_view .help_article_view_body { font-size: 0.92rem; line-height: 1.7; } .help_article_view .help_article_view_body h3 { font-size: 1.02rem; margin: 18px 0 8px; } .help_article_view .help_article_view_body p { margin: 0 0 12px; } .help_article_view .help_article_view_body ul, .help_article_view .help_article_view_body ol { margin: 0 0 12px; padding-left: 20px; } .help_article_view .help_article_view_body li { margin: 4px 0; } .help_article_view .help_article_view_body a { color: var(--main_color); } .help_article_view .help_article_view_body .help_article_screenshot { margin: 20px 0; } .help_article_view .help_article_view_body .help_article_screenshot img { display: block; width: 100%; height: auto; border: 1px solid var(--border_color); border-radius: 8px; } .help_article_view .help_article_view_body .help_article_screenshot figcaption { margin-top: 7px; color: var(--text_color_lighter1); font-size: 0.78rem; line-height: 1.4; } .help_support_panel { border: 1px solid var(--border_color); border-radius: 14px; background: var(--white_color); padding: 26px 28px; max-width: 720px; } .help_support_panel .help_support_title { margin: 0 0 8px; font-size: 1.25rem; } .help_support_panel .help_support_intro { margin: 0 0 18px; color: #888; font-size: 0.9rem; } .help_support_panel .help_customer_service { display: flex; flex-direction: column; gap: 14px; margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--bg_color); } .help_support_panel .help_customer_service h3 { margin: 0 0 6px; font-size: 1rem; } .help_support_panel .help_customer_service p { margin: 0; color: #888; font-size: 0.86rem; line-height: 1.45; } .help_support_panel .help_topic_field { display: flex; flex-direction: column; gap: 6px; } .help_support_panel .help_topic_field span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #999; } .help_support_panel .help_topic_field select { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: inherit; font-size: 0.9rem; } .help_support_panel .help_topic_field select:focus { outline: none; border-color: var(--main_color); } .help_support_panel .help_topic_actions { display: flex; flex-wrap: wrap; gap: 10px; } .help_support_panel .help_topic_actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border-radius: 8px; font-size: 0.84rem; font-weight: 600; text-decoration: none; } .help_support_panel .help_topic_actions .help_topic_docs { background: var(--main_color); color: #fff; } .help_support_panel .help_topic_actions .help_topic_contact { border: 1px solid var(--border_color); background: var(--white_color); color: var(--main_color); } .help_support_panel .help_support_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .help_support_panel .help_support_card { border: 1px solid var(--border_color); border-radius: 12px; padding: 16px 18px; background: var(--bg_color); } .help_support_panel .help_support_card .help_support_card_title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #999; margin-bottom: 6px; } .help_support_panel .help_support_card .help_support_card_value { font-size: 0.95rem; } .help_support_panel .help_support_card .help_support_card_value a { color: var(--main_color); } .help_support_panel .help_support_tip { margin: 18px 0 0; font-size: 0.85rem; color: #999; } @media (max-width: 760px) { .help_system_layout { grid-template-columns: 1fr; height: auto; } .help_left_panel { border-right: none; border-bottom: 1px solid var(--border_color); border-radius: 14px 14px 0 0; max-height: 320px; } .help_right_panel { border-radius: 0 0 14px 14px; } .help_support_panel .help_topic_actions { flex-direction: column; } .help_support_panel .help_topic_actions a { width: 100%; box-sizing: border-box; } .help_support_panel .help_support_grid { grid-template-columns: 1fr; } } /* ── Notifications (manage/notifications) ───────────────────────────────── */ .notifications_centre .notifications_toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 12px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); } .notifications_centre .notifications_filters { display: flex; flex-wrap: wrap; gap: 8px; } .notifications_centre .notifications_toolbar_right { display: flex; align-items: center; gap: 12px; } .notifications_centre .notifications_unread_count { font-size: 0.82rem; color: var(--text_color_lighter1); white-space: nowrap; } .notifications_centre .manage_filter_select { height: 40px; padding: 0 0.625rem; font-size: 0.8125rem; border: 0.0625rem solid var(--border_color); border-radius: 0.5rem; background: var(--white_color); color: inherit; cursor: pointer; transition: border-color 0.15s; } .notifications_centre .manage_filter_select:focus { outline: none; border-color: var(--main_color); } .notifications_centre .manage_add_new_btn { display: flex; align-items: center; gap: 0.375rem; min-height: 40px; padding: 0 0.875rem; background: var(--main_color); color: #fff; border: none; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; } .notifications_centre .manage_add_new_btn:hover { opacity: 0.88; } .notifications_feed { display: flex; flex-direction: column; gap: 8px; } .notification_item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); } .notification_item.unread { border-color: var(--main_color_lighter4); background: var(--main_color_lighter5); } .notification_item .notification_icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg_color); border: 1px solid var(--border_color); } .notification_item .notification_icon svg { width: 18px; height: 18px; fill: var(--main_color); } .notification_item .notification_icon.notif_recommendation_received svg { fill: var(--secondary_color); } .notification_item .notification_icon.notif_share_deleted svg { fill: #c0392b; } .notification_item .notification_body { min-width: 0; } .notification_item .notification_top { display: flex; align-items: center; gap: 8px; min-height: 22px; } .notification_item .notification_title { color: var(--text_color); font-weight: 700; font-size: 0.92rem; } .notification_item .notification_dot { width: 8px; height: 8px; border-radius: 50%; background: var(--main_color); flex-shrink: 0; } .notification_item .notification_message { margin-top: 3px; font-size: 0.86rem; color: var(--text_color_lighter1); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .notification_item .notification_meta { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.74rem; color: var(--text_color_lighter2); } .notification_item .notification_actions { margin-top: 9px; display: flex; gap: 8px; } .notification_item .notification_open, .notification_item .notification_mark { font-size: 0.76rem; min-height: 32px; padding: 6px 12px; border-radius: 100px; cursor: pointer; text-decoration: none; border: 1px solid var(--border_color); background: var(--white_color); color: inherit; } .notification_item .notification_open { border-color: var(--main_color); color: var(--main_color); } .notification_item .notification_mark:hover { background: var(--bg_color); } .notification_item .notification_menu_wrapper { position: relative; align-self: start; } .notification_item .notification_menu_toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; } .notification_item .notification_menu_toggle svg { width: 18px; height: 18px; fill: var(--text_color_lighter1); } .notification_item .notification_menu_toggle:hover, .notification_item .notification_menu_toggle[aria-expanded=true] { border-color: var(--border_color); background: var(--bg_color); } .notification_item .notification_action_menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 200; } .notification_item .notification_action_menu.open { display: block; } .notification_item .notification_action_menu button { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; } .notification_item .notification_action_menu button:disabled { cursor: not-allowed; opacity: 0.5; } .notification_item .notification_action_menu .danger_btn { color: var(--light_red); } .notifications_empty { text-align: center; padding: 48px 20px; color: var(--text_color_lighter2); } .notifications_empty .notifications_empty_title { font-size: 1rem; font-weight: 600; color: var(--text_color_lighter1); margin-bottom: 6px; } .notifications_empty .notifications_empty_sub { font-size: 0.85rem; } .notifications_loadmore_wrap { display: flex; justify-content: center; padding: 8px 0 2px; } .notifications_loadmore { font-size: 0.82rem; padding: 8px 22px; border-radius: 100px; border: 1px solid var(--border_color); background: var(--white_color); cursor: pointer; color: inherit; } .notifications_loadmore:hover { background: var(--bg_color); } .sa_notifications_sentinel { min-height: 24px; } /* ============================================================================ Super-Admin dashboard (admin7839). Moved here from inline styles. ============================================================================ */ .sa_body { margin: 0; min-height: 100vh; background: var(--bg_color); color: var(--text_color); } .right_menu_admin.dash-right-panel { min-height: 0; overflow-y: auto; } /* Header */ .sa_header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 16px; padding: 0 20px; height: 60px; background: var(--white_color); border-bottom: 1px solid var(--border_color); } .sa_header .sa_logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text_color); font-weight: 700; font-size: 1.05rem; white-space: nowrap; } .sa_header .sa_logo img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; } .sa_header .sa_nav { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 auto; min-width: 0; flex: 1 1 auto; scrollbar-width: none; -ms-overflow-style: none; } .sa_header .sa_nav::-webkit-scrollbar { width: 0; height: 0; background: transparent; } .sa_header .sa_nav.is-scrolling { scrollbar-width: thin; scrollbar-color: var(--border_color_darker) transparent; } .sa_header .sa_nav.is-scrolling::-webkit-scrollbar { width: 5px; height: 5px; } .sa_header .sa_nav.is-scrolling::-webkit-scrollbar-track { background: transparent; } .sa_header .sa_nav.is-scrolling::-webkit-scrollbar-thumb { background: var(--border_color_darker); border-radius: 999px; } .sa_header .sa_nav .sa_nav_group { position: relative; flex: 0 0 auto; } .sa_header .sa_nav .sa_nav_group.active .sa_nav_group_toggle { border-color: var(--main_color_lighter3); background: transparent; color: var(--main_color); } .sa_header .sa_nav .sa_nav_group:hover .sa_nav_group_menu, .sa_header .sa_nav .sa_nav_group:focus-within .sa_nav_group_menu { display: grid; } .sa_header .sa_nav .sa_nav_group_toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text_color_lighter1); cursor: pointer; font-size: 0.9rem; font-weight: 650; line-height: 1; white-space: nowrap; } .sa_header .sa_nav .sa_nav_group_toggle:hover, .sa_header .sa_nav .sa_nav_group_toggle:focus-visible { background: var(--border_color_lighter); color: var(--text_color); } .sa_header .sa_nav .sa_nav_group_chev { font-size: 0.72rem; line-height: 1; } .sa_header .sa_nav .sa_nav_group_menu { display: none; position: absolute; top: 100%; left: 0; z-index: 120; min-width: 218px; padding: 8px 6px 6px; gap: 2px; background: var(--white_color); border: 1px solid var(--border_color); border-radius: 8px; } .sa_header .sa_nav .sa_nav_link { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; text-decoration: none; font-size: 0.9rem; font-weight: 500; color: var(--text_color_lighter1); transition: background 0.15s, color 0.15s; } .sa_header .sa_nav .sa_nav_link:hover { background: var(--border_color_lighter); color: var(--text_color); } .sa_header .sa_nav .sa_nav_link.active { background: var(--main_color_lighter5); color: var(--main_color); font-weight: 600; } .sa_header .sa_nav .sa_nav_icon { display: none; width: 18px; height: 18px; flex: 0 0 18px; color: inherit; } .sa_header .sa_nav .sa_nav_icon svg { width: 18px; height: 18px; fill: currentColor; } .sa_header .sa_cta { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: auto; border-bottom: 0; } .sa_global_search { position: relative; flex: 1 1 280px; width: min(500px, 100%); max-width: 500px; min-width: 180px; margin-right: auto; } .sa_global_search .sa_global_search_toggle { display: none; } .sa_global_search .sa_global_search_panel { position: relative; display: flex; align-items: center; width: 100%; } .sa_global_search .sa_global_search_icon { position: absolute; left: 13px; z-index: 1; display: inline-flex; width: 18px; height: 18px; color: var(--text_color_lighter1); pointer-events: none; } .sa_global_search .sa_global_search_icon svg { width: 100%; height: 100%; fill: currentColor; } .sa_global_search .sa_global_search_input { width: 100%; height: 40px; padding: 0 40px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); font: inherit; font-size: 0.86rem; box-sizing: border-box; } .sa_global_search .sa_global_search_input:focus { border-color: var(--main_color); outline: 2px solid var(--main_color_lighter4); } .sa_global_search .sa_global_search_indicator { position: absolute; right: 13px; display: none; width: 14px; height: 14px; border: 2px solid var(--border_color_darker); border-top-color: var(--main_color); border-radius: 50%; } .sa_global_search .sa_global_search_indicator.htmx-request { display: block; animation: global_search_spin 0.7s linear infinite; } .sa_global_search .sa_global_search_results { position: absolute; top: calc(100% + 6px); left: 0; z-index: 260; width: 100%; max-height: min(560px, 100vh - 84px); overflow: auto; border: 1px solid var(--border_color); border-radius: 10px; background: var(--white_color); box-sizing: border-box; } .sa_global_search .sa_global_search_results:empty { display: none; } .sa_global_search .sa_global_search_dropdown { display: grid; } .sa_global_search .sa_global_search_group { display: grid; gap: 2px; padding: 8px; } .sa_global_search .sa_global_search_group + .sa_global_search_group { border-top: 1px solid var(--border_color); } .sa_global_search .sa_global_search_group h3 { margin: 0; padding: 5px 7px; color: var(--text_color_lighter1); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; } .sa_global_search .sa_global_search_result { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px; border-radius: 7px; color: var(--text_color); text-decoration: none; box-sizing: border-box; } .sa_global_search .sa_global_search_result:hover, .sa_global_search .sa_global_search_result:focus-visible { background: var(--main_color_lighter5); outline: none; } .sa_global_search .sa_global_search_result > span:last-child { display: grid; gap: 2px; min-width: 0; } .sa_global_search .sa_global_search_result strong, .sa_global_search .sa_global_search_result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sa_global_search .sa_global_search_result strong { font-size: 0.84rem; } .sa_global_search .sa_global_search_result small { color: var(--text_color_lighter1); font-size: 0.72rem; } .sa_global_search .sa_global_search_result_icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; background: var(--main_color_lighter5); color: var(--main_color); font-size: 0.72rem; font-weight: 800; } .sa_global_search .sa_global_search_empty { margin: 0; padding: 18px; color: var(--text_color_lighter1); text-align: center; font-size: 0.82rem; } .sa_lang { position: relative; } .sa_lang .sa_lang_toggle { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--text_color); } .sa_lang .sa_lang_toggle img { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; } .sa_lang .sa_lang_menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px; padding: 5px; background: var(--white_color); border: 1px solid var(--border_color); border-radius: 10px; z-index: 50; } .sa_lang .sa_lang_menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; text-decoration: none; font-size: 0.85rem; color: var(--text_color); } .sa_lang .sa_lang_menu a img { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; } .sa_lang .sa_lang_menu a:hover { background: var(--border_color_lighter); } .sa_lang .sa_lang_menu a.active { background: var(--main_color_lighter5); color: var(--main_color); font-weight: 700; } .sa_lang.open .sa_lang_menu { display: block; } .sa_theme_grid { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .sa_theme_grid button { min-width: 0; height: 40px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color_lighter1); font-size: 0.8rem; font-weight: 700; cursor: pointer; } .sa_theme_grid button:hover { background: var(--border_color_lighter); color: var(--text_color); } .sa_theme_grid button.active { border-color: var(--main_color_lighter3); background: var(--main_color_lighter5); color: var(--main_color); } html[data-menu=left] .sa_header .sa_cta .sa_theme_grid button { height: 40px; min-height: 40px; padding: 0 12px; } .sa_icon_btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; padding: 0; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); cursor: pointer; color: var(--text_color_lighter1); } .sa_icon_btn svg { width: 18px; height: 18px; fill: currentColor; } .sa_icon_btn:hover { background: var(--border_color_lighter); } .sa_icon_btn.active { color: var(--main_color); border-color: var(--main_color_lighter3); } .sa_account { display: flex; align-items: center; gap: 10px; } .sa_account .sa_account_name { font-size: 0.85rem; font-weight: 600; color: var(--text_color_lighter1); white-space: nowrap; } .sa_hamburger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; min-width: 40px; padding: 0 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); cursor: pointer; } .sa_hamburger span { display: block; height: 2px; border-radius: 2px; background: var(--text_color); transition: transform 0.2s, opacity 0.2s; } .sa_hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .sa_hamburger.open span:nth-child(2) { opacity: 0; } .sa_hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .sa_nav_overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 90; } .sa_nav_overlay.open { display: block; } .sa_main { max-width: 1350px; margin: 0 auto; padding: 24px 20px 60px; } .sa_page_head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .sa_page_head h1 { font-size: 1.4rem; margin: 0; } .sa_card { background: var(--white_color); border: 1px solid var(--border_color); border-radius: 12px; padding: 20px; margin-bottom: 20px; } .sa_card_title { font-size: 1rem; margin: 0 0 14px; } .sa_muted { color: var(--text_color_lighter1); font-size: 0.85rem; line-height: 1.5; } p.sa_muted, div.sa_muted { margin: 8px 0 0; } .sa_hint { font-size: 0.8rem; margin: 8px 0 0; } .sa_subhead { font-weight: 600; font-size: 0.85rem; margin-top: 6px; } .sa_stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; } .sa_stats .sa_stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--white_color); border: 1px solid var(--border_color); border-radius: 12px; } .sa_stats .sa_stat .sa_stat_val { font-size: 1.5rem; font-weight: 700; color: var(--text_color); } .sa_stats .sa_stat .sa_stat_label { font-size: 0.78rem; color: var(--text_color_lighter1); text-transform: uppercase; letter-spacing: 0.03em; } .sa_stats .sa_stat.sa_stat_active .sa_stat_val { color: #0a8f5b; } .sa_stats .sa_stat.sa_stat_suspended .sa_stat_val { color: #a96a00; } .sa_stats .sa_stat.sa_stat_deleted .sa_stat_val { color: #c0392b; } .sa_toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; } .sa_toolbar .form_input { margin: 0; } .sa_toolbar .sa_search { width: 240px; max-width: 100%; } .sa_toolbar .sa_auto { width: auto; } .sa_btn, .sa_dropdown_item, .sa_table_page_btn { text-transform: capitalize; } .sa_newsletter_stats_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; } .sa_newsletter_stats_grid .sa_card { margin: 0; } .sa_newsletter_stats_grid .sa_stats { margin-bottom: 0; } .sa_newsletter_toolbar .form_input { width: min(240px, 100%); } .sa_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .sa_grid .form_input { margin: 0; } .sa_grid label { display: flex; flex-direction: column; gap: 4px; } .sa_grid .sa_full { grid-column: 1/-1; } .sa_check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; } .sa_grid label.sa_check { flex-direction: row; align-items: center; } .sa_check input[type=checkbox] { width: 16px; height: 16px; flex-shrink: 0; margin: 0; accent-color: var(--main_color); } .sa_check_list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 8px; } .sa_check_list .sa_check { margin: 0; padding: 9px 11px; border: 1px solid var(--border_color); border-radius: 8px; cursor: pointer; line-height: 1.3; } .sa_check_list .sa_check small { color: var(--text_color_lighter1); } .sa_check_list .sa_check:hover { border-color: var(--main_color_lighter3); } .sa_check_list .sa_check:has(input:checked) { border-color: var(--main_color); background: var(--main_color_lighter5); } .sa_inline_check { align-self: end; } .sa_activity_bulk_form { display: flex; justify-content: flex-end; margin-left: auto; } .sa_activities_toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; } .sa_activities_toolbar .sa_activity_filter_form { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: flex-end; gap: 10px; } .sa_activities_toolbar .sa_activity_filter_form label { min-width: 0; display: grid; gap: 5px; } .sa_activities_toolbar .sa_activity_filter_form .label_form { padding: 2px 5px; font-weight: 500; font-size: 13px; } .sa_activities_toolbar .sa_activity_filter_form .form_input { width: 100%; min-width: 0; } .sa_activities_toolbar .sa_activity_toolbar_actions { display: flex; align-items: flex-end; gap: 8px; padding-bottom: 1px; } .sa_activities_table small { display: block; color: var(--text_color_lighter1); margin-top: 2px; } .sa_activities_table td { vertical-align: middle; } .sa_activities_table .sa_activity_action { min-width: 250px; line-height: 1.4; } .sa_activity_actor { display: inline-flex; align-items: center; gap: 9px; min-width: 180px; } .sa_activity_actor > span:last-child { display: flex; min-width: 0; flex-direction: column; line-height: 1.25; } .sa_activity_actor strong { color: var(--text_color); font-size: 0.84rem; } .sa_activity_actor small { color: var(--text_color_lighter1); font-size: 0.74rem; } .sa_activity_day { padding: 0; overflow: hidden; } .sa_activity_day .sa_activity_day_header { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 12px 8px 16px; background: var(--bg_color_darker); } .sa_activity_day .sa_activity_day_header h2 { margin: 0; color: var(--text_color); font-size: 0.92rem; font-weight: 700; } .sa_activity_day .sa_activity_day_select { display: grid; place-items: center; min-width: 32px; min-height: 40px; cursor: pointer; } .sa_activity_day .sa_activity_day_select input { width: 18px; height: 18px; margin: 0; accent-color: var(--main_color); } .sa_activity_day .sa_activity_day_count { display: inline-grid; place-items: center; min-width: 26px; min-height: 26px; padding: 2px 7px; border: 1px solid var(--border_color); border-radius: 999px; color: var(--text_color_lighter1); font-size: 0.75rem; font-weight: 700; } .sa_activity_day .sa_activity_day_toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text_color_lighter1); cursor: pointer; } .sa_activity_day .sa_activity_day_toggle span { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.16s ease; } .sa_activity_day .sa_activity_day_toggle[aria-expanded=false] span { transform: rotate(-135deg); } .sa_activity_day .sa_activity_day_toggle:hover { background: var(--border_color_lighter); color: var(--main_color); } .sa_activity_day [data-activity-day-body] { border-top: 1px solid var(--border_color); } .sa_server_pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 16px 0; } .sa_server_pagination span { color: var(--text_color_lighter1); font-size: 0.85rem; } .sa_activities_back_to_top { right: 20px; left: auto; z-index: 120; } .sa_activity_exceptions_modal .sa_modal_card { max-width: 720px; } .sa_activity_exceptions_modal .sa_activity_exceptions_body { display: grid; gap: 14px; } .sa_activity_exceptions_modal .sa_activity_exceptions_head { display: flex; justify-content: flex-end; } .sa_activity_exceptions_modal .sa_activity_exception_add { padding: 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color_darker); } .sa_activity_exceptions_modal .sa_activity_exception_add label { display: grid; gap: 4px; } .sa_activity_exceptions_modal .sa_activity_exception_list, .sa_activity_exceptions_modal .sa_activity_exception_candidates { display: grid; gap: 8px; } .sa_activity_exceptions_modal .sa_activity_exception_list article, .sa_activity_exceptions_modal .sa_activity_exception_candidates button { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); text-align: left; } .sa_activity_exceptions_modal .sa_activity_exception_list article span, .sa_activity_exceptions_modal .sa_activity_exception_candidates button span { display: flex; min-width: 0; flex-direction: column; } .sa_activity_exceptions_modal .sa_activity_exception_list article small, .sa_activity_exceptions_modal .sa_activity_exception_candidates button small { color: var(--text_color_lighter1); } .sa_activity_exceptions_modal .sa_activity_exception_candidates button { cursor: pointer; } .sa_color_row { display: flex; gap: 8px; align-items: center; } .sa_color { width: 46px; height: 38px; padding: 2px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); cursor: pointer; } .sa_current_img { display: inline-flex; padding: 6px; border: 1px solid var(--border_color); border-radius: 8px; margin-bottom: 6px; width: fit-content; } .sa_current_img img { height: 40px; width: auto; max-width: 160px; object-fit: contain; } .sa_segmented { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: min(100%, 360px); justify-self: start; align-self: start; gap: 4px; padding: 4px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color_darker); } .sa_segmented .sa_seg { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text_color_lighter1); font-size: 0.85rem; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .sa_segmented .sa_seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .sa_segmented .sa_seg:hover { color: var(--text_color); } .sa_segmented .sa_seg:has(input:checked) { border-color: var(--border_color); background: var(--white_color); color: var(--main_color); font-weight: 700; } .sa_segmented .sa_seg:focus-within { outline: 2px solid var(--main_color_lighter3); outline-offset: 1px; } .sa_preferences_card { display: grid; gap: 18px; } .sa_settings_page .sa_segmented_field { display: grid; min-width: 0; align-content: start; gap: 6px; } .sa_settings_page .sa_segmented_field .label_form, .sa_settings_page .sa_segmented_field .sa_muted { margin: 0; } .sa_settings_page .sa_segmented_field .sa_muted { line-height: 1.45; } .sa_settings_page .sa_settings_system_form { gap: 16px 18px; } .sa_settings_page .sa_settings_system_form > .sa_card_title { margin: 8px 0 0; padding: 11px 12px; border-left: 3px solid var(--main_color); border-radius: 8px; background: var(--main_color_lighter5); font-size: 1rem; } .sa_settings_page .sa_settings_system_form > .sa_card_title:first-of-type { margin-top: 0; } .sa_settings_page .sa_settings_system_form .form_input { min-height: 44px; } .sa_settings_page .sa_settings_system_form .sa_check { min-height: 44px; } .sa_settings_page .sa_settings_system_form .sa_btn { min-height: 44px; padding-inline: 20px; } .sa_settings_page .sa_preferences_card, .sa_settings_page .sa_notif_prefs_card, .sa_settings_page .sa_sessions_card { padding: 20px; } .sa_settings_page .sa_preferences_card { grid-template-columns: repeat(3, minmax(220px, 360px)); align-items: start; justify-content: start; gap: 18px; } .sa_settings_page .sa_preferences_card .sa_card_title_row, .sa_settings_page .sa_preferences_card .sa_version_line { grid-column: 1/-1; } .sa_settings_page .sa_preferences_card .sa_pref_group { min-width: 0; height: 100%; align-content: start; } .sa_settings_page .sa_preferences_card .sa_settings_lang_grid, .sa_settings_page .sa_preferences_card .sa_settings_theme_grid, .sa_settings_page .sa_preferences_card .sa_segmented { width: 100%; max-width: 360px; } .sa_settings_page .sa_preferences_card .sa_version_line { max-width: none; margin-top: 2px; } .sa_settings_page .sa_card_title_row { min-height: 44px; } .sa_settings_page .sa_settings_choice { min-height: 44px; } .sa_settings_page .sa_notif_pref { min-height: 52px; } .sa_legal_intro { margin-bottom: 16px; } .sa_pref_group { display: grid; gap: 8px; } .sa_settings_lang_grid, .sa_settings_theme_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 360px; } .sa_preview_options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .sa_preview_options > .label_form { grid-column: 1/-1; } .sa_preview_options .sa_preview_device_group { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color_darker); } .sa_preview_options .sa_landing_tree_select { display: none; grid-column: 1/-1; max-width: 520px; } .sa_preview_options .sa_landing_video_select { display: none; grid-column: 1/-1; gap: 10px; } .sa_preview_options:has(input[value=dynamic_family_tree]:checked) .sa_landing_tree_select { display: grid; } .sa_preview_options:has(input[value=video_demo]:checked) .sa_landing_video_select { display: grid; } .sa_video_demo_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .sa_video_demo_card { display: grid; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .sa_video_demo_thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--border_color); border-radius: 6px; background: var(--bg_color); color: var(--text_color_lighter1); font-size: 0.84rem; } .sa_video_demo_thumb video, .sa_video_demo_thumb iframe { width: 100%; height: 100%; border: 0; object-fit: cover; } .sa_video_demo_thumb iframe { pointer-events: none; } .sa_video_demo_meta { display: grid; gap: 6px; } .sa_video_demo_meta strong { min-width: 0; overflow-wrap: anywhere; font-size: 0.9rem; } .sa_video_demo_meta .sa_check { margin: 0; } .sa_video_demo_add { align-content: start; } .sa_video_demo_add .sa_video_demo_plus { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--border_color); border-radius: 8px; color: var(--main_color); font-size: 2rem; line-height: 1; } .sa_settings_choice { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; } .sa_settings_choice img { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; } .sa_settings_choice:hover { background: var(--border_color_lighter); } .sa_settings_choice.active { border-color: var(--main_color_lighter3); background: var(--main_color_lighter5); color: var(--main_color); } .sa_version_line { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 360px; padding: 10px 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color_darker); } .sa_version_line span { color: var(--text_color_lighter1); font-size: 0.82rem; font-weight: 600; } .sa_version_line strong { color: var(--text_color); font-size: 0.86rem; } .sa_sessions_card .sa_muted { margin-bottom: 14px; line-height: 1.45; } .sa_btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .sa_btn:hover { background: var(--border_color_lighter); } .sa_btn.sa_btn_primary { background: var(--main_color); border-color: var(--main_color); color: #fff; } .sa_btn.sa_btn_primary:hover { background: var(--main_color_darker); } .sa_btn.sa_btn_danger { background: #c0392b; border-color: #c0392b; color: #fff; } .sa_btn.sa_btn_danger:hover { background: #a5301f; } .sa_btn.sa_btn_ghost { background: transparent; } .sa_btn.sa_btn_sm { padding: 5px 10px; font-size: 0.75rem; } .sa_inline_form { display: inline; } .sa_row_status { display: flex; gap: 5px; flex-wrap: wrap; } .sa_action_cell { position: relative; width: 42px; } .sa_actions { position: relative; display: inline-flex; } .sa_dots_btn { width: 32px; min-width: 32px; height: 32px; padding: 0; align-items: center; justify-content: center; font-size: 1.15rem; line-height: 1; } .sa_actions_menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 150px; padding: 4px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .sa_actions_menu .sa_inline_form { display: block; } .sa_actions.open .sa_actions_menu { display: grid; gap: 2px; visibility: hidden; } .sa_actions.open .sa_actions_menu[data-positioned="1"] { position: fixed; visibility: visible; } .sa_dropdown_item { width: 100%; border: 0; background: transparent; color: var(--text_color); display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; font-size: 0.84rem; text-align: left; cursor: pointer; } .sa_dropdown_item:hover { background: var(--border_color_lighter); } .sa_dropdown_item svg { width: 16px; height: 16px; flex: 0 0 16px; fill: currentColor; } .sa_dropdown_item.danger { color: var(--light_red); } .sa_details_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sa_detail_identity { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border_color); } .sa_detail_identity > div { min-width: 0; display: grid; gap: 2px; } .sa_detail_identity > div > strong { overflow: hidden; color: var(--text_color); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; } .sa_detail_identity > div > span { color: var(--text_color_lighter1); font-size: 0.78rem; } .sa_detail_identity .sa_modal_avatar { width: 52px; height: 52px; } .sa_detail_family_icon { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--main_color_lighter5); color: var(--main_color); } .sa_detail_family_icon svg { width: 28px; height: 28px; fill: currentColor; } .sa_detail_item, .sa_detail_note { border: 1px solid var(--border_color); border-radius: 8px; padding: 10px 12px; background: var(--bg_color_lighter); } .sa_detail_label { display: block; margin-bottom: 4px; color: var(--text_color_lighter1); font-size: 0.74rem; font-weight: 600; } .sa_detail_item strong { display: block; color: var(--text_color); font-size: 0.92rem; font-weight: 600; word-break: break-word; } .sa_detail_status strong { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #e3f7ef; color: #0a8f5b; } .sa_detail_number strong { font-size: 1.1rem; } .sa_detail_note { margin-top: 10px; } .sa_detail_note p { margin: 0; color: var(--text_color); line-height: 1.5; } .sa_session_history { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border_color); } .sa_session_history_head, .sa_session_item_head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sa_session_history_head { margin-bottom: 10px; } .sa_session_history_head h3 { margin: 0; color: var(--text_color); font-size: 1rem; } .sa_session_history_head p { margin: 3px 0 0; color: var(--text_color_lighter1); font-size: 0.78rem; } .sa_session_history_head > span { min-width: 26px; padding: 3px 8px; border-radius: 999px; background: var(--main_color_lighter5); color: var(--main_color); font-size: 0.75rem; font-weight: 700; text-align: center; } .sa_session_history_list { display: grid; gap: 8px; max-height: 380px; overflow-y: auto; padding-right: 3px; } .sa_session_item { padding: 11px 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color_lighter); } .sa_session_item_head { margin-bottom: 9px; } .sa_session_item_head > strong { color: var(--text_color); font-size: 0.84rem; } .sa_session_meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; } .sa_session_meta > div { min-width: 0; } .sa_session_meta span { display: block; margin-bottom: 2px; color: var(--text_color_lighter1); font-size: 0.68rem; font-weight: 600; } .sa_session_meta strong { display: block; overflow: hidden; color: var(--text_color); font-size: 0.76rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .sa_badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; } .sa_badge.active { background: #e3f7ef; color: #0a8f5b; } .sa_badge.ended { background: var(--border_color_lighter); color: var(--text_color_lighter1); } .sa_badge.suspended { background: #fff3df; color: #a96a00; } .sa_badge.deleted { background: #fde8e8; color: #c0392b; } .sa_table_wrap { overflow-x: auto; } .sa_table_wrap:has(.sa_actions.open) { overflow: visible; } .sa_table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .sa_table th, .sa_table td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--border_color); vertical-align: middle; } .sa_table th { font-weight: 600; color: var(--text_color_lighter1); } .sa_table code { font-size: 0.8rem; } .sa_table .sa_counts span { display: inline-block; margin-right: 11px; color: var(--text_color_lighter1); white-space: nowrap; } .sa_table small { display: block; margin-top: 3px; color: var(--text_color_lighter1); } .sa_analytics_toolbar { flex-wrap: wrap; } .sa_analytics_toolbar .sa_search { flex: 1 1 220px; } .sa_demo_detail_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .sa_demo_detail_grid .sa_card { min-width: 0; margin-bottom: 0; } .sa_chart_card { display: grid; gap: 10px; max-height: 250px; overflow: hidden; } .sa_chart_card .sa_card_title_row { align-items: center; gap: 12px; margin-bottom: 10px; } .sa_chart_card .sa_muted { margin: 4px 0 0; } .sa_chart_filter { margin-left: auto; } .sa_chart_filter .form_input { min-height: 38px; } .sa_user_chart_svg { display: block; width: 100%; height: 112px; } .sa_user_chart_svg rect, .sa_user_chart_svg path { fill: var(--main_color); opacity: 0.72; } .sa_chart_axis { display: flex; justify-content: space-between; gap: 12px; color: var(--text_color_lighter1); font-size: 0.76rem; } .sa_analytics_sites, .sa_analytics_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; } .sa_analytics_grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); } .sa_analytics_site_card { display: grid; gap: 10px; margin-bottom: 0; } .sa_analytics_site_card h2 { margin: 0; font-size: 0.95rem; } .sa_analytics_site_card div { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--border_color); } .sa_analytics_site_card div span { color: var(--text_color_lighter1); font-size: 0.8rem; } .sa_analytics_split { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; } .sa_analytics_geo_card .sa_card_title { margin-bottom: 16px; } .sa_analytics_metric_group { min-width: 0; } .sa_analytics_metric_group h3 { margin: 0 0 8px; font-size: 0.86rem; color: var(--text_color); } .sa_analytics_metric_list { display: grid; gap: 2px; } .sa_analytics_metric_row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--border_color_lighter); } .sa_analytics_metric_row .sa_analytics_metric_text { min-width: 0; } .sa_analytics_metric_row strong, .sa_analytics_metric_row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sa_analytics_metric_row strong { color: var(--text_color); font-size: 0.86rem; } .sa_analytics_metric_row small, .sa_analytics_metric_row > span { color: var(--text_color_lighter1); font-size: 0.78rem; } .sa_analytics_metric_row > span { white-space: nowrap; } .sa_analytics_metric_icon, .sa_analytics_flag { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color_darker); color: var(--text_color_lighter1); overflow: hidden; } .sa_analytics_metric_icon svg, .sa_analytics_flag svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sa_analytics_flag { background: var(--white_color); } .sa_analytics_flag img { width: 100%; height: 100%; object-fit: cover; } .sa_analytics_settings_modal { display: grid; gap: 18px; } .sa_analytics_settings_group { gap: 12px; margin: 0; } .sa_analytics_settings_group .sa_card_title { margin: 0; font-size: 0.98rem; } .sa_analytics_settings_group textarea.form_input { min-height: 96px; line-height: 1.4; resize: vertical; } .sa_analytics_settings_group .sa_modal_actions { display: flex; gap: 10px; margin-top: 2px; } .sa_analytics_settings_group .sa_btn { min-height: 40px; padding-inline: 18px; } .sa_analytics_settings_hint { margin: 0; line-height: 1.45; overflow-wrap: anywhere; } .sa_analytics_settings_danger { padding-top: 18px; border-top: 1px solid var(--border_color); } .sa_analytics_lazy { display: grid; gap: 10px; max-height: 62vh; overflow: auto; padding-right: 2px; } .sa_analytics_lazy_row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color_lighter); } .sa_analytics_lazy_row strong, .sa_analytics_lazy_row small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sa_analytics_lazy_row small, .sa_analytics_lazy_row span, .sa_analytics_lazy_row time { color: var(--text_color_lighter1); font-size: 0.8rem; } .sa_analytics_lazy_metric { grid-template-columns: 34px minmax(0, 1fr) auto auto; } .sa_analytics_lazy_empty { margin: 0; } .sa_analytics_sessions { display: grid; gap: 12px; } .sa_analytics_session { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color_lighter); } .sa_analytics_session_head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .sa_analytics_session_head strong { color: var(--text_color); } .sa_analytics_session_head span { color: var(--text_color_lighter1); font-size: 0.8rem; } .sa_analytics_session_meta { color: var(--text_color_lighter1); font-size: 0.8rem; } .sa_analytics_journey { display: grid; gap: 5px; margin: 0; padding-left: 18px; } .sa_analytics_journey li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; color: var(--text_color_lighter1); font-size: 0.78rem; } .sa_analytics_journey li strong { min-width: 0; overflow: hidden; color: var(--text_color); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .sa_det { margin-top: 8px; } .sa_det > summary { cursor: pointer; color: var(--main_color); font-size: 0.8rem; } .sa_det_form { margin-top: 10px; } .sa_adduser { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border_color); } .sa_deleted_items { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border_color); } .sa_deleted_items .sa_deleted_items_head { display: grid; gap: 4px; margin-bottom: 12px; } .sa_deleted_items .sa_deleted_items_head h3 { margin: 0; font-size: 1rem; } .sa_deleted_items .sa_deleted_items_head p { margin: 0; color: var(--text_color_lighter1); font-size: 0.82rem; } .sa_deleted_items .sa_deleted_group { display: grid; gap: 8px; margin-top: 12px; } .sa_deleted_items .sa_deleted_group h4 { margin: 0; color: var(--text_color_lighter1); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; } .sa_deleted_items .sa_deleted_row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border_color); } .sa_deleted_items .sa_deleted_row strong { display: block; font-size: 0.9rem; } .sa_deleted_items .sa_deleted_row small { display: block; margin-top: 2px; color: var(--text_color_lighter1); font-size: 0.78rem; } .sa_msg { padding: 11px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 0.85rem; } .sa_msg.success { background: #e3f7ef; color: #0a8f5b; } .sa_msg.fail { background: #fde8e8; color: #c0392b; } .sa_login_wrap { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 100vh; min-height: 100dvh; padding: 24px; box-sizing: border-box; } .sa_login_card { width: 100%; max-width: 400px; margin: 0; padding: 32px 28px; } .sa_login_card .sa_login_logo { display: flex; justify-content: center; margin-bottom: 16px; } .sa_login_card .sa_login_logo img { width: 56px; height: 56px; object-fit: contain; border-radius: 14px; } .sa_login_card .sa_login_title { font-size: 1.3rem; margin: 0 0 4px; text-align: center; } .sa_login_card .sa_login_sub { text-align: center; color: var(--text_color_lighter1); font-size: 0.85rem; margin: 0 0 22px; } .sa_login_card .label_form { margin-top: 14px; } .sa_login_card .form_input.submit { margin-top: 22px; } /* Left menu layout (mirrors tools_registry data-menu="left") */ html[data-menu=left] #sa_content { margin-left: 230px; padding-top: 56px; } html[data-menu=left] .sa_header { position: fixed; top: 0; left: 0; bottom: 0; width: 230px; height: auto; flex-direction: column; align-items: stretch; gap: 18px; padding: 16px 0; border-bottom: none; border-right: 1px solid var(--border_color); overflow: visible; } html[data-menu=left] .sa_header .sa_logo { padding: 0 10px; font-size: 1rem; } html[data-menu=left] .sa_header .sa_nav { flex-direction: column; align-items: stretch; flex: 1 1 auto; gap: 3px; overflow-y: auto; justify-content: flex-start; width: 100%; margin: 0; min-height: 0; padding: 0 10px 20px; } html[data-menu=left] .sa_header .sa_nav .sa_nav_group { width: 100%; } html[data-menu=left] .sa_header .sa_nav .sa_nav_group_toggle { display: none; } html[data-menu=left] .sa_header .sa_nav .sa_nav_group_menu { position: static; display: grid; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; gap: 3px; } html[data-menu=left] .sa_header .sa_nav .sa_nav_link { width: 100%; } html[data-menu=left] .sa_header .sa_nav .sa_nav_icon { display: block; } html[data-menu=left] .sa_header .sa_cta { position: fixed; top: 0; left: 230px; right: 0; bottom: auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: auto; height: 56px; margin: 0; padding: 8px 20px; background: var(--white_color); border-bottom: 1px solid var(--border_color); box-sizing: border-box; z-index: 180; } html[data-menu=left] .sa_header .sa_icon_btn { display: none; } html[data-menu=left] .sa_header .sa_theme_grid { display: grid; } html[data-menu=left] .sa_main { width: min(1350px, 100% - 50px); margin: 0 auto; } /* Responsive */ @media (max-width: 820px) { html[data-menu=left] #sa_content { margin-left: 0; padding-top: 0; } .sa_settings_page .sa_preferences_card { grid-template-columns: minmax(0, 1fr); } html[data-menu=left] .sa_header, .sa_header { position: sticky; top: 0; left: 0; right: 0; bottom: auto; z-index: 170; flex-direction: row; align-items: center; width: auto; height: 56px; padding: 0 14px; border-right: none; border-bottom: 1px solid var(--border_color); overflow: visible; } html[data-menu=left] .sa_main, .sa_main { width: auto; margin-left: auto; padding: 18px 14px 50px; } .sa_analytics_sites, .sa_analytics_grid { grid-template-columns: 1fr; } .sa_demo_detail_grid { grid-template-columns: 1fr; } .sa_hamburger { display: flex; order: 3; align-self: center; margin-left: 0; } .sa_nav_overlay { z-index: 150; } .sa_header .sa_cta { margin-left: auto; gap: 6px; } html[data-menu=left] .sa_header .sa_cta { position: static; display: flex; flex-direction: row; align-items: center; gap: 6px; width: auto; margin: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background: transparent; border-top: 0; border-bottom: 0; } html[data-menu=left] .sa_header .sa_cta .sa_lang { width: auto; } html[data-menu=left] .sa_header .sa_cta .sa_lang .sa_lang_toggle { display: flex; width: auto; } html[data-menu=left] .sa_header .sa_cta .sa_lang .sa_lang_menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; left: auto; width: auto; min-width: 150px; padding: 5px; border: 1px solid var(--border_color); background: var(--white_color); } html[data-menu=left] .sa_header .sa_cta .sa_lang .sa_lang_menu a { justify-content: flex-start; padding: 8px 10px; border: 0; background: transparent; font-size: 0.85rem; } html[data-menu=left] .sa_header .sa_cta .sa_lang.open .sa_lang_menu { display: block; } html[data-menu=left] .sa_header .sa_icon_btn { display: inline-flex; } html[data-menu=left] .sa_header .sa_theme_grid { display: none; } .sa_account_name { display: none; } .sa_header .sa_nav, html[data-menu=left] .sa_header .sa_nav { position: fixed; top: 56px; right: 0; bottom: 0; height: calc(100dvh - 56px); flex-direction: column; align-items: stretch; gap: 4px; width: 250px; max-width: 82vw; margin: 0; padding: 25px 14px 20px; background: var(--white_color); border-left: 1px solid var(--border_color); transform: translateX(100%); transition: transform 0.22s ease; z-index: 190; overflow-y: auto; } .sa_header .sa_nav .sa_nav_group, html[data-menu=left] .sa_header .sa_nav .sa_nav_group { width: 100%; } .sa_header .sa_nav .sa_nav_group_toggle, html[data-menu=left] .sa_header .sa_nav .sa_nav_group_toggle { display: flex; width: 100%; min-height: 28px; justify-content: space-between; padding: 8px 12px 4px; border: 0; background: transparent; color: var(--text_color_lighter1); cursor: default; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; pointer-events: none; } .sa_header .sa_nav .sa_nav_group_menu, html[data-menu=left] .sa_header .sa_nav .sa_nav_group_menu { position: static; display: grid; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; gap: 4px; } .sa_header .sa_nav.open, html[data-menu=left] .sa_header .sa_nav.open { transform: translateX(0); } .sa_header .sa_nav .sa_nav_link { padding: 12px 14px; font-size: 0.95rem; } } @media (max-width: 520px) { .sa_logo span { display: none; } .sa_toolbar .sa_search { width: 100%; } .sa_stats { grid-template-columns: repeat(2, 1fr); } .sa_table thead { display: none; } .sa_table, .sa_table tbody, .sa_table tr, .sa_table td { display: block; width: 100%; } .sa_table tr { border: 1px solid var(--border_color); border-radius: 10px; padding: 6px 10px; margin-bottom: 12px; } .sa_table td { border: none; padding: 6px 0; display: flex; justify-content: space-between; gap: 12px; } .sa_table td::before { content: attr(data-label); font-weight: 600; color: var(--text_color_lighter1); } .sa_table td.sa_counts { flex-direction: column; align-items: flex-start; } } /* ============================================================================ Super-Admin dashboard - v2 additions (scroll, profile, modals, account, admins) ============================================================================ */ /* Unlock scrolling (the global body/html lock is for the tree canvas only). */ html.sa_html { overflow: auto; height: auto; min-height: 100%; } html.sa_html body.sa_body { overflow: visible; height: auto; min-height: 100vh; scrollbar-gutter: auto; } body.sa_modal_open { overflow: hidden; } /* Header profile (image + name + username, no logout) */ .sa_profile { display: flex; align-items: center; gap: 9px; text-decoration: none; padding: 4px 10px 4px 5px; border: 1px solid var(--border_color); border-radius: 10px; } .sa_profile:hover { background: var(--border_color_lighter); } .sa_profile.active { background: var(--main_color_lighter5); } .sa_profile .sa_profile_meta { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; } .sa_profile .sa_profile_name { font-size: 0.82rem; font-weight: 600; color: var(--text_color); white-space: nowrap; } .sa_profile .sa_profile_username { font-size: 0.72rem; color: var(--text_color_lighter1); white-space: nowrap; } .sa_profile.sa_profile_compact { width: 40px; height: 40px; min-width: 40px; justify-content: center; align-items: stretch; gap: 0; padding: 0; overflow: hidden; box-sizing: border-box; } .sa_profile.sa_profile_compact .sa_profile_meta { display: none; } .sa_profile.sa_profile_compact .sa_profile_photo { flex: 1 1 auto; width: 100%; height: 100%; border-radius: inherit; } .sa_profile.sa_profile_compact .sa_profile_photo img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } .sa_user_profile_card { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .sa_user_profile_card .sa_user_profile_meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sa_user_profile_card .sa_user_profile_meta strong { font-size: 0.82rem; font-weight: 600; color: var(--text_color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sa_user_profile_card .sa_user_profile_meta small { font-size: 0.72rem; color: var(--text_color_lighter1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Avatars */ .sa_profile_photo, .sa_avatar, .sa_account_avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--main_color_lighter5); color: var(--main_color); font-weight: 700; } .sa_profile_photo img, .sa_avatar img, .sa_account_avatar img { width: 100%; height: 100%; object-fit: cover; } .sa_profile_photo { width: 34px; height: 34px; font-size: 0.85rem; } .sa_avatar { width: 30px; height: 30px; font-size: 0.8rem; } .sa_account_avatar { width: 72px; height: 72px; font-size: 1.7rem; } .sa_avatar_lightbox_trigger { display: inline-flex; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: zoom-in; line-height: 0; } .sa_avatar_lightbox_trigger:focus-visible { outline: 2px solid var(--main_color); outline-offset: 2px; } .sa_profile_lightbox_modal .sa_modal_card { max-width: min(900px, 100vw - 32px); } .sa_profile_lightbox_modal .sa_modal_body { display: grid; place-items: center; padding: 12px; } .sa_profile_lightbox_modal .sa_profile_lightbox_image { display: block; max-width: 100%; max-height: 76vh; border-radius: 8px; object-fit: contain; } /* Clickable name buttons */ .sa_linklike { border: none; background: none; padding: 0; cursor: pointer; color: var(--main_color); font-weight: 600; font-size: inherit; text-align: left; } .sa_linklike:hover { text-decoration: underline; } /* Modals */ .sa_modal { display: none; position: fixed; inset: 0; z-index: 400; align-items: flex-start; justify-content: center; padding: 6vh 16px 40px; overflow-y: auto; } .sa_modal.open { display: flex; } .sa_modal .sa_modal_backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); } .sa_modal .sa_modal_card { position: relative; width: 100%; max-width: 640px; background: var(--white_color); border: 1px solid var(--border_color); border-radius: 14px; } .sa_modal .sa_modal_head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--border_color); } .sa_modal .sa_modal_head h3 { margin: 0; font-size: 1.05rem; } .sa_modal .sa_modal_close { border: none; background: none; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--text_color_lighter1); } .sa_modal .sa_modal_close:hover { color: var(--text_color); } .sa_modal .sa_modal_body { padding: 20px; } .sa_modal .sa_adduser { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border_color); } .sa_modal.sa_plugin_detail_modal .sa_modal_card { max-width: min(1480px, 100vw - 24px); } .sa_modal_actions { margin-top: 4px; } /* Account page */ .sa_account_head { display: flex; align-items: center; gap: 16px; } .sa_account_name2 { font-size: 1.1rem; font-weight: 700; } .sa_avatar_pick { position: relative; padding: 0; border: none; background: none; cursor: pointer; border-radius: 50%; line-height: 0; } .sa_avatar_pick:hover .sa_account_avatar { filter: brightness(0.92); } .sa_avatar_pick .sa_avatar_cam { position: absolute; right: -2px; bottom: -2px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--main_color); border: 2px solid var(--white_color); } .sa_avatar_pick .sa_avatar_cam svg { width: 13px; height: 13px; fill: #fff; } /* Avatar picker inside the create/edit super-admin modals */ .sa_modal_avatar { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--main_color_lighter5); color: var(--main_color); font-weight: 700; font-size: 1.5rem; } .sa_modal_avatar img { width: 100%; height: 100%; object-fit: cover; } .sa_modal_avatar_row { display: flex; align-items: center; gap: 14px; } .sa_avatar_pick:hover .sa_modal_avatar { filter: brightness(0.92); } /* Notifications bell + dropdown panel */ .sa_notif { position: relative; } .sa_notif_toggle { position: relative; } .sa_notif_badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--light_red); color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center; } .sa_notif_panel { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-width: 86vw; background: var(--white_color); border: 1px solid var(--border_color); border-radius: 12px; box-shadow: var(--popover_shadow); z-index: 70; overflow: hidden; } .sa_notif.open .sa_notif_panel { display: block; } .sa_notif_head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border_color); } .sa_notif_head strong { font-size: 0.9rem; } .sa_notif_head form { margin: 0; } .sa_notif_list { max-height: 360px; overflow-y: auto; } .sa_notif_empty { padding: 24px 14px; text-align: center; color: var(--text_color_lighter1); font-size: 0.85rem; } .sa_notif_item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border_color_lighter); } .sa_notif_item:last-child { border-bottom: none; } .sa_notif_item.unread { background: var(--main_color_lighter5); } .sa_notif_item_main { min-width: 0; } .sa_notif_item_title { font-size: 0.85rem; font-weight: 600; color: var(--text_color); } .sa_notif_item_body { margin-top: 2px; font-size: 0.8rem; color: var(--text_color_lighter1); line-height: 1.4; } .sa_notif_item_time { margin-top: 4px; font-size: 0.7rem; color: var(--text_color_lighter2); } .sa_notif_item_mark_form { margin: 0; } .sa_notif_item_mark { min-height: 32px; border: 1px solid rgba(0, 147, 165, 0.28); border-radius: 999px; padding: 7px 10px; background: rgba(0, 147, 165, 0.08); color: var(--main_color); cursor: pointer; font-size: 0.7rem; font-weight: 700; line-height: 1; white-space: nowrap; } .sa_notif_item_mark:hover, .sa_notif_item_mark:focus-visible { border-color: var(--main_color); background: var(--main_color); color: #fff; } .sa_notif_item_mark:disabled { opacity: 0.55; cursor: wait; } .sa_notif_foot { display: block; padding: 11px 14px; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--main_color); border-top: 1px solid var(--border_color); } .sa_notif_foot:hover { background: var(--border_color_lighter); } /* Super-admin notifications page */ .sa_notifications_page .sa_notifications_stats { grid-template-columns: repeat(3, minmax(120px, 1fr)); } .sa_notifications_page .sa_notifications_toolbar { display: grid; grid-template-columns: minmax(220px, 1.2fr) repeat(4, minmax(130px, 0.7fr)); gap: 10px; align-items: center; margin-bottom: 16px; } .sa_notifications_page .sa_notifications_toolbar .form_input, .sa_notifications_page .sa_notifications_toolbar .sa_btn { min-height: 38px; } .sa_notifications_page .sa_notifications_card { padding: 0; overflow: hidden; } .sa_notifications_page .sa_notification_group + .sa_notification_group { border-top: 1px solid var(--border_color); } .sa_notifications_page .sa_notification_group_title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--border_color_lighter); color: var(--text_color_lighter1); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; } .sa_notifications_page .sa_notification_group_title form { margin-left: auto; text-transform: none; } .sa_notifications_page .sa_notification_group_title form .sa_btn { text-transform: capitalize; } .sa_notifications_page .sa_notification_group_title > div { display: flex; align-items: center; gap: 10px; min-width: 0; } .sa_notifications_page .sa_notification_group_title h2 { margin: 0; color: inherit; font: inherit; } .sa_notifications_page .sa_notification_group_title > div > span { display: inline-flex; min-width: 24px; height: 24px; align-items: center; justify-content: center; border: 1px solid var(--border_color); border-radius: 999px; color: var(--text_color); font-size: 0.72rem; } .sa_notifications_page .sa_notification_list { display: grid; } .sa_notifications_page .sa_notification_row { display: grid; grid-template-columns: 24px 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border_color_lighter); } .sa_notifications_page .sa_notification_row:last-child { border-bottom: 0; } .sa_notifications_page .sa_notification_row.unread { background: var(--main_color_lighter5); } .sa_notifications_page .sa_notification_select { display: grid; place-items: center; min-width: 24px; min-height: 44px; cursor: pointer; } .sa_notifications_page .sa_notification_select input { width: 18px; height: 18px; margin: 0; accent-color: var(--main_color); } .sa_notifications_page .sa_notification_visual { position: relative; width: 44px; height: 44px; } .sa_notifications_page .sa_notification_icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--main_color_lighter3); border-radius: 12px; background: var(--main_color_lighter5); color: var(--main_color); } .sa_notifications_page .sa_notification_icon .sa_nav_icon { width: 21px; height: 21px; } .sa_notifications_page .sa_notification_image { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border: 2px solid var(--white_color); border-radius: 50%; object-fit: cover; } .sa_notifications_page .sa_notification_main { min-width: 0; display: grid; gap: 5px; } .sa_notifications_page .sa_notification_title_row { display: flex; align-items: center; gap: 10px; min-width: 0; } .sa_notifications_page .sa_notification_title_row strong { min-width: 0; overflow-wrap: anywhere; font-size: 0.92rem; } .sa_notifications_page .sa_notification_body { color: var(--text_color_lighter1); font-size: 0.85rem; line-height: 1.45; overflow-wrap: anywhere; } .sa_notifications_page .sa_notification_meta { display: flex; gap: 10px; flex-wrap: wrap; color: var(--text_color_lighter2); font-size: 0.74rem; } .sa_notifications_page .sa_notification_actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } /* Notification preferences (settings) - pill toggles per type / channel */ .sa_notif_pref_head, .sa_notif_pref { display: grid; grid-template-columns: 1fr 56px 56px; align-items: center; gap: 10px; } .sa_notif_pref_head { margin-top: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border_color); } .sa_notif_pref_head span:nth-child(n+2) { text-align: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text_color_lighter1); } .sa_notif_pref { padding: 12px 0; border-bottom: 1px solid var(--border_color_lighter); } .sa_notif_pref:last-child { border-bottom: none; } .sa_notif_pref .sa_toggle { justify-self: center; } .sa_notif_pref_name { font-size: 0.9rem; font-weight: 500; color: var(--text_color); } /* Auto-saving preference card: status next to the title */ .sa_card_title_row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .sa_card_title_row .sa_card_title { align-self: center; margin: 0; } .sa_card_title_row .sa_btn { align-self: center; } .sa_autosave_status { font-size: 0.78rem; font-weight: 600; opacity: 0; transition: opacity 0.15s; } .sa_autosave_status.saving { opacity: 1; color: var(--text_color_lighter1); } .sa_autosave_status.saved { opacity: 1; color: var(--green_color); } .sa_autosave_status.error { opacity: 1; color: var(--light_red); } .sa_toggle { display: inline-flex; cursor: pointer; } .sa_toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; } .sa_toggle .sa_toggle_pill { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--border_color); transition: background 0.15s; } .sa_toggle .sa_toggle_pill::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left 0.15s; } .sa_toggle input:checked + .sa_toggle_pill { background: var(--main_color); } .sa_toggle input:checked + .sa_toggle_pill::after { left: 20px; } .sa_toggle input:focus-visible + .sa_toggle_pill { outline: 2px solid var(--main_color_lighter3); outline-offset: 2px; } /* Left-menu mode keeps utility controls in the top bar. */ html[data-menu=left] .sa_header .sa_cta .sa_notif { width: 40px; height: 40px; } html[data-menu=left] .sa_header .sa_cta .sa_notif_toggle { display: inline-flex; width: 40px; height: 40px; justify-content: center; gap: 0; padding: 0; } html[data-menu=left] .sa_header .sa_cta .sa_notif_panel { position: fixed; top: 52px; right: 16px; bottom: auto; left: auto; width: 320px; max-width: calc(100vw - 32px); margin-top: 0; } /* Header mobile responsiveness */ @media (max-width: 820px) { .sa_activities_toolbar { top: 56px; } .sa_header .sa_logo { margin-right: auto; } html[data-menu=left] .sa_header .sa_cta, .sa_header .sa_cta { order: 3; flex-wrap: nowrap; align-items: center; height: 44px; margin-left: 0; gap: 6px; } .sa_hamburger { order: 4; align-self: center; margin-left: 0; } .sa_header .sa_profile, .sa_header .sa_profile.sa_profile_compact, .sa_header .sa_icon_btn, .sa_header .sa_notif_toggle, .sa_hamburger { width: 44px; height: 44px; min-width: 44px; } html[data-menu=left] .sa_header .sa_cta > .sa_global_search, html[data-menu=left] .sa_header .sa_cta > .sa_lang, html[data-menu=left] .sa_header .sa_cta > .sa_notif, html[data-menu=left] .sa_header .sa_cta > .sa_profile, .sa_header .sa_cta > .sa_global_search, .sa_header .sa_cta > .sa_lang, .sa_header .sa_cta > .sa_notif, .sa_header .sa_cta > .sa_profile { flex: 0 0 44px; align-self: center; width: 44px; height: 44px; min-width: 44px; margin: 0; box-sizing: border-box; } .sa_header .sa_cta > .sa_lang .sa_lang_toggle { width: 44px; height: 44px; min-width: 44px; justify-content: center; padding: 0; } .sa_header .sa_profile { padding: 2px; } .sa_header .sa_profile.sa_profile_compact { padding: 0; } .sa_header .sa_profile_meta { display: none; } .sa_header .sa_lang .sa_lang_toggle span { display: none; } .sa_global_search { flex: 0 0 44px; width: 44px; min-width: 44px; max-width: 44px; margin-right: 0; } .sa_global_search .sa_global_search_toggle { display: inline-flex; width: 44px; height: 44px; min-width: 44px; } .sa_global_search .sa_global_search_panel { display: none; } .sa_global_search.open .sa_global_search_panel { position: fixed; top: 64px; right: 8px; left: 8px; display: flex; width: auto; max-width: 500px; margin: 0 auto; z-index: 260; } .sa_global_search .sa_global_search_results { top: 46px; max-height: calc(100dvh - 122px); } html[data-menu=left] .sa_header .sa_cta .sa_notif, .sa_header .sa_cta .sa_notif { width: auto; } html[data-menu=left] .sa_header .sa_cta .sa_notif_toggle { width: 44px; height: 44px; justify-content: center; padding: 0; } html[data-menu=left] .sa_header .sa_cta .sa_notif_panel, .sa_header .sa_cta .sa_notif_panel { position: fixed; top: 64px; bottom: auto; right: 8px; left: 8px; width: auto; max-width: none; max-height: calc(100dvh - 72px); margin-top: 0; } .sa_header .sa_cta .sa_notif_panel .sa_notif_list { max-height: calc(100dvh - 174px); } } @media (max-width: 420px) { .sa_header { gap: 8px; padding: 0 10px; } .sa_header .sa_logo span { display: none; } } /* ============================================================================ Login enhancements: FML- prefixed family code, password eye, inline feedback ============================================================================ */ /* Family code field: static "FML-" prefix + suffix-only input */ .family_code_field { display: flex; align-items: center; } .family_code_field .family_code_prefix { font-weight: 700; letter-spacing: 1px; color: var(--text_color); user-select: none; padding-right: 3px; } .family_code_field .family_code_suffix { flex: 1; min-width: 0; margin: 0; padding: 0; border: none; background: transparent; outline: none; font: inherit; color: inherit; text-transform: uppercase; letter-spacing: 3px; } .family_code_field .family_code_suffix::placeholder { letter-spacing: 3px; color: #bbb; } .family_code_field:focus-within { border: 0.0625rem solid var(--secondary_color_lighter4); } /* Password field with show/hide eye */ .password_field { position: relative; margin: 0 0 10px 0; } .password_field .form_input { margin-bottom: 0; } .password_field .password_input { padding-right: 3.3rem; } .password_field .password_toggle { position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: none; background: transparent; cursor: pointer; color: var(--text_color_lighter1); } .password_field .password_toggle svg { width: 1.25rem; height: 1.25rem; fill: currentColor; display: block; } .password_field .password_toggle .eye_hide { display: none; } .password_field .password_toggle:hover { color: var(--main_color); } .password_field.show_password .password_toggle .eye_show { display: none; } .password_field.show_password .password_toggle .eye_hide { display: block; } /* Login feedback inline (no longer a fixed overlay that covers the heading) */ .feedback_popup.login { position: relative; top: auto; left: auto; max-width: 100%; transform: none; z-index: auto; margin: 0 0 1rem; } .feedback_popup.login .wrapper_feedback { padding: 12px 16px; font-size: 0.95rem; } .signup_photo_field { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 64px; margin-bottom: 22px; padding: 10px 12px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--bg_color); cursor: pointer; } .signup_photo_field input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; } .signup_photo_field:hover { border-color: var(--main_color_lighter3); background: var(--main_color_lighter5); } .signup_photo_preview { display: inline-flex; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 1px solid var(--border_color); background: var(--white_color); } .signup_photo_preview img { width: 100%; height: 100%; object-fit: cover; } .signup_photo_text { display: grid; gap: 3px; min-width: 0; } .signup_photo_text strong { color: var(--text_color); font-size: 0.92rem; } .signup_photo_text small { color: var(--text_color_lighter1); font-size: 0.78rem; line-height: 1.35; } .signup_actions { margin-top: 12px; } .signup_actions { display: flex; align-items: center; gap: 10px; } .signup_actions .form_input { margin: 0; min-height: 48px; } .signup_actions .form_input.submit { flex: 1 1 auto; } .signup_actions .signup_btn { width: 100%; } .signup_back { width: auto; min-width: 112px; flex: 0 0 auto; background: var(--white_color); border: 1px solid var(--border_color); color: var(--text_color); font-weight: 700; cursor: pointer; } .signup_back:hover { background: var(--border_color_lighter); } /* Super-admin: copy-family-code button */ .sa_code_cell { display: inline-flex; align-items: center; gap: 6px; } .sa_copy_btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--border_color); border-radius: 5px; background: transparent; cursor: pointer; color: var(--text_color_lighter1); flex-shrink: 0; transition: color 0.15s, border-color 0.15s; } .sa_copy_btn svg { width: 12px; height: 12px; fill: currentColor; } .sa_copy_btn:hover { color: var(--main_color); border-color: var(--main_color_lighter3); } .sa_copy_btn.copied { color: #0a8f5b; border-color: #0a8f5b; } /* ============================================================================ System design refresh: shadcn-style surfaces using existing project variables ============================================================================ */ body, html { background: var(--bg_color); } .form_input, .phone_input, .page_toolbar input, .page_toolbar select, .manage_search_input, .manage_filter_select, .sa_toolbar .form_input, .sa_grid .form_input, .sa_grid textarea, .racinage_modal input, .racinage_modal select, .racinage_modal textarea, .tree_modal_backdrop .tree_form_section input, .tree_modal_backdrop .tree_form_section select, .events_modal input, .events_modal textarea, .projects_modal_form input, .projects_modal_form select, .projects_modal_form textarea, .finance_modal input, .finance_modal select, .finance_modal textarea, .gallery_edit_form input, .gallery_edit_form textarea, .history_field input, .history_field select, .document_field input, .document_field select, .document_field textarea { min-height: 40px; border-color: var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); } .form_input:focus, .form_input:focus-visible, .phone_input:focus, .phone_input:focus-visible, .page_toolbar input:focus, .page_toolbar input:focus-visible, .page_toolbar select:focus, .page_toolbar select:focus-visible, .manage_search_input:focus, .manage_search_input:focus-visible, .manage_filter_select:focus, .manage_filter_select:focus-visible, .sa_toolbar .form_input:focus, .sa_toolbar .form_input:focus-visible, .sa_grid .form_input:focus, .sa_grid .form_input:focus-visible, .sa_grid textarea:focus, .sa_grid textarea:focus-visible, .racinage_modal input:focus, .racinage_modal input:focus-visible, .racinage_modal select:focus, .racinage_modal select:focus-visible, .racinage_modal textarea:focus, .racinage_modal textarea:focus-visible, .tree_modal_backdrop .tree_form_section input:focus, .tree_modal_backdrop .tree_form_section input:focus-visible, .tree_modal_backdrop .tree_form_section select:focus, .tree_modal_backdrop .tree_form_section select:focus-visible, .events_modal input:focus, .events_modal input:focus-visible, .events_modal textarea:focus, .events_modal textarea:focus-visible, .projects_modal_form input:focus, .projects_modal_form input:focus-visible, .projects_modal_form select:focus, .projects_modal_form select:focus-visible, .projects_modal_form textarea:focus, .projects_modal_form textarea:focus-visible, .finance_modal input:focus, .finance_modal input:focus-visible, .finance_modal select:focus, .finance_modal select:focus-visible, .finance_modal textarea:focus, .finance_modal textarea:focus-visible, .gallery_edit_form input:focus, .gallery_edit_form input:focus-visible, .gallery_edit_form textarea:focus, .gallery_edit_form textarea:focus-visible, .history_field input:focus, .history_field input:focus-visible, .history_field select:focus, .history_field select:focus-visible, .document_field input:focus, .document_field input:focus-visible, .document_field select:focus, .document_field select:focus-visible, .document_field textarea:focus, .document_field textarea:focus-visible { border-color: var(--main_color_lighter2); } .button1, .button2, .button3, .form_input.submit, .page_add_btn, .gallery_add_btn, .gallery_upload_btn, .gallery_secondary_btn, .manage_add_new_btn, .sa_btn { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; text-transform: none; font-size: 0.9rem; font-weight: 600; } .button1 > svg, .button1 > i, .button2 > svg, .button2 > i, .button3 > svg, .button3 > i, .form_input.submit > svg, .form_input.submit > i, .page_add_btn > svg, .page_add_btn > i, .gallery_add_btn > svg, .gallery_add_btn > i, .gallery_upload_btn > svg, .gallery_upload_btn > i, .gallery_secondary_btn > svg, .gallery_secondary_btn > i, .manage_add_new_btn > svg, .manage_add_new_btn > i, .sa_btn > svg, .sa_btn > i { order: -1; flex: 0 0 auto; color: inherit; } .button1 > svg, .button2 > svg, .button3 > svg, .form_input.submit > svg, .page_add_btn > svg, .gallery_add_btn > svg, .gallery_upload_btn > svg, .gallery_secondary_btn > svg, .manage_add_new_btn > svg, .sa_btn > svg { width: 1.1em; height: 1.1em; fill: currentColor; } .button1 > svg [fill]:not([fill=none]), .button2 > svg [fill]:not([fill=none]), .button3 > svg [fill]:not([fill=none]), .form_input.submit > svg [fill]:not([fill=none]), .page_add_btn > svg [fill]:not([fill=none]), .gallery_add_btn > svg [fill]:not([fill=none]), .gallery_upload_btn > svg [fill]:not([fill=none]), .gallery_secondary_btn > svg [fill]:not([fill=none]), .manage_add_new_btn > svg [fill]:not([fill=none]), .sa_btn > svg [fill]:not([fill=none]) { fill: currentColor; } .button1 > svg [stroke]:not([stroke=none]), .button2 > svg [stroke]:not([stroke=none]), .button3 > svg [stroke]:not([stroke=none]), .form_input.submit > svg [stroke]:not([stroke=none]), .page_add_btn > svg [stroke]:not([stroke=none]), .gallery_add_btn > svg [stroke]:not([stroke=none]), .gallery_upload_btn > svg [stroke]:not([stroke=none]), .gallery_secondary_btn > svg [stroke]:not([stroke=none]), .manage_add_new_btn > svg [stroke]:not([stroke=none]), .sa_btn > svg [stroke]:not([stroke=none]) { stroke: currentColor; } .button1 > span, .button2 > span, .button3 > span, .form_input.submit > span, .page_add_btn > span, .gallery_add_btn > span, .gallery_upload_btn > span, .gallery_secondary_btn > span, .manage_add_new_btn > span, .sa_btn > span { color: inherit; } .manage_add_new_btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; height: 36px; padding: 0 0.875rem; background: var(--main_color); color: #fff !important; border: 1px solid transparent; border-radius: 8px; font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; } .manage_add_new_btn svg { width: 18px; height: 18px; flex: 0 0 18px; color: #fff; fill: #fff !important; display: block; } .manage_add_new_btn svg path { fill: #fff !important; } .manage_add_new_btn:hover { opacity: 0.88; } .manage_add_new_btn:disabled { opacity: 0.45; cursor: default; } .manage_add_new_btn:disabled:hover { opacity: 0.45; } .manage_filter_select { height: 36px !important; min-height: 36px !important; padding: 0 0.625rem; font-size: 0.8125rem; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); cursor: pointer; transition: border-color 0.15s; } .manage_filter_select:focus { outline: none; border-color: var(--main_color); } .button1, .form_input.submit, .page_add_btn, .gallery_add_btn, .gallery_upload_btn, .manage_add_new_btn, .sa_btn.sa_btn_primary { background: var(--main_color); border-color: var(--main_color); color: #fff; } .button1:hover, .form_input.submit:hover, .page_add_btn:hover, .gallery_add_btn:hover, .gallery_upload_btn:hover, .manage_add_new_btn:hover, .sa_btn.sa_btn_primary:hover { background: var(--main_color_darker); border-color: var(--main_color_darker); } .button2, .button3, .gallery_secondary_btn, .sa_btn:not(.sa_btn_primary):not(.sa_btn_danger) { background: var(--white_color); border-color: var(--border_color); color: var(--text_color); } .button2:hover, .button3:hover, .gallery_secondary_btn:hover, .sa_btn:not(.sa_btn_primary):not(.sa_btn_danger):hover { background: var(--bg_color_darker1); border-color: var(--border_color_darker); color: var(--text_color) !important; } .button1.secondary { background: var(--white_color); border-color: var(--border_color); color: var(--text_color); } .button1.secondary:hover { background: var(--bg_color_darker1); border-color: var(--border_color_darker); color: var(--text_color) !important; } .header, .sa_header { border-bottom-color: var(--border_color); background: var(--white_color); box-shadow: none; } .sa_nav .sa_nav_link, .manage_nav .manage_nav_item { border-radius: 8px; } .header .wrapper_header .main_menu .wrapper_main_menu .one_menu_item { border-radius: 0; } .auth_container { min-height: calc(100vh - 3.4375rem); display: grid; align-items: start; background: var(--bg_color); } .auth_container .auth_logo { margin-bottom: 1.25rem; } .auth_container .auth_logo img { height: 3rem; width: auto; } .auth_container .wrapper_auth_container { max-width: 440px; } .auth_container .wrapper_auth_container .header_auth { margin-bottom: 20px; padding: 0; color: var(--text_color); font-size: 1.625rem; font-weight: 700; letter-spacing: 0; } .auth_container .wrapper_auth_container .form_auth { padding: 22px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .auth_container .wrapper_auth_container .form_auth .form_input.bigger, .auth_container .wrapper_auth_container .form_auth .form_input.submit { min-height: 48px; } .auth_container .wrapper_auth_container .form_auth .form_input.submit { margin-top: 16px; } .auth_container .wrapper_auth_container .auth_nav { padding: 4px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color_darker); } .auth_container .wrapper_auth_container .auth_nav::before { display: none; } .auth_container .wrapper_auth_container .auth_nav .one_btn_auth_nav { border: 0; border-radius: 6px; background: transparent; font-weight: 600; } .auth_container .wrapper_auth_container .auth_nav .one_btn_auth_nav:hover { background: var(--white_color); } .auth_switch_link { margin-top: 0.85rem; text-align: center; } .auth_switch_link a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; color: var(--main_color); font-size: 0.875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .auth_help_link { margin-top: 0.75rem; text-align: center; } .auth_help_link a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; color: var(--main_color); font-size: 0.875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .auth_container .wrapper_auth_container .form_auth .signup_actions .form_input { margin: 0; } .family_code_field { border-radius: 8px; border-color: var(--border_color); } .family_code_field:focus-within { border-color: var(--main_color_lighter2); } .password_field { margin-bottom: 0; } .password_field .password_toggle { color: var(--text_color_lighter1); } .password_field .password_toggle:focus-visible { border: 1px solid var(--main_color_lighter2); border-radius: 6px; } .feedback_popup.login .wrapper_feedback, .auth_msg, .sa_msg { border-radius: 8px; } .manage_page { max-width: none; background: var(--bg_color); } .manage_page .manage_sidebar { background: var(--white_color); border-right-color: var(--border_color); } .manage_page .manage_sidebar .manage_profile_card, .manage_page .manage_sidebar .manage_nav_item { border: 1px solid transparent; } .manage_page .manage_sidebar .manage_profile_card { border-color: var(--border_color); border-radius: 12px; } .manage_page .manage_sidebar .manage_nav_item:hover, .manage_page .manage_sidebar .manage_nav_item.active { border-color: var(--main_color_lighter4); } .manage_page .manage_content .manage_content_inner { padding: 24px 24px 100px 24px; } .manage_page .manage_content .manage_content_inner .manage_section_header .manage_section_title { padding: 0; font-size: 1.45rem; letter-spacing: 0; } .manage_page .manage_content .manage_content_inner .manage_stat_card, .manage_page .manage_content .manage_content_inner .manage_user_card, .manage_page .manage_content .manage_content_inner .manage_table_wrapper, .manage_page .manage_content .manage_content_inner .manage_settings_card, .manage_page .manage_content .manage_content_inner .manage_permissions_card { border-color: var(--border_color); border-radius: 8px; background: var(--white_color); } .manage_page .manage_content .manage_content_inner .manage_stats_grid { gap: 12px; } .manage_page .manage_content .manage_content_inner .manage_stats_grid .manage_stat_card { padding: 16px; text-align: left; border-top-width: 1px; } .manage_page .manage_content .manage_content_inner .manage_stats_grid .manage_stat_card .manage_stat_value { font-size: 1.75rem; } .manage_page .manage_content .manage_content_inner .manage_stats_grid .manage_stat_card .manage_stat_label { font-size: 15px; } .manage_page .manage_content .manage_content_inner .manage_users_toolbar, .manage_page .manage_content .manage_content_inner .page_toolbar { padding: 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .page_toolbar, .gallery_upload_panel, .help_system_layout, .racinage_modal, .tree_modal_backdrop .tree_action_modal, .events_modal, .projects_modal, .finance_modal, .gallery_dialog, .history_modal, .document_modal { border-color: var(--border_color); border-radius: 8px; box-shadow: none !important; } .racinage_modal, .events_modal, .projects_modal, .finance_modal, .gallery_dialog, .history_modal, .document_modal { padding: 24px; } .racinage_modal form, .racinage_modal .public_share_modal, .events_modal form, .projects_modal_form, .finance_modal form, .gallery_edit_form, .history_modal form, .document_modal form { gap: 16px; } .tree_person_source_tabs, .sa_segmented, .manage_view_toggle { border-radius: 8px; background: var(--bg_color_darker); border-color: var(--border_color); } .tree_person_source_tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin-bottom: 14px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--bg_color_darker); } .tree_person_source_tabs[hidden] { display: none; } .tree_person_source_tab { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text_color_lighter1); font-weight: 600; font-size: 0.9rem; line-height: 1.2; text-align: center; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .tree_person_source_tab:hover { color: var(--text_color); } .tree_person_source_tab.active { background: var(--white_color); color: var(--main_color); border-color: var(--border_color); } .tree_modal_backdrop { padding: 24px 16px; } .tree_modal_backdrop .tree_action_modal { display: grid; gap: 16px; width: min(640px, 100%); max-height: calc(100dvh - 48px); padding: 24px; overflow-y: auto; } .tree_modal_backdrop .tree_modal_header, .tree_modal_backdrop .tree_person_source_tabs, .tree_modal_backdrop .tree_form_error, .tree_modal_backdrop .tree_modal_actions { margin: 0; } .tree_modal_backdrop #treeActionForm .tree_modal_actions, .tree_modal_backdrop .tree_person_actions { position: sticky; z-index: 2; bottom: -24px; margin: 0 -24px -24px; padding: 14px 24px 24px; border-top: 1px solid var(--border_color); background: var(--white_color); } .tree_modal_backdrop .tree_modal_header { padding-bottom: 2px; } .tree_modal_backdrop .tree_modal_header h3 { font-size: 20px; line-height: 1.25; } .tree_modal_backdrop .tree_modal_header .tree_modal_close { width: 36px; height: 36px; border-radius: 999px; background: var(--bg_color_darker1); color: var(--text_color_lighter1); } .tree_modal_backdrop .tree_modal_header .tree_modal_close:hover { background: var(--border_color_lighter); color: var(--text_color); } .tree_modal_backdrop .tree_person_source_tabs { gap: 4px; min-height: 52px; padding: 4px; } .tree_modal_backdrop .tree_person_source_tab { min-height: 40px; border-radius: 8px; font-size: 0.95rem; } .tree_modal_backdrop .tree_person_source_tab:not(.active) { border-color: transparent; } .tree_modal_backdrop .tree_form_section { gap: 16px; } .tree_modal_backdrop .tree_form_section label { gap: 8px; } .tree_modal_backdrop .tree_form_section input, .tree_modal_backdrop .tree_form_section select { min-height: 44px; padding: 10px 14px; border-radius: 8px; font-size: 0.95rem; } .tree_modal_backdrop [data-tree-parent-new-fields] { display: grid; gap: 16px; } .tree_modal_backdrop [data-tree-parent-new-fields][hidden] { display: none; } .tree_modal_backdrop .tree_existing_person_section { gap: 12px; margin: 0; } .tree_modal_backdrop .tree_form_grid { gap: 12px; } .tree_modal_backdrop .tree_existing_person_grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-height: min(46vh, 390px); padding: 2px 8px 2px 2px; scrollbar-gutter: stable; } .tree_modal_backdrop .tree_existing_person_card { align-content: center; min-height: 148px; gap: 8px; padding: 14px 10px; border-radius: 8px; } .tree_modal_backdrop .tree_existing_person_card img { width: 60px; height: 60px; } .tree_modal_backdrop .tree_existing_person_card span { min-height: 36px; white-space: normal; line-height: 1.3; overflow-wrap: anywhere; } .tree_modal_backdrop .tree_existing_person_card small { font-size: 12px; } .tree_modal_backdrop .tree_image_picker { min-height: 150px; margin: 0; padding: 20px; border-radius: 8px; } .tree_modal_backdrop .tree_image_preview { width: 76px; border-radius: 50%; border-style: solid; } .tree_modal_backdrop .tree_form_hint { margin-top: -4px; line-height: 1.45; } .sa_body { --bg_color: #fafafa; --bg_color_darker: #f4f4f5; --border_color: #e4e4e7; --border_color_lighter: #f4f4f5; --text_color: #18181b; --text_color_lighter1: #71717a; background: var(--bg_color); } .sa_header { height: 56px; } .sa_nav { gap: 4px; } .sa_nav .sa_nav_link, .sa_profile, .sa_lang .sa_lang_toggle, .sa_icon_btn, .sa_hamburger, .sa_btn, .sa_badge, .sa_modal .sa_modal_card, .sa_check_list .sa_check, .sa_profile_photo, .sa_avatar, .sa_account_avatar { border-radius: 8px; } html:not([data-menu=left]) .sa_header { position: sticky; top: 0; } html:not([data-menu=left]) .sa_nav .sa_nav_group_toggle, html:not([data-menu=left]) .sa_nav .sa_nav_group_menu .sa_nav_link { border-radius: 8px; } html[data-menu=left] .sa_nav .sa_nav_link { border-radius: 8px; } .sa_main { max-width: 1350px; padding: 24px 20px 64px; } .sa_page_head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .sa_page_head h1 { color: var(--text_color); font-size: 1.5rem; letter-spacing: 0; } .sa_page_head .sa_btn { margin-left: auto; } .sa_page_tabs { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .sa_page_tab { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 34px; padding: 7px 12px; border-radius: 6px; color: var(--text_color_lighter1); font-size: 0.84rem; font-weight: 600; text-align: center; text-decoration: none; white-space: nowrap; } .sa_page_tab:hover { background: var(--border_color_lighter); color: var(--text_color); } .sa_page_tab.active { background: var(--main_color); color: #fff; } .sa_message_tabs .sa_page_tab.active { background: var(--main_color); color: #fff; } .sa_announcement_section { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color_darker); } .sa_announcement_section h4 { margin: 0; font-size: 0.94rem; color: var(--text_color); } .sa_announcement_section p { margin: 4px 0 0; font-size: 0.82rem; } .sa_announcement_channels { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .sa_announcement_channels .sa_check { align-items: flex-start; } .sa_announcement_channels .sa_check span { display: grid; gap: 3px; } .sa_announcement_channels .sa_check strong { color: var(--text_color); font-size: 0.88rem; } .sa_announcement_surfaces { display: grid; gap: 8px; margin-top: 10px; } .sa_announcement_surfaces[hidden] { display: none; } .sa_announcement_publish_check { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border_color); border-radius: 8px; } .sa_announcement_publish_check span { display: grid; gap: 3px; } .sa_announcement_publish_check small { color: var(--text_color_lighter1); } .sa_announcement_email_review { display: grid; gap: 14px; } .sa_announcement_email_stats { margin: 0; } .sa_announcement_email_progress { padding: 10px 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color_darker); color: var(--text_color_lighter1); font-size: 0.86rem; } .racinage_announcements_mount { position: relative; z-index: 120; } .announcement_banner_stack { position: fixed; top: 14px; left: 0; right: 0; z-index: 120; display: grid; width: min(960px, 100vw - 24px); margin: 0 auto; gap: 8px; pointer-events: none; } .announcement_banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border_color); border-left: 4px solid var(--main_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); pointer-events: auto; } .announcement_popup_backdrop { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0, 0, 0, 0.42); } .announcement_popup { position: relative; display: grid; gap: 14px; width: min(520px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 18px; border: 1px solid var(--border_color); border-top: 4px solid var(--main_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); } .announcement_tone_success { border-color: #0a8f5b; } .announcement_tone_warning { border-color: #a96a00; } .announcement_tone_critical { border-color: #c0392b; } .announcement_media { width: 86px; max-width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 1px solid var(--border_color); border-radius: 6px; } .announcement_popup .announcement_media { width: 100%; max-height: 220px; } .announcement_copy { min-width: 0; } .announcement_copy strong { display: block; margin-bottom: 3px; font-size: 0.98rem; } .announcement_copy p { margin: 0; color: var(--text_color_lighter1); font-size: 0.88rem; line-height: 1.45; overflow-wrap: anywhere; } .announcement_actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; } .announcement_cta, .announcement_pdf, .announcement_close, .announcement_undo button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); font-size: 0.84rem; font-weight: 700; text-decoration: none; cursor: pointer; } .announcement_cta { border-color: var(--main_color); background: var(--main_color); color: #fff; } .announcement_close { width: 34px; padding: 0; font-size: 1.2rem; line-height: 1; } .announcement_popup > .announcement_close { position: absolute; top: 10px; right: 10px; } .announcement_undo_stack { position: fixed; right: 14px; bottom: 14px; z-index: 140; display: grid; gap: 8px; } .announcement_undo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); font-size: 0.86rem; } .sa_page_head_actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; max-width: 100%; min-width: 0; margin-left: auto; } .sa_page_head_actions .sa_page_tabs { max-width: 100%; min-width: 0; overflow-x: auto; } .sa_page_head_actions > .sa_btn { min-height: 44px; margin-left: 0; white-space: nowrap; } .sa_livechat_card { --db-border: var(--border_color); --db-card-bg: var(--white_color); --db-content-bg: var(--bg_color_darker); --db-text: var(--text_color); --db-muted: var(--text_color_lighter1); --db-primary: var(--main_color); --db-primary-light: var(--main_color_lighter5); --db-danger: var(--light_red); --db-nav-hover: var(--border_color_lighter); --db-nav-active-bg: var(--main_color_lighter5); padding: 0; overflow: hidden; } .sa_livechat_card .chat-layout { display: flex; gap: 0; height: calc(100vh - 260px); min-height: 430px; min-width: 0; background: var(--db-card-bg); color: var(--db-text); overflow: hidden; } .sa_livechat_card .chat-sessions { width: 300px; flex-shrink: 0; min-width: 0; border-right: 1px solid var(--db-border); display: flex; flex-direction: column; background: var(--db-card-bg); overflow: hidden; } .sa_livechat_card .chat-sessions__tabs { display: flex; padding: 0; border-bottom: 1px solid var(--db-border); background: transparent; overflow: hidden; } .sa_livechat_card .chat-tab { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 10px 4px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--db-muted); font-size: 0.8rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.15s; overflow: hidden; } .sa_livechat_card .chat-tab.active { border-bottom-color: var(--db-primary); background: var(--db-primary-light); color: var(--db-primary); } .sa_livechat_card .chat-new-admin-btn { position: absolute; right: 14px; bottom: 14px; z-index: 5; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--db-primary); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .sa_livechat_card .chat-sessions { position: relative; } .sa_livechat_card .chat-admin-picker { position: absolute; right: 14px; bottom: 68px; z-index: 6; width: 248px; max-width: calc(100% - 28px); max-height: 320px; display: flex; flex-direction: column; border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-card-bg); overflow: hidden; } .sa_livechat_card .chat-admin-picker[hidden] { display: none; } .sa_livechat_card .chat-admin-picker__head { padding: 10px 14px; border-bottom: 1px solid var(--db-border); color: var(--db-muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; } .sa_livechat_card .chat-admin-picker__list { overflow-y: auto; padding: 6px; } .sa_livechat_card .chat-admin-picker__empty { margin: 0; padding: 16px 8px; color: var(--db-muted); font-size: 0.82rem; text-align: center; } .sa_livechat_card .chat-admin-picker__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--db-text); text-align: left; cursor: pointer; overflow: hidden; } .sa_livechat_card .chat-admin-picker__item:hover { background: var(--db-nav-hover); } .sa_livechat_card .chat-admin-picker__item span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sa_livechat_card .chat-admin-picker__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--db-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; flex-shrink: 0; } .sa_livechat_card .chat-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; min-height: 18px; margin-left: 4px; padding: 1px 5px; border-radius: 10px; background: var(--db-danger); color: #fff; font-size: 0.7rem; } .sa_livechat_card #sessions-container { flex: 1; overflow-y: auto; overflow-x: hidden; } .sa_livechat_card .chat-empty, .sa_livechat_card .chat-panel__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 10px; padding: 20px; color: var(--db-muted); font-size: 0.88rem; text-align: center; } .sa_livechat_card .chat-empty svg { width: 40px; height: 40px; opacity: 0.4; } .sa_livechat_card .chat-panel__empty svg { width: 48px; height: 48px; opacity: 0.3; } .sa_livechat_card .chat-session-item { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--db-border); background: transparent; color: var(--db-text); text-decoration: none; text-align: left; cursor: pointer; transition: background 0.15s; } .sa_livechat_card .chat-session-item:hover { background: var(--db-nav-hover); } .sa_livechat_card .chat-session-item.is-active { background: var(--db-nav-active-bg); } .sa_livechat_card .chat-session-item.is-unread strong { color: var(--db-primary); } .sa_livechat_card .chat-session-item__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--db-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; flex-shrink: 0; } .sa_livechat_card .chat-session-item__info { flex: 1; min-width: 0; } .sa_livechat_card .chat-session-item__info > strong, .sa_livechat_card .chat-session-item__info > span { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sa_livechat_card .chat-session-item__info > strong { max-width: 100%; font-size: 0.85rem; color: var(--db-text); } .sa_livechat_card .chat-session-item__info > span { display: block; max-width: 100%; margin-top: 2px; font-size: 0.75rem; color: var(--db-muted); } .sa_livechat_card .chat-session-item__badge { background: var(--db-danger); color: #fff; border-radius: 10px; padding: 2px 6px; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; } .sa_livechat_card .chat-tag { flex-shrink: 0; padding: 1px 6px; border-radius: 999px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.5; text-transform: uppercase; } .sa_livechat_card .csi-kebab { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: auto; border: 0; border-radius: 8px; background: transparent; flex-shrink: 0; color: var(--db-muted); font-size: 1.35rem; line-height: 1; cursor: pointer; } .sa_livechat_card .csi-kebab:hover, .sa_livechat_card .csi-kebab:focus-visible { background: var(--db-nav-hover); color: var(--db-text); outline: none; } .sa_livechat_card .chat-tag--client { background: #e8f0fe; color: #1b53b3; } .sa_livechat_card .chat-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; min-width: 0; } .sa_livechat_card #chat-panel-content { display: flex; flex-direction: column; height: 100%; min-height: 0; } .sa_livechat_card .chat-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--db-border); background: var(--db-card-bg); flex-shrink: 0; } .sa_livechat_card .chat-panel__who, .sa_livechat_card .chat-panel__actions { display: flex; align-items: center; gap: 10px; min-width: 0; } .sa_livechat_card .chat-panel__visitor-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sa_livechat_card .chat-panel__visitor-info strong { display: flex; align-items: center; gap: 6px; color: var(--db-text); } .sa_livechat_card .chat-panel__visitor-info span { color: var(--db-muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sa_livechat_card .chat-panel__messages { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; } .sa_livechat_card .chat-msg { display: flex; flex-direction: column; max-width: 72%; } .sa_livechat_card .chat-msg--visitor { align-self: flex-start; align-items: flex-start; } .sa_livechat_card .chat-msg--visitor .chat-msg__body { background: var(--db-content-bg); color: var(--db-text); border-bottom-left-radius: 3px; } .sa_livechat_card .chat-msg--admin { align-self: flex-end; align-items: flex-end; } .sa_livechat_card .chat-msg--admin .chat-msg__body { background: var(--db-primary); color: #fff; border-bottom-right-radius: 3px; } .sa_livechat_card .chat-msg--admin .chat-msg__meta { justify-content: flex-end; } .sa_livechat_card .chat-msg--system { align-self: center; max-width: 85%; } .sa_livechat_card .chat-msg--system .chat-msg__body { background: var(--db-content-bg); color: var(--db-muted); border-radius: 8px; font-size: 0.78rem; text-align: center; } .sa_livechat_card .chat-msg__body { padding: 9px 14px; border-radius: 12px; font-size: 0.875rem; line-height: 1.5; margin: 0; word-break: break-word; } .sa_livechat_card .chat-msg__meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; padding: 0 3px; } .sa_livechat_card .chat-msg__time { font-size: 0.68rem; color: var(--db-muted); } .sa_livechat_card .chat-msg__actions { display: inline-flex; gap: 6px; margin-left: 6px; } .sa_livechat_card .chat-msg__action { border: 1px solid var(--db-border); border-radius: 999px; background: var(--db-card-bg); color: var(--db-muted); padding: 2px 8px; font-size: 0.68rem; cursor: pointer; } .sa_livechat_card .chat-msg__action:hover { background: var(--db-nav-hover); color: var(--db-text); } .sa_livechat_card .chat-msg__edited, .sa_livechat_card .chat-msg--deleted .chat-msg__body { opacity: 0.65; font-style: italic; } .sa_livechat_card .chat-msg__attachments { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 6px; } .sa_livechat_card .chat-msg__attachment { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-card-bg); color: var(--db-text); font-size: 0.78rem; text-decoration: none; } .sa_livechat_card .chat-msg__attachment img { width: 120px; max-width: 100%; aspect-ratio: 16/10; border-radius: 8px; object-fit: cover; display: block; } .sa_livechat_card .chat-panel__typing { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 18px; color: var(--db-muted); font-size: 0.78rem; } .sa_livechat_card .chat-panel__typing[hidden] { display: none; } .sa_livechat_card .chat-panel__typing-dots { display: flex; align-items: center; gap: 6px; } .sa_livechat_card .chat-panel__typing-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--db-muted); } .sa_livechat_card .chat-panel__typing-draft { max-width: min(520px, 100%); padding: 8px 10px; border: 1px dashed var(--db-border); border-radius: 8px; background: var(--db-content-bg); color: var(--db-text); font-size: 0.78rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; opacity: 0.7; } .sa_livechat_card .chat-panel__typing-draft[hidden] { display: none; } .sa_livechat_card .chat-panel__compose { display: flex; gap: 10px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--db-border); flex-shrink: 0; } .sa_livechat_card .chat-panel__compose .sa_muted { margin: 0; } .sa_livechat_card .chat-panel__input-wrap { position: relative; flex: 1; min-width: 0; } .sa_livechat_card .chat-panel__attach { width: 44px; height: 44px; border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-card-bg); color: var(--db-muted); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; line-height: 1; cursor: pointer; flex-shrink: 0; } .sa_livechat_card .chat-panel__attach:hover { background: var(--db-nav-hover); color: var(--db-text); } .sa_livechat_card .chat-attachment-name { margin-top: 6px; color: var(--db-muted); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sa_livechat_card .chat-attachment-name[hidden] { display: none; } .sa_livechat_card .chat-slash-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 8; max-height: 220px; padding: 6px; border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-card-bg); overflow-y: auto; } .sa_livechat_card .chat-slash-menu[hidden] { display: none; } .sa_livechat_card .chat-slash-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--db-text); text-align: left; cursor: pointer; } .sa_livechat_card .chat-slash-item strong { color: var(--db-primary); font-size: 0.8rem; } .sa_livechat_card .chat-slash-item span { min-width: 0; color: var(--db-muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sa_livechat_card .chat-slash-item:hover, .sa_livechat_card .chat-slash-item.is-active { background: var(--db-nav-hover); } .sa_livechat_card .chat-panel__textarea { width: 100%; max-height: 100px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-content-bg); color: var(--db-text); font: inherit; font-size: 0.875rem; resize: vertical; outline: none; } .sa_livechat_card .chat-panel__textarea:focus { border-color: var(--db-primary); } .sa_livechat_card .chat-panel__back { display: none; } #csi-menu { position: fixed; z-index: 9999; display: none; min-width: 170px; padding: 6px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } #csi-menu button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text_color); font-size: 0.85rem; text-align: left; cursor: pointer; } #csi-menu button:hover, #csi-menu button:focus-visible { background: var(--border_color_lighter); outline: none; } .sa_block_editor_field { min-width: 0; } .sa_block_editor_field .label_form { display: block; margin-bottom: 8px; } .blog-block-editor { min-width: 0; } .ajbe { --db-border: var(--border_color); --db-card-bg: var(--white_color); --db-content-bg: var(--bg_color_darker); --db-text: var(--text_color); --db-muted: var(--text_color_lighter1); --db-primary: var(--main_color); --db-primary-light: var(--main_color_lighter5); --db-success: var(--green_color); --db-danger: var(--light_red); --db-nav-hover: var(--border_color_lighter); position: relative; border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-card-bg); color: var(--db-text); overflow: visible; } .ajbe__toolbar { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 6px 8px; border-bottom: 1px solid var(--db-border); background: var(--db-content-bg); overflow-x: auto; } .ajbe__toolbar-group { display: inline-flex; align-items: center; gap: 3px; padding-right: 6px; border-right: 1px solid var(--db-border); flex-shrink: 0; } .ajbe__toolbar-group:last-child { padding-right: 0; border-right: 0; } .ajbe__toolbar-group--history { margin-left: auto; } .ajbe__add-btn, .ajbe__icon-btn, .ajbe__small-btn, .ajbe__block-type, .ajbe__font-size, .ajbe__meta-input { border: 1px solid var(--db-border); border-radius: 6px; background: var(--db-card-bg); color: var(--db-text); font: inherit; } .ajbe__add-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 9px; font-size: 0.75rem; font-weight: 700; cursor: pointer; } .ajbe__add-btn b { color: var(--db-primary); font-size: 1.1rem; line-height: 1; } .ajbe__icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; font-size: 0.76rem; cursor: pointer; } .ajbe__icon-btn:hover, .ajbe__icon-btn:focus-visible { border-color: var(--db-primary); color: var(--db-primary); } .ajbe__block-type, .ajbe__font-size { height: 32px; padding: 0 8px; font-size: 0.73rem; } .ajbe__toolbox-modal { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; } .ajbe__toolbox-modal[hidden] { display: none; } .ajbe__toolbox-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0, 0, 0, 0.5); } .ajbe__toolbox, .ajbe__slash-menu { --db-border: var(--border_color); --db-card-bg: var(--white_color); --db-content-bg: var(--bg_color_darker); --db-text: var(--text_color); --db-muted: var(--text_color_lighter1); --db-primary: var(--main_color); --db-nav-hover: var(--border_color_lighter); } .ajbe__toolbox { position: relative; z-index: 1; width: min(620px, 100vw - 40px); max-height: min(680px, 100vh - 40px); padding: 12px; border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-card-bg); overflow-y: auto; } .ajbe__toolbox-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 9px; } .ajbe__toolbox-head > div { display: flex; flex-direction: column; gap: 2px; } .ajbe__toolbox-head strong { color: var(--db-text); font-size: 0.78rem; } .ajbe__toolbox-head span { color: var(--db-muted); font-size: 0.68rem; } .ajbe__toolbox-close { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--db-border); border-radius: 6px; background: var(--db-content-bg); color: var(--db-muted); font-size: 1.2rem; cursor: pointer; } .ajbe__toolbox-grid, .ajbe__snippet-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .ajbe__toolbox-grid button, .ajbe__snippet-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-height: 64px; padding: 9px; border: 1px solid var(--db-border); border-radius: 6px; background: var(--db-content-bg); color: var(--db-text); text-align: left; cursor: pointer; } .ajbe__toolbox-grid button:hover, .ajbe__toolbox-grid button:focus-visible, .ajbe__snippet-list button:hover, .ajbe__snippet-list button:focus-visible { border-color: var(--db-primary); } .ajbe__toolbox-grid button b, .ajbe__snippet-list button b { color: var(--db-primary); font-size: 0.9rem; } .ajbe__toolbox-grid button span, .ajbe__snippet-list button span { color: inherit; font-size: 0.7rem; line-height: 1.25; } .ajbe__snippet-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ajbe__canvas { min-height: var(--ajbe-min-height); padding: 18px 18px 40px 44px; } .ajbe__block { position: relative; min-height: 42px; margin: 0 0 8px; border: 1px solid transparent; border-radius: 6px; background: var(--db-card-bg); } .ajbe__block.is-active, .ajbe__block:focus-within { border-color: var(--db-border); } .ajbe__block.is-active .ajbe__rail, .ajbe__block.is-active .ajbe__add-after, .ajbe__block:focus-within .ajbe__rail, .ajbe__block:focus-within .ajbe__add-after { opacity: 1; pointer-events: auto; } .ajbe__block-main { min-width: 0; padding: 10px 12px; } .ajbe__rail { position: absolute; top: 4px; right: calc(100% + 5px); display: flex; flex-direction: column; gap: 2px; opacity: 0; pointer-events: none; } .ajbe__rail .ajbe__icon-btn { width: 28px; height: 26px; background: var(--db-content-bg); } .ajbe__drag { display: inline-block; cursor: grab; } .ajbe__add-after { position: absolute; left: 50%; bottom: -15px; z-index: 3; width: 26px; height: 26px; border: 1px solid var(--db-border); border-radius: 50%; background: var(--db-card-bg); color: var(--db-primary); cursor: pointer; opacity: 0; pointer-events: none; } .ajbe__editable { min-height: 1.5em; color: var(--db-text); line-height: 1.75; overflow-wrap: anywhere; } .ajbe__editable:empty::before { content: attr(data-placeholder); color: var(--db-muted); } .ajbe__editable a { color: var(--db-primary); text-decoration: underline; text-underline-offset: 2px; } .ajbe__heading { font-size: 1.45rem; font-weight: 750; line-height: 1.3; } .ajbe__list { margin: 0; padding-left: 24px; line-height: 1.75; } .ajbe__quote, .ajbe__callout { margin: 0; padding: 10px 14px; border-left: 4px solid var(--db-primary); background: var(--db-content-bg); color: var(--db-text); } .ajbe__block-options, .ajbe__media-fields { display: flex; align-items: center; gap: 7px; margin-top: 8px; flex-wrap: wrap; } .ajbe__media-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ajbe__image-preview, .ajbe__embed-preview { display: grid; place-items: center; min-height: 150px; border: 1px dashed var(--db-border); border-radius: 6px; background: var(--db-content-bg); color: var(--db-muted); overflow: hidden; } .ajbe__image-preview img, .ajbe__image-preview video, .ajbe__image-preview iframe, .ajbe__embed-preview img, .ajbe__embed-preview video, .ajbe__embed-preview iframe { display: block; width: 100%; max-height: 420px; border: 0; object-fit: contain; } .ajbe__image-preview iframe, .ajbe__embed-preview iframe { min-height: 300px; } .ajbe__table-wrap { width: 100%; overflow-x: auto; } .ajbe__table-wrap table { width: 100%; border-collapse: collapse; } .ajbe__table-wrap th, .ajbe__table-wrap td { min-width: 100px; padding: 9px 10px; border: 1px solid var(--db-border); color: var(--db-text); } .ajbe__table-wrap th { background: var(--db-content-bg); text-align: left; } .ajbe__code { display: block; width: 100%; min-height: 180px; padding: 12px; border: 1px solid var(--db-border); border-radius: 6px; background: #17191f; color: #f3f4f6; font: 0.82rem/1.6 Consolas, "Courier New", monospace; resize: vertical; } .ajbe__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ajbe__columns > div { min-height: 120px; padding: 12px; border: 1px dashed var(--db-border); border-radius: 6px; background: var(--db-content-bg); } .ajbe__separator { margin: 18px 0; border: 0; border-top: 2px solid var(--db-border); } .ajbe__slash-menu { position: absolute; left: 44px; z-index: 15; width: min(320px, 100% - 64px); max-height: 280px; padding: 5px; border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-card-bg); overflow-y: auto; } .ajbe__slash-menu[hidden] { display: none; } .ajbe__slash-menu button { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: var(--db-text); text-align: left; cursor: pointer; } .ajbe__slash-menu button.is-active, .ajbe__slash-menu button:hover { background: var(--db-nav-hover); } .ajbe__slash-menu button b { color: var(--db-primary); } .ajbe__slash-menu button span { font-size: 0.76rem; } .content-image img, .content-embed iframe, .content-embed video { max-width: 100%; } .content-table { overflow-x: auto; } .content-callout { padding: 12px 14px; border-left: 4px solid var(--main_color); background: var(--bg_color_darker); } .content-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (max-width: 700px) { .ajbe__toolbar { align-items: stretch; } .ajbe__toolbar-group--history { margin-left: 0; } .ajbe__add-btn span, .ajbe__block-type { display: none; } .ajbe__canvas { padding: 14px 10px 38px 38px; } .ajbe__toolbox-grid, .ajbe__snippet-list, .ajbe__media-fields, .ajbe__columns, .content-columns { grid-template-columns: 1fr; } .ajbe__rail { opacity: 1; pointer-events: auto; } } .sa_card, .sa_stats .sa_stat { border-color: var(--border_color); border-radius: 8px; background: var(--white_color); } .sa_stats { gap: 12px; } .sa_stats .sa_stat { padding: 16px; } .sa_stats .sa_stat .sa_stat_val { font-size: 1.6rem; } .sa_stats .sa_stat .sa_stat_label { letter-spacing: 0; text-transform: none; } .sa_stats .sa_stat_button { appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .sa_stats .sa_stat_button:hover, .sa_stats .sa_stat_button:focus-visible { border-color: var(--main_color); background: var(--bg_color_darker); } .sa_stats .sa_stat_button:focus-visible { outline: 2px solid var(--main_color); outline-offset: 2px; } .sa_analytics_stat_details { max-height: 62vh; overflow: auto; } .sa_toolbar { position: sticky; top: 56px; z-index: 95; padding: 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .sa_chart_card { max-height: 250px; overflow: hidden; } .sa_chart_card .sa_card_title_row { align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .sa_chart_card .sa_card_title_row > div:first-child { min-width: min(100%, 240px); } .sa_chart_card .sa_card_title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; } .sa_chart_card .sa_muted { max-width: 62ch; margin: 4px 0 0; font-size: 0.78rem; line-height: 1.4; } .sa_chart_card .sa_chart_filter .form_input { min-width: 150px; margin: 0; } .sa_chart_card .tree_modal_actions { position: sticky; z-index: 3; bottom: -24px; margin: 0 -24px -24px; padding: 14px 24px 24px; border-top: 1px solid var(--border_color_lighter); background: var(--white_color); } .sa_chart_card .sa_chart_stat { display: grid; grid-template-columns: auto auto; gap: 7px; align-items: baseline; margin-left: auto; padding: 6px 10px; border-radius: 7px; background: var(--main_color_lighter5); color: var(--main_color_darker2); } .sa_chart_card .sa_chart_stat strong { font-size: 1rem; line-height: 1; } .sa_chart_card .sa_chart_stat span { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; } .sa_register_tabs { justify-self: start; } .sa_register_tabs button { border: 0; cursor: pointer; } .sa_register_panel { display: grid; gap: 10px; } .sa_register_panel[hidden] { display: none; } .sa_register_panel .sa_hint { margin: 0; } .sa_register_family_cards { display: grid; gap: 10px; max-height: 430px; overflow: auto; padding-right: 4px; } .sa_register_family_cards .popup_family_access_card { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .sa_register_family_cards .popup_family_option { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; border: 1px solid var(--border_color_lighter); border-radius: 8px; cursor: pointer; } .sa_register_family_cards .popup_family_option:has(input:checked) { border-color: var(--main_color); background: var(--main_color_lighter5); } .sa_register_family_cards .popup_family_option > input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .sa_register_family_cards .popup_family_check { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border_color_darker); border-radius: 7px; align-self: start; } .sa_register_family_cards .popup_family_check::before { content: "✓"; color: transparent; } .sa_register_family_cards input:checked + .popup_family_check { border-color: var(--main_color); background: var(--main_color); } .sa_register_family_cards input:checked + .popup_family_check::before { color: #fff; } .sa_register_family_cards .popup_family_text { min-width: 0; display: grid; grid-template-rows: 32px auto; } .sa_register_family_cards .popup_family_text strong, .sa_register_family_cards .popup_family_text small { display: block; } .sa_register_family_cards .popup_family_text strong { display: flex; align-items: center; color: var(--text_color); } .sa_register_family_cards .popup_family_text small { margin-top: 2px; color: var(--text_color_lighter1); font-size: 0.75rem; } .sa_register_family_cards .popup_family_permissions details { border: 1px solid var(--border_color_lighter); border-radius: 8px; background: var(--bg_color_lighter); } .sa_register_family_cards .popup_family_permissions summary { padding: 8px 10px; color: var(--text_color); font-size: 0.8rem; font-weight: 700; cursor: pointer; } .sa_register_family_cards .popup_family_perm_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 10px 10px; } .sa_register_family_cards .popup_family_perm_grid label { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text_color_lighter1); font-size: 0.75rem; } .sa_register_family_cards .popup_family_perm_grid label span { overflow-wrap: anywhere; } .sa_user_chart_svg { display: block; width: 100%; height: 132px; overflow: visible; } .sa_user_chart_svg .sa_chart_grid line { stroke: var(--border_color_lighter); stroke-width: 1; vector-effect: non-scaling-stroke; } .sa_user_chart_svg .sa_chart_grid .sa_chart_baseline { stroke: var(--border_color); } .sa_user_chart_svg path { opacity: 0.94; stroke: var(--main_color_darker1); stroke-width: 0.65; vector-effect: non-scaling-stroke; cursor: pointer; } .sa_user_chart_svg path:hover, .sa_user_chart_svg path:focus-visible { opacity: 1; stroke-width: 1.35; filter: saturate(1.2); outline: none; } .sa_user_chart_svg .sa_chart_zero { fill: var(--main_color); opacity: 0.42; stroke: none; } .sa_user_chart_svg .sa_chart_zero:hover, .sa_user_chart_svg .sa_chart_zero:focus-visible { opacity: 0.8; } .sa_chart_tooltip { position: fixed; z-index: 1100; display: none; max-width: min(240px, 100vw - 20px); padding: 7px 9px; border: 1px solid var(--border_color); border-radius: 6px; background: var(--white_color); color: var(--text_color); font-size: 0.78rem; font-weight: 700; line-height: 1.3; pointer-events: none; } .sa_chart_tooltip.open { display: block; } .sa_table_pagination { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; } .sa_table_count { min-width: max-content; color: var(--text_color_lighter1); font-size: 0.8rem; font-weight: 700; } .sa_table_limit { display: flex; align-items: center; gap: 7px; min-width: max-content; color: var(--text_color_lighter1); font-size: 0.78rem; } .sa_table_limit .form_input { width: auto; min-width: 62px; margin: 0; padding: 6px 24px 6px 8px; } .sa_table_page_nav { display: flex; align-items: center; gap: 3px; } .sa_table_page_btn { min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--border_color); border-radius: 6px; background: var(--white_color); color: var(--text_color); font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; } .sa_table_page_btn:hover, .sa_table_page_btn:focus-visible, .sa_table_page_btn.active { border-color: var(--main_color); color: var(--main_color_darker1); } .sa_table_page_btn.active { background: var(--main_color_lighter5); } .sa_table_page_btn:focus-visible { outline: 2px solid var(--main_color_lighter2); } .sa_table_page_btn:disabled { cursor: default; opacity: 0.45; } .sa_table_page_ellipsis { min-width: 18px; text-align: center; } .sa_chart_axis { display: flex; justify-content: space-between; gap: 12px; color: var(--text_color_lighter1); font-size: 0.76rem; } .sa_analytics_lazy { display: grid; gap: 10px; max-height: min(70vh, 620px); overflow: auto; padding-right: 4px; } .sa_analytics_lazy_row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color_lighter); } .sa_analytics_lazy_row div { min-width: 0; } .sa_analytics_lazy_row strong, .sa_analytics_lazy_row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sa_analytics_lazy_row small, .sa_analytics_lazy_row span, .sa_analytics_lazy_row time { color: var(--text_color_lighter1); font-size: 0.78rem; } .sa_analytics_lazy_metric { grid-template-columns: 34px minmax(0, 1fr) auto auto; } .sa_analytics_lazy_empty { margin: 0; padding: 8px; } .sa_table { border-collapse: separate; border-spacing: 0; } .sa_table th { background: var(--bg_color_darker); color: var(--text_color_lighter1); font-size: 0.78rem; font-weight: 700; } .sa_table th, .sa_table td { border-bottom-color: var(--border_color); } .sa_table tbody tr:hover td { background: var(--bg_color_darker); } .sa_login_wrap { background: var(--bg_color); } .sa_login_card { max-width: 420px; border-radius: 8px; } .sa_login_card .sa_login_logo img { border-radius: 8px; } .sa_login_card .sa_login_title { color: var(--text_color); font-size: 1.5rem; } @media (max-width: 820px) { .auth_container { padding: 24px 14px 80px; } .auth_container .wrapper_auth_container .form_auth { padding: 18px; } .manage_page { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - 3.4375rem); align-content: start; overflow: visible; } .manage_page .manage_sidebar { border-right: 0; border-bottom: 1px solid var(--border_color); } .manage_page .manage_content { overflow: visible; } .manage_page .manage_content .manage_content_inner { padding: 18px 14px 40px; } .sa_toolbar { align-items: stretch; } .sa_toolbar .sa_search, .sa_toolbar .sa_auto, .sa_toolbar .sa_btn { width: 100%; } .sa_table_pagination { flex-wrap: wrap; width: 100%; } .sa_table_count { margin-left: auto; } .sa_activities_toolbar { grid-template-columns: minmax(0, 1fr); } .sa_activities_toolbar .sa_activity_filter_form, .sa_activities_toolbar .sa_activity_bulk_form, .sa_activities_toolbar .sa_activity_filter_form label { width: 100%; } .sa_activities_toolbar .sa_activity_bulk_form { margin-left: 0; } .sa_activities_toolbar .sa_activity_toolbar_actions { width: 100%; } .sa_activities_toolbar .sa_activity_toolbar_actions .sa_btn, .sa_activities_toolbar .sa_activity_toolbar_actions form { flex: 1 1 0; } .sa_server_pagination { justify-content: space-between; } .sa_analytics_grid { min-width: 0; width: 100%; grid-template-columns: minmax(0, 1fr); } .sa_analytics_grid > .sa_card, .sa_analytics_grid .sa_table_wrap, .sa_analytics_grid .sa_analytics_split { min-width: 0; max-width: 100%; } .sa_analytics_grid > .sa_card { overflow: hidden; } .sa_analytics_geo_card { min-width: 0; max-width: 100%; } .sa_page_head { align-items: flex-start; } .sa_page_head_actions { width: 100%; margin-left: 0; } .sa_page_head_actions .sa_page_tabs { flex: 1 1 320px; } .sa_page_head_actions .sa_page_tab { min-height: 44px; } .sa_page_head_actions > .sa_btn { flex: 0 0 auto; } } @media (max-width: 520px) { .sa_page_head_actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; } .sa_page_head_actions .sa_page_tabs, .sa_page_head_actions > .sa_btn { width: 100%; } .sa_table_limit { width: 100%; justify-content: space-between; } .sa_table_page_nav { order: 3; width: 100%; justify-content: center; } .sa_analytics_grid > .sa_card { padding: 14px; } .sa_analytics_geo_card .sa_analytics_split { grid-template-columns: minmax(0, 1fr); } .sa_analytics_page .sa_table_wrap { overflow: visible; } .sa_analytics_page .sa_table td, .sa_blog_table td, .sa_activities_table td { align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--border_color_lighter); overflow-wrap: anywhere; } .sa_analytics_page .sa_table td::before, .sa_blog_table td::before, .sa_activities_table td::before { flex: 0 0 38%; } .sa_analytics_page .sa_table td[colspan]::before, .sa_blog_table td[colspan]::before, .sa_activities_table td[colspan]::before { display: none; } .sa_analytics_page .sa_table td:last-child, .sa_blog_table td:last-child, .sa_activities_table td:last-child { border-bottom: 0; } .sa_activities_table .sa_activity_action { min-width: 0; } .sa_blog_table .sa_btn, .sa_activities_table .sa_btn { min-width: 44px; min-height: 44px; } .sa_analytics_page .sa_table tr, .sa_blog_table tr, .sa_activities_table tr { padding: 6px 10px; } .sa_analytics_metric_row { grid-template-columns: 34px minmax(0, 1fr); } .sa_analytics_metric_row > span { grid-column: 2; justify-self: start; margin-top: -4px; } .sa_analytics_lazy_row, .sa_analytics_lazy_metric { grid-template-columns: minmax(0, 1fr); align-items: start; } } /* ── Subscription management ─────────────────────────────────────────────── */ .subscription_panel { display: grid; gap: 18px; max-width: 1180px; } .subscription_panel .manage_settings_card { border: 1px solid var(--border_color) !important; border-radius: 12px !important; background: var(--white_color) !important; overflow: hidden; } .subscription_panel .manage_settings_card_header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border_color_lighter); } .subscription_panel .manage_settings_card_header h2 { margin: 0; color: var(--text_color); font-size: 18px; font-weight: 600; } .subscription_panel .manage_settings_card_header p { margin-top: 5px; color: var(--text_color_lighter1); font-size: 14px; line-height: 1.45; } .subscription_status_top { display: grid; gap: 14px; } .subscription_label { display: block; color: var(--text_color_lighter); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; } .subscription_status_card .manage_settings_card_header { align-items: flex-start; gap: 18px; } .subscription_status_card .manage_settings_card_header h2 { font-size: 34px; line-height: 1; margin-bottom: 6px; } .subscription_manage_grid { grid-template-columns: minmax(0, 1fr); padding: 0; } .subscription_actions_card { display: flex; flex-direction: column; gap: 14px; padding: 0 20px 18px; } .subscription_actions_card .manage_settings_card_header { margin: 0 -20px; } .subscription_badge { display: inline-flex; align-items: center; border: 1px solid var(--border_color_lighter); border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--text_color); background: var(--bg_color_darker1); } .subscription_badge_active, .subscription_badge_lifetime { color: #0b6b4f; border-color: #b7dfcf; background: #eefaf5; } .subscription_badge_grace { color: #8a5b00; border-color: #f2d394; background: #fff7e3; } .subscription_badge_expired { color: #9a2727; border-color: #efb7b7; background: #fff1f1; } .subscription_grace_notice { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px clamp(16px, 3vw, 28px); border-bottom: 1px solid #f0d28c; background: #fff7df; color: #684600; } .subscription_grace_notice div { display: grid; gap: 2px; } .subscription_grace_notice strong { font-size: 14px; color: #5d3e00; } .subscription_grace_notice span { font-size: 13px; line-height: 1.35; } .subscription_grace_notice a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 12px; border-radius: 8px; background: #664400; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; } .subscription_meta_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding: 18px 20px 20px; } .subscription_meta_grid div { border: 1px solid var(--border_color_lighter); border-radius: 10px; padding: 14px 16px; background: var(--bg_color_darker1); } .subscription_meta_grid span, .subscription_plan_card small { display: block; color: var(--text_color_lighter); font-size: 12px; } .subscription_meta_grid span { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .subscription_meta_grid strong { display: block; margin-top: 6px; color: var(--text_color); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; } .subscription_storage_bar { height: 10px; margin: 0 20px 20px; overflow: hidden; border-radius: 999px; background: var(--border_color_lighter); } .subscription_storage_bar span { display: block; min-width: 4px; height: 100%; border-radius: inherit; background: var(--main_color); } .subscription_action_row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 0; } .subscription_auto_form { margin-top: 0; } /* ── APIs & connectors ──────────────────────────────────────────────────── */ .api_connectors_page { display: grid; gap: 18px; max-width: 1180px; } .api_connectors_intro, .api_settings_form { border: 1px solid var(--border_color) !important; } .api_settings_form { overflow: hidden; } .api_status_badge { display: inline-flex; align-items: center; width: max-content; border: 1px solid var(--border_color_lighter); border-radius: 999px; padding: 5px 9px; font-size: 12px; font-weight: 700; color: var(--text_color_lighter1); background: var(--bg_color_darker1); } .api_status_badge.active { color: #0b6b4f; border-color: #b7dfcf; background: #eefaf5; } .api_status_badge.off, .api_status_badge.revoked, .api_status_badge.deleted { color: #8a5b00; border-color: #f2d394; background: #fff7e3; } .api_examples_grid { display: grid; gap: 8px; } .api_examples_grid code { display: block; overflow-x: auto; border: 1px solid var(--border_color_lighter); border-radius: 8px; padding: 10px 12px; background: var(--bg_color_darker1); color: var(--text_color); font-size: 12px; line-height: 1.5; } .api_examples_panel { margin: 0 20px 18px; border: 1px solid var(--border_color_lighter); border-radius: 8px; background: var(--bg_color); } .api_examples_panel summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 14px; cursor: pointer; list-style: none; } .api_examples_panel summary::-webkit-details-marker { display: none; } .api_examples_panel summary strong { color: var(--text_color); font-size: 14px; } .api_examples_panel summary span { color: var(--text_color_lighter1); font-size: 12px; } .api_examples_panel summary::after { content: "+"; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border_color); border-radius: 7px; color: var(--main_color); font-weight: 700; } .api_examples_panel[open] summary::after { content: "-"; } .api_examples_panel[open] .api_examples_grid { padding: 0 14px 14px; } .api_family_access_body { display: grid; gap: 18px; padding: 0 22px 18px; } .api_enable_toggle { display: flex; align-items: center; gap: 12px; margin: 0; min-height: 64px; width: min(760px, 100%); padding: 14px 16px; border: 1px solid var(--border_color_lighter); border-radius: 8px; background: var(--bg_color); } .api_enable_toggle > input { flex: 0 0 auto; align-self: center; margin: 0; } .api_enable_toggle > .gallery_detail_toggle_knob { display: none; } .api_enable_toggle > span:not(.gallery_detail_toggle_knob) { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; line-height: 1.35; } .api_enable_toggle > span:not(.gallery_detail_toggle_knob) small { display: inline; margin: 0; } .api_scope_picker { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border_color_lighter); } .api_scope_picker_head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; max-width: 100%; } .api_scope_picker_head strong { color: var(--text_color); font-size: 14px; font-weight: 700; } .api_scope_picker_head span { color: var(--text_color_lighter1); font-size: 12px; } .api_resource_grid, .api_scope_grid_small { display: grid; gap: 10px; } .api_resource_grid { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 10px; padding: 0; } .api_scope_tile, .api_scope_grid_small label { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border_color_lighter); border-radius: 8px; padding: 12px 14px; color: var(--text_color); background: var(--bg_color_darker1); font-size: 13px; } .api_scope_tile { min-height: 54px; padding: 8px 10px; font-size: 15px; cursor: pointer; } .api_scope_tile input { width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--main_color); } .api_scope_tile span { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; } .api_scope_tile:has(input:checked) { border-color: rgba(0, 147, 165, 0.34); background: rgba(0, 147, 165, 0.08); } .api_settings_actions { margin-top: 0; padding: 18px 22px 22px; border-top: 1px solid var(--border_color_lighter); justify-content: flex-start; } .api_settings_actions .button1 { min-height: 44px; min-width: 96px; } .api_connectors_columns, .sa_api_logs_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .api_compact_form { display: grid; gap: 12px; padding: 0 20px 18px; } .api_compact_form label span { display: block; margin-bottom: 6px; color: var(--text_color_lighter1); font-size: 13px; font-weight: 600; } .api_scope_grid_small { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .api_scope_grid_small label { margin: 0; } .api_table_wrap { overflow-x: auto; padding: 0 20px 18px; } .api_table { width: 100%; border-collapse: collapse; font-size: 13px; } .api_table th, .api_table td { border-bottom: 1px solid var(--border_color_lighter); padding: 10px 8px; text-align: left; vertical-align: top; } .api_table th { color: var(--text_color_lighter1); font-size: 12px; font-weight: 700; text-transform: uppercase; } .api_table small { display: block; margin-top: 3px; color: var(--text_color_lighter); word-break: break-all; } .api_empty { color: var(--text_color_lighter1); font-size: 13px; } .api_webhook_list { display: grid; gap: 10px; padding: 0 20px 18px; } .api_webhook_item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border: 1px solid var(--border_color_lighter); border-radius: 8px; padding: 12px; background: var(--bg_color_darker1); } .api_webhook_item small { display: block; margin: 4px 0 8px; color: var(--text_color_lighter1); word-break: break-all; } .api_row_actions { display: flex; flex-wrap: wrap; gap: 8px; } .api_secret_box { display: grid; gap: 8px; margin-top: 10px; border: 1px solid var(--border_color_lighter); border-radius: 8px; padding: 12px; background: var(--bg_color_darker1); } .api_secret_box code { overflow-x: auto; white-space: nowrap; font-size: 13px; } .sa_api_resource_checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; } .sa_api_resource_checks label { font-size: 12px; color: var(--text_color_lighter1); } .sa_api_scope_chips { display: flex; flex-wrap: wrap; gap: 6px; } .sa_api_scope_chips span { border: 1px solid var(--border_color_lighter); border-radius: 999px; padding: 4px 8px; background: var(--bg_color_darker1); color: var(--text_color_lighter1); font-size: 12px; } .sa_seo_form { display: grid; gap: 16px; } .sa_seo_card { display: grid; gap: 16px; } .sa_seo_card_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .sa_seo_card_head .sa_card_title { margin-bottom: 4px; } .sa_seo_groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; } .sa_seo_group { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color_lighter); } .sa_seo_group h3 { margin: 0; color: var(--text_color); font-size: 0.9rem; } .sa_seo_group label { display: grid; gap: 5px; min-width: 0; } .sa_seo_group textarea { min-height: 96px; resize: vertical; } .subscription_auto_form .manage_filter_select { min-width: 230px; } .subscription_action_buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; } .subscription_action_buttons form { margin: 0; } .subscription_action_buttons .manage_add_new_btn.danger { background: transparent; border-color: var(--light_red_2); color: var(--light_red); } .subscription_action_buttons .manage_add_new_btn.danger:hover { background: var(--light_red); border-color: var(--light_red); color: #fff !important; } .subscription_plan_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; padding: 18px 20px; } .subscription_plan_choices .manage_field_msg { margin: 0; padding: 0 20px 18px; } .subscription_plan_card .manage_add_new_btn { justify-content: center; } .subscription_plan_card { display: grid; gap: 8px; min-height: 158px; padding: 18px; border: 1px solid var(--border_color_darker); border-radius: 10px; align-content: start; transition: border-color 0.15s ease, background 0.15s ease; cursor: pointer; } .subscription_plan_card:hover { border-color: var(--main_color_lighter3); } .subscription_plan_card .manage_add_new_btn { margin-top: auto; } .subscription_plan_card.is_current { background: var(--main_color_lighter5); border-color: var(--main_color_lighter4); } .subscription_plan_card.is_current:hover { border-color: var(--main_color_lighter3); } .subscription_plan_card.is_current .manage_add_new_btn { background: transparent; border-color: var(--main_color); color: var(--main_color); cursor: default; } .subscription_plan_card.is_current .manage_add_new_btn:hover { background: transparent; border-color: var(--main_color); } .subscription_plan_card strong, .subscription_plan_card span { color: var(--text_color); } .subscription_plan_card strong { font-size: 18px; font-weight: 700; } .subscription_plan_card span { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; } .subscription_plan_card small { margin-top: 2px; line-height: 1.4; } .subscription_current_plan { margin-top: 30px; color: var(--main_color) !important; font-style: italic; font-weight: 400 !important; text-align: left; } .subscription_feedback:not(:empty) { border: 1px solid var(--border_color_lighter); border-radius: 10px; padding: 10px 12px; background: var(--bg_color_darker1); } .sa_subscriptions_table td > small { display: block; margin-top: 4px; color: var(--text_color_lighter); } .sa_blog_image_field { display: grid; gap: 8px; } .sa_blog_image_field .sa_blog_image_dropzone { max-width: 520px; } .sa_blog_image_field .sa_muted { margin: 0; } .sa_blog_thumb { display: block; width: 72px; height: 46px; object-fit: cover; border: 1px solid var(--border_color); border-radius: 6px; } .sa_subscription_filters, .sa_api_filters { display: contents; } .sa_subscription_form { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 8px; min-width: 360px; } .sa_subscription_form button { grid-column: 1/-1; } .sa_storage_plan_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; } .sa_storage_plan_grid div { border: 1px solid var(--border_color_lighter); border-radius: 10px; padding: 12px 14px; background: var(--bg_color_darker1); } .sa_storage_plan_grid strong, .sa_storage_plan_grid span { display: block; } .sa_storage_plan_grid strong { color: var(--text_color); font-size: 0.92rem; } .sa_storage_plan_grid span { margin-top: 5px; color: var(--text_color_lighter1); font-size: 0.82rem; font-weight: 700; } .subscription_upgrade_gate { position: relative; overflow: hidden; border: 1px solid var(--border_color_lighter); border-radius: 8px; background: var(--bg_color); padding: clamp(18px, 4vw, 34px); } .subscription_upgrade_blur { display: grid; gap: 14px; filter: blur(4px); opacity: 0.42; pointer-events: none; user-select: none; } .subscription_upgrade_blur > div { min-height: 84px; border: 1px solid var(--border_color_lighter); border-radius: 8px; background: var(--bg_color_darker1); } .subscription_upgrade_panel { position: relative; z-index: 1; display: grid; gap: 18px; margin-top: -220px; min-height: 220px; align-content: center; } .subscription_upgrade_panel h2 { color: var(--text_color); } .subscription_upgrade_panel p { max-width: 760px; color: var(--text_color_lighter); } .subscription_upgrade_pricing { max-width: 820px; } .subscription_upgrade_pricing .pub_price_card { min-height: 0; } /* ============================================================================ Public marketing pages - editorial SaaS layout Structure from the Racinage Site template, recoloured to the brand palette. All public rules are scoped under .pub_site so the dashboard theme and dark mode never bleed in (the marketing site keeps one fixed light palette). ============================================================================ */ html.pub_html { --plugins-site-header-height: 60px; height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; scroll-padding-top: var(--plugins-site-header-height); } .pub_site { margin: 0; height: auto; overflow: visible; min-height: 100vh; display: flex; flex-direction: column; background: #f5fafd; color: #52605f; font-family: "Inter", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .pub_site *, .pub_site *::before, .pub_site *::after { box-sizing: border-box; } .pub_site ::selection { background: #c35900; color: #fff; } .pub_site a { color: inherit; } .pub_site img { max-width: 100%; display: block; } @keyframes pub_fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .pub_wrap { max-width: 1500px; margin: 0 auto; padding: 0 28px; } .pub_kicker { font: 500 12px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: #c35900; margin: 0 0 18px; } .pub_btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border-radius: 10px; border: 1px solid transparent; padding: 14px 24px; font: 600 16px/1 "Inter", sans-serif; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .pub_btn.smaller { padding: 11px 18px; font-size: 15px; } .pub_btn.pub_btn_solid { background: #00353c; color: #fff; } .pub_btn.pub_btn_solid svg { fill: currentColor; } .pub_btn.pub_btn_solid:hover { background: #00282d; } .pub_btn.pub_btn_ghost { background: #f5fafd; color: #00353c; border-color: #b9ccce; } .pub_btn.pub_btn_ghost:hover { border-color: #00353c; } .pub_btn.pub_btn_accent { background: #ffc594; color: #00353c; } .pub_btn.pub_btn_accent:hover { background: #ffd6ad; } .pub_btn.pub_btn_outline_dark { background: transparent; color: #eaf4f1; border-color: #335a52; } .pub_btn.pub_btn_outline_dark:hover { background: rgba(255, 255, 255, 0.06); } .pub_header { position: sticky; top: 0; z-index: 50; background: rgba(245, 250, 253, 0.86); backdrop-filter: blur(12px); border-bottom: 1px solid #dbe5ea; } .plugins_site_header { min-height: var(--plugins-site-header-height); } .pub_nav_toggle { position: absolute !important; top: 0; left: 0; opacity: 0; pointer-events: none; width: 0; height: 0; } .pub_header_inner { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 clamp(18px, 3vw, 56px); height: 60px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2vw, 32px); } .pub_brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .pub_brand img { height: 34px; width: auto; } .pub_nav { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 1.4vw, 26px); min-width: 0; } .pub_nav_link { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 55px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; white-space: nowrap; text-decoration: none; font: 500 15px/1 "Inter", sans-serif; color: #45524f; padding: 0; transition: border-color 0.18s ease, color 0.18s ease; } .pub_nav_link:hover { border-bottom-color: var(--secondary_color_lighter4); color: var(--secondary_color_lighter2); } .pub_nav_link.is_active { border-bottom-color: var(--main_color_lighter2); color: var(--main_color); } .pub_header_cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .pub_header_cta .pub_profile_group { display: flex; align-items: center; gap: 10px; } .pub_header_cta .pub_profile_group .family_switcher_form { position: relative; min-width: 132px; max-width: 180px; } .pub_header_cta .pub_profile_group .family_switcher_form.is_open::after { rotate: -135deg; margin-top: -2px; } .pub_header_cta .pub_profile_group .family_switcher_form .family_switcher_current_icon { position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; color: #00353c; transform: translateY(-50%); pointer-events: none; } .pub_header_cta .pub_profile_group .family_switcher_form .family_switcher_current_icon svg { width: 100%; height: 100%; fill: currentColor; } .pub_header_cta .pub_profile_group .family_switcher_form::after { content: ""; position: absolute; top: 50%; right: 12px; width: 6px; height: 6px; border-right: 1.5px solid #84908f; border-bottom: 1.5px solid #84908f; rotate: 45deg; margin-top: -4px; pointer-events: none; } .pub_header_cta .pub_profile_group .family_switcher_form.family_switcher_single::after { display: none; } .pub_header_cta .pub_profile_group .family_switcher_trigger { display: flex; align-items: center; width: 100%; height: 38px; padding: 0 30px 0 36px; border: 1px solid #dbe5ea; border-radius: 999px; background: #ffffff; color: #00353c; font: 600 13px/1.2 "Inter", sans-serif; text-align: left; cursor: pointer; } .pub_header_cta .pub_profile_group .family_switcher_dropdown { position: absolute; top: calc(100% + 6px); right: 0; width: min(18rem, 92vw); max-height: 18rem; overflow-y: auto; padding: 8px; border: 1px solid #dbe5ea; border-radius: 12px; background: #ffffff; z-index: 1300; } .pub_header_cta .pub_profile_group .manage_btn_header { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid #dbe5ea; border-radius: 999px; color: #00353c; background: #ffffff; text-decoration: none; font: 700 13px/1 "Inter", sans-serif; white-space: nowrap; } .pub_header_cta .pub_profile_group .manage_btn_header svg { width: 15px; height: 15px; fill: currentColor; } .pub_header_cta .pub_profile_group .manage_btn_header:hover { border-color: #00353c; background: #f4faff; } .pub_header_cta .pub_profile_group .profile_header { display: grid; grid-template-columns: auto 14px; align-items: center; gap: 1px; min-height: 40px; padding: 1px; cursor: pointer; } .pub_header_cta .pub_profile_group .profile_header .actual_photo img { width: 38px; height: 38px; object-fit: cover; border: 2px solid #dbe5ea; border-radius: 50%; } .pub_header_cta .pub_profile_group .profile_header .arrow_down svg { width: 14px; fill: #84908f; rotate: 90deg; } .pub_header_cta .pub_profile_group .profile_header:hover .actual_photo img { border-color: #00353c; } .pub_header_cta .pub_profile_group .profile_header:focus-visible { outline: 2px solid #c35900; outline-offset: 3px; border-radius: 999px; } .pub_login { text-decoration: none; font: 600 15px/1 "Inter", sans-serif; color: #00353c; } .pub_tools { display: flex; align-items: center; gap: 8px; } .pub_lang { position: relative; } .pub_lang .selected_language { border: 0; background: transparent; color: #00353c; font: 600 14px/1 "Inter", sans-serif; grid-template-columns: 22px auto; align-items: center; } .pub_lang .selected_language .flag { width: 22px; height: 16px; flex: 0 0 22px; overflow: hidden; } .pub_lang .selected_language .flag img { display: block; width: 22px; height: 16px; border-radius: 3px; object-fit: cover; } .pub_lang .selected_language .text { gap: 2px; } .pub_lang .actual_other_languages { right: 0; top: 130%; } .pub_lang .actual_other_languages .one_lang { width: 100%; color: #52605f; border: 0; background: transparent; font: 500 14px/1 "Inter", sans-serif; } .pub_lang .actual_other_languages .one_lang:hover { background: #f4faff; color: #0a2a2f; } .pub_theme_btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #dbe5ea; border-radius: 9px; background: #ffffff; cursor: pointer; color: #00353c; padding: 0; transition: background 0.18s ease, border-color 0.18s ease; } .pub_theme_btn svg { width: 18px; height: 18px; fill: currentColor; } .pub_theme_btn:hover { border-color: #00353c; } .pub_theme_btn.active { background: #00353c; color: #eaf4f1; border-color: #00353c; } .pub_burger { display: none; position: relative; width: 38px; height: 38px; padding: 0; cursor: pointer; background: none; border: 0; } .pub_burger span { position: absolute; left: 8px; width: 22px; height: 2px; border-radius: 2px; background: #00353c; transition: top 0.18s ease, opacity 0.18s ease, transform 0.18s ease; } .pub_burger span:nth-child(1) { top: 11px; } .pub_burger span:nth-child(2) { top: 18px; } .pub_burger span:nth-child(3) { top: 25px; } .pub_mobile { display: none; flex-direction: column; gap: 2px; border-top: 1px solid #dbe5ea; background: #f5fafd; padding: 12px 28px 22px; animation: pub_fade 0.22s ease; } .pub_mobile a { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 17px/1 "Inter", sans-serif; color: #344340; padding: 13px 6px; border-bottom: 1px solid #e8eef2; } .pub_mobile a span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; } .pub_mobile .pub_mobile_icon { width: 18px; height: 18px; flex: 0 0 18px; fill: currentColor; opacity: 0.82; } .pub_mobile .pub_mobile_tools { display: flex; align-items: center; gap: 10px; margin-top: 16px; border: 0; padding: 0 6px; } .pub_mobile .pub_mobile_lang { display: flex; gap: 8px; flex: 1; } .pub_mobile .pub_mobile_lang a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border: 1px solid #dbe5ea; border-radius: 9px; border-bottom: 1px solid #dbe5ea; font: 600 14px/1 "Inter", sans-serif; color: #52605f; cursor: pointer; } .pub_mobile .pub_mobile_lang a img { width: 17px; height: 17px; border-radius: 50%; object-fit: cover; } .pub_mobile .pub_mobile_lang a.is_active { color: #00353c; border-color: #00353c; } .pub_mobile .pub_mobile_cta { display: flex; gap: 12px; margin-top: 14px; border: 0; } .pub_mobile .pub_mobile_cta a { flex: 1; justify-content: center; text-align: center; border-radius: 9px; padding: 13px; border-bottom: 0; font: 600 15px/1 "Inter", sans-serif; } .pub_mobile .pub_mobile_cta .pub_login { border: 1px solid #b9ccce; color: #00353c; } .pub_mobile .pub_mobile_cta .pub_btn_solid { background: #00353c; color: #fff; } .pub_mobile .pub_mobile_cta .pub_btn_solid span, .pub_mobile .pub_mobile_cta .pub_btn_solid .pub_mobile_icon { color: #fff; fill: currentColor; } .pub_mobile .pub_mobile_cta .pub_btn_solid .pub_mobile_icon { opacity: 1; } .pub_nav_toggle:checked ~ .pub_mobile { display: flex; } .pub_nav_toggle:checked ~ .pub_header_inner .pub_burger span:nth-child(1) { top: 18px; transform: rotate(45deg); } .pub_nav_toggle:checked ~ .pub_header_inner .pub_burger span:nth-child(2) { opacity: 0; } .pub_nav_toggle:checked ~ .pub_header_inner .pub_burger span:nth-child(3) { top: 18px; transform: rotate(-45deg); } .pub_main { flex: 1; } .pub_section { max-width: 1500px; margin: 0 auto; padding: clamp(64px, 8vw, 104px) 28px; } .pub_section_narrow { max-width: 1100px; } .pub_section_head { max-width: 640px; margin-bottom: 54px; } .pub_section_head.center { margin-left: auto; margin-right: auto; text-align: center; max-width: 620px; } .pub_section_head h2 { font: 500 clamp(28px, 4vw, 44px)/1.08 "Inter", sans-serif; letter-spacing: -0.015em; color: #0a2a2f; margin: 0; } .pub_page_hero { border-bottom: 1px solid #dbe5ea; } .pub_page_hero .pub_page_hero_inner { max-width: 1500px; margin: 0 auto; padding: clamp(56px, 7vw, 92px) 28px clamp(40px, 5vw, 60px); } .pub_page_hero.center .pub_page_hero_inner { text-align: center; } .pub_page_hero h1 { font: 500 clamp(34px, 5vw, 56px)/1.05 "Inter", sans-serif; letter-spacing: -0.018em; color: #0a2a2f; margin: 0 0 20px; max-width: 780px; } .pub_page_hero h1 em { font-style: italic; color: #00353c; } .pub_page_hero.center h1 { margin-left: auto; margin-right: auto; } .pub_page_hero > .pub_page_hero_inner > p { font: 400 18px/1.6 "Inter", sans-serif; color: #52605f; margin: 0; max-width: 600px; } .pub_page_hero.center > .pub_page_hero_inner > p { margin-left: auto; margin-right: auto; } .demo_dashboard_page { min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--bg_color); color: var(--text_color); } .demo_dashboard_page .header { top: 35px; } .demo_dashboard_page .gallery_album_group_header { top: calc(35px + 3.4375rem) !important; } .demo_dashboard_page .persons_toolbar { top: calc(35px + 3.4375rem); } .demo_top_bar { position: sticky; top: 0; z-index: 1400; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; width: 100%; height: 35px; padding: 0 20px; border-bottom: 1px solid var(--main_color_darker); background: var(--main_color); color: #fff; } .demo_top_bar, .demo_top_bar a, .demo_top_bar span, .demo_top_bar strong, .demo_top_bar time { color: #fff; } .demo_top_bar svg, .demo_top_bar svg path { fill: #fff; } .demo_top_bar > strong { font-size: 13px; font-weight: 700; text-align: center; } .demo_top_bar_exit, .demo_top_bar_timer { display: flex; align-items: center; gap: 7px; color: #fff; font-size: 12px; } .demo_top_bar_exit { justify-self: start; min-height: 35px; padding: 0 7px; color: #fff; } .demo_top_bar_exit svg { width: 17px; height: 17px; fill: #fff; } .demo_top_bar_exit svg path { fill: #fff; } .demo_top_bar_exit:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .demo_top_bar_timer { justify-self: end; } .demo_top_bar_timer time { color: #fff; min-width: 52px; font: 700 12px/1.2 monospace; text-align: right; } .demo_end_overlay { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 18px; overflow-y: auto; background: rgba(10, 25, 28, 0.62); backdrop-filter: blur(8px); } .demo_end_overlay[hidden] { display: none; } .demo_summary_modal { box-sizing: border-box; width: min(720px, 100%); padding: clamp(20px, 4vw, 34px); border: 1px solid var(--border_color); border-radius: 14px; background: var(--white_color); color: var(--text_color); } .demo_summary_modal > header p { margin-bottom: 5px; color: var(--main_color); font-size: 12px; font-weight: 700; text-transform: uppercase; } .demo_summary_modal > header h2 { font-size: clamp(26px, 5vw, 36px); } .demo_summary_stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 22px 0; } .demo_summary_stats article { padding: 13px; border: 1px solid var(--border_color); border-radius: 9px; } .demo_summary_stats article strong, .demo_summary_stats article span { display: block; } .demo_summary_stats article strong { font-size: 22px; } .demo_summary_stats article span { margin-top: 4px; color: var(--text_color_lighter1); font-size: 12px; } .demo_feedback_form { display: grid; gap: 10px; } .demo_feedback_form label { display: grid; gap: 7px; font-size: 13px; font-weight: 600; } .demo_feedback_form textarea { width: 100%; min-height: 110px; padding: 12px; border: 1px solid var(--border_color); border-radius: 9px; background: var(--white_color); color: var(--text_color); font: inherit; resize: vertical; } .demo_feedback_form > div { display: flex; align-items: center; gap: 12px; } .demo_feedback_form p { font-size: 12px; } .demo_feedback_form p.success { color: var(--green_color); } .demo_feedback_form p.error { color: var(--light_red); } .demo_summary_actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; } .demo_toast { position: fixed; right: 18px; bottom: 18px; z-index: 2500; max-width: 320px; padding: 11px 14px; border: 1px solid var(--main_color_lighter3); border-radius: 8px; background: var(--white_color); color: var(--text_color); font-size: 13px; } .pub_hero { position: relative; overflow: hidden; border-bottom: 1px solid #dbe5ea; background: #f5fafd; } .pub_hero_inner { max-width: 1500px; margin: 0 auto; padding: clamp(56px, 8vw, 100px) 28px clamp(40px, 5vw, 64px); display: flex; flex-direction: column; align-items: center; text-align: center; } .pub_hero_copy { max-width: 980px; } .pub_hero_copy .pub_kicker { display: block; } .pub_hero_copy h1 { font: 600 clamp(38px, 6vw, 64px)/1.06 "Inter", sans-serif; letter-spacing: -0.02em; color: #0a2a2f; margin: 0 0 22px; } .pub_hero_copy h1 em { font-style: normal; color: #0093a5; } .pub_hero_copy .pub_lead { font: 400 clamp(16px, 2vw, 19px)/1.6 "Inter", sans-serif; color: #52605f; margin: 0 auto 32px; max-width: 880px; } .pub_hero_copy .pub_actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .pub_hero_copy .pub_note { font: 400 13.5px/1.5 "Inter", sans-serif; color: #84908f; margin: 22px 0 0; } .pub_hero_shot { position: relative; margin: clamp(40px, 5vw, 64px) auto 0; width: 100%; max-width: 1400px; } .pub_hero_shot::before { content: ""; display: none; } .pub_hero_shot .pub_shot_frame { position: relative; z-index: 1; box-shadow: 0 30px 70px -40px rgba(0, 40, 46, 0.5); } .pub_hero_shot .pub_shot_frame > img { aspect-ratio: 1672/941; height: auto; object-fit: contain; } .pub_shot { position: relative; margin: 0; } .pub_shot::before { content: ""; position: absolute; inset: -14px -14px 18px 18px; background: #ffc594; border-radius: 18px; opacity: 0.45; } .pub_shot_frame { position: relative; background: #ffffff; border: 1px solid #dbe5ea; border-radius: 16px; padding: 12px; } .pub_shot_frame .pub_shot_dots { display: flex; gap: 6px; padding: 6px 6px 12px; } .pub_shot_frame .pub_shot_dots span { width: 10px; height: 10px; border-radius: 50%; background: #dbe5ea; } .pub_shot_frame .pub_shot_dots span:nth-child(1) { background: #ffc594; } .pub_shot_frame .pub_shot_dots span:nth-child(2) { background: #cdd9c4; } .pub_shot_frame .pub_shot_dots span:nth-child(3) { background: #a9cdc9; } .pub_shot_frame > img { width: 100%; border-radius: 10px; border: 1px solid #e8eef2; display: block; } .pub_shot_frame > video, .pub_shot_frame > iframe, .pub_shot_frame > .pub_video_link { width: 100%; aspect-ratio: 1672/941; border: 1px solid #e8eef2; border-radius: 10px; display: block; overflow: hidden; } .pub_shot_frame > video { height: auto; object-fit: cover; } .pub_shot_frame > iframe { height: auto; min-height: clamp(320px, 48vw, 620px); } .pub_shot_frame > .pub_video_link { display: flex; align-items: center; justify-content: center; min-height: clamp(300px, 44vw, 560px); padding: 24px; text-align: center; color: #00353c; background: #f4faff; font: 700 18px/1.3 "Inter", sans-serif; text-decoration: none; } .pub_tree_preview { width: 100%; height: clamp(360px, 46vw, 620px); margin: 0; border: 1px solid #e8eef2; border-radius: 10px; background-color: #f7fbfb; touch-action: none; cursor: grab; } .pub_tree_preview .tree_canvas { top: -42px; } .pub_tree_preview .cta_panel { right: 12px; bottom: 12px; margin: 0; } .pub_preview_mobile_only { display: none !important; } .pub_grid_cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #dbe5ea; border: 1px solid #dbe5ea; border-radius: 16px; overflow: hidden; } @media (max-width: 900px) { .pub_grid_cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .pub_grid_cells { grid-template-columns: 1fr; } } .pub_grid_cells article { background: #ffffff; padding: 34px 30px; min-height: 196px; transition: background 0.18s ease; } .pub_grid_cells article:hover { background: #f4faff; } .pub_grid_cells .pub_cell_num { font: 500 13px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; color: #c35900; margin-bottom: 20px; } .pub_grid_cells h3 { font: 600 20px/1.2 "Inter", sans-serif; color: #00353c; margin: 0 0 10px; } .pub_grid_cells p { font: 400 15.5px/1.6 "Inter", sans-serif; color: #52605f; margin: 0; } .pub_cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; } .pub_cards article { background: #ffffff; border: 1px solid #dbe5ea; border-radius: 16px; padding: 34px 30px; } .pub_cards h3 { font: 600 21px/1.2 "Inter", sans-serif; color: #00353c; margin: 0 0 11px; } .pub_cards p { font: 400 15.5px/1.6 "Inter", sans-serif; color: #52605f; margin: 0; } .pub_card_badge { width: 42px; height: 42px; border-radius: 11px; background: #eaf1f8; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .pub_card_badge span { font: 500 14px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; color: #c35900; } .pub_band { background: #00353c; color: #eaf4f1; } .pub_band_inner { max-width: 1500px; margin: 0 auto; padding: clamp(64px, 8vw, 96px) 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: center; } .pub_band_inner .pub_kicker { color: #ffa85f; } .pub_band_inner h2 { font: 500 clamp(28px, 4vw, 42px)/1.1 "Inter", sans-serif; letter-spacing: -0.01em; color: #fbfdfb; margin: 0 0 18px; } .pub_band_inner p { font: 400 17px/1.6 "Inter", sans-serif; color: #a9c2bf; margin: 0 0 28px; max-width: 480px; } .pub_band.center .pub_band_inner { display: block; text-align: center; } .pub_band.center .pub_band_inner h2 { margin: 0 auto 26px; max-width: 640px; } .pub_band.center .pub_band_inner .pub_actions { justify-content: center; } .pub_roadmap { display: flex; flex-direction: column; gap: 14px; } .pub_roadmap div { display: flex; align-items: center; gap: 16px; background: #0a3e44; border: 1px solid #1d4f56; border-radius: 12px; padding: 18px 22px; } .pub_roadmap strong { font: 500 12px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; color: #ffa85f; letter-spacing: 0.05em; white-space: nowrap; } .pub_roadmap span { font: 400 16px/1.4 "Inter", sans-serif; color: #d6e6e2; } .pub_plan_teaser { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .pub_plan_teaser article { background: #ffffff; border: 1px solid #dbe5ea; border-radius: 16px; padding: 30px 28px; display: flex; flex-direction: column; } .pub_plan_teaser .pub_plan_name { font: 600 18px/1 "Inter", sans-serif; color: #00353c; margin-bottom: 10px; } .pub_plan_teaser .pub_plan_price { font: 500 30px/1 "Inter", sans-serif; color: #0a2a2f; margin-bottom: 14px; } .pub_plan_teaser .pub_plan_billing { margin: -6px 0 12px; color: #84908f; font: 500 13px/1.35 "Inter", sans-serif; } .pub_plan_teaser p { font: 400 15px/1.55 "Inter", sans-serif; color: #52605f; margin: 0 0 22px; flex: 1; } .pub_plan_teaser .pub_plan_perks { margin: 0 0 20px; color: #52605f; font: 400 14px/1.45 "Inter", sans-serif; } .pub_plan_teaser .pub_plan_perks summary { min-height: 40px; display: flex; align-items: center; color: #00353c; font-weight: 600; cursor: pointer; } .pub_plan_teaser .pub_plan_perks ul { margin: 4px 0 0; padding-left: 20px; } .pub_plan_teaser .pub_plan_perks li + li { margin-top: 5px; } .pub_plan_teaser .pub_btn { justify-content: center; } .pub_pricing { max-width: 1500px; margin: 0 auto; padding: clamp(36px, 5vw, 56px) 28px clamp(40px, 5vw, 64px); } .pub_pricing_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; align-items: stretch; } .pub_price_card { position: relative; background: #ffffff; border: 1px solid #dbe5ea; border-radius: 18px; padding: 34px 30px; display: flex; flex-direction: column; } .pub_price_card .pub_price_name { font: 600 25px/1 "Inter", sans-serif; color: #00353c; margin-bottom: 14px; } .pub_price_card .pub_price_amount { display: flex; align-items: baseline; gap: 4px; margin-bottom: 8px; } .pub_price_card .pub_price_amount strong { font: 500 40px/1 "Inter", sans-serif; color: #0a2a2f; } .pub_price_card .pub_price_amount span { font: 400 15px/1 "Inter", sans-serif; color: #84908f; } .pub_price_card .pub_price_tag { font: 400 14.5px/1.55 "Inter", sans-serif; color: #52605f; margin: 0 0 22px; min-height: 44px; } .pub_price_card .pub_btn { justify-content: center; margin-bottom: 24px; } .pub_price_card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pub_price_card li { display: flex; align-items: flex-start; gap: 11px; font: 400 14.5px/1.5 "Inter", sans-serif; color: #3c4a48; } .pub_price_card li::before { content: ""; margin-top: 6px; width: 6px; height: 6px; border-radius: 50% 50% 50% 0; transform: rotate(45deg); background: #c35900; flex-shrink: 0; } .pub_price_card.featured { background: #00353c; border-color: #00353c; } .pub_price_card.featured .pub_price_name { color: #fbfdfb; } .pub_price_card.featured .pub_price_amount strong { color: #fbfdfb; } .pub_price_card.featured .pub_price_amount span, .pub_price_card.featured .pub_price_tag { color: #a9c2bf; } .pub_price_card.featured li { color: #d6e6e2; } .pub_price_card.featured li::before { background: #ffa85f; } .pub_price_card.featured .pub_btn { background: #ffc594; color: #00353c; border-color: #ffc594; } .pub_price_card.featured .pub_btn:hover { background: #ffd6ad; } .pub_price_lifetime { margin-top: 22px; display: grid; grid-template-columns: minmax(260px, 0.85fr) minmax(360px, 1.4fr); gap: 28px; align-items: start; } .pub_price_lifetime .pub_price_tag { min-height: 0; margin-bottom: 18px; } .pub_price_lifetime .pub_btn { justify-self: start; margin-bottom: 0; white-space: nowrap; } .pub_price_lifetime ul { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 10px 18px; } .pub_price_card .pub_download_free { margin-top: auto; margin-bottom: 0; } .pub_download_free_note { display: block; margin: auto 0 0; font: italic 14px/1.4 "Inter", sans-serif; color: #84908f; text-align: center; } .pub_price_flag { position: absolute; top: 18px; right: 18px; font: 500 11px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #ffa85f; background: rgba(0, 0, 0, 0.2); padding: 6px 10px; border-radius: 20px; } .apps_public_intro { max-width: 1500px; margin: 0 auto; padding: clamp(30px, 5vw, 48px) 28px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .apps_public_intro article { background: #ffffff; border: 1px solid #dbe5ea; border-radius: 14px; padding: 22px 24px; } .apps_public_intro h2 { font: 600 20px/1.25 "Inter", sans-serif; color: #00353c; margin: 0 0 10px; } .apps_public_intro p { font: 400 15px/1.55 "Inter", sans-serif; color: #52605f; margin: 0; } .apps_catalog { max-width: 1500px; margin: 0 auto; padding: clamp(34px, 5vw, 54px) 28px clamp(58px, 7vw, 86px); display: grid; gap: 34px; } .apps_catalog_group { display: grid; gap: 16px; } .apps_catalog_group_head h2 { font: 500 clamp(24px, 3vw, 34px)/1.15 "Inter", sans-serif; color: #0a2a2f; margin: 0; } .apps_catalog_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; } .apps_card { min-height: 230px; background: #ffffff; border: 1px solid #dbe5ea; border-radius: 14px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 12px; } .apps_card h3 { font: 600 21px/1.2 "Inter", sans-serif; color: #00353c; margin: 0; } .apps_card p { flex: 1; font: 400 14.5px/1.55 "Inter", sans-serif; color: #52605f; margin: 0; } .apps_card_top { display: flex; justify-content: space-between; gap: 10px; align-items: center; } .apps_card_media { overflow: hidden; border: 1px solid #e8eef2; border-radius: 10px; background: #f4faff; } .apps_card_media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .apps_card_media.desktop { aspect-ratio: 16/9; } .apps_card_media.mobile { height: 190px; } .apps_card_media.mobile img { width: min(112px, 64%); margin: 10px auto 0; border-radius: 18px 18px 0 0; border: 1px solid rgba(0, 40, 46, 0.16); } .apps_platform, .apps_version { display: inline-flex; align-items: center; min-height: 24px; border-radius: 100px; padding: 4px 9px; font: 600 11px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; letter-spacing: 0.04em; text-transform: uppercase; } .apps_platform { background: #ffc594; color: #00353c; } .apps_version { background: #f4faff; color: #84908f; } .apps_card_action { margin-top: 4px; display: grid; gap: 8px; } .apps_card_action .pub_btn { justify-content: center; width: 100%; margin: 0; white-space: nowrap; } .apps_card_action em { display: inline-flex; align-items: center; min-height: 34px; font: italic 14px/1.2 "Inter", sans-serif; color: #84908f; } .apps_source_link { justify-self: center; font: 600 13px/1.3 "Inter", sans-serif; color: #00353c; text-decoration: underline; text-underline-offset: 3px; } .manage_apps_page { display: grid; gap: 16px; } .manage_apps_page .manage_apps_intro p { margin-top: 6px; color: var(--text_color_lighter1); line-height: 1.45; } .manage_apps_page .manage_apps_catalog { max-width: none; padding: 0; } .manage_apps_page .apps_catalog_group_head h2 { font-size: 20px; } .manage_apps_page .apps_card { border-color: var(--border_color_lighter); } .sa_apps_list { display: grid; gap: 16px; margin-top: 18px; } .sa_app_form { padding: 16px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--bg_color_darker); } .manage_transfers_page { max-width: 1080px; } .manage_transfers_page .settings_group { padding: 18px; border: 1px solid var(--border_color); border-radius: 14px; background: var(--white_color); } .manage_transfers_page .settings_group_head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 16px; } .manage_transfers_page .settings_group_head h2 { margin: 0 0 6px; color: var(--text_color); font-size: 20px; font-weight: 700; } .manage_transfers_page .settings_group_head p { max-width: 760px; margin: 0; color: var(--text_color_lighter1); font-size: 14px; line-height: 1.5; } .manage_transfers_page .settings_group_icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--main_color_lighter5); } .manage_transfers_page .settings_group_icon svg { width: 22px; height: 22px; fill: var(--main_color); } .racinage_transfer_panel { max-width: none; margin: 0; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); overflow: hidden; } .racinage_transfer_panel summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 14px 18px; cursor: pointer; list-style: none; color: var(--text_color); font-weight: 700; } .racinage_transfer_panel summary::-webkit-details-marker { display: none; } .racinage_transfer_panel summary::after { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--border_color_lighter); border-radius: 8px; color: var(--main_color); background: var(--bg_color_darker1); font-size: 18px; line-height: 1; } .racinage_transfer_panel[open] summary { border-bottom: 1px solid var(--border_color_lighter); } .racinage_transfer_panel[open] summary::after { content: "-"; } .racinage_transfer_summary_text { min-width: 0; font-size: 16px; } .racinage_transfer_summary_badge { margin-left: auto; padding: 4px 8px; border-radius: 999px; background: var(--main_color_lighter5); color: var(--main_color); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .racinage_transfer_forms { display: grid; gap: 14px; padding: 16px 18px 18px; } .racinage_transfer_hint { margin: 0; max-width: 760px; color: var(--text_color_lighter1); font-size: 14px; line-height: 1.45; } .racinage_transfer_actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .racinage_transfer_form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 14px; border: 1px solid var(--border_color_lighter); border-radius: 10px; background: var(--bg_color_darker1); } .racinage_transfer_form label { flex: 1 1 190px; min-width: 0; } .racinage_transfer_form select, .racinage_transfer_form input[type=file] { width: 100%; min-height: 42px; } .racinage_transfer_form .page_add_btn { flex: 0 0 auto; min-height: 42px; margin: 0; } .racinage_transfer_import_btn { gap: 6px; } .racinage_create_tabs { display: inline-flex; gap: 4px; align-items: center; padding: 4px; margin: 0 0 14px; border: 1px solid var(--border_color_lighter); border-radius: 8px; background: var(--bg_color_darker1); } .racinage_create_tabs button { min-height: 34px; padding: 6px 14px; border: 0; border-radius: 6px; background: transparent; color: var(--text_color_lighter1); font-weight: 700; cursor: pointer; } .racinage_create_tabs button.active { background: var(--main_color_lightest); color: var(--main_color_darker); } .tree_manage_menu button, .gallery_card_menu button, .event_card_menu button, .person_action_menu button, .project_card_menu button, .finance_wallet_menu button, .document_action_menu button, .history_action_menu button { display: flex; align-items: center; gap: 8px; } .tree_manage_menu button .menu_item_icon, .gallery_card_menu button .menu_item_icon, .event_card_menu button .menu_item_icon, .person_action_menu button .menu_item_icon, .project_card_menu button .menu_item_icon, .finance_wallet_menu button .menu_item_icon, .document_action_menu button .menu_item_icon, .history_action_menu button .menu_item_icon { width: 16px; height: 16px; flex: 0 0 16px; fill: currentColor; opacity: 0.78; } .racinage_action_menu { width: 220px !important; min-width: 220px !important; padding: 6px !important; border: 1px solid var(--border_color); border-radius: 10px !important; background: var(--white_color); box-sizing: border-box; overflow: visible !important; } .racinage_action_menu .action_menu_item { display: grid !important; grid-template-columns: 16px minmax(0, 1fr) 24px; gap: 8px; align-items: center; padding: 3px 8px !important; border-radius: 7px; } .racinage_action_menu .action_menu_item > span:not(.action_menu_info) { font-size: 13px; font-weight: 400; } .racinage_action_menu .action_menu_item > .menu_item_icon { width: 16px; height: 16px; fill: currentColor; opacity: 0.78; } .action_menu_info { position: relative; display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; border: 1px solid var(--border_color); border-radius: 50%; color: var(--text_color_lighter1); font-size: 12px; font-weight: 700; line-height: 1; cursor: help; } .action_menu_info::after { position: absolute; z-index: 10050; top: calc(100% + 7px); right: 0; width: max-content; max-width: 220px; padding: 7px 9px; border-radius: 6px; background: #20282c; color: #fff; content: attr(data-tooltip); font-size: 12px; font-weight: 500; line-height: 1.35; pointer-events: none; text-align: left; visibility: hidden; white-space: normal; } .action_menu_info.show_tooltip::after { visibility: visible; } .transfer_modal_backdrop, .summary_share_backdrop { display: flex; align-items: center; justify-content: center; padding: 18px; } .transfer_action_modal { width: min(460px, 100vw - 24px); } .transfer_action_modal label { display: grid; gap: 6px; margin-top: 12px; color: var(--text_color); font-weight: 700; } .transfer_action_modal .form_input { width: 100%; min-height: 42px; } .transfer_modal_intro, .transfer_modal_record { margin: 0 0 10px; color: var(--text_color_lighter1); line-height: 1.45; } .transfer_modal_record { padding: 10px 12px; border: 1px solid var(--border_color_lighter); border-radius: 8px; background: var(--bg_color_darker1); color: var(--text_color); } .summary_share_modal { width: min(560px, 100vw - 24px); } .summary_share_card { display: grid; gap: 14px; margin: 6px 0 16px; padding: 22px; border: 1px solid var(--border_color_lighter); border-radius: 10px; background: var(--white_color); color: var(--text_color); } .summary_share_card > span { color: var(--main_color); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .summary_share_card h2 { margin: 0; color: var(--text_color); font-size: 26px; line-height: 1.15; } .summary_share_card p { margin: 0; color: var(--text_color_lighter1); line-height: 1.5; } .summary_share_card dl { display: grid; gap: 8px; margin: 0; } .summary_share_card dl div { display: flex; justify-content: space-between; gap: 16px; padding-top: 8px; border-top: 1px solid var(--border_color_lighter); } .summary_share_card dl dt, .summary_share_card dl dd { margin: 0; } .summary_share_card dl dt { color: var(--text_color_lighter1); font-weight: 700; } .summary_share_card dl dd { color: var(--text_color); font-weight: 700; text-align: right; } .summary_share_progress { display: grid; gap: 7px; } .summary_share_progress div { display: flex; justify-content: space-between; gap: 12px; color: var(--text_color); font-weight: 700; } .summary_share_progress em { color: var(--main_color); font-style: normal; } .summary_share_progress > span { height: 8px; overflow: hidden; border-radius: 999px; background: var(--bg_color); } .summary_share_progress > span i { display: block; height: 100%; border-radius: inherit; background: var(--main_color); } .summary_share_status { min-height: 20px; margin: 0 0 12px; color: var(--main_color); font-weight: 700; } .summary_share_status.error { color: var(--light_red); } .summary_share_actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .summary_share_actions button { display: inline-flex; align-items: center; gap: 7px; } .summary_share_actions svg { width: 16px; height: 16px; fill: currentColor; } .public_summary_page { max-width: 500px; margin: 40px auto; } .manage_family_update_backdrop, .manage_family_public_backdrop { display: flex; align-items: center; justify-content: center; padding: 18px; } .manage_family_update_backdrop { align-items: flex-start; overflow-y: auto; } .manage_family_update_backdrop .manage_family_update_modal { margin: auto 0; } .manage_family_update_modal > .tree_modal_header .tree_modal_close, .manage_family_public_modal .manage_family_public_header .tree_modal_close { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border_color); border-radius: 50%; background: var(--white_color); cursor: pointer; } .manage_family_update_modal > .tree_modal_header .tree_modal_close svg, .manage_family_public_modal .manage_family_public_header .tree_modal_close svg { width: 18px; height: 18px; fill: var(--text_color_lighter1); } .manage_family_update_modal > .tree_modal_header .tree_modal_close:hover, .manage_family_public_modal .manage_family_public_header .tree_modal_close:hover { border-color: var(--main_color_lighter2); background: var(--main_color_lighter5); } .manage_family_update_modal > .tree_modal_header .tree_modal_close:hover svg, .manage_family_public_modal .manage_family_public_header .tree_modal_close:hover svg { fill: var(--main_color); } .manage_family_update_modal { width: min(620px, 100vw - 24px); } .manage_family_update_modal .manage_family_menu_form { display: grid; gap: 12px; margin-top: 12px; } .manage_family_update_modal .manage_family_menu_row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .manage_family_update_modal .form_textarea { min-height: 90px; resize: vertical; } .manage_family_update_modal .manage_family_form_submit { justify-self: end; } .manage_family_public_modal { width: min(620px, 100vw - 24px) !important; padding: 0 !important; overflow: hidden; } .manage_family_public_modal [hidden] { display: none !important; } .manage_family_public_modal .manage_family_public_header { position: relative; align-items: flex-start; margin: 0; padding: 22px 68px 18px 22px; border-bottom: 1px solid var(--border_color_lighter); } .manage_family_public_modal .manage_family_public_header > div { min-width: 0; } .manage_family_public_modal .manage_family_public_header h3 { margin: 0; } .manage_family_public_modal .manage_family_public_header .public_share_intro { max-width: 500px; margin: 5px 0 0; } .manage_family_public_modal .manage_family_public_header .tree_modal_close { position: absolute; top: 16px; right: 16px; } .manage_family_public_modal .manage_family_public_field { display: grid; gap: 9px; margin: 0; padding: 0 22px; } .manage_family_public_modal .manage_family_public_field:first-of-type { padding-top: 20px; } .manage_family_public_modal .manage_family_public_field > span { display: grid; gap: 3px; } .manage_family_public_modal .manage_family_public_field > span small { color: var(--text_color_lighter1); font-size: 12px; font-weight: 500; } .manage_family_public_modal .manage_family_public_field > input { width: 100%; } .manage_family_public_modal .public_share_link { margin-top: 0; } .manage_family_public_modal .manage_family_public_feedback { padding: 0 22px; } .manage_family_public_modal .public_share_actions { position: static; flex-wrap: wrap; margin: 4px 0 0 !important; padding: 16px 22px; } .manage_family_public_modal .public_share_actions .danger { margin-right: auto; } .manage_family_public_feedback { min-height: 20px; margin: 0; color: var(--main_color); font-size: 13px; font-weight: 700; } .manage_family_public_feedback:empty { display: none; } .manage_family_public_feedback.error { color: var(--light_red); } .record_transfer_notice { padding: 10px 12px; border: 1px solid var(--border_color_lighter); border-radius: 8px; background: var(--bg_color_darker1); color: var(--text_color_lighter1); font-size: 13px; line-height: 1.4; } .record_transfer_notice.success { border-color: rgba(16, 126, 78, 0.3); background: rgba(16, 126, 78, 0.08); color: #107e4e; } .record_transfer_notice.fail { border-color: rgba(180, 45, 45, 0.3); background: rgba(180, 45, 45, 0.08); color: #b42d2d; } .plugin_library_page .pub_page_hero, .plugin_submit_page .pub_page_hero { min-height: 360px; } .plugin_hero_actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; } .plugin_library_wrap { max-width: 1500px; margin: 0 auto; padding: clamp(15px, 3vw, 20px) 20px clamp(30px, 4vw, 50px); } .plugin_submit_panel { max-width: 1500px; margin: 0 auto; padding: clamp(24px, 4vw, 40px) 28px clamp(44px, 6vw, 70px); } .plugin_submit_panel { display: grid; gap: 18px; overflow: visible; } .plugins_toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; padding: 14px; border: 1px solid #dbe5ea; border-radius: 12px; background: #ffffff; } .plugins_toolbar .form_input { height: 42px; margin: 0; } .plugins_toolbar input[type=search] { flex: 1 1 420px; min-width: 220px; } .plugins_toolbar select { flex: 0 0 220px; min-width: 170px; } .plugins_toolbar .plugins_view_toggle { flex: 0 0 auto; } .developers_toolbar input[type=search] { flex-basis: 520px; } .developers_toolbar select { flex-basis: 260px; } .plugins_catalog_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 350px)); justify-content: start; gap: 18px; } .social_privacy_settings .social_privacy_search { display: grid; gap: 7px; max-width: 620px; padding: 0 20px 16px; } .social_privacy_settings .social_user_search_results { max-width: 620px; margin: -6px 20px 18px; } .social_user_search_results { display: grid; gap: 4px; } .social_user_search_results:empty { display: none; } .social_user_search_result { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border_color); border-radius: 9px; background: var(--white_color); color: var(--text_color); cursor: pointer; text-align: left; } .social_user_search_result:hover, .social_user_search_result:focus-visible { border-color: var(--main_color); background: var(--main_color_lighter5); } .social_user_search_result > span:last-child { min-width: 0; display: grid; gap: 2px; } .social_user_search_result strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .social_user_search_result small { color: var(--text_color_lighter1); font-size: 12px; } .social_user_initial { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; background: var(--main_color_lighter5); color: var(--main_color_darker); font-size: 13px; font-weight: 700; } .social_block_list { display: grid; gap: 12px; padding: 0 20px 20px; } .social_block_card { display: grid; grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr); border: 1px solid var(--border_color); border-radius: 10px; overflow: hidden; background: var(--bg_color_darker); } .social_block_card.is-saving { opacity: 0.68; pointer-events: none; } .social_block_identity { min-width: 0; display: flex; align-items: flex-start; gap: 10px; padding: 16px; border-right: 1px solid var(--border_color); } .social_block_identity > div { min-width: 0; display: grid; gap: 3px; } .social_block_identity strong { overflow-wrap: anywhere; color: var(--text_color); font-size: 14px; } .social_block_identity small { color: var(--text_color_lighter1); font-size: 12px; } .social_block_options { display: grid; background: var(--white_color); } .social_block_options .settings_toggle_option { min-height: 48px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border_color_lighter); } .social_block_options .settings_toggle_option:last-child { border-bottom: 0; } .social_block_options .settings_toggle_option > span:last-child { display: grid; gap: 2px; } .social_block_options .settings_toggle_option strong { color: var(--text_color); font-size: 13px; font-weight: 600; } .social_block_options .settings_toggle_option small { color: var(--text_color_lighter1); font-size: 11px; line-height: 1.35; } .social_block_options .social_block_all { background: var(--main_color_lighter5); } .social_block_empty { padding: 22px; border: 1px dashed var(--border_color); border-radius: 10px; color: var(--text_color_lighter1); text-align: center; } .social_block_empty strong { color: var(--text_color); font-size: 14px; } .social_block_empty p { margin: 5px 0 0; font-size: 13px; } .plugin_card { width: 100%; max-width: 350px; min-height: 0; display: flex; flex-direction: column; justify-self: start; overflow: hidden; background: #ffffff; border: 1px solid #dbe5ea; border-radius: 14px; padding: 0; } .plugin_card h3 { margin: 0; font: 600 21px/1.2 "Inter", sans-serif; color: #00353c; } .plugin_card h3 a { color: inherit; } .plugin_card p { margin: 0; font: 400 14.5px/1.55 "Inter", sans-serif; color: #52605f; } .plugin_card_top, .plugin_card_meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; } .plugin_card_top span { font-family: "Inter", sans-serif; } .plugin_card_meta { justify-content: flex-start; color: #84908f; font: 600 12px/1.2 "Inter", sans-serif; } .plugin_card_meta > span + span::before { content: "•"; margin-right: 8px; color: currentColor; } .plugin_badge { display: inline-flex; align-items: center; min-height: 24px; border-radius: 100px; padding: 4px 9px; font: 600 11px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; text-transform: uppercase; background: #f4faff; color: #84908f; } .plugin_badge_published, .plugin_badge_approved, .plugin_badge_paid, .plugin_badge_enabled, .plugin_badge_solved { background: #ffc594; color: #00353c; } .plugin_badge_pending_review, .plugin_badge_pending_payment, .plugin_badge_changes_requested, .plugin_badge_reopened { background: #fff5d9; color: #7a5200; } .plugin_badge_rejected, .plugin_badge_deleted, .plugin_badge_canceled, .plugin_badge_refunded { background: #ffe5e5; color: #8a2020; } .plugin_inline_form { margin: 0; display: inline-flex; align-items: center; } .plugin_inline_form + .plugin_inline_form { margin-left: 6px; } .pub_btn.danger, .pub_btn_ghost.danger { color: #8a2020; border-color: #f0b9b9; } .plugin_detail_layout { max-width: 1500px; margin: 0 auto; padding: clamp(34px, 5vw, 54px) 28px clamp(58px, 7vw, 86px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 20px; align-items: start; } .plugin_detail_content { min-width: 0; display: grid; gap: 12px; } .plugin_detail_tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px; border: 1px solid #dbe5ea; border-radius: 12px; background: #ffffff; } .plugin_detail_tabs a { min-height: 40px; display: inline-flex; flex: 1 0 auto; align-items: center; justify-content: center; padding: 9px 16px; border: 1px solid transparent; border-radius: 8px; color: #84908f; font: 700 13px/1 "Inter", sans-serif; text-decoration: none; } .plugin_detail_tabs a.active { border-color: var(--main_color_lighter4); background: var(--main_color_lighter5); color: var(--main_color); } .plugin_detail_tabs a:focus-visible { outline: 2px solid var(--main_color); outline-offset: 1px; } .plugin_detail_main, .plugin_detail_side, .plugin_developer_gate, .plugin_submit_form { background: #ffffff; border: 1px solid #dbe5ea; border-radius: 16px; padding: clamp(20px, 3vw, 30px); } .plugin_submit_panel .plugin_detail_main > h2, .plugin_submit_form > h2, .plugin_developer_gate h2 { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid #e8eef2; color: #00353c; font: 600 1.55rem/1.15 "Inter", sans-serif; } .plugin_detail_main { display: grid; gap: 18px; } .plugin_detail_main h2, .plugin_detail_main h3 { color: #00353c; margin-top: 0; } .plugin_detail_main p, .plugin_detail_main li { color: #52605f; line-height: 1.6; } .plugin_detail_section_head h2 { margin-bottom: 6px; } .plugin_detail_section_head p { margin: 0; } .plugin_detail_video { position: relative; overflow: hidden; aspect-ratio: 16/9; border: 1px solid #dbe5ea; border-radius: 12px; background: #f4faff; } .plugin_detail_video iframe { width: 100%; height: 100%; border: 0; } .plugin_screenshot_gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .plugin_screenshot_gallery figure { margin: 0; overflow: hidden; border: 1px solid #dbe5ea; border-radius: 12px; background: #f4faff; } .plugin_screenshot_gallery img { width: 100%; height: auto; background: #ffffff; } .plugin_screenshot_gallery figcaption { padding: 12px 14px; color: #52605f; font: 600 13px/1.4 "Inter", sans-serif; } .plugin_how_steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; } .plugin_how_steps > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid #dbe5ea; border-radius: 12px; background: #f4faff; } .plugin_how_steps h3 { margin: 4px 0 10px; } .plugin_how_steps p { margin: 10px 0 0; } .plugin_how_steps img { width: 100%; height: auto; border: 1px solid #e8eef2; border-radius: 8px; background: #ffffff; } .plugin_how_number { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #00353c; color: #ffa85f; font: 800 13px/1 "Inter", sans-serif; } .plugins_rules_wrap { max-width: 1500px; margin: 0 auto; padding: clamp(24px, 4vw, 40px) 28px clamp(44px, 6vw, 70px); display: grid; gap: 18px; } .plugins_rules_intro p { max-width: 760px; margin-bottom: 0; } .plugins_rules_flow, .plugins_rules_grid, .plugins_rules_split { display: grid; gap: 14px; } .plugins_rules_flow { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .plugins_rules_flow article { min-height: 168px; padding: 18px; border: 1px solid #dbe5ea; border-radius: 14px; background: #ffffff; } .plugins_rules_flow article span { display: inline-flex; min-height: 26px; align-items: center; padding: 4px 9px; border-radius: 999px; background: var(--main_color_lighter5); color: var(--main_color); font: 800 12px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; } .plugins_rules_flow article h3 { margin: 14px 0 8px; color: #00353c; font: 700 18px/1.15 "Inter", sans-serif; } .plugins_rules_flow article p { margin: 0; color: #52605f; font: 400 14.5px/1.55 "Inter", sans-serif; } .plugins_rules_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plugins_rule_card, .plugins_rules_checklist, .plugins_rules_callout { border: 1px solid #dbe5ea; border-radius: 14px; background: #ffffff; } .plugins_rule_card { padding: 20px; } .plugins_rule_card h3 { margin: 0 0 9px; color: #00353c; font: 700 18px/1.2 "Inter", sans-serif; } .plugins_rule_card p { margin: 0; color: #52605f; font: 400 14.5px/1.58 "Inter", sans-serif; } .plugins_rules_split { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plugins_rules_checklist { padding: 22px; } .plugins_rules_checklist h2 { margin: 0 0 14px; color: #00353c; font: 600 1.35rem/1.15 "Inter", sans-serif; } .plugins_rules_checklist ul { margin: 0; padding-left: 20px; color: #52605f; } .plugins_rules_checklist li { margin: 0 0 10px; line-height: 1.55; } .plugins_rules_checklist li:last-child { margin-bottom: 0; } .plugins_rules_warning { border-color: #f0d69a; background: #fffaf0; } .plugins_rules_callout { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding: 20px 22px; background: var(--main_color_lighter5); border-color: var(--main_color_lighter3); } .plugins_rules_callout strong { color: var(--main_color); font: 800 18px/1.2 "Inter", sans-serif; } .plugins_rules_callout p { flex: 1 1 420px; margin: 0; color: #52605f; line-height: 1.55; } .plugin_detail_side { position: relative; display: grid; gap: 14px; } .plugin_detail_side code { display: block; margin-top: 6px; padding: 8px; overflow-wrap: anywhere; background: #f4faff; border: 1px solid #e8eef2; border-radius: 8px; font-size: 11px; } .plugin_feature_columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 22px 0; } .plugin_tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 16px; } .plugin_tabs a { border: 1px solid #dbe5ea; border-radius: 100px; padding: 8px 12px; color: #00353c; font: 600 13px/1 "Inter", sans-serif; } .plugin_tabs a.active { background: #00353c; color: #ffa85f; border-color: #00353c; } .plugin_threads { display: grid; gap: 14px; } .plugin_threads h2 { margin-bottom: 0; } .plugin_thread_list { display: grid; gap: 12px; } .plugin_thread_form, .plugin_thread { border: 1px solid #e8eef2; border-radius: 12px; background: #f4faff; padding: 14px; } .plugin_thread_form { display: grid; gap: 10px; } .plugin_thread_form .manage_add_new_btn { width: 100%; max-width: 200px; } .plugin_thread_head, .plugin_thread_meta, .plugin_thread_actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; } .plugin_thread_meta { justify-content: flex-start; color: #84908f; font: 500 12px/1.3 "Inter", sans-serif; } .plugin_thread_actions { justify-content: flex-end; margin-top: 10px; } .plugins_empty { padding: 18px; border: 1px dashed #dbe5ea; border-radius: 12px; color: #84908f; background: #f4faff; } .plugins_form_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; } .plugins_form_grid label { display: grid; gap: 6px; } .plugins_form_grid label span { font: 600 13px/1.2 "Inter", sans-serif; color: #00353c; } .plugins_form_grid label small { color: #84908f; line-height: 1.4; } .plugins_form_grid .plugin_field_wide { grid-column: 1/-1; } .plugin_developer_gate { display: grid; gap: 18px; align-items: start; } .plugin_developer_gate .pub_kicker { margin-bottom: 6px; } .plugin_developer_gate p { margin: 0; color: #52605f; line-height: 1.55; } .plugin_developer_gate form { display: grid; gap: 14px; } .plugin_developer_price { display: inline-grid; gap: 6px; width: fit-content; margin: 4px 0; padding: 12px 16px; border: 1px solid #e8eef2; border-radius: 12px; background: #f4faff; } .plugin_developer_price span { color: #84908f; font: 700 11px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; letter-spacing: 0.08em; text-transform: uppercase; } .plugin_developer_price strong { color: #00353c; font: 700 1.45rem/1 "Inter", sans-serif; } .plugin_profile_form p { margin: -4px 0 14px; color: #52605f; line-height: 1.5; } .plugin_profile_form .plugin_hero_actions { justify-content: flex-start; margin: 0 0 18px; } .manage_plugins_page { width: 100%; max-width: none; display: grid; gap: 20px; } .manage_plugins_page .manage_plugin_tabs { justify-self: start; } .manage_plugins_page .manage_settings_card { width: 100%; max-width: none; overflow: hidden; border-radius: 10px; } .manage_plugins_page #plugins_catalog_shell { display: grid; gap: 20px; } .manage_plugins_page #plugins_catalog_wrap { padding: 20px 20px 20px; } .manage_plugins_page .plugins_empty { margin: 0; border-radius: 10px; } .manage_plugins_page .plugin_card { position: relative; border-color: var(--border_color_lighter); padding: 0; border-radius: 10px; } .manage_plugins_page .plugins_catalog_grid { gap: 14px; } .manage_plugins_page .plugin_developer_gate, .manage_plugins_page .plugin_submit_form { border-color: var(--border_color); border-radius: 10px; } .plugin_profile_cover_field img { width: 100%; aspect-ratio: 3/1; display: block; object-fit: cover; border: 1px solid #dbe5ea; border-radius: 10px; background: #f4faff; } .plugin_profile_cover_field small { color: #84908f; font: 500 12px/1.4 "Inter", sans-serif; } .manage_plugins_filters_form { margin: 0; } .manage_plugins_toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 14px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); } .manage_plugins_toolbar .form_input { height: 42px; margin: 0; } .manage_plugins_toolbar input[type=search] { flex: 1 1 420px; min-width: 220px; } .manage_plugins_toolbar select { flex: 0 0 220px; min-width: 170px; } .manage_plugins_toolbar .plugins_view_toggle { flex: 0 0 auto; } .manage_plugins_toolbar h2 { margin: 0; color: var(--text_color); font-size: 22px; } .manage_plugins_toolbar p { max-width: 760px; margin: 5px 0 0; color: var(--text_color_lighter1); line-height: 1.45; } .plugin_owner_detail { display: grid; gap: 18px; } .plugin_owner_detail_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px; border: 1px solid var(--border_color_lighter); border-radius: 14px; background: var(--white_color); } .plugin_owner_detail_head h2 { margin: 4px 0 8px; } .plugin_owner_back { display: inline-flex; margin-bottom: 8px; color: var(--main_color); font-weight: 700; } .plugin_owner_badges, .plugin_owner_actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .plugin_owner_actions form { margin: 0; } .plugin_owner_layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 18px; align-items: start; } .plugin_owner_main { display: grid; gap: 16px; } .plugin_owner_main section { padding: 20px; border: 1px solid var(--border_color_lighter); border-radius: 14px; background: var(--white_color); } .plugin_owner_main h3 { margin-top: 0; } .plugin_owner_side { position: sticky; top: 86px; } .plugin_owner_side dl { display: grid; gap: 10px; margin: 0; } .plugin_owner_side dl div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--border_color_lighter); } .plugin_owner_side dt { color: var(--text_color_lighter1); } .plugin_owner_side dd { margin: 0; color: var(--text_color); font-weight: 700; text-align: right; } .plugin_owner_screens > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .plugin_owner_screens > div img { width: 100%; aspect-ratio: 16/10; border-radius: 10px; object-fit: cover; } .plugin_owner_modal { width: min(820px, 100vw - 28px); max-height: calc(100dvh - 28px); overflow: hidden; } .plugin_owner_modal form { padding: 20px; } .plugin_owner_modal .plugins_form_grid { max-height: calc(100dvh - 104px); overflow-y: auto; } .plugin_owner_modal fieldset { min-width: 0; border: 1px solid var(--border_color_lighter); border-radius: 10px; } .plugin_lifecycle_banner { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #e5b45f; border-radius: 12px; background: #fff8e8; color: #62410b; } .plugin_lifecycle_banner p { margin: 4px 0 0; } .plugin_lifecycle_global { width: min(1200px, 100% - 28px); margin: 12px auto 0; } .plugin_card_cover { height: 132px; display: block; overflow: hidden; background: #f4faff; } .plugin_card_cover img { width: 100%; height: 100%; display: block; object-fit: cover; } .plugin_card_cover:focus-visible { outline: 3px solid var(--main_color); outline-offset: -3px; } .plugin_card_body { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 250px; padding: 0 18px 18px; } .plugin_card_body > .apps_card_action { margin-top: auto; } .plugin_card_body > .apps_card_action:not(.plugin_card_installed_action) { display: flex; flex-wrap: nowrap; gap: 8px; } .plugin_card_body > .apps_card_action:not(.plugin_card_installed_action) .pub_btn { width: auto; flex: 1 1 0; } .plugins_catalog_grid:not(.list_view) .plugin_card_excerpt { min-height: 6.2em; max-height: 6.2em; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; } .plugin_card_identity { display: grid; min-width: 0; margin-top: 12px; color: inherit; text-decoration: none; } .plugin_card_identity_main { min-width: 0; display: flex; align-items: flex-end; gap: 10px; color: inherit; text-decoration: none; } .plugin_card_identity_main h3 { margin-bottom: 2px; } .plugin_card_identity_main:hover h3, .plugin_card_identity_main:focus-visible h3 { color: var(--main_color); } .plugin_card_identity_main:focus-visible { outline: 2px solid var(--main_color); outline-offset: 3px; border-radius: 6px; } .plugin_card_submeta { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: #84908f; margin: -22px 0 0 80px; } .plugin_card_submeta .plugin_card_publisher { max-width: 150px; overflow: hidden; color: var(--main_color); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .plugin_card_identity_installs { display: none; } .plugin_card_version { color: #84908f; font-size: 12px; font-weight: 700; } .plugins_catalog_wrap { padding-top: 20px; } .manage_content_inner_plugins .manage_plugins_page { max-width: none; } .manage_section_header .manage_plugin_tabs { margin-left: auto; } .manage_runtime_header { max-width: 100%; min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-left: auto; } .manage_runtime_header > .sa_page_tabs { max-width: 100%; min-width: 0; overflow-x: auto; } .plugins_developer_head { justify-content: space-between; } .plugins_developer_head > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; } .plugin_submit_toolbar { align-items: flex-start; } .plugin_developer_section { padding: 20px; } .plugin_developer_section > h2 { margin: 0 0 6px; color: var(--text_color); font-size: 20px; } .plugin_developer_section > p { margin: 0 0 18px; color: var(--text_color_lighter1); } .plugin_developer_section .plugins_catalog_grid { margin-top: 16px; } .plugin_dev_settings_modal { width: min(920px, 100vw - 24px); max-height: calc(100vh - 24px); padding: 0; overflow: hidden; border: 1px solid var(--border_color); border-radius: 14px; background: var(--white_color); } .plugin_dev_settings_modal::backdrop { background: rgba(12, 24, 28, 0.6); } .plugin_dev_settings_modal > header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--border_color); } .plugin_dev_settings_modal > header h2, .plugin_dev_settings_modal > header p { margin: 0; } .plugin_dev_settings_modal > header h2 { color: var(--text_color); font-size: 20px; } .plugin_dev_settings_modal > header p { max-width: 680px; margin-top: 4px; color: var(--text_color_lighter1); font-size: 13px; line-height: 1.4; } .plugin_dev_settings_modal > header button { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text_color_lighter1); cursor: pointer; font-size: 24px; } .plugin_dev_settings_modal > header button:hover, .plugin_dev_settings_modal > header button:focus-visible { border-color: var(--border_color); background: var(--bg_color_darker); color: var(--text_color); } .plugin_dev_settings_modal .plugin_dev_settings_content { max-height: calc(100vh - 94px); display: grid; gap: 18px; overflow: auto; padding: 18px; } .plugin_dev_settings_modal .plugin_developer_gate { display: none; } .plugin_dev_settings_modal .plugin_submit_form, .plugin_dev_settings_modal .manage_settings_card { margin: 0; } .plugin_manage_submit_workflow { padding: 20px; } .plugin_manage_submit_workflow .plugin_bundle_wizard { max-width: 1080px; margin: 0 auto; } .plugins_rules_hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.7fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 5vw, 64px); border: 1px solid #dbe5ea; border-radius: 18px; background: linear-gradient(135deg, #f3fbfb 0%, #fffaf4 100%); } .plugins_rules_hero h1 { max-width: 780px; margin: 8px 0 14px; color: #00353c; font: 750 clamp(34px, 5vw, 66px)/1.02 "Inter", sans-serif; letter-spacing: -0.04em; } .plugins_rules_hero > div > p:not(.page_kicker) { max-width: 760px; margin: 0; color: #52605f; font-size: clamp(16px, 2vw, 19px); line-height: 1.6; } .plugins_rules_signals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .plugins_rules_signals span { min-height: 34px; display: inline-flex; align-items: center; padding: 6px 11px; border: 1px solid #dbe5ea; border-radius: 999px; background: #ffffff; color: #00353c; font-size: 12px; font-weight: 750; } .plugins_rules_quick { padding: 22px; border-left: 4px solid #c35900; border-radius: 0 12px 12px 0; background: #ffffff; } .plugins_rules_quick strong { color: #00353c; font-size: 16px; } .plugins_rules_quick ol { margin: 14px 0 0; padding-left: 22px; } .plugins_rules_quick li { margin: 0 0 12px; color: #52605f; line-height: 1.45; } .plugins_rules_quick li:last-child { margin-bottom: 0; } .plugins_rules_section { display: grid; gap: 18px; padding: clamp(22px, 3vw, 36px) 0; border-bottom: 1px solid #e8eef2; } .plugins_rules_section_head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; } .plugins_rules_section_head > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #00353c; color: #fff; font-size: 12px; font-weight: 800; } .plugins_rules_section_head h2 { margin: 0; color: #00353c; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; } .plugins_rules_section_head p { max-width: 760px; margin: 7px 0 0; color: #84908f; line-height: 1.5; } .plugins_rules_flow { counter-reset: rule-step; } .plugins_rules_flow article { position: relative; min-height: 176px; } .plugins_rules_flow article:not(:last-child)::after { position: absolute; top: 32px; right: -11px; z-index: 2; width: 20px; height: 2px; background: #dbe5ea; content: ""; } .plugins_manifest_visual { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); overflow: hidden; border: 1px solid #dbe5ea; border-radius: 14px; background: #ffffff; } .plugins_manifest_visual pre { min-width: 0; margin: 0; padding: 24px; overflow: auto; background: #123b40; } .plugins_manifest_visual code { color: #e6f5f4; font: 500 13px/1.65 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; } .plugins_manifest_visual dl { margin: 0; padding: 10px 22px; } .plugins_manifest_visual dl div { padding: 15px 0; border-bottom: 1px solid #e8eef2; } .plugins_manifest_visual dl div:last-child { border-bottom: 0; } .plugins_manifest_visual dt { color: #00353c; font-weight: 800; } .plugins_manifest_visual dd { margin: 5px 0 0; color: #52605f; line-height: 1.5; } .plugins_permission_example { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .plugins_permission_example article { display: grid; gap: 9px; padding: 20px; border: 1px solid #dbe5ea; border-radius: 14px; background: #ffffff; } .plugins_permission_example span { width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; } .plugins_permission_example strong { color: #00353c; line-height: 1.45; } .plugins_permission_example small { color: #84908f; } .plugins_permission_example .is_good { border-color: #90cbb4; } .plugins_permission_example .is_good span { background: #e8f7f0; color: #11633f; } .plugins_permission_example .is_bad { border-color: #e8b1b1; } .plugins_permission_example .is_bad span { background: #fff0f0; color: #8a2020; } .plugins_rules_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plugins_rule_card ul { margin: 0; padding-left: 20px; } .plugins_rule_card li { margin-bottom: 10px; color: #52605f; line-height: 1.55; } .plugins_rule_card li:last-child { margin-bottom: 0; } .plugin_card_logo { width: 70px; height: 70px; flex: 0 0 70px; display: grid; place-items: center; margin-top: -35px; border: 3px solid #ffffff; border-radius: 16px; object-fit: cover; background: #ffffff; color: #00353c; font-size: 22px; font-weight: 800; } .plugin_bundle_wizard { display: grid; gap: 16px; } .plugin_bundle_wizard_head { display: flex; align-items: end; justify-content: space-between; gap: 18px; } .plugin_bundle_wizard_head h2 { margin: 0; color: #00353c; } .plugin_bundle_wizard_head ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; } .plugin_bundle_wizard_head li { min-height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #dbe5ea; border-radius: 9px; color: #84908f; background: #ffffff; font-size: 12px; font-weight: 700; } .plugin_bundle_wizard_head li span { width: 23px; height: 23px; display: inline-grid; place-items: center; border-radius: 50%; background: #f4faff; } .plugin_bundle_wizard_head li.active { border-color: #00353c; color: #00353c; } .plugin_bundle_wizard_head li.active span, .plugin_bundle_wizard_head li.done span { color: #fff; background: #00353c; } .plugin_bundle_drop { min-height: 210px; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 28px; border: 2px dashed #dbe5ea; border-radius: 12px; background: #f4faff; text-align: center; } .plugin_bundle_drop strong { color: #00353c; font-size: 18px; } .plugin_bundle_drop span { max-width: 720px; color: #52605f; line-height: 1.55; } .plugin_bundle_drop input { max-width: 520px; } .plugin_bundle_safety { padding: 14px 16px; border-left: 4px solid #00353c; background: #f4faff; } .plugin_bundle_safety strong { color: #00353c; } .plugin_bundle_safety p { margin: 4px 0 0; color: #52605f; } .plugin_bundle_preview { display: grid; grid-template-columns: 74px minmax(180px, 300px) minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border: 1px solid #dbe5ea; border-radius: 12px; background: #f4faff; } .plugin_bundle_preview img { display: block; border: 1px solid #e8eef2; border-radius: 9px; object-fit: cover; } .plugin_bundle_preview .plugin_bundle_logo { width: 74px; height: 74px; } .plugin_bundle_preview .plugin_bundle_cover { width: 100%; aspect-ratio: 16/9; } .plugin_bundle_preview div { display: grid; gap: 5px; } .plugin_bundle_preview strong { color: #00353c; font-size: 20px; } .plugin_bundle_preview span, .plugin_bundle_preview small { color: #52605f; } .plugin_bundle_gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .plugin_bundle_gallery img { width: 100%; aspect-ratio: 16/10; border: 1px solid #dbe5ea; border-radius: 9px; object-fit: cover; } .plugin_bundle_summary { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid #dbe5ea; border-radius: 10px; background: #f4faff; } .plugin_bundle_summary img { width: 58px; height: 58px; border-radius: 8px; } .plugin_bundle_summary div { display: grid; gap: 4px; } .plugin_bundle_summary strong { color: #00353c; } .plugin_bundle_summary span { color: #84908f; font-size: 13px; } .plugin_confirm { grid-template-columns: 20px minmax(0, 1fr) !important; align-items: start; } .plugins_installed_list { display: grid; gap: 10px; padding: 0 20px 20px; } .plugin_installed_item { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--border_color_lighter); border-radius: 10px; background: var(--bg_color_darker); } .plugin_installed_item small { display: block; margin-top: 3px; color: var(--text_color_lighter1); } .manage_installed_grid { padding: 20px; } .plugin_card_installed_action { position: static; justify-content: flex-end; margin: 0; } .plugin_card_actions_menu { position: absolute; z-index: 3; top: 10px; right: 10px; } .plugin_card_actions_menu > summary { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border_color); border-radius: 9px; background: var(--white_color); color: var(--text_color); cursor: pointer; font-size: 18px; font-weight: 800; letter-spacing: 2px; list-style: none; } .plugin_card_actions_menu > summary::-webkit-details-marker { display: none; } .plugin_card_actions_menu > summary:hover, .plugin_card_actions_menu > summary:focus-visible { border-color: var(--main_color); color: var(--main_color); } .plugin_card_actions_menu > .plugin_installed_actions { position: absolute; right: 0; top: 48px; z-index: 12; width: min(200px, 100vw - 48px); display: grid; justify-content: stretch; gap: 2px; padding: 6px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--white_color); } .plugin_card_actions_menu > .plugin_installed_actions .pub_btn, .plugin_card_actions_menu > .plugin_installed_actions .plugin_inline_form, .plugin_card_actions_menu > .plugin_installed_actions .plugin_delete_data_form { width: 100%; margin: 0; } .plugin_card_actions_menu > .plugin_installed_actions .pub_btn { min-height: 38px; justify-content: flex-start; gap: 8px; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text_color); font-size: 13px; font-weight: 600; white-space: nowrap; } .plugin_card_actions_menu > .plugin_installed_actions .pub_btn:hover, .plugin_card_actions_menu > .plugin_installed_actions .pub_btn:focus-visible { background: var(--bg_color_darker); color: var(--main_color_darker); } .plugin_card_actions_menu > .plugin_installed_actions .pub_btn.danger { color: var(--red_color); } .plugin_card_actions_menu > .plugin_installed_actions > .plugin_badge { justify-self: start; margin: 4px 6px; } .plugin_card_actions_menu > .plugin_installed_actions .plugin_uninstall_menu > div { right: 0; left: auto; } .plugin_detail_actions_menu { position: relative; top: auto; right: auto; z-index: 15; justify-self: end; } .plugin_detail_actions_menu > .plugin_installed_actions { width: min(220px, 100vw - 48px); } .plugin_manage_detail_modal { width: min(1480px, 100vw - 24px); } .plugin_manage_detail_modal .plugin_manage_detail_content { max-height: calc(100vh - 94px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } .plugin_manage_detail_modal .plugin_detail_page { background: var(--bg_color_darker1); } .plugin_manage_detail_modal .pub_page_hero_inner { padding: 20px 28px; } .plugin_manage_detail_modal .plugin_detail_layout { padding: 20px 28px 32px; } .plugin_detail_page:not(.is_embedded) { overflow: visible; } .sa_plugin_detail_technical { margin-top: 16px; } .sa_plugin_detail_technical summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; font-weight: 700; } .sa_plugin_detail_technical .sa_plugin_detail { margin-top: 12px; } .plugin_detail_page .pub_page_hero { background: #f4faff; } .plugin_detail_page .pub_page_hero .pub_page_hero_inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 24px; padding-top: clamp(24px, 4vw, 42px); padding-bottom: clamp(20px, 3vw, 32px); } .plugin_detail_page .pub_page_hero .pub_kicker { grid-column: 1/-1; margin: 0; } .plugin_detail_page .pub_page_hero h1 { margin: 0; font: 650 clamp(30px, 4vw, 46px)/1.05 "Inter", sans-serif; letter-spacing: -0.025em; } .plugin_detail_page .pub_page_hero > .pub_page_hero_inner > p:not(.pub_kicker) { grid-column: 1; max-width: 720px; font-size: 15px; line-height: 1.5; } .plugin_detail_page .pub_page_hero .plugin_hero_actions { grid-column: 2; grid-row: 2/span 2; align-self: center; justify-content: flex-end; margin: 0; } .plugin_installed_actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; } .plugin_recommend_dialog { width: min(560px, 100vw - 24px); } .plugin_recommend_dialog header > div { display: grid; gap: 3px; } .plugin_recommend_dialog header p { margin: 0; color: var(--text_color_lighter1); font-size: 13px; font-weight: 400; } .plugin_recommend_form { display: grid; gap: 12px; padding: 18px 20px 20px; } .plugin_recommend_form > label { display: grid; gap: 7px; } .plugin_recommend_form .social_user_search_results { max-height: 190px; overflow-y: auto; } .plugin_recommend_selected { display: flex; flex-wrap: wrap; gap: 6px; } .plugin_recommend_selected:empty { display: none; } .plugin_recommend_chip { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 5px 4px 10px; border: 1px solid var(--main_color_lighter3); border-radius: 999px; background: var(--main_color_lighter5); color: var(--main_color_darker); font-size: 12px; font-weight: 600; } .plugin_recommend_chip button { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: 17px; } .plugin_recommend_chip button:hover, .plugin_recommend_chip button:focus-visible { background: var(--main_color_lighter4); } .plugin_recommend_count { margin: -5px 0 0; color: var(--text_color_lighter1); font-size: 11px; text-align: right; } .plugin_action_icon { width: 16px; height: 16px; flex: 0 0 16px; fill: currentColor; } .plugins_developer_stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .plugins_developer_stats article { min-width: 0; padding: 14px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); } .plugins_developer_stats strong, .plugins_developer_stats span { display: block; } .plugins_developer_stats strong { overflow-wrap: anywhere; color: var(--text_color); font-size: 1.15rem; line-height: 1.2; } .plugins_developer_stats span { margin-top: 5px; color: var(--text_color_lighter1); font-size: 0.78rem; line-height: 1.35; } .plugin_publisher_sales { padding-left: 0; padding-right: 0; } .sa_plugin_review { margin-top: 12px; padding: 14px; border: 1px solid var(--border_color_lighter); border-radius: 10px; background: var(--bg_color_darker); } .sa_app_form_head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sa_app_form_head strong { display: block; color: var(--text_color); font-size: 0.98rem; } .sa_app_form_head small { display: block; margin-top: 3px; color: var(--text_color_lighter1); font-size: 0.78rem; } .pub_external_icon { width: 14px; height: 14px; margin-left: 5px; fill: currentColor; flex: 0 0 auto; } .pub_nav_link .pub_external_icon { margin-left: 0; } .pub_mobile .pub_external_icon { width: 15px; height: 15px; margin-left: 2px; flex: 0 0 15px; } .plugins_site { background: #f5fafd; } .plugins_site, .plugins_site button, .plugins_site input, .plugins_site select, .plugins_site textarea { font-family: "Inter", sans-serif; } .plugins_site h1, .plugins_site h2, .plugins_site h3, .plugins_site p, .plugins_site a, .plugins_site li, .plugins_site span, .plugins_site strong { font-family: "Inter", sans-serif; } .plugin_import_label { cursor: pointer; } .plugin_import_label input { display: none; } .plugin_uninstall_menu { position: relative; } .plugin_uninstall_menu summary { list-style: none; cursor: pointer; } .plugin_uninstall_menu summary::-webkit-details-marker { display: none; } .plugin_uninstall_menu > div { position: absolute; z-index: 5; right: 0; width: 260px; padding: 12px; border: 1px solid #dbe5ea; border-radius: 10px; background: #ffffff; } .plugin_uninstall_menu p { margin: 0 0 10px; font-size: 13px; } .plugin_uninstall_menu .plugin_delete_data_form { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #dbe5ea; } .plugin_uninstall_menu label { display: grid; gap: 5px; font-size: 12px; } .plugin_report_box summary { min-height: 42px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: #8a2020; } .plugin_report_box form { display: grid; gap: 8px; margin-top: 8px; } .plugin_capabilities { margin: 24px 0; padding: 18px; border: 1px solid #dbe5ea; border-radius: 12px; background: #f4faff; } .plugins_site_main { min-height: calc(70vh - var(--plugins-site-header-height)); scroll-margin-top: var(--plugins-site-header-height); } .plugins_site_hero { max-width: 1500px; min-height: 128px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr); align-items: center; gap: clamp(20px, 4vw, 64px); margin: 0 auto; padding: clamp(20px, 3vw, 34px) 20px 14px; text-align: left; } .plugins_site_hero h1 { max-width: 760px; margin: 0 0 8px; font: 600 clamp(29px, 4vw, 46px)/1.05 "Inter", sans-serif; color: #0a2a2f; } .plugins_site_hero p:not(.pub_kicker) { max-width: 700px; margin: 0; font: 400 15px/1.5 "Inter", sans-serif; color: #52605f; } .plugins_site_hero_copy { min-width: 0; } .plugins_site_hero_aside { min-width: 0; display: flex; justify-content: flex-end; color: #52605f; } .plugins_site_hero_aside .plugin_hero_actions { justify-content: flex-end; margin-top: 0; } .plugins_site_hero_aside > p { max-width: 440px; padding-left: 18px; border-left: 2px solid var(--main_color_lighter3); } .plugins_forum_hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; text-align: left; } .plugins_forum_hero > div:first-child { min-width: 0; } .plugins_forum_hero h1, .plugins_forum_hero p:not(.pub_kicker) { margin-right: 0; margin-left: 0; } .plugins_forum_hero .plugin_hero_actions { flex: 0 0 auto; justify-content: flex-end; margin: 0; } .plugin_forum_question { width: min(680px, 100vw - 24px); max-height: calc(100vh - 24px); margin: auto; padding: 18px; border: 1px solid #dbe5ea; border-radius: 12px; background: #ffffff; } .plugin_forum_question::backdrop { background: rgba(12, 24, 28, 0.6); } .plugin_forum_question header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .plugin_forum_question h2 { margin: 0; color: #00353c; font-size: 20px; } .plugin_forum_question header button { width: 40px; height: 40px; border: 1px solid #dbe5ea; border-radius: 8px; background: transparent; color: #84908f; cursor: pointer; font-size: 24px; } .plugin_forum_question .plugin_thread_form { padding: 0; border: 0; background: transparent; } .plugins_account_hero { padding-top: clamp(22px, 4vw, 42px); padding-bottom: 12px; } .plugins_content_nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 0 0 16px; } .plugins_content_nav.top { margin-bottom: 18px; } .plugins_content_nav a, .plugins_content_nav span { min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #dbe5ea; border-radius: 8px; color: #00353c; background: #ffffff; font: 700 13px/1 "Inter", sans-serif; } .plugins_content_nav span { color: #84908f; background: #f4faff; } .plugins_content_nav .active { color: #ffa85f; background: #00353c; border-color: #00353c; } .plugins_view_toggle { display: inline-flex; gap: 4px; padding: 5px; border: 1px solid #dbe5ea; border-radius: 12px; background: #ffffff; } .plugins_view_toggle input { position: absolute; opacity: 0; pointer-events: none; } .plugins_view_toggle label { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #84908f; font: 600 13px/1 "Inter", sans-serif; cursor: pointer; } .plugins_view_toggle input:checked + label { background: var(--main_color_lighter5); border-color: var(--main_color_lighter4); color: var(--main_color); } .plugins_view_toggle input:focus-visible + label { outline: 2px solid var(--main_color); outline-offset: 2px; } .plugins_catalog_grid.list_view { grid-template-columns: 1fr; } .plugins_catalog_grid.list_view .plugin_card { max-width: none; min-height: 0; } .plugins_catalog_grid.list_view .plugin_card .plugin_card_cover, .plugins_catalog_grid.list_view .plugin_card .plugin_card_top, .plugins_catalog_grid.list_view .plugin_card .plugin_card_excerpt, .plugins_catalog_grid.list_view .plugin_card .plugin_card_price, .plugins_catalog_grid.list_view .plugin_card .plugin_card_install_status, .plugins_catalog_grid.list_view .plugin_card .plugin_card_taxonomy .is_tag { display: none; } .plugins_catalog_grid.list_view .plugin_card .plugin_card_body { min-height: 0; display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 14px; } .plugins_catalog_grid.list_view .plugin_card .plugin_card_identity { align-items: center; margin-top: 0; } .plugins_catalog_grid.list_view .plugin_card .plugin_card_logo { width: 46px; height: 46px; flex-basis: 46px; margin: 0; border-width: 1px; } .plugins_catalog_grid.list_view .plugin_card .plugin_card_submeta { gap: 6px; margin: 3px 0 0 56px; } .plugins_catalog_grid.list_view .plugin_card .plugin_card_version, .plugins_catalog_grid.list_view .plugin_card .plugin_card_identity_installs { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 7px; border-radius: 999px; background: #f4faff; color: #84908f; font: 700 11px/1 "Inter", sans-serif; white-space: nowrap; } .plugins_catalog_grid.list_view .plugin_card .plugin_card_meta .plugin_card_installs { display: none; } .plugins_catalog_grid.list_view .plugin_card .plugin_card_taxonomy { flex-wrap: nowrap; overflow: hidden; } .plugins_catalog_grid.list_view .plugin_card .plugin_card_meta { flex-wrap: nowrap; } .plugins_catalog_grid.list_view .plugin_card .apps_card_action { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; margin: 0; } .plugin_rating { display: inline-flex; gap: 6px; align-items: center; color: #84908f; font: 600 12px/1.2 "Inter", sans-serif; } .plugin_rating_marks { color: #c47d1b; letter-spacing: 1px; } .plugin_rating.no_reviews .plugin_rating_marks { color: #a8b0b3; } .plugin_reviews, .plugin_review_list { display: grid; gap: 14px; } .plugin_reviews_head, .plugin_review_head, .plugin_account_head { display: flex; gap: 12px; align-items: center; justify-content: space-between; } .plugin_review_form, .plugin_review, .plugin_developer_card, .plugins_badge_grid article { border: 1px solid #e8eef2; border-radius: 12px; background: #f4faff; padding: 16px; } .plugin_review h3 { margin: 8px 0; color: #00353c; } .plugin_modal_backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(8, 27, 31, 0.45); } .plugin_modal { width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto; position: relative; border: 1px solid #dbe5ea; border-radius: 14px; background: #ffffff; padding: 24px; } .plugin_modal h2 { margin: 0 34px 10px 0; color: #00353c; font: 600 28px/1.1 "Inter", sans-serif; } .plugin_modal form { display: grid; gap: 12px; } .plugin_modal label { display: grid; gap: 6px; color: #00353c; font: 700 13px/1.2 "Inter", sans-serif; } .plugin_modal_close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #dbe5ea; border-radius: 8px; color: #00353c; background: #f4faff; font: 700 24px/1 "Inter", sans-serif; } .plugin_family_checks { display: grid; gap: 8px; margin: 12px 0; } .plugin_family_checks label { grid-template-columns: 18px 1fr; align-items: center; border: 1px solid #e8eef2; border-radius: 10px; background: #f4faff; padding: 10px 12px; } .plugins_developer_grid, .plugins_badge_grid { display: grid; gap: 14px; } .plugins_developer_grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 380px)); justify-content: start; } .plugins_badge_grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .plugin_developer_card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 0; overflow: visible; padding: 0; background: #ffffff; } .plugin_developer_cover { width: 100%; aspect-ratio: 3/1; overflow: hidden; border-radius: 12px 12px 0 0; border-bottom: 1px solid #e8eef2; background: #ffc594; } .plugin_developer_cover img { width: 100%; height: 100%; display: block; object-fit: cover; } .plugin_developer_content { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; padding: 0 16px 16px; } .plugin_developer_identity { min-width: 0; display: flex; align-items: flex-end; gap: 12px; margin: -18px 0 12px; color: inherit; text-decoration: none; } .plugin_developer_identity > span:last-child { min-width: 0; display: grid; gap: 3px; padding-bottom: 2px; } .plugin_developer_identity strong { overflow-wrap: anywhere; color: #00353c; font: 700 18px/1.15 "Inter", sans-serif; } .plugin_developer_identity small { color: #84908f; font: 600 11.5px/1.25 "Inter", sans-serif; } .plugin_developer_identity:hover strong, .plugin_developer_identity:focus-visible strong { color: var(--main_color); } .plugin_developer_identity:focus-visible { outline: 2px solid var(--main_color); outline-offset: 3px; border-radius: 6px; } .plugin_developer_excerpt { min-height: 66px; margin: 0 0 14px; display: -webkit-box; overflow: hidden; color: #52605f; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .plugin_developer_reputation { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #e8eef2; color: #84908f; font: 600 11px/1.35 "Inter", sans-serif; } .plugin_developer_reputation strong { color: #00353c; } .plugin_developer_stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: auto; padding-top: 13px; border-top: 1px solid #e8eef2; } .plugin_developer_stats span { min-width: 0; display: grid; gap: 4px; padding: 0 10px; border-left: 1px solid #e8eef2; text-align: center; } .plugin_developer_stats span:first-child { padding-left: 0; border-left: 0; } .plugin_developer_stats span:last-child { padding-right: 0; } .plugin_developer_stats strong { color: #00353c; font: 700 17px/1 "Inter", sans-serif; } .plugin_developer_stats small { overflow: hidden; color: #52605f; font: 600 11px/1.2 "Inter", sans-serif; text-overflow: ellipsis; } .plugin_developer_avatar { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border: 4px solid #f4faff; background: #ffc594; color: #00353c; font: 800 20px/1 "Inter", sans-serif; } .plugin_developer_avatar img { width: 100%; height: 100%; object-fit: cover; } .plugin_developer_actions { position: absolute; z-index: 4; top: 10px; right: 10px; } .plugin_developer_actions summary { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 9px; background: rgba(255, 255, 255, 0.92); color: #00353c; cursor: pointer; font: 800 15px/1 "Inter", sans-serif; letter-spacing: 1px; list-style: none; } .plugin_developer_actions summary::-webkit-details-marker { display: none; } .plugin_developer_actions summary:focus-visible { outline: 2px solid var(--main_color); outline-offset: 2px; } .plugin_developer_actions_menu { position: absolute; z-index: 5; top: 44px; right: 0; width: 205px; overflow: hidden; padding: 5px; border: 1px solid #dbe5ea; border-radius: 10px; background: #ffffff; } .plugin_developer_actions_menu a, .plugin_developer_actions_menu button { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 9px; padding: 8px 9px; border: 0; border-radius: 7px; background: transparent; color: #52605f; cursor: pointer; font: 650 12.5px/1.2 "Inter", sans-serif; text-align: left; text-decoration: none; } .plugin_developer_actions_menu a:hover, .plugin_developer_actions_menu a:focus-visible, .plugin_developer_actions_menu button:hover, .plugin_developer_actions_menu button:focus-visible { background: #f4faff; color: var(--main_color); } .plugin_developer_actions_menu a.danger, .plugin_developer_actions_menu button.danger { color: #8a2020; } .plugin_developer_actions_menu form { margin: 0; } .plugin_developer_actions_menu .plugin_action_icon { width: 16px; height: 16px; flex: 0 0 16px; fill: currentColor; } .plugins_developer_grid.list_view { grid-template-columns: minmax(0, 1fr); } .plugins_developer_grid.list_view .plugin_developer_card { display: grid; grid-template-columns: minmax(190px, 260px) minmax(0, 1fr); } .plugins_developer_grid.list_view .plugin_developer_cover { height: 100%; min-height: 180px; aspect-ratio: auto; border-right: 1px solid #e8eef2; border-bottom: 0; } .plugins_developer_grid.list_view .plugin_developer_content { display: grid; grid-template-columns: minmax(200px, 0.8fr) minmax(220px, 1.2fr) minmax(250px, auto); align-items: center; gap: 22px; padding: 18px; } .plugins_developer_grid.list_view .plugin_developer_identity { align-items: center; margin: 0; } .plugins_developer_grid.list_view .plugin_developer_excerpt { min-height: 0; margin: 0; -webkit-line-clamp: 4; } .plugins_developer_grid.list_view .plugin_developer_reputation { margin-top: 0; } .plugins_developer_grid.list_view .plugin_developer_stats { margin-top: 0; padding-top: 0; border-top: 0; } .plugins_account_layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1240px; margin: 0 auto; } .plugins_account_tabs { display: grid; gap: 8px; border: 1px solid #dbe5ea; border-radius: 8px; background: #ffffff; padding: 10px; position: sticky; top: 92px; } .plugins_account_tabs a { min-height: 48px; display: flex; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 8px; padding: 0 12px; color: #00353c; font: 700 14px/1.2 "Inter", sans-serif; text-decoration: none; } .plugins_account_tabs a .plugins_account_tab_icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #f4faff; color: #00353c; flex: 0 0 28px; } .plugins_account_tabs a .plugins_account_tab_icon svg { width: 16px; height: 16px; fill: currentColor; } .plugins_account_tabs a:hover { border-color: #dbe5ea; background: #f4faff; } .plugins_account_tabs a.active { color: var(--main_color); background: var(--main_color_lighter5); } .plugins_account_tabs a.active .plugins_account_tab_icon { background: rgba(0, 159, 179, 0.1); color: var(--main_color); } .plugins_account_panel { display: grid; gap: 16px; min-width: 0; } .plugins_badge_grid article { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; } .plugins_badge_grid article strong { color: #00353c; font: 700 18px/1.2 "Inter", sans-serif; } .plugins_badge_grid article span:last-child { grid-column: 1/-1; color: #52605f; line-height: 1.5; } .dev_profile { max-width: 1500px; margin: 0 auto; padding: 20px 20px 50px; } .dev_profile_header, .dev_profile_panel, .dev_profile_about, .dev_profile_facts, .dev_profile_recent, .dev_profile_legal article { border: 1px solid #dbe5ea; background: #ffffff; } .dev_profile_header { overflow: hidden; border-radius: 16px 16px 0 0; } .dev_profile_cover { width: 100%; aspect-ratio: 3/1; max-height: 340px; overflow: hidden; background: #ffc594; } .dev_profile_cover img { width: 100%; height: 100%; display: block; object-fit: cover; } .dev_profile_identity_wrap { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 16px; padding: 0 22px 18px; } .dev_profile_avatar { width: 96px; height: 96px; display: grid; place-items: center; overflow: hidden; margin-top: -46px; border: 5px solid #ffffff; border-radius: 50%; background: #ffc594; color: #00353c; font: 800 28px/1 "Inter", sans-serif; } .dev_profile_avatar img { width: 100%; height: 100%; object-fit: cover; } .dev_profile_identity { min-width: 0; } .dev_profile_identity > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .dev_profile_identity h1 { margin: 0; color: #00353c; font: 750 clamp(24px, 3vw, 34px)/1.1 "Inter", sans-serif; overflow-wrap: anywhere; } .dev_profile_identity p { margin: 5px 0 0; color: #84908f; font: 600 13px/1.3 "Inter", sans-serif; } .dev_profile_approved, .dev_profile_review_source { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; border-radius: 999px; background: var(--main_color_lighter5); color: var(--main_color); font: 750 10.5px/1 "Inter", sans-serif; } .dev_profile_actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .dev_profile_actions form { margin: 0; } .dev_profile_tabs { display: flex; gap: 3px; overflow-x: auto; padding: 5px 17px; border-top: 1px solid #dbe5ea; background: #f4faff; } .dev_profile_tabs a { min-height: 40px; display: inline-flex; flex: 0 0 auto; align-items: center; padding: 8px 12px; border-bottom: 2px solid transparent; color: #84908f; font: 700 12.5px/1.2 "Inter", sans-serif; text-decoration: none; } .dev_profile_tabs a.active { border-color: var(--main_color); color: var(--main_color); } .dev_profile_tabs a:focus-visible { outline: 2px solid var(--main_color); outline-offset: -2px; } .dev_profile_panel { min-height: 280px; padding: clamp(16px, 3vw, 26px); border-top: 0; border-radius: 0 0 16px 16px; } .dev_profile_metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; margin-bottom: 18px; border: 1px solid #dbe5ea; border-radius: 12px; background: #f4faff; } .dev_profile_metrics span { min-width: 0; display: grid; gap: 4px; padding: 13px 10px; border-left: 1px solid #dbe5ea; text-align: center; } .dev_profile_metrics span:first-child { border-left: 0; } .dev_profile_metrics strong { color: #00353c; font: 750 18px/1 "Inter", sans-serif; } .dev_profile_metrics small { overflow: hidden; color: #84908f; font: 650 11px/1.2 "Inter", sans-serif; text-overflow: ellipsis; } .dev_profile_details, .dev_profile_awards, .dev_profile_legal { display: grid; gap: 18px; } .dev_profile_details_grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(270px, 0.6fr); gap: 16px; } .dev_profile_about, .dev_profile_facts, .dev_profile_recent, .dev_profile_legal article { padding: 18px; border-radius: 12px; } .dev_profile_about h2, .dev_profile_facts h2, .dev_profile_recent h2, .dev_profile_legal article h2 { margin: 0 0 10px; color: #00353c; font: 750 19px/1.2 "Inter", sans-serif; } .dev_profile_about p, .dev_profile_facts p, .dev_profile_recent p, .dev_profile_legal article p { margin: 0; color: #52605f; font: 400 14px/1.6 "Inter", sans-serif; } .dev_profile_facts dl, .dev_profile_legal dl { display: grid; gap: 0; margin: 0; } .dev_profile_facts dl div, .dev_profile_legal dl div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid #e8eef2; } .dev_profile_facts dl div:last-child, .dev_profile_legal dl div:last-child { border-bottom: 0; } .dev_profile_facts dl dt, .dev_profile_legal dl dt { color: #84908f; font-size: 12px; } .dev_profile_facts dl dd, .dev_profile_legal dl dd { margin: 0; color: #00353c; font-size: 12px; font-weight: 700; text-align: right; } .dev_profile_specialties { margin-top: 16px; color: #00353c; font-size: 12px; } .dev_profile_specialties > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; } .dev_profile_specialties a { padding: 5px 8px; border: 1px solid #dbe5ea; border-radius: 999px; color: #52605f; } .dev_profile_links, .dev_profile_legal .dev_profile_links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; } .dev_profile_links a, .dev_profile_legal .dev_profile_links a { color: var(--main_color); font-size: 12px; font-weight: 700; } .dev_profile_section_head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .dev_profile_section_head h2 { margin: 0 0 4px; color: #00353c; font-size: 18px; } .dev_profile_section_head p { margin: 0; color: #84908f; font-size: 12.5px; } .dev_profile_section_head > a { flex: 0 0 auto; color: var(--main_color); font-size: 12px; font-weight: 700; } .dev_profile_review_summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 15px; } .dev_profile_review_summary > div { min-width: 150px; display: grid; gap: 3px; padding: 11px 13px; border: 1px solid #dbe5ea; border-radius: 10px; background: #f4faff; } .dev_profile_review_summary > div strong { color: #00353c; font-size: 19px; } .dev_profile_review_summary > div span { color: #84908f; font-size: 11px; } .dev_profile_review_summary > .pub_btn { margin-left: auto; } .dev_profile_review_list { display: grid; gap: 10px; } .dev_profile_review { background: #ffffff; } .dev_profile_review footer { display: flex; flex-wrap: wrap; gap: 7px 14px; padding-top: 9px; border-top: 1px solid #e8eef2; color: #84908f; font-size: 11.5px; } .dev_profile_review footer a { color: var(--main_color); font-weight: 700; } .dev_profile_review footer time { margin-left: auto; } .dev_profile_badges, .dev_profile_milestones { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .dev_profile_badges article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; padding: 14px; border: 1px solid #dbe5ea; border-radius: 11px; background: #f4faff; } .dev_profile_badges article > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--main_color_lighter5); color: var(--main_color); font-weight: 800; } .dev_profile_badges article strong { color: #00353c; font-size: 13px; } .dev_profile_badges article p { margin: 5px 0; color: #52605f; font-size: 12px; } .dev_profile_badges article small { color: #84908f; font-size: 10.5px; } .dev_profile_milestones article { display: grid; gap: 5px; padding: 14px; border: 1px solid #dbe5ea; border-radius: 11px; background: #f4faff; } .dev_profile_milestones article strong { color: #00353c; font-size: 20px; } .dev_profile_milestones article span { color: #52605f; font-size: 12.5px; font-weight: 700; } .dev_profile_milestones article small { color: #84908f; font-size: 11px; line-height: 1.35; } .dev_profile_milestones article .dev_profile_milestone_steps { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 0; } .dev_profile_milestones article .dev_profile_milestone_steps span { min-width: 27px; padding: 4px 6px; border: 1px solid #dbe5ea; border-radius: 999px; color: #84908f; background: #ffffff; font-size: 10px; line-height: 1; text-align: center; } .dev_profile_milestones article .dev_profile_milestone_steps span.reached { border-color: var(--main_color_lighter3); color: var(--main_color); background: var(--main_color_lighter5); } .dev_profile_license_grid { display: grid; gap: 7px; } .dev_profile_license_grid > div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-bottom: 1px solid #e8eef2; } .dev_profile_license_grid a { color: var(--main_color); font-size: 12.5px; font-weight: 700; } .dev_profile_license_grid span { color: #84908f; font-size: 12px; text-align: right; } .plugin_messages_layout { min-height: 480px; display: grid; grid-template-columns: minmax(220px, 310px) minmax(0, 1fr); overflow: hidden; border: 1px solid #dbe5ea; border-radius: 12px; background: #ffffff; } .plugin_conversation_list { display: grid; align-content: start; border-right: 1px solid #dbe5ea; background: #f4faff; } .plugin_conversation_list > a { display: grid; gap: 4px; padding: 12px; border-bottom: 1px solid #dbe5ea; color: #52605f; text-decoration: none; } .plugin_conversation_list > a > span { display: flex; justify-content: space-between; gap: 8px; } .plugin_conversation_list > a strong { color: #00353c; font-size: 12.5px; } .plugin_conversation_list > a b { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: var(--main_color); color: #fff; font-size: 10px; } .plugin_conversation_list > a small { overflow: hidden; color: #84908f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .plugin_conversation_list > a.active { background: var(--main_color_lighter5); } .plugin_conversation_list > a.archived { opacity: 0.65; } .plugin_conversation_list > p { padding: 16px; color: #84908f; font-size: 12px; } .plugin_message_thread { min-width: 0; display: flex; flex-direction: column; } .plugin_message_thread > header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #dbe5ea; } .plugin_message_thread > header h3 { margin: 0; color: #00353c; font-size: 15px; } .plugin_message_thread > header small { color: #84908f; font-size: 10.5px; } .plugin_message_list { flex: 1; display: flex; flex-direction: column; gap: 9px; max-height: 520px; overflow-y: auto; padding: 14px; } .plugin_message_list article { max-width: min(78%, 620px); align-self: flex-start; padding: 10px 12px; border: 1px solid #dbe5ea; border-radius: 10px; background: #f4faff; } .plugin_message_list article.is_own { align-self: flex-end; background: var(--main_color_lighter5); } .plugin_message_list article > div:first-child { display: flex; justify-content: space-between; gap: 12px; color: #84908f; font-size: 10px; } .plugin_message_list article p { margin: 6px 0 0; color: #52605f; font-size: 13px; line-height: 1.5; } .plugin_message_images { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 6px; margin-top: 8px; } .plugin_message_images img { width: 100%; aspect-ratio: 4/3; display: block; border-radius: 7px; object-fit: cover; } .plugin_message_reply { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: end; padding: 12px 14px; border-top: 1px solid #dbe5ea; } .plugin_message_reply label:first-of-type { grid-column: 1/-1; } .plugin_message_reply textarea { width: 100%; resize: vertical; } .plugin_message_attach { color: #84908f; font-size: 11px; } .plugin_message_attach input { display: block; margin-top: 5px; font-size: 11px; } .plugin_auth_switch { margin: 14px 0 0; text-align: center; } .plugin_auth_switch a { color: #00353c; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .pub_faq { max-width: 860px; margin: 0 auto; padding: 0 28px clamp(64px, 8vw, 96px); } .pub_faq h2 { font: 500 clamp(24px, 3.2vw, 34px)/1.1 "Inter", sans-serif; color: #0a2a2f; margin: 0 0 28px; text-align: center; } .pub_faq .pub_faq_list { display: flex; flex-direction: column; gap: 1px; background: #dbe5ea; border: 1px solid #dbe5ea; border-radius: 14px; overflow: hidden; } .pub_faq .pub_faq_item { background: #ffffff; padding: 24px 26px; } .pub_faq h3 { font: 600 17px/1.3 "Inter", sans-serif; color: #00353c; margin: 0 0 8px; } .pub_faq p { font: 400 15px/1.6 "Inter", sans-serif; color: #52605f; margin: 0; } .pub_note_center { font: 400 13.5px/1.5 "Inter", sans-serif; color: #84908f; text-align: center; margin: 32px auto 0; max-width: 560px; } .pub_comparison { max-width: 1500px; margin: 0 auto; padding: 0 28px clamp(56px, 7vw, 88px); } .pub_comparison .pub_section_head { margin-bottom: 28px; } .pub_comparison .pub_section_head p { max-width: 620px; } .pub_comparison_scroll { border: 1px solid #dbe5ea; border-radius: 16px; background: #ffffff; overflow-x: auto; -webkit-overflow-scrolling: touch; } .pub_comparison_scroll:focus { outline: 2px solid rgba(0, 147, 165, 0.28); outline-offset: 3px; } .pub_comparison_table { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; } .pub_comparison_table th, .pub_comparison_table td { padding: 16px 18px; border-bottom: 1px solid #dbe5ea; text-align: center; vertical-align: middle; } .pub_comparison_table thead th { position: sticky; top: 0; z-index: 2; background: #f3f7f6; font: 700 13px/1.2 "Inter", sans-serif; color: #00353c; } .pub_comparison_table th:first-child { position: sticky; left: 0; z-index: 3; width: 28%; min-width: 230px; background: #ffffff; text-align: left; } .pub_comparison_table thead th:first-child { background: #f3f7f6; z-index: 4; } .pub_comparison_table tbody th { font: 600 14.5px/1.35 "Inter", sans-serif; color: #0a2a2f; } .pub_comparison_table tbody td { min-width: 140px; font: 500 14px/1.35 "Inter", sans-serif; color: #52605f; } .pub_comparison_table tbody tr:nth-child(even) td, .pub_comparison_table tbody tr:nth-child(even) th { background: #f9fbfa; } .pub_comparison_table tbody tr:last-child th, .pub_comparison_table tbody tr:last-child td { border-bottom: 0; } .pub_comparison_table .pub_compare_yes, .pub_comparison_table .pub_compare_no { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font: 800 15px/1 "Inter", sans-serif; } .pub_comparison_table .pub_compare_yes { background: rgba(0, 147, 165, 0.1); color: #00353c; } .pub_comparison_table .pub_compare_no { background: #edf1f0; color: #84908f; } .pub_feature_rows { max-width: 1500px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) 28px; display: flex; flex-direction: column; gap: clamp(44px, 6vw, 80px); } .pub_feature_row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 56px); align-items: center; } .pub_feature_row .pub_feature_eyebrow { font: 500 12px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; letter-spacing: 0.06em; color: #c35900; margin-bottom: 16px; } .pub_feature_row h2 { font: 600 clamp(24px, 3vw, 34px)/1.12 "Inter", sans-serif; color: #00353c; margin: 0 0 16px; } .pub_feature_row > div > p { font: 400 16.5px/1.62 "Inter", sans-serif; color: #52605f; margin: 0 0 20px; } .pub_feature_row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pub_feature_row li { display: flex; align-items: flex-start; gap: 11px; font: 400 15.5px/1.5 "Inter", sans-serif; color: #3c4a48; } .pub_feature_row li::before { content: ""; margin-top: 7px; width: 7px; height: 7px; border-radius: 50% 50% 50% 0; transform: rotate(45deg); background: #c35900; flex-shrink: 0; } .pub_feature_shot { border-radius: 14px; overflow: hidden; border: 1px solid #dbe5ea; background-color: #f4faff; aspect-ratio: 1672/941; display: flex; align-items: center; justify-content: center; } .pub_feature_shot img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; } .pub_feature_shot .pub_shot_ph { font: 500 12px/1.5 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; color: #84908f; text-align: center; padding: 20px; letter-spacing: 0.04em; } .pub_feature_shot.is_illustration { background: linear-gradient(135deg, #e8f4f5, #fdf2e8); } .pub_feature_illustration { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(74px, 1fr) auto minmax(74px, 1fr) auto minmax(74px, 1fr); align-items: center; gap: clamp(6px, 2vw, 16px); padding: clamp(20px, 5vw, 46px); } .pub_feature_illustration > i { color: #84908f; font: 500 clamp(16px, 3vw, 25px)/1 "Inter", sans-serif; font-style: normal; } .pub_feature_illustration > span { min-height: 104px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 16px 10px; border: 1px solid #dbe5ea; border-radius: 14px; background: rgba(255, 255, 255, 0.88); color: #00353c; text-align: center; } .pub_feature_illustration > span svg { width: 34px; height: 34px; fill: #0093a5; } .pub_feature_illustration > span b { font: 600 clamp(11px, 1.5vw, 14px)/1.25 "Inter", sans-serif; } .pub_feature_illustration .pub_feature_visual_key { border-color: #8abcc2; background: #edf9fa; } .pub_feature_illustration .pub_feature_visual_stack { align-items: stretch; background: #00353c; } .pub_feature_illustration .pub_feature_visual_stack b { padding: 5px 8px; border: 1px solid #376067; border-radius: 6px; color: #eaf4f1; } .pub_lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 4vmin; background: rgba(4, 18, 20, 0.92); cursor: zoom-out; } .pub_lightbox[hidden] { display: none; } .pub_lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; cursor: default; } .pub_lightbox .pub_lightbox_close { position: absolute; top: 16px; right: 20px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } .pub_lightbox .pub_lightbox_close:hover { background: rgba(255, 255, 255, 0.26); } .pub_panel { max-width: 1100px; margin: 0 auto; padding: 0 28px clamp(64px, 8vw, 96px); } .pub_panel .pub_panel_inner { background: #ffffff; border: 1px solid #dbe5ea; border-radius: 20px; padding: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; align-items: center; } .pub_panel h2 { font: 500 clamp(26px, 3.4vw, 38px)/1.1 "Inter", sans-serif; color: #0a2a2f; margin: 0 0 16px; } .pub_panel > .pub_panel_inner p { font: 400 16.5px/1.62 "Inter", sans-serif; color: #52605f; margin: 0 0 24px; } .pub_stats { display: flex; flex-direction: column; gap: 14px; } .pub_stats div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #e8eef2; padding-bottom: 13px; } .pub_stats .pub_stat_label { font: 400 15px/1.4 "Inter", sans-serif; color: #52605f; } .pub_stats .pub_stat_value { font: 600 18px/1 "Inter", sans-serif; color: #00353c; } .pub_timeline { max-width: 900px; margin: 0 auto; padding: 0 28px clamp(56px, 7vw, 88px); } .pub_timeline > h2 { font: 500 clamp(24px, 3.2vw, 36px)/1.1 "Inter", sans-serif; color: #0a2a2f; margin: 0 0 32px; } .pub_timeline .pub_timeline_row { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid #dbe5ea; align-items: start; } .pub_timeline time { font: 500 13px/1.4 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; color: #c35900; } .pub_timeline h3 { font: 600 18px/1.3 "Inter", sans-serif; color: #00353c; margin: 0 0 6px; } .pub_timeline p { font: 400 15.5px/1.6 "Inter", sans-serif; color: #52605f; margin: 0; } .pub_builder { margin-top: 48px; background: #00353c; border-radius: 18px; padding: clamp(32px, 4vw, 48px); color: #eaf4f1; } .pub_builder .pub_kicker { color: #ffa85f; } .pub_builder p { font: 400 18px/1.6 "Inter", sans-serif; color: #a9c2bf; margin: 0 0 18px; max-width: 580px; } .pub_builder p strong { color: #fbfdfb; } .pub_builder a { text-decoration: none; display: inline-flex; color: #fbfdfb; border-bottom: 1px solid #335a52; padding-bottom: 2px; font: 600 16px/1.3 "Inter", sans-serif; } .pub_contact { max-width: 1100px; margin: 0 auto; padding: clamp(56px, 7vw, 92px) 28px clamp(56px, 7vw, 96px); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(36px, 5vw, 64px); align-items: start; } .pub_contact h1 { font: 500 clamp(32px, 4.6vw, 50px)/1.06 "Inter", sans-serif; letter-spacing: -0.018em; color: #0a2a2f; margin: 0 0 20px; } .pub_contact .pub_contact_intro > p { font: 400 17.5px/1.6 "Inter", sans-serif; color: #52605f; margin: 0 0 36px; max-width: 440px; } .pub_contact_list { display: flex; flex-direction: column; gap: 22px; } .pub_contact_list div { display: flex; flex-direction: column; gap: 4px; } .pub_contact_list span { font: 500 12px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #84908f; } .pub_contact_list strong { font: 500 17px/1.4 "Inter", sans-serif; color: #00353c; } .pub_contact_note { margin-top: 34px; display: flex; align-items: center; gap: 10px; background: #ffffff; border: 1px solid #dbe5ea; border-radius: 12px; padding: 16px 18px; max-width: 380px; } .pub_contact_note .pub_dot { width: 9px; height: 9px; border-radius: 50%; background: #0093a5; box-shadow: 0 0 0 4px rgba(0, 147, 165, 0.18); flex-shrink: 0; } .pub_contact_note span:last-child { font: 400 14.5px/1.4 "Inter", sans-serif; color: #52605f; } .pub_contact_docs { margin-top: 16px; max-width: 380px; border: 1px solid #dbe5ea; border-radius: 12px; padding: 16px 18px; background: #ffffff; } .pub_contact_docs span { display: block; margin-bottom: 8px; font: 600 14px/1.3 "Inter", sans-serif; color: #00353c; } .pub_contact_docs p { margin: 0 0 12px; font: 400 14.5px/1.5 "Inter", sans-serif; color: #52605f; } .pub_contact_docs a { color: #00353c; font: 600 14px/1.3 "Inter", sans-serif; text-decoration: none; border-bottom: 1px solid rgba(0, 147, 165, 0.28); } .pub_form { background: #ffffff; border: 1px solid #dbe5ea; border-radius: 18px; padding: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; gap: 18px; } .pub_form label { display: flex; flex-direction: column; gap: 7px; font: 500 13px/1 "Inter", sans-serif; color: #3a4744; } .pub_form input, .pub_form textarea { background: #f4faff; border: 1px solid #cdd9dd; border-radius: 9px; padding: 13px 14px; font: 400 15px/1.4 "Inter", sans-serif; color: #0a2a2f; outline: none; transition: border-color 0.18s ease; } .pub_form input:focus, .pub_form textarea:focus { border-color: #00353c; } .pub_form textarea { resize: vertical; min-height: 120px; } .pub_form .pub_btn { justify-content: center; } .pub_form .pub_form_hint { font: 400 12.5px/1.5 "Inter", sans-serif; color: #84908f; margin: 0; text-align: center; } .pub_hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .pub_form_feedback { font: 500 14px/1.5 "Inter", sans-serif; } .pub_form_feedback:not(:empty) { margin-top: 4px; } .pub_form_feedback .ok { color: #0093a5; } .pub_form_feedback .err { color: var(--light_red); } .pub_blog_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; } .pub_blog_grid article { background: #ffffff; border: 1px solid #dbe5ea; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; } .pub_blog_grid .pub_blog_card_media { display: block; aspect-ratio: 16/9; overflow: hidden; } .pub_blog_grid .pub_blog_card_media img { display: block; width: 100%; height: 100%; object-fit: cover; } .pub_blog_grid .pub_blog_card_body { display: flex; flex: 1; flex-direction: column; padding: 26px 28px 30px; } .pub_blog_grid time { font: 500 12px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; color: #c35900; letter-spacing: 0.04em; } .pub_blog_grid h2 { font: 600 20px/1.25 "Inter", sans-serif; color: #00353c; margin: 12px 0 10px; } .pub_blog_grid p { font: 400 15px/1.6 "Inter", sans-serif; color: #52605f; margin: 0 0 18px; flex: 1; } .pub_blog_grid a { text-decoration: none; font: 600 14.5px/1 "Inter", sans-serif; color: #c35900; } .pub_blog_grid a:hover { color: #de7218; } .pub_empty { text-align: center; padding: 60px 20px; color: #84908f; font: 400 16px/1.6 "Inter", sans-serif; } .pub_article { max-width: 760px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) 28px clamp(56px, 8vw, 96px); } .pub_article .pub_back, .pub_article .pub_back:visited { text-decoration: none; font: 600 14px/1 "Inter", sans-serif; color: #c35900; display: inline-block; margin-bottom: 22px; } .pub_article .pub_article_featured { display: block; width: 100%; max-height: 460px; margin: 0 0 28px; object-fit: cover; border: 1px solid #dbe5ea; border-radius: 16px; } .pub_article > time { display: block; font: 500 12px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; color: #c35900; margin-bottom: 14px; } .pub_article h1 { font: 500 clamp(30px, 4.4vw, 48px)/1.08 "Inter", sans-serif; letter-spacing: -0.018em; color: #0a2a2f; margin: 0 0 20px; } .pub_article .pub_lead { font: 400 18px/1.6 "Inter", sans-serif; color: #52605f; margin: 0 0 28px; } .pub_article_body { font: 400 16.5px/1.7 "Inter", sans-serif; color: #52605f; } .pub_article_body h2 { font: 500 clamp(22px, 3vw, 30px)/1.2 "Inter", sans-serif; color: #0a2a2f; margin: 32px 0 14px; } .pub_article_body h3 { font: 600 19px/1.3 "Inter", sans-serif; color: #00353c; margin: 26px 0 10px; } .pub_article_body p { margin: 0 0 16px; } .pub_article_body ul, .pub_article_body ol { margin: 0 0 16px; padding-left: 22px; } .pub_article_body li { margin: 0 0 8px; } .pub_article_body a { color: #0093a5; } .pub_article_body blockquote { margin: 0 0 16px; padding: 4px 0 4px 18px; border-left: 3px solid #ffc594; color: #0a2a2f; } .pub_cta { border-top: 1px solid #dbe5ea; } .pub_cta .pub_cta_inner { max-width: 1500px; margin: 0 auto; padding: clamp(64px, 8vw, 96px) 28px; text-align: center; } .pub_cta h2 { font: 500 clamp(30px, 4.4vw, 50px)/1.06 "Inter", sans-serif; letter-spacing: -0.015em; color: #0a2a2f; margin: 0 auto 22px; max-width: 680px; } .pub_cta .pub_actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .pub_footer { background: #002b30; color: #a9c2bf; border-top: 1px solid #0d3f45; } .pub_footer_grid { max-width: 1500px; margin: 0 auto; padding: clamp(72px, 8vw, 112px) 28px 52px; display: grid; grid-template-columns: 1.45fr 0.8fr 0.8fr 0.9fr 1.55fr; gap: 34px 48px; align-items: center; } .pub_footer_brand { max-width: 320px; } .pub_footer_brand .pub_footer_logo { display: inline-block; margin-bottom: 30px; } .pub_footer_brand .pub_footer_logo img { height: 54px; width: auto; } .pub_footer_brand p { max-width: 270px; font: 400 19px/1.6 "Inter", sans-serif; color: #b8d0cd; margin: 0; } .pub_footer_brand p a { color: #ffa85f; text-decoration: none; } .pub_footer_brand .pub_footer_owner { margin-top: 34px; padding-top: 28px; border-top: 1px solid #16484f; color: #91aaa7; font-size: 16px; } .pub_footer_brand .pub_footer_owner a { display: inline-block; margin-top: 6px; color: #ffa85f; font-size: 18px; font-weight: 700; } .pub_footer_col { display: flex; flex-direction: column; min-height: 266px; padding-left: 44px; border-left: 1px solid #16484f; } .pub_footer_col .pub_footer_head { font: 500 13px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; letter-spacing: 0.13em; text-transform: uppercase; color: #8da7a3; margin-bottom: 30px; } .pub_footer_col > div { display: flex; flex-direction: column; gap: 20px; } .pub_footer_col a { text-decoration: none; font: 400 19px/1.2 "Inter", sans-serif; color: #f4fbfa; padding: 4px 0; } .pub_footer_col a:hover { color: #ffa85f; } .pub_footer_news { min-height: unset; padding: 32px; border: 1px solid #1b5960; border-radius: 18px; } .pub_footer_news .pub_footer_news_head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 28px; } .pub_footer_news .pub_footer_news_icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #064a51; color: #0093a5; } .pub_footer_news .pub_footer_news_icon svg { width: 30px; height: 30px; fill: currentColor; } .pub_footer_news .pub_footer_news_title { display: block; margin: 5px 0 14px; color: #fbfdfb; font: 700 22px/1.2 "Inter", sans-serif; } .pub_footer_news .pub_footer_news_note { font: 400 16px/1.6 "Inter", sans-serif; color: #b8d0cd; margin: 0; } .pub_footer_news form { display: grid; gap: 16px; } .pub_footer_news input { width: 100%; min-width: 0; background: #06373d; border: 1px solid #1d535a; border-radius: 10px; padding: 18px 20px; font: 400 18px/1 "Inter", sans-serif; color: #fbfdfb; outline: none; } .pub_footer_news input:focus { border-color: #ffa85f; } .pub_footer_news button { background: #ffc594; color: #00353c; border: 0; border-radius: 10px; min-height: 60px; padding: 0 22px; font: 700 18px/1 "Inter", sans-serif; cursor: pointer; } .pub_footer_news .pub_form_feedback { color: #ffa85f; margin-top: 4px; font-size: 13.5px; } .pub_footer_bottom { max-width: 1500px; margin: 0 auto; padding: 34px 28px 48px; border-top: 1px solid #16484f; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 24px; } .pub_footer_bottom span { font: 400 16px/1.4 "Inter", sans-serif; color: #8da7a3; } .pub_footer_bottom .pub_footer_domain { justify-self: end; } .pub_footer_seal, .pub_footer_social { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #073f46; color: #9bc2bd; text-decoration: none; } .pub_footer_seal svg, .pub_footer_social svg { width: 20px; height: 20px; fill: currentColor; } .pub_footer_social { border-left: 1px solid #16484f; margin-left: 8px; font: 800 22px/1 "Inter", sans-serif; } .pub_chat { position: fixed; right: 22px; bottom: 22px; z-index: 60; } .pub_chat summary { list-style: none; cursor: pointer; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: auto; background: #00353c; color: #eaf4f1; box-shadow: 0 12px 28px -10px rgba(0, 40, 46, 0.55); transition: background 0.18s ease; } .pub_chat summary::-webkit-details-marker { display: none; } .pub_chat summary:hover { background: #00282d; } .pub_chat summary svg { width: 24px; height: 24px; fill: currentColor; } .pub_chat summary[aria-label="Live chat"] svg { color: #fff; fill: #fff; } .pub_chat summary .pub_chat_close { display: none; } .pub_chat[open] summary .pub_chat_open { display: none; } .pub_chat[open] summary .pub_chat_close { display: block; width: 18px; height: 18px; } .pub_chat .pub_chat_form { margin-top: 12px; width: min(330px, 100vw - 44px); background: #ffffff; border: 1px solid #dbe5ea; border-radius: 14px; box-shadow: 0 18px 44px -22px rgba(0, 40, 46, 0.5); display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; animation: pub_fade 0.2s ease; } .pub_chat .pub_chat_title { font: 600 16px/1 "Inter", sans-serif; color: #00353c; margin-bottom: 2px; } .pub_chat input, .pub_chat textarea { background: #f4faff; border: 1px solid #cdd9dd; border-radius: 8px; padding: 10px 12px; font: 400 14px/1.4 "Inter", sans-serif; color: #0a2a2f; outline: none; } .pub_chat input:focus, .pub_chat textarea:focus { border-color: #00353c; } .pub_chat textarea { resize: vertical; } .pub_chat .pub_btn { justify-content: center; } @media (max-width: 980px) { .plugins_site_hero { grid-template-columns: minmax(0, 1fr); gap: 14px; } .plugins_site_hero .plugins_site_hero_aside { justify-content: flex-start; } .plugins_site_hero .plugins_site_hero_aside .plugin_hero_actions { justify-content: flex-start; } .plugins_site_hero .plugins_site_hero_aside > p { max-width: 700px; } .dev_profile_details_grid { grid-template-columns: minmax(0, 1fr); } .dev_profile_metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dev_profile_metrics span:nth-child(4) { border-left: 0; } .plugin_messages_layout { grid-template-columns: minmax(190px, 250px) minmax(0, 1fr); } .pub_footer_grid { grid-template-columns: 1fr 1fr; align-items: start; } .pub_footer_brand, .pub_footer_news { grid-column: 1/-1; } .pub_footer_brand { max-width: none; } .pub_footer_col { min-height: auto; } .api_connectors_columns, .plugin_detail_layout, .plugin_owner_layout, .sa_api_logs_grid { grid-template-columns: 1fr; } .plugin_owner_side { position: static; } .plugin_owner_detail_head { flex-direction: column; } .plugins_rules_flow, .plugins_rules_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plugins_rules_hero, .plugins_manifest_visual { grid-template-columns: 1fr; } .plugins_rules_flow article::after { display: none; } .sa_notifications_page .sa_notifications_toolbar { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(130px, 1fr)); } .api_webhook_item { display: grid; } .plugins_developer_grid.list_view .plugin_developer_content { grid-template-columns: minmax(0, 1fr); gap: 14px; } .plugins_developer_grid.list_view .plugin_developer_excerpt { -webkit-line-clamp: 3; } .plugins_developer_grid.list_view .plugin_developer_stats { padding-top: 13px; border-top: 1px solid #e8eef2; } } @media (max-width: 1680px) { .pub_header_inner { padding-right: 20px; padding-left: 20px; gap: 16px; } .pub_nav { gap: clamp(10px, 1vw, 16px); } .pub_nav_link { font-size: 14px; } .pub_header_cta { gap: 10px; } .pub_header_cta .pub_btn.smaller { padding-right: 14px; padding-left: 14px; } } @media (max-width: 1440px) { .pub_nav, .pub_header_cta { display: none; } .pub_burger { display: flex; grid-column: 3; } .pub_feature_shot { order: -1; } } @media (max-width: 760px) { .pub_preview_desktop_only { display: none !important; } .pub_preview_mobile_only { display: block !important; } .pub_tree_preview { height: clamp(300px, 88vw, 440px); } } @media (max-width: 640px) { .plugins_site_hero { min-height: 0; padding: 18px 16px 10px; } .plugins_site_hero_aside > p { padding-left: 12px; } .dev_profile { padding: 12px 12px 32px; } .dev_profile_identity_wrap { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 0 14px 14px; } .dev_profile_avatar { width: 72px; height: 72px; margin-top: -32px; border-width: 4px; font-size: 22px; } .dev_profile_identity h1 { font-size: 21px; } .dev_profile_identity .dev_profile_approved { margin-top: 4px; } .dev_profile_actions { grid-column: 1/-1; justify-content: flex-start; } .dev_profile_tabs { padding-inline: 9px; } .dev_profile_panel { padding: 12px; } .dev_profile_metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dev_profile_metrics span:nth-child(3), .dev_profile_metrics span:nth-child(5) { border-left: 0; } .dev_profile_metrics span:nth-child(4) { border-left: 1px solid #dbe5ea; } .dev_profile_review_summary > .pub_btn { width: 100%; margin-left: 0; } .plugin_messages_layout { grid-template-columns: minmax(0, 1fr); } .plugin_conversation_list { max-height: 210px; overflow-y: auto; border-right: 0; border-bottom: 1px solid #dbe5ea; } .plugin_message_list article { max-width: 92%; } .plugin_message_reply { grid-template-columns: minmax(0, 1fr); } .social_privacy_settings .social_privacy_search { padding-inline: 16px; } .social_privacy_settings .social_user_search_results { margin-inline: 16px; } .social_block_list { padding-inline: 16px; } .social_block_card { grid-template-columns: 1fr; } .social_block_identity { border-right: 0; border-bottom: 1px solid var(--border_color); } .plugin_recommend_form { padding-inline: 16px; } .manage_families_page .racinage_modal_backdrop[data-family-details-modal] { padding: 10px; } .manage_families_page .manage_family_details_modal { width: 100%; max-height: calc(100dvh - 20px); } .manage_families_page .manage_family_details_modal .tree_modal_header { padding: 14px; } .manage_families_page .manage_family_details_modal .manage_family_details_list { padding: 12px 14px 16px; } .manage_families_page .manage_family_details_modal .manage_family_record_detail { grid-template-columns: 36px minmax(0, 1fr); } .manage_families_page .manage_family_details_modal .manage_family_record_detail .manage_family_record_icon { width: 36px; height: 36px; } .manage_families_page .manage_family_details_modal .manage_family_record_detail a { grid-column: 1/-1; justify-content: center; } .plugin_screenshot_gallery { grid-template-columns: 1fr; } .plugin_detail_tabs a { padding-inline: 12px; } .plugins_forum_hero { align-items: flex-start; flex-direction: column; } .plugins_forum_hero .plugin_hero_actions { width: 100%; justify-content: flex-start; } .plugin_detail_page .pub_page_hero .pub_page_hero_inner { grid-template-columns: 1fr; } .plugin_detail_page .pub_page_hero .plugin_hero_actions { grid-column: 1; grid-row: auto; justify-content: flex-start; } .manage_runtime_header { width: 100%; display: grid; justify-content: stretch; margin-left: 0; } .manage_installed_grid, .plugin_manage_submit_workflow { padding: 14px; } .plugin_bundle_wizard_head { align-items: stretch; flex-direction: column; } .plugin_bundle_wizard_head ol { display: grid; grid-template-columns: 1fr; } .plugin_bundle_preview { grid-template-columns: 58px minmax(0, 1fr); } .plugin_bundle_preview .plugin_bundle_logo { width: 58px; height: 58px; } .plugin_bundle_preview .plugin_bundle_cover { grid-column: 1/-1; grid-row: 2; } .plugin_bundle_gallery { grid-template-columns: 1fr; } .plugins_developer_stats { grid-template-columns: 1fr; } .plugins_developer_head { align-items: stretch; flex-direction: column; } .plugins_developer_head > div:last-child { display: grid; grid-template-columns: 1fr 1fr; } .plugin_dev_settings_modal { width: calc(100vw - 12px); max-height: calc(100vh - 12px); } .plugins_permission_example { grid-template-columns: 1fr; } .plugins_rules_hero { padding: 24px 18px; } .plugins_rules_section_head { grid-template-columns: 36px minmax(0, 1fr); } .plugins_rules_section_head > span { width: 34px; height: 34px; } .manage_plugins_page .manage_plugin_tabs { display: flex; width: 100%; } .manage_plugins_page .manage_plugin_tabs .sa_page_tab { flex: 1 1 0; justify-content: center; } .plugin_installed_item { align-items: flex-start; flex-direction: column; } .plugin_installed_actions { justify-content: flex-start; } .pub_footer_grid { grid-template-columns: 1fr; padding: 56px 20px 34px; } .pub_footer_col { padding-left: 0; border-left: 0; border-top: 1px solid #16484f; padding-top: 24px; } .pub_footer_col .pub_footer_head { margin-bottom: 16px; } .pub_footer_col > div { gap: 14px; } .pub_footer_news { padding: 22px; } .pub_footer_news .pub_footer_news_head { grid-template-columns: 1fr; gap: 14px; } .public_language_switcher .public_language_menu, .pub_lang .actual_other_languages, .lang_right_lower_header .actual_other_languages { position: fixed; top: 58px; right: 12px; left: auto; width: min(180px, 100vw - 24px); max-width: calc(100vw - 24px); } .header_notifications_dropdown, .sa_header .sa_cta .sa_notif_panel, html[data-menu=left] .sa_header .sa_cta .sa_notif_panel { position: fixed; top: 64px; right: 8px; left: 8px; width: auto; max-width: none; } .api_scope_picker_head { display: grid; gap: 3px; } .api_examples_panel summary { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; } .api_examples_panel summary span { grid-column: 1; } .api_examples_panel summary::after { grid-column: 2; grid-row: 1/span 2; } .api_resource_grid { grid-template-columns: 1fr; } .subscription_grace_notice { display: grid; align-items: stretch; } .subscription_grace_notice a { width: 100%; } .racinage_transfer_panel { margin-right: 0; margin-left: 0; } .racinage_transfer_panel summary { padding: 13px 14px; } .racinage_transfer_forms { padding: 14px; } .racinage_transfer_form .page_add_btn { width: 100%; } .racinage_transfer_actions, .plugins_toolbar, .plugins_rules_flow, .plugins_rules_grid, .plugins_rules_split, .plugins_form_grid, .plugin_feature_columns { grid-template-columns: 1fr; } .plugins_toolbar, .manage_plugins_toolbar { flex-wrap: wrap; } .plugins_toolbar input[type=search], .plugins_toolbar select, .plugins_toolbar .plugins_view_toggle, .manage_plugins_toolbar input[type=search], .manage_plugins_toolbar select, .manage_plugins_toolbar .plugins_view_toggle { flex: 1 1 100%; width: 100%; min-width: 0; } .plugins_catalog_grid { grid-template-columns: minmax(0, 1fr); } .plugins_developer_grid { grid-template-columns: minmax(0, 1fr); } .plugins_developer_grid.list_view .plugin_developer_card { grid-template-columns: minmax(0, 1fr); } .plugins_developer_grid.list_view .plugin_developer_cover { height: auto; min-height: 0; aspect-ratio: 3/1; border-right: 0; border-bottom: 1px solid #e8eef2; } .plugins_catalog_grid.list_view .plugin_card .plugin_card_body, .plugins_account_layout { grid-template-columns: 1fr; } .plugins_catalog_grid.list_view .plugin_card .plugin_card_meta { justify-content: flex-start; } .plugins_catalog_grid.list_view .plugin_card .apps_card_action { justify-content: flex-start; flex-wrap: nowrap; } .plugins_account_tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); position: static; } .plugins_toolbar .manage_add_new_btn { width: 100%; justify-content: center; } .manage_plugins_toolbar .manage_add_new_btn { justify-content: center; } .api_settings_actions .button1 { width: 100%; } .sa_notifications_page .sa_notifications_stats { grid-template-columns: 1fr 1fr; } .sa_notifications_page .sa_notifications_toolbar { grid-template-columns: 1fr; } .sa_notifications_page .sa_notification_row { grid-template-columns: 24px 44px minmax(0, 1fr); gap: 10px; } .sa_notifications_page .sa_notification_group_title { align-items: flex-start; flex-wrap: wrap; } .sa_notifications_page .sa_notification_group_title form { width: 100%; } .sa_notifications_page .sa_notification_group_title .sa_btn { width: 100%; } .sa_notifications_page .sa_notification_actions { grid-column: 1/-1; } .sa_notifications_page .sa_notification_actions { justify-content: flex-start; } .sa_notifications_page .sa_notification_actions .sa_btn, .sa_notifications_page .sa_notification_actions form { width: 100%; } .sa_notifications_page .sa_notification_actions form .sa_btn { width: 100%; } .sa_lang .sa_lang_menu { right: 0; left: auto; max-width: calc(100vw - 16px); } .announcement_banner { grid-template-columns: 1fr; align-items: start; } .announcement_banner .announcement_media { width: 100%; max-height: 160px; } .announcement_banner .announcement_actions { justify-content: flex-start; } .announcement_popup_backdrop { align-items: flex-end; padding: 12px; } .announcement_popup { max-height: calc(100vh - 24px); } .announcement_undo_stack { right: 8px; bottom: 8px; left: 8px; } .announcement_undo { justify-content: space-between; } } @media (max-width: 700px) { .sa_details_grid, .sa_session_meta { grid-template-columns: 1fr; } .sa_session_history_head { align-items: flex-start; } .demo_top_bar { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 10px; } .demo_top_bar > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .demo_top_bar_exit span, .demo_top_bar_timer span { display: none; } .demo_summary_modal { padding: 20px; } .demo_summary_stats { grid-template-columns: 1fr 1fr; } .demo_feedback_form > div, .demo_summary_actions { align-items: stretch; flex-direction: column; } .demo_summary_actions .pub_btn { width: 100%; } .pub_footer_bottom { grid-template-columns: auto minmax(0, 1fr); padding: 24px 20px 36px; } .pub_footer_bottom .pub_footer_domain, .pub_footer_bottom .pub_footer_social { justify-self: start; } .pub_timeline .pub_timeline_row { grid-template-columns: 1fr; gap: 6px; } .pub_hero_inner { padding-top: clamp(40px, 10vw, 64px); } .pub_comparison { padding-left: 18px; padding-right: 18px; } .pub_comparison_table { min-width: 720px; } .pub_comparison_table th, .pub_comparison_table td { padding: 14px 16px; } .pub_comparison_table th:first-child { min-width: 190px; width: 190px; } .pub_comparison_table tbody td { min-width: 120px; } .pub_price_lifetime { grid-template-columns: 1fr; } .pub_price_lifetime .pub_btn { white-space: normal; } .pub_price_lifetime ul { grid-template-columns: 1fr; } .sa_livechat_card .chat-layout { flex-direction: column; height: auto; min-height: 0; } .sa_livechat_card .chat-sessions { width: 100%; max-height: 260px; border-right: 0; border-bottom: 1px solid var(--db-border); } .sa_livechat_card .chat-panel { min-height: 420px; } .sa_livechat_card .chat-layout.has-session .chat-sessions { display: none; } .sa_livechat_card .chat-layout.has-session .chat-panel { min-height: calc(100vh - 220px); } .sa_livechat_card .chat-panel__back { display: inline-flex; } .sa_livechat_card .chat-panel__header, .sa_livechat_card .chat-panel__compose { flex-wrap: wrap; } .sa_livechat_card .chat-msg { max-width: 90%; } } /* Welcome Journey shell */ body.onboarding_open { overflow: hidden; } body.onboarding_tour_active { overflow: hidden; } body.onboarding_tour_active .onboarding_root { pointer-events: none; } .onboarding_backdrop { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0, 0, 0, 0.42); } .onboarding_shell { position: relative; display: grid; gap: 18px; width: min(680px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 28px 28px 22px; border: 1px solid var(--border_color); border-radius: 14px; background: var(--white_color); color: var(--text_color); } .onboarding_close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--text_color); font-size: 28px; line-height: 1; cursor: pointer; } .onboarding_close:hover { background: var(--main_color_lighter5); } .onboarding_progress { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 28px 0 0; } .onboarding_progress_item { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 12px; border: 1px solid var(--border_color); border-radius: 999px; color: var(--text_color); opacity: 0.65; font-size: 0.9rem; } .onboarding_progress_item.is_active { opacity: 1; border-color: var(--main_color); color: var(--main_color); font-weight: 600; background: var(--main_color_lighter5); } .onboarding_progress_num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--main_color_lighter5); color: var(--main_color); font-size: 0.8rem; font-weight: 700; } .onboarding_stage { display: grid; gap: 16px; } .onboarding_stage h2 { margin: 0; padding-right: 28px; font-size: 1.5rem; line-height: 1.25; } .onboarding_stage p { margin: 0; line-height: 1.55; } .onboarding_lead { max-width: 52ch; opacity: 0.9; } .onboarding_muted { color: var(--text_color); opacity: 0.72; } .onboarding_video_frame { width: 100%; aspect-ratio: 16/9; border: 1px solid var(--border_color); border-radius: 10px; overflow: hidden; background: #000; } .onboarding_video_frame video, .onboarding_video_frame iframe { width: 100%; height: 100%; border: 0; display: block; } .onboarding_soft_links { display: flex; flex-wrap: wrap; gap: 16px; } .onboarding_soft_links a { color: var(--main_color); text-decoration: underline; font-size: 0.95rem; padding: 4px 0; } .onboarding_actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 8px; min-height: 44px; } .onboarding_actions_primary { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .onboarding_primary { min-height: 44px; min-width: 132px; padding: 10px 18px; } .onboarding_secondary, .onboarding_skip { border: 0; background: transparent; color: var(--text_color); text-decoration: underline; font: inherit; cursor: pointer; padding: 10px 4px; margin-left: auto; opacity: 0.8; } .onboarding_secondary:hover, .onboarding_skip:hover { opacity: 1; } .onboarding_text_btn { border: 0; background: transparent; color: var(--main_color); font: inherit; cursor: pointer; padding: 10px 4px; text-decoration: underline; } .onboarding_choice_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .onboarding_choice { display: grid; gap: 8px; text-align: left; min-height: 88px; padding: 18px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); color: var(--text_color); font: inherit; cursor: pointer; } .onboarding_choice strong { font-size: 1.08rem; } .onboarding_choice span { opacity: 0.75; font-size: 0.92rem; line-height: 1.4; } .onboarding_choice:hover { border-color: var(--main_color); background: var(--main_color_lighter5); } .onboarding_builder_form, .onboarding_field { display: grid; gap: 10px; } .onboarding_checkbox { display: inline-flex; align-items: center; gap: 10px; width: fit-content; font-weight: 600; font-size: 0.92rem; cursor: pointer; } .onboarding_checkbox input { width: 18px; height: 18px; margin: 0; accent-color: var(--main_color); } .onboarding_checkbox span { display: inline-flex; align-items: center; gap: 6px; } .onboarding_launcher { position: fixed; right: 20px; bottom: 56px; z-index: calc(var(--app_overlay_z) - 1); display: grid; gap: 12px; width: min(390px, 100vw - 32px); padding: 16px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); color: var(--text_color); } .onboarding_launcher strong { line-height: 1.35; } .onboarding_launcher > div { display: flex; align-items: center; gap: 12px; } .onboarding_launcher .button1 { min-height: 40px; padding: 8px 16px; } .onboarding_launcher .onboarding_text_btn { color: var(--text_color); } .onboarding_field span, .onboarding_field .onboarding_field_label { font-weight: 600; font-size: 0.92rem; } .onboarding_field .onboarding_field_label { display: inline-flex; align-items: center; gap: 6px; } .onboarding_field input, .onboarding_field select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); font: inherit; } .onboarding_field_tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 auto; cursor: help; } .onboarding_field_tip .onboarding_field_tip_icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border_color); background: var(--main_color_lighter5); color: var(--text_color); font-size: 0.7rem; font-weight: 700; line-height: 1; font-style: normal; } .onboarding_field_tip .onboarding_field_tip_bubble { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 20; display: none; width: max-content; max-width: min(240px, 70vw); padding: 8px 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); font-size: 0.82rem; font-weight: 400; line-height: 1.35; white-space: normal; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } .onboarding_field_tip:hover .onboarding_field_tip_bubble, .onboarding_field_tip:focus .onboarding_field_tip_bubble, .onboarding_field_tip:focus-within .onboarding_field_tip_bubble { display: block; } .onboarding_children_list { display: grid; gap: 12px; } .onboarding_child_card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--main_color_lighter5); } .onboarding_child_card_head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .onboarding_child_card_head strong { font-size: 0.95rem; } .onboarding_child_remove { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); font-size: 1.25rem; line-height: 1; cursor: pointer; } .onboarding_child_remove:hover { border-color: var(--main_color); color: var(--main_color); } .onboarding_add_child { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 4px; padding: 10px 14px; border: 1px dashed var(--border_color); border-radius: 8px; background: transparent; color: var(--text_color); font: inherit; font-weight: 600; cursor: pointer; } .onboarding_add_child:hover { border-color: var(--main_color); color: var(--main_color); } .onboarding_tour_target { outline: 3px solid var(--main_color); outline-offset: 4px; position: relative; z-index: 145; box-shadow: none; } .onboarding_tour_tip { position: fixed; z-index: 150; display: grid; gap: 10px; width: min(340px, 100vw - 24px); max-height: min(48vh, 360px); overflow: auto; padding: 16px; border: 1px solid var(--border_color); border-radius: 12px; background: var(--white_color); color: var(--text_color); pointer-events: auto; } .onboarding_tour_tip strong { display: block; } .onboarding_tour_tip p { margin: 0; line-height: 1.45; } .onboarding_tour_tip .onboarding_actions { margin-top: 0; } .onboarding_tour_tip.is_docked, .onboarding_tour_tip.is_compact { left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; max-height: min(42vh, 320px); } /* Super-admin Welcome Journey CMS */ .sa_onboarding_page .sa_onboarding_intro, .sa_onboarding_page .sa_onboarding_version { max-width: 70ch; margin: 0 0 12px; } .sa_onboarding_page .sa_onboarding_form { display: grid; gap: 18px; max-width: 1150px; } .sa_onboarding_page .sa_onboarding_section { display: grid; gap: 16px; padding: 20px; } .sa_onboarding_page .sa_onboarding_section_head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .sa_onboarding_page .sa_onboarding_section_head .sa_card_title { margin: 0; } .sa_onboarding_page .sa_onboarding_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .sa_onboarding_page .sa_onboarding_grid label { display: grid; gap: 6px; } .sa_onboarding_page .sa_onboarding_video_pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .sa_onboarding_page .sa_onboarding_video_block { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--bg_color, #fafafa); } .sa_onboarding_page .sa_onboarding_video_block h3 { margin: 0; font-size: 1rem; } .sa_onboarding_page .sa_onboarding_video_block label { display: grid; gap: 6px; } .sa_onboarding_page .sa_onboarding_subhead { margin: 4px 0 0; font-size: 0.98rem; } .sa_onboarding_page .sa_onboarding_step_card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border_color); border-radius: 10px; } .sa_onboarding_page .sa_onboarding_step_label { margin: 0; font-weight: 600; font-size: 0.9rem; color: var(--main_color); } .sa_onboarding_page .sa_onboarding_actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; position: sticky; bottom: 0; padding: 14px 0 4px; background: linear-gradient(to top, var(--bg_color, #fff) 70%, transparent); } .sa_onboarding_page .sa_onboarding_actions .sa_btn { min-height: 42px; min-width: 120px; } /* Commerce, promotions, affiliate, and consent */ .pub_pricing_controls { display: flex; align-items: flex-start; justify-content: center; gap: 12px; max-width: 920px; margin: 0 auto 28px; } .pub_billing_toggle { display: flex; width: max-content; max-width: 100%; margin: 0; padding: 4px; border: 1px solid #dbe5ea; border-radius: 999px; background: #f4faff; } .pub_billing_toggle label { position: relative; cursor: pointer; } .pub_billing_toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; } .pub_billing_toggle span { display: inline-flex; min-width: 112px; min-height: 42px; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 999px; color: #84908f; font: 600 14px/1.2 "Inter", sans-serif; } .pub_billing_toggle input:checked + span { background: #00353c; color: #fff; } .pub_billing_toggle input:focus-visible + span { outline: 2px solid #c35900; outline-offset: 2px; } .pub_billing_toggle noscript { margin-left: 6px; } .pub_promotion_preview { display: grid; flex: 1 1 0; gap: 6px; min-width: 0; max-width: 500px; margin: 0; } .pub_promotion_preview > div { display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; align-items: center; gap: 4px; padding: 4px; border: 1px solid #dbe5ea; border-radius: 999px; background: #f4faff; } .pub_promotion_preview label { padding: 0 10px; color: #0a2a2f; font: 600 13px/1.3 "Inter", sans-serif; white-space: nowrap; } .pub_promotion_preview input { min-width: 0; min-height: 42px; padding: 10px 12px; border: 1px solid #dbe5ea; border-radius: 999px; background: #ffffff; color: #0a2a2f; font: 400 15px/1.3 "Inter", sans-serif; } .pub_promotion_preview .pub_btn { min-height: 42px; padding: 9px 18px; border-radius: 999px; white-space: nowrap; } .pub_promotion_preview p { margin: 0 12px; font: 600 13px/1.4 "Inter", sans-serif; } .pub_promotion_preview .accepted { color: #1f7148; } .pub_promotion_preview .unavailable { color: #9f3d37; } .pub_price_card .pub_price_original { color: #84908f; font: 500 14px/1.2 "Inter", sans-serif; text-decoration: line-through; } .pub_price_card .pub_price_promotion { margin: 0 0 12px; color: #1f7148; font: 500 13px/1.4 "Inter", sans-serif; } .pub_price_card .pub_price_yearly_saving { margin: 0 0 4px; color: #1f7148; font: 700 14px/1.35 "Inter", sans-serif; } .pub_price_card .pub_price_billing_total { margin: 0 0 12px; color: #84908f; font: 500 13px/1.4 "Inter", sans-serif; } .pub_price_card.featured .pub_price_original { color: #a9c2bf; } .pub_price_card.featured .pub_price_promotion { color: #ffc594; } .pub_price_card.featured .pub_price_yearly_saving { color: #b9f5d2; } .pub_price_card.featured .pub_price_billing_total { color: #a9c2bf; } .affiliate_public_hero { border-bottom: 1px solid #dbe5ea; background: linear-gradient(135deg, #f5fafd 0%, #edf7f8 100%); } .affiliate_public_hero_inner, .affiliate_public_section { width: min(1100px, 100% - 56px); margin: 0 auto; } .affiliate_public_hero_inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr); align-items: center; gap: clamp(46px, 7vw, 82px); padding: clamp(58px, 7vw, 88px) 0; } .affiliate_public_copy h1 { max-width: 570px; margin: 0 0 18px; color: #0a2a2f; font: 500 clamp(38px, 5vw, 60px)/1.02 "Inter", sans-serif; letter-spacing: -0.025em; } .affiliate_public_copy .pub_btn { min-height: 48px; } .affiliate_public_lead { max-width: 520px; margin: 0 0 22px; color: #52605f; font: 400 18px/1.55 "Inter", sans-serif; } .affiliate_public_scope { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; } .affiliate_public_scope li { min-height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid #dbe5ea; border-radius: 999px; background: rgba(255, 255, 255, 0.72); color: #00353c; font: 600 12px/1 "Inter", sans-serif; } .affiliate_public_scope li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #0093a5; } .affiliate_public_visual { margin: 0; overflow: hidden; border: 1px solid #cbdde1; border-radius: 18px; background: #ffffff; } .affiliate_public_visual_bar { min-height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid #dbe5ea; color: #84908f; } .affiliate_public_visual_bar span { width: 7px; height: 7px; border-radius: 50%; background: #b8c7ca; } .affiliate_public_visual_bar span:first-child { background: #de7218; } .affiliate_public_visual_bar strong { margin-left: 5px; font: 600 11px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; letter-spacing: 0.05em; } .affiliate_public_visual_image { position: relative; overflow: hidden; } .affiliate_public_visual_image img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; object-position: top center; } .affiliate_public_rate { position: absolute; right: 16px; bottom: 16px; display: grid; min-width: 116px; padding: 12px 16px; border: 1px solid #176a74; border-radius: 12px; background: #00353c; color: #fff; } .affiliate_public_rate strong { font: 700 28px/1 "Inter", sans-serif; } .affiliate_public_rate span { margin-top: 4px; color: #a9c2bf; font: 500 11px/1.2 "Inter", sans-serif; } .affiliate_public_visual figcaption { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 12px; border-top: 1px solid #dbe5ea; } .affiliate_public_visual figcaption span { display: inline-flex; align-items: center; gap: 6px; color: #00353c; font: 600 12px/1.2 "Inter", sans-serif; } .affiliate_public_visual figcaption svg { width: 20px; height: 20px; fill: #0093a5; } .affiliate_public_visual figcaption i { color: #84908f; font-style: normal; } .affiliate_public_section { padding: clamp(62px, 7vw, 88px) 0; } .affiliate_public_section_head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 32px; } .affiliate_public_section_head .pub_kicker { margin-bottom: 12px; } .affiliate_public_section_head h2 { margin: 0; color: #0a2a2f; font: 500 clamp(29px, 4vw, 42px)/1.08 "Inter", sans-serif; letter-spacing: -0.015em; } .affiliate_public_section_head > p { max-width: 400px; margin: 0; color: #52605f; font: 400 15px/1.55 "Inter", sans-serif; } .affiliate_public_steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .affiliate_public_steps article { position: relative; min-height: 215px; padding: 24px; border: 1px solid #dbe5ea; border-radius: 16px; background: #ffffff; } .affiliate_public_steps h3 { margin: 24px 0 8px; color: #00353c; font: 600 20px/1.2 "Inter", sans-serif; } .affiliate_public_steps p { margin: 0; color: #52605f; font: 400 14px/1.5 "Inter", sans-serif; } .affiliate_public_step_icon, .affiliate_public_rules_icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; background: #e4f3f5; color: #00353c; } .affiliate_public_step_icon svg, .affiliate_public_rules_icon svg { width: 25px; height: 25px; fill: currentColor; } .affiliate_public_step_number { position: absolute; top: 27px; right: 24px; color: #c35900; font: 600 12px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; letter-spacing: 0.08em; } .affiliate_public_safeguards { padding-top: 0; } .affiliate_public_rules { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: clamp(30px, 5vw, 58px); align-items: center; padding: clamp(28px, 5vw, 48px); border: 1px solid #dbe5ea; border-radius: 20px; background: #f4faff; } .affiliate_public_rules_intro { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; } .affiliate_public_rules_intro .pub_kicker { margin: 2px 0 10px; } .affiliate_public_rules_intro h2 { margin: 0 0 12px; color: #0a2a2f; font: 500 clamp(26px, 3vw, 36px)/1.1 "Inter", sans-serif; } .affiliate_public_rules_intro p:last-child { margin: 0; color: #52605f; font: 400 14px/1.55 "Inter", sans-serif; } .affiliate_public_exclusions { padding-left: clamp(24px, 4vw, 44px); border-left: 1px solid #dbe5ea; } .affiliate_public_exclusions h3 { margin: 0 0 14px; color: #00353c; font: 600 17px/1.2 "Inter", sans-serif; } .affiliate_public_exclusions ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .affiliate_public_exclusions li { padding: 7px 10px; border: 1px solid #dbe5ea; border-radius: 8px; background: #ffffff; color: #52605f; font: 500 12px/1.2 "Inter", sans-serif; } .affiliate_public_terms { padding-top: 0; } .affiliate_public_terms details { overflow: hidden; border: 1px solid #dbe5ea; border-radius: 14px; background: #ffffff; } .affiliate_public_terms summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 18px; color: #00353c; font: 600 15px/1.3 "Inter", sans-serif; cursor: pointer; } .affiliate_public_terms summary small { color: #84908f; font: 500 12px/1 "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; } .affiliate_public_terms details > div { padding: 20px; border-top: 1px solid #dbe5ea; color: #52605f; font: 400 14px/1.65 "Inter", sans-serif; } .affiliate_public_status { display: inline-flex; align-items: center; min-height: 46px; margin: 0; padding: 12px 18px; border: 1px solid #dbe5ea; border-radius: 10px; background: #f4faff; color: #84908f; font: 600 15px/1.35 "Inter", sans-serif; } .cookie_consent_banner { position: fixed; z-index: 170; left: auto; right: 20px; bottom: 20px; width: min(620px, 100% - 40px); display: grid; gap: 14px; padding: 16px 18px; border: 1px solid #dbe5ea; border-radius: 16px; background: #ffffff; color: #0a2a2f; } .cookie_consent_banner .cookie_consent_copy { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 11px; } .cookie_consent_banner .cookie_consent_mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #f4faff; color: #00353c; } .cookie_consent_banner .cookie_consent_mark svg { width: 21px; height: 21px; fill: currentColor; } .cookie_consent_banner h2 { margin: 1px 0 4px; font: 600 19px/1.2 "Inter", sans-serif; } .cookie_consent_banner p { margin: 0; color: #52605f; font: 400 13px/1.45 "Inter", sans-serif; } .cookie_consent_banner .cookie_consent_actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .cookie_consent_banner form { display: flex; margin: 0; } .cookie_consent_banner .pub_btn { width: 100%; min-height: 44px; justify-content: center; padding: 0 12px; border-width: 1px; font-size: 13px; white-space: nowrap; } .cookie_consent_banner .cookie_btn_reject { border-color: #dbe5ea; background: #f4faff; color: #52605f; } .cookie_consent_banner .cookie_btn_reject:hover { border-color: #84908f; background: #f5fafd; } .cookie_consent_banner .cookie_btn_choose { border-color: #00353c; background: transparent; color: #00353c; } .cookie_consent_banner .cookie_btn_choose:hover { background: #f4faff; } .cookie_consent_banner .cookie_btn_accept { border-color: #00353c; background: #00353c; color: #fff; } .cookie_consent_banner .cookie_btn_accept:hover { border-color: #00282d; background: #00282d; } .cookie_preferences_dialog { width: min(560px, 100% - 28px); padding: 24px; border: 1px solid #dbe5ea; border-radius: 16px; background: #ffffff; color: #0a2a2f; } .cookie_preferences_dialog::backdrop { background: rgba(15, 31, 28, 0.58); } .cookie_preferences_dialog h2 { margin: 0 42px 18px 0; font: 600 25px/1.2 "Inter", sans-serif; } .cookie_preferences_dialog > form:not(.cookie_dialog_close) { display: grid; gap: 12px; } .cookie_preferences_dialog .cookie_dialog_close { position: absolute; top: 14px; right: 14px; } .cookie_preferences_dialog .cookie_dialog_close button { width: 38px; height: 38px; border: 1px solid #dbe5ea; border-radius: 9px; background: transparent; color: #0a2a2f; font-size: 22px; cursor: pointer; } .cookie_preferences_dialog .cookie_category { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px; border: 1px solid #dbe5ea; border-radius: 10px; } .cookie_preferences_dialog .cookie_category span { display: grid; gap: 4px; } .cookie_preferences_dialog .cookie_category small { color: #84908f; font: 400 13px/1.4 "Inter", sans-serif; } .cookie_preferences_dialog .cookie_category input { width: 20px; height: 20px; accent-color: #00353c; } .pub_footer_linklike { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: underline; cursor: pointer; } .commerce_user_orders .manage_settings_card { min-width: 0; } .commerce_order_list { display: grid; gap: 14px; } .commerce_order_card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--white_color); } .commerce_order_card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .commerce_order_card > header div { display: grid; gap: 3px; } .commerce_order_card > header span:not(.subscription_badge), .commerce_order_card > p { margin: 0; color: var(--text_color_lighter); font-size: 0.82rem; } .commerce_order_amounts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .commerce_order_amounts strong { color: var(--main_color); font-size: 1.3rem; } .commerce_order_amounts small { width: 100%; color: var(--text_color_lighter); } .commerce_order_amounts .commerce_original_price { color: var(--text_color_lighter); text-decoration: line-through; } .commerce_payment_instructions { display: grid; gap: 10px; } .commerce_payment_instructions > div { padding: 12px; border: 1px solid var(--border_color); border-radius: 8px; } .commerce_payment_instructions p { margin: 5px 0; } .commerce_payment_instructions code { display: block; padding: 8px; border-radius: 6px; background: var(--bg_color); white-space: normal; } .commerce_provider_routes { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color); } .commerce_provider_routes > div:first-child { display: grid; gap: 4px; } .commerce_provider_routes strong, .commerce_provider_routes p { margin: 0; } .commerce_provider_routes p { color: var(--text_color_lighter); font-size: 0.84rem; } .commerce_provider_actions { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; } .commerce_provider_actions form { display: flex; align-items: end; gap: 8px; margin: 0; } .commerce_provider_actions label { display: grid; gap: 4px; } .commerce_provider_actions label span { font-size: 0.8rem; } .commerce_payment_form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .commerce_payment_form label { display: grid; align-content: start; gap: 5px; } .commerce_payment_form button { align-self: end; } .commerce_coupon_field, .affiliate_link_field { display: grid; gap: 6px; } .affiliate_manage_page { display: grid; gap: 18px; width: 100%; max-width: 1180px; } .affiliate_manage_page .manage_settings_card { min-width: 0; } .affiliate_manage_page .manage_settings_card_header { margin-bottom: 0; } .affiliate_pause_notice { margin: 0; border: 1px solid var(--border_color); background: var(--white_color); color: var(--text_color_lighter1); } .affiliate_terms_summary { margin: 20px 20px 18px; padding: 0 14px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--bg_color_darker1); } .affiliate_terms_summary summary { display: flex; align-items: center; min-height: 44px; color: var(--main_color); font-weight: 600; cursor: pointer; } .affiliate_terms_summary p { max-height: 260px; margin: 0; padding: 12px 0 14px; overflow: auto; border-top: 1px solid var(--border_color_lighter); color: var(--text_color_lighter1); line-height: 1.55; white-space: normal; } .affiliate_application_form { gap: 18px; margin: 0; padding: 0 20px 20px; } .affiliate_application_form label { gap: 7px; } .affiliate_application_form textarea.form_input { min-height: 96px; margin: 0; resize: vertical; } .affiliate_application_form .plugin_field_wide textarea.form_input { min-height: 112px; } .affiliate_application_form label.affiliate_consent { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; min-height: 52px; padding: 14px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--bg_color_darker1); cursor: pointer; } .affiliate_application_form label.affiliate_consent:focus-within { border-color: var(--main_color); } .affiliate_application_form label.affiliate_consent input { width: 20px; height: 20px; flex: 0 0 20px; margin: 1px 0 0; accent-color: var(--main_color); } .affiliate_application_form label.affiliate_consent span { color: var(--text_color); font-size: 14px; font-weight: 500; line-height: 1.45; } .affiliate_application_form .affiliate_primary_action { justify-self: start; width: auto; min-width: 190px; min-height: 44px; margin: 0; padding: 0 18px; } .affiliate_status_card .affiliate_review_note { margin: 0; padding: 0 20px 18px; color: var(--text_color_lighter1); line-height: 1.5; } .affiliate_status_card .affiliate_link_field { margin: 0; padding: 0 20px 20px; } .affiliate_status_card .affiliate_link_field span { color: var(--text_color); font-size: 13px; font-weight: 600; } .affiliate_status_card .affiliate_link_field .form_input { margin: 0; } .affiliate_payout_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .affiliate_payout_grid .manage_settings_card > p, .affiliate_payout_grid .manage_settings_card > form, .affiliate_payout_grid .manage_settings_card > .manage_field_msg { margin: 0 20px 20px; } .affiliate_payout_grid form { display: grid; gap: 14px; } .affiliate_payout_grid label { display: grid; gap: 6px; } .affiliate_payout_grid .form_input { margin: 0; } .affiliate_payout_grid .manage_add_new_btn { justify-self: start; min-height: 40px; } .affiliate_table_card .sa_table_wrap { margin: 0 20px 20px; } .commerce_consent_settings { display: grid; gap: 16px; padding: 16px 20px 20px; } .commerce_consent_settings .cookie_preference_options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .commerce_consent_settings .cookie_preference_option { min-height: 86px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 15px; border: 1px solid var(--border_color); border-radius: 10px; background: var(--bg_color_darker); cursor: pointer; } .commerce_consent_settings .cookie_preference_option:hover, .commerce_consent_settings .cookie_preference_option:focus-within { border-color: var(--main_color_lighter2); background: var(--main_color_lighter5); } .commerce_consent_settings .cookie_preference_required { cursor: default; } .commerce_consent_settings .cookie_preference_required:hover { border-color: var(--border_color); background: var(--bg_color_darker); } .commerce_consent_settings .cookie_preference_copy { min-width: 0; display: grid; gap: 5px; } .commerce_consent_settings .cookie_preference_copy strong { color: var(--text_color); font-size: 14px; font-weight: 700; } .commerce_consent_settings .cookie_preference_copy small { color: var(--text_color_lighter1); font-size: 12px; line-height: 1.4; } .commerce_consent_settings .cookie_preference_name { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .commerce_consent_settings .cookie_required_badge { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 999px; background: var(--main_color_lighter5); color: var(--main_color_darker); font-size: 10px; font-weight: 700; } .commerce_consent_settings .cookie_preference_toggle { min-width: 52px; cursor: pointer; } .commerce_consent_settings .cookie_preference_toggle input:focus-visible + .settings_toggle_knob { outline: 2px solid var(--main_color); outline-offset: 3px; } .commerce_consent_settings .cookie_preference_required .cookie_preference_toggle { cursor: default; } .commerce_consent_settings .cookie_preference_required .cookie_preference_toggle .settings_toggle_knob { opacity: 0.72; } .commerce_consent_settings .cookie_preference_actions { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .commerce_consent_settings .cookie_preference_actions p { margin: 0; color: var(--text_color_lighter1); font-size: 12px; line-height: 1.4; } .commerce_consent_settings .cookie_preference_actions .button1 { min-width: 132px; min-height: 44px; white-space: nowrap; } .plugin_card_price del, .plugin_detail_price del { margin-right: 6px; color: #84908f; } .plugin_card_price small, .plugin_detail_price small { display: block; margin-top: 3px; color: #84908f; font-size: 12px; } .plugin_purchase_form { display: grid; gap: 8px; } .plugin_publisher_sales td small { display: block; margin-top: 4px; color: var(--text_color_lighter); } .commerce_admin_page .sa_page_head { align-items: flex-end; margin-bottom: 16px; } .commerce_admin_page .sa_page_head p { max-width: 760px; margin: 6px 0 0; color: var(--text_color_lighter1); line-height: 1.45; } .commerce_admin_page > .sa_page_tabs { margin-bottom: 20px; } .commerce_admin_page > .sa_card, .commerce_admin_page > form, .commerce_admin_page > .sa_stats { width: 100%; box-sizing: border-box; } .commerce_admin_page .sa_card h2 { margin: 0 0 14px; font-size: 1rem; } .commerce_admin_page .sa_card .sa_card_head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .commerce_admin_page .sa_card .sa_card_head h2 { margin: 0; } .commerce_admin_page .sa_table td { vertical-align: top; } .commerce_admin_page .sa_table td > small, .commerce_admin_page .sa_table td > a { display: block; margin-top: 4px; } .commerce_admin_page label { display: grid; align-content: start; gap: 6px; } .commerce_admin_page label > span { color: var(--text_color); font-size: 0.82rem; font-weight: 600; } .commerce_admin_page input:not([type=checkbox]):not([type=radio]), .commerce_admin_page select, .commerce_admin_page textarea { width: 100%; min-height: 40px; margin: 0; padding: 9px 11px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); color: var(--text_color); box-sizing: border-box; font: inherit; } .commerce_admin_page input:not([type=checkbox]):not([type=radio]):focus, .commerce_admin_page select:focus, .commerce_admin_page textarea:focus { border-color: var(--main_color); outline: none; } .commerce_admin_page textarea { min-height: 92px; resize: vertical; } .commerce_admin_page .commerce_filter_form { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(130px, 0.75fr)) auto; gap: 8px; align-items: center; margin: 0 0 16px; } .commerce_admin_page .commerce_pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; color: var(--text_color_lighter1); font-size: 0.82rem; } .commerce_admin_tabs { max-width: 100%; overflow-x: auto; scrollbar-width: thin; } .commerce_overview_stats { grid-template-columns: repeat(5, minmax(130px, 1fr)); } .commerce_rollout_card { display: grid; gap: 10px; } .commerce_rollout_card .sa_card_title, .commerce_rollout_card p { margin: 0; } .commerce_rollout_card form { margin-top: 4px; } .commerce_review_form { display: grid; gap: 6px; min-width: 190px; } .commerce_promotion_form, .commerce_settings_form { margin-bottom: 20px; align-items: start; } .commerce_promotion_form label, .commerce_settings_form label { display: grid; gap: 6px; } .commerce_promotion_form fieldset, .commerce_settings_form fieldset { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--border_color); border-radius: 8px; } .commerce_promotion_form > .sa_btn, .commerce_settings_form > .sa_btn { grid-column: 1/-1; justify-self: end; min-height: 40px; } .commerce_promotion_form { grid-template-columns: repeat(4, minmax(0, 1fr)); } .commerce_promotion_form fieldset { grid-column: span 2; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; min-height: 0; } .commerce_promotion_form fieldset legend { padding: 0 5px; font-weight: 700; } .commerce_promotion_form fieldset label { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; min-height: 42px; padding: 8px 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); box-sizing: border-box; } .commerce_promotion_form fieldset + label { grid-column: span 2; } .commerce_promotion_form > label:has(> input[type=checkbox]) { display: flex; flex-direction: row; align-items: center; gap: 9px; min-height: 42px; padding: 8px 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); box-sizing: border-box; } .commerce_promotion_form input[type=checkbox] { width: 20px !important; height: 20px !important; flex: 0 0 20px; margin: 0; padding: 0 !important; border-radius: 0; box-sizing: border-box; accent-color: var(--main_color); } .commerce_promotion_form input[type=checkbox]:checked::after { top: 2px; left: 6px; width: 5px; height: 10px; } .commerce_promotion_form > .sa_notice { grid-column: 1/-1; } .commerce_settings_form { grid-template-columns: repeat(4, minmax(0, 1fr)); } .commerce_settings_form > .sa_card { margin-bottom: 0; } .commerce_settings_form > .sa_card:first-of-type { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; padding: 16px; } .commerce_settings_form > .sa_card:first-of-type h2 { grid-column: 1/-1; margin-bottom: 2px; } .commerce_settings_form > .sa_card:first-of-type > label { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; min-height: 44px; padding: 9px 11px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--bg_color); box-sizing: border-box; } .commerce_settings_form > .sa_card:first-of-type input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; accent-color: var(--main_color); } .commerce_method_fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); } .commerce_method_fieldset legend { padding: 0 5px; font-weight: 700; } .commerce_admin_page details pre, .sa_table details pre { max-width: 520px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; } .subscription_billing_options { display: grid; gap: 8px; margin: 4px 0; } .subscription_billing_options label { display: flex; align-items: flex-start; gap: 9px; min-height: 52px; padding: 10px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); cursor: pointer; } .subscription_billing_options label:focus-within { border-color: var(--main_color); } .subscription_billing_options input { width: 18px; height: 18px; flex: 0 0 18px; margin: 2px 0 0; accent-color: var(--main_color); } .subscription_billing_options span { display: grid; gap: 3px; color: var(--text_color); font-size: 13px; font-weight: 500; } .subscription_billing_options span b { font-size: 13px; } .subscription_billing_options span small { margin: 0; color: #168353; font-weight: 700; } .subscription_payment_history, .sa_subscription_payment_history { min-width: 0; } .subscription_plan_perks { color: var(--text_color_lighter1); font-size: 12px; line-height: 1.45; } .subscription_plan_perks summary { min-height: 38px; display: flex; align-items: center; color: var(--main_color); font-weight: 700; cursor: pointer; } .subscription_plan_perks ul { margin: 2px 0 4px; padding-left: 18px; } .subscription_plan_perks li + li { margin-top: 4px; } #saSubscriptionPricing .sa_modal_card { max-width: 960px; } #saSubscriptionPricing .sa_modal_body { padding: 0; } .sa_subscription_pricing_form { display: grid; gap: 0; } .sa_subscription_pricing_form .sa_muted { margin: 0; line-height: 1.5; } .sa_subscription_pricing_form textarea { min-height: 110px; resize: vertical; } .sa_subscription_config_section { padding: 20px; border-bottom: 1px solid var(--border_color); } .sa_subscription_config_section:last-child { border-bottom: 0; } .sa_subscription_config_head { display: grid; gap: 5px; margin-bottom: 16px; } .sa_subscription_config_head h4 { margin: 0; color: var(--text_color); font-size: 1rem; } .sa_subscription_config_head p { margin: 0; color: var(--text_color_lighter1); font-size: 0.84rem; line-height: 1.45; } .sa_subscription_plan_config_list { display: grid; gap: 10px; } .sa_subscription_plan_config { border: 1px solid var(--border_color); border-radius: 10px; background: var(--white_color); overflow: hidden; } .sa_subscription_plan_config summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 14px; color: var(--text_color); cursor: pointer; box-sizing: border-box; } .sa_subscription_plan_config summary strong { font-size: 0.92rem; } .sa_subscription_plan_config summary span { color: var(--text_color_lighter1); font-size: 0.8rem; text-align: right; } .sa_subscription_plan_config[open] summary { border-bottom: 1px solid var(--border_color); } .sa_subscription_plan_config_fields { padding: 16px; background: var(--bg_color); } .sa_subscription_config_commit .sa_modal_actions { display: flex; justify-content: flex-end; } .sa_subscription_config_commit .sa_btn { min-height: 40px; } @media (max-width: 720px) { .affiliate_public_hero_inner, .affiliate_public_section { width: min(100% - 36px, 1100px); } .affiliate_public_hero_inner { grid-template-columns: 1fr; gap: 38px; padding: 48px 0; } .affiliate_public_section { padding: 52px 0; } .affiliate_public_section_head { align-items: flex-start; flex-direction: column; gap: 14px; } .affiliate_public_steps { grid-template-columns: 1fr; } .affiliate_public_steps article { min-height: 0; } .affiliate_public_rules { grid-template-columns: 1fr; padding: 26px 20px; } .affiliate_public_exclusions { padding: 24px 0 0; border-top: 1px solid #dbe5ea; border-left: 0; } .affiliate_public_visual figcaption { flex-wrap: wrap; gap: 8px 10px; } .affiliate_public_visual figcaption i { display: none; } .affiliate_public_terms { padding-top: 0; } .cookie_consent_banner { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 14px; } .cookie_consent_banner .cookie_consent_actions { display: grid; grid-template-columns: 1fr 1fr; } .cookie_consent_banner .cookie_consent_actions form:last-child { grid-column: 1/-1; } .cookie_consent_banner .pub_btn { width: 100%; justify-content: center; } .commerce_consent_settings { padding: 16px; } .commerce_consent_settings .cookie_preference_options { grid-template-columns: 1fr; } .commerce_consent_settings .cookie_preference_option { min-height: 76px; } .commerce_consent_settings .cookie_preference_actions { align-items: stretch; flex-direction: column; } .commerce_consent_settings .cookie_preference_actions .button1 { width: 100%; } .affiliate_payout_grid, .affiliate_application_form, .commerce_payment_form, .commerce_method_fieldset { grid-template-columns: 1fr; } .commerce_provider_actions { display: grid; } .commerce_provider_actions form, .commerce_provider_actions button { width: 100%; } .commerce_provider_actions form { display: grid; } .commerce_admin_page .sa_page_head { align-items: flex-start; } .commerce_admin_page .commerce_filter_form { grid-template-columns: 1fr; } .commerce_admin_page .commerce_pagination { justify-content: flex-start; } .commerce_promotion_form, .commerce_settings_form { grid-template-columns: 1fr; } .commerce_promotion_form fieldset, .commerce_promotion_form fieldset + label { grid-column: 1/-1; } .commerce_promotion_form fieldset { grid-template-columns: 1fr; } .commerce_promotion_form > .sa_btn { width: 100%; justify-content: center; } .commerce_settings_form > .sa_card:first-of-type { grid-template-columns: 1fr; } .commerce_settings_form > .sa_btn { width: 100%; justify-content: center; } .commerce_overview_stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } #saSubscriptionPricing { padding: 0; } #saSubscriptionPricing .sa_modal_card { min-height: 100dvh; border-radius: 0; } .sa_subscription_config_section { padding: 16px; } .sa_subscription_plan_config summary { align-items: flex-start; flex-direction: column; gap: 3px; } .sa_subscription_plan_config summary span { text-align: left; } .sa_subscription_config_commit .sa_btn { width: 100%; justify-content: center; } .pub_billing_toggle { width: 100%; border-radius: 14px; } .pub_billing_toggle label { flex: 1 1 0; } .pub_billing_toggle span { width: 100%; min-width: 0; box-sizing: border-box; border-radius: 10px; } .pub_pricing_controls { display: grid; gap: 10px; } .pub_promotion_preview > div { grid-template-columns: minmax(0, 1fr) auto; border-radius: 14px; } .pub_promotion_preview > div label { grid-column: 1/-1; padding: 6px 10px 2px; white-space: normal; } .pub_promotion_preview > div input, .pub_promotion_preview > div .pub_btn { border-radius: 10px; } .affiliate_terms_summary { margin: 16px; } .affiliate_application_form { gap: 14px; padding: 0 16px 16px; } .affiliate_application_form .affiliate_primary_action { width: 100%; } .affiliate_status_card .affiliate_review_note { padding: 0 16px 16px; } .affiliate_status_card .affiliate_link_field { padding: 0 16px 16px; } .affiliate_payout_grid { gap: 14px; } .affiliate_payout_grid .manage_settings_card > p, .affiliate_payout_grid .manage_settings_card > form, .affiliate_payout_grid .manage_settings_card > .manage_field_msg { margin: 0 16px 16px; } .affiliate_payout_grid .manage_add_new_btn { width: 100%; } .affiliate_table_card .sa_table_wrap { margin: 0 16px 16px; } .commerce_order_card > header { align-items: stretch; flex-direction: column; } .tree_generation_indicator { width: 12px; max-width: 12px; } .tree_generation_indicator .tree_generation_interval { width: 12px; max-width: 12px; font-size: 9px; } .onboarding_choice_grid { grid-template-columns: 1fr; } .onboarding_shell { padding: 22px 16px 18px; } .onboarding_launcher { right: 16px; bottom: 56px; } .onboarding_actions { flex-direction: column; align-items: stretch; } .onboarding_actions_primary { width: 100%; } .onboarding_skip, .onboarding_secondary { margin-left: 0; align-self: flex-end; } .onboarding_tour_tip { left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; max-height: min(42vh, 320px); } .onboarding_tour_tip .onboarding_actions { flex-direction: column; align-items: stretch; } .onboarding_tour_tip .onboarding_actions_primary { width: 100%; } .onboarding_tour_tip .onboarding_skip { margin-left: 0; align-self: flex-end; } .sa_onboarding_page .sa_onboarding_grid, .sa_onboarding_page .sa_onboarding_video_pair { grid-template-columns: 1fr; } .manage_account_identity_card { grid-template-columns: auto minmax(0, 1fr); padding: 16px; } .manage_account_identity_card .subscription_badge { grid-column: 1/-1; justify-self: start; } .manage_account_details_grid, .manage_account_action_grid { grid-template-columns: 1fr; } .manage_account_details_grid { padding: 2px 16px 16px; } .manage_account_readonly_action { align-items: flex-start; flex-direction: column; padding: 16px; } .manage_account_readonly_action .button1 { width: 100%; justify-content: center; } .manage_account_edit_dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); } .manage_account_edit_dialog .racinage_modal { max-height: calc(100dvh - 20px); padding: 16px; } .manage_account_edit_dialog .tree_modal_header { gap: 12px; padding-bottom: 16px; } .manage_account_edit_dialog .manage_account_card .manage_form_section { grid-template-columns: 1fr; gap: 14px; } .manage_account_edit_dialog .manage_account_card .manage_profile_photo_section { align-items: stretch; flex-direction: column; margin-top: 14px; padding: 16px; } .manage_account_edit_dialog .manage_account_card .manage_profile_identity { gap: 12px; } .manage_account_edit_dialog .manage_account_card .manage_photo_preview { width: 76px; height: 76px; } .manage_account_edit_dialog .manage_account_card .manage_profile_heading .manage_section_hint { white-space: normal; } .manage_account_edit_dialog .manage_account_card .manage_photo_edit { display: grid; grid-template-columns: 1fr; width: 100%; } .manage_account_edit_dialog .manage_account_card .manage_photo_edit .button1 { width: 100%; } } @media (min-width: 821px) { .manage_page .manage_sidebar .manage_sidebar_collapse { display: block; } .manage_page.manage_sidebar_collapsed { grid-template-columns: 76px minmax(0, 1fr); } .manage_page.manage_sidebar_collapsed .manage_sidebar { padding-inline: 10px; } .manage_page.manage_sidebar_collapsed .manage_sidebar .manage_profile_card { grid-template-columns: 1fr; padding: 6px; place-items: center; } .manage_page.manage_sidebar_collapsed .manage_sidebar .manage_profile_card .manage_profile_link { width: 44px; min-height: 44px; grid-template-columns: 38px; place-items: center; justify-content: center; } .manage_page.manage_sidebar_collapsed .manage_sidebar .manage_profile_card .manage_profile_info { display: none; } .manage_page.manage_sidebar_collapsed .manage_sidebar .manage_nav { width: calc(100% + 20px); margin-inline: -10px; padding-inline: 8px; place-items: center; scrollbar-gutter: stable; } .manage_page.manage_sidebar_collapsed .manage_sidebar .manage_nav .manage_nav_divider { width: 44px; min-height: 1px; display: block; margin-inline: 0; } .manage_page.manage_sidebar_collapsed .manage_sidebar .manage_nav .manage_nav_item { width: 44px; min-height: 44px; grid-template-columns: 22px; place-items: center; place-content: center; padding: 0; } .manage_page.manage_sidebar_collapsed .manage_sidebar .manage_nav .manage_nav_item .manage_nav_icon { width: 22px; place-items: center; } .manage_page.manage_sidebar_collapsed .manage_sidebar .manage_nav .manage_nav_item .manage_nav_text { display: none; } .manage_page.manage_sidebar_collapsed .manage_sidebar .manage_sidebar_collapse { margin-inline: -10px; padding-inline: 10px; } .manage_page.manage_sidebar_collapsed .manage_sidebar .manage_sidebar_collapse button { min-height: 44px; justify-content: center; padding-inline: 0; } .manage_page.manage_sidebar_collapsed .manage_sidebar .manage_sidebar_collapse button svg { transform: rotate(180deg); } .manage_page.manage_sidebar_collapsed .manage_sidebar .manage_sidebar_collapse button span { display: none; } } @media (prefers-reduced-motion: reduce) { #loading.htmx-request #loader_line { width: 100%; animation: none; } .gallery_undo_progress { animation: none; } .gallery_album_select_toggle i, .gallery_album_select_toggle i::after { transition: none; } } @media (min-width: 1201px) { .sa_activities_toolbar { grid-template-columns: minmax(0, 1fr) auto; } .sa_activities_toolbar .sa_activity_filter_form { grid-template-columns: repeat(5, minmax(0, 1fr)); } .sa_activities_toolbar .sa_activity_toolbar_actions { white-space: nowrap; } } /* Persons directory */ .persons_main { background: var(--bg_color); } .persons_page { background: var(--bg_color); } .persons_page_body { padding-top: 24px; } .persons_toolbar { position: sticky; top: 3.4375rem; z-index: 90; display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 18px; align-items: flex-end; background: var(--white_color); } .persons_toolbar .persons_filters { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: flex-end; gap: 8px; } .persons_toolbar .persons_filters label { min-width: 0; } .persons_toolbar .persons_filters label select { width: 100%; min-width: 0; } .persons_toolbar .persons_toolbar_end { display: flex; align-items: flex-end; gap: 8px; margin-left: auto; white-space: nowrap; } .persons_toolbar .persons_toolbar_end .page_count { justify-content: flex-end; min-width: 88px; } .persons_toolbar .persons_filter_toggle { display: none; min-height: 38px; } .family_tree_picker_new.family_tree_picker_manage_persons { width: 100%; box-sizing: border-box; text-decoration: none; } .family_tree_picker_new.family_tree_picker_manage_persons .family_tree_picker_new_icon { width: 18px; height: 18px; padding: 2px; border-radius: 5px; background: var(--main_color); fill: #fff; } .persons_results { min-height: 260px; } .persons_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; } .persons_grid.grouped { display: block; } .persons_group + .persons_group { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border_color_lighter); } .persons_group > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 0 4px; } .persons_group > header h2 { margin: 0; overflow: hidden; color: var(--text_color); font-size: 17px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .persons_group > header span { color: var(--text_color_lighter1); font-size: 12px; font-weight: 600; white-space: nowrap; } .persons_group_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; } .person_directory_card { position: relative; display: grid; gap: 13px; min-width: 0; padding: 15px; border: 1px solid var(--border_color); border-radius: 8px; background: var(--white_color); cursor: pointer; } .person_directory_card:hover { border-color: var(--main_color_lighter3); background: color-mix(in srgb, var(--white_color) 96%, var(--main_color) 4%); } .person_directory_card:has(.person_card_primary_action:focus-visible) { outline: 2px solid var(--main_color); outline-offset: 2px; } .person_directory_card .person_card_primary_action { position: absolute; z-index: 1; inset: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; } .person_directory_card .person_menu_btn { top: 10px; right: 10px; } .person_directory_card .person_directory_identity { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 11px; padding-right: 42px; } .person_directory_card .person_directory_identity img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: var(--bg_color_darker); } .person_directory_card .person_directory_identity h2 { margin: 0; overflow: hidden; color: var(--text_color); font-size: 15px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .person_directory_card .person_directory_identity .person_directory_name { display: flex; align-items: center; gap: 5px; min-width: 0; } .person_directory_card .person_directory_identity .person_directory_name h2 { min-width: 0; } .person_directory_card .person_directory_identity .person_directory_name .person_birthday_icon { flex: 0 0 15px; } .person_details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } .person_details > div { min-width: 0; display: grid; gap: 2px; } .person_details > div:first-child { grid-column: 1/-1; } .person_details small { overflow: hidden; color: var(--text_color_lighter1); font-size: 10px; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .person_details strong { overflow: hidden; color: var(--text_color); font-size: 12px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .person_action_menu { z-index: 8; } .person_action_menu.racinage_action_menu { width: 240px !important; min-width: 240px !important; } .person_family_badge, .person_tree_badge { display: inline-flex; align-items: center; width: fit-content; min-height: 22px; padding: 2px 7px; border-radius: 999px; background: var(--main_color_lighter5); color: var(--main_color_darker2); font-size: 11px; font-weight: 700; } .person_memberships { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 22px; } .person_tree_badge { border: 1px solid var(--border_color); background: var(--bg_color); color: var(--text_color_lighter); } .person_tree_badge.archived { border-style: dashed; } .person_tree_badge.unassigned { color: var(--secondary_color); } .persons_page[data-persons-view=list] .persons_grid:not(.grouped), .persons_page[data-persons-view=list] .persons_group_grid { display: grid; grid-template-columns: 1fr; gap: 6px; } .persons_page[data-persons-view=list] .person_directory_card { grid-template-columns: minmax(230px, 0.9fr) minmax(320px, 1.35fr) minmax(180px, 0.8fr); align-items: center; gap: 16px; padding: 10px 13px; } .persons_page[data-persons-view=list] .person_directory_card .person_directory_identity { grid-template-columns: 42px minmax(0, 1fr); } .persons_page[data-persons-view=list] .person_directory_card .person_directory_identity img { width: 42px; height: 42px; } .persons_page[data-persons-view=list] .person_directory_card .person_details { grid-template-columns: repeat(3, minmax(0, 1fr)); } .persons_page[data-persons-view=list] .person_directory_card .person_details > div:first-child { grid-column: auto; } .person_danger_action { min-height: 36px; padding: 7px 12px; border: 1px solid #c8453c; border-radius: 6px; background: transparent; color: #b8332b; cursor: pointer; font-weight: 700; } .person_danger_action:disabled { cursor: not-allowed; opacity: 0.55; } .persons_notice { margin-bottom: 12px; padding: 9px 12px; border: 1px solid #8ed8b1; border-radius: 6px; background: #eefaf3; color: #17633a; } .persons_notice.error { border-color: #e8aaa5; background: #fff2f1; color: #9d2d27; } .persons_loading { padding: 18px; color: var(--text_color_lighter); text-align: center; } .persons_sentinel { height: 2px; } .persons_modal { width: min(920px, 100vw - 28px); max-height: calc(100dvh - 28px); padding: 0; overflow: auto; } .persons_modal .persons_modal_header { display: flex; position: sticky; top: 0; z-index: 2; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--border_color); background: #fff; } .persons_modal .persons_modal_header h2 { margin: 0; color: var(--text_color); font-size: 19px; } .persons_modal .persons_modal_header p { margin: 5px 0 0; color: var(--text_color_lighter); font-size: 13px; } .persons_modal .persons_modal_close { display: grid; width: 36px; min-width: 36px; height: 36px; padding: 0; border: 1px solid var(--border_color); border-radius: 6px; background: transparent; color: var(--text_color); cursor: pointer; font-size: 22px; place-items: center; } .persons_modal .persons_modal_body { padding: 18px 20px 20px; } .persons_modal .persons_modal_actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border_color); } .persons_source_tabs { display: flex; gap: 4px; padding: 10px 20px 0; border-bottom: 1px solid var(--border_color); } .persons_source_tabs button { min-height: 38px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text_color_lighter); cursor: pointer; font-weight: 700; } .persons_source_tabs button.active { border-color: var(--main_color); color: var(--main_color); } .persons_family_select, .persons_delete_body > label { display: grid; gap: 6px; margin-bottom: 14px; } .persons_family_select > span, .persons_delete_body > label > span { color: var(--text_color_lighter); font-size: 12px; font-weight: 700; } .persons_batch { display: grid; gap: 12px; } .persons_batch_record { padding: 13px; border: 1px solid var(--border_color); border-radius: 7px; background: var(--bg_color); } .persons_batch_record .persons_batch_record_header { display: flex; justify-content: space-between; margin-bottom: 11px; color: var(--text_color); } .persons_batch_record .persons_batch_record_header button { border: 0; background: transparent; color: #b8332b; cursor: pointer; } .persons_form_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .persons_form_grid label { display: grid; gap: 5px; min-width: 0; } .persons_form_grid label.wide { grid-column: span 2; } .persons_form_grid label > span { color: var(--text_color_lighter); font-size: 11px; font-weight: 700; } .persons_form_grid label > small { color: var(--text_color_lighter); font-size: 10px; } .persons_form_grid input, .persons_form_grid select { width: 100%; min-width: 0; box-sizing: border-box; } .persons_add_another { margin-top: 12px; } .persons_duplicate_review { margin-top: 12px; padding: 11px 12px; border: 1px solid var(--secondary_color_lighter4); border-radius: 7px; background: #fff8f1; color: var(--text_color); } .persons_duplicate_review > p { margin: 5px 0 10px; color: var(--text_color_lighter); font-size: 12px; } .persons_form_feedback { min-height: 18px; margin: 10px 0 0; color: #17633a; font-size: 12px; } .persons_form_feedback.error { color: #b8332b; } .persons_import_drop { display: grid; min-height: 150px; padding: 20px; border: 1px dashed var(--main_color); border-radius: 7px; background: var(--main_color_lighter5); color: var(--text_color); cursor: pointer; text-align: center; place-content: center; } .persons_import_drop input { margin: 0 auto 12px; } .persons_import_drop small { margin-top: 5px; color: var(--text_color_lighter); } .persons_import_summary { margin-bottom: 14px; padding: 12px; border: 1px solid var(--border_color); border-radius: 7px; background: var(--bg_color); } .persons_import_summary p { margin: 5px 0; color: var(--text_color_lighter); } .persons_mapping_group { display: grid; gap: 8px; margin-bottom: 15px; } .persons_mapping_group h3 { margin: 0 0 2px; color: var(--text_color); font-size: 14px; } .persons_mapping_group label { display: grid; grid-template-columns: minmax(150px, 0.7fr) minmax(190px, 1fr); align-items: center; gap: 10px; } .persons_checkbox_row { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; } .persons_checkbox_row input { width: 16px; height: 16px; margin-top: 2px; } .persons_checkbox_row span { display: grid; gap: 2px; } .persons_checkbox_row strong { color: var(--text_color); font-size: 13px; } .persons_checkbox_row small { color: var(--text_color_lighter); font-size: 11px; line-height: 1.45; } .persons_export_body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.9fr); gap: 18px; } .persons_export_body .persons_export_actions, .persons_export_body .persons_form_feedback { grid-column: 1/-1; } .persons_export_section { min-width: 0; } .persons_export_section h3 { margin: 0 0 9px; color: var(--text_color); font-size: 14px; } .persons_export_all { border-bottom: 1px solid var(--border_color); } .persons_export_families { display: grid; gap: 8px; max-height: 330px; padding-top: 8px; overflow: auto; } .persons_export_family { display: grid; gap: 5px; margin: 0; padding: 9px 10px; border: 1px solid var(--border_color); border-radius: 7px; } .persons_export_family legend { padding: 0 5px; font-weight: 700; } .persons_export_family label { display: flex; align-items: center; gap: 7px; color: var(--text_color_lighter); font-size: 12px; } .persons_export_type { grid-column: 2; } .persons_export_type label { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; } .persons_export_type p { color: var(--text_color_lighter); font-size: 11px; line-height: 1.5; } .person_detail_identity { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 14px; margin-bottom: 16px; } .person_detail_identity img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; } .person_detail_identity h3 { margin: 0; color: var(--text_color); } .person_detail_identity p { margin: 4px 0 0; color: var(--text_color_lighter); } .person_detail_body dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border_color); border-radius: 7px; background: var(--border_color); } .person_detail_body dl div { padding: 9px 10px; background: #fff; } .person_detail_body dl dt { color: var(--text_color_lighter); font-size: 10px; font-weight: 700; text-transform: uppercase; } .person_detail_body dl dd { margin: 3px 0 0; overflow-wrap: anywhere; color: var(--text_color); font-size: 13px; } .person_detail_trees { display: grid; gap: 6px; margin-top: 13px; } .person_detail_trees > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--border_color); border-radius: 6px; } .person_detail_trees > div span { display: grid; gap: 2px; } .person_detail_trees > div small { color: var(--text_color_lighter); } @media (max-width: 1180px) { .persons_toolbar { grid-template-columns: auto minmax(0, 1fr); } .persons_toolbar .persons_filter_toggle { display: inline-flex; } .persons_toolbar .persons_filters { display: none; grid-column: 1/-1; order: 5; } .persons_toolbar .persons_filters.open { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .persons_toolbar .persons_toolbar_end { margin-left: auto; } } @media (max-width: 760px) { .persons_toolbar { padding: 10px; } .persons_toolbar .persons_toolbar_end { flex: 1 1 100%; flex-wrap: wrap; justify-content: space-between; margin-left: 0; } .persons_toolbar .persons_toolbar_end .page_count { margin-left: auto; } .persons_toolbar .persons_filters.open { grid-template-columns: repeat(2, minmax(0, 1fr)); } .persons_toolbar .persons_filters.open label { min-width: 0; } .persons_page_body { padding: 20px 0 32px; } .persons_page[data-persons-view=list] .person_directory_card { grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr); } .persons_page[data-persons-view=list] .person_directory_card .person_memberships { grid-column: 1/-1; } .persons_form_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .persons_export_body { grid-template-columns: 1fr; } .persons_export_type { grid-column: 1; } } @media (max-width: 520px) { .persons_toolbar .persons_filters.open { grid-template-columns: 1fr; } .persons_toolbar .persons_toolbar_end { align-items: stretch; } .persons_toolbar .persons_toolbar_end .persons_group_select { flex: 1 1 100%; } .persons_toolbar .persons_toolbar_end .page_count { justify-content: flex-start; margin-left: 0; } .persons_grid { grid-template-columns: 1fr; } .persons_page[data-persons-view=list] .person_directory_card { grid-template-columns: 1fr; } .persons_page[data-persons-view=list] .person_directory_card .person_details { grid-template-columns: repeat(2, minmax(0, 1fr)); } .persons_page[data-persons-view=list] .person_directory_card .person_details > div:first-child { grid-column: 1/-1; } .persons_page[data-persons-view=list] .person_directory_card .person_memberships { grid-column: 1; } .persons_modal { width: calc(100vw - 14px); max-height: calc(100dvh - 14px); } .persons_modal .persons_modal_header, .persons_modal .persons_modal_body { padding: 14px; } .persons_form_grid { grid-template-columns: 1fr; } .persons_form_grid label.wide { grid-column: span 1; } .persons_mapping_group label { grid-template-columns: 1fr; gap: 4px; } .person_detail_body dl { grid-template-columns: 1fr; } }