.solutions-page { --sol-accent: var(--primary); --sol-line: var(--card-border); margin: 0; background: transparent !important; } .solutions-page *, .solutions-page *::before, .solutions-page *::after { box-sizing: border-box; } .solutions-page [hidden], #navbar #solutions-nav[hidden] { display: none !important; } .solutions-page #solutions-root { width: 100%; max-width: none; margin: 0; padding: 0; min-height: 65vh; } .solutions-page #solutions-root section { padding-inline: 0; } .solutions-page #solutions-root .sol-panel { padding: 0; margin: 0; } .solutions-page a { text-underline-offset: 5px; } .solutions-page button, .solutions-page input, .solutions-page select, .solutions-page textarea { font: inherit; } .solutions-page button { cursor: pointer; } .solutions-page button:disabled { opacity: .55; cursor: wait; } .solutions-page :focus-visible { outline: 2px solid var(--sol-accent); outline-offset: 4px; } .sol-shell { width: min(1184px, calc(100% - 80px)); margin-inline: auto; } .sol-private { border-bottom: 1px solid var(--sol-line); color: var(--text-secondary); font-size: .78rem; } .sol-private .sol-shell { display: flex; gap: 20px; justify-content: space-between; align-items: center; padding-block: 12px; } .sol-private strong { font-weight: 500; color: var(--sol-accent); } .sol-private a { color: inherit; } .sol-subnav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px; padding-block: 22px; border-bottom: 1px solid var(--sol-line); } .sol-subnav a { color: var(--text-secondary); font-size: .86rem; text-decoration: none; } .sol-subnav a[aria-current="page"] { color: var(--sol-accent); } .sol-subnav a:last-child { margin-left: auto; } .sol-hero { display: grid; grid-template-columns: 1.04fr 1fr; gap: 44px; align-items: center; min-height: 620px; padding-block: 70px 80px; } .sol-hero h1 { font: 800 clamp(2.5rem, 4.2vw, 4.2rem)/1.1 var(--font-display); margin: 0 0 28px; color: var(--text-primary); max-width: 700px; letter-spacing: 0; } .sol-hero h1 em { font-style: italic; color: var(--sol-accent); } .sol-hero p { font-size: 1.04rem; line-height: 1.8; color: var(--text-muted); max-width: 590px; margin: 0 0 22px; } .sol-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-block: 30px 22px; } .sol-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 12px 20px; border-radius: 7px; background: var(--sol-accent); border: 1px solid transparent; color: var(--on-primary); font-weight: 600; text-decoration: none; font-size: .92rem; line-height: 1.3; transition: transform .18s, background .18s; } .sol-button:hover { transform: translateY(-2px); color: var(--on-primary); } .sol-button--quiet { background: transparent; border-color: var(--sol-line); color: var(--text-primary); } .sol-button--quiet:hover { background: var(--surface-hover); color: var(--text-primary); } .sol-link { background: none; border: 0; padding: 6px 0; color: var(--sol-accent); text-decoration: underline; font-size: .88rem; } .sol-note { color: var(--text-secondary); font-size: .85rem; line-height: 1.7; white-space: pre-line; } .sol-hero .sol-note { font-size: .82rem; } .sol-section { padding-block: 84px; border-top: 1px solid var(--sol-line); } .sol-section h2, .sol-heading { font: 750 clamp(1.8rem, 3.2vw, 2.8rem)/1.2 var(--font-display); letter-spacing: 0; margin: 0 0 20px; color: var(--text-primary); } .sol-section-header { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 36px; } .sol-section-header p { max-width: 550px; color: var(--text-muted); line-height: 1.8; margin: 0; } .sol-universes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .sol-universe { text-decoration: none; color: var(--text-primary); display: block; } .sol-universe h3 { font: 700 1.7rem/1.3 var(--font-display); margin: 28px 0 12px; } .sol-universe p { color: var(--text-secondary); font-size: .95rem; line-height: 1.8; } .sol-universe .sol-link { display: inline-block; } .sol-services { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; } .sol-service { padding: 28px 0; border-top: 1px solid var(--sol-line); } .sol-service h3 { font: 600 1.12rem/1.5 var(--font-body); margin: 0 0 12px; } .sol-service p { color: var(--text-muted); font-size: .96rem; line-height: 1.8; margin: 0 0 16px; } .sol-service a { color: var(--sol-accent); font-size: .88rem; } .sol-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; } .sol-process { counter-reset: process; list-style: none; margin: 0; padding: 0; } .sol-process li { position: relative; padding: 0 0 30px 56px; border-left: 1px solid var(--sol-line); margin-left: 18px; } .sol-process li:last-child { border-left: 0; padding-bottom: 0; } .sol-process li::before { counter-increment: process; content: '0' counter(process); position: absolute; left: -18px; width: 36px; height: 36px; display: grid; place-items: center; font: 500 .78rem var(--font-mono); color: var(--sol-accent); background: var(--bg-start); } .sol-process h3 { font-size: 1.04rem; margin: 0 0 8px; } .sol-process p { color: var(--text-secondary); line-height: 1.7; margin: 0; } .sol-security-list { padding: 0; list-style: none; display: grid; gap: 22px; } .sol-security-list li { border-left: 2px solid var(--sol-accent); padding-left: 20px; line-height: 1.7; } .sol-filters, .sol-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; } .sol-filters button, .sol-tabs button { background: transparent; border: 1px solid var(--sol-line); color: var(--text-muted); border-radius: 30px; padding: 9px 16px; font-size: .86rem; } .sol-filters button[aria-pressed="true"], .sol-tabs button[aria-current="page"] { color: var(--sol-accent); border-color: var(--sol-accent); background: var(--accent-soft); } .sol-gallery-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; } .sol-gallery-toolbar .sol-filters { margin-bottom: 0; } .sol-gallery-controls { display: flex; align-items: center; gap: 16px; } .sol-gallery-controls button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--sol-line); background: transparent; color: var(--text-primary); font-size: 1.2rem; } .sol-gallery-controls button:disabled { cursor: default; opacity: .35; } .sol-gallery-controls span { font: 500 .78rem var(--font-mono); color: var(--text-secondary); min-width: 58px; text-align: center; } .sol-gallery-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 8px; } .sol-gallery-play { flex-shrink: 0; min-height: 44px; padding: 10px 16px; border: 1px solid var(--sol-line); border-radius: 24px; background: transparent; color: var(--text-primary); font-size: .85rem; } .sol-gallery-play::before { content: '▶'; display: inline-block; margin-right: 9px; color: var(--sol-accent); font-size: .7rem; } .sol-gallery-play[aria-pressed="true"]::before { content: 'Ⅱ'; } .sol-gallery-dots { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2px; } .sol-gallery-dots button { display: grid; place-items: center; width: 22px; height: 44px; border: 0; padding: 0; background: transparent; } .sol-gallery-dots button::after { content: ''; width: 6px; height: 6px; background: var(--text-muted); border-radius: 8px; opacity: .45; transition: width .2s, opacity .2s; } .sol-gallery-dots button[aria-current="true"] { width: 32px; } .sol-gallery-dots button[aria-current="true"]::after { width: 24px; background: var(--sol-accent); opacity: 1; } .sol-gallery { display: flex; gap: 28px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--sol-accent) transparent; padding: 5px 0 22px; } .sol-gallery.is-dragging { scroll-snap-type: none; scroll-behavior: auto; } @media (hover: hover) and (pointer: fine) { .solutions-page .sol-gallery, .solutions-page .sol-gallery .sol-example { cursor: grab; user-select: none; -webkit-user-select: none; } .sol-gallery img { -webkit-user-drag: none; } .solutions-page .sol-gallery.is-dragging, .solutions-page .sol-gallery.is-dragging * { cursor: grabbing; } } .sol-example { flex: 0 0 calc((100% - 56px) / 2.12); min-width: 0; scroll-snap-align: start; border: 0; background: none; color: var(--text-primary); padding: 0; text-align: left; align-self: start; } .sol-example h3 { font: 600 clamp(1.3rem, 2vw, 1.85rem)/1.25 var(--font-display); margin: 12px 0; letter-spacing: -.02em; } .sol-example-media { display: block; position: relative; overflow: hidden; border-radius: 8px; } .sol-example-open { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ffffff50; border-radius: 50%; color: white; background: #081926c9; font-size: 1.35rem; transition: background .2s; } .sol-example:hover .sol-example-open, .sol-example:focus-visible .sol-example-open { background: var(--sol-accent); color: var(--on-primary); } .sol-example-meta { display: block; margin-top: 20px; color: var(--text-secondary); font-size: .78rem; } .sol-example-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 7px; padding-block: 4px; color: var(--sol-accent); font-size: .88rem; font-weight: 500; border-bottom: 1px solid var(--sol-accent); } .sol-example-summary { color: var(--text-muted); font-size: .92rem; line-height: 1.65; margin: 8px 0 12px; } .sol-example:hover .sol-art { transform: translateY(-5px); } .sol-example img, .sol-illustration { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain; border-radius: 8px; } .sol-dialog .sol-illustration { max-height: 52vh; } .sol-automation { scroll-margin-top: 96px; } .sol-automation p { color: var(--text-muted); line-height: 1.85; margin: 0 0 22px; } .sol-automation-examples { padding-top: 8px; } .sol-automation-examples h3 { margin: 0 0 24px; font: 600 1.16rem var(--font-body); } .sol-automation-examples article { padding: 22px 0; border-top: 1px solid var(--sol-line); } .sol-automation-examples article p { margin: 8px 0 0; } .sol-automation-examples button { text-align: left; font-size: 1rem; line-height: 1.6; } .sol-preview { display: flex; flex-direction: column; width: 100%; aspect-ratio: 4/3; padding: 22px; border-radius: 8px; overflow: hidden; text-align: left; background: #f3f0e8; color: #233d4a; font: 400 clamp(.7rem, 1.25vw, .96rem)/1.5 var(--font-body); } .sol-preview-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #233d4a30; font-size: .72em; } .sol-preview-body { display: grid; gap: 16px; padding-top: 24px; align-content: start; min-height: 0; } .sol-preview-title { display: block; font: 650 1.65em/1.3 var(--font-display); } .sol-preview-caption { display: block; max-width: 90%; line-height: 1.6; } .sol-preview-foot { display: block; font-size: .73em; opacity: .8; } .sol-preview-link { display: block; padding-block: 4px; font-size: .85em; font-weight: 500; } .sol-preview-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; } .sol-preview-features span { border-top: 1px solid #233d4a40; padding-top: 12px; font-size: .72em; overflow-wrap: anywhere; } .sol-preview--booking { background: #e9f3ef; color: #244c45; } .sol-preview-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .sol-preview-slots span { display: block; text-align: center; padding: 10px 4px; border: 1px solid #244c4540; border-radius: 4px; font-size: .85em; } .sol-preview-slots .is-selected { background: #244c45; color: #fff; } .sol-preview-field { border-bottom: 1px solid #244c4540; padding-block: 5px; opacity: .7; font-size: .85em; } .sol-preview--software { background: #12283d; color: #e4edf5; } .sol-preview--software .sol-preview-top { border-color: #54758b60; } .sol-preview--software .sol-preview-title { font-family: var(--font-body); font-size: 1.3em; } .sol-preview-table { display: grid; } .sol-preview-table > span { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid #54758b60; } .sol-preview-table b { color: #a5bfce; font-weight: 400; font-size: .8em; } .sol-preview-low { color: #eebd72; } .sol-preview-planning { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .sol-preview-planning b { font-size: .75em; font-weight: 400; color: #a5bfce; } .sol-preview-planning i { display: block; margin-top: 14px; padding: 8px 6px; border-left: 2px solid #16c8ee; font-style: normal; font-size: .65em; background: #1b374e; } .sol-preview-planning small { display: block; margin-top: 6px; } .sol-preview--workflow { background: #eaf0f7; color: #233d4a; } .sol-preview-flow { display: grid; gap: 10px; } .sol-preview-flow > span { display: flex; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid #233d4a30; font-size: .88em; } .sol-preview-flow small { font: 400 .85em var(--font-mono); color: #42677c; } .sol-faq { max-width: 850px; } .sol-faq details { border-bottom: 1px solid var(--sol-line); padding-block: 22px; } .sol-faq summary { font-weight: 500; cursor: pointer; padding-right: 20px; } .sol-faq p { color: var(--text-muted); line-height: 1.9; } .sol-cta { padding-block: 76px 96px; text-align: center; } .sol-cta p { color: var(--text-muted); } .sol-cta .sol-actions { justify-content: center; } .sol-visual { margin: 0; min-width: 0; position: relative; padding-bottom: 24px; } .sol-visual figcaption { margin-top: 22px; color: var(--text-secondary); font-size: .72rem; text-align: center; } .sol-art { position: relative; aspect-ratio: 1.2; border-radius: 10px; background: #122740; border: 1px solid #30475c; padding: 28px; overflow: hidden; transition: transform .25s; color: #e1eaf1; } .sol-art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(225,234,241,.03), transparent 70%); pointer-events: none; } .sol-browser { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; background: #0a1626; border: 1px solid #3b5164; border-radius: 7px; overflow: hidden; box-shadow: 0 24px 40px #0005; transform: perspective(900px) rotateY(-7deg) rotateX(4deg); } .sol-browser-bar { height: 28px; border-bottom: 1px solid #304154; display: flex; align-items: center; gap: 5px; padding: 0 12px; flex-shrink: 0; } .sol-browser-bar i { width: 4px; height: 4px; background: #70889b; border-radius: 100%; } .sol-browser-content { padding: 26px; flex: 1; min-height: 0; position: relative; } .sol-mock-brand { font: 500 .6rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; } .sol-mock-title { display: block; font: italic 700 clamp(1.1rem, 2vw, 2rem)/1.2 var(--font-display); margin-top: 28px; width: 80%; } .sol-mock-lines { width: 56%; height: 3px; margin-top: 16px; box-shadow: 0 8px #496178, 0 16px #496178; background: #496178; } .sol-landscape { position: absolute; left: 0; right: 0; height: 38%; bottom: 0; background: #1a4151; clip-path: polygon(0 46%, 22% 20%, 44% 52%, 68% 0, 100% 35%, 100% 100%, 0 100%); } .sol-landscape::after { content: ''; position: absolute; inset: 22% 0 0; background: #347182; clip-path: polygon(0 55%, 33% 0, 65% 75%, 100% 20%, 100% 100%, 0 100%); } .sol-phone { width: 28%; height: 59%; position: absolute; right: 9px; bottom: 10px; border: 4px solid #375065; border-radius: 20px; z-index: 2; background: #0d2033; padding: 22px 10px; box-shadow: 0 16px 24px #0006; } .sol-phone::before { content: ''; position: absolute; top: 7px; left: 35%; width: 30%; height: 4px; border-radius: 4px; background: #4e6377; } .sol-phone i { display: block; height: 8px; background: #16c8ee; width: 40%; margin-bottom: 14px; } .sol-phone i + i { width: 85%; height: 40%; background: #1c4259; border-radius: 6px; } .sol-phone i + i + i { width: 75%; height: 3px; background: #577a91; } .sol-art--apps .sol-browser { transform: perspective(900px) rotateY(6deg) rotateX(4deg); } .sol-board { display: grid; grid-template-columns: 18% 1fr; height: 100%; } .sol-board-sidebar { border-right: 1px solid #304154; padding: 20px 9px; display: grid; gap: 20px; align-content: start; } .sol-board-sidebar i { height: 4px; background: #496178; } .sol-board-main { padding: 20px; } .sol-board-main > i { display: block; width: 52%; background: #70889b; height: 5px; } .sol-board-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 24px; } .sol-board-column { display: grid; gap: 10px; align-content: start; } .sol-board-column i { display: block; height: 48px; background: #18334a; border-top: 2px solid #16c8ee; border-radius: 3px; } .sol-board-column:nth-child(2) { padding-top: 26px; } .sol-board-column:nth-child(3) { padding-top: 12px; } .sol-gallery .sol-art { padding: 20px; aspect-ratio: 1.35; } .sol-gallery .sol-mock-title { font-size: 1.4rem; } .sol-workspace { padding-block: 38px 80px; } .sol-workspace h1 { font: 750 clamp(2rem, 3.2vw, 3rem)/1.2 var(--font-display); margin: 20px 0; } .sol-workspace h2 { font: 700 1.5rem/1.3 var(--font-display); margin: 0 0 18px; } .sol-workspace h3 { font-size: 1.04rem; margin: 0 0 12px; } .sol-workspace p { line-height: 1.7; } .sol-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; } .sol-toolbar input { max-width: 380px; } .sol-workspace-layout { display: grid; grid-template-columns: 195px minmax(0, 1fr); gap: 40px; align-items: start; } .sol-sidebar { display: flex; flex-direction: column; gap: 5px; position: sticky; top: 100px; } .sol-sidebar button { text-align: left; padding: 12px 14px; border: 0; border-left: 2px solid transparent; background: transparent; color: var(--text-secondary); font-size: .9rem; border-radius: 0; } .sol-sidebar button[aria-current="page"] { border-color: var(--sol-accent); color: var(--sol-accent); background: var(--accent-soft); } .sol-panel { min-width: 0; } .sol-form { background: var(--surface-muted); border: 1px solid var(--sol-line); border-radius: 10px; padding: 28px; margin-block: 24px; } .sol-form > :last-child { margin-bottom: 0; } .sol-form fieldset { margin: 0 0 24px; border: 0; padding: 0; min-width: 0; } .sol-form legend { font-weight: 600; margin-bottom: 18px; } .sol-form label, .sol-label { display: grid; gap: 8px; font-size: .88rem; line-height: 1.5; margin-bottom: 18px; color: var(--text-muted); min-width: 0; } .sol-form input:not([type="checkbox"]), .sol-form select, .sol-form textarea, .sol-search { width: 100%; min-height: 44px; padding: 11px 13px; background: var(--input-bg); border: 1px solid var(--sol-line); border-radius: 6px; color: var(--input-text); outline-offset: 3px; } .sol-form textarea { min-height: 108px; resize: vertical; line-height: 1.65; } .sol-form input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--sol-accent); flex-shrink: 0; } .sol-form .sol-check { display: flex; align-items: start; gap: 10px; } .sol-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } .sol-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; } .sol-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sol-options .sol-check { padding: 16px; margin: 0; border: 1px solid var(--sol-line); border-radius: 6px; align-items: center; } .sol-options .sol-check:has(input:checked) { border-color: var(--sol-accent); background: var(--accent-soft); } .sol-stepper { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 34px; } .sol-stepper li { color: var(--text-secondary); font-size: .78rem; display: flex; gap: 7px; align-items: center; } .sol-stepper li[aria-current="step"] { color: var(--sol-accent); } .sol-stepper span { font: 500 .75rem var(--font-mono); border-bottom: 1px solid currentColor; padding: 3px 0; } .sol-wizard { max-width: 860px; margin: auto; } .sol-progress { height: 2px; background: var(--sol-line); } .sol-progress div { height: 100%; background: var(--sol-accent); transition: width .25s; } .sol-error { color: var(--danger); border-left: 2px solid var(--danger); padding: 10px 16px; line-height: 1.6; margin: 20px 0; } .sol-success { color: var(--success); padding-block: 14px; } .sol-empty { padding: 44px 0; color: var(--text-secondary); border-block: 1px solid var(--sol-line); } .sol-summary { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); gap: 18px 26px; line-height: 1.7; } .sol-summary dt { color: var(--text-secondary); } .sol-summary dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; } .sol-record { padding-block: 25px; border-bottom: 1px solid var(--sol-line); } .sol-record p { color: var(--text-muted); white-space: pre-line; overflow-wrap: anywhere; } .sol-record-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; flex-wrap: wrap; } .sol-badge { display: inline-block; color: var(--sol-accent); background: var(--accent-soft); border-radius: 4px; padding: 4px 8px; font: 500 .72rem/1.5 var(--font-mono); } .sol-meta { color: var(--text-secondary); font-size: .8rem; line-height: 1.7; } .sol-table-wrap { overflow-x: auto; } .sol-table { width: 100%; border-collapse: collapse; font-size: .88rem; } .sol-table th { text-align: left; color: var(--text-secondary); font-weight: 500; font-size: .8rem; } .sol-table td, .sol-table th { padding: 18px 12px; border-bottom: 1px solid var(--sol-line); vertical-align: top; } .sol-table td:first-child, .sol-table th:first-child { padding-left: 0; } .sol-table a { color: var(--text-primary); } .sol-table small { display: block; color: var(--text-secondary); margin-top: 6px; } .sol-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 30px; gap: 24px; } .sol-stat { border-left: 1px solid var(--sol-line); padding-left: 20px; } .sol-stat strong { font: 500 2rem var(--font-mono); display: block; color: var(--text-primary); margin-bottom: 8px; } .sol-stat span { color: var(--text-secondary); font-size: .82rem; } .sol-editor details { border-bottom: 1px solid var(--sol-line); margin-bottom: 18px; } .sol-editor summary { padding-block: 10px 20px; cursor: pointer; font-weight: 500; } .sol-editor-fields { padding: 4px 0 18px; } .sol-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 12000; max-width: calc(100vw - 40px); padding: 14px 24px; border-radius: 8px; border: 1px solid var(--sol-line); background: var(--input-bg); color: var(--text-primary); box-shadow: 0 8px 30px #0004; } .sol-dialog { width: min(780px, calc(100% - 32px)); max-height: 85vh; padding: 32px; border: 1px solid var(--sol-line); border-radius: 12px; background: var(--bg-start); color: var(--text-primary); } .sol-dialog::backdrop { background: #000a; backdrop-filter: blur(6px); } .sol-dialog-close { display: block; margin-left: auto; padding: 8px 12px; background: transparent; color: var(--text-primary); border: 1px solid var(--sol-line); border-radius: 6px; } .sol-dialog h2 { font: 700 1.7rem var(--font-display); } .sol-dialog p { line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; } .sol-media-video { width: 100%; max-height: 50vh; } .sol-dynamic-row { display: grid; grid-template-columns: 2fr .6fr 1fr .7fr auto; gap: 12px; align-items: start; margin-block: 16px; } .sol-schedule-row { display: grid; grid-template-columns: 1fr .5fr 1.5fr auto; gap: 12px; align-items: start; } .sol-remove { margin-top: 29px; min-height: 44px; border: 1px solid var(--sol-line); background: transparent; color: var(--danger); padding: 8px 12px; border-radius: 5px; } .sol-hidden-field { display: none !important; } html[data-color-mode="light"] .solutions-page, .solutions-page.light-mode { --sol-accent: #2c63f2; --on-primary: #fff; } .solutions-page.light-mode #navbar .lang-switch { background: #122740 !important; color: #e1eaf1 !important; } @media (max-width: 1050px) { .sol-shell { width: calc(100% - 48px); } .sol-hero { gap: 24px; padding-block: 48px; min-height: 540px; } .sol-split { gap: 40px; } .sol-art { padding: 18px; } .sol-workspace-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; } .sol-gallery { gap: 18px; } .sol-example { flex-basis: calc((100% - 36px) / 2.12); } } @media (max-width: 760px) { .sol-hero { grid-template-columns: 1fr; gap: 28px; } .sol-hero h1 { font-size: clamp(2.4rem, 9vw, 3.4rem); } .sol-hero p { font-size: 1rem; } .sol-visual { max-width: 520px; width: 100%; margin: auto; } .sol-art { padding: 24px; } .sol-mock-title { font-size: 2rem; } .sol-universes, .sol-services, .sol-split { grid-template-columns: 1fr; gap: 32px; } .sol-section { padding-block: 54px; } .sol-section-header { align-items: start; flex-direction: column; gap: 12px; } .sol-gallery { gap: 18px; } .sol-example { flex-basis: 88%; } .sol-gallery-footer { flex-wrap: wrap; gap: 8px; } .sol-gallery-controls { gap: 8px; } .sol-gallery-dots { order: 3; flex-basis: 100%; gap: 0; } .sol-gallery-dots button { width: 19px; } .sol-example h3 { font-size: 1.45rem; } .sol-example-open { width: 36px; height: 36px; right: 10px; bottom: 10px; } .sol-preview { padding: 15px; } .sol-preview-body { padding-top: 14px; gap: 10px; } .sol-preview-title { font-size: 1.25em; } .sol-preview-caption { font-size: .85em; } .sol-preview-features { margin-top: 4px; gap: 10px; } .sol-preview-table > span { padding-block: 6px; } .sol-preview-flow { gap: 4px; } .sol-preview-flow > span { padding-block: 6px; } .sol-subnav { gap: 14px 20px; } .sol-subnav a:last-child { margin-left: 0; } .sol-private .sol-shell { align-items: start; gap: 12px; font-size: .72rem; } .sol-private .sol-shell > span { max-width: 68%; } .sol-workspace-layout { grid-template-columns: 1fr; gap: 20px; } .sol-sidebar { position: static; flex-direction: row; flex-wrap: wrap; gap: 5px; border-bottom: 1px solid var(--sol-line); padding-bottom: 16px; } .sol-sidebar button { border-left: 0; border-bottom: 2px solid transparent; padding: 10px 12px; border-radius: 0; font-size: .8rem; } .sol-grid-2, .sol-grid-3 { grid-template-columns: 1fr; } .sol-options { grid-template-columns: 1fr; gap: 10px; } .sol-form { padding: 20px; } .sol-summary { grid-template-columns: 1fr; gap: 5px; } .sol-summary dd { margin-bottom: 20px; } .sol-stats { grid-template-columns: repeat(2, 1fr); } .sol-stat strong { font-size: 1.7rem; } .sol-dynamic-row, .sol-schedule-row { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--sol-line); padding-bottom: 16px; } .sol-dynamic-row > :first-child, .sol-schedule-row > :first-child { grid-column: 1 / -1; } .sol-remove { margin-top: 0; } .sol-dialog { padding: 22px; } .sol-workspace .sol-table { min-width: 500px; } } @media (prefers-reduced-motion: reduce) { .solutions-page *, .solutions-page *::before, .solutions-page *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }