/* board.css — light "v4-08" theme for the public Leaderboard, Secret page, embed, and import preview. The Del's-staff admin keeps its own style.css; these pages link THIS file instead. Font (Space Grotesk) is loaded in each page's . */ :root{ --panel:#ffffff; --panel2:#faf6ee; --line:#ece4d8; --ink:#2a2320; --muted:#9a8f86; --red:#c01f12; --red2:#e0762a; --gold:#e0a422; --green:#2e9e57; --caramel:#b85c1e; --danger:#c01f12; --rad:18px; --radin:12px; --font:'Space Grotesk',system-ui,-apple-system,sans-serif; } *{box-sizing:border-box} body{margin:0;color:var(--ink);font-family:var(--font);line-height:1.55; background:linear-gradient(180deg,#faf8f4,#f1ece4);} body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background-image:repeating-linear-gradient(45deg, rgba(190,140,60,.06) 0 2px, transparent 2px 13px);} a{color:var(--red);text-decoration:none} a:hover{text-decoration:underline} .muted{color:var(--muted)} .small{font-size:.85rem} code{background:rgba(190,140,60,.12);border-radius:5px;padding:1px 5px;font-family:ui-monospace,monospace;font-size:.9em} .board-wrap{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:26px 16px 70px} /* platform brand (Del's Fundraising) — sits above the org's own campaign header */ .platform-brand{display:block;text-align:center;margin:0 auto 16px;line-height:0} .platform-brand img{height:46px;width:auto;max-width:86%} .platform-brand:hover{opacity:.85} /* header */ .board-head{text-align:center;margin-bottom:6px} .board-logo{max-height:120px;max-width:78%;border-radius:16px;display:block;margin:0 auto 12px; background:#fff;padding:6px;box-shadow:0 10px 26px -16px rgba(120,80,40,.5)} .board-title{font-weight:700;font-size:1.7rem;letter-spacing:-.02em;line-height:1.12} .board-sub{color:var(--muted);font-size:.9rem;margin-top:2px} .official-title{font-weight:700;font-size:1.9rem;letter-spacing:-.01em;text-align:center;margin:16px 0 4px; background:linear-gradient(90deg,var(--red),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent} /* cards */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:24px;margin-bottom:16px; box-shadow:0 16px 40px -28px rgba(120,80,40,.35)} .card h2,.card h3{margin-top:0} /* admin warning + how-to */ .admin-warning{background:#fdeceb;border:1px solid #f3c2bd;color:#8a2018;border-radius:14px; padding:13px 16px;margin:12px 0 6px;font-size:.92rem;line-height:1.5} .howto{text-align:left} .howto h2{font-size:1.3rem;font-weight:700} .howto h3{margin:18px 0 6px;font-size:1.08rem} .howto h4{margin:16px 0 6px;color:var(--caramel)} .howto p{line-height:1.6} .howto-done{font-size:1.05rem;margin:10px 0 12px} .howto-links{border-collapse:collapse;margin:4px 0 10px} .howto-links th{text-align:left;color:var(--muted);font-weight:700;padding:7px 16px 7px 0;white-space:nowrap;vertical-align:top} .howto-links td{padding:7px 0} .howto-links a{word-break:break-all} .ok-note{color:var(--green);font-weight:700;margin:6px 0} .warn-note{color:var(--caramel);font-weight:700;margin:6px 0} .general-toggle{border-top:1px solid var(--line);padding-top:14px;margin-top:6px} .check{display:flex;align-items:flex-start;gap:9px;color:var(--ink);font-size:.92rem;cursor:pointer} .check input{margin-top:3px} /* countdown */ .countdown{text-align:center;margin:14px 0 2px} .cd-label{display:block;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px;font-weight:600} .cd-boxes{display:inline-flex;gap:9px;flex-wrap:wrap;justify-content:center} .cd-box{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radin);padding:9px 14px;min-width:58px; display:inline-flex;flex-direction:column;align-items:center} .cd-box b{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums} .cd-box small{font-size:.58rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:1px} .cd-ended{color:var(--danger);font-weight:700;font-size:1.1rem} /* goal progress (synced from Crowdfunder) */ .goal-card{padding:18px 20px;margin-top:14px} .goal-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px} .goal-name{font-weight:700;font-size:1.05rem} .goal-pct{font-weight:700;font-size:1.35rem;color:var(--green);font-variant-numeric:tabular-nums;line-height:1} .goal-bar{height:14px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;overflow:hidden} .goal-fill{display:block;height:100%;min-width:6px;border-radius:9px; background:linear-gradient(90deg,var(--red),var(--gold));transition:width .8s ease} .goal-sub{margin-top:9px} /* stat row */ .stat-row{display:flex;gap:11px;flex-wrap:wrap;margin:16px 0} .stat{flex:1;min-width:120px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:15px; display:flex;flex-direction:column;gap:2px} .stat-num{font-size:1.55rem;font-weight:700;font-variant-numeric:tabular-nums} .stat-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em} .stat.highlight{background:#eaf6ec;border-color:rgba(46,158,87,.4)} .stat.highlight .stat-num{color:var(--green)} /* support CTA */ .support-cta{text-align:center} .support-text{margin:0 0 14px;font-size:1.05rem} .support-btn{display:inline-block;font-weight:700;border-radius:12px;padding:14px 44px;font-size:1.1rem;color:#fff; background:linear-gradient(135deg,var(--red),var(--red2));box-shadow:0 12px 28px -12px rgba(192,31,18,.5)} .support-btn:hover{filter:brightness(1.05);text-decoration:none} /* leaderboard table */ .board-table{width:100%;border-collapse:separate;border-spacing:0 8px} .board-table th{color:var(--muted);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em; text-align:left;padding:0 12px 4px} .board-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .board-table td{padding:12px 10px;background:var(--panel2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);vertical-align:middle} .board-table td:first-child{border-left:1px solid var(--line);border-radius:14px 0 0 14px} .board-table td:last-child{border-right:1px solid var(--line);border-radius:0 14px 14px 0} .board-table .num{text-align:right;font-variant-numeric:tabular-nums} .board-table .rank-cell{text-align:center;width:40px;font-weight:700;font-size:1.05rem} .board-table .raised{color:var(--green);font-weight:700;font-size:1.05rem} /* Podium rows keep the SAME gray border + geometry as every other row — they're set apart only by a faint background tint and a colored left accent bar, so the top three never read as wider/bulging next to the plain rows below. */ .board-table tr.rank-1 td{background:linear-gradient(90deg,#fff7e3,var(--panel2));font-weight:600} .board-table tr.rank-2 td{background:linear-gradient(90deg,#f3f4f8,var(--panel2))} .board-table tr.rank-3 td{background:linear-gradient(90deg,#fbefe1,var(--panel2))} .board-table tr.rank-1 td:first-child{box-shadow:inset 3px 0 0 var(--gold)} .board-table tr.rank-2 td:first-child{box-shadow:inset 3px 0 0 #aeb8c8} .board-table tr.rank-3 td:first-child{box-shadow:inset 3px 0 0 #cd7f32} .board-table tr.rank-1 .rank-cell{font-size:1.5rem} .board-table tr.rank-2 .rank-cell{font-size:1.4rem} .board-table tr.rank-3 .rank-cell{font-size:1.4rem} .board-table tr.general-row td{font-style:italic} .board-table tr.general-row td:nth-child(2)::after{content:" (organization)";font-size:.72rem;font-style:normal;color:var(--muted)} .link-cell{font-size:.8rem;line-height:1.6} .link-cell a{color:var(--red);white-space:nowrap} .link-cell .qr-link{margin-left:8px;color:var(--muted)} .row-actions{display:inline-flex;gap:10px;align-items:center;margin-left:6px;white-space:nowrap} .link-btn{background:none;border:none;color:var(--red);padding:0;font-size:.82rem;cursor:pointer;font-family:inherit} .link-btn:hover{text-decoration:underline} .link-btn.danger{color:var(--danger)} .inline-del{display:inline;margin:0} /* forms / manage */ textarea,input[type=text],input[type=url],input[type=password],.ta{ width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:var(--radin); padding:12px;color:var(--ink);font-family:inherit;font-size:.95rem;resize:vertical} textarea:focus,input:focus{outline:none;border-color:var(--gold)} button,.btn{display:inline-block;border:none;cursor:pointer;font-family:inherit;font-weight:700;border-radius:12px; padding:13px 30px;font-size:1rem;color:#fff;background:linear-gradient(135deg,var(--red),var(--red2)); box-shadow:0 12px 28px -14px rgba(192,31,18,.5)} button:hover,.btn:hover{filter:brightness(1.05);text-decoration:none} .btn-secondary{display:inline-block;background:var(--panel2);border:1px solid var(--line);color:var(--ink); padding:11px 20px;border-radius:11px;font-weight:600;font-size:.95rem;cursor:pointer;box-shadow:none} .btn-secondary:hover{background:#f3ead9;text-decoration:none} .btn-link{color:var(--muted);padding:11px 12px} .manage-actions,.handout-actions,.share-board-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px} .import-form{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .import-form input[type=file]{color:var(--muted);font-size:.9rem} .error{background:#fdeceb;border:1px solid #f3c2bd;color:#8a2018;padding:10px 14px;border-radius:10px;margin-bottom:12px} .board-foot{text-align:center;margin-top:18px;color:var(--muted);font-size:.85rem} .board-foot .last-updated{margin-bottom:4px} /* import preview page */ .form label{display:block;margin-bottom:14px;color:var(--muted);font-size:.9rem} .actions{display:flex;gap:10px;align-items:center;margin-top:8px} .import-preview-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;margin-top:6px} .import-preview{width:100%;border-collapse:collapse;font-size:.85rem;white-space:nowrap} .import-preview th{background:var(--panel2);padding:8px 10px;border-bottom:1px solid var(--line);position:sticky;top:0} .import-preview td{padding:6px 10px;border-bottom:1px solid var(--line)} .col-pick{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink);font-size:.82rem} /* ===== embed widget (light) ===== */ /* Embed sits on the Shopify storefront: match the theme font (DM Sans) instead of the Del's-branded Space Grotesk used on the standalone boards. */ .embed-page{background:transparent;font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif} .embed-page::before{display:none} .embed-wrap{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:12px} /* Raised total now sits BELOW the table (the fundraiser title was removed). */ .embed-raised-row{text-align:center;margin:12px 0 2px;color:var(--muted);font-size:.95rem} .embed-raised-amt{color:var(--green);font-weight:700;font-size:1.2rem} .board-table.compact{border-spacing:0 6px} .board-table.compact td,.board-table.compact th{padding:8px 9px;font-size:.9rem} .embed-fulllink{display:block;text-align:center;margin:10px 0 2px;font-weight:600; color:var(--red);font-size:.86rem} .embed-fulllink:hover{text-decoration:underline} .embed-foot{text-align:center;margin-top:8px;font-size:.72rem;color:var(--muted)} /* ===== Mobile (phones) ===== */ @media (max-width: 560px){ .board-wrap{padding:16px 10px 54px} .card{padding:18px 14px} .platform-brand{margin-bottom:12px} .platform-brand img{height:40px;max-width:92%} .board-logo{max-height:92px} .board-title{font-size:1.4rem} .official-title{font-size:1.45rem;margin:12px 0 4px} .cd-box{min-width:0;flex:1 1 0;padding:8px 5px} .cd-boxes{display:flex;width:100%;gap:7px} .cd-box b{font-size:1.3rem} .stat-row{gap:9px} .stat{min-width:0;flex:1 1 calc(50% - 5px);padding:12px 13px} .stat.highlight{flex-basis:100%} .stat-num{font-size:1.4rem} .goal-card{padding:16px 14px} .goal-pct{font-size:1.2rem} /* leaderboard fits the screen: shrink headers + padding so Raised never clips */ .board-table{font-size:.9rem} .board-table th{padding:0 6px 4px;font-size:.6rem;letter-spacing:.02em} .board-table td{padding:9px 6px} .board-table .rank-cell{width:26px} .board-table .raised{font-size:.92rem} .board-table tr.rank-1 .rank-cell{font-size:1.3rem} .board-table tr.rank-2 .rank-cell{font-size:1.15rem} .board-table tr.rank-3 .rank-cell{font-size:1.05rem} .support-btn{padding:13px 30px;font-size:1.05rem} .support-text{font-size:1rem} }