/* * Durvog.com — public design system * * Deep green for the platform's own voice, amber and red reserved for urgency, * and a soft off-white page so a wall of Bengali text stays readable. Every * colour, radius and shadow used anywhere on the public site is declared here * once; views compose classes, they do not invent styles. */ :root { --green-900: #064e3b; --green-800: #065f46; --green-700: #0f766e; --green-600: #15803d; --green-500: #16a34a; --green-100: #dcfce7; --green-50: #f0fdf4; --red-600: #dc2626; --red-100: #fee2e2; --amber-600: #d97706; --amber-100: #fef3c7; --blue-600: #2563eb; --blue-100: #dbeafe; --violet-600: #7c3aed; --violet-100: #ede9fe; --ink: #111827; --ink-2: #374151; --muted: #6b7280; --line: #e5e7eb; --line-soft: #f1f5f4; --paper: #ffffff; --ground: #f6f8f7; --radius: 14px; --radius-sm: 10px; --radius-lg: 20px; --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .05); --shadow-lg: 0 8px 30px rgba(15, 23, 42, .10); --container: 1240px; /* Feed-style pages (the forum) run wider than article-style ones. */ --container-wide: 1560px; /* Surfaces that used to be a literal #fff. Naming them is what makes the dark theme below a token swap rather than a rewrite. */ --surface: #ffffff; --surface-2: #f8fafc; --header: rgba(255, 255, 255, .95); --shade: rgba(15, 23, 42, .06); /* Ink on a filled primary button, and the tag pill's border. Named so the dark theme can restate them. */ --on-primary: #ffffff; --tag-line: #d6f0e0; } /* * Dark theme. * * Applied when the visitor has chosen it, or when they have expressed no * preference on this site and their system asks for dark. The toggle writes * data-theme on , so an explicit light choice always wins over the OS. */ :root[data-theme="dark"] { --green-700: #34d399; --green-600: #34d399; --green-500: #10b981; --green-100: #14532d; --green-50: #0f2d21; --red-100: #4c1d1d; --amber-100: #4a3410; --blue-100: #1e3a5f; --violet-100: #332b57; --ink: #e5e7eb; --ink-2: #cbd5e1; --muted: #94a3b8; --line: #2b3543; --line-soft: #232c38; --paper: #161d27; --ground: #0f151d; --surface: #161d27; --surface-2: #1c2531; --header: rgba(15, 21, 29, .95); --shade: rgba(0, 0, 0, .35); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25); --shadow-lg: 0 8px 30px rgba(0, 0, 0, .45); --flash-ink: #86efac; --notice-ink: #fcd34d; --info-ink: #93c5fd; --error-ink: #fca5a5; /* Text that sits on a dark-green fill, and the ink for a filled button whose green is now light. Without these, green-on-green disappears. */ --green-800: #86efac; --green-900: #bbf7d0; --on-primary: #05271a; --tag-line: #1f5137; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --green-700: #34d399; --green-600: #34d399; --green-500: #10b981; --green-100: #14532d; --green-50: #0f2d21; --red-100: #4c1d1d; --amber-100: #4a3410; --blue-100: #1e3a5f; --violet-100: #332b57; --ink: #e5e7eb; --ink-2: #cbd5e1; --muted: #94a3b8; --line: #2b3543; --line-soft: #232c38; --paper: #161d27; --ground: #0f151d; --surface: #161d27; --surface-2: #1c2531; --header: rgba(15, 21, 29, .95); --shade: rgba(0, 0, 0, .35); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25); --shadow-lg: 0 8px 30px rgba(0, 0, 0, .45); --flash-ink: #86efac; --notice-ink: #fcd34d; --info-ink: #93c5fd; --error-ink: #fca5a5; --green-800: #86efac; --green-900: #bbf7d0; --on-primary: #05271a; --tag-line: #1f5137; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: 'Hind Siliguri', 'Noto Sans Bengali', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.7; } a { color: var(--green-600); text-decoration: none; } a:hover { color: var(--green-800); } h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.35; font-weight: 700; color: var(--ink); } h1 { font-size: 2rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.12rem; } p { margin: 0 0 1rem; } img { max-width: 100%; height: auto; display: block; } .container { width: min(100% - 2rem, var(--container)); margin-inline: auto; } .container--wide { width: min(100% - 2rem, var(--container-wide)); } .stack > * + * { margin-top: 1rem; } .muted { color: var(--muted); } .small { font-size: .875rem; } .tiny { font-size: .8rem; } .strong { font-weight: 600; } .center { text-align: center; } .nowrap { white-space: nowrap; } /* ---------------------------------------------------------------- header */ .site-header { position: sticky; top: 0; z-index: 40; background: var(--header); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .site-header__inner { display: flex; align-items: center; gap: 1rem; width: min(100% - 2rem, var(--container-wide)); margin-inline: auto; height: 76px; min-width: 0; } .brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); flex: none; } /* * The brand lockup: wordmark image with the tagline set beneath it. * * The tagline is text, not part of the picture, so it stays crisp at any * size and a screen reader can read it. The rules on either side are drawn * with pseudo-elements rather than typed dashes, so they stretch to fill * whatever width the wordmark happens to take. */ .lockup { display: flex; flex-direction: column; align-items: stretch; gap: .18rem; } .lockup__mark { width: auto; display: block; object-fit: contain; } /* One wordmark per theme. Both are in the DOM; only one is ever shown, and the swap follows the same rules as every other themed colour. */ .lockup__mark--dark { display: none; } :root[data-theme="dark"] .lockup__mark--light { display: none; } :root[data-theme="dark"] .lockup__mark--dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lockup__mark--light { display: none; } :root:not([data-theme="light"]) .lockup__mark--dark { display: block; } } .lockup__tag { display: flex; align-items: center; gap: .4rem; font-family: 'Inter', system-ui, sans-serif; color: var(--muted); font-weight: 600; white-space: nowrap; } .lockup__tag b { color: var(--green-600); font-weight: 800; } .lockup__tag::before, .lockup__tag::after { content: ''; flex: 1; height: 1px; background: var(--line); } .lockup--md .lockup__mark { height: 46px; } .lockup--md .lockup__tag { font-size: .62rem; letter-spacing: .16em; } .lockup--sm .lockup__mark { height: 32px; } .lockup--sm .lockup__tag { font-size: .55rem; letter-spacing: .13em; } .lockup--lg .lockup__mark { height: 56px; } .lockup--lg .lockup__tag { font-size: .72rem; letter-spacing: .18em; } /* On the dark footer the rules and muted text need lifting. */ .footer-brand .lockup__tag { color: #94a3b8; } .footer-brand .lockup__tag b { color: #4ade80; } .footer-brand .lockup__tag::before, .footer-brand .lockup__tag::after { background: rgba(255, 255, 255, .18); } .brand__mark { width: 40px; height: 40px; flex: none; object-fit: contain; } .brand__name { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } .brand__name span { color: var(--green-600); } .brand__tag { display: block; font-size: .68rem; color: var(--muted); font-weight: 500; } .site-nav { display: flex; align-items: center; gap: .1rem; margin-inline-start: .75rem; min-width: 0; } .site-nav a { /* Smaller and tighter than the body text: the header carries six items, a search box and two buttons, and every extra pixel here is a pixel the search box loses first. */ padding: .45rem .6rem; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: .86rem; letter-spacing: -.01em; /* Two-word items like "আমার এলাকা" must not wrap and grow the header. */ white-space: nowrap; } .site-nav a:hover { background: var(--green-50); color: var(--green-700); } .site-nav a.is-active { color: var(--green-700); background: var(--green-50); } /* বাজারদর is the section people come back to daily, so it wears a tinted pill instead of plain nav text. Amber, not green — green is the platform's own voice and a green pill here would read as "this page is active". */ .site-nav a.nav-hl { background: var(--red-100); color: var(--error-ink, #991b1b); box-shadow: inset 0 0 0 1px var(--red-600); } .site-nav a.nav-hl i { font-size: .82em; margin-inline-end: .25rem; } .site-nav a.nav-hl:hover { background: var(--red-100); color: var(--error-ink, #991b1b); } /* A price posted since this browser last opened বাজারদর. The chip breathes rather than blinks — a fade of the background only, so nothing moves and nothing shifts the layout, and it settles once the page has been read. */ .site-nav a.nav-hl.is-fresh { animation: nav-hl-fade 2.4s ease-in-out infinite; } @keyframes nav-hl-fade { 0%, 100% { background: var(--red-100); } 50% { background: #fca5a5; /* for browsers without color-mix */ background: color-mix(in srgb, var(--red-600) 38%, var(--red-100)); } } @media (prefers-reduced-motion: reduce) { .site-nav a.nav-hl.is-fresh { animation: none; } } /* On its own page the active green still wins, or the bar would show two "you are here" signals at once. */ .site-nav a.nav-hl.is-active { background: var(--green-50); color: var(--green-700); box-shadow: inset 0 0 0 1px var(--green-500); } .header-tools { margin-inline-start: auto; display: flex; align-items: center; gap: .45rem; flex: none; } .search-box { position: relative; } /* The generic input[type=search] rule in the forms section matches this input too and is declared later, so this one carries the extra class it needs to keep its own padding — without it the placeholder sits under the icon. */ .site-header .search-box { flex: 0 1 260px; min-width: 0; } .site-header .search-box input { height: 40px; width: 100%; padding: 0 .9rem 0 2.4rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; font-size: .9rem; } .site-header .search-box input:focus { outline: 2px solid var(--green-500); outline-offset: 1px; border-color: transparent; } .search-box i { position: absolute; inset-block: 0; left: .85rem; display: grid; align-items: center; color: var(--muted); font-size: .85rem; } .icon-btn { flex: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; position: relative; } .icon-btn:hover { background: var(--green-50); color: var(--green-700); } .icon-btn__dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--red-600); color: #fff; border-radius: 999px; font-size: .68rem; display: grid; place-items: center; font-weight: 700; } .nav-toggle { display: none; } /* Stands in for the search box once the bar runs out of room. */ .search-jump { display: none; } /* Controls that move into the mobile drawer when the bar drops them. */ .site-nav .nav-extra { display: none; gap: .5rem; padding-top: .5rem; border-top: 1px solid var(--line-soft); margin-top: .4rem; } .site-nav .nav-extra a, .site-nav .nav-extra button { flex: 1; justify-content: center; } /* ----------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .62rem 1.05rem; border-radius: 10px; border: 1px solid transparent; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .15s ease, box-shadow .15s ease, transform .05s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--green-600); color: var(--on-primary); box-shadow: 0 1px 2px rgba(21, 128, 61, .3); } .btn--primary:hover { background: var(--green-500); color: var(--on-primary); } .btn--ghost { background: var(--surface); border-color: var(--line); color: var(--ink-2); } .btn--ghost:hover { background: var(--green-50); color: var(--green-700); border-color: var(--green-100); } .btn--danger { background: var(--red-600); color: #fff; } .btn--soft { background: var(--green-50); color: var(--green-700); } .btn--sm { padding: .38rem .7rem; font-size: .85rem; border-radius: 8px; } .btn--lg { padding: .85rem 1.5rem; font-size: 1.05rem; border-radius: 12px; } .btn--block { width: 100%; } /* ------------------------------------------------------------------- cards */ .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .card__body { padding: 1.15rem; } .card__head { display: flex; align-items: center; gap: .6rem; padding: .95rem 1.15rem; border-bottom: 1px solid var(--line-soft); } .card__head h2, .card__head h3 { margin: 0; font-size: 1.05rem; } .card__head .card__more { margin-inline-start: auto; font-size: .85rem; font-weight: 600; } .grid { display: grid; gap: 1rem; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; } /* The rails follow the reader down the feed. They scroll internally when they are taller than the viewport, so nothing becomes unreachable. */ @media (min-width: 1081px) { .layout__aside { position: sticky; top: 92px; max-height: calc(100vh - 108px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .layout__aside::-webkit-scrollbar { width: 6px; } .layout__aside::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; } .layout__aside:hover::-webkit-scrollbar-thumb { background: var(--muted); } } .layout--right { grid-template-columns: minmax(0, 1fr) 320px; } .layout--left { grid-template-columns: 260px minmax(0, 1fr); } /* ------------------------------------------------------------------- chips */ .chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.6; background: var(--line-soft); color: var(--ink-2); } .chip--green { background: var(--green-100); color: var(--green-800); } .chip--red { background: var(--red-100); color: #991b1b; } .chip--amber { background: var(--amber-100); color: #92400e; } .chip--blue { background: var(--blue-100); color: #1e40af; } .chip--violet { background: var(--violet-100); color: #5b21b6; } .chip--teal { background: #ccfbf1; color: #115e59; } .chip--grey { background: #f1f5f9; color: #475569; } .chip--outline { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); } .tag { display: inline-block; padding: .25rem .65rem; border-radius: 999px; background: var(--green-50); color: var(--green-700); font-size: .82rem; font-weight: 600; border: 1px solid var(--tag-line); } .tag:hover { background: var(--green-100); color: var(--green-800); } /* -------------------------------------------------------------------- hero */ .hero { background: radial-gradient(1000px 400px at 15% -10%, rgba(22, 163, 74, .12), transparent 60%), linear-gradient(180deg, var(--surface), var(--ground)); border-bottom: 1px solid var(--line); padding: 3rem 0 2.5rem; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; align-items: center; } .hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -.02em; } .hero p.lead { font-size: 1.08rem; color: var(--ink-2); max-width: 60ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 1rem; } .hero__trust { font-size: .92rem; color: var(--muted); } .hero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); } .stat__value { font-size: 1.6rem; font-weight: 800; line-height: 1.2; color: var(--green-700); } .stat__label { font-size: .85rem; color: var(--muted); } /* -------------------------------------------------------------- categories */ .cat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; } .cat { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; padding: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease; } .cat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--ink); } .cat__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: .95rem; } .cat__name { font-weight: 600; font-size: .92rem; line-height: 1.4; } .cat__count { font-size: .78rem; color: var(--muted); } /* ------------------------------------------------------------ report cards */ .report-card { display: flex; gap: 1rem; padding: 1.1rem; } .report-card + .report-card { border-top: 1px solid var(--line-soft); } .report-card__body { flex: 1; min-width: 0; } .report-card__title { font-size: 1.05rem; font-weight: 700; margin: .3rem 0; } .report-card__title a { color: var(--ink); } .report-card__title a:hover { color: var(--green-700); } .report-card__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .82rem; color: var(--muted); } .report-card__thumb { width: 150px; height: 105px; border-radius: var(--radius-sm); object-fit: cover; background: var(--line-soft); flex: none; } .report-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; } .severity-bar { width: 4px; border-radius: 4px; flex: none; } /* --------------------------------------------------------------- vote rail */ /* * One rail, three shapes: --column beside a card, --rail beside a forum * thread, --row inline among the actions under a comment. Green for support, * red for objection, and the score takes the colour of whichever arrow this * browser pressed — so you can see your own vote at a glance, the way Reddit * does it. The two tallies behind the net score live in .vote__tip, which * opens on hover, on keyboard focus, or on a tap on the number. */ .vote { position: relative; display: flex; align-items: center; gap: .1rem; flex: none; height: fit-content; } .vote--column, .vote--rail { flex-direction: column; } .vote--column { padding: .25rem; border-radius: 10px; background: var(--line-soft); align-self: flex-start; } .vote--rail { width: 42px; padding-top: .1rem; } .vote--row { gap: .15rem; margin-inline-end: .35rem; } .vote__btn { border: 0; background: none; cursor: pointer; color: var(--muted); width: 30px; height: 26px; border-radius: 6px; font-size: .85rem; display: grid; place-items: center; font: inherit; transition: background .12s ease, color .12s ease, transform .08s ease; } .vote__btn:active { transform: scale(.88); } .vote__btn--up:hover { background: var(--green-100); color: var(--green-600); } .vote__btn--down:hover { background: var(--red-100); color: var(--red-600); } .vote__btn--up.is-on { color: var(--green-600); } .vote__btn--down.is-on { color: var(--red-600); } .vote--rail .vote__btn { width: 32px; height: 30px; border-radius: 8px; font-size: 1.05rem; } .vote__count { font-weight: 700; font-size: .9rem; color: var(--ink); cursor: default; min-width: 1.6rem; text-align: center; line-height: 1.4; border-radius: 6px; } .vote__count:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; } .vote__count.is-up { color: var(--green-600); } .vote__count.is-down { color: var(--red-600); } .vote--rail .vote__count { font-weight: 800; } /* The breakdown. Hidden until asked for, and never in the layout's way. */ .vote__tip { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, .25rem); margin-bottom: .35rem; padding: .28rem .5rem; white-space: nowrap; font-size: .72rem; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; pointer-events: none; z-index: 20; transition: opacity .12s ease, transform .12s ease, visibility .12s; } .vote:hover .vote__tip, .vote:focus-within .vote__tip, .vote.is-telling .vote__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .vote--row .vote__tip { bottom: auto; top: 100%; margin: .35rem 0 0; transform: translate(-50%, -.25rem); } .vote--row:hover .vote__tip, .vote--row:focus-within .vote__tip, .vote--row.is-telling .vote__tip { transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { .vote__btn, .vote__tip { transition: none; } } .post-actions { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .75rem; } .post-actions form { display: inline; } .act { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 8px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .85rem; cursor: pointer; } .act:hover { background: var(--line-soft); color: var(--green-700); } /* ------------------------------------------------------------------ forum */ .board-list { display: flex; flex-direction: column; } .board-list a { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 9px; color: var(--ink-2); font-size: .92rem; font-weight: 500; } .board-list a:hover { background: var(--green-50); color: var(--green-700); } .board-list a.is-active { background: var(--green-50); color: var(--green-700); font-weight: 700; } .board-list .count { margin-inline-start: auto; font-size: .78rem; color: var(--muted); } /* Trending tags in a rail: rank, tag, and how many discussions carry it — one tap to all of them. Built on the same row shape as .board-list. */ .trend-list { display: flex; flex-direction: column; } .trend-list a { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 9px; color: var(--ink-2); } .trend-list a:hover { background: var(--green-50); } .trend-list a:hover b { color: var(--green-700); } .trend-list__rank { width: 20px; flex: none; text-align: center; font-size: .82rem; font-weight: 700; color: var(--muted); } .trend-list__tag { display: flex; flex-direction: column; min-width: 0; } .trend-list__tag b { font-size: .92rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trend-list__count { font-size: .76rem; color: var(--muted); } .tabs { display: flex; gap: .4rem; padding: .25rem; } .tabs a { padding: .45rem .9rem; border-radius: 9px; font-size: .9rem; font-weight: 600; color: var(--muted); border: 1px solid transparent; } .tabs a.is-active { background: var(--surface); color: var(--green-700); border-color: var(--line); box-shadow: var(--shadow); } .avatar { width: 34px; height: 34px; border-radius: 999px; flex: none; background: var(--line-soft); color: var(--muted); display: grid; place-items: center; font-size: .9rem; font-weight: 700; } .avatar--lg { width: 64px; height: 64px; font-size: 1.4rem; } .byline { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--muted); } /* ------------------------------------------------------------------ forms */ .field { margin-bottom: 1rem; } .field label, .label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; } .field .hint { font-size: .82rem; color: var(--muted); margin-top: .3rem; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=search], select, textarea { width: 100%; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: .95rem; background: var(--surface); color: var(--ink); } textarea { min-height: 130px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--green-500); outline-offset: 1px; border-color: transparent; } .choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; } .choice { display: flex; align-items: center; gap: .55rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font-size: .92rem; font-weight: 500; } .choice:hover { border-color: var(--green-500); background: var(--green-50); } .choice input { accent-color: var(--green-600); } .choice.is-on { border-color: var(--green-600); background: var(--green-50); font-weight: 600; } .errors { background: var(--red-100); border: 1px solid var(--red-100); color: var(--error-ink, #991b1b); padding: .85rem 1rem; border-radius: var(--radius-sm); font-size: .9rem; } .errors ul { margin: 0; padding-inline-start: 1.1rem; } .flash { background: var(--green-100); border: 1px solid var(--green-100); color: var(--flash-ink, var(--green-800)); padding: .85rem 1rem; border-radius: var(--radius-sm); font-weight: 600; } .notice { background: var(--amber-100); border: 1px solid var(--amber-100); color: var(--notice-ink, #92400e); padding: .8rem 1rem; border-radius: var(--radius-sm); font-size: .9rem; } .notice--info { background: var(--blue-100); border-color: var(--blue-100); color: var(--info-ink, #1e40af); } /* ------------------------------------------------------------------ wizard */ .wizard-steps { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .wizard-steps li { display: flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .84rem; color: var(--muted); list-style: none; } .wizard-steps li.is-on { border-color: var(--green-600); color: var(--green-700); font-weight: 700; background: var(--green-50); } .wizard-steps li.is-done { color: var(--green-700); } .wizard-steps .num { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: var(--line-soft); font-size: .75rem; font-weight: 700; } .wizard-steps li.is-on .num { background: var(--green-600); color: var(--on-primary); } .step { display: none; } .step.is-on { display: block; } /* Whose desk the problem lands on — shown while filling the form, not after. Tokens only: it has to read on both themes. */ .jurisdiction { margin-top: 1.25rem; padding: .85rem 1rem; background: var(--green-50); border: 1px solid var(--green-600); border-radius: var(--radius-sm); } .jurisdiction__head { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; letter-spacing: .01em; color: var(--green-700); text-transform: none; } .jurisdiction__head i { font-size: .9rem; } .jurisdiction__ministry { margin-top: .35rem; font-weight: 600; font-size: .95rem; color: var(--ink); } .jurisdiction__offices { list-style: none; margin: .5rem 0 0; padding: 0; } .jurisdiction__offices li { display: flex; align-items: flex-start; gap: .45rem; font-size: .88rem; color: var(--ink-2); padding: .12rem 0; } .jurisdiction__offices li i { color: var(--green-600); font-size: .8rem; margin-top: .3rem; flex: none; } .jurisdiction__area { color: var(--muted); } .jurisdiction__note { margin: .6rem 0 0; font-size: .8rem; color: var(--muted); } /* ---------------------------------------------------------------------- ads */ /* Every paid slot wears the same label and the same muted frame, so an ad is never mistaken for a citizen's report sitting next to it. Kept deliberately quiet: small, lower-case, half-faded, and out of the way in the corner of the bar. It has to be readable by anyone who looks for it — that is what makes the box honest, and in several countries it is the law — but it is not the headline of the ad, so it no longer shouts in capitals. Switching it off entirely is still an admin's decision on the ads screen. */ .ad-label { font-size: .6rem; font-weight: 600; letter-spacing: .03em; color: var(--muted); opacity: .62; } .ad-card { overflow: hidden; } .ad-card__bar { padding: .4rem .75rem 0; } .ad-card__body { display: block; padding: .5rem .75rem .75rem; color: inherit; text-decoration: none; } .ad-card__body img, .ad-card__body video { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); } .ad-card__body .ad__text { margin-top: .5rem; } .ad-card__body b { font-size: .92rem; } .ad-card__body p { margin: .2rem 0 0; font-size: .84rem; color: var(--muted); } .ad-card__body:hover b { color: var(--green-700); } /* The corner popup. Fixed, small, and never wider than a phone: it sits above the bottom bar on mobile so it cannot cover the navigation. */ .ad-popup { /* Bottom-right, because the support button owns the left corner. */ position: fixed; inset-inline-end: 1rem; bottom: 1rem; z-index: 60; width: min(320px, calc(100vw - 2rem)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); overflow: hidden; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; } .ad-popup.is-on { opacity: 1; transform: none; } .ad-popup__bar { display: flex; align-items: center; justify-content: space-between; padding: .4rem .5rem .4rem .75rem; border-bottom: 1px solid var(--line-soft); } .ad-popup__close { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: .9rem; } .ad-popup__close:hover { background: var(--line-soft); color: var(--ink); } .ad-popup__body { display: block; padding: .75rem; color: inherit; text-decoration: none; } .ad-popup__body img, .ad-popup__body video { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); } .ad-popup__body .ad__text { margin-top: .5rem; } .ad-popup__body b { font-size: .95rem; } .ad-popup__body p { margin: .2rem 0 0; font-size: .85rem; color: var(--muted); } @media (max-width: 720px) { .ad-popup { bottom: 4.75rem; } } @media (prefers-reduced-motion: reduce) { .ad-popup { transition: none; } } /* An icon-led list of points. Lived in forum.css until the report, market method and support pages started using it without loading that file — and quietly fell back to browser bullets there. */ .benefits { list-style: none; margin: 0; padding: 0; } .benefits li { display: flex; align-items: flex-start; gap: .55rem; font-size: .88rem; color: var(--ink-2); padding: .3rem 0; } .benefits li i { color: var(--green-600); margin-top: .25rem; font-size: .85rem; flex: none; } /* A floating support button of our own, bottom-left, shaped like the Supportkori widget it stands in for — shown only when that widget did not render (an unregistered domain, a blocked script, an offline visitor), so the corner is never empty and never doubled. */ .support-fab { position: fixed; inset-inline-start: 1.25rem; bottom: 1.25rem; z-index: 55; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 999px; background: var(--green-600); color: var(--on-primary); font-size: .88rem; font-weight: 600; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); } .support-fab:hover { background: var(--green-700); color: var(--on-primary); } .support-fab i { font-size: .95rem; } @media (max-width: 720px) { .support-fab { bottom: 4.75rem; } } /* ------------------------------------------------------------- support page */ /* Two ways to chip in, side by side on a desktop and stacked on a phone. Each button carries a second line saying who it is for, because "Ko-fi" means nothing to someone paying in taka and Supportkori means nothing abroad. */ .support-links { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; } .support-links .btn { flex: 1 1 260px; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: start; line-height: 1.5; } .support-links__note { display: block; font-size: .78rem; font-weight: 500; opacity: .8; } /* --------------------------------------------------------------- about page */ /* The four steps of "কথা → সমস্যা → আলোচনা → সমাধান", read as a chain rather than a bulleted list — each line carries the one before it. */ .steps-flow { list-style: none; margin: 1rem 0; padding: 0; border-inline-start: 2px solid var(--green-500); } .steps-flow li { position: relative; padding: .3rem 0 .3rem 1rem; color: var(--ink-2); } .steps-flow li::before { content: ""; position: absolute; inset-inline-start: -5px; top: .75rem; width: 8px; height: 8px; border-radius: 999px; background: var(--green-600); } .pledge { margin: 1.1rem 0; padding: .9rem 1.1rem; background: var(--green-50); border-radius: var(--radius-sm); font-size: 1.05rem; font-weight: 600; line-height: 1.9; color: var(--green-700); } /* ---------------------------------------------------------------- timeline */ .timeline { position: relative; padding-inline-start: 1.5rem; } .timeline::before { content: ''; position: absolute; inset-block: .4rem; left: 6px; width: 2px; background: var(--line); } .timeline__item { position: relative; padding-bottom: 1.1rem; } .timeline__dot { position: absolute; left: -1.5rem; top: .35rem; width: 14px; height: 14px; border-radius: 999px; background: var(--surface); border: 3px solid var(--green-600); } .timeline__item.is-muted .timeline__dot { border-color: var(--line); } /* -------------------------------------------------------------------- map */ #map, .map-frame { height: 420px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .map-legend { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .82rem; color: var(--muted); } .map-legend span { display: inline-flex; align-items: center; gap: .35rem; } .dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; } /* ------------------------------------------------------------------ table */ .table { width: 100%; border-collapse: collapse; font-size: .92rem; } .table th, .table td { padding: .7rem .8rem; text-align: start; border-bottom: 1px solid var(--line-soft); } .table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; } .table tbody tr:hover { background: var(--green-50); } .table--compact th, .table--compact td { padding: .5rem .6rem; } /* ------------------------------------------------------------------ charts */ .spark { display: flex; align-items: flex-end; gap: 3px; height: 60px; } .spark span { flex: 1; background: var(--green-100); border-radius: 3px 3px 0 0; min-height: 2px; } .spark span.is-peak { background: var(--green-500); } .bar-row { display: grid; grid-template-columns: minmax(90px, 150px) 1fr auto; gap: .6rem; align-items: center; font-size: .88rem; } .bar { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; } .bar span { display: block; height: 100%; border-radius: 999px; background: var(--green-500); } .donut { width: 160px; height: 160px; } /* ---------------------------------------------------------- ghush banner */ /* The supplied artwork, shown whole. Its own aspect ratio is kept so nothing in the composition gets cropped away. */ .ghush-banner { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; } .ghush-banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .ghush-banner img { width: 100%; height: auto; display: block; } /* -------------------------------------------------------------- ghush card */ .ghush-card { display: flex; align-items: center; gap: 1rem; padding: 1.15rem; background: linear-gradient(135deg, #0f172a, #14532d); color: #e2e8f0; border-radius: var(--radius); } .ghush-card h3 { color: #fff; margin: 0 0 .25rem; font-size: 1.05rem; } .ghush-card p { margin: 0; font-size: .88rem; color: #cbd5e1; } .ghush-card .btn { margin-inline-start: auto; } /* ------------------------------------------------------------------ footer */ .site-footer { background: #0b2b21; color: #cbd5e1; margin-top: 3rem; padding: 2.5rem 0 1.5rem; } .site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: .6rem; } .site-footer a { color: #cbd5e1; font-size: .9rem; } .site-footer a:hover { color: #fff; } .site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 1.5rem; } .site-footer__grid p { margin: 0 0 .35rem; font-size: .9rem; } .site-footer__bottom { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; font-size: .85rem; } /* -------------------------------------------------------------- pagination */ .pagination { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; margin: 1.5rem 0; } .pagination a, .pagination span { min-width: 38px; height: 38px; padding: 0 .6rem; border-radius: 9px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: .9rem; font-weight: 600; } .pagination .is-current { background: var(--green-600); border-color: var(--green-600); color: var(--on-primary); } .pagination .is-disabled { opacity: .45; } /* ------------------------------------------------------------------ mobile */ .mobile-bar { display: none; } /* ------------------------------------------------------- header at width */ /* * The bar holds a wordmark, six nav links, a search box and five controls. * Measured, that needs about 1500px to sit comfortably — so things start * giving way well before the layout would actually break, in order of how * little each is missed. The report button and the menu are last to go. */ @media (max-width: 1500px) { .site-nav a { padding: .45rem .45rem; font-size: .82rem; } .site-header .search-box { flex: 0 1 200px; } } @media (max-width: 1380px) { /* The wordmark carries the identity on its own from here. */ .brand__tag, .site-header .lockup__tag { display: none; } .lockup--md .lockup__mark { height: 38px; } .site-header__inner { height: 68px; gap: .75rem; } .site-header .search-box { flex: 0 1 150px; } } @media (max-width: 1240px) { /* Search moves to its own page rather than squeezing into the bar. */ .site-header .search-box { display: none; } .search-jump { display: grid; } .site-nav a { padding: .5rem .45rem; font-size: .88rem; } } @media (max-width: 1080px) { /* The CTA keeps its icon; the words are the first thing to go. */ .header-cta__label { display: none; } .header-cta { padding-inline: .7rem; } } @media (max-width: 940px) { .site-nav { position: fixed; inset: 68px 0 auto; flex-direction: column; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--line); padding: .75rem 1rem 1rem; margin: 0; display: none; box-shadow: var(--shadow-lg); z-index: 39; } .site-nav.is-open { display: flex; } .site-nav a { padding: .7rem .8rem; font-size: .98rem; } .nav-toggle { display: grid; } .lang-btn, #theme-toggle { display: none; } .site-nav .nav-extra { display: flex; } } @media (max-width: 1080px) { .layout { grid-template-columns: minmax(0, 1fr); } .layout__aside { display: none; position: static; max-height: none; overflow: visible; } .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hero__grid { grid-template-columns: minmax(0, 1fr); } .site-footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .report-card__thumb { width: 96px; height: 76px; } body { padding-bottom: 68px; } /* The report button is the whole point of the site, so on a phone it sits in the middle of the bar and is the only filled one. */ .mobile-bar { display: flex; position: fixed; inset: auto 0 0; z-index: 45; background: var(--surface); border-top: 1px solid var(--line); padding: .35rem .5rem env(safe-area-inset-bottom); } .mobile-bar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .4rem 0; font-size: .7rem; color: var(--muted); font-weight: 600; } .mobile-bar a i { font-size: 1.05rem; } .mobile-bar a.is-active { color: var(--green-700); } .mobile-bar .fab { background: var(--green-600); color: var(--on-primary); border-radius: 999px; width: 46px; height: 46px; margin-top: -18px; justify-content: center; box-shadow: 0 6px 16px rgba(21, 128, 61, .4); } .mobile-bar .fab i { font-size: 1.2rem; } } @media print { .site-header, .site-footer, .mobile-bar, .post-actions { display: none; } } /* The language switch is a text button, so it needs its own sizing rather than the icon button's square. */ .lang-btn { width: auto; min-width: 40px; padding: 0 .55rem; font-size: .8rem; font-weight: 700; } /* ------------------------------------------------------------- photo set */ /* Evidence photos. The first one leads, because a report usually has one picture that says what happened and a few that add detail. */ .shots { display: grid; gap: .6rem; margin-top: 1rem; } .shots--1 { grid-template-columns: minmax(0, 1fr); } .shots--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shots--3, .shots--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shots--3 .shot:first-child, .shots--4 .shot:first-child { grid-column: 1 / -1; } .shot { margin: 0; } .shot a { display: block; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--line-soft); } .shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; transition: transform .2s ease; } .shot a:hover img { transform: scale(1.02); } .shots--1 .shot img { aspect-ratio: auto; max-height: 520px; object-fit: contain; background: var(--line-soft); } .shot figcaption { font-size: .8rem; color: var(--muted); margin-top: .3rem; } /* Full-size view. A plain overlay rather than a library. */ .lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(3, 7, 18, .9); padding: 2rem; cursor: zoom-out; } .lightbox img { max-width: 100%; max-height: 90vh; border-radius: var(--radius-sm); } .lightbox button { position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .15); color: #fff; font-size: 1.1rem; cursor: pointer; } .lightbox button:hover { background: rgba(255, 255, 255, .28); } @media (max-width: 620px) { .shots--2, .shots--3, .shots--4 { grid-template-columns: minmax(0, 1fr); } .shots--3 .shot:first-child, .shots--4 .shot:first-child { grid-column: auto; } } /* -------------------------------------------------------- comment tree */ /* * A threaded discussion, the way Quora and Reddit both show one: each reply * sits under its parent, and the line down the left side folds the whole * branch away. Depth is capped in the template rather than here. */ .cmt-tree { padding: 0 1.15rem 1.15rem; } .cmt { display: flex; gap: .75rem; padding-top: 1rem; } .cmt__rail { display: flex; flex-direction: column; align-items: center; flex: none; width: 34px; } /* The fold line is a hit target as well as a decoration. */ .cmt__fold { flex: 1; width: 2px; margin-top: .5rem; padding: 0; border: 0; border-radius: 999px; background: var(--line); cursor: pointer; position: relative; } .cmt__fold::after { content: ''; position: absolute; inset: 0 -7px; } .cmt__fold:hover { background: var(--green-500); } .cmt__fold.is-folded { background: var(--green-600); } .cmt__body { flex: 1; min-width: 0; } .cmt__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .88rem; } .cmt__head b { color: var(--ink-2); } .cmt__count { border: 0; background: none; padding: 0; cursor: pointer; color: var(--green-600); font: inherit; font-size: .8rem; font-weight: 600; } .cmt__count:hover { text-decoration: underline; } .cmt__text { margin: .35rem 0 0; font-size: .95rem; line-height: 1.7; white-space: pre-line; } .cmt__actions { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; margin-top: .4rem; } .cmt__actions form { display: inline-flex; } .cmt__reply { margin-top: .6rem; } /* Children indent by the rail's width, so replies line up under the fold. */ .cmt__kids { margin-top: .25rem; } .cmt--flat > .cmt__body > .cmt__kids { margin-inline-start: 0; } .cmt__kids[hidden] { display: none; } @media (max-width: 620px) { .cmt { gap: .5rem; } .cmt__rail { width: 26px; } .cmt-tree { padding: 0 .75rem .75rem; } } /* --------------------------------------------------------- reactions */ .reacts { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-top: .5rem; } .reacts form { display: inline-flex; } .react { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .55rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; line-height: 1.5; } .react:hover { border-color: var(--react); color: var(--react); } .react.is-on { border-color: var(--react); color: var(--react); background: color-mix(in srgb, var(--react) 12%, transparent); } .react.is-static { cursor: default; color: var(--react); border-color: transparent; background: var(--line-soft); } .react--prompt { color: var(--muted); border-style: dashed; } /* ----------------------------------------------------------------- boot */ /* * The opening splash. Deliberately short and deliberately escapable: it fades * on `load` and again on a 2.5s timer, so a stalled asset can never trap a * visitor behind it. Painted from the theme tokens, so it matches whichever * theme is about to appear rather than flashing white first. */ .boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--ground); transition: opacity .4s ease, visibility .4s ease; } .boot.is-gone { opacity: 0; visibility: hidden; } .boot__inner { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; animation: boot-rise .5s ease-out both; padding: 1rem; max-width: min(90vw, 460px); } .boot__bar { width: min(220px, 60vw); height: 3px; border-radius: 999px; background: var(--line-soft); overflow: hidden; } .boot__bar span { display: block; height: 100%; width: 40%; border-radius: 999px; background: var(--green-600); animation: boot-sweep 1.1s ease-in-out infinite; } @keyframes boot-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes boot-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } } @media (prefers-reduced-motion: reduce) { .boot { display: none; } }