/* ============================================================ MELISSA HOWELL — SHARED STYLESHEET (style.css) ============================================================ This ONE file controls the look of EVERY page on your site. Change a color or font here and it updates everywhere. HOW IT WORKS: Each HTML page has this line in its : That tells the browser: "Go get the styles from this file." EDIT HERE markers show the key spots you might customize. */ /* -------------------------------------------------------- CSS VARIABLES — Your brand identity in code -------------------------------------------------------- EDIT HERE: Change any value to adjust the whole site. */ :root { /* === YOUR BRAND PURPLE (from the MH logo) === */ --purple-deep: #3A0CA3; --purple-vivid: #5B16D0; --purple-bright: #7B2FF5; --purple-soft: #C4A0FF; --purple-wash: #F3EDFF; /* Very faint purple tint */ /* === NEUTRAL PALETTE === */ --black: #151420; --near-black: #1B1A28; --dark-grey: #262535; --mid-grey: #8E8A9E; --light-grey: #D0CDD9; --off-white: #F6F4FA; --white: #FFFFFF; /* === ACCENT COLORS === */ --accent-gold: #E8B931; --accent-warm: #FF7A5C; /* === FONTS === */ /* "Instrument Serif" — an elegant, editorial serif for headlines. "Manrope" — a geometric, modern sans-serif for body text. This pairing gives the "magazine editorial" feel of Angela Benton's site while feeling distinct and premium. */ --font-display: 'Instrument Serif', Georgia, serif; --font-body: 'Manrope', sans-serif; /* === SPACING SCALE (for consistent rhythm) === */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; --space-2xl: 10rem; /* === LAYOUT === */ --max-width: 1100px; --max-narrow: 720px; /* For text-heavy pages like About */ } /* -------------------------------------------------------- RESET & BASE -------------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Slightly purple-tinted background so the page never flashes white */ background: var(--black); } body { font-family: var(--font-body); background-color: var(--black); color: var(--light-grey); line-height: 1.75; -webkit-font-smoothing: antialiased; /* Smoother text rendering on Mac */ } /* Branded text selection highlight */ ::selection { background: var(--purple-vivid); color: var(--white); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* -------------------------------------------------------- NAVIGATION BAR -------------------------------------------------------- Clean, minimal nav like Angela's site. Logo left, links right. Same on every page. */ .site-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 1.5rem var(--space-md); display: flex; justify-content: space-between; align-items: center; background: rgba(21, 20, 32, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: padding 0.4s ease; } .site-nav.scrolled { padding: 0.8rem var(--space-md); } /* Logo image */ .site-nav .logo img { height: 40px; width: auto; border-radius: 4px; } /* Nav links container */ .site-nav .nav-links { display: flex; gap: 2.5rem; list-style: none; } .site-nav .nav-links a { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid-grey); transition: color 0.3s ease; } .site-nav .nav-links a:hover, .site-nav .nav-links a.active { color: var(--white); } /* Mobile hamburger */ .nav-toggle { display: none; background: none; border: none; color: var(--light-grey); font-size: 1.6rem; cursor: pointer; } /* -------------------------------------------------------- HERO — Full-width statement section (homepage) -------------------------------------------------------- Big name, tagline, optional background image. Inspired by Angela Benton's hero: photo + name overlay. */ .hero-home { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; /* Content anchored to the bottom — editorial style */ padding: var(--space-2xl) var(--space-md) var(--space-xl); position: relative; overflow: hidden; } /* Gradient overlay on top of the hero background */ .hero-home::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to top, var(--black) 0%, rgba(21,20,32,0.9) 30%, rgba(21,20,32,0.55) 60%, rgba(21,20,32,0.25) 100% ); z-index: 1; } .hero-home .hero-content { position: relative; z-index: 2; max-width: var(--max-width); } .hero-home h1 { font-family: var(--font-display); font-size: clamp(3.5rem, 9vw, 7rem); font-weight: 400; /* Serifs look best at normal weight when large */ line-height: 1.0; color: var(--white); margin-bottom: var(--space-sm); letter-spacing: -0.02em; } .hero-home .hero-tagline { font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 500; color: var(--purple-soft); max-width: 650px; line-height: 1.6; margin-bottom: var(--space-sm); } .hero-home .hero-roles { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid-grey); margin-bottom: var(--space-md); } .hero-home .hero-cta { display: inline-block; padding: 0.85rem 2rem; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); border: 1.5px solid var(--purple-soft); border-radius: 0; /* Sharp corners — editorial feel */ transition: all 0.3s ease; } .hero-home .hero-cta:hover { background: var(--purple-vivid); border-color: var(--purple-vivid); } /* -------------------------------------------------------- PAGE HEADER — Used on inner pages (About, Ideas, etc.) -------------------------------------------------------- Smaller than the hero. Just a title + optional subtitle. */ .page-header { padding: 10rem var(--space-md) var(--space-lg); max-width: var(--max-width); margin: 0 auto; } .page-header h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 5.5vw, 4.5rem); font-weight: 400; color: var(--white); line-height: 1.1; margin-bottom: var(--space-sm); } .page-header .page-subtitle { font-size: 1.1rem; color: var(--mid-grey); max-width: var(--max-narrow); } /* -------------------------------------------------------- SECTION CONTAINERS -------------------------------------------------------- */ .section { padding: var(--space-xl) var(--space-md); } .section-narrow { max-width: var(--max-narrow); margin: 0 auto; } .section-wide { max-width: var(--max-width); margin: 0 auto; } /* Section label — small uppercase gold text above headings */ .label { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-gold); margin-bottom: var(--space-sm); } .section h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; color: var(--white); margin-bottom: var(--space-sm); line-height: 1.15; } .section h2 em { font-style: italic; color: var(--purple-soft); /* Italic words in headings get a lavender accent */ } /* -------------------------------------------------------- DIVIDER — Thin purple gradient line -------------------------------------------------------- */ .divider { height: 1px; background: linear-gradient( to right, transparent, var(--purple-deep), var(--purple-bright), var(--purple-deep), transparent ); max-width: var(--max-width); margin: 0 auto; } /* -------------------------------------------------------- "THINGS I'M THINKING ON" — Ideas/Thesis Cards -------------------------------------------------------- Inspired by Angela's thesis section. Clean cards with a title, short description, and optional link. */ .ideas-grid { display: grid; grid-template-columns: 1fr; /* Stacked full-width — editorial */ gap: var(--space-md); } .idea-card { padding: var(--space-lg) var(--space-md); border: 1px solid var(--dark-grey); border-radius: 2px; /* Nearly sharp corners */ transition: border-color 0.4s ease, transform 0.4s ease; position: relative; } .idea-card:hover { border-color: var(--purple-bright); transform: translateY(-3px); } .idea-card .idea-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--purple-soft); margin-bottom: 0.75rem; } .idea-card h3 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; color: var(--white); margin-bottom: 0.75rem; line-height: 1.25; } .idea-card p { font-size: 0.95rem; color: var(--light-grey); opacity: 0.8; max-width: 600px; } .idea-card .idea-link { display: inline-block; margin-top: 1.25rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple-soft); transition: color 0.3s ease; } .idea-card .idea-link:hover { color: var(--white); } /* -------------------------------------------------------- VENTURES GRID — 2-column cards -------------------------------------------------------- */ .ventures-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .venture-card { padding: var(--space-md) var(--space-md); border: 1px solid var(--dark-grey); border-radius: 2px; transition: border-color 0.4s ease, transform 0.4s ease; } .venture-card:hover { border-color: var(--accent, var(--purple-bright)); transform: translateY(-3px); } .venture-card .v-role { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent, var(--purple-soft)); margin-bottom: 0.6rem; } .venture-card h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: var(--white); margin-bottom: 0.6rem; } .venture-card p { font-size: 0.9rem; opacity: 0.75; line-height: 1.7; } .venture-card .v-link { display: inline-block; margin-top: 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent, var(--purple-soft)); transition: color 0.3s ease, letter-spacing 0.3s ease; } .venture-card .v-link:hover { color: var(--white); letter-spacing: 0.14em; } /* -------------------------------------------------------- ABOUT PAGE — Bio layout -------------------------------------------------------- Long-form text in a narrow column, editorial-style. */ .bio-text { max-width: var(--max-narrow); margin: 0 auto; padding: 0 var(--space-md); } .bio-text p { font-size: 1.05rem; margin-bottom: 1.5rem; color: var(--light-grey); } .bio-text strong { color: var(--white); font-weight: 600; } /* Pull quote — a highlighted quote or statement */ .pull-quote { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 400; font-style: italic; color: var(--purple-soft); line-height: 1.45; max-width: var(--max-narrow); margin: var(--space-lg) auto; padding: var(--space-md) var(--space-md); padding-left: var(--space-md); border-left: 3px solid var(--purple-bright); } /* -------------------------------------------------------- CREDENTIALS ROW — Education, fellowships, honors -------------------------------------------------------- */ .credentials-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); text-align: center; padding: var(--space-lg) 0; border-top: 1px solid var(--dark-grey); border-bottom: 1px solid var(--dark-grey); } .credential .cred-label { font-family: var(--font-display); font-size: 1.8rem; color: var(--purple-soft); margin-bottom: 0.3rem; } .credential .cred-title { font-size: 0.82rem; font-weight: 600; color: var(--white); margin-bottom: 0.15rem; } .credential .cred-sub { font-size: 0.72rem; color: var(--mid-grey); } /* -------------------------------------------------------- AFFILIATIONS LIST -------------------------------------------------------- */ .affiliations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm) var(--space-md); } .affiliation { padding: 1.25rem 0; border-bottom: 1px solid var(--dark-grey); } .affiliation .aff-role { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-gold); margin-bottom: 0.25rem; } .affiliation .aff-org { font-size: 0.95rem; font-weight: 600; color: var(--white); } .affiliation .aff-date { font-size: 0.75rem; color: var(--mid-grey); } /* -------------------------------------------------------- SPEAKING LIST -------------------------------------------------------- */ .speaking-list { list-style: none; } .speaking-item { padding: 1.5rem 0; border-bottom: 1px solid var(--dark-grey); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); } .speaking-item:last-child { border-bottom: none; } .speaking-item .speak-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--white); } .speaking-item .speak-venue { font-size: 0.82rem; color: var(--mid-grey); text-align: right; white-space: nowrap; } /* -------------------------------------------------------- FOOTER — Bio summary + links (like Angela's) -------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--dark-grey); padding: var(--space-xl) var(--space-md) var(--space-lg); } .footer-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-lg); } .footer-bio h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: var(--white); margin-bottom: var(--space-sm); } .footer-bio p { font-size: 0.88rem; color: var(--mid-grey); line-height: 1.75; max-width: 520px; } .footer-links h4 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mid-grey); margin-bottom: var(--space-sm); } .footer-links ul { list-style: none; } .footer-links li { margin-bottom: 0.6rem; } .footer-links a { font-size: 0.88rem; color: var(--light-grey); transition: color 0.3s ease; } .footer-links a:hover { color: var(--white); } .footer-bottom { max-width: var(--max-width); margin: var(--space-lg) auto 0; padding-top: var(--space-md); border-top: 1px solid var(--dark-grey); display: flex; justify-content: space-between; align-items: center; font-size: 0.7rem; color: var(--mid-grey); letter-spacing: 0.05em; text-transform: uppercase; } .footer-bottom a { color: var(--mid-grey); transition: color 0.3s ease; } .footer-bottom a:hover { color: var(--white); } /* -------------------------------------------------------- SCROLL REVEAL ANIMATION -------------------------------------------------------- */ /* Compact article cards — smaller than idea cards. Used for Substack articles on the About page. Inspired by Angela Benton's minimal link-card style. */ .article-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } .article-card { padding: 1.25rem 1.5rem; border: 1px solid var(--dark-grey); border-radius: 2px; transition: border-color 0.3s ease, transform 0.3s ease; } .article-card:hover { border-color: var(--purple-bright); transform: translateY(-2px); } .article-card .a-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple-soft); margin-bottom: 0.35rem; } .article-card h4 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; color: var(--white); line-height: 1.3; margin-bottom: 0.35rem; } .article-card p { font-size: 0.8rem; color: var(--mid-grey); line-height: 1.6; } .article-card .a-link { display: inline-block; margin-top: 0.6rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple-soft); transition: color 0.3s ease; } .article-card .a-link:hover { color: var(--white); } /* Ideas hub — 3-column category cards that link to subpages. */ .category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .category-card { padding: var(--space-lg) var(--space-md); border: 1px solid var(--dark-grey); border-radius: 2px; text-align: center; transition: border-color 0.4s ease, transform 0.4s ease; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .category-card:hover { border-color: var(--purple-bright); transform: translateY(-4px); } .category-card .cat-icon { font-size: 2rem; margin-bottom: 0.25rem; } .category-card h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; color: var(--white); } .category-card p { font-size: 0.85rem; color: var(--mid-grey); line-height: 1.6; max-width: 280px; } .category-card .cat-link { margin-top: auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple-soft); } .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-d1 { transition-delay: 0.1s; } .reveal-d2 { transition-delay: 0.2s; } .reveal-d3 { transition-delay: 0.3s; } .reveal-d4 { transition-delay: 0.4s; } .reveal-d5 { transition-delay: 0.5s; } /* -------------------------------------------------------- RESPONSIVE — Tablets & Phones -------------------------------------------------------- */ @media (max-width: 900px) { .ventures-grid { grid-template-columns: 1fr; } .credentials-grid { grid-template-columns: repeat(2, 1fr); } .affiliations-grid { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; } .category-grid { grid-template-columns: 1fr; } .article-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .nav-toggle { display: block; } .site-nav .nav-links { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: rgba(21, 20, 32, 0.97); flex-direction: column; padding: 1.5rem var(--space-md); gap: 1.25rem; border-bottom: 1px solid var(--dark-grey); } .site-nav .nav-links.open { display: flex; } .speaking-item { flex-direction: column; gap: 0.25rem; } .speaking-item .speak-venue { text-align: left; } .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; } }