/* ═══════════════════════════════════════════════════════════════ CHAD HENSON — styles.css Drop this file in the same folder as your HTML files. Fonts loaded via Google Fonts in each HTML . ═══════════════════════════════════════════════════════════════ */ /* ── RESET & BASE ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --navy: #0f2044; --navy2: #1a3060; --gold: #c9a84c; --gold2: #b8943e; --white: #ffffff; --off: #f8f8f8; --gray50: #f9fafb; --gray100:#f3f4f6; --gray200:#e5e7eb; --gray400:#9ca3af; --gray500:#6b7280; --gray600:#4b5563; --gray700:#374151; --gray800:#1f2937; --blue100:#dbeafe; --blue200:#bfdbfe; --blue300:#93c5fd; --font-heading: 'Cormorant Garamond', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --max-w: 1152px; --radius: 8px; --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --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; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; 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; } /* ── UTILITY ── */ .container { max-width: var(--max-w); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } .gold { color: var(--gold); } /* ── EYEBROW ── */ .eyebrow { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; } .eyebrow-line { display: inline-block; width: 2rem; height: 2px; background: var(--gold); flex-shrink: 0; } .eyebrow-label { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } /* ── SECTION TITLES ── */ .section-title { font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; color: var(--navy); line-height: 1.2; } .section-title-sm { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; color: var(--navy); } .section-header { margin-bottom: 3rem; } .section-header-sm { display: flex; align-items: center; gap: .75rem; margin-bottom: 2rem; } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.75rem; font-size: .85rem; font-weight: 600; letter-spacing: .04em; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); } .btn-gold:hover { background: var(--gold2); border-color: var(--gold2); } .btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,.35); } .btn-outline: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: 100; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: box-shadow var(--transition), padding var(--transition), border-color var(--transition); padding: 1.25rem 0; } .site-header.scrolled { box-shadow: var(--shadow-md); padding: .75rem 0; border-color: var(--gray200); } .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; } .logo-text { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--navy); letter-spacing: .01em; } /* Desktop nav */ .desktop-nav { display: none; align-items: center; gap: 2rem; } @media (min-width: 768px) { .desktop-nav { display: flex; } } .nav-link { position: relative; font-size: .85rem; font-weight: 500; letter-spacing: .04em; color: var(--gray600); transition: color var(--transition); padding-bottom: 2px; } .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--gold); transition: width var(--transition); } .nav-link:hover, .nav-link.active { color: var(--navy); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-cta { margin-left: .5rem; padding: .5rem 1.25rem; background: var(--navy); color: var(--white); font-size: .82rem; font-weight: 600; letter-spacing: .04em; border-radius: var(--radius); transition: background var(--transition); } .nav-cta:hover { background: var(--navy2); } /* Mobile toggle */ .mobile-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 4px; } @media (min-width: 768px) { .mobile-toggle { display: none; } } .mobile-toggle span { display: block; width: 100%; height: 2px; background: var(--navy); 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; gap: 0; background: var(--white); border-top: 1px solid var(--gray100); box-shadow: var(--shadow-md); padding: 1rem 1.5rem; max-width: 100%; } .mobile-nav.open { display: flex; } @media (min-width: 768px) { .mobile-nav { display: none !important; } } .mobile-nav .nav-link { padding: .65rem 0; border-bottom: 1px solid var(--gray100); font-size: .95rem; } .mobile-cta { display: block; margin-top: .75rem; padding: .85rem; text-align: center; background: var(--navy); color: var(--white) !important; border-radius: var(--radius); font-size: .85rem; font-weight: 600; } /* ══════════════════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════════════════ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; background: var(--navy); overflow: hidden; padding-top: 6rem; } .hero-bg-pattern { position: absolute; inset: 0; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a84c' fill-opacity='0.5'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; padding-top: 4rem; padding-bottom: 4rem; width: 100%; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } } /* Hero text */ .hero-text { color: var(--white); } .hero-name { font-family: var(--font-heading); font-size: clamp(3.5rem, 8vw, 5.5rem); font-weight: 700; line-height: 1.05; margin-bottom: 1rem; color: var(--white); } .hero-subtitle { font-size: 1rem; font-weight: 500; letter-spacing: .06em; color: var(--blue200); margin-bottom: 1.25rem; } .hero-bio { font-size: .95rem; color: var(--blue100); line-height: 1.7; max-width: 28rem; margin-bottom: 2rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; } /* Hero portrait */ .hero-portrait { display: flex; justify-content: center; } @media (min-width: 1024px) { .hero-portrait { justify-content: flex-end; } } .portrait-frame { position: relative; display: inline-block; } .portrait-border-outer, .portrait-border-inner { position: absolute; border-radius: var(--radius); pointer-events: none; } .portrait-border-outer { inset: -1rem; border: 1px solid rgba(201,168,76,.3); } .portrait-border-inner { inset: -2rem; border: 1px solid rgba(201,168,76,.1); } .portrait-img { position: relative; width: clamp(240px, 35vw, 380px); height: auto; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-xl); } .location-badge { position: absolute; bottom: -1rem; left: -1rem; background: var(--white); color: var(--navy); padding: .5rem 1rem; border-radius: var(--radius); box-shadow: var(--shadow-md); display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 600; white-space: nowrap; } /* ══════════════════════════════════════════════════════════════ 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-body { display: flex; flex-direction: column; gap: 1rem; color: var(--gray700); font-size: .95rem; line-height: 1.75; margin-top: 1.25rem; } .about-tags { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; } .tag { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem 1rem; background: var(--gray50); border: 1px solid var(--gray200); border-radius: 999px; font-size: .8rem; font-weight: 500; color: var(--navy); } /* About image */ .about-img-wrapper { position: relative; } .about-img-border { position: absolute; top: -1rem; left: -1rem; right: 1rem; bottom: 1rem; border: 2px solid rgba(201,168,76,.2); border-radius: var(--radius); pointer-events: none; } .about-img { position: relative; width: 100%; height: 22rem; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-xl); } .about-img-caption { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; background: rgba(15,32,68,.9); backdrop-filter: blur(4px); color: var(--white); padding: .75rem 1rem; border-radius: calc(var(--radius) - 2px); } .caption-label { font-size: .65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: .15rem; } .caption-value { font-size: .85rem; font-weight: 500; } /* ══════════════════════════════════════════════════════════════ BLOG PREVIEW (homepage) ══════════════════════════════════════════════════════════════ */ .blog-preview { padding: 6rem 0; background: var(--gray50); } .blog-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @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); 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(-4px); } .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.05); } .blog-card-body { padding: 1.5rem; } .blog-card-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; } .blog-category { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); } .meta-dot { color: var(--gray200); } .blog-date { font-size: .72rem; color: var(--gray400); } .blog-card-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--navy); line-height: 1.35; margin-bottom: .75rem; transition: color var(--transition); } .blog-card:hover .blog-card-title, .blog-card-title a:hover { color: var(--gold); } .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: .82rem; font-weight: 600; color: var(--navy); transition: color var(--transition); } .read-more:hover { color: var(--gold); } .blog-preview-cta { margin-top: 2.5rem; text-align: center; } /* ══════════════════════════════════════════════════════════════ CTA STRIP ══════════════════════════════════════════════════════════════ */ .cta-strip { padding: 5rem 0; background: var(--navy); } .cta-inner { text-align: center; } .cta-title { font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; color: var(--white); margin-bottom: 1rem; } .cta-body { color: var(--blue200); font-size: .95rem; max-width: 36rem; margin: 0 auto 2rem; line-height: 1.7; } /* ══════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════ */ .site-footer { background: var(--navy); color: var(--white); padding-top: 4rem; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 3rem; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } } .footer-logo { display: block; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--white); margin-bottom: .75rem; } .footer-tagline { font-size: .85rem; color: var(--blue200); margin-bottom: .25rem; } .footer-location { font-size: .82rem; color: var(--blue300); } .footer-heading { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .footer-links { display: flex; flex-direction: column; gap: .5rem; } .footer-links a { font-size: .85rem; color: var(--blue200); transition: color var(--transition); } .footer-links a:hover { color: var(--gold); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); 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: var(--blue300); } /* ══════════════════════════════════════════════════════════════ PAGE HERO (blog, contact) ══════════════════════════════════════════════════════════════ */ .page-hero { background: var(--navy); padding: 7rem 0 4rem; } .page-hero-title { font-family: var(--font-heading); font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 700; color: var(--white); margin-bottom: 1rem; } .page-hero-sub { color: var(--blue200); font-size: .95rem; max-width: 36rem; } /* ══════════════════════════════════════════════════════════════ BLOG PAGE — FEATURED CARD ══════════════════════════════════════════════════════════════ */ .featured-label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .featured-card { display: grid; grid-template-columns: 1fr; border-radius: var(--radius); 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: 16rem; } .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.8rem); font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 1rem; transition: color var(--transition); } .featured-card-title a:hover { color: var(--gold); } .featured-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; } .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, 35vw, 26rem); overflow: hidden; } .post-hero-img { width: 100%; height: 100%; object-fit: cover; } .post-container { max-width: 48rem; margin: 0 auto; padding: 2.5rem 1.5rem 0; } .back-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--gray500); 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.8rem, 4vw, 3rem); 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: 2rem; } .post-meta-item { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--gray500); } /* Article body */ .post-body { font-size: .97rem; line-height: 1.8; color: var(--gray700); } .post-body p { margin-bottom: 1.25rem; } .post-body strong { color: var(--gray800); font-weight: 600; } .post-body h2 { font-family: var(--font-heading); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: var(--navy); margin-top: 2.5rem; margin-bottom: 1rem; padding-left: 1rem; border-left: 4px solid var(--gold); line-height: 1.25; } .post-body blockquote { border-left: 4px solid var(--gold); padding: 1rem 1.5rem; margin: 2rem 0; font-style: italic; color: var(--gray600); background: var(--gray50); border-radius: 0 var(--radius) var(--radius) 0; } .post-body blockquote footer { margin-top: .75rem; font-style: normal; font-size: .82rem; font-weight: 700; color: var(--navy); } .post-list { list-style: none; display: flex; flex-direction: column; gap: .85rem; margin: 1.5rem 0; } .post-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: .95rem; line-height: 1.7; } .post-list li::before { content: ''; display: block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: .55rem; } .post-figure { margin: 2.5rem 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); } .post-figure-img { width: 100%; height: 16rem; object-fit: cover; } .post-figure figcaption { font-size: .75rem; color: var(--gray400); text-align: center; padding: .6rem 1rem; background: var(--gray50); } /* Author byline */ .post-byline { display: flex; align-items: center; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--gray100); } .byline-avatar { width: 3rem; height: 3rem; 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; } .byline-name { font-weight: 700; color: var(--navy); font-size: .95rem; } .byline-title { 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(--gold); } /* ══════════════════════════════════════════════════════════════ CONTACT PAGE ══════════════════════════════════════════════════════════════ */ .contact-section { padding: 5rem 0; background: var(--white); } .contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; } } .contact-title { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: var(--navy); margin-bottom: 1.25rem; } .contact-intro { color: var(--gray600); font-size: .95rem; line-height: 1.75; margin-bottom: 2rem; } .contact-info-list { display: flex; flex-direction: column; gap: 1.25rem; } .contact-info-item { display: flex; align-items: flex-start; gap: 1rem; } .contact-info-icon { width: 2.5rem; height: 2.5rem; background: rgba(15,32,68,.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: .88rem; color: var(--gray700); } /* Form */ .contact-form { display: flex; flex-direction: column; gap: 1.25rem; } .form-group { display: flex; flex-direction: column; gap: .4rem; } .form-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray500); } .form-input, .form-textarea { width: 100%; padding: .8rem 1rem; border: 1px solid var(--gray200); border-radius: var(--radius); font-family: var(--font-body); font-size: .88rem; 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(15,32,68,.08); } .form-textarea { resize: vertical; min-height: 8rem; } .form-submit { width: 100%; padding: .9rem; background: var(--navy); color: var(--white); font-family: var(--font-body); font-size: .88rem; font-weight: 600; letter-spacing: .04em; border: none; border-radius: var(--radius); cursor: pointer; transition: background var(--transition); } .form-submit:hover { background: var(--navy2); } .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(28px); animation: fadeUp .7s ease forwards; } .animate-fade-left { opacity: 0; transform: translateX(40px); animation: fadeLeft .8s ease .2s forwards; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeLeft { to { opacity: 1; transform: translateX(0); } } /* Scroll-triggered */ .animate-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .animate-on-scroll.in-view { opacity: 1; transform: translateY(0); } /* ══════════════════════════════════════════════════════════════ RESPONSIVE TWEAKS ══════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .hero-name { font-size: 3rem; } .portrait-img { width: 220px; } .portrait-border-outer { inset: -.6rem; } .portrait-border-inner { inset: -1.2rem; } .about-img { height: 16rem; } .featured-card-body { padding: 1.5rem; } .post-container { padding-top: 1.5rem; } }