/* Minimal styling for portfolio */ :root { --accent: #6c63ff; --bg: #f7f7fb; --text: #111827; --content-max-width: 1500px; } * { box-sizing: border-box; } html { height: 100vh; width: 100vw; overflow-y: hidden; font-size: 20px; } body { height: 100%; width: 100%; flex: 1 0 auto; overflow-x: auto; font-family: Inter, ui-sans-serif, system-ui, Arial, Helvetica, sans-serif; margin: 0; color: var(--text); background: var(--bg); line-height: 1.5; } /* Background variants you can toggle by adding one of these classes to the element: - bg-linear: smooth vertical linear gradient from near-white into a warm cream - bg-radial: subtle circular (radial) gradient with a light centre fading into cream */ .bg-linear { background: linear-gradient(180deg, #ffffff 0%, #fbf8ef 45%, #efe6cc 100%); /* Ensure dark text when using the light background even if user prefers dark mode */ --text: #111827; } .bg-radial { /* White top strip over a centered radial warm-cream gradient. The linear layer ensures the very top is plain white, then the radial gradient provides the soft cream tone radiating from the center. */ background: linear-gradient(180deg, #ffffff 0%, #ffffff 18%, rgba(255, 255, 255, 0) 30%), radial-gradient(circle at center, #ffffff 0%, #fffaf0 18%, #f7efe0 55%, #efe3c6 100%); background-repeat: no-repeat; /* Ensure dark text on the radial light background regardless of prefers-color-scheme */ --text: #111827; } .site-header { background: white; padding: 1rem 1.25rem; border-bottom: 1px solid #eee; display: none; } /* IDs matching the reference wrapper/container */ #wrapper { display: flex; justify-content: center; } #container { max-width: var(--content-max-width); width: 100%; padding: 0 1.25rem; box-sizing: border-box; margin: 0 auto; } .brand { margin: 0; font-size: 1.4rem; letter-spacing: .04em; } .hero { padding: 2rem 1.25rem 0; text-align: center; background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent) } .hero-img { width: clamp(240px, 70%, 840px); height: auto; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35)); } .hero-fallback { display: inline-block; padding: 2rem 3rem; font-size: 2rem; background: linear-gradient(90deg, #fff, #fafafa); border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) } .hero-sub { margin-top: .75rem; color: #374151 } #screenshots_app { position: relative; padding: 1.25rem 0; } main>section { padding: 1.25rem } main>section#portfolio { margin-bottom: -10px; } main>section#ventures { margin-top: 20px; } main>section>h2 { margin: 0; } /* Contact list: flex-based items similar to reference project */ .contact-list { list-style: none; margin: 0 0 0.75rem 0; padding: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; } .contact-item { display: flex; align-items: center; } .contact-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: #ffffff; color: var(--text); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); text-decoration: none; } .contact-link:hover, .contact-link:focus { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transform: translateY(-1px); } .carousel { display: flex; gap: .5rem; overflow: auto; padding: .5rem 0 } .thumb { border: 0; background: transparent; padding: 0; flex: 0 0 auto; cursor: pointer } .thumb img { height: 96px; border-radius: 8px; display: block; object-fit: cover; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) } .detail { position: relative; margin-top: 1rem; background: #fff; border-radius: 8px; padding: 1rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); display: none } .detail-inner img { max-width: 100%; height: auto; display: block; margin: 0 auto } .detail .close { position: absolute; right: .5rem; top: .5rem; background: transparent; border: 0; font-size: 1.1rem } .arrow { position: absolute; width: 24px; height: 24px; background: var(--accent); transform: rotate(45deg); left: 0; top: -12px; display: block; border-radius: 3px } .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem } .project { background: #fff; padding: 1rem; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) } .overlay { position: fixed; inset: 0; display: none; background: rgba(0, 0, 0, 0.85); align-items: center; justify-content: center } .overlay img { max-width: 95%; max-height: 95% } @media (prefers-color-scheme: dark) { :root { --bg: #0b1020; --text: #e5e7eb } body { background: linear-gradient(180deg, #071129, #0b1020) } } /* 'Hugging' drop-shadow: tighter on alpha by using SVG-like mask isn't trivial in CSS, but drop-shadow on the image helps */ .hero-img { filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.45)); } /* Project title link: inherit surrounding heading styles, underline only on hover */ .projects h3 a.proj-link, #projects h3 a.proj-link { /* Use the site's text color for project headline links and ensure they don't use the browser's default link color */ color: var(--text) !important; text-decoration: none !important; } .projects h3 a.proj-link:hover, .projects h3 a.proj-link:focus { text-decoration: underline !important; text-decoration-thickness: 1.2px; text-underline-offset: 2px; } /* Projects panel is hidden until opened via the carousel */ #projects { display: none; } #projects.open { display: block; } /* Remove any default focus outline/border and add a soft, unobtrusive shadow */ #projects:focus { outline: none; } #projects.open { border: none !important; box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06); padding: 1rem; border-radius: 10px; transition: box-shadow 200ms ease-in-out, transform 200ms ease-in-out; min-height: 380px; box-shadow: 0 -4px 34px rgba(52, 113, 217, 0.58); } #projects.open:focus { box-shadow: 0 14px 40px rgba(2, 6, 23, 0.08); box-shadow: 0 -4px 34px rgba(52, 113, 217, 0.58); } @media (max-width: 920px) { #container {} main>section {} #screenshots_app { padding: 0.75rem 0; } } /* Image transform utilities: add a class to the image element to mirror or rotate it */ .hero-img.mirrored, .hero-img.mirror { transform: scaleX(-1); transform-origin: center; } /* Rotate 180 degrees (upside down) */ .hero-img.rotate-180 { transform: rotate(180deg); transform-origin: center; } /* Smooth transition when toggling */ .hero-img { transition: transform 200ms ease-in-out; } @media (max-width: 600px) { #container { padding: 0 0.75rem; } main>section { padding: 0.75rem 0; } #screenshots_app { padding: 0.75rem 0; } } /* Footer: centered copyright for the main page */ .site-footer { text-align: center; padding: 1rem 0 2rem; color: rgba(17, 24, 39, 0.8); } .site-footer p { margin: 0; }