/* ========================================================================== Mike Rosik Portfolio — main.css Design system + layout for a senior UX / product designer portfolio. Mobile-first, accessible, fast. No external dependencies. ========================================================================== */ /* --------------------------------------------------------------------------- 1. Design tokens (CSS custom properties) Light is the default — paper white, warm grey, signature orange (a la Teenage Engineering / Scandinavian + Polish industrial design). .theme-dark on flips to a warm charcoal palette. --------------------------------------------------------------------------- */ :root { /* Neutral light palette — paper, warm grey, orange */ --bg: #f2f2ef; --bg-elevated: #ffffff; --bg-card: #ffffff; --bg-card-hover: #faf9f6; --border: #e3e3dd; --border-strong: #c8c8c0; --text: #1a1a18; --text-muted: #6c6c64; --text-faint: #9b9b91; --accent: #ff4d00; /* signature orange */ --accent-hover: #e64500; --accent-contrast:#161514; /* near-black text on orange — high contrast, very TE */ --ring: #ff4d00; /* Typography Space Grotesk = techy neo-grotesque (TE / Scandinavian / electronic feel). Space Mono = technical monospace for labels and meta. Both fall back to a robust system stack so text always renders, on any device, even before/if the web font fails to load. */ --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --font-display: var(--font-sans); --font-mono: "Space Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Fluid type scale (clamp: min, preferred, max) */ --fs-200: clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem); --fs-300: clamp(0.9rem, 0.87rem + 0.15vw, 1rem); --fs-400: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --fs-500: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --fs-600: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); --fs-700: clamp(2rem, 1.5rem + 2.4vw, 3.2rem); --fs-900: clamp(2.6rem, 1.6rem + 4.6vw, 5.2rem); /* Spacing scale */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; /* Layout */ --container: 1200px; --container-narrow: 760px; --gutter: clamp(1.1rem, 4vw, 2.5rem); --radius: 14px; --radius-sm: 8px; --radius-lg: 22px; /* Effects — soft, paper-like shadows for the light default */ --shadow-sm: 0 1px 2px rgba(20,20,18,.06); --shadow-md: 0 10px 30px -14px rgba(20,20,18,.16); --shadow-lg: 0 26px 60px -26px rgba(20,20,18,.20); --transition: 220ms cubic-bezier(.2,.7,.3,1); } /* Warm charcoal dark palette */ :root.theme-dark { --bg: #181816; --bg-elevated: #201f1d; --bg-card: #1e1d1b; --bg-card-hover: #262421; --border: #34322e; --border-strong: #4a4742; --text: #f1f0ec; --text-muted: #a8a69d; --text-faint: #74716a; --accent: #ff5a1a; /* a touch brighter on dark */ --accent-hover: #ff7438; --accent-contrast:#161514; --ring: #ff5a1a; --shadow-md: 0 10px 30px -12px rgba(0,0,0,.55); --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.6); } /* --------------------------------------------------------------------------- 2. Reset / base --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; /* offset sticky header for anchor links */ } body { font-family: var(--font-sans); font-size: var(--fs-400); line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } a:not(.btn):not(.site-branding):hover { color: var(--accent-hover); } ul, ol { padding: 0; list-style: none; } button { font: inherit; color: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--accent); color: var(--accent-contrast); } /* --------------------------------------------------------------------------- 3. Layout helpers --------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--space-3xl); } .section--tight { padding-block: var(--space-2xl); } .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xl); } .section-eyebrow { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-mono); font-size: var(--fs-200); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-sm); } .section-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; } .section-title { font-size: var(--fs-700); } .section-intro { margin-top: var(--space-sm); max-width: 55ch; color: var(--text-muted); font-size: var(--fs-500); font-weight: 400; letter-spacing: -0.01em; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-md); top: -100px; z-index: 1000; background: var(--accent); color: var(--accent-contrast); padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-weight: 600; transition: top var(--transition); } .skip-link:focus { top: var(--space-md); } /* --------------------------------------------------------------------------- 4. Buttons --------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.4rem; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: var(--fs-300); letter-spacing: -0.01em; line-height: 1; cursor: pointer; transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow-md); } .btn--primary:hover { background: var(--accent-hover); color: var(--accent-contrast); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn--ghost:hover { border-color: var(--accent); color: var(--text); } .btn--small { padding: 0.55rem 1rem; font-size: var(--fs-200); } .arrow { transition: transform var(--transition); } .btn:hover .arrow, .card:hover .arrow { transform: translateX(4px); } /* --------------------------------------------------------------------------- 5. Site header / nav --------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--transition), background var(--transition); } .site-header.is-scrolled { border-bottom-color: var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 72px; } /* Header is split into a left group (burger + brand) and a right group (nav links + action icons), so nav sits beside the theme/mail buttons. */ .site-header__left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .site-header__right { display: flex; align-items: center; gap: clamp(0.9rem, 2.2vw, 1.6rem); } .site-branding { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; } .site-branding .custom-logo { width: auto; max-height: 40px; } .site-brand { display: inline-flex; flex-direction: column; line-height: 1.08; } .site-title { font-size: var(--fs-500); font-weight: 700; letter-spacing: -0.03em; color: var(--text); transition: color var(--transition); } .site-brand:hover .site-title { color: var(--accent); } .site-tagline { font-family: var(--font-mono); font-size: var(--fs-200); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-top: 0.15rem; } .primary-nav { display: flex; align-items: center; gap: var(--space-lg); } .primary-nav .menu { display: flex; align-items: center; gap: clamp(0.6rem, 2vw, 1.6rem); font-size: var(--fs-300); font-weight: 500; } .primary-nav .menu a { position: relative; padding: 0.35rem 0; color: var(--text-muted); transition: color var(--transition); } .primary-nav .menu a:hover, .primary-nav .menu .current-menu-item > a { color: var(--text); } .primary-nav .menu a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .primary-nav .menu a:hover::after, .primary-nav .menu .current-menu-item > a::after { transform: scaleX(1); } .header-actions { display: flex; align-items: center; gap: var(--space-sm); } /* Theme toggle */ .theme-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); transition: border-color var(--transition), transform var(--transition); } .theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); } .theme-toggle .icon { width: 20px; height: 20px; } .theme-toggle .icon-sun { display: none; } :root.theme-dark .theme-toggle .icon-moon { display: none; } :root.theme-dark .theme-toggle .icon-sun { display: block; } /* Flat contact icon button — sleek graphic CTA, no text */ .contact-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); border: 1px solid var(--accent); transition: transform var(--transition), background var(--transition), box-shadow var(--transition); will-change: transform; } .contact-btn:hover { background: var(--accent-hover); color: var(--accent-contrast); transform: translateY(-1px); box-shadow: var(--shadow-md); } .contact-btn:active { transform: translateY(0); } .contact-btn .icon { width: 20px; height: 20px; } /* Mobile nav toggle (burger) */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); } .nav-toggle span { display: block; width: 20px; height: 2px; margin-inline: auto; background: var(--text); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --------------------------------------------------------------------------- 6. Hero --------------------------------------------------------------------------- */ .hero { position: relative; padding-block: clamp(3.5rem, 10vw, 8rem); overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -1; /* Restrained single warm wash — keeps the clean, functional TE feel. */ background: radial-gradient(70% 60% at 92% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%); pointer-events: none; } .hero__inner { max-width: 920px; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.9rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-elevated); font-family: var(--font-mono); font-size: var(--fs-200); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-lg); } .hero__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } .hero__title { font-size: var(--fs-900); letter-spacing: -0.04em; margin-bottom: var(--space-md); } .hero__title .accent { color: var(--accent); } .hero__lede { font-size: var(--fs-500); color: var(--text-muted); max-width: 60ch; font-weight: 400; margin-bottom: var(--space-xl); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; } .hero__stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.5rem); margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--border); } .hero__stat .num { font-size: var(--fs-600); font-weight: 700; letter-spacing: -0.03em; } .hero__stat .label { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; } /* --------------------------------------------------------------------------- 7. Project cards & grid --------------------------------------------------------------------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(1.2rem, 3vw, 2rem); } .card-grid--featured { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); } .card { position: relative; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition); will-change: transform; } .card:hover { transform: translateY(-6px); border-color: var(--border-strong); background: var(--bg-card-hover); box-shadow: var(--shadow-lg); } .card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-elevated); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.2,.7,.3,1); } .card:hover .card__media img { transform: scale(1.05); } .card__media--placeholder { display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--bg-elevated)), var(--bg-elevated)); color: var(--text-faint); } .card__media--placeholder svg { width: 56px; height: 56px; opacity: .5; } .card__body { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); flex: 1; } .card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .tag { font-family: var(--font-mono); font-size: var(--fs-200); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 6px; background: transparent; color: var(--text-muted); border: 1px solid var(--border-strong); transition: border-color var(--transition), color var(--transition); } .card:hover .tag { border-color: var(--accent); color: var(--accent); } .card__title { font-size: var(--fs-500); letter-spacing: -0.02em; } .card__title a { transition: color var(--transition); } .card:hover .card__title a { color: var(--accent-hover); } .card__summary { color: var(--text-muted); font-size: var(--fs-300); } .card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: var(--fs-300); color: var(--accent); } /* Make the whole card clickable while keeping inner links accessible */ .card__cover-link { position: absolute; inset: 0; z-index: 3; /* above .card__media/.card__body (z-index:1) so the whole card is clickable */ border-radius: inherit; } /* --------------------------------------------------------------------------- 8. Category sections --------------------------------------------------------------------------- */ .category-block + .category-block { margin-top: var(--space-2xl); } .category-block__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); margin-bottom: var(--space-lg); border-bottom: 1px solid var(--border); } .category-block__title { font-size: var(--fs-600); display: flex; align-items: center; gap: 0.75rem; } .category-block__title .chip { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-hover); } .category-block__title .chip svg { width: 20px; height: 20px; } .category-block__count { color: var(--text-faint); font-size: var(--fs-300); } /* --------------------------------------------------------------------------- 9. About + Skills --------------------------------------------------------------------------- */ .about { display: grid; gap: var(--space-2xl); grid-template-columns: 1fr; align-items: center; } .about__media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-md); } .about__media img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; } .about__lede { font-size: var(--fs-500); font-weight: 400; } .about__body { color: var(--text-muted); } .about__body p + p { margin-top: var(--space-md); } /* When there is no portrait, let the bio run as a single readable column. */ .about.about--no-media { grid-template-columns: 1fr; } .about.about--no-media .about__content { max-width: 860px; } /* FAA / certification callout */ .about__cert { margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-muted); font-size: var(--fs-300); } .about__cert strong { display: block; margin-bottom: 0.2rem; color: var(--text); font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: 0.04em; text-transform: uppercase; } /* Credentials / contact facts */ .about__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--border); } /* On desktop, keep all the credential facts on a single row. */ @media (min-width: 760px) { .about__facts { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .about-fact { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; min-width: 0; } .about-fact__value { overflow-wrap: break-word; } .about-fact__label { font-family: var(--font-mono); font-size: var(--fs-200); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); } .about-fact__value { margin: 0; font-size: var(--fs-300); font-weight: 500; color: var(--text); } .about-fact__value a { color: var(--accent); } .about-fact__value a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; } .skills-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } .skill-card { padding: var(--space-lg); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); transition: transform var(--transition), border-color var(--transition); } .skill-card:hover { transform: translateY(-4px); border-color: var(--border-strong); } .skill-card h3 { font-size: var(--fs-400); margin-bottom: var(--space-xs); } .skill-card__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-sm); border-radius: 12px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-hover); } .skill-card__icon svg { width: 22px; height: 22px; } .skill-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--space-sm); } .skill-list li { font-size: var(--fs-200); padding: 0.25rem 0.6rem; border-radius: 6px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted); } /* --------------------------------------------------------------------------- 10. Contact section + form --------------------------------------------------------------------------- */ .contact { display: grid; gap: var(--space-2xl); grid-template-columns: 1fr; align-items: start; } .contact__details { display: grid; gap: var(--space-lg); } .contact-detail { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; } .contact-detail__label { font-family: var(--font-mono); font-size: var(--fs-200); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); } .contact-detail__value { margin: 0; font-size: var(--fs-400); font-weight: 500; color: var(--text); } .contact-detail__value a { color: var(--text); transition: color var(--transition); } .contact-detail__value a:hover { color: var(--accent); } .contact__form-wrap { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-md); } .contact-form { display: grid; gap: var(--space-lg); } .form-grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; } .form-row { display: grid; gap: 0.45rem; } .form-row label { font-family: var(--font-mono); font-size: var(--fs-200); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .form-row label .optional { color: var(--text-faint); text-transform: none; letter-spacing: 0; } .form-row input, .form-row textarea, .form-row select { width: 100%; font-family: var(--font-sans); font-size: var(--fs-300); padding: 0.8rem 1rem; color: var(--text); background-color: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition); -webkit-appearance: none; appearance: none; } .form-row input::placeholder, .form-row textarea::placeholder { color: var(--text-faint); } .form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .form-row textarea { resize: vertical; min-height: 150px; } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); } .form-note { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--text-faint); } /* Honeypot: visually hidden but present for bots. */ .honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .form-alert { margin-bottom: var(--space-lg); padding: var(--space-md) var(--space-lg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-elevated); font-size: var(--fs-300); color: var(--text); } .form-alert--err { border-color: var(--accent); } @media (min-width: 880px) { .contact { grid-template-columns: 0.8fr 1.2fr; } .form-grid { grid-template-columns: 1fr 1fr; } } /* --------------------------------------------------------------------------- 11. Posts / articles / archive --------------------------------------------------------------------------- */ .page-hero { padding-block: var(--space-2xl) var(--space-xl); border-bottom: 1px solid var(--border); } .page-hero__title { font-size: var(--fs-700); } .page-hero__meta { color: var(--text-muted); margin-top: var(--space-sm); } .entry { padding-block: var(--space-lg) var(--space-2xl); } .entry-content { font-size: var(--fs-400); } /* Keep separators tight to the content that follows them. */ .entry-content hr, .entry-content .wp-block-separator { margin-block: var(--space-md); border: 0; border-top: 1px solid var(--border); } /* Contact page: render its lead-in lines (e.g. "XR UI/UX Designer", "FAA Licensed Drone Pilot") in the signature orange. */ .page-slug-contact .entry-content :is(h1, h2, h3, h4, h5, h6), .page-slug-contact .entry-content strong { color: var(--accent); } .page-slug-contact .entry-content :is(h1, h2, h3, h4, h5, h6) { margin-top: var(--space-sm); } .entry-content > * + * { margin-top: var(--space-md); } .entry-content h2 { font-size: var(--fs-600); margin-top: var(--space-xl); } .entry-content h3 { font-size: var(--fs-500); margin-top: var(--space-lg); } .entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .entry-content img, .entry-content figure { border-radius: var(--radius); } .entry-content blockquote { border-left: 3px solid var(--accent); padding-left: var(--space-lg); color: var(--text-muted); font-size: var(--fs-500); font-style: italic; } .entry-content pre { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-md); overflow-x: auto; font-family: var(--font-mono); font-size: var(--fs-300); } .entry-content code { font-family: var(--font-mono); font-size: 0.9em; } .entry-content ul:not(.skill-list):not(.menu) { list-style: disc; padding-left: 1.4rem; } .entry-content ol { list-style: decimal; padding-left: 1.4rem; } .entry-content li + li { margin-top: 0.35rem; } .entry-meta { display: flex; flex-wrap: wrap; gap: var(--space-md); font-family: var(--font-mono); font-size: var(--fs-200); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; } .entry-meta a { color: var(--text-muted); } .post-card { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); transition: transform var(--transition), border-color var(--transition); } .post-card:hover { transform: translateY(-4px); border-color: var(--border-strong); } /* Centered section CTA (e.g. "View all projects") */ .section-cta { display: flex; justify-content: center; margin-top: var(--space-xl); } /* Project category filter bar (archives) */ .filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-xl); } .filter-chip { font-family: var(--font-mono); font-size: var(--fs-200); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-muted); transition: border-color var(--transition), color var(--transition), background var(--transition); } .filter-chip:hover { border-color: var(--accent); color: var(--text); } .filter-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } /* Pagination */ .pagination { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; margin-top: var(--space-2xl); } .pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); transition: border-color var(--transition), color var(--transition); } .pagination .page-numbers:hover { border-color: var(--accent); color: var(--text); } .pagination .page-numbers.current { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } /* --------------------------------------------------------------------------- 12. Footer --------------------------------------------------------------------------- */ .site-footer { margin-top: var(--space-2xl); border-top: 1px solid var(--border); background: var(--bg-elevated); padding-block: var(--space-xl) var(--space-lg); } .site-footer__grid { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-lg) var(--space-2xl); margin-bottom: var(--space-lg); } .site-footer__brand { max-width: 36ch; } .site-footer__nav { min-width: 9rem; } .site-footer h2, .site-footer h3 { font-size: var(--fs-400); margin-bottom: var(--space-sm); } .site-footer .footer-menu { display: flex; flex-direction: column; gap: 0.5rem; color: var(--text-muted); } .social-links { display: flex; gap: var(--space-sm); } .social-links a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); color: var(--text-muted); transition: border-color var(--transition), color var(--transition), transform var(--transition); } .social-links a:hover { border-color: var(--accent); color: var(--text); transform: translateY(-2px); } .social-links svg { width: 20px; height: 20px; } .site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between; align-items: center; padding-top: var(--space-lg); border-top: 1px solid var(--border); color: var(--text-faint); font-size: var(--fs-200); } /* --------------------------------------------------------------------------- 13. WordPress core / block editor compatibility --------------------------------------------------------------------------- */ .alignwide { width: min(100%, 1100px); margin-inline: auto; } .alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: 100vw; } .aligncenter { margin-inline: auto; } .alignleft { float: left; margin: 0 var(--space-lg) var(--space-md) 0; } .alignright { float: right; margin: 0 0 var(--space-md) var(--space-lg); } .wp-caption-text, .wp-element-caption { font-size: var(--fs-200); color: var(--text-faint); margin-top: var(--space-xs); text-align: center; } .sticky, .gallery-caption, .bypostauthor { display: block; } .wp-block-button__link { border-radius: 999px; } /* --------------------------------------------------------------------------- Native form controls — theme every WordPress form (search, comments, block forms, plugins) with the site fonts, colors, and styles. --------------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], textarea, select { font-family: var(--font-sans); font-size: var(--fs-300); width: 100%; max-width: 100%; padding: 0.8rem 1rem; color: var(--text); background-color: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition); } input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="number"], input[type="password"], textarea { -webkit-appearance: none; appearance: none; } textarea { min-height: 140px; resize: vertical; line-height: 1.6; } select { -webkit-appearance: none; appearance: none; padding-right: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239b9b91' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } ::placeholder { color: var(--text-faint); opacity: 1; } .entry-content label, .comment-form label, .search-form label, .wp-block-search__label { font-family: var(--font-sans); color: var(--text); font-weight: 500; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } /* Submit / button controls from WP core, blocks, comments, plugins */ input[type="submit"]:not(.btn), input[type="button"]:not(.btn), input[type="reset"]:not(.btn), button[type="submit"]:not(.btn), .wp-block-search__button, .wp-block-search button, .search-submit, .comment-form .submit, .wpforms-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.5rem; width: auto; border: 1px solid transparent; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-300); line-height: 1; letter-spacing: -0.01em; cursor: pointer; box-shadow: var(--shadow-md); transition: transform var(--transition), background var(--transition), box-shadow var(--transition); } input[type="submit"]:not(.btn):hover, input[type="button"]:not(.btn):hover, input[type="reset"]:not(.btn):hover, button[type="submit"]:not(.btn):hover, .wp-block-search__button:hover, .wp-block-search button:hover, .search-submit:hover, .comment-form .submit:hover, .wpforms-submit:hover { background: var(--accent-hover); color: var(--accent-contrast); transform: translateY(-2px); } input[type="submit"]:not(.btn):active, button[type="submit"]:not(.btn):active, .search-submit:active, .comment-form .submit:active { transform: translateY(0); } /* Search form layout (HTML5 get_search_form + block search) */ .search-form { display: flex; gap: var(--space-xs); align-items: stretch; } .search-form .search-field { flex: 1 1 auto; min-width: 0; } .search-form .search-submit { flex: 0 0 auto; } .wp-block-search__inside-wrapper { gap: var(--space-xs); border: 0; padding: 0; } /* Comment list / form spacing to match the design system */ .comment-form { display: grid; gap: var(--space-md); } .comment-form p { margin: 0; } .comment-list { display: grid; gap: var(--space-lg); } .comment-list .comment-body { padding: var(--space-lg); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); } /* --------------------------------------------------------------------------- 14. Reveal-on-scroll animation primitives (driven by JS / IntersectionObserver) --------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(.2,.7,.3,1), transform 700ms cubic-bezier(.2,.7,.3,1); } [data-reveal].is-visible { opacity: 1; transform: none; } /* Stagger children via inline --i set by JS */ [data-reveal] { transition-delay: calc(var(--i, 0) * 70ms); } /* --------------------------------------------------------------------------- 15. Responsive — progressive enhancement upward --------------------------------------------------------------------------- */ @media (min-width: 720px) { .about { grid-template-columns: 0.9fr 1.1fr; } .about--reverse .about__media { order: 2; } } @media (min-width: 900px) { .hero__actions { gap: var(--space-lg); } } /* Mobile navigation (below this width the menu collapses) */ .nav-close { display: none; } @media (max-width: 860px) { .nav-toggle { display: flex; } /* The sticky header's backdrop-filter makes it a containing block for fixed children, which trapped the drawer inside the header's height. Drop the filter on mobile so the drawer fills the full viewport height. */ .site-header, .site-header.is-scrolled { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Close (X) button inside the open drawer — a clear way to dismiss it. */ .nav-close { display: grid; place-items: center; position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text); } .nav-close::before, .nav-close::after { content: ""; position: absolute; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } .nav-close::before { transform: rotate(45deg); } .nav-close::after { transform: rotate(-45deg); } /* Keep the mobile header compact: name only, tagline lives in the footer. With no logo and only the name showing, give it a louder TE treatment: big, bold, uppercase, tight. A short orange underscore sits at the baseline right after the K, like a terminal cursor, tying the wordmark to the mono/TE aesthetic. */ .site-tagline { display: none; } .site-brand { flex-direction: row; align-items: center; gap: 0.4rem; } .site-title { font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; /* All caps leaves empty descender space, so the letters read high against the round buttons. Nudge down to optically center. */ position: relative; top: 0.05em; } .site-title::after { content: ""; display: inline-block; width: 0.5em; height: 0.12em; margin-left: 0.08em; border-radius: 1px; background: var(--accent); vertical-align: 0.04em; } .site-brand:hover .site-title::after { background: var(--accent-hover); } /* Drawer slides in from the right to match the right-aligned hamburger. */ .primary-nav { position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--space-lg); padding: 6rem var(--space-lg) var(--space-lg); background: var(--bg-elevated); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--transition); overflow-y: auto; z-index: 100; } .primary-nav.is-open { transform: translateX(0); } .primary-nav .menu { flex-direction: column; align-items: stretch; gap: 0.25rem; font-size: var(--fs-500); } .primary-nav .menu a { display: block; padding: 0.6rem 0; border-bottom: 1px solid var(--border); } .primary-nav .menu a::after { display: none; } body.nav-open { overflow: hidden; } .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); z-index: 99; } .nav-backdrop.is-open { opacity: 1; visibility: visible; } } /* Keep the three hero stats on a single row on small phones. */ @media (max-width: 600px) { .hero__stats { gap: 1rem; flex-wrap: nowrap; justify-content: space-between; } .hero__stat .num { font-size: var(--fs-500); } .hero__stat .label { font-size: 0.62rem; letter-spacing: 0.02em; white-space: nowrap; } } /* On a portrait phone, let the hero fill the first screen and center the intro block while anchoring the stats near the bottom. Gated on a narrow AND tall viewport (min-height) rather than the orientation feature, which some browsers misreport on rotation or in standalone mode. A phone in landscape is short, so it falls out of this query and keeps the original natural flow. 72px = sticky header height. */ @media (max-width: 600px) and (min-height: 600px) { .hero { display: flex; min-height: calc(100svh - 72px); padding-block: var(--space-xl); } .hero > .container { display: flex; width: 100%; } .hero__inner { display: flex; flex-direction: column; width: 100%; } /* Tighten the intro into one cohesive group so the centered block reads as a unit rather than four loosely spaced lines. */ .hero__title { margin-bottom: var(--space-sm); } .hero__lede { margin-bottom: var(--space-lg); } /* Two flexible margins split the free space evenly: the intro block (eyebrow, heading, lede, buttons) centers in the upper screen while the stats stay anchored near the bottom with their divider spacing intact. */ .hero__eyebrow { margin-top: auto; margin-bottom: var(--space-md); } .hero__stats { margin-top: auto; } } /* --------------------------------------------------------------------------- 16. Reduced motion — respect user preference --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .card:hover, .btn:hover, .skill-card:hover, .post-card:hover { transform: none; } } /* --------------------------------------------------------------------------- 17. Enhanced motion — showcase craft. All gated by prefers-reduced-motion. --------------------------------------------------------------------------- */ /* Reading / scroll progress bar */ .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ff9a3d)); z-index: 200; pointer-events: none; will-change: transform; } /* Pulse on the hero "available" status dot */ @keyframes mrp-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } } .hero__eyebrow .dot { animation: mrp-pulse 2.6s ease-out infinite; } /* Cursor spotlight that follows the pointer across a project card */ .card__media, .card__body { position: relative; z-index: 1; } .card::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%); opacity: 0; transition: opacity var(--transition); pointer-events: none; } .card:hover::after { opacity: 1; } /* Hero title: words rise into place on reveal */ .hero__title .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; } .hero__title .word__in { display: inline-block; transform: translateY(115%); transition: transform 0.72s cubic-bezier(.2,.7,.3,1); transition-delay: calc(var(--wi, 0) * 42ms); } .hero__title.is-animated .word__in { transform: translateY(0); } /* Magnetic interactive elements */ .magnetic { will-change: transform; } @media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } .hero__eyebrow .dot { animation: none; } .hero__title .word__in { transform: none !important; } .card::after { display: none; } } /* Print */ @media print { .site-header, .site-footer, .theme-toggle, .nav-toggle, .hero__bg { display: none; } body { background: #fff; color: #000; } }