/* Tema build: 20260514-02 (provera u DevTools / direktnom otvaranju CSS fajla) */ /* OSNOVNI RESET */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --title-dark: #13293d; --text-main: #132233; --text-soft: #203243; --gold-main: #b88924; --gold-strong: #c49a2b; --focus-ring: rgba(196, 154, 43, 0.95); } ::selection { background: rgba(196, 154, 43, 0.32); color: inherit; } html { min-height: 100%; background: linear-gradient(142deg, #081422 0%, #1a4a6e 42%, #4a1f3a 100%); background-attachment: fixed; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* BODY - Izbor pozadinske varijante preko klase na */ body { font-family: 'Georgia', 'Times New Roman', serif; min-height: 100vh; position: relative; background: linear-gradient(142deg, #081422 0%, #1a4a6e 42%, #4a1f3a 100%); background-attachment: fixed; } /* VARIJANTA 1: Elegantan tamni gradijent */ body.bg-gradient { background: linear-gradient(142deg, #081422 0%, #1a4a6e 42%, #4a1f3a 100%); } /* VARIJANTA 2: Tamna tekstura bez slike */ body.bg-texture { background-color: #14293f; background-image: radial-gradient(circle at 20% 20%, rgba(196, 154, 43, 0.12) 0%, rgba(196, 154, 43, 0) 35%), radial-gradient(circle at 80% 80%, rgba(139, 26, 26, 0.14) 0%, rgba(139, 26, 26, 0) 35%), linear-gradient(155deg, #10253a 0%, #183754 55%, #2c1e2e 100%); } /* Pojačan kontrast da se varijante jasno razlikuju */ body.bg-gradient::before { opacity: 0.82 !important; } body.bg-texture::before { opacity: 0.1 !important; } /* PSEUDO-ELEMENT - Transparentan grb na pozadini */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../images/VMLHA.png'); background-repeat: no-repeat; background-position: center center; background-size: 600px auto; opacity: 0.82; filter: saturate(1.2) brightness(1.08) drop-shadow(0 0 18px rgba(196, 154, 43, 0.45)); z-index: 0; pointer-events: none; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } /* Suptilna šara za teksturnu varijantu */ body.bg-texture::after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 2px, transparent 2px, transparent 10px ); opacity: 0.25; z-index: 0; pointer-events: none; } /* Glavni wrapper */ .page-wrapper { /* Bez backdrop-filter: u Chrome/Edge često „pojede“ gradijent i sve deluje kao stara plava */ background: linear-gradient( 180deg, rgba(248, 244, 234, 0.14) 0%, rgba(248, 244, 234, 0.22) 45%, rgba(248, 244, 234, 0.18) 100% ); min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 1; } body.bg-gradient .page-wrapper { background-color: rgba(248, 244, 234, 0.22); } body.bg-texture .page-wrapper { background-color: rgba(248, 245, 235, 0.38); } /* ========== NAVIGACIJA ========== */ /* OPCIJA 1: Obična navigacija (JEDAN RED) - za obične stranice */ .navbar { background-color: #8b1a1a; padding: 12px 0; text-align: center; border-bottom: 3px solid #c49a2b; box-shadow: 0 2px 10px rgba(0,0,0,0.3); -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .navbar ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 25px; margin: 0; padding: 0; } .navbar ul li { position: relative; } .navbar-main ul li { position: relative; } .navbar ul li a { color: white; text-decoration: none; font-size: 1.1rem; font-weight: bold; letter-spacing: 0.5px; padding: 9px 9px; font-family: 'Arial', sans-serif; text-transform: uppercase; display: inline-block; border-radius: 6px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .navbar ul li a::after, .navbar-main ul li a::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-strong), transparent); transform: scaleX(0); transform-origin: center; transition: transform 0.25s ease; } .navbar ul li a:hover, .navbar-main ul li a:hover { color: var(--gold-strong); background-color: rgba(0, 0, 0, 0.12); transform: translateY(-1px); } .navbar ul li a:hover::after, .navbar ul li a.active::after, .navbar-main ul li a:hover::after, .navbar-main ul li a.active::after { transform: scaleX(1); } .navbar ul li a.active, .navbar-main ul li a.active { color: var(--gold-strong); background-color: rgba(0, 0, 0, 0.18); } .navbar ul li a:focus-visible, .navbar-main ul li a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; color: var(--gold-strong); } a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .navbar ul li a, .navbar-main ul li a, .navbar ul li a::after, .navbar-main ul li a::after { transition: none; } } /* OPCIJA 2: Wrapper za DVA REDA - za MASONERIJA i BIBLIOTEKA stranice */ .navbar-wrapper { background-color: #8b1a1a; border-bottom: 3px solid #c49a2b; box-shadow: 0 2px 10px rgba(0,0,0,0.3); -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 10px rgba(0,0,0,0.3); } /* Glavni meni (Prvi red) */ .navbar-main { background-color: #8b1a1a; border-bottom: 1px solid rgba(196, 154, 43, 0.3); padding: 12px 0; text-align: center; } .navbar-main ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 25px; margin: 0; padding: 0; } .navbar-main ul li a { color: white; text-decoration: none; font-size: 1.1rem; font-weight: bold; letter-spacing: 0.5px; padding: 9px 9px; font-family: 'Arial', sans-serif; text-transform: uppercase; display: inline-block; border-radius: 6px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .navbar-main ul li a:hover { color: var(--gold-strong); background-color: rgba(0, 0, 0, 0.12); transform: translateY(-1px); } .navbar-main ul li a.active { color: var(--gold-strong); background-color: rgba(0, 0, 0, 0.18); } /* Podmeni (Drugi red) */ .navbar-sub { background-color: #a52a2a; padding: 10px 0; text-align: center; } .navbar-sub ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; } .navbar-sub ul li a { color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 1rem; font-weight: 500; letter-spacing: 0.5px; padding: 6px 12px; font-family: 'Arial', sans-serif; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; border-radius: 6px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } .navbar-sub ul li a:hover { color: var(--gold-strong); background-color: rgba(0, 0, 0, 0.2); transform: translateY(-1px); } .navbar-sub ul li a.active { color: var(--gold-strong); background-color: rgba(0, 0, 0, 0.28); } /* Desktop/tablet: meni ostaje dostupan tokom skrola */ @media (min-width: 769px) { nav.navbar, nav.navbar-wrapper { position: sticky; top: 0; z-index: 1200; } } /* ========== GLAVNI KONTEJNER ========== */ .container { max-width: 1000px; margin: 60px auto 40px; padding: 0 30px; text-align: center; flex: 1; } /* ========== NASLOVI ========== */ h1 { font-size: 3.5rem; color: var(--title-dark); letter-spacing: 4px; margin-bottom: 15px; font-weight: 600; text-transform: uppercase; text-shadow: 1px 2px 4px rgba(255, 251, 240, 0.9); position: relative; z-index: 10; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h2 { font-size: 3rem; color: var(--gold-main); margin-bottom: 10px; font-weight: 500; letter-spacing: 3px; font-style: italic; text-shadow: 1px 2px 4px rgba(255, 250, 235, 0.92); position: relative; z-index: 10; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Istorijat: jedan naslov — ista veličina kao ostali h1 (npr. BIBLIOTEKA), zlatna boja umesto belog */ h1.istorijat-page-title { font-size: 3.5rem; color: var(--gold-main); margin-bottom: 15px; font-weight: 600; letter-spacing: 4px; font-style: italic; text-transform: none; text-shadow: 1px 2px 4px rgba(255, 250, 235, 0.92); position: relative; z-index: 10; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Časopisi / Knjige: jedan naslov iznad galerije */ h1.casopisi-page-title, h1.knjige-page-title { margin-bottom: 2rem; } @media (max-width: 768px) { h1.casopisi-page-title, h1.knjige-page-title { font-size: clamp(1.35rem, 5vw, 2rem); letter-spacing: 0.12em; padding: 0 10px; word-break: break-word; } } h3 { font-size: 2.2rem; color: var(--title-dark); margin-bottom: 40px; font-weight: 400; letter-spacing: 2px; font-style: italic; border-bottom: 2px solid var(--gold-main); display: inline-block; padding-bottom: 10px; text-shadow: 1px 1px 3px rgba(255, 250, 235, 0.85); position: relative; z-index: 10; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h4 { font-size: 1.8rem; color: var(--title-dark); margin: 30px 0 15px; font-weight: 500; text-shadow: 1px 1px 3px rgba(255, 250, 235, 0.85); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========== SADRŽAJ ========== */ .content { position: relative; z-index: 10; } .content p { font-size: 1.2rem; color: var(--text-main); margin-bottom: 25px; max-width: 800px; margin-left: auto; margin-right: auto; text-align: justify; font-weight: 500; line-height: 1.75; text-shadow: 0px 1px 2px rgba(255, 252, 245, 0.65); background-color: rgba(255, 250, 240, 0.5); padding: 8px 16px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-left: 3px solid rgba(184, 137, 36, 0.4); } .content p:first-of-type { margin-top: 20px; } .content ul, .content ol { max-width: 800px; margin: 20px auto; text-align: left; padding-left: 40px; font-size: 1.1rem; color: var(--text-main); line-height: 1.7; text-shadow: 0px 1px 2px rgba(255, 252, 245, 0.5); } .content li { margin-bottom: 12px; line-height: 1.7; color: var(--text-soft); } /* Slike u sadržaju */ .content img { max-width: 100%; height: auto; margin: 30px auto; display: block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); -webkit-box-shadow: 0 4px 15px rgba(0,0,0,0.2); -moz-box-shadow: 0 4px 15px rgba(0,0,0,0.2); } /* Istorijat (.txt / .md): podnaslovi odeljaka — veći font, bold, zlatna boja */ .content.istorijat-doc h3.istorijat-subheading { font-size: 1.55rem; font-weight: 700; color: var(--gold-strong); margin: 1.35em auto 0.5em; max-width: 800px; text-align: center; line-height: 1.35; font-style: normal; letter-spacing: 0.03em; text-transform: none; background: none; border: none; padding: 0 16px; text-shadow: 0 1px 3px rgba(255, 250, 235, 0.45); position: relative; z-index: 10; } .content.istorijat-doc h3.istorijat-subheading:first-of-type { margin-top: 0.5em; } /* O NAMA (manifest.txt) */ .content.onama-manifest .onama-manifest-title { font-size: clamp(2rem, 5.2vw, 3rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin: 0.2em auto 0.25em; } .content.onama-manifest .onama-manifest-subtitle { color: var(--gold-strong); font-size: clamp(1.2rem, 3.4vw, 2rem); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; margin: 0.25em auto 1.1em; } .content.onama-manifest .onama-manifest-section { color: var(--gold-strong); font-size: clamp(1.15rem, 2.8vw, 1.45rem); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; margin: 1.1em auto 0.45em; max-width: 900px; } /* DEKALOG (.txt) */ .content.dekalog-doc .dekalog-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin: 0.2em auto 0.35em; } .content.dekalog-doc .dekalog-subtitle { color: var(--gold-strong); font-size: clamp(1.15rem, 3.2vw, 1.95rem); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; margin: 0.2em auto 1em; } .content.dekalog-doc .dekalog-number { color: var(--gold-strong); font-size: 1.45rem; font-weight: 800; margin: 0.95em auto 0.25em; } .content.dekalog-doc .dekalog-section { color: var(--gold-strong); font-size: clamp(1.1rem, 2.7vw, 1.35rem); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; margin: 0.5em auto 0.35em; max-width: 900px; } .content.dekalog-doc p { text-align: center; margin-bottom: 8px; line-height: 1.58; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.62), 0 3px 10px rgba(0, 0, 0, 0.42); } /* DOKUMENT STRANICE - opsti stil */ .content.bib-doc { max-width: 980px; margin: 0 auto; padding: clamp(20px, 3vw, 34px); background: rgba(7, 18, 30, 0.44); border: 1px solid rgba(196, 154, 43, 0.24); border-radius: 16px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2); } .content.bib-doc.bib-doc--nad-galerijom { margin-bottom: 28px; } .content.bib-doc p { max-width: 920px; margin: 0.75em auto; text-align: left; line-height: 1.72; background: rgba(255, 255, 255, 0.04); border-left: 3px solid rgba(196, 154, 43, 0.18); } .content.bib-doc .bib-doc-title { font-size: clamp(1.9rem, 4.8vw, 2.9rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin: 0.1em auto 0.22em; } .content.bib-doc .bib-doc-subtitle { color: var(--gold-strong); font-size: clamp(1.05rem, 2.9vw, 1.8rem); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; margin: 0.15em auto 0.95em; } .content.bib-doc .bib-doc-section { color: var(--gold-strong); font-size: clamp(1.15rem, 2.5vw, 1.55rem); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; margin: 1.5em auto 0.5em; padding-top: 0.65em; border-top: 1px solid rgba(196, 154, 43, 0.22); max-width: 920px; } .content.bib-doc .bib-doc-heading { color: #f0d28e; font-size: 1.08rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; margin: 1em auto 0.35em; max-width: 920px; } .content.bib-doc .bib-doc-subsection { color: #f6e8c5; font-size: 1.08rem; font-weight: 700; margin: 0.95em auto 0.28em; max-width: 920px; text-align: left; background: none; border: none; padding: 0 16px; } .content.bib-doc .bib-doc-list { max-width: 920px; margin: 0.75em auto 1em; text-align: left; } .content.bib-doc .bib-doc-list--bullet { list-style: none; padding-left: 0; } .content.bib-doc .bib-doc-list--bullet li { position: relative; padding-left: 1.65rem; } .content.bib-doc .bib-doc-list--bullet li::before { content: "•"; position: absolute; left: 0; top: 0.05em; color: var(--gold-strong); font-size: 1.25rem; line-height: 1; } .content.bib-doc .bib-doc-list--emoji, .content.bib-doc .bib-doc-list--quoted, .content.bib-doc .bib-doc-list--refs { list-style: none; padding-left: 0; } .content.bib-doc .bib-doc-list--emoji li, .content.bib-doc .bib-doc-list--quoted li, .content.bib-doc .bib-doc-list--refs li { padding: 0.55em 0.8em; margin-bottom: 0.45em; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(196, 154, 43, 0.14); border-radius: 10px; } .content.bib-doc .bib-doc-list--quoted li { font-style: italic; } .content.bib-doc .bib-doc-list--refs li { border-left: 3px solid rgba(196, 154, 43, 0.28); } .content.bib-doc strong { color: #f6e8c5; } /* DEKLARACIJA */ .page-deklaracija .container { max-width: 1120px; } .content.deklaracija-doc { background: rgba(7, 18, 30, 0.46); border: 1px solid rgba(196, 154, 43, 0.28); border-radius: 16px; padding: clamp(20px, 3vw, 34px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2); } .content.deklaracija-doc .bib-doc-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin: 0.1em auto 0.18em; } .content.deklaracija-doc .bib-doc-subtitle { color: var(--gold-strong); font-size: clamp(1.1rem, 3vw, 1.85rem); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; margin: 0.15em auto 1.1em; } .content.deklaracija-doc > .bib-doc-subtitle:first-of-type + p, .content.deklaracija-doc > .bib-doc-subtitle:first-of-type + p + p { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; font-style: italic; color: #f3dfb0; background: rgba(196, 154, 43, 0.08); border: 1px solid rgba(196, 154, 43, 0.18); } .content.deklaracija-doc .bib-doc-section { color: var(--gold-strong); font-size: clamp(1.2rem, 2.6vw, 1.65rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; margin: 1.7em auto 0.55em; padding-top: 0.65em; border-top: 1px solid rgba(196, 154, 43, 0.25); max-width: 940px; } .content.deklaracija-doc .bib-doc-heading { color: #f0d28e; font-size: 1.15rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; margin: 1.1em auto 0.35em; max-width: 940px; } .content.deklaracija-doc .bib-doc-subsection { color: #f6e8c5; font-size: 1.12rem; font-weight: 700; margin: 1em auto 0.3em; max-width: 940px; text-align: left; background: none; border: none; padding: 0 16px; } .content.deklaracija-doc p { max-width: 940px; margin: 0.7em auto; text-align: left; line-height: 1.72; background: rgba(255, 255, 255, 0.04); border-left: 3px solid rgba(196, 154, 43, 0.18); } .content.deklaracija-doc .bib-doc-list { max-width: 920px; margin: 0.7em auto 1em; padding-left: 2rem; } .content.deklaracija-doc .bib-doc-list--bullet { list-style: none; padding-left: 0; } .content.deklaracija-doc .bib-doc-list--bullet li { position: relative; padding-left: 1.65rem; margin-bottom: 0.5rem; } .content.deklaracija-doc .bib-doc-list--bullet li::before { content: "•"; position: absolute; left: 0; top: 0.05em; color: var(--gold-strong); font-size: 1.25rem; line-height: 1; } .content.deklaracija-doc strong { color: #f6e8c5; } @media (max-width: 640px) { .content.deklaracija-doc { padding: 18px 14px; } .content.deklaracija-doc p, .content.deklaracija-doc .bib-doc-subsection { padding-left: 12px; padding-right: 12px; } } /* ========== POTPIS ========== */ .signature { margin-top: 50px; font-size: 1.5rem; color: #b8860b; font-weight: bold; border-top: 2px solid #c49a2b; padding-top: 30px; display: inline-block; font-style: italic; position: relative; z-index: 10; text-shadow: 1px 1px 2px white; } /* ========== KONTAKT STRANICA - DODATNI STILOVI ========== */ .contact-cards { display: grid; /* min(280px, 100%) sprečava horizontalni overflow na uskim ekranima */ grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 30px; margin: 40px auto; max-width: 900px; width: 100%; } .contact-card { background: rgba(255, 255, 255, 0.6); padding: 30px; border-radius: 12px; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 2px solid #c49a2b; } .contact-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); } .contact-icon { font-size: 3rem; color: #b8860b; margin-bottom: 15px; } .contact-card h4 { color: #8b1a1a; margin: 15px 0 10px; font-size: 1.4rem; } .contact-card p { color: #1e2a36; font-size: 1.1rem; margin: 8px 0; background: none; padding: 0; } .contact-card a { color: #1a3b5e; text-decoration: none; font-weight: 600; transition: color 0.3s ease; } .contact-card a:hover { color: #b8860b; } /* KONTAKT stranica — responsive tipografija (ranije 2rem u inline stilovima) */ .page-kontakt .content { max-width: 100%; overflow-wrap: break-word; } .page-kontakt .kontakt-lead { font-size: clamp(1.15rem, 5vw, 2rem); line-height: 1.25; } .page-kontakt .kontakt-sub { font-size: clamp(1.1rem, 4.2vw, 1.6rem); line-height: 1.3; margin-top: 40px; margin-bottom: 20px; } .page-kontakt .kontakt-quote-box { max-width: min(700px, 100%); width: 100%; box-sizing: border-box; margin-left: auto; margin-right: auto; } .page-kontakt .kontakt-quote-text { font-size: clamp(0.95rem, 4.2vw, 1.65rem); line-height: 1.4; } .page-kontakt .kontakt-conditions { max-width: min(700px, 100%); width: 100%; } .page-kontakt .kontakt-li { padding: 0.55em 0 0.55em 1.75em; position: relative; font-size: clamp(0.95rem, 3.8vw, 1.3rem); line-height: 1.35; } .page-kontakt .kontakt-li-mark { position: absolute; left: 0; top: 0.5em; line-height: 1; color: #b8860b; font-weight: bold; font-size: 1.15em; } .info-box { background: rgba(139, 26, 26, 0.1); border-left: 4px solid #c49a2b; padding: 25px; margin: 30px auto; max-width: 800px; border-radius: 8px; } .info-box h4 { color: #8b1a1a; margin-bottom: 15px; } .info-box ul { list-style: none; padding: 0; } .info-box li { padding: 8px 0 8px 30px; position: relative; color: #1e2a36; font-size: 1.1rem; } .info-box li:before { content: "∴"; position: absolute; left: 0; color: #b8860b; font-weight: bold; font-size: 1.3rem; } .social-links { display: flex; justify-content: center; gap: 20px; margin-top: 40px; flex-wrap: wrap; } .social-btn { display: inline-block; width: 50px; height: 50px; line-height: 50px; background: #8b1a1a; color: white; border-radius: 50%; font-size: 1.5rem; text-decoration: none; transition: all 0.3s ease; } .social-btn:hover { background: #b8860b; transform: scale(1.1); } /* KONTAKT — modernizovan raspored i CTA */ .page-kontakt .kontakt-shell .content { max-width: 980px; margin: 0 auto; } .page-kontakt .kontakt-hero { background: rgba(8, 20, 33, 0.55); border: 1px solid rgba(196, 154, 43, 0.35); border-radius: 12px; padding: 18px 20px; margin: 20px auto 30px; } .page-kontakt .kontakt-hero-text { margin-bottom: 14px; text-align: center; } .page-kontakt .kontakt-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .page-kontakt .kontakt-cta { display: inline-block; padding: 10px 16px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform 0.2s ease, filter 0.2s ease; } .page-kontakt .kontakt-cta:hover { transform: translateY(-1px); filter: brightness(1.06); } .page-kontakt .kontakt-cta-primary { background: linear-gradient(180deg, #c49a2b 0%, #ab8320 100%); color: #10253a; } .page-kontakt .kontakt-cta-secondary { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(196, 154, 43, 0.45); color: #f5e6c8; } .page-kontakt .kontakt-meta { font-size: 0.95rem !important; color: #8fa8bf !important; } .page-kontakt .kontakt-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; margin-top: 10px; } .page-kontakt .kontakt-block { background: rgba(8, 20, 33, 0.52); border: 1px solid rgba(196, 154, 43, 0.3); border-radius: 12px; padding: 18px; } .page-kontakt .kontakt-block--light { background: rgba(255, 255, 255, 0.08); } .page-kontakt .kontakt-block-title { color: var(--gold-strong); margin: 0 0 10px; font-size: 1.35rem; } .page-kontakt .kontakt-quote-box { background: rgba(184, 134, 11, 0.1); border-left: 4px solid #b8860b; padding: 20px; margin: 22px auto 0; max-width: 700px; border-radius: 8px; font-style: italic; } .page-kontakt .kontakt-quote-text { margin: 0; padding: 0; background: none; } .page-kontakt .kontakt-quote-ref { margin: 10px 0 0; padding: 0; text-align: right; background: none; font-size: 0.95rem; color: #8ea4b8; } .page-kontakt .kontakt-conditions-list { list-style: none; padding: 0; text-align: left; } .page-kontakt .kontakt-note { margin: 24px auto 0; } .page-kontakt .kontakt-note p { text-align: center; } .page-kontakt .kontakt-form-block { margin-top: 20px; } .page-kontakt .kontakt-form { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; } .page-kontakt .kontakt-label { text-align: left; color: #f1e8d0; font-weight: 700; font-size: 0.95rem; } .page-kontakt .kontakt-input, .page-kontakt .kontakt-textarea { width: 100%; border: 1px solid rgba(196, 154, 43, 0.45); border-radius: 8px; background: rgba(7, 16, 26, 0.7); color: #eef5ff; font-size: 1rem; padding: 10px 12px; outline: none; } .page-kontakt .kontakt-input:focus, .page-kontakt .kontakt-textarea:focus { border-color: rgba(196, 154, 43, 0.9); box-shadow: 0 0 0 2px rgba(196, 154, 43, 0.2); } .page-kontakt .kontakt-submit { justify-self: start; border: 1px solid rgba(196, 154, 43, 0.8); background: linear-gradient(180deg, #c49a2b 0%, #a47d1e 100%); color: #11283d; border-radius: 999px; font-weight: 800; padding: 10px 18px; cursor: pointer; } /* Blaga animacija ulaza */ @keyframes kontaktFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .page-kontakt .kontakt-hero, .page-kontakt .contact-cards, .page-kontakt .kontakt-layout, .page-kontakt .kontakt-form-block, .page-kontakt .kontakt-note { animation: kontaktFadeUp 0.55s ease both; } .page-kontakt .contact-cards { animation-delay: 0.05s; } .page-kontakt .kontakt-layout { animation-delay: 0.1s; } .page-kontakt .kontakt-form-block { animation-delay: 0.15s; } .page-kontakt .kontakt-note { animation-delay: 0.2s; } @media (prefers-reduced-motion: reduce) { .page-kontakt .kontakt-hero, .page-kontakt .contact-cards, .page-kontakt .kontakt-layout, .page-kontakt .kontakt-form-block, .page-kontakt .kontakt-note { animation: none; } } /* ========== FOOTER ========== */ .footer { text-align: center; padding: 14px 12px 10px; color: #e8edf5; font-size: 0.9rem; letter-spacing: 0.02em; border-top: 1px solid #c49a2b; margin-top: 28px; background-color: rgba(17, 34, 52, 0.78); position: relative; z-index: 10; } /* ========== NIGHT VARIJANTA (aktivira se klasom "theme-night" na body) ========== */ body.theme-night { /* Stabilna night pozadina (isti ton u Chrome/Edge/Firefox) */ background-color: #060e18 !important; background-image: linear-gradient(146deg, #060e18 0%, #0b2642 52%, #161f2d 100%) !important; background-attachment: fixed; } body.theme-night:not(.home-crest-only) { background-image: linear-gradient(180deg, rgba(4, 10, 18, 0.16) 0%, rgba(6, 13, 24, 0.25) 100%), url('../images/naslovna.jpg') !important; /* Pozadinska slika kreće niže, ispod gornjeg menija */ background-position: center 72px; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } /* Unutrašnje stranice: grb pomeren naniže da se vrh ne sakrije pod podmeni */ body:not(.home-crest-only)::before { background-position: center calc(50% + 54px); } body.theme-night::before { opacity: 0.9; filter: saturate(1.28) brightness(1.13) drop-shadow(0 0 20px rgba(196, 154, 43, 0.52)); } body.theme-night .page-wrapper { background: linear-gradient( 180deg, rgba(7, 15, 24, 0.56) 0%, rgba(11, 22, 35, 0.62) 45%, rgba(8, 15, 26, 0.58) 100% ) !important; } body.theme-night h1, body.theme-night h3, body.theme-night h4 { color: #f0f5fb; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); } body.theme-night h2, body.theme-night .signature { color: #e1bf63; } /* Istorijat: glavni naslov zlatni (opšte „theme-night h1“ ga inače kvari u belo) — ista skala kao h1 */ body.theme-night h1.istorijat-page-title { color: #e1bf63; font-size: 3.5rem; letter-spacing: 4px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 0 28px rgba(225, 191, 99, 0.18); } body.theme-night .content p { color: #e9eef6; background-color: rgba(8, 20, 33, 0.6); text-shadow: none; border-left-color: rgba(225, 191, 99, 0.62); } body.theme-night .content.istorijat-doc h3.istorijat-subheading { color: #e9c86c; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); } body.theme-night .content ul, body.theme-night .content ol, body.theme-night .content li, body.theme-night .contact-card p, body.theme-night .info-box li { color: #d9e3ef; text-shadow: none; } body.theme-night .navbar, body.theme-night .navbar-wrapper, body.theme-night .navbar-main { background-color: #611717; } body.theme-night .navbar-sub { background-color: #7a2121; } body.theme-night .footer { background-color: rgba(8, 18, 31, 0.9); } /* Naslovna: samo grb — klasa home-crest-only na (index.html) */ body.home-crest-only .container--crest-only { margin-top: 20px; margin-bottom: 20px; min-height: 44vh; position: relative; z-index: 1; } /* Iskre iznad praznog main-a, ispod menija i footera */ body.home-crest-only .navbar { position: relative; z-index: 30; background-color: #611717; border-bottom-color: #c49a2b; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } body.home-crest-only .navbar-wrapper { background-color: #611717; border-bottom-color: #c49a2b; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } body.home-crest-only .navbar-main { background-color: #611717; } body.home-crest-only .navbar-sub { background-color: #7a2121; } body.home-crest-only .footer { position: relative; z-index: 25; } body.home-crest-only .page-wrapper { background: linear-gradient( 180deg, rgba(248, 244, 234, 0.06) 0%, rgba(248, 244, 234, 0.11) 100% ); } body.home-crest-only.theme-night .page-wrapper { background: linear-gradient( 180deg, rgba(7, 15, 24, 0.2) 0%, rgba(11, 22, 35, 0.28) 50%, rgba(8, 15, 26, 0.22) 100% ); } body.home-crest-only.theme-night { /* Pozadina naslovne + grb + efekti */ background-color: #060e18 !important; background-image: linear-gradient(180deg, rgba(4, 10, 18, 0.14) 0%, rgba(6, 13, 24, 0.23) 100%), url('../images/naslovna.jpg') !important; background-position: center 36px; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } body.home-crest-only.theme-night::before { opacity: 0.96; } /* Grb: maksimalno velik ali ceo stane između menija i footera; „raste“ iz centra */ @keyframes homeCrestScale { from { transform: translateZ(0) scale(0.08); } to { transform: translateZ(0) scale(1); } } body.home-crest-only::before { /* Više „vazduha“ ispod nav i iznad footera; grb ne dira menije */ background-size: min(90vw, calc(100svh - 165px), 980px) auto; background-position: center calc(50% + 18px); transform-origin: center center; animation: homeCrestScale 1.15s cubic-bezier(0.18, 0.82, 0.32, 1) both; } @media (max-width: 768px) { body.home-crest-only .container--crest-only { min-height: 36vh; } body.home-crest-only::before { background-size: min(98vw, calc(100svh - 150px), 580px) auto; background-position: center calc(50% + 10px); } } /* Iskre: polazak na prstenu (--sx,--sy), let naviše do (--ex,--ey) — oko grba, ne iz centra */ @keyframes homeSparkFly { 0% { transform: translate(-50%, -50%) translate(var(--sx), var(--sy)) scale(var(--s0, 0.95)); opacity: 0; } 6% { opacity: 1; } 48% { opacity: 1; } 100% { transform: translate(-50%, -50%) translate(var(--ex), var(--ey)) scale(0.06); opacity: 0; } } body.home-crest-only .home-fireworks { position: fixed; inset: 0; pointer-events: none; z-index: 12; overflow: hidden; } body.home-crest-only .home-fireworks__spark { position: absolute; left: 50%; top: 50%; width: var(--sz, 11px); height: var(--sz, 11px); margin: 0; padding: 0; background: radial-gradient(circle at 50% 50%, hsla(var(--hue, 48), 100%, 88%, 0.95) 0 28%, hsla(var(--hue, 48), 100%, 62%, 0.85) 52%, transparent 70%); clip-path: polygon( 50% 0%, 60% 36%, 98% 36%, 68% 58%, 79% 100%, 50% 74%, 21% 100%, 32% 58%, 2% 36%, 40% 36% ); box-shadow: 0 0 14px hsl(var(--hue, 48), 100%, 70%), 0 0 32px hsl(var(--hue, 48), 100%, 62%), 0 0 52px hsla(var(--hue, 48), 98%, 58%, 0.85), 0 0 80px hsla(var(--hue, 48), 95%, 55%, 0.55), 0 0 110px hsla(var(--hue, 48), 90%, 52%, 0.35); filter: brightness(1.22) saturate(1.35); transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); opacity: 0; will-change: transform, opacity; animation: homeSparkFly var(--dur, 1.45s) cubic-bezier(0.16, 0.92, 0.2, 1) var(--delay, 0s) forwards; } @media (prefers-reduced-motion: reduce) { body.home-crest-only::before { animation: none; transform: translateZ(0) scale(1); } body.home-crest-only .home-fireworks { display: none; } } /* Društvene mreže u footer-u */ .footer-social { display: flex; justify-content: center; gap: 15px; margin: 6px 0 5px; } .footer-social a { display: inline-block; width: 40px; height: 40px; line-height: 40px; background: rgba(255, 255, 255, 0.15); color: #c49a2b; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; font-size: 1.2rem; text-decoration: none; border: 1px solid rgba(196, 154, 43, 0.3); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .footer-social a:hover { background: #c49a2b; color: #1a3b5e; -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(196, 154, 43, 0.4); -webkit-box-shadow: 0 5px 15px rgba(196, 154, 43, 0.4); -moz-box-shadow: 0 5px 15px rgba(196, 154, 43, 0.4); } /* Dugme "na vrh stranice" */ .back-to-top { position: fixed; right: 16px; bottom: max(14px, env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px; border: 1px solid rgba(196, 154, 43, 0.72); border-radius: 50%; background: rgba(97, 23, 23, 0.88); color: #f5e6c8; font-size: 20px; line-height: 40px; text-align: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease, background-color 0.2s ease; z-index: 1500; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: rgba(122, 33, 33, 0.94); } /* Dugme za muziku (pozadinska podloga) */ .music-toggle { position: fixed; right: 16px; bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 52px); width: 42px; height: 42px; border: 1px solid rgba(196, 154, 43, 0.72); border-radius: 50%; background: rgba(97, 23, 23, 0.88); color: #f5e6c8; font-size: 19px; line-height: 40px; text-align: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); transition: transform 0.18s ease, background-color 0.2s ease; z-index: 1500; } .music-toggle:hover { background: rgba(122, 33, 33, 0.94); transform: translateY(-1px); } /* ========== MOBILNI SLIDE MENI (samo ≤768px) ========== */ .mobile-nav-toggle, .mobile-nav-overlay { display: none; } @media (max-width: 768px) { body.mobile-nav-open .page-wrapper { isolation: isolate; } .mobile-nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; position: fixed; top: max(10px, env(safe-area-inset-top, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); z-index: 1400; width: 48px; height: 48px; padding: 0; border: 2px solid rgba(196, 154, 43, 0.75); border-radius: 10px; background: rgba(97, 23, 23, 0.94); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); cursor: pointer; -webkit-tap-highlight-color: transparent; } .mobile-nav-toggle-bar { display: block; width: 22px; height: 2px; background: #f5e6c8; border-radius: 1px; transition: transform 0.25s ease, opacity 0.2s ease; } body.mobile-nav-open .mobile-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.mobile-nav-open .mobile-nav-toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); } body.mobile-nav-open .mobile-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Kad je panel otvoren, dugme pomeri ulevo od ivice panela da ne prekriva prve linkove / podmeni */ body.mobile-nav-open .mobile-nav-toggle { right: calc(min(300px, 88vw) + max(10px, env(safe-area-inset-right, 0px)) + 8px); z-index: 1360; } .mobile-nav-overlay { display: none; position: fixed; inset: 0; z-index: 1100; background: rgba(5, 8, 14, 0.52); } .mobile-nav-overlay.is-open { display: block; } nav.navbar, nav.navbar-wrapper { position: fixed !important; top: 0; right: 0; left: auto; height: 100vh; height: 100dvh; width: min(300px, 88vw); max-width: 100%; margin: 0 !important; z-index: 1250; pointer-events: auto; transform: translateX(105%); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: center; border-left: 2px solid #c49a2b; box-shadow: -8px 0 28px rgba(0, 0, 0, 0.45); padding-top: max(56px, env(safe-area-inset-top, 0px)); padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); } body.mobile-nav-open nav.navbar, body.mobile-nav-open nav.navbar-wrapper { transform: translateX(0); z-index: 1350; pointer-events: auto; } .navbar { padding-left: 12px; padding-right: 12px; } } /* ========== RESPONSIVE - MOBILNI ========== */ @media (max-width: 768px) { html { overflow-x: clip; } body { overflow-x: clip; max-width: 100%; } .navbar ul, .navbar-main ul, .navbar-sub ul { flex-direction: column; gap: 10px; } .navbar a, .navbar-main a, .navbar-sub a { -webkit-tap-highlight-color: rgba(196, 154, 43, 0.2); touch-action: manipulation; position: relative; z-index: 1; } h1 { font-size: 2.2rem; letter-spacing: 0.06em; word-break: break-word; hyphens: auto; padding-inline: 6px; } body.theme-night h1.istorijat-page-title { font-size: 2.2rem; letter-spacing: 0.06em; word-break: break-word; hyphens: auto; padding-inline: 6px; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.4rem; } .content p { font-size: 1rem; text-align: left; } .container { margin: 20px auto; padding: 0 15px; max-width: 100%; box-sizing: border-box; } /* Manji grb na unutrašnjim stranicama da ne prekriva tekst */ body:not(.home-crest-only)::before { background-size: min(240px, 58vw) auto; background-position: center calc(50% + 30px); } body.theme-night:not(.home-crest-only)::before { opacity: 0.48; } /* KONTAKT: još manji / suptilniji grb da ne prelazi preko teksta */ body.page-kontakt:not(.home-crest-only)::before { background-size: min(210px, 50vw) auto; } body.theme-night.page-kontakt:not(.home-crest-only)::before { opacity: 0.4; } /* KONTAKT STRANICA - MOBILNI */ .contact-cards { grid-template-columns: 1fr; gap: 20px; padding: 0 15px; } .page-kontakt .kontakt-layout { grid-template-columns: 1fr; gap: 16px; } .page-kontakt .kontakt-hero { padding: 14px; margin-bottom: 22px; } .contact-card { padding: 20px; } .contact-icon { font-size: 2.5rem; } .contact-card h4 { font-size: 1.2rem; } .contact-card p { font-size: 1rem; } .info-box { padding: 15px; margin: 20px 15px; } .info-box li { font-size: 1rem; padding: 6px 0 6px 25px; } .social-links { gap: 15px; } .social-btn { width: 45px; height: 45px; line-height: 45px; font-size: 1.3rem; } } @media (max-width: 480px) { .contact-cards { gap: 15px; } .contact-card { padding: 15px; } .info-box { padding: 12px; } .social-btn { width: 40px; height: 40px; line-height: 40px; font-size: 1.2rem; } } /* ========== VELIKI EKRANI ========== */ @media (min-width: 1200px) { body::before { background-size: 700px auto; } } /* ========== GLAVNA GALERIJA (images/galerija, galerija.php) ========== */ .page-galerija-main__lead { max-width: 800px; margin: 0 auto 1.5rem; text-align: center; font-size: 1.05rem; } .page-galerija-main__empty { grid-column: 1 / -1; text-align: center; padding: 2rem 1rem; background: rgba(255, 255, 255, 0.08); border-radius: 10px; border: 1px solid rgba(196, 154, 43, 0.35); } .page-galerija-main .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 40px auto; max-width: 1100px; padding: 0 20px; } .page-galerija-main .gallery-item { background: rgba(255, 255, 255, 0.5); border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 2px solid #c49a2b; } .page-galerija-main .gallery-item:hover { transform: translateY(-8px); box-shadow: 0 8px 25px rgba(196, 154, 43, 0.4); } /* Ista veličina okvira na svim galerijama; cela slika unutra (contain, ne cover) */ .page-galerija-main .gallery-item__visual { width: 100%; height: 280px; display: flex; align-items: center; justify-content: center; padding: 10px 12px; box-sizing: border-box; background: rgba(255, 255, 255, 0.28); border-bottom: 1px solid rgba(196, 154, 43, 0.2); } .page-galerija-main .gallery-item__visual img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: center; display: block; transition: transform 0.25s ease; } .page-galerija-main .gallery-item:hover .gallery-item__visual img { transform: scale(1.03); } @media (max-width: 480px) { .page-galerija-main .gallery-item__visual { height: 240px; padding: 8px 10px; } } .page-galerija-main .gallery-caption { padding: 15px; text-align: center; background: rgba(255, 255, 255, 0.8); } .page-galerija-main .gallery-caption h4 { color: #8b1a1a; font-size: 1.1rem; margin: 0; font-weight: 600; } .page-galerija-main .gallery-item a { text-decoration: none; color: inherit; display: block; } @media (max-width: 768px) { .page-galerija-main .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 480px) { .page-galerija-main .gallery-grid { grid-template-columns: 1fr; gap: 15px; } } /* Poznati masoni — dve naslovne kartice (hub) */ .page-poznati-hub .gallery-grid--poznati-hub { grid-template-columns: repeat(2, 1fr); max-width: 920px; gap: 28px; } .page-poznati-hub .gallery-item--hub .gallery-item__visual { height: 320px; } .page-poznati-hub .gallery-item__placeholder { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: 1rem; text-align: center; font-size: 0.95rem; color: var(--text-soft); line-height: 1.45; } .page-galerija-main__back { max-width: 1100px; margin: 0 auto 1rem; padding: 0 20px; text-align: left; } .page-galerija-main__back a { color: #e1bf63; font-weight: 600; text-decoration: none; } .page-galerija-main__back a:hover { text-decoration: underline; } body.theme-night .page-galerija-main__back a { color: #e9c86c; } @media (max-width: 640px) { .page-poznati-hub .gallery-grid--poznati-hub { grid-template-columns: 1fr; } } /* ========== BROWSER-SPECIFIC FIKSEVI ========== */ /* Firefox */ @-moz-document url-prefix() { .page-wrapper { background: linear-gradient( 180deg, rgba(248, 244, 234, 0.16) 0%, rgba(248, 244, 234, 0.24) 50%, rgba(248, 244, 234, 0.18) 100% ); } } /* Safari/Chrome */ @media screen and (-webkit-min-device-pixel-ratio:0) { body::before { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /* Edge */ @supports (-ms-ime-align:auto) { .page-wrapper { background: linear-gradient( 180deg, rgba(248, 244, 234, 0.16) 0%, rgba(248, 244, 234, 0.26) 50%, rgba(248, 244, 234, 0.2) 100% ); } }