/* ============================================================ ZLATNI BROJ — ZAJEDNIČKI STILOVI SAJTA ------------------------------------------------------------ Struktura, raspored i komponente. NEMA tvrdo upisanih boja, fontova ni zaobljenja — sve dolazi iz /css/theme-*.css. Ovaj fajl se NE menja kad se menja dizajn. Izuzetak: Viber (#7360f2) i WhatsApp (#25D366) su zaštićene boje brendova i namerno ostaju fiksne u svakoj temi. ============================================================ */ /* --- Self-hosted fontovi (preload linkovi stoje u stranice) --- */ @font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/playfair-display-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/playfair-display-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'DM Sans';font-style:normal;font-weight:300 500;font-display:swap;src:url('/fonts/dm-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'DM Sans';font-style:normal;font-weight:300 500;font-display:swap;src:url('/fonts/dm-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* --- Osnova --- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--font-body);background:var(--dark);color:var(--text);overflow-x:hidden;line-height:var(--line-body)} a{color:inherit} /* --- Navigacija --- */ nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:1.5rem 4rem;padding-top:calc(1.5rem + env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:center;background:linear-gradient(to bottom,var(--nav-bg),transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .nav-logo img{height:var(--nav-logo-h);width:auto;display:block} .nav-links{list-style:none;display:flex;gap:2.5rem;align-items:center} .nav-links a{text-decoration:none;color:var(--text-muted);font-size:0.85rem;letter-spacing:0.12em;text-transform:uppercase;transition:color .3s} .nav-links a:hover,.nav-links a.active{color:var(--gold)} .nav-cta{border:1px solid var(--gold);border-radius:var(--radius-sm);padding:0.5rem 1.5rem;color:var(--gold)} .nav-cta:hover{background:var(--gold);color:var(--on-gold) !important} .nav-phone{display:flex;align-items:center;color:var(--text-muted);transition:color .3s} .nav-phone:hover{color:var(--gold)} /* --- Hamburger + mobilni meni --- */ .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px} .hamburger span{width:26px;height:2px;background:var(--gold);transition:.25s} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{position:fixed;inset:0;z-index:199;background:var(--menu-bg);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:calc(6rem + env(safe-area-inset-top));padding-bottom:2rem;overflow-y:auto;-webkit-overflow-scrolling:touch;gap:2rem;transform:translateX(100%);visibility:hidden;transition:transform .3s,visibility 0s .3s;backdrop-filter:blur(10px)} .mobile-menu.open{transform:translateX(0);visibility:visible;transition:transform .3s} .mobile-menu a{color:var(--text);text-decoration:none;font-size:1.4rem;font-family:var(--font-display)} .mobile-menu a:hover{color:var(--gold)} /* --- Raspored stranice --- */ .wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 1.25rem} header.hero{padding:11rem 0 1.5rem} .crumb{font-size:0.8rem;color:var(--text-muted);margin-bottom:1rem} .crumb a{color:var(--text-muted);text-decoration:none} .crumb a:hover{color:var(--gold)} header.hero h1{font-family:var(--font-display);font-weight:var(--h1-weight);font-size:var(--h1-size);line-height:1.1;color:var(--text)} header.hero h1 .g{color:var(--gold)} header.hero p{color:var(--text-muted);margin-top:0.9rem;font-size:1.05rem;max-width:620px} /* --- Sadržaj --- */ section.content{padding:1rem 0 3rem} .content h2{font-family:var(--font-display);font-weight:var(--h2-weight);font-size:var(--h2-size);color:var(--gold);margin:2.4rem 0 0.8rem} .content h3{font-size:var(--h3-size);color:var(--text);margin:1.4rem 0 0.4rem;font-weight:var(--h3-weight)} .content p{color:var(--text-muted);margin-bottom:0.8rem} .content strong{color:var(--text);font-weight:500} .content a{color:var(--gold);text-decoration:none} .content a:hover{text-decoration:underline} ul.check{list-style:none;margin:0.6rem 0 1rem} ul.check li{position:relative;padding-left:1.7rem;margin-bottom:0.55rem;color:var(--text-muted)} ul.check li::before{content:'';position:absolute;left:0;top:0.75em;width:18px;height:1px;background:var(--gold)} ul.check li strong{color:var(--text);font-weight:500} /* --- Kartice i CTA --- */ .two-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.2rem 0} .col-card{background:var(--dark-2);border:1px solid var(--gold-border);border-radius:var(--radius-lg);padding:1.5rem} .col-card h3{margin-top:0;font-family:var(--font-display);font-weight:var(--h2-weight);color:var(--gold)} .cta-band{background:var(--dark-3);border:1px solid var(--gold-border-md);border-radius:var(--radius-xl);padding:2.2rem 1.5rem;text-align:center;margin:2.8rem 0 0} .cta-band h2{margin-top:0;font-family:var(--font-display)} .cta-band p{max-width:520px;margin:0.5rem auto 0} /* --- Dugmad --- */ a.btn-gold{display:inline-block;background:var(--gold);color:var(--on-gold);padding:0.9rem 2rem;border-radius:var(--radius-btn);text-decoration:none !important;font-weight:500;margin:1.2rem 0.4rem 0} a.btn-gold:hover{background:var(--gold-light);color:var(--on-gold)} .btn-ghost{display:inline-block;border:1px solid var(--gold);color:var(--gold);padding:0.9rem 2rem;border-radius:var(--radius-btn);text-decoration:none !important;margin:1.2rem 0.4rem 0} .btn-ghost:hover{background:var(--gold-tint)} .note{font-size:0.78rem;color:var(--text-muted);margin-top:1.5rem} /* --- Futer --- */ footer{background:var(--dark-2);padding:3rem 1.25rem 2.5rem;text-align:center;margin-top:2rem} footer .flogo img{height:var(--footer-logo-h);width:auto} .footer-copy{margin-top:1rem;color:var(--text)} .footer-contact-link{color:var(--gold);text-decoration:none} .footer-contact-link:hover{text-decoration:underline} .footer-legal{margin-top:1rem;font-size:0.78rem;color:var(--text-muted);line-height:1.7} .footer-links{list-style:none;display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-top:1.25rem} .footer-links a{color:var(--text-muted);text-decoration:none;font-size:0.9rem} .footer-links a:hover{color:var(--gold)} /* --- Plutajuća dugmad za kontakt --- */ /* Viber i WhatsApp koriste zvanične boje brendova — ne tematizuju se. */ .viber-btn{position:fixed;right:20px;bottom:20px;width:54px;height:54px;background:#7360f2;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:150;box-shadow:var(--shadow-float)} .viber-btn svg{width:28px;height:28px;fill:#fff} .whatsapp-btn{position:fixed;right:20px;bottom:90px;width:54px;height:54px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:150;box-shadow:var(--shadow-float)} .whatsapp-btn svg{width:30px;height:30px;fill:#fff} .call-btn{display:none} /* --- Cookie banner --- */ #cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:300;background:var(--dark-3);border:1px solid var(--gold-border-strong);border-radius:var(--radius-lg);padding:1rem 1.25rem;display:none;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:0.85rem;color:var(--text-muted)} #cookie-banner a{color:var(--gold)} .cookie-btns{display:flex;gap:0.6rem} .cookie-accept,.cookie-decline{border-radius:var(--radius-sm);padding:0.5rem 1rem;font-size:0.85rem;cursor:pointer;border:1px solid var(--gold);font-family:var(--font-body)} .cookie-accept{background:var(--gold);color:var(--on-gold);border:none} .cookie-decline{background:transparent;color:var(--text)} /* --- FAQ (details/summary) --- */ details.faq{background:var(--dark-2);border:1px solid var(--gold-border);border-radius:var(--radius-faq);margin-bottom:0.6rem;padding:0 1.2rem} details.faq summary{cursor:pointer;padding:1rem 0;font-weight:500;color:var(--text);list-style:none;position:relative;padding-right:2rem} details.faq summary::-webkit-details-marker{display:none} details.faq summary::after{content:'+';position:absolute;right:0.2rem;top:50%;transform:translateY(-50%);color:var(--gold);font-size:1.3rem} details.faq[open] summary::after{content:'\2212'} details.faq p{padding-bottom:1rem} /* --- Mobilni raspored --- */ @media(max-width:1200px){ nav{padding:0.9rem 1.25rem;padding-top:calc(0.9rem + env(safe-area-inset-top))} .nav-links{display:none} .hamburger{display:flex} .nav-logo img{height:var(--nav-logo-h-sm)} header.hero{padding:calc(7rem + env(safe-area-inset-top)) 0 1rem} header.hero h1{font-size:var(--h1-size-sm)} .two-col{grid-template-columns:1fr} .call-btn{position:fixed;left:10px;bottom:10px;width:48px;height:48px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:150;box-shadow:var(--shadow-float)} .call-btn svg{width:23px;height:23px} .viber-btn{right:10px;bottom:10px;width:48px;height:48px} .viber-btn svg{width:24px;height:24px} .whatsapp-btn{right:10px;bottom:70px;width:48px;height:48px} .whatsapp-btn svg{width:26px;height:26px} }