html{
scroll-behavior:smooth;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}
body{
background:#050816;
color:white;
}
nav{
height:70px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 8%;
background:
rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
position:fixed;
width:100%;
top:0;
z-index:10;
}
.logo{
font-size:24px;
font-weight:bold;
}
ul{
display:flex;
gap:35px;
list-style:none;
}
li{
cursor:pointer;
}
.hero{
height:100vh;
display:flex;
align-items:center;
padding:0 10%;
background:
radial-gradient(
circle at top right,
#2563eb,
#050816 45%
);
}
.hero-content{
max-width:800px;
}
h1{
font-size:65px;
margin-bottom:25px;
}
.hero p{
font-size:22px;
line-height:1.6;
color:#cbd5e1;
}
.buttons{
margin-top:40px;
}
/* Hero Buttons */
.buttons a,
.buttons button{
padding:15px 35px;
border-radius:35px;
background:#2563eb;
color:white;
margin-right:20px;
text-decoration:none;
border:none;
cursor:pointer;
font-size:16px;
transition:.3s;
}
.buttons a:hover,
.buttons button:hover{
transform:scale(1.05);
box-shadow:
0 0 25px #2563eb;
}
.secondary{
background:white !important;
color:#111 !important;
}
/* Navbar Links */
nav a{
background:none;
padding:0;
color:white;
text-decoration:none;
font-size:16px;
}
nav a:hover{
color:#60a5fa;
}
.secondary{
background:white;
color:#111;
}
section{
padding:90px 10%;
}
h2{
text-align:center;
font-size:40px;
margin-bottom:50px;
}
.cards{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}
.card{
background:
rgba(255,255,255,0.08);
padding:35px;
border-radius:20px;
font-size:35px;
transition:.3s;
}
.card:hover{
transform:translateY(-10px);
background:#1e40af;
}
.card h3{
font-size:22px;
margin:20px 0;
}
.card p{
font-size:16px;
color:#cbd5e1;
}
.tech-box{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:25px;
}
.tech-box span{
background:#111827;
padding:20px 35px;
border-radius:20px;
}
.flow{
text-align:center;
font-size:28px;
background:#111827;
padding:40px;
border-radius:25px;
}
footer{
padding:25px;
text-align:center;
background:#020617;
color:#94a3b8;
}
@media(max-width:800px){
h1{
font-size:42px;
}
ul{
display:none;
}
}
/* IBM Chat Desktop Size Override */
.wxo--chat-container,
[class*="chat-container"]{
width:520px !important;
height:720px !important;
}
[class*="launcher"]{
transform:scale(1.1);
}
@media(min-width:900px){
.wxo--chat-container,
[class*="chat-container"]{
right:40px !important;
bottom:40px !important;
}
}
/* IBM Chat Enhancement */
[class*="chat"]{
font-size:16px;
}
[class*="launcher"]{
transform:scale(1.15);
}
/* PROFILE */
.profile-section{
background:#020617;
}
.profile-card{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:50px;
background:
rgba(255,255,255,0.07);
padding:60px;
border-radius:30px;
box-shadow:
0 0 50px rgba(37,99,235,.25);
}
.profile-info h3{
font-size:35px;
margin-bottom:20px;
}
.profile-info p{
font-size:18px;
line-height:1.8;
color:#cbd5e1;
}
.steps{
margin-top:30px;
display:flex;
flex-direction:column;
gap:15px;
color:#60a5fa;
}
.profile-form{
display:flex;
flex-direction:column;
gap:20px;
}
.profile-form input,
.profile-form select,
.profile-form textarea,
.upload-box{
background:
rgba(255,255,255,.08);
border:
1px solid rgba(96,165,250,.4);
color:white;
padding:18px 22px;
border-radius:18px;
font-size:16px;
outline:none;
backdrop-filter:blur(20px);
transition:.3s;
}
.profile-form input:focus,
.profile-form textarea:focus,
.profile-form select:focus{
border-color:#38bdf8;
box-shadow:
0 0 20px rgba(56,189,248,.4);
}
.profile-form option{
color:black;
}
.profile-form textarea{
height:150px;
}
#generatedPrompt{
height:220px;
background:
rgba(15,23,42,.9);
color:#93c5fd;
}
.action-buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
}
.action-buttons button{
flex:1;
padding:15px;
border-radius:15px;
border:none;
cursor:pointer;
background:#2563eb;
color:white;
}
.copy-btn{
background:#16a34a !important;
}
.start-btn{
background:#9333ea !important;
}
@media(max-width:900px){
.profile-card{
grid-template-columns:1fr;
}
}
.profile-form input::placeholder,
.profile-form textarea::placeholder{
color:#94a3b8;
opacity:1;
line-height:1.6;
}
.prompt-guide{
background:
linear-gradient(
135deg,
rgba(37,99,235,.25),
rgba(147,51,234,.2)
);
border:
1px solid rgba(96,165,250,.4);
padding:20px;
border-radius:18px;
}
.prompt-guide h3{
margin-bottom:15px;
font-size:20px;
}
.prompt-guide p{
line-height:1.8;
color:#cbd5e1;
}
.upload-box{
display:flex;
align-items:center;
gap:10px;
}
#resumeText{
color:#cbd5e1;
}