/* ============================================================
Mercado Rebanho — Editorial Pastoral design system
Premium agribusiness aesthetic. Fraunces + Manrope.
Overrides the vendor "Hireo" theme. Load after style.css/green.css.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
/* — Palette ————————————————————————————————— */
--mr-paper: #f3efe6; /* base background — warm parchment */
--mr-paper-2: #ece6d7; /* deeper parchment for contrast bands */
--mr-cream: #fbf8f1; /* cards, surfaces */
--mr-cream-2: #f7f2e6; /* nested surfaces */
--mr-ink: #1a2017; /* primary text, warm soft black */
--mr-ink-2: #2c352a; /* secondary heading */
--mr-muted: #6b6f60; /* labels, meta */
--mr-muted-2: #94978a; /* placeholder, faint */
--mr-rule: #d8d1bf; /* hairline rule */
--mr-rule-soft: #e6dfca;
/* Greens — pasture spectrum, dark & confident */
--mr-pasture: #1a3d2e; /* deep pasture, primary brand */
--mr-pasture-2: #214a38; /* hover */
--mr-sage: #5d7a4c; /* sage, secondary brand */
--mr-moss: #2d6b4a; /* CTA action green */
--mr-moss-2: #245a3d;
--mr-tint: #e7eddf; /* faint green tint backgrounds */
/* Earth accent — terracotta replaces saddlebrown */
--mr-clay: #b8593a;
--mr-clay-2: #9d4827;
--mr-gold: #d7a84f;
--mr-gold-2: #f2d58b;
--mr-gold-ink: #6c4a12;
/* Signal */
--mr-whatsapp: #128c4c;
--mr-whatsapp-2: #0e7a40;
/* — Shape & motion ————————————————————————————— */
--mr-r-xs: 8px;
--mr-r-sm: 10px;
--mr-r-md: 14px;
--mr-r-lg: 20px;
--mr-r-xl: 28px;
--mr-shadow-xs: 0 1px 2px rgba(26, 32, 23, .06);
--mr-shadow-sm: 0 6px 18px -8px rgba(26, 32, 23, .14), 0 2px 6px -3px rgba(26, 32, 23, .08);
--mr-shadow-md: 0 18px 38px -16px rgba(26, 32, 23, .22), 0 6px 16px -8px rgba(26, 32, 23, .12);
--mr-shadow-lg: 0 32px 60px -24px rgba(26, 32, 23, .28), 0 12px 26px -12px rgba(26, 32, 23, .16);
--mr-ease: cubic-bezier(.22, .61, .36, 1);
--mr-ease-out: cubic-bezier(.16, 1, .3, 1);
/* — Type ————————————————————————————————————— */
--mr-font-display: "Bricolage Grotesque", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--mr-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
/* ============================================================
Reset & base
============================================================ */
html {
scroll-behavior: smooth;
}
body,
body.gray {
color: var(--mr-ink);
background: var(--mr-paper);
font-family: var(--mr-font-body);
font-size: 16px;
font-weight: 500;
line-height: 1.55;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#wrapper {
background: var(--mr-paper);
/* No overflow:hidden — would break position:sticky on header */
/* Vendor style.css sets padding-top:82px to compensate for absolute header;
our header is sticky (in-flow), so that padding becomes dead space. */
padding-top: 0 !important;
}
.container {
max-width: 1220px;
}
/* Subtle paper grain on body — atmosphere without noise */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background-image:
radial-gradient(rgba(26, 32, 23, .025) 1px, transparent 1px),
radial-gradient(rgba(26, 32, 23, .015) 1px, transparent 1px);
background-size: 3px 3px, 5px 5px;
background-position: 0 0, 1px 1px;
opacity: .6;
mix-blend-mode: multiply;
}
#wrapper > * {
position: relative;
z-index: 2;
}
/* Selection */
::selection {
background: var(--mr-pasture);
color: var(--mr-cream);
}
/* All headings — display sans (Bricolage Grotesque) */
h1, h2, h3, h4, h5, h6,
.page-title,
.section-headline h3,
.banner-headline h3,
.single-page-section h3,
.welcome-text h3 {
font-family: var(--mr-font-display);
font-weight: 700;
font-variation-settings: "opsz" 32;
color: var(--mr-ink);
letter-spacing: -.022em;
line-height: 1.06;
}
/* ============================================================
Header / Navigation
============================================================ */
/* Sticky top bar — blends with the page parchment, no pill.
Works with both .fullwidth and .dashboard-header layouts. */
#header-container,
#header-container.fullwidth,
#header-container.dashboard-header,
#header-container.fullwidth.dashboard-header.not-sticky {
position: sticky !important;
top: 0;
z-index: 100;
background: rgba(243, 239, 230, .82) !important;
backdrop-filter: saturate(150%) blur(18px);
-webkit-backdrop-filter: saturate(150%) blur(18px);
border-bottom: 1px solid transparent !important;
box-shadow: none !important;
transition: border-color .25s var(--mr-ease), background-color .25s var(--mr-ease), box-shadow .25s var(--mr-ease);
}
/* Once the user scrolls a bit, JS adds .is-scrolled — show a hairline + soft shadow */
#header-container.is-scrolled,
#header-container.fullwidth.is-scrolled {
background: rgba(243, 239, 230, .94) !important;
border-bottom-color: var(--mr-rule) !important;
box-shadow: 0 8px 22px -16px rgba(26, 32, 23, .22) !important;
}
#header {
height: 72px;
padding: 0;
}
#header > .container {
height: 100%;
max-width: 1280px;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
position: relative;
}
#logo {
border-right: 0;
margin-right: 28px;
}
#logo img {
max-height: 140px;
width: auto;
}
#navigation {
margin-top: 18px;
}
/* All nav links — calm Manrope, lighter weight */
#navigation ul li {
margin-right: 4px;
}
#navigation ul li a {
position: relative;
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 12px;
color: var(--mr-ink);
background: transparent !important;
font-family: var(--mr-font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: -.005em;
border-radius: 999px;
transition: color .2s var(--mr-ease), background-color .2s var(--mr-ease);
}
#navigation ul li a:hover {
color: var(--mr-pasture);
background: rgba(26, 61, 46, .08) !important;
}
/* Active link — pasture pill, dot accent below */
#navigation ul li a.current {
color: var(--mr-pasture);
background: rgba(26, 61, 46, .1) !important;
}
#navigation ul li a.current::after {
content: "";
position: absolute;
left: 50%;
bottom: -8px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--mr-clay);
transform: translateX(-50%);
}
/* CTA-style nav buttons — Anunciar, Entrar, Admin etc */
#navigation .list-apply-button,
#navigation ul li a.list-apply-button {
padding: 0 16px !important;
background: var(--mr-pasture) !important;
color: var(--mr-cream) !important;
border: 1px solid var(--mr-pasture) !important;
font-weight: 600;
letter-spacing: .01em;
transition: background-color .2s var(--mr-ease), transform .2s var(--mr-ease), box-shadow .2s var(--mr-ease);
}
#navigation .list-apply-button:hover,
#navigation ul li a.list-apply-button:hover {
background: var(--mr-pasture-2) !important;
color: var(--mr-cream) !important;
transform: translateY(-1px);
box-shadow: 0 6px 14px -6px rgba(26, 61, 46, .4);
}
/* Inline override for Anunciar / Admin in markup — neutralize and let our rules drive */
#navigation ul li a[style*="background-color: #28b661"] {
background: var(--mr-moss) !important;
color: var(--mr-cream) !important;
border-color: var(--mr-moss) !important;
}
#navigation ul li a[style*="background-color: #28b661"]:hover {
background: var(--mr-moss-2) !important;
border-color: var(--mr-moss-2) !important;
}
#navigation ul li a[style*="background-color: saddlebrown"] {
background: var(--mr-clay) !important;
color: var(--mr-cream) !important;
border-color: var(--mr-clay) !important;
}
#navigation ul li a[style*="background-color: saddlebrown"]:hover {
background: var(--mr-clay-2) !important;
border-color: var(--mr-clay-2) !important;
}
/* Entrar / Registrar — ghost variants: have `color: #28b661` in style but NOT `background-color` */
#navigation ul li a.list-apply-button[style*="#28b661"]:not([style*="background-color"]) {
background: transparent !important;
color: var(--mr-pasture) !important;
border: 1px solid var(--mr-rule) !important;
}
#navigation ul li a.list-apply-button[style*="#28b661"]:not([style*="background-color"]):hover {
background: var(--mr-tint) !important;
border-color: var(--mr-sage) !important;
color: var(--mr-pasture-2) !important;
}
.header-widget {
padding-left: 0;
border-left: 0 !important;
border-right: 0 !important;
}
/* Reset Hireo right-side background so nothing bleeds */
#header .right-side {
background: transparent !important;
box-shadow: none !important;
}
#header .right-side::before,
#header .right-side::after {
display: none !important;
}
/* User avatar in header */
.header-widget .user-avatar img {
border: 1.5px solid var(--mr-rule);
}
/* Defeat Hireo's .header-notifications-trigger a { top:55%; transform:translateY(-50%) }
that was lifting our trigger pill above the rest of the nav */
.header-notifications-trigger:has(.mr-user-trigger),
.user-menu .header-notifications-trigger:has(.mr-user-trigger) {
top: auto !important;
transform: none !important;
display: flex;
align-items: center;
height: 100%;
}
.header-notifications-trigger .mr-user-trigger,
.user-menu .header-notifications-trigger .mr-user-trigger {
top: auto !important;
transform: none !important;
font-size: 13px !important;
}
/* Pill-shaped user trigger — avatar + name + chevron makes the dropdown discoverable */
.mr-user-trigger {
display: inline-flex !important;
align-items: center;
gap: 9px;
height: 38px;
padding: 3px 12px 3px 3px;
background: var(--mr-cream);
border: 1px solid var(--mr-rule);
border-radius: 999px;
color: var(--mr-ink) !important;
transition: background-color .2s var(--mr-ease), border-color .2s var(--mr-ease);
}
.mr-user-trigger:hover {
background: var(--mr-cream-2);
border-color: var(--mr-sage);
color: var(--mr-pasture) !important;
}
.mr-user-trigger .user-avatar,
.mr-user-trigger .user-avatar img {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
overflow: hidden;
flex-shrink: 0;
border: 0 !important;
}
.mr-user-trigger .user-avatar img {
object-fit: cover;
}
.mr-user-trigger .user-avatar {
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
}
/* Defeat Hireo's .header-notifications-trigger span badge styling
that turns ANY span here into a 19x19 absolute green circle. */
.mr-user-trigger .mr-user-trigger-name,
.header-notifications-trigger .mr-user-trigger-name {
position: static !important;
display: inline !important;
top: auto !important;
margin: 0 !important;
height: auto !important;
width: auto !important;
line-height: 1.2 !important;
text-align: left !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var(--mr-font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: -.005em !important;
color: inherit !important;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transform: none !important;
}
/* Avatar wrapper — ensure clean circular crop and a neutral background
so the broken-image icon isn't visible when src fails */
.mr-user-trigger .user-avatar {
background: var(--mr-paper-2);
position: relative;
}
.mr-user-trigger .user-avatar::before {
/* Subtle initials-style fallback: a tiny user glyph when img fails */
content: "";
position: absolute;
inset: 0;
background: var(--mr-tint) url("data:image/svg+xml;utf8,") center/16px no-repeat;
border-radius: 50%;
z-index: 0;
}
.mr-user-trigger .user-avatar::after,
.mr-user-trigger .user-avatar.status-online::after {
content: none !important;
display: none !important;
}
.mr-user-trigger .user-avatar img {
position: relative;
z-index: 1;
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 50% !important;
}
/* If img fails to load it stays positioned but the ::after glyph behind it is visible */
.mr-user-trigger .user-avatar img[src=""],
.mr-user-trigger .user-avatar img:not([src]),
.mr-user-trigger .user-avatar img[hidden] {
display: none !important;
}
.mr-user-trigger-chevron {
color: var(--mr-muted);
flex-shrink: 0;
transition: transform .2s var(--mr-ease), color .2s var(--mr-ease);
}
.mr-user-trigger:hover .mr-user-trigger-chevron {
color: var(--mr-pasture);
}
/* On mobile, drop the name so the trigger stays compact */
@media (max-width: 768px) {
.mr-user-trigger-name { display: none; }
.mr-user-trigger { padding-right: 8px; }
}
.mmenu-trigger {
margin-top: 18px;
display: none;
}
.mr-mobile-header-actions {
display: none;
}
/* ============================================================
Buttons — universal primitives
============================================================ */
.button,
button.button,
a.button,
.apply-now-button {
font-family: var(--mr-font-body);
font-weight: 600;
font-size: 15px;
letter-spacing: -.005em;
border-radius: var(--mr-r-md) !important;
background: var(--mr-pasture);
color: var(--mr-cream);
box-shadow: none;
transition: background-color .25s var(--mr-ease), transform .2s var(--mr-ease), box-shadow .25s var(--mr-ease);
}
.button:hover,
button.button:hover,
a.button:hover,
.apply-now-button:hover {
background: var(--mr-pasture-2);
color: var(--mr-cream);
transform: translateY(-1px);
box-shadow: 0 14px 28px -14px rgba(26, 61, 46, .5);
}
.button.big,
a.button.big {
padding: 14px 26px;
font-size: 15px;
}
.list-apply-button,
.compact-list-layout .job-listing .list-apply-button {
border-radius: var(--mr-r-sm) !important;
background: var(--mr-pasture);
color: var(--mr-cream);
font-family: var(--mr-font-body);
font-weight: 600;
font-size: 13px;
letter-spacing: .01em;
}
/* ============================================================
Hero — home banner
============================================================ */
.mr-home-hero.intro-banner {
position: relative;
min-height: clamp(620px, 78vh, 820px);
padding: 150px 0 110px;
background-position: center 30%;
background-size: cover;
background-color: #1a2017;
overflow: hidden;
}
.mr-home-hero.intro-banner .background-image-container {
left: 0;
width: 100%;
background-position: center 30%;
}
.mr-home-hero.intro-banner::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(115deg, rgba(15, 24, 18, .9) 0%, rgba(15, 24, 18, .78) 32%, rgba(15, 24, 18, .55) 65%, rgba(15, 24, 18, .42) 100%),
linear-gradient(180deg, rgba(15, 24, 18, .35) 0%, rgba(15, 24, 18, .1) 35%, rgba(15, 24, 18, .25) 70%, rgba(15, 24, 18, .6) 100%);
z-index: 12;
pointer-events: none;
}
/* Grain overlay for film texture */
.mr-home-hero.intro-banner::after {
content: "";
position: absolute;
inset: 0;
z-index: 13;
background-image: url("data:image/svg+xml;utf8,");
opacity: .55;
mix-blend-mode: overlay;
pointer-events: none;
}
.mr-home-hero .container {
position: relative;
z-index: 20;
}
/* Bottom paper-fade so hero blends into the page */
.mr-home-hero-fade {
position: relative;
height: 80px;
margin-top: -80px;
z-index: 15;
background: linear-gradient(0deg, var(--mr-paper) 0%, rgba(243, 239, 230, 0) 100%);
pointer-events: none;
}
.mr-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 22px;
padding: 8px 14px 8px 12px;
color: rgba(251, 248, 241, .94);
background: rgba(251, 248, 241, .08);
border: 1px solid rgba(251, 248, 241, .18);
border-radius: 999px;
font-family: var(--mr-font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
backdrop-filter: blur(8px);
}
.mr-eyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mr-clay);
box-shadow: 0 0 0 3px rgba(184, 89, 58, .25);
}
.banner-headline h3 {
max-width: 880px;
color: var(--mr-cream);
font-family: var(--mr-font-display);
font-weight: 700;
font-variation-settings: "opsz" 96;
font-size: clamp(42px, 6.4vw, 84px);
line-height: .98;
letter-spacing: -.032em;
}
.banner-headline h3 strong {
font-weight: 800;
}
.mr-home-hero .banner-headline h3 strong {
color: var(--mr-cream);
font-weight: 800;
font-style: normal;
}
.mr-home-hero .banner-headline strong.color {
color: #c8d8b6;
font-weight: 700;
font-style: normal;
}
.banner-headline h3 span {
display: block;
margin-top: 24px;
color: rgba(251, 248, 241, .82);
font-family: var(--mr-font-body);
font-size: clamp(18px, 1.5vw, 21px);
line-height: 1.5;
font-weight: 500;
letter-spacing: -.005em;
max-width: 620px;
}
/* Hero search bar — refined card */
.mr-hero-search.intro-banner-search-form {
display: flex;
align-items: stretch;
max-width: 940px;
height: 78px;
margin-top: 44px !important;
padding: 6px;
gap: 2px;
background: rgba(251, 248, 241, .98);
border: 1px solid rgba(251, 248, 241, .6);
border-radius: 999px;
box-shadow:
0 28px 56px -20px rgba(0, 0, 0, .55),
0 6px 16px -6px rgba(0, 0, 0, .3),
0 0 0 1px rgba(0, 0, 0, .04);
backdrop-filter: blur(20px);
}
.intro-banner-search-form .intro-search-field {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
min-width: 0;
padding: 4px 20px;
border-right: 1px solid var(--mr-rule-soft);
box-sizing: border-box;
}
.intro-banner-search-form .intro-search-field.with-autocomplete {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 4px;
align-items: center;
padding: 4px 8px;
}
.intro-banner-search-form .intro-search-field:last-of-type {
border-right: 0;
}
/* Hide field labels in the hero search — placeholders carry the meaning */
.intro-banner-search-form .field-title {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.intro-banner-search-form input,
.intro-banner-search-form select {
color: var(--mr-ink);
font-family: var(--mr-font-body);
font-weight: 500;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
/* Reset Hireo's .input-with-icon wrapper so it doesn't paint a bg/border inside the pill */
.intro-banner-search-form .input-with-icon {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
min-width: 0;
}
.intro-banner-search-form .input-with-icon i {
display: none;
}
.intro-banner-search-form .mr-select,
.intro-banner-search-form .mr-input {
min-height: 38px;
padding: 0 12px;
font-size: 14px;
border-radius: var(--mr-r-sm);
background: transparent;
border-color: transparent;
}
.intro-banner-search-form .intro-search-field.with-autocomplete .mr-select {
min-height: 44px;
padding: 0 28px 0 10px;
font-size: 13.5px;
font-weight: 600;
}
.intro-banner-search-form .mr-select:hover:not(:disabled),
.intro-banner-search-form .mr-input:hover {
background: var(--mr-paper);
border-color: var(--mr-rule-soft);
}
.intro-banner-search-form .mr-select:focus,
.intro-banner-search-form .mr-input:focus {
background: var(--mr-paper);
border-color: var(--mr-pasture);
}
.intro-banner-search-form .mr-select {
background-position: calc(100% - 12px) 19px, calc(100% - 6px) 19px;
}
.intro-banner-search-form .intro-search-field.with-autocomplete .mr-select {
background-position: calc(100% - 12px) 19px, calc(100% - 6px) 19px;
}
/* Flex sizing — autocomplete needs more room for label + 2 selects */
.mr-hero-search.intro-banner-search-form > .intro-search-field.with-autocomplete {
flex: 1.6;
}
.mr-hero-search.intro-banner-search-form > .intro-search-field:not(.with-autocomplete) {
flex: 1.2;
}
.mr-hero-search.intro-banner-search-form > .intro-search-button {
flex: 0 0 auto;
}
.intro-banner-search-form input::placeholder,
.mr-input::placeholder {
color: var(--mr-muted-2);
font-weight: 500;
}
.intro-search-button {
margin: 0;
display: flex;
align-items: stretch;
}
.intro-search-button .button {
height: 100%;
min-height: 64px;
padding: 0 32px;
font-size: 15px;
font-weight: 700;
background: var(--mr-pasture);
color: var(--mr-cream);
border-radius: 999px !important;
white-space: nowrap;
}
.intro-search-button .button:hover {
background: var(--mr-pasture-2);
}
/* Pill action row beneath hero search */
.mr-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
max-width: 940px;
}
.mr-hero-actions a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
color: rgba(251, 248, 241, .92);
background: rgba(251, 248, 241, .08);
border: 1px solid rgba(251, 248, 241, .22);
border-radius: 999px;
font-family: var(--mr-font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: -.003em;
backdrop-filter: blur(10px);
transition: background-color .2s var(--mr-ease), border-color .2s var(--mr-ease), transform .2s var(--mr-ease);
}
.mr-hero-actions a:hover {
background: rgba(251, 248, 241, .14);
border-color: rgba(251, 248, 241, .42);
color: var(--mr-cream);
transform: translateY(-1px);
}
.mr-hero-actions a::before {
content: "→";
font-family: var(--mr-font-display);
font-style: italic;
opacity: .7;
}
/* ============================================================
Section primitives
============================================================ */
.section.gray,
.section {
background: var(--mr-paper);
}
.mr-featured-section {
margin-top: -36px;
position: relative;
z-index: 3;
}
.mr-section-head {
display: block;
margin-bottom: 12px;
}
.mr-section-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
color: var(--mr-clay);
font-family: var(--mr-font-body);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
}
.mr-section-eyebrow::before {
content: "";
display: inline-block;
width: 24px;
height: 1px;
background: currentColor;
opacity: .7;
}
.section-headline {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
position: relative;
}
.section-headline h3,
.page-title,
.single-page-section h3 {
font-family: var(--mr-font-display);
font-weight: 700;
font-variation-settings: "opsz" 64;
font-size: clamp(28px, 3.4vw, 42px);
color: var(--mr-ink);
letter-spacing: -.024em;
line-height: 1.05;
}
.section-headline > h3:first-child + .headline-link {
margin-left: auto;
}
.headline-link {
color: var(--mr-pasture);
font-family: var(--mr-font-body);
font-weight: 600;
font-size: 13.5px;
letter-spacing: -.003em;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.headline-link::after {
content: "→";
font-family: var(--mr-font-display);
font-style: italic;
transition: transform .2s var(--mr-ease);
}
.headline-link:hover::after {
transform: translateX(4px);
}
/* ============================================================
Cards — anuncio listings, freelancer, sidebar widgets
============================================================ */
.freelancer,
.job-listing,
.sidebar-container .sidebar-widget,
.job-overview,
.login-register-page,
.single-page-section,
.mr-card {
background: var(--mr-cream);
border: 1px solid var(--mr-rule);
border-radius: var(--mr-r-md);
box-shadow: var(--mr-shadow-sm);
}
.freelancer {
overflow: hidden;
transition: transform .25s var(--mr-ease-out), box-shadow .25s var(--mr-ease-out), border-color .25s var(--mr-ease-out);
}
.freelancer:hover,
.job-listing:hover {
border-color: var(--mr-sage);
box-shadow: var(--mr-shadow-md);
transform: translateY(-2px);
}
.freelancer-overview {
padding: 0;
}
.freelancer-overview-inner {
padding: 0;
}
.freelancer-overview-inner > div:first-child {
width: 100%;
aspect-ratio: 4 / 3;
background: var(--mr-paper-2);
overflow: hidden;
position: relative;
}
.freelancer-overview-inner > div:first-child::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .12) 100%);
pointer-events: none;
}
.freelancer-overview-inner > div:first-child img,
.job-listing-details > div:first-child img,
.job-listing-company-logo img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
transition: transform .6s var(--mr-ease-out);
}
.freelancer:hover .freelancer-overview-inner > div:first-child img,
.job-listing:hover .job-listing-details > div:first-child img {
transform: scale(1.04);
}
.freelancer-name {
padding: 22px 22px 6px;
text-align: left;
}
.freelancer-name h4 {
font-family: var(--mr-font-display);
font-weight: 700;
font-variation-settings: "opsz" 24;
font-size: 20px;
line-height: 1.2;
letter-spacing: -.02em;
color: var(--mr-ink);
}
.freelancer-name h4 a {
color: var(--mr-ink);
}
.freelancer-name h4 a:hover {
color: var(--mr-pasture);
}
.freelancer-name span {
display: block;
margin-top: 6px;
color: var(--mr-muted);
font-family: var(--mr-font-body);
font-weight: 500;
font-size: 13px;
letter-spacing: 0;
text-transform: none;
}
.freelancer-details {
padding: 12px 22px 22px;
}
.freelancer-details-list ul {
padding: 4px 0;
background: transparent;
border-top: 1px solid var(--mr-rule-soft);
}
.freelancer-details-list ul li {
padding: 10px 0;
border-bottom: 1px dashed var(--mr-rule-soft);
color: var(--mr-muted);
font-family: var(--mr-font-body);
font-size: 12.5px;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
display: flex;
justify-content: space-between;
align-items: center;
}
.freelancer-details-list ul li:last-child {
border-bottom: 0;
}
.freelancer-details-list ul li strong {
color: var(--mr-ink);
font-family: var(--mr-font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.freelancer-details-list ul li strong i {
color: var(--mr-sage);
margin-right: 4px;
}
/* CTA inside featured card */
.freelancer-details > .button {
display: block;
width: 100%;
margin-top: 18px;
text-align: center;
padding: 12px 18px;
border-radius: var(--mr-r-md) !important;
}
/* ============================================================
Compact listing rows
============================================================ */
.listings-container.compact-list-layout {
display: grid;
gap: 14px;
}
.compact-list-layout .job-listing,
.e-grid .job-listing {
margin: 0;
overflow: hidden;
}
.job-listing-details {
min-height: 158px;
padding: 18px;
gap: 22px;
align-items: center;
}
.job-listing-details > div:first-child,
.job-listing-company-logo {
flex: 0 0 144px;
width: 144px;
height: 144px;
border-radius: var(--mr-r-sm);
background: var(--mr-paper-2);
overflow: hidden;
position: relative;
}
.job-listing-description {
margin-left: 0 !important;
}
.job-listing-title {
color: var(--mr-ink);
font-family: var(--mr-font-display);
font-weight: 700;
font-variation-settings: "opsz" 28;
font-size: 22px;
line-height: 1.18;
letter-spacing: -.022em;
}
.job-listing-company {
color: var(--mr-muted);
font-family: var(--mr-font-body);
font-size: 13px;
font-weight: 500;
}
.job-listing-footer {
background: transparent !important;
padding: 0 !important;
margin-top: 10px;
}
.job-listing-footer ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.job-listing-footer ul li {
margin: 0;
padding: 6px 11px 6px 9px;
color: var(--mr-ink-2);
background: var(--mr-tint);
border: 1px solid var(--mr-rule-soft);
border-radius: 999px;
font-family: var(--mr-font-body);
font-size: 12.5px;
font-weight: 600;
letter-spacing: -.002em;
display: inline-flex;
align-items: center;
gap: 4px;
}
.job-listing-footer ul li i {
color: var(--mr-sage);
margin-right: 2px;
}
.compact-list-layout .job-listing .job-listing-footer {
background: transparent;
padding: 0;
}
.job-listing .list-apply-button {
align-self: center;
background: var(--mr-pasture);
color: var(--mr-cream);
padding: 10px 18px;
}
.mr-listing-page,
.mr-search-page .container {
padding-top: 48px;
padding-bottom: 64px;
}
/* ============================================================
Form inputs — selects, text, textarea, checkbox
============================================================ */
.mr-select,
.mr-input,
input.with-border,
input.input-text.with-border,
textarea.with-border,
textarea.input-text.with-border {
width: 100%;
min-height: 50px;
padding: 0 16px;
color: var(--mr-ink);
background: var(--mr-cream);
border: 1px solid var(--mr-rule);
border-radius: var(--mr-r-sm);
font-family: var(--mr-font-body);
font-size: 14.5px;
font-weight: 500;
box-sizing: border-box;
transition: border-color .2s var(--mr-ease), box-shadow .2s var(--mr-ease), background-color .2s var(--mr-ease);
}
/* Multi-line fields only (textarea) — bigger height + line-height for typing */
textarea.with-border,
textarea.input-text.with-border {
padding: 14px 16px;
min-height: 130px;
line-height: 1.55;
}
/* Input with leading icon (login, register, forgot pwd, send message) —
make the icon a clean parchment chip inside the input padding area,
not the Hireo gray boxy default */
.input-with-icon-left {
position: relative;
margin-bottom: 12px;
}
.input-with-icon-left input,
.input-with-icon-left input.with-border,
.input-with-icon-left input.input-text.with-border {
padding-left: 52px !important;
min-height: 52px;
}
.input-with-icon-left i {
position: absolute !important;
top: 50% !important;
left: 14px !important;
transform: translateY(-50%);
width: 22px !important;
height: 22px !important;
line-height: 22px !important;
font-size: 18px !important;
color: var(--mr-muted) !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
text-align: center;
pointer-events: none;
}
.input-with-icon-left:focus-within i {
color: var(--mr-pasture) !important;
}
.text-danger {
display: block;
margin: 4px 4px 0;
font-family: var(--mr-font-body);
font-size: 12.5px;
font-weight: 600;
color: var(--mr-clay-2);
}
.mr-select {
appearance: none;
-webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--mr-muted) 50%), linear-gradient(135deg, var(--mr-muted) 50%, transparent 50%);
background-position: calc(100% - 18px) 22px, calc(100% - 12px) 22px;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
cursor: pointer;
}
.mr-select:disabled {
color: var(--mr-muted-2);
background-color: var(--mr-paper-2);
cursor: not-allowed;
}
.mr-select:hover:not(:disabled),
.mr-input:hover {
border-color: var(--mr-sage);
}
.mr-select:focus,
.mr-input:focus,
input.with-border:focus,
textarea.with-border:focus,
.input-text.with-border:focus {
border-color: var(--mr-pasture);
box-shadow: 0 0 0 4px rgba(26, 61, 46, .12);
outline: 0;
}
/* ============================================================
Native table primitives (Anuncios, Buscar, Favoritos)
============================================================ */
.mr-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
background: var(--mr-cream);
border: 1px solid var(--mr-rule);
border-radius: var(--mr-r-md);
box-shadow: var(--mr-shadow-xs);
}
.mr-listing-page .listings-container.compact-list-layout {
display: block;
overflow: hidden;
background: var(--mr-cream);
border: 1px solid var(--mr-rule);
border-radius: var(--mr-r-md);
box-shadow: var(--mr-shadow-sm);
}
.mr-listing-page .mr-table-toolbar {
padding: 16px 18px;
border: 0;
border-bottom: 1px solid var(--mr-rule-soft);
border-radius: 0;
box-shadow: none;
}
.mr-listing-page .mr-table-toolbar .mr-input {
background: var(--mr-cream);
border-color: var(--mr-rule);
box-shadow: var(--mr-shadow-xs);
}
.mr-listing-page .mr-grid-row-listing.job-listing {
border: 0;
border-bottom: 1px solid var(--mr-rule-soft);
border-radius: 0;
box-shadow: none;
background: #fffdf8;
}
.mr-listing-page .mr-grid-row-listing.job-listing:hover {
border-color: var(--mr-rule-soft);
box-shadow: inset 3px 0 0 var(--mr-sage);
transform: none;
}
.mr-listing-page .mr-table-footer {
padding: 16px 18px;
background: var(--mr-cream);
}
.mr-listing-page .mr-table-pager {
margin-left: auto;
}
.mr-table-toolbar .mr-input {
max-width: 380px;
min-height: 44px;
}
.mr-table-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 4px 0;
}
.mr-table-pager {
display: flex;
gap: 8px;
}
.mr-table-pager button,
.mr-table-export {
min-height: 40px;
padding: 0 16px;
color: var(--mr-ink);
background: var(--mr-cream);
border: 1px solid var(--mr-rule);
border-radius: var(--mr-r-sm);
font-family: var(--mr-font-body);
font-weight: 600;
font-size: 13.5px;
cursor: pointer;
transition: background-color .2s var(--mr-ease), border-color .2s var(--mr-ease), color .2s var(--mr-ease);
}
.mr-table-pager button:hover:not(:disabled) {
background: var(--mr-pasture);
color: var(--mr-cream);
border-color: var(--mr-pasture);
}
.mr-table-pager button:disabled {
color: var(--mr-muted-2);
background: var(--mr-paper-2);
cursor: not-allowed;
opacity: .78;
}
.mr-badge {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 4px 11px;
border-radius: 999px;
background: var(--mr-tint);
color: var(--mr-pasture);
font-family: var(--mr-font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
border: 1px solid rgba(93, 122, 76, .25);
}
.mr-badge.is-positive {
background: rgba(26, 61, 46, .12);
color: var(--mr-pasture);
}
.mr-badge.is-muted {
background: var(--mr-paper-2);
color: var(--mr-muted);
border-color: var(--mr-rule);
}
.mr-empty-state {
padding: 48px 28px;
text-align: center;
color: var(--mr-muted);
background: var(--mr-cream);
border: 1px dashed var(--mr-rule);
border-radius: var(--mr-r-md);
box-shadow: none;
font-family: var(--mr-font-body);
font-size: 15px;
font-weight: 500;
}
.mr-empty-state::before {
content: "—";
display: block;
color: var(--mr-clay);
font-family: var(--mr-font-display);
font-size: 24px;
margin-bottom: 8px;
}
.mr-empty-state small {
display: block;
margin-top: 8px;
color: var(--mr-muted-2);
font-size: 13px;
font-weight: 500;
line-height: 1.5;
}
.mr-empty-state br + small {
margin-top: 4px;
}
/* ============================================================
Sidebar filter (Anuncios page)
============================================================ */
.sidebar-container {
margin-bottom: 28px;
}
.accordion__item,
.accordion-body {
background: var(--mr-cream);
border: 1px solid var(--mr-rule);
border-radius: var(--mr-r-lg);
box-shadow: var(--mr-shadow-sm);
overflow: hidden;
}
/* Filter sidebar — let the accordion JS control body visibility */
.mr-filter-accordion .accordion-body {
display: none;
}
.mr-filter-accordion .accordion__item.active > .accordion-body {
display: block;
}
/* Soft cream header — full-width button so the whole bar toggles */
.mr-filter-accordion .accordion-header,
.mr-filter-accordion .accordion-header.js-accordion-header {
position: relative;
width: 100%;
padding: 18px 22px;
background: transparent;
color: var(--mr-ink);
font-family: var(--mr-font-display);
font-weight: 700;
font-variation-settings: "opsz" 24;
font-size: 17px;
letter-spacing: -.018em;
text-transform: none;
border: 0;
border-radius: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
box-shadow: none;
transition: background-color .18s var(--mr-ease);
}
.mr-filter-accordion .accordion-header:hover {
background: rgba(184, 89, 58, .06);
}
.mr-filter-accordion .accordion-header:focus-visible {
outline: 2px solid var(--mr-clay);
outline-offset: -2px;
}
.mr-filter-accordion .mr-filter-title {
display: inline-flex;
align-items: center;
gap: 10px;
}
.mr-filter-accordion .mr-filter-title::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
flex-shrink: 0;
}
/* Hide the legacy material-icon chevron — we use our own SVG */
.mr-filter-accordion .accordion-header::after {
content: none !important;
}
.mr-filter-accordion .mr-filter-chevron {
color: var(--mr-muted);
flex-shrink: 0;
transition: transform .25s var(--mr-ease), color .2s var(--mr-ease);
}
.mr-filter-accordion .accordion__item.active > .accordion-header .mr-filter-chevron {
transform: rotate(180deg);
color: var(--mr-ink);
}
.mr-filter-accordion .accordion-body__contents {
padding: 6px 22px 22px;
border-top: 1px solid var(--mr-rule-soft);
margin-top: -1px;
}
.sidebar-container .sidebar-widget {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 0 14px;
}
.sidebar-widget h3 {
color: var(--mr-muted);
font-family: var(--mr-font-body);
font-weight: 700;
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
margin: 0 0 6px;
}
/* Filter selects — tighter, lighter borders, no heavy boxes */
.accordion-body__contents .mr-select {
min-height: 46px;
padding: 0 42px 0 14px;
background: var(--mr-cream);
border: 1px solid var(--mr-rule-soft);
border-radius: var(--mr-r-sm);
font-size: 13.5px;
font-weight: 600;
color: var(--mr-ink);
transition: background-color .2s var(--mr-ease), border-color .2s var(--mr-ease);
background-image: linear-gradient(45deg, transparent 50%, var(--mr-muted) 50%), linear-gradient(135deg, var(--mr-muted) 50%, transparent 50%);
background-position: calc(100% - 16px) 18px, calc(100% - 10px) 18px;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat, no-repeat;
/* Composite both backgrounds */
background:
linear-gradient(45deg, transparent 50%, var(--mr-muted) 50%) calc(100% - 16px) 18px / 6px 6px no-repeat,
linear-gradient(135deg, var(--mr-muted) 50%, transparent 50%) calc(100% - 10px) 18px / 6px 6px no-repeat,
var(--mr-cream);
}
.accordion-body__contents .mr-select:hover:not(:disabled) {
background-color: var(--mr-cream-2);
border-color: var(--mr-rule-soft);
}
.accordion-body__contents .mr-select:focus {
border-color: var(--mr-pasture);
box-shadow: 0 0 0 3px rgba(26, 61, 46, .12);
}
.accordion-body__contents .mr-select:disabled {
background-color: rgba(243, 239, 230, .5);
color: var(--mr-muted-2);
}
.mr-listing-thumb {
isolation: isolate;
}
.mr-listing-thumb::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(circle at 50% 40%, rgba(93, 122, 76, .16), transparent 42%),
var(--mr-paper-2) url("data:image/svg+xml;utf8,") center/44px no-repeat;
}
.mr-listing-thumb img {
position: relative;
z-index: 1;
}
.mr-listing-thumb img[hidden] {
display: none !important;
}
/* Submit button — pill-shaped, sits centered with comfortable padding */
.accordion-body__contents form .col-xl-12 {
margin-top: 16px;
padding: 0;
}
.accordion-body__contents form .button {
width: 100%;
padding: 13px 20px;
margin: 0 !important;
font-size: 14px;
border-radius: 999px !important;
background: var(--mr-pasture);
color: var(--mr-cream);
font-weight: 700;
letter-spacing: -.005em;
}
.accordion-body__contents form .button:hover {
background: var(--mr-pasture-2);
}
/* ============================================================
Anuncio single page — header / sidebar / details
============================================================ */
.single-page-header {
background:
radial-gradient(ellipse 80% 60% at 80% 0%, rgba(184, 89, 58, .07), transparent 70%),
linear-gradient(180deg, var(--mr-paper-2) 0%, var(--mr-paper) 100%);
border-bottom: 1px solid var(--mr-rule);
padding: 76px 0 56px;
position: relative;
}
.single-page-header::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--mr-rule) 30%, var(--mr-rule) 70%, transparent 100%);
}
.single-page-header-inner {
display: flex;
align-items: flex-start;
gap: 32px;
}
.single-page-header .left-side {
flex: 1;
display: flex;
align-items: flex-start;
gap: 28px;
min-width: 0;
}
.single-page-header .right-side {
flex: 0 0 320px;
max-width: 320px;
}
.single-page-header .header-image {
width: 120px;
height: 120px;
border-radius: var(--mr-r-md);
overflow: hidden;
box-shadow: var(--mr-shadow-sm);
border: 1px solid var(--mr-rule);
background: var(--mr-paper-2);
flex-shrink: 0;
}
.single-page-header .header-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
.single-page-header .header-details h3 {
font-family: var(--mr-font-display) !important;
font-weight: 800;
font-variation-settings: "opsz" 64;
font-size: clamp(30px, 4vw, 46px) !important;
line-height: 1.04 !important;
letter-spacing: -.028em;
color: var(--mr-ink) !important;
margin: 0 0 18px;
}
.single-page-header .header-details ul {
margin-top: 6px;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.single-page-header .header-details ul li {
color: var(--mr-muted);
font-family: var(--mr-font-body);
font-size: 14px !important;
font-weight: 500;
letter-spacing: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
margin: 0;
}
.single-page-header .header-details ul li i {
color: var(--mr-clay);
font-size: 16px;
}
.single-page-header .header-details ul li a {
color: var(--mr-muted);
text-decoration: none;
}
.single-page-header .header-details ul li span {
font-size: 14px !important;
color: var(--mr-ink-2);
font-weight: 500;
}
/* Price box — refined catalogue style */
.salary-box {
border-radius: var(--mr-r-md);
background:
linear-gradient(180deg, rgba(255, 253, 248, .98), rgba(246, 241, 229, .98)) !important;
color: var(--mr-ink) !important;
box-shadow:
0 24px 42px -30px rgba(35, 30, 20, .38),
0 1px 0 rgba(255, 255, 255, .8) inset;
padding: 28px 28px 24px;
text-align: left;
position: relative;
overflow: hidden;
border: 1px solid rgba(215, 168, 79, .34);
}
.salary-box::before {
content: none;
display: none;
}
.salary-box::after {
content: "";
position: absolute;
left: 28px;
right: 28px;
top: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--mr-gold), transparent);
opacity: .9;
}
.salary-box > * {
position: relative;
z-index: 1;
}
.salary-box .salary-type {
color: var(--mr-gold-ink) !important;
font-family: var(--mr-font-body);
font-size: 11.5px !important;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
margin-bottom: 8px;
}
.salary-box .salary-amount {
color: var(--mr-ink);
font-family: var(--mr-font-display);
font-weight: 800;
font-variation-settings: "opsz" 64;
font-size: clamp(34px, 4vw, 52px);
line-height: 1.06;
letter-spacing: -.026em;
margin-bottom: 24px;
text-shadow: none;
}
/* Favorite button inside salary-box — subtle ghost, doesn't dominate the price */
.salary-box form {
margin: 0;
}
.salary-box .bookmark-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 54px;
padding: 12px 18px;
background: linear-gradient(135deg, #fff4cf, var(--mr-gold-2));
color: var(--mr-gold-ink);
border: 1px solid rgba(215, 168, 79, .58);
border-radius: var(--mr-r-md);
font-family: var(--mr-font-body);
font-weight: 700;
font-size: 14px;
letter-spacing: -.003em;
cursor: pointer;
box-shadow:
0 14px 24px -22px rgba(108, 74, 18, .55),
0 1px 0 rgba(255, 255, 255, .6) inset;
line-height: 1.2;
margin: 0;
position: relative;
transition: background-color .2s var(--mr-ease), border-color .2s var(--mr-ease), color .2s var(--mr-ease), transform .2s var(--mr-ease), box-shadow .2s var(--mr-ease);
}
.salary-box .bookmark-button:hover {
background: linear-gradient(135deg, var(--mr-gold-2), var(--mr-gold));
border-color: rgba(215, 168, 79, .82);
color: var(--mr-gold-ink);
transform: translateY(-1px);
box-shadow:
0 16px 28px -22px rgba(108, 74, 18, .65),
0 1px 0 rgba(255, 255, 255, .6) inset;
}
.salary-box .bookmark-button .bookmark-icon {
width: 22px;
height: 22px;
border: 0;
background: transparent !important;
display: inline-flex;
align-items: center;
justify-content: center;
position: static;
flex-shrink: 0;
border-radius: 0;
color: var(--mr-gold-ink);
transition: color .2s var(--mr-ease), transform .2s var(--mr-ease);
}
.salary-box .bookmark-button .bookmark-icon::before,
.salary-box .bookmark-button .bookmark-icon::after {
content: none !important;
display: none !important;
}
.salary-box .bookmark-button .bookmark-icon svg {
width: 100%;
height: 100%;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linejoin: round;
transition: fill .2s var(--mr-ease), stroke .2s var(--mr-ease);
}
.salary-box .bookmark-button:hover .bookmark-icon {
transform: scale(1.06);
}
.salary-box .bookmark-button.bookmarked {
background: linear-gradient(135deg, var(--mr-gold-2), var(--mr-gold));
border-color: rgba(255, 253, 244, .42);
color: var(--mr-gold-ink);
box-shadow:
0 16px 28px -20px rgba(215, 168, 79, .7),
0 1px 0 rgba(255, 255, 255, .32) inset;
}
.salary-box .bookmark-button.bookmarked .bookmark-icon svg {
fill: currentColor;
stroke: currentColor;
}
.salary-box .bookmark-button.bookmarked .bookmark-text,
.salary-box .bookmark-button:not(.bookmarked) .bookmarked-text {
display: none;
}
.salary-box .bookmark-button .bookmark-text,
.salary-box .bookmark-button.bookmarked .bookmarked-text {
display: inline;
}
/* ============================================================
Anuncio single-page-section panels — Vídeo, Fotos, Descrição
============================================================ */
.single-page-section {
padding: 32px;
margin-bottom: 24px;
border-radius: var(--mr-r-md);
}
.single-page-section h3 {
font-family: var(--mr-font-display);
font-weight: 700;
font-variation-settings: "opsz" 32;
font-size: 28px !important;
line-height: 1.08;
letter-spacing: -.024em;
color: var(--mr-ink);
margin: 0 0 22px !important;
padding-bottom: 18px;
border-bottom: 1px solid var(--mr-rule-soft);
position: relative;
}
.single-page-section h3::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 32px;
height: 1px;
background: var(--mr-clay);
}
.single-page-section > span {
color: var(--mr-ink-2);
font-family: var(--mr-font-body);
font-size: 16.5px !important;
line-height: 1.7;
font-weight: 400;
}
/* ============================================================
Anuncio sidebar — actions stack + Detalhes fact sheet
============================================================ */
.sidebar-container .sidebar-widget .job-overview {
padding: 0;
overflow: hidden;
border-radius: var(--mr-r-md);
background: var(--mr-cream);
border: 1px solid var(--mr-rule);
box-shadow: var(--mr-shadow-sm);
}
/* The action stack at the top of the sidebar — three CTAs of equal size */
.mr-action-stack {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px;
background: var(--mr-cream-2);
border-bottom: 1px solid var(--mr-rule);
}
/* All three action buttons share one visual contract */
.sidebar-container #btmsg,
.sidebar-container #btcompartilhar,
.sidebar-container .apply-now-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 52px;
padding: 0 18px;
margin: 0 !important;
border: 1px solid transparent;
border-radius: var(--mr-r-md) !important;
font-family: var(--mr-font-body);
font-weight: 600;
font-size: 14.5px;
letter-spacing: -.005em;
text-align: center;
cursor: pointer;
box-shadow: none;
transition: background-color .2s var(--mr-ease), border-color .2s var(--mr-ease), transform .2s var(--mr-ease), color .2s var(--mr-ease);
}
/* Primary: WhatsApp green — high signal "Falar com o vendedor" */
.sidebar-container #btmsg {
background: var(--mr-whatsapp);
color: var(--mr-cream);
border-color: var(--mr-whatsapp);
}
.sidebar-container #btmsg:hover {
background: var(--mr-whatsapp-2);
border-color: var(--mr-whatsapp-2);
transform: translateY(-1px);
box-shadow: 0 12px 22px -12px rgba(18, 140, 76, .5);
}
/* Secondary: pasture — "Enviar mensagem" */
.sidebar-container .apply-now-button {
background: var(--mr-pasture);
color: var(--mr-cream);
border-color: var(--mr-pasture);
}
.sidebar-container .apply-now-button:hover {
background: var(--mr-pasture-2);
border-color: var(--mr-pasture-2);
transform: translateY(-1px);
color: var(--mr-cream);
}
/* Tertiary: outlined — "Compartilhar" */
.sidebar-container #btcompartilhar {
background: transparent;
color: var(--mr-pasture);
border-color: var(--mr-rule);
}
.sidebar-container #btcompartilhar:hover {
background: var(--mr-tint);
border-color: var(--mr-sage);
color: var(--mr-pasture-2);
transform: translateY(-1px);
}
/* WhatsApp icon sizing inside any of those buttons — uniform */
.sidebar-container #btmsg img,
.sidebar-container #btcompartilhar img {
width: 18px !important;
height: 18px !important;
filter: brightness(1);
}
.sidebar-container #btcompartilhar img {
filter: grayscale(.2) brightness(.6);
}
/* Wipe layout artefacts that fight the new stack */
.sidebar-container .job-overview-headline:has(#btmsg),
.sidebar-container .job-overview-headline:has(#btcompartilhar) {
background: transparent;
border: 0;
padding: 0;
margin: 0;
}
.sidebar-container .sidebar-widget #msgbutton,
.sidebar-container .sidebar-widget #msgsucesso {
width: 100%;
}
/* Notification (login warning) inside sidebar */
.sidebar-container .notification.warning {
padding: 14px 16px;
background: rgba(184, 89, 58, .08);
border: 1px solid rgba(184, 89, 58, .22);
border-radius: var(--mr-r-sm);
color: var(--mr-ink);
font-family: var(--mr-font-body);
font-size: 13.5px;
font-weight: 500;
line-height: 1.5;
margin: 0;
}
.sidebar-container .notification.warning p {
margin: 0;
color: var(--mr-ink);
}
.sidebar-container .notification.warning p + p {
margin-top: 6px;
}
.sidebar-container .notification.warning a {
color: var(--mr-clay-2);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
/* The "Detalhes" header inside fact-sheet */
.job-overview-headline {
padding: 18px 22px 14px;
background: transparent;
border-bottom: 1px solid var(--mr-rule-soft);
color: var(--mr-muted);
font-family: var(--mr-font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
}
.job-overview-headline:not(:first-child) {
border-top: 1px solid var(--mr-rule);
}
/* Editorial fact-sheet rows */
.job-overview-inner ul {
margin: 0;
padding: 6px 22px 22px;
}
.job-overview-inner ul li {
position: relative;
padding: 14px 0 14px 32px;
border-bottom: 1px dashed var(--mr-rule-soft);
color: var(--mr-muted);
font-family: var(--mr-font-body);
line-height: 1.4;
}
.job-overview-inner ul li:last-child {
border-bottom: 0;
}
.job-overview-inner ul li i {
position: absolute;
left: 0;
top: 16px;
color: var(--mr-sage);
font-size: 18px;
}
.job-overview-inner ul li span {
display: block;
color: var(--mr-muted);
font-family: var(--mr-font-body);
font-size: 11.5px !important;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 2px;
}
.job-overview-inner ul li h5 {
color: var(--mr-ink);
font-family: var(--mr-font-body);
font-size: 15px;
font-weight: 600;
line-height: 1.35;
margin: 0;
letter-spacing: -.005em;
}
/* Copy URL row inside details */
.copy-url {
display: flex;
gap: 6px;
margin-top: 6px;
}
.copy-url input.with-border {
min-height: 38px;
padding: 0 10px;
font-size: 12.5px;
background: var(--mr-paper-2);
color: var(--mr-muted);
border-radius: var(--mr-r-sm);
}
.copy-url-button {
min-height: 38px;
padding: 0 14px;
background: var(--mr-pasture);
color: var(--mr-cream);
border: 1px solid var(--mr-pasture);
border-radius: var(--mr-r-sm);
font-family: var(--mr-font-body);
font-weight: 600;
font-size: 12.5px;
cursor: pointer;
transition: background-color .2s var(--mr-ease);
}
.copy-url-button:hover {
background: var(--mr-pasture-2);
}
/* ============================================================
Gallery (Fotos) inside anuncio
============================================================ */
.mr-gallery {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(280px, 1fr);
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 8px;
scrollbar-width: thin;
}
.mr-gallery::-webkit-scrollbar {
height: 6px;
}
.mr-gallery::-webkit-scrollbar-thumb {
background: var(--mr-rule);
border-radius: 999px;
}
.mr-gallery img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--mr-r-sm);
background: var(--mr-paper-2);
scroll-snap-align: start;
box-shadow: var(--mr-shadow-xs);
transition: transform .35s var(--mr-ease-out), box-shadow .35s var(--mr-ease-out);
}
.mr-gallery img:hover {
transform: translateY(-2px);
box-shadow: var(--mr-shadow-sm);
}
/* ============================================================
Video container inside anuncio
============================================================ */
.default-carousel-section .carousel-sample {
margin: 0 auto;
max-width: 100%;
background: var(--mr-paper-2) !important;
border-radius: var(--mr-r-sm);
overflow: hidden;
}
.default-carousel {
width: 100% !important;
max-width: 100%;
aspect-ratio: 16 / 9;
height: auto !important;
position: relative;
}
.default-carousel video,
#myVideo {
width: 100% !important;
height: 100% !important;
display: block;
background: #0f1311;
}
.overlay {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(15, 19, 17, .35) 0%, rgba(15, 19, 17, .82) 100%);
color: var(--mr-cream);
display: flex;
justify-content: center;
align-items: center;
font-family: var(--mr-font-display);
font-weight: 400;
font-style: italic;
font-size: 26px;
letter-spacing: -.01em;
cursor: pointer;
transition: opacity .3s var(--mr-ease);
gap: 12px;
}
.overlay::before {
content: "▶";
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: rgba(251, 248, 241, .14);
border: 1.5px solid rgba(251, 248, 241, .5);
backdrop-filter: blur(8px);
border-radius: 50%;
font-size: 18px;
font-style: normal;
padding-left: 4px;
}
.overlay:hover {
background: radial-gradient(circle at center, rgba(15, 19, 17, .25) 0%, rgba(15, 19, 17, .72) 100%);
}
/* ============================================================
Footer
============================================================ */
.footer-top-section {
display: none;
}
#footer {
margin-top: 60px;
margin-bottom: 0;
background: #0f1311;
color: rgba(251, 248, 241, .72);
position: relative;
}
#footer::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 800px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(216, 209, 191, .25), transparent);
}
.footer-middle-section {
border-top: 0;
padding: 60px 0 30px;
}
#footer h3,
#footer .footer-links h3 {
color: var(--mr-cream);
font-family: var(--mr-font-display);
font-weight: 700;
font-variation-settings: "opsz" 20;
font-size: 16px;
letter-spacing: -.018em;
margin-bottom: 18px;
}
#footer a,
#footer .footer-links ul li a span {
color: rgba(251, 248, 241, .72);
font-family: var(--mr-font-body);
font-size: 14px;
font-weight: 500;
transition: color .2s var(--mr-ease);
}
#footer a:hover,
#footer .footer-links ul li a:hover span {
color: var(--mr-cream);
}
.footer-bottom-section {
border-top: 1px solid rgba(251, 248, 241, .08);
padding: 22px 0;
}
.footer-bottom-section .row + .row {
margin-top: 4px;
}
.footer-bottom-section,
.footer-bottom-section .row > div {
color: rgba(251, 248, 241, .48);
font-family: var(--mr-font-body);
font-size: 12.5px;
line-height: 1.5;
}
.footer-bottom-section strong {
color: rgba(251, 248, 241, .82);
font-weight: 600;
}
.newsletter input {
background: rgba(251, 248, 241, .06);
border: 1px solid rgba(251, 248, 241, .14);
color: var(--mr-cream);
border-radius: var(--mr-r-sm);
padding: 0 14px;
min-height: 46px;
font-family: var(--mr-font-body);
}
.newsletter input::placeholder {
color: rgba(251, 248, 241, .42);
}
.newsletter button {
background: var(--mr-moss);
border-radius: var(--mr-r-sm);
color: var(--mr-cream);
transition: background-color .2s var(--mr-ease);
}
.newsletter button:hover {
background: var(--mr-moss-2);
}
/* ============================================================
Auth pages
============================================================ */
.login-register-page {
margin: 60px 0;
padding: 40px;
background: var(--mr-cream);
border-radius: var(--mr-r-lg);
border: 1px solid var(--mr-rule);
box-shadow: var(--mr-shadow-md);
}
.welcome-text {
text-align: center;
margin-bottom: 28px;
padding-bottom: 0;
}
.welcome-text h3 {
color: var(--mr-ink);
font-family: var(--mr-font-display);
font-weight: 800;
font-variation-settings: "opsz" 48;
font-size: 32px;
letter-spacing: -.026em;
margin: 0 0 10px;
line-height: 1.1;
}
.welcome-text > br {
display: none;
}
.welcome-text span {
display: block;
color: var(--mr-muted);
font-family: var(--mr-font-body);
font-size: 14.5px;
font-weight: 500;
}
.welcome-text span a {
color: var(--mr-pasture);
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color .2s var(--mr-ease);
}
.welcome-text span a:hover {
border-bottom-color: var(--mr-pasture);
}
.login-register-page .forgot-password {
display: block;
margin: 14px 0 18px;
color: var(--mr-pasture);
font-family: var(--mr-font-body);
font-weight: 600;
font-size: 13.5px;
text-decoration: none;
text-align: right;
}
.login-register-page .forgot-password:hover {
color: var(--mr-pasture-2);
text-decoration: underline;
text-underline-offset: 3px;
}
.login-register-page .button.full-width,
.login-register-page form .button {
width: 100%;
padding: 14px 22px;
margin-top: 4px !important;
border-radius: 999px !important;
background: var(--mr-pasture);
color: var(--mr-cream);
font-weight: 700;
font-size: 14.5px;
letter-spacing: -.005em;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.login-register-page .button.full-width i,
.login-register-page form .button i {
font-size: 18px;
}
.login-register-page .button.full-width:hover,
.login-register-page form .button:hover {
background: var(--mr-pasture-2);
transform: translateY(-1px);
box-shadow: 0 14px 28px -14px rgba(26, 61, 46, .5);
}
/* ============================================================
Modal dialog (Enviar mensagem)
============================================================ */
.mfp-bg {
background: rgba(15, 19, 17, .72);
backdrop-filter: blur(4px);
}
.dialog-with-tabs .sign-in-form {
background: var(--mr-cream);
border-radius: var(--mr-r-md);
border: 1px solid var(--mr-rule);
box-shadow: var(--mr-shadow-lg);
overflow: hidden;
}
.dialog-with-tabs .popup-tabs-nav {
background: var(--mr-pasture);
}
.dialog-with-tabs .popup-tabs-nav li a {
color: var(--mr-cream);
font-family: var(--mr-font-body);
font-weight: 600;
padding: 16px 22px;
}
.dialog-with-tabs .popup-tab-content {
padding: 32px;
}
.dialog-with-tabs .button.full-width {
width: 100%;
margin-top: 24px !important;
padding: 14px 20px;
}
.checkbox label {
color: var(--mr-ink-2);
font-family: var(--mr-font-body);
font-size: 13.5px;
font-weight: 500;
}
/* ============================================================
Notification banner (success after favoritar / enviar)
============================================================ */
.notification.success {
padding: 14px 16px;
background: var(--mr-tint);
border: 1px solid rgba(93, 122, 76, .35);
border-radius: var(--mr-r-sm);
color: var(--mr-pasture);
font-family: var(--mr-font-body);
font-weight: 600;
}
/* ============================================================
Subtle reveal animation for sections
============================================================ */
@keyframes mr-fade-up {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.mr-home-hero .banner-headline,
.mr-home-hero .intro-banner-search-form,
.mr-home-hero .mr-hero-actions,
.section-headline,
.single-page-header-inner,
.single-page-section,
.sidebar-container > * {
animation: mr-fade-up .7s var(--mr-ease-out) both;
}
.mr-home-hero .banner-headline { animation-delay: .05s; }
.mr-home-hero .intro-banner-search-form { animation-delay: .18s; }
.mr-home-hero .mr-hero-actions { animation-delay: .28s; }
.single-page-header-inner { animation-delay: .04s; }
.single-page-section { animation-delay: .08s; }
/* ============================================================
Vendor tweaks — neutralize old style.css conflicts
============================================================ */
.dashboard-box,
.dashboard-box .content,
.dashboard-box-list li {
border-color: var(--mr-rule);
}
.dashboard-box {
border-radius: var(--mr-r-md);
background: var(--mr-cream);
box-shadow: var(--mr-shadow-sm);
overflow: hidden;
}
.dashboard-box .headline {
background: var(--mr-cream-2);
}
.dashboard-content-container {
background:
radial-gradient(circle at 88% 8%, rgba(215, 168, 79, .07), transparent 28%),
linear-gradient(180deg, #fbfaf6 0%, #f5f3ed 100%);
}
.dashboard-content-inner {
width: 100%;
max-width: 1480px;
margin: 0 auto;
padding-left: clamp(24px, 4vw, 56px);
padding-right: clamp(24px, 4vw, 56px);
}
.dashboard-headline {
margin-bottom: clamp(28px, 4vw, 52px);
}
.dashboard-headline h3 {
color: var(--mr-ink);
font-family: var(--mr-font-display);
font-weight: 800;
letter-spacing: -.026em;
}
.dashboard-box .headline {
padding: 22px 28px;
border-bottom: 1px solid var(--mr-rule-soft);
}
.dashboard-box .headline h3 {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--mr-ink-2);
font-family: var(--mr-font-display);
font-size: 19px;
font-weight: 700;
letter-spacing: -.012em;
}
.dashboard-box .headline h3 i {
color: var(--mr-sage);
font-size: 22px;
}
.dashboard-box .content.with-padding {
padding: 26px 28px 30px;
}
.dashboard-box-list li {
background: #fffdf8;
}
.dashboard-box-list .button,
.dashboard-box-list button.button {
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.e-grid {
overflow: hidden;
border: 1px solid var(--mr-rule) !important;
border-radius: var(--mr-r-md);
background: var(--mr-cream);
}
.e-grid .e-toolbar,
.e-grid .e-gridheader {
background: var(--mr-cream-2);
}
.e-grid .e-headercell,
.e-grid .e-rowcell {
border-color: var(--mr-rule) !important;
}
/* Vendor table for backwards compat */
.mr-native-table {
width: 100%;
background: var(--mr-cream);
border: 1px solid var(--mr-rule);
border-radius: var(--mr-r-md);
box-shadow: var(--mr-shadow-sm);
overflow: hidden;
}
.dashboard-box .mr-native-table {
box-shadow: var(--mr-shadow-xs);
}
.dashboard-box .mr-native-table .mr-table-toolbar {
padding: 18px 22px;
border: 0;
border-bottom: 1px solid var(--mr-rule-soft);
border-radius: 0;
box-shadow: none;
}
.dashboard-box .mr-native-table .mr-table-toolbar .mr-input {
background: var(--mr-cream);
border-color: var(--mr-rule);
box-shadow: var(--mr-shadow-xs);
}
.mr-table-scroll {
overflow-x: auto;
}
.mr-table {
width: 100%;
border-collapse: collapse;
min-width: 720px;
}
.mr-table th,
.mr-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--mr-rule);
text-align: left;
vertical-align: middle;
font-family: var(--mr-font-body);
}
.mr-table th {
color: var(--mr-muted);
background: var(--mr-cream-2);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.mr-table td {
color: var(--mr-ink-2);
font-weight: 500;
background: #fffdf8;
}
.mr-table tr:last-child td {
border-bottom: 0;
}
.dashboard-box .mr-table-footer {
padding: 16px 22px 18px;
background: var(--mr-cream);
border-top: 1px solid var(--mr-rule-soft);
}
.dashboard-box .mr-table-pager {
margin-left: auto;
}
.mr-table-actions {
display: flex;
align-items: center;
gap: 8px;
}
.mr-messages-panel {
background: var(--mr-cream);
}
.mr-messages-panel .content.with-padding {
padding: 0;
background: var(--mr-cream);
}
.mr-messages-panel .mr-native-table {
border: 0;
border-radius: 0;
box-shadow: none;
}
.mr-messages-panel .mr-table-toolbar {
padding: 18px 22px;
border: 0;
border-bottom: 1px solid var(--mr-rule-soft);
border-radius: 0;
box-shadow: none;
}
.mr-messages-panel .mr-table-toolbar .mr-input {
background: var(--mr-cream);
border-color: var(--mr-rule);
box-shadow: var(--mr-shadow-xs);
}
.mr-messages-panel .mr-table th {
background: var(--mr-cream-2);
}
.mr-messages-panel .mr-table td {
background: #fffdf8;
}
.mr-messages-panel .mr-table-footer {
padding: 16px 22px;
background: var(--mr-cream);
border-top: 1px solid var(--mr-rule-soft);
}
.mr-icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 12px;
color: var(--mr-ink);
background: var(--mr-cream);
border: 1px solid var(--mr-rule);
border-radius: var(--mr-r-sm);
font-family: var(--mr-font-body);
font-weight: 600;
}
.mr-icon-button:hover {
color: var(--mr-cream);
background: var(--mr-pasture);
border-color: var(--mr-pasture);
}
.dashboard-box input[type="submit"] {
min-height: 44px;
padding: 0 20px;
border: 0;
border-radius: var(--mr-r-sm);
color: var(--mr-cream);
font-family: var(--mr-font-body);
font-weight: 700;
cursor: pointer;
}
.mr-check-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
padding: 14px;
background: var(--mr-cream);
border: 1px solid var(--mr-rule);
border-radius: var(--mr-r-md);
}
.mr-check-item {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 12px;
background: var(--mr-paper);
border: 1px solid var(--mr-rule);
border-radius: var(--mr-r-sm);
font-family: var(--mr-font-body);
font-weight: 600;
}
.mr-check-item input {
width: 18px;
height: 18px;
accent-color: var(--mr-pasture);
}
.mr-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-family: var(--mr-font-body);
font-weight: 700;
}
.mr-toggle input {
width: 18px;
height: 18px;
accent-color: var(--mr-pasture);
}
.mr-toggle span {
color: var(--mr-pasture);
}
.mr-search-page .mr-search-form {
margin-top: 22px !important;
background: var(--mr-cream);
border: 1px solid var(--mr-rule);
border-radius: 999px;
box-shadow: var(--mr-shadow-sm);
overflow: hidden;
}
.mr-search-page .mr-search-form .intro-search-field {
padding-left: 22px;
padding-right: 22px;
}
.mr-search-page .mr-search-form .mr-select,
.mr-search-page .mr-search-form .mr-input {
min-height: 46px;
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.mr-search-page .mr-search-form .mr-select:disabled {
background-color: rgba(232, 226, 211, .72);
border-color: rgba(216, 209, 191, .4);
}
.mr-search-page .mr-search-form .mr-select:hover:not(:disabled),
.mr-search-page .mr-search-form .mr-input:hover,
.mr-search-page .mr-search-form .mr-select:focus,
.mr-search-page .mr-search-form .mr-input:focus {
background-color: var(--mr-paper);
border-color: var(--mr-rule-soft);
}
.mr-search-page .mr-search-form .intro-search-button .button {
background: var(--mr-pasture);
}
.mr-search-page .mr-search-form .intro-search-button .button:hover {
background: var(--mr-pasture-2);
}
.mr-search-page .listings-container[data-native-table] {
width: 100%;
}
.mr-search-page .listings-container.compact-list-layout[data-native-table] {
display: block;
overflow: hidden;
background: var(--mr-cream);
border: 1px solid var(--mr-rule);
border-radius: var(--mr-r-md);
box-shadow: var(--mr-shadow-sm);
}
.mr-search-page .mr-table-toolbar {
padding: 16px 18px;
border: 0;
border-bottom: 1px solid var(--mr-rule-soft);
border-radius: 0;
box-shadow: none;
}
.mr-search-page .mr-table-toolbar .mr-input {
background: var(--mr-cream);
border-color: var(--mr-rule);
box-shadow: var(--mr-shadow-xs);
}
.mr-search-page .mr-grid-row-listing.job-listing {
border: 0;
border-bottom: 1px solid var(--mr-rule-soft);
border-radius: 0;
box-shadow: none;
background: #fffdf8;
}
.mr-search-page .mr-grid-row-listing.job-listing:hover {
border-color: var(--mr-rule-soft);
box-shadow: inset 3px 0 0 var(--mr-sage);
transform: none;
}
.mr-search-page .mr-table-footer {
padding: 16px 18px;
background: var(--mr-cream);
}
.mr-search-page .mr-table-pager {
margin-left: auto;
}
.mr-search-page .mr-empty-state {
display: flex;
min-height: 190px;
padding: 34px 28px;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fffdf8;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* ============================================================
Responsive
============================================================ */
@media (max-width: 1099px) {
#header { height: 72px; }
#logo { margin-right: 0; }
#logo img { max-height: 38px; }
.right-side { height: 72px; }
#header .right-side {
top: 0;
right: 18px;
display: flex;
align-items: center;
background: transparent;
}
.mmenu-trigger {
display: inline-flex !important;
align-items: center;
justify-content: center;
position: fixed;
top: 14px;
right: 18px;
z-index: 1000;
margin: 0;
background: var(--mr-cream);
border: 1px solid var(--mr-rule);
border-radius: var(--mr-r-sm);
}
.hamburger {
top: 0;
left: 0;
transform: scale(.72);
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
background-color: var(--mr-ink) !important;
}
.mr-home-hero.intro-banner { padding-top: 120px; }
.single-page-header-inner { flex-direction: column; }
.single-page-header .right-side { flex: 1; max-width: 100%; width: 100%; }
}
@media (max-width: 992px) {
.mr-hero-search.intro-banner-search-form {
display: grid;
grid-template-columns: 1fr;
padding: 10px;
gap: 0;
}
.intro-banner-search-form .intro-search-field {
border-right: 0;
border-bottom: 1px solid var(--mr-rule-soft);
}
.intro-banner-search-form .intro-search-field.with-autocomplete {
grid-template-columns: 1fr;
}
.intro-search-button .button {
width: 100%;
min-height: 60px;
}
.intro-search-button,
.intro-banner-search-form .intro-search-field {
width: 100%;
min-width: 0;
}
.content-left-offset { padding-left: 15px; }
}
@media (max-width: 768px) {
body { font-size: 15px; }
#header { height: 70px; }
#header .container { position: relative; }
#logo {
position: fixed;
top: 18px;
left: 18px;
margin: 0;
z-index: 1001;
}
#logo img { max-height: 34px; }
.mr-mobile-header-actions {
position: fixed !important;
top: 16px !important;
right: 64px !important;
z-index: 2000;
display: flex !important;
gap: 8px;
visibility: visible !important;
opacity: 1 !important;
}
.mr-mobile-header-actions a {
padding: 8px 12px;
color: var(--mr-pasture);
background: var(--mr-cream);
border: 1px solid var(--mr-rule);
border-radius: var(--mr-r-sm);
font-family: var(--mr-font-body);
font-size: 12px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.mr-mobile-header-actions a + a { display: none; }
#navigation {
display: none !important;
position: absolute;
left: 18px;
right: 18px;
top: 80px;
margin: 0;
overflow: hidden;
}
#navigation #responsive {
display: flex !important;
gap: 6px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 10px;
scrollbar-width: none;
}
#navigation #responsive::-webkit-scrollbar { display: none; }
#navigation ul li {
display: block;
float: none;
margin: 0;
padding: 0;
}
#navigation ul li a,
#navigation .list-apply-button {
display: inline-flex !important;
align-items: center;
height: 32px;
white-space: nowrap;
padding: 0 12px !important;
font-size: 12px;
line-height: 1;
}
.mmenu-trigger { display: none !important; }
.container {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.mr-home-hero .row,
.mr-search-page .row {
margin-left: 0;
margin-right: 0;
}
.mr-home-hero [class*="col-"],
.mr-search-page [class*="col-"] {
padding-left: 0;
padding-right: 0;
}
.mr-home-hero.intro-banner {
min-height: auto;
padding: 110px 0 70px;
}
.mr-home-hero.intro-banner::before {
background: linear-gradient(180deg, rgba(15, 24, 18, .72) 0%, rgba(15, 24, 18, .55) 100%);
}
.banner-headline h3 { font-size: 42px; }
.banner-headline h3 span { font-size: 17px; }
.mr-hero-actions a {
flex: 1 1 calc(50% - 5px);
justify-content: center;
}
.mr-hero-search.intro-banner-search-form {
width: 100%;
max-width: 100%;
overflow: hidden;
}
.mr-hero-search.intro-banner-search-form,
.mr-hero-search.intro-banner-search-form * {
box-sizing: border-box;
}
.e-grid {
max-width: calc(100vw - 40px);
overflow-x: auto;
}
.dashboard-content-inner {
padding-left: 18px;
padding-right: 18px;
}
.dashboard-box .headline,
.dashboard-box .content.with-padding {
padding-left: 18px;
padding-right: 18px;
}
.dashboard-box .mr-native-table .mr-table-toolbar,
.dashboard-box .mr-table-footer {
padding-left: 16px;
padding-right: 16px;
}
.mr-table-toolbar,
.mr-table-footer {
align-items: stretch;
flex-wrap: wrap;
}
.mr-table-toolbar .mr-input,
.mr-table-export,
.mr-table-pager,
.mr-table-pager button {
width: 100%;
max-width: 100%;
}
.mr-table-pager {
margin-left: 0;
}
.intro-banner-search-form input {
width: 100%;
overflow: hidden;
font-size: 15px;
text-overflow: ellipsis;
}
.section-headline { display: block; }
.section-headline::before { display: none; }
.section-headline > .headline-link { margin-top: 8px; display: inline-block; }
.job-listing-details {
display: grid;
grid-template-columns: 110px 1fr;
min-height: 0;
padding: 14px;
gap: 16px;
}
.job-listing-details > div:first-child,
.job-listing-company-logo {
width: 110px;
height: 110px;
flex-basis: 110px;
}
.job-listing-title { font-size: 18px; }
.job-listing-footer ul { gap: 6px; }
.job-listing-footer ul li {
font-size: 12px;
padding: 5px 9px;
}
.job-listing .list-apply-button { display: none; }
.single-page-section { padding: 22px; }
.single-page-header { padding: 40px 0 32px; }
.single-page-header-inner { gap: 22px; }
.single-page-header .left-side { gap: 18px; flex-direction: column; }
.single-page-header .header-image { width: 92px; height: 92px; }
.single-page-header .header-details h3 { font-size: 30px !important; }
.login-register-page { margin: 28px 0; padding: 24px; }
}
@media (max-width: 520px) {
.banner-headline h3 { font-size: 36px; }
.mr-hero-search.intro-banner-search-form { margin-top: 32px !important; }
.intro-banner-search-form .intro-search-field { padding: 12px 14px; }
.job-listing-details { grid-template-columns: 1fr; }
.job-listing-details > div:first-child,
.job-listing-company-logo {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
}
.footer-middle-section .row > div { margin-bottom: 24px; }
.mr-hero-actions a { flex: 1 1 100%; }
}
/* ============================================================
Admin row actions + media grid (for the listing detail page)
============================================================ */
.mr-row-actions {
display: flex;
gap: 4px;
align-items: center;
}
.mr-row-actions .mr-inline-form {
display: inline-block;
margin: 0;
}
.mr-icon-danger {
color: var(--mr-clay);
}
.mr-icon-danger:hover {
background: var(--mr-clay);
color: var(--mr-cream);
border-radius: var(--mr-r-sm);
}
.mr-media-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.mr-media-slot {
position: relative;
aspect-ratio: 1 / 1;
background: var(--mr-paper-2);
border: 1px solid var(--mr-rule-soft);
border-radius: var(--mr-r-md);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.mr-media-slot img,
.mr-media-slot video {
width: 100%;
height: 100%;
object-fit: cover;
}
.mr-media-empty {
color: var(--mr-muted-2);
font-size: 12px;
text-align: center;
}
.mr-media-caption {
position: absolute;
bottom: 6px;
left: 6px;
font-size: 10px;
background: rgba(26, 32, 23, 0.7);
color: var(--mr-cream);
padding: 2px 6px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.04em;
}