/* ========================================================================== Miracle Melodies Color rules: --rust-bright / --clay decorative only (rules, marks, numerals) --rust the only orange used on text and buttons Every text/background pair here is measured at >= 4.5:1 (3:1 for large). Motion: Reveal-on-scroll hidden states live behind `.js` so a visitor without JavaScript sees fully-rendered content. All motion is disabled under prefers-reduced-motion. ========================================================================== */ :root { --paper: #faf6f0; --paper-2: #f2e9dc; --paper-3: #e8dcc9; --ink: #17130f; --ink-soft: #221c17; /* hover state for ink surfaces */ --ink-2: #4a4139; --ink-3: #6d6157; --rust: #9a430c; --rust-bright: #e07a2c; --clay: #c2571a; --amber: #f0b985; /* links on ink — 8.6:1 */ --bone: #c9bdb1; /* body text on ink — 10:1 */ --rule: rgba(23, 19, 15, .14); --rule-light: rgba(255, 255, 255, .13); --display: "Hoefler Text", "Iowan Old Style", "Palatino Linotype", Palatino, Constantia, Georgia, serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ease: cubic-bezier(.16, .84, .44, 1); --shell: 78rem; } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; margin: 0; color: var(--ink); } h1 { font-size: clamp(2.75rem, 6.2vw, 5rem); line-height: .97; letter-spacing: -.028em; } h2 { font-size: clamp(1.85rem, 3.7vw, 3rem); line-height: 1.05; letter-spacing: -.022em; } h3 { font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.012em; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: var(--rust); } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* --- Motion --------------------------------------------------------------- */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .85s var(--ease), transform .85s var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } .js .reveal[data-delay="1"] { transition-delay: .1s; } .js .reveal[data-delay="2"] { transition-delay: .2s; } .js .reveal[data-delay="3"] { transition-delay: .3s; } /* Photos ease up out of a slight crop as they enter. */ .js .reveal-img img { transform: scale(1.06); transition: transform 1.2s var(--ease); } .js .reveal-img.is-in img { transform: scale(1); } /* Failsafe escape hatch — set by the inline script when main.js never checked in. Without this a failed script load leaves the page blank. */ .reveal-all .reveal, .reveal-all .reveal-img img { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal, .js .reveal-img img { opacity: 1 !important; transform: none !important; transition: none !important; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* --- Shell / grid --------------------------------------------------------- */ .shell { width: min(100% - 3rem, var(--shell)); margin-inline: auto; } .grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1.25rem, 3vw, 2.5rem); } .band { padding: clamp(3.25rem, 7vw, 6rem) 0; } .band--sand { background: var(--paper-2); } .band--ink { background: var(--ink); color: #ece5dc; } .band--tight { padding: clamp(2rem, 4vw, 3.25rem) 0; } .label { font-family: var(--sans); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rust); margin: 0 0 1.4rem; display: flex; align-items: center; gap: .75rem; } .label::after { content: ""; flex: 1; height: 1px; background: var(--rule); } .band--ink .label { color: var(--rust-bright); } .band--ink .label::after { background: var(--rule-light); } .band--ink a { color: var(--amber); } .band--ink a:hover { color: #fff; } .band--ink :focus-visible { outline-color: #fff; } .skip-link { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: .75rem 1.25rem; z-index: 100; } .skip-link:focus { left: 0; top: 0; } /* --- Header --------------------------------------------------------------- */ .masthead { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--rule); transition: box-shadow .35s var(--ease); } .masthead.is-stuck { box-shadow: 0 10px 30px -18px rgba(23, 19, 15, .5); } .masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .875rem 0; } .wordmark { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); } .wordmark img { width: 50px; mix-blend-mode: multiply; transition: transform .4s var(--ease); } .wordmark:hover img { transform: rotate(-4deg) scale(1.05); } .wordmark span { font-family: var(--display); font-size: 1.3125rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; } .wordmark small { display: block; font-family: var(--sans); font-size: .625rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-top: .3rem; } .nav ul { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; } .nav a { position: relative; text-decoration: none; color: var(--ink-2); font-size: .8125rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; padding: .3rem 0; transition: color .25s var(--ease); } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--clay); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .nav a:hover { color: var(--ink); } .nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); } .nav a[aria-current] { color: var(--ink); } .nav-toggle { display: none; background: none; border: 1px solid var(--rule); padding: .55rem .9rem; font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); cursor: pointer; transition: background-color .25s, border-color .25s; } .nav-toggle:hover { background: var(--paper-2); border-color: var(--ink-3); } /* --- Buttons -------------------------------------------------------------- */ .btn { display: inline-block; font-family: var(--sans); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: 1.05rem 2rem; border: 1px solid transparent; border-radius: 3px; transition: color .3s var(--ease), background-position .5s var(--ease), transform .3s var(--ease), box-shadow .35s var(--ease); } /* A darker shade wipes across on hover: a two-stop gradient sized at 220% and slid from one end to the other, so the effect needs no extra markup. background-color repeats the resting fill underneath — if the gradient ever fails to paint, the button is still rust rather than white-on-cream. */ .btn--solid { color: #fff; background-color: var(--rust); background-image: linear-gradient(to right, #7a350a 50%, var(--rust) 50%); background-size: 220% 100%; background-position: 100% 0; } .btn--solid:hover { color: #fff; background-position: 0 0; transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(154, 67, 12, .75); } .btn--solid:active { transform: translateY(0); box-shadow: none; } .arrow { display: inline-flex; align-items: baseline; gap: .5rem; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rust-bright); padding-bottom: .2rem; transition: border-color .25s var(--ease), color .25s var(--ease); } .arrow::after { content: "\2192"; color: var(--rust); transition: transform .3s var(--ease); } .arrow:hover { border-bottom-color: var(--ink); } .arrow:hover::after { transform: translateX(6px); } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; margin-top: 2.25rem; } /* --- Hero ----------------------------------------------------------------- */ /* Deliberately tight to the masthead — a tall empty gap here reads as a template. */ .hero { padding: clamp(1.75rem, 3.4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem); } .hero__grid { align-items: center; } .hero__text { grid-column: 1 / span 6; } .hero h1 { margin-bottom: 1.4rem; } .hero h1 em { font-style: italic; color: var(--rust); } .hero__intro { font-size: 1.1875rem; color: var(--ink-2); max-width: 32rem; } .hero__figure { grid-column: 8 / span 5; margin: 0; } .hero__figure .frame { overflow: hidden; box-shadow: 0 30px 60px -35px rgba(23, 19, 15, .65); } .hero__figure img { width: 100%; height: clamp(23rem, 40vw, 32rem); object-fit: cover; object-position: center 22%; } .hero__figure figcaption { font-family: var(--display); font-style: italic; font-size: .9375rem; color: var(--ink-3); margin-top: .85rem; padding-left: 1rem; border-left: 2px solid var(--rust-bright); } /* --- Interior page heading ------------------------------------------------ */ .pagehead { grid-column: 1 / span 9; } .pagehead h1 { font-size: clamp(2.25rem, 5vw, 3.8rem); } .pagehead__intro { grid-column: 1 / span 7; font-size: 1.1875rem; color: var(--ink-2); margin-top: 1.4rem; } /* --- Mission -------------------------------------------------------------- */ .mission { grid-column: 1 / span 8; } .mission__lead { font-family: var(--display); font-size: clamp(1.3rem, 2.5vw, 1.95rem); line-height: 1.32; letter-spacing: -.015em; color: var(--ink); } .mission__lead em { font-style: italic; color: var(--rust); } .mission__tag { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); font-family: var(--display); font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--ink-2); max-width: 40rem; } /* --- Editorial numbered list ---------------------------------------------- */ .entries { border-top: 1px solid var(--rule); } .entry { display: grid; grid-template-columns: 4.5rem 1fr; column-gap: clamp(1rem, 3vw, 2.5rem); padding: 2.1rem 1rem 2.1rem .75rem; margin-inline: -.75rem; border-bottom: 1px solid var(--rule); align-items: start; transition: background-color .4s var(--ease); } .entry:hover { background: rgba(23, 19, 15, .028); } .entry__num { font-family: var(--display); font-size: 2.25rem; line-height: 1; color: var(--clay); font-weight: 700; transition: transform .4s var(--ease); } .entry:hover .entry__num { transform: translateY(-3px); } .entry__body { display: grid; grid-template-columns: 1fr 1.35fr; column-gap: clamp(1rem, 3vw, 2.5rem); } .entry h3 { margin: 0; padding-right: 1rem; } .entry p { color: var(--ink-2); margin: 0; } @media (max-width: 52rem) { .entry { grid-template-columns: 2.75rem 1fr; } .entry__num { font-size: 1.6rem; } .entry__body { grid-template-columns: 1fr; row-gap: .5rem; } } /* --- Showcase (full-bleed photo with overlaid line) ----------------------- */ .showcase { position: relative; overflow: hidden; } .showcase img { width: 100%; height: clamp(19rem, 42vw, 30rem); object-fit: cover; object-position: center 30%; } /* Opacity is set so that even over a pure-white pixel the composite stays dark enough for white text: at .88 alpha over white the effective luminance is ~0.12, which is 6.1:1 against #fff. The text block never extends above the .88 stop. */ .showcase__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 8, 6, .95) 0%, rgba(10, 8, 6, .88) 28%, rgba(10, 8, 6, .42) 62%, rgba(10, 8, 6, .07) 100%); } .showcase__text { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: clamp(1.75rem, 4vw, 3rem); } .showcase__text p { font-family: var(--display); font-style: italic; font-size: clamp(1.3rem, 3vw, 2.15rem); line-height: 1.28; color: #fff; max-width: 36rem; margin: 0; } /* --- Photography ---------------------------------------------------------- */ figure { margin: 0; } .caption { font-family: var(--display); font-style: italic; font-size: .9375rem; color: var(--ink-3); margin-top: .8rem; } .band--ink .caption { color: #a89c8f; } .frame { overflow: hidden; } .steps-block { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); } /* Image one side, text the other. Replaces the old photo mosaic — with only two source photographs a grid of thumbnails just repeated itself. */ .split { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(1.75rem, 4.5vw, 4rem); align-items: center; } .split__media .frame { box-shadow: 0 26px 50px -32px rgba(23, 19, 15, .6); } .split__media img { width: 100%; height: clamp(19rem, 33vw, 26rem); object-fit: cover; object-position: center 24%; } .split__media figcaption { font-family: var(--display); font-style: italic; font-size: .9375rem; color: var(--ink-3); margin-top: .8rem; } .split__body h2 { margin-bottom: 1.1rem; } .split__body p { color: var(--ink-2); } @media (max-width: 52rem) { .split { grid-template-columns: 1fr; gap: 1.75rem; } .split__media img { height: 16rem; } } /* --- Disclaimer ----------------------------------------------------------- */ /* Sits under the positive statement rather than being framed as a warning. */ .disclaimer { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); } .disclaimer h4 { font-family: var(--sans); font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .55rem; } .disclaimer p { font-size: .9375rem; color: var(--ink-2); margin-bottom: .6em; } .disclaimer p:last-child { margin-bottom: 0; } /* --- Quote ---------------------------------------------------------------- */ .quote { grid-column: 2 / span 10; margin: 0; } .quote blockquote { margin: 0; font-family: var(--display); font-size: clamp(1.6rem, 3.5vw, 2.7rem); line-height: 1.19; letter-spacing: -.02em; text-indent: -.5em; } .quote figcaption { margin-top: 1.75rem; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a89c8f; } /* --- Founder's note ------------------------------------------------------- */ .founder { grid-column: 2 / span 10; margin: 0; } .founder blockquote { margin: 0 0 1.6rem; font-family: var(--display); font-size: clamp(1.5rem, 3.1vw, 2.35rem); line-height: 1.22; letter-spacing: -.02em; text-indent: -.5em; color: #fff; } .founder p { color: var(--bone); max-width: 42rem; font-size: 1.0625rem; } .founder__by { margin-top: 1.6rem; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a89c8f; } /* --- Prose ---------------------------------------------------------------- */ .prose { grid-column: 3 / span 8; } .prose--wide { grid-column: 2 / span 10; } .prose p { color: var(--ink-2); font-size: 1.09375rem; } .prose h2 { margin-top: 3rem; } .prose > h2:first-child { margin-top: 0; } .prose h2 + p { margin-top: 1.25rem; } .prose h3 { margin-top: 2.25rem; margin-bottom: .5rem; } .prose .drop::first-letter { font-family: var(--display); float: left; font-size: 3.9em; line-height: .82; padding: .05em .1em 0 0; color: var(--rust); } .aside { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 1.75rem 0; } .aside h3 { margin: 0 0 .6rem; } .aside p { color: var(--ink-2); margin-bottom: .8em; } .aside p:last-child { margin-bottom: 0; } .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); } @media (max-width: 46rem) { .cols-2 { grid-template-columns: 1fr; } } /* --- Involvement panels --------------------------------------------------- */ /* One dark surface, split by a hairline, rather than two clashing fills. Base declarations come before any modifier so nothing overrides them by source order at equal specificity. */ /* Light, so the page doesn't drop to black before the footer does. */ .panels { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); border-top: 1px solid var(--rule); } .panel { padding: clamp(2.5rem, 5vw, 4rem); display: flex; flex-direction: column; gap: 1rem; position: relative; transition: background-color .45s var(--ease); } .panel + .panel { border-left: 1px solid var(--rule); } .panel:hover { background: var(--paper-2); } .panel h2 { color: var(--ink); } .panel p { color: var(--ink-2); font-size: 1.0625rem; max-width: 26rem; } .panel .arrow { margin-top: auto; align-self: flex-start; } /* A thin accent bar so the two panels still read as distinct. */ .panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .panel:hover::before { transform: scaleX(1); } .panel--a::before { background: var(--rust-bright); } .panel--b::before { background: #4e9c93; } @media (max-width: 46rem) { .panels { grid-template-columns: 1fr; } .panel + .panel { border-left: 0; border-top: 1px solid var(--rule-light); } } /* --- Form embed ----------------------------------------------------------- */ .form-slot { border: 1px solid var(--rule); border-top: 3px solid var(--rust); background: #fff; padding: clamp(1.75rem, 4vw, 3rem); } .form-slot h3 { margin-bottom: .5rem; } .form-slot > p { color: var(--ink-2); max-width: 34rem; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem clamp(1.25rem, 3vw, 2rem); margin-top: 1.75rem; } .field { display: flex; flex-direction: column; gap: .45rem; } .field--full { grid-column: 1 / -1; } .field label { font-family: var(--sans); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .field .opt { font-weight: 600; letter-spacing: .06em; text-transform: none; color: var(--ink-3); } .field input, .field select, .field textarea { font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; padding: .8rem .9rem; width: 100%; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease); } .field textarea { min-height: 8rem; resize: vertical; } .field select { appearance: none; padding-right: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236d6157' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; background: #fff; border-color: var(--rust); box-shadow: 0 0 0 3px rgba(154, 67, 12, .16); } /* Keyboard users still get the standard ring on top of the styled state. */ .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .form-actions { margin-top: 1.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; } .form-note { font-size: .875rem; color: var(--ink-3); margin: 0; } /* Spam honeypot — hidden from people, left visible to bots. Not display:none, which some bots check for. */ .hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 46rem) { .form-grid { grid-template-columns: 1fr; } } /* --- Footer --------------------------------------------------------------- */ .site-footer { background: var(--ink); color: var(--bone); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: .9375rem; position: relative; z-index: 1; } .site-footer h2 { font-family: var(--sans); font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9d9186; margin: 0 0 1rem; } .site-footer a { color: var(--amber); text-decoration: none; transition: color .25s var(--ease); } .site-footer a:hover { color: #fff; } .site-footer :focus-visible { outline-color: #fff; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: .55rem; } .site-footer__top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: clamp(1.5rem, 4vw, 3rem); } .site-footer__mark { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; } .site-footer__mark img { width: 54px; background: #fff; padding: 4px 5px; } .site-footer__mark span { font-family: var(--display); font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing: -.02em; } .site-footer__blurb { color: var(--bone); max-width: 22rem; } .site-footer__where, .site-footer__status { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; color: #9d9186; /* 5.3:1 on ink */ } .site-footer__where { margin-top: .9rem; margin-bottom: .3rem; } .site-footer__status { margin-bottom: 0; } .site-footer__legal { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--rule-light); font-size: .8125rem; color: #9d9186; display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: end; } .site-footer__legal p { max-width: 52rem; margin: 0; } @media (max-width: 60rem) { .site-footer__top { grid-template-columns: 1fr 1fr; } .site-footer__legal { grid-template-columns: 1fr; } } @media (max-width: 40rem) { .site-footer__top { grid-template-columns: 1fr; } } /* --- Responsive ----------------------------------------------------------- */ @media (max-width: 64rem) { .hero__text, .hero__figure, .pagehead, .pagehead__intro, .mission, .quote, .founder, .prose, .prose--wide { grid-column: 1 / -1; } .hero__figure { margin-top: 2.25rem; } .hero__figure img { height: clamp(17rem, 50vw, 24rem); } } @media (max-width: 60rem) { /* No-JS: the toggle cannot work, so it is hidden and the nav stays open. The `js` class is set by an inline script in ; deleting it leaves a dead button. */ .masthead { position: static; } .js .masthead { position: sticky; } .masthead__inner { flex-wrap: wrap; } .nav-toggle { display: none; } .js .nav-toggle { display: block; } .nav { width: 100%; } .nav ul { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--rule); margin-top: .75rem; } .nav li { border-bottom: 1px solid var(--rule); } .nav a { display: block; padding: .9rem 0; } .nav a::after { display: none; } .nav a[aria-current] { color: var(--rust); } .js .nav { display: none; } .js .nav.is-open { display: block; } } @media (max-width: 30rem) { .wordmark img { width: 42px; } .wordmark span { font-size: 1.0625rem; } .wordmark small { font-size: .5625rem; letter-spacing: .13em; margin-top: .2rem; } .nav-toggle { padding: .5rem .7rem; font-size: .6875rem; } }