/* ═══════════════════════════════════════════════════════════════ Biroplast Solutions — V2 skupni sistem za produktne podstrani (TAStudio, Booking Studio). NEPOSREDNO povzeto po že odobreni DeliMe podstrani (glej aplikacija-delime.css) — ista postavitev, tipografska hierarhija, razmiki, obravnava slik, gumbi, CTA, svetlo/temni prehodi, CGP grafični elementi, parallax, scroll reveal, hover interakcije, odzivna pravila, animacijski časi. NAMENOMA LOČENA datoteka od aplikacija-delime.css (ki ostaja nedotaknjena) — DeliMe je referenca, ne skupna osnova, da se ne tvega nenamerne spremembe že odobrene strani. Predpona razredov "izd-" (izdelek), splošna za obe novi strani. Ista NI-hero .hero{} homepage sistema (glej opombo v aplikacija-delime.css) — obe strani uporabljata splošni [data-parallax] sistem, ne hero-specifičen [data-depth-*]. NAGLASNA BARVA: privzeto (brez modifikatorja na ) = limeta/ zelena, kar ustreza TAStudio kategoriji na domači strani (badge-lime "Evidenca delovnega časa"). Za Booking Studio stran dobi dodaten razred "izd-modra", ki naglas prestavi na cyan/modro (ustreza badge-cyan "Vodenje nastanitev" na domači strani). Samo ta dva CSS spremenljivka-para se razlikujeta med stranema — vsa postavitev/gibanje/tipografija je identična. ═══ */ body.izd-stran{ --izd-a: var(--lime); /* glavni naglas: eyebrow, značka, pika */ --izd-b: var(--green); --izd-jedro-grad: var(--grad-green); } body.izd-stran.izd-modra{ --izd-a: var(--cyan); --izd-b: var(--blue); --izd-jedro-grad: var(--grad-blue); } /* ── skupno: eyebrow puščični niz ──────────────────────────────── */ .izd-flow{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--fh); font-weight:700; font-size:12.5px; letter-spacing:.05em; color:var(--muted-on-navy); } .izd-flow b{ color:#fff; font-weight:700; } .izd-flow svg{ width:13px; height:13px; opacity:.55; flex-shrink:0; } /* ═══ 1. HERO ══════════════════════════════════════════════════ */ .izd-hero{ position:relative; overflow:hidden; background:linear-gradient(165deg, var(--navy-mid), var(--navy) 55%, var(--navy-deep)); color:#fff; padding:calc(var(--sp-7) + 30px) 0 var(--sp-7); } .izd-hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr .98fr; gap:var(--sp-6); align-items:center; } .izd-hero-eyebrow{ color:var(--izd-a); } .izd-hero h1{ font-size:clamp(46px,6vw,80px); margin:2px 0 var(--sp-2); } .izd-hero-podnaslov{ font-family:var(--fh); font-weight:600; font-size:clamp(19px,1.9vw,25px); color:#fff; line-height:1.3; margin-bottom:var(--sp-3); max-width:520px; } .izd-hero .lead{ max-width:480px; margin-bottom:var(--sp-4); } .izd-hero-cta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; } .izd-hero-vizual{ position:relative; } .izd-hero-vizual .product-moment{ aspect-ratio:4/3; padding:0; transform:translateX(18px); } .izd-hero-vizual .product-moment img{ width:100%; height:100%; object-fit:cover; object-position:top center; } .izd-hero-vizual-znacka{ position:absolute; z-index:3; left:-18px; bottom:34px; display:flex; align-items:center; gap:10px; background:rgba(23,34,46,.72); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:9px 16px 9px 10px; box-shadow:var(--sh-lg); } .izd-hero-vizual-znacka .pika{ width:8px; height:8px; border-radius:50%; background:var(--izd-a); flex-shrink:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--izd-a) 22%, transparent); } .izd-hero-vizual-znacka span{ font-family:var(--fh); font-weight:700; font-size:12.5px; letter-spacing:.02em; color:#fff; } /* ozadje: circuit + motiv + glow, splošni [data-parallax] (ne hero-specifičen sistem) */ .izd-hero .circuit-field{ z-index:0; } .izd-hero-bp{ width:640px; height:640px; right:-200px; bottom:-260px; opacity:.09; color:var(--izd-a); z-index:0; } .izd-hero-circuit-gfx{ position:absolute; z-index:0; width:520px; height:520px; left:-140px; top:-120px; color:var(--cyan); opacity:.07; } .izd-hero .glow-green{ width:520px; height:520px; left:6%; bottom:-220px; opacity:.5; z-index:0; } .izd-hero .glow-blue{ width:460px; height:460px; right:2%; top:-160px; opacity:.45; z-index:0; } @media (max-width:960px){ .izd-hero-grid{ grid-template-columns:1fr; gap:var(--sp-5); } /* POPRAVEK (7. 9. 2026) — brez eksplicitne širine tu je bila krožna CSS sizing-napaka: ".izd-hero-vizual" (shrink-to-fit prek "max-width"+"margin:auto") ovija ".product-moment" (samo "aspect-ratio:4/3", brez lastne širine) ovija — brez sidra se cela veriga sesede na 0×0 in produktna slika na mobilnem popolnoma izgine (na TAStudio IN Booking Studio, ker si delita to datoteko). Odkrito med preverjanjem flagship heroja na drugi strani, popravljeno z istim vzorcem povsod. */ .izd-hero-vizual{ order:-1; width:100%; max-width:520px; margin:0 auto; } .izd-hero-vizual .product-moment{ transform:none; aspect-ratio:4/3; } .izd-hero-vizual-znacka{ left:12px; bottom:16px; } .izd-hero .lead{ max-width:none; } } @media (max-width:600px){ .izd-hero{ padding:calc(var(--sp-6) + 20px) 0 var(--sp-6); } .izd-hero-vizual-znacka span{ font-size:11.5px; } } /* ═══ 2+3. VREDNOST + DELOVNI PROCES (produktna zgodba) — 6 realnih korakov (TAStudio/Booking Studio imata daljši proces kot DeliMe-jeva 4 stopnje). Vodoravno na namizju s POVEZANO povezovalno črto (glej spodnjo opombo ob ".izd-proces-crta"), na mobilnem navpična povezana časovnica (enak vizualni jezik kot ".dl-korak"). ─────── */ .izd-proces-glava{ text-align:center; margin:0 auto var(--sp-6); max-width:680px; } .izd-proces{ position:relative; } .izd-koraki{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(6,1fr); gap:var(--sp-2); } .izd-korak{ position:relative; text-align:left; } .js .izd-korak{ opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease-premium), transform .55s var(--ease-premium); } .js .izd-proces.je-vidno .izd-korak{ opacity:1; transform:none; } .izd-koraki .izd-korak:nth-child(2){ transition-delay:.08s; } .izd-koraki .izd-korak:nth-child(3){ transition-delay:.16s; } .izd-koraki .izd-korak:nth-child(4){ transition-delay:.24s; } .izd-koraki .izd-korak:nth-child(5){ transition-delay:.32s; } .izd-koraki .izd-korak:nth-child(6){ transition-delay:.4s; } /* ── povezovalna črta (avgust 2026, prenova) — isti "pol-segment na korak" sistem kot pri DeliMe (glej obsežno opombo v aplikacija-delime.css) — krogi so poravnani na LEVO znotraj stolpca (".izd-korak{text-align:left}"), zato segment sega od levega roba TEGA kroga (na 0) nazaj do desnega roba PREJŠNJEGA kroga, širina = (širina stolpca + razmik mreže − premer kroga), levi rob segmenta = −(ta širina). Geometrija prilagojena manjšemu krogu (premer 46px) in 16px razmiku mreže (46−16=30). Prvi korak nima segmenta. Enak dvoslojen animacijski mehanizem (osnovna nevtralna črta + "::after" animiran napredek), ista JS aktivacija (main.js) prek ".je-aktiven"/".predogled" na .izd-korak. ─────────────────────── */ .izd-proces-crta{ position:absolute; z-index:0; top:22px; left:calc(-100% + 30px); width:calc(100% - 30px); height:2px; border-radius:1px; background:var(--line); overflow:hidden; } .izd-proces-crta::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--cyan), var(--green)); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease-premium); } .izd-korak.je-aktiven .izd-proces-crta::after, .izd-korak.predogled .izd-proces-crta::after{ transform:scaleX(1); } .izd-koraki .izd-korak:nth-child(2) .izd-proces-crta::after{ transition-delay:.08s; } .izd-koraki .izd-korak:nth-child(3) .izd-proces-crta::after{ transition-delay:.16s; } .izd-koraki .izd-korak:nth-child(4) .izd-proces-crta::after{ transition-delay:.24s; } .izd-koraki .izd-korak:nth-child(5) .izd-proces-crta::after{ transition-delay:.32s; } .izd-koraki .izd-korak:nth-child(6) .izd-proces-crta::after{ transition-delay:.4s; } .izd-korak-vozel{ width:46px; height:46px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; background:var(--surface); border:2px solid var(--line); font-family:var(--fh); font-weight:700; font-size:16px; color:var(--muted); margin-bottom:10px; transition:border-color .45s var(--ease-premium), color .45s var(--ease-premium), transform .35s var(--ease-premium), box-shadow .45s var(--ease-premium); } .izd-korak.je-aktiven .izd-korak-vozel, .izd-korak.predogled .izd-korak-vozel{ transform:scale(1.045); } .izd-korak:nth-child(1).je-aktiven .izd-korak-vozel, .izd-korak:nth-child(1).predogled .izd-korak-vozel{ border-color:var(--cyan); color:var(--blue); box-shadow:0 0 0 5px color-mix(in srgb, var(--cyan) 14%, transparent); } .izd-korak:nth-child(2).je-aktiven .izd-korak-vozel, .izd-korak:nth-child(2).predogled .izd-korak-vozel{ border-color:var(--green); color:var(--green); box-shadow:0 0 0 5px color-mix(in srgb, var(--green) 14%, transparent); } .izd-korak:nth-child(3).je-aktiven .izd-korak-vozel, .izd-korak:nth-child(3).predogled .izd-korak-vozel{ border-color:var(--lime); color:#6d8a1f; box-shadow:0 0 0 5px color-mix(in srgb, var(--lime) 16%, transparent); } .izd-korak:nth-child(4).je-aktiven .izd-korak-vozel, .izd-korak:nth-child(4).predogled .izd-korak-vozel{ border-color:var(--blue); color:var(--blue); box-shadow:0 0 0 5px color-mix(in srgb, var(--blue) 14%, transparent); } .izd-korak:nth-child(5).je-aktiven .izd-korak-vozel, .izd-korak:nth-child(5).predogled .izd-korak-vozel{ border-color:var(--cyan); color:var(--blue); box-shadow:0 0 0 5px color-mix(in srgb, var(--cyan) 14%, transparent); } .izd-korak:nth-child(6).je-aktiven .izd-korak-vozel, .izd-korak:nth-child(6).predogled .izd-korak-vozel{ border-color:var(--green); color:var(--green); box-shadow:0 0 0 5px color-mix(in srgb, var(--green) 14%, transparent); } .izd-koraki .izd-korak:nth-child(2) .izd-korak-vozel{ transition-delay:.08s; } .izd-koraki .izd-korak:nth-child(3) .izd-korak-vozel{ transition-delay:.16s; } .izd-koraki .izd-korak:nth-child(4) .izd-korak-vozel{ transition-delay:.24s; } .izd-koraki .izd-korak:nth-child(5) .izd-korak-vozel{ transition-delay:.32s; } .izd-koraki .izd-korak:nth-child(6) .izd-korak-vozel{ transition-delay:.4s; } .izd-korak h3{ font-size:15.5px; margin-bottom:5px; line-height:1.25; } .izd-korak p{ color:var(--muted); font-size:13px; line-height:1.5; opacity:.68; transition:opacity .4s var(--ease-premium); } .izd-korak.je-aktiven p, .izd-korak.predogled p{ opacity:1; } @media (prefers-reduced-motion:reduce){ .js .izd-korak{ opacity:1; transform:none; transition:none; } .izd-proces-crta::after{ transition:none; } .izd-korak-vozel{ transition:none; } .izd-korak p{ transition:none; } } @media (max-width:1100px){ .izd-koraki{ grid-template-columns:1fr; gap:0; } .izd-korak{ display:flex; gap:var(--sp-3); align-items:flex-start; padding:0 0 var(--sp-4) 0; position:relative; } .izd-korak:last-child{ padding-bottom:0; } .izd-korak-vozel{ margin-bottom:0; } .izd-proces-crta{ top:45px; right:auto; left:22px; bottom:-2px; width:2px; height:auto; } .js .izd-korak{ transition-delay:0s !important; } .izd-koraki .izd-korak:nth-child(2) .izd-proces-crta::after, .izd-koraki .izd-korak:nth-child(3) .izd-proces-crta::after, .izd-koraki .izd-korak:nth-child(4) .izd-proces-crta::after, .izd-koraki .izd-korak:nth-child(5) .izd-proces-crta::after, .izd-koraki .izd-korak:nth-child(6) .izd-proces-crta::after, .izd-koraki .izd-korak:nth-child(2) .izd-korak-vozel, .izd-koraki .izd-korak:nth-child(3) .izd-korak-vozel, .izd-koraki .izd-korak:nth-child(4) .izd-korak-vozel, .izd-koraki .izd-korak:nth-child(5) .izd-korak-vozel, .izd-koraki .izd-korak:nth-child(6) .izd-korak-vozel{ transition-delay:0s; } } /* ═══ 4. UREJEVALNE VRSTE (vsebinske sekcije A–D) — velika slika ena stran, vsebina druga, izmenično, brez kartic. Svetla/temna izmenjava — ".izd-vrsta" na svetli podlagi privzeto, ".on-navy" na starševski sekciji obrne barve za temne sekcije (enako kot pri DeliMe). ────── */ .izd-vrsta-drza{ display:grid; grid-template-columns:1.02fr .98fr; gap:var(--sp-6); align-items:center; } .izd-vrsta-drza--obrni{ grid-template-columns:.98fr 1.02fr; } .izd-vrsta-drza--obrni .izd-vrsta-media{ order:2; } .izd-vrsta-drza--obrni .izd-vrsta-vsebina{ order:1; } .izd-vrsta-media{ position:relative; } .izd-vrsta-media .product-moment{ aspect-ratio:5/4; padding:0; } .izd-vrsta-media .product-moment img{ width:100%; height:100%; object-fit:cover; } .izd-vrsta-vsebina{ max-width:480px; } .izd-vrsta-vsebina h2{ margin:4px 0 var(--sp-2); } .izd-vrsta-vsebina .lead{ margin-bottom:var(--sp-3); max-width:none; } .izd-vrsta-vsebina .kljuke{ margin-top:var(--sp-3); } @media (max-width:900px){ .izd-vrsta-drza, .izd-vrsta-drza--obrni{ grid-template-columns:1fr; gap:var(--sp-4); } .izd-vrsta-drza--obrni .izd-vrsta-media, .izd-vrsta-drza .izd-vrsta-media{ order:-1; } .izd-vrsta-vsebina{ max-width:none; } .izd-vrsta-media .product-moment{ aspect-ratio:16/10; max-width:520px; margin:0 auto; } } /* ═══ 5. KLJUČNE KORISTI — velik naslov + preprost .kljuke seznam v dveh stolpcih (brez kartic/ikon-škatel, mirna tipografska lista). ── */ .izd-koristi-vsebina{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--sp-6); align-items:start; } .izd-koristi-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px var(--sp-4); } .izd-koristi-list li{ display:flex; gap:12px; align-items:flex-start; font-size:16px; } .izd-koristi-list li svg{ width:19px; height:19px; color:var(--green); flex-shrink:0; margin-top:3px; } @media (max-width:900px){ .izd-koristi-vsebina{ grid-template-columns:1fr; gap:var(--sp-3); } } @media (max-width:560px){ .izd-koristi-list{ grid-template-columns:1fr; } } /* ═══ 6. NAŠ LASTEN RAZVOJ — za DeliMe je bila na voljo prava atmosferska fotografija (tovarniška jedilnica), za TAStudio/Booking Studio pa v projektu NI obstoječe fotografije ljudi/pisarne — zato ta sekcija namesto fotografskega ozadja uporablja ISTI temni CGP gradient + circuit-field/glow/motif jezik kot Hero (samo obstoječi grafični elementi, brez izmišljene/generične fotografije). */ .izd-razvoj{ position:relative; overflow:hidden; color:#fff; background:linear-gradient(155deg, var(--navy-mid), var(--navy) 55%, var(--navy-deep)); padding:var(--sp-7) 0; } .izd-razvoj-vsebina{ position:relative; z-index:2; max-width:560px; } .izd-razvoj-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--izd-a); margin-bottom:var(--sp-2); } .izd-razvoj-vsebina h2{ font-size:clamp(28px,3.4vw,42px); margin-bottom:var(--sp-3); } .izd-razvoj-vsebina .lead{ color:var(--muted-on-navy); max-width:560px; } @media (max-width:760px){ .izd-razvoj{ padding:var(--sp-6) 0; } } /* ═══ 7. ZAKLJUČNI CTA — ponovna uporaba .cta-band jezika (definiran v pages.css, homepage-scoped datoteka, ki je namenoma NI vključena na teh straneh) — pravila tu podvojena namerno (enaka odločitev kot pri DeliMe), da ostaneta pages.css in aplikacija-delime.css povsem nedotaknjena in ti dve strani popolnoma samostojni. ─────────────── */ .cta-band{ position:relative; overflow:hidden; border-radius:var(--r-xl); background:linear-gradient(160deg, var(--navy-mid), var(--navy) 65%, var(--navy-deep)); padding:var(--sp-7) var(--sp-5); text-align:center; color:#fff; } .cta-band::before{ content:''; position:absolute; top:0; left:8%; right:8%; height:2px; background:linear-gradient(90deg, transparent, rgba(23,185,236,.55), rgba(171,208,57,.5), transparent); } .cta-band h2{ margin-bottom:var(--sp-2); font-size:clamp(30px, 3.2vw, 44px); } .cta-band .lead{ margin:0 auto var(--sp-4); color:var(--muted-on-navy); } .cta-btns{ display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap; } .cta-znacke{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; margin-top:var(--sp-4); font-size:13px; color:var(--muted-on-navy); }