/* Meridian Commerce — front end. No framework dependency: the same checkout has to look right on Cassiopeia, Helix and whatever a customer's template happens to be. */ .mc-cart, .mc-checkout, .mc-order { max-width: 60rem; margin: 0 auto; } .mc-table-wrap { overflow-x: auto; } .mc-table { width: 100%; border-collapse: collapse; } .mc-table th, .mc-table td { padding: .6rem .5rem; text-align: left; border-bottom: 1px solid rgba(0,0,0,.1); } .mc-variant, .mc-sku { display: block; font-size: .8rem; opacity: .7; } .mc-qty { width: 4.5rem; padding: .3rem; } /* Low stock is stated on the line, not discovered at the payment page. */ .mc-stock { display: block; font-size: .78rem; color: #b45309; } .mc-totals { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1.5rem; max-width: 22rem; margin-left: auto; margin-top: 1rem; } .mc-totals dt { margin: 0; } .mc-totals dd { margin: 0; text-align: right; } .mc-grand { font-weight: 700; font-size: 1.1rem; border-top: 1px solid rgba(0,0,0,.15); padding-top: .4rem; } .mc-note { font-size: .85rem; opacity: .72; } .mc-notice { background: #fff8e1; border: 1px solid #ffe08a; padding: .5rem .7rem; border-radius: 5px; } .mc-empty { padding: 2rem 0; opacity: .7; } .mc-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; } .mc-btn { display: inline-block; padding: .55rem 1.1rem; border: 1px solid currentColor; border-radius: 5px; background: none; cursor: pointer; text-decoration: none; font: inherit; } .mc-btn--primary { background: #2a5db0; border-color: #2a5db0; color: #fff; } .mc-btn--lg { padding: .8rem 1.8rem; font-size: 1.05rem; } .mc-form fieldset { border: 1px solid rgba(0,0,0,.12); border-radius: 6px; padding: 1rem; margin: 0 0 1rem; } .mc-form legend { padding: 0 .4rem; font-weight: 600; } .mc-field { margin-bottom: .7rem; } .mc-field label { display: block; font-weight: 600; margin-bottom: .2rem; } .mc-field input { width: 100%; padding: .5rem .6rem; border: 1px solid rgba(0,0,0,.25); border-radius: 4px; font: inherit; } .mc-row { display: flex; gap: .8rem; flex-wrap: wrap; } .mc-row .mc-field { flex: 1 1 10rem; } .mc-check { display: flex; gap: .45rem; align-items: flex-start; margin: .3rem 0; } .mc-state { display: inline-block; padding: .25rem .7rem; border-radius: 999px; background: rgba(0,0,0,.07); font-size: .85rem; } .mc-state--paid { background: #e8f6ed; } .mc-state--pending { background: #fff8e1; } .mc-state--failed, .mc-state--cancelled { background: #fdecea; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── DONATION PAGE (2026-09-20) ──────────────────────────────────────────── Inherits the site's colours rather than declaring its own: this form renders inside whatever template the site runs, and a palette of its own would be wrong in most of them. Only LAYOUT and the things a bare form gets wrong - an invisible submit button on a dark page - are set here. */ .mc-donate { max-width: 46rem; margin: 0 auto; padding: 1rem 0 3rem; } .mc-donate__lede { font-size: 1.1em; opacity: .9; } .mc-donate__progress { margin: 1.25rem 0; } .mc-donate__bar { background: rgba(127, 127, 127, .25); border-radius: 999px; height: .75rem; overflow: hidden; } .mc-donate__bar > span { display: block; height: 100%; background: currentColor; } .mc-donate__figures { font-size: .95em; margin: .4rem 0 0; } .mc-donate__form { display: grid; gap: 1.25rem; margin-top: 1.5rem; } .mc-donate__form fieldset { border: 0; margin: 0; padding: 0; } .mc-donate__form legend { font-weight: 700; font-size: 1.05em; margin-bottom: .5rem; padding: 0; } .mc-donate__form label { display: block; margin: 0 0 .75rem; } .mc-donate__form label > span { display: block; font-size: .9em; margin-bottom: .2rem; } .mc-donate__form input[type="text"], .mc-donate__form input[type="email"], .mc-donate__form textarea, .mc-donate__form select { width: 100%; max-width: 28rem; padding: .5rem .6rem; border: 1px solid rgba(127, 127, 127, .45); border-radius: 4px; background: rgba(255, 255, 255, .92); color: #222; } /* AMOUNTS AS BUTTONS, not as a row of radio dots. The radio stays in the DOM for keyboard and for no-JavaScript; the label is what a reader clicks. */ .mc-donate__choices { display: flex; flex-wrap: wrap; gap: .5rem; } .mc-donate__choice { margin: 0 !important; } .mc-donate__choice input { position: absolute; opacity: 0; width: 0; height: 0; } .mc-donate__choice span { display: inline-block; padding: .55rem 1.1rem; cursor: pointer; border: 2px solid currentColor; border-radius: 999px; font-weight: 600; line-height: 1; } /* ⚠ THE SELECTED CHIP KEEPS ITS TEXT COLOUR. Filling it with `currentColor` and inverting made the label vanish - the selected amount was a grey blob, which is the one chip that must be readable. Selection is shown with a thicker ring and a neutral tint, so it works on a black site and a white one without naming a colour. */ .mc-donate__choice input:checked + span { box-shadow: inset 0 0 0 4px currentColor; background: rgba(127, 127, 127, .28); } .mc-donate__choice input:focus-visible + span { outline: 2px solid; outline-offset: 2px; } .mc-donate__recurrence label, .mc-check { display: inline-flex !important; align-items: center; gap: .4rem; margin-right: 1rem; } .mc-check span { display: inline !important; margin: 0 !important; } .mc-hint { display: block; opacity: .75; font-size: .8em; margin-top: .15rem; } /* ⚠ THE SUBMIT BUTTON IS GIVEN ITS OWN COLOURS. Left to the template it rendered as a dark rectangle on a dark page - invisible, on the one control the whole page exists for. */ .mc-btn--give { justify-self: start; cursor: pointer; padding: .8rem 2.2rem; font-size: 1.05em; font-weight: 700; border: 0; border-radius: 999px; background: #ffd012; color: #111; } .mc-btn--give:hover, .mc-btn--give:focus { background: #ffe066; color: #000; } .mc-donate__dedication summary { cursor: pointer; font-weight: 600; margin-bottom: .5rem; } .mc-donate__donors ul { list-style: none; padding: 0; } .mc-donate__donors li { padding: .5rem 0; border-bottom: 1px solid rgba(127, 127, 127, .25); } .mc-donate__gift { opacity: .8; margin-left: .5rem; } .mc-donate__donors blockquote { margin: .35rem 0 0; font-style: italic; opacity: .85; } @media (max-width: 40rem) { .mc-donate__choices { gap: .4rem; } .mc-donate__choice span { padding: .5rem .8rem; } } /* ── HOW THEY WANT TO GIVE ───────────────────────────────────────────────── A list of real choices, each with its own explanation. Stacked rather than in a row: the explanations are the useful part, and a row squeezes them into nothing. */ .mc-donate__methods { border: 1px solid rgba(0,0,0,.12); border-radius: 6px; padding: .6rem .8rem; margin: 1rem 0; } .mc-donate__methods legend { font-weight: 600; padding: 0 .3rem; } .mc-donate__method { display: grid; grid-template-columns: auto 1fr; gap: .1rem .5rem; align-items: baseline; padding: .4rem 0; cursor: pointer; } .mc-donate__method + .mc-donate__method { border-top: 1px solid rgba(0,0,0,.07); } .mc-donate__method input { grid-row: 1 / span 2; align-self: center; } .mc-donate__method-name { font-weight: 600; } .mc-donate__method .mc-hint { grid-column: 2; margin: 0; } /* ⚠ THE SECURITY LINE IS NOT DECORATION. It sits directly above the button that sends someone's money, which is the moment the question is asked. */ .mc-donate__secure { margin: .9rem 0; padding: .6rem .8rem; border-radius: 6px; background: rgba(0,0,0,.035); font-size: .9rem; line-height: 1.5; } .mc-donate__secure strong { display: block; } /* A gift the donor still has to send themselves. */ .mc-directed { margin: 1.2rem 0; padding: .9rem 1rem; border-radius: 6px; border: 2px solid rgba(0,0,0,.15); } .mc-directed__handle { font-size: 1.3rem; margin: .2rem 0 .6rem; } .mc-directed__open { display: inline-block; padding: .5rem 1.2rem; border-radius: 999px; background: #1c2647; color: #fff; text-decoration: none; font-weight: 600; } .mc-directed__note { margin-top: .6rem; font-size: .9rem; } /* ── WHAT THE GIFT SUPPORTS ──────────────────────────────────────────────── Shown only when the site owner chooses to publish the split. */ .mc-donate__split { margin: 1rem 0; padding: .7rem .9rem; border-radius: 6px; background: rgba(0,0,0,.035); font-size: .9rem; } .mc-donate__split ul { margin: .4rem 0 0; padding: 0; list-style: none; } .mc-donate__split li { display: flex; gap: .5rem; align-items: baseline; padding: .15rem 0; } .mc-donate__split-share { min-width: 3.5rem; font-weight: 700; font-variant-numeric: tabular-nums; } .mc-donate__split-site { opacity: .65; font-style: normal; font-size: .85em; } /* The thank you is the headline on a gift receipt; the reference follows it. */ .mc-order__thanks { margin: 0 0 .3rem; } .mc-order__thanks-note { margin: 0 0 .8rem; font-size: 1.05rem; } .mc-order__ref { margin: 0 0 1.2rem; font-size: .9rem; opacity: .75; } /* ── CROWDFUNDING ──────────────────────────────────────────────────────────*/ .mc-campaigns__grid { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .mc-campaign-card { padding: 1rem 1.1rem; border: 1px solid rgba(127,127,127,.3); border-radius: 8px; } .mc-campaign-card__title { margin: 0 0 .4rem; font-size: 1.1rem; } .mc-campaign-card__summary { margin: 0 0 .7rem; font-size: .92rem; opacity: .85; } .mc-campaign-card__figures { margin: .5rem 0 .8rem; font-size: .88rem; } .mc-campaign-card__give { display: inline-block; padding: .5rem 1.2rem; border-radius: 999px; background: #1c2647; color: #fff !important; font-weight: 700; text-decoration: none !important; font-size: .88rem; } .mc-campaign-card__give:hover { filter: brightness(1.15); } /* Reward tiers: a stack of choices, each explaining itself. */ .mc-rewards { border: 1px solid rgba(0,0,0,.12); border-radius: 6px; padding: .6rem .8rem; margin: 1rem 0; } .mc-rewards legend { font-weight: 600; padding: 0 .3rem; } .mc-reward { display: grid; grid-template-columns: auto auto 1fr; gap: .1rem .5rem; align-items: baseline; padding: .5rem 0; cursor: pointer; } .mc-reward + .mc-reward { border-top: 1px solid rgba(0,0,0,.07); } .mc-reward input { grid-row: 1 / span 3; align-self: center; } .mc-reward__amount { font-weight: 700; font-variant-numeric: tabular-nums; } .mc-reward__title { font-weight: 600; } .mc-reward__desc, .mc-reward__meta { grid-column: 2 / -1; font-size: .86rem; opacity: .8; } /* ⚠ A GONE TIER IS SHOWN, NOT HIDDEN: "the $25 one went" is information. */ .mc-reward--gone { opacity: .55; } .mc-reward--gone .mc-reward__title { text-decoration: line-through; } .mc-campaign__story, .mc-campaign__updates { margin: 2rem 0 0; } .mc-update { padding: .8rem 0; border-top: 1px solid rgba(127,127,127,.25); } .mc-update__title { margin: 0 0 .2rem; font-size: 1.05rem; } .mc-update__date { font-size: .82rem; opacity: .7; } /* The campaign's own picture. A fixed ratio on the card keeps a row even when the uploads are different shapes; the campaign page shows it whole. */ .mc-campaign-card__media { display: block; margin: -1rem -1.1rem .8rem; overflow: hidden; border-radius: 8px 8px 0 0; } .mc-campaign-card__media img { display: block; width: 100%; height: 170px; object-fit: cover; } .mc-donate__image { margin: 0 0 1.2rem; } .mc-donate__image img { display: block; max-width: 100%; height: auto; border-radius: 8px; } /* ── BROWSING A LOT OF APPEALS ───────────────────────────────────────────── Search and category sit above the grid and wrap on a phone rather than squeezing the search box to nothing. */ .mc-campaigns__filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0 .4rem; } .mc-campaigns__filters input[type="search"] { padding: .45rem .6rem; min-width: 14rem; } .mc-campaigns__filters select { padding: .45rem .5rem; } .mc-campaigns__filters button { padding: .45rem 1rem; } .mc-campaigns__clear { font-size: .85rem; } .mc-campaigns__count { margin: .2rem 0 0; font-size: .85rem; opacity: .75; } .mc-campaign-card__cat { margin: 0 0 .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .65; } @media (max-width: 34rem) { .mc-campaigns__filters input[type="search"] { min-width: 0; width: 100%; } } /* ── THE PLAN LIST ───────────────────────────────────────────────────────── The page a customer screenshots and quotes back at you, so the price and the period have to be unmissable and unambiguous. ⚠ NO FIXED COLOURS BEYOND A BORDER. This renders inside whatever template the site runs, and five of those templates are different; a card that paints its own background is a card that is invisible on one of them. The featured plan is marked by WEIGHT and a border, not by a brand colour. */ .mc-plans-title { margin: 0 0 .4rem; } .mc-plans-intro { margin: 0 0 1.4rem; opacity: .85; } .mc-plan-grid { display: grid; gap: 1rem; align-items: start; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .mc-plan { display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem; border: 1px solid currentColor; border-radius: 10px; opacity: .95; } .mc-plan-featured { border-width: 3px; opacity: 1; } .mc-plan-flag { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .mc-plan-name { margin: 0; font-size: 1.25rem; } /* The amount and the period are one sentence and must never be read apart: "$500" and "$500 per month" are different offers at the same number. */ .mc-plan-price { margin: .2rem 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; } .mc-plan-amount { font-size: 2rem; font-weight: 700; line-height: 1; } .mc-plan-period { font-size: .95rem; opacity: .8; } .mc-plan-compare { margin: 0; font-size: .85rem; opacity: .7; text-decoration: line-through; } .mc-plan-summary { margin: .2rem 0 0; } .mc-plan-detail { font-size: .92rem; } .mc-plan-detail ul { margin: .4rem 0; padding-left: 1.1rem; } /* ⚠ PUSHED TO THE BOTTOM so buttons line up across cards of different heights. A row of buttons at four different heights reads as four different kinds of thing. */ .mc-plan-buy { margin-top: auto; padding-top: .6rem; } .mc-plan-buy button { width: 100%; } .mc-plan-year { margin: .1rem 0 0; font-size: .8rem; opacity: .7; } .mc-plans-cart { margin: 1.4rem 0 0; } @media (max-width: 34rem) { .mc-plan-grid { grid-template-columns: 1fr; } .mc-plan-amount { font-size: 1.7rem; } }