/* ============================================================ GAIA SAVJETOVANJE — MAIN STYLESHEET Sve boje su namjerno hardkodirane (hex), ne CSS varijable, da bi se izbjegao night-mode color inversion problem u browserima. 3 BOJE: #2C3E35 tamna šuma (forest) #F7F3EE topla bijela (warm) #B5926A terakota (terra) ============================================================ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} /* ============================================================ GLOBALNI CONTAINER SUSTAV Jedan dosljedan okvir za cijelu stranicu. Svaka sekcija je full-width (radi pozadinske boje od ruba do ruba), ali njen SADRŽAJ se centrira na istu širinu (--gaia-content) s jednakim lijevim i desnim marginama. Time su svi rubovi sadržaja poravnati po istoj vertikalnoj osi kroz cijelu naslovnicu. ============================================================ */ :root{ --gaia-content: 820px; /* širina proznog sadržaja (čitljivost) */ --gaia-wide: 1180px; /* širina za sekcije s karticama/kolonama */ --gaia-gutter: clamp(20px, 4vw, 64px); /* lijevi/desni razmak do ruba */ } /* Unutarnji wrapper svake sekcije: centriran, ograničen, s jednakim rubovima. Klasa .wp-block-group koju Gutenberg generira dobiva isto ponašanje kroz pravila niže po sekcijama. */ .gaia-inner{ width:100%; max-width:var(--gaia-content); margin-left:auto; margin-right:auto; } /* Gutenberg dodaje vlastite margine/max-width na .wp-block-group blokove kroz 'constrained' layout. Naše glavne sekcije (hero, uvod, problemi, proces, usluge, cta) same upravljaju širinom preko padding-sustava iznad, pa poništavamo Gutenbergove auto-margine i ograničenja na TIM sekcijama da ne dođe do dvostrukog centriranja ili neusklađenih rubova. */ .hero.wp-block-group, .uvod.wp-block-group, .problemi.wp-block-group, .proces.wp-block-group, .usluge.wp-block-group, .cta.wp-block-group{ max-width:none; } .hero.wp-block-group > *, .uvod.wp-block-group > *, .problemi.wp-block-group > *, .proces.wp-block-group > *, .usluge.wp-block-group > *, .cta.wp-block-group > *{ margin-left:0; margin-right:0; } /* iznimke koje moraju ostati centrirane unutar svoje sekcije */ .cta-sub{margin-left:auto !important;margin-right:auto !important;} html,body{ background-color:#F7F3EE !important; color:#2C3E35 !important; font-family:'Karla',sans-serif; overflow-x:hidden; scroll-behavior:smooth; forced-color-adjust:none; -webkit-text-size-adjust:100%; } /* WordPress dodaje vlastite klase na ; ne diramo layout zbog njih */ .admin-bar nav{ top:32px; } @media (max-width: 600px){ .admin-bar nav{ top:46px; } } a{ color:inherit; } img{ max-width:100%; height:auto; } #o-meni,#usluge,#zakazi,#kontakt{ scroll-margin-top:90px; } /* ── NAV ──────────────────────────────────────────────── */ nav.site-nav{ position:fixed;top:0;left:0;right:0;z-index:500; padding:1.4rem max(var(--gaia-gutter), calc((100% - var(--gaia-wide)) / 2)); display:flex;align-items:center;justify-content:space-between;gap:1.5rem; transition:padding .35s,background .35s,box-shadow .35s; /* Uvijek neprozirna pozadina: header mora biti čitljiv na svakoj stranici, neovisno o tome je li sekcija ispod svijetla ili tamna (npr. .page-hero je uvijek tamnozelen na unutarnjim stranicama). Bez ovoga, taman tekst loga/navigacije postaje nevidljiv dok stranica nije scrollana. */ background-color:#F7F3EE; box-shadow:0 1px 0 rgba(44,62,53,.06); } nav.site-nav.sc{ padding:1rem max(var(--gaia-gutter), calc((100% - var(--gaia-wide)) / 2)); box-shadow:0 1px 0 rgba(44,62,53,.1); } .logo, .custom-logo-link{ display:flex;align-items:center; text-decoration:none; } .logo img, .custom-logo-link img{ height:48px;width:auto; display:block; } .logo-fallback-text{ font-family:'Lora',serif;font-size:1.2rem;letter-spacing:.1em;color:#2C3E35; white-space:nowrap; } .logo{flex-shrink:0;} .logo-fallback-text span{color:#B5926A;} .nav-links{display:flex;gap:1.6rem;list-style:none;align-items:center;} .nav-links li{list-style:none;} .nav-links a{ text-decoration:none; color:rgba(44,62,53,.5); font-size:.7rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase; transition:color .2s;white-space:nowrap; } .nav-links a:hover{color:#2C3E35;} .nav-links .nav-cta a, .nav-links a.nav-cta{ border:1px solid #B5926A; color:#B5926A !important; padding:.45rem 1.4rem; border-radius:2rem; transition:background .2s,color .2s !important; } .nav-links .nav-cta a:hover, .nav-links a.nav-cta:hover{background-color:#B5926A !important;color:#F7F3EE !important;} .menu-toggle{ display:none; background:none;border:none;cursor:pointer; color:#2C3E35;font-size:1.6rem; } /* ── HERO ─────────────────────────────────────────────── */ .hero{ min-height:100vh; background-color:#F7F3EE; display:flex;flex-direction:column;justify-content:center; padding:10rem var(--gaia-gutter) 7rem; position:relative; overflow:hidden; } .hero-deco{ position:absolute;right:max(3%, calc((100% - var(--gaia-content)) / 2));top:50%;transform:translateY(-52%); font-family:'Lora',serif; font-size:clamp(18rem,32vw,30rem); font-weight:400;font-style:italic; color:rgba(181,146,106,.06); line-height:1;pointer-events:none;user-select:none; } /* Hero sadržaj: centriran na container širinu; unutar njega tekst je lijevo poravnat (namjerni dizajn), ali cijeli stupac je poravnat s ostalim sekcijama po istoj lijevoj osi. */ .hero-inner{ width:100%; max-width:var(--gaia-content); margin-left:auto;margin-right:auto; position:relative;z-index:1; } .hero-tag,.hero-h1,.hero-body,.hero-quote,.hero-body2{max-width:680px;} .hero-tag{ display:inline-flex;align-items:center;gap:.8rem; font-size:.65rem;letter-spacing:.15em;text-transform:uppercase; color:#B5926A;margin-bottom:2.4rem; opacity:0;animation:up .7s .25s ease forwards; } .hero-tag::before{content:'';width:2rem;height:1px;background:#B5926A;} .hero-h1{ font-family:'Lora',serif; font-size:clamp(3rem,6vw,5.5rem); font-weight:400;line-height:1.08; color:#2C3E35; margin-bottom:2rem; opacity:0;animation:up .8s .4s ease forwards; } .hero-h1 em{font-style:italic;color:#B5926A;} .hero-body{ font-size:1rem;line-height:1.85; color:rgba(44,62,53,.75);font-weight:300; max-width:44ch; opacity:0;animation:up .8s .55s ease forwards; } .hero-quote{ font-family:'Lora',serif; font-size:1.08rem;font-style:italic; color:rgba(44,62,53,.58); border-left:2px solid #B5926A; padding-left:1.4rem; margin:1.8rem 0 1.8rem; max-width:40ch; opacity:0;animation:up .8s .68s ease forwards; } .hero-body2{ font-size:1rem;line-height:1.85; color:rgba(44,62,53,.75);font-weight:300; max-width:44ch; margin-bottom:3rem; opacity:0;animation:up .8s .78s ease forwards; } .hero-btns{ display:flex;gap:1rem;align-items:center;flex-wrap:wrap; opacity:0;animation:up .8s .9s ease forwards; } .btn-fill{ background-color:#2C3E35;color:#F7F3EE; padding:.9rem 2.4rem; border-radius:3rem; font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; font-weight:400;text-decoration:none; display:inline-block; transition:background .25s,transform .2s; } .btn-fill:hover{background-color:#B5926A;transform:translateY(-2px);color:#F7F3EE;} .btn-ghost{ color:rgba(44,62,53,.5); font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; text-decoration:none; border-bottom:1px solid rgba(44,62,53,.2);padding-bottom:2px; transition:color .2s,border-color .2s; } .btn-ghost:hover{color:#2C3E35;border-color:#2C3E35;} .hero-meta{ position:absolute;bottom:0;left:0;right:0; padding:1.4rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)) !important; display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:.5rem; font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; color:rgba(44,62,53,.3); background-color:rgba(247,243,238,.9); border-top:1px solid rgba(44,62,53,.07); opacity:0;animation:fadein 1s 1.1s ease forwards; } .hero-meta p{margin:0;} .hero-meta-price{ font-family:'Lora',serif; font-size:1.05rem;font-weight:400; color:#B5926A;letter-spacing:0;text-transform:none; } /* ── MARQUEE ───────────────────────────────────────────── */ .marquee{ background-color:#2C3E35; padding:.85rem 0;overflow:hidden; } .marquee-inner{ display:flex;white-space:nowrap; animation:scroll 22s linear infinite; } .marquee-inner span{ font-size:.6rem;letter-spacing:.22em;text-transform:uppercase; color:rgba(247,243,238,.35);padding:0 2.4rem; } .marquee-inner em{color:#B5926A;font-style:normal;} @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ── SECTION SHARED ────────────────────────────────────── */ /* Zajednička horizontalna margina koja centrira sadržaj svake sekcije na --gaia-content širinu. Koristi se kao lijevi/desni padding na svakoj full-width sekciji, pa su svi rubovi sadržaja poravnati po istoj osi. */ .section-label{ font-size:.6rem;letter-spacing:.22em;text-transform:uppercase; color:#B5926A;display:block;margin-bottom:.9rem; } .section-h2{ font-family:'Lora',serif; font-size:clamp(2rem,3.5vw,3.2rem); font-weight:400;line-height:1.15;color:#2C3E35; } .section-h2 em{font-style:italic;color:#B5926A;} /* ── UVOD ──────────────────────────────────────────────── */ .uvod{ background-color:#F7F3EE; padding:8rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)); display:grid;grid-template-columns:260px 1fr;gap:6rem;align-items:start; border-bottom:1px solid rgba(44,62,53,.1); } .uvod-name{ font-family:'Lora',serif; font-size:.95rem;font-weight:400; color:#2C3E35;line-height:1.7; border-top:1px solid rgba(44,62,53,.12); padding-top:1rem;margin-top:.6rem; } .uvod-p{ font-size:.98rem;line-height:1.9; color:rgba(44,62,53,.75);font-weight:300;max-width:58ch; } .uvod-p + .uvod-p{margin-top:1.3rem;} /* ── PROBLEMI ──────────────────────────────────────────── */ .problemi{ background-color:#2C3E35; padding:8rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)); } .problemi .section-label{color:rgba(247,243,238,.35);} .problemi .section-h2{color:#F7F3EE;} .problemi .section-h2 em{color:#B5926A;} .prob-head{ display:grid;grid-template-columns:260px 1fr; gap:6rem;margin-bottom:4rem;align-items:end; } .prob-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem; } .prob{ background-color:rgba(247,243,238,.04); border-radius:1rem; padding:1.6rem 1.4rem; position:relative;overflow:hidden; transition:background .3s,transform .25s; } .prob:hover{ background-color:rgba(181,146,106,.12); transform:translateY(-3px); } .prob-n{ font-family:'Lora',serif;font-size:.72rem; color:rgba(181,146,106,.4);display:block;margin-bottom:.6rem; } .prob-t{font-size:.85rem;color:rgba(247,243,238,.75);line-height:1.5;font-weight:300;margin:0;} /* ── PROCES ────────────────────────────────────────────── */ .proces{ background-color:#F7F3EE; padding:8rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)); border-bottom:1px solid rgba(44,62,53,.1); } .proc-head{ display:grid;grid-template-columns:260px 1fr; gap:6rem;margin-bottom:4rem;align-items:end; } .proc-steps{ display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem; } .ps{ background-color:rgba(44,62,53,.04); border-radius:1.2rem; padding:2.4rem 2rem 2rem; position:relative;overflow:hidden; transition:background .3s,transform .25s; } .ps:hover{ background-color:rgba(181,146,106,.08); transform:translateY(-3px); } .ps-n{ font-family:'Lora',serif;font-size:3rem;font-weight:400; color:rgba(181,146,106,.2);line-height:1;display:block;margin-bottom:1.4rem; } .ps h4{ font-size:.75rem;letter-spacing:.1em;text-transform:uppercase; color:#2C3E35;margin-bottom:.8rem;font-weight:500; } .ps p{font-size:.85rem;line-height:1.75;color:rgba(44,62,53,.68);font-weight:300;margin:0;} /* ── USLUGE ────────────────────────────────────────────── */ .usluge{ background-color:#F7F3EE; display:grid;grid-template-columns:1fr 1fr; gap:2rem; padding:6rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)) 8rem; border-bottom:1px solid rgba(44,62,53,.1); } .usl{ background-color:#2C3E35; border-radius:1.6rem; padding:3.5rem; position:relative;overflow:hidden; transition:transform .3s; } .usl:hover{transform:translateY(-4px);} .usl-n{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(181,146,106,.6);display:block;margin-bottom:2rem;} .usl-h3{ font-family:'Lora',serif; font-size:clamp(1.7rem,2.2vw,2.2rem); font-weight:400;line-height:1.2;color:#F7F3EE;margin-bottom:1.4rem; } .usl-p{font-size:.9rem;line-height:1.82;color:rgba(247,243,238,.55);font-weight:300;margin-bottom:2.8rem;} .usl-price{ border-top:1px solid rgba(247,243,238,.1);padding-top:1.6rem; display:flex;align-items:baseline;gap:.6rem; } .usl-eur{font-family:'Lora',serif;font-size:2.8rem;font-weight:400;color:#B5926A;line-height:1;} .usl-det{font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,243,238,.3);line-height:1.6;} /* ── CTA ───────────────────────────────────────────────── */ .cta{ background-color:#2C3E35; padding:9rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)); text-align:center; position:relative;overflow:hidden; } .cta > *{position:relative;z-index:1;} .cta::before{ content:'';position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); width:600px;height:600px; border:1px solid rgba(247,243,238,.04); border-radius:50%;pointer-events:none; } .cta::after{ content:'';position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); width:360px;height:360px; border:1px solid rgba(247,243,238,.06); border-radius:50%;pointer-events:none; } .cta .section-label{color:rgba(247,243,238,.3);} .cta-h2{ font-family:'Lora',serif; font-size:clamp(2.4rem,5vw,5rem); font-weight:400;line-height:1.1;color:#F7F3EE; margin:1rem 0 1.4rem; } .cta-h2 em{font-style:italic;color:#B5926A;} .cta-sub{ font-size:.98rem;line-height:1.85; color:rgba(247,243,238,.5);font-weight:300; max-width:42ch;margin:0 auto 3.2rem; } .btn-terra{ background-color:#B5926A;color:#F7F3EE; padding:1rem 3rem;border-radius:3rem; font-size:.72rem;letter-spacing:.15em;text-transform:uppercase; font-weight:400;text-decoration:none; display:inline-block; transition:background .25s,transform .2s; } .btn-terra:hover{background-color:#F7F3EE;color:#2C3E35;transform:translateY(-2px);} .cta-contacts{ display:flex;justify-content:center;gap:2.8rem;flex-wrap:wrap; margin-top:2.8rem; font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; } .cta-contacts p{margin:0;} .cta-contacts a,.cta-contacts span{ color:rgba(247,243,238,.3);text-decoration:none; display:flex;align-items:center;gap:.5rem; transition:color .2s; } .cta-contacts a:hover{color:#B5926A;} /* ── FOOTER ────────────────────────────────────────────── */ footer.site-footer{ background-color:#2C3E35; border-top:1px solid rgba(247,243,238,.08); padding:2rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)); display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem; } .f-logo img{height:36px;width:auto;opacity:.5;filter:brightness(10);} .f-logo img:hover{opacity:.8;} .f-logo-fallback{font-family:'Lora',serif;font-size:.95rem;letter-spacing:.1em;color:rgba(247,243,238,.3);} .f-copy{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,243,238,.18);} .f-links{display:flex;gap:1.8rem;list-style:none;} .f-links a{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,243,238,.18);text-decoration:none;transition:color .2s;} .f-links a:hover{color:rgba(247,243,238,.5);} /* ── ANIM ──────────────────────────────────────────────── */ @keyframes up{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}} @keyframes fadein{from{opacity:0;}to{opacity:1;}} /* Scroll-reveal elementi. VAŽNO: skrivamo ih (opacity:0) SAMO ako je JavaScript aktivan (klasa .gaia-js na , dodana odmah čim se JS izvrši). Ako JS zakaže ili je onemogućen, .r ostaje potpuno vidljiv. */ .r{transition:opacity .75s ease,transform .75s ease;} .gaia-js .r{opacity:0;transform:translateY(24px);} .gaia-js .r.in{opacity:1;transform:none;} /* Reduced motion: nikakve animacije, sav sadržaj odmah vidljiv. Ovo gasi i hero "animation:up/fadein forwards" i .r reveal. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .hero-tag,.hero-h1,.hero-body,.hero-quote,.hero-body2,.hero-btns,.hero-meta, .gaia-js .r,.r{ opacity:1 !important; transform:none !important; animation:none !important; } } /* ── WORDPRESS / GUTENBERG GENERIC CONTENT tipografija ── Širina i padding containera rješavaju .page-content i .gaia-narrow; ovdje ostaje samo generička tipografija za sadržaj unutar .entry-content. */ .entry-content h1,.entry-content h2,.entry-content h3{ font-family:'Lora',serif;color:#2C3E35;margin:2rem 0 1rem; } .entry-content a{color:#B5926A;text-decoration:underline;} .entry-content img{border-radius:1rem;margin:1.5rem 0;} /* ── RESPONSIVE ────────────────────────────────────────── */ @media(max-width:960px){ :root{ --gaia-gutter:2rem; } .uvod,.prob-head,.proc-head{grid-template-columns:1fr;gap:2.5rem;} .prob-grid{grid-template-columns:repeat(2,1fr);} .proc-steps{grid-template-columns:1fr 1fr;} .usluge{grid-template-columns:1fr;} .nav-links{display:none;} .menu-toggle{display:block;} .hero-meta{flex-direction:column;gap:.3rem;text-align:center;align-items:flex-start;} } @media(max-width:560px){ :root{ --gaia-gutter:1.4rem; } .prob-grid,.proc-steps{grid-template-columns:1fr;} .hero{padding:8rem var(--gaia-gutter) 6rem;} .uvod,.problemi,.proces{padding-top:5rem;padding-bottom:5rem;} .usluge{padding-top:4rem;padding-bottom:5rem;} .cta{padding-top:6rem;padding-bottom:6rem;} } /* mobile nav drawer (simple toggle, see assets/js/main.js) */ @media(max-width:960px){ .nav-links.open{ display:flex;flex-direction:column; position:fixed;top:0;right:0;bottom:0; width:75%;max-width:320px; background-color:#F7F3EE; padding:6rem 2rem 2rem; box-shadow:-10px 0 30px rgba(44,62,53,.15); gap:1.6rem; align-items:flex-start; z-index:600; } } /* ============================================================ VIŠESTRANIČNI ELEMENTI (dodano u multi-page verziji) ============================================================ */ /* ── Univerzalni container helper za page sadržaj ── */ .gaia-section{ padding:6rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)); } .gaia-section--tight{ padding-top:4rem;padding-bottom:4rem; } .gaia-narrow{ max-width:1120px;margin-left:auto;margin-right:auto; } /* ── PAGE HERO (unutarnje stranice) ── */ .page-hero{ background-color:#2C3E35; padding:9rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)) 3rem; position:relative;overflow:hidden; } .page-hero-inner{max-width:var(--gaia-content);margin:0 auto;position:relative;z-index:1;} .page-hero .eyebrow{ font-size:.65rem;letter-spacing:.22em;text-transform:uppercase; color:#B5926A;display:block;margin-bottom:1.2rem; } .page-hero h1{ font-family:'Lora',serif;font-weight:400; font-size:clamp(2.4rem,4.5vw,4rem);line-height:1.1; color:#F7F3EE;max-width:20ch; } .page-hero h1 em{font-style:italic;color:#B5926A;} .page-hero p.lead, .page-hero .lead{ margin-top:1.6rem;max-width:52ch; font-size:1.05rem;line-height:1.8;color:rgba(247,243,238,.7);font-weight:300; } /* Kad uvod dolazi iz Gutenberga (div.lead s odlomcima unutra) */ .page-hero .lead p{ font-size:1.05rem;line-height:1.8;color:rgba(247,243,238,.7);font-weight:300; margin:0 0 .8rem; } .page-hero .lead p:last-child{margin-bottom:0;} .page-hero .deco{ position:absolute;right:max(2%, calc((100% - var(--gaia-content)) / 2));top:50%; transform:translateY(-50%); font-family:'Lora',serif;font-style:italic;font-weight:400; font-size:clamp(14rem,26vw,24rem);line-height:1; color:rgba(181,146,106,.08);pointer-events:none;user-select:none; } /* ── Prozni sadržaj stranica ── Vanjski container je širok (--gaia-wide) da stranica na desktopu ne izgleda kao uska mobilna kolona s ogromnim praznim rubovima. Sam tekst (paragrafi/liste) zadržava ugodnu mjeru čitljivosti preko max-width na izravnoj djeci, dok naslovi, slike i kolone (image+tekst) mogu koristiti punu širinu containera. */ .page-content{ padding:3rem max(var(--gaia-gutter), calc((100% - var(--gaia-wide)) / 2)) 5rem; background-color:#F7F3EE; } .page-content .entry-content > p, .page-content .entry-content > ul, .page-content .entry-content > ol, .page-content .entry-content > .wp-block-quote, .page-content .entry-content > .wp-block-list{ max-width:760px; } .page-content .gaia-narrow > *{margin-bottom:1.3rem;} .page-content h2{ font-family:'Lora',serif;font-weight:400; font-size:clamp(1.6rem,2.6vw,2.2rem);color:#2C3E35; margin-top:2.6rem;margin-bottom:1rem;line-height:1.25; } .page-content h2 em{font-style:italic;color:#B5926A;} .page-content h3{ font-family:'Lora',serif;font-weight:500; font-size:1.2rem;color:#2C3E35;margin-top:2rem;margin-bottom:.6rem; } .page-content p{ font-size:1rem;line-height:1.85;color:rgba(44,62,53,.8);font-weight:300; } .page-content ul{ list-style:none;margin:1.2rem 0;padding:0; } .page-content ul li{ position:relative;padding-left:1.6rem;margin-bottom:.7rem; font-size:1rem;line-height:1.7;color:rgba(44,62,53,.8);font-weight:300; } .page-content ul li::before{ content:'';position:absolute;left:0;top:.65em; width:7px;height:7px;border-radius:50%;background:#B5926A; } .page-content blockquote{ border-left:2px solid #B5926A;padding:1rem 0 1rem 1.6rem;margin:2rem 0; font-family:'Lora',serif;font-style:italic;font-size:1.15rem; color:rgba(44,62,53,.7);line-height:1.6; } .page-content strong{font-weight:500;color:#2C3E35;} /* ── Split sekcija: tekst + fotografija ── */ .split{ display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center; padding:6rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)); } .split.reverse .split-media{order:2;} .split-media img{ width:100%;height:100%;object-fit:cover;border-radius:1.4rem; display:block; } .split-media{ border-radius:1.4rem;overflow:hidden; aspect-ratio:4/5;max-height:620px; } .split-body .eyebrow{ font-size:.65rem;letter-spacing:.22em;text-transform:uppercase; color:#B5926A;display:block;margin-bottom:1rem; } .split-body h2{ font-family:'Lora',serif;font-weight:400; font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.2;color:#2C3E35;margin-bottom:1.4rem; } .split-body h2 em{font-style:italic;color:#B5926A;} .split-body p{font-size:1rem;line-height:1.85;color:rgba(44,62,53,.8);font-weight:300;margin-bottom:1rem;} .split.on-dark{background-color:#2C3E35;} .split.on-dark .split-body h2{color:#F7F3EE;} .split.on-dark .split-body p{color:rgba(247,243,238,.7);} /* ── POPRAVAK: Usluge kartice (dvije jednake, 48% širine) ── */ .usluge{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem;align-items:stretch; padding:6rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)) 8rem; background-color:#F7F3EE; } .usl{ background-color:#2C3E35;border-radius:1.6rem;padding:3rem; display:flex;flex-direction:column;min-width:0; position:relative;overflow:hidden;transition:transform .3s; } .usl:hover{transform:translateY(-4px);} .usl-n{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(181,146,106,.7);display:block;margin-bottom:1.4rem;} .usl-h3{ font-family:'Lora',serif;font-weight:400;line-height:1.2; font-size:clamp(1.5rem,2vw,1.9rem);color:#F7F3EE;margin-bottom:1.2rem; overflow-wrap:break-word; } .usl-p{font-size:.92rem;line-height:1.75;color:rgba(247,243,238,.6);font-weight:300;margin-bottom:1.8rem;flex-grow:1;} .usl-meta{ display:flex;gap:1.4rem;flex-wrap:wrap;margin-bottom:1.8rem; padding-top:1.4rem;border-top:1px solid rgba(247,243,238,.12); } .usl-meta div{display:flex;flex-direction:column;gap:.2rem;} .usl-meta .k{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,243,238,.4);} .usl-meta .v{font-family:'Lora',serif;font-size:1.5rem;color:#B5926A;line-height:1;} .usl-meta .v-sm{font-family:'Lora',serif;font-size:1rem;color:#F7F3EE;line-height:1.2;} .usl .btn-inline{ align-self:flex-start; background-color:#B5926A;color:#F7F3EE;text-decoration:none; padding:.8rem 1.8rem;border-radius:3rem; font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; transition:background .25s,transform .2s; } .usl .btn-inline:hover{background-color:#F7F3EE;color:#2C3E35;transform:translateY(-2px);} /* ── Kontakt stranica: forma + info ── */ .contact-wrap{ display:grid;grid-template-columns:1.2fr .8fr;gap:4rem;align-items:start; padding:5rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)) 7rem; background-color:#F7F3EE; } .contact-form{background:#fff;border-radius:1.4rem;padding:2.6rem;box-shadow:0 10px 40px rgba(44,62,53,.06);} .contact-form h2{font-family:'Lora',serif;font-weight:400;font-size:1.6rem;color:#2C3E35;margin-bottom:.4rem;} .contact-form .form-intro{font-size:.9rem;color:rgba(44,62,53,.6);margin-bottom:1.8rem;font-weight:300;} .gaia-field{margin-bottom:1.3rem;} .gaia-field label{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(44,62,53,.6);margin-bottom:.5rem;} .gaia-field label .req{color:#B5926A;} .gaia-field input,.gaia-field textarea{ width:100%;border:1px solid rgba(44,62,53,.15);border-radius:.6rem; padding:.85rem 1rem;font-family:'Karla',sans-serif;font-size:.95rem;color:#2C3E35; background:#F7F3EE;transition:border-color .2s; } .gaia-field input:focus,.gaia-field textarea:focus{outline:none;border-color:#B5926A;} .gaia-field textarea{min-height:130px;resize:vertical;} .gaia-consent{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1.6rem;font-size:.82rem;color:rgba(44,62,53,.7);line-height:1.5;font-weight:300;} .gaia-consent input{margin-top:.2rem;flex-shrink:0;} .gaia-consent a{color:#B5926A;} .gaia-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .btn-submit{ background-color:#2C3E35;color:#F7F3EE;border:none;cursor:pointer; padding:1rem 2.6rem;border-radius:3rem; font-family:'Karla',sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; transition:background .25s,transform .2s; } .btn-submit:hover{background-color:#B5926A;transform:translateY(-2px);} .form-notice{padding:1rem 1.2rem;border-radius:.6rem;margin-bottom:1.4rem;font-size:.9rem;line-height:1.5;} .form-notice.success{background:rgba(122,155,122,.15);color:#2C3E35;border:1px solid rgba(122,155,122,.4);} .form-notice.error{background:rgba(181,100,80,.12);color:#8a3d2c;border:1px solid rgba(181,100,80,.3);} /* kontakt info kartica */ .contact-info{padding-top:1rem;} .contact-info h3{font-family:'Lora',serif;font-weight:400;font-size:1.4rem;color:#2C3E35;margin-bottom:1.6rem;} .contact-info .ci-item{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.4rem;} .contact-info .ci-item svg{flex-shrink:0;margin-top:.2rem;color:#B5926A;} .contact-info .ci-item a,.contact-info .ci-item span{color:rgba(44,62,53,.8);text-decoration:none;font-size:.95rem;line-height:1.5;} .contact-info .ci-item a:hover{color:#B5926A;} .contact-info .ci-note{margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid rgba(44,62,53,.12);font-size:.9rem;color:rgba(44,62,53,.6);font-weight:300;line-height:1.6;} /* ── Galerija ── */ .gallery-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; padding:5rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)) 7rem; background-color:#F7F3EE; } .gallery-grid figure{margin:0;border-radius:1rem;overflow:hidden;aspect-ratio:4/3;} .gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s;} .gallery-grid figure:hover img{transform:scale(1.05);} /* ── Blog ── */ .blog-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:2rem; padding:5rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)) 7rem; background-color:#F7F3EE; } .blog-card{background:#fff;border-radius:1.2rem;overflow:hidden;box-shadow:0 8px 30px rgba(44,62,53,.05);transition:transform .3s;} .blog-card:hover{transform:translateY(-4px);} .blog-card .thumb{aspect-ratio:16/10;overflow:hidden;background:#EDE8DF;} .blog-card .thumb img{width:100%;height:100%;object-fit:cover;} .blog-card .card-body{padding:1.6rem;} .blog-card h3{font-family:'Lora',serif;font-weight:400;font-size:1.2rem;color:#2C3E35;margin-bottom:.6rem;line-height:1.3;} .blog-card h3 a{color:inherit;text-decoration:none;} .blog-card h3 a:hover{color:#B5926A;} .blog-card .meta{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#B5926A;margin-bottom:.8rem;} .blog-card p{font-size:.9rem;line-height:1.7;color:rgba(44,62,53,.7);font-weight:300;} .blog-empty{text-align:center;padding:4rem 0;color:rgba(44,62,53,.6);font-weight:300;} /* ── Zakažite termin: info kartica ── */ .termin-cards{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; padding:0 max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)) 3rem; background-color:#F7F3EE; } .termin-card{background:#fff;border-radius:1.2rem;padding:2rem;text-align:center;} .termin-card .big{font-family:'Lora',serif;font-size:2.4rem;color:#B5926A;line-height:1;margin-bottom:.4rem;} .termin-card .lbl{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(44,62,53,.5);} .termin-rules{ background-color:#F7F3EE; padding:0 max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)) 6rem; } .termin-rules .box{ max-width:var(--gaia-content);margin:0 auto; background:rgba(181,146,106,.08);border-left:3px solid #B5926A; border-radius:.8rem;padding:2rem; } .termin-rules h3{font-family:'Lora',serif;font-weight:500;color:#2C3E35;margin-bottom:.8rem;font-size:1.2rem;} .termin-rules p{font-size:.95rem;line-height:1.7;color:rgba(44,62,53,.75);font-weight:300;} /* ── Sekcija "kratko o Mariji" na početnoj (split) ── */ .about-home{ display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:center; padding:7rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)); background-color:#F7F3EE;border-bottom:1px solid rgba(44,62,53,.1); } .about-home-media{border-radius:1.4rem;overflow:hidden;aspect-ratio:4/5;max-height:560px;} .about-home-media img{width:100%;height:100%;object-fit:cover;object-position:center top;} .about-home .eyebrow{font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:#B5926A;display:block;margin-bottom:1rem;} .about-home h2{font-family:'Lora',serif;font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.2;color:#2C3E35;margin-bottom:1.4rem;} .about-home h2 em{font-style:italic;color:#B5926A;} .about-home p{font-size:1rem;line-height:1.85;color:rgba(44,62,53,.8);font-weight:300;margin-bottom:1.4rem;} .about-home .btn-ghost{color:#2C3E35;border-bottom:1px solid #B5926A;} /* dodatne responsive prilagodbe za nove elemente */ @media(max-width:960px){ .split,.about-home{grid-template-columns:1fr;gap:2.5rem;} .split.reverse .split-media{order:0;} .contact-wrap{grid-template-columns:1fr;gap:2.5rem;} .gallery-grid{grid-template-columns:repeat(2,1fr);} .blog-grid{grid-template-columns:repeat(2,1fr);} .termin-cards{grid-template-columns:1fr;} } @media(max-width:640px){ .usluge{grid-template-columns:1fr;} .gallery-grid{grid-template-columns:1fr 1fr;} .blog-grid{grid-template-columns:1fr;} .split-media,.about-home-media{aspect-ratio:4/3;} } /* ============================================================ NAV: višestranični izbornik + istaknuti CTA + submenu + hamburger ============================================================ */ .nav-right{display:flex;align-items:center;gap:1.6rem;flex-shrink:0;} .nav-cta-btn{ background-color:#B5926A;color:#F7F3EE;text-decoration:none; padding:.6rem 1.5rem;border-radius:2rem; font-size:.7rem;letter-spacing:.08em;text-transform:uppercase; transition:background .25s,transform .2s;white-space:nowrap; } .nav-cta-btn:hover{background-color:#2C3E35;transform:translateY(-2px);color:#F7F3EE;} /* Submenu (Usluge → Individualno savjetovanje / psihoterapija) */ .nav-links .menu-item-has-children{position:relative;} .nav-links .sub-menu{ position:absolute;top:calc(100% + .8rem);left:50%;transform:translateX(-50%) translateY(8px); background:#F7F3EE;min-width:240px;border-radius:.8rem; box-shadow:0 12px 40px rgba(44,62,53,.14); padding:.6rem;list-style:none;display:flex;flex-direction:column;gap:.2rem; opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;z-index:600; } .nav-links .menu-item-has-children:hover > .sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);} .nav-links .sub-menu li{list-style:none;} .nav-links .sub-menu a{ display:block;padding:.6rem .9rem;border-radius:.5rem; font-size:.72rem;letter-spacing:.06em;text-transform:none;color:rgba(44,62,53,.7); transition:background .2s,color .2s; } .nav-links .sub-menu a:hover{background:rgba(181,146,106,.12);color:#2C3E35;} /* mala strelica na parent stavci */ .nav-links .menu-item-has-children > a::after{content:' ⌄';opacity:.5;} @media(max-width:960px){ .nav-right{gap:1rem;} .nav-cta-btn{display:none;} /* CTA se seli u mobilni drawer */ .nav-links{display:none;} .menu-toggle{display:block;} .nav-links.open{ display:flex;flex-direction:column; position:fixed;top:0;right:0;bottom:0; width:78%;max-width:340px; background-color:#F7F3EE; padding:6rem 2rem 2rem; box-shadow:-10px 0 40px rgba(44,62,53,.18); gap:1.2rem;align-items:flex-start;z-index:600;overflow-y:auto; } .nav-links.open .sub-menu{ position:static;transform:none;opacity:1;visibility:visible; box-shadow:none;background:transparent;padding:.4rem 0 .4rem 1rem;min-width:0; } .nav-links.open .menu-item-has-children > a::after{content:'';} .nav-links.open a{font-size:.9rem;letter-spacing:.08em;} } /* ============================================================ FOOTER (višestupčani) ============================================================ */ .site-footer-full{ background-color:#2C3E35; padding:5rem max(var(--gaia-gutter), calc((100% - var(--gaia-wide)) / 2)) 2rem; } .footer-cols{ display:grid;grid-template-columns:1.6fr 1fr 1.1fr 1.1fr;gap:4rem; padding-bottom:3rem;border-bottom:1px solid rgba(247,243,238,.1); } .footer-brand .custom-logo,.footer-brand img{max-height:44px;width:auto;filter:brightness(0) invert(1);opacity:.85;margin-bottom:1rem;} .f-brand-text{font-family:'Lora',serif;font-size:1.2rem;letter-spacing:.08em;color:#F7F3EE;display:block;margin-bottom:1rem;} .f-brand-text span{color:#B5926A;} .footer-brand p{font-size:.92rem;line-height:1.8;color:rgba(247,243,238,.55);font-weight:300;max-width:34ch;} .footer-col h4{font-family:'Lora',serif;font-weight:500;font-size:1rem;color:#F7F3EE;margin-bottom:1.3rem;letter-spacing:.04em;} .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.85rem;} .footer-col ul li{list-style:none;line-height:1.5;} .footer-col ul a,.footer-col ul li{font-size:.92rem;color:rgba(247,243,238,.62);text-decoration:none;font-weight:300;transition:color .2s;} .footer-col ul a:hover{color:#B5926A;} .footer-col p{font-size:.92rem;color:rgba(247,243,238,.55);font-weight:300;line-height:1.7;margin-bottom:1.2rem;} .footer-cta{ display:inline-block;background-color:#B5926A;color:#F7F3EE;text-decoration:none; padding:.75rem 1.8rem;border-radius:2rem;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase; transition:background .25s,transform .2s;white-space:nowrap; } .footer-cta:hover{background-color:#F7F3EE;color:#2C3E35;transform:translateY(-2px);} .footer-bottom{ display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem; padding-top:2rem; } .footer-bottom span,.footer-bottom{font-size:.72rem;color:rgba(247,243,238,.35);letter-spacing:.04em;} .footer-bottom span a{color:rgba(247,243,238,.5);text-decoration:none;transition:color .2s;} .footer-bottom span a:hover{color:#B5926A;} .footer-legal{display:flex;gap:1.6rem;} .footer-legal a{color:rgba(247,243,238,.35);text-decoration:none;transition:color .2s;} .footer-legal a:hover{color:rgba(247,243,238,.7);} @media(max-width:960px){ .footer-cols{grid-template-columns:1fr 1fr;gap:2.5rem;} } @media(max-width:560px){ .footer-cols{grid-template-columns:1fr;gap:2rem;} .footer-bottom{flex-direction:column;align-items:flex-start;} } /* ============================================================ GUTENBERG BLOK-SEKCIJE (sadržaj iz post_content) Dizajn naslovnice i stranica sada dolazi iz Gutenberg blokova s ovim klasama, umjesto iz hardkodiranog PHP-a. ============================================================ */ /* Puna širina sekcija: pozadina ide od ruba do ruba, sadržaj centriran */ .gaia-hero-sekcija, .gaia-problemi-sekcija, .gaia-cta-sekcija{ padding:6rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)); margin-top:0;margin-bottom:0; } /* HERO (Naslovna) — tamnozelena podloga s diskretnim slovom G, isti vizualni motiv kao page-hero na unutarnjim stranicama. Riješeno isključivo CSS-om (pseudo-element), bez ikakve izmjene Gutenberg sadržaja. */ .gaia-hero-sekcija{ background-color:#2C3E35; padding-top:8rem;padding-bottom:6rem; position:relative;overflow:hidden; } .gaia-hero-sekcija::after{ content:'G'; position:absolute;right:max(2%, calc((100% - var(--gaia-content)) / 2));top:50%; transform:translateY(-50%); font-family:'Lora',serif;font-style:italic;font-weight:400; font-size:clamp(14rem,26vw,24rem);line-height:1; color:rgba(181,146,106,.08);pointer-events:none;user-select:none; z-index:0; } .gaia-hero-sekcija > *{position:relative;z-index:1;} .gaia-hero-sekcija h1{ font-family:'Lora',serif;font-weight:400; font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.1;color:#F7F3EE !important;margin:.5rem 0 1.5rem; } .gaia-hero-sekcija .wp-block-quote{ border-left:2px solid #B5926A;font-style:italic;color:#B5926A !important; font-family:'Lora',serif;font-size:1.15rem;margin:1.5rem 0;padding-left:1.4rem; } .gaia-hero-sekcija p{max-width:60ch;color:rgba(247,243,238,.75) !important;} .gaia-hero-sekcija p strong{color:#F7F3EE !important;} /* KRATKO O MARIJI */ .gaia-about-home{ padding:5rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)); background-color:#F7F3EE;border-top:1px solid rgba(44,62,53,.08); } .gaia-about-home .wp-block-image img{border-radius:1.4rem;width:100%;object-fit:cover;} .gaia-about-home h2{font-family:'Lora',serif;font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);color:#2C3E35;} /* PROBLEMI (tamnozelena sekcija) */ .gaia-problemi-sekcija{ background-color:#2C3E35;color:#F7F3EE; } .gaia-problemi-sekcija h2{color:#F7F3EE;font-family:'Lora',serif;font-weight:400;font-size:clamp(1.8rem,3.5vw,2.6rem);} .gaia-problemi-sekcija p{color:rgba(247,243,238,.7);} .gaia-problemi-sekcija .wp-block-list{ columns:2;column-gap:2.5rem;list-style:none;padding:0;margin-top:1.5rem; } .gaia-problemi-sekcija .wp-block-list li{ padding:.6rem 0 .6rem 1.5rem;position:relative;break-inside:avoid; color:rgba(247,243,238,.85);border-bottom:1px solid rgba(247,243,238,.08); } .gaia-problemi-sekcija .wp-block-list li::before{ content:'';position:absolute;left:0;top:1.1em;width:6px;height:6px;border-radius:50%;background:#B5926A; } /* USLUGE kartice */ .gaia-usluge-sekcija{ padding:5rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)); background-color:#F7F3EE; } .gaia-usluge-sekcija > h2, .gaia-proces-sekcija > h2{font-family:'Lora',serif;font-weight:400;font-size:clamp(1.8rem,3vw,2.4rem);color:#2C3E35;text-align:center;margin-bottom:2.5rem;} .gaia-usluga-kartica{ background-color:#2C3E35;border-radius:1.6rem;padding:2.6rem;height:100%; } .gaia-usluga-kartica h3{color:#F7F3EE;font-family:'Lora',serif;font-weight:400;font-size:1.6rem;margin-bottom:1rem;} .gaia-usluga-kartica p{color:rgba(247,243,238,.7);font-size:.95rem;line-height:1.7;} .gaia-usluga-kartica strong{color:#B5926A;} /* PROCES koraci */ .gaia-proces-sekcija{ padding:5rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)); background-color:#F7F3EE;border-top:1px solid rgba(44,62,53,.08); } .gaia-proces-sekcija h4{font-family:'Lora',serif;font-weight:500;font-size:1.15rem;color:#2C3E35;margin-bottom:.5rem;} .gaia-proces-sekcija p{font-size:.9rem;line-height:1.6;color:rgba(44,62,53,.7);} /* CTA sekcija */ .gaia-cta-sekcija{ background-color:#2C3E35;color:#F7F3EE;text-align:center; padding-top:6rem;padding-bottom:6rem; } .gaia-cta-sekcija h2{color:#F7F3EE;font-family:'Lora',serif;font-weight:400;font-size:clamp(2rem,4vw,3rem);margin-bottom:1rem;} .gaia-cta-sekcija p{color:rgba(247,243,238,.7);max-width:56ch;margin-left:auto;margin-right:auto;} .gaia-cta-sekcija a{color:#B5926A;} .gaia-cta-sekcija .wp-block-buttons{justify-content:center;margin-top:2rem;} /* Gumbi u Gutenberg blokovima. Blokovi koriste čisti WordPress default markup (bez custom klasa) da bi uvijek bili valjani u editoru. Stiliziramo ih preko wp-block-button i pozicije: prvi gumb = ispunjen (primarni), drugi = obrub (sekundarni). */ .wp-block-button .wp-block-button__link{ background-color:#B5926A;color:#F7F3EE;border-radius:3rem; padding:1rem 2.2rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase; border:1px solid #B5926A;transition:background .25s,transform .2s,color .2s; } .wp-block-button .wp-block-button__link:hover{background-color:#2C3E35;border-color:#2C3E35;color:#F7F3EE;transform:translateY(-2px);} /* Drugi gumb u istom bloku = ghost varijanta */ .wp-block-button:nth-child(2) .wp-block-button__link{ background:transparent;color:#2C3E35;border:1px solid #B5926A; } .wp-block-button:nth-child(2) .wp-block-button__link:hover{background:#B5926A;color:#F7F3EE;} /* Na TAMNIM sekcijama (cta, problemi) tekst ghost gumba je svijetli. Hero je SVIJETLA sekcija, pa ghost gumb koristi tamni tekst (default gore) i ostaje jasno čitljiv. */ .gaia-cta-sekcija .wp-block-button:nth-child(2) .wp-block-button__link, .gaia-problemi-sekcija .wp-block-button:nth-child(2) .wp-block-button__link{color:#F7F3EE;border-color:#B5926A;} .gaia-cta-sekcija .wp-block-button:nth-child(2) .wp-block-button__link:hover, .gaia-problemi-sekcija .wp-block-button:nth-child(2) .wp-block-button__link:hover{background:#B5926A;color:#2C3E35;} /* Hero ghost gumb: pozadina je sada tamna, tekst mora biti svijetao */ .gaia-hero-sekcija .wp-block-button:nth-child(2) .wp-block-button__link{color:#F7F3EE !important;border-color:#B5926A;background:transparent;} .gaia-hero-sekcija .wp-block-button:nth-child(2) .wp-block-button__link:hover{background:#B5926A;color:#F7F3EE !important;} /* Kolone razmak */ .gaia-about-home .wp-block-columns, .gaia-usluge-sekcija .wp-block-columns{gap:2.5rem;} /* Slike unutar sadržaja stranica */ .entry-content .wp-block-image img{border-radius:1.2rem;} @media(max-width:781px){ .gaia-problemi-sekcija .wp-block-list{columns:1;} } /* ============================================================ BLOG (lista, prazan prikaz, paginacija) ============================================================ */ .blog-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem; padding:4rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)); background:#F7F3EE; } .blog-card{background:#fff;border-radius:1.2rem;overflow:hidden;box-shadow:0 8px 30px rgba(44,62,53,.06);display:flex;flex-direction:column;} .blog-card .thumb{display:block;aspect-ratio:16/10;overflow:hidden;} .blog-card .thumb img{width:100%;height:100%;object-fit:cover;} .blog-card .card-body{padding:1.6rem;display:flex;flex-direction:column;gap:.6rem;} .blog-card .meta{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#B5926A;} .blog-card h3{font-family:'Lora',serif;font-weight:500;font-size:1.25rem;line-height:1.3;} .blog-card h3 a{color:#2C3E35;text-decoration:none;} .blog-card p{font-size:.9rem;color:rgba(44,62,53,.7);line-height:1.6;} .blog-more{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#B5926A;text-decoration:none;margin-top:.4rem;} .blog-empty-state{ text-align:center;padding:5rem max(var(--gaia-gutter), calc((100% - var(--gaia-content)) / 2)) 6rem; background:#F7F3EE; } .blog-empty-state h2{font-family:'Lora',serif;font-weight:400;font-size:clamp(1.8rem,3vw,2.4rem);color:#2C3E35;margin-bottom:1rem;} .blog-empty-state p{max-width:52ch;margin:0 auto 2rem;color:rgba(44,62,53,.7);line-height:1.7;} .blog-empty-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;} .blog-empty-cta .btn-fill,.blog-empty-cta .btn-ghost{ display:inline-block;text-decoration:none;padding:1rem 2.2rem;border-radius:3rem; font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;transition:all .25s; } .blog-empty-cta .btn-fill{background:#B5926A;color:#F7F3EE;border:1px solid #B5926A;} .blog-empty-cta .btn-fill:hover{background:#2C3E35;border-color:#2C3E35;} .blog-empty-cta .btn-ghost{background:transparent;color:#2C3E35;border:1px solid #B5926A;} .blog-empty-cta .btn-ghost:hover{background:#B5926A;color:#F7F3EE;} .blog-pagination{text-align:center;padding:0 5% 5rem;background:#F7F3EE;} .blog-pagination .page-numbers{display:inline-block;padding:.5rem .9rem;margin:0 .2rem;border-radius:.5rem;color:#2C3E35;text-decoration:none;font-size:.9rem;} .blog-pagination .page-numbers.current{background:#2C3E35;color:#F7F3EE;} /* ============================================================ POPRAVAK LAYOUTA GUTENBERG COLUMNS (v3.1) Rješava: korake 3+1, uske kartice usluga, container širine. Uzrok je bio što core/columns flex-wrap lomi kolone bez eksplicitne jednake širine, i što sekcije nisu imale dosljedan inner container. ============================================================ */ /* Dosljedan container: pozadina puna širina, sadržaj centriran i ograničen */ .gaia-hero-sekcija, .gaia-about-home, .gaia-problemi-sekcija, .gaia-usluge-sekcija, .gaia-proces-sekcija, .gaia-cta-sekcija{ padding-left:max(var(--gaia-gutter,2.5rem), calc((100% - var(--gaia-wide,1180px)) / 2)); padding-right:max(var(--gaia-gutter,2.5rem), calc((100% - var(--gaia-wide,1180px)) / 2)); } /* USLUGE: dvije jednake, široke kartice u jednom redu na desktopu */ .gaia-usluge-sekcija .wp-block-columns{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2rem; align-items:stretch; } .gaia-usluge-sekcija .wp-block-column{ width:auto !important; flex-basis:auto !important; margin:0 !important; min-width:0; } .gaia-usluga-kartica{ height:100%; padding:2.6rem 2.4rem; } .gaia-usluga-kartica h3{ overflow-wrap:break-word; word-break:normal; hyphens:none; } /* KORACI: četiri jednake kartice u jednom redu na desktopu */ .gaia-proces-sekcija .wp-block-columns{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.5rem; align-items:stretch; } .gaia-proces-sekcija .wp-block-column{ width:auto !important; flex-basis:auto !important; margin:0 !important; min-width:0; background:rgba(44,62,53,.04); border-radius:1rem; padding:1.8rem 1.6rem; } /* O MENI / ABOUT: slika + tekst, dvije kolone bez lomljenja */ .gaia-about-home .wp-block-columns{ display:grid; grid-template-columns:2fr 3fr; gap:2.5rem; align-items:center; } .gaia-about-home .wp-block-column{ width:auto !important; flex-basis:auto !important; margin:0 !important; min-width:0; } /* TERMIN: tri stupca (cijena/trajanje/oblik) ravnomjerno */ .entry-content .wp-block-columns{ gap:2rem; } /* Osiguraj da nijedan tekst u karticama ne curi van */ .gaia-usluga-kartica *, .gaia-proces-sekcija .wp-block-column *{ max-width:100%; overflow-wrap:break-word; } /* TABLET: usluge i koraci 2 stupca */ @media (max-width:1024px){ .gaia-usluge-sekcija .wp-block-columns{grid-template-columns:repeat(2, minmax(0, 1fr));} .gaia-proces-sekcija .wp-block-columns{grid-template-columns:repeat(2, minmax(0, 1fr));} .gaia-about-home .wp-block-columns{grid-template-columns:1fr;} } /* MOBITEL: sve jednostupčano */ @media (max-width:640px){ .gaia-usluge-sekcija .wp-block-columns, .gaia-proces-sekcija .wp-block-columns, .entry-content .wp-block-columns{grid-template-columns:1fr;} } /* ============================================================ PLUTAJUĆI GUMBI ZA BRZI KONTAKT (poziv + WhatsApp) Vidljivi na svakoj stranici, prate scroll. Cilj: posjetitelj koji dođe s oglasa ne mora tražiti kontakt — dostupan je jednim klikom. ============================================================ */ .gaia-quick-contact{ position:fixed;right:1.4rem;bottom:1.4rem;z-index:550; display:flex;flex-direction:column;gap:.8rem; align-items:center; } .gaia-qc-btn{ width:52px;height:52px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#F7F3EE;text-decoration:none; box-shadow:0 6px 20px rgba(44,62,53,.25); transition:transform .2s,box-shadow .2s; } .gaia-qc-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 26px rgba(44,62,53,.32);} .gaia-qc-whatsapp{background-color:#25D366;} .gaia-qc-call{background-color:#B5926A;} @media(max-width:640px){ .gaia-quick-contact{right:1rem;bottom:1rem;gap:.65rem;} .gaia-qc-btn{width:46px;height:46px;} .gaia-qc-btn svg{width:20px;height:20px;} } /* Iznad admin trake kad je korisnik prijavljen (32px desktop / 46px mobitel) */ .admin-bar .gaia-quick-contact{bottom:calc(1.4rem + 32px);} @media(max-width:782px){ .admin-bar .gaia-quick-contact{bottom:calc(1rem + 46px);} } /* ============================================================ CILJANO PORAVNANJE (O meni / Usluge / Transakcijska analiza) Klase su namjerno specifične — ne utječu na ostale core/columns ni core/group blokove nigdje drugdje na sajtu. ============================================================ */ /* O MENI: uvodna fotografija + tekst vertikalno centrirani jedno uz drugo. Koristi isti dokazani grid pristup kao .gaia-about-home (Naslovna), koji pouzdano radi bok-uz-bok bez oslanjanja na flex-wrap ponašanje. max-width:none sprječava da WordPress-ov automatski contentSize iz theme.json suzi sekciju nakon omatanja u group — zadržava prijašnju širinu. VAŽNO: selektor preko body.page-o-meni (WordPress automatska body_class klasa za tu stranicu) cilja prvi columns blok NEOVISNO o tome je li post_content već migriran u novu .gaia-about-intro klasu — radi odmah, bez čekanja na migraciju sadržaja. */ body.page-o-meni .entry-content .wp-block-columns:first-of-type, .gaia-about-intro .wp-block-columns{ display:grid; grid-template-columns:45fr 55fr; gap:2.5rem; align-items:center; } body.page-o-meni .entry-content .wp-block-columns:first-of-type .wp-block-column, .gaia-about-intro .wp-block-column{ width:auto !important; flex-basis:auto !important; margin:0 !important; min-width:0; } .gaia-about-intro{max-width:none;} @media(max-width:960px){ body.page-o-meni .entry-content .wp-block-columns:first-of-type, .gaia-about-intro .wp-block-columns{grid-template-columns:1fr;} } /* USLUGE / TRANSAKCIJSKA ANALIZA: uvodni tekst centriran iznad fotografije. Isti princip kao O meni gore: body-class selektor radi odmah, neovisno o tome je li post_content već migriran u .gaia-page-intro klasu. */ body.page-usluge .entry-content > p:first-of-type, body.page-transakcijska-analiza .entry-content > p:nth-of-type(-n+2), .gaia-page-intro{ max-width:740px; margin:0 auto 1.2rem; text-align:center; line-height:1.85; } body.page-usluge .entry-content > p:first-of-type ~ .wp-block-image, body.page-transakcijska-analiza .entry-content > p:nth-of-type(2) ~ .wp-block-image{ margin-top:.8rem; } .gaia-page-intro p{ line-height:1.85; margin-bottom:1.2rem; } .gaia-page-intro p:last-child{margin-bottom:0;} /* ============================================================ TRAKA POVJERENJA (Naslovna, odmah ispod herosa) 4 stvarne, provjerive činjenice — stručnost, članstva, fleksibilnost, transparentna cijena. Cilj: smanjiti neizvjesnost posjetitelja s oglasa prije nego dođe do CTA-a. ============================================================ */ .gaia-trust-strip{ padding:2.6rem max(var(--gaia-gutter), calc((100% - var(--gaia-wide)) / 2)); background-color:#F7F3EE; border-bottom:1px solid rgba(44,62,53,.08); } .gaia-trust-strip .wp-block-columns{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:2rem; } .gaia-trust-strip .wp-block-column{ width:auto !important; flex-basis:auto !important; margin:0 !important; min-width:0; text-align:center; border-left:1px solid rgba(44,62,53,.1); padding-left:1.5rem; } .gaia-trust-strip .wp-block-column:first-child{border-left:none;padding-left:0;} .gaia-trust-strip h4{ font-family:'Karla',sans-serif;font-weight:600; font-size:.72rem;letter-spacing:.08em;text-transform:uppercase; color:#B5926A;margin-bottom:.5rem; } .gaia-trust-strip p{ font-size:.9rem;color:#2C3E35;line-height:1.5;font-weight:400; } @media(max-width:960px){ .gaia-trust-strip .wp-block-columns{grid-template-columns:repeat(2, minmax(0,1fr));row-gap:1.6rem;} .gaia-trust-strip .wp-block-column:nth-child(3){border-left:none;padding-left:0;} } @media(max-width:560px){ .gaia-trust-strip .wp-block-columns{grid-template-columns:1fr;} .gaia-trust-strip .wp-block-column{border-left:none;padding-left:0;} } /* ============================================================ BLOG UVOD (uređiv sadržaj Blog stranice iz Gutenberga) Prikazuje se ispod zelenog herosa, iznad liste članaka. ============================================================ */ .gaia-blog-intro{ padding-top:3rem; padding-bottom:1rem; } .gaia-blog-intro .entry-content > p:first-child{ font-size:1.05rem; color:rgba(44,62,53,.75); }