/* Prototip ima `*{box-sizing:border-box}` kao prvo pravilo. Bez toga svaki kontejner s `max-width:1320px` i `padding:40px` bude 1400px širok, pa je cijeli sajt izgledao 80px preširoko, „kao zumiran". */ *, *::before, *::after { box-sizing: border-box; } /* Artefakt na ima `-webkit-font-smoothing: antialiased`, tema nije imala ništa. Razlika se ne vidi ni u jednoj mjeri po geometriji — slovo je na istom mjestu i jednako široko — ali se vidi u pikselima: alati/piksel-sekcije.mjs je na ekranu dt našao 316.414 različitih piksela, a nakon ovoga ih je 145.261, pri čemu 10 od 11 sekcija padne s ~2,5 % na ~0,1 %. Bez ovoga je tekst na stagingu deblji nego u dizajnu (izmjereno na riječi „Često": 1.402 naspram 1.287 obojenih piksela). Vrijedi samo na macOS-u; drugdje je bez učinka. Artefakt nema `-moz-osx-font-smoothing`, pa ga nema ni ovdje. */ body { -webkit-font-smoothing: antialiased; } /* ===================================================================== CEE — stilski primitivi (handoff pogl. 4) Pravila: maks. 2 podloge po stranici; nema radiusa osim 2–3px na pillovima/badgeima; nema sjena osim kartice kalkulatora; kicker na gradientu je bijel, nikad zelen na zelenom. ===================================================================== */ :root { --cee-grad: linear-gradient(135deg, #6C9D36 0%, #007342 100%); --cee-grad-hover: linear-gradient(135deg, #5C8A2C 0%, #005C36 100%); --cee-green: #007342; --cee-green-hover: #005C36; --cee-green-light: #6C9D36; --cee-panel: #F1F4EC; --cee-ink: #172115; --cee-ink-muted: #5C6157; --cee-hairline: rgba(23, 33, 21, .12); --cee-hairline-strong: rgba(23, 33, 21, .28); --cee-on-green-muted: rgba(255, 255, 255, .82); /* crta na gradijentu (podnozje, iznad copyrighta) — izmjereno na artefaktu */ --cee-on-green-hairline: rgba(255, 255, 255, .28); --cee-font-heading: var(--wp--preset--font-family--heading); --cee-font-body: var(--wp--preset--font-family--body); } /* --------------------------------------------------------------------- 1. GUMBI — 4 varijante × 3 veličine (block styles, inc/block-styles.php) --------------------------------------------------------------------- */ .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; /* ispunjeni i obrubljeni iste visine */ border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-family: var(--cee-font-heading); font-size: 13px; padding: 15px 26px; /* md default */ transition: background .2s, border-color .2s, color .2s; text-decoration: none; } .wp-block-button__link:hover { text-decoration: none; } /* veličine */ .wp-block-button.is-size-lg .wp-block-button__link { padding: 16px 28px; font-size: 13.5px; } .wp-block-button.is-size-sm .wp-block-button__link { padding: 11px 18px; font-size: 12px; } /* primary-light — na bijelom: gradient fill, bijeli tekst */ .wp-block-button.is-style-primary-light .wp-block-button__link { background: var(--cee-grad); color: #FFFFFF; } .wp-block-button.is-style-primary-light .wp-block-button__link:hover { background: var(--cee-grad-hover); color: #FFFFFF; } /* secondary-light — na bijelom: transparent, hairline-strong okvir */ .wp-block-button.is-style-secondary-light .wp-block-button__link { background: transparent; border-color: var(--cee-hairline-strong); color: var(--cee-ink); } .wp-block-button.is-style-secondary-light .wp-block-button__link:hover { border-color: var(--cee-green); background: rgba(0, 115, 66, .06); color: var(--cee-ink); } /* primary-green — na gradientu: bijeli fill, zeleni tekst */ .wp-block-button.is-style-primary-green .wp-block-button__link { background: #FFFFFF; color: var(--cee-green); } .wp-block-button.is-style-primary-green .wp-block-button__link:hover { background: var(--cee-panel); color: var(--cee-green); } /* secondary-green — na gradientu: transparent, bijeli okvir */ .wp-block-button.is-style-secondary-green .wp-block-button__link { background: transparent; border-color: rgba(255, 255, 255, .7); color: #FFFFFF; } .wp-block-button.is-style-secondary-green .wp-block-button__link:hover { background: rgba(255, 255, 255, .14); color: #FFFFFF; } /* Tekstualni link — treća razina, nije gumb */ .cee-textlink { font-family: var(--cee-font-heading); text-transform: uppercase; font-size: 13px; letter-spacing: .06em; font-weight: 500; color: var(--cee-green); border-bottom: 1px solid var(--cee-green); padding-bottom: 4px; text-decoration: none; } .cee-textlink:hover { color: var(--cee-green-hover); border-color: var(--cee-green-hover); text-decoration: none; } .cee-textlink--white { color: #FFFFFF; border-color: rgba(255,255,255,.7); } .cee-textlink--white:hover { color: #FFFFFF; border-color: #FFFFFF; } /* --------------------------------------------------------------------- 2. KICKER --------------------------------------------------------------------- */ /* prototip: sekcijski kicker 11.5px/.14em, hero naslovnice 12px/.16em */ .cee-kicker { font-family: var(--cee-font-heading); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--cee-green); margin: 0 0 22px; } .cee-kicker--hero { font-size: 12px; letter-spacing: .16em; } .has-green-gradient-background .cee-kicker, .cee-on-gradient .cee-kicker { color: #FFFFFF; } /* nikad zelena na zelenom */ /* --------------------------------------------------------------------- 3. HAIRLINE TABLICA (specifikacije, cjenovnici) --------------------------------------------------------------------- */ .cee-specs { width: 100%; border-collapse: collapse; } .cee-specs td, .cee-specs th { border-bottom: 1px solid rgba(23, 33, 21, .14); } /* Artefakt drži vrijednosti 12px odmaknute od ruba ćelije, ne uz sam rub. */ /* Artefakt nema desni padding na desno poravnatim celijama (prebrojano: 12px 0 x32, 16px 0 x1, 13px 0 x1, nijedna s padding-right). Vraceno na stanje prije sesije. */ .cee-specs th { text-align: left; font-weight: 500; color: var(--cee-ink); font-size: 14.5px; padding: 12px 0; } .cee-specs td { text-align: right; font-weight: 600; font-size: 14.5px; padding: 12px 0; } .cee-specs tr:last-child td, .cee-specs tr:last-child th { border-bottom: 0; } /* --------------------------------------------------------------------- 4. TOPBAR + HEADER + MEGA MENI (prototip v4) --------------------------------------------------------------------- */ .cee-topbar { background: var(--cee-panel); border-bottom: 1px solid rgba(23,33,21,.1); } .cee-topbar__inner { max-width: 1320px; margin: 0 auto; padding: 8px clamp(20px, 3vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font-size: 12.5px; color: var(--cee-ink-muted); } .cee-topbar__inner > a { color: var(--cee-ink-muted); text-decoration: none; } .cee-topbar__inner > a:hover { color: var(--cee-green); } .cee-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .cee-topbar__tel { color: var(--cee-green); font-weight: 600; text-decoration: none; } .cee-header { position: sticky; top: 0; z-index: 70; background: #FFFFFF; border-bottom: 1px solid var(--cee-hairline); } .cee-header__inner { max-width: 1320px; margin: 0 auto; padding: 14px clamp(20px, 3vw, 40px); /* SEDMA razlika, nadena usput a nije bila prijavljena: razmak logo–navigacija. Izmjereno na artefaktu pri 1920/1600/1440/1280/1200/1100 px: 22 · 22 · 20.16 · 17.92 · 16.8 · 15.4 = clamp(14px, 1.4vw, 22px). Staging je imao clamp(14px, 2vw, 28px) i navigacija je stajala 6px predesno. */ display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(14px, 1.4vw, 22px); } .cee-header__logo { display: flex; align-items: center; flex: none; } .cee-header__logo img { height: 26px; width: auto; display: block; } .cee-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } /* Izmjereno na artefaktu pri 1920 (alati/shell.mjs), ne po starom prototipu v4: padding je 9px sa svih strana (ne 9px 12px), razmak medu stavkama 2px (ne 4px), a strelica se odvaja OBICNIM RAZMAKOM iz markupa (3.44px), ne flex gapom od 5px. Zato ide na display:block u flex
  • : inline-flex bi razmak progutao. line-height: normal je nuzan — bez njega stavka naslijedi 1.5 i visina zaglavlja naraste s 65 na 68.5px, pa se crta ispod zaglavlja spusti na svih 43 stranice. */ .cee-nav__list > li { display: flex; } .cee-nav__list > li > a { display: block; white-space: nowrap; font-family: var(--cee-font-heading); font-size: 13px; font-weight: 500; line-height: normal; color: var(--cee-ink); text-decoration: none; padding: 9px; border: 1px solid transparent; transition: color .2s, border-color .2s, background .2s; } .cee-nav__list > li > a span { font-size: 9px; color: var(--cee-ink-muted); } .cee-nav__list > li > a:hover, .cee-nav__list > li > a[aria-current="true"], .cee-nav__list > li > a[aria-expanded="true"] { color: var(--cee-green); border-color: rgba(0, 115, 66, .35); background: rgba(0, 115, 66, .06); font-weight: 600; } .cee-nav__list > li > a:hover span, .cee-nav__list > li > a[aria-current="true"] span, .cee-nav__list > li > a[aria-expanded="true"] span { color: var(--cee-green); } .cee-header__icons { margin-left: auto; display: flex; align-items: center; gap: 12px; } .cee-header__icons a { display: flex; color: var(--cee-ink); } .cee-header__icons a:hover { color: var(--cee-green); } /* mega panel — 2 kolone (1.35fr / .65fr) po v4 */ .cee-mega { position: static; } .cee-mega__panel { position: absolute; left: 0; right: 0; top: 100%; background: #FFFFFF; border-top: 1px solid var(--cee-hairline); border-bottom: 1px solid rgba(23,33,21,.14); box-shadow: 0 18px 40px -24px rgba(23,33,21,.4); display: none; z-index: 60; } .cee-mega.is-open .cee-mega__panel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(32px, 4vw, 64px); max-width: 1320px; margin: 0 auto; padding: clamp(26px, 3vw, 40px) clamp(20px, 3vw, 40px); } .cee-mega__kicker { grid-column: 1 / -1; margin: 0 0 14px; font-family: var(--cee-font-heading); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cee-green); } .cee-mega__left { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 28px; align-content: start; } .cee-mega__left a { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(23,33,21,.1); font-size: 15px; color: var(--cee-ink); text-decoration: none; } .cee-mega__left a span { margin-left: auto; color: var(--cee-green); } .cee-mega__left a:hover { color: var(--cee-green); } .cee-mega__right { background: var(--cee-panel); padding: 24px; align-self: start; } .cee-mega__div { margin: 0 0 2px; font-family: var(--cee-font-heading); font-size: 16px; font-weight: 600; color: var(--cee-ink); } .cee-mega__adr { margin: 0 0 16px; font-size: 13px; color: var(--cee-ink-muted); } .cee-mega__right ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; } .cee-mega__right a { font-size: 14.5px; color: var(--cee-ink); text-decoration: none; } .cee-mega__right a:hover { color: var(--cee-green); } .cee-mega__cta { display: inline-block; font-family: var(--cee-font-heading); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cee-green); border-bottom: 1px solid var(--cee-green); padding-bottom: 4px; text-decoration: none; } /* mobile off-canvas */ .cee-nav-toggle { display: none; } @media (max-width: 1099px) { .cee-nav, .cee-topbar__adrese { display: none; } .cee-nav-toggle { display: inline-flex; align-items: center; background: none; border: 1px solid var(--cee-hairline-strong); border-radius: 3px; font-family: var(--cee-font-heading); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cee-ink); padding: 9px 14px; cursor: pointer; } .cee-offcanvas { position: fixed; inset: 0; z-index: 100; background: #FFFFFF; transform: translateX(100%); transition: transform .25s; overflow-y: auto; padding: 24px; } .cee-offcanvas.is-open { transform: translateX(0); } .cee-offcanvas details { border-bottom: 1px solid var(--cee-hairline); } .cee-offcanvas summary { font-family: var(--cee-font-heading); font-weight: 600; font-size: 16px; padding: 16px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } .cee-offcanvas summary::-webkit-details-marker { display: none; } .cee-offcanvas summary::after { content: "+"; color: var(--cee-green); font-size: 20px; } .cee-offcanvas details[open] summary::after { content: "\2013"; } .cee-offcanvas ul { list-style: none; margin: 0; padding: 0 0 16px; display: flex; flex-direction: column; gap: 10px; } .cee-offcanvas a { color: var(--cee-ink); text-decoration: none; font-size: 15px; } .cee-offcanvas__utils { padding-top: 18px !important; } .cee-offcanvas__close { background: none; border: none; font-size: 28px; line-height: 1; color: var(--cee-ink); cursor: pointer; float: right; padding: 4px 8px; } } /* --------------------------------------------------------------------- 5. FOOTER (gradient) --------------------------------------------------------------------- */ .cee-footer { background: var(--cee-grad); color: #FFFFFF; } .cee-footer a { color: #FFFFFF; text-decoration: none; } .cee-footer a:hover { color: #FFFFFF; text-decoration: underline; } .cee-footer__grid { max-width: 1320px; margin: 0 auto; padding: clamp(40px, 4.4vw, 64px) clamp(20px, 3vw, 40px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } /* line-height: normal na sva tri mjesta — inace se naslijedi 1.5 i podnozje naraste s 384 na 420px na svih 43 stranice. Myriad Pro ima normal ~1.24: naslov 11.5px -> 15px, stavka 14.5px -> 18px (izmjereno na artefaktu). */ .cee-footer__naslov { font-family: var(--cee-font-heading); font-size: 11.5px; letter-spacing: .14em; line-height: normal; text-transform: uppercase; color: #FFFFFF; font-weight: 500; margin: 0 0 14px; } .cee-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; } /* Mora ciljati sam
  • : nize u datoteci stoji `li { line-height: 1.5 }`, a to je pravilo NA li, pa nasljedivanje s