{"id":2461,"date":"2026-06-28T18:10:44","date_gmt":"2026-06-28T16:10:44","guid":{"rendered":"https:\/\/truewhipp.si\/?page_id=2461"},"modified":"2026-06-29T07:45:56","modified_gmt":"2026-06-29T05:45:56","slug":"leglo","status":"publish","type":"page","link":"https:\/\/truewhipp.si\/en\/leglo\/","title":{"rendered":"Litter"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nLegla \u00b7 Truewhipp<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n:root {\r\n --tw-green-dark: #2a3a28;\r\n --tw-green-mid: #4a6741;\r\n --tw-green-light: #c8d9b8;\r\n --tw-cream: #f7f4ee;\r\n --tw-cream-dark: #ede8df;\r\n --tw-gold: #b89a5e;\r\n --tw-text: #2c2c2c;\r\n --tw-text-soft: #5a5a5a;\r\n}\r\n\r\nhtml { scroll-behavior: smooth; }\r\nbody { background: var(--tw-cream); font-family: 'Jost', sans-serif; color: var(--tw-text); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 INTRO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.intro {\r\n background: var(--tw-green-dark);\r\n padding: clamp(80px,11vw,130px) clamp(24px,8vw,120px) clamp(64px,8vw,104px);\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n.intro::before {\r\n content: '';\r\n position: absolute; top: -80px; left: 50%;\r\n transform: translateX(-50%);\r\n width: 700px; height: 350px;\r\n background: radial-gradient(ellipse, rgba(184,154,94,0.12) 0%, transparent 68%);\r\n pointer-events: none;\r\n}\r\n.intro::after {\r\n content: '';\r\n position: absolute; bottom: 0; left: 0; right: 0; height: 1px;\r\n background: linear-gradient(90deg, transparent, rgba(184,154,94,0.3), transparent);\r\n}\r\n.intro-grain {\r\n position: absolute; inset: 0;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'\/%3E%3C\/svg%3E\");\r\n background-size: 200px 200px; pointer-events: none; opacity: 0.6;\r\n}\r\n\r\n.eyebrow {\r\n display: inline-flex; align-items: center; gap: 14px;\r\n font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase;\r\n color: var(--tw-gold); font-weight: 500; margin-bottom: 22px;\r\n opacity: 0; animation: fadeUp 0.9s 0.15s ease forwards;\r\n}\r\n.eyebrow::before, .eyebrow::after {\r\n content: ''; display: block; height: 1px;\r\n width: clamp(28px,4vw,52px); background: var(--tw-gold); opacity: 0.4;\r\n}\r\n\r\n.intro-heading {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(52px,7vw,96px); font-weight: 300;\r\n color: var(--tw-cream); line-height: 1.0; letter-spacing: -0.02em;\r\n margin-bottom: 8px; opacity: 0; animation: fadeUp 0.9s 0.3s ease forwards;\r\n}\r\n.intro-heading em { font-style: italic; color: var(--tw-gold); }\r\n\r\n.intro-sub {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(16px,1.8vw,22px); font-weight: 300; font-style: italic;\r\n color: rgba(247,244,238,0.5); letter-spacing: 0.12em; margin-bottom: 28px;\r\n opacity: 0; animation: fadeUp 0.9s 0.45s ease forwards;\r\n}\r\n\r\n.rule {\r\n width: 60px; height: 2px;\r\n background: linear-gradient(90deg, transparent, var(--tw-gold), transparent);\r\n border: none; margin: 0 auto 32px;\r\n opacity: 0; animation: fadeUp 0.9s 0.55s ease forwards;\r\n}\r\n\r\n.intro-lead {\r\n max-width: 600px; margin: 0 auto;\r\n font-size: clamp(14px,1.2vw,16px); font-weight: 300;\r\n line-height: 2.0; color: rgba(247,244,238,0.58); letter-spacing: 0.02em;\r\n opacity: 0; animation: fadeUp 0.9s 0.7s ease forwards;\r\n}\r\n.intro-lead strong { color: rgba(247,244,238,0.90); font-weight: 400; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FILTER BAR \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.filter-bar {\r\n background: var(--tw-green-dark);\r\n border-bottom: 1px solid rgba(184,154,94,0.18);\r\n box-shadow: 0 4px 28px rgba(0,0,0,0.22);\r\n position: sticky; top: 0; z-index: 100;\r\n padding: 0;\r\n}\r\n\r\n\/* Two-row structure *\/\r\n.filter-top {\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 9px clamp(14px,4vw,56px) 0;\r\n}\r\n\r\n.filter-label {\r\n font-size: 9px; letter-spacing: 0.38em; text-transform: uppercase;\r\n color: var(--tw-gold); font-weight: 500; white-space: nowrap;\r\n display: flex; align-items: center; gap: 8px;\r\n}\r\n.filter-label::before {\r\n content: ''; display: inline-block; width: 14px; height: 1px;\r\n background: var(--tw-gold); opacity: 0.6;\r\n}\r\n\r\n\/* Scrollable pill row *\/\r\n.filter-pills {\r\n display: flex; align-items: center; gap: 7px;\r\n padding: 10px clamp(14px,4vw,56px) 13px;\r\n overflow-x: auto; scrollbar-width: none;\r\n -webkit-overflow-scrolling: touch;\r\n}\r\n.filter-pills::-webkit-scrollbar { display: none; }\r\n\r\n\/* Thin separator between year group and dam group *\/\r\n.filter-sep {\r\n flex-shrink: 0; width: 1px; height: 20px;\r\n background: rgba(184,154,94,0.22); margin: 0 3px;\r\n}\r\n\r\n.filter-btn {\r\n font-family: 'Jost', sans-serif;\r\n font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;\r\n font-weight: 400;\r\n background: rgba(255,255,255,0.07);\r\n border: 1px solid rgba(184,154,94,0.22);\r\n border-radius: 100px;\r\n cursor: pointer;\r\n padding: 8px 18px;\r\n color: rgba(247,244,238,0.55);\r\n white-space: nowrap; flex-shrink: 0;\r\n transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n.filter-btn:hover {\r\n background: rgba(184,154,94,0.14);\r\n border-color: rgba(184,154,94,0.55);\r\n color: rgba(247,244,238,0.92);\r\n}\r\n.filter-btn.active {\r\n background: var(--tw-gold);\r\n border-color: var(--tw-gold);\r\n color: var(--tw-green-dark);\r\n font-weight: 600;\r\n box-shadow: 0 2px 14px rgba(184,154,94,0.4);\r\n}\r\n\/* Dam pills: dashed border to visually distinguish *\/\r\n.filter-btn[data-filter^=\"dam\"] {\r\n border-style: dashed;\r\n}\r\n.filter-btn[data-filter^=\"dam\"].active {\r\n border-style: solid;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 LITTERS SECTION \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.litters-section {\r\n padding: clamp(60px,8vw,100px) clamp(20px,4vw,56px);\r\n max-width: 1400px; margin: 0 auto;\r\n}\r\n\r\n\/* \u2500\u2500 Year group heading \u2500\u2500 *\/\r\n.year-group { margin-bottom: clamp(48px,6vw,80px); }\r\n.year-group:last-child { margin-bottom: 0; }\r\n\r\n.year-heading {\r\n display: flex; align-items: center; gap: 20px;\r\n margin-bottom: clamp(28px,3vw,44px);\r\n}\r\n.year-number {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(48px,5vw,72px); font-weight: 300; font-style: italic;\r\n color: var(--tw-green-dark); line-height: 1; flex-shrink: 0;\r\n opacity: 0.32; letter-spacing: -0.03em;\r\n}\r\n.year-rule {\r\n flex: 1; height: 1px;\r\n background: linear-gradient(90deg, rgba(184,154,94,0.35), transparent);\r\n}\r\n\r\n\/* \u2500\u2500 Litter grid \u2500\u2500 *\/\r\n.litter-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n gap: clamp(16px,2vw,28px);\r\n}\r\n\r\n\/* \u2500\u2500 Litter card \u2500\u2500 *\/\r\n.litter-card {\r\n position: relative; overflow: hidden; border-radius: 4px;\r\n background: var(--tw-green-dark);\r\n cursor: pointer; text-decoration: none;\r\n display: block;\r\n opacity: 0; transform: translateY(24px);\r\n animation: cardIn 0.75s ease forwards;\r\n transition: box-shadow 0.4s ease;\r\n}\r\n.litter-card:hover { box-shadow: 0 20px 60px rgba(42,58,40,0.22); }\r\n\r\n\/* Card image *\/\r\n.card-img-wrap {\r\n position: relative; overflow: hidden;\r\n height: clamp(220px,28vw,360px);\r\n}\r\n.card-img-wrap img {\r\n width: 100%; height: 100%; object-fit: cover; object-position: center 25%;\r\n display: block;\r\n filter: saturate(0.80) brightness(0.88);\r\n transition: transform 1.1s cubic-bezier(0.22,0.61,0.36,1), filter 0.9s ease;\r\n}\r\n.litter-card:hover .card-img-wrap img {\r\n transform: scale(1.06);\r\n filter: saturate(0.98) brightness(0.96);\r\n}\r\n\r\n\/* Gradient overlay on image *\/\r\n.card-img-overlay {\r\n position: absolute; inset: 0;\r\n background: linear-gradient(to top, rgba(42,58,40,0.88) 0%, rgba(42,58,40,0.1) 55%, transparent 100%);\r\n}\r\n\r\n\/* Letter badge on image *\/\r\n.card-letter {\r\n position: absolute; top: 14px; left: 16px;\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(28px,3.5vw,42px); font-weight: 400; font-style: italic;\r\n color: var(--tw-gold); line-height: 1;\r\n background: rgba(42,58,40,0.72);\r\n border: 1px solid rgba(184,154,94,0.3);\r\n border-radius: 6px;\r\n padding: 4px 10px 6px;\r\n backdrop-filter: blur(6px);\r\n letter-spacing: 0.02em;\r\n}\r\n\r\n\/* Calendar date badge *\/\r\n.card-date-badge {\r\n position: absolute; top: 16px; right: 18px;\r\n background: rgba(184,154,94,0.18);\r\n border: 1px solid rgba(184,154,94,0.35);\r\n border-radius: 3px;\r\n padding: 6px 10px; text-align: center;\r\n backdrop-filter: blur(8px);\r\n}\r\n.card-date-badge .cal-month {\r\n display: block; font-size: 8px; letter-spacing: 0.24em;\r\n text-transform: uppercase; color: var(--tw-gold);\r\n font-weight: 500;\r\n}\r\n.card-date-badge .cal-year {\r\n display: block;\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 18px; font-weight: 300;\r\n color: rgba(255,255,255,0.88); line-height: 1.1;\r\n}\r\n\r\n\/* Bottom info strip on image *\/\r\n.card-image-info {\r\n position: absolute; bottom: 0; left: 0; right: 0;\r\n padding: 14px 18px;\r\n}\r\n.card-subtitle {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 16px; font-weight: 300; font-style: italic;\r\n color: rgba(255,255,255,0.75); display: block;\r\n letter-spacing: 0.04em;\r\n}\r\n\r\n\/* Card body *\/\r\n.card-body {\r\n background: var(--tw-cream);\r\n padding: 18px 20px 20px;\r\n position: relative;\r\n}\r\n.card-body::before {\r\n content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 1px;\r\n background: linear-gradient(90deg, transparent, rgba(184,154,94,0.25), transparent);\r\n}\r\n\r\n.card-name {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(22px,2.2vw,28px); font-weight: 300;\r\n color: var(--tw-green-dark); margin-bottom: 8px;\r\n letter-spacing: -0.01em;\r\n}\r\n.card-name em { font-style: italic; color: var(--tw-gold); }\r\n\r\n.card-meta-row {\r\n display: flex; align-items: center; gap: 18px; margin-bottom: 12px;\r\n flex-wrap: wrap;\r\n}\r\n.card-tag {\r\n font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;\r\n color: var(--tw-text-soft); display: flex; align-items: center; gap: 6px;\r\n}\r\n.card-tag::before {\r\n content: ''; display: block; width: 4px; height: 4px; border-radius: 50%;\r\n background: var(--tw-gold); opacity: 0.6; flex-shrink: 0;\r\n}\r\n\r\n.card-desc {\r\n font-size: 13px; font-weight: 300; line-height: 1.8;\r\n color: var(--tw-text-soft); margin-bottom: 16px;\r\n}\r\n\r\n.card-link {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;\r\n color: var(--tw-green-mid); font-weight: 500;\r\n transition: gap 0.3s ease, color 0.25s ease;\r\n}\r\n.card-link svg {\r\n width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8;\r\n fill: none; flex-shrink: 0;\r\n transition: transform 0.3s ease;\r\n}\r\n.litter-card:hover .card-link { gap: 12px; color: var(--tw-gold); }\r\n.litter-card:hover .card-link svg { transform: translateX(3px); }\r\n\r\n\/* Gold shimmer on card *\/\r\n.litter-card::before {\r\n content: ''; position: absolute; inset: 0; z-index: 5;\r\n background: linear-gradient(115deg, transparent 25%, rgba(184,154,94,0.08) 50%, transparent 75%);\r\n background-size: 250% 250%; background-position: 220% 0;\r\n transition: background-position 0.85s ease; pointer-events: none;\r\n}\r\n.litter-card:hover::before { background-position: -40% 0; }\r\n\r\n\/* \u2500\u2500 Hidden state for filtered cards \u2500\u2500 *\/\r\n.litter-card.is-hidden {\r\n display: none;\r\n}\r\n\r\n\/* \u2500\u2500 Dam grouping label \u2500\u2500 *\/\r\n.dam-label {\r\n grid-column: 1 \/ -1;\r\n display: flex; align-items: center; gap: 14px;\r\n padding-top: 8px;\r\n}\r\n.dam-label-text {\r\n font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;\r\n color: var(--tw-gold); white-space: nowrap;\r\n}\r\n.dam-label-line {\r\n flex: 1; height: 1px; background: rgba(184,154,94,0.2);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TIMELINE VIEW \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.timeline-section {\r\n background: var(--tw-cream-dark);\r\n padding: clamp(60px,8vw,100px) clamp(20px,4vw,56px);\r\n border-top: 1px solid rgba(184,154,94,0.15);\r\n border-bottom: 1px solid rgba(184,154,94,0.15);\r\n display: none; \/* toggled by JS *\/\r\n}\r\n.timeline-section.is-active { display: block; }\r\n\r\n.timeline-header {\r\n text-align: center; margin-bottom: clamp(40px,5vw,64px);\r\n}\r\n.section-eyebrow {\r\n display: inline-flex; align-items: center; gap: 14px;\r\n font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;\r\n color: var(--tw-gold); font-weight: 500; margin-bottom: 14px;\r\n}\r\n.section-eyebrow::before, .section-eyebrow::after {\r\n content: ''; display: block; height: 1px;\r\n width: clamp(24px,4vw,48px); background: var(--tw-gold); opacity: 0.4;\r\n}\r\n.section-title {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(28px,3.2vw,46px); font-weight: 300;\r\n color: var(--tw-green-dark); line-height: 1.12;\r\n}\r\n.section-title em { font-style: italic; color: var(--tw-green-mid); }\r\n.section-rule {\r\n width: 48px; height: 2px;\r\n background: linear-gradient(90deg, transparent, var(--tw-gold), transparent);\r\n border: none; margin: 16px auto 0;\r\n}\r\n\r\n\/* Timeline track *\/\r\n.timeline-track {\r\n position: relative; max-width: 860px; margin: 0 auto;\r\n padding-left: clamp(24px,4vw,48px);\r\n}\r\n.timeline-track::before {\r\n content: ''; position: absolute; left: 0; top: 8px;\r\n bottom: 8px; width: 1px;\r\n background: linear-gradient(to bottom, transparent, rgba(184,154,94,0.3) 10%, rgba(184,154,94,0.3) 90%, transparent);\r\n}\r\n\r\n.timeline-item {\r\n position: relative; margin-bottom: clamp(32px,4vw,52px);\r\n opacity: 0; transform: translateX(-16px);\r\n transition: opacity 0.6s ease, transform 0.6s ease;\r\n}\r\n.timeline-item.in-view { opacity: 1; transform: translateX(0); }\r\n.timeline-item:last-child { margin-bottom: 0; }\r\n\r\n\/* Dot on timeline *\/\r\n.timeline-item::before {\r\n content: ''; position: absolute; left: calc(-1 * clamp(24px,4vw,48px));\r\n top: 14px; width: 9px; height: 9px;\r\n border-radius: 50%; border: 1.5px solid var(--tw-gold);\r\n background: var(--tw-cream-dark); transform: translateX(-4px);\r\n}\r\n\r\n.timeline-card {\r\n display: flex; gap: clamp(16px,2.5vw,32px);\r\n background: var(--tw-cream); border-radius: 4px; overflow: hidden;\r\n border: 1px solid rgba(184,154,94,0.12);\r\n text-decoration: none; color: inherit;\r\n transition: box-shadow 0.35s ease, border-color 0.35s ease;\r\n}\r\n.timeline-card:hover {\r\n box-shadow: 0 12px 40px rgba(42,58,40,0.12);\r\n border-color: rgba(184,154,94,0.28);\r\n}\r\n\r\n.timeline-thumb {\r\n width: clamp(100px,18vw,200px); flex-shrink: 0; overflow: hidden;\r\n}\r\n.timeline-thumb img {\r\n width: 100%; height: 100%; object-fit: cover; object-position: center 20%;\r\n display: block;\r\n filter: saturate(0.78) brightness(0.92);\r\n transition: transform 0.9s cubic-bezier(0.22,0.61,0.36,1), filter 0.7s ease;\r\n}\r\n.timeline-card:hover .timeline-thumb img {\r\n transform: scale(1.07);\r\n filter: saturate(1.0) brightness(0.98);\r\n}\r\n\r\n.timeline-info {\r\n padding: clamp(16px,2vw,24px) clamp(16px,2vw,24px) clamp(16px,2vw,24px) 0;\r\n flex: 1; display: flex; flex-direction: column; justify-content: center;\r\n}\r\n\r\n.tl-date {\r\n font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;\r\n color: var(--tw-gold); margin-bottom: 8px;\r\n}\r\n\r\n.tl-title {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(22px,2.4vw,32px); font-weight: 300;\r\n color: var(--tw-green-dark); line-height: 1.1; margin-bottom: 6px;\r\n}\r\n.tl-title em { font-style: italic; color: var(--tw-gold); }\r\n\r\n.tl-sub {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 15px; font-weight: 300; font-style: italic;\r\n color: var(--tw-text-soft); margin-bottom: 10px;\r\n}\r\n\r\n.tl-meta {\r\n font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;\r\n color: rgba(90,90,90,0.7);\r\n}\r\n\r\n.tl-arrow {\r\n align-self: center; flex-shrink: 0;\r\n width: 32px; height: 32px;\r\n border: 1px solid rgba(184,154,94,0.3); border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n margin-right: clamp(12px,2vw,20px);\r\n transition: background 0.3s, border-color 0.3s;\r\n}\r\n.tl-arrow svg { width: 14px; height: 14px; stroke: var(--tw-gold); stroke-width: 1.8; fill: none; }\r\n.timeline-card:hover .tl-arrow {\r\n background: rgba(184,154,94,0.1); border-color: var(--tw-gold);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 GRID VIEW (default) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.grid-section { display: block; }\r\n.grid-section.is-hidden { display: none; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 EMPTY STATE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.empty-state {\r\n grid-column: 1 \/ -1; text-align: center;\r\n padding: clamp(40px,6vw,80px) 20px;\r\n display: none;\r\n}\r\n.empty-state.is-visible { display: block; }\r\n.empty-state p {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(18px,2vw,24px); font-weight: 300; font-style: italic;\r\n color: var(--tw-text-soft);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FOOTER NOTE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.footer-note {\r\n background: var(--tw-green-dark);\r\n padding: clamp(40px,6vw,72px) clamp(24px,8vw,100px);\r\n text-align: center; position: relative;\r\n}\r\n.footer-note::before {\r\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;\r\n background: linear-gradient(90deg, transparent, rgba(184,154,94,0.28), transparent);\r\n}\r\n.footer-note p {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(16px,1.8vw,22px); font-weight: 300; font-style: italic;\r\n color: rgba(247,244,238,0.55); letter-spacing: 0.04em;\r\n line-height: 1.8; max-width: 560px; margin: 0 auto;\r\n}\r\n.footer-note p strong { color: var(--tw-gold); font-weight: 400; font-style: normal; }\r\n.footer-logo {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase;\r\n color: rgba(247,244,238,0.2); margin-top: 28px; display: block;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 VIEW TOGGLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.tw-view-toggle {\r\n display: flex !important;\r\n align-items: center !important;\r\n gap: 6px !important;\r\n flex-shrink: 0 !important;\r\n}\r\n.tw-view-btn {\r\n display: inline-flex !important;\r\n align-items: center !important;\r\n gap: 6px !important;\r\n padding: 7px 13px !important;\r\n border-radius: 100px !important;\r\n border: 1px solid rgba(184,154,94,0.28) !important;\r\n background: rgba(255,255,255,0.07) !important;\r\n cursor: pointer !important;\r\n color: rgba(247,244,238,0.55) !important;\r\n font-family: 'Jost', sans-serif !important;\r\n font-size: 9px !important;\r\n letter-spacing: 0.2em !important;\r\n text-transform: uppercase !important;\r\n font-weight: 400 !important;\r\n white-space: nowrap !important;\r\n transition: background 0.2s, border-color 0.2s, color 0.2s !important;\r\n line-height: 1 !important;\r\n text-decoration: none !important;\r\n box-shadow: none !important;\r\n outline: none !important;\r\n}\r\n.tw-view-btn:hover {\r\n background: rgba(184,154,94,0.14) !important;\r\n border-color: rgba(184,154,94,0.5) !important;\r\n color: rgba(247,244,238,0.9) !important;\r\n}\r\n.tw-view-btn.active {\r\n background: rgba(184,154,94,0.22) !important;\r\n border-color: var(--tw-gold) !important;\r\n color: var(--tw-gold) !important;\r\n font-weight: 600 !important;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STAGGER DELAYS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.litter-card:nth-child(1) { animation-delay: 0.05s; }\r\n.litter-card:nth-child(2) { animation-delay: 0.12s; }\r\n.litter-card:nth-child(3) { animation-delay: 0.19s; }\r\n.litter-card:nth-child(4) { animation-delay: 0.26s; }\r\n.litter-card:nth-child(5) { animation-delay: 0.33s; }\r\n.litter-card:nth-child(6) { animation-delay: 0.40s; }\r\n.litter-card:nth-child(7) { animation-delay: 0.47s; }\r\n.litter-card:nth-child(8) { animation-delay: 0.54s; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 KEYFRAMES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@keyframes fadeUp {\r\n from { opacity: 0; transform: translateY(18px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n}\r\n@keyframes cardIn { to { opacity: 1; transform: translateY(0); } }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SCROLL REVEALS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.reveal {\r\n opacity: 0; transform: translateY(24px);\r\n transition: opacity 0.7s ease, transform 0.7s ease;\r\n}\r\n.reveal.in-view { opacity: 1; transform: translateY(0); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 860px) {\r\n .litter-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }\r\n}\r\n@media (max-width: 600px) {\r\n .litter-grid { grid-template-columns: 1fr; }\r\n .timeline-thumb { width: 90px; }\r\n .tl-title { font-size: clamp(18px,5vw,24px); }\r\n .filter-pills { padding: 8px 14px 11px; gap: 6px; }\r\n .filter-btn { padding: 7px 14px; font-size: 9.5px; }\r\n .filter-top { padding: 8px 14px 0; }\r\n}\r\n@media (max-width: 400px) {\r\n .filter-btn { padding: 6px 12px; font-size: 9px; letter-spacing: 0.12em; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2550\u2550\u2550\u2550 INTRO \u2550\u2550\u2550\u2550 -->\r\n<section class=\"intro\">\r\n <div class=\"intro-grain\"><\/div>\r\n <div class=\"eyebrow\">Truewhipp \u00b7 Whippeti<\/div>\r\n <h1 class=\"intro-heading\">Na\u0161a <em>Legla<\/em><\/h1>\r\n <p class=\"intro-sub\">Vsako leglo \u2014 zgodba zase<\/p>\r\n <hr class=\"rule\">\r\n <p class=\"intro-lead\">\r\n Vzrejamo z <strong>du\u0161o in predanostjo<\/strong>. Vsako leglo je za nas posebno poglavje \u2014\r\n skupek edinstvenih osebnosti, barv in iskric, ki vsak dom napolnijo z neizmerno toplino.\r\n Tukaj hranimo spomin na vse na\u0161e mladi\u010dke.\r\n <\/p>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550 FILTER BAR \u2550\u2550\u2550\u2550 -->\r\n<nav class=\"filter-bar\" role=\"navigation\" aria-label=\"Filtri po letu\">\r\n\r\n <!-- Row 1: label + view toggle -->\r\n <div class=\"filter-top\">\r\n <span class=\"filter-label\">Filtriraj legla<\/span>\r\n <div class=\"tw-view-toggle\" role=\"group\" aria-label=\"Izbira pogleda\">\r\n <button class=\"tw-view-btn active\" id=\"btnGrid\" aria-pressed=\"true\">\r\n <svg viewBox=\"0 0 24 24\" style=\"display:block;width:14px;height:14px;fill:none;stroke-width:1.8;\">\r\n <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\" style=\"stroke:currentColor;fill:none;\"\/>\r\n <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\" style=\"stroke:currentColor;fill:none;\"\/>\r\n <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\" style=\"stroke:currentColor;fill:none;\"\/>\r\n <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\" style=\"stroke:currentColor;fill:none;\"\/>\r\n <\/svg>\r\n Mre\u017ea\r\n <\/button>\r\n <button class=\"tw-view-btn\" id=\"btnTimeline\" aria-pressed=\"false\">\r\n <svg viewBox=\"0 0 24 24\" style=\"display:block;width:14px;height:14px;fill:none;stroke-width:1.8;\">\r\n <line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\" style=\"stroke:currentColor;\"\/>\r\n <line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\" style=\"stroke:currentColor;\"\/>\r\n <line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\" style=\"stroke:currentColor;\"\/>\r\n <circle cx=\"3.5\" cy=\"6\" r=\"1.2\" style=\"fill:currentColor;stroke:none;\"\/>\r\n <circle cx=\"3.5\" cy=\"12\" r=\"1.2\" style=\"fill:currentColor;stroke:none;\"\/>\r\n <circle cx=\"3.5\" cy=\"18\" r=\"1.2\" style=\"fill:currentColor;stroke:none;\"\/>\r\n <\/svg>\r\n \u010casovnica\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Row 2: scrollable filter pills -->\r\n <div class=\"filter-pills\">\r\n <button class=\"filter-btn active\" data-filter=\"all\">Vsa legla<\/button>\r\n <button class=\"filter-btn\" data-filter=\"2024\">2024<\/button>\r\n <button class=\"filter-btn\" data-filter=\"2023\">2023<\/button>\r\n <button class=\"filter-btn\" data-filter=\"2021\">2021<\/button>\r\n <button class=\"filter-btn\" data-filter=\"2020\">2020<\/button>\r\n <div class=\"filter-sep\" aria-hidden=\"true\"><\/div>\r\n <button class=\"filter-btn\" data-filter=\"dam-maya\">Po mami \u00b7 Maya<\/button>\r\n <button class=\"filter-btn\" data-filter=\"dam-stella\">Po mami \u00b7 Stella<\/button>\r\n <\/div>\r\n\r\n<\/nav>\r\n\r\n<!-- \u2550\u2550\u2550\u2550 GRID VIEW \u2550\u2550\u2550\u2550 -->\r\n<div class=\"grid-section\" id=\"gridView\">\r\n <section class=\"litters-section\">\r\n\r\n <!-- Year group 2024 -->\r\n <div class=\"year-group reveal\" id=\"group-2024\">\r\n <div class=\"year-heading\">\r\n <span class=\"year-number\">2024<\/span>\r\n <div class=\"year-rule\"><\/div>\r\n <\/div>\r\n <div class=\"litter-grid\">\r\n\r\n <a class=\"litter-card\" href=\"https:\/\/truewhipp.si\/leglo-v\/\"\r\n data-year=\"2024\" data-dam=\"dam-stella\"\r\n aria-label=\"Leglo V \u2013 3. april 2024\">\r\n <div class=\"card-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/truewhipp.si\/wp-content\/uploads\/2026\/04\/IgorPuppy3.4.2024-45.jpg\"\r\n alt=\"Whippet mladi\u010di leglo V\" loading=\"lazy\" title=\"Leglo\">\r\n <div class=\"card-img-overlay\"><\/div>\r\n <span class=\"card-letter\">V<\/span>\r\n <div class=\"card-date-badge\">\r\n <span class=\"cal-month\">Apr<\/span>\r\n <span class=\"cal-year\">2024<\/span>\r\n <\/div>\r\n <div class=\"card-image-info\">\r\n <span class=\"card-subtitle\">Zgodba, ki se za\u010dne z enim samim pogledom<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h2 class=\"card-name\">Leglo <em>V<\/em><\/h2>\r\n <div class=\"card-meta-row\">\r\n <span class=\"card-tag\">3. 4. 2024<\/span>\r\n <span class=\"card-tag\">Whippet<\/span>\r\n <span class=\"card-tag\">Igor<\/span>\r\n <\/div>\r\n <p class=\"card-desc\">Osem mladi\u010dev, vsak s svojo barvo o\u010di in posebnim pogledom na svet. Prve korake, prve igre \u2014 vse je ujel Igor z objektivom.<\/p>\r\n <span class=\"card-link\">\r\n Oglej si leglo\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <a class=\"litter-card\" href=\"https:\/\/truewhipp.si\/leglo-p\/\"\r\n data-year=\"2024\" data-dam=\"dam-maya\"\r\n aria-label=\"Leglo P \u2013 18. april 2024\">\r\n <div class=\"card-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/truewhipp.si\/wp-content\/uploads\/2026\/04\/IgorPuppy18.04.2024-23.jpg\"\r\n alt=\"Whippet mladi\u010di leglo P\" loading=\"lazy\" title=\"Leglo\">\r\n <div class=\"card-img-overlay\"><\/div>\r\n <span class=\"card-letter\">P<\/span>\r\n <div class=\"card-date-badge\">\r\n <span class=\"cal-month\">Apr<\/span>\r\n <span class=\"cal-year\">2024<\/span>\r\n <\/div>\r\n <div class=\"card-image-info\">\r\n <span class=\"card-subtitle\">Pomlad in njeni zakladi<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h2 class=\"card-name\">Leglo <em>P<\/em><\/h2>\r\n <div class=\"card-meta-row\">\r\n <span class=\"card-tag\">18. 4. 2024<\/span>\r\n <span class=\"card-tag\">Whippet<\/span>\r\n <span class=\"card-tag\">Igor<\/span>\r\n <\/div>\r\n <p class=\"card-desc\">Pomladni mladi\u010di, vsak s svojo lastno toplino in drobno osebnostjo. Fotografirani z ljubeznijo in pozornostjo.<\/p>\r\n <span class=\"card-link\">\r\n Oglej si leglo\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Year group 2023 -->\r\n <div class=\"year-group reveal\" id=\"group-2023\">\r\n <div class=\"year-heading\">\r\n <span class=\"year-number\">2023<\/span>\r\n <div class=\"year-rule\"><\/div>\r\n <\/div>\r\n <div class=\"litter-grid\">\r\n\r\n <a class=\"litter-card\" href=\"https:\/\/truewhipp.si\/leglo-n\/\"\r\n data-year=\"2023\" data-dam=\"dam-stella\"\r\n aria-label=\"Leglo N \u2013 2023\">\r\n <div class=\"card-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/truewhipp.si\/wp-content\/uploads\/2026\/04\/TruewhippPuppy2023-55.jpg\"\r\n alt=\"Whippet mladi\u010di leglo N\" loading=\"lazy\" title=\"Leglo\">\r\n <div class=\"card-img-overlay\"><\/div>\r\n <span class=\"card-letter\">N<\/span>\r\n <div class=\"card-date-badge\">\r\n <span class=\"cal-month\">2023<\/span>\r\n <span class=\"cal-year\">N<\/span>\r\n <\/div>\r\n <div class=\"card-image-info\">\r\n <span class=\"card-subtitle\">Vzreja z du\u0161o<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h2 class=\"card-name\">Leglo <em>N<\/em><\/h2>\r\n <div class=\"card-meta-row\">\r\n <span class=\"card-tag\">2023<\/span>\r\n <span class=\"card-tag\">Whippet<\/span>\r\n <span class=\"card-tag\">Truewhipp<\/span>\r\n <\/div>\r\n <p class=\"card-desc\">Sedem \u010dudes \u2014 vsak z ne\u017enostjo, radovednostjo in tisto posebno iskrico, ki naredi videz pasme resni\u010dno edinstven.<\/p>\r\n <span class=\"card-link\">\r\n Oglej si leglo\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <a class=\"litter-card\" href=\"https:\/\/truewhipp.si\/leglo-f\/\"\r\n data-year=\"2023\" data-dam=\"dam-maya\"\r\n aria-label=\"Leglo F \u2013 10. november 2023\">\r\n <div class=\"card-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/truewhipp.si\/wp-content\/uploads\/2026\/04\/WhippetPuppy10.11.2023-56.jpg\"\r\n alt=\"Whippet mladi\u010di leglo F\" loading=\"lazy\" title=\"Leglo\">\r\n <div class=\"card-img-overlay\"><\/div>\r\n <span class=\"card-letter\">F<\/span>\r\n <div class=\"card-date-badge\">\r\n <span class=\"cal-month\">Nov<\/span>\r\n <span class=\"cal-year\">2023<\/span>\r\n <\/div>\r\n <div class=\"card-image-info\">\r\n <span class=\"card-subtitle\">Jesen v znaku ljubezni<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h2 class=\"card-name\">Leglo <em>F<\/em><\/h2>\r\n <div class=\"card-meta-row\">\r\n <span class=\"card-tag\">10. 11. 2023<\/span>\r\n <span class=\"card-tag\">Whippet<\/span>\r\n <span class=\"card-tag\">Truewhipp<\/span>\r\n <\/div>\r\n <p class=\"card-desc\">Jesenski mladi\u010di, rojeni v zlatih dnevih. Vsak edinstven v zna\u010daju, gibanju in pogledu \u2014 od prvega dne dalje.<\/p>\r\n <span class=\"card-link\">\r\n Oglej si leglo\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Year group 2021 -->\r\n <div class=\"year-group reveal\" id=\"group-2021\">\r\n <div class=\"year-heading\">\r\n <span class=\"year-number\">2021<\/span>\r\n <div class=\"year-rule\"><\/div>\r\n <\/div>\r\n <div class=\"litter-grid\">\r\n\r\n <a class=\"litter-card\" href=\"https:\/\/truewhipp.si\/leglo-s\/\"\r\n data-year=\"2021\" data-dam=\"dam-stella\"\r\n aria-label=\"Leglo S \u2013 2021\">\r\n <div class=\"card-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/truewhipp.si\/wp-content\/uploads\/2026\/04\/Igor-11-scaled-1.jpg\"\r\n alt=\"Whippet mladi\u010di leglo S\" loading=\"lazy\" title=\"Leglo\">\r\n <div class=\"card-img-overlay\"><\/div>\r\n <span class=\"card-letter\">S<\/span>\r\n <div class=\"card-date-badge\">\r\n <span class=\"cal-month\">2021<\/span>\r\n <span class=\"cal-year\">S<\/span>\r\n <\/div>\r\n <div class=\"card-image-info\">\r\n <span class=\"card-subtitle\">Posebno leglo<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h2 class=\"card-name\">Leglo <em>S<\/em><\/h2>\r\n <div class=\"card-meta-row\">\r\n <span class=\"card-tag\">2021<\/span>\r\n <span class=\"card-tag\">Whippet<\/span>\r\n <span class=\"card-tag\">Igor<\/span>\r\n <\/div>\r\n <p class=\"card-desc\">Izjemna \u017eivahnost in zna\u010daj \u2014 vsak mladi\u010d je nosil v sebi svojo lastno iskrico. Posebno poglavje v zgodbi Truewhipp.<\/p>\r\n <span class=\"card-link\">\r\n Oglej si leglo\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <a class=\"litter-card\" href=\"https:\/\/truewhipp.si\/leglo-e\/\"\r\n data-year=\"2021\" data-dam=\"dam-maya\"\r\n aria-label=\"Leglo E \u2013 2021\">\r\n <div class=\"card-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/truewhipp.si\/wp-content\/uploads\/2026\/04\/WhippetPuppy10.10.21-70-scaled-1.jpg\"\r\n alt=\"Whippet mladi\u010di leglo E\" loading=\"lazy\" title=\"Leglo\">\r\n <div class=\"card-img-overlay\"><\/div>\r\n <span class=\"card-letter\">E<\/span>\r\n <div class=\"card-date-badge\">\r\n <span class=\"cal-month\">Okt<\/span>\r\n <span class=\"cal-year\">2021<\/span>\r\n <\/div>\r\n <div class=\"card-image-info\">\r\n <span class=\"card-subtitle\">Na\u0161e peto leglo<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h2 class=\"card-name\">Leglo <em>E<\/em><\/h2>\r\n <div class=\"card-meta-row\">\r\n <span class=\"card-tag\">2021<\/span>\r\n <span class=\"card-tag\">Whippet<\/span>\r\n <span class=\"card-tag\">Truewhipp<\/span>\r\n <\/div>\r\n <p class=\"card-desc\">Jesen 2021 \u2014 mladi\u010di, ki so z vsakim dnem bolj razkrili svojo edinstveno osebnost. \u017divahni, ne\u017eni, polni \u017eivljenja.<\/p>\r\n <span class=\"card-link\">\r\n Oglej si leglo\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Year group 2020 -->\r\n <div class=\"year-group reveal\" id=\"group-2020\">\r\n <div class=\"year-heading\">\r\n <span class=\"year-number\">2020<\/span>\r\n <div class=\"year-rule\"><\/div>\r\n <\/div>\r\n <div class=\"litter-grid\">\r\n\r\n <a class=\"litter-card\" href=\"https:\/\/truewhipp.si\/leglo-b\/\"\r\n data-year=\"2020\" data-dam=\"dam-stella\"\r\n aria-label=\"Leglo B \u2013 2020\">\r\n <div class=\"card-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/truewhipp.si\/wp-content\/uploads\/2026\/04\/119019651_234284188016621_1035765701581660615_n-scaled-1.jpg\"\r\n alt=\"Whippet mladi\u010di leglo B\" loading=\"lazy\" title=\"Leglo\">\r\n <div class=\"card-img-overlay\"><\/div>\r\n <span class=\"card-letter\">B<\/span>\r\n <div class=\"card-date-badge\">\r\n <span class=\"cal-month\">2020<\/span>\r\n <span class=\"cal-year\">B<\/span>\r\n <\/div>\r\n <div class=\"card-image-info\">\r\n <span class=\"card-subtitle\">Na\u0161e drugo leglo<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h2 class=\"card-name\">Leglo <em>B<\/em><\/h2>\r\n <div class=\"card-meta-row\">\r\n <span class=\"card-tag\">2020<\/span>\r\n <span class=\"card-tag\">Whippet<\/span>\r\n <span class=\"card-tag\">Truewhipp<\/span>\r\n <\/div>\r\n <p class=\"card-desc\">Novo valovanje radosti in \u017eivljenja. Vsak mladi\u010d edinstven po karakterju in videzu \u2014 eleganten in neukrotljiv.<\/p>\r\n <span class=\"card-link\">\r\n Oglej si leglo\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <a class=\"litter-card\" href=\"https:\/\/truewhipp.si\/leglo-a\/\"\r\n data-year=\"2020\" data-dam=\"dam-maya\"\r\n aria-label=\"Leglo A \u2013 2020\">\r\n <div class=\"card-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/truewhipp.si\/wp-content\/uploads\/2026\/04\/WhippetPuppy-60.jpg\"\r\n alt=\"Whippet mladi\u010di leglo A\" loading=\"lazy\" title=\"Leglo\">\r\n <div class=\"card-img-overlay\"><\/div>\r\n <span class=\"card-letter\">A<\/span>\r\n <div class=\"card-date-badge\">\r\n <span class=\"cal-month\">2020<\/span>\r\n <span class=\"cal-year\">A<\/span>\r\n <\/div>\r\n <div class=\"card-image-info\">\r\n <span class=\"card-subtitle\">Na\u0161e prvo leglo<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h2 class=\"card-name\">Leglo <em>A<\/em><\/h2>\r\n <div class=\"card-meta-row\">\r\n <span class=\"card-tag\">2020<\/span>\r\n <span class=\"card-tag\">Whippet<\/span>\r\n <span class=\"card-tag\">Truewhipp<\/span>\r\n <\/div>\r\n <p class=\"card-desc\">Posebno poglavje \u2014 na\u0161i prvi mladi\u010di. Eleganca, hitrost in globoka navezanost na \u010dloveka, ki definira pravo whippet pasmo.<\/p>\r\n <span class=\"card-link\">\r\n Oglej si leglo\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Empty state -->\r\n <div class=\"empty-state\" id=\"emptyState\">\r\n <p>Ni legla za izbrani filter.<\/p>\r\n <\/div>\r\n\r\n <\/section>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550 TIMELINE VIEW \u2550\u2550\u2550\u2550 -->\r\n<div class=\"timeline-section\" id=\"timelineView\">\r\n <div class=\"timeline-header reveal\">\r\n <div class=\"section-eyebrow\">Pregled<\/div>\r\n <h2 class=\"section-title\">Legla po <em>kronologiji<\/em><\/h2>\r\n <hr class=\"section-rule\">\r\n <\/div>\r\n\r\n <div class=\"timeline-track\">\r\n\r\n <div class=\"timeline-item\">\r\n <a class=\"timeline-card\" href=\"https:\/\/truewhipp.si\/leglo-p\/\">\r\n <div class=\"timeline-thumb\">\r\n <img decoding=\"async\" src=\"https:\/\/truewhipp.si\/wp-content\/uploads\/2026\/04\/IgorPuppy18.04.2024-23.jpg\" alt=\"Leglo P\" loading=\"lazy\" title=\"Leglo\">\r\n <\/div>\r\n <div class=\"timeline-info\">\r\n <span class=\"tl-date\">18. april 2024<\/span>\r\n <h3 class=\"tl-title\">Leglo <em>P<\/em><\/h3>\r\n <p class=\"tl-sub\">Pomlad in njeni zakladi<\/p>\r\n <span class=\"tl-meta\">Whippet \u00b7 Igor<\/span>\r\n <\/div>\r\n <div class=\"tl-arrow\"><svg viewBox=\"0 0 24 24\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg><\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"timeline-item\">\r\n <a class=\"timeline-card\" href=\"https:\/\/truewhipp.si\/leglo-v\/\">\r\n <div class=\"timeline-thumb\">\r\n <img decoding=\"async\" src=\"https:\/\/truewhipp.si\/wp-content\/uploads\/2026\/04\/IgorPuppy3.4.2024-45.jpg\" alt=\"Leglo V\" loading=\"lazy\" title=\"Leglo\">\r\n <\/div>\r\n <div class=\"timeline-info\">\r\n <span class=\"tl-date\">3. april 2024<\/span>\r\n <h3 class=\"tl-title\">Leglo <em>V<\/em><\/h3>\r\n <p class=\"tl-sub\">Zgodba, ki se za\u010dne z enim samim pogledom<\/p>\r\n <span class=\"tl-meta\">Whippet \u00b7 Igor<\/span>\r\n <\/div>\r\n <div class=\"tl-arrow\"><svg viewBox=\"0 0 24 24\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg><\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"timeline-item\">\r\n <a class=\"timeline-card\" href=\"https:\/\/truewhipp.si\/leglo-f\/\">\r\n <div class=\"timeline-thumb\">\r\n <img decoding=\"async\" src=\"https:\/\/truewhipp.si\/wp-content\/uploads\/2026\/04\/WhippetPuppy10.11.2023-56.jpg\" alt=\"Leglo F\" loading=\"lazy\" title=\"Leglo\">\r\n <\/div>\r\n <div class=\"timeline-info\">\r\n <span class=\"tl-date\">10. november 2023<\/span>\r\n <h3 class=\"tl-title\">Leglo <em>F<\/em><\/h3>\r\n <p class=\"tl-sub\">Jesen v znaku ljubezni<\/p>\r\n <span class=\"tl-meta\">Whippet \u00b7 Truewhipp<\/span>\r\n <\/div>\r\n <div class=\"tl-arrow\"><svg viewBox=\"0 0 24 24\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg><\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"timeline-item\">\r\n <a class=\"timeline-card\" href=\"https:\/\/truewhipp.si\/leglo-n\/\">\r\n <div class=\"timeline-thumb\">\r\n <img decoding=\"async\" src=\"https:\/\/truewhipp.si\/wp-content\/uploads\/2026\/04\/TruewhippPuppy2023-55.jpg\" alt=\"Leglo N\" loading=\"lazy\" title=\"Leglo\">\r\n <\/div>\r\n <div class=\"timeline-info\">\r\n <span class=\"tl-date\">2023<\/span>\r\n <h3 class=\"tl-title\">Leglo <em>N<\/em><\/h3>\r\n <p class=\"tl-sub\">Vzreja z du\u0161o<\/p>\r\n <span class=\"tl-meta\">Whippet \u00b7 Truewhipp<\/span>\r\n <\/div>\r\n <div class=\"tl-arrow\"><svg viewBox=\"0 0 24 24\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg><\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"timeline-item\">\r\n <a class=\"timeline-card\" href=\"https:\/\/truewhipp.si\/leglo-s\/\">\r\n <div class=\"timeline-thumb\">\r\n <img decoding=\"async\" src=\"https:\/\/truewhipp.si\/wp-content\/uploads\/2026\/04\/Igor-11-scaled-1.jpg\" alt=\"Leglo S\" loading=\"lazy\" title=\"Leglo\">\r\n <\/div>\r\n <div class=\"timeline-info\">\r\n <span class=\"tl-date\">2021<\/span>\r\n <h3 class=\"tl-title\">Leglo <em>S<\/em><\/h3>\r\n <p class=\"tl-sub\">Posebno leglo<\/p>\r\n <span class=\"tl-meta\">Whippet \u00b7 Igor<\/span>\r\n <\/div>\r\n <div class=\"tl-arrow\"><svg viewBox=\"0 0 24 24\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg><\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"timeline-item\">\r\n <a class=\"timeline-card\" href=\"https:\/\/truewhipp.si\/leglo-e\/\">\r\n <div class=\"timeline-thumb\">\r\n <img decoding=\"async\" src=\"https:\/\/truewhipp.si\/wp-content\/uploads\/2026\/04\/WhippetPuppy10.10.21-70-scaled-1.jpg\" alt=\"Leglo E\" loading=\"lazy\" title=\"Leglo\">\r\n <\/div>\r\n <div class=\"timeline-info\">\r\n <span class=\"tl-date\">Oktober 2021<\/span>\r\n <h3 class=\"tl-title\">Leglo <em>E<\/em><\/h3>\r\n <p class=\"tl-sub\">Na\u0161e peto leglo<\/p>\r\n <span class=\"tl-meta\">Whippet \u00b7 Truewhipp<\/span>\r\n <\/div>\r\n <div class=\"tl-arrow\"><svg viewBox=\"0 0 24 24\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg><\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"timeline-item\">\r\n <a class=\"timeline-card\" href=\"https:\/\/truewhipp.si\/leglo-b\/\">\r\n <div class=\"timeline-thumb\">\r\n <img decoding=\"async\" src=\"https:\/\/truewhipp.si\/wp-content\/uploads\/2026\/04\/119019651_234284188016621_1035765701581660615_n-scaled-1.jpg\" alt=\"Leglo B\" loading=\"lazy\" title=\"Leglo\">\r\n <\/div>\r\n <div class=\"timeline-info\">\r\n <span class=\"tl-date\">2020<\/span>\r\n <h3 class=\"tl-title\">Leglo <em>B<\/em><\/h3>\r\n <p class=\"tl-sub\">Na\u0161e drugo leglo<\/p>\r\n <span class=\"tl-meta\">Whippet \u00b7 Truewhipp<\/span>\r\n <\/div>\r\n <div class=\"tl-arrow\"><svg viewBox=\"0 0 24 24\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg><\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"timeline-item\">\r\n <a class=\"timeline-card\" href=\"https:\/\/truewhipp.si\/leglo-a\/\">\r\n <div class=\"timeline-thumb\">\r\n <img decoding=\"async\" src=\"https:\/\/truewhipp.si\/wp-content\/uploads\/2026\/04\/WhippetPuppy-60.jpg\" alt=\"Leglo A\" loading=\"lazy\" title=\"Leglo\">\r\n <\/div>\r\n <div class=\"timeline-info\">\r\n <span class=\"tl-date\">2020<\/span>\r\n <h3 class=\"tl-title\">Leglo <em>A<\/em><\/h3>\r\n <p class=\"tl-sub\">Na\u0161e prvo leglo<\/p>\r\n <span class=\"tl-meta\">Whippet \u00b7 Truewhipp<\/span>\r\n <\/div>\r\n <div class=\"tl-arrow\"><svg viewBox=\"0 0 24 24\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg><\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550 FOOTER NOTE \u2550\u2550\u2550\u2550 -->\r\n<div class=\"footer-note\">\r\n <p>\r\n Vsak mladi\u010d, ki je zapustil Truewhipp, nosi s seboj<br>\r\n ko\u0161\u010dek na\u0161e zgodbe \u2014 polne <strong>ljubezni, skrbi in predanosti<\/strong>.\r\n <\/p>\r\n <span class=\"footer-logo\">Truewhipp \u00b7 Vzreja z du\u0161o<\/span>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n\r\n \/* \u2500\u2500\u2500 Filter \u2500\u2500\u2500 *\/\r\n const filterBtns = document.querySelectorAll('.filter-pills .filter-btn');\r\n const allCards = document.querySelectorAll('.litter-card');\r\n const emptyState = document.getElementById('emptyState');\r\n const yearGroups = document.querySelectorAll('.year-group');\r\n\r\n filterBtns.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n filterBtns.forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n\r\n const filter = btn.dataset.filter;\r\n let visibleCount = 0;\r\n\r\n allCards.forEach(card => {\r\n const matchYear = (filter === 'all' || card.dataset.year === filter);\r\n const matchDam = (filter === 'all' || card.dataset.dam === filter);\r\n const show = (filter === 'all')\r\n ? true\r\n : (card.dataset.year === filter || card.dataset.dam === filter);\r\n\r\n if (show) {\r\n card.classList.remove('is-hidden');\r\n visibleCount++;\r\n } else {\r\n card.classList.add('is-hidden');\r\n }\r\n });\r\n\r\n \/* Show\/hide year group headings based on visible cards within them *\/\r\n yearGroups.forEach(group => {\r\n const visibleInGroup = group.querySelectorAll('.litter-card:not(.is-hidden)').length;\r\n group.style.display = visibleInGroup > 0 ? '' : 'none';\r\n });\r\n\r\n emptyState.classList.toggle('is-visible', visibleCount === 0);\r\n });\r\n });\r\n\r\n \/* \u2500\u2500\u2500 View toggle \u2500\u2500\u2500 *\/\r\n const btnGrid = document.getElementById('btnGrid');\r\n const btnTimeline = document.getElementById('btnTimeline');\r\n const gridView = document.getElementById('gridView');\r\n const timelineView = document.getElementById('timelineView');\r\n\r\n btnGrid.addEventListener('click', () => {\r\n btnGrid.classList.add('active');\r\n btnTimeline.classList.remove('active');\r\n btnGrid.setAttribute('aria-pressed', 'true');\r\n btnTimeline.setAttribute('aria-pressed', 'false');\r\n gridView.classList.remove('is-hidden');\r\n timelineView.classList.remove('is-active');\r\n });\r\n\r\n btnTimeline.addEventListener('click', () => {\r\n btnTimeline.classList.add('active');\r\n btnGrid.classList.remove('active');\r\n btnTimeline.setAttribute('aria-pressed', 'true');\r\n btnGrid.setAttribute('aria-pressed', 'false');\r\n timelineView.classList.add('is-active');\r\n gridView.classList.add('is-hidden');\r\n initTimelineReveal();\r\n });\r\n\r\n \/* \u2500\u2500\u2500 Timeline scroll reveals \u2500\u2500\u2500 *\/\r\n function initTimelineReveal() {\r\n const items = document.querySelectorAll('.timeline-item');\r\n const io = new IntersectionObserver((entries) => {\r\n entries.forEach((entry, i) => {\r\n if (entry.isIntersecting) {\r\n setTimeout(() => {\r\n entry.target.classList.add('in-view');\r\n }, 80 * Array.from(items).indexOf(entry.target));\r\n io.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.15 });\r\n items.forEach(el => io.observe(el));\r\n }\r\n\r\n \/* \u2500\u2500\u2500 General scroll reveals \u2500\u2500\u2500 *\/\r\n const reveals = document.querySelectorAll('.reveal');\r\n const revealIO = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('in-view');\r\n revealIO.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.1 });\r\n reveals.forEach(el => revealIO.observe(el));\r\n\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Legla \u00b7 Truewhipp Truewhipp \u00b7 Whippeti Na\u0161a Legla Vsako leglo \u2014 zgodba zase Vzrejamo z du\u0161o in predanostjo. Vsako leglo je za nas posebno poglavje \u2014 skupek edinstvenih osebnosti, barv in iskric, ki vsak dom napolnijo z neizmerno toplino. Tukaj hranimo spomin na vse na\u0161e mladi\u010dke. Filtriraj legla Mre\u017ea \u010casovnica Vsa legla 2024 2023 2021 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2461","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/truewhipp.si\/en\/wp-json\/wp\/v2\/pages\/2461","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/truewhipp.si\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/truewhipp.si\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/truewhipp.si\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/truewhipp.si\/en\/wp-json\/wp\/v2\/comments?post=2461"}],"version-history":[{"count":16,"href":"https:\/\/truewhipp.si\/en\/wp-json\/wp\/v2\/pages\/2461\/revisions"}],"predecessor-version":[{"id":2478,"href":"https:\/\/truewhipp.si\/en\/wp-json\/wp\/v2\/pages\/2461\/revisions\/2478"}],"wp:attachment":[{"href":"https:\/\/truewhipp.si\/en\/wp-json\/wp\/v2\/media?parent=2461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}