/*main*/ body {font-family: 'Rubik', sans-serif;line-height:1.5; font-size:16px; overflow-x:hidden;color:var(--ink); font-weight:400;background:var(--white); } a {transition:.2s; text-decoration:none; color:inherit; border-bottom:1px solid transparent} a:hover {color:var(--mc)} .inner {width:95%; max-width:1030px; margin:0 auto; } .outer {width:95%; max-width:1280px; margin:0 auto; } /* Mock-up measure: the category grid runs 70px..1210px on a 1280px artboard, so the content column is 1140px wide with a 70px gutter on each side. */ .wrapper {width:100%; max-width:1280px; margin:0 auto; padding:0 70px; } /* Design system: rectangular, uppercase, letter-spaced buttons (no rounding anywhere). */ .btn {font:inherit;height:40px;line-height:40px; padding:0 26px; border-radius:0; border:none; cursor:pointer; text-decoration:none; transition:.2s;position: relative; margin:0 auto; font-size:17px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; display:inline-block; text-align:center} .btn:focus-visible {outline:2px solid var(--ink); outline-offset:2px} .s1 {background:var(--orange); color:#fff;white-space:nowrap } .s1:hover {background:var(--orange-deep); color:#fff} .s2 {background:#fff; color:var(--ink);white-space:nowrap; box-shadow:inset 0 0 0 1px #e0e0e0 } .s2:hover {background:var(--bg-grey); color:var(--ink)} .s3 {background:#003fa9; color:#fff;white-space:nowrap } .s3:hover {opacity:.88; color:#fff} .s4 {background:#c9c9c9; color:var(--ink);white-space:nowrap } .s4:hover {background:#bcbcbc; color:var(--ink)} .s5 {background:#de1515; color:#fff;white-space:nowrap } .s5:hover {opacity:.88; color:#fff} .h1 {font-size:50px; font-weight:bold; margin-bottom:20px; line-height:1.1} .h2 {font-weight: bold;font-size: 30px; margin-bottom:30px} .h3 {font-weight: bold;font-size: 24px; margin-bottom:30px} /* Screen-reader-only label for icon-only controls. */ .visually-hidden {position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0} .p150 {padding:150px 0 !important} /*common*/ /* Header, footer and the advertising slots live in the "REFIXO frame" section at the end of this file. */ .searchForm {position:relative; margin:0 auto; } .searchForm button {position:absolute; top:0; right:0;} .searchForm input {display:block; width:100%; border:none; outline:none; font-size:inherit; font-weight:inherit; color:inherit; transition:.2s} .searchForm input:focus::placeholder {opacity:0} .postContent {} .postContent p {margin-bottom:20px} .postContent h1 {font-size:50px; font-weight:bold; margin-bottom:20px; line-height:1.1} .postContent * + h1 {margin-top:30px} .postContent h2 {font-weight: bold;font-size: 30px; margin-bottom:30px} .postContent * + h2 {margin-top:30px} .postContent h3 {font-weight: bold;font-size: 24px; margin-bottom:30px} .postContent * + h3 {margin-top:30px} .postContent h4 {font-weight: bold;font-size: 20px; margin-bottom:20px} .postContent * + h4 {margin-top:20px} .postContent h5 {font-weight: bold;font-size: 18px; margin-bottom:20px} .postContent * + h5 {margin-top:20px} .postContent ul, .postContent ol {list-style-position:inside; margin:30px 0} /* ЭТАП 6: version + effective date line at the top of the policy and the terms. It has to be visible — app\components\Consent::POLICY_VERSION is recorded against every consent, and a user checking what they agreed to needs to be able to read that string on the page — but it is reference data, not prose, so it sits quietly above the first section. */ .postContent .policyMeta {display:inline-block; margin:0 0 26px; padding:8px 16px; background:var(--bg-grey); font-size:14px; color:#5f5f5f} /* ЭТАП 6: the privacy policy carries a cookie table (name / purpose / category / lifetime). The wrapper is what scrolls, not the page — a four-column table cannot shrink below its content on a 320px screen, and letting the body scroll sideways instead breaks every other page. The wrapper div comes from the policy markup itself. */ .postContent .tableScroll {margin:30px 0; overflow-x:auto; -webkit-overflow-scrolling:touch} .postContent table {width:100%; min-width:560px; border-collapse:collapse; font-size:15px} .postContent th, .postContent td {padding:12px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--hairline)} .postContent th {background:var(--bg-grey); font-weight:600; white-space:nowrap} .postContent tbody tr:last-child td {border-bottom:0} .postContent blockquote { border-left: 6px solid var(--mc);font-style: italic;margin: 30px 0 30px 50px;padding: 15px 25px; position: relative;} .chosen-container .list {max-height:300px; overflow-y:auto; width:100%} .chosen-container .option {white-space: normal; line-height: 1.2;padding: 7px 15px;} .chosen-container .current{width: 100%;display: block;white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} /*static page*/ .staticPage {padding:40px 0} /*get offer*/ .offerPage {} .offerPage h2, .offerPage h3 {text-align:center} .offerPage .steps {display:flex; align-items:center; justify-content:center} .offerPage .steps ._item {margin:0 30px; display:flex; align-items:center; line-height:1.1} .offerPage .steps ._item i {font-size:50px; display:block; font-weight:bold; margin-right:10px} .offerForm {max-width:800px; margin:30px auto; display:flex; flex-wrap:wrap; justify-content:space-between} .offerForm ._title { font-weight:bold;margin-bottom:10px} .offerForm ._title:after {content:''; display:block; width:100px; height:2px; background:var(--mc); border-radius:6px; margin:5px auto 0 0;} .offerForm ._main {width:100%; margin-bottom:30px} .offerForm ._item {width:47%; margin-bottom:30px} .offerForm input {border-radius:6px; display:block; width:100%; margin:0 ; height:40px;line-height:40px; border:none; outline:none; padding:0 20px; box-shadow:2px 2px 13px 0px #bbb;font-size:inherit; font-weight:inherit; color:inherit; opacity:0.6; transition:.2s} .offerForm input:focus::placeholder {opacity:0} .offerForm textarea {border-radius:6px; display:block; width:100%; margin:0 ; height:140px;line-height:20px; border:none; outline:none; padding:10px 20px; box-shadow:2px 2px 13px 0px #bbb;font-size:inherit; font-weight:inherit; color:inherit; opacity:0.6; transition:.2s} .offerForm textarea:focus::placeholder {opacity:0} .offerForm .chosen-container {width:100%; border-radius:6px; height:40px;line-height:40px; margin:0 ;} .offerForm select {width:100%; border-radius:6px; height:40px;line-height:40px; margin:0 ;} /* Direct children only: the thumbnails carry their own nested
badges (COVER), and a descendant selector handed those the 25%-wide tile geometry too. */ .offerForm ._gallery {display:flex; flex-wrap:wrap; margin:0 -10px} .offerForm ._gallery > div {width:calc(25% - 10px); margin:0 5px 10px 5px;} .offerForm ._gallery > div img {display:block; width:100%; height:100%; object-fit:cover;} .offerForm .btn {margin:20px auto 0 auto;} .advertCallback {background:#fff; padding:20px; border-radius:6px;max-width: 400px; width:95%;max-height:90vh !important; overflow-y: auto;} .advertCallback ._title {text-align:center; font-size:24px; font-weight:bold; margin-bottom:20px} .advertCallback .btn {display:table; margin:0 auto} /*advert form*/ .advForm {padding:40px 0} .advForm ._flex {display:flex} .advForm ._flex ._main {flex-grow:1; margin-right:40px} .advForm ._flex ._sidebar {width:300px; flex-shrink:0} .advForm ._title { font-weight:bold; font-size:18px;margin-bottom:15px} .advForm ._title:after {content:''; display:block; width:100px; height:3px; background:var(--mc); border-radius:6px; margin:5px auto 0 0;} .advForm .form-group {margin-bottom:30px} .advForm input {border-radius:6px; display:block; width:100%; margin:0 ; height:40px;line-height:40px; border:none; outline:none; padding:0 20px; box-shadow:2px 2px 13px 0px #bbb;font-size:inherit; font-weight:inherit; color:inherit; opacity:0.6; transition:.2s} .advFormm input:focus::placeholder {opacity:0} .advForm textarea {border-radius:6px; display:block; width:100%; margin:0 ; height:140px;line-height:20px; border:none; outline:none; padding:10px 20px; box-shadow:2px 2px 13px 0px #bbb;font-size:inherit; font-weight:inherit; color:inherit; opacity:0.6; transition:.2s} .advFormm textarea:focus::placeholder {opacity:0} .advForm .help-block {color:red; font-size:11px; text-align:center;} .advForm .chosen-container {width:100%; border-radius:6px; height:40px;line-height:40px; margin:0 ;} .advForm select {width:100%; border-radius:6px; height:40px;line-height:40px; margin:0 ;} .advForm .labledInput {display:flex; align-items:center; margin-bottom:30px} .advForm .labledInput .form-group {margin-bottom:0; flex-grow:1} .advForm .labledInput span {display:block; margin-left:20px} /* Price unit select sits right under the price input, as one "base price" block. */ .advForm .labledInput + .priceUnit {margin-top:-20px} /* Direct children only. This used to be a descendant selector, which also matched the .cover-indicator
nested inside the first thumbnail: the badge was given width:calc(25% - 10px) of the tile (~27px) plus a 5px margin, so its green plate came out narrower than and offset from the word COVER printed on top of it. */ .advForm ._gallery {display:flex; flex-wrap:wrap; margin:0 -10px} .advForm ._gallery > div {width:calc(25% - 10px); margin:0 5px 10px 5px;} .advForm ._gallery > div img {display:block; width:100%; height:100%; object-fit:cover;} .advForm ._servicesRow {display:flex; align-items:center;flex-wrap:wrap; width:100%;padding-right:30px; box-sizing:border-box; position:relative; justify-content:space-between; border-bottom:1px solid #bbb; margin-bottom:10px} .advForm ._servicesRow input {width:47%; margin-bottom:10px } .advForm ._servicesRow input:nth-child(3) {width:100%} .advForm ._servicesRow button {width:20px; height:20px; position:absolute; top:calc(50% - 10px); right:0; border:none; background:none; transition:.2s; cursor:pointer; } .advForm ._servicesRow button:hover{ color:#dc0a0a} .advForm ._servicesRow:last-of-type {border-bottom:none; margin-bottom:30px} /* Eight languages, each labelled with its translated name beside the flag. One per row: the sidebar is 300px, and a two-column split leaves ~79px for the text, which breaks the longer Russian names ("Французский") across lines. Full width keeps every name on one line. */ .formFalgs {margin-bottom:30px; } .formFalgs > div {display:flex; gap:10px 12px; flex-wrap:wrap} .formFalgs label {display:flex; align-items:center; cursor:pointer; width:100%; margin:0; min-width:0} .formFalgs label input {flex:0 0 auto; width: 15px;height: 15px;box-shadow: none;border-radius: 0; margin-right: 10px;} .formFalgs label img {display:block; flex:0 0 auto; width:30px; height:21px; object-fit:cover} .formFalgs label span {margin-left:10px; font-size:15px; line-height:1.3; min-width:0} form .help-block {color:red; text-align:center} /*loading files*/ .invader-text-print-wrapper {display:none; width:100%} .invader-text-print {display:flex; align-items:center; justify-content:flex-start;} .invader-text-print-box{position: relative;width:25px; height:5px; margin-right:15px; margin-bottom:0 !important; } .invader-text-print-icon{position: relative;width: 5px;height: 5px;top: 0%;left: 46%;border-radius: 12px;animation: loader10m 1.5s ease-in-out infinite;} .invader-text-print-icon:before{content: "";position: absolute;top: 0px;left: -10px;height: 5px;width: 5px;border-radius: 5px;animation: loader10g 1.5s ease-in-out infinite;} .invader-text-print-icon:after{content: "";position: absolute;top: 0px;left: 10px;height:5px;width:5px;border-radius: 10px;animation: loader10d 1.5s ease-in-out infinite;} @keyframes loader10g {0%{background-color: rgba(0, 0, 0, .2);}25%{background-color: rgba(0, 0, 0, 1);}50%{background-color: rgba(0, 0, 0, .2);}75%{background-color: rgba(0, 0, 0, .2);}100%{background-color: rgba(0, 0, 0, .2);}} @keyframes loader10m{0%{background-color: rgba(0, 0, 0, .2);}25%{background-color: rgba(0, 0, 0, .2);}50%{background-color: rgba(0, 0, 0, 1);}75%{background-color: rgba(0, 0, 0, .2);}100%{background-color: rgba(0, 0, 0, .2);} } @keyframes loader10d{0%{background-color: rgba(0, 0, 0, .2);}25%{background-color: rgba(0, 0, 0, .2);}50%{background-color: rgba(0, 0, 0, .2);}75%{background-color: rgba(0, 0, 0, 1);}100%{background-color: rgba(0, 0, 0, .2);}} .stipeForm .stripe-button-el:not(.custom) {display:none !important} /* Image Gallery with Drag & Drop */ #upload-list._gallery { /* CRITICAL for touch drag & drop */ touch-action: none; -ms-touch-action: none; } #upload-list._gallery div { position: relative; cursor: move; border: 2px solid transparent; transition: all 0.2s; /* CRITICAL for touch events */ touch-action: none; -ms-touch-action: none; } #upload-list._gallery div:hover { border-color: #007bff; box-shadow: 0 2px 8px rgba(0,123,255,0.2); } /* Delete button */ #upload-list._gallery div .delete-btn { position: absolute; top: 5px; right: 5px; background: rgba(220, 53, 69, 0.9); color: white; border: none; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: all 0.2s; font-size: 12px; } #upload-list._gallery div:hover .delete-btn { opacity: 1; } #upload-list._gallery div .delete-btn:hover { background: rgba(220, 53, 69, 1); transform: scale(1.1); } /* Cover indicator. width/margin/border are pinned here on purpose: this badge is a
inside a thumbnail, so any `._gallery div` rule that styles the tiles would otherwise size and shift the badge as well. Pinned, the plate is exactly as wide as the word it wraps and stays in the corner. */ #upload-list._gallery div .cover-indicator { position: absolute; top: 5px; left: 5px; width: auto; margin: 0; border: 0; box-sizing: border-box; background: rgba(40, 167, 69, 0.9); color: white; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: bold; line-height: 1; letter-spacing: .04em; white-space: nowrap; cursor: default; z-index: 10; } #upload-list._gallery div.is-cover { border-color: #28a745; box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2); } /* Sortable placeholder */ #upload-list._gallery .ui-state-highlight { background: rgba(0, 123, 255, 0.1); border: 2px dashed #007bff; margin: 0; visibility: visible !important; height: auto !important; } #upload-list._gallery .ui-state-highlight:before { content: 'Drop here'; display: flex; align-items: center; justify-content: center; color: #007bff; font-weight: bold; height: 100px; } /* Mobile touch improvements for image sorting */ @media (max-width: 768px) { #upload-list._gallery div { /* Increase touch target size */ padding: 4px; margin: 2px; /* Better visual feedback for touch */ border-width: 3px; position: relative; } /* Set Cover button on mobile */ #upload-list._gallery .set-cover-btn { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); background: rgba(76, 175, 80, 0.95); color: white; border: none; border-radius: 4px; padding: 8px 16px; font-size: 12px; font-weight: bold; text-transform: uppercase; cursor: pointer; transition: all 0.2s; -webkit-tap-highlight-color: transparent; z-index: 15; box-shadow: 0 2px 4px rgba(0,0,0,0.2); -webkit-user-select: none; -moz-user-select: none; user-select: none; } #upload-list._gallery .set-cover-btn:active { transform: translateX(-50%) scale(0.95); background: rgba(67, 160, 71, 1); } #upload-list._gallery .set-cover-btn:focus { outline: none !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; } #upload-list._gallery div .delete-btn { /* Always visible on mobile */ opacity: 1; /* Larger touch target */ width: 40px; height: 40px; font-size: 16px; /* Better positioning */ top: 8px; right: 8px; } #upload-list._gallery div .cover-indicator { /* Better positioning on mobile */ top: 8px; left: 8px; padding: 4px 10px; font-size: 11px; } #upload-list._gallery .ui-state-highlight { /* More prominent drop indicator */ border-width: 3px; background: rgba(0, 123, 255, 0.2); } #upload-list._gallery .ui-state-highlight:before { font-size: 14px; height: 80px; } /* Add visual feedback during drag */ #upload-list._gallery .ui-sortable-helper { transform: scale(1.05); box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important; border-color: #007bff !important; z-index: 1000; } #upload-list._gallery .ui-sortable-dragging { opacity: 0.7; } /* Prevent text selection during drag */ #upload-list._gallery { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* Disable iOS text selection callouts */ -webkit-touch-callout: none; /* Improve touch scrolling */ -webkit-overflow-scrolling: touch; } } /* General improvements for all screen sizes */ #upload-list._gallery .ui-sortable-helper { transform: scale(1.02); box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important; border-color: #007bff !important; z-index: 1000; } #upload-list._gallery .ui-sortable-dragging { opacity: 0.8; } /* Hide mobile arrows on desktop */ #upload-list._gallery .mobile-arrows { display: none; } @media (min-width: 769px) { #upload-list._gallery .mobile-arrows { display: none !important; } } @media (max-width:1100px) { } @media (max-width:960px) { .advForm ._flex {flex-direction:column} .advForm ._flex ._main {margin:0} .advForm ._flex ._sidebar {width:100%; margin:20px 0 0 0} } @media (max-width:600px) { .h1 {font-size:40px} .postContent h1 {font-size:40px} .postContent blockquote {margin: 20px 0 20px 30px;} .staticPage {padding-top:0} .offerPage .steps {flex-direction:column} .offerPage .steps ._item {margin:0 auto 20px auto;line-height:1;width: 200px;} .offerPage .steps ._item:last-child {margin-bottom:0} .offerPage .steps ._item i {font-size: 40px;margin-right: 5px;} .offerForm ._item {width:100%} .breadcrumbs .btns {width:100%; flex-direction:column;align-items:flex-start; gap:10px; margin-top:10px} .p150 {padding:0 0 40px 0 !important} } .chosen-container {} .chosen-container-single .chosen-single {height:100%; border-radius:6px; background:none; box-shadow:none} .chosen-container-single .chosen-single span {height: 100%;line-height:40px} /* Form validation error styles */ .field-posts-email.has-error input, .field-posts-name.has-error input, .field-posts-text.has-error textarea { border: 2px solid #dc3545; background-color: #fff5f5; } .help-block { color: #dc3545; font-size: 14px; margin-top: 5px; font-weight: 500; } .form-group.has-error .form-label { color: #dc3545; } /* ========================================================================= REFIXO frame — header, advertising slots, footer (ЭТАП 5, part A) Colour tokens live in the DB (static_block 3 "Custom CSS Params") and are inlined after this file, so the fallbacks below only matter if that block is empty. Everything here is built against the seven design mockups. ========================================================================= */ :root{ /* Fallbacks — the DB block is the source of truth for the palette. */ --orange:#FB9145; --orange-deep:#FF980F; --ink:#373737; --bg-grey:#F2F2F2; --white:#FFFFFF; /* Speckled light band shared by the header, the hero and "Naujausi skelbmai". The texture is the designer's bokeh photograph (forwebsitedesign/images/5a44bb9aca...png, 1280x720), re-encoded as band-bg.jpg. On the artboards it is washed out over white: fitting the artboard pixel by pixel against the source gives out = 0.24*src + 0.76*255, so the veil below is a flat 76% white over a white base - no gradient of its own. Every band is painted "center / cover", which is what the artboards measure: hero, 618px tall -> y offset -51 (measured -50, r=0.98 over 31k px) inner header, 127 -> y offset -297 (measured -300, r=0.96, mock-up 02) adverts band, 769 -> x offset -44 (measured -45, r=0.77) The url() stays in the rules rather than in a custom property so that it keeps resolving against this stylesheet, not against the document. */ --band-veil:linear-gradient(rgba(255,255,255,.76), rgba(255,255,255,.76)); --band-base:#FFFFFF; --hairline:#E2E2E2; --placeholder:#8A7A72; /* Header height on the hero pages. The logo (233px wide, 98px tall) is the tallest item in the row, so 21px of padding above and below gives the 140px band the mock-up shows. .hero::before reaches back up by exactly this much to paint behind the header. */ --header-h:140px; } /* ---------- Header ---------- */ .header {position:relative; z-index:20; padding:21px 0; border-bottom:1px solid rgba(0,0,0,.07); background:var(--band-veil), url(../images/template/band-bg.jpg) center/cover no-repeat var(--band-base);} .header .wrapper {display:flex; align-items:center; gap:26px} /* Artboard: the wordmark's ink is 207px wide; the PNG carries ~11% of transparent padding, so the element itself has to be 233px for the ink to land on 207px. */ .header ._logo {display:block; width:233px; flex:0 0 auto; border:none; line-height:0; margin-left:-13px} .header ._logo img {display:block; width:100%; height:auto} /* 20px narrower than the artboard's 520px: the language switcher grew when its flags went from square to their natural 4:3, and the row has to stay on one line. */ .header .searchForm {flex:1 1 auto; min-width:0; max-width:500px; margin:0} .header .searchForm input {padding:0 54px 0 18px} .header__actions {display:flex; align-items:center; gap:18px; margin-left:auto} .header__user {width:40px; height:40px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--ink); color:#fff; font-size:18px; border:none; transition:.2s} .header__user:hover {background:var(--orange); color:#fff} .header__user:focus-visible {outline:2px solid var(--orange); outline-offset:2px} .header__cta {flex:0 0 auto} /* The mockups carry no language switcher; keep it small so it reads as a utility, not a nav item. */ .header ._lang {display:flex; align-items:center; gap:6px; margin:0} /* Kept in colour: at this size a grayscaled flag is unreadable. Inactive ones are dimmed instead. */ .header ._lang a {display:block; border:none; line-height:0; opacity:.55; transition:.2s} .header ._lang a:hover {opacity:1} .header ._lang a:focus-visible {outline:2px solid var(--orange); outline-offset:2px} .header ._lang a.active {opacity:1; outline:2px solid var(--orange); outline-offset:1px} /* Every flag SVG we ship is 801x600, so 28x21 is its own 4:3 ratio: the flag reads as a horizontal rectangle and nothing is cropped or squeezed. object-fit is a no-op at this ratio and only guards against an odd-sized SVG being added later. */ .header ._lang a img {display:block; width:28px; height:21px; object-fit:cover} .header__burger {display:none; width:44px; height:44px; padding:0; border:none; background:var(--ink); cursor:pointer; position:relative; flex:0 0 auto} .header__burger span[aria-hidden] {display:block; width:20px; height:2px; margin:0 auto; background:#fff; position:relative; transition:.2s} .header__burger span[aria-hidden]::before, .header__burger span[aria-hidden]::after {content:''; position:absolute; left:0; width:20px; height:2px; background:#fff; transition:.2s} .header__burger span[aria-hidden]::before {top:-6px} .header__burger span[aria-hidden]::after {top:6px} .header__burger[aria-expanded="true"] span[aria-hidden] {background:transparent} .header__burger[aria-expanded="true"] span[aria-hidden]::before {top:0; transform:rotate(45deg)} .header__burger[aria-expanded="true"] span[aria-hidden]::after {top:0; transform:rotate(-45deg)} /* The hero pages carry their search in the hero band (mock-ups 01 and 05), so the header search is hidden there and the header sits flush on the same grain surface. */ .heroPage .header {border-bottom:0; background:none} .heroPage .header .searchForm {display:none} /* ---------- Search field ---------- */ .searchForm input {height:48px; line-height:48px; background:#fff; border:1px solid var(--hairline); border-radius:0; box-shadow:none; opacity:1; padding:0 130px 0 18px; color:var(--ink)} .searchForm input::placeholder {color:var(--placeholder); opacity:1} .searchForm input:focus {border-color:var(--orange)} .searchForm__submit {position:absolute; top:0; right:0; width:60px; height:48px; display:flex; align-items:center; justify-content:center; background:none; border:none; padding:0; color:var(--orange); font-size:22px; cursor:pointer; transition:.2s} .searchForm__submit:hover {color:var(--orange-deep)} .searchForm__submit:focus-visible {outline:2px solid var(--orange); outline-offset:-2px} /* ---------- Advertising slots ---------- */ .adBanner {position:relative; background:var(--ink)} .adBanner__link {display:block; position:relative; border:none} .adBanner__img {display:block; width:100%; height:100%; object-fit:cover} .adBanner__caption {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; color:#fff; font-weight:700; font-size:28px; line-height:1.25; letter-spacing:.06em; text-transform:uppercase; text-shadow:0 2px 14px rgba(0,0,0,.5)} .adBanner--h {margin:0} .adBanner--h .adBanner__img {height:284px} /* Sidebar rail (mockup 04); the page templates that use it land in the later parts of ЭТАП 5. */ .adBanner--v {width:100%} .adBanner--v .adBanner__img {height:100%; min-height:520px} .adBanner--v .adBanner__caption {font-size:24px; letter-spacing:.08em; line-height:1.8} /* ---------- Footer ---------- */ /* Geometry taken from "01. Pradinis.jpeg": the footer panel runs y=2415..3151 on the 1280px artboard, split into a 510px form column and a 420px info column 152px apart. The artboard draws that 1084px pair inset by 98px, i.e. 28px narrower on each side than the 1140px `.wrapper` every section above it uses — measured on the artboard, the advert cards run x=70..1210 while the footer form starts at x=98. The client reads that offset as a bug (the footer edges do not line up with the blocks above), so the footer now uses the same `.wrapper` as the rest of the page and the two columns keep their 510:420 ratio inside it. The extra 56px goes to the outer edges only: at 1280px the columns come out 70..612 and 764..1210, which puts the inner edges within ~4px of the artboard while the outer ones now sit exactly on the page grid. */ .footer {position:relative; overflow:hidden; background:var(--white); color:var(--ink); font-size:16px; padding:24px 0 0} .footer::before, .footer::after {content:none} /* Decorative paint-roller stroke sweeping out of the bottom-right corner. roller.png is a horizontal stroke with the roller head at its right end; the artboard shows that stroke rotated 39.5 degrees anticlockwise, its painted band 123px thick and the head clipped by the right page edge. Reproducing that means: width 95% of the footer (1216px at 1280, whose 122px band matches), rotation about the element centre, and the unrotated box pushed 19.5% past the right edge so the centre lands on the stroke axis measured off the artboard. overflow:hidden above does the clipping, so nothing here can produce a horizontal scrollbar. */ .footer__brush {position:absolute; z-index:0; right:-19.5%; bottom:34px; width:95%; aspect-ratio:1200/343; pointer-events:none; background:url(../images/template/roller.png) no-repeat center/100% 100%; transform-origin:50% 50%; transform:rotate(-39.5deg)} .footer__grid {position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,510fr) minmax(0,420fr); column-gap:152px; row-gap:40px; align-items:start} .footer__col--form {max-width:none} .footer__intro {margin:0 0 49px; line-height:2; color:#4a4a4a} .footer__title {font-size:50px; font-weight:700; line-height:1.1; color:var(--orange); margin:0 0 15px} .footer__subtitle {font-size:16px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; margin:0 0 70px} .footer__block {margin:0 0 43px} .footer__block p {margin:0; line-height:2} .footer__blockTitle {font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:15px; line-height:1.5; margin:0 0 4px} .footer__mail a, .footer__phone a {border-bottom:1px solid transparent} .footer__mail a:hover, .footer__phone a:hover {color:var(--orange); border-bottom-color:currentColor} /* The phone sits directly under the e-mail, above the social icons, so it only needs the small gap the icons already leave - no extra vertical rhythm of its own. */ .footer__phone {margin:0 0 6px} .footer__socials {display:flex; align-items:center; gap:10px; list-style:none; margin:0; padding:0} .footer__socials li {margin:0} .footer__socials li::before {content:none} /* Client override of artboard 01: the mock-up draws these as black circles, but the brief asks for squares, which also matches the rest of the design system (every button, the header user chip and the advert-card meta icons are square, radius 0). */ .footer__socials a {display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:0; background:var(--ink); color:#fff; font-size:13px; border:none; transition:.2s} .footer__socials a:hover {background:var(--orange); color:#fff} /* The big wordmark is the last item of the info column, not a free-floating absolute layer: on the artboard its ink starts on the column's own left edge and it rides on top of the roller stroke. The negative margin cancels the transparent padding baked into the PNG (36px of its 640px width) so the ink, not the canvas, lines up. Artboard 01 puts the WHITE-gear variant of the mark here, not the orange one from the header: the mark sits on the orange roller stroke, where an orange gear disappears. logo-white-gear.png is logo.png with the gear recoloured, so the alpha geometry - and therefore the -14px and the 316px below - is unchanged. */ .footer__logo {display:block; width:316px; max-width:100%; margin:31px 0 0 -14px; aspect-ratio:640/270; background:url(../images/template/logo-white-gear.png) no-repeat left center/contain; pointer-events:none} /* Feedback form (static_block 61/62/191, rendered through Constructor::getForm). */ .footerForm {display:block} .footerForm .ajaxform-field {margin:0 0 16px} .footerForm .ajaxform-label {display:block; font-size:16px; line-height:1.5; margin:0 0 4px; color:var(--ink)} .footerForm input[type="text"], .footerForm input[type="email"], .footerForm input[type="tel"], .footerForm textarea {display:block; width:100%; font:inherit; color:var(--ink); background:var(--bg-grey); border:1px solid transparent; border-radius:0; padding:0 16px; height:45px; outline:none; transition:.2s} .footerForm textarea {min-height:120px; height:120px; resize:vertical; line-height:1.5; padding:12px 16px} .footerForm input::placeholder, .footerForm textarea::placeholder {color:var(--placeholder); opacity:1} .footerForm input:focus, .footerForm textarea:focus {border-color:var(--orange); background:#fff} .footerForm .ajaxform-field__checkbox {margin:16px 0 20px} .footerForm .ajaxform-field__checkbox label {margin:0} .footerForm .ajaxform-field__checkbox label span {background:transparent; font-size:16px} .footerForm .ajaxform-field__checkbox label b {border-radius:0; border-color:#9c9c9c; width:16px; height:16px} /* The native box is only a 6px hit area in libs.css; hide it but keep it focusable. */ .footerForm .ajaxform-field__checkbox label input {opacity:0} .footerForm .ajaxform-field__checkbox label input:focus-visible + span b {outline:2px solid var(--orange); outline-offset:2px} .footerForm .ajaxform-btns {margin:0} /* The artboard's SIUSTI button is 52px tall, taller than the 40px chrome buttons. */ .footerForm .btn {display:block; width:100%; margin:0; height:52px; line-height:52px} /* padding-bottom, not the `padding` shorthand: this element also carries .wrapper, whose `padding:0 70px` is what keeps the copyright row on the same left edge as the columns above it. The shorthand used to win (same specificity, declared later) and zeroed the side padding, so the row sat 70px further out than the rest of the footer. */ .footer__bottom {position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding-bottom:44px; margin-top:8px; font-size:16px} .footer__bottomLeft {display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; max-width:60%} /* .default-menu in libs.css packs to the right and pads every link — reset both here. */ .footer__bottom nav {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:4px 12px} .footer__bottom nav a {border:none; color:var(--orange); position:relative; margin:0; padding:0 0 0 13px} .footer__bottom nav a::before {content:'|'; position:absolute; left:0; color:#c9c9c9} .footer__bottom nav a:hover {color:var(--orange-deep); text-decoration:underline} .footer__author {margin-left:auto; color:#8a8a8a} .footer__author a {border:none} .footer__author a:hover {color:var(--orange)} /* ---------- Frame responsive ---------- */ @media (max-width:1180px) { .wrapper {padding:0 40px} .header .wrapper {gap:18px} /* Keep --header-h in step with the logo: the band behind the header is drawn from it. */ .header ._logo {width:200px} :root {--header-h:127px} .header .searchForm {max-width:400px} .footer__grid {column-gap:90px} .footer__logo {width:270px} } @media (max-width:1024px) { .hero__title, .sectionTitle {font-size:38px} .hero__number span {font-size:38px} .catCard__name {font-size:19px; bottom:22px; left:16px; right:16px} .advCard__title {font-size:20px} .footer__grid {column-gap:56px; row-gap:36px} .footer__title {font-size:40px} .footer__subtitle {letter-spacing:.1em; margin-bottom:44px} .footer__block {margin-bottom:32px} .footer__logo {width:230px; margin-top:24px} } @media (max-width:860px) { /* Header collapses to logo + burger; the search drops to its own row and stays visible. */ .header {padding:12px 0} :root {--header-h:92px} .header .wrapper {flex-wrap:wrap; gap:12px} .header ._logo {width:160px; margin-right:auto} .header__burger {display:flex; align-items:center; justify-content:center; order:2} .header .searchForm {order:3; flex:1 0 100%; max-width:none} .header__actions {order:4; flex:1 0 100%; display:none; margin:0; justify-content:flex-start; flex-wrap:wrap; gap:12px; padding-top:4px} .header__actions.is-open {display:flex} .header__cta {flex:1 1 auto} .heroPage .header .searchForm {display:none} .adBanner--h .adBanner__img {height:200px} .adBanner__caption {font-size:22px} .footer {padding:36px 0 0} .footer__grid {grid-template-columns:minmax(0,1fr); gap:36px} .footer__col--form {max-width:none; order:2} .footer__col--info {order:1} .footer__title {font-size:34px} .footer__intro {margin-bottom:28px} /* One column: the stroke shrinks to a corner accent below the content so it never runs under the copy, and the wordmark stops overlapping it. */ .footer__brush {right:-30%; bottom:-40px; width:620px; max-width:150%; transform:rotate(-24deg)} /* From here down the stroke no longer runs under the wordmark, so the mark is back on plain white and the white gear would read as a hole. Swap in the header's orange-gear file - identical alpha geometry, so the negative margin still lands the ink correctly. */ .footer__logo {width:200px; margin:20px 0 0 -9px; background-image:url(../images/template/logo.png)} .footer__bottom {padding-bottom:28px; margin-top:24px} .footer__bottomLeft {max-width:none; flex:1 0 100%} .footer__author {margin-left:0; flex:1 0 100%} } @media (max-width:600px) { .wrapper {padding:0 20px} :root {--header-h:84px} .header ._logo {width:142px} .searchForm input {height:44px; line-height:44px} .searchForm__submit {height:44px} .adBanner--h .adBanner__img {height:160px} .adBanner__caption {font-size:17px; letter-spacing:.04em} .adBanner--v .adBanner__img {min-height:320px} .footer__title {font-size:28px} .footer__subtitle {font-size:14px; letter-spacing:.08em; margin-bottom:26px} /* On the narrowest screens the roller reads as noise behind the text - drop it, and reclaim the bottom lane that only existed to let it pass under the copyright row. */ .footer__brush {display:none} .footer__logo {width:170px; margin:14px 0 0 -8px} } @media (prefers-reduced-motion: reduce) { .header__burger span[aria-hidden], .header__burger span[aria-hidden]::before, .header__burger span[aria-hidden]::after {transition:none} } /* ========================================================================= REFIXO — home page and "Visos kategorijos" (ЭТАП 5, part B) Built against mock-ups "01. Pradinis.jpeg" and "05. Kategorijos.jpeg". Palette tokens come from the DB block inlined after this file; the fallbacks in the part A section above cover an empty block. ========================================================================= */ /* ---------- Hero band (shared by the home page and the categories page) ---------- */ /* The header sits on the same surface, so the band starts behind it and the two read as one light, faintly speckled panel — exactly as in both mock-ups. */ .heroPage {background:var(--white)} /* The band is painted by the hero, not by the header: on the artboard the grey panel starts at y=0 and runs to y=617 as one uninterrupted surface, and a header carrying its own copy of the band would restart the "cover" crop of the texture and leave a seam. ::before reaches back up by the header's height instead, so nothing moves in the flow and a flash message rendered between the two still paints on top of the band. */ .hero {position:relative; background:none; padding:53px 0 69px; text-align:center} .hero::before {content:''; position:absolute; z-index:-1; left:0; right:0; bottom:0; top:calc(-1 * var(--header-h)); pointer-events:none; background:var(--band-veil), url(../images/template/band-bg.jpg) center/cover no-repeat var(--band-base)} .hero__title {font-size:46px; font-weight:700; line-height:1.15; color:var(--ink); margin:0 auto 26px; max-width:900px} .hero__search {max-width:568px; width:100%; margin:0 auto} /* The magnifier lives inside the field, so the text must stop before it. */ .hero__search input {height:48px; line-height:48px; padding:0 90px 0 20px} .hero__search .searchForm__submit {height:48px; width:85px; font-size:26px} /* Artboard: the three columns sit 60px apart, numbers 44px, labels 16px. */ .hero__numbers {display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:16px 60px; margin:35px auto 0} .hero__number {display:flex; flex-direction:column; align-items:center; text-align:center} .hero__number span {font-size:44px; font-weight:700; line-height:1; color:var(--ink)} .hero__number em {font-style:normal; display:block; margin-top:8px; font-size:16px; line-height:1.35; color:var(--ink)} .hero__intro {max-width:690px; margin:25px auto 0; font-size:16px; line-height:2; color:#4f4f4f} .hero__intro p {margin:0} .hero__intro p + p {margin-top:0} /* ---------- Shared section heading ---------- */ /* Measured off the artboard: the section headings and the h1 are the same size (46px). */ .sectionTitle {font-size:46px; font-weight:700; line-height:1.2; color:var(--ink); text-align:center; margin:0 0 30px} /* ---------- "Kategorijos" photo grid ---------- */ .catSection {background:var(--white); padding:48px 0 49px} /* 4 x 277.5px cards with a 10px gutter fill the 1140px column exactly. */ .catGrid {display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px} .catCard {position:relative; display:block; overflow:hidden; border:none; aspect-ratio:6/5; background:var(--bg-grey); box-shadow:0 6px 16px rgba(0,0,0,.13); transition:transform .25s, box-shadow .25s} .catCard:hover {transform:translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.2)} .catCard:focus-visible {outline:3px solid var(--orange); outline-offset:2px} .catCard__img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s} .catCard:hover .catCard__img {transform:scale(1.05)} /* Legibility floor for the caption, whatever the photo does at its bottom edge. */ .catCard::after {content:''; position:absolute; left:0; right:0; bottom:0; height:62%; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,0) 100%)} .catCard__name {position:absolute; z-index:1; left:22px; right:22px; bottom:31px; color:#fff; font-weight:700; font-size:23px; line-height:1.25} /* Fallback tile for a category with no picture yet. */ .catCard--noimg {background:linear-gradient(140deg, var(--orange) 0%, var(--orange-deep) 100%)} .catCard--noimg::after {background:linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 70%)} .catCard__icon {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:44px; color:rgba(255,255,255,.85)} .catSection__more {display:table; margin:48px auto 0} /* ---------- "Naujausi skelbmai" ---------- */ .advSection {padding:35px 0 60px; background:var(--band-veil), url(../images/template/band-bg.jpg) center/cover no-repeat var(--band-base)} /* A plain grid would stretch two cards across three tracks; auto-fit columns of a fixed width keep the card proportions and centre a short row instead. */ .advCards {display:flex; flex-wrap:wrap; justify-content:center; gap:14px} /* Artboard: 3 x 370.7px with a 14px gutter. The card body is #F2F2F2 there, not white - the photo is the only pure-white area of the card. */ .advCard {flex:0 1 370px; max-width:100%; display:flex; flex-direction:column; background:var(--bg-grey); box-shadow:0 4px 16px rgba(0,0,0,.16)} .advCard__photo {display:block; border:none; aspect-ratio:116/100; overflow:hidden; background:var(--bg-grey)} .advCard__photo img {display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s} .advCard:hover .advCard__photo img {transform:scale(1.04)} .advCard__body {padding:19px 30px 24px} .advCard__title {font-size:22px; font-weight:700; line-height:1.3; margin:0 0 15px} .advCard__title a {border:none} .advCard__title a:hover {color:var(--orange)} .advCard__cat {font-size:16px; line-height:1.5; color:#5c5c5c; margin:0 0 19px} /* 40px orange tiles, 11px apart, with the copy optically centred against each tile - including the two-line address, which the artboard centres as a block. */ .advCard__meta {list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px} .advCard__meta li {display:flex; align-items:center; gap:26px; margin:0; padding:0; font-size:16px; line-height:1.4} .advCard__meta li::before {content:none} .advCard__meta li i {flex:0 0 40px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--orange); color:#fff; font-size:18px} .advCard__meta li > span {min-width:0} .advCard__flags {display:flex; flex-wrap:wrap; align-items:center; gap:14px} .advCard__flags img {display:block; width:30px; height:20px; object-fit:cover} /* ---------- "Visos kategorijos" list ---------- */ .catListSection {background:var(--white); padding:64px 0 70px} /* Multi-column keeps the sort order reading down each column, like the mock-up. */ .catList {columns:3; column-gap:44px; list-style:none; margin:0; padding:0} .catList li {break-inside:avoid; margin:0 0 12px; padding:0; position:relative; font-size:15px; line-height:1.4} .catList li::before {content:'\00BB'; color:var(--orange); font-weight:700; margin-right:8px} .catList li a {border:none} .catList li a:hover {color:var(--orange)} .catList__empty {text-align:center; color:#5c5c5c} /* ---------- Part B responsive ---------- */ @media (max-width:1024px) { .hero__numbers {gap:16px 40px} .catList {column-gap:32px} } @media (max-width:860px) { .hero {padding:26px 0 46px} .hero__title {font-size:32px; margin-bottom:22px} .hero__number span {font-size:32px} .hero__number em {font-size:14px} .hero__intro {font-size:14px; line-height:1.75} .sectionTitle {font-size:32px; margin-bottom:34px} .catSection, .catListSection {padding:48px 0 54px} .advSection {padding:46px 0 52px} .catGrid {grid-template-columns:repeat(2, minmax(0, 1fr))} .catList {columns:2} /* One advert card per row from here down, capped so it does not blow up on a tablet. */ .advCard {flex:1 1 100%; max-width:440px} .advCard__title {font-size:19px} .advCard__cat {font-size:15px; margin-bottom:16px} .advCard__meta li {gap:16px; font-size:15px} .advCard__meta li i {flex:0 0 34px; width:34px; height:34px; font-size:15px} } @media (max-width:600px) { .hero {padding:20px 0 38px} .hero__title {font-size:27px; margin-bottom:20px} .hero__number span {font-size:26px} .sectionTitle {font-size:26px} .btn {font-size:14px; padding:0 18px} .hero__search input {height:46px; line-height:46px} .hero__search .searchForm__submit {height:46px} /* Grid, not flex: the third caption is the longest and would wrap onto its own row, leaving a lopsided 2 + 1. Equal tracks keep the three counters on one line. */ .hero__numbers {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px 10px; margin-top:28px} .hero__number {min-width:0} .hero__number em {font-size:12px} .hero__intro {margin-top:22px} .catGrid {grid-template-columns:minmax(0, 1fr); gap:12px} .catCard {aspect-ratio:16/9} .catCard__name {font-size:17px} .catList {columns:1} .advCard__body {padding:18px 18px 22px} .advCard__title {font-size:17px} } @media (max-width:400px) { /* At 320px a track is ~95px wide and "paslaugų teikėjai" no longer fits at 12px. */ .hero__numbers {gap:16px 6px} .hero__number em {font-size:11px} } @media (prefers-reduced-motion: reduce) { .catCard, .catCard__img, .advCard__photo img {transition:none} .catCard:hover {transform:none} .catCard:hover .catCard__img, .advCard:hover .advCard__photo img {transform:none} } /* ========================================================================= REFIXO — category listing and advert page (ЭТАП 5, part C) Built against mock-ups "06. Kategorija.jpeg" and "07. Skelbimo puslapis.jpeg". The legacy .breadcrumbs / .pagination / .categoryHead / .categoryFilter / .getOfferForm / .advertPage rules were deleted rather than overridden, so everything those selectors do now lives here. ========================================================================= */ /* ---------- Shared atoms ---------- */ /* Square orange glyph used for author / location / contact rows on both pages. */ .advIcon {flex:0 0 auto; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; background:var(--orange); color:#fff; font-size:11px; line-height:1} /* An unverified specialist must not get the same confident orange tick. */ .advIcon--muted {background:#b5b5b5} .badge {display:inline-block; padding:6px 12px; font-size:13px; line-height:1.25; border-radius:0} .badge--accent {background:var(--orange); color:#fff} .badge--muted {background:#EFEFEF; color:#5f5f5f} /* ---------- Breadcrumbs ---------- */ .breadcrumbs {padding:18px 0 0; background:var(--white)} .breadcrumbs .wrapper {display:flex; align-items:center; flex-wrap:wrap; gap:2px 8px; font-size:14px; color:#6b6b6b} .breadcrumbs a {border:none; color:#6b6b6b} .breadcrumbs a:hover {color:var(--orange)} .breadcrumbs .fa-home {color:var(--orange); font-size:16px; display:block} .breadcrumbs .fa-angle-right {color:#bdbdbd; font-size:11px; display:block} .breadcrumbs span {color:var(--ink)} .breadcrumbs .btns {display:flex; flex-wrap:wrap; gap:10px; margin:0 0 0 auto} .breadcrumbs .btns .btn {color:#fff} /* ---------- Category head ---------- */ .categoryHead {padding:16px 0 26px; background:var(--white)} .categoryHead .h1 {font-size:clamp(30px, 3.6vw, 46px); line-height:1.1; margin:0 0 10px; overflow-wrap:anywhere} .categoryHead__count {margin:0; font-size:15px; color:#5f5f5f} .categoryHead__count strong {color:var(--ink); font-weight:700} /* Only rendered while a category still has children — the taxonomy is flat since ЭТАП 4. */ .categoryHead .subCategory {display:flex; flex-wrap:wrap; gap:6px 20px; margin:24px 0 0} .categoryHead .subCategory > div {width:calc(33.333% - 14px); font-size:15px; line-height:1.4} .categoryHead .subCategory > div i {color:var(--orange); font-size:11px} .categoryHead .subCategory > div a {border:none} .categoryHead .subCategory > div a:hover {color:var(--orange)} /* ---------- Filter bar ---------- */ /* Full-bleed grey band; the controls line up on one baseline and carry no rounding. */ .categoryFilter {background:var(--bg-grey); padding:20px 0} .categoryFilter__bar {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 24px} .categoryFilter__group {display:flex; align-items:center; flex-wrap:wrap; gap:14px} /* One skin for both select plugins: chosen for the 62-city list, niceSelect for the short ones. */ .categoryFilter .nice-select, .categoryFilter .chosen-container-single .chosen-single {height:42px; line-height:40px; box-sizing:border-box; background:var(--white); border:1px solid var(--hairline); border-radius:0; box-shadow:none; font-family:inherit; font-size:15px; color:var(--ink); padding:0 34px 0 16px} .categoryFilter .nice-select:hover, .categoryFilter .chosen-container-active .chosen-single {border-color:var(--orange)} .categoryFilter .nice-select::after {border-color:#8a8a8a; right:16px} .categoryFilter .nice-select .list {border-radius:0; margin-top:0; min-width:100%} /* The sort select sits on the right edge and its Russian labels are the longest on the page; anchored left the closed list still counts towards scrollWidth and pushed the whole document 6px sideways, so this one opens towards the inside. */ .categoryFilter__sort .nice-select .list {left:auto; right:0} .categoryFilter .chosen-container-single .chosen-single span {line-height:40px; margin-right:0} .categoryFilter .chosen-container .chosen-drop {border-radius:0} /* chosen draws its caret with a sprite that the flat white skin above paints over; swap it for the same CSS chevron niceSelect uses so both filters carry one arrow. */ .categoryFilter .chosen-container-single .chosen-single div {display:none} .categoryFilter .chosen-container-single .chosen-single::after {content:''; position:absolute; right:16px; top:50%; width:5px; height:5px; margin-top:-4px; border-bottom:2px solid #8a8a8a; border-right:2px solid #8a8a8a; transform-origin:66% 66%; transform:rotate(45deg); pointer-events:none; transition:.15s} .categoryFilter .chosen-container-active.chosen-with-drop .chosen-single::after {transform:rotate(-135deg)} .categoryFilter__city .chosen-container {min-width:260px} .categoryFilter__distance .nice-select {min-width:118px} .categoryFilter__sort .nice-select {min-width:200px} /* The checkbox sits on the grey band, so the white pill background from libs.css must go. */ .categoryFilter .ajaxform-field__checkbox label {margin:0} .categoryFilter .ajaxform-field__checkbox label span {background:none; font-size:15px} .categoryFilter .ajaxform-field__checkbox label b {border-radius:0; border-color:#a5a5a5; background:var(--white); width:16px; height:16px} .categoryFilter .ajaxform-field__checkbox label input:focus-visible + span b {outline:2px solid var(--orange); outline-offset:2px} /* ---------- Advert rows ---------- */ .advList {padding:34px 0 0; background:var(--white)} .advRows {display:flex; flex-direction:column; gap:18px} /* Mock-up 06 frames only the copy: the photo is a flush square standing outside the box, so the row's hairline runs around the text and stops where the picture starts. */ .advRow {display:flex; background:var(--white)} /* display:block so the owner's list can render the frame as a when the advert has no public page to link to (see views/user/settings/advert.php). */ .advRow__photo {display:block; position:relative; flex:0 0 280px; width:280px; min-height:230px; overflow:hidden; border:none; background:var(--bg-grey)} .advRow__photo img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover} .advRow__flags {position:absolute; left:10px; bottom:10px; display:flex; align-items:center; gap:4px} .advRow__flags img {position:static; display:block; width:30px; height:21px; object-fit:cover} .advRow__body {flex:1 1 auto; min-width:0; padding:22px 26px 24px; border:1px solid var(--hairline); border-left:0} .advRow__title {font-size:22px; font-weight:700; line-height:1.25; margin:0 0 14px; overflow-wrap:anywhere} .advRow__title a {border:none} .advRow__title a:hover {color:var(--orange)} /* Four lines then an ellipsis, exactly as the mock-up cuts the copy. */ .advRow__desc {margin:0 0 16px; font-size:15px; line-height:1.75; color:#5a5a5a; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden} .advRow__line {display:flex; align-items:center; gap:10px; margin:0 0 8px; font-size:15px; overflow-wrap:anywhere} .advRow__badges {display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0} .advListError {padding:60px 20px 80px; text-align:center; font-size:22px; font-weight:700; color:#6b6b6b} /* ---------- Pagination ---------- */ .pagination {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; width:100%; margin:34px 0 0; padding:0; list-style:none} .pagination li {display:block; margin:0; padding:0; list-style:none; width:auto; height:auto; line-height:normal; background:none} .pagination li::before {content:none} .pagination li a {display:flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border:1px solid var(--hairline); background:var(--white); color:var(--ink); font-weight:600; font-size:15px; transition:.2s} .pagination li a:hover {border-color:var(--orange); color:var(--orange)} .pagination li.active a {background:var(--orange); border-color:var(--orange); color:#fff} .pagination li.disabled a {opacity:.4; pointer-events:none} /* ---------- "Gauti pasiulyma" strip ---------- */ /* Not in mock-up 06, but /get-offer has no other entry point on the site — see the note in views/advert/category.php. Redrawn flat so it reads as a utility bar, not a second hero. */ .offerStrip {padding:34px 0 0; background:var(--white)} .getOfferForm {display:flex; align-items:center; flex-wrap:wrap; gap:16px 20px; text-align:left; background:var(--bg-grey); border:1px solid var(--hairline); border-radius:0; padding:20px 24px; position:static; overflow:visible} .getOfferForm::before {content:none} .getOfferForm > i {flex:0 0 auto; color:var(--orange); font-size:26px; margin:0} .getOfferForm > span {flex:0 1 auto; font-size:19px; font-weight:700; margin:0; line-height:1.3} .getOfferForm .searchForm {display:flex; flex:1 1 340px; min-width:260px; max-width:none; margin:0 0 0 auto; position:static} .getOfferForm .searchForm input {flex:1 1 auto; min-width:0; height:44px; line-height:44px; padding:0 16px} .getOfferForm .searchForm .btn {position:static; flex:0 0 auto; height:44px; line-height:44px; margin:0; border-radius:0} /* ---------- Category SEO copy ---------- */ .categoryDesc {padding:34px 0 44px; background:var(--white)} /* Capped on the paragraph, not on the wrapper: a narrower wrapper would centre the copy and break the left edge every other section on the page lines up on. */ .categoryDesc p {max-width:78ch; font-size:15px; line-height:1.85; color:#4f4f4f} .categoryDesc p:last-child {margin-bottom:0} /* ========================================================================= Advert page (mock-up 07) ========================================================================= */ .advertPage {padding:16px 0 54px; background:var(--white)} .advertPage__title {font-size:clamp(30px, 3.6vw, 46px); font-weight:700; line-height:1.15; margin:0 0 26px; max-width:820px; overflow-wrap:anywhere} .advertPage__grid {display:grid; grid-template-columns:minmax(0, 1fr) 310px; gap:40px; align-items:start} .advertPage__main {min-width:0} .advertPage__meta {display:flex; flex-wrap:wrap; margin:0 0 24px; font-size:14px; color:#7c7c7c} .advertPage__meta span + span::before {content:'|'; margin:0 10px; color:#c9c9c9} .advertPage__text {font-size:15px; line-height:1.85; color:#4f4f4f; max-width:72ch; overflow-wrap:anywhere} .advertPage__h {font-size:24px; font-weight:700; line-height:1.25; margin:38px 0 18px} .extraServices {margin:0} .extraServices__item {margin:0 0 14px; padding:0 0 14px; border-bottom:1px solid var(--hairline)} .extraServices__item:last-child {border-bottom:0} .extraServices__desc {font-size:15px; color:#5a5a5a; line-height:1.7} .rewsList__empty {margin:0; color:#6b6b6b} .rewsList__item {display:flex; gap:18px; margin:0 0 24px} .rewsList__avatar {flex:0 0 64px} .rewsList__avatar img {display:block; width:64px; height:64px; object-fit:cover; border-radius:50%} .rewsList__body {min-width:0} .rewsList__name {font-weight:700; margin:0 0 6px} .rewsList__body p {margin:0; line-height:1.7; color:#4f4f4f; overflow-wrap:anywhere} .rewsList__date {margin:8px 0 0; font-size:13px; color:#8a8a8a} .advertPage__leave {margin:22px 0 0} .advertPage__leaveHint {margin:18px 0 0; font-size:15px} .advertPage__leaveHint a {color:var(--orange); border-bottom:1px solid currentColor} .rewsForm {display:block; max-width:700px; margin:0} .rewsForm__main {margin:0 0 14px} .rewsForm textarea {display:block; width:100%; box-sizing:border-box; font:inherit; line-height:1.6; color:var(--ink); background:var(--white); border:1px solid var(--hairline); border-radius:0; box-shadow:none; opacity:1; min-height:110px; padding:14px 16px; outline:none; resize:vertical; margin:0} .rewsForm textarea::placeholder {color:var(--placeholder); opacity:1} .rewsForm textarea:focus {border-color:var(--orange)} .rewsForm__upload {display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:0 0 16px} .rewsForm__upladBtn {display:inline-flex; align-items:center; gap:8px; font-size:14px; color:#6b6b6b; cursor:pointer; border-bottom:1px dashed #c2c2c2; transition:.2s} .rewsForm__upladBtn:hover {color:var(--orange); border-bottom-color:var(--orange)} .rewsForm .btn {margin:0} .advertPage__gallery {margin:0} .advertPage__gallery .default-gallery {display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin:0} /* min-height:0 is required: a grid item defaults to min-height:auto, which lets a tall portrait photo win over aspect-ratio and break the square preview grid. */ .advertPage__gallery .default-gallery > a {position:relative; display:block; width:auto; height:auto; min-height:0; aspect-ratio:1/1; border:none; overflow:hidden; background:var(--bg-grey)} .advertPage__gallery .default-gallery > a img {position:absolute; top:0; left:0; display:block; width:100%; height:100%; object-fit:cover} /* ---------- "KONTAKTAI" card ---------- */ /* Sticky: the card is short, so it can follow a long gallery without ever outgrowing the viewport. */ .contactCard {position:sticky; top:20px; align-self:start; background:var(--white); border:1px solid var(--hairline)} .contactCard__head {background:var(--orange); color:#fff; text-align:center; padding:9px 14px; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase} .contactCard__body {padding:16px} .contactCard__user {display:flex; align-items:center; gap:14px; margin:0 0 14px} .contactCard__avatar {flex:0 0 58px; width:58px; height:58px; overflow:hidden; background:var(--bg-grey)} .contactCard__avatar img {display:block; width:100%; height:100%; object-fit:cover} .contactCard__ident {min-width:0} .contactCard__line {display:flex; align-items:center; gap:10px; margin:0 0 8px; font-size:15px; overflow-wrap:anywhere} .contactCard__line:last-child {margin-bottom:0} /* Badges stretch to fill the row, the way the mock-up pairs them edge to edge. */ .contactCard__badges {display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px} .contactCard__badges .badge {flex:1 1 auto; text-align:center} .contactCard__flags {display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0 0 14px} .contactCard__flags img {display:block; width:30px; height:21px; object-fit:cover} .contactCard__links {list-style:none; margin:0; padding:0} .contactCard__links li {margin:0; padding:0; list-style:none} .contactCard__links li::before {content:none} .contactCard__links a, .contactCard__links button {display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box; padding:11px 0; border:0; border-top:1px solid var(--hairline); background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; transition:.2s} .contactCard__links a:hover, .contactCard__links button:hover {color:var(--orange)} .contactCard__links a:focus-visible, .contactCard__links button:focus-visible {outline:2px solid var(--orange); outline-offset:-2px} /* The message modal keeps its lity wrapper but loses the inherited rounding. */ .advertCallback {border-radius:0; padding:26px} /* ---------- Part C responsive ---------- */ @media (max-width:1024px) { .advertPage__grid {grid-template-columns:minmax(0, 1fr) 300px; gap:28px} .advRow__photo {flex-basis:230px; width:230px; min-height:210px} .advRow__body {padding:20px 20px 22px} .categoryFilter__city .chosen-container {min-width:220px} .categoryHead .subCategory > div {width:calc(50% - 10px)} } @media (max-width:860px) { /* Filters stack: every control takes the full band width and keeps its 42px height. */ .categoryFilter {padding:14px 0} .categoryFilter__bar {flex-direction:column; align-items:stretch; gap:10px} .categoryFilter__group {flex-direction:column; align-items:stretch; gap:10px} .categoryFilter__group--end {margin:0} .categoryFilter .nice-select, .categoryFilter .chosen-container, .categoryFilter .chosen-container-single .chosen-single {width:100% !important; min-width:0} .categoryFilter .ajaxform-field__checkbox {padding:4px 0} /* Photo above the copy, exactly one advert per row; the hairline moves to the top edge. */ .advRow {flex-direction:column} .advRow__photo {flex:0 0 auto; width:100%; min-height:0; aspect-ratio:16/9} .advRow__body {padding:18px 18px 20px; border-left:1px solid var(--hairline); border-top:0} .advertPage {padding:16px 0 44px} .advertPage__grid {grid-template-columns:minmax(0, 1fr); gap:26px} /* The card carries the price, the experience and the only "write to me" button, so on a phone it goes above the copy instead of behind the reviews and a 20-image gallery. */ .contactCard {position:static; order:-1; max-width:520px; width:100%} .advertPage__gallery .default-gallery {grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px} .getOfferForm {padding:18px} .getOfferForm .searchForm {flex:1 1 100%; margin:0} } @media (max-width:600px) { .breadcrumbs {padding-top:14px} .breadcrumbs .wrapper {font-size:13px} .categoryHead {padding:12px 0 20px} .categoryHead .subCategory > div {width:100%} .advList {padding-top:26px} .advRows {gap:14px} .advRow__title {font-size:19px; margin-bottom:10px} .advRow__desc {font-size:14px; -webkit-line-clamp:3} .advRow__line {font-size:14px} .badge {padding:5px 10px; font-size:12px} .advListError {padding:40px 16px 50px; font-size:19px} .pagination {margin-top:26px; gap:6px} .pagination li a {min-width:36px; height:36px; padding:0 9px; font-size:14px} .getOfferForm {flex-direction:column; align-items:flex-start} .getOfferForm > span {font-size:17px} .getOfferForm .searchForm {flex-direction:column; align-items:stretch; gap:10px} .getOfferForm .searchForm .btn {width:100%} .categoryDesc {padding:26px 0 32px} .advertPage__title {margin-bottom:18px} /* Stacked on a phone: three pipe-separated fragments do not survive a 320px line. */ .advertPage__meta {flex-direction:column; gap:3px; margin-bottom:20px} .advertPage__meta span + span::before {content:none} .advertPage__h {font-size:21px; margin:30px 0 14px} .rewsList__item {gap:12px} .rewsList__avatar {flex-basis:48px} .rewsList__avatar img {width:48px; height:48px} } /* ========================================================================= REFIXO — account area (ЭТАП 5, part G) Sign-up, sign-in, password recovery, account settings, "my adverts", invoices and the cookie bar. Built against mock-ups "02. Registracija.jpeg", "03. Prisijungimas.jpeg" and "04. Paskyra.jpeg". The legacy .site-security-page / .profileSettings / .profileAdvert / .advertItem / .paymentsTable rules were deleted rather than overridden, so everything those selectors used to do now lives here. ========================================================================= */ /* ---------- Shared form atoms (auth column + account settings) ---------- */ /* libs.css rounds and tints every input it touches, so the flat square field of the mock-ups is restated from scratch instead of being patched selector by selector. */ .authForm .form-group, .accountForm .form-group {margin:0 0 18px} .authForm label, .accountForm label {display:block; font-size:15px; font-weight:700; line-height:1.3; margin:0 0 8px; text-align:left} .authForm input[type="text"], .authForm input[type="email"], .authForm input[type="password"], .accountForm input[type="text"], .accountForm input[type="email"], .accountForm input[type="password"] { display:block; width:100%; box-sizing:border-box; height:48px; line-height:normal; font:inherit; color:var(--ink); background:var(--white); border:1px solid var(--hairline); border-radius:0; box-shadow:none; opacity:1; padding:0 16px; outline:none; transition:.2s} .authForm input::placeholder, .accountForm input::placeholder {color:var(--placeholder); opacity:1; font-size:inherit; font-weight:inherit} .authForm input:focus, .accountForm input:focus {border-color:var(--orange); box-shadow:none; background:var(--white)} .authForm .has-error input, .accountForm .has-error input {border-color:#dc3545} /* yii\bootstrap4\ActiveForm puts validation errors in .invalid-feedback, which Bootstrap's own stylesheet (disabled in AppAsset) would normally colour and hide until needed. */ .authForm .help-block, .accountForm .help-block, .authForm .invalid-feedback, .accountForm .invalid-feedback {display:block; text-align:left; margin:6px 0 0; color:#dc3545; font-size:14px; font-weight:500} .authForm .invalid-feedback:empty, .accountForm .invalid-feedback:empty {display:none} /* Checkbox: the native box carries the brand colour through accent-color, which keeps the control keyboard- and screen-reader-native instead of the hidden-input trick in libs.css. The label selector above would otherwise turn this one into a bold block. */ .authCheck, .authForm label.authCheck {display:flex; align-items:flex-start; gap:11px; margin:0 0 22px; font-size:15px; font-weight:400; line-height:1.5} .authCheck input[type="checkbox"] {flex:0 0 auto; width:18px; height:18px; margin:2px 0 0; accent-color:var(--orange); cursor:pointer} .authCheck a {color:var(--orange); border-bottom:1px solid transparent} .authCheck a:hover {border-bottom-color:currentColor} .authCheck input:focus-visible {outline:2px solid var(--orange); outline-offset:2px} /* ---------- Narrow auth column (mock-ups 02 and 03) ---------- */ .authPage {padding:40px 0 64px; background:var(--white)} .authPage__inner {max-width:540px; margin:0 auto} .authPage__title {font-size:clamp(32px, 4vw, 48px); font-weight:700; line-height:1.1; text-align:center; margin:0 0 34px} .authPage__lead {text-align:center; margin:-20px 0 30px; font-size:16px; color:#5f5f5f} /* "Veiklos tipas" — two halves, the active one filled orange. */ .authToggle {display:flex; border:1px solid var(--hairline)} .authToggle button {flex:1 1 0; min-width:0; padding:14px 10px; font:inherit; font-size:15px; color:var(--ink); background:var(--white); border:0; border-radius:0; cursor:pointer; transition:.2s} .authToggle button + button {border-left:1px solid var(--hairline)} .authToggle button:hover {background:var(--bg-grey)} .authToggle button.is-active {background:var(--orange); color:#fff; font-weight:600} .authToggle button:focus-visible {outline:2px solid var(--ink); outline-offset:-2px} .authForm__submit {display:flex; justify-content:center; margin:6px 0 0} .authForm__submit .btn {min-width:200px; margin:0} /* reCAPTCHA: the widget is a fixed-width iframe, so it is centred rather than stretched. */ .authCaptcha {margin:0 0 20px} .authCaptcha .form-group {display:flex; flex-direction:column; align-items:center; margin:0} .authCaptcha .help-block, .authCaptcha .invalid-feedback {text-align:center} .authPage__switch {text-align:center; margin:22px 0 0; font-size:15px} .authPage__switch a {color:var(--orange); border-bottom:1px solid transparent} .authPage__switch a:hover {border-bottom-color:currentColor} .authPage__links {display:flex; flex-direction:column; align-items:center; gap:9px; margin:18px 0 0; font-size:15px} .authPage__links a {color:var(--orange); border-bottom:1px solid transparent} .authPage__links a:hover {border-bottom-color:currentColor} .authPage__note {max-width:470px; margin:22px auto 0; text-align:center; font-size:14px; line-height:1.7; color:#6b6b6b} .authPage__note p {margin:0} /* "Remember me" is not in mock-up 03; kept as a quiet utility row under the fields. ActiveForm wraps it in Bootstrap's .custom-control markup, whose stylesheet is off. */ .authPage__remember {margin:-4px 0 20px; font-size:14px} .authPage__remember .form-group {margin:0} .authPage__remember .custom-control {display:flex; align-items:center; gap:10px} .authPage__remember .custom-control-input {flex:0 0 auto; width:16px; height:16px; margin:0; accent-color:var(--orange); cursor:pointer} .authPage__remember .custom-control-label {display:block; margin:0; font-size:14px; font-weight:400; cursor:pointer} .authPage__remember .custom-control-input:focus-visible {outline:2px solid var(--orange); outline-offset:2px} /* ---------- Social sign-in ---------- */ /* dektrium's Connect widget renders an .auth-clients list whose link carries an empty .auth-icon span, and AuthChoiceAsset paints a sprite into that span; the sprite is replaced here with the official four-colour Google mark drawn as inline SVG. */ .authSocial {display:flex; justify-content:center; margin:20px 0 0} .authSocial .auth-clients {display:flex; align-items:center; justify-content:center; gap:14px; list-style:none; margin:0; padding:0} .authSocial .auth-clients li {display:block; width:auto; height:auto; margin:0; padding:0; background:none; list-style:none} .authSocial .auth-clients li::before {content:none} .authSocial .auth-link {display:flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0; border:0; border-radius:50%; transition:.2s} .authSocial .auth-link:hover {background:var(--bg-grey)} .authSocial .auth-link:focus-visible {outline:2px solid var(--orange); outline-offset:2px} .authSocial .auth-icon {display:block !important; width:28px !important; height:28px !important; margin:0 !important; padding:0 !important; text-indent:0 !important; background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3E%3Cpath%20fill='%23EA4335'%20d='M24%209.5c3.54%200%206.71%201.22%209.21%203.6l6.85-6.85C35.9%202.38%2030.47%200%2024%200%2014.62%200%206.51%205.38%202.56%2013.22l7.98%206.19C12.43%2013.72%2017.74%209.5%2024%209.5z'/%3E%3Cpath%20fill='%234285F4'%20d='M46.98%2024.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58%202.96-2.26%205.48-4.78%207.18l7.73%206c4.51-4.18%207.09-10.36%207.09-17.65z'/%3E%3Cpath%20fill='%23FBBC05'%20d='M10.53%2028.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92%2016.46%200%2020.12%200%2024c0%203.88.92%207.54%202.56%2010.78l7.97-6.19z'/%3E%3Cpath%20fill='%2334A853'%20d='M24%2048c6.48%200%2011.93-2.13%2015.89-5.81l-7.73-6c-2.15%201.45-4.92%202.3-8.16%202.3-6.26%200-11.57-4.22-13.47-9.91l-7.98%206.19C6.51%2042.62%2014.62%2048%2024%2048z'/%3E%3C/svg%3E") no-repeat center/contain !important} /* ---------- Account settings (mock-up 04) ---------- */ .accountPage {padding:26px 0 54px; background:var(--white)} /* Same two-column rhythm as the advert page, so the sidebar rail lines up site-wide. */ .accountPage__grid {display:grid; grid-template-columns:minmax(0, 1fr) 310px; gap:40px; align-items:start} /* No creative published for the "banner-v" slot: the rail column is dropped rather than left as a 310px hole beside the settings. */ .accountPage__grid--single {grid-template-columns:minmax(0, 1fr)} .accountPage__main {min-width:0} .accountPage__title {font-size:clamp(30px, 3.6vw, 46px); font-weight:700; line-height:1.15; margin:0 0 24px; overflow-wrap:anywhere} .accountTabs {display:flex; flex-wrap:wrap; gap:14px; margin:0 0 34px} .accountTabs .btn {min-width:214px; margin:0} .accountBlock {margin:0 0 38px} .accountBlock:last-child {margin-bottom:0} /* The password block lives in its own
, so the gap has to come from the form. */ .accountForm + .accountForm {display:block; margin-top:38px} .accountLabel {display:block; font-size:15px; font-weight:700; margin:0 0 10px} /* Square avatar, replaced by clicking it — the file input itself stays off-screen. */ .accountAvatar {display:block; width:164px; height:164px; overflow:hidden; background:var(--bg-grey); border:1px solid var(--hairline); cursor:pointer; transition:.2s} .accountAvatar img {display:block; width:100%; height:100%; object-fit:cover; object-position:center} /* After an upload the shared script.js swaps the preview for its gallery-tile markup; stretch that wrapper and drop the tile's delete control, which is inert here. */ .accountAvatar > div {width:100%; height:100%} .accountAvatar .delete-btn, .accountAvatar .cover-indicator {display:none} .accountAvatar:hover {border-color:var(--orange)} .accountAvatar:focus-within {outline:2px solid var(--orange); outline-offset:2px} /* Capped rather than fluid: mock-up 04 draws two short fields side by side, not two half-width ones, and a 600px-wide "user name" box reads as a text area. */ .accountFields {display:grid; grid-template-columns:repeat(2, minmax(0, 300px)); gap:0 30px} .accountForm .btn {margin:14px 0 0} .accountHint {margin:4px 0 0; max-width:630px; font-size:13px; line-height:1.6; color:#7c7c7c} .accountPending {margin:10px 0 0; padding:11px 14px; background:var(--bg-grey); border-left:3px solid var(--orange); font-size:14px; line-height:1.6; color:#4f4f4f} .accountLogout {margin:36px 0 0; padding:24px 0 0; border-top:1px solid var(--hairline)} .accountLogout .btn {margin:0} .accountPage__rail {min-width:0} /* ---------- "Mano skelbimai" ---------- */ /* The rows reuse .advRow from part C; only the owner-side extras live here. */ .myAdList {padding:26px 0 54px; background:var(--white)} .myAdRows {display:flex; flex-direction:column; gap:18px} .myAdRow--paused {opacity:.72} .myAdRow--hidden .advRow__body {border-color:#e6b8b8} .myAdState {display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px} .myAdState span {display:inline-block; padding:5px 11px; font-size:13px; line-height:1.25; background:#EFEFEF; color:#5f5f5f} .myAdState .is-live {background:#e6f4ea; color:#256b3c} .myAdState .is-warn {background:#fdece1; color:#a8500f} .myAdState .is-stop {background:#fbe3e3; color:#95201f} .myAdActions {display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0} .myAdActions .btn {height:38px; line-height:38px; padding:0 16px; font-size:13px; margin:0} .myAdActions .btn i {margin-right:7px} .myAdEmpty {padding:40px 0 0; font-size:17px; color:#6b6b6b} .myAdEmpty .btn {display:inline-block; margin:20px 0 0} /* ---------- "Sąskaitos" ---------- */ .payTableWrap {overflow-x:auto; margin:0} .payTable {width:100%; border-collapse:collapse; margin:0} .payTable th {padding:12px 16px; text-align:left; white-space:nowrap; background:var(--ink); color:#fff; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase} .payTable td {padding:13px 16px; font-size:15px; vertical-align:top; border-bottom:1px solid var(--hairline)} .payTable tbody tr:nth-child(even) td {background:var(--bg-grey)} .payTable a {color:var(--orange); border-bottom:1px solid currentColor} .payTable a:hover {color:var(--orange-deep)} /* Paysera transaction number - an identifier, not prose: keep it on one line. */ .payTable__ref {font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space:nowrap} /* Payment result notice on the Paysera return pages (2026-09-28). No own font-size: it inherits the body text size. */ .payStatus {margin:0 0 30px; padding:16px 20px; background:var(--bg-grey); border-left:4px solid var(--orange); color:var(--ink)} .payStatus p {margin:0} .payStatus p + p {margin-top:8px} .payStatus--ok {border-left-color:#2E8540} .payStatus--test {font-weight:700; text-transform:uppercase; letter-spacing:.04em} .payTable__test {font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink)} /* ---------- Result / message page ---------- */ .messagePage {padding:70px 0 90px; background:var(--white); text-align:center} .messagePage__title {font-size:clamp(28px, 3.2vw, 40px); font-weight:700; line-height:1.2; margin:0 0 18px} .messagePage p {margin:0 0 24px; color:#5f5f5f} /* ---------- Cookie banner and consent dialog (ЭТАП 6) ---------- */ /* Accept and reject are the SAME control at the SAME size, side by side. Giving refusal a quieter treatment than acceptance is a dark pattern the EDPB treats as invalid consent, so both buttons deliberately carry .s1 and neither may be restyled to look secondary. */ .cookieBar {position:fixed; z-index:60; left:20px; bottom:20px; width:min(460px, calc(100vw - 40px)); box-sizing:border-box; background:var(--white); border:1px solid var(--hairline); box-shadow:0 12px 40px rgba(0,0,0,.16); padding:22px 24px} .cookieBar__title {font-size:17px; font-weight:700; margin:0 0 10px} .cookieBar__text {margin:0 0 18px; font-size:14px; line-height:1.65; color:#4f4f4f} /* The policy link inside the banner sentence rendered in the paragraph's own grey with no underline, i.e. it did not read as a link at all - and it is the only route to the text the visitor is being asked to agree with. Same treatment as .consentDialog__intro a. */ .cookieBar__text a {color:var(--orange); text-decoration:underline} .cookieBar__btns {display:flex; flex-wrap:wrap; gap:10px} .cookieBar__btns .btn {height:40px; line-height:40px; padding:0 22px; font-size:13px; margin:0} .cookieBar__link {display:inline-block; margin:14px 0 0; padding:0; border:0; background:none; font:inherit; font-size:13px; color:#5f5f5f; text-decoration:underline; cursor:pointer} .cookieBar__link:hover {color:var(--ink)} .cookieBar__link:focus-visible {outline:2px solid var(--orange); outline-offset:2px} /* The dialog is the only route back to the choice once the banner is gone, so it is always in the DOM and simply hidden — see views/particles/cookie_policy.php. */ .consentDialog[hidden] {display:none} .consentDialog {position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:20px} .consentDialog__backdrop {position:absolute; inset:0; background:rgba(0,0,0,.5)} .consentDialog__panel {position:relative; z-index:1; width:min(560px, 100%); max-height:calc(100vh - 40px); overflow-y:auto; box-sizing:border-box; background:var(--white); border:1px solid var(--hairline); box-shadow:0 18px 60px rgba(0,0,0,.22); padding:26px 28px 24px} .consentDialog__head {display:flex; align-items:flex-start; gap:16px; margin:0 0 14px} .consentDialog__title {flex:1 1 auto; margin:0; font-size:20px; font-weight:700; line-height:1.25} .consentDialog__close {flex:0 0 auto; width:32px; height:32px; border:0; background:none; color:#7a7a7a; font-size:18px; line-height:1; cursor:pointer; transition:.2s} .consentDialog__close:hover {color:var(--ink)} .consentDialog__close:focus-visible {outline:2px solid var(--orange); outline-offset:2px} .consentDialog__intro {margin:0 0 20px; font-size:14px; line-height:1.65; color:#4f4f4f} .consentDialog__intro a {color:var(--orange)} .consentDialog__groups {margin:0 0 22px} .consentGroup {padding:14px 0; border-top:1px solid var(--hairline)} .consentGroup:last-child {border-bottom:1px solid var(--hairline)} .consentGroup__row {display:flex; align-items:center; gap:11px; margin:0; cursor:pointer} /* Locked category: still visible and still explained, but not pretending to be a choice. */ .consentGroup__input:disabled ~ .consentGroup__title {cursor:default} .consentGroup__row:has(.consentGroup__input:disabled) {cursor:default} .consentGroup__input {flex:0 0 auto; width:18px; height:18px; margin:0; accent-color:var(--orange); cursor:pointer} .consentGroup__input:disabled {cursor:default; opacity:.55} .consentGroup__input:focus-visible {outline:2px solid var(--orange); outline-offset:2px} .consentGroup__box {display:none} .consentGroup__title {flex:1 1 auto; font-size:16px; font-weight:600} .consentGroup__always {flex:0 0 auto; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#8a8a8a} .consentGroup__text {margin:8px 0 0 29px; font-size:14px; line-height:1.6; color:#5f5f5f} .consentDialog__btns {display:flex; flex-wrap:wrap; gap:10px} .consentDialog__btns .btn {height:42px; line-height:42px; padding:0 22px; font-size:13px; margin:0; flex:1 1 auto} .consentDialog__note {margin:16px 0 0; font-size:13px; line-height:1.6; color:#7a7a7a} /* Scroll lock while the dialog is open. */ body.consentOpen {overflow:hidden} /* Withdrawal link in the footer: styled as part of the footer menu, not as a button, because that is where it sits and what it reads as. */ .footer__cookieBtn {border:0; background:none; font:inherit; font-size:16px; color:var(--orange); position:relative; margin:0; padding:0 0 0 13px; cursor:pointer} .footer__cookieBtn::before {content:'|'; position:absolute; left:0; color:#c9c9c9} .footer__cookieBtn:hover {color:var(--orange-deep); text-decoration:underline} .footer__cookieBtn:focus-visible {outline:2px solid var(--orange); outline-offset:2px} /* ---------- Consent on forms and the data-rights block (ЭТАП 6) ---------- */ .authCheckWrap {margin:0 0 22px} .authCheckWrap .authCheck {margin:0} .authCheckWrap.has-error .authCheck input[type="checkbox"] {outline:2px solid #de1515; outline-offset:2px} .authCheck__error {margin:8px 0 0 29px; font-size:14px; color:#de1515} .offerForm__consent {margin:6px 0 0} .offerForm__consent label.checkbox {display:flex; align-items:flex-start; gap:11px; margin:0; font-size:15px; line-height:1.5; cursor:pointer} .offerForm__consent label.checkbox input {flex:0 0 auto; width:18px; height:18px; margin:2px 0 0; accent-color:var(--orange); cursor:pointer} .offerForm__consent label.checkbox b {display:none} .offerForm__consent label.checkbox i {font-style:normal} .offerForm__consent a {color:var(--orange)} .offerForm__consent input:focus-visible {outline:2px solid var(--orange); outline-offset:2px} .accountRights__btns {display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:16px 0 14px} .accountRights__btns .btn {margin:0} .accountRights__form, .accountDelete__form {margin:0} /* ---------- Part G responsive ---------- */ @media (max-width:1024px) { .accountPage__grid {grid-template-columns:minmax(0, 1fr) 290px; gap:28px} .accountTabs .btn {min-width:180px} } @media (max-width:860px) { .accountPage {padding:20px 0 44px} .accountPage__grid {grid-template-columns:minmax(0, 1fr); gap:30px} /* The rail is an ad, not content: on a phone it drops below the settings it decorated. */ .accountPage__rail {order:2; max-width:520px; width:100%; margin:0 auto} .accountFields {grid-template-columns:minmax(0, 1fr); gap:0} .myAdList {padding:20px 0 44px} .myAdRows {gap:14px} } @media (max-width:600px) { .authPage {padding:26px 0 44px} .authPage__title {margin-bottom:26px} .authToggle button {padding:12px 6px; font-size:14px} .authForm__submit .btn {width:100%; min-width:0} .accountAvatar {width:132px; height:132px} .accountTabs {gap:10px} .accountTabs .btn {flex:1 1 100%; min-width:0} .myAdActions .btn {flex:1 1 auto} .payTable th, .payTable td {padding:10px 12px; font-size:13px} /* Full-width sheet on a phone: a 460px card would overhang a 320px screen. */ .cookieBar {left:0; right:0; bottom:0; width:100%; border-width:1px 0 0; padding:18px 18px 20px} .cookieBar__btns .btn {flex:1 1 auto} .consentDialog {padding:0; align-items:flex-end} .consentDialog__panel {width:100%; max-height:88vh; padding:22px 18px 20px} .consentDialog__btns .btn {flex:1 1 100%} .accountRights__btns .btn {flex:1 1 100%} }