/* =========================================================== 24SEVEN NEXUS — SHARED SITE STYLESHEET Accent color per page is set via --accent / --accent-rgb on =========================================================== */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@100;300;600;900&family=JetBrains+Mono:wght@300;400;500&display=swap'); *{margin:0; padding:0; box-sizing:border-box;} html{scroll-behavior:smooth;} body{background:#04060a; color:#eef4fb; font-family:'Montserrat',sans-serif; overflow-x:hidden;} a{color:inherit; text-decoration:none;} img{max-width:100%; display:block;} /* ============ NAV ============ */ nav{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:22px 44px; background:rgba(4,6,10,.7); backdrop-filter:blur(14px); border-bottom:1px solid rgba(var(--accent-rgb),.18); animation:navPulse 4s ease-in-out infinite;} @keyframes navPulse{0%,100%{border-bottom-color:rgba(var(--accent-rgb),.12);} 50%{border-bottom-color:rgba(var(--accent-rgb),.35);}} .nav-logo{font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:.08em; color:#eef4fb;} .nav-logo span{color:#00E5FF; text-shadow:0 0 12px rgba(0,229,255,.6);} .nav-links{display:flex; gap:30px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#8fa0b8;} .nav-links a{transition:.2s;} .nav-links a:hover, .nav-links a.active{color:var(--accent); text-shadow:0 0 10px rgba(var(--accent-rgb),.7);} .nav-cta{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; border:1px solid #7B61FF; color:#c9beff; padding:9px 18px; border-radius:2px; transition:.25s;} .nav-cta:hover{background:#7B61FF; color:#04060a; box-shadow:0 0 24px -4px rgba(123,97,255,.8);} @media(max-width:820px){ nav{padding:18px 20px;} .nav-links{display:none;} } /* ============ SUITE HEADER (reused across all suite pages) ============ */ .suite-stage{width:100%; min-height:72vh; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:120px 24px 60px;} .stars{position:absolute; inset:0;} .star{position:absolute; background:white; border-radius:50%; animation:twinkle var(--d) ease-in-out infinite;} @keyframes twinkle{0%,100%{opacity:var(--min); transform:scale(1);} 50%{opacity:1; transform:scale(1.4);}} .glow-orb{position:absolute; width:900px; height:420px; background:radial-gradient(ellipse, rgba(var(--accent-rgb),0.22) 0%, transparent 70%); top:30%; left:50%; transform:translate(-50%,-50%); animation:orbPulse 3s ease-in-out infinite;} .glow-orb2{position:absolute; width:500px; height:260px; background:radial-gradient(ellipse, rgba(0,229,255,0.12) 0%, transparent 70%); bottom:0; right:6%; animation:orbPulse 4s ease-in-out infinite reverse;} @keyframes orbPulse{0%,100%{transform:translate(-50%,-50%) scale(1); opacity:.8;} 50%{transform:translate(-50%,-50%) scale(1.15); opacity:1;}} .grid-mark{position:absolute; inset:0; background-image:linear-gradient(rgba(var(--accent-rgb),.06) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--accent-rgb),.06) 1px,transparent 1px); background-size:34px 34px; mask-image:radial-gradient(ellipse at 50% 20%, black, transparent 75%); pointer-events:none;} .scanline{position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(to right,transparent,rgba(var(--accent-rgb),.5),transparent); animation:scan 7s linear infinite; z-index:5;} @keyframes scan{from{top:0; opacity:1;} to{top:100%; opacity:.3;}} .corner{position:absolute; width:20px; height:20px; z-index:10;} .corner.tl{top:96px; left:24px; border-top:1px solid rgba(var(--accent-rgb),.5); border-left:1px solid rgba(var(--accent-rgb),.5);} .corner.tr{top:96px; right:24px; border-top:1px solid rgba(var(--accent-rgb),.5); border-right:1px solid rgba(var(--accent-rgb),.5);} .corner.bl{bottom:24px; left:24px; border-bottom:1px solid rgba(0,229,255,.4); border-left:1px solid rgba(0,229,255,.4);} .corner.br{bottom:24px; right:24px; border-bottom:1px solid rgba(0,229,255,.4); border-right:1px solid rgba(0,229,255,.4);} .readout{position:absolute; bottom:24px; left:28px; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.15em; color:rgba(var(--accent-rgb),.8); text-transform:uppercase; z-index:10; line-height:1.6;} .readout span{color:rgba(0,229,255,.9);} .crumb{position:relative; z-index:2; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.15em; color:#8fa0b8; text-transform:uppercase; margin-bottom:18px; text-align:center;} .crumb span{color:var(--accent);} .suite-eyebrow{position:relative; z-index:2; font-family:'Montserrat',sans-serif; font-weight:100; font-size:clamp(16px,2vw,26px); letter-spacing:.5em; color:rgba(255,255,255,.85); text-transform:uppercase; margin-bottom:-2px; animation:revealEyebrow 1s cubic-bezier(.2,.8,.2,1) both;} @keyframes revealEyebrow{from{opacity:0; letter-spacing:.85em;} to{opacity:1; letter-spacing:.5em;}} .suite-name{position:relative; z-index:2; font-family:'Bebas Neue',sans-serif; font-size:clamp(56px,12vw,150px); line-height:.85; letter-spacing:.03em; color:var(--accent); text-align:center; text-shadow:0 0 20px rgba(var(--accent-rgb),1),0 0 40px rgba(var(--accent-rgb),.8),0 0 90px rgba(0,229,255,.35),0 0 170px rgba(var(--accent-rgb),.25); animation:revealName 1.2s .2s cubic-bezier(.2,.8,.2,1) both, nameGlow 2.5s 1.4s ease-in-out infinite;} @keyframes revealName{from{opacity:0; transform:scaleX(.7) translateY(30px); filter:blur(20px);} to{opacity:1; transform:scaleX(1) translateY(0); filter:blur(0);}} @keyframes nameGlow{0%,100%{text-shadow:0 0 20px rgba(var(--accent-rgb),1),0 0 40px rgba(var(--accent-rgb),.8),0 0 90px rgba(0,229,255,.35),0 0 170px rgba(var(--accent-rgb),.2);} 50%{text-shadow:0 0 30px rgba(var(--accent-rgb),1),0 0 65px rgba(var(--accent-rgb),.9),0 0 130px rgba(0,229,255,.55),0 0 260px rgba(var(--accent-rgb),.3);}} .suite-divider{position:relative; z-index:2; width:280px; max-width:70vw; height:1px; background:linear-gradient(to right, transparent 0%, rgba(var(--accent-rgb),.8) 30%, rgba(0,229,255,.8) 70%, transparent 100%); margin:14px 0; animation:lineReveal 1s .7s both;} .suite-divider::after{content:'⬡'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--accent); text-shadow:0 0 10px var(--accent); background:#04060a; padding:0 12px;} @keyframes lineReveal{from{opacity:0; width:0;} to{opacity:1; width:280px;}} .suite-tagline{position:relative; z-index:2; font-family:'JetBrains Mono',monospace; font-weight:300; font-size:13px; letter-spacing:.35em; color:#00E5FF; text-transform:uppercase; text-shadow:0 0 18px rgba(0,229,255,.6); margin-top:10px; text-align:center; opacity:0; animation:fadeIn 1s 1.3s both;} @keyframes fadeIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}} .status-pill{position:relative; z-index:2; margin-top:26px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#4FBA6F; border:1px solid #4FBA6F; padding:7px 16px; border-radius:20px; box-shadow:0 0 20px -6px #4FBA6F; opacity:0; animation:fadeIn 1s 1.6s both;} .status-pill.soon{color:#E8734A; border-color:#E8734A; box-shadow:0 0 20px -6px #E8734A;} /* ============ GENERIC SECTION HEAD ============ */ .section-head{text-align:center; max-width:640px; margin:0 auto 50px; position:relative; z-index:2;} .section-head .eyebrow{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--accent); text-shadow:0 0 14px rgba(var(--accent-rgb),.6);} .section-head h2{font-family:'Bebas Neue',sans-serif; font-size:clamp(32px,4.5vw,54px); margin:14px 0 12px; letter-spacing:.02em;} .section-head p{color:#a9b8cc; font-size:15.5px; font-weight:300;} /* ============ CAPABILITIES GRID ============ */ .cap-section{position:relative; padding:100px 44px; max-width:1300px; margin:0 auto;} .cap-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;} .cap-card{padding:28px 24px; border-radius:14px; border:1.5px solid rgba(var(--accent-rgb),.35); background:linear-gradient(160deg, rgba(var(--accent-rgb),.10), rgba(14,18,32,.9)); transition:.3s; position:relative; overflow:hidden;} .cap-card::before{content:''; position:absolute; top:0; left:16px; right:16px; height:2px; background:var(--accent); box-shadow:0 0 14px var(--accent); border-radius:0 0 2px 2px;} .cap-card:hover{transform:translateY(-6px); box-shadow:0 20px 50px -14px rgba(var(--accent-rgb),.5);} .cap-card h4{font-family:'Bebas Neue',sans-serif; font-size:19px; letter-spacing:.03em; color:#eef4fb; margin-bottom:8px;} .cap-card p{color:#a9b8cc; font-size:13px; font-weight:300; line-height:1.6;} @media(max-width:900px){.cap-grid{grid-template-columns:1fr;}} /* ============ PROCESS / STEPS ============ */ .process-section{position:relative; padding:110px 44px; background:radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),.10) 0%, #04060a 60%); border-top:1px solid rgba(var(--accent-rgb),.12); overflow:hidden;} .process-steps{position:relative; z-index:2; display:flex; gap:0; max-width:1200px; margin:0 auto; flex-wrap:wrap; justify-content:center;} .step{flex:1; min-width:220px; padding:32px 24px; position:relative; border-left:1px solid rgba(var(--accent-rgb),.2);} .step:first-child{border-left:none;} .step .num{font-family:'Bebas Neue',sans-serif; font-size:44px; color:var(--accent); text-shadow:0 0 20px rgba(var(--accent-rgb),.6); line-height:1;} .step h3{font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:.03em; margin:10px 0 8px;} .step p{color:#a9b8cc; font-size:13.5px; font-weight:300; line-height:1.6;} @media(max-width:900px){.process-steps{flex-direction:column;} .step{border-left:none; border-top:1px solid rgba(var(--accent-rgb),.2);} .step:first-child{border-top:none;}} /* ============ TWO-COLUMN FEATURE BLOCK ============ */ .split-block{position:relative; padding:110px 44px; max-width:1300px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;} .split-block .txt .eyebrow{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--accent); text-shadow:0 0 14px rgba(var(--accent-rgb),.6);} .split-block .txt h2{font-family:'Bebas Neue',sans-serif; font-size:clamp(30px,4vw,46px); margin:14px 0 16px; letter-spacing:.02em;} .split-block .txt p{color:#a9b8cc; font-size:15px; font-weight:300; line-height:1.7; margin-bottom:14px;} .split-block .txt ul{list-style:none; margin-top:20px;} .split-block .txt li{font-family:'JetBrains Mono',monospace; font-size:12px; color:#c9d4e2; padding:9px 0; border-top:1px solid rgba(var(--accent-rgb),.15); display:flex; gap:10px; align-items:center;} .split-block .txt li::before{content:'●'; color:var(--accent); font-size:8px; text-shadow:0 0 8px var(--accent);} .split-visual{position:relative; aspect-ratio:4/3; border-radius:16px; border:1px solid rgba(var(--accent-rgb),.35); background:linear-gradient(160deg, rgba(var(--accent-rgb),.16), rgba(10,12,20,.95)); box-shadow:0 30px 80px -20px rgba(0,0,0,.6), 0 0 60px -20px rgba(var(--accent-rgb),.4); overflow:hidden; display:flex; align-items:center; justify-content:center;} .split-visual .scanline{animation-duration:5s;} .split-visual-icon{width:90px; height:90px; opacity:.9;} .split-visual-icon svg{width:100%; height:100%; stroke:var(--accent); filter:drop-shadow(0 0 16px rgba(var(--accent-rgb),.6));} @media(max-width:900px){.split-block{grid-template-columns:1fr;}} /* ============ CTA ============ */ .cta-section{position:relative; padding:130px 44px; text-align:center; background:radial-gradient(ellipse at 50% 100%, rgba(var(--accent-rgb),.12), #04060a 70%); border-top:1px solid rgba(var(--accent-rgb),.12);} .cta-section .eyebrow{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:#00E5FF; margin-bottom:18px;} .cta-section h2{font-family:'Bebas Neue',sans-serif; font-size:clamp(36px,5.5vw,64px); letter-spacing:.02em; margin-bottom:16px;} .cta-section p{color:#a9b8cc; font-size:16px; font-weight:300; max-width:560px; margin:0 auto 36px;} .btn-primary{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:linear-gradient(135deg,var(--accent),#00E5FF); color:#04060a; padding:17px 34px; border-radius:2px; font-weight:700; box-shadow:0 10px 40px -8px rgba(var(--accent-rgb),.5); display:inline-block; animation:btnGlow 2.5s ease-in-out infinite;} @keyframes btnGlow{0%,100%{box-shadow:0 10px 40px -8px rgba(var(--accent-rgb),.5);} 50%{box-shadow:0 10px 55px -6px rgba(var(--accent-rgb),.8), 0 0 60px -10px rgba(0,229,255,.6);}} .btn-ghost{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; border:1px solid rgba(255,255,255,.25); color:#eef4fb; padding:15px 30px; border-radius:2px; display:inline-block;} /* ============ FOOTER ============ */ footer{position:relative; z-index:2; padding:50px 44px; border-top:1px solid rgba(var(--accent-rgb),.15); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; background:#04060a;} footer .fl{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#8fa0b8;} footer .fl span{color:var(--accent); text-shadow:0 0 10px rgba(var(--accent-rgb),.5);} .footer-suites{display:flex; gap:18px; flex-wrap:wrap;} .footer-suites a{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; transition:.2s;} .footer-suites a:hover{text-shadow:0 0 10px currentColor;} /* ============ STATUS BADGE (Suites overview grid) ============ */ .badge{font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:12px; display:inline-block;} .badge.available{color:#4FBA6F; border:1px solid #4FBA6F; box-shadow:0 0 14px -4px #4FBA6F;} .badge.separate{color:#8fa0b8; border:1px solid rgba(255,255,255,.25);}