Template Services Update.

Overview

This document describes all CSS/SCSS changes applied to the Demoweb template_services update. Each section corresponds to a specific UI component and includes the relevant SCSS snippet to apply.

1. Contact Box — Hours Display

Adds styling to the working hours text inside the contact card, ensuring it appears in a lighter gray color on its own line.

File: styles/components/_contact-card.scss

.contact-card__hours {
  font-size: 13px;
  color: $color__gray-lighter;
  display: block;
}

2. Mobile Menu — Item Button

Adjusts padding on the menu item button for xlarge breakpoints and controls visibility based on screen size. On large screens and above the button is hidden; on smaller screens it displays as inline-flex.

File: styles/components/_menu.scss

.menu__item-button {
  @include media($xlarge) {
    padding-left: 33px;
  }

  .header__menu & {
    display: inline-flex;

    @include media($large) {
      display: none;
    }
  }
}

3. Blog Page — Author Role

Styles the author role label on blog detail pages so it renders as a block-level element with appropriate text color and font size.

File: styles/components/_author.scss

.author__role {
  color: $color__text;
  display: block;
  font-size: 13px;
}

4. Blog Author Component

Defines the layout of the author component used in blog listings. Uses flex-row layout with gap, highlights the author name on hover, and adds a top margin on mobile.

File: styles/components/_author.scss

.author {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;

  &:hover,
  &:focus {
    .author__name {
      color: $color__primary;
    }
  }

  @media (max-width: $small) {
    margin-top: 15px;
  }
}

5. Category Box — Standard Version

Styles the category box card including hover effects for the figure and title. The image variant uses min-height and aspect ratio while also stretching to full height.

File: styles/components/_category.scss

.category__box {
  position: relative;
  align-items: center;
  width: 100%;
  z-index: 1;
  padding: 15px 20px;
  background: $color__bg-dark;
  transition: $ease;
  height: 100%;

  &:hover,
  &:focus {
    .category__figure {
      opacity: 0.5;
    }

    .category__title {
      color: $color__primary;
    }
  }

  .category__item--image & {
    min-height: 190px;
    aspect-ratio: 16/9;
  }
}

6. Category Box — Image Variant with Banner

Extended category box definition that includes banner content alignment and spec component gap styles. This variant aligns image items to the bottom and applies a 16:9 aspect ratio.

File: styles/components/_category.scss + _banner.scss + _spec.scss

.category__box {
  position: relative;
  align-items: center;
  width: 100%;
  z-index: 1;
  padding: 15px 20px;
  background: $color__bg-dark;
  transition: $ease;

  &:hover,
  &:focus {
    .category__figure {
      opacity: 0.5;
    }

    .category__title {
      color: $color__primary;
    }
  }

  .category__item--image & {
    min-height: 190px;
    aspect-ratio: 16/9;
    height: 100%;
    align-items: end;
  }
}

.banner__content {
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  @include media($medium) {
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
  }
}

.spec {
  margin: 0 0 15px 0;
  gap: 10px;

  @include media($medium) {
    gap: 10px 20px;
  }
}

7. Poptávka Form — Mobile Checkbox

Styles the form checkbox wrapper for the inquiry (poptávka) form. Includes the checkmark indicator using a pseudo element and adds vertical margins on mobile breakpoints.

File: styles/components/_message-form.scss

.message-form__checkbox-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  input:checked + .message-form__checkbox::before {
    @include pseudo();
    width: 0.8rem;
    height: 1.4rem;
    border-right: 2px solid $color__text;
    border-bottom: 2px solid $color__text;
    transform: rotate(45deg);
    top: 3px;
    bottom: 8px;
    left: 5px;
    right: 5px;
    margin: auto;
  }

  @media (max-width: $small) {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

8. Contact Card — No-Photo Design

Per the task description: if there is no photo available for a contact person, no placeholder icon should be shown. The card should display only the contact details (name, phone, email) without any image element. A recolored icon is not an acceptable fallback.

Expected result:

Contact name rendered as bold heading.
Phone number with icon.
Working hours in lighter gray text (13px, block).
Email address with icon.
No avatar/photo element rendered in the DOM when no image is set.

9. Content Links — Primary Color Styling

Adds color styling to all links (<a> tags) inside the .content rich-text area. Links display in the primary brand color with an underline, and transition to the primary light color on hover/focus.

File: resources/sass/front/components/content.scss

.content a {
  text-decoration: underline;
  color: $color__primary;
  transition: $ease;

  &:hover, &:focus {
    color: $color__primary_light;
  }
}

Variables used: $color__primary — #FAB702 (default link color), $color__primary_light — #FAB207 (hover/focus color).

Note: Currently $color__primary and $color__primary_light are nearly identical hex values. If a more visible hover effect is desired, update $color__primary_light in resources/sass/front/_variable.scss to a noticeably lighter value (e.g. #FCC93D).

Summary of Files Modified