/* rubik-300 - latin-ext_hebrew_cyrillic-ext_latin_cyrillic */
@font-face {
font-family: "Rubik-fallback";
size-adjust: 94.1%; ascent-override: normal;
src: local("Arial");
}
@font-face {
font-family: 'Rubik';
font-style: normal;
font-display: swap;
font-weight: 300;
src: local('Rubik Light'), local('Rubik-Light'),
}
/* rubik-300italic - latin-ext_hebrew_cyrillic-ext_latin_cyrillic */
@font-face {
font-family: 'Rubik';
font-display: swap;
font-style: italic;
font-weight: 300;
src: local('Rubik Light Italic'), local('Rubik-LightItalic'),
}
/* rubik-regular - latin-ext_hebrew_cyrillic-ext_latin_cyrillic */
@font-face {
font-family: 'Rubik';
font-display: swap;
font-style: normal;
font-weight: 400;
src: local('Rubik'), local('Rubik-Regular'),
}
/* rubik-italic - latin-ext_hebrew_cyrillic-ext_latin_cyrillic */
@font-face {
font-display: swap;
font-family: 'Rubik';
font-style: italic;
font-weight: 400;
src: local('Rubik Italic'), local('Rubik-Italic'),
}
:root {
--primary-dark: #0a1628;
--primary-blue: #1a2f4a;
--accent-blue: #0096C8;
--light-blue: #59C0F4;
--text-white: #fefefe;
--text-light: #e0e0e0;
--border-blue: #00b4d8;
--active-blue: #0987B1;
--active-transparent: #E5E5E5;
--dl-sticky-top: 0px;
--dl-head-h: 76px;
--dl-text: #1A1A1A;
--dl-blue: #0096C8;
--dl-blue-hover: #0096C8;
--dl-blue-active: #0987B1;
--dl-divider: #E5E5E5;
--dl-soft: #F7F7F7;
--dl-white: #FEFEFE;
}
body {
font-family: 'Rubik', "Rubik-fallback";
background: var(--primary-dark);
color: var(--text-white);
/*line-height: 1.6;*/
overflow-x: hidden;
}
h2 {
font-size: 32px;
font-weight: 500;
text-align: center;
margin-bottom: 12px;
color: var(--text-white);
}
.container {
max-width: 1208px;
margin: 0 auto;
padding: 0 116px;
}
.btn-primary {
background: var(--accent-blue);
color: var(--text-white);
height: 46px;
min-width: 230px;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 64px;
white-space: nowrap;
font-size: 16px;
font-weight: 500;
cursor: pointer;
box-sizing: border-box;
transition: background 0.3s, transform 0.2s;
border: 1px solid var(--accent-blue);
}
.btn-transparent {
border:1px solid var(--text-white);
color: var(--text-white);
height: 54px;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 64px;
white-space: nowrap;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
box-sizing: border-box;
min-width: 200px;
}
.btn-transparent:hover {
background: var(--text-white);
color: var(--accent-blue);
border:1px solid var(--text-white);
}
.btn-transparent:active {
background: var(--active-transparent);
color: var(--accent-blue);
border:1px solid var(--active-transparent);
}
.container .btn-primary {
text-decoration: none;
}
.btn-primary:hover {
background: var(--light-blue);
color: var(--text-white);
border: 1px solid var(--light-blue);
}
.btn-primary:active {
background:var(--active-blue);
color: var(--text-white);
border: 1px solid var(--active-blue);
}
.btn-primary:focus {
background: var(--accent-blue);
color: var(--text-white);
border: 1px solid var(--accent-blue);
}
.btn-primary.btn-large, .btn-transparent.btn-large {
height: 48px;
padding: 16px 32px;
/*display: inline-flex;*/
justify-content: center;
align-items: center;
align-self: flex-start;
}
.sticked .btn-primary.btn-large {
display: block;
}
.btn-secondary {
background: transparent;
color: var(--accent-blue);
border: 2px solid var(--accent-blue);
padding: 14px 32px;
border-radius: 64px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
margin-top: 40px;
}
.btn-secondary:hover {
background: var(--accent-blue);
color: var(--text-white);
}
.tablet-show {
display: none;
}
/* Hero Section */
.hero {
padding: 80px 0;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.with-event .hero-content {
margin-top: 52px;
}
.hero-content {
display: flex;
align-items: center;
gap: 70px;
position: relative;
justify-content: space-between;
z-index: 1;
}
.hero-title {
font-size: 44px;
font-weight: 500;
line-height: 1.24;
margin-bottom: 24px;
color: var(--text-white);
}
.hero-description {
font-size: 16px;
color: var(--text-light);
margin-bottom: 40px;
line-height: 1.6;
}
.hero-image {
position: relative;
height: 500px;
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hero-illustration {
max-width: 100%;
height: auto;
}
.library-start {
padding: 140px 0;
position: relative;
}
.library-start .container {
display: flex;
flex-direction: column;
gap: 64px;
}
.library-start__head {
position: relative;
display: flex;
justify-content: center;
}
a.library-start__back {
position: absolute;
left: 0;
top: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 16px 0;
color: var(--text-white);
text-decoration: none;
font-size: 16px;
font-weight: 500;
white-space: nowrap;
}
.library-start__back:hover span{
color: var(--text-white);
}
.library-start__back-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 100px;
background: #14212E;
color: var(--text-white);
transition: background-color 0.2s ease;
}
.library-start__back:hover .library-start__back-icon {
background: var(--accent-blue);
}
.library-start__back-icon svg {
display: block;
width: 16px;
height: 12px;
}
.library-start__intro {
display: flex;
flex-direction: column;
align-items: center;
gap: 36px;
width: 100%;
max-width: 648px;
text-align: center;
}
.library-start__title-group {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.library-start__title {
margin: 0;
font-size: 44px;
font-weight: 500;
line-height: 1.24;
color: var(--text-white);
text-transform: capitalize;
}
.library-start__description {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 1.46;
color: var(--text-white);
}
.library-start__buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.library-start__buttons .btn-primary,
.library-start__buttons .btn-transparent {
width: auto;
min-width: 0;
height: auto;
padding: 17px 32px 16px;
}
.library-start__visual {
width: 100%;
border-radius: 24px;
overflow: hidden;
}
.library-start__image {
display: block;
width: 100%;
height: auto;
}
.image-split {
display: flex;
height: 100%;
}
.image-left,
.image-right {
flex: 1;
background: linear-gradient(135deg, rgba(0, 180, 216, 0.2) 0%, rgba(26, 47, 74, 0.8) 100%);
position: relative;
}
.image-left::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') center/cover;
opacity: 0.3;
}
.image-right {
background: linear-gradient(135deg, rgba(26, 47, 74, 0.8) 0%, rgba(0, 180, 216, 0.2) 100%);
position: relative;
}
.image-right::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(90deg, transparent 0%, rgba(0, 180, 216, 0.3) 50%, transparent 100%),
radial-gradient(circle, rgba(0, 180, 216, 0.4) 1px, transparent 1px);
background-size: 100% 2px, 20px 20px;
background-position: center, 0 0;
opacity: 0.6;
animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 0.8; }
}
/* Navigational Menu */
.nav-menu {
background: var(--primary-dark);
position: sticky;
z-index: 8;
top: -1px;
padding-top: 1px;
}
.with-event .nav-menu {
top: 0px;
padding-top: 2px;
}
.nav-menu-items {
display: flex;
gap: 24px;
align-items: center;
justify-content: center;
}
.nav-menu-accordion {
width: 100%;
display: flex;
gap: 24px;
align-items: center;
justify-content: center;
}
.nav-menu-trigger {
display: contents;
}
.nav-menu-list {
display: flex;
gap: 24px;
align-items: center;
justify-content: center;
}
.nav-menu-list .tablet-show {
display: none;
}
.nav-menu-list .btn-primary.btn-large {
display: none;
}
ul.compare-list li {
list-style: none;
}
.sticked .nav-menu-list .btn-primary.btn-large {
display: inline-flex;
font-size: 14px;
margin-left: 15px;
min-width: inherit;
height: initial;
padding: 6.5px 32px;
margin-left: 0;
align-self: initial;
}
.sticked .nav-menu-list .btn-primary.btn-large.tablet-show, .sticked .nav-menu-list .btn-primary.btn-large.mobile {
display: none;
}
/* Hide first item on desktop, show it in list */
.nav-menu-item-first {
display: none;
}
.nav-menu-item {
padding: 21px 12px 24px;
color: var(--text-white);
text-decoration: none;
font-size: 14px;
font-weight: 400;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
line-height: 1.46;
}
.nav-menu-item-first {
padding: 10px 12px 24px;
font-size: 14px;
font-weight: 400;
color: var(--text-white);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
}
/* Common accordion icon styles */
.accordion-icon {
position: relative;
width: 19px;
height: 19px;
opacity: 1;
flex-shrink: 0;
}
.accordion-icon::before,
.accordion-icon::after {
position: absolute;
left: 15px;
content: ' ';
height: 25px;
width: 2px;
background-color: var(--text-white);
transition: all 0.3s;
}
.accordion-icon::before {
transform: rotate(0deg);
}
.accordion-icon::after {
transform: rotate(-90deg);
}
.accordion-icon:hover::before,
.accordion-icon:hover::after {
background-color: var(--light-blue);
}
.active .accordion-icon::before,
.active .accordion-icon::after {
background-color: var(--accent-blue);
}
.accordion-icon:active::before,
.accordion-icon:active::after {
background-color: var(--active-blue);
}
/* Hover states on parent elements (like faq-item) */
.faq-item:hover .accordion-icon::before,
.faq-item:hover .accordion-icon::after,
.challenges-sidebar-trigger:hover .accordion-icon::before,
.challenges-sidebar-trigger:hover .accordion-icon::after {
background-color: var(--light-blue);
}
.faq-item:active .accordion-icon::before,
.faq-item:active .accordion-icon::after,
.challenges-sidebar-trigger:active .accordion-icon::before,
.challenges-sidebar-trigger:active .accordion-icon::after {
background-color: var(--active-blue);
}
/* Active state for accordion icons */
.accordion-item.active .accordion-icon,
.nav-menu-accordion.active .accordion-icon,
.challenges-sidebar-accordion.active .accordion-icon {
height: 30px;
transform: rotate(45deg);
}
.nav-menu-accordion.active .accordion-icon {
transform: rotate(0deg);
left: 2px;
bottom: 2px;
}
.accordion-item.active .accordion-icon::before,
.accordion-item.active .accordion-icon::after,
.nav-menu-accordion.active .accordion-icon::before,
.nav-menu-accordion.active .accordion-icon::after,
.challenges-sidebar-accordion.active .accordion-icon::before,
.challenges-sidebar-accordion.active .accordion-icon::after {
height: 30px;
background-color: var(--accent-blue);
}
.nav-menu-icon {
display: none;
}
.ftr-hero {
padding-top: 165px;
}
.nav-menu-item.active {
color: var(--accent-blue);
border-bottom-color: var(--accent-blue);
}
.nav-menu-item:hover {
color: var(--light-blue);
border-bottom-color: var(--light-blue);
}
.nav-menu-item:active {
color: var(--active-blue);
border-bottom-color: var(--active-blue);
}
/* Other Libraries dropdown (Figma 184:2087 / 184:2179 / 839:13934) */
.nav-menu-other-libraries {
position: relative;
}
.nav-menu-other-libraries__trigger {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 10px 12px;
border: none;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--text-white);
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 1.46;
white-space: nowrap;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-menu-other-libraries__trigger:hover {
color: var(--light-blue);
}
.nav-menu-other-libraries__trigger:active {
color: var(--active-blue);
}
.nav-menu-other-libraries__chevron {
display: block;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.nav-menu-other-libraries.is-open .nav-menu-other-libraries__chevron {
transform: rotate(180deg);
}
.nav-menu-other-libraries__sublist {
display: none;
}
.other-libraries-dropdown {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 7;
background: #14212E;
padding: 40px 0;
}
.other-libraries-dropdown__grid {
display: flex;
justify-content: center;
gap: 16px;
}
.other-libraries-dropdown__col {
display: flex;
flex-direction: column;
gap: 16px;
width: 290px;
flex-shrink: 0;
}
.other-libraries-dropdown__card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
text-decoration: none;
color: var(--text-white);
border-radius: 4px;
transition: background-color 0.2s ease;
}
.other-libraries-dropdown__card:hover,
.other-libraries-dropdown__card:focus-visible {
background: var(--accent-blue);
color: var(--text-white);
}
.other-libraries-dropdown__icon {
display: block;
width: 40px;
height: 40px;
flex-shrink: 0;
}
.other-libraries-dropdown__text {
display: flex;
flex-direction: column;
gap: 4px;
}
.other-libraries-dropdown__name {
font-size: 16px;
font-weight: 500;
line-height: 1.46;
}
.other-libraries-dropdown__desc {
font-size: 14px;
font-weight: 400;
line-height: 1.46;
color: var(--text-white);
}
.nav-menu.other-libraries-open {
z-index: 9;
}
@media (min-width: 601px) {
.nav-menu-other-libraries__sublist {
display: none !important;
}
}
/* Section Styles */
.section {
padding: 80px 0;
position: relative;
}
.section-left p{
text-align: left;
}
.section-left .inner-section {
display: flex;
}
.section-left .inner-section .block {
width: 50%;
}
.section-left .inner-section .block-left .section-title {
text-align: left;
}
.section-title {
font-size: 32px;
font-weight: 500;
text-align: center;
color: var(--text-white);
max-width: 594px;
margin: 0 auto 12px;
}
.section-subtitle {
font-size: 24px;
text-align: center;
color: var(--text-light);
max-width: 600px;
margin: 0 auto 36px;
line-height: 136%;
}
.section-description {
font-size: 16px;
text-align: center;
color: var(--text-white);
max-width: 594px;
margin: 0 auto 36px;
line-height: 1.46;
}
.list-description {
font-size: 16px;
color: var(--text-light);
line-height: 1.46;
margin:8px 0;
}
.info-with-illustration__layout {
display: flex;
justify-content: space-around;
}
.info-with-illustration__content {
width: 492px;
}
.info-with-illustration__item {
width: 468px;
padding: 24px 0;
}
.info-with-illustration__item:last-child {
padding-bottom: 0;
}
.info-with-illustration__layout h3 {
margin-bottom: 8px;
}
/* Digital Twin Technology Section */
.digital-twin-tech {
background: var(--primary-dark);
}
.twin-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.twin-item {
text-align: center;
}
.twin-label {
font-size: 24px;
font-weight: 500;
margin-bottom: 20px;
color: var(--text-white);
}
.double-image {
/*height: 400px;*/
border-radius: 8px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.double-image img {
max-width: 100%;
height: auto;
}
.double-image .title-image {
font-size: 14px;
display: block;
}
.twin-image {
height: 400px;
border-radius: 8px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.twin-photo,
.twin-illustration {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.twin-image.digital {
position: relative;
}
.twin-image.digital::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: 100% 2px, 2px 100%, 30px 30px;
background-position: center, center, 0 0;
opacity: 0.7;
}
/* Why Digital Twin Section */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
row-gap: 4px;
}
.features-grid .section-description {
margin-bottom: 0;
}
.feature-card {
padding: 32px 24px;
border-radius: 24px;
transition: all 0.3s;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.feature-card .feature-title {
margin-bottom: 0px;
}
.feature-icon {
width: 120px;
height: 120px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.feature-icon img {
max-width: 100%;
max-height: 100%;
}
.feature-title {
font-size: 24px;
font-weight: 500;
color: var(--text-white);
line-height: 1.34;
}
.accent-text {
color: var(--accent-blue);
}
/* Why Anylogic Section */
.why-anylogic {
background: var(--primary-dark);
}
.video-container {
max-width: 1060px;
height:600px;
margin: 0 auto;
}
.video-container .RYPP {
padding-right: 0;
max-width: 1200px;
}
.video-placeholder {
aspect-ratio: 16 / 9;
background: rgba(26, 47, 74, 0.8);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border: 2px solid rgba(0, 180, 216, 0.3);
}
.play-icon {
width: 80px;
height: 80px;
background: rgba(0, 180, 216, 0.8);
border-radius: 50%;
position: relative;
cursor: pointer;
transition: all 0.3s;
}
.play-icon:hover {
background: var(--accent-blue);
transform: scale(1.1);
}
.play-icon::after {
content: '';
position: absolute;
top: 50%;
left: 55%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-left: 20px solid var(--text-white);
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
.feature-block {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.feature-detail-item {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 25px;
justify-content: space-between;
}
.feature-detail-item:last-child {
margin-bottom: 0;
}
.show-all-news-btn {
display: none;
}
.feature-detail-title {
font-size: 24px;
font-weight: 500;
margin-bottom: 12px;
color: var(--text-white);
line-height: 134%;
}
.feature-detail-text {
font-size: 16px;
color: var(--text-white);
margin:0;
line-height: 1.46;
max-width: 594px;
}
.feature-detail-visual {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.feature-detail-visual img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.feature-link {
color: var(--accent-blue);
text-decoration: none;
font-size: 14px;
margin-top: 12px;
display: inline-block;
border-bottom: 1px solid transparent;
line-height: 1.46;
}
.feature-link:hover {
color: var(--light-blue);
border-bottom: 1px solid var(--light-blue);
}
.feature-link:active {
color: var(--active-blue);
border-bottom: 1px solid var(--active-blue);
}
.feature-link:focus {
color: var(--accent-blue);
border-bottom: 1px solid var(--accent-blue);
}
/* Challenges Section */
.challenges {
background: var(--primary-dark);
}
.challenges-content {
display: flex;
gap: 40px;
margin-top: 60px;
}
.challenges-sidebar {
flex: 0 0 392px;
display: flex;
flex-direction: column;
gap: 0;
}
.challenges-sidebar-accordion {
display: flex;
flex-direction: column;
}
.challenges-sidebar-trigger {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.challenges-sidebar-title {
font-size: 24px;
font-weight: 500;
color: var(--text-white);
padding: 32px 24px 0;
margin-bottom: 8px;
}
.challenges-sidebar-icon {
display: none;
margin-top: 0;
}
.challenge-links {
display: flex;
flex-direction: column;
position: relative;
}
.progress-bar {
position: absolute;
height: 1px;
background-color: var(--accent-blue);
z-index: 10;
pointer-events: none;
width: 0%;
display: none;
transition: width 10s linear;
}
.challenge-link {
color: var(--text-white);
text-decoration: none;
font-size: 16px;
padding: 24px;
border-bottom: 1px solid var(--text-white);
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.challenge-link:hover {
color: var(--accent-blue);
border-bottom-color: var(--accent-blue);
}
.challenge-link.active {
color: var(--accent-blue) !important;
}
.challenge-link-first {
display: flex;
align-items: center;
justify-content: space-between;
}
.challenge-link-first .challenges-sidebar-icon {
display: none;
}
.challenges-main {
flex: 1;
}
.challenge-card {
background: #f7f7f7;
border-radius: 8px;
padding: 32px 24px;
display: none;
min-height: 560px;
}
.challenge-card.active {
display: block;
}
.challenge-card-title {
color: #5e5b5c;
}
.challenge-card-description {
color: #5e5b5c;
}
.challenge-card-title {
font-size: 32px;
font-weight: 500;
margin-bottom: 16px;
}
.challenge-card-description {
font-size: 18px;
margin-bottom: 79px;
}
.challenge-cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.challenge-cards-grid-mono {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.challenge-mini-card {
background: transparent;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 8px;
}
.challenge-mini-image {
max-height: 276px;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.challenge-mini-card:hover a .challenge-mini-image > img {
transform: scale(1.2);
cursor: pointer;
}
.challenge-mini-card:hover .challenge-mini-image-logo {
transform: translate(-50%, -50%);
}
.challenge-image-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
pointer-events: none;
display: flex;
}
.challenge-image-logo img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transform: none !important;
}
.challenge-mini-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1s;
border-radius: 8px;
}
.challenge-mini-text {
color: #5e5b5c;
font-size: 16px;
text-decoration: none;
line-height: 1.46;
}
.challenge-mini-text:hover {
color: var(--accent-blue);
}
/* Industry Examples Section */
.industry-examples {
text-align: center;
}
.examples-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 36px 0 64px;
}
.example-card {
border-radius: 8px;
overflow: hidden;
transition: all 0.3s;
text-align: left;
cursor: pointer;
}
.example-card:hover .example-image > img {
transform: scale(1.2);
}
.example-card:hover .example-image-logo {
transform: translate(-50%, -50%);
}
.example-link {
text-decoration: none;
color: var(--text-white);
}
.example-image {
max-height: 294px;
overflow: hidden;
position: relative;
margin-bottom: 12px;
border-radius: 8px;
}
.example-image > img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
transition: transform 1s;
}
.example-image-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
max-width: 222px;
max-height: 120px;
}
.example-image-logo img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transform: none !important;
}
.example-caption {
font-size: 14px;
color: var(--text-white);
margin-bottom: 8px;
line-height: 1.46;
}
.example-title {
font-size: 24px;
font-weight: 500;
margin-bottom: 0;
color: var(--text-white);
line-height: 1.34;
}
/* Latest News Section */
.latest-news {
background: var(--primary-dark);
}
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
margin-top: 60px;
}
.news-grid .news-link {
display: contents;
}
.news-grid .news-card:hover span, .news-grid .news-card:active span{
color: var(--text-white);
text-decoration: underline;
}
.news-card {
border: 1px solid var(--text-white);
padding: 24px;
border-radius: 8px;
transition: all 0.3s;
display: flex;
flex-direction: column;
justify-content: space-between;
max-height: 270px;
position: relative;
cursor: pointer;
}
.news-card-1 {
grid-column-start: 1;
}
.news-card-2 {
grid-column-start: 2;
grid-row-start: 1;
}
.news-card-3 {
grid-column-start: 2;
grid-row-start: 2;
}
.news-card-4 {
grid-row: span 2 / span 2;
grid-column-start: 3;
grid-row-start: 1;
justify-content: flex-end;
max-height: 525px;
}
.news-card-4 .news-icon {
position: absolute;
top: 24px;
}
.news-card:hover {
background-color: var(--accent-blue);
border: 1px solid var(--accent-blue);
}
.news-card:active {
background-color: var(--active-blue);
border: 1px solid var(--accent-blue);
}
.news-card:focus {
background-color: var(--accent-blue);
border: 1px solid var(--accent-blue);
}
.news-icon,.library-icon {
width: 36px;
height: 36px;
margin-bottom: 20px;
}
.news-icon svg,.library-icon svg {
width: 100%;
height: 100%;
}
h3 {
font-size: 24px;
font-weight: 500;
margin-bottom: 20px;
color: var(--text-white);
line-height: 1.34;
}
.get-mhl h3 {
color: #000;
}
.news-link {
color: var(--accent-blue);
text-decoration: none;
font-size: 14px;
/* transition: color 0.3s; */
}
.news-card:hover .news-link {
color: var(--text-white);
}
.news-card:hover .news-link span{
border-bottom: 1px solid var(--text-white);
}
/* Learn Build Section */
.learn-build,.download-build {
height: 875px;
}
.download-build-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 24px;
}
.download-build .download-build-title{
width: 596px;
text-align: center;
font-size: 32px;
font-weight: 500;
margin-bottom: 12px;
color: var(--text-white);
line-height: 1.34;
}
.latest-news .news-title{
font-size: 24px;
font-weight: 500;
margin-bottom: 20px;
color: var(--text-white);
line-height: 1.34;
}
.download-build .download-build-description {
max-width: 596px;
text-align: center;
font-size: 16px;
color: var(--text-white);
line-height: 1.46;
margin:0;
}
.learn-build-content {
display: flex;
gap: 130px;
align-items: center;
justify-content: space-between;
}
.learn-build-left {
max-width: 470px;
padding: 95px 24px 64px 40px;
}
.learn-build-title {
font-size: 32px;
font-weight: 500;
margin-bottom: 12px;
color: var(--text-white);
line-height: 1.34;
text-align: left;
}
.learn-build-description {
font-size: 16px;
color: var(--text-white);
line-height: 1.46;
max-width: 390px;
}
.learn-build-right {
//flex: 1;
}
/* FAQs Section */
.faqs {
background: var(--primary-dark);
}
.faq-list {
max-width: 800px;
margin: 36px auto 0;
}
.faq-item {
border-bottom: 1px solid #FEFEFE;
transition: all 0.3s;
position: relative;
}
.faq-item:last-child {
border-bottom: none;
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
cursor: pointer;
font-size: 24px;
font-weight: 500;
color: var(--text-white);
line-height: 1.34;
margin:26px 0 22px;
}
.faq-icon {
position: absolute;
right: 16px;
top: 14px;
}
.faq-item.active .faq-icon {
top: 7px;
}
.faq-icon, .accordion-icon {
transition: all 0.3s;
}
.active .accordion-icon, .faq-item.active .faq-icon {
rotate: 45deg;
right: 9px;
}
.active .accordion-icon::before,
.active .accordion-icon::after {
height: 30px;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.faq-item.active .faq-answer {
max-height: 500px;
padding-bottom: 32px;
}
.faq-answer p {
color: var(--text-white);
line-height: 1.46;
font-size: 16px;
}
/* More Blogs Section */
.blogs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap:16px;
margin-top: 60px;
}
.more-blogs .section-title {
margin-bottom: 0px;
}
.blog-card {
overflow: hidden;
cursor: pointer;
//max-width: 392px;
}
.blog-card .blog-image img{
transition: 1s;
border-radius: 4px;
}
.blog-card:hover .blog-image img{
transform: scale(1.2);
transition: 1s;
}
.blog-image {
max-height: 294px;
/*height:285px;*/
border-radius: 4px;
overflow: hidden;
position: relative;
margin-bottom: 12px;
overflow: hidden;
}
.blog-image img {
width: 100%;
height: 100%;
}
.blog-title {
font-size: 20px;
font-weight: 500;
margin: 12px 0 0;
color: var(--text-white);
}
.blog-text {
font-size: 16px;
color: var(--text-light);
margin: 0 24px 20px;
line-height: 1.6;
}
.blog-link {
display: inline-block;
margin: 0 24px 24px;
color: var(--accent-blue);
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
.blog-link:hover {
color: var(--light-blue);
}
#iframe-white-paper {
width: 500px;
height: 600px;
border: 0;
border-radius: 8px;
background: var(--text-white);
}
#iframe-download {
width: 1004px;
height: 614px;
padding: 48px 40px;
border: 0;
border-radius: 8px;
background: var(--text-white);
}
.challenge-link-active-wrapper {
position: relative;
display: none;
pointer-events: auto;
}
.nav-menu.sticked {
background: #14212E;
}
.capability {
border: 1px solid var(--accent-blue);
padding: 24px;
border-radius: 24px;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
column-gap: 16px;
margin-bottom: 44px;
}
.capability_center {
align-items: center;
}
.capability h2 {
text-align: left;
color: var(--accent-blue);
max-width: 392px;
}
.capability-left {
min-width: 469px;
}
.capability-right h3 {
margin-bottom: 12px;
}
.capability-right .list-description {
margin-bottom: 36px;
}
.capability-right .list-description_wlink {
margin-bottom: 24px;
}
/* Hide capabilities */
.capability_hide-desktop {
display: none;
}
.key-integration-capabilities.show-all .capability_hide-mobile, .key-integration-capabilities.show-all .capability_hide-desktop {
display: flex;
}
.help-section .list-description {
margin-top: 24px;
}
.help-section .list-description a:first-child {
margin-right: 16px;
}
.container .mhl-cases,
.container .all-libraries {
padding-left: 0;
padding-right: 0;
}
.mhl-cases {
width: 100%;
max-width: none;
margin: 0 auto;
padding: 0 116px 80px;
box-sizing: border-box;
}
.mhl-cases__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
max-width: calc(595px * 2 + 16px);
margin: 0 auto;
}
.mhl-case-card__mobile {
display: none;
}
.mhl-cases__grid.slick-initialized {
display: block;
margin-bottom: 0;
}
.mhl-cases__grid.slick-initialized .slick-list {
padding: 0 0 8px;
}
.mhl-cases__grid.slick-initialized .slick-slide {
margin-right: 8px;
height: auto;
}
.mhl-cases__grid.slick-initialized .slick-slide:last-child {
margin-right: 0;
}
.mhl-cases__grid.slick-initialized .slick-track {
display: flex;
align-items: stretch;
}
.mhl-case-card {
position: relative;
display: block;
height: 220px;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: #f7f7f7;
isolation: isolate;
transition:
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.mhl-case-card:focus-visible {
outline: 2px solid #59c0f4;
outline-offset: 3px;
}
.mhl-case-card__base {
position: absolute;
inset: 0;
z-index: 0;
display: block;
}
.mhl-case-card__media {
position: absolute;
inset: 0;
z-index: 0;
}
.mhl-case-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1);
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.mhl-case-card__shade {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(10, 22, 40, 0) 35%,
rgba(10, 22, 40, 0.55) 100%
);
transition: background 0.35s ease;
}
.mhl-case-card__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
height: 100%;
}
.mhl-case-card__title {
display: block;
font-weight: 500;
font-size: 24px;
line-height: 1.34;
padding: 24px;
letter-spacing: 0;
transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Cases_Hover (404:29077): AnyLogic Blue #0096C8, copy #FEFEFE */
.mhl-case-card__hover {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
padding: 24px;
background: #0096c8;
border-radius: 12px;
color: #fefefe;
opacity: 0;
visibility: hidden;
transition:
opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0.35s step-end;
}
.mhl-case-card__hover-inner {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
flex: 1;
min-height: 0;
width: 100%;
}
.mhl-case-card__hover-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: 100%;
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mhl-case-card__hover-title {
display: block;
font-weight: 500;
font-size: 24px;
line-height: 1.34;
color: #fefefe;
}
.mhl-case-card__hover-desc {
display: block;
font-weight: 400;
font-size: 16px;
line-height: 1.46;
color: #fefefe;
}
.mhl-case-card__cta {
display: inline-block;
align-self: flex-start;
margin-top: auto;
padding-bottom: 0;
font-weight: 400;
font-size: 14px;
line-height: 1.46;
color: #fefefe;
border-bottom: 1px solid #fefefe;
}
/*.mhl-case-card:hover,*/
/*.mhl-case-card:focus-within {*/
/* transform: translateY(-4px);*/
/* box-shadow:*/
/* 0 16px 40px rgba(0, 0, 0, 0.45),*/
/* 0 4px 12px rgba(0, 0, 0, 0.25);*/
/*}*/
.mhl-case-card:hover .mhl-case-card__img,
.mhl-case-card:focus-within .mhl-case-card__img {
transform: scale(1.06);
}
.mhl-case-card:hover .mhl-case-card__shade,
.mhl-case-card:focus-within .mhl-case-card__shade {
background: linear-gradient(
180deg,
rgba(10, 22, 40, 0) 28%,
rgba(10, 22, 40, 0.72) 100%
);
}
.mhl-case-card:hover .mhl-case-card__title,
.mhl-case-card:focus-within .mhl-case-card__title {
opacity: 0;
transform: translateY(4px);
}
.mhl-case-card:hover .mhl-case-card__hover,
.mhl-case-card:focus-within .mhl-case-card__hover {
opacity: 1;
visibility: visible;
transition:
opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s step-start;
}
/* Discover libraries: Figma 381:9750 — mobile: 848:19559 */
.all-libraries {
width: 100%;
margin: 0;
padding-left: 116px;
padding-right: 116px;
color: var(--text-white);
border-radius: 24px 24px 0 0;
box-sizing: border-box;
}
.all-libraries .section-title,
.all-libraries .section-description {
text-align: left;
margin: 0;
max-width: none;
}
.all-libraries .section-description {
margin-bottom: 0;
}
.all-libraries__inner {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 48px;
width: 100%;
max-width: 1208px;
margin: 0 auto;
}
.all-libraries__intro {
position: sticky;
top: 24px;
flex: 0 0 494px;
max-width: 494px;
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 120px;
padding-bottom: 400px;
}
.all-libraries__intro .btn-primary {
margin-top: 24px;
align-self: flex-start;
text-decoration: none;
}
.all-libraries__btn--mobile {
display: none;
margin: 36px auto 0;
text-decoration: none;
}
.all-libraries__grid {
flex: 0 1 596px;
max-width: 596px;
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
.all-libraries__row {
display: grid;
grid-template-columns: repeat(2, 290px);
gap: 16px;
align-items: stretch;
}
.all-libraries__row--solo {
grid-template-columns: 290px;
}
.all-library-card {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
width: 290px;
height: 440px;
min-height: 440px;
max-height: 440px;
padding: 36px 24px;
border-radius: 8px;
background: #14212e;
color: #fefefe;
text-decoration: none;
box-sizing: border-box;
transition:
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.all-library-card--lead {
border-radius: 12px;
}
.all-library-card:hover,
.all-library-card:focus-visible {
/*transform: translateY(-4px);*/
/*box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);*/
background: #0096C8;
color: #FEFEFE;
}
.all-library-card__top {
display: flex;
flex: 1;
flex-direction: column;
gap: 24px;
min-height: 0;
}
.all-library-card__body {
display: block;
}
.all-library-card__icon {
display: block;
width: 80px;
height: 80px;
max-width: none;
flex-shrink: 0;
object-fit: contain;
}
.all-library-card__icon-hover, .other-libraries-dropdown__icon-hover {
display: none;
}
.all-library-card:hover .all-library-card__icon-static, .other-libraries-dropdown__card:hover .other-libraries-dropdown__icon-static {
display: none;
}
.all-library-card:hover .all-library-card__icon-hover, .other-libraries-dropdown__card:hover .other-libraries-dropdown__icon-hover {
display: block;
}
.all-library-card__text {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.all-library-card .example-title {
display: block;
margin: 0;
font-size: 24px;
line-height: 1.34;
}
.all-library-card .example-caption {
display: block;
margin: 0;
font-size: 16px;
line-height: 1.46;
}
.all-library-card__plus {
display: none;
}
.all-library-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
min-width: 130px;
height: 36px;
padding: 0 19.5px;
border: 0.609px solid #fefefe;
border-radius: 39px;
font-weight: 500;
font-size: 14px;
line-height: 1.46;
color: #fefefe;
}
.all-library-card:hover .all-library-card__cta {
background: var(--text-white);
color: var(--accent-blue);
}
/*explore models block*/
.explore-models__inner {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 48px;
width: 100%;
max-width: 1208px;
margin: 0 auto;
}
.explore-models__intro {
flex: 0 0 494px;
max-width: 494px;
display: flex;
flex-direction: column;
gap: 12px;
}
.explore-models__intro .btn-primary {
margin-top: 28px;
}
.explore-models__visual {
flex: 0 1 596px;
max-width: 596px;
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
.explore-models .section-description, .explore-models .section-title {
text-align: left;
margin:0;
max-width: none;
}
.feature-detail-item-hidden {
display: none;
}
.show-all .feature-detail-item-hidden {
display: flex;
}
.btn-primary.transparent {
background: transparent;
border: 1px solid var(--text-white);
color: var(--text-white);
text-align: center;
height: initial;
padding: 16px 24px;
}
.mobile-show {
display: none;
}
.mobile {
display: none;
}
.industry-examples .btn-primary, .industry-examples .btn-transparent{
margin-top: 64px;
}
@media (max-width: 900px) {
.mhl-cases__grid {
grid-template-columns: 1fr;
}
.mhl-case-card {
height: min(220px, 52vw);
min-height: 180px;
}
}
@media (prefers-reduced-motion: reduce) {
.mhl-case-card,
.mhl-case-card__img,
.mhl-case-card__shade,
.mhl-case-card__title,
.mhl-case-card__hover {
transition: none;
}
.mhl-case-card:hover,
.mhl-case-card:focus-within {
transform: none;
}
.mhl-case-card:hover .mhl-case-card__img,
.mhl-case-card:focus-within .mhl-case-card__img {
transform: none;
}
.mhl-case-card:hover .mhl-case-card__title,
.mhl-case-card:focus-within .mhl-case-card__title {
opacity: 0;
transform: none;
}
.mhl-case-card:hover .mhl-case-card__hover,
.mhl-case-card:focus-within .mhl-case-card__hover {
opacity: 1;
visibility: visible;
transition: none;
}
}
@media (max-width: 1440px) {
.container {
padding: 0 32px;
}
.mhl-cases,
.all-libraries {
padding-left: 32px;
padding-right: 32px;
}
.container .mhl-cases,
.container .all-libraries {
padding-left: 0;
padding-right: 0;
}
}
/* Responsive Design */
@media (max-width: 1200px) {
h3 {
font-size: 20px;
margin-bottom: 12px;
}
img {
max-width: 100%;
height: auto;
}
.section-description {
margin: 0 auto 24px;
}
.twin-image {
height: auto;
}
.features-grid {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.feature-card {
padding: 2px 16px;
gap: 0px;
}
.feature-icon {
width: 64px;
height: 64px;
}
.feature-title {
font-size: 14px;
}
.feature-detail-content {
max-width: 342px;
}
.examples-grid {
margin: 24px 0 32px;
}
.examples-grid,
.news-grid,
.blogs-grid {
grid-template-columns: repeat(3, 1fr);
}
.container {
padding: 0 32px;
}
.hero-image {
max-width: 100%;
height: auto;
}
.hero-title {
font-size: 32px;
}
.hero {
padding: 48px 0;
}
.section {
padding: 48px 0;
}
.section-title {
font-size: 24px;
max-width: 522px;
margin-bottom: 12px;
}
.section-subtitle {
font-size: 20px;
}
.section-description {
font-size: 16px;
}
.nav-menu-items {
gap: 16px;
}
.nav-menu-item {
padding: 10px 0 12px;
}
.challenges-sidebar-title {
font-size: 20px;
padding: 17px 16px 0;
}
.challenges-sidebar {
flex: 0 0 252px;
}
.challenge-link {
font-size: 14px;
padding: 12px 16px;
max-width: 220px;
}
.challenges-content {
gap: 20px;
}
.challenge-card-description {
margin-bottom: 56px;
}
.challenge-card-title {
font-size: 20px;
}
.challenge-card-description {
font-size: 14px;
}
.challenge-mini-text {
font-size: 14px;
}
.example-title {
font-size: 20px;
font-weight: 500;
}
.learn-build {
background-size: cover;
}
.learn-build-left {
padding: 80px 0px 32px 0;
max-width: 342px;
}
.faq-question {
font-size: 20px;
margin: 18px 0 14px;
}
.blogs-grid {
margin-top: 34px;
}
.blog-title {
margin: 0;
}
.news-grid {
grid-template-rows: 0.7fr 1.3fr;
}
.news-card {
max-height: initial;
}
.news-card-1 {
grid-column-start: 1;
}
.news-card-2 {
grid-column-start: 2;
grid-row-start: 1;
}
.news-card-3 {
grid-column-start: 1;
grid-row-start: 2;
height: 280px;
}
.news-card-4 {
grid-row: 2;
grid-column-start: 2;
grid-row-start: 2;
justify-content: flex-end;
max-height: 280px;
grid-column: span 2 / span 2;
grid-row-start: 2;
}
.news-card-5 {
grid-row: auto;
}
.learn-build-content {
gap: 40px;
}
.info-with-illustration__layout {
flex-wrap: wrap;
gap: 24px;
}
.info-with-illustration__item {
padding: 24px 0;
width: 48%;
}
.info-with-illustration__list {
display: flex;
flex-wrap: wrap;
gap: 24px;
list-style: none;
padding: 0;
margin: 0;
justify-content: space-between;
}
.info-with-illustration__content {
width: initial;
}
.all-libraries__inner {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.all-libraries__intro {
position: static;
padding: 0;
max-width: 800px;
}
.all-libraries__intro .btn-primary {
align-self: center;
}
.all-library-card__icon {
max-width: none;
height: 80px;
}
.challenge-card {
min-height: 460px;
}
}
@media (max-width: 1100px) {
.all-libraries.section {
padding-top: 120px;
padding-bottom: 120px;
}
.all-libraries__inner {
flex-direction: column;
align-items: stretch;
gap: 36px;
}
.all-libraries__intro {
position: static;
flex: none;
max-width: none;
width: 100%;
padding-top: 0;
padding-bottom: 0;
}
.all-libraries__grid {
flex: none;
max-width: 596px;
width: 100%;
margin: 0 auto;
}
.all-libraries__row--offset {
padding-top: 0;
}
}
@media (max-width: 1024px) {
.library-start__head {
flex-direction: column;
align-items: stretch;
}
.library-start__back {
position: static;
align-self: flex-start;
padding: 0;
margin-bottom: 24px;
}
.library-start__intro {
max-width: none;
}
.hero-left {
width: 50%;
}
.hero-content {
margin-top: 48px;
}
.developer-resources .news-grid{
grid-template-rows: repeat(3, 1fr);
}
.download-build {
display: none;
}
.section-left .inner-section .block-left .section-title {
text-align: center;
}
.section-left .inner-section .block {
width: 100%;
}
.section-description:first-child {
margin-bottom: 0;
}
.section-left .inner-section {
flex-wrap: wrap;
}
.sticked .nav-menu-list .btn-primary.btn-large {
display: none;
height: 32px;
}
.tablet-hide {
display: none;
}
.tablet-show {
display: inline-block;
}
.sticked .nav-menu-list .btn-primary.btn-large.tablet-show {
display: inline-flex;
}
}
@media (max-width: 920px) {
.hero-content {
flex-wrap: wrap;
gap: 48px;
}
.challenge-mini-image {
max-height: 176px;
}
.hero-left {
text-align: center;
width: 100%;
}
.hero-title {
text-align: center;
margin-bottom: 12px;
width: initial;
}
.hero-description {
text-align: center;
max-width: 100%;
margin-bottom: 48px;
}
.hero-right {
margin: 0 auto;
}
}
@media (max-width: 768px) {
.library-start {
padding: 128px 0;
}
.library-start .container {
gap: 32px;
}
.library-start__intro {
gap: 24px;
}
.library-start__title {
font-size: 32px;
}
.library-start__visual {
border-radius: 12px;
}
/* На мобильном — тонкая стрелка без тёмного кружка */
.library-start__back {
gap: 8px;
font-size: 14px;
margin-bottom: 16px;
}
.library-start__back-icon {
width: auto;
height: auto;
border-radius: 0;
background: transparent;
}
.library-start__back:hover .library-start__back-icon {
background: transparent;
}
.library-start__back-icon svg {
width: 18px;
height: 12px;
}
.section-left p {
text-align: center;
}
.hero-left .btn-primary.btn-large {
width: 212px;
}
.learn-build-content {
gap: 20px;
}
#iframe-white-paper {
width: 342px;
height: 600px;
}
.nav-menu-list .dekstop-hide {
display: block;
}
.section-left .inner-section {
flex-wrap: wrap;
gap: 24px;
}
.section-left .inner-section .block {
width: 100%;
}
.double-image {
flex-wrap: wrap;
}
.info-with-illustration__item {
width: 100%;
padding: 0 24px;
}
.info-with-illustration__item:first-child {
padding-top: 12px;
}
.capability {
flex-wrap: wrap;
}
.capability h2 {
max-width: 100%;
margin-bottom: 16px;
}
.capability-left {
min-width: initial;
width: 100%;
display: flex;
align-items: center;
}
.capability-right {
width: 100%;
}
.capability_hide-mobile {
display: inline-flex;
}
.challenge-card {
min-height: initial;
}
}
.video-container .RYPP-playlist {
display: none;
}
.RYPP {
background: transparent;
}
@media (min-width: 2100px) {
.hero-content{
justify-content: space-between;
}
.feature-detail-item {
justify-content: space-between;
}
.learn-build-left {
padding: 195px 24px 64px 40px;
}
}
@media (max-width: 600px) {
.ftr-hero .hero-content {
margin-top: 88px;
}
a.library-start__back {
position: static;
}
.with-event .library-start {
padding: 160px 0 48px 0;
}
.library-start {
padding: 90px 0 48px 0;
}
.library-start .container {
gap: 24px;
}
.library-start__title {
font-size: 28px;
}
.library-start__buttons {
flex-direction: column;
width: 100%;
align-items: center;
}
.library-start__buttons .btn-primary {
width: 280px;
padding: 14px 32px 13px;
}
/* По мобильному макету — одна (основная) кнопка */
.library-start__buttons .btn-transparent {
display: none;
}
.features-grid .section-description {
font-size: 20px;
}
.download-build .download-build-title {
width: inherit;
}
#iframe-download {
padding: 0px;
width: 100%;
}
.mobile-hide {
display: none !important;
}
.mobile-show {
display: inline-flex;
}
.video-container {
height:initial;
}
.block-play_video-icon {
margin-top: -18px;
}
.icon_play-white {
background: url(/local/templates/anylogic/css/../i/icons.png) no-repeat -431px -1217px;
width: 64px;
height: 37px;
}
.challenge-mini-image {
max-height: 176px;
min-height: 176px;
}
.example-image {
max-height: 213px;
min-height: 213px;
}
.with-event .hero {
margin-top: 100px;
}
.hero {
margin-top: 20px;
}
.ftr-hero {
padding-top: 0px;
}
.learn-build-left {
padding-top: 0;
}
.with-event .nav-menu {
top: 0px;
padding-top: 9px;
}
.sticked .nav-menu-list .btn-primary.btn-large,.sticked .nav-menu-list .btn-primary.btn-large.mobile {
display: inline-flex;
height: initial;
font-size: 14px;
padding: 8px 32px;
min-width: inherit;
margin-left: 15px;
}
.all-libraries .section-title,
.all-libraries .section-description {
text-align: center;
}
.btn-primary.btn-mob_transparent {
width: 280px;
display: block;
border: 1px solid var(--text-white);
background: none;
color: var(--text-white);
text-align: center;
padding: 16px 24px;
margin: 24px auto 0;
}
.btn-primary.btn-mob_transparent:hover {
background: none;
border: 1px solid var(--accent-blue);
color: var(--accent-blue);
}
.btn-primary.btn-mob_transparent:active {
background: none;
border: 1px solid var(--active-blue);
color: var(--active-blue);
}
.btn-primary.btn-mob_transparent:focus {
background: none;
border: 1px solid var(--accent-blue);
color: var(--accent-blue);
}
.mobile {
display: inline-flex;
}
.desktop {
display: none;
}
.twin-image.digital.mobile::before{
content: none;
}
.twin-image.digital.mobile {
border-radius: 0px;
text-align: center;
}
.twin-image.digital.mobile .physical-img {
margin-bottom: 24px;
}
.container {
padding: 0 16px;
}
.mhl-cases {
padding: 0 16px 48px;
}
.container .mhl-cases {
padding-left: 0;
padding-right: 0;
}
.mhl-cases__grid:not(.slick-initialized) {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.mhl-cases__grid:not(.slick-initialized) .mhl-case-card {
width: 100%;
max-width: 280px;
}
.mhl-case-card {
height: auto;
min-height: 0;
border-radius: 8px;
background: #14212e;
}
.mhl-case-card:hover,
.mhl-case-card:focus-within {
transform: none;
box-shadow: none;
}
.mhl-case-card:hover .mhl-case-card__img,
.mhl-case-card:focus-within .mhl-case-card__img {
transform: none;
}
.mhl-case-card__base,
.mhl-case-card__hover {
display: none !important;
}
.mhl-case-card__mobile {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
width: 100%;
min-height: 0;
}
.mhl-case-card__mobile-visual {
position: relative;
width: 100%;
aspect-ratio: 280 / 210;
flex-shrink: 0;
overflow: hidden;
border-radius: 8px 8px 0 0;
}
.mhl-case-card__mobile-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
display: block;
}
.mhl-case-card__mobile-shade {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(10, 22, 40, 0.15) 0%,
rgba(10, 22, 40, 0.55) 100%
);
}
.mhl-case-card__mobile-logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 180px;
max-width: 64%;
height: auto;
max-height: 97px;
object-fit: contain;
pointer-events: none;
}
.mhl-case-card__mobile-body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 0 24px 34px;
width: 100%;
}
.mhl-case-card__mobile-title {
font-weight: 500;
font-size: 20px;
line-height: 1.4;
color: var(--text-white);
}
.mhl-case-card__mobile-title--sm {
font-size: 16px;
line-height: 1.46;
}
.mhl-case-card__mobile-desc {
font-weight: 400;
font-size: 14px;
line-height: 1.42;
color: var(--text-white);
}
.mhl-case-card__mobile-desc--pre {
white-space: pre-wrap;
}
.mhl-case-card__mobile-cta {
display: inline-block;
margin-top: 4px;
font-weight: 400;
font-size: 14px;
line-height: 1.46;
color: var(--text-white);
border-bottom: 1px solid var(--text-white);
text-decoration: none;
}
.mhl-cases__grid.slick-initialized .slick-slide > .mhl-case-card {
width: 280px;
display: block;
}
.all-libraries.section {
padding-top: 48px;
padding-bottom: 48px;
}
.all-libraries {
padding-left: 0;
padding-right: 0;
border-radius: 0;
}
.container .all-libraries {
padding-left: 0;
padding-right: 0;
}
.all-libraries__inner {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0;
}
.all-libraries__intro {
position: static;
flex: none;
max-width: none;
width: 100%;
padding-top: 0;
padding-bottom: 0;
gap: 12px;
}
.more-blogs .section-title {
margin-bottom: 36px;
}
.all-libraries__intro .btn-primary {
margin-top: 0;
}
.all-libraries__btn--mobile {
display: inline-flex;
}
.all-libraries__grid {
display: flex;
flex-direction: column;
gap: 8px;
flex: none;
max-width: none;
width: 100%;
margin-top: 36px;
}
.all-libraries__row,
.all-libraries__row--offset,
.all-libraries__row--solo {
display: contents;
}
.all-library-card,
.all-library-card--lead {
width: 100%;
height: auto;
min-height: 0;
max-height: none;
padding: 24px;
border-radius: 8px;
gap: 0;
justify-content: flex-start;
}
.all-library-card:hover,
.all-library-card:focus-visible {
transform: none;
box-shadow: none;
}
.all-library-card__top {
flex: none;
flex-direction: column;
gap: 12px;
}
.all-library-card__body {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
width: 100%;
}
.all-library-card__icon {
width: 80px;
height: 80px;
max-width: none;
}
.all-library-card__text {
flex: 1;
min-width: 0;
gap: 4px;
}
.all-library-card .example-title {
font-size: 20px;
line-height: 1.4;
}
.all-library-card .example-caption {
font-size: 14px;
line-height: 1.42;
}
.all-library-card__plus {
display: block;
position: relative;
flex-shrink: 0;
width: 29px;
height: 29px;
margin: 0 0 2px;
}
.all-library-card__plus.accordion-icon::before,
.all-library-card__plus.accordion-icon::after {
left: 50%;
top: 50%;
height: 24px;
width: 2px;
margin-left: -1px;
margin-top: -12px;
background-color: var(--text-white);
}
.all-library-card__plus.accordion-icon::before {
transform: rotate(0deg);
}
.all-library-card__plus.accordion-icon::after {
transform: rotate(-90deg);
}
.all-library-card:hover .all-library-card__plus.accordion-icon::before,
.all-library-card:hover .all-library-card__plus.accordion-icon::after,
.all-library-card:focus-visible .all-library-card__plus.accordion-icon::before,
.all-library-card:focus-visible .all-library-card__plus.accordion-icon::after {
background-color: var(--light-blue);
}
.all-library-card__cta {
display: none;
}
.faq-question span {
display: inline-block;
padding-right: 40px;
}
.section-title, .capability-title {
font-size: 24px;
}
.news-grid {
grid-template-rows: 1fr;
grid-template-columns: 1fr;
}
.news-card {
max-height: initial;
/*width: 100%;*/
height: 180px;
justify-content: center;
}
.news-card-1 {
grid-row-start: 1;
grid-column:1;
}
.news-card-2 {
grid-row-start: 2;
grid-column:1;
}
.news-card-3 {
grid-row-start: 3;
grid-column:1;
}
.news-card-4 {
grid-row-start: 4;
grid-column:1;
}
.news-card-5 {
grid-row-start: 5;
grid-column:1;
}
.challenges-content {
flex-direction: column;
padding-bottom: 48px;
}
.learn-build-content {
flex-direction: column;
}
.features-grid {
grid-template-columns: repeat(1, 1fr);
}
.feature-title {
max-width: 300px;
font-size: 20px;
}
.feature-icon {
width: 80px;
height: 80px;
}
.feature-detail-item {
flex-wrap: wrap;
border: 1px solid var(--accent-blue);
border-radius: 8px;
padding: 24px;
gap:16px;
}
.feature-detail-item.reverse {flex-direction: column-reverse;}
.feature-details.show-all .feature-detail-item-hidden {
display: flex;
}
/* Show all button */
.show-all-features-btn {
display: inline-flex;
padding: 16px 24px;
background: transparent;
cursor: pointer;
transition: all 0.3s;
height: inherit;
}
.learn-build {
height: auto;
background: none;
padding-bottom: 0;
}
.feature-details.show-all .show-all-features-btn {
display: none;
}
/* Hide news-card after third on mobile */
.news-card-hidden {
display: none;
}
.latest-news.show-all .news-card-hidden {
display: flex;
}
/* Show all news button */
.show-all-news-btn {
margin: 24px auto 0;
height: 46px;
min-width: 230px;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s;
background: transparent;
border: 1px solid var(--text-white);
color: var(--text-white);
}
.latest-news.show-all .show-all-news-btn {
display: none;
}
/* Mobile: hide capability_hide-mobile by default, hide capability_hide-desktop */
.capability_hide-desktop {
display: none;
}
.capability_hide-mobile {
display: none;
}
/* On mobile with show-all class */
.key-integration-capabilities.show-all .capability_hide-desktop {
display: flex;
}
.key-integration-capabilities.show-all .capability_hide-mobile {
display: flex;
}
/* Nav Menu Accordion for Mobile */
.nav-menu-items {
flex-direction: column;
gap: 0;
align-items: stretch;
overflow-x: hidden;
max-height: 700px;
}
.nav-menu-accordion {
width: 100%;
flex-direction: column;
gap: 0;
align-items: stretch;
}
.nav-menu-trigger {
display: flex;
height: 50px;
padding: 0 16px;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid transparent;
cursor: pointer;
}
.nav-menu-trigger:hover .accordion-icon::before,
.nav-menu-trigger:hover .accordion-icon::after {
background-color: var(--text-white);
}
.nav-menu-accordion.active .accordion-icon::before,
.nav-menu-accordion.active .accordion-icon::after {
background-color: var(--accent-blue);
}
.nav-menu-item-first {
display: block;
padding: 0;
font-size: 20px;
font-weight: 500;
color: var(--accent-blue);
border-bottom: none;
margin-bottom: 0;
pointer-events: auto;
}
.nav-menu {
width: 100vw;
padding: 10px 0;
}
.nav-menu-icon {
display: block;
position: relative;
}
.nav-menu-list {
display: none;
flex-direction: column;
width: 100%;
}
.nav-menu-accordion.active .nav-menu-list {
display: flex;
align-items: flex-start;
padding-bottom: 48px;
}
.nav-menu-list .nav-menu-item {
margin: 0 16px;
display: flex;
align-items: center;
font-size: 20px;
font-weight: 500;
color: var(--text-white);
border-bottom: none;
margin-bottom: 0;
padding: 0;
}
.nav-menu-list {
gap:34px;
}
.nav-menu-list .nav-menu-item.active {
color: var(--accent-blue);
border-bottom: 1px solid var(--accent-blue);
}
.active .nav-menu-item.nav-menu-item-first {
visibility: hidden;
}
/* Other Libraries — mobile accordion (Figma 839:13934) */
.other-libraries-dropdown {
display: none !important;
}
.nav-menu-other-libraries {
width: 100%;
margin: 0 16px;
}
.nav-menu-other-libraries__trigger {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0;
margin: 0;
border: none;
font-size: 20px;
font-weight: 500;
line-height: 1.4;
color: var(--text-white);
}
.nav-menu-other-libraries__trigger:hover,
.nav-menu-other-libraries__trigger:active {
color: var(--text-white);
}
.nav-menu-other-libraries.is-open .nav-menu-other-libraries__trigger {
color: var(--text-white);
}
.nav-menu-other-libraries__sublist {
display: none;
flex-direction: column;
/*gap: 34px;*/
padding: 34px 0 0 32px;
}
.nav-menu-other-libraries.is-open .nav-menu-other-libraries__sublist {
display: flex;
}
.nav-menu-other-libraries__link {
display: flex;
align-items: center;
min-height: 62px;
padding: 0 16px;
font-size: 16px;
font-weight: 500;
line-height: 1.46;
color: var(--text-white);
text-decoration: none;
}
.nav-menu-other-libraries__link:hover {
color: var(--light-blue);
}
/* Challenges Sidebar Accordion for Mobile */
.challenges-sidebar {
flex: 0 0 auto;
width: 100%;
}
.challenges-sidebar-trigger {
display: flex;
height: 62px;
padding: 0 16px;
justify-content: space-between;
align-items: center;
/* border-bottom: 1px solid var(--text-white); */
cursor: default;
pointer-events: none;
}
.challenges-sidebar-title {
padding: 0;
margin-bottom: 0;
font-size: 20px;
font-weight: 500;
cursor: default;
pointer-events: none;
}
.challenges-sidebar-trigger .challenges-sidebar-icon {
display: none;
}
.challenges-sidebar-icon {
display: none;
margin-top: 0;
position: relative;
}
/* Show icon only in active challenge-link on mobile */
.challenge-link .challenges-sidebar-icon {
display: none;
}
.challenge-link.active .challenges-sidebar-icon {
display: block;
flex-shrink: 0;
}
/* When accordion is active, rotate icon in active link */
.challenges-sidebar-accordion.active .challenge-link.active .challenges-sidebar-icon {
transform: rotate(45deg);
}
.challenges-sidebar-accordion.active .challenge-link.active .challenges-sidebar-icon::before,
.challenges-sidebar-accordion.active .challenge-link.active .challenges-sidebar-icon::after {
height: 30px;
background-color: var(--accent-blue);
}
.challenge-link-active-wrapper {
display: block;
}
.help-section .list-description a:first-child {
margin-right: 8px;
}
.btn-transparent, .btn-primary, .btn-primary.transparent, .btn-primary.btn-large, .btn-transparent.btn-large {
min-width: 280px;
padding: 14px 24px 13px;
height: inherit;
line-height: normal;
}
.challenge-link-active {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 16px;
font-size: 16px;
color: var(--accent-blue) !important;
border-bottom: 1px solid var(--accent-blue);
text-decoration: none;
cursor: pointer;
pointer-events: auto;
}
.challenge-link-active .challenges-sidebar-icon {
display: block;
flex-shrink: 0;
}
.challenges-sidebar-accordion.active .challenge-link-active .challenges-sidebar-icon {
transform: rotate(0deg);
left: 2px;
bottom: 2px;
}
.challenges-sidebar-accordion.active .challenge-link-active .challenges-sidebar-icon::before,
.challenges-sidebar-accordion.active .challenge-link-active .challenges-sidebar-icon::after {
height: 30px;
background-color: var(--accent-blue);
}
.challenge-links {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.challenges-sidebar-accordion.active .challenge-links {
max-height: 1000px;
}
.challenge-link {
padding: 20px 16px;
font-size: 16px;
max-width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.challenge-cards-grid {
margin-left: -20px;
}
.challenge-link.active {
color: var(--accent-blue) !important;
}
/* Hide active challenge link from accordion list */
.challenge-links .challenge-link.active {
display: none;
}
/* Hide dots */
.blogs-grid .slick-dots,
.examples-grid .slick-dots,
.challenge-cards-grid .slick-dots {
display: none !important;
}
/* Center mode styling */
.blogs-grid .slick-slide,
.examples-grid .slick-slide,
.challenge-cards-grid .slick-slide {
padding: 0 8px 0 0;
}
.blogs-grid .slick-slide > div,
.examples-grid .slick-slide > div,
.challenge-cards-grid .slick-slide > div {
margin: 0;
}
/* Ensure grid items are full width in slider */
.blogs-grid.slick-slider .blog-card,
.examples-grid.slick-slider .example-card,
.challenge-cards-grid.slick-slider .challenge-mini-card {
width: 100%;
max-width: 100%;
}
/* Override grid display when slick is initialized */
.blogs-grid.slick-initialized,
.examples-grid.slick-initialized,
.challenge-cards-grid.slick-initialized {
display: block;
}
.blogs-grid.slick-initialized .blog-card,
.examples-grid.slick-initialized .example-card,
.challenge-cards-grid.slick-initialized .challenge-mini-card {
display: block;
}
.nav-menu-icon.accordion-icon {
bottom: 3px;
}
.news-icon, .news-card-4 .news-icon,.library-icon {
position: absolute;
bottom: 4px;
right: 24px;
top:inherit;
}
.library-icon {
position: static;
margin: 0;
}
.news-card span {
position: absolute;
bottom: 24px;
}
.explore-models__intro {
flex: none;
max-width: none;
width: 100%;
padding-top: 0;
padding-bottom: 0;
gap: 12px;
}
.explore-models .section-title, .explore-models .section-description {
text-align: center;
width: 100%;
}
.explore-models__inner {
flex-wrap: wrap;
gap:12px;
}
.explore-models__visual {
gap:36px;
}
.explore-models__visual .section-description{
margin-bottom: 0;
}
.industry-examples .btn-primary, .industry-examples .btn-transparent{
margin-top: 36px;
}
}
@media (prefers-reduced-motion: reduce) {
.all-library-card {
transition: none;
}
.all-library-card:hover,
.all-library-card:focus-visible {
transform: none;
box-shadow: none;
}
}
/* ==================================================================
* Downloads page (/downloads/) — light theme
* ================================================================== */
body:has(.dl-page) {
background: #FEFEFE;
color: #1A1A1A;
}
.dl-page {
/* space taken by the fixed site chrome (.event-header + .header.flying);
recalculated on scroll in main.js */
background: #FEFEFE;
color: var(--dl-text);
font-family: 'Rubik', "Rubik-fallback", Arial, sans-serif;
padding-top: 55px;
}
.with-event .dl-page {
padding-top: 105px;
}
.dl-page .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* the shared new-styles.css centers h2/h3 globally — the downloads page
aligns its own headings explicitly instead */
.dl-page h2,
.dl-page h3,
.dl-page p,
.dl-page ul {
text-align: inherit;
}
.dl-page p {
margin: 0;
}
.dl-page .dl-section-title,
.dl-page .section-title {
text-align: center;
}
.dl-anchor {
position: relative;
bottom: 40px;
}
/* --- buttons --- */
.dl-btn {
width: fit-content;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: 36px;
padding: 0 32px;
border-radius: 40px;
border: 1px solid transparent;
font-family: inherit;
font-size: 14px;
font-weight: 500;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: background .25s, color .25s, border-color .25s;
}
.dl-btn_lg {
height: 55px;
min-width: 200px;
border-radius: 64px;
font-size: 16px;
}
.dl-btn {
background: var(--dl-blue);
border-color: var(--dl-blue);
color: var(--dl-white);
}
.dl-btn:hover {
background: var(--dl-blue-hover);
border-color: var(--dl-blue-hover);
color: var(--dl-white)
}
/* :focus-visible, not :focus — otherwise the button keeps the pressed look
after a mouse click until something else is clicked */
.dl-btn:active {
background: var(--dl-blue-active);
border-color: var(--dl-blue-active);
color: var(--dl-white);
}
.dl-btn_outline {
background: transparent;
border-color: var(--dl-blue);
color: var(--dl-blue);
}
.dl-btn_outline:focus-visible {
background: var(--dl-blue);
color: var(--dl-white);
}
.dl-btn:focus {
outline: none;
}
.dl-btn:focus-visible {
outline: 2px solid var(--dl-blue);
outline-offset: 2px;
}
/* --- hero --- */
.dl-hero {
padding: 80px 0;
background: #FEFEFE;
}
.dl-hero__inner {
position: relative;
}
.dl-hero__aside {
position: absolute;
top: 0;
left: 116px;
width: 265px;
}
.dl-back {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 0;
color: var(--dl-text);
font-size: 16px;
font-weight: 500;
line-height: 1.46;
text-decoration: none;
}
.dl-back__icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 100px;
background: var(--dl-blue);
color: var(--dl-white);
transition: background .25s,transform .25s
}
.dl-back:hover .dl-back__icon {
background: var(--light-blue)
}
.dl-back:active .dl-back__icon {
background: var(--dl-blue-active)
}
.dl-back:hover .dl-back__text, .dl-back:active .dl-back__text,dl-back__text:hover{
color: var(--dl-text);
}
.dl-back__text {
color: var(--dl-text) !important;
}
/* the block is 648px wide in the layout, but the links row is intentionally
wider (658px), so the width is not clamped — all content is centred */
.dl-hero__main {
text-align: center;
}
.dl-hero__title {
font-size: 44px;
font-weight: 500;
line-height: 1.24;
text-transform: capitalize;
margin-bottom: 12px;
}
.dl-hero__version,
.dl-hero__released {
font-size: 16px;
line-height: 1.46;
}
.dl-hero__released {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 12px;
}
.dl-hero__links {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 12px;
}
.dl-hero__links a {
white-space: nowrap;
}
/* "See more" collapses the links row on mobile only */
.dl-hero__more {
display: none;
align-items: center;
justify-content: center;
gap: 4px;
margin: 8px auto 0;
padding: 10px 32px;
border: 0;
background: none;
color: var(--dl-blue);
font-family: inherit;
font-size: 14px;
line-height: 1.46;
cursor: pointer;
}
.dl-hero__more-icon {
display: block;
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform .25s;
}
.dl-hero__more[aria-expanded="true"] .dl-hero__more-icon {
transform: rotate(180deg);
}
.dl-hero__links a {
color: var(--dl-blue);
font-size: 14px;
line-height: 1.46;
text-decoration: none;
}
.dl-hero__links a:hover {
text-decoration: underline;
}
.dl-hero__links-sep {
display: block;
width: 1px;
height: 16px;
background: var(--dl-divider);
}
.dl-hero__available {
margin-top: 36px;
}
.dl-hero__available-title {
font-size: 24px;
font-weight: 500;
line-height: 1.34;
}
.dl-platforms {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 36px;
margin-top: 12px;
}
.dl-platforms picture {
display: block;
flex-shrink: 0;
}
.dl-platforms img {
display: block;
height: 40px;
width: auto;
}
/* --- tooltip --- */
.dl-tip {
position: relative;
display: inline-flex;
}
.dl-tip__icon {
display: block;
width: 16px;
height: 16px;
cursor: help;
}
.dl-tip__icon img {
display: block;
width: 100%;
height: 100%;
}
.dl-tip__body {
position: absolute;
left: 50%;
bottom: calc(100% + 4px);
z-index: 5;
width: 320px;
transform: translateX(-50%);
padding: 16px;
border-radius: 12px;
background: #FEFEFE;
box-shadow: 0 8px 24px rgba(26, 26, 26, .16);
color: var(--dl-text);
font-size: 14px;
line-height: 1.46;
text-align: left;
opacity: 0;
visibility: hidden;
transition: opacity .2s, visibility .2s;
}
.dl-tip__body a {
color: var(--dl-blue);
}
.dl-tip:hover .dl-tip__body,
.dl-tip__icon:focus + .dl-tip__body {
opacity: 1;
visibility: visible;
}
/* --- editions --- */
.dl-editions {
background: #FEFEFE;
}
/* tab switcher — mobile only */
.dl-editions__tabs {
display: none;
align-items: stretch;
justify-content: space-between;
/*position: sticky;*/
top: var(--dl-sticky-top, 0px);
z-index: 3;
background: #FEFEFE;
}
.dl-editions__tab {
display: flex;
align-items: center;
justify-content: center;
height: 68px;
padding: 10px 12px;
margin: 0 12px;
border: 0;
border-bottom: 2px solid transparent;
background: none;
color: var(--dl-text);
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1.42;
white-space: nowrap;
cursor: pointer;
}
.dl-editions__tab.is-active {
border-bottom-color: var(--dl-blue);
color: var(--dl-blue);
}
.dl-edition__mobile-note {
display: none;
font-size: 14px;
font-weight: 500;
line-height: 1.42;
}
.dl-editions__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: stretch;
}
.dl-edition {
display: flex;
flex-direction: column;
gap: 24px;
box-sizing: border-box;
padding: 36px 24px;
border-radius: 12px;
background: var(--dl-soft);
}
.dl-edition__head {
display: flex;
flex-direction: column;
gap: 12px;
}
.dl-edition__icon {
display: block;
width: 60px;
height: 60px;
}
.dl-edition__titles {
display: flex;
flex-direction: column;
gap: 8px;
}
.dl-edition__title {
font-size: 24px;
font-weight: 500;
line-height: 1.34;
}
.dl-edition__subtitle {
font-size: 14px;
line-height: 1.46;
}
.dl-edition__action {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.dl-edition__hint {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
line-height: 1.46;
}
.dl-edition__notice {
font-size: 14px;
line-height: 1.46;
}
.dl-bullet {
display: block;
flex-shrink: 0;
width: 20px;
height: 20px;
}
/* --- comparison table --- */
.dl-compare {
padding: 80px 0;
background: #FEFEFE;
}
.dl-compare__head,
.dl-compare__row {
display: grid;
grid-template-columns: 392px repeat(3, minmax(0, 1fr));
column-gap: 16px;
}
/* the column header sticks to the top of the viewport for as long as the table
is on screen; it keeps its place in the flow (above the first row) so that
showing it never hides a row */
.dl-compare__head {
position: sticky;
top: var(--dl-sticky-top, 0px);
z-index: 4;
align-items: stretch;
padding: 24px 0;
background: #FEFEFE;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .2s ease;
}
.dl-compare__table.is-stuck .dl-compare__head {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.dl-compare__pill {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-sizing: border-box;
min-height: 60px;
padding: 12px;
border: 0;
border-radius: 12px;
background: var(--dl-soft);
font-size: 16px;
font-weight: 500;
line-height: 1.46;
}
.dl-compare__pill img {
display: block;
width: 24px;
height: 24px;
flex-shrink: 0;
}
.dl-compare__group_extra {
display: none;
}
.dl-compare__table.is-expanded .dl-compare__group_extra {
display: block;
}
.dl-compare__group + .dl-compare__group {
margin-top: 24px;
}
.dl-compare__group-title {
display: flex;
align-items: center;
box-sizing: border-box;
min-height: 60px;
padding: 8px 24px;
font-size: 24px;
font-weight: 500;
line-height: 1.34;
}
.dl-compare__cell {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 60px;
padding: 8px 24px;
border-bottom: 1px solid var(--dl-divider);
font-size: 16px;
line-height: 1.46;
text-align: center;
}
.dl-compare__cell.dl-compare__pill {
border-bottom: 0;
}
.dl-compare__cell_label {
justify-content: flex-start;
text-align: left;
border-bottom: 0;
}
.dl-compare__cell_span {
grid-column: 2 / -1;
color: var(--dl-text);
}
.dl-compare__value {
color: var(--dl-text);
}
.dl-mark {
display: block;
width: 36px;
height: 36px;
flex-shrink: 0;
}
.dl-mark_yes {
color: var(--dl-blue);
}
.dl-mark_no {
color: var(--dl-divider);
}
/* shorter wording swapped in on narrow screens */
.dl-short {
display: none;
}
.dl-compare__more {
display: flex;
justify-content: center;
padding: 36px 0 0;
}
.dl-compare__toggle-less,
.dl-compare__toggle[aria-expanded="true"] .dl-compare__toggle-more {
display: none;
}
.dl-compare__toggle[aria-expanded="true"] .dl-compare__toggle-less {
display: inline;
}
/* --- system requirements --- */
.dl-requirements {
padding: 80px 0;
background: #FEFEFE;
}
.dl-section-title {
margin-bottom: 36px;
font-size: 32px;
font-weight: 500;
line-height: 1.34;
text-align: center;
}
.dl-req-card {
display: flex;
gap: 16px;
box-sizing: border-box;
padding: 36px 24px;
border: 1px solid var(--dl-blue);
border-radius: 24px;
}
.dl-req-card + .dl-req-card {
margin-top: 24px;
}
.dl-req-card__title {
flex: 0 0 469px;
max-width: 469px;
color: var(--dl-blue);
font-size: 32px;
font-weight: 500;
line-height: 1.34;
}
.dl-req-card__body {
flex: 0 1 675px;
max-width: 675px;
font-size: 16px;
line-height: 1.46;
}
.dl-req-card__body p + p,
.dl-req-card__body ul + p {
margin-top: 12px;
}
.dl-req-card__body ul {
margin: 4px 0 0;
padding-left: 20px;
list-style: disc;
}
.dl-req-card__body li {
margin-bottom: 2px;
list-style-type: disc;
}
/* --- FAQ (light) --- */
.dl-faqs {
background: #FEFEFE;
}
.dl-faqs .section-title {
max-width: 800px;
color: var(--dl-text);
font-size: 32px;
line-height: 1.34;
}
.dl-faqs .faq-item {
border-bottom: 1px solid var(--dl-divider);
}
.dl-faqs .faq-item:last-child {
border-bottom: 0;
}
.dl-faqs .faq-question {
color: var(--dl-text);
}
/* keep the question text clear of the absolutely positioned +/x icon
(the layout gives the text 764px of the 800px row) */
.dl-faqs .faq-question > span {
display: block;
padding-right: 36px;
}
.dl-faqs .faq-answer p {
color: var(--dl-text);
}
.dl-faqs .faq-answer p + p {
margin-top: 12px;
}
.dl-faqs .accordion-icon::before,
.dl-faqs .accordion-icon::after {
background-color: var(--dl-blue);
}
.dl-faqs .faq-item:hover .accordion-icon::before,
.dl-faqs .faq-item:hover .accordion-icon::after {
background-color: var(--light-blue);
}
.dl-faqs .faq-item:active .accordion-icon::before,
.dl-faqs .faq-item:active .accordion-icon::after {
background-color: var(--accent-blue);
}
/* an opened item shows a grey close icon */
.dl-faqs .faq-item.active .accordion-icon::before,
.dl-faqs .faq-item.active .accordion-icon::after,
.dl-faqs .faq-item.active:hover .accordion-icon::before,
.dl-faqs .faq-item.active:hover .accordion-icon::after {
background-color: var(--dl-divider);
}
/* --- popups --- */
.dl-popup.popup {
box-sizing: border-box;
max-width: 960px;
padding: 36px 24px;
border-radius: 24px;
background: #F7F7F7;
font-family: 'Rubik', "Rubik-fallback", Arial, sans-serif;
color: #1A1A1A;
text-align: center;
}
.dl-popup button.mfp-close {
top: 36px;
right: 24px;
width: 36px;
height: 36px;
padding: 0;
opacity: 1;
color: transparent;
font-size: 0;
line-height: 0;
background: url("../i/downloads/icon-close.svg") center / 36px 36px no-repeat;
transition: opacity .2s;
}
.dl-popup button.mfp-close:hover,
.dl-popup button.mfp-close:focus {
opacity: .7;
}
/* platform picker (University Researcher / Professional) */
.dl-popup_platforms.popup {
max-width: 560px;
text-align: left;
}
.dl-popup__top {
display: flex;
flex-direction: column;
gap: 12px;
padding-right: 48px;
}
.dl-popup__icon {
display: block;
width: 120px;
height: 120px;
}
.dl-popup__titles {
display: flex;
flex-direction: column;
gap: 8px;
}
.dl-popup_platforms .dl-popup__title {
font-size: 32px;
text-align: left;
}
.dl-popup_platforms .dl-popup__subtitle {
font-size: 16px;
text-align: left;
}
.dl-popup__body {
display: flex;
flex-direction: column;
gap: 36px;
margin-top: 48px;
}
.dl-platforms-list {
display: flex;
align-items: flex-start;
gap: 20px;
}
.dl-platform {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.dl-platform__head {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.dl-platform__head img {
display: block;
height: 60px;
width: auto;
}
.dl-platform__name {
color: #1A1A1A;
font-size: 16px;
font-weight: 500;
line-height: 1.46;
white-space: nowrap;
}
.dl-platform__actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.dl-popup__note {
color: #5E5B5C;
font-size: 16px;
line-height: 1.46;
text-align: left;
}
.dl-popup__note .bold {
font-weight: 500;
}
.dl-popup__footer {
margin-top: 48px;
color: #1A1A1A;
font-size: 16px;
line-height: 1.46;
text-align: left;
}
.dl-popup__footer a {
color: #0096C8;
}
/* the PLE form sits on white so the Marketo iframe blends in */
#download-ple.dl-popup.popup {
background: #FEFEFE;
}
.dl-popup__head {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
padding-right: 48px;
}
.dl-popup__title {
margin: 0;
color: #1A1A1A;
font-size: 32px;
font-weight: 500;
line-height: 1.34;
text-align: center;
}
.dl-popup__subtitle {
margin: 0;
color: #1A1A1A;
font-size: 16px;
line-height: 1.46;
text-align: center;
}
.dl-popup__form {
position: relative;
min-height: 420px;
}
.dl-popup__form iframe {
display: block;
width: 100%;
height: 610px;
border: 0;
}
.dl-popup__notice {
margin: 12px 0 0;
color: #1A1A1A;
font-size: 14px;
line-height: 1.46;
text-align: center;
}
.dl-popup__notice a {
display: inline-block;
margin-top: 8px;
color: #0096C8;
}
/* --- adaptive --- */
@media (max-width: 1440px) {
.dl-hero__aside {
left: 32px;
}
}
@media (max-width: 1200px) {
.dl-hero__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.dl-hero__aside {
position: static;
align-self: flex-start;
width: auto;
}
.dl-hero__links {
flex-wrap: wrap;
}
.dl-compare__head,
.dl-compare__row {
grid-template-columns: minmax(0, 1.53fr) repeat(3, minmax(0, 1fr));
}
.dl-req-card__title {
flex-basis: 40%;
max-width: 40%;
font-size: 28px;
}
}
@media (max-width: 1024px) {
.dl-editions__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dl-compare {
padding: 64px 0;
}
.dl-compare__head,
.dl-compare__row {
column-gap: 12px;
}
.dl-compare__cell,
.dl-compare__group-title {
padding-left: 12px;
padding-right: 12px;
}
.dl-compare__cell {
min-height: 52px;
font-size: 14px;
}
.dl-compare__pill span {
display: none;
}
}
@media (max-width: 768px) {
.with-event .dl-page {
padding-top: 119px;
}
.dl-page {
padding-top: 50px;
}
.dl-hero {
padding: 48px 0;
}
.dl-hero__links a {
padding: 12px 0;
}
.dl-hero__title {
font-size: 32px;
}
.dl-hero__available-title {
font-size: 20px;
}
.dl-platforms {
gap: 24px;
}
.dl-platforms img {
height: 44px;
}
.dl-editions__grid {
grid-template-columns: minmax(0, 1fr);
}
.dl-compare__head,
.dl-compare__row {
grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
column-gap: 8px;
}
.dl-compare__group-title,
.dl-section-title {
font-size: 24px;
}
.dl-compare__group-title {
min-height: 48px;
padding-left: 4px;
padding-right: 4px;
}
.dl-compare__cell {
min-height: 48px;
padding: 8px 4px;
font-size: 13px;
border-bottom: 1px solid var(--dl-divider);
}
.dl-compare__head .dl-compare__cell_label {
border-bottom: 0;
}
.dl-mark {
width: 24px;
height: 24px;
}
.dl-btn_lg {
height: 46px;
min-width: 180px;
font-size: 14px;
}
.dl-req-card {
flex-direction: column;
gap: 12px;
padding: 24px 20px;
border-radius: 16px;
}
.dl-req-card__title,
.dl-req-card__body {
flex-basis: auto;
max-width: none;
width: 100%;
}
.dl-req-card__title {
font-size: 24px;
}
.dl-req-card__body {
font-size: 14px;
}
.dl-faqs .section-title {
font-size: 24px;
}
.dl-faqs .faq-question > span {
padding-right: 40px;
}
.dl-requirements {
padding: 48px 0;
}
}
@media (max-width: 600px) {
.dl-req-card__title br {
display: none;
}
}
/* ---------- mobile layout ---------- */
@media (max-width: 767px) {
.dl-page .container {
max-width: none;
padding: 0 16px;
}
/* hero */
.dl-hero {
padding: 24px 0 36px;
}
.dl-hero__inner {
gap: 24px;
}
.dl-tip__body {
width: 200px;
left:-200%;
}
.dl-back {
gap: 8px;
}
.dl-hero__title {
font-size: 32px;
line-height: 1.24;
margin-bottom: 12px;
}
.dl-hero__released {
margin-top: 8px;
}
.dl-hero__more {
display: flex;
}
.dl-hero__links {
display: none;
flex-wrap: wrap;
gap: 8px 12px;
margin-top: 4px;
flex-direction: column;
}
.dl-hero__links.is-open {
display: flex;
}
.dl-hero__links-sep {
display: none;
}
.dl-hero__available {
margin-top: 36px;
}
.dl-hero__available-title {
font-size: 20px;
line-height: 1.4;
}
.dl-platforms {
gap: 24px;
margin-top: 12px;
}
.dl-platforms img {
height: 40px;
}
/* editions — one card at a time */
.dl-editions {
padding-bottom: 0;
}
.dl-editions__tabs {
display: flex;
margin: 0 -16px;
padding: 0 16px;
}
.dl-editions__tab {
padding:0;
//margin: 0 8px;
}
.dl-editions__grid {
display: block;
}
.dl-edition {
display: none;
}
.dl-edition.is-active {
display: flex;
}
.dl-edition__hint,
.dl-edition__cta,
.dl-download
/*.dl-edition .dl-btn*/
{
display: none;
}
.dl-edition__mobile-note {
display: block;
}
.dl-full {
display: none;
}
.dl-short {
display: inline;
}
/* comparison table */
.dl-compare {
padding: 48px 0 0;
}
.dl-compare__head,
.dl-compare__row {
grid-template-columns: 187px repeat(3, minmax(0, 1fr));
column-gap: 8px;
}
/* the header turns into three tiles with the edition name set vertically.
The tiles are tall enough that keeping their place in the flow would leave
a band of dead space under the edition card, so here — and only here — the
header is taken out of the flow and pinned to the top of the viewport; it
repeats .container's 16px gutters so its columns stay in line with the
rows, and it never covers a row that is standing still. */
.dl-compare__head {
position: fixed;
left: 0;
right: 0;
box-sizing: border-box;
padding: 12px 16px;
}
.dl-compare__pill {
flex-direction: column;
justify-content: space-between;
gap: 12px;
min-height: 145px;
padding: 12px;
border-radius: 8px;
font-size: 14px;
line-height: 1.42;
}
.dl-compare__pill span {
display: block;
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
}
.dl-compare__group + .dl-compare__group {
margin-top: 12px;
}
.dl-compare__group-title {
min-height: 60px;
padding: 8px 0;
font-size: 20px;
line-height: 1.4;
}
.dl-compare__cell {
min-height: 60px;
padding: 8px 0;
font-size: 14px;
line-height: 1.42;
}
.dl-compare__cell_label {
padding-right: 8px;
}
.dl-compare__value {
color: #5E5B5C;
}
.dl-compare__row_merge .dl-compare__cell_merged {
grid-column: 3 / -1;
}
.dl-compare__row_merge .dl-compare__cell_dup {
display: none;
}
.dl-mark {
width: 36px;
height: 36px;
}
.dl-compare__more {
padding-top: 36px;
}
.dl-btn_lg {
width: 280px;
min-width: 0;
height: 48px;
padding: 0 24px;
font-size: 14px;
}
/* system requirements */
.dl-requirements {
padding: 48px 0;
}
.dl-section-title {
margin-bottom: 36px;
font-size: 24px;
line-height: 1.34;
}
.dl-req-card {
flex-direction: column;
gap: 12px;
padding: 36px 24px;
border-radius: 24px;
}
.dl-req-card + .dl-req-card {
margin-top: 8px;
}
.dl-req-card__title,
.dl-req-card__body {
flex-basis: auto;
max-width: none;
width: 100%;
}
.dl-req-card__title {
font-size: 20px;
line-height: 1.4;
}
.dl-req-card__body {
font-size: 16px;
}
.dl-req-card__title br {
display: none;
}
/* FAQ */
.dl-faqs {
padding: 48px 0;
}
.dl-faqs .section-title {
margin-bottom: 36px;
font-size: 24px;
line-height: 1.34;
}
.dl-faqs .faq-list {
margin-top: 0;
}
/* the row keeps its height when the answer opens, so neither the question
nor the icon jumps — same as the FAQ on the other pages */
.dl-faqs .faq-question {
position: relative;
margin: 0;
padding: 32px 0;
font-size: 20px;
line-height: 1.4;
}
.dl-faqs .faq-question > span {
padding-right: 44px;
}
/* centred on the question row, which is why the row is the containing
block here: .faq-item itself grows once the answer is open */
.dl-faqs .faq-icon {
top: 50%;
margin-top: -12px;
}
/* only the -7px/-7px that compensates the generic rotate + bar growth,
so the cross lands where the plus was */
.dl-faqs .faq-item.active .faq-icon {
top: 50%;
margin-top: -19px;
}
.dl-faqs .faq-item.active .faq-answer {
padding-bottom: 32px;
}
/* popups */
.dl-popup.popup {
padding: 24px 16px;
border-radius: 16px;
}
.dl-popup button.mfp-close {
top: 16px;
right: 16px;
width: 28px;
height: 28px;
background-size: 28px 28px;
}
.dl-popup__head,
.dl-popup__top {
padding-right: 36px;
}
.dl-popup__title,
.dl-popup_platforms .dl-popup__title {
font-size: 24px;
}
.dl-popup__subtitle,
.dl-popup_platforms .dl-popup__subtitle {
font-size: 14px;
}
.dl-popup__icon {
width: 80px;
height: 80px;
}
.dl-popup__body {
gap: 24px;
margin-top: 32px;
}
.dl-platforms-list {
flex-direction: column;
align-items: stretch;
gap: 24px;
}
.dl-platform {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.dl-platform__head {
flex-direction: row;
gap: 12px;
}
.dl-platform__head img {
height: 40px;
}
.dl-popup__note,
.dl-popup__footer {
font-size: 14px;
}
.dl-popup__note br {
display: none;
}
.dl-popup__footer {
margin-top: 32px;
}
.dl-popup__form iframe {
height: 650px;
}
}
/* ==================================================================
* Free simulation software page (/free-simulation-software/) — light theme
* ================================================================== */
body:has(.fsw-page) {
background: #FEFEFE;
color: #1A1A1A;
}
.fsw-page {
--fsw-text: #1A1A1A;
--fsw-text-secondary: #5E5B5C;
--fsw-blue: #0096C8;
--fsw-blue-active: #0987B1;
--fsw-divider: #E5E5E5;
--fsw-soft: #F7F7F7;
--fsw-white: #FEFEFE;
--fsw-card: #14212E;
/* space taken by the fixed site chrome (.event-header + .header.flying) */
padding-top: 55px;
background: #FEFEFE;
color: var(--fsw-text);
font-family: 'Rubik', "Rubik-fallback", Arial, sans-serif;
}
.with-event .fsw-page {
padding-top: 105px;
}
/* the shared new-styles.css centers and recolors headings globally —
this page sets alignment and color per block instead */
.fsw-page h1,
.fsw-page h2,
.fsw-page h3,
.fsw-page ul {
margin: 0;
color: inherit;
text-align: inherit;
}
.fsw-page p, .ftr-envs p {
margin: 0;
text-align: inherit;
}
/* the margin reset above would strip the auto centering of the shared title */
.fsw-page .section-title {
margin: 0 auto 12px;
text-align: center;
}
.fsw-page a {
color: var(--fsw-blue);
text-decoration: none;
}
.fsw-page a:hover {
color: var(--light-blue);
}
/* shared centered heading block: H2 + lead paragraph */
.fsw-title {
display: flex;
flex-direction: column;
gap: 12px;
box-sizing: border-box;
width: 594px;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
.fsw-title_wide {
width: 800px;
}
.fsw-title h1 {
font-size: 44px;
font-weight: 500;
line-height: 1.24;
}
.fsw-title h2 {
font-size: 32px;
font-weight: 500;
line-height: 1.34;
}
.fsw-title p {
font-size: 16px;
font-weight: 400;
line-height: 1.46;
}
/* --- buttons --- */
/* the .fsw-page a rules above are more specific than a bare .fsw-btn_*,
so every button rule is scoped to the page as well */
.fsw-page .fsw-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
align-self: flex-start;
width: 210px;
height: 48px;
padding: 0 32px;
border: 1px solid transparent;
border-radius: 64px;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 1;
text-align: center;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: background .25s, color .25s, border-color .25s;
}
.fsw-page .fsw-btn svg {
flex: 0 0 auto;
width: 16px;
height: 16px;
}
.fsw-page .fsw-btn_white {
background: var(--fsw-white);
border-color: var(--fsw-white);
color: var(--fsw-blue);
}
/* :focus-visible, not :focus — otherwise the button keeps the pressed look
after a mouse click until something else is clicked */
.fsw-page .fsw-btn_white:hover,
.fsw-page .fsw-btn_white:focus-visible {
background: var(--dl-soft);
border-color: var(--dl-soft);
color: var(--light-blue);
}
.fsw-page .fsw-btn_white:active {
background: var(--dl-soft);
border-color: var(--dl-soft);
color: var(--dl-blue-active);
}
.fsw-page .fsw-btn_outline-white {
background: transparent;
border-color: var(--fsw-white);
color: var(--fsw-white);
}
.fsw-page .fsw-btn_outline-white:hover,
.fsw-page .fsw-btn_outline-white:focus-visible {
background: var(--fsw-white);
border-color: var(--fsw-white);
color: var(--fsw-blue);
}
.fsw-page .fsw-btn_outline-white:active {
background: var(--active-transparent);
border-color: var(--active-transparent);
color: var(--fsw-blue);
}
.fsw-page .fsw-btn:focus {
outline: none;
}
.fsw-page .fsw-btn:focus-visible {
outline: 2px solid var(--fsw-blue);
outline-offset: 2px;
}
/* --- hero: Online / Desktop cards --- */
.fsw-hero {
padding: 80px 0;
}
.fsw-envs {
display: flex;
align-items: stretch;
gap: 16px;
margin-top: 36px;
}
/* the switcher only exists on mobile, where the two cards share one slot */
.fsw-envs__tabs {
display: none;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
height: 60px;
overflow: hidden;
border-radius: 64px;
background: var(--fsw-card);
}
.fsw-envs__tab {
display: inline-flex;
box-sizing: border-box;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 42px;
border: 0;
border-radius: 100px;
background: transparent;
color: var(--fsw-white);
font-family: inherit;
font-size: 20px;
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
opacity: .4;
cursor: pointer;
transition: background .25s, opacity .25s;
}
.fsw-envs__tab.is-active {
min-width: 180px;
padding: 0 32px;
background: var(--fsw-blue);
opacity: 1;
cursor: default;
}
.fsw-envs__tab.fsw-tab__desktop.is-active, .ftr-envs__tab.ftr-envs__tab__desktop.is-active {
background: #E5E5E533;
}
.fsw-env {
box-sizing: border-box;
display: flex;
flex: 1 1 0;
min-width: 0;
flex-direction: column;
justify-content: space-between;
gap: 36px;
padding: 36px 24px;
border-radius: 24px;
color: var(--fsw-white);
}
.fsw-env_online {
background: var(--fsw-blue);
}
.fsw-env_desktop {
background: var(--fsw-card);
}
.fsw-env__body {
display: flex;
flex-direction: column;
gap: 24px;
}
.fsw-env__title {
font-size: 32px;
font-weight: 500;
line-height: 1.34;
color: var(--fsw-white);
}
.fsw-env__list {
display: flex;
flex-direction: column;
gap: 24px;
padding: 0;
list-style: none;
}
.fsw-env__list li {
position: relative;
/* 20px bullet + 12px gap */
padding-left: 32px;
font-size: 16px;
font-weight: 400;
line-height: 1.46;
}
/* the asset is 28px because the glow bleeds 4px around the 20px dot, so it is
pulled back out of the 20px slot and kept out of the line box */
.fsw-env__bullet {
position: absolute;
left: -4px;
top: -2px;
width: 28px;
height: 28px;
}
/* mobile replaces the Download button with this note, as on /downloads/ */
.fsw-env__mobile-note, .ftr-env__mobile-note {
display: none;
font-size: 14px;
font-weight: 500;
line-height: 1.42;
color: #FEFEFE;
}
/* --- move freely between desktop and online --- */
.fsw-move {
padding: 80px 0;
}
.fsw-move__visual {
width: 1047px;
max-width: 100%;
margin: 36px auto 0;
display: block;
}
.fsw-move__visual img {
display: block;
width: 100%;
height: auto;
}
/* --- more than a simulation tool --- */
.fsw-benefits {
padding: 80px 0;
}
.fsw-benefits__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 36px;
}
.fsw-benefit {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 32px 24px;
border-radius: 24px;
text-align: center;
}
.fsw-benefit__icon {
display: block;
flex: 0 0 auto;
width: 120px;
height: 120px;
}
.fsw-benefit__title {
font-size: 24px;
font-weight: 500;
line-height: 1.34;
color: var(--fsw-text);
}
/* --- trusted by: full-bleed blue block with a logo marquee --- */
.fsw-trusted {
padding: 80px 0;
overflow: hidden;
background: var(--fsw-blue);
color: var(--fsw-white);
}
.fsw-page .fsw-logos{
margin-top: 36px;
}
.fsw-logos {
margin-top: 160px;
overflow: hidden;
}
/* two identical groups, each ending with one gap of trailing space, so
shifting the track by exactly half its width loops seamlessly */
.fsw-logos__track {
display: flex;
width: max-content;
animation: fsw-marquee 60s linear infinite;
}
.fsw-logos__group {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 84px;
height: 60px;
padding-right: 84px;
}
.fsw-logos__group img {
display: block;
flex: 0 0 auto;
}
/*.fsw-logos:hover .fsw-logos__track {*/
/* animation-play-state: paused;*/
/*}*/
/* the mobile design replaces the marquee with a 2x3 grid of six logos */
.fsw-logos-grid {
display: none;
grid-template-columns: repeat(2, minmax(0, 1fr));
/* even rows, so the short logos sit centred next to the tall ones */
grid-template-rows: repeat(3, 45px);
column-gap: 16px;
row-gap: 12px;
place-items: center;
box-sizing: border-box;
max-width: 310px;
margin: 24px auto 0;
}
.fsw-logos-grid img {
display: block;
max-width: 100%;
}
@keyframes fsw-marquee {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.fsw-logos {
overflow-x: auto;
}
.fsw-logos__track {
animation: none;
}
}
/* --- what our customers say --- */
.fsw-reviews {
padding: 80px 0;
overflow: hidden;
}
.fsw-reviews__head {
position: relative;
display: flex;
justify-content: center;
}
/* the taller badges overhang the 60px row symmetrically, as in the design */
.fsw-reviews__platforms {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
height: 60px;
}
.ftr-benefits .fsw-reviews__platforms {
margin-top: 12px;
}
.fsw-reviews__platforms img {
display: block;
flex: 0 0 auto;
}
.fsw-reviews__nav {
position: absolute;
right: 0;
bottom: 0;
display: flex;
gap: 10px;
}
.fsw-reviews__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 100px;
background: var(--fsw-blue);
color: var(--fsw-white);
cursor: pointer;
transition: background .25s, opacity .25s;
}
.fsw-reviews__arrow-icon {
display: block;
width: 16px;
height: 12px;
}
.fsw-reviews__arrow_next .fsw-reviews__arrow-icon {
transform: rotate(180deg);
}
.fsw-reviews__arrow:hover,
.fsw-reviews__arrow:focus-visible {
background: var(--fsw-blue-active);
}
.fsw-reviews__arrow:focus-visible {
outline: 2px solid var(--light-blue);
outline-offset: 2px;
}
.fsw-reviews__arrow:active {
transform: scale(.94);
}
.fsw-reviews__arrow[disabled],
.fsw-reviews__arrow.slick-disabled {
opacity: .4;
cursor: default;
}
.fsw-reviews__arrow[disabled]:hover,
.fsw-reviews__arrow.slick-disabled:hover {
background: var(--fsw-blue);
}
/* --- reviews slider (slick) ---
slick puts .slick-slide on the direct children, so every card sits in a
.fsw-reviews__slide wrapper: its 8px padding against the slider's -8px
margin makes the 16px gutter, and three 408px slides hold 392px cards */
.fsw-reviews__slider {
/* pre-slick / no-JS fallback: a plain three-column grid */
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 36px;
}
.fsw-reviews__slider.slick-initialized {
display: block;
margin-left: -8px;
margin-right: -8px;
}
.fsw-reviews__slider .slick-list {
overflow: hidden;
}
.fsw-reviews__slider .slick-track {
display: flex !important;
align-items: stretch;
}
.fsw-reviews__slider .slick-dots {
display: none !important;
}
.fsw-reviews__slide {
box-sizing: border-box;
}
.fsw-reviews__slider.slick-initialized .fsw-reviews__slide {
/* overrides the shared .slick-slide height:100% so the flex track stretches */
height: auto;
padding: 0 8px;
}
.fsw-reviews__slide .fsw-review {
height: 100%;
}
.fsw-review {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 8px;
padding: 36px 24px;
border-radius: 12px;
background: var(--fsw-soft);
}
.fsw-review__role {
font-size: 14px;
font-weight: 500;
line-height: 1.46;
color: var(--fsw-blue);
}
.fsw-review__text {
font-size: 24px;
font-weight: 400;
line-height: 1.34;
color: var(--fsw-text);
}
/* --- "See more" toggle --- */
.fsw-review__full,
.fsw-review__less-label {
display: none;
}
.fsw-review.is-expanded .fsw-review__clipped,
.fsw-review.is-expanded .fsw-review__more-label {
display: none;
}
.fsw-review.is-expanded .fsw-review__full,
.fsw-review.is-expanded .fsw-review__less-label {
display: inline;
}
.fsw-review__more {
align-self: flex-start;
margin-top: auto;
padding: 0;
border: 0;
background: none;
color: var(--fsw-text-secondary);
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 1.46;
text-align: left;
cursor: pointer;
transition: color .25s;
}
.fsw-review__more:hover {
color: var(--fsw-blue);
}
.fsw-review__more:focus {
outline: none;
}
.fsw-review__more:focus-visible {
outline: 2px solid var(--fsw-blue);
outline-offset: 2px;
}
/* while a card is open the row stops stretching, so only that card grows;
the rest are held at the height they had before it was opened */
.fsw-reviews__slider.has-expanded .slick-track {
align-items: flex-start;
}
.fsw-reviews__slider.has-expanded .fsw-review {
min-height: var(--fsw-review-base, 0px);
}
/* ==================================================================
* Free simulation software — mobile (the 390 frame of the design)
* ================================================================== */
@media (max-width: 768px) {
.fsw-page {
padding-top: 50px;
}
.with-event .fsw-page {
padding-top: 119px;
}
}
@media (max-width: 600px) {
.fsw-hero,
.fsw-move,
.fsw-benefits,
.fsw-trusted,
.fsw-reviews,
.fsw-page .faqs {
padding: 48px 0;
}
.fsw-title {
align-items: center;
}
.fsw-title h1 {
font-size: 32px;
}
.fsw-title_short-mobile {
max-width: 300px;
text-align: center;
}
.fsw-title h2 {
font-size: 24px;
}
/* --- hero --- */
.fsw-hero .fsw-title p {
padding: 0 20px;
}
.fsw-envs {
display: block;
margin-top: 24px;
}
.fsw-envs__tabs {
display: flex;
}
/* one card at a time, picked by the switcher */
.fsw-env {
display: none;
gap: 44px;
margin-top: 8px;
}
.fsw-env.is-active {
display: flex;
}
/* the card heading is what the switcher shows */
.fsw-env__title {
display: none;
}
.fsw-env__list {
gap: 12px;
}
.fsw-page .fsw-btn {
width: 100%;
height: 40px;
padding: 0 24px;
font-size: 14px;
}
/* nothing to download on a phone — the Desktop card says so instead */
.fsw-page .fsw-env_desktop .fsw-btn, .ftr-env_desktop .ftr-btn.ftr-btn_outline-white {
display: none;
}
.fsw-env_desktop .fsw-env__mobile-note, .ftr-env_desktop .ftr-env__mobile-note {
display: block;
}
/* --- move freely --- */
.fsw-move__visual {
margin-top: 24px;
}
/* --- more than a simulation tool --- */
.fsw-benefits .fsw-title {
padding: 0 16px;
}
.fsw-benefits__grid {
grid-template-columns: minmax(0, 1fr);
gap: 0;
margin-top: 24px;
}
.fsw-benefit {
gap: 8px;
padding: 16px 24px;
}
.fsw-benefit__icon {
width: 80px;
height: 80px;
}
.fsw-benefit__title {
font-size: 20px;
line-height: 1.4;
}
/* --- trusted by --- */
.fsw-logos {
display: none;
}
.fsw-logos-grid {
display: grid;
}
/* --- what our customers say --- */
.fsw-reviews__intro {
padding: 0 16px;
}
.fsw-reviews__platforms {
height: 46px;
gap: 7px;
}
.fsw-reviews__platforms img {
width: auto;
}
.fsw-platform_getapp {
height: 46px;
}
.fsw-platform_capterra,
.fsw-platform_advice {
height: 39px;
}
/* slick switches to one variable-width slide here — see the page script */
.fsw-reviews__slider {
grid-template-columns: minmax(0, 1fr);
}
.fsw-reviews__slider.slick-initialized {
margin-left: 0;
margin-right: 0;
}
.fsw-reviews__slide {
width: 288px;
}
.fsw-reviews__slider.slick-initialized .fsw-reviews__slide {
padding: 0 8px 0 0;
}
.fsw-review__role {
line-height: 1.42;
}
.fsw-review__text {
font-size: 16px;
line-height: 1.46;
}
}
/* ==================================================================
* Features page (/features/) — Figma "AL_New Pages" → Features
* (desktop 3767:32085, mobile Features_390 3899:22645).
* Only what the design adds on top of the blocks already implemented
* for the other new pages lives here; everything else (.hero,
* .nav-menu, .section*, .btn-*, .mhl-case-card, .features-grid,
* .examples-grid, .faq-item, .blogs-grid) is reused as is.
* ================================================================== */
.ftr-page {
--ftr-card: #14212E;
--ftr-radius: 12px;
}
/* grey stand-ins for the artwork that is not exported from the layout yet */
.ftr-placeholder {
display: block;
width: 100%;
height: 100%;
background: #D9D9D9;
border-radius: var(--ftr-radius);
}
/* --- shared buttons of the cards (Button_Accent, 210x56) --- */
.ftr-page .ftr-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
align-self: flex-start;
min-width: 120px;
height: 48px;
padding: 0 32px;
border: 1px solid transparent;
border-radius: 64px;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 1;
text-align: center;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: background .25s, color .25s, border-color .25s;
}
.ftr-page .ftr-btn__icon {
flex: 0 0 auto;
width: 16px;
height: 16px;
}
.ftr-page .ftr-btn_white {
background: var(--text-white);
border-color: var(--text-white);
color: var(--accent-blue);
}
/* :focus-visible, not :focus — otherwise the button keeps the pressed look
after a mouse click until something else is clicked */
.ftr-page .ftr-btn_white:hover,
.ftr-page .ftr-btn_white:focus-visible {
background: var(--active-transparent);
border-color: var(--active-transparent);
color: var(--active-blue);
}
.ftr-page .ftr-btn_outline-white {
background: transparent;
border-color: var(--text-white);
color: var(--text-white);
}
.ftr-page .ftr-btn_outline-white:hover,
.ftr-page .ftr-btn_outline-white:focus-visible {
background: var(--text-white);
border-color: var(--text-white);
color: var(--accent-blue);
}
.ftr-page .ftr-btn:focus {
outline: none;
}
.ftr-page .ftr-btn:focus-visible {
outline: 2px solid var(--light-blue);
outline-offset: 2px;
}
/* the 36x36 open arrow of the method and library cards */
.ftr-arrow-icon {
display: block;
width: 36px;
height: 36px;
}
/* the slider arrows are styled by the more.blogs component template; the same
values are repeated here so the models / cases sliders never depend on it.
That template also ships a global .slider-nav { top: -50px }, which would push
the arrows into the cards — reset it and lift only the cases one. */
.ftr-page .slider-nav {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
position: relative;
}
.ftr-models__slider .slider-nav {
top: 0;
}
.ftr-page .slider-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: none;
border-radius: 100px;
background: var(--ftr-card);
color: var(--text-white);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background-color .2s ease, transform .2s ease;
}
.ftr-page .slider-arrow:hover,
.ftr-page .slider-arrow:focus-visible {
background: var(--accent-blue);
}
.ftr-page .slider-arrow:active {
transform: scale(.94);
}
.ftr-page .slider-arrow__icon {
display: block;
width: 16px;
height: 12px;
}
.ftr-page .slider-arrow--next .slider-arrow__icon {
transform: rotate(180deg);
}
/* --- "Core Functionality" submenu (Figma 4198:28168) ---
* main.js toggles .is-open on .nav-menu-other-libraries and unhides
* #other-libraries-panel. The panel is the full-width #14212E bar; the links
* themselves sit inside the trigger, so they line up with its label.
*/
.ftr-submenu-bar {
height: 200px;
padding: 0;
box-sizing: border-box;
}
@media (min-width: 601px) {
/* the shared stylesheet hides the sublist on desktop for the libraries pages */
.ftr-page .nav-menu-other-libraries.is-open .nav-menu-other-libraries__sublist {
display: flex !important;
position: absolute;
top: 100%;
left: 12px;
z-index: 8;
flex-direction: column;
padding: 40px 0;
}
.ftr-page .nav-menu-other-libraries__link {
display: flex;
align-items: center;
height: 40px;
font-size: 14px;
font-weight: 400;
line-height: 1.46;
color: var(--text-white);
text-decoration: none;
white-space: nowrap;
}
.ftr-page .nav-menu-other-libraries__link:hover {
color: var(--light-blue);
}
.ftr-page .nav-menu-other-libraries__link:active {
color: var(--active-blue);
}
.ftr-page .nav-menu-other-libraries.is-open .nav-menu-other-libraries__trigger {
border-bottom-color: var(--accent-blue);
}
}
/* --- hero (3767:32093) --- */
.ftr-hero .hero-content {
gap: 16px;
align-items: stretch;
}
.ftr-hero .hero-left {
flex: 0 0 596px;
max-width: 596px;
box-sizing: border-box;
padding: 76px 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.ftr-hero .hero-title {
margin: 0 0 12px;
}
.ftr-hero .hero-description {
color: var(--text-white);
margin: 0 0 36px;
}
.ftr-hero .btn-primary.btn-large {
min-width: 200px;
}
.ftr-hero .hero-right {
flex: 0 0 596px;
max-width: 596px;
}
.ftr-hero .hero-image {
height: 404px;
border-radius: var(--ftr-radius);
}
.ftr-hero .hero-image > img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--ftr-radius);
}
/* --- one simulation software, two environments (3767:32112) --- */
.ftr-envs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 36px;
}
/* the switcher only exists on mobile, where the two cards share one slot */
.ftr-envs__tabs {
display: none;
}
.ftr-env {
box-sizing: border-box;
min-height: 395px;
padding: 36px 24px;
border-radius: var(--ftr-radius);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 44px;
}
.ftr-env_online {
background: var(--accent-blue);
}
.ftr-env_desktop {
background: var(--ftr-card);
}
/* the shared new-styles.css centers every h2/h3 — this one is left aligned */
.ftr-env__title {
font-size: 32px;
font-weight: 500;
line-height: 1.34;
color: var(--text-white);
text-align: left;
margin: 0 0 24px;
}
.ftr-env__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.ftr-env__list li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 16px;
line-height: 1.46;
color: var(--text-white);
}
/* the asset is 28px because the glow bleeds 4px around the 20px dot, so it is
pulled back by that 4px to keep the 32px offset of the design */
.ftr-env__bullet {
flex: 0 0 28px;
width: 28px;
height: 28px;
margin: -3px 0 0 -4px;
}
.ftr-envs__note {
max-width: 596px;
margin: 32px auto 0;
font-size: 16px;
line-height: 1.46;
text-align: center;
color: var(--text-white);
}
.feature-title a{
color: var(--accent-blue);
text-decoration: none;
}
/*.ftr-envs__note a:hover,*/
/*.ftr-cycle__links a:hover,*/
/*.ftr-models__lede a:hover,*/
/*.ftr-libs .section-description a:hover,*/
/*.ftr-benefits .feature-title a:hover,*/
/*.ftr-page .faq-answer a:hover {*/
/* text-decoration: underline;*/
/*}*/
/* --- create, deploy, use, and update simulations (4210:29379) --- */
.ftr-cycle__links {
margin-bottom: 0;
}
.ftr-cycle__visual {
display: block;
margin-top: 36px;
}
.ftr-cycle__visual img {
display: block;
width: 100%;
height: auto;
}
/* --- model faster with industry-tailored libraries (4274:2895) --- */
.ftr-libs__grid-wrap.mhl-cases {
padding: 0;
}
.ftr-libs__mobile {
display: none;
}
.ftr-lib-card {
display: block;
box-sizing: border-box;
padding: 24px;
border-radius: var(--ftr-radius);
background: var(--ftr-card);
text-decoration: none;
}
.ftr-lib-card__icon {
display: block;
width: 48px;
height: 48px;
margin-bottom: 24px;
}
.ftr-lib-card__name {
display: block;
font-size: 20px;
font-weight: 500;
line-height: 1.4;
color: var(--text-white);
margin-bottom: 8px;
}
.ftr-lib-card__row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
}
.ftr-lib-card__desc {
font-size: 16px;
line-height: 1.46;
color: var(--text-white);
}
.ftr-lib-card__arrow {
flex: 0 0 36px;
color: var(--text-white);
}
/* --- multimethod simulation approach (4212:31719) --- */
.ftr-methods__grid {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 36px;
}
.ftr-methods__row {
display: flex;
align-items: stretch;
gap: 16px;
}
.ftr-methods__intro {
flex: 0 0 392px;
max-width: 392px;
box-sizing: border-box;
min-height: 360px;
padding: 36px 24px;
border-radius: var(--ftr-radius);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
}
.ftr-methods__text {
font-size: 16px;
line-height: 1.46;
color: var(--text-white);
margin: 0;
}
.ftr-methods__intro .btn-transparent.ftr-methods__btn {
align-self: flex-start;
height: 40px;
min-width: 120px;
padding: 0 24px;
font-size: 14px;
}
.ftr-method {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
gap: 16px;
min-height: 360px;
border-radius: var(--ftr-radius);
background: var(--ftr-card);
text-decoration: none;
overflow: hidden;
}
.ftr-method_wide {
flex: 0 0 800px;
max-width: 800px;
}
.ftr-method__body {
flex: 0 0 392px;
max-width: 392px;
box-sizing: border-box;
align-self: stretch;
padding: 36px 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
}
.ftr-method__text-wrap {
display: block;
}
.ftr-method__title {
display: block;
font-size: 24px;
font-weight: 500;
line-height: 1.34;
color: var(--text-white);
margin-bottom: 12px;
}
.ftr-method__text {
display: block;
font-size: 16px;
line-height: 1.46;
color: var(--text-white);
}
.ftr-method__arrow {
display: block;
color: var(--text-white);
}
.ftr-method__visual {
flex: 1 1 auto;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ftr-method__visual img {
display: block;
max-width: 100%;
height: auto;
}
/* the +/x accordion icon replaces the arrow on mobile */
.ftr-method__toggle {
display: none;
}
/* --- explore further with experiment frameworks (3767:32288) --- */
.ftr-exp__tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.ftr-exp__tab {
box-sizing: border-box;
height: 55px;
padding: 0 32px;
border: none;
border-radius: 64px;
background: var(--accent-blue);
color: var(--text-white);
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 1.46;
text-align: left;
cursor: default;
-webkit-appearance: none;
appearance: none;
display: flex;
align-items: center;
}
.ftr-exp__cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-top: 12px;
}
.ftr-exp__card {
box-sizing: border-box;
min-height: 319px;
padding: 36px 24px;
border-radius: var(--ftr-radius);
background: var(--ftr-card);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
}
.ftr-exp__text {
font-size: 16px;
line-height: 1.46;
color: var(--text-white);
margin: 0;
}
.ftr-exp__chart {
display: block;
width: 100%;
max-width: 242px;
height: auto;
}
/* --- title left / copy right head, used by the visualization, AI assistant
and integration blocks (3767:32407, 3767:32565, 3767:32650) --- */
.ftr-split__head {
display: flex;
align-items: flex-start;
gap: 118px;
}
.ftr-page .ftr-split__title {
flex: 0 0 494px;
max-width: 494px;
margin: 0;
font-size: 32px;
font-weight: 500;
line-height: 1.34;
color: var(--text-white);
text-align: left;
}
.ftr-split__body {
flex: 0 1 596px;
max-width: 596px;
display: flex;
flex-direction: column;
gap: 12px;
}
.ftr-split__body p {
margin: 0;
font-size: 16px;
line-height: 1.46;
color: var(--text-white);
}
.ftr-page .ftr-split__link {
font-size: 14px;
}
.ftr-split__visual {
margin-top: 36px;
}
.ftr-split__visual img {
display: block;
width: 100%;
height: auto;
}
.ftr-split__visual img.mobile-show {
display: none;
}
/* the AI assistant animation fills the 1208px container (Features_1208x460) */
.ftr-video {
display: block;
width: 100%;
height: auto;
border-radius: var(--ftr-radius);
background: var(--primary-dark);
}
/* with prefers-reduced-motion the script swaps autoplay for native controls,
which adds a control bar the fixed height would crop */
.ftr-video[controls] {
height: auto;
}
/* --- explore models built with AnyLogic (3835:38040) --- */
.ftr-models__lede {
margin-bottom: 0;
}
.ftr-models__slider {
margin-top: 36px;
}
.ftr-models__track {
display: flex;
/* the 164px side cards sit centred against the 340px active one
(Figma 4717:74904) */
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 340px;
}
.ftr-model-card {
position: relative;
display: none;
border-radius: var(--ftr-radius);
overflow: hidden;
text-decoration: none;
transition: flex-basis .35s cubic-bezier(.22, 1, .36, 1), height .35s cubic-bezier(.22, 1, .36, 1);
}
.ftr-model-card.is-prev,
.ftr-model-card.is-next {
display: block;
flex: 0 0 288px;
height: 164px;
}
.ftr-model-card.is-active {
display: block;
flex: 0 0 600px;
height: 340px;
}
.ftr-model-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ftr-model-card__shade {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, rgba(10, 22, 40, 0) 45%, rgba(10, 22, 40, .65) 100%);
}
.ftr-model-card__title {
position: absolute;
left: 24px;
right: 24px;
bottom: 24px;
z-index: 2;
font-size: 16px;
font-weight: 500;
line-height: 1.34;
color: var(--text-white);
}
.ftr-model-card.is-active .ftr-model-card__title {
font-size: 32px;
}
/* hover: the title lifts and the link appears under it (Figma 4919:95405) */
.ftr-model-card__title {
transition: bottom .25s ease;
}
.ftr-model-card__link {
position: absolute;
left: 24px;
right: 24px;
bottom: 24px;
z-index: 2;
font-size: 12px;
line-height: 1.46;
color: var(--text-white);
opacity: 0;
transform: translateY(4px);
transition: opacity .25s ease, transform .25s ease;
pointer-events: none;
}
.ftr-model-card__link span {
border-bottom: 1px solid var(--text-white);
}
.ftr-model-card:hover .ftr-model-card__title,
.ftr-model-card:focus-visible .ftr-model-card__title {
bottom: 46px;
}
.ftr-model-card:hover .ftr-model-card__link,
.ftr-model-card:focus-visible .ftr-model-card__link {
opacity: 1;
transform: none;
}
.ftr-model-card__arrow {
display: none;
}
.ftr-models__nav {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 600px;
margin: 24px auto 0;
}
.ftr-models__counter {
font-size: 16px;
line-height: 1.46;
color: var(--text-white);
}
/* before the slider script runs (and if it never does) the first three cards
stand in for prev / active / next */
@media (min-width: 601px) {
.ftr-models__track:not(.is-ready) .ftr-model-card:nth-child(-n+3) {
display: block;
flex: 0 0 288px;
height: 164px;
}
.ftr-models__track:not(.is-ready) .ftr-model-card:nth-child(2) {
flex: 0 0 600px;
height: 340px;
}
}
/* --- AnyLogic is more than a simulation tool (3767:32793) --- */
.ftr-badges {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 36px;
}
.ftr-badges__item {
display: block;
width: auto;
height: 46px;
}
.ftr-benefits__grid {
row-gap: 48px;
}
.ftr-page .ftr-split__link,
.ftr-page .ftr-split__body a {
text-decoration: none;
}
.ftr-page .ftr-split__body a:hover {
text-decoration: underline;
}
/* --- simulation software in action: industry examples (3767:32888) --- */
/* the arrows sit in the right margin of the centred heading block, level with
the lead paragraph (Figma 3767:32894) */
.ftr-cases .slider-nav {
position: relative;
top: -76px;
margin-bottom: -36px;
}
/* --- ready to create your first simulation model? (3767:32942) --- */
.ftr-cta__box {
box-sizing: border-box;
padding: 80px 24px;
border-radius: 24px;
background: var(--accent-blue);
display: flex;
flex-direction: column;
align-items: center;
gap: 36px;
}
.ftr-cta__box .section-description {
margin-bottom: 0;
}
.ftr-cta__buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.ftr-cta__box .ftr-btn {
align-self: center;
}
/* ---------- adaptive ---------- */
@media (max-width: 1440px) {
.ftr-method_wide {
flex: 1 1 0;
max-width: none;
}
}
@media (max-width: 1200px) {
.ftr-hero .hero-left {
padding: 24px;
}
.ftr-hero .hero-description {
margin-bottom: 48px;
}
.ftr-hero .hero-image {
height: auto;
aspect-ratio: 596 / 404;
}
.ftr-split__head {
gap: 32px;
}
.ftr-page .ftr-split__title {
flex: 0 0 40%;
max-width: 40%;
font-size: 24px;
}
.ftr-method__title {
font-size: 24px;
}
.ftr-env__title {
font-size: 24px;
}
.ftr-methods__intro,
.ftr-method__body {
flex-basis: 45%;
max-width: 45%;
}
.ftr-model-card.is-prev,
.ftr-model-card.is-next {
flex-basis: 24%;
height: 136px;
}
.ftr-model-card.is-active {
flex-basis: 50%;
height: 284px;
}
.ftr-model-card.is-active .ftr-model-card__title {
font-size: 24px;
}
}
@media (max-width: 1024px) {
.ftr-hero .hero-left,
.ftr-hero .hero-right {
flex-basis: 50%;
max-width: 50%;
}
.ftr-exp__tabs,
.ftr-exp__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 920px) {
.ftr-hero .hero-left {
flex-basis: 100%;
max-width: 100%;
padding: 0;
align-items: center;
}
.ftr-hero .hero-right {
flex-basis: 100%;
max-width: 596px;
width: 100%;
}
.ftr-split__head {
flex-wrap: wrap;
gap: 24px;
}
.ftr-page .ftr-split__title,
.ftr-split__body {
flex-basis: 100%;
max-width: 100%;
}
.ftr-methods__row {
flex-wrap: wrap;
}
.ftr-methods__intro,
.ftr-method {
flex-basis: 100%;
max-width: 100%;
}
.ftr-method__body {
flex-basis: 55%;
max-width: 55%;
}
}
@media (max-width: 768px) {
.ftr-envs {
grid-template-columns: minmax(0, 1fr);
}
}
/* ---------- mobile layout (Features_390) ---------- */
@media (max-width: 600px) {
.ftr-split__visual img.mobile-show {
display: inline-flex;;
}
.ftr-hero .hero-left {
align-items: flex-start;
text-align: left;
}
/*.ftr-hero .hero-title,*/
/*.ftr-hero .hero-description {*/
/* text-align: left;*/
/*}*/
.ftr-hero .hero-description {
margin-bottom: 32px;
}
.ftr-hero .btn-primary.btn-large {
width: 100%;
min-width: 0;
margin-bottom: 30px;
}
.ftr-hero .hero-image {
border-radius: 8px;
}
/* the two environment cards share one slot behind a tab switcher */
.ftr-envs {
display: block;
margin-top: 24px;
}
.ftr-envs__tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-bottom: 12px;
border-radius: 64px;
overflow: hidden;
background: var(--ftr-card);
}
.ftr-envs__tab {
height: 48px;
border: none;
border-radius: 64px;
background: transparent;
color: #7A8794;
font-family: inherit;
font-size: 20px;
font-weight: 500;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.ftr-envs__tab.is-active {
background: var(--accent-blue);
color: var(--text-white);
}
.ftr-env {
display: none;
min-height: 0;
padding: 24px;
border-radius: var(--ftr-radius);
}
.ftr-env.is-active {
display: flex;
}
.ftr-env__title {
display: none;
}
.ftr-env__list {
gap: 16px;
}
.ftr-env .ftr-btn {
align-self: stretch;
width: 100%;
min-width: 0;
}
.ftr-envs__note {
display: none;
}
.ftr-cycle__visual {
margin-top: 24px;
}
/* libraries: icon cards instead of the photo cards */
.ftr-libs__mobile {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 24px;
}
/* methods: the cards collapse into an accordion */
.ftr-methods__grid {
gap: 12px;
margin-top: 24px;
}
.ftr-methods__row {
display: contents;
}
.ftr-methods__intro {
order: -1;
flex-basis: auto;
max-width: none;
min-height: 0;
padding: 0;
margin-bottom: 20px;
}
.ftr-methods__intro .btn-transparent.ftr-methods__btn {
display: none;
}
.ftr-methods__intro .ftr-methods__text {
text-align: center;
}
.ftr-method {
position: relative;
display: block;
min-height: 0;
padding: 24px;
box-sizing: border-box;
}
.ftr-method__body {
flex-basis: auto;
max-width: none;
padding: 0 32px 0 0;
display: block;
}
.ftr-method__title {
margin-bottom: 0;
font-size: 20px;
}
.ftr-method__text,
.ftr-method__visual {
display: none;
}
.ftr-method.is-open .ftr-method__title {
margin-bottom: 12px;
}
.ftr-method.is-open .ftr-method__text {
display: block;
}
.ftr-method.is-open .ftr-method__visual {
display: flex;
margin-top: 16px;
}
.ftr-method__arrow {
display: none;
}
.ftr-method__toggle {
display: block;
position: absolute;
right: 32px;
top: 28px;
}
.ftr-method.is-open .ftr-method__toggle {
rotate: 45deg;
right: 27px;
top: 33px;
}
.ftr-method.is-open .accordion-icon::before,.ftr-method.is-open .accordion-icon::after {
height: 30px;
}
/* experiments: a scrollable tab strip with one card at a time */
.ftr-exp__tabs {
display: flex;
gap: 24px;
margin-top: 24px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ftr-exp__tabs::-webkit-scrollbar {
display: none;
}
.ftr-exp__tab {
flex: 0 0 auto;
height: auto;
padding: 0 0 12px;
border-radius: 0;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--text-white);
cursor: pointer;
white-space: nowrap;
}
.ftr-exp__tab.is-active {
color: var(--light-blue);
border-bottom-color: var(--light-blue);
}
.ftr-exp__cards {
display: block;
margin-top: 24px;
}
.ftr-exp__card {
display: none;
min-height: 0;
padding: 24px;
}
.ftr-exp__card.is-active {
display: flex;
}
.ftr-page .ftr-split__title {
font-size: 20px;
}
.ftr-page .ftr-split__title {
text-align: center;
}
.ftr-split_center.ftr-split_plain .ftr-split__body {
text-align: center;
}
/* the visualization and AI assistant copy turns into a bullet list */
.ftr-split_bullets .ftr-split__body > p:not(.ftr-split__link-row) {
position: relative;
padding-left: 28px;
text-align: left;
}
.ftr-split_bullets .ftr-split__body > p:not(.ftr-split__link-row)::before {
content: '';
position: absolute;
left: 0;
top: 7px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--light-blue);
box-shadow: 0 0 8px rgba(89, 192, 244, .8);
}
.ftr-split_bullets .ftr-split__link-row {
padding-left: 28px;
text-align: left;
}
.ftr-split__visual {
margin-top: 24px;
}
/* models: a horizontally scrollable row of equally sized cards */
.ftr-models__track {
min-height: 0;
justify-content: flex-start;
gap: 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scrollbar-width: none;
margin: 0 -16px;
padding: 0 16px;
}
.ftr-models__track::-webkit-scrollbar {
display: none;
}
.ftr-model-card,
.ftr-model-card.is-prev,
.ftr-model-card.is-next,
.ftr-model-card.is-active {
display: block;
flex: 0 0 280px;
height: 172px;
order: 0 !important;
scroll-snap-align: start;
}
.ftr-model-card.is-active .ftr-model-card__title,
.ftr-model-card__title {
left: 16px;
right: 56px;
bottom: 16px;
font-size: 16px;
}
.ftr-model-card__arrow {
display: block;
position: absolute;
right: 12px;
bottom: 12px;
z-index: 2;
color: var(--text-white);
}
.ftr-badges {
gap: 8px;
margin-bottom: 24px;
}
.ftr-badges__item {
height: 34px;
}
.ftr-benefits__grid {
row-gap: 24px;
}
.ftr-cases .slider-nav {
display: none !important;
}
.ftr-cta__box {
padding: 32px 16px;
gap: 24px;
border-radius: var(--ftr-radius);
}
.ftr-cta__buttons {
width: 100%;
flex-direction: column;
}
.ftr-cta__box .ftr-btn {
align-self: stretch;
width: 100%;
min-width: 0;
}
}
/* --- multimethod cards: hover state (Figma 4241:32834) ---
* The card turns AnyLogic blue, the question gives way to the answer plus a
* "Use ..." pill, and the line art is repainted white by a filter — the artwork
* is transparent PNG-alpha line art, so the hover state needs no second set of
* images. The state is driven from JS through .is-hovered rather than by
* :hover inside a hover/any-hover media query: touch laptops report the
* touchscreen as the primary input, which switches such a query off even
* though a trackpad is there. The script sets the class for a real mouse
* pointer only, so a finger tap never leaves the state stuck on.
*/
.ftr-method__hover {
display: none;
}
@media (min-width: 601px) {
.ftr-method {
transition: background-color 0.25s ease;
}
.ftr-method.is-hovered,
.ftr-method:focus-visible {
background: var(--accent-blue);
}
.ftr-method__body {
position: relative;
}
.ftr-method__text-wrap,
.ftr-method__arrow {
transition: opacity 0.25s ease;
}
.ftr-method.is-hovered .ftr-method__text-wrap,
.ftr-method.is-hovered .ftr-method__arrow,
.ftr-method:focus-visible .ftr-method__text-wrap,
.ftr-method:focus-visible .ftr-method__arrow {
opacity: 0;
}
/* sits exactly over the padding box of the body, so nothing moves on hover */
.ftr-method__hover {
position: absolute;
inset: 36px 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.ftr-method.is-hovered .ftr-method__hover,
.ftr-method:focus-visible .ftr-method__hover {
opacity: 1;
visibility: visible;
transition: opacity 0.25s ease, visibility 0s;
}
.ftr-method__hover-text {
display: block;
font-size: 20px;
font-weight: 500;
line-height: 1.4;
color: var(--text-white);
}
.ftr-method__hover-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 120px;
padding: 12px 24px;
border-radius: 64px;
background: var(--text-white);
color: var(--accent-blue);
font-size: 14px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.ftr-method__visual img {
transition: filter 0.25s ease;
}
/* keeps the alpha and paints every stroke and fill white */
.ftr-method.is-hovered .ftr-method__visual img,
.ftr-method:focus-visible .ftr-method__visual img {
filter: brightness(0) invert(1);
}
@media (prefers-reduced-motion: reduce) {
.ftr-method,
.ftr-method__text-wrap,
.ftr-method__arrow,
.ftr-method__hover,
.ftr-method__visual img {
transition: none;
}
}
}
/* ==================================================================
* /features/ — mobile corrections
* bullets 4248:34011 · methods 4248:34011 / 4248:34045 / 4265:1221 / 4265:1238
* experiment chart 4248:34156 · model cards 3899:25338
* ================================================================== */
/* the dot only belongs to the mobile bullet list */
.ftr-split__body .ftr-env__bullet {
display: none;
}
@media (max-width: 600px) {
/* --- 1. the visualization / AI assistant copy uses the env list dot --- */
.ftr-split_bullets .ftr-split__body > p:not(.ftr-split__link-row) {
display: flex;
align-items: flex-start;
gap: 8px;
padding-left: 0;
text-align: left;
}
.ftr-split_bullets .ftr-split__body > p:not(.ftr-split__link-row)::before {
content: none;
}
.ftr-split_bullets .ftr-split__body .ftr-env__bullet {
display: block;
}
.ftr-split_bullets .ftr-split__link-row {
padding-left: 32px;
}
/* --- 2. multimethod accordion --- */
.ftr-method {
padding: 36px 24px;
}
.ftr-method__toggle {
top: 38px;
}
/* the illustration stays on desktop; the open card shows the answer instead */
.ftr-method.is-open .ftr-method__visual {
display: none;
}
.ftr-method.is-open .ftr-method__hover {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 36px;
/* cancels the right padding the body keeps for the +/x icon, so the
divider runs the full width of the card as in the layout */
margin: 24px -32px 0 0;
padding-top: 24px;
border-top: 1px solid var(--dl-divider);
}
.ftr-method__hover-text {
font-size: 16px;
font-weight: 400;
line-height: 1.46;
color: var(--text-white);
}
.ftr-method__hover-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 120px;
padding: 12px 24px;
border-radius: 64px;
background: var(--text-white);
color: var(--accent-blue);
font-size: 14px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
/* --- 3. the experiment chart fills the card --- */
.ftr-exp__chart {
max-width: none;
}
/* --- 4. model cards: photo on top, caption strip under it --- */
.ftr-models__track {
gap: 8px;
/* without it mandatory snapping eats the 16px inset of the first card */
scroll-padding-left: 16px;
}
.ftr-model-card,
.ftr-model-card.is-prev,
.ftr-model-card.is-next,
.ftr-model-card.is-active {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
flex: 0 0 289px;
/* 244 is the card of the layout; a two-line title eats into the bottom
padding instead of making the card taller */
height: auto;
min-height: 244px;
padding-bottom: 12px;
border-radius: 8px;
background: var(--ftr-card);
}
.ftr-model-card__img {
position: static;
width: 100%;
height: 165px;
object-fit: cover;
border-radius: 8px 8px 0 0;
}
.ftr-model-card__shade {
display: none;
}
.ftr-model-card.is-active .ftr-model-card__title,
.ftr-model-card__title {
position: static;
/* basis 0, otherwise the widest title pushes the arrow onto its own row */
flex: 1 1 0;
min-width: 0;
margin: 12px 0 0 24px;
padding-right: 8px;
font-size: 20px;
font-weight: 500;
line-height: 1.4;
}
.ftr-model-card__arrow {
position: static;
flex: 0 0 24px;
margin: 12px 24px 0 0;
}
.ftr-model-card__arrow img {
display: block;
width: 24px;
height: 24px;
}
/* the mobile card lays its caption out in flow, so the hover link is off */
.ftr-model-card__link {
display: none;
}
.ftr-model-card:hover .ftr-model-card__title,
.ftr-model-card:focus-visible .ftr-model-card__title {
bottom: auto;
}
}
/* ==================================================================
* Accordion icons: brand blue while closed, white while open
* (Figma 4248:34011 methods, 3899:25641 FAQ, 3899:22735 navigation).
* Applies to every page; the light-theme .dl-faqs keeps its own pair
* (blue -> grey) because its rules are more specific.
* ================================================================== */
.accordion-icon::before,
.accordion-icon::after {
background-color: var(--accent-blue);
}
/* closed + pointer over it lightens, as before */
.accordion-icon:hover::before,
.accordion-icon:hover::after,
.faq-item:hover .accordion-icon::before,
.faq-item:hover .accordion-icon::after,
.nav-menu-trigger:hover .accordion-icon::before,
.nav-menu-trigger:hover .accordion-icon::after,
.challenges-sidebar-trigger:hover .accordion-icon::before,
.challenges-sidebar-trigger:hover .accordion-icon::after {
background-color: var(--light-blue);
}
/* open: .active on the FAQ, the navigation and the sidebars,
.is-open on the method cards of /features/ */
.active .accordion-icon::before,
.active .accordion-icon::after,
.is-open .accordion-icon::before,
.is-open .accordion-icon::after,
.faq-item.active .accordion-icon::before,
.faq-item.active .accordion-icon::after,
.accordion-item.active .accordion-icon::before,
.accordion-item.active .accordion-icon::after,
.nav-menu-accordion.active .accordion-icon::before,
.nav-menu-accordion.active .accordion-icon::after,
.challenges-sidebar-accordion.active .accordion-icon::before,
.challenges-sidebar-accordion.active .accordion-icon::after {
background-color: var(--text-white);
}
/* the mobile hero button is the 280x48 pill of the layout (Figma 4241:33158),
centred under the copy — not a full-width bar */
@media (max-width: 600px) {
.ftr-hero .btn-primary.btn-large {
width: 280px;
max-width: 100%;
min-width: 0;
align-self: center;
/* 48px tall exactly: the shared mobile rule leaves height on inherit and
the line box on normal, which adds ~4px */
height: 48px;
padding: 0 32px;
line-height: 1;
}
}
/* ==================================================================
* AnyLogic Online page (/features/online-simulation/) — Figma "AL_New Pages"
* → 08_AL Online (desktop 4717:74537, mobile Features_390 4818:79112).
* Only what the layout adds on top of the blocks already implemented
* for the other new pages lives here; everything else (.nav-menu,
* .section*, .btn-*, .fsw-logos, .ftr-models, .news-grid, .faq-item,
* .blogs-grid) is reused as is.
* ================================================================== */
.alo-page {
--alo-card: #14212E;
--alo-radius: 12px;
--alo-glow: 0 0 3px rgba(89, 192, 244, .55);
/* the reused .ftr-models slider paints its cards with this variable, which
/features/ declares on .ftr-page (Figma 4824:81978) */
--ftr-card: #14212E;
--ftr-radius: 12px;
}
/* grey stand-in for artwork that is not exported from the layout yet */
.alo-page .alo-placeholder {
display: block;
width: 100%;
height: 100%;
background: #D9D9D9;
border-radius: var(--alo-radius);
}
/* --- shared buttons of the CTA card (Figma 4951:95874 / 4951:95875) --- */
.alo-page .alo-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 1 1 0;
min-width: 200px;
height: 48px;
padding: 0 32px;
border: 1px solid transparent;
border-radius: 64px;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 1;
text-align: center;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: background .25s, color .25s, border-color .25s;
}
.alo-page .alo-btn__icon {
flex: 0 0 auto;
width: 16px;
height: 16px;
}
.alo-page .alo-btn_white {
background: var(--text-white);
border-color: var(--text-white);
color: var(--accent-blue);
}
/* :focus-visible, not :focus — otherwise the button keeps the pressed look
after a mouse click until something else is clicked */
.alo-page .alo-btn_white:hover,
.alo-page .alo-btn_white:focus-visible {
background: var(--active-transparent);
border-color: var(--active-transparent);
color: var(--active-blue);
}
.alo-page .alo-btn_outline {
background: transparent;
border-color: var(--text-white);
color: var(--text-white);
}
.alo-page .alo-btn_outline:hover,
.alo-page .alo-btn_outline:focus-visible {
background: var(--text-white);
color: var(--accent-blue);
}
/* --- hero (4990:101658) --- */
.alo-hero {
/* the site header is fixed, so the first screen starts below it —
the same offset .ftr-hero uses on /features/ */
padding: 165px 0 80px;
text-align: center;
}
.with-event .alo-hero {
padding-top: 217px;
}
.alo-hero__title {
max-width: 800px;
/* two lines are reserved up front, so the block does not jump while the
first line is being typed */
min-height: 2.48em;
margin: 0 auto;
font-size: 80px;
font-weight: 500;
line-height: 1.24;
color: var(--text-white);
}
.alo-hero__loop {
color: var(--accent-blue);
}
/* the 1440 frame has no copy under the title - only the 390 one does
(4990:101659 vs 4818:79117) */
.alo-hero__desc {
display: none;
}
/* the caret only exists while the script is running */
.alo-hero__caret {
display: none;
width: 4px;
height: .74em;
margin-left: .05em;
vertical-align: -.06em;
background: var(--accent-blue);
}
/* the caret takes the colour of the text it is typing: white on the two static
lines, blue on the looping word (Figma 4990:101658) */
.alo-hero__static .alo-hero__caret {
background: var(--text-white);
}
.alo-hero.is-typing .alo-hero__caret {
display: inline-block;
animation: alo-caret 1s steps(1) infinite;
}
@keyframes alo-caret {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
.alo-hero__buttons {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 48px;
}
/* Hidden from the very first paint, not from the moment the script runs —
otherwise they flash on an uncached load. The