/* Theme Name: Joyride Theme URI: https://lionmusicals.dk/joyride Description: Child theme til Lion Musicals — JOYRIDE. Kun design (CSS + hooks); al data og funktion ligger i parent-temaet. Author: Lion Musicals Author URI: https://lionmusicals.dk Template: lionmusicals Version: 0.1.0 Text Domain: joyride */ /* ========================================================================== JOYRIDE — designlag oven på lionmusicals Arbejdsdeling (samme som Titanique og Ternet Ninja): parent (lionmusicals) = data, indstillinger, tidsstyring, admin, templates child (joyride) = udseende: farver, fonte, hero-komposition, pynt Alle klassenavne der starter med .lm- kommer fra parent-temaet. Dem overskriver vi her. Alt der starter med .jr- er vores eget. Rækkefølge i filen: 1. Brand-variabler (farver, fonte) ← START HER 2. Typografi 3. Header + topbar 4. Hero (forsiden) 5. Undersider (page-hero, sektioner) 6. Køb billet (spilledatoer, VIP, priser, andre byer) 7. Splash 8. Presale 9. Presse 10. Footer + nyhedsbrev 11. Responsivt ========================================================================== */ /* ========================================================================== 1. BRAND-VARIABLER Udfyld disse først. Resten af filen bruger dem. !important på fontene er nødvendigt: parent-temaet skyder sine egne --lm-font-* ind som inline CSS EFTER denne fil (fra admin-indstillingerne), så uden !important taber vi. Farverne styres bedst under Generelt i admin; variablerne her er til alt det der ligger uden for admin. ========================================================================== */ :root { /* Trade Gothic Next LT Pro fra Adobe Fonts — samme familie som keyvisualet. Kittet hentes i functions.php. !important fordi parent-temaet skriver sine egne --lm-font-* ind som inline CSS efter denne fil. */ /* Compressed er et smalt snit: ved 16px bliver linjerne korte og teksten lille at læse. Grundstørrelsen løftes til 19px for hele sitet — alle rem-baserede mål følger med. */ --lm-font-size-base: 19px !important; /* Typekit-kittet ign1mur indeholder nu Trade Gothic Next LT Pro COMPRESSED — det snit plakaten er sat i. Den normale bredde er ikke længere i kittet, så hele sitet kører compressed. Barlow Condensed er nærmeste frie erstatning, hvis kittet ikke hentes. */ --lm-font-headline: "trade-gothic-next-compressed", "Barlow Condensed", sans-serif !important; --lm-font-body: "trade-gothic-next-compressed", "Barlow Condensed", sans-serif !important; /* Overskrifter og bannere står i Heavy, brødtekst i Regular. */ --jr-weight-headline: 800; --jr-weight-body: 400; /* Brandfarver — placeholder-værdier. Skift til JOYRIDEs palette. */ --jr-primary: #1a1a2e; /* mørk grundfarve (baggrunde, tekst på lyst) */ --jr-accent: #ff3c6e; /* signalfarve (knapper, fremhævninger) */ --jr-accent-soft: rgba(255, 60, 110, 0.16); --jr-light: #fdfbf7; /* lys flade (kort, sektioner) */ --jr-text: #14141f; --jr-text-muted: rgba(20, 20, 31, 0.68); /* Kanter — Titanique kører helt skarpe hjørner, Ternet Ninja runde. Vælg for JOYRIDE her, så det er ét sted. */ --jr-radius: 0px; /* Logo-gradienten: rød → orange → grøn. Bruges på knapper og kanter. */ --jr-gradient: linear-gradient(100deg, #e4002b 0%, #ff6a00 52%, #7fd21c 100%); --jr-red: #e4002b; --jr-green: #6cc31a; --jr-yellow: #ffd23f; } /* Skarpe hjørner overalt — logoet har ingen runding. */ *, *::before, *::after { border-radius: 0 !important; } /* ========================================================================== 2. TYPOGRAFI ========================================================================== */ body { font-family: var(--lm-font-body); color: var(--jr-text); /* Pastellen fra keyvisualet løber gennem hele siden, så sektionerne hænger sammen i stedet for at stå som separate blokke. */ background: linear-gradient(115deg, #f7dcd4 0%, #fbf0e3 38%, #fdfbf3 68%, #e9f4d8 100%) fixed; } .lm-section { background: transparent; /* Pynt (balloner) må gerne stikke op over en sektion, men aldrig ud i siden — det gav vandret scroll på køb billet-siden. */ overflow-x: clip; } h1, h2, h3, h4, h5, h6, [class*="__title"], [class*="__heading"] { font-family: var(--lm-font-headline); } /* Knapper i logoets gradient. Hvid tekst med en anelse skygge, så den holder på både rød og grøn. */ .lm-btn-primary, .lm-btn.lm-btn-primary, .lm-header__cta, .lm-nav__cta, .lm-newsletter__form button, .lm-newsletter__form .lm-btn { background: var(--jr-gradient) !important; background-size: 200% 100% !important; background-position: 0% 50% !important; border: 0 !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: background-position 0.4s ease, transform 0.2s ease, box-shadow 0.2s ease; } .lm-btn-primary:hover, .lm-header__cta:hover, .lm-nav__cta:hover { background-position: 100% 50% !important; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(228, 0, 43, 0.28); } .lm-btn-outline, .lm-btn.lm-btn-outline { border: 2px solid var(--jr-text); color: var(--jr-text); background: transparent; } .lm-btn-outline:hover { background: var(--jr-text); color: #fff; } /* Trade Gothic har rigtige vægte, så overskrifter skal ikke syntetisk fed. */ h1, h2, h3, h4, h5, h6, .lm-section__title, .lm-hero__title { font-weight: var(--jr-weight-headline); letter-spacing: 0.005em; } body, p, li, td { font-weight: var(--jr-weight-body); } /* ========================================================================== 3. HEADER + TOPBAR Parent: .lm-topbar, .lm-header, .lm-nav__link, .lm-header__cta ========================================================================== */ .lm-header__logo img { height: 64px; } /* Topbar som plakatens top: løvemærket og en diskret, spatieret linje på pastellen — ikke en rød bjælke. */ .lm-topbar { background: transparent !important; } .lm-topbar__text { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; line-height: 1.1; font-family: var(--lm-font-body); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: #5a5650 !important; padding: 0.85rem 0 0.75rem !important; height: auto !important; min-height: 0 !important; } /* Løvemærket står over teksten — samme opstilling som øverst på plakaten. */ .lm-topbar__text::before { content: ''; width: 32px; height: 32px; flex: 0 0 auto; background: url('../lionmusicals/lion_brand.svg') center / contain no-repeat; opacity: 0.78; } /* Topbarens højde styres nu af parent-temaets indstilling "Topbar ruller væk" — den forskyder hele headeren opad, indtil kun menulinjen står tilbage. Her skal kun selve topbarens udseende sættes. */ /* Headeren er cremefarvet som plakatens papir — ikke sort. Logoets "The Musical" er sat i sort tusch, og den forsvinder på mørk bund. */ .lm-header, .lm-header.is-scrolled, .lm-header--sticky.is-scrolled { background: rgba(253, 248, 238, 0.96) !important; backdrop-filter: blur(6px); box-shadow: 0 2px 0 0 var(--jr-red), 0 10px 26px rgba(120, 60, 30, 0.1); } /* Over heroen skal den være helt væk — plakaten skal stå ren. Men kun øverst: så snart man scroller, kommer papiret frem under menuen, ellers står den mørke tekst oven i bilens grill. */ .lm-header--transparent:not(.is-scrolled):not(.jr-header--solid) { background: transparent !important; backdrop-filter: none; box-shadow: none; } .lm-nav__link, .lm-header__menu-label, .lm-burger__line { color: var(--jr-text) !important; } .lm-burger__line { background: var(--jr-text) !important; } /* Parent-temaets MENU-mærkat står i 10,4px. Løftet til 11,5px, så den ikke er sidens mindste tekst. */ .lm-header__menu-label { font-size: 11.5px !important; letter-spacing: 0.14em; } /* --- Mobilheaderen --------------------------------------------------------- Ordet "Menu" ved siden af burgeren siger ingenting — ikonet er forstået. Væk med det, så der bliver plads, og burgeren får logoets farver i stedet for hvid, som forsvandt på det lyse papir. */ @media (max-width: 991px) { .lm-header__menu-label { display: none !important; } .lm-menu-toggle span { background: var(--jr-gradient) !important; background-size: 100% 300% !important; height: 3px; border-radius: 0; } .lm-menu-toggle span:nth-child(1) { background-position: 50% 0% !important; } .lm-menu-toggle span:nth-child(2) { background-position: 50% 50% !important; } .lm-menu-toggle span:nth-child(3) { background-position: 50% 100% !important; } /* Logoet fyldte 64px i højden på en telefon — for meget, når headeren også skal rumme billetknappen. */ .lm-header__logo-img { height: 44px !important; width: auto !important; } } @media (max-width: 480px) { .lm-header__logo-img { height: 38px !important; } } .lm-nav__link:hover { color: var(--jr-red) !important; } /* --- Knapper --------------------------------------------------------------- Alle handlingsknapper bærer logoets gradient: rød -> orange -> grøn. Den er dobbelt så bred som knappen og glider langsomt frem og tilbage, så farven lever. Ovenpå ligger et lag støj, der giver den samme grynede trykflade som bogstaverne i JOYRIDE-logoet. Støjen er en indlejret SVG-turbulens — ingen ekstra fil at hente. */ :root { --jr-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } .lm-btn, .lm-btn-primary, .lm-nav__cta, .lm-header__cta, .lm-header__mobile-cta, .jr-kv-band__btn { position: relative; isolation: isolate; overflow: hidden; font-family: var(--lm-font-headline); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border: 0; } /* Knappen i heroens røde bånd bærer samme gradient som alle andre — og rød på rød forsvinder. Den får derfor en hvid ring, så den altid har en kant mod båndet uanset hvor gradienten står i sit forløb, plus det løft der ellers først kom ved hover. */ .jr-kv-band__btn { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 10px 24px rgba(0, 0, 0, 0.28) !important; filter: brightness(1.06) saturate(1.05); } .jr-kv-band__btn:hover { box-shadow: 0 0 0 3px #fff, 0 14px 30px rgba(0, 0, 0, 0.34) !important; filter: brightness(1.12) saturate(1.1); } .lm-btn-primary, .lm-nav__cta, .lm-header__cta, .lm-header__mobile-cta, .jr-kv-band__btn, .lm-btn--gradient { background: var(--jr-gradient) !important; background-size: 220% 100% !important; color: #fff !important; animation: jr-gradient-drift 9s ease-in-out infinite alternate; } /* Grain-laget. pointer-events:none så det ikke stjæler klikket, og mix-blend-mode:overlay så det ligger i farven i stedet for oven på den. */ .lm-btn-primary::after, .lm-nav__cta::after, .lm-header__cta::after, .lm-header__mobile-cta::after, .jr-kv-band__btn::after, .lm-btn--gradient::after { content: ''; position: absolute; inset: -50%; z-index: -1; background-image: var(--jr-grain); mix-blend-mode: overlay; opacity: 0.4; pointer-events: none; animation: jr-grain-shift 0.9s steps(3) infinite; } @keyframes jr-gradient-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } /* Kornene hopper en anelse, som i et filmisk grain. Meget små spring — bliver de større, flimrer knappen. */ @keyframes jr-grain-shift { 0% { transform: translate(0, 0); } 33% { transform: translate(-3px, 2px); } 66% { transform: translate(2px, -3px); } 100% { transform: translate(0, 0); } } /* Hover må ikke røre background-position. Den egenskab styres af animationen, og en animation slår altid en transition. Resultatet var, at knapper med animation ikke reagerede, mens knapper uden sprang i ét hug. Løftet og lysstyrken kan derimod animeres frit. */ .lm-btn-primary:hover, .lm-nav__cta:hover, .lm-header__cta:hover, .lm-header__mobile-cta:hover, .lm-date-card__btn--available:hover, .jr-kv-band__btn:hover, .lm-btn--gradient:hover { transform: translateY(-2px); filter: brightness(1.08) saturate(1.06); } .lm-btn, .lm-btn-primary, .lm-nav__cta, .lm-header__cta, .lm-date-card__btn, .jr-kv-band__btn { transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease; } /* Sekundære knapper: samme gradient, men kun som kant. */ .lm-btn-outline, .lm-btn-secondary { background: transparent !important; color: var(--jr-text) !important; border: 3px solid transparent !important; border-image: var(--jr-gradient) 1 !important; } .lm-btn-outline:hover, .lm-btn-secondary:hover { background: var(--jr-gradient) !important; color: #fff !important; } /* Ikonet skal stå ens i alle knapper. */ .lm-btn__icon { display: inline-flex; align-items: center; margin-right: 0.5em; } .lm-btn__icon svg { width: 1.05em; height: 1.05em; display: block; } @media (prefers-reduced-motion: reduce) { .lm-btn-primary, .lm-nav__cta, .lm-header__cta, .lm-header__mobile-cta, .jr-kv-band__btn { animation: none; } .lm-btn-primary::after, .lm-nav__cta::after, .lm-header__cta::after, .lm-header__mobile-cta::after, .jr-kv-band__btn::after { animation: none; } } /* --- Overskrifter og eyebrows ---------------------------------------------- Designet er sat i versaler hele vejen igennem — det er udtrykket i keyvisualet, hvor alt fra bannere til bundlinje står med store bogstaver. */ .lm-section__heading, .lm-page-hero__title, .lm-hero__title, h1, h2, h3, h4 { text-transform: uppercase; } /* Overskriftsblokken stables lodret. Både eyebrow'en og overskriften krymper om deres egen tekst (den ene for at være en stribe, den anden for at gradienten kan spænde over ordet), og to skrumpede elementer ville ellers lande på samme linje. Parent-temaet centrerer alle sektionsoverskrifter. */ .lm-section__headings, .lm-section__heading-group { display: flex; flex-direction: column; align-items: center; } /* Eyebrow'en pakkes ind i en stribe, ligesom teksterne på kølerhjelmen: firkantet, let drejet, med skygge under bogstaverne. */ .lm-section__subheading, .lm-section__subheader, .lm-image-media__subheading, .jr-presale-hero__eyebrow { display: inline-block; width: fit-content; margin-bottom: 0.9rem; padding: 0.32em 0.9em; background: var(--jr-red); color: #fff !important; font-family: var(--lm-font-headline); font-weight: 800; font-size: clamp(0.78rem, 0.35vw + 0.68rem, 0.95rem); letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); transform: rotate(-1.6deg); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16); } /* Hver anden stribe er grøn og hælder den anden vej, så to sektioner i træk ikke ser stemplede ud. */ .lm-section:nth-of-type(even) .lm-section__subheading, .lm-section:nth-of-type(even) .lm-section__subheader { background: var(--jr-green); transform: rotate(1.4deg); } /* På mesh-sektionerne skifter baggrundsfarven hele tiden. Der står striben altid rød med en mørk kant, så den kan læses uanset hvad der driver forbi bagved. */ /* Striben holdes rød på mesh-fladerne, hvor baggrunden hele tiden skifter farve. Den mørke 2px-ring, der før stod her, skulle løfte striben fri af en mættet mesh — men efter at meshen er dæmpet på kort og i credits-kassen læste den bare som en grå kant. Kun slagskyggen er tilbage, som på alle andre striber. */ .jr-mesh .lm-section__subheading, .jr-mesh .lm-section__subheader { background: var(--jr-red); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); } /* Midterstillede sektioner skal have striben centreret, ikke i venstre kant. */ .jr-center .lm-section__subheading, .lm-section__headings--center .lm-section__subheading, .lm-section--center .lm-section__subheading { margin-left: auto; margin-right: auto; } /* Overskrifter på det sandfarvede papir får logoets gradient. Ikke på mesh- sektionerne — der er baggrunden allerede fuld af farve, og teksten skal kunne læses. */ /* Nogle moduler sætter deres underoverskrifter med værktøjsklasser (text-center, mb-4) i stedet for .lm-section__heading, så h2 tages med. Kort har deres egne titler og skal ikke have gradient — de står på hvid bund, hvor den bliver for lys. */ .lm-section .lm-section__heading, .lm-section .lm-image-media__heading, .lm-section h2:not([class*="card"]):not([class*="__title"]) { /* background-clip:text klipper i ELEMENTETS baggrund, ikke i ordets. Er overskriften et blokelement i fuld containerbredde, rammer et kort ord kun midten af gradienten og bliver ensfarvet orange. inline-block krymper kassen om teksten — og lader stadig sektionens text-align bestemme, om den står i midten eller til venstre. */ display: inline-block; max-width: 100%; background: var(--jr-gradient); /* Gradienten fylder præcis overskriften, så hele rød-orange-grøn ses også i et kort ord som "Spilledatoer". Den står stille: enhver bevægelse i bredden skubber grøn ud af korte overskrifter, og så ligner de ikke længere logoet. Det levende ligger i knapperne. */ background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* ========================================================================== 4. HERO (forsiden) — keyvisualet Lagene lægges ind i functions.php (lm_hero_after_background). Her styres hvor de sidder. Heroen fylder præcis én skærm, så logo, bil OG knapper altid er over folden — på mobil som på 2560px. z-index: baggrund 0 · balloner 1 · lockup 2 · bil 3 · bannere 4 · bundbånd 5 · splash 15 ========================================================================== */ /* Heroen er kundens keyvisual, gengivet 1:1. * * Målene er læst ud af InDesign-opsætningen i materialemappen, hvor plakaten * er en staaende A3 (842 x 1191 pt, forhold 0,7071). Alt er udtrykt i forhold * til ÉN størrelse — bilens bredde, --jr-car — fordi bilen er det bredeste * element og dermed sætter skalaen: * * bilens kasse = 123,99% af plakatens bredde * plakathøjde = 1,1416 x bilens bredde * logoet = 82,16% af bilens bredde (var 129% før — derfor * forsvandt "The Musical" bag kvinden i grønt) * * Bredden begrænses af begge led: enten fylder plakaten skærmens bredde * (telefon, tablet på højkant — der bliver den 1:1), eller også af højden * minus headeren (bærbar, bred skærm). Headeren trækkes fra, fordi menuen * ellers lander oven i "Baseret på sangene af ROXETTE". */ .jr-hero.lm-hero { --jr-hdr: 9.5rem; --jr-car: min(123.9vw, calc((100dvh - var(--jr-hdr)) * 0.876)); --jr-page: calc(var(--jr-car) * 0.8072); height: calc(var(--jr-hdr) + var(--jr-car) * 1.1416); min-height: 480px; max-height: 1600px; align-items: flex-start; overflow: hidden; background: #fdf6ea; } /* Creme-papiret fra keyvisualet. Ingen bevægelse — det er en plakat. */ .jr-hero .lm-hero__background { z-index: 0; } .jr-hero .lm-hero__background img { object-position: 50% 40%; } /* Papiret er lyst, så parentens mørke overlay skal væk. En svag lysning i midten løfter logoet fri af teksturen. */ .jr-hero .lm-hero__overlay { display: block; z-index: 1; background: radial-gradient(ellipse 70% 55% at 50% 34%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%); } /* Parentens indhold er slået fra i admin — kun den skjulte H1 er tilbage. */ /* Parentens hero-indhold er tomt (logo, titel og knapper er slået fra i admin), men det skal beholde sin plads og størrelse: temaindstillingen "skjul logo over hero" hænger et IntersectionObserver op på netop .lm-hero__logo-wrap for at afgøre, hvornår header-logoet skal frem. Derfor gennemsigtigt frem for clippet. */ .jr-hero .lm-hero__content { position: absolute; left: 0; right: 0; top: 0; height: 100%; opacity: 0; pointer-events: none; padding: 0; margin: 0; } /* Målet for observeren. Skal ligge klar af headeren (den måler med rootMargin -80px), ellers regnes den som forbi allerede ved indlæsning. */ .jr-hero .lm-hero__logo-wrap { display: block; height: 100%; margin: 0; } .jr-hero .lm-hero__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* --- Ballonerne bag bilen. Position og bredde sættes inline pr. ballon i functions.php; her er kun det fælles udtryk og svævet. --- */ /* --- Scenen. Den ER bilens kasse, så alle børn kan placeres i procent direkte fra InDesign-målene: x og bredde i % af scenens bredde, y og højde i % af dens højde. Vandret står bilen 2,13% af sin egen bredde til venstre for plakatens midte — det er sådan den er sat op. --- */ .jr-kv { position: absolute; z-index: 2; left: 50%; top: calc(var(--jr-hdr) + var(--jr-car) * 0.2791); width: var(--jr-car); aspect-ratio: 1800 / 1566; transform: translateX(-50%) translateX(-2.13%); container-type: inline-size; pointer-events: none; } .jr-kv-balloons { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* Ballonerne ude i siderne. Kun på skærme hvor plakaten er smallere end viewporten — på højkant er der ingen tomme sider at fylde. */ .jr-kv-outer { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; display: none; } @media (min-aspect-ratio: 4/5) { .jr-kv-outer { display: block; } } .jr-kv-balloon--outer { opacity: 0.92; } /* Ballonerne er placeret efter keyvisualets fire grupper — se jr_hero_balloons() i functions.php. De ligger bag både logo og bil. */ /* Hver ballon sidder i en indpakning. Indpakningen holder placeringen og flyttes af GSAP; billedet indeni svæver med CSS. Deler de to samme element, overskriver GSAP svævningen. */ .jr-b { position: absolute; display: block; pointer-events: none; will-change: transform; } .jr-b > img { display: block; width: 100%; height: auto; } .jr-kv-balloon { position: static; width: 100%; height: auto; filter: drop-shadow(0 14px 26px rgba(120, 60, 30, 0.18)); animation: jr-float-kv 9s ease-in-out infinite; will-change: transform; } /* Hver ballon svæver omkring sin egen grundhældning og kan være spejlvendt, så den samme ballon ikke går genkendeligt igen. */ @keyframes jr-float-kv { 0% { transform: translateY(0) rotate(calc(var(--jr-rot, 0deg) - 2deg)) scaleX(var(--jr-flip, 1)); } 50% { transform: translateY(-1.4%) rotate(calc(var(--jr-rot, 0deg) + 2deg)) scaleX(var(--jr-flip, 1)); } 100% { transform: translateY(0) rotate(calc(var(--jr-rot, 0deg) - 2deg)) scaleX(var(--jr-flip, 1)); } } @keyframes jr-float { 0% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(-18px) rotate(2.5deg); } 100% { transform: translateY(0) rotate(-2.5deg); } } /* Logoet: 82,16% af bilens bredde, 9,29% inde fra bilens venstrekant og 38,42% af scenehøjden over dens overkant. Det er hele grunden til at "The Musical" nu ligger til højre for kvinden i rødt og over hende i grønt — præcis som på plakaten. */ .jr-kv-lockup { position: absolute; z-index: 2; left: 9.29%; top: -38.42%; width: 82.16%; /* PNG'erne er eksporteret uroterede. I InDesign-filen ligger logolaget på -5° og bil-laget på -4° — begge dele lægges på her. */ transform: rotate(-5deg); filter: drop-shadow(0 12px 30px rgba(120, 60, 30, 0.16)); } .jr-kv-lockup img { display: block; width: 100%; height: auto; } .jr-car.jr-kv-car { position: absolute; z-index: 3; inset: 0; width: 100%; margin: 0; transform: rotate(-4deg); } .jr-kv-car .jr-car__img { display: block; width: 100%; height: auto; } /* --- Bannerne. Hver stribe har sin egen venstre- og højrekant fra InDesign-filen; det er forskydningen mellem dem der giver rytmen. De overlapper hinanden lodret, og den sidste ligger lige og øverst. --- */ .jr-kv-banners { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .jr-banner { position: absolute; margin: 0; display: flex; align-items: center; justify-content: center; padding: 0.46em 0.7em; white-space: nowrap; font-family: var(--lm-font-headline); font-weight: 700; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); z-index: calc(var(--jr-i, 0) + 1); } /* Hældningerne følger plakaten: ingen to nabostriber står ens, og den nederste står helt lige. Baggrunden har en anelse gennemsigtighed, så bilens lak og krom skinner svagt igennem. */ /* Hver stribes rotation staar inline; den kommer fra InDesign-filen (-0,5° / -4° / -1° / -2° / +1°). */ .jr-banner--red { background: rgba(228, 0, 43, 0.9); } .jr-banner--green { background: rgba(108, 195, 26, 0.88); } /* Teksten trykkes vandret sammen for at efterligne plakatens Compressed-snit. Se jr_hero_banners() i functions.php. */ .jr-banner > span { display: block; /* Sammentrykningen er ikke længere nødvendig: kittet leverer nu det rigtige Compressed-snit, som plakaten er sat i. Beholdt som variabel, hvis en enkelt stribe skal justeres. */ transform: scaleX(var(--jr-squeeze, 1)); transform-origin: center; white-space: nowrap; } .jr-banner strong { font-size: 1.42em; font-weight: 800; margin-left: 0.18em; } .jr-banner__roxette { font-size: 1.85em; letter-spacing: 0.03em; } .jr-banner em { font-style: normal; color: var(--jr-yellow); } /* Det røde bånd starter 90,95% nede på plakaten. Det får lov at vokse, hvis teksten og knappen kræver mere — så dækker det bare lidt mere af bilens underkant, hvilket plakaten også gør. */ .jr-kv-band { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; min-height: calc(var(--jr-car) * 0.1033); padding: 1.4dvh 0 1.8dvh; color: #fff; background: var(--jr-red); } /* Indholdet følger sidens container, så tekst og knap ikke bliver skubbet ud i hver sin yderkant på en bred skærm. */ .jr-kv-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .jr-kv-band__text { display: flex; flex-direction: column; line-height: 1; font-family: var(--lm-font-headline); text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.22); } .jr-kv-band__venue { font-weight: 800; font-size: clamp(1.2rem, 2.2dvh + 0.5vw, 2.5rem); letter-spacing: 0.04em; } .jr-kv-band__date { font-weight: 700; font-size: clamp(0.88rem, 1.4dvh + 0.3vw, 1.45rem); letter-spacing: 0.1em; margin-top: 0.3em; color: var(--jr-yellow); } .jr-kv-band__btn { font-family: var(--lm-font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(0.9rem, 1.4dvh + 0.25vw, 1.2rem); padding: 0.85em 1.9em; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25); } .jr-kv-band__btn--ghost { background: #fff !important; color: var(--jr-red) !important; border: 0; text-shadow: none; } /* Splash på heroen — parent styrer OM, vi styrer HVOR. Den skal stå lige til højre for logoet og over ballonklyngen ved bilen. Grundværdierne her gælder stående skærme; på liggende regnes placeringen ud af selve plakaten længere nede. */ .jr-hero__splash { position: absolute; top: 49dvh; left: 84%; width: clamp(112px, 16.5dvh, 190px); height: auto; z-index: 15; /* top/left peger på mærkatets MIDTE, ikke dets højre hjørne — derfor centreringen her. Den skal gentages i hvert keyframe: en animation på transform erstatter hele værdien, så en keyframe uden translate ville smide mærkatet en halv bredde til højre. Det var præcis det, der skar det af skærmkanten på telefon. */ transform: translate(-50%, -50%) rotate(-8deg); filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.28)); animation: jr-hero-splash-sway 5.5s ease-in-out infinite; } @keyframes jr-hero-splash-sway { 0% { transform: translate(-50%, -50%) rotate(-8deg); } 50% { transform: translate(-50%, calc(-50% - 6px)) rotate(-2deg); } 100% { transform: translate(-50%, -50%) rotate(-8deg); } } /* På liggende skærme måles mærkatet mod PLAKATEN, ikke mod viewporten. * * Det er hele pointen: plakatens bredde er --jr-car, som følger skærmens * HØJDE. På en bred, lav skærm står plakaten som en smal søjle midt på — og * en procent af viewporten sendte derfor mærkatet langt ud i det tomme papir, * væk fra logoet. Nu bruger vi scenens eget koordinatsystem, det samme som * ballonerne og bannerne (se .jr-kv): * * scenen = bilens kasse, bredde --jr-car, højde 0,87 x bredden * scenen står midt på, forskudt 2,13% af sin bredde til venstre * logoet = 9,29% .. 91,45% af scenens bredde * ballonerne til højre begynder 24% nede i scenen * * Mærkatet lægges derfor ved 92% af scenens bredde (lige uden for logoet) og * 8% OVER scenens overkant, så det står i højde med „The Musical“ og er fri * af ballonerne. Halvdelen af bredden lægges til, fordi top/left peger på * mærkatets midte. */ @media (min-aspect-ratio: 4/5) { .jr-hero__splash { --jr-splash: clamp(112px, calc(var(--jr-car) * 0.26), 230px); width: var(--jr-splash); /* Plakatens egen placering, men aldrig længere ud end skærmen rækker: når bilen er højdebestemt og vinduet samtidig smalt (tablet på højkant, 768x900), lander formlens punkt uden for viewporten, og mærkatet blev klippet i højre side. min() sætter loftet. */ left: min( calc(50% + var(--jr-car) * 0.3987 + var(--jr-splash) / 2), calc(100% - var(--jr-splash) / 2 - 2.5vw) ); top: calc(var(--jr-hdr) + var(--jr-car) * 0.2095 + var(--jr-splash) / 2); } } /* Tablet på højkant (768x900, 820x1180 og lignende): billedforholdet ligger lige over 4/5, så reglen ovenfor gælder — men plakaten er højdebestemt, og der er ikke de 112px tomt papir til højre for logoet, som den regner med. Mærkatet ville enten blive klippet af skærmkanten eller skubbet ind over „The Musical“. Det flyttes derfor ned på ballonklyngen ved bilen, præcis som på telefon, hvor problemet er det samme. */ @media (min-width: 768px) and (min-aspect-ratio: 4/5) and (max-aspect-ratio: 1/1) { .jr-hero__splash { --jr-splash: clamp(104px, 17vw, 150px); width: var(--jr-splash); left: 78%; /* Målt på plakaten, ikke på vinduet: 0,52 x bilens højde under headeren lander mellem „The Musical“ og øverste stribe, oven på ballonerne til højre for kvinden i grønt. En dvh-værdi ramte logoet, fordi plakaten her er højdebestemt og fylder mere. */ top: calc(var(--jr-hdr) + var(--jr-car) * 0.52); } } /* Telefon på tværs (og andre meget lave, brede vinduer): plakaten skalerer efter højden og bliver derfor kun et par hundrede pixels bred, mens mærkatet har et gulv på 112px for at kunne læses. Sat op ad plakaten ville det dække halvdelen af den. Her er der til gengæld masser af tomt papir ude i siden — mærkatet flytter derfor derud i stedet for at følge logoet. */ @media (min-aspect-ratio: 4/5) and (max-height: 560px) { .jr-hero__splash { --jr-splash: clamp(90px, 22vh, 130px); width: var(--jr-splash); left: calc(100% - 4vw - var(--jr-splash) / 2); top: 50%; } } /* Opstillingen skalerer af sig selv med --jr-car, så der skal ikke rettes geometri pr. skærmstørrelse. Kun headerens højde og båndets indhold. */ @media (max-width: 767px), (max-aspect-ratio: 4/5) { .jr-hero.lm-hero { --jr-hdr: 7.7rem; } /* De tre nederste striber bliver 7-9px i telefonbredde. At gøre kassen bredere er ikke en mulighed — stribe 4 ville så dække de to inderste forlygter. I stedet trykkes teksten hårdere sammen, hvilket giver plads til en større skrift i samme kasse. Plakatens mål holdes altså. */ /* Striberne er større på telefon, så de fylder mere i højden. Mindre lodret luft i kassen holder dem fri af hinanden. */ .jr-banner { padding-top: 0.28em; padding-bottom: 0.28em; } .jr-banner:nth-child(3) { font-size: 2.45cqw !important; } .jr-banner:nth-child(4) { font-size: 2.10cqw !important; top: 70% !important; } .jr-banner:nth-child(5) { font-size: 2.20cqw !important; top: 74% !important; } /* Båndet holdes lavt: hver hundrede pixel her dækker en tilsvarende bid af bilen — og forlygterne sidder 65% nede i billedet. */ /* Båndet holdes så lavt som muligt: plakatens bånd fylder kun de nederste 9%, og vores skal rumme en billetknap. Bliver det højere, æder det nederste stribe og bilens grill. */ .jr-kv-band { padding: 0.4rem 0 0.45rem; } .jr-kv-band__inner { flex-direction: column; text-align: center; gap: 0.35rem; } .jr-kv-band__text { align-items: center; gap: 0; } .jr-kv-band__venue { font-size: 0.92rem; line-height: 1.1; } .jr-kv-band__date { font-size: 0.74rem; line-height: 1.2; } .jr-kv-band__btn { width: 100%; padding: 0.5em 1em; font-size: 0.88rem; } /* Stående skærm: plakaten fylder hele bredden, så der er ikke noget tomt papir at ligge i. Mærkatet flyttes derfor NED under „The Musical“ og ud i højre side, hvor det lægger sig på ballonerne ved bilen i stedet for hen over logoet. Størrelsen følger bredden, med et gulv på 88px hvor „30. SEPTEMBER“ stadig kan læses. */ .jr-hero__splash { top: 43dvh; left: 80%; width: clamp(88px, 24vw, 132px); } } /* På de smalleste telefoner er båndets højde en fast udgift, mens plakaten skalerer ned. Uden dette lander nederste stribe bag båndet. */ @media (max-width: 400px) { /* Under 400px er der ikke plads til fem striber, forlygterne OG båndet mellem bilens kølerhjelm og skærmens bund. Den mindste stribe — "og stort cast og orkester" — vises derfor ikke her. Alt andet står. */ .jr-banner:nth-child(5) { display: none !important; } .jr-kv-band__venue { font-size: 0.68rem; } /* 0,55rem gav 10,4px efter at basis blev hævet til 19px — for lidt til en dato man skal kunne læse. */ .jr-kv-band__date { font-size: 0.62rem; } .jr-kv-band__inner { gap: 0.28rem; } .jr-kv-band__btn { padding: 0.42em 1em; font-size: 0.82rem; } } /* Header oven på den lyse hero: mørk tekst indtil man scroller. */ .home .lm-header:not(.is-scrolled) .lm-nav__link, .home .lm-header:not(.is-scrolled) .lm-header__menu-label, .home .lm-header:not(.is-scrolled) .lm-menu-toggle { color: var(--jr-text); text-shadow: none; } .home .lm-header:not(.is-scrolled) .lm-nav__link:hover { color: var(--jr-red); } .home .lm-topbar__text { color: #5a5650 !important; } .home .lm-topbar__text::before { filter: none; } /* Fritlagte PNG'er (cast, bil) må ikke beskæres af billedrammen — de har ingen baggrund at klippe i. */ .lm-image-media__media img, .lm-image-media__media picture { object-fit: contain; background: transparent; height: auto; max-height: none; } .lm-image-media__media { background: transparent; } /* ========================================================================== 5. UNDERSIDER Parent: .lm-page-hero (banneret øverst), .lm-section, .lm-section__header, .lm-section__subheader, .lm-container ========================================================================== */ /* Banneret øverst på undersiderne kører den levende mesh (joyride.js sætter selv et canvas ind). Titlen står mørk med et lyst skær, så den holder på både gult, rødt og blåt. */ .lm-page-hero { position: relative; overflow: hidden; background: var(--jr-primary); min-height: clamp(220px, 32dvh, 360px); display: flex; align-items: center; } .lm-page-hero h1 { color: var(--jr-text); text-shadow: 0 0 28px rgba(255, 255, 255, 0.75), 0 2px 0 rgba(255, 255, 255, 0.35); letter-spacing: 0.04em; } /* Person-kort uden billede (medvirkende / holdet bag, indtil fotos kommer): et lyst kort med rød kant, så det ser tilsigtet ud frem for tomt. */ .lm-person-card:not(:has(.lm-person-card__media)) { background: #fff; border-top: 4px solid var(--jr-accent); border-radius: var(--jr-radius); padding: 1.6rem 1.2rem 1.4rem; box-shadow: 0 8px 24px rgba(20, 20, 31, 0.06); text-align: center; } .lm-person-card:not(:has(.lm-person-card__media)) .lm-person-card__name { margin-bottom: 0.25rem; } /* ========================================================================== MESH — levende gradient (assets/js/joyride.js) Sæt klassen `jr-mesh` på et modul (CSS-klasse i admin), så lægger scriptet et canvas bagest i sektionen. Indholdet løftes op over det. ========================================================================== */ .jr-mesh, .lm-page-hero { position: relative; overflow: hidden; isolation: isolate; } .jr-mesh__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .jr-mesh > *:not(.jr-mesh__canvas), .lm-page-hero > *:not(.jr-mesh__canvas) { position: relative; z-index: 1; } /* Uden WebGL: stillestående gradienter i samme palet. */ .jr-mesh--fallback { background: radial-gradient(circle at 12% 70%, rgba(219, 5, 36, 0.95) 0, rgba(219, 5, 36, 0) 42%), radial-gradient(circle at 92% 18%, rgba(204, 8, 31, 0.9) 0, rgba(204, 8, 31, 0) 38%), radial-gradient(circle at 63% 40%, rgba(26, 64, 204, 0.95) 0, rgba(61, 219, 61, 0.7) 22%, rgba(61, 219, 61, 0) 40%), radial-gradient(circle at 36% 28%, rgba(255, 117, 0, 0.9) 0, rgba(255, 117, 0, 0) 32%), #f2cc05; } /* Tekst oven på mesh: mørk med lyst skær, så den holder på alle farverne. */ .jr-mesh .lm-section__subheader, .jr-mesh .lm-section__heading, .jr-mesh h2, .jr-mesh .lm-section__content { color: var(--jr-text); text-shadow: 0 0 22px rgba(255, 255, 255, 0.7); } .jr-mesh .lm-section__subheader { color: #14141f; } /* Sektioner lidt tættere — som de andre forestillinger. */ .lm-section { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 5.5rem); } /* Hit-bandet: hele bredden, mere højde, teksten større. */ .jr-hits-section.lm-section { padding-top: clamp(3.5rem, 8vw, 6.5rem) !important; padding-bottom: clamp(3.5rem, 8vw, 6.5rem) !important; } .jr-hits-section .lm-section__content { max-width: none; } /* Sangtitlerne er sektionens indhold — ikke brødtekst. De sættes derfor som en plakatflade: versaler i Heavy, hvid med hård skygge så de holder på ethvert sted i mesh'en, og i fuld containerbredde. På desktop lander de på tre linjer, på mobil flere — det er tilsigtet. */ .jr-hits-section .jr-hits { font-family: var(--lm-font-headline) !important; font-weight: 800; text-align: center !important; margin: 0 auto; max-width: 100%; text-transform: uppercase; color: #fff !important; text-shadow: 2px 2px 0 rgba(20, 20, 31, 0.55), 0 0 26px rgba(20, 20, 31, 0.35); font-size: clamp(1.3rem, 2.82vw, 2.75rem); line-height: 1.16; letter-spacing: 0.005em; word-spacing: 0.12em; } .jr-hits-section .jr-hits__more { display: block; margin-top: 0.5em; color: var(--jr-yellow) !important; font-size: 0.42em; letter-spacing: 0.16em; text-shadow: 2px 2px 0 rgba(20, 20, 31, 0.5); } /* Overskriften over sangene skal bære sektionen. Den står på mesh'en, så ingen gradient — hvid med samme hårde skygge som sangene. */ .jr-hits-section .lm-section__heading { color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; font-size: clamp(1.9rem, 3.6vw, 4rem); line-height: 1.02; letter-spacing: 0.005em; text-shadow: 3px 3px 0 rgba(20, 20, 31, 0.5), 0 0 30px rgba(20, 20, 31, 0.3); margin-bottom: 0.5em; } /* Billetsalgs-bandet: stor overskrift, én knap. */ .jr-cta-band.lm-section { padding-top: clamp(3.5rem, 8vw, 6.5rem) !important; padding-bottom: clamp(3.5rem, 8vw, 6.5rem) !important; text-align: center; } .jr-cta-band h2 { font-size: clamp(1.9rem, 2.6vw + 1rem, 3.6rem); line-height: 1.05; max-width: 22ch; margin-left: auto; margin-right: auto; } .jr-cta-band .lm-section__content { max-width: 48ch; margin: 0.5rem auto 0; font-size: clamp(1rem, 0.5vw + 0.8rem, 1.2rem); } .jr-cta-band .lm-btn-primary { background: var(--jr-text); border-color: var(--jr-text); color: #fff; } /* Korte teasere på forsiden: centreret, smallere målebredde. */ .jr-center .lm-section__content { max-width: 62ch; margin-left: auto; margin-right: auto; text-align: center; font-size: clamp(1.02rem, 0.4vw + 0.85rem, 1.2rem); line-height: 1.7; } .jr-center .lm-section__content p { text-align: center; } /* ========================================================================== 6. KØB BILLET Parent: .lm-show-date (datoer), .lm-vip-card, .lm-price-table, .lm-city-card / .lm-presale-date (andre byer) ========================================================================== */ .lm-city-card { background: #fffdf8; border: 0; border-top: 5px solid transparent; border-image: var(--jr-gradient) 1; box-shadow: 0 12px 28px rgba(120, 60, 30, 0.1); transition: transform 0.25s ease, box-shadow 0.25s ease; padding: clamp(1.2rem, 2vw, 1.8rem); } .lm-city-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(120, 60, 30, 0.18); } .lm-city-card__city { font-family: var(--lm-font-headline); font-size: clamp(1.15rem, 1vw + 0.7rem, 1.5rem); color: var(--jr-text); } .lm-city-card__venue { color: var(--jr-red); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; } .lm-city-card__dates { color: var(--jr-text); font-weight: 600; } /* --- Spilledatoerne (København). Parent farver købsknappen efter status — grøn for ledige. Det skratter mod JOYRIDEs palette, så knappen får logoets gradient i stedet. Status bliver ved med at kunne aflæses: den er kantfarven til højre, som signaturen nederst forklarer. --- */ .lm-date-card { background: #fffdf8; box-shadow: 0 8px 20px rgba(120, 60, 30, 0.08); } .lm-date-card--status-available { border-right-color: var(--jr-green); } /* Datokortenes købsknap kørte uden animation og skiftede farve i ét spring ved hover, mens alle andre gled. Den får samme drift som resten — og den faste background-position ryger, for den låste animationen fast. */ .lm-date-card__btn--available { background: var(--jr-gradient) !important; background-size: 220% 100% !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); animation: jr-gradient-drift 9s ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { .lm-date-card__btn--available { animation: none; } } .lm-date-card__day, .lm-date-card__date { color: var(--jr-text); } /* Premiere- og forpremieremærkaterne i brandets gule. */ .lm-date-card__badge { background: var(--jr-yellow); color: var(--jr-text); } /* --- Bil-komponent: billedet plus et WebGL-lag med de fire forlygter. --- */ .jr-car { position: relative; display: block; width: fit-content; margin: 0 auto; } .jr-car__img { display: block; height: auto; width: 100%; } /* Forlygterne tegnes i WebGL af assets/js/jr-headlights.js og lægges præcis oven på billedet. Canvas'et følger billedets størrelse, så lyset bliver siddende i lamperne uanset skalering. Kun heroen har klassen jr-car--lit. */ .jr-car__lights { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .lm-vip-card { position: relative; isolation: isolate; overflow: visible; background: #14141f; color: #fff; border: 0; box-shadow: 0 24px 50px rgba(20, 20, 31, 0.28); } /* Gradientbånd i toppen — samme forløb som logoet. */ /* Den oprindelige 8px stribe i kortets overkant er fjernet — kortet har nu gradientkant hele vejen rundt, og striben lå som en fremmed bjælke oven i baggrundsbilledet. */ /* En ballon stikker frem bag hvert kort — som pynt på plakaten. */ .lm-vip-card::before { content: ''; position: absolute; z-index: -1; width: clamp(96px, 10vw, 150px); aspect-ratio: 420 / 557; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.3)); animation: jr-float 8s ease-in-out infinite; pointer-events: none; } [class*="col-"]:nth-child(odd) .lm-vip-card::before { top: clamp(-64px, -4.5vw, -34px); left: clamp(-58px, -4vw, -26px); background-image: url('../../uploads/joyride_balloon_green.png'); } [class*="col-"]:nth-child(even) .lm-vip-card::before { top: clamp(-64px, -4.5vw, -34px); right: clamp(-58px, -4vw, -26px); background-image: url('../../uploads/joyride_balloon_red.png'); animation-delay: -4s; } .lm-vip-card > * { position: relative; z-index: 2; } .lm-vip-card__title { font-family: var(--lm-font-headline); font-size: clamp(1.6rem, 1.4vw + 0.8rem, 2.4rem); letter-spacing: 0.04em; background: var(--jr-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .lm-vip-card__subtitle { color: var(--jr-yellow); font-style: italic; } .lm-vip-card__feature-icon { color: #ff6a00; } /* --- CV-modal: kun tekst, på mørk bund med et gradient-band i toppen. --- */ .lm-person-modal__container { background: linear-gradient(115deg, #e4002b 0%, #ff6a00 40%, #f2cc05 70%, #7fd21c 100%) top / 100% 10px no-repeat, #14141f; color: #f3efe8; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); } .lm-person-modal__image { display: none; } .lm-person-modal__content { display: block; padding: clamp(1.5rem, 3vw, 3rem); } .lm-person-modal__info { max-width: none; width: 100%; } .lm-person-modal__name { font-family: var(--lm-font-headline); font-size: clamp(1.8rem, 2vw + 0.8rem, 3rem); color: #fff; letter-spacing: 0.03em; } .lm-person-modal__role { color: var(--jr-yellow); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.85rem; margin-bottom: 1.2rem; } .lm-person-modal__cv { color: rgba(243, 239, 232, 0.88); font-size: 1.02rem; line-height: 1.7; max-width: 68ch; } .lm-person-modal__cv p + p { margin-top: 0.9em; } .lm-person-modal__close { color: #fff; background: rgba(255, 255, 255, 0.08); } /* --- Footer: motorvejen om natten med lysspor mod byen — ikke sort. Billedet ligger bagest, en mørk himmel-gradient ovenpå, så teksten står på den mørke del, og lysporene lever i bunden. Bilen holder i hjørnet. --- */ .lm-footer { position: relative; /* Klipper ikke foroven: ballonerne stikker op i sektionen ovenover, og z-index løfter footeren, så de kan ses. isolation fjernet — den ville lukke dem inde i footerens eget lag. */ z-index: 3; overflow-x: clip; overflow-y: visible; background: #14141f; } /* Gradientbånd i toppen — samme signatur som VIP-kortene. */ /* Lagene i footeren, nedefra og op: 0 footerens mørke bund 1 gradientstriben i overkanten 2 ballonerne — de skal flyde FORAN striben, ellers maler den en streg tværs hen over dem, hvor de krydser kanten 3 indholdet: nyhedsbrev, links, disclaimer */ .lm-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; z-index: 1; background: var(--jr-gradient); } .lm-footer > .lm-container { position: relative; z-index: 3; } .lm-footer__disclaimer, .lm-footer__bottom, .lm-footer__copyright { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); } .lm-newsletter { border-bottom-color: rgba(255, 255, 255, 0.14); } /* Scenen klipper IKKE lodret. Ballonerne må stikke op over footerens overkant og ind i sektionen ovenover — det ser bedre ud end at skære dem over. Vandret klippes der stadig, ellers ville brede skærme få en vandret rullebjælke. clip er det eneste der kan parres med visible på den anden akse, uden at begge falder tilbage til auto. */ .jr-footer-scene { position: absolute; inset: 0; z-index: 2; overflow-x: clip; overflow-y: visible; pointer-events: none; } /* Footerens eget indhold skal ligge over scenen, ellers står disclaimeren oven i de medvirkende. Scenen selv skal blive liggende bagved. */ .lm-footer > *:not(.jr-footer-scene), .lm-footer .lm-container { position: relative; z-index: 3; } /* Ballonklumperne i footeren ligger om nyhedsbrevet foroven. */ @media (min-width: 992px) { .lm-footer__disclaimer { max-width: 64%; margin-left: auto; margin-right: auto; } } @media (max-width: 767px) { } /* --- Spilledatoer ---------------------------------------------------------- Sektionen skal skille sig ud fra "Om forestillingen" lige ovenfor, som står på det rene papir. Her lægges et varmt bånd med en kant i logoets gradient foroven og forneden — samme greb som plakatens røde bundbånd, bare lyst nok til at gradient-overskriften stadig kan læses. */ .lm-section--dates { position: relative; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 210, 63, 0.20), transparent 62%), radial-gradient(100% 80% at 12% 100%, rgba(228, 0, 43, 0.13), transparent 60%), radial-gradient(100% 80% at 88% 100%, rgba(108, 195, 26, 0.16), transparent 60%), #fbf1e0; } .lm-section--dates::before, .lm-section--dates::after { content: ''; position: absolute; left: 0; right: 0; height: 6px; background: var(--jr-gradient); z-index: 2; } .lm-section--dates::before { top: 0; } .lm-section--dates::after { bottom: 0; } /* Den enkeltstående stjerne under overskriften. Overskriften er fjernet i indholdet, og så står stjernen tilbage uden noget at adskille. */ .lm-section--dates .lm-dates-featured__separator { display: none; } /* København står øverst i listen og er hovedspillestedet. Den første række får derfor sin egen vægt: større, i logoets gradient, og med en streg under sig så turnébyerne læses som en gruppe for sig. */ /* København stables på tre linjer — også på desktop. På én linje forsvandt hovedspillestedet i rækken af turnébyer; stablet får det den vægt et danmarkspremierested skal have. Stjernerne mellem leddene giver kun mening vandret, så de ryger her. */ .lm-dates-featured__row:first-child { position: relative; flex-direction: column; align-items: center; gap: 0.28rem; margin-bottom: 1.6rem; padding-bottom: 1.8rem; text-align: center; font-size: clamp(1.1rem, 0.9vw + 0.8rem, 1.7rem); } .lm-dates-featured__row:first-child .lm-dates-featured__icon { display: none; } /* Rækkefølgen i DOM en er by, spillested, dato. Stablet skal datoen stå i midten, så byen og spillestedet rammer den ind. order flytter den uden at røre markup. Marginerne nulstilles, så flex-gap alene bestemmer afstanden — ellers lægger elementernes egne marginer sig oveni, og de tre mellemrum bliver forskellige. */ .lm-dates-featured__row:first-child .lm-dates-featured__city { order: 1; } .lm-dates-featured__row:first-child .lm-dates-featured__daterange { order: 2; } .lm-dates-featured__row:first-child .lm-dates-featured__venue { order: 3; } .lm-dates-featured__row:first-child > * { margin: 0 !important; line-height: 1.15; } .lm-dates-featured__row:first-child { gap: clamp(0.45rem, 1vw, 0.85rem); } .lm-dates-featured__row:first-child::after { content: ''; position: absolute; left: 50%; bottom: 0; width: min(320px, 60%); height: 3px; transform: translateX(-50%); background: var(--jr-gradient); } .lm-dates-featured__row:first-child .lm-dates-featured__city { font-family: var(--lm-font-headline); font-weight: 800; font-size: 2.15em; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; background: var(--jr-gradient); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .lm-dates-featured__row:first-child .lm-dates-featured__venue { font-size: 1em; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jr-red); } .lm-dates-featured__row:first-child .lm-dates-featured__daterange { font-size: 1.12em; font-weight: 600; } /* På telefon kunne turnébyerne ikke være på én linje: "Aalborg ★ AALBORG KONGRES & KULTURCENTER ★ 23. – 24. april 2027" brød over tre linjer, og en skrift lille nok til at undgå det ville være ulæselig. Spillestedet er det længste led og det mindst nødvendige på forsiden — det ryger sammen med sin stjerne, så der står by ★ dato på én linje. København beholder alle tre led, stablet: det er hovedspillestedet. */ @media (max-width: 700px) { .lm-dates-featured__row:not(:first-child) { flex-wrap: nowrap; white-space: nowrap; gap: 0.45rem; font-size: clamp(0.82rem, 3.6vw, 1.05rem); } /* Spillestedet skjultes for at få by og dato på én linje. Men så vidste man ikke hvor man skulle hen. Det står nu på sin egen linje under, med småt — og rækkerne får mere luft imellem sig, så det er tydeligt hvilken by et spillested hører til. */ .lm-dates-featured__row:not(:first-child) .lm-dates-featured__venue { order: 3; flex: 0 0 100%; margin-top: 0.15em; font-size: 0.76em; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; white-space: normal; /* Ligger som sin egen fulde linje, så flex-containerens centrering ikke rører den — den skal centreres af sin egen text-align. */ text-align: center; } /* Stjernen mellem by og spillested giver ikke mening, når de står på hver sin linje. Den mellem by og dato bliver. */ .lm-dates-featured__row:not(:first-child) .lm-dates-featured__venue + .lm-dates-featured__icon { display: none; } .lm-dates-featured__row:not(:first-child) { flex-wrap: wrap !important; justify-content: center; /* Mere luft MELLEM byerne end mellem by og spillested, så de to linjer læses som ét par. */ row-gap: 0.05rem; padding-bottom: 0; margin-bottom: 0.85rem; } .lm-dates-featured__row:not(:first-child) .lm-dates-featured__city { order: 1; } .lm-dates-featured__row:not(:first-child) .lm-dates-featured__icon { order: 1; } .lm-dates-featured__row:not(:first-child) .lm-dates-featured__daterange { order: 2; } .lm-dates-featured__row:not(:first-child) .lm-dates-featured__city, .lm-dates-featured__row:not(:first-child) .lm-dates-featured__daterange { white-space: nowrap; } } /* Stjernen mellem leddene skal vokse med rækken. */ .lm-dates-featured__row:first-child .lm-dates-featured__icon svg { width: 1.1em; height: 1.1em; } /* --- Om forestillingen på forsiden ----------------------------------------- Overskrift og eyebrow stod centreret over BÅDE billede og tekst, hvilket fik dem til at svæve midt i sektionen. De hører til teksten. Containeren gøres derfor til et gitter, og .lm-image-media får display:contents, så dens to børn bliver gitterets egne felter og kan placeres hver for sig. */ @media (min-width: 992px) { .lm-section--image_media > .container, .lm-section--image_media > .lm-container { display: grid; grid-template-columns: 1fr 1fr; /* Sidste række er 1fr og suger den overskydende højde. Uden den ville tekstsøjlens rækker blive strakt for at møde billedets højde, og knappen ville lande langt under afsnittet i stedet for lige under. */ grid-template-rows: auto auto auto 1fr; column-gap: clamp(2rem, 4vw, 4.5rem); align-items: start; } .lm-section--image_media .lm-image-media { display: contents; } /* Billedet fylder hele søjlen i højden. */ .lm-section--image_media .lm-image-media__media { grid-column: 1; grid-row: 1 / -1; align-self: center; } /* Ligger billedet til højre, byttes søjlerne om. */ .lm-section--image_media:has(.lm-image-media--left) .lm-image-media__media { grid-column: 2; } .lm-section--image_media:has(.lm-image-media--left) .lm-section__headings, .lm-section--image_media:has(.lm-image-media--left) .lm-image-media__text { grid-column: 1; } .lm-section--image_media .lm-section__headings { grid-column: 2; grid-row: 1; align-items: flex-start; text-align: left; align-self: end; margin-bottom: 1.2rem; } .lm-section--image_media .lm-image-media__text { grid-column: 2; grid-row: 2; align-self: start; } /* Overskriftsblokken skal heller ikke strækkes. */ .lm-section--image_media .lm-section__headings { align-self: end; } /* Knappen hører til teksten, ikke til hele rækken. Den lægges i samme søjle som brødteksten og stilles til venstre, så den læses som næste skridt efter afsnittet frem for at svæve midt under billedet. */ .lm-section--image_media .lm-section__cta { grid-column: 2; grid-row: 3; justify-self: start; text-align: left; } .lm-section--image_media:has(.lm-image-media--left) .lm-section__cta { grid-column: 1; } /* Er der et navnebånd øverst, rykker alle rækker et trin ned. */ .lm-section--image_media:has(.jr-names) .lm-section__cta { grid-row: 4; } } /* --- Ballon-drys i sektioner og footer ------------------------------------- Ballonerne ligger i to lodrette bånd langs kanterne, så midterfeltet med tekst altid står frit (se jr_scatter_balloons() i functions.php). Størrelsen er i % af sektionens bredde, så drysset skalerer med layoutet i stedet for at klumpe sammen på en smal skærm. --- */ .jr-section-balloons, .jr-footer-balloons { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* Footerens klumper skal holde sig inden for containeren i stedet for at gå ud til skærmkanten. Polstring dur ikke: absolut placerede børn måles mod padding-KASSEN, og den indeholder polstringen. Laget gøres derfor selv lige så bredt som containeren. */ .jr-footer-balloons { left: 50%; right: auto; width: min(calc(100% - 3rem), 1400px); transform: translateX(-50%); overflow-x: clip; overflow-y: visible; } .lm-section:has(.jr-section-balloons) > .lm-container, .lm-section:has(.jr-section-balloons) > .container { position: relative; z-index: 1; } .jr-scatter-balloon { position: static; width: 100%; height: auto; opacity: 0.9; filter: drop-shadow(0 12px 24px rgba(120, 60, 30, 0.15)); animation: jr-float-kv 11s ease-in-out infinite; will-change: transform; } /* Fuld dækkraft OG ingen slagskygge. Dækkraften: ballonerne stikker op over footerkanten og blandede sig ellers med to forskellige baggrunde — lyst papir over kanten, mørk footer under — så samme ballon så ud som to halvdele delt af kanten. Skyggen: fjorten sorte drop-shadows med 26px sløring i en tæt klynge smelter sammen til én grå dis. Over footeren ligger den på lyst papir, hvor den er tydelig, og laget klipper vandret ved containerens kant, så disen fik en hård lodret kant og lignede en firkant bag ballonerne. På den mørke footer gjorde skyggen alligevel ingen forskel. */ .jr-footer-balloons .jr-scatter-balloon { opacity: 1; filter: none; } /* På smalle skærme er der ikke plads til fjorten. Hver anden ryger, og de resterende bliver mindre, så de ikke lægger sig ind over teksten. */ @media (max-width: 900px) { .jr-section-balloons .jr-b:nth-child(2n), .jr-footer-balloons .jr-b:nth-child(2n) { display: none; } .jr-scatter-balloon { opacity: 0.7; } } @media (max-width: 600px) { .jr-section-balloons .jr-b:nth-child(3n), .jr-footer-balloons .jr-b:nth-child(3n) { display: none; } } /* I telefonbredde er der ikke plads til en klump på hver side af nyhedsbrevet. Fire balloner bliver tilbage, større og klemt helt ud i hjørnerne, så de rammer feltet ind i stedet for at ligge oven i det. */ @media (max-width: 700px) { /* Samme greb i sektionerne: i telefonbredde er der ikke plads til et drys langs kanten uden at det lander oven i teksten. Fire balloner bliver tilbage, større og skubbet halvt ud over kanten. */ .jr-section-balloons .jr-b { display: none; } .jr-section-balloons .jr-b:nth-child(1), .jr-section-balloons .jr-b:nth-child(2), .jr-section-balloons .jr-b:nth-child(11), .jr-section-balloons .jr-b:nth-child(12) { display: block; } .jr-section-balloons .jr-b:nth-child(1) { left: -7% !important; top: 3% !important; width: 20% !important; } .jr-section-balloons .jr-b:nth-child(2) { left: 89% !important; top: 6% !important; width: 18% !important; } .jr-section-balloons .jr-b:nth-child(11) { left: -10% !important; top: 78% !important; width: 16% !important; } .jr-section-balloons .jr-b:nth-child(12) { left: 95% !important; top: 82% !important; width: 15% !important; } .jr-footer-balloons .jr-b { display: none; } .jr-footer-balloons .jr-b:nth-child(1), .jr-footer-balloons .jr-b:nth-child(2), .jr-footer-balloons .jr-b:nth-child(5), .jr-footer-balloons .jr-b:nth-child(6) { display: block; } .jr-footer-balloons .jr-b:nth-child(1) { left: -6% !important; top: -12% !important; width: 26% !important; } .jr-footer-balloons .jr-b:nth-child(2) { left: 80% !important; top: -14% !important; width: 28% !important; } .jr-footer-balloons .jr-b:nth-child(5) { left: -3% !important; top: 6% !important; width: 19% !important; } .jr-footer-balloons .jr-b:nth-child(6) { left: 84% !important; top: 9% !important; width: 20% !important; } } /* --- Kort til medvirkende og holdet bag. Indtil der kommer fotos, er kortet selv motivet: creme flade, tyk ramme i logoets gradient og navnet i condensed. Rammen tegnes med border-image, så den følger kortets størrelse. --- */ .lm-person-card { background: #fffdf8; border: 4px solid transparent; border-image: var(--jr-gradient) 1; box-shadow: 0 14px 32px rgba(120, 60, 30, 0.12); transition: transform 0.25s ease, box-shadow 0.25s ease; } .lm-person-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(120, 60, 30, 0.2); } /* Uden foto: kortet får luft og et lille hjerte som mærke. */ .lm-person-card:not(:has(.lm-person-card__media)) { position: relative; padding: clamp(2.6rem, 4vw, 3.4rem) 1.2rem clamp(1.4rem, 2vw, 1.8rem); text-align: center; min-height: clamp(160px, 18vw, 220px); display: flex; flex-direction: column; justify-content: center; } .lm-person-card:not(:has(.lm-person-card__media))::before { content: ''; position: absolute; top: clamp(0.7rem, 1.4vw, 1.1rem); left: 50%; transform: translateX(-50%); width: clamp(24px, 2.6vw, 34px); aspect-ratio: 420 / 557; background: url('../../uploads/joyride_balloon_red.png') center / contain no-repeat; opacity: 0.9; } .lm-person-card__name { font-family: var(--lm-font-headline); font-size: clamp(1.05rem, 1vw + 0.6rem, 1.4rem); margin-bottom: 0.2rem; color: var(--jr-text); } .lm-person-card__role { color: var(--jr-red); text-transform: uppercase; letter-spacing: 0.1em; font-size: clamp(0.72rem, 0.4vw + 0.55rem, 0.85rem); } /* Hver anden i rækken får grøn ballon, så rytmen ikke bliver ensformig. */ [class*="col-"]:nth-child(2n) .lm-person-card:not(:has(.lm-person-card__media))::before { background-image: url('../../uploads/joyride_balloon_green.png'); } [class*="col-"]:nth-child(3n) .lm-person-card:not(:has(.lm-person-card__media))::before { background-image: url('../../uploads/joyride_balloon_orange.png'); } /* ========================================================================== 7. SPLASH Mærkatet ("KØB INDEN 30. SEPTEMBER — SPAR OP TIL 50%") er ét billede, som parent tænder pr. placering: forside-hero, sektionerne på køb billet-siden og presale-siden. Selve placeringen ved sektionsoverskrifterne står længere nede i filen („Splash-mærket ved sektionsoverskrifterne“) — den er nødt til at komme efter parentens absolutte placering for at vinde. Her ligger kun bevægelsen, som alle tre placeringer deler. ========================================================================== */ @keyframes jr-splash-sway { 0% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-6px) rotate(-2deg); } 100% { transform: translateY(0) rotate(-8deg); } } @media (prefers-reduced-motion: reduce) { .lm-section__splash, .jr-presale-hero__splash { animation: none; transform: rotate(-5deg); } /* Hero-mærkatet skal beholde sin centrering, også når bevægelsen slaas fra. */ .jr-hero__splash { animation: none; transform: translate(-50%, -50%) rotate(-5deg); } } /* --- „Billetsalget åbner …“ ------------------------------------------------ Parent viser denne blok på køb billet-siden, når alle salgssektioner stadig venter på deres åbningstidspunkt. Nedtællingens tal er hvide, så den skal have en mørk bund at stå på — samme røde kasse som på presale-siden, så de to sider ligner hinanden. */ .lm-ticket-notice .lm-countdown { display: inline-flex; background: var(--jr-red, #e4002b); color: #fff; padding: clamp(0.9rem, 2.2vw, 1.6rem) clamp(1.25rem, 3vw, 2.5rem); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); transform: rotate(-1.4deg); } .lm-ticket-notice .lm-countdown__item { min-width: clamp(52px, 6vw, 76px); } .lm-ticket-notice .lm-countdown__number { font-size: clamp(1.9rem, 4vw, 3rem); } .lm-ticket-notice .lm-section__text { margin-top: clamp(1.5rem, 3vw, 2.5rem); color: #5a5650; } /* ========================================================================== 8. PRESALE Egen komposition i page-presale.php: plakatens creme-papir, to tætte ballonklumper i siderne og bilen holdende ved nedtællingen. Al logik (tidsvindue, adgang, hvilke links) ligger i parent; her er kun udseendet. Klasserne .lm-presale-* / .lm-countdown kommer fra parent. ========================================================================== */ .lm-presale-page { background: var(--lm-white, #fff8f2); } /* Nedtællingens tal er hvide i parent — de skal derfor stå på noget mørkt, ikke på creme-papiret. Derfor sidder uret i sin egen røde kasse. */ .jr-presale-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.5rem, 4vh, 3.5rem) 0 clamp(2rem, 5vh, 4rem); background-image: url('../../uploads/joyride_bg2.jpg'); background-size: cover !important; background-position: center; } .jr-presale-hero__inner { position: relative; z-index: 2; text-align: center; } /* Logo og splash hører sammen: mærkatet skal ligge til højre for logoet og lige over overskriften. Derfor er de pakket i én kasse, så mærkatet måles mod LOGOET og ikke mod heroen — så følger det med, uanset hvor bred skærmen er. */ .jr-presale-hero__lockup { position: relative; /* 50vw og ikke 78: mærkatet hænger 44% af logoets bredde ud til højre, så parret fylder 1,44 gange logoet. Ved 78vw ville mærkatet blive klippet af heroens kant på alt under ca. 1500px. */ width: min(620px, 50vw); margin: 0 auto; } /* Logoet er link til forsiden. skal fylde hele kassen, ellers bliver klikfeltet linjehøjden i stedet for billedet. Rotationen flyttes op på linket, så klikfeltet dræjer med billedet — sad den på , kunne man klikke ved siden af hjørnerne og ikke på dem. */ .jr-presale-hero__home { display: block; width: 100%; transform: rotate(-4deg); transition: transform 0.25s ease, filter 0.25s ease; } .jr-presale-hero__home:hover, .jr-presale-hero__home:focus-visible { transform: rotate(-4deg) translateY(-3px); filter: drop-shadow(0 14px 26px rgba(120, 60, 30, 0.22)); } .jr-presale-hero__logo { display: block; width: 100%; height: auto; } /* Målt i procent af logoet: ude til højre for „The Musical“ og trukket ned, så underkanten lander lige over overskriften. */ .jr-presale-hero__splash { position: absolute; /* right = -(bredde + luft), så mærkatets venstrekant lander lige uden for logoets højre kant — ellers lægger det sig hen over „The Musical“. */ right: -44%; bottom: -16%; width: 40%; height: auto; z-index: 5; pointer-events: none; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.28)); animation: jr-splash-sway 5.5s ease-in-out infinite; } /* Selve striben er sitets fælles (se blok 2: .lm-section__subheader) — rød kasse, let drejet, skygge under bogstaverne. Her sættes kun afstanden, og „auto“ i siderne, fordi striben er inline-block og skal centreres. */ .jr-presale-hero__eyebrow { margin: clamp(1rem, 2.5vh, 2rem) auto 0.6rem; } .jr-presale-hero__title { font-family: var(--lm-font-headline); font-weight: 800; text-transform: uppercase; font-size: clamp(1.9rem, 5.5vw, 3.6rem); line-height: 1.02; color: var(--jr-text, #14141f); margin: 0; } /* Undertitlen er én sætning på ~160 tegn. Ved 46ch brød den over fire linjer og lavede en søjle midt på en side, hvor alt andet er bredt. 78ch giver to linjer på alt fra bærbar og op; smallere skærme får naturligvis flere. */ .jr-presale-hero__subtitle { font-size: clamp(1rem, 1.6vw, 1.25rem); color: #5a5650; max-width: min(78ch, 100%); margin: 0.75rem auto 0; } /* Samme greb som undertitlen: sætningen er ~185 tegn, og et smalt mål gjorde den til fire linjer midt på en bred side. */ .jr-presale-hero__text { max-width: min(92ch, 100%); margin: clamp(1.25rem, 3vh, 2.25rem) auto 0; color: #4a463f; } /* Uret lægger sig hen over bilens FORPARTI — kofanger og køler — præcis som bannerne på kølerhjelmen i keyvisualet. Derfor er det placeret absolut i procent af bilens højde og ikke stablet ovenover: procenterne holder det nede på lakken uanset skærmbredde, og de tre ansigter i toppen bliver fri. Bilen ligger i flowet og bestemmer scenens højde. */ .jr-presale-stage { position: relative; width: clamp(320px, 58vw, 760px); max-width: 100%; margin: clamp(1.25rem, 3vh, 2.25rem) auto 0; } .jr-presale-counter { position: absolute; left: 50%; bottom: 5%; z-index: 3; /* Uden max-content regner browseren bredden ud fra afstanden mellem left:50% og scenens højrekant — halvdelen af bilen — og så brydes uret over to linjer. */ width: max-content; max-width: 96%; background: var(--jr-red, #e4002b); color: #fff; padding: clamp(0.7rem, 1.6vw, 1.35rem) clamp(1rem, 2.6vw, 2.25rem); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); transform: translateX(-50%) rotate(-1.4deg); } .jr-presale-counter__label, .jr-presale-counter__end { font-family: var(--lm-font-headline); text-transform: uppercase; letter-spacing: 0.16em; margin: 0; } .jr-presale-counter__label { font-size: clamp(0.72rem, 1.2vw, 0.9rem); font-weight: 700; color: rgba(255, 255, 255, 0.85); margin-bottom: 0.6rem; } .jr-presale-counter__end { font-size: clamp(0.72rem, 1.1vw, 0.85rem); color: var(--jr-yellow, #ffd23f); margin-top: 0.75rem; } .jr-presale-counter .lm-countdown__number { font-size: clamp(1.9rem, 4vw, 3rem); } .jr-presale-counter .lm-countdown__item { min-width: clamp(52px, 6vw, 76px); } .jr-presale-car { width: 100%; margin: 0; } /* Sektionerne under heroen: samme creme-papir, plads til ballonlaget. */ .jr-presale-section { position: relative; isolation: isolate; overflow: hidden; } /* Noten er én linje. Den stod med en sektions fulde luft både over og under og lavede to tømte skærmbid mellem sidste by og footeren. */ .jr-presale-footnote { padding: clamp(0.75rem, 1.6vh, 1.25rem) 0 clamp(1.25rem, 2.5vh, 2rem); color: #5a5650; font-size: 0.95rem; } .jr-presale-footnote p:last-child { margin-bottom: 0; } /* Byerne slutter tættere på noten. :last-of-type duer ikke — noten er selv en
, så den er den sidste af sin type. */ .jr-presale-section:has(+ .jr-presale-footnote) { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); } /* Klumperne i siderne er tættere og større end sektionsdrysset. De skal have lov at nå helt ud over kanten — en ballon der er skåret af skærmkanten læses som en del af en større buket uden for billedet. */ .jr-presale-balloons .jr-scatter-balloon { opacity: 1; filter: drop-shadow(0 14px 28px rgba(120, 60, 30, 0.18)); } /* Under 900px skjuler parent-reglen hver anden ballon. Klumperne tåler det, fordi de er dobbelt så tætte som sektionsdrysset — men de tilbageværende skal krympe, ellers lægger en 15%-ballon sig hen over overskriften. */ @media (max-width: 900px) { .jr-presale-balloons .jr-b { width: 9% !important; } .jr-presale-hero__logo { width: min(460px, 84vw); } } @media (max-width: 700px) { /* Bilen skal fylde næsten hele bredden her: jo større den er, jo mere lak er der under ansigterne til at bære urets kasse. */ .jr-presale-stage { width: 94vw; } /* Bilen er kun ca. 320px høj her. Uret skal derfor krympe med, ellers dækker kassen hele forpartiet i stedet for at ligge som et bånd hen over køleren. */ .jr-presale-counter { bottom: 6%; padding: 0.5rem 0.85rem 0.55rem; } .jr-presale-counter__label { font-size: 0.6rem; margin-bottom: 0.3rem; } .jr-presale-counter__end { font-size: 0.58rem; margin-top: 0.4rem; } .jr-presale-counter .lm-countdown { gap: 4px; } .jr-presale-counter .lm-countdown__item { min-width: 38px; } .jr-presale-counter .lm-countdown__number { font-size: 1.45rem; } .jr-presale-counter .lm-countdown__label { font-size: 0.55rem; margin-top: 2px; } .jr-presale-counter .lm-countdown__separator { font-size: 1rem; margin-top: -12px; } /* På telefon er der ikke bredde nok til at hænge mærkatet ud til højre for logoet: enten bliver logoet for lille, eller også klippes mærkatet af kanten. Det lægges derfor i flowet under logoet i stedet. */ .jr-presale-hero__lockup { width: min(620px, 84vw); } .jr-presale-hero__splash { position: static; display: block; width: min(150px, 36vw); margin: 0.75rem auto 0; } } .lm-presale-admin-notice { background: var(--jr-yellow, #ffd23f); color: var(--jr-text, #14141f); font-weight: 700; text-align: center; padding: 0.75rem 0; } /* ========================================================================== 9. PRESSE Parent: .lm-press, .lm-press__downloads, .lm-press__images, .lm-press__contacts. Renderes på /presse/, nederst på presale og som forsidemodul. ========================================================================== */ .lm-press__images { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; list-style: none; padding: 0; } .lm-press__image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--jr-radius); } /* ========================================================================== 10. FOOTER + NYHEDSBREV Parent: .lm-footer, .lm-newsletter ========================================================================== */ /* .lm-footer { } */ /* ========================================================================== 11. RESPONSIVT ========================================================================== */ @media (max-width: 991px) { /* mobil-hero, menu osv. */ } /* --- Skuespillernavnene ---------------------------------------------------- Det stærkeste salgsargument på forestillingen. Sat som en plakatstribe hen over sektionen med gruppebilledet: versaler, skiftende størrelser og logoets gradient, så det læses som et opslag og ikke som en liste. */ .jr-names { margin: 0 0 clamp(1.4rem, 3vw, 2.6rem); text-align: center; font-family: var(--lm-font-headline); font-weight: 800; text-transform: uppercase; line-height: 1.08; letter-spacing: 0.005em; } /* Gradienten lægges på HELE båndet, ikke på hvert navn. Ellers løber rød til grøn otte gange og bliver et mønster i stedet for et forløb. */ .jr-names { background: var(--jr-gradient); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .jr-names__n--lg { font-size: clamp(1.5rem, 3.1vw, 3.1rem); } .jr-names__n--md { font-size: clamp(1.2rem, 2.4vw, 2.4rem); } .jr-names__n--sm { font-size: clamp(1rem, 1.9vw, 1.9rem); } .jr-names__sep { -webkit-text-fill-color: rgba(20, 20, 31, 0.45); font-size: clamp(0.9rem, 1.6vw, 1.6rem); margin: 0 0.32em; vertical-align: 0.12em; } /* Navnebåndet skal spænde hele containeren, også i billede+tekst-moduler hvor gitteret ellers ville klemme det ned i tekstsøjlen. */ @media (min-width: 992px) { .lm-section--image_media .jr-names { grid-column: 1 / -1; grid-row: 1; } .lm-section--image_media:has(.jr-names) .lm-section__headings { grid-row: 2; } .lm-section--image_media:has(.jr-names) .lm-image-media__text { grid-row: 3; } .lm-section--image_media:has(.jr-names) .lm-image-media__media { grid-row: 2 / span 2; } .lm-section--image_media:has(.jr-names) .lm-section__cta { grid-row: 4; } } /* --- Sangtitlerne som marquee ---------------------------------------------- Tre rækker, let drejet, der glider hver sin vej når man scroller. Rækkerne er bredere end skærmen og klippes hver for sig, så titlerne kan løbe ud over kanten uden at give vandret scroll. */ /* Temaet har ingen hook mellem overskrift og indhold, så marqueen indsættes før overskriften og flyttes ned med flex-order i stedet. */ .jr-hits-section > .lm-container, .jr-hits-section > .container { display: flex; flex-direction: column; } .jr-hits-section .lm-section__headings { order: 1; } .jr-marquee { order: 2; } .jr-hits-section .lm-section__content { order: 3; } .jr-marquee { position: relative; width: 112vw; margin-left: calc(50% - 56vw); transform: rotate(-2.2deg); padding: clamp(1rem, 2.4vw, 2.4rem) 0 clamp(0.4rem, 1vw, 1rem); user-select: none; } .jr-marquee__row { overflow: hidden; white-space: nowrap; line-height: 1.02; } .jr-marquee__track { display: inline-block; white-space: nowrap; will-change: transform; } .jr-marquee__t { font-family: var(--lm-font-headline); font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em; } .jr-marquee__s { color: var(--jr-red); margin: 0 0.42em; vertical-align: 0.14em; } /* Rækkerne har hver sin størrelse og vægt, så blokken får dybde i stedet for at ligne tre ens bånd. Den midterste er den store. */ .jr-marquee__row--1 .jr-marquee__t { font-size: clamp(1.6rem, 4.4vw, 4.2rem); } .jr-marquee__row--2 .jr-marquee__t { font-size: clamp(2.1rem, 5.8vw, 5.6rem); } .jr-marquee__row--3 .jr-marquee__t { font-size: clamp(1.4rem, 3.6vw, 3.4rem); } .jr-marquee__row--1 .jr-marquee__s { font-size: clamp(1rem, 2.6vw, 2.4rem); } .jr-marquee__row--2 .jr-marquee__s { font-size: clamp(1.2rem, 3.2vw, 3rem); } .jr-marquee__row--3 .jr-marquee__s { font-size: clamp(0.9rem, 2.2vw, 2rem); } /* Midterrækken i gradienten, de to andre i mørk — ellers bliver fladen for larmende. */ .jr-marquee__row--2 .jr-marquee__t { background: var(--jr-gradient); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .jr-marquee__row--1 .jr-marquee__t, .jr-marquee__row--3 .jr-marquee__t { color: var(--jr-text); } /* Den oprindelige paragraf med alle titlerne på én linje er nu overflødig. */ .jr-hits-section .jr-hits { display: none; } @media (prefers-reduced-motion: reduce) { .jr-marquee { transform: none; } } /* --- Sangtitlerne ---------------------------------------------------------- Stod som én lang grå masse. Nu har hver titel sin egen størrelse, så blokken får den samme ujævne rytme som teksterne på plakaten. */ .jr-hit { display: inline; } .jr-hit--lg { font-size: 1.18em; } .jr-hit--md { font-size: 1em; } .jr-hit--sm { font-size: 0.82em; } .jr-hits__sep { color: var(--jr-red); margin: 0 0.3em; font-size: 0.7em; vertical-align: 0.18em; } /* --- Baggrunden bag sangtitlerne ------------------------------------------- Den levende mesh lå for langt fra keyvisualet. Sektionerne får i stedet plakatens eget cremepapir med en varm tone, og teksten går tilbage til mørk. Vil man have mesh'en igen, er det denne ene blok der skal fjernes — canvas'et bliver stadig tegnet af joyride.js, det er bare skjult. */ /* Meshen er tilbage — nu i keyvisualets palet (se joyride.js). Den gamle vinyl-palet var den, der lå for langt fra plakaten. */ .jr-mesh:not(.jr-mesh--live), .lm-page-hero:not(.jr-mesh--live) { background: radial-gradient(120% 90% at 50% 0%, rgba(255, 210, 63, 0.22), transparent 60%), radial-gradient(90% 80% at 8% 100%, rgba(228, 0, 43, 0.14), transparent 62%), radial-gradient(90% 80% at 92% 100%, rgba(108, 195, 26, 0.16), transparent 62%), #fbf1e0 !important; } /* Overskrifterne undtages: nu hvor bunden er lyst papir, skal de have gradienten som alle andre overskrifter på sitet. */ .jr-mesh .lm-section__content, .jr-mesh .jr-hits, /* Titelbanneret på undersiderne er fjernet: sidens navn står allerede i menuen og i sektionens egen overskrift, så banneret var en tom gentagelse der skubbede indholdet en skærmhøjde ned. Reglerne herunder står tilbage, hvis det skal frem igen — så er det bare denne ene display:none der skal væk. */ .lm-page-hero { display: none !important; } /* Banneret bar headerens højde (parentens style.css: .lm-page-hero padding-top: calc(var(--lm-header-height) + ...)). Da det blev skjult, forsvandt den luft med det, og den første sektion på undersiderne lagde sig ind under den faste header — tydeligst på køb billet-siden, hvor splashen blev skåret midt over. Luften lægges derfor på sektionen i stedet. --lm-header-height sættes af parentens theme.js ved indlæsning og resize. */ body:not(.home) .lm-main > .lm-section:first-of-type, body:not(.home) .lm-main > .lm-page-hero + .lm-section { padding-top: calc(var(--lm-header-height, 120px) + clamp(1.5rem, 3vw, 3rem)); } .lm-page-hero { position: relative; } .lm-page-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 4; background: var(--jr-gradient); } .lm-page-hero.jr-mesh--live .lm-page-hero__title, .lm-page-hero.jr-mesh--live h1 { color: var(--jr-text) !important; -webkit-text-fill-color: var(--jr-text) !important; text-shadow: none !important; } /* Overskrift og sangtitler får gradienten som alle andre overskrifter på papiret — nu hvor bunden er lys nok til at bære den. */ .jr-hits-section .lm-section__heading, .lm-page-hero.jr-mesh--live .lm-page-hero__title { background: var(--jr-gradient) !important; background-size: 100% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; text-shadow: none !important; } .jr-hits-section .jr-hits { color: var(--jr-text) !important; text-shadow: none !important; } .jr-hits-section .jr-hits__more { color: var(--jr-red) !important; text-shadow: none !important; font-size: 0.5em; letter-spacing: 0.18em; } /* ========================================================================== UNDERSIDERNE Fire sider der alle led af samme sag: masser af tekst, ingen rytme og ingen vægt. Herunder får hver af dem det, den mangler. ========================================================================== */ /* --- Om forestillingen ----------------------------------------------------- Teksten var sat i en smal søjle med stor linjeafstand, hvilket gjorde siden dobbelt så lang som nødvendigt og fik den til at fremstå tung. Bredere spalte, strammere linjer, og første afsnit i hvert modul løftes som manchet — så har øjet noget at gribe fat i. */ .page-template-page-about .lm-section__content, .page-template-page-about .lm-image-media__text { max-width: 68ch; } .page-template-page-about .lm-section__content p, .page-template-page-about .lm-image-media__text p { line-height: 1.62; margin-bottom: 0.9em; } /* Manchetten: første afsnit efter overskriften står større og mørkere. */ .page-template-page-about .lm-image-media__text > p:first-of-type, .page-template-page-about .lm-section__content > p:first-of-type { font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.3rem); line-height: 1.5; font-weight: 500; color: var(--jr-text); } /* Adskillelse mellem sektionerne — ellers flyder de sammen til én lang tekstflade. Hver anden sektion får papirtonen en anelse dybere plus en hårfin gradientstreg foroven. */ .page-template-page-about .lm-section:nth-of-type(even) { background: linear-gradient(180deg, rgba(255, 210, 63, 0.10), rgba(255, 210, 63, 0.03)); } .page-template-page-about .lm-section + .lm-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(560px, 70%); height: 3px; background: var(--jr-gradient); } .page-template-page-about .lm-section { position: relative; } /* Bilen står som fritlagt PNG uden ramme; pressefotoet får en gradientkant som kortene andre steder på sitet. */ .jr-media-plain .lm-image-media__media img { box-shadow: none; } .page-template-page-about .lm-image-media__media img { border: 5px solid transparent; border-image: var(--jr-gradient) 1; } .jr-media-plain .lm-image-media__media img { border: 0; } /* --- Medvirkende ----------------------------------------------------------- Ballonerne på kortene var små mærker i toppen. De gøres større og får lov at rage ud over kortets kant, så kortene ikke ligner celler i et skema. */ .lm-person-card:not(:has(.lm-person-card__media)) { overflow: visible; padding-top: clamp(3.4rem, 5vw, 4.6rem); } .lm-person-card:not(:has(.lm-person-card__media))::before { top: clamp(-1.6rem, -2.2vw, -1.1rem); width: clamp(46px, 5.4vw, 74px); filter: drop-shadow(0 10px 18px rgba(120, 60, 30, 0.22)); z-index: 2; } /* Der stod et halvt skærmbillede tomt mellem introteksten og kortene. Luften kom fra TO sektioner: kortenes egen padding-top og — den store — introsektionens padding-bottom på 86px. Begge skæres ned her. Introen rammes kun når den faktisk efterfølges af kort, så sider uden kort beholder deres luft. */ .lm-section:has(.lm-person-card) { padding-top: clamp(0.5rem, 1vw, 1rem) !important; } .lm-section:has(.lm-page-intro):has(+ .lm-section .lm-person-card) { padding-bottom: clamp(0.5rem, 1vw, 1rem) !important; } /* Sidste afsnit i introen slæbte sin egen bundmargen med. */ .lm-page-intro__text > *:last-child { margin-bottom: 0; } /* --- Kortenes bund: den levende mesh i stedet for hvid --------------------- Otte hvide flader i række var det eneste på siden, der ikke var creme-papir. Canvas'et skydes ind af assets/js/joyride.js (se SELECTOR der); her giver vi det plads: indholdet skal ligge OVER det, og kortets egen baggrund skal væk, så der ikke ligger en hvid flade og lyser igennem i det øjeblik, hvor canvas'et endnu ikke er tegnet. Rammen i logoets gradient bliver: canvas'et dækker kun polstringskassen, ikke kanten. */ .lm-person-card:not(:has(.lm-person-card__media)) { background: var(--lm-white, #fdf8ee); } .lm-person-card:not(:has(.lm-person-card__media)) > *:not(.jr-mesh__canvas) { position: relative; z-index: 1; } /* Meshen er bygget til en sektion i fuld bredde. På et kort på 200px bliver hele paletten presset sammen på lidt plads, og de mættede felter tog kontrasten fra rolleteksten, der er rød. Dæmpet ned mod kortets creme bliver den til tonet papir — stadig levende, men navn og rolle bliver ved med at bære. */ .lm-person-card .jr-mesh__canvas { opacity: 0.42; } /* Uden WebGL: et roligt creme-forløb i samme palet. Den fælles .jr-mesh--fallback er bygget til en sektion i fuld bredde og bliver alt for mættet på et kort på 200px. */ .lm-person-card.jr-mesh--fallback { background: radial-gradient(120% 90% at 20% 0%, rgba(255, 210, 63, 0.30), transparent 62%), radial-gradient(110% 90% at 90% 100%, rgba(108, 195, 26, 0.22), transparent 60%), radial-gradient(110% 90% at 0% 100%, rgba(228, 0, 43, 0.16), transparent 58%), #fdf6ea !important; } /* Footerens ballonklynge stikker med vilje op over footerkanten og vokser ind i sektionen ovenover — sådan ser den ud på forsiden, og sådan skal den se ud alle steder. Løftet over footeren (z-index 4) gives derfor KUN til den sektion, hvor klyngen ellers ville lande oven i tekst: linjen under kortene på medvirkende. Den sektion har gennemsigtig bund, så ballonerne ses stadig. Gav man løftet til hver sidste sektion, forsvandt klyngen bag de sektioner, der HAR en bund — på køb billet-siden så det ud som om ballonerne blev klippet af ved sektionskanten. */ /* Footerklyngen når 157px op på telefon, hvor undersidernes sidste sektion kun har ~48px bund. På forsiden er der luft nok til at ballonerne vokser op i en tom flade; på køb billet-siden landede de oven i det nederste bykort. De får derfor plads at vokse i i stedet for at blive holdt tilbage. */ @media (max-width: 600px) { body:not(.home) .lm-main > .lm-section:last-of-type { padding-bottom: clamp(6rem, 26vw, 8.5rem); } } .lm-section:has(.jr-cast-outro) { position: relative; z-index: 4; /* Luft nok til at klyngen har et sted at vokse op i. */ padding-bottom: clamp(3.5rem, 7vw, 5.5rem); } /* --- Den afsluttende linje under kortene -------------------------------------- „Samt stort ensemble …“ er ikke brødtekst, det er plakatens sidste stribe. Derfor overskriftsskriften, versaler og de to nøgleord i logoets gradient — samme greb som bannerne på kølerhjelmen. */ .jr-cast-outro { /* 40rem frem for 54: ved den brede spalte faldt kun det sidste ord ned på linje to, hvilket ser ud som en fejl. Smallere spalte fordeler teksten jævnt over linjerne. */ max-width: 40rem; margin: clamp(2.25rem, 4.5vw, 3.5rem) auto 0; font-family: var(--lm-font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.25; font-size: clamp(0.95rem, 0.7vw + 0.75rem, 1.35rem); color: var(--jr-text); text-align: center; } .jr-cast-outro strong { font-weight: 800; background: var(--jr-gradient); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @media (max-width: 600px) { .jr-cast-outro { font-size: 1rem; } } /* Gruppeoverskriften („Hovedroller“) siger intet, når der kun er én gruppe. */ .lm-section:has(.lm-person-card) .lm-container > h2:first-of-type:last-of-type { display: none; } /* --- Credits --------------------------------------------------------------- Siden gentog sit eget navn tre gange (menu, skjult H1, overskrift), og listen stod som navne i luften. Nu ligger hele listen i én kasse med den levende mesh som bund, striben sidder inde i kassen lige over første credit, og ballonerne springer ud af kassens sider. Kompositionen står i page-credits.php. */ .lm-section--credits { position: relative; /* Ballonerne stikker ud af kassen. De skal have lov — men ikke give vandret scroll på smalle skærme. Sektionen klipper derfor ved sin egen kant, ikke ved kassens. */ overflow: hidden; /* Footerens ballonklynge stikker 117-160px OP over footerkanten (det er med vilje: på forsiden vokser den ind i sektionen ovenover). Her er der kun ~48px ned til footeren, så en grøn ballon lagde sig hen over den grønne ende af „THOMAS LANGKJÆR“. Footeren ligger på z-index 3, så sektionen løftes over den: de forsvinder bag kassen i stedet for at ligge oven på navnet, og de ses stadig i den gennemsigtige flade ved siden af. */ z-index: 4; padding-bottom: clamp(3.5rem, 7vw, 5.5rem); } .jr-credits { position: relative; /* .jr-mesh sætter overflow:hidden — det skal væk her, ellers bliver ballonerne klippet ved kassens kant, og hele pointen forsvinder. Canvas'et ligger på inset:0 og holder sig inde i kassen alligevel. */ overflow: visible !important; max-width: 62rem; margin: 0 auto; padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.25rem); background: var(--lm-white, #fdf8ee); border: 4px solid transparent; border-image: var(--jr-gradient) 1; box-shadow: 0 26px 60px rgba(120, 60, 30, 0.18); } /* Samme greb som på kortene til medvirkende: meshen er bygget til en flade i fuld bredde, og i fuld styrke tager den kontrasten fra de små røde rolletekster. Dæmpet bliver den til tonet papir. */ .jr-credits .jr-mesh__canvas { opacity: 0.38; } .jr-credits > .jr-credits__inner { position: relative; z-index: 2; } /* Sidste række slæbte sin egen bundmargen med og efterlod et tømt felt nederst i kassen. */ .jr-credits .lm-credits__row:last-child { padding-bottom: 0; } /* Stregen tegnes i rækkens overkant. Skal den ligge midt i mellemrummet, skal luften over og under den være ens — og det var to ting, der spolerede det: 1. de fremhævede rækker havde ekstra padding-bottom 2. listen har sin egen `gap` mellem rækkerne, og HELE den luft lagde sig OVER stregen (målt: 62px over, 31px under) Gap'en nulstilles, og al luft lægges i rækkernes egen, ens polstring. */ .jr-credits .lm-credits { gap: 0; } .jr-credits .lm-credits__row, .jr-credits .lm-credits__row--highlighted { /* Parenten giver hver række margin-bottom: 32px. Den luft lagde sig HELT over stregen — det var 32 af de 39px forskel. */ margin-bottom: 0; padding-top: clamp(1.6rem, 3.2vw, 2.7rem); padding-bottom: clamp(1.6rem, 3.2vw, 2.7rem); } /* Rollerne får sitets stribe i det lille format. Alle er røde: den grønne bærer ikke hvid tekst i den størrelse (1,9:1 mod rødts 4,9:1). Variationen kommer fra hældningen, der skifter side række for række. */ /* Personen er en flex-kolonne i parent. Flex-børn blokificeres, så striben ville blive strakt ud i fuld bredde uanset inline-block. Derfor block her, og centreringen klares med text-align. */ .jr-credits .lm-credits__person { display: block; text-align: center; } .jr-credits .lm-credits__title { display: inline-block; /* Parenten sætter opacity: 0.7 på rolleteksten — fint da den var løs tekst, men på en stribe dæmper den HELE kassen, og den røde blev lyserød. Striberne på resten af sitet er fuldt mættede. */ opacity: 1; background: var(--jr-red); color: #fff; padding: 0.32em 0.85em; font-size: clamp(0.6rem, 0.35vw + 0.5rem, 0.7rem); letter-spacing: 0.14em; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 4px 11px rgba(0, 0, 0, 0.16); transform: rotate(-1.8deg); margin-bottom: 0.75em; } .jr-credits .lm-credits__row:nth-child(even) .lm-credits__title { transform: rotate(1.6deg); } /* Farverne skifter række for række: rød → grøn → gul, som striberne på plakaten. Tekstfarven følger med, for hvid bærer kun på den røde — på grøn og gul er den nede omkring 2:1, mens den mørke tekstfarve giver 10-12:1. Det er også den samme kombination som „FORPREMIERE“-mærket på datokortene. */ .jr-credits .lm-credits__row:nth-child(3n+2) .lm-credits__title { background: var(--jr-green); color: var(--jr-text); text-shadow: none; } .jr-credits .lm-credits__row:nth-child(3n) .lm-credits__title { background: var(--jr-yellow); color: var(--jr-text); text-shadow: none; } /* Rækken med tre roller: hældningen skifter fra stribe til stribe, så de tre ikke står som en stemplet række. */ .jr-credits .lm-credits__person:nth-child(2) .lm-credits__title { transform: rotate(1.4deg); } .jr-credits .lm-credits__person:nth-child(3) .lm-credits__title { transform: rotate(-1.2deg); } .jr-credits .lm-credits__person--highlighted .lm-credits__title { font-size: clamp(0.66rem, 0.4vw + 0.55rem, 0.8rem); padding: 0.34em 1em; margin-bottom: 0.6em; } /* Keyvisualets logo som kassens hoved. Bredden følger kassen, så det bliver ved med at fylde det samme uanset skærm. */ .jr-credits__logo { display: block; width: min(460px, 82%); height: auto; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); } .jr-credits__text { max-width: 60ch; margin: 0 auto clamp(1.25rem, 2.5vw, 2rem); text-align: center; color: #4a463f; } /* Ballonlaget må ikke klippe — det er det, der lader dem springe ud af kassen. Det ligger over meshen, men under teksten. Barnevælgeren er nødvendig: .jr-mesh > *:not(.jr-mesh__canvas) sætter position:relative på alle børn og vinder ellers på specificitet. Så falder inset:0 bort, laget bliver 0px højt, og alle tolv balloner klumper sig sammen i kassens overkant. */ .jr-credits > .jr-credits-balloons { position: absolute; inset: 0; z-index: 1; overflow: visible; pointer-events: none; } .jr-credits-balloons .jr-scatter-balloon { opacity: 1; filter: drop-shadow(0 16px 30px rgba(120, 60, 30, 0.28)); } /* Under 900px er kassen kun et par hundrede pixels bred. Hver anden ballon ryger, og resten krymper, så de bliver ved med at være pynt i kanten og ikke en væg af balloner hen over navnene. */ @media (max-width: 900px) { .jr-credits-balloons .jr-b:nth-child(2n) { display: none; } .jr-credits-balloons .jr-b { width: 13% !important; } } @media (max-width: 600px) { .jr-credits-balloons .jr-b:nth-child(3n) { display: none; } .jr-credits-balloons .jr-b { width: 14% !important; } /* Kassen er kun ~340px bred her, og de grønne balloner lagde sig tæt op ad den grønne ende af navnenes gradient — bogstaverne forsvandt i ballonen. Laget gøres bredere end kassen, så de samme procenter lander længere ude. Sektionen klipper stadig, så der kommer ikke vandret scroll. */ .jr-credits > .jr-credits-balloons { inset: 0 -9%; } } .lm-credits { max-width: none; margin: 0 auto; } .lm-credits__row { position: relative; gap: clamp(1.2rem, 3vw, 3rem); padding: clamp(0.9rem, 1.8vw, 1.5rem) 0; } .lm-credits__row + .lm-credits__row::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(340px, 72%); height: 2px; background: linear-gradient(90deg, transparent, rgba(228, 0, 43, 0.35), transparent); } .lm-credits__title { display: block; font-family: var(--lm-font-headline); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jr-red); margin-bottom: 0.25em; } .lm-credits__name { display: block; font-family: var(--lm-font-headline); font-weight: 700; font-size: clamp(1.02rem, 0.5vw + 0.9rem, 1.32rem); color: var(--jr-text); line-height: 1.2; } /* Øverste række — komponist og tekstforfatter — bærer siden. Polstringen skal være den SAMME som på alle andre rækker. Stregen tegnes i rækkens overkant, så mellemrummet mellem to rækker er den øverstes padding-bottom plus den nederstes padding-top — er de to ikke ens, ligger stregen ikke i midten. Det var netop det, der var galt: de fremhævede rækker havde ekstra luft forneden. */ .lm-credits__person--highlighted .lm-credits__name { font-size: clamp(1.6rem, 1.6vw + 1rem, 2.6rem); font-weight: 800; text-transform: uppercase; background: var(--jr-gradient); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .lm-credits__person--highlighted .lm-credits__title { font-size: 0.82rem; } /* Række 2 er nu „Originalt manus“ og „Manus“ — to sidestillede roller, der skal stå ved siden af hinanden. Den tidligere regel, der stablede rækken, hørte til den gamle sammensætning (Manuskript + Efter romanen) og er væk. */ /* --- Køb billet ------------------------------------------------------------ Siden der skal sælge billetterne. Spilletiderne var en grå liste, og VIP- kortene stod på ren sort. */ /* Billetsiden bruger ikke sektionsmodifikatorer, så sektionerne findes på deres indhold i stedet. */ .lm-section:has(.lm-date-card), .lm-section:has(.lm-vip-card), .lm-section:has(.lm-city-card) { position: relative; } /* Spilletiderne: hvidt kort med gradientkant i venstre side, tydeligere dato og luft nok til at rækkerne kan skelnes. */ .lm-date-card { background: #fffdf8 !important; border: 0 !important; border-left: 5px solid transparent !important; border-image: var(--jr-gradient) 1 !important; box-shadow: 0 8px 20px rgba(120, 60, 30, 0.09); transition: transform 0.2s ease, box-shadow 0.2s ease; } .lm-date-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(120, 60, 30, 0.16); } .lm-date-card__day, .lm-date-card__daynum { font-family: var(--lm-font-headline); font-weight: 800; color: var(--jr-text); } .lm-date-card__month { color: var(--jr-red); text-transform: uppercase; letter-spacing: 0.1em; } /* VIP-kortene: billedet tilbage, mørk bund kun som overlay på fotoet, og en gradientkant hele vejen rundt. */ .lm-vip-card { background: #fffdf8 !important; border: 4px solid transparent; border-image: var(--jr-gradient) 1; box-shadow: 0 16px 36px rgba(120, 60, 30, 0.14); overflow: hidden; } .lm-vip-card__media, .lm-vip-card__image { position: relative; } .lm-vip-card__media img, .lm-vip-card__image img { display: block; width: 100%; height: clamp(180px, 22vw, 280px); object-fit: cover; } /* Titlen stod i regnbuegradienten. Rød på et rødt teaterbillede forsvandt, og regnbue signalerer ikke eksklusivt. Cremehvid med en guldstreg under gør det — gradienten bliver i rammen, hvor den holder forbindelsen til resten af sitet. */ .lm-vip-card__title { font-family: var(--lm-font-headline); font-weight: 800; text-transform: uppercase; color: #fff8ec !important; -webkit-text-fill-color: #fff8ec !important; background: none; letter-spacing: 0.01em; padding-bottom: 0.34em; border-bottom: 2px solid var(--jr-yellow); width: fit-content; } .lm-vip-card__subtitle { color: var(--jr-red); text-transform: uppercase; letter-spacing: 0.12em; } /* Kortet var mørkt før; al tekst i det er sat til hvid i parenten. Nu står det på creme, så alt skal tilbage til den mørke tekstfarve. */ .lm-vip-card, .lm-vip-card p, .lm-vip-card li, .lm-vip-card span:not(.lm-vip-card__subtitle), .lm-vip-card__body, .lm-vip-card__content, .lm-vip-card__description, .lm-vip-card__features, .lm-vip-card__feature { color: var(--jr-text) !important; } .lm-vip-card__description { opacity: 0.92; } .lm-vip-card__price, .lm-vip-card__amount { font-family: var(--lm-font-headline); font-weight: 800; color: var(--jr-red) !important; } /* Ballonen der lå oven i kortets overkant. Den hørte til personkortene. */ .lm-vip-card::before { content: none !important; } /* --- Turnébyerne får den genererede byfacade som bund, så sektionen ikke er endnu en hvid flade. Billedet er dæmpet, så kortene stadig bærer. */ .lm-section:has(.lm-city-card) > .lm-container, .lm-section:has(.lm-city-card) > .container { position: relative; z-index: 1; } /* --- Splash-mærket ------------------------------------------------------------ Parenten sætter top/right på et element med position:static, så værdierne ignoreres og mærket lander inline ved siden af overskriften. Ankeret er .lm-container og ikke sektionen: containeren er altid smallere end skærmen, og det var netop det, der før sendte mærket ud over kanten. */ .lm-section:has(.lm-section__splash) > .lm-container, .lm-section:has(.lm-section__splash) > .container { position: relative; } .lm-section__header--with-splash { position: static; } .lm-section__splash { /* Parenten skjuler mærket under 1200px (den viser det kun i sin egen @media min-width:1200px). Vi placerer det selv i alle bredder, så det skal tændes her — ellers er der ingen splash på tablet og telefon. */ display: block !important; position: absolute !important; /* Parenten sætter right: -400px fra indstillingerne. Uden !important vinder den, og mærket ryger 400px ud over containeren. */ top: clamp(4px, 0.8vw, 14px) !important; /* Ikke 0: rotationen gør bounding-boksen bredere end elementet, og på bredder hvor containeren rører skærmkanten stak mærket 9px udenfor. */ right: clamp(10px, 1.6vw, 30px) !important; bottom: auto !important; left: auto !important; width: clamp(96px, 12vw, 190px) !important; margin: 0 !important; transform: rotate(-7deg) !important; transform-origin: center; filter: drop-shadow(0 10px 22px rgba(120, 60, 30, 0.28)); z-index: 5; pointer-events: none; } .lm-section__splash img { display: block; width: 100%; height: auto; } /* Under 900px er overskriften så bred, at et mærke i hjørnet uundgåeligt lander oven i den. Der løftes det op over sektionens overkant i stedet, hvor der altid er luft. */ @media (max-width: 900px) { .lm-section__splash { width: clamp(78px, 17vw, 120px) !important; /* Kun et lille løft: heroen er væk på undersiderne, så første sektion starter lige under den faste header — et stort løft skar toppen af mærket af bag headeren. */ top: calc(-1 * clamp(78px, 17vw, 120px) / 6) !important; right: 2% !important; } } /* ========================================================================== KØB BILLET — baggrunde og kort Siden skal sælge, og den stod som tre hvide flader i træk. Hver sektion får nu sin egen bund, så de kan skelnes, og alle tre bunde er hentet fra samme palet som resten af sitet. ========================================================================== */ /* --- 1. Spilletiderne i København. Bunden er nu den levende mesh (klassen sættes i functions.php), så her skal kun farven bag den, indtil WebGL er klar. */ .lm-section:has(.lm-date-card) { background: #fdf8ee; } /* Canvas'et lægges ind som første barn med z-index:0, men sektionen hedder .jr-dates-mesh og ikke .jr-mesh, så den fik ikke løftet sit indhold. Canvas'et malede derfor oven på kortene: kun dét der havde opacity eller transform (måneden, ikonerne og kortet under hover) kom op over det. */ .jr-dates-mesh { position: relative; isolation: isolate; } .jr-dates-mesh > *:not(.jr-mesh__canvas) { position: relative; z-index: 1; } /* Statusbjælken var en grå kasse med små prikker — den kunne knap ses, og den fortæller noget køberen har brug for. Nu et hvidt kort med gradientkant, større prikker og versaler. */ .lm-dates-legend { /* inline-flex + margin:auto centrerer ikke: auto-margener virker kun på block-niveau. Derfor flex med fit-content-bredde. */ display: flex; width: fit-content; max-width: 100%; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(0.8rem, 2vw, 2rem); background: #fffdf8 !important; border: 0 !important; border-top: 4px solid transparent !important; border-image: var(--jr-gradient) 1 !important; padding: clamp(0.7rem, 1.4vw, 1rem) clamp(1.1rem, 2.4vw, 2rem) !important; box-shadow: 0 10px 26px rgba(120, 60, 30, 0.12); margin: 0 auto clamp(1.6rem, 3vw, 2.6rem); } .lm-dates-legend__item { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--lm-font-headline); font-weight: 700; font-size: clamp(0.72rem, 0.9vw, 0.86rem); letter-spacing: 0.1em; text-transform: uppercase; color: var(--jr-text) !important; white-space: nowrap; } .lm-dates-legend__dot { width: 0.9em; height: 0.9em; border-radius: 0 !important; box-shadow: 0 0 0 2px rgba(20, 20, 31, 0.10); } /* --- København-kortene: hvidt papir, kraftig dato til venstre og en statusstribe i kanten. Datoen er dét man scanner efter, så den skal bære kortet. --- */ .lm-date-card { align-items: stretch; padding: 0 !important; gap: 0 !important; } .lm-date-card__day { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: clamp(64px, 7vw, 92px); padding: clamp(0.7rem, 1.4vw, 1.1rem) 0.6rem; background: rgba(228, 0, 43, 0.06); } .lm-date-card__day-number { font-family: var(--lm-font-headline); font-weight: 800; font-size: clamp(1.7rem, 2.4vw, 2.4rem); line-height: 1; color: var(--jr-text); } .lm-date-card__day-month { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jr-red); margin-top: 0.25em; } .lm-date-card__info { padding: clamp(0.7rem, 1.4vw, 1.1rem) clamp(0.8rem, 1.6vw, 1.2rem); } .lm-date-card__badge { font-family: var(--lm-font-headline); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.62rem; padding: 0.3em 0.7em; } .lm-date-card__btn { margin: clamp(0.6rem, 1.2vw, 1rem); } /* --- 2. VIP-pakkerne: mørkt bånd. Det er sidens dyreste produkt, og en mørk flade mellem to lyse løfter den. Ballonklumper i begge sider som på forsiden — her som baggrundslag, da billetsiden ikke er modulbaseret og derfor ikke har temaets ballon-hook. */ .lm-section:has(.lm-vip-card) { position: relative; background: radial-gradient(80% 70% at 6% 40%, rgba(228, 0, 43, 0.30), transparent 60%), radial-gradient(80% 70% at 94% 60%, rgba(108, 195, 26, 0.26), transparent 60%), #14141f; overflow: hidden; } /* Ballonerne lå helt ude ved skærmkanten og hang ikke sammen med kortene. De rykkes ind, så de flankerer containeren i stedet for viewporten. */ .lm-section:has(.lm-vip-card)::before, .lm-section:has(.lm-vip-card)::after { content: ''; position: absolute; top: 0; bottom: 0; width: clamp(130px, 15vw, 250px); pointer-events: none; background-repeat: no-repeat; opacity: 0.9; } /* Venstre klump: fire balloner i forskellig størrelse, tæt pakket. */ .lm-section:has(.lm-vip-card)::before { left: max(0px, calc(50% - 700px - 40px)); background-image: url('../../uploads/joyride_balloon_red.png'), url('../../uploads/joyride_balloon_green.png'), url('../../uploads/joyride_balloon_orange.png'), url('../../uploads/joyride_balloon_multi.png'); background-position: -14% 12%, 48% 30%, 6% 58%, 62% 74%; background-size: 78% auto, 44% auto, 62% auto, 34% auto; } /* Højre klump: samme greb, spejlet og med en anden rytme. */ .lm-section:has(.lm-vip-card)::after { right: max(0px, calc(50% - 700px - 40px)); background-image: url('../../uploads/joyride_balloon_green.png'), url('../../uploads/joyride_balloon_multi.png'), url('../../uploads/joyride_balloon_red.png'), url('../../uploads/joyride_balloon_orange.png'); background-position: 112% 18%, 46% 40%, 96% 66%, 34% 84%; background-size: 82% auto, 40% auto, 58% auto, 32% auto; } .lm-section:has(.lm-vip-card) > .lm-container { position: relative; z-index: 2; } /* Overskriften står nu på mørk bund. */ .lm-section:has(.lm-vip-card) .lm-section__subheader { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); } @media (max-width: 900px) { .lm-section:has(.lm-vip-card)::before, .lm-section:has(.lm-vip-card)::after { width: 26vw; opacity: 0.45; } } /* Luft mellem overskriften og kortene — de klæbede sammen. */ .lm-section:has(.lm-vip-card) .lm-section__header { margin-bottom: clamp(2.2rem, 4.5vw, 4rem); } .lm-section:has(.lm-vip-card) { padding-top: clamp(3.5rem, 7vw, 6rem) !important; padding-bottom: clamp(3.5rem, 7vw, 6rem) !important; } /* --- De to VIP-kort skal flugte linje for linje --------------------------- Ikke bare være lige høje: hvis venstre korts overskrift fylder to linjer, skal højres punktliste stadig begynde i samme højde. Det kræver at begge kort deler de SAMME rækker, og det kan kun subgrid. Kortene ligger i .col-md-6-wrappere, som subgrid ikke kan se igennem — derfor display:contents på dem, så kortene bliver rækkens egne felter. */ @media (min-width: 768px) { .lm-section:has(.lm-vip-card) .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: clamp(1rem, 2vw, 2rem); } .lm-section:has(.lm-vip-card) .row > [class*="col-"] { display: contents; } .lm-vip-card { display: grid !important; grid-template-rows: subgrid; grid-row: 1 / span 6; align-content: start; row-gap: clamp(0.5rem, 1vw, 0.9rem); } /* Uden subgrid falder kortene tilbage på lige højde — indholdet flugter så ikke linje for linje, men intet går i stykker. */ @supports not (grid-template-rows: subgrid) { .lm-section:has(.lm-vip-card) .row { grid-template-rows: auto; } .lm-vip-card { display: flex !important; flex-direction: column; grid-row: auto; } .lm-vip-card__features { flex: 1; } } } /* --- VIP-kortene: billedet som baggrund, mørkt slør ovenpå, tekst øverst. Før lå billedet som en stribe i toppen med teksten under — det så ud som en nyhedsartikel. Nu er kortet ét billede man kan læse hen over. */ /* Kortet: gradientramme udenpå, en tynd guldlinje indeni. To rammer tæt på hinanden er dét, der får noget til at ligne en indrammet billet frem for en boks. */ .lm-vip-card { position: relative; display: flex; flex-direction: column; isolation: isolate; min-height: clamp(420px, 46vw, 560px); outline: 1px solid rgba(255, 210, 63, 0.55); outline-offset: -9px; transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease; padding: clamp(1.6rem, 3vw, 2.6rem) !important; overflow: hidden; background-color: #14141f !important; border: 4px solid transparent; border-image: var(--jr-gradient) 1; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35); } /* Billedet er absolut placeret og indgår ikke i rækkerne. Det må IKKE have grid-area: så bliver dets containing block gitterets område i stedet for kortets kasse, og billedet endte som en indrykket firkant med kortets bund synlig hele vejen rundt. Uden grid-area måles inset:0 mod kortets padding-kasse, altså hele kortet. */ .lm-vip-card__image { position: absolute; /* Negative værdier: inset:0 måles mod polstringskassen, så kortets gradientkant på 4px stod tilbage som en udækket ring. */ inset: -6px; z-index: 0; margin: 0; overflow: hidden; } /* Langsom zoom. Billederne er stillbilleder uden liv i sig — bevægelsen er dét, der får kortet til at føles levende frem for som en plakat. */ .lm-vip-card__image img { transform: scale(1.06); transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1); animation: jr-vip-zoom 18s ease-in-out infinite alternate; } @keyframes jr-vip-zoom { from { transform: scale(1.06); } to { transform: scale(1.14); } } .lm-vip-card:hover .lm-vip-card__image img { animation-play-state: paused; transform: scale(1.16); } @media (prefers-reduced-motion: reduce) { .lm-vip-card__image img { animation: none; } } .lm-vip-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Sløret: næsten klart foroven, så billedet kan ses, og tæt forneden hvor teksten står. Uden det kan hverken beskrivelse eller punkter læses. */ /* Sløret er defineret længere oppe. Her stod tidligere en kopi med de gamle værdier — og da den lå sidst i filen, vandt den, så alle rettelser af sløret var uden virkning. */ .lm-vip-card > *:not(.lm-vip-card__image) { position: relative; z-index: 2; } .lm-vip-card__title { font-size: clamp(1.6rem, 2.4vw, 2.4rem); margin-bottom: 0.15em; } /* Undertitlen stod centreret mens titlen stod til venstre. */ .lm-vip-card, .lm-vip-card__subtitle, .lm-vip-card__description { text-align: left !important; } .lm-vip-card__subtitle { color: var(--jr-yellow) !important; margin-bottom: 0.9em; letter-spacing: 0.14em; font-size: 0.86rem; } .lm-vip-card, .lm-vip-card p, .lm-vip-card li, .lm-vip-card span:not(.lm-vip-card__subtitle), .lm-vip-card__description, .lm-vip-card__features, .lm-vip-card__feature { color: #fff !important; } .lm-vip-card__description, .lm-vip-card__features { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); } .lm-vip-card__description { opacity: 0.96; } .lm-vip-card__title { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); } .lm-vip-card__feature-icon { color: var(--jr-yellow) !important; } /* Et helsides slør gør billedet mudret uden at gøre teksten skarp. I stedet får selve tekstblokken sin egen mørke plade — så står ordene rent, og billedet får lov at være et billede i toppen og bunden. */ /* Første forsøg gav hver tekstlinje sin egen mørke plade. De fik forskellig bredde og efterlod en takket trappe ned gennem kortet. Ét samlet slør over hele kortet er renere: billedet bliver til stemning, og alle ord står lige klart. Se .lm-vip-card::after. */ .lm-vip-card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5); } /* Et strejf af lys der glider hen over kortet ved hover — som lys der fanger en foliebillet. */ .lm-vip-card::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 232, 170, 0.20) 48%, transparent 58%); transform: translateX(-120%); transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); } .lm-vip-card:hover::before { transform: translateX(120%); } .lm-vip-card__prices { align-self: end; } .lm-vip-card > .lm-btn { align-self: end; justify-self: start; margin-top: 0.4rem; } /* --- Splash-mærket i VIP-sektionen ----------------------------------------- Midt over overskriften svævede det frit i det mørke bånd. Fra 1200px er der plads til at hænge det i containerens højre hjørne som et klistermærke — under den bredde bliver det liggende over overskriften, hvor det ikke kan ramme teksten. Ankeret er .lm-container, ikke sektionen: containeren er altid smallere end viewporten, og det var netop dét, der før sendte mærket ud over skærmkanten. */ @media (min-width: 1200px) { .lm-section:has(.lm-vip-card) > .lm-container { position: relative; } .lm-section:has(.lm-vip-card) .lm-section__splash { position: absolute !important; top: 0; right: 0; order: 0; margin: 0 !important; width: clamp(150px, 13vw, 200px) !important; transform: rotate(-8deg) !important; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.45)); z-index: 4; } } /* --- Kontrast i by-rækkerne ------------------------------------------------- To ting var for svage, målt på siden: spillestedet rgba(0,0,0,0.45) på #fff8f2 = 4,0:1 (AA kræver 4,5) knaptekst hvid på gradientens orange = 2,9:1 hvid på gradientens grønne = 1,9:1 Spillestedet får en fast, mørkere tørv i stedet for 45% sort. Knappen beholder brandets forløb, men stopper før den lyse grønne og lægger sig et trin dybere; teksten får desuden en skygge, så kanterne bliver skarpe på det lyseste sted. */ .lm-presale-date__venue, .lm-city-card__venue { color: #6b6259 !important; font-weight: 600; } .lm-presale-date .lm-btn-primary, .lm-city-card .lm-btn-primary { background: linear-gradient(100deg, #c8001f 0%, #d94e00 55%, #b8400a 100%) !important; background-size: 190% 100% !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } /* --- 3. Turnébyerne: samme varme bånd som spilledatoerne på forsiden, med gradientkant i begge ender. Det genererede bybillede er væk — det havde ingen forbindelse til keyvisualet. */ .lm-section:has(.lm-city-card) { background: radial-gradient(120% 90% at 50% 0%, rgba(255, 210, 63, 0.22), transparent 62%), radial-gradient(100% 80% at 10% 100%, rgba(228, 0, 43, 0.14), transparent 60%), radial-gradient(100% 80% at 90% 100%, rgba(108, 195, 26, 0.17), transparent 60%), #fbf1e0; } .lm-section:has(.lm-city-card)::before, .lm-section:has(.lm-city-card)::after { content: ''; position: absolute; left: 0; right: 0; height: 6px; background: var(--jr-gradient); z-index: 2; } .lm-section:has(.lm-city-card)::before { top: 0; } .lm-section:has(.lm-city-card)::after { bottom: 0; } /* ========================================================================== VIP-PAKKERNE — endelig opsætning Denne blok står bevidst SIDST i filen. Stylesheetet indeholdt tidligere hele billetside-afsnittet to gange, og rettelser landede i den kopi der blev overskrevet af den anden. Alt der er afgørende for VIP-kortene samles her, så der ikke kan opstå tvivl om hvad der vinder. ========================================================================== */ /* Billedet sættes af jr-scroll.js som background-image på selve kortet — ikke som barn-element, der kunne forskubbes af gitteret. */ .lm-vip-card { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; overflow: hidden !important; } /* Sløret mellem baggrund og tekst. Uden det står hvid tekst oven i spotlys og guld. */ .lm-vip-card::after { content: '' !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient(180deg, rgba(10, 8, 18, 0.74) 0%, rgba(10, 8, 18, 0.84) 45%, rgba(10, 8, 18, 0.92) 100%), radial-gradient(120% 80% at 50% 0%, rgba(255, 210, 63, 0.12), transparent 65%) !important; pointer-events: none !important; } .lm-vip-card > *:not(.lm-vip-card__image) { position: relative; z-index: 2; } /* Er billedet flyttet op på kortet, skal laget væk. */ .lm-vip-card[data-jr-bg] .lm-vip-card__image { display: none !important; } /* Forskydning frem for zoom: background-size i procent strækker billedet. */ .lm-vip-card[data-jr-bg] { animation: jr-vip-drift 22s ease-in-out infinite alternate; } @keyframes jr-vip-drift { from { background-position: 45% 50% !important; } to { background-position: 55% 50% !important; } } @media (prefers-reduced-motion: reduce) { .lm-vip-card[data-jr-bg] { animation: none; } } /* Afstanden mellem de to kort. display:contents på .col-md-6 fjerner Bootstraps egen gutter, så gitterets gap er det eneste der holder dem fra hinanden — og det skal være tydeligt. */ @media (min-width: 768px) { .lm-section:has(.lm-vip-card) .row { column-gap: clamp(1.4rem, 3vw, 3rem) !important; row-gap: 0 !important; } } /* Ballonerne skal ligge synligt ude ved siden af kortene, ikke gemme sig bag dem. 130px uden for containerens kant. */ .lm-section:has(.lm-vip-card)::before { left: max(0px, calc(50% - 700px - 130px)) !important; } .lm-section:has(.lm-vip-card)::after { right: max(0px, calc(50% - 700px - 130px)) !important; } /* ========================================================================== OM FORESTILLINGEN — justeringer ========================================================================== */ /* Eyebrow'en stod centreret over en venstrestillet overskrift. På denne side hører de sammen som ét opslag, så striben følger overskriften til venstre. */ /* Sidens body-klasse er page-template-page-om-forestillingen — ikke -about. Reglen hænges desuden på selve modultypen, så den også gælder billede+tekst andre steder, hvor overskriften allerede står til venstre. */ .page-template-page-om-forestillingen .lm-section__headings, .page-template-page-om-forestillingen .lm-section__heading-group, .lm-section--image_media .lm-section__headings { align-items: flex-start !important; text-align: left !important; } /* .jr-center centrerer striben med margin-inline: auto. Her skal den følge overskriften. */ .page-template-page-om-forestillingen .lm-section__subheading, .page-template-page-om-forestillingen .lm-section__subheader, .lm-section--image_media .lm-section__subheading, .jr-center.lm-section--image_media .lm-section__subheading { margin-left: 0 !important; margin-right: auto !important; } /* --- Rammen om pressebilledet ---------------------------------------------- Billedet stod nøgent på papiret. Det får plakatens eget greb: en tyk kant i logoets gradient, en creme margen indenfor som et opklæbet foto, og et par balloner der stikker frem bag hjørnerne. */ .jr-framed .lm-image-media__media { position: relative; z-index: 1; padding: clamp(0.7rem, 1.4vw, 1.2rem); background: #fffdf8; border: 5px solid transparent; border-image: var(--jr-gradient) 1; box-shadow: 0 22px 48px rgba(120, 60, 30, 0.20); transform: rotate(-1.4deg); } .jr-framed .lm-image-media__media img { display: block; border: 0 !important; box-shadow: none !important; } /* Ballonerne ligger OVEN PÅ rammen og billedet. Bagved forsvandt de halvt ind under kanten; foran ser det ud som om de svæver foran fotoet. */ .jr-framed .lm-image-media__media::before, .jr-framed .lm-image-media__media::after { content: ''; position: absolute; z-index: 3; background-repeat: no-repeat; background-size: contain; pointer-events: none; filter: drop-shadow(0 10px 20px rgba(120, 60, 30, 0.18)); } /* Øverst til venstre og nederst til højre. */ .jr-framed .lm-image-media__media::before { top: clamp(-70px, -6vw, -40px); left: clamp(-64px, -5.5vw, -36px); width: clamp(76px, 9vw, 140px); aspect-ratio: 420 / 557; background-image: url('../../uploads/joyride_balloon_red.png'); transform: rotate(-12deg); } /* Lå tidligere ude til højre for rammen, hvor den skar ind i tekstspalten. Flyttet ind under billedets højre halvdel i stedet. */ .jr-framed .lm-image-media__media::after { right: auto; left: 62%; bottom: clamp(-56px, -4.6vw, -32px); width: clamp(64px, 7.5vw, 116px); aspect-ratio: 420 / 557; background-image: url('../../uploads/joyride_balloon_green.png'); transform: rotate(10deg); } /* To mere, hængt på selve modulet, så der er fire i alt. */ .jr-framed .lm-image-media { position: relative; } .jr-framed .lm-image-media::before, .jr-framed .lm-image-media::after { content: ''; position: absolute; z-index: 4; background-repeat: no-repeat; background-size: contain; aspect-ratio: 420 / 557; pointer-events: none; opacity: 0.92; filter: drop-shadow(0 8px 18px rgba(120, 60, 30, 0.16)); } .jr-framed .lm-image-media::before { top: clamp(-38px, -3.4vw, -18px); right: clamp(-30px, -2.6vw, -14px); width: clamp(52px, 6vw, 92px); background-image: url('../../uploads/joyride_balloon_orange.png'); transform: rotate(14deg); } .jr-framed .lm-image-media::after { bottom: clamp(-34px, -3vw, -16px); left: clamp(-34px, -3vw, -16px); width: clamp(46px, 5.4vw, 84px); background-image: url('../../uploads/joyride_balloon_multi.png'); transform: rotate(-9deg); } /* Sektionen må ikke klippe ballonerne af, men skal stadig holde vandret. */ .jr-framed.lm-section { overflow-x: clip; overflow-y: visible; } @media (max-width: 767px) { .jr-framed .lm-image-media__media { transform: none; } .jr-framed .lm-image-media::before, .jr-framed .lm-image-media::after { display: none; } } /* --- Om forestillingen: rækkefølgen på mobil ------------------------------ Under 992px falder de to søjler sammen til én. Hvad der så skal komme først, afhænger af sektionen — det kan ikke udledes af billedets side, fordi to sektioner har billedet samme sted men skal vendes forskelligt. Derfor en klasse pr. sektion, sat på modulet i admin. --- */ @media (max-width: 991px) { .lm-section--image_media .lm-image-media { display: flex; flex-direction: column; } /* Standard: tekst først, billede efter (sektion 1). */ .lm-section--image_media .lm-image-media__text { order: 1; } .lm-section--image_media .lm-image-media__media { order: 2; margin-top: clamp(1.4rem, 4vw, 2.4rem); } /* Sektion 2: billedet siger ikke noget nyt ved siden af teksten på en telefon — det ryger helt ud, så afsnittet står alene. */ .jr-mob-skjul-billede .lm-image-media__media { display: none !important; } /* Sektion 3: pressefotoet er sektionens indhold, så det kommer først. */ .jr-mob-billede-foerst .lm-image-media__media { order: 1; margin: 0 0 clamp(1.6rem, 5vw, 2.6rem); } .jr-mob-billede-foerst .lm-image-media__text { order: 2; } } /* --- Spilletidernes statusfarve -------------------------------------------- Kortene fik gradientkant i venstre side, og gradienten begynder i rødt. Alle forestillinger så derfor udsolgte ud, selv om de er ledige. Kanten følger nu status og bruger nøjagtig samme tre farver som forklaringen ovenover, så farve og signatur ikke kan komme ud af trit. */ .lm-date-card { border-image: none !important; border-left: 5px solid rgba(20, 20, 31, 0.18) !important; } .lm-date-card--status-available { border-left-color: rgb(34, 197, 94) !important; } .lm-date-card--status-few { border-left-color: rgb(234, 179, 8) !important; } .lm-date-card--status-soldout { border-left-color: rgb(239, 68, 68) !important; } /* Datofeltet tonede rødt af samme grund. Det følger nu også status. */ .lm-date-card__day { background: rgba(20, 20, 31, 0.05); } .lm-date-card--status-available .lm-date-card__day { background: rgba(34, 197, 94, 0.10); } .lm-date-card--status-few .lm-date-card__day { background: rgba(234, 179, 8, 0.12); } .lm-date-card--status-soldout .lm-date-card__day { background: rgba(239, 68, 68, 0.10); } .lm-date-card__day-month { color: rgba(20, 20, 31, 0.55); } .lm-date-card--status-available .lm-date-card__day-month { color: rgb(21, 128, 61); } .lm-date-card--status-few .lm-date-card__day-month { color: rgb(161, 98, 7); } .lm-date-card--status-soldout .lm-date-card__day-month { color: rgb(185, 28, 28); } /* --- VIP-pakkernes indhold ------------------------------------------------- Undertitlen ("The Look" / "Dressed for Success") sættes som sitets banner-eyebrow — samme stribe som over sektionsoverskrifterne. */ .lm-vip-card__subtitle { display: inline-block; width: fit-content; padding: 0.32em 0.9em; background: var(--jr-red); color: #fff !important; font-family: var(--lm-font-headline); font-weight: 800; font-size: clamp(0.72rem, 0.9vw, 0.88rem) !important; letter-spacing: 0.12em; text-transform: uppercase; font-style: normal !important; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); transform: rotate(-1.6deg); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3); margin-bottom: 1.1em !important; } /* Anden pakke får den grønne, som striberne skifter på resten af sitet. */ [class*="col-"]:nth-child(even) .lm-vip-card__subtitle { background: var(--jr-green); transform: rotate(1.4deg); } /* Stjernen i punktlisten får logoets gradient. En inline-SVG kan ikke fyldes med en CSS-gradient, så den skjules og erstattes af et stjernetegn, hvor gradienten kan klippes ned i skriften. */ .lm-vip-card__feature-icon svg { display: none !important; } .lm-vip-card__feature-icon { width: auto !important; height: auto !important; } .lm-vip-card__feature-icon::before { content: '★'; display: block; font-size: 1.05em; line-height: 1.15; background: var(--jr-gradient); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Goodiebag-punkterne er en underliste. Markup et er flad, så de rykkes ind efter position: de fire sidste hører under "En goodiebag bestående af:". */ .lm-vip-card__features li:nth-child(n+4) { margin-left: clamp(0.9rem, 1.8vw, 1.5rem); font-size: 0.95em; } /* Goodiebag-punkterne skal have samme stjerne som de øvrige — de er en del af listen, ikke en anden slags indhold. Kun indrykningen adskiller dem. */ /* "En goodiebag bestående af:" er en overskrift for de fire under den. */ .lm-vip-card__features li:nth-child(3) { margin-bottom: 0.1em; } /* --- Topbaren kun på forsiden ---------------------------------------------- "LION MUSICALS PRÆSENTERER" er en åbning: den hører til dér hvor man møder forestillingen første gang. På undersiderne er den gentagelse, og den skubber menuen 92px ned uden at tilføje noget. */ body:not(.home) .lm-topbar { display: none !important; } /* --- VIP-kortene strammes op ------------------------------------------------ Kortene var høje og luftige, fordi de skulle kunne rumme et billede i toppen. Nu hvor billedet er baggrund, er højden bare tomrum. */ .lm-vip-card { min-height: 0 !important; padding: clamp(1.2rem, 2.2vw, 1.9rem) !important; } @media (min-width: 768px) { .lm-section:has(.lm-vip-card) .row { row-gap: 0 !important; } .lm-vip-card { row-gap: clamp(0.3rem, 0.7vw, 0.6rem) !important; } } .lm-vip-card__title { margin-bottom: 0.1em !important; padding-bottom: 0.26em; } .lm-vip-card__subtitle { margin-bottom: 0.7em !important; } .lm-vip-card__description { margin-bottom: 0 !important; } .lm-vip-card__description p:last-child { margin-bottom: 0; } .lm-vip-card__features { margin: 0.4em 0 0 !important; display: flex; flex-direction: column; gap: clamp(0.3rem, 0.7vw, 0.55rem); } .lm-vip-card__features li { padding: 0 !important; line-height: 1.32; } .lm-vip-card > .lm-btn { margin-top: clamp(0.9rem, 1.8vw, 1.4rem) !important; } /* Rettighedslinjen under creditlisten. Mindre og dæmpet — den skal kunne læses, men ikke konkurrere med navnene ovenfor. */ /* Rettighedslinjen står nederst i kassen. En tynd streg og mindre, dæmpet skrift skiller den fra creditlisten, så Malmö Opera ikke læses som en rolle på linje med kapelmesteren. */ .jr-credits-note { margin: clamp(1.6rem, 3.2vw, 2.6rem) auto 0; padding-top: clamp(1.1rem, 2.2vw, 1.8rem); max-width: 46rem; border-top: 1px solid rgba(228, 0, 43, 0.22); text-align: center; font-size: clamp(0.78rem, 0.45vw + 0.68rem, 0.9rem); line-height: 1.6; color: rgba(20, 20, 31, 0.66); } .jr-credits-note a { color: var(--jr-red); text-decoration: underline; text-underline-offset: 0.18em; } .jr-credits-note__sep { margin: 0 0.5em; color: rgba(20, 20, 31, 0.35); } .jr-credits-note strong { font-family: var(--lm-font-headline); font-weight: 700; letter-spacing: 0.04em; color: var(--jr-text); } /* --- Goodiebaggen som sin egen kasse --------------------------------------- Fem ens stjerner i forlængelse af pakkens øvrige punkter gav ingen struktur — man kunne ikke se hvad der hørte i posen. Indholdet rammes derfor ind i pakkens egen farve (rød til FRONT ROWS, grøn til HOT TICKETS) med en ballon der stikker op af kassen som af en gavepose. Kassen bygges af jr-scroll.js, fordi parent-temaet leverer en flad liste. */ .jr-goodie { position: relative; margin-top: clamp(0.7rem, 1.4vw, 1.1rem); padding: clamp(0.9rem, 1.8vw, 1.3rem) clamp(1rem, 2vw, 1.4rem) clamp(0.8rem, 1.6vw, 1.1rem); border: 2px solid var(--jr-red); background: rgba(228, 0, 43, 0.16); backdrop-filter: blur(2px); } [class*="col-"]:nth-child(even) .jr-goodie { border-color: var(--jr-green); background: rgba(108, 195, 26, 0.16); } /* Overskriften sidder i kassens kant som en etiket. */ .jr-goodie__title { position: absolute; top: 0; left: clamp(0.8rem, 1.6vw, 1.2rem); transform: translateY(-50%); margin: 0; padding: 0.26em 0.75em; background: var(--jr-red); color: #fff !important; font-family: var(--lm-font-headline); font-weight: 800; font-size: clamp(0.66rem, 0.8vw, 0.78rem); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } [class*="col-"]:nth-child(even) .jr-goodie__title { background: var(--jr-green); } .jr-goodie__list { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: clamp(0.28rem, 0.6vw, 0.5rem); } .jr-goodie__list li { display: flex; align-items: baseline; gap: 0.6em; margin: 0 !important; padding: 0 !important; font-size: 0.95em; line-height: 1.3; } /* Firkantet mærke i stedet for stjerne — stjernen bruges udenfor kassen, og to forskellige markører gør det tydeligt hvad der hører i posen. */ .jr-goodie__list .lm-vip-card__feature-icon::before { content: ''; display: block; width: 0.42em; height: 0.42em; background: var(--jr-yellow); transform: translateY(-0.15em); } /* Ballonen der stikker op af posen. */ .jr-goodie::after { content: ''; position: absolute; right: clamp(-16px, -1.4vw, -8px); top: clamp(-34px, -3vw, -20px); width: clamp(40px, 4.6vw, 62px); aspect-ratio: 420 / 557; background: url('../../uploads/joyride_balloon_red.png') center / contain no-repeat; transform: rotate(12deg); filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45)); pointer-events: none; } [class*="col-"]:nth-child(even) .jr-goodie::after { background-image: url('../../uploads/joyride_balloon_green.png'); transform: rotate(-10deg); } /* --- Mobilheaderen på forsiden --------------------------------------------- Øverst på forsiden er heroen plakaten, og den skal stå ren. Billetknappen og burgeren dukker først op sammen med headerens papir og logo — altså ved første scroll. De tones ud i stedet for at blive skjult, så headerens højde ikke hopper. */ @media (max-width: 991px) { .home .lm-header:not(.jr-header--solid) .lm-header__mobile-cta, .home .lm-header:not(.jr-header--solid) .lm-nav__cta, .home .lm-header:not(.jr-header--solid) .lm-menu-toggle { opacity: 0; pointer-events: none; } .lm-header__mobile-cta, .lm-nav__cta, .lm-menu-toggle { transition: opacity 0.28s ease; } /* Ikonet fjernes og knappen strammes en anelse — på en telefon er der ikke plads til begge dele ved siden af logo og burger. */ .lm-header__mobile-cta .lm-btn__icon, .lm-nav__cta .lm-btn__icon { display: none !important; } .lm-header__mobile-cta, .lm-nav__cta { padding: 0.52em 0.95em !important; font-size: 0.78rem !important; letter-spacing: 0.08em; } } /* --- Ballonerne i footeren klippedes indvendigt ----------------------------- Laget er containerbredt, så ballonerne blev skåret over ved containerens kant — 24px inde på skærmen, midt i ingenting. Laget skal stadig bruges til at PLACERE dem inden for containeren, men klipningen flyttes ud til .jr-footer-scene, som går fra kant til kant. Så bliver de kun beskåret ved selve skærmkanten, hvor det ser naturligt ud. */ .jr-footer-balloons { overflow: visible !important; } /* Eyebrow over navnebåndet på forsiden. Samme stribe som sektionernes egne, men centreret over navnene — den hører til båndet, ikke til overskriften under det. */ .jr-names__eyebrow { display: block; width: fit-content; margin: 0 auto clamp(0.7rem, 1.4vw, 1.1rem); padding: 0.32em 0.9em; background: var(--jr-green); color: #fff !important; font-family: var(--lm-font-headline); font-weight: 800; font-size: clamp(0.78rem, 0.35vw + 0.68rem, 0.95rem); letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); transform: rotate(-1.4deg); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16); } /* Båndet og dets stribe skal begge spænde hele containeren i gitteret. */ @media (min-width: 992px) { /* Med navnebåndet er der to rækker mere end i et almindeligt billede+tekst- modul. Rækkerne skal derfor defineres eksplicit, og den SIDSTE skal være 1fr — den suger den overskydende højde. Var absorberen ikke sidst, blev tekstsøjlens rækker strakt, og knapperne endte langt under afsnittet. */ .lm-section--image_media:has(.jr-names) > .container, .lm-section--image_media:has(.jr-names) > .lm-container { grid-template-rows: auto auto auto auto auto 1fr; } .lm-section--image_media .jr-names__eyebrow { grid-column: 1 / -1; grid-row: 1; } .lm-section--image_media:has(.jr-names) .jr-names { grid-row: 2; } .lm-section--image_media:has(.jr-names) .lm-section__headings { grid-row: 3; } .lm-section--image_media:has(.jr-names) .lm-image-media__text { grid-row: 4; } .lm-section--image_media:has(.jr-names) .lm-section__cta { grid-row: 5; } .lm-section--image_media:has(.jr-names) .lm-image-media__media { grid-row: 3 / -1; } } /* --- Marqueens stjerner og bundlinje --------------------------------------- Stjernerne sad på skriftlinjen og hang derfor lavt i forhold til versalerne, tydeligst i det store midterbånd. vertical-align: middle stiller dem midt i ordene i stedet. */ .jr-marquee__s { vertical-align: middle !important; position: relative; top: -0.06em; } /* Midterbåndets versaler er høje, så stjernen skal en anelse længere op for at ramme midten. */ .jr-marquee__row--2 .jr-marquee__s { top: -0.10em; } /* "og mange flere" stod som sidste titel i tredje bånd og læstes derfor som en sang. Den hører til under det hele. */ .jr-marquee__more { margin: clamp(0.9rem, 2vw, 1.6rem) 0 0; text-align: center; font-family: var(--lm-font-headline); font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; font-size: clamp(0.78rem, 0.9vw, 1rem); color: var(--jr-red); } /* --- Stjernecastet er sin egen sektion -------------------------------------- Navnebåndet lå før inde i om-forestillingen-modulet, så de to delte baggrund og flød sammen. Nu er de adskilt: castet på den levende mesh, om-forestillingen på det statiske sandfarvede papir. */ .jr-cast-section { padding-top: clamp(2.6rem, 5vw, 4.2rem) !important; padding-bottom: clamp(2.6rem, 5vw, 4.2rem) !important; } /* Sektionen har hverken overskrift eller brødtekst — kun båndet. Parentens tomme beholdere må ikke lægge luft til. */ .jr-cast-section .lm-section__headings, .jr-cast-section .lm-section__content { display: none; } .jr-cast-section .jr-names { margin-bottom: 0; } /* Om forestillingen står nu på papiret igen og skal ikke have mesh-reglernes gennemsigtige bund. */ .jr-om-section { background: radial-gradient(120% 90% at 50% 0%, rgba(255, 210, 63, 0.16), transparent 62%), #fdf8ee; } /* --- Hero-båndet på mobil --------------------------------------------------- Båndet var trykket helt sammen, fordi hver ekstra pixel her dækker en tilsvarende bid af bilen — og forlygterne sidder 65% nede i billedet. Der er dog ~25px at give af, før lygterne rammes, og dem bruges her på luft. Knappen fyldte hele bredden og blev derfor læst som endnu en stribe i det røde bånd. Den trækkes ind og får en kraftigere hvid ring, så den står frem som en knap. */ @media (max-width: 767px), (max-aspect-ratio: 4/5) { .jr-kv-band { padding: 0.46rem 0 0.5rem !important; } .jr-kv-band__inner { gap: 0.36rem !important; } .jr-kv-band__text { gap: 0.05rem !important; } /* Nederste stribe rykkes op, så båndet kan blive lidt højere uden at skære den over. */ .jr-banner:nth-child(5) { top: 75.5% !important; } .jr-kv-band__btn { width: auto !important; min-width: 58%; padding: 0.44em 1.4em !important; font-size: 0.72rem !important; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.98), 0 8px 20px rgba(0, 0, 0, 0.4) !important; } } /* --- Roxette-logoet i hero-banneret ---------------------------------------- Navnet stod som tekst i vores egen skrift; nu bruges bandets eget logo. Højden følger linjens skriftstørrelse, så det skalerer med banneret. Den tidligere modsatrettede scaleX er væk. Den kompenserede for en vandret sammentrykning af teksten, som ikke længere findes — kittet leverer nu det rigtige Compressed-snit. Fallbacken stod stadig på 0,82, så logoet blev strakt 22% mod højre med transform-origin: left. Det er grunden til, at striben havde en luns luft i venstre side og intet i højre. */ .jr-banner__roxette-logo { display: inline-block; height: 1.35em; width: auto; } /* --- Malmö Opera-mærket på creditsiden ------------------------------------- Originalen er guld på creme og forsvinder på papiret. Her sættes den i sidens tekstfarve, dæmpet, over kreditlinjen. */ .jr-malmo-mark { display: block; width: clamp(52px, 5.5vw, 78px); margin: clamp(1.8rem, 3.5vw, 2.8rem) auto 0; line-height: 0; opacity: 0.5; } .jr-malmo-mark svg { display: block; width: 100%; height: auto; } .jr-malmo-mark svg path { fill: var(--jr-text) !important; } .jr-malmo-mark + .jr-credits-note { margin-top: 0.7rem !important; } /* --- Fritlagt cast i "Handlingen" på om-siden ------------------------------- Billedet er beskåret i bunden, så personerne står på sektionens kant frem for at svæve. Modulet får derfor ingen bundpolstring i den søjle, og billedet skubbes ned til kanten. */ .jr-media-plain .lm-image-media__media img { display: block; width: 100%; height: auto; border: 0 !important; box-shadow: none !important; } @media (min-width: 992px) { .lm-section--image_media:has(.jr-media-plain) .lm-image-media__media, .jr-media-plain .lm-image-media__media { align-self: end; margin-bottom: calc(-1 * clamp(3rem, 6vw, 5.5rem)); } /* Sektionen klipper ikke lodret, men holder stadig vandret. */ .lm-section:has(.jr-media-plain) { overflow-x: clip; overflow-y: hidden; } } @media (max-width: 991px) { .jr-media-plain .lm-image-media__media { margin-bottom: calc(-1 * clamp(2rem, 6vw, 3.5rem)) !important; } } /* --- Cast'et der står på sektionens bund ----------------------------------- Billedet er beskåret ved livet, så det skal ende præcis i sektionens underkant — ellers svæver de tre i et tomt felt. Teksten til højre centreres lodret med lige meget luft over og under: to 1fr-rækker øverst og nederst i gitteret klemmer indholdet på plads i midten, mens billedet spænder alle rækker og lægger sig i bunden. */ .lm-section.jr-cast-bottom { padding-bottom: 0 !important; overflow: hidden; } @media (min-width: 992px) { .lm-section.jr-cast-bottom > .container, .lm-section.jr-cast-bottom > .lm-container { grid-template-rows: 1fr auto auto auto 1fr; align-items: start; } .lm-section.jr-cast-bottom .lm-section__headings { grid-row: 2; align-self: end; } .lm-section.jr-cast-bottom .lm-image-media__text { grid-row: 3; } .lm-section.jr-cast-bottom .lm-section__cta { grid-row: 4; } .lm-section.jr-cast-bottom .lm-image-media__media { grid-row: 1 / -1; align-self: end; margin-bottom: 0 !important; line-height: 0; } /* Sektionens bundpolstring er nul, for at billedet kan nå kanten. Uden dette ville teksten have luft foroven og ingen forneden. Den får derfor sin egen bundmargen, magen til sektionens topspolstring. */ .lm-section.jr-cast-bottom .lm-image-media__text { /* Sektionens topspolstring plus 60px: overskriftsblokken har selv en margen, så teksten begynder 60px længere nede end polstringen alene. Målt ens ved 992 og 1440. */ margin-bottom: calc(clamp(3rem, 6vw, 5.5rem) + 60px); } } /* På telefon står billedet sidst, så det stadig kan nå sektionens bund. */ @media (max-width: 991px) { .jr-cast-bottom .lm-image-media__text { order: 1; } .jr-cast-bottom .lm-image-media__media { order: 2; margin: clamp(1.6rem, 5vw, 2.6rem) 0 0 !important; } } .jr-cast-bottom .lm-image-media__media img { display: block; width: 100%; height: auto; vertical-align: bottom; } /* ========================================================================== CREDITSIDEN — efter JOYRIDE_Credits.pdf Skriftstørrelserne er PDF'ens, omregnet fra punkt til em med den store titel (15pt) som grundenhed, så hele blokken skalerer som ét. ========================================================================== */ .jr-cr { /* Grundenheden er PDF'ens store titel (15pt). Den var kalibreret til den gamle skrift ved 16px basis; Trade Gothic Compressed er markant smallere og læser mindre ved samme px, så de mindste titler (0,58x) landede på under 7px. Gulvet er hævet, så selv det mindste niveau bliver læseligt, uden at forholdene mellem de tre niveauer ændrer sig. */ --jr-cr-base: clamp(1.05rem, 1.3vw, 1.2rem); /* Blokken fyldte hele containeren, så to navne i samme række stod i hver sin ende af skærmen og hang ikke sammen som par. Egen bredde holder kolonnerne tæt om midten, som i PDF'en. */ max-width: 44rem; margin-inline: auto; text-align: center; color: #000; } .jr-cr__logo { display: block; width: clamp(200px, 30vw, 420px); height: auto; margin: 0 auto clamp(1.4rem, 3vw, 2.4rem); transform: rotate(-2.5deg); } /* "Baseret på sangene af ROXETTE og bogen …" — 18pt sort med 24pt røde navne. */ .jr-cr__basis { margin: 0 0 clamp(1.8rem, 4vw, 3rem); font-family: var(--lm-font-headline); font-weight: 700; text-transform: uppercase; line-height: 1.2; font-size: calc(var(--jr-cr-base) * 1.2); color: #000; } .jr-cr__basis strong { font-weight: 800; font-size: 1.33em; color: #d51317; } /* Rækker og kolonner. Antallet af kolonner sættes pr. række i markup. */ .jr-cr__row { display: grid; grid-template-columns: repeat(var(--jr-cols, 1), minmax(0, 1fr)); gap: 0 clamp(1rem, 3vw, 3rem); margin-bottom: clamp(1.1rem, 2.4vw, 2rem); } .jr-cr__item { min-width: 0; } .jr-cr__title, .jr-cr__name { display: block; font-family: var(--lm-font-headline); text-transform: uppercase; line-height: 1.12; } .jr-cr__title { font-weight: 800; color: #000; letter-spacing: 0.02em; } .jr-cr__name { font-weight: 800; color: #d51317; margin-top: 0.1em; } /* De tre niveauer fra PDF'en. */ .jr-cr__row--stor .jr-cr__title { font-size: calc(var(--jr-cr-base) * 1.00); } .jr-cr__row--stor .jr-cr__name { font-size: calc(var(--jr-cr-base) * 2.00); } .jr-cr__row--mellem .jr-cr__title { font-size: calc(var(--jr-cr-base) * 0.72); } .jr-cr__row--mellem .jr-cr__name { font-size: calc(var(--jr-cr-base) * 1.44); } .jr-cr__row--lille .jr-cr__title { font-size: calc(var(--jr-cr-base) * 0.58); } .jr-cr__row--lille .jr-cr__name { font-size: calc(var(--jr-cr-base) * 1.17); } /* Producent-rækken og Malmö-rækken står længere nede i PDF'en. */ .jr-cr__row--stor:nth-last-of-type(2) { margin-top: clamp(1.4rem, 3vw, 2.6rem); } .jr-cr__row--lille:last-of-type { margin-top: clamp(1.4rem, 3vw, 2.6rem); } /* Fodnoten: rød med spærret sats, navnene i tungere snit. Den står bevidst under de mindste titler — det er en rettighedslinje, ikke en credit. */ .jr-cr__foot { margin: clamp(1.8rem, 4vw, 3rem) 0 0; font-family: var(--lm-font-headline); font-weight: 700; text-transform: uppercase; color: #d51317; font-size: calc(var(--jr-cr-base) * 0.68); letter-spacing: 0.22em; line-height: 1.5; } .jr-cr__foot strong { font-weight: 800; } /* På telefon er der ikke plads til tre kolonner ved siden af hinanden. */ @media (max-width: 700px) { .jr-cr__row { grid-template-columns: 1fr; gap: 0; } .jr-cr__item + .jr-cr__item { margin-top: clamp(0.9rem, 3vw, 1.4rem); } .jr-cr__foot { letter-spacing: 0.14em; } } /* Den gamle liste og fodnote er ikke længere i brug på denne side. */ .jr-cr ~ .lm-credits, .jr-credits__text + .lm-credits { display: none; } /* Logoet øverst på creditsiden hælder let, som i den godkendte PDF. */ .jr-credits__logo { transform: rotate(-2.5deg); } /* ========================================================================== BILLEDKARRUSEL PÅ FORSIDEN Tre billeder ad gangen, ét skridt ad gangen, blød overgang. Antallet styres af --jr-vis, som er det eneste, brudpunkterne nedenfor ændrer — feltbredden regner sig selv ud derfra. ========================================================================== */ .jr-galleri-section { background: radial-gradient(120% 90% at 50% 0%, rgba(255, 210, 63, 0.14), transparent 62%), #fdf8ee; padding-top: clamp(2.4rem, 5vw, 4rem) !important; padding-bottom: clamp(2.4rem, 5vw, 4rem) !important; } /* Sektionen har hverken overskrift eller tekst — kun billederne. */ .jr-galleri-section .lm-section__headings, .jr-galleri-section .lm-section__content { display: none; } .jr-galleri { --jr-vis: 3; --jr-gap: clamp(0.6rem, 1.4vw, 1.2rem); position: relative; user-select: none; } /* Uden JavaScript bliver rækken en almindelig vandret rulleliste, så alle billeder stadig kan nås. jr-karrusel.js sætter .is-klar og overtager. */ .jr-galleri__viewport { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .jr-galleri.is-klar .jr-galleri__viewport { overflow: hidden; } .jr-galleri__track { display: flex; gap: var(--jr-gap); margin: 0; padding: 0; list-style: none; will-change: transform; /* Blød ind og ud — ikke lineær. Kurven starter og slutter roligt, så skiftet føles som et bladvend og ikke som et bånd der løber. */ transition: transform 0.72s cubic-bezier(0.65, 0.02, 0.25, 1); } /* Bruges kun i det ene billede, hvor sporet flyttes tilbage til begyndelsen: dét spring må aldrig animeres, ellers kan man se det. */ .jr-galleri__track.is-instant { transition: none; } .jr-galleri__slide { flex: 0 0 calc((100% - (var(--jr-vis) - 1) * var(--jr-gap)) / var(--jr-vis)); width: calc((100% - (var(--jr-vis) - 1) * var(--jr-gap)) / var(--jr-vis)); min-width: 0; } /* Ens felter kræver beskæring, fordi syv billeder er liggende og fire stående. 4:3 skærer kun 11% af bredden af de liggende, og de stående beskæres fra 18% ned — så bliver ansigterne stående. */ .jr-galleri__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 18%; border: 4px solid transparent; border-image: var(--jr-gradient) 1; box-shadow: 0 12px 28px rgba(120, 60, 30, 0.16); } /* --- Pilene --------------------------------------------------------------- Ligger oven på billedernes yderkanter. Hvid skive med gradientring, så de kan ses både på et lyst og et mørkt billede. */ .jr-galleri__pil { position: absolute; top: calc(50% - 1.6rem); transform: translateY(-50%); z-index: 3; display: none; place-items: center; width: clamp(2.6rem, 3.4vw, 3.4rem); height: clamp(2.6rem, 3.4vw, 3.4rem); padding: 0; border: 3px solid transparent; border-image: var(--jr-gradient) 1; border-radius: 0; background: #fffdf8; color: var(--jr-text); cursor: pointer; box-shadow: 0 8px 20px rgba(120, 60, 30, 0.28); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .jr-galleri.is-klar .jr-galleri__pil { display: grid; } .jr-galleri__pil svg { width: 55%; height: 55%; } .jr-galleri__pil:hover, .jr-galleri__pil:focus-visible { background: var(--jr-red); color: #fff; transform: translateY(-50%) scale(1.06); } .jr-galleri__pil--forrige { left: clamp(-1.1rem, -0.6vw, 0.4rem); } .jr-galleri__pil--naeste { right: clamp(-1.1rem, -0.6vw, 0.4rem); } /* --- Prikker og pauseknap -------------------------------------------------- */ .jr-galleri__styring { display: none; align-items: center; justify-content: center; gap: clamp(0.7rem, 1.6vw, 1.2rem); margin-top: clamp(1rem, 2vw, 1.6rem); } .jr-galleri.is-klar .jr-galleri__styring { display: flex; } .jr-galleri__prikker { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; } .jr-galleri__prik { width: 0.62rem; height: 0.62rem; padding: 0; border: 0; border-radius: 0; background: rgba(20, 20, 31, 0.22); cursor: pointer; transition: background 0.25s ease, width 0.25s ease; } .jr-galleri__prik.is-aktiv { width: 1.6rem; background: var(--jr-red); } .jr-galleri__prik:hover { background: rgba(20, 20, 31, 0.45); } .jr-galleri__prik.is-aktiv:hover { background: var(--jr-red); } .jr-galleri__pause { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 2px solid rgba(20, 20, 31, 0.18); border-radius: 0; background: transparent; color: var(--jr-text); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .jr-galleri__pause svg { width: 60%; height: 60%; fill: currentColor; } .jr-galleri__pause:hover, .jr-galleri__pause:focus-visible { background: var(--jr-text); border-color: var(--jr-text); color: #fffdf8; } .jr-galleri__pil:focus-visible, .jr-galleri__prik:focus-visible, .jr-galleri__pause:focus-visible { outline: 3px solid var(--jr-yellow); outline-offset: 3px; } /* --- Brudpunkter: kun antallet ændrer sig ---------------------------------- */ @media (max-width: 980px) { .jr-galleri { --jr-vis: 2; } } @media (max-width: 600px) { .jr-galleri { --jr-vis: 1; } /* Ét billede fylder hele bredden — pilene ville dække motivet, så de ryger ud, og prikkerne styrer alene. */ .jr-galleri.is-klar .jr-galleri__pil { display: none; } .jr-galleri__img { aspect-ratio: 3 / 2; } } @media (prefers-reduced-motion: reduce) { .jr-galleri__track { transition: none; } } /* --- Efterjustering til Compressed og 19px grundstørrelse ------------------- Knapperne arvede parentens polstring i em/rem, og begge voksede med den nye grundstørrelse. Skriften er rigtig; kun luften omkring skal ned. */ .lm-btn, .lm-btn-primary, .lm-btn-outline, .lm-btn-secondary, .lm-nav__cta, .lm-header__cta, .lm-header__mobile-cta, .jr-kv-band__btn, .lm-date-card__btn { padding: 0.62em 1.35em !important; } /* Undtagen billetknappen i mobilheaderen. Den er strammet i blokken "Mobilheaderen på forsiden", men reglen herover står senere i filen og gav den desktop-luften igen. Så blev knappen så bred, at den gik ind over logoet på en telefon. */ @media (max-width: 991px) { .lm-header__mobile-cta { padding: 0.52em 0.95em !important; } } /* Bannerteksten skal stå lodret midt i striben — også når to skriftstørrelser deler linje. På fælles grundlinje sad de små ord for højt i forhold til det store. Et flex-lag centrerer hver del for sig. */ .jr-banner > span { display: flex !important; align-items: center; justify-content: center; gap: 0.28em; line-height: 1; } .jr-banner strong { margin-left: 0 !important; line-height: 1; } /* Roxette-logoet stak ud over stribens højrekant, efter at skriften voksede til det rigtige Compressed-snit. Højden bindes til linjen og bredden får lov at følge med. */ .jr-banner__roxette-logo { height: 1.18em !important; vertical-align: middle !important; margin-left: 0 !important; flex: 0 0 auto; } /* ========================================================================== HISTORIEN OM ROXETTE Forsidens teaser (jr_render_roxette_teaser i functions.php) og historiesiden (page-roxette.php). Bevægelsen står i assets/js/jr-roxette.js. Roligt udtryk: én mørk flade (teaseren på forsiden og toppen af undersiden), resten er plakatens papir. Ingen pynt ud over logoet. ========================================================================== */ :is(.jr-rx-dark, .jr-roxette-section) { --rx-bg: #140f1f; --rx-ink: #fbf1e0; --rx-muted: rgba(251, 241, 224, 0.78); /* Brandgradienten er for mørk på natblåt. Samme tre farver, lysere. */ --rx-grad: linear-gradient(100deg, #ff4f64 0%, #ffa43a 50%, #a8e35c 100%); position: relative; color: var(--rx-ink); background: radial-gradient(55% 90% at 0% 100%, rgba(228, 0, 43, 0.16), transparent 70%), radial-gradient(55% 90% at 100% 100%, rgba(108, 195, 26, 0.11), transparent 70%), var(--rx-bg) !important; } /* Overgangen mellem mørk og lys er en stribe i logoets gradient, som over footeren. */ .jr-roxette-section, .jr-rx-hero { border-bottom: 5px solid transparent; border-image: var(--jr-gradient) 1; } .jr-roxette-section { border-top: 5px solid transparent; } .jr-rx-narrow { max-width: 880px; margin-left: auto; margin-right: auto; } .jr-rx-center { text-align: center; } /* --- Fælles typografi ---------------------------------------------------- */ .jr-rx-eyebrow { display: inline-block; width: fit-content; padding: 0.32em 0.9em; background: var(--jr-red); color: #fff; font-family: var(--lm-font-headline); font-weight: 800; font-size: clamp(0.8rem, 0.4vw + 0.7rem, 1rem); letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); transform: rotate(-1.6deg); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); } .jr-rx-kicker { display: block; margin: 0 0 0.6rem; font-family: var(--lm-font-headline); font-weight: 800; font-size: clamp(0.8rem, 0.4vw + 0.7rem, 0.95rem) !important; letter-spacing: 0.22em; line-height: 1.2 !important; text-transform: uppercase; color: var(--jr-red); } /* Overskrifterne får logoets gradient som alle andre overskrifter på papiret. Klassen slipper ellers for den globale h2-regel (__title). Polstringen lader gradienten nå helt ned i bunden af bogstaverne. */ .jr-rx__title { display: inline-block; margin: 0 0 0.9rem; padding: 0.04em 0; font-family: var(--lm-font-headline); font-weight: 800; font-size: clamp(1.9rem, 3.8vw, 3.4rem); line-height: 0.98; text-transform: uppercase; background: var(--jr-gradient); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent !important; } .jr-rx p { font-size: clamp(1.02rem, 0.4vw + 0.94rem, 1.25rem); line-height: 1.5; } .jr-rx-dark p { color: var(--rx-muted); } .jr-rx-body { max-width: 42rem; margin-left: auto; margin-right: auto; } .jr-rx-logo { display: block; line-height: 0; } .jr-rx-logo img { display: block; width: 100%; height: auto; } /* --- Toppen af undersiden ------------------------------------------------ */ .jr-rx-hero { padding-bottom: clamp(2.6rem, 5vw, 4rem) !important; } .jr-rx-hero__title { display: flex; flex-direction: column; align-items: center; gap: clamp(0.8rem, 1.8vw, 1.2rem); margin: 0; font-size: inherit; line-height: 1; } .jr-rx-hero__logo { display: block; width: min(620px, 78vw); } .jr-rx-hero__sub { margin: clamp(0.9rem, 2vw, 1.3rem) 0 0; font-family: var(--lm-font-headline); font-weight: 800; font-size: clamp(1.25rem, 2.4vw, 2.1rem) !important; line-height: 1.05 !important; letter-spacing: 0.04em; text-transform: uppercase; background: var(--rx-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; } .jr-rx-lead { max-width: 40rem; margin: clamp(1.2rem, 2.6vw, 1.8rem) auto 0; font-size: clamp(1.1rem, 0.7vw + 0.95rem, 1.4rem) !important; line-height: 1.5 !important; } /* --- Gennembruddet ------------------------------------------------------- */ .jr-rx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.8rem, 4.5vw, 4rem); align-items: center; } .jr-rx-split__text > p { max-width: 34rem; } .jr-rx-callout { padding: clamp(1.4rem, 3vw, 2.2rem); background: rgba(255, 255, 255, 0.72); border-top: 4px solid transparent; border-image: var(--jr-gradient) 1; box-shadow: 0 14px 34px rgba(120, 60, 30, 0.1); } .jr-rx-callout__label { margin: 0 0 0.3rem; font-family: var(--lm-font-headline); font-weight: 800; font-size: 0.85rem !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jr-red); } .jr-rx-callout__song { display: inline-block; margin: 0 0 0.7rem; padding: 0.06em 0 0.1em; font-family: var(--lm-font-headline); font-weight: 800; font-size: clamp(2.6rem, 5vw, 4.2rem) !important; line-height: 0.95 !important; text-transform: uppercase; background: var(--jr-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .jr-rx-callout p:last-child { margin: 0; font-size: clamp(1rem, 0.3vw + 0.93rem, 1.15rem); } /* Med foto: billedet til venstre, tekst og "The Look" stablet til højre. */ .jr-rx-split--photo { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } .jr-rx-split__body { display: grid; gap: clamp(1.4rem, 3vw, 2rem); } /* --- Fotos ---------------------------------------------------------------- De to Getty-billeder af Roxette. Samme ramme som kortene: gradientstribe foroven og en blød skygge. Kreditlinjen er et krav fra Getty, så den står lille og dæmpet under billedet. */ .jr-rx-photo { margin: 0; } .jr-rx-photo img { display: block; width: 100%; height: auto; object-fit: cover; border-top: 4px solid transparent; border-image: var(--jr-gradient) 1; box-shadow: 0 14px 34px rgba(120, 60, 30, 0.14); } /* Kvadratisk udsnit, så billedet står lige så højt som teksten ved siden af. Begge ansigter ligger lidt til venstre for midten. */ .jr-rx-photo--portrait img { aspect-ratio: 1 / 1; object-position: 40% 50%; } /* Bredt bånd mellem indledningen og de tre kort. Ansigterne og de løftede hænder sidder i øverste tredjedel. */ .jr-rx-photo--wide { margin-top: clamp(1.6rem, 3.5vw, 2.6rem); } .jr-rx-photo--wide img { aspect-ratio: 21 / 9; object-position: 50% 20%; } .jr-rx-photo figcaption { margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.4; color: rgba(20, 20, 31, 0.66); text-align: left; } .jr-rx-photo__credit { margin-left: 0.3em; font-size: 0.78rem; color: rgba(20, 20, 31, 0.5); } /* --- Hits og succes: tre kort -------------------------------------------- */ .jr-rx-hits { background: radial-gradient(120% 90% at 50% 0%, rgba(255, 210, 63, 0.14), transparent 62%), #fdf8ee !important; } .jr-rx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.6rem); margin-top: clamp(1.6rem, 3.5vw, 2.6rem); } .jr-rx-fact { padding: clamp(1.3rem, 2.4vw, 1.8rem); background: #fff; border-top: 4px solid transparent; border-image: var(--jr-gradient) 1; box-shadow: 0 12px 30px rgba(120, 60, 30, 0.08); text-align: left; } /* Dobbelt klasse: reglen for kortenes brødtekst (.jr-rx-fact p) er ellers mere specifik og gjorde tallet lille. */ .jr-rx-fact .jr-rx-fact__num { display: inline-block; margin: 0; padding: 0.06em 0 0.1em; font-family: var(--lm-font-headline); font-weight: 800; font-size: clamp(2.8rem, 4.6vw, 4rem) !important; line-height: 0.95 !important; background: var(--jr-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .jr-rx-fact__num b { font-weight: 800; } .jr-rx-fact__title { margin: 0.4rem 0 0.6rem; font-family: var(--lm-font-headline); font-weight: 800; font-size: clamp(1rem, 1.1vw, 1.2rem); line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; color: var(--jr-text); } .jr-rx-fact p:not(.jr-rx-fact__num) { margin: 0; font-size: clamp(0.98rem, 0.2vw + 0.94rem, 1.08rem) !important; } /* De fire nr. 1-hits som små mærker i logoets rød og grøn. Den grønne er mørkere end brandgrøn, så den hvide tekst kan læses. */ .jr-rx-fact__hits { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0; padding: 0; list-style: none; } .jr-rx-fact__hits li { padding: 0.24em 0.6em; background: var(--jr-red); color: #fff; font-family: var(--lm-font-headline); font-weight: 800; font-size: 0.82rem; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; } .jr-rx-fact__hits li:nth-child(even) { background: #3d8410; } /* --- Arven og musicalen -------------------------------------------------- */ .jr-rx-finale { padding-top: clamp(3rem, 6vw, 4.5rem) !important; padding-bottom: clamp(3rem, 6vw, 4.5rem) !important; } .jr-rx-tribute { position: relative; max-width: 38rem; margin: clamp(1.4rem, 3vw, 2rem) auto 0; padding: 1.5rem 0 0; border: 0; /* Stregen har et hul i midten, hvor stjernen sidder. */ background: linear-gradient(to right, transparent 0%, rgba(20, 20, 31, 0.16) 18%, rgba(20, 20, 31, 0.16) 45%, transparent 45%, transparent 55%, rgba(20, 20, 31, 0.16) 55%, rgba(20, 20, 31, 0.16) 82%, transparent 100%) top / 100% 1px no-repeat; } .jr-rx-tribute::before { content: ''; position: absolute; left: calc(50% - 9px); top: -9px; width: 18px; height: 18px; background: var(--jr-red); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .jr-rx-tribute p { margin: 0; font-size: clamp(1.15rem, 0.8vw + 1rem, 1.5rem) !important; line-height: 1.45; color: var(--jr-text); } .jr-rx-musical { margin-top: clamp(2.4rem, 5vw, 3.6rem); } .jr-rx-musical__logo { display: block; width: min(360px, 72%); height: auto; margin: 0 auto 1rem; filter: drop-shadow(0 12px 24px rgba(120, 60, 30, 0.16)); } .jr-rx-musical__lead { max-width: 40rem; margin: 0 auto; font-size: clamp(1.15rem, 0.8vw + 1rem, 1.5rem) !important; line-height: 1.4 !important; color: var(--jr-text); } .jr-rx-musical__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 1.4rem; } /* --- Teaseren på forsiden ------------------------------------------------ */ .jr-roxette-section { padding-top: clamp(2.6rem, 5vw, 4rem) !important; padding-bottom: clamp(2.6rem, 5vw, 4rem) !important; } .jr-rxt { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.8rem, 5vw, 4.5rem); align-items: center; text-align: left; } .jr-rxt__title { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; margin: 0 0 0.8rem; font-size: inherit; line-height: 1; } .jr-rxt__logo { display: block; width: min(480px, 100%); } .jr-rxt__sub { margin: 0; font-family: var(--lm-font-headline); font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.75rem) !important; line-height: 1.05 !important; letter-spacing: 0.03em; text-transform: uppercase; background: var(--rx-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; } .jr-rxt__lead { max-width: 36rem; margin: 0; font-size: clamp(1.02rem, 0.4vw + 0.94rem, 1.2rem); line-height: 1.5; color: var(--rx-muted); } .jr-rx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.3rem); max-width: 36rem; margin: 1.4rem 0 1.6rem; padding: 0; list-style: none; } .jr-rx-stats li { padding-top: 0.7rem; border-top: 3px solid transparent; border-image: var(--jr-gradient) 1; } .jr-rx-stats__num { display: block; font-family: var(--lm-font-headline); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 0.95; color: var(--rx-ink); } .jr-rx-stats__num b { font-weight: 800; } .jr-rx-stats__label { display: block; margin-top: 0.35rem; font-family: var(--lm-font-headline); font-weight: 800; font-size: clamp(0.76rem, 0.25vw + 0.7rem, 0.88rem); line-height: 1.25; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rx-muted); } .jr-rx-btn { display: inline-flex !important; align-items: center; gap: 0.6em; } .jr-rx-arrow { width: 1.1em; height: 1.1em; transition: transform 0.25s ease; } .jr-rx-btn:hover .jr-rx-arrow, .jr-rx-btn:focus-visible .jr-rx-arrow { transform: translateX(4px); } /* --- Tablet og telefon --------------------------------------------------- */ @media (max-width: 991px) { .jr-rxt, .jr-rx-split { grid-template-columns: minmax(0, 1fr); } .jr-rx-callout { max-width: 560px; } /* Én kolonne: hele billedet i stedet for det kvadratiske udsnit. */ .jr-rx-photo--portrait img { aspect-ratio: 3 / 2; } .jr-rx-photo--wide img { aspect-ratio: 4 / 3; object-position: 45% 30%; } /* Kreditlinjen knækkede midt i fotografens navn. */ .jr-rx-photo__credit { display: block; margin: 0.1rem 0 0; } .jr-rx-facts { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; } } /* Footerens balloner stikker op i bunden af sidste sektion. På telefon får de luft under knapperne. */ @media (max-width: 700px) { .jr-rx-finale { padding-bottom: 7rem !important; } } /* Teaserens tre tal på telefon: som rækker (tal til venstre, tekst til højre) i stedet for tre smalle kolonner, hvor teksten blev for lille. */ @media (max-width: 560px) { .jr-rx-stats { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; max-width: none; } .jr-rx-stats li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: 0.55rem 0 0.45rem; } .jr-rx-stats__num { font-size: 2rem; } .jr-rx-stats__label { margin-top: 0; font-size: 0.82rem; letter-spacing: 0.05em; } } @media (max-width: 400px) { .jr-rx__title { font-size: 1.75rem; } } /* --- Mobilheaderen på smalle telefoner ------------------------------------ Logoet er centreret på skærmen, og billetknappen står i venstre side. Under ca. 410px er der ikke plads til begge, og logoet gik ind under knappen. Her står logoet i stedet midt i pladsen MELLEM knappen og burgeren, og det skaleres ned, hvis pladsen er trang. Parent sætter placeringen med !important i headerens egen