* {
box-sizing:border-box;
}
html { height: 100%; height: 100% }
iframe {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
display:inline;
overflow-x: hidden !important;
}
img {
display:inline-block;
}
div{
display: block;
}
table {
border-collapse:separate;
border-spacing: 0;
display:table;
}
html, table, p, tr, th, td, tbody, img {
padding: 0;
border: 0;
outline: 0;
font-size: 0.1%;
background: transparent;
}
body {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
height:100%;
width: 100%;
min-height: 100%;
max-height: 100%;
background-image: url('../Foto/hriso1_column.jpg');
background-repeat:repeat-x;
background-size: contain;
background-attachment: fixed;
}
/* 1 */
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
/* 2. Configure the virtual TOP Masking Bar */
body::before {
content: "";
position: fixed;
top: 0; left: 0; width: 100%;
height: var(--mask-height, 0px);/*height: calc((100vh - 100vw / 1.25) / 2); */
background: rgba(0, 0, 0, 0.65); /* Shaded transparency padding border */
z-index: 2000; /* Placed safely above your table background */
display: none;
}
/* 3. Configure the virtual BOTTOM Masking Bar */
body::after {
content: "";
position: fixed;
bottom: 0; left: 0; width: 100%;
height: var(--mask-height, 0px);/*height: calc((100vh - 100vw / 1.25) / 2); */
background: rgba(0, 0, 0, 0.65);
z-index: 2000;
display: none;
}
/* 4. ACTIVATE THE SHADED MASKS ONLY ON SMARTPHONES (Matches 1.25 ratio query standard) */
@media screen and (max-aspect-ratio: 5/4) {
body::before, body::after {
display: block !important;
}
}
/* Fix your table z-index boundaries so it sits on top of the black mask
#id_photobox-table, table {
margin: 0 auto !important;
position: relative;
z-index: 1000;
}
.video-overlay {
display: none;
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,1);
z-index: 9999;
justify-content: center;
align-items: center;
}
.video-box {
position: relative;
width: 85vw;
max-width: 700px;
display: flex;
flex-direction: column;
align-items: center;
}
.video-box video {
width: 100%;
max-height: 60vh;
height: auto;
object-fit: contain;
}
.close-btn {
position: absolute;
top: -40px; right: 0;
color: #fff;
font-size: 30px;
cursor: pointer;
}
.return-container {
width: 100% !important ;
text-align: center !important;
margin-top: 2vh;
display: block !important;
}
.return-btn {
width: 10vw;
min-width: 45px;
max-width: 65px;
height: auto;
cursor: pointer;
transition: transform 0.2s;
}
.return-btn:hover {
transform: scale(1.1);
}
.video-trigger {
cursor: pointer !important;
}
*/
/* ==========================================================================
THE RESPONSIVE STICKY VERTICAL TEXT POPUP WINDOW (POP3)
========================================================================== */
.text-box {
position: relative;
width: 85vw; /* Spans a spacious 80% of any laptop view width */
max-width: 650px; /* Restricts text column stretch limits on big screens */
height: 85vh; /* Locks container boundaries to 75% of screen height */
display: flex;
flex-direction: column;
background-color: #ffffff; /* Crisp white background canvas behind text graphics */
border: 3px solid #dfb76c; /* Glistening metallic gold frame trim border */
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.95); /* Thick ambient shadow cushion */
border-radius: 8px;
overflow: hidden; /* Keeps iframe boundary edges perfectly soft and clipped */
}
/* Forces the inner text iframe to fill the floating text-box window */
.text-box iframe {
width: 100%;
height: 100%;
border: none;
padding-top: 0px;
padding-bottom: 0px;
box-sizing: border-box; /* Forces the browser to keep padding INSIDE frame heights */
}
/*We create an absolute-positioned cover layer locked to the top edge.
It blends from solid white (#ffffff) at the top, down into 100% clear transparency.
This causes your scrolling text to magically dissolve as it glides upward! */
.text-box::before {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: calc(100% - 16px); /* for the scroll bar*/
height: 30px; /* Controls the exact vertical depth of your fading track */
z-index: 5; /* Sits safely on top of your scrolling iframe text pixels */
background: linear-gradient(to bottom,
rgba(255, 255, 255, 1.0) 0%,
rgba(255, 255, 255, 1.0) 40%,
rgba(255, 255, 255, 0.0) 100%);
pointer-events: none; /* Allows mouse scrolls to pass through this fade bar safely */
}
/* THE BOTTOM GRADIENT FADE BOX (40px Deep)
This blends from 100% transparent clear space at the top, down into
solid white at the very bottom edge, making the text dissolve elegantly
right before it hits the gold baseline frame! */
.text-box::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: calc(100% - 16px); /* for the scroll bar*/
height: 30px;
z-index: 5;
background: linear-gradient(to top,
rgba(255, 255, 255, 1.0) 0%,
rgba(255, 255, 255, 1.0) 30%,
rgba(255, 255, 255, 0.0) 100%);
pointer-events: none;
}
.close-btn.text-close-btn {
/* Changes the text "X" color to pure deep black for high contrast readability */
color: #000000 !important;
top: 6px !important;
right: 23px !important;
font-size: 28px !important;
/* Centering crosshairs to position the "X" beautifully inside its backing */
display: flex !important;
justify-content: center;
align-items: center;
/* THE SOLID VISIBILITY BACKING:
Creates a clean 34px solid white disc directly behind the button pixels.
As text slides underneath, this shield blocks it completely from view! */
background-color: #ffffff !important;
width: 50px !important;;
height: 50px !important;;
border-radius: 50%; /* Gives it soft, premium rounded circular edge lines */
border: 2px solid #dfb76c; /* Accented with a fine gold outline ring */
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
}
.dive-btn.text-dive-btn {
/* Changes the text "X" color to pure deep black for high contrast readability */
color: #000000 !important;
bottom: 6px !important;
right: 23px !important;
font-size: 28px !important;
/* Centering crosshairs to position the "X" beautifully inside its backing */
display: flex !important;
justify-content: center;
align-items: center;
/* THE SOLID VISIBILITY BACKING:
Creates a clean 34px solid white disc directly behind the button pixels.
As text slides underneath, this shield blocks it completely from view! */
background-color: #ffffff !important;
width: 50px !important;;
height: 50px !important;;
border-radius: 50%; /* Gives it soft, premium rounded circular edge lines */
border: 2px solid #dfb76c; /* Accented with a fine gold outline ring */
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
}
.text-close-btn:hover {
color: #dfb76c !important;
background-color: #000000 !important; /* Elegant color inversion when hovered! */
border-color: #000000;
}
.text-dive-btn:hover {
color: #dfb76c !important;
background-color: #000000 !important; /* Elegant color inversion when hovered! */
border-color: #000000;
}
/* Floating sticky return container row at the bottom edge of the box frame
.return-container-sticky {
position: absolute;
bottom: 12px;
left: 0px;
width: 100%;
text-align: center;
z-index: 10;
}*/
/* THE POINTER-EVENTS TRICK:
This forces the browser to pass mouse clicks right through the iframe
window so they successfully trigger your parent click listener functions! */
/*#id_whitebox-iframe {
pointer-events: none !important;
}*/
/* Re-enforces the hand pointer on the clickable wrapping div box */
/*#id_whitebox-div {
cursor: pointer !important;
}*/
/* ==========================================================================
TRANSPARENT TEXT FADING FILTERS FOR THE NORMAL EMBEDDED IFRAME
========================================================================== */
/* 1. Ensure the parent table div container allows absolute fading layers */
#id_whitebox-div {
position: relative;
overflow: hidden; /*Clips the scrolling text pixels at your row border limits */
-webkit-mask-image: linear-gradient(to bottom,
rgba(0,0,0,0) 0px,
rgba(0,0,0,1) 10px,
rgba(0,0,0,1) calc(100% - 10px),
rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom,
rgba(0,0,0,0) 0px,
rgba(0,0,0,1) 10px,
rgba(0,0,0,1) calc(100% - 10px),
rgba(0,0,0,0) 100%);
-webkit-mask-clip: padding-box;
mask-clip: padding-box;
}
/* 🌟 THE SCROLLBAR TRACK PROTECTION EXTENSION:
By calculating the size to subtract 16px from the full width, the stencil
stops right before your scrollbar runway track.
We add 'no-repeat' to prevent the browser from tiling the mask horizontally.
-webkit-mask-size: calc(100% - 16px) 100%;
mask-size: calc(100% - 16px) 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
*/
/* 🌟 THE SIBLING MASK ENGINE:
We force this wrapper box to be 16px slimmer than your table column.
Then, we apply your successful mask image directly to it!
#id_mask-wrapper {
position: relative;
width: calc(100% - 16px); /* Stops exactly before your scrollbar track runway!
height: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom,
rgba(0,0,0,0) 0px,
rgba(0,0,0,1) 40px,
rgba(0,0,0,1) calc(100% - 20px),
rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom,
rgba(0,0,0,0) 0px,
rgba(0,0,0,1) 40px,
rgba(0,0,0,1) calc(100% - 20px),
rgba(0,0,0,0) 100%);
}*/
/* Forces the inner iframe window to expand past the mask box
so its native scrollbar renders on the raw edge of your main table column!
#id_mask-wrapper iframe {
width: calc(100% + 16px) !important;
height: 100%;
}
*/