/* ============================================================================ סיפורון · shared theme for the shows pages (shows.html, archive.html) ---------------------------------------------------------------------------- Both pages are the same page with a different half of the calendar, so their styling lives here rather than being pasted into each. That is not tidiness for its own sake: the two were already drifting before this, and a rule changed in one and forgotten in the other is invisible until someone opens both. The design mirrors index.html: a CREAM page, dark "starfield" panels for the moments that should feel like night, and light cards for anything you read. The panel treatment and the header/footer are copied from index.html verbatim, so a visitor arriving from the homepage shows band lands in the same room. Page differences are handled by a class on : .page-archive past shows — neutral status pill instead of the green one ========================================================================== */ /* ============================================================================ Rebuilt to match the homepage design system. The page used to be dark end to end, on the older --lamp/--night palette. The site has since moved to: a CREAM page, dark "starfield" panels for the moments that should feel like night, and light cards for anything you actually read. This page now follows that, and the hero panel is deliberately the same treatment as the homepage's shows band — so arriving here from that band feels like the same room rather than a different site. Tokens, the panel treatment and the header/footer are copied from index.html verbatim rather than approximated, so the two pages cannot drift apart. ========================================================================== */ :root{ --night:#070b24;--night2:#0d1233;--plum:#21133f;--plum2:#36205c; --gold:#f5c55a;--gold2:#ffe3a1;--cream:#fff4dc;--paper:#faf4e8; --coral:#ff7163;--mist:#cbc8dc;--ink:#211a30;--muted:#716979; --line:rgba(255,255,255,.13);--glass:rgba(255,255,255,.065); --shadow:0 34px 90px -38px rgba(0,0,0,.82);--max:1240px; } *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink);font-family:"Assistant","Heebo",Arial,sans-serif;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased} h1,h2,h3{font-family:"Suez One",serif;font-weight:400;margin:0;line-height:1.15} a{color:inherit;text-decoration:none} .wrap{width:min(100% - 48px,var(--max));margin-inline:auto} .hidden{display:none!important} /* ---- header: the homepage's, in its solid form ------------------------------ index.html floats the header over a dark hero; this page has no such hero, so it uses the same header in the solid state the homepage itself switches to at 860px. Same heights, same colours, same links. */ .site-header{position:sticky;top:0;z-index:100;padding:10px 0;background:#070b24;border-bottom:1px solid rgba(245,197,90,.12)} .site-header .nav{display:flex;align-items:center;gap:26px} .logo img{height:46px;width:auto;display:block} .nav-links{display:flex;align-items:center;gap:22px;margin-inline-start:auto} .nav-links a{color:#dedbea;font-weight:700;font-size:.98rem;transition:.18s} .nav-links a:hover{color:var(--gold)} .nav-links a[aria-current="page"]{color:var(--gold)} .nav-actions{display:flex;align-items:center;gap:10px} .login{color:#dedbea;font-weight:700;font-size:.95rem} .login:hover{color:var(--gold)} .join-small{min-height:44px;display:inline-flex;align-items:center;padding:9px 20px;border:1px solid var(--gold);border-radius:999px;color:var(--gold2);font-weight:800;background:rgba(245,197,90,.05)} .join-small:hover{background:rgba(245,197,90,.14)} .menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.06);color:#fff;font-size:1.2rem;cursor:pointer} /* ---- buttons ---- */ .btn{min-height:50px;border-radius:999px;padding:12px 22px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;font-family:"Assistant";font-weight:800;font-size:1.02rem;cursor:pointer;transition:transform .18s,border-color .18s,background .18s} .btn-gold,.btn-primary{background:linear-gradient(135deg,#ffe18d,var(--gold));border-color:rgba(255,255,255,.48);color:#302000;box-shadow:0 16px 36px -16px rgba(245,197,90,.78),inset 0 1px 0 rgba(255,255,255,.65)} .btn-gold:hover,.btn-primary:hover{transform:translateY(-2px)} .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold2)} /* On the cream part of the page a white ghost button would vanish. */ .on-cream .btn-ghost{color:var(--ink);border-color:rgba(33,26,48,.28)} .on-cream .btn-ghost:hover{border-color:#b8912f;color:#7a5c12;background:rgba(245,197,90,.12)} /* --muted sits at 4.2:1 on this chip's own darker fill, so it takes a slightly deeper grey than the page default */ .btn.disabled{background:#efe6d6;color:#5c5468;border:1px solid rgba(33,26,48,.14);cursor:default;box-shadow:none} /* ---- eyebrow + section heading, straight from the homepage ---- */ .eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 13px;border:1px solid rgba(245,197,90,.26);border-radius:999px;background:rgba(245,197,90,.07);color:var(--gold);font-weight:800;font-size:.82rem;letter-spacing:.04em} .section-head{max-width:720px;margin:0 auto 34px;text-align:center} .section-head h2{font-size:clamp(2rem,4vw,3rem);margin:13px 0 8px;color:var(--ink)} .section-head p{color:var(--muted);margin:0} /* The eyebrow's gold-on-dark styling has too little contrast on cream. */ .on-cream .eyebrow{border-color:rgba(150,110,20,.34);background:rgba(245,197,90,.2);color:#7a5c12} /* ---- the night panel: identical to the homepage's shows band --------------- */ .panel{position:relative;isolation:isolate;overflow:hidden;padding:76px 54px;border-radius:32px;color:var(--cream);text-align:center;background:radial-gradient(circle at 18% 20%,rgba(101,66,161,.42),transparent 27rem),radial-gradient(circle at 84% 78%,rgba(58,87,158,.25),transparent 26rem),linear-gradient(145deg,#080c2d,#231447 56%,#0b1238);box-shadow:0 34px 78px -48px rgba(20,12,47,.88)} .panel::before{content:"";position:absolute;z-index:-2;inset:0;opacity:.28;background-image:radial-gradient(circle,#fff6d6 0 1px,transparent 1.8px),radial-gradient(circle,var(--gold) 0 1px,transparent 1.9px),radial-gradient(circle,#d9d2ff 0 1px,transparent 1.7px);background-size:183px 171px,277px 249px,337px 293px;background-position:19px 27px,91px 108px,151px 71px;animation:panelStars 5.2s ease-in-out infinite alternate} .panel::after{content:"";position:absolute;z-index:-1;left:-9%;right:-9%;bottom:-46%;height:78%;background:radial-gradient(ellipse at 24% 45%,rgba(95,68,147,.38),transparent 30%),radial-gradient(ellipse at 73% 52%,rgba(45,67,127,.32),transparent 34%);filter:blur(7px);pointer-events:none} .panel>*{position:relative;z-index:1} @keyframes panelStars{0%{opacity:.18}100%{opacity:.37}} @media(prefers-reduced-motion:reduce){.panel::before{animation:none}} .stage-hero{padding:34px 0 10px} .panel h1{font-size:clamp(2.3rem,5vw,3.7rem);margin:14px 0 0} .panel p{max-width:60ch;margin:14px auto 24px;color:#d9d3ea;font-size:1.06rem} .panel .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ---- the list ---- */ /* Narrower than the panels above and below. --max (1240px) suits the homepage's four-across grids; a stacked list of wide cards at that width leaves the date and the ticket button at opposite ends of the screen. */ .shows-list{padding:52px 0 40px} .shows-list>.wrap{width:min(100% - 48px,1080px)} .filter{display:flex;justify-content:center;margin:0 0 26px} .filter select{background:#fff;border:1px solid rgba(33,26,48,.16);color:var(--ink);border-radius:999px;padding:.65rem 1.4rem;font-family:"Assistant";font-size:.95rem;font-weight:700;cursor:pointer;box-shadow:0 6px 18px -12px rgba(33,26,48,.5)} .filter select option{color:#000} /* .show keeps its grid, .body and .poster: the loading skeletons rebuild exactly that structure with these class names (see skeleton-loading.js), so renaming any of them would make the placeholders the wrong shape. */ /* minmax(0,1fr), not 1fr: a bare 1fr takes its minimum from its CONTENT, so a long venue name or an unbreakable ticket URL would push the poster column out of the card between 680px and about 780px. */ .show{display:grid;grid-template-columns:minmax(0,1fr) 300px;background:#fff;border:1px solid rgba(33,26,48,.09);border-radius:22px;overflow:hidden;margin-bottom:18px;box-shadow:0 22px 48px -34px rgba(33,26,48,.55);transition:transform .18s,box-shadow .18s} .show:hover{transform:translateY(-3px);box-shadow:0 30px 60px -34px rgba(33,26,48,.6)} @media(max-width:680px){.show{grid-template-columns:1fr}} .show .body{padding:26px 28px} .show .status{display:inline-block;font-size:.75rem;font-weight:800;padding:4px 12px;border-radius:999px;margin-bottom:10px;background:#e4f4e8;color:#2f7a48} .show h3{font-size:1.7rem;margin-bottom:12px;color:var(--ink)} .meta{display:flex;flex-direction:column;gap:7px;margin-bottom:16px} /* overflow-wrap:anywhere is load-bearing, not decoration. The venue text is a bare text node next to the icon, so it becomes an ANONYMOUS flex item — and an anonymous item's min-width:auto cannot be overridden by any selector, because there is no element to select. Its minimum is therefore the longest unbreakable run. "מרכז הקונגרסים הבינלאומי בבנייני האומה, ירושלים" overflowed the card by 105px at 360px wide, and .show's overflow:hidden silently CLIPPED it: the venue was simply unreadable on a phone rather than visibly broken. Allowing a break anywhere lowers the min-content width and lets it wrap. align-items:flex-start keeps the icon on the first line once it does wrap. */ .meta div{display:flex;align-items:flex-start;gap:.5rem;font-size:.98rem;color:#463c56;overflow-wrap:anywhere} .meta .i{color:var(--coral);width:18px;flex:0 0 18px;text-align:center} /* Same trap: notes routinely carry a long unbreakable ticket URL. */ .show .note{color:var(--muted);font-size:.85rem;margin:12px 0 0;line-height:1.5;overflow-wrap:anywhere} .show h3{overflow-wrap:anywhere} .poster{background:linear-gradient(160deg,#241548,#0d1030);min-height:220px} .poster img{width:100%;height:100%;object-fit:cover;display:block} .poster.empty{display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:2.5rem} .empty-state{text-align:center;color:var(--muted);padding:40px 24px;background:#fffaf0;border:1px dashed rgba(33,26,48,.2);border-radius:20px} .empty-state .btn{margin-top:16px} .archive-cta{text-align:center;margin:28px 0 0} .loading{text-align:center;color:var(--muted);padding:50px} /* ---- closing panel + footer ---- */ .final{padding:20px 0 64px} .panel h2{font-size:clamp(1.9rem,4vw,2.8rem);margin:12px 0 0} footer{padding:52px 0 32px;background:#040619;color:#bdb9cc;border-top:1px solid rgba(245,197,90,.13)} .footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px} .footer-logo img{height:72px;width:auto} .footer-logo p{max-width:33ch;color:#a9a6ba;font-size:.9rem} .footer-col h3{font-size:1rem;margin-bottom:12px;color:var(--gold2)} .footer-col a{display:block;color:#bdb9cc;margin:7px 0;font-size:.9rem} .footer-col a:hover{color:var(--gold)} .copyright{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);text-align:center;color:#8d89a0;font-size:.82rem} @media(max-width:860px){ .menu-btn{display:grid;place-items:center} .nav-links{display:none;position:absolute;top:70px;inset-inline:24px;flex-direction:column;align-items:stretch;gap:0;padding:12px;border:1px solid var(--line);border-radius:18px;background:rgba(7,11,36,.98);box-shadow:var(--shadow)} .nav-links.open{display:flex} .nav-links a{padding:10px 12px} .site-header .nav{position:relative} .nav-actions .login{display:none} .panel{padding:56px 26px;border-radius:26px} .footer-grid{grid-template-columns:1fr 1fr} .footer-logo{grid-column:1/-1} } /* Very narrow phones (320px and the like). The header row is logo + burger + "7 ימים במתנה", and at 320px those plus the gaps came to about 9px more than the line could hold — enough to make the page scroll sideways, which in RTL shows up as overflow on the LEFT. Shrinking the three of them is enough; nothing is hidden, so the trial button stays reachable. */ @media(max-width:380px){ .site-header .nav{gap:10px} .logo img{height:38px} .join-small{padding:8px 12px;font-size:.82rem} .menu-btn{width:40px;height:40px} } @media(max-width:620px){ .wrap{width:min(100% - 30px,var(--max))} .panel{padding:48px 20px;border-radius:22px} .stage-hero{padding:20px 0 6px} .shows-list{padding:38px 0 30px} .show .body{padding:22px 20px} .panel .row{flex-direction:column} .panel .row .btn{width:100%} .footer-grid{grid-template-columns:1fr;text-align:center} .footer-logo img{margin:auto} .footer-logo p{margin-inline:auto} } /* ---- archive.html ----------------------------------------------------------- Same page, past tense. A green "coming up" pill on a show that already happened would be actively misleading, so the archive's status pill is neutral. Done with a body class rather than a new class in the card markup, because both pages build their cards with the same `class="status"` string and changing that would mean editing JavaScript to achieve a colour change. */ .page-archive .show .status{background:#ece8f1;color:#5b5170} /* Every archive card's action is the disabled "registration closed" pill, so the card needs no hover lift — nothing about it is clickable. */ .page-archive .show:hover{transform:none;box-shadow:0 22px 48px -34px rgba(33,26,48,.55)}