/* AuPortal SK, lišta so súhlasom.
PREVZATÉ z adam.lukacka.com, súbor
assets/cookieconsent-light-package/css/cookieconsent-light.css.
Zmenené sú IBA farby, štruktúra a opravy rozloženia zostali nedotknuté.
Napísať si to po svojom bola chyba: ten balík má odladené veci, ktoré sa
inak objavia az na živom webe, napríklad tlačidlá v jednom riadku bez
zalomenia a šírka obsahu, ktorá sedí so zvyškom stránky.
Svetlá téma je preložená do tmavej palety projektu: podklad --au-ink,
text --au-bone a --au-slate, akcent --au-bronze. Text na bronzovom
tlačidle je --au-void, nie biely: biela na bronzovej má 1,9:1. */
/**
* CookieConsent v3 - Light Theme
*
* Light version of the cookie consent bar styling.
* Include this file AFTER the CookieConsent library CSS.
* Do NOT add cc--darkmode class to when using this theme.
*
* Usage:
*
*
*
*/
#cc-main {
--cc-bg: rgba(20, 22, 26, 0.94);
--cc-primary-color: #edede9;
--cc-secondary-color: #9ba1a9;
--cc-btn-primary-bg: #b08965;
--cc-btn-primary-color: #0e1013;
--cc-btn-primary-hover-bg: #c69f7a;
--cc-btn-secondary-bg: rgba(237, 237, 233, 0.10);
--cc-btn-secondary-color: #edede9;
--cc-btn-secondary-hover-bg: rgba(237, 237, 233, 0.18);
--cc-separator-border-color: rgba(237, 237, 233, 0.12);
--cc-toggle-on-bg: #b08965;
--cc-toggle-off-bg: #3a4048;
--cc-toggle-on-knob-bg: #0e1013;
--cc-toggle-off-knob-bg: #edede9;
--cc-cookie-category-block-bg: rgba(237, 237, 233, 0.05);
--cc-cookie-category-block-hover-bg: rgba(237, 237, 233, 0.10);
--cc-footer-bg: rgba(237, 237, 233, 0.05);
--cc-footer-color: #9ba1a9;
--cc-footer-border-color: rgba(237, 237, 233, 0.12);
--cc-overlay-bg: rgba(14, 16, 19, 0.78);
--cc-font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--cc-modal-border-radius: 0;
--cc-btn-border-radius: 6px;
--cc-font-size: 0.84rem;
}
/* Consent bar - matches Bootstrap .container width exactly */
#cc-main .cm,
#cc-main .cm.cm--bar,
#cc-main .cm.cm--bar.cm--inline {
max-width: 100% !important;
width: 100% !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: none !important;
border-top: 1px solid rgba(237, 237, 233, 0.12) !important;
border-radius: 0 !important;
box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.55);
}
/* Body matches Bootstrap .container responsive widths */
#cc-main .cm__body,
#cc-main .cm.cm--bar .cm__body,
#cc-main .cm.cm--bar.cm--inline .cm__body {
max-width: 1320px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 1.1rem 12px !important;
display: flex !important;
align-items: center !important;
gap: 2rem !important;
box-sizing: border-box !important;
}
@media (max-width: 1399.98px) {
#cc-main .cm__body,
#cc-main .cm.cm--bar .cm__body,
#cc-main .cm.cm--bar.cm--inline .cm__body {
max-width: 1140px !important;
}
}
@media (max-width: 1199.98px) {
#cc-main .cm__body,
#cc-main .cm.cm--bar .cm__body {
max-width: 960px !important;
}
}
@media (max-width: 991.98px) {
#cc-main .cm__body,
#cc-main .cm.cm--bar .cm__body {
max-width: 720px !important;
}
}
/* Text container — no extra padding from library */
#cc-main .cm__texts,
#cc-main .cm.cm--bar .cm__texts,
#cc-main .cm.cm--bar.cm--inline .cm__texts {
flex: 1;
min-width: 0;
padding: 0 !important;
margin: 0 !important;
}
#cc-main .cm__title,
#cc-main .cm.cm--bar .cm__title {
font-size: 0.92rem;
font-weight: 600;
margin-bottom: 0.25rem;
padding: 0 !important;
color: #edede9;
}
#cc-main .cm__desc,
#cc-main .cm.cm--bar .cm__desc {
font-size: 0.8rem;
line-height: 1.5;
/* Bez opacity (28. 9. 2026): opacity .75 stlmila text na 4,43:1 a bronzovy
odkaz na 3,74:1, PSI mobil prístupnost 96. Slate #9ba1a9 ma na #14161a
6,96:1, odkaz #b08965 5,70:1. Tlmenie robi farba, nie priehladnost. */
padding: 0 !important;
margin: 0 !important;
color: #9ba1a9;
}
/* Override library's combined title+desc horizontal padding */
#cc-main .cm__desc,
#cc-main .cm__title {
padding: 0 !important;
}
/* Button container — always row, never wrap, no max-width limit */
#cc-main .cm__btns,
#cc-main .cm.cm--bar .cm__btns,
#cc-main .cm.cm--bar.cm--inline .cm__btns,
#cc-main .cm--bar.cm--inline .cm__btns {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 0.5rem !important;
flex-shrink: 0 !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
}
/* Kill library's margin-top on adjacent buttons and button groups */
#cc-main .cm__btn + .cm__btn,
#cc-main [class*="cm__btn-group"] + [class*="cm__btn-group"] {
margin-top: 0 !important;
margin: 0 !important;
}
/* Button groups — size to content, not 50/50 split.
display:flex is REQUIRED here. The theme shipped `gap` on this selector while the
element stayed `display:block`, and gap does nothing on a block container, so the
two buttons inside a group rendered flush against each other and read as one wide
amber slab. Adam spotted it as "no space between the consent buttons". */
#cc-main [class*="cm__btn-group"] {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
flex: none !important;
gap: 0.5rem !important;
}
/* All buttons — auto width so text fits, no overflow clipping */
#cc-main .cm .cm__btn,
#cc-main .cm.cm--bar .cm__btn,
#cc-main .cm.cm--bar.cm--inline .cm__btn,
#cc-main .cm .cm__btn[data-role] {
font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
padding: 0.45rem 1.1rem !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: unset !important;
width: auto !important;
min-width: fit-content !important;
max-width: none !important;
flex: 0 0 auto !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
line-height: 1.4 !important;
text-align: center !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
/* Primary button (Povoliť všetko / Accept all) — solid orange */
#cc-main .cm .cm__btn[data-role="all"] {
background: #b08965 !important;
color: #0e1013 !important;
border: 1px solid #b08965 !important;
}
#cc-main .cm .cm__btn[data-role="all"]:hover {
background: #c69f7a !important;
border-color: #c69f7a !important;
}
/* Secondary button (Odmietnuť všetko / Reject all) — solid orange, same as primary */
#cc-main .cm .cm__btn[data-role="necessary"] {
background: #b08965 !important;
color: #0e1013 !important;
border: 1px solid #b08965 !important;
}
#cc-main .cm .cm__btn[data-role="necessary"]:hover {
background: #c69f7a !important;
border-color: #c69f7a !important;
}
/* Tertiary button (Prispôsobiť / Customize) — ghost outline */
#cc-main .cm .cm__btn[data-role="show"] {
background: transparent !important;
color: rgba(237, 237, 233, 0.55) !important;
border: 1px solid rgba(237, 237, 233, 0.22) !important;
}
#cc-main .cm .cm__btn[data-role="show"]:hover {
color: #edede9 !important;
border-color: rgba(237, 237, 233, 0.40) !important;
background: rgba(237, 237, 233, 0.07) !important;
}
/* Mobile responsive */
@media (max-width: 767.98px) {
#cc-main .cm__body,
#cc-main .cm.cm--bar .cm__body {
flex-direction: column !important;
gap: 0.75rem !important;
padding: 1.2rem 1rem !important;
max-width: 100% !important;
}
#cc-main .cm__btns,
#cc-main .cm.cm--bar .cm__btns,
#cc-main .cm.cm--box .cm__btns {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
gap: 0.4rem !important;
border: none !important;
}
#cc-main .cm__btn-group,
#cc-main .cm .cm__btn-group,
#cc-main .cm.cm--bar .cm__btn-group,
#cc-main .cm [class*="cm__btn-group"] {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
flex: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
gap: 0.4rem !important;
}
#cc-main .cm .cm__btn,
#cc-main .cm.cm--box .cm__btn,
#cc-main .cm.cm--bar .cm__btn,
#cc-main .cm [class*="cm__btn--"] {
flex: 1 1 0 !important;
min-width: 0 !important;
width: auto !important;
padding: 0.4rem 0.25rem !important;
font-size: 0.72rem !important;
white-space: nowrap !important;
text-align: center !important;
margin: 0 !important;
border-radius: 6px !important;
}
#cc-main .cm .cm__btn[data-role="all"] {
margin-right: 0 !important;
}
}
/* Preferences modal */
#cc-main .pm {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: rgba(20, 22, 26, 0.95);
}
#cc-main .pm__title {
font-size: 1.1rem;
color: #edede9;
}
#cc-main .pm__section-desc,
#cc-main .pm__section-title {
font-size: 0.85rem;
}
#cc-main .cc-link {
color: #b08965;
}
#cc-main .cc-link:hover {
color: #c69f7a;
}
/* Cookie settings button (floating) */
#cookie-settings-btn {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 999;
width: 40px;
height: 40px;
border-radius: 50%;
background: #262a30;
border: 1px solid rgba(0, 0, 0, 0.55);
color: #b08965;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0.7;
}
#cookie-settings-btn:hover {
opacity: 1;
background: #b08965;
color: #0e1013;
transform: scale(1.1);
}
/* --- Úzka obrazovka: všetky tri tlačidlá do jedného riadku ---------------
Základ knižnice dáva tlačidlám v pruhu `min-width: 120px` a vodorovné
odsadenie 2em. Tri také tlačidlá potrebujú 360 px zo 375 a "Prispôsobiť"
pretečie za okraj. Odsadenie je preto stiahnuté a minimálna šírka zrušená.
Selektory sú zámerne dlhšie než v základe, aby prebili aj `#cc-main
.cm--bar .cm__btn`. Merané: pri 375 px sa zmestia všetky tri s rezervou. */
@media (max-width: 767.98px) {
#cc-main .cm .cm__btn,
#cc-main .cm--bar .cm__btn,
#cc-main .cm.cm--bar .cm__btn,
#cc-main .cm.cm--bar.cm--inline .cm__btn {
min-width: 0 !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
font-size: 0.72rem !important;
letter-spacing: 0 !important;
flex: 1 1 0 !important;
white-space: nowrap !important;
}
#cc-main .cm .cm__btns,
#cc-main .cm.cm--bar .cm__btns {
gap: 0.35rem !important;
}
}
/* --- Plávajúce tlačidlo nastavení ----------------------------------------
Prevzaté z adam.lukacka.com vrátane id a rozmerov, zmenené sú iba farby.
Bronzová na podklade --au-surface má 5,05:1, takže ikona je čitateľná.
z-index 999 je pod lištou súhlasu (tá má vyššie), aby ju neprekrývalo. */
#cookie-settings-btn {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 39;
width: 40px;
height: 40px;
border-radius: 50%;
background: #1c1f24;
border: 1px solid rgba(237, 237, 233, .14);
color: #b08965;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
opacity: .75;
box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
transition: opacity .3s ease, background-color .3s ease, color .3s ease, transform .3s ease;
}
#cookie-settings-btn:hover,
#cookie-settings-btn:focus-visible {
opacity: 1;
background: #b08965;
color: #0e1013;
transform: scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
#cookie-settings-btn { transition: none; }
#cookie-settings-btn:hover, #cookie-settings-btn:focus-visible { transform: none; }
}