332 lines
8.5 KiB
CSS
332 lines
8.5 KiB
CSS
/* =========================================
|
||
Obai Albeek – Portfolio Styles (Dark)
|
||
Palette: Onyx + Jade | v2
|
||
========================================= */
|
||
|
||
/* ---------- CSS Variables ---------- */
|
||
:root{
|
||
--bg: #0E1116; /* Onyx (Seitenhintergrund) */
|
||
--surface: #101721; /* Dunkle Card/Fläche */
|
||
--surface-2: #0B111A; /* noch dunklere Fläche */
|
||
--text: #E6E9EF; /* Primärtext hell */
|
||
--muted: #A8B0BF; /* Sekundärtext */
|
||
--line: rgba(255,255,255,.08);
|
||
|
||
--accent: #12B3A4; /* Jade/Türkis */
|
||
--accent-ink: #061014; /* Text auf Akzent (dunkel, angenehmer als weiß) */
|
||
|
||
--radius: 22px;
|
||
--shadow: 0 16px 40px rgba(0,0,0,.55);
|
||
--shadow-sm: 0 8px 24px rgba(0,0,0,.45);
|
||
|
||
--container: 1100px;
|
||
--space-1: .25rem;
|
||
--space-2: .5rem;
|
||
--space-3: .75rem;
|
||
--space-4: 1rem;
|
||
--space-5: 1.25rem;
|
||
--space-6: 1.5rem;
|
||
--space-7: 2rem;
|
||
--space-8: 2.5rem;
|
||
--space-9: 3rem;
|
||
}
|
||
|
||
/* ---------- Reset & Base ---------- */
|
||
*,
|
||
*::before,
|
||
*::after{ box-sizing: border-box; }
|
||
html, body{ height: 100%; scroll-behavior: smooth; }
|
||
|
||
body{
|
||
margin: 0;
|
||
font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
|
||
color: var(--text);
|
||
background:
|
||
radial-gradient(900px 600px at 20% -10%, #121925 0%, transparent 55%),
|
||
radial-gradient(1100px 700px at 110% -20%, #0F1721 0%, transparent 60%),
|
||
var(--bg);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
:focus-visible{
|
||
outline: 3px solid color-mix(in oklab, var(--accent), white 15%);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.container{
|
||
max-width: var(--container);
|
||
margin-inline: auto;
|
||
padding-inline: var(--space-7);
|
||
}
|
||
|
||
/* ---------- Sticky Topbar (Nav rechts, Name links) ---------- */
|
||
.topbar{
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
display: flex; /* NEU: Flex-Layout */
|
||
align-items: center;
|
||
justify-content: space-between;/* sorgt dafür, dass Nav ganz rechts sitzt */
|
||
padding: var(--space-4) var(--space-7);
|
||
backdrop-filter: saturate(1.05) blur(8px);
|
||
background: color-mix(in oklab, var(--bg), black 20% / 65%);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
/* Brand / Name links */
|
||
.topbar .brand{
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .6rem;
|
||
text-decoration: none;
|
||
}
|
||
.brand-mark{
|
||
display: inline-grid;
|
||
place-items: center;
|
||
width: 36px; height: 36px;
|
||
border-radius: 12px;
|
||
background: var(--accent);
|
||
color: var(--accent-ink);
|
||
font-weight: 800;
|
||
letter-spacing: .5px;
|
||
box-shadow: 0 8px 20px color-mix(in oklab, var(--accent), black 65%);
|
||
}
|
||
.brand-text{
|
||
color: var(--text);
|
||
font-weight: 800;
|
||
font-size: 1.08rem; /* Name deutlicher sichtbar */
|
||
letter-spacing: .2px;
|
||
}
|
||
|
||
/* Nav ganz rechts */
|
||
.nav{
|
||
margin-left: auto; /* bleibt als Absicherung */
|
||
display: flex;
|
||
gap: .6rem;
|
||
align-items: center;
|
||
}
|
||
.nav-link{
|
||
--pad-x: 1rem;
|
||
display: inline-block;
|
||
padding: .55rem var(--pad-x);
|
||
text-decoration: none;
|
||
color: var(--text);
|
||
background: rgba(255,255,255,.03);
|
||
border: 1px solid var(--line);
|
||
border-radius: 999px;
|
||
transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
.nav-link:hover{
|
||
transform: translateY(-1px);
|
||
background: rgba(255,255,255,.06);
|
||
border-color: rgba(255,255,255,.12);
|
||
}
|
||
.nav-link.cta{
|
||
background: var(--accent);
|
||
color: var(--accent-ink);
|
||
border-color: transparent;
|
||
box-shadow: 0 10px 26px color-mix(in oklab, var(--accent), black 58%);
|
||
}
|
||
|
||
/* ---------- Hero ---------- */
|
||
.hero{ padding: clamp(3rem, 5vw, 5rem) var(--space-7); }
|
||
|
||
.hero-card{
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: 1.1fr 1.4fr;
|
||
gap: var(--space-8);
|
||
align-items: center;
|
||
max-width: var(--container);
|
||
margin: 0 auto;
|
||
background: linear-gradient(180deg, var(--surface) 0%, color-mix(in oklab, var(--surface), black 8%) 100%);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
padding: clamp(1.25rem, 3vw, 2rem);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.hero-media{ position: relative; min-height: 240px; }
|
||
|
||
.hero-photo{
|
||
position: absolute;
|
||
inset: auto 0 0 50%;
|
||
transform: translate(-50%, 18%) scale(1.02);
|
||
width: min(320px, 78%);
|
||
aspect-ratio: 1/1;
|
||
object-fit: cover;
|
||
border-radius: 50%;
|
||
border: 10px solid var(--surface);
|
||
/* dezentes Teal-Glow */
|
||
box-shadow:
|
||
0 0 0 10px color-mix(in oklab, var(--accent), transparent 85%),
|
||
0 26px 60px color-mix(in oklab, var(--accent), black 70%);
|
||
background: #111;
|
||
}
|
||
|
||
/* Textblock */
|
||
.kicker{ margin: 0 0 .25rem 0; color: var(--muted); letter-spacing: .4px; }
|
||
.title{
|
||
margin: 0 0 .35rem 0;
|
||
font-size: clamp(2rem, 5vw, 3rem);
|
||
line-height: 1.15;
|
||
color: var(--text);
|
||
}
|
||
.subtitle{ margin: 0 0 var(--space-7) 0; color: var(--muted); }
|
||
|
||
/* ---------- Buttons ---------- */
|
||
.btn{
|
||
--px: 1.1rem;
|
||
display: inline-block;
|
||
padding: .75rem var(--px);
|
||
border-radius: 999px;
|
||
text-decoration: none;
|
||
font-weight: 800;
|
||
line-height: 1;
|
||
border: 1px solid transparent;
|
||
transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
|
||
cursor: pointer;
|
||
}
|
||
.btn:hover{ transform: translateY(-1px); }
|
||
|
||
.btn.primary{
|
||
background: var(--accent);
|
||
color: var(--accent-ink);
|
||
box-shadow: 0 10px 26px color-mix(in oklab, var(--accent), black 58%);
|
||
}
|
||
.btn.ghost{
|
||
background: rgba(255,255,255,.04);
|
||
color: var(--text);
|
||
border-color: var(--line);
|
||
}
|
||
.btn.small{
|
||
padding: .55rem .9rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* ---------- Social ---------- */
|
||
.social{ display:flex; gap:.5rem; margin:0; padding:0; list-style:none; }
|
||
.iconlink{
|
||
display: inline-grid;
|
||
place-items: center;
|
||
width: 40px; height: 40px;
|
||
border-radius: 12px;
|
||
border: 1px solid var(--line);
|
||
background: rgba(255,255,255,.03);
|
||
color: var(--text);
|
||
text-decoration: none;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
.iconlink:hover{
|
||
transform: translateY(-1px);
|
||
background: rgba(255,255,255,.06);
|
||
}
|
||
|
||
/* ---------- Sections ---------- */
|
||
.section{ padding: clamp(2.5rem, 5vw, 4rem) 0; scroll-margin-top: 90px; }
|
||
.section h2{ font-size: clamp(1.6rem, 3.4vw, 2rem); margin: 0 0 var(--space-5) 0; }
|
||
|
||
/* About */
|
||
.about .highlights{
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: .5rem;
|
||
padding: 0; margin: var(--space-6) 0 0 0;
|
||
list-style: "✓ ";
|
||
}
|
||
.about .highlights li{ padding-left: .4rem; color: var(--text); }
|
||
|
||
/* Skills */
|
||
.skills .skill-grid{
|
||
display: grid;
|
||
gap: var(--space-6);
|
||
grid-template-columns: repeat(4, 1fr);
|
||
}
|
||
.skill{
|
||
background: var(--surface-2);
|
||
border: 1px solid var(--line);
|
||
border-radius: calc(var(--radius) - 6px);
|
||
padding: var(--space-7);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
.skill h3{ margin: 0 0 .35rem 0; }
|
||
.skill p{ color: var(--muted); margin: 0; }
|
||
|
||
/* Projects */
|
||
.project-list{
|
||
display: grid;
|
||
gap: var(--space-6);
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
.project-card{
|
||
background: var(--surface);
|
||
border: 1px solid var(--line);
|
||
border-radius: calc(var(--radius) - 6px);
|
||
padding: var(--space-7);
|
||
display: grid;
|
||
gap: .9rem;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
.project-card .meta{ color: var(--muted); margin: .25rem 0 0 0; }
|
||
.project-actions{ display: flex; gap: .5rem; }
|
||
|
||
/* Kontakt */
|
||
.contact .contact-form{
|
||
margin-top: var(--space-6);
|
||
display: grid;
|
||
gap: var(--space-5);
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
.field{ display: grid; gap: .35rem; }
|
||
.field:nth-child(3){ grid-column: 1 / -1; }
|
||
label{ font-weight: 700; color: var(--text); }
|
||
input, textarea{
|
||
width: 100%;
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
padding: .85rem 1rem;
|
||
font: inherit;
|
||
background: #0A0F16;
|
||
color: var(--text);
|
||
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
|
||
}
|
||
input::placeholder, textarea::placeholder{ color: #8A93A5; }
|
||
input:focus, textarea:focus{
|
||
border-color: color-mix(in oklab, var(--accent), white 15%);
|
||
box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent), black 75%);
|
||
}
|
||
|
||
/* Footer */
|
||
.footer{
|
||
border-top: 1px solid var(--line);
|
||
background: #0A0F16;
|
||
padding: var(--space-6) 0;
|
||
text-align: center;
|
||
color: var(--muted);
|
||
}
|
||
|
||
/* ---------- Responsive ---------- */
|
||
@media (max-width: 1000px){
|
||
.hero-card{
|
||
grid-template-columns: 1fr;
|
||
padding-top: clamp(2rem, 6vw, 3rem);
|
||
}
|
||
.hero-photo{
|
||
position: static;
|
||
display: block;
|
||
margin: -3.5rem auto 0 auto;
|
||
transform: none;
|
||
width: 180px;
|
||
}
|
||
.skills .skill-grid{ grid-template-columns: repeat(2, 1fr); }
|
||
.project-list{ grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
|
||
@media (max-width: 640px){
|
||
.nav{ display: none; } /* optional: auf sehr klein ausblenden */
|
||
.container{ padding-inline: var(--space-5); }
|
||
.project-list, .skills .skill-grid{ grid-template-columns: 1fr; }
|
||
.contact .contact-form{ grid-template-columns: 1fr; }
|
||
}
|