s. Every one of them arrived with `margin: 0; padding: 0` and relied on whatever inner component it wrapped to create its own breathing room. Measured on the live page, that produced this: hero 156 -> 804 (648) booking 804 -> 940 (136) intro 940 -> 1515 (576) <- 180px of dead space under the copy jackpots 1515 -> 2516 (993) offers 2516 -> 3575 (1059) <- heading, then ~150px of nothing suites 3575 -> 4425 (850) rewards 4425 -> 4941 (516) The gaps are not wrong by a little, they are inconsistent: each section's spacing is an accident of which component it happens to contain, so the page has no vertical rhythm at all. That is the "spacing on the home page is not great" note, and it cannot be fixed inside the components because each one is used on other pages too, at different densities. So: the SECTIONS own the vertical rhythm, and the components inside them are stripped of their leading/trailing margins. One scale, one place. ========================================================================== */ /* ========================================================================== 0. THE SCALE Three steps, all fluid. A section is `flow` unless it is doing something that earns more room (`loud`) or less (`tight`). ========================================================================== */ /* TIGHTENED. The first pass ran flow at 6.5rem / 89px a side, which put 178px between neighbouring sections and read as gaps rather than rhythm. Roughly a third has come off each step. The ratio between the three is unchanged — it was the absolute values that were wrong, not their relationship. */ /* TIGHTENED TWICE. Pass 1 ran flow at 6.5rem / 89px a side — 178px between neighbouring sections. Pass 2 took it to 3.5rem / 56px and it still read as a gap rather than a join. This is pass 3, at 2.5rem / 40px a side (80px between sections), which is a deliberate rhythm rather than dead space. The ratio between the three steps is unchanged throughout; only the absolute values were ever wrong. */ .skagit-home { --sk-home-flow: clamp(1.5rem, 2.4vw, 2.5rem); /* 24 -> 40px */ --sk-home-loud: clamp(2rem, 3.2vw, 3.25rem); /* 32 -> 52px */ --sk-home-tight: clamp(0.75rem, 1.2vw, 1.125rem); /* 12 -> 18px */ /* The single vertical gap between two adjacent sections. Each section takes half, so this value IS the space a visitor sees. 48px on a phone, 64px on a desktop — close to the old average of 50, but now identical everywhere rather than varying between 41 and 61. */ --sk-section-seam: clamp(3rem, 5vw, 4rem); } /* ========================================================================== 1. HERO -------------------------------------------------------------------------- Slider Revolution renders a fullwidth module that measures the viewport itself. It must not be given horizontal padding, a max-width, or a transform — any of the three makes its internal layer maths wrong and the captions drift off their slides. Only margins are touched here, and only to zero them: the request was for NO gap between the header and the slider, with the bulb rail as the sole thing between them. The rail is inside

, so header-bottom to slider-top must be exactly 0. ========================================================================== */ .skagit-home-hero { margin: 0; padding: 0; /* Containing block for the bulb-rail scrim declared in skagit-megamenu.css §20. Without this the scrim would position against the viewport. */ position: relative; /* The module is position:relative and paints its own background; without this the theme's white body shows through for one frame on load. */ background: var(--sk-ink, #061627); /* Contains the slider's own negative margins so they cannot pull the booking bar up over the last slide. */ isolation: isolate; } /* RevSlider ships `margin-bottom` on the module wrapper in several of its layouts. Zeroed at the wrapper rather than with !important on the module, so the plugin keeps control of everything else it sets inline. */ .skagit-home-hero .rev_slider_wrapper, .skagit-home-hero rs-module-wrap, .skagit-home-hero .rs-module-wrap { margin-block: 0; } /* ========================================================================== 2. SECTION RHYTHM ========================================================================== */ /* SPECIFICITY NOTE — read before editing any rule in this block. The default below is `.skagit-home > section` = (0,1,1). Every per-section override therefore has to ALSO be at least (0,1,1) or it silently loses no matter how far down the file it sits. Writing them as bare `.skagit-home- booking` (0,1,0) is the obvious thing to do and it does not work — the generic rule wins and every section renders at the same `flow` padding. So each override repeats `.skagit-home > section` and adds its own class, giving (0,2,1). Verbose on purpose; the alternative is !important. */ .skagit-home > section { /* >>> THE OUTER SEAM IS NOW ZERO, and this is a correction, not a retune. <<< Measured at 1430px, the gap between the booking bar and the "Welcome to The Skagit Casino Resort" heading was 152px, and it broke down exactly like this: .skagit-home-booking padding-bottom 32px (half a 64px seam) .skagit-home-intro padding-top 32px (the other half) .promo-text-header padding-top 88px (the component's own) -------------------------------------------- 152px The seam was doing nothing the components were not already doing. Every block inside these sections carries its own generous vertical padding -- .promo-text-header 88/60, .random-offers-wrapper 40/40, .skagit-expand-trigger 40/40, .skagit-rewards-promo 60/60 -- so the seam was a second, invisible layer of white space stacked on top of a first one, and it read as the page having fallen apart rather than as rhythm. Zeroing it leaves each section separated by its own component padding, which is still 80-120px between blocks. Nothing is flush; the doubling is gone. `--sk-section-seam` is deliberately LEFT DEFINED and still used by the overrides below, so the mechanism survives if a seam is wanted again. */ padding-block: 0; } /* ONE SEAM, NOT FIVE. -------------------------------------------------------------------------- Every section used to pick its own top and bottom padding from three different tokens. Measured at 1280px, the white space between consecutive sections came out as 41px, 46px, 46px, 61px and 56px — five different gaps down one page. Each was defensible on its own and the set was not: the eye reads inconsistent spacing as slightly broken rather than as emphasis, and the 15px ones were too small to look deliberate at all. Now the gap between any two sections is `--sk-section-seam`, and each section carries half of it. Because every seam is the sum of two halves, the rhythm is identical the whole way down whatever order the sections appear in. Change the seam in one place to retune the entire page. The hero and the booking bar stay flush at 0 — the booking bar is a control strip attached to the slider, not a section floating between gaps. */ .skagit-home > section.skagit-home-hero { padding-block: 0; } /* The booking bar is flush to the slider above it (0 on top, so it reads as attached rather than floating) but still owes the section below it half a seam — otherwise the gap under the bar is half the gap everywhere else, which is the same unevenness this block exists to remove. The bar has no background of its own, so the padding is invisible white space, not a stretched band. */ .skagit-home > section.skagit-home-booking { /* Flush both sides now. The bar is a control strip attached to the slider above it, and the section below it opens with .promo-text-header, which brings its own top padding -- so the half-seam that used to be here was the third of three stacked paddings under the booking bar. */ padding-block: 0; } /* ========================================================================== 3. STRIP THE COMPONENTS' OWN EDGE MARGINS -------------------------------------------------------------------------- Now that the sections own the rhythm, a component's first and last child must not add to it. Scoped to `.skagit-home` so the same components keep their standalone spacing on every other page. ========================================================================== */ .skagit-home > section > *:first-child { margin-block-start: 0; } .skagit-home > section > *:last-child { margin-block-end: 0; } .skagit-home .xtra-custom-container > *:first-child { margin-block-start: 0; } .skagit-home .xtra-custom-container > *:last-child { margin-block-end: 0; } /* ========================================================================== 4. SECTION HEADINGS -------------------------------------------------------------------------- "Exclusive Entertainment & Promotions" was a bare centred

with a large inherited margin under it, which is what made that band read as an empty page with a title stranded at the top. It gets a proper lockup: an overline rule, tightened tracking, and a measured gap to the cards. ========================================================================== / .skagit-home .section-title { margin: 0 0 clamp(2rem, 3.4vw, 3.25rem); text-align: center; font-size: clamp(1.75rem, 1.1rem + 2.1vw, 3rem); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; } / A short brass rule above the heading rather than under it — under it, it competes with the gap to the cards. / .skagit-home .section-title::before { content: ""; display: block; width: 62px; height: 2px; margin: 0 auto clamp(1rem, 1.6vw, 1.5rem); border-radius: 2px; background: linear-gradient(90deg, rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, 0.95) 50%, rgba(212, 175, 55, 0) 100%); } / ========================================================================== 5. INTRO BLOCK -------------------------------------------------------------------------- The welcome copy ran the full container width, so on a 1440px screen the measure was ~110 characters — roughly a page-width paragraph, which is why the block felt both empty and hard to read at the same time. ========================================================================== / .skagit-home-intro .promo-header-content { max-width: 68ch; margin-inline: auto; } .skagit-home-intro .promo-header-content p + p { margin-block-start: 1.1em; } .skagit-home-intro .promo-page-title { margin: 0 0 clamp(1.25rem, 2vw, 1.75rem); text-wrap: balance; } / The gold divider closed the section with no room around it. / .skagit-home-intro .header-gold-divider { margin-block-start: clamp(2rem, 3.4vw, 3rem); } / (The entertainment archive's count line is NOT here. This file is enqueued on the front page only — see inc/enqueue.php — so an archive-route rule placed here would simply never load. It lives in skagit-components.css.) / / ========================================================================== 7. BACKGROUND ART ON THE LIGHT SECTIONS -------------------------------------------------------------------------- The white bands between the two dark ones read as blank paper. This adds a quiet, continuous motif so the page feels composed rather than stacked. THREE RULES IT FOLLOWS, because "art behind text" is usually how body copy becomes unreadable: 1. Nothing sits above the text. Every layer is a ::before at z-index 0 with the section's own children lifted to z-index 1. 2. Maximum ink is about 4%. The felt-green and brass tints are laid at 0.03–0.045 alpha, which is a tonal shift you notice only when it is removed. Body-copy contrast is unchanged to two decimal places. 3. It is pure CSS gradients — no image requests, and it scales to any viewport without tiling seams. The motif itself: a soft brass bloom that ALTERNATES corner per section (top-right, then top-left, then top-right), plus a faint diagonal hatch at the same angle throughout. Alternating the bloom is what makes it read as one continuous composition running down the page instead of three unrelated backgrounds — the eye follows it side to side. ========================================================================== / .skagit-home > section.skagit-home-intro, .skagit-home > section.skagit-home-suites, .skagit-home > section.skagit-home-rewards { position: relative; isolation: isolate; overflow: hidden; / clips the bloom to the band / } .skagit-home > section.skagit-home-intro > , .skagit-home > section.skagit-home-suites > , .skagit-home > section.skagit-home-rewards > { position: relative; z-index: 1; } .skagit-home > section.skagit-home-intro::before, .skagit-home > section.skagit-home-suites::before, .skagit-home > section.skagit-home-rewards::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* THE HATCH IS GONE. It was a 1px repeating diagonal at 0.032 alpha, which is invisible in isolation and very visible in aggregate: across a wide pale band it aliased into hard diagonal banding, and the top edge of the pattern cut a straight line across the section. Two soft radial washes do the same job — give the white bands depth and carry the eye down the page — without any geometry to alias. If a texture is ever wanted back here, it needs to be a noise image, not a repeating gradient. / background-image: / the brass bloom / radial-gradient(58% 82% at 88% 6%, rgba(212, 175, 55, 0.085) 0%, rgba(212, 175, 55, 0) 64%), / a cool counterweight low on the opposite side / radial-gradient(46% 70% at 6% 96%, rgba(11, 61, 104, 0.05) 0%, rgba(11, 61, 104, 0) 66%); } / Mirror the bloom on every second light band so the motif crosses the page rather than repeating in the same corner three times. / .skagit-home > section.skagit-home-suites::before { transform: scaleX(-1); } / A hairline brass rule where two light bands meet — the connective tissue between them, and it stops the two backgrounds merging into one field. / .skagit-home > section.skagit-home-suites::after, .skagit-home > section.skagit-home-rewards::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(88%, var(--sk-container, 1280px)); height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, 0.28) 50%, rgba(212, 175, 55, 0) 100%); } / (The reduced-motion override that used to sit here dropped the hatch layer. The hatch no longer exists, and two static radial washes have nothing to shimmer, so no override is needed.) / / ========================================================================== 6. REDUCED MOTION Nothing here animates, but the hero does. If the visitor has asked for less motion, Slider Revolution's own autoplay is the thing to stop; it reads this attribute itself, so only the wrapper hint is needed. ========================================================================== / @media (prefers-reduced-motion: reduce) { .skagit-home-hero rs-module, .skagit-home-hero .rev_slider { scroll-behavior: auto; } } / ========================================================================== THE HOMEPAGE INTRO HEADER -------------------------------------------------------------------------- `.promo-text-header` is SHARED — promotions, entertainment and the jackpot templates all use it as their page header, where 88px of top padding is correct because it sits directly under the site header and needs to breathe. On the homepage it does not sit under the site header; it sits under a full-bleed slider and a booking bar. There, 88px on top was the largest single part of the 152px gap the visitor was complaining about. So it is reduced HERE ONLY, scoped under `.skagit-home`, and every other page that uses this component is untouched. Specificity is (0,2,1) — `.skagit-home > section` is (0,1,1) and `body .promo-text-header` in skagit-components.css §5 is (0,1,1) with an element, so this must be at least two classes deep to win without `!important`. ========================================================================== / .skagit-home > section .promo-text-header { padding-block: var(--sk-space-lg) var(--sk-space-lg); } / The slider sits immediately above, so a top border here would draw a hairline across the page directly under the booking bar. / .skagit-home > section .promo-text-header { border-top: 0; } / ========================================================================== THE BOOKING STRIP OVERLAPS THE HERO -------------------------------------------------------------------------- GOAL: the slider AND the booking strip both visible when the homepage loads, without scrolling. THE ARITHMETIC, because this is the whole reason the rule exists: site header 167px slider canvas 660px booking strip 167px ------------------------ stacked total 994px — taller than a 900px viewport, so the strip would sit below the fold Pulling the strip up over the slider's lower edge by 100px gives 894px, which fits. The slider's bottom 100px is background photography on every slide — the lowest layer on any of the six is slide 1's logo, which ends at y=624 of 660 — so nothing is covered up. `position: relative` + a z-index is required, not optional: without a stacking context of its own a negatively-margined element renders UNDER the slider, and the booking form would be visible but not clickable. >>> DESKTOP AND NOTEBOOK ONLY. Below 1025px the slider and the strip stack normally, the strip becomes full-width, and there is no fold to fight — overlapping there would just cover the slide artwork on a small screen. <<< ========================================================================== / @media (min-width: 1025px) { / * THE OVERLAP IS 40px, NOT 100. * * 100px was tried and abandoned: it makes the usable band the top 560px of the * 660 canvas, and content on FOUR of the six slides sits below that — the * lowest element on the slider is the Pop 2000 logo at y=639. The strip was * covering slide artwork, the date on the David Spade slide and two SEE MORE * DETAILS buttons. * * The screen space is bought by COMPACTING THE STRIP instead (below), which * costs nothing on the slides. 40px of overlap then clears everything: the * usable band becomes 620px and only two layers needed nudging (see * tools/fix-slider-fit.php). / .skagit-home > section.skagit-home-booking { position: relative; z-index: 5; margin-top: -40px; } / * A COMPACT STRIP. It was 167px tall — label above input, generous padding, * sized as if it were a page section rather than a control bar sitting on a * hero. Tightening the padding and the label gap brings it to about 110px and * makes the arithmetic work: * * header 167 + slider 660 + strip 110 - overlap 40 = 897, inside a 900 * viewport, so the slider and the booking strip are both visible on load. * * Nothing is hidden and no control shrinks below a 44px target — only the space * around them is reduced. / .skagit-home > section.skagit-home-booking .skagit-booking-wrapper { padding-block: 0.85rem; } .skagit-home > section.skagit-home-booking .skagit-booking-wrapper label, .skagit-home > section.skagit-home-booking .skagit-booking-wrapper .skagit-booking__label { margin-bottom: 0.2rem; } / The strip needs its own ground now that photography runs behind it, or the labels sit on whatever the slide happens to be showing. / .skagit-home > section.skagit-home-booking > .skagit-booking-wrapper { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55); } } / A slider that is 660 tall must not be given a 900px min-height by anything else on the page. / .skagit-home > section.skagit-home-hero rs-module-wrap, .skagit-home > section.skagit-home-hero rs-module { min-height: 0; } / ========================================================================== THE SEBASTIAN BACH SLIDE WAS STRETCHED -------------------------------------------------------------------------- Measured: 1-SebastianBach_Photo_smaller.jpg is 5464x8192 — a TALL PORTRAIT, aspect 0.667 — and the slider renders it into a 1270x660 landscape box with `object-fit: fill`. That is 188% distortion, which is the smeared, melted look. It is a LAYER image, not the slide background, which is why setting the slide's background `fit` to cover (tools/fix-slider-fit.php) did not reach it. `cover` crops the portrait to the landscape frame instead of squashing it. `object-position: center 30%` keeps the subject rather than the middle of an 8192px-tall frame, which would otherwise centre on his waist. >>> SCOPED TO THIS FILE ON PURPOSE. A blanket `rs-layer img { object-fit: cover }` would also apply to the logo layers on other slides, and cropping a logo is a different kind of wrong from stretching one. If another slide turns out to be stretched, measure it and add it here — the check is naturalWidth/naturalHeight against the rendered box. <<< ========================================================================== / rs-module rs-layer img[src="SebastianBach_Photo"], rs-module rs-layer img[data-src="SebastianBach_Photo"] { object-fit: cover; / * 45%. At 30% the frame showed the TOP of a 8192px-tall portrait — * desert and road — and pushed his face onto the bottom edge. A LARGER Y * percentage anchors a lower part of the source in the frame, which brings the * face up into view -- but 62% overshot and cut the face off at the top edge. * 45% centres on him. Each value was checked against a screenshot. / object-position: center 45%; } / ========================================================================== TWO OFFER RAILS, NOT ONE (appended 2026-08-15) -------------------------------------------------------------------------- front-page.php now emits two .skagit-home-offers sections instead of one: promotions, then entertainment. Without this rule the gap between the last promotion card and the "Live Entertainment" heading is just the first rail's own bottom padding — var(--sk-space-lg) on .random-offers-wrapper — because section 2 of this file sets `.skagit-home > section` to padding-block: 0 and lets each component bring its own air. The section boundary itself contributes 0. At that distance a heading floats between two rows instead of belonging to the one under it, which is the same "stranded title" the section-headings block in section 4 exists to fix. --sk-section-seam, clamp(3rem, 5vw, 4rem), is the page's one gap token, so the two rails are separated by exactly what separates any two sections. Only the top is set: the entertainment rail's own bottom padding still runs into whatever follows it, unchanged. >>> SPECIFICITY. Read the note at the top of section 2 before touching this. `.skagit-home > section` is (0,1,1) — one class plus the `section` element — and sets padding-block: 0. A bare `.skagit-home-entertainment` is (0,1,0) and LOSES to it no matter how far down the file it sits. Repeating `.skagit-home > section` puts this at (0,2,1), which is how every other per-section override in this file is written. Verbose on purpose; the alternative is !important. <<< The class is additive — both sections still carry `skagit-home-offers`, which is what assets/js/skagit-motion.js and the three reveal lists in skagit-motion.css match (§3 reveal, §5 prefers-reduced-motion, §6 print), so both rows still fade in, both are still covered by the reduced-motion escape hatch, and none of those multi-selector lists had to be edited. ========================================================================== */ .skagit-home > section.skagit-home-entertainment { padding-block-start: var(--sk-section-seam); }