/* ========================================================= Whitney Masulis — portfolio Vanilla CSS. Mobile-first within the 768px breakpoint. Fonts are loaded via in each page's . ========================================================= */ /* ----- DESIGN TOKENS ----- */ :root { /* palette */ --cream: #F4EDE4; --cream-deep: #EBE1D4; --warm-white: #FAF7F3; --charcoal: #2A2520; --charcoal-mid: #4A443D; --charcoal-soft:#6B6560; --gold: #C8943E; /* decorative: borders, dividers, focus outline */ --gold-light: #D4A85A; /* decorative on dark backgrounds */ --gold-pale: #F0E4CC; --gold-text: #8A6820; /* AA-safe text color on cream / warm-white */ --sage: #8B9A7E; --sage-light: #D4DEC9; --sage-text: #4A5C3F; /* AA-safe text color on --sage-light */ --rust: #B85C3A; --ink: #1A1714; /* type */ --font-display: 'Petrona', Georgia, serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'DM Mono', 'SF Mono', ui-monospace, monospace; /* spacing scale */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-10: 80px; --sp-12: 96px; --sp-16: 128px; --sp-20: 160px; } /* ----- RESET ----- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { color-scheme: light; } body { font-family: var(--font-body); color: var(--charcoal); background: var(--warm-white); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; /* Sticky footer: body is a flex column, main grows, footer settles at the end. */ display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } @media (prefers-reduced-motion: no-preference) { body { animation: pageIn .4s ease both; } @keyframes pageIn { from { opacity: 0 } to { opacity: 1 } } } a { color: inherit; } img { display: block; max-width: 100%; } main { flex: 1 0 auto; } body.nav-open { overflow: hidden; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ----- HEADER ----- */ .site-header { position: sticky; top: 0; z-index: 100; height: 64px; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--sp-6); background: rgba(250, 247, 243, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--cream-deep); transition: background .3s ease, border-color .3s ease; } .site-header.header-transparent { position: fixed; left: 0; right: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } .site-header.header-transparent .wordmark { color: var(--cream); } .site-header.header-transparent nav a { color: rgba(244, 237, 228, .85); } .site-header.header-transparent nav a:hover { color: var(--cream); } .site-header.header-transparent nav a.active { color: var(--gold-light); } .site-header.header-transparent.scrolled { background: rgba(250, 247, 243, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--cream-deep); } .site-header.header-transparent.scrolled .wordmark { color: var(--charcoal); } .site-header.header-transparent.scrolled nav a { color: var(--charcoal-soft); } .site-header.header-transparent.scrolled nav a:hover { color: var(--charcoal); } .site-header.header-transparent.scrolled nav a.active { color: var(--gold-text); } .site-header .wordmark { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: .01em; text-decoration: none; color: var(--charcoal); } .site-header nav { display: flex; gap: var(--sp-3); } .site-header nav a { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--charcoal-soft); position: relative; padding: 6px 2px; transition: color .3s ease; } .site-header nav a::after { content: ''; position: absolute; left: 2px; bottom: 2px; width: 0; height: 1px; background: var(--gold); transition: width .3s ease; } .site-header nav a:hover { color: var(--charcoal); } .site-header nav a:hover::after { width: calc(100% - 4px); } .site-header nav a.active { color: var(--gold-text); } .site-header nav a.active::after { width: calc(100% - 4px); } /* Hamburger: 44x44 hit area with 28x20 visible icon centered. */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; width: 44px; height: 44px; position: relative; z-index: 10000; } .nav-toggle span { display: block; width: 28px; height: 2px; background: var(--charcoal); position: absolute; left: 50%; transform: translateX(-50%); transition: transform .3s ease, top .3s ease, bottom .3s ease, background .3s ease; } .nav-toggle span:first-child { top: 14px; } .nav-toggle span:last-child { bottom: 14px; } /* Transparent header: lighten the bars so they're visible on the dark hero. */ .site-header.header-transparent .nav-toggle span { background: var(--cream); } .site-header.header-transparent.scrolled .nav-toggle span { background: var(--charcoal); } /* Open state: morph to X, always use charcoal (menu background is light on every page). */ .nav-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: translateX(-50%) rotate(45deg); background: var(--charcoal); } .nav-toggle[aria-expanded="true"] span:last-child { bottom: 21px; transform: translateX(-50%) rotate(-45deg); background: var(--charcoal); } /* ----- LAYOUT ----- */ .section { padding: var(--sp-12) var(--sp-8); max-width: 1100px; margin: 0 auto; } .section.full-bleed { max-width: none; background: var(--cream); } .section-inner { max-width: 1100px; margin: 0 auto; } .section.dark { background: var(--charcoal); color: var(--cream); max-width: none; } .section-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin-bottom: var(--sp-2); display: block; } .section-label.on-dark { color: var(--gold-light); } h1 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 56px); font-weight: 800; line-height: 1.05; } h1 em { font-style: italic; font-weight: 700; color: var(--gold-text); } h2 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 42px); font-weight: 800; line-height: 1.1; margin-bottom: var(--sp-5); } h2 em { font-style: italic; font-weight: 700; color: var(--gold-text); } h3 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px); font-weight: 700; line-height: 1.2; margin-bottom: var(--sp-3); } p { max-width: 640px; } p + p { margin-top: var(--sp-2); } .muted { color: var(--charcoal-mid); } /* ----- BUTTONS ----- */ .btn { display: inline-block; padding: 14px 36px; min-height: 44px; background: var(--gold); color: var(--charcoal); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border: 2px solid var(--gold); border-radius: 4px; transition: background .3s ease, border-color .3s ease, color .3s ease; } .btn:hover, .btn:focus-visible { background: var(--rust); border-color: var(--rust); color: var(--cream); } /* ----- HEROES ----- */ .hero-home { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; margin-top: -64px; padding: calc(var(--sp-20) + 64px) var(--sp-8) var(--sp-16); background: var(--ink); /* fallback while background image loads */ } .hero-home .hero-bg { position: absolute; inset: 0; z-index: 0; background-image: url('images/botanicals.jpg'); background-size: cover; background-position: center; filter: brightness(.35) saturate(.75); } .hero-home .hero-content { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; text-align: center; } .hero-home h1 { color: var(--cream); margin-bottom: var(--sp-3); } .hero-home h1 em { color: var(--gold-light); } .hero-home .hero-sub { font-size: 17px; color: rgba(244, 237, 228, .9); max-width: 520px; margin: 0 auto var(--sp-4); line-height: 1.7; } .hero-home .hero-credentials { font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-light); } .hero-home .scroll-cue { position: absolute; bottom: var(--sp-5); left: 50%; transform: translateX(-50%); z-index: 1; font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 237, 228, .8); } @media (prefers-reduced-motion: no-preference) { .hero-home .scroll-cue { animation: float 2s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } } .about-hero { padding: var(--sp-16) var(--sp-8) var(--sp-8); max-width: 1100px; margin: 0 auto; } .about-hero h1{ max-width: 800px; margin-bottom: var(--sp-4); } .contact-hero { padding: var(--sp-16) var(--sp-8) var(--sp-12); max-width: 1100px; margin: 0 auto; } /* ----- TWO-COL ----- */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); margin-top: var(--sp-5); } .two-col.wide-left { grid-template-columns: 1.4fr 1fr; } .two-col.wide-right{ grid-template-columns: 1fr 1.4fr; } .two-col.bio-layout{ grid-template-columns: 3fr 2fr; } /* ----- WORK ----- */ .work-intro { padding-top: var(--sp-16); padding-bottom: var(--sp-6); } .work-intro .section-subtitle { margin-top: var(--sp-3); color: var(--charcoal-mid); } .work-list { padding-top: 0; } .project-featured { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-8); padding: var(--sp-8); background: var(--cream); border-radius: 8px; margin-bottom: var(--sp-6); } .project-featured .project-thumb { aspect-ratio: 16 / 10; background: var(--charcoal); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-5); text-align: center; } .project-featured .project-info { display: flex; flex-direction: column; justify-content: center; } .project-featured .project-title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 30px); font-weight: 700; line-height: 1.2; margin-bottom: var(--sp-2); } .project-featured .project-summary { font-size: 16px; color: var(--charcoal-mid); margin-top: var(--sp-1); max-width: none; } .project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .project-card { background: var(--cream); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; } .project-card .project-thumb { aspect-ratio: 16 / 10; background: var(--charcoal); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-4); text-align: center; } .project-card .project-card-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); } .project-card h3 { font-size: 20px; margin-bottom: var(--sp-1); } .project-card .project-summary { font-size: 14px; color: var(--charcoal-mid); line-height: 1.6; } .project-status { display: inline-block; margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--charcoal-soft); } .thumb-quote { font-family: var(--font-display); font-style: italic; font-weight: 700; line-height: 1.35; color: var(--cream); } .project-featured .thumb-quote { font-size: clamp(18px, 2vw, 22px); } .project-card .thumb-quote { font-size: 17px; max-width: 320px; } .thumb-cite { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); margin-top: var(--sp-2); font-style: normal; } .project-card .thumb-cite { font-size: 9px; margin-top: var(--sp-1); } .project-card.placeholder .project-thumb { background: var(--cream-deep); } .project-card.placeholder .coming-soon { font-family: var(--font-mono); font-size: 12px; color: var(--charcoal-soft); } .tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--sp-2); } .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-text); background: var(--sage-light); padding: 3px 10px; border-radius: 3px; } /* ----- TESTIMONIALS ----- */ .testimonial-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); margin-top: var(--sp-5); } .testimonial { border-left: 3px solid var(--gold); padding: var(--sp-3) var(--sp-5); max-width: 640px; } .testimonial blockquote { font-family: var(--font-display); font-size: 20px; font-style: italic; font-weight: 700; line-height: 1.4; color: var(--charcoal); } .testimonial cite { display: block; margin-top: var(--sp-2); font-family: var(--font-mono); font-size: 11px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--charcoal-soft); } /* ----- CTA BLOCK ----- */ .cta-block { padding: var(--sp-16) var(--sp-8); text-align: center; } .cta-block-inner { max-width: 640px; margin: 0 auto; } .cta-block h2 { margin-bottom: var(--sp-3); } .cta-block .section-label { margin-bottom: var(--sp-3); } .cta-block > .cta-block-inner > p { margin: 0 auto var(--sp-5); color: var(--charcoal-mid); max-width: 480px; } /* ----- ABOUT ----- */ .headshot-wrap { border-radius: 6px; overflow: hidden; box-shadow: 0 4px 24px rgba(42, 37, 32, .08), 0 1px 4px rgba(42, 37, 32, .04); } .headshot-wrap img { width: 100%; height: auto; } .about-personal { margin-top: var(--sp-4); color: var(--charcoal-mid); } .career-section { margin-top: var(--sp-6); } .career-section + .career-section { margin-top: var(--sp-8); } .career-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-4); } .career-table th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--charcoal-soft); text-align: left; padding: var(--sp-1) 0; border-bottom: 1px solid var(--cream-deep); font-weight: 400; } .career-table td { padding: var(--sp-2) 0; border-bottom: 1px solid var(--cream-deep); vertical-align: top; } .career-table .col-years { width: 14%; } .career-table .col-org { width: 30%; } .career-table .col-role { width: 56%; } .career-table .role-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; } .career-table .current-row td { border-left: 3px solid var(--gold); padding-left: var(--sp-2); } /* ----- CONTACT ----- */ .contact-email { display: inline-block; margin-top: var(--sp-4); font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px); font-weight: 700; color: var(--gold-text); text-decoration: none; position: relative; } .contact-email::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); opacity: .45; transition: opacity .3s ease; } .contact-email:hover::after, .contact-email:focus-visible::after { opacity: 1; } .contact-links { margin-top: var(--sp-4); display: flex; gap: var(--sp-4); } .contact-links a { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--charcoal-soft); text-decoration: none; padding: 6px 2px; transition: color .3s ease; } .contact-links a:hover, .contact-links a:focus-visible { color: var(--gold-text); } .contact-note { margin-top: var(--sp-3); color: var(--charcoal-mid); font-size: 14px; } .contact-quote-wrap { display: flex; align-items: flex-start; padding-top: var(--sp-4); } .contact-quote { border-left: 3px solid var(--gold); padding: var(--sp-3) var(--sp-4); max-width: 360px; font-family: var(--font-display); font-size: 20px; font-style: italic; font-weight: 700; line-height: 1.4; color: var(--charcoal); } .contact-bottom-spacer { padding-bottom: var(--sp-16); } /* ----- FOOTER ----- */ .site-footer { position: relative; overflow: hidden; padding: var(--sp-10) var(--sp-8); background: var(--charcoal); flex-shrink: 0; /* reinforce sticky-footer behavior on short pages */ } .site-footer .footer-bg { position: absolute; inset: 0; z-index: 0; background-image: url('images/botanicals.jpg'); background-size: cover; background-position: center; filter: brightness(.3) saturate(.7); } .site-footer .footer-content { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; } .site-footer .footer-left .footer-name { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--cream); } .site-footer .footer-left .footer-title { font-family: var(--font-body); font-size: 14px; color: rgba(244, 237, 228, .9); margin-top: 4px; } .site-footer .footer-left .footer-location { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 237, 228, .85); margin-top: var(--sp-1); } .site-footer .footer-right { display: flex; gap: var(--sp-3); } .site-footer .footer-right a { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); text-decoration: none; padding: 6px 2px; transition: color .2s; } .site-footer .footer-right a:hover, .site-footer .footer-right a:focus-visible { color: var(--cream); } .site-footer .footer-copy { position: relative; z-index: 1; text-align: center; margin-top: var(--sp-6); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: rgba(244, 237, 228, .6); } /* ----- SCROLL REVEAL ----- */ .reveal { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } } /* ----- RESPONSIVE ----- */ @media (max-width: 768px) { body { padding-top: 64px; } .site-header { padding: 0 var(--sp-3); position: fixed; left: 0; right: 0; } .site-header nav { display: none; } .nav-toggle { display: block; } /* Full-screen menu: identical on every page, solid opaque background. */ .site-header nav.open { display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; inset: 0; background: var(--warm-white); z-index: 9999; gap: var(--sp-5); padding-top: 80px; } .site-header nav.open a { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--charcoal); padding: 10px 16px; min-height: 44px; } .site-header nav.open a.active { color: var(--gold-text); } .site-header nav.open a::after { display: none; } .hero-home { min-height: 80vh; min-height: 80dvh; padding: calc(var(--sp-12) + 64px) var(--sp-4) var(--sp-10); margin-top: -64px; } .section { padding: var(--sp-8) var(--sp-3); } .cta-block { padding: var(--sp-10) var(--sp-3); } .about-hero, .contact-hero { padding: var(--sp-10) var(--sp-3) var(--sp-8); } .work-intro { padding-top: var(--sp-12); } .two-col, .two-col.wide-left, .two-col.wide-right, .two-col.bio-layout { grid-template-columns: 1fr; } .project-featured { grid-template-columns: 1fr; padding: var(--sp-4); } .project-grid { grid-template-columns: 1fr; } .site-footer { padding: var(--sp-8) var(--sp-3); } .site-footer .footer-content { flex-direction: column; gap: var(--sp-4); } /* Career table: stack rows. No content is hidden. */ .career-table, .career-table thead, .career-table tbody, .career-table tr, .career-table th, .career-table td { display: block; width: 100%; } .career-table thead { display: none; } .career-table tr { border-bottom: 1px solid var(--cream-deep); padding: var(--sp-3) 0; } .career-table td { border: 0; padding: 2px 0; } .career-table td:first-child { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--charcoal-soft); } .career-table td:nth-child(2) { font-family: var(--font-body); font-size: 15px; color: var(--charcoal-mid); margin-top: 2px; } .career-table .role-name { font-size: 18px; margin-top: 4px; } .career-table .current-row { border-left: 3px solid var(--gold); padding-left: var(--sp-2); } .career-table .current-row td { padding-left: 0; } .contact-quote-wrap { padding-top: var(--sp-2); } .contact-quote { max-width: none; } } /* ----- ACCESSIBILITY ----- */ *:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .skip-link { position: absolute; top: -100%; left: var(--sp-3); background: var(--gold); color: var(--charcoal); padding: var(--sp-2) var(--sp-3); font-family: var(--font-mono); font-size: 12px; text-decoration: none; z-index: 10001; border-radius: 0 0 4px 4px; } .skip-link:focus { top: 0; }