/* ========================================================================== OMNIA – Varianta C (luksuzna / temna) Gradniki: lux-hero, lux-head, lux-split, lux-box, lux-team, lux-info, lux-faq, lux-final Nalaga se za omnia-elements.css (glej functions.php). ========================================================================== */ :root { --lux-dark: #2e2735; --lux-light: #faf8f5; --lux-gold: #e2d3c4; --lux-gold-dark: #c4b5a6; --lux-ink: #635471; --lux-ink-text: rgba(99, 84, 113, .78); --lux-font-body: 'Lora', serif; --lux-font-head: 'Niramit', sans-serif; } /* -------------------------------------------------------------------------- 1) Sekcijske vrstice (WPBakery vc_row) -------------------------------------------------------------------------- */ .vc_row.lux-sec, .wpb_row.lux-sec { padding-top: 104px; padding-bottom: 104px; } .vc_row.lux-dark, .wpb_row.lux-dark { background-color: var(--lux-dark) !important; } .vc_row.lux-light, .wpb_row.lux-light { background-color: var(--lux-light) !important; } /* Ozadje čez cel zaslon, vsebina ostane v 1170px containerju */ .truecad-container-main .vc_row.lux-dark, .truecad-container-main .wpb_row.lux-dark { box-shadow: 0 0 0 100vmax var(--lux-dark); clip-path: inset(0 -100vmax); } .truecad-container-main .vc_row.lux-light, .truecad-container-main .wpb_row.lux-light { box-shadow: 0 0 0 100vmax var(--lux-light); clip-path: inset(0 -100vmax); } /* Vrstica brez lastnih odmikov (hero, zakljucni CTA - gradnik ima svoj padding) */ .vc_row.lux-flush, .wpb_row.lux-flush { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Hero in zaključni CTA gresta čez cel zaslon */ .lux-hero, .lux-final { width: 100vw; margin-left: calc(50% - 50vw); box-sizing: border-box; } .truecad-container-main .vc_row:has(.lux-hero), .truecad-container-main .vc_row:has(.lux-final), .truecad-container-main .wpb_row:has(.lux-hero), .truecad-container-main .wpb_row:has(.lux-final) { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } /* -------------------------------------------------------------------------- 2) Tipografija znotraj gradnikov -------------------------------------------------------------------------- */ .lux-sec, .lux-hero, .lux-final { font-family: var(--lux-font-body); line-height: 1.75; } .lux-dark, .lux-hero, .lux-final { color: rgba(255, 255, 255, .72); } .lux-light { color: var(--lux-ink-text); } .lux-sec h2, .lux-sec h3, .lux-sec h4, .lux-hero h1, .lux-final h2 { font-family: var(--lux-font-head); font-weight: 700; line-height: 1.25; margin: 0 0 .5em; padding-bottom: 0; } /* razveljavi podčrtaj iz .section-title, če ostane na starih vnosih */ .lux-sec h2:after, .lux-final h2:after { content: none; } .lux-sec p, .lux-hero p, .lux-final p { margin: 0 0 1.1em; } .lux-dark h1, .lux-dark h2, .lux-dark h3, .lux-dark h4, .lux-hero h1, .lux-hero h2, .lux-hero h3, .lux-final h2, .lux-final h3, .lux-final h4 { color: #fff; } .lux-light h1, .lux-light h2, .lux-light h3, .lux-light h4 { color: var(--lux-ink); } /* Besedilne povezave - enotna barva po predlogi (#92663a), na svetli in temni podlagi. !important premaga tako temin "a:hover" kot ".entry-content a" iz Customizer > Dodatni CSS, ki se izpise inline na koncu . */ .lux-light p a, .lux-light li a, .lux-dark p a, .lux-dark li a, .lux-hero p a, .lux-final p a { color: #92663a !important; } .lux-light p a:hover, .lux-light li a:hover, .lux-dark p a:hover, .lux-dark li a:hover, .lux-hero p a:hover, .lux-final p a:hover { color: #92663a !important; text-decoration: underline; } /* -------------------------------------------------------------------------- 3) Gumbi -------------------------------------------------------------------------- */ .lux-btn, .lux-btn-o, .lux-sec .btn-primary-custom, .lux-hero .btn-primary-custom, .lux-final .btn-primary-custom { display: inline-block; font-family: var(--lux-font-head); font-weight: 700; font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; padding: 17px 44px; border-radius: 0; text-decoration: none; transition: .25s; } .lux-btn, .lux-sec .btn-primary-custom, .lux-hero .btn-primary-custom, .lux-final .btn-primary-custom { background: var(--lux-gold); color: var(--lux-dark) !important; border: 1px solid var(--lux-gold); } .lux-dark .lux-btn:hover, .lux-hero .lux-btn:hover, .lux-final .lux-btn:hover, .lux-dark .btn-primary-custom:hover, .lux-hero .btn-primary-custom:hover, .lux-final .btn-primary-custom:hover { background: transparent; color: var(--lux-gold) !important; border-color: var(--lux-gold); } .lux-light .lux-btn:hover, .lux-light .btn-primary-custom:hover { background: var(--lux-ink); color: #fff !important; border-color: var(--lux-ink); } .lux-btn-o { background: transparent; color: var(--lux-gold) !important; border: 1px solid rgba(226, 211, 196, .45); } .lux-btn-o:hover { background: var(--lux-gold); color: var(--lux-dark) !important; border-color: var(--lux-gold); } .lux-light .lux-btn-o { color: #92663a !important; border-color: rgba(99, 84, 113, .35); } .lux-light .lux-btn-o:hover { background: var(--lux-ink); color: #fff !important; border-color: var(--lux-ink); } .lux-btn-wrap { margin-top: 34px; } /* -------------------------------------------------------------------------- 4) Eyebrow + ornament -------------------------------------------------------------------------- */ .lux-eyebrow { font-family: var(--lux-font-head); font-size: 11.5px; letter-spacing: 3.4px; text-transform: uppercase; margin-bottom: 24px; } .lux-dark .lux-eyebrow, .lux-hero .lux-eyebrow, .lux-final .lux-eyebrow { color: var(--lux-gold); } .lux-light .lux-eyebrow { color: var(--lux-gold-dark); } .lux-orn { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; } .lux-orn span { flex: 0 0 40px; width: 40px; height: 1px; background: var(--lux-gold-dark); } .lux-orn i { flex: 0 0 7px; display: block; width: 7px; height: 7px; background: var(--lux-gold-dark); transform: rotate(45deg); } /* -------------------------------------------------------------------------- 5) Naslov sekcije (.lux-head) -------------------------------------------------------------------------- */ .lux-head { text-align: center; margin-bottom: 64px; } .lux-head h2 { font-size: 40px; letter-spacing: -.5px; margin-bottom: 16px; } .lux-head p { max-width: 740px; margin: 0 auto 1.1em; font-size: 16.5px; } .lux-head p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 6) Hero -------------------------------------------------------------------------- */ .lux-hero { position: relative; overflow: hidden; text-align: center; padding: 130px 24px 110px; background: radial-gradient(ellipse at 50% 0%, rgba(226, 211, 196, .14), transparent 62%), var(--lux-dark); } .lux-hero__bg { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: .2; filter: grayscale(35%); } .lux-hero__inner { position: relative; max-width: 900px; margin: 0 auto; } .lux-hero h1 { font-size: 60px; letter-spacing: -1px; margin-bottom: 18px; } .lux-lede { font-family: var(--lux-font-head); font-size: 20px; line-height: 1.45; color: var(--lux-gold); margin-bottom: 26px; } .lux-hero p { max-width: 720px; margin: 0 auto 20px; font-size: 16.5px; color: rgba(255, 255, 255, .68); } .lux-hero__text p:last-child { margin-bottom: 34px; } .lux-hair { width: 1px; height: 56px; background: linear-gradient(var(--lux-gold), transparent); margin: 44px auto 0; } /* -------------------------------------------------------------------------- 7) Split – slika + besedilo (izmenično) -------------------------------------------------------------------------- */ .lux-split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; margin-bottom: 96px; } .lux-split:last-child { margin-bottom: 0; } .lux-split--rev .lux-split__media { order: 2; } .lux-split__media { position: relative; } .lux-split__media img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; } .lux-split h3 { font-size: 30px; margin-bottom: 10px; } .lux-num { font-family: var(--lux-font-head); font-size: 13px; letter-spacing: 2.4px; color: var(--lux-gold-dark); margin-bottom: 12px; } .lux-quote { font-style: italic; font-size: 16px; line-height: 1.6; color: var(--lux-gold-dark); margin-bottom: 20px; } .lux-split__body > p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 8) Box – obrobljeno podrocje storitev -------------------------------------------------------------------------- */ .lux-box { border: 1px solid rgba(226, 211, 196, .28); padding: 46px 42px; height: 100%; box-sizing: border-box; } .lux-light .lux-box { border-color: rgba(99, 84, 113, .16); background: #fff; } .lux-box h3 { font-size: 24px; margin-bottom: 8px; } .lux-box__sub { font-size: 15px; line-height: 1.6; color: var(--lux-gold-dark); margin-bottom: 22px; } .lux-box > p:last-child, .lux-box > ul:last-child { margin-bottom: 0; } /* Vrstica z dvema enako visokima boxoma; razmik posnema c-duo (gap:56px) */ .vc_row.lux-duo, .wpb_row.lux-duo { display: flex; flex-wrap: wrap; } .vc_row.lux-duo > .wpb_column, .wpb_row.lux-duo > .wpb_column { display: flex; float: none; } .vc_row.lux-duo > .wpb_column > .vc_column-inner, .wpb_row.lux-duo > .wpb_column > .vc_column-inner { width: 100%; display: flex; flex-direction: column; padding-left: 13px; padding-right: 13px; } .vc_row.lux-duo > .wpb_column > .vc_column-inner > .wpb_wrapper, .wpb_row.lux-duo > .wpb_column > .vc_column-inner > .wpb_wrapper { flex: 1; display: flex; flex-direction: column; } .vc_row.lux-duo .lux-box, .wpb_row.lux-duo .lux-box, .vc_row.flex-row .lux-box { flex: 1; } /* -------------------------------------------------------------------------- 9) Seznami z zlato pusico (.lux-list + podedovan .check-list) -------------------------------------------------------------------------- */ .lux-sec .lux-list, .lux-sec .check-list, .lux-final .lux-list { list-style: none; padding: 0; margin: 16px 0 0; } .lux-sec .lux-list li, .lux-sec .check-list li, .lux-final .lux-list li { position: relative; padding-left: 26px; margin-bottom: 12px; font-size: 15.5px; line-height: 1.6; } .lux-sec .lux-list li:before, .lux-sec .check-list li:before, .lux-final .lux-list li:before { content: ""; position: absolute; left: 2px; top: 10px; width: 0; height: 0; font-size: 0; border-left: 6px solid var(--lux-gold-dark); border-top: 4px solid transparent; border-bottom: 4px solid transparent; color: transparent; } /* -------------------------------------------------------------------------- 10) Ekipa -------------------------------------------------------------------------- */ .lux-team { display: grid; grid-template-columns: repeat(var(--lux-team-cols, 4), 1fr); gap: 44px; } .lux-doc { text-align: center; } .lux-ring { width: 150px; height: 150px; margin: 0 auto 20px; position: relative; } .lux-ring a { display: block; width: 100%; height: 100%; } .lux-ring img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .lux-ring:after { content: ""; position: absolute; inset: -8px; border: 1px solid var(--lux-gold-dark); border-radius: 50%; } .lux-team .lux-doc__name { font-size: 16.5px; margin: 0 0 5px; line-height: 1.35; } .lux-doc__name a { color: inherit !important; } .lux-dark .lux-doc__name a:hover { color: var(--lux-gold) !important; } .lux-light .lux-doc__name a:hover { color: var(--lux-gold-dark) !important; } .lux-doc p { font-size: 13.5px; margin: 0; line-height: 1.5; } /* -------------------------------------------------------------------------- 11) Informacijski pas (naslovi, telefon, e-posta ...) -------------------------------------------------------------------------- */ .lux-info { display: grid; grid-template-columns: repeat(var(--lux-info-cols, 5), 1fr); gap: 34px; text-align: center; } .lux-info__item i { display: block; color: var(--lux-gold-dark); font-size: 22px; margin-bottom: 14px; } .lux-info__k { font-family: var(--lux-font-head); font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--lux-gold-dark); margin-bottom: 7px; } .lux-info__v { font-size: 14.5px; line-height: 1.6; } .lux-info__v a { color: inherit !important; } /* -------------------------------------------------------------------------- 12) FAQ (akordeon; JS ostane omnia-elements.js) -------------------------------------------------------------------------- */ .lux-faq { max-width: 840px; margin: 0 auto; } .lux-faq .faq-item { background: none; border: 0; border-bottom: 1px solid rgba(226, 211, 196, .22); border-radius: 0; box-shadow: none; margin: 0; overflow: visible; } .lux-light .lux-faq .faq-item { border-bottom-color: rgba(99, 84, 113, .16); } .lux-faq .faq-question { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 26px 0; cursor: pointer; } .lux-faq .faq-question h3 { margin: 0; font-family: var(--lux-font-head); font-weight: 700; font-size: 18px; line-height: 1.4; } .lux-faq .faq-icon { flex-shrink: 0; font-size: 13px; color: var(--lux-gold-dark); transition: .3s; } .lux-faq .faq-item.open .faq-icon { transform: rotate(180deg); } /* povozi trdi display-toggle iz omnia-elements.css -> mehka animacija */ .lux-faq.omnia-faq-wrap .faq-answer { display: block !important; max-height: 0 !important; padding: 0 !important; overflow: hidden !important; transition: max-height .35s ease, padding .35s ease; } .lux-faq.omnia-faq-wrap .faq-item.open .faq-answer { max-height: 600px !important; padding: 0 0 28px !important; } .lux-faq .faq-answer p { margin: 0; font-size: 15.5px; } /* -------------------------------------------------------------------------- 13) Zakljucni CTA -------------------------------------------------------------------------- */ .lux-final { text-align: center; padding: 96px 24px; background: radial-gradient(ellipse at 50% 100%, rgba(226, 211, 196, .13), transparent 62%), var(--lux-dark); } .lux-final__inner { max-width: 1170px; margin: 0 auto; } .lux-final h2 { font-size: 38px; margin-bottom: 16px; } .lux-final p { max-width: 640px; margin: 0 auto 34px; color: rgba(255, 255, 255, .7); } .lux-contacts { display: flex; justify-content: center; gap: 70px; flex-wrap: wrap; margin-top: 44px; } .lux-contacts__k { font-family: var(--lux-font-head); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--lux-gold); margin-bottom: 8px; } .lux-contacts a { font-family: var(--lux-font-head); font-size: 20px; color: #fff !important; text-decoration: none; } .lux-contacts a:hover { color: var(--lux-gold) !important; } /* -------------------------------------------------------------------------- 14) Odzivnost -------------------------------------------------------------------------- */ @media (max-width: 1199px) { .lux-hero h1 { font-size: 48px; } .lux-head h2 { font-size: 34px; } .lux-split { gap: 48px; } .lux-box { padding: 38px 32px; } .lux-info { gap: 24px; } } @media (max-width: 900px) { .vc_row.lux-sec, .wpb_row.lux-sec { padding-top: 64px; padding-bottom: 64px; } .lux-hero { padding: 80px 24px 70px; } .lux-hero h1 { font-size: 36px; } .lux-lede { font-size: 18px; } .lux-hair { height: 40px; margin-top: 32px; } .lux-head { margin-bottom: 44px; } .lux-head h2 { font-size: 30px; } .lux-split { grid-template-columns: 1fr; gap: 34px; margin-bottom: 56px; } .lux-split--rev .lux-split__media { order: 0; } .lux-split h3 { font-size: 25px; } .lux-box { padding: 32px 26px; } /* boxa se na mobilnem zlozita drug pod drugega */ .vc_row.lux-duo > .wpb_column:last-child, .wpb_row.lux-duo > .wpb_column:last-child { margin-top: 26px; } .lux-team { grid-template-columns: repeat(2, 1fr); gap: 34px; } .lux-info { grid-template-columns: 1fr; gap: 30px; } .lux-final { padding: 64px 24px; } .lux-final h2 { font-size: 30px; } .lux-contacts { gap: 34px; margin-top: 34px; } } @media (max-width: 480px) { .lux-hero h1 { font-size: 30px; } .lux-head h2 { font-size: 26px; } .lux-btn, .lux-btn-o, .lux-sec .btn-primary-custom, .lux-hero .btn-primary-custom, .lux-final .btn-primary-custom { padding: 15px 26px; font-size: 12.5px; letter-spacing: 1px; } .lux-team { grid-template-columns: 1fr; } }