/* ========================= Kabinet Fortitudo – Global Styles Paleta + tipografija + komponente ========================= */ /* 1) Google Fonts (radi samo ako je dopušteno u headu). Ako ne prolazi, iste fontove odaberi kroz Wix Theme (Montserrat, Open Sans). */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;600&display=swap'); /* 2) CSS varijable (boje, tipografija, spacing) */ :root{ --clr-primary: #5A9BD5; /* mirna plava – povjerenje */ --clr-primary-600:#3E7FB9; --clr-accent: #F7DC6F; /* topli akcent za CTA */ --clr-bg: #FFFFFF; --clr-bg-soft: #F5F5F5; --clr-text: #333333; --clr-text-soft:#4A4A4A; --clr-border: #E5E5E5; --ff-head: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --ff-body: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --fs-900: clamp(2.0rem, 2.6vw + 1rem, 3rem); /* H1 */ --fs-800: clamp(1.6rem, 2vw + 0.6rem, 2.2rem); /* H2 */ --fs-700: 1.5rem; /* H3 */ --fs-600: 1.25rem; /* H4 */ --fs-500: 1.125rem; /* lead */ --fs-400: 1rem; /* body */ --radius-lg: 1rem; --radius-md: .75rem; --radius-sm: .5rem; --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.06); --space-1: .5rem; --space-2: .75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; } /* 3) Reset + baza */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: var(--ff-body); font-size: var(--fs-400); color: var(--clr-text); background: var(--clr-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img{max-width:100%;height:auto;display:block} a{color:var(--clr-primary);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{ outline: 3px solid var(--clr-accent); outline-offset: 2px; } /* 4) Tipografija */ h1,h2,h3,h4{ font-family: var(--ff-head); line-height:1.2; margin: 0 0 var(--space-3); color: var(--clr-primary); } h1{font-size:var(--fs-900); font-weight:700} h2{font-size:var(--fs-800); font-weight:700} h3{font-size:var(--fs-700); font-weight:600; color:var(--clr-text)} h4{font-size:var(--fs-600); font-weight:600; color:var(--clr-text)} p{margin:0 0 var(--space-3); color:var(--clr-text-soft)} .lead{font-size:var(--fs-500); color:var(--clr-text)} /* 5) Layout sekcije (dodijeli ID-jeve sekcijama u Wixu: #hero, #o-nama, #usluge, #kontakt) */ .section{ padding: clamp(2rem, 4vw + 1rem, 5rem) min(5vw, 48px); } .section--soft{background: var(--clr-bg-soft)} .section--contrast{background: var(--clr-primary); color:#fff} .section--contrast h1, .section--contrast h2, .section--contrast h3{color:#fff} .container{max-width:1100px;margin-inline:auto} /* 6) Kartice (za “Usluge” i “Kada nam se obratiti”) */ .card{ background:#fff; border:1px solid var(--clr-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; } .card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); } .card h3{margin-bottom: .5rem} .card .icon{width:48px;height:48px;margin-bottom: var(--space-2)} /* 7) Gumbi / CTA */ .btn{ display:inline-block; border:none; border-radius: var(--radius-lg); padding: .85rem 1.2rem; font-weight:600; cursor:pointer; background: var(--clr-primary); color:#fff; box-shadow: var(--shadow-sm); transition: transform .1s ease, box-shadow .2s ease, background .2s ease; } .btn:hover{ background: var(--clr-primary-600); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn:active{ transform: translateY(0); } .btn--accent{ background: var(--clr-accent); color: var(--clr-text); } .btn--ghost{ background: transparent; color: var(--clr-primary); border:2px solid var(--clr-primary); } /* 8) Navigacija (ako možeš dodijeliti klasu .nav i .nav__link u Wixu) */ .nav{ display:flex; gap: var(--space-3); align-items:center } .nav__link{ padding:.25rem .5rem; border-radius:.4rem; font-weight:600 } .nav__link[aria-current="page"], .nav__link.is-active{ color:#fff; background: var(--clr-primary); } /* 9) Hero sekcija */ #hero{ padding: clamp(3rem, 6vw + 1rem, 7rem) min(5vw, 48px); background: linear-gradient(180deg, rgba(90,155,213,.10), transparent 60%); } #hero .eyebrow{ text-transform:uppercase; letter-spacing:.08em; font-weight:700; color: var(--clr-primary-600); margin-bottom:.5rem } #hero .actions{ display:flex; gap: var(--space-2); flex-wrap:wrap; margin-top: var(--space-3) } /* 10) Grid za “Usluge” */ .grid{ display:grid; gap: var(--space-3); grid-template-columns: repeat(12, 1fr); } .grid--cards > *{ grid-column: span 12 } @media (min-width: 700px){ .grid--cards > *{ grid-column: span 6 } } @media (min-width: 1024px){ .grid--cards > *{ grid-column: span 4 } } /* 11) Obrasci (kontakt) */ .input, input[type="text"], input[type="email"], textarea{ width:100%; border:1px solid var(--clr-border); border-radius: var(--radius-md); padding: .8rem .9rem; font-family: var(--ff-body); background:#fff; color: var(--clr-text); } .input:focus, input:focus, textarea:focus{ border-color: var(--clr-primary); box-shadow: 0 0 0 3px rgba(90,155,213,.25); outline: none; } label{ display:block; font-weight:600; margin-bottom:.35rem; color: var(--clr-text) } /* 12) Liste s kvačicama (npr. “Kada nam se obratiti”) */ .checklist{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem } .checklist li{ display:flex; gap:.6rem; align-items:flex-start } .checklist li::before{ content:"✓"; font-weight:700; color: var(--clr-primary); margin-top:.1rem; } /* 13) Footer */ .footer{ background: var(--clr-bg-soft); border-top:1px solid var(--clr-border); padding: var(--space-5) min(5vw, 48px); color: var(--clr-text-soft); } .footer a{ color: inherit } /* 14) Utiity klase (možeš ih dodati gdje treba) */ .max-w-narrow{ max-width: 65ch } .center{ text-align:center } .mt-0{ margin-top:0 } .mt-1{ margin-top:var(--space-1) } .mt-2{ margin-top:var(--space-2) } .mt-3{ margin-top:var(--space-3) } .mt-4{ margin-top:var(--space-4) } .mt-5{ margin-top:var(--space-5) } .mb-0{ margin-bottom:0 } .mb-1{ margin-bottom:var(--space-1) } .mb-2{ margin-bottom:var(--space-2) } .mb-3{ margin-bottom:var(--space-3) } .mb-4{ margin-bottom:var(--space-4) } .mb-5{ margin-bottom:var(--space-5) } /* 15) Pristupačnost i preferencije */ @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition: none !important; } } /* 16) Kontrast na tamnijoj pozadini (ako koristiš .section--contrast) */ .section--contrast .btn--ghost{ border-color:#fff; color:#fff; } .section--contrast a{ color: #fff; text-decoration: underline; text-underline-offset: 2px }

top of page

email: kabinet.fortitudo@gmail.com tel/ 091 575 6005