/* NaughtyRobot LLC — site styles. No build step; edit and refresh. One chassis (Archivo, 3px ink borders, hard shadows) with two moods: the naughty side (games: bright Square colours, red) and the robot side (Mich Software: Mich's pine slate and module colours, Georgia accents). */ :root { --ink: #111111; --paper: #ffffff; --paper-2: #f4f2ee; --muted: #555555; --red: #e8202a; --red-text: #c8141c; /* red that passes contrast as body-size text */ --yellow: #ffe500; /* Square Saga clan colours, sampled from SquareSquare.png */ --sq-red: #ec1c24; --sq-yellow: #fff200; --sq-orange: #f7941d; --sq-pink: #e287c0; --sq-green: #6dbe45; --sq-blue: #438cca; --sq-maroon: #5e3438; --sq-purple: #5e55a2; --sq-brown: #9e7248; /* Mich brand, from michmeansgift.com (assets/css/style.css) */ --slate: #3c4a4d; /* Pine Slate: Mich primary; always used as a background */ --slate-text: #3c4a4d; /* Pine Slate as text on the page ground */ --slate-wash: #eef2f1; --m-donors: #7c822e; --m-donations: #b91135; --m-pledges: #02b2b0; --m-designations: #2c817a; --m-campaigns: #bd9940; --m-events: #5c5a8a; --m-receipts: #c45c6a; --m-reports: #4a5c2a; --m-settings: #db842c; --font: "Archivo", "Helvetica Neue", Arial, sans-serif; --serif: Georgia, "Times New Roman", serif; --shadow: 6px 6px 0 var(--ink); --wrap: 72rem; --gutter: clamp(1rem, 4vw, 2.5rem); --accent: var(--red); /* switched per side below */ color-scheme: light; } /* Dark palette. It follows the device setting until the visitor flips the NR logo (the header theme switch), which stamps data-theme="light" or "dark" on and remembers it; keep the two blocks below identical. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #f3f1ec; --paper: #141414; --paper-2: #1d1d1d; --muted: #b8b5ae; --red: #ff4b52; --red-text: #ff6a70; --slate-text: #a9c0c4; --slate-wash: #1b2224; color-scheme: dark; } } :root[data-theme="dark"] { --ink: #f3f1ec; --paper: #141414; --paper-2: #1d1d1d; --muted: #b8b5ae; --red: #ff4b52; --red-text: #ff6a70; --slate-text: #a9c0c4; --slate-wash: #1b2224; color-scheme: dark; } .side-robot { --accent: var(--m-settings); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } img { max-width: 100%; height: auto; display: block; } [hidden] { display: none !important; } a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } a:hover { color: var(--red-text); } .side-robot a:hover { color: var(--slate-text); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } h1, h2, h3 { line-height: 1.05; margin: 0 0 .5em; font-weight: 900; font-stretch: 85%; letter-spacing: -.01em; } h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); text-transform: uppercase; } h3 { font-size: 1.4rem; } p { margin: 0 0 1.1em; } .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; } .prose { max-width: 68ch; } .lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); } .muted { color: var(--muted); } .skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 10; } .skip-link:focus { left: 1rem; top: 1rem; } .eyebrow { display: inline-block; margin-bottom: 1rem; padding: .25rem .6rem; background: var(--yellow); color: #111; font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; } .side-robot .eyebrow { background: var(--slate); color: #fff; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 3px solid var(--ink); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; padding-block: .75rem; } .brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 900; font-stretch: 90%; font-size: 1.6rem; letter-spacing: .02em; line-height: 1; } .brand a { text-decoration: none; } .brand:hover, .brand a:hover { color: inherit; } .brand svg { width: 2.6rem; height: auto; flex: none; display: block; } /* Header logo doubles as the light/dark switch: the red dot is the robot's eye. It brightens on hover and glows while the lights are off. */ .theme-toggle { padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; line-height: 0; } .nr-eye { transform-box: fill-box; transform-origin: center; transition: transform .2s ease, filter .2s ease; } .theme-toggle:hover .nr-eye, .theme-toggle:focus-visible .nr-eye { transform: scale(1.35); filter: drop-shadow(0 0 2px #ff2a33); } :root[data-theme="dark"] .theme-toggle .nr-eye { filter: drop-shadow(0 0 1.5px #ff2a33) drop-shadow(0 0 4px #ff2a33); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .nr-eye { filter: drop-shadow(0 0 1.5px #ff2a33) drop-shadow(0 0 4px #ff2a33); } } .theme-toggle:active svg { transform: scale(.92); } .nav { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; } .nav a { display: block; padding: .45rem .8rem; font-weight: 700; text-decoration: none; border: 2px solid transparent; } .nav a:hover { border-color: var(--ink); color: inherit; } .nav a[aria-current="page"] { background: var(--ink); color: var(--paper); } @media (max-width: 40rem) { .site-header { position: static; } .site-header .wrap { justify-content: center; } .nav { width: 100%; justify-content: center; } .nav a { padding: .4rem .55rem; font-size: .95rem; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.3rem; background: var(--ink); color: var(--paper); font-weight: 800; text-decoration: none; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--red); transition: transform .12s ease, box-shadow .12s ease; } .btn:hover { color: var(--paper); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--red); } .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--red); } .btn-ghost { background: var(--paper); color: var(--ink); } .btn-ghost:hover { color: var(--ink); } .side-robot .btn { background: var(--slate); border-color: var(--slate); color: #fff; box-shadow: 4px 4px 0 var(--m-settings); } .side-robot .btn:hover { color: #fff; box-shadow: 6px 6px 0 var(--m-settings); } .side-robot .btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--ink); } .side-robot .btn-ghost:hover { color: var(--ink); } .actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; } /* ---------- Home hero: "Part naughty. Part robot." ---------- */ .hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); } .hero h1 { font-size: clamp(2.6rem, 8vw, 6.4rem); font-stretch: 80%; text-transform: uppercase; line-height: .95; margin-bottom: 1.25rem; } /* NAUGHTY and ROBOT are set to the same width: site.js measures both [data-word]s and letter-spaces the shorter one to match. The .26em is a close no-JS fallback. */ .hero h1 .naughty, .hero h1 .robot { display: inline-block; white-space: nowrap; } .hero h1 [data-word] { display: inline-block; } .hero h1 .naughty { color: var(--red); } .hero h1 .robot { color: var(--slate-text); } .hero h1 .robot [data-word] { letter-spacing: .26em; margin-right: -.26em; } .hero .lead { max-width: 52ch; } /* The two doors. Each door is a subgrid over the same five rows (tag, art, title, text, link), so the two sides line up row for row whatever their text lengths. */ .doors { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); margin-top: clamp(2rem, 5vw, 3rem); border: 3px solid var(--ink); box-shadow: var(--shadow); } .door { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 1.25rem; padding: clamp(1.5rem, 3.5vw, 2.5rem); } .door + .door { border-left: 3px solid var(--ink); } .door-tag { justify-self: start; padding: .2rem .55rem; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--paper); } .door h2 { margin: 0; font-size: clamp(1.7rem, 3.2vw, 2.4rem); } .door p { margin: 0; } .door-link { align-self: end; font-weight: 800; text-decoration: none; } .door .door-link:hover { color: inherit; } .door-link::after { content: ""; position: absolute; inset: 0; } /* whole door is the link */ .door-link span { color: var(--accent); } .door:hover .door-link span { display: inline-block; transform: translateX(4px); } /* Both door pictures are the same 14rem square with the same 6px shadow. */ .door-art { display: flex; align-items: center; justify-content: center; padding-block: .5rem; } .door .door-art > * { width: 14rem; max-width: 100%; aspect-ratio: 1; } .door-games { background: var(--paper); } .door-games .faces { box-shadow: 6px 6px 0 var(--ink); } .door-mich { background: var(--slate); color: #fff; } .door-mich .door-tag { background: #fff; color: var(--slate); } .door-mich .mich-word { width: 7.5rem; height: auto; } .door-mich p { color: #dfe7e6; } .door-mich .door-link span { color: var(--m-settings); } .door-mich a:focus-visible { outline-color: #fff; } @media (max-width: 48rem) { .doors { grid-template-columns: 1fr; } .door + .door { border-left: 0; border-top: 3px solid var(--ink); } } @media (max-width: 20rem) { .door .door-art > * { width: 100%; } } /* ---------- Square faces (pupils follow the pointer, see site.js) ---------- */ .faces { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); } .face { position: relative; aspect-ratio: 1; background: var(--c); } .face .eye { position: absolute; top: 22%; width: 26%; aspect-ratio: 1; background: #fff; display: grid; place-items: center; transition: transform .08s ease-in; } .face .eye:first-child { left: 17%; } .face .eye:nth-child(2) { right: 17%; } .face .eye i { position: relative; width: 64%; aspect-ratio: 1; background: #111; transform: translate(var(--px, 0px), var(--py, 0px)); } .face .eye i::after { content: ""; position: absolute; left: 16%; top: 16%; width: 28%; aspect-ratio: 1; background: #fff; } .face .mouth { position: absolute; left: 50%; top: 64%; width: 13%; aspect-ratio: 1; background: #111; translate: -50% 0; } .face.blink .eye { transform: scaleY(.12); } /* ---------- Receipt illustration (robot side) ---------- */ .receipt { display: flex; flex-direction: column; justify-content: space-between; padding: .9rem 1rem .8rem; background: #fff; color: #2b2b2b; border: 3px solid #111; box-shadow: 6px 6px 0 var(--m-settings); font-size: .8rem; overflow: hidden; } .receipt-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid #111; padding-bottom: .5rem; } .receipt-head img { width: 3.6rem; } .receipt-head span { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; } .receipt-rows { display: grid; grid-template-columns: auto 1fr auto; gap: .3rem .4rem; align-items: baseline; } .receipt-rows span { color: #6b6b6b; } .receipt-rows i { border-bottom: 2px dotted #c9c9c9; transform: translateY(-.25em); } .receipt-rows b { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .receipt-foot { padding-top: .55rem; border-top: 2px solid #111; font-family: var(--serif); font-style: italic; display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .receipt-foot .stamp { width: 1.9rem; aspect-ratio: auto; flex: none; border-width: 2px; box-shadow: none; grid-template-columns: 1fr; } /* ---------- Sections ---------- */ .section { padding-block: clamp(3rem, 7vw, 5rem); } .section-alt { background: var(--paper-2); border-block: 3px solid var(--ink); } .section-slate { background: var(--slate-wash); border-block: 3px solid var(--ink); } .section-head { max-width: 60ch; margin-bottom: 2rem; } /* ---------- Naughty / robot matrix ---------- */ .matrix { display: grid; grid-template-columns: minmax(10rem, .7fr) 1fr 1fr; border: 3px solid var(--ink); box-shadow: var(--shadow); background: var(--paper); } .matrix > * { padding: 1.25rem 1.4rem; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); } .matrix > :nth-child(3n) { border-right: 0; } .matrix > :nth-last-child(-n + 3) { border-bottom: 0; } .mx-colhead { font-weight: 900; font-stretch: 80%; font-size: 1.6rem; text-transform: uppercase; line-height: 1; } .mx-colhead small { display: block; margin-top: .35rem; font-size: .8rem; font-weight: 700; font-stretch: 100%; letter-spacing: .08em; color: var(--muted); } .mx-colhead.naughty { color: var(--red); } .mx-colhead.robot { color: var(--slate-text); } .mx-rowhead { display: flex; flex-direction: column; justify-content: center; gap: .6rem; font-weight: 900; font-stretch: 85%; font-size: 1.25rem; text-transform: uppercase; line-height: 1.1; background: var(--paper-2); } .mx-rowhead img { width: 2.75rem; border: 2px solid var(--ink); } .mx-cell p { margin: 0; } .mx-label { display: none; } .mx-cell.naughty { background: linear-gradient(var(--red), var(--red)) left / 6px 100% no-repeat; } .mx-cell.robot { background: linear-gradient(var(--slate), var(--slate)) left / 6px 100% no-repeat; } @media (max-width: 48rem) { .matrix { grid-template-columns: 1fr; } .matrix > * { border-right: 0; border-bottom: 3px solid var(--ink) !important; } .matrix > :last-child { border-bottom: 0 !important; } .mx-corner, .mx-colhead { display: none; } .mx-rowhead { flex-direction: row; align-items: center; } .mx-label { display: block; font-weight: 900; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3rem; } .mx-cell.naughty .mx-label { color: var(--red-text); } .mx-cell.robot .mx-label { color: var(--slate-text); } } /* ---------- Inner page header ---------- */ .page-head { padding-block: clamp(2rem, 5vw, 3.5rem); border-bottom: 3px solid var(--ink); background: var(--paper-2); } .page-head .wrap { display: flex; align-items: center; gap: 1.25rem; } .page-head img { width: clamp(4rem, 9vw, 6rem); height: auto; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); flex: none; } .page-head h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); font-stretch: 75%; text-transform: uppercase; margin: 0; } .page-head p { margin: .35rem 0 0; color: var(--muted); font-weight: 600; } .side-robot .page-head { background: var(--slate); color: #fff; } .side-robot .page-head p { color: #dfe7e6; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.15rem; } .side-robot .page-head img { box-shadow: 4px 4px 0 var(--m-settings); border-color: #111; } .jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; } .jump a { display: block; padding: .3rem .7rem; border: 2px solid var(--ink); font-weight: 700; font-size: .95rem; text-decoration: none; background: var(--paper); } .jump a:hover { background: var(--ink); color: var(--paper); } /* ---------- Games ---------- */ .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.75rem; margin-top: 2rem; padding: 0; list-style: none; } .pillars li { padding: 1.5rem; border: 3px solid var(--ink); box-shadow: var(--shadow); background: var(--paper); } .pillars .big-f { display: block; font-size: 5rem; font-weight: 900; font-stretch: 75%; line-height: .9; color: var(--red); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; } .pillars h3 { text-transform: uppercase; margin-top: .75rem; } .pillars p { margin: 0; color: var(--muted); } .feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } @media (max-width: 52rem) { .feature-row { grid-template-columns: 1fr; } } .part { padding: 1.75rem; border: 3px solid var(--ink); box-shadow: var(--shadow); background: var(--paper); } .part .kicker { font-weight: 800; color: var(--red-text); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; margin-bottom: .25rem; } .part .square-art { width: 6rem; border: 3px solid var(--ink); margin-bottom: 1.25rem; } .gallery { margin-top: 1.5rem; } .gallery-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border: 3px solid var(--ink); box-shadow: var(--shadow); background: #111; scrollbar-width: none; } .gallery-track::-webkit-scrollbar { display: none; } .gallery-track figure { margin: 0; scroll-snap-align: start; } .gallery-track img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .gallery-track figcaption { padding: .6rem 1rem; background: var(--ink); color: var(--paper); font-weight: 700; font-size: .95rem; } .gallery-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem; } .gallery-controls button { width: 3rem; height: 3rem; font: inherit; font-size: 1.3rem; font-weight: 900; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); cursor: pointer; } .gallery-controls button:hover { background: var(--ink); color: var(--paper); } .gallery-controls button:disabled { opacity: .35; cursor: default; background: var(--paper); color: var(--ink); } .gallery-count { min-width: 5ch; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; } .note { font-size: .9rem; color: var(--muted); } /* ---------- Mich Software ---------- */ .shot { margin: 0; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--slate); background: #fff; } .shot figcaption { padding: .7rem 1rem; border-top: 3px solid var(--ink); background: var(--paper); color: var(--muted); font-size: .92rem; } .specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; } .specs li { padding: 1.1rem 1.25rem 1.1rem 1.4rem; background: var(--paper); border: 3px solid var(--ink); border-left: 10px solid var(--spine, var(--slate)); } .specs h3 { font-size: 1.15rem; font-stretch: 90%; margin-bottom: .3rem; } .specs p { margin: 0; color: var(--muted); font-size: .98rem; } .namecard { padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--slate); color: #fff; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--m-settings); } .namecard h2 { font-family: var(--serif); font-weight: 400; font-stretch: 100%; text-transform: none; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: 0; } .namecard h2 em { color: var(--m-settings); } .namecard p { color: #dfe7e6; } .namecard a { color: #fff; text-decoration-color: var(--m-settings); } .namecard a:hover { color: #fff; } .dots { display: flex; gap: .55rem; margin: 1.5rem 0 0; } .dots span { width: .9rem; height: .9rem; border-radius: 50%; background: var(--c); } .price-line { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; list-style: none; } .price-line li { flex: 1 1 13rem; padding: 1.1rem 1.25rem; border: 3px solid var(--ink); background: var(--paper); } .price-line strong { display: block; font-size: 1.35rem; font-weight: 900; font-stretch: 85%; text-transform: uppercase; } /* ---------- About ---------- */ .org { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.75rem; max-width: 48rem; margin: 0 auto; text-align: center; } .org-root { grid-column: 1 / -1; justify-self: center; padding: 1rem 1.75rem; background: var(--ink); color: var(--paper); font-weight: 900; font-stretch: 85%; font-size: 1.5rem; text-transform: uppercase; border: 3px solid var(--ink); } .org-root small { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .1em; opacity: .75; } .org-lines { grid-column: 1 / -1; height: 2.5rem; margin: 0 25%; border: 3px solid var(--ink); border-bottom: 0; position: relative; } .org-lines::before { content: ""; position: absolute; left: 50%; top: -3px; width: 3px; height: 1.25rem; background: var(--ink); translate: -50% -100%; } .org-node { padding: 1.25rem; border: 3px solid var(--ink); box-shadow: var(--shadow); background: var(--paper); text-decoration: none; display: block; } .org-node:hover { color: inherit; transform: translate(-2px, -2px); } .org-node .dba { display: block; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .org-node strong { display: block; font-size: 1.35rem; font-weight: 900; font-stretch: 85%; text-transform: uppercase; margin: .2rem 0; } .org-node.games strong { color: var(--red-text); } .org-node.mich { background: var(--slate); color: #fff; } .org-node.mich .dba { color: #c9d6d4; } .org-node.mich:hover { color: #fff; } /* Same subgrid trick as the home doors: heading, text and button rows line up across both cards. */ .contacts { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); column-gap: 1.75rem; } .contact { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding: 1.75rem; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: var(--yellow); color: #111; } .contact.mich { background: var(--slate); color: #fff; box-shadow: 6px 6px 0 var(--m-settings); } .contact h3 { text-transform: uppercase; } .contact p { margin-bottom: 1.25rem; } .contact .btn { align-self: end; justify-content: center; background: #111; color: #fff; border-color: #111; overflow-wrap: anywhere; text-align: center; } @media (max-width: 40rem) { .contacts { grid-template-columns: 1fr; row-gap: 1.75rem; } .contact { grid-template-rows: auto; grid-row: auto; display: block; } } .contact.mich .btn { background: #fff; color: var(--slate); border-color: #fff; box-shadow: 4px 4px 0 var(--m-settings); } /* ---------- 404 ---------- */ .lost { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); } .lost .faces { width: 12rem; grid-template-columns: 1fr; margin: 0 auto 2rem; } .lost h1 { font-size: clamp(3rem, 10vw, 6rem); font-stretch: 75%; text-transform: uppercase; } /* ---------- Footer ---------- */ .site-footer { background: #111; color: #f3f1ec; margin-top: auto; } .site-footer::before { content: ""; display: block; height: 10px; /* Left half: the Squares. Right half: Mich's module colours. */ background: linear-gradient(90deg, var(--sq-red) 0 5.55%, var(--sq-yellow) 0 11.1%, var(--sq-orange) 0 16.65%, var(--sq-pink) 0 22.2%, var(--sq-green) 0 27.75%, var(--sq-blue) 0 33.3%, var(--sq-maroon) 0 38.85%, var(--sq-purple) 0 44.4%, var(--sq-brown) 0 50%, var(--slate) 0 55.55%, var(--m-donors) 0 61.1%, var(--m-donations) 0 66.65%, var(--m-pledges) 0 72.2%, var(--m-designations) 0 77.75%, var(--m-campaigns) 0 83.3%, var(--m-events) 0 88.85%, var(--m-receipts) 0 94.4%, var(--m-settings) 0 100%); } .site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 2rem 1rem; } .site-footer .brand { font-size: 1.25rem; } .site-footer .brand svg { width: 2rem; } .site-footer .nav a[aria-current="page"] { background: #f3f1ec; color: #111; } .site-footer .nav a:hover { border-color: #f3f1ec; color: #f3f1ec; } .site-footer .legal { display: block; padding-block: 0 2rem; color: #b8b5ae; font-size: .875rem; } .site-footer a { color: inherit; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }