/* Typography — five admin-switchable pairings (see .pair-* classes below and the vv_type_class() helper that stamps the active one on ). All faces are loaded here in one place (views have no shared ); the browser only downloads the woff2 of the pairing actually in use, so unused faces cost nothing but a few @font-face lines. */ @import url('https://fonts.googleapis.com/css2?family=Chivo:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=Instrument+Serif&family=JetBrains+Mono:wght@400;500;600;700&family=Libre+Franklin:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700&family=Public+Sans:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&family=Sora:wght@500;600;700&family=Space+Grotesk:wght@500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap'); /* ========================================================================== style.css — Vertex global stylesheet Used by every view (viewhome, viewregister, viewlogin, viewdashboard). Single source of truth for colors, typography, buttons, forms, tables. ========================================================================== */ /* ── Design tokens — Vertex Venture palette (logo gold on near-black navy) ── */ /* Single source of truth: edit values here. Typography tokens stay separate. */ :root{ /* Surfaces */ --vv-bg: #05080F; /* page — near-black navy (darker than cards so they lift) */ --vv-surface: #0C1420; /* cards, panels */ --vv-surface-raised: #101A2A; /* modals, toasts, inner chips */ /* Lines — translucent slate */ --vv-border: rgba(148,163,184,0.16); /* hairline edges */ --vv-border-strong: rgba(148,163,184,0.30); /* hover / focus edge */ /* Accent ramp — GOLD, matched to the logo (#ceac57). Ramp derived from it: dark = gradient base / outlines, light = highlights & emphasised figures. */ --vv-gold-dark: #A8863C; /* deeper gold: gradient base, outlines */ --vv-gold: #CEAC57; /* primary accent, CTAs — the logo gold */ --vv-gold-light: #E6CC8A; /* highlights, emphasised figures */ /* ⚠ Gold is LIGHT — text on a gold fill must be DARK. White on #CEAC57 is ~2.2:1 contrast (unreadable); this near-black brown is ~7.4:1. */ --vv-on-gold: #2B1F06; /* text on solid accent fills */ /* Text */ --vv-text: #F1F5F9; --vv-text-muted: #94A3B8; /* For a PROMPT — a placeholder — which must not read as content the reader has entered. ⚠ MEASURED, not eyeballed. Against --vv-surface: this is 4.84:1, --vv-text-muted is 7.21:1 and real typed text is 16.87:1. A clear step down from every label on the platform, and still above the 4.5:1 AA floor — the obvious next slate on the ramp (#64748B) came out at 3.88:1, which is a placeholder some people cannot read. */ --vv-text-faint: #748498; /* Status */ --vv-positive: #4ADE80; --vv-negative: #F87171; /* Glass — frosted surfaces over the constellation backdrop. The fill is a top-lit gradient, not a flat wash: a single alpha reads as dirty film, whereas a lighter top edge is what makes a pane look like a pane. Blur carries a saturate() so the gold behind stays gold instead of greying out. --vv-glass-solid is the no-backdrop-filter fallback and must stay opaque enough to read against a bright node. */ --vv-glass: linear-gradient(160deg,rgba(170,198,242,0.15),rgba(126,158,210,0.075) 58%,rgba(100,130,184,0.055)); --vv-glass-solid: #0E1725; --vv-glass-blur: blur(16px) saturate(135%); --vv-glass-line: rgba(206,172,87,0.16); --vv-glass-shadow: 0 8px 32px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06); /* Shape & rhythm */ --vv-radius-sm:6px; --vv-radius:10px; --vv-radius-lg:16px; /* ⚠ THE TAB BAR'S HEIGHT, IN ONE PLACE. It is content-driven (8px padding + a 40px disc + a 4px gap + an 11px label + a 1px border ≈ 74px), so anything that has to sit above it was carrying its own hand-measured copy — the wrap said 90px, the chat composer said 72px, and the composer therefore overlapped the bar it was meant to clear. Both read this now. */ --vv-tabbar-h:74px; /* Height of a single-line composer, shared by the field and the send button so the two cannot drift apart. */ --vv-compose-h:46px; --vv-compose-min:66px; --vv-composebar-h:118px; --vv-gap-sm:8px; --vv-gap:12px; --vv-gap-lg:18px; /* Type — default pairing = Clean/Inter (admin can switch; see .pair-* below) */ --vv-font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --vv-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --vv-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Back-compat aliases → mapped onto the palette so every existing rule follows the new tokens without being rewritten one by one. */ --bg: var(--vv-bg); --card: var(--vv-surface); --line: var(--vv-border); --txt: var(--vv-text); --muted: var(--vv-text-muted); --accent: var(--vv-gold); /* "Positive" highlights are GOLD, not green — one accent across the whole UI. Debits/errors stay red, so money in vs out is still distinguishable. */ --green: var(--vv-gold); --red: var(--vv-negative); --dangerbg:rgba(248,113,113,0.12); --infobg: rgba(206,172,87,0.10); } /* ── Typography pairings — admin-switchable (body gets a .pair-* class) ────── */ /* Each redefines the three role tokens; :root above defaults to protocol so an unclassed page still renders. Three are from vertex-venture-palette.html; editorial + signal are house additions. */ .pair-inter{ --vv-font-display:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --vv-font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --vv-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } .pair-protocol{ --vv-font-display:"Space Grotesk",ui-sans-serif,system-ui,"Segoe UI",sans-serif; --vv-font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --vv-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } .pair-institutional{ --vv-font-display:"Chivo",ui-sans-serif,system-ui,"Segoe UI",sans-serif; --vv-font:"Public Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --vv-font-mono:"Roboto Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } .pair-capital{ --vv-font-display:"Instrument Serif",ui-serif,Georgia,"Times New Roman",serif; --vv-font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --vv-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } .pair-editorial{ --vv-font-display:"Playfair Display",ui-serif,Georgia,"Times New Roman",serif; --vv-font:"Libre Franklin",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --vv-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } .pair-signal{ --vv-font-display:"Sora",ui-sans-serif,system-ui,"Segoe UI",sans-serif; --vv-font:"Work Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --vv-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } /* Clean/Inter: bolder, tighter headings to match the uploaded SaaS look (Inter has no separate display face, so lean on weight + negative tracking instead). */ .pair-inter .brand, .pair-inter .page-title, .pair-inter .hero h1{font-weight:800;letter-spacing:-.4px} .pair-inter .panel-title{font-weight:700;letter-spacing:-.1px} /* ── Reset / base ───────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} body{ background:var(--vv-bg); color:var(--vv-text); font-family:var(--vv-font); line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased; } /* Page backdrop — near-black navy with a soft radial lift: a wide spotlight from above and a fainter one below. Deliberately NOT gold — it uses the same cool slate as the borders, so it reads as depth/vignette rather than a coloured wash competing with the gold accent. ⚠ Alphas are kept low ON PURPOSE: at its brightest the backdrop reaches only ~#0C0F17, still darker than the card surface (#0C1420), so panels never look sunken against a background that has crept brighter than they are. Fixed ::before (mobile-safe, unlike background-attachment:fixed). */ body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background-color:var(--vv-bg); background-image: /* soft cool spotlight, sitting INSIDE the viewport so it isn't hidden behind the opaque top bar (that's why the old one looked absent) */ radial-gradient(1000px 620px at 50% 18%, rgba(148,163,184,0.09), transparent 60%), /* ── Scrim over the constellation ──────────────────────────────── The mesh is drawn at full strength in the SVG and dimmed HERE, so its weight is one number to tune rather than a regenerated asset. Raise these alphas to push the constellation back; lower them to bring it forward. It must stay well below the glass panels in contrast — the backdrop is texture, never something competing with the figures. */ linear-gradient(180deg, rgba(7,12,21,0.58) 0%, rgba(5,9,16,0.66) 55%, rgba(3,5,11,0.74) 100%), /* ── The constellation itself ──────────────────────────────────── Transparent SVG, so the ramp below supplies the colour and a palette change cannot strand it on the wrong background. `cover` + the SVG's own preserveAspectRatio="slice" means it fills any viewport without distorting the node spacing. */ url("../img/constellation.svg"), /* the light→dark body: lifted navy at the top fading to deeper than the base at the bottom — a real, visible vertical ramp */ linear-gradient(180deg, #0B111C 0%, #070C15 45%, #03050B 100%); background-repeat:no-repeat; background-position:center top, center, center, center; background-size:auto, auto, cover, auto; } /* The mesh is decorative. Anyone who has asked for less motion/detail, and any print, gets the plain ramp — nothing here carries meaning. */ @media (prefers-reduced-motion:reduce){ body::before{background-image:linear-gradient(180deg,#0B111C 0%,#070C15 45%,#03050B 100%)} } a{color:var(--vv-gold)} .muted{color:var(--muted);font-size:14px} .mt-10{margin-top:10px} .txt-strong{color:var(--txt);font-weight:600} /* Page layout modes (set on ) */ body.page-center{display:flex;align-items:center;justify-content:center;padding:24px} body.page-column{display:flex;flex-direction:column} /* ── Top navigation bar ─────────────────────────────────────────────────── */ .nav{ display:flex;justify-content:space-between;align-items:center; padding:14px 24px;border-bottom:1px solid var(--line); position:sticky;top:0;background:var(--bg);z-index:10; } /* Brand = the header logo image (assets/img/header-logo.png, 205×40). Height-constrained so it scales cleanly; width:auto keeps the aspect ratio. */ .brand{display:inline-flex;align-items:center;text-decoration:none;line-height:0} .brand-logo{height:30px;width:auto;max-width:60vw;display:block} .topbar .brand-logo{height:28px} .auth-card .brand-logo{height:40px} .brand-auth{display:flex;justify-content:center;margin-bottom:6px} /* admin: keep the logo and its ADMIN badge together as ONE flex child, or .nav's space-between would push the badge into the middle of the bar */ .brand-wrap{display:flex;align-items:center;gap:8px;min-width:0} .brand-wrap .badge{margin-left:0} @media (max-width:560px){ .brand-logo,.topbar .brand-logo{height:26px} .auth-card .brand-logo{height:34px} } .userbox{display:flex;align-items:center;gap:14px;font-size:14px} .userbox .uname{color:var(--muted)} /* ── Buttons ────────────────────────────────────────────────────────────── */ .btn{ display:inline-block;padding:14px 26px;border-radius:14px; text-decoration:none;font-weight:700;font-size:15px;line-height:1.2; border:1px solid transparent;cursor:pointer; } .btn:hover{filter:brightness(1.08)} .btn-primary{ background:linear-gradient(180deg,var(--vv-gold),var(--vv-gold-dark));color:var(--vv-on-gold); border-color:rgba(230,204,138,0.55);box-shadow:0 8px 22px rgba(206,172,87,0.30); } .btn-outline{border-color:var(--vv-border-strong);color:var(--vv-text);background:transparent} .btn-outline:hover{border-color:var(--vv-gold);color:var(--vv-gold);filter:none} .btn:focus-visible{outline:2px solid var(--vv-gold-light);outline-offset:2px} .btn-block{display:block;width:100%;margin-top:22px} .btn-logout{ padding:8px 18px;border-radius:8px;background:transparent; border:1px solid var(--red);color:var(--red); text-decoration:none;font-size:13px;font-weight:600; } .btn-logout:hover{background:var(--red);color:#fff} .btn-copy{ padding:10px 18px;border-radius:8px;border:1px solid var(--accent); background:transparent;color:var(--accent);cursor:pointer; font-size:13px;font-weight:600; } .btn-copy:hover{background:var(--accent);color:var(--vv-on-gold)} /* ── Landing hero (viewhome) ────────────────────────────────────────────── */ .hero{ flex:0 0 auto;display:flex;flex-direction:column;align-items:center; justify-content:center;text-align:center;padding:44px 20px 30px; } .hero h1{ font-family:var(--vv-font-display);font-weight:800;letter-spacing:-.6px; font-size:clamp(30px,8vw,46px);line-height:1.12;margin-bottom:16px; } .hero p{color:var(--muted);max-width:560px;margin-bottom:26px;line-height:1.7} .hero p strong{color:var(--vv-gold-light)} /* .hero-cta owns the button spacing now (gap), so no sibling margin hack. margin-top:0 is deliberate: the ≤560px rule below adds margin-top to stacked hero buttons, which would stack ON TOP of the flex gap and space them twice. Higher specificity than `.hero .btn+.btn`, so it wins regardless of order. */ .hero .hero-cta .btn+.btn{margin-left:0;margin-top:0} /* ── Landing page (viewhome) ─────────────────────────────────────────────── */ .hero-mark{ width:150px;height:150px;border-radius:50%;object-fit:cover; margin:0 auto 18px;display:block; border:1px solid rgba(206,172,87,0.28); box-shadow:0 14px 44px rgba(0,0,0,0.45); } .eyebrow{ font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase; color:var(--vv-gold);margin-bottom:12px; } .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px} .hero-cta .btn{margin:0} /* The compensation plan — laid out 3 + n so every row is symmetrical. Fixed column counts (not auto-fit) so cards can't reflow into an uneven mix, and every row collapses at the SAME breakpoint so the page never shows a 3-across row above a 2-across one. ⚠ .plan-1 IS NOT "one column" — a lone card in .plan-2 would sit half-width and hard left, which reads as a layout fault rather than a single item. It is one column of the 3-across grid above it (100% less the two 14px gaps, over three) and centred, so the card lands directly under the middle one and matches its width. Currently used by the Direct Sales Incentive tile, alone on row 2 since Group was shelved. */ .plan{display:grid;gap:14px;margin-bottom:14px;align-items:stretch} .plan-3{grid-template-columns:repeat(3,minmax(0,1fr))} .plan-2{grid-template-columns:repeat(2,minmax(0,1fr))} .plan-1{grid-template-columns:minmax(0,1fr);max-width:calc((100% - 28px) / 3);margin-inline:auto} @media (max-width:820px){ .plan-3,.plan-2,.plan-1{grid-template-columns:1fr} .plan-1{max-width:none} } .plan-card{ position:relative;display:flex;flex-direction:column; background:var(--vv-surface); border:1px solid var(--vv-border);border-radius:var(--vv-radius-lg); padding:22px 20px 20px; } .plan-no{ position:absolute;top:14px;right:16px; width:26px;height:26px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:700; color:var(--vv-gold);border:1px solid rgba(206,172,87,0.4); } /* Fixed figure block height so the three titles in row 1 sit on one line */ .plan-figure{ font-family:var(--vv-font-mono);font-size:40px;font-weight:700;line-height:1; color:var(--vv-gold);margin-bottom:14px;min-height:42px; display:flex;align-items:baseline;gap:6px; } .plan-figure span{font-family:var(--vv-font);font-size:14px;font-weight:600;color:var(--vv-text-muted)} .plan-title{font-size:15px;font-weight:700;color:var(--vv-text);margin-bottom:6px;min-height:22px} .plan-sub{font-size:13px;line-height:1.6;color:var(--vv-text-muted)} /* Lists fill the remaining height so cards 4 and 5 end level */ .plan-list{list-style:none;margin:12px 0 0;font-size:13px;color:var(--vv-text-muted);flex:1 1 auto} .plan-list li{ display:flex;justify-content:space-between;align-items:baseline;gap:12px; padding:9px 0;border-bottom:1px solid var(--vv-border); } .plan-list li:last-child{border-bottom:none} .plan-list .tier{font-family:var(--vv-font-mono);font-weight:600;color:var(--vv-gold-light);white-space:nowrap} .plan-list .reward{text-align:right;line-height:1.45} .plan-list em{font-style:normal;display:block;opacity:.75;font-size:12px} /* Trust strip */ .trust{ display:flex;flex-wrap:wrap;justify-content:center;gap:10px; margin:26px 0 6px; } .trust-item{ display:flex;align-items:center;gap:8px; font-size:12px;font-weight:600;color:var(--vv-text-muted); background:var(--vv-surface);border:1px solid var(--vv-border); border-radius:999px;padding:8px 14px; } .trust-ico{font-size:14px;line-height:1} /* Closing call to action */ .closing{text-align:center;padding:34px 0 10px} .closing-title{ font-family:var(--vv-font-display);font-size:clamp(20px,5.4vw,28px); font-weight:800;letter-spacing:-.3px;color:var(--vv-gold);margin-bottom:6px; } .closing .btn{margin-top:16px} /* Auth cards: a one-line pitch so guests know what they're joining */ .auth-pitch{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0 4px} .auth-pitch span{ font-size:11px;font-weight:600;color:var(--vv-gold); border:1px solid rgba(206,172,87,0.35);border-radius:999px;padding:4px 10px; } .auth-blurb{font-size:12.5px;line-height:1.6;color:var(--vv-text-muted);text-align:center;margin:12px 0 2px} /* ── Auth card (viewlogin / viewregister) ───────────────────────────────── */ .auth-card{ background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0)),var(--vv-surface); border:1px solid var(--vv-border); border-radius:var(--vv-radius-lg);width:100%;max-width:420px;padding:32px; } /* auth cards centre the logo (the old text-brand sizing no longer applies) */ .auth-card .brand{justify-content:center;margin-bottom:4px} .auth-card .sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:22px} .alt{text-align:center;margin-top:18px;font-size:13px;color:var(--muted)} .alt a{text-decoration:none} /* ── Forms ──────────────────────────────────────────────────────────────── */ label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px} /* ⚠ `textarea` IS IN THIS LIST, and was missing until 1 Aug 2026. The rule named every input TYPE plus select, so a textarea matched nothing and fell back to the browser default — a white box with a grey border, in the middle of a near-black theme. It stayed invisible for months because the app had no textarea anywhere; the messaging composer was the first, and shipped looking like a hole punched in the page. ⚠ Type-listing inputs has the same trap for any future type (date, search, url…). Prefer adding to this list over writing a one-off rule beside the new control — a local fix would have left the inbox's compose box still white. */ input[type=text],input[type=password],input[type=tel],input[type=email],input[type=number], input[type=url],input[type=search],input[type=date],select,textarea{ width:100%;padding:11px 12px;border-radius:8px; border:1px solid var(--line);background:var(--bg); color:var(--txt);font-size:15px; } input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)} select{appearance:none;cursor:pointer} /* ⚠ A textarea does NOT inherit the page font — browsers give it a monospace default — so it has to be said explicitly or a typed message renders in a different face from the one it appears in once sent. */ textarea{font-family:var(--vv-font);line-height:1.5;resize:vertical;min-height:88px;display:block} /* ⚠ A PLACEHOLDER IS A PROMPT, NOT CONTENT, and it has to look it. This used --muted (#94A3B8, slate-400) — the same colour as every hint and label on the platform — which on a dark field reads as text somebody has already typed. In a two-row composer with a full sentence in it, that is genuinely ambiguous: the reader cannot tell an empty box from a filled one. One step further down the same slate ramp the palette already uses. Still legible — a placeholder nobody can read is its own bug — but unmistakably a prompt beside real input at --vv-text. ⚠ opacity STAYS 1. Firefox defaults placeholder opacity to 0.54, so that declaration is what makes the colour mean the same thing in every browser. Dimming by opacity instead of by colour would hand the shade back to the browser. */ input::placeholder,textarea::placeholder{color:var(--vv-text-faint);opacity:1} .hint{font-size:11px;color:var(--muted);margin-top:4px} /* ── Alerts ─────────────────────────────────────────────────────────────── */ .errors{ background:var(--dangerbg);border:1px solid var(--red); border-radius:8px;padding:12px 14px;margin-bottom:6px; } .errors ul{margin-left:18px} .errors li{color:var(--red);font-size:13px;line-height:1.6} .notice{ background:var(--infobg);border:1px solid var(--accent); border-radius:8px;padding:10px 14px;margin-bottom:6px;font-size:13px; } /* ── Dashboard layout ───────────────────────────────────────────────────── */ .wrap{max-width:1000px;margin:0 auto;padding:24px 16px} /* Type hierarchy: page title (one per page) › section heading › panel title. Page title is the big bright heading; section headings are small uppercase muted dividers between blocks; panel titles label individual cards. */ .wrap h2{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:28px 0 12px} /* ⚠ AFTER `.wrap h2`, AND MORE SPECIFIC THAN IT — both on purpose. Every page title in this app is `

` inside `.wrap`, so it matched BOTH rules. `.page-title` alone is one class (0,0,1,0) while `.wrap h2` is a class plus an element (0,0,1,1), which wins on specificity no matter which order they appear in. The result was that every page title on every screen rendered as a 13px uppercase muted SECTION heading — visually identical to `.section-label` right below it — instead of the 24px display title the type hierarchy calls for. Adding `.wrap .page-title` (0,0,2,0) settles it, and the bare selector stays for any title outside `.wrap`. / .page-title, .wrap .page-title{font-family:var(--vv-font-display);font-size:24px;font-weight:600;letter-spacing:-.2px;line-height:1.25;text-transform:none;color:var(--txt);margin:0 0 16px} .page-title .badge{vertical-align:middle} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px} / ⚠ Two card rows in a row would otherwise TOUCH. .cards carries no bottom margin, which never showed because every row was followed by a .section-label or

, and those bring their own top margin. The peso automation row on the admin dashboard is the first to sit directly under another, and it sat flush against it. Matched to the grid gap so the vertical rhythm is the same between rows as between cards. / .cards + .cards{margin-top:16px} / Stacked sub-lines in a stat (e.g. "₱499.00 refunded" / "2 members paused") ran together. Only the SECOND onward is spaced, so single-line tiles — the overwhelming majority — are untouched. / .stat .muted + .muted{margin-top:3px} / A link under the figures is an action, not another data line: give it a little more room so it reads as separate. / .stat .stat-link{margin-top:7px} .stat{ background:var(--vv-glass); -webkit-backdrop-filter:var(--vv-glass-blur); backdrop-filter:var(--vv-glass-blur); border:1px solid var(--vv-glass-line); border-radius:var(--vv-radius-lg); box-shadow:var(--vv-glass-shadow); padding:18px; } .stat .lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px} .stat .val{font-family:var(--vv-font-mono);font-variant-numeric:tabular-nums slashed-zero;font-size:23px;font-weight:600;margin-top:6px} .stat .val.green{color:var(--green)} / Failure counts (peso payouts failed). Only applied when the count is > 0, so a red figure on the dashboard always means "something needs looking at". / .stat .val.red{color:var(--red)} .stat .val.accent{color:var(--vv-gold-light)} / GLASS. Reinstated 28 Jul 2026 together with the constellation backdrop. The previous note here said glass had been removed because, over a FLAT page, a translucent panel composites to ~#070C14 — 5/255 above the background, i.e. invisible. That reasoning was correct and still is: glass only reads as glass when there is something behind it to blur. It works now BECAUSE the backdrop is textured. If the constellation is ever removed, revert these to solid --vv-surface or the cards will disappear again. / .panel{ background:var(--vv-glass); -webkit-backdrop-filter:var(--vv-glass-blur); backdrop-filter:var(--vv-glass-blur); border:1px solid var(--vv-glass-line); border-radius:var(--vv-radius-lg); box-shadow:var(--vv-glass-shadow); padding:20px; } / ⚠ .panel carries NO margin of its own — exactly the same latent bug as .cards did. It stayed hidden because a panel was always followed by an

or a .section-label, and those bring a 28px/22px top margin with them. The Peso Gateway filter panel is the first to sit DIRECTLY above another panel, and the two rendered flush against each other as one broken box. Also covers .livelist, which wraps a panel for live-swapped tables and would otherwise reintroduce the same collision. / .panel + .panel, .panel + .livelist, .livelist + .panel{margin-top:16px} / The rest of the glass family, and the no-backdrop-filter fallback, are applied together at the END of this file — see "Glass surfaces". They have to be late so they win over .auth-card / .faq-item / .plan-card, which set their own background earlier without raising specificity. / .reflink{display:flex;gap:10px;flex-wrap:wrap;align-items:center} / Input dominates the shared line (grow:999) so the copy button keeps its natural width inline; but when the button wraps to its own line it grows to fill the row (no unbalanced empty space beside it). / / min-width:0 lets the input actually shrink on narrow phones — a hard min-width floor here overflows the panel (and the page) on ~360px screens. / .reflink input{flex:999 1 220px;min-width:0;font-size:13px;padding:10px 12px} .reflink .btn-copy{flex:1 1 auto} / ── Tables (also emitted by model render helpers) ──────────────────────── / .table-wrap{overflow-x:auto} .table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums} .table th{color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap} .table td{padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap} .amt-in{font-family:var(--vv-font-mono);font-variant-numeric:tabular-nums;color:var(--green);font-weight:500} .amt-out{font-family:var(--vv-font-mono);font-variant-numeric:tabular-nums;color:var(--red);font-weight:500} / ── Footer ─────────────────────────────────────────────────────────────── / .footer{ text-align:center;color:var(--muted);font-size:12px; padding:18px;border-top:1px solid var(--line);margin-top:auto; } .footer.plain{border-top:none} / ── Deposit page (viewdeposit) ─────────────────────────────────────────── / .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:760px){.grid-2{grid-template-columns:1fr}} .panel-title{font-family:var(--vv-font-display);font-size:16px;font-weight:700;letter-spacing:-.1px;color:var(--txt);margin-bottom:13px} .qr-panel{text-align:center} .qr-box{display:inline-block;background:#fff;border-radius:12px;padding:12px;line-height:0;max-width:100%} / The QR is emitted at a fixed 240px; let it scale down on narrow phones instead of overflowing the panel (240 + 24 padding > content width at ~320px). / .qr-box img{display:block;max-width:100%;height:auto} .badge{ display:inline-block;font-size:11px;font-weight:600;letter-spacing:.5px; color:var(--accent);border:1px solid var(--accent);border-radius:20px; padding:3px 10px;vertical-align:middle;margin-left:8px; } .warnbox{ margin-top:14px;text-align:left;font-size:12px;line-height:1.6;color:var(--muted); background:var(--infobg);border:1px solid var(--line);border-radius:8px;padding:10px 12px; } .steps{margin-left:18px;font-size:14px;line-height:1.9;color:var(--muted)} / Section heading with a trailing action ("see all"), per the reference layout / .sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:28px 0 12px} .sec-head h2{margin:0} .see-all{ flex:0 0 auto;font-size:12px;font-weight:600;color:var(--vv-text-muted); text-decoration:none;border:1px solid var(--vv-border); border-radius:999px;padding:6px 14px;transition:color .15s,border-color .15s; } .see-all:hover{color:var(--vv-gold);border-color:var(--vv-gold)} / ── Consent checkbox (register / deposit) ────────────────────────────────── / .agree{ display:flex;align-items:flex-start;gap:10px; margin:16px 0 4px;padding:12px 14px; background:var(--vv-surface-raised); border:1px solid var(--vv-border);border-radius:var(--vv-radius); font-size:12.5px;line-height:1.6;color:var(--vv-text-muted); cursor:pointer; } .agree input[type=checkbox]{ flex:0 0 auto;width:17px;height:17px;margin-top:1px; accent-color:var(--vv-gold);cursor:pointer; } .agree span{flex:1 1 auto;min-width:0} .agree strong{color:var(--vv-text)} .agree a{text-decoration:underline} .agree:has(input:focus-visible){border-color:var(--vv-gold)} / ── Legal pages (terms / privacy) ────────────────────────────────────────── / .legal{max-width:820px} .legal p{font-size:13.5px;line-height:1.75;color:var(--vv-text-muted);margin-bottom:10px} .legal p strong{color:var(--vv-text)} .legal .steps{font-size:13.5px;line-height:1.75;margin-bottom:12px} .legal .steps li{margin-bottom:5px} .legal .table{margin:6px 0 14px} .legal .table td{white-space:normal;vertical-align:top;line-height:1.6} .legal h2{margin-top:26px} / ── FAQ accordion — native
, no JS ────────────────────────────────── Three deliberate typographic levels so the eye can skim: SECTION small gold uppercase + trailing rule (a divider, not content) QUESTION 16px / 600 / near-white (the scannable layer) ANSWER 13.5px / muted / airy line-height (clearly subordinate) Each level differs in size, weight AND colour — size alone was too flat. / / Level 1 — section divider / .faq-sec{ display:flex;align-items:center;gap:12px; margin:34px 0 12px; font-family:var(--vv-font-display); font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase; color:var(--vv-gold); } .faq-sec::after{content:"";flex:1 1 auto;height:1px;background:var(--vv-border)} .faq-sec:first-of-type{margin-top:22px} .faq{display:flex;flex-direction:column;gap:8px} .faq-item{ background:var(--vv-surface);border:1px solid var(--vv-border); border-radius:var(--vv-radius-lg);overflow:hidden; transition:border-color .15s; } .faq-item[open]{border-color:var(--vv-border-strong)} / Level 2 — the question / .faq-item summary{ list-style:none;cursor:pointer;position:relative; padding:16px 48px 16px 18px; font-size:16px;font-weight:600;letter-spacing:-.1px; color:var(--vv-text);line-height:1.4; -webkit-tap-highlight-color:transparent; } .faq-item summary::-webkit-details-marker{display:none} / Safari's default arrow / .faq-item summary::marker{content:""} / Firefox/Chrome triangle / .faq-item summary:hover{color:var(--vv-gold)} .faq-item summary:focus-visible{outline:2px solid var(--vv-gold-light);outline-offset:-2px} / Chevron drawn in CSS — no icon dependency / .faq-item summary::after{ content:"";position:absolute;right:20px;top:50%; width:8px;height:8px;margin-top:-6px; border-right:2px solid var(--vv-gold);border-bottom:2px solid var(--vv-gold); transform:rotate(45deg);transition:transform .18s ease; } .faq-item[open] summary{color:var(--vv-gold);padding-bottom:10px} .faq-item[open] summary::after{transform:rotate(225deg);margin-top:-2px} / Level 3 — the answer / .faq-body{ padding:0 48px 18px 18px; font-size:13.5px;line-height:1.8;color:var(--vv-text-muted); max-width:70ch; } .faq-body p{margin-bottom:10px} .faq-body p:last-child{margin-bottom:0} .faq-body strong{color:var(--vv-text);font-weight:600} / Indent with padding-left, not margin-left. The global `{margin:0;padding:0}` strips the UA list indent and `.steps` restores it via margin-left — which any `margin` shorthand here would silently wipe out again, dropping the markers into .faq-body's padding and up against the card border. / .faq-body .steps,.faq-body ul,.faq-body ol{ margin:8px 0 0;padding-left:18px; font-size:13.5px;line-height:1.8; } .faq-body .steps li,.faq-body ul li,.faq-body ol li{margin-bottom:4px} .faq-body .steps:last-child,.faq-body ul:last-child,.faq-body ol:last-child{margin-bottom:0} @media (max-width:560px){ .faq-item summary{font-size:15px;padding:14px 42px 14px 15px} .faq-body{padding:0 18px 15px 15px} } @media (prefers-reduced-motion:reduce){ .faq-item,.faq-item summary::after{transition:none} } /* ── Transaction list — card rows instead of a table ──────────────────────── / .txn-list{display:flex;flex-direction:column;gap:10px} .txn{ display:flex;align-items:center;gap:12px; background:var(--vv-surface-raised); border:1px solid var(--vv-border); border-radius:14px;padding:12px 14px; } .txn-ico{ flex:0 0 auto;width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,0.05); } .txn-ico svg{width:18px;height:18px;display:block} .txn-ico.in{color:var(--vv-gold)} .txn-ico.out{color:var(--vv-negative)} / body flexes and can shrink; min-width:0 lets long labels ellipsis instead of pushing the amount off the row / .txn-body{flex:1 1 auto;min-width:0} .txn-title{ font-size:14px;font-weight:600;color:var(--vv-text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .txn-sub{font-size:12px;color:var(--vv-text-muted);margin-top:2px} .txn-right{flex:0 0 auto;text-align:right;margin-left:auto} .txn-amt{ font-family:var(--vv-font-mono);font-variant-numeric:tabular-nums; font-size:14px;font-weight:600;white-space:nowrap; } .txn-time{font-size:11px;color:var(--vv-text-muted);margin-top:2px;white-space:nowrap} / Pending rows (awaiting confirmation / approval) — set apart from settled history with a faint amber wash + accent edge so they don't read as done. / .txn-pending{background:rgba(234,179,8,0.06);border-color:rgba(234,179,8,0.34)} .txn-pending .txn-sub{margin-top:4px} @media (max-width:400px){ .txn{padding:11px 12px;gap:10px} .txn-ico{width:34px;height:34px} .txn-title{font-size:13px} .txn-amt{font-size:13px} } / ── Real-time investment yields (dashboard hero) ─────────────────────────── / / Hero panel: a faint gold wash + warmer edge so it reads as the centrepiece without shouting over the rest of the dashboard. / .yield-panel{ text-align:center;margin-bottom:16px; background: radial-gradient(120% 130% at 50% 0%, rgba(206,172,87,0.07), transparent 62%), linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0)), var(--vv-surface); border-color:rgba(206,172,87,0.22); } .yield-head{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:10px} .yield-head .lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px} / The hero number — the one thing on the dashboard people watch tick. Bigger than every stat value, polished gold with a soft bloom. Fluid so long amounts still fit on a phone; tabular figures so digits don't jitter as it counts. / / ⚠ Two class selectors deep ON PURPOSE. The element is `.yield-ticker .mono`, and `.mono` (font-size:13px) is defined LATER in this file — at equal specificity the later rule wins, which silently shrank this to 13px. `.yield-panel .yield-ticker` outranks it, and the resets below undo .mono's wrapping too. / .yield-panel .yield-ticker{ font-family:var(--vv-font-mono); font-size:clamp(34px,9.5vw,54px); font-weight:700;line-height:1.08;letter-spacing:-.5px; font-variant-numeric:tabular-nums slashed-zero; margin:4px 0 8px; white-space:nowrap;overflow-wrap:normal;word-break:normal; color:var(--vv-gold-light); / fallback if clip unsupported / background:linear-gradient(180deg,#F6E3B0 0%,var(--vv-gold) 52%,var(--vv-gold-dark) 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 3px 16px rgba(206,172,87,0.30)); } .yield-sub{font-size:13px;margin-bottom:14px} .yield-panel .btn-block{margin-top:0} .yield-panel .hint{margin-top:8px} / no mobile font-size override — clamp() above already scales it fluidly / / ── Rail selector (member) + tab panels (admin) — one segmented look ─────── / .railtabs,.vxtabs{ display:flex;gap:4px;width:100%;margin:0 0 18px;padding:4px; background:var(--vv-surface);border:1px solid var(--vv-border);border-radius:12px; } .railtab,.vxtab{ flex:1;text-align:center;padding:9px 12px;border-radius:9px;line-height:1.2; font-size:13px;font-weight:600;color:var(--muted);text-decoration:none; border:0;background:transparent;cursor:pointer;font-family:inherit; transition:background .15s,color .15s; } .railtab small{display:block;font-size:10px;font-weight:500;opacity:.75;margin-top:2px} .railtab.active,.vxtab.active{background:var(--vv-gold);color:var(--vv-on-gold)} .railtab:not(.active):hover,.vxtab:not(.active):hover{color:var(--txt)} .vxtab-panel[hidden]{display:none} / Live refresh: a brief tint so a list that changed under the reader is NOTICED rather than silently different. Deliberately short and quiet — this fires whenever anybody posts, and anything louder would be a distraction on a busy board. / .is-fresh{animation:vxfresh .9s ease-out} @keyframes vxfresh{from{background:rgba(206,172,87,0.10)}to{background:transparent}} @media (prefers-reduced-motion:reduce){.is-fresh{animation:none}} / Visually hidden, still read aloud. For a label whose field is self-evident on screen (a lone composer box) but nameless to a screen reader without it. / .sr-only{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } / ── Public board (viewmessages, tab=public) ────────────────────────────── ⚠ An admin post must be distinguishable at a glance from a member's — the board exists so an announcement can be made quickly, and an announcement nobody can tell apart from chatter is not one. / .wallpost{ background:var(--vv-surface);border:1px solid var(--vv-border); border-radius:var(--vv-radius);padding:14px 16px;margin-bottom:10px; } .wallpost.is-admin{border-color:var(--vv-gold);background:rgba(206,172,87,0.06)} .wallpost.is-pinned{box-shadow:inset 3px 0 0 var(--vv-gold)} .wallpost-head{display:flex;align-items:center;gap:10px;margin-bottom:8px} .wallpost-who{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0} .wallpost-name{font-weight:600;font-size:14px;color:var(--txt)} .wallpost-badge,.wallpost-pin{ padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.5px; } .wallpost-badge{background:var(--vv-gold);color:var(--vv-on-gold)} .wallpost-pin{background:var(--vv-surface-raised);color:var(--muted);border:1px solid var(--vv-border)} .wallpost-when{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap;flex:0 0 auto} / ⚠ pre-line, so the line breaks somebody typed survive WITHOUT nl2br — the body is another member's text and never goes near innerHTML. overflow-wrap because one 300-character "word" would otherwise widen the whole page. / .wallpost-body{ font-size:14px;line-height:1.6;color:var(--txt); white-space:pre-line;overflow-wrap:anywhere; } .wallpost-acts{display:flex;gap:6px;margin-top:10px} .wallpost-acts .inline-form{margin:0} / ── The board, laid out as a group chat ─────────────────────────────────── Oldest at the top, newest at the bottom, composer stuck above the tab bar. ⚠ THE PAGE SCROLLS, not an inner box with its own scrollbar. A fixed-height scroller inside a page that also scrolls gives two bars on a phone and traps the wrong one under a thumb — viewchat.php settled this already, and the board follows it rather than inventing a second answer. ⚠ IT REUSES .msg-line / .msg-bubble / .msg-meta from the private chat above. The first version drew a bordered CARD per post — header row, body row, a row of buttons — and three posts filled a phone. A group chat is a column of bubbles; there was never a reason for this to be its own visual language. / .wall-feed{display:flex;flex-direction:column;gap:3px;padding-bottom:4px} .wall-feed .pager{margin:0 0 12px} / ⚠ A GROUP chat line: avatar beside the bubble, and the NAME AND TIME INSIDE it. They used to be a row above and a row below — three rows of chrome around one sentence. A modifier on .msg-line, not a second component: the private chat is 1:1 and legitimately needs neither an avatar column nor a name, so it keeps the plain .msg-line. / / ⚠⚠ COMPOUND SELECTORS, NOT SOURCE ORDER. `.msg-grouped` alone is 0,1,0 — the same weight as `.msg-line`, which is defined further down this file and therefore WON: flex-direction went back to column and the avatar landed on its own line above every bubble, a wasted row per message. `.msg-line.msg-grouped` is 0,2,0 and cannot be undone by moving either block. This is the second time this exact failure has bitten here — the first was .page-title losing to .wrap h2 on every page of the app. / .msg-line.msg-grouped{flex-direction:row;align-items:flex-start;gap:6px;max-width:86%} / ⚠ 0,3,0 — it has to out-weigh `.msg-line.is-mine`, which is also 0,2,0 and also later in the file. / .msg-line.msg-grouped.is-mine{flex-direction:row-reverse;align-items:flex-start} / ⚠ Big enough to be a TAP TARGET, not just a decoration: it opens a private conversation with whoever posted, so it has to take a thumb. 34px inside a 6px gap still reads as a chat avatar. / .msg-grouped .msg-avatar{ flex:0 0 auto;width:34px;height:34px;font-size:14px;margin-top:2px; text-decoration:none;transition:filter .15s; } a.msg-avatar:hover{filter:brightness(1.12);text-decoration:none} a.msg-avatar:focus-visible{outline:2px solid var(--vv-gold-light);outline-offset:2px} / ⚠ Hidden, not absent, on a continuation — an omitted avatar would slide every bubble below the first one left out of the column. / .msg-grouped.is-run .msg-avatar{visibility:hidden} / ⚠ The shared .msg-bubble carries white-space:pre-line for the private chat, whose body sits directly inside it. Here the bubble holds siblings, so that rule would turn the newlines in the MARKUP between them into blank lines. The body carries its own pre-line via .msg-text. / .msg-grouped .msg-bubble{min-width:0;white-space:normal;padding:6px 10px 4px;border-radius:12px} / The speaker's name, first line inside the bubble. / .msg-from{ display:block;font-size:11.5px;font-weight:700;color:var(--vv-gold); line-height:1.3;margin-bottom:1px;overflow-wrap:anywhere; } .msg-from .wallpost-badge{margin-left:6px;vertical-align:1px} / ⚠ pre-line lives HERE, not on the bubble. The bubble now holds siblings, and pre-line on it would render the whitespace BETWEEN them as blank lines. / .msg-text{white-space:pre-line;overflow-wrap:anywhere} / ⚠ Floated so the text wraps around it and short messages keep the stamp on their own last line — a whole row saved per message, which is the point. / .msg-time{ float:right;display:inline-flex;align-items:center;gap:5px; margin:1px 0 0 8px;font-size:9.5px;color:var(--muted);line-height:1.5; } .msg-line.is-mine .msg-time{color:rgba(43,31,6,0.62)} .msg-line.is-mine .msg-acts summary{color:rgba(43,31,6,0.62)} / A continuation sits tight under the line before it. / / ⚠ A NEW SPEAKER GETS AIR, a continuation does not. With one gap for both, a busy board reads as a single undifferentiated column and you cannot see where one person stops and the next starts. 0,3,0 so it cannot lose to anything later in the file — see the note on .msg-line.msg-grouped. / .msg-line.msg-grouped:not(.is-run){margin-top:11px} .msg-grouped.is-run{margin-top:0} / An announcement is bordered in gold — the same signal the cards carried, at a fraction of the height. / .msg-bubble.is-admin{border-color:var(--vv-gold);background:rgba(206,172,87,0.07)} .msg-bubble.is-pinned{box-shadow:inset 3px 0 0 var(--vv-gold)} .msg-line.is-mine .msg-bubble.is-admin{background:var(--accent);border-color:var(--accent)} / ⚠ THE CONTROLS ARE FOLDED AWAY behind a "⋯". Two buttons under every bubble is what made the board unreadable.
, not a JS menu — the same no-JS disclosure the admin nav uses, so it works with scripting off. / / The private chat still puts its stamp on a line under the bubble — it has read receipts to show there, which a public board does not have. / .msg-meta{display:flex;align-items:center;gap:6px} .msg-line.is-mine .msg-meta{justify-content:flex-end} .msg-pinned{color:var(--vv-gold);font-weight:600} .msg-acts{position:relative;display:inline-block} .msg-acts summary{ list-style:none;cursor:pointer;padding:0 5px;border-radius:6px; color:var(--muted);font-size:13px;line-height:1.2; } .msg-acts summary::-webkit-details-marker{display:none} .msg-acts summary:hover{color:var(--txt);background:var(--vv-surface-raised)} .msg-acts-menu{ position:absolute;z-index:20;bottom:100%;left:0;margin-bottom:4px;min-width:130px; background:var(--vv-surface-raised);border:1px solid var(--vv-border-strong); border-radius:10px;padding:4px;box-shadow:0 10px 28px rgba(0,0,0,0.45); } / Near the right edge the menu would run off screen. / .msg-line.is-mine .msg-acts-menu{left:auto;right:0} .msg-acts-menu form{margin:0} .msg-acts-menu button{ display:block;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:7px; background:transparent;color:var(--txt);font:inherit;font-size:13px;cursor:pointer; } .msg-acts-menu button:hover{background:var(--vv-surface)} .msg-acts-menu button.is-danger{color:var(--red)} / The pinned strip: above the feed, visually detached from it. / .wall-pinned{ border-bottom:1px solid var(--vv-border); margin-bottom:14px;padding-bottom:4px; } .wall-pinned .section-label{margin-bottom:8px} / The board's composer is the shared .composebar — see that rule. Nothing extra is needed here beyond the hint line below. / / ⚠ ONE LINE, with the pin toggle on it. This was three rows — a checkbox row, the field, and a hint — above a sticky bar already eating the bottom of a phone screen. / .wall-hint{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; margin-top:6px;font-size:11px;line-height:1.4; } / ── Incentive leaderboard (viewadmin_incentives) ─────────────────────────── / .lb-rank{ display:inline-flex;align-items:center;justify-content:center; min-width:26px;height:26px;padding:0 6px;border-radius:999px; background:var(--vv-surface-raised);border:1px solid var(--vv-border); font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted); } .lb-rank-top{background:var(--vv-gold);border-color:var(--vv-gold);color:var(--vv-on-gold)} .lb-meter{height:5px;border-radius:4px;background:var(--line);overflow:hidden;margin:4px 0 3px;max-width:150px} .lb-meter>span{display:block;height:100%;border-radius:4px;background:var(--vv-gold)} / ── My Incentives (viewincentives) — the prize ladder ──────────────────── A card per milestone: the prize photograph as a hero with the name and tier over it, then what it takes and how far the member has got. ⚠ THE PHOTOGRAPH IS THE ADMIN'S UPLOAD, at whatever size and shape they had. A fixed-height hero with object-fit:cover is what stops one portrait snap of a Fortuner from making a card three screens tall — the alternative, letting the image set the height, means the layout changes every time somebody re-uploads. / .inc-window{margin-bottom:14px} .inc-window-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .inc-window-days{ font-family:var(--vv-font-display);font-size:40px;font-weight:700;line-height:1; color:var(--vv-gold);font-variant-numeric:tabular-nums; } .inc-window-meta{display:flex;flex-direction:column;gap:3px;font-size:13px;margin-left:auto;text-align:right} .inc-window-meta .muted{margin-right:6px} .inc-card{ border:1px solid var(--vv-border);border-radius:var(--vv-radius-lg); background:var(--vv-surface);overflow:hidden;margin-bottom:14px; } .inc-card.is-reached{border-color:var(--vv-gold)} .inc-hero{position:relative;height:190px;background:var(--vv-surface-raised);overflow:hidden} .inc-hero-img{width:100%;height:100%;object-fit:cover;display:block} / Without something behind it, white text over a white Fortuner is unreadable — and which car it is, is the admin's choice, not ours. / .inc-hero::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(5,8,15,0.85) 0%,rgba(5,8,15,0.35) 45%,transparent 70%); } .inc-hero-blank{display:flex;align-items:center;justify-content:center} .inc-hero-text{position:absolute;left:18px;bottom:16px;z-index:1} .inc-hero-title{ font-family:var(--vv-font-display);font-size:26px;font-weight:700;line-height:1.1; color:#fff;text-transform:uppercase;letter-spacing:.5px; text-shadow:0 2px 12px rgba(0,0,0,0.6); } .inc-hero-tier{ margin-top:4px;font-size:12px;font-weight:700;letter-spacing:1px; color:var(--vv-gold-light);text-shadow:0 2px 10px rgba(0,0,0,0.6); } .inc-flag{ position:absolute;top:12px;right:12px;z-index:1; padding:4px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.6px; } .inc-flag-won{background:var(--vv-gold);color:var(--vv-on-gold)} .inc-flag-wait{background:rgba(234,179,8,0.9);color:#2B1F06} .inc-flag-done{background:var(--vv-positive);color:#052E16} .inc-body{padding:16px 18px 18px} .inc-req{font-size:15px;line-height:1.5;margin:0 0 4px} .inc-choice{font-size:13px;color:var(--muted);margin:0 0 10px} .inc-meter-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:10px;font-size:13px} .inc-pct{color:var(--vv-gold);font-size:15px;font-variant-numeric:tabular-nums} .inc-meter{height:8px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:7px} .inc-meter>span{display:block;height:100%;border-radius:6px;background:var(--vv-gold);transition:width .3s} .inc-note{font-size:13px;color:var(--muted);line-height:1.55;margin:12px 0 0} .inc-claim{margin-top:14px} .inc-claim select{margin-bottom:10px} / .btn-block carries a 22px top margin for form footers; inside the card the select above it already provides the gap. / .inc-claim .btn-block{margin-top:0} @media (max-width:560px){ .inc-hero{height:150px} .inc-hero-title{font-size:21px} .inc-window-days{font-size:34px} .inc-window-meta{margin-left:0;text-align:left;width:100%} } / ── Link tabs — switching by NAVIGATION, not by JS ──────────────────────── ⚠ DELIBERATELY NOT .vxtabs. That bar is the JS panel switcher above: it expects