/* ========================================================================== Portfolio Styles — Alexandre Babeanu -------------------------------------------------------------------------- TABLE OF CONTENTS 1) CSS VARIABLES (THEME) 2) BASE / RESET 3) LAYOUT CONTAINERS 4) HEADER & NAV 5) BUTTONS, BADGE & PILLS 6) HERO SECTION 7) TYPOGRAPHY & UTILITIES 8) GRID & CARD COMPONENTS 9) FILTER CHIPS 10) ABOUT & LISTS 11) FOOTER & CTA 12) ACCESSIBILITY HELPERS 13) RESPONSIVE BREAKPOINTS ========================================================================== */ /* ========================================================================== 1) CSS VARIABLES (THEME) -------------------------------------------------------------------------- - Dark theme defaults - Manual light theme toggle via [data-theme='light'] - OS preference fallback when no manual theme is set ========================================================================== */ :root{ --bg:#0b0b0c; --bg-soft:#121216; --card:#16171b; --txt:#e7e9ee; --muted:#a2a7b7; --acc:#7c9cff; --ring:#2b2f3a; --shadow: 0 10px 30px rgba(0,0,0,.25), 0 6px 12px rgba(0,0,0,.15); } /* Manual light theme (set by JS on ) */ :root[data-theme='light']{ --bg:#fafafa; --bg-soft:#ffffff; --card:#ffffff; --txt:#0b0c10; --muted:#5c6270; --acc:#335cff; --ring:#e8ecf7; } /* Decorative background only when light theme is active */ html[data-theme='light'] body{ background-image: radial-gradient(40rem 40rem at 10% -10%, #e8edff 0, transparent 60%), radial-gradient(30rem 30rem at 110% 0, #ffe9f2 0, transparent 50%); } /* OS preference if no manual theme has been set */ @media (prefers-color-scheme: light){ :root:not([data-theme]){ --bg:#fafafa; --bg-soft:#ffffff; --card:#ffffff; --txt:#0b0c10; --muted:#5c6270; --acc:#335cff; --ring:#e8ecf7; } html:not([data-theme]) body{ background-image: radial-gradient(40rem 40rem at 10% -10%, #e8edff 0, transparent 60%), radial-gradient(30rem 30rem at 110% 0, #ffe9f2 0, transparent 50%); } } /* ========================================================================== 2) BASE / RESET -------------------------------------------------------------------------- - Box model & base font stack - Default colors from CSS variables ========================================================================== */ *{ box-sizing:border-box } html,body{ height:100% } body{ margin:0; font: 15px/1.6 Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Noto Color Emoji; color:var(--txt); background:var(--bg); } img, picture, video, canvas { display: block; max-width: 100%; } /* ========================================================================== 3) LAYOUT CONTAINERS -------------------------------------------------------------------------- - Centralized width and padding for main content ========================================================================== */ .container{ max-width:1100px; margin:0 auto; padding:24px; } /* ========================================================================== 4) HEADER & NAV -------------------------------------------------------------------------- - Sticky header with translucent backdrop - Brand block & top-level navigation links ========================================================================== */ header{ position:sticky; top:0; z-index:10; backdrop-filter: blur(10px); background: color-mix(in oklab, var(--bg), transparent 65%); border-bottom:1px solid var(--ring); } nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; } .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; } .links{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .links a{ color:var(--muted); text-decoration:none; margin:0; } .links a:hover{ color:var(--txt); } /* ========================================================================== 5) BUTTONS, BADGE & PILLS -------------------------------------------------------------------------- - Reusable .btn style - Logo .badge and small label .pill ========================================================================== */ .btn{ appearance:none; border:1px solid var(--ring); background:var(--bg-soft); color:var(--txt); padding:10px 14px; border-radius:12px; cursor:pointer; box-shadow:var(--shadow); } .btn:hover{ filter:brightness(1.05) } .badge{ width:36px; height:36px; display:grid; place-items:center; background: linear-gradient(135deg, var(--acc), #a58cff); color:white; border-radius:12px; box-shadow: var(--shadow); font-weight:700; } .pill{ display:inline-flex; gap:8px; align-items:center; border:1px solid var(--ring); padding:6px 10px; border-radius:999px; color:var(--muted); font-size:12px; } /* ========================================================================== 6) HERO SECTION -------------------------------------------------------------------------- - Two-column layout with an avatar card ========================================================================== */ .hero{ display:grid; grid-template-columns: 1.2fr .8fr; gap:26px; align-items:center; padding:32px 0 10px; } .hero h1{ font-size: clamp(28px, 3.8vw, 44px); line-height:1.15; margin:0 0 10px; } .hero p{ color:var(--muted); margin:0 0 18px } .hero-card{ background:var(--card); border:1px solid var(--ring); border-radius:20px; padding:16px; box-shadow:var(--shadow); } .avatar{ position: relative; width: 100%; aspect-ratio: 3.4 / 3; /* controls the box height from width */ background: linear-gradient(135deg, #1f2430, #13151d 60%); border-radius: 16px; overflow: hidden; display: block; /* remove grid centering */ } /* Replace the current .avatar img rules entirely */ .avatar img{ position: absolute; inset: 0; /* top/right/bottom/left: 0 */ width: 100%; height: 100%; object-fit: cover; /* fill the box without distortion */ object-position: center 25%; /* tweak “framing” instead of using top:-65px */ } /* ========================================================================== 7) TYPOGRAPHY & UTILITIES -------------------------------------------------------------------------- - Section spacing, headings, muted text ========================================================================== */ section{ padding:28px 0 } h2{ margin:0 0 14px; font-size: clamp(20px, 2vw, 26px); } .muted{ color:var(--muted) } /* ========================================================================== 8) GRID & CARD COMPONENTS -------------------------------------------------------------------------- - 12-column grid - Project cards: image, body, actions ========================================================================== */ .grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; } .card{ grid-column: span 4; background:var(--card); border:1px solid var(--ring); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); } .card img{ width: 100%; aspect-ratio: 16 / 9; /* fixed ratio */ object-fit: cover; /* crop to fill */ object-position: center; /* consistent framing */ display: block; } .card .body{ padding:12px 14px 16px } .card h3{ margin:6px 0 4px; font-size:18px; } .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .chip{ font-size:12px; color:var(--muted); border:1px solid var(--ring); padding:6px 10px; border-radius:999px; } .card .actions{ margin-top:auto; display:flex; gap:10px; padding:12px 14px; border-top:1px solid var(--ring); } .card .actions a{ flex:1; text-align:center; text-decoration:none; color:var(--txt); border:1px solid var(--ring); padding:10px 12px; border-radius:10px; } /* ========================================================================== 9) FILTER CHIPS -------------------------------------------------------------------------- - Filter bar above the projects grid ========================================================================== */ .filters{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 18px; } .filters button{ border:1px solid var(--ring); background:var(--bg-soft); color:var(--muted); padding:8px 12px; border-radius:999px; cursor:pointer; } .filters button.active{ color:var(--txt); outline:2px solid color-mix(in oklab, var(--acc), transparent 30%); border-color:color-mix(in oklab, var(--acc), transparent 50%); } /* ===== Replace your existing .links rules with this (prevents overflow) ===== */ .links{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .links a{ color:var(--muted); text-decoration:none; margin:0; } .links a:hover{ color:var(--txt) } /* ========================================================================== 10) ABOUT & LISTS -------------------------------------------------------------------------- */ .about{ display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:start; background: color-mix(in oklab, var(--card), transparent 35%); border:1px solid var(--ring); border-radius:18px; padding:16px 18px; box-shadow: var(--shadow); } .about p{ margin:0; color:var(--txt); } .list{ display:grid; gap:10px; } .list ul{ list-style:none; margin:0; padding:0; } .list li{ list-style:none; position:relative; margin:0; padding:6px 0 6px 18px; color:var(--muted); border-bottom:1px dashed color-mix(in oklab, var(--ring), transparent 20%); } .list li:last-child{ border-bottom:0; } .list li::before{ position:absolute; left:0; top:7px; color:var(--acc); font-weight:700; } /* ========================================================================== 11) FOOTER & CTA -------------------------------------------------------------------------- */ footer{ border-top:1px solid var(--ring); margin-top:10px; background: color-mix(in oklab, var(--bg), transparent 70%); } footer .container{ display:flex; align-items:center; justify-content:center; padding-top:16px; padding-bottom:16px; } footer small{ color:var(--muted); } .cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; } .cta .btn{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center; min-height:42px; } /* ========================================================================== 12) ACCESSIBILITY HELPERS -------------------------------------------------------------------------- */ :focus-visible{ outline:2px solid color-mix(in oklab, var(--acc), transparent 25%); outline-offset:3px; border-radius:8px; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } header{ backdrop-filter:none } .btn, .badge, .card, .hero-card{ box-shadow:none } } /* ========================================================================== 13) RESPONSIVE BREAKPOINTS -------------------------------------------------------------------------- */ /* Large tablets / small laptops */ @media (max-width: 1100px){ .container{ max-width: 960px; padding:22px } } /* Tablets */ @media (max-width: 900px){ .container{ max-width: 820px; padding:20px } nav{ flex-wrap:wrap; gap:10px } .brand{ margin-bottom:6px } .hero{ grid-template-columns: 1fr; /* stack hero */ gap:20px; align-items:start; } .hero-card{ order:2 } .hero > div:first-child{ order:1 } .about{ grid-template-columns: 1fr; /* stack about */ gap:16px; } .grid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; } .card{ grid-column:auto } .card .actions a{ padding:10px } } /* Phones (landscape & big phones) */ @media (max-width: 700px){ .container{ padding:18px } header{ backdrop-filter:none } .btn{ padding:10px 12px } .pill{ font-size:11px; padding:5px 9px } .hero h1{ font-size: clamp(24px, 6.2vw, 34px) } .hero p{ font-size:14px } .card .actions{ gap:8px } .filters{ gap:8px } .filters button{ padding:7px 10px; font-size:13px } .hero a.btn{ display:inline-block; min-width:44%; text-align:center } .cta .btn{ flex:1 } } /* Small phones */ @media (max-width: 520px){ .container{ padding:16px } nav{ gap:8px } .badge{ width:32px; height:32px; border-radius:10px } .hero{ padding:22px 0 6px } section{ padding:22px 0 } h2{ font-size: clamp(18px, 4.8vw, 22px) } .grid{ grid-template-columns: 1fr } .card{ border-radius:16px } .card .body{ padding:12px } .card .actions{ flex-direction:column } .card .actions a{ width:100% } .cta{ gap:10px } .cta .btn{ width:100% } } /* Ultra-small / safe area fixes */ @media (max-width: 380px){ .brand strong{ font-size:14px } .hero h1{ font-size: clamp(20px, 7vw, 28px) } }