:root { --bg: #ece8e1; --bg-soft: #f7f5f0; --surface: rgba(255, 255, 255, 0.82); --surface-strong: #ffffff; --surface-dark: #10161d; --text: #17202a; --muted: #5d6773; --line: rgba(23, 32, 42, 0.1); --accent: #9a7b4f; --accent-strong: #7b5f39; --accent-soft: #ece2d1; --deep: #13202d; --success: #2f6c60; --shadow: 0 24px 60px rgba(16, 22, 29, 0.08); --radius-xl: 32px; --radius-lg: 24px; --radius-md: 18px; --radius-sm: 999px; --container: 1180px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--text); font-family: "Manrope", sans-serif; background: radial-gradient(circle at top left, rgba(154, 123, 79, 0.15), transparent 26%), linear-gradient(180deg, #f8f6f2 0%, #f0ece5 46%, #e6e0d5 100%); } a { color: inherit; text-decoration: none; } img { max-width: 100%; } .site-bg { position: fixed; inset: 0; background: linear-gradient(rgba(19, 32, 45, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(19, 32, 45, 0.028) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(circle at center, black 38%, transparent 86%); pointer-events: none; } .site-header, .site-main, .site-footer { position: relative; z-index: 1; } .site-header__inner, .hero, .content-wrap, .site-footer__inner { width: min(calc(100% - 2rem), var(--container)); margin: 0 auto; } .site-header { padding-top: 1.2rem; } .site-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 0.95rem 1.2rem; border: 1px solid rgba(19, 32, 45, 0.08); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(16px); box-shadow: var(--shadow); } .site-brand, h1, h2, h3 { font-family: "Cormorant Garamond", serif; } .site-brand { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em; } .site-nav { justify-self: center; } .site-nav__menu { display: flex; align-items: center; justify-content: center; gap: 1.1rem; list-style: none; padding: 0; margin: 0; } .site-nav__menu a { color: var(--muted); font-size: 0.95rem; font-weight: 600; } .site-nav__menu a:hover, .site-nav__menu a:focus-visible { color: var(--text); } .site-nav-toggle, .site-print, .btn, .cv-chip, .skill-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--radius-sm); font: inherit; } .site-nav-toggle { display: none; border: 0; padding: 0.75rem 1rem; background: var(--deep); color: #fff; } .site-print { border: 1px solid rgba(19, 32, 45, 0.12); background: rgba(255, 255, 255, 0.7); color: var(--text); padding: 0.7rem 1rem; cursor: pointer; } .hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr); gap: 1.5rem; padding: 1.8rem 0; } .hero__copy, .profile-card, .content-card, .side-card { border: 1px solid rgba(19, 32, 45, 0.08); background: var(--surface); backdrop-filter: blur(14px); box-shadow: var(--shadow); } .hero__copy { position: relative; overflow: hidden; padding: 2.1rem; border-radius: 40px; } .hero__copy::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(154, 123, 79, 0.14), transparent 68%); } .eyebrow { margin: 0 0 0.9rem; color: var(--accent-strong); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } .hero h1 { margin: 0; font-size: clamp(3.1rem, 6vw, 5.5rem); line-height: 0.92; letter-spacing: -0.03em; } .hero__role { margin: 1rem 0 0; color: var(--deep); font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 700; } .hero__intro, .entry-content, .side-card p, .timeline__item p, .demo-panel li, .profile-card__label, .profile-card__highlights span, .metric-card span, .achievement-card span { color: var(--muted); line-height: 1.75; } .hero__intro { max-width: 58ch; margin-top: 1rem; } .hero__metrics, .hero__actions, .chip-grid, .skill-cloud, .contact-stack { display: flex; flex-wrap: wrap; gap: 0.85rem; } .hero__metrics { margin-top: 1.5rem; } .hero__metrics--wide .metric-card { flex: 1 1 180px; } .metric-card { min-width: 170px; padding: 1rem 1.05rem; border-radius: 22px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(19, 32, 45, 0.08); } .hero__metrics--wide { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .metric-card strong, .achievement-card strong { display: block; color: var(--deep); font-size: 1.5rem; font-weight: 800; } .hero__actions { margin-top: 1.5rem; } .btn, .cv-chip, .skill-pill { padding: 0.75rem 1.05rem; } .btn { border: 0; cursor: pointer; } .btn--primary { background: var(--deep); color: #fff; font-weight: 700; } .btn--secondary { border: 1px solid rgba(19, 32, 45, 0.12); background: rgba(255, 255, 255, 0.6); color: var(--text); } .cv-chip, .skill-pill { border: 1px solid rgba(19, 32, 45, 0.08); background: rgba(255, 255, 255, 0.78); } .profile-card { height: 100%; padding: 1.45rem; border-radius: 30px; } .profile-card__media { margin-bottom: 1.2rem; border-radius: 24px; overflow: hidden; background: radial-gradient(circle at top left, rgba(154, 123, 79, 0.2), transparent 40%), linear-gradient(180deg, #f9f5ef 0%, #ede4d7 100%); } .profile-card__label { margin: 0 0 0.45rem; font-size: 0.92rem; } .profile-card h2, .side-card h2, .entry-title, .demo-section h2 { margin: 0 0 1rem; font-size: clamp(1.9rem, 3vw, 2.45rem); line-height: 1.04; } .profile-card__highlights { display: grid; gap: 0.8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(19, 32, 45, 0.08); } .profile-card__highlights strong { display: block; margin-top: 0.15rem; } .profile-card__contact { display: flex; flex-wrap: wrap; gap: 0.65rem; } .profile-card--executive .profile-card__media--portrait { aspect-ratio: 4 / 4.35; } .profile-card--executive .profile-card__media--portrait img { width: 100%; height: 100%; object-fit: cover; } .content-wrap { display: grid; padding-bottom: 2rem; } .content-wrap--front { grid-template-columns: minmax(0, 1.48fr) minmax(290px, 0.82fr); gap: 1.5rem; } .content-card { padding: 2rem; border-radius: var(--radius-xl); } .content-card--resume { padding: 2.2rem; } .resume-section + .resume-section { margin-top: 2.6rem; } .section-head { display: grid; gap: 0.35rem; margin-bottom: 1.15rem; } .lead-copy { font-size: 1.08rem; } .entry-content > *:first-child { margin-top: 0; } .entry-content h2, .entry-content h3 { margin-top: 1.6rem; margin-bottom: 0.8rem; } .entry-content .wp-block-group.cv-section { padding: 1.5rem; border-radius: 22px; background: rgba(255, 255, 255, 0.58); border: 1px solid rgba(19, 32, 45, 0.08); } .demo-section + .demo-section, .demo-section + .demo-grid, .demo-grid + .demo-section { margin-top: 2rem; } .achievement-grid, .demo-grid { display: grid; gap: 1rem; } .achievement-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .achievement-card, .timeline__item, .demo-panel { padding: 1.25rem; border: 1px solid rgba(19, 32, 45, 0.08); border-radius: 24px; background: rgba(255, 255, 255, 0.68); } .achievement-card { background: linear-gradient(180deg, rgba(19, 32, 45, 0.96) 0%, rgba(24, 39, 55, 0.96) 100%); } .achievement-grid--executive { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1rem; } .achievement-card strong, .achievement-card span { color: #fff; } .achievement-card--stat { min-height: 172px; } .impact-grid, .credentials-grid { display: grid; gap: 1rem; } .impact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .impact-card, .credential-card, .cert-item { padding: 1.25rem; border: 1px solid rgba(19, 32, 45, 0.08); border-radius: 22px; background: rgba(255, 255, 255, 0.74); } .impact-card h3, .credential-card h3, .cert-item h3, .competency-block h3 { margin: 0 0 0.55rem; font-size: 1.2rem; } .credentials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .credential-card__year, .cert-item__year { display: inline-flex; margin-bottom: 0.9rem; padding: 0.3rem 0.7rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .credential-card__detail, .side-card__meta, .timeline__meta, .cert-item p { color: var(--muted); } .timeline__meta { margin-top: -0.15rem; margin-bottom: 0.75rem; font-weight: 700; } .timeline__bullets { margin: 0.9rem 0 0; padding-left: 1rem; color: var(--muted); line-height: 1.7; } .timeline__bullets li + li { margin-top: 0.45rem; } .cert-list { display: grid; gap: 0.9rem; } .cert-item { display: grid; grid-template-columns: 92px 1fr; gap: 1rem; align-items: start; } .cert-item__year { justify-content: center; width: 100%; margin-bottom: 0; } .timeline { position: relative; display: grid; gap: 1rem; } .timeline::before { content: ""; position: absolute; top: 0.5rem; bottom: 0.5rem; left: 0.75rem; width: 1px; background: rgba(154, 123, 79, 0.4); } .timeline__item { position: relative; padding-left: 2.25rem; } .timeline__item::before { content: ""; position: absolute; top: 1.2rem; left: 0.35rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgba(154, 123, 79, 0.18); } .timeline__year { display: inline-flex; margin-bottom: 0.75rem; padding: 0.36rem 0.78rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .timeline__item h3 { margin: 0 0 0.45rem; font-size: 1.35rem; } .timeline__item--rich { padding-right: 1.2rem; } .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .demo-panel ul { margin: 0; padding-left: 1.05rem; } .demo-panel--accent { background: linear-gradient(180deg, rgba(236, 226, 209, 0.75), rgba(255, 255, 255, 0.72)); } .side-stack { display: grid; gap: 1.5rem; align-content: start; } .side-stack--resume { position: sticky; top: 1.5rem; align-self: start; } .side-card { padding: 1.45rem; border-radius: 28px; } .side-card--business-card { background: linear-gradient(180deg, rgba(19, 32, 45, 0.98) 0%, rgba(20, 31, 43, 0.98) 100%); color: #fff; } .side-card--business-card .eyebrow, .side-card--business-card p, .side-card--business-card h2 { color: #fff; } .competency-block + .competency-block { margin-top: 1.25rem; } .skill-cloud { gap: 0.75rem; } .skill-pill { color: var(--text); font-weight: 600; } .site-footer { padding-bottom: 2rem; } .site-footer__inner { padding: 0.8rem 0; color: var(--muted); text-align: center; } .info-list { display: grid; gap: 0.95rem; margin: 0 0 1.2rem; } .info-list div { display: grid; gap: 0.2rem; } .info-list dt { color: var(--accent-strong); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .info-list dd { margin: 0; color: var(--text); } .business-card { padding: 1rem; border-radius: 22px; background: radial-gradient(circle at top left, rgba(154, 123, 79, 0.35), transparent 34%), linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04)); border: 1px solid rgba(255, 255, 255, 0.12); } .business-card__top { margin-bottom: 1rem; } .business-card__name { margin: 0; font-family: "Cormorant Garamond", serif; font-size: 1.55rem; font-weight: 700; line-height: 1; } .business-card__role { margin: 0.45rem 0 0; color: rgba(255, 255, 255, 0.82); font-size: 0.94rem; line-height: 1.5; } .business-card__body { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; align-items: center; } .business-card__qr { padding: 0.55rem; border-radius: 18px; background: #fff; } .business-card__qr img { display: block; width: 100%; height: auto; } .business-card__info { display: grid; gap: 0.35rem; } .business-card__info p, .business-card__info a { margin: 0; color: rgba(255, 255, 255, 0.88); word-break: break-word; } @media (max-width: 980px) { .site-header__inner { grid-template-columns: auto auto; } .site-nav-toggle { display: inline-flex; justify-self: end; } .site-print { order: 4; grid-column: 1 / -1; justify-self: start; } .site-nav { grid-column: 1 / -1; display: none; padding: 0.95rem; border-radius: 18px; border: 1px solid rgba(19, 32, 45, 0.08); background: rgba(255, 255, 255, 0.92); } .site-nav.is-open { display: block; } .site-nav__menu { align-items: flex-start; flex-direction: column; } .hero, .content-wrap--front { grid-template-columns: 1fr; } .achievement-grid { grid-template-columns: 1fr; } .hero__metrics--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } .impact-grid, .credentials-grid { grid-template-columns: 1fr; } .side-stack--resume { position: static; } } @media (max-width: 640px) { .site-header__inner, .hero__copy, .profile-card, .content-card, .side-card { padding: 1.2rem; border-radius: 22px; } .hero h1 { font-size: 2.75rem; } .metric-card { min-width: unset; width: 100%; } .hero__metrics--wide { grid-template-columns: 1fr; } .demo-grid { grid-template-columns: 1fr; } .cert-item { grid-template-columns: 1fr; } .business-card__body { grid-template-columns: 1fr; } } @media print { .site-header, .site-footer, .site-bg, .hero__actions, .site-print, .site-nav-toggle { display: none !important; } body { background: #fff; } .hero, .content-wrap--front { grid-template-columns: 1fr; } .hero__copy, .profile-card, .content-card, .side-card, .timeline__item, .demo-panel, .achievement-card { box-shadow: none; background: #fff; } }