/* ==========================================================================
Benly's Enterprises — Main Stylesheet
Color palette matched to logo: Black, Neon Cyan, White, Metallic Grey
========================================================================== */
:root {
--color-black: #000000;
--color-bg: #050508;
--color-bg-elevated: #0a0e14;
--color-bg-card: #0d1117;
--color-cyan: #00e5ff;
--color-cyan-bright: #5ffbff;
--color-cyan-dim: #00b8d4;
--color-cyan-glow: rgba(0, 229, 255, 0.45);
--color-cyan-subtle: rgba(0, 229, 255, 0.08);
--color-white: #ffffff;
--color-grey: #8b95a5;
--color-grey-dark: #3d4450;
--color-grey-metallic: #5a6270;
--color-border: rgba(0, 229, 255, 0.15);
--font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
--header-height: 100px;
--topbar-height: 42px;
--container-max: 1240px;
--transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--neon-shadow: 0 0 20px var(--color-cyan-glow), 0 0 40px rgba(0, 229, 255, 0.15);
--neon-shadow-intense: 0 0 25px var(--color-cyan-glow), 0 0 50px rgba(0, 229, 255, 0.3), 0 0 80px rgba(0, 229, 255, 0.1);
}
/* Reset & Base */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + var(--topbar-height));
}
body {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.7;
color: var(--color-grey);
background: var(--color-bg);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--color-cyan);
text-decoration: none;
transition: color var(--transition), text-shadow var(--transition);
}
a:hover {
color: var(--color-cyan-bright);
}
ul {
list-style: none;
}
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 24px;
}
/* Animated Background */
.benlys-bg-grid {
position: fixed;
inset: 0;
z-index: -2;
background-image:
linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 20%, transparent 70%);
pointer-events: none;
}
.benlys-bg-orbs {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.35;
animation: orbFloat 20s ease-in-out infinite;
}
.orb-1 {
width: 500px;
height: 500px;
background: radial-gradient(circle, var(--color-cyan) 0%, transparent 70%);
top: -10%;
right: -5%;
animation-delay: 0s;
}
.orb-2 {
width: 400px;
height: 400px;
background: radial-gradient(circle, var(--color-cyan-dim) 0%, transparent 70%);
bottom: 20%;
left: -10%;
animation-delay: -7s;
}
.orb-3 {
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(0, 229, 255, 0.4) 0%, transparent 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-delay: -14s;
}
@keyframes orbFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -40px) scale(1.05); }
66% { transform: translate(-20px, 30px) scale(0.95); }
}
/* Typography */
.section-tag {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-cyan);
margin-bottom: 16px;
}
.section-title {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-white);
line-height: 1.2;
margin-bottom: 20px;
}
.text-glow {
color: var(--color-cyan);
text-shadow: 0 0 30px var(--color-cyan-glow);
}
.section-desc {
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: 64px;
}
/* Neon Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.05em;
border: none;
cursor: pointer;
transition: all var(--transition);
position: relative;
overflow: hidden;
}
.btn-neon {
padding: 14px 32px;
background: transparent;
color: var(--color-cyan);
border: 1.5px solid var(--color-cyan);
border-radius: 4px;
box-shadow: var(--neon-shadow);
text-transform: uppercase;
}
.btn-neon::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(0, 229, 255, 0.25),
transparent
);
transition: left 0.6s ease;
}
.btn-neon:hover::before {
left: 100%;
}
.btn-neon:hover {
color: var(--color-black);
background: var(--color-cyan);
box-shadow: var(--neon-shadow-intense);
transform: translateY(-2px);
}
.btn-neon span {
position: relative;
z-index: 1;
}
.btn-neon-lg {
padding: 18px 40px;
font-size: 0.95rem;
}
.btn-neon-sm {
padding: 10px 20px;
font-size: 0.8rem;
}
.btn-neon-full {
width: 100%;
}
.btn-neon-white {
border-color: var(--color-white);
color: var(--color-white);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
}
.btn-neon-white:hover {
background: var(--color-white);
color: var(--color-black);
box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}
.btn-outline {
padding: 18px 40px;
background: transparent;
color: var(--color-white);
border: 1.5px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.9rem;
}
.btn-outline:hover {
border-color: var(--color-cyan);
color: var(--color-cyan);
box-shadow: var(--neon-shadow);
}
/* Header */
.site-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1001;
height: var(--topbar-height);
background: #000000;
border-bottom: 1px solid rgba(0, 229, 255, 0.12);
}
.site-topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: 100%;
}
.site-topbar-note {
margin: 0;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--color-grey);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lang-switcher {
position: relative;
flex-shrink: 0;
}
.lang-switcher-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border: 1px solid rgba(0, 229, 255, 0.25);
border-radius: 999px;
background: rgba(0, 229, 255, 0.06);
color: var(--color-white);
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: border-color var(--transition), background var(--transition);
}
.lang-switcher-toggle:hover,
.lang-switcher.is-open .lang-switcher-toggle {
border-color: rgba(0, 229, 255, 0.55);
background: rgba(0, 229, 255, 0.12);
color: var(--color-cyan);
}
.lang-switcher-code {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 20px;
padding: 0 4px;
border-radius: 4px;
background: rgba(0, 229, 255, 0.15);
color: var(--color-cyan);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.lang-switcher-caret {
transition: transform var(--transition);
}
.lang-switcher.is-open .lang-switcher-caret {
transform: rotate(180deg);
}
.lang-switcher-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 220px;
margin: 0;
padding: 8px;
list-style: none;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: 12px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), var(--neon-shadow);
z-index: 20;
}
.lang-switcher-menu[hidden] {
display: none !important;
}
.lang-switcher-option {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
color: var(--color-grey);
font-size: 0.88rem;
transition: background var(--transition), color var(--transition);
}
.lang-switcher-option:hover,
.lang-switcher-option.is-active {
background: var(--color-cyan-subtle);
color: var(--color-cyan);
}
.lang-switcher-name {
flex: 1;
}
.lang-switcher-default {
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.7;
}
.site-header {
position: fixed;
top: var(--topbar-height);
left: 0;
right: 0;
z-index: 1000;
height: var(--header-height);
background: transparent;
isolation: isolate;
overflow: visible;
}
.header-backdrop {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
180deg,
#000000 0%,
#000000 28%,
rgba(0, 0, 0, 0.88) 52%,
rgba(0, 0, 0, 0.45) 78%,
transparent 100%
);
transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
}
.site-header.scrolled .header-backdrop,
.site-header--solid .header-backdrop {
background: #000000;
}
.site-header.scrolled .header-backdrop::after,
.site-header--solid .header-backdrop::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.2), transparent);
}
.header-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
gap: 24px;
}
.site-logo {
display: flex;
align-items: center;
flex-shrink: 0;
line-height: 0;
}
.site-logo-img {
height: 90px;
width: auto;
display: block;
mix-blend-mode: screen;
/* filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.12)); */
transition: filter var(--transition);
}
.site-logo:hover .site-logo-img {
filter: drop-shadow(0 0 16px var(--color-cyan-glow));
}
.main-nav {
flex: 1;
display: flex;
justify-content: center;
}
.nav-list {
display: flex;
align-items: center;
gap: 8px;
}
.nav-link {
display: flex;
align-items: center;
gap: 4px;
padding: 10px 16px;
font-size: 0.9rem;
font-weight: 500;
color: var(--color-white);
background: none;
border: none;
cursor: pointer;
font-family: var(--font-sans);
transition: color var(--transition), text-shadow var(--transition);
}
.nav-link:hover,
.nav-link.active {
color: var(--color-cyan);
text-shadow: 0 0 20px var(--color-cyan-glow);
}
.has-dropdown.is-current > .nav-link {
color: var(--color-cyan);
text-shadow: 0 0 20px var(--color-cyan-glow);
}
.has-dropdown {
position: relative;
}
.dropdown-icon {
transition: transform var(--transition);
}
.has-dropdown.open .dropdown-icon {
transform: rotate(180deg);
}
/* Invisible bridge so the cursor can move from link → menu without closing */
.has-dropdown::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 16px;
}
.dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
transform: translateY(6px);
min-width: 240px;
z-index: 1100;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 8px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), var(--neon-shadow);
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown.open .dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.dropdown-link {
display: block;
padding: 12px 16px;
color: var(--color-grey);
font-size: 0.9rem;
border-radius: 4px;
transition: all var(--transition);
}
.dropdown-link:hover,
.dropdown-link.active {
background: var(--color-cyan-subtle);
color: var(--color-cyan);
padding-left: 20px;
}
.nav-link-with-icon {
display: flex;
align-items: center;
gap: 4px;
}
.header-cta {
flex-shrink: 0;
}
.nav-cta-mobile {
display: none;
}
/* Hamburger */
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 6px;
width: 44px;
height: 44px;
background: none;
border: 1px solid var(--color-border);
border-radius: 8px;
cursor: pointer;
padding: 10px;
transition: border-color var(--transition), box-shadow var(--transition);
}
.hamburger:hover {
border-color: var(--color-cyan);
box-shadow: var(--neon-shadow);
}
.hamburger-line {
display: block;
width: 100%;
height: 2px;
background: var(--color-white);
border-radius: 2px;
transition: all var(--transition);
}
.hamburger.active .hamburger-line:nth-child(1) {
transform: translateY(8px) rotate(45deg);
background: var(--color-cyan);
}
.hamburger.active .hamburger-line:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.hamburger.active .hamburger-line:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
background: var(--color-cyan);
}
/* Hero */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding-top: calc(var(--header-height) + var(--topbar-height));
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-slider {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--color-black);
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
z-index: 0;
transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity;
}
.hero-slide.is-active {
opacity: 1;
z-index: 1;
}
.hero-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1);
transition: transform 7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-slide.is-active img {
transform: scale(1.1);
}
.hero-overlay {
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(115deg, rgba(0, 0, 0, 0.9) 0%, rgba(5, 5, 8, 0.72) 42%, rgba(0, 229, 255, 0.1) 100%),
radial-gradient(ellipse 65% 55% at 25% 45%, rgba(0, 229, 255, 0.1) 0%, transparent 62%),
linear-gradient(to top, rgba(5, 5, 8, 0.95) 0%, transparent 35%);
}
.hero-shapes {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
.hero-slider-nav {
position: absolute;
bottom: 32px;
right: 40px;
z-index: 4;
display: flex;
align-items: center;
gap: 10px;
}
.hero-slider-dot {
width: 12px;
height: 12px;
padding: 0;
border: 1px solid rgba(0, 229, 255, 0.45);
border-radius: 50%;
background: transparent;
cursor: pointer;
transition: all var(--transition);
position: relative;
overflow: hidden;
}
.hero-slider-dot::after {
content: '';
position: absolute;
inset: 2px;
border-radius: 50%;
background: var(--color-cyan);
transform: scale(0);
transition: transform var(--transition);
box-shadow: 0 0 12px var(--color-cyan-glow);
}
.hero-slider-dot.is-active {
border-color: var(--color-cyan);
box-shadow: 0 0 16px var(--color-cyan-glow);
}
.hero-slider-dot.is-active::after {
transform: scale(1);
}
.hero-slider-dot:hover {
border-color: var(--color-cyan-bright);
box-shadow: var(--neon-shadow);
}
.hero-shapes .shape-arc {
position: absolute;
top: 15%;
right: 10%;
width: 300px;
height: 300px;
border: 2px solid var(--color-cyan);
border-radius: 50%;
border-top-color: transparent;
border-left-color: transparent;
opacity: 0.2;
animation: arcSpin 30s linear infinite;
}
@keyframes arcSpin {
to { transform: rotate(360deg); }
}
.hero-shapes .shape-stars {
position: absolute;
top: 12%;
right: 18%;
display: flex;
gap: 12px;
}
.shape-stars i {
display: block;
width: 8px;
height: 8px;
background: var(--color-cyan);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
box-shadow: 0 0 10px var(--color-cyan-glow);
animation: starPulse 2s ease-in-out infinite;
}
.shape-stars i:nth-child(2) { animation-delay: 0.3s; width: 6px; height: 6px; }
.shape-stars i:nth-child(3) { animation-delay: 0.6s; width: 10px; height: 10px; }
.shape-stars i:nth-child(4) { animation-delay: 0.9s; width: 5px; height: 5px; }
@keyframes starPulse {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 1; transform: scale(1.3); }
}
.hero-content {
position: relative;
z-index: 1;
width: 100%;
padding: 60px 24px 80px;
max-width: var(--container-max);
margin: 0 auto;
}
.hero-text {
max-width: 720px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--color-cyan-subtle);
border: 1px solid var(--color-border);
border-radius: 50px;
font-size: 0.8rem;
font-weight: 500;
color: var(--color-cyan);
margin-bottom: 28px;
}
.hero-title {
font-family: var(--font-heading);
font-size: clamp(2.8rem, 6vw, 4.5rem);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--color-white);
line-height: 1.1;
margin-bottom: 24px;
}
.title-line {
display: block;
}
.title-glow {
color: var(--color-cyan);
text-shadow: 0 0 40px var(--color-cyan-glow), 0 0 80px rgba(0, 229, 255, 0.2);
}
.hero-description {
font-size: 1.15rem;
line-height: 1.8;
margin-bottom: 40px;
max-width: 640px;
}
.hero-badge {
max-width: 100%;
line-height: 1.4;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.hero-stats {
display: flex;
gap: 24px;
margin-top: 80px;
flex-wrap: wrap;
}
.stat-card {
flex: 1;
min-width: 160px;
padding: 28px 24px;
background: rgba(13, 17, 23, 0.6);
border: 1px solid var(--color-border);
border-radius: 12px;
backdrop-filter: blur(10px);
transition: all var(--transition);
}
.stat-card:hover {
border-color: var(--color-cyan);
box-shadow: var(--neon-shadow);
transform: translateY(-4px);
}
.stat-number {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 700;
color: var(--color-cyan);
text-shadow: 0 0 20px var(--color-cyan-glow);
}
.stat-suffix {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 700;
color: var(--color-cyan);
}
.stat-label {
display: block;
font-size: 0.85rem;
color: var(--color-grey);
margin-top: 4px;
}
.hero-scroll {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
z-index: 5;
}
.scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, var(--color-cyan), transparent);
animation: scrollPulse 2s ease-in-out infinite;
}
.scroll-text {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-grey);
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
50% { opacity: 1; transform: scaleY(1); }
}
/* Sections */
.section {
padding: 100px 0;
position: relative;
}
/* Services */
.services-section {
background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-elevated) 100%);
}
.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.service-card {
position: relative;
padding: 48px 36px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 16px;
transition: all var(--transition);
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--color-cyan), transparent);
opacity: 0;
transition: opacity var(--transition);
}
.service-card:hover {
border-color: rgba(0, 229, 255, 0.4);
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), var(--neon-shadow);
}
.service-card:hover::before {
opacity: 1;
}
.service-card-featured {
border-color: rgba(0, 229, 255, 0.3);
background: linear-gradient(145deg, var(--color-bg-card) 0%, rgba(0, 229, 255, 0.04) 100%);
}
.service-badge {
position: absolute;
top: 20px;
right: 20px;
padding: 4px 12px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-black);
background: var(--color-cyan);
border-radius: 50px;
box-shadow: var(--neon-shadow);
}
.service-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
color: var(--color-cyan);
filter: drop-shadow(0 0 10px var(--color-cyan-glow));
}
.service-icon svg {
width: 48px;
height: 48px;
}
.service-title {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: 16px;
}
.service-desc {
margin-bottom: 24px;
line-height: 1.8;
}
.service-features {
margin-bottom: 28px;
}
.service-features li {
position: relative;
padding-left: 24px;
margin-bottom: 10px;
font-size: 0.9rem;
}
.service-features li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 8px;
height: 8px;
background: var(--color-cyan);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
box-shadow: 0 0 6px var(--color-cyan-glow);
}
.service-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 0.9rem;
color: var(--color-cyan);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.service-link svg {
transition: transform var(--transition);
}
.service-link:hover svg {
transform: translateX(4px);
}
/* About */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.about-collage {
position: relative;
width: 100%;
max-width: 520px;
min-height: 520px;
margin: 0 auto;
}
.about-collage-shape {
position: absolute;
left: -8px;
bottom: 18%;
z-index: 1;
width: 130px;
pointer-events: none;
will-change: transform;
}
.about-collage-shape img {
width: 100%;
height: auto;
display: block;
opacity: 0.55;
filter: brightness(1.35);
mix-blend-mode: screen;
}
.about-collage-main,
.about-collage-secondary {
position: absolute;
margin: 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--color-border);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.about-collage-main {
top: 0;
left: 12%;
width: 72%;
height: 82%;
z-index: 2;
will-change: transform;
}
.about-collage-main::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(0, 229, 255, 0.08) 0%, transparent 45%, rgba(0, 0, 0, 0.15) 100%);
pointer-events: none;
}
.about-collage-main img,
.about-collage-secondary img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.about-collage:hover .about-collage-main img {
transform: scale(1.04);
}
.about-collage-secondary {
right: 0;
bottom: 0;
width: 58%;
height: 48%;
z-index: 4;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 30px rgba(0, 229, 255, 0.08);
will-change: transform;
}
.about-collage:hover .about-collage-secondary img {
transform: scale(1.05);
}
.about-collage-accent {
position: absolute;
left: 34%;
bottom: 22%;
width: 10px;
height: 52px;
border-radius: 999px;
background: var(--color-cyan);
box-shadow: 0 0 18px var(--color-cyan-glow), 0 0 36px rgba(0, 229, 255, 0.25);
z-index: 3;
animation: collageAccentPulse 3s ease-in-out infinite;
}
.about-collage-accent::before {
content: '';
position: absolute;
inset: -6px;
border-radius: inherit;
border: 1px solid rgba(0, 229, 255, 0.35);
animation: collageAccentRing 3s ease-in-out infinite;
}
@keyframes collageAccentPulse {
0%, 100% {
transform: scaleY(1);
box-shadow: 0 0 18px var(--color-cyan-glow), 0 0 36px rgba(0, 229, 255, 0.25);
}
50% {
transform: scaleY(1.12);
box-shadow: 0 0 28px var(--color-cyan-glow), 0 0 50px rgba(0, 229, 255, 0.4);
}
}
@keyframes collageAccentRing {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 0.9; transform: scale(1.15); }
}
.about-text {
margin-bottom: 20px;
line-height: 1.8;
}
.about-features {
display: flex;
flex-direction: column;
gap: 20px;
margin: 32px 0 40px;
}
.about-feature {
display: flex;
gap: 16px;
align-items: flex-start;
}
.feature-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-cyan-subtle);
border: 1px solid var(--color-border);
border-radius: 10px;
color: var(--color-cyan);
}
.feature-icon svg {
width: 24px;
height: 24px;
}
.about-feature h4 {
font-size: 1rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: 4px;
}
.about-feature p {
font-size: 0.9rem;
margin: 0;
}
/* Process */
.process-section {
background: var(--color-bg-elevated);
}
.home-approach-section {
position: relative;
overflow: hidden;
}
.home-approach-section > .container {
position: relative;
z-index: 1;
}
.process-timeline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
}
.process-timeline::before {
content: '';
position: absolute;
top: 36px;
left: 12%;
right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-cyan), transparent);
opacity: 0.3;
}
.process-step {
text-align: center;
padding: 24px 16px;
position: relative;
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-cyan);
border: 1px solid var(--color-border);
border-radius: 50%;
margin-bottom: 24px;
background: var(--color-bg);
transition: all var(--transition);
}
.process-step:hover .step-number {
border-color: var(--color-cyan);
box-shadow: var(--neon-shadow);
transform: scale(1.05);
}
.process-step h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
color: var(--color-white);
margin-bottom: 12px;
}
.process-step p {
font-size: 0.9rem;
line-height: 1.7;
}
/* Floating section icons (shared) */
.section-float {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.float-icon {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-cyan);
border: 1px solid rgba(0, 229, 255, 0.18);
background: rgba(0, 229, 255, 0.04);
border-radius: 16px;
backdrop-filter: blur(2px);
box-shadow: 0 0 24px rgba(0, 229, 255, 0.08);
opacity: 0.5;
animation: introFloat 8s ease-in-out infinite;
}
.float-icon svg {
width: 58%;
height: 58%;
filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.35));
}
@keyframes introFloat {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-14px) rotate(3deg);
}
50% {
transform: translateY(-6px) rotate(-2deg);
}
75% {
transform: translateY(-18px) rotate(2deg);
}
}
/* Intro float layout */
.section-float--intro .float-icon-1 {
width: 72px;
height: 72px;
top: 12%;
left: 6%;
animation-duration: 7.5s;
}
.section-float--intro .float-icon-2 {
width: 64px;
height: 64px;
top: 18%;
right: 8%;
animation-duration: 9s;
animation-delay: -1.5s;
}
.section-float--intro .float-icon-3 {
width: 58px;
height: 58px;
bottom: 22%;
left: 10%;
animation-duration: 8.5s;
animation-delay: -3s;
}
.section-float--intro .float-icon-4 {
width: 68px;
height: 68px;
bottom: 14%;
right: 7%;
animation-duration: 7s;
animation-delay: -2s;
}
.section-float--intro .float-icon-5 {
width: 54px;
height: 54px;
top: 42%;
left: 3%;
animation-duration: 10s;
animation-delay: -4s;
opacity: 0.38;
}
.section-float--intro .float-icon-6 {
width: 50px;
height: 50px;
top: 8%;
left: 42%;
animation-duration: 6.5s;
animation-delay: -1s;
opacity: 0.4;
}
.section-float--intro .float-icon-7 {
width: 62px;
height: 62px;
top: 48%;
right: 4%;
animation-duration: 8s;
animation-delay: -5s;
opacity: 0.38;
}
.section-float--intro .float-icon-8 {
width: 56px;
height: 56px;
bottom: 8%;
left: 38%;
animation-duration: 9.5s;
animation-delay: -2.5s;
opacity: 0.38;
}
/* Approach float layout */
.section-float--approach .float-icon-1 {
width: 66px;
height: 66px;
top: 8%;
left: 4%;
animation-duration: 8s;
animation-delay: -0.5s;
}
.section-float--approach .float-icon-2 {
width: 58px;
height: 58px;
top: 14%;
right: 5%;
animation-duration: 9.5s;
animation-delay: -2s;
}
.section-float--approach .float-icon-3 {
width: 52px;
height: 52px;
top: 52%;
left: 2%;
animation-duration: 7s;
animation-delay: -3.5s;
opacity: 0.38;
}
.section-float--approach .float-icon-4 {
width: 70px;
height: 70px;
bottom: 10%;
right: 6%;
animation-duration: 8.5s;
animation-delay: -1s;
}
.section-float--approach .float-icon-5 {
width: 48px;
height: 48px;
top: 6%;
left: 48%;
animation-duration: 6.5s;
animation-delay: -4s;
opacity: 0.35;
}
.section-float--approach .float-icon-6 {
width: 54px;
height: 54px;
bottom: 18%;
left: 8%;
animation-duration: 10s;
animation-delay: -2.5s;
opacity: 0.4;
}
.section-float--approach .float-icon-7 {
width: 60px;
height: 60px;
top: 42%;
right: 3%;
animation-duration: 7.5s;
animation-delay: -5s;
opacity: 0.36;
}
.section-float--approach .float-icon-8 {
width: 50px;
height: 50px;
bottom: 6%;
left: 42%;
animation-duration: 9s;
animation-delay: -1.5s;
opacity: 0.35;
}
/* Why Benly's float layout */
.section-float--why .float-icon-1 {
width: 64px;
height: 64px;
top: 10%;
right: 4%;
animation-duration: 7.5s;
animation-delay: -1s;
}
.section-float--why .float-icon-2 {
width: 70px;
height: 70px;
top: 16%;
left: 5%;
animation-duration: 9s;
animation-delay: -2.5s;
}
.section-float--why .float-icon-3 {
width: 54px;
height: 54px;
bottom: 16%;
right: 8%;
animation-duration: 8s;
animation-delay: -0.5s;
}
.section-float--why .float-icon-4 {
width: 58px;
height: 58px;
bottom: 12%;
left: 6%;
animation-duration: 10s;
animation-delay: -3s;
}
.section-float--why .float-icon-5 {
width: 48px;
height: 48px;
top: 48%;
right: 2%;
animation-duration: 6.5s;
animation-delay: -4.5s;
opacity: 0.36;
}
.section-float--why .float-icon-6 {
width: 52px;
height: 52px;
top: 5%;
left: 40%;
animation-duration: 8.5s;
animation-delay: -2s;
opacity: 0.38;
}
.section-float--why .float-icon-7 {
width: 60px;
height: 60px;
bottom: 8%;
left: 48%;
animation-duration: 7s;
animation-delay: -5.5s;
opacity: 0.34;
}
.section-float--why .float-icon-8 {
width: 56px;
height: 56px;
top: 55%;
left: 2%;
animation-duration: 9.5s;
animation-delay: -1.5s;
opacity: 0.36;
}
/* Homepage — Introduction */
.home-intro-section {
position: relative;
padding: 110px 0 70px;
overflow: hidden;
}
.home-intro {
position: relative;
z-index: 1;
max-width: 820px;
margin: 0 auto;
text-align: center;
padding: 36px 28px;
background: radial-gradient(ellipse at center, rgba(5, 5, 8, 0.72) 0%, rgba(5, 5, 8, 0.35) 55%, transparent 100%);
border-radius: 20px;
}
.home-intro .section-title {
margin-bottom: 24px;
}
.home-intro p {
margin-bottom: 18px;
line-height: 1.85;
font-size: 1.05rem;
}
.home-intro p:last-child {
margin-bottom: 0;
}
/* Homepage — Core Solutions */
.home-solutions-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.home-solution-card {
padding: 36px 32px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 16px;
transition: all var(--transition);
}
.home-solution-card:hover {
border-color: rgba(0, 229, 255, 0.35);
transform: translateY(-4px);
box-shadow: var(--neon-shadow);
}
.home-solution-number {
display: block;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--color-cyan);
text-shadow: 0 0 14px var(--color-cyan-glow);
margin-bottom: 16px;
}
.home-solution-card h3 {
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: 14px;
line-height: 1.3;
}
.home-solution-card p {
margin-bottom: 24px;
line-height: 1.8;
}
/* Homepage — Approach (5 steps) */
.home-approach-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.home-approach-grid .process-step {
padding: 20px 12px;
}
/* Homepage — Feature blocks */
.home-feature-section {
padding: 100px 0;
}
.home-feature-section-alt {
background: var(--color-bg-elevated);
}
.home-feature-block {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 56px;
align-items: center;
}
.home-feature-block-reverse .home-feature-media {
order: 2;
}
.home-feature-block-reverse .home-feature-content {
order: 1;
}
.home-feature-media {
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--color-border);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.home-feature-media img {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
}
.home-feature-content .section-title {
margin-bottom: 20px;
}
.home-feature-content p {
margin-bottom: 18px;
line-height: 1.8;
}
.home-feature-list-title {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 700;
color: var(--color-white);
margin: 28px 0 14px;
}
.home-feature-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 20px;
margin-bottom: 32px;
}
.home-feature-list li {
position: relative;
padding-left: 22px;
font-size: 0.92rem;
line-height: 1.5;
color: var(--color-grey);
}
.home-feature-list li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
background: var(--color-cyan);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
box-shadow: 0 0 6px var(--color-cyan-glow);
}
/* Homepage — Why Benly's */
.home-why-section {
position: relative;
overflow: hidden;
background: var(--color-bg);
}
.home-why-section > .container {
position: relative;
z-index: 1;
}
.home-why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.home-why-card {
padding: 32px 28px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 14px;
transition: all var(--transition);
}
.home-why-card:hover {
border-color: rgba(0, 229, 255, 0.35);
transform: translateY(-4px);
box-shadow: var(--neon-shadow);
}
.home-why-number {
display: block;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--color-cyan);
text-shadow: 0 0 14px var(--color-cyan-glow);
margin-bottom: 14px;
}
.home-why-card h3 {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 700;
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 12px;
}
.home-why-card p {
margin: 0;
line-height: 1.75;
font-size: 0.95rem;
}
/* CTA */
.cta-section {
padding: 120px 0;
position: relative;
overflow: hidden;
}
.cta-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 229, 255, 0.06) 0%, var(--color-bg) 50%, rgba(0, 229, 255, 0.04) 100%);
}
.cta-card {
position: relative;
text-align: center;
padding: 80px 48px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 20px;
overflow: hidden;
}
.cta-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 20px;
padding: 1px;
background: linear-gradient(135deg, var(--color-cyan), transparent, var(--color-cyan));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.5;
}
.cta-stars {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 32px;
}
.cta-stars i {
display: block;
width: 10px;
height: 10px;
background: var(--color-cyan);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
box-shadow: 0 0 12px var(--color-cyan-glow);
animation: starPulse 2s ease-in-out infinite;
}
.cta-stars i:nth-child(2) { animation-delay: 0.4s; }
.cta-stars i:nth-child(3) { animation-delay: 0.8s; }
.cta-stars i:nth-child(4) { animation-delay: 1.2s; }
.cta-title {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 2.8rem);
color: var(--color-white);
margin-bottom: 20px;
}
.cta-desc {
font-size: 1.1rem;
max-width: 560px;
margin: 0 auto 40px;
line-height: 1.8;
}
/* Contact */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 64px;
align-items: start;
}
.contact-details {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 32px;
}
.contact-item {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 10px;
color: var(--color-white);
transition: all var(--transition);
}
.contact-item svg {
width: 22px;
height: 22px;
color: var(--color-cyan);
flex-shrink: 0;
}
.contact-item:hover {
border-color: var(--color-cyan);
box-shadow: var(--neon-shadow);
color: var(--color-cyan);
}
/* Footer */
.site-footer {
position: relative;
padding: 80px 0 0;
background: var(--color-black);
border-top: 1px solid var(--color-border);
}
.footer-glow {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-cyan), transparent);
box-shadow: 0 0 30px var(--color-cyan-glow);
}
.footer-grid {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
gap: 48px;
padding-bottom: 48px;
}
.footer-logo img {
height: 120px;
width: auto;
margin-bottom: 16px;
mix-blend-mode: screen;
}
.footer-brand-name {
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--color-white);
margin-bottom: 12px;
}
.footer-tagline {
font-size: 0.95rem;
line-height: 1.8;
max-width: 320px;
}
.footer-heading {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: 20px;
}
.footer-links-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 32px;
}
.footer-links-columns ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-links ul li,
.footer-contact ul li {
margin-bottom: 12px;
}
.footer-links a,
.footer-contact a {
color: var(--color-grey);
font-size: 0.9rem;
transition: all var(--transition);
}
.footer-links a:hover,
.footer-contact a:hover {
color: var(--color-cyan);
padding-left: 4px;
}
.footer-contact ul li {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.9rem;
color: var(--color-grey);
}
.footer-contact svg {
color: var(--color-cyan);
flex-shrink: 0;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: center;
padding: 24px 0;
border-top: 1px solid var(--color-border);
flex-wrap: wrap;
gap: 16px;
text-align: center;
}
.copyright {
font-size: 0.85rem;
color: var(--color-grey-dark);
}
.footer-legal {
display: flex;
align-items: center;
gap: 16px;
}
.footer-legal a {
font-size: 0.85rem;
color: var(--color-grey);
transition: all var(--transition);
}
.footer-legal a:hover {
color: var(--color-cyan);
text-shadow: 0 0 15px var(--color-cyan-glow);
}
.footer-legal .divider {
color: var(--color-grey-dark);
}
/* Scroll Reveal Animations */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.revealed {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
/* Page Section (fallback) */
.page-section {
padding-top: calc(var(--header-height) + 60px);
min-height: 60vh;
}
.page-header {
margin-bottom: 40px;
padding-bottom: 32px;
border-bottom: 1px solid var(--color-border);
}
.page-title {
font-family: var(--font-heading);
font-size: clamp(2.2rem, 4vw, 3.2rem);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--color-white);
line-height: 1.15;
}
.entry-content {
color: var(--color-grey);
line-height: 1.8;
}
.entry-content h2,
.entry-content h3 {
font-family: var(--font-heading);
color: var(--color-white);
margin: 1.5em 0 0.5em;
}
.entry-content h2 {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.entry-content h3 {
font-size: 1.15rem;
font-weight: 600;
}
.entry-content ul,
.entry-content ol {
margin: 0.75em 0 1.25em 1.25em;
}
.entry-content ul li,
.entry-content ol li {
margin-bottom: 0.5em;
}
.entry-content a {
color: var(--color-cyan);
text-decoration: underline;
text-underline-offset: 3px;
}
.entry-content a:hover {
color: var(--color-cyan-bright);
text-shadow: 0 0 12px var(--color-cyan-glow);
}
.legal-content .legal-updated {
padding: 16px 20px;
background: var(--color-cyan-subtle);
border: 1px solid var(--color-border);
border-radius: 8px;
color: var(--color-white);
margin-bottom: 32px;
}
/* Contact Form 7 — theme integration */
.contact-form {
padding: 40px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 16px;
}
.contact-form .wpcf7 {
margin: 0;
}
.contact-form .wpcf7-form {
display: block;
}
.contact-form .wpcf7-form p {
margin: 0;
}
.contact-form .wpcf7-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.contact-form .wpcf7-form .form-group {
margin-bottom: 20px;
}
.contact-form .wpcf7-form label {
display: block;
font-size: 0.85rem;
font-weight: 500;
color: var(--color-white);
margin-bottom: 8px;
}
.contact-form .wpcf7-form-control-wrap {
display: block;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form select,
.contact-form textarea {
width: 100%;
padding: 14px 16px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
color: var(--color-white);
font-family: var(--font-sans);
font-size: 0.95rem;
transition: all var(--transition);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--color-cyan);
box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.1), var(--neon-shadow);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: var(--color-grey-dark);
}
.contact-form select {
appearance: none;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 16px center;
cursor: pointer;
}
.contact-form input[type="submit"],
.contact-form .wpcf7-submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 32px;
background: transparent;
color: var(--color-cyan);
border: 1.5px solid var(--color-cyan);
border-radius: 4px;
box-shadow: var(--neon-shadow);
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
transition: all var(--transition);
position: relative;
overflow: hidden;
}
.contact-form input[type="submit"]:hover,
.contact-form .wpcf7-submit:hover {
color: var(--color-black);
background: var(--color-cyan);
box-shadow: var(--neon-shadow-intense);
transform: translateY(-2px);
}
.contact-form .wpcf7-not-valid-tip {
color: #ff6b6b;
font-size: 0.8rem;
margin-top: 6px;
}
.contact-form .wpcf7-response-output {
margin: 20px 0 0;
padding: 14px 18px;
border-radius: 8px;
font-size: 0.9rem;
border: 1px solid var(--color-border);
}
.contact-form .wpcf7-mail-sent-ok {
color: var(--color-cyan);
border-color: rgba(0, 229, 255, 0.3);
background: var(--color-cyan-subtle);
}
.contact-form .wpcf7-validation-errors,
.contact-form .wpcf7-mail-sent-ng {
color: #ff8a8a;
border-color: rgba(255, 107, 107, 0.3);
background: rgba(255, 107, 107, 0.08);
}
.contact-form .wpcf7-spinner {
margin-left: 12px;
}
.form-fallback {
padding: 20px;
text-align: center;
color: var(--color-grey);
}
/* Inner Pages */
.inner-hero {
position: relative;
min-height: 340px;
display: flex;
align-items: center;
margin-top: calc(var(--header-height) + var(--topbar-height));
overflow: hidden;
}
.inner-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.05);
}
.inner-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(115deg, rgba(0, 0, 0, 0.92) 0%, rgba(5, 5, 8, 0.78) 50%, rgba(0, 229, 255, 0.12) 100%),
linear-gradient(to top, var(--color-bg) 0%, transparent 30%);
}
.inner-hero-content {
position: relative;
z-index: 1;
padding: 60px 24px;
max-width: 760px;
}
.inner-hero-title {
font-family: var(--font-heading);
font-size: clamp(2.2rem, 5vw, 3.5rem);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--color-white);
line-height: 1.15;
margin-bottom: 16px;
}
.inner-hero-subtitle {
font-size: 1.1rem;
line-height: 1.7;
max-width: 560px;
}
.inner-hero-actions {
margin-top: 28px;
}
.inner-page-section {
padding: 80px 0 100px;
}
.inner-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 80px;
}
.inner-split-reverse .inner-split-content {
order: 2;
}
.inner-split-reverse .inner-split-media {
order: 1;
}
.inner-split-content p {
margin-bottom: 20px;
line-height: 1.8;
}
.inner-split-media {
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--color-border);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.inner-split-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
min-height: 320px;
}
.inner-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 80px;
}
.inner-stat-card {
padding: 32px 24px;
text-align: center;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 12px;
transition: all var(--transition);
}
.inner-stat-card:hover {
border-color: var(--color-cyan);
box-shadow: var(--neon-shadow);
transform: translateY(-4px);
}
.inner-stat-number {
display: block;
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 700;
color: var(--color-cyan);
text-shadow: 0 0 20px var(--color-cyan-glow);
margin-bottom: 8px;
}
.inner-stat-label {
font-size: 0.85rem;
color: var(--color-grey);
}
.inner-feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 80px;
}
.inner-feature-card {
padding: 32px 28px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 12px;
transition: all var(--transition);
}
.inner-feature-card:hover {
border-color: rgba(0, 229, 255, 0.35);
transform: translateY(-4px);
box-shadow: var(--neon-shadow);
}
.inner-feature-card h3 {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: 12px;
}
.inner-feature-card p {
font-size: 0.95rem;
line-height: 1.7;
margin: 0;
}
.inner-service-cards {
display: flex;
flex-direction: column;
gap: 48px;
margin-bottom: 80px;
}
.inner-service-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
padding: 40px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 16px;
}
.inner-service-card-reverse .inner-service-card-img {
order: 2;
}
.inner-service-card-reverse .inner-service-card-body {
order: 1;
}
.inner-service-card-img {
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--color-border);
}
.inner-service-card-img img {
width: 100%;
height: 280px;
object-fit: cover;
display: block;
}
.inner-service-card-body h2 {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: 16px;
}
.inner-service-card-body p {
margin-bottom: 20px;
line-height: 1.8;
}
.inner-service-card-body ul {
margin-bottom: 24px;
}
.inner-service-card-body li {
position: relative;
padding-left: 24px;
margin-bottom: 10px;
font-size: 0.9rem;
}
.inner-service-card-body li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 8px;
height: 8px;
background: var(--color-cyan);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
box-shadow: 0 0 6px var(--color-cyan-glow);
}
.inner-image-banner {
position: relative;
border-radius: 16px;
overflow: hidden;
margin-bottom: 80px;
border: 1px solid var(--color-border);
}
.inner-image-banner img {
width: 100%;
height: 360px;
object-fit: cover;
display: block;
}
.inner-image-banner-caption {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 40px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 60%);
}
.inner-image-banner-caption h3 {
font-family: var(--font-heading);
font-size: 1.5rem;
color: var(--color-white);
margin-bottom: 8px;
}
.inner-image-banner-caption p {
margin: 0;
max-width: 480px;
}
.inner-cta {
text-align: center;
padding: 48px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 16px;
}
.inner-cta h2 {
font-family: var(--font-heading);
font-size: 1.5rem;
color: var(--color-white);
margin-bottom: 24px;
}
.inner-cta-text {
max-width: 560px;
margin: 0 auto 28px;
line-height: 1.8;
}
.inner-hours {
margin-top: 32px;
padding: 24px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 12px;
}
.inner-hours h3 {
font-size: 1rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: 12px;
}
.inner-hours ul {
list-style: none;
}
.inner-hours li {
font-size: 0.9rem;
margin-bottom: 8px;
color: var(--color-grey);
}
.contact-service-note {
margin-top: 24px;
padding: 16px 18px;
font-size: 0.85rem;
line-height: 1.7;
color: var(--color-grey);
background: rgba(0, 229, 255, 0.04);
border: 1px solid var(--color-border);
border-radius: 10px;
}
.contact-form-title {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: 24px;
}
/* About page — Mission, Vision, Values */
.about-mv-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-bottom: 80px;
}
.about-mv-card {
padding: 40px 36px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 16px;
transition: all var(--transition);
}
.about-mv-card:hover {
border-color: rgba(0, 229, 255, 0.35);
box-shadow: var(--neon-shadow);
transform: translateY(-4px);
}
.about-mv-card .section-title {
font-size: clamp(1.5rem, 2.5vw, 1.85rem);
margin-bottom: 16px;
}
.about-mv-card p {
margin: 0;
line-height: 1.8;
}
.about-values {
margin-bottom: 80px;
}
.about-values .section-header {
margin-bottom: 48px;
}
.about-values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.about-value-card {
position: relative;
padding: 32px 28px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 12px;
transition: all var(--transition);
}
.about-value-card:hover {
border-color: rgba(0, 229, 255, 0.35);
transform: translateY(-4px);
box-shadow: var(--neon-shadow);
}
.about-value-number {
display: block;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--color-cyan);
text-shadow: 0 0 16px var(--color-cyan-glow);
margin-bottom: 14px;
}
.about-value-card h3 {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 700;
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 12px;
}
.about-value-card p {
font-size: 0.95rem;
line-height: 1.7;
margin: 0;
}
.about-page .inner-split-content .section-title {
margin-bottom: 24px;
}
/* Services page offerings */
.services-block {
margin-bottom: 96px;
}
.services-block-header {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 48px;
align-items: center;
margin-bottom: 40px;
}
.services-block-header-reverse .services-block-media {
order: 2;
}
.services-block-header-reverse .services-block-intro {
order: 1;
}
.services-block-media {
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--color-border);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.services-block-media img {
width: 100%;
height: 320px;
object-fit: cover;
display: block;
}
.services-block-intro .section-title {
margin-bottom: 16px;
}
.services-block-intro p {
margin-bottom: 24px;
line-height: 1.8;
}
.services-offerings-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.services-offering-card {
padding: 28px 24px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 12px;
transition: all var(--transition);
}
.services-offering-card:hover {
border-color: rgba(0, 229, 255, 0.35);
transform: translateY(-4px);
box-shadow: var(--neon-shadow);
}
.services-offering-number {
display: block;
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--color-cyan);
text-shadow: 0 0 14px var(--color-cyan-glow);
margin-bottom: 12px;
}
.services-offering-card h3 {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: 10px;
line-height: 1.35;
}
.services-offering-card p {
font-size: 0.9rem;
line-height: 1.7;
margin: 0;
}
/* Property Management page */
.property-focus-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 80px;
}
.property-focus-card {
padding: 36px 32px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 16px;
transition: all var(--transition);
}
.property-focus-card:hover {
border-color: rgba(0, 229, 255, 0.35);
transform: translateY(-4px);
box-shadow: var(--neon-shadow);
}
.property-focus-card h3 {
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: 14px;
line-height: 1.3;
}
.property-focus-card p {
margin: 0;
line-height: 1.8;
}
.property-page .inner-split {
margin-bottom: 80px;
}
/* ==========================================================================
Rental Listings
========================================================================== */
.btn-sm {
padding: 10px 18px;
font-size: 0.8rem;
}
.btn-block {
display: flex;
width: 100%;
justify-content: center;
text-align: center;
}
.rental-listing-section {
background: var(--color-bg-elevated);
}
.rental-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.rental-card {
display: flex;
flex-direction: column;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 16px;
overflow: hidden;
transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.rental-card:hover {
border-color: rgba(0, 229, 255, 0.35);
transform: translateY(-4px);
box-shadow: var(--neon-shadow);
}
.rental-card-media {
position: relative;
display: block;
aspect-ratio: 16 / 11;
overflow: hidden;
background: #0a0e14;
}
.rental-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.rental-card:hover .rental-card-media img {
transform: scale(1.04);
}
.rental-status {
position: absolute;
top: 14px;
left: 14px;
z-index: 1;
padding: 6px 12px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(0, 229, 255, 0.35);
color: var(--color-cyan);
}
.rental-status--pending {
color: #ffd166;
border-color: rgba(255, 209, 102, 0.4);
}
.rental-status--rented {
color: var(--color-grey);
border-color: rgba(139, 149, 165, 0.4);
}
.rental-card-body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
flex: 1;
}
.rental-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.rental-type {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-cyan);
}
.rental-price {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--color-white);
}
.rental-price small {
font-size: 0.75rem;
font-weight: 500;
color: var(--color-grey);
margin-left: 2px;
}
.rental-card-title {
margin: 0;
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 700;
line-height: 1.35;
}
.rental-card-title a {
color: var(--color-white);
}
.rental-card-title a:hover {
color: var(--color-cyan);
}
.rental-card-excerpt {
margin: 0;
font-size: 0.92rem;
line-height: 1.7;
color: var(--color-grey);
flex: 1;
}
.rental-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.82rem;
color: var(--color-grey);
}
.rental-meta li {
position: relative;
padding-left: 12px;
}
.rental-meta li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-cyan);
transform: translateY(-50%);
box-shadow: 0 0 8px var(--color-cyan-glow);
}
.rental-card-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.rental-listing-footer {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin-top: 40px;
}
.rental-empty {
text-align: center;
color: var(--color-grey);
}
/* Featured single-property showcase */
.rental-featured-wrap {
max-width: 1100px;
margin: 0 auto;
}
.rental-featured {
display: grid;
grid-template-columns: 1.2fr 0.9fr;
gap: 0;
overflow: hidden;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 20px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.rental-featured-media {
display: grid;
grid-template-rows: 1.4fr 0.7fr;
min-height: 520px;
background: #0a0e14;
}
.rental-featured-main {
position: relative;
display: block;
overflow: hidden;
}
.rental-featured-main img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.7s ease;
}
.rental-featured:hover .rental-featured-main img {
transform: scale(1.03);
}
.rental-featured-thumbs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 8px;
background: rgba(0, 0, 0, 0.45);
}
.rental-featured-thumbs figure {
margin: 0;
overflow: hidden;
border-radius: 10px;
border: 1px solid var(--color-border);
aspect-ratio: 4 / 3;
}
.rental-featured-thumbs img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rental-featured-more {
position: relative;
display: block;
overflow: hidden;
border-radius: 10px;
border: 1px solid rgba(0, 229, 255, 0.35);
aspect-ratio: 4 / 3;
}
.rental-featured-more img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.45);
}
.rental-featured-more-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: var(--color-cyan);
text-align: center;
}
.rental-featured-more-overlay strong {
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: 800;
}
.rental-featured-more-overlay small {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.rental-featured-body {
display: flex;
flex-direction: column;
gap: 14px;
padding: 36px 32px;
}
.rental-featured-title {
margin: 0;
font-family: var(--font-heading);
font-size: clamp(1.8rem, 3vw, 2.4rem);
font-weight: 800;
line-height: 1.15;
}
.rental-featured-title a {
color: var(--color-white);
}
.rental-featured-title a:hover {
color: var(--color-cyan);
}
.rental-featured-location {
margin: 0;
font-size: 0.95rem;
color: var(--color-grey);
}
.rental-featured-amenities {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 4px 0 0;
padding: 0;
list-style: none;
}
.rental-featured-amenities li {
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(0, 229, 255, 0.2);
background: rgba(0, 229, 255, 0.06);
color: var(--color-grey);
font-size: 0.8rem;
}
.rental-featured .rental-card-actions {
margin-top: auto;
padding-top: 12px;
}
.rental-featured .rental-card-actions .btn {
min-width: 140px;
justify-content: center;
}
/* Single rental */
.rental-hero {
position: relative;
min-height: 420px;
display: flex;
align-items: flex-end;
padding: 120px 0 56px;
margin-top: calc(var(--header-height) + var(--topbar-height));
overflow: hidden;
}
.rental-hero-media {
position: absolute;
inset: 0;
}
.rental-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rental-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(5, 5, 8, 0.92) 100%);
}
.rental-hero-content {
position: relative;
z-index: 1;
}
.rental-back {
display: inline-block;
margin-bottom: 18px;
font-size: 0.88rem;
color: var(--color-grey);
}
.rental-back:hover {
color: var(--color-cyan);
}
.rental-hero .rental-status {
position: static;
display: inline-block;
margin-bottom: 16px;
}
.rental-hero-title {
margin: 0 0 10px;
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
color: var(--color-white);
line-height: 1.15;
}
.rental-hero-sub {
margin: 0;
color: var(--color-grey);
font-size: 1.05rem;
}
.rental-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.75fr);
gap: 40px;
align-items: start;
}
.rental-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 40px;
}
.rental-gallery-item {
margin: 0;
padding: 0;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--color-border);
aspect-ratio: 4 / 3;
background: #0a0e14;
cursor: zoom-in;
display: block;
width: 100%;
text-decoration: none;
}
.rental-gallery-item.is-featured {
grid-column: 1 / -1;
aspect-ratio: 16 / 9;
}
.rental-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s ease;
pointer-events: none;
}
.rental-gallery-item:hover img,
.rental-gallery-item:focus-visible img {
transform: scale(1.03);
}
.rental-gallery-item:focus-visible {
outline: 2px solid var(--color-cyan);
outline-offset: 2px;
}
/* Magnific Popup — centered lightbox theme */
body.rental-lightbox-open {
overflow: hidden;
}
.benlys-mfp.mfp-bg {
background: rgba(0, 0, 0, 0.9);
opacity: 1;
}
.benlys-mfp .mfp-container {
display: flex;
align-items: center;
justify-content: center;
padding: 40px 16px;
text-align: center;
}
.benlys-mfp .mfp-content {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
vertical-align: middle;
}
.benlys-mfp .mfp-figure {
margin: 0 auto;
line-height: 0;
}
.benlys-mfp .mfp-img {
max-height: 82vh;
padding: 0;
border-radius: 12px;
border: 1px solid rgba(0, 229, 255, 0.25);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 30px rgba(0, 229, 255, 0.12);
background: #050508;
}
.benlys-mfp .mfp-bottom-bar {
margin-top: 12px;
position: static;
left: auto;
width: auto;
}
.benlys-mfp .mfp-title,
.benlys-mfp .mfp-counter {
color: #c5ced8;
font-family: var(--font-sans);
text-align: center;
}
.benlys-mfp .mfp-close {
color: var(--color-cyan) !important;
opacity: 1;
font-size: 36px;
right: 12px;
top: 8px;
width: 44px;
height: 44px;
line-height: 40px;
}
.benlys-mfp .mfp-close:hover {
color: #fff !important;
}
.benlys-mfp .mfp-arrow {
opacity: 1;
}
.benlys-mfp .mfp-arrow:before,
.benlys-mfp .mfp-arrow:after {
border-top-color: transparent;
border-bottom-color: transparent;
}
.benlys-mfp .mfp-arrow-left:before {
border-right-color: var(--color-cyan);
}
.benlys-mfp .mfp-arrow-right:before {
border-left-color: var(--color-cyan);
}
.mfp-fade.mfp-bg {
opacity: 0;
transition: opacity 0.25s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
opacity: 0.92;
}
.mfp-fade.mfp-bg.mfp-removing {
opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
opacity: 0;
transform: translateY(12px) scale(0.98);
transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
transform: translateY(0) scale(1);
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
.rental-detail-copy {
margin-bottom: 36px;
}
.rental-detail-copy p {
line-height: 1.85;
margin-bottom: 16px;
}
.rental-amenities h3 {
font-family: var(--font-heading);
font-size: 1.2rem;
color: var(--color-white);
margin-bottom: 16px;
}
.rental-amenities ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 18px;
margin: 0;
padding: 0;
list-style: none;
}
.rental-amenities li {
position: relative;
padding: 12px 14px 12px 28px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 10px;
font-size: 0.92rem;
color: var(--color-grey);
}
.rental-amenities li::before {
content: '';
position: absolute;
left: 12px;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-cyan);
transform: translateY(-50%);
}
.rental-summary-card {
position: sticky;
top: calc(var(--header-height) + var(--topbar-height) + 24px);
padding: 28px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 16px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.rental-summary-price {
margin: 0 0 22px;
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 800;
color: var(--color-cyan);
text-shadow: 0 0 20px var(--color-cyan-glow);
line-height: 1;
}
.rental-summary-price span {
display: inline-block;
margin-left: 6px;
font-size: 0.95rem;
font-weight: 500;
color: var(--color-grey);
text-shadow: none;
}
.rental-summary-list {
margin: 0 0 24px;
padding: 0;
list-style: none;
}
.rental-summary-list li {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
font-size: 0.92rem;
}
.rental-summary-list li span {
color: var(--color-grey);
}
.rental-summary-list li strong {
color: var(--color-white);
font-weight: 600;
text-align: right;
}
.rental-summary-card .btn + .btn {
margin-top: 10px;
}
.rental-summary-card .btn.is-loading {
opacity: 0.7;
pointer-events: none;
}
.rental-summary-card .btn:disabled,
.rental-summary-card .btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
}
.rental-payment-note {
margin: 18px 0 0;
font-size: 0.82rem;
line-height: 1.65;
color: var(--color-grey);
}
.finance-page .inner-split {
margin-bottom: 80px;
}
.finance-focus-block {
margin-bottom: 90px;
}
.finance-focus-grid {
grid-template-columns: repeat(3, 1fr);
}
.finance-calculator-section {
margin-bottom: 90px;
padding: 40px;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: 20px;
}
.finance-calculator-intro {
max-width: 720px;
margin-bottom: 32px;
}
.finance-calculator-intro .section-title {
margin-bottom: 14px;
}
.finance-calculator-intro p {
margin: 0;
line-height: 1.8;
color: var(--color-grey);
}
.finance-calculator {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 28px;
align-items: stretch;
}
.finance-calculator-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
padding: 28px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 16px;
}
.finance-calc-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.finance-calc-field label {
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-grey);
}
.finance-calc-field input {
width: 100%;
padding: 14px 16px;
border-radius: 10px;
border: 1px solid var(--color-border);
background: rgba(0, 0, 0, 0.35);
color: var(--color-white);
font-family: var(--font-sans);
font-size: 1rem;
transition: border-color var(--transition), box-shadow var(--transition);
}
.finance-calc-field input:focus {
outline: none;
border-color: rgba(0, 229, 255, 0.55);
box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12);
}
.finance-calculator-form .btn {
grid-column: 1 / -1;
margin-top: 4px;
justify-content: center;
}
.finance-calculator-results {
display: flex;
flex-direction: column;
gap: 16px;
padding: 28px;
background: linear-gradient(160deg, rgba(0, 229, 255, 0.08), rgba(13, 17, 23, 0.95));
border: 1px solid rgba(0, 229, 255, 0.22);
border-radius: 16px;
}
.finance-calc-result-card {
padding: 16px 18px;
background: rgba(0, 0, 0, 0.28);
border: 1px solid var(--color-border);
border-radius: 12px;
}
.finance-calc-result-card span {
display: block;
margin-bottom: 8px;
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-grey);
}
.finance-calc-result-card strong {
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: 700;
color: var(--color-white);
}
.finance-calc-result-main strong {
font-size: clamp(1.8rem, 3vw, 2.4rem);
color: var(--color-cyan);
text-shadow: 0 0 18px var(--color-cyan-glow);
}
.finance-calc-result-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.finance-calc-disclaimer {
margin: 4px 0 0;
font-size: 0.8rem;
line-height: 1.65;
color: var(--color-grey);
}
.finance-collab-section {
margin-bottom: 80px;
}
.finance-collab-card {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 0;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 20px;
background: var(--color-bg-card);
}
.finance-collab-copy {
padding: 48px 40px;
}
.finance-collab-copy .section-title {
margin-bottom: 16px;
}
.finance-collab-copy > p {
margin-bottom: 28px;
line-height: 1.8;
}
.finance-collab-steps {
list-style: none;
margin: 0 0 28px;
padding: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.finance-collab-steps li {
display: grid;
grid-template-columns: 48px 1fr;
gap: 14px;
align-items: start;
}
.finance-collab-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 12px;
border: 1px solid rgba(0, 229, 255, 0.35);
background: rgba(0, 229, 255, 0.08);
color: var(--color-cyan);
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.finance-collab-steps h3 {
margin: 0 0 6px;
font-family: var(--font-heading);
font-size: 1.05rem;
color: var(--color-white);
}
.finance-collab-steps p {
margin: 0;
font-size: 0.92rem;
line-height: 1.7;
color: var(--color-grey);
}
.finance-collab-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.finance-collab-media {
min-height: 100%;
}
.finance-collab-media img {
width: 100%;
height: 100%;
min-height: 420px;
object-fit: cover;
display: block;
}
.compliance-note {
margin-bottom: 80px;
padding: 28px 32px;
background: rgba(0, 229, 255, 0.04);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-cyan);
border-radius: 12px;
}
.compliance-note .section-tag {
margin-bottom: 12px;
}
.compliance-note p {
margin: 0;
font-size: 0.9rem;
line-height: 1.8;
color: var(--color-grey);
}
/* FAQ accordion */
.faq-layout {
display: grid;
grid-template-columns: 0.85fr 1.4fr;
gap: 56px;
align-items: start;
margin-bottom: 80px;
}
.faq-intro .section-title {
margin-bottom: 16px;
}
.faq-intro p {
margin-bottom: 28px;
line-height: 1.8;
}
.faq-accordion {
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: 12px;
overflow: hidden;
transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item.is-open {
border-color: rgba(0, 229, 255, 0.4);
box-shadow: var(--neon-shadow);
}
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 22px;
background: transparent;
border: none;
color: var(--color-white);
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: color var(--transition);
}
.faq-question:hover {
color: var(--color-cyan);
}
.faq-question-text {
display: flex;
align-items: flex-start;
gap: 14px;
line-height: 1.45;
}
.faq-number {
flex-shrink: 0;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--color-cyan);
text-shadow: 0 0 12px var(--color-cyan-glow);
padding-top: 2px;
}
.faq-icon {
position: relative;
flex-shrink: 0;
width: 22px;
height: 22px;
}
.faq-icon::before,
.faq-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: var(--color-cyan);
border-radius: 2px;
transition: transform var(--transition), opacity var(--transition);
}
.faq-icon::before {
width: 14px;
height: 2px;
transform: translate(-50%, -50%);
}
.faq-icon::after {
width: 2px;
height: 14px;
transform: translate(-50%, -50%);
}
.faq-item.is-open .faq-icon::after {
opacity: 0;
transform: translate(-50%, -50%) scaleY(0);
}
.faq-answer {
border-top: 1px solid var(--color-border);
}
.faq-answer-inner {
padding: 0 22px 22px 56px;
}
.faq-answer-inner p {
margin: 16px 0 0;
line-height: 1.8;
color: var(--color-grey);
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1024px) {
.process-timeline {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.process-timeline::before {
display: none;
}
.home-approach-grid {
grid-template-columns: repeat(3, 1fr);
}
.home-why-grid {
grid-template-columns: repeat(2, 1fr);
}
.home-feature-media img {
height: 380px;
}
.about-grid {
gap: 48px;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 900px) {
.header-cta {
display: none;
}
.hamburger {
display: flex;
}
.main-nav {
position: fixed;
top: calc(var(--header-height) + var(--topbar-height));
left: 0;
right: 0;
bottom: 0;
background: rgba(5, 5, 8, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
flex-direction: column;
justify-content: flex-start;
padding: 32px 24px;
transform: translateX(100%);
transition: transform var(--transition);
overflow-y: auto;
}
.main-nav.open {
transform: translateX(0);
}
.nav-list {
flex-direction: column;
width: 100%;
gap: 4px;
}
.nav-link {
width: 100%;
padding: 16px 20px;
font-size: 1.1rem;
border-bottom: 1px solid var(--color-border);
}
.has-dropdown::after {
display: none;
}
.has-dropdown .dropdown-menu {
position: static;
transform: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
background: transparent;
border: none;
box-shadow: none;
padding: 0 0 0 20px;
display: none;
min-width: 0;
top: auto;
left: auto;
}
.has-dropdown.open .dropdown-menu {
display: block;
}
.dropdown-link {
padding: 12px 20px;
font-size: 1rem;
}
.nav-cta-mobile {
display: block;
margin-top: 24px;
width: 100%;
}
.nav-cta-mobile .btn {
width: 100%;
}
.services-grid {
grid-template-columns: 1fr;
}
.about-grid {
grid-template-columns: 1fr;
}
.about-collage {
min-height: 420px;
max-width: 440px;
}
.about-collage-shape {
width: 100px;
left: 0;
bottom: 14%;
}
.about-collage-main {
left: 8%;
width: 76%;
height: 78%;
}
.about-collage-secondary {
width: 62%;
height: 46%;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.inner-split,
.inner-service-card {
grid-template-columns: 1fr;
gap: 32px;
}
.inner-split-reverse .inner-split-content,
.inner-split-reverse .inner-split-media,
.inner-service-card-reverse .inner-service-card-img,
.inner-service-card-reverse .inner-service-card-body {
order: unset;
}
.inner-stats {
grid-template-columns: repeat(2, 1fr);
}
.inner-feature-grid {
grid-template-columns: 1fr;
}
.about-mv-grid {
grid-template-columns: 1fr;
}
.about-values-grid {
grid-template-columns: 1fr 1fr;
}
.services-block-header {
grid-template-columns: 1fr;
gap: 28px;
}
.services-block-header-reverse .services-block-media,
.services-block-header-reverse .services-block-intro {
order: unset;
}
.services-offerings-grid {
grid-template-columns: 1fr 1fr;
}
.services-block-media img {
height: 240px;
}
.property-focus-grid {
grid-template-columns: 1fr;
}
.finance-focus-grid {
grid-template-columns: 1fr;
}
.finance-calculator,
.finance-calculator-form,
.finance-calc-result-grid,
.finance-collab-card {
grid-template-columns: 1fr;
}
.finance-calculator-section {
padding: 28px 20px;
}
.finance-collab-copy {
padding: 32px 24px;
}
.finance-collab-media img {
min-height: 260px;
}
.rental-featured {
grid-template-columns: 1fr;
}
.rental-featured-media {
min-height: 0;
grid-template-rows: 280px auto;
}
.rental-featured-body {
padding: 28px 22px;
}
.rental-gallery {
grid-template-columns: repeat(2, 1fr);
}
.benlys-mfp .mfp-container {
padding: 56px 8px 24px;
}
.benlys-mfp .mfp-img {
max-height: 70vh;
}
.rental-grid {
grid-template-columns: 1fr;
}
.rental-detail-grid {
grid-template-columns: 1fr;
}
.rental-summary-card {
position: static;
}
.rental-amenities ul {
grid-template-columns: 1fr;
}
.rental-hero {
min-height: 340px;
padding-top: 100px;
}
.faq-layout {
grid-template-columns: 1fr;
gap: 36px;
}
.faq-answer-inner {
padding-left: 22px;
}
.home-solutions-grid,
.home-feature-block {
grid-template-columns: 1fr;
}
.home-feature-block-reverse .home-feature-media,
.home-feature-block-reverse .home-feature-content {
order: unset;
}
.home-approach-grid {
grid-template-columns: 1fr 1fr;
}
.home-feature-list {
grid-template-columns: 1fr;
}
.home-feature-media img {
height: 280px;
}
.float-icon-5,
.float-icon-6,
.float-icon-7,
.float-icon-8 {
display: none;
}
.float-icon {
opacity: 0.32;
width: 48px !important;
height: 48px !important;
}
}
@media (max-width: 640px) {
:root {
--header-height: 72px;
--topbar-height: 40px;
}
.site-topbar-note {
display: none;
}
.lang-switcher-label {
display: none;
}
.site-logo-img {
height: 52px;
}
.hero-stats {
flex-direction: column;
margin-top: 48px;
}
.home-solutions-grid,
.home-approach-grid,
.home-why-grid {
grid-template-columns: 1fr;
}
.float-icon-1,
.float-icon-2,
.float-icon-3,
.float-icon-4 {
opacity: 0.26;
}
.stat-card {
min-width: 100%;
}
.hero-actions {
flex-direction: column;
}
.hero-actions .btn {
width: 100%;
text-align: center;
}
.hero-slider-nav {
right: 24px;
bottom: 24px;
}
.hero-scroll {
bottom: 72px;
}
.contact-form {
padding: 28px 20px;
}
.contact-form .wpcf7-form .form-row {
grid-template-columns: 1fr;
}
.process-timeline {
grid-template-columns: 1fr;
}
.cta-card {
padding: 48px 24px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.footer-links-columns {
grid-template-columns: 1fr 1fr;
gap: 8px 24px;
max-width: 420px;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.inner-stats {
grid-template-columns: 1fr;
}
.inner-service-card {
padding: 24px;
}
.inner-image-banner img {
height: 260px;
}
.inner-hero {
min-height: 280px;
}
.about-values-grid {
grid-template-columns: 1fr;
}
.services-offerings-grid {
grid-template-columns: 1fr;
}
.about-collage {
min-height: 360px;
max-width: 100%;
}
.about-collage-shape {
width: 80px;
bottom: 10%;
}
.about-collage-accent {
left: 30%;
bottom: 18%;
height: 44px;
}
.section {
padding: 72px 0;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal {
opacity: 1;
transform: none;
}
html {
scroll-behavior: auto;
}
}
/* ── Investor community (Finance Investment) ── */
.investor-community-section {
padding-top: 72px;
}
.investor-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 36px;
}
.investor-stat-card {
padding: 28px 24px;
background: linear-gradient(160deg, rgba(0, 229, 255, 0.06), rgba(10, 14, 20, 0.95));
border: 1px solid var(--color-border);
border-radius: 16px;
position: relative;
overflow: hidden;
}
.investor-stat-card::after {
content: '';
position: absolute;
inset: auto -20% -40% auto;
width: 140px;
height: 140px;
background: radial-gradient(circle, rgba(0, 229, 255, 0.18), transparent 70%);
pointer-events: none;
}
.investor-stat-card--accent {
border-color: rgba(0, 229, 255, 0.45);
box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.08), var(--neon-shadow);
}
.investor-stat-label {
display: block;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-grey);
margin-bottom: 10px;
}
.investor-stat-value {
display: block;
font-family: var(--font-heading);
font-size: clamp(1.8rem, 3vw, 2.4rem);
font-weight: 700;
color: var(--color-white);
line-height: 1.1;
margin-bottom: 8px;
}
.investor-stat-card--accent .investor-stat-value {
color: var(--color-cyan);
}
.investor-stat-card p {
margin: 0;
font-size: 0.9rem;
color: var(--color-grey);
}
.investor-progress {
padding: 24px 28px;
border: 1px solid var(--color-border);
border-radius: 16px;
background: var(--color-bg-card);
}
.investor-progress-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
color: var(--color-grey);
font-size: 0.9rem;
}
.investor-progress-top strong {
color: var(--color-cyan);
}
.investor-progress-track {
height: 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
}
.investor-progress-bar {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #00b8d4, var(--color-cyan));
box-shadow: 0 0 16px rgba(0, 229, 255, 0.45);
transition: width 0.6s ease;
}
.investor-progress-note {
margin: 14px 0 0;
color: var(--color-grey);
font-size: 0.92rem;
}
.investor-calculator-section {
padding-top: 24px;
}
.investor-calculator-card {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 36px;
align-items: stretch;
padding: 40px;
border-radius: 20px;
border: 1px solid var(--color-border);
background:
radial-gradient(circle at top right, rgba(0, 229, 255, 0.12), transparent 40%),
linear-gradient(145deg, rgba(16, 22, 32, 0.98), rgba(8, 10, 14, 0.98));
}
.investor-calculator-copy .section-title {
margin-bottom: 14px;
}
.investor-calculator-copy p {
color: var(--color-grey);
max-width: 36rem;
}
.investor-calculator-panel {
padding: 28px;
border-radius: 16px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(0, 229, 255, 0.2);
}
.investor-calculator-panel label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: 10px;
}
.investor-calculator-panel input[type="number"],
.investor-field input,
.investor-field textarea,
.investor-field select {
width: 100%;
padding: 14px 16px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 10px;
color: var(--color-white);
font-family: var(--font-sans);
font-size: 0.95rem;
transition: border-color var(--transition), box-shadow var(--transition);
}
.investor-field select {
appearance: none;
cursor: pointer;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
.investor-phone-wrap {
display: flex;
align-items: stretch;
border: 1px solid var(--color-border);
border-radius: 10px;
overflow: hidden;
background: var(--color-bg);
transition: border-color var(--transition), box-shadow var(--transition);
}
.investor-phone-wrap:focus-within {
border-color: var(--color-cyan);
box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12), var(--neon-shadow);
}
.investor-phone-code {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 72px;
padding: 0 14px;
border-right: 1px solid var(--color-border);
background: rgba(0, 229, 255, 0.08);
color: var(--color-grey);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.02em;
}
.investor-phone-code.is-active {
color: var(--color-cyan);
}
.investor-phone-wrap input[type="tel"] {
border: 0;
border-radius: 0;
box-shadow: none;
}
.investor-phone-wrap input[type="tel"]:focus {
box-shadow: none;
}
.investor-field.has-error input,
.investor-field.has-error textarea,
.investor-field.has-error select,
.investor-field.has-error .investor-phone-wrap {
border-color: rgba(255, 110, 110, 0.7);
}
.investor-field-error {
display: block;
margin-top: 8px;
color: #ff8e8e;
font-size: 0.8rem;
}
.investor-calculator-panel input:focus,
.investor-field input:focus,
.investor-field textarea:focus,
.investor-field select:focus {
outline: none;
border-color: var(--color-cyan);
box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12), var(--neon-shadow);
}
.investor-calc-results {
list-style: none;
margin: 22px 0;
padding: 0;
display: grid;
gap: 12px;
}
.investor-calc-results li {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
color: var(--color-grey);
font-size: 0.92rem;
}
.investor-calc-results strong {
color: var(--color-white);
font-size: 1rem;
}
.btn-block {
width: 100%;
justify-content: center;
}
.investor-apply-section {
padding-bottom: 96px;
}
.investor-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 0 auto 36px;
max-width: 560px;
}
.investor-step {
display: flex;
align-items: center;
gap: 12px;
color: var(--color-grey);
}
.investor-step span {
width: 42px;
height: 42px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
font-weight: 700;
background: var(--color-bg-card);
}
.investor-step em {
font-style: normal;
font-weight: 600;
font-size: 0.92rem;
}
.investor-step.is-active {
color: var(--color-white);
}
.investor-step.is-active span {
border-color: var(--color-cyan);
color: var(--color-black);
background: var(--color-cyan);
box-shadow: var(--neon-shadow);
}
.investor-step-line {
flex: 1;
height: 2px;
background: linear-gradient(90deg, rgba(0, 229, 255, 0.5), rgba(255, 255, 255, 0.08));
max-width: 120px;
}
.investor-wizard,
.investor-full-notice {
padding: 36px;
border-radius: 20px;
border: 1px solid var(--color-border);
background: var(--color-bg-card);
}
.investor-full-notice {
text-align: center;
}
.investor-form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.investor-field--full {
grid-column: 1 / -1;
}
.investor-field label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: 8px;
}
.investor-field label abbr {
color: var(--color-cyan);
text-decoration: none;
}
.investor-field small {
display: block;
margin-top: 8px;
color: var(--color-grey);
font-size: 0.8rem;
}
.investor-field input[type="file"] {
padding: 12px;
background: rgba(0, 0, 0, 0.25);
border: 1px dashed rgba(0, 229, 255, 0.35);
border-radius: 10px;
color: var(--color-grey);
cursor: pointer;
}
.investor-picture-preview {
display: none;
align-items: center;
gap: 16px;
margin-top: 14px;
padding: 14px;
border-radius: 12px;
border: 1px solid rgba(0, 229, 255, 0.25);
background: rgba(0, 229, 255, 0.05);
}
.investor-picture-preview.is-visible {
display: flex;
}
.investor-picture-preview[hidden] {
display: none !important;
}
.investor-picture-preview img {
width: 96px;
height: 96px;
object-fit: cover;
border-radius: 10px;
border: 1px solid var(--color-border);
background: #000;
flex-shrink: 0;
}
.investor-picture-meta {
flex: 1;
min-width: 0;
color: var(--color-grey);
font-size: 0.88rem;
line-height: 1.45;
word-break: break-word;
}
.investor-picture-remove {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-left: auto;
padding: 0;
border: 1px solid rgba(255, 110, 110, 0.45);
border-radius: 10px;
background: rgba(255, 80, 80, 0.1);
color: #ff8e8e;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.investor-picture-remove:hover,
.investor-picture-remove:focus-visible {
outline: none;
background: rgba(255, 80, 80, 0.22);
border-color: rgba(255, 110, 110, 0.8);
color: #ffb0b0;
transform: translateY(-1px);
}
.investor-form-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.investor-form-error {
margin: 18px 0 0;
padding: 12px 14px;
border-radius: 10px;
background: rgba(255, 80, 80, 0.1);
border: 1px solid rgba(255, 80, 80, 0.35);
color: #ff8e8e;
font-size: 0.9rem;
}
.investor-payment-card h3 {
margin: 10px 0 12px;
font-family: var(--font-heading);
font-size: 1.6rem;
color: var(--color-white);
}
.investor-payment-card > p {
color: var(--color-grey);
max-width: 40rem;
}
.investor-payment-summary {
list-style: none;
margin: 28px 0;
padding: 0;
display: grid;
gap: 0;
border: 1px solid var(--color-border);
border-radius: 14px;
overflow: hidden;
}
.investor-payment-summary li {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(0, 0, 0, 0.2);
color: var(--color-grey);
}
.investor-payment-summary li:last-child {
border-bottom: 0;
}
.investor-payment-summary strong {
color: var(--color-white);
}
.investor-cancel-notice,
.investor-success-box {
margin-bottom: 28px;
padding: 20px 24px;
border-radius: 14px;
border: 1px solid rgba(0, 229, 255, 0.35);
background: rgba(0, 229, 255, 0.08);
}
.investor-cancel-notice {
border-color: rgba(255, 196, 0, 0.4);
background: rgba(255, 196, 0, 0.08);
}
/* ── Payment result (success / cancelled) ── */
.payment-result-section {
position: relative;
min-height: calc(100vh - 220px);
display: flex;
align-items: center;
padding-top: calc(var(--header-height) + var(--topbar-height) + 48px);
padding-bottom: 80px;
overflow: hidden;
}
.payment-result-section::before {
content: '';
position: absolute;
inset: 12% auto auto 50%;
width: min(720px, 90vw);
height: 420px;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(0, 229, 255, 0.14), transparent 70%);
pointer-events: none;
}
.payment-result-section.is-cancelled::before {
background: radial-gradient(ellipse at center, rgba(255, 180, 60, 0.12), transparent 70%);
}
.payment-result {
position: relative;
z-index: 1;
width: 100%;
max-width: 640px;
margin: 0 auto;
}
.payment-result-card {
text-align: center;
padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px);
border-radius: 24px;
border: 1px solid rgba(0, 229, 255, 0.28);
background:
linear-gradient(165deg, rgba(0, 229, 255, 0.08), transparent 42%),
linear-gradient(180deg, rgba(13, 17, 23, 0.98), rgba(8, 10, 14, 0.98));
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 40px rgba(0, 229, 255, 0.08);
}
.payment-result-section.is-cancelled .payment-result-card {
border-color: rgba(255, 180, 60, 0.35);
background:
linear-gradient(165deg, rgba(255, 180, 60, 0.08), transparent 42%),
linear-gradient(180deg, rgba(13, 17, 23, 0.98), rgba(8, 10, 14, 0.98));
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 40px rgba(255, 180, 60, 0.06);
}
.payment-result-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
margin: 0 auto 22px;
border-radius: 50%;
color: var(--color-cyan);
background: rgba(0, 229, 255, 0.1);
box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.25), var(--neon-shadow);
animation: payment-result-pop 0.55s ease both;
}
.payment-result-section.is-cancelled .payment-result-icon {
color: #ffb84d;
background: rgba(255, 180, 60, 0.1);
box-shadow: 0 0 0 1px rgba(255, 180, 60, 0.3);
}
.payment-result-badge {
display: inline-block;
margin-bottom: 14px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid rgba(0, 229, 255, 0.35);
background: rgba(0, 229, 255, 0.08);
color: var(--color-cyan);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.payment-result-section.is-cancelled .payment-result-badge {
border-color: rgba(255, 180, 60, 0.4);
background: rgba(255, 180, 60, 0.08);
color: #ffb84d;
}
.payment-result-title {
margin: 0 0 20px;
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--color-white);
}
.payment-result-body {
color: var(--color-grey);
}
.payment-result-body > *:last-child {
margin-bottom: 0;
}
.payment-result-lead {
margin: 0 auto 28px;
max-width: 34rem;
font-size: 1.05rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.82);
}
.payment-result-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 0 auto 32px;
padding: 20px 24px;
max-width: 320px;
border-radius: 16px;
border: 1px solid rgba(0, 229, 255, 0.22);
background: rgba(0, 0, 0, 0.28);
}
.payment-result-stat span {
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-grey);
}
.payment-result-stat strong {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 800;
color: var(--color-cyan);
line-height: 1;
}
.payment-result-stat em {
font-style: normal;
font-size: 1.1rem;
font-weight: 600;
color: var(--color-grey);
}
.payment-result-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.payment-result-actions .btn {
min-width: 200px;
justify-content: center;
}
@keyframes payment-result-pop {
0% {
opacity: 0;
transform: scale(0.7);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@media (max-width: 600px) {
.payment-result-section {
min-height: auto;
padding-bottom: 64px;
}
.payment-result-actions {
flex-direction: column;
}
.payment-result-actions .btn {
width: 100%;
}
}
.compliance-note {
margin-top: 40px;
padding: 28px;
border-radius: 16px;
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.02);
}
.compliance-note p {
margin: 10px 0 0;
color: var(--color-grey);
max-width: 52rem;
}
@media (max-width: 980px) {
.investor-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.investor-calculator-card {
grid-template-columns: 1fr;
padding: 28px;
}
}
@media (max-width: 700px) {
.investor-stats-grid {
grid-template-columns: 1fr;
}
.investor-form-grid {
grid-template-columns: 1fr;
}
.investor-steps {
flex-direction: column;
gap: 10px;
}
.investor-step-line {
width: 2px;
height: 28px;
max-width: none;
background: linear-gradient(180deg, rgba(0, 229, 255, 0.5), rgba(255, 255, 255, 0.08));
}
.investor-wizard,
.investor-full-notice {
padding: 24px 18px;
}
}