| /** |
| * Homepage CSS Module |
| * Ported from frontpage.css |
| */ |
| |
| /* Hero Section */ |
| .fronttop { |
| overflow: hidden; |
| background: url(/img/frontpage/blue-grad.jpg) center top no-repeat; |
| background-size: 100% 100%; |
| position: relative; |
| margin-top: -126px; |
| padding-top: 126px; |
| } |
| |
| .fronttop__pic { |
| position: absolute; |
| top: 0; |
| right: 0; |
| width: 65%; |
| max-width: 786px; |
| height: 100%; |
| object-fit: cover; |
| object-position: right top; |
| } |
| |
| .fronthero { |
| background: none; |
| padding-top: var(--section-spacing-sm); |
| color: var(--ai-text-primary); |
| } |
| |
| .fronthero__button { |
| min-width: 180px; |
| height: 52px; |
| font-size: 1.6rem; |
| } |
| |
| /* Hero Two-Column Layout */ |
| .heroColumns { |
| display: grid; |
| grid-template-columns: 1fr 45%; |
| align-items: start; |
| gap: var(--ai-spacing-3xl); |
| } |
| |
| .heroColumns__left { |
| min-width: 0; |
| } |
| |
| .heroColumns__right { |
| min-width: 0; |
| } |
| |
| /* Hero Trade-offs Card */ |
| .heroTradeoffs { |
| padding: var(--ai-spacing-2xl); |
| background: var(--ai-bg-card); |
| border-radius: 1rem; |
| box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.1); |
| } |
| |
| .heroTradeoffs__lead { |
| font-size: 2rem; |
| font-weight: 700; |
| margin: 0 0 var(--ai-spacing-lg) 0; |
| color: var(--ai-text-primary); |
| line-height: 1.3; |
| } |
| |
| .heroTradeoffs__list { |
| list-style: disc; |
| margin: 0; |
| padding: 0 0 0 var(--ai-spacing-lg); |
| margin-bottom: var(--ai-spacing-md); |
| } |
| |
| .heroTradeoffs__list li { |
| font-size: 1.6rem; |
| line-height: 1.6; |
| color: var(--ai-text-secondary); |
| font-weight: 400; |
| } |
| |
| .heroTradeoffs__list li span { |
| color: var(--ai-text-primary); |
| font-weight: 700; |
| } |
| |
| .heroTradeoffs__answer { |
| font-size: 2rem; |
| color: var(--ai-blue); |
| margin: 0 0 var(--ai-spacing-xs) 0; |
| font-weight: 700; |
| line-height: 1.3; |
| } |
| |
| .heroTradeoffs__pillars { |
| font-size: 1.6rem; |
| color: var(--ai-text-secondary); |
| margin: 0; |
| font-weight: 400; |
| } |
| |
| /* Hero Centered Actions */ |
| .heroActions { |
| display: flex; |
| justify-content: center; |
| gap: var(--ai-spacing-lg); |
| flex-wrap: wrap; |
| padding-top: var(--ai-spacing-2xl); |
| padding-bottom: var(--ai-spacing-3xl); |
| } |
| |
| .innerhero__action { |
| display: flex; |
| gap: var(--ai-spacing-lg); |
| flex-wrap: wrap; |
| padding-top: var(--ai-spacing-md); |
| } |
| |
| /* Blue Section */ |
| .frontblue { |
| position: relative; |
| background: var(--blue4); |
| padding-top: var(--section-spacing-sm); |
| } |
| |
| /* Top Cards */ |
| .fronttopcards { |
| display: flex; |
| align-items: stretch; |
| justify-content: space-between; |
| transform: translateY(-60px); |
| } |
| |
| .frontcard { |
| width: calc(50% - 15px); |
| background: var(--ai-bg-card); |
| border-radius: 1rem; |
| padding: var(--ai-spacing-2xl); |
| color: var(--ai-text-primary); |
| text-decoration: none; |
| } |
| |
| .frontcard:hover { |
| color: var(--ai-text-primary); |
| text-decoration: none; |
| } |
| |
| .frontcard__prises { |
| display: flex; |
| align-items: center; |
| } |
| |
| .frontcard__price { |
| width: calc(100% / 3); |
| overflow: hidden; |
| display: flex; |
| align-items: center; |
| } |
| |
| .frontcard__iconwrap { |
| flex-shrink: 0; |
| width: 7rem; |
| height: 7rem; |
| display: flex; |
| flex-direction: row; |
| flex-wrap: nowrap; |
| align-items: center; |
| justify-content: center; |
| border-radius: 10rem; |
| background: #fae1e2; |
| margin-right: var(--ai-spacing-sm); |
| } |
| |
| .frontcard__iconwrap--blue { |
| background: var(--blue4); |
| } |
| |
| .frontcard__iconwrap--grey { |
| background: var(--grey3); |
| } |
| |
| .frontcard__iconwrap img { |
| display: block; |
| margin: auto; |
| width: 43px; |
| height: 43px; |
| transform: translateY(2px); |
| } |
| |
| .frontcard__network img { |
| display: block; |
| width: 65px; |
| height: 65px; |
| } |
| |
| /* Core Capabilities / Code Section */ |
| .forntcodes { |
| padding-bottom: var(--section-spacing-sm); |
| } |
| |
| .forntcodes__wrap { |
| display: flex; |
| } |
| |
| .forntcodes__menu { |
| padding-top: var(--ai-spacing-xl); |
| width: 30rem; |
| flex-shrink: 0; |
| } |
| |
| .forntcodes__menu li:not(:last-child) { |
| margin-bottom: var(--ai-spacing-2xl); |
| } |
| |
| .forntcodes__menu ul a { |
| display: block; |
| color: var(--ai-text-primary); |
| position: relative; |
| } |
| |
| .forntcodes__menu ul a:hover { |
| text-decoration: none; |
| color: var(--blue); |
| } |
| |
| .forntcodes__menu ul a.actie:hover { |
| color: var(--ai-text-primary); |
| } |
| |
| .forntcodes__menu ul a:global(.active) { |
| padding-left: var(--ai-spacing-lg); |
| font-weight: 700; |
| } |
| |
| .forntcodes__menu a:global(.active)::before { |
| content: ""; |
| display: block; |
| position: absolute; |
| top: 50%; |
| left: 0; |
| width: 6px; |
| height: 34px; |
| background: var(--ai-dark); |
| transform: translateY(-50%); |
| } |
| |
| .forntcodes__menumore { |
| margin-top: var(--ai-spacing-3xl); |
| display: inline-block; |
| color: var(--ai-text-primary); |
| text-decoration: underline; |
| } |
| |
| .forntcodes__menumore:hover { |
| text-decoration: underline; |
| } |
| |
| .forntcodes__tabwraps { |
| position: relative; |
| min-width: 0; |
| flex-grow: 1; |
| max-width: 866px; |
| } |
| |
| .forntcodes__tab { |
| display: none; |
| } |
| |
| .forntcodes__tab > p { |
| max-width: 750px; |
| } |
| |
| .forntcodes__tab:global(.active) { |
| display: block; |
| } |
| |
| .forntcodes__tabtitle { |
| font-weight: 700; |
| font-size: 24px; |
| } |
| |
| .forntcodes__bottom { |
| padding-top: var(--section-spacing-sm); |
| text-align: center; |
| } |
| |
| .forntcodes__bottom .button { |
| padding-left: var(--ai-spacing-2xl); |
| padding-right: var(--ai-spacing-2xl); |
| font-size: 18px; |
| height: 46px; |
| display: inline-flex; |
| } |
| |
| /* New Cards Section */ |
| .frontnewcards { |
| padding-top: var(--section-spacing-sm); |
| padding-bottom: var(--section-spacing-sm); |
| } |
| |
| .frontnewcards__wrap { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| grid-auto-rows: auto; |
| gap: 3rem; |
| } |
| |
| .frontsimplecard { |
| padding: var(--ai-spacing-2xl) var(--ai-spacing-xl) var(--section-spacing-lg); |
| } |
| |
| .frontsimplecard .cardsimple__title { |
| padding-bottom: var(--ai-spacing-md); |
| } |
| |
| .frontsimplecard .cardsimple__bottom { |
| left: 3.5rem; |
| bottom: 3.5rem; |
| } |
| |
| /* Stories Section */ |
| .frontstories { |
| padding-top: var(--section-spacing-sm); |
| padding-bottom: var(--section-spacing-sm); |
| background: var(--blue4); |
| } |
| |
| .frontstories__checkerswrap { |
| padding: var(--ai-spacing-xl); |
| } |
| |
| .frontstories__checkers { |
| display: grid; |
| grid-template-columns: 2fr 3fr 1fr; |
| gap: 20px 0; |
| } |
| |
| .frontstories__checkers li { |
| position: relative; |
| padding-left: var(--ai-spacing-xl); |
| line-height: 24px; |
| background: url(/img/frontpage/icon-done.svg) left top no-repeat; |
| background-size: 24px; |
| } |
| |
| .frontstories__sliderwrap { |
| margin-top: var(--section-spacing-md); |
| position: relative; |
| margin-bottom: var(--ai-spacing-xl); |
| } |
| |
| .ctrl { |
| width: 3.6rem; |
| height: 3.6rem; |
| border-radius: var(--ai-radius-full); |
| border: none; |
| background: none; |
| cursor: pointer; |
| position: absolute; |
| top: 50%; |
| margin-top: -2rem; |
| z-index: 10; |
| } |
| |
| .ctrl img { |
| display: block; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .ctrl:hover img { |
| filter: brightness(1.02); |
| } |
| |
| .ctrl--prev { |
| left: -70px; |
| } |
| |
| .ctrl--next { |
| right: -70px; |
| } |
| |
| .ctrl--next img { |
| transform: rotate(180deg); |
| } |
| |
| .frontstories__pag { |
| position: absolute; |
| width: 100%; |
| bottom: -30px !important; |
| height: 3px; |
| left: 0; |
| display: flex; |
| flex-direction: row; |
| flex-wrap: nowrap; |
| align-items: stretch; |
| justify-content: center; |
| } |
| |
| .frontstories__bottom { |
| text-align: center; |
| } |
| |
| .frontstories__bottom .button { |
| display: inline-flex; |
| width: 195px; |
| } |
| |
| /* Conferences/Events Cards */ |
| .frontconfs { |
| padding-top: var(--section-spacing-sm); |
| } |
| |
| .frontconfs__wrap { |
| padding-top: var(--section-spacing-sm); |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| grid-auto-rows: auto; |
| gap: 3rem; |
| } |
| |
| .frontconfcard { |
| display: block; |
| color: var(--ai-text-primary); |
| background: var(--grey3); |
| border-radius: var(--ai-radius-md); |
| padding: var(--ai-spacing-xl) var(--ai-spacing-xl) var(--section-spacing-lg); |
| transition: box-shadow 0.25s ease; |
| position: relative; |
| } |
| |
| .frontconfcard:hover { |
| color: var(--ai-text-primary); |
| text-decoration: none; |
| box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.1); |
| } |
| |
| .frontconfcard--red { |
| background: #feeff0; |
| } |
| |
| .frontconfcard--white { |
| background: var(--grey); |
| } |
| |
| .frontconfcard--blue { |
| background: var(--blue4); |
| } |
| |
| .frontconfs__iconwrap { |
| height: 7rem; |
| display: flex; |
| padding-bottom: var(--ai-spacing-md);; |
| flex-direction: row; |
| flex-wrap: nowrap; |
| align-items: center; |
| justify-content: flex-start; |
| box-sizing: content-box; |
| } |
| |
| .frontconfs__iconwrap img { |
| display: block; |
| max-height: 100%; |
| } |
| |
| .frontconfcard__title { |
| font-weight: 700; |
| margin-bottom: var(--ai-spacing-md); |
| } |
| |
| .frontconfcard p { |
| margin-bottom: var(--ai-spacing-md); |
| } |
| |
| .frontconfcard p:last-of-type { |
| margin-bottom: 0; |
| } |
| |
| .frontconfcard__bottom { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| padding: var(--ai-spacing-xl); |
| right: 0; |
| display: block; |
| } |
| |
| .frontconfcard__bottom .capstext small { |
| text-transform: none; |
| letter-spacing: normal; |
| font-size: 100%; |
| } |
| |
| .frontconfcard__cal { |
| margin-top: var(--ai-spacing-sm); |
| padding-left: var(--ai-spacing-lg); |
| line-height: 20px; |
| background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.188 1.594h-3.282V.344a.157.157 0 0 0-.156-.156h-1.094a.157.157 0 0 0-.156.156v1.25h-5V.344a.157.157 0 0 0-.156-.156H4.25a.157.157 0 0 0-.156.156v1.25H.812a.624.624 0 0 0-.625.625v12.969c0 .345.28.624.625.624h14.376c.345 0 .624-.279.624-.624V2.217a.624.624 0 0 0-.624-.624Zm-.782 12.812H1.594V6.984h12.812v7.422ZM1.594 5.656V3h2.5v.938c0 .085.07.156.156.156h1.094c.086 0 .156-.07.156-.157V3h5v.938c0 .085.07.156.156.156h1.094c.086 0 .156-.07.156-.157V3h2.5v2.656H1.594Z' fill='%232d2d2d'/%3E%3C/svg%3E"); |
| background-repeat: no-repeat; |
| background-position: 0 center; |
| background-size: 16px; |
| } |
| |
| .frontconfcard--red .frontconfcard__cal { |
| background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.188 1.594h-3.282V.344a.157.157 0 0 0-.156-.156h-1.094a.157.157 0 0 0-.156.156v1.25h-5V.344a.157.157 0 0 0-.156-.156H4.25a.157.157 0 0 0-.156.156v1.25H.812a.624.624 0 0 0-.625.625v12.969c0 .345.28.624.625.624h14.376c.345 0 .624-.279.624-.624V2.217a.624.624 0 0 0-.624-.624Zm-.782 12.812H1.594V6.984h12.812v7.422ZM1.594 5.656V3h2.5v.938c0 .085.07.156.156.156h1.094c.086 0 .156-.07.156-.157V3h5v.938c0 .085.07.156.156.156h1.094c.086 0 .156-.07.156-.157V3h2.5v2.656H1.594Z' fill='%23CE2034'/%3E%3C/svg%3E"); |
| } |
| |
| .frontconfcard--blue .frontconfcard__cal { |
| background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.188 1.594h-3.282V.344a.157.157 0 0 0-.156-.156h-1.094a.157.157 0 0 0-.156.156v1.25h-5V.344a.157.157 0 0 0-.156-.156H4.25a.157.157 0 0 0-.156.156v1.25H.812a.624.624 0 0 0-.625.625v12.969c0 .345.28.624.625.624h14.376c.345 0 .624-.279.624-.624V2.217a.624.624 0 0 0-.624-.624Zm-.782 12.812H1.594V6.984h12.812v7.422ZM1.594 5.656V3h2.5v.938c0 .085.07.156.156.156h1.094c.086 0 .156-.07.156-.157V3h5v.938c0 .085.07.156.156.156h1.094c.086 0 .156-.07.156-.157V3h2.5v2.656H1.594Z' fill='%230070cc'/%3E%3C/svg%3E"); |
| } |
| |
| .frontconfs__bottom { |
| text-align: center; |
| } |
| |
| .frontconfs__bottom .button { |
| display: inline-flex; |
| width: 195px; |
| } |
| |
| /* Events Banner */ |
| .fronteventsbanner { |
| padding-top: calc(10rem - 60px); |
| padding-bottom: 0; |
| } |
| |
| /* Resources Section */ |
| .frontresourse { |
| padding-top: var(--section-spacing-sm); |
| padding-bottom: var(--section-spacing-sm); |
| } |
| |
| .frontresourse__subtitle { |
| font-size: 3.2rem; |
| line-height: 1.3; |
| } |
| |
| .frontresourse__wrap { |
| padding-top: var(--section-spacing-sm); |
| display: flex; |
| justify-content: space-between; |
| } |
| |
| .frontresourse__col { |
| width: calc(50% - 15px); |
| } |
| |
| .frontresitem { |
| height: 120px; |
| border-radius: 1rem; |
| margin-bottom: var(--ai-spacing-sm); |
| display: flex; |
| flex-direction: column; |
| flex-wrap: nowrap; |
| align-items: flex-start; |
| justify-content: center; |
| position: relative; |
| background: var(--grey); |
| padding-left: var(--section-spacing-lg); |
| padding-right: var(--section-spacing-md); |
| color: var(--ai-text-primary); |
| } |
| |
| .frontresitem:hover { |
| color: var(--ai-text-primary); |
| text-decoration: none; |
| } |
| |
| .frontresitem__icon { |
| position: absolute; |
| left: 28px; |
| top: 50%; |
| width: 48px; |
| height: 48px; |
| margin-top: -24px; |
| } |
| |
| .frontresitem__icon img { |
| display: block; |
| width: 100%; |
| height: 100%; |
| object-fit: contain; |
| } |
| |
| .frontresitem--black, |
| .frontresitem--black:hover { |
| background: var(--dark); |
| color: var(--ai-text-inverse); |
| } |
| |
| .frontresitem--red, |
| .frontresitem--red:hover { |
| background: var(--red2); |
| color: var(--ai-text-inverse); |
| } |
| |
| .frontresitem--rose, |
| .frontresitem--rose:hover { |
| background: var(--red5); |
| } |
| |
| /* Tooling End (CTA Section) */ |
| .toolingend--front { |
| margin-top: var(--section-spacing-sm); |
| } |
| |
| .toolingend--front .toolingend__main { |
| min-height: auto; |
| padding: var(--section-spacing-sm) 0 var(--section-spacing-sm) var(--section-spacing-sm); |
| } |
| |
| .toolingend--front .button { |
| padding-left: var(--ai-spacing-2xl); |
| padding-right: var(--ai-spacing-2xl); |
| } |
| |
| .toolingend--front .toolingend__action { |
| margin-left: auto; |
| font-size: 20px; |
| padding-right: var(--section-spacing-sm); |
| margin-right: 0; |
| } |
| |
| .toolingend--front .button { |
| font-size: 20px; |
| height: 60px; |
| } |
| |
| /* Typography Helpers */ |
| /* Heading utility classes */ |
| .h1 { |
| font-size: 4.8rem; |
| font-weight: 700; |
| line-height: 1.2; |
| margin-bottom: var(--ai-spacing-md); |
| } |
| |
| .h2 { |
| font-size: 3.6rem; |
| font-weight: 600; |
| line-height: 1.3; |
| margin-bottom: var(--ai-spacing-md); |
| } |
| |
| .h3 { |
| font-size: 2.5rem; |
| font-weight: 500; |
| line-height: 1.3; |
| margin-bottom: var(--ai-spacing-md); |
| } |
| |
| .innerhero__h1 { |
| font-size: 5rem; |
| font-weight: 700; |
| line-height: 1.1; |
| margin-bottom: var(--ai-spacing-lg); |
| } |
| |
| .innerhero__h2 { |
| font-size: 2rem; |
| line-height: 1.4; |
| color: var(--ai-text-secondary); |
| max-width: 500px; |
| margin-bottom: var(--ai-spacing-sm); |
| } |
| |
| .innerhero__main { |
| max-width: 650px; |
| } |
| |
| .innerhero__action { |
| padding-top: var(--ai-spacing-xl); |
| } |
| |
| .frontcard__title { |
| font-size: 2rem; |
| font-weight: 500; |
| line-height: 1.3; |
| margin-bottom: var(--ai-spacing-md); |
| } |
| |
| .frontcard__title_secondary { |
| font-size: 1.6rem; |
| } |
| |
| /* Media Queries */ |
| @media (max-width: 1439px) { |
| .ctrl--prev { |
| left: -30px; |
| } |
| |
| .ctrl--next { |
| right: -30px; |
| } |
| } |
| |
| @media (max-width: 1199px) { |
| .frontcard__prises { |
| align-items: flex-start; |
| margin-bottom: calc(-1 * var(--ai-spacing-md)); |
| } |
| |
| .frontcard__price { |
| flex-direction: column; |
| flex-wrap: nowrap; |
| align-items: flex-start; |
| justify-content: flex-start; |
| } |
| |
| .frontcard__iconwrap { |
| width: 6rem; |
| height: 6rem; |
| margin-bottom: var(--ai-spacing-sm); |
| } |
| |
| .frontcard__iconwrap img { |
| width: 60%; |
| height: 60%; |
| } |
| |
| .frontconfs__wrap { |
| gap: var(--ai-spacing-md); |
| } |
| |
| .frontconfcard { |
| padding-left: var(--ai-spacing-md); |
| padding-right: var(--ai-spacing-md); |
| } |
| |
| .frontresitem__icon { |
| left: 2rem; |
| } |
| |
| .frontresitem__text { |
| font-size: 15px; |
| } |
| |
| .toolingend--front .toolingend__main { |
| padding-left: var(--ai-spacing-xl); |
| } |
| |
| .toolingend--front .toolingend__action { |
| padding-right: var(--ai-spacing-xl); |
| } |
| } |
| |
| @media (max-width: 992px) { |
| .forntcodes__menu { |
| width: 25rem; |
| } |
| |
| .frontconfs__wrap { |
| gap: 3rem; |
| grid-template-columns: 1fr; |
| } |
| |
| .frontnewcards__wrap { |
| gap: 3rem; |
| grid-template-columns: 1fr; |
| } |
| |
| .frontresourse { |
| padding-bottom: 0; |
| } |
| |
| .frontresourse__wrap { |
| flex-direction: column; |
| flex-wrap: nowrap; |
| } |
| |
| .frontresourse__col { |
| width: 100%; |
| } |
| |
| .frontresourse__col:first-child { |
| padding-bottom: var(--section-spacing-md); |
| } |
| |
| .frontresourse__col .capstext { |
| padding-bottom: var(--ai-spacing-md); |
| } |
| |
| .toolingend--front { |
| padding-bottom: var(--section-spacing-sm); |
| } |
| |
| .toolingend--front .container { |
| padding: var(--section-spacing-sm); |
| border-radius: 1rem; |
| } |
| |
| .toolingend--front .toolingend__main { |
| padding: 0; |
| } |
| |
| .toolingend--front .toolingend__action { |
| margin-left: 0; |
| } |
| } |
| |
| @media (max-width: 767px) { |
| .fronttop__pic { |
| width: 100%; |
| opacity: 0.3; |
| } |
| |
| .fronthero { |
| padding-top: var(--section-spacing-md); |
| padding-bottom: var(--section-spacing-xl); |
| } |
| |
| .innerhero__h1 { |
| font-size: 4rem; |
| line-height: 1.3; |
| } |
| |
| .innerhero__h1 br { |
| display: none; |
| } |
| |
| .innerhero__action { |
| padding-top: var(--ai-spacing-xl); |
| } |
| |
| .heroColumns { |
| grid-template-columns: 1fr; |
| gap: var(--ai-spacing-xl); |
| } |
| |
| .heroColumns__left { |
| text-align: center; |
| } |
| |
| .innerhero__h1 { |
| font-size: 2.8rem; |
| max-width: 100%; |
| } |
| |
| .innerhero__h2 { |
| font-size: 1.5rem; |
| max-width: 100%; |
| } |
| |
| .fronthero__button { |
| font-size: 15px; |
| min-width: 140px; |
| height: 46px; |
| } |
| |
| .heroTradeoffs { |
| padding: var(--ai-spacing-lg); |
| } |
| |
| .heroTradeoffs__lead { |
| font-size: 1.6rem; |
| } |
| |
| .heroTradeoffs__list li { |
| font-size: 1.3rem; |
| } |
| |
| .heroTradeoffs__answer { |
| font-size: 1.3rem; |
| } |
| |
| .innerhero__action { |
| gap: var(--ai-spacing-md); |
| } |
| |
| .fronttopcards { |
| flex-direction: column; |
| flex-wrap: nowrap; |
| align-items: stretch; |
| } |
| |
| .frontcard { |
| width: 100%; |
| padding: var(--ai-spacing-xl); |
| } |
| |
| .frontcard:first-child { |
| border-radius: 1rem 1rem 0 0; |
| border-bottom: 1px solid var(--grey3); |
| } |
| |
| .frontcard:last-child { |
| border-radius: 0 0 1rem 1rem; |
| } |
| |
| .frontcard__prises { |
| margin-bottom: 0; |
| } |
| |
| .frontcard__network img { |
| width: 6rem; |
| height: 6rem; |
| } |
| |
| .forntcodes { |
| padding-top: 0; |
| padding-bottom: var(--section-spacing-md); |
| } |
| |
| .forntcodes br, |
| .frontconfs br, |
| .frontresourse br { |
| display: none; |
| } |
| |
| .forntcodes__wrap { |
| flex-direction: column; |
| flex-wrap: nowrap; |
| } |
| |
| .forntcodes__menu { |
| width: 100%; |
| } |
| |
| .forntcodes__menu li:not(:last-child) { |
| margin-bottom: var(--ai-spacing-md); |
| } |
| |
| .forntcodes__menu a:global(.active)::before { |
| height: var(--ai-spacing-xl); |
| width: 3px; |
| margin-top: -1px; |
| } |
| |
| .forntcodes__menu ul a:global(.active) { |
| padding-left: var(--ai-spacing-md); |
| color: #000 !important; |
| } |
| |
| .forntcodes__menumore { |
| display: none; |
| } |
| |
| .forntcodes__tabwraps { |
| padding-top: var(--section-spacing-sm); |
| width: 100%; |
| overflow: hidden; |
| } |
| |
| .forntcodes__bottom { |
| padding-top: var(--ai-spacing-xl); |
| } |
| |
| .forntcodes__bottom .button { |
| font-size: 14px; |
| } |
| |
| .frontnewcards { |
| padding-top: var(--section-spacing-md); |
| padding-bottom: 0; |
| } |
| |
| .frontnewcards__wrap { |
| padding-top: var(--ai-spacing-md); |
| } |
| |
| .frontsimplecard { |
| padding: var(--ai-spacing-xl); |
| } |
| |
| .frontsimplecard .cardsimple__bottom { |
| position: relative; |
| left: auto; |
| bottom: auto; |
| } |
| |
| .frontstories { |
| padding-bottom: 0; |
| } |
| |
| .frontstories__checkers { |
| padding-top: var(--ai-spacing-xl); |
| grid-template-columns: 1fr; |
| gap: var(--ai-spacing-sm); |
| } |
| |
| .frontstories__checkers li:nth-child(3) { |
| grid-column: auto; |
| } |
| |
| .ctrl--prev { |
| left: -7px; |
| } |
| |
| .ctrl--next { |
| right: -7px; |
| } |
| |
| .frontstories__bottom { |
| padding-top: var(--ai-spacing-xl); |
| } |
| |
| .frontconfs__wrap { |
| padding-top: var(--ai-spacing-xl); |
| } |
| |
| .frontconfcard { |
| padding: var(--ai-spacing-xl) var(--ai-spacing-md); |
| } |
| |
| .frontconfcard__bottom { |
| position: relative; |
| left: auto; |
| bottom: auto; |
| padding-left: 0; |
| padding-right: 0; |
| padding-bottom: 0; |
| padding-top: var(--ai-spacing-xl); |
| } |
| |
| .fronteventsbanner { |
| padding-top: 0; |
| padding-bottom: var(--section-spacing-md); |
| } |
| |
| .frontresourse__wrap { |
| padding-top: var(--ai-spacing-xl); |
| } |
| |
| .toolingend--front .container { |
| border-radius: 0; |
| } |
| |
| .toolingend--front .button { |
| font-size: 17px; |
| width: 100%; |
| } |
| |
| .toolingend--front .toolingend__action { |
| padding-right: 0; |
| padding-top: var(--ai-spacing-2xl); |
| } |
| } |
| |
| /* Inner tabs for code examples */ |
| .forntcodes__innertabs { |
| padding-top: var(--ai-spacing-xl); |
| } |
| |
| .nativecode__tabctrls { |
| display: flex; |
| flex-direction: row; |
| flex-wrap: nowrap; |
| align-items: center; |
| justify-content: flex-start; |
| margin-bottom: var(--ai-spacing-md); |
| } |
| |
| .nativecode__link { |
| padding: var(--ai-spacing-sm) var(--ai-spacing-lg); |
| background: var(--grey3); |
| border-radius: var(--ai-radius-xl); |
| margin-right: var(--ai-spacing-sm); |
| text-decoration: none; |
| color: var(--ai-text-primary); |
| font-size: 16px; |
| transition: background 0.2s; |
| cursor: pointer; |
| } |
| |
| .nativecode__link:hover { |
| background: var(--grey); |
| text-decoration: none; |
| color: var(--ai-text-primary); |
| } |
| |
| .nativecode__link:global(.active) { |
| background: var(--dark); |
| color: var(--ai-text-inverse); |
| } |
| |
| .nativecode__tabs { |
| position: relative; |
| } |
| |
| .nativecode__tab { |
| display: none; |
| } |
| |
| .nativecode__tab:global(.active) { |
| display: block; |
| } |
| |
| /* Style Docusaurus CodeBlock to match PUG site */ |
| .nativecode__tab :global(.theme-code-block) { |
| border-radius: var(--ai-radius-md); |
| } |
| |
| .nativecode__tab :global(.prism-code) { |
| padding: var(--ai-spacing-lg); |
| border-radius: var(--ai-radius-md); |
| } |
| |
| .nativecode__codebox { |
| background: #011627; |
| border-radius: var(--ai-radius-sm); |
| padding: var(--ai-spacing-md); |
| } |
| |
| /* User Stories Grid */ |
| .frontstories__grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: var(--ai-spacing-xl); |
| margin-top: var(--ai-spacing-xl); |
| margin-bottom: var(--ai-spacing-xl); |
| } |
| |
| .userStory { |
| position: relative; |
| border-radius: var(--ai-radius-md); |
| overflow: hidden; |
| transition: transform 0.3s, box-shadow 0.3s; |
| background: var(--ai-bg-card); |
| } |
| |
| .userStory:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 30px rgba(0,0,0,0.15); |
| } |
| |
| .userStory__link { |
| display: block; |
| position: relative; |
| text-decoration: none; |
| color: inherit; |
| } |
| |
| .userStory__link:hover { |
| text-decoration: none; |
| } |
| |
| .userStory__thumbnail { |
| width: 100%; |
| height: 200px; |
| object-fit: cover; |
| display: block; |
| } |
| |
| .userStory__title { |
| padding: var(--ai-spacing-md); |
| background: var(--ai-bg-card); |
| min-height: 100px; |
| display: flex; |
| align-items: center; |
| font-size: 16px; |
| line-height: 1.4; |
| } |
| |
| .toolingend { |
| padding-bottom: var(--section-spacing-sm); |
| } |
| |
| .toolingend :global(.container) { |
| background: url('/img/features/more-learn-planet.png') var(--blue) right -10px no-repeat; |
| background-size: 370px; |
| align-items: center; |
| justify-content: space-between; |
| border-radius: 1rem; |
| display: flex; |
| } |
| |
| .toolingend__main { |
| padding-left: var(--section-spacing-md); |
| flex-basis: 50%; |
| flex-grow: 1; |
| min-height: 263px; |
| display: flex; |
| flex-direction: column; |
| flex-wrap: nowrap; |
| align-items: flex-start; |
| justify-content: center; |
| color: var(--ai-text-inverse); |
| } |
| |
| .toolingend__title { |
| position: relative; |
| font-weight: 700; |
| } |
| |
| .toolingend__subtitle { |
| font-size: 2rem; |
| line-height: 1.4; |
| } |
| |
| .toolingend__action { |
| margin-right: var(--section-spacing-lg); |
| width: auto; |
| flex-shrink: 0; |
| } |
| |
| .toolingend__action :global(.button) { |
| color: var(--blue); |
| background: var(--ai-bg-card); |
| padding-left: var(--ai-spacing-md); |
| padding-right: var(--ai-spacing-md); |
| } |
| |
| .toolingend__action :global(.button):hover { |
| background: var(--ai-bg-card); |
| color: var(--blue2); |
| } |
| |
| .capstext { |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| font-size: 1.4rem; |
| font-weight: 600; |
| margin-bottom: var(--ai-spacing-md); |
| } |
| |
| .cardsimple { |
| border-radius: var(--ai-radius-md); |
| background: var(--ai-bg-card); |
| box-shadow: 0 4px 15px rgba(0,0,0,0.08); |
| position: relative; |
| transition: box-shadow 0.3s; |
| } |
| |
| .cardsimple:hover { |
| box-shadow: 0 8px 25px rgba(0,0,0,0.12); |
| } |
| |
| .cardsimple__title { |
| font-size: 2.4rem; |
| font-weight: 600; |
| margin-bottom: var(--ai-spacing-md); |
| } |
| |
| .cardsimple__text { |
| font-size: 1.6rem; |
| line-height: 1.6; |
| color: #666; |
| } |
| |
| .cardsimple__bottom { |
| position: absolute; |
| bottom: var(--ai-spacing-xl); |
| left: var(--ai-spacing-xl); |
| right: var(--ai-spacing-xl); |
| } |
| |
| /* Checklist Items */ |
| .checklistItem { |
| display: flex; |
| align-items: center; |
| margin-bottom: var(--ai-spacing-md); |
| font-size: 16px; |
| line-height: 1.5; |
| color: #333; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| text-decoration: none; |
| } |
| |
| .checklistItem:hover { |
| color: var(--blue); |
| text-decoration: none; |
| } |
| |
| .checklistIcon { |
| flex-shrink: 0; |
| width: 32px; |
| height: 32px; |
| border-radius: 50%; |
| background: #e3f2fd; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin-right: 12px; |
| color: var(--blue); |
| transition: all 0.2s ease; |
| position: relative; |
| } |
| |
| .checklistItem:hover .checklistIcon { |
| background: var(--blue); |
| color: var(--ai-text-inverse); |
| } |
| |
| .checklistIcon::after { |
| content: '→'; |
| position: absolute; |
| opacity: 0; |
| transition: opacity 0.2s ease; |
| font-size: 18px; |
| font-weight: bold; |
| } |
| |
| .checklistItem:hover .checklistIcon svg { |
| opacity: 0; |
| transition: opacity 0.2s ease; |
| } |
| |
| .checklistItem:hover .checklistIcon::after { |
| opacity: 1; |
| } |
| |
| /* Copy Button */ |
| .copyButton { |
| font-family: inherit; |
| } |
| |
| .copyButton:hover { |
| opacity: 0.9; |
| } |
