/* ================================================================ style.css — ALL VISUAL STYLING ================================================================ TABLE OF CONTENTS 1. CSS Variables — colours, fonts, spacing tokens 2. Reset and Base — browser defaults reset, body styles 3. Navigation — fixed top nav bar 4. Hero Section — full-viewport opening section 5. Buttons — shared button styles 6. Section Shared — wrappers, eyebrows, titles, dividers 7. Project Cards — card grid, media area, body, tags 8. Book Cards — reading section card layout 9. About Section — bio grid, tech stack pills 10. Contact Section — links, response note, email form 11. Footer — bottom bar 12. Animations — fadeUp keyframe, scroll reveal class 13. Responsive — mobile and tablet breakpoints QUICK EDITS: Change site colours → Section 1 (CSS Variables) Change fonts → Section 1, then update Google Fonts in index.html Change card border → Section 7 (.project-card) Change form styling → Section 10 (.email-form) Adjust mobile layout → Section 13 (@media rules) ================================================================ */ /* ================================================================ 1. CSS VARIABLES — design tokens These are the only values you need to change to retheme the entire site. Every colour, font, and shape reference throughout this file uses one of these variables. ================================================================ */ :root { /* ── Page backgrounds --bg → the main off-white page background --bg2 → slightly brighter white used on card and section surfaces --bg3 → a subtle grey used for inset areas (tag pills, input fields) */ --bg: #f4f4f3; --bg2: #ffffff; --bg3: #ededed; /* ── Borders --border → the default light border on cards and dividers --border-md → a slightly darker border shown on hover states */ --border: #e0e0e0; --border-md: #c8c8c8; /* ── Text colours --text → default readable body text --text-dim → secondary muted text (descriptions, labels) --text-light → very faint text (timestamps, placeholder, tags) --heading → near-black used for h1, h2, and bold emphasis */ --text: #2c2c2c; --text-dim: #767676; --text-light: #b4b4b4; --heading: #0f0f0f; /* ── Typography --sans → DM Sans, used for all headings and section titles --body → Inter, used for all body text, UI labels, and buttons To swap fonts: change the name here AND update the Google Fonts URL in the of index.html */ --sans: 'DM Sans', sans-serif; --body: 'Inter', sans-serif; /* ── Shape --radius → the corner radius used on cards, buttons, inputs, tags. Increase for rounder UI (e.g. 12px), decrease for sharper (e.g. 4px). */ --radius: 8px; } /* ================================================================ 2. RESET AND BASE STYLES Strips out inconsistent browser default margin and padding, sets consistent box-sizing across all elements, and applies base typography to the document. ================================================================ */ /* Apply border-box sizing to every element and its pseudo-elements. This means padding and border are included in the element's declared width and height, which prevents unexpected overflow. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* Smooth animated scrolling when anchor links are clicked */ scroll-behavior: smooth; } body { background-color: var(--bg); color: var(--text); font-family: var(--body); font-size: 15px; line-height: 1.7; /* Prevent content from causing horizontal scroll on mobile */ overflow-x: hidden; } /* ================================================================ 3. NAVIGATION Fixed bar pinned to the top of the viewport at all times. Uses a frosted-glass effect via backdrop-filter. The active link colour is set dynamically by main.js. ================================================================ */ nav { position: fixed; top: 0; left: 0; right: 0; /* Sit above all page content */ z-index: 100; display: flex; justify-content: space-between; align-items: center; padding-top: 1.1rem; padding-right: 4rem; padding-bottom: 1.1rem; padding-left: 4rem; /* Semi-transparent background so page content shows through */ background-color: rgba(244, 244, 243, 0.94); /* Blur the content behind the nav bar (frosted glass effect) */ backdrop-filter: blur(14px); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border); } /* Site name / logo link on the left side of the nav */ .nav-logo { font-family: var(--sans); font-weight: 700; font-size: 2.5rem; color: var(--heading); text-decoration: none; letter-spacing: -0.01em; } /* Horizontal flex list of nav links on the right side */ .nav-links { display: flex; gap: 2.5rem; list-style: none; align-items: center; } /* Default style for all nav link anchors */ .nav-links a { color: var(--text-dim); text-decoration: none; font-size: 0.82rem; font-weight: 500; transition: color 0.2s; } .nav-links a:hover { color: var(--heading); } /* The "Get in touch" pill button — the last item in the nav list. Uses the .nav-cta class on the
  • to target only this link. */ .nav-links .nav-cta a { color: var(--heading); border-width: 1px; border-style: solid; border-color: var(--border-md); padding-top: 0.38rem; padding-right: 1rem; padding-bottom: 0.38rem; padding-left: 1rem; /* High border-radius creates the pill / capsule shape */ border-radius: 20px; font-size: 0.8rem; background-color: var(--bg2); transition: background-color 0.18s, color 0.18s, border-color 0.18s; } .nav-links .nav-cta a:hover { background-color: var(--heading); color: #ffffff; border-color: var(--heading); } /* ================================================================ 4. HERO SECTION Full-viewport opening section with a decorative CSS grid background and a white radial gradient fade overlay. The grid background is drawn using two linear-gradients in the ::before pseudo-element — no extra HTML needed. The white fade is drawn in the ::after pseudo-element. Both pseudo-elements are stacked behind .hero-content via z-index. ================================================================ */ #hero { min-height: 100vh; display: flex; align-items: center; padding-top: 8rem; padding-right: 4rem; padding-bottom: 7rem; padding-left: 4rem; background-color: var(--bg2); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border); /* Required for the absolute-positioned pseudo-elements and stats strip */ position: relative; overflow: hidden; } /* Decorative CSS grid background pattern. Made with two overlapping linear-gradients — one horizontal, one vertical — each drawing a 1px line at the start of each tile. To change the grid density: update the background-size value. To make it more visible: increase the opacity value. */ #hero::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 56px 56px; opacity: 0.55; /* Prevent the pattern from blocking mouse events */ pointer-events: none; } /* White radial gradient overlay that fades the grid pattern out around the text area, keeping the left side readable. The ellipse centre (35% 50%) places the white area left-of-centre so the grid pattern is still visible on the right side. */ #hero::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: radial-gradient( ellipse 60% 80% at 35% 50%, rgba(255, 255, 255, 0.98) 25%, transparent 100% ); pointer-events: none; } /* ── Hero inner ── Flex row that places .hero-content on the left and .hero-visual (the decorative gif) on the right. Both children sit above the ::before and ::after pseudo-elements via z-index: 1. */ .hero-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 3rem; width: 100%; padding-bottom: 6rem; } /* Text content container */ .hero-content { max-width: 640px; } /* ── Hero visual ── The decorative gif container on the right side of the hero. clamp() keeps it responsive — shrinks on smaller screens without needing extra breakpoints. opacity: 0.85 softens it so it does not compete with the text. Adjust opacity up or down to taste. Update src in index.html: */ .hero-visual { flex: 0 0 auto; width: clamp(260px, 35vw, 480px); border-radius: 1rem; overflow: hidden; opacity: 0.85; } .hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Availability status badge ── The green dot + "Available" text. Animation plays once on page load via fadeUp keyframe (Section 12). */ .hero-status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 500; color: var(--text-dim); margin-bottom: 2rem; animation: fadeUp 0.45s ease both; } /* The small coloured dot in the availability badge. Change background-color to #ef4444 (red) if unavailable. */ .status-dot { width: 7px; height: 7px; border-radius: 50%; background-color: #4caf50; /* Soft outer glow ring matching the dot colour */ box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2); } /* ── Large display headline ── clamp() makes the font size fluid: min: 2.8rem (smallest it will go on narrow screens) preferred: 6.5vw (scales with viewport width) max: 5rem (cap on large screens) The inside gets its own rules below. */ .hero-name { font-family: var(--sans); font-size: clamp(2.8rem, 6.5vw, 5rem); font-weight: 700; color: var(--heading); line-height: 1.0; letter-spacing: -0.03em; margin-bottom: 1.4rem; animation: fadeUp 0.45s 0.08s ease both; } /* Italic + lighter weight for the second line of the headline */ .hero-name em { font-style: italic; font-weight: 400; color: var(--text-dim); } /* ── Bio / tagline paragraph ── */ .hero-desc { font-size: 1rem; color: var(--text-dim); max-width: 480px; line-height: 1.8; margin-bottom: 2.8rem; animation: fadeUp 0.45s 0.16s ease both; } /* tags inside the tagline get darker text */ .hero-desc strong { color: var(--text); font-weight: 600; } /* ── CTA button row ── */ .hero-cta { display: flex; gap: 0.9rem; flex-wrap: wrap; animation: fadeUp 0.45s 0.24s ease both; } /* ── Stats strip ── Pinned to the bottom of the hero section using position: absolute. This keeps it visually anchored without affecting the text layout. */ .hero-stats { position: absolute; bottom: 3rem; left: 4rem; right: 4rem; z-index: 1; display: flex; gap: 3rem; animation: fadeUp 0.45s 0.35s ease both; justify-content: center; } /* Each individual stat (number + label stacked vertically) */ .hero-stat { display: flex; flex-direction: column; } .stat-value { font-family: var(--sans); font-size: 1.5rem; font-weight: 700; color: var(--heading); letter-spacing: -0.03em; line-height: 1; } .stat-label { font-size: 0.72rem; color: var(--text-light); margin-top: 0.25rem; } /* ================================================================ 5. BUTTONS — shared styles used across the whole page .btn → base styles applied to all button variants .btn-primary → solid dark fill, white text (primary action) .btn-outline → transparent with a border (secondary action) ================================================================ */ .btn { display: inline-block; padding-top: 0.72rem; padding-right: 1.6rem; padding-bottom: 0.72rem; padding-left: 1.6rem; font-family: var(--body); font-size: 0.82rem; font-weight: 500; text-decoration: none; border-radius: var(--radius); transition: background-color 0.18s, color 0.18s, transform 0.18s, box-shadow 0.18s; cursor: pointer; /* Reset browser default border so outline variant can set its own */ border-width: 0; border-style: solid; border-color: transparent; } .btn-primary { background-color: var(--heading); color: #ffffff; } .btn-primary:hover { background-color: #2a2a2a; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14); } .btn-outline { background-color: transparent; color: var(--text); border-width: 1px; border-style: solid; border-color: var(--border-md); } .btn-outline:hover { border-color: #999999; color: var(--heading); background-color: var(--bg3); } /* override only when link exists */ .btn.live { background-color: #D62828; color: white; } .btn.github{ background-color: #003049; color:white } /* ================================================================ 6. SECTION SHARED — layout wrappers, eyebrows, titles, dividers These classes are reused across every section of the page. ================================================================ */ /* Constrains content width and adds consistent padding on all sections */ .section-wrap { max-width: 1080px; margin-right: auto; margin-left: auto; padding-top: 5rem; padding-right: 4rem; padding-bottom: 5rem; padding-left: 4rem; } /* Small all-caps label that sits above the section title. e.g. "Projects", "Background", "Currently reading" */ .section-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.5rem; } /* Main section heading */ .section-title { font-family: var(--sans); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--heading); letter-spacing: -0.02em; margin-bottom: 2.5rem; line-height: 1.15; } /* Thin horizontal line used between sections */ .section-divider { height: 1px; background-color: var(--border); } /* ================================================================ 7. PROJECT CARDS Card structure rendered by projects.js: .projects-grid .project-card (or .project-card.featured for first card) .card-media — gif / video / placeholder area .card-body .card-header .project-name .project-links — GitHub / Live / Docs buttons .project-desc .project-tags .tag or .tag.tag-dark FEATURED CARD: First card in the array spans the full grid width. Uses a side-by-side layout: media on left, text on right. ================================================================ */ /* ── Grid layout ── Two equal columns by default. The featured card uses grid-column: 1 / -1 to span both columns. */ #projects { background-color: var(--bg); } .projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } /* ── Base card ── */ .project-card { background-color: var(--bg2); border-width: 1px; border-style: solid; border-color: var(--border); border-radius: var(--radius); /* Clip the media area's corners to match the card radius */ overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; display: flex; flex-direction: column; /* remove this when you have more projects it makes them smaller start: */ grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; /* :end */ } .project-card:hover { border-color: var(--border-md); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } /* ── Featured card (first in array) ── Spans both grid columns and uses a horizontal layout with media on the left and card body on the right. */ .project-card.featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; } /* ── Media area ── This is the container for gifs, videos, or the placeholder. Aspect ratio keeps consistent proportions for standard cards. TO ADD A GIF: In projects.js set mediaType: 'gif' and mediaSrc: 'media/demo.gif' TO ADD A VIDEO: In projects.js set mediaType: 'video-autoplay' and mediaSrc: 'media/demo.mp4' */ .card-media { position: relative; background-color: var(--bg3); overflow: hidden; aspect-ratio: 16 / 9; } /* Images and videos fill the media container */ .card-media img, .card-media video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Placeholder shown before real media is added */ .media-placeholder { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: var(--text-light); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; } .media-placeholder svg { opacity: 0.35; } /* Featured card media — no aspect-ratio constraint, fills full height. Right border separates media from the card body. */ .project-card.featured .card-media { aspect-ratio: unset; min-height: 260px; border-right-width: 1px; border-right-style: solid; border-right-color: var(--border); border-bottom-width: 0; } /* "▶ demo" hint label that appears on hover over a video */ .video-hint { position: absolute; bottom: 0.7rem; right: 0.7rem; background-color: rgba(0, 0, 0, 0.55); color: #ffffff; font-size: 0.65rem; padding-top: 0.2rem; padding-right: 0.55rem; padding-bottom: 0.2rem; padding-left: 0.55rem; border-radius: 4px; opacity: 0; transition: opacity 0.2s; pointer-events: none; } .card-media:hover .video-hint { opacity: 1; } /* ── Card body (text area below or beside media) ── */ .card-body { padding-top: 1.5rem; padding-right: 1.5rem; padding-bottom: 1.5rem; padding-left: 1.5rem; display: flex; flex-direction: column; /* flex: 1 makes the body fill remaining space in the featured layout */ flex: 1; } .card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; } .project-name { font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--heading); letter-spacing: -0.01em; } /* ── Link button row (GitHub / Live / Docs) ── */ .project-links { display: flex; gap: 0.45rem; } .project-links a { color: var(--text-dim); text-decoration: none; font-size: 0.72rem; font-weight: 500; padding-top: 0.2rem; padding-right: 0.6rem; padding-bottom: 0.2rem; padding-left: 0.6rem; border-width: 1px; border-style: solid; border-color: var(--border); border-radius: 4px; background-color: var(--bg3); transition: color 0.15s, border-color 0.15s, background-color 0.15s; } .project-links a:hover { color: var(--heading); border-color: var(--border-md); background-color: var(--bg); } /* Description text — flex: 1 pushes the tags to the bottom of the card */ .project-desc { font-size: 0.83rem; color: var(--text-dim); line-height: 1.75; margin-bottom: 1.2rem; flex: 1; } /* ── Tech tags ── .tag → default light grey style .tag-dark → inverted, dark background with white text used for the first/primary technology in a project */ .project-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .tag { font-size: 0.7rem; font-weight: 500; padding-top: 0.2rem; padding-right: 0.62rem; padding-bottom: 0.2rem; padding-left: 0.62rem; border-radius: 4px; background-color: var(--bg3); color: var(--text-dim); border-width: 1px; border-style: solid; border-color: var(--border); } /* Primary technology tag — inverted colour scheme */ .tag-dark { background-color: var(--heading); color: #f4f4f3; border-color: var(--heading); } /* ================================================================ 8. BOOK CARDS — Currently Reading section Card structure rendered by books.js: .books-grid .book-card .book-cover — cover image or letter placeholder .book-body .book-genre — genre tag pill .book-title .book-author .book-note — personal note in italics .book-progress .progress-label — "68%" + "reading" on same line .progress-bar — grey track .progress-fill — filled portion (width set inline by JS) ================================================================ */ #reading { background-color: var(--bg2); } /* Responsive grid — auto-fills columns, each at least 260px wide */ .books-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; } /* ── Book card ── Horizontal flex: cover image on the left, text on the right */ .book-card { display: flex; flex-direction: row; gap: 1.2rem; background-color: var(--bg); border-width: 1px; border-style: solid; border-color: var(--border); border-radius: var(--radius); padding-top: 1.3rem; padding-right: 1.3rem; padding-bottom: 1.3rem; padding-left: 1.3rem; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; align-items: flex-start; } .book-card:hover { border-color: var(--border-md); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07); transform: translateY(-2px); } /* ── Book cover image container ── */ .book-cover { width: 72px; /* min-width prevents the cover shrinking on narrow cards */ min-width: 72px; height: 104px; border-radius: 4px; overflow: hidden; background-color: var(--bg3); border-width: 1px; border-style: solid; border-color: var(--border); /* flex-shrink: 0 prevents the cover from shrinking when text is long */ flex-shrink: 0; } .book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Letter placeholder shown when no cover image is provided. Displays the book's initials in the centre. */ .cover-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 1.1rem; font-weight: 700; color: var(--text-light); background-color: var(--bg3); /* Subtle diagonal stripe texture for visual interest */ background-image: repeating-linear-gradient( -45deg, transparent, transparent 4px, rgba(0, 0, 0, 0.03) 4px, rgba(0, 0, 0, 0.03) 8px ); } /* ── Book text body ── flex: 1 makes it fill remaining horizontal space. min-width: 0 prevents text overflow from breaking the layout. */ .book-body { display: flex; flex-direction: column; flex: 1; min-width: 0; } /* Genre tag row — adds bottom margin before the title */ .book-genre { margin-bottom: 0.45rem; } /* Title — truncates at 2 lines with an ellipsis if too long */ .book-title { font-family: var(--sans); font-size: 0.92rem; font-weight: 700; color: var(--heading); letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 0.2rem; /* CSS multi-line truncation */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .book-author { font-size: 0.75rem; color: var(--text-light); margin-bottom: 0.6rem; } /* Personal note — italic, truncates at 3 lines */ .book-note { font-size: 0.78rem; color: var(--text-dim); font-style: italic; line-height: 1.6; margin-bottom: 0.85rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Progress section — margin-top: auto pushes it to the bottom of the card regardless of note length */ .book-progress { margin-top: auto; } /* Row with percentage on the left and status label on the right */ .progress-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.35rem; } .progress-pct { font-size: 0.72rem; font-weight: 600; color: var(--text); } .progress-status { font-size: 0.68rem; color: var(--text-light); } /* ── Progress bar ── .progress-bar → grey background track .progress-fill → dark fill whose width is set inline by books.js */ .progress-bar { width: 100%; height: 4px; background-color: var(--border); border-radius: 2px; overflow: hidden; } .progress-fill { height: 100%; background-color: var(--heading); border-radius: 2px; /* Smooth animation if the progress value ever changes */ transition: width 0.4s ease; } /* ================================================================ 9. ABOUT SECTION Two-column layout: Left → .about-text (bio paragraphs + CTA button) Right → .stack-grid (tech logo tiles) ================================================================ */ #about { background-color: var(--bg2); } /* Two-column grid — left column slightly wider than right */ .about-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 5rem; align-items: start; } /* ── Bio paragraphs ── */ .about-text p { color: var(--text-dim); margin-bottom: 1.1rem; font-size: 0.92rem; line-height: 1.9; } .about-text p strong { color: var(--text); font-weight: 600; } .about-text p em { font-style: italic; color: var(--text); } /* ── Stack label above the grid ── */ .stack-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); margin-bottom: 1rem; } /* ── Stack grid ── 3 equal columns of technology tiles. Change grid-template-columns to adjust column count. */ .stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; } /* ── Individual technology tile ── */ .stack-pill { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; padding-top: 1.1rem; padding-right: 0.6rem; padding-bottom: 0.9rem; padding-left: 0.6rem; background-color: var(--bg3); border-width: 1px; border-style: solid; border-color: var(--border); border-radius: 10px; transition: border-color 0.18s, background-color 0.18s, box-shadow 0.18s, transform 0.18s; cursor: default; text-align: center; } .stack-pill:hover { border-color: var(--border-md); background-color: var(--bg2); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); } /* Logo SVG — slightly desaturated at rest, full colour on hover */ .stack-pill svg { width: 32px; height: 32px; flex-shrink: 0; filter: saturate(0.85); transition: filter 0.18s; } .stack-pill:hover svg { filter: saturate(1.1); } /* Technology name below the logo */ .stack-pill-name { font-family: var(--sans); font-size: 0.74rem; font-weight: 600; color: var(--text); line-height: 1.2; } /* Category label at the very bottom of the tile */ .stack-pill-tag { font-size: 0.62rem; color: var(--text-light); letter-spacing: 0.04em; } /* ================================================================ 10. CONTACT SECTION Divided into two parts: PART A — .contact-layout (two columns) Left → .contact-desc + .contact-links Right → .contact-note PART B — .email-form-wrap A contact form that submits to Formspree. Separated from Part A by a top border. ================================================================ */ #contact { background-color: var(--bg); } /* ── Part A: two-column row ── */ .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } /* Blurb paragraph above the link buttons */ .contact-desc { font-size: 0.92rem; color: var(--text-dim); line-height: 1.85; margin-bottom: 2rem; } .contact-desc strong { color: var(--text); } /* Horizontal stack of link buttons */ .contact-links { display: flex; flex-direction: row; gap: 0.6rem; flex-wrap: wrap; } /* Individual link button (email, GitHub, LinkedIn, resume) */ .contact-link { display: inline-flex; align-items: center; gap: 0.6rem; padding-top: 0.78rem; padding-right: 1.3rem; padding-bottom: 0.78rem; padding-left: 1.3rem; border-width: 1px; border-style: solid; border-color: var(--border-md); border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: 0.83rem; font-weight: 500; background-color: var(--bg2); transition: border-color 0.18s, color 0.18s, background-color 0.18s, transform 0.18s; /* Prevents links stretching full width */ width: auto; } /* Links slide to the right on hover to suggest forward motion */ .contact-link:hover { border-color: #999999; color: var(--heading); background-color: var(--bg3); transform: translateX(3px); } /* Response-time note (right column of Part A) */ .contact-note { font-size: 0.82rem; color: var(--text-dim); line-height: 1.7; } .contact-note strong { color: var(--text); display: block; margin-bottom: 0.3rem; font-size: 0.9rem; } /* ── Part B: email form wrapper ── A top border visually separates the form from the links above. */ .email-form-wrap { margin-top: 3.5rem; padding-top: 3rem; border-top-width: 1px; border-top-style: solid; border-top-color: var(--border); } .email-form-label { font-family: var(--sans); font-size: 1.1rem; font-weight: 700; color: var(--heading); letter-spacing: -0.01em; margin-bottom: 0.4rem; } .email-form-sub { font-size: 0.83rem; color: var(--text-dim); margin-bottom: 1.5rem; } /* ── Form layout ── Flex column so each field sits on its own row. */ .email-form { display: flex; flex-direction: column; gap: 0.85rem; max-width: 560px; } /* Two-column row used for the name + email fields side by side */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; } /* ── Text inputs and textarea ── */ .email-form input, .email-form textarea { width: 100%; padding-top: 0.75rem; padding-right: 1rem; padding-bottom: 0.75rem; padding-left: 1rem; font-family: var(--body); font-size: 0.85rem; color: var(--text); background-color: var(--bg2); border-width: 1px; border-style: solid; border-color: var(--border-md); border-radius: var(--radius); /* Remove browser default focus outline so we can style our own */ outline: none; transition: border-color 0.18s, box-shadow 0.18s; /* Allow vertical resize only — horizontal resize would break layout */ resize: vertical; } .email-form input::placeholder, .email-form textarea::placeholder { color: var(--text-light); } /* Focus state — dark border + subtle outer glow ring */ .email-form input:focus, .email-form textarea:focus { border-color: var(--heading); box-shadow: 0 0 0 3px rgba(15, 15, 15, 0.06); } /* Textarea — taller minimum height to give room for a message */ .email-form textarea { min-height: 130px; line-height: 1.65; } /* ── Submit button ── */ .form-submit { display: inline-flex; align-items: center; gap: 0.5rem; padding-top: 0.75rem; padding-right: 1.8rem; padding-bottom: 0.75rem; padding-left: 1.8rem; background-color: var(--heading); color: #ffffff; font-family: var(--body); font-size: 0.83rem; font-weight: 500; border-width: 0; border-style: none; border-radius: var(--radius); cursor: pointer; transition: background-color 0.18s, transform 0.18s, box-shadow 0.18s; width: fit-content; } .form-submit:hover { background-color: #2a2a2a; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); } /* Helper note below the submit button */ .form-note { font-size: 0.75rem; color: var(--text-light); margin-top: 0.5rem; } /* ============================================================ CERTIFICATIONS SECTION Card grid for certificates / course completions. TO EDIT: - Change column count in .certifications-grid if needed - Adjust padding, radius, border, and spacing in .cert-card - Mobile stacking happens in the media query below ============================================================ */ .certifications-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; } /* INDIVIDUAL CERTIFICATION CARD Styled to feel consistent with the rest of the site: soft border, rounded corners, light glass-like background. */ .cert-card { padding: 1.5rem; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 20px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(10px); } /* Certification name / title */ .cert-title { margin: 0 0 0.35rem; font-size: 1.1rem; } /* Platform / issuer label */ .cert-meta { margin: 0 0 0.75rem; color: var(--text-dim); font-size: 0.95rem; } /* Short description under each certification */ .cert-desc { margin-bottom: 1rem; line-height: 1.6; } /* ============================================================ MOBILE / TABLET Stack certification cards into a single column on smaller screens. ============================================================ */ @media (max-width: 900px) { .certifications-grid { grid-template-columns: 1fr; } } /* ================================================================ 11. FOOTER Simple two-column bar at the very bottom of the page. ================================================================ */ footer { border-top-width: 1px; border-top-style: solid; border-top-color: var(--border); padding-top: 1.6rem; padding-right: 4rem; padding-bottom: 1.6rem; padding-left: 4rem; display: flex; justify-content: space-between; align-items: center; background-color: var(--bg2); color: var(--text-light); font-size: 0.75rem; } /* ================================================================ 12. ANIMATIONS AND SCROLL REVEAL FADE-UP KEYFRAME: Used by hero elements to animate in on page load. Applied directly in this file via the animation property on .hero-status, .hero-name, .hero-desc, .hero-cta, .hero-stats. SCROLL REVEAL: .reveal → initial hidden state (opacity 0, shifted down 16px) .reveal.visible → final visible state (added by main.js when the element scrolls into view via IntersectionObserver) ================================================================ */ /* Keyframe: element starts 14px below final position and fades in */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Initial hidden state for scroll-reveal elements. main.js adds .visible when the element enters the viewport. */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; } /* Final visible state — triggered by main.js */ .reveal.visible { opacity: 1; transform: translateY(0); } /* ================================================================ 13. RESPONSIVE — mobile and tablet breakpoints 860px breakpoint — tablet - Nav padding reduced - Hero padding reduced - Hero inner stacks vertically (gif moves below text) - Project grid collapses to one column - Featured card loses side-by-side layout - About and contact grids collapse to one column - Form row collapses to one column - Footer stacks vertically 560px breakpoint — small phones - Nav hides most links (keeps only the pill CTA) - Hero stats wrap to two rows - Hero visual shrinks to 70vw - Books grid collapses to one column - Stack grid goes to two columns ================================================================ */ @media (max-width: 860px) { /* Reduce nav padding on smaller screens */ nav { padding-top: 1rem; padding-right: 1.5rem; padding-bottom: 1rem; padding-left: 1.5rem; } /* Hide the pill CTA button — not enough space at this width */ .nav-links .nav-cta { display: none; } /* Reduce hero padding on smaller screens */ #hero { padding-top: 7rem; padding-right: 1.5rem; padding-bottom: 5rem; padding-left: 1.5rem; } /* Stack the text and gif vertically on tablet */ .hero-inner { flex-direction: column; align-items: flex-start; gap: 2rem; } /* Bring stats strip in from the edges */ .hero-stats { left: 1.5rem; right: 1.5rem; gap: 2rem; } /* Reduce section padding on smaller screens */ .section-wrap { padding-top: 4rem; padding-right: 1.5rem; padding-bottom: 4rem; padding-left: 1.5rem; } /* Collapse project grid from two columns to one */ .projects-grid { grid-template-columns: 1fr; } /* Featured card loses its side-by-side grid layout */ .project-card.featured { grid-template-columns: 1fr; } /* Featured card media goes back to 16:9 aspect ratio */ .project-card.featured .card-media { border-right-width: 0; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border); aspect-ratio: 16 / 9; min-height: unset; } /* About grid collapses to single column */ .about-grid { grid-template-columns: 1fr; gap: 2.5rem; } /* Contact layout collapses to single column */ .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; } /* Form name/email row collapses to single column */ .form-row { grid-template-columns: 1fr; } /* Footer stacks vertically */ footer { padding-top: 1.5rem; padding-right: 1.5rem; padding-bottom: 1.5rem; padding-left: 1.5rem; flex-direction: column; gap: 0.4rem; text-align: center; } } @media (max-width: 560px) { /* Tighten the gap between nav links on small phones */ .nav-links { gap: 1.5rem; } /* On very small screens hide all nav links except the last one. The last item is the .nav-cta pill button. This prevents the nav from overflowing the header. */ .nav-links li:not(.nav-cta):not(:last-child) { display: none; } /* Allow hero stats to wrap onto two rows */ .hero-stats { flex-wrap: wrap; gap: 1.5rem; } /* Hero gif shrinks to 70vw on small phones */ .hero-visual { width: clamp(200px, 70vw, 360px); } /* Collapse book grid to single column */ .books-grid { grid-template-columns: 1fr; } /* Stack grid goes to two columns on small phones */ .stack-grid { grid-template-columns: repeat(2, 1fr); } }