styles/main.css - master - montto/RestoApp

styles/main.css
229 строк4 KB
montto
Sprint 1 - done
18 окт 2024, 23:59
18 окт 2024, 23:594e4b518
.wrapper {
  width: 1440px;

  margin: 0 auto;
}

.section {
  display: grid;
  grid-row-gap: 32px;

  padding: 32px 64px;
}

.section:last-of-type {
  padding-bottom: 64px;
}

.section__header {
  color: var(--color-black);
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-2xl);
  font-weight: var(--font-weight-bold);
}

.section__cards {
  display: grid;
  grid-template-columns: repeat(4, 304px);
  column-gap: 32px;
}

.section__cards--big {
  grid-template-columns: repeat(2, 640px);
}

.section__button {
  padding: 14px 22px;

  border: 2px solid var(--color-black);
  border-radius: var(--border-radius-base);

  color: var(--color-black);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.section__button:hover,
.section__button:focus {
  background-color: var(--color-black);
  color: var(--color-white);
}

.card {
  display: grid;
  row-gap: 16px;
}

.card__link {
  position: relative;

  display: grid;

  border-radius: var(--border-radius-base-top);
  overflow: hidden;

  line-height: var(--line-height-base);
  text-decoration: none;
}

.card__link--only-title::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(to bottom, #00000000 50%, #00000080 100%);
  border-radius: var(--border-radius-base);
}

.card__link--only-title {
  height: 304px;

  border-radius: var(--border-radius-base);
}

.section__cards--big .card__link--only-title {
  height: 360px;
}

.card__badges {
  position: absolute;
  top: 8px;

  display: flex;
  column-gap: 8px;
}

.card__badges--right {
  right: 8px;
}

.section__cards--big .card__badges {
  top: 32px;
}

.section__cards--big .card__badges--left {
  left: 32px;
}

.section__cards--big .card__badges--right {
  right: 32px;
}

.card__badge {
  display: flex;

  padding: 8px;

  background-color: #00000099;
  border-radius: var(--border-radius-sm);

  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-sm);
}

.card__badge--only-icon {
  width: 36px;
  height: 36px;
}

.card__badge--blue {
  background-color: var(--color-blue);
}

.card__badge--green {
  background-color: var(--color-green);
}

.card__badge--grey {
  background-color: var(--color-grey-base);
}

.card__badge--orange {
  background-color: var(--color-orange);
}

.card__badge--yellow {
  background-color: var(--color-yellow-light);

  color: var(--color-black);
}

.card__image {
  width: 304px;
  height: 304px;
  object-fit: cover;

  border-radius: var(--border-radius-base);
}

.section__cards--big .card__image {
  width: 640px;
  height: 360px;
}

.card__title {
  margin-top: 16px;
  margin-bottom: 4px;

  color: var(--color-black);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-wrap: balance;
}

.card__link--only-title .card__title {
  position: absolute;
  left: 16px;
  bottom: 16px;

  margin-top: 0;
  margin-bottom: 0;

  color: var(--color-white);
  font-size: var(--font-size-2xl);
}

.section__cards--big .card__title {
  left: 32px;
  bottom: 32px;

  font-size: var(--font-size-3xl);
  line-height: var(--line-height-xl);
}

.card__description {
  display: -moz-box;
  display: -webkit-box;
  overflow: hidden;

  -webkit-line-clamp: 2;
  line-clamp: 2;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  box-orient: vertical;

  color: var(--color-grey-base);
  font-size: var(--font-size-base);
}

.card__button {
  padding: 16px 24px;

  background-color: var(--color-grey-light);
  border-radius: var(--border-radius-base);

  color: var(--color-black);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
}

.card__button:hover,
.card__button:focus {
  background-color: var(--color-grey-lighter);

  color: var(--color-grey-darker);
}