/* ========================================================================== MINDKODEX — dizajnový systém a landing Vanilla CSS, žiadne externé zdroje. Tmavý motív je predvolený. ========================================================================== */ /* --- Tokeny ------------------------------------------------------------- */ :root { --bg: #0a0a0d; --bg-2: #101015; --povrch: #14141b; --text: #f4f2ee; --text-tlm: #8f8c85; --akcent: #d4a24c; --akcent-tlm: #6b5327; --linka: rgba(255, 255, 255, 0.09); --linka-2: rgba(255, 255, 255, 0.16); --r-s: 8px; --r-m: 14px; --r-l: 22px; --sirka: 1120px; --medzera: clamp(1.25rem, 4vw, 2rem); --pismo: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --prechod: 180ms cubic-bezier(0.2, 0.7, 0.3, 1); } /* Svetlý motív: buď podľa systému, alebo ručne cez data-motiv na . Ručná voľba (data-motiv="tmavy") vždy prebije systém. */ @media (prefers-color-scheme: light) { :root:not([data-motiv="tmavy"]) { --bg: #faf8f4; --bg-2: #f2efe8; --povrch: #ffffff; --text: #14131a; --text-tlm: #5d5a53; --akcent: #a9762a; --akcent-tlm: #e4d3b2; --linka: rgba(0, 0, 0, 0.1); --linka-2: rgba(0, 0, 0, 0.18); } } :root[data-motiv="svetly"] { --bg: #faf8f4; --bg-2: #f2efe8; --povrch: #ffffff; --text: #14131a; --text-tlm: #5d5a53; --akcent: #a9762a; --akcent-tlm: #e4d3b2; --linka: rgba(0, 0, 0, 0.1); --linka-2: rgba(0, 0, 0, 0.18); } /* --- Základ ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--pismo); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3 { margin: 0; font-weight: 680; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; border-radius: 4px; } .obal { width: 100%; max-width: var(--sirka); margin-inline: auto; padding-inline: var(--medzera); } .skryte { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Zásobník ikon — nikdy sa nevykresľuje, iba sa naň odkazuje cez . */ .ikony { position: absolute; } /* --- Navigácia ---------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--prechod); } .nav[data-posunute="ano"] { border-bottom-color: var(--linka); } .nav__vnutro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 62px; } .znacka { font-weight: 700; letter-spacing: 0.16em; font-size: 0.82rem; } .znacka span { color: var(--akcent); } .nav__akcie { display: flex; align-items: center; gap: 0.5rem; } .jazyky-nav { display: flex; align-items: center; gap: 0.15rem; } .jazyky-nav a { padding: 0.42rem 0.48rem; border-radius: 999px; color: var(--text-tlm); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-decoration: none; } .jazyky-nav a:hover, .jazyky-nav a[aria-current="page"] { background: var(--plocha); color: var(--text); } /* --- Tlačidlá ----------------------------------------------------------- */ .btn { --btn-bg: transparent; --btn-text: var(--text); --btn-linka: var(--linka-2); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.72rem 1.3rem; border: 1px solid var(--btn-linka); border-radius: 100px; background: var(--btn-bg); color: var(--btn-text); font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: transform var(--prechod), background var(--prechod), border-color var(--prechod), opacity var(--prechod); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.62; pointer-events: none; } .btn--hlavne { --btn-bg: var(--akcent); --btn-text: #17120a; --btn-linka: var(--akcent); } .btn--hlavne:hover { --btn-bg: color-mix(in srgb, var(--akcent) 88%, #fff); } .btn--tiche { --btn-linka: transparent; color: var(--text-tlm); padding-inline: 0.85rem; } .btn--tiche:hover { color: var(--text); } .btn--velke { padding: 0.95rem 1.9rem; font-size: 1.02rem; } /* --- Hero --------------------------------------------------------------- */ .hero { position: relative; padding-block: clamp(3.5rem, 11vw, 7rem) clamp(2.5rem, 7vw, 4rem); text-align: center; isolation: isolate; } .hero::before { content: ""; position: absolute; inset: -20% 50% auto; translate: 50% 0; width: min(900px, 120vw); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--akcent) 16%, transparent) 0%, transparent 62%); z-index: -1; pointer-events: none; } .stitok { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.9rem; border: 1px solid var(--linka); border-radius: 100px; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--text-tlm); margin-bottom: 1.6rem; } .stitok b { color: var(--text); font-weight: 600; } .hero h1 { font-size: clamp(2.6rem, 8.5vw, 5.1rem); max-width: 15ch; margin-inline: auto; } .hero h1 em { font-style: normal; color: var(--akcent); } /* Staccato riadok pod nadpisom — krátke vety, vyššia váha než bežný text. */ .hero__uder { margin-top: 1.5rem; margin-inline: auto; max-width: 30ch; font-size: clamp(1.06rem, 2.6vw, 1.32rem); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; } .hero__pod { margin-top: 1rem; margin-inline: auto; max-width: 48ch; color: var(--text-tlm); font-size: clamp(0.98rem, 2.2vw, 1.08rem); } .hero__akcie { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; } /* --- Prepínač dráh ------------------------------------------------------ */ .drahy { padding-block: clamp(1rem, 4vw, 2rem) clamp(3rem, 8vw, 5rem); } .drahy__uvod { text-align: center; font-size: clamp(1.5rem, 4.4vw, 2.2rem); margin-bottom: 1.8rem; } .prepinac { display: flex; gap: 0.4rem; padding: 0.4rem; border: 1px solid var(--linka); border-radius: 100px; background: var(--bg-2); width: fit-content; margin-inline: auto; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .prepinac::-webkit-scrollbar { display: none; } .prepinac button { flex: 0 0 auto; padding: 0.6rem 1.15rem; border: 0; border-radius: 100px; background: transparent; color: var(--text-tlm); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: color var(--prechod), background var(--prechod); } .prepinac button:hover { color: var(--text); } /* Vybraná dráha musí byť najvýraznejší prvok prepínača, inak pôsobí ako vypnutá. */ .prepinac button[aria-selected="true"] { background: color-mix(in srgb, var(--akcent) 18%, var(--povrch)); color: var(--akcent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akcent) 45%, transparent); } .panel { display: none; margin-top: 2.6rem; animation: nabehni 320ms var(--prechod) both; } :root[data-draha="biznis"] .panel[data-draha="biznis"], :root[data-draha="muzsky"] .panel[data-draha="muzsky"], :root[data-draha="zensky"] .panel[data-draha="zensky"] { display: block; } @keyframes nabehni { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .panel__hlava { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.4rem 0.9rem; text-align: center; } .panel__hlava h3 { font-size: clamp(1.6rem, 4.6vw, 2.4rem); } .panel__stav { margin-top: 0.75rem; text-align: center; font-size: 0.9rem; color: var(--text-tlm); } .panel__stav b { color: var(--akcent); font-weight: 700; } .body { list-style: none; margin: 2rem auto 0; padding: 0; display: grid; gap: 0.7rem; max-width: 620px; } .body li { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.2rem; border: 1px solid var(--linka); border-radius: var(--r-m); background: var(--povrch); font-weight: 550; } .body svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--akcent); } /* --- Pás s číslami ------------------------------------------------------ */ .cisla { border-block: 1px solid var(--linka); background: var(--bg-2); } .clenovia { padding: clamp(1.8rem, 5vw, 2.6rem) 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.2rem 0.7rem; text-align: center; } .clenovia b { font-size: clamp(2.4rem, 7vw, 3.4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--akcent); font-variant-numeric: tabular-nums; } .clenovia span { font-size: 0.95rem; letter-spacing: 0.02em; color: var(--text-tlm); } /* --- Čo je vnútri ------------------------------------------------------- */ .vnutri { padding-block: clamp(3.5rem, 9vw, 6rem); } .mriezka { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem; } .karta { padding: 1.6rem 1.4rem; border: 1px solid var(--linka); border-radius: var(--r-l); background: var(--povrch); transition: border-color var(--prechod), transform var(--prechod); } .karta:hover { border-color: var(--linka-2); transform: translateY(-2px); } .karta svg { width: 22px; height: 22px; color: var(--akcent); margin-bottom: 1rem; } .karta h3 { font-size: 1.06rem; letter-spacing: -0.01em; } .karta p { margin-top: 0.35rem; color: var(--text-tlm); font-size: 0.93rem; } /* --- Cena --------------------------------------------------------------- */ .cena { padding-bottom: clamp(3.5rem, 9vw, 6rem); } .cena__box { position: relative; padding: clamp(2.2rem, 6vw, 3.4rem) var(--medzera); border: 1px solid var(--linka-2); border-radius: var(--r-l); background: linear-gradient(180deg, var(--bg-2), var(--povrch)); text-align: center; overflow: hidden; } .cena__box::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--akcent), transparent); opacity: 0.7; } .cena__box h2 { font-size: clamp(1.5rem, 4.4vw, 2.1rem); } .suma { display: flex; align-items: baseline; justify-content: center; gap: 0.35rem; margin-block: 1.4rem 0.4rem; } .suma b { font-size: clamp(3rem, 10vw, 4.4rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; } .suma span { color: var(--text-tlm); font-size: 1rem; } .cena__pozn { color: var(--text-tlm); font-size: 0.9rem; } .cena__stav { max-width: 38rem; margin: 0.5rem auto 1rem; color: var(--text-tlm); font-size: 0.86rem; } .cena .btn { margin-top: 1.9rem; } .cena__stav + .btn { margin-top: 0.6rem; } /* --- Otázky ------------------------------------------------------------- */ .otazky { padding-bottom: clamp(3.5rem, 9vw, 6rem); } .otazky h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); margin-bottom: 1.6rem; text-align: center; } .otazky details { border-bottom: 1px solid var(--linka); } .otazky summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; cursor: pointer; font-weight: 600; list-style: none; } .otazky summary::-webkit-details-marker { display: none; } .otazky summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid var(--text-tlm); border-bottom: 2px solid var(--text-tlm); rotate: 45deg; transition: rotate var(--prechod); } .otazky details[open] summary::after { rotate: -135deg; } .otazky p { padding-bottom: 1.15rem; color: var(--text-tlm); max-width: 62ch; } /* --- Pätička ------------------------------------------------------------ */ .pata { border-top: 1px solid var(--linka); padding-block: 2.2rem; font-size: 0.86rem; color: var(--text-tlm); } .pata__vnutro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .pata nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; } .pata a:hover { color: var(--text); } /* --- Lepivá lišta na mobile --------------------------------------------- */ .lista { position: fixed; inset: auto 0 0; z-index: 60; padding: 0.7rem var(--medzera) calc(0.7rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--linka); display: none; gap: 0.8rem; align-items: center; justify-content: space-between; translate: 0 110%; transition: translate var(--prechod); } .lista[data-vidno="ano"] { translate: 0; } .lista .btn { flex: 1 1 auto; } .lista__cena { font-size: 0.9rem; font-weight: 600; white-space: nowrap; } @media (max-width: 720px) { .lista { display: flex; } body { padding-bottom: 76px; } .nav__akcie .btn--hlavne { display: none; } } /* --- Pohyb -------------------------------------------------------------- */ .odhal { opacity: 0; transform: translateY(16px); transition: opacity 520ms var(--prechod), transform 520ms var(--prechod); } .odhal[data-vidno="ano"] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .odhal { opacity: 1; transform: none; } }