/* SOURCE: assets/css/base/_variables.css */ /* /assets/css/base/_variables.css */ /* --- :ROOT - CSS SPREMENLJIVKE --- */ :root { --font-heading: 'Playfair Display', serif; --font-body: 'Montserrat', sans-serif; --color-text: #2c3e50; /* Temna, skoraj črna-modra */ --color-background: #fdfdfd; --color-primary-accent: #0804fc; /* NOVA GLAVNA BARVA */ --color-primary-accent-dark: #0603c9; /* Temnejši odtenek nove barve */ --color-white: #ffffff; --color-border: #e0e0e0; --spacing-xs: 0.25rem; --spacing-s: 0.5rem; --spacing-m: 1rem; --spacing-l: 2rem; --spacing-xl: 4rem; --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.05); --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.1); --transition-fast: 0.2s ease-in-out; --transition-medium: 0.5s ease-in-out; } /* SOURCE: assets/css/base/_reset.css */ /* /assets/css/base/_reset.css */ /* --- OSNOVNI STILI IN RESET --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); color: var(--color-text); background-color: var(--color-background); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Ta blok je bil odstranjen, ker je preprečeval drsenje. Nova, boljša logika je v datoteki pages/_homepage.css */ /* SOURCE: assets/css/base/_typography.css */ /* /assets/css/base/_typography.css */ h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; margin-bottom: var(--spacing-m); color: var(--color-primary-accent); /* SPREMEMBA: Vsi naslovi so sedaj v primarni barvi */ } p { margin-bottom: var(--spacing-m); } a { color: var(--color-primary-accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-accent-dark); } /* === DODAN POMOŽNI RAZRED ZA STILIRANJE BESEDILA === */ .text-accent-uppercase { color: var(--color-primary-accent); text-transform: uppercase; } /* SOURCE: assets/css/layout/_structure.css */ /* /assets/css/layout/_structure.css */ /* === OSNOVNA STRUKTURA PODSTRANI === */ .page-main-content { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); min-height: calc(100vh - 80px - 150px); } .container { max-width: 1100px; margin: 0 auto; padding: 0 var(--spacing-l); } .page-title { font-size: clamp(2.5rem, 6vw, 4rem); text-align: center; margin-bottom: var(--spacing-xl); color: var(--color-primary-accent); } .section-title { font-size: clamp(1.5rem, 4vw, 2rem); margin-top: var(--spacing-l); margin-bottom: var(--spacing-m); color: var(--color-text); border-left: 4px solid var(--color-primary-accent); padding-left: var(--spacing-m); } .intro-text { font-size: 1.25rem; font-style: italic; font-weight: 500; line-height: 1.6; margin-bottom: var(--spacing-l); color: #555; } .page-subtitle { font-size: clamp(1.1rem, 3vw, 1.4rem); text-align: center; max-width: 800px; margin: 0 auto var(--spacing-xl) auto; color: #555; } .text-section { margin-bottom: var(--spacing-l); } /* === SPLOŠNI STRUKTURNI ELEMENTI === */ .about-image { width: 100%; max-width: 400px; margin: 0 auto; position: static; /* Privzeta pozicija za mobilne naprave */ } .about-image img { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow-medium); } /* === SPREMEMBE TUKAJ === */ .grid-image { width: 100%; aspect-ratio: 1 / 1; /* SPREMEMBA: Zagotovi kvadratno razmerje */ background-size: cover; background-position: center; border-radius: 10px; box-shadow: var(--shadow-medium); transition: transform var(--transition-medium), box-shadow var(--transition-medium); } .grid-image:hover { transform: scale(1.03); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); } .highlight-quote { margin: var(--spacing-l) auto; padding: var(--spacing-l); border-left: 5px solid var(--color-primary-accent); background-color: rgba(8, 4, 252, 0.05); /* SPREMEMBA: Ujemanje z novo barvo */ border-radius: 0 8px 8px 0; } .highlight-quote p { font-size: 1.1rem; font-style: italic; font-weight: 500; margin-bottom: var(--spacing-m); } .highlight-quote cite { display: block; text-align: right; font-style: normal; font-weight: 600; } .concluding-statement { text-align: center; padding: var(--spacing-l); margin: var(--spacing-xl) 0; border: 1px solid var(--color-border); border-radius: 8px; background-color: var(--color-white); box-shadow: var(--shadow-light); } .concluding-statement p { margin-bottom: 0; font-size: 1.1rem; line-height: 1.8; text-transform: uppercase; letter-spacing: 0.5px; } .content-cta { text-align: center; margin-top: var(--spacing-xl); } .page-hero { padding: var(--spacing-l) 0; text-align: center; background-color: rgba(8, 4, 252, 0.05); /* SPREMEMBA: Ujemanje z novo barvo */ margin-bottom: var(--spacing-xl); } .page-hero .page-title { margin-bottom: var(--spacing-m); } .page-hero .page-subtitle { font-size: 1.1rem; max-width: 700px; margin: 0 auto; color: #555; font-style: normal; } /* --- KONTAKT IN ZEMLJEVID --- */ .contact-details { background-color: rgba(221, 226, 229, 0.2); padding: var(--spacing-l); border-radius: 8px; } .contact-info-item { margin-bottom: 1.5rem; } .contact-info-item .info-label { display: block; font-size: 0.9rem; font-weight: 600; color: #777; margin-bottom: var(--spacing-xs); } .contact-info-item .info-data { font-size: 1.1rem; margin: 0; } .contact-info-item .info-data a { word-break: break-all; } .map-placeholder { width: 100%; height: 300px; border-radius: 8px; overflow: hidden; margin-top: var(--spacing-l); background-color: #e9e9e9; box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); } .map-placeholder iframe { width: 100%; height: 100%; border: 0; } /* --- UTILNOSTI --- */ .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); } /* --- MEDIA QUERIES --- */ @media (max-width: 768px) { /* SPREMEMBA: Odstranjen min-height */ } @media (min-width: 768px) { /* SPREMEMBA: Odstranjen min-height */ } @media (min-width: 992px) { .about-image { max-width: 100%; position: sticky; /* Omogoči lepljivo pozicijo */ top: calc(var(--spacing-l) + 80px); /* Odmik od vrha + višina glave */ align-self: start; /* Zagotovi pravilno poravnavo znotraj grid celice */ } } /* SOURCE: assets/css/layout/_grids.css */ /* /assets/css/layout/_grids.css */ .about-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-l); align-items: flex-start; } .image-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-l); margin-bottom: var(--spacing-xl); } .services-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-l); } .blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-l); } .contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); } /* --- MEDIA QUERIES --- */ @media (max-width: 768px) { .image-grid, .services-grid, .blog-grid, .contact-grid { grid-template-columns: 1fr; } } @media (min-width: 768px) { /* Stili za večje tablice */ .image-grid { grid-template-columns: 1fr 1fr; } .services-grid { grid-template-columns: repeat(2, 1fr); } .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { /* Stili za namizje */ .about-grid { grid-template-columns: 1fr 2fr; gap: var(--spacing-xl); } .services-grid, .blog-grid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl); } .contact-grid { grid-template-columns: 1fr 1fr; align-items: flex-start; } } /* SOURCE: assets/css/components/_header.css */ /* /assets/css/components/_header.css */ /* --- GLAVA IN NAVIGACIJA --- */ .main-header { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-light); border-bottom: 1px solid var(--color-border); position: relative; /* Potrebno za z-index mobilnega menija */ z-index: 1000; } .header-container { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-m) var(--spacing-l); max-width: 1600px; margin: 0 auto; } .logo a { font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; color: var(--color-text); letter-spacing: 0.5px; } /* MOBILNA NAVIGACIJA: Osnovni stili */ .main-nav { display: none; /* Privzeto skrito za mobilne naprave */ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(253, 253, 253, 0.98); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); flex-direction: column; justify-content: center; align-items: center; transform: translateY(-100%); transition: transform var(--transition-medium); } .main-nav.open { /* Uporabljamo razred 'open' za aktivacijo mobilnega menija */ display: flex; transform: translateY(0); } .main-nav ul { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; text-align: center; padding: 0; } .main-nav a { color: var(--color-text); font-weight: 600; font-size: 1.2rem; padding: var(--spacing-s) 0; position: relative; letter-spacing: 0.5px; } .main-nav a::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background-color: var(--color-primary-accent); transition: width var(--transition-fast); } .main-nav a:hover::after, .main-nav a.active::after { width: 100%; } .main-nav a.nav-cta { background-color: var(--color-primary-accent); color: var(--color-white); padding: var(--spacing-s) var(--spacing-m); border-radius: 50px; transition: background-color var(--transition-fast), transform var(--transition-fast); } .main-nav a.nav-cta:hover { background-color: var(--color-primary-accent-dark); color: var(--color-white); transform: translateY(-2px); } .main-nav a.nav-cta:hover::after { width: 0; } /* --- MOBILNA NAVIGACIJA (HAMBURGER) --- */ .mobile-nav-toggle { display: block; /* Hamburger gumb je privzeto viden na mobilnih napravah */ background: none; border: none; cursor: pointer; z-index: 1001; /* Višji od menija, da je vedno na vrhu */ padding: var(--spacing-s); position: relative; } .hamburger { display: block; position: relative; width: 24px; height: 2px; background: var(--color-text); transition: all 0.25s ease-in-out; } .hamburger::before, .hamburger::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: var(--color-text); transition: all 0.25s ease-in-out; } .hamburger::before { top: -8px; } .hamburger::after { bottom: -8px; } /* --- MEDIA QUERIES --- */ @media (max-width: 991px) { .mobile-nav-toggle { display: block; /* Prikaže hamburger gumb na mobilnih napravah */ } /* KODA ZA AKTIVACIJO MOBILNEGA MENIJA IN HAMBURGER IKONE NA MOBILNIH NAPRAVAH */ /* Hamburger se spremeni v X, ko je meni odprt (glede na razred 'open' na toggle gumbu) */ .mobile-nav-toggle.open .hamburger { background: transparent; } .mobile-nav-toggle.open .hamburger::before { transform: rotate(45deg); top: 0; } .mobile-nav-toggle.open .hamburger::after { transform: rotate(-45deg); bottom: 0; } } @media (min-width: 992px) { /* Stili za namizje */ .mobile-nav-toggle { display: none; /* Skrije hamburger gumb na namizju */ } .main-nav { display: flex; /* Prikaže navigacijo kot flex kontejner */ position: static; /* Odstrani fiksno pozicioniranje */ height: auto; width: auto; background-color: transparent; backdrop-filter: none; /* Odstrani zameglitev na namizju */ -webkit-backdrop-filter: none; /* Odstrani zameglitev na namizju */ transform: none; /* Odstrani transformacijo */ flex-direction: row; /* Elementi menija v vrsto */ align-items: center; } .main-nav ul { flex-direction: row; /* Elementi seznama v vrsto */ gap: 1.8rem; } .main-nav a { font-size: 0.9rem; /* Manjša pisava za namizje */ padding: var(--spacing-s) 0; /* Dodano padding */ } .main-nav a.nav-cta { padding: var(--spacing-s) var(--spacing-m); } } /* SOURCE: assets/css/components/_footer.css */ /* /assets/css/components/_footer.css */ /* --- NOGA --- */ .main-footer-bar { padding: var(--spacing-l) var(--spacing-l); text-align: center; font-size: 0.9rem; color: #5e5e5e; background-color: #f1f1f1; } body:not(.homepage) .main-footer-bar { margin-top: var(--spacing-xl); } /* SOURCE: assets/css/components/_slider.css */ /* /assets/css/components/_slider.css */ /* ================================================= */ /* === STILI ZA DRSNIK NA DOMAČI STRANI === */ /* ================================================= */ .slider { position: relative; max-width: 1200px; margin: var(--spacing-l) auto; background: var(--color-white); padding: var(--spacing-l); border-radius: 1rem; overflow: hidden; box-shadow: var(--shadow-medium); } .slide { display: none; } .slide.active { display: block; animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .slide-content { display: flex; align-items: center; gap: var(--spacing-xl); } .slide-image { flex: 1 1 50%; } .slide-image img { width: 100%; height: auto; display: block; border-radius: 0.5rem; /* Rahlo zaobljeni robovi na sliki */ } .slide-text { flex: 1 1 50%; } .slide-text h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); color: var(--color-primary-accent); margin-bottom: var(--spacing-m); } .slide-text p { margin-bottom: var(--spacing-m); } /* === SPREMENJENI STILI ZA PORTRET NA PRVEM SLAJDU === */ .slide-portrait { float: right; width: 250px; /* SPREMEMBA: Velikost usklajena s kontaktno stranjo */ height: 250px; /* SPREMEMBA: Velikost usklajena s kontaktno stranjo */ margin: 0 0 var(--spacing-m) var(--spacing-l); /* Odmik od besedila */ border-radius: 10px; /* SPREMEMBA: Zaobljeni robovi, kot na kontaktni strani */ overflow: hidden; box-shadow: var(--shadow-medium); /* Uporaba obstoječe sence */ border: none; /* Odstranjen bel rob */ } .slide-portrait img { width: 100%; height: 100%; object-fit: cover; /* Zagotovi, da slika lepo zapolni kvadrat brez popačenja */ display: block; } /* --- MEDIA QUERIES --- */ @media (max-width: 768px) { /* Spremembe za tablice in manjše naprave */ .slide-content { flex-direction: column; text-align: center; } .slide-text h2 { font-size: 1.8rem; } /* Prilagoditve za portret na mobilnih napravah */ .slide-portrait { float: none; /* Odstranimo float, da se slika centrira */ margin: 0 auto var(--spacing-l) auto; /* Centriramo portret in mu dodamo odmik spodaj */ width: 200px; /* SPREMEMBA: Povečana velikost za boljšo vidljivost */ height: 200px; /* SPREMEMBA: Povečana velikost za boljšo vidljivost */ } } /* SOURCE: assets/css/components/_buttons.css */ /* /assets/css/components/_buttons.css */ .cta { display: inline-block; background-color: var(--color-primary-accent); color: var(--color-white); padding: var(--spacing-m) var(--spacing-l); border-radius: 50px; font-weight: 700; margin-top: var(--spacing-m); transition: background-color var(--transition-fast), transform var(--transition-fast); box-shadow: var(--shadow-light); } .cta:hover, .cta:focus { background-color: var(--color-primary-accent-dark); transform: translateY(-3px); color: var(--color-white); } .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.8); border: 1px solid var(--color-border); width: 44px; height: 44px; font-size: 1.5rem; border-radius: 50%; cursor: pointer; transition: all var(--transition-fast); z-index: 10; user-select: none; color: var(--color-text); box-shadow: var(--shadow-light); } .nav-btn:hover:not(:disabled) { background: var(--color-white); transform: translateY(-50%) scale(1.05); } .nav-btn.prev { left: var(--spacing-m); } .nav-btn.next { right: var(--spacing-m); } .nav-btn:disabled { opacity: 0.4; cursor: not-allowed; } .contact-form .cta-button { width: 100%; border: none; cursor: pointer; } .back-to-blog { display: inline-block; margin-top: var(--spacing-xl); font-weight: 600; } /* === GUMB ZA NA VRH (DODANO) === */ .back-to-top-btn { position: fixed; bottom: var(--spacing-l); right: var(--spacing-l); width: 50px; height: 50px; background-color: var(--color-primary-accent); color: var(--color-white); border: none; border-radius: 50%; box-shadow: var(--shadow-medium); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; z-index: 1000; text-decoration: none; /* Stanje za animacijo */ opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out; } .back-to-top-btn:hover { background-color: var(--color-primary-accent-dark); color: var(--color-white); } .back-to-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); } /* SOURCE: assets/css/components/_cards.css */ /* /assets/css/components/_cards.css */ /* --- Stili za kartice storitev --- */ .service-card { background: var(--color-white); border-radius: 10px; box-shadow: var(--shadow-light); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition-fast), box-shadow var(--transition-fast); border-top: 4px solid var(--color-primary-accent); } .service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); } .service-card-image img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform var(--transition-medium); } .service-card:hover .service-card-image img { transform: scale(1.05); } .service-card-content { padding: var(--spacing-l) 1.5rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex-grow: 1; } .service-card h3 { font-size: 1.25rem; color: var(--color-text); margin-bottom: var(--spacing-m); } .service-card p { font-size: 0.95rem; color: #555; flex-grow: 1; margin-bottom: var(--spacing-m); } .service-card-link { font-weight: 600; color: var(--color-primary-accent); align-self: flex-start; position: relative; padding-bottom: var(--spacing-xs); } .service-card-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background-color: var(--color-primary-accent); transition: width var(--transition-fast); } .service-card-link:hover::after { width: 100%; } /* --- Stili za kartice bloga --- */ .blog-card { background: var(--color-white); border-radius: 10px; box-shadow: var(--shadow-light); overflow: hidden; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); } .card-link-wrapper { display: block; color: inherit; text-decoration: none; } .blog-card-image { overflow: hidden; } .blog-card-image img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform var(--transition-medium); } .blog-card:hover .blog-card-image img { transform: scale(1.05); } .blog-card-content { padding: 1.5rem; } .blog-card-title { font-size: 1.3rem; color: var(--color-text); margin-bottom: var(--spacing-m); line-height: 1.3; } .blog-card-excerpt { font-size: 0.95rem; color: #555; margin-bottom: var(--spacing-m); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-card-link { font-weight: 600; color: var(--color-primary-accent); position: relative; padding-bottom: var(--spacing-xs); display: inline-block; } .blog-card-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background-color: var(--color-primary-accent); transition: width var(--transition-fast); } .blog-card:hover .blog-card-link::after { width: 100%; } /* SOURCE: assets/css/components/_accordion.css */ /* /assets/css/components/_accordion.css */ .pricing-accordion { max-width: 900px; margin: 0 auto; } .accordion-item { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px; margin-bottom: var(--spacing-m); box-shadow: var(--shadow-light); transition: box-shadow var(--transition-fast); } .accordion-item:hover { box-shadow: var(--shadow-medium); } .accordion-header { width: 100%; background: transparent; border: none; padding: 1.25rem 1.5rem; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--color-text); text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .accordion-icon { display: inline-block; width: 24px; height: 24px; position: relative; transition: transform var(--transition-fast); } .accordion-icon::before, .accordion-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background-color: var(--color-primary-accent); transform: translate(-50%, -50%); } .accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .accordion-item.active .accordion-icon { transform: rotate(135deg); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease-out; } .accordion-item.active .accordion-content { padding-bottom: 1.5rem; } .price-list { list-style: none; padding: 0 1.5rem; } .price-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); padding: var(--spacing-m) 0; border-bottom: 1px solid var(--color-border); } .price-item:last-child { border-bottom: none; } .service-name, .service-price { flex-basis: 100%; text-align: left; } .service-name { color: #444; } .service-price { font-weight: 700; font-size: 1.1rem; color: var(--color-primary-accent); } .special-pricing-note { max-width: 900px; margin: var(--spacing-xl) auto 0 auto; padding: var(--spacing-l); text-align: center; background-color: rgba(8, 4, 252, 0.1); /* SPREMEMBA: Ujemanje z novo barvo */ border: 2px dashed var(--color-primary-accent); border-radius: 8px; } .special-pricing-note h3 { margin-bottom: var(--spacing-s); } .special-pricing-note p { margin: 0; font-size: 1.2rem; font-weight: 600; } /* --- MEDIA QUERIES --- */ @media (max-width: 768px) { .price-item { flex-direction: column; align-items: flex-start; } .service-price { text-align: left; margin-top: var(--spacing-xs); } } @media (min-width: 768px) { .price-item { flex-direction: row; align-items: center; gap: 0; } .service-name { flex-basis: 70%; padding-right: var(--spacing-m); } .service-price { flex-basis: 30%; text-align: right; } } /* SOURCE: assets/css/components/_contact-form.css */ /* /assets/css/components/_contact-form.css */ .contact-form-wrapper { background: var(--color-white); padding: var(--spacing-l); border-radius: 8px; box-shadow: var(--shadow-light); } .contact-form .form-group { margin-bottom: 1.5rem; } .contact-form label { display: block; margin-bottom: var(--spacing-s); font-weight: 600; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--color-border); border-radius: 5px; font-family: var(--font-body); font-size: 1rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form textarea:focus { outline: none; border-color: var(--color-primary-accent); box-shadow: 0 0 0 3px rgba(8, 4, 252, 0.2); /* SPREMEMBA: Ujemanje z novo barvo */ } .contact-form textarea { resize: vertical; min-height: 120px; } .form-message { margin-top: var(--spacing-m); padding: var(--spacing-m); border-radius: 5px; text-align: center; font-weight: 600; transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out, margin 0.3s ease-in-out, padding 0.3s ease-in-out; opacity: 0; max-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; margin-top: 0; } .form-message.visible { opacity: 1; max-height: 100px; padding-top: var(--spacing-m); padding-bottom: var(--spacing-m); margin-top: var(--spacing-m); } .form-message.success { background-color: rgba(70, 180, 130, 0.1); color: #3a926a; border: 1px solid #46B482; } .form-message.error { background-color: rgba(180, 70, 70, 0.1); color: #b44646; border: 1px solid #b44646; } /* === STILI ZA ŠTEVEC ZNAKOV (DODANO) === */ .char-counter { text-align: right; font-size: 0.85rem; color: #777; margin-top: var(--spacing-s); transition: color 0.3s ease-in-out; } .char-counter.warning { color: #d98d00; /* Oranžna barva za opozorilo */ font-weight: 600; } .char-counter.limit { color: #b44646; /* Rdeča barva za preseženo omejitev */ font-weight: 600; } /* SOURCE: assets/css/pages/_homepage.css */ /* /assets/css/pages/_homepage.css */ /* Stili za domačo stran, ki omogočajo drsenje in zagotavljajo, da se vsebina raztegne po celotni višini zaslona. */ body.homepage { display: flex; flex-direction: column; min-height: 100vh; /* Zagotovi, da je body vedno vsaj tako visok kot zaslon */ } .homepage .slider { flex-grow: 1; /* Omogoči, da se drsnik raztegne in potisne nogo na dno */ display: flex; align-items: center; /* Vertikalno centrira vsebino drsnika */ width: 100%; /* Zagotovi polno širino */ }