, and a credo pull-quote is one oversized sentence. */ overflow-wrap: break-word; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; margin: 0 0 var(--space-md); letter-spacing: -0.01em; text-wrap: balance; /* A concept name is very often ONE long compound word — Swedish builds them by default ("Kulturforeningssammanslutningen") — and a display face renders it at 50-130px, so it can set a min-content width wider than the phone and scroll the whole page sideways. 'anywhere' fixes that by shrinking the intrinsic size, and it USED to be the rule here at every width. The cost was worse than the bug. 'anywhere' does not wait for a word to overflow; it lets the layout shrink the box first and then breaks the word to fit whatever is left. So a heading in a narrow grid column broke mid syllable on a 1440px desktop with room to spare — press rendered its about heading as "OM NOBELBE / RGET", which is the single most amateur thing a page can do to a customer's name. 'break-word' breaks only a word that genuinely cannot fit its line, and it is paired below with 'min-width: 0' on the layout children that were the real cause of the sideways scroll: a flex/grid item defaults to 'min-width: auto', which refuses to go below its content's min-content size. Fixing THAT is what makes the eager break unnecessary. Verified at 390px across all eight templates: no page scrolls sideways. */ overflow-wrap: break-word; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-1); } p { margin: 0 0 var(--space-md); } /* The chrome, whole. The header wordmark is the element that actually widens the top bar, and it is a link in one template and a paragraph in another, so targeting a tag name misses half of them. Everything in the header and footer is a short label or a name, where breaking beats a page that scrolls sideways - and scoping to the stamped chrome keeps 'anywhere' out of body copy, which keeps its gentler break-word baseline above. */ [data-tickivo-section="header-nav"] *, [data-tickivo-section="footer"] * { overflow-wrap: anywhere; } /* The other half of the wrap fix above. A flex or grid item is 'min-width: auto' by default, so it refuses to shrink below its content's min-content width — one long word in a heading then pushes its whole track wider than the viewport, and the page scrolls sideways no matter what the heading's overflow-wrap says. Zeroing it on the layout boxes is the actual repair; the heading rule above can then break words only when they truly do not fit, which is what keeps a venue's name whole on a desktop. */ .container > *, .section > *, .section-head { min-width: 0; } img { max-width: 100%; display: block; } a { color: inherit; } .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--space-section); } .section-head { max-width: 44rem; margin-bottom: var(--space-xl); } .section-head p { color: var(--muted); font-size: var(--step-1); margin: 0; } .eyebrow { display: block; font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-sm); } :root[data-theme="dark"] .eyebrow { filter: brightness(1.35) saturate(0.85); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: 0.85em 1.7em; border-radius: var(--radius); border: 1px solid transparent; font: 600 var(--step-0)/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); } .btn-primary { background: var(--accent); color: var(--accent-contrast); } .btn-ghost { background: transparent; color: inherit; border-color: currentColor; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* layer: motion */ /* ============================================================ Motion — plumbing. No keyframes live here: the template names them in --reveal-name / --parallax-name, and an element only moves once it carries data-reveal or data-parallax. Reveal: a timed entrance the first time a section scrolls into view — one section at a time, as a block. The components bundle marks when it is running and sets data-reveal="in" on each section as it enters — nothing is hidden without that marker, so a page with no script (or reduced motion) is simply still. Every top-level

reveals; a decorative band (aria-hidden), the chrome, and data-reveal="still" do not. Any other element carrying data-reveal reveals on its own. Only the two states the script writes are styled — "" (waiting) and "in" — so a value from any other script version, or one an author typed, is never hidden. (Measured: a tab holding a stale bundle wrote a value this stylesheet no longer knew, and every section on the page stayed at its first frame.) --reveal-name the template's keyframes --reveal-duration default 0.7s --reveal-easing default an ease-out --reveal-stagger between sections arriving together, 80ms --reveal-delay per element; the script sets it Parallax: scroll-linked, inside @supports so an unsupported browser sees the page still, with nothing hidden. ============================================================ */ @media (prefers-reduced-motion: no-preference) { html[data-reveal-js] [data-reveal=""], html[data-reveal-js] [data-reveal="in"] { animation: var(--reveal-name, none) var(--reveal-duration, 0.7s) var(--reveal-easing, cubic-bezier(0.22, 1, 0.36, 1)) var(--reveal-delay, 0s) both paused; } html[data-reveal-js] [data-reveal="in"] { animation-play-state: running; } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { [data-parallax] { animation: var(--parallax-name, none) linear both; animation-timeline: view(); animation-range: var(--parallax-range, cover 0% cover 100%); } } } /* layer: shape */ /* ============================================================ Shape — bleed, arch, diagonal, overlap, tilt. Utilities a template's markup opts into by class. The overflow-x guard they rely on is in the foundation base, on . ============================================================ */ .bleed { width: 100vw; margin-inline: calc(50% - 50vw); } .bleed-inset { width: calc(100vw - var(--gutter) * 2); margin-inline: calc(50% - 50vw + var(--gutter)); border-radius: var(--radius-lg); } /* Percentages, not viewport units: a radius relative to the element's own box is the same arch at every container width. */ .shape-arch { border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 28% 28% var(--radius-lg) var(--radius-lg); } .shape-diagonal { clip-path: polygon(0 var(--slant, 4vw), 100% 0, 100% 100%, 0 100%); } .shape-diagonal-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant, 4vw)), 0 100%); } .overlap-up { margin-block-start: calc(var(--space-2xl) * -1); position: relative; z-index: 1; } .tilt-a { rotate: -2.5deg; } .tilt-b { rotate: 1.8deg; } /* layer: media */ /* ============================================================ Media — image treatment, keyed on data-treatment on . Wrap an authored image in .media and it takes the site's treatment; the gallery takes it through ::part(image). Every treatment is a filter chain on the image — no overlays, so a caption beside the image is never touched. The filters live in the . ============================================================ */ :root { --media-contrast: 1.6; } .media { display: block; overflow: hidden; } .media > img { display: block; width: 100%; height: 100%; object-fit: cover; } /* --- duotone: shadows to --duo-dark, highlights to --duo-light --- */ [data-treatment="duotone"] .media > img, [data-treatment="duotone"] tickivo-gallery::part(image) { filter: grayscale(1) contrast(var(--media-contrast)) url(#duotone); } /* --- grain: colour kept, film grain inside the frame --------- */ [data-treatment="grain"] .media > img, [data-treatment="grain"] tickivo-gallery::part(image) { filter: contrast(1.06) saturate(0.94) url(#grain); } /* --- halftone: dithered, then two-colour ---------------------- */ [data-treatment="halftone"] .media > img, [data-treatment="halftone"] tickivo-gallery::part(image) { filter: grayscale(1) contrast(var(--media-contrast)) url(#halftone) url(#duotone); } /* layer: decor */ /* ============================================================ Decor — sizing for the authored SVG motifs. They draw in currentColor, so colour is whatever the parent's is; set it with color: var(--accent) on the motif or its container. ============================================================ */ .decor { display: inline-block; width: 1.5em; height: auto; vertical-align: middle; flex: none; } .decor-lg { width: 4rem; } .decor-xl { width: 7rem; } .decor-rule { display: block; width: 100%; max-width: 12rem; height: auto; color: var(--muted); } .decor-behind { position: absolute; inset: -0.35em -0.6em; width: auto; height: auto; z-index: -1; } /* Template: press */ :root, :root[data-theme="dark"] { --bg: #f7f4ee; --surface: #ffffff; --surface-2: #ece7dd; --text: #14110d; --muted: #57514a; --accent: #000000; --accent-contrast: #ffffff; --border: #14110d; --font-display: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; --duo-dark: var(--text); --duo-light: var(--bg); color-scheme: light; } /* press motif */ /* RHYTHM, ON SECTION ROLES RATHER THAN ON CLASS NAMES. Cadence is a property of the PAGE, so it is legible in one place. Roles rather than this template's own section classes: motifCss is emitted BEFORE the section stylesheets, so a section-class rule here loses at equal specificity, and the seed's cascade guard requires the choreography block to precede every section rule. Every band used the shared .section 112px/112px, so all four boundaries measured 240-278px of empty bone and nothing on the page was grouped with anything else. The programme and its ticket box now close up into one spread; the full measure is kept only where the surface colour changes. */ [data-tickivo-section="events"] { padding-bottom: var(--space-xl); } /* Both sides, not only the top: the bottom kept the shared 112px, which put 222px of empty bone between the checkout button and the about rule under it — the one boundary on the page still set at the default. */ [data-tickivo-section="tickets"] { padding-block: var(--space-xl); } [data-tickivo-section="about"], [data-tickivo-section="gallery"], [data-tickivo-section="faq"] { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); } :root, :root[data-theme="dark"] { --shadow-1: none; --shadow-2: none; } h1, h2, h3 { text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95; font-weight: 600; } .eyebrow { letter-spacing: 0.16em; } .btn { border-radius: 0; text-transform: uppercase; letter-spacing: 0.08em; border-width: 2px; } .btn:hover { transform: none; box-shadow: none; } .btn-ghost { border-color: var(--text); } .section-head { border-top: 3px solid var(--text); padding-top: var(--space-sm); } /* press choreography: snap */ @media (prefers-reduced-motion: no-preference) { @keyframes press-snap { from { scale: 1.015; opacity: 0.6; } to { scale: 1; opacity: 1; } } :root { --reveal-name: press-snap; --reveal-duration: 0.35s; --reveal-easing: cubic-bezier(0.2, 0.9, 0.2, 1); } } .s-press-header { border-bottom: 3px solid var(--text); background: var(--bg); } /* WRAPS ON A PHONE. The masthead is a flex row of wordmark + account chip + CTA; at 390px those three fight over 342px, the wordmark loses, and the foundation's chrome rule (overflow-wrap:anywhere, which exists so a long compound name cannot scroll the page sideways) then breaks the venue name mid-word. Letting the row wrap gives the wordmark its own line, which is what a masthead wants at that width anyway. */ .s-press-header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); padding-block: var(--space-sm); } .s-press-wordmark { flex: 1 0 100%; } @media (min-width: 560px) { .s-press-wordmark { flex: 0 1 auto; } } /* Same reason as the footer wordmark below. */ .s-press-wordmark { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 4.2vw, var(--step-1)); text-transform: uppercase; letter-spacing: -0.03em; text-decoration: none; margin-right: auto; } .s-press-wordmark img { height: auto; width: clamp(9rem, 22vw, 13rem); max-width: none; display: block; } .s-press-nav { display: none; gap: var(--space-lg); } .s-press-nav a { font-size: var(--step--1); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; } .s-press-nav a:hover { color: var(--accent); } .s-press-account { display: inline-flex; font-size: var(--step--1); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .s-press-account:hover { color: var(--accent); } .s-press-header-cta { padding: 0.5em 1.2em; font-size: var(--step--1); } @media (min-width: 860px) { .s-press-nav { display: flex; } } .s-press-hero { padding-block: var(--space-xl) var(--space-2xl); } .s-press-hero-title { /* Sized so an ordinary venue name (~13 characters in this very wide face) lands on ONE line at desktop. The first version ran to 15vw and split "NOBELBE / RGET" mid-syllable, which reads as a bug rather than a poster. hyphens:auto does not rescue it (Chrome finds no hyphenation point in a proper noun) and overflow-wrap:anywhere makes it worse, because that value participates in min-content sizing and breaks greedily. So the fix is the type size, with break-word left only as a backstop for a pathological name. */ font-size: clamp(2.25rem, 7vw, 6rem); font-weight: 600; line-height: 0.84; margin-bottom: var(--space-lg); overflow-wrap: break-word; } .s-press-hero-band { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); border-top: 3px solid var(--text); padding-top: var(--space-lg); } .s-press-hero-subtitle { font-size: clamp(1.05rem, 0.85rem + 1vw, 1.6rem); max-width: 44ch; margin: 0; } .s-countdown-band { background: var(--accent); color: var(--accent-contrast); border-block: 3px solid var(--text); padding-block: var(--space-lg); --tickivo-surface: transparent; --tickivo-text: var(--accent-contrast); } .s-countdown-band-row { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); text-align: center; } .s-countdown-band-heading { font-size: clamp(1.15rem, 0.9rem + 1.2vw, 1.9rem); text-transform: uppercase; letter-spacing: -0.02em; margin: 0; } .s-countdown-band-cta { background: var(--accent-contrast); color: var(--accent); border-color: var(--accent-contrast); } @media (min-width: 900px) { .s-countdown-band-row { flex-direction: row; justify-content: space-between; text-align: left; } } .s-press-events tickivo-events::part(list) { display: block; border-top: 3px solid var(--text); counter-reset: eventrow; } .s-press-events tickivo-events::part(card) { background: transparent; border-radius: 0; border-bottom: 2px solid var(--text); padding-block: var(--space-xl); padding-inline-start: 2.5rem; position: relative; counter-increment: eventrow; transition: background-color 0.15s ease; } .s-press-events tickivo-events::part(card):hover, .s-press-events tickivo-events::part(card):focus-within { background: var(--surface-2); } .s-press-events tickivo-events::part(card)::before { content: counter(eventrow, decimal-leading-zero); position: absolute; left: 0; top: calc(var(--space-xl) + 0.15em); font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); letter-spacing: 0.02em; color: var(--muted); } .s-press-events tickivo-events::part(image) { display: none; } /* A CLASSIFIED ROW, NOT A LIST. The date sat above the title in a single column and the title was set at --step-3 - the same size as the "KOMMANDE EVENT" label above it - so the section's label outranked the section's subject and the ink stopped halfway across a 1256px row. A classified sets the date in a rail and runs the headline beside it at headline size. */ .s-press-events tickivo-events::part(body) { display: flex; flex-direction: column; gap: var(--space-xs); padding: 0; margin: 0; } .s-press-events tickivo-events::part(meta) { order: 1; font-size: var(--step--1); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); opacity: 1; margin: 0; padding: 0; } .s-press-events tickivo-events::part(title) { order: 2; font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5.5vw, 4.75rem); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.03em; margin: 0; padding: 0; } .s-press-events tickivo-events::part(title)::after { content: "Köp biljetter \2192"; display: block; margin-top: var(--space-sm); font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } @media (min-width: 760px) { .s-press-events tickivo-events::part(body) { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--space-lg); align-items: start; } .s-press-events tickivo-events::part(meta) { grid-column: 1; grid-row: 1; } .s-press-events tickivo-events::part(title) { grid-column: 2; grid-row: 1; } .s-press-events tickivo-events::part(title)::after { grid-column: 2; } } /* The label steps back so the nights are the biggest words in the section. */ .s-press-events .section-head h2 { font-size: clamp(1.15rem, 0.9rem + 1.2vw, 1.9rem); } .s-press-footer { border-top: 3px solid var(--text); padding-block: var(--space-xl); } /* The chrome carries overflow-wrap:anywhere from the foundation (a long compound name must not scroll a phone sideways), which means a wordmark that does not FIT gets broken mid-word. Sizing it so it fits is the fix: at 8vw a thirteen-character name still sits on one line at 390px. */ .s-press-footer-wordmark { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 8vw, 6rem); line-height: 0.85; text-transform: uppercase; letter-spacing: -0.04em; margin: 0 0 var(--space-lg); overflow-wrap: break-word; } .s-press-footer-band { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); justify-content: space-between; border-top: 1px solid var(--text); padding-top: var(--space-md); } .s-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-lg); } .s-footer-links a, .s-press-footer-legal { font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-decoration: none; margin: 0; } .s-footer-links a:hover { color: var(--accent); } .s-press-footer-address { font-style: normal; font-size: var(--step--1); letter-spacing: 0.02em; line-height: 1.6; color: var(--muted); margin: 0; } .s-press-footer-address a { color: inherit; text-decoration: underline; } .s-press-footer-address a:hover { color: var(--accent); } .s-press-footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-sm); } .s-press-footer-social { display: flex; gap: var(--space-sm); } .s-press-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; color: var(--text); border: 2px solid var(--text); line-height: 0; } .s-press-footer-social a:hover { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); } .s-press-powered-by { margin: 0; padding: var(--space-2xs) 0; text-align: center; font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--bg); } .s-press-powered-by a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } .s-press-powered-by a:hover { color: var(--accent); } /* Width lives on the FAQ list itself, not on a wrapper around the heading too: the wrapper used to cap the whole block — heading included — to 48rem, so its rule sat visibly narrower than every other section's heading rule on the same page. The heading now uses .section-head's own measure like every other section; only the question/answer list itself reads at a narrower, comfortable width. */ .s-press-faq tickivo-faq { display: block; max-width: 48rem; } .s-press-faq tickivo-faq::part(item) { border-bottom: 1px solid var(--text); } .s-press-faq tickivo-faq::part(question) { font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; /* Wider than --step--1's own range (0.83-0.94rem): the component's shadow DOM has no size token of its own, so without an explicit, visibly fluid size here the question text sat still while the rest of the page scaled around it. */ font-size: clamp(0.85rem, 0.75rem + 0.5vw, 1.05rem); } .s-press-faq tickivo-faq::part(answer) { color: var(--muted); /* Same reason: the part has no font-size by default, so it never followed the page's fluid scale until given one explicitly. */ font-size: clamp(0.95rem, 0.88rem + 0.4vw, 1.1rem); }