/* ============================================================================ תלמודו בידו — site.css (v1, "Leather & Gold") Dark leather surroundings, gold rules and headings, parchment bands for the reading areas. The ONLY stylesheet of the app — no third-party css. All sizes in rem. Root: 12px (html { font-size: 75% }). CONTRAST RULES (spec §11, WCAG AA / תקן 5568) — measured, not guessed: --gold on --bg-1 = 7.7:1 ✔ text --glass-ink on --bg-1 = 17.7:1 ✔ text --glass-ink-soft on --bg-1 = 9.1:1 ✔ text --ink on --paper = 11.6:1 ✔ text --ink-soft on --paper = 6.0:1 ✔ text --gold on --paper = 2.1:1 ✘ NEVER text on parchment — rules and icons only. For gold-looking TEXT on a light surface use --gold-deep (5.3:1). ========================================================================== */ /* ------------------------------------------------------------------ fonts -- Self-hosted, no external hosts. Provenance, licenses and how to regenerate: wwwroot/Fonts/README.md. A changed font gets a NEW file name (the server marks /Fonts/* immutable), never new bytes under an old name. */ @font-face { font-family: 'Frank Ruehl CLM'; src: url('/Fonts/FrankRuehlCLM-Medium.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Frank Ruehl CLM'; src: url('/Fonts/FrankRuehlCLM-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Heebo'; src: url('/Fonts/Heebo.woff2') format('woff2'); font-weight: 400 500; font-display: swap; } :root { /* parchment band */ --paper: #f7f2e7; --paper-soft: #f2ece0; --ink: #3a2a18; /* body text on parchment */ --ink-soft: #6b563c; /* secondary text on parchment — 6.0:1 */ --line: #e0d3ba; /* leather ground */ --bg-1: #1c1209; --bg-2: #2a1c10; --bg-3: #150e06; --glass: rgba(255, 255, 255, 0.045); --glass-line: rgba(201, 162, 39, 0.28); --glass-ink: #f0e6d2; /* body text on leather */ --glass-ink-soft: #c3b49a; /* secondary text on leather */ /* gold */ --gold: #c9a227; --gold-light: #e0c088; --gold-deep: #7a5c0e; /* the only gold that may be TEXT on parchment */ --accent: var(--gold); --accent-2: var(--gold-light); --accent-grad: linear-gradient(135deg, #c9a227, #e6d09a 55%, #a8811a); --danger: #c0392b; --ok: #3f7d3f; --radius: 0.5rem; --radius-s: 0.3rem; --shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.55); --shadow-s: 0 0.25rem 1rem rgba(0, 0, 0, 0.35); --measure: 75rem; /* the site's content width — centred, never edge-pinned */ --font-display: 'Frank Ruehl CLM', Georgia, serif; --font-body: 'Heebo', 'Segoe UI', Arial, sans-serif; } html { font-size: 75%; } * { box-sizing: border-box; } /* the js hides elements with the hidden attribute — it must beat any class rule */ [hidden] { display: none !important; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); font-size: 1.16rem; color: var(--glass-ink); /* NO `direction` here: the writing direction belongs to the document, and the server sets it on from the Language row of the request (rtl for hebrew and arabic, ltr for english and russian). Pinning it in the stylesheet would keep every screen right-to-left no matter which language it is showing — punctuation included. */ background: var(--bg-1); background-image: radial-gradient(70rem 45rem at 80% -15%, rgba(201, 162, 39, 0.10), transparent 62%), radial-gradient(50rem 36rem at 0% 108%, rgba(120, 80, 30, 0.16), transparent 60%), linear-gradient(165deg, var(--bg-2) 0%, var(--bg-1) 55%, var(--bg-3) 100%); background-attachment: fixed; } /* ---------------------------------------------------------------- header -- */ #upperPanel { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1.4rem; padding: 0.7rem max(1.2rem, calc((100% - var(--measure)) / 2)); background: rgba(21, 14, 6, 0.92); backdrop-filter: blur(0.8rem); -webkit-backdrop-filter: blur(0.8rem); border-bottom: 0.08rem solid var(--glass-line); } /* The wordmark, framed like the gilt cartouche on the book cover. */ #rightPart { text-decoration: none; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em; color: var(--gold-light); padding: 0.3rem 1.1rem; border: 0.09rem solid var(--gold); border-radius: 0.25rem; box-shadow: inset 0 0 0 0.18rem rgba(21, 14, 6, 1), inset 0 0 0 0.26rem rgba(201, 162, 39, 0.55); white-space: nowrap; } #rightPart:hover { color: #fff; border-color: var(--gold-light); } /* ---- the public nav ---- */ #siteNav { display: flex; align-items: center; gap: 1.5rem; font-size: 1.08rem; } #siteNav a { color: var(--glass-ink); text-decoration: none; padding: 0.4rem 0; border-bottom: 0.14rem solid transparent; white-space: nowrap; } #siteNav a:hover { color: var(--gold-light); } #siteNav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); } #leftPart { /* Logical, not physical: "start" is the right edge in RTL and the left edge in LTR, so the same rule pushes this block to the far side in every language the site speaks. */ margin-inline-start: auto; display: flex; align-items: center; gap: 0.9rem; } /* The language selector — chrome, so it stays quiet until hovered */ #language { background: rgba(255, 255, 255, 0.06); color: var(--glass-ink); border: 0.08rem solid var(--glass-line); border-radius: var(--radius-s); padding: 0.35rem 0.6rem; font-family: inherit; font-size: 0.95rem; cursor: pointer; } #language:hover { background: rgba(255, 255, 255, 0.12); } #language option { background: #150e06; color: #f0e6d2; } /* the popup list is OS-drawn */ #menuToggle { display: none; font-size: 1.9rem; cursor: pointer; color: var(--glass-ink); } #content { min-height: calc(100vh - 4.5rem); } /* -------------------------------------------------------------- buttons -- */ .btnPrimary, .btnGhost { display: inline-flex; align-items: center; gap: 0.7rem; font-family: inherit; font-size: 1.25rem; /* a button label is one line, always — "הזמן עכשיו" wrapping into two on a phone header is a layout bug, not a typographic choice */ white-space: nowrap; padding: 0.9rem 1.9rem; border-radius: var(--radius-s); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } /* Gold plate, dark ink — 8.6:1, so the label is readable and not merely decorative. */ .btnPrimary { color: #23180a; background: var(--accent-grad); border: none; font-weight: 500; box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.4); } .btnPrimary:hover { transform: translateY(-0.17rem); box-shadow: 0 0.7rem 1.6rem rgba(0, 0, 0, 0.5); } .btnGhost { color: var(--gold-light); background: transparent; border: 0.09rem solid var(--gold); text-decoration: none; } .btnGhost:hover { background: rgba(201, 162, 39, 0.14); color: #fff; } .btnGhost.small, .btnPrimary.small { font-size: 1.05rem; padding: 0.55rem 1.2rem; } /* Anchors carrying a button class: the nav is real links, so they must look like buttons. */ a.btnPrimary, a.btnGhost { text-decoration: none; } /* On the parchment band the gold plate needs a darker label still, and the ghost variant has to abandon gold text entirely (2.1:1 on parchment). */ .band .btnGhost { color: var(--gold-deep); border-color: var(--gold-deep); } .band .btnGhost:hover { background: rgba(122, 92, 14, 0.1); color: #23180a; } /* ------------------------------------------------------ marketing site -- */ /* Everything below styles the PUBLIC pages. The admin styling further down is untouched — both live off the same tokens, so re-theming happened once. */ .page { max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; } /* Two layout utilities the pages ask for by name — so no fragment ever carries a style attribute (styling lives in css, full stop). */ .narrow { max-width: 52rem; margin-inline: auto; } .centered { text-align: center; } /* A full-bleed band: the stripe spans the viewport, the content inside stays centred at --measure. Physical properties are fine here — a stripe has no direction. */ .band { background: var(--paper-soft); color: var(--ink); padding: 4.5rem 1.5rem; border-block: 0.09rem solid rgba(201, 162, 39, 0.35); } .band h2, .band h3 { color: var(--ink); } .band .sectionSub { color: var(--ink-soft); } .dark { padding: 4.5rem 1.5rem; } /* ---- section headings ---- */ .sectionHead { text-align: center; margin-bottom: 3rem; } .sectionHead h2 { font-family: var(--font-display); font-size: 2.9rem; font-weight: 700; margin: 0 0 0.7rem; color: var(--gold); } .band .sectionHead h2 { color: var(--ink); } .sectionSub { margin: 0 auto; max-width: 48rem; color: var(--glass-ink-soft); font-size: 1.28rem; line-height: 1.7; } /* The gilt divider under a heading — decoration, so it carries aria-hidden in the markup and no meaning here. */ .rule { width: 7rem; height: 0.09rem; margin: 1.2rem auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); } /* ---- hero ---- */ /* The hero of the approved mockup, photographically: hero-bg.jpg IS the scene — the tilted device standing on the desk, leather books and the brass lamp on the right, dark bookcase behind — extracted from design/mockup-home.png itself. The copy sits on the scene's dark empty LEFT side, exactly as designed. Two background layers, in this order: 1. a scrim over the left side only, so the headline stays above 4.5:1 however the photo is cropped by the viewport — the device side is left untouched; 2. the scene. position `right center` pins the lamp to the edge so a wide viewport crops the empty left, never the device. */ .hero { position: relative; padding: 4.5rem 1.5rem 4rem; overflow: hidden; background-color: var(--bg-3); background-image: linear-gradient(to left, rgba(21, 14, 6, 0) 42%, rgba(21, 14, 6, 0.55) 72%, rgba(21, 14, 6, 0.85) 100%), url("/images/hero-bg.jpg"); background-repeat: no-repeat, no-repeat; background-size: contain; background-position: center, center; } .heroInner { max-width: var(--measure); margin: 0 auto; min-height: 34rem; display: flex; align-items: center; } /* PHYSICAL margins on purpose: the empty side of the photograph is the left — in Hebrew AND in English. A logical flex-end put the English text right on top of the device. */ .heroText { max-width: 36rem; margin-left: 0; margin-right: auto; } /* The mobile hero photo band — hidden on desktop, where the same scene is the background. */ .heroMobileShot { display: none; } .heroBadge { display: inline-block; padding: 0.35rem 1.1rem; border: 0.08rem solid var(--glass-line); border-radius: 0.25rem; color: var(--gold-light); font-size: 0.98rem; letter-spacing: 0.12em; margin-bottom: 1.6rem; } .hero h1 { font-family: var(--font-display); margin: 0 0 1rem; font-size: clamp(3.2rem, 7vw, 5.4rem); line-height: 1.1; font-weight: 700; color: var(--gold); } .heroTagline { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 1.6rem; color: var(--glass-ink); font-weight: 400; } .heroSub { margin: 0 0 2.4rem; color: var(--glass-ink-soft); font-size: 1.32rem; line-height: 1.8; max-width: 34rem; } .heroButtons { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; } /* (the hero shows the device inside its background photo — see .hero; .device below still dresses the model cards) */ /* ---- the device ---- Drawn here rather than shipped as a render: the bezel is a few rules, and the screen is then the REAL cover artwork at full resolution instead of a picture of it. Nothing on this site shows AI-invented Hebrew. */ .device { display: inline-block; margin: 0; max-width: 100%; width: 26rem; padding: 0.9rem 0.9rem 0; background: linear-gradient(160deg, #3a3a3c, #1a1a1c 40%, #101012); border-radius: 0.9rem; box-shadow: 0 0 0 0.09rem #0a0a0b, 0 1.4rem 3rem rgba(0, 0, 0, 0.65), inset 0 0.09rem 0 rgba(255, 255, 255, 0.12); } .deviceScreen { display: block; background: #0d0904; border-radius: 0.2rem; overflow: hidden; box-shadow: inset 0 0 0 0.09rem rgba(0, 0, 0, 0.9); } .deviceScreen img { display: block; width: 100%; height: auto; } .deviceChin { display: block; text-align: center; font-size: 0.85rem; letter-spacing: 0.28em; color: #8e8e93; padding: 0.55rem 0 0.7rem; /* the brand mark on the chin is latin — it must read left-to-right on a hebrew page */ direction: ltr; } .device.small { width: 17rem; } /* ---- the four promises under the hero ---- */ .promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; /* In the mockup the four promises sit UNDER the copy, in the scene's dark left column — never across the device. Physical margins on purpose: the block hugs the page's left edge in RTL too. */ max-width: 42rem; margin-left: 0; margin-right: auto; } .promise { text-align: center; } .promise .icon { width: 4.2rem; height: 4.2rem; margin: 0 auto 0.9rem; display: grid; place-items: center; border-radius: 50%; border: 0.09rem solid var(--gold); color: var(--gold); } .promise .icon svg { width: 2.1rem; height: 2.1rem; } .promise h3 { margin: 0 0 0.25rem; font-size: 1.2rem; font-weight: 500; color: var(--glass-ink); } .promise p { margin: 0; font-size: 1.02rem; color: var(--glass-ink-soft); line-height: 1.5; } /* Mobile hero = design/mobile-b.png (Elyasaf's pick, 19/08): centred title and tagline, then the tilted-device photo as a full-bleed band, then ONE gold button, then the four promises in a single compact row. The badge, the long paragraph and the ghost button exist only on desktop — the B mockup drops them, and on a phone they were noise between the title and the product. This block sits AFTER every base hero rule on purpose: equal-specificity overrides here win by order. */ @media (max-width: 60rem) { .hero { /* the photo moves inline (.heroMobileShot) — behind the text only quiet leather */ background-image: linear-gradient(var(--bg-3), var(--bg-1)); padding-top: 1.6rem; padding-bottom: 1.6rem; } .heroInner { min-height: 0; } .heroText { margin: 0 auto; max-width: none; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; } .heroBadge, .heroSub, .heroButtons .btnGhost { display: none; } .hero h1 { font-size: 2.9rem; margin-bottom: 0.3rem; } .heroTagline { font-size: 1.55rem; margin-bottom: 1.2rem; } /* The photo's height follows the VIEWPORT, not its own ratio: the whole point of the first screen is title → device → button → the four promises, and a square photo pushed the promises off every phone. cover keeps the device centred in the crop. */ .heroMobileShot { display: block; width: calc(100% + 3rem); /* full bleed across .hero's 1.5rem side padding */ margin: 0 -1.5rem 1.4rem; height: clamp(15rem, 40vh, 28rem); background: url("/images/hero-mobile.jpg") center / cover no-repeat; } .heroButtons { margin-bottom: 1.4rem; } .heroButtons .btnPrimary { padding: 0.9rem 3.2rem; font-size: 1.25rem; } /* B: the four promises in ONE compact row on the dark band */ .hero .promises { grid-template-columns: repeat(4, 1fr); max-width: none; gap: 0.8rem; } .hero .promise .icon { width: 3.4rem; height: 3.4rem; margin-bottom: 0.5rem; } .hero .promise .icon svg { width: 1.7rem; height: 1.7rem; } .hero .promise h3 { font-size: 1.02rem; } .hero .promise p { font-size: 0.92rem; } } /* Short phones: shave what remains — the promises must still make the first screen. */ @media (max-width: 60rem) and (max-height: 46rem) { .hero h1 { font-size: 2.4rem; } .heroTagline { font-size: 1.35rem; margin-bottom: 0.9rem; } .heroMobileShot { height: 34vh; } .hero .promise p { display: none; } } /* Narrow phones: the header must hold logo + language + button + burger on one line. The wordmark shrinks too — it is the widest item, it never wraps, and in english every word in this row is longer than its hebrew counterpart ("Talmudo BeYado", "Order now"). Without this the row was 12px too wide at 360px and the whole PAGE scrolled sideways. */ @media (max-width: 26rem) { #upperPanel { gap: 0.7rem; padding-inline: 0.9rem; } #rightPart { font-size: 1.25rem; padding: 0.25rem 0.7rem; } #leftPart { gap: 0.5rem; } .btnPrimary.small { font-size: 0.98rem; padding: 0.5rem 0.8rem; } #language { font-size: 0.98rem; } } /* ---- the five cards on the parchment band ---- */ .cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; } .card { background: var(--paper); border: 0.09rem solid var(--line); border-radius: var(--radius); padding: 2rem 1.4rem; text-align: center; box-shadow: 0 0.2rem 0.9rem rgba(58, 42, 24, 0.07); } .card .icon { color: var(--gold-deep); margin-bottom: 1.1rem; } .card .icon svg { width: 3.2rem; height: 3.2rem; } .card h3 { margin: 0 0 0.6rem; font-size: 1.28rem; font-weight: 500; } .card p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); } /* ---- screens + capability list ---- */ .showcase { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: center; } /* start-aligned: the two captures are no longer the same height — the MB page is the full amud — and a stretched grid cell would letterbox the shorter one oddly. */ .shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; align-items: start; } .shot { text-align: center; } .shot img { width: 100%; height: auto; border-radius: var(--radius-s); border: 0.09rem solid var(--glass-line); background: #0d0904; } .shot figcaption { margin-top: 0.7rem; font-size: 1.02rem; color: var(--glass-ink-soft); } .capabilities { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; } .capabilities li { display: flex; gap: 1rem; align-items: flex-start; } .capabilities svg { width: 1.9rem; height: 1.9rem; color: var(--gold); flex: none; margin-top: 0.15rem; } .capabilities b { display: block; font-weight: 500; color: var(--glass-ink); font-size: 1.16rem; } .capabilities span { color: var(--glass-ink-soft); font-size: 1.02rem; } /* ---- video ---- */ /* The product video was filmed on a phone, so it is PORTRAIT (406x720). Boxing it into a wide frame would letterbox it into a stripe — it gets a phone-shaped column instead. */ /* A
, so the caption belongs to the player: the browser's own default margin would push it off the section's rhythm, hence margin: 0 auto. */ .videoWrap { max-width: 24rem; margin: 0 auto; } .videoWrap figcaption { margin-top: 0.7rem; color: var(--ink-soft); font-size: 0.98rem; text-align: center; } /* The full description is the text alternative for a video with no soundtrack (WCAG 1.2.1). Folded away by default — it is a page of prose under a marketing video — but it is in the document, so a screen reader, a crawler and a visitor who opens it all get the same words. */ .videoWrap .videoDescription { margin-top: 0.4rem; text-align: start; } .videoWrap .videoDescription summary { cursor: pointer; color: var(--gold-deep); text-align: center; } .videoWrap .videoDescription p { margin-top: 0.5rem; line-height: 1.7; } .videoWrap video { width: 100%; height: auto; border-radius: var(--radius); border: 0.09rem solid var(--glass-line); background: #000; } /* ---- library grid ---- */ .libGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .libItem { padding: 1.5rem 1.6rem; border: 0.09rem solid var(--glass-line); border-radius: var(--radius-s); background: var(--glass); } .libItem h3 { margin: 0 0 0.4rem; font-family: var(--font-display); font-size: 1.45rem; color: var(--gold-light); font-weight: 700; } .libItem p { margin: 0; color: var(--glass-ink-soft); line-height: 1.6; font-size: 1.05rem; } .band .libItem { background: var(--paper); border-color: var(--line); } .band .libItem h3 { color: var(--gold-deep); } .band .libItem p { color: var(--ink-soft); } /* ---- comparison table ---- */ .compare { overflow-x: auto; } /* wide content scrolls itself, never the page */ .compare table { width: 100%; border-collapse: collapse; min-width: 44rem; } .compare th, .compare td { padding: 1rem 1.1rem; text-align: start; border-bottom: 0.08rem solid var(--line); font-size: 1.08rem; } .compare thead th { font-weight: 500; font-size: 1.16rem; border-bottom-width: 0.16rem; border-bottom-color: var(--gold-deep); } .compare tbody th { font-weight: 400; color: var(--ink-soft); } .compare .ours { background: rgba(201, 162, 39, 0.1); font-weight: 500; } /* ---- model cards (built by App.FillModelsAsync) ---- */ .models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; max-width: 70rem; margin: 0 auto; } /* three cards no longer fit side by side below this — the third wraps under the first two */ @media (max-width: 66rem) { .models { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; } } .model { text-align: center; padding: 2.2rem 1.8rem; border: 0.09rem solid var(--glass-line); border-radius: var(--radius); background: var(--glass); /* a column, so the order button can sit on one line across all three cards even when one card's subtitle wraps to a second line */ display: flex; flex-direction: column; /* the card is a grid item: without this the 13" stage's intrinsic width inflates the 1fr track on a narrow phone and the whole page scrolls sideways (the r49 bug, back) */ min-width: 0; } .model .btnPrimary { margin-top: auto; align-self: center; } .band .model { background: var(--paper); border-color: var(--line); } /* The stage all the devices stand on: same height, bottom aligned, so a 7" reads as smaller than a 10" (and a 13" as bigger) instead of just sitting higher up the card. The three widths keep the models' real proportions: 14.5 × 13.3/10.3 ≈ 18.7, 14.5 × 7/10.3 ≈ 9.9 — the size difference on screen IS the size difference sold. */ .modelStage { display: flex; align-items: flex-end; justify-content: center; min-height: 27rem; margin-bottom: 1.4rem; } /* min-width: 0 — the figure is a flex item; without it the 13" width refuses to shrink on a narrow phone (min-width:auto), inflates the grid track and the page scrolls sideways. */ .modelStage .device { margin: 0; width: 14.5rem; min-width: 0; } .modelStage .device.small { width: 9.9rem; } .modelStage .device.large { width: 18.7rem; } .modelName { font-family: var(--font-display); font-size: 2rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--gold); } .band .modelName { color: var(--ink); } .modelSub { margin: 0 0 0.9rem; color: var(--glass-ink-soft); font-size: 1.1rem; } .band .modelSub { color: var(--ink-soft); } .modelDevice { margin: 0 0 1.6rem; font-size: 0.98rem; color: var(--glass-ink-soft); } .band .modelDevice { color: var(--ink-soft); } .modelPrice { margin: 0; font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--gold); line-height: 1; } .band .modelPrice { color: var(--gold-deep); } .modelPrice .currency { font-size: 1.6rem; } .modelVat { margin: 0.3rem 0 1.6rem; font-size: 0.98rem; color: var(--glass-ink-soft); } .band .modelVat { color: var(--ink-soft); } /* the opening sale: a pill above the price, and the pre-sale price struck through under it. Gold on the dark glass, deep gold on the parchment band — same pairing as .modelPrice. */ .saleBadge { display: inline-block; align-self: center; /* .model is a flex column — without this the pill stretches card-wide */ margin: 0 0 0.9rem; padding: 0.25rem 0.9rem; border: 0.09rem solid var(--gold); border-radius: 2rem; font-size: 0.95rem; font-weight: 500; color: var(--gold); } .band .saleBadge { color: var(--gold-deep); border-color: var(--gold-deep); } .wasPrice { margin: 0.45rem 0 0; font-size: 1.05rem; color: var(--glass-ink-soft); } .band .wasPrice { color: var(--ink-soft); } /* ---- what is in the box ---- */ .inBox { list-style: none; margin: 2.5rem auto 0; padding: 0; max-width: 34rem; display: grid; gap: 0.9rem; } .inBox li { display: flex; gap: 0.9rem; align-items: center; font-size: 1.16rem; } /* Gold on leather, deep gold on parchment — the tick has to stay visible on both. */ .inBox svg { width: 1.5rem; height: 1.5rem; color: var(--gold); flex: none; } .band .inBox svg { color: var(--gold-deep); } /* ---- FAQ (built by App.FillFaqAsync) ---- */ .faqList { max-width: 52rem; margin: 0 auto; } .faqItem { border-bottom: 0.08rem solid var(--glass-line); padding: 0.4rem 0; } .faqItem summary { cursor: pointer; padding: 1.1rem 0.2rem; font-size: 1.24rem; color: var(--glass-ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .faqItem summary::-webkit-details-marker { display: none; } /* The open/closed affordance. ::after sits at the INLINE end, so it lands on the left in Hebrew and on the right in English without a second rule. */ .faqItem summary::after { content: "+"; color: var(--gold); font-size: 1.7rem; line-height: 1; flex: none; } .faqItem[open] summary::after { content: "\2212"; } .faqItem summary:hover { color: var(--gold-light); } .faqAnswer { padding: 0 0.2rem 1.3rem; color: var(--glass-ink-soft); line-height: 1.8; } .faqAnswer p { margin: 0 0 0.8rem; } .band .faqItem { border-bottom-color: var(--line); } .band .faqItem summary { color: var(--ink); } .band .faqItem summary::after { color: var(--gold-deep); } .band .faqAnswer { color: var(--ink-soft); } /* ---- testimonials ---- */ .quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 1.6rem; } .quote { margin: 0; padding: 2rem; border: 0.09rem solid var(--glass-line); border-radius: var(--radius); background: var(--glass); } .quote blockquote { margin: 0 0 1.2rem; font-size: 1.24rem; line-height: 1.8; color: var(--glass-ink); } .quote figcaption { color: var(--gold-light); font-size: 1.08rem; } .quote figcaption span { display: block; color: var(--glass-ink-soft); font-size: 0.98rem; } /* ---- public forms (pre-order, institutions, contact) ---- */ /* The public forms sit on the template's .pageForm card, which is PARCHMENT. Everything here is therefore dark-on-light — the one place on the site where the leather palette does not apply. (Getting this backwards is how a form ends up with cream labels on a cream card.) */ .publicForm { max-width: 40rem; } /* Field paint (background, border, focus ring) is NOT repeated here — the template already styles .pageForm fields once, further down, and duplicating it is how the two drift apart. Only what the template has no rule for lives here. */ .publicForm label { display: block; margin-bottom: 1.3rem; } .publicForm label > span { display: block; margin-bottom: 0.4rem; font-size: 1.08rem; color: var(--ink); font-weight: 500; } .publicForm textarea { min-height: 8rem; resize: vertical; } /* Latin-only fields read left-to-right even on a Hebrew page. */ .publicForm input[type=email], .publicForm input[type=tel], .publicForm input[type=number] { direction: ltr; text-align: start; } .publicForm fieldset { border: 0.09rem solid var(--line); border-radius: var(--radius-s); padding: 1rem 1.2rem 0.4rem; margin: 0 0 1.3rem; } .publicForm legend { color: var(--ink); font-weight: 500; padding-inline: 0.4rem; } /* The note under the submit button is body copy on parchment, not on leather. */ .publicForm .sectionSub { color: var(--ink-soft); font-size: 1.02rem; margin-top: 1rem; text-align: start; } .choices { display: grid; gap: 0.7rem; margin-bottom: 0.9rem; } /* .publicForm label above makes every label a block; a radio row has to win that back. */ .publicForm .choice, .choice { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; margin: 0; color: var(--ink); } .choice input { accent-color: var(--gold-deep); width: 1.2rem; height: 1.2rem; margin: 0; } /* The honeypot: off-screen for a browser, still focusable-free and hidden from assistive tech. display:none would be skipped by some bots — this is not. */ .trap { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---- final call to action ---- */ /* The closing band of the mockup: the black-leather cover with its gilded arch, straight from design/mockup-home.png. A fixed-height image band — no text is laid over it, the artwork carries its own. */ .coverCloser { height: clamp(18rem, 34vw, 30rem); background: var(--bg-3) url("/images/finale-cover.jpg") center / cover no-repeat; } .finale { text-align: center; padding: 5rem 1.5rem; } .finale h2 { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--gold); margin: 0 0 1rem; font-weight: 700; } .finale p { color: var(--glass-ink-soft); font-size: 1.3rem; margin: 0 0 2.2rem; } /* The maker's credit under the closing call to action. Smaller and quieter than the sentence above it — it is attribution, not another pitch. */ .finale .madeBy { font-size: 1.04rem; margin: 2rem 0 0; } .finale .madeBy a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 0.25em; } .finale .madeBy a:hover { color: var(--gold); } /* ---- order confirmation ---- Leather ground (.finale), so gold is allowed to be text here — on parchment it would fail 4.5:1 and would have to be --gold-deep. */ .orderSummary { max-width: 34rem; margin: 0 auto 2.2rem; padding: 1.6rem 1.8rem; border: 0.09rem solid var(--glass-line); border-radius: var(--radius); background: var(--glass); text-align: start; } .orderSummary p { font-size: 1.16rem; margin: 0 0 0.6rem; color: var(--glass-ink); } .orderSummary p:last-child { margin-bottom: 0; } .orderNumber { color: var(--gold-light); } .orderTotal { font-family: var(--font-display); font-size: 1.6rem; color: var(--gold); } .orderVat { font-family: var(--font-body); font-size: 1rem; color: var(--glass-ink-soft); } /* ---- site footer ---- */ #siteFooter { background: var(--bg-3); border-top: 0.09rem solid var(--glass-line); padding: 3rem 1.5rem 2rem; color: var(--glass-ink-soft); font-size: 1.05rem; } .footerInner { max-width: var(--measure); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } #siteFooter h3 { margin: 0 0 0.9rem; font-size: 1.16rem; color: var(--gold-light); font-weight: 500; } #siteFooter ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } #siteFooter a { color: var(--glass-ink-soft); text-decoration: none; } #siteFooter a:hover { color: var(--gold-light); text-decoration: underline; } .footerBottom { max-width: var(--measure); margin: 2.5rem auto 0; padding-top: 1.4rem; border-top: 0.08rem solid rgba(201, 162, 39, 0.2); text-align: center; font-size: 0.98rem; } /* ---- skip link + focus, for keyboard and screen-reader users ---- */ .skipLink { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100; background: var(--gold); color: #23180a; padding: 0.7rem 1.2rem; border-radius: 0 0 var(--radius-s) var(--radius-s); } .skipLink:focus { inset-inline-start: 1rem; } /* A visible focus ring on the leather ground — the browser default disappears against it. */ a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible { outline: 0.16rem solid var(--gold-light); outline-offset: 0.2rem; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---- marketing responsive ---- */ @media (max-width: 62rem) { .heroInner { grid-template-columns: 1fr; text-align: center; } .heroSub { margin-inline: auto; } .heroButtons { justify-content: center; } .promises { grid-template-columns: repeat(2, 1fr); max-width: none; } .cards { grid-template-columns: repeat(2, 1fr); } .showcase { grid-template-columns: 1fr; } .libGrid { grid-template-columns: repeat(2, 1fr); } .footerInner { grid-template-columns: 1fr 1fr; } #siteNav { display: none; } body.menu-open #siteNav { display: flex; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-3); border-bottom: 0.09rem solid var(--glass-line); padding: 0.5rem 1.5rem 1rem; } body.menu-open #siteNav a { padding: 0.9rem 0; border-bottom: 0.08rem solid rgba(201, 162, 39, 0.18); } } @media (max-width: 40rem) { /* .shots stays a ROW on a phone — the B mockup lines the screenshots up side by side; .hero .promises keeps its own 4-column rule (more specific) for the same reason. */ .promises, .cards, .models, .libGrid, .footerInner { grid-template-columns: 1fr; } .shots { gap: 0.8rem; } .band, .dark { padding: 3rem 1.2rem; } .sectionHead h2 { font-size: 2.2rem; } /* single column: no shared baseline to keep, so each card is as tall as its own device, and the devices go back to the larger one-per-row sizes */ .modelStage { min-height: 0; } .modelStage .device { width: 18rem; } .modelStage .device.small { width: 12.2rem; } .modelStage .device.large { width: 23.2rem; } /* one card at a time = the FIRST price seen decides. Cheapest first on the phone (Elyasaf 26/08); flex column-reverse so it holds for any number of cards. Desktop keeps the flagship first — there all prices are visible at once and the big card anchors value. */ .models { display: flex; flex-direction: column-reverse; } } /* --------------------------------------------------------- admin layout -- */ #layout { display: flex; min-height: calc(100vh - 4.5rem); } #menu { width: 15rem; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 1.6rem 1rem; background: rgba(8, 15, 38, 0.45); border-inline-end: 0.08rem solid var(--glass-line); /* the edge facing the content pane */ backdrop-filter: blur(0.85rem); -webkit-backdrop-filter: blur(0.85rem); } #menu .buttons, #menu .menuBottom { display: flex; flex-direction: column; gap: 0.5rem; } #menu input[type=button] { font-family: inherit; font-size: 1.25rem; text-align: start; color: var(--glass-ink); background-color: transparent; border: 0.08rem solid transparent; border-radius: var(--radius-s); padding: 0.9rem 3.4rem 0.9rem 1rem; cursor: pointer; background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1.5rem; transition: background-color 0.15s ease, border-color 0.15s ease; } #menu input[type=button]:hover { background-color: rgba(255, 255, 255, 0.08); } #menu input.active { background-color: rgba(56, 189, 248, 0.16); border-color: rgba(125, 211, 252, 0.45); } #menu input#Cars { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237dd3fc'%3E%3Cpath d='M18.9 6c-.2-.6-.8-1-1.4-1H6.5c-.6 0-1.2.4-1.4 1L3 12v8c0 .6.4 1 1 1h1c.6 0 1-.4 1-1v-1h12v1c0 .6.4 1 1 1h1c.6 0 1-.4 1-1v-8l-2.1-6zM6.9 7h10.2l1.4 4H5.5l1.4-4zM6.5 16c-.8 0-1.5-.7-1.5-1.5S5.7 13 6.5 13s1.5.7 1.5 1.5S7.3 16 6.5 16zm11 0c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z'/%3E%3C/svg%3E"); } #menu input#Students { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237dd3fc'%3E%3Cpath d='M12 3 1 9l11 6 9-4.91V17h2V9L12 3zm-7 9.68V17c0 2 3.13 4 7 4s7-2 7-4v-4.32l-7 3.82-7-3.82z'/%3E%3C/svg%3E"); } #menu input#Hello { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239fb3d1'%3E%3Cpath d='M12 3 2 12h3v8h6v-6h2v6h6v-8h3L12 3z'/%3E%3C/svg%3E"); color: var(--glass-ink-soft); } #menu input#Contact { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239fb3d1'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E"); color: var(--glass-ink-soft); } #inner { flex: 1; padding: 2rem; min-width: 0; } /* on wide screens, mirror the menu's width on the far side so the content pane — and everything centered inside it — is centered in the VIEWPORT with equal margins on both sides (RTL: the menu column is on the right) */ @media (min-width: 90rem) { #inner { margin-inline-end: 15rem; } } .adminWelcome { text-align: center; padding: 6rem 2rem; color: var(--glass-ink-soft); } .adminWelcome h1 { color: var(--glass-ink); font-weight: 400; font-size: 2.6rem; margin-bottom: 0.8rem; } #inner h1 { font-weight: 400; font-size: 2.2rem; margin: 0.4rem 0 1.4rem; } /* ----------------------------------------------------------- table card -- */ div.table { position: relative; width: 90%; margin: 2rem auto; background: var(--paper); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem; overflow-x: auto; } div.table svg { vertical-align: middle; } div.table table { width: 100%; border-collapse: collapse; font-size: 1.16rem; } div.table thead th { text-align: start; color: var(--ink-soft); font-weight: 400; font-size: 1rem; letter-spacing: 0.02em; padding: 0.8rem 1rem; border-bottom: 0.17rem solid var(--line); white-space: nowrap; cursor: pointer; user-select: none; } div.table tbody td { padding: 0.85rem 1rem; border-bottom: 0.08rem solid var(--paper-soft); max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } div.table tbody tr { cursor: pointer; transition: background 0.1s ease; } div.table tbody tr:hover { background: #eef7fe; } /* the body scrolls under a header row that stays put — desktop screens only, so mobile/print/other contexts don't have to undo it */ @media screen and (min-width: 56.26rem) { div.table thead { width: calc(100% - 1em); } div.table tbody { display: block; max-height: 48vh; overflow: auto; } div.table tr { display: table; table-layout: fixed; width: 100%; } } /* sort indicators (pure CSS, replaces the old png images) */ th.sort_both::after, th.sort_asc::after, th.sort_desc::after { display: inline-block; margin-inline-start: 0.5rem; font-size: 0.85em; color: #94a3b8; } th.sort_both::after { content: '⇅'; } th.sort_asc::after { content: '↑'; color: var(--accent-2); } th.sort_desc::after { content: '↓'; color: var(--accent-2); } .addButton { position: absolute; top: 1.2rem; inset-inline-end: 1.2rem; width: 3rem; height: 3rem; font-size: 1.8rem; line-height: 1; color: #06121f; background: var(--accent-grad); border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 0.3rem 1rem rgba(56, 189, 248, 0.5); transition: transform 0.15s ease; } .addButton:hover { transform: scale(1.08); } .menuIcon { cursor: pointer; fill: #94a3b8; } .menuIcon:hover { fill: var(--accent-2); } .toolbar { display: none; position: absolute; top: 3rem; inset-inline-start: 0; min-width: 12rem; background: var(--paper); border: 0.08rem solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow); overflow: hidden; color: var(--ink); font-size: 1.1rem; } .toolbar.open { display: block; } .toolbar > div { padding: 0.8rem 1.2rem; cursor: pointer; } .toolbar > div:hover { background: var(--paper-soft); } /* ------------------------------------------------------------ filter bar -- */ .filterBar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0 3.6rem 1.2rem 3.6rem; /* clears the burger (right) and + button (left) */ padding: 0.9rem 1.1rem; background: var(--paper-soft); border: 0.08rem solid var(--line); border-radius: var(--radius-s); } .filterBar label { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-soft); font-size: 1.05rem; } .filterBar input[type=text], .filterBar select { font-family: inherit; font-size: 1.1rem; color: var(--ink); background: var(--paper); border: 0.08rem solid var(--line); border-radius: 0.5rem; padding: 0.5rem 0.8rem; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .filterBar input[type=text]:focus, .filterBar select:focus { border-color: var(--accent); box-shadow: 0 0 0 0.25rem rgba(56, 189, 248, 0.2); } .filterBar #search { min-width: 16rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E"); background-repeat: no-repeat; /* background-position has no logical form — the icon sits on the far side, so it is stated once per direction; the padding that clears it IS logical. */ background-position: left 0.7rem center; background-size: 1.3rem; padding-inline-end: 2.6rem; } [dir="ltr"] .filterBar #search { background-position: right 0.7rem center; } /* ----------------------------------------------------------------- pager -- */ .pager { display: flex; justify-content: center; gap: 0.4rem; padding-top: 1.2rem; color: var(--ink-soft); } .pager span { min-width: 2.4rem; text-align: center; padding: 0.4rem 0.7rem; border: 0.08rem solid var(--line); border-radius: 0.5rem; cursor: pointer; user-select: none; } .pager span:hover { background: var(--paper-soft); } /* the middle "page n/N" box is an indicator, not a button */ .pager .pagerState { border: none; cursor: default; direction: ltr; } .pager .pagerState:hover { background: none; } /* ------------------------------------------------ content page (CMS) -- */ /* a public content page: the same white card as a form, sized for reading */ .pageCard { display: block; max-width: 62rem; margin: 3rem auto; padding: 2.4rem 2.8rem; background: var(--paper); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); line-height: 1.8; } .pageCard h1 { font-weight: 400; font-size: 2.4rem; margin: 0 0 1.2rem; } .pageCard h2 { font-weight: 400; font-size: 1.8rem; margin: 2rem 0 0.8rem; } /* the card is parchment: --accent-2 here was gold-on-paper (1.55:1) — the exact combination the contrast table above forbids. --gold-deep is its text-safe gold. */ .pageCard a { color: var(--gold-deep); } .pageCard img { max-width: 100%; height: auto; border-radius: var(--radius-s); } .breadcrumbs { font-size: 1rem; color: var(--ink-soft); margin-bottom: 0.8rem; } .breadcrumbs a { color: var(--ink-soft); } .breadcrumbs:empty { display: none; } .pageNotice { background: #fff7ed; color: #9a3412; border-radius: var(--radius-s); padding: 0.7rem 1rem; } .pageNotice:empty { display: none; } .screenSub { color: var(--glass-ink-soft); max-width: 60rem; margin: -0.6rem 0 1.4rem; } /* ------------------------------------------------------ html editor -- */ .editorBar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-bottom: 1rem; } .editorBar label { color: var(--glass-ink-soft); } .editorBar input[type=text] { flex: 1; min-width: 18rem; font-family: inherit; font-size: 1.2rem; padding: 0.6rem 0.9rem; border: 0.08rem solid var(--line); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); } .editorBar input[type=button] { font-family: inherit; font-size: 1.1rem; padding: 0.6rem 1.4rem; border: 0.08rem solid var(--glass-line); border-radius: 3rem; background: var(--glass); color: var(--glass-ink); cursor: pointer; } .editorBar .btnPrimary { background: var(--accent-grad); color: #06121f; border: none; } .editorSplit { display: flex; gap: 1rem; height: 65vh; } .editorSplit > * { flex: 1; border: none; border-radius: var(--radius-s); } .editorSplit > textarea { font-family: 'Consolas', 'Courier New', monospace; font-size: 1.1rem; line-height: 1.6; padding: 1rem; background: #0b1533; color: #e6edf7; resize: none; } .editorSplit > #previewFrame { display: none; background: var(--paper); } .editorSplit.withPreview > #previewFrame { display: block; } /* ------------------------------------------------------ page form card -- */ .pageForm { max-width: 44rem; margin: 3rem auto; padding: 2.4rem 2.6rem; background: var(--paper); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); } .pageForm h1 { font-weight: 400; font-size: 2.2rem; margin: 0 0 0.4rem; } .pageFormSub { color: var(--ink-soft); margin: 0 0 1rem; } /* field/focus/button styling is shared with #formDiv below — one source for both form systems */ /* ------------------------------------------------------- form (popup) -- */ /* stacking is by DOM order — popups append last (overlay, then its panel), so no z-index is needed */ .overlay { position: fixed; inset: 0; background: rgba(5, 10, 28, 0.6); backdrop-filter: blur(0.25rem); -webkit-backdrop-filter: blur(0.25rem); } #formDiv, .popupPanel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(44rem, 92vw); max-height: 88vh; overflow-y: auto; background: var(--paper); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.2rem; } #formDiv label, .pageForm label { display: block; color: var(--ink-soft); font-size: 1.05rem; margin: 1rem 0 0.3rem; } /* tel joined the list when the public pre-order form arrived — one source for every field of both form systems, so a phone box can never drift from an email box. */ #formDiv input[type=text], #formDiv input[type=date], #formDiv input[type=color], #formDiv input[type=number], #formDiv input[type=email], #formDiv input[type=password], #formDiv input[type=tel], #formDiv select, #formDiv textarea, .pageForm input[type=text], .pageForm input[type=date], .pageForm input[type=color], .pageForm input[type=number], .pageForm input[type=email], .pageForm input[type=password], .pageForm input[type=tel], .pageForm select, .pageForm textarea { width: 100%; font-family: inherit; font-size: 1.2rem; color: var(--ink); background: var(--paper); border: 0.08rem solid var(--line); border-radius: 0.5rem; padding: 0.7rem 0.9rem; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } #formDiv input:focus, #formDiv select:focus, #formDiv textarea:focus, .pageForm input:focus, .pageForm select:focus, .pageForm textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 0.25rem rgba(56, 189, 248, 0.2); } /* inline-control row (checkbox/radio + its label on one line) — emitted by UIField, works in any form container. Placed after the label rule so display:inline wins. */ .checkRow { margin-top: 1.2rem; } .checkRow input { width: 1.3rem; height: 1.3rem; accent-color: var(--accent-2); vertical-align: middle; } #formDiv .checkRow label, .pageForm .checkRow label, .checkRow label { display: inline; margin: 0 0.5rem 0 0; vertical-align: middle; } #formDiv input[type=button], .pageForm input[type=button] { font-family: inherit; font-size: 1.2rem; margin: 1.6rem 0.5rem 0 0; padding: 0.7rem 1.8rem; border-radius: 3rem; border: none; cursor: pointer; background: var(--accent-grad); color: #06121f; } #formDiv input[type=button][value='ביטול'] { background: var(--paper-soft); color: var(--ink-soft); } #formDiv input[type=button][value='מחיקה'] { background: #fee2e8; color: var(--danger); } .textError, .error { color: var(--danger); font-size: 1rem; } /* validation failure (toggled by setControlError) — specific enough to beat the form input rules */ #formDiv input.invalid, #formDiv select.invalid, #formDiv textarea.invalid, .pageForm input.invalid, .pageForm select.invalid, .pageForm textarea.invalid, .invalid { border-color: var(--danger); } /* --------------------------------------------------------- auth screens -- */ /* email/password read left-to-right even inside the RTL page */ input[type=email], input[type=password] { direction: ltr; text-align: left; } #loginWrap { display: flex; justify-content: center; padding: 2rem 1rem; } .loginBox { width: min(30rem, 92vw); } .loginBox .linkBtn, .pageForm input[type=button].linkBtn { background: none; color: var(--ink-soft); text-decoration: underline; padding: 0.4rem 0.6rem; } #menu .menuGroup { color: var(--glass-ink-soft); font-size: 1rem; letter-spacing: 0.05em; margin: 1.2rem 0.9rem 0.2rem 0; border-bottom: 0.08rem solid var(--glass-line); padding-bottom: 0.3rem; } #menu .menuUser { color: var(--glass-ink-soft); font-size: 1.1rem; padding: 0 0.9rem 0.3rem 0; } /* --------------------------------------------------- inline-editable cells -- */ /* a cell you can type into says so: pencil-ready hover, real focus ring while editing */ td[contenteditable] { cursor: text; } td[contenteditable]:hover { box-shadow: inset 0 0 0 0.08rem var(--line); border-radius: 0.3rem; } td[contenteditable]:focus { outline: none; box-shadow: inset 0 0 0 0.15rem var(--accent); border-radius: 0.3rem; background: var(--paper); } .popupPanel { text-align: center; } .popupPanel .popUpTitle { display: block; font-size: 1.5rem; margin-bottom: 0.6rem; } .popupPanel .popUpText { display: block; line-height: 1.7; } .questionPopUp .popUpText { font-size: 1.3rem; margin-bottom: 0.4rem; } .popupPanel input[type=button] { font-family: inherit; font-size: 1.15rem; margin: 1.6rem 0.4rem 0 0; padding: 0.6rem 1.9rem; border-radius: 3rem; border: none; cursor: pointer; background: var(--accent-grad); color: #06121f; } /* multi-select checkbox dropdown (emitted by Controls.CheckBoxListWithLabel) */ .checkBoxDropDownWithLabel { position: relative; display: inline-block; cursor: pointer; color: var(--accent-2); } .checkBoxDropDownPopup { display: none; position: absolute; top: 100%; inset-inline-start: 0; background: var(--paper); border: 0.08rem solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow); padding: 0.8rem 1rem; max-height: 20rem; overflow-y: auto; white-space: nowrap; color: var(--ink); } .checkBoxDropDownWithLabel.open > .checkBoxDropDownPopup { display: block; } /* the בחר הכל / נקה הכל buttons stay compact even inside #formDiv (which styles its buttons as CTAs) */ #formDiv .checkBoxDropDownPopup input[type=button], .pageForm .checkBoxDropDownPopup input[type=button], .checkBoxDropDownPopup input[type=button] { font-size: 1rem; margin: 0 0 0.6rem 0.4rem; padding: 0.3rem 0.9rem; border-radius: 0.4rem; border: 0.08rem solid var(--line); background: var(--paper-soft); color: var(--ink); cursor: pointer; } /* import-dialog caption (emitted by upload.js importTable) */ .captionBar { text-align: start; font-size: 1.4rem; margin-bottom: 1rem; } .captionBar span { float: inline-end; /* the ✕ sits opposite the caption, in either direction */ cursor: pointer; color: var(--ink-soft); padding: 0 0.5rem; border-radius: 0.4rem; } .captionBar span:hover { background: var(--danger); color: #fff; } /* file drop surfaces (upload.js): the image field of a form, the import dialog */ .ImageField { display: inline-block; vertical-align: middle; width: 10rem; margin-bottom: 0.3rem; } .ImageField img { max-width: 100%; border-radius: var(--radius-s); cursor: pointer; } .dropzone { border: 0.17rem dashed var(--line); border-radius: var(--radius-s); background: var(--paper-soft); color: var(--ink-soft); padding: 1.2rem; text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .dropzone.dragover { border-color: var(--accent); background: #eef7fe; color: var(--ink); } .dropzone.busy { opacity: 0.6; cursor: progress; } /* --------------------------------------------------------------- spinner -- */ .spinner { width: 2.6rem; height: 2.6rem; margin: 1.5rem auto; border: 0.25rem solid rgba(56, 189, 248, 0.25); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------------------------------------------------------------- slides -- */ .slides { position: relative; max-width: 74rem; margin: 0 auto; padding: 2rem 2rem 6.5rem; } .slide { display: none; } .slide.active { display: block; background: var(--glass); border: 0.08rem solid var(--glass-line); border-radius: var(--radius); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); box-shadow: var(--shadow); min-height: 58vh; padding: 3rem 3.4rem; animation: slideIn 0.25s ease; } @keyframes slideIn { from { opacity: 0; transform: translateY(0.8rem); } to { opacity: 1; transform: none; } } .slide h1 { font-size: 3.6rem; font-weight: 400; line-height: 1.2; margin: 0.6rem 0 1.2rem; } .slide h2 { font-size: 2.4rem; font-weight: 400; margin: 0 0 1.6rem; color: #bae6fd; } .slide p { line-height: 1.8; color: var(--glass-ink-soft); font-size: 1.3rem; } .slide ul, .slide ol { line-height: 2; font-size: 1.3rem; padding-inline-start: 1.6rem; margin: 0; } .slide li { margin-bottom: 0.5rem; } .slide ul.big, .slide ol.big { font-size: 1.45rem; } .slide b { color: var(--glass-ink); font-weight: 400; } .titleSlide { text-align: center; } .titleSlide p { font-size: 1.6rem; } .slideKicker { display: inline-block; margin-top: 3rem; padding: 0.35rem 1.2rem; border-radius: 3rem; border: 0.08rem solid var(--glass-line); color: #7dd3fc; font-size: 1rem; letter-spacing: 0.12em; } .slide code { background: rgba(56, 189, 248, 0.13); color: #7dd3fc; padding: 0.1rem 0.45rem; border-radius: 0.4rem; direction: ltr; unicode-bidi: embed; font-size: 0.95em; } .slide .note { margin-top: 1.6rem; padding: 0.9rem 1.3rem; border-radius: var(--radius-s); border-inline-start: 0.25rem solid var(--accent); background: rgba(56, 189, 248, 0.09); color: var(--glass-ink); } pre.code { direction: ltr; text-align: left; background: #081226; border: 0.08rem solid rgba(125, 211, 252, 0.2); border-radius: var(--radius-s); padding: 1.4rem 1.6rem; overflow-x: auto; margin: 0.5rem 0; } pre.code code { background: none; padding: 0; color: #c9e4ff; font-family: 'Cascadia Code', Consolas, monospace; font-size: 1.05rem; line-height: 1.65; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } .diagram { width: 100%; max-width: 62rem; margin: 1.6rem auto 0; display: block; } .dgBox { fill: rgba(255, 255, 255, 0.07); stroke: rgba(159, 179, 209, 0.5); } .dgBox.dgMain { fill: rgba(56, 189, 248, 0.2); stroke: #38bdf8; } .dgBox.dgAlt { fill: rgba(99, 102, 241, 0.16); stroke: rgba(165, 180, 252, 0.6); } .diagram text { fill: var(--glass-ink); font-size: 1.08rem; font-family: inherit; } .diagram text.dgSmall { font-size: 0.83rem; fill: var(--glass-ink-soft); } .dgLine { stroke: #7dd3fc; stroke-width: 1.5; fill: none; } .slideNav { position: fixed; bottom: 1.6rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1rem; border-radius: 3rem; background: rgba(11, 21, 51, 0.75); border: 0.08rem solid var(--glass-line); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); } .slideNav button, .slideNav .slideHome { font-family: inherit; font-size: 1.15rem; color: var(--glass-ink); background: var(--glass); border: 0.08rem solid var(--glass-line); border-radius: 3rem; padding: 0.5rem 1.4rem; cursor: pointer; } .slideNav button:hover:not(:disabled), .slideNav .slideHome:hover { background: rgba(56, 189, 248, 0.18); } .slideNav button:disabled { opacity: 0.35; cursor: default; } .slideCounter { color: var(--glass-ink-soft); min-width: 4rem; text-align: center; } .slideProgress { position: fixed; bottom: 0; right: 0; left: 0; height: 0.3rem; background: rgba(255, 255, 255, 0.08); } .slideProgress > div { height: 100%; width: 0; background: var(--accent-grad); transition: width 0.25s ease; } /* ----------------------------------------------------------------- guide -- */ #guide { max-width: 86rem; margin: 0 auto; padding: 2.5rem 2rem; } .guideHeader { text-align: center; margin-bottom: 2.4rem; } .guideHeader h1 { font-size: 2.9rem; font-weight: 400; margin: 0 0 0.8rem; } .guideHeader p { color: var(--glass-ink-soft); max-width: 56rem; margin: 0 auto 1.4rem; line-height: 1.8; font-size: 1.3rem; } .guideGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } .guideCard { background: var(--glass); border: 0.08rem solid var(--glass-line); border-radius: var(--radius); padding: 1.8rem 2rem; backdrop-filter: blur(0.85rem); -webkit-backdrop-filter: blur(0.85rem); } .guideCard h2 { font-size: 1.7rem; font-weight: 400; color: #bae6fd; margin: 0 0 1rem; } .guideCard ul { margin: 0; padding-inline-start: 1.4rem; line-height: 1.95; color: var(--glass-ink-soft); } .guideCard li b { color: var(--glass-ink); font-weight: 400; } .guideCard code { background: rgba(56, 189, 248, 0.13); color: #7dd3fc; padding: 0.05rem 0.4rem; border-radius: 0.4rem; direction: ltr; unicode-bidi: embed; font-size: 0.95em; } .guideCard pre.code { margin: 0.6rem 0; } .guideCard .note { color: var(--glass-ink); margin: 0.8rem 0 0; } /* ------------------------------------------------------------ responsive -- */ @media (max-width: 56.25rem) { #menuToggle { display: inline; } #leftPart { font-size: 0; } /* keep the logo, hide the text */ .hero h1 { font-size: 3rem; } .features, .presentCards, .guideGrid, .split { grid-template-columns: 1fr; } #layout { display: block; } #menu { position: fixed; top: 0; bottom: 0; /* The drawer lives on the side the language starts from and slides in from off-screen there — the right in hebrew/arabic, the left in english/russian. */ inset-inline-start: -70vw; width: 66vw; z-index: 80; border-inline-end: none; /* the drawer floats over the content */ border-inline-start: 0.08rem solid var(--glass-line); background: rgba(8, 15, 38, 0.96); transition: inset-inline-start 0.25s ease; justify-content: flex-start; gap: 2rem; } body.menu-open #menu { inset-inline-start: 0; } #inner { padding: 1.2rem; } .filterBar { margin: 0 0 1rem 0; margin-top: 3rem; } .slide.active { padding: 1.8rem 1.4rem; } .slides { padding: 1rem 0.8rem 6.5rem; } .slide h1 { font-size: 2.4rem; } /* tables become stacked cards; each cell is labeled from its column header (data-label is stamped by tablemaker.js getTable) */ div.table { width: 100%; } div.table thead { display: none; } div.table table, div.table tbody, div.table tr, div.table td { display: block; width: 100%; } div.table tr { padding: 0.7rem 0; border-bottom: 0.08rem solid var(--line); } div.table td, div.table tbody td { max-width: none; white-space: normal; overflow: visible; padding: 0.15rem 0; border: none; } div.table tbody td:empty { display: none; } div.table td::before { content: attr(data-label) ": "; color: var(--ink-soft); font-size: 1rem; } div.table td:first-child { display: inline-block; width: auto; font-weight: 700; } div.table td:first-child::before { content: none; } } /* ----------------------------------------------------------------- print -- */ @media print { #upperPanel, #menu, .filterBar, .pager, .addButton, .toolbar, svg { display: none; } body { background: #fff; } div.table { width: 100%; margin: 0; box-shadow: none; } }