— tokeni kaskadiraju. Svi kontrasti provjereni na WCAG AA (min 4.5:1 za tekst) — v. tablicu u README.md. ============================================================================= */ :root { /* --------------------------------------------------------------------------- 1. NEUTRALNA KIČMA — zajednička objema tonalnostima Blago hladno tintana prema azurnoj da se paleta drži zajedno. Nikad čisti #000 na čistoj #FFF. --------------------------------------------------------------------------- */ --ink-900: #0D0F12; --ink-800: #16191D; --ink-700: #222629; --ink-600: #343A40; --ink-500: #4A5560; --ink-400: #6C767F; --ink-300: #A8AEB5; --ink-200: #D4D8DC; --ink-100: #E8EBEE; --ink-050: #F4F6F8; /* --------------------------------------------------------------------------- 2. TUBÒ TONALNOST — svijetlo + JEDNA azurna Korekcija 1 iz notes.md: u referenci su živjele 3–4 plave (gumb, ikone, band, čelična iz fotke) → djelovalo template-ski. Ovdje postoji točno jedna azurna + jedan svijetli tint. Aertecnica crvena se NE koristi kao akcent — pojavljuje se samo unutar Aertecnica logotipa i badgeva (korekcija 5). --------------------------------------------------------------------------- */ --tubo-bg: #FFFFFF; --tubo-tint: #F0F7FE; /* izmjereno iz reference, zadržano po notes.md */ --tubo-tint-2: #F8FAFD; --tubo-accent: #0F62C4; /* JEDINA azurna: CTA, linkovi, aktivna stanja, ikone */ --tubo-accent-hi: #0B4F9E; /* hover / tekst-link na svijetloj podlozi */ --tubo-deep: #0B3A6B; /* mirna tamnoplava PLOHA — korekcija 2: zamjena za gradient stats band iz reference */ --tubo-line: #DCE7F3; /* --------------------------------------------------------------------------- 3. GRAĐEVINA TONALNOST — tamno u slojevima + desaturirana bronca Korekcija 3 iz notes.md: zlato držati desaturirano (šampanjac/bronca), ne žuto zlato; bronca samo za naslove/akcente/linije, NIKAD na plohama; mali tekst na tamnom uvijek topli off-white. Tamno su TRI sloja, ne jedna ploha (izmjereno iz reference). --------------------------------------------------------------------------- */ --grad-bg: #0D0F12; --grad-surface: #16191D; --grad-surface-2: #222629; --grad-paper: #F5F3EF; /* topli off-white: svijetle sekcije + tekst na tamnom */ --grad-accent: #C2A264; /* šampanjac/bronca — finalno kalibrirati po logu */ --grad-accent-hi: #D4B87E; --grad-line: #2C3136; /* --------------------------------------------------------------------------- 4. TIPOGRAFIJA Obitelji se postavljaju po varijanti (v. hero-varijante.html) — sustav je uvijek: JEDAN display + JEDAN text. Max 2 obitelji, max 3 reza. Finalni odabir tek nakon što stigne logo (notes.md). --------------------------------------------------------------------------- */ /* NIKAD Inter / Roboto / Open Sans kao naslovni font — to je „AI default" izgled. Biraju se obitelji iz stvarnih ljevaonica, građene za čitljivost i s punim latin-ext setom (č ć đ š ž). Obrazloženje izbora: README.md, odjeljak Tipografija. */ --font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace; /* Fluidna skala, omjer ~1.25 mobile → ~1.333 desktop */ --fs-eyebrow: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lead: clamp(1.0625rem, 0.4vw + 0.95rem, 1.1875rem); --fs-h3: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem); --fs-h2: clamp(1.75rem, 1.6vw + 1.3rem, 2.5rem); /* H1 je namjerno umjereniji nego kod sloganskih naslovnica: copy je opisan i profesionalan („Centralni usisavački sustavi TUBÒ za svaki tip objekta"), pa na 68px ide u pet redaka. Na 56px stane u tri i zadrži težinu. */ --fs-h1: clamp(2rem, 3vw + 1rem, 3.5rem); --fs-display: clamp(2.5rem, 4.5vw + 1rem, 4.5rem); --fs-stat: clamp(2.25rem, 2.4vw + 1.5rem, 3.5rem); --lh-tight: 1.08; /* veliki naslovi */ --lh-snug: 1.25; /* h3, kartice */ --lh-body: 1.65; /* tekst */ --ls-display: -0.025em; --ls-h2: -0.015em; --ls-eyebrow: 0.12em; --measure: 62ch; /* mjera retka za tekst */ /* --------------------------------------------------------------------------- 5. SPACING — striktni 8-pt sustav. Bez proizvoljnih vrijednosti. --------------------------------------------------------------------------- */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-6: 1.5rem; /* 24 */ --sp-8: 2rem; /* 32 */ --sp-12: 3rem; /* 48 */ --sp-16: 4rem; /* 64 */ --sp-24: 6rem; /* 96 */ --sp-32: 8rem; /* 128 */ /* Vertikalni ritam sekcija — NE isti svugdje (spacing je hijerarhija) */ --section-y: clamp(4rem, 8vw, 8rem); /* novi misaoni blok */ --section-y-tight: clamp(2.5rem, 5vw, 4.5rem); /* povezana sekcija */ /* --------------------------------------------------------------------------- 6. GRID --------------------------------------------------------------------------- */ --container: 1240px; --gutter: clamp(1rem, 4vw, 2rem); --cols: 12; /* --------------------------------------------------------------------------- 7. RADIUS — jedan sustav, ne random po elementu --------------------------------------------------------------------------- */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-pill: 999px; /* --------------------------------------------------------------------------- 8. SJENE — slojevite i tonirane bojom iz palete, nikad čista crna --------------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(13, 15, 18, 0.06), 0 2px 6px rgba(13, 15, 18, 0.04); --shadow-md: 0 2px 4px rgba(13, 15, 18, 0.06), 0 12px 28px rgba(13, 15, 18, 0.08); --shadow-lg: 0 4px 8px rgba(13, 15, 18, 0.05), 0 24px 56px rgba(13, 15, 18, 0.10); /* --------------------------------------------------------------------------- 9. MOTION — svrha je feedback, nikad spektakl. Samo transform i opacity. Doherty prag: svaka reakcija sučelja < 400 ms. --------------------------------------------------------------------------- */ --dur-fast: 150ms; --dur-base: 220ms; --dur-reveal: 600ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* -------------------------------------------------------------------------- 10. SEMANTIČKI ALIASI — default je TUBÒ (TUBÒ je naslovnica weba) Komponente KORISTE ISKLJUČIVO ove aliase, nikad direktne --tubo-* / --grad-*. Time ista komponenta radi u oba svijeta bez ijedne izmjene. -------------------------------------------------------------------------- */ --bg: var(--tubo-bg); --bg-subtle: var(--tubo-tint); --bg-raised: var(--tubo-bg); --bg-inverse: var(--tubo-deep); --fg: #14181C; --fg-muted: var(--ink-500); --fg-inverse: #FFFFFF; --accent: var(--tubo-accent); --accent-hi: var(--tubo-accent-hi); --on-accent: #FFFFFF; --line: var(--tubo-line); --focus: var(--tubo-accent); } /* --- Prebacivanje svijeta ---------------------------------------------------- VAŽNO: uz redefiniciju tokena mora ići i `color: var(--fg)` na samom [data-world] elementu. Bez toga djeca naslijede IZRAČUNATU boju s — `var(--fg)` se ne evaluira ponovno pri nasljeđivanju — pa tamna sekcija unutar svijetle stranice dobije tamni tekst na tamnoj podlozi. Nađeno u pregledniku. ---------------------------------------------------------------------------- */ [data-world], [data-tone] { color: var(--fg); background-color: var(--bg); } [data-world="tubo"] { --bg: var(--tubo-bg); --bg-subtle: var(--tubo-tint); --bg-raised: var(--tubo-bg); --bg-inverse: var(--tubo-deep); --fg: #14181C; --fg-muted: var(--ink-500); --fg-inverse: #FFFFFF; --accent: var(--tubo-accent); --accent-hi: var(--tubo-accent-hi); --on-accent: #FFFFFF; --line: var(--tubo-line); --focus: var(--tubo-accent); } /* Tamna ploha UNUTAR TUBÒ svijeta. Postoji jer ritam svijetlo/tamno nosi dramaturgiju skrolanja, a posezanje za brončanom Građevinom na TUBÒ stranici bi pomiješalo dva brenda. Azurna se posvjetljuje da zadrži AA na tamnom. */ [data-tone="deep"] { --bg: var(--tubo-deep); --bg-subtle: #0E4478; --bg-raised: #10406E; --bg-inverse: #FFFFFF; --fg: #FFFFFF; --fg-muted: #AFC9E4; --fg-inverse: var(--tubo-deep); --accent: #7FB4EE; --accent-hi: #A6CCF5; --on-accent: var(--tubo-deep); --line: #1C508A; --focus: #7FB4EE; } [data-world="gradevina"] { --bg: var(--grad-bg); --bg-subtle: var(--grad-surface); --bg-raised: var(--grad-surface-2); --bg-inverse: var(--grad-paper); --fg: var(--grad-paper); --fg-muted: var(--ink-300); --fg-inverse: var(--grad-bg); --accent: var(--grad-accent); --accent-hi: var(--grad-accent-hi); --on-accent: var(--grad-bg); /* tamni tekst na bronci — 7.9:1 */ --line: var(--grad-line); --focus: var(--grad-accent); } /* ============================================================================= BAZA ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } /* `hidden` atribut mora pobijediti bilo koji `display` iz CSS-a. UA pravilo [hidden]{display:none} ima najnižu specifičnost, pa ga svaki `.klasa { display: flex }` tiho nadjača i element ostane vidljiv. Nađeno u pregledniku: navigacija vodiča ostajala je iznad rezultata. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-text); font-size: var(--fs-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Tabularne znamenke SAMO tamo gdje se brojke poravnavaju (statistike, cjenici, tablice). NIKAD globalno na body: u većini fontova `tnum` obuhvaća i zarez i točku, pa interpunkcija u naslovima dobije punu širinu znamenke i pojavi se rupa ispred nje ("u tlocrt ,"). Provjereno u pregledniku: zarez 41px umjesto 18px. */ .tabular, .stat__value, .versus, table { font-variant-numeric: tabular-nums; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; text-wrap: balance; } h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); } h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: var(--ls-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); } p { margin: 0; max-width: var(--measure); } img, svg { display: block; max-width: 100%; } /* `height: auto` je OBAVEZAN uz width/height atribute na . Atributi se mapiraju u CSS width/height s najnižom specifičnošću; kad su oba zadana, `aspect-ratio` se ignorira i slika se renderira u punoj prirodnoj visini. Atributi ostaju jer sprječavaju CLS — visinu preuzima CSS. Nađeno u pregledniku: slika 1536×1024 crtala se 376×1024 unatoč aspect-ratio 3/2. */ img { height: auto; } /* Fokus je vidljiv na SVEMU interaktivnom — 2px u akcentnoj + offset */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); } /* ============================================================================= KOMPONENTE — dijele oba svijeta, mijenja se samo tonalnost ============================================================================= */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* --- Eyebrow: mala verzalna oznaka iznad naslova (ritam pri skeniranju) ------ */ .eyebrow { font-family: var(--font-text); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); margin: 0; } /* --- Gumbi: ista geometrija u oba svijeta, touch meta >= 48px ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; padding: var(--sp-3) var(--sp-8); border: 1px solid transparent; border-radius: var(--r-md); font-family: var(--font-text); font-size: var(--fs-base); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .btn--primary { background: var(--accent); color: var(--on-accent); } .btn--primary:hover { background: var(--accent-hi); transform: translateY(-2px); } /* Sekundarni gumb ima PUNU pozadinu, ne transparentnu: u heroju često sjedi preko fotografije, a transparentan gumb tamo propušta sliku kroz sebe i izgleda razbijeno. */ .btn--ghost { background: var(--bg); color: var(--fg); border-color: var(--line); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } /* Trust signal odmah uz gumb — sumnja kulminira u trenutku odluke */ .btn-trust { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; } /* Broj telefona unutar rečenice i dalje se TAPKA, a visina retka mu daje metu od 18 px. Padding uz jednak negativan margin diže metu na ~42 px bez ijednog pomaknutog piksela u slogu. Mjereno u pregledniku na 360 px. */ .btn-trust a[href^="tel:"], .footer__legal a[href^="tel:"], .speclist a[href^="tel:"] { display: inline-block; padding-block: var(--sp-3); margin-block: calc(var(--sp-3) * -1); } /* --- Potpis-efekt: fotografija se stapa u pozadinu svog svijeta -------------- notes.md korekcija 4: efekt se radi CSS SLOJEVIMA (foto → scrim → pozadina), NIKAD zapečen u slici. Oštrije, responzivno, tekst uvijek čitljiv, i isti efekt radi na svakoj hero fotografiji bez ponovnog retuširanja. Smjer stapanja se postavlja s --blend-dir (default: slijeva). ---------------------------------------------------------------------------- */ .blend { position: relative; isolation: isolate; } .blend > img { width: 100%; height: 100%; object-fit: cover; } .blend::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( var(--blend-dir, 90deg), var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 22%, color-mix(in srgb, var(--bg) 30%, transparent) 52%, transparent 78% ); } /* Fallback za preglednike bez color-mix() */ @supports not (background: color-mix(in srgb, red 50%, blue)) { .blend::after { background: linear-gradient(var(--blend-dir, 90deg), var(--bg) 0%, var(--bg) 18%, transparent 72%); opacity: 0.92; } } /* --- Tamna ploha umjesto gradienta (notes.md korekcija 2) -------------------- */ .band { background: var(--bg-inverse); color: var(--fg-inverse); } [data-world="gradevina"] .band { color: var(--grad-bg); } /* --- Stat: velika brojka, tabularne znamenke -------------------------------- */ .stat__value { font-family: var(--font-display); font-size: var(--fs-stat); font-weight: 700; line-height: 1; letter-spacing: var(--ls-display); } .stat__label { font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; } /* --- Scroll reveal: okida se jednom, uz reduced-motion fallback -------------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } .btn:hover { transform: none; } } /* --- Tekstura preko cijele stranice ----------------------------------------- Skill: „mikro-nesavršenost koja stranicu čini ljudskom". Čiste plohe bez ijednog zrna su ono što najviše odaje generirani predložak. 2 % je granica ispod koje se ne primjećuje svjesno, ali se osjeti. */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: 0.02; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { body::after { opacity: 0.012; } } /* --- Tekstura na pojedinoj sekciji (jača, za tamne plohe) ------------------- */ .grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --- Pomoćno --------------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Skip-link mora postati vidljiv i upotrebljiv na fokusu — inače je element koji postoji samo zbog pristupačnosti zapravo nedostupan. */ a.visually-hidden:focus { position: fixed; top: var(--sp-4); left: var(--sp-4); z-index: 100; display: inline-flex; align-items: center; width: auto; height: auto; min-height: 48px; padding: var(--sp-3) var(--sp-6); margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--accent); color: var(--on-accent); border-radius: var(--r-md); font-weight: 600; text-decoration: none; box-shadow: var(--shadow-lg); }