/* ============================================================================= ManaraMS — public mosque directory Production stylesheet. GENERATED FROM the reviewed design mockup: docs/superpowers/specs/2026-08-18-public-directory-mockup.html This file is the SINGLE SOURCE OF TRUTH for directory styling. Renderers in tools/directory/ must emit the DOM described in DIRECTORY-MARKUP-CONTRACT.md and load this file; they must not ship page-local CSS, and they must not re-derive any value here from tailwind.config.js at build time. Differences from the mockup, all deliberate — see the contract, "Deviations": 1. Every `@container pg (...)` query is now a `@media (...)` query with the identical breakpoint. In the mockup each page sat inside a sized frame; in production a page fills the viewport. (4 queries converted.) 2. The mockup chrome is gone: screen switcher, phone/desktop frames, device status bar, `transform: scale()`, `.vp-scroll`, `.viewport`, `data-only` variant machinery, annotation styles, `--mk-*` tokens, the Instagram story card (that is a Node build-time artifact, not a page). 3. `.viewport`'s base typography moved onto `body`. 4. `.sheet` and `.toast` are `position: fixed`. In the mockup they were absolutely positioned inside a frame and placed by script. 5. The "main rhythm" rules sit ABOVE the media queries. In the mockup they sat below, so `.cols2 { display: flex }` silently beat the two-column `display: grid` at >=960 and every `cols2` pair stacked on desktop. 6. Tabular numerals are global here. `.tnum` is scoped to `.ptimes-page` in the React app and is a no-op outside it; a structural rule below also pins the prayer tables, the countdown and the jumu'ah time, so a forgotten class cannot make the times jitter. 7. Reveal-on-scroll is opt-in behind `html[data-anim-ready]`, so a page whose island never runs renders fully visible instead of blank. 8. Additions for page types the mockup does not draw (`.mapstage`, `.skeleton`, `.idxlinks .is-pending`) are marked ADDED. Colour note: several rules carry literal `hsl(...)` values rather than a token. Those are the contrast-safe corrections from UX spec 1.1 and they are load-bearing — `--manarams-success` at 38% is 3.44:1 on white and `--manarams-warning` at 50% is 2.02:1. Neither is ever a text colour. Do not "tidy" a literal back into its token. ============================================================================= */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/outfit-400-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/outfit-400-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/outfit-500-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/outfit-500-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/outfit-600-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/outfit-600-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/outfit-700-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/outfit-700-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-400-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-400-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-500-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-500-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-600-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-600-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-700-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-700-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================== 0 · RESET ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0} h1,h2,h3,h4,p,figure,ol,ul,dl,dd{margin:0} ol,ul{list-style:none;padding:0} img,svg{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} a{color:inherit;text-decoration:none} table{border-collapse:collapse;width:100%} /* load-bearing: several blocks below set `display`, which would beat [hidden] */ [hidden]{display:none !important} /* ========================================================================== 1 · DESIGN TOKENS (shadcn HSL-triplet convention, from the repo) ========================================================================== */ /* The repo set, kept whole so a directory surface never has to invent a colour. --card-foreground, --popover, --muted and --destructive are deliberately unused here: --muted is identical to --secondary, and --destructive is for errors only and must never be reached for to mean "missing data" (UX 1.1). */ :root{ --background:216 100% 98%; --foreground:210 53% 16%; --card:0 0% 100%; --card-foreground:210 53% 16%; --popover:0 0% 100%; --primary:205 89% 41%; --primary-foreground:0 0% 100%; --secondary:211 56% 91%; --secondary-foreground:210 53% 16%; --muted:211 56% 91%; --muted-foreground:211 24% 38%; --accent:198 93% 60%; --destructive:4 76% 40%; --border:209 32% 82%; --input:209 32% 82%; --ring:205 89% 41%; --inverted-foreground:0 0% 100%; --inverted-muted:214 24% 86%; --manarams-success:145 63% 38%; --manarams-warning:38 92% 50%; --radius:0.875rem; --font-sans:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif; --font-display:'Outfit',ui-sans-serif,system-ui,sans-serif; } /* ========================================================================== 2 · PAGE BASE ========================================================================== */ body{ font-family:var(--font-sans); color:hsl(var(--foreground)); background:hsl(var(--background)); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } ::selection{background:hsl(var(--primary) / .18)} /* Tabular numerals. `.tnum` is `.ptimes-page .tnum` in the React app and is a no-op on a directory page, so it is redefined globally here (UX 1.1, addendum 5). The structural rule is the safety net: prayer times, the countdown and the month table get tabular figures with or without the class, because a proportional-figure countdown re-flows every second. */ .tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .np-time,.np-count,.np-foot, .ptable .tm,.mtable td,.mtable th, .jum-time, .addr-dist,.dcard-meta{ font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; } /* Visually hidden but present in the accessibility tree. Never display:none — that would remove the prayer-table from the tree too (UX 8). */ .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:1.25rem} /* ========================================================================== 3 · PRIMITIVES ========================================================================== */ /* --- Typography --- */ .h1{font-family:var(--font-display);font-size:1.875rem;line-height:1.08;font-weight:700;letter-spacing:-.02em} .h2{font-family:var(--font-display);font-size:1.25rem;line-height:1.25;font-weight:600;letter-spacing:-.01em} .h3{font-size:1rem;font-weight:600;line-height:1.35} .eyebrow{ font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.09em; color:hsl(var(--muted-foreground));display:flex;align-items:center;gap:.5rem; } .eyebrow::after{content:"";flex:1;height:1px;background:hsl(var(--border));opacity:.75} .eyebrow--plain::after{display:none} .body{font-size:.875rem;line-height:1.65} .sec{font-size:.875rem;color:hsl(var(--muted-foreground));line-height:1.6} .missing{color:hsl(var(--muted-foreground))} /* --- Icons --- */ .ic{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round} .ic--sm{width:15px;height:15px} .ic--lg{width:22px;height:22px} /* --- Button (heights mirror src/components/ui/button.jsx) --- */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem; height:40px;padding-inline:1rem; border-radius:calc(var(--radius) - .25rem); font-size:.875rem;font-weight:600;line-height:1;letter-spacing:-.005em; white-space:nowrap;border:1px solid transparent; transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease; } .btn::after{content:"";position:absolute;inset-block:-2px;inset-inline:0} /* >=44px hit target */ .btn:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px} .btn:active{transform:translateY(.5px)} .btn-sm{height:36px;padding-inline:.75rem;font-size:.8125rem;border-radius:calc(var(--radius) - .375rem)} .btn-sm::after{inset-block:-4px} .btn-lg{height:44px;padding-inline:1.5rem} .btn-lg::after{content:none} .btn-cta{height:56px;padding-inline:1.75rem;font-size:1rem;border-radius:calc(var(--radius) - .125rem)} .btn-cta::after{content:none} .btn-footer{height:48px;padding-inline:1.25rem} .btn-footer::after{content:none} .btn-icon{width:40px;padding:0} .btn-block{width:100%} .btn-default{background:hsl(var(--primary));color:hsl(var(--primary-foreground));box-shadow:0 1px 2px hsl(var(--foreground) / .16),0 6px 16px -8px hsl(var(--primary) / .55)} .btn-default:hover{background:hsl(var(--primary) / .9)} .btn-outline{border-color:hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground))} .btn-outline:hover{background:hsl(var(--secondary));border-color:hsl(var(--primary) / .45)} .btn-secondary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground))} .btn-secondary:hover{background:hsl(var(--secondary) / .7)} .btn-ghost{color:hsl(var(--foreground))} .btn-ghost:hover{background:hsl(var(--secondary))} /* `link` is 4.40:1 on --background and 4.65:1 on --card: it must sit on a card surface only (UX 1.1). The source footer is a card for exactly this reason. */ .btn-link{ height:auto;min-height:44px;padding-inline:0;color:hsl(var(--primary)); text-underline-offset:3px;text-decoration:underline;text-decoration-color:hsl(var(--primary) / .35); } .btn-link::after{content:none} .btn-link:hover{text-decoration-color:hsl(var(--primary))} .btn-inv{background:hsl(var(--card));color:hsl(var(--primary));box-shadow:0 12px 30px -14px rgba(0,0,0,.7)} .btn-inv:hover{background:hsl(var(--inverted-muted))} /* --- Card --- */ .card{ background:hsl(var(--card));border:1px solid hsl(var(--border) / .8); border-radius:var(--radius);padding:1.25rem; box-shadow:0 1px 2px hsl(210 40% 20% / .04),0 1px 0 hsl(0 0% 100% / .6) inset; } .card--raised{box-shadow:0 18px 40px -24px hsl(210 53% 16% / .45),0 4px 12px -6px hsl(210 53% 16% / .12),0 1px 0 hsl(0 0% 100% / .8) inset} .card--flush{padding:0;overflow:hidden} .stack{display:flex;flex-direction:column;gap:1rem} .stack--sm{gap:.5rem} .stack--lg{gap:1.5rem} /* --- Badge --- */ .badge{ display:inline-flex;align-items:center;gap:.35rem; height:28px;padding-inline:.6rem;border-radius:999px; font-size:.75rem;font-weight:600;letter-spacing:.005em;white-space:nowrap; border:1px solid transparent; } .badge svg{width:14px;height:14px;stroke-width:1.75} /* text sits at 145 63% 30% (5.18:1 on --card); the token's own 38% is 3.44:1 and fails AA */ .badge--verified{background:hsl(var(--manarams-success) / .16);color:hsl(145 63% 30%);border-color:hsl(var(--manarams-success) / .3)} .badge--manara{background:hsl(var(--primary) / .14);color:hsl(var(--primary));border-color:hsl(var(--primary) / .28)} .badge--warn{background:hsl(var(--manarams-warning) / .18);color:hsl(38 84% 26%);border-color:hsl(var(--manarams-warning) / .45)} .badge--type{background:hsl(var(--secondary));color:hsl(var(--muted-foreground));border-color:hsl(var(--border) / .7)} .hero .badge--verified{background:hsl(var(--manarams-success) / .2);color:hsl(145 60% 72%);border-color:hsl(145 50% 45% / .5)} .hero .badge--manara{background:hsl(var(--accent) / .18);color:hsl(var(--accent));border-color:hsl(var(--accent) / .4)} .hero .badge--warn{background:hsl(var(--manarams-warning) / .16);color:hsl(38 96% 72%);border-color:hsl(var(--manarams-warning) / .45)} /* --- Chips --- */ .chiprow{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding:.15rem .15rem .35rem} .chiprow::-webkit-scrollbar{display:none} .chip{ display:inline-flex;align-items:center;gap:.4rem;flex:none; height:34px;padding-inline:.75rem;border-radius:999px; background:hsl(var(--secondary));color:hsl(var(--secondary-foreground)); font-size:.8125rem;font-weight:500;white-space:nowrap; border:1px solid hsl(var(--border) / .55); } .chip--live{background:hsl(var(--manarams-success) / .13);color:hsl(145 63% 26%);border-color:hsl(var(--manarams-success) / .32);font-weight:600} .chip--live .dot{color:hsl(145 63% 30%);font-size:.7em;line-height:1;animation:pulse 2.4s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} /* Swedish language names are lowercase, including as standalone labels. */ .chip--lang{height:26px;font-size:.75rem;background:hsl(var(--secondary) / .75);border-color:transparent;color:hsl(var(--muted-foreground));text-transform:lowercase} /* --- Field --- */ .field{position:relative;display:flex;align-items:center} .field svg{position:absolute;left:.85rem;color:hsl(var(--muted-foreground));pointer-events:none} .input{ width:100%;height:44px;border-radius:calc(var(--radius) - .25rem); border:1px solid hsl(var(--input));background:hsl(var(--card)); padding:0 .9rem 0 2.6rem;font-size:.9375rem; } .input::placeholder{color:hsl(var(--muted-foreground))} .input:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;border-color:hsl(var(--primary))} .select{ height:44px;border-radius:calc(var(--radius) - .25rem);border:1px solid hsl(var(--input)); background:hsl(var(--card));padding:0 2.2rem 0 .9rem;font-size:.875rem;font-weight:500; appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right .7rem center;background-size:16px; } .select:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px} /* --- Text link --- */ .tlink{ display:inline-flex;align-items:center;gap:.4rem;min-height:44px; color:hsl(var(--primary));font-size:.875rem;font-weight:600; } .tlink:hover{text-decoration:underline;text-underline-offset:3px} .tlink:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;border-radius:6px} .tlink .arw{transition:transform .18s ease} .tlink:hover .arw{transform:translateX(3px)} /* ========================================================================== 4 · SITE CHROME (skip link, header, breadcrumbs, footer) ========================================================================== */ .skip{ position:absolute;left:.75rem;top:-3rem;z-index:20; background:hsl(var(--card));color:hsl(var(--primary)); padding:.65rem 1rem;border-radius:8px;font-size:.875rem;font-weight:600; box-shadow:0 8px 24px -10px hsl(210 53% 16% / .5);transition:top .18s ease; } .skip:focus{top:.75rem} .site-hd{background:hsl(var(--card));border-bottom:1px solid hsl(var(--border) / .7)} .hd-in{display:flex;align-items:center;gap:1rem;height:64px} .brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.02em;margin-right:auto} .brand .mark{ width:32px;height:32px;border-radius:9px;flex:none; background:linear-gradient(150deg,hsl(var(--primary)),hsl(205 89% 33%)); color:hsl(var(--primary-foreground));display:grid;place-items:center; box-shadow:0 4px 12px -6px hsl(var(--primary) / .9); } .brand .mark svg{width:18px;height:18px;stroke-width:1.6} .hd-nav{display:none;gap:.15rem;align-items:center} .hd-nav a{ display:inline-flex;align-items:center;gap:.3rem;height:44px;padding-inline:.6rem; font-size:.8125rem;font-weight:500;color:hsl(var(--muted-foreground));border-radius:8px; } .hd-nav a:hover{color:hsl(var(--foreground));background:hsl(var(--secondary) / .6)} .hd-nav a.is-current{color:hsl(var(--primary));font-weight:600;position:relative} .hd-nav a.is-current::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:9px;height:2px;border-radius:2px;background:hsl(var(--primary))} .hd-actions{display:none;gap:.4rem;align-items:center} .hd-menu{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;color:hsl(var(--foreground))} .hd-menu:hover{background:hsl(var(--secondary))} .hd-menu:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px} .crumbs{margin-bottom:1.5rem} .crumbs ol{display:none;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.8125rem} .crumbs .sep{opacity:.5} .crumbs a:hover{text-decoration:underline;text-underline-offset:3px} .crumbs [aria-current]{font-weight:600} .crumbs-mob{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;font-size:.875rem;font-weight:500} .hero .crumbs{color:hsl(var(--inverted-muted))} .hero .crumbs [aria-current]{color:hsl(var(--inverted-foreground))} .crumbs--light{color:hsl(var(--muted-foreground))} .crumbs--light [aria-current]{color:hsl(var(--foreground))} .site-ft{background:hsl(var(--foreground));color:hsl(var(--inverted-muted));padding:2.5rem 0 1.75rem;margin-top:3rem} .site-ft .brand{color:hsl(var(--inverted-foreground));margin-bottom:1.25rem} .ft-cols{display:grid;gap:1.75rem} .ft-h{font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;font-weight:600;color:hsl(var(--inverted-foreground));margin-bottom:.35rem} .ft-links{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem} /* 44px, not 40. These are the only navigation on a phone — below 960px the header nav is hidden and `.hd-menu` jumps here — so they are the one place the house minimum-target rule must not be shaved. Every other tap target in this file is already 44 or more. */ .ft-links a{display:inline-flex;align-items:center;min-height:44px;font-size:.8125rem} .ft-links a:hover{color:hsl(var(--inverted-foreground))} .ft-legal{ margin-top:2rem;padding-top:1.25rem;border-top:1px solid hsl(0 0% 100% / .13); display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;font-size:.75rem;color:hsl(var(--inverted-muted) / .75); } .ft-legal a:hover{color:hsl(var(--inverted-foreground));text-decoration:underline;text-underline-offset:3px} /* ========================================================================== 5 · LISTING PAGE (UX 3.1 - 3.13) ========================================================================== */ /* --- 3.1 hero --- */ .hero{ position:relative;overflow:hidden; background:hsl(var(--foreground));color:hsl(var(--inverted-foreground)); padding:1.5rem 0 3.75rem; } .hero::before{ content:"";position:absolute;inset:-40% -10% auto -10%;height:150%; background:radial-gradient(60% 60% at 78% 8%,hsl(var(--accent) / .28),transparent 62%), radial-gradient(50% 50% at 6% 96%,hsl(var(--primary) / .34),transparent 60%); pointer-events:none; } .hero::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(hsl(0 0% 100% / .05) 1px,transparent 1px),linear-gradient(90deg,hsl(0 0% 100% / .05) 1px,transparent 1px); background-size:52px 52px; -webkit-mask-image:radial-gradient(80% 90% at 50% 0%,#000,transparent 72%); mask-image:radial-gradient(80% 90% at 50% 0%,#000,transparent 72%); } .hero .wrap{position:relative;z-index:1} .hero h1{margin-bottom:.5rem;text-wrap:balance} .identity{color:hsl(var(--inverted-muted));font-size:.9375rem;font-weight:500} .hero .badges{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem} /* the next-prayer + address pair, lifted over the hero band */ .lift{margin-top:-2rem;position:relative;z-index:2;display:grid;gap:1rem} /* --- 3.2 next prayer --- */ .np{display:flex;flex-direction:column;gap:.1rem;padding:1.35rem 1.25rem} .np-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem} .np-name{font-family:var(--font-display);font-size:1.375rem;font-weight:600;letter-spacing:-.01em} .np-time{font-family:var(--font-display);font-size:2.75rem;line-height:1.02;font-weight:700;letter-spacing:-.03em;color:hsl(var(--foreground))} .np-count{ display:flex;align-items:center;gap:.45rem;margin-top:.55rem; font-size:.9375rem;font-weight:600;color:hsl(var(--primary)); } .np-bar{height:5px;border-radius:99px;background:hsl(var(--secondary));overflow:hidden;margin-top:.9rem} .np-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--accent)));width:58%} .np-foot{margin-top:.55rem;font-size:.75rem;color:hsl(var(--muted-foreground))} /* --- 3.3 address --- */ .addr{display:flex;flex-direction:column;gap:1rem;padding:1.25rem} .addr-line{display:flex;gap:.65rem;align-items:flex-start} .addr-line svg{color:hsl(var(--primary));margin-top:2px} .addr-street{font-size:1rem;font-weight:600;line-height:1.4} .addr-dist{font-size:.8125rem;color:hsl(var(--muted-foreground));margin-top:.15rem} /* warning is a fill and a border here, never the text colour (UX 1.1) */ .addr-warn{ display:flex;gap:.6rem;align-items:flex-start; background:hsl(var(--manarams-warning) / .1);border:1px solid hsl(var(--manarams-warning) / .38); border-radius:calc(var(--radius) - .25rem);padding:.7rem .8rem; font-size:.8125rem;line-height:1.5;color:hsl(38 84% 24%);font-weight:500; } .addr-warn svg{color:hsl(38 90% 38%);margin-top:1px} /* confirmed-but-no-street (addendum 3) is muted, not a warning — nothing is wrong */ .addr-note{font-size:.8125rem;line-height:1.5;color:hsl(var(--muted-foreground))} .addr-acts{display:flex;flex-direction:column;gap:.5rem} .addr-acts .row{display:flex;gap:.5rem} .addr-acts .row .btn{flex:1} /* static map, baked at build */ .mapbox{ position:relative;border-radius:calc(var(--radius) - .25rem);overflow:hidden; border:1px solid hsl(var(--border) / .8);background:hsl(210 40% 96%); aspect-ratio:16/9; } /* the baked static map is either inline SVG or an ; both fill the box */ .mapbox svg,.mapbox img{width:100%;height:100%;display:block;object-fit:cover} .mapbox .attr{ position:absolute;right:.4rem;bottom:.35rem;font-size:9.5px;letter-spacing:.01em; color:hsl(var(--muted-foreground));background:hsl(0 0% 100% / .78); padding:.1rem .3rem;border-radius:4px; } .mapbox .pin{ position:absolute;left:50%;top:48%;transform:translate(-50%,-100%); color:hsl(var(--primary));filter:drop-shadow(0 6px 8px hsl(210 53% 16% / .35)); } .mapbox .pin svg{width:34px;height:34px;stroke-width:1.5;fill:hsl(var(--card))} .mapbox .halo{ position:absolute;left:50%;top:48%;transform:translate(-50%,-50%); width:96px;height:96px;border-radius:50%; background:radial-gradient(hsl(var(--primary) / .22),transparent 68%); } /* the city blob: a non-confirmed record gets a region, never a pin */ .mapbox .region{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:62%;aspect-ratio:1;border-radius:50%; background:radial-gradient(hsl(var(--manarams-warning) / .22),hsl(var(--manarams-warning) / .06) 62%,transparent 72%); border:1.5px dashed hsl(var(--manarams-warning) / .55); display:grid;place-items:center; } .mapbox .region span{ font-size:.75rem;font-weight:600;color:hsl(38 84% 24%); background:hsl(0 0% 100% / .85);padding:.2rem .5rem;border-radius:999px; } /* --- 3.5 prayer times --- */ .ptable{width:100%} .ptable caption{text-align:left} .ptable td{padding:.62rem .5rem;border-bottom:1px solid hsl(var(--border) / .55)} .ptable tr:last-child td{border-bottom:0} .ptable .nm{font-size:.9375rem;font-weight:600;position:relative;padding-left:.75rem} .ptable .tm{text-align:right;font-family:var(--font-display);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:1.1} .ptable tr.is-muted .nm,.ptable tr.is-muted .tm{color:hsl(var(--muted-foreground));font-weight:500} .ptable tr.is-next{background:hsl(var(--primary) / .06)} .ptable tr.is-next .nm::before{ content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;border-radius:3px;background:hsl(var(--primary)); } .ptable tr.is-next .nm,.ptable tr.is-next .tm{color:hsl(var(--primary))} .ptable tr.is-next td:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px} .ptable tr.is-next td:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px} /* no text-transform — `nästa` is the shipped string and ships lowercase (UX 3.5, 8). It is also the non-colour affordance for the highlight, so it must not be hidden. */ .next-tag{ display:inline-flex;align-items:center;height:20px;padding-inline:.45rem;margin-left:.5rem; border-radius:999px;background:hsl(var(--primary));color:hsl(var(--primary-foreground)); font-size:.6875rem;font-weight:700;letter-spacing:.02em;vertical-align:middle; } .dateline{font-size:.8125rem;color:hsl(var(--muted-foreground));margin-top:.15rem} .srcline{font-size:.75rem;color:hsl(var(--muted-foreground));display:flex;align-items:center;gap:.4rem} /* month table accordion — pre-rendered at build, only open/close is client-side */ .acc{border-top:1px solid hsl(var(--border) / .7);margin-top:.25rem} .acc summary{ display:flex;align-items:center;justify-content:space-between;gap:.5rem; min-height:48px;font-size:.875rem;font-weight:600;color:hsl(var(--primary));cursor:pointer;list-style:none; } .acc summary::-webkit-details-marker{display:none} .acc summary:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;border-radius:8px} .acc summary .chev{transition:transform .2s ease} .acc[open] summary .chev{transform:rotate(180deg)} .mtable-scroll{overflow-x:auto;scrollbar-width:thin;padding-bottom:.5rem} .mtable{font-size:.8125rem;min-width:420px} .mtable th{ text-align:right;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em; color:hsl(var(--muted-foreground));padding:.35rem .45rem;border-bottom:1px solid hsl(var(--border)) } .mtable th:first-child,.mtable td:first-child{text-align:left;white-space:nowrap} .mtable td{padding:.38rem .45rem;text-align:right;border-bottom:1px solid hsl(var(--border) / .45)} .mtable tr.fri{background:hsl(var(--secondary) / .55)} .mtable tr.fri td:first-child{font-weight:600} .jt{display:inline-block;margin-left:.35rem;font-size:.6875rem;font-weight:600;color:hsl(var(--primary))} /* --- 3.6 jumu'ah --- */ .jum{ position:relative;overflow:hidden; background:linear-gradient(160deg,hsl(var(--card)),hsl(var(--secondary) / .55)); display:flex;flex-direction:column;justify-content:center; } .jum::after{ content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%; background:radial-gradient(hsl(var(--accent) / .3),transparent 68%);pointer-events:none; } .jum-time{font-family:var(--font-display);font-size:3rem;line-height:1;font-weight:700;letter-spacing:-.035em;margin:.5rem 0 .35rem} .jum-lang{font-size:.9375rem;font-weight:500;color:hsl(var(--muted-foreground))} .jum-empty{font-size:.875rem;line-height:1.6;margin-top:.5rem} /* --- 3.7 om moskén + 3.8 bra att veta --- */ .about-body{font-size:.9375rem;line-height:1.7} .affil{ display:flex;gap:.55rem;align-items:center;margin-top:auto;padding-top:1rem; border-top:1px solid hsl(var(--border) / .6);font-size:.8125rem;color:hsl(var(--muted-foreground));font-weight:500; } .affil svg{color:hsl(var(--primary));flex:none} .facts{width:100%;font-size:.875rem} .facts th{ text-align:left;font-weight:500;color:hsl(var(--muted-foreground)); padding:.6rem .75rem .6rem 0;vertical-align:top;width:44%;white-space:nowrap; } .facts td{padding:.6rem 0;font-weight:600;text-align:right;vertical-align:top} .facts tr+tr th,.facts tr+tr td{border-top:1px solid hsl(var(--border) / .55)} .facts td.missing{font-weight:500} .prompt{ display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .6rem; margin-top:.75rem;padding-top:.9rem;border-top:1px solid hsl(var(--border) / .6); font-size:.875rem;color:hsl(var(--muted-foreground)); } /* --- 3.9 kontakt & länkar --- */ .clist{display:flex;flex-direction:column} .crow{ display:flex;align-items:center;gap:.85rem;min-height:52px;padding:.5rem 0; border-bottom:1px solid hsl(var(--border) / .5); } .crow:last-child{border-bottom:0} .crow:hover .cval{color:hsl(var(--primary))} .crow .cico{ width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center; background:hsl(var(--secondary));color:hsl(var(--primary)); } /* `display:grid` is what stacks `.clab` above `.cval`. Without it both spans stay inline and every contact row reads `Instagram@example`. It lived as an inline `style="display:grid"` in listing-facts.mjs while this stylesheet was off-limits; it belongs here, because `.cval`'s ellipsis and `white-space: nowrap` below only do anything to a block on a line of its own. */ .crow .cmeta{display:grid;min-width:0;flex:1} .crow .clab{font-size:.75rem;color:hsl(var(--muted-foreground));line-height:1.3} .crow .cval{font-size:.9375rem;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .15s ease} .crow .cext{color:hsl(var(--muted-foreground));font-size:.9375rem} /* --- 3.10 ladda ner & dela --- */ .dl-grid{display:flex;flex-direction:column;gap:.5rem} .dl-grid .btn{justify-content:flex-start} .dl-hint{font-size:.75rem;color:hsl(var(--muted-foreground));padding-left:.15rem} .dl-split{display:flex;gap:.5rem} .dl-split .btn{flex:1;justify-content:center} /* --- 3.11 claim band / on-Manara band (same band, mutually exclusive copy) --- */ .claim{ position:relative;overflow:hidden;margin-top:2rem; background:hsl(var(--foreground));color:hsl(var(--inverted-foreground)); padding:2.5rem 0; } .claim::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(52% 120% at 88% 50%,hsl(var(--primary) / .45),transparent 62%), radial-gradient(40% 100% at 8% 0%,hsl(var(--accent) / .2),transparent 60%); } .claim .wrap{position:relative;z-index:1;display:flex;flex-direction:column;gap:1rem} .claim h2{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em} .claim p{color:hsl(var(--inverted-muted));font-size:.9375rem;line-height:1.65;max-width:52ch} /* --- 3.12 nearby / directory card (also every index page) --- */ .dcard{ background:hsl(var(--card));border:1px solid hsl(var(--border) / .8);border-radius:var(--radius); padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.6rem; transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease; } .dcard:hover{box-shadow:0 14px 34px -22px hsl(210 53% 16% / .5);border-color:hsl(var(--primary) / .35);transform:translateY(-2px)} .dcard-hd{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start} .dcard-nm{font-size:1rem;font-weight:600;line-height:1.35;letter-spacing:-.01em} .dcard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;font-size:.8125rem;color:hsl(var(--muted-foreground))} .dcard-addr{display:flex;gap:.45rem;align-items:flex-start;font-size:.8125rem;color:hsl(var(--muted-foreground));line-height:1.5} .dcard-addr svg{margin-top:2px;flex:none;opacity:.75} .dcard-addr.is-unknown{color:hsl(38 84% 26%)} .dcard-addr.is-unknown svg{color:hsl(38 90% 40%);opacity:1} .dcard-ft{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.15rem} .dcard-langs{display:flex;flex-wrap:wrap;gap:.3rem} /* --- 2.4 / 3.13 source footer --- */ /* on --card, not --background: the link-variant buttons below need 4.65:1 */ .sources{margin-top:2rem;font-size:.75rem;color:hsl(var(--muted-foreground));line-height:1.7} .sources h2{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:hsl(var(--muted-foreground));margin-bottom:.4rem} .sources .acts{display:flex;flex-wrap:wrap;gap:0 1.25rem;margin-top:.15rem} .sources .btn-link{font-size:.8125rem} /* ========================================================================== 6 · INDEX PAGES, NÄRA MIG, KARTA (UX 4.1 - 4.5) ========================================================================== */ .ihero{ position:relative;overflow:hidden;padding:1.25rem 0 2rem; background:linear-gradient(180deg,hsl(var(--secondary) / .85),hsl(var(--background))); border-bottom:1px solid hsl(var(--border) / .6); } .ihero::after{ content:"";position:absolute;inset:0;opacity:.5;pointer-events:none; background-image: linear-gradient(hsl(var(--primary) / .07) 1.5px,transparent 1.5px), linear-gradient(90deg,hsl(var(--primary) / .07) 1.5px,transparent 1.5px); background-size:64px 64px; -webkit-mask-image:radial-gradient(70% 80% at 88% 0%,#000,transparent 70%); mask-image:radial-gradient(70% 80% at 88% 0%,#000,transparent 70%); } .ihero .wrap{position:relative;z-index:1} .ihero h1{margin-bottom:.5rem} .isub{font-size:.9375rem;color:hsl(var(--muted-foreground));line-height:1.6;max-width:48ch} .toolbar{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem} .pills{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding:3px} .pills::-webkit-scrollbar{display:none} .results{display:grid;gap:.75rem;margin-top:1.5rem} /* holds the one polite `resortedByDistance` announcement (UX 4.1) */ .rescount{font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;font-weight:600;color:hsl(var(--muted-foreground));margin-top:1.5rem} .empty{ border:1px dashed hsl(var(--border));border-radius:var(--radius); padding:2.25rem 1.25rem;text-align:center;background:hsl(var(--card) / .6); } .empty p{font-size:.9375rem;font-weight:500;margin-bottom:.75rem} .idxlinks{display:flex;flex-direction:column;gap:0;margin-top:1.75rem;border-top:1px solid hsl(var(--border) / .7)} .idxlinks a,.idxlinks .is-pending{ display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px; border-bottom:1px solid hsl(var(--border) / .7);font-size:.9375rem;font-weight:600;color:hsl(var(--primary)); } .idxlinks a:hover{background:hsl(var(--secondary) / .5)} .idxlinks a .arw{transition:transform .18s ease} .idxlinks a:hover .arw{transform:translateX(3px)} /* ADDED — an unpublished county is plain text, never a link to a 404 and never a fake count (UX 4.3 Partial). The mockup draws no national index. */ .idxlinks .is-pending{color:hsl(var(--muted-foreground));font-weight:500} /* --- 4.4 nära mig, the permission gate --- */ .nm-wrap{display:grid;place-items:center;padding:2.5rem 0 3rem;min-height:540px} .nm-card{ width:100%;max-width:520px;text-align:center;overflow:hidden;padding:0; box-shadow:0 30px 60px -34px hsl(210 53% 16% / .5),0 4px 12px -6px hsl(210 53% 16% / .1); } .nm-map{position:relative;height:180px;border-bottom:1px solid hsl(var(--border) / .8);overflow:hidden} .nm-map svg,.nm-map img{width:100%;height:100%;object-fit:cover} .nm-map::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,hsl(var(--background) / .05),hsl(var(--card)) 96%)} .nm-cross{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2; width:64px;height:64px;border-radius:50%;display:grid;place-items:center; background:hsl(var(--card));color:hsl(var(--primary)); box-shadow:0 10px 26px -12px hsl(210 53% 16% / .6); } .nm-cross svg{width:28px;height:28px;stroke-width:1.5} .nm-cross::before{ content:"";position:absolute;inset:-14px;border-radius:50%; border:1.5px solid hsl(var(--primary) / .3);animation:ripple 2.8s ease-out infinite; } @keyframes ripple{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.5);opacity:0}} .nm-body{padding:1.5rem 1.35rem 1.75rem;display:flex;flex-direction:column;gap:.9rem;align-items:center} .nm-body h1{margin-bottom:.15rem} .nm-intro{font-size:.9375rem;line-height:1.65;color:hsl(var(--muted-foreground));max-width:34ch} .nm-priv{ display:inline-flex;align-items:center;gap:.5rem; background:hsl(var(--manarams-success) / .12);color:hsl(145 63% 26%); border:1px solid hsl(var(--manarams-success) / .28); border-radius:999px;padding:.45rem .8rem;font-size:.8125rem;font-weight:600; } .nm-priv svg{width:15px;height:15px} .nm-or{ display:flex;align-items:center;gap:.6rem;width:100%;margin-top:.35rem; font-size:.8125rem;color:hsl(var(--muted-foreground)); } .nm-or::before,.nm-or::after{content:"";flex:1;height:1px;background:hsl(var(--border))} .nm-search{width:100%;text-align:left} /* --- 4.5 karta --- */ /* ADDED — the mockup draws no map page. The map is the one genuinely async surface (UX 4.5): a skeleton carrying aria-busy, then tiles. */ .mapstage{ position:relative;margin-top:1rem;overflow:hidden; border:1px solid hsl(var(--border) / .8);border-radius:var(--radius); background:hsl(210 40% 96%);min-height:clamp(320px,60vh,720px); } .skeleton{ border-radius:calc(var(--radius) - .25rem);min-height:120px; background:linear-gradient(100deg,hsl(var(--secondary) / .55) 30%,hsl(var(--card) / .85) 50%,hsl(var(--secondary) / .55) 70%); background-size:220% 100%;animation:shimmer 1.4s linear infinite; } .mapstage .skeleton{position:absolute;inset:0;border-radius:0;min-height:0} @keyframes shimmer{from{background-position:220% 0}to{background-position:-220% 0}} /* --- 3.3 maps sheet (modal) + 3.10 copy toast --- */ /* fixed, not absolute: in the mockup these were positioned inside a frame */ .sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center} .sheet .scrim{position:absolute;inset:0;background:hsl(210 53% 10% / .45);backdrop-filter:blur(2px);animation:fadein .2s ease both} .sheet .panel{ position:relative;width:100%;background:hsl(var(--card)); border-radius:var(--radius) var(--radius) 0 0;padding:1rem 1.25rem 1.5rem; box-shadow:0 -20px 50px -20px hsl(210 53% 16% / .5); animation:slideup .26s cubic-bezier(.2,.8,.3,1) both; } .sheet .grab{width:38px;height:4px;border-radius:99px;background:hsl(var(--border));margin:0 auto 1rem} .sheet h3{font-family:var(--font-display);font-size:1.125rem;font-weight:600;margin-bottom:.85rem;text-align:center} .sheet .opt{ display:flex;align-items:center;gap:.85rem;width:100%;min-height:56px; border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - .25rem); padding:0 1rem;font-size:.9375rem;font-weight:600;margin-bottom:.5rem;text-align:left; } .sheet .opt:hover{background:hsl(var(--secondary) / .6);border-color:hsl(var(--primary) / .4)} .sheet .opt:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px} .sheet .opt .glyph{ width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center; background:hsl(var(--secondary));color:hsl(var(--primary)); } .sheet .opt .ext{margin-left:auto;color:hsl(var(--muted-foreground));font-size:.9375rem} @keyframes fadein{from{opacity:0}to{opacity:1}} @keyframes slideup{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}} .toast{ position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:50; background:hsl(var(--foreground));color:hsl(var(--inverted-foreground)); border-radius:calc(var(--radius) - .25rem);padding:.85rem 1rem; box-shadow:0 20px 40px -18px hsl(210 53% 10% / .7); display:flex;gap:.7rem;align-items:flex-start; animation:slideup .24s cubic-bezier(.2,.8,.3,1) both; } .toast .tico{color:hsl(145 60% 72%);flex:none;margin-top:1px} .toast strong{display:block;font-size:.875rem;font-weight:600} .toast span{font-size:.8125rem;color:hsl(var(--inverted-muted))} /* ========================================================================== 7 · MAIN RHYTHM These are the small-screen defaults for the layout containers. They MUST stay above section 8; in the mockup they sat below it and `.cols2` lost its desktop `display:grid` to the later `display:flex`. ========================================================================== */ .pagemain{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:.5rem} .nearby-grid{display:grid;gap:.75rem} .cols2{display:flex;flex-direction:column;gap:1.25rem} .about{display:flex;flex-direction:column} /* ========================================================================== 8 · RESPONSIVE Converted 1:1 from `@container pg (...)` — same breakpoints, same order. Directory pages fill the viewport, so these are viewport media queries. ========================================================================== */ @media (min-width:560px){ .wrap{padding-inline:2rem} .addr-acts{flex-direction:row;align-items:center;flex-wrap:wrap} .addr-acts .row{flex:1 1 auto} .dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem} .dl-split{grid-column:1 / -1} .ft-cols{grid-template-columns:1.2fr 1fr} } @media (min-width:760px){ .h1{font-size:3rem} .h2{font-size:1.5rem} .body{font-size:1rem} .hero{padding:1.75rem 0 4.25rem} .crumbs ol{display:flex} .crumbs-mob{display:none} .np{flex-direction:row;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.5rem} .np-time{font-size:3.5rem} .ptable .tm{font-size:1.75rem} .results{grid-template-columns:1fr 1fr} .toolbar{flex-direction:row;align-items:center} .toolbar .field{flex:1 1 260px} .pills{flex:none} .claim .wrap{flex-direction:row;align-items:center;justify-content:space-between;gap:2rem} .claim .btn{flex:none} .nm-map{height:220px} } @media (min-width:960px){ .hd-nav{display:flex} .hd-actions{display:flex} .hd-menu{display:none} .lift{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:1.25rem} .cols2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25rem;align-items:stretch} .cols2>*{height:100%} .cols2--wide{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)} .about{display:flex;flex-direction:column} .nearby-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .results{grid-template-columns:repeat(2,minmax(0,1fr))} .site-ft{padding-top:3rem} .ft-cols{grid-template-columns:1.4fr 1fr 1fr} .sheet{align-items:center} .sheet .panel{max-width:420px;border-radius:var(--radius);padding-bottom:1.25rem} .sheet .grab{display:none} .toast{left:auto;right:1.5rem;max-width:360px} } /* second 760 block, kept after the 960 block exactly as the mockup ordered it: the directions button is `cta` (56) on mobile and `lg` (44) from tablet up */ @media (min-width:760px){ .addr-acts .btn-cta{height:44px;font-size:.875rem;padding-inline:1.5rem} .np>div:last-child{text-align:right;min-width:210px} .np .np-bar{width:100%} } /* ========================================================================== 9 · MOTION Reveal-on-scroll is opt-in: the island sets `data-anim-ready` on before it starts observing. Without it every `[data-anim]` block renders normally, so a page whose JS never loads is never a blank page. ========================================================================== */ html[data-anim-ready] [data-anim]{opacity:0;transform:translateY(14px)} html[data-anim-ready] [data-anim].in{ opacity:1;transform:none; transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1); transition-delay:calc(var(--d,0) * 70ms); } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} [data-anim]{opacity:1;transform:none} } /* ============================================================================= === additions === 2026-08-26 GENERATED FROM ../specs/2026-08-26-directory-index-pages-mockup.html, which designs the four pages the 2026-08-18 mockup never drew: N national index /moskeer/ [UX 4.3, contract 5] Y county index /moskeer/{lan}/ [UX 4.2, contract 4] K karta /moskeer/karta/ [UX 4.5, contract 7] O om katalogen /moskeer/om-katalogen/ [UX 2.3, 4.3, 5.2, contract 8] Everything above this line is unchanged. These rules only add; none of them redefines a property on a selector that appears earlier, except where noted inline (`.claim--stmt .wrap`, `.mapsheet .panel`, `.mapsheet .grab`, and the `.dcard` / `.ycard` / `.dcard--tile` layout swaps), where a later-in-source override at equal specificity is the intended mechanism. Same conversion as the header describes, in reverse: the mockup writes these queries as `@container pg (...)`; they are `@media (...)` here, at identical breakpoints (560 / 760 / 960 — no new breakpoint is introduced). Contract sections that change shape as a result are listed in the report accompanying the mockup; the two structural ones are that `.mapfull` sits OUTSIDE `
` (like `.hero` and `.claim`) and that the national index no longer uses `.idxlinks .is-pending`. ============================================================================= */ /* --- N · the national hero is the search box ---------------------------- */ /* `/moskeer/` is the front door and the page that ranks for `moskéer i sverige`. Its one job is to get a visitor to their own city, so the hero carries a 56px search field and three >=44px shortcuts instead of the 40px toolbar the other index pages use. */ .ihero--nat{padding:1.75rem 0 2.5rem} .ihero--nat h1{max-width:15ch} /* The same stylised Sweden the karta page plots on, at 7 % — the one piece of ornament on the page, and it says where you are without a word. */ .ihero-glyph{ position:absolute;z-index:0;right:-1rem;top:50%;transform:translateY(-50%); height:210px;width:auto;opacity:.07;color:hsl(var(--primary)); pointer-events:none;display:none; } .hsearch{margin-top:1.5rem;max-width:34rem} .field--lg svg{left:1.05rem;width:20px;height:20px} .input-lg{ height:56px;font-size:1rem;padding-left:3.1rem; border-radius:calc(var(--radius) - .125rem); box-shadow:0 12px 28px -20px hsl(210 53% 16% / .6),0 1px 0 hsl(0 0% 100% / .8) inset; } /* Two shortcuts sit half and half; three put the primary on its own row. */ .hshort{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem} .hshort>.btn{flex:1 1 calc(50% - .25rem)} .hshort>.btn:first-child:nth-last-child(n+3){flex:1 1 100%} /* --- N · place tiles: cities and published counties --------------------- */ /* A city or a county is a name and a count. `.idxlinks` gives each one a 56px full-width row, which at 8 cities plus 21 counties is 29 rows of near-identical text. The tile grid puts the same data in a quarter of the vertical space and lets a reader scan for their own place. */ .tilegrid{display:grid;gap:.6rem;margin-top:.6rem;grid-template-columns:repeat(2,minmax(0,1fr))} .dcard--tile{ display:grid;grid-template-columns:minmax(0,1fr);align-items:center; gap:.05rem;padding:.8rem .9rem;min-height:68px; } .dcard--tile .dcard-nm{font-size:.9375rem} .dcard--tile .arw{display:none} /* --- N · counties that have no page yet --------------------------------- */ /* `.idxlinks .is-pending` was drawn for one or two pending rows among many links. At launch the ratio is inverted — roughly 4 of 21 counties are published — and 17 dead 56px rows read as a broken list, not as a plan. A pending county is therefore not a row at all: it is a name in a roster, under the one-line rollout notice that explains the roster. No link, no count, no card, and nothing apologetic (UX §4.3 Partial). `.idxlinks .is-pending` above is left in place: it is still correct for a city index, and removing it would be a change to an existing rule. */ .idxroster{ display:flex;flex-wrap:wrap;gap:.1rem 1.1rem;margin-top:.6rem; font-size:.875rem;line-height:1.9;color:hsl(var(--muted-foreground)); } .idxroster li{position:relative;padding-left:.85rem} /* a drawn dot, not a `·` character — generated text content is announced by some screen readers and 17 stray middots is not a reading experience */ .idxroster li::before{ content:"";position:absolute;left:.1rem;top:.85em;width:4px;height:4px; border-radius:50%;background:currentColor;opacity:.45; } /* --- N, O · the statement band ------------------------------------------ */ /* `catalogueNoticeBody` promoted out of the small card it sat in. It is the reason the directory exists and the sentence a journalist or a mosque would link to, so it gets the only full-bleed dark band on the page. Same `.claim` element as the listing page; only the composition differs. */ .claim--stmt{margin-top:2.5rem} .claim--stmt .wrap{flex-direction:column;align-items:flex-start;gap:.85rem} .claim .eyebrow{color:hsl(var(--inverted-muted))} .claim .eyebrow::after{background:hsl(0 0% 100% / .2);opacity:1} .stmt-lead{ font-family:var(--font-display);font-size:1.5rem;line-height:1.18;font-weight:700; letter-spacing:-.022em;max-width:19ch;text-wrap:balance; } .claim--stmt p{max-width:54ch} .stmt-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.25rem;margin-top:.35rem} .stmt-q{font-size:.9375rem;color:hsl(var(--inverted-muted))} /* --accent is 7.6:1 on the navy band; --primary would be 2.3:1 and fail */ .stmt-acts .tlink{color:hsl(var(--accent))} /* --- Y · county index: a city is a row, not a chip ---------------------- */ /* A county holds 1–3 cities. Two name-and-count cards in a two-up grid read as a stub page, so the card becomes a full-width row that also carries the names of the listings in that city. Two rows is then a page worth landing on, and the same row still works at one city or at eight. */ .ycards{display:flex;flex-direction:column;gap:.75rem;margin-top:.6rem} .ycard{padding:1.05rem 1.1rem;gap:.5rem} .ycard .dcard-nm{font-family:var(--font-display);font-size:1.25rem;font-weight:600;letter-spacing:-.015em} .ycard-list{ display:flex;flex-wrap:wrap;gap:.1rem .95rem; font-size:.8125rem;line-height:1.7;color:hsl(var(--muted-foreground)); } .ycard-list li{position:relative;padding-left:.8rem} .ycard-list li::before{ content:"";position:absolute;left:.05rem;top:.8em;width:3px;height:3px; border-radius:50%;background:currentColor;opacity:.5; } .ycard-go{ display:inline-flex;align-items:center;gap:.4rem; color:hsl(var(--primary));font-size:.875rem;font-weight:600; } .ycard-go .arw{transition:transform .18s ease} .ycard:hover .ycard-go .arw{transform:translateX(3px)} /* --- K · the map is full-bleed ------------------------------------------ */ /* UX §4.5 asks for a full-bleed map. It therefore sits OUTSIDE `
`, the way `.hero` and `.claim` already do, because `
` cannot hold a full-bleed child [contract, Deviations 1]. `.mapstage` above is the constrained-column form and is left in place; a renderer picks one. */ .mapfull{ position:relative;overflow:hidden; background:hsl(var(--secondary)); border-block:1px solid hsl(var(--border) / .7); height:clamp(420px,64vh,720px); } .mapfull>svg{position:absolute;inset:0;width:100%;height:100%} /* Three steps, all from the existing palette: sea `--secondary` 91 %, neighbouring land the stylesheet's own map literal 96 %, Sweden `--card`. */ .mapsea{fill:hsl(var(--secondary))} .mapland{fill:hsl(210 40% 96%);stroke:hsl(var(--border) / .55);stroke-width:1.2;stroke-linejoin:round} /* stroke-width is pre-divided by the scale on the Sweden group in the markup */ .mapse{fill:hsl(var(--card));stroke:hsl(var(--border));stroke-width:.45;stroke-linejoin:round} .mapmark{cursor:pointer} .mapmark .hit{fill:transparent} .mapmark .bub{fill:hsl(var(--primary));stroke:hsl(var(--card));stroke-width:2.5} .mapmark text{ fill:hsl(var(--primary-foreground));font-family:var(--font-display);font-weight:700; text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums; } .mapmark .pinp{fill:hsl(var(--primary));stroke:hsl(var(--card));stroke-width:2} .mapmark .pind{fill:hsl(var(--card))} .mapmark .ring{fill:none;stroke:hsl(var(--primary) / .35);stroke-width:2.5;opacity:0} .mapmark.is-sel .ring{opacity:1} /* max-width leaves the attribution its corner; the pill row scrolls inside. */ .mapchips{ position:absolute;left:.75rem;top:.75rem;z-index:3;max-width:calc(100% - 8rem); background:hsl(var(--card) / .93); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid hsl(var(--border) / .8);border-radius:calc(var(--radius) - .25rem); padding:.3rem;box-shadow:0 16px 34px -20px hsl(210 53% 16% / .65); } .mapchips .pills{padding:0;gap:.3rem} .mapattr{ position:absolute;right:.6rem;top:.75rem;z-index:2; font-size:9.5px;letter-spacing:.01em;color:hsl(var(--muted-foreground)); background:hsl(0 0% 100% / .78);padding:.12rem .32rem;border-radius:4px; } /* Top-right on a phone, because the sheet owns the bottom of the map there. Bottom-right from 760, where the sheet is a floating card on the left. */ .mapnear{position:absolute;right:.75rem;top:3.4rem;z-index:3} /* The marker sheet is anchored inside the map and carries no scrim. A sheet that blanks the map hides the one thing the reader just tapped. It is not a modal: `