/* ============================================================================ DagM8 design system · dagm8.css "Dynamic Active Groups" student social network. Reusable token + component layer shared across every dagm8 screen. Source of truth: Figma "KAA-WEB-APP" / Design System 2.0 (frame 05), sampled against the social-feed (02) and explorer-trend (07) exports. Sections 1. Design tokens (CSS custom properties) 2. Base / reset 3. Accessibility floor (focus-visible, reduced-motion) 4. Layout primitives .topbar .app .rail .feed 5. Brand .wordmark 6. Inputs + buttons .search .btn .icon-btn .nav-ico 7. Identity .avatar .ava-sq .badge 8. Lists .section-label .group-row 9. Cards .card .post + post internals 10. Media .media .play .gallery (gradient "photos") 11. Trend .trend-row .trend-card .tag 12. Chips + filters .chip .filter .sort 13. Explorer rail .highlight .trending 14. Utility / icons .ico ========================================================================= */ /* ---------------------------------------------------------------------------- 1. DESIGN TOKENS Every value the app draws on lives here. Sampled hexes are noted inline. ---------------------------------------------------------------------------- */ :root { /* Typeface — Montserrat, loaded via Google Fonts in the HTML . 800 wordmark/headings · 700 bold · 600 semibold · 500 medium body · 400 regular body · 300 light (subtle captions). */ --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Brand palette (Design System 2.0 "Brand Colors" + "System color palette") */ --cyan: #28c2d5; /* primary — the DagM8 mark, send, active radios, links */ --cyan-700:#1aa6b8; /* cyan pressed/hover */ --coral: #f5365c; /* count badges, SMASH trend, the wordmark "8" */ --yellow: #fec739; /* CMPE group, Mr. Jhonson community */ --indigo: #766aff; /* CHEM II group, General community, Physics avatar */ --magenta: #d64d6e; /* PHGP group */ --lime: #9fd61c; /* accent / mp3 resource */ --orange: #ff8a3c; /* accent */ --green: #3fbf79; /* Trekking trend + community (sampled spring-green) */ --youtube: #ff0000; /* YouTube source tag + play button */ /* Neutrals */ --ink: #1f2430; /* primary text, headings */ --ink-2: #3a4150; /* secondary heading ink */ --muted: #8a93a5; /* subtitles, captions, inactive icons */ --muted-2: #b6bcc8; /* faint meta */ --line: #e9ecef; /* hairline borders, dividers */ --line-2: #f0f2f4; /* faintest divider */ --page: #f6f6f6; /* app background */ --surface: #ffffff; /* cards, bars, rails */ --field: #f1f3f5; /* search + input fills */ --dark: #1e1e1e; /* trend tag pills, charcoal blocks */ /* Radii */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-card:14px; --r-pill:999px; /* Elevation */ --shadow-card: 0 1px 2px rgba(20,25,40,.05), 0 6px 20px rgba(20,25,40,.05); --shadow-pop: 0 8px 28px rgba(20,25,40,.16); --ring: 0 0 0 3px rgba(40,194,213,.45); /* focus ring (cyan) */ /* Spacing scale (4pt) */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; /* Layout */ --topbar-h: 60px; --rail-l: 240px; --rail-r: 340px; --feed-max: 660px; --gutter: 24px; --t: 160ms cubic-bezier(.3,.7,.4,1); /* shared transition */ } /* ---------------------------------------------------------------------------- 2. BASE / RESET ---------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-weight: 400; color: var(--ink); background: var(--page); line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; cursor: pointer; } input { font: inherit; } a { color: var(--cyan); text-decoration: none; } h1,h2,h3,h4 { margin: 0; font-weight: 700; } ul { margin: 0; padding: 0; list-style: none; } /* ---------------------------------------------------------------------------- 3. ACCESSIBILITY FLOOR Visible keyboard focus, and motion off for users who ask for it. ---------------------------------------------------------------------------- */ :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------------------------------------------------------------------------- 4. LAYOUT PRIMITIVES .topbar — sticky white app bar, 60px, hairline bottom border .app — 3-column grid: left rail · feed · explorer rail .rail — white side column (left has right border, right has left border) .feed — centered content column on the page background ---------------------------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 50; height: var(--topbar-h); display: flex; align-items: center; gap: var(--s5); padding: 0 var(--s6); background: var(--surface); border-bottom: 1px solid var(--line); } .topbar__spacer { flex: 1; } .app { display: grid; grid-template-columns: var(--rail-l) minmax(0, 1fr) var(--rail-r); align-items: start; min-height: calc(100vh - var(--topbar-h)); } .rail { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; background: var(--surface); padding: var(--s5) var(--s4); } .rail--left { border-right: 1px solid var(--line); } .rail--right { border-left: 1px solid var(--line); padding: var(--s5) var(--s5); } .rail::-webkit-scrollbar { width: 8px; } .rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); } .feed { width: 100%; max-width: calc(var(--feed-max) + var(--gutter) * 2); margin: 0 auto; padding: var(--s6) var(--gutter) var(--s8); } /* ---------------------------------------------------------------------------- 5. BRAND — .wordmark "DagM" in ink, the "8" recreated as the coral googly-eyed mascot (inline SVG). ---------------------------------------------------------------------------- */ .wordmark { display: inline-flex; align-items: center; gap: 1px; font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: var(--ink); user-select: none; line-height: 1; } .wordmark__8 { width: 26px; height: 30px; margin-left: 1px; transform: translateY(1px); } /* ---------------------------------------------------------------------------- 6. INPUTS + BUTTONS .search — rounded search pill with leading icon .btn — primary (cyan) / ghost .icon-btn — bare round icon button (bell, menu, rail actions) .nav-ico — top-bar section icon, active state in cyan ---------------------------------------------------------------------------- */ .search { display: flex; align-items: center; gap: var(--s2); height: 38px; padding: 0 var(--s4); background: var(--field); border: 1px solid transparent; border-radius: var(--r-pill); color: var(--muted); transition: border-color var(--t), background var(--t); } .search:focus-within { background: var(--surface); border-color: var(--line); } .search .ico { color: var(--muted); flex: none; } .search input { border: 0; background: none; outline: none; width: 100%; color: var(--ink); font-size: 14px; font-weight: 500; } .search input::placeholder { color: var(--muted); font-weight: 400; } .search--topbar { width: clamp(180px, 26vw, 320px); } .search--block { width: 100%; height: 34px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 38px; padding: 0 var(--s5); border: 1px solid transparent; border-radius: var(--r-pill); font-weight: 600; font-size: 14px; white-space: nowrap; transition: background var(--t), color var(--t), border-color var(--t), transform var(--t); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--cyan); color: #fff; } .btn--primary:hover { background: var(--cyan-700); } .btn--ghost { background: transparent; color: var(--cyan); border-color: var(--cyan); } .btn--ghost:hover { background: rgba(40,194,213,.10); } .btn--sm { height: 30px; padding: 0 var(--s4); font-size: 13px; } .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: transparent; border: 0; color: var(--ink); position: relative; transition: background var(--t), color var(--t); } .icon-btn:hover { background: var(--field); } .icon-btn--sm { width: 32px; height: 32px; } /* coral notification dot, e.g. on the bell */ .icon-btn--dot::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--surface); } .nav-ico { display: inline-grid; place-items: center; width: 46px; height: 40px; border-radius: var(--r); background: transparent; border: 0; color: var(--muted); transition: color var(--t), background var(--t); } .nav-ico:hover { color: var(--ink-2); background: var(--field); } .nav-ico[aria-current="page"], .nav-ico.is-active { color: var(--ink); } .nav-ico[aria-current="page"] .ico { stroke-width: 2.4; } .nav { display: flex; align-items: center; gap: var(--s2); } /* ---------------------------------------------------------------------------- 7. IDENTITY — avatars + badges .avatar — circular person avatar; monogram by default (consent-safe), colour set via --c. .avatar--on adds a green online dot. .ava-sq — rounded-square group icon with initials, colour via --c. .badge — coral count pill (also .badge--dark variant from the feed). ---------------------------------------------------------------------------- */ .avatar { --c: var(--muted); position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .01em; overflow: hidden; } .avatar--sm { width: 32px; height: 32px; font-size: 12px; } .avatar--lg { width: 56px; height: 56px; font-size: 18px; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar--on::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--green); border: 2px solid var(--surface); } .ava-sq { --c: var(--muted); flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .03em; text-align: center; } .ava-sq--sm { width: 34px; height: 34px; border-radius: 9px; font-size: 10px; } .ava-circle-lg { /* group-profile big circle (Physics 101) */ width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--c, var(--indigo)); color: #fff; font-weight: 700; font-size: 13px; } .badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-sm); background: var(--coral); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; } .badge--dark { background: var(--ink); } /* wrapper that hangs a small status dot off any avatar (e.g. CHEM II active) */ .av-wrap { position: relative; flex: none; } .av-wrap .status-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface); } .status-dot--cyan { background: var(--cyan); } .status-dot--green { background: var(--green); } /* ---------------------------------------------------------------------------- 8. LISTS — rail sections + group rows .section-label — small muted uppercase section header .group-row — avatar + (name / subtitle) + optional trailing badge ---------------------------------------------------------------------------- */ .section-label { display: flex; align-items: center; justify-content: space-between; margin: var(--s5) 0 var(--s3); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .section-label:first-child { margin-top: 0; } .section-label--soft { font-weight: 600; text-transform: none; font-size: 13px; color: var(--muted); } .group-list { display: flex; flex-direction: column; } .group-row { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; padding: var(--s3) var(--s2); border: 0; background: none; border-radius: var(--r); transition: background var(--t); } .group-row + .group-row { border-top: 1px solid var(--line-2); } .group-row:hover { background: var(--field); } .group-row__body { min-width: 0; flex: 1; } .group-row__name { font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .group-row__sub { font-weight: 400; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .group-row__sub--light { font-weight: 300; } /* ---------------------------------------------------------------------------- 9. CARDS — generic surface + the post card ---------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); } .card--pad { padding: var(--s5); } /* Audience home: kept above filtered posts, including on narrow screens. */ .seat-home { padding: var(--s5); margin-bottom: var(--s5); border-top: 4px solid var(--cyan-700); } .seat-home h1 { font-size: 24px; line-height: 1.3; margin: 8px 0 20px; } .seat-home h2 { font-size: 16px; margin: 24px 0 12px; } .seat-home blockquote { margin: 14px 0; padding-left: 14px; border-left: 2px solid var(--cyan-700); } .seat-home__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } .seat-home__links a { font-weight: 600; text-decoration: underline; } .seat-home__doors { padding-left: 20px; overflow-wrap: anywhere; } .seat-home__ask { display: grid; gap: 10px; margin-top: 24px; } .seat-home__ask label { font-weight: 600; } .seat-home__ask textarea { width: 100%; box-sizing: border-box; padding: 12px; font: inherit; resize: vertical; } .seat-home__ask button { justify-self: start; } .seat-home [data-home-answer] { overflow-wrap: anywhere; } .rail-card { /* lighter card used inside the explorer rail */ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); } .post { margin-bottom: var(--s5); overflow: hidden; } .post__head { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s4) var(--s5) 0; } .post__id { min-width: 0; flex: 1; } .post__name { font-weight: 700; font-size: 15px; color: var(--ink); } .post__ctx { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; } .post__ctx .src { color: var(--ink-2); font-weight: 600; } .post__ctx .yt { color: var(--youtube); font-weight: 700; } .post__ctx .where { color: var(--ink-2); font-weight: 600; } .post__time { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); margin-top: 3px; font-size: 12px; } .post__body { padding: var(--s3) var(--s5) var(--s4); font-size: 14.5px; color: var(--ink-2); } .post__menu { flex: none; } /* reaction summary row (emoji + count) */ .reaction { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s5); } .reaction__emoji { font-size: 17px; line-height: 1; } .reaction__count { font-weight: 700; font-size: 13px; color: var(--muted); } .reaction__meta { margin-left: auto; font-size: 12.5px; color: var(--muted); font-weight: 500; } /* action bar: like/dislike left, heart/comment/share right */ .actions { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s5); border-top: 1px solid var(--line); } .actions__right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); } .act { display: inline-flex; align-items: center; gap: var(--s2); border: 0; background: none; padding: 6px; border-radius: var(--r-sm); color: var(--muted); font-weight: 700; font-size: 13px; transition: color var(--t), background var(--t); } .act:hover { background: var(--field); color: var(--ink-2); } .act .ico { color: inherit; } .act.is-on.act--up { color: var(--cyan); } .act.is-on.act--down { color: var(--ink); } .act.is-on.act--heart{ color: var(--coral); } .act.is-on.act--heart .ico { fill: var(--coral); } /* comment composer */ .composer { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s5) var(--s5); } .composer__input { flex: 1; min-width: 0; height: 38px; padding: 0 var(--s4); background: var(--field); border: 1px solid transparent; border-radius: var(--r-pill); outline: none; font-size: 13.5px; color: var(--ink); transition: border-color var(--t), background var(--t); } .composer__input::placeholder { color: var(--muted); } .composer__input:focus { background: var(--surface); border-color: var(--line); } .send { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 0; background: var(--cyan); color: #fff; transition: background var(--t), transform var(--t); } .send:hover { background: var(--cyan-700); } .send:active { transform: scale(.94); } /* ---------------------------------------------------------------------------- 10. MEDIA — gradient "photographs" We render media as layered CSS gradients (role="img" + aria-label) so the app is fully self-contained and never shows a broken image. Each .ph-* evokes the subject from the Figma comps. ---------------------------------------------------------------------------- */ .media { position: relative; aspect-ratio: 16 / 9; background: var(--dark); overflow: hidden; } .media--flush { } /* full-bleed inside a post (no side padding) */ .media[role="img"] { background-size: cover; background-position: center; } .ph { background-color: #2a3340; } .ph-football { background: radial-gradient(120% 130% at 72% 18%, rgba(214,30,52,.0) 30%, rgba(20,8,12,.85) 100%), radial-gradient(80% 90% at 60% 35%, #c9163a 0%, #7d1022 45%, #2a0a12 100%), linear-gradient(120deg, #b3922f 0%, transparent 35%); } .ph-woods { background: radial-gradient(120% 120% at 30% 0%, rgba(0,0,0,0) 30%, rgba(6,20,12,.8) 100%), linear-gradient(160deg, #3f8a4d 0%, #1f5a32 45%, #0c2a18 100%); } .ph-studio { background: radial-gradient(90% 120% at 50% 22%, #3f86c8 0%, #1d4f86 45%, #0c2034 100%); } .ph-lake { background: linear-gradient(180deg, #cfe9f1 0%, #9fd3e0 16%, #2ea7bf 40%, #1782a0 64%, #0c5a72 100%); } .ph-road { background: linear-gradient(160deg, #d8b06a 0%, #9c6b35 45%, #3a2414 100%); } .ph-mountain { background: linear-gradient(160deg, #b9c1cd 0%, #7c8794 48%, #3c454f 100%); } .ph-canyon { background: radial-gradient(120% 120% at 32% 28%, #ff9d4d 0%, #d64d6e 52%, #3a1430 100%); } .ph-peaks { background: linear-gradient(160deg, #a9cdef 0%, #4a78ac 50%, #14233a 100%); } /* YouTube-style play button, centered over a video thumb */ .play { position: absolute; inset: 0; margin: auto; width: 62px; height: 44px; border: 0; border-radius: 12px; background: rgba(255,0,0,.92); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.3); transition: transform var(--t), background var(--t); } .play:hover { transform: scale(1.06); background: #ff0000; } .play::before { content: ""; width: 0; height: 0; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 3px; } /* 4-up gallery row under a post */ .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); padding: var(--s4) var(--s5); } .gallery__cell { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; border: 0; padding: 0; } .gallery__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20,25,40,.5); color: #fff; font-weight: 800; font-size: 18px; } /* ---------------------------------------------------------------------------- 11. TREND — horizontal row of discovery cards .trend-card has an image/solid background, a dark bottom gradient for legible white text, a title, a one-line teaser, and a .tag pill (dark or coloured). ---------------------------------------------------------------------------- */ .trend { margin-bottom: var(--s6); } .trend-row { display: flex; gap: var(--s3); overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .trend-row::-webkit-scrollbar { height: 8px; } .trend-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); } .trend-card { position: relative; flex: 1 1 0; min-width: 149px; aspect-ratio: 3 / 4; max-height: 188px; border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s4); color: #fff; scroll-snap-align: start; text-align: left; border: 0; background-color: var(--dark); transition: transform var(--t), box-shadow var(--t); } .trend-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); } .trend-card--coral { background: var(--coral); } .trend-card--green { background: var(--green); } .trend-card--img::after { /* dark bottom scrim for text legibility */ content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,10,14,.92) 4%, rgba(8,10,14,.35) 42%, rgba(8,10,14,0) 72%); } .trend-card > * { position: relative; z-index: 1; } .trend-card__title { font-weight: 800; font-size: 16px; line-height: 1.12; letter-spacing: -.01em; } .trend-card__teaser { margin-top: 4px; font-size: 11.5px; font-weight: 400; line-height: 1.25; color: rgba(255,255,255,.82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* tag pill (category) */ .tag { align-self: flex-start; margin-top: var(--s3); display: inline-flex; align-items: center; padding: 4px 9px; border-radius: var(--r-sm); background: var(--dark); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; } /* ---------------------------------------------------------------------------- 12. CHIPS + FILTERS .chip — soft/outline pill used for statuses + filters .filter — radio/checkbox style row (Latest / Hot / Popular) .sort — the "Sort · Hot ▾" control with a popover menu ---------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; background: var(--field); color: var(--ink-2); border: 1px solid transparent; } .chip--cyan { background: rgba(40,194,213,.14); color: var(--cyan-700); } .chip--coral { background: rgba(245,54,92,.12); color: var(--coral); } .chip--outline { background: transparent; border-color: var(--line); color: var(--muted); } .filters { display: flex; flex-direction: column; gap: var(--s3); } .filter { display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; font-size: 14px; color: var(--ink-2); } .filter input { position: absolute; opacity: 0; width: 0; height: 0; } .filter__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted-2); display: grid; place-items: center; transition: border-color var(--t); } .filter__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; transition: background var(--t); } .filter input:checked + .filter__dot { border-color: var(--cyan); } .filter input:checked + .filter__dot::after { background: var(--cyan); } .filter input:focus-visible + .filter__dot { box-shadow: var(--ring); } .sort { display: flex; align-items: center; justify-content: space-between; } .sort__label { font-weight: 600; color: var(--ink); font-size: 15px; } .dropdown { position: relative; } .dropdown__btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--r-pill); background: var(--field); border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 13px; } .dropdown__btn .flame { color: var(--coral); } .dropdown__btn .ico { color: var(--muted); transition: transform var(--t); } .dropdown__btn[aria-expanded="true"] .ico { transform: rotate(180deg); } .dropdown__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 140px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); display: none; } .dropdown.is-open .dropdown__menu { display: block; } .dropdown__opt { display: flex; align-items: center; gap: var(--s2); width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; color: var(--ink-2); text-align: left; } .dropdown__opt:hover { background: var(--field); } .dropdown__opt[aria-selected="true"] { color: var(--cyan-700); } .dropdown__opt .ico { margin-left: auto; color: var(--cyan); visibility: hidden; } .dropdown__opt[aria-selected="true"] .ico { visibility: visible; } /* .filterbar / .filter-pill — a reusable row of toggle pills (WhatsGood + DagMap filter rows). The active pill is the dark filled state from the comp. */ .filterbar { display: flex; flex-wrap: wrap; gap: var(--s2); } .filter-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background var(--t), color var(--t), border-color var(--t); } .filter-pill:hover { background: var(--field); } .filter-pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; } .filter-pill__n { font-weight: 700; opacity: .7; } /* ---------------------------------------------------------------------------- 13. EXPLORER RAIL widgets .highlight — Today-Highlights line items .trending — numbered "Trending Communities" list with a join affordance ---------------------------------------------------------------------------- */ .rail-heading { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s3); } .rail-section { margin-bottom: var(--s5); } .rail-section__title { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3); } .highlight { display: flex; align-items: flex-start; gap: var(--s2); padding: 7px 0; font-size: 13.5px; color: var(--ink-2); } .highlight + .highlight { border-top: 1px solid var(--line-2); } .highlight__icon { flex: none; font-size: 15px; line-height: 1.3; } .trending { display: flex; flex-direction: column; } .trend-item { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; } .trend-item + .trend-item { border-top: 1px solid var(--line-2); } .trend-item__rank { width: 14px; flex: none; text-align: center; font-weight: 700; font-size: 12px; color: var(--muted-2); } .trend-item__body { flex: 1; min-width: 0; } .trend-item__name { font-weight: 700; font-size: 13.5px; color: var(--ink); } .trend-item__sub { font-size: 11.5px; color: var(--muted); } .join { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--cyan); transition: background var(--t), color var(--t), border-color var(--t); } .join:hover { background: rgba(40,194,213,.10); } .join.is-joined { background: var(--cyan); border-color: var(--cyan); color: #fff; } /* ---------------------------------------------------------------------------- 14. ICONS 24px stroke icons drawn from a sprite; .ico sizes + inherits color. ---------------------------------------------------------------------------- */ .ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ico--sm { width: 18px; height: 18px; } .ico--lg { width: 26px; height: 26px; } .ico--fill { fill: currentColor; stroke: none; } /* dots / solid glyphs */ /* sprite host is hidden but present */ .svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* heading shown above the post feed */ .feed-heading { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s3); } /* the mobile drawer scrim (left rail on small screens) */ .scrim { position: fixed; inset: 0; z-index: 40; background: rgba(20,25,40,.4); opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t); } /* ============================================================================ RESPONSIVE >1180 : 3 columns ≤1180 : drop the explorer rail (2 columns) ≤820 : left rail collapses to an off-canvas drawer (hamburger opens it) ≤560 : feed full-bleed padding tightens; topbar search hides usable down to 380px ========================================================================= */ /* hamburger lives in the topbar-right per the comp; it opens the left drawer (only the drawer is responsive — at wide sizes the left rail is always shown, so the button simply has no rail to reveal). */ .menu-btn { display: inline-grid; } @media (max-width: 1180px) { .app { grid-template-columns: var(--rail-l) minmax(0, 1fr); } .rail--right { display: none; } } @media (max-width: 820px) { .app { grid-template-columns: minmax(0, 1fr); } .rail--left { position: fixed; top: 0; left: 0; z-index: 45; width: 280px; height: 100vh; transform: translateX(-100%); transition: transform var(--t); box-shadow: var(--shadow-pop); padding-top: var(--s5); } body.drawer-open .rail--left { transform: translateX(0); } body.drawer-open .scrim { opacity: 1; visibility: visible; } .feed { padding-top: var(--s5); } } @media (max-width: 560px) { .topbar { gap: var(--s3); padding: 0 var(--s4); } .search--topbar { display: none; } /* on phones the hamburger drawer is the primary nav, so the centred section icons fold away to keep the bar (and the feed) uncramped to 380px */ .nav { display: none; } .topbar__user-name { display: none; } .feed { padding-left: var(--s4); padding-right: var(--s4); } .post__head, .post__body, .reaction, .actions, .composer, .gallery { padding-left: var(--s4); padding-right: var(--s4); } .trend-card { min-width: 142px; } } @media (max-width: 400px) { .actions { gap: var(--s2); } .reaction__meta { display: none; } } /* ===== Real playable media (src-backed posts: video/audio/image/doc) ======== Used when a post's media object carries a `src` under ./content (real-data feeds built by scripts/dagm8-build-feed.py). Demo posts without a src fall back to the gradient .media placeholder above. */ .media--real { background: #0c0f14; } .media--real video, .media--real img { width: 100%; height: 100%; object-fit: contain; display: block; background: #0c0f14; } .media-audio { margin-top: 4px; padding: 12px 14px; background: #1a212b; border-radius: 10px; } .media-audio audio { width: 100%; display: block; } .media-doc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; padding: 14px 16px; background: #1a212b; border-radius: 10px; } .doc-link { color: #28c2d5; font-weight: 700; text-decoration: none; white-space: nowrap; } .doc-link:hover { text-decoration: underline; } .doc-link__meta { color: #7a8696; font-size: 12px; } /* ---------------------------------------------------------------------------- 15. ASK · client-side grounding ("ask this content" → cited answer) ---------------------------------------------------------------------------- */ .act--ask { color: var(--cyan-700); font-weight: 700; } .act--ask .act__label { font-size: 13px; } .act--ask[aria-expanded="true"] { color: var(--cyan); } .ask { margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s3); } .ask__form { display: flex; gap: var(--s2); } .ask__input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px; color: var(--ink); background: var(--field); border: 1px solid transparent; border-radius: var(--r-pill); padding: 10px 16px; transition: border-color var(--t); } .ask__input:focus { outline: none; border-color: var(--cyan); background: var(--surface); } .ask__send { flex: 0 0 auto; font: inherit; font-weight: 700; font-size: 13px; color: #fff; background: var(--cyan); border: 0; border-radius: var(--r-pill); padding: 0 18px; cursor: pointer; transition: background var(--t); } .ask__send:hover { background: var(--cyan-700); } .ask__suggest { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); } .ask__suggest-chip { font: inherit; font-size: 12px; color: var(--cyan-700); cursor: pointer; background: var(--field); border: 1px solid transparent; border-radius: var(--r-pill); padding: 5px 12px; transition: border-color var(--t); } .ask__suggest-chip:hover { border-color: var(--cyan); } .ask__answer:empty { display: none; } .ask__answer { margin-top: var(--s3); } .ask__status { color: var(--muted); font-size: 13px; margin: 0; } .ask__snippet { color: var(--ink); font-size: 14px; line-height: 1.5; margin: 0 0 var(--s3); padding: var(--s3) var(--s4); background: var(--field); border-radius: var(--r); border-left: 3px solid var(--cyan); } .ask__cites { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; } .ask__cites-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .ask__cite { font: inherit; font-size: 12px; color: var(--ink); cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; transition: border-color var(--t), color var(--t); text-align: left; } .ask__cite:hover { border-color: var(--cyan); color: var(--cyan-700); } .ask__cite-src { font-weight: 700; color: var(--cyan-700); } .post--cited { animation: ask-cited 1.6s ease; } @keyframes ask-cited { 0%, 100% { box-shadow: var(--shadow-card); } 20%, 60% { box-shadow: var(--ring), var(--shadow-card); } } @media (prefers-reduced-motion: reduce) { .post--cited { animation: none; box-shadow: var(--ring), var(--shadow-card); } } /* ---------------------------------------------------------------------------- 16. GLOBAL ASK · the topbar search asks the whole feed ---------------------------------------------------------------------------- */ .search--topbar { position: relative; } .search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; min-width: 340px; max-height: 70vh; overflow: auto; padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-pop); } .search-results__status { color: var(--muted); font-size: 13px; margin: 0; } .search-results__snippet { color: var(--ink); font-size: 14px; line-height: 1.5; margin: 0 0 var(--s2); padding: var(--s3); background: var(--field); border-radius: var(--r); border-left: 3px solid var(--cyan); } .search-results__list { display: flex; flex-direction: column; gap: 2px; } .search-results__hit { display: flex; gap: var(--s2); align-items: baseline; text-align: left; font: inherit; background: none; border: 0; border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; } .search-results__hit:hover { background: var(--field); } .search-results__src { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--cyan-700); text-transform: uppercase; letter-spacing: .03em; } .search-results__title { font-size: 13px; color: var(--ink); } /* ---------------------------------------------------------------------------- 17. FLOATING POST PAGE · click a post to open it focused ---------------------------------------------------------------------------- */ body.modal-open { overflow: hidden; } .post-modal-scrim { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 5vh var(--s4) var(--s6); overflow: auto; background: rgba(20, 25, 40, .55); animation: modal-fade var(--t); } .post-modal { position: relative; width: 100%; max-width: 720px; margin: auto; animation: modal-rise 200ms cubic-bezier(.3, .7, .4, 1); } .post-modal .post { margin: 0; box-shadow: var(--shadow-pop); } .post-modal .media--real video { max-height: 64vh; } .post-modal__close { position: absolute; top: -14px; right: -14px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; background: var(--ink); color: #fff; font-size: 15px; box-shadow: var(--shadow-pop); } .post-modal__close:hover { background: var(--cyan-700); } @keyframes modal-fade { from { opacity: 0; } } @keyframes modal-rise { from { opacity: 0; transform: translateY(12px); } } @media (prefers-reduced-motion: reduce) { .post-modal-scrim, .post-modal { animation: none; } } @media (max-width: 560px) { .post-modal-scrim { padding: 0; } .post-modal__close { top: 8px; right: 8px; } } /* ---------------------------------------------------------------------------- 18. DEAL-THEME RAIL · per-partner left rail (click a theme to filter) ---------------------------------------------------------------------------- */ .theme-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-radius: var(--r); padding: 8px 10px; cursor: pointer; transition: background var(--t); } .theme-row:hover, .theme-row.is-active { background: var(--field); } .theme-row.is-active .theme-row__name { color: var(--cyan-700); } .theme-row__name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .theme-row__count { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 9px; } /* deal right rail: What's new (latest content) + Browse themes */ .rail-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-radius: var(--r); padding: 7px 8px; cursor: pointer; transition: background var(--t); } .rail-item:hover { background: var(--field); } .rail-item__body { min-width: 0; display: flex; flex-direction: column; } .rail-item__title { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rail-item__sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .glance-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-radius: var(--r-sm); padding: 6px 8px; cursor: pointer; transition: background var(--t); } .glance-row:hover, .glance-row.is-active { background: var(--field); } .glance-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--cyan)); } .glance-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .glance-count { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); } /* deal feed: hide the student-screen section nav (WhatsGood / DagMap / Groups); a partner uses Explorer + the ask. */ body.deal-feed .nav .nav-ico:not([data-route="#explorer"]) { display: none; } /* seat space (one operator's front door): only their surfaces. No student screens, no demo right column; the main column takes the freed width. */ body.seat-feed .nav .nav-ico:not([data-route="#explorer"]) { display: none; } body.seat-feed .app { grid-template-columns: var(--rail-l) minmax(0, 1fr); } body.seat-feed .rail--right, body.seat-feed #rail-right { display: none; } body.seat-feed a.group-row { text-decoration: none; color: inherit; } /* seat post cards: keep Open-document and Ask; the vote counts, hearts, share and the comment composer are template furniture with demo numbers. */ body.seat-feed .actions .act:not(.act--ask) { display: none; } body.seat-feed .composer { display: none; }