@font-face {
font-family: "Bebas Neue";
src: url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/BebasNeue-Thin.woff2) format("woff2");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Bebas Neue";
src: url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/BebasNeueBook.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Bebas Neue";
src: url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/Bebas-Regular.woff2) format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Bebas Kai";
src:
url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/BebasKai.otf) format("opentype"),
url(//kreativ-one.com/wp-content/themes/kreativeone/BebasKai.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Stage Grotesk";
src: url(//kreativ-one.com/wp-content/themes/kreativone/assets/fonts/StageGrotesk-Thin.woff2)
format("woff2");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Stage Grotesk";
src: url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/StageGrotesk-ThinItalic.woff2) format("woff2");
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Stage Grotesk";
src: url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/StageGrotesk-Light.woff2) format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Stage Grotesk";
src: url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/StageGrotesk-LightItalic.woff2) format("woff2");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Stage Grotesk";
src: url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/StageGrotesk-Regular.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Stage Grotesk";
src: url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/StageGrotesk-Italic.woff2) format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Stage Grotesk";
src: url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/StageGrotesk-Medium.woff2) format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Stage Grotesk";
src: url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/StageGrotesk-MediumItalic.woff2) format("woff2");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Stage Grotesk";
src: url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/StageGrotesk-Bold.woff2) format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Stage Grotesk";
src: url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/StageGrotesk-BoldItalic.woff2) format("woff2");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Stage Grotesk";
src: url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/StageGrotesk-ExtraBold.woff2) format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Stage Grotesk";
src: url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/StageGrotesk-ExtraBoldItalic.woff2) format("woff2");
font-weight: 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Stage Grotesk";
src: url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/StageGrotesk-Black.woff2) format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Stage Grotesk";
src: url(https://kreativ-one.com/wp-content/themes/kreativeone/assets/fonts/StageGrotesk-BlackItalic.woff2) format("woff2");
font-weight: 900;
font-style: italic;
font-display: swap;
}
body {
font-family: "Stage Grotesk", sans-serif;
margin: 0;
padding: 0;
}
.menuprincipal a {
font-family: "Stage Grotesk", sans-serif !important;
font-size: var(--fs-20) !important;
font-weight: 400 !important;
text-transform: uppercase !important;
}
p {
font-family: "Stage Grotesk", sans-serif !important;
}
.service-band {
font-family: "Stage Grotesk", sans-serif !important;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 50px;
background: #232222;
border-bottom: 1px solid rgb(255 255 255 / 0.06);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.service-left h3 {
font-weight: 700;
color: #fff;
font-size: 30px;
margin: 0;
transition: all 0.4s ease;
}
.service-left p {
color: rgb(255 255 255 / 0.6);
margin: 6px 0 0;
font-size: 18px;
transition: all 0.4s ease;
}
.service-right {
position: relative;
min-width: 250px;
text-align: right;
}
.number {
font-family: "Bebas Kai";
font-size: 95px;
font-weight: 600;
color: rgb(255 255 255 / 0.15);
transition: all 0.4s ease;
}
.cta {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-family: "Bebas Kai";
font-size: var(--fs-30);
color: #ff1e1e;
font-weight: 600;
letter-spacing: 1px;
opacity: 0;
transform: translateY(-50%) translateX(10px);
transition: all 0.4s ease;
}
.service-band:hover {
padding-left: 5vw;
}
.service-band:hover h3 {
color: #e4140f;
}
.service-band:hover .number {
opacity: 0;
transform: translateX(10px);
}
.service-band:hover .cta {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.service-band::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 4px;
height: 0;
background: #e4140f;
transition: height 0.4s ease;
}
.service-band:hover::before {
height: 100%;
} :root {
--fs-10: clamp(0.5rem, 0.5vw, 0.625rem);
--fs-11: clamp(0.55rem, 0.54vw, 0.69rem);
--fs-12: clamp(0.6rem, 0.59vw, 0.75rem);
--fs-13: clamp(0.68rem, 0.64vw, 0.875rem);
--fs-14: clamp(0.73rem, 0.69vw, 0.9rem);
--fs-15: clamp(0.8rem, 0.74vw, 1rem);
--fs-16: clamp(0.88rem, 0.79vw, 1.125rem);
--fs-17: clamp(0.94rem, 0.84vw, 1.19rem);
--fs-18: clamp(1rem, 0.89vw, 1.25rem);
--fs-19: clamp(1.05rem, 0.94vw, 1.31rem);
--fs-20: clamp(1.1rem, 0.99vw, 1.375rem);
--fs-21: clamp(1.16rem, 1.04vw, 1.44rem);
--fs-22: clamp(1.21rem, 1.09vw, 1.5rem);
--fs-23: clamp(1.26rem, 1.14vw, 1.56rem);
--fs-24: clamp(1.31rem, 1.19vw, 1.625rem);
--fs-25: clamp(1.36rem, 1.24vw, 1.69rem);
--fs-26: clamp(1.41rem, 1.29vw, 1.75rem);
--fs-27: clamp(1.46rem, 1.34vw, 1.81rem);
--fs-28: clamp(1.51rem, 1.39vw, 1.875rem);
--fs-29: clamp(1.56rem, 1.44vw, 1.94rem);
--fs-30: clamp(1.61rem, 1.49vw, 2rem);
--fs-31: clamp(1.66rem, 1.54vw, 2.06rem);
--fs-32: clamp(1.71rem, 1.59vw, 2.125rem);
--fs-33: clamp(1.76rem, 1.64vw, 2.19rem);
--fs-34: clamp(1.81rem, 1.69vw, 2.25rem);
--fs-35: clamp(1.86rem, 1.74vw, 2.31rem);
--fs-36: clamp(1.91rem, 1.79vw, 2.375rem);
--fs-37: clamp(1.96rem, 1.84vw, 2.44rem);
--fs-38: clamp(2.01rem, 1.89vw, 2.5rem);
--fs-39: clamp(2.06rem, 1.94vw, 2.56rem);
--fs-40: clamp(2.11rem, 1.99vw, 2.625rem);
--fs-41: clamp(2.16rem, 2.04vw, 2.69rem);
--fs-42: clamp(2.21rem, 2.09vw, 2.75rem);
--fs-43: clamp(2.26rem, 2.14vw, 2.81rem);
--fs-44: clamp(2.31rem, 2.19vw, 2.875rem);
--fs-45: clamp(2.36rem, 2.24vw, 2.94rem);
--fs-46: clamp(2.41rem, 2.29vw, 3rem);
--fs-47: clamp(2.46rem, 2.34vw, 3.06rem);
--fs-48: clamp(2.51rem, 2.39vw, 3.125rem);
--fs-49: clamp(2.56rem, 2.44vw, 3.19rem);
--fs-50: clamp(2.61rem, 2.49vw, 3.25rem);
--fs-55: clamp(2.86rem, 2.74vw, 3.44rem);
--fs-60: clamp(3.11rem, 2.99vw, 3.75rem);
--fs-65: clamp(3.36rem, 3.24vw, 4.06rem);
--fs-70: clamp(3.61rem, 3.49vw, 4.375rem);
--fs-75: clamp(3.86rem, 3.74vw, 4.69rem);
--fs-80: clamp(4.11rem, 3.99vw, 5rem);
--fs-100: clamp(5.11rem, 4.99vw, 6.375rem);
--fs-120: clamp(6.11rem, 5.99vw, 7.625rem);
--fs-130: clamp(6.61rem, 6.49vw, 8.25rem);
}
.clientlogo .ekit-wid-con .elementskit-clients-slider .single-client {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.textdesign {
font-family: Georgia;
font-size: 91px;
}
.sectionlang {
background: #2d2d2d;
border-radius: 30px;
position: relative;
}
.clientlogo .swiper-pagination-bullet {
width: 28px !important;
height: 10px !important;
border: none;
border-radius: 2px;
background: #908e8e !important;
cursor: pointer;
padding: 0;
transition:
background 0.3s ease,
width 0.35s ease;
}
.clientlogo .swiper-pagination-bullet-active {
background: #e4140f !important;
width: 35px !important;
}
.sectionechange .btn-audit {
display: flex;
align-items: center;
justify-content: center;
width: 745px;
height: 67px;
padding: 0 1.5rem;
background: #fff;
border: 2px solid #6b0f1a;
cursor: pointer;
text-decoration: none;
overflow: hidden;
position: relative;
transition: background 0.35s;
}
.sectionechange .btn-audit:hover {
background: #2d2d2d;
}
.sectionechange .btn-label {
font-family: "Stage Grotesk", sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1a1a1a;
transition: color 0.35s;
white-space: nowrap;
}
.sectionechange .btn-audit:hover .btn-label {
color: #fff;
}
.sectionechange .btn-arrow {
font-size: 42px;
color: #1a1a1a;
transform: translateX(-200%);
opacity: 0;
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s;
}
.sectionechange .btn-audit:hover .btn-arrow {
transform: translateX(0);
opacity: 1;
color: #fff;
}
.sectionechange .btn-appel {
display: flex;
align-items: center;
justify-content: center;
width: 745px;
height: 67px;
padding: 0 1.5rem;
background: #fff0;
border: 2px solid #fff;
cursor: pointer;
text-decoration: none;
overflow: hidden;
position: relative;
transition: background 0.35s;
}
.sectionechange .btn-appel:hover {
background: #2d2d2d;
border: 2px solid #2d2d2d;
}
.sectionechange .btn-appel-label {
font-family: "Stage Grotesk", sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff;
transition: color 0.35s;
white-space: nowrap;
}
.sectionechange .btn-appel:hover .btn-appel-label {
color: #fff;
}
.sectionechange .btn-appel:hover .btn-arrow {
transform: translateX(0);
opacity: 1;
color: #fff;
}
@media (max-width: 600px) {
.sc-grid {
grid-template-columns: 1fr;
}
.sc-card {
border-left: 1px solid #ddd !important;
border-right: 1px solid #ddd !important;
min-height: 160px;
}
}
@media (max-width: 1024px) {
.menuprincipal a {
font-size: 18px !important;
}
}
@media (max-width: 768px) {
.sc-card {
min-height: 431px;
box-sizing: border-box;
}
.sectionechange .btn-appel,
.sectionechange .btn-audit {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 67px;
}
.sectionechange .btn-label,
.sectionechange .btn-appel-label {
font-size: 12px;
}
.menuprincipal a {
font-size: 16px !important;
}
.service-band {
flex-direction: column;
align-items: flex-start;
padding: 20px;
gap: 12px;
}
.service-left h3 {
font-size: 20px;
line-height: 1.3;
}
.service-left p {
font-size: 15px;
}
.service-right {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
min-width: auto;
margin-top: 10px;
}
.number {
font-size: 28px;
opacity: 0.2 !important;
transform: none !important;
}
.cta {
position: static;
opacity: 1 !important;
transform: none !important;
font-size: 15px;
color: #ff1e1e;
}
.service-band:hover {
padding-left: 20px;
}
.service-band:hover .number,
.service-band:hover .cta {
transform: none;
}
}
@media (max-width: 480px) {
.menuprincipal a {
font-size: 14px !important;
}
.sc-card {
min-height: 250px;
box-sizing: border-box;
}
}
p.kreativ-hs__desc {
font-family: "Stage Grotesk", sans-serif;
font-size: 25px;
} body {
cursor: none;
}
wp-block-list {
font-family: "Stage Grotesk";
font-size: 18px;
} .cursor-dot {
width: 8px;
height: 8px;
background: #e4140f;
border-radius: 50%;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 999999;
transform: translate(-50%, -50%);
} .cursor-outline {
width: 42px;
height: 42px;
border: 1px solid #e4140f;
border-radius: 50%;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 999998;
transform: translate(-50%, -50%);
transition:
width 0.25s ease,
height 0.25s ease,
border-color 0.25s ease,
background 0.25s ease;
} .cursor-hover .cursor-outline {
width: 74px;
height: 74px;
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.9);
}
.cursor-hover .cursor-dot {
transform: translate(-50%, -50%) scale(0.4);
} @media (max-width: 768px) {
.cf7-diagnostic-wrapper input[type="submit"],
.cf7-diagnostic-wrapper .wpcf7-submit {
font-size: 10px !important;
padding: 12px 15px;
}
.cs-title {
font-size: 20px !important;
}
.cursor-dot,
.cursor-outline {
display: none;
}
body {
cursor: auto;
}
.textdesign {
font-family: Georgia;
font-size: 51px;
}
p.kreativ-hs__desc {
font-size: 20px;
}
}
@media (max-width: 480px) {
.cf7-diagnostic-wrapper input[type="submit"],
.cf7-diagnostic-wrapper .wpcf7-submit {
font-size: 10px;
padding: 12px 15px;
}
.cs-title {
font-size: 20px !important;
}
.cursor-dot,
.cursor-outline {
display: none;
}
body {
cursor: auto;
}
.textdesign {
font-family: Georgia;
font-size: 20px;
}
p.kreativ-hs__desc {
font-size: 18px;
}
}
#site-preloader {
position: fixed;
inset: 0;
background: #050505;
z-index: 999999;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transition:
opacity 0.8s ease,
visibility 0.8s ease;
z-index: 999999999;
pointer-events: all;
}
#site-preloader.hide {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.preloader-content {
text-align: center;
width: 320px;
z-index: 99999;
background: #000;
}
.preloader-logo {
width: 350px;
margin-bottom: 34px;
animation: floatLogo 2s ease-in-out infinite;
}
.preloader-text {
font-family: "Syne", sans-serif;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 20px;
}
.preloader-text span {
color: #e4140f;
}
.preloader-bar-wrap {
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
overflow: hidden;
position: relative;
}
html.preloader-active,
body.preloader-active {
overflow: hidden !important;
}
.preloader-bar {
width: 0%;
height: 100%;
background: linear-gradient(90deg, #ffffff, #8f8f8f);
border-radius: 999px;
animation: loadingBar 2s ease forwards;
}
@keyframes loadingBar {
from {
width: 0%;
}
to {
width: 100%;
}
}
@keyframes floatLogo {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-6px);
}
100% {
transform: translateY(0px);
}
}
.cs-card {
background: #1e1e1e;
width: 506px;
height: 520px;
padding: 60px 40px;
box-sizing: border-box;
position: relative;
overflow: hidden;
cursor: pointer;
font-family: var(--font-sans), sans-serif;
}
.cs-num {
font-family: "Bebas Kai";
font-size: 95px;
font-weight: 700;
color: rgba(255, 255, 255, 0.12);
line-height: 1;
margin: 0 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.cs-arrow {
display: flex;
align-items: center;
opacity: 0;
transform: translateX(-24px);
transition:
opacity 0.35s ease,
transform 0.35s ease;
font-size: 80px;
color: #fff;
pointer-events: none;
}
.cs-card:hover .cs-arrow {
opacity: 0;
transform: translateX(0);
}
.cs-card:not(:hover) .cs-arrow {
opacity: 0;
transform: translateX(-220px);
transition:
opacity 0.3s ease,
transform 0.3s ease;
}
.cs-title {
padding-top: 20px;
font-size: 35px;
font-weight: 800;
letter-spacing: 0.04em;
color: #ffffff;
margin: 0 0 6px;
text-transform: uppercase;
}
.cs-subtitle {
font-size: 20px;
font-weight: 600;
letter-spacing: 0.1em;
color: #cc2222;
text-transform: uppercase;
margin: 0 0 18px;
}
.cs-body {
font-size: 18px;
line-height: 1.4 !important;
color: rgba(255, 255, 255, 0.72);
margin: 0;
padding-bottom: 30px;
}
.cs-card:hover {
background: #2b0c0c;
}
.cs-card {
transition: background 0.3s ease;
}
.box-circle {
display: inline-block;
width: 25px;
height: 25px;
border: 2px solid #707070;
border-radius: 50%;
background: transparent;
}
.box-process:hover .box-circle {
display: inline-block;
width: 25px;
height: 25px;
border: 2px solid #e4140f;
border-radius: 50%;
background: #e4140f;
}
.box-nosvaleurs:hover h2 {
color: #e4140f !important;
} .cf7-diagnostic-wrapper {
background: transparent;
padding: 5px;
margin: 0 auto;
font-family: "Stage Grotesk", sans-serif;
} .cf7-row {
margin-bottom: 22px;
}
.cf7-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 600px) {
.cf7-two-col {
grid-template-columns: 1fr;
}
} .cf7-diagnostic-wrapper label,
.cf7-diagnostic-wrapper .cf7-label-services {
display: block;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.08em;
color: #cccccc;
margin-bottom: 0px;
text-transform: uppercase;
padding-top: 30px;
} .cf7-diagnostic-wrapper .wpcf7-form-control-wrap {
display: block;
width: 100%;
} .cf7-diagnostic-wrapper input[type="text"],
.cf7-diagnostic-wrapper input[type="email"],
.cf7-diagnostic-wrapper input[type="tel"] {
display: block;
width: 100%;
background: #2a2a2a;
border: 1px solid #908e8e;
border-radius: 3px;
color: #ffffff;
font-size: 14px;
padding: 14px 16px;
box-sizing: border-box;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
outline: none;
font-family: inherit;
} .cf7-diagnostic-wrapper textarea,
.cf7-diagnostic-wrapper .wpcf7-textarea {
display: block !important;
width: 100% !important;
min-height: 140px;
background: #2a2a2a;
border: 1px solid #908e8e;
border-radius: 3px;
color: #ffffff;
font-size: 14px;
padding: 14px 16px;
box-sizing: border-box !important;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
outline: none;
font-family: inherit;
resize: vertical;
} .cf7-diagnostic-wrapper input::placeholder,
.cf7-diagnostic-wrapper textarea::placeholder {
color: #666666;
} .cf7-diagnostic-wrapper input[type="text"]:focus,
.cf7-diagnostic-wrapper input[type="email"]:focus,
.cf7-diagnostic-wrapper input[type="tel"]:focus,
.cf7-diagnostic-wrapper textarea:focus,
.cf7-diagnostic-wrapper select:focus {
border-color: #e4140f !important;
box-shadow: 0 0 0 2px rgba(228, 20, 15, 0.18) !important;
outline: none;
} .cf7-diagnostic-wrapper select {
display: block;
width: 100%;
background: #2a2a2a;
border: 1px solid #908e8e;
border-radius: 3px;
color: #888888;
font-size: 14px;
padding: 14px 42px 14px 16px;
box-sizing: border-box;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
font-family: inherit;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
}
.cf7-diagnostic-wrapper select option {
background: #2a2a2a;
color: #ffffff;
}
.cf7-diagnostic-wrapper select.has-value {
color: #ffffff;
}  .cf7-diagnostic-wrapper .wpcf7-checkbox {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
}
.cf7-diagnostic-wrapper .wpcf7-checkbox .wpcf7-list-item {
margin: 0;
} .cf7-diagnostic-wrapper .wpcf7-checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
} .cf7-diagnostic-wrapper .wpcf7-checkbox .wpcf7-list-item label {
display: inline-flex;
align-items: center;
padding: 8px 18px;
border: 1.5px solid #444444;
border-radius: 2px;
background: transparent;
color: #cccccc;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition:
border-color 0.2s ease,
color 0.2s ease,
background 0.2s ease;
user-select: none;
margin-bottom: 0;
} .cf7-diagnostic-wrapper .wpcf7-checkbox .wpcf7-list-item label:hover {
border-color: #e4140f;
color: #ffffff;
} .cf7-diagnostic-wrapper .wpcf7-checkbox .wpcf7-list-item label.cf7-checked {
border-color: #e4140f;
background: rgba(228, 20, 15, 0.15);
color: #ffffff;
} .cf7-submit-row {
margin-top: 10px;
}
.cf7-diagnostic-wrapper input[type="submit"],
.cf7-diagnostic-wrapper .wpcf7-submit {
display: block;
width: 100%;
background: #e4140f;
color: #ffffff;
border: none;
border-radius: 2px;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 18px 24px;
cursor: pointer;
transition:
background 0.2s ease,
transform 0.1s ease;
font-family: inherit;
text-align: center;
}
.cf7-diagnostic-wrapper input[type="submit"]:hover,
.cf7-diagnostic-wrapper .wpcf7-submit:hover {
background: #c41009;
}
.cf7-diagnostic-wrapper input[type="submit"]:active,
.cf7-diagnostic-wrapper .wpcf7-submit:active {
transform: scale(0.99);
} .cf7-legal {
text-align: center;
font-size: 15px;
color: #666666;
margin-top: 5px;
margin-bottom: 0;
line-height: 1.5;
} .cf7-diagnostic-wrapper .wpcf7-not-valid-tip {
color: #e4140f;
font-size: 11px;
margin-top: 4px;
display: block;
}
.cf7-diagnostic-wrapper .wpcf7-response-output {
border-color: #e4140f !important;
color: #e4140f;
background: rgba(228, 20, 15, 0.08);
font-size: 13px;
padding: 12px 16px;
border-radius: 3px;
margin-top: 16px;
}
.cf7-diagnostic-wrapper .wpcf7-mail-sent-ok {
border-color: #28a745 !important;
color: #28a745 !important;
background: rgba(40, 167, 69, 0.08) !important;
} *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--red-deep: #8b0000;
--red-vivid: #cc0000;
--red-accent: #e02020;
--dark-bg: #1a1a1a;
--card-bg: #242424;
--border-sub: #2e2e2e;
--text-white: #000;
--text-muted: #999;
--text-body: #d0cbca;
--max-w: 1700px;
--gutter: clamp(1.25rem, 4vw, 3.5rem);
--hero-h: clamp(340px, 55vh, 620px);
--radius: 4px;
--font-display: "Bebas Kai";
--font-serif: "Stage Grotesk", serif;
--font-body: "Stage Grotesk", sans-serif;
--transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
html {
scroll-behavior: smooth;
}
body {
background: var(--dark-bg);
color: var(--text-body);
font-family: var(--font-body);
font-size: clamp(0.95rem, 1.5vw, 1.08rem);
line-height: 1.78;
-webkit-font-smoothing: antialiased;
} .ko-inner {
width: 100%;
max-width: var(--max-w);
margin-inline: auto;
padding-inline: var(--gutter);
} .ko-hero {
position: relative;
width: 100%;
min-height: var(--hero-h);
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--red-deep);
}
.ko-hero__bg {
position: absolute;
inset: 0;
background-image: var(--thumb-url, none);
background-size: cover;
background-position: center;
transform: scale(1.04);
transition: transform 8s ease;
will-change: transform;
}
.ko-hero:hover .ko-hero__bg {
transform: scale(1);
} .ko-hero__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(10, 0, 0, 0.92) 0%,
rgba(10, 0, 0, 0.55) 45%,
transparent 100%
),
linear-gradient(to right, rgba(139, 0, 0, 0.35) 0%, transparent 60%);
} .ko-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(to right, var(--red-vivid), var(--red-accent));
}
.ko-hero__content {
position: relative;
z-index: 2;
width: 100%;
padding-block: clamp(2rem, 5vw, 4rem);
} .ko-breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 1.25rem;
}
.ko-breadcrumb a {
color: var(--text-muted);
text-decoration: none;
transition: color var(--transition);
}
.ko-breadcrumb a:hover {
color: var(--red-accent);
}
.ko-breadcrumb span.sep {
color: var(--red-accent);
font-size: 0.65rem;
} .ko-cat-badge {
display: inline-block;
background: var(--red-accent);
color: #fff;
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0.3rem 0.75rem;
border-radius: var(--radius);
margin-bottom: 1rem;
text-decoration: none;
transition: background var(--transition);
}
.ko-cat-badge:hover {
background: var(--red-deep);
color: #fff;
} .ko-hero__title {
font-family: var(--font-display);
font-size: clamp(2.4rem, 6vw, 5.5rem);
line-height: 1;
letter-spacing: 0.02em;
color: var(--text-white);
max-width: 900px;
margin-bottom: 1.25rem;
text-transform: uppercase;
} .ko-hero__excerpt {
font-size: clamp(0.95rem, 1.4vw, 1.1rem);
color: rgba(245, 240, 238, 0.75);
max-width: 620px;
line-height: 1.7;
margin-bottom: 1.5rem;
} .ko-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.25rem;
font-size: 0.82rem;
color: var(--text-muted);
letter-spacing: 0.03em;
}
.ko-meta__item {
display: flex;
align-items: center;
gap: 0.4rem;
}
.ko-meta__item svg {
width: 14px;
height: 14px;
fill: none;
stroke: var(--red-accent);
stroke-width: 2;
flex-shrink: 0;
}
.ko-meta__divider {
width: 1px;
height: 14px;
background: var(--border-sub);
} .ko-layout {
display: grid;
grid-template-columns: 1fr 340px;
gap: clamp(2rem, 4vw, 4rem);
padding-block: clamp(3rem, 6vw, 6rem);
align-items: start;
}
@media (max-width: 1100px) {
.ko-layout {
grid-template-columns: 1fr;
}
} .ko-article {
min-width: 0;
} .ko-article > .entry-content > p:first-of-type,
.ko-lead {
font-family: "Bebas Kai";
font-size: clamp(1.15rem, 2vw, 1.4rem);
line-height: 1.65;
color: #000;
border-left: 3px solid var(--red-accent);
padding-left: 1.25rem;
margin-bottom: 2.5rem;
} .entry-content h2 {
font-family: "Stage Grotesk";
font-size: 25px;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #000;
margin-top: 3rem;
margin-bottom: 1rem;
position: relative;
padding-bottom: 0.5rem;
}
.entry-content h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background: var(--red-accent);
}
.entry-content h3 {
font-family: var(--font-serif);
font-size: clamp(1.2rem, 2vw, 1.7rem);
color: var(--text-white);
margin-top: 2.25rem;
margin-bottom: 0.75rem;
}
.entry-content p {
font-size: 22px !important;
margin-bottom: 1.5rem;
color: #000;
font-family: "Stage Grotesk";
}
.entry-content a {
color: var(--red-accent);
text-decoration: underline;
text-decoration-color: transparent;
transition: text-decoration-color var(--transition);
}
.entry-content a:hover {
text-decoration-color: var(--red-accent);
}
.entry-content ul,
.entry-content ol {
padding-left: 1.5rem;
margin-bottom: 1.5rem;
}
.entry-content li {
margin-bottom: 0.5rem;
}
.entry-content ul li::marker {
color: var(--red-accent);
} .entry-content blockquote {
position: relative;
background: var(--card-bg);
border-left: 4px solid var(--red-accent);
margin: 2.5rem 0;
padding: 1.75rem 2rem 1.75rem 2.5rem;
font-family: var(--font-serif);
font-size: clamp(1.1rem, 1.8vw, 1.3rem);
font-style: italic;
color: var(--text-white);
line-height: 1.6;
}
.entry-content blockquote::before {
content: "\201C";
position: absolute;
top: -0.3rem;
left: 0.75rem;
font-size: 5rem;
color: var(--red-accent);
opacity: 0.25;
line-height: 1;
font-family: Georgia, serif;
} .entry-content img,
.entry-content figure img {
width: 100%;
height: auto;
border-radius: var(--radius);
margin-block: 2rem;
display: block;
}
.entry-content figcaption {
text-align: center;
font-size: 0.82rem;
color: var(--text-muted);
margin-top: -1.25rem;
margin-bottom: 2rem;
} .entry-content code {
background: #111;
color: #f87171;
padding: 0.15em 0.45em;
border-radius: 3px;
font-size: 0.88em;
font-family: "JetBrains Mono", monospace;
}
.entry-content pre {
background: #111;
padding: 1.5rem;
border-radius: var(--radius);
overflow-x: auto;
margin-bottom: 2rem;
}
.entry-content pre code {
background: none;
padding: 0;
} .entry-content table {
width: 100%;
border-collapse: collapse;
margin-bottom: 2rem;
font-size: 0.92rem;
}
.entry-content th {
background: var(--red-deep);
color: var(--text-white);
padding: 0.75rem 1rem;
text-align: left;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 0.78rem;
}
.entry-content td {
padding: 0.7rem 1rem;
border-bottom: 1px solid var(--border-sub);
color: var(--text-body);
}
.entry-content tr:hover td {
background: rgba(255, 255, 255, 0.02);
} .ko-portfolio-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
margin-block: 2.5rem;
}
.ko-portfolio-gallery img {
aspect-ratio: 16/10;
object-fit: cover;
border-radius: var(--radius);
width: 100%;
cursor: zoom-in;
transition:
transform var(--transition),
filter var(--transition);
filter: brightness(0.88);
}
.ko-portfolio-gallery img:hover {
transform: scale(1.02);
filter: brightness(1);
} .ko-project-meta {
background: var(--card-bg);
border: 1px solid var(--border-sub);
border-radius: var(--radius);
padding: 1.75rem 2rem;
margin-bottom: 2.5rem;
}
.ko-project-meta__title {
font-family: var(--font-display);
font-size: 1rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--red-accent);
margin-bottom: 1.25rem;
}
.ko-project-meta__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1rem 1.5rem;
}
.ko-project-meta__item label {
display: block;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 0.2rem;
}
.ko-project-meta__item span {
font-size: 0.92rem;
color: var(--text-white);
font-weight: 400;
} .ko-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--border-sub);
}
.ko-tags a {
background: transparent;
border: 1px solid var(--border-sub);
color: var(--text-muted);
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.3rem 0.85rem;
border-radius: 2px;
text-decoration: none;
transition:
border-color var(--transition),
color var(--transition);
}
.ko-tags a:hover {
border-color: var(--red-accent);
color: var(--red-accent);
} .ko-share {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.ko-share__label {
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
.ko-share__btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 1rem;
border-radius: var(--radius);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.05em;
text-decoration: none;
text-transform: uppercase;
transition:
opacity var(--transition),
transform var(--transition);
}
.ko-share__btn:hover {
opacity: 0.85;
transform: translateY(-1px);
}
.ko-share__btn--fb {
background: #1877f2;
color: #fff;
}
.ko-share__btn--tw {
background: #000;
color: #fff;
}
.ko-share__btn--li {
background: #0a66c2;
color: #fff;
}
.ko-share__btn--wa {
background: #25d366;
color: #fff;
}
.ko-share__btn svg {
width: 14px;
height: 14px;
fill: currentColor;
} .ko-author {
display: flex;
gap: 1.5rem;
align-items: flex-start;
background: var(--card-bg);
border: 1px solid var(--border-sub);
border-left: 4px solid var(--red-accent);
padding: 1.75rem;
border-radius: var(--radius);
margin-top: 3rem;
}
.ko-author__avatar {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--red-accent);
}
.ko-author__name {
font-family: var(--font-display);
font-size: 1.2rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-white);
margin-bottom: 0.35rem;
}
.ko-author__role {
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--red-accent);
margin-bottom: 0.6rem;
}
.ko-author__bio {
font-size: 0.9rem;
color: var(--text-muted);
} .ko-sidebar {
position: sticky;
top: 2rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
@media (max-width: 1100px) {
.ko-sidebar {
position: static;
}
}
.ko-widget {
background: var(--card-bg);
border: 1px solid var(--border-sub);
border-radius: var(--radius);
overflow: hidden;
}
.ko-widget__header {
background: linear-gradient(135deg, var(--red-deep), #4a0000);
padding: 0.9rem 1.25rem;
}
.ko-widget__title {
font-family: var(--font-display);
font-size: 1rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-white);
}
.ko-widget__body {
padding: 1.25rem;
} .ko-toc-list {
list-style: none;
padding: 0;
counter-reset: toc;
}
.ko-toc-list li {
counter-increment: toc;
margin-bottom: 0;
border-bottom: 1px solid var(--border-sub);
}
.ko-toc-list li:last-child {
border-bottom: none;
}
.ko-toc-list a {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.65rem 0;
text-decoration: none;
color: var(--text-muted);
font-size: 0.85rem;
transition: color var(--transition);
}
.ko-toc-list a::before {
content: counter(toc, decimal-leading-zero);
font-family: var(--font-display);
font-size: 0.75rem;
color: var(--red-accent);
flex-shrink: 0;
}
.ko-toc-list a:hover {
color: var(--text-white);
} .ko-related-post {
display: flex;
gap: 0.85rem;
align-items: flex-start;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border-sub);
text-decoration: none;
transition: transform var(--transition);
}
.ko-related-post:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.ko-related-post:hover {
transform: translateX(4px);
}
.ko-related-post img {
width: 72px;
height: 56px;
object-fit: cover;
border-radius: 3px;
flex-shrink: 0;
}
.ko-related-post__title {
font-size: 0.82rem;
color: var(--text-white);
line-height: 1.4;
font-weight: 400;
}
.ko-related-post__date {
font-size: 0.72rem;
color: var(--text-muted);
margin-top: 0.3rem;
} .ko-cta-widget {
background: linear-gradient(135deg, var(--red-deep) 0%, #3d0000 100%);
border: 1px solid rgba(204, 0, 0, 0.3);
border-radius: var(--radius);
padding: 2rem 1.5rem;
text-align: center;
}
.ko-cta-widget h3 {
font-family: var(--font-display);
font-size: 1.6rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-white);
margin-bottom: 0.75rem;
}
.ko-cta-widget p {
font-size: 0.85rem;
color: rgba(245, 240, 238, 0.7);
margin-bottom: 1.25rem;
line-height: 1.6;
}
.ko-btn {
display: inline-block;
background: var(--red-accent);
color: #fff;
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.75rem 1.5rem;
border-radius: var(--radius);
text-decoration: none;
border: none;
cursor: pointer;
transition:
background var(--transition),
transform var(--transition);
}
.ko-btn:hover {
background: #b01010;
transform: translateY(-2px);
}
.ko-btn--outline {
background: transparent;
border: 1px solid var(--red-accent);
color: var(--red-accent);
}
.ko-btn--outline:hover {
background: var(--red-accent);
color: #fff;
} .ko-post-nav {
width: 100%;
background: var(--card-bg);
border-top: 1px solid var(--border-sub);
border-bottom: 1px solid var(--border-sub);
}
.ko-post-nav__inner {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: var(--max-w);
margin-inline: auto;
}
@media (max-width: 640px) {
.ko-post-nav__inner {
grid-template-columns: 1fr;
}
}
.ko-post-nav__item {
display: flex;
flex-direction: column;
padding: clamp(1.25rem, 3vw, 2rem) var(--gutter);
text-decoration: none;
transition: background var(--transition);
border-right: 1px solid var(--border-sub);
}
.ko-post-nav__item:last-child {
border-right: none;
}
.ko-post-nav__item:hover {
background: rgba(255, 255, 255, 0.02);
}
.ko-post-nav__label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--red-accent);
margin-bottom: 0.4rem;
}
.ko-post-nav__label svg {
width: 12px;
height: 12px;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
}
.ko-post-nav__title {
font-family: var(--font-serif);
font-size: clamp(0.95rem, 1.5vw, 1.2rem);
color: var(--text-white);
line-height: 1.35;
}
.ko-post-nav__item--next {
text-align: right;
}
.ko-post-nav__item--next .ko-post-nav__label {
justify-content: flex-end;
} .ko-comments-section {
width: 100%;
padding-block: clamp(3rem, 5vw, 5rem);
}
.ko-comments-section .ko-inner > h2 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.5vw, 3rem);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-white);
margin-bottom: 2.5rem;
}
.ko-comments-section .ko-inner > h2 span {
color: var(--red-accent);
} .ko-comment {
display: flex;
gap: 1.25rem;
margin-bottom: 2rem;
}
.ko-comment img.avatar {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 1px solid var(--border-sub);
}
.ko-comment__body {
flex: 1;
background: var(--card-bg);
border: 1px solid var(--border-sub);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
}
.ko-comment__meta {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 0.65rem;
}
.ko-comment__author {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-white);
}
.ko-comment__date {
font-size: 0.75rem;
color: var(--text-muted);
}
.ko-comment__text {
font-size: 0.9rem;
color: var(--text-body);
margin-bottom: 0.75rem;
}
.ko-comment__reply {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--red-accent);
text-decoration: none;
}
.ko-comment__reply:hover {
text-decoration: underline;
} .ko-comment-form {
margin-top: 3rem;
}
.ko-comment-form h3 {
font-family: var(--font-display);
font-size: 1.6rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-white);
margin-bottom: 1.5rem;
}
.ko-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 600px) {
.ko-form-grid {
grid-template-columns: 1fr;
}
}
.ko-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-bottom: 1rem;
}
.ko-field label {
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
.ko-field input,
.ko-field textarea {
background: var(--card-bg);
border: 1px solid var(--border-sub);
border-radius: var(--radius);
color: var(--text-white);
font-family: var(--font-body);
font-size: 0.92rem;
padding: 0.75rem 1rem;
outline: none;
transition: border-color var(--transition);
width: 100%;
}
.ko-field input:focus,
.ko-field textarea:focus {
border-color: var(--red-accent);
}
.ko-field textarea {
min-height: 140px;
resize: vertical;
} .ko-lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.95);
z-index: 9999;
align-items: center;
justify-content: center;
}
.ko-lightbox.open {
display: flex;
}
.ko-lightbox img {
max-width: 90vw;
max-height: 88vh;
object-fit: contain;
border-radius: var(--radius);
}
.ko-lightbox__close {
position: absolute;
top: 1.25rem;
right: 1.5rem;
background: var(--red-accent);
border: none;
color: #fff;
font-size: 1.5rem;
line-height: 1;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
} .ko-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(to right, var(--red-deep), var(--red-accent));
z-index: 9998;
transition: width 0.1s linear;
} .ko-scroll-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 44px;
height: 44px;
background: var(--red-accent);
border: none;
border-radius: var(--radius);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(10px);
transition:
opacity var(--transition),
transform var(--transition);
z-index: 500;
}
.ko-scroll-top.visible {
opacity: 1;
transform: translateY(0);
}
.ko-scroll-top:hover {
background: var(--red-deep);
}
.ko-scroll-top svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
} @keyframes fadeUp {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ko-hero__content > * {
opacity: 0;
animation: fadeUp 0.7s ease forwards;
}
.ko-breadcrumb {
animation-delay: 0.1s;
}
.ko-cat-badge {
animation-delay: 0.2s;
}
.ko-hero__title {
animation-delay: 0.32s;
}
.ko-hero__excerpt {
animation-delay: 0.44s;
}
.ko-meta {
animation-delay: 0.55s;
} @media (max-width: 768px) {
.ko-author {
flex-direction: column;
align-items: center;
text-align: center;
}
.ko-share {
justify-content: center;
}
}
@media (max-width: 480px) {
.ko-share__btn span {
display: none;
}
} *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--red-deep: #8b0000;
--red-vivid: #cc0000;
--red-accent: #e02020;
--dark-bg: #fff;
--card-bg: #242424;
--border: #2e2e2e;
--white: #f5f0ee;
--muted: #999;
--body-txt: #000;
--max-w: 1700px;
--gap: clamp(1.25rem, 4vw, 3.5rem);
--radius: 4px;
--fd: "Bebas Neue";
--fs: Georgia, serif;
--fb: "Stage Grotesk", sans-serif;
--ease: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
html {
scroll-behavior: smooth;
}
body {
background: var(--dark-bg);
color: var(--body-txt);
font-family: var(--fb);
font-size: clamp(0.95rem, 1.5vw, 1.08rem);
line-height: 1.78;
-webkit-font-smoothing: antialiased;
} .inner {
width: 100%;
max-width: var(--max-w);
margin-inline: auto;
padding-inline: var(--gap);
}
.ko-btn {
display: inline-block;
background: var(--red-accent);
color: #fff;
font-family: var(--fb);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.75rem 1.6rem;
border-radius: var(--radius);
text-decoration: none;
transition:
background var(--ease),
transform var(--ease);
}
.ko-btn:hover {
background: #b01010;
transform: translateY(-2px);
color: #fff;
} #ko-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(to right, var(--red-deep), var(--red-accent));
z-index: 9998;
transition: width 0.1s linear;
} #ko-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 44px;
height: 44px;
background: var(--red-accent);
border: none;
border-radius: var(--radius);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(10px);
transition:
opacity var(--ease),
transform var(--ease);
z-index: 500;
}
#ko-top.on {
opacity: 1;
transform: translateY(0);
}
#ko-top:hover {
background: var(--red-deep);
}
#ko-top svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
} .ko-hero {
position: relative;
width: 100%;
min-height: clamp(340px, 55vh, 620px);
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--red-deep);
}
.ko-hero__bg {
position: absolute;
inset: 0;
background-image: var(--thumb, none);
background-size: cover;
background-position: center;
transform: scale(1.04);
transition: transform 8s ease;
}
.ko-hero:hover .ko-hero__bg {
transform: scale(1);
}
.ko-hero__ov {
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(10, 0, 0, 0.93) 0%,
rgba(10, 0, 0, 0.5) 45%,
transparent 100%
),
linear-gradient(to right, rgba(139, 0, 0, 0.4) 0%, transparent 60%);
}
.ko-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(to right, var(--red-vivid), var(--red-accent));
z-index: 2;
}
.ko-hero__c {
position: relative;
z-index: 2;
width: 100%;
padding-block: clamp(2rem, 5vw, 4.5rem);
}
.ko-bc {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 1.1rem;
}
.ko-bc a {
color: var(--muted);
text-decoration: none;
transition: color var(--ease);
}
.ko-bc a:hover {
color: var(--red-accent);
}
.ko-bc i {
color: var(--red-accent);
font-size: 0.6rem;
font-style: normal;
}
.ko-badge {
display: inline-block;
background: var(--red-accent);
color: #fff;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0.28rem 0.7rem;
border-radius: 2px;
margin-bottom: 0.9rem;
text-decoration: none;
transition: background var(--ease);
}
.ko-badge:hover {
background: var(--red-deep);
color: #fff;
}
.ko-hero__title {
font-family: var(--fd);
font-size: clamp(2.4rem, 6vw, 5.5rem);
line-height: 1;
letter-spacing: 0.02em;
color: var(--white);
max-width: 940px;
margin-bottom: 1.1rem;
text-transform: uppercase;
}
.ko-hero__ex {
font-size: clamp(0.95rem, 1.4vw, 1.1rem);
color: rgba(245, 240, 238, 0.72);
max-width: 600px;
line-height: 1.7;
margin-bottom: 1.4rem;
}
.ko-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.1rem;
font-size: 0.8rem;
color: var(--muted);
}
.ko-meta span {
display: flex;
align-items: center;
gap: 0.4rem;
}
.ko-meta svg {
width: 13px;
height: 13px;
fill: none;
stroke: var(--red-accent);
stroke-width: 2;
flex-shrink: 0;
}
.ko-meta em {
width: 1px;
height: 13px;
background: var(--border);
font-style: normal;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(26px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ko-hero__c > * {
opacity: 0;
animation: fadeUp 0.65s ease forwards;
}
.ko-bc {
animation-delay: 0.08s;
}
.ko-badge {
animation-delay: 0.2s;
}
.ko-hero__title {
animation-delay: 0.32s;
}
.ko-hero__ex {
animation-delay: 0.44s;
}
.ko-meta {
animation-delay: 0.54s;
} .ko-layout {
display: grid;
grid-template-columns: 1fr 340px;
gap: clamp(2rem, 4vw, 4.5rem);
padding-block: clamp(3rem, 6vw, 6rem);
align-items: start;
}
@media (max-width: 1100px) {
.ko-layout {
grid-template-columns: 1fr;
}
}
.ko-article {
min-width: 0;
}
.entry-content > p:first-of-type {
font-family: var(--fs);
font-size: clamp(1.1rem, 2vw, 1.35rem);
line-height: 1.65;
color: var(--white);
border-left: 3px solid var(--red-accent);
padding-left: 1.2rem;
margin-bottom: 2.25rem;
}
.entry-content h3 {
font-family: var(--fs);
font-size: clamp(1.15rem, 2vw, 1.6rem);
color: var(--white);
margin-top: 2rem;
margin-bottom: 0.65rem;
}
.entry-content a {
color: var(--red-accent);
text-decoration: underline;
text-decoration-color: transparent;
transition: text-decoration-color var(--ease);
}
.entry-content a:hover {
text-decoration-color: var(--red-accent);
}
.entry-content ul,
.entry-content ol {
padding-left: 1.5rem;
margin-bottom: 1.4rem;
}
.entry-content li {
margin-bottom: 0.45rem;
}
.entry-content ul li::marker {
color: var(--red-accent);
}
.entry-content blockquote {
position: relative;
background: var(--card-bg);
border-left: 4px solid var(--red-accent);
margin: 2.25rem 0;
padding: 1.6rem 1.75rem 1.6rem 2.25rem;
font-family: var(--fs);
font-size: clamp(1.05rem, 1.8vw, 1.25rem);
font-style: italic;
color: var(--white);
line-height: 1.6;
}
.entry-content blockquote::before {
content: "\201C";
position: absolute;
top: -0.3rem;
left: 0.7rem;
font-size: 4.5rem;
color: var(--red-accent);
opacity: 0.22;
line-height: 1;
font-family: Georgia, serif;
}
.entry-content img,
.entry-content figure img {
width: 100%;
height: auto;
border-radius: var(--radius);
margin-block: 1.75rem;
display: block;
}
.entry-content figcaption {
text-align: center;
font-size: 0.8rem;
color: var(--muted);
margin-top: -1.1rem;
margin-bottom: 1.75rem;
}
.entry-content code {
background: #111;
color: #f87171;
padding: 0.12em 0.42em;
border-radius: 3px;
font-size: 0.87em;
}
.entry-content pre {
background: #111;
padding: 1.4rem;
border-radius: var(--radius);
overflow-x: auto;
margin-bottom: 1.75rem;
}
.entry-content pre code {
background: none;
padding: 0;
}
.entry-content table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.75rem;
font-size: 0.9rem;
}
.entry-content th {
background: var(--red-deep);
color: var(--white);
padding: 0.7rem 1rem;
text-align: left;
font-size: 0.76rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.entry-content td {
padding: 0.65rem 1rem;
border-bottom: 1px solid var(--border);
color: var(--body-txt);
}
.entry-content tr:hover td {
background: rgba(255, 255, 255, 0.02);
}
.ko-pf-thumb {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
border-radius: var(--radius);
margin-bottom: 2.25rem;
display: block;
}
.ko-tags {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 2.75rem;
padding-top: 1.75rem;
border-top: 1px solid var(--border);
}
.ko-tags a {
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
font-size: 0.73rem;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 0.28rem 0.8rem;
border-radius: 2px;
text-decoration: none;
transition:
border-color var(--ease),
color var(--ease);
}
.ko-tags a:hover {
border-color: var(--red-accent);
color: var(--red-accent);
}
.ko-share {
display: flex;
align-items: center;
gap: 0.7rem;
margin-top: 1.75rem;
flex-wrap: wrap;
}
.ko-share__lbl {
font-size: 0.73rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.sh-btn {
display: inline-flex;
align-items: center;
gap: 0.38rem;
padding: 0.42rem 0.95rem;
border-radius: var(--radius);
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.05em;
text-decoration: none;
text-transform: uppercase;
transition:
opacity var(--ease),
transform var(--ease);
}
.sh-btn:hover {
opacity: 0.82;
transform: translateY(-1px);
}
.sh-btn svg {
width: 13px;
height: 13px;
fill: currentColor;
}
.sh-fb {
background: #1877f2;
color: #fff;
}
.sh-tw {
background: #000;
color: #fff;
}
.sh-li {
background: #0a66c2;
color: #fff;
}
.sh-wa {
background: #25d366;
color: #fff;
}
@media (max-width: 480px) {
.sh-btn span {
display: none;
}
}
.ko-author {
display: flex;
gap: 1.4rem;
align-items: flex-start;
background: var(--card-bg);
border: 1px solid var(--border);
border-left: 4px solid var(--red-accent);
padding: 1.6rem;
border-radius: var(--radius);
margin-top: 2.75rem;
}
.ko-author img {
width: 68px;
height: 68px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--red-accent);
}
.ko-author__name {
font-family: var(--fd);
font-size: 1.15rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--white);
margin-bottom: 0.3rem;
}
.ko-author__role {
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--red-accent);
margin-bottom: 0.55rem;
}
.ko-author__bio {
font-size: 0.88rem;
color: var(--muted);
}
@media (max-width: 640px) {
.ko-author {
flex-direction: column;
align-items: center;
text-align: center;
}
}
.ko-sidebar {
position: sticky;
top: 2rem;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
@media (max-width: 1100px) {
.ko-sidebar {
position: static;
}
}
.ko-wdg {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.ko-wdg__h {
background: #4a0303;
padding: 10px;
}
.ko-wdg__t {
font-family: var(--fd);
font-size: 0.95rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--white);
}
.ko-wdg__b {
padding: 1.2rem;
}
.ko-toc {
list-style: none;
padding: 0;
counter-reset: toc;
}
.ko-toc li {
counter-increment: toc;
border-bottom: 1px solid var(--border);
}
.ko-toc li:last-child {
border-bottom: none;
}
.ko-toc a {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.6rem 0;
text-decoration: none;
color: var(--muted);
font-size: 0.83rem;
transition: color var(--ease);
}
.ko-toc a::before {
content: counter(toc, decimal-leading-zero);
font-family: var(--fd);
font-size: 0.72rem;
color: var(--red-accent);
flex-shrink: 0;
}
.ko-toc a:hover {
color: var(--white);
}
.ko-rel {
display: flex;
gap: 0.8rem;
align-items: flex-start;
padding-bottom: 0.9rem;
margin-bottom: 0.9rem;
border-bottom: 1px solid var(--border);
text-decoration: none;
transition: transform var(--ease);
}
.ko-rel:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.ko-rel:hover {
transform: translateX(4px);
}
.ko-rel img {
width: 70px;
height: 54px;
object-fit: cover;
border-radius: 3px;
flex-shrink: 0;
}
.ko-rel__no-img {
width: 70px;
height: 54px;
background: var(--border);
border-radius: 3px;
flex-shrink: 0;
}
.ko-rel__ttl {
font-size: 0.81rem;
color: var(--white);
line-height: 1.4;
}
.ko-rel__dt {
font-size: 0.7rem;
color: var(--muted);
margin-top: 0.28rem;
}
.ko-cta-box {
background: #2d2d2d;
border: 1px solid rgba(204, 0, 0, 0.3);
border-radius: var(--radius);
padding: 1.9rem 1.4rem;
text-align: center;
}
.ko-cta-box h3 {
font-family: var(--fd);
font-size: 1.55rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--white);
margin-bottom: 0.65rem;
}
.ko-cta-box p {
font-size: 0.83rem;
color: rgba(245, 240, 238, 0.7);
margin-bottom: 1.2rem;
line-height: 1.6;
} .ko-nav {
width: 100%;
background: var(--card-bg);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.ko-nav__in {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: var(--max-w);
margin-inline: auto;
}
@media (max-width: 600px) {
.ko-nav__in {
grid-template-columns: 1fr;
}
}
.ko-nav__a {
display: flex;
flex-direction: column;
padding: clamp(1.2rem, 3vw, 2rem) var(--gap);
text-decoration: none;
transition: background var(--ease);
border-right: 1px solid var(--border);
}
.ko-nav__a:last-child {
border-right: none;
}
.ko-nav__a:hover {
background: rgba(255, 255, 255, 0.02);
}
.ko-nav__lbl {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--red-accent);
margin-bottom: 0.38rem;
}
.ko-nav__lbl svg {
width: 11px;
height: 11px;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
}
.ko-nav__ttl {
font-family: var(--fs);
font-size: clamp(0.9rem, 1.5vw, 1.15rem);
color: var(--white);
line-height: 1.35;
}
.ko-nav__next {
text-align: right;
}
.ko-nav__next .ko-nav__lbl {
justify-content: flex-end;
} .ko-comments {
width: 100%;
padding-block: clamp(3rem, 5vw, 5rem);
}
.ko-comments .inner > * + * {
margin-top: 2rem;
}
.newsletter-form {
display: flex;
align-items: stretch;
width: 100%;
}
.newsletter-email {
flex: 1;
display: flex;
}
.newsletter-submit {
display: flex;
}
.newsletter-email input {
width: 100%;
height: 56px;
border: 0;
margin: 0;
padding: 0 20px;
background: #222;
color: #fff;
box-sizing: border-box;
}
.newsletter-submit input[type="submit"] {
position: relative;
left: 100%;
bottom: 56px;
height: 56px;
border: 0;
margin: 0;
padding: 0 30px;
background: #ff1a1a;
color: #fff;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
} .newsletter-form .wpcf7-form-control-wrap {
width: 100%;
display: flex;
}
.newsletter-form p {
margin: 0;
}
@media (max-width: 767px) {
.newsletter-form {
flex-direction: column;
}
.newsletter-form input[type="submit"] {
width: 100%;
margin-top: 10px;
}
}
.sectionheader.scrolled {
background-color: #000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.men-mob-diag {
background-color: #ff1a1a;
margin-top: 30px;
}
.men-mob-diag:hover{
background-color: #000;
}
.men-mob-diag a {
color: #fff !important;
font-weight: 700 !important;
}
.men-mob-diag a:hover {
color: #ff1a1a !important;
} #Facebook_Messenger-0-channel {
display: none;
}
.menuprincipal a.dropdown-item {
font-size: 15px !important;
}
.clientlogo .swiper-slide {
display: flex !important;
justify-content: center;
align-items:center;
}
div#ht-ctc-chat{
bottom:90px!important;
}