Reserve slider layout space to eliminate CLS

assets/css/style-home.css

@@ -44,12 +44,14 @@ body {
     color: var(--color-text);
     background-color: var(--color-background);
     line-height: 1.7;
+    font-size-adjust: 0.5;
     -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 */
 
@@ -59,6 +61,7 @@ h1, h2, h3 {
     line-height: 1.2;
     margin-bottom: var(--spacing-m);
     color: var(--color-primary-accent); /* SPREMEMBA: Vsi naslovi so sedaj v primarni barvi */
+    font-size-adjust: 0.45;
 }
 
 p {
@@ -80,6 +83,7 @@ a:hover {
     color: var(--color-primary-accent);
     text-transform: uppercase;
 }
+
 /* SOURCE: assets/css/layout/_structure.css */
 /* /assets/css/layout/_structure.css */
 
@@ -276,72 +280,6 @@ a:hover {
         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 */
 

assets/css/style-home.min.css

@@ -1 +1 @@
-:root{--font-heading:'Playfair Display',serif;--font-body:'Montserrat',sans-serif;--color-text:#2c3e50;--color-background:#fdfdfd;--color-primary-accent:#0804fc;--color-primary-accent-dark:#0603c9;--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}*,*::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}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)}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)}.text-accent-uppercase{color:var(--color-primary-accent);text-transform:uppercase}.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)}.about-image{width:100%;max-width:400px;margin:0 auto;position:static}.about-image img{width:100%;height:auto;border-radius:10px;box-shadow:var(--shadow-medium)}.grid-image{width:100%;aspect-ratio:1 / 1;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);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);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}.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}.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 (max-width:768px){}@media (min-width:768px){}@media (min-width:992px){.about-image{max-width:100%;position:sticky;top:calc(var(--spacing-l) + 80px);align-self:start}}.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 (max-width:768px){.image-grid,.services-grid,.blog-grid,.contact-grid{grid-template-columns:1fr}}@media (min-wiLine truncated
+:root{--font-heading:'Playfair Display',serif;--font-body:'Montserrat',sans-serif;--color-text:#2c3e50;--color-background:#fdfdfd;--color-primary-accent:#0804fc;--color-primary-accent-dark:#0603c9;--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}*,*::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;font-size-adjust:0.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}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);font-size-adjust:0.45}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)}.text-accent-uppercase{color:var(--color-primary-accent);text-transform:uppercase}.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)}.about-image{width:100%;max-width:400px;margin:0 auto;position:static}.about-image img{width:100%;height:auto;border-radius:10px;box-shadow:var(--shadow-medium)}.grid-image{width:100%;aspect-ratio:1 / 1;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);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);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}.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}.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 (max-width:768px){}@media (min-width:768px){}@media (min-width:992px){.about-image{max-width:100%;position:sticky;top:calc(var(--spacing-l) + 80px);align-self:start}}.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;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}.maLine truncated

index.html

@@ -22,9 +22,12 @@
       margin: 2rem auto;
       background: #ffffff;
       padding: 2rem;
+      min-height: 630px;
       border-radius: 1rem;
       overflow: hidden;
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+      display: flex;
+      align-items: center;
     }
     .slide { display: none; }
     .slide.active { display: block; animation: fadeIn 0.5s ease-in-out; }
@@ -36,11 +39,13 @@
       display: flex;
       align-items: center;
       gap: 4rem;
+      width: 100%;
     }
-    .slide-image { flex: 1 1 50%; }
+    .slide-image { flex: 1 1 50%; aspect-ratio: 1 / 1; display: flex; }
     .slide-image img {
       width: 100%;
-      height: auto;
+      height: 100%;
+      object-fit: cover;
       display: block;
       border-radius: 0.5rem;
     }
@@ -74,11 +79,12 @@
         gap: 1.5rem;
       }
       .slide-portrait {
-        float: none;
+      float: none;
-        margin: 0 auto 2rem auto;
+      margin: 0 auto 2rem auto;
-        width: 200px;
+      width: 200px;
-        height: 200px;
+      height: 200px;
-      }
+    }
+    .slide-content { gap: 2rem; }
     }
   </style>
 <link as="style" href="/assets/css/style-home.min.css" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/>