okoli dveh polj */
.kw-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 540px) { .kw-row2 { grid-template-columns: 1fr; } }
/* ==========================================================================
14. Opomba / poudarjen blok
========================================================================== */
.kw-note {
background: var(--kw-accent-soft);
border: 1px solid var(--kw-border);
border-radius: var(--kw-radius);
padding: 1.2rem 1.4rem;
font-size: 0.94rem;
}
.kw-note--warn { background: var(--kw-amber-soft); }
.kw-note__label {
display: block;
font-family: var(--kw-font-mono);
font-size: 0.7rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--kw-accent-strong);
margin-bottom: 0.4rem;
}
/* ==========================================================================
15. Noga
========================================================================== */
.kw-footer {
background: var(--kw-footer-bg);
color: var(--kw-footer-fg);
padding: 3rem 0 1.8rem;
margin-top: 2rem;
}
.kw-footer__grid {
display: grid;
grid-template-columns: 1.3fr repeat(3, 1fr);
gap: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--kw-footer-line);
}
@media (max-width: 780px) { .kw-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .kw-footer__grid { grid-template-columns: 1fr; } }
.kw-footer h2, .kw-footer h3 {
font-family: var(--kw-font-mono);
font-size: 0.74rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--kw-amber);
margin: 0 0 0.9rem;
font-weight: 500;
}
.kw-footer p { font-size: 0.89rem; margin: 0 0 0.5rem; color: var(--kw-footer-fg-soft); }
.kw-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.89rem; }
.kw-footer a { color: var(--kw-footer-fg-soft); }
.kw-footer a:hover { color: var(--kw-footer-fg); }
.kw-footer__bottom {
padding-top: 1.4rem;
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
font-size: 0.8rem;
color: var(--kw-footer-fg-soft);
font-family: var(--kw-font-mono);
}
/* ==========================================================================
16. Poravnave blokov (WordPress)
========================================================================== */
.alignleft { float: left; margin: 0.4rem 1.4rem 1rem 0; }
.alignright { float: right; margin: 0.4rem 0 1rem 1.4rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text, figcaption { font-size: 0.84rem; color: var(--kw-ink-soft); margin-top: 0.4rem; }
.kw-prose .alignwide { max-width: none; }
.wp-block-image { margin: 1.4rem 0; }
.wp-block-buttons { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.wp-block-button__link {
background: var(--kw-accent); color: #fff;
padding: 0.7rem 1.3rem; border-radius: 7px;
font-weight: 600; font-size: 0.92rem; text-decoration: none;
}
.wp-block-separator { border: none; border-top: 1px solid var(--kw-border); margin: 2.2rem 0; }
/* ==========================================================================
17. Široka vsebina in navigacija med stranmi
========================================================================== */
.kw-content-wide > * { margin-bottom: 1rem; }
.kw-content-wide > h2 { margin-top: 2.6rem; }
.kw-content-wide > h3 { margin-top: 1.9rem; }
/* Besedilo v široki vsebini teče čez vso širino — tudi razlaga cenika pod
preglednicami. Zajamemo tudi eno raven ovoja, ker urejevalnik včasih
odstavke zapre v
. */
.kw-content-wide > p,
.kw-content-wide > ul,
.kw-content-wide > ol,
.kw-content-wide > h2,
.kw-content-wide > h3,
.kw-content-wide > h4,
.kw-content-wide > div > p,
.kw-content-wide > div > ul,
.kw-content-wide > div > ol,
.kw-content-wide > div > h2,
.kw-content-wide > div > h3 { max-width: none; }
.kw-content-wide > ul,
.kw-content-wide > ol { padding-left: 1.3rem; }
.kw-pagelinks { margin-top: 2rem; font-family: var(--kw-font-mono); font-size: 0.86rem; }
.navigation.pagination { margin-top: 2rem; }
.navigation.pagination .nav-links { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.navigation.pagination .page-numbers {
padding: 0.45rem 0.8rem;
border: 1px solid var(--kw-border);
border-radius: 7px;
font-family: var(--kw-font-mono);
font-size: 0.86rem;
color: var(--kw-ink-soft);
text-decoration: none;
}
.navigation.pagination .page-numbers:hover { border-color: var(--kw-accent); text-decoration: none; }
.navigation.pagination .page-numbers.current {
background: var(--kw-accent);
border-color: var(--kw-accent);
color: #fff;
}
/* Slika programske sheme */
.kw-schedule-img { width: 100%; height: auto; display: block; border-radius: var(--kw-radius-sm); }
/* ==========================================================================
12. Programska shema — seznam programov z iskanjem
========================================================================== */
.kw-channels { margin-bottom: 2.6rem; }
.kw-ch-tools {
display: flex; gap: .9rem; flex-wrap: wrap; align-items: center;
margin-bottom: 1rem;
}
.kw-ch-search {
flex: 1 1 240px; display: flex; align-items: center; gap: .5rem;
background: var(--kw-surface); border: 1px solid var(--kw-border);
border-radius: var(--kw-radius-sm); padding: .5rem .8rem;
}
.kw-ch-search input {
border: 0; outline: 0; background: none; width: 100%;
font: 400 .95rem var(--kw-font-body); color: var(--kw-ink);
}
.kw-ch-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.kw-ch-chip {
font: 500 .78rem var(--kw-font-body); color: var(--kw-ink);
padding: .4rem .8rem; border-radius: 999px;
border: 1px solid var(--kw-border); background: var(--kw-surface);
cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
}
.kw-ch-chip.is-active { border-color: var(--kw-accent); box-shadow: inset 0 0 0 1px var(--kw-accent); }
.kw-ch-chip i { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.kw-ch-count { font-family: var(--kw-font-mono); font-size: .78rem; color: var(--kw-ink-soft); }
.kw-channels table td:first-child {
font-family: var(--kw-font-mono); font-variant-numeric: tabular-nums;
color: var(--kw-ink-soft); width: 4.5rem;
}
.kw-channels table td:nth-child(2) { font-weight: 500; }
.kw-channels tbody tr:hover { background: var(--kw-surface-alt); }
.kw-channels tr.kw-ch-group td {
background: var(--kw-surface-alt); font-family: var(--kw-font-mono);
font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
color: var(--kw-ink-soft);
}
.kw-channels table thead th:last-child { text-align: left; }
.kw-channels table td:last-child { padding-right: 1rem; }
.kw-ch-empty { padding: 1.8rem 1rem; text-align: center; color: var(--kw-ink-soft); font-size: .9rem; }
.kw-pkg {
display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
font: 500 .76rem var(--kw-font-body); padding: .16rem .55rem; border-radius: 999px;
}
.kw-pkg i { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.kw-pkg--osnovni { background: var(--kw-ok-soft); color: #12482e; }
.kw-pkg--osnovni i { background: #2fae6c; }
.kw-pkg--razsirjen { background: var(--kw-accent-soft); color: #0a4d54; }
.kw-pkg--razsirjen i { background: #2ba4ad; }
.kw-pkg--dodatni { background: var(--kw-amber-soft); color: #7c4e0c; }
.kw-pkg--dodatni i { background: var(--kw-amber); }
.kw-pkg--start { background: var(--kw-amber-soft); color: #7c4e0c; }
.kw-pkg--start i { background: #f5a623; }
.kw-pkg--brez { background: var(--kw-surface-alt); color: var(--kw-ink-soft); }
.kw-pkg--brez i { background: var(--kw-border); }
.kw-pkgs { display: flex; gap: .3rem; flex-wrap: wrap; }
.kw-ch-legend {
display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .2rem 0 0;
font-size: .85rem; color: var(--kw-ink-soft);
}
.kw-ch-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.kw-ch-legend i { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
@media (max-width: 620px) {
.kw-channels table th:nth-child(3),
.kw-channels table td:nth-child(3) { display: none; }
.kw-channels table td:first-child { width: 3.2rem; }
.kw-pkgs--mob { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .25rem; }
}
@media (min-width: 621px) { .kw-pkgs--mob { display: none; } }
/* ==========================================================================
13. Domača stran — zaupanje, razlogi, koraki, pokritost, vprašanja
========================================================================== */
/* --- Trak z dejstvi pod naslovom ----------------------------------------- */
.kw-trust {
border: 1px solid var(--kw-border);
border-radius: var(--kw-radius);
background: var(--kw-surface);
margin: 0 0 1rem;
}
.kw-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.kw-trust__item {
display: flex; gap: .75rem; align-items: flex-start;
padding: 1.3rem 1.4rem;
}
.kw-trust__item + .kw-trust__item { border-left: 1px solid var(--kw-border); padding-left: 1.4rem; }
.kw-trust__icon {
flex: none; width: 30px; height: 30px; border-radius: 8px;
background: var(--kw-accent-soft); color: var(--kw-accent-strong);
display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.kw-trust__t { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.kw-trust__s { font-size: .82rem; color: var(--kw-ink-soft); line-height: 1.4; margin-top: .15rem; }
@media (max-width: 980px) {
.kw-trust__grid { grid-template-columns: repeat(2, 1fr); }
.kw-trust__item:nth-child(3) { border-left: 0; padding-left: 0; }
.kw-trust__item:nth-child(3), .kw-trust__item:nth-child(4) { border-top: 1px solid var(--kw-border); }
}
@media (max-width: 560px) {
.kw-trust__grid { grid-template-columns: 1fr; }
.kw-trust__item + .kw-trust__item { border-left: 0; padding-left: 0; border-top: 1px solid var(--kw-border); }
}
/* --- Razlogi ------------------------------------------------------------- */
.kw-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
/* Kartica z enakimi robovi kot povsod drugje. Spodaj malo več prostora,
da besedilo ne stoji tik ob dnu. */
.kw-reason {
background: var(--kw-surface);
border: 1px solid var(--kw-border);
border-radius: var(--kw-radius);
padding: 1.3rem 1.25rem 1.5rem;
}
@media (max-width: 900px) { .kw-reasons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kw-reasons { grid-template-columns: 1fr; } }
.kw-reason h3 {
display: flex; align-items: center; gap: .5rem;
margin: 0 0 .35rem; font-size: 1rem; font-weight: 600; font-family: var(--kw-font-body);
}
.kw-reason h3::before {
content: "\2713"; color: var(--kw-ok); font-weight: 700; flex: none;
}
.kw-reason p { margin: 0; color: var(--kw-ink-soft); font-size: .92rem; padding-left: 1.3rem; }
/* --- Koraki priklopa ----------------------------------------------------- */
.kw-steps { counter-reset: kwstep; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
@media (max-width: 900px) { .kw-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .kw-steps { grid-template-columns: 1fr; } }
.kw-step {
background: var(--kw-surface); border: 1px solid var(--kw-border);
border-radius: var(--kw-radius); padding: 1.4rem 1.3rem; position: relative;
}
.kw-step::before {
counter-increment: kwstep; content: counter(kwstep);
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
background: var(--kw-accent); color: #fff;
font-family: var(--kw-font-mono); font-size: .82rem; font-weight: 500;
margin-bottom: .8rem;
}
:root[data-kw-theme="dark"] .kw-step::before { color: #062224; }
.kw-step h3 { margin: 0 0 .3rem; font-size: .98rem; font-weight: 600; font-family: var(--kw-font-body); }
.kw-step p { margin: 0; color: var(--kw-ink-soft); font-size: .89rem; }
/* --- Kraji pokritosti ---------------------------------------------------- */
.kw-places { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.kw-places li {
font-family: var(--kw-font-mono); font-size: .84rem;
background: var(--kw-surface); border: 1px solid var(--kw-border);
border-radius: 999px; padding: .35rem .9rem;
}
/* --- Pogosta vprašanja --------------------------------------------------- */
.kw-faq { border: 1px solid var(--kw-border); border-radius: var(--kw-radius); background: var(--kw-surface); overflow: hidden; }
.kw-faq details + details { border-top: 1px solid var(--kw-border); }
.kw-faq summary {
cursor: pointer; padding: 1rem 1.2rem; font-weight: 500; font-size: .96rem;
display: flex; justify-content: space-between; gap: 1rem; align-items: center;
list-style: none;
}
.kw-faq summary::-webkit-details-marker { display: none; }
.kw-faq summary::after { content: "+"; font-family: var(--kw-font-mono); color: var(--kw-accent-strong); flex: none; }
.kw-faq details[open] summary::after { content: "\2212"; }
.kw-faq details[open] summary { color: var(--kw-accent-strong); }
.kw-faq .kw-faq__a { padding: 0 1.2rem 1.1rem; color: var(--kw-ink-soft); font-size: .93rem; }
.kw-faq .kw-faq__a p:last-child { margin-bottom: 0; }
/* --- Kontaktni trak ------------------------------------------------------ */
.kw-contactbar {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
background: var(--kw-surface); border: 1px solid var(--kw-border);
border-radius: var(--kw-radius); padding: 1.6rem;
}
@media (max-width: 900px) { .kw-contactbar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .kw-contactbar { grid-template-columns: 1fr; } }
.kw-contactbar h3 {
font-family: var(--kw-font-mono); font-size: .71rem; letter-spacing: .06em;
text-transform: uppercase; color: var(--kw-ink-soft); font-weight: 500; margin: 0 0 .45rem;
}
.kw-contactbar p { margin: 0 0 .2rem; font-size: .93rem; }
.kw-contactbar .kw-big { font-size: 1.12rem; font-weight: 600; font-family: var(--kw-font-mono); }
/* --- Gumba v naslovnem delu (namesto obrazca za pokritost) --------------- */
.kw-hero__actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.kw-hero__actions .kw-btn { padding: .8rem 1.4rem; font-size: .95rem; }
.kw-hero__hint { margin: .9rem 0 0; font-size: .87rem; color: var(--kw-ink-soft); max-width: 46ch; }
.kw-hero__hint-cta { margin: .45rem 0 0; font-size: .9rem; }
.kw-hero__hint-cta a { color: var(--kw-accent-strong); font-weight: 600; }
/* --- Dodatne vsebine ----------------------------------------------------- */
.kw-addons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 900px) { .kw-addons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kw-addons { grid-template-columns: 1fr; } }
.kw-addon {
background: var(--kw-surface); border: 1px solid var(--kw-border);
border-radius: var(--kw-radius); padding: 1.3rem 1.25rem;
display: flex; flex-direction: column; gap: .5rem;
}
.kw-addon__top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.kw-addon h3 { margin: 0; font-size: 1rem; font-weight: 600; font-family: var(--kw-font-body); }
.kw-addon__price {
font-family: var(--kw-font-mono); font-size: .82rem; white-space: nowrap;
background: var(--kw-accent-soft); color: var(--kw-accent-strong);
padding: .2rem .6rem; border-radius: 999px;
}
.kw-addon p { margin: 0; font-size: .89rem; color: var(--kw-ink-soft); flex-grow: 1; }
/* Odstavek okoli povezave nastane šele v WordPressu (wpautop). Ne sme
rasti — rasti mora opis, sicer povezava ne obvisi na dnu kartice. */
.kw-addon p.kw-addon__more { flex-grow: 0; }
.kw-addon a { font-size: .87rem; font-weight: 600; }
/* --- Kdo smo + zemljevid ------------------------------------------------- */
.kw-about { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .kw-about { grid-template-columns: 1fr; } }
.kw-about p { color: var(--kw-ink-soft); }
.kw-about p:first-child { color: var(--kw-ink); font-size: 1.05rem; }
.kw-map {
border: 1px solid var(--kw-border); border-radius: var(--kw-radius);
overflow: hidden; background: var(--kw-surface-alt);
}
.kw-map iframe { display: block; width: 100%; height: 340px; border: 0; }
.kw-map__foot {
display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
padding: .8rem 1rem; font-size: .87rem; border-top: 1px solid var(--kw-border);
background: var(--kw-surface);
}
/* ==========================================================================
20. Podrobnosti in gibanje
--------------------------------------------------------------------------
Kartice dobijo v mirovanju komaj vidno senco in se ob prehodu z miško
dvignejo. Vsebina se ob prvem drsenju do odseka enkrat nežno pojavi.
Vse to ugasne pri obiskovalcih, ki imajo v sistemu vklopljeno
»zmanjšaj gibanje« — glej tudi splošno pravilo na začetku datoteke.
========================================================================== */
/* --- kartice ------------------------------------------------------------- */
.kw-addon,
.kw-reason,
.kw-card,
.kw-tier,
.kw-help-item,
.kw-step {
box-shadow: 0 1px 2px rgba(14, 40, 44, 0.05), 0 4px 12px -8px rgba(14, 40, 44, 0.12);
transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1),
box-shadow 0.18s cubic-bezier(0.2, 0.7, 0.3, 1),
border-color 0.18s ease;
}
.kw-addon:hover,
.kw-reason:hover,
.kw-card:hover,
.kw-tier:hover,
.kw-help-item:hover,
.kw-step:hover {
transform: translateY(-3px);
border-color: var(--kw-accent-soft);
box-shadow: 0 2px 4px rgba(14, 40, 44, 0.06), 0 18px 34px -18px rgba(14, 40, 44, 0.35);
}
/* pri izpostavljenem paketu obdržimo obrobo v poudarjeni barvi */
.kw-tier--featured {
box-shadow: 0 0 0 1px var(--kw-accent), 0 4px 12px -8px rgba(14, 40, 44, 0.12);
}
.kw-tier--featured:hover {
border-color: var(--kw-accent);
box-shadow: 0 0 0 1px var(--kw-accent), 0 18px 34px -18px rgba(14, 40, 44, 0.35);
}
/* v temnem načinu je senca nesmiselna — vidnost naredi obroba */
:root[data-kw-theme="dark"] .kw-addon,
:root[data-kw-theme="dark"] .kw-reason,
:root[data-kw-theme="dark"] .kw-card,
:root[data-kw-theme="dark"] .kw-tier,
:root[data-kw-theme="dark"] .kw-help-item,
:root[data-kw-theme="dark"] .kw-step {
box-shadow: none;
}
:root[data-kw-theme="dark"] .kw-addon:hover,
:root[data-kw-theme="dark"] .kw-reason:hover,
:root[data-kw-theme="dark"] .kw-card:hover,
:root[data-kw-theme="dark"] .kw-tier:hover,
:root[data-kw-theme="dark"] .kw-help-item:hover,
:root[data-kw-theme="dark"] .kw-step:hover {
border-color: var(--kw-accent);
}
@media (prefers-color-scheme: dark) {
:root:not([data-kw-theme="light"]) .kw-addon,
:root:not([data-kw-theme="light"]) .kw-reason,
:root:not([data-kw-theme="light"]) .kw-card,
:root:not([data-kw-theme="light"]) .kw-tier,
:root:not([data-kw-theme="light"]) .kw-help-item,
:root:not([data-kw-theme="light"]) .kw-step { box-shadow: none; }
:root:not([data-kw-theme="light"]) .kw-addon:hover,
:root:not([data-kw-theme="light"]) .kw-reason:hover,
:root:not([data-kw-theme="light"]) .kw-card:hover,
:root:not([data-kw-theme="light"]) .kw-tier:hover,
:root:not([data-kw-theme="light"]) .kw-help-item:hover,
:root:not([data-kw-theme="light"]) .kw-step:hover { border-color: var(--kw-accent); }
}
/* --- puščica v kartici se ob prehodu premakne ---------------------------- */
.kw-addon { position: relative; }
.kw-addon__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.3rem; }
.kw-addon__link::after {
content: "\2192";
transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.kw-addon:hover .kw-addon__link::after { transform: translateX(3px); }
/* klikljiva je cela kartica */
.kw-addon__link::before {
content: ""; position: absolute; inset: 0; border-radius: var(--kw-radius);
}
.kw-addon:focus-within { border-color: var(--kw-accent); }
/* cena poravnana z vrhom naslova, tudi kadar se naslov prelomi */
.kw-addon__top { align-items: flex-start; }
.kw-addon h3 { line-height: 1.35; }
.kw-addon__price { font-variant-numeric: tabular-nums; line-height: 1.35; }
/* --- gumbi se odzovejo tudi na pritisk ----------------------------------- */
.kw-btn {
transition: background 0.16s ease, border-color 0.16s ease,
color 0.16s ease, transform 0.09s ease, box-shadow 0.16s ease;
}
.kw-btn--primary { box-shadow: 0 6px 14px -8px rgba(10, 89, 96, 0.7); }
.kw-btn--amber { box-shadow: 0 6px 14px -8px rgba(120, 78, 12, 0.55); }
.kw-btn:active { transform: translateY(1px); }
.kw-btn--ghost { background: var(--kw-surface); }
/* --- enkraten nežen prikaz ob drsenju ------------------------------------
Razrede doda skripta sama, zato v vsebini ni treba ničesar spreminjati.
Brez skripte razredov ni in vsebina je preprosto vidna.
------------------------------------------------------------------------ */
.kw-pojav {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.42s cubic-bezier(0.2, 0.7, 0.3, 1),
transform 0.42s cubic-bezier(0.2, 0.7, 0.3, 1);
transition-delay: var(--kw-zamik, 0ms);
}
.kw-pojav.je-viden { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.kw-pojav { opacity: 1 !important; transform: none !important; }
.kw-addon:hover, .kw-reason:hover, .kw-card:hover, .kw-tier:hover,
.kw-help-item:hover, .kw-step:hover { transform: none; }
.kw-btn:active { transform: none; }
}
/* pri tiskanju nič skritega */
@media print {
.kw-pojav { opacity: 1 !important; transform: none !important; }
}
/* Če se s tipkovnico premaknemo v element, ki še ni prikazan, ga takoj pokažemo. */
.kw-pojav:focus-within { opacity: 1; transform: none; }
/* ==========================================================================
21. Akcija v televizorju
--------------------------------------------------------------------------
Ohišje, stojalo, oznaka »v živo« in tekoči trak. Vse narisano s stilskimi
pravili — brez slik. Velikost pisave na zaslonu se meri glede na širino
televizorja (cqw), zato je razmerje enako pri vsaki širini strani.
Stikalo je v Prilagodi → KATE — domača stran.
========================================================================== */
.kw-tv {
width: 100%;
max-width: 560px;
container-type: inline-size;
}
.kw-tv__body {
position: relative;
border-radius: 18px;
padding: 2.5cqw;
background: linear-gradient(160deg, #2b3a3d 0%, #151f21 45%, #0b1214 100%);
box-shadow: 0 26px 50px -26px rgba(8, 26, 28, 0.65),
0 2px 0 rgba(255, 255, 255, 0.06) inset;
}
.kw-tv__screen {
position: relative;
overflow: hidden;
border-radius: 8px;
aspect-ratio: 16 / 9;
background: radial-gradient(120% 120% at 82% 8%, #12727c 0%, #0a5b65 45%, #063f47 100%);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5) inset,
0 12px 30px -10px rgba(0, 0, 0, 0.6) inset;
color: #eefbfb;
display: flex;
flex-direction: column;
justify-content: center;
}
/* zatemnitev pod besedilom, da ostane berljivo */
.kw-tv__screen::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background: linear-gradient(100deg, rgba(3, 26, 30, 0.55) 0%,
rgba(3, 26, 30, 0.28) 40%, rgba(3, 26, 30, 0) 72%);
}
/* odsev na steklu */
.kw-tv__screen::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%,
rgba(255, 255, 255, 0.05) 22%, rgba(255, 255, 255, 0) 46%);
}
.kw-tv__led {
position: absolute; right: 3.2cqw; bottom: 0.45cqw;
width: max(4px, 1.1cqw); height: max(4px, 1.1cqw); border-radius: 50%;
background: #f0b752; box-shadow: 0 0 8px 1px rgba(240, 183, 82, 0.8);
}
.kw-tv__brand {
position: absolute; left: 50%; bottom: 0.35cqw; transform: translateX(-50%);
font-family: var(--kw-font-mono);
/* velikost se meri glede na širino televizorja, da napis ostane v okviru */
font-size: max(6.5px, 1.7cqw); line-height: 1;
letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.38);
}
.kw-tv__stand { display: flex; flex-direction: column; align-items: center; }
.kw-tv__neck {
width: 15.5cqw; height: 4.7cqw;
background: linear-gradient(180deg, #1d2a2c, #131c1e);
clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
}
.kw-tv__foot {
width: 37.5cqw; height: 1.6cqw; min-height: 7px;
border-radius: 0 0 7px 7px;
background: linear-gradient(180deg, #223033, #0e1618);
box-shadow: 0 12px 22px -12px rgba(8, 26, 28, 0.7);
}
/* oznaka v kotu */
.kw-tv__zivo {
position: absolute; z-index: 2; top: 2.6cqw; right: 3.2cqw;
display: flex; align-items: center; gap: 0.35rem;
font-family: var(--kw-font-mono); font-size: max(0.58rem, 1.9cqw);
letter-spacing: 0.1em; color: #fff;
background: rgba(200, 46, 46, 0.94);
padding: 0.5cqw 1.2cqw; border-radius: 4px;
}
.kw-tv__zivo::before {
content: ""; width: 1.1cqw; height: 1.1cqw; min-width: 5px; min-height: 5px;
border-radius: 50%; background: #fff;
animation: kw-utrip-zivo 2s ease-in-out infinite;
}
@keyframes kw-utrip-zivo { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* tekoči trak */
.kw-tv__trak {
position: relative; z-index: 2; overflow: hidden;
background: rgba(4, 26, 29, 0.82);
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-family: var(--kw-font-mono); font-size: max(0.58rem, 2cqw);
color: #dff4f4; padding: 1.1cqw 0;
display: flex; white-space: nowrap;
}
.kw-tv__trak span { padding-left: 100%; animation: kw-trak 34s linear infinite; }
@keyframes kw-trak { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* --- akcija na zaslonu --------------------------------------------------- */
.kw-promo--tv {
position: relative; z-index: 1;
flex: 1; min-height: 0;
background: none; border-radius: 0; overflow: visible;
display: flex; flex-direction: column; justify-content: center;
padding: 3.8cqw; gap: 1cqw;
color: #eefbfb;
}
.kw-promo--tv::after { content: none; }
.kw-promo--tv .kw-promo__eyebrow {
margin: 0; opacity: 1; color: #b8f5f7;
font-size: max(0.66rem, 1.8cqw); letter-spacing: 0.16em;
display: flex; align-items: center; gap: 1.4cqw;
text-shadow: 0 1px 3px rgba(0, 18, 22, 0.6);
}
.kw-promo--tv .kw-promo__eyebrow::before {
content: ""; flex: none;
width: 1.1cqw; height: 1.1cqw; min-width: 5px; min-height: 5px;
border-radius: 50%; background: #f0b752;
}
.kw-promo--tv h2 {
margin: 0; font-size: max(0.95rem, 3.9cqw); line-height: 1.15;
text-shadow: 0 2px 8px rgba(0, 18, 22, 0.4);
}
.kw-promo--tv .kw-promo__price { margin: 0; }
.kw-promo--tv .kw-promo__amount { font-size: max(1.7rem, 8.4cqw); }
.kw-promo--tv .kw-promo__unit {
font-size: max(0.68rem, 2.1cqw); opacity: 1; color: rgba(255, 255, 255, 0.95);
text-shadow: 0 1px 3px rgba(0, 18, 22, 0.55);
}
.kw-promo--tv .kw-promo__list {
margin: 0;
font-size: max(0.7rem, 1.95cqw);
line-height: 1.35;
gap: 0.5cqw;
color: rgba(255, 255, 255, 0.97);
text-shadow: 0 1px 3px rgba(0, 18, 22, 0.55);
}
.kw-promo--tv .kw-promo__list li::before { background: #f0b752; }
.kw-promo--tv .kw-promo__fine {
margin: 0; font-size: max(0.74rem, 2cqw); line-height: 1.5;
opacity: 1; color: rgba(255, 255, 255, 0.95); max-width: 42ch;
text-shadow: 0 1px 3px rgba(0, 18, 22, 0.55);
}
.kw-promo--tv .kw-btn {
align-self: flex-start; margin-top: 0.6cqw;
font-size: max(0.7rem, 2.2cqw); padding: 1.1cqw 2.2cqw;
}
/* Na ozkem televizorju razmerje 16:9 popusti, da besedilo ostane berljivo.
Meri se širina televizorja, ne zaslona — zato deluje tudi v ožjem stolpcu. */
@container (max-width: 470px) {
.kw-tv__screen { aspect-ratio: auto; }
.kw-promo--tv { padding: 1.15rem 1.1rem; gap: 0.5rem; }
.kw-promo--tv .kw-promo__eyebrow { font-size: 0.66rem; gap: 0.45rem; }
.kw-promo--tv h2 { font-size: 1.2rem; }
.kw-promo--tv .kw-promo__amount { font-size: 2.5rem; }
.kw-promo--tv .kw-promo__unit { font-size: 0.72rem; }
.kw-promo--tv .kw-promo__list { font-size: 0.75rem; }
.kw-promo--tv .kw-promo__fine { font-size: 0.8rem; }
.kw-promo--tv .kw-btn { font-size: 0.85rem; padding: 0.6rem 1.05rem; margin-top: 0.4rem; }
.kw-tv__trak { font-size: 0.62rem; padding: 0.4rem 0; }
.kw-tv__zivo { font-size: 0.6rem; padding: 0.16rem 0.45rem; top: 0.6rem; right: 0.7rem; }
}
/* Brez podpore za poizvedbe po vsebniku ne tvegamo odrezanega besedila. */
@supports not (container-type: inline-size) {
.kw-tv__screen { aspect-ratio: auto; }
.kw-promo--tv { padding: 1.6rem 1.5rem; gap: 0.6rem; }
.kw-promo--tv h2 { font-size: 1.5rem; }
.kw-promo--tv .kw-promo__amount { font-size: 2.8rem; }
}
@media (prefers-reduced-motion: reduce) {
.kw-tv__zivo::before { animation: none; }
.kw-tv__trak span { animation: none; padding-left: 0.8rem; }
}
@media print {
.kw-tv__body { background: none; box-shadow: none; padding: 0; }
.kw-tv__stand, .kw-tv__led, .kw-tv__brand, .kw-tv__trak, .kw-tv__zivo { display: none; }
.kw-tv__screen { aspect-ratio: auto; background: none; color: #000; box-shadow: none; }
.kw-tv__screen::before, .kw-tv__screen::after { content: none; }
}
/* ==========================================================================
22. Znak obletnice — samostojen prvi stolpec noge
--------------------------------------------------------------------------
Znak stoji skrajno levo, navpično na sredini, pred štirimi obstoječimi
stolpci. Ti ostanejo nespremenjeni — noga jih ima pet, ne štiri.
========================================================================== */
.kw-footer__grid--znak { grid-template-columns: auto 1.3fr repeat(3, 1fr); }
.kw-footer__znak {
align-self: center; /* navpično na sredino ob ostalih stolpcih */
justify-self: start;
}
.kw-footer .kw-znak {
display: block;
width: 96px;
height: 96px;
color: #8fe7ea;
}
/* Pod to širino pet stolpcev ne gre več — znak se postavi v svojo vrstico
čez vso širino, ostali štirje stolpci pa se prelomijo kot doslej. */
@media (max-width: 1080px) {
.kw-footer__grid--znak { grid-template-columns: 1.3fr repeat(3, 1fr); }
.kw-footer__znak { grid-column: 1 / -1; margin-bottom: 0.4rem; }
}
@media (max-width: 780px) {
.kw-footer__grid--znak { grid-template-columns: 1fr 1fr; }
.kw-footer .kw-znak { width: 78px; height: 78px; }
}
@media (max-width: 480px) {
.kw-footer__grid--znak { grid-template-columns: 1fr; }
.kw-footer .kw-znak { width: 68px; height: 68px; }
}
/* ==========================================================================
23. Varovalka: v mrežah ne sme biti tujih otrok
--------------------------------------------------------------------------
WordPress pri obdelavi vsebine med elemente vstavi
ali prazen
.
V mreži tak element zasede celico in postavitev se poruši — štiri kartice
se pokažejo po dve v vrstici. Kratke kode to preprečijo že pri izvoru
(kw_zdruzi_vrstice v functions.php); to je druga obramba, za primer, da
vsebina pride iz drugega vira ali da jo urejevalnik zapiše drugače.
Neposredni otroci teh mrež so vedno kartice — nikoli odstavek ali prelom.
========================================================================== */
.kw-tiers > br, .kw-tiers > p,
.kw-help-grid > br, .kw-help-grid > p,
.kw-addons > br, .kw-addons > p,
.kw-reasons > br, .kw-reasons > p,
.kw-steps > br, .kw-steps > p,
.kw-plans > br, .kw-plans > p,
.kw-feats > br, .kw-feats > p,
.kw-trust__grid > br, .kw-trust__grid > p,
.kw-kontakt > br, .kw-kontakt > p,
.kw-storitve-kazalo > br, .kw-storitve-kazalo > p,
.kw-storitev__glava > br, .kw-storitev__glava > p,
.kw-storitev__dejstva > br, .kw-storitev__dejstva > p {
display: none;
}
/* ==========================================================================
23b. Razdelek »Vedno dosegljivi«
--------------------------------------------------------------------------
Tri kartice: brezplačna številka, dežurna številka in pisarna. Številke so
povezave tel:, ker je razdelek namenjen prav klicu — na telefonu je razlika
med besedilom in povezavo razlika med klicem in prepisovanjem.
========================================================================== */
.kw-kontakt {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
gap: 1rem;
}
.kw-kontakt__kartica {
background: var(--kw-surface);
border: 1px solid var(--kw-border);
border-radius: var(--kw-radius);
padding: 1.2rem 1.3rem;
min-width: 0;
}
.kw-kontakt__ikona {
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; margin-bottom: 0.7rem;
border-radius: var(--kw-radius-sm);
background: var(--kw-amber-soft); color: #8a5a12;
font-size: 1rem;
}
.kw-kontakt__glava {
margin: 0 0 0.35rem;
font-family: var(--kw-font-mono);
font-size: 1.18rem;
font-weight: 500;
line-height: 1.2;
overflow-wrap: anywhere;
}
.kw-kontakt__glava a { color: var(--kw-accent); text-decoration: none; }
.kw-kontakt__glava a:hover { text-decoration: underline; }
.kw-kontakt__opis {
margin: 0;
font-size: 0.88rem;
color: var(--kw-ink-soft);
line-height: 1.5;
}
/* Naslov pisarne ni številka: brez enopresledne pisave in nekoliko manjši,
da tri glave ostanejo optično enako težke. */
.kw-kontakt__kartica:last-child .kw-kontakt__glava {
font-family: inherit;
font-size: 1.05rem;
font-weight: 600;
}
.kw-kontakt + .kw-fine { margin-top: 1rem; }
/* ==========================================================================
24. Povečana pisava, kontrast in velikost tarč
--------------------------------------------------------------------------
Obiskovalec sme pisavo povečati na 200 %, ne da bi se stran razlezla čez
rob. Mreže, ki imajo trdno število stolpcev, tega ne zmorejo, ker se lomijo
po širini zaslona, povečana pisava pa širine zaslona ne spremeni. Zato jih
spodaj prevedemo v mero, ki raste skupaj s pisavo (rem): ko za stolpec ni
več prostora, se mreža prelomi sama.
========================================================================== */
.kw-addons { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.kw-reasons { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.kw-trust__grid { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.kw-steps { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
/* Ob prelomu na dva stolpca navpična črta med prvim in tretjim ni na mestu. */
@media (max-width: 980px) {
.kw-trust__item + .kw-trust__item { border-left: 0; padding-left: 1.4rem; }
.kw-trust__item + .kw-trust__item { border-top: 1px solid var(--kw-border); }
}
/* Dolga imena paketov naj se prelomijo, ne razširijo stolpca. */
.kw-tier__name, .kw-tier__lede, .kw-feats li, .kw-plan__speed { overflow-wrap: anywhere; }
/* Ikona ob gumbu pomoči je bila presvetla na svetli podlagi (razmerje 1,86).
Temnejša jantarna doseže 4,6 : 1 in ostane ista barvna družina. */
.kw-help-item__icon { color: #8a5a12; }
/* Najmanjša velikost tarče za prst: 24 slikovnih točk (WCAG 2.5.8).
Velja za samostojne gumbe in povezave, ne za povezave sredi stavka. */
/* Pri veliki pisavi glava ne sme siliti čez rob — raje se prelomi v dve vrstici. */
.kw-header__row { flex-wrap: wrap; row-gap: 0.5rem; }
.kw-header__actions { flex-shrink: 1; min-width: 0; }
.kw-header__actions .kw-btn { min-width: 0; }
.kw-docsearch__toggle { min-height: 24px; padding: 0.25rem 0.5rem; }
.kw-card__link, .kw-addon__link { display: inline-flex; align-items: center; min-height: 24px; }
/* ==========================================================================
25. Stran Storitve — dolgi opisi posameznih storitev
--------------------------------------------------------------------------
Vsaka storitev ima svoj zaznamek, na katerega kažejo kartice z naslovnice.
scroll-margin-top poskrbi, da lepljiva glava ob skoku ne prekrije naslova.
========================================================================== */
.kw-storitve-kazalo {
display: flex; flex-wrap: wrap; gap: 0.5rem;
margin: 0 0 2.2rem;
}
.kw-storitve-kazalo a {
font-family: var(--kw-font-mono); font-size: 0.82rem;
background: var(--kw-surface); border: 1px solid var(--kw-border);
border-radius: 999px; padding: 0.4rem 0.9rem;
color: var(--kw-accent-strong); text-decoration: none;
display: inline-flex; align-items: center; min-height: 24px;
}
.kw-storitve-kazalo a:hover { border-color: var(--kw-accent); text-decoration: none; }
.kw-storitev {
background: var(--kw-surface);
border: 1px solid var(--kw-border);
border-radius: var(--kw-radius);
padding: 1.7rem 1.6rem 1.8rem;
margin: 0 0 1.25rem;
scroll-margin-top: 6rem;
}
h2.kw-storitev__glava {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
margin: 0 0 0.9rem;
font-size: clamp(1.25rem, 2.2vw, 1.5rem);
max-width: none;
}
.kw-storitev__cena {
flex: none;
font-family: var(--kw-font-mono); font-size: 0.9rem;
font-variant-numeric: tabular-nums; white-space: nowrap;
background: var(--kw-accent-soft); color: var(--kw-accent-strong);
padding: 0.3rem 0.75rem; border-radius: 999px;
}
.kw-storitev p { margin: 0 0 0.9rem; max-width: none; }
.kw-storitev__uvod { font-size: 1.04rem; }
.kw-storitev p:not(.kw-storitev__uvod):not(.kw-storitev__poziv) { color: var(--kw-ink-soft); }
.kw-storitev__dejstva {
list-style: none; margin: 1.2rem 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
gap: 0.5rem 1.4rem;
border-top: 1px solid var(--kw-border);
padding-top: 1.1rem;
}
.kw-storitev__dejstva li {
display: flex; align-items: flex-start; gap: 0.5rem;
font-size: 0.9rem; color: var(--kw-ink-soft);
}
.kw-storitev__dejstva li::before {
content: "\2713"; color: var(--kw-ok); font-weight: 700; flex: none;
}
.kw-storitev__poziv {
margin: 0; font-size: 0.9rem;
padding-top: 0.9rem; border-top: 1px solid var(--kw-border);
}
/* Zaznamek, do katerega pripelje povezava, se ob prihodu na kratko poudari. */
.kw-storitev:target { border-color: var(--kw-accent); box-shadow: 0 0 0 1px var(--kw-accent); }
/* -------------------------------------------------------------------------
* 26. Telefonske številke se ne lomijo
*
* »031 600 750« ima presledke, zato jo brskalnik v ozkem stolpcu noge prelomi
* na »031 600« in »750« — številka postane neberljiva. Presledki v telefonski
* številki niso mesta za prelom.
* ---------------------------------------------------------------------- */
a[href^="tel:"],
.kw-nowrap { white-space: nowrap; }
/* -------------------------------------------------------------------------
* 27. Vzdušje ozadja
*
* Stran je bila po odzivih »pusta kot časopis«: bela podlaga, črno besedilo,
* vse sekcije enake. Zdravilo ni slika za vsem besedilom — ta poje berljivost
* in se hitro postara. Namesto tega:
*
* — sekcije se izmenjujejo v podlagi, da se med njimi vidi meja,
* — v naslovnem delu je zelo blag vzorec koncentričnih krogov, ki spominja
* na oddajanje signala — narejen samo s CSS prelivi, brez slike in brez
* ene same dodatne zahteve na strežnik,
* — ena sekcija je temna in strani da oporo za oko.
*
* Vse tri stopnje krmili nastavitev Videz → Prilagodi → KATE — videz.
* Barve vzorca so vezane na spremenljivke, zato delujejo v svetli in temni
* različici strani.
* ---------------------------------------------------------------------- */
:root {
--kw-vzorec: rgba(14, 124, 134, 0.10);
--kw-vzorec-mocno: rgba(14, 124, 134, 0.16);
/* Barvni pas ima svoje barve in ne uporablja --kw-accent-strong. Ta je v
temnem načinu svetel odtenek; pas bi postal svetel, beli naslov na njem
pa neberljiv. Pas mora ostati temen v obeh načinih. */
--kw-pas-od: #0a5960;
--kw-pas-do: #0e7c86;
--kw-pas-besedilo: #f2f7f7;
--kw-pas-besedilo-soft: rgba(240, 250, 250, 0.88);
}
:root:not([data-kw-theme="light"]) {
--kw-vzorec: rgba(120, 200, 205, 0.09);
--kw-vzorec-mocno: rgba(120, 200, 205, 0.14);
--kw-pas-od: #0c2f33;
--kw-pas-do: #124b50;
--kw-pas-besedilo: #eafafa;
--kw-pas-besedilo-soft: rgba(234, 250, 250, 0.86);
}
@media (prefers-color-scheme: light) {
:root:not([data-kw-theme="dark"]) {
--kw-vzorec: rgba(14, 124, 134, 0.10);
--kw-vzorec-mocno: rgba(14, 124, 134, 0.16);
--kw-pas-od: #0a5960;
--kw-pas-do: #0e7c86;
--kw-pas-besedilo: #f2f7f7;
--kw-pas-besedilo-soft: rgba(240, 250, 250, 0.88);
}
}
:root[data-kw-theme="dark"] {
--kw-vzorec: rgba(120, 200, 205, 0.09);
--kw-vzorec-mocno: rgba(120, 200, 205, 0.14);
--kw-pas-od: #0c2f33;
--kw-pas-do: #124b50;
--kw-pas-besedilo: #eafafa;
--kw-pas-besedilo-soft: rgba(234, 250, 250, 0.86);
}
/* --- Koncentrični krogi: signal iz oddajnika ------------------------- */
.kw-vzdusje-nezno .kw-hero,
.kw-vzdusje-izrazito .kw-hero {
position: relative;
isolation: isolate;
}
.kw-vzdusje-nezno .kw-hero::before,
.kw-vzdusje-izrazito .kw-hero::before {
content: "";
position: absolute;
/* Vodoravno ne štrlimo čez rob: pri -2rem na vsako stran je stran dobila
32 px vodoravnega drsenja na vseh širinah. Vzorec se proti robu tako ali
tako izgubi v maski, zato štrlenja ne potrebuje. */
inset: -1rem 0 0;
z-index: -1;
background:
repeating-radial-gradient(circle at 84% 18%,
var(--kw-vzorec) 0 1px, transparent 1px 34px);
/* Proti robovom vzorec ugasne, da ne reže naslova in ne dela okvirja. */
mask-image: radial-gradient(120% 90% at 82% 20%, #000 0%, transparent 72%);
-webkit-mask-image: radial-gradient(120% 90% at 82% 20%, #000 0%, transparent 72%);
pointer-events: none;
}
/* --- Isti vzorec na vseh straneh ------------------------------------ */
/* Vzdušje ni bilo samo na domači strani zato, ker bi bilo tam bolj potrebno,
ampak ker sem ga naredil na naslovnem delu, ki ga imajo samo tam. Notranje
strani imajo .kw-page — vzorec je zato zdaj tudi na njem, z isto obliko,
isto masko in isto barvo, da je stran videti kot ena celota.
Višina je omejena: vzorec pripada naslovnemu delu strani, ne celotni
dolžini cenika ali programske sheme. */
.kw-vzdusje-nezno .kw-page,
.kw-vzdusje-izrazito .kw-page {
position: relative;
isolation: isolate;
}
.kw-vzdusje-nezno .kw-page::before,
.kw-vzdusje-izrazito .kw-page::before {
content: "";
position: absolute;
inset: -1rem 0 auto 0;
height: clamp(320px, 42vh, 520px);
z-index: -1;
background:
repeating-radial-gradient(circle at 86% 14%,
var(--kw-vzorec) 0 1px, transparent 1px 34px);
mask-image: radial-gradient(115% 100% at 84% 12%, #000 0%, transparent 70%);
-webkit-mask-image: radial-gradient(115% 100% at 84% 12%, #000 0%, transparent 70%);
pointer-events: none;
}
/* Pri izrazitem vzdušju dobi tudi konec strani svoj krog, na nasprotni
strani — dolge strani se drugače proti dnu spet sprevržejo v časopis. */
.kw-vzdusje-izrazito .kw-page::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: clamp(260px, 30vh, 420px);
z-index: -1;
background:
repeating-radial-gradient(circle at 8% 92%,
var(--kw-vzorec) 0 1px, transparent 1px 40px);
mask-image: radial-gradient(90% 100% at 6% 94%, #000 0%, transparent 72%);
-webkit-mask-image: radial-gradient(90% 100% at 6% 94%, #000 0%, transparent 72%);
pointer-events: none;
}
/* --- Izmenjava podlage med sekcijami -------------------------------- */
/* Izmenjava je označena v vsebini z razredom .kw-section--pas, ne s
:nth-of-type. Vrstni red: nth-of-type šteje vse sosednje elemente div, ne
samo sekcij, zato je vsak nov razdelek prevrnil parnost in dve obarvani
sekciji sta obstali zapored. Razred je odvisen samo od sebe. */
.kw-vzdusje-nezno .kw-section--pas,
.kw-vzdusje-izrazito .kw-section--pas {
background: var(--kw-surface-alt);
border-radius: var(--kw-radius);
padding-left: 1.6rem;
padding-right: 1.6rem;
}
/* --- Reliefne črte pod sekcijo s kraji ------------------------------ */
.kw-vzdusje-izrazito #kje-smo {
position: relative;
isolation: isolate;
}
.kw-vzdusje-izrazito #kje-smo::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: var(--kw-radius);
background:
repeating-radial-gradient(circle at 12% 120%,
var(--kw-vzorec) 0 1px, transparent 1px 26px);
mask-image: radial-gradient(110% 140% at 10% 115%, #000 0%, transparent 70%);
-webkit-mask-image: radial-gradient(110% 140% at 10% 115%, #000 0%, transparent 70%);
pointer-events: none;
}
/* --- Barvna sekcija: opora za oko ----------------------------------- */
/* Prva izvedba je bila skoraj črna (barva noge). Na sredini strani je delovala
kot tujek: v paleti te barve ni, edina temna ploskev je noga. Zdaj je to
firmina barva — isti preliv kot promocijska kartica v televizorju, zato
sekcija pripada isti družini in ne izpade iz videza. */
.kw-vzdusje-izrazito #zakaj-kate {
background: linear-gradient(155deg, var(--kw-pas-od), var(--kw-pas-do));
border-radius: var(--kw-radius);
padding: clamp(2.1rem, 3.6vw, 2.9rem) 1.6rem;
margin-top: clamp(0.6rem, 1.4vw, 1rem);
margin-bottom: clamp(0.6rem, 1.4vw, 1rem);
}
/* Posvetlimo SAMO naslov in podnaslov same sekcije. Naslovi h3 so znotraj
belih kartic — če posvetlimo tudi njih, postanejo nevidni. */
.kw-vzdusje-izrazito #zakaj-kate > .kw-section__head h2 {
color: var(--kw-pas-besedilo);
}
.kw-vzdusje-izrazito #zakaj-kate > .kw-section__head p {
color: var(--kw-pas-besedilo-soft);
}
/* Kartice ostanejo svetle. Na temni podlagi delujejo kot vstavljeni listi,
kontrast besedila v njih pa ostane nespremenjen in preverjen. */
.kw-vzdusje-izrazito #zakaj-kate .kw-reason {
background: var(--kw-surface);
border-color: transparent;
}