/* Edoris — small custom layer on top of Tailwind utilities. */ /* Lock background scroll while the mobile menu overlay is open. Belt-and-braces for iOS Safari, where overflow:hidden alone can still rubber-band. The JS adds .overflow-hidden to and ; the menu panel itself keeps its own scroll via overflow-y-auto + overscroll-contain. */ html.overflow-hidden, body.overflow-hidden { overflow: hidden !important; overscroll-behavior: none; height: 100%; } /* Hero "blueprint" grid. Two repeating gradients only — no images, no blur, so it costs nothing to load and paints in a single pass. The mask fades the pattern out toward the bottom-left so text always sits on clean white. */ .hero-grid { background-image: repeating-linear-gradient(0deg, rgba(37, 99, 235, 0.05) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(37, 99, 235, 0.05) 0 1px, transparent 1px 28px); background-position: right top; } .hero-grid::after { content: ''; position: absolute; inset: 0; z-index: 0; /* stays under the content, which is z-10 */ pointer-events: none; /* Tinted toward the sidebar newsletter card's brand blue (#2563eb) so the two blocks read as one palette across the row. */ background: linear-gradient(115deg, #fff 30%, rgba(255, 255, 255, 0.75) 55%, rgba(37, 99, 235, 0.14) 100%); } /* The hero's audience cards need no CSS of their own — they use the same Tailwind grid as the "Populiarūs renginiai" section, and the rotation only toggles `hidden` and flex order. Kept deliberately styleless so a stale cached stylesheet can never break their layout. The position indicator below them is decoration only: if this rule never arrives the dots are just small grey blocks, and the cards still work. */ /* Every audience card is held to the height of the tallest one, so the row does not jump as cards rotate through. Phones need their own floor: a single wide card wraps the text shorter, so the desktop value would leave dead space, but without any floor the card still resized by ~19px on every change. */ .aud-card-box { min-height: 168px; } @media (min-width: 640px) { .aud-card-box { min-height: 184px; } } .aud-dot { width: 20px; height: 3px; border: 0; padding: 0; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: background .25s ease, width .25s ease; } .aud-dot:hover { background: #94a3b8; } .aud-dot.is-active { width: 30px; background: #475569; } /* The list view is driven by data-view, not by which classes happen to be on the container. A stale cached script could leave the card grid classes in place while list rows are inside, which laid three rows across a line and overlapped their text. Pinning the layout to the attribute makes that combination impossible regardless of what the JS did. */ #listing-results[data-view="sarasas"] { display: block; gap: 0; } /* Compact list rows. Alternating bands are what make a long list scannable; without them the eye loses its place after a dozen lines. */ .list-row:nth-child(even) { background: #fafbfc; } .list-row:hover { background: #eff6ff; } /* Multi-line clamps (Tailwind CDN includes line-clamp, kept as fallback) */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Listing filter dropdowns — size to their label (no clipped text), with room for the native arrow. Compact; full-width on mobile, auto on desktop. */ .filter-select { border: 1px solid #e2e8f0; border-radius: 0.5rem; background: #fff; padding: 0.3rem 1.5rem 0.3rem 0.6rem; /* compact; right padding for the arrow */ font-size: 0.8125rem; line-height: 1.2; color: #334155; width: 100%; } @media (min-width: 640px) { /* Grow to fill each row evenly with no wasted space. A larger flex-basis pushes to ~4 per row, so 7 filters land as a full 4 + 3 across two rows. */ .filter-select { flex: 1 1 22%; width: auto; min-width: 150px; } } .filter-select:focus { outline: none; box-shadow: 0 0 0 2px #2563eb; border-color: #2563eb; } /* Sidebar quick-filter chips */ .filter-chip { border: 1px solid #e2e8f0; border-radius: 9999px; padding: 0.375rem 0.875rem; font-size: 0.8125rem; font-weight: 600; color: #475569; background: #fff; transition: all 0.15s ease; cursor: pointer; } .filter-chip:hover { border-color: #2563eb; color: #1d4ed8; background: #eff6ff; } .filter-chip--active { background: #2563eb; border-color: #2563eb; color: #fff; } /* Calendar days */ .cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; font-size: 0.8125rem; color: #cbd5e1; cursor: default; } .cal-day--event { color: #1e293b; font-weight: 600; background: #eff6ff; cursor: pointer; position: relative; } .cal-day--event::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 9999px; background: #10b981; } .cal-day--event:hover { background: #dbeafe; } .cal-day--today { outline: 2px solid #2563eb; outline-offset: -2px; } .cal-day--selected { background: #2563eb; color: #fff; } .cal-day--selected::after { background: #fff; } /* Rich text content (admin editor output) */ /* Wrap long unbroken strings (e.g. a pasted URL or "ssss…") so they never overflow the content column and break the page layout. */ .rich-content { overflow-wrap: break-word; word-break: break-word; } /* Article reading typography — larger, more comfortable measure with a drop cap on the opening paragraph and generous vertical rhythm. Used on every straipsnis (/straipsnis/{slug}). */ .article-editorial { font-size: 18px; line-height: 1.75; } .article-editorial p { margin: 0 0 1.4rem; } .article-editorial h2 { font-size: 1.6rem; margin: 2.2rem 0 0.8rem; letter-spacing: -0.01em; } .article-editorial h3 { font-size: 1.25rem; margin: 1.8rem 0 0.6rem; } .article-editorial > p:first-of-type { font-size: 1.15em; color: #334155; } .article-editorial > p:first-of-type::first-letter { font-size: 3.1em; font-weight: 800; float: left; line-height: 0.82; margin: 0.05em 0.08em 0 0; color: #2563eb; } /* Photo galleries inserted from the editor (▦). Plain CSS grid — no JavaScript, so it cannot break on the public side. auto-fit keeps it at two or three columns on a desktop and collapses to one on a phone. */ .article-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem; margin: 1.75rem 0; } .article-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.5rem; margin: 0; /* the grid gap does the spacing */ } /* Same grid inside the admin editor, so what you compose matches the page. */ .rich-editor .article-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; margin: 1rem 0; } .rich-editor .article-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.375rem; } /* Same cap as the public article, so the editor shows the real size. */ .rich-editor img { display: block; max-width: 100%; max-height: 360px; width: auto; margin: 1rem auto; border-radius: 0.5rem; } .rich-editor .article-gallery img { max-height: none; width: 100%; margin: 0; } /* Room to breathe inside the article body. */ .article-editorial ul, .article-editorial ol { margin: 0 0 1.4rem; padding-left: 1.6rem; } .article-editorial li { margin: 0.4rem 0; } /* Inline photos: capped by height, not width, so a tall or square shot cannot take over the screen the way a full-width 4:3 does. Centred, since a capped image is usually narrower than the text column. */ .article-editorial img { display: block; max-width: 100%; max-height: 360px; width: auto; margin: 1.75rem auto; border-radius: 0.5rem; } /* Gallery tiles set their own size — the cap above must not shrink them. */ .article-editorial .article-gallery img { max-height: none; width: 100%; margin: 0; } .article-editorial blockquote { margin: 1.75rem 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 3px solid #cbd5e1; color: #475569; font-style: italic; } .article-editorial a { text-decoration-thickness: 1px; text-underline-offset: 2px; } /* Comfortable line length on wide screens without shrinking the font. */ @media (min-width: 640px) { .article-editorial { font-size: 19px; } } .rich-content h2 { font-size: 1.375rem; font-weight: 700; color: #0f172a; margin: 1.25rem 0 0.5rem; } .rich-content h3 { font-size: 1.125rem; font-weight: 700; color: #0f172a; margin: 1rem 0 0.4rem; } .rich-content p { margin: 0.5rem 0; } .rich-content ul { list-style: disc; padding-left: 1.5rem; margin: 0.5rem 0; } .rich-content ol { list-style: decimal; padding-left: 1.5rem; margin: 0.5rem 0; } .rich-content a { color: #1d4ed8; text-decoration: underline; } /* Smooth page feel */ html { scroll-behavior: smooth; }