/* The Well — painted by the block. Deep AfriCOBRA jewel pigment (brick, marigold, garden, cobalt, grape, raspberry) knocked back to live on warm cream paper, anchored by soft charcoal, all of it floating on a Takuma navy night ground. Geometry is intentional, never confetti: it marks function — category, picked, rank, the funded line, a section's edge. */ @font-face { font-family: 'Ciscela'; src: url("/assets/Ciscela-Regular-21d9af5f.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url("/assets/IBMPlexSans-Regular-64251e64.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url("/assets/IBMPlexSans-SemiBold-99b2fa32.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url("/assets/IBMPlexSans-Bold-8e5326da.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url("/assets/IBMPlexMono-Medium-3f7bbac1.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url("/assets/IBMPlexMono-Bold-e35453d6.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* the night ground */ --navy: #0A152B; --navy-2: #102545; --phasealert-h: 58px; /* the phase banner's fixed height (see .phasealert) */ --onnavy: #F1F0EB; /* cream text on navy */ --slate: #9CADC2; /* muted text on navy */ /* Neutral paper + charcoal; gold stays reserved for actions and emphasis. */ --cream: #F6F5F2; --cream-2: #EAE8E2; /* recessed / picked face */ --sand: #D9D6CC; --black: #1C1714; /* soft charcoal — lines, type, anchor */ --ink: #241C14; /* body text on paper */ --stone: #6E635A; /* secondary text on paper */ --line: rgba(28, 23, 20, .26); --hairline: rgba(241, 240, 235, .18); /* ruled lines on navy */ /* grounded AfriCOBRA — each hue has a job */ --violet: #553781; /* grape — payoff, shapes */ --cobalt: #245C8C; /* civic, water */ --teal: #2A7268; /* backers */ --green: #2E6649; /* garden — picked, services */ --yellow: #DB972A; /* marigold — events, totals, new */ --orange: #BE5328; /* burnt orange — warm accent */ --magenta: #9A3354; /* raspberry — other, eyebrows */ --red: #A93F2B; /* brick — places, the well's own color */ /* water, light to deep — the funded layers */ --water-1: #3E84B0; --water-2: #2A6699; --water-3: #1C4B73; --water-4: #163D5E; --water-5: #102E48; --soft: 0 14px 30px -16px rgba(22, 17, 13, .5), 0 5px 12px -8px rgba(22, 17, 13, .3); --soft-lift: 0 24px 46px -18px rgba(22, 17, 13, .56), 0 8px 16px -10px rgba(22, 17, 13, .34); --display: 'Ciscela', Georgia, 'Times New Roman', serif; --body: 'IBM Plex Sans', Helvetica, Arial, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; /* surface-aware text: navy ground by default, flipped on paper */ --t-text: var(--onnavy); --t-muted: var(--slate); --t-head: var(--onnavy); --t-eyebrow: var(--yellow); } /* paper surfaces — anything cream flips the text register to charcoal */ .deck__face, .flatcard, .card, .budget, dialog.sheet, .desktop, .cd__flyer { --t-text: var(--ink); --t-muted: var(--stone); --t-head: var(--black); --t-eyebrow: var(--magenta); color: var(--t-text); } * { box-sizing: border-box; margin: 0; padding: 0; } /* The Well paints its own dark ground, but its form controls are light cream paper. Pin the UA to the LIGHT scheme so Dark Mode can't repaint autofilled fields and native controls near-black (a background CSS can't override) — the "autofill turns the code box / button black" bug. Belt to the in . */ html { color-scheme: light; } html, body { color: var(--t-text); font-family: var(--body); line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100dvh; background: url("/assets/fabric-dark-fdd85efc.png") repeat, radial-gradient(110% 70% at -10% 108%, rgba(42, 114, 104, .26), transparent 55%), var(--navy); background-size: 220px auto, auto, auto; } img { max-width: 100%; } a { color: inherit; } /* a breath of night over the tippy top — content scrolls clean off the screen through a slight fade instead of a hard edge */ body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 58; height: calc(22px + env(safe-area-inset-top)); pointer-events: none; background: linear-gradient(to bottom, var(--navy) calc(20% + env(safe-area-inset-top)), transparent); } /* faint paper tooth over everything */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: .09; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } /* ---- the app shell ---- A phone-first product: one column, full width on mobile, centered on desktop. */ .app { max-width: 480px; margin: 0 auto; padding: calc(42px + env(safe-area-inset-top)) 20px 44px; min-height: 100dvh; display: flex; flex-direction: column; } .app--tabbed { padding-bottom: calc(100px + env(safe-area-inset-bottom)); } /* flash messages — a marigold stamp that rises, says its piece, and goes */ #flash { position: fixed; left: 50%; transform: translateX(-50%); z-index: 60; width: calc(100% - 24px); max-width: 440px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; bottom: calc(12px + env(safe-area-inset-bottom)); } #flash.is-docked { bottom: calc(104px + env(safe-area-inset-bottom)); } .flash { background: var(--yellow); color: var(--black); font-size: 14px; font-weight: 700; padding: 12px 14px; text-align: center; pointer-events: auto; cursor: pointer; border: 2px solid var(--black); box-shadow: 3px 3px 0 var(--black); animation: flash-in .28s ease-out; transition: opacity .35s ease, transform .35s ease; } .flash--alert { background: var(--red); color: #fff; } /* The phase-change banner: a marigold-edged bar at the top of the app that says the season moved on (voting opened, the block decided). Its CTA loads the fresh screen, which is also how a PWA with no refresh button catches up. */ /* One fixed-height line, never a wrap: the portal below is position:fixed, so the banner's height must be a number the portal can move down by (see the body:has rules at the portal). Long text ellipsizes; the bold lead survives. */ .phasealert { position: sticky; top: 0; z-index: 59; display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; height: calc(var(--phasealert-h) + env(safe-area-inset-top)); box-sizing: border-box; padding: env(safe-area-inset-top) 14px 0 18px; background: var(--navy-2); border-bottom: 2px solid var(--yellow); } .phasealert__txt { flex: 1; min-width: 0; font-size: 14px; color: var(--onnavy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .phasealert .btn { flex: 0 0 auto; margin: 0; padding: 8px 14px; font-size: 14px; } .flash.is-leaving { opacity: 0; transform: translateY(10px); } @keyframes flash-in { from { opacity: 0; transform: translateY(14px); } } /* the bottom tab bar, pinned to the viewport */ .apptabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; border-top: 1px solid var(--hairline); background: rgba(13, 26, 51, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding-bottom: env(safe-area-inset-bottom); } .apptabs__inner { max-width: 480px; margin: 0 auto; display: flex; } .apptab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 0 13px; text-decoration: none; color: var(--slate); font-size: 10px; font-weight: 700; letter-spacing: .04em; transition: color .12s ease; } .apptab__icon { width: 23px; height: 23px; } .apptab__ava { width: 23px; height: 23px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 1.5px solid currentColor; } .apptab__ava--txt { font-size: 9px; font-weight: 800; letter-spacing: .02em; } .apptab:hover { color: var(--onnavy); } .apptab.is-on { color: var(--yellow); } /* admin runs desktop-wide, on its own sheet of paper */ .desktop { max-width: 1020px; margin: 26px auto 40px; padding: 26px 30px 34px; background: var(--cream); border-radius: 2px; box-shadow: var(--soft-lift); } /* ---- type ---- */ h1 { font-family: var(--display); font-size: 32px; line-height: 1.04; font-weight: 400; letter-spacing: -.01em; color: var(--t-head); margin-bottom: 10px; } h2 { font-size: 19px; font-weight: 700; color: var(--t-head); } h3 { font-size: 15px; font-weight: 700; color: var(--t-head); } p { margin-bottom: 10px; } .eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--t-eyebrow); margin-bottom: 6px; } .muted { color: var(--t-muted); } .small { font-size: 12px; } .lede { font-size: 17px; } .big { font-size: 22px; font-weight: 800; } /* ---- layout helpers ---- */ .row { display: flex; align-items: center; gap: 10px; } .between { justify-content: space-between; } .stack > * + * { margin-top: 12px; } .spacer { flex: 1; } .divider { border-top: 1px solid var(--hairline); margin: 26px 0; } .desktop .divider { border-top-color: var(--line); } .cap { font-size: 11px; color: var(--slate); text-align: center; margin-top: 8px; letter-spacing: .04em; } /* ---- buttons — the punchy control: charcoal line, hard offset shadow ---- */ .btn { display: block; width: 100%; text-align: center; border: 2px solid var(--black); background: var(--cream-2); color: var(--black); font-family: var(--body); font-size: 15px; font-weight: 700; line-height: 1.2; padding: 13px 18px; text-decoration: none; cursor: pointer; position: relative; -webkit-appearance: none; appearance: none; /* same height as ,