/* ==========================================
GOOGLE FONT
============================================
Paste these inside of index.html:
========================================== */
/* ==========================================
CSS RESET
========================================== */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
menu,
nav,
output,
picture,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
picture,
section {
display: block;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 10px;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
font-family: "DM Sans", sans-serif;
font-size: 1.6rem;
font-weight: 400;
line-height: 2.4rem;
color: #ffffff;
background-color: var(--primary-color);
margin: 0 auto;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: "";
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button {
border: 0;
background: transparent;
cursor: pointer;
font-family: inherit;
}
input,
textarea,
select {
font-family: inherit;
outline: none;
}
textarea {
resize: none;
}
/* ==========================================
ROOT VARIABLES
========================================== */
:root {
--primary-color: #14151b;
--white: #ffffff;
--accent-color: #E3001D;
--container-width: 1340px;
}
/* ==========================================
CONTAINER
========================================== */
.container {
width: 100%;
max-width: 1340px;
margin: 0 auto;
padding: 0 20px;
}
/* 1480px content area (+ 20px padding each side = 1520px total) */
.container-lg {
width: 100%;
max-width: 1520px;
margin: 0 auto;
padding: 0 20px;
}
/* 1488px content area (+ 20px padding each side = 1528px total) */
.container-xl {
width: 100%;
max-width: 1512px;
margin: 0 auto;
padding: 0 20px;
}
/* ==========================================
TYPOGRAPHY
========================================== */
h1 {
font-weight: 600;
font-size: 40px;
line-height: 80px;
}
h2 {
font-weight: 600;
font-size: 24px;
line-height: 56px;
}
h3 {
font-weight: 600;
font-size: 20px;
line-height: 35px;
}
h4 {
font-weight: 500;
font-size: 20px;
line-height: 28px;
}
p {
font-weight: 500;
font-size: 16px;
line-height: 24px;
}
/* =========================
BUTTONS
========================= */
/* =========================
UTILITIES
========================= */
/* ==========================================
DISPLAY UTILITIES
========================================== */
.container-ptr {
padding: 0 40px;
}
/* ==========================================
576PX
========================================== */
@media (min-width: 576px) {
h1 {
font-size: 48px;
line-height: 52px;
}
h2 {
font-size: 34px;
line-height: 40px;
}
h3 {
font-size: 26px;
line-height: 32px;
}
}
/* ==========================================
768PX
========================================== */
@media (min-width: 768px) {
h1 {
font-size: 60px;
line-height: 64px;
}
h2 {
font-size: 40px;
line-height: 46px;
}
h3 {
font-size: 28px;
line-height: 34px;
}
.container-ptr {
padding: 0 60px;
}
}
/* ==========================================
992PX
========================================== */
@media (min-width: 992px) {
h1 {
font-size: 68px;
line-height: 72px;
}
h2 {
font-size: 44px;
line-height: 50px;
}
h3 {
font-size: 30px;
line-height: 36px;
}
}
/* ==========================================
1024PX
========================================== */
@media (min-width: 1024px) {
h1 {
font-size: 72px;
line-height: 76px;
}
h2 {
font-size: 48px;
line-height: 54px;
}
h3 {
font-size: 32px;
line-height: 35px;
}
}
/* ==========================================
1200PX
========================================== */
@media (min-width: 1200px) {
h1 {
font-size: 80px;
line-height: 84px;
}
}
/* ==========================================
1280PX
========================================== */
@media (min-width: 1280px) {}
/* ==========================================
1366PX
========================================== */
@media (min-width: 1366px) {}
/* ==========================================
1440PX
========================================== */
@media (min-width: 1440px) {}
/* ==========================================
1600PX
========================================== */
@media (min-width: 1600px) {}
/* body{
background: url("../images/AI-Innovation@2x.png") top center/ cover no-repeat;
opacity: 0.7;
background-size: 100% 100%;
} */
/* ==========================================
LENIS SMOOTH SCROLL STYLES
========================================== */
html.lenis,
html.lenis body {
height: auto;
scroll-behavior: auto !important;
}
.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis-stopped {
overflow: hidden;
}
.lenis-scrolling iframe {
pointer-events: none;
}
/* ==========================================
ANIMATED TEXT — concom.tv style
========================================== */
/* Hide raw text until JS splits it into .word spans */
.animated-text, h2.animated-text, h3.animated-text {
visibility: hidden !important;
}
/* Once JS adds .init class, reveal the container */
.animated-text.init, h2.animated-text.init, h3.animated-text.init {
visibility: visible !important;
}
/* Each word starts invisible, blurred, shifted down */
.animated-text .word, h2.animated-text .word, h3.animated-text .word {
display: inline-block;
opacity: 0;
filter: blur(12px);
transform: translateY(10px);
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
filter 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
/* When .visible is added by JS, animate to final state */
.animated-text .word.visible, h2.animated-text .word.visible, h3.animated-text .word.visible {
opacity: 1 !important;
filter: blur(0) !important;
transform: translateY(0) !important;
}