.odweb-ref {
--odwr-dark: #292930;
--odwr-text: #444444;
--odwr-muted: #6B6B7A;
--odwr-line: #E4E6F2;
--odwr-soft: #F7F8FD;
--odwr-dot: #D9DCEA;
--odwr-lime: #DDFF33;
--odwr-violet: #5840BA;
--odwr-lilac: #EEEAFB;
--odwr-head: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
--odwr-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--odwr-radius: 20px;
--odwr-cols: 340px;
color: var(--odwr-text);
}
.odweb-ref *,
.odweb-ref *::before,
.odweb-ref *::after { box-sizing: border-box; } .odweb-ref__filter {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 32px;
}
.odweb-ref__tab {
appearance: none;
min-height: 40px;
padding: 0 14px;
border: 1.5px solid var(--odwr-line);
border-radius: 8px;
background: #fff;
color: var(--odwr-dark);
font: 500 13px/1 var(--odwr-mono);
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease;
}
.odweb-ref__tab span { color: var(--odwr-muted); margin-left: 4px; }
.odweb-ref__tab:hover { border-color: var(--odwr-dark); }
.odweb-ref__tab[aria-pressed="true"] {
background: var(--odwr-lime);
border-color: var(--odwr-lime);
font-weight: 600;
}
.odweb-ref__tab[aria-pressed="true"] span { color: var(--odwr-dark); }
.odweb-ref__tab:focus-visible,
.odweb-ref__more:focus-visible,
.odweb-ref__link:focus-visible { outline: 2px solid var(--odwr-violet); outline-offset: 3px; } .odweb-ref__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--odwr-cols)), 1fr));
gap: 28px;
}
.odweb-ref__card[hidden] { display: none !important; } .odweb-ref__link {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1.5px solid var(--odwr-line);
border-radius: var(--odwr-radius);
overflow: hidden;
color: inherit;
text-decoration: none !important;
transition: transform .2s ease, border-color .2s ease;
}
.odweb-ref__link:hover { transform: translateY(-4px); border-color: var(--odwr-dark); }
.odweb-ref__bar {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
border-bottom: 1.5px solid var(--odwr-line);
}
.odweb-ref__dots { display: flex; gap: 6px; flex: none; }
.odweb-ref__dots i { width: 8px; height: 8px; border-radius: 50%; background: #FF5F57; }
.odweb-ref__dots i:nth-child(2) { background: #FEBC2E; }
.odweb-ref__dots i:nth-child(3) { background: #28C840; }
.odweb-ref__url {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: 400 12px/1.4 var(--odwr-mono);
color: var(--odwr-muted);
}
.odweb-ref__media {
display: block;
aspect-ratio: 1200 / 938;
background: var(--odwr-soft);
overflow: hidden;
}
.odweb-ref__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.odweb-ref__media--empty {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--odwr-soft);
background-image: radial-gradient(var(--odwr-dot) 1.2px, transparent 1.3px);
background-size: 22px 22px;
}
.odweb-ref__logo {
display: block;
max-width: 60%;
padding: 18px 22px;
background: #fff;
border: 1.5px solid var(--odwr-line);
border-radius: 14px;
}
.odweb-ref__logo img { width: 100%; height: auto; max-height: 90px; object-fit: contain; }
.odweb-ref__placeholder {
padding: 10px 18px;
border-radius: 999px;
background: #fff;
font: 600 20px/1.3 var(--odwr-head);
letter-spacing: -0.02em;
color: var(--odwr-dark);
text-align: center;
overflow-wrap: anywhere;
}
.odweb-ref__foot {
display: flex;
align-items: center;
flex: 1 0 auto;
gap: 12px;
padding: 16px 18px;
border-top: 1.5px solid var(--odwr-line);
}
.odweb-ref__text { min-width: 0; display: flex; flex-direction: column; }
.odweb-ref__title {
font: 600 17px/1.3 var(--odwr-head);
letter-spacing: -0.02em;
color: var(--odwr-dark);
overflow-wrap: anywhere;
}
.odweb-ref__meta { margin-top: 2px; font: 400 12px/1.4 var(--odwr-mono); color: var(--odwr-muted); }
.odweb-ref__badge {
flex: none;
white-space: nowrap;
padding: 3px 8px;
border-radius: 6px;
font: 500 11px/1.4 var(--odwr-mono);
text-align: center;
background: var(--odwr-lilac);
color: var(--odwr-violet);
}
.odweb-ref__badge--eshopy { background: var(--odwr-lime); color: var(--odwr-dark); }
.odweb-ref__badge--jednostranky { background: #fff; border: 1px solid #C9CCDA; color: var(--odwr-dark); } .odweb-ref__more-wrap { display: flex; justify-content: center; margin-top: 40px; }
.odweb-ref__more-wrap[hidden] { display: none; }
.odweb-ref__more {
appearance: none;
min-height: 50px;
padding: 0 28px;
border: 1.5px solid var(--odwr-dark);
border-radius: 999px;
background: #fff;
color: var(--odwr-dark);
font: 600 14px/1 var(--odwr-head);
cursor: pointer;
transition: transform .15s ease;
}
.odweb-ref__more:hover { transform: translateY(-2px); }
.odweb-ref-empty { padding: 16px; border: 1.5px dashed #C9CCDA; border-radius: 12px; font-family: monospace; }
@media (prefers-reduced-motion: reduce) {
.odweb-ref__link, .odweb-ref__more, .odweb-ref__tab { transition: none; }
.odweb-ref__link:hover, .odweb-ref__more:hover { transform: none; }
}