/*
* style2.css - KORTEX-style theme (local, no CDN)
* Use with:
* Optional: add class="theme-kortex" to to apply dark theme base.
*/
/* ========== CSS Variables (KORTEX palette) ========== */
:root {
--kortex-noir: #000000;
--kortex-accent: #dd2222;
--kortex-accent-dark: #c31c1c;
--kortex-glass: rgba(255, 255, 255, 0.05);
--kortex-glass-border: rgba(255, 255, 255, 0.08);
--kortex-zinc-300: #d4d4d8;
--kortex-zinc-400: #a1a1aa;
--kortex-zinc-500: #71717a;
--kortex-zinc-600: #52525b;
--kortex-zinc-800: #27272a;
--kortex-zinc-900: #18181b;
--kortex-slate-100: #f1f5f9;
--kortex-red-glow: rgba(239, 35, 60, 0.2);
--kortex-red-glow-strong: rgba(239, 35, 60, 0.5);
--kortex-font-manrope: 'Manrope', sans-serif;
--kortex-font-inter: 'Inter', sans-serif;
}
/* ========== Theme base (apply to body when using this theme) ========== */
body.theme-kortex {
background-color: #000;
background-image: radial-gradient(ellipse at bottom, #1a0505 0%, #0d0303 40%, #0a0a0a 70%, #000 100%);
color: #fff;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: var(--kortex-font-inter);
position: relative;
min-height: 100vh;
}
/* Grid pattern overlay (checkered) – fades at edges */
body.theme-kortex::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-size: 40px 40px;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
mask-image: radial-gradient(ellipse at center, black 35%, transparent 85%);
-webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 85%);
}
/* Subtle red glow orbs */
body.theme-kortex::after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(circle at 20% 15%, rgba(239, 35, 60, 0.1) 0%, transparent 45%),
radial-gradient(circle at 80% 85%, rgba(239, 35, 60, 0.06) 0%, transparent 40%);
mix-blend-mode: screen;
}
body.theme-kortex .theme-kortex-content {
position: relative;
z-index: 1;
}
/* Keep all content above background layers */
.theme-kortex section {
position: relative;
z-index: 1;
}
/* Navbar: always fixed on scroll (do not override with position: relative) */
.theme-kortex .navbar.navbar-fixed-top,
.theme-kortex nav.navbar.navbar-dropdown.navbar-fixed-top {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 9999 !important;
}
.theme-kortex section:first-of-type {
position: relative;
z-index: 1;
}
/* Menu section + navbar above all content; content sections stay z-index:1 above background */
.theme-kortex #menu-0 > section:first-child {
z-index: 9999 !important;
position: relative;
}
.theme-kortex .btn-black,
.theme-kortex .btn-primary {
background-color: var(--kortex-accent);
border-color: var(--kortex-accent);
color: #fff;
}
.theme-kortex .btn-black:hover,
.theme-kortex .btn-primary:hover {
background-color: var(--kortex-accent-dark);
border-color: var(--kortex-accent-dark);
color: #fff;
}
/* ========== Scrollbar ========== */
.theme-kortex ::-webkit-scrollbar {
width: 8px;
}
.theme-kortex ::-webkit-scrollbar-track {
background: #0a0a0a;
}
.theme-kortex ::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
.theme-kortex ::-webkit-scrollbar-thumb:hover {
background: var(--kortex-accent);
}
/* ========== Selection ========== */
.theme-kortex ::selection {
background: var(--kortex-accent);
color: white;
}
/* ========== GPU optimization ========== */
.optimize-gpu {
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
/* ========== Star animation keyframes ========== */
@keyframes animStar {
from { transform: translateY(0); }
to { transform: translateY(-2000px); }
}
/* ========== Shiny CTA button ========== */
.shiny-cta {
position: relative;
overflow: hidden;
border-radius: 9999px;
background: linear-gradient(#000, #000) padding-box,
linear-gradient(90deg, transparent 20%, var(--kortex-accent) 50%, transparent 80%) border-box;
border: 1px solid transparent;
background-size: 200% 100%;
animation: border-shine 4s linear infinite;
}
@keyframes border-shine {
0% { background-position: 200% 0, 200% 0; }
100% { background-position: -200% 0, -200% 0; }
}
.shiny-cta::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle at center, var(--kortex-red-glow), transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.shiny-cta:hover::before {
opacity: 1;
}
/* ========== Grid background pattern ========== */
.bg-grid-pattern {
background-size: 40px 40px;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
-webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
}
/* ========== Glass card ========== */
.glass-card {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--kortex-glass-border);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.glass-card:hover {
border-color: rgba(239, 35, 60, 0.4);
transform: translateY(-5px);
box-shadow: 0 10px 40px -10px rgba(239, 35, 60, 0.15);
}
/* ========== Globe canvas ========== */
canvas#globe-canvas {
opacity: 0;
transition: opacity 1s ease-in-out;
cursor: grab;
}
canvas#globe-canvas:active {
cursor: grabbing;
}
canvas#globe-canvas.loaded {
opacity: 1;
}
/* ========== Scroll progress bar ========== */
.scroll-progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 2px;
z-index: 60;
background: transparent;
}
.scroll-progress-fill {
height: 100%;
background: var(--kortex-accent);
width: 0%;
transition: width 0.1s ease-out;
box-shadow: 0 0 10px var(--kortex-accent);
}
/* ========== Radial gradient backgrounds (utility) ========== */
.bg-radial-kortex {
background: radial-gradient(ellipse at bottom, #1a0505 0%, #000000 100%);
}
.bg-glow-orb-accent {
background: var(--kortex-red-glow);
border-radius: 50%;
filter: blur(80px);
mix-blend-mode: screen;
}
/* ========== Typography helpers ========== */
.font-manrope { font-family: var(--kortex-font-manrope); }
.font-inter { font-family: var(--kortex-font-inter); }
.text-accent { color: var(--kortex-accent); }
.bg-accent { background-color: var(--kortex-accent); }
/* ========== Override page backgrounds (inline styles) – dark theme ========== */
/* Hero: transparent so body gradient + grid show through */
.theme-kortex section.header2.mbr-parallax-background,
.theme-kortex #header2-1 {
background-image: none !important;
background-color: transparent !important;
background: transparent !important;
}
.theme-kortex #header2-1 .mbr-overlay {
opacity: 0.4 !important;
background-color: #000 !important;
}
/* Footer / CTA section: solid black (like generated-page footer) */
.theme-kortex #header2-2 {
background-image: none !important;
background-color: #000 !important;
background: #000 !important;
border-top: 1px solid var(--kortex-zinc-900);
}
.theme-kortex #header2-2 .mbr-overlay {
display: none !important;
}
/* Content sections: transparent so body gradient + grid show */
.theme-kortex section.mbr-section,
.theme-kortex section.article,
.theme-kortex section.mbr-section__container,
.theme-kortex .mbr-cards,
.theme-kortex .mbr-cards-row,
.theme-kortex .mbr-cards-col {
background-color: transparent !important;
}
.theme-kortex section#threat-landscape,
.theme-kortex section#why-redfox,
.theme-kortex section#solutions,
.theme-kortex section#content1-j,
.theme-kortex section#content1-k,
.theme-kortex section#features1-e {
background-color: transparent !important;
}
/* Solution cards: glass-card effect (floating like Neural Synthesis) */
.theme-kortex .card.glass-card,
.theme-kortex .card.cart-block.glass-card {
background: rgba(0, 0, 0, 0.6) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--kortex-glass-border) !important;
border-radius: 1.5rem;
padding: 1.5rem 2rem;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
color: #e5e5e5;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.theme-kortex .card.glass-card:hover,
.theme-kortex .card.cart-block.glass-card:hover {
border-color: rgba(239, 35, 60, 0.4) !important;
transform: translateY(-5px);
box-shadow: 0 10px 40px -10px rgba(239, 35, 60, 0.15);
}
.theme-kortex .card.glass-card .card-block,
.theme-kortex .card.cart-block.glass-card .card-block {
background: transparent !important;
border: none !important;
}
.theme-kortex .card.glass-card .card-img,
.theme-kortex .card.cart-block.glass-card .card-img {
border-radius: 1rem 1rem 0 0;
overflow: hidden;
}
/* Ensure both solution cards have same light text (Individual + Enterprise) */
.theme-kortex .card.glass-card .card-title,
.theme-kortex .card.cart-block.glass-card .card-title,
.theme-kortex .card.glass-card .card-text,
.theme-kortex .card.cart-block.glass-card .card-text,
.theme-kortex .card.glass-card p,
.theme-kortex .card.cart-block.glass-card p,
.theme-kortex .card.glass-card ul,
.theme-kortex .card.cart-block.glass-card ul,
.theme-kortex .card.glass-card li,
.theme-kortex .card.cart-block.glass-card li {
color: rgba(255, 255, 255, 0.9) !important;
}
.theme-kortex .card.glass-card .card-title,
.theme-kortex .card.cart-block.glass-card .card-title {
color: #fff !important;
}
.theme-kortex .card-title,
.theme-kortex .mbr-section-title {
color: #fff;
}
/* OUR SOLUTIONS: second word in accent */
.theme-kortex .mbr-section-title .text-accent {
color: var(--kortex-accent);
}
/* ========== Gradient title accent (like generated-page Hero, with our red) ========== */
/* Use on a inside a heading: part of text gets white → red → light fade */
.theme-kortex .title-accent-gradient {
background: linear-gradient(to bottom right, #fff 0%, rgba(255, 255, 255, 0.95) 25%, rgba(255, 180, 180, 0.9) 50%, var(--kortex-accent) 75%, rgba(221, 34, 34, 0.5) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: inherit;
letter-spacing: inherit;
}
/* Stronger red in the middle, still light at end */
.theme-kortex .title-accent-gradient-strong {
background: linear-gradient(to bottom right, #fff 0%, rgba(255, 255, 255, 0.95) 20%, var(--kortex-accent) 50%, rgba(221, 34, 34, 0.6) 85%, rgba(221, 34, 34, 0.35) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: inherit;
letter-spacing: inherit;
}
/* Heading sizes for gradient titles – use with .mbr-section-title */
/* Current size: same as display-2 (2.25rem) – default, no extra class needed */
/* Large size: for hero / landing – use .hero-heading-lg on the heading */
.theme-kortex .hero-heading-lg.mbr-section-title,
.theme-kortex .hero-heading-lg {
font-size: 2.5rem;
font-weight: 700;
letter-spacing: -0.5px;
line-height: 1.15;
margin-bottom: 1.25rem;
margin-top: 0;
color: #fff;
}
@media (min-width: 768px) {
.theme-kortex .hero-heading-lg.mbr-section-title,
.theme-kortex .hero-heading-lg {
font-size: 3.25rem;
}
}
@media (min-width: 992px) {
.theme-kortex .hero-heading-lg.mbr-section-title,
.theme-kortex .hero-heading-lg {
font-size: 4rem;
}
}
.theme-kortex .card-text,
.theme-kortex .lead,
.theme-kortex p {
color: rgba(255, 255, 255, 0.85);
}
.theme-kortex section:first-of-type {
background-color: rgba(0, 0, 0, 0.75) !important;
}
.theme-kortex a:not(.btn) {
color: rgba(255, 255, 255, 0.9);
}
.theme-kortex a:not(.btn):hover {
color: var(--kortex-accent);
}
.theme-kortex .btn-red {
background-color: var(--kortex-accent) !important;
border-color: var(--kortex-accent) !important;
color: #fff !important;
}
.theme-kortex .btn-red:hover {
background-color: var(--kortex-accent-dark) !important;
border-color: var(--kortex-accent-dark) !important;
color: #fff !important;
}
.theme-kortex ul {
color: rgba(255, 255, 255, 0.85);
}
.theme-kortex strong {
color: #fff;
}
.theme-kortex h3,
.theme-kortex h4 {
color: #fff;
}
/* ========== Hero Globe (replaces hero-animation iframe) ========== */
.theme-kortex .hero-globe-wrap {
position: relative;
width: 100%;
height: 380px;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 768px) {
.theme-kortex .hero-globe-wrap {
height: 480px;
min-height: 480px;
}
}
@media (min-width: 992px) {
.theme-kortex .hero-globe-wrap {
height: 520px;
min-height: 520px;
}
}
.theme-kortex .globe-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.theme-kortex .globe-canvas {
max-width: 100%;
max-height: 100%;
width: auto !important;
height: auto !important;
opacity: 0;
transition: opacity 0.4s ease;
}
.theme-kortex .globe-canvas.loaded {
opacity: 1;
}
.theme-kortex .globe-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.75rem;
font-family: monospace;
color: var(--kortex-accent);
pointer-events: none;
}
.theme-kortex .globe-hint {
position: absolute;
bottom: 0.5rem;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
font-family: monospace;
color: var(--kortex-zinc-500);
text-transform: uppercase;
letter-spacing: 0.1em;
pointer-events: none;
white-space: nowrap;
}
@media (min-width: 992px) {
.theme-kortex .globe-hint {
bottom: 1rem;
}
}
/* ========== Page: Personal (redfox-personal) – same theme CSS, no separate file ========== */
/* Hero: exactly like INDEX – gradient + checkered grid + red orbs + overlay */
body.page-personal #header2-1 {
position: relative;
overflow: visible;
background-color: #000;
background-image: radial-gradient(ellipse at bottom, #1a0505 0%, #0d0303 40%, #0a0a0a 70%, #000 100%);
background-size: 100% 100%;
background-position: 0 0;
}
body.page-personal #header2-1 .mbr-overlay {
opacity: 0.4 !important;
background-color: #000 !important;
}
/* Checkered grid (same as index body::before) – visible pattern */
body.page-personal #header2-1::before {
content: '';
display: block !important; /* override style.css which hides .mbr-section-hero::before */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
pointer-events: none;
background-repeat: repeat;
background-size: 40px 40px;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
/* Red glow orbs (same as index + more red) */
body.page-personal #header2-1::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(circle at 20% 15%, rgba(221, 34, 34, 0.2) 0%, transparent 50%),
radial-gradient(circle at 85% 80%, rgba(221, 34, 34, 0.15) 0%, transparent 45%),
radial-gradient(circle at 50% 65%, rgba(195, 28, 28, 0.12) 0%, transparent 40%),
radial-gradient(circle at 70% 20%, rgba(239, 35, 60, 0.1) 0%, transparent 35%),
radial-gradient(circle at 15% 70%, rgba(221, 34, 34, 0.08) 0%, transparent 35%);
mix-blend-mode: screen;
}
body.page-personal #header2-1 .mbr-section-title,
body.page-personal #header2-1 .mbr-section-text,
body.page-personal #header2-1 .mbr-section-text p {
color: #fff !important;
}
body.page-personal #header2-1 .title-accent-gradient {
background: linear-gradient(to bottom right, #fff 0%, rgba(255, 255, 255, 0.95) 25%, rgba(255, 180, 180, 0.9) 50%, var(--kortex-accent) 75%, rgba(221, 34, 34, 0.5) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: inherit;
letter-spacing: inherit;
}
/* Footer: dark like INDEX */
body.page-personal #header2-2 {
background-color: #000 !important;
background-image: none !important;
background: #000 !important;
border-top: 1px solid #18181b;
}
/* Red accent buttons */
body.page-personal .btn-black {
background-color: var(--kortex-accent) !important;
border-color: var(--kortex-accent) !important;
color: #fff !important;
}
body.page-personal .btn-black:hover {
background-color: var(--kortex-accent-dark) !important;
border-color: var(--kortex-accent-dark) !important;
color: #fff !important;
}
/* Decorative circles – large and strong (gray & white sections) */
.personal-section-circles {
position: relative;
overflow: hidden;
}
.personal-section-circles::before,
.personal-section-circles::after {
content: '';
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
/* Gray section WHY REDFOX: only dark circle (no red on gray in first row) */
#header3-k.personal-section-circles::before {
width: 520px;
height: 520px;
background: rgba(24, 24, 27, 0.45);
top: -120px;
right: -120px;
}
#header3-k.personal-section-circles::after {
display: block; /* one huge dark circle bottom-left (hero tones) */
width: 110vmax;
height: 110vmax;
max-width: 1600px;
max-height: 1600px;
bottom: -20%;
left: -30%;
top: auto;
right: auto;
background: radial-gradient(circle at center, #1a0505 0%, #0d0303 35%, #0a0a0a 60%, #000 85%);
box-shadow: none;
}
/* Old gray content block – no circles (section replaced by cards) */
#content1-j.personal-section-circles::before,
#content1-j.personal-section-circles::after {
display: none;
}
/* Gray section WHY REDFOX: strong dark + red circles; dark bg so white title is visible */
/* Override: when WHY REDFOX is the new card layout, use light bg and card styles */
#header3-k.why-redfox-section.personal-section-circles {
background-color: #f1f5f9 !important;
}
#header3-k.why-redfox-section .mbr-section-title {
color: #18181b !important;
margin-bottom: 2.5rem;
}
/* Zigzag cards – reusable pattern (no images, round accent only) */
.why-redfox-cards {
margin-top: 0;
}
.why-redfox-card {
display: flex;
align-items: stretch;
flex-wrap: wrap;
margin-bottom: 2rem;
gap: 1.5rem;
position: relative;
z-index: 1;
justify-content: flex-start;
}
.why-redfox-card--right {
justify-content: flex-end;
}
.why-redfox-card:last-child {
margin-bottom: 0;
}
.why-redfox-card__content {
flex: 0 1 870px;
max-width: 100%;
min-width: 0;
background: #fff;
border-radius: 1.25rem;
padding: 1.75rem 2rem;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
transition: box-shadow 0.3s ease;
}
.why-redfox-card__content:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(221, 34, 34, 0.06);
}
.why-redfox-card__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--kortex-accent);
margin: 0 0 0.75rem 0;
line-height: 1.3;
}
.why-redfox-card__content p {
margin: 0 0 0.75rem 0;
color: #374151;
line-height: 1.65;
font-size: 1rem;
}
.why-redfox-card__content p:last-child {
margin-bottom: 0;
}
/* Decorative round accent (no image) – hidden */
.why-redfox-card__accent {
display: none;
}
@media (min-width: 768px) {
.why-redfox-card--left {
flex-direction: row;
}
.why-redfox-card--right {
flex-direction: row;
}
}
@media (max-width: 767px) {
.why-redfox-card {
flex-direction: column;
align-items: center;
justify-content: center;
}
}
/* White section OVERVIEW: no circles */
#overview.personal-section-circles::before,
#overview.personal-section-circles::after {
display: none;
}
/* OUR SOLUTIONS cards section: no circles */
section#features1-e.personal-section-circles::before,
section#features1-e.personal-section-circles::after {
display: none;
}
.personal-section-circles .container,
section#features1-e.personal-section-circles .mbr-cards-row {
position: relative;
z-index: 1;
}
/* OUR SOLUTIONS: round product images */
body.page-personal #features1-e .card.cart-block .card-img {
width: 140px;
height: 140px;
margin: 0 auto 1rem;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #f8f8f8;
}
body.page-personal #features1-e .card.cart-block .card-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
body.page-personal section#features1-e .container {
position: relative;
z-index: 1;
}