/* =============================================================================
BASE - reset, typography defaults, layout primitives
=============================================================================
Depends on css/tokens.css. Load tokens.css first.
MIGRATION COMPLETE. This file used to be wrapped in `@layer dc-base` so that
the legacy stylesheet (styles.css) would win every conflict while the
redesign was in progress. styles.css has now been retired and unlinked from
every page, so the layer wrapper, the element-heading opt-out and the
`:not(.btn)` guards on the button rules have all been removed. These are the
site's real defaults now.
Note on headings: h1–h6 still inherit font-family from on purpose.
The reference site sets Poppins on everything, so --font-heading and
--font-body are the same family; swap in var(--font-heading) here if they
ever diverge.
============================================================================= */
/* =========================================================================
1. MODERN RESET
===================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Intentionally NOT setting `display:block` on media here: the legacy
markup relies on inline images in a few places and flipping them to
block would shift layout by the inline baseline gap. Sizing only. */
img,
picture,
video,
canvas,
svg {
max-width: 100%;
}
/* Family/size/color are inherited; weight, style and line-height are
deliberately left alone. `line-height: inherit` in particular would
change the rendered height of every legacy button, input and select
(they currently compute to `normal`). */
input,
button,
textarea,
select {
font-family: inherit;
font-size: inherit;
color: inherit;
}
button {
background: none;
border: none;
cursor: pointer;
}
/* Wrapped in :where() so this reset carries ZERO specificity. Written as a
bare `ul[class]` it scored (0,1,1) and silently beat any single-class
component rule - it was zeroing the padding on .dc-pinfo-notes and the
indent on the mega-menu sub-lists. A reset must never outrank a component. */
:where(ul[class], ol[class]) {
list-style: none;
padding: 0;
}
a {
color: inherit;
text-decoration: none;
}
table {
border-collapse: collapse;
width: 100%;
}
iframe {
border: 0;
}
:focus-visible {
outline: 2px solid var(--border-brand);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* =========================================================================
2. TYPOGRAPHY DEFAULTS
is styled directly by styles.css too, so these declarations are
inert today and become the site defaults the moment styles.css goes.
===================================================================== */
body {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--fw-regular);
line-height: var(--leading-body);
color: var(--text);
background-color: var(--surface);
}
/* Headings inherit family, colour and line-height from on purpose -
see the file header. `inherit` is also the correct end state: the
reference site sets Poppins on everything, so --font-heading and
--font-body are the same family. If they ever diverge, swap this for
var(--font-heading). */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit;
}
strong,
b {
font-weight: var(--fw-bold);
}
/* =========================================================================
2b. ELEMENT-LEVEL HEADING DEFAULTS (enabled - styles.css is retired)
Identical values to the .h1–.h6 utilities below.
===================================================================== */
h1 { font-size: var(--text-6xl); font-weight: var(--fw-black);
line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-5xl); font-weight: var(--fw-regular);
line-height: var(--leading-heading); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-4xl); font-weight: var(--fw-bold);
line-height: var(--leading-heading); }
h4 { font-size: var(--text-2xl); font-weight: var(--fw-semibold);
line-height: var(--leading-heading); }
h5 { font-size: var(--text-lg); font-weight: var(--fw-semibold);
line-height: var(--leading-heading); }
h6 { font-size: var(--text-base); font-weight: var(--fw-semibold);
line-height: var(--leading-heading); }
@media (max-width: 1023px) {
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
}
@media (max-width: 767px) {
h1 { font-size: var(--text-4xl); letter-spacing: normal; }
h2 { font-size: var(--text-3xl); letter-spacing: normal; }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-lg); }
}
/* =========================================================================
3. TYPE SCALE UTILITIES
Apply to any element: ,
, …
===================================================================== */
.display-1 {
font-size: var(--text-6xl);
font-weight: var(--fw-black);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
}
.h1 {
font-size: var(--text-6xl);
font-weight: var(--fw-black);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
}
.h2 {
font-size: var(--text-5xl);
font-weight: var(--fw-regular);
line-height: var(--leading-heading);
letter-spacing: var(--tracking-tight);
}
.h3 {
font-size: var(--text-4xl);
font-weight: var(--fw-bold);
line-height: var(--leading-heading);
}
.h4 {
font-size: var(--text-2xl);
font-weight: var(--fw-semibold);
line-height: var(--leading-heading);
}
.h5 {
font-size: var(--text-lg);
font-weight: var(--fw-semibold);
line-height: var(--leading-heading);
}
.h6 {
font-size: var(--text-base);
font-weight: var(--fw-semibold);
line-height: var(--leading-heading);
}
.body-lg {
font-size: var(--text-md);
line-height: var(--leading-body);
}
.body-sm {
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
/* =========================================================================
4. HEADING HELPERS
===================================================================== */
/* "
Vaš partner …
"
- the reference's signature pattern: one word picked out in the brand
colour and set heavier than the rest of the heading. */
.accent-word {
color: var(--brand-text);
font-weight: var(--fw-bold);
}
/* Same pattern, weight only - for use on coloured/dark backgrounds. */
.accent-word-strong {
font-weight: var(--fw-black);
}
/* Small uppercase eyebrow label that sits above a heading. */
.eyebrow {
display: block;
font-size: var(--text-sm);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--brand-text);
}
.lead {
font-size: var(--text-md);
line-height: var(--leading-body);
color: var(--text-muted);
}
.text-accent {
color: var(--brand-text);
}
.text-muted {
color: var(--text-muted);
}
/* =========================================================================
5. LAYOUT - container & section
===================================================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--container-pad);
padding-right: var(--container-pad);
}
/* Full-bleed variant matching the reference site's 1440px shell. */
.container-wide {
max-width: var(--container-wide);
}
.container-narrow {
max-width: 820px;
}
.section {
padding-top: var(--space-8);
padding-bottom: var(--space-8);
}
.section-tight {
padding-top: var(--space-6);
padding-bottom: var(--space-6);
}
.section-alt {
background-color: var(--surface-alt);
}
.section-tinted {
background-color: var(--surface-tint);
}
.section-sunken {
background-color: var(--surface-sunken);
}
/* =========================================================================
6. BUTTONS
Pill geometry, Poppins 16px/600 - matches the reference exactly.
The hover state (fill turns --text, label turns white) is the
reference's own behaviour.
`` excludes the legacy composite `class="btn btn-primary"`,
which styles.css still owns. Drop the guard once styles.css is gone.
===================================================================== */
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--fw-semibold);
line-height: var(--leading-heading);
text-align: center;
border-radius: var(--radius-pill);
border: 1px solid transparent;
cursor: pointer;
transition: background-color var(--duration-base) var(--ease),
color var(--duration-base) var(--ease),
border-color var(--duration-base) var(--ease),
box-shadow var(--duration-base) var(--ease),
transform var(--duration-base) var(--ease);
}
.btn-primary {
background-color: var(--brand-text);
color: var(--text-on-brand);
border-color: var(--brand-text);
}
.btn-primary:hover,
.btn-primary:focus-visible {
background-color: var(--brand-deep);
border-color: var(--brand-deep);
color: var(--text-inverse);
box-shadow: var(--shadow-2);
}
.btn-secondary {
background-color: var(--surface);
color: var(--brand-text);
border-color: var(--border);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
background-color: var(--brand-deep);
border-color: var(--brand-deep);
color: var(--text-inverse);
box-shadow: var(--shadow-2);
}
.btn-primary:active,
.btn-secondary:active {
transform: translateY(1px);
box-shadow: none;
}
.btn-primary[disabled],
.btn-secondary[disabled] {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-block {
width: 100%;
}
/* =========================================================================
7. CARD
===================================================================== */
.card {
display: flex;
flex-direction: column;
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
overflow: hidden;
transition: box-shadow var(--duration-base) var(--ease),
transform var(--duration-base) var(--ease),
border-color var(--duration-base) var(--ease);
}
.card:hover {
border-color: var(--border-subtle);
box-shadow: var(--shadow-3);
transform: translateY(-2px);
}
.card-flat:hover {
transform: none;
box-shadow: var(--shadow-1);
}
.card-body {
padding: var(--space-4);
}
.card-media {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
/* =========================================================================
8. RESPONSIVE
desktop >= 1024 | tablet 768–1023 | mobile < 768
===================================================================== */
/* Tablet */
@media (max-width: 1023px) {
.display-1,
.h1 {
font-size: var(--text-5xl);
}
.h2 {
font-size: var(--text-4xl);
}
.h3 {
font-size: var(--text-3xl);
}
.section {
padding-top: var(--space-7);
padding-bottom: var(--space-7);
}
}
/* Mobile */
@media (max-width: 767px) {
.display-1,
.h1 {
font-size: var(--text-4xl);
letter-spacing: normal;
}
.h2 {
font-size: var(--text-3xl);
letter-spacing: normal;
}
.h3 {
font-size: var(--text-2xl);
}
.h4 {
font-size: var(--text-lg);
}
.container {
padding-left: var(--container-pad-sm);
padding-right: var(--container-pad-sm);
}
.section {
padding-top: var(--space-6);
padding-bottom: var(--space-6);
}
.btn-primary,
.btn-secondary {
padding: var(--space-3) var(--space-4);
}
}