.flat-button {
padding: 0.6em 0.5em 0.4em;
border-radius: var(--corner-radius);
&:hover {
background-color: var(--highlight-bg-color);
}
}
button.flat-button {
background-color: transparent;
border: 0 none transparent;
}
.outline-button, .primary-button, .contrast-button {
border-radius: var(--corner-radius);
}
.outline-button {
color: var(--text-color);
background-color: var(--background-color);
border: var(--button-border-width) solid var(--text-color);
}
.primary-button {
color: var(--background-color);
background-color: var(--accent-color);
border: var(--button-border-width) solid var(--accent-color);
}
.contrast-button {
color: var(--background-color);
background-color: var(--text-color);
border: var(--button-border-width) solid var(--text-color);
}
.button-content {
margin: 0.6em 1.4em 0.4em;
white-space: nowrap;
}
.logo__container {
display: inline-flex;
align-items: center;
gap: 0.5em;
}
.logo__image {
width: 2em;
height: 100%;
}
.logo__image img {
width: 90%;
height: auto;
}
.logo__text {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 0.125em;
}
.logo__builder {
color: var(--text-color);
}
.logo__select {
color: var(--accent-color);
}
:root {
--background-color: #ffffff;
--accent-color: #f17619;
--text-color: #1f1f1f;
--link-color: #0040ff;
--highlight-bg-color: #e8f0f8;
--feint-color: #f0f0f0;
--faded-color: #808080;
--main-font: sans-serif;
--text-xs: 0.7rem;
--text-small: 0.8rem;
--text-medium: 1rem;
--text-large: 1.6rem;
--text-xl: 2rem;
--corner-radius: 0.5rem;
--button-border-width: 2px;
}
* {
font-family: var(--main-font);
margin: 0;
padding: 0;
box-sizing: border-box;
}
.feint {
color: var(--feint-color);
}
.accent {
color: var(--accent-color);
}
hr {
border: 0 none transparent;
border-top: 1px solid var(--feint-color);
opacity: 1;
}
.landing-header {
display: flex;
gap: 2em;
align-items: center;
justify-content: stretch;
margin: 1rem;
}
.landing-header__nav {
flex-grow: 1.0;
container-name: landing-header-nav;
container-type: inline-size;
}
.landing-header__text-links {
display: flex;
justify-content: space-between;
list-style-type: none;
gap: 1em;
padding: 0;
margin: 0;
}
@container landing-header-nav (width < 45rem) {
.landing-header__text-links {
display: grid;
grid-template-columns: auto auto auto;
}
}
.landing-header__link-text {
text-decoration: none;
color: var(--text-color);
&:hover {
color: var(--link-color);
}
}
.landing-header__account-buttons {
display: grid;
grid-template-columns: auto 1fr 1fr;
gap: 1em;
align-items: center;
}
.notif-icon {
width: 1.6em;
height: 1.6em;
}
.landing-hero {
margin: 1.5rem 1rem;
max-width: 70rem;
}
.landing-hero__main {
display: flex;
gap: 4rem;
}
.landing-hero__half-width-box {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.landing-hero__mini-header {
font-size: var(--text-xs);
text-transform: uppercase;
color: var(--accent-color);
background-color: var(--feint-color);
padding: 0.6em 1em 0.4em;
border-radius: var(--corner-radius);
margin-bottom: 1rem;
margin-right: auto;
}
.landing-hero__header {
font-size: var(--text-xl);
}
.landing-hero__mission {
font-size: var(--text-small);
color: var(--faded-color);
margin-bottom: 1rem;
margin-top: 1rem;
line-height: 130%;
}
.landing-hero__auth_buttons {
display: grid;
grid-template-columns: 1fr 1fr 50%;
max-width: 30em;
gap: 1em;
}
.landing-hero__stats-section {
display: flex;
justify-content: center;
gap: 4rem;
margin-top: 2rem;
margin-bottom: 2rem;
}
.landing-hero__stat-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.landing-hero__stat-value {
font-weight: bold;
font-size: var(--text-large);
}
.landing-hero__stat-label {
color: var(--faded-color);
font-size: var(--text-xs);
}
.featured__photo, .featured__photo--top, .featured__photo--accent {
width: 100%;
border-radius: var(--corner-radius);
position: relative;
}
.featured__photo, .featured__photo--top {
background: linear-gradient(to right bottom, rgba(67, 149, 181, 1), rgba(14, 106, 143, 1), rgba(0, 44, 64, 1));
}
.featured__photo, .featured__photo--accent {
aspect-ratio: 16 / 9;
}
.featured__photo--top {
aspect-ratio: 16 / 9;
}
.featured__photo--accent {
background: linear-gradient(to right bottom, rgba(255, 157, 82, 1), rgba(184, 80, 0, 1), rgba(112, 45, 0, 1));
}
.featured__caption--top, .featured__caption--bottom {
font-size: var(--text-xs);
border-radius: var(--corner-radius);
position: absolute;
color: var(--background-color);
background-color: var(--text-color);
padding: 0.6em 1em 0.4em;
left: 1.5em;
}
.featured__caption--top {
top: 1.5em;
}
.featured__caption--bottom {
bottom: 1.5em;
}
.featured__heading {
font-weight: bold;
font-size: var(--text-medium);
margin: 1.4rem 1rem 0;
}
.featured__list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
list-style-type: none;
margin: 1rem;
}
.featured__card {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 22rem;
border-radius: var(--corner-radius);
border: 1px solid var(--feint-color);
padding-bottom: 0.5rem;
}
.featured__row {
margin-left: 1rem;
margin-right: 1rem;
}
.featured__buttons-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
align-items: center;
}
.featured__description {
font-weight: bold;
}
.featured__location {
font-size: var(--text-small);
color: var(--faded-color);
}
.featured__details-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.featured__details {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.featured__detail-label {
font-size: var(--text-xs);
color: var(--faded-color);
text-transform: uppercase;
}
.featured__detail-value {
font-weight: bold;
font-size: var(--text-small);
}