/* ========================================================= Shqipëria e Re — /media Layers on styles.css. Same monochrome, square, hairline language as alnet.html; nothing here introduces a radius, a colour, or a shadow that the reskin removed. ========================================================= */ /* The shared body is transparent so sand-bg.js can show through on the studio pages. This page has no canvas — pin it light so a dark-mode browser can't render white text on white. The paper colour lives on , not : the wallpaper below sits behind the page content, and a background on would paint straight over it. */ html { color-scheme: light; background: var(--bg); } body { background: transparent; color: var(--ink); } /* ── wallpaper ────────────────────────────────────────────── The tile is drawn horizontally and the whole layer is rotated, so the 45° repeat is seamless without making rotated text meet at the tile edges. Oversized and offset because a rotated rectangle no longer covers the viewport corners. Faint enough that post text keeps full contrast. */ .md-wall { position: fixed; top: -60%; left: -60%; width: 220%; height: 220%; z-index: 0; pointer-events: none; transform: rotate(-45deg); background-image: url("assets/wall-shqiperia.svg"); background-repeat: repeat; /* 0.085 is a CEILING, not a preference. The lede sits directly on this pattern in var(--ink-soft) #6a6a6a, and where it crosses an inked glyph the contrast is 4.53:1 — the last step that still clears WCAG AA's 4.5. At 0.09 it is 4.48 and fails. Push past this and the lede has to darken first. */ opacity: 0.085; } /* Everything real sits above the wallpaper. (.md-top here is the sticky header; .md-tabs is the tab toggle — different thing, easily confused.) */ /* (.md-tabs is deliberately absent — it is position:fixed with its own z-index, and listing it here would override that with position:relative.) */ .md-top, .md-main, .md-foot, .md-dock { position: relative; z-index: 1; } .md-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* The UA rule for the hidden attribute is [hidden]{display:none}, which any author `display` (e.g. .md-btn's inline-flex) outranks. This page toggles real elements with `hidden`, so make the attribute win. */ [hidden] { display: none !important; } /* Back to a reading width now that the sidebar became a tab — 1060px was only ever there to fit two columns, and it is a poor line length for prose. */ .md-wrap { max-width: 720px; margin: 0 auto; padding: 0 22px; } /* ── header ─────────────────────────────────────────────── */ /* FIXED, not sticky. styles.css sets html{overflow-x:hidden} as a mobile zoom-out guard, which makes a scroll container and silently kills position:sticky for its descendants — the header looked pinned only because it happens to sit at the top of the document. With the tab bar fixed underneath it, a header that scrolls away leaves content sliding through the gap above the tabs. Fixed works in every browser; `overflow-x: clip` would also revive sticky but only on newer engines. */ .md-top { border-bottom: 1px solid var(--line); position: fixed; top: 0; left: 0; right: 0; background: var(--bg); z-index: 20; } .md-top__inner { display: flex; align-items: center; gap: 20px; height: 64px; } .md-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; font-size: 17px; } .md-brand img { width: 26px; height: 26px; display: block; } /* Sibling property, next to the brand — an outlined chip so it reads as a way out to another product, not as another section of this one. */ .md-sibling { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none; font-size: 12.5px; white-space: nowrap; transition: border-color var(--transition), color var(--transition); } .md-sibling:hover { border-color: var(--ink); color: var(--ink); } .md-top nav { margin-left: auto; display: flex; gap: 22px; align-items: center; } .md-top nav a { color: var(--ink-soft); text-decoration: none; font-size: 14px; } .md-top nav a:hover { color: var(--ink); } @media (max-width: 560px) { .md-top nav a.md-hide-sm { display: none; } } .md-linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 14px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px; } .md-linkbtn:hover { color: var(--ink); } /* Account button, far right. Always present, because it is the only way in for someone who already has an account — before this it only appeared once you were signed in, so returning readers had to start writing a post to find the login. Solid when signed out (it is the action), outlined when signed in (it is a status you can open). */ .md-acct { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 9px; background: var(--ink); color: var(--white); cursor: pointer; font: 600 13px/1 var(--sans); white-space: nowrap; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; transition: background var(--transition), color var(--transition); } .md-acct:hover { background: var(--white); color: var(--ink); } .md-acct.is-in { background: transparent; color: var(--ink-soft); border-color: var(--line); } .md-acct.is-in:hover { border-color: var(--ink); color: var(--ink); background: transparent; } /* ── page ───────────────────────────────────────────────── */ /* Clears both fixed bars: 65px header (64 + hairline) + 41px tabs, plus air. */ .md-main { padding: 142px 22px 10px; } .md-h1 { font-family: var(--display); font-size: clamp(30px, 6vw, 44px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 12px; } .md-lede { margin: 0 0 30px; color: var(--ink-soft); font-size: 15px; line-height: 1.55; max-width: 56ch; } .md-muted { color: var(--muted); } /* ── word filter ────────────────────────────────────────── */ .md-filter { position: relative; margin: 0 0 26px; } .md-filter input { width: 100%; box-sizing: border-box; padding: 12px 40px 12px 14px; border: 1px solid var(--ink); background: var(--white); font: 500 15px/1.3 var(--sans); color: var(--ink); -webkit-appearance: none; appearance: none; } .md-filter input::placeholder { color: var(--muted); } .md-filter input::-webkit-search-cancel-button { display: none; } .md-filter__clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink-soft); } .md-filter__clear:hover { color: var(--ink); } /* ── tab toggle ─────────────────────────────────────────── */ .md-tabs { position: fixed; top: 64px; left: 0; right: 0; z-index: 19; background: var(--bg); border-bottom: 1px solid var(--line); } .md-tabs__inner { display: flex; gap: 0; } .md-tab { appearance: none; background: none; cursor: pointer; border: 0; border-bottom: 2px solid transparent; padding: 13px 2px; margin-right: 26px; font: 600 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); transition: color var(--transition), border-color var(--transition); } .md-tab:hover { color: var(--ink-soft); } .md-tab.is-on { color: var(--ink); border-bottom-color: var(--ink); } .md-colnote { font-size: 11px; letter-spacing: 0.1em; color: var(--muted); } .md-panelnote { margin: 0 0 12px; min-height: 14px; } /* ── docked composer ────────────────────────────────────── */ .md-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--bg); border-top: 1px solid var(--ink); padding-bottom: env(safe-area-inset-bottom); } .md-dock__inner { display: flex; align-items: flex-end; gap: 12px; padding-top: 12px; padding-bottom: 12px; } /* How many people are on the page right now, pinned to the left of the writing box. flex:none so it never shrinks the composer, and tabular numerals so the pill does not twitch in width as the count changes. */ .md-online { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); font: 600 13px/1 var(--sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .md-online__dot { width: 7px; height: 7px; border-radius: 50%; background: #1e7d3c; flex: none; } .md-text { flex: 1; min-width: 0; box-sizing: border-box; border: 1px solid var(--line); padding: 10px 14px; resize: none; min-height: 44px; max-height: 160px; font: 500 16px/1.4 var(--sans); color: var(--ink); background: var(--white); outline: none; /* !important is required, not lazy: styles.css ends with `input, textarea, select { border-radius: 0 !important }` as part of the square reskin, and an author !important is the only thing that outranks it. */ border-radius: 12px !important; } .md-text::placeholder { color: var(--muted); } .md-text:focus { border-color: var(--ink) !important; box-shadow: none !important; } .md-count { font-size: 12px; letter-spacing: 0.08em; color: var(--muted); font-variant-numeric: tabular-nums; padding-bottom: 14px; white-space: nowrap; } .md-count.is-over { color: #c0392b; } .md-dock .md-btn { flex: none; } .md-dock__err { margin: 0 0 10px !important; padding: 0 22px; max-width: 1060px; margin-left: auto !important; margin-right: auto !important; } /* ── buttons ────────────────────────────────────────────── */ /* Rounded to match the post pills and the writing box. Applies to every .md-btn on the page — the dock's Posto plus the gate and account buttons — because a rounded composer next to square dialog buttons reads as an accident. */ .md-btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 22px; border: 1px solid var(--ink); border-radius: 10px; background: var(--ink); color: var(--white); cursor: pointer; font: 600 14.5px/1 var(--sans); text-decoration: none; transition: background var(--transition), color var(--transition); } .md-btn:hover { background: var(--white); color: var(--ink); } .md-btn--ghost { background: transparent; color: var(--ink); } .md-btn--ghost:hover { background: var(--ink); color: var(--white); } .md-btn:disabled { border-color: var(--line); background: var(--bg-alt); color: var(--muted); cursor: default; } /* ── feed ───────────────────────────────────────────────── */ .md-feed { display: flex; flex-direction: column; gap: 12px; } /* Posts are pills tinted by their score. The rest of albanianetwork.org is deliberately monochrome, and this is the one place where colour earns the exception: a vote has a DIRECTION, and no amount of grey can say whether the room agreed or disagreed. Green up, red down, plain white when nobody has voted yet. Tints stay pale on purpose — the body text is near-black on top of them, so contrast has to survive the strongest step. Levels are banded rather than a continuous ramp so that two posts a couple of votes apart do not look like different categories. */ .md-post { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: var(--white); transition: background var(--transition), border-color var(--transition); } .md-post[data-vote="up-1"] { background: #f1f8f3; border-color: #cde2d4; } .md-post[data-vote="up-2"] { background: #e3f0e7; border-color: #a6ccb2; } .md-post[data-vote="up-3"] { background: #d0e8d8; border-color: #7cb692; } .md-post[data-vote="down-1"] { background: #fdf2f1; border-color: #f0d0cd; } .md-post[data-vote="down-2"] { background: #fbe5e2; border-color: #e3aea8; } .md-post[data-vote="down-3"] { background: #f8d5d0; border-color: #d48880; } .md-post__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .md-handle { font-weight: 600; font-size: 14px; color: var(--ink); } .md-time { font-size: 13px; color: var(--muted); } .md-body { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; } .md-post__foot { display: flex; align-items: center; gap: 6px; margin-top: 14px; } .md-vote { border: 1px solid var(--line); background: transparent; color: var(--ink-soft); width: 34px; height: 30px; cursor: pointer; font: 600 13px/1 var(--sans); display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition), color var(--transition), border-color var(--transition); } .md-vote { background: rgba(255, 255, 255, 0.7); border-radius: 8px; } .md-vote:hover { border-color: var(--ink); color: var(--ink); } /* An active vote takes the direction's colour, so your own vote and the room's verdict are legible as the same signal. */ .md-vote--up.is-on { background: #1e7d3c; border-color: #1e7d3c; color: #fff; } .md-vote--down.is-on { background: #b3261e; border-color: #b3261e; color: #fff; } .md-score { min-width: 30px; text-align: center; font: 600 14px/1 var(--sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; } .md-score.is-pos { color: #1e7d3c; } .md-score.is-neg { color: #b3261e; } /* Rank badge, most-voted tab only. */ .md-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; margin-right: 8px; border-radius: 11px; background: var(--ink); color: var(--bg); font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; } .md-post__spacer { flex: 1; } .md-act { background: none; border: 0; padding: 4px 6px; cursor: pointer; font: 500 13px/1 var(--sans); color: var(--muted); } .md-act:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .md-empty { padding: 40px 0; text-align: center; } .md-empty p { margin: 0 0 6px; font-size: 15px; } .md-status { text-align: center; color: var(--muted); font-size: 13.5px; padding: 22px 0 40px; margin: 0; } .md-sentinel { height: 1px; } .md-err { color: #c0392b; font-weight: 600; font-size: 13px; margin: 10px 0 0; } /* ── OTP gate ───────────────────────────────────────────── */ .md-gate { position: fixed; inset: 0; z-index: 60; background: rgba(17,17,17,0.5); display: flex; align-items: center; justify-content: center; padding: 20px; } .md-gate[hidden] { display: none; } .md-gate__panel { background: var(--white); border: 1px solid var(--ink); padding: 26px; width: min(400px, 100%); box-shadow: 0 12px 0 var(--ink); } .md-gate__panel h3 { margin: 0 0 8px; font-family: var(--display); font-size: 20px; font-weight: 600; } .md-gate__panel p { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; } /* A warning that has to actually be read — the SMS budget is finite, and nobody can usefully be told about it after they have spent it. */ .md-warn { margin: 0 0 16px !important; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 8px; background: var(--bg-alt); font-size: 12.5px !important; line-height: 1.45; color: var(--ink) !important; } .md-warn strong { font-weight: 600; } .md-lbl { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; } .md-gate__panel input { width: 100%; box-sizing: border-box; padding: 12px 13px; border: 1px solid var(--ink); font: 600 16px/1.2 var(--sans); color: var(--ink); background: var(--white); } .md-gate__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; } /* The gate is a 400px panel and the login step carries three buttons — Anulo, Regjistrohu me SMS, Hyr. At the default 22px padding they need 363px against 348px of content width, so "Hyr" wrapped onto its own line and the two routes stopped reading as equal. Trimming the padding here, where space is scarce and the labels are short, keeps them on one row. */ .md-gate__actions .md-btn { padding: 0 16px; } /* The reset offer, between the error and the buttons. Left-aligned so it reads as a consequence of the failure above it rather than a fourth action. */ .md-resetrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 !important; padding-top: 2px; } .md-resetnote { margin: 0 !important; } .md-gate__panel { max-height: calc(100dvh - 40px); overflow-y: auto; } /* ── account panel ──────────────────────────────────────── */ .md-acct-block { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; } .md-acct-block .md-lbl { margin-top: 0; } .md-acct-block input { margin-bottom: 8px; } .md-hint { margin: 0 0 10px !important; font-size: 12px !important; color: var(--muted) !important; line-height: 1.45; } .md-btn--sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 8px; } .md-quota { margin: 18px 0 0 !important; padding: 10px 12px; border: 1px solid var(--line); background: var(--bg-alt); font-size: 12.5px !important; color: var(--ink-soft) !important; line-height: 1.45; } .md-quota.is-low { border-color: var(--ink); border-left-width: 3px; color: var(--ink) !important; } .md-fine { margin: 16px 0 0 !important; font-size: 12px !important; color: var(--muted) !important; } .md-fine a { color: var(--ink-soft); } /* ── footer ─────────────────────────────────────────────── */ .md-foot { border-top: 1px solid var(--line); padding: 46px 0 64px; margin-top: 30px; } .md-foot__inner { display: flex; gap: 30px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .md-foot p { margin: 0 0 6px; font-size: 13.5px; color: var(--ink-soft); } .md-foot a { color: var(--ink-soft); text-decoration: none; font-size: 13.5px; } .md-foot a:hover { color: var(--ink); } .md-foot__links { display: flex; flex-direction: column; gap: 8px; } .md-foot__col h4 { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; font-weight: 600; } /* ── QR ─────────────────────────────────────────────────── */ .md-qr { width: 108px; padding: 8px; border: 1px solid var(--line); background: var(--white); } .md-qr svg { display: block; width: 100%; height: auto; color: var(--ink); } .md-qr__cap { margin: 8px 0 0 !important; font-size: 11.5px !important; letter-spacing: 0.04em; color: var(--muted) !important; } /* ── the dock overlaps the page, so give the page room to end above it ── */ body { padding-bottom: 92px; } .md-foot { margin-bottom: 0; } @media (max-width: 560px) { .md-main { padding-top: 130px; } .md-sibling { display: none; } /* the brand plus the account chip is enough */ .md-foot__inner { gap: 26px; } .md-foot__col { flex: 1 1 45%; } .md-dock__inner { gap: 8px; } .md-count { display: none; } /* the textarea's maxlength still holds */ .md-wall { opacity: 0.075; } /* kept a touch under the desktop ceiling, as before */ }