/* ============================================================================ PORTFOLIO FULLSCREEN SLIDER — the Kinsey "Portfolio Fullscreen Slider Images 1" widget. Distinct from 10-portfolio-grid.css, which is the Portfolio Masonry Grid. Both are portfolio widgets and both appear on the Work page, but they share no markup, so keeping them apart stops a selector meant for one quietly reaching the other. --------------------------------------------------------------------------- THE WIDGET HAS NO HEIGHT CONTROL, WHICH IS WHY THIS IS CSS Worth stating, because the standing rule on this site is to use a widget's own settings and never overrule them from a stylesheet — see the note at the top of 10-portfolio-grid.css about the filter counters. That rule does not apply here. The section's classes are HARDCODED in the plugin: kinsey-core/elementor/widgets/dynamic/ portfolio-fullscreen-slider-images-1.php:555 'class' => array( 'section', 'section-fullheight', 'section-slider-projects-fullscreen', 'overflow' ) Nothing in Elementor -> Layout, Slider or Elements changes it. The full control list is Button, Bottom Navbar, Counter, Content/Category/Button Position, Container, Overlay, Thumbnail Size, transitions and typography — no height anywhere. So a stylesheet is the only lever, and it is not overruling a control that exists. ============================================================================ */ /* --- Section height ------------------------------------------------------ 100vh -> 50vh. The widget is a band inside the Work page, not a landing screen, so a full viewport pushed the masonry grid entirely below the fold. BOTH CLASSES ARE REQUIRED, and this is the trap. Kinsey sizes the two viewports differently, in css/main.css: .section-fullheight__inner min-height: 100vh .section-fullheight__inner_mobile height: calc(var(--fix-bar-vh, 1vh) * 100) One is `min-height`, the other is `height`, and they are separate elements rather than a breakpoint override of each other. Setting only the first leaves phones at full height and looks like the rule failed. `--fix-bar-vh` is Kinsey's mobile fix: its JS measures the real viewport and writes that variable, so the slider does not jump when a phone browser shows and hides its address bar. THE MOBILE RULE KEEPS THAT MECHANISM and just halves the multiplier — 100 to 50 — rather than substituting a flat `50vh`. A flat value would silently discard the fix and reintroduce the jump. (The masthead rules in 05-masthead.css do use a flat `65vh`; that is older and worth revisiting, not worth copying.) No `!important`: this file loads after Kinsey's main.css and both selectors are more specific than the parent's single class. ONE NUMBER TO CHANGE, in two places. If the band wants to be shorter or taller, change 50vh and the 50 multiplier together. If phones want a different value from desktop, split the mobile rule into its own breakpoint rather than compromising on one figure — see --evm-page-gap in 01-tokens.css for why one number serving two jobs goes wrong. */ .section-slider-projects-fullscreen .section-fullheight__inner { min-height: 50vh; } .section-slider-projects-fullscreen .section-fullheight__inner_mobile { height: calc(var(--fix-bar-vh, 1vh) * 50); } /* --- Text colour --------------------------------------------------------- The slide title and category were mid-grey over a dark-80 overlay. WHY, because the cause is not in this widget's settings and not in its own CSS: neither `.slider__heading` nor `.slider__subheading` declares a colour at all. They borrow utility classes — `h1` and `small` — and take whatever those resolve to. Kinsey's `h1` is `--h1-color-dark: #555555`. Kinsey's own mechanism for flipping that is the attribute `[data-arts-theme-text=light]`, which reassigns every heading level to its light variable. It IS used on this page — five times, on the preloader, the overlay menu and the masthead header — but nothing wraps the slider, so the slide text never enters a light context. THE ATTRIBUTE CANNOT BE SET FROM ELEMENTOR. It is printed by the plugin, and the widget exposes no text-theme control (grep the widget PHP for `theme_text` — there is nothing). Adding it would mean filtering the widget's rendered HTML, which also means clearing `_elementor_element_cache` on every deploy — see PROJECT-NOTES.md. Not worth it for a colour. `.slider__arrow` is already `#fff` in Kinsey's CSS and needs nothing. The scrollbar is handled separately at the foot of this file — its counter takes its colour from the HANDLE, not from the track, so setting it here did nothing. Using the site's own token rather than a literal white: this is the same situation as the nav over a scrimmed hero, which is what `--evm-ink-inverse` already exists for. */ .section-slider-projects-fullscreen .slider__heading, .section-slider-projects-fullscreen .slider__subheading { color: var(--evm-ink-inverse); } /* --- Category to title gap ----------------------------------------------- The category sat too far above the title. ALL OF IT IS THE CATEGORY'S OWN MARGIN. The title carries `my-0`, so it contributes nothing at the top. The category carries Bootstrap's `mb-3` — `margin-bottom: 1rem !important` — and the widget prints that class TWICE on the same element. Duplicated, but harmless; one instance is not adding to the other. Zero, matching `.eyebrow` in 03-base.css, which had exactly this problem and the same fix: a label should sit WITH the thing it introduces, not float between it and whatever is above. `!important` is required, not stylistic — Bootstrap's utility classes are flagged, so an unflagged rule here loses however specific it is. WHAT IS LEFT IS LEADING, NOT MARGIN. The title's line box is 1.23em, so there is roughly half a line of space above its capitals that no margin controls. If the gap still reads as too big, that is the next lever — either a negative margin here or a tighter line-height on the title — and it is worth knowing before assuming this rule failed. */ .section-slider-projects-fullscreen .slider__subheading { margin-bottom: 0 !important; } /* --- Descender clipping on the title ------------------------------------- The "g" of "Package" and "Design" were cut off along the bottom. THIS IS THE THIRD VARIANT OF THIS BUG IN THIS THEME, and all three need different treatment. Before copying a fix between them, check what is actually being masked: 10-portfolio-grid.css masks LINES, each with an inline pixel height written by SplitText. Fix: release it, `height: auto`. 03-base.css masks LINES with no inline height. Fix: pad the line. HERE masks CHARACTERS. The slider splits with `data-arts-split-text-set="chars"` and `overflow-wrap="chars"`, so the structure is line > word > .overflow > char and EVERY GLYPH GETS ITS OWN `overflow: hidden` box. That is why neither existing rule reaches this: both target `.arts-split-text__line`, and the mask here is two levels below it. PADDING PLUS AN EQUAL NEGATIVE MARGIN. The padding grows the mask so the descender has somewhere to go; the negative margin gives back exactly the same amount of layout height, so the title does not push the button down or change the spacing that was just tuned above. The two must stay equal — change one, change the other. Safe for the animation: these characters travel HORIZONTALLY (`translate3d(80%, 0, 0)`), so a taller mask does not affect how far they move or what hides them before they arrive. TUNING: 0.15em clears it with room to spare. The parent aligns these masks `vertical-align: top` inside the line, so the extra height extends downward, which is where it is needed. */ .section-slider-projects-fullscreen .slider__heading .overflow.d-inline-block { padding-bottom: 0.15em; margin-bottom: -0.15em; } /* --- Scrollbar and counter ----------------------------------------------- White track, BLACK in-view segment, white number beneath it. (This was briefly the other way round — black track, white segment. Evan looked at it and reversed it, 12 Aug 2026. Noted only so the swap does not read as a mistake later: it is a judgement, and the current state is the one that was chosen.) Which element is which, because the names are not obvious from looking at it: .slider__scrollbar the TRACK — the full-width line. Kinsey: `--color-gray-4`, #e8e8e8, which reads as the white line. .slider__scrollbar-handle the IN-VIEW SEGMENT sitting on top of it. Kinsey: `--color-gray-3`, #888888, the grey part. THE NUMBER IS THE HANDLE'S `:before`, drawn from `content: attr(data-content)` with no colour of its own. It inherits `color` from the handle — and the handle sets `color: var(--color-gray-3)` on itself. That is why an earlier attempt at this, which set `color` on the TRACK, left the number grey: the handle's own declaration was overriding the inherited value. Colour the handle and the number follows. NOTE THE HANDLE CARRIES TWO DIFFERENT COLOURS, and it has to. Its `background-color` paints the segment black; its `color` paints the number white. They are not in conflict — the number is positioned OUTSIDE the handle's box, below it, so white text never lands on the black bar. `--color-dark-1` is Kinsey's own variable, #000000, and is exactly what paints the Explore Project button — that button carries `bg-dark-1`. Using the same token rather than typing `#000` means the two cannot drift apart. `!important` HERE AND NOT ELSEWHERE IN THIS FILE, deliberately. These styles come from `kinsey-core/modules/slider/slider.min.css`, which is INJECTED AT RUNTIME rather than linked in the page source — so it lands in the document after this stylesheet and the usual "the child theme loads last" reasoning does not hold. Specificity alone would still win, but a flag makes it immune to load order as well. Same class of trap as the lazy-loaded `sectionGrid.min.css` noted in PROJECT-NOTES.md. */ .section-slider-projects-fullscreen .slider__scrollbar { background-color: var(--evm-ink-inverse) !important; } .section-slider-projects-fullscreen .slider__scrollbar-handle { background-color: var(--evm-ink-inverse) !important; color: var(--evm-ink-inverse) !important; } /* --- Vertical mode: the active segment reads by WEIGHT, not colour -------- Superseding the black segment above. Track and segment are both white now; what marks the current slide is that the segment is TWICE AS THICK. Kinsey's vertical track is `width: 2px`, so the segment goes to 4px. The negative margin is half the difference, which keeps the thicker bar centred on the thin one instead of growing to one side — without it the segment appears to shift sideways as it travels. SCOPED TO `_vertical` ON PURPOSE. The widget switches this class when the Direction control changes, so if the slider ever goes back to horizontal these two rules simply stop applying rather than setting a width on a bar whose thickness is its height. */ .section-slider-projects-fullscreen .slider__scrollbar_vertical .slider__scrollbar-handle { width: 4px !important; margin-left: -1px !important; } /* --- Arrows --------------------------------------------------------------- White, and half-opacity rather than nearly-invisible when disabled. THE ARROWS DECLARE NO COLOUR AT ALL. `.slider__arrow` sets only size, layout and a colour TRANSITION, so the glyph inherits whatever the slider wrapper resolves to — which over these images was near enough to nothing. Kinsey does have `.slider__arrow { color: #fff }`, but only inside `[data-arts-theme-text=light]`, and only on `:hover`. Neither applies here, for the same reason the title needed colouring further up this file. DISABLED IS KINSEY'S `.swiper-button-disabled` at `opacity: .3`. Swiper adds that class at the first and last slide. Both forms of the selector are matched because Kinsey writes both — the class lands on the arrow itself, but the descendant form exists too and would otherwise be left at .3. Only the opacity changes. `pointer-events: none` stays, so a disabled arrow is still genuinely unclickable rather than merely looking it. */ .section-slider-projects-fullscreen .slider__arrow { color: var(--evm-ink-inverse) !important; } .section-slider-projects-fullscreen .slider__arrow.swiper-button-disabled, .section-slider-projects-fullscreen .slider__arrow .swiper-button-disabled { opacity: 0.5 !important; } /* --- Grouping the scrollbar and arrows ------------------------------------ The bar, its counter and the arrows now read as one block, centred vertically as a group. THEY ARE NOT SIBLINGS IN A CONTAINER — they are two independently positioned elements, which is why they drifted apart: wrapper-scrollbar_right-center top: 50%, translateY(-50%) arrows_right-bottom bottom: gutter-vertical / 1.5 One was centred, the other pinned to the bottom. Nothing was holding them together. AND THIS IS NOT A SETTING. Kinsey's CSS does define `arrows_right-center`, but the widget never applies it — the class is hardcoded in kinsey-core at portfolio-fullscreen-slider-images-1.php:638, in the `else` branch of Content Position. The only way to get centred arrows from the admin is to set Content Position to Bottom, which moves them to the LEFT and relays out the slide. So this is CSS. THE MATH, so the numbers are not mysterious. With a group of bar + gap + arrows, centring the whole thing means: the bar moves UP by (gap + arrows) / 2 the arrows sit DOWN by (bar + gap) / 2 measured from centre Both fall out of the same three figures, which are named below so there is one place to change them. THE BAR HEIGHT IS A WIDGET SETTING, AND THIS HAS ALREADY BITTEN ONCE. Kinsey's vertical track is 200px by default and 360px when Progress Bar Length is set to Long, which adds `slider__scrollbar_vertical_long`. This file originally hardcoded 360 because that was the setting on the day it was written. The setting later changed, the hardcoded number did not, and the arrows ended up 80px too low — far enough to fall outside a 50vh band on a laptop, which is how it was noticed. So the variable now READS THE SETTING instead of restating it: `:has()` asks whether the long class is present and sets the height to match. Change Progress Bar Length in Elementor and this follows on its own. If `:has()` is ever unavailable the declaration is skipped and the default 200px stands — which is the more common setting, so the failure mode is the milder one. Below 991px Kinsey forces 140px regardless of the Long setting, because its media query lands after both rules. The breakpoint block at the foot of this section mirrors that and must stay last. bar 200px, or 360px when set to Long; 140px at <=991px arrows 120px desktop, 80px at <=991px `margin-right` aligns the arrows' centre line to the bar's. The bar sits 2px wide at the gutter, so its centre is 1px in; the arrows are 24px wide, so their centre is 12px in. -11px makes the two agree. Kinsey's own -8px left them 3px off, which is small but reads as a wobble in a column this narrow. */ .section-slider-projects-fullscreen { --evm-slider-bar-h: 200px; --evm-slider-arrows-h: 120px; /* Space between the bar and the arrows. Cut from 20px to 6px on 13 Aug 2026 — on a smaller laptop the group had too little room and the arrows read as detached from the bar rather than part of it. */ --evm-slider-nav-gap: 6px; } /* Progress Bar Length = Long. Tracks the widget rather than restating it. */ .section-slider-projects-fullscreen:has(.slider__scrollbar_vertical_long) { --evm-slider-bar-h: 360px; } .section-slider-projects-fullscreen .slider-projects-fullscreen__wrapper-scrollbar_right-center { transform: translateY(calc(-50% - (var(--evm-slider-nav-gap) + var(--evm-slider-arrows-h)) / 2)) !important; } .section-slider-projects-fullscreen .slider-projects-fullscreen__arrows_right-bottom { top: 50% !important; bottom: auto !important; transform: translateY(calc(-50% + (var(--evm-slider-bar-h) + var(--evm-slider-nav-gap)) / 2)) !important; margin-right: -11px !important; } @media screen and (max-width: 991px) { .section-slider-projects-fullscreen { --evm-slider-bar-h: 140px; --evm-slider-arrows-h: 80px; } }