/* ================================================================ Register pages (Saimnieciskās darbības vietu reģistrs, Personisko zīmogu reģistrs) .rg-hero — page head, reuses .pub-hero from publications-block.css .rg-filters — filter card: select2 selects, checkboxes, buttons (--inline: selects and buttons in one row) .rg-results — count bar, table (cards below 1024px), pagination .rg-stamps — stamp catalogue cards with the stamp image The page code, handlers and field names stay as they were ================================================================ */ .rg *, .rg *::before, .rg *::after { box-sizing: border-box; } .rg-hero { padding-bottom: 48px; } .rg { position: relative; padding: 8px 0 88px; background-color: #fdfbf9; } .rg p { margin: 0; } /* ================= filters ================= */ .rg-filters { position: relative; z-index: 2; margin: 0 0 36px; padding: 30px 32px; border: 1px solid var(--pub-line); border-radius: 18px; background-color: #fff; box-shadow: var(--pub-shadow-m); } .rg-filters__head { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; } .rg-filters__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(145deg, var(--pub-red), var(--pub-bordo)); color: #fff; } .rg-filters__icon svg { width: 22px; height: 22px; } .rg-filters__title { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--pub-bordo); } .rg-filters__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 20px; } .rg-field { min-width: 0; } .rg-field__label { margin: 0 0 8px !important; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--pub-bordo-soft); } /* select2 inside the filter card */ .rg-filters .select2-container { width: 100% !important; } .rg-filters .select2-container--default .select2-selection--single { display: flex; align-items: center; height: 50px; border: 1px solid var(--pub-line); border-radius: 12px; background-color: #fdfafa; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .rg-filters .select2-container--default .select2-selection--single:hover { border-color: #d9b9c1; background-color: #fff; } .rg-filters .select2-container--default.select2-container--open .select2-selection--single, .rg-filters .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--pub-red); background-color: #fff; box-shadow: 0 0 0 4px rgba(141, 11, 44, .08); outline: none; } .rg-filters .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0 44px 0 16px; font-family: 'Roboto', sans-serif; font-size: 15px; line-height: 48px; color: var(--pub-ink); } .rg-filters .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; right: 12px; width: 24px; height: 48px; } .rg-filters .select2-container--default .select2-selection--single .select2-selection__arrow b { width: 8px; height: 8px; margin: -6px 0 0 -4px; border: solid var(--pub-red); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; } .rg-filters .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { margin-top: -2px; border-color: var(--pub-red); border-width: 0 2px 2px 0; transform: rotate(-135deg); } /* the dropdown is attached to , so it is styled only on pages with this block */ body:has(.rg-filters) .select2-dropdown { overflow: hidden; border: 1px solid #e2c3ca; border-radius: 12px; background-color: #fff; box-shadow: 0 18px 40px rgba(88, 20, 40, .16); font-family: 'Roboto', sans-serif; } body:has(.rg-filters) .select2-container--open .select2-dropdown--below { margin-top: 6px; } body:has(.rg-filters) .select2-container--open .select2-dropdown--above { margin-top: -6px; } body:has(.rg-filters) .select2-search--dropdown { padding: 10px; } body:has(.rg-filters) .select2-container--default .select2-search--dropdown .select2-search__field { height: 40px; padding: 0 12px; border: 1px solid var(--pub-line); border-radius: 9px; font-size: 15px; outline: none; } body:has(.rg-filters) .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--pub-red); } body:has(.rg-filters) .select2-container--default .select2-results > .select2-results__options { max-height: 280px; padding: 0 6px 6px; } body:has(.rg-filters) .select2-results__option { padding: 9px 12px; border-radius: 8px; font-size: 14px; line-height: 1.4; color: var(--pub-ink); } body:has(.rg-filters) .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--pub-card); color: var(--pub-bordo); } body:has(.rg-filters) .select2-container--default .select2-results__option--selected { background-color: var(--pub-bordo); color: #fff; } /* checkboxes and buttons */ .rg-filters__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 24px; margin-top: 24px; padding-top: 22px; border-top: 1px solid #f1e6e9; } .rg-checks { display: flex; flex-wrap: wrap; gap: 10px; } .rg-check { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; border: 1px solid var(--pub-line); border-radius: 999px; background-color: #fff; font-size: 15px; color: var(--pub-ink); cursor: pointer; user-select: none; transition: border-color .2s ease, background-color .2s ease, color .2s ease; } .rg-check:hover { border-color: #d9b9c1; } .rg-check__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .rg-check__box { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid #d6bcc3; border-radius: 6px; background-color: #fff; color: #fff; transition: background-color .2s ease, border-color .2s ease; } .rg-check__box svg { width: 16px; height: 16px; stroke-width: 2.4; opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease; } .rg-check:has(.rg-check__input:checked) { border-color: var(--pub-bordo); background-color: var(--pub-card); color: var(--pub-bordo); } .rg-check__input:checked + .rg-check__box { border-color: var(--pub-bordo); background-color: var(--pub-bordo); } .rg-check__input:checked + .rg-check__box svg { opacity: 1; transform: none; } .rg-check__input:focus-visible + .rg-check__box { box-shadow: 0 0 0 3px rgba(141, 11, 44, .2); } .rg-filters__btns { display: flex; flex-wrap: wrap; gap: 10px; } .rg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 26px; border: 1px solid var(--pub-bordo); border-radius: 999px; background-color: var(--pub-bordo); font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 500; color: #fff; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; } .rg-btn svg { width: 18px; height: 18px; } .rg-btn:hover { border-color: var(--pub-red); background-color: var(--pub-red); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(107, 12, 38, .2); } .rg-btn--ghost { border-color: var(--pub-line); background-color: #fff; color: var(--pub-bordo); } .rg-btn--ghost:hover { border-color: var(--pub-bordo); background-color: var(--pub-card); color: var(--pub-bordo); box-shadow: none; } .rg-btn:focus-visible { outline: 2px solid var(--pub-red); outline-offset: 2px; } /* ================= results ================= */ .rg-results { transition: opacity .2s ease; } .rg-results__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; } .rg-results__count, .rg-results__page { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--pub-bordo-soft); } .rg-results__count b { margin-left: 4px; font-size: 22px; letter-spacing: 0; color: var(--pub-bordo); } .rg-results__page { padding: 6px 12px; border-radius: 999px; background-color: var(--pub-card); letter-spacing: .04em; } /* table: 5 columns, plus person and hours when switched on */ .rg-table { --rg-cols: minmax(140px, .9fr) minmax(200px, 1.4fr) minmax(130px, .9fr) minmax(170px, 1.1fr) minmax(210px, 1.35fr); border: 1px solid var(--pub-line); border-radius: 18px; background-color: #fff; box-shadow: var(--pub-shadow-s); } .rg-table--person { --rg-cols: minmax(130px, .9fr) minmax(180px, 1.3fr) minmax(120px, .85fr) minmax(160px, 1.05fr) minmax(110px, .8fr) minmax(190px, 1.3fr); } .rg-table--hours { --rg-cols: minmax(120px, .85fr) minmax(165px, 1.2fr) minmax(110px, .8fr) minmax(150px, 1fr) minmax(175px, 1.15fr) minmax(205px, 1.15fr); } .rg-table--person.rg-table--hours { --rg-cols: minmax(105px, .8fr) minmax(140px, 1.1fr) minmax(100px, .75fr) minmax(130px, .95fr) minmax(95px, .7fr) minmax(150px, 1.05fr) minmax(205px, 1.15fr); } .rg-table__head, .rg-row { display: grid; grid-template-columns: var(--rg-cols); } .rg-table__head { position: sticky; top: 58px; z-index: 1; border-bottom: 1px solid var(--pub-line); border-radius: 18px 18px 0 0; background-color: #f8eff1; } .rg-table__th { padding: 16px 18px; font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: .04em; text-transform: uppercase; color: var(--pub-bordo); } .rg-row { border-bottom: 1px solid #f1e6e9; transition: background-color .2s ease; } .rg-row:last-child { border-bottom: 0; border-radius: 0 0 18px 18px; } .rg-row:hover { background-color: #fdf8f9; } .rg-cell { min-width: 0; padding: 20px 18px; font-size: 15px; line-height: 1.5; color: var(--pub-ink); overflow-wrap: anywhere; } .rg-nr { font-weight: 700; color: var(--pub-bordo); } .rg-date { display: flex; align-items: center; gap: 6px; margin-top: 6px !important; font-size: 14px; color: var(--pub-muted); } .rg-date svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--pub-bordo-soft); } .rg-name { font-weight: 500; } .rg-muted { margin-top: 4px !important; font-size: 14px; color: var(--pub-muted); } .rg-code { font-variant-numeric: tabular-nums; } .rg-hidden { display: inline-flex; align-items: flex-start; gap: 7px; font-size: 14px; font-style: italic; color: #a4949a; } .rg-hidden svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; } .rg-map { display: inline-flex; align-items: flex-start; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 10px; background-color: var(--pub-card); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--pub-bordo); text-decoration: none; transition: background-color .2s ease, color .2s ease; } .rg-map svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; color: var(--pub-red); } .rg-map:hover { background-color: var(--pub-bordo); color: #fff; } .rg-map:hover svg { color: #fff; } .rg-person { font-weight: 500; } .rg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .rg-tag { padding: 4px 10px; border: 1px solid var(--pub-line); border-radius: 999px; font-size: 13px; line-height: 1.4; color: var(--pub-ink); } .rg-tag--main { border-color: transparent; background-color: var(--pub-bordo); color: #fff; } .rg-hours { display: grid; gap: 3px; margin: 0; font-size: 13px; line-height: 1.45; } .rg-hours__row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; border-bottom: 1px dashed #efe3e6; } .rg-hours__row:last-child { border-bottom: 0; } .rg-hours dt { color: var(--pub-muted); white-space: nowrap; } .rg-hours dd { margin: 0; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; } /* ================= pagination (Laravel markup) ================= */ .rg-pagination .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 36px 0 0; padding: 0; list-style: none; } .rg-pagination .pagination .page-item { width: auto; min-width: 44px; height: 44px; padding: 0; border: 1px solid var(--pub-line); border-radius: 12px; background-color: #fff; font-size: 15px; font-weight: 500; color: var(--pub-ink); transition: border-color .2s ease, background-color .2s ease; } .rg-pagination .pagination .page-item a, .rg-pagination .pagination .page-item span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 12px; font-size: 15px; color: var(--pub-ink); text-decoration: none; } .rg-pagination .pagination .page-item:hover { border-color: var(--pub-bordo); background-color: var(--pub-card); } .rg-pagination .pagination .page-item:hover a { color: var(--pub-bordo); } .rg-pagination .pagination .page-item.active { border-color: var(--pub-bordo); background-color: var(--pub-bordo); } .rg-pagination .pagination .page-item.active span, .rg-pagination .pagination .page-item.active a { color: #fff; } .rg-pagination .pagination .page-item.disabled { background-color: transparent; opacity: .45; } .rg-pagination .pagination .page-item.disabled:hover { border-color: var(--pub-line); background-color: transparent; } .rg-pagination .pagination .page-item.middle { border-color: transparent; background-color: transparent; opacity: 1; } /* ================= adaptive ================= */ @media (max-width: 1200px) { .rg-filters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rg-cell, .rg-table__th { padding-left: 14px; padding-right: 14px; } } /* below 1024px every row becomes a card with labels */ @media (max-width: 1024px) { .rg-table { border: 0; background-color: transparent; box-shadow: none; } .rg-table__head { display: none; } .rg-table__body { display: grid; gap: 16px; } .rg-row, .rg-row:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; padding: 22px 24px; border: 1px solid var(--pub-line); border-radius: 16px; background-color: #fff; box-shadow: var(--pub-shadow-s); } .rg-row:hover { background-color: #fff; } .rg-cell { padding: 0; } .rg-cell::before { content: attr(data-label); display: block; margin: 0 0 6px; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--pub-bordo-soft); } /* number and date form the card head */ .rg-cell--nr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; grid-column: 1 / -1; padding-bottom: 14px; border-bottom: 1px solid #f1e6e9; } .rg-cell--nr::before { display: none; } .rg-cell--nr .rg-nr { font-size: 20px; } .rg-cell--nr .rg-date { margin-top: 0 !important; padding: 5px 11px; border-radius: 999px; background-color: var(--pub-card); } .rg-cell--name { grid-column: 1 / -1; } .rg-cell--name::before { display: none; } .rg-cell--name .rg-name { font-size: 18px; font-weight: 700; color: var(--pub-bordo); } .rg-cell--types, .rg-cell--hours { grid-column: 1 / -1; } .rg-hours { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } .rg-hours__row:nth-last-child(2) { border-bottom: 0; } } @media (max-width: 768px) { .rg-hero { padding-bottom: 32px; } .rg { padding-bottom: 64px; } .rg-filters { padding: 24px 22px; border-radius: 16px; } .rg-filters__title { font-size: 23px; } .rg-filters__foot { flex-direction: column; align-items: stretch; } .rg-filters__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 576px) { .rg-filters { margin-bottom: 28px; padding: 20px 16px; } .rg-filters__head { margin-bottom: 18px; } .rg-filters__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .rg-checks { flex-direction: column; align-items: stretch; } .rg-filters__btns { grid-template-columns: minmax(0, 1fr); } .rg-row, .rg-row:last-child { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 16px; border-radius: 14px; } .rg-cell--nr .rg-nr { font-size: 18px; } .rg-cell--name .rg-name { font-size: 17px; } .rg-hours { grid-template-columns: minmax(0, 1fr); } .rg-hours__row:nth-last-child(2) { border-bottom: 1px dashed #efe3e6; } .rg-pagination .pagination { gap: 6px; } .rg-pagination .pagination .page-item { min-width: 38px; height: 38px; border-radius: 10px; } .rg-pagination .pagination .page-item a, .rg-pagination .pagination .page-item span { padding: 0 9px; font-size: 14px; } } /* ================= inline filters (stamp register) ================= */ .rg-filters--inline .rg-filters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; } .rg-filters--inline .rg-filters__btns { flex-wrap: nowrap; } .rg-filters--inline .rg-btn { min-height: 50px; } /* ================= stamp catalogue ================= */ .rg-stamps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; } .rg-stamp { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--pub-line); border-radius: 16px; background-color: #fff; box-shadow: var(--pub-shadow-s); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .rg-stamp:hover { border-color: #e2c3ca; box-shadow: var(--pub-shadow-m); transform: translateY(-4px); } .rg-stamp__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-bottom: 1px solid #f1e6e9; background: radial-gradient(circle at 50% 45%, #fff 0, #fff 45%, rgba(255, 255, 255, 0) 72%), #faf4f5; } .rg-stamp__img { position: absolute; inset: 15%; display: block; width: 70%; height: 70%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; } .rg-stamp:hover .rg-stamp__img { transform: scale(1.06); } .rg-stamp__nr { position: absolute; z-index: 1; top: 12px; left: 12px; min-width: 32px; height: 32px; padding: 0 9px; border-radius: 999px; background-color: #fff; box-shadow: 0 4px 12px rgba(88, 20, 40, .1); font-size: 13px; font-weight: 700; line-height: 32px; text-align: center; color: var(--pub-bordo); } .rg-stamp__body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; } .rg-stamp__label { margin: 0 0 4px !important; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--pub-bordo-soft); } .rg-stamp__name { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--pub-bordo); overflow-wrap: anywhere; } .rg-stamp__meta { display: grid; gap: 6px; margin: 14px 0 0; } .rg-stamp__meta div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px dashed #efe3e6; font-size: 14px; } .rg-stamp__meta dt { color: var(--pub-muted); } .rg-stamp__meta dd { margin: 0; font-weight: 500; text-align: right; color: var(--pub-ink); font-variant-numeric: tabular-nums; } .rg-stamp__foot { margin-top: auto; padding-top: 16px; } .rg-stamp__links { display: flex; flex-wrap: wrap; gap: 8px; } .rg-stamp__link { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 12px; border: 1px solid var(--pub-line); border-radius: 999px; background-color: #fff; font-size: 14px; font-weight: 500; color: var(--pub-bordo); text-decoration: none; white-space: nowrap; transition: border-color .2s ease, background-color .2s ease, color .2s ease; } .rg-stamp__link svg { width: 17px; height: 17px; } .rg-stamp__link:hover { border-color: var(--pub-bordo); background-color: var(--pub-bordo); color: #fff; } .rg-stamp__link:focus-visible { outline: 2px solid var(--pub-red); outline-offset: 2px; } @media (max-width: 1200px) { .rg-stamps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1024px) { .rg-filters--inline .rg-filters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rg-filters--inline .rg-filters__btns { grid-column: 1 / -1; justify-content: flex-end; } } @media (max-width: 768px) { .rg-stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .rg-filters--inline .rg-filters__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* phones: image on the left, details on the right */ @media (max-width: 576px) { .rg-filters--inline .rg-filters__grid { grid-template-columns: minmax(0, 1fr); } .rg-filters--inline .rg-filters__btns { grid-template-columns: minmax(0, 1fr); } .rg-stamps { grid-template-columns: minmax(0, 1fr); gap: 12px; } .rg-stamp { flex-direction: row; border-radius: 14px; } .rg-stamp:hover { transform: none; } .rg-stamp__media { flex: 0 0 112px; align-self: stretch; aspect-ratio: auto; min-height: 112px; border-right: 1px solid #f1e6e9; border-bottom: 0; } .rg-stamp__img { inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); } .rg-stamp__nr { top: 8px; left: 8px; min-width: 26px; height: 26px; padding: 0 7px; font-size: 12px; line-height: 26px; } .rg-stamp__body { min-width: 0; padding: 14px 14px 14px 16px; } .rg-stamp__name { font-size: 16px; } .rg-stamp__meta { margin-top: 10px; } .rg-stamp__meta div { font-size: 13px; } .rg-stamp__foot { padding-top: 12px; } .rg-stamp__link { min-height: 36px; font-size: 13px; } }