Searchblock

Style the specific page search box. Also applies to a search block inserted on an ordinary page, for example a 404 page.

/* SEARCHBLOCK 
- - - - - - - - - - - - - - */

// SEARCHBLOCKborders
.sqs-search-ui-button-wrapper.color-dark .search-input {
  background-color: transparent;
  border-width: 0;
  border-bottom: 1px solid @line;
}

// SEARCHBLOCKtext
.sqs-search-ui-button-wrapper.color-dark .search-input {
  .anti;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: @text!important;
  opacity: 1;
}

Here’s a more advanced styling, including replacement of the hideous standard search icon

/* SEARCH – PROJECTS
  - - - - - - - - - - - - - - */

// SEARCHreplace ugly icon
.sqs-search-ui-button-wrapper.color-dark .search-input {
  background-image: url(https://static1.squarespace.com/static/5c6acc274d8711284e877e95/t/5cde8a2fdc68af0001001f76/1558088239634/search_icon_100.png);
  background-size: 32px 32px;
  background-position: center left;
}

// SEARCHmove spinner to the right
.sqs-search-ui-button-wrapper .spinner-wrapper {
  left: 98%;
}

// SEARCH – button
.sqs-search-ui-button-wrapper.color-dark .search-input {
  border-width: 0;
  border-bottom: 1px solid @line;
  }

// SEARCH – title
.sqs-search-preview-ui .sqs-search-ui-result .sqs-search-ui-list .search-result 
.sqs-search-ui-item .sqs-title {
  font-family: @medium;
  color: #000;
}

// SEARCH RESULTSitalics
.sqs-search-preview-ui .sqs-search-ui-result .sqs-search-ui-list .search-result 
.sqs-search-ui-item em {
  font-family: @medium;
  font-weight: 500!important;
  font-style: normal;
  color: #000;
}

// SEARCH BOXouter borders
.sqs-search-preview-ui .sqs-search-ui-result {
  border-top-width: 0;
  border: 0;
}

// SEARCH BOXbackground and borders
.sqs-search-preview-ui .sqs-search-ui-result .sqs-search-ui-list .search-result {
  padding: 16px;
  background: #FFF;
  border-bottom: 0;
&:hover {
  background-color: @grey-ultra;
    }
  }

// SEARCH BOX TEXT
.sqs-search-ui-button-wrapper.color-dark .search-input {
  font-family: @light;
  font-size: 28px;
  letter-spacing: 0;
}