/* =========================================================================== styles.css — all the LOOKS for the site =========================================================================== Reading order: 1. Variables (colours/sizes) + light/dark themes 2. Global resets, base styles & nice-to-haves (scrollbar, selection…) 3. Header 4. Hero 5. Generic section styles 5b. Value pillars 5c. Experience timeline 6. About 6b. Skills 7. Projects 8. Contact 9. Footer 10. Scroll-reveal animation 11. Mobile responsiveness 12. PRINT — turns the page into a polished PDF / CV =========================================================================== */ /* --------------------------------------------------------------------------- 1. VARIABLES --------------------------------------------------------------------------- ':root' = the whole document. These are the DARK theme defaults. --------------------------------------------------------------------------- */ :root { --bg: #0a0e14; /* page background (deep, slightly blue-black) */ --bg-soft: #131922; /* panels / cards */ --bg-elevated: #182029; /* hover state for cards */ --text: #e9eff6; /* main text */ --text-muted: #97a3b2; /* dimmer text */ --accent: #6aa8ff; /* primary highlight (blue) */ --accent-2: #b07cff; /* secondary highlight (violet) */ --border: #232c38; /* subtle lines */ --border-strong: #303b49; /* slightly stronger lines */ --radius: 16px; --radius-sm: 10px; --max-width: 780px; /* A reusable two-colour gradient used on the name, buttons, accents. */ --grad: linear-gradient(120deg, var(--accent), var(--accent-2)); /* Soft shadows for depth. */ --shadow: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 18px 40px -18px rgba(0, 0, 0, 0.7); --glow: 0 0 0 1px rgba(106, 168, 255, 0.25), 0 18px 50px -20px rgba(106, 168, 255, 0.45); /* Barely-there accent glow that follows the cursor on cards. Kept very low so it reads as a faint sheen, never a flashlight. */ --sheen: rgba(150, 185, 255, 0.05); } /* LIGHT theme overrides (script.js toggles class="light" on ). */ html.light { --bg: #ffffff; --bg-soft: #f6f8fb; --bg-elevated: #eef2f7; --text: #0e141b; --text-muted: #56616f; --accent: #2f6bff; --accent-2: #7b3ff2; --border: #e6eaf0; --border-strong: #d7dde6; --shadow: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-lg: 0 18px 40px -20px rgba(16, 24, 40, 0.25); --glow: 0 0 0 1px rgba(47, 107, 255, 0.18), 0 18px 50px -22px rgba(47, 107, 255, 0.3); --sheen: rgba(47, 107, 255, 0.05); } /* --------------------------------------------------------------------------- 2. GLOBAL RESETS & BASE --------------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, sans-serif; background-color: var(--bg); color: var(--text); line-height: 1.65; /* Crisper text rendering. */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color 0.3s ease, color 0.3s ease; /* Stops the soft glow (below) from causing a horizontal scrollbar. */ overflow-x: hidden; } /* A soft, fixed colour glow behind everything — gives the dark theme depth. pointer-events:none so it never blocks clicks. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 20% 0%, rgba(106, 168, 255, 0.10), transparent 70%), radial-gradient(50% 45% at 90% 10%, rgba(176, 124, 255, 0.10), transparent 70%); } a { color: inherit; text-decoration: none; } /* Keyboard users get a clear, on-brand focus ring (mouse users don't). */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* On-brand text selection. */ ::selection { background: var(--accent); color: #fff; } /* A slim, themed scrollbar (WebKit browsers). */ ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* Anchored sections start below the sticky header instead of under it. */ .hero, .section { scroll-margin-top: 90px; } /* --------------------------------------------------------------------------- 3. HEADER (sticky top bar) --------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1.5rem; /* Translucent + blur = a modern "frosted glass" bar over the content. */ background-color: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--border); } /* The logo box holds two stacked layers — "JE" and the photo — that swap. */ .logo { position: relative; display: block; width: 40px; height: 40px; overflow: hidden; } .logo-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 1.1rem; letter-spacing: 1px; /* Gradient initials to match the name. */ background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; transition: opacity 0.4s ease, transform 0.4s ease; } .logo-photo { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; overflow: hidden; border: 1px solid var(--accent); opacity: 0; transform: translateY(120%); transition: opacity 0.4s ease, transform 0.4s ease; } .logo-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.4); transform-origin: center 38%; } .site-header.scrolled .logo-text { opacity: 0; transform: translateY(-120%); } .site-header.scrolled .logo-photo { opacity: 1; transform: translateY(0); } .theme-toggle { display: grid; place-items: center; background: none; border: 1px solid var(--border-strong); border-radius: 50%; width: 40px; height: 40px; color: var(--text-muted); cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); background-color: var(--bg-soft); transform: scale(1.08); } .theme-toggle svg { width: 19px; height: 19px; } /* Show the moon in dark mode, the sun in light mode (pure CSS, no JS swap). */ .theme-toggle .icon-sun { display: none; } html.light .theme-toggle .icon-moon { display: none; } html.light .theme-toggle .icon-sun { display: block; } /* ----- Header social icons ----- */ .socials { display: flex; align-items: center; gap: 0.15rem; margin: 0 0.4rem 0 0.75rem; } .social-link { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: var(--text-muted); transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } .social-link:hover { color: var(--accent); background-color: var(--bg-soft); transform: translateY(-2px); } .social-link svg { width: 18px; height: 18px; } /* ----- Header section nav ----- */ .nav { display: flex; gap: 0.25rem; margin-left: auto; /* pushes the nav over toward the toggle */ margin-right: 0.75rem; } .nav a { font-size: 0.9rem; color: var(--text-muted); padding: 0.4rem 0.75rem; border-radius: 999px; /* Hidden until scrolled: sits slightly low and transparent, can't be clicked. */ opacity: 0; transform: translateY(10px); pointer-events: none; transition: color 0.2s ease, background-color 0.2s ease, opacity 0.4s ease, transform 0.4s ease; } .nav a:hover { color: var(--text); background-color: var(--bg-soft); } /* The section currently in view (set by script.js). */ .nav a.active { color: var(--text); background-color: var(--bg-soft); } /* When scrolled (same trigger as the avatar), the links pop up and become clickable. A tiny per-link delay makes them cascade in. */ .site-header.scrolled .nav a { opacity: 1; transform: none; pointer-events: auto; } .site-header.scrolled .nav a:nth-child(1) { transition-delay: 0.04s; } .site-header.scrolled .nav a:nth-child(2) { transition-delay: 0.08s; } .site-header.scrolled .nav a:nth-child(3) { transition-delay: 0.12s; } .site-header.scrolled .nav a:nth-child(4) { transition-delay: 0.16s; } .site-header.scrolled .nav a:nth-child(5) { transition-delay: 0.20s; } /* ----- Mobile dock (floating bottom toolbar; phones only) ----- */ .dock { display: none; /* shown only inside the mobile media query */ } /* --------------------------------------------------------------------------- 4. HERO --------------------------------------------------------------------------- */ .hero { min-height: calc(100vh - 70px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: var(--max-width); margin: 0 auto; padding: 3rem 1.5rem; } /* Keep flex children within the column width so long text wraps (instead of taking its max-content width and overflowing the screen on mobile). */ .hero > * { max-width: 100%; } /* Circular avatar with a soft ring + glow. Inner is zoomed to the face. */ .avatar { position: relative; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background-color: var(--bg-soft); border: 2px solid transparent; /* Gradient ring via two backgrounds (padding-box fill + border-box gradient). */ background-image: linear-gradient(var(--bg-soft), var(--bg-soft)), var(--grad); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: var(--shadow-lg); margin-bottom: 1.75rem; } .avatar img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.4); transform-origin: center 38%; } /* The location/status line under the pitch. */ .hero-location { display: inline-flex; align-items: center; gap: 0.4rem; font-family: 'JetBrains Mono', monospace; font-size: 0.88rem; color: var(--text-muted); margin-top: 1.5rem; } .loc-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent); } .hero-name { font-size: clamp(2.6rem, 8vw, 4.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; /* Gradient text. */ background: linear-gradient(120deg, var(--text) 30%, var(--accent) 75%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-tagline { font-size: clamp(1.1rem, 3vw, 1.4rem); color: var(--text); font-weight: 500; margin-top: 0.9rem; } .hero-pitch { font-size: 1.12rem; color: var(--text-muted); margin-top: 1.1rem; max-width: 56ch; text-wrap: pretty; } .hero-pitch strong { color: var(--text); font-weight: 600; } .hero-buttons { display: flex; gap: 0.9rem; margin-top: 2.25rem; flex-wrap: wrap; } /* ----- Buttons ----- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.6rem; border-radius: var(--radius-sm); font-family: inherit; font-weight: 600; font-size: 0.98rem; cursor: pointer; border: 1px solid transparent; transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background-image: var(--grad); color: #fff; box-shadow: 0 10px 24px -10px rgba(106, 168, 255, 0.7); } .btn-primary:hover { box-shadow: 0 16px 30px -10px rgba(106, 168, 255, 0.8); } .btn-ghost { border-color: var(--border-strong); color: var(--text); background-color: transparent; } .btn-ghost:hover { border-color: var(--accent); background-color: var(--bg-soft); } /* --------------------------------------------------------------------------- 5. GENERIC SECTION STYLES --------------------------------------------------------------------------- */ .section { max-width: var(--max-width); margin: 0 auto; padding: 4.5rem 1.5rem; } .section-title { position: relative; font-size: 1.7rem; letter-spacing: -0.01em; margin-bottom: 1.5rem; padding-left: 0.9rem; } /* Gradient accent bar to the left of every section title. */ .section-title::before { content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px; border-radius: 4px; background-image: var(--grad); } .section-lead { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 2rem; max-width: 60ch; text-wrap: pretty; } /* A shared "card" look used by pillars, projects and contact rows. */ .card { background-color: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background-color: var(--bg-elevated); transform: translateY(-4px); box-shadow: var(--glow); } /* --------------------------------------------------------------------------- 5b. VALUE PILLARS ("Build it · Explain it · Share it") --------------------------------------------------------------------------- */ .pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; } .pillar { padding: 1.6rem; } .pillar-kicker { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; font-weight: 500; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .pillar h3 { font-size: 1.15rem; margin: 0.5rem 0 0.6rem; } .pillar p { color: var(--text-muted); font-size: 0.96rem; } /* ----- Apple-TV-style cursor tilt (shared by EVERY .card) ----- script.js sets the 3D rotation + the --mx/--my cursor position. The sheen below is a FIXED-radius circle (so it never stretches into an ellipse on wide cards) and is kept extremely subtle in both themes. */ .card { position: relative; transform-style: preserve-3d; } .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( circle 170px at var(--mx, 50%) var(--my, 50%), var(--sheen), transparent 100% ); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .card:hover::after { opacity: 1; } /* --------------------------------------------------------------------------- 5c. EXPERIENCE (vertical timeline) --------------------------------------------------------------------------- */ .xp-list { display: flex; flex-direction: column; gap: 1.6rem; } /* Each entry: a company logo badge on the left, the details on the right. */ .xp-item { display: flex; gap: 1rem; align-items: flex-start; } .xp-body { flex: 1 1 auto; min-width: 0; /* lets long text wrap instead of overflowing */ } /* The company "logo": a monogram chip tinted with the brand colour (--logo). Because the chip background and border derive from the theme variables, it automatically inverts between dark and light mode. */ .xp-logo { position: relative; flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; /* White chip so real company logos read correctly in BOTH dark and light. */ background: #fff; border: 1px solid var(--border-strong); box-shadow: var(--shadow); /* Monogram fallback styling (shown until a logo image is dropped in). */ font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.5px; color: var(--logo, #444); } /* The real logo image; sits on top of the monogram. If the file is missing, the inline onerror removes it and the monogram shows through. */ .xp-logo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 7px; background: #fff; } .xp-role { font-weight: 600; font-size: 1.06rem; } .xp-org { font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; color: var(--accent); margin-top: 0.15rem; } .xp-meta { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 0.65rem; } .xp-item ul { margin-left: 1.1rem; color: var(--text-muted); font-size: 0.96rem; } .xp-item li { margin-bottom: 0.3rem; } .xp-item li strong { color: var(--text); font-weight: 600; } /* Inline text link (e.g. inside an experience bullet). */ .inline-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .inline-link:hover { text-decoration-thickness: 2px; } /* --------------------------------------------------------------------------- 6. ABOUT --------------------------------------------------------------------------- */ .about-text p { color: var(--text-muted); margin-bottom: 1rem; font-size: 1.07rem; text-wrap: pretty; } .about-text strong { color: var(--text); } /* --------------------------------------------------------------------------- 6b. SKILLS --------------------------------------------------------------------------- */ .skill-group { margin-bottom: 1.75rem; } .skill-group:last-child { margin-bottom: 0; } .skill-group-title { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.9rem; } .skill-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.7rem; } .skill-tags li { font-family: 'JetBrains Mono', monospace; font-size: 0.88rem; padding: 0.5rem 1rem; background-color: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .skill-tags li:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .tag-note { color: var(--text-muted); font-size: 0.78rem; } /* --------------------------------------------------------------------------- 7. PROJECTS --------------------------------------------------------------------------- */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; } .project-card { padding: 1.6rem; } .project-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--accent); margin-bottom: 0.5rem; } .project-title { font-size: 1.25rem; margin-bottom: 0.5rem; } .project-desc { color: var(--text-muted); font-size: 0.96rem; margin-bottom: 1.1rem; text-wrap: pretty; } .project-link { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--accent); } .project-link:hover { gap: 0.65rem; /* nudges the arrow on hover */ } .project-link-icon { vertical-align: middle; } /* --------------------------------------------------------------------------- 8. CONTACT --------------------------------------------------------------------------- */ .contact-intro { color: var(--text-muted); margin-bottom: 1.5rem; } .contact-list { display: flex; flex-direction: column; gap: 0.85rem; } .contact-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; } .contact-item:hover { transform: translateX(5px); } .contact-icon { display: grid; place-items: center; width: 1.6rem; color: var(--accent); } .contact-icon svg { width: 20px; height: 20px; } .contact-label { font-weight: 600; min-width: 70px; } .contact-value { color: var(--text-muted); word-break: break-word; } /* --------------------------------------------------------------------------- 9. FOOTER --------------------------------------------------------------------------- */ .site-footer { text-align: center; padding: 2.5rem 1.5rem; color: var(--text-muted); font-size: 0.88rem; border-top: 1px solid var(--border); } /* --------------------------------------------------------------------------- 10. SCROLL-REVEAL ANIMATION --------------------------------------------------------------------------- Sections start slightly down + transparent, then ease into place when they scroll into view. The hiding only applies once JS adds "reveal-on" to , so visitors without JS (and printers) always see everything. --------------------------------------------------------------------------- */ html.reveal-on .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } html.reveal-on .reveal.is-visible { opacity: 1; transform: none; } /* Anything print-only is hidden on screen. */ .print-only { display: none; } /* Respect users who prefer less motion. */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.reveal-on .reveal { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- 11. MOBILE RESPONSIVENESS --------------------------------------------------------------------------- */ @media (max-width: 600px) { .hero { padding: 2.5rem 1.25rem; } /* Smaller so the full name wraps cleanly instead of clipping the edge. */ .hero-name { font-size: clamp(1.9rem, 9vw, 2.6rem); overflow-wrap: break-word; } /* Force the text blocks to the column width so long lines wrap instead of taking their content width and spilling off the right of the screen. */ .hero-name, .hero-tagline, .hero-pitch, .hero-location { width: 100%; max-width: 100%; } .hero-buttons { width: 100%; } .btn { flex: 1 1 auto; justify-content: center; } .section { padding: 3.25rem 1.25rem; } .contact-item { flex-wrap: wrap; } /* The header nav collapses; the bottom dock takes over. */ .nav { display: none; } /* Leave room so the floating dock never covers the footer. */ body { padding-bottom: 84px; } .dock { display: flex; position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); gap: 0.2rem; padding: 0.35rem; z-index: 50; /* Frosted floating pill. */ background-color: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border: 1px solid var(--border-strong); border-radius: 999px; box-shadow: var(--shadow-lg); } .dock a { font-size: 0.82rem; font-weight: 500; color: var(--text-muted); padding: 0.55rem 0.85rem; border-radius: 999px; transition: color 0.2s ease, background-color 0.2s ease; } .dock a:active, .dock a.active { color: #fff; background-image: var(--grad); } } /* --------------------------------------------------------------------------- 12. PRINT — the page becomes a clean, recruiter-ready PDF / CV --------------------------------------------------------------------------- Triggered by the browser's Print / "Save as PDF" (and the hero button). We force a light, ink-friendly look, drop interactive chrome, and tighten the layout so it reads like a proper one/two-page CV. --------------------------------------------------------------------------- */ @media print { /* Force an ink-friendly palette so every var()-coloured element prints dark on white, regardless of the on-screen theme. */ :root, html.light { --bg: #ffffff; --bg-soft: #ffffff; --bg-elevated: #ffffff; --text: #1a1a1a; --text-muted: #444444; --accent: #1f49c4; --accent-2: #1f49c4; --border: #cccccc; --border-strong: #bbbbbb; } @page { size: A4; margin: 18mm 17mm; } html, body { background: #fff !important; color: #1a1a1a !important; font-family: 'Inter', system-ui, sans-serif; font-size: 10pt; line-height: 1.55; } /* Strip every screen flourish: glow, shadows, rounded chrome. */ body::before { display: none !important; } * { box-shadow: none !important; text-shadow: none !important; } /* Hide chrome + non-CV sections. Printed page = header + Experience, Projects, Education, Skills. Also drop the elements that made the screen version "card"-y or ragged: logo chips, title bars, leads, pills. */ .site-header, .theme-toggle, .nav, .dock, .socials, .hero-buttons, .hero-location, .hero-pitch, .site-footer, .section-lead, .xp-logo, .project-tag, .project-link-icon, #value, #about, #contact { display: none !important; } /* Reveal everything (no animations on paper) and show the print contact. */ html.reveal-on .reveal { opacity: 1 !important; transform: none !important; } .print-only { display: block !important; } /* ---- Header: name + contact left, photo right ---- */ .hero { min-height: 0; display: block; max-width: none; margin: 0 0 8px; padding: 0; /* No divider rule — whitespace + the first section heading separate it. */ } .hero::after { content: ""; display: block; clear: both; } .hero > * { width: auto; max-width: none; } .avatar { float: right; width: 82px; height: 82px; margin: 0 0 6px 14px; border: 1px solid #bbb; background-image: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .hero-name { font-size: 25pt; font-weight: 700; letter-spacing: -0.015em; line-height: 1.05; background: none; -webkit-text-fill-color: currentColor; color: #141414; } .hero-tagline { font-size: 11.5pt; font-weight: 400; margin-top: 6px; color: #555; } .print-contact { margin-top: 12px; font-size: 9pt; color: #555; } .print-contact a { color: #25406e !important; text-decoration: none; } /* ---- One consistent rhythm for every section ---- */ .section { max-width: none; margin: 0; padding: 0; } /* Clean full-width section heading; no gradient bar, aligned hard left. */ .section-title { font-size: 10.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: #25406e; /* refined navy accent for headings */ margin: 22px 0 12px; padding: 0 0 5px; border-bottom: 1px solid #dcdee3; break-after: avoid; } .section-title::before { display: none; /* remove the accent bar */ } /* Flatten ALL cards — no borders, fills, radius or padding. */ .card, .project-card, .pillar, .contact-item { background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; transform: none !important; } .card::after { display: none !important; } /* ---- Experience & Education entries ---- */ .xp-list { display: block; } .xp-item { display: block; margin: 0 0 15px; padding: 0; break-inside: avoid; page-break-inside: avoid; } .xp-body { display: block; } /* Role and organisation share one line: "Role · Organisation". */ .xp-role, .xp-org { display: inline; font-size: 11.5pt; margin: 0; } .xp-role { font-weight: 700; color: #141414; } .xp-org { font-family: inherit; font-weight: 600; color: #25406e; /* company names pick up the accent */ } .xp-org::before { content: " · "; color: #b0b4bb; font-weight: 400; } .xp-meta { font-size: 8.5pt; font-style: italic; color: #777; margin: 3px 0 7px; } .xp-item ul { margin: 0 0 0 16px; font-size: 10pt; color: #2b2b2b; } .xp-item li { margin-bottom: 5px; padding-left: 3px; } .xp-item li strong { font-weight: 600; } /* ---- Projects ---- */ .project-grid { display: block; } .project-card { margin: 0 0 15px; break-inside: avoid; page-break-inside: avoid; } .project-title { font-size: 11.5pt; font-weight: 700; color: #141414; margin: 0 0 5px; } .project-desc { font-size: 10pt; margin: 0 0 5px; color: #2b2b2b; } .project-link { color: #25406e !important; font-weight: 600; font-size: 9pt; gap: 0; } /* Spell out the real URL (a PDF link isn't clickable). */ .project-link::after { content: " — " attr(href); font-weight: 400; color: #777; } /* ---- Skills as lean inline text, not pills ---- */ .skill-group { margin: 0 0 9px; break-inside: avoid; } .skill-group-title { display: inline; font-family: 'Inter', system-ui, sans-serif; /* kill the monospace */ font-size: 10pt; font-weight: 700; letter-spacing: 0; text-transform: none; color: #25406e; } .skill-group-title::after { content: ": "; color: #141414; } .skill-tags { display: inline; } .skill-tags li { display: inline; background: none !important; border: none !important; padding: 0; font-family: 'Inter', system-ui, sans-serif; /* kill the monospace */ font-size: 10pt; color: #2b2b2b; } .skill-tags li::after { content: ", "; color: #555; } .skill-tags li:last-child::after { content: ""; } .tag-note { color: #666; } }