/* ============================================================ Sets · social-together.css De gedeelde laag van het vriendenscherm: het PR-blok in de feed, de maanduitdaging, de gedeelde weekreeks en het voorbeeld dat een uitgelogde gebruiker te zien krijgt. Kleuren komen uit de tokens van styles/polish.css, zodat lichte modus (afwezigheid van `.dark` op ) vanzelf meeloopt. Goud is hier uitsluitend voor records — normale voortgang blijft lime. ============================================================ */ /* Lime als tékst op een lichte ondergrond haalt de AA-drempel niet; het accent bestaat in polish.css al in een donkerder variant voor precies dat doel. Vlakken en balken houden het volle accent — daar geldt de eis niet. Eén alias, zodat een latere correctie aan de tokens hier vanzelf landt. */ :root { --social-accent-text: var(--sets-accent); } html:not(.dark) { } /* ---------- PR in de feed ---------- */ .social-pr-card { border: 1px solid color-mix(in srgb, var(--sets-gold) 34%, transparent); background: linear-gradient( 180deg, color-mix(in srgb, var(--sets-gold) 13%, transparent), color-mix(in srgb, var(--sets-gold) 4%, transparent) ); border-radius: 14px; padding: 10px 12px; } .social-pr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .social-pr-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--sets-gold-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .social-pr-share { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sets-gold) 40%, transparent); background: color-mix(in srgb, var(--sets-gold) 12%, transparent); color: var(--sets-gold-text); font-size: 11px; font-weight: 700; transition: transform 120ms var(--sets-ease-out), opacity 120ms linear; } .social-pr-share:active { transform: scale(0.96); } .social-pr-share[disabled] { opacity: 0.5; } .social-pr-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .social-pr-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .social-pr-exercise { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sets-text); font-size: 13px; font-weight: 700; } /* G2: het getal dat ertoe doet is groot, mono en tabulair. */ .social-pr-value { flex-shrink: 0; color: var(--sets-gold-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .social-pr-more { display: flex; gap: 5px; color: var(--sets-text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; } /* ---------- Samen-strook ---------- */ .social-together { display: flex; flex-direction: column; gap: 10px; } .social-together-eyebrow { color: var(--sets-text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .social-challenge { border: 1px solid var(--sets-border); background: var(--sets-surface-1); border-radius: 18px; padding: 14px; box-shadow: var(--sets-shadow-card); } .social-challenge-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .social-challenge-eyebrow { color: var(--sets-text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .social-challenge-days { display: inline-flex; align-items: baseline; gap: 4px; color: var(--sets-text-3); font-size: 11px; flex-shrink: 0; } .social-challenge-days-value { color: var(--sets-text-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-variant-numeric: tabular-nums; } .social-challenge-badge { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--sets-accent) 16%, transparent); color: var(--social-accent-text); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .social-challenge-title { margin-top: 8px; color: var(--sets-text); font-size: 15px; font-weight: 700; } .social-challenge-rule { margin-top: 4px; color: var(--sets-text-3); font-size: 11px; line-height: 1.45; } /* De voortgangsbreuk staat per duo in de vriendenrij, niet op de kop. */ .social-challenge-figure { display: flex; align-items: baseline; gap: 6px; } .social-challenge-value { color: var(--social-accent-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .social-challenge-unit { color: var(--sets-text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .social-challenge-track { display: block; height: 5px; border-radius: 999px; background: var(--sets-surface-3); overflow: hidden; } .social-challenge-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sets-button-from), var(--sets-button-to)); transition: width 420ms var(--sets-ease-out); } /* ---------- Gedeelde weekreeks ---------- */ .social-streak-list { display: flex; flex-direction: column; gap: 8px; } /* Eén vriend is één kaart: de rij, plus — zolang de uitdaging voor dat duo nog niet allebei geaccepteerd is — de balk eronder die zegt waarom er geen voortgang staat. Zie friendTogetherRowNode() in js/social.js. De kaartrand zit op deze wikkel en niet op de rij zelf. Stond hij op de rij, dan viel de accepteerknop erbuiten en zweefde hij in de tussenruimte tussen twee kaarten — visueel van niemand. */ .social-together-pair { border: 1px solid var(--sets-border); border-radius: 16px; background: var(--sets-surface-1); overflow: hidden; } /* Binnen de wikkel draagt de rij zijn eigen chrome niet meer. Het voorbeeld voor de uitgelogde gebruiker (.is-static) staat buiten een wikkel en houdt hem daarom wél. */ .social-together-pair > .social-streak-row { border: 0; border-radius: 0; background: none; } /* Een schaalsprong op een rij die de hele kaart vult, trekt de inhoud van de rand weg. Binnen de wikkel dus een kleuraanslag in plaats daarvan. */ .social-together-pair > .social-streak-row:active:not(.is-static) { transform: none; background: var(--sets-surface-2); } /* De scheidingslijn maakt het één kaart met twee delen in plaats van twee dingen die toevallig tegen elkaar aan liggen. De inspringing links lijnt uit met de naam in de rij erboven — 12px kaartpadding + 34px avatar + 10px tussenruimte — zodat de regel zichtbaar over díe persoon gaat. */ .social-challenge-invite { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 9px 12px 10px 56px; border-top: 1px solid var(--sets-border); } .social-challenge-invite-note { min-width: 0; color: var(--sets-text-3); font-size: 11px; line-height: 1.4; } .social-challenge-accept { /* Altijd rechtsonder, of er nu een notitie naast staat of niet: een knop die per stand van plek wisselt laat de lijst onrustig ogen. */ margin-left: auto; flex-shrink: 0; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--sets-accent); background: color-mix(in srgb, var(--sets-accent) 14%, transparent); color: var(--social-accent-text); font-size: 12px; font-weight: 700; transition: transform 120ms var(--sets-ease-out), opacity 120ms linear; } .social-challenge-accept:active { transform: scale(0.96); } .social-challenge-accept[disabled] { opacity: 0.5; } /* Smalle toestellen: de inspringing onder de avatar kost te veel van de breedte die de notitie en de knop samen nodig hebben. */ @media (max-width: 360px) { .social-challenge-invite { flex-wrap: wrap; padding-left: 12px; } } .social-streak-row { width: 100%; display: flex; /* De rij is meerdere regels hoog; de avatar hoort naast de naam te staan, niet halverwege de voortgangsbalk. */ align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--sets-border); border-radius: 16px; background: var(--sets-surface-1); text-align: left; transition: transform 120ms var(--sets-ease-out); } .social-streak-row:active:not(.is-static) { transform: scale(0.99); } .social-streak-row.is-static { pointer-events: none; } .social-streak-row > :first-child { margin-top: 1px; } .social-streak-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .social-streak-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .social-streak-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sets-text); font-size: 13px; font-weight: 700; } .social-streak-figure { display: flex; align-items: baseline; gap: 5px; flex-shrink: 0; color: var(--social-accent-text); } .social-streak-figure.is-at-risk { color: var(--sets-text-2); } .social-streak-figure.is-empty { color: var(--sets-text-3); font-size: 12px; } .social-streak-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } .social-streak-unit { color: var(--sets-text-2); font-size: 11px; font-weight: 600; } .social-streak-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .social-streak-mark { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--sets-text-3); font-size: 11px; } .social-streak-mark > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .social-streak-mark-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--sets-border-strong); background: transparent; } .social-streak-mark.is-on { color: var(--sets-text-2); } .social-streak-mark.is-on .social-streak-mark-dot { border-color: var(--sets-accent-text); background: var(--sets-accent); } .social-streak-flag { margin-left: auto; flex-shrink: 0; color: var(--sets-text-3); font-size: 10px; line-height: 1.25; } /* ---------- Gedeelde reeks op het vriendendetail ---------- */ .social-shared-streak { border: 1px solid var(--sets-border); border-radius: 18px; background: var(--sets-surface-1); padding: 14px; } .social-shared-streak-head { display: flex; align-items: center; gap: 6px; color: var(--social-accent-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .social-shared-streak.is-at-risk .social-shared-streak-head { color: var(--sets-text-3); } .social-shared-streak-figure { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; } .social-shared-streak-value { color: var(--sets-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } .social-shared-streak-unit { color: var(--sets-text-2); font-size: 12px; font-weight: 600; } .social-shared-streak-week { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 12px; } .social-shared-streak-rule { margin-top: 8px; color: var(--sets-text-3); font-size: 11px; line-height: 1.4; } /* ---------- Voorbeeld voor de uitgelogde gebruiker ---------- */ .social-sell-title { color: var(--sets-text); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; } .social-sell-body { margin-top: 6px; color: var(--sets-text-2); font-size: 13px; line-height: 1.5; } .social-preview { position: relative; border: 1px dashed var(--sets-border-strong); border-radius: 20px; padding: 18px 12px 12px; } /* Onmiskenbaar een voorbeeld: het label staat in de rand van het kader zelf, niet ergens onderaan waar je eroverheen leest. */ .social-preview-tag { position: absolute; top: -9px; left: 14px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--sets-border-strong); background: var(--sets-bg); color: var(--sets-text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .social-preview-body { display: flex; flex-direction: column; gap: 10px; /* Niets hierbinnen is aanraakbaar; het is een plaatje, geen scherm. */ pointer-events: none; user-select: none; } .social-preview-avatar { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--sets-surface-3); color: var(--sets-text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; } .social-preview-card { border: 1px solid var(--sets-border); border-radius: 18px; background: var(--sets-surface-1); padding: 12px; display: flex; flex-direction: column; gap: 10px; } .social-preview-card-head { display: flex; align-items: center; gap: 8px; } .social-preview-name { color: var(--sets-text); font-size: 13px; font-weight: 700; } .social-preview-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--sets-border); padding-top: 10px; color: var(--sets-text-3); font-size: 11px; } .social-preview-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--sets-border-strong); color: var(--sets-text-2); font-size: 11px; font-weight: 700; } .social-sell-cta { display: flex; flex-direction: column; gap: 10px; } .social-sell-note { color: var(--sets-text-3); font-size: 12px; line-height: 1.5; text-align: center; }