/* Tfila Finder — site stylesheet One typographic system for the homepage and the legal pages. Ink on warm paper, one spot colour (the brand blue) used generously, a little brass for warmth. No cards, no gradients, no icons. Fonts are loaded from the HTML (preconnect + ), not via @import, so they don't block the first paint. */ :root { --paper: #FAF6EE; /* warm newsprint */ --paper-2: #F3EDE0; /* a shade deeper, for bands */ --ink: #141414; --ink-2: #454540; --mute: #63635C; /* 5.6:1 on paper */ --spot: #2255B7; --spot-deep: #17408F; --spot-tint: #E6EEFA; /* pale blue, for highlighted rows and notices */ --brass: #B8811F; /* warm accent, used sparingly */ --rule: #141414; --display: 'Secular One', 'Arial Black', sans-serif; --body: 'IBM Plex Sans Hebrew', 'Segoe UI', Arial, sans-serif; /* IBM Plex Mono has no Hebrew glyphs. Listing Plex Sans Hebrew right after it makes Hebrew fall back to the same face on every device instead of to whatever Courier the OS has. Digits and Latin still set in mono. */ --mono: 'IBM Plex Mono', 'IBM Plex Sans Hebrew', 'Courier New', monospace; --measure: 34rem; color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } ::selection { background: var(--spot); color: #fff; } img { max-width: 100%; height: auto; display: block; } a { color: var(--spot); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } a:hover { color: var(--spot-deep); } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--spot); outline-offset: 3px; } h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: balance; } p { margin: 0; max-width: var(--measure); } p + p { margin-top: 1em; } strong { font-weight: 600; } /* Small print. One size everywhere, never below 0.85rem. */ .mono, .label { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.02em; color: var(--ink-2); } .skip { position: absolute; inset-inline-start: 1rem; top: -4rem; background: var(--ink); color: var(--paper); padding: 0.5rem 1rem; z-index: 10; } .skip:focus { top: 1rem; } /* ---- page frame ---- */ .page { width: min(100% - 2.5rem, 44rem); margin-inline: auto; } .page.wide { width: min(100% - 2.5rem, 62rem); } /* ---- masthead ---- */ .masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0 0.9rem; border-bottom: 3px solid var(--rule); } .wordmark { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; font-family: var(--display); font-size: 1.25rem; line-height: 1; } .wordmark img { width: 30px; height: 30px; } .wordmark small { font-family: var(--mono); font-size: 0.78rem; color: var(--mute); letter-spacing: 0.04em; } .masthead-link { font-family: var(--body); font-weight: 600; font-size: 0.92rem; text-decoration: none; color: var(--paper); background: var(--spot); border: 2px solid var(--spot); padding: 0.4rem 0.95rem; white-space: nowrap; } .masthead-link:hover { background: var(--spot-deep); border-color: var(--spot-deep); color: #fff; } /* ---- hero ---- */ .hero { padding: 2.6rem 0 2.2rem; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } .hero h1 { font-size: clamp(2.6rem, 11vw, 5rem); line-height: 1.02; color: var(--ink); text-shadow: 0.06em 0.06em 0 var(--spot); margin-bottom: 1.4rem; } .hero .lede { font-size: 1.2rem; line-height: 1.55; max-width: 30rem; } .hero .lede strong { font-weight: 600; } .hero .facts { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-family: var(--body); font-weight: 500; font-size: 0.95rem; color: var(--ink); letter-spacing: 0; } .hero .facts span::before { content: ''; display: inline-block; width: 0.45em; height: 0.45em; background: var(--spot); margin-inline-end: 0.5em; vertical-align: 0.1em; } /* dated notice: a tinted slip with a brass edge, like a stamp on the page */ .hero .season { margin-top: 1.3rem; padding: 0.6rem 0.9rem; background: var(--spot-tint); border-inline-start: 4px solid var(--brass); color: var(--spot-deep); font-size: 0.95rem; max-width: 32rem; } /* photographs, printed as plates */ .plate { margin: 1.2rem 0 1.8rem; max-width: 100%; } .plate img { width: 100%; border: 2.5px solid var(--ink); } .plate figcaption { font-family: var(--mono); font-size: 0.85rem; color: var(--mute); letter-spacing: 0.02em; margin-top: 0.5rem; } .plate-narrow { max-width: 22rem; } /* two plates side by side on wide screens, stacked on phones */ .plates { display: grid; grid-template-columns: 1fr; gap: 1rem 1.4rem; margin: 1.2rem 0 1.8rem; } .plates .plate { margin: 0; } /* download: photo beside the stub on wide screens */ .download { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: start; } .download .plate { margin: 0.6rem 0 0; } .download .stub { margin-top: 0.6rem; } /* store links: square, solid blue, no icons. This is the one thing on the page that asks for a click, so it gets the colour. */ .stores { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; } .store { flex: 1 1 10rem; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 1rem; background: var(--spot); border: 2.5px solid var(--spot); color: #fff; text-decoration: none; line-height: 1.2; box-shadow: 0.3rem 0.3rem 0 var(--ink); transition: transform 120ms ease, box-shadow 120ms ease; } .store b { font-family: var(--display); font-weight: 400; font-size: 1.35rem; } .store small { font-family: var(--mono); font-size: 0.78rem; color: rgba(255,255,255,0.82); letter-spacing: 0.04em; } .store:hover { background: var(--spot-deep); border-color: var(--spot-deep); color: #fff; transform: translate(-0.15rem, -0.15rem); box-shadow: 0.45rem 0.45rem 0 var(--ink); } [dir="rtl"] .store:hover { transform: translate(0.15rem, -0.15rem); } @media (prefers-reduced-motion: reduce) { .store, .store:hover { transition: none; transform: none; } } /* ---- sections ---- */ .section { padding: 2.4rem 0; border-top: 3px solid var(--rule); } .section.thin { border-top-width: 1px; } .section h2 { font-size: clamp(1.7rem, 6vw, 2.4rem); margin-bottom: 1rem; } /* section tag: a short blue rule and a readable label */ .section h2 .tag { display: flex; align-items: center; gap: 0.6rem; font-family: var(--body); font-weight: 600; font-size: 0.88rem; color: var(--spot); letter-spacing: 0.01em; margin-bottom: 0.6rem; } .section h2 .tag::before { content: ''; width: 1.6rem; height: 0.28rem; background: var(--spot); flex: none; } /* ---- the board (typeset results list) ---- */ .board { margin: 0; border: 2.5px solid var(--ink); background: #fff; box-shadow: 0.5rem 0.5rem 0 var(--paper-2); } .board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 0.9rem; background: var(--spot); color: #fff; font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.03em; } .board-head em { font-style: normal; color: #FFD666; } .board ol { list-style: none; margin: 0; padding: 0; } .board li { display: grid; grid-template-columns: 4.4rem 1fr; gap: 0 0.9rem; padding: 0.8rem 0.9rem; border-top: 1px dotted var(--ink-2); align-items: start; } .board li:first-child { border-top: 0; } /* rows that only exist in Tfila Finder (temporary minyanim) are tinted */ .board li.live { background: var(--spot-tint); } .board time { font-family: var(--mono); font-size: 1.35rem; line-height: 1.1; color: var(--spot); font-weight: 500; } .board time small { display: block; font-size: 0.78rem; color: var(--mute); font-weight: 400; } .board .what { font-weight: 600; line-height: 1.3; } .board .where { color: var(--ink-2); line-height: 1.35; } .board .meta { font-family: var(--mono); font-size: 0.85rem; color: var(--mute); margin-top: 0.3rem; letter-spacing: 0.01em; } .board .meta b { color: var(--spot-deep); font-weight: 500; } .board-foot { padding: 0.5rem 0.9rem; border-top: 2.5px solid var(--ink); font-family: var(--mono); font-size: 0.85rem; color: var(--mute); background: var(--paper); } /* ---- day sections ---- */ .day { display: grid; grid-template-columns: 1fr; gap: 1.4rem; } .day h3 { font-size: 1.15rem; font-family: var(--body); font-weight: 600; margin-top: 0.4rem; } .day .when { font-family: var(--display); font-size: clamp(2.2rem, 9vw, 3.2rem); color: var(--ink); line-height: 1; text-shadow: 0.05em 0.05em 0 var(--spot-tint); } .day .when small { display: block; font-family: var(--body); font-weight: 600; font-size: 0.88rem; color: var(--spot); letter-spacing: 0.01em; margin-top: 0.4rem; text-shadow: none; } .day ul { margin: 0.6rem 0 0; padding: 0; list-style: none; max-width: var(--measure); } .day li { padding-inline-start: 1.1rem; position: relative; margin-top: 0.35rem; } .day li::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.65em; width: 0.5em; height: 0.5em; background: var(--spot); } /* ---- ID card (תעודת זהות) ---- */ .id { margin: 0; border-top: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); } .id > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.6rem; padding: 0.65rem 0; border-top: 1px dotted var(--ink-2); align-items: baseline; } .id > div:first-child { border-top: 0; } .id dt { font-family: var(--body); font-weight: 600; font-size: 0.88rem; color: var(--spot); letter-spacing: 0.01em; padding-top: 0.2rem; } .id dd { margin: 0; } .id dd b { font-weight: 600; } /* ---- quotes ---- */ .clips { display: grid; gap: 1.4rem; } .clip { margin: 0; max-width: var(--measure); } .clip p { font-size: 1.15rem; line-height: 1.45; padding-inline-start: 1rem; border-inline-start: 4px solid var(--spot); } .clip cite { display: block; font-style: normal; font-family: var(--mono); font-size: 0.85rem; color: var(--mute); margin-top: 0.5rem; } .clip cite a { color: var(--ink); } /* ---- FAQ ---- */ .faq details { border-top: 1px dotted var(--ink-2); } .faq details:last-child { border-bottom: 1px dotted var(--ink-2); } .faq summary { list-style: none; cursor: pointer; padding: 0.9rem 0; font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; } .faq summary:hover { color: var(--spot-deep); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; font-family: var(--mono); color: var(--spot); font-size: 1.3rem; line-height: 1; flex: none; } .faq details[open] summary::after { content: '–'; } .faq details p { padding-bottom: 1rem; color: var(--ink-2); } /* ---- download stub (תלוש) ---- */ .stub { margin-top: 1.4rem; border: 2.5px solid var(--ink); display: grid; grid-template-columns: 1fr; background: #fff; box-shadow: 0.5rem 0.5rem 0 var(--paper-2); } .stub-side { padding: 1rem; border-bottom: 2.5px dashed var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--mono); font-size: 0.85rem; color: var(--spot-deep); background: var(--spot-tint); letter-spacing: 0.03em; } .stub-main { padding: 1.1rem 1rem 1.2rem; } .stub-main .stores { margin-top: 1rem; } .stub-main p { margin-top: 0.6rem; color: var(--ink-2); } @media (min-width: 640px) { .stub { grid-template-columns: 11rem 1fr; } .stub-side { border-bottom: 0; border-inline-end: 2.5px dashed var(--ink); flex-direction: column; align-items: flex-start; justify-content: space-between; } } /* ---- footer ---- */ .colophon { margin-top: 2rem; padding: 1.6rem 0 2.4rem; border-top: 3px solid var(--rule); display: grid; gap: 1.2rem; font-size: 0.92rem; color: var(--ink-2); } .colophon nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; } .colophon nav a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--ink); } .colophon nav a:hover { color: var(--spot); border-color: var(--spot); } .colophon .fine { font-family: var(--mono); font-size: 0.85rem; color: var(--mute); } /* ---- wide layout (desktop): broadsheet, not a single column ---- */ @media (min-width: 60rem) { .page.wide .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; padding-top: 3.2rem; } .page.wide .hero .board { margin-top: 0.4rem; } .page.wide .hero h1 { font-size: clamp(3.4rem, 5.6vw, 4.6rem); } .page.wide .day { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem; } .page.wide .day .when { font-size: 2.6rem; } .page.wide .clips { grid-template-columns: 1fr 1fr; gap: 2rem; } .page.wide .id > div { grid-template-columns: 9rem 1fr; } .page.wide .plates { grid-template-columns: 1fr 1fr; } .page.wide .download { grid-template-columns: 18rem 1fr; gap: 2.2rem; } /* two-column text blocks keep their measure; the rule spans the page */ .page.wide .section > p { max-width: 40rem; } } /* ---- legal pages ---- */ .legal { padding: 2rem 0 1rem; } .legal h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); text-shadow: 0.06em 0.06em 0 var(--spot); margin-bottom: 0.6rem; } .legal .updated { font-family: var(--mono); font-size: 0.85rem; color: var(--mute); letter-spacing: 0.02em; margin: 0 0 1.8rem; } .legal h2 { font-size: 1.45rem; margin: 2.2rem 0 0.6rem; padding-top: 0.9rem; border-top: 2.5px solid var(--ink); } .legal h3 { font-family: var(--body); font-weight: 600; font-size: 1.05rem; margin: 1.3rem 0 0.4rem; } .legal p { max-width: var(--measure); } .legal ul { max-width: var(--measure); padding-inline-start: 1.2rem; margin: 0.6rem 0 0.8rem; } .legal li { margin-top: 0.35rem; } .legal li::marker { color: var(--spot); } .legal .lang { font-family: var(--mono); font-size: 0.85rem; color: var(--ink); text-decoration: none; border: 2px solid var(--ink); padding: 0.3rem 0.7rem; } .legal .lang:hover { background: var(--ink); color: var(--paper); }