Prvotna verzija spletne strani

2025-08-21 11:06:11 +02:00
1 parent 9d09f04023
commit 79150b21d2
@@ -0,0 +1,179 @@
+/* ==========================================================================
+   Cards Styles
+   ========================================================================== */
+
+/**
+ * Ta datoteka vsebuje stile za vse ponovno uporabljive komponente v obliki kartic.
+ *
+ * 1. Kartice z novicami (.news-card)
+ * 2. Kartice s pričevanji (.testimonial-card)
+ * 3. Kartice s projekti/objavami (.post-card)
+ * 4. Stili za kartice na mobilnih napravah
+ */
+
+/* 1. Kartice z novicami (.news-card) */
+
+.news-card {
+    width: 405.33px;
+    background: transparent;
+    text-align: left;
+}
+
+.news-card img {
+    width: 100%;
+    height: 240px;
+    object-fit: cover;
+    border-radius: 8px;
+    margin-bottom: 32px;
+}
+
+.news-card .card-content {
+    color: #FFFFFF;
+}
+
+.news-card .author {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 12px;
+}
+
+.news-card h3 {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 32px;
+    margin-bottom: 12px;
+}
+
+.news-card p {
+    font-size: 16px;
+    line-height: 24px;
+}
+
+/* 2. Kartice s pričevanji (.testimonial-card) */
+
+.testimonial-card {
+    padding: 24px 24px 40px;
+    border: 1px solid #D0D5DD;
+    border-radius: 16px;
+}
+
+.testimonial-column .testimonial-card:nth-child(even) {
+    background: #F9FAFB;
+}
+
+.testimonial-card h3 {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 1.2;
+    color: #000000;
+    margin-bottom: 24px;
+}
+
+.testimonial-card p {
+    font-size: 16px;
+    line-height: 1.2;
+    color: #646E82;
+    margin-bottom: 24px;
+}
+
+.author-info {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.author-info img {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.author-info h4 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 0 6px 0;
+    color: #000000;
+}
+
+.author-info p {
+    font-size: 16px;
+    margin: 0;
+    color: #2D738C;
+}
+
+/* Specifična pravila za barve znotraj pričevanj */
+.testimonial-card:nth-child(3) .author-info h4, 
+.testimonial-card:nth-child(3) .author-info p {
+    color: #2D738C;
+}
+
+.testimonial-column:nth-child(1) .testimonial-card:nth-child(2) .author-info h4,
+.testimonial-column:nth-child(2) .testimonial-card:nth-child(2) .author-info h4,
+.testimonial-column:nth-child(1) .testimonial-card:nth-child(2) .author-info p,
+.testimonial-column:nth-child(2) .testimonial-card:nth-child(2) .author-info p {
+    color: #646E82;
+}
+
+/* 3. Kartice s projekti/objavami (.post-card) */
+
+.post-card {
+    display: flex;
+    flex-direction: column;
+}
+
+.post-link {
+    text-decoration: none;
+    color: inherit;
+}
+
+.post-image {
+    width: 100%;
+    height: 240px;
+    object-fit: cover;
+    border-radius: 8px;
+    margin-bottom: 32px;
+}
+
+.post-meta {
+    font-size: 14px;
+    font-weight: 600;
+    color: #FA7850;
+    margin: 0 0 12px;
+}
+
+.post-title {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 32px;
+    color: #101828;
+    margin: 0 0 12px;
+}
+
+.post-excerpt {
+    font-size: 16px;
+    line-height: 24px;
+    color: #667085;
+    margin: 0;
+}
+
+
+/* ==========================================================================
+   Mobile Cards Styles
+   ========================================================================== */
+
+@media (max-width: 768px) {
+
+    /* Kartice z novicami */
+    .news-card {
+        width: 100%;
+        max-width: 321px;
+    }
+
+    /* Kartice s pričevanji */
+    .testimonial-card {
+        flex: 0 0 291px;
+        scroll-snap-align: start;
+        margin-right: 24px;
+    }
+}