:root { --ink: #24211f; --muted: #716b66; --paper: #fbf8f4; --white: #fff; --line: #e7dfd7; --accent: #936954; --accent-dark: #67483a; --success: #417459; --danger: #a44040; --radius: 22px; --shadow: 0 24px 60px rgba(43, 33, 26, .1); } select { -webkit-appearance: none; appearance: none; padding-right: 44px !important; background-image: linear-gradient(45deg, transparent 50%, #746b65 50%), linear-gradient(135deg, #746b65 50%, transparent 50%) !important; background-position: calc(100% - 19px) calc(50% - 1px), calc(100% - 14px) calc(50% - 1px) !important; background-repeat: no-repeat !important; background-size: 5px 5px !important; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } select:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 55%, #d9d0c8); } select:focus-visible { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } select:disabled { cursor: not-allowed; opacity: .62; } select option { color: var(--ink); background: #fff; } .editor_select i { display: none; } select.custom_select_native { width: 1px !important; height: 1px !important; min-height: 1px !important; position: absolute !important; inset: auto !important; overflow: hidden !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; } .custom_select { width: 100%; min-width: 0; position: relative; } .custom_select_trigger { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border: 1px solid #d9d0c8; border-radius: 11px; color: var(--ink); background: #fff; box-shadow: 0 1px 0 rgba(46,35,29,.02); cursor: pointer; font: inherit; text-align: left; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .custom_select_trigger:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 55%, #d9d0c8); background: #fffdfb; } .custom_select_trigger:focus-visible, .custom_select.is_open .custom_select_trigger { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } .custom_select_trigger:disabled { cursor: not-allowed; opacity: .62; } .custom_select_value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .custom_select_arrow { width: 9px; height: 9px; flex: 0 0 9px; transform: translateY(-2px) rotate(45deg); border-right: 1.5px solid #746b65; border-bottom: 1.5px solid #746b65; transition: transform .18s ease; } .custom_select.is_open .custom_select_arrow { transform: translateY(2px) rotate(225deg); } .custom_select_menu { position: fixed; z-index: 1300; overflow-y: auto; padding: 6px; border: 1px solid #ded4cb; border-radius: 14px; background: rgba(255,255,255,.98); box-shadow: 0 18px 45px rgba(43,33,26,.18); backdrop-filter: blur(16px); opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: top center; pointer-events: none; transition: opacity .13s ease, transform .13s ease; } .custom_select_menu.opens_above { transform: translateY(6px) scale(.985); transform-origin: bottom center; } .custom_select_menu.is_open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .custom_select_option { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 0; border-radius: 9px; color: var(--ink); background: transparent; cursor: pointer; font: inherit; font-size: 13px; text-align: left; transition: color .15s ease, background-color .15s ease; } .custom_select_option:hover, .custom_select_option.is_active { color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 10%, #fff); } .custom_select_option.is_selected { color: var(--accent-dark); font-weight: 700; } .custom_select_option i { color: var(--accent); font-size: 14px; font-style: normal; opacity: 0; transform: scale(.65); transition: opacity .15s ease, transform .15s ease; } .custom_select_option.is_selected i { opacity: 1; transform: scale(1); } .custom_select_option:disabled { cursor: not-allowed; opacity: .42; } .editor_panel .custom_select_trigger { min-height: 52px; padding: 12px 15px; border-radius: 13px; } .publication_filter label { min-width: 220px; } .publication_filter .custom_select_trigger { min-height: 42px; padding: 0 15px; border-color: var(--line); border-radius: 999px; } .publication_filter[aria-busy="true"] .custom_select { opacity: .62; pointer-events: none; } [hidden] { display: none !important; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-gutter: stable; } body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; } button, input, textarea, select { font: inherit; } textarea { resize: none; } a { color: inherit; } img { max-width: 100%; } .container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; } .narrow { width: min(700px, calc(100% - 40px)); } .site_header { position: sticky; top: 0; z-index: 20; background: rgba(251, 248, 244, .88); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(231, 223, 215, .8); } .site_header_inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .site_logo { font-family: Georgia, serif; font-size: 30px; font-weight: 700; text-decoration: none; letter-spacing: -.04em; } .site_logo span { color: var(--accent); } .site_header_menu { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-left: 36px; } .site_nav { display: flex; align-items: center; gap: 24px; } .site_nav > a, .site_nav_dropdown_link { position: relative; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 650; } .site_nav > a::after, .site_nav_dropdown_link::after { content: ""; height: 1px; position: absolute; right: 0; bottom: -5px; left: 0; transform: scaleX(0); background: var(--accent); transition: transform .2s ease; } .site_nav > a:hover::after, .site_nav > a:focus-visible::after, .site_nav_dropdown:hover .site_nav_dropdown_link::after, .site_nav_dropdown.is_open .site_nav_dropdown_link::after, .site_nav_dropdown.is_current .site_nav_dropdown_link::after { transform: scaleX(1); } .site_nav_dropdown { position: relative; } .site_nav_dropdown::after { width: 100%; height: 16px; position: absolute; top: 100%; left: 0; content: ""; pointer-events: none; } .site_nav_dropdown.is_open::after { pointer-events: auto; } .site_nav_dropdown_primary { display: flex; align-items: center; gap: 7px; } .site_nav_dropdown_toggle { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: #eee5dd; cursor: pointer; transition: color .2s ease, background-color .2s ease, transform .2s ease; } .site_nav_dropdown_toggle > svg { width: 10px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease; } .site_nav_dropdown.is_open .site_nav_dropdown_toggle > svg { transform: rotate(180deg); } .site_nav_dropdown_toggle:hover, .site_nav_dropdown_toggle:focus-visible { color: #fff; background: var(--accent); transform: translateY(-1px); outline: none; } .site_nav_dropdown_link:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent); outline-offset: 6px; border-radius: 3px; } .site_nav_dropdown_menu { width: 350px; position: absolute; z-index: 40; top: calc(100% + 15px); left: -22px; display: grid; gap: 5px; padding: 8px; border: 1px solid rgba(218,205,195,.9); border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: 0 22px 55px rgba(45,34,27,.16); backdrop-filter: blur(18px); visibility: hidden; opacity: 0; transform: translateY(-8px) scale(.985); transform-origin: top left; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; } .site_nav_dropdown.is_open .site_nav_dropdown_menu { visibility: visible; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .site_nav_dropdown_menu a { min-height: 68px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; transition: color .18s ease, background-color .18s ease, transform .18s ease; } .site_nav_dropdown_menu a:hover, .site_nav_dropdown_menu a:focus-visible, .site_nav_dropdown_menu a.is_active { color: var(--accent-dark); background: #f6f0eb; outline: none; } .site_nav_dropdown_menu a:hover, .site_nav_dropdown_menu a:focus-visible { transform: translateX(2px); } .site_nav_dropdown_icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--accent); background: #f0e6df; border-radius: 12px; transition: color .18s ease, background-color .18s ease, transform .18s ease; } .site_nav_dropdown_menu a:hover .site_nav_dropdown_icon, .site_nav_dropdown_menu a:focus-visible .site_nav_dropdown_icon, .site_nav_dropdown_menu a.is_active .site_nav_dropdown_icon { color: #fff; background: var(--accent); transform: rotate(-3deg) scale(1.04); } .site_nav_dropdown_icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .site_nav_dropdown_menu strong, .site_nav_dropdown_menu small { display: block; } .site_nav_dropdown_menu strong { margin-bottom: 2px; font-size: 13px; } .site_nav_dropdown_menu small { color: var(--muted); font-size: 10px; line-height: 1.35; } .site_nav_dropdown_menu i { color: var(--accent); font-size: 18px; font-style: normal; transition: transform .18s ease; } .site_nav_dropdown_menu a:hover i, .site_nav_dropdown_menu a:focus-visible i { transform: translateX(3px); } .header_actions { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid rgba(218,205,195,.82); border-radius: 999px; background: rgba(255,255,255,.68); box-shadow: 0 7px 24px rgba(57,43,34,.06); } .header_account_group { display: flex; align-items: center; gap: 2px; } .header_account_group form { display: flex; margin: 0; } .header_my_invitations, .header_create_button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; text-decoration: none; white-space: nowrap; font-size: 12px; font-weight: 700; transition: color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease, filter .22s ease; } .header_my_invitations { padding: 0 14px 0 7px; color: #514944; } .header_my_invitations:hover { color: var(--accent-dark); background: #f2eae4; transform: translateY(-1px); } .header_action_icon { width: 29px; height: 29px; display: grid; place-items: center; color: var(--accent); background: #eee4dc; border-radius: 50%; transition: color .22s ease, background-color .22s ease, transform .22s ease; } .header_action_icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .header_my_invitations:hover .header_action_icon { color: #fff; background: var(--accent); transform: rotate(-5deg) scale(1.04); } .header_logout_button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #81766f; background: transparent; cursor: pointer; transition: color .22s ease, background-color .22s ease, transform .22s ease; } .header_logout_button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .header_logout_button:hover, .header_logout_button:focus-visible { color: #fff; background: var(--accent); outline: none; transform: rotate(-4deg); } .header_create_button { padding: 0 13px 0 8px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 7px 17px rgba(103,72,58,.22); } .header_create_mark { width: 27px; height: 27px; position: relative; display: block; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; transition: transform .22s ease, background-color .22s ease; } .header_create_mark::before, .header_create_mark::after { width: 11px; height: 1.5px; position: absolute; top: 50%; left: 50%; content: ""; border-radius: 999px; background: currentColor; transform: translate(-50%, -50%); } .header_create_mark::after { transform: translate(-50%, -50%) rotate(90deg); } .header_create_button > svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease; } .header_create_button:hover { color: #fff; box-shadow: 0 10px 24px rgba(80,53,42,.28); filter: brightness(.9); transform: translateY(-2px); } .header_create_button:hover .header_create_mark { background: rgba(255,255,255,.12); transform: rotate(90deg); } .header_create_button:hover > svg { transform: translateX(3px); } .header_my_invitations:focus-visible, .header_create_button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 22%, transparent); outline-offset: 2px; } .menu_toggle { width: 44px; height: 44px; position: relative; display: none; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #eee5dd; cursor: pointer; } .menu_toggle span { width: 20px; height: 2px; position: absolute; top: 50%; left: 50%; display: block; margin: 0; border-radius: 999px; background: var(--ink); transition: transform .22s ease, opacity .18s ease; } .menu_toggle span:nth-child(1) { transform: translate(-50%, -7px); } .menu_toggle span:nth-child(2) { transform: translate(-50%, -50%); } .menu_toggle span:nth-child(3) { transform: translate(-50%, 5px); } .menu_toggle[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } .menu_toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translate(-50%, -50%) scaleX(0); } .menu_toggle[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); } .button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; border: 0; border-radius: 999px; color: #fff; background-color: var(--accent); font-weight: 700; text-decoration: none; cursor: pointer; transition: color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease, filter .22s ease; } .button:hover { background-color: var(--accent-dark); transform: translateY(-2px); } .button_small { min-height: 42px; padding-inline: 19px; } .button_secondary { color: var(--ink); background: #eee5dd; } .button_secondary:hover { color: #fff; } .button_full { width: 100%; } .button_row { display: flex; gap: 10px; flex-wrap: wrap; } .payment_link_button { gap: 11px; color: #fff; background: linear-gradient(135deg, #4b8a66, #2f6849); box-shadow: 0 10px 24px rgba(47,104,73,.22); transition: color .22s ease, box-shadow .22s ease, transform .22s ease, filter .22s ease; } .payment_link_button::after { width: 8px; height: 8px; flex: 0 0 8px; content: ""; border-top: 1.7px solid currentColor; border-right: 1.7px solid currentColor; transform: rotate(45deg); transition: transform .22s ease; } .payment_link_button:hover, .payment_link_button:focus-visible { color: #fff; box-shadow: 0 15px 30px rgba(38,91,61,.3); filter: brightness(.9); outline: none; transform: translateY(-2px); } .payment_link_button:hover::after, .payment_link_button:focus-visible::after { transform: translateX(3px) rotate(45deg); } .text_link { font-weight: 700; text-underline-offset: 4px; } .hero { min-height: 690px; position: relative; overflow: hidden; display: flex; align-items: center; padding: 90px 0; background: radial-gradient(circle at 80% 25%, #efe0d7 0, transparent 38%), linear-gradient(135deg, #fbf8f4, #f3ebe4); } .hero::before { content: ""; position: absolute; width: 430px; height: 430px; right: -120px; bottom: -180px; border: 1px solid #d8c7bb; border-radius: 50%; } .hero_inner { position: relative; z-index: 2; } .eyebrow { margin: 0 0 14px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } h1, h2, h3, p { margin-top: 0; } h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.04; letter-spacing: -.035em; } .hero h1 { max-width: 730px; margin-bottom: 24px; font-size: clamp(50px, 7vw, 94px); } .hero_text { max-width: 570px; margin-bottom: 34px; color: var(--muted); font-size: 20px; } .hero_actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .hero_card { position: absolute; z-index: 3; right: max(5vw, 40px); top: 50%; width: 320px; height: 450px; transform: translateY(-50%) rotate(5deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 40px; color: #fff; background: linear-gradient(150deg, #b58a74, #6f4d3c); border: 10px solid rgba(255,255,255,.7); box-shadow: var(--shadow); text-align: center; } .hero_card::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.45); } .hero_card strong { position: relative; font: 500 46px/1 Georgia, serif; } .hero_card span { position: relative; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; } .section { padding: 100px 0; } .section_no_top { padding-top: 0; } .section_tinted { background: #eee5dd; } .section_heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 40px; } .section_heading h2 { margin: 0; font-size: clamp(38px, 5vw, 62px); } .template_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .template_catalog_chooser { padding: 34px 0 0; } .template_catalog_chooser_panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.65fr); align-items: center; gap: 28px; padding: 28px; border: 1px solid rgba(255,255,255,.08); border-radius: 26px; color: #fff; background: linear-gradient(135deg, #2f2926 0%, #3d312c 58%, #563d32 100%); box-shadow: 0 24px 62px rgba(48,36,29,.18); } .template_catalog_chooser_panel::before { width: 330px; height: 330px; position: absolute; top: -235px; left: 16%; content: ""; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; pointer-events: none; } .template_catalog_chooser_panel::after { width: 220px; height: 220px; position: absolute; right: -115px; bottom: -150px; content: ""; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; pointer-events: none; } .template_catalog_chooser_copy, .template_catalog_chooser_options { position: relative; z-index: 1; } .template_catalog_chooser_copy .eyebrow { margin-bottom: 8px; color: #d9aa91; } .template_catalog_chooser_copy h1 { max-width: 390px; margin: 0 0 9px; color: #fff; font-size: clamp(31px, 3.2vw, 44px); } .template_catalog_chooser_copy > p:last-child { max-width: 390px; margin: 0; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.6; } .template_catalog_chooser_options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .template_catalog_chooser_link { min-width: 0; min-height: 112px; position: relative; overflow: hidden; display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 16px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; color: #fff; background: rgba(255,255,255,.07); text-decoration: none; box-shadow: inset 0 1px rgba(255,255,255,.06); transition: color .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.22,.61,.36,1); } .template_catalog_chooser_link:nth-child(1) { animation: template_chooser_in .5s .08s backwards; } .template_catalog_chooser_link:nth-child(2) { animation: template_chooser_in .5s .15s backwards; } .template_catalog_chooser_link:nth-child(3) { animation: template_chooser_in .5s .22s backwards; } .template_catalog_chooser_link:nth-child(4) { animation: template_chooser_in .5s .29s backwards; } .template_catalog_chooser_link:nth-child(5) { animation: template_chooser_in .5s .36s backwards; } .template_catalog_chooser_link:nth-child(6) { animation: template_chooser_in .5s .43s backwards; } .template_catalog_chooser_link.is_current { border-color: rgba(232,192,170,.33); background: rgba(232,192,170,.12); } .template_catalog_chooser_link::before { height: 2px; position: absolute; top: 0; right: 18px; left: 18px; content: ""; background: linear-gradient(90deg, transparent, #d8a88e, transparent); opacity: 0; transform: scaleX(.3); transition: opacity .25s ease, transform .35s ease; } .template_catalog_chooser_link:hover, .template_catalog_chooser_link:focus-visible { color: var(--ink); border-color: rgba(255,255,255,.76); background: #fff; box-shadow: 0 16px 34px rgba(20,14,12,.24); outline: none; transform: translateY(-5px); } .template_catalog_chooser_link:hover::before, .template_catalog_chooser_link:focus-visible::before { opacity: 1; transform: scaleX(1); } .template_catalog_chooser_icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; color: #e4bca7; background: rgba(255,255,255,.08); transition: color .25s ease, background-color .25s ease, transform .3s ease; } .template_catalog_chooser_icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .template_catalog_chooser_link:hover .template_catalog_chooser_icon, .template_catalog_chooser_link:focus-visible .template_catalog_chooser_icon { color: #fff; background: var(--accent); transform: rotate(-4deg) scale(1.05); } .template_catalog_chooser_label { min-width: 0; display: grid; gap: 5px; } .template_catalog_chooser_label strong { overflow: hidden; font: 500 18px/1.08 Georgia, serif; text-overflow: ellipsis; } .template_catalog_chooser_label small { overflow: hidden; color: rgba(255,255,255,.55); font-size: 10px; font-weight: 750; line-height: 1.3; text-overflow: ellipsis; transition: color .25s ease; } .template_catalog_chooser_link:hover .template_catalog_chooser_label small, .template_catalog_chooser_link:focus-visible .template_catalog_chooser_label small { color: var(--muted); } .template_catalog_chooser_arrow { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .52; transition: opacity .2s ease, transform .25s ease; } .template_catalog_chooser_link:hover .template_catalog_chooser_arrow, .template_catalog_chooser_link:focus-visible .template_catalog_chooser_arrow { opacity: 1; transform: translateX(3px); } .template_catalog_section { scroll-margin-top: 92px; padding: 48px 0 105px; } .template_catalog_groups { display: grid; gap: 72px; } .template_catalog_group { min-width: 0; } .template_catalog_group_heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 470px); align-items: end; gap: 44px; margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); } .template_catalog_group_heading .eyebrow { margin-bottom: 7px; } .template_catalog_group_heading h1, .template_catalog_group_heading h2 { margin: 0; font-size: clamp(31px, 3.6vw, 45px); } .template_catalog_group_heading > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; } .template_catalog_category_heading { margin-bottom: 20px; } .template_catalog_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; align-items: stretch; } .template_catalog_card { min-width: 0; display: flex; flex-direction: column; border: none; background: none; box-shadow: none; animation: template_card_in .55s backwards; transition: transform .25s ease; } .template_catalog_card:nth-child(2) { animation-delay: .07s; } .template_catalog_card:nth-child(3) { animation-delay: .14s; } .template_catalog_card:nth-child(4) { animation-delay: .21s; } .template_catalog_card:nth-child(5) { animation-delay: .28s; } .template_catalog_card:nth-child(6) { animation-delay: .35s; } .template_catalog_card:hover { transform: translateY(-8px); } .template_catalog_showcase { --template-preview-height: 420px; height: var(--template-preview-height); position: relative; overflow: hidden; isolation: isolate; background: transparent; } .template_catalog_image_window { height: 100%; position: relative; overflow: hidden; } .template_catalog_deck_slide { position: absolute; inset: 0; overflow: hidden; background: color-mix(in srgb, var(--card-color) 10%, #eee8e3); } .template_catalog_deck_slide:not(:first-child) { display: none; } .template_catalog_image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; transform: none; } .template_catalog_showcase::after { display: none; } .template_catalog_image_action { position: absolute; z-index: 5; inset: 0; display: block; padding: 0; border: 0; background: transparent; cursor: zoom-in; } .template_catalog_image_action:focus-visible { outline: none; } .template_catalog_showcase:has(.template_catalog_image_action:focus-visible) .template_catalog_deck_slide[data-deck-position="active"] { outline: 3px solid var(--accent); outline-offset: 3px; } .template_catalog_card:has(.template_catalog_showcase:not(.has_deck)) { overflow: hidden; border: 1px solid rgba(221,211,203,.95); border-radius: 22px; background: #fff; box-shadow: 0 14px 38px rgba(48,36,29,.09); } .template_catalog_showcase:not(.has_deck) { --template-preview-height: 500px; width: min(360px, calc(100% - 28px)); margin: 14px auto 0; border: 1px solid color-mix(in srgb, var(--card-color) 24%, rgba(221,211,203,.95)); border-radius: 18px 18px 12px 12px; background: linear-gradient(155deg, color-mix(in srgb, var(--card-color) 10%, #fff), #f4efeb); box-shadow: 0 12px 28px rgba(48,36,29,.12); } .template_catalog_showcase:not(.has_deck) .template_catalog_image_window, .template_catalog_showcase:not(.has_deck) .template_catalog_deck_slide, .template_catalog_showcase:not(.has_deck) .template_catalog_image { border-radius: inherit; } .template_catalog_showcase:not(.has_deck) + .template_catalog_body { z-index: 7; margin-top: -18px; border: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 22px rgba(48,36,29,.08); } @media (hover: hover) and (pointer: fine) and (min-width: 601px) { .template_catalog_showcase.has_deck { z-index: 1; overflow: visible; padding: 17px 38px 0; margin-bottom: -20px; } .template_catalog_showcase.has_deck .template_catalog_image_window { overflow: visible; perspective: 1100px; } .template_catalog_showcase.has_deck .template_catalog_deck_slide { display: block; isolation: isolate; border: 1px solid rgba(255,255,255,.72); border-radius: 16px 16px 8px 8px; backface-visibility: hidden; box-shadow: 0 16px 38px rgba(47,34,27,.18); transform-origin: 50% 108%; transition: opacity .38s ease, transform .62s cubic-bezier(.2,.72,.2,1), box-shadow .45s ease; } .template_catalog_showcase.has_deck .template_catalog_deck_slide .template_catalog_image { border-radius: inherit; } .template_catalog_showcase.has_deck:hover .template_catalog_deck_slide { will-change: transform; } .template_catalog_showcase.has_deck .template_catalog_deck_slide[data-deck-position="active"] { z-index: 3; opacity: 1; transform: translate3d(0,0,24px) rotate(0deg) scale(1); box-shadow: 0 20px 46px rgba(47,34,27,.22); } .template_catalog_showcase.has_deck .template_catalog_deck_slide[data-deck-position="next"] { z-index: 2; opacity: .94; transform: translate3d(18px,11px,0) rotate(3.7deg) scale(.975); } .template_catalog_showcase.has_deck .template_catalog_deck_slide[data-deck-position="back"] { z-index: 1; opacity: .82; transform: translate3d(-18px,15px,-16px) rotate(-4deg) scale(.955); } .template_catalog_showcase.has_deck + .template_catalog_body { z-index: 7; } } @media (min-width: 601px) and (max-width: 750px) { .template_catalog_card .template_catalog_showcase { --template-preview-height: 400px; } } .template_catalog_body { flex: 1; position: relative; display: grid; grid-template-rows: auto auto; align-content: space-between; gap: 16px; padding: 18px; border: 1px solid rgba(221,211,203,.95); border-radius: 22px; background: #fff; box-shadow: 0 9px 12px rgba(48,36,29,.1); } .template_catalog_heading { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 15px; border-bottom: 1px solid var(--line); } .template_catalog_heading h2 { min-width: 0; margin: 0; font-size: 25px; line-height: 1.08; } .template_catalog_price { flex: 0 0 auto; position: relative; display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 1px 9px 14px; color: var(--ink); white-space: nowrap; } .template_catalog_price::before { width: 6px; height: 6px; position: absolute; bottom: 0; left: 0; content: ""; border-radius: 50%; background: color-mix(in srgb, var(--card-color) 72%, var(--accent-dark)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--card-color) 13%, transparent); } .template_catalog_price::after { height: 1px; position: absolute; right: 0; bottom: 2px; left: 13px; content: ""; background: linear-gradient(90deg, color-mix(in srgb, var(--card-color) 70%, var(--accent-dark)), transparent); } .template_catalog_price span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .template_catalog_price strong { color: color-mix(in srgb, var(--card-color) 60%, var(--ink)); font: 600 21px/1 Georgia, "Times New Roman", serif; letter-spacing: -.02em; } .template_catalog_actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .template_create_form { width: 100%; display: flex; margin: 0; } .template_create_form > button { width: 100%; } .template_create_round_form { width: auto; flex: 0 0 48px; } .template_catalog_preview_button, .template_catalog_create_button { min-height: 45px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border-radius: 12px; font: inherit; font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; } .template_catalog_preview_button { border: 1px solid var(--line); color: var(--ink); background: #fff; } .template_catalog_preview_button svg, .template_catalog_create_button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .template_catalog_preview_button:hover, .template_catalog_preview_button:focus-visible { color: var(--accent-dark); border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); background: #f7f1ec; outline: none; transform: translateY(-2px); } .template_catalog_create_button { border: 1px solid var(--accent); color: #fff; background: var(--accent); box-shadow: 0 7px 18px rgba(103,72,58,.17); } .template_catalog_create_button:hover, .template_catalog_create_button:focus-visible { color: #fff; border-color: var(--accent-dark); background: var(--accent-dark); box-shadow: 0 10px 24px rgba(80,53,42,.23); outline: none; transform: translateY(-2px); } .template_catalog_create_button svg { transition: transform .2s ease; } .template_catalog_create_button:hover svg, .template_catalog_create_button:focus-visible svg { transform: translateX(3px); } .template_catalog_empty { max-width: 680px; display: grid; justify-items: center; margin: 0 auto; padding: 48px 34px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 18px 50px rgba(50,39,30,.06); text-align: center; } .template_catalog_empty > span { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 17px; color: var(--accent); background: #f0e6df; border-radius: 50%; font-size: 22px; } .template_catalog_empty h2 { margin-bottom: 10px; font-size: 32px; } .template_catalog_empty p { max-width: 510px; margin-bottom: 22px; color: var(--muted); } .template_preview_modal { position: fixed; z-index: 1500; inset: 0; display: grid; place-items: center; padding: 24px; visibility: hidden; pointer-events: none; transition: visibility 0s linear .36s; } .template_preview_modal.is_open { visibility: visible; pointer-events: auto; transition-delay: 0s; } .template_preview_modal_backdrop { position: absolute; inset: 0; border: 0; background: rgba(26,21,18,.72); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); opacity: 0; cursor: zoom-out; transition: opacity .34s ease, -webkit-backdrop-filter .34s ease, backdrop-filter .34s ease; } .template_preview_modal.is_open .template_preview_modal_backdrop { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 1; } .template_preview_modal_dialog { width: min(440px, calc(100vw - 48px)); height: min(900px, calc(100svh - 48px)); position: relative; z-index: 1; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid rgba(255,255,255,.22); border-radius: 23px; background: #f5f0ec; box-shadow: 0 35px 90px rgba(18,13,11,.42); opacity: 0; transform: translateY(18px) scale(.98); transition: width .38s cubic-bezier(.22,.61,.36,1), opacity .26s ease, transform .3s cubic-bezier(.22,.61,.36,1); } .template_preview_modal.is_desktop .template_preview_modal_dialog { width: min(1480px, calc(100vw - 48px)); } .template_preview_modal.is_open .template_preview_modal_dialog { opacity: 1; transform: translateY(0) scale(1); } .template_preview_modal_dialog header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); } .template_preview_modal_title { min-width: 0; } .template_preview_modal_dialog header small, .template_preview_modal_dialog header strong { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; } .template_preview_modal_dialog header small { margin-bottom: 2px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .template_preview_modal_dialog header strong { font: 500 22px/1.2 Georgia, serif; } .template_preview_modal.is_open:not(.is_desktop) #template-preview-modal-title { font-size: 14px; } .template_preview_modal_controls { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } .template_preview_create_form { margin: 0; } .template_preview_create_button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px 0 11px; border: 1px solid var(--accent); border-radius: 999px; color: #fff; background: var(--accent); box-shadow: 0 8px 18px rgba(103,72,58,.18); cursor: pointer; font: inherit; font-size: 10px; font-weight: 750; text-decoration: none; white-space: nowrap; transition: color .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .25s ease, transform .22s ease; } .template_preview_create_button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .template_preview_create_button:hover, .template_preview_create_button:focus-visible { color: #fff; border-color: var(--accent-dark); background: var(--accent-dark); box-shadow: 0 11px 23px rgba(103,72,58,.27); outline: none; transform: translateY(-2px); } .template_preview_create_button[aria-busy="true"], .template_preview_create_button:disabled { cursor: wait; opacity: .68; transform: none; } .template_preview_size_toggle { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--accent-dark); background: #f5efea; cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; white-space: nowrap; transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease; } .template_preview_size_toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .template_preview_size_icon.is_mobile { display: none; } .template_preview_size_toggle[aria-pressed="true"] .template_preview_size_icon.is_desktop { display: none; } .template_preview_size_toggle[aria-pressed="true"] .template_preview_size_icon.is_mobile { display: block; } .template_preview_size_toggle:hover, .template_preview_size_toggle:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); outline: none; transform: translateY(-1px); } .template_preview_size_toggle[aria-pressed="true"] { color: #fff; border-color: var(--accent); background: var(--accent); } .template_preview_modal_close { width: 40px; height: 40px; flex: 0 0 40px; position: relative; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: #f5efea; cursor: pointer; transition: color .2s ease, background-color .2s ease, transform .2s ease; } .template_preview_modal_close span::before, .template_preview_modal_close span::after { width: 15px; height: 1.5px; position: absolute; top: 50%; left: 50%; content: ""; border-radius: 999px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); } .template_preview_modal_close span::after { transform: translate(-50%, -50%) rotate(-45deg); } .template_preview_modal_close:hover, .template_preview_modal_close:focus-visible { color: #fff; background: var(--accent); outline: none; transform: rotate(6deg); } .template_preview_modal_frame { min-height: 0; position: relative; overflow: hidden; background: #e7ddd5; } .template_preview_modal_frame::before { width: 34px; height: 34px; position: absolute; top: 50%; left: 50%; content: ""; border: 3px solid rgba(147,105,84,.18); border-top-color: var(--accent); border-radius: 50%; opacity: 1; transform: translate(-50%, -50%); animation: template_demo_loading .75s linear infinite; transition: opacity .18s ease; } .template_preview_modal_frame.is_loaded::before { opacity: 0; } .template_preview_modal_frame iframe { width: 100%; height: 100%; position: relative; z-index: 1; display: block; border: 0; background: #fff; opacity: 0; transition: opacity .24s ease; } .template_preview_modal_frame.is_loaded iframe { opacity: 1; } body.template_modal_open { overflow: hidden; } @keyframes template_card_in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes template_chooser_in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .template_card { overflow: hidden; border-radius: var(--radius); background: #fff; box-shadow: 0 10px 34px rgba(50,39,30,.06); } .template_preview { min-height: 420px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--card-color) 80%, #fff), color-mix(in srgb, var(--card-color) 72%, #000)); text-align: center; } .template_preview::before { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(255,255,255,.45); border-radius: 120px 120px 10px 10px; } .template_preview > * { position: relative; } .template_preview span, .template_preview small { text-transform: uppercase; letter-spacing: .14em; } .template_preview strong { max-width: 85%; font: 500 54px/1 Georgia, serif; } .template_meta { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px; } .template_meta h2, .template_meta h3 { margin: 0 0 5px; font-size: 22px; } .template_meta p { margin: 0; color: var(--muted); } .template_price { display: inline-flex; margin-top: 10px; color: var(--accent-dark); font-size: 15px; } .round_link { width: 48px; flex: 0 0 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; color: #fff; background: var(--ink); border-radius: 50%; cursor: pointer; font: inherit; font-size: 22px; text-decoration: none; } .steps_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } .steps_grid span { color: var(--accent); font-weight: 700; } .steps_grid h3 { margin: 12px 0 8px; font-size: 24px; } .steps_grid p { color: var(--muted); } .page_intro { padding: 100px 0 70px; text-align: center; } .page_intro.compact { padding-bottom: 44px; } .page_intro h1, .message_page h1 { margin-bottom: 18px; font-size: clamp(48px, 7vw, 78px); } .page_intro p:not(.eyebrow), .message_page p { color: var(--muted); font-size: 18px; } .panel { padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 16px 50px rgba(50,39,30,.06); } .form_stack { display: grid; gap: 22px; } .field { display: grid; gap: 5px; } .field > span { font-size: 13px; font-weight: 700; } .field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid #d9d0c8; border-radius: 11px; color: var(--ink); background: #fff; outline: none; } .field textarea { resize: none; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } .field_row { display: grid; grid-template-columns: 1fr 1fr; align-items: baseline; gap: 14px; } [data-phone-mask] { font-variant-numeric: tabular-nums; letter-spacing: .015em; } .form_note { padding: 14px 16px; border-radius: 12px; color: var(--muted); background: var(--paper); font-size: 14px; } .alert { max-width: 1180px; margin: 20px auto; padding: 16px 20px; border-radius: 12px; } .alert ul { margin-bottom: 0; } .alert_error { color: #7e2525; background: #f8dddd; } .alert_success { color: #245a3d; background: #dff0e6; } .draft_limit_modal { position: fixed; z-index: 1800; inset: 0; display: grid; place-items: center; padding: 22px; visibility: hidden; pointer-events: none; transition: visibility 0s linear .32s; } .draft_limit_modal[hidden] { display: none; } .draft_limit_modal.is_open { visibility: visible; pointer-events: auto; transition-delay: 0s; } .draft_limit_backdrop { position: absolute; inset: 0; border: 0; background: rgba(29,24,21,.7); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); opacity: 0; cursor: zoom-out; transition: opacity .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease; } .draft_limit_modal.is_open .draft_limit_backdrop { -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); opacity: 1; } .draft_limit_dialog { width: min(520px, calc(100vw - 44px)); position: relative; z-index: 1; overflow: hidden; padding: 36px; border: 1px solid rgba(255,255,255,.6); border-radius: 24px; background: radial-gradient(circle at 94% 0, #f2e5db, transparent 34%), #fff; box-shadow: 0 35px 90px rgba(29,22,18,.38); opacity: 0; text-align: center; transform: translateY(20px) scale(.975); transition: opacity .25s ease, transform .32s cubic-bezier(.22,.61,.36,1); } .draft_limit_modal.is_open .draft_limit_dialog { opacity: 1; transform: translateY(0) scale(1); } .draft_limit_close { width: 40px; height: 40px; position: absolute; top: 14px; right: 14px; display: grid; place-items: center; padding: 0; border: 1px solid #ded4cc; border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.8); cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease; } .draft_limit_close span::before, .draft_limit_close span::after { width: 15px; height: 1.5px; position: absolute; top: 50%; left: 50%; content: ""; border-radius: 999px; background: currentColor; transform: translate(-50%,-50%) rotate(45deg); } .draft_limit_close span::after { transform: translate(-50%,-50%) rotate(-45deg); } .draft_limit_close:hover, .draft_limit_close:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); outline: none; transform: rotate(6deg); } .draft_limit_icon { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto 19px; color: #8a5d48; border-radius: 21px; background: #f0e4db; box-shadow: 0 12px 28px rgba(103,72,58,.12); } .draft_limit_icon svg { width: 33px; height: 33px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .draft_limit_dialog .eyebrow { margin-bottom: 9px; } .draft_limit_dialog h2 { max-width: 420px; margin: 0 auto 12px; font-size: clamp(30px, 6vw, 42px); line-height: 1.08; } .draft_limit_dialog > p:not(.eyebrow) { max-width: 430px; margin: 0 auto; color: var(--muted); font-size: 13px; line-height: 1.6; } .draft_limit_actions { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 24px; } .draft_limit_actions a, .draft_limit_actions button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 17px; border: 1px solid #d9cec5; border-radius: 13px; cursor: pointer; font-size: 12px; font-weight: 700; text-decoration: none; transition: color .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease, filter .22s ease; } .draft_limit_actions a { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 10px 24px rgba(103,72,58,.2); } .draft_limit_actions a i { width: 9px; height: 9px; border-top: 1.7px solid currentColor; border-right: 1.7px solid currentColor; transform: rotate(45deg); transition: transform .22s ease; } .draft_limit_actions button { color: var(--accent-dark); background: #f7f2ee; } .draft_limit_actions a:hover, .draft_limit_actions a:focus-visible { color: #fff; filter: brightness(.9); box-shadow: 0 14px 29px rgba(83,57,45,.27); outline: none; transform: translateY(-2px); } .draft_limit_actions a:hover i, .draft_limit_actions a:focus-visible i { transform: translateX(3px) rotate(45deg); } .draft_limit_actions button:hover, .draft_limit_actions button:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); outline: none; transform: translateY(-2px); } body.draft_limit_open { overflow: hidden; } .message_page { min-height: 70vh; display: grid; place-items: center; padding: 100px 0; text-align: center; } /* 404 page */ .error_404_body main { overflow: hidden; } .not_found_page { min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); position: relative; overflow: hidden; display: grid; align-items: center; padding: 76px 0 92px; background: radial-gradient(circle at 82% 24%, rgba(188,143,116,.2), transparent 28%), radial-gradient(circle at 5% 95%, rgba(147,105,84,.08), transparent 27%), linear-gradient(135deg, #fffdf9 0%, #f8f1eb 54%, #ead9cd 100%); } .not_found_page::before { width: 620px; aspect-ratio: 1; position: absolute; top: -465px; right: 2%; content: ""; border: 1px solid rgba(147,105,84,.11); border-radius: 50%; box-shadow: 0 0 0 72px rgba(147,105,84,.025), 0 0 0 144px rgba(147,105,84,.014); pointer-events: none; animation: not_found_ambient 13s ease-in-out infinite; } .not_found_page::after { width: 330px; height: 330px; position: absolute; bottom: -280px; left: 9%; content: ""; border: 1px solid rgba(147,105,84,.1); border-radius: 50%; pointer-events: none; } .not_found_inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,.88fr) minmax(480px,1.12fr); align-items: center; gap: clamp(50px,7vw,100px); } .not_found_copy { max-width: 570px; } .not_found_kicker { display: flex; align-items: center; gap: 11px; margin: 0 0 19px; color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; } .not_found_kicker span { min-width: 47px; display: inline-grid; place-items: center; padding: 5px 8px; border: 1px solid rgba(147,105,84,.22); border-radius: 999px; background: rgba(255,255,255,.62); letter-spacing: .08em; box-shadow: 0 5px 16px rgba(75,53,41,.05); } .not_found_copy h1 { margin: 0 0 25px; font-size: clamp(49px,5.4vw,76px); line-height: 1.02; letter-spacing: -.05em; text-wrap: balance; } .not_found_copy h1 em { color: var(--accent); font-family: Georgia, "Times New Roman", serif; font-weight: 400; } .not_found_text { max-width: 520px; margin: 0; color: #675f5a; font-size: 17px; line-height: 1.72; } .not_found_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 31px; } .not_found_actions .price_landing_button { min-width: 0; } .not_found_home_link:hover > i, .not_found_home_link:focus-visible > i { transform: translateX(-3px); } .not_found_visual { min-height: 530px; position: relative; display: grid; place-items: center; isolation: isolate; } .not_found_code { position: absolute; z-index: -2; top: 50%; left: 50%; color: transparent; font: 500 clamp(150px,19vw,260px)/1 Georgia, "Times New Roman", serif; letter-spacing: -.085em; white-space: nowrap; -webkit-text-stroke: 1px rgba(105,75,59,.15); transform: translate(-50%,-52%); user-select: none; } .not_found_visual::before { width: min(440px,82%); aspect-ratio: 1; position: absolute; z-index: -1; content: ""; border: 1px solid rgba(147,105,84,.12); border-radius: 50%; box-shadow: 0 0 0 44px rgba(255,255,255,.13), inset 0 0 0 44px rgba(255,255,255,.08); animation: not_found_ring 8s ease-in-out infinite; } .not_found_route { position: absolute; z-index: -1; inset: 0; } .not_found_route svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: rgba(113,82,65,.24); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 5 9; } .not_found_route i { width: 9px; height: 9px; position: absolute; border: 2px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 5px 12px rgba(77,52,40,.2); } .not_found_route i:first-of-type { bottom: 24%; left: 2%; } .not_found_route i:last-of-type { top: 48%; right: 3%; } .not_found_envelope { width: min(370px,73%); aspect-ratio: 1.38; position: relative; margin-top: 34px; filter: drop-shadow(0 30px 34px rgba(69,45,33,.16)); transform: rotate(-4deg); animation: not_found_envelope_float 5.6s ease-in-out infinite; } .not_found_envelope_back { position: absolute; inset: 17% 0 0; border: 1px solid #d2b8a7; border-radius: 13px; background: linear-gradient(145deg,#dbc1b0,#cda892); } .not_found_envelope_back::before { position: absolute; z-index: 1; inset: 0; content: ""; clip-path: polygon(0 0,50% 59%,100% 0); background: linear-gradient(165deg,#edd8ca,#d7b9a6); } .not_found_invitation { width: 75%; height: 105%; position: absolute; z-index: 2; right: 12.5%; bottom: 24%; display: flex; align-items: center; flex-direction: column; padding: 28px 22px; border: 1px solid rgba(130,92,71,.17); border-radius: 8px; color: #594136; background: radial-gradient(circle at 15% 5%,#fff,transparent 27%), linear-gradient(155deg,#fffaf5,#f2dfd2); box-shadow: 0 14px 30px rgba(79,52,39,.13); text-align: center; transform: rotate(2deg); z-index: 4; } .not_found_invitation small { color: #684a3c; font: 700 14px/1 Georgia, serif; letter-spacing: -.02em; } .not_found_invitation small span { color: #b17758; } .not_found_invitation > i { width: 1px; height: 34px; margin: 16px 0; background: linear-gradient(transparent,#b98b74,transparent); } .not_found_invitation strong { font: 500 29px/1.05 Georgia, serif; letter-spacing: -.035em; } .not_found_invitation p { margin: 17px 0 0; color: #8a7164; font: 8px/1.55 Inter,sans-serif; letter-spacing: .07em; text-transform: uppercase; } .not_found_invitation > b { width: 44px; height: 1px; margin-top: auto; background: #be927a; } .not_found_envelope_front { position: absolute; z-index: 3; inset: 17% 0 0; overflow: hidden; border: 1px solid #caaa96; border-radius: 13px; } .not_found_envelope_front::before, .not_found_envelope_front::after { width: 72%; height: 115%; position: absolute; bottom: -58%; content: ""; background: linear-gradient(145deg,#e4cbbb,#cfad98); transform: rotate(38deg); transform-origin: bottom left; } .not_found_envelope_front::after { right: 0; background: linear-gradient(215deg,#edd7c9,#d6b5a1); transform: rotate(-38deg); transform-origin: bottom right; } .not_found_seal { width: 48px; height: 48px; position: absolute; z-index: 4; right: 17%; bottom: 20%; display: grid; place-items: center; color: #f5ded1; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: linear-gradient(145deg,#ad7659,#86513c); box-shadow: 0 7px 16px rgba(85,49,35,.25), inset 0 1px 2px rgba(255,255,255,.22); } .not_found_seal svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; } .not_found_status { position: absolute; z-index: 5; right: 0; bottom: 5%; display: grid; grid-template-columns: 35px minmax(0,1fr); align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border: 1px solid rgba(215,196,184,.88); border-radius: 14px; background: rgba(255,255,255,.83); box-shadow: 0 14px 35px rgba(70,49,38,.1); backdrop-filter: blur(12px); animation: not_found_status_float 4.4s .4s ease-in-out infinite; } .not_found_status > i { width: 35px; height: 35px; position: relative; display: grid; place-items: center; border-radius: 11px; background: #f0e3da; } .not_found_status > i::before { width: 7px; height: 7px; content: ""; border-radius: 50%; background: #b47759; box-shadow: 0 0 0 5px rgba(180,119,89,.1); } .not_found_status b, .not_found_status small { display: block; } .not_found_status b { color: #514640; font-size: 11px; } .not_found_status small { margin-top: 1px; color: #897d76; font-size: 9px; } @keyframes not_found_ambient { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-16px,12px,0); } } @keyframes not_found_ring { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.035); opacity: 1; } } @keyframes not_found_envelope_float { 0%,100% { transform: translate3d(0,0,0) rotate(-4deg); } 50% { transform: translate3d(0,-10px,0) rotate(-2.5deg); } } @keyframes not_found_status_float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-5px,-7px,0); } } @media (max-width: 980px) { .not_found_page { min-height: 0; padding: 72px 0 84px; } .not_found_inner { grid-template-columns: 1fr; gap: 42px; } .not_found_copy { max-width: 720px; } .not_found_text { max-width: 620px; } .not_found_visual { width: min(650px,100%); min-height: 470px; margin-inline: auto; } } @media (max-width: 720px) { .not_found_page { padding: 58px 0 72px; } .not_found_copy { text-align: center; } .not_found_kicker, .not_found_actions { justify-content: center; } .not_found_copy h1 { font-size: clamp(43px,12vw,60px); } .not_found_text { margin-inline: auto; font-size: 15px; } .not_found_actions { align-items: stretch; flex-direction: column; } .not_found_actions .price_landing_button { width: 100%; max-width: 300px; margin-inline: auto; } .not_found_visual { min-height: 400px; } .not_found_status { right: 3%; } } @media (max-width: 480px) { .not_found_page { padding-top: 47px; } .not_found_kicker { font-size: 9px; } .not_found_copy h1 { margin-bottom: 19px; font-size: 41px; } .not_found_visual { width: calc(100% + 14px); min-height: 335px; margin-left: -7px; } .not_found_code { font-size: 128px; } .not_found_envelope { width: 76%; margin-top: 24px; } .not_found_invitation { padding: 20px 16px; } .not_found_invitation > i { height: 22px; margin: 10px 0; } .not_found_invitation strong { font-size: 22px; } .not_found_invitation p { margin-top: 11px; font-size: 6px; } .not_found_seal { width: 41px; height: 41px; } .not_found_status { right: 0; bottom: 0; } } @media (prefers-reduced-motion: reduce) { .not_found_page::before, .not_found_visual::before, .not_found_envelope, .not_found_status { animation: none; } } .site_footer { position: relative; overflow: hidden; isolation: isolate; padding: 68px 0 22px; color: #d8d0c9; background: radial-gradient(circle at 12% -12%, rgba(147,105,84,.2), transparent 34%), linear-gradient(145deg, #25211f, #1d1a18 72%); font-size: 13px; } .site_footer::before { width: 430px; height: 430px; position: absolute; z-index: -1; right: -190px; bottom: -285px; content: ""; border: 1px solid rgba(255,255,255,.055); border-radius: 50%; box-shadow: 0 0 0 72px rgba(255,255,255,.018), 0 0 0 144px rgba(255,255,255,.012); pointer-events: none; } .site_footer::after { height: 1px; position: absolute; top: 0; right: 0; left: 0; content: ""; background: linear-gradient(90deg, transparent, rgba(214,180,159,.4), transparent); } .footer_grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.28fr .72fr .92fr 1.18fr; gap: 48px; } .footer_brand { min-width: 0; padding-right: 10px; } .footer_wordmark { width: fit-content; display: inline-flex; align-items: flex-start; flex-direction: column; gap: 3px; color: #fff; text-decoration: none; transition: transform .24s ease; } .footer_wordmark > span { font: 600 35px/1 Georgia, "Times New Roman", serif; letter-spacing: -.04em; } .footer_wordmark i { color: #c18d71; font-style: normal; } .footer_wordmark small { color: #978a82; font-size: 9px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; } .footer_wordmark:hover, .footer_wordmark:focus-visible { color: #fff; outline: none; transform: translateY(-2px); } .footer_brand > p { max-width: 290px; margin: 20px 0 23px; color: #aaa19a; font-size: 13px; line-height: 1.65; } .footer_socials { display: flex; gap: 9px; } .footer_socials a { width: 42px; height: 42px; display: grid; place-items: center; color: #e8e1dc; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(255,255,255,.045); transition: color .22s ease, border-color .22s ease, background-color .22s ease, transform .22s ease; } .footer_socials a:hover, .footer_socials a:focus-visible { color: #fff; border-color: rgba(193,141,113,.6); background: #875a46; outline: none; transform: translateY(-3px); } .footer_socials svg { width: 18px; height: 18px; fill: currentColor; } .footer_nav { min-width: 0; display: flex; align-items: flex-start; flex-direction: column; gap: 5px; } .footer_nav > strong { position: relative; margin-bottom: 13px; padding-left: 14px; color: #fff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .footer_nav > strong::before { width: 6px; height: 6px; position: absolute; top: 50%; left: 0; content: ""; border-radius: 50%; background: #b47e62; box-shadow: 0 0 0 4px rgba(180,126,98,.1); transform: translateY(-50%); } .footer_nav a { position: relative; padding: 5px 0; color: #aaa19a; text-decoration: none; transition: color .2s ease, transform .2s ease; } .footer_nav a::after { height: 1px; position: absolute; right: 100%; bottom: 3px; left: 0; content: ""; background: #b47e62; transition: right .22s ease; } .footer_nav a:hover, .footer_nav a:focus-visible { color: #fff; outline: none; transform: translateX(3px); } .footer_nav a:hover::after, .footer_nav a:focus-visible::after { right: 0; } .footer_cta { align-self: start; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 13px; padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); box-shadow: 0 18px 42px rgba(0,0,0,.13); transition: border-color .24s ease, background-color .24s ease, transform .24s ease; } .footer_cta:hover { border-color: rgba(193,141,113,.35); transform: translateY(-3px); } .footer_cta_icon { width: 46px; height: 46px; display: grid; place-items: center; color: #e5c8b8; border: 1px solid rgba(215,176,154,.2); border-radius: 14px; background: rgba(147,105,84,.17); } .footer_cta_icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .footer_cta_copy { min-width: 0; align-self: center; } .footer_cta_copy strong { display: block; margin-bottom: 4px; color: #fff; font-size: 15px; } .footer_cta_copy p { margin: 0; color: #aaa19a; font-size: 11px; line-height: 1.5; } .footer_cta_button { min-height: 46px; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 3px; padding: 5px 6px 5px 15px; border: 1px solid rgba(215,176,154,.2); border-radius: 13px; color: #fff; background: #875a46; box-shadow: 0 10px 24px rgba(0,0,0,.14); text-decoration: none; transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease; } .footer_cta_button b { font-size: 12px; font-weight: 700; } .footer_cta_button i { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background: rgba(255,255,255,.08); transition: background-color .22s ease, transform .22s ease; } .footer_cta_button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .footer_cta_button:hover, .footer_cta_button:focus-visible { color: #fff; border-color: rgba(255,255,255,.2); background: #6e4838; box-shadow: 0 14px 30px rgba(0,0,0,.2); outline: none; transform: translateY(-2px); } .footer_cta_button:hover i, .footer_cta_button:focus-visible i { background: rgba(255,255,255,.14); transform: translateX(3px); } .footer_bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 50px; padding-top: 20px; color: #847b75; border-top: 1px solid rgba(255,255,255,.09); font-size: 11px; } .footer_bottom strong { color: #b8ada6; font-weight: 700; } .footer_bottom_note { display: inline-flex; align-items: center; gap: 8px; } .footer_bottom_note i { width: 5px; height: 5px; border-radius: 50%; background: #b47e62; box-shadow: 0 0 0 4px rgba(180,126,98,.09); } .scroll_top { width: 50px; height: 50px; position: fixed; z-index: 30; right: 24px; bottom: 24px; transform: translateY(18px); visibility: hidden; opacity: 0; border: 0; border-radius: 50%; color: #fff; background: var(--accent); box-shadow: 0 12px 30px rgba(36,33,31,.25); cursor: pointer; font-size: 22px; transition: opacity .2s, transform .2s, visibility .2s, background .2s, bottom .28s ease; } .scroll_top:hover { background: var(--accent-dark); } .scroll_top.is_visible { transform: translateY(0); visibility: visible; opacity: 1; } .manage_workspace_page.payment_dock_visible .scroll_top { bottom: 124px; } .manage_navigation { width: min(1180px, calc(100% - 40px)); margin: 28px auto 0; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px rgba(50,39,30,.04); } .manage_navigation_inner { width: 100%; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 10px 12px 10px 20px; } .manage_navigation_title { min-width: 0; display: grid; } .manage_navigation_title span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } .manage_navigation_title strong { overflow: hidden; max-width: 330px; text-overflow: ellipsis; white-space: nowrap; } .manage_navigation_scroll { min-width: 0; } .manage_navigation nav { display: flex; align-items: center; gap: 5px; padding: 5px; background: #f1ebe5; border-radius: 999px; } .manage_navigation nav a { min-height: 42px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 18px; border-radius: 999px; color: #5f5852; font-size: 13px; font-weight: 750; text-decoration: none; line-height: 120%; text-align: center; transition: color .2s, background .2s, box-shadow .2s; } .manage_navigation nav a:hover { color: var(--accent-dark); background: rgba(255,255,255,.7); } .manage_navigation nav a.is_active { color: #fff; background: var(--accent); box-shadow: 0 5px 14px rgba(103,72,58,.2); } .manage_navigation_icon, .manage_navigation_label_mobile { display: none; } .manage_navigation_icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .manage_navigation_badge { min-width: 17px; height: 17px; position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; border-radius: 999px; color: #fff; background: var(--accent); box-shadow: 0 4px 10px rgba(103,72,58,.2); font-size: 10px; font-weight: 700; line-height: 1; } .manage_navigation nav a.is_active .manage_navigation_badge { color: var(--accent-dark); background: #fff; } .manage_workspace_page .site_header { position: relative; z-index: 30; } .manage_workspace_page .manage_navigation { position: sticky; z-index: 25; top: 0; } .editor_layout { width: min(1180px, calc(100% - 40px)); margin: 28px auto 80px; display: grid; grid-template-columns: minmax(0, 600px) minmax(400px, 1fr); gap: 24px; align-items: start; } .editor_panel { min-width: 0; } .editor_preview_launcher { display: none; } .editor_preview_column { width: 100%; max-width: 560px; position: sticky; top: 96px; justify-self: end; } @keyframes editor_spin { to { transform: rotate(360deg); } } .editor_structure, .editor_settings_card, .publish_box { margin-bottom: 14px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 16px 44px rgba(50,39,30,.07); } .editor_structure { margin-bottom: 0; } .editor_structure_heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .editor_structure_heading h1 { margin: 3px 0 7px; font-size: 31px; } .editor_structure_heading p { margin: 0; color: var(--muted); font-size: 12px; } .editor_overline { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .editor_structure_meta { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 7px; margin-top: 0; } .editor_inline_save { min-height: 27px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; color: #3f6650; background: #edf5f0; border-radius: 999px; font-size: 10px; white-space: nowrap; transition: color .2s, background .2s; } .editor_inline_save i { width: 7px; height: 7px; flex: 0 0 7px; background: var(--success); border-radius: 50%; } .editor_inline_save[data-save-state="dirty"], .editor_inline_save[data-save-state="saving"] { color: #755821; background: #fbf3dc; } .editor_inline_save[data-save-state="dirty"] i, .editor_inline_save[data-save-state="saving"] i { background: #bd8b2b; } .editor_inline_save[data-save-state="saving"] i { width: 9px; height: 9px; flex-basis: 9px; border: 2px solid rgba(189,139,43,.28); border-top-color: #bd8b2b; background: transparent; animation: editor_spin .7s linear infinite; } .editor_inline_save[data-save-state="error"] { color: #812f2f; background: #f9e4e4; } .editor_inline_save[data-save-state="error"] i { background: var(--danger); } .editor_blocks_count { flex: 0 0 auto; margin-top: 0; padding: 7px 10px; color: #6e655e; background: #f3eee9; border-radius: 999px; font-size: 10px; font-weight: 750; white-space: nowrap; } .editor_blocks_count strong { color: var(--accent-dark); } .editor_blocks { display: grid; gap: 9px; } .editor_blocks.is_reordering .editor_block_moves button { pointer-events: none; } .editor_block { overflow: hidden; border: 1px solid #ded5cd; border-radius: 15px; background: #fff; transition: border-color .2s, box-shadow .2s, transform .15s; } .editor_block:hover { border-color: #cfc0b5; box-shadow: 0 8px 22px rgba(50,39,30,.06); } .editor_block.is_unpaid { position: relative; z-index: 2; overflow: hidden; border-color: #dfbd78; box-shadow: 0 7px 20px rgba(150,105,24,.08); } .editor_block.is_unpaid:hover, .editor_block.is_unpaid:focus-within { z-index: 5; border-color: #d3a54d; box-shadow: 0 10px 26px rgba(150,105,24,.13); } .editor_block.is_unpaid .editor_block_header { border-radius: 15px 15px 0 0; background: linear-gradient(90deg, #fffaf0, #fff); } .editor_block.is_unpaid .editor_block_body { border-radius: 0 0 15px 15px; } .editor_block.is_dragging { transform: scale(.985); opacity: .52; border-color: var(--accent); box-shadow: 0 14px 30px rgba(50,39,30,.12); } .editor_block.is_disabled { background: #faf8f6; } .editor_block.is_disabled .editor_block_header { color: #817a74; } .editor_block_header { min-height: 66px; position: relative; display: flex; align-items: center; gap: 8px; padding: 0 0 0 43px; cursor: pointer; outline: none; } .editor_block_header:focus-visible { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .editor_block_drag { width: 35px; height: 100%; position: absolute; inset: 0 auto 0 0; display: grid; place-content: center; grid-template-columns: repeat(2, 3px); gap: 3px; padding: 0; border: 0; border-right: 1px solid #e2dad3; border-radius: 14px 0 0 0; background: #f5f1ed; cursor: grab; touch-action: none; transition: color .2s, background .2s; } .editor_block_drag:hover { background: #ebe2db; } .editor_block_drag:active { cursor: grabbing; } .editor_block_drag i { width: 3px; height: 3px; display: block; background: #aaa098; border-radius: 50%; } .editor_block_icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; color: var(--accent-dark); background: linear-gradient(145deg, #f6eee8, #eadfd6); border: 1px solid rgba(147,105,84,.1); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } .editor_block_icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .editor_block_summary { min-width: 0; flex: 1; display: grid; gap: 0; padding: 4px 0; color: inherit; text-align: left; } .editor_block_summary strong { min-width: 0; display: flex; align-items: baseline; gap: 5px; overflow: hidden; font-size: 13px; white-space: nowrap; } .editor_block_summary strong > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .editor_block_summary_price { flex: 0 0 auto; color: #3f6650; font-size: 12px; font-weight: 750; } .editor_block_summary small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .editor_block_state { position: relative; padding: 5px 7px; color: #3f6650; background: #e8f2ec; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: initial; } .editor_block.is_disabled .editor_block_state { color: #756e68; background: #ece8e5; } .editor_block_state.is_unpaid { color: #835b12; background: #fae9bd; cursor: help; outline: none; white-space: nowrap; } .editor_block_state.is_unpaid:focus-visible { box-shadow: 0 0 0 3px rgba(189,139,43,.2); } .editor_block_state_hint { width: min(260px, calc(100vw - 44px)); max-width: calc(100vw - 44px); position: absolute; z-index: 20; top: calc(100% + 9px); right: -7px; display: grid; gap: 4px; padding: 11px 12px; border: 1px solid #e4c98e; border-radius: 11px; color: var(--ink); background: #fffaf0; box-shadow: 0 13px 32px rgba(77,53,17,.16); text-align: left; text-transform: none; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; word-break: normal; visibility: hidden; opacity: 0; transform: translateY(-5px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; } .editor_block_state_hint::before { width: 9px; height: 9px; position: absolute; top: -5px; right: 18px; content: ""; border-top: 1px solid #e4c98e; border-left: 1px solid #e4c98e; background: #fffaf0; transform: rotate(45deg); } .editor_block_state_hint strong { display: block; color: #76500b; font-size: 11px; font-weight: 700; white-space: normal; } .editor_block_state_hint small { display: block; color: #6f655b; font-size: 11px; font-weight: 600; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; } .editor_block_state:not(.is_unpaid) .editor_block_state_hint { display: none; } .editor_block_state.is_unpaid:hover .editor_block_state_hint, .editor_block_state.is_unpaid:focus .editor_block_state_hint, .editor_block_state.is_unpaid:focus-within .editor_block_state_hint { visibility: visible; opacity: 1; transform: translateY(0); } .editor_switch { width: 40px; height: 24px; flex: 0 0 40px; position: relative; cursor: pointer; } .editor_switch input { position: absolute; opacity: 0; pointer-events: none; } .editor_switch > span { position: absolute; inset: 0; background: #d8d1cb; border-radius: 999px; transition: background .2s; } .editor_switch > span::after { content: ""; width: 18px; height: 18px; position: absolute; top: 3px; left: 3px; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(40,32,27,.2); transition: transform .2s; } .editor_switch input:checked + span { background: var(--success); } .editor_switch input:checked + span::after { transform: translateX(16px); } .editor_switch input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent); outline-offset: 2px; } .editor_switch.is_locked { opacity: .5; cursor: not-allowed; } .editor_block_moves { width: 27px; align-self: stretch; flex: 0 0 27px; display: flex; flex-direction: column; gap: 0; border-left: 1px solid #eee8e2; } .editor_block_moves button { width: 100%; min-height: 0; flex: 1; display: grid; place-items: center; padding: 0; border: 0; color: #756d67; background: #fff; cursor: pointer; font-size: 12px; transition: color .2s, background .2s; } .editor_block_moves button + button { border-top: 1px solid #eee8e2; } .editor_block_moves button:hover:not(:disabled) { color: var(--accent-dark); background: #f5eee8; } .editor_block_moves button:disabled { color: #d7d0ca; cursor: default; } .editor_block_chevron { width: 37px; min-height: 66px; align-self: stretch; flex: 0 0 37px; display: grid; place-items: center; padding: 0; border: 0; border-left: 1px solid #e2dad3; border-radius: 0 14px 0 0; color: #665d57; background: #f1ebe6; cursor: pointer; transition: color .2s, background .2s; } .editor_block_chevron:hover { color: #fff; background: var(--accent); } .editor_block_chevron span { width: 7px; height: 7px; transform: rotate(45deg) translate(-1px, -1px); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: transform .2s; } .editor_block_chevron[aria-expanded="true"] span { transform: rotate(225deg) translate(-1px, -1px); } .editor_block_body { display: grid; grid-template-rows: 0fr; opacity: 0; border-top: 1px solid transparent; background: #fcfaf8; transition: grid-template-rows .32s cubic-bezier(.2,.72,.2,1), opacity .2s ease, border-color .25s ease; } .editor_block_body_inner { min-height: 0; overflow: hidden; display: grid; gap: 14px; padding: 0 18px; transition: padding .32s cubic-bezier(.2,.72,.2,1); } .editor_block.is_open .editor_block_body { grid-template-rows: 1fr; opacity: 1; border-top-color: var(--line); } .editor_block.is_open .editor_block_body_inner { padding: 18px; } .editor_panel .field input, .editor_panel .field textarea, .editor_panel .field select { min-height: 52px; padding: 12px 15px; border-color: #d9d0c8; border-radius: 13px; background: #fff; transition: border-color .2s, box-shadow .2s, background .2s; } .editor_panel .field textarea { line-height: 1.5; } .editor_panel .field input:hover, .editor_panel .field textarea:hover, .editor_panel .field select:hover { border-color: #c8b9ad; } .editor_panel .field > span { color: #4f4945; font-size: 12px; letter-spacing: .02em; } .editor_date_field { cursor: pointer; } .editor_date_field > span { pointer-events: none; } .editor_date_field input { cursor: pointer; } .field_hint { color: var(--muted); font-size: 11px; } .field_counter { justify-self: end; margin-top: -3px; padding-right: 6px; color: #8b817a; font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1; } .field_counter.is_limit { color: var(--danger); font-weight: 700; } .editor_rsvp_info { display: flex; align-items: flex-start; gap: 13px; } .editor_rsvp_info > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; color: #fff; background: var(--success); border-radius: 50%; font-weight: 700; } .editor_rsvp_info strong { display: block; margin-bottom: 4px; font-size: 13px; } .editor_rsvp_info p { margin-bottom: 8px; color: var(--muted); font-size: 11px; } .editor_rsvp_info a { color: var(--accent-dark); font-size: 11px; font-weight: 700; text-underline-offset: 3px; } .editor_settings_card { display: grid; gap: 17px; } .editor_settings_heading { display: flex; align-items: center; gap: 12px; } .editor_settings_heading h2 { margin: 0 0 3px; font-size: 22px; } .editor_settings_heading p { margin: 0; color: var(--muted); font-size: 12px; } .editor_settings_icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: var(--accent-dark); background: linear-gradient(145deg, #f6eee8, #eadfd6); border: 1px solid rgba(147,105,84,.1); border-radius: 11px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } .editor_settings_icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .editor_select { position: relative; } .editor_select select { appearance: none; padding-right: 44px!important; cursor: pointer; } .editor_select i { width: 8px; height: 8px; position: absolute; top: 50%; right: 18px; transform: translateY(-70%) rotate(45deg); border-right: 1.5px solid #746b65; border-bottom: 1.5px solid #746b65; pointer-events: none; } .editor_color_control { display: block; } .editor_color_row { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; } .editor_color_swatch { min-height: 40px; position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid #d9d0c8; border-radius: 11px; color: #4f4945; background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; } .editor_color_swatch:hover { border-color: #c8b9ad; box-shadow: 0 5px 16px rgba(50,39,30,.05); } .editor_color_swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .editor_color_swatch span { width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid rgba(0,0,0,.06); border-radius: 8px; background: var(--selected-color); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); pointer-events: none; } .editor_color_swatch b { color: var(--accent-dark); font-size: 11px; pointer-events: none; } .editor_color_presets { display: flex; align-items: center; gap: 7px; margin: 0; } .editor_color_presets button { width: 25px; height: 25px; position: relative; padding: 0; border: 3px solid #fff; border-radius: 50%; background: var(--preset); box-shadow: 0 0 0 1px #d7cec7; cursor: pointer; transition: transform .2s, box-shadow .2s; } .editor_color_presets button:hover, .editor_color_presets button.is_active { transform: scale(1.08); box-shadow: 0 0 0 2px var(--accent); } .editor_envelope_option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 14px; border: 1px solid #ded5cd; border-radius: 14px; background: linear-gradient(135deg, #fbf8f5, #f3ece6); } .editor_envelope_option_icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--accent-dark); background: #fff; border: 1px solid #e3d9d1; border-radius: 11px; box-shadow: 0 5px 13px rgba(50,39,30,.05); } .editor_envelope_option_icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .editor_envelope_option strong, .editor_envelope_option small { display: block; } .editor_envelope_option strong { margin-bottom: 2px; font-size: 12px; } .editor_envelope_option small { color: var(--muted); font-size: 12px; line-height: 1.15; } .editor_audio_option { overflow: hidden; border: 1px solid #ded5cd; border-radius: 14px; background: #fbf8f5; transition: border-color .2s, box-shadow .2s; } .editor_audio_option.is_enabled { border-color: color-mix(in srgb, var(--success) 34%, #ded5cd); box-shadow: 0 8px 24px rgba(50,39,30,.05); } .editor_audio_heading { min-height: 68px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 13px 14px; background: linear-gradient(135deg, #fbf8f5, #f3ece6); } .editor_audio_icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--accent-dark); background: #fff; border: 1px solid #e3d9d1; border-radius: 11px; box-shadow: 0 5px 13px rgba(50,39,30,.05); } .editor_audio_icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .editor_audio_heading strong, .editor_audio_heading small { display: block; } .editor_audio_heading strong { margin-bottom: 2px; font-size: 12px; } .editor_audio_heading small { color: var(--muted); font-size: 12px; line-height: 1.15; } .editor_audio_body { display: grid; grid-template-rows: 0fr; opacity: 0; border-top: 1px solid transparent; transition: grid-template-rows .32s cubic-bezier(.2,.72,.2,1), opacity .22s ease, border-color .25s ease; } .editor_audio_body_inner { min-height: 0; overflow: hidden; padding: 0 14px; transition: padding .32s cubic-bezier(.2,.72,.2,1); } .editor_audio_option.is_enabled .editor_audio_body { grid-template-rows: 1fr; opacity: 1; border-top-color: #e7dfd7; } .editor_audio_option.is_enabled .editor_audio_body_inner { padding: 15px 14px 14px; } .editor_audio_label { display: block; margin-bottom: 9px; color: #4f4945; font-size: 11px; font-weight: 700; } .editor_audio_presets { display: grid; grid-template-columns: 1fr; gap: 8px; } .editor_audio_track { min-width: 0; overflow: hidden; display: grid; grid-template-columns: minmax(145px, .8fr) minmax(0, 1.4fr); align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid #ddd3ca; border-radius: 12px; background: #fff; transition: border-color .2s, box-shadow .2s; } .editor_audio_track:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 7px 18px rgba(50,39,30,.06); } .editor_audio_preset { min-width: 0; cursor: pointer; } .editor_audio_preset input { position: absolute; opacity: 0; pointer-events: none; } .editor_audio_preset > span { min-height: 40px; position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; padding: 4px 6px; border: 0; border-radius: 9px; background: transparent; transition: background .2s; } .editor_audio_preset > span > i { width: 28px; height: 28px; display: grid; place-items: center; color: var(--accent-dark); background: #f3ece6; border-radius: 8px; font: normal 15px/1 Georgia, serif; } .editor_audio_preset strong { overflow: hidden; padding-right: 20px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .editor_audio_track:hover { border-color: #c9b8ab; box-shadow: 0 6px 16px rgba(50,39,30,.05); } .editor_audio_preset input:checked + span { background: color-mix(in srgb, var(--accent) 7%, #fff); } .editor_audio_preset input:checked + span::after { content: "✓"; width: 17px; height: 17px; position: absolute; top: 50%; right: 4px; display: grid; place-items: center; transform: translateY(-50%); color: #fff; background: var(--success); border-radius: 50%; font-size: 10px; font-weight: 900; } .editor_audio_preset input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent); outline-offset: 2px; } .editor_audio_track audio { display: none; } .editor_audio_player { min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; } .editor_audio_player > button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: var(--accent); cursor: pointer; font-size: 10px; transition: transform .18s ease, background .18s ease; } .editor_audio_player > button:hover { transform: scale(1.05); background: var(--accent-dark); } .editor_audio_player > button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent); outline-offset: 2px; } .editor_audio_pause_icon { display: none; font-size: 11px; font-weight: 900; letter-spacing: -2px; transform: translateX(-1px); } .editor_audio_track.is_preview_playing .editor_audio_play_icon { display: none; } .editor_audio_track.is_preview_playing .editor_audio_pause_icon { display: block; } .editor_audio_player input[type="range"] { width: 100%; min-width: 0; height: 4px; min-height: 0; padding: 0; border: 0; border-radius: 999px; accent-color: var(--accent); cursor: pointer; } .editor_audio_player input[type="range"]:disabled { cursor: wait; opacity: .5; } .editor_audio_time { min-width: 73px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; } .editor_audio_time i { margin: 0 3px; font-style: normal; opacity: .55; } .editor_audio_empty { margin: 0; padding: 14px; color: var(--muted); background: #f7f2ee; border-radius: 12px; font-size: 12px; line-height: 1.5; } .editor_audio_empty code { color: var(--accent-dark); font-weight: 700; } .editor_event_settings { display: grid; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .editor_event_settings_heading { display: flex; align-items: center; gap: 11px; } .editor_event_settings_heading > span { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; color: var(--accent-dark); background: #f1e8e1; border-radius: 9px; } .editor_event_settings_heading > span svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .editor_event_settings_heading strong, .editor_event_settings_heading small { display: block; } .editor_event_settings_heading strong { font-size: 12px; } .editor_event_settings_heading small { margin-top: 2px; color: var(--muted); font-size: 12px; } .editor_countdown_info { display: flex; align-items: flex-start; gap: 13px; padding: 15px; color: #5f5148; background: #f3ece6; border-radius: 13px; } .editor_countdown_info > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; color: #fff; background: var(--accent); border-radius: 10px; font-size: 17px; } .editor_countdown_info strong { display: block; font-size: 12px; } .editor_countdown_info p { margin: 4px 0 0; color: var(--muted); font-size: 12px; } .editor_repeater { display: grid; gap: 12px; } .editor_location_item, .editor_schedule_item, .editor_wish_item, .editor_faq_item, .editor_contact_item { display: grid; gap: 12px; padding: 15px; border: 1px solid #ddd3ca; border-radius: 14px; background: #fff; } .editor_schedule_main_fields { grid-template-columns: minmax(100px, .42fr) minmax(0, 1.58fr); align-items: baseline; } .editor_repeater_heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #eee7e1; } .editor_repeater_heading strong { font-size: 12px; } .editor_repeater_heading button { padding: 3px 0; border: 0; color: var(--danger); background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .editor_repeater_heading button:disabled { visibility: hidden; } .editor_add_item { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 11px; border: 1px dashed #cdbeb2; border-radius: 12px; color: var(--accent-dark); background: #f7f2ee; cursor: pointer; font-size: 12px; font-weight: 700; } .editor_add_item:hover { border-color: var(--accent); background: #f1e8e1; } .editor_add_item:disabled { opacity: .5; cursor: default; } .editor_gallery { display: grid; gap: 12px; margin-top: 4px; padding: 15px; border: 1px solid #ddd3ca; border-radius: 14px; background: #fff; } .editor_gallery_heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .editor_gallery_heading strong, .editor_gallery_heading small { display: block; } .editor_gallery_heading strong { font-size: 12px; } .editor_gallery_heading small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.45; } .editor_gallery_heading > span { flex: 0 0 auto; padding: 5px 8px; color: var(--accent-dark); background: #f3ece6; border-radius: 999px; font-size: 11px; font-weight: 700; } .editor_gallery_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .editor_gallery_image { aspect-ratio: 1; min-width: 0; position: relative; overflow: hidden; border-radius: 10px; background: #eee7e1; box-shadow: 0 4px 12px rgba(54,42,34,.06); cursor: grab; touch-action: none; transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease; } .editor_gallery_image img { width: 100%; height: 100%; display: block; object-fit: cover; } .editor_gallery_image button { width: 27px; height: 27px; position: absolute; top: 6px; display: grid; place-items: center; padding: 0; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.18); line-height: 1; transition: transform .18s ease, opacity .18s ease, background .18s ease; } .editor_gallery_image button:hover { transform: scale(1.08); } .editor_gallery_image button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent); outline-offset: 2px; } .editor_gallery_image button:disabled { cursor: default; opacity: .5; } .editor_gallery_drag { left: 6px; background: rgba(43,38,34,.78); cursor: grab; font-size: 16px; touch-action: none; } .editor_gallery_drag:active { cursor: grabbing; } .editor_gallery_remove { right: 6px; padding-bottom: 2px !important; background: rgba(136,45,42,.9); cursor: pointer; font-size: 17px; } .editor_gallery_image.is_drag_source { z-index: 1; opacity: .25; transform: scale(.94); box-shadow: none; cursor: grabbing; } .editor_gallery_ghost { position: fixed; z-index: 1000; margin: 0; pointer-events: none; opacity: .94; transform: rotate(2deg) scale(1.04); box-shadow: 0 18px 38px rgba(44,32,25,.3); transition: none; } .editor_gallery_ghost button, .editor_gallery_ghost input { display: none; } .editor_gallery_dragging { user-select: none; cursor: grabbing; } .editor_gallery_sort_hint { display: block; margin-top: -2px; color: var(--muted); font-size: 11px; line-height: 1.45; } .editor_gallery_upload { min-height: 44px; position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px dashed #cdbeb2; border-radius: 12px; color: var(--accent-dark); background: #f7f2ee; cursor: pointer; font-size: 12px; } .editor_gallery_upload:hover { border-color: var(--accent); background: #f1e8e1; } .editor_gallery_upload:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent); outline-offset: 2px; } .editor_gallery_upload input { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .editor_gallery_upload.is_disabled { cursor: default; opacity: .5; pointer-events: none; } .editor_gallery.is_uploading .editor_gallery_upload { cursor: wait; } .editor_gallery.is_saving_order .editor_gallery_image { pointer-events: none; } .editor_gallery_status { min-height: 14px; margin: -3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; } .editor_gallery_status:empty { display: none; } .editor_gallery_status.is_error { color: var(--danger); font-weight: 750; } .editor_dress_colors { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; } .editor_dress_color { width: 44px; height: 44px; position: relative; } .editor_dress_color label, .editor_dress_color label span { width: 100%; height: 100%; display: block; } .editor_dress_color label { overflow: hidden; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #d4c9c0; cursor: pointer; } .editor_dress_color label input { width: 100%; height: 100%; min-height: 0; position: absolute; inset: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; } .editor_dress_color label span { background: var(--dress-color); } .editor_dress_color button { width: 18px; height: 18px; position: absolute; top: -5px; right: -5px; display: grid; place-items: center; padding: 0; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--danger); cursor: pointer; font-size: 12px; line-height: 1; } .editor_dress_color button:disabled { display: none; } .editor_add_color { width: 44px; height: 44px; position: relative; padding: 0; border: 1px dashed #bfaea1; border-radius: 50%; color: var(--accent-dark); background: #f5efea; cursor: pointer; } .editor_add_color::before, .editor_add_color::after { position: absolute; top: 50%; left: 50%; content: ""; border-radius: 999px; background: currentColor; transform: translate(-50%, -50%); } .editor_add_color::before { width: 16px; height: 2px; } .editor_add_color::after { width: 2px; height: 16px; } .editor_add_color:disabled { opacity: .45; cursor: default; } .editor_add_color[hidden] { display: none; } .publish_box { margin: 14px 0 0; } .publish_box_link { padding: 15px; } .publish_box_compact { padding: 12px; } .publish_box_link .field { gap: 7px; } .publish_link_row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .publish_link_row input { min-width: 0; min-height: 44px; padding: 10px 12px; border-color: #d9d0c8; border-radius: 11px; background: #f8f5f2; font-size: 11px; } .publish_link_actions { display: flex; align-items: stretch; gap: 7px; } .publish_link_actions .button { min-height: 44px; padding-inline: 16px; } .editor_open_button, .editor_publication_button { gap: 8px; border-radius: 12px; font-size: 11px; font-weight: 700; box-shadow: 0 8px 19px rgba(68,45,35,.18); transition: color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease, filter .22s ease; } .editor_open_button { border: 1px solid rgba(103,72,58,.15); background: linear-gradient(135deg, var(--accent), var(--accent-dark)); } .editor_publication_button { border: 1px solid rgba(47,104,73,.16); background: linear-gradient(135deg, #4b8a66, #2f6849); box-shadow: 0 8px 19px rgba(47,104,73,.2); } .editor_open_button span, .editor_publication_button span { width: 22px; height: 22px; display: grid; place-items: center; } .editor_open_button svg, .editor_publication_button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .editor_open_button b, .editor_publication_button b { font: inherit; } .editor_open_button:hover, .editor_open_button:focus-visible, .editor_publication_button:hover, .editor_publication_button:focus-visible { color: #fff; box-shadow: 0 12px 25px rgba(55,39,31,.25); filter: brightness(.9); outline: none; transform: translateY(-2px); } .public_copy_button { width: 44px; min-height: 44px; position: relative; overflow: visible; display: grid; place-items: center; padding: 0; border: 1px solid #d9d0c8; border-radius: 11px; color: var(--accent-dark); background: #f3ece6; cursor: pointer; transition: color .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease; } .public_copy_button:hover, .public_copy_button:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 10px 22px rgba(72,48,37,.2); outline: none; transform: translateY(-2px); } .public_copy_button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; } .public_copy_button.is_copied { color: #fff; background: var(--success); border-color: var(--success); } .public_copy_button::before { position: absolute; z-index: 30; bottom: calc(100% + 10px); left: 50%; content: "Скопійовано"; padding: 7px 10px; border-radius: 8px; color: #fff; background: #2f2925; box-shadow: 0 8px 20px rgba(38,30,26,.2); opacity: 0; visibility: hidden; pointer-events: none; font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap; transform: translate(-50%, 5px); transition: opacity .18s ease, visibility .18s ease, transform .18s ease; } .public_copy_button::after { position: absolute; z-index: 29; bottom: calc(100% + 5px); left: 50%; content: ""; border-width: 5px 5px 0; border-style: solid; border-color: #2f2925 transparent transparent; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%); transition: opacity .18s ease, visibility .18s ease; } .public_copy_button.is_copied::before, .public_copy_button.is_copied::after { opacity: 1; visibility: visible; } .public_copy_button.is_copied::before { transform: translate(-50%, 0); } .qr_open_button { width: 44px; min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid #d9d0c8; border-radius: 11px; color: var(--accent-dark); background: #f3ece6; cursor: pointer; transition: color .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease; } .qr_open_button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .qr_open_button:hover, .qr_open_button:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 10px 22px rgba(72,48,37,.2); outline: none; transform: translateY(-2px); } .my_card_qr_button { flex: 0 0 42px; width: 42px; min-width: 42px; min-height: 42px; } .preview_panel { width: min(100%, 560px); height: var(--preview-panel-height, 740px); min-width: 400px; min-height: 360px; max-height: 740px; position: relative; padding: 14px; border-radius: 20px; background: #e8e1db; transition: height .22s ease; } .preview_popup_header { display: none; } .editor_preview_expand { width: 42px; height: 42px; position: absolute; z-index: 4; top: 15px; right: 15px; display: none; place-items: center; padding: 0; border: 1px solid rgba(103,72,58,.13); border-radius: 12px; color: var(--accent-dark); background: rgba(255,255,255,.92); box-shadow: 0 8px 20px rgba(55,42,34,.14); cursor: zoom-in; transition: color .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease; } .editor_preview_expand svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .editor_preview_expand:hover, .editor_preview_expand:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 12px 25px rgba(72,48,37,.23); outline: none; transform: translateY(-2px); } .phone_frame { width: min(100%, 420px); height: calc(var(--preview-panel-height, 740px) - 28px); min-height: 332px; max-height: 710px; position: relative; margin: 0 auto; overflow: hidden; border: 10px solid #272522; border-radius: 34px; background: #fff; box-shadow: 0 18px 60px rgba(39,35,32,.25); transition: height .22s ease; } .phone_frame iframe { width: 100%; height: 100%; position: absolute; inset: 0; z-index: 1; border: 0; opacity: 1; background: #fff; } .phone_frame iframe.preview_frame_buffer { z-index: 2; visibility: hidden; opacity: 0; } .phone_frame iframe.preview_frame_buffer.preview_frame_ready { visibility: visible; opacity: 1; } .empty_state { padding: 50px; border: 1px dashed #cbbeb2; border-radius: 18px; color: var(--muted); text-align: center; } .table_wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; } table { width: 100%; border-collapse: collapse; } th, td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 14px; } th { background: #f3ede7; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } .invitation_page { --accent: #8f6652; color: #322c28; background: #f9f5ef; } .invite_shell { overflow: hidden; } .invite_hero { min-height: 100svh; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; background: radial-gradient(circle at 50% 33%, color-mix(in srgb, var(--accent) 26%, #fff), transparent 38%), #f7f1ea; } .invite_hero::before, .invite_hero::after { content: ""; position: absolute; width: 300px; height: 460px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 50%; transform: rotate(32deg); } .invite_hero::before { left: -190px; top: -160px; } .invite_hero::after { right: -190px; bottom: -160px; } .invite_kicker, .invite_label { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .invite_hero h1 { max-width: 900px; margin: 22px 0; color: var(--accent); font-size: clamp(58px, 12vw, 130px); } .invite_subtitle { max-width: 620px; color: #6f655e; font-size: 18px; } .invite_date { display: flex; align-items: center; gap: 14px; margin-top: 25px; padding: 13px 18px; border: 1px solid color-mix(in srgb, var(--accent) 35%, #fff); border-radius: 999px; } .invite_date strong { font-size: 18px; } .invite_date span { color: var(--accent); } .invite_scroll { position: absolute; bottom: 34px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; } .invite_section { min-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 24px; text-align: center; } .invite_section h2 { max-width: 760px; margin: 10px auto 24px; font-size: clamp(40px, 7vw, 76px); } .invite_lead, .invite_section > p:not(.invite_label) { max-width: 650px; color: #72675f; font-size: 18px; } .invite_location { color: #fff; background: var(--accent); } .invite_location .invite_label, .invite_location > p { color: rgba(255,255,255,.74)!important; } .invite_dress { background: #eee5dc; } .color_dots { display: flex; gap: 12px; margin-top: 28px; } .color_dots i { width: 42px; height: 42px; border: 5px solid rgba(255,255,255,.65); border-radius: 50%; background: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.1); } .color_dots i:nth-child(2) { filter: brightness(1.35); } .color_dots i:nth-child(3) { filter: saturate(.45) brightness(1.55); } .color_dots i:nth-child(4) { filter: brightness(.7); } .invite_rsvp { min-height: 720px; } .rsvp_form { width: min(540px, 100%); display: grid; gap: 16px; margin-top: 18px; text-align: left; } .rsvp_form label { display: grid; gap: 7px; } .rsvp_form label span { font-size: 12px; font-weight: 700; } .rsvp_form input, .rsvp_form select, .rsvp_form textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #d8cec4; border-radius: 10px; background: #fff; } .rsvp_counts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .rsvp_form button { min-height: 54px; border: 0; border-radius: 999px; color: #fff; background: var(--accent); font-weight: 700; cursor: pointer; } .rsvp_success { padding: 20px 28px; border-radius: 14px; color: #255c3e; background: #dceee3; } .invite_footer { padding: 28px; color: rgba(255,255,255,.78); background: #292521; text-align: center; font-size: 12px; } .template_night { color: #eae1d8; background: #151515; } .template_night .invite_hero { background: radial-gradient(circle at 50% 33%, color-mix(in srgb, var(--accent) 28%, #121212), transparent 40%), #121212; } .template_night .invite_subtitle, .template_night .invite_lead, .template_night .invite_section > p:not(.invite_label) { color: #bdb2a7; } .template_night .invite_dress { background: #211f1d; } .template_night .invite_rsvp { background: #171615; } .template_night .rsvp_form input, .template_night .rsvp_form select, .template_night .rsvp_form textarea { color: #eee; background: #262321; border-color: #4a423c; } .sr_only { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .my_invitations_section { min-height: 680px; padding: 28px 0 100px; } .my_dashboard_header { animation: publication_surface_in .48s cubic-bezier(.22,.61,.36,1) both; } .my_create_invitation { min-height: 54px; position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 14px 0 16px; border: 1px solid rgba(103,72,58,.15); border-radius: 15px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 11px 26px rgba(103,72,58,.22); text-decoration: none; font-size: 13px; font-weight: 700; transition: color .22s ease, filter .22s ease, box-shadow .22s ease, transform .22s ease; } .my_create_invitation > span { width: 24px; height: 24px; display: grid; place-items: center; } .my_create_invitation svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .my_create_invitation b { font: inherit; } .my_create_invitation i, .my_card_edit_button i { width: 9px; height: 9px; margin-left: 3px; border-top: 1.7px solid currentColor; border-right: 1.7px solid currentColor; transform: rotate(45deg); transition: transform .22s ease; } .my_create_invitation:hover, .my_create_invitation:focus-visible { color: #fff; filter: brightness(.9); box-shadow: 0 16px 32px rgba(83,57,45,.29); outline: none; transform: translateY(-2px); } .my_create_invitation:hover i, .my_create_invitation:focus-visible i { transform: translateX(3px) rotate(45deg); } .invitation_filters { margin-bottom: 20px; padding: 0; animation: publication_surface_in .48s .08s cubic-bezier(.22,.61,.36,1) both; } .my_filters_controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .filter_tabs { min-width: 0; display: flex; align-items: center; gap: 5px; overflow-x: auto; padding: 4px; border-radius: 13px; background: #f3eee9; scrollbar-width: none; } .filter_tabs::-webkit-scrollbar { display: none; } .filter_tab { min-height: 39px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; color: #625a54; background: transparent; text-decoration: none; font-size: 11px; font-weight: 700; white-space: nowrap; transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; } .filter_tab span { min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 6px; color: var(--muted); border-radius: 999px; background: #fff; font-size: 10px; } .filter_tab:hover, .filter_tab:focus-visible { color: var(--accent-dark); border-color: rgba(103,72,58,.1); background: rgba(255,255,255,.72); outline: none; transform: translateY(-1px); } .filter_tab.is_active { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 6px 15px rgba(103,72,58,.2); } .filter_tab.is_active span { color: var(--accent-dark); background: #fff; } .publication_filter { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } .publication_filter label { min-width: 190px; } .publication_filter .custom_select_trigger { min-height: 47px; padding: 0 15px; border-color: #ddd3cb; border-radius: 12px; background: #fff; font-size: 11px; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; } .publication_filter .custom_select_trigger:hover, .publication_filter .custom_select_trigger:focus-visible { border-color: #cdbeb2; background: #fff; box-shadow: 0 8px 20px rgba(50,39,30,.06); } .publication_filter select { min-height: 47px; padding: 0 38px 0 13px; border: 1px solid #ddd3cb; border-radius: 12px; color: var(--ink); background: #faf7f4; } .my_invitations_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .my_invitation_card { position: relative; overflow: visible; border: 1px solid #dfd6cf; border-radius: 20px; background: #fff; box-shadow: 0 13px 38px rgba(50,39,30,.055); animation: publication_surface_in .48s .18s cubic-bezier(.22,.61,.36,1) both; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; } .my_invitation_card:nth-child(2n) { animation-delay: .24s; } .my_invitation_card:nth-child(3n) { animation-delay: .3s; } .my_invitation_card:hover { border-color: #ccbeb3; box-shadow: 0 20px 48px rgba(50,39,30,.1); transform: translateY(-4px); } .my_invitation_card:hover, .my_invitation_card:focus-within, .my_invitation_card:has(.card_more[open]) { z-index: 6; } .my_card_top { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #eee7e1; background: linear-gradient(135deg, #fcfaf8, #f7f1ec); border-radius: 20px 20px 0 0; } .my_card_template { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--ink); } .my_card_template > div { min-width: 0; } .my_card_template > span { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; color: var(--accent-dark); border-radius: 11px; background: #eee2d9; } .my_card_template svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .my_card_template small, .my_card_template strong { overflow: hidden; max-width: 200px; display: block; text-overflow: ellipsis; white-space: nowrap; } .my_card_template small { margin-bottom: 2px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .my_card_template strong { font-size: 11px; } .my_card_badges { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; } .payment_badge, .publication_badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; } .payment_badge::before, .publication_badge::before { width: 6px; height: 6px; flex: 0 0 6px; content: ""; border-radius: 50%; background: currentColor; opacity: .72; } .payment_unpaid { color: #8a4e24; background: #f8e5d5; } .payment_pending, .payment_due { color: #715b1b; background: #f5ebbd; } .payment_paid { color: #285d40; background: #dcefe4; } .payment_failed { color: #8c3e3d; background: #f5dddd; } .publication_draft { color: #665e57; background: #eeeae6; } .publication_published { color: #37617b; background: #deedf5; } .my_card_main { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 21px 20px 18px; } .my_invitation_card h2 { min-width: 0; margin: 0; font-size: clamp(27px, 3vw, 36px); line-height: 1.08; overflow-wrap: anywhere; } .my_card_price { flex: 0 0 auto; display: grid; justify-items: end; gap: 3px; margin: 0; padding-left: 15px; border-left: 1px solid var(--line); } .my_card_price span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .my_card_price strong { color: var(--accent-dark); font: 500 22px/1 Georgia, serif; white-space: nowrap; } .my_card_meta { display: grid; grid-template-columns: 1fr .82fr 1.15fr; gap: 7px; margin: 0 20px 18px; } .my_card_meta > div { min-width: 0; display: grid; grid-template-columns: 31px minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px; border: 1px solid #ece5df; border-radius: 11px; background: #faf8f6; } .my_meta_icon { width: 31px; height: 31px; display: grid; place-items: center; color: var(--accent-dark); border-radius: 9px; background: #efe6df; } .my_meta_icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .my_card_meta p, .my_card_meta small, .my_card_meta strong { min-width: 0; display: block; margin: 0; } .my_card_meta small { margin-bottom: 2px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; } .my_card_meta strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .my_card_actions { min-height: 68px; position: relative; display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-top: 1px solid #eee7e1; } .my_card_edit_button, .my_card_preview_button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid rgba(103,72,58,.14); border-radius: 12px; text-decoration: none; font-size: 11px; font-weight: 700; transition: color .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease, filter .22s ease; } .my_card_edit_button { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 8px 19px rgba(68,45,35,.18); } .my_card_preview_button { color: var(--accent-dark); border-color: #ded2c9; background: #f6f0eb; } .my_card_edit_button > span, .my_card_preview_button > span { width: 19px; height: 19px; display: grid; place-items: center; } .my_card_edit_button svg, .my_card_preview_button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .my_card_edit_button b, .my_card_preview_button b { font: inherit; } .my_card_edit_button:hover, .my_card_edit_button:focus-visible { color: #fff; filter: brightness(.9); box-shadow: 0 12px 25px rgba(55,39,31,.25); outline: none; transform: translateY(-2px); } .my_card_edit_button:hover i, .my_card_edit_button:focus-visible i { transform: translateX(3px) rotate(45deg); } .my_card_payment_button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid rgba(47,104,73,.15); border-radius: 12px; text-decoration: none; font-size: 11px; font-weight: 700; } .my_card_payment_button > span { width: 19px; height: 19px; display: grid; place-items: center; } .my_card_payment_button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .my_card_payment_button b { font: inherit; } .my_card_preview_button:hover, .my_card_preview_button:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 9px 20px rgba(103,72,58,.16); outline: none; transform: translateY(-2px); } .my_card_qr_button { flex: 0 0 43px; width: 43px; min-width: 43px; min-height: 43px; border-radius: 12px; box-shadow: none; } .my_card_qr_button:hover, .my_card_qr_button:focus-visible { box-shadow: 0 9px 20px rgba(103,72,58,.16); } .card_more { margin-left: auto; } .card_more summary { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid #ded4cc; border-radius: 12px; color: #665d56; background: #faf7f4; cursor: pointer; list-style: none; transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease; } .card_more summary::-webkit-details-marker { display: none; } .card_more summary svg { width: 21px; height: 21px; fill: currentColor; stroke: none; } .card_more summary:hover, .card_more summary:focus-visible, .card_more[open] summary { color: #fff; border-color: var(--ink); background: var(--ink); outline: none; transform: translateY(-2px); } .card_more > div { width: 270px; position: absolute; z-index: 8; right: 12px; bottom: 64px; padding: 16px; border: 1px solid #ded4cc; border-radius: 15px; background: #fff; box-shadow: 0 20px 50px rgba(38,30,26,.18); animation: publication_alert_in .2s ease both; } .card_more > div::after { position: absolute; right: 15px; bottom: -6px; width: 11px; height: 11px; content: ""; border-right: 1px solid #ded4cc; border-bottom: 1px solid #ded4cc; background: #fff; transform: rotate(45deg); } .card_more > div > strong { display: block; margin-bottom: 4px; font-size: 12px; } .card_more p { margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.45; } .card_more form { margin: 0; } .card_more button { min-height: 39px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #ead5d2; border-radius: 10px; color: #9a3c3b; background: #fff7f6; cursor: pointer; font-size: 11px; font-weight: 700; transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease; } .card_more button span { width: 17px; height: 17px; display: grid; place-items: center; } .card_more button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .card_more button:hover, .card_more button:focus-visible { color: #fff; border-color: var(--danger); background: var(--danger); outline: none; transform: translateY(-1px); } .my_pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; animation: publication_surface_in .48s .26s cubic-bezier(.22,.61,.36,1) both; } .my_pagination_pages { display: flex; align-items: center; gap: 6px; } .my_pagination a { min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 1px solid #ddd2ca; border-radius: 12px; color: var(--accent-dark); background: #fff; box-shadow: 0 6px 17px rgba(50,39,30,.05); text-decoration: none; font-size: 11px; font-weight: 700; transition: color .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease; } .my_pagination a:hover, .my_pagination a:focus-visible, .my_pagination a.is_active { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 10px 22px rgba(103,72,58,.2); outline: none; transform: translateY(-2px); } .my_pagination a.is_active { pointer-events: none; } .my_pagination_edge { min-width: 92px !important; } .my_pagination_edge b { font: inherit; } .my_pagination_edge.is_disabled { opacity: .42; pointer-events: none; } .page_notification_error { background: var(--danger); } .my_empty_state { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 52px 20px; border: 1px dashed #cdbfb4; border-radius: 20px; background: rgba(255,255,255,.88); box-shadow: 0 13px 38px rgba(50,39,30,.04); text-align: center; animation: publication_surface_in .48s .18s cubic-bezier(.22,.61,.36,1) both; } .my_empty_mark { width: 62px; height: 62px; margin-bottom: 18px; display: grid; place-items: center; color: var(--accent-dark); border: 1px solid #e1d3c8; border-radius: 19px; background: #f1e8e1; } .my_empty_mark svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .my_empty_state h2 { margin-bottom: 8px; font-size: 34px; } .my_empty_state p { max-width: 520px; margin-bottom: 21px; color: var(--muted); font-size: 13px; } .my_empty_button { min-height: 50px; } .my_reset_filters { min-height: 43px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid #ded2c8; border-radius: 11px; color: var(--accent-dark); background: #f8f3ef; text-decoration: none; font-size: 12px; font-weight: 700; transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease; } .my_reset_filters span { width: 18px; height: 18px; display: grid; place-items: center; } .my_reset_filters svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .my_reset_filters:hover, .my_reset_filters:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); outline: none; transform: translateY(-2px); } .static_hero { position: relative; overflow: hidden; padding: 110px 0 100px; background: radial-gradient(circle at 82% 22%, #ead8cc 0, transparent 31%), linear-gradient(135deg, #fbf8f4, #f1e7df); text-align: center; } .static_hero::after { content: ""; width: 360px; height: 360px; position: absolute; right: -150px; bottom: -220px; border: 1px solid #d5c2b5; border-radius: 50%; } .static_hero h1 { margin-bottom: 22px; font-size: clamp(50px, 7vw, 84px); } .static_hero p:not(.eyebrow) { margin-bottom: 30px; color: var(--muted); font-size: 19px; } .contacts_page { position: relative; overflow: hidden; padding: 34px 0 92px; } .contacts_page::before { width: 460px; height: 460px; position: absolute; top: -250px; right: -190px; content: ""; border: 1px solid rgba(147,105,84,.16); border-radius: 50%; pointer-events: none; } .contacts_intro { min-height: 210px; position: relative; overflow: hidden; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-bottom: 20px; padding: 32px 34px; border: 1px solid #dfd4cb; border-radius: 24px; background: linear-gradient(130deg, rgba(255,255,255,.98), rgba(246,237,230,.96)); box-shadow: 0 18px 48px rgba(50,39,30,.07); animation: publication_surface_in .48s cubic-bezier(.22,.61,.36,1) both; } .contacts_intro::after { width: 210px; height: 210px; position: absolute; right: 11%; bottom: -155px; content: ""; border: 1px solid rgba(147,105,84,.16); border-radius: 50%; pointer-events: none; } .contacts_intro_icon { width: 62px; height: 62px; position: relative; z-index: 1; display: grid; place-items: center; color: var(--accent-dark); border: 1px solid #dfcfc3; border-radius: 18px; background: #f1e5dc; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); } .contacts_intro_icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .contacts_intro_copy { min-width: 0; position: relative; z-index: 1; } .contacts_intro_copy .eyebrow { margin-bottom: 6px; } .contacts_intro_copy h1 { max-width: 730px; margin: 0 0 9px; font-size: clamp(37px, 4.8vw, 58px); line-height: 1.02; letter-spacing: -.035em; } .contacts_intro_copy > p:last-child { max-width: 650px; margin: 0; color: var(--muted); font-size: 14px; } .contacts_intro_hint { min-width: 238px; position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid rgba(147,105,84,.14); border-radius: 15px; background: rgba(255,255,255,.72); } .contacts_intro_hint > i { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(65,116,89,.1); } .contacts_intro_hint p, .contacts_intro_hint strong, .contacts_intro_hint small { display: block; margin: 0; } .contacts_intro_hint strong { font-size: 11px; } .contacts_intro_hint small { margin-top: 2px; color: var(--muted); font-size: 10px; } .contact_cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .contact_card { min-height: 332px; position: relative; overflow: hidden; display: flex; align-items: flex-start; flex-direction: column; padding: 25px; border: 1px solid #dfd6cf; border-radius: 20px; background: #fff; box-shadow: 0 13px 38px rgba(50,39,30,.055); animation: publication_surface_in .48s .08s cubic-bezier(.22,.61,.36,1) both; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; } .contact_card:nth-child(2) { animation-delay: .14s; } .contact_card:nth-child(3) { animation-delay: .2s; } .contact_card::after { width: 128px; height: 128px; position: absolute; top: -78px; right: -67px; content: ""; border: 1px solid rgba(147,105,84,.14); border-radius: 50%; transition: transform .35s ease; } .contact_card:hover { border-color: #cbbcaf; box-shadow: 0 20px 48px rgba(50,39,30,.1); transform: translateY(-5px); } .contact_card:hover::after { transform: scale(1.18); } .contact_card_heading { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 24px; } .contact_card_icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--accent-dark); border: 1px solid #e2d5cc; border-radius: 14px; background: linear-gradient(145deg, #f5ece5, #eadfd6); transition: color .22s ease, background-color .22s ease, transform .28s ease; } .contact_card_icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .contact_card:hover .contact_card_icon { color: #fff; background: var(--accent); transform: rotate(-4deg) scale(1.04); } .contact_card_number { color: #b4a9a1; font: 500 24px/1 Georgia, serif; } .contact_card .eyebrow { margin-bottom: 5px; } .contact_card h2 { margin: 0 0 10px; font-size: 27px; line-height: 1.12; } .contact_card > p:not(.eyebrow) { margin: 0 0 22px; color: var(--muted); font-size: 13px; } .contact_action { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 5px 6px 5px 15px; border: 1px solid #ded3ca; border-radius: 13px; color: var(--accent-dark); background: #f8f3ef; text-decoration: none; font-size: 11px; font-weight: 700; transition: color .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease; } .contact_action > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .contact_action > i { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--accent); transition: background-color .22s ease, transform .22s ease; } .contact_action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .contact_action:hover, .contact_action:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 10px 23px rgba(103,72,58,.19); outline: none; transform: translateY(-2px); } .contact_action:hover > i, .contact_action:focus-visible > i { background: rgba(255,255,255,.15); transform: translateX(2px); } .contact_pending { min-height: 48px; display: flex; align-items: center; gap: 10px; margin-top: auto; color: #8d847e; font-size: 11px; font-weight: 700; } .contact_pending > i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #c9bdb4; box-shadow: 0 0 0 5px #f3eeea; } .legal_hero { padding: 90px 0 62px; background: linear-gradient(135deg, #f8f3ee, #efe3da); border-bottom: 1px solid var(--line); } .legal_hero h1 { margin-bottom: 15px; font-size: clamp(48px, 7vw, 76px); } .legal_hero p:not(.eyebrow) { margin: 0; color: var(--muted); } .legal_section { padding: 70px 0 110px; } .legal_layout { display: grid; grid-template-columns: 240px minmax(0, 760px); justify-content: center; gap: 70px; } .legal_nav { position: sticky; top: 110px; align-self: start; display: flex; align-items: flex-start; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; } .legal_nav strong { margin-bottom: 5px; font-size: 13px; } .legal_nav a { color: var(--muted); font-size: 12px; text-decoration: none; } .legal_nav a:hover { color: var(--accent); } .legal_content section { scroll-margin-top: 110px; padding-bottom: 34px; margin-bottom: 36px; border-bottom: 1px solid var(--line); } .legal_content section:last-child { margin-bottom: 0; border-bottom: 0; } .legal_content h2 { margin-bottom: 18px; font-size: clamp(30px, 4vw, 42px); } .legal_content p, .legal_content li { color: #5f5954; } .legal_content li + li { margin-top: 9px; } .legal_content a { color: var(--accent-dark); font-weight: 700; text-underline-offset: 3px; } .cookie_table { display: grid; gap: 12px; margin: 24px 0; } .cookie_table > div { display: grid; grid-template-columns: 140px 130px 1fr; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; } .cookie_table span { color: var(--accent); font-size: 12px; font-weight: 700; } .cookie_table p { margin: 0; font-size: 13px; } .test_data_note { width: fit-content; display: inline-flex; margin: 0 0 24px; padding: 8px 12px; color: #735b18; background: #f5ebbd; border-radius: 999px; font-size: 12px; font-weight: 700; } .pricing_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .pricing_card { position: relative; display: flex; align-items: stretch; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 14px 42px rgba(50,39,30,.06); } .pricing_card.is_recommended { transform: translateY(-10px); border: 2px solid var(--accent); box-shadow: 0 22px 55px rgba(91,61,46,.14); } .pricing_card h3 { margin: 0 0 18px; font: 500 34px/1.08 Georgia, serif; } .pricing_templates_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pricing_extras { margin-top: 24px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(340px, 1.15fr); gap: 38px; align-items: center; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 14px 42px rgba(50,39,30,.06); } .pricing_extras h3 { margin-bottom: 9px; font: 500 32px/1.1 Georgia, serif; } .pricing_extras p:not(.eyebrow) { margin: 0; color: var(--muted); } .pricing_extras ul { margin: 0; padding: 0; list-style: none; } .pricing_extras li { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); } .pricing_extras li:last-child { border-bottom: 0; } .pricing_extras li span, .pricing_extras li small { display: block; } .pricing_extras li small { color: var(--muted); font-size: 11px; } .pricing_extras li strong { color: var(--accent-dark); white-space: nowrap; } .create_access_page, .created_success_page { min-height: calc(100svh - 76px); display: grid; place-items: center; padding: 68px 0 78px; background: radial-gradient(circle at 16% 18%, rgba(192,144,119,.18) 0, transparent 30%), radial-gradient(circle at 84% 82%, rgba(117,79,61,.12) 0, transparent 31%), linear-gradient(145deg, #fbf8f4, #f4ece6); } .create_access_container { display: grid; place-items: center; } .create_access_card { width: min(100%, 610px); position: relative; overflow: hidden; display: grid; justify-items: center; padding: 48px 52px 42px; border: 1px solid rgba(219,205,195,.92); border-radius: 28px; background: rgba(255,255,255,.94); box-shadow: 0 32px 80px rgba(55,39,31,.13), inset 0 1px rgba(255,255,255,.8); text-align: center; animation: create_access_in .52s cubic-bezier(.22,.61,.36,1) backwards; } .create_access_card::before { height: 3px; position: absolute; top: 0; right: 72px; left: 72px; content: ""; background: linear-gradient(90deg, transparent, var(--accent), transparent); } .create_access_icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid color-mix(in srgb, var(--accent) 30%, #fff); border-radius: 18px; color: #fff; background: linear-gradient(145deg, var(--accent), var(--accent-dark)); box-shadow: 0 13px 30px rgba(103,72,58,.24); transform: rotate(-3deg); animation: create_access_icon_in .58s .12s cubic-bezier(.22,.61,.36,1) backwards; } .create_access_icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .create_access_card .eyebrow { margin-bottom: 8px; } .create_access_card h1 { max-width: 480px; margin: 0 0 11px; font-size: clamp(38px, 5vw, 54px); } .create_access_lead { max-width: 410px; margin: 0; color: var(--muted); font-size: 15px; } .create_access_errors { width: 100%; margin: 24px 0 0; text-align: left; font-size: 13px; } .create_access_errors ul { padding-left: 20px; } .create_access_form { width: 100%; display: grid; gap: 13px; margin-top: 30px; } .create_email_field { display: grid; gap: 8px; text-align: left; } .create_email_field > span:first-child { padding-left: 2px; color: var(--ink); font-size: 12px; font-weight: 700; } .create_email_control { min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 0 17px; border: 1px solid #d9cdc4; border-radius: 16px; background: #fff; box-shadow: 0 7px 20px rgba(55,39,31,.045); cursor: text; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; } .create_email_control:hover { border-color: color-mix(in srgb, var(--accent) 55%, #d9cdc4); box-shadow: 0 10px 25px rgba(55,39,31,.08); } .create_email_control:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent), 0 12px 28px rgba(55,39,31,.08); transform: translateY(-1px); } .create_email_control > svg { width: 21px; height: 21px; flex: 0 0 21px; fill: none; stroke: var(--accent); stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease; } .create_email_control:focus-within > svg { transform: scale(1.08); } .create_email_control input { width: 100%; min-width: 0; height: 60px; padding: 0; border: 0; color: var(--ink); background: transparent; outline: 0; font-size: 16px; } .create_email_control input:-webkit-autofill, .create_email_control input:-webkit-autofill:hover, .create_email_control input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px #fff inset; box-shadow: 0 0 0 1000px #fff inset; caret-color: var(--ink); transition: background-color 9999s ease-out; } .create_email_control input:autofill { color: var(--ink); background: #fff; box-shadow: 0 0 0 1000px #fff inset; } .create_email_control input::placeholder { color: #aaa09a; } .create_email_control input[aria-invalid="true"] { color: #7e2525; } .create_access_submit { min-height: 60px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 9px 0 23px; border: 0; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 13px 28px rgba(103,72,58,.24); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; transition: box-shadow .22s ease, transform .22s ease, filter .22s ease; } .create_access_submit_arrow { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(255,255,255,.1); transition: background-color .22s ease, transform .22s ease; } .create_access_submit_arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .create_access_submit:hover, .create_access_submit:focus-visible { color: #fff; box-shadow: 0 18px 36px rgba(80,53,42,.31); filter: brightness(.9); outline: none; transform: translateY(-3px); } .create_access_submit:hover .create_access_submit_arrow, .create_access_submit:focus-visible .create_access_submit_arrow { background: rgba(255,255,255,.16); transform: translateX(4px); } .create_access_submit:active { transform: translateY(-1px); } .auth_step { width: 100%; display: grid; justify-items: center; } .auth_step[hidden], .auth_busy[hidden] { display: none; } .auth_step.is_active { animation: auth_step_in .34s cubic-bezier(.22,.61,.36,1) both; } .auth_code_step .create_access_lead strong { color: var(--ink); overflow-wrap: anywhere; } .auth_code_control input { text-align: center; font-size: 24px; font-weight: 700; letter-spacing: .32em; font-variant-numeric: tabular-nums; } .auth_code_control input::placeholder { color: #c5bbb4; letter-spacing: .32em; } .auth_form_message { width: 100%; margin: -2px 0 0; padding: 10px 12px; border: 1px solid #ead2d0; border-radius: 11px; color: #8b3635; background: #fff4f3; text-align: left; font-size: 11px; line-height: 1.45; } .auth_code_actions { width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px 18px; margin-top: 17px; } .auth_code_actions button { padding: 3px 0; border: 0; color: var(--accent-dark); background: transparent; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; transition: color .2s ease, opacity .2s ease; } .auth_code_actions button:hover, .auth_code_actions button:focus-visible { color: var(--accent); outline: none; } .auth_code_actions button:disabled { color: #aaa09a; cursor: default; opacity: .75; } .create_access_submit:disabled { cursor: wait; filter: grayscale(.15); opacity: .75; transform: none; } .auth_busy { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; border-radius: inherit; background: rgba(255,255,255,.55); backdrop-filter: blur(2px); } .auth_busy > span { width: 34px; height: 34px; border: 3px solid rgba(147,105,84,.18); border-top-color: var(--accent); border-radius: 50%; animation: qr_modal_loading .75s linear infinite; } @keyframes auth_step_in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } } @keyframes create_access_in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes create_access_icon_in { from { opacity: 0; transform: translateY(9px) rotate(-10deg) scale(.84); } to { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1); } } .created_success_container { display: grid; place-items: center; } .created_success_card { width: min(100%, 620px); position: relative; overflow: hidden; display: grid; justify-items: center; padding: 50px 52px 40px; border: 1px solid rgba(205,218,209,.96); border-radius: 28px; background: rgba(255,255,255,.95); box-shadow: 0 32px 80px rgba(41,58,48,.13), inset 0 1px rgba(255,255,255,.84); text-align: center; animation: created_success_in .55s cubic-bezier(.22,.61,.36,1) backwards; } .created_success_card::before { height: 3px; position: absolute; top: 0; right: 72px; left: 72px; content: ""; background: linear-gradient(90deg, transparent, var(--success), transparent); } .created_success_mark { width: 68px; height: 68px; display: grid; place-items: center; margin-bottom: 19px; border: 1px solid rgba(255,255,255,.4); border-radius: 22px; color: #fff; background: linear-gradient(145deg, #5b9274, #315e47); box-shadow: 0 15px 34px rgba(49,94,71,.25); transform: rotate(-3deg); animation: created_mark_in .6s .1s cubic-bezier(.22,.61,.36,1) backwards; } .created_success_mark svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .created_success_mark path { stroke-dasharray: 28; stroke-dashoffset: 28; animation: created_check_draw .45s .48s ease forwards; } .created_success_card .eyebrow { margin-bottom: 8px; color: #47745c; } .created_success_card h1 { margin: 0 0 11px; font-size: clamp(40px, 5vw, 56px); } .created_success_lead { max-width: 430px; margin: 0; color: var(--muted); font-size: 15px; } .created_email_status { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 13px; margin-top: 28px; padding: 15px 17px; border: 1px solid #cde1d5; border-radius: 16px; color: #315846; background: #edf6f1; text-align: left; opacity: 0; transform: translateY(8px); animation: created_status_in .42s .32s ease forwards; } .created_email_status > svg { width: 23px; height: 23px; justify-self: center; fill: none; stroke: #47745c; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .created_email_status strong, .created_email_status span { display: block; } .created_email_status strong { margin-bottom: 2px; font-size: 13px; } .created_email_status span { overflow-wrap: anywhere; color: #5b7567; font-size: 11px; } .created_email_status.is_failed { border-color: #ead6be; color: #75502e; background: #fbf3e8; } .created_email_status.is_failed > svg { stroke: #9a6a3c; } .created_email_status.is_failed span { color: #84684e; } .created_editor_button { width: 100%; min-height: 60px; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; padding: 0 9px 0 23px; border: 0; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 13px 28px rgba(103,72,58,.24); font-size: 13px; font-weight: 700; text-decoration: none; transition: box-shadow .22s ease, transform .22s ease, filter .22s ease; } .created_editor_button_arrow { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(255,255,255,.1); transition: background-color .22s ease, transform .22s ease; } .created_editor_button_arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .created_editor_button:hover, .created_editor_button:focus-visible { color: #fff; box-shadow: 0 18px 36px rgba(80,53,42,.31); filter: brightness(.9); outline: none; transform: translateY(-3px); } .created_editor_button:hover .created_editor_button_arrow, .created_editor_button:focus-visible .created_editor_button_arrow { background: rgba(255,255,255,.16); transform: translateX(4px); } .created_editor_button:active { transform: translateY(-1px); } .created_private_note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 19px 0 0; color: var(--muted); font-size: 11px; } .created_private_note svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: var(--accent); stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } @keyframes created_success_in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes created_mark_in { from { opacity: 0; transform: translateY(10px) rotate(-11deg) scale(.82); } to { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1); } } @keyframes created_check_draw { to { stroke-dashoffset: 0; } } @keyframes created_status_in { to { opacity: 1; transform: translateY(0); } } .pricing_badge { position: absolute; top: -14px; right: 22px; padding: 7px 12px; color: #fff; background: var(--accent); border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .pricing_value { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 16px; } .pricing_value strong { font: 500 clamp(38px, 4vw, 52px)/1 Georgia, serif; letter-spacing: -.04em; } .pricing_value span { color: var(--muted); font-size: 12px; } .pricing_description { min-height: 50px; margin-bottom: 24px; color: var(--muted); } .pricing_features { flex: 1; display: grid; align-content: start; gap: 12px; margin: 0 0 28px; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; } .pricing_features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; } .pricing_features li span { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; color: #fff; background: var(--success); border-radius: 50%; font-size: 11px; } .pricing_hero { padding: 100px 0 150px; background: radial-gradient(circle at 80% 25%, #ead7ca 0, transparent 32%), linear-gradient(135deg, #fbf8f4, #efe4dc); text-align: center; } .pricing_hero h1 { margin-bottom: 20px; font-size: clamp(52px, 8vw, 88px); } .pricing_hero p:not(.eyebrow) { margin-bottom: 22px; color: var(--muted); font-size: 18px; } .pricing_hero .test_data_note { margin-bottom: 0; } .pricing_page_section { margin-top: -82px; position: relative; } .payment_trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 42px; } .payment_trust > div { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.72); } .payment_trust > div > span { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 15px; color: #fff; background: var(--ink); border-radius: 50%; } .payment_trust strong { display: block; margin-bottom: 7px; } .payment_trust p { margin: 0; color: var(--muted); font-size: 13px; } .pricing_faq details { padding: 20px 0; border-bottom: 1px solid #d7c9be; } .pricing_faq summary { cursor: pointer; font-weight: 700; } .pricing_faq details p { margin: 14px 0 0; color: var(--muted); } .plan_picker { display: grid; gap: 12px; margin: 0; padding: 0 0 22px; border: 0; border-bottom: 1px solid var(--line); } .plan_picker legend { margin-bottom: 10px; font: 600 23px Georgia, serif; } .plan_picker .test_data_note { margin-bottom: 4px; } .plan_picker_grid { display: grid; gap: 9px; } .plan_option { position: relative; cursor: pointer; } .plan_option input { width: 1px; height: 1px; position: absolute; overflow: hidden; opacity: 0; } .plan_option_body { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; transition: border .2s, box-shadow .2s, background .2s; } .plan_option_body > span { display: flex; align-items: center; gap: 8px; } .plan_option_body small { padding: 4px 7px; color: var(--accent-dark); background: #eee5dd; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; } .plan_option_body b { white-space: nowrap; } .plan_option input:checked + .plan_option_body { border-color: var(--accent); background: #faf4ef; box-shadow: 0 0 0 3px rgba(147,105,84,.13); } .plan_option input:focus-visible + .plan_option_body { outline: 3px solid rgba(147,105,84,.26); } .editor_payment_bar { width: min(370px, calc(100% - 40px)); min-height: 82px; position: fixed; z-index: 42; right: 24px; bottom: 24px; transform: translateY(26px) scale(.96); visibility: hidden; opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 13px; margin: 0; padding: 13px; border: 1px solid #d9cbc0; border-radius: 19px; background: rgba(255,255,255,.96); box-shadow: 0 22px 55px rgba(40,31,26,.2); backdrop-filter: blur(18px); transition: transform .32s cubic-bezier(.2,.72,.2,1), opacity .24s ease, visibility .32s; } .editor_payment_bar.is_visible { transform: translateY(0) scale(1); visibility: visible; opacity: 1; pointer-events: auto; } .payment_dock_icon { width: 38px; height: 44px; flex: 0 0 38px; display: grid; place-items: center; color: #3f7658; } .payment_dock_icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .payment_dock_copy { min-width: 0; display: grid; line-height: 1.15; } .payment_dock_copy small { overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .payment_dock_copy strong { margin-top: 4px; font: 500 23px Georgia, serif; white-space: nowrap; } .payment_dock_button { min-height: 50px; display: inline-flex; align-items: center; gap: 9px; margin-left: auto; padding: 0 9px 0 15px; border: 1px solid rgba(40,102,69,.12); border-radius: 13px; color: #fff; background: linear-gradient(135deg, #4b8a66, #2f6849); box-shadow: 0 9px 20px rgba(47,104,73,.2); text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; transition: box-shadow .22s ease, transform .22s ease, filter .22s ease; } .payment_dock_button:hover, .payment_dock_button:focus-visible { color: #fff; box-shadow: 0 13px 25px rgba(38,91,61,.29); filter: brightness(.9); outline: none; transform: translateY(-2px); } .payment_dock_button b { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: rgba(255,255,255,.11); font-size: 17px; font-weight: 500; transition: transform .22s ease, background .22s ease; } .payment_dock_button:hover b, .payment_dock_button:focus-visible b { background: rgba(255,255,255,.17); transform: translateX(2px); } a[href*="/payment"], form[action*="/payment"] button, .manage_navigation_scroll { -webkit-user-select: none; user-select: none; } .payment_failed { color: #802d2d; background: #f5dddd; } .payment_ready { color: var(--success); font-weight: 700; } .publish_locked { padding: 20px; color: var(--muted); background: #f5f1ed; border-radius: 14px; text-align: center; } .publish_locked > span { width: 36px; height: 36px; display: grid; place-items: center; margin: 0 auto 10px; background: #e9dfd6; border-radius: 50%; } .publish_locked strong { display: block; color: var(--ink); } .publish_locked p { margin: 6px 0 0; font-size: 13px; } .publish_locked_compact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px; text-align: left; } .publish_locked_compact > span { width: 34px; height: 34px; margin: 0; } .publish_locked_compact > span svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .publish_locked_compact p { margin: 2px 0 0; font-size: 12px; line-height: 1.35; } .publish_locked_compact .button { min-height: 43px; padding: 0 15px; font-size: 14px; } .mock_payment_page, .payment_result_page { min-height: 75vh; display: grid; place-items: center; padding: 70px 20px; background: radial-gradient(circle at 50% 30%, #eee0d7, transparent 43%), var(--paper); } .mock_payment_card, .payment_result_card { width: min(520px, 100%); padding: 38px; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: var(--shadow); text-align: center; } .mock_bank_mark { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 28px; } .mock_bank_mark strong { padding: 8px 12px; color: #fff; background: #151515; border-radius: 10px; font-size: 22px; } .mock_bank_mark span { padding: 5px 8px; color: #fff; background: #d43a3a; border-radius: 999px; font-size: 10px; font-weight: 900; } .mock_payment_card h1, .payment_result_card h1 { margin-bottom: 15px; font-size: clamp(38px, 7vw, 58px); } .mock_amount { margin: 22px 0; font: 500 52px Georgia, serif; } .mock_payment_card > p:not(.eyebrow), .payment_result_card > p:not(.eyebrow) { color: var(--muted); } .mock_actions { display: grid; gap: 10px; margin: 28px 0 20px; } .mock_payment_card > small { color: #a69b93; word-break: break-all; } .payment_result_mark { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 22px; color: #fff; background: var(--success); border-radius: 50%; font-size: 30px; font-weight: 700; } .result_pending .payment_result_mark { background: #a9892d; } .result_failed .payment_result_mark { background: var(--danger); } .payment_receipt { display: grid; grid-template-columns: 1fr 1fr; margin: 28px 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .payment_receipt > div + div { border-left: 1px solid var(--line); } .payment_receipt span, .payment_receipt strong { display: block; } .payment_receipt span { color: var(--muted); font-size: 11px; text-transform: uppercase; } .payment_receipt strong { margin-top: 5px; } .payment_result_card .button_row { justify-content: center; } .manage_subpage_section { min-height: 620px; padding: 28px 0 80px; } .responses_filter_panel { margin-bottom: 22px; padding: 21px 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 12px 38px rgba(50,39,30,.05); } .responses_filter_heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 17px; } .responses_filter_heading h1 { margin: 0; font-size: clamp(28px, 3vw, 38px); } .responses_counters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .responses_counters span { padding: 8px 12px; color: var(--muted); background: #f4efea; border-radius: 999px; font-size: 12px; white-space: nowrap; } .responses_counters strong { color: var(--ink); } .responses_filters { display: grid; grid-template-columns: minmax(240px, 1.4fr) minmax(180px, .8fr) minmax(180px, .8fr) auto; gap: 13px; align-items: end; } .responses_reset { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 16px 0 9px; border: 1px solid #d9d0c8; border-radius: 12px; color: var(--accent-dark); background: #f7f2ee; box-shadow: 0 6px 16px rgba(72,51,40,.07); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; transition: color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease, filter .22s ease; } .responses_reset span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(103,72,58,.1); border-radius: 9px; background: rgba(255,255,255,.72); transition: background-color .22s ease, transform .28s ease; } .responses_reset svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .responses_reset b { font: inherit; } .responses_reset:hover, .responses_reset:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 10px 22px rgba(103,72,58,.21); outline: none; transform: translateY(-2px); } .responses_reset:hover span, .responses_reset:focus-visible span { background: rgba(255,255,255,.14); transform: rotate(-28deg); } .responses_page_section .table_wrap { box-shadow: 0 12px 38px rgba(50,39,30,.05); } .responses_page_section table { min-width: 920px; } .responses_page_section td { vertical-align: middle; } .response_datetime { min-width: 118px; display: grid; gap: 6px; font-style: normal; } .response_datetime > span { display: flex; align-items: center; gap: 7px; color: var(--muted); } .response_datetime i { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; color: var(--accent-dark); background: #f2eae4; border-radius: 7px; } .response_datetime svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .response_datetime b { color: var(--ink); font-size: 11px; font-weight: 750; white-space: nowrap; } .responses_filter_empty { margin-top: 0; } .table_muted { color: #aaa19a; } .guest_notifications, .page_notifications { position: fixed; z-index: 90; top: 88px; right: 20px; width: min(420px, calc(100% - 40px)); display: grid; gap: 9px; pointer-events: none; opacity: 1; transform: translateY(0); transition: opacity .3s ease, transform .3s ease; } .guest_notifications.is_hiding, .page_notifications.is_hiding { opacity: 0; transform: translateY(-10px); } .guest_alert, .page_notification { max-width: none; min-height: 52px; display: flex; align-items: center; gap: 11px; margin: 0; padding: 12px 15px; border: 1px solid rgba(63,53,46,.08); border-radius: 14px; box-shadow: 0 16px 45px rgba(42,32,25,.18); font-size: 12px; line-height: 1.45; pointer-events: auto; } .guest_alert_icon, .page_notification_icon { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; color: #fff; background: var(--success); border-radius: 50%; font-size: 12px; font-weight: 700; } .guest_alert_icon svg, .page_notification_icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .guest_alert.alert_error .guest_alert_icon { background: var(--danger); } .named_pricing_note { min-height: 70px; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; border: 1px solid #dfd2c7; border-radius: 16px; background: #f6eee8; } .named_pricing_note strong, .named_pricing_note span { display: block; } .named_pricing_note span { margin-top: 2px; color: var(--muted); font-size: 12px; } .named_pricing_note b { padding: 7px 11px; color: var(--accent-dark); background: #fff; border-radius: 999px; font-size: 12px; white-space: nowrap; } .guest_add_grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; margin-bottom: 54px; } .guest_add_form.panel { padding: 27px; } .guest_add_form { display: flex; flex-direction: column; gap: 15px; } .guest_add_title { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .guest_add_form h2 { margin: 0; font-size: 30px; } .guest_limit { padding: 5px 9px; color: var(--accent-dark); background: #f0e7df; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; } .guest_add_form .button { align-self: flex-start; margin-top: auto; } .guest_submit_button { width: 100%; min-height: 56px; justify-content: flex-start; gap: 11px; padding: 5px 8px; border: 1px solid rgba(103,72,58,.12); border-radius: 15px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 10px 25px rgba(103,72,58,.2); font-size: 12px; font-weight: 700; transition: color .22s ease, box-shadow .22s ease, transform .22s ease, filter .22s ease; } .guest_submit_button_bulk { box-shadow: 0 10px 25px rgba(103,72,58,.2); } .guest_submit_button:hover, .guest_submit_button:focus-visible { color: #fff; box-shadow: 0 15px 31px rgba(80,53,42,.28); filter: brightness(.9); outline: none; transform: translateY(-2px); } .guest_submit_icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; background: rgba(255,255,255,.11); transition: background .22s ease, transform .22s ease; } .guest_submit_icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .guest_submit_arrow { width: 9px; height: 9px; flex: 0 0 9px; margin: 0 13px 0 auto; border-top: 1.7px solid currentColor; border-right: 1.7px solid currentColor; transform: rotate(45deg); transition: transform .22s ease; } .guest_submit_button:hover .guest_submit_icon, .guest_submit_button:focus-visible .guest_submit_icon { background: rgba(255,255,255,.17); transform: rotate(-3deg) scale(1.04); } .guest_submit_button:hover .guest_submit_arrow, .guest_submit_button:focus-visible .guest_submit_arrow { transform: translateX(4px) rotate(45deg); } .guest_list_header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; } .guest_list_header h2 { display: inline-block; margin: 0 12px 0 0; font-size: clamp(38px, 5vw, 58px); } .guest_list_header > div > span { color: var(--muted); font-size: 13px; } .guest_empty { min-height: 330px; } .guest_empty_locked .eyebrow { margin: 0 0 8px; } .guest_table_wrap { overflow-x: auto; overflow-y: visible; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 12px 38px rgba(50,39,30,.05); } .guest_table { min-width: 930px; } .guest_table th:nth-child(1) { width: 22%; } .guest_table th:nth-child(2) { width: 43%; } .guest_table th:nth-child(3) { width: 16%; } .guest_table th:nth-child(4) { width: 19%; } .guest_table td { position: relative; vertical-align: middle; } .guest_table td > strong, .guest_table td > small { display: block; } .guest_table td > small { margin-top: 5px; color: var(--muted); font-size: 11px; } .guest_url_field { display: flex; align-items: center; gap: 7px; } .guest_url_field input { width: 100%; min-width: 250px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: #5d5651; background: #f8f5f2; font-size: 12px; } .guest_url_field button { min-height: 38px; padding: 0 12px; border: 0; color: var(--accent-dark); background: #eee5dd; border-radius: 999px; cursor: pointer; font-size: 11px; font-weight: 700; } .guest_url_field .guest_copy_button { min-width: 116px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid #dfd4cb; border-radius: 11px; background: #f4ede7; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; } .guest_url_field .guest_qr_button { width: 42px; min-width: 42px; min-height: 42px; padding: 0; border: 1px solid #dfd4cb; border-radius: 11px; background: #f4ede7; } .guest_url_field .guest_qr_button:hover, .guest_url_field .guest_qr_button:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: none; outline: none; transform: translateY(-1px); } .guest_copy_button span { width: 17px; height: 17px; display: grid; place-items: center; } .guest_copy_button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .guest_copy_button b { font: inherit; } .guest_copy_success { display: none !important; } .guest_copy_button:hover, .guest_copy_button:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); outline: none; transform: translateY(-1px); } .guest_copy_button.is_copied { color: #285d40; border-color: #b8d8c4; background: #e3f2e8; } .guest_copy_button.is_copied .guest_copy_default { display: none; } .guest_copy_button.is_copied .guest_copy_success { display: grid !important; } .guest_response { width: fit-content; display: inline-flex; padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; } .guest_no_response { color: #6b625b; background: #eeeae6; } .guest_yes { color: #285d40; background: #dcefe4; } .guest_no { color: #802d2d; background: #f5dddd; } .guest_maybe { color: #715b1b; background: #f5ebbd; } .guest_named { color: #37617b; background: #deedf5; } .guest_regular { color: #665e57; background: #eeeae6; } .guest_actions { display: flex; align-items: center; gap: 7px; } .guest_actions > a, .guest_actions > button { color: var(--accent-dark); font-size: 12px; font-weight: 700; text-underline-offset: 3px; } .guest_actions form { margin: 0; } .guest_open_link, .guest_delete { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid #e0d6ce; border-radius: 10px; background: #f7f2ee; text-decoration: none; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; } .guest_open_link span, .guest_delete span { width: 16px; height: 16px; display: grid; place-items: center; } .guest_open_link svg, .guest_delete svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .guest_open_link:hover, .guest_open_link:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); outline: none; transform: translateY(-1px); } .guest_open_link.is_unavailable { color: #7c5d21; border-color: #ead9b5; background: #fbf5e6; cursor: pointer; } .guest_open_link.is_unavailable:hover, .guest_open_link.is_unavailable:focus-visible { color: #fff; border-color: #9a7130; background: #9a7130; } .guest_delete { border-color: #ead7d4; color: var(--danger); background: #fbf2f1; cursor: pointer; font-size: 11px; font-weight: 700; } .guest_delete:hover, .guest_delete:focus-visible { color: #fff; border-color: var(--danger); background: var(--danger); outline: none; transform: translateY(-1px); } .manage_billing_section { min-height: 680px; padding: 28px 0 80px; } .billing_alert { max-width: none; margin: 0 0 18px; } .billing_heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 26px; } .billing_heading h1 { margin: 0 0 9px; font-size: clamp(38px, 5vw, 58px); } .billing_heading p:not(.eyebrow) { max-width: 690px; margin: 0; color: var(--muted); } .billing_layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .72fr); gap: 22px; align-items: start; } .billing_main, .billing_sidebar { display: grid; gap: 22px; } .billing_sidebar { position: sticky; top: 112px; } .billing_services, .billing_named_addon, .billing_total_card, .billing_publish_card { padding: 26px; } .billing_card_heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .billing_card_heading h2 { margin: 0 0 5px; font-size: 28px; } .billing_card_heading p { margin: 0; color: var(--muted); font-size: 13px; } .billing_card_heading > strong { flex: 0 0 auto; font: 500 25px Georgia, serif; white-space: nowrap; } .billing_service_list { display: block; margin-top: 22px; border-top: 1px solid var(--line); } .billing_service_row { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); } .billing_service_row[data-billing-named-row], [data-named-addon-note], [data-billing-repeat-note], [data-billing-payment-action], [data-billing-paid-message], [data-named-payment-link] { will-change: height, min-height, opacity, transform; } .billing_service_row:last-child { border-bottom: 0; padding-bottom: 0; } .billing_service_row > div { display: flex; align-items: center; gap: 12px; } .billing_service_row > div:last-child { justify-content: flex-end; } .billing_service_icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: var(--accent-dark); background: linear-gradient(145deg, #fbf7f3, #eee2d9); border: 1px solid rgba(147,105,84,.1); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.78); } .billing_service_icon_template { color: var(--accent-dark); background: linear-gradient(145deg, #f7efe9, #e9d9ce); border-color: rgba(147,105,84,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); } .billing_service_icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .billing_service_row p, .billing_service_row small { display: block; margin: 0; } .billing_service_row small { margin-top: 3px; color: var(--muted); font-size: 11px; } .billing_service_row b { min-width: 66px; text-align: right; white-space: nowrap; } .billing_item_status { padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; } .billing_item_status.is_paid { color: #285d40; background: #dcefe4; } .billing_item_status.is_due { color: #715b1b; background: #f5ebbd; } .billing_named_addon { min-height: 122px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-color: #d9cbc0; background: linear-gradient(135deg, #fff, #f8f0e9); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .billing_named_addon.is_enabled { border-color: color-mix(in srgb, var(--accent) 46%, #fff); box-shadow: 0 12px 34px rgba(91,62,49,.08); } .billing_addon_copy { min-width: 0; display: flex; align-items: flex-start; gap: 15px; } .billing_addon_mark { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; color: var(--accent-dark); background: transparent; border-radius: 0; box-shadow: none; } .billing_addon_mark svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .billing_addon_copy h2 { margin: 0 0 5px; font-size: 25px; } .billing_addon_copy p { margin: 0; color: var(--muted); font-size: 13px; } .billing_addon_copy small { display: block; margin-top: 8px; color: var(--accent-dark); font-weight: 700; } .billing_named_addon [data-named-switch-form] { min-width: 50px; min-height: 38px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin: 0; padding: 7px 5px; border: 1px solid #e1d6cd; border-radius: 999px; background: rgba(255,255,255,.82); } .billing_named_addon form.is_submitting { opacity: .55; pointer-events: none; } .billing_named_addon [data-named-switch-form] .editor_switch { display: block; margin: 0; } .editor_switch.is_locked { opacity: .65; cursor: default; } .billing_total_card > span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .billing_total_card > strong { display: block; margin: 8px 0 14px; font: 500 46px/1 Georgia, serif; } .billing_total_card > p { margin: 0 0 20px; color: var(--muted); font-size: 13px; } .billing_total_card [data-billing-payment-action] > p { margin: 0 0 20px; color: var(--muted); font-size: 13px; } .billing_total_card form { margin: 0; } .billing_total_card > small { display: block; margin-top: 12px; color: #9d928a; font-size: 10px; text-align: center; } .billing_total_card .billing_legal_note { display: block; margin-top: 12px; color: #9d928a; font-size: 10px; line-height: 1.45; text-align: center; } .billing_total_card .billing_legal_note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .billing_paid_message { display: flex; align-items: center; gap: 9px; padding: 13px; color: #285d40 !important; background: #e6f3eb; border-radius: 12px; font-weight: 750; } .billing_paid_message span { width: 23px; height: 23px; display: grid; place-items: center; color: #fff; background: var(--success); border-radius: 50%; } .publication_badge { padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; } .publication_published { color: #285d40; background: #dcefe4; } .publication_draft { color: #665e57; background: #eeeae6; } .billing_publish_locked { display: flex; align-items: center; gap: 11px; margin-top: 18px; padding: 14px; color: var(--muted); background: #f4f0ec; border-radius: 12px; } .billing_publish_locked span { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; background: #e8dfd8; border-radius: 50%; } .billing_publish_locked p, .billing_pending_note p { margin: 0; font-size: 12px; } .billing_pending_note { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 12px; padding: 12px 12px 12px 15px; color: #715b1b; background: #faf1cb; border-radius: 11px; } .billing_pending_note .button { min-height: 38px; flex: 0 0 auto; padding: 0 17px; } .billing_public_url { display: flex; gap: 7px; } .billing_public_url input { min-width: 0; } .billing_public_url button { padding: 0 11px; border: 0; border-radius: 10px; color: var(--accent-dark); background: #eee5dd; cursor: pointer; font-size: 11px; font-weight: 700; } .billing_publish_card > .field { margin-top: 18px; } .billing_publish_actions { display: grid; gap: 10px; margin-top: 12px; } .billing_publish_actions form { margin: 0; text-align: center; } .billing_unpublish { padding: 4px 0; border: 0; color: var(--danger); background: transparent; cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .guest_named_addon { margin-bottom: 20px; } .guest_addon_actions { min-width: 230px; flex: 0 0 230px; display: grid; gap: 0; } .guest_addon_actions form { margin: 0; } .named_cart_button { width: 100%; min-height: 58px; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 38px minmax(0, 1fr) 10px; align-items: center; gap: 10px; padding: 6px 12px 6px 7px; border: 1px solid var(--accent); border-radius: 14px; color: #fff; background: transparent; box-shadow: 0 10px 24px rgba(103,72,58,.2); cursor: pointer; text-align: left; transition: color .25s ease, transform .22s ease, border-color .25s ease, box-shadow .25s ease, filter .25s ease; } .named_cart_button::before, .named_cart_button::after { position: absolute; z-index: 0; inset: 0; content: ""; pointer-events: none; transition: opacity .28s ease; } .named_cart_button::before { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); opacity: 1; } .named_cart_button::after { background: linear-gradient(135deg, #edf8f1, #dcefe4); opacity: 0; } .named_cart_button > * { position: relative; z-index: 1; } .named_cart_button:hover:not(:disabled), .named_cart_button:focus-visible { color: #fff; border-color: var(--accent-dark); box-shadow: 0 15px 29px rgba(80,53,42,.28); filter: brightness(.9); outline: none; transform: translateY(-2px); } .named_cart_button:disabled { opacity: .62; cursor: wait; filter: none; transform: none; } .named_cart_button.is_added { color: #285d40; border-color: #b7d8c3; box-shadow: 0 8px 20px rgba(47,104,73,.12); } .named_cart_button.is_added::before { opacity: 0; } .named_cart_button.is_added::after { opacity: 1; } .named_cart_button.is_added:hover:not(:disabled), .named_cart_button.is_added:focus-visible { color: #7d302f; border-color: #e1b8b3; box-shadow: 0 12px 25px rgba(125,48,47,.13); filter: brightness(.98); } .named_cart_button_icon { width: 38px; height: 38px; position: relative; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; background: rgba(255,255,255,.12); } .named_cart_button_icon i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; transition: opacity .22s ease, transform .28s cubic-bezier(.22,.72,.2,1); } .named_cart_button_icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .named_cart_icon_added { opacity: 0; transform: scale(.6) rotate(-18deg); } .named_cart_button.is_added .named_cart_button_icon { color: #fff; border-color: transparent; background: var(--success); } .named_cart_button.is_added:hover .named_cart_button_icon, .named_cart_button.is_added:focus-visible .named_cart_button_icon { background: var(--danger); } .named_cart_button.is_added .named_cart_icon_add { opacity: 0; transform: scale(.6) rotate(18deg); } .named_cart_button.is_added .named_cart_icon_added { opacity: 1; transform: scale(1) rotate(0); } .named_cart_button_copy { min-width: 0; display: grid; line-height: 1.25; } .named_cart_button_copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .named_cart_button_copy small { margin-top: 2px; color: rgba(255,255,255,.72); font-size: 10px; font-weight: 650; transition: color .22s ease; } .named_cart_button.is_added .named_cart_button_copy small { color: #568168; } .named_cart_button.is_added:hover .named_cart_button_copy small, .named_cart_button.is_added:focus-visible .named_cart_button_copy small { color: #a7615d; } .named_cart_button_chevron { width: 8px; height: 8px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .22s ease; } .named_cart_button:hover .named_cart_button_chevron, .named_cart_button:focus-visible .named_cart_button_chevron { transform: translateX(3px) rotate(45deg); } .named_payment_link { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 9px; padding: 0 14px; border: 1px solid rgba(47,104,73,.15); border-radius: 12px; color: #fff; background: linear-gradient(135deg, #4b8a66, #2f6849); box-shadow: 0 8px 19px rgba(47,104,73,.19); text-decoration: none; font-size: 11px; font-weight: 700; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, filter .22s ease; } .named_payment_link:hover, .named_payment_link:focus-visible { color: #fff; border-color: rgba(36,86,59,.28); box-shadow: 0 12px 24px rgba(38,91,61,.27); filter: brightness(.9); outline: none; transform: translateY(-2px); } .named_payment_link_icon { width: 20px; height: 20px; display: grid; place-items: center; } .named_payment_link_icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .publication_page_section { padding-top: 28px; } .publication_page_section .billing_alert { animation: publication_alert_in .42s ease both; } .publication_hero { min-height: 154px; position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; margin-bottom: 22px; padding: 24px 26px; border: 1px solid #ddcfc4; border-radius: 24px; background: linear-gradient(135deg, #fff 0%, #faf4ef 70%, #f2e8e0 100%); box-shadow: 0 18px 48px rgba(55,42,34,.08); animation: publication_surface_in .48s cubic-bezier(.22,.61,.36,1) both; } .publication_hero::before { width: 260px; height: 260px; position: absolute; top: -166px; right: 135px; content: ""; border: 1px solid rgba(147,105,84,.12); border-radius: 50%; } .publication_hero::after { width: 170px; height: 170px; position: absolute; right: -92px; bottom: -115px; content: ""; border: 32px solid rgba(147,105,84,.045); border-radius: 50%; } .publication_hero.is_published { border-color: #c8dccf; background: linear-gradient(135deg, #fff 0%, #f4faf6 70%, #e8f3ec 100%); } .publication_hero_icon { width: 68px; height: 68px; position: relative; z-index: 1; display: grid; place-items: center; color: var(--accent-dark); background: transparent; border-radius: 0; box-shadow: none; transform: none; } .publication_hero.is_published .publication_hero_icon { color: var(--success); background: transparent; box-shadow: none; } .publication_hero_icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .publication_hero_copy { min-width: 0; position: relative; z-index: 1; } .publication_hero_copy .eyebrow { margin-bottom: 7px; font-size: 10px; } .publication_hero_copy h1 { margin: 0 0 8px; font-size: clamp(32px, 4vw, 48px); } .publication_hero_copy > p:last-child { max-width: 620px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; } .publication_hero_status { min-width: 184px; position: relative; z-index: 1; display: grid; grid-template-columns: 11px minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(103,72,58,.1); border-radius: 15px; background: rgba(255,255,255,.78); box-shadow: 0 8px 22px rgba(54,40,32,.07); backdrop-filter: blur(10px); } .publication_hero_status > span { width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: #aaa099; box-shadow: 0 0 0 1px rgba(93,80,71,.14); } .publication_hero.is_published .publication_hero_status > span { background: var(--success); box-shadow: 0 0 0 1px rgba(65,116,89,.2), 0 0 0 6px rgba(65,116,89,.08); animation: publication_status_pulse 2.4s ease-in-out infinite; } .publication_hero_status strong, .publication_hero_status small { display: block; } .publication_hero_status strong { color: var(--ink); font-size: 14px; } .publication_hero_status small { margin-top: 2px; color: var(--muted); font-size: 12px; } .publication_layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 22px; align-items: start; } .publication_layout.is_published { grid-template-columns: minmax(0, 1fr); } .publication_main_card, .publication_info_card { border-color: #ded4cc; box-shadow: 0 16px 44px rgba(50,39,30,.07); animation: publication_surface_in .48s .08s cubic-bezier(.22,.61,.36,1) both; } .publication_main_card { position: relative; overflow: hidden; padding: 30px; } .publication_main_card::before { height: 3px; position: absolute; top: 0; right: 42px; left: 42px; content: ""; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .65; } .publication_main_card.is_published::before { background: linear-gradient(90deg, transparent, var(--success), transparent); } .publication_card_heading { display: flex; align-items: center; gap: 15px; padding-bottom: 22px; border-bottom: 1px solid var(--line); } .publication_card_heading > span { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; color: var(--accent-dark); border: 1px solid rgba(147,105,84,.11); border-radius: 15px; background: linear-gradient(145deg, #f8f0ea, #eee2d9); box-shadow: inset 0 1px rgba(255,255,255,.8); } .publication_main_card.is_published .publication_card_heading > span { color: #347052; border-color: rgba(65,116,89,.12); background: linear-gradient(145deg, #eef8f1, #dfeee4); } .publication_card_heading svg, .publication_notice_icon svg, .publication_locked_panel > span svg, .publication_ready_note > span svg, .publication_info_heading > span svg, .publication_checklist > div > span svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .publication_card_heading h2 { margin: 0 0 5px; font-size: 28px; } .publication_card_heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; } .publication_notice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 18px; padding: 12px; border: 1px solid #ead39c; border-radius: 14px; color: #735314; background: linear-gradient(135deg, #fffaf0, #fcf1cf); } .publication_notice_icon { width: 36px; height: 36px; display: grid; place-items: center; color: #946e1c; background: rgba(255,255,255,.72); border-radius: 11px; } .publication_notice strong, .publication_notice p { display: block; margin: 0; } .publication_notice strong { font-size: 13px; } .publication_notice p { margin-top: 2px; color: #826b3c; font-size: 12px; } .publication_notice_action { min-height: 38px; display: inline-flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid rgba(148,110,28,.17); border-radius: 10px; color: #76540e; background: #fff; box-shadow: 0 5px 13px rgba(104,75,18,.08); text-decoration: none; font-size: 12px; font-weight: 700; transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .publication_notice_action i, .publication_info_link i, .publication_open_button > i, .publication_publish_button > i { width: 7px; height: 7px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; } .publication_notice_action:hover, .publication_notice_action:focus-visible { color: #fff; border-color: #946e1c; background: #946e1c; box-shadow: 0 9px 20px rgba(104,75,18,.18); outline: none; transform: translateY(-2px); } .publication_notice_action:hover i, .publication_notice_action:focus-visible i, .publication_info_link:hover i, .publication_info_link:focus-visible i, .publication_open_button:hover > i, .publication_open_button:focus-visible > i, .publication_publish_button:hover > i, .publication_publish_button:focus-visible > i { transform: translateX(3px) rotate(45deg); } .publication_locked_panel, .publication_ready_note { display: flex; align-items: center; gap: 13px; margin-top: 22px; padding: 16px; border-radius: 15px; } .publication_locked_panel { color: #645d57; background: #f4f0ec; border: 1px solid #e5ddd6; } .publication_ready_note { color: #285d40; background: linear-gradient(135deg, #eff8f2, #e2f0e7); border: 1px solid #c9dfd1; } .publication_locked_panel > span, .publication_ready_note > span { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 12px; } .publication_locked_panel > span { color: #716861; background: #e9e1da; } .publication_ready_note > span { color: #fff; background: var(--success); box-shadow: 0 7px 16px rgba(65,116,89,.2); } .publication_locked_panel strong, .publication_locked_panel p, .publication_ready_note strong, .publication_ready_note p { display: block; margin: 0; } .publication_locked_panel strong, .publication_ready_note strong { color: var(--ink); font-size: 14px; } .publication_locked_panel p, .publication_ready_note p { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.45; } .publication_payment_link { gap: 9px; margin-top: 14px; border-radius: 14px; } .publication_payment_link span { width: 22px; height: 22px; display: grid; place-items: center; } .publication_payment_link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .publication_payment_link b { font: inherit; } .publication_link_panel { margin-top: 22px; padding: 16px; border: 1px solid #dfe5e1; border-radius: 16px; background: #f8fbf9; } .publication_link_heading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .publication_link_heading > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; color: #347052; background: #e4f1e8; border-radius: 10px; } .publication_link_heading svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .publication_link_heading strong, .publication_link_heading small { display: block; } .publication_link_heading strong { font-size: 13px; } .publication_link_heading small { margin-top: 2px; color: var(--muted); font-size: 12px; } .publication_url_control { display: grid; grid-template-columns: minmax(0, 1fr) 46px 46px; gap: 7px; } .publication_url_control input { width: 100%; min-width: 0; min-height: 46px; padding: 0 13px; border: 1px solid #d7e1da; border-radius: 11px; color: #4f5d54; background: #fff; font-size: 12px; } .publication_copy_button { width: 46px; min-height: 46px; color: #347052; border-color: #cedfd4; background: #e6f2ea; border-radius: 11px; } .publication_qr_button { width: 46px; min-width: 46px; min-height: 46px; color: #347052; border-color: #cedfd4; background: #e6f2ea; } .publication_copy_button:hover, .publication_copy_button:focus-visible, .publication_qr_button:hover, .publication_qr_button:focus-visible { color: #fff; border-color: var(--success); background: var(--success); box-shadow: 0 10px 22px rgba(47,104,73,.18); outline: none; transform: translateY(-2px); } .publication_actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; margin-top: 12px; } .publication_actions form { margin: 0; } .publication_open_button, .publication_publish_button, .publication_unpublish_button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; transition: color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease, filter .22s ease; } .publication_open_button, .publication_publish_button { color: #fff; background: linear-gradient(135deg, #4b8a66, #2f6849); box-shadow: 0 10px 24px rgba(47,104,73,.21); } .publication_open_button { padding: 0 16px; border: 1px solid rgba(47,104,73,.14); } .publication_publish_form { margin: 12px 0 0; } .publication_publish_button { width: 100%; padding: 0 18px; border: 1px solid rgba(47,104,73,.14); } .publication_open_button > span, .publication_publish_button > span, .publication_unpublish_button > span { width: 25px; height: 25px; display: grid; place-items: center; } .publication_open_button svg, .publication_publish_button svg, .publication_unpublish_button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .publication_open_button b, .publication_publish_button b, .publication_unpublish_button b { font: inherit; } .publication_open_button:hover, .publication_open_button:focus-visible, .publication_publish_button:hover, .publication_publish_button:focus-visible { color: #fff; box-shadow: 0 15px 30px rgba(38,91,61,.29); filter: brightness(.9); outline: none; transform: translateY(-2px); } .publication_unpublish_button { min-height: 52px; padding: 0 14px; border: 1px solid #ead5d2; color: #9a3c3b; background: #fff7f6; box-shadow: 0 6px 15px rgba(125,48,47,.06); } .publication_unpublish_button:hover, .publication_unpublish_button:focus-visible { color: #fff; border-color: var(--danger); background: var(--danger); box-shadow: 0 11px 23px rgba(125,48,47,.2); outline: none; transform: translateY(-2px); } .publication_info_card { position: sticky; top: 112px; padding: 24px; animation-delay: .15s; } .publication_info_heading { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .publication_info_heading > span { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; color: var(--accent-dark); background: transparent; border-radius: 0; box-shadow: none; } .publication_info_heading .eyebrow { margin: 0 0 3px; font-size: 11px; } .publication_info_heading h2 { margin: 0; font-size: 25px; } .publication_checklist { display: grid; gap: 4px; margin-top: 13px; } .publication_checklist > div { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px; border-radius: 11px; transition: background-color .2s ease, transform .2s ease; } .publication_checklist > div:hover { background: #f7f2ee; transform: translateX(2px); } .publication_checklist > div > span { width: 36px; height: 36px; display: grid; place-items: center; color: var(--accent-dark); background: #f1e8e1; border-radius: 10px; } .publication_checklist > div.is_warning > span { color: #8a6518; background: #faedc8; } .publication_checklist p, .publication_checklist strong, .publication_checklist small { display: block; margin: 0; } .publication_checklist strong { color: var(--ink); font-size: 14px; } .publication_checklist small { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.4; } .publication_info_link { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 15px; padding: 0 13px; border: 1px solid #ded2c8; border-radius: 11px; color: var(--accent-dark); background: #f8f3ef; text-decoration: none; font-size: 12px; font-weight: 700; transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; } .publication_info_link:hover, .publication_info_link:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 9px 20px rgba(103,72,58,.18); outline: none; transform: translateY(-2px); } .qr_modal { position: fixed; z-index: 1700; inset: 0; display: grid; place-items: center; padding: 24px; visibility: hidden; pointer-events: none; transition: visibility 0s linear .34s; } .qr_modal[hidden] { display: none; } .qr_modal.is_open { visibility: visible; pointer-events: auto; transition-delay: 0s; } .qr_modal_backdrop { position: absolute; inset: 0; border: 0; background: rgba(26,21,18,.72); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); opacity: 0; cursor: zoom-out; transition: opacity .34s ease, -webkit-backdrop-filter .34s ease, backdrop-filter .34s ease; } .qr_modal.is_open .qr_modal_backdrop { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 1; } .qr_modal_dialog { width: min(440px, calc(100vw - 48px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); position: relative; z-index: 1; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.45); border-radius: 23px; background: #fff; box-shadow: 0 35px 90px rgba(18,13,11,.42); opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .26s ease, transform .3s cubic-bezier(.22,.61,.36,1); } .qr_modal.is_open .qr_modal_dialog { opacity: 1; transform: translateY(0) scale(1); } .qr_modal_header { min-height: 72px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 14px 13px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #fff, #faf6f2); } .qr_modal_heading { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 12px; text-align: left; } .qr_modal_heading > div { min-width: 0; } .qr_modal_heading > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: var(--accent-dark); background: #f0e7df; border-radius: 12px; } .qr_modal_heading svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .qr_modal_heading small, .qr_modal_heading strong { display: block; } .qr_modal_heading small { overflow: hidden; margin-bottom: 2px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .qr_modal_heading strong { font: 500 21px/1.2 Georgia, serif; overflow-wrap: anywhere; white-space: normal; } .qr_modal_close { width: 40px; height: 40px; flex: 0 0 40px; position: relative; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: #f5efea; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease; } .qr_modal_close span::before, .qr_modal_close span::after { width: 15px; height: 1.5px; position: absolute; top: 50%; left: 50%; content: ""; border-radius: 999px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); } .qr_modal_close span::after { transform: translate(-50%, -50%) rotate(-45deg); } .qr_modal_close:hover, .qr_modal_close:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); outline: none; transform: rotate(6deg); } .qr_modal_body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 14px; padding: 24px; text-align: center; scrollbar-width: thin; scrollbar-color: #c9b7aa transparent; -webkit-overflow-scrolling: touch; } .qr_modal_body::-webkit-scrollbar { width: 6px; } .qr_modal_body::-webkit-scrollbar-thumb { border-radius: 999px; background: #c9b7aa; } .qr_modal_body::-webkit-scrollbar-track { background: transparent; } .qr_canvas_shell { width: min(310px, 100%); aspect-ratio: 1; position: relative; display: grid; place-items: center; margin: 0 auto; padding: 18px; border: 1px solid #e5dbd3; border-radius: 22px; background: #fff; box-shadow: 0 14px 38px rgba(66,47,37,.1); } .qr_canvas_shell canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .22s ease; } .qr_canvas_shell.is_ready canvas { opacity: 1; } .qr_modal_loader { width: 34px; height: 34px; position: absolute; border: 3px solid rgba(147,105,84,.18); border-top-color: var(--accent); border-radius: 50%; opacity: 1; animation: qr_modal_loading .75s linear infinite; transition: opacity .18s ease; } .qr_canvas_shell.is_ready .qr_modal_loader { opacity: 0; } .qr_modal_body > p { max-width: 350px; margin: 0 auto; color: var(--muted); font-size: 12px; line-height: 1.5; } .qr_publication_warning { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid #ead8ae; border-radius: 13px; color: #684f1e; background: linear-gradient(135deg,#fffaf0,#f8edcf); box-shadow: inset 0 1px 0 rgba(255,255,255,.75); text-align: left; animation: publication_alert_in .3s ease both; } .qr_publication_warning > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #8a651c; background: rgba(184,137,48,.12); } .qr_publication_warning svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .qr_publication_warning p, .qr_publication_warning strong, .qr_publication_warning small { display: block; margin: 0; } .qr_publication_warning strong { margin-bottom: 2px; font-size: 11px; } .qr_publication_warning small { color: #806b43; font-size: 10px; line-height: 1.45; } .qr_modal_error { color: var(--danger) !important; } .qr_download_button { width: 100%; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; border: 1px solid rgba(47,104,73,.16); border-radius: 14px; color: #fff; background: linear-gradient(135deg, #4b8a66, #2f6849); box-shadow: 0 10px 24px rgba(47,104,73,.21); cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; transition: filter .22s ease, box-shadow .22s ease, transform .22s ease; } .qr_download_button > span { width: 24px; height: 24px; display: grid; place-items: center; } .qr_download_button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .qr_download_button b { font: inherit; } .qr_download_button i { width: 8px; height: 8px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .22s ease; } .qr_download_button:hover:not(:disabled), .qr_download_button:focus-visible:not(:disabled) { filter: brightness(.9); box-shadow: 0 15px 30px rgba(38,91,61,.29); outline: none; transform: translateY(-2px); } .qr_download_button:hover:not(:disabled) i, .qr_download_button:focus-visible:not(:disabled) i { transform: translateX(3px) rotate(45deg); } .qr_download_button:disabled { cursor: wait; opacity: .52; box-shadow: none; } body.qr_modal_open { overflow: hidden; } @keyframes qr_modal_loading { to { transform: rotate(360deg); } } @keyframes publication_surface_in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes publication_alert_in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes publication_status_pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(65,116,89,.2), 0 0 0 4px rgba(65,116,89,.07); } 50% { box-shadow: 0 0 0 1px rgba(65,116,89,.2), 0 0 0 8px rgba(65,116,89,.03); } } .editor_settings_card, .editor_structure, .publish_box, .editor_preview_column, .responses_filter_panel, .responses_page_section .table_wrap, .responses_page_section .empty_state, .guest_named_addon, .guest_add_grid, .guest_list_header, .guest_table_wrap, .guest_empty, .manage_billing_section .billing_alert, .billing_services, .billing_named_addon, .billing_total_card, .billing_publish_card { animation: publication_surface_in .48s cubic-bezier(.22,.61,.36,1) both; } .editor_structure, .responses_page_section .table_wrap, .responses_page_section .empty_state, .guest_add_grid, .billing_named_addon { animation-delay: .08s; } .editor_preview_column, .guest_list_header, .billing_total_card { animation-delay: .15s; } .guest_table_wrap, .guest_empty { animation-delay: .21s; } /* Pricing landing */ .pricing_page { position: relative; overflow: hidden; padding: 34px 0 96px; } .pricing_page::before, .pricing_page::after { position: absolute; content: ""; border: 1px solid rgba(147,105,84,.13); border-radius: 50%; pointer-events: none; } .pricing_page::before { width: 480px; height: 480px; top: -260px; right: -210px; } .pricing_page::after { width: 340px; height: 340px; top: 1040px; left: -250px; } .pricing_page > .container { position: relative; z-index: 1; } .pricing_intro { min-height: 430px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(280px, .72fr); align-items: center; gap: 58px; padding: 54px 58px; border: 1px solid #ddd1c7; border-radius: 26px; background: radial-gradient(circle at 82% 18%, rgba(255,255,255,.94) 0 7%, transparent 32%), linear-gradient(132deg, #fff 0%, #f8f1eb 58%, #eee0d5 100%); box-shadow: 0 20px 54px rgba(50,39,30,.08); animation: pricing_surface_in .58s cubic-bezier(.22,.61,.36,1) both; } .pricing_intro::before { width: 280px; height: 280px; position: absolute; right: 15%; bottom: -225px; content: ""; border: 1px solid rgba(147,105,84,.16); border-radius: 50%; } .pricing_intro_copy { min-width: 0; position: relative; z-index: 1; } .pricing_intro_copy h1 { max-width: 710px; margin: 0 0 17px; font-size: clamp(46px, 5.7vw, 72px); line-height: .99; letter-spacing: -.045em; } .pricing_intro_copy > p:not(.eyebrow) { max-width: 650px; margin: 0; color: var(--muted); font-size: 15px; } .pricing_intro_actions { display: flex; align-items: center; gap: 25px; margin-top: 28px; } .pricing_action { min-height: 54px; display: grid; grid-template-columns: 36px minmax(0, auto) 28px; align-items: center; gap: 10px; padding: 5px 7px 5px 6px; border: 1px solid transparent; border-radius: 15px; font-size: 12px; font-weight: 750; text-decoration: none; white-space: nowrap; transition: color .24s ease, border-color .24s ease, background-color .24s ease, box-shadow .24s ease, filter .24s ease, transform .24s ease; } .pricing_action > span, .pricing_action > i { display: grid; place-items: center; transition: color .24s ease, background-color .24s ease, transform .26s ease; } .pricing_action > span { width: 36px; height: 36px; border-radius: 11px; } .pricing_action > i { width: 28px; height: 28px; border-radius: 9px; font-style: normal; } .pricing_action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .pricing_action > i svg { width: 16px; height: 16px; } .pricing_action b { font: inherit; } .pricing_action_primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 10px 24px rgba(103,72,58,.22); } .pricing_action_primary > span, .pricing_action_primary > i { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.09); } .pricing_action_primary:hover, .pricing_action_primary:focus-visible { color: #fff; box-shadow: 0 15px 31px rgba(80,53,42,.3); filter: brightness(.92); outline: none; transform: translateY(-3px); } .pricing_action_primary:hover > span, .pricing_action_primary:focus-visible > span { background: rgba(255,255,255,.16); transform: rotate(90deg); } .pricing_action_primary:hover > i, .pricing_action_primary:focus-visible > i { background: rgba(255,255,255,.16); transform: translateX(3px); } .pricing_action_secondary { color: var(--accent-dark); border-color: #d9c9bd; background: rgba(255,255,255,.82); box-shadow: 0 8px 21px rgba(68,48,38,.07); } .pricing_action_secondary > span, .pricing_action_secondary > i { color: var(--accent-dark); background: #f0e5dd; } .pricing_action_secondary:hover, .pricing_action_secondary:focus-visible { color: var(--accent-dark); border-color: #c6b09f; background: #fff; box-shadow: 0 13px 27px rgba(68,48,38,.12); outline: none; transform: translateY(-3px); } .pricing_action_secondary:hover > span, .pricing_action_secondary:focus-visible > span { color: #fff; background: var(--accent); transform: rotate(-4deg) scale(1.04); } .pricing_action_secondary:hover > i, .pricing_action_secondary:focus-visible > i { color: #fff; background: var(--accent-dark); transform: translateY(3px); } .pricing_intro_summary { min-height: 290px; position: relative; z-index: 1; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; padding: 30px; border: 1px solid rgba(208,190,176,.9); border-radius: 22px; background: rgba(255,255,255,.76); box-shadow: 0 15px 42px rgba(65,45,34,.08), inset 0 1px 0 #fff; backdrop-filter: blur(12px); transition: transform .28s ease, box-shadow .28s ease; } .pricing_intro_summary:hover { transform: translateY(-5px) rotate(.4deg); box-shadow: 0 23px 50px rgba(65,45,34,.12), inset 0 1px 0 #fff; } .pricing_intro_icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 18px; color: #fff; border-radius: 15px; background: linear-gradient(145deg, var(--accent), var(--accent-dark)); box-shadow: 0 10px 22px rgba(103,72,58,.2); } .pricing_intro_icon svg, .pricing_total_preview_icon svg, .pricing_cta_icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .pricing_intro_summary > small { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .pricing_intro_price { display: flex; align-items: baseline; gap: 8px; margin: 3px 0 8px; } .pricing_intro_price span { color: var(--muted); font-size: 12px; } .pricing_intro_price strong { font: 500 clamp(40px, 4.2vw, 54px)/1 Georgia, serif; letter-spacing: -.045em; } .pricing_intro_summary > p { margin: 0 0 21px; color: var(--muted); font-size: 12px; } .pricing_intro_note { display: flex; align-items: flex-start; gap: 9px; padding-top: 15px; border-top: 1px solid var(--line); color: #59504a; font-size: 11px; } .pricing_intro_note i { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 4px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(65,116,89,.09); } .pricing_formula { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; margin: 20px 0 82px; padding: 13px; border: 1px solid #e1d7cf; border-radius: 20px; background: rgba(255,255,255,.76); box-shadow: 0 12px 32px rgba(50,39,30,.045); animation: pricing_surface_in .52s .08s cubic-bezier(.22,.61,.36,1) both; } .pricing_formula > div { min-height: 78px; display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-radius: 14px; } .pricing_formula > div.is_total { background: #f1e7df; } .pricing_formula > i { color: #b3a69c; font: 500 24px/1 Georgia, serif; font-style: normal; } .pricing_formula_number { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; color: var(--accent-dark); border: 1px solid #ddcec3; border-radius: 11px; background: #f6eee8; font: 500 13px/1 Georgia, serif; } .pricing_formula .is_total .pricing_formula_number { color: #fff; border-color: var(--accent); background: var(--accent); } .pricing_formula p, .pricing_formula small, .pricing_formula strong { display: block; margin: 0; } .pricing_formula small { margin-bottom: 3px; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; } .pricing_formula strong { font-size: 12px; line-height: 1.35; } .pricing_categories { scroll-margin-top: 100px; margin-bottom: 78px; } .pricing_section_heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); align-items: end; gap: 48px; margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid #ddd2ca; } .pricing_section_heading h2, .pricing_included h2, .pricing_cta h2 { margin: 0; font-size: clamp(34px, 4vw, 48px); line-height: 1.05; letter-spacing: -.035em; } .pricing_section_heading > p { max-width: 510px; justify-self: end; margin: 0; color: var(--muted); font-size: 13px; } .pricing_category_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .pricing_category_card { min-height: 330px; position: relative; overflow: hidden; display: flex; align-items: flex-start; flex-direction: column; padding: 27px; border: 1px solid #dfd5cd; border-radius: 22px; background: #fff; box-shadow: 0 13px 38px rgba(50,39,30,.055); animation: pricing_surface_in .5s calc(.06s + var(--pricing-card-index) * .055s) cubic-bezier(.22,.61,.36,1) both; transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease; } .pricing_category_card::after { width: 175px; height: 175px; position: absolute; top: -112px; right: -90px; content: ""; border: 1px solid rgba(147,105,84,.13); border-radius: 50%; transition: transform .38s ease; } .pricing_category_card:hover { border-color: #cbbbae; box-shadow: 0 22px 52px rgba(50,39,30,.1); transform: translateY(-6px); } .pricing_category_card:hover::after { transform: scale(1.22); } .pricing_category_top { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .pricing_category_icon { width: 52px; height: 52px; display: grid; place-items: center; color: var(--accent-dark); border: 1px solid #e0d3ca; border-radius: 15px; background: linear-gradient(145deg, #f6eee8, #ebdfd6); transition: color .24s ease, background-color .24s ease, transform .28s ease; } .pricing_category_icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .pricing_category_card:hover .pricing_category_icon { color: #fff; background: var(--accent); transform: rotate(-4deg) scale(1.05); } .pricing_category_count { padding: 6px 10px; color: #81766f; border: 1px solid #e7ded7; border-radius: 999px; background: #faf7f4; font-size: 9px; font-weight: 700; } .pricing_category_card h3 { margin: 0 0 8px; font: 500 30px/1.1 Georgia, serif; } .pricing_category_card > p { max-width: 470px; margin: 0 0 28px; color: var(--muted); font-size: 12px; } .pricing_category_footer { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 19px; border-top: 1px solid var(--line); } .pricing_category_footer small, .pricing_category_footer strong { display: block; } .pricing_category_footer small { margin-bottom: 2px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; } .pricing_category_footer strong { font: 500 29px/1 Georgia, serif; } .pricing_category_footer strong span { color: var(--muted); font: 600 10px/1 Inter, sans-serif; text-transform: uppercase; } .pricing_category_footer a { min-height: 42px; display: inline-flex; align-items: center; gap: 10px; padding: 0 8px 0 15px; border-radius: 999px; color: var(--accent-dark); background: #f1e8e1; font-size: 11px; font-weight: 750; text-decoration: none; transition: color .2s ease, background-color .2s ease, transform .2s ease; } .pricing_category_footer a i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); font-size: 15px; font-style: normal; transition: transform .2s ease; } .pricing_category_footer a:hover, .pricing_category_footer a:focus-visible { color: #fff; background: var(--accent-dark); outline: none; transform: translateY(-2px); } .pricing_category_footer a:hover i, .pricing_category_footer a:focus-visible i { transform: translateX(2px); } .pricing_empty { padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: #fff; } .pricing_included { display: grid; grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr); gap: 54px; margin-bottom: 82px; padding: 45px 48px; border: 1px solid #ded1c7; border-radius: 25px; background: linear-gradient(135deg, #efe3da, #f8f2ed); box-shadow: 0 18px 48px rgba(50,39,30,.07); } .pricing_included_heading > p:not(.eyebrow) { margin: 16px 0 0; color: var(--muted); font-size: 13px; } .pricing_included_list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; } .pricing_included_list > div { display: flex; align-items: flex-start; gap: 11px; padding: 16px; border: 1px solid rgba(217,203,192,.85); border-radius: 15px; background: rgba(255,255,255,.75); transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; } .pricing_included_list > div:hover { background: #fff; box-shadow: 0 10px 25px rgba(56,42,33,.07); transform: translateY(-3px); } .pricing_included_list > div > span { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--success); font-size: 11px; } .pricing_included_list p, .pricing_included_list strong, .pricing_included_list small { display: block; margin: 0; } .pricing_included_list strong { margin-bottom: 3px; font-size: 12px; } .pricing_included_list small { color: var(--muted); font-size: 10px; line-height: 1.4; } .pricing_addons { margin-bottom: 82px; } .pricing_addons_layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr); align-items: start; gap: 20px; } .pricing_addon_list { display: grid; gap: 9px; } .pricing_addon_item { min-height: 88px; display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 14px 17px; border: 1px solid #e1d8d1; border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgba(50,39,30,.035); animation: pricing_surface_in .45s calc(.04s + var(--pricing-card-index) * .045s) cubic-bezier(.22,.61,.36,1) both; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .pricing_addon_item:hover { border-color: #cdbdb1; box-shadow: 0 14px 34px rgba(50,39,30,.075); transform: translateX(5px); } .pricing_addon_mark { width: 43px; height: 43px; display: grid; place-items: center; color: var(--accent-dark); border-radius: 13px; background: #f2e9e2; transition: color .2s ease, background-color .2s ease, transform .25s ease; } .pricing_addon_mark svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .pricing_addon_item:hover .pricing_addon_mark { color: #fff; background: var(--accent); transform: rotate(-4deg); } .pricing_addon_item h3 { margin: 0 0 3px; font-size: 13px; } .pricing_addon_item p { margin: 0; color: var(--muted); font-size: 10px; } .pricing_addon_item > strong { padding: 7px 10px; border-radius: 999px; color: var(--accent-dark); background: #f5eee9; font-size: 12px; white-space: nowrap; } .pricing_addon_item.is_named { border-color: #d7c4b6; background: linear-gradient(120deg, #fff, #faf2eb); } .pricing_total_preview { position: sticky; top: 98px; padding: 30px; border: 1px solid #d8c8bd; border-radius: 22px; color: #fdfaf7; background: linear-gradient(150deg, #423a35, #282421); box-shadow: 0 20px 48px rgba(39,31,26,.2); } .pricing_total_preview_icon { width: 49px; height: 49px; display: grid; place-items: center; margin-bottom: 20px; color: #292421; border-radius: 14px; background: #f0e2d8; } .pricing_total_preview .eyebrow { color: #d7b9a7; } .pricing_total_preview h3 { margin: 0 0 11px; font: 500 30px/1.08 Georgia, serif; } .pricing_total_preview > p:not(.eyebrow) { margin: 0 0 26px; color: #c9c0bb; font-size: 11px; } .pricing_total_preview > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 11px 0; color: #d9d1cc; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 10px; } .pricing_total_preview > div i { height: 1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 3px, transparent 3px 7px); } .pricing_total_preview > div strong { color: #fff; font-size: 10px; } .pricing_total_preview > div.is_total { margin-top: 5px; padding: 16px 0 0; border-bottom: 0; font-size: 12px; } .pricing_total_preview > div.is_total strong { color: #e5c5b1; font-size: 12px; } .pricing_faq { margin-bottom: 82px; } .pricing_faq_list { max-width: 900px; margin-left: auto; } .pricing_faq .pricing_faq_list details { padding: 0; border-bottom: 1px solid #d9cec5; } .pricing_faq .pricing_faq_list summary { min-height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 4px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 750; transition: color .22s ease, padding-left .22s ease; } .pricing_faq .pricing_faq_list summary:hover, .pricing_faq .pricing_faq_list summary:focus-visible { color: var(--accent-dark); outline: none; padding-left: 7px; } .pricing_faq .pricing_faq_list summary::-webkit-details-marker { display: none; } .pricing_faq .pricing_faq_list summary i { width: 30px; height: 30px; flex: 0 0 30px; position: relative; border: 1px solid #ded2c9; border-radius: 50%; background: #f4ece6; transition: color .2s ease, background-color .2s ease, transform .25s ease; } .pricing_faq .pricing_faq_list summary i::before, .pricing_faq .pricing_faq_list summary i::after { width: 10px; height: 1.5px; position: absolute; top: 50%; left: 50%; content: ""; border-radius: 99px; background: currentColor; transform: translate(-50%,-50%); } .pricing_faq .pricing_faq_list summary i::after { transform: translate(-50%,-50%) rotate(90deg); } .pricing_faq .pricing_faq_list details[open] summary i { color: #fff; background: var(--accent); transform: rotate(45deg); } .pricing_faq .pricing_faq_list summary:hover i { color: #fff; background: var(--accent-dark); } .pricing_faq .pricing_faq_list details p { max-width: 740px; margin: -4px 50px 0 4px; padding: 0 0 23px; color: var(--muted); font-size: 12px; animation: pricing_faq_in .24s ease both; } .pricing_cta { min-height: 190px; position: relative; overflow: hidden; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 35px 38px; border: 1px solid #d9c9bd; border-radius: 24px; background: linear-gradient(132deg, #eee0d5, #f8f2ed); box-shadow: 0 16px 45px rgba(50,39,30,.07); } .pricing_cta::after { width: 190px; height: 190px; position: absolute; right: 20%; bottom: -145px; content: ""; border: 1px solid rgba(147,105,84,.17); border-radius: 50%; } .pricing_cta_icon { width: 58px; height: 58px; z-index: 1; display: grid; place-items: center; color: var(--accent-dark); border: 1px solid #d7c5b8; border-radius: 17px; background: rgba(255,255,255,.66); } .pricing_cta > div, .pricing_cta > a { position: relative; z-index: 1; } .pricing_cta h2 { margin-bottom: 7px; font-size: clamp(30px, 3.5vw, 42px); } .pricing_cta > div > p:last-child { margin: 0; color: var(--muted); font-size: 12px; } .pricing_cta_action { min-width: 220px; } @keyframes pricing_surface_in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes pricing_faq_in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1040px) { .pricing_intro { gap: 30px; padding: 44px; } .pricing_included { grid-template-columns: 1fr; gap: 30px; } .pricing_addons_layout { grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); } .hero { min-height: auto; padding-bottom: 520px; } .hero_card { top: auto; bottom: 35px; left: 50%; right: auto; transform: translateX(-50%) rotate(3deg); } .template_catalog_chooser_panel { grid-template-columns: 1fr; gap: 22px; } .template_catalog_chooser_copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr); align-items: end; gap: 8px 28px; } .template_catalog_chooser_copy .eyebrow { grid-column: 1 / -1; } .template_catalog_chooser_copy h1 { margin: 0; } .template_catalog_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .template_catalog_group_heading { grid-template-columns: 1fr; gap: 10px; } .footer_grid { grid-template-columns: 1.2fr 1fr 1fr; } .footer_cta { grid-column: 1 / -1; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; } .footer_cta_button { min-width: 180px; grid-column: auto; margin-top: 0; } .my_filters_controls { align-items: stretch; flex-direction: column; } .filter_tabs { width: 100%; } .publication_filter { align-self: flex-end; } .pricing_grid { grid-template-columns: 1fr; } .pricing_card.is_recommended { transform: none; } .pricing_extras { grid-template-columns: 1fr; } .guest_add_grid { grid-template-columns: 1fr; } .billing_layout { grid-template-columns: 1fr; } .billing_sidebar { position: static; grid-template-columns: 1fr 1fr; } .editor_block_state { display: none; } } @media (min-width: 901px) { .editor_preview_expand { display: grid; } } @media (max-width: 900px) { .pricing_intro { grid-template-columns: 1fr; } .pricing_intro_summary { min-height: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 17px; } .pricing_intro_icon { grid-row: 1 / 5; margin: 0; } .pricing_intro_summary > small, .pricing_intro_price, .pricing_intro_summary > p, .pricing_intro_note { grid-column: 2; } .pricing_intro_note { margin-top: 3px; } .pricing_formula { grid-template-columns: 1fr; gap: 5px; } .pricing_formula > i { height: 20px; text-align: center; } .pricing_formula > div { min-height: 68px; } .pricing_section_heading { grid-template-columns: 1fr; gap: 11px; } .pricing_section_heading > p { justify-self: start; } .pricing_category_grid { grid-template-columns: 1fr; } .pricing_addons_layout { grid-template-columns: 1fr; } .pricing_total_preview { position: static; } .pricing_cta { grid-template-columns: 58px minmax(0, 1fr); } .pricing_cta_action { width: fit-content; grid-column: 2; } body.menu_open { overflow: hidden; } .menu_toggle { display: grid; margin-left: auto; } .site_header_menu { max-height: calc(100vh - 66px); position: absolute; top: 100%; right: 0; left: 0; overflow-y: auto; display: none; align-items: stretch; flex-direction: column; gap: 22px; margin: 0; padding: 24px max(20px, calc((100vw - 1180px) / 2)); background: rgba(251,248,244,.98); border-bottom: 1px solid var(--line); box-shadow: 0 18px 35px rgba(50,39,30,.1); } .site_header_menu.is_open { display: flex; } .site_nav { align-items: stretch; flex-direction: column; gap: 0; } .site_nav > a { width: 100%; min-height: 51px; display: flex; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; } .site_nav > a::after, .site_nav_dropdown_link::after { display: none; } .site_nav_dropdown { width: 100%; } .site_nav_dropdown::after { display: none; } .site_nav_dropdown_primary { width: 100%; min-height: 51px; border-bottom: 1px solid var(--line); } .site_nav_dropdown_link { min-width: 0; flex: 1; display: flex; align-items: center; align-self: stretch; font-size: 16px; } .site_nav_dropdown_toggle { width: 42px; height: 42px; flex: 0 0 42px; background: #eee5dd; } .site_nav_dropdown_toggle > svg { width: 12px; } .site_nav_dropdown_menu { width: 100%; max-height: 0; position: static; overflow: hidden; display: grid; gap: 4px; padding: 0 7px; border: 0; border-radius: 0; background: transparent; box-shadow: none; visibility: hidden; opacity: 0; transform: none; pointer-events: none; transition: max-height .25s ease, padding .25s ease, opacity .2s ease, visibility .2s ease; } .site_nav_dropdown.is_open .site_nav_dropdown_menu { max-height: 390px; padding: 8px 7px 10px; visibility: visible; opacity: 1; pointer-events: auto; } .site_nav_dropdown_menu a { min-height: 58px; grid-template-columns: 38px minmax(0, 1fr) 18px; padding: 8px 10px; border: 0; border-radius: 11px; font-size: 14px; } .site_nav_dropdown_icon { width: 38px; height: 38px; border-radius: 10px; } .site_nav_dropdown_menu small { font-size: 10px; } .header_actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .header_actions > :only-child { grid-column: 1 / -1; } .header_account_group { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; } .header_account_group .header_my_invitations { min-width: 0; flex: 1 1 auto; border: 0; } .header_logout_button { width: 42px; height: 42px; flex: 0 0 42px; margin-right: 3px; border-radius: 12px; } .header_my_invitations, .header_create_button { min-height: 49px; padding: 0 13px; border-radius: 14px; font-size: 12px; } .header_my_invitations { border: 1px solid var(--line); background: #fff; } .header_create_button { box-shadow: 0 8px 20px rgba(103,72,58,.2); } .template_preview_size_toggle { display: none; } .template_preview_modal.is_desktop .template_preview_modal_dialog { width: min(440px, calc(100vw - 48px)); } .legal_layout { grid-template-columns: 1fr; gap: 28px; } .legal_nav { position: static; overflow-x: auto; align-items: center; flex-direction: row; white-space: nowrap; } .legal_nav strong { margin: 0 7px 0 0; } .contacts_intro { min-height: 0; grid-template-columns: 54px minmax(0, 1fr); align-items: start; gap: 18px; } .contacts_intro_icon { width: 54px; height: 54px; } .contacts_intro_hint { width: fit-content; min-width: 0; grid-column: 2; } .contact_cards { grid-template-columns: 1fr 1fr; } .payment_trust { grid-template-columns: 1fr; } .contact_card:last-child { grid-column: 1 / -1; min-height: 280px; } .manage_navigation { margin: 10px auto 0; } .manage_navigation_inner { min-height: auto; display: block; padding: 0; } .manage_navigation_title { display: none; } .manage_navigation_scroll { width: 100%; } .manage_navigation nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; } .manage_navigation nav a { min-width: 0; min-height: 58px; flex-direction: column; gap: 4px; padding: 6px 4px; border-radius: 11px; font-size: 10px; line-height: 1.1; } .manage_navigation nav a.is_active { box-shadow: 0 4px 12px rgba(103,72,58,.18); } .manage_navigation_icon, .manage_navigation_label_mobile { display: block; } .manage_navigation_label { display: none; } .manage_navigation_badge { top: 0; right: 0; } .editor_layout { grid-template-columns: 1fr; } .editor_preview_launcher { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 1px solid color-mix(in srgb, var(--accent) 35%, #fff); border-radius: 14px; color: #fff; background: var(--accent); box-shadow: 0 10px 25px rgba(70,48,38,.16); cursor: pointer; font-weight: 700; } .editor_preview_column { max-width: none; position: static; } .preview_panel { width: 100%; height: 100%; min-width: 0; min-height: 0; max-height: none; position: fixed; z-index: 100; inset: 0; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 66px 14px 24px; border-radius: 0; background: rgba(30,27,25,.86); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .24s ease, visibility .24s ease; } .preview_panel.is_open { visibility: visible; opacity: 1; pointer-events: auto; } .preview_popup_header { position: fixed; z-index: 2; top: 12px; right: 14px; left: 14px; display: flex; align-items: center; justify-content: space-between; color: #fff; } .preview_popup_header strong { font-size: 13px; } .preview_popup_header button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0 0 3px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #fff; background: rgba(255,255,255,.12); cursor: pointer; font-size: 25px; } .preview_panel .phone_frame { width: min(420px, 100%); height: min(710px, calc(100svh - 104px)); min-height: 0; max-height: none; flex: 0 0 auto; } body.editor_preview_open { overflow: hidden; } .responses_filters { grid-template-columns: 1fr 1fr; } .responses_search { grid-column: 1 / -1; } .manage_billing_section { padding-top: 26px; } .publication_layout { grid-template-columns: 1fr; } .publication_info_card { position: static; } .publication_hero { grid-template-columns: auto minmax(0, 1fr); } .publication_hero_status { min-width: 0; grid-column: 2; width: fit-content; } .editor_block_state { display: block; } } @media (max-width: 720px) { .pricing_page { padding: 22px 0 74px; } .pricing_intro { gap: 27px; padding: 29px 24px; border-radius: 21px; } .pricing_intro_copy h1 { font-size: 42px; } .pricing_intro_copy > p:not(.eyebrow) { font-size: 13px; } .pricing_intro_actions { align-items: flex-start; flex-direction: column; gap: 16px; margin-top: 23px; } .pricing_intro_actions .pricing_action { width: 100%; grid-template-columns: 36px minmax(0, 1fr) 28px; } .pricing_intro_summary { padding: 22px; border-radius: 18px; } .pricing_formula { margin-bottom: 60px; } .pricing_categories, .pricing_included, .pricing_addons, .pricing_faq { margin-bottom: 62px; } .pricing_section_heading { margin-bottom: 21px; } .pricing_section_heading h2, .pricing_included h2 { font-size: 34px; } .pricing_category_card { min-height: 310px; padding: 22px; } .pricing_category_footer a span { display: none; } .pricing_category_footer a { width: 42px; padding: 0; background: transparent; } .pricing_category_footer a i { width: 42px; height: 42px; } .pricing_included { gap: 25px; padding: 29px 22px; border-radius: 21px; } .pricing_included_list { grid-template-columns: 1fr; } .pricing_addon_item { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; padding: 13px; } .pricing_addon_mark { width: 40px; height: 40px; } .pricing_faq_list { margin: 0; } .pricing_faq .pricing_faq_list details p { margin-right: 38px; } .pricing_cta { grid-template-columns: 1fr; gap: 17px; padding: 28px 23px; border-radius: 21px; } .pricing_cta_action { width: 100%; grid-column: auto; grid-template-columns: 36px minmax(0, 1fr) 28px; } .container, .narrow, .editor_layout, .manage_navigation { width: min(100% - 28px, 1180px); } .site_header_inner { min-height: 66px; } .hero { padding-top: 70px; } .hero h1 { font-size: 50px; } .hero_card { width: 280px; height: 400px; } .template_grid, .steps_grid { grid-template-columns: 1fr; } .template_preview { min-height: 350px; } .template_catalog_chooser { padding-top: 20px; } .template_catalog_chooser_panel { gap: 19px; padding: 21px; border-radius: 21px; } .template_catalog_chooser_copy { display: block; } .template_catalog_chooser_copy h1 { margin-bottom: 9px; font-size: 34px; } .template_catalog_chooser_options { grid-template-columns: 1fr; gap: 8px; } .template_catalog_chooser_link { min-height: 76px; padding: 11px 13px; } .template_catalog_showcase { --template-preview-height: 430px; } .template_catalog_section { padding: 34px 0 76px; } .template_catalog_groups { gap: 54px; } .template_catalog_group_heading { margin-bottom: 22px; padding-bottom: 18px; } .template_preview_modal { padding: 12px; } .template_preview_modal_dialog, .template_preview_modal.is_desktop .template_preview_modal_dialog { width: 100%; height: calc(100svh - 24px); border-radius: 18px; } .section { padding: 70px 0; } .section.template_catalog_section { padding: 34px 0 76px; } .section_no_top { padding-top: 0; } .section_heading { align-items: flex-start; flex-direction: column; } .panel { padding: 22px; } .field_row { grid-template-columns: 1fr; } .site_footer { padding-top: 54px; } .footer_grid { grid-template-columns: 1fr 1fr; gap: 38px 24px; } .footer_brand { grid-column: 1 / -1; } .footer_cta { grid-column: 1 / -1; grid-template-columns: 46px minmax(0, 1fr); } .footer_cta_button { width: 100%; min-width: 0; grid-column: 1 / -1; margin-top: 3px; } .footer_bottom { align-items: flex-start; flex-direction: column; margin-top: 40px; } .scroll_top { width: 46px; height: 46px; right: 14px; bottom: 14px; } .editor_layout { margin-bottom: 60px; } .editor_panel { padding: 0; } .editor_structure, .editor_settings_card, .publish_box { padding: 17px; border-radius: 17px; } .editor_audio_track { grid-template-columns: 1fr; gap: 4px; } .editor_audio_player { padding: 0 5px 4px; } .editor_gallery_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .publish_box_compact { padding: 10px; } .editor_structure_heading { align-items: flex-start; flex-direction: column; gap: 10px; } .editor_structure_heading h1 { font-size: 28px; } .editor_structure_meta { width: 100%; justify-content: space-between; margin-top: 0; } .editor_blocks_count { margin-top: 0; } .editor_block_icon, .editor_block_state:not(.is_unpaid) { display: none; } .editor_block_state.is_unpaid { position: absolute; z-index: 4; bottom: 3px; left: 40px; display: inline-flex; font-size: 10px; } .editor_block.is_unpaid .editor_block_summary { align-self: flex-start; padding-top: 10px; padding-bottom: 32px; } .editor_block_state_hint { right: auto; left: 0; } .editor_block_state_hint::before { right: auto; left: 18px; } .editor_block_header { gap: 7px; padding-left: 43px; } .editor_block_moves { width: 25px; flex-basis: 25px; } .editor_block_chevron { width: 34px; flex-basis: 34px; } .editor_block.is_open .editor_block_body_inner { padding: 15px; } .phone_frame { height: 650px; border-width: 7px; } .invite_section { min-height: 500px; padding: 75px 20px; } .my_invitations_section { padding: 18px 0 76px; } .invitation_filters { margin-bottom: 18px; padding: 0; } .my_filters_controls { align-items: stretch; flex-direction: column; } .publication_filter { width: 100%; align-self: stretch; } .publication_filter label { flex: 1; } .publication_filter select { width: 100%; } .my_invitations_grid { grid-template-columns: 1fr; } .my_invitation_card { padding: 0; } .static_hero { padding: 78px 0 70px; } .static_hero h1 { font-size: 48px; } .contacts_page { padding: 22px 0 74px; } .contacts_intro { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; border-radius: 20px; } .contacts_intro_icon { width: 50px; height: 50px; border-radius: 15px; } .contacts_intro_copy h1 { font-size: 36px; } .contacts_intro_copy > p:last-child { font-size: 13px; } .contacts_intro_hint { width: 100%; grid-column: auto; } .contact_cards { grid-template-columns: 1fr; } .contact_cards { gap: 14px; } .contact_card, .contact_card:last-child { min-height: 280px; grid-column: auto; padding: 22px; } .legal_hero { padding: 70px 0 48px; } .legal_section { padding: 45px 0 80px; } .legal_nav { margin-inline: -14px; border-right: 0; border-left: 0; border-radius: 0; } .cookie_table > div { grid-template-columns: 1fr; gap: 7px; } .editor_payment_bar { width: auto; min-height: 70px; right: 14px; bottom: 12px; left: 14px; gap: 10px; padding: 10px; border-radius: 17px; } .payment_dock_icon { width: 34px; height: 39px; flex-basis: 34px; } .payment_dock_icon svg { width: 25px; height: 25px; } .payment_dock_copy strong { font-size: 20px; } .payment_dock_button { min-height: 46px; padding: 0 13px; } .manage_workspace_page.payment_dock_visible .scroll_top { right: 16px; bottom: 94px; } .pricing_card { padding: 24px; } .pricing_hero { padding-top: 75px; } .manage_navigation_inner { width: 100%; } .manage_navigation nav a { min-height: 56px; padding: 6px 2px; font-size: 10px; } .manage_navigation_icon svg { width: 18px; height: 18px; } .guest_list_header { align-items: flex-start; flex-direction: column; } .guest_notifications, .page_notifications { top: 76px; right: 14px; width: calc(100% - 28px); } .manage_subpage_section { padding-top: 24px; } .responses_filter_panel { padding: 20px; } .responses_filter_heading { align-items: flex-start; flex-direction: column; } .responses_filters { grid-template-columns: 1fr; } .responses_search { grid-column: auto; } .responses_reset { width: 100%; } .guest_add_grid { margin-bottom: 48px; } .guest_add_form .button { width: 100%; } .named_pricing_note { align-items: flex-start; flex-direction: column; } .billing_heading { align-items: flex-start; flex-direction: column; gap: 14px; } .billing_heading h1 { font-size: 40px; } .billing_sidebar { grid-template-columns: 1fr; } .billing_services, .billing_named_addon, .billing_total_card, .billing_publish_card { padding: 20px; } .billing_card_heading { align-items: flex-start; flex-direction: column; } .billing_service_row { align-items: flex-start; flex-direction: column; gap: 10px; } .billing_service_row > div:last-child { width: 100%; justify-content: space-between; padding-left: 50px; } .billing_named_addon { position: relative; display: block; padding-right: 78px; } .billing_named_addon [data-named-switch-form] { position: absolute; top: 18px; right: 16px; margin: 0; } .guest_named_addon { padding-right: 20px; } .guest_addon_actions { width: 100%; min-width: 0; margin-top: 18px; } .billing_addon_mark { width: 40px; height: 40px; flex-basis: 40px; } .billing_total_card > strong { font-size: 41px; } .publication_main_card { padding: 22px; } .publication_page_section { padding-top: 20px; } .publication_hero { min-height: 0; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; padding: 20px; border-radius: 20px; } .publication_hero_icon { width: 54px; height: 54px; border-radius: 17px; } .publication_hero_icon svg { width: 27px; height: 27px; } .publication_hero_copy h1 { font-size: 34px; } .publication_hero_copy > p:last-child { font-size: 14px; } .publication_hero_status { width: 100%; grid-column: 1 / -1; } .publication_card_heading { align-items: flex-start; } .publication_card_heading > span { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; } .publication_card_heading h2 { font-size: 24px; } .publication_notice { grid-template-columns: 36px minmax(0, 1fr); } .publication_notice_action { grid-column: 1 / -1; justify-content: center; } .publication_actions { grid-template-columns: 1fr; } .publication_unpublish_button { width: 100%; } .publication_info_card { padding: 20px; } .billing_pending_note { align-items: stretch; flex-direction: column; } .billing_pending_note .button { width: 100%; } } @media (max-width: 520px) { .pricing_intro_summary { display: block; } .pricing_intro_icon { margin-bottom: 17px; } .pricing_intro_note { margin-top: 0; } .pricing_category_card h3 { font-size: 27px; } .pricing_addon_item { grid-template-columns: 39px minmax(0, 1fr); } .pricing_addon_item > strong { width: fit-content; grid-column: 2; } .pricing_total_preview { padding: 24px; } .pricing_total_preview h3 { font-size: 27px; } .draft_limit_modal { padding: 12px; } .draft_limit_dialog { width: 100%; padding: 32px 20px 24px; border-radius: 20px; } .draft_limit_icon { width: 56px; height: 56px; margin-bottom: 15px; border-radius: 18px; } .draft_limit_icon svg { width: 29px; height: 29px; } .draft_limit_dialog h2 { padding-inline: 12px; font-size: 32px; } .draft_limit_actions { align-items: stretch; flex-direction: column; } .draft_limit_actions a, .draft_limit_actions button { width: 100%; } .header_actions { grid-template-columns: 1fr; } .header_actions > :only-child { grid-column: auto; } .header_account_group { width: 100%; } .header_my_invitations, .header_create_button { width: 100%; } .filter_tabs { width: calc(100vw - 60px); } .filter_tab { padding-inline: 10px; } .publication_filter { align-items: stretch; flex-direction: column; } .publication_filter label { width: 100%; min-width: 0; } .my_card_top { align-items: flex-start; flex-direction: column; padding: 14px; } .my_card_badges { justify-content: flex-start; } .my_card_template strong { max-width: 220px; } .my_card_main { align-items: stretch; flex-direction: column; gap: 14px; padding: 19px 16px 15px; } .my_invitation_card h2 { font-size: 29px; } .my_card_price { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 0 0; border-top: 1px solid var(--line); border-left: 0; } .my_card_meta { grid-template-columns: 1fr 1fr; margin: 0 16px 16px; } .my_card_meta > div:last-child { grid-column: 1 / -1; } .my_card_actions { flex-wrap: wrap; padding: 11px; } .my_card_edit_button { min-width: 140px; flex: 1 1 auto; } .my_card_payment_button { min-width: 120px; flex: 1 1 auto; } .my_card_preview_button { width: 43px; padding: 0; } .my_card_preview_button b { display: none; } .card_more > div { width: min(270px, calc(100% - 24px)); } .my_pagination { gap: 7px; } .my_pagination_pages { gap: 4px; } .my_pagination a { min-width: 38px; min-height: 40px; padding-inline: 10px; } .my_pagination_edge { min-width: 42px !important; } .my_pagination_edge b { display: none; } .create_access_page, .created_success_page { min-height: calc(100svh - 66px); padding: 28px 0 40px; } .create_access_card { padding: 34px 20px 28px; border-radius: 22px; } .create_access_icon { width: 50px; height: 50px; margin-bottom: 15px; border-radius: 15px; } .create_access_card h1 { font-size: 36px; } .create_access_lead { font-size: 14px; } .create_access_form { margin-top: 24px; } .create_email_control, .create_access_submit { min-height: 57px; border-radius: 14px; } .create_email_control input { height: 55px; } .create_access_submit_arrow { width: 37px; height: 37px; border-radius: 10px; } .created_success_card { padding: 36px 20px 29px; border-radius: 22px; } .created_success_mark { width: 58px; height: 58px; margin-bottom: 16px; border-radius: 18px; } .created_success_card h1 { font-size: 38px; } .created_success_lead { font-size: 14px; } .created_email_status { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; margin-top: 24px; padding: 13px; border-radius: 14px; } .created_editor_button { min-height: 57px; border-radius: 14px; } .created_editor_button_arrow { width: 37px; height: 37px; border-radius: 10px; } .created_private_note { align-items: flex-start; text-align: left; } .template_catalog_showcase { --template-preview-height: 390px; } .template_catalog_actions { grid-template-columns: 1fr; } .publication_hero { grid-template-columns: 1fr; text-align: left; } .publication_hero_icon { margin-bottom: 2px; } .publication_hero_status { grid-column: 1; } .publication_locked_panel, .publication_ready_note { align-items: flex-start; } .publication_link_panel { padding: 13px; } .publication_url_control { grid-template-columns: minmax(0, 1fr) 44px 44px; } .publication_copy_button { width: 44px; min-height: 44px; } .qr_modal { padding: 12px; } .qr_modal_dialog { width: 100%; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 18px; } .qr_modal_header { padding-left: 15px; } .qr_modal_heading > span { width: 35px; height: 35px; flex-basis: 35px; } .qr_modal_heading strong { font-size: 18px; } .qr_modal_body { gap: 12px; padding: 18px; } .qr_canvas_shell { width: min(280px, 100%); padding: 15px; border-radius: 18px; } } @media (max-width: 400px) { .manage_workspace_page .manage_navigation { width: 100%; border-radius: 0; } .manage_navigation nav { border-radius: 0; } } @media (max-width: 600px) { .template_catalog_grid { grid-template-columns: 1fr; gap: 20px; } } @media (hover: none), (pointer: coarse), (max-width: 600px) { .template_catalog_card { overflow: hidden; border: 1px solid rgba(221,211,203,.95); border-radius: 22px; background: #fff; box-shadow: 0 14px 38px rgba(48,36,29,.09); } .template_catalog_card:hover { transform: none; } .template_catalog_showcase { --template-preview-height: clamp(420px, 112vw, 500px); width: min(360px, calc(100% - 28px)); margin: 14px auto 0; border: 1px solid color-mix(in srgb, var(--card-color) 24%, rgba(221,211,203,.95)); border-radius: 18px 18px 12px 12px; background: linear-gradient(155deg, color-mix(in srgb, var(--card-color) 10%, #fff), #f4efeb); box-shadow: 0 12px 28px rgba(48,36,29,.12); } .template_catalog_image_window, .template_catalog_deck_slide, .template_catalog_image { border-radius: inherit; } .template_catalog_image { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: top center; transform: none !important; will-change: auto; } .template_catalog_body { z-index: 7; margin-top: -18px; border: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 22px rgba(48,36,29,.08); } } @media (prefers-reduced-motion: reduce) { .pricing_intro, .pricing_formula, .pricing_category_card, .pricing_addon_item, .pricing_faq .pricing_faq_list details p { animation: none; } .pricing_intro_summary, .pricing_action, .pricing_action > span, .pricing_action > i, .pricing_category_card, .pricing_category_card::after, .pricing_category_icon, .pricing_category_footer a, .pricing_category_footer a i, .pricing_included_list > div, .pricing_addon_item, .pricing_addon_mark, .pricing_faq .pricing_faq_list summary, .pricing_faq .pricing_faq_list summary i { transition-duration: .01ms; } .pricing_intro_summary:hover, .pricing_action:hover, .pricing_action:hover > span, .pricing_action:hover > i, .pricing_category_card:hover, .pricing_category_footer a:hover, .pricing_included_list > div:hover, .pricing_addon_item:hover { transform: none; } .draft_limit_modal, .draft_limit_backdrop, .draft_limit_dialog, .draft_limit_actions a, .draft_limit_actions button, .draft_limit_close, .my_pagination, .my_pagination a { animation: none; transition-duration: .01ms; } .draft_limit_dialog, .draft_limit_actions a:hover, .draft_limit_actions button:hover, .draft_limit_close:hover, .my_pagination a:hover { transform: none; } .create_access_card, .create_access_icon, .auth_step, .auth_busy > span, .created_success_card, .created_success_mark, .created_email_status, .created_success_mark path { animation: none; } .created_email_status { opacity: 1; transform: none; } .created_success_mark path { stroke-dashoffset: 0; } .create_email_control, .create_email_control > svg, .create_access_submit, .create_access_submit_arrow { transition-duration: .01ms; } .create_access_submit:hover, .create_access_submit:focus-visible, .create_email_control:focus-within { transform: none; } .created_editor_button, .created_editor_button_arrow { transition-duration: .01ms; } .created_editor_button:hover, .created_editor_button:focus-visible { transform: none; } .template_catalog_chooser_link { animation: none; transition-duration: .01ms; } .template_catalog_chooser_link:hover { transform: none; } .template_catalog_chooser_icon, .template_catalog_chooser_arrow { transition-duration: .01ms; } .template_catalog_card { animation: none; } .template_catalog_card:hover { transform: none; } .template_catalog_image, .template_catalog_deck_slide { transition-duration: .01ms; } .template_catalog_image { transform: none !important; } .publication_hero, .publication_main_card, .publication_info_card, .publication_page_section .billing_alert, .publication_hero.is_published .publication_hero_status > span, .editor_settings_card, .editor_structure, .publish_box, .editor_preview_column, .responses_filter_panel, .responses_page_section .table_wrap, .responses_page_section .empty_state, .guest_named_addon, .guest_add_grid, .guest_list_header, .guest_table_wrap, .guest_empty, .manage_billing_section .billing_alert, .billing_services, .billing_named_addon, .billing_total_card, .billing_publish_card, .my_dashboard_header, .invitation_filters, .my_invitation_card, .my_empty_state, .card_more > div { animation: none; } .contacts_intro, .contact_card { animation: none; } .contacts_intro_icon, .contact_card, .contact_card::after, .contact_card_icon, .contact_action, .contact_action > i, .page_notifications { transition-duration: .01ms; } .contact_card:hover, .contact_action:hover, .contact_action:focus-visible { transform: none; } .footer_wordmark, .footer_socials a, .footer_nav a, .footer_nav a::after, .footer_cta, .footer_cta_button, .footer_cta_button i { transition-duration: .01ms; } .footer_wordmark:hover, .footer_socials a:hover, .footer_nav a:hover, .footer_cta:hover, .footer_cta_button:hover { transform: none; } .publication_notice_action, .publication_open_button, .publication_publish_button, .publication_unpublish_button, .publication_info_link, .publication_checklist > div { transition-duration: .01ms; } .publication_notice_action:hover, .publication_open_button:hover, .publication_publish_button:hover, .publication_unpublish_button:hover, .publication_info_link:hover, .publication_checklist > div:hover { transform: none; } .qr_modal, .qr_modal_backdrop, .qr_modal_dialog, .qr_canvas_shell canvas, .qr_modal_loader, .qr_download_button, .qr_download_button i { transition-duration: .01ms; } .qr_modal_loader, .qr_publication_warning { animation: none; } .qr_modal_dialog, .qr_download_button:hover, .qr_download_button:focus-visible { transform: none; } .my_create_invitation, .filter_tab, .my_invitation_card, .my_card_edit_button, .my_card_payment_button, .my_card_preview_button, .my_card_qr_button, .card_more summary, .card_more button, .my_reset_filters { transition-duration: .01ms; } .my_create_invitation:hover, .filter_tab:hover, .my_invitation_card:hover, .my_card_edit_button:hover, .my_card_payment_button:hover, .my_card_preview_button:hover, .my_card_qr_button:hover, .card_more summary:hover, .card_more button:hover, .my_reset_filters:hover { transform: none; } } @media (hover: none), (pointer: coarse) { .template_catalog_image { transform: none !important; will-change: auto; } } @keyframes template_demo_loading { to { transform: translate(-50%, -50%) rotate(360deg); } } /* Pricing landing v2 */ @property --tilt-x { syntax: ""; inherits: false; initial-value: 0deg; } @property --tilt-y { syntax: ""; inherits: false; initial-value: 0deg; } .price_landing { position: relative; overflow: hidden; padding: 38px 0 94px; background: radial-gradient(circle at 90% 2%, rgba(220,199,185,.24), transparent 27%), var(--paper); } .price_landing::before { width: 430px; height: 430px; position: absolute; top: 650px; left: -340px; content: ""; border: 1px solid rgba(147,105,84,.11); border-radius: 50%; pointer-events: none; } .price_landing_hero { min-height: 600px; position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); align-items: center; gap: clamp(35px, 6vw, 78px); padding: clamp(46px, 6vw, 76px); border: 1px solid #ded2c8; border-radius: 28px; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,238,231,.96)); box-shadow: 0 22px 60px rgba(52,39,31,.08); } .price_landing_hero::before, .price_landing_hero::after { position: absolute; content: ""; border: 1px solid rgba(147,105,84,.12); border-radius: 50%; pointer-events: none; } .price_landing_hero::before { width: 220px; height: 220px; top: -150px; left: 38%; } .price_landing_hero::after { width: 310px; height: 310px; right: -180px; bottom: -220px; } .price_landing_copy { min-width: 0; position: relative; z-index: 2; animation: price_landing_enter .65s cubic-bezier(.22,.61,.36,1) both; } .price_landing_badge { width: fit-content; display: flex; align-items: center; gap: 9px; margin: 0 0 21px; padding: 8px 12px; border: 1px solid rgba(65,116,89,.18); border-radius: 999px; color: #315e45; background: rgba(232,243,236,.8); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .price_landing_badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(65,116,89,.24); animation: price_status_pulse 2.4s ease-out infinite; } .price_landing_copy h1 { max-width: 670px; margin: 0 0 20px; font-size: clamp(48px, 5.7vw, 73px); line-height: .99; letter-spacing: -.05em; } .price_landing_copy h1 em { color: var(--accent); font-family: Georgia, serif; font-weight: 500; } .price_landing_copy > p:not(.price_landing_badge):not(.price_landing_reassurance) { max-width: 580px; margin: 0; color: var(--muted); font-size: 15px; } .price_landing_actions { display: flex; align-items: center; gap: 10px; margin-top: 29px; } .price_landing_button { min-height: 56px; display: grid; grid-template-columns: auto minmax(0, auto) 30px; align-items: center; gap: 10px; padding: 5px 7px 5px 6px; border: 1px solid transparent; border-radius: 15px; font-size: 12px; font-weight: 750; text-decoration: none; white-space: nowrap; transition: color .24s ease, border-color .24s ease, background-color .24s ease, box-shadow .24s ease, filter .24s ease, transform .24s ease; } .price_landing_button > span, .price_landing_button > i { display: grid; place-items: center; transition: color .24s ease, background-color .24s ease, transform .27s cubic-bezier(.2,.75,.25,1); } .price_landing_button > span { width: 38px; height: 38px; border-radius: 11px; } .price_landing_button > i { width: 30px; height: 30px; border-radius: 9px; font-style: normal; } .price_landing_button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .price_landing_button b { font: inherit; } .price_landing_button.is_primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 11px 25px rgba(103,72,58,.23); } .price_landing_button.is_primary > span, .price_landing_button.is_primary > i { border: 1px solid rgba(255,255,255,.17); background: rgba(255,255,255,.09); } .price_landing_button.is_primary:hover, .price_landing_button.is_primary:focus-visible { color: #fff; box-shadow: 0 17px 34px rgba(80,53,42,.3); filter: brightness(.92); outline: none; transform: translateY(-3px); } .price_landing_button.is_primary:hover > span, .price_landing_button.is_primary:focus-visible > span { background: rgba(255,255,255,.17); transform: rotate(90deg); } .price_landing_button.is_primary:hover > i, .price_landing_button.is_primary:focus-visible > i { background: rgba(255,255,255,.17); transform: translateX(3px); } .price_landing_button.is_secondary { grid-template-columns: minmax(0, auto) 30px; padding-left: 17px; color: var(--accent-dark); border-color: #d9c9bd; background: rgba(255,255,255,.72); } .price_landing_button.is_secondary > i { color: var(--accent-dark); background: #f0e5dd; } .price_landing_button.is_secondary:hover, .price_landing_button.is_secondary:focus-visible { border-color: #c5ae9d; background: #fff; box-shadow: 0 12px 27px rgba(68,48,38,.1); outline: none; transform: translateY(-3px); } .price_landing_button.is_secondary:hover > i, .price_landing_button.is_secondary:focus-visible > i { color: #fff; background: var(--accent); transform: translateY(3px); } .price_landing_reassurance { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: #776e68; font-size: 10px; } .price_landing_reassurance span { width: 19px; height: 19px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--success); font-size: 9px; } .price_landing_visual { --tilt-x: 0deg; --tilt-y: 0deg; min-width: 0; position: relative; z-index: 2; padding: 26px 4px 30px; perspective: 1000px; animation: price_landing_enter .65s .12s cubic-bezier(.22,.61,.36,1) both; } .price_visual_orbit { position: absolute; display: block; border: 1px solid rgba(147,105,84,.15); border-radius: 50%; pointer-events: none; } .price_visual_orbit::after { width: 8px; height: 8px; position: absolute; content: ""; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(147,105,84,.09); } .price_visual_orbit.orbit_one { width: 340px; height: 340px; top: -16px; right: -38px; animation: price_orbit 18s linear infinite; } .price_visual_orbit.orbit_one::after { top: 53px; left: 44px; } .price_visual_orbit.orbit_two { width: 245px; height: 245px; right: 9px; bottom: -8px; animation: price_orbit 13s linear infinite reverse; } .price_visual_orbit.orbit_two::after { right: 19px; bottom: 54px; } .price_visual_window { position: relative; overflow: hidden; border: 1px solid rgba(196,178,165,.95); border-radius: 22px; background: #fff; box-shadow: 0 28px 65px rgba(52,38,30,.18); transform-style: preserve-3d; animation: price_visual_idle 5.5s ease-in-out infinite; transition: --tilt-x .2s ease-out, --tilt-y .2s ease-out, box-shadow .3s ease; } .price_landing_visual:hover .price_visual_window { box-shadow: 0 34px 75px rgba(52,38,30,.23); } .price_visual_window > header { min-height: 49px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid #e9e1da; background: #fbf8f5; } .price_visual_window > header > span { display: flex; gap: 5px; } .price_visual_window > header > span i { width: 7px; height: 7px; border-radius: 50%; background: #ddd1c8; } .price_visual_window > header > span i:first-child { background: #c7957e; } .price_visual_window > header > small { color: #776d67; font-size: 8px; font-weight: 750; } .price_visual_window > header > b { justify-self: end; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; color: #3e6b50; background: #e9f3ec; font-size: 7px; } .price_visual_window > header > b i { width: 5px; height: 5px; border-radius: 50%; background: var(--success); animation: price_status_pulse 2.4s ease-out infinite; } .price_visual_workspace { min-height: 310px; display: grid; grid-template-columns: 1fr 1.08fr; } .price_visual_fields { display: grid; align-content: center; gap: 11px; padding: 25px 19px; border-right: 1px solid #ede5df; background: #fff; } .price_visual_label { margin-bottom: 3px; color: #81756d; font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .price_visual_fields > div { min-height: 39px; display: grid; grid-template-columns: 23px 1fr; align-items: center; gap: 9px; padding: 7px; border: 1px solid #ebe4de; border-radius: 9px; transition: border-color .25s ease, background-color .25s ease, transform .25s ease; } .price_visual_fields > div > i { width: 23px; height: 23px; border-radius: 7px; background: #f0e6df; } .price_visual_fields > div > span { width: var(--line-width); height: 5px; border-radius: 99px; background: #ded5ce; } .price_visual_fields > div.is_active { border-color: color-mix(in srgb, var(--accent) 38%, #e8ddd5); background: #fcf8f5; transform: translateX(4px); } .price_visual_fields > div.is_active > i { background: color-mix(in srgb, var(--accent) 22%, #fff); } .price_visual_fields > div.is_active > span { background: color-mix(in srgb, var(--accent) 45%, #ddd); } .price_visual_fields > small { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: #718078; font-size: 7px; } .price_visual_fields > small i { width: 5px; height: 5px; border-radius: 50%; background: var(--success); } .price_visual_phone { display: grid; place-items: center; padding: 22px; background: linear-gradient(145deg, #f4ece6, #eee2d8); } .price_visual_phone::before { width: 125px; height: 125px; position: absolute; content: ""; border: 1px solid rgba(147,105,84,.13); border-radius: 50%; } .price_visual_phone_screen { width: 142px; height: 257px; position: relative; overflow: hidden; display: flex; align-items: center; flex-direction: column; padding: 38px 13px 16px; border: 5px solid #322d2a; border-radius: 22px; background: radial-gradient(circle at 50% 15%, #fff 0 5%, transparent 35%), linear-gradient(#faf5f0, #ebded4); box-shadow: 0 15px 30px rgba(48,37,30,.2); } .price_visual_phone_screen::before { width: 42px; height: 8px; position: absolute; top: 0; content: ""; border-radius: 0 0 8px 8px; background: #322d2a; } .price_visual_phone_screen > span { color: var(--accent); font-size: 5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .price_visual_phone_screen > strong { margin: 11px 0 8px; font: 500 17px/1.05 Georgia, serif; text-align: center; } .price_visual_phone_screen > strong i { color: var(--accent); font-weight: 400; } .price_visual_phone_screen > small { margin-bottom: 22px; color: #756b65; font: 500 7px/1 Georgia, serif; letter-spacing: .12em; } .price_visual_phone_screen > b { width: 78%; height: 4px; display: block; margin: 5px 0; border-radius: 99px; background: rgba(147,105,84,.16); } .price_visual_phone_screen > b:nth-of-type(2) { width: 57%; } .price_visual_phone_screen > b:nth-of-type(3) { width: 68%; } .price_visual_window > footer { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 14px; border-top: 1px solid #e9e1da; background: #fff; } .price_visual_window > footer > span { color: #7d736c; font-size: 8px; } .price_visual_window > footer > strong { display: flex; align-items: baseline; gap: 6px; color: var(--success); font: 600 19px/1 Georgia, serif; } .price_visual_window > footer > strong small { color: #7d736c; font: 600 7px/1 Inter, sans-serif; } .price_visual_hint { position: absolute; right: -20px; bottom: 1px; display: flex; align-items: center; gap: 9px; padding: 10px 13px 10px 9px; border: 1px solid #d5c6bb; border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 13px 28px rgba(54,40,32,.14); animation: price_hint_idle 4s .8s ease-in-out infinite; } .price_visual_hint > span { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; border-radius: 10px; background: var(--success); } .price_visual_hint svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .price_visual_hint p, .price_visual_hint strong, .price_visual_hint small { display: block; margin: 0; } .price_visual_hint strong { font-size: 9px; } .price_visual_hint small { color: var(--muted); font-size: 7px; } .price_landing_steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; margin: 19px 0 88px; padding: 13px; border: 1px solid #e2d8d0; border-radius: 20px; background: rgba(255,255,255,.78); box-shadow: 0 12px 32px rgba(50,39,30,.04); } .price_landing_steps article { min-height: 78px; display: flex; align-items: center; gap: 13px; padding: 12px 15px; border-radius: 14px; transition: background-color .22s ease, transform .22s ease; } .price_landing_steps article:hover { background: #f5ece6; transform: translateY(-3px); } .price_landing_steps article > span { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; color: var(--accent-dark); border: 1px solid #dfd0c5; border-radius: 11px; background: #f5ebe4; font: 500 12px/1 Georgia, serif; } .price_landing_steps > i { color: #b4a69c; font-style: normal; } .price_landing_steps strong, .price_landing_steps p { display: block; margin: 0; } .price_landing_steps strong { margin-bottom: 3px; font-size: 11px; } .price_landing_steps p { color: var(--muted); font-size: 8px; line-height: 1.4; } .price_landing_heading { display: grid; grid-template-columns: 1fr minmax(280px, .72fr); align-items: end; gap: 40px; margin-bottom: 27px; } .price_landing_heading h2, .price_options_intro h2, .price_landing_faq h2, .price_landing_cta h2 { margin: 0; font-size: clamp(36px, 4.2vw, 50px); line-height: 1.04; letter-spacing: -.04em; } .price_landing_heading > p { justify-self: end; max-width: 440px; margin: 0; color: var(--muted); font-size: 12px; } .price_landing_prices { scroll-margin-top: 100px; margin-bottom: 88px; } .price_category_list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; } .price_category_item { min-height: 94px; position: relative; overflow: hidden; display: grid; grid-template-columns: 49px minmax(0, 1fr) auto 36px; align-items: center; gap: 14px; padding: 13px 14px; border: 1px solid #dfd6cf; border-radius: 18px; background: #fff; box-shadow: 0 9px 25px rgba(50,39,30,.035); color: var(--ink); text-decoration: none; animation: price_landing_enter .48s calc(var(--item-index) * .055s) both; transition: border-color .23s ease, box-shadow .23s ease, transform .23s ease; } .price_category_item::after { width: 95px; height: 95px; position: absolute; top: -75px; right: -60px; content: ""; border: 1px solid rgba(147,105,84,.12); border-radius: 50%; transition: transform .35s ease; } .price_category_item:hover, .price_category_item:focus-visible { border-color: #c9b7aa; box-shadow: 0 17px 38px rgba(50,39,30,.09); outline: none; transform: translateY(-4px); } .price_category_item:hover::after, .price_category_item:focus-visible::after { transform: scale(1.3); } .price_category_item_icon { width: 49px; height: 49px; display: grid; place-items: center; color: var(--accent-dark); border-radius: 14px; background: #f1e7e0; transition: color .22s ease, background-color .22s ease, transform .26s ease; } .price_category_item_icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .price_category_item:hover .price_category_item_icon, .price_category_item:focus-visible .price_category_item_icon { color: #fff; background: var(--accent); transform: rotate(-5deg) scale(1.05); } .price_category_item_copy small, .price_category_item_copy strong, .price_category_item_value small, .price_category_item_value strong { display: block; } .price_category_item_copy small { margin-bottom: 2px; color: var(--muted); font-size: 8px; } .price_category_item_copy strong { font: 500 20px/1.15 Georgia, serif; } .price_category_item_value { text-align: right; } .price_category_item_value small { color: var(--muted); font-size: 8px; } .price_category_item_value strong { font: 500 22px/1.1 Georgia, serif; white-space: nowrap; } .price_category_item_arrow { width: 34px; height: 34px; z-index: 1; display: grid; place-items: center; color: var(--accent-dark); border-radius: 11px; background: #f3ebe5; font-style: normal; transition: color .22s ease, background-color .22s ease, transform .22s ease; } .price_category_item_arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .price_category_item:hover .price_category_item_arrow, .price_category_item:focus-visible .price_category_item_arrow { color: #fff; background: var(--accent-dark); transform: translateX(3px); } .price_landing_options { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(35px, 6vw, 78px); margin-bottom: 88px; padding: 45px 48px; border: 1px solid #daccc1; border-radius: 25px; background: linear-gradient(135deg, #eee1d7, #f9f4ef); box-shadow: 0 18px 48px rgba(50,39,30,.065); } .price_options_intro { position: sticky; top: 106px; } .price_options_intro > p:not(.eyebrow) { margin: 15px 0 21px; color: var(--muted); font-size: 12px; } .price_options_list { display: grid; gap: 8px; } .price_option { min-height: 76px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 11px 13px; border: 1px solid rgba(216,201,190,.95); border-radius: 15px; background: rgba(255,255,255,.82); animation: price_landing_enter .44s calc(var(--item-index) * .04s) both; transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease; } .price_option:hover { border-color: #c8b4a5; background: #fff; box-shadow: 0 12px 27px rgba(55,41,32,.08); transform: translateX(5px); } .price_option > span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--accent-dark); border-radius: 12px; background: #f0e5dd; font: 500 19px/1 Georgia, serif; transition: color .22s ease, background-color .22s ease, transform .25s ease; } .price_option > span svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .price_option:hover > span { color: #fff; background: var(--accent); transform: rotate(-5deg); } .price_option p, .price_option strong, .price_option small { display: block; margin: 0; } .price_option strong { margin-bottom: 2px; font-size: 11px; } .price_option small { color: var(--muted); font-size: 8px; } .price_option > b { padding: 7px 9px; border-radius: 999px; color: var(--accent-dark); background: #f5ede7; font-size: 10px; white-space: nowrap; } .price_option.is_named { border-color: #cdb9aa; background: #fff; } .price_landing_faq { display: grid; grid-template-columns: minmax(240px, .62fr) minmax(0, 1.38fr); gap: 70px; margin-bottom: 88px; } .price_landing_faq > header { padding-top: 15px; } .price_landing_faq > div { border-top: 1px solid #d9cec5; } .price_landing_faq details { border-bottom: 1px solid #d9cec5; } .price_landing_faq summary { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 3px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 750; transition: color .22s ease, padding-left .22s ease; } .price_landing_faq summary::-webkit-details-marker { display: none; } .price_landing_faq summary:hover, .price_landing_faq summary:focus-visible { color: var(--accent-dark); outline: none; padding-left: 7px; } .price_landing_faq summary i { width: 32px; height: 32px; flex: 0 0 32px; position: relative; border: 1px solid #ddcfc5; border-radius: 50%; background: #f3eae4; transition: color .22s ease, background-color .22s ease, transform .25s ease; } .price_landing_faq summary i::before, .price_landing_faq summary i::after { width: 10px; height: 1.5px; position: absolute; top: 50%; left: 50%; content: ""; border-radius: 99px; background: currentColor; transform: translate(-50%,-50%); } .price_landing_faq summary i::after { transform: translate(-50%,-50%) rotate(90deg); } .price_landing_faq details[open] summary i { color: #fff; background: var(--accent); transform: rotate(45deg); } .price_landing_faq details p { max-width: 680px; margin: -4px 48px 0 3px; padding: 0 0 24px; color: var(--muted); font-size: 11px; animation: price_faq_open .24s ease both; } .price_landing_cta { min-height: 180px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; padding: 37px 42px; border: 1px solid #d6c5b8; border-radius: 24px; background: linear-gradient(128deg, #eee0d5, #faf5f1); box-shadow: 0 17px 45px rgba(50,39,30,.07); } .price_landing_cta::before { width: 220px; height: 220px; position: absolute; right: 25%; bottom: -175px; content: ""; border: 1px solid rgba(147,105,84,.15); border-radius: 50%; } .price_landing_cta > * { position: relative; z-index: 1; } .price_landing_cta .price_landing_button { min-width: 225px; } @keyframes price_landing_enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes price_visual_idle { 0%, 100% { transform: perspective(1000px) translateY(0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); } 50% { transform: perspective(1000px) translateY(-7px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); } } @keyframes price_hint_idle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-1deg); } } @keyframes price_orbit { to { transform: rotate(360deg); } } @keyframes price_status_pulse { 0% { box-shadow: 0 0 0 0 rgba(65,116,89,.26); } 70%, 100% { box-shadow: 0 0 0 7px rgba(65,116,89,0); } } @media (max-width: 1040px) { .price_landing_hero { grid-template-columns: 1fr 390px; gap: 32px; padding: 48px 42px; } .price_landing_actions { align-items: flex-start; flex-direction: column; } .price_landing_button { min-width: 225px; } .price_landing_visual { margin-right: 9px; } .price_landing_options { gap: 35px; } } @media (max-width: 900px) { .price_landing_hero { grid-template-columns: 1fr; } .price_landing_copy { max-width: 680px; } .price_landing_actions { align-items: center; flex-direction: row; } .price_landing_visual { width: min(560px, 100%); margin: 0 auto; } .price_landing_steps { grid-template-columns: 1fr; gap: 4px; } .price_landing_steps > i { height: 17px; transform: rotate(90deg); text-align: center; } .price_landing_steps article { min-height: 67px; } .price_category_list { grid-template-columns: 1fr; } .price_landing_options { grid-template-columns: 1fr; } .price_options_intro { position: static; } .price_landing_faq { grid-template-columns: 1fr; gap: 25px; } } @media (max-width: 720px) { .price_landing { padding: 20px 0 72px; } .price_landing_hero { min-height: 0; gap: 30px; padding: 31px 22px 27px; border-radius: 22px; } .price_landing_copy h1 { font-size: 43px; } .price_landing_copy > p:not(.price_landing_badge):not(.price_landing_reassurance) { font-size: 13px; } .price_landing_actions { align-items: stretch; flex-direction: column; } .price_landing_button { width: 100%; grid-template-columns: auto minmax(0, 1fr) 30px; } .price_landing_button.is_secondary { grid-template-columns: minmax(0, 1fr) 30px; } .price_landing_visual { padding-top: 8px; } .price_visual_hint { right: -5px; } .price_landing_steps { margin-bottom: 65px; } .price_landing_heading { grid-template-columns: 1fr; gap: 10px; } .price_landing_heading > p { justify-self: start; } .price_landing_heading h2, .price_options_intro h2, .price_landing_faq h2, .price_landing_cta h2 { font-size: 35px; } .price_landing_prices, .price_landing_options, .price_landing_faq { margin-bottom: 65px; } .price_category_item { grid-template-columns: 46px minmax(0, 1fr) auto 34px; padding: 11px; } .price_landing_options { padding: 29px 21px; border-radius: 21px; } .price_landing_cta { grid-template-columns: 1fr; gap: 23px; padding: 29px 23px; border-radius: 21px; } .price_landing_cta .price_landing_button { width: 100%; } } @media (max-width: 520px) { .price_landing_reassurance { align-items: flex-start; } .price_visual_workspace { min-height: 270px; grid-template-columns: .86fr 1.14fr; } .price_visual_fields { gap: 8px; padding: 18px 10px; } .price_visual_fields > div { min-height: 33px; grid-template-columns: 19px 1fr; gap: 6px; padding: 6px; } .price_visual_fields > div > i { width: 19px; height: 19px; } .price_visual_phone { padding: 13px; } .price_visual_phone_screen { width: 124px; height: 226px; } .price_visual_hint { display: none; } .price_category_item { grid-template-columns: 42px minmax(0, 1fr) 33px; min-height: 86px; gap: 10px; } .price_category_item_icon { width: 42px; height: 42px; } .price_category_item_value { grid-column: 2; text-align: left; } .price_category_item_value small, .price_category_item_value strong { display: inline; } .price_category_item_value strong { font-size: 17px; } .price_category_item_arrow { grid-column: 3; grid-row: 1 / 3; } .price_category_item_copy strong { font-size: 18px; } .price_option { grid-template-columns: 38px minmax(0, 1fr); } .price_option > span { width: 38px; height: 38px; } .price_option > b { width: fit-content; grid-column: 2; } .price_landing_faq summary { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .price_landing_copy, .price_landing_visual, .price_category_item, .price_option, .price_landing_faq details p, .price_landing_badge i, .price_visual_window, .price_visual_orbit, .price_visual_hint, .price_visual_window > header > b i { animation: none; } .price_landing_button, .price_landing_button > span, .price_landing_button > i, .price_landing_steps article, .price_category_item, .price_category_item::after, .price_category_item_icon, .price_category_item_arrow, .price_option, .price_option > span, .price_landing_faq summary, .price_landing_faq summary i { transition-duration: .01ms; } .price_landing_button:hover, .price_landing_button:hover > span, .price_landing_button:hover > i, .price_landing_steps article:hover, .price_category_item:hover, .price_category_item:hover::after, .price_category_item:hover .price_category_item_icon, .price_category_item:hover .price_category_item_arrow, .price_option:hover, .price_option:hover > span { transform: none; } } /* Full-width pricing sections */ .price_landing { padding: 0; background: var(--paper); } .price_landing_hero { min-height: 650px; overflow: hidden; display: block; padding: 0; border: 0; border-radius: 0; background: radial-gradient(circle at 88% 12%, rgba(224,202,187,.48), transparent 29%), linear-gradient(135deg, #fff 0%, #f8f1eb 62%, #f1e5dc 100%); box-shadow: none; } .price_landing_hero_inner { min-height: 650px; position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); align-items: center; gap: clamp(40px, 7vw, 88px); padding-block: 72px; } .price_landing_copy > p:not(.price_landing_badge):not(.price_landing_reassurance) { font-size: 17px; line-height: 1.65; } .price_landing_badge { font-size: 12px; } .price_landing_reassurance { font-size: 13px; } .price_landing_flow { position: relative; z-index: 3; border-top: 1px solid #e3d9d1; border-bottom: 1px solid #e3d9d1; background: rgba(255,255,255,.9); box-shadow: 0 12px 36px rgba(50,39,30,.035); } .price_landing_steps { margin: 0 auto; padding-block: 21px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .price_landing_steps article { min-height: 88px; padding-inline: 18px; } .price_landing_steps strong { font-size: 15px; } .price_landing_steps p { font-size: 12px; } .price_landing_prices { position: relative; margin: 0; padding: 104px 0 112px; background: var(--paper); } .price_landing_prices::after { width: 260px; height: 260px; position: absolute; right: -190px; bottom: -120px; content: ""; border: 1px solid rgba(147,105,84,.12); border-radius: 50%; pointer-events: none; } .price_landing_heading { margin-bottom: 38px; } .price_landing_heading > p { font-size: 15px; line-height: 1.65; } .price_category_list { gap: 14px; } .price_category_item { min-height: 112px; padding: 17px 18px; border-radius: 20px; } .price_category_item_copy small, .price_category_item_value small { font-size: 12px; } .price_category_item_copy strong { font-size: 24px; } .price_category_item_value strong { font-size: 27px; } .price_landing_options { display: block; margin: 0; padding: 108px 0; border: 0; border-radius: 0; background: linear-gradient(125deg, #ede0d6 0%, #f8f1ec 48%, #efe3da 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(209,191,177,.55); } .price_landing_options_inner { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(48px, 8vw, 100px); } .price_options_intro > p:not(.eyebrow) { font-size: 15px; line-height: 1.65; } .price_options_list { gap: 10px; } .price_option { min-height: 91px; padding: 14px 16px; border-radius: 17px; } .price_option strong { font-size: 14px; } .price_option small { font-size: 12px; line-height: 1.45; } .price_option > b { font-size: 13px; } .price_landing_faq { display: block; margin: 0; padding: 108px 0; background: #fff; } .price_landing_faq_inner { display: grid; grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr); align-items: start; gap: clamp(50px, 8vw, 105px); border-top: 0; } .price_landing_faq > header { padding: 0; } .price_landing_faq_list { border-top: 1px solid #d9cec5; } .price_landing_faq summary { min-height: 88px; font-size: 16px; } .price_landing_faq details { overflow: hidden; } .price_faq_answer { overflow: hidden; } .price_landing_faq details p, .price_landing_faq .price_faq_answer p { max-width: 720px; margin: 0 52px 0 3px; padding: 0 0 28px; font-size: 14px; line-height: 1.65; animation: none; } .price_landing_cta { min-height: 0; display: block; padding: 78px 0; border: 0; border-radius: 0; color: #fff; background: radial-gradient(circle at 78% 120%, rgba(190,137,108,.24), transparent 34%), linear-gradient(135deg, #3b3430, #262220); box-shadow: none; } .price_landing_cta::before { width: 300px; height: 300px; right: 22%; bottom: -245px; border-color: rgba(255,255,255,.1); } .price_landing_cta_inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 45px; } .price_landing_cta .eyebrow { color: #d4ad98; } .price_landing_cta h2 { max-width: 720px; color: #fff; } .price_landing_cta .price_landing_button { min-width: 240px; } .price_visual_window > header > small { font-size: 11px; } .price_visual_window > header > b, .price_visual_label, .price_visual_fields > small { font-size: 10px; } .price_visual_phone_screen > span { font-size: 9px; } .price_visual_phone_screen > small { font-size: 10px; } .price_visual_window > footer > span, .price_visual_window > footer > strong small { font-size: 11px; } .price_visual_hint strong { font-size: 12px; } .price_visual_hint small { font-size: 10px; } @media (max-width: 1040px) { .price_landing_hero_inner { grid-template-columns: minmax(0, 1fr) 390px; gap: 38px; } .price_landing_options_inner { gap: 48px; } } @media (max-width: 900px) { .price_landing_hero_inner { grid-template-columns: 1fr; padding-block: 66px 58px; } .price_landing_copy { max-width: 700px; } .price_landing_actions { align-items: center; flex-direction: row; } .price_landing_visual { width: min(580px, 100%); margin-inline: auto; } .price_landing_options_inner, .price_landing_faq_inner { grid-template-columns: 1fr; gap: 36px; } .price_options_intro { position: static; } .price_landing_cta_inner { grid-template-columns: 1fr; } } @media (max-width: 720px) { .price_landing_hero_inner { padding-block: 48px 40px; } .price_landing_copy h1 { font-size: 44px; } .price_landing_copy > p:not(.price_landing_badge):not(.price_landing_reassurance) { font-size: 15px; } .price_landing_actions { align-items: stretch; flex-direction: column; } .price_landing_steps { padding-block: 17px; } .price_landing_prices, .price_landing_options, .price_landing_faq { padding-block: 76px; } .price_landing_heading > p, .price_options_intro > p:not(.eyebrow) { font-size: 14px; } .price_landing_options { border-radius: 0; } .price_landing_options_inner { padding: 0; } .price_landing_faq summary { min-height: 80px; font-size: 15px; } .price_landing_faq details p, .price_landing_faq .price_faq_answer p { margin-right: 42px; font-size: 13px; } .price_landing_cta { padding-block: 62px; border-radius: 0; } .price_landing_cta_inner { padding: 0; } } @media (max-width: 520px) { .price_category_item { min-height: 100px; } .price_category_item_copy small, .price_category_item_value small { font-size: 12px; } .price_category_item_copy strong { font-size: 20px; } .price_option { min-height: 86px; } .price_option small { font-size: 12px; } } /* Pricing page: premium full-width composition */ .price_page { --price-paper: #fbf8f4; --price-cream: #f3e8df; --price-dark: #292421; --price-dark-soft: #39312d; overflow: hidden; background: var(--price-paper); isolation: isolate; } .price_cost_hero { position: relative; z-index: 1; overflow: hidden; padding: 112px 0 172px; background: radial-gradient(circle at 78% 18%, rgba(255,255,255,.95) 0 7%, transparent 31%), radial-gradient(circle at 96% 94%, rgba(158,111,86,.15), transparent 34%), linear-gradient(132deg, #fff 0%, #faf4ef 48%, #ead8cb 100%); } .price_cost_hero::before { width: min(48vw, 690px); aspect-ratio: 1; position: absolute; top: -43%; right: -13%; content: ""; border: 1px solid rgba(147,105,84,.13); border-radius: 50%; box-shadow: 0 0 0 72px rgba(147,105,84,.035), 0 0 0 144px rgba(147,105,84,.025); pointer-events: none; animation: price_ambient_orbit 12s ease-in-out infinite; } .price_cost_hero::after { width: 430px; height: 430px; position: absolute; bottom: -360px; left: 7%; content: ""; border-radius: 50%; background: rgba(255,255,255,.48); filter: blur(1px); pointer-events: none; } .price_cost_hero_inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); align-items: center; gap: clamp(54px, 8vw, 108px); } .price_cost_copy { animation: price_landing_enter .62s cubic-bezier(.22,.61,.36,1) both; } .price_cost_copy .eyebrow { margin-bottom: 14px; } .price_cost_copy h1 { max-width: 720px; margin: 0 0 23px; font-size: clamp(52px, 6vw, 78px); line-height: .97; letter-spacing: -.055em; text-wrap: balance; } .price_cost_copy > p:not(.eyebrow) { max-width: 610px; margin: 0; color: #665f5a; font-size: 17px; line-height: 1.68; } .price_cost_free { width: fit-content; display: flex; align-items: center; gap: 13px; margin-top: 31px; padding: 11px 17px 11px 11px; border: 1px solid rgba(65,116,89,.2); border-radius: 16px; color: #315e45; background: rgba(247,252,248,.8); box-shadow: 0 12px 30px rgba(49,79,61,.07); backdrop-filter: blur(10px); } .price_cost_free > i { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #54866a, #356348); font-size: 13px; font-style: normal; box-shadow: 0 8px 18px rgba(65,116,89,.2); } .price_cost_free strong, .price_cost_free small { display: block; } .price_cost_free strong { margin-bottom: 1px; font-size: 14px; } .price_cost_free small { color: #617168; font-size: 12px; } .price_cost_formula { position: relative; padding: 20px; border: 1px solid rgba(187,162,146,.68); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,252,249,.72)); box-shadow: 0 32px 80px rgba(68,47,36,.16), inset 0 1px 0 rgba(255,255,255,.95); backdrop-filter: blur(18px); } .price_cost_formula::before { height: 1px; position: absolute; top: 0; right: 34px; left: 34px; content: ""; background: linear-gradient(90deg, transparent, rgba(255,255,255,.98), transparent); } .price_cost_row { min-height: 98px; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 16px; border: 1px solid rgba(220,205,195,.88); border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 5px 18px rgba(55,41,32,.035); transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease; } .price_cost_row:hover { border-color: #c9b2a3; box-shadow: 0 15px 30px rgba(54,40,31,.09); transform: translateX(5px); } .price_cost_icon { width: 50px; height: 50px; display: grid; place-items: center; color: var(--accent-dark); border: 1px solid rgba(147,105,84,.1); border-radius: 15px; background: linear-gradient(145deg, #f6eee8, #eadbd1); transition: color .24s ease, background .24s ease, transform .28s ease; } .price_cost_row:hover .price_cost_icon { color: #fff; background: linear-gradient(145deg, var(--accent), var(--accent-dark)); transform: rotate(-4deg) scale(1.03); } .price_cost_icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .price_cost_row p, .price_cost_row small, .price_cost_row strong { display: block; margin: 0; } .price_cost_row p small { margin-bottom: 2px; color: var(--muted); font-size: 12px; } .price_cost_row p strong { font-size: 17px; } .price_cost_row > b { color: var(--accent-dark); font-size: 14px; white-space: nowrap; } .price_cost_row > b small { display: inline; color: var(--muted); font-size: 11px; font-weight: 600; } .price_cost_operator { width: 34px; height: 34px; display: grid; place-items: center; margin: -4px auto; position: relative; z-index: 2; border: 4px solid #f8f2ed; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--accent), var(--accent-dark)); box-shadow: 0 7px 16px rgba(103,72,58,.2); font: 500 18px/1 Georgia, serif; animation: price_operator_idle 3.2s ease-in-out infinite; } .price_cost_total { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; padding: 18px 19px; border: 1px solid rgba(255,255,255,.08); border-radius: 17px; color: #fff; background: radial-gradient(circle at 90% 0, rgba(188,137,110,.2), transparent 40%), linear-gradient(135deg, #433a35, #282320); box-shadow: 0 13px 28px rgba(44,36,32,.14); } .price_cost_total span { color: #d0c5bf; font-size: 12px; } .price_cost_total strong { font-size: 14px; text-align: right; } .price_landing_prices { position: relative; z-index: 2; overflow: hidden; margin: -48px 0 0; padding: 114px 0 122px; border-radius: 46px 46px 0 0; background: radial-gradient(circle at 8% 82%, rgba(217,190,174,.18), transparent 25%), linear-gradient(180deg, #fff 0%, #fcfaf7 54%, #f8f2ed 100%); box-shadow: 0 -28px 75px rgba(71,50,38,.12); scroll-margin-top: 100px; } .price_landing_prices::before { width: 330px; height: 330px; position: absolute; top: 70px; right: -255px; content: ""; border: 1px solid rgba(147,105,84,.12); border-radius: 50%; box-shadow: 0 0 0 58px rgba(147,105,84,.025); pointer-events: none; } .price_landing_prices::after { width: 150px; height: 1px; position: absolute; top: 28px; right: auto; bottom: auto; left: 50%; content: ""; border: 0; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(147,105,84,.4), transparent); transform: translateX(-50%); } .price_landing_prices > .container { position: relative; z-index: 1; } .price_landing_heading { position: relative; margin-bottom: 43px; } .price_landing_heading > p { padding-right: 0; font-size: 15px; line-height: 1.65; } .price_category_list { gap: 16px; } .price_category_item { min-height: 116px; isolation: isolate; grid-template-columns: 54px minmax(0, 1fr) auto 38px; gap: 16px; padding: 18px 19px; border-color: rgba(217,205,196,.9); border-radius: 21px; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,252,249,.9)); box-shadow: 0 12px 30px rgba(50,39,30,.055); } .price_category_item::before { width: 3px; position: absolute; z-index: -1; top: 17px; bottom: 17px; left: 0; content: ""; border-radius: 0 999px 999px 0; background: var(--accent); opacity: 0; transform: scaleY(.45); transition: opacity .24s ease, transform .28s ease; } .price_category_item::after { width: 128px; height: 128px; top: -98px; right: -75px; background: rgba(147,105,84,.018); } .price_category_item:hover, .price_category_item:focus-visible { border-color: #c9b5a7; box-shadow: 0 22px 48px rgba(50,39,30,.11); transform: translateY(-5px); } .price_category_item:hover::before, .price_category_item:focus-visible::before { opacity: 1; transform: scaleY(1); } .price_category_item_icon { width: 54px; height: 54px; border: 1px solid rgba(147,105,84,.09); border-radius: 16px; background: linear-gradient(145deg, #f6eee8, #ebddd3); } .price_category_item_copy small { margin-bottom: 3px; font-size: 12px; } .price_category_item_copy strong { font-size: 24px; } .price_category_item .price_category_item_value { align-self: center; text-align: left; } .price_category_item .price_category_item_value > span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .price_category_item .price_category_item_value > strong { color: color-mix(in srgb, var(--card-color) 60%, var(--ink)); font: 600 22px/1 Georgia, "Times New Roman", serif; letter-spacing: -.02em; } .price_category_item_arrow { width: 38px; height: 38px; border-radius: 12px; } .price_landing_options { position: relative; overflow: hidden; display: block; margin: 0; padding: 118px 0; border: 0; border-radius: 0; color: #fff; background: radial-gradient(circle at 10% 2%, rgba(181,129,101,.2), transparent 28%), radial-gradient(circle at 94% 95%, rgba(181,129,101,.12), transparent 24%), linear-gradient(130deg, #352e2a 0%, #272320 58%, #211e1c 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.045), inset 0 -1px 0 rgba(255,255,255,.045); } .price_landing_options::before { width: 440px; height: 440px; position: absolute; top: -340px; left: 9%; content: ""; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.018); pointer-events: none; } .price_landing_options::after { width: 360px; height: 360px; position: absolute; right: -285px; bottom: -270px; content: ""; border: 1px solid rgba(216,172,148,.11); border-radius: 50%; pointer-events: none; } .price_landing_options_inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(52px, 8vw, 104px); } .price_options_intro { position: sticky; top: 106px; } .price_options_intro .eyebrow { color: #d6a88f; } .price_options_intro h2 { position: relative; padding-bottom: 24px; color: #fff; } .price_options_intro h2::after { width: 78px; height: 2px; position: absolute; bottom: 8px; left: 0; content: ""; border-radius: 999px; background: linear-gradient(90deg, #c38e72, transparent); } .price_options_intro > p:not(.eyebrow) { margin: 16px 0 0; color: #c7bdb7; font-size: 15px; line-height: 1.7; } .price_options_list { position: relative; display: grid; gap: 11px; } .price_option { min-height: 94px; position: relative; overflow: hidden; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 15px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.055); box-shadow: 0 12px 30px rgba(0,0,0,.1); backdrop-filter: blur(12px); transition: border-color .24s ease, background-color .24s ease, box-shadow .24s ease, transform .24s ease; } .price_option::after { width: 3px; position: absolute; top: 16px; bottom: 16px; left: 0; content: ""; border-radius: 0 999px 999px 0; background: #c99274; opacity: 0; transform: scaleY(.4); transition: opacity .24s ease, transform .28s ease; } .price_option:nth-child(even) { margin-left: 0; } .price_option:hover { border-color: rgba(218,174,150,.34); background: rgba(255,255,255,.09); box-shadow: 0 20px 42px rgba(0,0,0,.17); transform: translateX(6px); } .price_option:hover::after { opacity: 1; transform: scaleY(1); } .price_option > span { width: 46px; height: 46px; color: #f0c9b4; border: 1px solid rgba(224,179,154,.18); border-radius: 14px; background: rgba(197,139,108,.13); } .price_option > span svg { width: 22px; height: 22px; display: block; } .price_option:hover > span { color: #2b2522; background: #dfb199; transform: rotate(-4deg) scale(1.03); } .price_option strong { color: #fff; font-size: 15px; } .price_option small { color: #beb4ae; font-size: 12px; line-height: 1.5; } .price_option > b { padding: 8px 11px; color: #f1cbb7; background: rgba(207,153,124,.12); font-size: 13px; } .price_option.is_named { border-color: rgba(222,177,152,.24); background: rgba(255,255,255,.075); } .price_landing_faq { position: relative; overflow: hidden; display: block; margin: 0; padding: 118px 0 112px; background: radial-gradient(circle at 92% 18%, rgba(225,202,188,.24), transparent 23%), #fff; } .price_landing_faq::before { width: 280px; height: 280px; position: absolute; top: 60px; left: -225px; content: ""; border: 1px solid rgba(147,105,84,.1); border-radius: 50%; pointer-events: none; } .price_landing_faq_inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr); align-items: start; gap: clamp(52px, 8vw, 106px); border-top: 0; } .price_landing_faq_inner > header { position: sticky; top: 106px; padding: 0; } .price_landing_faq > .container { border-top: 0; } .price_landing_faq_list { overflow: hidden; border-top: 1px solid #d9cec5; } .price_landing_faq details { position: relative; overflow: hidden; border-bottom: 1px solid #d9cec5; background: transparent; transition: border-color .24s ease, background-color .24s ease; } .price_landing_faq details::before { width: 2px; position: absolute; top: 20px; bottom: 20px; left: 0; content: ""; border-radius: 999px; background: var(--accent); opacity: 0; transform: scaleY(.25); transition: opacity .24s ease, transform .28s ease; } .price_landing_faq details[open] { border-bottom-color: #e4d9d1; background: linear-gradient(90deg, rgba(244,234,227,.86), rgba(251,247,243,.58) 58%, transparent); } .price_landing_faq details[open]::before { opacity: 1; transform: scaleY(1); } .price_landing_faq summary { min-height: 88px; padding: 20px 8px 20px 18px; font-size: 16px; transition: color .22s ease, background-color .22s ease; } .price_landing_faq summary:hover, .price_landing_faq summary:focus-visible { padding-left: 18px; background: rgba(247,240,235,.48); } .price_landing_faq details[open] summary { color: var(--accent-dark); } .price_landing_faq summary i { display: grid; place-items: center; color: #6d5548; border-color: #d8c8bd; background: #f6eee8; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); transform: none; transition: color .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease; } .price_landing_faq summary i::before, .price_landing_faq summary i::after { width: 12px; height: 2px; top: 50%; left: 50%; border-radius: 999px; transform: translate3d(-50%,-50%,0); transition: opacity .2s ease, transform .24s ease; } .price_landing_faq summary i::after { transform: translate3d(-50%,-50%,0) rotate(90deg); } .price_landing_faq details[open] summary i { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 7px 16px rgba(103,72,58,.18); transform: none; } .price_landing_faq details[open] summary i::after { opacity: 0; transform: translate3d(-50%,-50%,0) rotate(90deg) scaleX(.2); } .price_faq_answer { overflow: hidden; } .price_landing_faq details p, .price_landing_faq .price_faq_answer p { max-width: 720px; margin: 0 52px 0 18px; padding: 0 0 29px; color: #665f5a; font-size: 14px; line-height: 1.68; animation: none; } .price_page_cta { position: relative; overflow: hidden; padding: 76px 0; color: var(--ink); border: 0; background: radial-gradient(circle at 74% 135%, rgba(174,122,94,.19), transparent 34%), linear-gradient(120deg, #f1e3da, #faf5f1 58%, #eee0d6); box-shadow: inset 0 1px 0 rgba(147,105,84,.08); } .price_page_cta::before { width: 300px; height: 300px; right: 25%; bottom: -265px; border-color: rgba(147,105,84,.13); } .price_page_cta .price_landing_cta_inner { position: relative; z-index: 1; } .price_page_cta .eyebrow { color: var(--accent); } .price_page_cta h2 { max-width: 760px; color: var(--ink); font-size: clamp(36px, 4vw, 50px); } .price_page_cta .price_landing_cta_inner > div > p:last-child { max-width: 680px; margin: 14px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; } .price_page_cta .price_landing_button { min-width: 252px; box-shadow: 0 13px 30px rgba(75,50,38,.2); } .price_page_cta .price_landing_button.is_primary:hover > span, .price_page_cta .price_landing_button.is_primary:focus-visible > span { transform: rotate(-4deg) scale(1.04); } @keyframes price_operator_idle { 0%, 100% { transform: scale(1); box-shadow: 0 7px 16px rgba(103,72,58,.2); } 50% { transform: scale(1.08); box-shadow: 0 9px 22px rgba(103,72,58,.28); } } @keyframes price_ambient_orbit { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-14px,12px,0); } } @media (max-width: 1040px) { .price_cost_hero_inner { gap: 48px; } .price_landing_options_inner, .price_landing_faq_inner { gap: 52px; } } @media (max-width: 900px) { .price_cost_hero { padding: 82px 0 142px; } .price_cost_hero_inner { grid-template-columns: 1fr; } .price_cost_copy { max-width: 720px; } .price_cost_formula { width: min(610px, 100%); } .price_landing_prices { margin-top: -34px; border-radius: 34px 34px 0 0; } .price_landing_options_inner, .price_landing_faq_inner { grid-template-columns: 1fr; gap: 40px; } .price_options_intro, .price_landing_faq_inner > header { position: static; } } @media (max-width: 720px) { .price_cost_hero { padding: 62px 0 112px; } .price_cost_copy h1 { font-size: 45px; } .price_cost_copy > p:not(.eyebrow) { font-size: 15px; } .price_cost_free { width: 100%; } .price_cost_formula { padding: 12px; border-radius: 21px; } .price_cost_row { grid-template-columns: 44px minmax(0, 1fr); } .price_cost_icon { width: 44px; height: 44px; } .price_cost_row > b { grid-column: 2; } .price_cost_total { align-items: flex-start; flex-direction: column; gap: 4px; } .price_cost_total strong { text-align: left; } .price_landing_prices { margin-top: -24px; padding-block: 82px; border-radius: 25px 25px 0 0; } .price_landing_prices::after { top: 17px; } .price_landing_heading > p { padding-right: 0; } .price_category_item { grid-template-columns: 46px minmax(0, 1fr) auto 36px; min-height: 104px; padding: 14px; } .price_category_item_icon { width: 46px; height: 46px; } .price_landing_options, .price_landing_faq { padding-block: 82px; } .price_option { grid-template-columns: 42px minmax(0, 1fr) auto; } .price_option > span { width: 42px; height: 42px; } .price_landing_faq summary { min-height: 80px; font-size: 15px; } .price_landing_faq details p, .price_landing_faq .price_faq_answer p { margin-right: 42px; margin-left: 18px; font-size: 13px; } .price_page_cta { padding: 64px 0; } } @media (max-width: 520px) { .price_cost_copy h1 { font-size: 39px; } .price_cost_free { align-items: flex-start; } .price_category_item { grid-template-columns: 43px minmax(0, 1fr) 34px; gap: 11px; } .price_category_item_icon { width: 43px; height: 43px; } .price_category_item .price_category_item_value { grid-column: 2; } .price_category_item_arrow { grid-column: 3; grid-row: 1 / 3; } .price_option { grid-template-columns: 40px minmax(0, 1fr); } .price_option > span { width: 40px; height: 40px; } .price_option > b { width: fit-content; grid-column: 2; } } @media (prefers-reduced-motion: reduce) { .price_cost_copy, .price_cost_operator, .price_cost_hero::before { animation: none; } .price_cost_row, .price_cost_icon, .price_category_item::before, .price_option::after { transition-duration: .01ms; } .price_cost_row:hover, .price_cost_row:hover .price_cost_icon, .price_option:hover, .price_option:hover > span { transform: none; } } /* How it works */ .process_page { --process-dark: #292421; --process-dark-soft: #37302c; overflow: hidden; background: #fbf8f4; } .process_hero { min-height: 720px; position: relative; overflow: hidden; display: flex; align-items: center; padding: 98px 0 118px; background: radial-gradient(circle at 83% 12%, rgba(255,255,255,.92), transparent 29%), radial-gradient(circle at 4% 94%, rgba(175,122,94,.12), transparent 28%), linear-gradient(132deg, #fff 0%, #faf4ef 52%, #ead8cb 100%); } .process_hero::before { width: min(51vw, 720px); aspect-ratio: 1; position: absolute; top: -48%; right: -14%; content: ""; border: 1px solid rgba(147,105,84,.13); border-radius: 50%; box-shadow: 0 0 0 74px rgba(147,105,84,.032), 0 0 0 148px rgba(147,105,84,.02); pointer-events: none; animation: process_orbit_idle 13s ease-in-out infinite; } .process_hero::after { width: 420px; height: 420px; position: absolute; bottom: -350px; left: 7%; content: ""; border: 1px solid rgba(147,105,84,.11); border-radius: 50%; pointer-events: none; } .process_hero_inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr); align-items: center; gap: clamp(54px, 7vw, 94px); } .process_hero_copy { max-width: 610px; } .process_hero_copy h1 { margin: 0 0 24px; font-size: clamp(54px, 6.3vw, 80px); line-height: .98; letter-spacing: -.055em; text-wrap: balance; } .process_hero_copy > p:not(.eyebrow) { max-width: 590px; margin: 0; color: #665f5a; font-size: 17px; line-height: 1.7; } .process_hero_actions { display: flex; align-items: center; gap: 14px; margin-top: 32px; } .process_hero_actions .price_landing_button { min-width: 225px; } .process_text_button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 0 15px; border-radius: 13px; color: var(--accent-dark); font-size: 13px; font-weight: 750; text-decoration: none; transition: color .22s ease, background-color .22s ease; } .process_text_button i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #ddcec3; border-radius: 50%; background: rgba(255,255,255,.72); transition: color .22s ease, border-color .22s ease, background-color .22s ease, transform .22s ease; } .process_text_button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .process_text_button:hover, .process_text_button:focus-visible { color: var(--ink); background: rgba(255,255,255,.6); outline: none; } .process_text_button:hover i, .process_text_button:focus-visible i { color: #fff; border-color: var(--accent); background: var(--accent); transform: translateY(2px); } .process_hero_facts { display: flex; flex-wrap: wrap; gap: 11px 20px; margin-top: 25px; color: #5f5a56; font-size: 12px; font-weight: 700; } .process_hero_facts span { display: inline-flex; align-items: center; gap: 8px; } .process_hero_facts i { width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid rgba(65,116,89,.2); border-radius: 50%; color: #fff; background: var(--success); font-size: 9px; font-style: normal; box-shadow: 0 5px 12px rgba(65,116,89,.15); } .process_hero_visual { min-width: 0; position: relative; padding: 30px 11px 28px 0; } .process_hero_orbit { position: absolute; border: 1px solid rgba(147,105,84,.17); border-radius: 50%; pointer-events: none; } .process_hero_orbit::after { width: 8px; height: 8px; position: absolute; content: ""; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 7px rgba(147,105,84,.09); } .process_hero_orbit.orbit_one { width: 440px; height: 440px; top: -3px; right: -132px; animation: process_orbit_spin 26s linear infinite; } .process_hero_orbit.orbit_one::after { top: 69px; left: 36px; } .process_hero_orbit.orbit_two { width: 210px; height: 210px; bottom: -17px; left: -48px; opacity: .7; animation: process_orbit_spin 19s linear infinite reverse; } .process_hero_orbit.orbit_two::after { right: 20px; bottom: 34px; } .process_builder { min-width: 0; position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(187,162,146,.68); border-radius: 28px; background: rgba(255,255,255,.9); box-shadow: 0 34px 85px rgba(68,47,36,.17), inset 0 1px 0 #fff; backdrop-filter: blur(18px); } .process_builder > header { min-height: 52px; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 0 16px; border-bottom: 1px solid #e6ddd6; color: #776f69; background: rgba(250,247,244,.9); } .process_builder > header > span { display: flex; gap: 5px; } .process_builder > header > span i { width: 7px; height: 7px; border-radius: 50%; background: #d5c9c0; } .process_builder > header > span i:nth-child(2) { background: #c8a995; } .process_builder > header > span i:nth-child(3) { background: #91ae9c; } .process_builder > header strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .process_builder > header small { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; white-space: nowrap; } .process_builder > header small i { width: 7px; height: 7px; border-radius: 50%; background: #d6a67e; box-shadow: 0 0 0 5px rgba(214,166,126,.11); animation: process_status_pulse 2.8s ease-out infinite; } .process_builder_body { min-height: 360px; display: grid; grid-template-columns: 78px minmax(145px, .9fr) minmax(175px, 1.1fr); } .process_builder_nav { display: grid; align-content: start; gap: 7px; padding: 16px 9px; border-right: 1px solid #e8dfd8; background: #f7f2ee; } .process_builder_nav > span { display: grid; justify-items: center; gap: 4px; padding: 8px 3px; border-radius: 10px; color: #877e78; font-size: 8px; } .process_builder_nav > span.is_active { color: var(--accent-dark); background: #fff; box-shadow: 0 7px 16px rgba(55,41,32,.06); } .process_builder_nav span > i { width: 25px; height: 25px; display: grid; place-items: center; } .process_builder_nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; } .process_builder_nav b { font-weight: 700; } .process_builder_form { display: grid; align-content: start; gap: 11px; padding: 24px 17px; border-right: 1px solid #e8dfd8; background: #fff; } .process_builder_form > small { margin-bottom: 3px; color: #4c4541; font-size: 10px; font-weight: 750; } .process_builder_form > span { min-height: 45px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px; border: 1px solid #e5dcd5; border-radius: 11px; transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease; } .process_builder_form > span.is_selected { border-color: #cdb7a8; background: #fdf9f6; box-shadow: 0 0 0 3px rgba(147,105,84,.07); } .process_builder_form > span i { width: 24px; height: 24px; border-radius: 8px; background: #eee4dc; } .process_builder_form > span b { width: var(--field-width); height: 6px; border-radius: 999px; background: #ded4cc; } .process_builder_form > em { display: flex; align-items: center; gap: 7px; margin-top: 3px; color: #5d7767; font-size: 9px; font-style: normal; font-weight: 700; } .process_builder_form > em i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); } .process_builder_preview { display: grid; place-items: center; padding: 22px 14px; background: radial-gradient(circle at 50% 8%, #fff, transparent 40%), #f1e6de; } .process_invitation_card { width: 158px; min-height: 284px; display: flex; align-items: center; flex-direction: column; padding: 42px 15px 20px; border: 5px solid #fff; border-radius: 18px; color: #5c4539; background: radial-gradient(circle at 20% 8%, rgba(255,255,255,.9), transparent 28%), linear-gradient(160deg, #f8eee7, #ead1c1); box-shadow: 0 18px 35px rgba(83,56,42,.18); text-align: center; } .process_invitation_card small { margin-bottom: 22px; font: 700 7px/1 sans-serif; letter-spacing: .2em; } .process_invitation_card span { font: 500 25px/1.05 Georgia, serif; } .process_invitation_card > i { margin: 2px 0; color: #b17d61; font: italic 15px/1 Georgia, serif; } .process_invitation_card b { margin: 18px 0 20px; font-size: 8px; letter-spacing: .08em; } .process_invitation_card em { width: 72%; height: 4px; margin-top: 7px; border-radius: 99px; background: rgba(102,75,61,.14); } .process_invitation_card em:last-child { width: 47%; } .process_visual_note { min-width: 236px; position: absolute; z-index: 2; right: -18px; bottom: 0; display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid rgba(65,116,89,.18); border-radius: 15px; background: rgba(250,255,251,.94); box-shadow: 0 16px 35px rgba(55,41,32,.13); backdrop-filter: blur(12px); } .process_visual_note > span { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 11px; background: var(--success); box-shadow: 0 7px 15px rgba(65,116,89,.2); } .process_visual_note svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .process_visual_note p, .process_visual_note strong, .process_visual_note small { display: block; margin: 0; } .process_visual_note strong { color: #3d5748; font-size: 11px; } .process_visual_note small { margin-top: 1px; color: #6d7b72; font-size: 9px; } .process_steps { position: relative; padding: 118px 0 124px; background: radial-gradient(circle at 3% 92%, rgba(220,194,179,.16), transparent 23%), #fbf8f4; scroll-margin-top: 88px; } .process_section_heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .58fr); align-items: end; gap: 60px; margin-bottom: 48px; } .process_section_heading h2 { max-width: 760px; margin: 0; font-size: clamp(40px, 4.8vw, 58px); line-height: 1.03; letter-spacing: -.045em; text-wrap: balance; } .process_section_heading > p { max-width: 480px; justify-self: end; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.68; } .process_steps_grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .process_step { min-height: 365px; position: relative; overflow: hidden; display: flex; align-items: flex-start; flex-direction: column; padding: 21px; border: 1px solid #dfd4cc; border-radius: 21px; background: rgba(255,255,255,.88); box-shadow: 0 12px 32px rgba(50,39,30,.045); transition: border-color .24s ease, background-color .24s ease, box-shadow .24s ease; } .process_step::before { width: 3px; position: absolute; top: 21px; bottom: 21px; left: 0; content: ""; border-radius: 0 999px 999px 0; background: var(--accent); opacity: 0; transform: scaleY(.3); transition: opacity .24s ease, transform .28s ease; } .process_step::after { width: 124px; height: 124px; position: absolute; top: -92px; right: -72px; content: ""; border: 1px solid rgba(147,105,84,.11); border-radius: 50%; transition: transform .35s ease; } .process_step:hover { border-color: #cbb8aa; background: #fff; box-shadow: 0 22px 48px rgba(50,39,30,.095); } .process_step:hover::before { opacity: 1; transform: scaleY(1); } .process_step:hover::after { transform: scale(1.2); } .process_step_top { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 41px; } .process_step_top > span { color: #b9aaa0; font: 500 28px/1 Georgia, serif; } .process_step_top > i { width: 47px; height: 47px; display: grid; place-items: center; color: var(--accent-dark); border: 1px solid #e0d3ca; border-radius: 14px; background: linear-gradient(145deg, #f7efe9, #ebddd3); transition: color .24s ease, border-color .24s ease, background .24s ease, transform .28s ease; } .process_step:hover .process_step_top > i { color: #fff; border-color: var(--accent); background: linear-gradient(145deg, var(--accent), var(--accent-dark)); transform: rotate(-4deg) scale(1.04); } .process_step_top svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .process_step > .eyebrow { margin-bottom: 6px; } .process_step h3 { margin: 0 0 13px; font-size: 26px; line-height: 1.08; letter-spacing: -.025em; } .process_step > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.62; } .process_step > a { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 21px; color: var(--accent-dark); font-size: 11px; font-weight: 750; text-decoration: none; } .process_step > a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease; } .process_step > a:hover svg, .process_step > a:focus-visible svg { transform: translateX(4px); } .process_step > a:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 5px; } .process_step.is_final { color: #fff; border-color: #37302d; background: radial-gradient(circle at 92% 3%, rgba(189,137,109,.22), transparent 31%), linear-gradient(145deg, #3a322e, #272321); box-shadow: 0 17px 40px rgba(37,31,28,.14); } .process_step.is_final::before { background: #d39b7d; } .process_step.is_final::after { border-color: rgba(255,255,255,.1); } .process_step.is_final .process_step_top > span { color: #a99a92; } .process_step.is_final .process_step_top > i { color: #e1b49c; border-color: rgba(222,178,153,.18); background: rgba(193,135,105,.12); } .process_step.is_final:hover .process_step_top > i { color: #2e2825; border-color: #ddb098; background: #ddb098; } .process_step.is_final .eyebrow { color: #d7a98f; } .process_step.is_final > p:not(.eyebrow) { color: #c8bdb7; } .process_editor { position: relative; overflow: hidden; padding: 122px 0; color: #fff; background: radial-gradient(circle at 8% 6%, rgba(190,137,108,.2), transparent 28%), radial-gradient(circle at 96% 90%, rgba(190,137,108,.1), transparent 24%), linear-gradient(132deg, #352e2a, #262220 62%, #211e1c); } .process_editor::before { width: 430px; height: 430px; position: absolute; top: -340px; left: 14%; content: ""; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.014); pointer-events: none; } .process_editor_inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(300px, .72fr) minmax(500px, 1.28fr); align-items: center; gap: clamp(55px, 8vw, 105px); } .process_editor_copy .eyebrow { color: #d5a58c; } .process_editor_copy h2 { max-width: 580px; margin: 0; color: #fff; font-size: clamp(42px, 5vw, 60px); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; } .process_editor_copy > p:not(.eyebrow) { margin: 21px 0 30px; color: #c7bdb7; font-size: 15px; line-height: 1.7; } .process_editor_copy ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .process_editor_copy li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .process_editor_copy li > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; color: #ecc6b2; border: 1px solid rgba(221,176,151,.2); border-radius: 11px; background: rgba(196,139,108,.1); } .process_editor_copy li svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .process_editor_copy li p, .process_editor_copy li strong, .process_editor_copy li small { display: block; margin: 0; } .process_editor_copy li strong { color: #fff; font-size: 13px; } .process_editor_copy li small { margin-top: 2px; color: #aaa19c; font-size: 11px; } .process_editor_board { overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 27px; background: rgba(255,255,255,.07); box-shadow: 0 34px 80px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter: blur(15px); } .process_board_toolbar { min-height: 54px; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 17px; border-bottom: 1px solid rgba(255,255,255,.1); } .process_board_toolbar > span { display: flex; gap: 5px; } .process_board_toolbar > span i { width: 7px; height: 7px; border-radius: 50%; background: #6d625c; } .process_board_toolbar > span i:nth-child(2) { background: #b78165; } .process_board_toolbar > span i:nth-child(3) { background: #6f967d; } .process_board_toolbar b { color: #ece6e2; font-size: 12px; } .process_board_toolbar small { color: #94af9d; font-size: 10px; font-weight: 700; } .process_board_content { min-height: 430px; display: grid; grid-template-columns: minmax(235px, .9fr) minmax(215px, 1.1fr); } .process_board_sections { display: grid; align-content: center; gap: 9px; padding: 25px; border-right: 1px solid rgba(255,255,255,.1); } .process_board_sections > span { display: grid; grid-template-columns: 29px minmax(0, 1fr); gap: 2px 10px; padding: 12px; border: 1px solid transparent; border-radius: 13px; color: #c1b6b0; } .process_board_sections > span.is_active { border-color: rgba(222,177,152,.19); background: rgba(255,255,255,.075); box-shadow: 0 10px 24px rgba(0,0,0,.1); } .process_board_sections span > i { width: 29px; height: 29px; grid-row: 1 / 3; border-radius: 9px; background: rgba(200,144,114,.14); } .process_board_sections b { align-self: end; font-size: 11px; } .process_board_sections small { color: #8e837d; font-size: 9px; } .process_board_sections .is_active small { color: #bf9d8a; } .process_board_phone { display: grid; place-items: center; padding: 25px; background: radial-gradient(circle at 50% 23%, rgba(205,154,126,.13), transparent 39%); } .process_board_phone > div { width: 190px; min-height: 350px; display: flex; align-items: center; flex-direction: column; padding: 48px 20px 24px; border: 6px solid #ece3dd; border-radius: 24px; color: #5d463b; background: radial-gradient(circle at 20% 6%, rgba(255,255,255,.9), transparent 28%), linear-gradient(158deg, #fbf0e8, #e8cdbd); box-shadow: 0 22px 48px rgba(0,0,0,.25); text-align: center; } .process_board_phone small { margin-bottom: 25px; font-size: 7px; font-weight: 800; letter-spacing: .18em; } .process_board_phone strong { font: 500 25px/1.12 Georgia, serif; } .process_board_phone strong i { display: block; margin: 3px 0; color: #b37c5f; font-size: 15px; font-weight: 400; } .process_board_phone span { margin: 20px 0 17px; font-size: 9px; font-weight: 750; } .process_board_phone em { width: 72%; height: 4px; margin-top: 7px; border-radius: 99px; background: rgba(102,75,61,.14); } .process_board_phone em:nth-last-child(2) { width: 53%; } .process_board_phone em:last-child { width: 64%; } .process_board_footer { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 18px; border-top: 1px solid rgba(255,255,255,.1); color: #aaa09a; font-size: 10px; } .process_board_footer span { display: flex; align-items: center; gap: 8px; } .process_board_footer span i { width: 7px; height: 7px; border-radius: 50%; background: #d1a27e; box-shadow: 0 0 0 5px rgba(209,162,126,.1); } .process_board_footer b { color: #92ad9a; font-size: 10px; } .process_blocks { position: relative; overflow: hidden; padding: 122px 0 128px; background: radial-gradient(circle at 7% 5%, rgba(255,255,255,.78), transparent 24%), radial-gradient(circle at 96% 92%, rgba(174,122,94,.11), transparent 25%), linear-gradient(135deg, #f0e3da, #f9f3ee 52%, #eee0d6); } .process_blocks::before { width: 390px; height: 390px; position: absolute; top: -310px; right: 11%; content: ""; border: 1px solid rgba(147,105,84,.11); border-radius: 50%; box-shadow: 0 0 0 72px rgba(147,105,84,.02); pointer-events: none; } .process_blocks > .container { position: relative; z-index: 1; } .process_blocks_heading { margin-bottom: 43px; } .process_opening_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 25px; } .process_opening_feature { min-height: 280px; position: relative; overflow: hidden; padding: 23px; border: 1px solid rgba(216,200,189,.94); border-radius: 21px; background: rgba(255,255,255,.75); box-shadow: 0 12px 32px rgba(59,43,34,.045); transition: border-color .24s ease, background-color .24s ease, box-shadow .24s ease; } .process_opening_feature::after { width: 132px; height: 132px; position: absolute; top: -98px; right: -74px; content: ""; border: 1px solid rgba(147,105,84,.11); border-radius: 50%; transition: transform .35s ease; } .process_opening_feature:hover { border-color: #c8b3a5; background: #fff; box-shadow: 0 21px 46px rgba(59,43,34,.09); } .process_opening_feature:hover::after { transform: scale(1.2); } .process_opening_feature > span { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 35px; color: var(--accent-dark); border: 1px solid #dfd0c6; border-radius: 15px; background: linear-gradient(145deg, #f8f0ea, #e9d9ce); transition: color .24s ease, border-color .24s ease, background .24s ease, transform .28s ease; } .process_opening_feature:hover > span { color: #fff; border-color: var(--accent); background: linear-gradient(145deg, var(--accent), var(--accent-dark)); transform: rotate(-4deg) scale(1.04); } .process_opening_feature > span svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .process_opening_feature .eyebrow { margin-bottom: 5px; } .process_opening_feature h3 { margin: 0 0 12px; font-size: 25px; line-height: 1.1; letter-spacing: -.025em; } .process_opening_feature > div > p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.63; } .process_opening_feature.is_envelope { color: #fff; border-color: #3d3531; background: radial-gradient(circle at 92% 5%, rgba(197,139,108,.23), transparent 31%), linear-gradient(145deg, #3b332f, #272321); box-shadow: 0 17px 40px rgba(42,34,30,.14); } .process_opening_feature.is_envelope::after { border-color: rgba(255,255,255,.1); } .process_opening_feature.is_envelope > span { color: #f0c5ae; border-color: rgba(222,177,152,.2); background: rgba(197,139,108,.12); } .process_opening_feature.is_envelope:hover > span { color: #2d2724; border-color: #deb098; background: #deb098; } .process_opening_feature.is_envelope .eyebrow { color: #d4a48b; } .process_opening_feature.is_envelope h3 { color: #fff; } .process_opening_feature.is_envelope > div > p:last-child { color: #c8bdb7; } .process_type_catalog { overflow: hidden; border: 1px solid #d5c5b9; border-radius: 27px; background: rgba(255,255,255,.82); box-shadow: 0 22px 58px rgba(60,44,35,.09), inset 0 1px 0 #fff; backdrop-filter: blur(12px); } .process_type_tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; padding: 8px; border-bottom: 1px solid #ded2c9; background: #302a27; } .process_type_tabs button { min-width: 0; min-height: 78px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 15px; color: #c7bcb6; background: transparent; cursor: pointer; font: inherit; transition: color .22s ease, background-color .22s ease, box-shadow .22s ease; } .process_type_tabs button:hover { color: #fff; background: rgba(255,255,255,.06); } .process_type_tabs button:focus-visible { outline: 2px solid rgba(226,178,151,.75); outline-offset: -2px; } .process_type_tabs button[aria-selected="true"] { color: #332b27; background: linear-gradient(145deg, #f8eee7, #dfc1af); box-shadow: 0 9px 22px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.7); } .process_type_tabs button > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: rgba(255,255,255,.055); transition: border-color .22s ease, background-color .22s ease, transform .25s ease; } .process_type_tabs button[aria-selected="true"] > span { border-color: rgba(102,72,58,.12); background: rgba(255,255,255,.48); animation: process_active_type 3.4s ease-in-out infinite; } .process_type_tabs button > span svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .process_type_tabs button b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .process_type_panels { min-height: 580px; } .process_type_panel { padding: 31px; } .process_type_panel > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #e2d8d0; } .process_type_panel > header h3 { margin: 0 0 7px; font-size: 31px; line-height: 1.08; letter-spacing: -.03em; } .process_type_panel > header div > p:last-child { max-width: 670px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; } .process_type_panel > header > span { min-width: 112px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 12px 14px; border: 1px solid #dfd1c7; border-radius: 15px; background: #f7efe9; text-align: center; } .process_type_panel > header > span strong { color: var(--accent-dark); font: 600 24px/1 Georgia, serif; } .process_type_panel > header > span small { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 700; } .process_block_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } .process_block_grid article { min-height: 84px; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; border: 1px solid #e4dad2; border-radius: 14px; background: #fff; transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease; } .process_block_grid article:hover { border-color: #cdb9ab; background: #fffcfa; box-shadow: 0 11px 24px rgba(55,41,32,.07); } .process_block_grid article > span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--accent-dark); border-radius: 12px; background: #f2e8e0; transition: color .22s ease, background-color .22s ease, transform .25s ease; } .process_block_grid article:hover > span { color: #fff; background: var(--accent); transform: rotate(-4deg); } .process_block_grid article > span svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .process_block_grid article p, .process_block_grid article strong, .process_block_grid article small { display: block; margin: 0; } .process_block_grid article strong { margin-bottom: 3px; font-size: 13px; line-height: 1.25; } .process_block_grid article small { color: var(--muted); font-size: 11px; line-height: 1.42; } @keyframes process_active_type { 0%, 100% { box-shadow: 0 0 0 0 rgba(147,105,84,0); } 50% { box-shadow: 0 0 0 5px rgba(147,105,84,.08); } } .process_result { position: relative; padding: 122px 0 126px; background: radial-gradient(circle at 96% 9%, rgba(219,193,178,.2), transparent 24%), linear-gradient(180deg, #fff, #faf6f2); } .process_result::before { width: 320px; height: 320px; position: absolute; bottom: -260px; left: -225px; content: ""; border: 1px solid rgba(147,105,84,.1); border-radius: 50%; pointer-events: none; } .process_result_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .process_result_grid article { min-height: 295px; position: relative; overflow: hidden; padding: 25px; border: 1px solid #dfd5cd; border-radius: 21px; background: rgba(255,255,255,.9); box-shadow: 0 12px 32px rgba(50,39,30,.045); transition: border-color .24s ease, background-color .24s ease, box-shadow .24s ease; } .process_result_grid article::after { width: 132px; height: 132px; position: absolute; top: -96px; right: -74px; content: ""; border: 1px solid rgba(147,105,84,.11); border-radius: 50%; transition: transform .35s ease; } .process_result_grid article:hover { border-color: #cbb7aa; background: #fff; box-shadow: 0 22px 48px rgba(50,39,30,.1); } .process_result_grid article:hover::after { transform: scale(1.2); } .process_result_grid article > span { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 39px; color: var(--accent-dark); border: 1px solid #dfd1c7; border-radius: 15px; background: linear-gradient(145deg, #f7efe9, #eadbd1); transition: color .24s ease, border-color .24s ease, background .24s ease, transform .28s ease; } .process_result_grid article:hover > span { color: #fff; border-color: var(--accent); background: linear-gradient(145deg, var(--accent), var(--accent-dark)); transform: rotate(-4deg) scale(1.04); } .process_result_grid article > span svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .process_result_grid article > small { position: absolute; top: 31px; right: 25px; color: #b8aba2; font: 500 19px/1 Georgia, serif; } .process_result_grid h3 { margin: 0 0 13px; font-size: 27px; line-height: 1.1; letter-spacing: -.025em; } .process_result_grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; } .process_qr_note { position: relative; overflow: hidden; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-top: 17px; padding: 24px 25px; border: 1px solid #d8c9be; border-radius: 22px; color: #fff; background: radial-gradient(circle at 88% 0, rgba(201,145,115,.21), transparent 32%), linear-gradient(135deg, #3b332f, #272321); box-shadow: 0 17px 42px rgba(46,36,31,.13); } .process_qr_note::after { width: 180px; height: 180px; position: absolute; top: -130px; right: -80px; content: ""; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; pointer-events: none; transition: transform .35s ease; } .process_qr_note:hover::after { transform: scale(1.18); } .process_qr_icon { width: 76px; height: 76px; display: grid; place-items: center; color: #f0c5ae; border: 1px solid rgba(222,177,152,.2); border-radius: 19px; background: rgba(197,139,108,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .process_qr_icon svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .process_qr_note .eyebrow { margin-bottom: 3px; color: #d5a68d; } .process_qr_note h3 { margin: 0 0 8px; color: #fff; font-size: 25px; line-height: 1.12; } .process_qr_note > div > p:last-child { max-width: 780px; margin: 0; color: #c7bdb7; font-size: 13px; line-height: 1.62; } .process_qr_meta { position: relative; z-index: 1; display: grid; justify-items: end; gap: 6px; padding-left: 18px; white-space: nowrap; } .process_qr_meta i { padding: 6px 10px; border: 1px solid rgba(225,181,157,.22); border-radius: 999px; color: #f0c4ad; background: rgba(201,145,115,.11); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .12em; } .process_qr_meta b { color: #d8cec8; font-size: 11px; } .process_cta { position: relative; overflow: hidden; padding: 77px 0; background: radial-gradient(circle at 73% 135%, rgba(174,122,94,.19), transparent 34%), linear-gradient(120deg, #f1e3da, #faf5f1 58%, #eee0d6); box-shadow: inset 0 1px 0 rgba(147,105,84,.08); } .process_cta::before { width: 290px; height: 290px; position: absolute; right: 27%; bottom: -250px; content: ""; border: 1px solid rgba(147,105,84,.13); border-radius: 50%; pointer-events: none; } .process_cta_inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 46px; } .process_cta h2 { max-width: 780px; margin: 0; font-size: clamp(37px, 4.3vw, 52px); line-height: 1.03; letter-spacing: -.043em; text-wrap: balance; } .process_cta_inner > div > p:last-child { margin: 14px 0 0; color: var(--muted); font-size: 15px; } .process_cta .price_landing_button { min-width: 254px; box-shadow: 0 13px 30px rgba(75,50,38,.2); } [data-process-reveal].is_reveal_ready { opacity: 0; animation: none; } [data-process-reveal].is_reveal_ready.is_visible { animation: process_reveal_in .58s ease var(--reveal-delay, 0s) both; } @keyframes process_reveal_in { from { opacity: 0; } to { opacity: 1; } } @keyframes process_orbit_spin { to { transform: rotate(360deg); } } @keyframes process_orbit_idle { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-14px,12px,0); } } @keyframes process_status_pulse { 0% { box-shadow: 0 0 0 0 rgba(214,166,126,.2); } 70%, 100% { box-shadow: 0 0 0 7px rgba(214,166,126,0); } } @media (max-width: 1080px) { .process_hero_inner { grid-template-columns: minmax(0, .85fr) minmax(460px, 1.15fr); gap: 40px; } .process_steps_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process_step { min-height: 330px; } .process_editor_inner { grid-template-columns: minmax(280px, .72fr) minmax(470px, 1.28fr); gap: 48px; } .process_type_tabs button { flex-direction: column; gap: 5px; } .process_block_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process_type_panels { min-height: 805px; } } @media (max-width: 900px) { .process_hero { padding: 78px 0 104px; } .process_hero_inner { grid-template-columns: 1fr; } .process_hero_copy { max-width: 720px; } .process_hero_visual { width: min(650px, 100%); margin-inline: auto; } .process_section_heading { grid-template-columns: 1fr; gap: 18px; } .process_section_heading > p { justify-self: start; } .process_editor_inner { grid-template-columns: 1fr; } .process_editor_copy { max-width: 720px; } .process_editor_board { width: min(680px, 100%); } .process_opening_grid { grid-template-columns: 1fr 1fr; } .process_opening_feature.is_structure { min-height: 230px; grid-column: 1 / -1; } .process_result_grid { grid-template-columns: 1fr 1fr; } .process_result_grid article:last-child { grid-column: 1 / -1; min-height: 245px; } .process_qr_note { grid-template-columns: 70px minmax(0, 1fr); } .process_qr_icon { width: 70px; height: 70px; } .process_qr_meta { grid-column: 2; justify-items: start; padding-left: 0; } .process_cta_inner { grid-template-columns: 1fr; } } @media (max-width: 720px) { .process_hero { min-height: 0; padding: 60px 0 80px; } .process_hero_copy h1 { font-size: 46px; } .process_hero_copy > p:not(.eyebrow) { font-size: 15px; } .process_hero_actions { align-items: stretch; flex-direction: column; } .process_hero_actions .price_landing_button, .process_text_button { width: 100%; } .process_hero_facts { align-items: flex-start; flex-direction: column; } .process_hero_visual { padding-right: 0; } .process_builder_body { grid-template-columns: 64px minmax(130px, .9fr) minmax(150px, 1.1fr); } .process_builder_nav { padding-inline: 6px; } .process_visual_note { right: -4px; } .process_steps, .process_editor, .process_blocks, .process_result { padding-block: 82px; } .process_section_heading h2, .process_editor_copy h2 { font-size: 39px; } .process_steps_grid { grid-template-columns: 1fr; } .process_step { min-height: 300px; } .process_opening_grid { grid-template-columns: 1fr; } .process_opening_feature, .process_opening_feature.is_structure { min-height: 250px; grid-column: auto; } .process_type_catalog { border-radius: 22px; } .process_type_tabs { grid-template-columns: repeat(5, minmax(108px, 1fr)); overflow-x: auto; justify-content: start; scroll-snap-type: x proximity; scrollbar-width: thin; } .process_type_tabs button { min-height: 72px; scroll-snap-align: start; } .process_type_panels { min-height: 0; } .process_type_panel { padding: 23px 19px; } .process_type_panel > header { grid-template-columns: 1fr; gap: 17px; } .process_type_panel > header > span { width: fit-content; min-width: 0; align-items: baseline; flex-direction: row; gap: 7px; } .process_type_panel > header > span small { margin-top: 0; font-size: 10px; } .process_block_grid { grid-template-columns: 1fr; } .process_result_grid { grid-template-columns: 1fr; } .process_result_grid article, .process_result_grid article:last-child { min-height: 260px; grid-column: auto; } .process_qr_note { align-items: start; gap: 18px; padding: 21px; } .process_cta { padding: 64px 0; } .process_cta .price_landing_button { width: 100%; } } @media (max-width: 560px) { .process_hero_copy h1 { font-size: 40px; } .process_builder > header { grid-template-columns: 45px minmax(0, 1fr) auto; padding-inline: 11px; } .process_builder > header strong { font-size: 10px; } .process_builder_body { min-height: 315px; grid-template-columns: 58px minmax(0, 1fr); } .process_builder_nav b { font-size: 7px; } .process_builder_form { border-right: 0; } .process_builder_preview { display: none; } .process_visual_note { min-width: 215px; } .process_section_heading h2, .process_editor_copy h2 { font-size: 35px; } .process_board_content { min-height: 380px; grid-template-columns: 1fr; } .process_board_sections { display: none; } .process_board_phone { padding: 18px; } .process_board_phone > div { min-height: 330px; } .process_result_grid article { padding: 22px; } .process_opening_feature { padding: 21px; } .process_qr_note { grid-template-columns: 1fr; } .process_qr_meta { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { .process_hero::before, .process_hero_orbit, .process_builder > header small i, .process_type_tabs button[aria-selected="true"] > span { animation: none; } [data-process-reveal].is_reveal_ready { opacity: 1; animation: none; } .process_text_button, .process_text_button i, .process_step, .process_step::before, .process_step::after, .process_step_top > i, .process_step > a svg, .process_opening_feature, .process_opening_feature::after, .process_opening_feature > span, .process_type_tabs button, .process_type_tabs button > span, .process_block_grid article, .process_block_grid article > span, .process_result_grid article, .process_result_grid article::after, .process_result_grid article > span, .process_qr_note::after { transition-duration: .01ms; } .process_text_button:hover i, .process_step:hover::before, .process_step:hover::after, .process_step:hover .process_step_top > i, .process_step > a:hover svg, .process_opening_feature:hover::after, .process_opening_feature:hover > span, .process_block_grid article:hover > span, .process_result_grid article:hover::after, .process_result_grid article:hover > span, .process_qr_note:hover::after { transform: none; } } /* Home landing */ .home_page { --home-dark: #292421; --home-dark-soft: #39312d; overflow: hidden; background: #fbf8f4; } .home_hero { min-height: 780px; position: relative; overflow: hidden; display: flex; align-items: center; padding: 0; background: radial-gradient(circle at 82% 38%, rgba(187,143,116,.18), transparent 31%), radial-gradient(circle at 7% 94%, rgba(176,126,96,.09), transparent 28%), linear-gradient(135deg, #fffdf9 0%, #f9f2ec 50%, #ead9cd 100%); } .home_hero::before { width: 680px; aspect-ratio: 1; position: absolute; top: -440px; right: -180px; content: ""; border: 1px solid rgba(147,105,84,.13); border-radius: 50%; box-shadow: 0 0 0 78px rgba(147,105,84,.032), 0 0 0 156px rgba(147,105,84,.02); opacity: .5; pointer-events: none; animation: home_ambient_drift 14s ease-in-out infinite; } .home_hero::after { width: 460px; height: 460px; position: absolute; bottom: -390px; left: 5%; content: ""; border: 1px solid rgba(147,105,84,.1); border-radius: 50%; pointer-events: none; } .home_hero_inner { min-height: 780px; position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(470px, 1.1fr); align-items: stretch; gap: clamp(38px, 5vw, 78px); } .home_hero_copy { max-width: 630px; align-self: center; padding-block: 74px; } .home_hero_copy .eyebrow { margin-bottom: 16px; font-size: 11px;} .home_hero_copy h1 { max-width: 760px; margin: 0 0 25px; font-size: clamp(47px, 5vw, 72px); line-height: 1.05; letter-spacing: -.05em; text-wrap: balance; } .home_hero_copy h1 em { display: inline-block; color: var(--accent); font-family: Georgia, serif; font-weight: 400; letter-spacing: -.045em; } .home_hero_copy > p:not(.eyebrow) { max-width: 500px; margin: 0; color: #665f5a; font-size: 18px; line-height: 1.75; } .home_hero_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 32px; } .home_hero_actions .price_landing_button { min-width: 0; } .home_hero_facts { max-width: 500px; display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 24px; color: #5e5854; font-size: 14px; font-weight: 500; } .home_hero_facts span { display: inline-flex; align-items: center; gap: 7px; } .home_hero_facts i { width: 21px; height: 21px; display: grid; place-items: center; color: var(--success); border-radius: 50%; background: transparent; box-shadow: none; font-size: 15px; font-style: normal; } .home_value_strip { position: relative; z-index: 3; color: #fff; background: linear-gradient(125deg, #352e2a, #282421 58%, #211e1c); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(255,255,255,.04); } .home_value_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .home_value_grid article { min-height: 142px; display: grid; grid-template-columns: 45px minmax(0, 1fr); align-items: center; gap: 18px; padding: 25px 33px; border-right: 1px solid rgba(255,255,255,.09); } .home_value_grid article:first-child { padding-left: 0; } .home_value_grid article:last-child { padding-right: 0; border-right: 0; } .home_value_grid article > span { color: #d1a38b; font: 500 20px/1 Georgia, serif; } .home_value_grid strong { display: block; margin-bottom: 5px; font-size: 15px; } .home_value_grid p { margin: 0; color: #afa59f; font-size: 12px; line-height: 1.55; } .home_categories { position: relative; overflow: hidden; padding: 122px 0 128px; background: radial-gradient(circle at 94% 7%, rgba(220,197,183,.22), transparent 23%), linear-gradient(180deg, #fff, #faf6f2); } .home_categories::before { width: 330px; height: 330px; position: absolute; bottom: -270px; left: -205px; content: ""; border: 1px solid rgba(147,105,84,.11); border-radius: 50%; box-shadow: 0 0 0 63px rgba(147,105,84,.02); pointer-events: none; } .home_categories > .container { position: relative; z-index: 1; } .home_section_heading { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(300px, .87fr); align-items: end; gap: clamp(40px, 7vw, 88px); margin-bottom: 44px; padding-bottom: 27px; border-bottom: 1px solid #ded4cc; } .home_section_heading h2 { max-width: 760px; margin: 0; font-size: clamp(40px, 4.8vw, 57px); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; } .home_section_heading > p { max-width: 520px; justify-self: end; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.67; } .home_category_grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .home_category_grid > a { min-height: 224px; position: relative; overflow: hidden; display: flex; align-items: flex-start; flex-direction: column; grid-column: span 2; padding: 21px; border: 1px solid #dfd4cc; border-radius: 21px; color: var(--ink); background: rgba(255,255,255,.9); box-shadow: 0 12px 32px rgba(50,39,30,.045); text-decoration: none; transition: border-color .24s ease, background-color .24s ease, box-shadow .24s ease; } .home_category_grid > a:nth-child(n+4) { grid-column: span 3; min-height: 205px; } .home_category_grid > a::after { width: 145px; height: 145px; position: absolute; top: -107px; right: -79px; content: ""; border: 1px solid rgba(147,105,84,.12); border-radius: 50%; transition: transform .36s ease; } .home_category_grid > a:hover, .home_category_grid > a:focus-visible { border-color: #c8b4a6; background: #fff; box-shadow: 0 23px 50px rgba(50,39,30,.1); outline: none; } .home_category_grid > a:hover::after, .home_category_grid > a:focus-visible::after { transform: scale(1.22); } .home_category_number { position: absolute; top: 25px; right: 22px; color: #b7aaa1; font: 500 18px/1 Georgia, serif; } .home_category_icon { width: 54px; height: 54px; display: grid; place-items: center; color: var(--accent-dark); border: 1px solid #dfd0c5; border-radius: 16px; background: linear-gradient(145deg, #f7eee8, #eadbd1); transition: color .24s ease, border-color .24s ease, background .24s ease, transform .27s ease; } .home_category_grid > a:hover .home_category_icon, .home_category_grid > a:focus-visible .home_category_icon { color: #fff; border-color: var(--accent); background: linear-gradient(145deg, var(--accent), var(--accent-dark)); transform: rotate(-4deg) scale(1.04); } .home_category_icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .home_category_copy { display: block; margin-top: auto; padding: 34px 48px 0 0; } .home_category_copy strong, .home_category_copy small { display: block; } .home_category_copy strong { max-width: 310px; margin-bottom: 7px; font: 500 25px/1.12 Georgia, serif; letter-spacing: -.025em; } .home_category_copy small { color: var(--muted); font-size: 12px; } .home_category_grid > a > i { width: 38px; height: 38px; position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; color: var(--accent-dark); border: 1px solid #ded0c6; border-radius: 12px; background: #f6eee8; transition: color .22s ease, border-color .22s ease, background-color .22s ease, transform .23s ease; } .home_category_grid > a:hover > i, .home_category_grid > a:focus-visible > i { color: #fff; border-color: var(--accent); background: var(--accent); transform: translateX(3px); } .home_category_grid > a > i svg, .home_inline_link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .home_inline_link { width: fit-content; display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--accent-dark); font-size: 13px; font-weight: 750; text-decoration: none; } .home_inline_link i { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #dcccc1; border-radius: 10px; background: #f2e8e1; transition: color .22s ease, border-color .22s ease, background-color .22s ease, transform .22s ease; } .home_inline_link:hover i, .home_inline_link:focus-visible i { color: #fff; border-color: var(--accent); background: var(--accent); transform: translateX(3px); } .home_inline_link:focus-visible { outline: none; } .home_capabilities { position: relative; overflow: hidden; padding: 122px 0 128px; color: #fff; background: radial-gradient(circle at 4% 2%, rgba(181,129,101,.19), transparent 27%), radial-gradient(circle at 96% 96%, rgba(181,129,101,.1), transparent 24%), linear-gradient(130deg, #37302c 0%, #292421 58%, #211e1c 100%); } .home_capabilities::before { width: 430px; height: 430px; position: absolute; top: -340px; right: 10%; content: ""; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 78px rgba(255,255,255,.014); pointer-events: none; } .home_capabilities > .container { position: relative; z-index: 1; } .home_section_heading.is_light { border-color: rgba(255,255,255,.11); } .home_section_heading.is_light .eyebrow { color: #d7a78e; } .home_section_heading.is_light h2 { color: #fff; } .home_section_heading.is_light > p { color: #bcb2ac; } .home_capability_grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; } .home_capability { min-height: 310px; position: relative; overflow: hidden; grid-column: span 4; padding: 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: rgba(255,255,255,.05); box-shadow: 0 14px 34px rgba(0,0,0,.11); transition: border-color .24s ease, background-color .24s ease, box-shadow .24s ease; } .home_capability::after { width: 140px; height: 140px; position: absolute; top: -103px; right: -76px; content: ""; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; transition: transform .36s ease; } .home_capability:hover { border-color: rgba(222,177,152,.28); background: rgba(255,255,255,.075); box-shadow: 0 23px 50px rgba(0,0,0,.18); } .home_capability:hover::after { transform: scale(1.2); } .home_capability.is_editor { min-height: 405px; display: grid; grid-template-columns: minmax(0, .84fr) minmax(280px, 1.16fr); align-items: center; gap: 32px; grid-column: span 7; background: radial-gradient(circle at 8% 8%, rgba(198,141,111,.14), transparent 32%), rgba(255,255,255,.055); } .home_capability.is_envelope { min-height: 405px; grid-column: span 5; background: linear-gradient(145deg, rgba(151,100,76,.21), rgba(255,255,255,.045)); } .home_capability.is_rsvp { padding-bottom: 72px; } .home_capability_icon { width: 52px; height: 52px; position: relative; z-index: 1; display: grid; place-items: center; margin-bottom: 34px; color: #efc2aa; border: 1px solid rgba(222,177,152,.2); border-radius: 16px; background: rgba(197,139,108,.12); transition: color .23s ease, border-color .23s ease, background-color .23s ease, transform .27s ease; } .home_capability:hover .home_capability_icon { color: #2d2724; border-color: #dfb198; background: #dfb198; transform: rotate(-4deg) scale(1.04); } .home_capability_icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .home_capability > small, .home_capability_copy > small { display: block; margin-bottom: 6px; color: #d4a68d; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; } .home_capability h3 { max-width: 500px; margin: 0 0 12px; color: #fff; font-size: 27px; line-height: 1.08; letter-spacing: -.027em; } .home_capability p { max-width: 520px; margin: 0; color: #beb4ae; font-size: 13px; line-height: 1.64; } .home_capability.is_editor .home_capability_icon { margin-bottom: 30px; } .home_block_stack { display: grid; gap: 8px; } .home_block_stack > div { min-height: 66px; display: grid; grid-template-columns: 21px minmax(0, 1fr) 31px; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; background: rgba(255,255,255,.075); box-shadow: 0 8px 19px rgba(0,0,0,.09); transition: border-color .22s ease, background-color .22s ease; } .home_block_stack > div:hover { border-color: rgba(222,177,152,.3); background: rgba(255,255,255,.11); } .home_block_stack i { color: #81756e; font-size: 13px; font-style: normal; letter-spacing: -5px; } .home_block_stack b, .home_block_stack small { display: block; } .home_block_stack b { margin-bottom: 2px; color: #fff; font-size: 11px; } .home_block_stack small { color: #aaa09a; font-size: 9px; } .home_block_stack em { width: 29px; height: 17px; position: relative; border-radius: 999px; background: #8a624e; } .home_block_stack em::after { width: 13px; height: 13px; position: absolute; top: 2px; right: 2px; content: ""; border-radius: 50%; background: #f4e5dc; box-shadow: 0 2px 5px rgba(0,0,0,.25); } .home_envelope_art { width: 175px; height: 112px; position: absolute; right: 24px; bottom: 25px; overflow: hidden; border: 1px solid rgba(236,196,173,.25); border-radius: 8px; background: linear-gradient(145deg, #9f7059, #65483a); box-shadow: 0 17px 34px rgba(0,0,0,.21); } .home_envelope_art::before, .home_envelope_art::after { position: absolute; content: ""; border-style: solid; } .home_envelope_art::before { inset: 0; border-width: 56px 87px; border-color: transparent rgba(255,255,255,.08) rgba(255,255,255,.13); } .home_envelope_art::after { width: 123px; height: 123px; top: -76px; left: 25px; border: 0; background: #bb8b73; transform: rotate(45deg); transform-origin: center; animation: home_envelope_idle 4.8s ease-in-out infinite; } .home_envelope_art > span { width: 36px; height: 36px; position: absolute; z-index: 2; top: 39px; left: 69px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: #6e4b3c; box-shadow: 0 6px 13px rgba(0,0,0,.19); } .home_envelope_art > i { position: absolute; z-index: 3; top: 48px; left: 77px; color: #f6e1d5; font: 500 13px/1 Georgia, serif; } .home_response_status { position: absolute; right: 22px; bottom: 23px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(111,156,127,.18); border-radius: 999px; color: #bcd1c3; background: rgba(65,116,89,.12); font-size: 10px; font-weight: 750; } .home_response_status i { width: 8px; height: 8px; border-radius: 50%; background: #79a387; box-shadow: 0 0 0 0 rgba(121,163,135,.22); animation: home_status_pulse 2.6s ease-out infinite; } .home_journey { position: relative; overflow: hidden; padding: 124px 0 128px; background: radial-gradient(circle at 94% 8%, rgba(220,197,183,.22), transparent 23%), #fff; } .home_journey::before { width: 280px; height: 280px; position: absolute; bottom: -220px; left: -190px; content: ""; border: 1px solid rgba(147,105,84,.1); border-radius: 50%; pointer-events: none; } .home_journey_inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(270px, .62fr) minmax(0, 1.38fr); align-items: start; gap: clamp(58px, 9vw, 116px); } .home_journey_intro { position: sticky; top: 108px; } .home_journey_intro h2 { margin: 0 0 18px; font-size: clamp(40px, 4.8vw, 56px); line-height: 1.03; letter-spacing: -.045em; text-wrap: balance; } .home_journey_intro > p:not(.eyebrow) { max-width: 450px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.68; } .home_journey_steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid #ddd2ca; } .home_journey_steps li { min-height: 190px; display: grid; grid-template-columns: 55px minmax(0, 1fr) 42px; align-items: center; gap: 22px; padding: 25px 3px; border-bottom: 1px solid #ddd2ca; } .home_journey_steps li > span { align-self: start; padding-top: 5px; color: #a58c7e; font: 500 20px/1 Georgia, serif; } .home_journey_steps li small { display: block; margin-bottom: 5px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .home_journey_steps h3 { margin: 0 0 8px; font-size: 28px; line-height: 1.13; } .home_journey_steps p { max-width: 620px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.62; } .home_journey_steps li > i { width: 42px; height: 42px; display: grid; place-items: center; color: var(--accent-dark); border: 1px solid #decec3; border-radius: 13px; background: #f4ebe5; font-size: 14px; font-style: normal; transition: color .22s ease, border-color .22s ease, background-color .22s ease, transform .23s ease; } .home_journey_steps li:hover > i { color: #fff; border-color: var(--accent); background: var(--accent); transform: rotate(-4deg); } .home_journey_intro .home_inline_link { margin-top: 25px; } .home_payment { position: relative; overflow: hidden; padding: 104px 0; background: radial-gradient(circle at 7% 6%, rgba(255,255,255,.8), transparent 24%), radial-gradient(circle at 96% 93%, rgba(174,122,94,.12), transparent 28%), linear-gradient(132deg, #f0e2d8, #faf4ef 52%, #ead9cd); box-shadow: inset 0 1px 0 rgba(147,105,84,.08); } .home_payment::before { width: 390px; height: 390px; position: absolute; top: -320px; left: 12%; content: ""; border: 1px solid rgba(147,105,84,.1); border-radius: 50%; box-shadow: 0 0 0 69px rgba(147,105,84,.02); pointer-events: none; } .home_payment_inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); align-items: center; gap: clamp(56px, 8vw, 105px); } .home_payment_copy h2 { max-width: 760px; margin: 0 0 20px; font-size: clamp(42px, 5vw, 60px); line-height: 1.01; letter-spacing: -.048em; text-wrap: balance; } .home_payment_copy > p:not(.eyebrow) { max-width: 680px; margin: 0; color: #665f5a; font-size: 15px; line-height: 1.7; } .home_payment_actions { display: flex; align-items: center; gap: 24px; margin-top: 29px; } .home_payment_actions .price_landing_button { min-width: 226px; } .home_payment_link { color: var(--accent-dark); font-size: 13px; font-weight: 750; text-underline-offset: 5px; transition: color .2s ease; } .home_payment_link:hover, .home_payment_link:focus-visible { color: var(--ink); } .home_payment_card { position: relative; overflow: hidden; padding: 25px; border: 1px solid rgba(255,255,255,.1); border-radius: 25px; color: #fff; background: radial-gradient(circle at 91% 4%, rgba(196,139,108,.24), transparent 32%), linear-gradient(145deg, #3a322e, #25211f); box-shadow: 0 27px 62px rgba(49,36,30,.2); } .home_payment_card::after { width: 190px; height: 190px; position: absolute; right: -122px; bottom: -135px; content: ""; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; } .home_payment_card > header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.1); } .home_payment_card > header span { display: flex; align-items: center; gap: 8px; color: #c9c0bb; font-size: 11px; font-weight: 750; } .home_payment_card > header span i { width: 8px; height: 8px; border-radius: 50%; background: #7da188; box-shadow: 0 0 0 0 rgba(125,161,136,.2); animation: home_status_pulse 2.6s ease-out infinite; } .home_payment_card > header b { padding: 7px 10px; border: 1px solid rgba(126,164,140,.18); border-radius: 999px; color: #bcd2c3; background: rgba(65,116,89,.12); font-size: 10px; } .home_payment_zero { position: relative; z-index: 1; padding: 30px 0 27px; } .home_payment_zero small, .home_payment_zero strong { display: block; } .home_payment_zero small { margin-bottom: 6px; color: #aaa09a; font-size: 11px; } .home_payment_zero strong { color: #f1c7b1; font: 500 clamp(52px, 6vw, 70px)/1 Georgia, serif; letter-spacing: -.045em; } .home_payment_formula { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1.35fr; align-items: center; gap: 11px; padding: 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(255,255,255,.045); } .home_payment_formula > span { min-width: 0; } .home_payment_formula small, .home_payment_formula b { display: block; } .home_payment_formula small { margin-bottom: 3px; color: #9d928c; font-size: 9px; font-weight: 750; text-transform: uppercase; } .home_payment_formula b { color: #fff; font-size: 11px; line-height: 1.35; } .home_payment_formula > i { width: 25px; height: 25px; display: grid; place-items: center; color: #e0b49c; border-radius: 50%; background: rgba(196,139,108,.14); font-style: normal; } .home_payment_card > footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); color: #aaa09a; font-size: 11px; } .home_payment_card > footer strong { color: #fff; font-size: 13px; } @keyframes home_ambient_drift { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-15px,12px,0); } } @keyframes home_status_pulse { 0% { box-shadow: 0 0 0 0 rgba(105,150,120,.28); } 72%, 100% { box-shadow: 0 0 0 8px rgba(105,150,120,0); } } @keyframes home_envelope_idle { 0%, 100% { transform: rotate(45deg) translate3d(0,0,0); } 50% { transform: rotate(45deg) translate3d(3px,3px,0); } } @media (max-width: 1080px) { .home_capability.is_editor { grid-template-columns: 1fr; gap: 25px; } .home_capability.is_editor .home_capability_icon { margin-bottom: 24px; } } @media (max-width: 900px) { .home_value_grid { grid-template-columns: 1fr; padding-block: 8px; } .home_value_grid article, .home_value_grid article:first-child, .home_value_grid article:last-child { min-height: 105px; padding: 20px 3px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); } .home_value_grid article:last-child { border-bottom: 0; } .home_section_heading { grid-template-columns: 1fr; gap: 18px; } .home_section_heading > p { justify-self: start; } .home_category_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home_category_grid > a, .home_category_grid > a:nth-child(n+4) { min-height: 205px; grid-column: span 1; } .home_category_grid > a:last-child { grid-column: 1 / -1; } .home_capability.is_editor, .home_capability.is_envelope { grid-column: span 12; } .home_capability { grid-column: span 6; } .home_capability.is_qr { grid-column: span 12; min-height: 250px; } .home_capability.is_editor { grid-template-columns: minmax(0, .85fr) minmax(280px, 1.15fr); } .home_journey_inner { grid-template-columns: 1fr; gap: 42px; } .home_journey_intro { position: static; } .home_journey_intro > p:not(.eyebrow) { max-width: 680px; } .home_payment_inner { grid-template-columns: 1fr; } .home_payment_card { width: min(600px, 100%); } } @media (max-width: 720px) { .home_categories, .home_capabilities, .home_journey { padding-block: 84px; } .home_section_heading h2, .home_journey_intro h2 { font-size: 39px; } .home_category_grid { grid-template-columns: 1fr; } .home_category_grid > a, .home_category_grid > a:nth-child(n+4), .home_category_grid > a:last-child { min-height: 190px; grid-column: auto; } .home_capability.is_editor, .home_capability.is_envelope, .home_capability, .home_capability.is_qr { min-height: 280px; grid-column: span 12; } .home_capability.is_editor { grid-template-columns: 1fr; } .home_block_stack { margin-top: 8px; } .home_capability.is_envelope { min-height: 360px; } .home_journey_steps li { min-height: 175px; grid-template-columns: 43px minmax(0, 1fr) 38px; gap: 14px; } .home_journey_steps li > i { width: 38px; height: 38px; } .home_payment { padding-block: 80px; } .home_payment_copy h2 { font-size: 40px; } .home_payment_actions { align-items: stretch; flex-direction: column; gap: 17px; } .home_payment_actions .price_landing_button { width: 100%; } .home_payment_link { align-self: center; } } @media (max-width: 520px) { .home_section_heading h2, .home_journey_intro h2 { font-size: 35px; } .home_category_grid > a, .home_category_grid > a:nth-child(n+4) { min-height: 184px; } .home_capability { padding: 21px; } .home_capability h3 { font-size: 25px; } .home_capability.is_editor { min-height: 560px; } .home_block_stack > div { grid-template-columns: 18px minmax(0, 1fr) 29px; } .home_envelope_art { right: 20px; bottom: 22px; } .home_journey_steps li { grid-template-columns: 36px minmax(0, 1fr); } .home_journey_steps li > i { display: none; } .home_journey_steps h3 { font-size: 25px; } .home_payment_copy h2 { font-size: 36px; } .home_payment_card { padding: 21px; border-radius: 22px; } .home_payment_formula { grid-template-columns: 1fr; } .home_payment_formula > i { width: 24px; height: 24px; } } @media (prefers-reduced-motion: reduce) { .home_hero::before, .home_envelope_art::after, .home_response_status i, .home_payment_card > header span i { animation: none; } .home_category_grid > a, .home_category_grid > a::after, .home_category_icon, .home_category_grid > a > i, .home_inline_link i, .home_capability, .home_capability::after, .home_capability_icon, .home_block_stack > div, .home_journey_steps li > i { transition-duration: .01ms; } .home_category_grid > a:hover::after, .home_category_grid > a:hover .home_category_icon, .home_category_grid > a:hover > i, .home_inline_link:hover i, .home_capability:hover::after, .home_capability:hover .home_capability_icon, .home_journey_steps li:hover > i { transform: none; } } /* Home hero template stream. */ .home_showcase { min-width: 0; height: 100%; position: relative; align-self: stretch; overflow: visible; transform: translateX(34px); } .home_showcase_streams { width: 110%; height: calc(100% + 150px); position: absolute; top: -75px; left: -1%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(13px, 1.7vw, 22px); padding: 0 12px; transform: rotate(7deg) scale(1.045); transform-origin: center; } .home_showcase_column { min-width: 0; height: 100%; overflow: visible; } .home_showcase_lane { display: flex; flex-direction: column; will-change: transform; } .home_showcase_column.is_up .home_showcase_lane { animation: home_showcase_scroll_up var(--showcase-duration-up, 32s) linear infinite; } .home_showcase_column.is_down .home_showcase_lane { transform: translate3d(0,-50%,0); animation: home_showcase_scroll_down var(--showcase-duration-down, 35s) linear infinite; } .home_showcase:not(.has_smooth_motion):hover .home_showcase_lane, .home_showcase:not(.has_smooth_motion):focus-within .home_showcase_lane, body.template_modal_open .home_showcase_lane { animation-play-state: paused; } .home_showcase_set { display: flex; flex-direction: column; gap: clamp(13px, 1.7vw, 22px); padding-bottom: clamp(13px, 1.7vw, 22px); } .home_showcase_card { width: 100%; position: relative; flex: 0 0 auto; overflow: hidden; display: block; aspect-ratio: 2 / 3; padding: 5px; border: 1px solid rgba(111,79,61,.18); border-radius: 22px; color: #fff; background: rgba(255,253,250,.92); box-shadow: 0 12px 28px rgba(69,45,33,.1); cursor: pointer; text-align: left; transform: translateZ(0); transition: transform .42s cubic-bezier(.2,.75,.2,1), border-color .3s ease, box-shadow .42s ease; } .home_showcase_card img { width: 100%; height: 100%; display: block; border-radius: 16px; object-fit: cover; object-position: top center; transition: transform .75s cubic-bezier(.2,.72,.2,1), filter .42s ease; } .home_showcase_card_details { position: absolute; z-index: 2; inset: 5px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 76px 13px 13px; border-radius: 16px; background: linear-gradient(to bottom, transparent 24%, rgba(28,22,19,.08) 48%, rgba(28,22,19,.88) 100%); opacity: 0; pointer-events: none; transform: translateY(9px); transition: opacity .34s ease, transform .42s cubic-bezier(.2,.75,.2,1); } .home_showcase_card_meta { min-width: 0; display: block; } .home_showcase_card_meta strong, .home_showcase_card_meta small { display: block; } .home_showcase_card_meta strong { overflow: hidden; margin-bottom: 5px; color: #fff; font: 500 18px/1.12 Georgia, serif; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; } .home_showcase_card_meta small { color: rgba(255,255,255,.9); font-size: 11px; font-weight: 750; } .home_showcase_card_meta small span { margin-right: 2px; color: rgba(255,255,255,.64); font-size: 9px; font-weight: 650; text-transform: uppercase; } .home_showcase_card_action { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 7px 5px 5px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #fff; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(7px); transition: background-color .24s ease, transform .38s .04s cubic-bezier(.2,.75,.2,1); } .home_showcase_card_action i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--accent-dark); background: #fff; } .home_showcase_card_action svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .home_showcase_card_action b { font-size: 9px; font-weight: 750; } .home_showcase_card:hover, .home_showcase_card:focus-visible, .home_showcase_card.is_hover_target { z-index: 3; border-color: rgba(147,105,84,.45); box-shadow: 0 18px 38px rgba(69,45,33,.15); outline: none; transform: translateY(-5px) scale(1.018); } .home_showcase_card:hover img, .home_showcase_card:focus-visible img, .home_showcase_card.is_hover_target img { filter: saturate(1.035) contrast(1.015); transform: scale(1.035); } .home_showcase_card:hover .home_showcase_card_details, .home_showcase_card:focus-visible .home_showcase_card_details, .home_showcase_card.is_hover_target .home_showcase_card_details { opacity: 1; transform: translateY(0); } .home_showcase_card:hover .home_showcase_card_action, .home_showcase_card:focus-visible .home_showcase_card_action, .home_showcase_card.is_hover_target .home_showcase_card_action { background: rgba(255,255,255,.18); transform: translateY(0); } @keyframes home_showcase_scroll_up { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-50%,0); } } @keyframes home_showcase_scroll_down { from { transform: translate3d(0,-50%,0); } to { transform: translate3d(0,0,0); } } @keyframes home_showcase_scroll_horizontal { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } @media (max-width: 1080px) { .home_hero, .home_hero_inner { min-height: 720px; } .home_hero_inner { grid-template-columns: minmax(0,.88fr) minmax(430px,1.12fr); gap: 34px; } .home_hero_copy h1 { font-size: 48px; } .home_showcase { transform: translateX(20px); } .home_showcase_streams { width: 113%; left: -2%; } } @media (max-width: 900px) { .home_hero { min-height: 0; } .home_hero_inner { min-height: 0; grid-template-columns: minmax(0,1fr); gap: 0; } .home_hero_copy { max-width: 740px; padding: 64px 0 25px; } .home_showcase { width: calc(100% + 40px); height: 360px; overflow: visible; margin-inline: -20px; transform: none; } .home_showcase_streams { width: 100%; height: 100%; inset: 0; display: block; padding: 0; transform: none; } .home_showcase_column { height: 100%; display: flex; align-items: center; } .home_showcase_column.is_down { display: none; } .home_showcase_lane { width: max-content; flex-direction: row; } .home_showcase_column.is_up .home_showcase_lane { animation: home_showcase_scroll_horizontal var(--showcase-duration-mobile, 20s) linear infinite; } .home_showcase_set { flex-direction: row; gap: 14px; padding: 0 14px 0 0; } .home_showcase_card { width: clamp(170px,31vw,215px); } .home_showcase_card_details { display: none; } } @media (max-width: 720px) { .home_hero_copy { padding: 52px 0 20px; } .home_hero_copy h1 { font-size: clamp(41px,11vw,57px); } .home_hero_copy > p:not(.eyebrow) { font-size: 16px; } .home_hero_actions { align-items: stretch; flex-direction: column; } .home_hero_actions .price_landing_button { width: 100%; max-width: 300px; margin-inline: auto; } .home_hero_facts { align-items: flex-start; } .home_showcase { height: 330px; } .home_showcase_set { gap: 12px; padding-right: 12px; } .home_showcase_card { padding: 4px; border-radius: 18px; } .home_showcase_card img { border-radius: 13px; } } @media (min-width: 500px) and (max-width: 900px) { .home_hero_copy { width: 100%; margin-inline: auto; text-align: center; } .home_hero_copy > p:not(.eyebrow) { margin-inline: auto; } .home_hero_actions, .home_hero_facts { align-items: center; justify-content: center; margin-inline: auto; } } @media (max-width: 500px) { .home_hero_actions .price_landing_button { margin-inline: initial; } } @media (max-width: 460px) { .home_showcase { width: calc(100% + 32px); height: 300px; margin-inline: -16px; } .home_showcase_card { width: clamp(156px,44vw,180px); } } @media (prefers-reduced-motion: reduce) { .home_showcase_lane { animation: none !important; transform: none !important; } .home_showcase_card, .home_showcase_card img, .home_showcase_card_details, .home_showcase_card_action { transition-duration: .01ms !important; } }