/* Theme Name: Thomas Zhuo – Cybersecurity Portfolio Theme URI: https://thomaszhuo.com Author: Thomas Zhuo Description: Dark, cyan-accented portfolio theme with Projects CPT and Blog. Version: 1.0.0 Requires at least: 6.3 Tested up to: 6.6 Requires PHP: 7.4 Text Domain: thomas-portfolio Tags: portfolio, blog, custom-post-type, block-editor, responsive, accessibility-ready */ /* ========================================================= 0) DESIGN TOKENS / GLOBALS ========================================================= */ :root{ /* Brand */ --accent: #22D3EE; /* cyan */ --accent-2: #3B82F6; /* blue */ --accent-dark: #0EA5E9; /* Surfaces & text */ --page-bg: #0F172A; /* keep this consistent with */ --bg-dark: #020617; --text-light: #F8FAFC; --text-muted: #94A3B8; --border: #1E293B; /* Hero tuning */ --hero-height: 68vh; --hero-min-height: 520px; --hero-focus-y: 20%; --hero-overlay-top: 0.22; --hero-overlay-mid: 0.60; } *{ box-sizing: border-box; } body{ margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", sans-serif; color: var(--text-light); background: var(--page-bg); overflow-x: hidden; } a{ color: var(--accent); text-decoration: none; } a:hover{ color: var(--accent-dark); } .container{ max-width: 1200px; margin: 0 auto; padding-inline: 24px; } .center{ text-align: center; } /* ========================================================= 1) BUTTONS (GLOBAL) ========================================================= */ /* Base */ .btn{ display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 12px; font-weight: 600; line-height: 1; text-decoration: none; transition: all .25s ease; will-change: filter, box-shadow, color, background-color, border-color; } /* Primary (gradient) — “Explore My Projects” */ .btn-primary{ color: #06111b; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: 0; display: inline-flex; align-items: center; gap: 8px; transition: filter .25s ease, box-shadow .25s ease, color .25s ease; } .btn-primary:hover{ /* keep static position – do not move button */ transform: none; filter: brightness(.92) saturate(1.03); /* very gentle */ } .btn__arrow{ transition: transform .25s ease; } .btn-primary:hover .btn__arrow{ transform: translateX(3px); } /* Outline (cyan) — “Connect With Me”, “Read My Blog” */ .btn-outline{ color: var(--accent); background: transparent; border: 1px solid rgba(34,211,238,.55); box-shadow: inset 0 0 0 1px rgba(34,211,238,.15); transition: color .25s ease, border-color .25s ease, background-color .25s ease; } .btn-outline:hover{ background: rgba(34,211,238,.06); /* light cyan tint */ border-color: rgba(34,211,238,.75); color: #0e1726; /* dark text on hover (per your mock) */ box-shadow: none; transform: none; filter: none; } .btn-outline .btn__arrow{ transition: transform .25s ease; } .btn-outline:hover .btn__arrow{ transform: translateX(3px); } /* Book icon ONLY for “Read My Blog” (you have the inline SVG in markup) */ .btn--blog{ padding-left: 20px; } .btn--blog .btn__icon{ width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; } /* Accessibility focus */ .btn:focus-visible{ outline: 2px solid rgba(34,211,238,.8); outline-offset: 2px; } /* Ensure buttons never “jump” from other rules */ .btn, .btn:hover, .btn-primary, .btn-primary:hover{ transform: none !important; } /* ========================================================= 2) HERO (Image + Headline — same section) ========================================================= */ .home-hero{ position: relative; height: clamp(460px, var(--hero-height), 720px); min-height: var(--hero-min-height); display: flex; align-items: flex-end; /* place copy near bottom */ justify-content: center; overflow: clip; } .home-hero__img{ position: absolute; inset: 0; background-size: cover; background-position: center var(--hero-focus-y); background-repeat: no-repeat; filter: brightness(.86); z-index: 0; } /* One overlay that both darkens and blends to page bg at the bottom */ .home-hero__overlay{ position: absolute; inset: 0; z-index: 1; background: radial-gradient(1100px 280px at 50% 0%, rgba(34,211,238,.14), transparent 70%), linear-gradient( 180deg, rgba(2,6,23,var(--hero-overlay-top)) 0%, rgba(2,6,23,var(--hero-overlay-mid)) 54%, rgba(2,6,23,.92) 78%, var(--page-bg) 100% ); } .home-hero__content{ position: relative; z-index: 2; max-width: 960px; width: 100%; text-align: center; padding: 0 24px 84px; /* controls vertical position of headline block */ } /* Headline */ .home-hero__title{ font-weight: 800; line-height: 1.1; font-size: clamp(36px, 5vw, 56px); margin-bottom: 16px; } /* Gradient accent for “One Layer at a Time” */ .home-hero__title .accent{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .home-hero__sub{ color: var(--text-muted); font-size: 1.125rem; max-width: 700px; margin: 0 auto 32px; line-height: 1.6; } /* Badge (pill) */ .pill{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 9999px; font-size: .875rem; color: #E6F7FB; background: rgba(30,41,59,.72); border: 1px solid rgba(148,163,184,.18); backdrop-filter: saturate(120%) blur(2px); margin-bottom: 24px; } .pill__dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } /* The very next section after hero should not draw a seam */ .home-hero + *{ position: relative; z-index: 3; padding-top: 96px; /* lets hero “sit” above naturally */ border-top: 0 !important; background: transparent; } /* ========================================================= 3) “WHAT I DO” SECTION ========================================================= */ .home-section{ padding: 100px 24px; background: transparent; } .section-head{ text-align: center; margin-bottom: 48px; } .section-title{ font-size: 2rem; font-weight: 700; color: #F8FAFC; margin-bottom: 8px; } .section-sub{ color: var(--text-muted); font-size: 1rem; } /* Grid */ .cards-3{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; } @media (max-width: 900px){ .cards-3{ grid-template-columns: 1fr; } } /* Card */ .card--whatido{ background: rgba(17,25,40,.70); /* deep navy glass */ border: 1px solid rgba(148,163,184,.12); border-radius: 16px; padding: 28px; transition: border-color .25s ease, box-shadow .25s ease; } .card--whatido:hover{ border-color: rgba(56,189,248,.5); } /* Icon bubble + icon */ .card__iconbubble{ width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: 0 0 22px rgba(6,182,212,.20); } .card__iconsvg, .card__iconimg{ width: 28px; height: 28px; display: block; filter: brightness(10); /* keep uploaded icons white over gradients */ } /* Gradient variants (match approved reference) */ .grad-cyan{ background: linear-gradient(135deg, #06B6D4 0%, #22D3EE 100%); box-shadow: 0 0 22px rgba(34,211,238,.35); } .grad-blue{ background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); box-shadow: 0 0 22px rgba(59,130,246,.35); } .grad-magenta{ background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%); box-shadow: 0 0 22px rgba(236,72,153,.30); } /* Card text */ .card__title{ color: #F8FAFC; font-weight: 600; font-size: 1.125rem; margin: 6px 0 10px; } .card__desc{ color: var(--text-muted); font-size: 1rem; line-height: 1.6; } /* ========================================================= 4) HOME – BLOG CTA SECTION ========================================================= */ .home-section--blog{ padding: 100px 24px; background: transparent; border-top: 1px solid rgba(148,163,184,.08); /* very soft divider, optional */ border-bottom: 0; } /* ========================================================= 5) RESPONSIVE ========================================================= */ @media (max-width: 768px){ .home-hero__content{ padding-bottom: 64px; } .home-hero__title{ font-size: 2rem; } .home-hero__sub{ font-size: 1rem; } .btn{ font-size: .875rem; } }