/* Theme Name: ROD Theme URI: https://www.rodfolk.dk/ Author: ROD Description: Custom block theme for the ROD Danish folk-music event. Version: 0.3.0 Requires at least: 6.6 Requires PHP: 8.1 Text Domain: rodfolk */ :root { --rod-header-height: 96px; --rod-section-space: clamp(5rem, 10vw, 10rem); --rod-focus: light-dark(#14566f, #8fd6f2); } /* * Colour scheme. * * The site follows the visitor's system preference by default and can be * overridden per site with the header toggle (assets/js/theme.js), which sets * `data-theme="light|dark"` on . Everything colour-related keys off * `color-scheme`, so the palette below is written once with light-dark(). * * The dark palette keeps the poster character: a warm near-black "paper", a * warm off-white ink, and a lifted red that stays legible as text on the dark * surface (brand red #be3407 only reaches ~3:1 there; #e8663a reaches 5.3:1). * Blue buttons and pure white are shared by both schemes. * * The preset variables are re-declared here rather than in theme.json so the * editor palette, the `.has-*-color` utility classes and every component rule * keep pointing at one token. This sheet loads after global styles, so the * equal-specificity `:root` declarations below win. Browsers without * light-dark() (pre-2024) ignore these and stay on the light palette. */ :root { color-scheme: light; --wp--preset--color--paper: light-dark(#fcfbf9, #1b1917); --wp--preset--color--soft-white: light-dark(#fafafa, #262322); --wp--preset--color--ink: light-dark(#242424, #ebe7e0); --wp--preset--color--red: light-dark(#be3407, #e8663a); /* Photo placeholders behind gallery/portrait images while they load. */ --rod-image-placeholder: light-dark(#e8e5df, #2a2725); } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } html { scroll-behavior: smooth; } body { overflow-x: clip; text-rendering: optimizeLegibility; } :where(body) { overflow-wrap: break-word; } .wp-site-blocks { min-height: 100vh; } /* * Remove the root flow gap above
. On the homepage the header is an * absolute overlay, so any top margin on main drops the hero a few pixels and * reveals a grey strip of the header's dark gradient sitting over the paper * background. The hero must sit flush to the top. */ .wp-site-blocks > main { margin-block-start: 0; } a:hover { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; } :where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--rod-focus); outline-offset: 4px; } /* Live buttons render at about 238x60 with a 25px display label. The live site sets white labels on the cyan, which is only 2.2:1 and fails WCAG AA at every size; theme.json sets the label to the light-scheme ink (6.8:1) in both colour schemes, since the blue itself is shared by both. */ .wp-element-button { min-height: 60px; min-width: 238px; align-items: center; justify-content: center; display: inline-flex; transition: filter 160ms ease, transform 160ms ease; } .wp-element-button:hover { filter: brightness(0.92) saturate(1.08); text-decoration: none; transform: translateY(-2px); } /* Decorative red line-art placed around sections, matching the live site's inline SVG artwork. Each class maps to one original drawing. The live site stretches the drawings non-uniformly, so explicit width/height pairs with a 100% 100% mask reproduce the rendered boxes. */ .rod-art, .rod-art::before { pointer-events: none; } /* Site shell */ .rod-site-header { position: relative; z-index: 20; min-height: var(--rod-header-height); background: var(--wp--preset--color--paper); color: var(--wp--preset--color--red); } /* * Wix composition: a compact boxed language control pinned to the far left, a * horizontally centred primary navigation, and (on inner pages only) the ROD * mark. The language switcher is taken out of flow so it never pushes the * navigation off-centre. */ .rod-header-inner { position: static; min-height: var(--rod-header-height); justify-content: center; gap: clamp(1rem, 2.2vw, 2.5rem); } .rod-site-logo { flex: 0 0 auto; line-height: 0; } .rod-site-logo img { width: 60px; height: 60px; object-fit: contain; } /* The homepage hero owns the ROD mark; the header logo is not part of that composition, so it is hidden on the home overlay (kept for inner pages). */ body.home .rod-site-logo { display: none; } .rod-primary-navigation { flex: 0 1 auto; } .rod-primary-navigation .wp-block-page-list, .rod-primary-navigation ul.wp-block-navigation__container { justify-content: center; gap: clamp(1.1rem, 3.75vw, 3.4rem); } .rod-primary-navigation a { color: inherit; } /* Cyan active underline sitting just below the label, as on the live site. */ .rod-primary-navigation .current-menu-item > a, .rod-primary-navigation .current-menu-ancestor > a, .rod-primary-navigation .current_page_item > a, .rod-primary-navigation .wp-block-navigation-item.current-menu-item > a { text-decoration: underline; text-decoration-color: var(--wp--preset--color--blue); text-decoration-thickness: 3px; text-underline-offset: 0.55rem; } /* Dropdowns under "Om ROD" / "Tilmelding" — red display labels on a compact panel, matching the live hover menus. */ .rod-primary-navigation .has-child .wp-block-navigation__submenu-container { /* The panel hugs its widest label. Core re-applies a 200px minimum in each of its open states (:hover, :focus-within, aria-expanded) with higher specificity, so the size is pinned here unconditionally. */ min-width: 0 !important; width: max-content !important; padding: 0.85rem 1.15rem 0.95rem; border: 0; border-radius: 0; /* Paper panel with red display labels: the live site's red labels kept on a surface that stays AA-legible at this text size on both header states. */ background-color: var(--wp--preset--color--paper) !important; box-shadow: 0 16px 34px light-dark(rgba(36, 36, 36, 0.18), rgba(0, 0, 0, 0.6)); } .rod-primary-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a { min-width: 0; padding: 0.22rem 0; color: var(--wp--preset--color--red); font-size: 1rem; letter-spacing: 0.02em; white-space: nowrap; } .rod-primary-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2rem; } /* Reliable hover/focus opening on desktop, independent of the block's script. */ @media (min-width: 782px) { .rod-primary-navigation .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container, .rod-primary-navigation .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container { display: flex; visibility: visible; opacity: 1; } } .rod-language-switcher, .rod-language-switcher ul { display: flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0; list-style: none; font-family: var(--wp--preset--font-family--display); font-size: 1rem; text-transform: uppercase; } .rod-language-switcher li + li::before { content: "/"; margin-right: 0.35rem; opacity: 0.65; } .rod-language-switcher a, .rod-language-switcher span { min-width: 32px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: inherit; } /* * Corner controls: the small bordered language box pinned to the top-left * corner, with the light/dark toggle as a matching box beside it. On the live * site the language control stays fixed in the corner while the page scrolls, * so the cluster is fixed here too; assets/js/parallax.js toggles * `rod-scrolled` on the body so the boxes can switch to their solid state once * the home hero has scrolled away. */ .rod-corner-controls { position: fixed; left: 20px; top: 12px; z-index: 40; display: flex; align-items: stretch; gap: 8px; } .rod-language-desktop, .rod-theme-toggle { border: 1.5px solid currentColor; transition: background-color 160ms ease, color 160ms ease; } .rod-language-desktop { position: static; transform: none; gap: 0.3rem; padding: 0.4rem 0.7rem; font-size: 1rem; letter-spacing: 0.03em; line-height: 1; } body:not(.home) .rod-language-desktop, body:not(.home) .rod-theme-toggle, body.home.rod-scrolled .rod-language-desktop, body.home.rod-scrolled .rod-theme-toggle { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--red); } /* The toggle is hidden until theme.js can drive it (see functions.php). */ .rod-theme-toggle { display: none; align-items: center; justify-content: center; min-width: 44px; margin: 0; padding: 0.4rem 0.6rem; background: none; color: inherit; cursor: pointer; } html.rod-theme-js .rod-theme-toggle { display: inline-flex; } .rod-theme-toggle:hover { background: rgba(127, 127, 127, 0.15); } .rod-theme-icon { display: none; width: 20px; height: 20px; } /* The icon shows the scheme the button switches to: moon in light, sun in dark. */ .rod-theme-icon-moon { display: block; } :root[data-theme="dark"] .rod-theme-icon-moon { display: none; } :root[data-theme="dark"] .rod-theme-icon-sun { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rod-theme-icon-moon { display: none; } :root:not([data-theme="light"]) .rod-theme-icon-sun { display: block; } } .rod-language-desktop a, .rod-language-desktop span { min-width: 0; min-height: 34px; padding-inline: 0.12rem; } .rod-language-desktop li + li::before { margin-right: 0.3rem; opacity: 0.55; } .rod-language-switcher .current-lang a, .rod-language-switcher .current-lang-item a, .rod-language-switcher .current-lang span, .rod-language-switcher .current-lang-item span { text-decoration: underline; text-decoration-color: var(--wp--preset--color--blue); text-underline-offset: 0.3rem; } /* The navigation renderer appends this second switcher for the mobile overlay. */ .rod-primary-navigation .rod-language-mobile { display: none; } body.home .rod-site-header { position: absolute; inset: 0 0 auto; border-bottom: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); /* Light text over the photo in both colour schemes (not the paper token, which goes dark in the dark scheme). */ color: #fcfbf9; } body.home .rod-site-logo img { filter: brightness(0) invert(1); } /* Homepage vertical slice */ .rod-hero { /* The live hero band runs to the jagged divider's bottom edge at y=846, with the content top-anchored — both viewport-independent. */ min-height: 846px !important; align-items: flex-start; padding-top: var(--rod-header-height); isolation: isolate; overflow: clip; } .rod-hero .wp-block-cover__image-background { object-position: 50% 22%; } /* The live photograph reads vividly; only a light ink dim keeps text legible (the header's own top gradient handles the navigation). The dim is pinned to the light-scheme ink so it does not turn into a pale haze when the ink token flips in the dark scheme. */ .rod-hero .wp-block-cover__background { background-color: #242424 !important; opacity: 0.18; } /* Top-of-hero darkening, mirroring the live "fade to black" overlay that sits behind the white navigation. */ .rod-hero::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 220px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); pointer-events: none; } /* Irregular hero-to-content divider: the live site's own jagged artwork. */ .rod-hero::after { content: ""; position: absolute; z-index: 2; right: -1px; bottom: -1px; left: -1px; height: 145px; /* The artwork's alpha is the shape; filling it with the paper token keeps the divider matching the page surface in both colour schemes. */ background: var(--wp--preset--color--paper); mask: url("assets/images/siz-saz.png") center bottom / 100% 100% no-repeat; pointer-events: none; } .rod-hero-content { position: relative; z-index: 3; max-width: min(1240px, 94vw); /* Centre the whole hero block on the page (it otherwise sits flush-left within the full-width cover). */ margin-inline: auto; padding-top: 78px; padding-bottom: 0; text-align: center; } .rod-hero h1 { margin: 0; color: var(--wp--preset--color--white); /* The live hero wordmark is set in Armor Piercing 2.0 BB (Blambot); the display family is the fallback until the face loads. */ font-family: var(--wp--preset--font-family--hero); font-size: var(--wp--preset--font-size--xx-large); letter-spacing: 0.02em; line-height: 0.92; /* The wordmark reads as a single line, as on the live hero; the fluid size scales it down on narrow viewports so it still fits. */ white-space: nowrap; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28); } /* The white ROD mark set to the left of the wordmark, as on the live hero. */ .rod-hero h1::before { content: ""; display: inline-block; width: 0.73em; height: 0.73em; margin-right: 0.03em; vertical-align: 0; background: url("assets/images/brand/rod-mark-white.png") center / contain no-repeat; filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.3)); } .rod-hero-date { /* Live offsets: date at y=393, button at y=455 under the 174px-top H1. */ margin: 3.3rem 0 1.2rem; color: var(--wp--preset--color--white) !important; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.35rem, 2.15vw, 1.9375rem); letter-spacing: 0.035em; } /* * Desktop parallax: the hero photograph is given vertical headroom so a small * scroll-driven translate (see assets/js/parallax.js) makes it drift slower * than the white content sliding up over it. Degrades to a static crop on * narrow viewports and under reduced-motion (both handled below / in JS). */ @media (min-width: 782px) { .rod-hero .wp-block-cover__image-background { height: max(100%, 100vh); top: 0; object-position: 50% 0; will-change: transform; } } .rod-section { position: relative; padding-top: var(--rod-section-space); padding-bottom: var(--rod-section-space); } .rod-hero + .rod-section { padding-top: clamp(3.5rem, 7.6vw, 6.8rem); } .rod-section h2 { font-size: var(--wp--preset--font-size--x-large); } .rod-section .wp-block-buttons { margin-top: 2rem; } /* Red botanical artwork flanking the homepage sections, as on the live site. Sizes/positions reproduce the live rendered boxes at the 980px canvas and stay clear of the viewport edge on narrower screens. */ .rod-decor-leaf::before { content: ""; position: absolute; top: calc(var(--rod-section-space) + 1.5rem); left: max(0.75rem, calc(50% - 615px)); width: 137px; height: 141px; background: var(--wp--preset--color--red); mask: url("assets/illustrations/shape-02.svg") center / 100% 100% no-repeat; pointer-events: none; } /* The join CTA sits closer to the documentary player on the live site (~154px gap vs the default section rhythm's ~245px); trim its bottom padding to suit. Home-only section, so this does not affect the shared section spacing. */ .rod-decor-agave { padding-bottom: clamp(4rem, 6.7vw, 6.7rem); } .rod-decor-agave::before { content: ""; position: absolute; top: calc(var(--rod-section-space) + 3.5rem); right: max(0.75rem, calc(50% - 600px)); width: 144px; height: 129px; background: var(--wp--preset--color--red); mask: url("assets/illustrations/shape-03.svg") center / 100% 100% no-repeat; pointer-events: none; } .rod-gallery-wrap { padding-bottom: clamp(3.5rem, 7vw, 7rem); } /* On the live desktop site the join CTA follows the gallery closely — the last gallery image sits ~116px above the heading, not the full section rhythm. The default gallery trailing space (~101px) stacked on the join section's top padding (~144px at 1440) blew that gap out to ~265px, so on desktop the gallery drops its trailing space and the following section takes a smaller top padding. The agave decor keeps its 3.5rem offset below the heading. Mobile is tuned separately and left untouched. */ @media (min-width: 782px) { .rod-gallery-wrap { padding-bottom: 0; } .rod-gallery-wrap + .rod-section { padding-top: clamp(3.5rem, 6.2vw, 6rem); } .rod-gallery-wrap + .rod-decor-agave::before { top: calc(clamp(3.5rem, 6.2vw, 6rem) + 3.5rem); } } .rod-gallery-scroller { display: flex !important; gap: 20px; width: 100vw; margin-left: calc(50% - 50vw) !important; padding: 0 40px 1.25rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-color: var(--wp--preset--color--red) transparent; } .rod-gallery-scroller .wp-block-image { flex: 0 0 min(53.3vw, 767px); margin: 0; scroll-snap-align: center; overflow: hidden; background: var(--rod-image-placeholder); } .rod-gallery-scroller .wp-block-image img { width: 100%; height: clamp(300px, 40vw, 575px); object-fit: cover; transition: transform 300ms ease; } .rod-gallery-scroller .wp-block-image:hover img { transform: scale(1.025); } /* Focus ring for the keyboard-scrollable gallery region (assets/js/gallery.js makes the scroller focusable). Inset so it is not clipped by the page. */ .rod-gallery-scroller:focus-visible { outline: 3px solid var(--rod-focus); outline-offset: -3px; } /* Previous/next controls added by gallery.js: red discs over the scroller's edges on wide viewports only (phones swipe). Hidden until the script has wired them, so the markup never renders dead controls. */ .rod-gallery-wrap { position: relative; } .rod-gallery-arrow { position: absolute; top: calc(50% - 0.625rem); z-index: 2; display: none; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--wp--preset--color--red); color: var(--wp--preset--color--white); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); cursor: pointer; transform: translateY(-50%); transition: filter 160ms ease, opacity 160ms ease; } .rod-gallery-arrow-prev { left: 16px; } .rod-gallery-arrow-prev svg { transform: scaleX(-1); } .rod-gallery-arrow-next { right: 16px; } .rod-gallery-arrow:hover { filter: brightness(0.9); } .rod-gallery-arrow:disabled { opacity: 0.35; cursor: default; } @media (min-width: 782px) { .rod-gallery-has-controls .rod-gallery-arrow { display: inline-flex; } } .rod-video-section { padding-top: clamp(2.5rem, 4vw, 4rem); padding-bottom: clamp(2rem, 2.8vw, 3rem); } /* The live player is a 916px-wide centred box. */ .rod-video-section .wp-block-embed { position: relative; max-width: 916px; margin: 0 auto; } .rod-video-section .wp-block-embed__wrapper, .rod-video-section iframe { width: 100%; aspect-ratio: 16 / 9; } /* * Click-to-play YouTube facade (functions.php renders it in place of the * player iframe; assets/js/video.js swaps the player in on click). It fills * the Embed block's aspect-ratio box exactly like the iframe would, shows the * video's poster frame (a 4:3 thumbnail cropped to 16:9 to hide its * letterbox bars) and a red play disc matching the site's other controls. */ .rod-yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; } .wp-block-embed__wrapper > .rod-yt { position: absolute; inset: 0; height: 100%; } .rod-yt-play { position: absolute; inset: 0; display: block; color: var(--wp--preset--color--white); text-decoration: none; } .rod-yt-play img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease, filter 300ms ease; } .rod-yt-play:hover img, .rod-yt-play:focus-visible img { transform: scale(1.03); filter: brightness(0.85); } .rod-yt-play:hover { text-decoration: none; } .rod-yt-play:focus-visible { outline-offset: -4px; } .rod-yt-icon { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--wp--preset--color--red); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); transform: translate(-50%, -50%); transition: transform 160ms ease; } .rod-yt-icon svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; } .rod-yt-play:hover .rod-yt-icon { transform: translate(-50%, -50%) scale(1.08); } @media (max-width: 781px) { .rod-yt-icon { width: 56px; height: 56px; } } /* The red bell-flower hanging from the player's lower right corner. */ .rod-video-section .wp-block-embed::after { content: ""; position: absolute; top: calc(100% - 16px); right: -25px; width: 126px; height: 316px; background: var(--wp--preset--color--red); mask: url("assets/illustrations/shape-04.svg") center / 100% 100% no-repeat; pointer-events: none; } /* The homepage's closing cluster — documentary player, the "HVAD FOREGÅR DER PÅ ROD?" copy and the sponsor wall — sits tightly packed on the live site (measured ~84px above the heading and ~95px below its button at 1440). The generous default section padding blew those gaps out to ~270px/~230px, so the section that directly follows the video overrides it to match. */ .rod-video-section + .rod-section { padding-top: clamp(2rem, 3vw, 3.25rem); padding-bottom: clamp(2.25rem, 3.4vw, 3.5rem); } .rod-sponsors { padding-top: clamp(2.25rem, 3.3vw, 3.5rem); padding-bottom: clamp(4rem, 8vw, 8rem); text-align: center; } /* "ROD2026 er støttet af" is set in the rounded display face, mixed case. */ .rod-sponsors h2 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); margin-bottom: 1.5rem; } /* Loose centred logo rows (3 marks, then 2), matching the live composition. */ .rod-sponsor-grid { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: clamp(2rem, 4vw, 3.75rem); row-gap: 0.5rem; max-width: 1040px; margin: clamp(1.5rem, 3vw, 2.5rem) auto; } .rod-sponsor-grid .wp-block-image { margin: 0; } .rod-sponsor-grid img { width: auto; height: auto; object-fit: contain; } .rod-funder-names { max-width: 760px; margin-inline: auto; line-height: 1.4; } /* Footer */ .rod-site-footer { /* The live footer opens with ~33px above the jester illustration; the earlier 5vw (~72px at 1440) pushed the whole footer down on every page. */ padding-top: clamp(1.5rem, 2.3vw, 2.5rem); padding-bottom: 0; color: var(--wp--preset--color--red); } .rod-footer-columns { max-width: 990px; margin-inline: auto; gap: clamp(2rem, 6vw, 6rem); margin-bottom: 0 !important; } .rod-footer-illustration { margin: 0; } .rod-footer-illustration img { width: min(100%, 502px); max-height: 552px; object-fit: contain; filter: invert(26%) sepia(91%) saturate(2749%) hue-rotate(9deg) brightness(81%) contrast(101%); } .rod-footer-contact h2, .rod-footer-contact a { color: var(--wp--preset--color--red); } .rod-footer-contact h2 { font-size: clamp(2rem, 3vw, 2.75rem); } .rod-footer-contact p { font-family: var(--wp--preset--font-family--utility); font-size: 1.4375rem; } /* Language-dependent footer heading (KONTAKT / CONTACT). */ .rod-lang-en { display: none; } html[lang="en-GB"] .rod-lang-en, html[lang^="en"] .rod-lang-en { display: inline; } html[lang="en-GB"] .rod-lang-da, html[lang^="en"] .rod-lang-da { display: none; } /* Block-level language variants (the bilingual 404 buttons). */ html[lang^="en"] .wp-block-buttons.rod-lang-en { display: flex; } /* The follow icons: 39px filled red circles, as on the live footer. Plain theme markup with neutral class names (see parts/footer.html). */ .rod-follow-links { display: flex; gap: 0.65rem; margin: 1.4rem 0 0; padding: 0; list-style: none; } .rod-follow-links li { margin: 0; } .rod-follow-links a { width: 39px; height: 39px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--wp--preset--color--red); color: var(--wp--preset--color--white); } .rod-follow-links a:hover { filter: brightness(0.9); } .rod-follow-links svg { width: 22px; height: 22px; fill: currentColor; } /* * Dark-scheme adjustments that are not plain colour swaps. * * Images with an editor-linked dark-scheme variant (see functions.php) are * rendered twice, `.rod-logo-light` and `.rod-logo-dark`; only the one for * the active scheme is shown. Sponsor marks without a variant are editorial * uploads in assorted colours (several black-on-transparent), so in the dark * scheme they fall back to white monochrome: every opaque pixel goes white, * the alpha channel is untouched. That relies on the uploads having * transparent backgrounds — an opaque white-background logo would become a * white rectangle. The footer jester and header mark are red raster/SVG * images recoloured by filter, lifted to match the dark-scheme red. */ .rod-logo-dark { display: none; } :root[data-theme="dark"] .rod-logo-light { display: none; } :root[data-theme="dark"] .rod-logo-dark { display: block; } :root[data-theme="dark"] .rod-sponsor-grid img:not(.rod-logo-dark) { filter: brightness(0) invert(1); opacity: 0.92; } :root[data-theme="dark"] .rod-footer-illustration img, :root[data-theme="dark"] .rod-site-logo img { filter: invert(26%) sepia(91%) saturate(2749%) hue-rotate(9deg) brightness(81%) contrast(101%) brightness(1.3) saturate(0.85); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rod-logo-light { display: none; } :root:not([data-theme="light"]) .rod-logo-dark { display: block; } :root:not([data-theme="light"]) .rod-sponsor-grid img:not(.rod-logo-dark) { filter: brightness(0) invert(1); opacity: 0.92; } :root:not([data-theme="light"]) .rod-footer-illustration img, :root:not([data-theme="light"]) .rod-site-logo img { filter: invert(26%) sepia(91%) saturate(2749%) hue-rotate(9deg) brightness(81%) contrast(101%) brightness(1.3) saturate(0.85); } } /* Standard pages and local placeholders */ .rod-page-main { position: relative; padding-top: clamp(3.5rem, 7vw, 6rem); /* Live inner pages leave only ~40px between the last content block and the footer jester; the footer supplies the visual breathing room, so the page wrapper adds little of its own (was 8vw ≈ 115px at 1440). */ padding-bottom: clamp(1rem, 1.6vw, 2rem); } /* Big centred page title, as on every live inner page. */ .rod-page-main .wp-block-post-title { margin-bottom: clamp(2rem, 5vw, 4rem); text-align: center; } .rod-dev-placeholder { border-left: 5px solid var(--wp--preset--color--blue); padding: 1.25rem 1.5rem; background: var(--wp--preset--color--soft-white); } /* * Long-form inner pages (About, Registration). Each major section is an * anchored group; the header navigation dropdowns deep-link to these ids, so * scroll-margin keeps the target heading clear of the top edge (and of the * header, should it ever be pinned). */ .rod-page-main .rod-page-section { position: relative; scroll-margin-top: calc(var(--rod-header-height) + 1.5rem); margin-top: clamp(3.5rem, 8vw, 6.5rem); } .rod-page-main .rod-page-section:first-child { margin-top: clamp(1.25rem, 3vw, 2.5rem); } .rod-page-section > h2 { font-size: var(--wp--preset--font-size--x-large); } /* Sub-headings are ink, mixed or authored case, ~36px on the live canvas. */ .rod-page-main h3 { margin-top: 2em; font-size: clamp(1.5rem, 2.5vw, 2.25rem); color: var(--wp--preset--color--ink); } /* Wide imagery inside inner pages: centred, wider than the text column, with the live rendered widths on the 980px canvas. */ .rod-page-main .rod-img-hero img, .rod-page-main .rod-img-workshops img, .rod-page-main .rod-img-group img, .rod-page-main .rod-img-wide img { width: 100%; height: auto; } .rod-page-main .rod-img-hero, .rod-page-main .rod-img-workshops, .rod-page-main .rod-img-group, .rod-page-main .rod-img-wide { margin-left: auto; margin-right: auto; } .rod-page-main .rod-img-hero { max-width: 980px; } .rod-page-main .rod-img-hero img { aspect-ratio: 980 / 457; object-fit: cover; object-position: 50% 19%; } .rod-page-main .rod-img-workshops { max-width: 885px; margin-top: clamp(2rem, 5vw, 4rem); } .rod-page-main .rod-img-group { max-width: 938px; margin-top: clamp(2rem, 5vw, 4rem); } .rod-page-main .rod-img-wide { max-width: 1088px; margin-top: clamp(2.5rem, 6vw, 5rem); } /* The About festival video is a 975px centred player on the live page. */ .rod-video-om .wp-block-embed { max-width: 975px; margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; } .rod-video-om .wp-block-embed__wrapper, .rod-video-om iframe { width: 100%; aspect-ratio: 16 / 9; } /* Instructor profiles: square portrait, display-face name, small sans bio. */ .rod-instructors { max-width: 700px; margin: clamp(1.5rem, 4vw, 2.75rem) auto 0; gap: 1.5rem !important; } .rod-instructor .wp-block-image { margin: 0 0 0.9rem; } .rod-instructor .wp-block-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--rod-image-placeholder); } .rod-instructor h3 { margin: 0 0 0.35rem; font-size: 1.4rem; } .rod-instructor p { font-family: var(--wp--preset--font-family--utility); font-size: 0.9375rem; line-height: 1.5; } /* Working-group name list: a single serif column, as on the live page. */ .rod-namelist { margin-top: 1rem; padding-left: 2.2rem; } .rod-namelist li { margin-bottom: 0.15rem; } .rod-group-label { font-family: var(--wp--preset--font-family--utility); font-weight: 700; font-size: 1.1875rem; margin-bottom: 0.4rem; } /* About-page decorative red artwork, mirroring the live inline SVGs. */ .rod-om-program::after { content: ""; position: absolute; top: 38%; left: max(0.75rem, calc(50% - 625px)); width: 100px; height: 143px; background: var(--wp--preset--color--red); mask: url("assets/illustrations/shape-02.svg") center / 100% 100% no-repeat; pointer-events: none; } .rod-om-instructors::after { content: ""; position: absolute; bottom: -70px; right: max(0.75rem, calc(50% - 505px)); width: 114px; height: 129px; background: var(--wp--preset--color--red); mask: url("assets/illustrations/grass-1.svg") center / 100% 100% no-repeat; pointer-events: none; } .rod-om-history::before { content: ""; position: absolute; top: 90px; left: max(0.75rem, calc(50% - 618px)); width: 110px; height: 234px; background: var(--wp--preset--color--red); mask: url("assets/illustrations/rose-up.svg") center / 100% 100% no-repeat; pointer-events: none; } /* Registration offer rows: text column left, display-face price right. */ .rod-ticket { scroll-margin-top: calc(var(--rod-header-height) + 1.5rem); margin-top: clamp(3.5rem, 8vw, 6rem); } .rod-ticket-cols { gap: clamp(1.5rem, 4vw, 3rem); } .rod-ticket h2 { font-size: var(--wp--preset--font-size--x-large); margin-bottom: 0.9em; } .rod-ticket .rod-price { margin: 0.4rem 0 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.6rem, 2.65vw, 2.375rem); line-height: 1.1; letter-spacing: 0.02em; color: var(--wp--preset--color--ink); } @media (min-width: 782px) { .rod-ticket .rod-price { white-space: nowrap; } .rod-price .rod-price-note { white-space: normal; } } .rod-price .rod-price-note { display: block; font-size: 1rem; letter-spacing: 0.02em; } .rod-price .rod-price-note-inline { font-size: 1.125rem; } .rod-ticket .wp-block-buttons { margin-top: 1.6rem; } /* The red rocket artwork beside the Registration title and before its sponsor area (the live page's "gobbel" drawing). */ .rod-art-gobbel-title { position: absolute; top: 0; right: max(0.75rem, calc(50% - 395px)); width: 132px; height: 179px; background: var(--wp--preset--color--red); mask: url("assets/illustrations/gobbel.svg") center / 100% 100% no-repeat; transform: rotate(10deg); } .rod-art-gobbel-big { width: 201px; height: 340px; margin: 3rem 0 0 clamp(50%, calc(50% + 118px), 70%); background: var(--wp--preset--color--red); mask: url("assets/illustrations/gobbel.svg") center / 100% 100% no-repeat; transform: rotate(8deg); } /* In-content text links are underlined ink on the live pages, except the sheet-music downloads, which use Wix's teal link colour. Buttons keep their own treatment. */ .rod-page-main .wp-block-post-content a:not(.wp-element-button) { color: var(--wp--preset--color--ink); text-decoration: underline; } .rod-tune a { color: light-dark(#2d7893, #6cc4e6); } /* Live inner-page body copy (Jam & Music, Practical Info) sits in a ~450px column starting at the content-column left edge, while headings and tunes keep the full column. */ .rod-narrow-copy > p, .rod-narrow-copy > ul, .rod-narrow-copy > .rod-collapse { max-width: 452px; /* Core's constrained layout centres children with auto !important margins; match its weight to pin the copy to the column start instead. */ margin-left: max(var(--wp--style--root--padding-left, 1.25rem), calc(50% - 390px)) !important; margin-right: auto !important; } /* Collapsible section intros, mirroring the live Wix "collapsible text": two clamped lines with a Læs mere / Read more toggle. The clamp only applies once readmore.js has added the toggle, so the full copy stays visible without JavaScript. */ .rod-collapse.rod-collapse-ready:not(.is-open) .rod-collapse-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .rod-collapse-toggle { margin-top: 0.4rem; padding: 0; border: 0; background: none; color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--body); font-size: 0.875rem; font-weight: 700; cursor: pointer; } .rod-collapse-toggle:hover { text-decoration: underline; } /* Jam & Music: the 805px session photo under the title; each tune is a name, a download link and a 778px YouTube player, as on the live page. */ .rod-page-main .rod-img-jam { max-width: 805px; } .rod-page-main .rod-jam-section { margin-top: clamp(3rem, 4.5vw, 4.05rem); } /* The live photo-to-intro gap under the title. */ .rod-jam-intro { margin-top: 2.2rem; } .rod-page-main .rod-jam-section:first-of-type { margin-top: clamp(3rem, 7vw, 6.75rem); } .rod-tune { margin-top: 3.5rem; } .rod-collapse + .rod-tune { margin-top: 1.5rem; } /* The tune's YouTube player: a 778px 16:9 box under the download link. */ .rod-tune .rod-tune-video { max-width: 778px; margin-top: 1.7rem; margin-bottom: 0; } .rod-tune .rod-tune-video .wp-block-embed__wrapper, .rod-tune .rod-tune-video iframe { width: 100%; aspect-ratio: 16 / 9; } /* Tune names render italic at 35px on the live page. */ .rod-tune h3 { margin-bottom: 0.5rem; font-size: clamp(1.55rem, 2.45vw, 2.1875rem); font-style: italic; } /* Jam & Music decorative artwork, mirroring the live inline SVGs: the dancers beside the polka intro, the leaf on the left canvas edge mid-section, the flower above POLSKAER and the agave above VALSE. */ .rod-jam-polka::before { content: ""; position: absolute; top: -70px; right: max(0.75rem, calc(50% - 628px)); width: 262px; height: 266px; background: var(--wp--preset--color--red); mask: url("assets/illustrations/dancers.svg") center / 100% 100% no-repeat; pointer-events: none; } .rod-jam-polka::after { content: ""; position: absolute; top: 49%; left: max(0.75rem, calc(50% - 580px)); width: 129px; height: 173px; background: var(--wp--preset--color--red); mask: url("assets/illustrations/shape-02.svg") center / 100% 100% no-repeat; pointer-events: none; } .rod-jam-polska::before { content: ""; position: absolute; top: -235px; right: max(0.75rem, calc(50% - 596px)); width: 227px; height: 171px; background: var(--wp--preset--color--red); mask: url("assets/illustrations/flower.svg") center / 100% 100% no-repeat; pointer-events: none; } .rod-jam-valse::before { content: ""; position: absolute; top: -45px; right: max(0.75rem, calc(50% - 412px)); width: 164px; height: 147px; background: var(--wp--preset--color--red); mask: url("assets/illustrations/shape-03.svg") center / 100% 100% no-repeat; pointer-events: none; } /* Practical Info: the large red flower to the right of the address block. */ .rod-praktisk-adresse::before { content: ""; position: absolute; top: -20px; right: max(0.75rem, calc(50% - 412px)); width: 196px; height: 338px; background: var(--wp--preset--color--red); mask: url("assets/illustrations/flower-large.svg") center / 100% 100% no-repeat; pointer-events: none; } /* Practical Info packing list keeps the working-group list rhythm. */ .rod-plainlist { margin-top: 0.5rem; padding-left: 2.2rem; } .rod-plainlist li { margin-bottom: 0.15rem; } /* Merch: the centred poster composition (intro in a narrower centred column, as on the live page). */ .rod-merch-intro { max-width: 666px; margin-left: auto; margin-right: auto; } .rod-merch-posters .wp-block-image { margin-top: 1.4rem; margin-bottom: 1.4rem; } /* 2023 QR landing: the live page opens straight on the centred welcome composition; the template's "2023" H1 stays for assistive tech but is visually hidden. */ .rod-page-main:has(.rod-legacy-landing) .wp-block-post-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* The live landing text sits in a 521px centred column (the subheading wraps onto two lines at 1440). */ .rod-legacy-landing > * { max-width: 521px; } .rod-legacy-landing h2 { margin: 0; font-size: clamp(2.6rem, 4.45vw, 4rem); } .rod-legacy-landing h3 { margin: 1.4rem 0 2rem; font-size: var(--wp--preset--font-size--x-large); } .rod-legacy-landing p { margin: 0; } .rod-legacy-landing .rod-legacy-gap { margin-top: 1.9rem; } /* Sponsor area is reused verbatim from the homepage helper on inner pages. */ .rod-page-main .rod-sponsors { margin-top: clamp(2rem, 3.4vw, 3rem); } @media (max-width: 1080px) { :root { --rod-header-height: 82px; } .rod-header-inner { gap: 1rem; } .rod-primary-navigation .wp-block-page-list { gap: 0.85rem; } .rod-primary-navigation { font-size: 0.96rem; } } @media (max-width: 781px) { :root { --rod-header-height: 88px; --rod-section-space: clamp(4rem, 18vw, 7rem); /* * Live-Wix mobile typography. The Wix mobile site is a 320px canvas that * phones scale up to the screen width, so its type is proportional to the * viewport: body 18px, section headings 24px, page titles 37px — all at * 320 — which a 390px phone shows at 22/29/45px. WordPress's fluid engine * had shrunk the same presets to ~14.5/26px at 390. The presets are * emitted as !important rules against these variables, so the variables * are redefined here (this sheet loads after global styles). */ --wp--preset--font-size--medium: clamp(1.125rem, 5.6vw, 1.375rem); --wp--preset--font-size--x-large: clamp(1.5rem, 7.5vw, 2.6875rem); /* The hero face (Armor Piercing) draws its glyphs at roughly half the em box, and live compensates with a 72px nominal size on the 320 canvas (22.5vw) — the painted wordmark is ~310px on a 390 screen. */ --wp--preset--font-size--xx-large: clamp(4rem, 22.5vw, 6rem); } body { font-size: var(--wp--preset--font-size--medium); } .rod-site-header, body.home .rod-site-header { color: var(--wp--preset--color--white); } body:not(.home) .rod-site-header { color: var(--wp--preset--color--red); } /* * The live mobile site keeps a visible language control: on the homepage the * bordered DA/EN box sits fixed in the top-left corner (as on desktop); on * inner pages it sits centred in the header bar between the logo and the * hamburger. (Live renders a dropdown; the theme keeps its DA/EN box.) */ body:not(.home) .rod-corner-controls { position: absolute; left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); } /* Live mobile home header shows only the language box over the hero photo (the ROD mark sits inline in the hero wordmark, as on desktop). The mark is ~70px next to the ~66px painted glyphs at 390 → 0.78em of the 90px nominal font. */ .rod-hero h1::before { width: 0.78em; height: 0.78em; margin-right: 0.15em; } /* * The core Navigation block's "mobile" overlay only collapses below 600px. * Raise that threshold to the theme's content breakpoint (782px) so the * hamburger — and the in-overlay language switcher — appear together with the * single-column content layout, instead of leaving a 600–781px band with a * full horizontal menu and no visible language switcher. */ .rod-primary-navigation .wp-block-navigation__responsive-container-open { display: flex !important; } .rod-primary-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; } /* Reveal the in-nav language switcher inside the opened mobile overlay. */ .wp-block-navigation__responsive-container.is-menu-open .rod-language-mobile { display: flex; } .rod-header-inner { justify-content: space-between; } /* The home header hides the logo (the mark lives in the hero wordmark), so the hamburger alone must keep to the right edge. */ body.home .rod-header-inner { justify-content: flex-end; } .rod-primary-navigation { flex: 0 0 auto; } .wp-block-navigation__responsive-container-open { min-width: 48px; min-height: 48px; align-items: center; justify-content: center; color: inherit; } .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; background: var(--wp--preset--color--paper) !important; color: var(--wp--preset--color--red) !important; } .wp-block-navigation__responsive-container-close { min-width: 48px; min-height: 48px; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch; padding-top: 5rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: flex-end; gap: 0; } /* The overlay lists only the six page links (and the language switcher); the section dropdowns are a desktop-hover affordance. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { display: none !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a { min-height: 54px; display: flex; align-items: center; font-size: clamp(1.55rem, 7vw, 2.4rem); } .wp-block-navigation__responsive-container.is-menu-open .rod-language-mobile { justify-content: flex-end; margin-top: 2rem; } /* Live mobile header logo renders at ~61px on a 390 screen. */ .rod-site-logo img { width: 60px; height: 60px; } /* Live mobile hero: a 458px band on the 320 canvas (143vw) with the content top-anchored — wordmark row at ~y140, date just below, button at ~y345 on a 390 screen. */ .rod-hero { min-height: min(143vw, 620px) !important; align-items: flex-start; } .rod-hero::after { height: clamp(48px, 14vw, 90px); } .rod-hero-content { padding-top: 3.4rem; padding-bottom: 3.5rem; } .rod-hero .wp-block-cover__image-background { object-position: 48% 30%; } .rod-hero h1 { line-height: 0.86; } .rod-hero-date { margin: 2.4rem 0 0; font-size: clamp(1.3rem, 6.6vw, 1.9375rem); } .rod-hero .wp-block-buttons { margin-top: 4.4rem; } /* Live mobile buttons: ~271x49 hero CTA with a ~24px label, ~195x50 LÆS MERE — shorter and narrower than the desktop 238x60 minimum. */ .wp-element-button { min-width: 195px; min-height: 50px; } .rod-hero .wp-element-button { min-width: min(271px, 80vw); font-size: clamp(1.25rem, 6.2vw, 1.5625rem); } /* * The live mobile site keeps its red decor, scaled down and pinned to the * canvas edges. Sizes are the live mobile boxes (320 canvas × 390/320). */ .rod-decor-leaf::before { top: auto; bottom: -18px; left: auto; right: -14px; width: 86px; height: 89px; } /* Live: the agave sits centred between the join CTA and the documentary player, not beside the copy. */ .rod-decor-agave::before { display: none; } .rod-decor-agave::after { content: ""; display: block; width: 106px; height: 95px; margin: 2.5rem auto 0; background: var(--wp--preset--color--red); mask: url("assets/illustrations/shape-03.svg") center / 100% 100% no-repeat; pointer-events: none; } /* The bell hanging from the documentary player's lower-right corner. */ .rod-video-section .wp-block-embed::after { top: calc(100% - 10px); right: 0; width: 73px; height: 183px; } /* * The About-page decor sits in the whitespace gaps at the right canvas * edge on live mobile (half-clipped), never over the copy: the leaf above * WORKSHOPS, the grass before ARBEJDSGRUPPEN, the rose above RODS * HISTORIE. The program leaf re-anchors to the workshops sub-heading so it * lands in that gap regardless of copy length. */ .rod-om-program::after { display: none; } .rod-om-program h3:nth-of-type(3) { position: relative; } .rod-om-program h3:nth-of-type(3)::after { content: ""; position: absolute; top: -100px; right: -30px; width: 70px; height: 150px; background: var(--wp--preset--color--red); mask: url("assets/illustrations/shape-02.svg") center / 100% 100% no-repeat; pointer-events: none; } .rod-om-instructors::after { right: -12px; bottom: -70px; width: 62px; height: 105px; } .rod-om-history::before { top: -95px; left: auto; right: -18px; width: 72px; height: 140px; } .rod-jam-polka::before { top: -30px; right: -8px; width: 112px; height: 114px; } /* Not visible on the live mobile page. */ .rod-jam-polka::after, .rod-jam-polska::before { display: none; } .rod-jam-valse::before { top: -40px; right: -8px; width: 96px; height: 86px; } /* Live moves the practical-info flower from the address block to a centred spot between the contact section and the footer. */ .rod-praktisk-adresse::before { display: none; } #kontakt.rod-page-section::after, #contact.rod-page-section::after { content: ""; display: block; width: 177px; height: 305px; margin: 3rem auto 0; background: var(--wp--preset--color--red); mask: url("assets/illustrations/flower-large.svg") center / 100% 100% no-repeat; pointer-events: none; } .rod-art-gobbel-title { top: -6px; right: -22px; width: 100px; height: 135px; } .rod-art-gobbel-big { width: 130px; height: 225px; margin: 2.5rem auto 0; } /* Live mobile gallery slides are portrait crops (~69vw × 92vw). */ .rod-gallery-scroller .wp-block-image { flex-basis: 69vw; } .rod-gallery-scroller .wp-block-image img { height: min(92vw, 380px); } /* Live mobile sponsor logos run noticeably smaller than the desktop caps. */ .rod-sponsor-grid img { max-width: min(58vw, 240px); max-height: 130px; } /* Live inner-page typography on the scaled 320 canvas: page titles 37px, sub-headings 26px, footer KONTAKT 31px, contact line ~16px (at 320). */ .rod-page-main .wp-block-post-title { font-size: clamp(2rem, 11.5vw, 4rem); } .rod-page-main h3 { font-size: clamp(1.5rem, 8.1vw, 2.25rem); } .rod-legacy-landing h2 { font-size: clamp(1.9rem, 9vw, 4rem); } .rod-footer-contact h2 { font-size: clamp(2rem, 9.7vw, 2.75rem); } .rod-footer-contact p { font-size: clamp(1rem, 5vw, 1.4375rem); } .rod-collapse-toggle { font-size: 1rem; } /* Live stacks each instructor full-width on mobile. */ .rod-instructors { grid-template-columns: 1fr !important; } .rod-instructor h3 { font-size: 1.65rem; } .rod-instructor p { font-size: 1.05rem; } /* * Live mobile ticket rows read heading → body copy → price → button. The * price lives in a second column, so the columns dissolve into one flex * stack and the price/button slot in by order. */ .rod-ticket-cols { display: flex; flex-direction: column; gap: 0; } .rod-ticket-cols > .wp-block-column { display: contents; } .rod-ticket-cols .rod-price { order: 1; margin-top: 1.1rem; } .rod-ticket-cols .wp-block-buttons { order: 2; margin-top: 1.4rem; } .rod-ticket .rod-price { font-size: clamp(1.6rem, 8.1vw, 2.375rem); } /* * The live mobile Practical Info page leads with the dormitory section * (Overnatning / Sleeping facilities) before the address; the rest keeps * the shared order. */ .wp-block-post-content:has(> #overnatning), .wp-block-post-content:has(> #sleeping-facilities) { display: flex; flex-direction: column; } #overnatning.rod-page-section, #sleeping-facilities.rod-page-section { order: -1; margin-top: clamp(1.25rem, 3vw, 2.5rem); } .wp-block-post-content:has(> #overnatning) .rod-page-section:first-child, .wp-block-post-content:has(> #sleeping-facilities) .rod-page-section:first-child { margin-top: clamp(3.5rem, 8vw, 6.5rem); } /* Live mobile footer: contact block first, the jester closes the page at nearly full canvas width. */ .rod-footer-columns { flex-direction: column-reverse; text-align: center; } .rod-footer-illustration img { width: min(100%, 380px); max-height: 420px; } .rod-follow-links { justify-content: center; gap: 0.8rem; } .rod-follow-links a { width: 46px; height: 46px; } .rod-follow-links svg { width: 26px; height: 26px; } } @media (max-width: 430px) { .rod-hero-date { max-width: 16rem; margin-inline: auto; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }