/* ========================================================================== rachelvmadrigal.com — site styles Two pages share this stylesheet: index.html the homepage hire.html the resume-style page for hiring managers The nav, .pill buttons, and .badge are used by both; everything else is grouped by the section it styles. Layout notes: - All colors go through the CSS custom properties in :root. Change a color once there and it updates everywhere. Dark mode overrides the same names. - Theme resolution order: the OS preference (prefers-color-scheme) applies by default; a [data-theme] attribute on overrides it if ever set. ========================================================================== */ /* -------------------------------------------------------------------------- Fonts — self-hosted in assets/fonts/ so the site loads no third-party CDN -------------------------------------------------------------------------- */ @font-face { font-family: 'Fraunces'; /* headings */ font-style: normal; font-weight: 400 900; /* variable font: any weight in this range */ font-display: swap; src: url('../fonts/fraunces-variable.woff2') format('woff2'); } @font-face { font-family: 'Instrument Sans'; /* body copy */ font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/instrument-sans-variable.woff2') format('woff2'); } @font-face { font-family: 'La Belle Aurore'; /* the handwritten accent script */ font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/la-belle-aurore.woff2') format('woff2'); } /* -------------------------------------------------------------------------- Design tokens — every color in the site is named here -------------------------------------------------------------------------- */ :root { --cream: #f9efdf; --peach: #f4ddc0; --pinkband: #f3cede; --card: #fdf7ec; --ink: #3f1f33; --muted: #846071; --line: #e4cfb4; --coral: #c14526; --coral-deep: #a3341c; --pink: #ff1a88; --rose: #c81e4e; --yellow: #e3a23c; --berry: #7c2a4c; --berry-text: #f8e7ee; --shadow: 0 4px 14px rgba(63,31,51,.07); --focus: #ff4fa3; } @media (prefers-color-scheme: dark) { :root { --cream: #291423; --peach: #38202e; --pinkband: #3f2236; --card: #331b2b; --ink: #f6e7da; --muted: #c2a0b0; --line: #4c2d3f; --coral: #f07a52; --coral-deep: #ff8a63; --pink: #ff6cb5; --rose: #ff5c7f; --yellow: #e8b25c; --berry: #54203c; --berry-text: #f6e2eb; --shadow: 0 6px 18px rgba(0,0,0,.35); } } :root[data-theme="dark"] { --cream: #291423; --peach: #38202e; --pinkband: #3f2236; --card: #331b2b; --ink: #f6e7da; --muted: #c2a0b0; --line: #4c2d3f; --coral: #f07a52; --coral-deep: #ff8a63; --pink: #ff6cb5; --rose: #ff5c7f; --yellow: #e8b25c; --berry: #54203c; --berry-text: #f6e2eb; --shadow: 0 6px 18px rgba(0,0,0,.35); } :root[data-theme="light"] { --cream: #f9efdf; --peach: #f4ddc0; --pinkband: #f3cede; --card: #fdf7ec; --ink: #3f1f33; --muted: #846071; --line: #e4cfb4; --coral: #c14526; --coral-deep: #a3341c; --pink: #ff1a88; --rose: #c81e4e; --yellow: #e3a23c; --berry: #7c2a4c; --berry-text: #f8e7ee; --shadow: 0 4px 14px rgba(63,31,51,.07); } /* -------------------------------------------------------------------------- Base elements -------------------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } #ship, #about { scroll-margin-top: 112px; } #now { scroll-margin-top: 84px; } body { margin: 0; background: var(--cream); color: var(--ink); font: 16.5px/1.6 'Instrument Sans',system-ui,sans-serif; } a { color: var(--rose); text-decoration: none; } a:hover { text-decoration: underline; } a:focus-visible, button:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; border-radius: 6px; } .wrap { max-width: 1020px; margin: 0 auto; padding: 0 24px; } .script { font-family: 'La Belle Aurore',cursive; font-weight: 400; } h1, h2, h3, .frh { font-family: 'Fraunces',serif; } /* ====================================================================== Sticky top navigation ====================================================================== */ nav { position: sticky; top: 0; background: var(--cream); z-index: 9; border-bottom: 1px solid var(--line); } .navin { max-width: 1020px; margin: 0 auto; padding: 15px 24px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .logo { font-family: 'Fraunces',serif; font-weight: 700; font-size: 1.25rem; color: var(--ink); margin-right: auto; } .logo:hover { text-decoration: none; } .logo .dot { color: var(--pink); } .pdot { color: var(--pink); } nav a.nl { color: var(--ink); font-size: .95rem; font-weight: 500; } nav a.nl:hover { color: var(--coral); text-decoration: none; } .pill { display: inline-flex; align-items: center; gap: 8px; background: var(--coral); color: #fff8f0; border: none; border-radius: 999px; padding: 11px 24px; font-weight: 600; font-size: .95rem; cursor: pointer; transition: transform .15s ease,background .15s ease; } .pill:hover { background: var(--coral-deep); transform: translateY(-1px); text-decoration: none; color: #fff8f0; } nav .pill { padding: 9px 20px; } @media(max-width:640px) { .navin { gap: 14px; padding: 12px 16px; } .logo { flex-basis: 100%; margin-right: 0; } nav .pill { padding: 8px 16px; } } /* ====================================================================== Home hero: headline, lede, call-to-action buttons ====================================================================== */ .hero { padding: 60px 0 36px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; } @media(max-width:820px) { .hero { grid-template-columns: 1fr; padding-top: 10px; } .heroart { order: -1; } .hero .badge { display: none; } } .badge { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--ink); color: var(--ink); background: transparent; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; border-radius: 999px; padding: 7px 16px; margin-bottom: 22px; } .hero h1 { font-size: clamp(2.7rem,6.4vw,4.3rem); line-height: 1.02; font-weight: 800; margin: 0 0 20px; letter-spacing: -.015em; text-wrap: balance; } .hero h1 .script { color: var(--pink); font-size: 1.28em; line-height: .9; font-weight: 400; display: block; margin-bottom: -.3em; position: relative; z-index: 0; } .hero h1 .rest { position: relative; z-index: 1; } .hero .lede { font-size: 1.1rem; color: var(--muted); max-width: 30em; margin: 0 0 26px; } .ctas { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; } .cta-secondary { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .underlink { position: relative; color: var(--ink); font-weight: 600; } .underlink:hover { color: var(--coral); text-decoration: none; } .underlink svg { position: absolute; left: 0; bottom: -9px; width: 100%; height: 8px; } /* ====================================================================== Hero photo: rounded photo, spinning "Everything is buildable" stamp ====================================================================== */ .heroart { position: relative; display: flex; justify-content: center; padding: 20px 0; } .photowrap { position: relative; width: min(430px,94%); overflow: hidden; border-radius: 0 0 50% 50% / 0 0 11% 11%; } /* The pink circle behind the photo. Geometry (size, position) measured off the original rachel.webp photo, where a pink ring used to be baked into the pixels. */ .photocircle { position: absolute; width: 84.5%; aspect-ratio: 1; top: 3.75%; left: 9.5%; border-radius: 50%; background: var(--pink); opacity: .8; /* light mode only; full opacity in dark mode below */ } @media (prefers-color-scheme: dark) { .photocircle { opacity: 1; } } :root[data-theme="dark"] .photocircle { opacity: 1; } .mephoto { position: relative; width: 100%; height: auto; display: block; } .stamp { position: absolute; width: 98px; height: 98px; right: 2%; bottom: 0; z-index: 3; filter: drop-shadow(0 4px 10px rgba(63,31,51,.2)); } .stamp text { font-family: 'Instrument Sans',sans-serif; font-weight: 700; } @media (prefers-reduced-motion: no-preference) { .heroart .stamp { animation: spin 24s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } } /* ====================================================================== Wavy section dividers and the colored bands between them ====================================================================== */ .wave { display: block; width: 100%; height: 52px; margin-bottom: -1px; } .wave svg { display: block; width: 100%; height: 100%; } .band { padding: 14px 0 64px; } .band-pink { background: var(--berry); } .band-pink .bandtitle { color: var(--berry-text); } .band-pink .eyebrow { color: var(--yellow); } .band-peach { background: var(--peach); } /* The base coral eyebrow color is short of AA on the peach band, so this spot alone uses --coral-deep instead. */ .band-peach .eyebrow { color: var(--coral-deep); } .eyebrow { display: block; text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--coral); margin: 0 0 10px; } .bandtitle { text-align: center; font-size: clamp(1.9rem,4vw,2.6rem); font-weight: 800; margin: 0 0 36px; letter-spacing: -.01em; } h2.left { text-align: left; } /* ====================================================================== Home: "Things I've shipped" cards ====================================================================== */ .cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } @media(max-width:820px) { .cards { grid-template-columns: 1fr; } } .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; position: relative; } .card .top { height: 120px; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces',serif; font-weight: 800; border-bottom: 1px solid var(--line); } .top-a { background: #e8b25c; color: #57230f; font-size: 2.3rem; } .top-b { background: #e9aec7; color: #6d1f3e; font-size: 2.2rem; } .top-c { background: #d95f3b; color: #fbeadc; font-size: 1.55rem; } :root[data-theme="dark"] .top-a { background: #8a5f22; color: #ffe9c4; } :root[data-theme="dark"] .top-b { background: #7c3a56; color: #ffdcea; } :root[data-theme="dark"] .top-c { background: #8a3a1e; color: #ffd9c4; } .card .body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .tag { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); } .card h3 { font-size: 1.2rem; font-weight: 700; margin: 0; } .card p { margin: 0; color: var(--muted); font-size: .93rem; flex: 1; } .gobtn { align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; background: var(--coral); color: #fff8f0; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: transform .15s; } .gobtn:hover { transform: translateX(3px); text-decoration: none; color: #fff8f0; } :root[data-theme="dark"] .livesticker { background: var(--yellow); color: #3a1c0a; } /* ====================================================================== Home: "What I'm building in public" ====================================================================== */ .now { padding: 64px 0 70px; } .cols3 { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 34px; margin-top: 8px; margin-inline: auto; } @media(max-width:820px) { .cols3 { grid-template-columns: 1fr; } } .iconcirc { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.35rem; border: 1.5px solid var(--ink); color: var(--ink); background: transparent; } .icon-a { background: var(--yellow); border-color: transparent; color: #57230f; font-size: 1.8rem; /* the ◆ glyph renders small for its em box */ padding-bottom: 4px; /* the font draws ◆ low in its em box; recenter the ink */ } .icon-b { background: var(--pinkband); border-color: transparent; color: var(--berry); } @media (prefers-color-scheme: dark) { .icon-b { background: #7c3a56; color: #ffdcea; } } :root[data-theme="dark"] .icon-b { background: #7c3a56; color: #ffdcea; } .icon-c { background: var(--coral); border-color: transparent; color: #fff8f0; font-size: 1.05rem; font-weight: 700; font-family: ui-monospace,'SF Mono',Menlo,monospace; } .cols3 h3 { text-align: center; font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; } .cols3 p { text-align: center; color: var(--muted); font-size: .94rem; margin: 0; max-width: 30em; margin-inline: auto; } /* ====================================================================== Home: about section ====================================================================== */ .aboutgrid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; } @media(max-width:820px) { .aboutgrid { grid-template-columns: 1fr; } } .aboutgrid p { color: var(--ink); } .aboutgrid .soft { color: var(--muted); } .quote { font-family: 'Fraunces',serif; font-weight: 700; font-size: 1.5rem; line-height: 1.3; margin: 22px 0; text-wrap: balance; } .quote .script { color: var(--rose); font-weight: 400; font-size: 1.4em; } .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .chip { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; font-size: .88rem; font-weight: 600; transform: rotate(-1deg); } .chip:nth-child(2n) { transform: rotate(1deg); } .chip .h { color: var(--pink); } /* ====================================================================== Home: contact section ====================================================================== */ .contact { padding: 80px 0 60px; text-align: center; } .contact .script { display: block; font-size: 3.6rem; color: var(--pink); margin-bottom: -2.8rem; position: relative; z-index: 0; } .contact h2 { position: relative; z-index: 1; } .contact h2 { font-size: clamp(1.9rem,4vw,2.5rem); margin: 0 0 14px; } .contact p { color: var(--muted); max-width: 44em; margin: 0 auto 26px; } /* ====================================================================== hire.html and projects/*.html — the resume-style page for hiring managers, and the project case-study pages that share its layout ====================================================================== */ .hire-hero { padding: 64px 0 30px; max-width: 760px; } .hire-hero h1 { font-size: clamp(2.3rem,5.4vw,3.4rem); line-height: 1.05; font-weight: 800; margin: 0 0 18px; letter-spacing: -.01em; text-wrap: balance; } .hire-hero h1 .script { color: var(--pink); font-size: 1.28em; font-weight: 400; } .hire-hero .lede { font-size: 1.1rem; color: var(--muted); margin: 0; } .prooflist { display: grid; gap: 24px; margin: 40px 0; } .proof { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 26px 30px; } .proof h3 { font-size: 1.35rem; font-weight: 800; margin: 0 0 2px; } .proof .role { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--coral); font-weight: 700; margin: 0 0 12px; } .proof ul { margin: 0; padding-left: 20px; } .proof li { margin: 7px 0; max-width: 72ch; } .proof li::marker { color: var(--coral); } .keywords { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--coral); font-weight: 400; } /* On the case-study page the keywords sit inside the hero header under the lede, so they drop the hairline separator the in-card lines use */ .hire-hero .keywords { border-top: 0; padding-top: 0; } .proof code { font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: .85em; background: var(--peach); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; white-space: nowrap; } /* Current projects: a proof card ahead of the work history, tinted like the CTA box so it reads as "now" rather than another resume entry */ .current { background: var(--peach); margin: 40px 0; } .repolink { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 8px; vertical-align: -4px; color: var(--ink); font-weight: 700; font-size: .92rem; text-decoration: none; } .repolink:hover { color: var(--coral); } .cta { background: var(--peach); border: 1px solid var(--line); border-radius: 16px; padding: 34px 36px; margin: 40px 0 56px; text-align: center; } .cta .frh { font-size: 1.5rem; font-weight: 800; display: block; margin-bottom: 6px; } .cta p { color: var(--muted); margin: 0 0 20px; } .cta .links { margin-top: 16px; font-size: .92rem; } .social-links { display: inline-flex; align-items: center; gap: 16px; } .social-links a { display: inline-flex; color: var(--ink); } .social-links a:hover { color: var(--coral); } .social-links svg { width: 22px; height: 22px; } /* Inside the hire-page CTA the icons sit on their own row, centered below the email pill, rather than inline like in the homepage hero */ .cta .social-links { display: flex; justify-content: center; margin-top: 18px; } /* ====================================================================== Entrance animations — skipped entirely for visitors who ask their OS to reduce motion ====================================================================== */ @media (prefers-reduced-motion: no-preference) { .hero > div > * { animation: rise .55s ease backwards; } .hero .badge { animation-delay: .05s; } .hero h1 { animation-delay: .12s; } .hero .lede { animation-delay: .2s; } .hero .ctas { animation-delay: .28s; } .hero .linkrow { animation-delay: .34s; } .heroart { animation: pop .6s ease backwards .2s; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes pop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } } } /* ====================================================================== Small utilities — these replace what used to be inline style attributes. Defined last so they override the section rules above. ====================================================================== */ /* A wave divider flipped upside down to close off a band */ .wave-flip { transform: scaleY(-1); } /* Left-aligned variants of the normally centered band headings */ .eyebrow-left { text-align: left; } .bandtitle.tight { margin-bottom: 18px; } /* Handwritten accent in the hot pink instead of inheriting the text color */ .script-pink { color: var(--pink); }