/* ========================================================================== ICL shared carousel arrows Monday item 2735821726 "Align arrows across all carousels". -------------------------------------------------------------------------- HOW TO USE Put class="slick-prev icl-carousel-arrow" (or slick-next) on the arrow button and leave it EMPTY. No , no inline svg. The glyph is drawn here. Same for swiper: class="swiper-button-prev icl-carousel-arrow". Then delete that carousel's own arrow rules from its page stylesheet. WHY A MASK AND NOT AN ICON FONT FontAwesome is not loaded on every template in this theme. It is missing on single-brand, single-crop, single-post and single-trial, so an renders nothing there. A masked SVG has no font dependency and works on every template. WHY A MASK AND NOT content: url(...) Four components already swap the glyph for chevron-*-solid.svg via content: url(). That works, but an image cannot be recoloured by CSS and the fill is baked into the file, so hover and disabled states are impossible without shipping more copies. A mask takes its colour from background-color, so one file covers every state and every segment colour. WHY ONE SVG AND NOT TWO "next" is the same chevron flipped with scaleX(-1). One asset to keep in sync instead of two. RTL flips both again. TWO RULES THE HOST SLIDER MUST FOLLOW These arrows are absolutely positioned, so they span the slider's PADDING box, while the .slick-list they must line up with sits in its CONTENT box. For the two to coincide, the .slick-slider element must have: 1. NO vertical padding. Put that spacing on margin instead. Asymmetric padding (e.g. padding-top:0 at one breakpoint and padding-bottom:19px) throws the arrows off by half the difference, and only at that breakpoint, which is painful to spot. 2. NO fixed height smaller than its own .slick-list, or the track overflows its own box and drags the arrows with it. If arrows look off centre on a block, check those two before touching anything in this file. Do not add a per-carousel nudge - that is exactly the per-block drift this file exists to remove. WHY NO .rtl.css TWIN Position uses logical properties, which resolve against the dir="rtl" already set on in header.php. One file serves both directions, so the link in dynamic-style-loader.php does not call setRtlStyle(). ========================================================================== */ /* Width the site container settles at, per breakpoint. These mirror Bootstrap's .container steps plus the theme's own 1224px override in assets/css/main.css (@media min-width:1400px). The arrows use this to work out how much room there is beside the track, so they can sit outside the slides where there is space and tuck in where there is not, without ever leaving the viewport. If the container widths in main.css change, change these too. */ :root { --icl-container: 100vw; /* Rough allowance for the scrollbar, which 100vw includes but the layout does not. Keeps the arrow off the very edge on Windows. */ --icl-scrollbar: 20px; } @media (min-width: 576px) { :root { --icl-container: 540px; } } @media (min-width: 768px) { :root { --icl-container: 720px; } } @media (min-width: 992px) { :root { --icl-container: 960px; } } @media (min-width: 1200px) { :root { --icl-container: 1140px; } } @media (min-width: 1400px) { :root { --icl-container: 1224px; } } .icl-carousel-arrow { position: absolute; /* Full height of the carousel, glyph centred inside it, rather than top:50% + translateY(-50%) on a 44px box. Two reasons: - it centres on whatever the carousel actually is, with no magic percentage per block. Every carousel in this theme used a different one before: 0, 30%, 33%, 37%, 41%, 45px, 50%, 180px, 230px. - it makes the hit area the full height of the track, which is both easier to hit and what most carousel UIs do. This only lands correctly if the slider box matches its content. A slider with a hard height smaller than its own .slick-list will pull the arrow off centre - fix that slider's height, do not nudge the arrow. */ top: 0; /* Default: the arrow is as tall as the whole track, so the glyph lands on the track's vertical centre. Blocks whose slides are CARDS with a fixed-height image on top and variable-length text below are a different case: the track is as tall as the longest card, so its centre is nowhere near the pictures. Those blocks set --icl-arrow-align on the slider to the image height, e.g. .people_slider { --icl-arrow-align: 150px; } and the arrow lines up with the picture instead. One declaration per block, in the block's own stylesheet, instead of a hand-tuned transform. */ height: var(--icl-arrow-align, 100%); /* How far outside the track the arrow sits. Its own width plus a gap, so it clears the slides completely rather than overlapping them - but never more than the room that actually exists beside the container, or the arrow would end up off-screen at the narrow end of each breakpoint. See the --icl-container table above for where the room comes from. */ --icl-arrow-gap: 16px; --icl-arrow-room: max(0px, (100vw - var(--icl-container) - var(--icl-scrollbar)) / 2); --icl-arrow-outset: min(calc(44px + var(--icl-arrow-gap)), var(--icl-arrow-room)); inset-inline-start: calc(-1 * var(--icl-arrow-outset)); inset-inline-end: auto; z-index: 9; display: flex; align-items: center; justify-content: center; /* 44px wide hit area. The old buttons were 20-24px, under the WCAG 2.5.8 target size minimum. */ width: 44px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; /* The glyph paints from these, NOT from currentColor. currentColor looked tidy but it inherits whatever wins `color` on the button, and plenty of things set that: bootstrap gives .carousel-control-prev/-next color:#fff, swiper-bundle sets its own --swiper-theme-color, and several of these arrows are elements that pick up link colours. The result was arrows that turned white in some blocks. A dedicated property cannot be hijacked that way. */ --icl-arrow-color: #00b5d3; --icl-arrow-color-hover: #0092a8; line-height: 0; font-size: 0; } .icl-carousel-arrow.slick-next, .icl-carousel-arrow.swiper-button-next, .icl-carousel-arrow.carousel-control-next { inset-inline-start: auto; inset-inline-end: calc(-1 * var(--icl-arrow-outset)); } /* The glyph. 24 x 38 keeps the chevron's real 320:512 ratio - the two carousels already migrated to this SVG render it 24 x 73.6, i.e. stretched nearly twice as tall as it should be. Do not copy those numbers. */ .icl-carousel-arrow::before { content: ""; display: block; width: 24px; height: 38px; background-color: var(--icl-arrow-color); -webkit-mask-image: url("../icons/carousel-chevron.svg"); mask-image: url("../icons/carousel-chevron.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* The asset is a left chevron. Everything else is that, mirrored. */ .icl-carousel-arrow.slick-next::before, .icl-carousel-arrow.swiper-button-next::before, .icl-carousel-arrow.carousel-control-next::before { transform: scaleX(-1); } [dir="rtl"] .icl-carousel-arrow.slick-prev::before, [dir="rtl"] .icl-carousel-arrow.swiper-button-prev::before, [dir="rtl"] .icl-carousel-arrow.carousel-control-prev::before { transform: scaleX(-1); } [dir="rtl"] .icl-carousel-arrow.slick-next::before, [dir="rtl"] .icl-carousel-arrow.swiper-button-next::before, [dir="rtl"] .icl-carousel-arrow.carousel-control-next::before { transform: none; } /* --- Inline variant ------------------------------------------------------ Not every block puts its arrows inside the slider. The crops tab strip lays them out as flex siblings of the track, one on each side, in normal flow. Those keep the shared glyph, size, colour and hit area but opt out of the absolute positioning. The block then says how tall the arrow is and where it starts, in terms of what it lines up with. */ .icl-carousel-arrow--inline { position: static; align-self: flex-start; height: auto; inset-inline-start: auto; inset-inline-end: auto; flex: none; } .icl-carousel-arrow:hover::before, .icl-carousel-arrow:focus-visible::before { background-color: var(--icl-arrow-color-hover); } .icl-carousel-arrow:hover, .icl-carousel-arrow:focus-visible { background: transparent; } .icl-carousel-arrow:focus-visible { outline: 2px solid #00b5d3; outline-offset: 2px; } /* Faded rather than hidden, so the control does not vanish under the pointer. Only shows on sliders built with infinite:false. */ .icl-carousel-arrow.slick-disabled, .icl-carousel-arrow.swiper-button-disabled { opacity: .35; cursor: default; } /* Swiper draws its own rounded-cap glyph in ::after and sizes the button 27x44 with a -22px margin-top. Undo all of it. */ .swiper-button-prev.icl-carousel-arrow::after, .swiper-button-next.icl-carousel-arrow::after { content: none; display: none; } /* Everything swiper-bundle.min.css sets on .swiper-button-prev/-next has to be restated here at two classes. Both it and the base .icl-carousel-arrow rule are single-class, and the bundle is echoed into the BODY by the blocks that use it, so at equal specificity the bundle wins on source order. These are the same values as the base rule, just stated loudly enough to be heard. */ .swiper-button-prev.icl-carousel-arrow, .swiper-button-next.icl-carousel-arrow { top: 0; height: var(--icl-arrow-align, 100%); width: 44px; margin-top: 0; background-image: none; /* No colour override needed here any more: the glyph paints from --icl-arrow-color, not from `color`, so the bundle's --swiper-theme-color cannot reach it. */ /* Clear the bundle's physical --swiper-navigation-sides-offset so the logical offsets below decide the side. */ left: auto; right: auto; } .swiper-button-prev.icl-carousel-arrow { inset-inline-start: calc(-1 * var(--icl-arrow-outset)); inset-inline-end: auto; } .swiper-button-next.icl-carousel-arrow { inset-inline-start: auto; inset-inline-end: calc(-1 * var(--icl-arrow-outset)); } /* No swiper-specific hover rule needed either. Hover now changes the ::before background, which nothing else in the bundle competes for. */ /* No breakpoint overrides for the horizontal offset on purpose. --icl-arrow-outset above is already continuous: it takes the full 60px where there is room and shrinks smoothly as the viewport narrows, instead of jumping at fixed widths. Arrows also stay VISIBLE at every width - some carousels used to display:none them below 1400px and others did not, which was itself part of the inconsistency on the ticket. */ /* Slick hides arrows it does not need with .slick-hidden. Keep that working against the display:flex above. */ .icl-carousel-arrow.slick-hidden { display: none; }