@font-face {
font-family: "Grota Rounded Black";
src: url(//bananica.rs/wp-content/themes/bananica/kolacic/fonts/GrotaRounded-Black.woff2) format("woff2"),
url(//bananica.rs/wp-content/themes/bananica/kolacic/fonts/GrotaRounded-Black.otf) format("opentype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body.lp-page {
min-height: 100vh;
background: #f5e2a8;
color: #e30009;
font-family: "Grota Rounded Black", system-ui, sans-serif;
overflow-x: hidden;
} .lp-mock-header {
background: #e5002b;
color: #fff;
position: relative;
z-index: 50;
}
.lp-mock-header .navbar {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 0.75rem 1.25rem;
gap: 1rem;
}
.lp-mock-header .navbar-brand {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.25rem;
}
.lp-mock-header .navbar-nav {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.lp-mock-header .navbar-nav a {
color: #fff;
text-decoration: none;
font-family: system-ui, sans-serif;
font-size: 0.9rem;
font-weight: 600;
}
.lp-mock-header .navbar-nav .active a {
text-decoration: underline;
}
@media (max-width: 767px) {
.lp-mock-header .navbar-nav {
display: none;
}
} .lp-stage {
position: relative;
min-height: calc(100vh - 70px);
isolation: isolate;
overflow: hidden;
display: flex;
flex-direction: column;
}
.lp-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.lp-bg-base {
position: absolute;
inset: 0;
background:
url(//bananica.rs/wp-content/themes/bananica/kolacic/img/pozadina.jpg) center / cover no-repeat,
radial-gradient(ellipse at center, #fff8e0 0%, #f5e2a8 55%, #efd07a 100%);
}
.lp-float {
position: absolute;
display: block;
height: auto;
filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18));
will-change: transform;
user-select: none;
-webkit-user-drag: none;
} .lp-cookie--tl {
left: 14.3%;
top: 5.7%;
width: min(10.4vw, 150px);
animation: lp-float-a 7s ease-in-out infinite alternate,
lp-spin-cw 48s linear infinite;
}
.lp-cookie--ml {
left: -7.6%;
top: 20.7%;
width: min(22vw, 320px);
animation: lp-float-b 9s ease-in-out infinite alternate,
lp-spin-ccw 56s linear infinite;
}
.lp-cookie--tr {
left: 83.9%;
top: 4.4%;
width: min(21.8vw, 320px);
animation: lp-float-c 8s ease-in-out infinite alternate,
lp-spin-cw 52s linear infinite;
}
.lp-cookie--br {
left: 79.7%;
top: 50%;
width: min(34.8vw, 520px);
animation: lp-float-a 10s ease-in-out infinite alternate,
lp-spin-ccw 60s linear infinite;
}
.lp-cookie--bc {
left: 65.7%;
top: 86.2%;
width: min(10.4vw, 150px);
animation: lp-float-b 6.5s ease-in-out infinite alternate,
lp-spin-cw 44s linear infinite;
}
.lp-pack {
left: -4.7%;
top: 64.6%;
width: min(29.4vw, 460px);
filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.22));
animation: lp-float-pack 8.5s ease-in-out infinite alternate;
}
@keyframes lp-spin-cw {
from { rotate: 0deg; }
to { rotate: 360deg; }
}
@keyframes lp-spin-ccw {
from { rotate: 0deg; }
to { rotate: -360deg; }
}
@keyframes lp-float-a {
from { translate: 0 0; }
to { translate: 10px -14px; }
}
@keyframes lp-float-b {
from { translate: 0 0; }
to { translate: -12px 10px; }
}
@keyframes lp-float-c {
from { translate: 0 0; }
to { translate: 8px 12px; }
}
@keyframes lp-float-pack {
from { translate: 0 0; }
to { translate: 14px -10px; }
}
@media (prefers-reduced-motion: reduce) {
.lp-float {
animation: none !important;
}
} .lp-content {
position: relative;
z-index: 2;
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(0.85rem, 2.2vh, 1.75rem);
width: min(94vw, 980px);
margin: 0 auto;
padding: clamp(1rem, 4vh, 2.5rem) 1rem clamp(3rem, 10vh, 6rem);
text-align: center;
min-height: calc(100vh - 70px);
} .lp-title {
margin: 0;
font-family: "Grota Rounded Black", system-ui, sans-serif;
font-weight: 900;
font-size: clamp(2.15rem, 3.2vw, 61px);
line-height: 0.98;
letter-spacing: -0.025em; text-transform: uppercase;
color: #e30009;
text-wrap: balance;
max-width: min(94vw, 22ch);
font-feature-settings: "liga" 1;
font-variant-ligatures: common-ligatures;
}
.lp-title .lp-title-line {
display: block;
}
.lp-title .lp-title-line:last-child { font-size: 1.285em;
letter-spacing: -0.025em;
font-feature-settings: "liga" 1;
font-variant-ligatures: common-ligatures;
}
.lp-video-wrap {
position: relative;
width: min(100%, 760px);
aspect-ratio: 16 / 9;
border-radius: 18px;
overflow: hidden;
box-shadow:
0 18px 40px rgba(120, 60, 0, 0.22),
0 2px 0 rgba(255, 255, 255, 0.35) inset;
background: #1a1208;
cursor: pointer;
flex-shrink: 0;
}
.lp-video-wrap:fullscreen,
.lp-video-wrap:-webkit-full-screen {
width: 100%;
height: 100%;
max-width: none;
aspect-ratio: auto;
border-radius: 0;
background: #000;
}
.lp-video-wrap:fullscreen .lp-video,
.lp-video-wrap:-webkit-full-screen .lp-video {
object-fit: contain;
}
.lp-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: #1a1208;
}
.lp-video-controls {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 4;
display: flex;
align-items: center;
gap: 8px;
}
.lp-ctrl-btn {
width: 42px;
height: 42px;
border: 0;
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(0, 0, 0, 0.45);
color: #fff;
cursor: pointer;
backdrop-filter: blur(4px);
transition: opacity 0.25s ease, transform 0.2s ease, background 0.2s ease;
padding: 0;
}
.lp-ctrl-btn:hover {
background: rgba(227, 0, 9, 0.85);
transform: scale(1.05);
}
.lp-ctrl-btn.is-hidden,
.lp-replay-btn.is-hidden {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.lp-sound-btn .lp-icon-sound {
display: none;
}
.lp-sound-btn .lp-icon-muted {
display: block;
}
.lp-video-wrap.is-unmuted .lp-sound-btn .lp-icon-sound {
display: block;
}
.lp-video-wrap.is-unmuted .lp-sound-btn .lp-icon-muted {
display: none;
}
.lp-replay-btn {
position: absolute;
inset: 0;
z-index: 5;
margin: auto;
width: 96px;
height: 96px;
border: 0;
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(227, 0, 9, 0.92);
color: #fff;
cursor: pointer;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
transition: transform 0.2s ease, background 0.2s ease;
}
.lp-replay-btn:hover {
transform: scale(1.06);
background: #e30009;
}
.lp-video-wrap.is-ended::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
background: rgba(0, 0, 0, 0.35);
pointer-events: none;
} @media (max-width: 767px) {
.lp-stage {
min-height: calc(100dvh - 56px);
min-height: calc(100vh - 56px);
}
.lp-content {
min-height: calc(100dvh - 56px) !important;
min-height: calc(100vh - 56px) !important;
gap: 1.25rem;
padding: 10vh 1rem 18vh;
justify-content: center !important;
}
.lp-cookie--tl,
.lp-cookie--tr,
.lp-cookie--bc {
display: none;
}
.lp-cookie--ml {
left: -18%;
top: 12%;
width: 42vw;
}
.lp-cookie--br {
left: 58%;
top: 62%;
width: 55vw;
}
.lp-pack {
left: -12%;
top: 72%;
width: 52vw;
}
.lp-title {
font-size: clamp(2.2rem, 8.5vw, 2.9rem);
max-width: 14ch;
line-height: 0.96;
}
.lp-video-wrap {
border-radius: 14px;
width: min(100%, 100%);
}
.lp-replay-btn {
width: 84px;
height: 84px;
}
.lp-replay-btn svg {
width: 52px;
height: 52px;
}
}
@media (max-width: 420px) {
.lp-cookie--ml {
opacity: 0.85;
}
.lp-title {
font-size: clamp(2.1rem, 9.2vw, 2.55rem);
}
} .lp-bg > picture {
display: contents;
} #full-width-page-wrapper:has(.lp-stage),
body.page-template-srecna-poruka #full-width-page-wrapper,
body.page-template-page-templates-srecna-poruka-php #full-width-page-wrapper,
body.page-template-page-templatesrecna-poruka-php #full-width-page-wrapper {
background: transparent !important;
overflow: hidden;
display: flex !important;
flex-direction: column;
box-sizing: border-box;
min-height: calc(100dvh - 100px) !important;
min-height: calc(100vh - 100px) !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#full-width-page-wrapper:has(.lp-stage) .lp-stage,
body.page-template-srecna-poruka .lp-stage,
body.page-template-page-templates-srecna-poruka-php .lp-stage,
body.page-template-page-templatesrecna-poruka-php .lp-stage {
flex: 1 1 auto;
display: flex !important;
flex-direction: column;
box-sizing: border-box;
min-height: calc(100dvh - 100px) !important;
min-height: calc(100vh - 100px) !important;
}
#full-width-page-wrapper:has(.lp-stage) .lp-content,
body.page-template-srecna-poruka .lp-content,
body.page-template-page-templates-srecna-poruka-php .lp-content,
body.page-template-page-templatesrecna-poruka-php .lp-content {
flex: 1 1 auto;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center !important;
box-sizing: border-box;
width: min(94vw, 980px);
min-height: calc(100dvh - 100px) !important;
min-height: calc(100vh - 100px) !important;
padding-top: clamp(1.5rem, 5vh, 3rem) !important;
padding-bottom: clamp(4rem, 12vh, 7rem) !important;
}
@media (max-width: 767px) {
#full-width-page-wrapper:has(.lp-stage),
body.page-template-srecna-poruka #full-width-page-wrapper,
body.page-template-page-templates-srecna-poruka-php #full-width-page-wrapper,
body.page-template-page-templatesrecna-poruka-php #full-width-page-wrapper {
min-height: calc(100dvh - 70px) !important;
min-height: calc(100vh - 70px) !important;
}
#full-width-page-wrapper:has(.lp-stage) .lp-stage,
body.page-template-srecna-poruka .lp-stage,
body.page-template-page-templates-srecna-poruka-php .lp-stage,
body.page-template-page-templatesrecna-poruka-php .lp-stage {
min-height: calc(100dvh - 70px) !important;
min-height: calc(100vh - 70px) !important;
}
#full-width-page-wrapper:has(.lp-stage) .lp-content,
body.page-template-srecna-poruka .lp-content,
body.page-template-page-templates-srecna-poruka-php .lp-content,
body.page-template-page-templatesrecna-poruka-php .lp-content {
min-height: calc(100dvh - 70px) !important;
min-height: calc(100vh - 70px) !important;
justify-content: center !important;
gap: 1.25rem !important;
padding-top: 10vh !important;
padding-bottom: 18vh !important;
}
#full-width-page-wrapper:has(.lp-stage) .lp-title,
body.page-template-srecna-poruka .lp-title,
body.page-template-page-templates-srecna-poruka-php .lp-title,
body.page-template-page-templatesrecna-poruka-php .lp-title {
font-size: clamp(2.2rem, 8.5vw, 2.9rem) !important;
}
}