65 lines
2.6 KiB
CSS
65 lines
2.6 KiB
CSS
body {
|
|
|
|
--site-width: 1200px;
|
|
--site-padding: 20px;
|
|
--nav-height: 50px;
|
|
|
|
--text-color: #000a;
|
|
|
|
--border-shadow: inset 0 -1px 0 0 #0001;
|
|
|
|
--brand-color: 255, 98, 4;
|
|
--brand-color-1: 255, 41, 4;
|
|
--brand-color-2: 255, 167, 4;
|
|
|
|
}
|
|
|
|
* {box-sizing: border-box;}
|
|
|
|
body {font-family: Cantarell, sans-serif; color: var(--text-color); margin: 0;}
|
|
|
|
nav {position: fixed; z-index: 100; top: 0; left: 0; width: 100%; background-color: #fffb; backdrop-filter: blur(10px); box-shadow: var(--border-shadow);}
|
|
nav > .inner {max-width: var(--site-width); padding: 0px var(--site-padding); margin: auto; height: var(--nav-height); line-height: var(--nav-height);}
|
|
nav .logo {font-weight: 700; font-size: 18px;}
|
|
|
|
|
|
section .inner {max-width: var(--site-width); padding: 40px var(--site-padding); margin: auto;}
|
|
|
|
section.header {box-shadow: var(--box-shadow), var(--border-shadow);}
|
|
|
|
section:is(.header, .first) {padding-top: var(--nav-height);}
|
|
section:is(.header, .first) .inner {padding-top: 30px;}
|
|
|
|
section .inner.no-padding {padding: 0 var(--site-padding);}
|
|
|
|
|
|
section.hero {font-size: 1.7rem;}
|
|
section.hero .inner {padding: 90px var(--site-padding) 50px;}
|
|
|
|
section.hero .alt {background: linear-gradient(45deg, rgb(var(--brand-color-1)), rgb(var(--brand-color-2))); display: inline-block; font-weight: 900; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
|
|
|
|
.hero-grid {display: grid; align-items: center; grid-template-columns: 1fr max-content; gap: 40px;}
|
|
.hero-grid img {height: 240px;}
|
|
.hero-grid > :nth-child(2) {text-align: right;}
|
|
|
|
@media screen and (max-width: 700px) {
|
|
.hero-grid {grid-template-columns: 1fr;}
|
|
.hero-grid > :nth-child(2) {display: none;}
|
|
}
|
|
|
|
|
|
.features {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;}
|
|
.features > * {display: grid; grid-template-rows: max-content 1fr; position: relative; border-radius: 5px; background: linear-gradient(45deg, rgb(var(--brand-color-1), .5), rgb(var(--brand-color-2), .5)); color: #fff;}
|
|
.features > *::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; border-radius: 5px; background: rgb(var(--brand-color));}
|
|
.features .head {display: flex; flex-direction: row; padding: 15px 20px 10px; justify-content: center; align-items: center; gap: 15px;}
|
|
.features .text {background-color: #fffd; margin: 5px; border-radius: 3px; padding: 15px; color: #000;}
|
|
.features .icon {font-size: 34px;}
|
|
.features .title {font-weight: 700; font-size: 18px;}
|
|
|
|
@media screen and (max-width: 1200px) {
|
|
.features {grid-template-columns: 1fr 1fr;}
|
|
}
|
|
|
|
@media screen and (max-width: 700px) {
|
|
.features {grid-template-columns: 1fr;}
|
|
} |