:root { --sans-font: 'Roboto', sans-serif;
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; --bg: #fff;
--accent-bg: rgba(86,175,49,0.05);
--text: #222;
--text-light: #555;
--border: rgba(86,175,49,0.2);
--accent: rgb(86,175,49);
--code: #ccc;
--preformatted: #444;
--marked: #fd3;
--disabled: #eee;
--signature: #b11cab;
} @media (prefers-color-scheme: dark) {
:root {
--bg: #012610;
--accent-bg: #2b2b2b;
--text: #dcdcdc;
--text-light: #ababab;
--border: rgba(86,175,49,0.2);
--accent: rgb(86,175,49);
--code: #666;
--preformatted: #ccc;
--disabled: #111;
} img,
video {
opacity: 0.8;
}
}
img { max-width: 100%; height: auto; }
html { font-family: var(--sans-font);
scroll-behavior: smooth;
} body {
color: var(--text);
background: var(--bg);
font-size: 1.15rem;
line-height: 1.5;
display: grid;
grid-template-columns:
1fr min(45rem, 90%) 1fr;
margin: 0;
}
body>* {
grid-column: 2;
} body > header {
background: var(--accent-bg);
border-bottom: 1px solid var(--border);
text-align: center;
grid-column: 1 / -1;
box-sizing: border-box;
}
body > header h1 {
max-width: 1200px;
margin: 1rem auto;
}
body > header p {
max-width: 40rem;
margin: 1rem auto;
} main {
padding-top: 1.5rem;
}
body > footer {
margin-top: 4rem;
padding: 2rem 1rem 1.5rem 1rem;
color: var(--text-light);
font-size: 0.9rem;
text-align: center;
border-top: 1px solid var(--border);
} h1 {
font-size: 3rem;
color: var(--signature);
}
h2 {
font-size: 2.6rem;
margin-top: 3rem;
color: var(--accent);
}
h3 {
font-size: 2rem;
margin-top: 3rem;
color: var(--accent);
}
h4 {
font-size: 1.44rem;
}
h5 {
font-size: 1.15rem;
}
h6 {
font-size: 0.96rem;
}
strong {
color: var(--signature);
} h1,
h2,
h3 {
line-height: 1.1;
font-family: 'Roboto Condensed', sans-serif;
} @media only screen and (max-width: 720px) {
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2.1rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1.25rem;
}
} a,
a:visited {
color: var(--accent);
}
a:hover {
text-decoration: none;
}
button,
[role="button"],
input[type="submit"],
input[type="reset"],
input[type="button"] {
border: none;
border-radius: 5px;
background: var(--accent);
font-size: 1rem;
color: var(--bg);
padding: 0.7rem 0.9rem;
margin: 0.5rem 0;
}
button[disabled],
[role="button"][aria-disabled="true"],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][disabled],
select[disabled] {
cursor: default;
opacity: 0.5;
cursor: not-allowed;
}
input:disabled,
textarea:disabled,
select:disabled {
cursor: not-allowed;
background-color: var(--disabled);
}
input[type="range"] {
padding: 0;
} abbr {
cursor: help;
}
button:focus,
button:enabled:hover,
[role="button"]:focus,
[role="button"]:not([aria-disabled="true"]):hover,
input[type="submit"]:focus,
input[type="submit"]:enabled:hover,
input[type="reset"]:focus,
input[type="reset"]:enabled:hover,
input[type="button"]:focus,
input[type="button"]:enabled:hover {
filter: brightness(1.4);
cursor: pointer;
} nav {
font-size: 1rem;
line-height: 2;
}
nav a,
nav a:visited {
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
color: #fff;
display: inline-block;
padding: 0.1rem 1rem;
text-decoration: none;
transition: all .3s linear;
}
nav a:hover {
border-bottom-color: #fff;
}
nav a:last-child {
margin-right: 0;
} @media only screen and (max-width: 750px) {
nav a {
border: none;
padding: 0;
color: var(--accent);
text-decoration: underline;
line-height: 1;
}
} details {
background: var(--accent-bg);
border: 1px solid var(--border);
border-radius: 5px;
margin-bottom: 1rem;
}
summary {
cursor: pointer;
font-weight: bold;
padding: 0.6rem 1rem;
}
details[open] {
padding: 0.6rem 1rem 0.75rem 1rem;
}
details[open] summary + * {
margin-top: 0;
}
details[open] summary {
margin-bottom: 0.5rem;
padding: 0;
}
details[open] > *:last-child {
margin-bottom: 0;
} table {
border-collapse: collapse;
width: 100%;
margin: 1.5rem 0;
}
td,
th {
border: 1px solid var(--border);
text-align: left;
padding: 0.5rem;
}
th {
background: var(--accent-bg);
font-weight: bold;
}
tr:nth-child(even) { background: var(--accent-bg);
}
table caption {
font-weight: bold;
margin-bottom: 0.5rem;
} textarea,
select,
input {
font-size: inherit;
font-family: inherit;
padding: 0.5rem;
margin-bottom: 0.5rem;
color: var(--text);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 5px;
box-shadow: none;
box-sizing: border-box;
width: 60%;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
} select {
background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%),
linear-gradient(135deg, var(--text) 51%, transparent 49%);
background-position: calc(100% - 20px), calc(100% - 15px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
select[multiple] {
background-image: none !important;
} input[type="checkbox"],
input[type="radio"] {
vertical-align: bottom;
position: relative;
}
input[type="radio"] {
border-radius: 100%;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background: var(--accent);
}
input[type="checkbox"]:checked::after { content: " ";
width: 0.1em;
height: 0.25em;
border-radius: 0;
position: absolute;
top: 0.05em;
left: 0.18em;
background: transparent;
border-right: solid var(--bg) 0.08em;
border-bottom: solid var(--bg) 0.08em;
font-size: 1.8em;
transform: rotate(45deg);
}
input[type="radio"]:checked::after { content: " ";
width: 0.25em;
height: 0.25em;
border-radius: 100%;
position: absolute;
top: 0.125em;
background: var(--bg);
left: 0.125em;
font-size: 32px;
} textarea {
width: 80%;
} @media only screen and (max-width: 720px) {
textarea,
select,
input {
width: 100%;
}
} input[type="checkbox"],
input[type="radio"] {
width: auto;
} input[type="file"] {
border: 0;
} hr {
color: var(--border);
border-top: 1px;
margin: 1rem auto;
}
mark {
padding: 2px 5px;
border-radius: 4px;
background: var(--marked);
}
main img,
main video {
max-width: 100%;
height: auto;
border-radius: 5px;
}
figure {
margin: 0;
text-align: center;
}
figcaption {
font-size: 0.9rem;
color: var(--text-light);
margin-bottom: 1rem;
}
blockquote {
margin: 2rem 0 2rem 2rem;
padding: 0.4rem 0.8rem;
border-left: 0.35rem solid var(--accent);
color: var(--text-light);
font-style: italic;
}
cite {
font-size: 0.9rem;
color: var(--text-light);
font-style: normal;
} code,
pre,
pre span,
kbd,
samp {
font-family: var(--mono-font);
color: var(--code);
}
kbd {
color: var(--preformatted);
border: 1px solid var(--preformatted);
border-bottom: 3px solid var(--preformatted);
border-radius: 5px;
padding: 0.1rem;
}
pre {
padding: 1rem 1.4rem;
max-width: 100%;
overflow: auto;
overflow-x: auto;
color: var(--preformatted);
background: var(--accent-bg);
border: 1px solid var(--border);
border-radius: 5px;
} pre code {
color: var(--preformatted);
background: none;
margin: 0;
padding: 0;
} .home h1 { margin-top: 60px; }
h1 a { color: var(--signature) !important; text-decoration: none; }
.navigation { background-color: var(--signature); }
nav { border-bottom: 5px solid #fff; }
nav ul { list-style-type: none; margin: 0; padding: 0; }
nav li { display: flex; line-height: 60px; }
nav li img { width: 130px; height: 60px; margin-right: 1rem; }
nav > input { display: none; }
nav a { display: flex; text-decoration: none; }
nav .logo a { border: none; }
hr { border: none; border-top: 1px solid var(--border); width: 100%; }
.gradient { background: linear-gradient(135deg, rgb(86,175,49) 35%, rgb(0,150,64) 50%, rgb(1,38,16) 100%); }
.articles { display: flex; margin: 0 -1.3rem; flex-wrap: wrap; justify-content: center; }
article { width: calc(100% / 3 - 2.6rem); padding: 1.3rem; position: relative; }
article a { display: block; z-index: 1; }
article a::after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ' '; transition: all .3s linear; }
article a:hover::after { box-shadow: 0 0 20px rgba(0,0,0,0.2); }
article h3 { font-size: 1.3rem; margin: 1.3rem 0; }
article p { font-size: 1rem; line-height: 1.2; }
article img { width: 100%; }
.datum { font-size: 80%; color: var(--text-light); }
.hero > div { display: flex; align-items: center; flex-direction: row-reverse; max-width: 991px; margin: 50px auto; }
.hero > div p img { width: 50%; }
.hero > div p { color: #fff; width: 50%; font: bold 4.5rem/1 'Roboto Condensed', sans-serif; text-transform: uppercase; letter-spacing: -.1rem; text-align: left; }
.hamburger { display: none; color: #fff; }
#breadcrumbs { font-size: 12px; text-transform: uppercase; margin-top: 3rem; }
#breadcrumbs a { text-decoration: none; margin-right: 10px; }
#breadcrumbs > span > span span { margin-left: 10px; }
.row { display: flex; flex-wrap: wrap; justify-content: space-between; }
.row .column { width: 50%; line-height: 1.2; }
.row .column strong { display: block; margin-top: 10px; }
.row .col { width: 33%; }
.negative-top5 { margin-top: -30px; }
.negative-top10 { margin-top: -60px; }
.text-center { text-align: center; } .banner { position: relative; height: 30vw; width: 60%; }
.banner > div { position: absolute; right: 0; top: 0; height: 100%; width: 100vw; }
.banner > div > img { position: absolute; width: auto; }
.banner .jetra,
.banner .bolesna { height: 25vw; width: auto; top: 0; right: 7vw; }
.banner .bolesna { opacity: 0; }
.banner.active .bolesna { animation: ill 2s ease-out 1.3s forwards, heal 0.7s ease-out 4.3s forwards; }
.banner .swiper { height: 30vw; width: auto; bottom: 0.5vw; right: -2vw; transform-origin: center top; }
.banner.active .swiper { animation: swipe 1.3s ease-in 3.7s forwards; }
.banner .alcohol { height: 10vw; width: auto; top: 10vw; right: 33vw; opacity: 0; }
.banner.active .alcohol { animation: grow 1s ease-out 1.3s forwards, die 1s ease-out 4s forwards; }
.banner .hepatitis { height: 6.5vw; width: auto; top: 10vw; right: 16vw; opacity: 0; }
.banner.active .hepatitis { animation: grow 1s ease-out 1.6s forwards, die 1s ease-out 4s forwards; }
.banner .ciroza3 { height: 4vw; width: auto; top: 12vw; right: 26vw; opacity: 0; }
.banner.active .ciroza3 { animation: grow 1s ease-out 1.7s forwards, die 1s ease-out 4s forwards; }
.banner .ciroza2 { height: 4.5vw; width: auto; top: 3vw; right: 29vw; opacity: 0; }
.banner.active .ciroza2 { animation: grow 1s ease-out 1.9s forwards, die 1s ease-out 4s forwards; }
.banner .ciroza1 { height: 6vw; width: auto; top: 0vw; right: 13vw; opacity: 0; }
.banner.active .ciroza1 { animation: grow 1s ease-out 2s forwards, die 1s ease-out 4s forwards; }
.banner .t-alkohol { height: 2vw; width: auto; top: 19vw; right: 34vw; opacity: 0; }
.banner.active .t-alkohol { animation: grow 1s ease-out 1.4s forwards, die 1s ease-out 4s forwards; }
.banner .t-ciroza { height: 1.55vw; width: auto; top: 8vw; right: 26vw; opacity: 0; }
.banner.active .t-ciroza { animation: grow 1s ease-out 1.8s forwards, die 1s ease-out 4s forwards; }
.banner .t-hepatitis { height: 1.6vw; width: auto; top: 7vw; right: 13vw; opacity: 0; }
.banner.active .t-hepatitis { animation: grow 1s ease-out 1.7s forwards, die 1s ease-out 4s forwards; }
@keyframes grow { 0% { opacity: 0; transform: translateY(-1vw); } 100% { opacity: 1; transform: translateY(0vw); } }
@keyframes die { 0% { opacity: 1; transform: translateY(0vw); } 100% { opacity: 0; transform: translateY(-1vw); } }
@keyframes swipe { 0% { transform: rotate(0deg) translateX(0vw) scaleX(1); } 59% { transform: rotate(40deg) translateX(-30vw) scaleX(1); } 60% { transform: rotate(40deg) translateX(-30vw) scaleX(-1); } 99% { transform: rotate(0deg) translateX(0vw) scaleX(-1); } 100% { transform: rotate(0deg) translateX(0vw) scaleX(1); } }
@keyframes ill { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes heal { 0% { opacity: 1; } 100% { opacity: 0; } }
h1 > span { text-transform: none; }
.oj { display: flex; }
.oj img { width: 100%; height: auto; }
.oj p { text-align: center; font-size: 12px; }
.oj span { display: flex; flex-direction: column; }
.oj span:after { content: '›'; font-size: 30px; line-height: 1; display: block; padding: 30px 10px; }
.oj span.double:after { content: '›'; font-size: 30px; line-height: 1; display: block; padding: 0 10px 15px 10px; }
.oj span.double:before { content: '‹'; font-size: 30px; line-height: 1; display: block; padding: 15px 10px 0 10px; }
.video-container { position: relative; padding-bottom: 56.25%; }
.video-container iframe,
.video-container:after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.video-container iframe { width: 100%; height: 100%; } @media screen and (min-width: 990px) {
.oj { margin-left: -100px; margin-right: -100px; }
}
@media screen and (min-width: 769px) {
nav ul { display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 768px){
.articles { margin: 0 -1.2rem; }
article { width: calc(100% - 2.6rem); }
.hero > div { flex-direction: column; margin: 30px auto; }
.hero > div p img { height: 4rem; width: auto; }
.hero > div p { width: calc(100% - 50px); font-size: 3.2rem; text-align: center; }
nav { padding: 20px; display: flex; flex-direction: row-reverse; justify-content: space-between; }
nav input { width: 100%; }
nav li svg { height: 36px; }
nav > input { width: 100% !important; background: none !important; border: none !important; }
nav input[type="checkbox"]:checked ~ ul .menu-item { margin-top: 20px; height: 40px; }
nav input[type="checkbox"]:checked ~ ul .menu-item a { color: rgba(255,255,255,1); }
nav input[type="checkbox"]:checked::after { display: none; }
.hamburger { display: block; font-size: 36px; line-height: 1; text-decoration: none; }
.menu-item { overflow: hidden; margin-top: 0px; height: 0px; transition: all .3s linear; }
.menu-item a { color: rgba(255,255,255,0); transition: all .3s linear; }
.banner { height: 50vw; width: 100%; }
.banner > div { right: 0; top: 0; height: 100%; width: 100vw; }
.banner .jetra,
.banner .bolesna { height: 50vw; top: 0; right: 14vw; }
.banner .swiper { height: 60vw; top: -3vw; right: 0vw; }
.banner .alcohol { height: 20vw; top: 20vw; right: 66vw; }
.banner .hepatitis { height: 13vw; top: 20vw; right: 32vw; }
.banner .ciroza3 { height: 8vw; top: 24vw; right: 52vw; }
.banner .ciroza2 { height: 9vw; top: 6vw; right: 58vw; }
.banner .ciroza1 { height: 12vw; top: 0vw; right: 26vw; }
.banner .t-alkohol { height: 4vw; top: 38vw; right: 68vw; }
.banner .t-ciroza { height: 3.1vw; top: 16vw; right: 52vw; }
.banner .t-hepatitis { height: 3.2vw; top: 14vw; right: 26vw; }
li.logo.logo-belupo.menu-item { position: absolute; z-index: 2; top: 0; margin: 15px 0 !important; right: 43px; overflow: visible; }
.logo-silymarin img { margin-top: -3px; margin-bottom: -6px; }
nav li img { width: 115px; height: 50px; }
}
@media (max-width: 767px){
.oj { flex-direction: column; align-items: center; width: 70%; margin: 0 auto; }
.oj p { font-size: 14px; }
.oj span { transform: rotate(90deg); }
.oj span:after { font-size: 40px;}
.oj span.double:after { font-size: 40px; }
.oj span.double:before { font-size: 40px; }
.row .column,
.row .col { width: 100%; }
}
@media (max-width: 600px){
.hero > div p { font-size: 2rem; letter-spacing: 0; }
.home .negative-top5 { margin-top: 20px; }
}