/* Sumjho — shared chrome (utility corner · breadcrumb bar · footer). Loaded by both /prototype/index.html and /prototype/sumjho.html on top of each page's own styles. Only NEW chrome lives here; the existing page headers (logo lockup + scroll-shrink) are left untouched and reused. All colours come from the theme custom properties already defined in each page's (--bg/--surface/--text/--text-soft/--text-faint/--accent/ --divider), so light/dark just works. No pills, gradients, or emojis. */ /* ---------- sticky-footer scaffold ---------- Make the body a column so the footer can be pushed to the viewport bottom on short pages (margin-top:auto) without ever becoming a fixed overlay. Block children stretch to full width exactly as before; the sticky header and fixed overlays are unaffected. */ body { min-height: 100vh; display: flex; flex-direction: column; } /* ---------- utility corner (search · reading list · menu) ---------- The three icon buttons live top-right. The existing #menu-btn is moved into this group at runtime (mountUtilityCorner in library.js); these styles match the existing .menu-btn footprint so the group reads as one. */ .utility-corner { grid-column: 3; justify-self: end; align-self: start; margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; } .util-btn { width: 36px; height: 36px; border-radius: 10px; background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .util-btn:hover, .util-btn:focus-visible { background: var(--divider); outline: none; } .util-btn svg { width: 18px; height: 18px; display: block; } .util-btn.active { color: var(--accent); } /* The existing #menu-btn carries margin-top:4px for its old grid slot; the corner already handles that offset, so neutralise it inside the group. */ .utility-corner #menu-btn { margin-top: 0; } /* ---------- breadcrumb bar ---------- Its own row directly below the header (content path: Urdu › Iqbal › … › Himala). Home omits it. Intermediate crumbs are plain text until their L2 pages land (1.6); the leaf is the current poem. Right-aligned to match the original-first rule for content. */ .breadcrumb-bar { border-bottom: 1px solid var(--divider); background: var(--bg); } .breadcrumb-bar .breadcrumb-inner { /* Match each page's content column (set --chrome-content-width per page); defaults to 640 where unset. */ max-width: var(--chrome-content-width, 640px); margin: 0 auto; padding: 10px 24px; font-size: 12px; color: var(--text-soft); text-align: right; } .breadcrumb-bar .crumb { color: var(--text-soft); } .breadcrumb-bar .crumb-current { color: var(--text); } .breadcrumb-bar .crumb-sep { color: var(--text-faint); margin: 0 8px; } @media (max-width: 600px) { .breadcrumb-bar .breadcrumb-inner { font-size: 11px; padding: 8px 18px; } } /* ---------- inline search panel ---------- Drops down under the header when the search icon is toggled. Live client- side match over the poem index; results are clean poem links. */ .search-panel { border-bottom: 1px solid var(--divider); background: var(--surface); display: none; } .search-panel.open { display: block; } .search-panel .search-inner { max-width: 640px; margin: 0 auto; padding: 16px 24px; } .search-panel input { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--divider); border-radius: 8px; padding: 10px 14px; font-family: inherit; font-size: 15px; } .search-panel input:focus { outline: none; border-color: var(--accent); } .search-results { margin-top: 10px; max-height: 50vh; overflow-y: auto; } .search-result { display: block; padding: 8px 6px; border-bottom: 1px solid var(--divider); text-decoration: none; text-align: right; } .search-result:last-child { border-bottom: none; } .search-result:hover, .search-result:focus-visible { background: var(--bg); outline: none; } .search-result .sr-ur { font-family: 'Noto Nastaliq Urdu', serif; direction: rtl; color: var(--text); font-size: 15px; } .search-result .sr-en { color: var(--text-soft); font-size: 12px; margin-top: 2px; } .search-empty { color: var(--text-faint); font-size: 13px; padding: 10px 6px; text-align: right; } /* "see all results →" — both the top bar and the masthead dropdown */ .search-seeall { display: block; padding: 10px 6px 4px; text-align: right; font-size: 12px; color: var(--accent); text-decoration: none; } .search-seeall:hover, .search-seeall:focus-visible { text-decoration: underline; outline: none; } /* masthead live-search dropdown — floats below the input, shows on .open */ .search-dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--surface); border: 1px solid var(--divider); border-radius: 10px; max-height: 60vh; overflow-y: auto; padding: 4px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); text-align: right; } .search-dropdown.open { display: block; } /* ---------- reading-list panel ---------- A slide-in drawer listing localStorage-saved poems. The save action itself arrives with the reading room/reading list work (1.7/1.9); until then this reads whatever is stored and shows the empty state. */ .rl-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; width: min(360px, 88vw); background: var(--surface); border-left: 1px solid var(--divider); transform: translateX(100%); transition: transform 0.2s ease; display: flex; flex-direction: column; } .rl-panel.open { transform: translateX(0); } .rl-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--divider); } .rl-title { font-size: 14px; color: var(--text); } .rl-close { color: var(--text-soft); font-size: 22px; line-height: 1; } .rl-body { padding: 8px 12px; overflow-y: auto; } .rl-item { display: block; padding: 10px 8px; border-bottom: 1px solid var(--divider); text-decoration: none; text-align: right; } .rl-item .rl-ur { font-family: 'Noto Nastaliq Urdu', serif; direction: rtl; color: var(--text); } .rl-item .rl-en { color: var(--text-soft); font-size: 12px; margin-top: 2px; } .rl-empty { color: var(--text-faint); font-size: 13px; padding: 24px 12px; text-align: center; line-height: 1.6; } .rl-backdrop { position: fixed; inset: 0; z-index: 119; background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .rl-backdrop.open { opacity: 1; pointer-events: auto; } /* ---------- universal footer ---------- browse / about / legal columns + wordmark, tagline, © and counts. Pushed to the viewport bottom on short pages by margin-top:auto. */ .site-footer { margin-top: auto; border-top: 1px solid var(--divider); background: var(--bg); color: var(--text-soft); } .site-footer .footer-inner { max-width: 720px; margin: 0 auto; padding: 40px 24px 28px; } .footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .footer-col h4 { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-bottom: 12px; } .footer-col a, .footer-col span.foot-soon { display: block; padding: 4px 0; font-size: 13px; text-decoration: none; color: var(--text-soft); } .footer-col a:hover, .footer-col a:focus-visible { color: var(--text); text-decoration: underline; outline: none; } /* Links whose destination page doesn't exist yet read as muted, non-interactive. */ .footer-col span.foot-soon { color: var(--text-faint); cursor: default; } .footer-foot { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--divider); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; } .footer-foot .foot-wordmark { font-size: 16px; color: var(--text); letter-spacing: 0.5px; } .footer-foot .foot-tagline { font-size: 12px; font-style: italic; color: var(--text-soft); } /* Legal text + © cluster on the right, styled identical to the copyright text: muted #5f675c. Plain text for now (non-interactive) until the privacy/terms/rights pages exist. */ .footer-legal { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .footer-legal span, .footer-foot .foot-meta { font-size: 11px; color: #5f675c; letter-spacing: 0.5px; } @media (max-width: 600px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 20px; } .footer-legal { margin-left: 0; width: 100%; margin-top: 4px; } } /* ---------- BROWSE: shelves + tiles (L1 home; tiles reused by L2 in 1.6) ---------- Horizontally-scrolling shelves of fixed-width tiles. Original-first, right-aligned. The soft right-edge fade is the §2-specified "more" hint. */ .home-shelves { display: flex; flex-direction: column; padding: 12px 0 32px; } .shelf { position: relative; padding: 14px 0; } .shelf-head { display: flex; align-items: baseline; justify-content: space-between; max-width: 1000px; margin: 0 auto; padding: 0 24px 10px; } .shelf-title { font-size: 13px; letter-spacing: 1px; font-weight: 600; color: var(--text-soft); text-transform: lowercase; } .shelf-seeall { font-size: 12px; color: var(--accent); text-decoration: none; white-space: nowrap; } .shelf-seeall:hover, .shelf-seeall:focus-visible { text-decoration: underline; outline: none; } .shelf-strip { /* Share the heading's content column so the tile row (and the first tile) line up to the same left/right edges as the section heading. */ max-width: 1000px; margin: 0 auto; display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 4px 24px 10px; scroll-snap-type: x proximity; /* Match the padding so snap doesn't pull the first tile past the heading's left edge on overflowing strips (snapport start = content edge). */ scroll-padding-left: 24px; -webkit-overflow-scrolling: touch; } .shelf-strip::-webkit-scrollbar { height: 0; background: transparent; } /* soft right-edge fade hinting "more" — pinned to the content column's right edge */ .shelf::after { content: ''; position: absolute; top: 38px; bottom: 10px; width: 36px; right: max(0px, calc((100% - 1000px) / 2)); background: linear-gradient(to right, transparent, var(--bg)); pointer-events: none; } .tile { flex: 0 0 152px; width: 152px; min-height: 132px; display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--divider); border-radius: 10px; background: var(--surface); padding: 14px; text-decoration: none; text-align: right; scroll-snap-align: start; transition: border-color 0.15s, background 0.15s; } .tile:hover, .tile:focus-visible { border-color: var(--accent); outline: none; } .tile-ur { font-family: 'Noto Nastaliq Urdu', serif; direction: rtl; color: var(--text); font-size: 16px; line-height: 1.5; } .tile-en { color: var(--text-soft); font-size: 12px; } .tile-poet, .tile-meta { color: var(--text-faint); font-size: 11px; line-height: 1.4; } .tile.soon { opacity: 0.6; } .tile.language-tile.soon { cursor: default; } .tile-badges { display: flex; gap: 8px; justify-content: flex-end; margin-top: auto; padding-top: 8px; } .badge { font-size: 9px; letter-spacing: 0.5px; text-transform: lowercase; color: var(--text-faint); } .badge.on { color: var(--accent); } /* ---------- L2 filtered list (browse.html) ---------- */ .browse { padding: 8px 0 40px; } .browse-title-block { text-align: center; padding: 18px 24px 10px; } .browse-title-ur { font-family: 'Noto Nastaliq Urdu', serif; direction: rtl; font-size: 30px; font-weight: 500; line-height: 1.5; color: var(--text); } .browse-title-en { margin-top: 8px; font-size: 15px; color: var(--text-soft); } .browse-count { margin-top: 6px; font-size: 12px; color: var(--text-faint); letter-spacing: 0.5px; } /* refine row — right-aligned controls that compose */ .refine-row { max-width: 880px; margin: 0 auto; padding: 4px 24px 16px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; } .refine-select, .refine-search { background: var(--surface); color: var(--text); border: 1px solid var(--divider); border-radius: 8px; padding: 7px 10px; font-family: inherit; font-size: 12px; } .refine-search { min-width: 160px; } .refine-select:focus, .refine-search:focus { outline: none; border-color: var(--accent); } .refine-toggle { font-size: 12px; color: var(--text-soft); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .refine-toggle input { accent-color: var(--accent); } /* responsive tile grid — capped at 5 columns (container width), stacks on mobile */ .browse-grid { max-width: 880px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .browse-grid .tile { flex: initial; width: auto; } /* fill the grid cell, not the fixed shelf width */ .browse-empty { grid-column: 1 / -1; text-align: center; color: var(--text-faint); font-size: 14px; padding: 48px 0; } @media (max-width: 600px) { .refine-row { justify-content: stretch; } .refine-select, .refine-search { flex: 1 1 auto; } .browse-title-ur { font-size: 26px; } }