/* ============================================================================ תלמודו בידו — 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). ========================================================================== */ :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 Ruhl Libre', 'David Libre', 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; 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 { 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 ---- */ .hero { position: relative; padding: 4.5rem 1.5rem 4rem; overflow: hidden; } .heroInner { max-width: var(--measure); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items: center; } .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; } .heroImage { text-align: center; } /* ---- 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; } .heroImage .device { width: 30rem; } /* ---- the four promises under the hero ---- */ .promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } .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; } /* ---- 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; } .shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } .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. */ .videoWrap { max-width: 24rem; margin: 0 auto; } .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(2, minmax(0, 1fr)); gap: 2rem; max-width: 62rem; margin: 0 auto; } .model { text-align: center; padding: 2.2rem 1.8rem; border: 0.09rem solid var(--glass-line); border-radius: var(--radius); background: var(--glass); } .band .model { background: var(--paper); border-color: var(--line); } /* The stage both devices stand on: same height, bottom aligned, so a 7" reads as smaller than a 10" instead of just sitting higher up the card. */ .modelStage { display: flex; align-items: flex-end; justify-content: center; min-height: 24rem; margin-bottom: 1.4rem; } .modelStage .device { margin: 0; width: 18rem; } .modelStage .device.small { width: 12rem; } .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); } /* ---- 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 ---- */ .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; } /* ---- 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; } .heroImage { order: -1; } .heroImage img { max-width: 22rem; } .promises { grid-template-columns: repeat(2, 1fr); } .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) { .promises, .cards, .models, .libGrid, .shots, .footerInner { grid-template-columns: 1fr; } .band, .dark { padding: 3rem 1.2rem; } .sectionHead h2 { font-size: 2.2rem; } } /* --------------------------------------------------------- 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; } .pageCard a { color: var(--accent-2); } .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; } }