| // Licensed to the Apache Software Foundation (ASF) under one |
| // or more contributor license agreements. See the NOTICE file |
| // distributed with this work for additional information |
| // regarding copyright ownership. The ASF licenses this file |
| // to you under the Apache License, Version 2.0 (the |
| // "License"); you may not use this file except in compliance |
| // with the License. You may obtain a copy of the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, |
| // software distributed under the License is distributed on an |
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| // KIND, either express or implied. See the License for the |
| // specific language governing permissions and limitations |
| // under the License. |
| |
| |
| .panels { |
| text-align: center; |
| font-style: normal; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| padding-top: 60px; |
| padding-bottom: 60px; |
| |
| &.odd { |
| background-color: var(--body-background-alt); |
| } |
| |
| ul { |
| padding: 0; |
| |
| li { |
| margin-bottom: 15px; |
| list-style: none; |
| |
| a { |
| font-size: 1rem; |
| font-weight: 400; |
| line-height: 22px; |
| } |
| } |
| } |
| |
| |
| .title { |
| margin-bottom: 40px; |
| font-size: 2.4rem; |
| font-weight: 700; |
| line-height: normal; |
| letter-spacing: -1.1px; |
| } |
| |
| .wrapper { |
| display: flex; |
| flex-direction: row; |
| flex-wrap: wrap; |
| justify-content: center; |
| max-width: 1600px; |
| gap: 150px; |
| |
| &:has(.card) { |
| gap: 30px; |
| } |
| |
| @media (max-width: 1600px) { |
| gap: 100px; |
| } |
| |
| .panel { |
| width: 350px; |
| |
| .icon { |
| margin-bottom: 30px; |
| width: 100%; |
| height: 80px; |
| background-size: contain; |
| background-repeat: no-repeat; |
| background-position: center; |
| |
| &.flink-compatibility-icon { |
| background-image: url("/img/flink-compatibility-icon-light.svg"); |
| |
| @media(prefers-color-scheme: dark) { |
| background-image: url("/img/flink-compatibility-icon-dark.svg"); |
| } |
| } |
| |
| &.flink-layered-apis-icon { |
| background-image: url("/img/flink-layered-apis-icon-light.svg"); |
| |
| @media(prefers-color-scheme: dark) { |
| background-image: url("/img/flink-layered-apis-icon-dark.svg"); |
| } |
| } |
| |
| &.flink-operational-icon { |
| background-image: url("/img/flink-operational-icon-light.svg"); |
| |
| @media(prefers-color-scheme: dark) { |
| background-image: url("/img/flink-operational-icon-dark.svg"); |
| } |
| } |
| |
| &.flink-scalability-icon { |
| background-image: url("/img/flink-scalability-icon-light.svg"); |
| |
| @media(prefers-color-scheme: dark) { |
| background-image: url("/img/flink-scalability-icon-dark.svg"); |
| } |
| } |
| |
| &.flink-performance-icon { |
| background-image: url("/img/flink-performance-icon-light.svg"); |
| |
| @media(prefers-color-scheme: dark) { |
| background-image: url("/img/flink-performance-icon-dark.svg"); |
| } |
| } |
| |
| &.flink-event-driven-icon { |
| background-image: url("/img/flink-event-driven-icon-light.svg"); |
| |
| @media(prefers-color-scheme: dark) { |
| background-image: url("/img/flink-event-driven-icon-dark.svg"); |
| } |
| } |
| |
| &.flink-stream-batch-icon { |
| background-image: url("/img/flink-stream-batch-icon-light.svg"); |
| |
| @media(prefers-color-scheme: dark) { |
| background-image: url("/img/flink-stream-batch-icon-dark.svg"); |
| } |
| } |
| |
| &.flink-pipeline-etl-icon { |
| background-image: url("/img/flink-pipeline-etl-icon-light.svg"); |
| |
| @media(prefers-color-scheme: dark) { |
| background-image: url("/img/flink-pipeline-etl-icon-dark.svg"); |
| } |
| } |
| } |
| |
| .heading { |
| font-size: 1.5rem; |
| font-weight: 700; |
| line-height: 36px; |
| margin-bottom: 18px; |
| } |
| |
| .body { |
| font-size: 1rem; |
| font-weight: 400; |
| line-height: 22px; |
| |
| p { |
| margin-bottom: 0px; |
| } |
| } |
| } |
| |
| .card { |
| display: flex; |
| width: 400px; |
| padding: 30px 40px; |
| flex-direction: column; |
| align-items: flex-start; |
| border-radius: 15px; |
| background: var(--card-background-color); |
| text-align: left; |
| box-shadow: 0px 0px 8px 0px rgba(48, 58, 68, 0.15); |
| |
| .heading { |
| font-size: 1.4rem; |
| font-weight: 700; |
| line-height: 120%; |
| margin-bottom: 24px; |
| } |
| |
| .body { |
| font-size: 1rem; |
| font-weight: 400; |
| line-height: 22px; |
| |
| p { |
| margin-bottom: 20px; |
| } |
| |
| a { |
| font-size: 1rem; |
| font-weight: 400; |
| line-height: 22px; |
| } |
| } |
| } |
| |
| .button { |
| margin-top: 50px; |
| |
| a:hover { |
| text-decoration: none; |
| } |
| |
| span { |
| background-color: var(--button-background-color); |
| |
| &:hover { |
| background-color: var(--button-hover-background-color); |
| } |
| |
| &:active { |
| background-color: var(--button-pressed-background-color); |
| } |
| } |
| |
| span, i { |
| color: var(--button-text-color); |
| |
| &:hover { |
| color: var(--button-hover-text-color); |
| } |
| |
| &:active { |
| color: var(--button-pressed-text-color); |
| } |
| } |
| |
| span { |
| border-radius: 10px; |
| box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 0.15); |
| padding: 10px 25px; |
| |
| font-size: 18px; |
| font-weight: 700; |
| line-height: normal; |
| } |
| } |
| } |
| } |
