/* ============================================================ MK-IT — Marcin Kosiarek Design system: shadcn/ui aesthetic, zinc palette, Geist font ============================================================ */ /* ── Dark mode flash prevention (also in script) ─── */ /* Applied via JS before first paint */ /* ── Design Tokens ─────────────────────────────────────── */ :root { /* Surfaces */ --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); /* Primary */ --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); /* Secondary / hover surfaces */ --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); /* Muted */ --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); /* Borders */ --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); /* Brand accent — desaturated steel blue, use sparingly */ --accent-brand: oklch(0.5 0.06 240); --accent-brand-light: oklch(0.94 0.02 240); /* Radius */ --radius: 0.5rem; --radius-sm: calc(var(--radius) * 0.6); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); /* Typography */ --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', 'Fira Code', 'Cascadia Code', monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.75; --tracking-tight: -0.025em; --tracking-wide: 0.05em; --tracking-widest: 0.1em; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --section-pad: clamp(4rem, 8vw, 7rem); --container-max: 1100px; --container-px: clamp(1.25rem, 5vw, 2rem); --text-measure: 65ch; /* Nav */ --nav-height: 64px; } /* Dark mode overrides */ .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --accent-brand: oklch(0.68 0.08 240); --accent-brand-light: oklch(0.25 0.04 240); } /* ── Reset & Base ───────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--leading-normal); color: var(--foreground); background-color: var(--background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.2s, color 0.2s; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-brand); outline-offset: 2px; border-radius: var(--radius-sm); } ul, ol { list-style: none; } /* ── Layout Utilities ───────────────────────────────────── */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); } .eyebrow { display: inline-block; font-size: var(--font-size-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--muted-foreground); margin-bottom: var(--space-3); } .section-heading { font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-3xl)); font-weight: 600; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--foreground); margin-bottom: var(--space-4); } .text-muted { color: var(--muted-foreground); } .mono { font-family: var(--font-mono); } .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; } /* ── Buttons ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.625rem var(--space-6); font-family: var(--font-sans); font-size: var(--font-size-base); font-weight: 500; line-height: 1; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color 150ms, border-color 150ms, color 150ms, box-shadow 150ms; white-space: nowrap; } .btn-primary { background-color: var(--primary); color: var(--primary-foreground); border-color: var(--primary); } .btn-primary:hover { background-color: var(--foreground); border-color: var(--foreground); } .btn-ghost { background-color: transparent; color: var(--foreground); border-color: var(--border); } .btn-ghost:hover { background-color: var(--secondary); border-color: var(--ring); } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } /* ── Navigation ─────────────────────────────────────────── */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-height); background-color: var(--background); border-bottom: 1px solid transparent; transition: border-color 200ms, background-color 200ms, box-shadow 200ms; } .site-nav.scrolled { border-bottom-color: var(--border); box-shadow: 0 1px 8px oklch(0 0 0 / 4%); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); gap: var(--space-6); } .nav-logo { flex-shrink: 0; display: flex; align-items: center; } .nav-logo img { height: 36px; width: auto; } /* Invert logo in dark mode (pure black SVG on transparent) */ .dark .nav-logo img { filter: invert(1); } .nav-links { display: none; align-items: center; gap: var(--space-1); } @media (min-width: 768px) { .nav-links { display: flex; } } .nav-link { padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); font-weight: 500; color: var(--muted-foreground); border-radius: var(--radius-sm); transition: color 150ms, background-color 150ms; } .nav-link:hover, .nav-link.active { color: var(--foreground); background-color: var(--secondary); } .nav-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* Language toggle */ .nav-lang { display: none; align-items: center; font-size: var(--font-size-xs); font-weight: 600; letter-spacing: var(--tracking-wide); color: var(--muted-foreground); gap: 0; } @media (min-width: 768px) { .nav-lang { display: flex; } } .nav-lang a { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); transition: color 150ms; } .nav-lang a:hover, .nav-lang a.active { color: var(--foreground); } .nav-lang .lang-sep { color: var(--border); user-select: none; } /* Theme toggle button */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--muted-foreground); cursor: pointer; transition: color 150ms, border-color 150ms, background-color 150ms; flex-shrink: 0; } .theme-toggle:hover { color: var(--foreground); border-color: var(--ring); background-color: var(--secondary); } .theme-toggle svg { width: 16px; height: 16px; } .icon-sun { display: none; } .icon-moon { display: block; } .dark .icon-sun { display: block; } .dark .icon-moon { display: none; } /* LinkedIn nav link */ .nav-linkedin { display: none; align-items: center; gap: var(--space-1); font-size: var(--font-size-sm); font-weight: 500; color: var(--muted-foreground); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); transition: color 150ms, border-color 150ms, background-color 150ms; } @media (min-width: 900px) { .nav-linkedin { display: flex; } } .nav-linkedin:hover { color: var(--foreground); border-color: var(--ring); background-color: var(--secondary); } .nav-linkedin svg { width: 14px; height: 14px; } /* Hamburger */ .nav-hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; cursor: pointer; padding: 8px; transition: border-color 150ms; } @media (min-width: 768px) { .nav-hamburger { display: none; } } .nav-hamburger span { display: block; height: 1.5px; background-color: var(--foreground); border-radius: 2px; transition: transform 200ms, opacity 200ms; } /* Mobile menu */ .mobile-menu { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; background-color: var(--background); border-top: 1px solid var(--border); z-index: 99; flex-direction: column; padding: var(--space-6) var(--container-px); gap: var(--space-2); overflow-y: auto; } .mobile-menu.open { display: flex; } .mobile-menu .nav-link { font-size: var(--font-size-base); padding: var(--space-3) var(--space-4); } .mobile-menu-footer { margin-top: auto; padding-top: var(--space-6); border-top: 1px solid var(--border); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } /* ── Hero Section ───────────────────────────────────────── */ .hero { padding-top: calc(var(--nav-height) + clamp(3rem, 8vw, 6rem)); padding-bottom: clamp(3rem, 8vw, 6rem); background-color: var(--background); } .hero-inner { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: center; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); } @media (min-width: 768px) { .hero-inner { grid-template-columns: 1fr 340px; gap: var(--space-16); } } @media (min-width: 1024px) { .hero-inner { grid-template-columns: 1fr 380px; } } .hero-eyebrow { font-size: var(--font-size-sm); font-weight: 500; color: var(--muted-foreground); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .hero-eyebrow-dot { width: 4px; height: 4px; border-radius: 50%; background-color: var(--muted-foreground); flex-shrink: 0; } .hero-title { font-size: clamp(var(--font-size-4xl), 6vw, var(--font-size-5xl)); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--foreground); margin-bottom: var(--space-6); } .hero-subtitle { font-size: var(--font-size-lg); line-height: var(--leading-relaxed); color: var(--muted-foreground); max-width: 52ch; margin-bottom: var(--space-8); } .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* Photo placeholder — invisible until photo is added */ .hero-visual { display: flex; justify-content: center; } .photo-placeholder { width: 100%; max-width: 340px; aspect-ratio: 6 / 7; background: transparent; border-radius: var(--radius-xl); border-color: transparent; display: flex; align-items: center; justify-content: center; } @media (min-width: 768px) { .photo-placeholder { max-width: none; width: 100%; } } /* Swap .photo-placeholder for when photo is ready */ .photo-placeholder-text { display: none; } /* No empty space on mobile when placeholder is invisible */ @media (max-width: 767px) { .hero-visual { display: none; } } /* ── About Section ──────────────────────────────────────── */ .about { padding-block: var(--section-pad); border-top: 1px solid var(--border); } .about-inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); } .about-header { margin-bottom: var(--space-8); } .about-body { display: grid; grid-template-columns: 1fr; gap: var(--space-12); } @media (min-width: 900px) { .about-body { grid-template-columns: 1fr 340px; align-items: start; gap: var(--space-16); } } .bio p { font-size: var(--font-size-lg); line-height: var(--leading-relaxed); color: var(--foreground); margin-bottom: var(--space-6); max-width: var(--text-measure); } .bio p:last-child { margin-bottom: 0; } .bio a { color: var(--accent-brand); text-decoration: underline; text-underline-offset: 3px; transition: opacity 150ms; } .bio a:hover { opacity: 0.75; } /* Stats */ .stats-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background-color: var(--border); } .stat { background-color: var(--background); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-1); } .stat-number { font-family: var(--font-mono); font-size: var(--font-size-3xl); font-weight: 700; line-height: 1; color: var(--foreground); } .stat-label { font-size: var(--font-size-sm); color: var(--muted-foreground); line-height: var(--leading-snug); } .stat-wide { grid-column: 1 / -1; } /* ── Services Section ───────────────────────────────────── */ .services { padding-block: var(--section-pad); border-top: 1px solid var(--border); } .services-inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); } .services-header { margin-bottom: var(--space-10); } .services-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .services-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .services-grid { grid-template-columns: 1fr 1fr 1fr; } } .service-card { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); transition: border-color 150ms, box-shadow 150ms; } .service-card:hover { border-color: var(--ring); box-shadow: 0 4px 12px oklch(0 0 0 / 6%); } .service-icon { width: 40px; height: 40px; color: var(--accent-brand); flex-shrink: 0; } .service-icon svg { width: 100%; height: 100%; } .service-title { font-size: var(--font-size-xl); font-weight: 600; line-height: var(--leading-snug); color: var(--foreground); } .service-desc { font-size: var(--font-size-base); line-height: var(--leading-relaxed); color: var(--muted-foreground); flex: 1; } /* Service card spanning full width on large grid */ .service-card-wide { grid-column: 1 / -1; } @media (min-width: 1024px) { .service-card-wide { grid-column: auto; } } /* ── How I Work Section ─────────────────────────────────── */ .how-i-work { padding-block: var(--section-pad); border-top: 1px solid var(--border); background-color: var(--secondary); } .how-inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); } .how-header { margin-bottom: var(--space-10); } .steps { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .steps { grid-template-columns: 1fr 1fr 1fr; } } .step { background-color: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); } .step-num { font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: var(--tracking-widest); color: var(--accent-brand); text-transform: uppercase; } .step-title { font-size: var(--font-size-xl); font-weight: 600; line-height: var(--leading-snug); color: var(--foreground); } .step-body { font-size: var(--font-size-base); line-height: var(--leading-relaxed); color: var(--muted-foreground); flex: 1; } .step-link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-sm); font-weight: 500; color: var(--accent-brand); text-decoration: underline; text-underline-offset: 3px; transition: opacity 150ms; } .step-link:hover { opacity: 0.75; } .how-meta { margin-top: var(--space-10); padding: var(--space-6) var(--space-8); background-color: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-12); } .how-meta-item { display: flex; flex-direction: column; gap: var(--space-1); } .how-meta-label { font-size: var(--font-size-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted-foreground); } .how-meta-value { font-size: var(--font-size-base); color: var(--foreground); } /* ── Testimonials (hidden at launch) ────────────────────── */ .testimonials { display: none; /* Activate when client quotes are obtained */ padding-block: var(--section-pad); border-top: 1px solid var(--border); } /* Writing section — remove this line to show it */ .blog, a[href="#blog"] { display: none; } /* ── Blog Section ───────────────────────────────────────── */ .blog { padding-block: var(--section-pad); border-top: 1px solid var(--border); } .blog-inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); } .blog-header { margin-bottom: var(--space-4); } .blog-intro { font-size: var(--font-size-base); line-height: var(--leading-relaxed); color: var(--muted-foreground); max-width: 60ch; margin-bottom: var(--space-10); } .blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .blog-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .blog-grid { grid-template-columns: 1fr 1fr 1fr; } } .blog-card { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); transition: border-color 150ms; } .blog-card:hover { border-color: var(--ring); } .blog-tag { display: inline-block; font-size: var(--font-size-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-brand); background-color: var(--accent-brand-light); padding: 0.2rem var(--space-2); border-radius: var(--radius-sm); } .blog-title { font-size: var(--font-size-xl); font-weight: 600; line-height: var(--leading-snug); color: var(--foreground); } .blog-excerpt { font-size: var(--font-size-base); line-height: var(--leading-relaxed); color: var(--muted-foreground); flex: 1; } .blog-meta { font-size: var(--font-size-xs); font-family: var(--font-mono); color: var(--muted-foreground); margin-top: var(--space-2); } .blog-footer { margin-top: var(--space-8); text-align: center; } /* ── Contact Section ────────────────────────────────────── */ .contact { padding-block: var(--section-pad); border-top: 1px solid var(--border); background-color: var(--secondary); } .contact-inner { max-width: 720px; margin-inline: auto; padding-inline: var(--container-px); text-align: center; } .contact-heading { font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-3xl)); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--foreground); margin-bottom: var(--space-6); } .contact-sub { font-size: var(--font-size-lg); line-height: var(--leading-relaxed); color: var(--muted-foreground); margin-bottom: var(--space-8); } .contact-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-bottom: var(--space-8); } .contact-note { font-size: var(--font-size-sm); color: var(--muted-foreground); padding-top: var(--space-6); border-top: 1px solid var(--border); } .contact-note a { color: var(--accent-brand); text-decoration: underline; text-underline-offset: 3px; } /* ── Footer ─────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); background-color: var(--secondary); padding-block: var(--space-12); } .footer-inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 768px) { .footer-inner { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-12); } } .footer-brand { display: flex; flex-direction: column; gap: var(--space-3); } .footer-logo { height: 56px; width: auto; } .dark .footer-logo { filter: invert(1); } .footer-tagline { font-size: var(--font-size-sm); color: var(--muted-foreground); line-height: var(--leading-snug); } .footer-copy { font-size: var(--font-size-xs); color: var(--muted-foreground); margin-top: auto; } .footer-nav-title, .footer-contact-title { font-size: var(--font-size-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--muted-foreground); margin-bottom: var(--space-4); } .footer-nav-links, .footer-contact-links { display: flex; flex-direction: column; gap: var(--space-2); } .footer-nav-link, .footer-contact-link { font-size: var(--font-size-sm); color: var(--muted-foreground); display: inline-flex; align-items: center; gap: var(--space-1); transition: color 150ms; } .footer-nav-link:hover, .footer-contact-link:hover { color: var(--foreground); } .footer-contact-link svg { width: 14px; height: 14px; flex-shrink: 0; } /* ── Responsive tweaks ──────────────────────────────────── */ /* ── Print ──────────────────────────────────────────────── */ @media print { .site-nav, .mobile-menu, .theme-toggle { display: none; } body { background: white; color: black; } }