/* ========================================================================== THIRD STREET EVENTS — "PAPER" v3.0 -------------------------------------------------------------------------- Direction: still New Wave, but the quiet end of it. Warm stock, one ink, colour used once and meant. What changed from v2.1, and why: · The title is one colour again. Per-letter plates were also what broke the name — each letter was an inline-block, so the browser could break inside a word ("JAM W / ORKSHOP"). Words are whole again. · No tableau numbers. · No flooded cells. · Warm paper instead of pure white, carried over from the first pass. · The hero strip is rebuilt as one ruled band — date, time, organizer and program as four fields of the same object, rather than a black block, an outlined pill and two hairline rows all arguing. Colour appears in exactly three places: the bar mark beside the title (THIRD Street's own logotype detail), the rule under it, and the call to action. Everything else is ink on paper. EVERY SECTION ON THE PAGE IS AN EVENTON SECTION. This stylesheet adds no content of its own — it styles .evocard_box, whatever .evocard_box happens to be that day. Built against EventON 5.0.13 · Elementor 4.2.2 · Hello Elementor 3.4.5 ========================================================================== */ /* ========================================================================== 1. STOCK AND INK ========================================================================== */ /* Declared once, on . Do NOT also declare them on an inner EventON wrapper — .evo_sin_page contains .eventon_events_list, and a second declaration further down the tree silently resets the accent, which kills the per-program colour. */ .ts-event-page { /* Warm stock. Not white — paper. */ --ts-paper: #FBFAF7; --ts-paper-2: #F4F2EC; /* one step down, for quiet fills */ /* Warm black, and warm neutrals to match it. */ --ts-ink: #14120F; /* 18.6:1 on paper */ --ts-ink-2: #6E6A63; /* 5.2:1 on paper — labels and captions */ --ts-rule: #14120F; --ts-hairline: #D8D3C9; /* The plates. Used sparingly now: the bar mark, the rule, the CTA. */ --ts-cyan: #00AEEF; --ts-magenta: #EC008C; --ts-yellow: #FFF200; /* Text-safe twins. The raw plates are fills; these carry text. #00AEEF on paper is 2.5:1 and fails AA. #0077A3 is 4.9:1 and passes. */ --ts-cyan-ink: #0077A3; --ts-magenta-ink: #C9007A; --ts-keyline: 2px; --ts-display: "Korolev", "Poppins", system-ui, sans-serif; --ts-body: "Figtree", system-ui, -apple-system, sans-serif; /* Which plate leads this page. */ --ts-accent: var(--ts-magenta); --ts-accent-ink: var(--ts-magenta-ink); } /* One plate per program. Add a line per Event Type slug; anything unlisted falls back to magenta. */ .ts-event-page.ts-program-workshops { --ts-accent: var(--ts-cyan); --ts-accent-ink: var(--ts-cyan-ink); } .ts-event-page.ts-program-performances { --ts-accent: var(--ts-magenta); --ts-accent-ink: var(--ts-magenta-ink); } .ts-event-page.ts-program-community { --ts-accent: var(--ts-yellow); --ts-accent-ink: var(--ts-ink); } .ts-event-page.ts-program-gallery { --ts-accent: var(--ts-yellow); --ts-accent-ink: var(--ts-ink); } /* ========================================================================== 2. THE SHEET ========================================================================== */ .ts-event-page { background: var(--ts-paper); } .ts-event-page .evo_sin_page { font-family: var(--ts-body); color: var(--ts-ink); max-width: 1160px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); padding-block: 0 88px; } /* The page scrolls sideways without this — 1300px of content in a 1017px viewport, from the header nav and a header button. */ html, body { overflow-x: clip; } .ts-event-page .evo_sin_page, .ts-event-page .evo_sin_page * { max-width: 100%; } /* ========================================================================== 3. THE HEAD ========================================================================== */ /* Repeating-series bar. A quiet line above the title, not a black slab. */ .ts-event-page .evose_repeat_header { background: none; color: var(--ts-ink-2); padding: 22px 0 18px; margin: 0; border-bottom: 1px solid var(--ts-hairline); } .ts-event-page .evose_repeat_header p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0; } /* Four classes plus an element: EventON's dynamic_styles sheet sets this pill at .eventon_events_list .evose_repeat_header span.title and is injected late, so it takes any tie. */ .ts-event-page .eventon_events_list .evose_repeat_header span.title, .ts-event-page .evose_repeat_header .title { background: none; color: var(--ts-ink-2); font-family: var(--ts-display); font-weight: 700; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; padding: 0; } .ts-event-page .evose_repeat_header .ri_nav, .ts-event-page .evose_repeat_header .ri_nav a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ts-display); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ts-ink-2); text-decoration: none; } .ts-event-page .evose_repeat_header .ri_nav a:hover { color: var(--ts-ink); } /* --- The title --------------------------------------------------------- One ink. Words stay whole. The only ornament is THIRD Street's own logotype detail — the "I" is a stack of coloured bars — set beside it. */ .ts-event-page h1.evosin_event_title { position: relative; background: none; color: var(--ts-ink); font-family: var(--ts-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: .94; letter-spacing: -.015em; margin: 0; padding: 34px 0 0 46px; /* left gutter holds the mark */ text-wrap: balance; overflow-wrap: normal; /* never break inside a word */ word-break: normal; hyphens: none; } .ts-event-page h1.evosin_event_title::before { content: ""; position: absolute; left: 0; top: 38px; bottom: 4px; width: 14px; background: linear-gradient(90deg, var(--ts-cyan) 0 25%, var(--ts-magenta) 25% 50%, var(--ts-yellow) 50% 75%, var(--ts-ink) 75% 100%); } /* A single hairline of the page's plate, and nothing else. */ .ts-event-page .evo_eventtop::before { content: ""; display: block; height: 4px; width: 96px; margin-top: 26px; background: var(--ts-accent); } /* ========================================================================== 4. THE FACT BAND Date · Time · Organizer · Program, as four fields of one object. Previously these were a solid black slate, an outlined pill and two hairline rows — three visual languages inside one block, which is why it sat oddly. Now they share a rule weight, a label style and a baseline. The hairlines between fields come from a 1px gap over a ruled background, so a hidden field simply vanishes instead of leaving an orphan divider. ========================================================================== */ .ts-event-page .evoet_c2.evoet_cx { display: flex; flex-wrap: wrap; gap: 1px; width: 100%; flex: 1 1 100%; /* .evoet_in is itself a flex container */ margin-block: 34px 0; background: var(--ts-hairline); border-block: var(--ts-keyline) solid var(--ts-rule); } .ts-event-page .evoet_c2.evoet_cx > * { /* EventON makes several of these flex containers, which would put the generated label beside its value instead of above it. */ display: block !important; flex: 1 1 190px; min-width: 0; background: var(--ts-paper); padding: 18px 22px 16px; } /* EventON also emits two non-fields in this container: a duplicate of the event title (carrying the admin edit pencil) and a hidden location span. They have to be hidden explicitly, because the `display: block !important` above would otherwise drag them back into view as empty cells. Editors still have "Edit Event" in the admin bar. */ .ts-event-page .evoet_c2.evoet_cx > .evoet_title, .ts-event-page .evoet_c2.evoet_cx > .event_location_attrs, .ts-event-page .evoet_c2.evoet_cx > .evodni { display: none !important; } /* Shared label style across all four fields, wherever the label comes from: generated for date and time, EventON's own markup for the other two. */ .ts-event-page .evoet_cx .evoet_dayblock::before, .ts-event-page .evoet_cx .evoet_time_expand::before, .ts-event-page .evoet_cx .evcal_oganizer > em > i, .ts-event-page .evoet_cx .evoet_eventtypes > em > i { display: block; font-style: normal; font-family: var(--ts-display); font-size: 10px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--ts-ink-2); /* 5.2:1 on paper */ margin-bottom: 9px; white-space: nowrap; } .ts-event-page .evoet_cx .evoet_dayblock::before { content: "Date"; } .ts-event-page .evoet_cx .evoet_time_expand::before { content: "Time"; } /* Shared value style. */ .ts-event-page .evoet_cx .evoet_dataval, .ts-event-page .evoet_cx .evcal_time { font-style: normal; font-family: var(--ts-display); font-size: 15px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: var(--ts-ink); line-height: 1.25; } /* Date field. The slate is gone; the date is simply the largest thing in its cell. Four classes deep because EventON locks the old background with `background: transparent !important` in evcal_cal_default.css. */ .ts-event-page .eventon_list_event .evoet_dayblock.evcal_cblock { display: block; width: auto; background: var(--ts-paper) !important; color: var(--ts-ink); font-family: var(--ts-display); padding: 18px 22px 16px; margin: 0; transform: none; } .ts-event-page .evoet_dayblock .evo_start { display: flex; align-items: baseline; gap: 8px; } .ts-event-page .evoet_dayblock em.date { font-size: 2.1rem; font-weight: 800; font-style: normal; line-height: 1; letter-spacing: -.02em; color: var(--ts-ink); } .ts-event-page .evoet_dayblock em.month { font-size: 15px; font-weight: 700; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-ink); } /* The times repeat inside the date block; the Time field beside it already carries the range. Delete this rule to bring them back. */ .ts-event-page .evoet_dayblock em.time, .ts-event-page .evoet_dayblock .evo_end { display: none; } /* Time field. No box, no border — same weight as its neighbours. The long selector matches EventON's own so it wins on order, not force. */ .eventon_single_event.immersive .eventon_list_event .evoet_time_expand em.evcal_time, .eventon_single_event.immersive .eventon_list_event .evoet_location em.evcal_location, .ts-event-page .evo_sin_page .evcal_time { display: block; background: none; border: 0; border-radius: 0; padding: 0; color: var(--ts-ink); } .ts-event-page .evo_sin_page .evcal_time i { display: none; } .ts-event-page .evo_sin_page .evo_tz { display: block; margin: 6px 0 0; font-family: var(--ts-body); font-size: 12.5px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--ts-ink-2); } /* Organizer and Program fields. Their label and value are sibling s; both have to be block or the label sits beside the value in one and above it in the other, which is exactly the kind of near-miss that made the old strip feel unresolved. */ .ts-event-page .evoet_cx .evcal_oganizer, .ts-event-page .evoet_cx .evoet_eventtypes { border: 0; max-width: none; } .ts-event-page .evoet_cx .evcal_oganizer > em, .ts-event-page .evoet_cx .evoet_eventtypes > em { display: block; } .ts-event-page .evoet_cx .evoet_dataval i { display: none !important; } @media (max-width: 640px) { .ts-event-page .evoet_c2.evoet_cx > * { flex: 1 1 100%; } } /* ========================================================================== 5. THE GRID — every cell is an EventON section A ruled sheet: hairlines show through 1px gaps over a ruled background, so adding or removing a section in EventCard Designer never leaves a stray divider behind. ========================================================================== */ .ts-event-page .evo_sin_page .evcal_eventcard { display: grid !important; /* EventON sets display:block inline */ grid-template-columns: repeat(12, 1fr); gap: 1px; align-items: stretch; margin-block-start: 44px; padding: 0; } /* The bed needs an ID in the selector to land: EventON styles this container at `.evo_page_body .evo_sin_page #evcal_list .evcal_eventcard`, and an ID outranks any number of classes. */ .ts-event-page .evo_page_body .evo_sin_page #evcal_list .event_description.evcal_eventcard { border: var(--ts-keyline) solid var(--ts-rule); background: var(--ts-hairline); } .ts-event-page .evo_sin_page .evocard_row { display: contents; } .ts-event-page .evo_sin_page .evocard_box { position: relative; grid-column: span 4; background: var(--ts-paper); border: 0; border-radius: 0; box-shadow: none; padding: 26px 24px 24px; margin: 0; min-width: 0; overflow: hidden; } /* --- Cell widths. This block IS the layout. Retune freely. ------------- Keyed on EventON's own modifier classes, so a section this file has never heard of still lands on a sensible third-width cell. */ .ts-event-page .evocard_box.ftimage { grid-column: span 5; padding: 0; } .ts-event-page .evocard_box.eventdetails { grid-column: span 7; } .ts-event-page .evocard_box.learnmore { grid-column: 1 / -1; padding: 0; } .ts-event-page .evocard_box.time { grid-column: span 4; } .ts-event-page .evocard_box.location { grid-column: span 4; } .ts-event-page .evocard_box.repeats { grid-column: span 4; } .ts-event-page .evocard_box.organizer { grid-column: span 6; } .ts-event-page .evocard_box.evoet { grid-column: span 6; } .ts-event-page .evocard_box.addtocal { grid-column: span 4; } .ts-event-page .evocard_box.gmap { grid-column: span 12; padding: 0; } .ts-event-page .evocard_box.locimg { grid-column: span 4; padding: 0; } .ts-event-page .evocard_box.social { grid-column: span 6; } .ts-event-page .evocard_box.cmf { grid-column: span 6; } .ts-event-page .evocard_box.related { grid-column: span 12; } .ts-event-page .evocard_box.direction { grid-column: span 6; } .ts-event-page .evocard_box.health { grid-column: span 6; } .ts-event-page .evocard_box.virtual { grid-column: span 6; } /* Self-adjusting rows. Time, Organizer and Program are duplicates of the fact band at the top of the page, so they are normally switched off in EventCard Designer. When Time is off, Location and Dates would leave a third of a row empty — so they take half each instead. Switch Time back on and they revert on their own. No edit, no stale gap. */ .ts-event-page .evcal_eventcard:not(:has(.evocard_box.time)) .evocard_box.location, .ts-event-page .evcal_eventcard:not(:has(.evocard_box.time)) .evocard_box.repeats { grid-column: span 6; } /* The artwork fills its cell top-down; whatever is left is quiet stock, not a hole. EventON's "fit image to min height" setting pads the holder to a fixed height and has to be released or short flyers float mid-cell. */ .ts-event-page .evocard_box.ftimage { background: var(--ts-paper-2); } .ts-event-page .evocard_box.ftimage .evocard_main_image_hold, .ts-event-page .evocard_box.ftimage .evocard_main_image { min-height: 0 !important; height: auto !important; } .ts-event-page .evocard_main_image, .ts-event-page .evocard_main_image img { border-radius: 0; width: 100%; height: auto; display: block; } @media (max-width: 880px) { .ts-event-page .evo_sin_page .evcal_eventcard { grid-template-columns: 1fr; } .ts-event-page .evo_sin_page .evocard_box { grid-column: 1 / -1 !important; } } /* Container-aware too, so it behaves inside Elementor columns, embeds and in-app webviews — not only at browser breakpoints. */ @supports (container-type: inline-size) { .ts-event-page .evo_sin_page { container-type: inline-size; container-name: tsevent; } @container tsevent (max-width: 660px) { .ts-event-page .evo_sin_page .evcal_eventcard { grid-template-columns: 1fr; } .ts-event-page .evo_sin_page .evocard_box { grid-column: 1 / -1 !important; } } } /* ========================================================================== 6. INSIDE A CELL ========================================================================== */ /* Section headings. Keyed on .evo_h3, not the tag name, so ts-events.js can promote them to
without anything shifting. */ .ts-event-page .evo_sin_page .evo_h3, .ts-event-page .evo_sin_page .evcal_evdata_row h2, .ts-event-page .evo_sin_page .evcal_evdata_row h3 { display: block; font-family: var(--ts-display); font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; line-height: 1.2; color: var(--ts-ink-2); margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid var(--ts-hairline); } /* No icons in the grid. The headings carry the meaning, and EventON prints the row icon twice on some cards, which forced a line break above the title. */ .ts-event-page .evocard_box .evcal_evdata_icons { display: none; } .ts-event-page .evo_sin_page .event_excerpt p, .ts-event-page .evo_sin_page .eventon_full_description p, .ts-event-page .evo_sin_page .evcal_evdata_cell p { font-size: 17px; line-height: 1.62; color: var(--ts-ink); max-width: 62ch; /* readable measure */ margin: 0 0 1em; } .ts-event-page .evo_sin_page .evcal_evdata_cell:empty, .ts-event-page .evo_sin_page .eventon_full_description:empty, .ts-event-page .evo_sin_page .eventon_desc_in p:empty, .ts-event-page .evo_sin_page .evcal_evdata_cell p:empty { display: none; } /* Links are underlined, not merely tinted — WCAG 1.4.1. */ .ts-event-page .evo_sin_page .evcal_evdata_cell a, .ts-event-page .evo_sin_page .event_excerpt a { color: var(--ts-cyan-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; word-break: break-word; } .ts-event-page .evo_sin_page .evcal_evdata_cell a:hover { color: var(--ts-magenta-ink); } /* ========================================================================== 7. THE CALL TO ACTION EventON ships this as an
inside an — a heading that behaves like a link and converts like neither. ts-events.js makes it a ; this makes it a bar. The one place colour arrives at full strength. ========================================================================== */ .ts-event-page .evocard_box.learnmore .evo_clik_row { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 70px; /* ≫ 44px — WCAG 2.5.8 */ padding: 22px 32px; background: var(--ts-ink); border: 0; border-radius: 0; text-decoration: none; transition: background-color .12s linear; } .ts-event-page .evocard_box.learnmore .evo_clik_row:hover, .ts-event-page .evocard_box.learnmore .evo_clik_row:focus-visible { background: var(--ts-accent-ink); } .ts-event-page .evocard_box.learnmore .evo_h3, .ts-event-page .evocard_box.learnmore .evo_clik_row span, .ts-event-page .evocard_box.learnmore .evo_clik_row h2 { display: inline; color: var(--ts-paper); font-family: var(--ts-display); font-size: 15px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; margin: 0; padding: 0; border: 0; } /* On the yellow plate the label has to flip to ink. */ .ts-event-page.ts-program-community .evocard_box.learnmore .evo_clik_row:hover .evo_h3, .ts-event-page.ts-program-gallery .evocard_box.learnmore .evo_clik_row:hover .evo_h3 { color: var(--ts-ink); } /* ========================================================================== 8. REPEAT DATES · PROGRAM · SECONDARY ACTIONS Outlined, not filled. Colour is spent already. ========================================================================== */ .ts-event-page .evocard_box.repeats .evo_date_row, .ts-event-page .evocard_box.repeats a { border: 1px solid var(--ts-ink); border-radius: 0; padding: 14px 18px; min-width: 104px; min-height: 44px; text-align: center; font-family: var(--ts-display); font-weight: 700; letter-spacing: .04em; text-decoration: none; color: var(--ts-ink); background: var(--ts-paper); transition: background-color .12s linear, color .12s linear; } .ts-event-page .evocard_box.repeats a:hover { background: var(--ts-ink); color: var(--ts-paper); } /* The category chip and the secondary actions. EventON writes the chip's colour as an inline style, which only !important can answer — and the plate is already carried by the rule under the title, so a second copy of it just adds noise. */ .ts-event-page .evocard_box.evoet .evo_et_trigger, .ts-event-page .evocard_box.addtocal a, .ts-event-page .evocard_box.social a, .ts-event-page .evocard_box.direction a { background: var(--ts-paper) !important; color: var(--ts-ink) !important; border: 1px solid var(--ts-ink) !important; border-radius: 0 !important; font-family: var(--ts-display); font-weight: 700; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; padding: 13px 18px; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: background-color .12s linear, color .12s linear; } .ts-event-page .evocard_box.evoet .evo_et_trigger i { color: var(--ts-ink) !important; } .ts-event-page .evocard_box.evoet .evo_et_trigger:hover, .ts-event-page .evocard_box.addtocal a:hover, .ts-event-page .evocard_box.social a:hover, .ts-event-page .evocard_box.direction a:hover { background: var(--ts-ink) !important; color: var(--ts-paper) !important; } /* Organizer cell. The name reads as a name; "Learn More" is an outlined chip like every other secondary action, instead of EventON's grey pill with a chevron falling onto its own line. Note the ID: `#evcal_list p { display: none }` would otherwise swallow the paragraph EventON wraps that link in. */ .ts-event-page .evocard_box.organizer .evo_org_name { font-family: var(--ts-display); font-size: 1.1rem; font-weight: 800; letter-spacing: .01em; line-height: 1.15; margin: 0 0 16px; padding: 0; border: 0; color: var(--ts-ink); } .ts-event-page #evcal_list p.evo_card_organizer_more { display: block; margin: 0; } .ts-event-page .evocard_box.organizer .evo_card_organizer_more a { display: inline-flex; align-items: center; gap: 8px; background: var(--ts-paper); border: 1px solid var(--ts-ink); border-radius: 0; font-family: var(--ts-display); font-weight: 700; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; padding: 13px 18px; min-height: 44px; text-decoration: none; white-space: nowrap; transition: background-color .12s linear, color .12s linear; } /* EventON puts `.evocl1i { color: var(--evo_color_1) !important }` on this link and colours the label inside it rather than the link itself, so both have to be told, and in kind. */ .ts-event-page .evocard_box.organizer .evo_card_organizer_more a, .ts-event-page .evocard_box.organizer .evo_card_organizer_more a * { color: var(--ts-ink) !important; } .ts-event-page .evocard_box.organizer .evo_card_organizer_more a:hover { background: var(--ts-ink); } .ts-event-page .evocard_box.organizer .evo_card_organizer_more a:hover, .ts-event-page .evocard_box.organizer .evo_card_organizer_more a:hover * { color: var(--ts-paper) !important; } /* Small links inside cells must not wrap mid-label once the 44px target rule turns them into flex containers. */ .ts-event-page .evocard_box .evcal_evdata_cell a { white-space: nowrap; } .ts-event-page .evocard_box .evcal_evdata_cell p a { white-space: normal; } /* Custom Meta Data cells — where access notes, parking, what to bring and anything else added in EventON → Settings → Custom Meta Data land. */ .ts-event-page .evocard_box.cmf .evcal_evdata_cell { font-size: 17px; line-height: 1.62; } /* ========================================================================== 9. ACCESSIBILITY BASELINE (WCAG 2.1 AA) Not decoration. Leave these in. ========================================================================== */ /* 2.4.7 Focus Visible — ink outline on a yellow halo reads on paper, on the ink CTA bar, and on every plate. */ .ts-event-page a:focus-visible, .ts-event-page button:focus-visible, .ts-event-page [tabindex]:focus-visible { outline: 3px solid var(--ts-ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--ts-yellow); border-radius: 0; } /* 2.5.8 Target Size — 44×44 minimum, except links inside running prose and inside the fact band, where they are inline values. */ .ts-event-page .evo_sin_page a, .ts-event-page .evo_sin_page button { min-height: 44px; display: inline-flex; align-items: center; } .ts-event-page .evo_sin_page p a, .ts-event-page .evo_sin_page li a, .ts-event-page .evoet_cx a { display: inline; min-height: 0; } /* 1.4.4 Resize Text — nothing below 12.5px, nothing that cannot grow. */ .ts-event-page .evo_sin_page .evo_tz { font-size: 12.5px; } /* 2.3.3 / 2.2.2 — honour reduced motion. */ @media (prefers-reduced-motion: reduce) { .ts-event-page *, .ts-event-page *::before, .ts-event-page *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* 1.4.12 Text Spacing — user stylesheets must not break the sheet. */ .ts-event-page .evocard_box { overflow-wrap: break-word; } /* 1.4.11 Non-text Contrast in forced-colours mode. */ @media (forced-colors: active) { .ts-event-page .evo_sin_page .evcal_eventcard { background: CanvasText; } .ts-event-page .evocard_box { border: 1px solid CanvasText; } .ts-event-page h1.evosin_event_title::before { display: none; } .ts-event-page .evocard_box.learnmore .evo_clik_row { border: 3px solid ButtonText; } } /* Screen-reader-only utility used by ts-events.js */ .ts-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== 10. PRINT ========================================================================== */ @media print { .ts-event-page .evo_sin_page .evcal_eventcard { background: none; border: 1px solid #000; } .ts-event-page .evocard_box { border: 1px solid #999; break-inside: avoid; } .ts-event-page h1.evosin_event_title::before { display: none; } .ts-event-page h1.evosin_event_title { padding-left: 0; } .ts-event-page .evocard_box.learnmore .evo_clik_row { background: none; border: 2px solid #000; } .ts-event-page .evocard_box.learnmore .evo_h3, .ts-event-page .evocard_box.learnmore .evo_clik_row span { color: #000; } .ts-event-page .evocard_box.learnmore .evo_clik_row::after { content: " (" attr(href) ")"; font-size: 11px; font-weight: 400; letter-spacing: 0; } } /* fin */ /* ========================================================================== THIRD STREET EVENTS — "PAPER" v3.2 -------------------------------------------------------------------------- ONE UNBROKEN OUTLINE, NOT THREE BOXES. The page was three separately-bordered objects stacked with air between them — the title, the date/time band, and the content card. Butting three bordered boxes together is what produced the gaps: EventON put a stray `margin-right: 20px` on the band (so it never reached the right edge), the card sat 44px below it, and where borders did meet they met as two lines at slightly different subpixel positions. So the outline is drawn once now. The two outer blocks — the title and .evo_eventtop, which wraps everything below it — carry their side edges as BOX-SHADOWS rather than borders. A border would inset every child by 2px, which is what leaves internal rules stopping short of the corners; a shadow sits outside the box and costs no layout. The result is that the title, the band, the card and every horizontal rule inside them all share the same left and right edge to the pixel, and the rules run corner to corner. Also here: · THE TITLE IS BOXED, with no bottom edge — the band's top rule is the line between them. Bar mark re-ordered to yellow / cyan / magenta / black and set into the box's left gutter. · ONE HEADER SCALE, IN FIGTREE. Date, Time, Event Organized By, Program Category, Event Details, Location, Dates and the repeating-event pill are all 14px Figtree at .1em. They were running 10px, 10.5px and 11px in Korolev at three different trackings, which is what made them read as small and unrelated. Korolev stays on the VALUES — the date numeral, the times, the organizer name — so the display face leads. Two side effects worth knowing about: · Date's label used to sit ~10px lower than the other three. It was inheriting the 33px line-height of the big date numeral through its ::before. Pinned to 1.2 — all four share a baseline now. · v3.1 held labels on one line with `white-space: nowrap`. At 14px "Event Organized By" is 177px wide, so on a narrow viewport it clipped. Wrapping is allowed again, and the band breaks to 2×2 under 1000px and to one column under 560px. ========================================================================== */ /* --- 1. The outline ------------------------------------------------------ */ /* Title: side and top edges, no bottom — the band supplies that line. The blocks need an opaque background, or the shadow shows through them. */ .ts-event-page h1.evosin_event_title { border: 0 !important; background: var(--ts-paper); padding: 28px 24px 26px 64px; margin-top: 22px; box-sizing: border-box; box-shadow: calc(var(--ts-keyline) * -1) 0 0 var(--ts-rule), /* left */ var(--ts-keyline) 0 0 var(--ts-rule), /* right */ 0 calc(var(--ts-keyline) * -1) 0 var(--ts-rule); /* top */ } /* .evo_eventtop wraps the band and the content card. Side and bottom edges. */ .ts-event-page .eventon_list_event.evo_eventtop { background: var(--ts-paper); box-shadow: calc(var(--ts-keyline) * -1) 0 0 var(--ts-rule), /* left */ var(--ts-keyline) 0 0 var(--ts-rule), /* right */ 0 var(--ts-keyline) 0 var(--ts-rule); /* bottom */ } /* --- 2. The rules inside it ---------------------------------------------- */ /* The band. `margin-inline: 0` kills EventON's stray 20px; `max-width: none` stops it being capped at 100% of a container it now needs to match. */ .ts-event-page .evoet_c2.evoet_cx { border: 0 !important; border-top: var(--ts-keyline) solid var(--ts-rule) !important; border-bottom: var(--ts-keyline) solid var(--ts-rule) !important; margin: 0 !important; max-width: none !important; box-sizing: border-box; } .ts-event-page .evoet_c2.evoet_cx > * { box-sizing: border-box; } .ts-event-page .desc_trig_outter > .desc_trig { padding-block: 0 !important; } /* The card was `margin: 44px 0 0` with a 15px rounded bottom — a separate object. It's part of the same box now. */ .ts-event-page .event_description.evcal_eventcard { border: 0 !important; border-radius: 0 !important; margin: 0 !important; } /* --- 3. Title mark ------------------------------------------------------- */ /* Yellow · cyan · magenta · black. */ .ts-event-page h1.evosin_event_title::before { left: 24px; top: 28px; bottom: 26px; width: 16px; background: linear-gradient(90deg, var(--ts-yellow) 0 25%, var(--ts-cyan) 25% 50%, var(--ts-magenta) 50% 75%, var(--ts-ink) 75% 100%); } /* The loose 96px accent hairline is redundant once the title is boxed. */ .ts-event-page .evo_eventtop::before { display: none; } /* --- 4. One header scale, in Figtree ------------------------------------- */ .ts-event-page .evoet_cx .evoet_dayblock::before, .ts-event-page .evoet_cx .evoet_time_expand::before, .ts-event-page .evoet_cx .evcal_oganizer > em > i, .ts-event-page .evoet_cx .evoet_eventtypes > em > i, .ts-event-page .evo_sin_page .evo_h3, .ts-event-page .evo_sin_page .evo_h3 a, .ts-event-page .evo_sin_page .evcal_evdata_row h2, .ts-event-page .evo_sin_page .evcal_evdata_row h3, .ts-event-page .eventon_events_list .evose_repeat_header span.title, .ts-event-page .evose_repeat_header .title { font-family: var(--ts-body) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .1em !important; line-height: 1.2 !important; } .ts-event-page .evoet_cx .evoet_dayblock::before, .ts-event-page .evoet_cx .evoet_time_expand::before, .ts-event-page .evoet_cx .evcal_oganizer > em > i, .ts-event-page .evoet_cx .evoet_eventtypes > em > i { margin-bottom: 12px !important; white-space: normal !important; } /* GET TICKETS is also an .evo_h3. It stays on the display face at 15px. */ .ts-event-page .evocard_box.learnmore .evo_h3, .ts-event-page .evocard_box.learnmore .evo_clik_row span { font-family: var(--ts-display) !important; font-size: 15px !important; letter-spacing: .3em !important; } /* --- 5. Narrow viewports ------------------------------------------------- */ @media (max-width: 1000px) { .ts-event-page .evoet_c2.evoet_cx > * { flex: 1 1 calc(50% - 1px); } } @media (max-width: 560px) { .ts-event-page .evoet_c2.evoet_cx > * { flex: 1 1 100%; } .ts-event-page h1.evosin_event_title { padding: 22px 18px 20px 48px; } .ts-event-page h1.evosin_event_title::before { left: 18px; top: 22px; bottom: 20px; width: 12px; } } /* --- 6. Print ------------------------------------------------------------ */ /* Browsers drop box-shadows when background graphics are off, so print falls back to real borders. */ @media print { .ts-event-page h1.evosin_event_title { box-shadow: none; border: 1px solid #000; border-bottom: 0; padding: 14px 16px !important; } .ts-event-page .eventon_list_event.evo_eventtop { box-shadow: none; border: 1px solid #000; border-top: 0; } .ts-event-page .evoet_c2.evoet_cx { border-top: 1px solid #000 !important; border-bottom: 1px solid #000 !important; } } /* fin v3.2 */