/* ============================================================================ VUKSANOVIĆ & KAŽIĆ — LAW FIRM Single stylesheet for the whole site (both /me/ and /en/). -------------------------------------------------------------------------- HOW TO CHANGE THE LOOK: - Brand colours: edit the CSS variables in the ":root" block right below. - Fonts: change the in each page's AND the --font-* vars below. - Everything else cascades from these variables. ============================================================================ */ :root { /* ---- Brand palette (from the official logo brand guide) ---- */ --green-dark: #034A25; /* primary dark green */ --green: #1E6E37; /* medium green */ --green-soft: #2f8a4a; /* lighter hover green */ --beige: #D2D2B2; /* logo beige/tan ring */ --beige-soft: #ecebdd; /* very light beige tint */ --ink: #1c2a22; /* body text (near-black, green-tinted) */ --muted: #5c6b60; /* secondary text */ --line: #e4e7e0; /* hairline borders */ --paper: #ffffff; /* page background */ --paper-2: #f6f7f2; /* alternating section background (warm off-white) */ /* ---- Type ---- */ --font-head: "Jost", "Century Gothic", "Trebuchet MS", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* ---- Layout ---- */ --maxw: 1180px; --radius: 4px; --shadow: 0 10px 30px rgba(3, 74, 37, .08); --shadow-lg: 0 24px 60px rgba(3, 74, 37, .14); --transition: .25s ease; } /* ---------------------------------------------------------------- Reset-ish */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.7; font-size: 17px; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--green); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--green-dark); } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--green-dark); line-height: 1.15; font-weight: 600; margin: 0 0 .5em; letter-spacing: .2px; } h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); } h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); } h3 { font-size: 1.25rem; } p { margin: 0 0 1rem; } ul { margin: 0 0 1rem; padding-left: 1.2rem; } /* ---------------------------------------------------------------- Utilities */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .section { padding: clamp(56px, 8vw, 110px) 0; } .section--tint { background: var(--paper-2); } .section--green { background: var(--green-dark); color: #eaf1ea; } .section--green h2, .section--green h3 { color: #fff; } .center { text-align: center; } .narrow { max-width: 760px; margin-left: auto; margin-right: auto; } .eyebrow { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 3px; font-size: .78rem; font-weight: 600; color: var(--green); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--beige); display: inline-block; } .section--green .eyebrow { color: var(--beige); } .section--green .eyebrow::before { background: var(--beige); } .lead { font-size: 1.15rem; color: var(--muted); } .section--green .lead { color: #cdd8cf; } /* --------------------------------------------------------------- Buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 500; font-size: .98rem; padding: 14px 28px; border-radius: var(--radius); border: 1.5px solid transparent; cursor: pointer; transition: all var(--transition); letter-spacing: .3px; } .btn--primary { background: var(--green); color: #fff; } .btn--primary:hover { background: var(--green-dark); color: #fff; transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--green-dark); border-color: var(--beige); } .btn--ghost:hover { border-color: var(--green); color: var(--green-dark); } .btn--light { background: #fff; color: var(--green-dark); } .btn--light:hover { background: var(--beige-soft); color: var(--green-dark); transform: translateY(-2px); } .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); } .btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; } /* ===================================================================== HEADER / NAVIGATION (identical markup on every page) ===================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 20px; } .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand img { height: 46px; width: auto; } .brand__text { display: flex; flex-direction: column; line-height: 1.05; } .brand__name { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: var(--green-dark); letter-spacing: .5px; } .brand__sub { font-size: .62rem; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); } .nav__links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav__links a { font-family: var(--font-head); font-weight: 500; font-size: .95rem; color: var(--ink); padding: 10px 14px; border-radius: var(--radius); } .nav__links a:hover, .nav__links a.is-active { color: var(--green-dark); background: var(--beige-soft); } .nav__right { display: flex; align-items: center; gap: 14px; } .lang-switch { display: flex; gap: 2px; font-family: var(--font-head); font-size: .85rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .lang-switch a { padding: 6px 11px; color: var(--muted); } .lang-switch a.is-active { background: var(--green); color: #fff; } .nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .nav__toggle span { width: 26px; height: 2px; background: var(--green-dark); transition: var(--transition); } /* Mobile nav */ @media (max-width: 900px) { .nav__toggle { display: flex; } .nav { justify-content: flex-start; gap: 12px; } .brand { margin-right: auto; } /* logo left; hamburger + language switch cluster on the right */ .nav__links { position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 12px 24px 24px; box-shadow: var(--shadow); transform: translateY(-140%); transition: transform .3s ease; /* A long menu must scroll rather than run off the bottom of a short screen */ max-height: calc(100vh - 76px); overflow-y: auto; } .nav__links.is-open { transform: translateY(0); } /* display:block — as inline elements the links' vertical padding would paint the hover/active background over the neighbouring rows without pushing them apart. Block makes each row own its full height. */ .nav__links a { display: block; padding: 14px 8px; border-bottom: 1px solid var(--line); } .brand__text { display: none; } /* Comfortable thumb targets for the language switch */ .lang-switch a { padding: 10px 13px; } } @media (max-width: 720px){ .nav { gap: 12px; } } @media (max-width: 480px){ .brand__text{ display:none; } } /* ===================================================================== HERO ===================================================================== */ .hero { position: relative; background: linear-gradient(180deg, rgba(3,74,37,.86), rgba(3,74,37,.94)), url("../img/hero.jpg") center/cover no-repeat, var(--green-dark); color: #fff; text-align: center; padding: clamp(90px, 16vw, 170px) 0; } /* VIDEO HERO:
with a