/* ========= TOPNAV menu (Field-Map) ========= */
:root{
--fm-nav-bg: #3a4a22; /* tmave zelená */
--fm-nav-bg2:#2f3e1c; /* ješte tmavší na hover */
--fm-nav-text:#ffffff;
--fm-nav-shadow: 0 10px 22px rgba(0,0,0,.18);
--fm-nav-radius: 12px;
}
/* wrapper */
.main-nav{
width: 100%;
display: flex;
justify-content: center;
padding: 5px 0 0;
margin: 0;
}
/* topnav bar */
.topnav{
position:relative;
display:flex;
justify-content:center; /* vycentrování položek */
align-items:stretch;
gap: 6px;
background: var(--fm-nav-bg);
border-radius: var(--fm-nav-radius); /* zaoblené levá/pravá */
padding: 0 54px 0 14px; /* místo vpravo pro burger ikonu */
box-shadow: var(--fm-nav-shadow);
width: min(1200px, calc(100% - 48px));
overflow: visible; /* duležité: dropdown nesmí být oríznut */
width: calc(100% - 96px); /* stejná logika jako header */
max-width: none; /* zruší omezení 1200px */
}
/* base link + dropdown button */
.topnav a.navlink,
.topnav .dropbtn{
display:inline-flex;
align-items:center;
justify-content:center;
color: var(--fm-nav-text) !important;
text-decoration:none !important;
padding: 14px 16px;
font-size: 17px;
font-weight: 800;
letter-spacing: .5px;
background: transparent;
border: 0;
border-radius: 12px;
cursor:pointer;
user-select:none;
white-space:nowrap;
}
/* hover */
.topnav a.navlink:hover,
.topnav .dropdown:hover .dropbtn,
.topnav .dropdown.open .dropbtn{
background: var(--fm-nav-bg2);
color: var(--fm-nav-text) !important;
}
/* active */
.topnav .active > .dropbtn,
.topnav a.navlink.active{
background: rgba(255,255,255,.12);
}
/* dropdown container */
.dropdown{
position:relative;
display:flex;
align-items:stretch;
}
/* caret */
.topnav .caret{
margin-left: 8px;
font-size: 12px;
line-height: 1;
}
/* dropdown content */
.dropdown-content{
display:none;
position:absolute;
left:50%;
top: 100%; /* žádná mezera */
transform: translateX(-50%);
min-width: 220px;
background:#ffffff;
border-radius: 14px;
box-shadow: 0 12px 28px rgba(0,0,0,.22);
z-index: 9999;
/* vytvorí vizuální odstup bez hover mezery */
padding-top: 8px;
padding-bottom: 8px;
}
.dropdown-content::before{
content:"";
position:absolute;
top:-8px;
left:0;
right:0;
height:8px;
}
/* dropdown links */
.dropdown-content a{
display:block;
padding: 10px 14px;
color:#111 !important;
text-decoration:none !important;
font-weight:700;
white-space:nowrap;
}
/* dropdown link hover */
.dropdown-content a:hover{
background:#e9ecef;
color:#111 !important;
}
/* show dropdown on hover (desktop) */
.dropdown:hover .dropdown-content{
display:block;
}
/* show dropdown when open (click on touch / mobile / also PC click) */
.dropdown.open .dropdown-content{
display:block;
}
/* burger icon */
.topnav .icon{
position:absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
display:none;
padding: 10px 12px;
border-radius: 12px;
color: var(--fm-nav-text) !important;
text-decoration:none !important;
font-size: 22px;
line-height: 1;
}
/* ===== responsive ===== */
@media (max-width: 760px){
.topnav{
justify-content:flex-start; /* v mobile menu se to skládá pod sebe */
flex-wrap:wrap;
padding: 8px 54px 8px 10px;
}
.topnav .icon{
display:block;
}
/* default (ne responsive): skryj položky mimo první element (typicky HOME) */
.topnav > *:not(.icon):not(:first-child){
display:none;
}
/* responsive otevrení: zobraz všechny položky (nezávisle na tom, jaké má menu_tlacitka třídy) */
.topnav.responsive > *:not(.icon){
display:flex;
width:100%;
}
.topnav.responsive a.navlink,
.topnav.responsive .dropbtn{
width:100%;
justify-content:flex-start;
}
.dropdown-content{
position:relative;
left:auto;
top:auto;
transform:none;
min-width: 100%;
margin-top: 6px;
}
}
.modal-content, .popover {
border:1px solid rgba(0, 0, 0, .2);
background-clip:padding-box
}
.modal {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:1050;
display:none;
outline:0;
-webkit-overflow-scrolling:touch
}
.modal.fade .modal-dialog {
transition:transform .3s ease-out;
transform:translate(0, -25%)
}
.modal.in .modal-dialog {
transform:translate(0, 0)
}
.modal-open .modal {
overflow-x:hidden;
overflow-y:auto
}
.modal-dialog {
position:relative;
width:auto;
margin:10px
}
.modal-content {
position:relative;
background-color:#fff;
border-radius:.3rem;
outline:0
}
.modal-backdrop {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:1040;
background-color:#000
}
.modal-backdrop.fade {
opacity:0
}
.modal-backdrop.in {
opacity:.5
}
.modal-header {
padding:15px;
border-bottom:1px solid #e5e5e5
}
.modal-header::after {
content:"";
display:table;
clear:both
}
.modal-header .close {
margin-top:-2px
}
.modal-title {
margin:0
}
.modal-body {
position:relative;
padding:15px
}
.modal-footer {
padding:15px;
text-align:right;
border-top:1px solid #e5e5e5
}
.modal-footer::after {
content:"";
display:table;
clear:both
}
.modal-footer .btn+.btn {
margin-bottom:0;
margin-left:5px
}
.modal-footer .btn-group .btn+.btn {
margin-left:-1px
}
.modal-footer .btn-block+.btn-block {
margin-left:0
}
.modal-scrollbar-measure {
position:absolute;
top:-9999px;
width:50px;
height:50px;
overflow:scroll
}
@media (min-width:544px) {
.modal-dialog {
width:700px;
margin:30px auto
}
.modal-sm {
width:300px
}
}
@media (min-width:768px) {
.modal-lg {
width:900px
}
}
#cookie-law {
max-width:980px;
background:#EEEADD;
margin:10px auto 0;
}
#cookie-law p {
padding:10px;
font-size:1.05em;
font-weight:bold;
text-align:center;
color:#682008;
margin:0;
line-height: 1.45;
}
.homepageheader {
}
.homepageleft {
float: left;
width: 330px;
padding-bottom: 10px;
}
.homepageright {
width: 660px;
float: left;
}
.homepagefooter {
padding: 10px 0;
position: relative;
clear: both;
}
.homepagefootergalery {
width: 300px;
float: left;
}
.homepagefooterusermap {
width: 660px;
float: left;
}
.inputfield {
width: 180px;
border: 1px solid;
border-color: black;
background-color: white;
}
.error {
color: #F00;
font-weight: bold;
padding: 2px;
}
input.button {
display: block;
border: thin solid #AAA;
width: 120px;
background-color: #009;
padding: 2px;
text-align: center;
color: white;
cursor: pointer;
}
.pjustify {
text-align:justify;
}
.fmworldwide {
float:right;
border: thin solid #ACA;
background-color: #FCFCFC;
padding: 15px;
}
.fmImageDown {
margin: 5px 5px 5px 5px;
background-color: #FCFCFC;
clear: both;
padding: 15px;
}
.fmImage {
float:right;
margin: 5px 5px 5px 5px;
background-color: #FCFCFC;
clear: both;
}
.fm_ImageHW {
float:right;
padding: 10px;
background-color: #FCFCFC;
}
.fm_ImageFAQ {
margin: 0 0 1.5rem 1.5rem;
float: right;
max-width: 40%;
}
@media (max-width: 768px) {
.fm_ImageFAQ {
float: none;
max-width: 100%;
margin: 1rem 0;
}
}
.fm_ImageFMLT {
float:right;
padding: 10px;
background-color: #FCFCFC;
}
.fm_ImageRight {
float:right;
padding: 20px;
}
.fm_ImageLeft {
float:Left;
padding: 20px;
}
.fm_Image {
float:none;
padding: 20px;
}
.fm_FAQDesc {
margin: 0.75rem 0 1.75rem 0;
line-height: 1.6;
}
.fm_keywordsList {
margin: 5px 5px 5px 5px;
}
.fm_FMLTDesc {
margin: 5px 5px 5px 5px;
}
.FM_icon{
float:left;
margin: 3px 5px 10px 0px;
border: 0;
}
.lineThick{
margin-top:10px;
border-top: thick solid #8BA371;
}
.categoriesList {
font-size: 10px;
padding: 5px;
border: thin solid #ACA;
background-color: #FCFCFC;
}
.devicesInCategory{
margin-top:20px;
margin-bottom:10px;
color: #151;
font-weight: bold;
clear: both;
}
.swMoreInfo2{
margin-top:10px;
margin-bottom:10px;
font-weight: bold;
}
.swMoreInfo{
margin-top:20px;
margin-bottom:10px;
color: #151;
font-weight: bold;
}
.FM_moreinfo{
float:right;
}
.swCatalogue_large {
padding: 15px;
margin: 10px 20px 10px 0;
background-color: #FCFCFC;
float: left;
width: 97%;
}
.projectsCatalogue_large {
padding: 15px;
margin: 10px 20px 10px 0;
border: thin solid #ACA;
background-color: #FCFCFC;
float: left;
width: 97%;
}
.projectName{
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.projectName2{
font-size: 14px;
font-weight: bold;
margin-top: 10px;
}
.projectDescription2{
margin-bottom: 10px;
}
.HWConponents{
margin-top: 30px;
margin-left:200px;
}
.projectLink{
font-size: 14px;
font-weight: bold;
margin-top:30px;
margin-bottom: 5px;
}
.caseStudyLink{
font-size: 12px;
margin-top:2px;
margin-bottom: 1px;
margin-left:20px;
}
.oneColElsCtrHdr {
margin: 0;
background-image: url(../images/gilruheader.jpg);
height: 135px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 10px;
color:#FFF;
}
/*
p {
padding-top:5px;
margin:0px;
font-size: 12px;
}
h1 {
font-size: 21px;
font-weight: bold;
margin-bottom: 10px;
color: #3a4135;
clear: both;
}
h2 {
font-size: 18px;
font-weight: bold;
margin-top: 15px;
margin-bottom: 10px;
color: #3a4135;
}
h3{
font-weight: bold;
font-size: 14px;
margin-bottom: 2px;
}
h4{
font-weight: bold;
font-size: 12px;
}
*/
img {
border:0px;
border: none !important;
}
img.portret {
padding: 0 10px 4px 0;
float: left;
}
table{
border: 0;
}
tr{
border: 0;
}
th{
width: 100px;
}
td{
border: 1;
vertical-align: top;
}
.thumbnail{
margin: 8px 8px 4px 0;
border: thin solid #78876e;
}
.thumbnail2{
margin: 1px 1px 1px 1px;
border: thin solid #78876e;
}
.thumbnailNoBorder{
border: 0;
}
/*
div {
margin:0px;
padding:0px;
font-family:Verdana, Arial, sans-serif;
font-size:12px;
}
*/
ul {
margin: 0 20px;
padding: 0;
list-style-type: square;
}
li {
list-style-image: url(../images/bullet.png);
margin-bottom: 5px;
}
/*
a:link {
color: #394679;
font-weight: bold;
text-decoration: none;
}
a:visited {
color:#6E8599;
font-weight: bold;
text-decoration: inherit;
}
a:hover {
color: #5E7D99;
font-weight: bold;
text-decoration: inherit;
}
a:active, a:focus {
color: #081521;
font-weight: bold;
text-decoration: inherit;
}
*/
#map_canvas{
width: 500px;
height: 300px;
float: left;
z-index:-2;
}
#menu a {
color: #fff;
}
#page {
padding: 0;
margin: auto;
height: 90%;
min-height: 90%;
}
#header {
padding: 0 5px;
margin: 0;
height: 140px;
background: url(../images/shadow.png) repeat-y;
background-position: center;
}
#header_print{
padding: 0 5px;
margin: 0;
height: 60px;
}
#logo {
float: left;
margin:0px;
padding: 0;
background-color: #3a4430;
height: 102px;
}
#logo_print {
float: left;
margin:0px;
padding: 0;
background-color: #FFF;
height: 102px;
}
#header_right {
float: right;
width:581px;
height:102px;
margin:0px;
padding: 0px;
background-color: #3a4135;
color: #fff;
}
#header_right_print {
float: right;
width:541px;
height:60px;
margin:20px;
padding: 0px;
background-color: #FFF;
color: #000;
}
#login {
vertical-align:bottom;
clear:both;
float:right;
margin: 3px 10px;
color:#FFF;
}
.login {
color:#FFF;
}
#headerSearch{
vertical-align:bottom;
clear:both;
float:right;
margin: 10px 10px;
}
#menu ul {
float:left;
margin: 0;
padding: 0;
background-color: #3a4430;
}
#menu li {
width:165px;
height:37px;
margin: 1px 0 0 1px;
border: 0;
background-image: url(../images/button_bkg.jpg);
background-repeat: repeat-x;
text-align:center;
font-size: 12px;
font-weight: bold;
color: #fff;
cursor: pointer;
list-style-type: none;
line-height: 37px;
vertical-align: middle;
}
#menu li:hover {
background-position: bottom;
}
#menu li.active {
background: url(../images/button_bkg_active.jpg) repeat-x;
}
#menu ul li {
float: left;
position: relative;
list-style: none;
}
#menu ul ul {
position: absolute;
left: -1px;
top: 37px;
visibility: hidden;
width: 252px;
margin: 0;
}
#menu ul ul ul {
position: absolute;
left: 166px;
top: 3px;
visibility: hidden;
margin: 0;
}
#menu ul li ul li {
width:240px;
position: relative;
background-color: #6d845f;
background-image:none;
padding-left: 10px;
text-align: left;
}
#menu ul li ul li a {
display: block;
width:240px;
}
#menu ul li ul li ul {
z-index: 1;
}
#menu ul li ul li:hover {
color: #fff;
background-color: #556453;
}
#menu ul li ul li:hover a {
color: #fff;
}
#menu ul li:hover>ul {
visibility: visible;
}
.FM_titleImage {
border: 0;
margin: 15px 0px 0px 15px;
padding: 0;
float: left;
width: 495;
}
.FM_Vacancies {
border: 0;
margin: 20px;
padding: 0;
float: right;
}
.titlePageLeftWideColumn{
margin:0;
padding:0;
width: 633;
float: left;
}
.titlePageProjects{
margin: 10px 20px;
width: 290px;
float: left;
}
.FM_column_wide{
margin: 10px 20px;
width: 350px;
float: left;
}
.FM_columnNavigation{
margin: 0;
padding-top: 20px;
width: 333px;
min-height:100%;
max-height:100%;
background-color:#bbc4b5;
float: left;
}
.FM_columnNavigation ul li{
list-style: none;
font-size: 14px;
font-weight: bold;
margin-top: 15px;
margin-bottom: 3px;
}
.FM_columnNavigation ul li ul li{
list-style: none;
margin-bottom: 5px;
font-size: 12px;
margin-top: 3px;
}
.FM_columnNavigation ul li .link{
list-style-image:url(../images/bullet.png);
}
.FM_columnNavigation ul li ul li ul li{
font-weight: normal;
}
.FM_columnNavigation ul li .active{
list-style-image:url(../images/bullet_red.png);
}
.FM_columnItem{
float:left;
padding: 20px;
width: 700px;
}
.FM_itemDescr{
padding-top: 20px;
}
.FM_catalogue{
text-align: center;
background-color:#FFF;
height:100%;
width: 664px;
padding-top: 100px;
float: left;
}
.FMbasicdeff{
text-align:left;
}
.titlePageBriefInfo{
margin: 5px 15px 0 0px;
width: 490px;
float: right;
}
.titlePageBriefInfoImg {
margin-top: 10px;
}
.titlePageBriefInfoText {
margin-right: 15px;
margin-top: 0px;
margin-left: 15px;
margin-down: 5px;
float:right;
}
.titlePageBriefInfo h1{
font-size: 22px;
font-weight: bold;
vertical-align: middle;
margin-right: 10px;
margin-top: 40px;
margin-left: 20px;
}
.titlePageBriefInfo p{
font-size: 16px;
font-weight: bold;
font-family:Verdana, Arial, sans-serif;
margin: 10px 20px;;
}
.headerFunctions{
margin-top: 5px;
font-size: 9px;
font-weight: bold;
}
.headerFunctions img{
margin-top: 3px;
}
.headerFunctions a{
color: #FFF;
}
.titlePageActivities{
margin: 10px 10px;
width: 250px;
float: left;
}
.FM_titlePageIndustries li{
list-style: none;
clear: left;
}
.FM_titlePageIndustries ul{
margin-left: 0;
}
.FM_Industries{
float:left;
width: 310px;
margin-top: 20px;
}
.FM_Industries li{
list-style: none;
clear: left;
}
.FM_Industries ul{
margin-left: 0;
}
.titlePageActivities li{
margin-bottom: 10px;
}
.titlePageLinks{
margin: 10px 20px;
width: 290px;
float: left;
border-top: thick solid #8BA371;
}
.titlePageLink{
margin-bottom: 6px;
}
.titlePageNews{
margin: 10px 0;
border-top: thick solid #8BA371;
}
.FM_titlePageReferences{
clear: both;
margin-top: 35px;
}
.columnNarrow {
margin: 20px 0 20px 20px;
width: 300px;
float: left;
}
.projectDescription {
padding: 40px;
width: 937px;
float: left;
}
.projectDescription p{
margin-top: 10px;
}
.projectDescription .pictures{
margin-top: 20px;
}
.FM_newline {
width: 650px;
display: inline;
text-align:left;
float: left;
}
.FM_columnRight2{
margin: 0 10px 10px 0px;
width: 310px;
float: right;
clear: both;
}
.FM_columnMiddle{
margin: 20px;
width: 260px;
float: left;
}
.FM_columnRight{
margin: 10px;
width: 260px;
float: left;
}
.FM_columnMiddleRight{
margin: 0px 0px 0px 15px;
width: 650px;
float: left;
}
.FM_screenshotBox{
margin: 5px 15px 20px 0px;
width: 305px;
float: left;
}
.FM_screenshotBox2{
margin: 5px 15px 20px 0px;
width: 180px;
float: left;
}
.FM_picturesTitlePage{
clear: both;
margin: 20px;
}
.FM_picturesIndustries{
clear:both;
margin-top: 20px;
}
.FM_introduction {
margin: 20px;
width: 300px;
float: left;
}
.historyYear{
color: #8BA371;
font-weight: bold;
width: 100px;
text-align: left;
}
.historyVerticalLine{
background-color: #8BA371;
width: 5px;
}
.historyDescription{
padding-bottom: 10px;
}
.historyThumbnail{
margin: 0 8px 10px 0;
border: thin solid #8BA371;
float: left;
}
.projectTitle{
font-weight: bold;
font-size: 14px;
margin-bottom: 2px;
}
.caseStudyTitle{
font-weight: bold;
font-size: 14px;
margin-bottom: 2px;
padding-top:12px;
}
.contactus{
font-weight: bold;
font-size: 12px;
margin-top: 20px;
margin-bottom: 20px;
border: thin solid #ACA;
width:97%;
padding: 15px;
clear: both;
}
.projectBriefInfo {
font-weight: normal;
margin-bottom: 2px;
}
.projectMoreLink{
margin-bottom: 15px;
}
.projectDetailTitle{
font-size: 21px;
font-weight: bold;
margin-bottom: 10px;
color: #151;
clear: both;
}
.projectDetailHeader{
font-weight: bold;
font-size: 14px;
margin-bottom: 2px;
margin-top: 15px;
}
.projectDetailPartner{
}
.keywords {
font-weight: bold;
}
.publication{
text-indent: -15px;
margin: 0 10px 10px 15px;
}
.mail{
color: #151;
font-weight: bold;
}
.mailHeader{
font-weight: bold;
margin-top: 5px;
}
.phone{
color: #151;
font-weight: bold;
}
.phoneHeader{
font-weight: bold;
margin-top: 5px;
}
.positionInCompany{
font-size: 14px;
color: #151;
font-weight: bold;
margin-top: -8px;
margin-bottom: 5px;
}
.personName{
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: #151;
}
.personDescription{
margin-top: 10px;
clear: both;
}
.caseStudy {
clear: both;
}
.FM_setDescr {
float:right;
width:350px;
}
.FM_SWDescr {
float:right;
width:450px;
min-height:30px;
}
.FM_weight {
margin-top:30px;
float:right;
width:350px;
border:thin solid #ACA;
background:#E4E4E4;
padding: 5px;
font-weight:bold;
}
.FM_infoaboutprices {
margin-top:30px;
font-style:italic;
font-weight:normal;
}
/* Wrapper – drží CTA vpravo, bez floatů */
.fm-moreinfo{
display:flex;
justify-content:flex-end;
margin: 10px 0;
}
/* CTA tlačítko */
.fm-moreinfo__btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 12px;
border:1px solid rgba(0,0,0,.12);
border-radius:12px;
background:#fff;
color:inherit;
text-decoration:none;
line-height:1.2;
box-shadow: 0 6px 16px rgba(0,0,0,.08);
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
/* Text */
.fm-moreinfo__text{
font-size:13px;
font-weight:700;
letter-spacing:.2px;
white-space:nowrap;
}
/* Ikona – sjednocená "pill" ploška */
.fm-moreinfo__icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:10px;
background: rgba(0,0,0,.05);
}
.fm-moreinfo__icon img{
width:18px;
height:18px;
display:block;
}
/* Hover/active/focus */
.fm-moreinfo__btn:hover{
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(0,0,0,.12);
border-color: rgba(0,0,0,.18);
}
.fm-moreinfo__btn:active{
transform: translateY(0);
box-shadow: 0 6px 16px rgba(0,0,0,.10);
}
.fm-moreinfo__btn:focus-visible{
outline: 2px solid rgba(0,0,0,.35);
outline-offset: 2px;
}
/* Mobil – ať to neleze mimo a může se zalomit */
@media (max-width: 520px){
.fm-moreinfo{
justify-content:stretch;
}
.fm-moreinfo__btn{
width:100%;
justify-content:space-between;
}
.fm-moreinfo__text{
white-space:normal;
}
}
.grayBoxCV_large {
padding: 15px;
margin: 10px 20px 10px 0;
border: thin solid #ACA;
background-color: #FCFCFC;
float: left;
min-height: 380px;
width: 40%;
}
.grayBoxCV_medium {
padding: 15px;
margin: 10px 20px 10px 0;
border: thin solid #ACA;
background-color: #FCFCFC;
float: left;
min-height: 250px;
width: 40%;
}
.grayBoxCV_small {
padding: 15px;
margin: 10px 20px 10px 0;
border: thin solid #ACA;
background-color: #FCFCFC;
float: left;
min-height: 150px;
width: 40%;
}
.contactAdressWraper{
margin: 25px;
float: left;
}
.fieldmapMap{
float:right;
margin-left: 30px;
margin-bottom: 10px;
margin-top: 10px;
}
.fieldmapBox{
float:left;
margin-right: 30px;
margin-bottom: 10px;
margin-top: 10px;
}
.fieldmapDescr{
font-stretch: normal;
}
.mapInfoWindowHeading{
font-weight: bold;
font-size: 14px;
}
.mapInfoWindowDesc{
font-size: 10px;
}
.cz_bullet {
list-style-image: url(../images/Cz_flag_bullet.png);
margin-bottom: 5px;
margin-left: 10px;
}
.en_bullet {
list-style-image: url(../images/En_flag_bullet.png);
margin-bottom: 5px;
margin-left: 10px;
}
.de_bullet {
list-style-image: url(../images/De_flag_bullet.png);
margin-bottom: 5px;
margin-left: 10px;
}
.fr_bullet {
list-style-image: url(../images/Fr_flag_bullet.png);
margin-bottom: 5px;
margin-left: 10px;
}
.es_bullet {
list-style-image: url(../images/Es_flag_bullet.png);
margin-bottom: 5px;
margin-left: 10px;
}
.ru_bullet {
list-style-image: url(../images/Ru_flag_bullet.png);
margin-bottom: 5px;
margin-left: 10px;
}
.languagesHeader{
font-size: 14px;
font-weight: bold;
margin-top: 15px;
margin-bottom: 10px;
color: #000;
}
.activity{
margin: 20px 0;
padding: 0 0 10px 0;
border-bottom: thick solid #8BA371;
}
.newsTitle{
font-weight: bold;
}
.newsDate{
font-weight: bold;
color: #151;
margin-bottom: 5px;
}
.news2{
text-align:left;
margin-bottom: 10px;
}
.news{
margin-bottom: 25px;
}
.contactAddress{
width: 50%;
float: left;
}/* ========== modern.css (single source of truth) ========== */
:root{
--fm-bg:#f6f7f8;
--fm-surface:#ffffff;
--fm-text:#1f2937;
--fm-muted:#6b7280;
--fm-brand:#33461f;
--fm-accent:#8BA371;
--fm-link:#1d4ed8;
--fm-radius:12px;
--fm-shadow:0 8px 24px rgba(0,0,0,.10);
--fm-shadow-sm:0 2px 10px rgba(0,0,0,.08);
--fm-outer: 14px; /* unified gutter for header/menu/canvas */
}
/* ===== Base ===== */
html{ background:var(--fm-bg); -webkit-text-size-adjust:100%; }
body{
margin:0;
padding:0;
height:auto;
color:var(--fm-text);
font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
line-height:1.55;
}
div{ font-size:14px; }
a:link,a:visited{ color:var(--fm-link); text-decoration:none; font-weight:600; }
a:hover{ text-decoration:underline; }
/* ===== Full-width page (no max-width) ===== */
#page,#header,#canvas,#footer{
width:100% !important;
max-width:none !important;
margin:0 !important;
}
/* The old layout often uses background images on header/canvas; neutralize where needed */
#header, #canvas{
background: transparent !important;
}
/* ===== Header wrapper alignment ===== */
#header.fm-header{
padding: 14px var(--fm-outer) 0 var(--fm-outer) !important;
box-sizing:border-box;
}
/* Header background */
#header,
#header.fm-header{
background: var(--fm-bg) !important;
height:auto !important;
}
/* The green header card (3-column layout: logo | centered login+fb | flags+search) */
.fm-header__inner{
background: var(--fm-brand) !important;
border-radius: var(--fm-radius) !important;
box-shadow: var(--fm-shadow-sm);
display:grid;
grid-template-columns: 1fr 700px;
align-items:start;
gap: 1px;
padding: 12px;
box-sizing:border-box;
}
/* left brand tile */
.fm-brand{
background: rgba(255,255,255,.06);
border-radius: 10px;
display:flex;
align-items:center;
justify-content:center;
padding: 10px;
min-height: 110px;
}
/* Keep the logo big; do not shrink to fit narrow right column.
On smaller widths the header stacks instead of shrinking the logo. */
.fm-brand__logo{
display:block;
width:auto;
height:auto;
max-height: 72px;
max-width: none;
}
/* Right block */
.fm-headright{
justify-self:end;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:10px;
color:#fff;
overflow: visible;
}
/* Top row on the right: login | flags+social */
.fm-righttop{
width: 100%;
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
flex-wrap:wrap;
}
.fm-login{ display: block; align-items:center; gap:0px; flex-wrap:wrap; }
.fm-login__user {
color: #fff;
font-weight: 800;
text-decoration: none;
padding: 6px 12px;
border-radius: 4px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background-color 0.2s ease,
box-shadow 0.2s ease,
filter 0.2s ease;
position: relative;
z-index: 10;
}
/* hover / focus – stejné chování jako fm-btn */
.fm-login__user:hover,
.fm-login__user:focus {
text-decoration: none;
background-color:#586747;
/* button efekt */
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
/* Force white for header links (including visited/hover) */
.fm-header__inner a,
.fm-header__inner a:link,
.fm-header__inner a:visited,
.fm-header__inner a:hover,
.fm-header__inner a:active,
.fm-header__inner a:focus{
color:#fff !important;
}
.fm-btn{
border:0;
border-radius:10px;
padding:10px 12px;
cursor:pointer;
font-weight:800;
display:inline-flex;
align-items:center;
gap:8px;
}
.fm-btn img{ display:inline-block; }
.fm-btn--ghost{ background: rgba(255,255,255,.10); color:#fff; }
.fm-btn--ghost:hover{ background: rgba(255,255,255,.16); }
.fm-btn--solid{ background: rgba(255,255,255,.92); color:#111827; }
.fm-btn--solid:hover{ background:#fff; }
.fm-flags{ display:flex; align-items:center; gap:4px; }
/* Social icons (compact) */
.fm-social{ display:flex; align-items:center; gap:6px; justify-content:flex-end; }
.fm-social__icon{
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(255,255,255,.12);
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
}
.fm-social__icon:hover{ background: rgba(255,255,255,.18); }
.fm-social__icon svg{
width: 18px;
height: 18px;
fill: #fff;
display:block;
}
.fm-search{ width: 100%; max-width: 520px; }
.fm-search__form{ display:flex; gap:8px; align-items:center; }
.fm-search__input{
flex:1 1 auto;
min-width: 160px;
border-radius:10px;
border:0;
padding:10px 12px;
outline:none;
}
.fm-search__by{ margin-top:4px; font-size:12px; opacity:.85; }
.fm-search__by a{ color:#fff; font-weight:700; }
/* Stack instead of shrinking the logo */
@media (max-width: 980px){
.fm-header__inner{
grid-template-columns: 1fr;
}
.fm-brand{
justify-content:center;
}
.fm-headright{
justify-self:stretch;
align-items:stretch;
}
.fm-righttop{
justify-content:space-between;
}
.fm-search{ max-width: 100%; }
}
/* ===== Canvas card ===== */
/* =========================================================
MENU (desktop dropdown + mobile burger)
Fixes: no white-on-white hover, dropdown works, rounded ends
========================================================= */
/* Desktop sticky only (mobile safari can jump) */
@media (min-width: 861px){
#menu{ position: sticky; top: 8px; }
}
/* Burger checkbox */
#menu .nav-toggle{
position:absolute;
left:-9999px;
}
/* Burger label */
#menu .nav-toggle-label{
display:none;
width:100%;
box-sizing:border-box;
padding: 12px 14px;
cursor:pointer;
color:#fff;
font-weight:900;
align-items:center;
gap:10px;
user-select:none;
}
#menu .nav-toggle-icon{
width:22px; height:14px;
position:relative; display:inline-block;
}
#menu .nav-toggle-icon::before,
#menu .nav-toggle-icon::after{
content:"";
position:absolute;
left:0; right:0;
height:2px;
background:#fff;
border-radius:2px;
}
#menu .nav-toggle-icon::before{ top:0; box-shadow: 0 6px 0 #fff; }
#menu .nav-toggle-icon::after{ bottom:0; }
/* The bar itself: rounded ends via overflow hidden */
#menu > ul#mainNav{
display:flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: visible; /* dropdowny ven */
margin:0 !important;
padding:0 !important;
width:100% !important;
list-style:none !important;
border-radius: var(--fm-radius); /* zaoblen zustane */
background: var(--fm-brand) !important; /* zelen prmo na UL */
box-sizing: border-box !important;
}
/* Center menu on desktop */
@media (min-width: 861px){
#menu > ul#mainNav{ justify-content:center; }
}
/* hide desktop scrollbar (still scrollable) */
@media (min-width: 861px){
#menu > ul#mainNav{ scrollbar-width:none; -ms-overflow-style:none; }
#menu > ul#mainNav::-webkit-scrollbar{ height:0 !important; }
}
/* Top-level items */
#menu > ul#mainNav > li{
list-style:none !important;
position:relative;
margin:0 !important;
flex: 0 0 auto;
display:block !important; /* important: do not flex li, prevents mobile tap bugs */
}
/* Top-level links only (never color the LI itself) */
#menu > ul#mainNav > li > a{
display:flex !important;
align-items:center;
justify-content:center;
min-height:44px;
padding: 0 14px;
color:#fff !important;
font-weight:900;
font-size:13px;
letter-spacing:.2px;
white-space:nowrap;
text-decoration:none !important;
}
/* Hover/active (dark, never white) */
#menu > ul#mainNav > li:hover{ background: rgba(255,255,255,.10) !important; }
#menu > ul#mainNav > li:hover > a{ color:#fff !important; }
#menu > ul#mainNav > li.active{ background: rgba(255,255,255,.16) !important; }
/* Dropdown container */
#menu ul ul{
position:absolute;
left:0;
top:100%;
display:none;
width: 280px;
margin:0;
padding:8px;
background:#fff;
border-radius:12px;
box-shadow: var(--fm-shadow);
z-index: 9999;
visibility: visible !important; /* overrides legacy menu rules (visibility:hidden) */
}
/* Show dropdown on hover/focus */
#menu > ul#mainNav > li:hover > ul,
#menu > ul#mainNav > li:focus-within > ul,
#menu > ul#mainNav > li.open > ul{
display:block;
visibility: visible !important;
}
/* IMPORTANT: if there is no submenu, do not show any "white strip" */
#menu > ul#mainNav > li > ul:empty{
display:none !important;
padding:0 !important;
}
/* Submenu items */
#menu ul ul li{
list-style:none !important;
margin:0;
padding:0;
}
#menu ul ul a{
display:block;
padding:10px 10px;
border-radius:10px;
color: var(--fm-text) !important;
font-weight:750;
text-decoration:none !important;
touch-action: manipulation;
}
#menu ul ul a:hover{
background: rgba(139,163,113,.18);
}
/* Third level */
#menu ul ul ul{ left:100%; top:0; }
/* =========================================================
MOBILE MENU
========================================================= */
@media (max-width: 1100px){
/* earlier switch to burger */
#menu .nav-toggle-label{ display:flex !important; }
#menu > ul#mainNav{
display:none !important;
flex-direction:column;
overflow: visible !important;
border-radius: var(--fm-radius);
}
#menu .nav-toggle:checked ~ ul#mainNav{
display:flex !important;
}
#menu > ul#mainNav > li{ width:100% !important; }
#menu > ul#mainNav > li > a{
justify-content:flex-start !important;
padding: 12px 12px !important;
}
/* Submenus become inline blocks under parent (always visible when menu open) */
#menu ul ul{
position: static !important;
display:block !important;
width:auto !important;
background: transparent !important;
box-shadow:none !important;
padding: 0 0 8px 12px !important;
margin:0 !important;
border-radius:0 !important;
}
#menu > ul#mainNav > li > ul:empty{ display:none !important; padding:0 !important; }
/* Make submenu links tappable and clearly separated */
#menu ul ul a{
background: rgba(255,255,255,.10);
color:#fff !important;
padding: 10px 10px;
margin-top: 6px;
border-radius: 10px;
}
#menu ul ul a:hover{
background: rgba(255,255,255,.16);
}
}
/* ===== Media safety ===== */
img{ max-width:100%; height:auto; }
/* =========================================================
HOME HERO (your redesign) + cards grid
========================================================= */
.home-hero{
display:grid;
grid-template-columns: 1.15fr .85fr;
gap: 18px;
margin: 12px 0 18px 0;
}
.home-hero__left,
.home-hero__right{
background: var(--fm-surface);
border-radius: var(--fm-radius);
box-shadow: var(--fm-shadow);
padding: 18px;
}
.home-title{
margin: 0 0 10px 0;
font-size: clamp(28px, 3.2vw, 44px);
line-height: 1.1;
}
.home-lead{
margin: 0 0 14px 0;
font-size: 16px;
color: #111827;
max-width: 70ch;
}
.home-cta{
display:flex;
flex-wrap: wrap;
gap: 10px;
margin: 12px 0 14px 0;
}
.btn-primary,
.btn-ghost{
display:inline-flex;
align-items:center;
justify-content:center;
min-height: 42px;
padding: 0 14px;
border-radius: 12px;
font-weight: 900;
text-decoration:none !important;
white-space: nowrap;
}
.btn-primary{ background: var(--fm-brand); color:#fff !important; }
.btn-primary:hover{ filter: brightness(1.05); }
.btn-ghost{ background: rgba(51,70,31,.08); color:#1f2937 !important; }
.btn-ghost:hover{ background: rgba(51,70,31,.12); }
.home-catalogue__img{
width: 100%;
max-width: 260px;
border-radius: 12px;
box-shadow: var(--fm-shadow-sm);
display:block;
}
.ratio-16x9{
position: relative;
width: 100%;
padding-top: 56.25%;
overflow: hidden;
border-radius: 12px;
background: #000;
}
.ratio-16x9 iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
display:block;
}
/* Cards for legacy blocks (home-grid wrapper you added) */
.home-grid{
display: grid;
grid-template-columns: 1fr 1.35fr;
gap: 18px;
margin: 18px 0;
}
.home-grid > .FM_columnRight2,
.home-grid > .FM_columnMiddleRight{
float: none !important;
width: auto !important;
background: var(--fm-surface);
border-radius: var(--fm-radius);
box-shadow: var(--fm-shadow);
padding: 18px;
box-sizing: border-box;
}
/* Sub-cards inside */
.FM_titlePageIndustries,
.FM_titlePageReferences,
.FM_screenshotBox{
background: rgba(31,41,55,.03);
border-radius: 12px;
padding: 12px;
margin: 12px 0;
}
.news2{
background: #fff;
border-radius: 10px;
padding: 10px 10px;
margin: 10px 0;
box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.newsDate{
display: inline-block;
font-weight: 900;
color: var(--fm-muted);
margin-right: 8px;
white-space: nowrap;
}
/* Banner iframe responsive */
.FM_titlePageIndustries iframe{
width: 100% !important;
max-width: 100% !important;
height: 420px !important;
display:block;
border:0;
border-radius: 12px;
overflow:hidden;
}
/* Gallery thumbs */
.FM_titlePageReferences a{ display:inline-block; margin:6px 6px 0 0; }
.FM_titlePageReferences img.thumbnail{
width: 137px;
max-width: 48%;
border-radius: 10px;
}
/* Users image */
.FM_columnMiddleRight > a > img{
border-radius: 12px;
box-shadow: var(--fm-shadow-sm);
}
@media (max-width: 980px){
.home-hero{ grid-template-columns: 1fr; }
}
@media (max-width: 1100px){
.home-grid{ grid-template-columns: 1fr; }
.FM_titlePageIndustries iframe{ height: 360px !important; }
}
@media (max-width: 520px){
.home-hero__left,.home-hero__right{ padding:14px; }
.home-grid > .FM_columnRight2,.home-grid > .FM_columnMiddleRight{ padding:14px; }
.FM_titlePageIndustries iframe{ height: 320px !important; }
}
/* Force legacy columns not to float if something reintroduces it */
.FM_columnMiddleRight,
.FM_columnRight2{
clear: both !important;
display:block !important;
float:none !important;
}
/* =========================
PATCH: unify widths + full-width menu bar + both rounded ends
paste at very end of modern.css
========================= */
/* 1) Make header/menu/canvas use EXACTLY same outer gutter */
#header.fm-header{ padding-left: var(--fm-outer) !important; padding-right: var(--fm-outer) !important; }
#menu{ margin-left: var(--fm-outer) !important; margin-right: var(--fm-outer) !important; width: auto !important; }
#canvas{ margin-left: var(--fm-outer) !important; margin-right: var(--fm-outer) !important; }
/* 2) Force menu container to be block-level and stretch */
/* 3) UL inside menu must fill the menu width */
#menu > ul#mainNav{
width: 100% !important;
box-sizing: border-box !important;
border-radius: 0 !important; /* rounding is handled by #menu overflow */
margin: 0 !important;
padding: 0 !important;
}
/* 4) Ensure last visible part doesn't look "square" */
#menu > ul#mainNav > li:last-child{ margin-right: 0 !important; }
#menu > ul#mainNav > li:last-child > a{ border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
/* 5) If any legacy CSS sets #menu to fixed width or inline-block, override it hard */
#menu, #menu *{ max-width: 100% !important; }
#menu li{ background-image:none !important; background-color:transparent !important; }
#menu li.active{ background-image:none !important; background-color: rgba(255,255,255,.16) !important; }
/* Flags: no external images */
/* Language icons styled like .fm-social__icon (keep background-image on hover) */
.fm-flags .flag,
.flags .flag,
.flag{
position: relative;
width: 36px;
height: 36px;
display: inline-block;
border-radius: 10px;
text-decoration: none;
/* same as .fm-social__icon */
background-color: rgba(255,255,255,.12);
transition: background-color 0.15s ease;
/* SVG label */
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* hover identical to .fm-social__icon:hover BUT without resetting background-image */
.fm-flags .flag:hover,
.flags .flag:hover,
.flag:hover{
background-color: rgba(255,255,255,.18);
}
/* SVGs: only white text, no own background (Variant A: unified tile background) */
.flag.en{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Ctext x='30' y='27' font-size='20' font-family='Arial, Helvetica, sans-serif' font-weight='700' fill='white' text-anchor='middle'%3EEN%3C/text%3E%3C/svg%3E");}
.flag.es{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Ctext x='30' y='27' font-size='20' font-family='Arial, Helvetica, sans-serif' font-weight='700' fill='white' text-anchor='middle'%3EES%3C/text%3E%3C/svg%3E");}
.flag.fr{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Ctext x='30' y='27' font-size='20' font-family='Arial, Helvetica, sans-serif' font-weight='700' fill='white' text-anchor='middle'%3EFR%3C/text%3E%3C/svg%3E");}
.flag.de{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Ctext x='30' y='27' font-size='20' font-family='Arial, Helvetica, sans-serif' font-weight='700' fill='white' text-anchor='middle'%3EDE%3C/text%3E%3C/svg%3E");}
.flag.cz{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Ctext x='30' y='27' font-size='20' font-family='Arial, Helvetica, sans-serif' font-weight='700' fill='white' text-anchor='middle'%3ECZ%3C/text%3E%3C/svg%3E");}
.flag.ru{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Ctext x='30' y='27' font-size='20' font-family='Arial, Helvetica, sans-serif' font-weight='700' fill='white' text-anchor='middle'%3ERU%3C/text%3E%3C/svg%3E");}
/* Tooltip (desktop hint) */
.flag::after,
.has-hint::after{
content: attr(data-hint);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 34px; /* nad prvkem */
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 9999; /* nad headerem */
background: #fff;
color: #222;
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.flag:hover::after,
.has-hint:hover::after{
opacity: 1;
}
/* keyboard focus like buttons */
.flag:focus-visible{
outline: 2px solid rgba(255,255,255,.5);
outline-offset: 2px;
}
/* Lightweight lightbox overlay */
.fm-lightbox{position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:99999; padding:24px;}
.fm-lightbox--open{display:flex;}
.fm-lightbox__img{max-width:95vw; max-height:95vh; box-shadow:0 10px 30px rgba(0,0,0,.4); border-radius:10px;}
.fm-lightbox__close{position:absolute; top:16px; right:16px; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:10px 14px; cursor:pointer; font:inherit;}
/* 1) zru mezeru mezi header a menu */
#header.fm-header{
padding-bottom: 0 !important;
}
/* ===== Login modal ===== */
.fm-modal{
position: fixed;
inset: 0;
display: none;
z-index: 100000;
/* vylepšení: spolehlivé centrování panelu */
align-items: center;
justify-content: center;
padding: 8vh 16px;
}
.fm-modal[aria-hidden="false"]{ display:flex; }
.fm-modal__backdrop{
position:absolute;
inset:0;
background: rgba(0,0,0,.45);
}
.fm-modal__panel{
position: relative;
/* původní rozměry zachovány, jen bez margin-top */
width: min(520px, calc(100% - 0px));
margin: 0;
/* zachováno */
background: #fff;
border-radius: 16px;
box-shadow: 0 18px 50px rgba(0,0,0,.28);
overflow: hidden;
}
.fm-modal__close{
position:absolute;
top:10px;
right:10px;
width:36px;
height:36px;
border:0;
border-radius:10px;
background: rgba(0,0,0,.06);
cursor:pointer;
/* sloučeno z obou verzí */
font-size: 24px;
line-height: 36px;
}
.fm-modal__body{ padding: 20px 20px 18px; }
.fm-modal__spinner{ font-weight: 700; opacity:.7; }
/* Prevent background scroll when modal is open (sjednoceno) */
html.fm-modal-open,
html.fm-modal-open body{ overflow:hidden; }
/* ===== Původní login titulek + error (zachováno) ===== */
.fm-login-modal__title{
font-size: 22px;
font-weight: 900;
margin: 4px 0 14px;
color:#111;
}
.fm-login-error{
background:#ffe8e8;
border:1px solid #ffbcbc;
color:#7a1d1d;
padding:10px 12px;
border-radius:12px;
margin: 0 0 12px;
font-weight:700;
}
/* ===== Login form (varianta A) ===== */
.fm-login-form{ display:grid; gap: 12px; }
.fm-field{ display:grid; gap: 6px; }
.fm-field__label{ font-weight: 800; color:#2b2b2b; }
.fm-input{
width:100%;
padding: 10px 12px;
border-radius: 12px;
border:1px solid #d7d7d7;
font-size: 16px;
}
.fm-input:focus{
outline: none;
border-color:#6aa36a;
box-shadow: 0 0 0 3px rgba(106,163,106,.22);
}
.fm-login-actions{
display:flex;
gap:10px;
justify-content:flex-end;
margin-top: 6px;
}
/* ===== Login form (varianta B / BEM) — zachováno ===== */
.fm-login__title{
margin: 0 0 14px 0;
font-size: 22px;
/* zalamování */
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
}
.fm-login__alert{
margin:0 0 12px 0;
padding:10px 12px;
border-radius:12px;
background:#ffe8e8;
color:#7a1d1d;
font-weight:700;
}
.fm-login__label{
display:block;
margin: 10px 0 6px;
font-weight:800;
}
.fm-login__input{
width:100%;
padding: 10px 12px;
border: 1px solid rgba(0,0,0,.18);
border-radius: 12px;
font-size: 16px;
}
.fm-login__actions{
display:flex;
gap:10px;
justify-content:flex-end;
margin-top:14px;
}
/* ===== Updates page: full-width responsive layout ===== */
.fm-content{ padding: 12px 0 18px; }
.fm-pagehead{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap: 14px;
margin: 10px 0 16px;
flex-wrap: wrap;
}
.fm-pagehead__title{ margin:0; font-size: 34px; letter-spacing:.2px; }
.fm-pagehead__sub{ color: rgba(0,0,0,.65); font-weight: 700; margin-top: 6px; }
.fm-card{
background: var(--fm-surface, #fff);
border-radius: 20px;
box-shadow: var(--fm-shadow-sm);
padding: 18px;
margin: 0 0 16px 0;
}
.fm-card__title{ margin: 0 0 12px; font-size: 22px; }
.fm-card__actions{ margin-top: 10px; display:flex; gap:10px; flex-wrap:wrap; }
.fm-muted{ color: rgba(0,0,0,.65); }
.fm-small{ font-size: 14px; }
/* Available files as tiles */
.fm-filegrid{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
@media (max-width: 980px){ .fm-filegrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px){ .fm-filegrid{ grid-template-columns: 1fr; } }
.fm-file{
display:block;
padding: 12px 14px;
border-radius: 16px;
background: rgba(0,0,0,.04);
text-decoration:none;
color: inherit;
border: 1px solid rgba(0,0,0,.08);
}
.fm-file:hover{ background: rgba(0,0,0,.06); }
.fm-file__name{ font-weight: 900; word-break: break-word; }
.fm-file__hint{ margin-top: 4px; font-weight: 700; color: rgba(0,0,0,.62); }
/* Release sections */
.fm-release{
background: var(--fm-surface, #fff);
border-radius: 22px;
box-shadow: var(--fm-shadow-sm);
padding: 18px;
margin: 0 0 16px 0;
}
.fm-release__head{
display:grid;
grid-template-columns: 1.2fr .8fr;
gap: 14px;
align-items:start;
}
@media (max-width: 980px){ .fm-release__head{ grid-template-columns: 1fr; } }
.fm-release__title{ margin: 0; font-size: 26px; }
.fm-release__meta{
display:flex;
gap: 10px;
flex-wrap: wrap;
align-items:center;
margin-top: 8px;
}
.fm-link{ font-weight: 800; text-decoration: underline; }
.fm-chip{
display:inline-flex;
align-items:center;
padding: 6px 10px;
border-radius: 18px;
font-weight: 800;
background: rgba(0,0,0,.06);
}
.fm-chip--warn{ background: rgba(245, 158, 11, .18); }
/* Download block */
.fm-dl{
border-radius: 18px;
background: rgba(16, 185, 129, .08); /* jemný zelený */
border: 1px solid rgba(16, 185, 129, .22);
padding: 14px;
}
.fm-dl__row{ display:flex; justify-content:space-between; gap: 10px; padding: 4px 0; }
.fm-dl__label{ font-weight: 800; color: rgba(0,0,0,.65); }
.fm-dl__val{ font-weight: 900; }
.fm-dl__btn{ width:100%; margin-top: 10px; }
.fm-dl__product{ margin-top: 8px; font-weight: 800; color: rgba(0,0,0,.65); }
/* Help tiles */
.fm-helpgrid{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 14px;
}
@media (max-width: 1100px){ .fm-helpgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px){ .fm-helpgrid{ grid-template-columns: 1fr; } }
.fm-help{
border-radius: 18px;
background: rgba(0,0,0,.035);
border: 1px solid rgba(0,0,0,.07);
padding: 12px 12px;
display:flex;
flex-direction:column;
gap: 10px;
}
.fm-help__meta{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }
.fm-help__actions{ display:flex; justify-content:flex-end; }
/* Other downloads */
.fm-othergrid{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 980px){ .fm-othergrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px){ .fm-othergrid{ grid-template-columns: 1fr; } }
.fm-otheritem{
border-radius: 18px;
background: rgba(0,0,0,.035);
border: 1px solid rgba(0,0,0,.07);
padding: 12px;
display:flex;
flex-direction:column;
gap: 10px;
}
.fm-otheritem__name{ font-weight: 900; }
.fm-otheritem__meta{ color: rgba(0,0,0,.65); font-weight: 800; }
/* Make sure all containers are fluid */
#page, #header, #canvas, #footer {
width: 100% !important;
max-width: none !important; /* remove any max-width caps */
margin: 0 !important;
padding: 0 !important;
}
/* Global box-sizing (helps with fixed widths) */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove fixed width from the main content wrapper */
.columnWide.fm-content,
.fm-content {
width: 100% !important; /* full width */
max-width: 1400px; /* optional cap for very wide screens */
margin: 0 auto; /* center on large screens */
padding: 12px 24px; /* keep some gutter */
float: none; /* stop floating */
}
/* Release card header – collapse to one column on narrow screens */
.fm-release__head {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 14px;
align-items: start;
}
@media (max-width: 980px) {
.fm-release__head {
grid-template-columns: 1fr; /* single column */
}
}
/* File grid – auto-fit columns */
.fm-filegrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 10px;
}
@media (max-width: 620px) {
.fm-filegrid {
grid-template-columns: 1fr; /* stack vertically */
}
}
/* Help grid – similar responsive behaviour */
.fm-helpgrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 12px;
margin-top: 14px;
}
@media (max-width: 680px) {
.fm-helpgrid {
grid-template-columns: 1fr;
}
}
/* Other downloads grid */
.fm-othergrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 12px;
}
@media (max-width: 620px) {
.fm-othergrid {
grid-template-columns: 1fr;
}
}
/* Ensure the menu stays full-width and rounded */
#menu {
max-width: none !important;
margin-left: var(--fm-outer) !important;
margin-right: var(--fm-outer) !important;
border-radius: var(--fm-radius) !important;
overflow: visible !important;
}
#menu > ul#mainNav {
width: 100% !important;
box-sizing: border-box !important;
border-radius: 0 !important;
}
/* Optional: remove any lingering float:left on legacy classes */
.FMtwoColumns #column1,
.FMtwoColumns #column2,
.FMthreeColumns #column1,
.FMthreeColumns #column2,
.FMthreeColumns #column3 {
float: none !important;
width: 100% !important;
}
/* Hlavicka */
#header {
width: 100%;
background: var(--fm-brand); /* nebo jakýkoli pozadí */
}
/* Menu */
#menu {
background: var(--fm-brand);
display: block !important;
float: none !important;
clear: both !important;
width: calc(100% - (2 * var(--fm-outer))) !important; /* stretches across the same width as header/canvas */
box-sizing: border-box !important;
border-radius: var(--fm-radius) !important;
overflow: visible !important; /* IMPORTANT: dropdowns must not be clipped */
margin: 2px; /* vycentrování */
}
#canvas{
width: 100%;
display: flex;
justify-content: center;
}
.fm-version-history{
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--fm-outer);
box-sizing: border-box;
}
.fm-version-history h1 {
margin-bottom: 1.2rem;
}
/* Header */
.fm-vh-header {
display: grid;
grid-template-columns: 140px 140px minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
padding: 10px 14px;
background: #e6e6e6;
font-weight: 700;
border-radius: 8px;
}
/* Rows */
.fm-vh-row {
display: grid;
grid-template-columns: 140px 140px minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
padding: 14px;
margin-top: 10px;
border-radius: 8px;
background: #f7f7f7;
}
/* Release highlight */
.fm-vh-release {
background: #f0e589;
font-weight: 600;
}
/* Cells */
.fm-vh-build,
.fm-vh-date {
white-space: nowrap;
}
.fm-vh-highlight {
grid-column: 3 / 5;
text-align: center;
font-size: 1.05em;
}
/* Note */
.fm-vh-note {
font-style: italic;
margin-top: 10px;
color: #555;
}
/* Responsive */
@media (max-width: 900px) {
.fm-vh-header {
display: none;
}
.fm-vh-row {
grid-template-columns: 1fr;
gap: 6px;
}
.fm-vh-build::before {
content: "Build: ";
font-weight: 700;
}
.fm-vh-date::before {
content: "Date: ";
font-weight: 700;
}
.fm-vh-highlight {
grid-column: auto;
text-align: left;
}
}
/* ================================
Dealers / representatives layout
(no HTML changes, keep legacy)
================================ */
/* Bezpecné zúžení scope: jen když je uvnitr .FMthreeColumns */
.columnWide .FMthreeColumns{
/* 3 sloupce na desktopu, responsivní prechod níže */
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
align-items: start;
width: 100%;
}
/* Sloupce jako "karty" */
.columnWide .FMthreeColumns #column1,
.columnWide .FMthreeColumns #column2,
.columnWide .FMthreeColumns #column3{
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 12px;
padding: 16px 16px 6px;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
min-width: 0; /* duležité: zabrání roztažení pres container */
}
.FMtwoColumns #column1 {
float: left;
width: 49%;
padding: 15px 0;
}
.FMtwoColumns #column2 {
float: right;
width: 49%;
padding: 15px 0;
}
/* Typografie v rámci techto sloupcu */
.columnWide .FMthreeColumns h2{
margin: 0 0 10px;
padding: 10px 12px;
border-radius: 10px;
background: rgba(0,0,0,.04);
letter-spacing: .02em;
font-size: 1.05rem;
text-transform: uppercase;
}
.columnWide .FMthreeColumns h3{
margin: 14px 0 6px;
font-size: 1rem;
line-height: 1.25;
}
/* Kontaktní bloky */
.columnWide .FMthreeColumns p{
margin: 0 0 12px;
padding: 10px 12px;
border-radius: 10px;
background: rgba(0,0,0,.025);
border: 1px solid rgba(0,0,0,.06);
line-height: 1.45;
overflow-wrap: anywhere; /* dlouhé e-maily/URL nelámou layout */
word-break: break-word;
}
/* Odkazy: citelné, bez rozbití layoutu */
.columnWide .FMthreeColumns a{
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.25);
padding-bottom: 1px;
}
.columnWide .FMthreeColumns a:hover,
.columnWide .FMthreeColumns a:focus{
border-bottom-color: rgba(0,0,0,.55);
}
/* Jemné oddelení sekcí: když následuje h3 po p, at je to vzdušnejší */
.columnWide .FMthreeColumns p + h3{
margin-top: 16px;
}
/* ================================
Responsive breakpoints
================================ */
/* Tablet: 2 sloupce */
@media (max-width: 980px){
.columnWide .FMthreeColumns{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Mobil: 1 sloupec */
@media (max-width: 640px){
.columnWide .FMthreeColumns{
grid-template-columns: 1fr;
gap: 14px;
}
.columnWide .FMthreeColumns #column1,
.columnWide .FMthreeColumns #column2,
.columnWide .FMthreeColumns #column3{
padding: 14px 14px 6px;
}
.columnWide .FMthreeColumns p{
padding: 10px 10px;
}
}
/* =========================
Contact page (scoped)
========================= */
.contactPage{
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--fm-outer);
box-sizing: border-box;
}
.basicPage{
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--fm-outer);
box-sizing: border-box;
}
.columnWide.contactPage{
width: 100%;
}
.columnWide.contactPage h2{
margin-bottom: 14px;
}
/* 2 karty vedle sebe, responsivne pod sebe */
.columnWide.contactPage .contactGrid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
align-items: start;
}
/* Použijeme existující .contactAddress, ale dáme mu nový vzhled jen tady */
.columnWide.contactPage .contactCard{
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
min-width: 0;
}
.columnWide.contactPage .contactCard__body{
padding: 16px 16px 12px;
}
.columnWide.contactPage .contactIntro{
margin: 0 0 12px;
color: rgba(0,0,0,.72);
}
.columnWide.contactPage .contactTitle{
margin: 0 0 10px;
padding: 10px 12px;
border-radius: 10px;
background: rgba(0,0,0,.04);
text-transform: uppercase;
letter-spacing: .02em;
font-size: 1.0rem;
}
.columnWide.contactPage .contactBlock{
margin: 0 0 12px;
padding: 10px 12px;
border-radius: 10px;
background: rgba(0,0,0,.025);
border: 1px solid rgba(0,0,0,.06);
line-height: 1.45;
overflow-wrap: anywhere;
word-break: break-word;
}
.columnWide.contactPage address.contactBlock{
font-style: normal;
}
.columnWide.contactPage .contactLinks{
margin: 0 0 12px;
padding: 0 12px;
overflow-wrap: anywhere;
}
.columnWide.contactPage a{
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.25);
padding-bottom: 1px;
}
.columnWide.contactPage a:hover,
.columnWide.contactPage a:focus{
border-bottom-color: rgba(0,0,0,.55);
}
/* Kontakty jako definice list (bez tabulky) */
.columnWide.contactPage .contactList{
margin: 0;
}
.columnWide.contactPage .contactRow{
display: grid;
grid-template-columns: 160px minmax(0, 1fr);
gap: 10px;
align-items: baseline;
padding: 10px 12px;
border-radius: 10px;
background: rgba(0,0,0,.025);
border: 1px solid rgba(0,0,0,.06);
margin-bottom: 10px;
}
.columnWide.contactPage .contactRow dt{
margin: 0;
font-weight: 700;
color: rgba(0,0,0,.75);
}
.columnWide.contactPage .contactRow dd{
margin: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Mapa */
.columnWide.contactPage .contactMap{
margin-top: 18px;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.columnWide.contactPage .contactMap iframe{
display: block;
width: 100%;
height: 466px;
border: 0;
}
/* Responsive */
@media (max-width: 900px){
.columnWide.contactPage .contactGrid{
grid-template-columns: 1fr;
}
.columnWide.contactPage .contactRow{
grid-template-columns: 1fr;
}
}
/* CONTACT page: kill legacy floats for contactAddress */
.columnWide.contactPage .contactAddress{
float: none !important;
width: auto !important;
margin: 0 !important;
}
/* Make sure the grid area does not collapse because of floats from other legacy rules */
.columnWide.contactPage .contactGrid{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
align-items: start;
width: 100%;
}
@media (max-width: 900px){
.columnWide.contactPage .contactGrid{
grid-template-columns: 1fr;
}
}
/* === Services section – base === */
.columnWide {
max-width: 1100px;
line-height: 1.6;
}
/* Hlavní nadpis */
.columnWide > h1 {
font-size: 2.2rem;
margin-bottom: 1.2rem;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 0.4rem;
}
/* Podnadpisy sekcí */
.columnWide > h2 {
font-size: 1.4rem;
margin-top: 2rem;
margin-bottom: 0.8rem;
color: #1f3a5f;
}
/* === YouTube video === */
.youtubevideo_floatright {
float: right;
margin: 0 0 1rem 2rem;
width: 460px;
}
.youtubevideo_floatright iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border-radius: 6px;
box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
/* === Seznam služeb === */
.columnWide ul {
margin: 0.8rem 0 1.2rem 1.2rem;
padding: 0;
}
.columnWide ul li {
margin-bottom: 0.5rem;
padding-left: 0.4rem;
}
/* jemné odlišení první sekce */
.columnWide h2:first-of-type + div + ul li {
font-weight: 500;
}
/* === Contact box === */
.contactus {
margin-top: 2.5rem;
padding: 1.2rem 1.4rem;
background: #f4f7fa;
border-left: 5px solid #1f3a5f;
font-size: 1.05rem;
}
.contactus a {
color: #1f3a5f;
font-weight: 600;
text-decoration: none;
}
.contactus a:hover {
text-decoration: underline;
}
/* === Clearfix pro float === */
.columnWide::after {
content: "";
display: block;
clear: both;
}
/* === Responsive úpravy === */
@media (max-width: 900px) {
.youtubevideo_floatright {
float: right;
margin: 0 0 1rem 2rem;
max-width: 560px;
min-width: 420px;
}
}
/* === Downloads page layout === */
.downloadSection {
margin-top: 1rem;
}
/* Blok sekce */
.dlBlock {
margin: 1.6rem 0 2.2rem;
padding: 1.1rem 1.2rem;
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 8px;
}
/* Nadpisy sekcí */
.dlTitle {
margin: 0 0 0.9rem;
font-size: 1.35rem;
color: #1f3a5f;
}
/* Hlavicka se dvema prvky (H2 + hint) */
.dlHeader {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.dlHint {
color: #5b6673;
font-size: 0.98rem;
}
/* Seznam rádku */
.dlList {
display: grid;
gap: 0.6rem;
}
/* Jeden rádek download položky */
.dlRow {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.8rem;
align-items: center;
padding: 0.65rem 0.75rem;
border: 1px solid #f0f0f0;
border-radius: 6px;
background: #fafbfd;
}
.dlRow:hover {
background: #f3f7fb;
border-color: #e2e8f0;
}
/* Název položky */
.dlName {
min-width: 0;
word-break: break-word;
}
/* Vlajecky */
.dlFlags {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.dlFlag img {
width: 18px;
height: 18px;
display: block;
}
/* Speciální rádek pro FM install */
.dlRow--single {
grid-template-columns: 1fr;
background: #f6f9fc;
}
/* Odkaz "install/demo" */
.dlMainLink {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-weight: 600;
color: #1f3a5f;
}
.dlMainLink:hover {
text-decoration: underline;
}
.dlIcon {
width: 40px;
height: auto;
display: block;
}
/* Responsive: na úzkých displejích dát flags pod název */
@media (max-width: 680px) {
.dlRow {
grid-template-columns: 1fr;
align-items: start;
}
.dlFlags {
justify-content: flex-start;
}
}
/* === Worldwide usage page === */
/* Základ typografie a šírka */
.columnWide {
max-width: 1100px;
line-height: 1.6;
}
/* H1 */
.columnWide > h1 {
font-size: 2.1rem;
margin: 0 0 1.2rem;
padding-bottom: 0.4rem;
border-bottom: 2px solid #e5e7eb;
}
/* Obrázek s lightboxem */
.fmworldwide {
margin: 1rem 0 1.6rem;
text-align: center;
}
.fmworldwide a {
display: inline-block;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.fmworldwide img {
display: block;
max-width: 100%;
height: auto;
}
/* Kontinentální nadpisy */
.columnWide h3 {
margin: 2.2rem 0 0.8rem;
font-size: 1.35rem;
letter-spacing: 0.02em;
color: #1f3a5f;
border-left: 5px solid #1f3a5f;
padding: 0.2rem 0 0.2rem 0.8rem;
}
/* Hlavní seznam státu (první UL po H3) */
.columnWide h3 + ul {
margin: 0.9rem 0 0;
padding: 0;
list-style: none;
}
/* Jeden stát = LI v hlavním UL */
.columnWide h3 + ul > li {
margin: 0 0 0.9rem;
padding: 0.85rem 1rem;
border: 1px solid #edf0f3;
border-radius: 10px;
background: #fafbfd;
}
/* Hover efekt na desktop */
@media (hover: hover) {
.columnWide h3 + ul > li:hover {
background: #f3f7fb;
border-color: #e2e8f0;
}
}
/* Název státu (b uvnitr prvního li) */
.columnWide h3 + ul > li > b {
display: inline-block;
font-size: 1.05rem;
color: #111827;
margin-bottom: 0.45rem;
}
/* Vnitrní seznam institucí */
.columnWide h3 + ul > li > ul {
margin: 0.4rem 0 0;
padding-left: 1.1rem;
list-style: disc;
}
.columnWide h3 + ul > li > ul > li {
margin: 0.25rem 0;
color: #243140;
}
/* Odstranit vizuální "mezery" rešené
mezi státy */
.columnWide h3 + ul > br {
display: none;
}
/* Nekteré staré HTML má náhodné
uvnitr li – zjemníme */
.columnWide li br {
line-height: 1.1;
}
/* Kontakt box */
.contactus {
margin-top: 2.5rem;
padding: 1.2rem 1.4rem;
background: #f4f7fa;
border-left: 5px solid #1f3a5f;
font-size: 1.05rem;
}
.contactus a {
color: #1f3a5f;
font-weight: 700;
text-decoration: none;
}
.contactus a:hover {
text-decoration: underline;
}
/* Responzivní doladení */
@media (max-width: 700px) {
.columnWide > h1 {
font-size: 1.75rem;
}
.columnWide h3 {
font-size: 1.2rem;
}
.columnWide h3 + ul > li {
padding: 0.75rem 0.85rem;
}
.columnWide h3 + ul > li > ul {
padding-left: 1rem;
}
}
/* === Publications page === */
.projectDescription {
max-width: 1100px;
}
.projectDescription > h1 {
font-size: 2.05rem;
margin: 0 0 1.1rem;
padding-bottom: 0.4rem;
border-bottom: 2px solid #e5e7eb;
}
/* Filter row */
.pubFilter {
display: flex;
align-items: center;
gap: 0.8rem;
flex-wrap: wrap;
margin: 0.8rem 0 1.2rem;
}
.pubSelect {
min-width: 240px;
max-width: 100%;
padding: 0.55rem 0.7rem;
border: 1px solid #d1d5db;
border-radius: 8px;
background: #fff;
font-size: 1rem;
}
/* List */
.pubList {
display: grid;
gap: 0.75rem;
}
/* Item */
.publication {
padding: 0.85rem 1rem;
border: 1px solid #edf0f3;
border-radius: 10px;
background: #fafbfd;
line-height: 1.55;
color: #1f2937;
}
@media (hover: hover) {
.publication:hover {
background: #f3f7fb;
border-color: #e2e8f0;
}
}
/* Link "more" */
.pubMore {
display: block;
margin-left: 0;
margin-top: 0.5rem; /* volitelné odsazení shora */
padding: 0.25rem 0.55rem;
text-decoration: none;
font-weight: 700;
white-space: nowrap;
}
.pubMore:hover {
border-color: #94a3b8;
text-decoration: none;
}
/* Make long inline HTML inside citace look decent */
.publication a:not(.pubMore) {
color: #1f3a5f;
font-weight: 600;
text-decoration: none;
}
.publication a:not(.pubMore):hover {
text-decoration: underline;
}
/* Mobile tweaks */
@media (max-width: 700px) {
.projectDescription > h1 {
font-size: 1.75rem;
}
.publication {
padding: 0.75rem 0.85rem;
}
}
/* Case study pages (overview, category list, detail) */
.columnWide .csCatGrid{
list-style:none;
margin: 1rem 0 0;
padding: 0;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.csCatItem{ margin:0; padding:0; }
.csCatLink{
display:block;
padding: 14px 16px;
border: 1px solid rgba(0,0,0,.12);
border-radius: 12px;
text-decoration:none;
background: rgba(255,255,255,.6);
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.csCatLink:hover,
.csCatLink:focus{
transform: translateY(-1px);
border-color: rgba(0,0,0,.20);
box-shadow: 0 6px 18px rgba(0,0,0,.10);
outline: none;
}
.csCatTitle{
font-weight: 800;
line-height: 1.25;
margin: 0 0 .35rem;
color: inherit;
}
.csCatDesc{
margin: 0;
opacity: .85;
line-height: 1.45;
font-size: .95rem;
}
/* Category page (list of projects in category) */
.caseStudyList{
list-style:none;
margin: .75rem 0 0;
padding: 0;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 10px;
}
.caseStudyItem{ margin:0; padding:0; }
.caseStudyItem a{
display:block;
padding: 12px 14px;
border: 1px solid rgba(0,0,0,.10);
border-radius: 10px;
text-decoration:none;
background: rgba(255,255,255,.55);
transition: border-color .12s ease, box-shadow .12s ease;
}
.caseStudyItem a:hover,
.caseStudyItem a:focus{
border-color: rgba(0,0,0,.22);
box-shadow: 0 5px 14px rgba(0,0,0,.10);
outline: none;
}
/* Detail page */
.projectDescription{
/* keep existing layout but tighten spacing */
}
.projectDetailTitle{
font-size: clamp(1.2rem, 2.2vw, 1.9rem);
font-weight: 900;
line-height: 1.2;
margin: 0 0 .35rem;
}
.projectDescription .FM_icon{
width: 30px;
height: 20px;
vertical-align: middle;
margin-right: 6px;
}
/* Grid for label/value blocks produced by PHP */
.projectDetailHeader{
font-weight: 700;
opacity: .80;
margin: .6rem 0 .15rem;
}
.projectDetailValue{
margin: 0 0 .35rem;
line-height: 1.55;
}
/* When the original markup prints successive divs, this makes it readable */
.projectDescription{
display:block;
}
.projectDescription > div{
max-width: 100%;
}
/* Optional: make long URLs or filenames wrap */
.projectDescription a,
.caseStudyItem a,
.csCatLink{
overflow-wrap:anywhere;
word-break: break-word;
}
/* Reduce motion if user prefers */
@media (prefers-reduced-motion: reduce){
.csCatLink, .caseStudyItem a { transition: none; }
.csCatLink:hover, .csCatLink:focus { transform:none; }
}
/* Footer */
#footer{
color:var(--fm-muted) !important;
text-align:center;
padding:6px var(--fm-outer) !important;
}
.footerline {
width: 100%;
max-width: 1050px;
margin: 0 auto;
margin-top: 15px;
padding: 0 var(--fm-outer);
box-sizing: border-box;
border-top: 1px solid #8BA371;
}
/* ==========================
Hardware pages (new2)
========================== */
/* 1) Layout: nav + content */
.FM_catalogue,
.FM_hwLayout {
display: flex;
align-items: flex-start;
gap: 24px;
}
/* Pokud wrapper nemáte (nav a content jsou sourozenci), funguje i tohle:
- nav bude "plavat" vlevo, content se odsune.
Ponechávám jako fallback. */
.FM_columnNavigation {
float: left;
}
/* Primární vzhled navigace */
.FM_columnNavigation {
/* šírka: pevný panel, ale ne prehnane široký */
width: clamp(220px, 22vw, 320px);
max-width: 320px;
/* "card" styl */
background: rgba(0, 0, 0, 0.04);
border-radius: 12px;
padding: 14px 12px;
/* když je panel dlouhý, at se dá scrollovat */
max-height: calc(100vh - 160px);
overflow: auto;
/* pokud chcete "sticky" panel pri scrollu, odkomentujte:
position: sticky;
top: 110px;
*/
}
/* obsah vpravo */
.FM_columnItem {
/* vedle float fallbacku */
overflow: hidden;
/* vedle flex wrapperu */
flex: 1 1 auto;
min-width: 0;
}
/* 2) Menu list styling */
.FM_columnNavigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.FM_columnNavigation > ul > li {
margin: 0 0 14px 0;
}
/* nadpisy sekcí (napr. "Hardware components") */
.FM_columnNavigation > ul > li > strong,
.FM_columnNavigation > ul > li {
font-weight: 800;
}
/* vnorené seznamy */
.FM_columnNavigation li ul {
margin-top: 8px;
padding-left: 0;
}
/* položky (link/active) – aplikujte class="link"/class="active" na */
.FM_columnNavigation li.link,
.FM_columnNavigation li.active {
display: block;
margin: 6px 0;
border-radius: 10px;
}
/* správne je mít … – ale i kdyby bylo …,
zkusíme to "zachránit" i pres CSS */
.FM_columnNavigation li.link a,
.FM_columnNavigation li.active a,
.FM_columnNavigation a {
display: block;
text-decoration: none;
padding: 8px 10px;
border-radius: 10px;
}
/* hover */
.FM_columnNavigation a:hover {
background: rgba(0, 0, 0, 0.06);
}
/* active */
.FM_columnNavigation li.active a,
.FM_columnNavigation a.active {
background: rgba(0, 0, 0, 0.10);
font-weight: 800;
}
/* drobné odsazení pro podkategorie */
.FM_columnNavigation li li a {
padding-left: 12px;
}
/* 3) Detail stránky – cistý "new2" vzhled */
.FM_itemDescr,
.FM_setDescr {
background: rgba(0, 0, 0, 0.03);
border-radius: 12px;
padding: 16px 18px;
margin-bottom: 16px;
}
.FM_columnItem h1,
.FM_columnItem h2,
.FM_columnItem h3 {
margin-top: 0;
}
/* 4) Obrázky a náhledy */
.thumbnail img,
.FM_columnItem img {
max-width: 100%;
height: auto;
display: block;
}
/* náhledy jako karty */
.thumbnail {
background: #fff;
border-radius: 12px;
padding: 10px;
margin: 10px 0 16px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
/* 5) "Get more info and prices" box */
.FM_infoaboutprices {
background: rgba(0, 0, 0, 0.04);
border-radius: 12px;
padding: 14px 16px;
margin: 12px 0 18px 0;
}
/* 6) Responsivita – na užší šírce to složíme pod sebe */
@media (max-width: 980px) {
.FM_catalogue,
.FM_hwLayout {
flex-direction: column;
}
.FM_columnNavigation {
float: none;
width: 100%;
max-width: none;
max-height: none;
overflow: visible;
}
}
/* =========================
Hardware pages (scoped)
========================= */
.fm-hw-page{
width: 100%;
max-width: 1400px;
margin: 0 auto;
box-sizing: border-box;
}
.fm-hw-page .fm-hw-layout{
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
gap: 22px;
align-items: start;
}
.fm-hw-page .FM_columnNavigation{
background: #f3f4f5;
border: 1px solid rgba(0,0,0,.08);
border-radius: 12px;
padding: 12px 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
overflow: auto;
max-height: calc(100vh - 260px);
}
.fm-hw-page .FM_columnNavigation ul{
margin: 0;
padding-left: 0;
list-style: none;
}
.fm-hw-page .FM_columnNavigation > ul > li{
font-weight: 900;
margin: 6px 0 10px;
}
.fm-hw-page .FM_columnNavigation li ul{
margin-top: 8px;
padding-left: 0;
}
.fm-hw-page .FM_columnNavigation li ul li{
margin: 6px 0;
font-weight: 700;
}
.fm-hw-page .FM_columnNavigation li a{
display: block;
padding: 8px 10px;
border-radius: 10px;
text-decoration: none;
}
.fm-hw-page .FM_columnNavigation li.link a{
color: #0b57d0;
}
.fm-hw-page .FM_columnNavigation li.link a:hover{
background: rgba(0,0,0,.06);
}
.fm-hw-page .FM_columnNavigation li.active a{
background: rgba(0,0,0,.10);
color: #111;
}
.fm-hw-page .FM_columnItem,
.fm-hw-page .FM_catalogue{
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 12px;
padding: 16px 16px;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
min-width: 0;
}
.fm-hw-page .FM_catalogue img{
max-width: 100%;
height: auto;
display: block;
border-radius: 10px;
}
/* mobil */
@media (max-width: 900px){
.fm-hw-page .fm-hw-layout{
grid-template-columns: 1fr;
}
.fm-hw-page .FM_columnNavigation{
max-height: none;
}
}
.fm-social{
display: flex;
align-items: center; /* vertikální zarovnání */
gap: 4px; /* mezera mezi tlacítky */
}
.fm-social__item{
display: flex;
align-items: center;
height: 32px; /* spolecná výška */
}
.fm-social__item{
background: rgba(255,255,255,.10);
padding: 4px 8px;
border-radius: 10px;
}
@media (max-width: 520px){
.fm-social{
flex-wrap: wrap;
justify-content: center;
}
}
/* =========================
FIX: basicPage inside #canvas must not add a second horizontal gutter.
Scope it ONLY to the hardware pages so other pages keep their normal padding.
========================= */
#canvas .basicPage.fm-hw-page{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* =========================
Hardware pages: neutralize legacy floats/widths
========================= */
.fm-hw-page .FM_columnNavigation,
.fm-hw-page .FM_columnItem,
.fm-hw-page .FM_catalogue{
float: none !important;
width: auto !important;
}
.fm-hw-page .FM_catalogue{
padding-top: 0 !important; /* legacy had 100px */
}
.fm-login--inheader{
display:flex;
align-items:center;
gap:0px;
flex-wrap:wrap;
flex: 0 0 auto;
}
.fm-login--inheader .fm-btn{ white-space:nowrap; }
.home { margin: 0; }
.home-hero{
display:flex;
gap:24px;
align-items:stretch;
margin: 10px 0 18px 0;
}
.home-hero__text{ flex: 1 1 54%; }
.home-hero__media{ flex: 1 1 46%; }
.home-hero__img{
width:100%;
height:auto;
display:block;
border-radius: 4px;
}
.home-hero__lead{ font-size: 1.05em; line-height: 1.45; }
.home-hero__cta{ display:flex; gap:10px; flex-wrap:wrap; margin: 12px 0 10px; }
.home-btn{
display:inline-block;
padding: 9px 12px;
border-radius: 4px;
text-decoration:none;
font-weight:700;
}
.home-btn--primary{ background:#2f6b2f; color:#fff; }
.home-btn--ghost{ background:transparent; border:1px solid #2f6b2f; color:#2f6b2f; }
.home-hero__highlights{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top: 12px; }
.home-pill{ border:1px solid rgba(0,0,0,.12); border-radius:4px; padding:10px; }
.home-pill__t{ font-weight:800; margin-bottom:4px; }
.home-pill__d{ font-size: .95em; line-height:1.35; }
.home-grid{ display:flex; gap:22px; align-items:flex-start; }
.home-main{ flex: 1 1 auto; min-width: 0; }
.home-side{ flex: 0 0 320px; }
.home-section{ margin: 18px 0; }
.home-section__head{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.home-diff{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
.home-diff__item{ border-left: 3px solid #2f6b2f; padding: 6px 10px; background: rgba(47,107,47,.04); }
.home-steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
.home-step{ border:1px solid rgba(0,0,0,.12); border-radius:4px; padding:10px; }
.home-step__n{ font-weight:900; font-size: 1.2em; color:#2f6b2f; }
.home-step__t{ font-weight:800; margin:4px 0 6px; }
.home-step__d{ font-size:.95em; line-height:1.35; }
.home-link{ text-decoration:none; font-weight:700; }
.home-cards{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
.home-card{
display:block;
text-decoration:none;
border:1px solid rgba(0,0,0,.12);
border-radius:4px;
padding:10px;
}
.home-card__t{ font-weight:900; margin-top:8px; }
.home-card__d{ margin-top:6px; color:inherit; line-height:1.35; }
.home-tiles{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.home-tile{
display:block;
padding:10px;
border-radius:4px;
border:1px solid rgba(0,0,0,.12);
text-decoration:none;
font-weight:800;
}
.home-video{
background: rgba(51,70,31,.06);
border-radius: 12px;
padding: 12px;
}
.home-video__link{ margin-top: 10px; font-weight: 900; }
.home-video{
position:relative;
padding-top:56.25%;
border:1px solid rgba(0,0,0,.12);
border-radius:4px;
overflow:hidden;
}
.home-video iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
}
/* pojistka: video držet "níž" ve vrstvách */
.home-video,
.home-video iframe{
z-index: 1;
}
.videoWrap {
width: 560px;
max-width: 100%;
margin: 20px auto;
position: relative;
aspect-ratio: 16 / 9;
}
.videoWrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.home-usersCard{
display:block;
border:1px solid rgba(0,0,0,.12);
border-radius:4px;
text-decoration:none;
overflow:hidden;
}
.home-usersCard img{ width:100%; height:auto; display:block; }
.home-usersCard__txt{ padding:10px; }
.home-gallery{ display:flex; gap:10px; flex-wrap:wrap; }
.home-sideCard{
border:1px solid rgba(0,0,0,.12);
border-radius:4px;
padding:12px;
margin-bottom: 12px;
}
.home-banner{ width:300px; height:600px !important; display:block; }
.home-miniLinks a{ display:block; padding:4px 0; }
@media (max-width: 980px){
.home-hero{ flex-direction:column; }
.home-grid{ flex-direction:column; }
.home-side{ flex: 1 1 auto; width:auto; }
.home-hero__highlights{ grid-template-columns: 1fr; }
.home-steps{ grid-template-columns: repeat(2, 1fr); }
.home-cards{ grid-template-columns: 1fr; }
.home-tiles{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
.home-tiles{ grid-template-columns: 1fr; }
}
/* Contact form (modern) */
.fm-form { max-width: 920px; }
.fm-form__head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.fm-form__title { margin: 0; }
.fm-form__hint { margin: 0; text-align:right; opacity: .9; }
.fm-alert { padding: 12px 14px; border-radius: 10px; margin: 12px 0; }
.fm-alert--ok { background: rgba(0, 180, 80, .10); border: 1px solid rgba(0, 180, 80, .35); }
.fm-alert--err { background: rgba(220, 40, 40, .10); border: 1px solid rgba(220, 40, 40, .35); }
.fm-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 14px; }
@media (max-width: 860px) { .fm-grid { grid-template-columns: 1fr; } }
.fm-field label { display:block; font-weight: 700; margin: 0 0 6px 0; }
.fm-field input[type="text"],
.fm-field input[type="email"],
.fm-field select,
.fm-field textarea {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.25);
background: rgba(0,0,0,.10);
color: inherit;
}
.fm-field textarea { min-height: 140px; resize: vertical; }
.fm-field--full { grid-column: 1 / -1; }
.fm-actions { display:flex; justify-content:center; margin-top: 14px; }
.fm-actions .fm-btn {
display:inline-block;
padding: 10px 18px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,.10);
font-weight: 800;
cursor: pointer;
}
.fm-actions .fm-btn:hover { background: rgba(255,255,255,.18); }
/* hlavní submit akce */
.fm-actions .fm-btn {
background-color: #1f5e3b; /* tmavě zelená – jako záhlaví */
color: #ffffff;
border: none;
font-weight: 700;
padding: 12px 28px;
border-radius: 4px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* hover */
.fm-actions .fm-btn:hover {
background-color: #184b2f;
}
/* active / klik */
.fm-actions .fm-btn:active {
background-color: #123822;
}
/* focus (klávesnice) */
.fm-actions .fm-btn:focus-visible {
outline: 2px solid #9ad1b2;
outline-offset: 2px;
}
/* ===== Unified button style (match form submit) ===== */
.fm-btn,
a.fm-btn,
button.fm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #33461f; /* tmavě zelená jako záhlaví */
color: #ffffff;
border: none;
font-weight: 700;
padding: 8px 8px;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.1;
}
/* Hover/active */
.fm-btn:hover,
a.fm-btn:hover,
button.fm-btn:hover {
background-color: #586747;
color: #ffffff;
text-decoration: none;
}
.fm-btn:active,
a.fm-btn:active,
button.fm-btn:active {
background-color: #586747;
}
/* Focus-visible */
.fm-btn:focus-visible,
a.fm-btn:focus-visible,
button.fm-btn:focus-visible {
outline: 2px solid #9ad1b2;
outline-offset: 2px;
}
/* Small variant */
.fm-btn--sm {
padding: 8px 14px;
font-size: 0.9rem;
letter-spacing: 0.3px;
}
/* Make sure "ghost" does NOT look different on this page */
.fm-btn--ghost {
background-color: #1f5e3b;
color: #ffffff;
border: none;
}
/* Optional: if you ever show disabled */
.fm-btn[disabled],
button.fm-btn[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
.fmpm-float-image {
float: right;
margin: 0 0 15px 25px;
max-width: 320px;
text-align: center;
}
.fmpm-float-image img {
max-width: 100%;
height: auto;
}
.clear {
clear: both;
}
/* --- FIX: YouTube iframe must not overlay the sticky menu --- */
#menu{
position: relative; /* vytvoří stacking context */
z-index: 50000; /* musí být výš než video/iframe */
}
/* na desktopu zůstává sticky, ale stále s vysokým z-indexem */
@media (min-width: 861px){
#menu{
position: sticky;
top: 8px;
z-index: 50000;
}
}
/* ===== Home hero slider ===== */
.home-slider{
position: relative;
overflow: hidden;
border-radius: 12px; /* pokud nechcete, smažte */
}
.home-slider__track{
display: flex;
width: 100%;
transform: translateX(0);
transition: transform 420ms ease;
will-change: transform;
}
.home-slider__slide{
flex: 0 0 100%;
display: block;
}
.home-slider__slide .home-hero__img{
display: block;
width: 100%;
height: auto;
}
/* Nav arrows */
.home-slider__nav{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: 0;
border-radius: 999px;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 160ms ease, transform 160ms ease;
backdrop-filter: blur(4px);
background: rgba(0,0,0,0.45);
color: #fff;
display: grid;
place-items: center;
z-index: 5;
}
.home-slider__nav span{
font-size: 28px;
line-height: 1;
margin-top: -2px;
}
.home-slider__nav--prev{ left: 12px; }
.home-slider__nav--next{ right: 12px; }
.home-slider:hover .home-slider__nav{
opacity: 1;
pointer-events: auto;
}
.home-slider:hover .home-slider__nav--prev{ transform: translateY(-50%) translateX(-2px); }
.home-slider:hover .home-slider__nav--next{ transform: translateY(-50%) translateX(2px); }
/* Dots */
.home-slider__dots{
position: absolute;
left: 0;
right: 0;
bottom: 10px;
display: flex;
justify-content: center;
gap: 8px;
z-index: 6;
}
.home-slider__dot{
width: 10px;
height: 10px;
border-radius: 999px;
border: 0;
cursor: pointer;
background: rgba(255,255,255,0.55);
transition: transform 160ms ease, background 160ms ease;
}
.home-slider__dot.is-active{
background: rgba(255,255,255,0.95);
transform: scale(1.15);
}
/* Touch devices: show arrows (no hover) */
@media (hover: none){
.home-slider__nav{
opacity: 1;
pointer-events: auto;
}
}
/* ===== Home side card – Catalogue ===== */
.home-sideCard{
border-radius: 14px;
overflow: hidden;
box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.home-sideCard__link{
display: block;
color: #fff;
text-decoration: none;
height: 100%;
}
.home-sideCard__media{
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.home-sideCard__media img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.home-sideCard__badge{
position: absolute;
top: 12px;
left: 12px;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
}
.home-sideCard__content{
padding: 18px 20px 22px;
}
.home-sideCard__title{
margin: 0 0 8px 0;
font-size: 20px;
line-height: 1.25;
color: rgba(58,65,53,0.85);
}
.home-sideCard__text{
margin: 0 0 14px 0;
font-size: 14px;
line-height: 1.45;
color: rgba(58,65,53,0.85);
}
/* Hover effects */
.home-sideCard__link:hover .home-sideCard__media img{
transform: scale(1.05);
}
.home-sideCard__link:hover .home-sideCard__cta{
background: #5cc6ff;
transform: translateY(-1px);
}
.home-sideCard a {
display: block;
margin-bottom: 6px; /* uprav podle potřeby: 4–8px */
line-height: 1.3;
}
.home-sideCard a:last-child {
margin-bottom: 0;
}
/* --- Basic page: two-column text with responsive fallback --- */
.basicPageNav{
margin: 10px 0 18px;
}
.basicPageFooter{
margin-top: 22px;
}
/* vlastní "2 sloupce" přes CSS columns */
.FMtwoColumns .pjustify{
column-count: 2;
column-gap: 44px;
}
/* když je místa málo, přepni na 1 sloupec */
@media (max-width: 980px){
.FMtwoColumns .pjustify{
column-count: 1;
}
}
.imgCenter{
text-align: center;
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin: 14px 0;
}
/* aby se jednotlivé feature bloky nerozpadaly do dvou sloupců */
.featureList{
padding-left: 18px;
margin: 10px 0 0;
}
.featureList > li{
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin: 0 0 12px;
}
.featureList > li p{
margin: 6px 0 0;
}
.basicLinks{
margin: 14px 0 0;
padding-left: 18px;
}
/* fm news */
/* ===== Field-Map v23 (WP global CSS) ===== */
.fm23{
--bg:#f6f8fb;
--card:#ffffff;
--section-bg:#f2f4f7; /* šedé pozadí sekcí */
--line:rgba(15,23,42,.12);
--text:#0f172a;
--muted:rgba(15,23,42,.72);
--accent:#0ea5e9;
--accent2:#22c55e;
--shadow:0 18px 50px rgba(15,23,42,.10);
--radius:16px;
--max:1100px;
font: 16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,sans-serif;
color: var(--text);
}
p{
margin: 0 0 1em 0;
font-family: inherit;
line-height: 1.4;
font-weight: 400;
color: inherit;
/* zalamování textu */
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
}
.cookie-text{
margin: 0;
font-family: inherit;
font-size: 10px; /* menší UI text */
line-height: 1.45;
color: inherit;
white-space: normal;
}
.fm23, .fm23 *{ box-sizing:border-box; }
.fm23 a{ color:#0b5fff; text-decoration:none; }
.fm23 a:hover{ text-decoration:underline; }
/* typografie – proti "nahňácání" z tématu */
.fm23 p{
margin:.65em 0 !important;
line-height:1.75 !important;
color: var(--muted);
}
.fm23 h1, .fm23 h2, .fm23 h3, .fm23 h4{
margin:0 !important;
color: var(--text);
line-height:1.25;
}
.fm23 h2{ font-size: 20px; font-weight: 700; letter-spacing:-0.2px; }
.fm23 h4{ font-size: 13px; font-weight: 700; }
.fm23 .feature h4{ margin:0 0 8px !important; }
.fm23 .feature p{ margin:0 !important; }
.fm23 .wrap{
max-width: var(--max);
margin: 0 auto;
padding: 0;
}
/* anchor offset bez JS */
.fm23 .top-anchor{ height:0; scroll-margin-top:120px; }
.fm23 .section{ scroll-margin-top:120px; }
/* clearfix (pro float obrázky) */
.fm23 .clearfix::after{
content:"";
display:block;
clear:both;
}
/* hero + toc */
.fm23 .hero{
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadow);
margin: 0 0 18px 0;
}
.fm23 .toc{
display:flex !important;
flex-wrap:wrap !important;
gap:10px !important;
row-gap:10px !important;
align-items:center !important;
}
.fm23 .toc a{
display:inline-flex !important; /* WP často přepisuje na block */
align-items:center !important;
white-space:nowrap !important;
line-height:1.2 !important;
margin:0 !important;
border: 1px solid var(--line);
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,.7);
color: rgba(15,23,42,.78);
text-decoration: none !important;
transition: transform .12s ease, background .12s ease;
}
.fm23 .toc a:hover{
transform: translateY(-1px);
background:#fff;
text-decoration:none;
}
/* sekce = šedá karta se zaoblením */
.fm23 .section{
border: 1px solid var(--line);
background: var(--section-bg);
border-radius: calc(var(--radius) + 2px);
padding: 16px;
box-shadow: var(--shadow);
margin: 16px 0;
}
/* hlavička sekce */
.fm23 .section-head{
display:flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid rgba(15,23,42,.10);
padding-bottom: 10px;
margin-bottom: 12px;
}
.fm23 .toplink{
color: rgba(15,23,42,.70);
font-size: 13px;
text-decoration: none;
border-bottom: 1px dotted rgba(15,23,42,.35);
}
.fm23 .toplink:hover{ border-bottom-style:solid; text-decoration:none; }
/* feature = bílá karta uvnitř šedé sekce */
.fm23 .feature{
padding: 12px 12px;
border: 1px solid rgba(15,23,42,.10);
background: rgba(255,255,255,.82);
border-radius: 14px;
margin: 10px 0;
}
/* obrázky: figure (náhrada za [caption]) */
.fm23 figure.fmcap{
margin: 0 0 12px 12px;
float: right;
max-width: 420px;
}
.fm23 figure.fmcap.fmcap-sm{ max-width: 200px; }
.fm23 figure.fmcap img{
width: 100%;
height: auto;
display: block;
border-radius: 12px;
border: 1px solid rgba(15,23,42,.10);
}
.fm23 figure.fmcap figcaption{
font-size: 12px;
color: rgba(15,23,42,.70);
margin-top: 6px;
}
@media (max-width: 900px){
.fm23 figure.fmcap{ float:none; max-width: 100%; margin: 0 0 12px 0; }
}
.downloadSection { margin-top: 14px; }
.downloadBlock { margin: 18px 0 26px; }
.downloadBlockTitle {
font-size: 1.25rem;
font-weight: 800;
margin: 0 0 10px;
}
.downloadHint { margin: 0 0 10px; }
.downloadRow{
display: grid;
grid-template-columns: 1fr auto;
gap: 10px 14px;
align-items: center;
padding: 10px 12px;
background: #ccd6e8;
border-radius: 6px;
margin: 8px 0;
}
.downloadName{ min-width: 0; }
.downloadLangs{
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
align-items: center;
}
.fm-lang{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.2em;
padding: 4px 8px;
border-radius: 4px;
font-weight: 800;
text-decoration: none;
line-height: 1;
background: rgba(255,255,255,0.65);
}
.fm-lang:hover{ text-decoration: underline; }
.downloadFeatureLink{
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-weight: 700;
}
.downloadFeatureLink img{ display:block; width:40px; height:auto; }
.downloadError{
padding: 10px 12px;
border-radius: 6px;
background: #ffe0e0;
margin: 8px 0;
font-weight: 700;
}
@media (max-width: 720px){
.downloadRow{ grid-template-columns: 1fr; }
.downloadLangs{ justify-content: flex-start; }
}
.fm-videoSection {
margin-top: 1.25rem;
}
.fm-videoGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1rem;
margin: 0.75rem 0 1.25rem;
}
.fm-videoCard {
border: 1px solid rgba(0,0,0,0.12);
border-radius: 10px;
padding: 0.75rem;
background: #fff;
}
.fm-videoTitle {
margin: 0 0 0.6rem 0;
font-size: 1rem;
line-height: 1.25;
}
.fm-videoEmbed {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px;
background: #000;
}
.fm-videoEmbed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.fm-videoLinks {
margin-top: 0.6rem;
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
}