/* ═══════════════════════════════════════════════════════════════ TIMOTHY CHAD HENSON — styles2.css timothychad.com | Drop in same folder as HTML files. Fonts loaded via Google Fonts in each HTML . ═══════════════════════════════════════════════════════════════ */ /* ── RESET & BASE ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --navy: #0b1f3a; --navy2: #162d52; --navy3: #1e3a6a; --gold: #c9a84c; --gold2: #b8943e; --gold-light: #f0d98a; --white: #ffffff; --off: #f7f8fa; --gray50: #f9fafb; --gray100: #f3f4f6; --gray200: #e5e7eb; --gray300: #d1d5db; --gray400: #9ca3af; --gray500: #6b7280; --gray600: #4b5563; --gray700: #374151; --gray800: #1f2937; --blue100: #dbeafe; --blue200: #bfdbfe; --blue300: #93c5fd; --green: #059669; --red: #ef4444; --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Source Sans 3', system-ui, sans-serif; --max-w: 1200px; --radius: 8px; --radius-lg:16px; --shadow-xs: 0 1px 2px rgba(0,0,0,.06); --shadow-sm: 0 1px 4px rgba(0,0,0,.08); --shadow-md: 0 4px 16px rgba(0,0,0,.10); --shadow-lg: 0 10px 40px rgba(0,0,0,.14); --shadow-xl: 0 20px 60px rgba(0,0,0,.18); --transition: 200ms ease; --transition-slow: 400ms ease; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--gray800); background: var(--white); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { text-decoration: none; color: inherit; } ul { list-style: none; } strong { font-weight: 600; } /* ── UTILITY ── */ .container { max-width: var(--max-w); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } /* ── EYEBROW ── */ .eyebrow { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; } .eyebrow-line { display: inline-block; width: 2.5rem; height: 2px; background: var(--gold); flex-shrink: 0; } .eyebrow-label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } /* ── SECTION TITLES ── */ .section-title { font-family: var(--font-heading); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; color: var(--navy); line-height: 1.2; } .section-title .gold { color: var(--gold); } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.85rem; font-family: var(--font-body); font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition); white-space: nowrap; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); box-shadow: none; } .btn-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); } .btn-gold:hover { background: var(--gold2); border-color: var(--gold2); } .btn-outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); } .btn-outline-white:hover { border-color: var(--gold); color: var(--gold); } .btn-outline-navy { background: transparent; color: var(--navy); border-color: var(--navy); } .btn-outline-navy:hover { background: var(--navy); color: var(--white); } /* ══════════════════════════════════════════════════════════════ HEADER ══════════════════════════════════════════════════════════════ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: rgba(11,31,58,.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201,168,76,.15); padding: 1.1rem 0; transition: padding var(--transition), box-shadow var(--transition); } .site-header.scrolled { padding: .7rem 0; box-shadow: 0 4px 24px rgba(0,0,0,.35); border-bottom-color: rgba(201,168,76,.25); } .header-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; } /* Logo */ .logo-link { display: flex; align-items: center; gap: .6rem; } .logo-mark { width: 2.2rem; height: 2.2rem; background: var(--gold); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--navy); flex-shrink: 0; } .logo-text-wrap { display: flex; flex-direction: column; line-height: 1.1; } .logo-name { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--white); } .logo-sub { font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); } /* Desktop nav */ .desktop-nav { display: none; align-items: center; gap: 1.75rem; } @media (min-width: 768px) { .desktop-nav { display: flex; } } .nav-link { position: relative; font-size: .82rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.75); transition: color var(--transition); padding-bottom: 3px; } .nav-link::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background: var(--gold); transition: width var(--transition); } .nav-link:hover, .nav-link.active { color: var(--white); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-cta { margin-left: .5rem; padding: .5rem 1.25rem; background: var(--gold); color: var(--navy); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: var(--radius); transition: background var(--transition), transform var(--transition); } .nav-cta:hover { background: var(--gold2); transform: translateY(-1px); } /* Mobile toggle */ .mobile-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 38px; background: none; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius); cursor: pointer; padding: 6px; } @media (min-width: 768px) { .mobile-toggle { display: none; } } .mobile-toggle span { display: block; width: 100%; height: 2px; background: var(--white); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); } .mobile-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-toggle.open span:nth-child(2) { opacity: 0; } .mobile-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav */ .mobile-nav { display: none; flex-direction: column; background: var(--navy2); border-top: 1px solid rgba(201,168,76,.2); padding: 1rem 1.5rem 1.5rem; } .mobile-nav.open { display: flex; } @media (min-width: 768px) { .mobile-nav { display: none !important; } } .mobile-nav .nav-link { padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .9rem; color: rgba(255,255,255,.8); } .mobile-cta { display: block; margin-top: 1rem; padding: .85rem; text-align: center; background: var(--gold); color: var(--navy) !important; border-radius: var(--radius); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } /* ══════════════════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════════════════ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; background: var(--navy); overflow: hidden; padding-top: 5rem; } /* Diagonal accent */ .hero::before { content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: linear-gradient(135deg, transparent 40%, rgba(201,168,76,.06) 100%); pointer-events: none; } /* Dot grid */ .hero-dots { position: absolute; inset: 0; opacity: .06; background-image: radial-gradient(circle, var(--gold) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; padding: 5rem 0 4rem; width: 100%; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: 55% 45%; gap: 3rem; } } /* Hero text */ .hero-text { color: var(--white); } .hero-kicker { display: inline-flex; align-items: center; gap: .5rem; background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.3); border-radius: 999px; padding: .35rem 1rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 1.5rem; } .hero-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } } .hero-name { font-family: var(--font-heading); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 700; line-height: 1.05; color: var(--white); margin-bottom: .5rem; } .hero-name .gold { color: var(--gold); } .hero-title-line { font-size: clamp(.9rem, 2vw, 1.1rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue200); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .title-sep { color: var(--gold); opacity: .6; } .hero-bio { font-size: 1rem; color: rgba(255,255,255,.75); line-height: 1.75; max-width: 30rem; margin-bottom: 2.25rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; } /* Keyword pills */ .hero-keywords { display: flex; flex-wrap: wrap; gap: .5rem; } .kw-pill { padding: .3rem .8rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.55); letter-spacing: .03em; } /* Hero portrait */ .hero-portrait { display: flex; justify-content: center; } @media (min-width: 1024px) { .hero-portrait { justify-content: flex-end; } } .portrait-wrap { position: relative; display: inline-block; } .portrait-ring { position: absolute; inset: -1.25rem; border: 1px solid rgba(201,168,76,.25); border-radius: var(--radius-lg); pointer-events: none; } .portrait-ring2 { position: absolute; inset: -2.5rem; border: 1px solid rgba(201,168,76,.1); border-radius: calc(var(--radius-lg) + 8px); pointer-events: none; } .portrait-img { position: relative; width: clamp(220px, 32vw, 380px); aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } .portrait-badge { position: absolute; bottom: -1rem; left: -1.25rem; background: var(--white); color: var(--navy); padding: .65rem 1.1rem; border-radius: var(--radius); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: .1rem; } .badge-label { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); } .badge-value { font-size: .82rem; font-weight: 700; color: var(--navy); } .portrait-badge2 { position: absolute; top: 1rem; right: -1.25rem; background: var(--gold); color: var(--navy); padding: .6rem 1rem; border-radius: var(--radius); box-shadow: var(--shadow-md); text-align: center; } .badge2-num { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; line-height: 1; } .badge2-text { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* ══════════════════════════════════════════════════════════════ STATS BAR ══════════════════════════════════════════════════════════════ */ .stats-bar { background: var(--navy2); border-top: 1px solid rgba(201,168,76,.15); border-bottom: 1px solid rgba(201,168,76,.15); padding: 2.5rem 0; } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; text-align: center; } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } } .stat-num { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: .3rem; } .stat-label { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue200); } /* ══════════════════════════════════════════════════════════════ ABOUT ══════════════════════════════════════════════════════════════ */ .about-section { padding: 6rem 0; background: var(--white); } .about-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; } @media (min-width: 1024px) { .about-grid { grid-template-columns: 1fr 1fr; } } .about-img-wrap { position: relative; } .about-img-accent { position: absolute; top: -1.25rem; left: -1.25rem; right: 1.25rem; bottom: 1.25rem; border: 2px solid rgba(201,168,76,.2); border-radius: var(--radius-lg); pointer-events: none; } .about-img { position: relative; width: 100%; height: 24rem; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } .about-img-overlay { position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem; background: rgba(11,31,58,.92); backdrop-filter: blur(4px); border-radius: var(--radius); padding: 1rem 1.25rem; color: var(--white); } .overlay-label { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: .2rem; } .overlay-value { font-size: .9rem; font-weight: 600; } .about-content { display: flex; flex-direction: column; gap: 1.1rem; } .about-content p { font-size: .97rem; color: var(--gray700); line-height: 1.8; } .about-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; } .highlight-item { padding: 1rem 1.25rem; background: var(--gray50); border: 1px solid var(--gray100); border-left: 3px solid var(--gold); border-radius: var(--radius); } .highlight-title { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin-bottom: .25rem; } .highlight-value { font-size: .88rem; color: var(--navy); font-weight: 600; } /* ══════════════════════════════════════════════════════════════ EXPERTISE / ROLES ══════════════════════════════════════════════════════════════ */ .expertise-section { padding: 6rem 0; background: var(--gray50); } .expertise-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 3rem; } @media (min-width: 640px) { .expertise-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .expertise-grid { grid-template-columns: repeat(3, 1fr); } } .expertise-card { background: var(--white); border: 1px solid var(--gray100); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); } .expertise-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .expertise-icon { width: 3rem; height: 3rem; background: rgba(11,31,58,.06); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .expertise-icon svg { width: 22px; height: 22px; } .expertise-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--navy); margin-bottom: .6rem; } .expertise-desc { font-size: .88rem; color: var(--gray600); line-height: 1.7; } /* ══════════════════════════════════════════════════════════════ BLOG PREVIEW (homepage) ══════════════════════════════════════════════════════════════ */ .blog-preview { padding: 6rem 0; background: var(--white); } .blog-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem; } @media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } } .blog-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray100); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); } .blog-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-5px); } .blog-card-img-link { display: block; overflow: hidden; height: 13rem; } .blog-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; } .blog-card:hover .blog-card-img { transform: scale(1.06); } .blog-card-body { padding: 1.5rem; } .blog-card-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem; } .blog-category { font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); } .meta-dot { color: var(--gray300); font-size: .8rem; } .blog-date { font-size: .72rem; color: var(--gray400); } .blog-card-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--navy); line-height: 1.35; margin-bottom: .75rem; transition: color var(--transition); } .blog-card:hover .blog-card-title { color: var(--gold2); } .blog-card-excerpt { font-size: .85rem; color: var(--gray600); line-height: 1.65; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .read-more { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); transition: color var(--transition); } .read-more:hover { color: var(--gold); } .blog-cta { margin-top: 3rem; text-align: center; } /* ══════════════════════════════════════════════════════════════ QUOTE / TESTIMONIAL ══════════════════════════════════════════════════════════════ */ .quote-section { padding: 5rem 0; background: var(--navy); } .quote-inner { max-width: 52rem; margin: 0 auto; text-align: center; } .quote-mark { font-family: var(--font-heading); font-size: 5rem; line-height: .5; color: var(--gold); opacity: .4; margin-bottom: 1.5rem; } .quote-text { font-family: var(--font-heading); font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 600; color: var(--white); line-height: 1.5; margin-bottom: 1.5rem; } .quote-attr { font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); } /* ══════════════════════════════════════════════════════════════ CTA STRIP ══════════════════════════════════════════════════════════════ */ .cta-strip { padding: 5rem 0; background: linear-gradient(135deg, var(--navy2) 0%, var(--navy3) 100%); border-top: 1px solid rgba(201,168,76,.15); } .cta-inner { text-align: center; } .cta-title { font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; color: var(--white); margin-bottom: 1rem; } .cta-body { color: var(--blue200); font-size: .97rem; max-width: 38rem; margin: 0 auto 2rem; line-height: 1.75; } .cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } /* ══════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════ */ .site-footer { background: #060f1e; color: var(--white); padding-top: 4.5rem; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 3.5rem; border-bottom: 1px solid rgba(255,255,255,.08); } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; } } .footer-logo-wrap { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; } .footer-logo-mark { width: 2rem; height: 2rem; background: var(--gold); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: .9rem; font-weight: 700; color: var(--navy); flex-shrink: 0; } .footer-logo-name { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--white); } .footer-desc { font-size: .85rem; color: rgba(255,255,255,.5); line-height: 1.7; margin-bottom: 1.25rem; } .footer-location-tag { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); } .footer-heading { font-size: .67rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; } .footer-links { display: flex; flex-direction: column; gap: .55rem; } .footer-links a { font-size: .85rem; color: rgba(255,255,255,.5); transition: color var(--transition); } .footer-links a:hover { color: var(--gold); } .footer-bottom { padding: 1.5rem; display: flex; flex-direction: column; gap: .4rem; align-items: center; text-align: center; } @media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } } .footer-bottom p { font-size: .75rem; color: rgba(255,255,255,.3); } /* ══════════════════════════════════════════════════════════════ PAGE HERO (inner pages) ══════════════════════════════════════════════════════════════ */ .page-hero { background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%); padding: 8rem 0 4.5rem; position: relative; overflow: hidden; } .page-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .page-hero-title { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--white); margin-bottom: .75rem; line-height: 1.2; } .page-hero-sub { color: var(--blue200); font-size: .95rem; max-width: 40rem; line-height: 1.7; } /* ══════════════════════════════════════════════════════════════ BLOG LISTING PAGE ══════════════════════════════════════════════════════════════ */ .featured-label { font-size: .67rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .featured-card { display: grid; grid-template-columns: 1fr; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray100); box-shadow: var(--shadow-md); transition: box-shadow var(--transition); } @media (min-width: 1024px) { .featured-card { grid-template-columns: 1fr 1fr; } } .featured-card:hover { box-shadow: var(--shadow-xl); } .featured-card-img-link { display: block; overflow: hidden; min-height: 18rem; } .featured-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; } .featured-card:hover .featured-card-img { transform: scale(1.04); } .featured-card-body { padding: 2.5rem; background: var(--white); display: flex; flex-direction: column; justify-content: center; } .featured-card-title { font-family: var(--font-heading); font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 1rem; transition: color var(--transition); } .featured-card-title a:hover { color: var(--gold2); } .featured-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; } .author-meta { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--gray500); } /* ══════════════════════════════════════════════════════════════ BLOG POST PAGE ══════════════════════════════════════════════════════════════ */ .post-main { padding-top: 5rem; padding-bottom: 5rem; background: var(--white); } .post-hero-img-wrap { width: 100%; height: clamp(14rem, 36vw, 28rem); overflow: hidden; } .post-hero-img { width: 100%; height: 100%; object-fit: cover; } .post-container { max-width: 50rem; margin: 0 auto; padding: 2.5rem 1.5rem 0; } .back-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gray400); margin-bottom: 2rem; transition: color var(--transition); } .back-link:hover { color: var(--navy); } .post-categories { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; } .post-title { font-family: var(--font-heading); font-size: clamp(1.9rem, 4.5vw, 3.2rem); font-weight: 700; color: var(--navy); line-height: 1.2; margin-bottom: 1.5rem; } .post-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; padding-bottom: 2rem; border-bottom: 1px solid var(--gray100); margin-bottom: 2.5rem; } .post-meta-item { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--gray500); } /* Article body */ .post-body { font-size: .97rem; line-height: 1.85; color: var(--gray700); } .post-body p { margin-bottom: 1.35rem; } .post-body strong { color: var(--gray800); } .post-body h2 { font-family: var(--font-heading); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: var(--navy); margin-top: 2.75rem; margin-bottom: 1rem; padding-left: 1rem; border-left: 4px solid var(--gold); line-height: 1.25; } .post-body h3 { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--navy); margin-top: 2rem; margin-bottom: .75rem; } .post-body blockquote { border-left: 4px solid var(--gold); padding: 1.25rem 1.75rem; margin: 2.5rem 0; font-style: italic; color: var(--gray600); background: var(--gray50); border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.05rem; line-height: 1.7; } .post-body blockquote footer { margin-top: .85rem; font-style: normal; font-size: .8rem; font-weight: 700; color: var(--navy); } .post-list { list-style: none; display: flex; flex-direction: column; gap: .9rem; margin: 1.5rem 0 1.75rem; } .post-list li { display: flex; align-items: flex-start; gap: .85rem; font-size: .95rem; line-height: 1.75; } .post-list li::before { content: ''; display: block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: .6rem; } .post-figure { margin: 2.5rem 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .post-figure-img { width: 100%; height: 18rem; object-fit: cover; } .post-figure figcaption { font-size: .75rem; color: var(--gray400); text-align: center; padding: .65rem 1rem; background: var(--gray50); } /* Author byline */ .post-byline { display: flex; align-items: center; gap: 1.1rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--gray100); } .byline-avatar { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; border: 2px solid var(--gold); } .byline-name { font-weight: 700; color: var(--navy); font-size: .97rem; } .byline-role { font-size: .8rem; color: var(--gray500); margin-top: .1rem; } /* Internal links */ .post-internal-links { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--gray100); } .internal-links-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: 1rem; } .internal-links-row { display: flex; flex-wrap: wrap; gap: .75rem; } .internal-link { padding: .45rem 1rem; background: var(--gray50); border: 1px solid var(--gray200); border-radius: var(--radius); font-size: .82rem; color: var(--navy); transition: border-color var(--transition), color var(--transition); } .internal-link:hover { border-color: var(--gold); color: var(--gold2); } /* ══════════════════════════════════════════════════════════════ CONTACT PAGE ══════════════════════════════════════════════════════════════ */ .contact-section { padding: 5rem 0; background: var(--white); } .contact-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; } @media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; } } .contact-title { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 700; color: var(--navy); margin-bottom: 1.25rem; } .contact-intro { color: var(--gray600); font-size: .95rem; line-height: 1.8; margin-bottom: 2.25rem; } .contact-info-list { display: flex; flex-direction: column; gap: 1.35rem; } .contact-info-item { display: flex; align-items: flex-start; gap: 1rem; } .contact-info-icon { width: 2.75rem; height: 2.75rem; background: rgba(11,31,58,.06); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-info-label { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray400); margin-bottom: .2rem; } .contact-info-value { font-size: .9rem; color: var(--gray700); } .contact-form { display: flex; flex-direction: column; gap: 1.25rem; } .form-group { display: flex; flex-direction: column; gap: .4rem; } .form-label { font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray500); } .form-input, .form-textarea { width: 100%; padding: .85rem 1rem; border: 1px solid var(--gray200); border-radius: var(--radius); font-family: var(--font-body); font-size: .9rem; color: var(--gray800); background: var(--white); transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .form-input:focus, .form-textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11,31,58,.08); } .form-textarea { resize: vertical; min-height: 8.5rem; } .form-submit { width: 100%; padding: 1rem; background: var(--navy); color: var(--white); font-family: var(--font-body); font-size: .88rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: none; border-radius: var(--radius); cursor: pointer; transition: background var(--transition), transform var(--transition); } .form-submit:hover { background: var(--navy2); transform: translateY(-1px); } .form-success { display: none; padding: 1rem 1.25rem; background: #d1fae5; border: 1px solid #6ee7b7; border-radius: var(--radius); color: #065f46; font-size: .88rem; font-weight: 500; } .form-success.show { display: block; } /* ══════════════════════════════════════════════════════════════ ANIMATIONS ══════════════════════════════════════════════════════════════ */ .animate-fade-up { opacity: 0; transform: translateY(30px); animation: fadeUp .75s ease forwards; } .animate-fade-up-delay { opacity: 0; transform: translateY(30px); animation: fadeUp .75s ease .2s forwards; } .animate-fade-right { opacity: 0; transform: translateX(-30px); animation: fadeRight .8s ease .15s forwards; } .animate-fade-left { opacity: 0; transform: translateX(30px); animation: fadeLeft .8s ease .25s forwards; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeRight{ to { opacity: 1; transform: translateX(0); } } @keyframes fadeLeft { to { opacity: 1; transform: translateX(0); } } .animate-on-scroll { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; } .animate-on-scroll.in-view { opacity: 1; transform: translateY(0); } /* stagger children */ .stagger > *:nth-child(1) { transition-delay: 0ms; } .stagger > *:nth-child(2) { transition-delay: 100ms; } .stagger > *:nth-child(3) { transition-delay: 200ms; } .stagger > *:nth-child(4) { transition-delay: 300ms; } .stagger > *:nth-child(5) { transition-delay: 400ms; } .stagger > *:nth-child(6) { transition-delay: 500ms; } /* ══════════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .hero-name { font-size: 2.8rem; } .portrait-img { width: 200px; } .portrait-ring { inset: -.75rem; } .portrait-ring2 { inset: -1.5rem; } .portrait-badge2 { display: none; } .about-img { height: 18rem; } .featured-card-body { padding: 1.5rem; } .post-container { padding-top: 1.5rem; } .about-highlights { grid-template-columns: 1fr; } }