Шаблон:MainPage/styles.css

.home-hero__media,
.home-hero__scrim {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.home-hero__media img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.home-hero--loaded .home-hero__media img {
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.home-hero__media img {
		transition: none;
	}
}

.home-kicker {
    font-family: "'Roboto Mono', '','Menlo','Consolas','Liberation Mono','Fira Code','Courier New',monospace";
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-subtle);
    margin-left: 1rem ;
}



.new-item::after{
	content: "в системе NOIR"; /* Default text */
	animation: changeText 55s infinite linear;
	animation-delay: 5s;
}

.text-item {
	position: relative;
	top: 0;
	left: 0;
	opacity: 0;
	animation: fadeTimer 5s infinite linear; /* 12 seconds total loop */
}

@keyframes fadeTimer {
  0%, 10% { opacity: 0; }       /* Fade in starts */
  20%, 80% { opacity: 1; }     /* Fully visible */
  90%, 100% { opacity: 0; }    /* Fade out finishes and stays hidden */
}

@keyframes changeText {
	0% {content: "в системе NOIR";}
	10% {content: "Стандартные Рабочие Процедуры";}
	20% {content: "новости NanoTrasen";}
	30% {content: "работа в ДСО";}
	40% {content: "я первый день, что делать?!!";}
	50% {content: "история NanoTrasen";}
	60% {content: "Корпоративный Закон";}
	70% {content: "страховка сотрудников";}
	80% {content: "я клон?";}
	90% {content: "психологическая помощь сотрудникам";}
	100% {content: "что делать, если капитан домогается до меня?!";}
}
/*

*/

.home__search {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 820px;
	height: 4rem;
	margin-top: 2rem;
	padding: 0 1.5rem;
	font-size: 1.125rem;
	color: #9fb0bf;
	background-color: #12181f;
	border: 1px solid #2b3846;
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.home__search:hover {
	border-color: #0F4D0F;
	box-shadow: 0 0 0 3px rgba( 15, 77, 15, 0.43 );
}

.home__search img {
	filter: invert( 0.85 );
	opacity: 0.9;
}

.home__search kbd {
	margin-left: auto;
	line-height: 1;
	color: #8d9dab;
	background: none;
	border: 1px solid rgba( 159, 176, 191, 0.4 );
	border-radius: 4px;
	padding: 0.25rem 0.5rem;
}

.home__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}


.home__tabs {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-self: flex-start;
	margin-left: 2rem;
	background-color: rgba( 13, 17, 23, 0.85 );
	border: 1px solid #2b3846;
	border-top: 0;
	border-radius: 0 0 12px 12px;
	overflow: hidden;
}

/* The click area is the line box, not padding around it: one 36px line-height
   sets the tab's height directly, so the row is the same height whether a tab
   wraps to a second line or not, and the inline padding is left to do only what
   it is for. */
.home__tabs a {
	padding-inline: 1rem;
	font-size: 0.75rem;
	line-height: 36px;
	font-weight: 500;
	color: var(--accent-color-base);
}

.home__tabs a:hover {
	color: #fff;
	background-color: rgba( 111, 177, 232, 0.1 );
	text-decoration: none;
}

.home__tabs a + a {
	border-left: 1px solid #232c36;
}
.home__title {
	margin-top: 2rem;
	max-width: 960px;
	font-weight: 500;
	/*font-optical-sizing: none;*/
	font-size: 2.5rem;
	letter-spacing: -0.025em;
	line-height: 1;
	color: #f4f8fb;
	text-shadow: 0 2px 24px rgba( 0, 0, 0, 0.55 );
}

.home__title-dim {
	color: #b8c6d3;
}



/**/
.home-band__inner {
	/* width is explicit because auto inline margins suppress the cross-axis
	   stretch of a flex item -- without it the column collapses to its content
	   and stops lining up with the rest of the page. */
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
}
.home-grid {
	display: grid;
	grid-template-columns: repeat( 12, 1fr );
	gap: 1rem;
	align-items: stretch;
}

.home-grid .t-card {
	margin-block: 0;
	min-width: 0;
}

.home-card--aside {
	grid-column: span 4;
}



.home-frame {
	display: block;
	flex-direction: column;
	background: #0a1014;
	border: 1px solid #27292d;
	border-radius: 8px;
	border-spacing: 0;
	width: 80%
}

.home-frame__header {
	display: flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 10px;
	font-size: 115%;
	font-family:  'Roboto', 'Roboto-fallback';
	background: rgba(255,255,255,0.04);
	text-align: center;
}

.home-frame__content {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
	flex-grow: 2;
	border-radius: 0 0 0.3em 0.3em;
	margin: auto;
	padding:0;
}