CREDO REAL GROUP

Style Guide

This page outlines the current styles and standards for the CREDO REAL GROUP website. Every value below is read live from the theme's CSS variables in style.css.

Colors

An overview of this site's brand colors. These are the only colors the theme defines — there is no light/dark/comp scale.

Primary --color-primary #e21c2b Brand red, primary CTAs
Accent --color-accent #db2323 Hover state for red
Blue --color-blue #005aad Bezpečnostní služby CTAs
Green --color-green #019454 Security form submit
Neutral --color-neutral #2b2b2b Headings, dark text
Body --color-body #525252 Paragraph text
Neutral light --color-neutral-light #c7c7c7 Borders, dividers
Neutral ultra light --color-neutral-ultra-light #f2f2f2 Section backgrounds
White --color-white #ffffff Cards, overlays

Buttons

Three button classes. All share padding: 25px 35px and border-radius: 8px.

Zjistit více .onas-btn-red
Zjistit více .onas-btn-blue
Zjistit více .onas-btn-white

Typography

Inter, weights 400 / 500 / 600 / 700. Headings are fixed-size at desktop; all section headings drop to 28px at max-width: 768px.

Headings

H1 62px / 700 / 1.2

Profesionální služby od roku 1990

H2 40px / 700 / 1.2

Profesionální služby od roku 1990

H3 / --text-l 28px / 700 / 1.2

Profesionální služby od roku 1990

H4 20px / 700 / 1.2

Profesionální služby od roku 1990

Body text

Text m --text-m 18px / 32px

Regular — Nabízíme komplexní realitní služby.

Semibold — Nabízíme komplexní realitní služby.

Bold — Nabízíme komplexní realitní služby.

Text s --text-s 16px / 24px

Regular — Nabízíme komplexní realitní služby.

Semibold — Nabízíme komplexní realitní služby.

Bold — Nabízíme komplexní realitní služby.

Layout

Every section on every page follows the same two rules. Hero sections are the only exception — they define their own height and padding.

Section padding padding: 30px All four sides, on every section, on every page.
Inner container max-width: 1400px; margin: 0 auto No extra padding — effective content width is 1400px.
Grid gap --grid-gap: 48px Standard gap between grid and flex columns.
max-width: 1400px
Hatched area = 30px section padding

Spacing

Four spacing steps used for margin, padding and gaps.

--space-s16px
Tight gaps, compact content
--space-m24px
Default content gap
--space-l32px
Block separation
--space-xl48px
Grid gap, column gap

Border radius

Four radius values, each tied to a component role.

15px
Cards, panels, hero image blocks
10px
Bezpečnostní služby service cards
8px
Buttons
5px
Form inputs

Shadows

Two shadows. Both are defined as variables — do not write raw shadow values in templates.

--shadow-card 13px 6px 56px 0 rgba(87,87,87,0.1)
--shadow-slider 2px 2px 26px 0 rgba(235,235,235,0.71)

Form inputs

Fluent Forms fields are restyled to these values site-wide. Submit buttons are red, except on Bezpečnostní služby where they are green.

bg #fafafa · border 1px #f2f2f2 · radius 5px · padding 14px

Breakpoints

Responsive rules live in @media blocks appended to the end of style.css. Desktop styles are never modified.

Mobilemax-width: 768pxGrids stack to one column; headings drop to 28px.
Tablet onlymin-width: 769px and max-width: 1024pxTwo-column grids, reduced hero heights.
Tablet + mobilemax-width: 1024pxShared rules for both.

Note: template <style> blocks load after style.css, so !important in a template always wins. To override one, inject the @media rule into the template file, not into style.css.