mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-02 01:18:30 +02:00
New Design (#640)
* new design dir
* build script
* build script
* Implement new design (#706)
* initial basic set up
* add customers section
* add core features section
* add customer-stories section
* create common link component
* add docker deploy section
* add vectors section
* minor tweaks
* add footer component
* add use cases page
* general improvements
* add controls to customer stories section
* use mobile first approach
* minor tweaks
* small fix
* add menu mobile
* align breakpoints with Bootstrap
* expand menu items and add menu icos
---------
Co-authored-by: Nik Shemel <nikita_shershnev@hotmail.com>
* Link hover effect (#739)
* moved icons to the assets dir
* styles for link
* better link animation, added modifiers and updated links on the main page
* fix
* improved arrow animation without js debouncing
* fix
* npm run format
* Hover effects for some links and cards (#744)
* inline links hover
* no underline by default, will add it only in articles later
* more hovers
* reusable card styles
* fix
* Fix top header and add some visual effects (#749)
* fix top banner on mobile and add star background pattern
* add more visual effects
* update vectors image blur effect
---------
Co-authored-by: Nik Shemel <nikita_shershnev@hotmail.com>
* Updated styles for docker commands to make copying more user-friendly (#750)
* updated styles for docker commans to make copying more user friendly
* npm run format
* Add feature overview cards (#753)
* add feature overview cards
* fix
* Hero image styles and optimization (#756)
* hero image
* optimized hero image for different rezolutions
* image source from md file, fixes
* mobile fix
* removed too small img
* Add grid layout (#752)
* add grid template
* use bootstrap grid main page
* small tweaks
* fix
* fix grid layout
* polish main page
* format code
---------
Co-authored-by: Nik Shemel <nikita_shershnev@hotmail.com>
* add qdrant vector database page (#757)
* add qdrant vector database page
* fix
* add get started small block
* format code
* fix
---------
Co-authored-by: trean <trean.mi@gmail.com>
* Prettier for Hugo templates (#758)
* better formatting for hugo templates
* npm run format
* add enterprise solutions page (#762)
* add enterprise solutions page
* fix
* customers logos animation (#763)
* use cases page (#760)
* use cases page
* fix use cases layout
* small tweaks
---------
Co-authored-by: Nik Shemel <nikita_shershnev@hotmail.com>
* Replaced horizontal sections paddings with customized .container padding (#764)
* replaced horizontal sections paddings with customized .container padding
* updated new files
* redundant whitespace
* make asset file names lowercase
* Content structure refactoring (#766)
* refactor top-banner content source
* refactor menu content source
* refactor menu-mobile content source
* refactor hero content source
* refactor main page & get-started content source
* refactor footer content source
* refactor enterprise-solutions content source
* refactor qdrant-vector-database content source
* structure pages content
* format code
* add demos page (#768)
* add demos page
* add interactive tutorials section
---------
Co-authored-by: Nik Shemel <nikita_shershnev@hotmail.com>
* add qdrant cloud page (#767)
* add qdrant cloud page
* add new blocks and refactor
* fix
* fix
* delete wrapper
* add hybrid cloud page (#769)
* add hybrid cloud page
* fix
* delete wrapper
* run format
---------
Co-authored-by: trean <trean.mi@gmail.com>
* add private cloud page (#773)
* add private cloud page
* delete wrapper
* add pricing page (#777)
* add pricing page
* add and fix some blocks
* fix
* delete empty file
* fix
* finished Hybrid-Cloud page and improved other pages (#782)
* Add blog page (#789)
* add blog page
* fix
* fix
* fix
* fix
* Hybrid cloud landing launch preparation (#791)
* moved img dir from assets to static
* moved styles for the hybrid cloud page to the separate file
* replaced png with svg, made images not interactable
* updated head with title, favicons, seo
* favicons files
* npm run format
* removed unused files
* Svg instead png and hot-fix (#794)
* moved new images to static
* fixes
* npm run format
* added global base of, removed baseof from hybrid cloud, moved code to the list layout
* npm run format
* fix
* moved icons to static dir (#797)
* add qdrant blog post page (#795)
* add qdrant blog post page
* fix
* Fix core features section (#799)
* fix for core features section
* fix cloud natve card
* google analytis and gtm (#806)
* About us page (#801)
* about us page
* add leadership section
* add investors section
* add open roles section
* add more component to the about page
* our story component
* fix carousel position on the xl screen size
---------
Co-authored-by: Nik Shemel <nikita_shershnev@hotmail.com>
* Add contact pages (#815)
* Add Not-found Page (#816)
* Add Articles Page and Article-Post Page (#810)
* Add Articles Page and Article-Post Page
* fix
* custom gutters (#812)
* fix
---------
Co-authored-by: trean <trean.mi@gmail.com>
* Add Advanced-search Page (#825)
* Add Advanced-search Page
* fix
* fix format
* Customers review animation (#798)
* splide carousel on the main page
* npm run format
* fix
* buttons fix
* moved content of baseof files to lists, so that all pages used the default layout (#831)
* Add Recommendations page (#833)
* Popup for the desktop submenu (#832)
* popup for the desktop submenu
* section link
* menu urls
* open external menu links in a new tab
* Changed background icons to img so that they are pre-loaded and don't cause glitches when the submenu first appears
* Add RAG and Data-Analysis Pages (#839)
* Add RAG and Data-Analysis Pages
* fix
* Footer links and form (#838)
* updated footer
* hubspot form in the footer
* fix IDs
* submitted message alingn
* fix
* removed unused .md
* Revert "removed unused .md"
This reverts commit e6406a701b.
* Moved 404 page to layouts root (#841)
* moved 404 page to laouts root
* removed unused .md
* format
* Move updates from hc landing (#842)
* fixed scheme image
* fix
* cookie banner and base
* new preview
* fix
* upd seo title, description, keywords
* moved fonts
* youtube video
* format
* Contac forms from Hubspot (#843)
* adjusted the form partial to reuse
* hubspot contact form
* fixes
* format
* error messages fixes
* Single page default layout, article content partial, table (#846)
* single page default layout, article content partial, table
* fix
* fix
* Code snippets for articles, blog, docs (#847)
* code highlight
* import highlight scss
* code copy button and highlight styles
* fix highlight
* code snippet tabs
* changes in lang switcher
* changes to fix mobile view
* no scrollbar
* Article and blog pages update (#850)
* returned input
* articles, blog pages: a link to post, pagination
* format
* a form in blog hero
* subscribe banner, fixes for hubspot styles
* overall fixes, links
* page-search
* format
* mobile fixes
* fix search modal and pagination
* removed todos comments
---------
Co-authored-by: generall <andrey@vasnetsov.com>
* Some links and fixes (#853)
* links and fixes
* links and menus adjustments
* inline code highlight only inside article tag
* demos and tutorials links and fixes
* rag page fixes
* links, hidden non existing links on the main
* mobile
* hidden menu links
* Centered article post layout (#860)
* centered layout for article posts and a separate partial for social share buttons
* fix
* mathjax support
* format
* links, small fixes (#859)
* Add Documentation page (#861)
* create menu structure
* add docs menu
* minor tweaks
* add table contents
* add article
* fix
* add text trim and indentation
* fix
---------
Co-authored-by: Nik Shemel <nikita_shershnev@hotmail.com>
* breadcrumbs (#865)
* breadcrumbs
* post font-weight
* align
* ajusted layout to breadcrumbs
* Small fixes (#869)
* 6th tutorial card
* fixes
* some fixes
* tutorials links
* Docs update (#874)
* tables, images, figures
* aside alerts in a separate file
* alerts icons
* search button
* moved feedback buttons to the separate partials, added on click behavior, added github links
* dark theme of the search modal, separate css for docs section
* added anchor.js
* format
* Overall fixes (#876)
* top level links in the mobile menu
* moved breackpoint to lg at some places
* moved breackpoint to lg at some places
* blockquote
* format
* About us photo (#878)
* added a leadership photo
* stars
* hidden form header
* Benchmarks in new design (#857)
* benchmark list layout
* single page layout for benchmarks
* format
* script fixes
* benchmark list layout
* uninstal local chart.js
* benchmark layout fixes
* benchmarks style fixes
* format
---------
Co-authored-by: generall <andrey@vasnetsov.com>
* Overall fixes (#880)
* code snippets scroll bar
* global scrollbar
* fixes
* fixes
* upd CI
* upd CI
* upd CI
* move preview images to global static
* Fixed an issue with disappeared articles (#881)
* removed an excluding featured articles, increased number of articles per a page
* urlquery
* breadcrumbs url trailing slash
* fix link
* site map exclude upd, urls upd (#882)
* fix logo with text
* Article preview (#883)
* moved archetypes
* article preivew
* format
* fix
* rss
* Fixes (#888)
* fix links on qdrant-vector-database page
* update rag page
* update links
* resolve enterprise solutions
* demos, pricing
* fix link
* qdrant-post__preview
* fix
* Always visible menu (#895)
* replace built-for-perfomance.svg
* site-header partial, fixed menu
* format
* fix
* mobile fix
* Small refactoring and content (#896)
* moved some js to the file
* position fixed for github stars
* quotient logo
* soc2 logo, customer review
* hero subtitle
* hide cloud video section and run format (#898)
* Redirects for CMS authentication
* scroll to anchor (#901)
* fix
* gh stars manual update
* feat: CMD + K to search - New Design (#909)
* remove glg and add discrod and X to logos
---------
Co-authored-by: generall <andrey@vasnetsov.com>
Co-authored-by: Mikita Shershneu <52164620+nshershnev@users.noreply.github.com>
Co-authored-by: Nik Shemel <nikita_shershnev@hotmail.com>
Co-authored-by: nastyapash <38438810+nastyapash@users.noreply.github.com>
Co-authored-by: Anush <anushshetty90@gmail.com>
This commit is contained in:
trean
co-authored by
Nik Shemel
generall
Mikita Shershneu
nastyapash
Anush
Nik Shemel
generall
Mikita Shershneu
nastyapash
Anush
parent
266015adb0
commit
1f8607334b
@@ -0,0 +1,100 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.additional-resources {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: $neutral-10;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
&__title {
|
||||
position: relative;
|
||||
margin-bottom: $spacer * 3;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-98;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
gap: rem(30);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-info {
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
padding-top: $spacer * 1.5;
|
||||
padding-bottom: $spacer * 1.5;
|
||||
padding-left: $spacer * 1.5;
|
||||
padding-right: $spacer * 1.5;
|
||||
border-radius: calc($spacer / 2);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
svg {
|
||||
max-width: rem(24);
|
||||
max-height: rem(24);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
color: $neutral-98;
|
||||
margin-top: $spacer * 1.5;
|
||||
margin-bottom: $spacer;
|
||||
line-height: rem(34);
|
||||
}
|
||||
|
||||
&__card-content {
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__card-link {
|
||||
color: $neutral-98;
|
||||
font-weight: 500;
|
||||
font-size: map-get($font-sizes-text, 'm');
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&__cards {
|
||||
justify-content: space-between;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 3);
|
||||
line-height: rem(57);
|
||||
margin-bottom: $spacer * 4;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
& > div {
|
||||
width: calc(25% - 4.5px);
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-info {
|
||||
width: 100%;
|
||||
min-height: rem(333);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.advanced-search-use-cases {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding: $spacer * 2;
|
||||
|
||||
&-image {
|
||||
width: 100%;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&-description {
|
||||
color: $neutral-40;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
max-width: rem(920);
|
||||
margin: 0 auto $spacer * 5;
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
&__card {
|
||||
height: rem(518);
|
||||
|
||||
&-link {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
color: $neutral-60;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@include media-breakpoint-up(xl) {
|
||||
width: $post-content-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__crumb {
|
||||
display: inline-block;
|
||||
text-transform: capitalize;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.38rem;
|
||||
}
|
||||
|
||||
& > a {
|
||||
color: $neutral-60;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.carousel {
|
||||
min-height: rem(240);
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__content {
|
||||
overflow-x: scroll;
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
&__content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: rem(30);
|
||||
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
&__image {
|
||||
min-width: rem(400);
|
||||
aspect-ratio: 5 / 3;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xxl) {
|
||||
&__content {
|
||||
max-width: rem(1102);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.case-study {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $neutral-10;
|
||||
border-radius: $spacer * 0.5;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
padding: $spacer * 2.5 $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
align-self: flex-start;
|
||||
height: rem(64);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
position: relative;
|
||||
align-self: flex-end;
|
||||
width: calc(100% - 24px);
|
||||
max-width: rem(440);
|
||||
margin-left: $spacer * 1.5;
|
||||
background-image: url('/img/case-study-bg.svg');
|
||||
background-size: 100%;
|
||||
background-position: left top;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 1;
|
||||
|
||||
&-image {
|
||||
width: 100%;
|
||||
padding: rem(28) 0 0 rem(28);
|
||||
}
|
||||
|
||||
&-overlay {
|
||||
position: absolute;
|
||||
left: -20%;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 79%;
|
||||
background-image: url('/img/blurred/blurred-light-13.svg');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
border-radius: 0 rem(12) 0 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: rem(472);
|
||||
padding: $spacer * 4 $spacer * 3 $spacer * 4 $spacer * 5;
|
||||
}
|
||||
|
||||
&__link {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&__tiitle {
|
||||
width: rem(520);
|
||||
}
|
||||
|
||||
&__description {
|
||||
width: rem(520);
|
||||
//margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
&-image {
|
||||
padding: $spacer * 2.5 0 0 $spacer * 2.5;
|
||||
}
|
||||
|
||||
&-overlay {
|
||||
width: rem(597);
|
||||
height: rem(472);
|
||||
left: -150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.contact-form {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: $spacer * 2.5 $spacer * 1.5;
|
||||
border-radius: $spacer * 0.5;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
color: $neutral-98;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
form {
|
||||
$last-row-margin: rem(34);
|
||||
|
||||
display: flex;
|
||||
margin-top: $spacer * 2;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.hs_submit {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: $spacer;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
margin-top: $last-row-margin;
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
width: 100%;
|
||||
@include media-breakpoint-up(md) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
&.form-columns-1:has(> .legal-consent-container) {
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
@include media-breakpoint-up(md) {
|
||||
max-width: 50%;
|
||||
min-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-top: $last-row-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submitted-message {
|
||||
text-align: center;
|
||||
margin-top: $spacer * 4;
|
||||
}
|
||||
|
||||
.hs_error_rollup {
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&__top-overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: rem(220);
|
||||
height: rem(192);
|
||||
background-image: url('/img/blurred/blurred-light-9.png');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
border-radius: 0 rem(12) 0 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding: $spacer * 3 $spacer * 2.5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.contact-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 5;
|
||||
}
|
||||
|
||||
&__title,
|
||||
&__sales-title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: $neutral-70;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $spacer * 0.5;
|
||||
padding: $spacer * 1.5 0;
|
||||
border-top: rem(1) solid $neutral-20;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
}
|
||||
|
||||
img {
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-70;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-link {
|
||||
$link-color: $secondary-blue-50;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-link-mail {
|
||||
$link-color: $secondary-violet-50;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
&__info {
|
||||
width: rem(382);
|
||||
}
|
||||
|
||||
&__form {
|
||||
width: rem(600);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
|
||||
&__sales-title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.core-features {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__title {
|
||||
font-size: rem(40);
|
||||
line-height: rem(48);
|
||||
text-align: start;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
color: $neutral-20;
|
||||
margin-top: $spacer * 1.5;
|
||||
margin-bottom: $spacer;
|
||||
line-height: rem(34);
|
||||
}
|
||||
|
||||
&__cloud-native {
|
||||
@include media-breakpoint-up(xl) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&.card {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
& div:first-child {
|
||||
padding-right: $spacer * 2;
|
||||
padding-top: $spacer * 2;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-right: rem(122);
|
||||
padding-top: $spacer * 5;
|
||||
}
|
||||
}
|
||||
|
||||
.core-features__card-title {
|
||||
font-size: rem(24);
|
||||
line-height: rem(34);
|
||||
margin-top: 0;
|
||||
margin-bottom: rem(12);
|
||||
}
|
||||
|
||||
.core-features__card-content {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
margin-bottom: rem(12);
|
||||
}
|
||||
}
|
||||
|
||||
&__cloud-native-image {
|
||||
margin-top: $spacer;
|
||||
background: url('/img/qdrant-cloud.png') right bottom no-repeat;
|
||||
background-size: contain;
|
||||
max-width: 100% !important;
|
||||
width: rem(372);
|
||||
height: rem(214);
|
||||
border-radius: 0 0 calc($spacer / 2) 0;
|
||||
aspect-ratio: 1.45/1;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
&__card-content {
|
||||
color: $neutral-30;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__card-link {
|
||||
color: $neutral-20;
|
||||
font-size: map-get($font-sizes-text, 'm');
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 6.5;
|
||||
padding-bottom: $spacer * 6.5;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
text-align: center;
|
||||
line-height: rem(67);
|
||||
max-width: rem(920);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
max-width: rem(920);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
margin-left: rem(-15);
|
||||
margin-right: rem(-15);
|
||||
}
|
||||
|
||||
&__cards > div {
|
||||
padding: 0 rem(15);
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
padding-left: $spacer * 2.5;
|
||||
padding-right: $spacer * 2.5;
|
||||
min-height: rem(390);
|
||||
|
||||
svg {
|
||||
max-width: rem(48);
|
||||
max-height: rem(48);
|
||||
}
|
||||
}
|
||||
|
||||
&__cloud-native {
|
||||
padding-top: rem(75);
|
||||
padding-bottom: rem(75);
|
||||
max-width: rem(1110);
|
||||
min-height: rem(420);
|
||||
padding-left: $spacer * 3;
|
||||
padding-right: $spacer * 3;
|
||||
margin-top: $spacer * 5;
|
||||
|
||||
.core-features__card-title {
|
||||
font-size: map-get($font-sizes-text, 'xxl');
|
||||
line-height: rem(48);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
.core-features__card-content {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__cloud-native-image {
|
||||
width: rem(540);
|
||||
height: rem(372);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/marquee' as marquee;
|
||||
|
||||
.customer-list {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__logos {
|
||||
@include marquee.base(64px, 224px, 15, 15, 52px, $neutral-94, false, 50s, block);
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 3;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-weight: 400;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-20;
|
||||
|
||||
.customer-list__logos {
|
||||
@include marquee.base(64px, 224px, 15, 15, 52px, $neutral-20, false, 50s, block);
|
||||
}
|
||||
|
||||
.customer-list__title {
|
||||
color: $neutral-98;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.customer-stories {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: rem(1110);
|
||||
min-width: 100%;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: $spacer;
|
||||
}
|
||||
|
||||
&__controls {
|
||||
display: none;
|
||||
gap: $spacer * 2.5;
|
||||
position: absolute;
|
||||
top: -85px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
border: 1px solid $neutral-80;
|
||||
background-color: transparent;
|
||||
width: rem(64);
|
||||
height: rem(64);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__button-prev svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&__button svg {
|
||||
width: rem(24);
|
||||
height: rem(24);
|
||||
}
|
||||
|
||||
&__button:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: rem(32);
|
||||
line-height: rem(38);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__cards-wrapper::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 2;
|
||||
margin-bottom: $spacer * 2;
|
||||
|
||||
min-height: rem(407);
|
||||
|
||||
img {
|
||||
max-width: rem(120);
|
||||
max-height: rem(64);
|
||||
}
|
||||
}
|
||||
|
||||
&__card-footer {
|
||||
display: flex;
|
||||
gap: $spacer;
|
||||
|
||||
img {
|
||||
min-width: rem(48);
|
||||
min-height: rem(48);
|
||||
}
|
||||
}
|
||||
|
||||
&__card-author p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__card-author-name {
|
||||
font-weight: bold;
|
||||
color: $neutral-20;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
}
|
||||
|
||||
&__card-author-position {
|
||||
color: $neutral-60;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
}
|
||||
|
||||
&__card:last-of-type img {
|
||||
min-width: rem(80);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 6;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 3);
|
||||
line-height: rem(57);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__controls {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__header-content {
|
||||
justify-content: space-between;
|
||||
margin-top: 0;
|
||||
height: rem(64);
|
||||
}
|
||||
|
||||
&__cards-wrapper {
|
||||
padding-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
margin-left: rem(-15);
|
||||
margin-right: rem(-15);
|
||||
}
|
||||
.splide {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/marquee' as marquee;
|
||||
|
||||
.customers {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacer * 3;
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background: $neutral-10;
|
||||
|
||||
&__title {
|
||||
color: $neutral-70;
|
||||
text-align: center;
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
margin: 0 auto calc($spacer / 2);
|
||||
}
|
||||
|
||||
&__description {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: rem(20);
|
||||
padding-right: rem(20);
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $primary-60;
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.customers__logos {
|
||||
@include marquee.base(64px, 224px, 16, 16, 52px, $neutral-10, false, 50s, block);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__description {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
gap: calc($spacer / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.data-analysis-anomaly-detection {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__content {
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: $neutral-30;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 6.5;
|
||||
padding-bottom: $spacer * 6.5;
|
||||
|
||||
&__content {
|
||||
margin-bottom: $spacer * 10;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.demos {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__title {
|
||||
font-size: rem(40);
|
||||
line-height: rem(48);
|
||||
text-align: start;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
min-width: 100%;
|
||||
row-gap: $spacer * 2;
|
||||
margin-top: ($spacer * 4);
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
color: $neutral-20;
|
||||
margin-top: calc($spacer / 2);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: rem(24);
|
||||
line-height: rem(34);
|
||||
}
|
||||
|
||||
&__card-description {
|
||||
color: $neutral-30;
|
||||
font-size: rem(16);
|
||||
line-height: rem(24);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__card-description p {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__card-description p:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__card-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: $spacer * 2.5;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: rem(287);
|
||||
max-height: rem(197);
|
||||
aspect-ratio: 1.46;
|
||||
background-size: contain;
|
||||
background-color: $neutral-98;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
box-shadow: 0px 5.13px 10.25px 0px rgba(22, 30, 51, 0.1);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 10;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
max-width: rem(445);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
max-width: rem(540);
|
||||
line-height: rem(30);
|
||||
}
|
||||
|
||||
&__cards {
|
||||
margin-top: $spacer * 7.5;
|
||||
row-gap: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__card {
|
||||
flex-direction: row;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-left: $spacer * 5;
|
||||
padding-bottom: $spacer * 4;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&__card-content {
|
||||
max-width: rem(400);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
margin-top: 0;
|
||||
font-size: rem(32);
|
||||
line-height: rem(38);
|
||||
}
|
||||
|
||||
&__card-description {
|
||||
font-size: rem(16);
|
||||
line-height: rem(24);
|
||||
}
|
||||
|
||||
&__card-image {
|
||||
margin: 0;
|
||||
max-width: rem(560);
|
||||
max-height: rem(384);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.docker-deploy {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
row-gap: rem(40);
|
||||
}
|
||||
|
||||
&__description {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: rem(32);
|
||||
line-height: rem(38);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
margin-top: $spacer * 1.5;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $primary-50;
|
||||
font-size: $font-size-xl;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: rem(229);
|
||||
max-width: rem(335);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
padding-top: rem(54);
|
||||
padding-left: rem(50);
|
||||
padding-bottom: rem(80);
|
||||
padding-right: rem(50);
|
||||
}
|
||||
|
||||
&__image code {
|
||||
color: $neutral-98;
|
||||
font-size: rem(9);
|
||||
line-height: rem(14);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
flex-direction: row;
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
gap: $spacer * 5;
|
||||
|
||||
&__description {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 3);
|
||||
line-height: rem(57);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: rem(584);
|
||||
height: rem(400);
|
||||
max-width: rem(584);
|
||||
padding-top: rem(94);
|
||||
padding-left: rem(107);
|
||||
padding-bottom: rem(80);
|
||||
padding-right: rem(80);
|
||||
}
|
||||
|
||||
&__image code {
|
||||
font-size: rem(15);
|
||||
line-height: rem(24);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.docs-menu {
|
||||
background-color: $neutral-20;
|
||||
border-top: 1px solid $neutral-30;
|
||||
margin: 0 -16px;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: rem(15) rem(20);
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
.docs-menu__button svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-weight: 400;
|
||||
color: $neutral-90;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: none;
|
||||
padding: $spacer * 1.5 $spacer * 2 rem(12);
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
position: relative;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: $spacer;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
button {
|
||||
padding-left: $spacer * 2.8;
|
||||
color: $neutral-70;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: $spacer;
|
||||
transform: translateY(-50%);
|
||||
background: url('/icons/outline/search-white.svg') no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
padding: 0;
|
||||
outline: none;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
width: rem(24);
|
||||
height: rem(24);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__links {
|
||||
margin-top: $spacer * 1.5;
|
||||
|
||||
&-title {
|
||||
color: $neutral-98;
|
||||
font-weight: bold;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin: 0 0 $spacer;
|
||||
padding-top: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&-group {
|
||||
padding-bottom: rem(4);
|
||||
|
||||
&-heading {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-bottom: $spacer * 0.5;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
summary:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: rem(10);
|
||||
height: rem(10);
|
||||
position: absolute;
|
||||
top: rem(7);
|
||||
right: rem(4);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.16667 0.916341C3.10476 0.869913 3.03115 0.841641 2.95409 0.834692C2.87702 0.827742 2.79954 0.842391 2.73033 0.876997C2.66112 0.911602 2.60291 0.964797 2.56223 1.03062C2.52155 1.09644 2.5 1.17229 2.5 1.24967V8.74968C2.5 8.82706 2.52155 8.90291 2.56223 8.96873C2.60291 9.03455 2.66112 9.08775 2.73033 9.12235C2.79954 9.15696 2.87702 9.17161 2.95409 9.16466C3.03115 9.15771 3.10476 9.12944 3.16667 9.08301L8.16667 5.33301C8.21842 5.2942 8.26042 5.24387 8.28934 5.18601C8.31827 5.12816 8.33333 5.06436 8.33333 4.99967C8.33333 4.93499 8.31827 4.87119 8.28934 4.81334C8.26042 4.75548 8.21842 4.70515 8.16667 4.66634L3.16667 0.916341Z' fill='%238F98B3'/%3E%3C/svg%3E%0A");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.docs-menu__links-group-heading > a {
|
||||
padding: rem(4) 0 rem(4) $spacer;
|
||||
border-left: rem(1) solid $primary-50;
|
||||
font-weight: 600;
|
||||
background-color: $neutral-30;
|
||||
color: $neutral-90;
|
||||
}
|
||||
|
||||
summary:after {
|
||||
top: rem(11);
|
||||
}
|
||||
}
|
||||
|
||||
&[open=''] {
|
||||
summary:after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.66732 8.16667C4.70781 8.21588 4.75871 8.25552 4.81634 8.28273C4.87397 8.30995 4.93692 8.32406 5.00065 8.32406C5.06439 8.32406 5.12733 8.30995 5.18496 8.28273C5.2426 8.25552 5.29349 8.21588 5.33398 8.16667L9.08399 3.16667C9.13041 3.10476 9.15869 3.03115 9.16564 2.95409C9.17258 2.87702 9.15794 2.79954 9.12333 2.73033C9.08872 2.66112 9.03553 2.60291 8.96971 2.56223C8.90388 2.52155 8.82803 2.5 8.75065 2.5H1.25065C1.17327 2.5 1.09742 2.52155 1.0316 2.56223C0.965773 2.60291 0.912579 2.66112 0.877973 2.73033C0.843368 2.79954 0.828719 2.87702 0.835668 2.95409C0.842617 3.03115 0.87089 3.10476 0.917318 3.16667L4.66732 8.16667Z' fill='%238F98B3'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-submenu {
|
||||
margin-bottom: 0;
|
||||
padding-left: $spacer;
|
||||
|
||||
&-item {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $neutral-70;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
color: $primary-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
background-color: $neutral-10;
|
||||
border-top: none;
|
||||
margin: 0;
|
||||
|
||||
&__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__links-group {
|
||||
&.active {
|
||||
.docs-menu__links-group-heading > a {
|
||||
background-color: $neutral-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/mixins' as *;
|
||||
|
||||
.documentation-article {
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 1.5;
|
||||
|
||||
h1 {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer;
|
||||
padding-top: $spacer * 0.5;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer;
|
||||
padding-top: $spacer * 0.5;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@include content-image($font-size-sm, $neutral-90, $spacer);
|
||||
|
||||
li:not(:last-of-type) {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
}
|
||||
|
||||
code:not([class]) {
|
||||
padding: rem(4);
|
||||
color: $neutral-90;
|
||||
background-color: $neutral-20;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
.table {
|
||||
@extend .table-dark;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
background: inherit;
|
||||
img {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
margin: -8px 0 -16px;
|
||||
padding: 0 $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.documentation {
|
||||
padding-top: $spacer;
|
||||
background-color: $neutral-10;
|
||||
color: $neutral-70;
|
||||
|
||||
&__container {
|
||||
@extend .container;
|
||||
max-width: rem(1440);
|
||||
padding: 0 $spacer;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__container {
|
||||
padding: 0 $spacer * 2.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.enterprise-benefits {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-info {
|
||||
justify-content: flex-start;
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin-bottom: 0;
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 4;
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
justify-content: space-between;
|
||||
column-gap: 0;
|
||||
|
||||
& > div {
|
||||
width: calc(50% - 3px);
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-info {
|
||||
padding-bottom: $spacer * 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.enterprise-solutions-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
text-align: center;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 1.5;
|
||||
|
||||
.button {
|
||||
min-width: $spacer * 12.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview-mobile {
|
||||
width: 100%;
|
||||
padding: 0 rem(12);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(730);
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
margin: 0 auto $spacer * 2 auto;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex-direction: row;
|
||||
|
||||
.button {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
+125
@@ -0,0 +1,125 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.enterprise-solutions-use-cases {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 3;
|
||||
padding-bottom: $spacer * 3;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__cases {
|
||||
gap: $spacer * 5;
|
||||
}
|
||||
|
||||
&__case {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 2.5;
|
||||
|
||||
&-text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-link {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: $spacer;
|
||||
line-height: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-40;
|
||||
}
|
||||
|
||||
&-preview {
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 10;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 7.5;
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
&__cases {
|
||||
gap: $spacer * 7.5;
|
||||
|
||||
& > div:last-of-type {
|
||||
img {
|
||||
width: rem(394);
|
||||
margin-left: rem(50);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__case {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&.case-reversed {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
&-text {
|
||||
width: rem(445);
|
||||
}
|
||||
|
||||
&-link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
}
|
||||
|
||||
&-preview {
|
||||
width: rem(540);
|
||||
text-align: left;
|
||||
order: initial;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__case {
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.feature-overview {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 3;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&__header {
|
||||
margin-bottom: $spacer * 3;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: rem(30);
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 0;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__card img {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
margin-bottom: $spacer;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
font-weight: bold;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__card-content {
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
|
||||
&__header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: rem(30);
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'A A A B B B'
|
||||
'C C D D E E'
|
||||
'F F F F G G'
|
||||
'H H I I J J';
|
||||
gap: rem(30);
|
||||
}
|
||||
|
||||
&__card:nth-of-type(1) {
|
||||
grid-area: A;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(2) {
|
||||
grid-area: B;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(3) {
|
||||
grid-area: C;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(4) {
|
||||
grid-area: D;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(5) {
|
||||
grid-area: E;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(6) {
|
||||
grid-area: F;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(7) {
|
||||
grid-area: G;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(8) {
|
||||
grid-area: H;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(9) {
|
||||
grid-area: I;
|
||||
}
|
||||
|
||||
&__card:nth-of-type(10) {
|
||||
grid-area: J;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.feedback {
|
||||
margin-top: rem(12);
|
||||
&__title {
|
||||
color: $neutral-98;
|
||||
margin-bottom: calc($spacer / 2);
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
line-height: rem(24);
|
||||
}
|
||||
&__question {
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
line-height: rem(24);
|
||||
color: $neutral-70;
|
||||
margin-bottom: rem(12);
|
||||
}
|
||||
&__answer {
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
line-height: rem(24);
|
||||
padding: rem(4) $spacer;
|
||||
&_yes {
|
||||
color: $success-90;
|
||||
background-color: $success-10;
|
||||
margin-right: rem(12);
|
||||
box-sizing: border-box;
|
||||
&:hover {
|
||||
background-color: $success-30;
|
||||
color: $neutral-100;
|
||||
}
|
||||
}
|
||||
&_no {
|
||||
color: $error-90;
|
||||
background-color: $error-10;
|
||||
&:hover {
|
||||
background-color: $error-30;
|
||||
color: $neutral-100;
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__response {
|
||||
display: none;
|
||||
padding: 10px 8px;
|
||||
color: $neutral-100;
|
||||
background: $neutral-20;
|
||||
border-radius: 8px;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
&_visible {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.footer {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-10;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
&__top {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: $spacer * 4;
|
||||
border-bottom: 1px solid $neutral-20;
|
||||
}
|
||||
|
||||
&__top-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: $spacer * 3;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
max-width: rem(118);
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
&__social {
|
||||
max-width: rem(350);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
&__social-media-platforms {
|
||||
display: flex;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__social-media-link {
|
||||
outline: none;
|
||||
&:hover svg path {
|
||||
fill: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
&__menu {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: $spacer * 3;
|
||||
}
|
||||
|
||||
&__menu-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: rem(120);
|
||||
}
|
||||
|
||||
&__menu-section-title {
|
||||
font-size: map-get($font-sizes-text, 'm');
|
||||
line-height: rem(24);
|
||||
color: $neutral-98;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__menu-items {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__menu-item:not(:last-of-type) {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&__menu-item a {
|
||||
color: $neutral-70;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__menu-item a:hover {
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__middle {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
border-bottom: 1px solid $neutral-20;
|
||||
}
|
||||
|
||||
&__middle-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__middle-newsletter {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__middle-title {
|
||||
font-weight: 500;
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__middle-subtitle {
|
||||
color: $neutral-70;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
width: 100%;
|
||||
padding-top: rem(30);
|
||||
padding-bottom: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__bottom-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
gap: $spacer * 1.5;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__bottom-content span,
|
||||
&__bottom-content a {
|
||||
color: $neutral-70;
|
||||
font-weight: 500;
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
}
|
||||
|
||||
&__bottom-content a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__bottom-links {
|
||||
display: flex;
|
||||
gap: $spacer * 3;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 3;
|
||||
|
||||
&__menu {
|
||||
min-width: rem(540);
|
||||
gap: rem(54);
|
||||
}
|
||||
|
||||
&__menu-section {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
&__top-content {
|
||||
padding: 0;
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
&__middle-newsletter {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
padding-bottom: rem(30);
|
||||
}
|
||||
|
||||
&__bottom-content {
|
||||
gap: 0;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import 'subscribe-form';
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.get-contacted-with-question {
|
||||
@include get-contacted.base($spacer * 2.5, 0, 0, 0, rem(350));
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
@use '../mixins/get-started-small' as get-started-small;
|
||||
|
||||
.get-started-blogs {
|
||||
@include get-started-small.base(
|
||||
$spacer * 5,
|
||||
$spacer * 1.5,
|
||||
$spacer * 5,
|
||||
$spacer * 2.5,
|
||||
$neutral-98,
|
||||
url('/img/stars-pattern.png') $neutral-10,
|
||||
url('/img/stars-pattern.png') $neutral-10
|
||||
);
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
@use '../mixins/get-started-small' as get-started-small;
|
||||
|
||||
.get-started-small-database {
|
||||
@include get-started-small.base(
|
||||
$spacer * 5,
|
||||
$spacer * 1.5,
|
||||
$spacer * 5,
|
||||
$spacer * 2.5,
|
||||
$neutral-94,
|
||||
url('/img/stars-pattern.png') $neutral-10,
|
||||
url('/img/stars-pattern.png') $neutral-10
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
@use '../mixins/get-started-small' as get-started-small;
|
||||
|
||||
.get-started-small-rocket {
|
||||
@include get-started-small.base(
|
||||
$spacer * 5,
|
||||
$spacer * 1.5,
|
||||
$spacer * 7.5,
|
||||
$spacer * 2.5,
|
||||
$neutral-94,
|
||||
linear-gradient($neutral-20, #0e1424),
|
||||
linear-gradient(to left, $neutral-20, #0e1424)
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.get-started {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: $neutral-10;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
min-width: 100%;
|
||||
min-height: rem(615);
|
||||
|
||||
border-radius: 16px;
|
||||
|
||||
padding-top: $spacer * 5;
|
||||
padding-left: $spacer * 3.5;
|
||||
padding-right: $spacer * 3.5;
|
||||
padding-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
text-align: center;
|
||||
color: $neutral-90;
|
||||
margin-top: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__planet-icon {
|
||||
position: absolute;
|
||||
top: $spacer * 1.5;
|
||||
left: $spacer * 2.5;
|
||||
width: rem(94);
|
||||
height: rem(83);
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&__duo-planet-icon {
|
||||
border-radius: 0 0 16px 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: rem(281);
|
||||
height: rem(151);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&__overlay-top {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: rem(250);
|
||||
height: rem(250);
|
||||
background-image: url('/img/blurred/blurred-light-2.svg');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&__overlay-middle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/img/blurred/blurred-light.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&__overlay-bottom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-top: $spacer * 6.5;
|
||||
padding-bottom: $spacer * 6.5;
|
||||
|
||||
&__content {
|
||||
min-height: rem(165);
|
||||
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 3);
|
||||
line-height: rem(57);
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
max-width: rem(640);
|
||||
}
|
||||
|
||||
&__overlay-middle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__overlay-bottom {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background-image: url('/img/blurred/blurred-light-3.svg');
|
||||
background-position: right;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
position: relative;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
|
||||
&__content {
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
min-height: rem(480);
|
||||
margin: rem(-142) auto 0;
|
||||
overflow: hidden;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
$height: math.div(-100vw, 2.46); // image's aspect ratio 2.46 / 1
|
||||
margin-top: calc(#{$height} * 0.34);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 250%;
|
||||
height: auto;
|
||||
margin-left: -75%;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
color: $neutral-70;
|
||||
text-align: center;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
max-width: 100%;
|
||||
margin: 0 auto $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__buttons a {
|
||||
min-width: rem(200);
|
||||
}
|
||||
|
||||
&__stars {
|
||||
position: absolute;
|
||||
right: $spacer;
|
||||
bottom: $spacer;
|
||||
border-radius: 8px;
|
||||
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
padding-top: calc($spacer / 2);
|
||||
padding-bottom: calc($spacer / 2);
|
||||
padding-left: rem(20);
|
||||
padding-right: rem(20);
|
||||
|
||||
background-color: $neutral-10;
|
||||
transition: bottom 1s ease-in-out;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__stars svg {
|
||||
max-width: rem(24);
|
||||
max-height: rem(24);
|
||||
}
|
||||
|
||||
&__stars-text {
|
||||
color: $neutral-98;
|
||||
margin-right: calc($spacer / 2);
|
||||
margin-left: calc($spacer / 2);
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__stars-count {
|
||||
border-radius: 6px;
|
||||
border: 1px solid $neutral-30;
|
||||
color: $neutral-98;
|
||||
padding-left: calc($spacer / 2);
|
||||
padding-right: calc($spacer / 2);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: calc($spacer / 4);
|
||||
|
||||
height: rem(25);
|
||||
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: rem(21);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
|
||||
&__content {
|
||||
padding: 0;
|
||||
max-width: rem(920);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 1);
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
max-width: rem(640);
|
||||
margin: 0 auto $spacer * 2;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&__buttons a {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
&__stars {
|
||||
position: fixed;
|
||||
right: $spacer * 1.5;
|
||||
bottom: $spacer * 1.5;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: $neutral-100;
|
||||
.hero__stars-text,
|
||||
.hero__stars-count {
|
||||
color: $neutral-20;
|
||||
}
|
||||
& > svg path {
|
||||
fill: $neutral-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
form.hs-form {
|
||||
position: relative;
|
||||
|
||||
& > fieldset {
|
||||
min-width: 100%;
|
||||
margin-bottom: rem(20);
|
||||
|
||||
label {
|
||||
margin-bottom: rem(6);
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
}
|
||||
|
||||
& > div.hs-form-field {
|
||||
div.input,
|
||||
textarea {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.form-columns-1 {
|
||||
display: block;
|
||||
|
||||
& > div.hs-form-field {
|
||||
div.input {
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.form-columns-2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(20);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
& > div.hs-form-field {
|
||||
width: 100%;
|
||||
float: none;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
$remValue: rem(10);
|
||||
max-width: calc(50% - #{$remValue});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// todo: this may be removed once the form is updated
|
||||
&.form-columns-0 {
|
||||
margin: 0;
|
||||
.hs-richtext {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
border: 1px solid $neutral-40;
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
color: $neutral-98;
|
||||
padding-left: $spacer;
|
||||
padding-right: $spacer;
|
||||
padding-top: calc($spacer / 2);
|
||||
padding-bottom: calc($spacer / 2);
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $neutral-100;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
height: rem(77);
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.error {
|
||||
border-color: $error-50;
|
||||
}
|
||||
}
|
||||
|
||||
.legal-consent-container {
|
||||
p {
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
color: $neutral-60;
|
||||
|
||||
a {
|
||||
color: $neutral-80;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hs_submit {
|
||||
input[type='submit'] {
|
||||
padding-left: rem(22);
|
||||
padding-right: rem(22);
|
||||
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
line-height: rem(24);
|
||||
}
|
||||
}
|
||||
|
||||
.hs-error-msgs {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
color: $error-50;
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
|
||||
.submitted-message {
|
||||
color: $success-90;
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
line-height: rem(24);
|
||||
text-align: right;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.hybrid-cloud-cases {
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer;
|
||||
|
||||
&-icon {
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 6.5;
|
||||
|
||||
&__cards {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: rem(30);
|
||||
|
||||
& > div:nth-of-type(1),
|
||||
& > div:nth-of-type(2) {
|
||||
width: calc(50% - 15px);
|
||||
}
|
||||
|
||||
& > div:nth-of-type(3),
|
||||
& > div:nth-of-type(4),
|
||||
& > div:nth-of-type(5) {
|
||||
width: calc((100% / 3) - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.hybrid-cloud-features {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
text-align: center;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
gap: rem(30);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
gap: $spacer;
|
||||
|
||||
&-icon {
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-20;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-20;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
column-gap: 0;
|
||||
margin-bottom: $spacer * 5;
|
||||
|
||||
& > div {
|
||||
width: calc(25% - 4.5px);
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: rem(22);
|
||||
width: rem(166);
|
||||
height: rem(1);
|
||||
background-color: $neutral-80;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.hybrid-cloud-get-contacted {
|
||||
@include get-contacted.base($spacer * 2.5, 0, 0, $spacer * 4, rem(350));
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.hybrid-cloud-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 4;
|
||||
text-align: center;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
|
||||
& > div {
|
||||
gap: $spacer * 0.5;
|
||||
padding: rem(4) $spacer;
|
||||
border-radius: rem(100);
|
||||
background-color: $neutral-20;
|
||||
|
||||
img {
|
||||
height: $spacer;
|
||||
width: $spacer;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-90;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 1.5;
|
||||
|
||||
.button {
|
||||
min-width: $spacer * 12.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
margin-top: -$spacer;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
text-align: left;
|
||||
|
||||
&__content {
|
||||
width: rem(480);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
&__features {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
.button {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
width: rem(480);
|
||||
margin-top: -$spacer * 5;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__content {
|
||||
width: rem(500);
|
||||
}
|
||||
&__preview {
|
||||
width: rem(550);
|
||||
}
|
||||
}
|
||||
}
|
||||
+131
@@ -0,0 +1,131 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.hybrid-cloud-how-it-works {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__step {
|
||||
position: relative;
|
||||
padding-left: $spacer * 3.5;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: rem(15);
|
||||
bottom: -4px;
|
||||
width: rem(2);
|
||||
height: calc(100% - 52px);
|
||||
background-color: $neutral-40;
|
||||
}
|
||||
}
|
||||
|
||||
&-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4.5px;
|
||||
height: rem(45);
|
||||
width: $spacer * 2.4;
|
||||
background-image: url('/img/hybrid-cloud-steps-cube/cube.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
z-index: 2;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -32px;
|
||||
top: -30px;
|
||||
width: $spacer * 6.5;
|
||||
height: rem(108.5);
|
||||
background-image: url('/img/hybrid-cloud-steps-cube/cube-blur.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-98;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: $spacer;
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: $spacer * 2;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 9;
|
||||
padding-bottom: $spacer * 9;
|
||||
|
||||
&__content {
|
||||
margin-bottom: $spacer * 7.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
&__steps {
|
||||
gap: $spacer * 3;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__step {
|
||||
&:not(:last-of-type) {
|
||||
&:before {
|
||||
bottom: -28px;
|
||||
width: rem(2);
|
||||
height: calc(100% - 28px);
|
||||
}
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.hybrid-cloud-kubernetes-clusters {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-20;
|
||||
|
||||
&:first-of-type {
|
||||
margin-bottom: rem(27);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
margin-top: $spacer * 2.5;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
|
||||
&:first-of-type {
|
||||
margin-bottom: rem(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__preview {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
@use 'sass:math';
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/marquee' as marquee;
|
||||
|
||||
.hybrid-cloud-partners {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin: 0 auto $spacer * 2.5;
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
padding: rem(92) 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
@include marquee.base(96px, 264px, 20, 20, 12px, $neutral-94, false, 50s, none);
|
||||
|
||||
&__container {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacer;
|
||||
padding: $spacer 0 $spacer $spacer;
|
||||
background-color: $neutral-98;
|
||||
border-radius: rem(12);
|
||||
|
||||
img {
|
||||
width: $spacer * 4;
|
||||
height: $spacer * 4;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__square-grid-overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: rem(400);
|
||||
background-image: url('/img/square-grid.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
width: rem(920);
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
}
|
||||
|
||||
&__square-grid-overlay {
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.hybrid-cloud-video {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 3;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
text-align: center;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 6.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.integrations {
|
||||
background: $neutral-10;
|
||||
padding-top: $spacer * 4;
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
text-align: center;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
color: $neutral-70;
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $primary-60;
|
||||
font-size: $font-size-xl;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
margin-top: $spacer * 3;
|
||||
width: 100%;
|
||||
height: rem(440);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('/img/mobile/integrations.svg');
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
padding-top: $spacer * 6.5;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
max-width: rem(726);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
margin-top: $spacer * 5;
|
||||
width: rem(920);
|
||||
height: rem(440);
|
||||
background-image: url('/img/integrations.svg');
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: rem(240);
|
||||
|
||||
position: absolute;
|
||||
bottom: rem(-255);
|
||||
left: 0;
|
||||
filter: blur(60px);
|
||||
background: linear-gradient(90deg, #dc244c 7%, #2567eb 30%, #f54c71 50%, #7335f0 70%, #bb3987 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.investors {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
position: relative;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
text-align: center;
|
||||
margin-bottom: $spacer * 4;
|
||||
}
|
||||
|
||||
&__logos {
|
||||
position: relative;
|
||||
row-gap: $spacer * 4;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 100%;
|
||||
min-height: rem(40);
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__logos {
|
||||
align-items: center;
|
||||
min-height: rem(240);
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: rem(240);
|
||||
bottom: $spacer * 7.5;
|
||||
background-image: url('../../img/grid.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.leadership {
|
||||
padding-top: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
row-gap: rem(7);
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding: rem(10);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
row-gap: $spacer;
|
||||
background-color: $neutral-98;
|
||||
}
|
||||
|
||||
&__card-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 0.96;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
border-radius: rem(6);
|
||||
}
|
||||
|
||||
&__card-name {
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
margin-bottom: rem(4);
|
||||
font-size: map-get($font-sizes-text, md);
|
||||
}
|
||||
|
||||
&__card-position {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: $neutral-40;
|
||||
text-align: center;
|
||||
font-size: map-get($font-sizes-text, xs);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
text-align: center;
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
margin-bottom: $spacer * 4;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
row-gap: rem(30);
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding: $spacer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.link {
|
||||
$icon-width: rem(20);
|
||||
$icon-height: calc(1em * 0.62);
|
||||
$link-color: $primary-50;
|
||||
$link-font-size: $font-size-l;
|
||||
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
color: $link-color;
|
||||
font-size: $link-font-size;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
transition:
|
||||
all 0.3s ease-in-out,
|
||||
color 0.1s linear;
|
||||
padding-right: $icon-width;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: $icon-width;
|
||||
height: $icon-height;
|
||||
-webkit-mask: url('../../icons/outline/arrow-hand.svg') no-repeat center right;
|
||||
mask: url('../../icons/outline/arrow-hand.svg') no-repeat center right;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
right: 0;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: $icon-width;
|
||||
height: $icon-height;
|
||||
-webkit-mask: url('../../icons/outline/angle-right-color.svg') no-repeat center right;
|
||||
mask: url('../../icons/outline/angle-right-color.svg') no-repeat center right;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
background: $link-color;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
padding-right: calc($icon-width + 6px);
|
||||
&:after {
|
||||
animation: dash 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
&:before {
|
||||
animation: dash 0.3s ease-in-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
&:before {
|
||||
animation: dash-revert 0.3s ease-in-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dash-revert {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
to {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
// MODIFIERS
|
||||
&_dark {
|
||||
$link-color: $neutral-20;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
$link-color: $primary-50;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_light {
|
||||
$link-color: $primary-60;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
&_disabled,
|
||||
&:disabled {
|
||||
$link-color: $neutral-60;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
&_neutral {
|
||||
$link-color: $neutral-60;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
$link-color: $neutral-20;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// font-size
|
||||
&_inherit {
|
||||
font-size: inherit;
|
||||
}
|
||||
&_sm {
|
||||
font-size: $font-size-s;
|
||||
}
|
||||
|
||||
&_md {
|
||||
font-size: $font-size-md;
|
||||
}
|
||||
|
||||
&_xl {
|
||||
font-size: $font-size-xl;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.logo {
|
||||
width: 178px;
|
||||
height: 36px;
|
||||
|
||||
&__img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.menu-mobile {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
padding-top: rem(52);
|
||||
background-color: $neutral-94;
|
||||
display: none;
|
||||
gap: $spacer * 3;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
|
||||
&--visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__header {
|
||||
padding: 0 rem(20);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__close {
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: rem(5);
|
||||
padding-top: rem(7);
|
||||
width: rem(40);
|
||||
height: rem(40);
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__close svg {
|
||||
width: rem(24);
|
||||
height: rem(24);
|
||||
}
|
||||
|
||||
&__controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
|
||||
padding-left: rem(20);
|
||||
padding-right: rem(20);
|
||||
padding-bottom: rem(60);
|
||||
}
|
||||
|
||||
&__login {
|
||||
color: $neutral-20 !important;
|
||||
}
|
||||
|
||||
&__items {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $neutral-90;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
|
||||
color: $neutral-20;
|
||||
|
||||
a {
|
||||
color: $neutral-20;
|
||||
}
|
||||
}
|
||||
|
||||
&__item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: rem(64);
|
||||
padding: 0 rem(20);
|
||||
}
|
||||
|
||||
&__subitems {
|
||||
display: none;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: $neutral-90;
|
||||
padding: $spacer rem(20);
|
||||
}
|
||||
|
||||
&__subitems a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__subitem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
min-height: rem(40);
|
||||
|
||||
font-size: rem(16);
|
||||
line-height: rem(24);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__subitem span {
|
||||
width: rem(16);
|
||||
height: rem(16);
|
||||
margin-right: $spacer;
|
||||
}
|
||||
|
||||
&__expand {
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: rem(5);
|
||||
width: rem(34);
|
||||
height: rem(34);
|
||||
background-color: transparent;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__expand svg {
|
||||
height: rem(16);
|
||||
width: rem(16);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-mobile__item--active {
|
||||
.menu-mobile__subitems {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-mobile__expand svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
@use '../mixins/mixins' as mixins;
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.menu-link {
|
||||
text-decoration: none;
|
||||
color: $neutral-98;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $primary-50;
|
||||
}
|
||||
}
|
||||
|
||||
.main-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
padding-top: rem(12);
|
||||
padding-bottom: rem(12);
|
||||
padding-left: rem(20);
|
||||
padding-right: rem(20);
|
||||
background: linear-gradient(180deg, #090d19, rgba(9, 13, 25, 0));
|
||||
z-index: 1;
|
||||
|
||||
&__trigger {
|
||||
outline: none;
|
||||
border: none;
|
||||
width: rem(40);
|
||||
height: rem(40);
|
||||
padding: 0 8px;
|
||||
border-radius: 8px;
|
||||
z-index: 1;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
}
|
||||
|
||||
&__links {
|
||||
display: none;
|
||||
gap: calc($spacer / 2);
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
margin: 0 $spacer;
|
||||
position: relative;
|
||||
color: $neutral-98;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
@include mixins.transitionAll(300ms);
|
||||
|
||||
&:hover {
|
||||
.main-menu__submenu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__submenu {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
padding: rem(24);
|
||||
position: absolute;
|
||||
|
||||
border-radius: 12px;
|
||||
border: 1px solid $neutral-90;
|
||||
background: $neutral-98;
|
||||
box-shadow:
|
||||
0 1px 2px 0 rgba(22, 30, 51, 0.1),
|
||||
0 10px 20px 0 rgba(22, 30, 51, 0.1);
|
||||
top: 48px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-bottom: 8px solid $neutral-98;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
top: -30px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__submenu-item {
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
margin-bottom: rem(4);
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
& a {
|
||||
display: flex;
|
||||
height: 2.5rem;
|
||||
line-height: 1;
|
||||
align-items: center;
|
||||
border-radius: rem(4);
|
||||
color: $neutral-20;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 1rem;
|
||||
color: $primary-50;
|
||||
margin-top: 0.3rem;
|
||||
margin-bottom: 0.2rem;
|
||||
margin-right: rem(12);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
background: $neutral-94;
|
||||
color: $primary-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__section-link {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: rem(4);
|
||||
text-transform: uppercase;
|
||||
a {
|
||||
line-height: $font-size-s;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
gap: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.main-menu {
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 2;
|
||||
padding-left: $spacer * 1.5;
|
||||
padding-right: $spacer * 1.5;
|
||||
|
||||
&__links {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__trigger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.mission {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 4;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $neutral-94;
|
||||
padding: rem(4) $spacer;
|
||||
font-size: $font-size-s;
|
||||
line-height: rem(21);
|
||||
border-radius: 100px;
|
||||
background: linear-gradient($neutral-20, $neutral-10);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
content: url('../../icons/logo.svg');
|
||||
min-width: rem(14);
|
||||
height: rem(16);
|
||||
padding-right: rem(8);
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
margin: $spacer * 1.5 0 0;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-image: url('../../img/mission-background-mobile.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding: rem(160) 0;
|
||||
|
||||
&__title {
|
||||
max-width: rem(920);
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
height: rem(400);
|
||||
top: rem(87);
|
||||
background-image: url('../../img/mission-background.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.newsletter {
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-98;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
padding: $spacer * 2.5 $spacer * 1.5;
|
||||
border-radius: $spacer;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-70;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
margin-bottom: 0;
|
||||
|
||||
& > form {
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-bottom: $spacer * 7.5;
|
||||
text-align: left;
|
||||
|
||||
&__content {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
padding: $spacer * 2.5 $spacer * 4;
|
||||
}
|
||||
|
||||
&__text {
|
||||
width: rem(381);
|
||||
}
|
||||
|
||||
&__form {
|
||||
form {
|
||||
flex-direction: row;
|
||||
width: rem(476);
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'] {
|
||||
width: rem(118);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.not-found {
|
||||
position: relative;
|
||||
min-height: calc(100vh - 104px);
|
||||
padding-top: rem(130);
|
||||
padding-bottom: $spacer * 5;
|
||||
text-align: center;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
|
||||
&__image {
|
||||
display: none;
|
||||
|
||||
&-mobile {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: $spacer * 3;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-94;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
|
||||
.button {
|
||||
width: rem(200);
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: rem(200);
|
||||
background-image: url('/img/blurred/blurred-light-12.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: rem(120);
|
||||
padding-bottom: rem(130);
|
||||
min-height: calc(100vh - 140px);
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: $spacer * 2;
|
||||
|
||||
&-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex-direction: row;
|
||||
|
||||
.button {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.open-roles {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 1.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: $neutral-10;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
min-width: 100%;
|
||||
|
||||
border-radius: 16px;
|
||||
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-left: $spacer * 1.5;
|
||||
padding-right: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: rem(250);
|
||||
height: rem(250);
|
||||
background-image: url('/img/blurred/blurred-light-9.png');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 5);
|
||||
line-height: rem(38);
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'm');
|
||||
line-height: rem(24);
|
||||
text-align: center;
|
||||
color: $neutral-80;
|
||||
margin-top: $spacer;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
min-height: rem(240);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: 0;
|
||||
padding-bottom: $spacer * 6.5;
|
||||
|
||||
&__content {
|
||||
flex-direction: row;
|
||||
|
||||
padding-top: rem(30);
|
||||
padding-bottom: rem(30);
|
||||
padding-left: $spacer * 4;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&__summary {
|
||||
min-width: rem(640);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&__title {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
max-width: rem(640);
|
||||
}
|
||||
|
||||
&__image {
|
||||
max-width: rem(300);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.our-story {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__row {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
text-align: center;
|
||||
color: $neutral-20;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes, 6);
|
||||
line-height: rem(34);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__extra-title {
|
||||
font-size: map-get($font-sizes, 6);
|
||||
line-height: rem(34);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__content {
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer * 2;
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
}
|
||||
|
||||
&__image {
|
||||
height: 100%;
|
||||
min-height: rem(332);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&__date {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__date::before {
|
||||
content: url('../../icons/outline/arrow-right.svg');
|
||||
display: inline-block;
|
||||
margin-right: $spacer;
|
||||
}
|
||||
|
||||
&__extra-content {
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__row {
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__row--offsetted {
|
||||
margin-bottom: $spacer * 7.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: rem(80);
|
||||
line-height: rem(96);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: rem(40);
|
||||
line-height: rem(48);
|
||||
max-width: rem(475);
|
||||
}
|
||||
|
||||
&__content {
|
||||
max-width: rem(475);
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
}
|
||||
|
||||
&__image {
|
||||
min-height: rem(524);
|
||||
}
|
||||
|
||||
&__date {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.pagination {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: rem(4);
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&__item {
|
||||
height: $spacer * 2;
|
||||
width: $spacer * 2;
|
||||
list-style: none;
|
||||
line-height: $spacer * 2;
|
||||
|
||||
&:last-of-type {
|
||||
width: $spacer * 3.5;
|
||||
margin-left: $spacer;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: $neutral-50;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $primary-50;
|
||||
border-radius: rem(10);
|
||||
|
||||
a {
|
||||
color: $neutral-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.pricing-door {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: rem(47) $spacer * 2 $spacer * 3 $spacer * 2;
|
||||
border-radius: rem(12);
|
||||
border-top: rem(1) solid $neutral-40;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
color: $neutral-80;
|
||||
z-index: 1;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
padding: rem(47) rem(31);
|
||||
border: rem(1) solid $primary-40;
|
||||
|
||||
.pricing-door__popular {
|
||||
left: rem(31);
|
||||
}
|
||||
}
|
||||
|
||||
&__popular {
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
left: $spacer * 2;
|
||||
padding: rem(2) rem(12);
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
text-transform: uppercase;
|
||||
border-radius: rem(6);
|
||||
background-color: $primary-50;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__top-overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: rem(220);
|
||||
height: rem(192);
|
||||
background-image: url('/img/blurred/blurred-light-9.png');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
border-radius: 0 rem(12) 0 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__price {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__button {
|
||||
width: 100%;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__feature {
|
||||
padding-top: $spacer;
|
||||
border-top: rem(1) solid $neutral-40;
|
||||
|
||||
&-description {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
|
||||
a {
|
||||
color: $neutral-80;
|
||||
border-bottom: rem(1) solid $neutral-80;
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer;
|
||||
}
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
padding-left: $spacer * 1.5;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
|
||||
&:before {
|
||||
content: ('');
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: rem(4);
|
||||
left: 0;
|
||||
height: $spacer;
|
||||
width: $spacer;
|
||||
background-image: url('/icons/fill/check-white.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&-min-price {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $spacer * 0.5;
|
||||
margin-bottom: 0;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: $spacer;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
text-align: center;
|
||||
color: $secondary-blue-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.private-cloud-about {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
color: $neutral-20;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: $neutral-40;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer;
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: rem(1);
|
||||
width: rem(920);
|
||||
margin: 0 auto;
|
||||
background-color: $neutral-80;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
position: absolute;
|
||||
top: $spacer * 4;
|
||||
left: rem(12);
|
||||
width: rem(400);
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
width: rem(553);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__description {
|
||||
position: absolute;
|
||||
bottom: $spacer * 4;
|
||||
right: rem(12);
|
||||
width: rem(361);
|
||||
}
|
||||
}
|
||||
}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.private-cloud-get-contacted {
|
||||
@include get-contacted.base($spacer * 3.5, $spacer * 4, $spacer * 7.5, $spacer * 4, rem(400));
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.private-cloud-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-30;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__button {
|
||||
min-width: $spacer * 10;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
width: rem(540);
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: rem(465);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-articles-hero {
|
||||
position: relative;
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 5;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-98;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: rem(176);
|
||||
background-image: url('/img/blurred/blurred-light-11.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-articles-posts {
|
||||
padding-bottom: $spacer * 2.5;
|
||||
padding-top: $spacer * 4;
|
||||
background-color: $neutral-98;
|
||||
|
||||
&__articles {
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
.post-preview {
|
||||
padding-bottom: 27.36%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-blog-features {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-98;
|
||||
|
||||
&__header {
|
||||
margin-bottom: $spacer * 3;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__form {
|
||||
margin-bottom: 0;
|
||||
|
||||
&-search-block {
|
||||
position: relative;
|
||||
|
||||
input,
|
||||
.qdr-search-input-btn {
|
||||
padding-right: $spacer * 2.5;
|
||||
}
|
||||
.qdr-search-input-btn {
|
||||
width: 100%;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: rem(12);
|
||||
right: $spacer;
|
||||
width: $spacer;
|
||||
height: $spacer;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background-image: url('/icons/outline/input-search.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__articles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 4;
|
||||
|
||||
&-main {
|
||||
width: 100%;
|
||||
|
||||
h5 {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.post-preview > div {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
.post {
|
||||
padding: rem(18) 0 rem(20);
|
||||
border-bottom: rem(1) solid $neutral-90;
|
||||
|
||||
&:first-of-type {
|
||||
padding-top: rem(20);
|
||||
border-top: rem(1) solid $neutral-90;
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__header {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__articles {
|
||||
flex-direction: row;
|
||||
gap: rem(30);
|
||||
|
||||
&-main {
|
||||
width: calc(100% - 476px);
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
width: rem(446);
|
||||
|
||||
.post {
|
||||
&:first-of-type {
|
||||
padding-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__form {
|
||||
&-search-block {
|
||||
width: rem(534);
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-blog-hero {
|
||||
position: relative;
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 5;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__form {
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: rem(176);
|
||||
background-image: url('/img/blurred/blurred-light-11.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
&__form {
|
||||
form {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='submit'] {
|
||||
width: $spacer * 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-blog-posts {
|
||||
padding-bottom: $spacer * 2.5;
|
||||
padding-top: $spacer * 2.5;
|
||||
background-color: $neutral-98;
|
||||
|
||||
&__articles {
|
||||
gap: $spacer * 3;
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__articles {
|
||||
gap: $spacer * 5 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-cloud-bento-cards {
|
||||
background-color: $neutral-94;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
&__cards {
|
||||
gap: $spacer * 2;
|
||||
|
||||
& > div:nth-of-type(1),
|
||||
& > div:nth-of-type(3) {
|
||||
img {
|
||||
max-width: rem(255);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding-bottom: 0;
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
margin-bottom: rem(12);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-40;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: $spacer auto 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-top: rem(12);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__cards {
|
||||
justify-content: space-between;
|
||||
column-gap: 0;
|
||||
|
||||
& > div:nth-of-type(1),
|
||||
& > div:nth-of-type(3) {
|
||||
width: calc(25% - 3px);
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& > div:nth-of-type(2) {
|
||||
width: calc(50% - 6px);
|
||||
}
|
||||
|
||||
& > div:nth-of-type(4),
|
||||
& > div:nth-of-type(5) {
|
||||
width: calc(50% - 3px);
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding-bottom: 0;
|
||||
|
||||
img {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-top: rem(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-cloud-features-link {
|
||||
background-color: $neutral-94;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: ('');
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: rem(25);
|
||||
height: rem(1);
|
||||
width: calc((100% - 820px) / 2);
|
||||
background-color: $neutral-90;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-cloud-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 5;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
|
||||
.button {
|
||||
min-width: $spacer * 12.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 0.5;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
padding: rem(4) $spacer;
|
||||
border-radius: rem(100);
|
||||
background-color: $neutral-20;
|
||||
|
||||
img {
|
||||
width: $spacer;
|
||||
height: $spacer;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-90;
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: -9px;
|
||||
width: 100%;
|
||||
height: rem(114);
|
||||
background-image: url('/img/blurred/blurred-light-10.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 3.5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(71);
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(730);
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
margin: 0 auto $spacer * 2 auto;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex-direction: row;
|
||||
margin-bottom: $spacer * 3.5;
|
||||
|
||||
.button {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/marketplaces' as marketplaces;
|
||||
|
||||
.qdrant-cloud-marketplaces {
|
||||
@include marketplaces.base(
|
||||
$spacer * 5,
|
||||
$spacer * 4,
|
||||
$spacer * 7.5,
|
||||
$spacer * 4,
|
||||
rem(728),
|
||||
$spacer * 3.5,
|
||||
$spacer * 2.5,
|
||||
rem(67),
|
||||
$spacer * 3
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/mixins' as *;
|
||||
|
||||
.qdrant-post {
|
||||
&__header {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 1.5;
|
||||
background-color: $neutral-98;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__about {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: rem(6);
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-50;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 3;
|
||||
}
|
||||
|
||||
&__content {
|
||||
p,
|
||||
li {
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
p,
|
||||
li,
|
||||
table {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(37);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
@include content-image($font-size-sm, $neutral-50, $spacer * 2);
|
||||
|
||||
iframe {
|
||||
margin-bottom: $spacer * 2;
|
||||
width: 100%;
|
||||
|
||||
&[title='YouTube video player'] {
|
||||
height: auto;
|
||||
aspect-ratio: 1.7 / 1;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: rem(32) rem(40) 1px;
|
||||
border-radius: $spacer * 0.5;
|
||||
background: linear-gradient(180deg, #161e33 0%, #0e1424 100%);
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
details {
|
||||
summary {
|
||||
font-size: rem(18);
|
||||
cursor: pointer;
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&_centered {
|
||||
.qdrant-post__body {
|
||||
max-width: $post-content-width;
|
||||
margin: 0 auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.qdrant-post__content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__header {
|
||||
width: $post-content-width;
|
||||
margin: 0 auto;
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
&__body {
|
||||
flex-direction: row;
|
||||
gap: $spacer * 5;
|
||||
width: $post-content-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: calc(100% - 160px);
|
||||
|
||||
p,
|
||||
li {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
}
|
||||
|
||||
h1:not(:first-child) {
|
||||
padding-top: $spacer * 2;
|
||||
}
|
||||
h1 {
|
||||
font-size: $spacer * 3;
|
||||
line-height: $spacer * 3.5;
|
||||
}
|
||||
h2:not(:first-child) {
|
||||
padding-top: $spacer * 2;
|
||||
}
|
||||
h2 {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
}
|
||||
|
||||
h3:not(:first-child) {
|
||||
padding-top: $spacer * 2;
|
||||
}
|
||||
h3 {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
}
|
||||
|
||||
h4:not(:first-child) {
|
||||
padding-top: $spacer * 2;
|
||||
}
|
||||
h4 {
|
||||
padding-top: $spacer * 2;
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
}
|
||||
|
||||
iframe {
|
||||
margin: $spacer * 2 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-calculator {
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
|
||||
&__title {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__link {
|
||||
margin-top: $spacer * 1.5;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: ('');
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: rem(29.5);
|
||||
height: rem(1);
|
||||
width: calc((100% - 453px) / 2);
|
||||
background-color: $neutral-30;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
.qdrant-pricing-docker-deploy {
|
||||
.docker-deploy__title,
|
||||
.docker-deploy__subtitle {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-doors-a {
|
||||
padding-bottom: $spacer * 4;
|
||||
padding-top: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__doors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(30);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 5;
|
||||
padding-top: $spacer * 5;
|
||||
|
||||
&__doors {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__door {
|
||||
width: rem(400);
|
||||
height: rem(896);
|
||||
|
||||
.pricing-door__feature-description a {
|
||||
color: $primary-50;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-doors-b {
|
||||
padding-bottom: $spacer * 4;
|
||||
padding-top: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__doors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(30);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 5;
|
||||
padding-top: $spacer * 5;
|
||||
|
||||
&__doors {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__door {
|
||||
width: calc((100% / 3) - 20px);
|
||||
height: rem(896);
|
||||
|
||||
.pricing-door__description {
|
||||
height: rem(42);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.qdrant-pricing-get-contacted {
|
||||
@include get-contacted.base($spacer * 2.5, $spacer * 2.5, $spacer * 5, $spacer * 4, rem(400));
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
background-color: $neutral-10;
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
}
|
||||
}
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/marketplaces' as marketplaces;
|
||||
|
||||
.qdrant-pricing-marketplaces {
|
||||
@include marketplaces.base(
|
||||
$spacer * 2.5,
|
||||
$spacer * 2.5,
|
||||
$spacer * 5,
|
||||
$spacer * 5,
|
||||
100%,
|
||||
$spacer * 3,
|
||||
$spacer * 2,
|
||||
rem(57),
|
||||
rem(38)
|
||||
);
|
||||
}
|
||||
+76
@@ -0,0 +1,76 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-vector-database-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
text-align: center;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
|
||||
.button {
|
||||
min-width: $spacer * 12.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview-mobile {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(730);
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
margin: 0 auto $spacer * 2 auto;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex-direction: row;
|
||||
margin-bottom: $spacer * 4;
|
||||
|
||||
.button {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-vector-database-use-cases {
|
||||
background-color: $neutral-10;
|
||||
|
||||
padding-top: $spacer * 3;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
&__cases {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 5;
|
||||
}
|
||||
|
||||
&__case {
|
||||
&-text .link {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: $spacer;
|
||||
line-height: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&-preview {
|
||||
height: 0;
|
||||
padding-bottom: 67%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(1) img {
|
||||
margin-left: -4%;
|
||||
width: 104%;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) img {
|
||||
margin-left: -5%;
|
||||
width: 105%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 10;
|
||||
|
||||
&__cases {
|
||||
gap: $spacer * 10;
|
||||
}
|
||||
|
||||
&__case {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&.case-reversed {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
&-text .link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
}
|
||||
|
||||
&-preview {
|
||||
height: rem(360);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.recommendations-api {
|
||||
position: relative;
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
overflow: hidden;
|
||||
|
||||
&__content {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
z-index: 1;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__content {
|
||||
margin-bottom: 0;
|
||||
padding-right: $spacer * 7;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
height: rem(360);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.retrieval-augmented-generation-evaluation {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: $neutral-20;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:first-of-type {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
margin-top: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__partners {
|
||||
margin-top: $spacer * 5;
|
||||
|
||||
&-title {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-logos {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: start;
|
||||
gap: $spacer * 1.5 $spacer * 0.5;
|
||||
@include media-breakpoint-up(xl) {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&-logo {
|
||||
width: $spacer * 10;
|
||||
height: $spacer * 4;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 6.5;
|
||||
padding-bottom: $spacer * 6.5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
max-width: rem(445);
|
||||
|
||||
&:first-of-type {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&__partners {
|
||||
margin-top: $spacer * 7.5;
|
||||
|
||||
&-title {
|
||||
max-width: rem(445);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.retrieval-augmented-generation-integrations {
|
||||
position: relative;
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
overflow: hidden;
|
||||
|
||||
&__title {
|
||||
position: relative;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
margin-bottom: $spacer * 5;
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
gap: $spacer * 1.5;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&-icon {
|
||||
width: $spacer * 5.5;
|
||||
height: $spacer * 5.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
margin-bottom: $spacer * 0.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
width: rem(730);
|
||||
margin: 0 auto $spacer * 6.5;
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.share-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
@include media-breakpoint-up(xl) {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
width: $spacer * 5;
|
||||
padding-left: $spacer * 2;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: $spacer * 0.5;
|
||||
border-bottom: rem(1) solid $primary-50;
|
||||
}
|
||||
|
||||
&__links {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: $spacer;
|
||||
@include media-breakpoint-up(xl) {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
& > a {
|
||||
padding: 0.5rem;
|
||||
transition: background-color 0.3s;
|
||||
&:hover {
|
||||
background-color: $neutral-94;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_horizontal {
|
||||
width: auto;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
@include media-breakpoint-up(xl) {
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.share-buttons__title {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.share-buttons__links {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.site-header {
|
||||
background:
|
||||
linear-gradient(180deg, #090d19, rgba(9, 13, 25, 0)),
|
||||
url('/img/stars-pattern.png') $neutral-10;
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.subscribe-form {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: calc($spacer / 2);
|
||||
|
||||
.hs_email {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
@include media-breakpoint-up(lg) {
|
||||
max-width: rem(414);
|
||||
}
|
||||
|
||||
& > label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type='submit'] {
|
||||
max-height: rem(41);
|
||||
}
|
||||
|
||||
.hs-error-msgs {
|
||||
$hs-error-msgs-top-offset: rem(30);
|
||||
@include media-breakpoint-up(lg) {
|
||||
position: absolute;
|
||||
bottom: calc(#{$hs-error-msgs-top-offset} * -1);
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&:nth-of-type(#{$i}) {
|
||||
bottom: calc((#{$hs-error-msgs-top-offset} + #{$i - 1} * rem(20)) * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.table-contents {
|
||||
background-color: $neutral-10;
|
||||
margin-bottom: -1px;
|
||||
|
||||
&__title {
|
||||
display: none;
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer;
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
line-height: rem(24);
|
||||
}
|
||||
|
||||
nav {
|
||||
display: none;
|
||||
padding-bottom: rem(12);
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin-bottom: rem(12);
|
||||
color: $neutral-70;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
& > ul > li {
|
||||
padding-left: $spacer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__external-links {
|
||||
border-top: 1px solid $neutral-50;
|
||||
border-bottom: 1px solid $neutral-50;
|
||||
list-style: none;
|
||||
padding: $spacer * 1.5 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__link {
|
||||
margin-bottom: rem(12);
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc($spacer / 2);
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
width: rem(16);
|
||||
height: rem(16);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
nav,
|
||||
&__title {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.testimonial {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: $neutral-10;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
&__cards {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: $spacer * 2 $spacer * 2.5;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
border-radius: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__review {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__employees {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-avatar {
|
||||
margin-bottom: $spacer;
|
||||
height: $spacer * 3;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-position {
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p:first-of-type {
|
||||
color: $neutral-94;
|
||||
}
|
||||
|
||||
p:last-of-type {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $spacer * 2;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
border-radius: $spacer * 0.5;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__cards {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: rem(825);
|
||||
}
|
||||
|
||||
&__employees {
|
||||
flex-direction: row;
|
||||
|
||||
&-avatar {
|
||||
margin-bottom: 0;
|
||||
margin-right: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: calc(100% - 849px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.overlay-top {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: rem(323);
|
||||
height: rem(320);
|
||||
background-image: url('/img/blurred/blurred-light-4.png');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.overlay-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: rem(637);
|
||||
height: rem(376);
|
||||
background-image: url('/img/blurred/blurred-light-5.png');
|
||||
background-position: bottom;
|
||||
background-size: cover;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.top-banner {
|
||||
display: flex;
|
||||
height: rem(40);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
border-bottom: 1px solid var(--Neutral-N20, #161e33);
|
||||
background: var(--Neutral-N10, #090e1a);
|
||||
|
||||
&__text {
|
||||
color: $neutral-94;
|
||||
font-size: $font-size-s;
|
||||
margin-right: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
margin-right: calc($spacer / 4);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.tutorials {
|
||||
background-color: $neutral-10;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
position: relative;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
row-gap: rem(40);
|
||||
}
|
||||
|
||||
&__overlay-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
height: rem(285);
|
||||
width: rem(285);
|
||||
background-size: cover;
|
||||
background-image: url('/img/blurred/blurred-light-8.png');
|
||||
}
|
||||
|
||||
&__overlay-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
height: rem(285);
|
||||
width: rem(285);
|
||||
background-size: cover;
|
||||
background-image: url('/img/blurred/blurred-light-7.png');
|
||||
}
|
||||
|
||||
&__description {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: rem(32);
|
||||
line-height: rem(38);
|
||||
color: $neutral-98;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
margin-top: $spacer * 2;
|
||||
color: $neutral-70;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $primary-50;
|
||||
font-size: $font-size-xl;
|
||||
margin-top: $spacer * 2;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: rem(258);
|
||||
max-width: rem(335);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
padding-top: rem(76);
|
||||
padding-left: rem(65);
|
||||
padding-bottom: rem(80);
|
||||
padding-right: rem(50);
|
||||
}
|
||||
|
||||
&__image code {
|
||||
color: $neutral-98;
|
||||
font-size: rem(9);
|
||||
line-height: rem(14);
|
||||
}
|
||||
|
||||
.command__object {
|
||||
color: $secondary-blue-50;
|
||||
}
|
||||
|
||||
.command__row {
|
||||
margin-left: $spacer * 2.5;
|
||||
}
|
||||
|
||||
.command__value {
|
||||
color: $success-50;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
flex-direction: row;
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
gap: $spacer * 5;
|
||||
|
||||
&__description {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 3);
|
||||
line-height: rem(57);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: rem(540);
|
||||
height: rem(385);
|
||||
max-width: rem(540);
|
||||
padding-top: rem(116);
|
||||
padding-left: rem(117);
|
||||
padding-bottom: rem(80);
|
||||
padding-right: rem(80);
|
||||
}
|
||||
|
||||
&__image code {
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.use-cases-vector-cases {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding: $spacer * 2;
|
||||
|
||||
&-image {
|
||||
display: none;
|
||||
|
||||
&-mobile {
|
||||
width: 100%;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-40;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
max-width: rem(920);
|
||||
margin: 0 auto $spacer * 5;
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
|
||||
&__cards {
|
||||
margin-bottom: $spacer * 4;
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
|
||||
&-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.use-cases-vector-features {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: $neutral-30;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__header {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-icon {
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&-description {
|
||||
color: $neutral-30;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&-link {
|
||||
$link-color: $neutral-20;
|
||||
color: $link-color;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(to right, $link-color 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__header {
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
padding-right: $spacer * 2;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
}
|
||||
}
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
@use '../mixins/get-started-small' as get-started-small;
|
||||
|
||||
.use-cases-vector-get-started {
|
||||
@include get-started-small.base(
|
||||
$spacer * 5,
|
||||
$spacer * 1.5,
|
||||
$spacer * 3.5,
|
||||
$spacer * 2.5,
|
||||
$neutral-94,
|
||||
url('/img/stars-pattern.png') $neutral-10,
|
||||
url('/img/stars-pattern.png') $neutral-10
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.use-cases-vector-hero {
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 4;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 1.5;
|
||||
|
||||
.button {
|
||||
min-width: $spacer * 12.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
height: 0;
|
||||
padding-bottom: 66%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 10;
|
||||
text-align: left;
|
||||
|
||||
&__content {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
max-width: rem(480);
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(480);
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
.button {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__preview {
|
||||
height: rem(360);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.vectors {
|
||||
background-color: $neutral-10;
|
||||
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
&__header {
|
||||
z-index: 1;
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__header-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
text-align: center;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
text-align: center;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 5;
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
min-width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__card--reversed {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__card-image {
|
||||
width: 100%;
|
||||
height: rem(224);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin-top: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__card-description {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: map-get($font-sizes, 5);
|
||||
line-height: rem(38);
|
||||
}
|
||||
|
||||
&__card-content {
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: rem(16);
|
||||
line-height: rem(24);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__header {
|
||||
padding-bottom: $spacer * 7.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: rem(67);
|
||||
max-width: rem(726);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: rem(30);
|
||||
max-width: rem(726);
|
||||
}
|
||||
|
||||
&__cards {
|
||||
gap: $spacer * 10;
|
||||
}
|
||||
|
||||
&__card {
|
||||
min-width: rem(1110);
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&__card--reversed {
|
||||
min-width: rem(1110);
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
&__card-image {
|
||||
width: rem(540);
|
||||
height: rem(360);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: rem(48);
|
||||
}
|
||||
|
||||
&__card-content {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: rem(27);
|
||||
}
|
||||
|
||||
&__card-description {
|
||||
max-width: rem(445);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vectors__card:first-child {
|
||||
.vectors__card-image {
|
||||
height: rem(256);
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
height: rem(392);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vectors-use-case {
|
||||
.vectors__header {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 7;
|
||||
}
|
||||
|
||||
.vectors__title {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.vectors__cards {
|
||||
gap: $spacer * 7.5;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.vectors__header {
|
||||
padding-top: $spacer * 5;
|
||||
}
|
||||
|
||||
.vectors__header-overlay {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: rem(398);
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
}
|
||||
|
||||
.vectors__title {
|
||||
font-size: map-get($font-sizes, 1);
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
.vectors__subtitle {
|
||||
max-width: rem(944);
|
||||
}
|
||||
|
||||
.vectors__cards {
|
||||
gap: $spacer * 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.video {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
z-index: 1;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
border-radius: $spacer * 0.5;
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 0.5;
|
||||
|
||||
img {
|
||||
height: rem(18);
|
||||
width: rem(18);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
max-width: rem(920);
|
||||
|
||||
button {
|
||||
gap: rem(12);
|
||||
height: $spacer * 3;
|
||||
padding: 0 rem(28);
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
|
||||
img {
|
||||
height: rem(22);
|
||||
width: rem(22);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
max-width: 920px;
|
||||
aspect-ratio: 9/5.1;
|
||||
border-radius: $spacer * 0.5;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
## What to put in partials?
|
||||
This directory contains styles related to specific partial in `../../layouts/partial` directory.
|
||||
Reference in New Issue
Block a user