inkShio

:root {
  --primary-color: #f9f9f9;
  --text-color: #424242;
}

:root.dark-mode {
  --primary-color: #161625;
  --text-color: #e1e1ff;
}

body {
  background: var(--primary-color);
  color: var(--text-color);
}

<a href="path-to-file.html" class="ajax-popup-link">Show inline popup</a>

@mixin placeholder-color($color)
{
	&::-webkit-input-placeholder
	{
		/* WebKit, Blink, Edge */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
	&:-moz-placeholder
	{
		/* Mozilla Firefox 4 to 18 */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
	&::-moz-placeholder
	{
		/* Mozilla Firefox 19+ */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
	&:-ms-input-placeholder
	{
		/* Internet Explorer 10-11 */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
	&::-ms-input-placeholder
	{
		/* Microsoft Edge */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
	&::placeholder
	{
		/* Most modern browsers support this now. */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
}

.link {
  @include placeholder-color(#ccc);
  &:hover {
    @include placeholder-color(#000);
  }
}

position: absolute;
width: 100%;
z-index: 10;
top: 0;
left: 0;

// стандарт
<div class="field">
  <input class="input" />
</div>

// с модификаторами
<div class="field field_big-space">
  <input class="input input_big-text" />
</div>

background: url(img\intro\intro__bg.jpg) center no-repeat;