html,
body {
margin: 0 !important;
padding: 0 !important;
background: rgb(0, 0, 0);
overflow-x: hidden !important;
font-family: 'Montserrat', sans-serif;
scroll-behavior: smooth;
}
/* SECTION TITLES */
.dc-section {
--about-white: #f2f2f2;
--about-silver: #c0c0c0;
--about-muted: #929292;
--about-dim: #666666;
--about-line: rgba(192, 192, 192, 0.18);
--about-glow: rgba(192, 192, 192, 0.2);
position: relative;
isolation: isolate;
width: 100%;
overflow: hidden;
color: var(--about-white);
}
/* Subtle background atmosphere */
.dc-section::before {
content: "";
position: absolute;
top: 20%;
left: -180px;
width: 380px;
height: 380px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(180, 180, 180, 0.055) 0%,
rgba(180, 180, 180, 0.018) 40%,
transparent 72%);
pointer-events: none;
z-index: -1;
}
.dc-section::after {
content: "";
position: absolute;
right: -220px;
bottom: 5%;
width: 450px;
height: 450px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(150, 150, 150, 0.045) 0%,
transparent 70%);
pointer-events: none;
z-index: -1;
}
.dc-section__header {
position: relative;
z-index: 1;
padding: 4rem 1.5rem 2rem !important;
text-align: center;
}
.dc-section .neon-container {
width: 100%;
}
.dc-section .neon-text {
width: 100%;
margin: 0;
color: var(--about-silver);
font-family: "Orbitron", sans-serif;
font-size: clamp(3.5rem, 4vw, 4.6rem);
font-weight: 300;
letter-spacing: 0.13em;
line-height: 1.35;
text-align: center;
text-shadow:
0 0 2px #e5e5e5,
0 0 7px rgba(192, 192, 192, 0.8),
0 0 17px rgba(192, 192, 192, 0.48),
0 0 35px rgba(150, 150, 150, 0.25);
animation: dcAboutGlow 2.4s ease-in-out infinite alternate;
}
@keyframes dcTitleGlow {
from {
text-shadow:
0 0 2px #dedede,
0 0 7px rgba(192, 192, 192, 0.7),
0 0 16px rgba(192, 192, 192, 0.38),
0 0 28px rgba(150, 150, 150, 0.18);
}
to {
text-shadow:
0 0 3px #ffffff,
0 0 10px rgba(220, 220, 220, 0.85),
0 0 23px rgba(192, 192, 192, 0.55),
0 0 42px rgba(150, 150, 150, 0.3);
}
}
.dc-title__eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 14px 0 0;
color: var(--about-muted);
font-family: "Inconsolata", monospace;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.dc-title__eyebrow::before,
.dc-title__eyebrow::after {
content: "";
width: 26px;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(192, 192, 192, 0.65));
}
.dc-title__eyebrow::after {
transform: rotate(180deg);
}
/* NAVBAR */
.menu-toggle {
display: none;
flex-direction: column;
cursor: pointer;
gap: 5px;
}
.menu-toggle span {
width: 25px;
height: 3px;
background: silver;
border-radius: 2px;
}
/* Navbar base (already yours) */
.navbar-custom {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 12px 0;
z-index: 1000;
font-family: 'Montserrat', sans-serif;
transition: all 0.3s ease;
isolation: isolate;
}
/* Activated after scrolling */
.navbar-custom.scrolled {
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background: rgba(10, 10, 20, 0.6);
/* darker + more saturation helps visibility */
box-shadow: 0 8px 35px rgba(0, 0, 0, 0.5);
}
/* Navbar Inner Container */
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
/* Brand/Logo Styling */
.nav-brand .hover-underline {
font-size: 1rem;
/* Smaller brand */
font-weight: 600;
color: #ffffff;
text-decoration: none;
}
/* Navigation Menu */
.nav-menu {
display: flex;
gap: 30px;
/* Slightly tighter spacing */
}
/* Menu Items */
.hover-underline {
color: #ffffff;
position: relative;
display: inline-block;
text-decoration: none;
font-size: 0.65rem;
/* Smaller menu text */
font-weight: 500;
padding: 6px 0;
transition: all 0.3s ease;
}
/* Hover Underline Effect */
.hover-underline::after,
.hover-underline::before {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(to right, silver, silver);
left: 0;
transform: scaleX(0);
transition: transform 0.2s ease-out;
}
.hover-underline::after {
bottom: -5px;
transform-origin: right;
}
.hover-underline::before {
top: -5px;
transform-origin: left;
}
.hover-underline:hover {
color: silver;
}
.hover-underline:hover::after,
.hover-underline:hover::before {
transform: scaleX(1);
}
/* Base navbar state (transparent) */
.navbar,
nav {
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
transition: background 0.4s ease, backdrop-filter 0.4s ease;
}
/* Active scrolled state applied by JavaScript */
.navbar.scrolled,
nav.scrolled {
background: rgba(10, 10, 10, 0.4) !important;
/* Premium semi-transparent dark */
backdrop-filter: blur(12px) !important;
/* Clean glassmorphism text-shield */
-webkit-backdrop-filter: blur(12px) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
/* Optional subtle edge divider */
}
/* ================= MOBILE NAVBAR ================= */
@media (max-width: 768px) {
/* Main navbar */
.nav-container {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 18px;
}
/* Brand */
.nav-brand .hover-underline {
font-size: 0.95rem;
letter-spacing: 0.08rem;
}
/* Hamburger */
.menu-toggle {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
width: 42px;
height: 42px;
border: 1px solid rgba(192, 192, 192, 0.35);
border-radius: 50px;
background: rgba(255, 255, 255, 0.025);
transition:
border-color 0.3s ease,
background 0.3s ease,
box-shadow 0.3s ease;
}
.menu-toggle:hover {
border-color: rgba(192, 192, 192, 0.7);
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 0 15px rgba(192, 192, 192, 0.15);
}
.menu-toggle span {
width: 18px;
height: 1px;
background: silver;
border-radius: 1px;
}
/* Dropdown menu */
.nav-menu {
position: absolute;
top: calc(100% + 12px);
left: 18px;
right: 18px;
width: auto;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 8px;
background: rgba(5, 5, 5, 0.94);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border: 1px solid rgba(192, 192, 192, 0.22);
border-radius: 14px;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.55),
0 0 25px rgba(192, 192, 192, 0.05);
transform: translateY(-12px);
opacity: 0;
visibility: hidden;
transition:
transform 0.35s ease,
opacity 0.3s ease,
visibility 0.3s ease;
}
.nav-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
/* Individual navigation items */
.nav-menu>div {
width: 100%;
}
.nav-menu .about-center {
justify-content: center;
}
.nav-menu .nav-link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box;
padding: 13px 10px;
font-size: 0.67rem;
letter-spacing: 0.18rem;
border-radius: 8px;
transition:
background 0.3s ease,
color 0.3s ease;
}
/* Subtle separation */
.nav-menu>div:not(.neon-container)+div:not(.neon-container) {
border-top: 1px solid rgba(192, 192, 192, 0.07);
}
/* Active / hover */
.nav-menu .nav-link:hover,
.nav-menu .nav-link.active {
color: silver;
background: rgba(192, 192, 192, 0.06);
}
/* Contact */
.nav-menu .neon-container {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(192, 192, 192, 0.16);
}
.nav-menu .neon-container .nav-link {
padding: 14px 10px;
background: rgba(192, 192, 192, 0.025);
border-radius: 8px;
}
}
/* Tablet Responsive (769px – 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
.animation-overlay main {
font-size: clamp(3rem, 6vw, 4.5rem);
white-space: normal;
transform: translateY(-2%);
}
.static-container {
font-size: 18px;
margin-left: 0;
height: auto;
justify-content: center;
text-align: center;
}
.typewriter-text {
min-width: auto;
max-width: 80vw;
text-align: center;
}
.about-center p {
margin-left: 0 !important;
text-align: center;
max-width: 80%;
margin-right: auto;
margin-left: auto;
}
.hero-buttons {
margin-top: 40px;
}
.btn {
padding: 0.7rem 2rem;
font-size: 1rem;
}
.scroll-text {
font-size: 0.85rem;
}
}
.nav-link.active {
color: silver;
}
.nav-link.active::after,
.nav-link.active::before {
transform: scaleX(1);
}
/* ==========================================================
DASIS CODES — CINEMATIC MONOCHROME HERO
Scoped to #home. Navbar and global buttons are untouched.
========================================================== */
#home.dc-hero {
--dc-white: #f5f5f5;
--dc-silver: #c6c6c6;
--dc-grey: #858585;
--dc-dim: #555555;
--dc-black: #050505;
position: relative;
isolation: isolate;
width: 100%;
min-height: 100vh;
min-height: 100svh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 115px 24px 105px;
background: var(--dc-black);
color: var(--dc-white);
font-family: 'Montserrat', sans-serif;
}
/* Keep all hero elements above the background */
#home.dc-hero>* {
box-sizing: border-box;
}
/* ---------------- BACKGROUND VIDEO ---------------- */
#home .dc-hero__background {
position: absolute;
inset: 0;
z-index: -5;
overflow: hidden;
background: #050505;
}
#home .dc-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
opacity: 0.76;
filter: grayscale(1) contrast(1.12) brightness(0.78);
transform: scale(1.025);
animation: dcVideoReveal 1.8s ease-out both;
}
#home .dc-hero__shade {
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0.13) 24%,
rgba(0, 0, 0, 0.22) 60%,
rgba(0, 0, 0, 0.82) 100%);
}
#home .dc-hero__vignette {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 44%,
rgba(0, 0, 0, 0.05) 0%,
rgba(0, 0, 0, 0.2) 37%,
rgba(0, 0, 0, 0.7) 100%);
}
/* ---------------- ATMOSPHERE & GRID ---------------- */
#home .dc-hero__grid {
position: absolute;
inset: 0;
z-index: -3;
pointer-events: none;
opacity: 0.17;
background-image:
linear-gradient(rgba(220, 220, 220, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(220, 220, 220, 0.1) 1px, transparent 1px);
background-size: 78px 78px;
mask-image: linear-gradient(to bottom,
transparent 2%,
black 28%,
black 75%,
transparent 100%);
-webkit-mask-image: linear-gradient(to bottom,
transparent 2%,
black 28%,
black 75%,
transparent 100%);
}
#home .dc-hero__grain {
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
opacity: 0.15;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http\://www\.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
#home .dc-hero__orbit {
position: absolute;
z-index: -1;
left: 50%;
top: 44%;
pointer-events: none;
border-radius: 50%;
transform: translate(-50%, -50%);
}
#home .dc-hero__orbit--outer {
width: min(72vw, 890px);
aspect-ratio: 1;
border: 1px solid rgba(230, 230, 230, 0.12);
box-shadow:
0 0 65px rgba(255, 255, 255, 0.025),
inset 0 0 65px rgba(255, 255, 255, 0.018);
animation: dcOrbitIn 1.8s ease-out both;
}
#home .dc-hero__orbit--inner {
width: min(59vw, 710px);
aspect-ratio: 1;
border: 1px solid rgba(230, 230, 230, 0.07);
box-shadow: 0 0 100px rgba(255, 255, 255, 0.025);
}
#home .dc-hero__light {
position: absolute;
z-index: -1;
width: 300px;
height: 300px;
pointer-events: none;
border-radius: 50%;
filter: blur(90px);
opacity: 0.11;
background: #e8e8e8;
animation: dcLightPulse 8s ease-in-out infinite alternate;
}
#home .dc-hero__light--left {
left: -180px;
top: 30%;
}
#home .dc-hero__light--right {
right: -190px;
bottom: 10%;
animation-delay: -4s;
}
/* ---------------- SIDE INFORMATION ---------------- */
#home .dc-hero__side {
position: absolute;
top: 29%;
z-index: 2;
width: 220px;
color: var(--dc-grey);
font-family: 'Inconsolata', monospace;
font-size: 10px;
letter-spacing: 2px;
line-height: 2.2;
opacity: 0;
animation: dcFadeIn 1s 0.8s ease forwards;
}
#home .dc-hero__side--left {
left: clamp(24px, 5vw, 80px);
padding-left: 16px;
border-left: 1px solid rgba(220, 220, 220, 0.4);
}
#home .dc-hero__side--right {
right: clamp(24px, 5vw, 80px);
text-align: right;
padding-right: 16px;
border-right: 1px solid rgba(220, 220, 220, 0.4);
}
#home .dc-hero__side-label {
display: block;
margin-bottom: 18px;
color: var(--dc-white);
font-size: 9px;
letter-spacing: 2.6px;
}
#home .dc-hero__side p {
margin: 0;
color: #b5b5b5;
font-size: 10px;
line-height: 2.25;
}
#home .dc-hero__principles {
display: flex;
flex-direction: column;
gap: 7px;
}
#home .dc-hero__principles span {
white-space: nowrap;
color: #b5b5b5;
}
#home .dc-hero__principles i {
margin-right: 8px;
color: #707070;
font-style: normal;
}
#home .dc-hero__side-line {
display: block;
width: 34px;
height: 1px;
margin-top: 24px;
margin-bottom: 12px;
background: #a0a0a0;
}
#home .dc-hero__side--right .dc-hero__side-line {
margin-left: auto;
}
#home .dc-hero__side-index {
color: #777;
font-size: 8px;
letter-spacing: 2px;
}
/* ---------------- MAIN COMPOSITION ---------------- */
#home .dc-hero__content {
position: relative;
z-index: 3;
width: min(100%, 850px);
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
#home .dc-hero__eyebrow {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 11px;
margin-bottom: 36px;
color: #c1c1c1;
font-family: 'Inconsolata', monospace;
font-size: 10px;
letter-spacing: 2px;
opacity: 0;
animation: dcRiseIn 0.8s 0.25s ease forwards;
}
#home .dc-hero__status-dot {
width: 6px;
height: 6px;
flex: 0 0 6px;
border-radius: 50%;
background: #dedede;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
animation: dcDotPulse 2.5s ease-in-out infinite;
}
#home .dc-hero__eyebrow-divider {
height: 13px;
width: 1px;
background: rgba(255, 255, 255, 0.35);
}
/* ---------------- BRAND TYPOGRAPHY ---------------- */
#home .dc-hero__identity {
width: 100%;
position: relative;
}
#home .dc-hero__identity-overline {
display: block;
margin-bottom: 13px;
color: #a8a8a8;
font-family: 'Inconsolata', monospace;
font-size: 10px;
letter-spacing: 5px;
opacity: 0;
animation: dcFadeIn 0.9s 0.45s ease forwards;
}
#home .dc-hero__title {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
font-family: 'Inconsolata', monospace;
font-weight: 400;
line-height: 0.83;
text-shadow:
0 0 1px rgba(255, 255, 255, 0.8),
0 0 25px rgba(255, 255, 255, 0.1);
}
#home .dc-hero__title-main {
display: block;
color: #f8f8f8;
font-size: clamp(3.5rem, 13vw, 7.5rem);
font-weight: 900;
letter-spacing: 0.025em;
transform: scaleX(0.92);
opacity: 0;
animation: dcTitleReveal 1.15s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
#home .dc-hero__title-sub {
display: block;
margin-top: 12px;
color: transparent;
font-size: clamp(2.5rem, 9vw, 6.2rem);
font-weight: 300;
letter-spacing: 0.17em;
padding-left: 0.17em;
-webkit-text-stroke: 1px rgba(240, 240, 240, 0.8);
text-shadow: none;
opacity: 0;
animation: dcSubtitleReveal 1.2s 0.55s ease forwards;
}
#home .dc-hero__period {
color: #f5f5f5;
-webkit-text-stroke: 0;
text-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
}
#home .dc-hero__title-rule {
width: min(250px, 55%);
display: flex;
align-items: center;
gap: 12px;
margin: 31px auto 27px;
opacity: 0;
animation: dcFadeIn 1s 1s ease forwards;
}
#home .dc-hero__title-rule>span:first-child,
#home .dc-hero__title-rule>span:last-child {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, #8e8e8e);
}
#home .dc-hero__title-rule>span:last-child {
background: linear-gradient(90deg, #8e8e8e, transparent);
}
#home .dc-hero__title-rule-diamond {
width: 5px;
height: 5px;
border: 1px solid #ddd;
transform: rotate(45deg);
}
/* ---------------- SPECIALTIES ROTATOR ---------------- */
#home .dc-hero__specialties {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
max-width: 100%;
margin: 0 0 29px;
opacity: 0;
animation: dcRiseIn 0.8s 0.85s ease forwards;
}
#home .dc-hero__specialty-label {
color: #898989;
font-family: 'Inconsolata', monospace;
font-size: 9px;
letter-spacing: 2px;
white-space: nowrap;
}
#home .dc-hero__specialty-window {
height: 24px;
overflow: hidden;
border-left: 1px solid rgba(255, 255, 255, 0.25);
padding-left: 15px;
text-align: left;
}
#home .dc-hero__specialty-track {
display: flex;
flex-direction: column;
animation: dcSpecialtyRotate 12s infinite;
}
#home .dc-hero__specialty-track span {
height: 24px;
line-height: 24px;
color: #f0f0f0;
font-family: 'Inconsolata', monospace;
font-size: 13px;
letter-spacing: 3px;
white-space: nowrap;
}
/* ---------------- INTRODUCTION ---------------- */
#home .dc-hero__description {
width: min(100%, 600px);
opacity: 0;
animation: dcRiseIn 0.9s 1.05s ease forwards;
}
#home .dc-hero__description p {
margin: 0;
}
#home .dc-hero__lead {
margin-bottom: 13px !important;
color: #ededed;
font-size: clamp(14px, 1.5vw, 17px);
font-weight: 500;
letter-spacing: 0.5px;
line-height: 1.7;
}
#home .dc-hero__lead span {
color: #fff;
font-weight: 700;
}
#home .dc-hero__body {
color: #c1c1c1;
font-size: 13px;
font-weight: 400;
line-height: 1.95;
letter-spacing: 0.25px;
}
#home .dc-hero__closing {
margin-top: 13px !important;
color: #eee;
font-family: 'Inconsolata', monospace;
font-size: 12px;
letter-spacing: 1.5px;
}
/* ---------------- EXISTING BUTTONS ---------------- */
#home .dc-hero__actions {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 17px;
margin-top: 31px;
opacity: 0;
animation: dcRiseIn 0.8s 1.25s ease forwards;
}
#home .dc-hero__action-link {
display: inline-flex;
text-decoration: none;
}
/* Preserve your existing .btn and .poppins styling.
Only scope layout and focus behavior to the hero. */
#home .dc-hero__actions .btn {
margin: 0;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
filter 0.25s ease;
}
#home .dc-hero__actions .btn:hover {
transform: translateY(-3px);
filter: brightness(1.12);
box-shadow: 0 8px 30px rgba(255, 255, 255, 0.09);
}
#home .dc-hero__actions .btn:focus-visible {
outline: 2px solid #fff;
outline-offset: 5px;
}
/* ---------------- FOOTER SIGNATURE ---------------- */
#home .dc-hero__signature {
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
margin-top: 34px;
color: #8c8c8c;
font-family: 'Inconsolata', monospace;
font-size: 9px;
letter-spacing: 3px;
opacity: 0;
animation: dcFadeIn 1s 1.5s ease forwards;
}
#home .dc-hero__signature-symbol {
color: #e2e2e2;
}
/* ---------------- CODE MOTIF ---------------- */
#home .dc-hero__code {
position: absolute;
z-index: 2;
right: clamp(24px, 5vw, 80px);
bottom: 17%;
display: flex;
flex-direction: column;
gap: 7px;
color: #dedede;
font-family: 'Inconsolata', monospace;
font-size: 11px;
letter-spacing: 1px;
line-height: 1.4;
opacity: 0;
animation: dcFadeIn 1s 1.4s ease forwards;
}
#home .dc-hero__code span:nth-child(2) {
padding-left: 12px;
}
#home .dc-hero__code span:nth-child(3) {
padding-left: 24px;
}
#home .dc-hero__code span:nth-child(4) {
padding-left: 36px;
}
#home .dc-hero__code-muted {
color: #777;
}
#home .dc-hero__code-cursor {
color: #fff;
animation: dcCursorBlink 1s steps(2, start) infinite;
}
/* ---------------- SCROLL CUE ---------------- */
#home .dc-hero__scroll {
position: absolute;
z-index: 5;
left: 50%;
bottom: 23px;
display: flex;
flex-direction: column;
align-items: center;
gap: 11px;
color: #b7b7b7;
text-decoration: none;
transform: translateX(-50%);
opacity: 0;
animation: dcFadeIn 1s 1.6s ease forwards;
}
#home .dc-hero__scroll-text {
font-family: 'Inconsolata', monospace;
font-size: 9px;
letter-spacing: 3px;
white-space: nowrap;
}
#home .dc-hero__scroll-line {
position: relative;
width: 1px;
height: 36px;
overflow: hidden;
background: rgba(255, 255, 255, 0.22);
}
#home .dc-hero__scroll-line span {
position: absolute;
top: -100%;
left: 0;
width: 1px;
height: 100%;
background: #fff;
animation: dcScrollLine 2s ease-in-out infinite;
}
/* ---------------- CORNER DETAILS ---------------- */
#home .dc-hero__corner {
position: absolute;
z-index: 2;
width: 18px;
height: 18px;
opacity: 0.55;
pointer-events: none;
}
#home .dc-hero__corner--tl {
top: 95px;
left: 24px;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
}
#home .dc-hero__corner--tr {
top: 95px;
right: 24px;
border-top: 1px solid #aaa;
border-right: 1px solid #aaa;
}
#home .dc-hero__corner--bl {
bottom: 24px;
left: 24px;
border-bottom: 1px solid #aaa;
border-left: 1px solid #aaa;
}
#home .dc-hero__corner--br {
right: 24px;
bottom: 24px;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}
/* ==========================================================
ANIMATIONS
========================================================== */
@keyframes dcVideoReveal {
from {
opacity: 0;
transform: scale(1.07);
}
to {
opacity: 0.76;
transform: scale(1.025);
}
}
@keyframes dcOrbitIn {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.92);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes dcLightPulse {
from {
opacity: 0.06;
transform: scale(0.9);
}
to {
opacity: 0.15;
transform: scale(1.12);
}
}
@keyframes dcFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes dcRiseIn {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes dcTitleReveal {
from {
opacity: 0;
transform: translateY(25px) scaleX(0.88);
filter: blur(8px);
}
to {
opacity: 1;
transform: translateY(0) scaleX(0.92);
filter: blur(0);
}
}
@keyframes dcSubtitleReveal {
from {
opacity: 0;
transform: translateY(18px);
filter: blur(5px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
@keyframes dcDotPulse {
0%,
100% {
opacity: 0.65;
box-shadow: 0 0 5px rgba(255, 255, 255, .3);
}
50% {
opacity: 1;
box-shadow: 0 0 13px rgba(255, 255, 255, .8);
}
}
@keyframes dcSpecialtyRotate {
0%,
24% {
transform: translateY(0);
}
29%,
49% {
transform: translateY(-24px);
}
54%,
74% {
transform: translateY(-48px);
}
79%,
99% {
transform: translateY(-72px);
}
100% {
transform: translateY(-72px);
}
}
@keyframes dcCursorBlink {
to {
visibility: hidden;
}
}
@keyframes dcScrollLine {
0% {
top: -100%;
}
55% {
top: 0;
}
100% {
top: 100%;
}
}
/* ==========================================================
TABLETS
========================================================== */
@media (max-width: 1100px) {
#home .dc-hero__side {
top: 20%;
width: 175px;
}
#home .dc-hero__side p {
font-size: 9px;
}
#home .dc-hero__side--left {
left: 22px;
}
#home .dc-hero__side--right {
right: 22px;
}
#home .dc-hero__code {
display: none;
}
#home .dc-hero__orbit--outer {
width: 85vw;
}
#home .dc-hero__orbit--inner {
width: 70vw;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 768px) {
#home.dc-hero {
min-height: 100svh;
padding: 105px 20px 100px;
}
#home .dc-hero__video {
object-position: center;
opacity: 0.55;
}
#home .dc-hero__shade {
background:
linear-gradient(180deg,
rgba(0, 0, 0, .72) 0%,
rgba(0, 0, 0, .3) 35%,
rgba(0, 0, 0, .48) 70%,
rgba(0, 0, 0, .9) 100%);
}
#home .dc-hero__grid {
background-size: 42px 42px;
opacity: 0.1;
}
#home .dc-hero__orbit--outer {
width: 112vw;
top: 37%;
opacity: 0.7;
}
#home .dc-hero__orbit--inner {
width: 88vw;
top: 37%;
opacity: 0.65;
}
#home .dc-hero__light {
width: 180px;
height: 180px;
filter: blur(70px);
}
#home .dc-hero__side {
display: none;
}
#home .dc-hero__corner--tl,
#home .dc-hero__corner--tr {
top: 78px;
}
#home .dc-hero__corner--bl,
#home .dc-hero__corner--br {
bottom: 15px;
}
#home .dc-hero__corner--tl,
#home .dc-hero__corner--bl {
left: 12px;
}
#home .dc-hero__corner--tr,
#home .dc-hero__corner--br {
right: 12px;
}
#home .dc-hero__content {
width: 100%;
}
#home .dc-hero__eyebrow {
gap: 8px;
margin-bottom: 32px;
font-size: 8px;
letter-spacing: 1.3px;
}
#home .dc-hero__identity-overline {
margin-bottom: 17px;
font-size: 8px;
letter-spacing: 3px;
}
#home .dc-hero__title-main {
font-size: clamp(4.4rem, 18vw, 7rem);
}
#home .dc-hero__title-sub {
margin-top: 13px;
font-size: clamp(3rem, 12.5vw, 5rem);
letter-spacing: 0.11em;
padding-left: 0.11em;
-webkit-text-stroke-width: 0.8px;
}
#home .dc-hero__title-rule {
margin-top: 27px;
margin-bottom: 23px;
}
#home .dc-hero__specialties {
flex-direction: column;
gap: 7px;
margin-bottom: 25px;
}
#home .dc-hero__specialty-label {
font-size: 8px;
letter-spacing: 2.5px;
}
#home .dc-hero__specialty-window {
height: 24px;
padding-left: 0;
border-left: 0;
text-align: center;
}
#home .dc-hero__specialty-track span {
font-size: 12px;
letter-spacing: 2.5px;
}
#home .dc-hero__description {
max-width: 480px;
}
#home .dc-hero__lead {
font-size: 14px;
line-height: 1.8;
}
#home .dc-hero__body {
font-size: 12px;
line-height: 1.9;
}
#home .dc-hero__closing {
font-size: 11px;
letter-spacing: 0.7px;
}
#home .dc-hero__actions {
gap: 12px;
margin-top: 25px;
}
#home .dc-hero__signature {
gap: 9px;
margin-top: 28px;
font-size: 8px;
letter-spacing: 2px;
}
#home .dc-hero__scroll {
bottom: 13px;
gap: 7px;
}
#home .dc-hero__scroll-text {
font-size: 8px;
letter-spacing: 2px;
}
#home .dc-hero__scroll-line {
height: 23px;
}
}
/* ==========================================================
SMALL PHONES
========================================================== */
@media (max-width: 380px) {
#home.dc-hero {
padding: 100px 14px 90px;
}
#home .dc-hero__eyebrow {
font-size: 7px;
letter-spacing: 0.8px;
gap: 6px;
}
#home .dc-hero__title-main {
font-size: 19vw;
}
#home .dc-hero__title-sub {
font-size: 12.5vw;
}
#home .dc-hero__body {
font-size: 11px;
}
#home .dc-hero__signature {
gap: 7px;
font-size: 7px;
letter-spacing: 1.5px;
}
}
/* Short landscape screens */
@media (max-height: 650px) and (min-width: 769px) {
#home.dc-hero {
padding-top: 85px;
padding-bottom: 85px;
}
#home .dc-hero__eyebrow {
margin-bottom: 18px;
}
#home .dc-hero__title-main {
font-size: clamp(4rem, 10vh, 7rem);
}
#home .dc-hero__title-sub {
font-size: clamp(3rem, 7vh, 5rem);
}
#home .dc-hero__title-rule {
margin-top: 20px;
margin-bottom: 17px;
}
#home .dc-hero__specialties {
margin-bottom: 15px;
}
#home .dc-hero__actions {
margin-top: 20px;
}
#home .dc-hero__signature {
margin-top: 18px;
}
#home .dc-hero__side {
top: 24%;
}
}
/* Accessibility: honor reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
#home.dc-hero *,
#home.dc-hero *::before,
#home.dc-hero *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
#home .dc-hero__eyebrow,
#home .dc-hero__identity-overline,
#home .dc-hero__title-main,
#home .dc-hero__title-sub,
#home .dc-hero__title-rule,
#home .dc-hero__specialties,
#home .dc-hero__description,
#home .dc-hero__actions,
#home .dc-hero__signature,
#home .dc-hero__side,
#home .dc-hero__code,
#home .dc-hero__scroll {
opacity: 1;
filter: none;
transform: none;
}
}
/* ---------------- BRAND TITLE REFINEMENT ---------------- */
#home .dc-hero__title,
#home .dc-hero__title-main,
#home .dc-hero__title-sub {
font-family: 'Orbitron', sans-serif;
}
#home .dc-hero__title-main {
/* Reduced max size from 8rem to 6.5rem, and preferred scale from 14.5vw to 10vw */
font-size: clamp(2.8rem, 10vw, 4.8rem);
letter-spacing: 0.015em;
line-height: 1.1;
/* Ensures tight vertical alignment between the stacked words */
}
#home .dc-hero__title-sub {
/* Reduced max size from 6.2rem to 5.2rem, and preferred scale from 10vw to 8vw */
font-size: clamp(2rem, 8vw, 4.0rem);
letter-spacing: 0.11em;
padding-left: 0.11em;
margin-top: -0.2em;
/* Slightly pulls the outlined text closer to the main text */
}
/* ---------------- REFINED SCROLL CUE ---------------- */
#home .dc-hero__scroll {
gap: 10px;
}
#home .dc-hero__scroll-text {
color: #c7c7c7;
transition: color 0.3s ease, letter-spacing 0.3s ease;
}
#home .dc-hero__scroll-line {
width: 2px;
height: 44px;
overflow: visible;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.06));
box-shadow: 0 0 8px rgba(255, 255, 255, 0.04);
}
#home .dc-hero__scroll-line span {
top: -20%;
left: -1px;
width: 4px;
height: 21px;
;
border-radius: 999px;
background: linear-gradient(to bottom, transparent, #fff 48%, #d8d8d8);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 13px rgba(255, 255, 255, 0.3);
animation: dcScrollBeam 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
#home .dc-hero__scroll:hover .dc-hero__scroll-text {
color: #fff;
letter-spacing: 3.5px;
}
#home .dc-hero__scroll:hover .dc-hero__scroll-line::after {
border-color: #fff;
}
@keyframes dcScrollBeam {
0% {
top: -45%;
opacity: 0;
}
15% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
top: 100%;
opacity: 0;
}
}
@media (max-width: 768px) {
#home .dc-hero__title-main {
font-size: clamp(4rem, 13.5vw, 7rem);
letter-spacing: 0;
}
#home .dc-hero__title-sub {
font-size: clamp(2.8rem, 9.5vw, 5.2rem);
letter-spacing: 0.07em;
padding-left: 0.07em;
}
#home .dc-hero__scroll-line {
height: 30px;
}
}
@media (max-width: 380px) {
#home .dc-hero__title-main {
font-size: clamp(3.4rem, 13vw, 4rem);
}
#home .dc-hero__title-sub {
font-size: clamp(2.35rem, 9vw, 2.8rem);
letter-spacing: 0.045em;
padding-left: 0.045em;
}
}
@media (prefers-reduced-motion: reduce) {
#home .dc-hero__scroll-line span {
animation: none;
top: 0;
opacity: 1;
}
}
/* ABOUT PAGE */
/* ==========================================================
DASIS CODES — ABOUT SECTION
Monochrome • Editorial • Responsive
========================================================== */
.dc-about {
--about-white: #f2f2f2;
--about-silver: #c0c0c0;
--about-muted: #929292;
--about-dim: #666666;
--about-line: rgba(192, 192, 192, 0.18);
--about-glow: rgba(192, 192, 192, 0.2);
position: relative;
isolation: isolate;
width: 100%;
padding: 0 0 100px;
overflow: hidden;
color: var(--about-white);
}
/* Subtle background atmosphere */
.dc-about::before {
content: "";
position: absolute;
top: 20%;
left: -180px;
width: 380px;
height: 380px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(180, 180, 180, 0.055) 0%,
rgba(180, 180, 180, 0.018) 40%,
transparent 72%);
pointer-events: none;
z-index: -1;
}
.dc-about::after {
content: "";
position: absolute;
right: -220px;
bottom: 5%;
width: 450px;
height: 450px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(150, 150, 150, 0.045) 0%,
transparent 70%);
pointer-events: none;
z-index: -1;
}
/* ==========================================================
SECTION HEADING
Preserve the signature silver glow
========================================================== */
.dc-about__header {
position: relative;
z-index: 1;
padding: 4rem 1.5rem 2rem !important;
text-align: center;
}
.dc-about .neon-container {
width: 100%;
}
/* ==========================================================
MAIN TWO-COLUMN LAYOUT
========================================================== */
.dc-about__content {
position: relative;
display: grid;
grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
align-items: center;
gap: clamp(42px, 6vw, 90px);
width: min(1180px, calc(100% - 64px));
max-width: 1180px;
margin: 24px auto 0 !important;
padding: 24px 0 !important;
}
/* ==========================================================
PORTRAIT
========================================================== */
.dc-about__portrait {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-width: 0;
}
.dc-about__portrait-frame {
position: relative;
width: 100%;
max-width: 410px;
padding: 10px;
border: 1px solid rgba(192, 192, 192, 0.28);
border-radius: 3px;
background: linear-gradient(145deg,
rgba(192, 192, 192, 0.08),
rgba(255, 255, 255, 0.012) 45%,
rgba(128, 128, 128, 0.07));
box-shadow:
0 0 25px rgba(192, 192, 192, 0.055),
0 25px 65px rgba(0, 0, 0, 0.3);
transition:
border-color 0.4s ease,
box-shadow 0.4s ease,
transform 0.4s ease;
}
.dc-about__portrait-frame:hover {
border-color: rgba(192, 192, 192, 0.55);
box-shadow:
0 0 30px rgba(192, 192, 192, 0.1),
0 25px 70px rgba(0, 0, 0, 0.35);
transform: translateY(-4px);
}
.dc-about__image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center;
border: 1px solid rgba(192, 192, 192, 0.28);
border-radius: 2px;
box-shadow: none;
transition:
filter 0.5s ease,
transform 0.5s ease;
}
/* Gentle monochrome treatment without forcing grayscale */
.dc-about__portrait-frame:hover .dc-about__image {
filter: brightness(1.045);
}
/* Four small technical corner accents */
.dc-about__portrait-corner {
position: absolute;
z-index: 2;
width: 17px;
height: 17px;
border-color: rgba(220, 220, 220, 0.8);
border-style: solid;
pointer-events: none;
}
.dc-about__portrait-corner--tl {
top: -3px;
left: -3px;
border-width: 1px 0 0 1px;
}
.dc-about__portrait-corner--tr {
top: -3px;
right: -3px;
border-width: 1px 1px 0 0;
}
.dc-about__portrait-corner--bl {
bottom: -3px;
left: -3px;
border-width: 0 0 1px 1px;
}
.dc-about__portrait-corner--br {
right: -3px;
bottom: -3px;
border-width: 0 1px 1px 0;
}
/* Portrait caption */
.dc-about__portrait-caption {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 11px;
width: 100%;
max-width: 410px;
margin-top: 20px;
color: var(--about-silver);
font-family: "Inconsolata", monospace;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.13em;
}
.dc-about__caption-line {
width: 22px;
height: 1px;
background: var(--about-silver);
}
.dc-about__caption-divider {
padding: 0 3px;
color: var(--about-dim);
}
.dc-about__caption-status {
display: inline-flex;
align-items: center;
gap: 7px;
margin-left: auto;
color: var(--about-muted);
font-size: 0.65rem;
letter-spacing: 0.1em;
}
.dc-about__status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #c8c8c8;
box-shadow: 0 0 8px rgba(220, 220, 220, 0.65);
}
/* ==========================================================
INTRODUCTION AND TYPOGRAPHY
========================================================== */
.dc-about__text {
width: 100%;
max-width: 650px;
min-width: 0;
padding: 0 !important;
color: var(--about-silver);
text-align: left;
line-height: 1.8;
}
.dc-about__intro-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
color: var(--about-muted);
font-family: "Inconsolata", monospace;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.2em;
}
.dc-about__intro-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 31px;
height: 31px;
border: 1px solid rgba(192, 192, 192, 0.35);
color: var(--about-white);
font-size: 0.72rem;
letter-spacing: 0;
}
.dc-about__title {
margin: 0 0 23px;
color: var(--about-white);
font-family: "Orbitron", sans-serif;
font-size: clamp(1.45rem, 2.5vw, 2.15rem);
font-weight: 700;
line-height: 1.55;
letter-spacing: -0.035em;
}
.dc-about__title span {
color: var(--about-silver);
text-shadow: 0 0 18px rgba(192, 192, 192, 0.12);
}
.dc-about__text p {
margin: 0 0 19px;
color: var(--about-silver);
font-size: 1rem;
line-height: 1.9;
overflow-wrap: break-word;
}
.dc-about__text .dc-about__lead {
color: #d5d5d5;
font-size: 1.035rem;
line-height: 1.9;
}
.dc-about__lead strong {
color: var(--about-white);
font-weight: 700;
}
/* Small technical divider */
.dc-about__divider {
display: flex;
align-items: center;
gap: 7px;
width: 100%;
margin: 25px 0;
}
.dc-about__divider span:first-child {
width: 38px;
height: 2px;
background: var(--about-silver);
}
.dc-about__divider span:nth-child(2) {
width: 6px;
height: 6px;
border: 1px solid var(--about-silver);
transform: rotate(45deg);
}
.dc-about__divider span:last-child {
flex: 1;
height: 1px;
background: linear-gradient(90deg,
rgba(192, 192, 192, 0.3),
transparent);
}
/* Closing statement */
.dc-about__closing {
display: flex;
align-items: center;
gap: 12px;
margin-top: 26px;
padding: 2px 0 2px 15px;
border-left: 2px solid rgba(192, 192, 192, 0.6);
}
.dc-about__text .dc-about__closing p {
margin: 0;
color: var(--about-white);
font-size: 1.02rem;
font-weight: 600;
letter-spacing: 0.015em;
}
.dc-about__closing-mark {
color: var(--about-muted);
font-family: "Inconsolata", monospace;
font-size: 1.3rem;
}
/* ==========================================================
ACTION BUTTON AND SIGNATURE
========================================================== */
.dc-about__actions {
margin-top: 30px;
}
.dc-about__action-link {
display: inline-block;
text-decoration: none;
}
.dc-about__action-link .btn {
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.dc-about__action-link:hover .btn {
transform: translateY(-2px);
}
.dc-about__signature {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 36px;
color: rgba(192, 192, 192, 0.48);
font-family: "Inconsolata", monospace;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.19em;
}
.dc-about__signature span:nth-child(even) {
color: rgba(220, 220, 220, 0.65);
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 1000px) {
.dc-about__content {
grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
gap: 38px;
width: calc(100% - 48px);
}
.dc-about__portrait-frame {
max-width: 350px;
}
.dc-about__portrait-caption {
max-width: 350px;
}
.dc-about__title {
font-size: clamp(1.35rem, 2.8vw, 1.8rem);
}
.dc-about__text p {
font-size: 0.96rem;
line-height: 1.8;
}
.dc-about__intro-label {
margin-bottom: 17px;
}
.dc-about__signature {
margin-top: 28px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 767px) {
.dc-about {
padding-bottom: 65px;
}
.dc-about__header {
padding: 3.5rem 1rem 1.5rem !important;
}
.dc-about .neon-text {
font-size: clamp(1.75rem, 7vw, 2.2rem) !important;
letter-spacing: 0.1em;
}
.dc-about__eyebrow {
gap: 9px;
margin-top: 12px;
font-size: 0.63rem;
letter-spacing: 0.13em;
}
.dc-about__eyebrow::before,
.dc-about__eyebrow::after {
width: 17px;
}
.dc-about__content {
display: flex;
flex-direction: column;
align-items: center;
gap: 38px;
width: calc(100% - 36px);
margin-top: 18px !important;
padding: 12px 0 !important;
}
.dc-about__portrait {
width: 100%;
}
.dc-about__portrait-frame {
width: min(100%, 360px);
padding: 8px;
}
.dc-about__image {
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
}
.dc-about__portrait-caption {
width: min(100%, 360px);
margin-top: 16px;
font-size: 0.68rem;
}
.dc-about__text {
width: 100%;
max-width: 580px;
text-align: left;
}
.dc-about__intro-label {
margin-bottom: 18px;
font-size: 0.67rem;
}
.dc-about__title {
margin-bottom: 19px;
font-size: clamp(1.4rem, 5.7vw, 1.9rem);
line-height: 1.55;
}
.dc-about__text p {
margin-bottom: 17px;
font-size: 0.96rem;
line-height: 1.85;
}
.dc-about__text .dc-about__lead {
font-size: 1rem;
line-height: 1.85;
}
.dc-about__divider {
margin: 22px 0;
}
.dc-about__closing {
margin-top: 24px;
}
.dc-about__actions {
margin-top: 26px;
}
.dc-about__signature {
gap: 8px;
margin-top: 30px;
font-size: 0.61rem;
letter-spacing: 0.13em;
}
}
/* ==========================================================
SMALL MOBILE
========================================================== */
@media (max-width: 380px) {
.dc-about__content {
width: calc(100% - 28px);
}
.dc-about__header {
padding-top: 3rem !important;
}
.dc-about .neon-text {
font-size: 1.65rem !important;
}
.dc-about__eyebrow {
font-size: 0.57rem;
letter-spacing: 0.09em;
}
.dc-about__portrait-frame {
padding: 6px;
}
.dc-about__portrait-caption {
gap: 7px;
font-size: 0.62rem;
}
.dc-about__caption-status {
font-size: 0.58rem;
}
.dc-about__title {
font-size: 1.3rem;
}
.dc-about__text p {
font-size: 0.92rem;
}
.dc-about__signature {
font-size: 0.55rem;
letter-spacing: 0.1em;
}
}
/* ==========================================================
REDUCED MOTION ACCESSIBILITY
========================================================== */
@media (prefers-reduced-motion: reduce) {
.dc-about .neon-text {
animation: none;
}
.dc-about__portrait-frame,
.dc-about__image,
.dc-about__action-link .btn {
transition: none;
}
.dc-about__portrait-frame:hover,
.dc-about__action-link:hover .btn {
transform: none;
}
}
/* SKILLS PAGE */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* =========================================
DASIS CODES — SKILLS SECTION
========================================= */
/* Prevent the Skills section from overflowing its viewport */
#skills.dc-skills,
#skills.dc-skills * {
box-sizing: border-box;
}
#skills.dc-skills {
width: 100%;
max-width: 100%;
margin-inline: 0;
min-width: 0;
}
#skills .dc-skills-layout,
#skills .dc-skills-cube-area,
#skills .dc-skills-panels,
#skills .dc-skill-panel {
min-width: 0;
max-width: 100%;
}
#skills.dc-skills {
--dc-silver: #c0c0c0;
--dc-muted: #a6a6a6;
--dc-panel: rgba(255, 255, 255, 0.035);
--dc-line: rgba(192, 192, 192, 0.19);
position: relative;
isolation: isolate;
width: 100%;
min-height: 100vh;
padding: 5.5rem clamp(1.2rem, 5vw, 5rem) 6rem;
overflow: hidden;
color: #f4f4f4;
/* background:
radial-gradient(ellipse at 16% 48%, rgba(192, 192, 192, 0.055), transparent 36%),
#101010; */
font-family: 'Montserrat', sans-serif;
}
#skills.dc-skills::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.17;
background-image: radial-gradient(rgba(255, 255, 255, .35) 0.6px, transparent 0.6px);
background-size: 24px 24px;
mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
#skills .dc-skills-heading {
position: relative;
z-index: 1;
margin: 0 auto 4rem;
text-align: center;
}
#skills .dc-skills-title {
margin: 0;
font-family: 'Orbitron', sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: 0.08em;
}
#skills .dc-skills-subtitle {
margin: 1rem auto 0;
max-width: 540px;
color: #aaa;
font-size: 0.94rem;
line-height: 1.8;
}
/* Main two-column layout */
#skills .dc-skills-layout {
display: grid;
grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
align-items: center;
gap: clamp(2.5rem, 6vw, 6rem);
width: 100%;
max-width: 1320px;
margin: 0 auto;
}
/* =========================================
ROTATING CUBE
========================================= */
#skills .dc-skills-cube-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 0;
text-align: center;
}
#skills .dc-cube-label {
margin: 0 0 1rem;
color: #8f8f8f;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.28em;
}
#skills .dc-cube-stage {
position: relative;
display: grid;
place-items: center;
width: 100%;
min-height: 340px;
perspective: 1000px;
isolation: isolate;
}
#skills .dc-cube-stage::before {
content: "";
position: absolute;
z-index: -1;
width: 255px;
height: 255px;
border: 1px solid rgba(192, 192, 192, 0.14);
border-radius: 50%;
box-shadow:
0 0 35px rgba(192, 192, 192, 0.07),
inset 0 0 35px rgba(192, 192, 192, 0.035);
animation: dc-cube-halo 8s ease-in-out infinite;
}
#skills .dc-cube-stage::after {
content: "";
position: absolute;
z-index: -1;
width: 205px;
height: 205px;
border-radius: 50%;
background: rgba(192, 192, 192, 0.07);
filter: blur(45px);
pointer-events: none;
}
#skills .skills-container {
display: grid;
place-items: center;
width: 100%;
height: 300px;
perspective: 1000px;
transform-style: preserve-3d;
}
#skills .box-card {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: rotateX(-12deg) rotateY(-22deg);
animation: none;
cursor: grab;
will-change: transform;
}
/* Stable hover target for the rotating cube */
#skills .dc-cube-stage {
position: relative;
isolation: isolate;
}
#skills .dc-cube-stage .box-card {
pointer-events: none;
cursor: default;
animation: none;
}
/* The stationary stage triggers the rotation */
#skills .dc-cube-stage:hover .box-card {
animation: rotate3d 8s linear infinite;
}
/* Keep every moving face from changing the hover target */
#skills .dc-cube-stage .face {
pointer-events: none;
cursor: default;
}
#skills .face {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
overflow: hidden;
border: 1px solid rgba(210, 210, 210, 0.65);
border-radius: 10px;
background:
linear-gradient(145deg, rgba(48, 48, 48, 0.97), rgba(17, 17, 17, 0.97));
color: #d5d5d5 !important;
font-family: 'Orbitron', sans-serif;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.08em;
text-shadow: 0 0 14px rgba(220, 220, 220, 0.2);
backface-visibility: visible;
-webkit-backface-visibility: visible;
box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.025);
transition: border-color 0.3s ease, background 0.3s ease;
}
#skills .face::before {
content: "";
position: absolute;
top: -120%;
left: -120%;
width: 100%;
height: 100%;
background: linear-gradient(45deg,
transparent,
rgba(255, 255, 255, 0.14),
transparent);
pointer-events: none;
transition: top 0.65s ease, left 0.65s ease;
}
#skills .box-card:hover .face::before {
top: 120%;
left: 120%;
}
#skills .face:hover {
border-color: #f0f0f0;
background: linear-gradient(145deg, #3a3a3a, #171717);
}
/* Cube faces: all distances match half the cube's width */
#skills .box-card .front {
transform: rotateY(0deg) translateZ(100px);
}
#skills .box-card .back {
transform: rotateY(180deg) translateZ(100px);
}
#skills .box-card .right {
transform: rotateY(90deg) translateZ(100px);
}
#skills .box-card .left {
transform: rotateY(-90deg) translateZ(100px);
}
#skills .box-card .top {
transform: rotateX(90deg) translateZ(100px);
}
#skills .box-card .bottom {
transform: rotateX(-90deg) translateZ(100px);
}
#skills .dc-cube-caption {
max-width: 260px;
margin: 0.9rem 0 0;
color: #858585;
font-size: 0.78rem;
line-height: 1.8;
letter-spacing: 0.025em;
}
@keyframes rotate3d {
from {
transform: rotateX(-12deg) rotateY(-22deg);
}
to {
transform: rotateX(348deg) rotateY(698deg);
}
}
/* */
@keyframes dc-cube-halo {
0%,
100% {
transform: scale(0.96);
opacity: 0.6;
}
50% {
transform: scale(1.04);
opacity: 1;
}
}
/* =========================================
GLASS PANELS
========================================= */
#skills .dc-skills-panels {
display: flex;
flex-direction: column;
gap: 1.15rem;
min-width: 0;
}
#skills .dc-skill-panel {
position: relative;
overflow: hidden;
border: 1px solid var(--dc-line);
border-radius: 18px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.065),
rgba(255, 255, 255, 0.018));
box-shadow:
0 12px 38px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.035);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
transition:
border-color 0.35s ease,
box-shadow 0.35s ease,
background 0.35s ease;
}
#skills .dc-skill-panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(to bottom,
transparent,
rgba(210, 210, 210, 0.8),
transparent);
opacity: 0;
transition: opacity 0.35s ease;
}
#skills .dc-skill-panel:hover,
#skills .dc-skill-panel.is-open {
border-color: rgba(210, 210, 210, 0.38);
box-shadow:
0 16px 42px rgba(0, 0, 0, 0.25),
0 0 28px rgba(192, 192, 192, 0.045),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#skills .dc-skill-panel.is-open {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.075),
rgba(255, 255, 255, 0.025));
}
#skills .dc-skill-panel:hover::before,
#skills .dc-skill-panel.is-open::before {
opacity: 1;
}
#skills .dc-panel-toggle {
display: flex;
align-items: center;
gap: 1.1rem;
width: 100%;
min-height: 124px;
padding: 1.45rem 1.5rem;
border: 0;
background: transparent;
color: #f2f2f2;
text-align: left;
font: inherit;
cursor: pointer;
}
#skills .dc-panel-toggle:focus-visible {
outline: 2px solid #d5d5d5;
outline-offset: -5px;
border-radius: 18px;
}
#skills .dc-panel-icon {
display: grid;
flex: 0 0 52px;
place-items: center;
width: 52px;
height: 52px;
border: 1px solid rgba(192, 192, 192, 0.25);
border-radius: 14px;
background: rgba(255, 255, 255, 0.035);
color: #d0d0d0;
transition:
background 0.3s ease,
border-color 0.3s ease,
transform 0.3s ease;
}
#skills .dc-panel-icon svg {
width: 25px;
height: 25px;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
#skills .dc-skill-panel.is-open .dc-panel-icon {
background: rgba(192, 192, 192, 0.1);
border-color: rgba(220, 220, 220, 0.48);
transform: scale(1.04);
}
#skills .dc-panel-heading {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 0.42rem;
min-width: 0;
}
#skills .dc-panel-eyebrow {
color: #888;
font-size: 0.64rem;
font-weight: 600;
letter-spacing: 0.2em;
}
#skills .dc-panel-name {
color: #ededed;
font-family: 'Orbitron', sans-serif;
font-size: clamp(1rem, 1.65vw, 1.32rem);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.025em;
}
#skills .dc-panel-summary {
color: #9b9b9b;
font-size: 0.79rem;
line-height: 1.6;
}
#skills .dc-panel-indicator {
position: relative;
flex: 0 0 28px;
width: 28px;
height: 28px;
border: 1px solid rgba(192, 192, 192, 0.28);
border-radius: 50%;
transition:
transform 0.35s ease,
background 0.35s ease,
border-color 0.35s ease;
}
#skills .dc-panel-indicator::before,
#skills .dc-panel-indicator::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 1px;
background: #d6d6d6;
transform: translate(-50%, -50%);
}
#skills .dc-panel-indicator::after {
transform: translate(-50%, -50%) rotate(90deg);
transition: transform 0.3s ease;
}
#skills .dc-skill-panel.is-open .dc-panel-indicator {
background: rgba(192, 192, 192, 0.09);
border-color: rgba(220, 220, 220, 0.5);
}
#skills .dc-skill-panel.is-open .dc-panel-indicator::after {
transform: translate(-50%, -50%) rotate(0deg);
}
/* Expand/collapse animation */
#skills .dc-panel-content {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
visibility: hidden;
border-top: 1px solid transparent;
transition:
grid-template-rows 0.4s ease,
opacity 0.3s ease,
border-color 0.3s ease,
visibility 0.3s ease;
}
#skills .dc-skill-panel.is-open .dc-panel-content {
grid-template-rows: 1fr;
opacity: 1;
visibility: visible;
border-top-color: rgba(192, 192, 192, 0.13);
}
#skills .dc-panel-inner {
min-height: 0;
overflow: hidden;
padding: 0 1.5rem;
}
#skills .dc-skill-item {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
align-items: start;
gap: 0.9rem;
padding: 1.25rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}
#skills .dc-skill-item:last-child {
border-bottom: 0;
}
#skills .dc-skill-number {
padding-top: 0.18rem;
color: #777;
font-family: 'Orbitron', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.04em;
}
#skills .dc-skill-item h4 {
margin: 0 0 0.45rem;
color: #e8e8e8;
font-size: 0.94rem;
font-weight: 600;
}
#skills .dc-skill-item p {
margin: 0;
color: #a3a3a3;
font-size: 0.79rem;
line-height: 1.75;
}
#skills .dc-skill-tag {
margin-top: 0.12rem;
padding: 0.35rem 0.48rem;
border: 1px solid rgba(192, 192, 192, 0.16);
border-radius: 5px;
color: #969696;
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.1em;
white-space: nowrap;
}
#skills .dc-panels-hint {
margin: 0.45rem 0 0;
color: #737373;
font-size: 0.61rem;
font-weight: 600;
letter-spacing: 0.16em;
text-align: right;
}
#skills .dc-panels-hint span {
padding: 0 0.3rem;
color: #b0b0b0;
}
/* =========================================
RESPONSIVE LAYOUT
========================================= */
@media (min-width: 1400px) {
#skills .dc-skills-layout {
gap: 7rem;
}
}
@media (max-width: 1000px) {
#skills.dc-skills {
padding-top: 4.5rem;
}
#skills .dc-skills-layout {
grid-template-columns: minmax(230px, 0.75fr) minmax(0, 1.25fr);
gap: 2.25rem;
}
#skills .dc-cube-stage {
min-height: 290px;
transform: scale(0.88);
}
#skills .dc-panel-toggle {
gap: 0.85rem;
padding: 1.3rem 1.1rem;
}
#skills .dc-panel-icon {
flex-basis: 44px;
width: 44px;
height: 44px;
}
#skills .dc-panel-summary {
font-size: 0.74rem;
}
}
@media (max-width: 760px) {
#skills.dc-skills {
min-height: auto;
padding: 4.5rem 1.15rem 4.5rem;
}
#skills .dc-skills-heading {
margin-bottom: 2.2rem;
}
#skills .dc-skills-subtitle {
max-width: 360px;
font-size: 0.85rem;
}
#skills .dc-skills-layout {
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
max-width: 560px;
}
#skills .dc-skills-cube-area {
order: 0;
}
#skills .dc-skills-panels {
order: 1;
gap: 0.9rem;
}
#skills .dc-cube-stage {
min-height: 285px;
transform: none;
}
#skills .dc-cube-stage::before {
width: 225px;
height: 225px;
}
#skills .dc-cube-stage::after {
width: 170px;
height: 170px;
}
#skills .dc-panel-toggle {
min-height: 108px;
padding: 1.15rem 1rem;
}
#skills .dc-panel-name {
font-size: 1rem;
}
#skills .dc-panel-summary {
font-size: 0.75rem;
}
#skills .dc-panel-inner {
padding: 0 1rem;
}
#skills .dc-skill-item {
grid-template-columns: 25px minmax(0, 1fr);
gap: 0.65rem;
}
#skills .dc-skill-tag {
display: none;
}
#skills .dc-panels-hint {
text-align: center;
font-size: 0.56rem;
}
}
@media (max-width: 380px) {
#skills.dc-skills {
padding-right: 0.85rem;
padding-left: 0.85rem;
}
#skills .dc-panel-toggle {
gap: 0.7rem;
padding-right: 0.8rem;
padding-left: 0.8rem;
}
#skills .dc-panel-icon {
flex-basis: 39px;
width: 39px;
height: 39px;
}
#skills .dc-panel-eyebrow {
font-size: 0.56rem;
letter-spacing: 0.14em;
}
#skills .dc-panel-name {
font-size: 0.88rem;
}
#skills .dc-panel-indicator {
flex-basis: 24px;
width: 24px;
height: 24px;
}
#skills .dc-skill-item p {
font-size: 0.75rem;
}
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
#skills .box-card,
#skills .dc-cube-stage::before {
animation: none !important;
}
#skills .dc-skill-panel,
#skills .dc-panel-content,
#skills .dc-panel-indicator,
#skills .dc-panel-icon {
transition: none !important;
}
#skills .box-card:hover {
animation: none !important;
}
}
/* TOOLS PAGE */
/* ==========================================
DASIS CODES — MONOCHROME 3D TOOLS SECTION
========================================== */
#tools.dc-tools {
--dc-tools-white: #ffffff;
--dc-tools-silver: #c0c0c0;
--dc-tools-grey: #777777;
--dc-tools-border: rgba(210, 210, 210, 0.17);
--dc-tools-surface: rgba(255, 255, 255, 0.025);
position: relative;
isolation: isolate;
overflow: hidden;
color: var(--dc-tools-white);
}
#tools.dc-tools *,
#tools.dc-tools *::before,
#tools.dc-tools *::after {
box-sizing: border-box;
}
#tools.dc-tools .dc-tools-container {
width: 100%;
max-width: 1240px;
margin-inline: auto;
}
#tools.dc-tools .dc-tools-heading {
max-width: 760px;
margin: 0 auto 68px;
text-align: center;
}
#tools.dc-tools .dc-tools-eyebrow {
display: inline-block;
margin-bottom: 20px;
color: var(--dc-tools-silver);
font-size: 11px;
font-weight: 600;
letter-spacing: 4px;
}
#tools.dc-tools .dc-tools-heading h2 {
margin: 0;
color: #ffffff;
font-size: clamp(32px, 5.5vw, 65px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -2px;
}
#tools.dc-tools .dc-tools-heading h2 span {
display: block;
color: #a6a6a6;
}
#tools.dc-tools .dc-tools-heading p {
max-width: 560px;
margin: 22px auto 0;
color: #999999;
font-size: clamp(14px, 1.5vw, 16px);
line-height: 1.8;
}
/* Grid */
#tools.dc-tools .dc-tools-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
perspective: 1200px;
}
/* Floating wrapper.
The floating animation and hover transform live on separate elements. */
#tools.dc-tools .dc-tool-card {
position: relative;
min-width: 0;
animation: dc-tool-float var(--float-duration, 6s) ease-in-out var(--float-delay, 0s) infinite;
transform-style: preserve-3d;
will-change: transform;
}
@keyframes dc-tool-float {
0%,
100% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(0, -8px, 0);
}
50% {
transform: translate3d(0, -3px, 0);
}
75% {
transform: translate3d(0, -11px, 0);
}
}
/* The inner tile receives the 3D hover transform */
#tools.dc-tools .dc-tool-inner {
position: relative;
display: flex;
min-height: 205px;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 27px 14px;
overflow: hidden;
border: 1px solid var(--dc-tools-border);
border-radius: 18px;
background:
linear-gradient(145deg,
rgba(255, 255, 255, 0.065),
rgba(255, 255, 255, 0.012) 55%,
rgba(255, 255, 255, 0.035));
box-shadow:
0 14px 32px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.045);
transform:
perspective(850px) rotateX(var(--dc-tilt-x, 0deg)) rotateY(var(--dc-tilt-y, 0deg)) translateZ(0) scale(1);
transform-style: preserve-3d;
transition:
transform 220ms ease,
border-color 220ms ease,
box-shadow 220ms ease,
background 220ms ease;
will-change: transform;
}
/* Subtle reflective sheen */
#tools.dc-tools .dc-tool-inner::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
background: radial-gradient(circle at var(--dc-glow-x, 50%) var(--dc-glow-y, 30%),
rgba(255, 255, 255, 0.13),
transparent 58%);
transition: opacity 220ms ease;
}
/* Top edge highlight */
#tools.dc-tools .dc-tool-inner::after {
content: "";
position: absolute;
top: 0;
left: 15%;
width: 70%;
height: 1px;
pointer-events: none;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent);
opacity: 0.3;
}
/* Logo */
#tools.dc-tools .dc-tool-icon {
position: relative;
z-index: 1;
display: grid;
width: 66px;
height: 66px;
place-items: center;
margin-bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
background: rgba(0, 0, 0, 0.32);
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
transform: translateZ(24px);
transition:
border-color 220ms ease,
box-shadow 220ms ease,
background 220ms ease;
}
#tools.dc-tools .dc-tool-icon img {
display: block;
width: 34px;
height: 34px;
max-width: 100%;
object-fit: contain;
filter: grayscale(1) brightness(0) invert(1);
opacity: 0.88;
transition:
transform 220ms ease,
opacity 220ms ease;
}
#tools.dc-tools .dc-tool-inner h3 {
position: relative;
z-index: 1;
margin: 0;
color: #f4f4f4;
font-size: 16px;
font-weight: 600;
text-align: center;
letter-spacing: 0.2px;
transform: translateZ(18px);
}
#tools.dc-tools .dc-tool-category {
position: relative;
z-index: 1;
margin-top: 10px;
color: #858585;
font-size: 9px;
font-weight: 600;
text-align: center;
letter-spacing: 1.8px;
transform: translateZ(12px);
}
/* Hover and keyboard focus */
#tools.dc-tools .dc-tool-card:hover,
#tools.dc-tools .dc-tool-card:focus-within {
animation-play-state: paused;
z-index: 2;
}
#tools.dc-tools .dc-tool-card:hover .dc-tool-inner,
#tools.dc-tools .dc-tool-card:focus-within .dc-tool-inner {
border-color: rgba(230, 230, 230, 0.52);
background:
linear-gradient(145deg,
rgba(255, 255, 255, 0.085),
rgba(255, 255, 255, 0.025));
box-shadow:
0 22px 45px rgba(0, 0, 0, 0.48),
0 0 24px rgba(220, 220, 220, 0.075),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
transform:
perspective(850px) rotateX(var(--dc-tilt-x, 0deg)) rotateY(var(--dc-tilt-y, 0deg)) translateY(-7px) translateZ(12px) scale(1.025);
}
#tools.dc-tools .dc-tool-card:hover .dc-tool-inner::before,
#tools.dc-tools .dc-tool-card:focus-within .dc-tool-inner::before {
opacity: 1;
}
#tools.dc-tools .dc-tool-card:hover .dc-tool-icon,
#tools.dc-tools .dc-tool-card:focus-within .dc-tool-icon {
border-color: rgba(255, 255, 255, 0.32);
background: rgba(255, 255, 255, 0.045);
box-shadow:
0 0 22px rgba(255, 255, 255, 0.075),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#tools.dc-tools .dc-tool-card:hover .dc-tool-icon img,
#tools.dc-tools .dc-tool-card:focus-within .dc-tool-icon img {
opacity: 1;
transform: scale(1.1);
}
/* Footer */
#tools.dc-tools .dc-tools-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 62px;
color: #777777;
font-size: 9px;
font-weight: 600;
letter-spacing: 2.2px;
text-align: center;
}
#tools.dc-tools .dc-tools-footer-line {
width: clamp(20px, 5vw, 64px);
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(200, 200, 200, 0.5));
}
#tools.dc-tools .dc-tools-footer-line:last-child {
transform: rotate(180deg);
}
/* Tablet */
@media (max-width: 900px) {
#tools.dc-tools .dc-tools-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
#tools.dc-tools .dc-tool-inner {
min-height: 185px;
}
}
/* Mobile */
@media (max-width: 600px) {
#tools.dc-tools {
padding: 78px 17px;
}
#tools.dc-tools .dc-tools-heading {
margin-bottom: 42px;
}
#tools.dc-tools .dc-tools-heading h2 {
letter-spacing: -1px;
}
#tools.dc-tools .dc-tools-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
}
#tools.dc-tools .dc-tool-inner {
min-height: 165px;
padding: 22px 8px;
border-radius: 15px;
}
#tools.dc-tools .dc-tool-icon {
width: 56px;
height: 56px;
margin-bottom: 16px;
border-radius: 14px;
}
#tools.dc-tools .dc-tool-icon img {
width: 29px;
height: 29px;
}
#tools.dc-tools .dc-tool-inner h3 {
font-size: 14px;
}
#tools.dc-tools .dc-tool-category {
font-size: 8px;
letter-spacing: 1.1px;
}
#tools.dc-tools .dc-tools-footer {
gap: 9px;
font-size: 8px;
letter-spacing: 1.2px;
line-height: 1.8;
}
}
/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
#tools.dc-tools .dc-tool-card {
animation: none !important;
}
#tools.dc-tools .dc-tool-inner,
#tools.dc-tools .dc-tool-icon,
#tools.dc-tools .dc-tool-icon img {
transition: none !important;
}
}
/* PROJECTS PAGE */
/* ==========================================
DASIS CODES — PROJECTS
Refined silver glass / restrained motion
========================================== */
#projects.dc-projects {
position: relative;
width: 100%;
padding: 2rem 0 5rem;
overflow: hidden;
isolation: isolate;
}
#projects .dc-projects__body {
width: 100%;
margin-top: 0.5rem;
}
#projects .projects-carousel-wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
/* Horizontal carousel */
#projects .projects-carousel {
display: flex;
align-items: center;
gap: clamp(24px, 4vw, 48px);
width: 100%;
padding: 65px max(24px, calc((100% - 320px) / 2));
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-inline: max(24px, calc((100% - 320px) / 2));
scrollbar-width: thin;
scrollbar-color: #777 transparent;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
#projects .projects-carousel::-webkit-scrollbar {
height: 5px;
}
#projects .projects-carousel::-webkit-scrollbar-track {
background: transparent;
}
#projects .projects-carousel::-webkit-scrollbar-thumb {
background: #777;
border-radius: 10px;
}
#projects .projects-carousel::-webkit-scrollbar-thumb:hover {
background: #aaa;
}
/* Individual project cards */
#projects .project-card {
position: relative;
isolation: isolate;
flex: 0 0 320px;
min-width: 0;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: center;
scroll-snap-stop: normal;
opacity: 0.58;
filter: blur(2px);
transform: scale(0.89);
transition:
opacity 450ms ease,
filter 450ms ease,
transform 500ms cubic-bezier(0.2, 0.75, 0.25, 1);
--dc-card-shift: 0px;
--dc-card-glow: 0;
}
#projects .project-card.active {
opacity: 1;
filter: blur(0);
transform: scale(1);
z-index: 2;
}
/* Original skewed silver layers, toned down */
#projects .project-card::before,
#projects .project-card::after {
content: "";
position: absolute;
top: 0;
left: 50px;
width: 50%;
height: 100%;
border-radius: 12px;
background: linear-gradient(145deg,
rgba(121, 121, 121, 0.78),
rgba(95, 95, 95, 0.68) 52%,
rgba(215, 215, 215, 0.82));
transform: skewX(20deg);
transition:
transform 700ms ease,
left 700ms ease,
width 700ms ease,
opacity 700ms ease;
z-index: -1;
}
#projects .project-card::after {
filter: blur(55px);
opacity: 0.17;
}
#projects .project-card.active::after {
opacity: 0.24;
}
#projects .project-card.active:hover::before,
#projects .project-card.active:hover::after {
left: 20px;
width: calc(100% - 40px);
transform: skewX(0deg);
}
#projects .project-card.active::before,
#projects .project-card.active::after {
/* transform: scale(1); */
left: 50px;
width: 50%;
transform: skew(20deg);
}
/* Glass content panel */
#projects .project-card .content {
position: relative;
z-index: 2;
width: 100%;
padding: 28px 26px;
color: #212121;
text-align: left;
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 12px;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.045);
transition:
border-color 400ms ease,
box-shadow 400ms ease,
background 400ms ease,
transform 400ms ease;
}
#projects .project-card.active .content {
background: rgba(255, 255, 255, 0.065);
border-color: rgba(220, 220, 220, 0.27);
box-shadow:
0 14px 38px rgba(0, 0, 0, 0.2),
0 0 24px rgba(192, 192, 192, 0.075),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#projects .project-card:hover .content {
border-color: rgba(220, 220, 220, 0.3);
transform: translateY(-3px);
}
#projects .project-card .content h2 {
margin: 0 0 14px;
color: #d4d4d4;
font-size: 1.45rem;
font-weight: 700;
line-height: 1.3;
overflow-wrap: anywhere;
}
#projects .project-card .content p {
margin: 0 0 22px;
color: #c4c4c4;
font-size: 0.94rem;
line-height: 1.75;
overflow-wrap: anywhere;
}
/* Restrained monochrome project link */
#projects .project-card .content a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 9px 15px;
color: #161616;
background: #c7c7c7;
border: 1px solid #c7c7c7;
border-radius: 6px;
font-size: 0.77rem;
font-weight: 700;
letter-spacing: 0.07em;
text-decoration: none;
transition:
color 250ms ease,
background 250ms ease,
border-color 250ms ease,
transform 250ms ease;
}
#projects .project-card .content a:hover {
color: #fff;
background: #333;
border-color: #aaa;
transform: translateY(-2px);
}
#projects .project-card .content a:focus-visible,
#projects .arrow:focus-visible {
outline: 2px solid #ddd;
outline-offset: 4px;
}
/* Floating glass accents */
#projects .project-card>span {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
#projects .project-card>span::before,
#projects .project-card>span::after {
content: "";
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
background: rgba(210, 210, 210, 0.055);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
animation: dc-project-float 10s ease-in-out infinite;
animation-play-state: paused;
}
#projects .project-card.active>span::before,
#projects .project-card.active>span::after {
animation-play-state: running;
}
#projects .project-card>span::before {
width: 70px;
height: 70px;
top: -22px;
left: 30px;
}
#projects .project-card>span::after {
width: 85px;
height: 85px;
right: 22px;
bottom: -25px;
animation-delay: -3s;
}
@keyframes dc-project-float {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -9px, 0);
}
}
/* Carousel navigation */
#projects .arrow {
position: absolute;
top: 50%;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
color: #d0d0d0;
background: rgba(15, 15, 15, 0.72);
border: 1px solid rgba(210, 210, 210, 0.2);
border-radius: 50%;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
transform: translateY(-50%);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition:
color 250ms ease,
background 250ms ease,
border-color 250ms ease,
opacity 250ms ease;
}
#projects .arrow.left {
left: 14px;
}
#projects .arrow.right {
right: 14px;
}
#projects .arrow:hover:not(:disabled) {
color: #fff;
background: rgba(95, 95, 95, 0.65);
border-color: rgba(230, 230, 230, 0.5);
}
#projects .arrow:disabled {
opacity: 0.25;
cursor: default;
}
/* Empty state */
#projects .dc-projects__empty {
width: 100%;
padding: 35px 15px;
color: #aaa;
text-align: center;
}
/* Responsive layout */
@media (max-width: 768px) {
#projects.dc-projects {
padding: 1rem 0 3.5rem;
}
#projects .projects-carousel {
gap: 22px;
padding: 48px 11vw;
scroll-padding-inline: 11vw;
}
#projects .project-card {
flex-basis: 78vw;
min-height: 370px;
opacity: 0.72;
filter: blur(1px);
transform: scale(0.94);
}
#projects .project-card.active {
opacity: 1;
filter: blur(0);
transform: scale(1);
}
#projects .project-card .content {
padding: 25px 22px;
}
#projects .project-card .content h2 {
font-size: 1.3rem;
}
#projects .project-card .content p {
font-size: 0.9rem;
}
#projects .arrow {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
#projects .arrow.left {
left: 7px;
}
#projects .arrow.right {
right: 7px;
}
}
@media (max-width: 380px) {
#projects .project-card {
min-height: 350px;
}
#projects .project-card .content {
padding: 22px 18px;
}
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
#projects .projects-carousel {
scroll-behavior: auto;
}
#projects .project-card,
#projects .project-card::before,
#projects .project-card::after,
#projects .project-card .content,
#projects .project-card .content a,
#projects .arrow {
transition: none !important;
}
#projects .project-card>span::before,
#projects .project-card>span::after {
animation: none !important;
}
}
/* SERVICES PAGE */
/* ==========================================
DASIS CODES — SERVICES
Refined monochrome / purposeful motion
========================================== */
#services.dc-services {
position: relative;
width: 100%;
padding: 3rem 2rem 5rem;
isolation: isolate;
}
/* Service list */
#services .dc-services__list {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
#services .service-row {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(38px, 6vw, 88px);
margin: 0;
padding: 42px 0;
}
#services .service-row+.service-row {
border-top: 1px solid rgba(192, 192, 192, 0.09);
}
#services .service-row.reverse {
flex-direction: row-reverse;
}
#services .service-row>* {
margin-top: 0;
margin-bottom: 0;
}
/* Image frame */
#services .service-image-wrapper {
position: relative;
flex: 0 1 500px;
width: 100%;
min-width: 0;
height: 190px;
overflow: visible;
isolation: isolate;
border-radius: 15px;
}
/* Subtle darkening over the image helps the title read clearly */
#services .service-image-wrapper::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border: 1px solid rgba(220, 220, 220, 0.22);
border-radius: inherit;
background: linear-gradient(100deg,
rgba(0, 0, 0, 0.56),
rgba(0, 0, 0, 0.16) 60%,
rgba(0, 0, 0, 0.38));
pointer-events: none;
transition:
border-color 350ms ease,
background 350ms ease;
}
/* Image itself */
#services .service-image {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
object-position: center;
border: 1px solid rgba(192, 192, 192, 0.17);
border-radius: inherit;
filter: grayscale(0.3) brightness(0.76) contrast(1.06);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.2),
0 0 14px rgba(192, 192, 192, 0.045);
transition:
filter 450ms ease,
transform 550ms cubic-bezier(0.2, 0.7, 0.2, 1),
box-shadow 450ms ease;
}
/* Gentle image refinement on hover */
#services .service-image-wrapper:hover .service-image {
filter: grayscale(0.15) brightness(0.86) contrast(1.04);
transform: scale(1.018);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.24),
0 0 18px rgba(192, 192, 192, 0.075);
}
#services .service-image-wrapper:hover::before {
border-color: rgba(220, 220, 220, 0.36);
background: linear-gradient(100deg,
rgba(0, 0, 0, 0.48),
rgba(0, 0, 0, 0.12) 60%,
rgba(0, 0, 0, 0.32));
}
/* Image title */
#services .service-title {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
width: calc(100% - 36px);
margin: 0;
padding: 0;
color: #e1e1e1;
font-size: clamp(1rem, 1.5vw, 1.35rem);
font-weight: 700;
line-height: 1.45;
letter-spacing: 0.035em;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
pointer-events: none;
transform: translate(-50%, -50%);
}
/* Number label */
#services .dc-service-number {
position: absolute;
top: 12px;
left: 14px;
z-index: 3;
color: rgba(255, 255, 255, 0.78);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.12em;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}
/* Fine connector line */
#services .service-image-wrapper::after {
content: "";
position: absolute;
top: 58%;
right: -58px;
z-index: 0;
width: 58px;
height: 1px;
background: linear-gradient(to right,
rgba(192, 192, 192, 0.48),
rgba(192, 192, 192, 0.04));
pointer-events: none;
}
#services .service-row.reverse .service-image-wrapper::after {
right: auto;
left: -58px;
background: linear-gradient(to left,
rgba(192, 192, 192, 0.48),
rgba(192, 192, 192, 0.04));
}
/* Description side */
#services .dc-service-copy {
position: relative;
flex: 1 1 0;
min-width: 0;
max-width: 490px;
padding: 23px 25px;
border: 1px solid rgba(192, 192, 192, 0.12);
border-radius: 12px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.045),
rgba(255, 255, 255, 0.012));
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.025);
transition:
border-color 350ms ease,
transform 350ms ease,
box-shadow 350ms ease;
}
#services .service-row:hover .dc-service-copy {
border-color: rgba(192, 192, 192, 0.23);
transform: translateY(-3px);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.13),
0 0 16px rgba(192, 192, 192, 0.035);
}
/* Small uppercase descriptor */
#services .dc-service-kicker {
margin: 0 0 13px;
color: #a9a9a9;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.13em;
line-height: 1.6;
}
/* Service description */
#services .service-text {
flex: none;
max-width: none;
margin: 0;
padding: 0;
color: #c6c6c6;
font-size: 0.96rem;
line-height: 1.85;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
overflow-wrap: anywhere;
transition: color 300ms ease;
will-change: auto;
}
#services .service-row:hover .service-text {
color: #e0e0e0;
transform: none;
box-shadow: none;
}
/* Hiring call to action */
#services .dc-services__cta {
position: relative;
max-width: 100%;
margin: 28px auto 0;
padding: 28px 24px 12px;
text-align: center;
}
#services .dc-services__cta-title {
margin-top: 0;
color: white;
font-size: clamp(1.75rem, 2.6vw, 3.0rem);
font-family: 'Orbitron';
margin-bottom: 10px;
}
#services .dc-services__cta-text {
max-width: 500px;
margin: 0 auto;
color: #aaa;
font-size: 0.95rem;
line-height: 1.8;
}
/* Hire Me dropdown */
#services .hireme-wrapper {
position: relative;
margin: 27px 0 0;
text-align: center;
}
#services .hireme-main {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
}
#services .dc-hire-chevron {
display: inline-block;
font-size: 1.05em;
transition: transform 250ms ease;
}
#services #hireToggle[aria-expanded="true"] .dc-hire-chevron {
transform: rotate(180deg);
}
#services .hireme-options {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 17px;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition:
opacity 250ms ease,
transform 250ms ease;
}
#services .hireme-options.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#services .hireme-small {
min-width: 105px;
padding: 10px 20px;
border: 1px solid rgba(192, 192, 192, 0.23);
border-radius: 24px;
color: #d8d8d8;
background: rgba(255, 255, 255, 0.035);
text-align: center;
text-decoration: none;
transition:
color 250ms ease,
background 250ms ease,
border-color 250ms ease,
transform 250ms ease;
}
#services .hireme-small:hover {
color: #fff;
background: rgba(255, 255, 255, 0.09);
border-color: rgba(220, 220, 220, 0.48);
transform: translateY(-2px);
}
/* Tablet */
@media (max-width: 900px) {
#services.dc-services {
padding-right: 1.5rem;
padding-left: 1.5rem;
}
#services .service-row {
gap: 38px;
padding: 34px 0;
}
#services .service-image-wrapper {
flex-basis: 43%;
height: 175px;
}
#services .service-image-wrapper::after {
right: -29px;
width: 29px;
}
#services .service-row.reverse .service-image-wrapper::after {
left: -29px;
}
#services .dc-service-copy {
padding: 20px;
}
#services .service-text {
font-size: 0.92rem;
line-height: 1.75;
}
}
/* Mobile */
@media (max-width: 600px) {
#services.dc-services {
padding: 1.5rem 1.15rem 3.5rem;
}
#services .service-row,
#services .service-row.reverse {
flex-direction: column;
align-items: stretch;
gap: 18px;
padding: 27px 0;
}
#services .service-image-wrapper {
flex: none;
width: 100%;
height: clamp(155px, 48vw, 220px);
}
#services .service-image-wrapper::after,
#services .service-row.reverse .service-image-wrapper::after {
display: none;
}
#services .service-title {
width: calc(100% - 28px);
font-size: clamp(0.95rem, 4vw, 1.2rem);
}
#services .dc-service-number {
top: 10px;
left: 12px;
}
#services .dc-service-copy {
width: 100%;
max-width: none;
padding: 20px;
}
#services .service-text {
font-size: 0.91rem;
line-height: 1.8;
}
#services .dc-services__cta {
margin-top: 38px;
padding: 30px 4px 8px;
}
#services .dc-services__cta-text {
font-size: 0.9rem;
}
#services .hireme-options {
flex-direction: column;
gap: 10px;
}
#services .hireme-small {
width: min(100%, 280px);
min-height: 44px;
padding: 12px 20px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
#services .service-image,
#services .service-image-wrapper::before,
#services .dc-service-copy,
#services .hireme-small,
#services .hireme-options,
#services .dc-hire-chevron {
transition: none !important;
}
#services .service-row:hover .dc-service-copy,
#services .service-image-wrapper:hover .service-image,
#services .hireme-small:hover {
transform: none;
}
}
/* REVIEWS PAGE */
.reviews-section {
background: #000;
padding: 2rem 0 4rem 0;
overflow: visible;
}
.reviews-slider-wrapper {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px 0;
isolation: isolate;
/* ← added: safer against scrollbar on mobile */
}
.reviews-scroller {
display: flex;
gap: 30px;
width: max-content;
}
.reviews-group {
display: flex;
gap: 30px;
flex-shrink: 0;
animation: review-scroll var(--review-speed, 40s) linear infinite;
}
/* Pause on hover/tap (works on mobile too when long-pressing) */
.reviews-slider-wrapper:hover .reviews-group,
.reviews-slider-wrapper:active .reviews-group {
animation-play-state: paused;
}
@keyframes review-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
/* Review Card – base styles (desktop-first) */
.review-card {
min-width: 320px;
width: 360px;
/* ← fixed preferred width instead of max */
height: 430px;
flex: 0 0 auto;
padding: 18px;
border-radius: 20px;
background: #242424;
border: 1px solid rgba(192, 192, 192, 0.25);
box-shadow: 0 0 20px rgba(192, 192, 192, 0.15);
color: #ddd;
opacity: 0.92;
transition: opacity 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
box-sizing: border-box;
}
.review-name {
color: silver;
margin-top: 16px;
margin-bottom: 5px;
font-size: 1.1rem;
}
.review-country {
font-size: 0.85rem;
color: #aaa;
font-style: italic;
}
.review-stars {
color: silver;
letter-spacing: 3px;
margin-top: 8px;
text-shadow: 0 0 8px rgba(192, 192, 192, 0.6);
}
.review-card:hover {
opacity: 1;
box-shadow: 0 0 30px rgba(192, 192, 192, 0.35);
}
.reviews-animation-isolate {
contain: paint;
/* contain: strict; */
}
.stats-section {
margin: 4rem 0;
padding: 0 1rem;
}
.stats-grid {
display: flex;
justify-content: center;
gap: 3rem;
/* generous spacing between items */
flex-wrap: wrap;
max-width: 1100px;
margin: 0 auto;
}
.stat-item {
flex: 1;
min-width: 220px;
/* prevents squishing on medium screens */
text-align: center;
/* default center alignment */
display: flex;
flex-direction: column;
gap: 0.6rem;
font-family: 'Orbitron', sans-serif;
}
.stat-number {
font-family: 'Orbitron', sans-serif;
font-size: clamp(3.5rem, 9vw, 5.5rem);
/* responsive sizing */
font-weight: 400;
color: rgb(228, 228, 228);
line-height: 1;
}
.stat-label {
font-family: 'Orbitron', sans-serif;
font-size: 1.2rem;
font-weight: 500;
color: rgb(229, 229, 229);
opacity: 0.9;
}
/* Optional: left/right emphasis on larger screens only */
@media (min-width: 900px) {
.stat-item:first-child {
text-align: left;
}
.stat-item:last-child {
text-align: right;
}
}
/* Text styles unchanged … */
/* ── Mobile adjustments ── */
@media (max-width: 768px) {
.reviews-slider-wrapper {
padding: 12px 0;
overflow: hidden;
/* double safety */
}
.reviews-scroller,
.reviews-group {
gap: 20px;
/* slightly larger gap feels better on small screens */
}
.review-card {
min-width: 82vw;
/* ← main fix: much wider → easier to read text */
width: 82vw;
max-width: 82vw;
height: auto;
/* ← let content determine height – prevents squish */
min-height: 380px;
/* but keep a decent minimum */
padding: 20px;
/* a bit more breathing room */
font-size: 0.98rem;
/* slightly larger base text */
}
.review-text {
font-size: 1rem;
/* better readability */
}
.review-name {
font-size: 1.15rem;
}
/* Slower on mobile – gives time to read without feeling rushed */
.reviews-slider-wrapper {
--review-speed: 32s;
/* ← or even 38s if reviews are long */
}
/* Optional: reduce blur/shadow intensity for better mobile perf */
.review-card {
box-shadow: 0 4px 16px rgba(192, 192, 192, 0.12);
}
}
@media (max-width: 480px) {
.review-card {
min-width: 68vw;
width: 68vw;
padding: 16px 18px;
}
.reviews-group {
gap: 16px;
}
}
.reviews-slider-wrapper::before,
.reviews-slider-wrapper::after {
content: "";
position: absolute;
top: 0;
width: 120px;
height: 100%;
z-index: 3;
pointer-events: none;
}
.reviews-slider-wrapper::before {
left: 0;
background: linear-gradient(to right, #000, transparent);
}
.reviews-slider-wrapper::after {
right: 0;
background: linear-gradient(to left, #000, transparent);
}
/* BUTTON ANIMATION */
.btn {
margin-top: 7px;
margin-left: 0.5rem;
font-size: 1rem;
font-weight: 300;
color: silver;
cursor: pointer;
padding: 0.5rem 2.4rem;
border: 1px solid silver;
border-radius: 8rem;
background: transparent;
font-family: 'Orbitron', sans-serif;
position: relative;
overflow: hidden;
transition: all 0.5s ease;
}
/* Remove underline from links */
.buttons a,
#hireme {
text-decoration: none;
}
/* Holographic layer */
.btn::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(0deg,
transparent,
transparent 30%,
silver);
transform: rotate(-45deg);
opacity: 0;
transition: all 0.5s ease;
}
/* Hover animation */
.btn:hover {
color: #1f1f38;
background-color: #fff;
border-color: #fff;
transform: scale(1.05);
box-shadow: 0 0 20px silver;
}
.btn:hover::before {
opacity: 1;
transform: rotate(-45deg) translateY(100%);
}
/* Active / live button */
.live {
color: #1f1f38;
background-color: silver;
}
/* Dropdown container */
.dropdown {
position: relative;
display: inline-block;
}
/* Menu */
.dropdown-menu {
position: absolute;
top: 120%;
left: 50%;
transform: translateX(-50%) translateY(10px);
background: #111;
border: 1px solid silver;
border-radius: 1rem;
min-width: 180px;
padding: 0.6rem 0;
opacity: 0;
visibility: hidden;
transition: all 0.35s ease;
box-shadow: 0 10px 25px rgb(120, 119, 119);
z-index: 10;
}
/* Dropdown items */
.dropdown-item {
display: block;
padding: 0.6rem 1.2rem;
color: #fff;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
transition: all 0.25s ease;
}
.dropdown-item:hover {
background: silver;
color: #1f1f38;
}
/* Show dropdown on hover */
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* Small arrow (optional but classy) */
.dropdown-menu::before {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: #111;
border-left: 1px solid silver;
border-top: 1px solid silver;
transform: translateX(-50%) rotate(45deg);
}
.btn:active {
transform: scale(0.97);
box-shadow: 0 0 8px rgba(192, 192, 192, 0.5);
}
/* SECTION DIVIDER */
.section-divider {
height: 2px;
width: 100%;
background: linear-gradient(to right, black, silver, black);
}
/* NOTIFICATION */
.glass-toast {
position: fixed;
top: 30px;
right: 320px;
/* transform: translate(-50%,-50%); */
display: flex;
align-items: center;
gap: 12px;
padding: 16px 24px;
background: rgba(255, 255, 255, .08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, .15);
color: silver;
border-radius: 16px;
box-shadow:
0 0 20px rgba(192, 192, 192, .15);
z-index: 99999;
animation: toastIn .9s ease;
}
.glass-toast i {
color: silver;
font-size: 1.2rem;
}
@keyframes toastIn {
from {
opacity: 0;
transform: translateX(40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes toastInMobile {
from {
opacity: 0;
transform: translateX(-50%) translateY(-20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@media (max-width: 768px) {
.glass-toast {
top: 20px;
left: 50%;
right: auto;
transform: translateX(-50%);
width: calc(100% - 30px);
max-width: 340px;
padding: 14px 18px;
font-size: 0.9rem;
gap: 10px;
box-sizing: border-box;
animation: toastInMobile .9s ease;
}
}
/* =====================================================
DASISCODES — SYSTEM INITIALIZATION LOADER
===================================================== */
#system-loader {
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
background: #000;
display: flex;
justify-content: center;
align-items: center;
z-index: 999999;
transition:
opacity 1s ease,
visibility 1s ease;
}
/* Loader disappears */
#system-loader.loaded {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Main content */
.system-loader-content {
width: min(500px, 80%);
font-family: 'Inconsolata', monospace;
text-align: left;
}
/* =====================================================
HEADER
===================================================== */
.boot-status {
text-align: center;
color: rgba(255, 255, 255, 0.8);
font-family: 'Orbitron', sans-serif;
font-size: 12px;
letter-spacing: 4px;
margin-bottom: 35px;
animation: statusGlow 2s ease-in-out infinite;
}
@keyframes statusGlow {
0%,
100% {
opacity: 0.55;
}
50% {
opacity: 1;
}
}
/* =====================================================
TERMINAL
===================================================== */
.terminal {
color: rgba(255, 255, 255, 0.65);
font-size: 14px;
line-height: 2;
letter-spacing: 1px;
}
/* Individual terminal lines */
.terminal div {
opacity: 0;
animation: terminalLine 0.5s forwards;
}
.terminal div:nth-child(1) {
animation-delay: 0.2s;
}
.terminal div:nth-child(2) {
animation-delay: 0.5s;
}
.terminal div:nth-child(3) {
animation-delay: 0.8s;
}
.terminal div:nth-child(4) {
animation-delay: 1.1s;
}
.terminal div:nth-child(5) {
animation-delay: 1.4s;
}
@keyframes terminalLine {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* =====================================================
BLINKING CURSOR
===================================================== */
.cursor {
animation: cursorBlink 0.8s infinite;
}
@keyframes cursorBlink {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}
/* =====================================================
PERCENTAGE
===================================================== */
.loader-percentage {
margin-top: 30px;
text-align: right;
color: rgba(255, 255, 255, 0.7);
font-family: 'Orbitron', sans-serif;
font-size: 11px;
letter-spacing: 2px;
}
/* =====================================================
PROGRESS BAR
===================================================== */
.system-progress {
width: 100%;
height: 2px;
margin-top: 8px;
background: rgba(255, 255, 255, 0.12);
overflow: hidden;
}
#system-progress-bar {
width: 0%;
height: 100%;
background: #fff;
box-shadow:
0 0 8px rgba(255, 255, 255, 0.7);
transition: width 0.08s linear;
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 768px) {
.system-loader-content {
width: 82%;
}
.boot-status {
font-size: 9px;
letter-spacing: 3px;
margin-bottom: 25px;
}
.terminal {
font-size: 11px;
line-height: 2;
letter-spacing: 0.5px;
}
.loader-percentage {
font-size: 9px;
margin-top: 25px;
}
}
/* WORKS SECTION */
.websites-section {
width: 100%;
padding: 120px 8%;
background: #000;
color: #fff;
}
/* ================= CONTAINER ================= */
.websites-container {
width: 100%;
max-width: 1200px;
margin: auto;
}
/* ================= CARD ================= */
.website-card {
width: 100%;
margin-top: 50px;
margin-bottom: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 30px;
background: rgba(255, 255, 255, 0.025);
overflow: hidden;
transition:
border-color 0.4s ease,
background 0.4s ease;
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.35);
}
.website-card:hover {
border-color: rgba(255, 255, 255, 0.28);
}
/* ================= CARD HEADER ================= */
.website-card-header {
width: 100%;
height: 90px;
padding: 0 30px;
display: grid;
grid-template-columns: 80px 1fr 50px;
align-items: center;
border: none;
outline: none;
background: transparent;
color: #fff;
cursor: pointer;
text-align: left;
}
/* NUMBER */
.website-number {
font-family: 'Inconsolata', monospace;
font-size: 14px;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.35);
}
/* TITLE */
.website-title {
font-family: 'Orbitron', sans-serif;
font-size: clamp(14px, 1.5vw, 18px);
letter-spacing: 3px;
font-weight: 500;
transition: letter-spacing 0.3s ease;
}
.website-card:hover .website-title {
letter-spacing: 4px;
}
/* TOGGLE */
.website-toggle {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
font-family: 'Inconsolata', monospace;
font-size: 20px;
font-weight: 300;
color: rgba(255, 255, 255, 0.7);
transition:
transform 0.4s ease,
background 0.4s ease,
border-color 0.4s ease;
}
/* ================= CONTENT ================= */
.website-card-content {
max-height: 0;
opacity: 0;
overflow: hidden;
transition:
max-height 0.7s cubic-bezier(.77, 0, .18, 1),
opacity 0.4s ease;
}
/* OPEN CARD */
.website-card.active .website-card-content {
max-height: 700px;
opacity: 1;
}
.website-card.active .website-toggle {
transform: rotate(45deg);
border-color: rgba(255, 255, 255, 0.4);
}
/* ================= CONTENT INNER ================= */
.website-card-content {
display: grid;
grid-template-columns: 42% 58%;
}
/* ================= VISUAL ================= */
.website-visual {
position: relative;
min-height: 420px;
overflow: hidden;
background:
radial-gradient(circle at 70% 35%,
rgba(255, 255, 255, 0.12),
transparent 35%),
linear-gradient(135deg,
#050505,
#111,
#030303);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* GRID */
.visual-grid {
position: absolute;
inset: 0;
opacity: 0.18;
background-image:
linear-gradient(rgba(255, 255, 255, 0.12) 1px,
transparent 1px),
linear-gradient(90deg,
rgba(255, 255, 255, 0.12) 1px,
transparent 1px);
background-size: 40px 40px;
transform: perspective(500px) rotateX(55deg) scale(1.5);
transform-origin: center bottom;
}
/* SILVER GEOMETRIC SHAPE */
.visual-shape {
position: absolute;
width: 190px;
height: 190px;
top: 50%;
left: 50%;
transform:
translate(-50%, -50%) rotate(45deg);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow:
0 0 30px rgba(255, 255, 255, 0.08),
inset 0 0 30px rgba(255, 255, 255, 0.04);
animation: websiteShapeFloat 6s ease-in-out infinite;
}
.visual-shape::before {
content: "";
position: absolute;
inset: 25px;
border: 1px solid rgba(255, 255, 255, 0.35);
}
.visual-shape::after {
content: "";
position: absolute;
width: 70px;
height: 70px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background:
linear-gradient(135deg,
rgba(255, 255, 255, 0.7),
rgba(100, 100, 100, 0.15));
border: 1px solid rgba(255, 255, 255, 0.5);
}
@keyframes websiteShapeFloat {
0%,
100% {
transform:
translate(-50%, -50%) rotate(45deg) scale(1);
}
50% {
transform:
translate(-50%, -54%) rotate(52deg) scale(1.04);
}
}
/* VISUAL TEXT */
.visual-text {
position: absolute;
bottom: 30px;
left: 30px;
font-family: 'Orbitron', sans-serif;
font-size: 11px;
letter-spacing: 4px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.35);
}
/* ================= INFO ================= */
.website-info {
min-height: 420px;
padding: 45px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* LABEL */
.website-label {
font-family: 'Inconsolata', monospace;
font-size: 11px;
letter-spacing: 3px;
color: rgba(255, 255, 255, 0.35);
}
/* PROJECT TITLE */
.website-info h3 {
margin: 18px 0;
font-family: 'Orbitron', sans-serif;
font-size: clamp(1.4rem, 2.5vw, 2.2rem);
font-weight: 500;
letter-spacing: 3px;
}
/* DESCRIPTION */
.website-info-main p {
max-width: 550px;
margin: 0;
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 2;
color: rgba(255, 255, 255, 0.5);
}
/* ================= META ================= */
.website-meta {
margin-top: 40px;
}
/* TECHNOLOGIES */
.website-technologies {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 30px;
}
.website-technologies span {
padding: 7px 12px;
border: 1px solid rgba(255, 255, 255, 0.13);
font-family: 'Inconsolata', monospace;
font-size: 10px;
letter-spacing: 1.5px;
color: rgba(255, 255, 255, 0.5);
transition:
border-color 0.3s ease,
color 0.3s ease;
}
.website-technologies span:hover {
border-color: rgba(255, 255, 255, 0.4);
border-radius: 5px;
color: #fff;
}
/* ================= LIVE BUTTON ================= */
.website-live-button {
display: inline-flex;
align-items: center;
gap: 15px;
padding: 13px 22px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 30px;
color: #fff;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 10px;
letter-spacing: 2px;
transition:
background 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
gap 0.3s ease;
}
.website-live-button span {
font-size: 16px;
}
.website-live-button:hover {
background: #fff;
color: #000;
border-color: #ffffff;
gap: 20px;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 768px) {
.websites-section {
padding: 90px 5%;
}
.websites-heading {
margin-bottom: 45px;
}
.websites-eyebrow {
font-size: 9px;
letter-spacing: 3px;
}
.websites-heading h2 {
font-size: 1.7rem;
letter-spacing: 2px;
}
.websites-heading p {
font-size: 12px;
line-height: 1.7;
}
.website-card-header {
height: 75px;
padding: 0 18px;
grid-template-columns: 45px 1fr 40px;
}
.website-number {
font-size: 11px;
}
.website-title {
font-size: 11px;
letter-spacing: 2px;
}
.website-toggle {
width: 30px;
height: 30px;
font-size: 17px;
}
.website-card-content {
display: block;
}
.website-card.active .website-card-content {
max-height: 1000px;
}
.website-visual {
min-height: 280px;
}
.visual-shape {
width: 130px;
height: 130px;
}
.visual-shape::before {
inset: 18px;
}
.visual-shape::after {
width: 48px;
height: 48px;
}
.visual-text {
bottom: 20px;
left: 20px;
font-size: 8px;
letter-spacing: 3px;
}
.website-info {
min-height: auto;
padding: 30px 22px;
}
.website-info h3 {
font-size: 1.3rem;
letter-spacing: 2px;
}
.website-info-main p {
font-size: 12px;
line-height: 1.8;
}
.website-meta {
margin-top: 30px;
}
.website-technologies span {
font-size: 9px;
padding: 6px 9px;
}
.website-live-button {
width: 100%;
justify-content: center;
padding: 13px;
}
}
/* =========================================================
DASIS CODES — THE FINAL DIMENSION
Monochrome / 3D / Cinematic / Responsive
========================================================= */
#contact.final-cta {
--cta-white: #f2f2f2;
--cta-silver: #bdbdbd;
--cta-muted: #858585;
--cta-dim: #505050;
position: relative;
isolation: isolate;
display: flex;
align-items: center;
justify-content: center;
min-height: 900px;
padding: 145px 28px 125px;
overflow: hidden;
background: linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(40, 40, 45, 0.85) 100%);
backdrop-filter: blur(12px);
/* border: 1px solid rgba(255, 255, 255, 0.08); */
color: var(--cta-white);
text-align: center;
perspective: 1400px;
contain: paint;
}
/* Atmospheric background */
#contact.final-cta .cta-grid {
position: absolute;
inset: 0;
z-index: -4;
pointer-events: none;
background-image:
linear-gradient(rgba(210, 210, 210, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(210, 210, 210, .045) 1px, transparent 1px);
background-size: 62px 62px;
-webkit-mask-image: radial-gradient(ellipse at 50% 47%, #000 0%, transparent 76%);
mask-image: radial-gradient(ellipse at 50% 47%, #000 0%, transparent 76%);
animation: cta-grid-drift 24s linear infinite;
}
#contact.final-cta .cta-vignette {
position: absolute;
inset: 0;
z-index: -3;
pointer-events: none;
background:
radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(0, 0, 0, .2) 42%, #030303 88%),
linear-gradient(180deg, #030303 0%, transparent 18%, transparent 80%, #030303 100%);
}
#contact.final-cta .cta-light-field {
position: absolute;
z-index: -3;
top: 3%;
left: 50%;
width: min(850px, 110vw);
aspect-ratio: 1;
transform: translateX(-50%);
pointer-events: none;
background: radial-gradient(ellipse,
rgba(220, 220, 220, .105) 0%,
rgba(140, 140, 140, .035) 32%,
transparent 68%);
filter: blur(12px);
animation: cta-light-breathe 8s ease-in-out infinite;
}
#contact.final-cta .cta-scanline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(240, 240, 240, .55), transparent);
box-shadow: 0 0 24px rgba(230, 230, 230, .12);
}
/* =========================================================
THE 3D REACTOR
========================================================= */
#contact.final-cta .cta-reactor {
position: absolute;
top: 45%;
left: 50%;
z-index: -1;
width: min(650px, 78vw);
aspect-ratio: 1;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
pointer-events: none;
opacity: .9;
will-change: transform;
}
#contact.final-cta .cta-reactor__halo {
position: absolute;
inset: 19%;
border-radius: 50%;
background: radial-gradient(circle,
rgba(235, 235, 235, .105) 0%,
rgba(170, 170, 170, .045) 28%,
transparent 69%);
filter: blur(18px);
animation: cta-halo-pulse 2.5s ease-in-out infinite;
}
#contact.final-cta .cta-reactor__ring {
position: absolute;
inset: 0;
border: 1px solid rgba(220, 220, 220, .23);
border-radius: 50%;
transform-style: preserve-3d;
backface-visibility: visible;
}
#contact.final-cta .cta-reactor__ring--outer {
inset: 3%;
border-color: rgba(220, 220, 220, .22);
box-shadow:
0 0 35px rgba(255, 255, 255, .025),
inset 0 0 32px rgba(255, 255, 255, .025);
animation: cta-ring-outer 22s linear infinite;
}
#contact.final-cta .cta-reactor__ring--middle {
inset: 14%;
border-color: rgba(230, 230, 230, .28);
box-shadow: 0 0 22px rgba(220, 220, 220, .035);
animation: cta-ring-middle 17s linear infinite;
}
#contact.final-cta .cta-reactor__ring--inner {
inset: 25%;
border-color: rgba(245, 245, 245, .35);
box-shadow:
0 0 24px rgba(230, 230, 230, .045),
inset 0 0 25px rgba(230, 230, 230, .04);
animation: cta-ring-inner 13s linear infinite;
}
#contact.final-cta .cta-reactor__node {
position: absolute;
top: 50%;
left: -4px;
width: 7px;
height: 7px;
border-radius: 50%;
background: #ededed;
box-shadow:
0 0 8px rgba(255, 255, 255, .95),
0 0 24px rgba(220, 220, 220, .5);
}
#contact.final-cta .cta-reactor__ring--middle .cta-reactor__node {
top: 14%;
left: auto;
right: 8%;
width: 5px;
height: 5px;
}
#contact.final-cta .cta-reactor__ring--inner .cta-reactor__node {
top: auto;
bottom: 10%;
left: 24%;
width: 4px;
height: 4px;
}
#contact.final-cta .cta-reactor__core {
position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 34%;
aspect-ratio: 1;
overflow: hidden;
border: 1px solid rgba(240, 240, 240, .26);
border-radius: 50%;
background:
radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .16), transparent 38%),
radial-gradient(circle at 50% 70%, #161616, #050505 68%);
box-shadow:
0 0 0 9px rgba(255, 255, 255, .012),
0 0 0 20px rgba(255, 255, 255, .009),
0 0 70px rgba(220, 220, 220, .07),
inset 0 1px 1px rgba(255, 255, 255, .22),
inset 0 -15px 30px rgba(0, 0, 0, .75);
transform: translate(-50%, -50%) translateZ(30px);
animation: cta-core-float 3s ease-in-out infinite;
}
#contact.final-cta .cta-reactor__core-shine {
position: absolute;
top: -45%;
left: -65%;
width: 60%;
height: 190%;
transform: rotate(32deg);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent);
animation: cta-core-shine 3s ease-in-out infinite;
}
/* #contact.final-cta .cta-reactor__core-mark {
position: relative;
font-family: 'Orbitron', sans-serif;
font-size: clamp(2.6rem, 6vw, 4.8rem);
font-weight: 700;
line-height: 1;
letter-spacing: -.12em;
color: transparent;
background: linear-gradient(150deg, #fff 10%, #aaa 45%, #f5f5f5 55%, #696969 100%);
-webkit-background-clip: text;
background-clip: text;
filter: drop-shadow(0 4px 14px rgba(255,255,255,.1));
}
#contact.final-cta .cta-reactor__core-mark span {
color: #f4f4f4;
}
#contact.final-cta .cta-reactor__core-caption {
position: relative;
margin-top: 10px;
font-family: 'Montserrat', sans-serif;
font-size: clamp(.38rem, .8vw, .5rem);
font-weight: 600;
letter-spacing: .22em;
color: #777;
} */
#contact.final-cta .cta-reactor__particle {
position: absolute;
display: block;
width: 3px;
height: 3px;
border-radius: 50%;
background: #eee;
box-shadow: 0 0 12px rgba(255, 255, 255, .85);
animation: cta-particle-pulse 3s ease-in-out infinite;
}
#contact.final-cta .cta-reactor__particle--one {
top: 20%;
left: 21%;
}
#contact.final-cta .cta-reactor__particle--two {
top: 31%;
right: 15%;
animation-delay: -1s;
}
#contact.final-cta .cta-reactor__particle--three {
right: 24%;
bottom: 17%;
animation-delay: -2s;
}
#contact.final-cta .cta-reactor__particle--four {
bottom: 26%;
left: 14%;
width: 2px;
height: 2px;
animation-delay: -.5s;
}
/* =========================================================
CONTENT & TYPOGRAPHY
========================================================= */
#contact.final-cta .cta-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1120px;
margin: 0 auto;
transform-style: preserve-3d;
}
#contact.final-cta .cta-eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
margin-bottom: 125px;
margin-top: -30px;
color: #bcbcbc;
font-family: 'Inconsolata', monospace;
font-size: 0.8rem;
font-weight: 400;
letter-spacing: .15em;
}
#contact.final-cta .cta-eyebrow__line {
width: clamp(20px, 4vw, 55px);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(230, 230, 230, .7));
}
#contact.final-cta .cta-eyebrow__line:last-child {
transform: rotate(180deg);
}
/* #contact.final-cta .cta-eyebrow__dot {
width: 4px;
height: 4px;
flex: 0 0 4px;
border-radius: 50%;
background: #e4e4e4;
box-shadow: 0 0 9px rgba(255,255,255,.5);
} */
#contact.final-cta .cta-heading-wrap {
position: relative;
transform: translateZ(25px);
}
#contact.final-cta .cta-overline {
margin: 0 0 18px;
color: #888;
font-family: 'Montserrat', sans-serif;
font-size: .64rem;
font-weight: 600;
letter-spacing: .38em;
}
#contact.final-cta .cta-heading {
/* margin: 0; */
font-family: 'Orbitron', sans-serif;
font-size: clamp(5.1rem, 6.1vw, 6.2rem);
font-weight: 700;
line-height: 1.02;
letter-spacing: 0.015em;
margin-top: 5px;
color: transparent;
background: linear-gradient(180deg,
#fff 0%,
#d7d7d7 23%,
#777 48%,
#eee 65%,
#999 82%,
#eee 100%);
-webkit-background-clip: text;
background-clip: text;
filter: drop-shadow(0 7px 22px rgba(230, 230, 230, .09));
}
#contact.final-cta .cta-heading__second,
#contact.final-cta .cta-heading__third {
display: block;
}
#contact.final-cta .cta-heading__second {
margin-top: 5px;
color: #d1d1d1;
}
#contact.final-cta .cta-heading__third {
margin-top: 5px;
color: transparent;
background: linear-gradient(180deg,
#fff 0%,
#d7d7d7 23%,
#777 48%,
#eee 65%,
#999 82%,
#eee 100%);
-webkit-background-clip: text;
background-clip: text;
filter: drop-shadow(0 7px 22px rgba(230, 230, 230, .09));
}
#contact.final-cta .cta-heading__period {
color: #f5f5f5;
-webkit-text-fill-color: #f5f5f5;
}
/* =========================================================
ROTATING TEXT CAROUSEL
========================================================= */
#contact.final-cta .cta-carousel {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 30px;
margin: 30px auto 0;
font-family: 'Montserrat', sans-serif;
font-size: clamp(.66rem, 1.2vw, .84rem);
font-weight: 600;
letter-spacing: .18em;
}
#contact.final-cta .cta-carousel__prefix {
flex: 0 0 auto;
color: #777;
}
#contact.final-cta .cta-carousel__window {
position: relative;
display: inline-block;
max-width: 100%;
overflow: hidden;
color: #e5e5e5;
}
#contact.final-cta .cta-carousel__text {
display: inline-block;
opacity: 1;
transform: translateY(0);
transition:
opacity .35s ease,
transform .45s cubic-bezier(.2, .7, .2, 1);
text-shadow: 0 0 22px rgba(230, 230, 230, .12);
}
#contact.final-cta .cta-carousel__text.is-changing {
opacity: 0;
transform: translateY(12px);
}
#contact.final-cta .cta-description {
max-width: 510px;
margin: 23px auto 35px;
color: #a2a2a2;
font-family: 'Montserrat', sans-serif;
font-size: clamp(.84rem, 1.15vw, .98rem);
font-weight: 400;
line-height: 1.9;
text-wrap: balance;
}
/* =========================================================
SIGNATURE CONTACT BUTTON
========================================================= */
#contact.final-cta .cta-action-wrap {
display: flex;
justify-content: center;
perspective: 900px;
}
#contact.final-cta .cta-button {
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 26px;
min-width: 292px;
min-height: 68px;
padding: 0 23px;
overflow: hidden;
border: 1px solid rgba(220, 220, 220, .45);
border-radius: 40px;
background: linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .012) 55%, rgba(255, 255, 255, .05));
color: #eee;
text-decoration: none;
font-family: 'Orbitron';
font-size: .79rem;
font-weight: 400;
letter-spacing: .17em;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .12),
0 14px 38px rgba(0, 0, 0, .35),
0 0 0 5px rgba(220, 220, 220, .015);
transform: perspective(700px) rotateX(0deg) translateY(0);
transition:
transform .35s cubic-bezier(.2, .8, .2, 1),
border-color .35s ease,
background .35s ease,
color .35s ease,
box-shadow .35s ease;
-webkit-tap-highlight-color: transparent;
}
#contact.final-cta .cta-button__index {
color: #777;
font-size: .62rem;
font-weight: 500;
letter-spacing: .05em;
transition: color .3s ease;
}
#contact.final-cta .cta-button__label {
position: relative;
z-index: 1;
white-space: nowrap;
}
#contact.final-cta .cta-button__arrow {
position: relative;
z-index: 1;
font-family: Arial, sans-serif;
font-size: 1.4rem;
font-weight: 400;
transition: transform .3s ease;
}
#contact.final-cta .cta-button__shine {
position: absolute;
top: -50%;
left: -80%;
z-index: -1;
width: 48%;
height: 200%;
transform: skewX(-24deg);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .24), transparent);
transition: left .65s ease;
pointer-events: none;
}
#contact.final-cta .cta-button:hover {
transform: perspective(700px) rotateX(3deg) translateY(-5px);
border-color: rgba(255, 255, 255, .85);
background: linear-gradient(135deg, #eee, #aaa 52%, #f6f6f6);
color: #080808;
box-shadow:
inset 0 1px 0 #fff,
0 18px 44px rgba(0, 0, 0, .48),
0 0 34px rgba(220, 220, 220, .13);
}
#contact.final-cta .cta-button:hover .cta-button__index {
color: #444;
}
#contact.final-cta .cta-button:hover .cta-button__arrow {
transform: translate(4px, -4px);
}
#contact.final-cta .cta-button:hover .cta-button__shine {
left: 140%;
}
#contact.final-cta .cta-button:focus-visible {
outline: 2px solid #f2f2f2;
outline-offset: 6px;
}
/* =========================================================
SIDE DETAILS & FOOTER
========================================================= */
#contact.final-cta .cta-rail {
position: absolute;
top: 50%;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
color: #696969;
font-family: 'Montserrat', sans-serif;
font-size: .53rem;
letter-spacing: .19em;
text-align: left;
pointer-events: none;
}
#contact.final-cta .cta-rail--left {
left: clamp(24px, 5vw, 80px);
transform: translateY(-10%);
}
#contact.final-cta .cta-rail--right {
right: clamp(24px, 5vw, 80px);
transform: translateY(-10%);
}
#contact.final-cta .cta-rail__number {
color: #b5b5b5;
font-size: .61rem;
}
#contact.final-cta .cta-rail__line {
width: 32px;
height: 1px;
background: linear-gradient(90deg, #999, transparent);
}
#contact.final-cta .cta-footer {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
margin-top: 43px;
color: #707070;
font-family: 'Montserrat', sans-serif;
font-size: .52rem;
font-weight: 600;
letter-spacing: .16em;
}
#contact.final-cta .cta-footer__status {
display: inline-flex;
align-items: center;
gap: 9px;
}
#contact.final-cta .cta-footer__status-dot {
width: 5px;
height: 5px;
flex: 0 0 5px;
border-radius: 50%;
background: #d8d8d8;
box-shadow: 0 0 10px rgba(240, 240, 240, .55);
animation: cta-status-pulse 2.8s ease-in-out infinite;
}
#contact.final-cta .cta-footer__separator {
width: 22px;
height: 1px;
background: #484848;
}
#contact.final-cta .cta-bottom {
position: absolute;
right: 0;
bottom: 32px;
left: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
pointer-events: none;
}
#contact.final-cta .cta-bottom__line {
width: min(115px, 18vw);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(200, 200, 200, .35));
}
#contact.final-cta .cta-bottom__line:last-child {
transform: rotate(180deg);
}
#contact.final-cta .cta-bottom__diamond {
width: 6px;
height: 6px;
border: 1px solid rgba(220, 220, 220, .65);
transform: rotate(45deg);
}
/* =========================================================
ANIMATIONS
========================================================= */
@keyframes cta-grid-drift {
from {
background-position: 0 0;
}
to {
background-position: 62px 62px;
}
}
@keyframes cta-light-breathe {
0%,
100% {
opacity: .7;
transform: translateX(-50%) scale(1);
}
50% {
opacity: 1;
transform: translateX(-50%) scale(1.08);
}
}
@keyframes cta-halo-pulse {
0%,
100% {
opacity: .65;
transform: scale(.94);
}
50% {
opacity: 1;
transform: scale(1.07);
}
}
@keyframes cta-ring-outer {
from {
transform: rotateX(67deg) rotateZ(0deg);
}
to {
transform: rotateX(67deg) rotateZ(360deg);
}
}
@keyframes cta-ring-middle {
from {
transform: rotateY(65deg) rotateZ(0deg);
}
to {
transform: rotateY(65deg) rotateZ(-360deg);
}
}
@keyframes cta-ring-inner {
from {
transform: rotateX(72deg) rotateZ(0deg);
}
to {
transform: rotateX(72deg) rotateZ(360deg);
}
}
@keyframes cta-core-float {
0%,
100% {
margin-top: 0;
}
50% {
margin-top: -8px;
}
}
@keyframes cta-core-shine {
0%,
20% {
left: -70%;
opacity: 0;
}
35% {
opacity: 1;
}
60%,
100% {
left: 130%;
opacity: 0;
}
}
@keyframes cta-particle-pulse {
0%,
100% {
opacity: .3;
transform: scale(.7);
}
50% {
opacity: 1;
transform: scale(1.4);
}
}
@keyframes cta-status-pulse {
0%,
100% {
opacity: .55;
}
50% {
opacity: 1;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1050px) {
#contact.final-cta {
min-height: 820px;
padding: 130px 28px 110px;
}
#contact.final-cta .cta-rail {
display: none;
}
#contact.final-cta .cta-reactor {
width: min(640px, 90vw);
}
#contact.final-cta .cta-heading {
font-size: clamp(3.2rem, 9vw, 6.6rem);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
#contact.final-cta {
min-height: 730px;
padding: 108px 20px 95px;
}
#contact.final-cta .cta-grid {
background-size: 42px 42px;
}
#contact.final-cta .cta-reactor {
top: 39%;
width: 118vw;
max-width: 500px;
opacity: .65;
}
#contact.final-cta .cta-reactor__ring--inner {
inset: 29%;
}
#contact.final-cta .cta-reactor__core {
width: 31%;
}
#contact.final-cta .cta-reactor__core-mark {
font-size: clamp(2.1rem, 10vw, 3.4rem);
}
#contact.final-cta .cta-reactor__core-caption {
font-size: .36rem;
letter-spacing: .13em;
}
#contact.final-cta .cta-eyebrow {
gap: 8px;
margin-bottom: 31px;
font-size: .5rem;
letter-spacing: .18em;
}
#contact.final-cta .cta-eyebrow__line {
width: 18px;
}
#contact.final-cta .cta-overline {
margin-bottom: 16px;
font-size: .52rem;
letter-spacing: .28em;
}
#contact.final-cta .cta-heading {
font-size: clamp(2.25rem, 9.8vw, 3.9rem);
line-height: 1.1;
letter-spacing: -.065em;
}
#contact.final-cta .cta-heading__second,
#contact.final-cta .cta-heading__third {
margin-top: 4px;
}
#contact.final-cta .cta-carousel {
flex-direction: column;
gap: 7px;
min-height: 44px;
margin-top: 26px;
font-size: .62rem;
letter-spacing: .12em;
}
#contact.final-cta .cta-carousel__window {
max-width: 100%;
}
#contact.final-cta .cta-description {
max-width: 340px;
margin: 22px auto 29px;
font-size: .8rem;
line-height: 1.85;
}
#contact.final-cta .cta-button {
width: min(100%, 325px);
min-width: 0;
min-height: 62px;
gap: 14px;
padding: 0 17px;
font-size: .62rem;
letter-spacing: .12em;
}
#contact.final-cta .cta-footer {
gap: 10px;
margin-top: 35px;
font-size: .43rem;
letter-spacing: .1em;
line-height: 1.8;
}
#contact.final-cta .cta-footer__separator {
width: 14px;
}
#contact.final-cta .cta-bottom {
bottom: 23px;
}
}
@media (max-width: 360px) {
#contact.final-cta {
padding-right: 15px;
padding-left: 15px;
}
#contact.final-cta .cta-heading {
font-size: 2.05rem;
}
#contact.final-cta .cta-eyebrow {
font-size: .46rem;
letter-spacing: .13em;
}
#contact.final-cta .cta-button {
gap: 9px;
padding: 0 12px;
font-size: .57rem;
}
#contact.final-cta .cta-footer {
font-size: .39rem;
}
}
/* Touch devices: avoid hover-only behavior */
@media (hover: none),
(pointer: coarse) {
#contact.final-cta .cta-button:hover {
transform: none;
}
}
/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
#contact.final-cta .cta-grid,
#contact.final-cta .cta-light-field,
#contact.final-cta .cta-reactor *,
#contact.final-cta .cta-footer__status-dot {
animation: none !important;
}
#contact.final-cta *,
#contact.final-cta *::before,
#contact.final-cta *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}
/* FOOTER */
/* =========================================================
DASIS CODES — CINEMATIC SIGNATURE FOOTER
Monochrome / Atmospheric / Floating Constellation
========================================================= */
.footer {
--footer-white: #f3f3f3;
--footer-silver: #c9c9c9;
--footer-muted: #999999;
--footer-line: rgba(255, 255, 255, 0.16);
--footer-pointer-x: 0px;
--footer-pointer-y: 0px;
--footer-rotate-x: 0deg;
--footer-rotate-y: 0deg;
--footer-light-x: 50%;
--footer-light-y: 40%;
--footer-light-opacity: 0;
position: relative;
isolation: isolate;
min-height: 680px;
padding: 0 clamp(1.25rem, 6vw, 6.5rem) 1.5rem;
overflow: hidden;
background: #050505;
color: var(--footer-white);
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-family: 'Montserrat', sans-serif;
}
/* =========================================================
BACKGROUND VIDEO
========================================================= */
.footer .footer-video {
position: absolute;
z-index: -3;
inset: -24px;
width: calc(100% + 48px);
height: calc(100% + 48px);
object-fit: cover;
object-position: center 50%;
filter:
grayscale(1) blur(20px) brightness(0.93) contrast(1.05);
transform: scale(1.035);
pointer-events: none;
}
/* Minimal darkening — let the footage breathe */
.footer .footer-overlay {
position: absolute;
z-index: -2;
inset: 0;
background:
radial-gradient(ellipse at 50% 43%,
rgba(0, 0, 0, 0.04) 0%,
rgba(0, 0, 0, 0.10) 43%,
rgba(0, 0, 0, 0.24) 100%),
linear-gradient(180deg,
rgba(0, 0, 0, 0.14) 0%,
rgba(0, 0, 0, 0.04) 36%,
rgba(0, 0, 0, 0.12) 66%,
rgba(0, 0, 0, 0.58) 100%);
pointer-events: none;
}
/* Soft atmospheric vignette */
.footer .footer-vignette {
position: absolute;
z-index: -1;
inset: 0;
background:
radial-gradient(ellipse at center,
transparent 28%,
rgba(0, 0, 0, 0.08) 58%,
rgba(0, 0, 0, 0.45) 100%);
pointer-events: none;
}
/* =========================================================
GIANT GHOSTED WORDMARK
========================================================= */
.footer .footer-ghost {
position: absolute;
z-index: 0;
top: 48%;
left: 50%;
width: max-content;
max-width: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
pointer-events: none;
user-select: none;
transform:
translate3d(calc(-50% + var(--footer-pointer-x)),
calc(-50% + var(--footer-pointer-y)),
0);
transform-origin: center;
will-change: transform;
}
.footer .footer-ghost span {
display: block;
font-family: 'Orbitron', sans-serif;
font-size: clamp(12rem, 27vw, 34rem);
font-weight: 900;
line-height: 0.76;
letter-spacing: -0.095em;
white-space: nowrap;
color: transparent;
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.12) 0%,
rgba(225, 225, 225, 0.065) 27%,
rgba(150, 150, 150, 0.025) 64%,
rgba(255, 255, 255, 0.085) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.035);
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.025),
0 25px 65px rgba(0, 0, 0, 0.18);
transition:
filter 500ms ease,
-webkit-text-stroke-color 500ms ease;
}
/* Pointer-driven perspective and metallic light */
.footer .footer-ghost {
perspective: 1200px;
transform:
perspective(1200px) translate3d(calc(-50% + var(--footer-pointer-x)),
calc(-50% + var(--footer-pointer-y)),
0) rotateX(var(--footer-rotate-x)) rotateY(var(--footer-rotate-y));
transform-style: preserve-3d;
transition: filter 400ms ease;
}
/* Atmospheric highlight across the ghost lettering */
.footer .footer-ghost::after {
content: "";
position: absolute;
inset: -8%;
background:
radial-gradient(ellipse at var(--footer-light-x) var(--footer-light-y),
rgba(255, 255, 255, 0.11) 0%,
rgba(220, 220, 220, 0.045) 18%,
transparent 48%);
opacity: var(--footer-light-opacity);
mix-blend-mode: screen;
pointer-events: none;
transition: opacity 350ms ease;
}
.footer .footer-ghost.is-active span {
-webkit-text-stroke-color: rgba(255, 255, 255, 0.065);
filter:
drop-shadow(0 0 12px rgba(255, 255, 255, 0.035));
}
/* =========================================================
SUBTLE LIGHT SWEEP
========================================================= */
.footer .footer-light-sweep {
position: absolute;
z-index: 1;
top: 0;
left: -30%;
width: 22%;
height: 1px;
background:
linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.75),
transparent);
box-shadow: 0 0 14px rgba(255, 255, 255, 0.12);
animation: footerLightSweep 11s linear infinite;
pointer-events: none;
}
@keyframes footerLightSweep {
from {
left: -30%;
}
to {
left: 110%;
}
}
/* =========================================================
FOREGROUND CONTENT
========================================================= */
.footer .footer-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1500px;
margin: 0 auto;
}
.footer .footer-stage {
position: relative;
min-height: 575px;
display: flex;
align-items: center;
justify-content: center;
}
/* =========================================================
CENTRAL BRAND
========================================================= */
.footer .footer-center {
position: relative;
z-index: 3;
width: min(100%, 760px);
padding: 3rem 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.footer .footer-eyebrow {
/* margin: 0 0 1.25rem; */
margin-top: 100px;
margin-bottom: 30px;
color: rgba(230, 230, 230, 0.77);
font-size: 0.61rem;
font-weight: 600;
letter-spacing: 0.24em;
line-height: 1.8;
text-transform: uppercase;
}
.footer .footer-eyebrow span {
margin: 0 0.45rem;
color: #c7c7c7;
}
/* Main metallic wordmark */
.footer .footer-wordmark {
position: relative;
display: inline-block;
max-width: 100%;
color: transparent;
text-decoration: none;
font-family: 'Orbitron', sans-serif;
font-size: clamp(2.7rem, 6.2vw, 5.8rem);
font-weight: 500;
line-height: 1.16;
letter-spacing: -0.065em;
color: transparent;
background: linear-gradient(180deg,
#fff 0%,
#d7d7d7 23%,
#777 48%,
#eee 65%,
#999 82%,
#eee 100%);
-webkit-background-clip: text;
background-clip: text;
background-size: 240% 100%;
background-position: 100% 50%;
filter: drop-shadow(0 3px 18px rgba(255, 255, 255, 0.055));
transition:
background-position 850ms ease,
filter 450ms ease,
transform 450ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
.footer .footer-wordmark:hover {
background-position: 0% 50%;
filter:
drop-shadow(0 0 12px rgba(255, 255, 255, 0.12)) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.25));
transform: translateY(-2px);
}
.footer .footer-wordmark:focus-visible {
outline: 1px solid #e0e0e0;
outline-offset: 9px;
border-radius: 2px;
}
.footer .footer-wordmark-line {
display: inline-block;
}
.footer .footer-wordmark-space {
display: inline;
}
/* Fine silver line */
.footer .footer-brand-rule {
position: relative;
overflow: hidden;
width: min(220px, 48%);
height: 1px;
margin: 1.4rem 0 1.15rem;
background: rgba(255, 255, 255, 0.12);
}
.footer .footer-brand-rule span {
position: absolute;
inset: 0;
background:
linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.92),
transparent);
transform: translateX(-100%);
animation: footerRuleShimmer 6s ease-in-out infinite;
}
@keyframes footerRuleShimmer {
0%,
20% {
transform: translateX(-100%);
}
70%,
100% {
transform: translateX(100%);
}
}
/* Brand signature */
.footer .footer-brand-line {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin: 0;
color: #d1d1d1;
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.19em;
}
.footer .footer-brand-line span {
color: #858585;
}
.footer .footer-brand-description {
margin: 1rem 0 1.45rem;
color: rgba(230, 230, 230, 0.931);
font-size: 0.8rem;
font-family: 'Orbitron';
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.035em;
}
/* =========================================================
SOCIAL LINKS
========================================================= */
.footer .footer-socials {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
margin-bottom: 40px;
}
.footer .footer-socials a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
color: #e0e0e0;
background: rgba(0, 0, 0, 0.12);
font-size: 1.02rem;
text-decoration: none;
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
transition:
color 300ms ease,
border-color 300ms ease,
background 300ms ease,
box-shadow 300ms ease,
transform 300ms ease;
}
.footer .footer-socials a:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.65);
background: rgba(255, 255, 255, 0.09);
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25);
transform: translateY(-4px);
}
.footer .footer-socials a:focus-visible {
outline: 1px solid #fff;
outline-offset: 5px;
}
/* =========================================================
FLOATING NAVIGATION CONSTELLATION
========================================================= */
.footer .footer-nav {
position: absolute;
z-index: 4;
inset: 0;
pointer-events: none;
}
.footer .footer-nav-link {
position: absolute;
display: inline-flex;
align-items: center;
gap: 0.35rem;
width: max-content;
max-width: 165px;
padding: 0.65rem 0.15rem;
color: rgba(235, 235, 235, 0.957);
font-family: 'Inconsolata', monospace;
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.14em;
text-decoration: none;
white-space: nowrap;
pointer-events: auto;
animation: footerLinkFloat 7s ease-in-out infinite;
animation-delay: var(--float-delay, 0s);
transition:
color 280ms ease,
text-shadow 280ms ease,
border-color 280ms ease;
}
/* Organic, deliberately art-directed positions */
/* ==========================================================================
SCATTERED BUT ORDERED FOOTER LINKS (Top-Left to Bottom-Right Flow)
========================================================================== */
/* 1. HOME (Top Left) */
.footer .footer-nav-link:nth-child(1) {
top: 20%;
left: 8%;
--float-delay: -1.2s;
--float-distance: 7px;
}
/* 2. ABOUT (Upper Middle-Left) */
.footer .footer-nav-link:nth-child(2) {
top: 15%;
left: 28%;
--float-delay: -3.8s;
--float-distance: 9px;
}
/* 3. SKILLS (Top Center/Right) */
.footer .footer-nav-link:nth-child(3) {
top: 18%;
right: 32%;
--float-delay: -2.5s;
--float-distance: 6px;
}
/* 4. PROJECTS (Upper Far-Right) */
.footer .footer-nav-link:nth-child(4) {
top: 18%;
right: 10%;
--float-delay: -4.4s;
--float-distance: 8px;
}
/* 5. WORKS (True Center-Left) */
.footer .footer-nav-link:nth-child(5) {
top: 45%;
left: 3%;
--float-delay: -2s;
--float-distance: 7px;
}
/* 6. SERVICES (True Center-Right) */
.footer .footer-nav-link:nth-child(6) {
top: 45%;
right: 5%;
--float-delay: -5s;
--float-distance: 9px;
}
/* 7. TOOLS (Lower Mid-Left) */
.footer .footer-nav-link:nth-child(7) {
bottom: 25%;
left: 12%;
--float-delay: -1.8s;
--float-distance: 7px;
}
/* 8. REVIEWS (Lower Mid-Right) */
.footer .footer-nav-link:nth-child(8) {
bottom: 22%;
right: 15%;
--float-delay: -3.2s;
--float-distance: 6px;
}
/* 9. CONTACT (Bottom Center-ish) */
.footer .footer-nav-link:nth-child(9) {
top: 92%;
bottom: 12%;
left: 48%;
--float-delay: -4.8s;
--float-distance: 8px;
}
@keyframes footerLinkFloat {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform:
translate3d(0, calc(var(--float-distance, 7px) * -1), 0);
}
}
/* Animated underline */
.footer .footer-nav-link::after {
content: "";
position: absolute;
right: 0;
bottom: 3px;
left: 0;
height: 1px;
background:
linear-gradient(90deg,
transparent,
#f0f0f0,
transparent);
transform: scaleX(0);
transform-origin: center;
transition: transform 300ms ease;
}
.footer .footer-nav-link:hover,
.footer .footer-nav-link:focus-visible {
color: #fff;
text-shadow: 0 0 14px rgba(255, 255, 255, 0.15);
}
.footer .footer-nav-link:hover::after,
.footer .footer-nav-link:focus-visible::after {
transform: scaleX(1);
}
.footer .footer-nav-link:focus-visible {
outline: 1px solid rgba(255, 255, 255, 0.7);
outline-offset: 5px;
}
/* Contact gets distinction through typography, not neon */
.footer .footer-nav-contact {
color: #f4f4f4;
}
.footer .footer-nav-contact span {
display: inline-block;
transition: transform 280ms ease;
}
.footer .footer-nav-contact:hover span {
transform: translate(3px, -3px);
}
/* =========================================================
SMALL EDGE DETAILS
========================================================= */
.footer .footer-coordinate {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
gap: 0.55rem;
color: rgba(225, 225, 225, 0.48);
font-size: 0.52rem;
font-weight: 600;
letter-spacing: 0.14em;
pointer-events: none;
}
.footer .footer-coordinate-left {
left: 0;
bottom: 2.1rem;
}
.footer .footer-coordinate-right {
right: 0;
bottom: 2.1rem;
}
.footer .footer-coordinate-right span {
color: #aaa;
}
.footer .footer-coordinate-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #c8c8c8;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}
/* =========================================================
BOTTOM BAR
========================================================= */
.footer .footer-bottom {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1.5rem;
min-height: 70px;
padding-top: 1rem;
border-top: 1px solid var(--footer-line);
}
.footer .footer-copyright,
.footer .footer-bottom-note {
margin: 0;
color: rgba(225, 225, 225, 0.855);
font-size: 0.63rem;
font-weight: 500;
font-family: "Inconsolata", monospace;
letter-spacing: 0.11em;
line-height: 1.8;
}
.footer .footer-bottom-note {
text-align: center;
}
.footer .footer-back-top {
display: inline-flex;
align-items: center;
justify-self: end;
gap: 0.75rem;
color: #c8c8c8;
font-size: 0.68rem;
font-weight: 600;
font-family: "Inconsolata", monospace;
letter-spacing: 0.12em;
text-decoration: none;
white-space: nowrap;
transition: color 250ms ease;
}
.footer .footer-back-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
color: #ededed;
background: rgba(0, 0, 0, 0.1);
font-size: 1.1rem;
transition:
color 300ms ease,
background 300ms ease,
border-color 300ms ease,
transform 300ms ease;
}
.footer .footer-back-top:hover {
color: #fff;
}
.footer .footer-back-top:hover .footer-back-circle {
color: #fff;
border-color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.08);
transform: translateY(-3px);
}
.footer .footer-back-top:focus-visible {
outline: 1px solid #fff;
outline-offset: 5px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.footer {
padding-right: 2rem;
padding-left: 2rem;
}
.footer .footer-stage {
min-height: 610px;
}
.footer .footer-ghost span {
font-size: clamp(8rem, 25vw, 16rem);
}
.footer .footer-nav-link {
font-size: 0.59rem;
letter-spacing: 0.09em;
}
.footer .footer-nav-link:nth-child(1) {
left: 8%;
}
.footer .footer-nav-link:nth-child(2) {
left: 2%;
}
.footer .footer-nav-link:nth-child(3) {
right: 8%;
}
.footer .footer-nav-link:nth-child(4) {
left: 0;
}
.footer .footer-nav-link:nth-child(5) {
left: 5%;
}
.footer .footer-nav-link:nth-child(6) {
right: 5%;
}
.footer .footer-nav-link:nth-child(7) {
right: 0;
}
.footer .footer-coordinate {
font-size: 0.46rem;
}
}
/* =========================================================
MOBILE — RECOMPOSE, DON'T JUST SHRINK
========================================================= */
@media (max-width: 650px) {
.footer {
min-height: auto;
padding: 0 1.2rem 1rem;
}
.footer .footer-video {
filter:
grayscale(1) blur(7px) brightness(0.7) contrast(1.03);
}
.footer .footer-overlay {
background:
radial-gradient(ellipse at 50% 30%,
rgba(0, 0, 0, 0.08),
rgba(0, 0, 0, 0.28) 75%),
linear-gradient(180deg,
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.35) 60%,
rgba(0, 0, 0, 0.7));
}
.footer .footer-vignette {
background:
radial-gradient(ellipse at center,
transparent 25%,
rgba(0, 0, 0, 0.35) 100%);
}
.footer .footer-stage {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
min-height: auto;
padding: 4.5rem 0 2rem;
}
.footer .footer-ghost {
top: 25%;
width: max-content;
max-width: none;
}
.footer .footer-ghost span {
font-size: 28vw;
line-height: 0.9;
letter-spacing: -0.09em;
-webkit-text-stroke-width: 0.7px;
}
.footer .footer-center {
order: 1;
width: 100%;
padding: 2rem 0 2.5rem;
}
.footer .footer-eyebrow {
font-size: 0.52rem;
letter-spacing: 0.15em;
}
.footer .footer-wordmark {
font-size: clamp(2.2rem, 9.3vw, 3.7rem);
letter-spacing: -0.065em;
}
.footer .footer-brand-rule {
margin: 1.1rem 0 1rem;
}
.footer .footer-brand-line {
font-size: 0.58rem;
letter-spacing: 0.12em;
}
.footer .footer-brand-description {
font-size: 0.75rem;
}
/* Navigation becomes a deliberate constellation grid */
.footer .footer-nav {
position: relative;
inset: auto;
z-index: 4;
order: 2;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.65rem 1.2rem;
padding: 1.5rem 0 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.14);
pointer-events: auto;
}
.footer .footer-nav-link,
.footer .footer-nav-link:nth-child(n) {
position: relative;
inset: auto;
display: inline-flex;
padding: 0.45rem 0;
font-size: 0.61rem;
letter-spacing: 0.07em;
animation-duration: 8s;
}
.footer .footer-coordinate {
display: none;
}
.footer .footer-bottom {
grid-template-columns: 1fr auto;
gap: 1rem;
min-height: auto;
padding-top: 1rem;
}
.footer .footer-copyright {
max-width: 230px;
font-size: 0.48rem;
letter-spacing: 0.06em;
}
.footer .footer-bottom-note {
display: none;
}
.footer .footer-back-top {
gap: 0.4rem;
font-size: 0.49rem;
letter-spacing: 0.05em;
}
.footer .footer-back-circle {
width: 32px;
height: 32px;
font-size: 1rem;
}
}
/* =========================================================
VERY SMALL SCREENS
========================================================= */
@media (max-width: 360px) {
.footer {
padding-right: 0.9rem;
padding-left: 0.9rem;
}
.footer .footer-eyebrow {
font-size: 0.46rem;
letter-spacing: 0.1em;
}
.footer .footer-wordmark {
font-size: 2.05rem;
}
.footer .footer-nav {
gap: 0.5rem 0.85rem;
}
.footer .footer-nav-link,
.footer .footer-nav-link:nth-child(n) {
font-size: 0.55rem;
}
.footer .footer-back-top>span:first-child {
display: none;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.footer *,
.footer *::before,
.footer *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
.footer .footer-ghost {
transform: translate(-50%, -50%) !important;
}
.footer .footer-ghost-depth {
transform: none !important;
}
.footer .footer-nav-link {
transform: none !important;
}
.footer .footer-brand-rule span {
transform: none;
}
}
/* CONTACT PAGE */
/* =====================================================
DASIS CODES — CONTACT PAGE
UNIFIED COMPOSITION
===================================================== */
/* PAGE BACKGROUND */
.contact-page {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 100vh;
padding: 3rem 2rem 7rem;
background:
radial-gradient(ellipse at top left,
rgba(175, 175, 185, 0.13),
transparent 42%),
radial-gradient(ellipse at bottom right,
rgba(155, 155, 170, 0.11),
transparent 42%),
#050505;
color: rgb(255, 255, 255);
}
/* UNIFIED OUTER FRAME */
.contact-composition {
position: relative;
max-width: 1250px;
margin: 0 auto;
overflow: hidden;
border-radius: 10px;
background: linear-gradient(
110deg,
rgba(10, 10, 10, 0.98) 0%,
rgba(15, 15, 15, 0.98) 35%,
rgba(70, 70, 70, 0.4) 48%,
rgba(110, 110, 110, 0.5) 50%,
rgba(40, 40, 40, 0.6) 53%,
rgba(15, 15, 15, 0.98) 65%,
rgba(10, 10, 10, 0.98) 100%
);
background-size: 200% 100%;
/* Smooth, infinite sweeping animation */
animation: metallicSweep 16s ease-in-out infinite alternate;
background-blend-mode: overlay;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -1px 0 rgba(0, 0, 0, 0.9),
0 20px 50px rgba(0, 0, 0, 0.8);
}
@keyframes metallicSweep {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
/* =====================================================
TOP INTRODUCTION
===================================================== */
.contact-hero {
max-width: 1050px;
margin: 0 auto;
padding: 4.5rem 3rem 4rem;
text-align: center;
border-bottom: 1px solid rgba(192, 192, 192, 0.3);
}
.contact-eyebrow,
.contact-label,
.detail-label {
display: block;
font-family: 'Inconsolata', monospace;
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.25rem;
color: #dadada;
}
.contact-main-heading {
margin: 1.8rem 0 2rem;
font-family: 'Orbitron' ;
font-size: clamp(2.8rem, 6.0vw, 6.0rem);
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.045em;
background: linear-gradient(115deg,
#777,
#f5f5f5 25%,
#a5a5a5 48%,
#fff 65%,
#777);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: metallicHeading 8s linear infinite;
}
.contact-main-heading span {
display: block;
}
@keyframes metallicHeading {
to {
background-position: 200% center;
}
}
.contact-heading-line {
width: 90px;
height: 1px;
margin: 0 auto 1.8rem;
background: linear-gradient(90deg,
transparent,
silver,
transparent);
}
.contact-intro-fl{
font-family: 'Orbitron';
font-size: 0.9rem;
font-weight: 400;
text-align: center;
color: rgba(255, 255, 255, 0.699);
margin-bottom: 9px;
}
.contact-intro-text {
max-width: 650px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
line-height: 1.9;
color: #858585;
}
/* =====================================================
LOWER CONTACT AREA
===================================================== */
.contact-main {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 0;
align-items: stretch;
}
/* LEFT PANEL */
.contact-art-panel {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
padding: 2.2rem;
overflow: hidden;
background:
radial-gradient(ellipse at 50% 35%,
rgba(180, 180, 180, 0.055),
transparent 55%);
border-right: 1px solid rgba(192, 192, 192, 0.3);
}
/* RIGHT PANEL */
.contact-form-panel {
position: relative;
min-width: 0;
padding: 2.5rem;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
transition: background 0.4s ease;
}
.contact-form-panel:hover {
background: rgba(255, 255, 255, 0.012);
border: none;
box-shadow: none;
}
/* =====================================================
LEFT PANEL HEADER
===================================================== */
.art-panel-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.art-status {
font-family: 'Montserrat', sans-serif;
font-size: 0.52rem;
letter-spacing: 0.12rem;
color: #666;
}
/* =====================================================
CHROME STAGE
===================================================== */
.chrome-stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 350px;
margin: 1rem 0;
perspective: 1000px;
isolation: isolate;
}
.chrome-stage::before {
content: "";
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: rgba(210, 210, 210, 0.08);
filter: blur(75px);
animation: chromeGlow 6s ease-in-out infinite alternate;
}
@keyframes chromeGlow {
from {
transform: scale(0.8);
opacity: 0.4;
}
to {
transform: scale(1.3);
opacity: 0.9;
}
}
/* ORBITS */
.chrome-orbit {
position: absolute;
width: 290px;
height: 125px;
border: 1px solid rgba(210, 210, 210, 0.16);
border-radius: 50%;
pointer-events: none;
}
.orbit-one {
transform: rotate(-32deg);
animation: orbitRotate 18s linear infinite;
}
.orbit-two {
width: 250px;
height: 175px;
border-color: rgba(210, 210, 210, 0.09);
transform: rotate(55deg);
animation: orbitRotateReverse 24s linear infinite;
}
@keyframes orbitRotate {
from {
transform: rotate(-32deg);
}
to {
transform: rotate(328deg);
}
}
@keyframes orbitRotateReverse {
from {
transform: rotate(55deg);
}
to {
transform: rotate(-305deg);
}
}
/* MAIN CHROME OBJECT */
.chrome-art {
position: relative;
width: 190px;
height: 190px;
border-radius: 43% 57% 61% 39% / 42% 43% 57% 58%;
background:
radial-gradient(ellipse at 28% 20%,
#fff 0%,
#d9d9d9 7%,
transparent 25%),
radial-gradient(ellipse at 72% 78%,
#222 0%,
#090909 25%,
transparent 48%),
linear-gradient(135deg,
#f5f5f5 0%,
#777 13%,
#e9e9e9 25%,
#292929 42%,
#bcbcbc 57%,
#fff 68%,
#4b4b4b 83%,
#ddd 100%);
box-shadow:
inset -18px -20px 35px rgba(0, 0, 0, 0.8),
inset 12px 10px 25px rgba(255, 255, 255, 0.65),
inset 0 0 20px rgba(255, 255, 255, 0.25),
0 20px 65px rgba(0, 0, 0, 0.8);
filter: contrast(1.15);
animation:
chromeFloat 7s ease-in-out infinite,
chromeMorph 9s ease-in-out infinite alternate;
transform-style: preserve-3d;
}
/* LIQUID FORMS */
.chrome-liquid {
position: absolute;
display: block;
border-radius: 50%;
background: linear-gradient(145deg,
#fff 0%,
#999 17%,
#272727 36%,
#dedede 52%,
#555 70%,
#f2f2f2 88%,
#555 100%);
box-shadow:
inset 5px 5px 12px rgba(255, 255, 255, 0.6),
inset -8px -8px 15px rgba(0, 0, 0, 0.75),
0 0 20px rgba(255, 255, 255, 0.08);
}
.liquid-one {
width: 90px;
height: 115px;
top: -27px;
right: 5px;
transform: rotate(38deg);
animation: liquidOne 8s ease-in-out infinite alternate;
}
.liquid-two {
width: 85px;
height: 65px;
bottom: -17px;
left: -20px;
transform: rotate(-35deg);
animation: liquidTwo 7s ease-in-out infinite alternate;
}
.liquid-three {
width: 60px;
height: 75px;
top: 55px;
left: -29px;
transform: rotate(25deg);
animation: liquidThree 9s ease-in-out infinite alternate;
}
.chrome-highlight {
position: absolute;
top: 13%;
left: 19%;
width: 65px;
height: 16px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
filter: blur(9px);
transform: rotate(-42deg);
}
.chrome-shadow {
position: absolute;
bottom: 30px;
width: 160px;
height: 25px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.9);
filter: blur(17px);
animation: shadowFloat 7s ease-in-out infinite;
}
/* SCULPTURE ANIMATIONS */
@keyframes chromeFloat {
0%,
100% {
transform: translateY(0) rotateX(-8deg) rotateY(-12deg);
}
50% {
transform: translateY(-17px) rotateX(8deg) rotateY(12deg);
}
}
@keyframes chromeMorph {
0% {
border-radius: 43% 57% 61% 39% / 42% 43% 57% 58%;
}
50% {
border-radius: 58% 42% 38% 62% / 54% 61% 39% 46%;
}
100% {
border-radius: 35% 65% 54% 46% / 62% 39% 61% 38%;
}
}
@keyframes liquidOne {
to {
transform: translate(9px, -8px) rotate(55deg);
}
}
@keyframes liquidTwo {
to {
transform: translate(-7px, 8px) rotate(-50deg);
}
}
@keyframes liquidThree {
to {
transform: translate(5px, -9px) rotate(45deg);
}
}
@keyframes shadowFloat {
0%,
100% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(0.75);
opacity: 0.4;
}
}
/* =====================================================
LEFT PANEL DETAILS
===================================================== */
.art-caption {
display: flex;
justify-content: space-between;
padding: 1rem 0;
border-top: 1px solid rgba(192, 192, 192, 0.2);
border-bottom: 1px solid rgba(192, 192, 192, 0.2);
}
.art-caption-number,
.art-caption-text {
font-family: 'Orbitron', sans-serif;
font-size: 0.58rem;
letter-spacing: 0.12rem;
color: #777;
}
.contact-art-description {
margin: 2rem 0 1.5rem;
}
.contact-art-description h2 {
margin: 0 0 1rem;
font-family: 'Orbitron', sans-serif;
font-size: clamp(1.6rem, 3vw, 2.3rem);
line-height: 1.35;
color: #e5e5e5;
}
.contact-art-description p {
max-width: 400px;
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 0.8rem;
line-height: 1.8;
color: #777;
}
/* DIRECT CONTACT DETAILS */
.contact-direct-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: auto;
padding-top: 1.5rem;
border-top: 1px solid rgba(192, 192, 192, 0.2);
}
.direct-detail .detail-label {
margin-bottom: 0.7rem;
}
.direct-detail a,
.direct-detail p {
display: block;
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 0.72rem;
color: #aaa;
text-decoration: none;
overflow-wrap: anywhere;
transition: color 0.3s ease;
}
.direct-detail a:hover {
color: white;
}
/* SOCIALS */
.contact-page-socials {
display: flex;
gap: 0.8rem;
margin-top: 1.7rem;
}
.contact-social {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid rgba(192, 192, 192, 0.35);
border-radius: 50%;
color: silver;
text-decoration: none;
transition: all 0.35s ease;
}
.contact-social:hover {
background: silver;
color: #080808;
border-color: silver;
box-shadow: 0 0 20px rgba(192, 192, 192, 0.25);
transform: translateY(-4px);
}
/* =====================================================
FORM
===================================================== */
.form-header {
margin-bottom: 2.5rem;
}
.form-header h2 {
margin: 1.2rem 0 0.8rem;
font-family: 'Orbitron', sans-serif;
font-size: clamp(1.5rem, 3vw, 2.2rem);
font-weight: 500;
color: #e8e8e8;
}
.form-header h2 span {
color: #888;
}
.form-header p {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 0.8rem;
line-height: 1.8;
color: #777;
}
.premium-contact-form {
display: flex;
flex-direction: column;
gap: 1.8rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.2rem;
}
.form-group {
display: flex;
flex-direction: column;
min-width: 0;
gap: 0.75rem;
}
.form-group label {
font-family: 'Montserrat', sans-serif;
font-size: 0.63rem;
font-weight: 500;
letter-spacing: 0.17rem;
color: #888;
}
.form-group input,
.form-group textarea {
width: 100%;
box-sizing: border-box;
padding: 1rem 1.1rem;
border: 1px solid rgba(192, 192, 192, 0.25);
border-radius: 3px;
background: rgba(0, 0, 0, 0.55);
color: #ddd;
font-family: 'Montserrat', sans-serif;
font-size: 0.8rem;
outline: none;
transition:
border-color 0.3s ease,
background 0.3s ease,
box-shadow 0.3s ease;
}
.form-group textarea {
min-height: 165px;
resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #484848;
}
.form-group input:focus,
.form-group textarea:focus {
border-color: rgba(220, 220, 220, 0.8);
background: rgba(255, 255, 255, 0.025);
box-shadow: 0 0 16px rgba(192, 192, 192, 0.08);
}
/* SUBMIT BUTTON */
.form-submit {
display: flex;
justify-content: flex-end;
margin-top: 0.5rem;
}
.contact-submit {
display: inline-flex;
align-items: center;
justify-content: space-between;
min-width: 190px;
gap: 2rem;
padding: 1rem 1.3rem;
border: 1px solid #aaa;
border-radius: 3px;
background: transparent;
color: #ddd;
font-family: 'Montserrat', sans-serif;
font-size: 0.67rem;
font-weight: 600;
letter-spacing: 0.14rem;
cursor: pointer;
transition: all 0.35s ease;
}
.submit-arrow {
font-size: 1.1rem;
transition: transform 0.3s ease;
}
.contact-submit:hover {
background: #ddd;
color: #080808;
border-color: #ddd;
box-shadow: 0 0 25px rgba(192, 192, 192, 0.2);
}
.contact-submit:hover .submit-arrow {
transform: translate(4px, -4px);
}
/* Base styles for the button */
/* Base styles for the button */
.btn.live {
border-radius: 30px;
max-width: 200px;
width: 100%;
display: inline-block;
}
/* Align the button wrapper on desktop */
.form-submit {
display: flex;
justify-content: flex-end; /* Pushes the button to the right cleanly without hardcoded margins */
}
.form-footer-note {
display: flex;
align-items: center;
gap: 0.7rem;
margin-top: -55px;
font-family: 'Montserrat', sans-serif;
font-size: 0.55rem;
letter-spacing: 0.12rem;
color: #7a7979;
}
.form-footer-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #aaa;
box-shadow: 0 0 8px rgba(220, 220, 220, 0.5);
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 950px) {
.contact-main {
grid-template-columns: 1fr 1fr;
}
.contact-art-panel,
.contact-form-panel {
padding: 1.5rem;
}
.chrome-stage {
min-height: 300px;
}
.chrome-art {
width: 155px;
height: 155px;
}
.chrome-orbit {
width: 235px;
height: 105px;
}
.orbit-two {
width: 210px;
height: 145px;
}
.contact-direct-details {
grid-template-columns: 1fr;
gap: 1.2rem;
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 768px) {
.contact-page {
padding: 2rem 1rem 4rem;
}
.contact-hero {
padding: 3.5rem 1.3rem;
}
.contact-main-heading {
margin: 1.5rem 0;
font-size: clamp(2.3rem, 10vw, 4.2rem);
line-height: 1.15;
}
.contact-intro-text {
font-size: 0.78rem;
line-height: 1.9;
}
.contact-main {
grid-template-columns: 1fr;
}
.contact-art-panel {
padding: 1.5rem;
border-right: none;
border-bottom: 1px solid rgba(192, 192, 192, 0.3);
}
.chrome-stage {
min-height: 290px;
}
.chrome-art {
width: 165px;
height: 165px;
}
.chrome-orbit {
width: 250px;
height: 110px;
}
.orbit-two {
width: 220px;
height: 150px;
}
.contact-direct-details {
grid-template-columns: 1fr 1fr;
}
.contact-form-panel {
padding: 2rem 1.5rem;
}
.form-header {
margin-bottom: 2rem;
}
.form-row {
grid-template-columns: 1fr;
gap: 1.8rem;
}
.form-submit {
display: center;
justify-content: center;
}
.form-footer-note{
margin-top: 17px;
}
.contact-submit {
width: 100%;
}
.btn.live {
max-width: 100%; /* Allows it to stretch to full width on mobile if desired */
width: 100%;
}
}
/* =====================================================
SMALL MOBILE
===================================================== */
@media (max-width: 420px) {
.contact-page {
padding: 1.5rem 0.7rem 3rem;
}
.contact-hero {
padding: 3rem 1rem;
}
.contact-main-heading {
font-size: clamp(2rem, 9.5vw, 2.8rem);
}
.art-panel-heading {
align-items: flex-start;
flex-direction: column;
gap: 0.7rem;
}
.chrome-stage {
min-height: 255px;
}
.chrome-art {
width: 145px;
height: 145px;
}
.chrome-orbit {
width: 215px;
height: 95px;
}
.orbit-two {
width: 195px;
height: 130px;
}
.contact-direct-details {
grid-template-columns: 1fr;
}
.contact-form-panel {
padding: 1.5rem 1.2rem;
}
}
/* =====================================================
REDUCED MOTION
===================================================== */
@media (prefers-reduced-motion: reduce) {
.contact-page *,
.contact-page *::before,
.contact-page *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
/* CURSOR */
/* =====================================================
DASIS CODES — CUSTOM CURSOR ENGINE
Pearl Cursor • Silver Dust • Interactive States
===================================================== */
/* -----------------------------------------------------
1. DESKTOP CURSOR
----------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
body.dc-custom-cursor {
cursor: none;
}
body.dc-custom-cursor a,
body.dc-custom-cursor button,
body.dc-custom-cursor [role="button"],
body.dc-custom-cursor input[type="submit"],
body.dc-custom-cursor input[type="button"],
body.dc-custom-cursor select,
body.dc-custom-cursor label[for] {
cursor: none !important;
}
/* Main cursor container */
#dc-cursor {
position: fixed;
top: 0;
left: 0;
z-index: 100000;
width: 0;
height: 0;
pointer-events: none;
opacity: 0;
mix-blend-mode: difference;
will-change: transform;
transition: opacity 180ms ease;
}
#dc-cursor.is-visible {
opacity: 1;
}
/* Pearl center */
#dc-cursor .dc-cursor__dot {
position: absolute;
top: -4px;
left: -4px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 9px rgba(255, 255, 255, 0.45);
transition:
width 220ms ease,
height 220ms ease,
top 220ms ease,
left 220ms ease,
box-shadow 220ms ease;
}
/* Interactive ring */
#dc-cursor .dc-cursor__ring {
position: absolute;
top: -17px;
left: -17px;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
opacity: 0;
transform: scale(0.55);
transition:
opacity 220ms ease,
transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
width 220ms ease,
height 220ms ease,
top 220ms ease,
left 220ms ease,
border-radius 220ms ease,
border-color 220ms ease;
}
/* Link arrow */
#dc-cursor .dc-cursor__arrow {
color: #fff;
font: 16px/1 Arial, sans-serif;
opacity: 0;
transform: translate(-2px, 2px);
transition:
opacity 180ms ease,
transform 220ms ease;
}
/* General interactive hover */
#dc-cursor.is-hovering .dc-cursor__dot {
top: -3px;
left: -3px;
width: 6px;
height: 6px;
box-shadow: 0 0 14px rgba(255, 255, 255, 0.7);
}
#dc-cursor.is-hovering .dc-cursor__ring {
opacity: 1;
transform: scale(1);
}
/* Actual navigation links only */
#dc-cursor.is-link .dc-cursor__ring {
top: -21px;
left: -21px;
width: 42px;
height: 42px;
}
#dc-cursor.is-link .dc-cursor__arrow {
opacity: 1;
transform: translate(0, 0);
}
/* -------------------------------------------------
2. DROPDOWN / ACCORDION HOVER
Skills: Backend Prowess + Frontend Prowess
------------------------------------------------- */
#dc-cursor.is-dropdown .dc-cursor__ring {
top: -23px;
left: -23px;
width: 46px;
height: 46px;
opacity: 1;
transform: scale(1);
border-color: rgba(255, 255, 255, 0.8);
}
/* Never show the navigation arrow on a dropdown */
#dc-cursor.is-dropdown .dc-cursor__arrow {
opacity: 0;
transform: translate(-2px, 2px);
}
#dc-cursor.is-dropdown .dc-cursor__dot {
top: -3px;
left: -3px;
width: 6px;
height: 6px;
}
/* Press feedback */
#dc-cursor.is-pressed .dc-cursor__ring {
transform: scale(0.82);
}
/* Silver-dust canvas */
#dc-cursor-trail {
position: fixed;
inset: 0;
z-index: 99999;
width: 100%;
height: 100%;
pointer-events: none;
mix-blend-mode: difference;
}
/* Preserve text-selection behavior */
body.dc-custom-cursor input,
body.dc-custom-cursor textarea,
body.dc-custom-cursor [contenteditable="true"] {
cursor: text;
}
}
/* -----------------------------------------------------
3. TOUCH DEVICES & REDUCED MOTION
----------------------------------------------------- */
@media (hover: none),
(pointer: coarse),
(prefers-reduced-motion: reduce) {
#dc-cursor,
#dc-cursor-trail {
display: none !important;
}
body.dc-custom-cursor,
body.dc-custom-cursor * {
cursor: auto;
}
}