/* United Flex homepage: the Fund VI motion grammar (as on melissa.html) on Mart's Flex V3 design. Saqib, 2026-09-28: Mart's PSD and notes are the design; only the motion feel follows Fund VI. Unlayered and loaded after site-consistency.css on the homepage only (scripts/build.py). Start states live under html.mx-js, which an inline head script adds unless reduced motion is requested and drops after 2.5s if home-premium.js never starts. Reduced motion, no script and the pause control all show the finished page: every block visible, the orange route fully drawn. */ .uf-site[data-page=home]{--mx-ease:cubic-bezier(.22,1,.36,1);--mx-navy:#001523;--mx-deep:#000c13;--mx-orange:#ff7d01;--mx-white:#fffdfc;--mx-route:#ff6a02} html.lenis,html.lenis body{height:auto} html.lenis{scroll-behavior:auto!important} .lenis.lenis-stopped{overflow:clip} /* ---------- header: transparent over the hero, glass after 40px, tucks away going down (Fund VI) ---------- */ .uf-site[data-page=home] .uf-header{transition:transform .55s var(--mx-ease),background-color .4s ease,backdrop-filter .4s ease;will-change:transform} @media(min-width:801px){ .uf-site[data-page=home] .uf-header{position:fixed;inset:0 0 auto;background:transparent} } @media(max-width:800px){ .uf-site[data-page=home] .uf-header{position:sticky;top:0} } .uf-site[data-page=home] .uf-header.mx-hdr-scrolled{background:rgba(1,20,30,.9);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%)} .uf-site[data-page=home] .uf-header.mx-hdr-hide{transform:translateY(-100%)} .uf-site[data-page=home] .uf-header:focus-within{transform:none} /* UF-18 (2026-10-03 audit): font, case, radius, the wipe-fill and focus/active motion, and the light variant's white-fill/navy-text/orange-wipe-on-hover, are the shared button system now (theme.css). This file's three previous, mutually-overriding attempts at this button's own look (a translucent navy, then solid white, then a blurred translucent navy again) are gone; the shared light variant reads clearly against the final band's photo either way. */ .uf-site[data-page=home] .uf-home-button:focus-visible{color:var(--mx-wipe-fg);outline:2px solid var(--mx-orange);outline-offset:3px} .uf-site[data-page=home] .uf-home-button:active{transform:scale(.98)} .uf-site[data-page=home] .uf-home-hero-cta{display:block} /* ---------- the orange route (drawn by home-premium.js, one SVG per section) ---------- */ .mx-route{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;visibility:hidden} .mx-route.is-ready{visibility:visible} .mx-route path{fill:none;stroke:var(--mx-route);stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:8} .uf-home-proof>.uf-home-wrap{z-index:3} .uf-home-price-pieces{z-index:2} .uf-home-hero-outline path{fill:none} /* The tail (C01-28, C01-30): navy where the line crosses the orange industries band and the orange notch below it; behind the brand photo, which it passes under. */ .mx-route path[data-mx-tone=navy]{stroke:var(--mx-navy)} .uf-home-brandband>.mx-route{z-index:0} .uf-home-film-section>.mx-route,.uf-home-industries>.mx-route,.uf-home-shops>.mx-route{overflow:hidden} .uf-site[data-page=home] .uf-home-brandband-fig{z-index:1} /* Sections carry the watermark words and route SVGs, so each is its own positioned frame. */ .uf-home-proof,.uf-home-parks,.uf-home-gallery,.uf-home-quiet,.uf-home-film-section,.uf-home-industries,.uf-home-shops,.uf-home-steps,.uf-home-final{position:relative;overflow-x:clip} :is(.uf-home-gallery,.uf-home-quiet,.uf-home-film-section,.uf-home-industries,.uf-home-shops,.uf-home-steps,.uf-home-final)>:is(.uf-home-wrap,.uf-home-film-slot,.uf-home-stage){position:relative;z-index:1} .uf-home-value{box-shadow:none} /* Parks: Mart's aerial on a real element, so the band can pan with the scroll like Melissa's. */ .uf-home-parks-bg{position:absolute;inset:-8% 0;z-index:0;background:url('../assets/mart/img/numbers-bg.jpg') center center/cover no-repeat;pointer-events:none;will-change:transform} /* ---------- value band (Mart's Flex V3: light grey, items on the 46 degree rails) ---------- H1, 2026-09-30 (Mart call 02:34 to 03:17, Saqib 2026-09-30): the three items are always open, no toggles, each on its white slanted card. The card's sides lean at the rails' angle, so the copy keeps clear of them with side padding sized to that lean. The static layout lives in home.css; the pinned overlap is below. */ @media(min-width:1191px){ .uf-home-value{padding:0} .uf-home-value>.uf-home-stage{position:relative;box-sizing:border-box;padding:190px 0 115px;min-height:var(--uf-value-min,0px)} .uf-home-value .uf-home-wrap{position:relative;z-index:2} .uf-home-values{max-width:none;margin:clamp(40px,5vh,64px) 0 0;padding:0} /* 2026-09-30 polish: Mart's frame sets each heading on two lines ("THE WHOLE NUMBER, / UP FRONT."). The skew pulls the card's right edge in by about half its lean at the heading row, so the first line needs the card wider there. The left side has room to give: the number column sits in front of the copy, so the copy's lower left keeps clear of the lean with a smaller left padding. */ .uf-home-values li{box-sizing:border-box;width:clamp(640px,52vw,800px);max-width:none;margin:0 auto!important; padding:28px clamp(90px,7vw,112px) 30px clamp(72px,5.6vw,96px);grid-template-columns:auto minmax(0,1fr);gap:22px; transform:translateX(var(--uf-item-x,0px))} .uf-home-values li:nth-child(1){--uf-item-x:-130px} .uf-home-values li:nth-child(3){--uf-item-x:130px} .uf-home-values li+li{margin-top:clamp(10px,1.6vh,18px)!important} .uf-home-values h3{font-size:clamp(20px,1.75vw,27px);line-height:1.14} .uf-home-values h3 br{display:inline} .uf-home-values .uf-home-number{font-size:clamp(28px,2.4vw,36px)} .uf-home-values .uf-home-value-body p{font-size:16px;line-height:1.6;max-width:none;margin:14px 0 12px} } /* Saqib, 2026-10-06: the card under the pointer comes to the front (home-value-front.js raises it, lifts it 2% and clips it to whatever covered it, so the reveal is one continuous motion). Here the card's own rectangle takes no pointer events, so its empty corners over the neighbours do not catch the pointer (its copy can still reach a little past the slanted side at the top right); the shadow is its own layer, deepened with the lift by the script (--uf-front-shadow, 0 to 1); and each card can hold copies of a later card's top-edge shade (.uf-front-shade), drawn while it is raised. */ @media(min-width:1191px) and (hover:hover) and (pointer:fine){ html.uf-front-js .uf-home-values li{pointer-events:none} html.uf-front-js .uf-home-values li::before, html.uf-front-js .uf-home-values li>*{pointer-events:auto} html.uf-front-js .uf-home-values li::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;transform:skewX(43.75deg); box-shadow:0 26px 48px -20px rgba(0,21,35,.3),0 10px 22px -14px rgba(0,21,35,.18);opacity:var(--uf-front-shadow,0)} } html.uf-front-js .uf-home-values li>.uf-front-shade{position:absolute;z-index:1;pointer-events:none;opacity:0;background:none} /* ---------- Shop Manual / Shop Talk: chamfered outline drawn in by the engine (Mart p8: sharp, pointed) ---------- */ .uf-home-shop-outline{display:none;position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#aabfc9;stroke-width:1.5;stroke-linejoin:miter;stroke-linecap:butt;pointer-events:none;z-index:0;overflow:visible} .uf-home-shop-panel.has-outline .uf-home-shop-outline{display:block} .uf-home-shop-panel.has-outline::before{background:#001523} .uf-home-shop-panel.has-outline>:not(.uf-home-shop-outline){position:relative;z-index:1} /* ---------- motion start states (only while the engine runs; reduced motion never hides) ---------- */ @media(prefers-reduced-motion:no-preference){ html.mx-js body[data-page=home] [data-mx-lines]{visibility:hidden} html.mx-js body[data-page=home] [data-mx-in]{opacity:0;translate:0 24px} html.mx-js body[data-page=home] [data-mx-rise]{opacity:0;translate:0 45px} html.mx-js body[data-page=home] [data-mx-stagger]>*{opacity:0;translate:0 22px} html.mx-js body[data-page=home] [data-mx-item]{opacity:0;translate:0 30px} html.mx-js body[data-page=home] :is([data-mx-wipe],[data-mx-photos]>img):not([data-mx-done]){clip-path:inset(0 0 100% 0)} html.mx-js body[data-page=home] :is(.uf-home-hero-outline path,.uf-home-shop-outline path){stroke-dasharray:0 100000} html.mx-js body[data-page=home] .uf-home-hero-art :is(video,.uf-home-hero-tint){transform:scale(1.08)} } body[data-page=home] .mx-line-mask{padding-bottom:.06em;margin-bottom:-.06em} /* The hero headline sits inside Mart's angled veil: its line masks hug the words, so the veil fit is judged on the lettering, not on full-width line boxes. */ body[data-page=home] .uf-home-hero h1 .mx-line-mask{width:fit-content;padding-right:.04em} /* The industries slash sits 1.6em tall below the baseline; give its line mask room. */ body[data-page=home] .uf-home-industries .uf-home-display .mx-line-mask{padding-block:.3em;margin-block:-.3em} /* Elements the engine moves must not also carry a CSS transform transition. */ body[data-page=home] :is([data-mx-rise],[data-mx-stagger]>*,[data-mx-item],[data-mx-in]){transition-property:color,background-color,border-color,box-shadow,filter} body[data-page=home] .uf-home-button[data-mx-rise]{transition:color .45s var(--mx-ease),border-color .55s var(--mx-ease),transform .16s ease-out} /* Measuring pass: layout positions without any motion offsets (added and removed in one task). */ html.mx-measure body[data-page=home] :is([data-mx-in],[data-mx-rise],[data-mx-stagger]>*,[data-mx-item],.mx-line,[data-mx-photos]>img,[data-mx-band],.uf-home-hero-art video,.uf-home-hero-tint){transform:none!important;translate:none!important} /* ---------- pinned stages: wide screens with motion only (value rail, One United Price, four steps) ---------- */ @media(min-width:1191px) and (prefers-reduced-motion:no-preference){ html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-value{height:calc(var(--uf-value-h,100vh) + 180vh)} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-value>.uf-home-stage{position:sticky;top:0;height:var(--uf-value-h,100vh);min-height:0;padding:clamp(76px,11vh,132px) 0 0} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-value .uf-home-section-title{font-size:clamp(40px,4.4vw,66px)} /* H1: each card overlaps the one before it (home-premium.js sizes the overlap to the viewport); later cards paint on top, a soft edge keeps the white cards apart, and a focused card comes forward. */ html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-values li+li{margin-top:calc(-1 * var(--uf-value-overlap,34px))!important} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-values li+li::before{box-shadow:0 -10px 28px -20px #0015233d} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-values li:focus-within{z-index:3} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-price{height:300vh} /* 2026-09-30 polish: with the parks section gone, "A park in motion" follows the pin directly, and the pin's lower half (empty below the subline) left about 400px of dead navy at the hand-off. The film section now rises over that empty half: the pin still spans the full viewport and the scroll track keeps its length, so the converge timing is unchanged; only the trailing space goes. What stays below the subline is the pin's own resting padding, as on narrow screens. Pin half height, minus the subline's offset (.uf-home-price-sub below) and its line, minus that padding. */ html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-price{ margin-bottom:calc(clamp(48px,7vh,88px) + 24px + clamp(80px,9vw,120px) - max(50vh,280px))} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-price-pin{position:sticky;top:0;height:100vh;min-height:560px;padding:0} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-price-stage{height:min(70vh,640px)} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-price-ring{display:block} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-price-pieces{display:block} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-price-label{opacity:0;transform:scale(.4);will-change:transform,opacity} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-price-sub{position:absolute;left:50%;top:calc(50% + clamp(48px,7vh,88px));translate:-50% 0;margin:0;opacity:0} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-steps{padding:0;height:calc(var(--uf-steps-h,100vh) + 210vh)} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-steps>.uf-home-stage{position:sticky;top:0;box-sizing:border-box;height:var(--uf-steps-h,100vh);display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,8vh,100px) 0} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-steps .uf-home-section-title{font-size:clamp(40px,4.4vw,66px)} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-steps .uf-home-step-grid{margin-top:clamp(32px,5vh,62px)} } /* Launch fix UF-H02 (2026-10-07): on touch screens 1191px and wider nothing can hover a card to the front, so cards 02 and 03 covered the copy and links of 01 and 02. There the three cards rest fully open, one below the other with the plain gap, as on tablets (home-premium.js sets no overlap for touch). Mouse screens keep Mart's resting overlap and the hover raise; keyboard focus raises a card on every screen (li:focus-within above). */ @media(min-width:1191px) and (prefers-reduced-motion:no-preference) and (hover:none), (min-width:1191px) and (prefers-reduced-motion:no-preference) and (pointer:coarse){ html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-values li+li{margin-top:clamp(10px,1.6vh,18px)!important} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-values li+li::before{box-shadow:none} } /* ---------- paused, reduced motion: the finished page, nothing moving ---------- */ body[data-page=home][data-uf-motion-paused=true] :is([data-mx-in],[data-mx-rise],[data-mx-stagger]>*,[data-mx-item],.mx-line){opacity:1!important;translate:none!important} body[data-page=home][data-uf-motion-paused=true] .mx-line{transform:none!important} body[data-page=home][data-uf-motion-paused=true] [data-mx-lines]{visibility:visible!important} body[data-page=home][data-uf-motion-paused=true] :is([data-mx-wipe],[data-mx-photos]>img){clip-path:none!important} body[data-page=home][data-uf-motion-paused=true] :is(.uf-home-hero-outline path,.mx-route path,.uf-home-shop-outline path){stroke-dasharray:none!important;stroke-dashoffset:0!important} body[data-page=home][data-uf-motion-paused=true] :is(.uf-home-hero-art video,.uf-home-hero-tint,[data-mx-band],[data-mx-photos]>img,[data-mx-wipe] img){transform:none!important} body[data-page=home][data-uf-motion-paused=true] .uf-home-price-label{opacity:1!important;transform:none!important} body[data-page=home][data-uf-motion-paused=true] .uf-home-price-sub{opacity:1!important} @media(prefers-reduced-motion:reduce){ .uf-site[data-page=home] :is(.uf-header,.uf-home-button,.uf-home-button::before,.uf-home-button span[aria-hidden=true]){transition-duration:.01ms} body[data-page=home] :is(.mx-route path,.uf-home-hero-outline path,.uf-home-shop-outline path){stroke-dasharray:none!important;stroke-dashoffset:0!important} } /* ===================================================================================================== 2026-10-02 Rick and Mart call (design/RICK-MART-CALL-2026-10-02-REQUIREMENTS.md, package "home"). Record: docs/changes/2026-10-02-home.md. Mart's PSD stays the look; only what the call asked changes. ===================================================================================================== */ /* B3: the thin light line under the mobile hero video was the fade mask tiling one pixel past the box at fractional heights. The masks never repeat now. */ .uf-home-hero-art :is(video,.uf-home-hero-tint){-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%} /* B2 (41:43): on phones the headline and the call to action sit over the video, readable on a gradient that only darkens the lower edge of the frame; the photo itself keeps its colour. */ @media(max-width:800px){ .uf-site[data-page=home] .uf-home-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end; min-height:max(540px,min(calc(100svh - 82px),760px));padding:0;overflow:hidden;isolation:isolate;background:#001523} .uf-site[data-page=home] .uf-home-hero .uf-home-hero-art{position:absolute;inset:0;width:auto;height:auto;margin:0;overflow:hidden;z-index:0} .uf-site[data-page=home] .uf-home-hero .uf-home-hero-art video{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;-webkit-mask-image:none;mask-image:none} .uf-site[data-page=home] .uf-home-opening .uf-home-hero-art .uf-home-hero-tint{inset:-1px;width:auto;height:auto;-webkit-mask-image:none;mask-image:none; background:linear-gradient(180deg,#00152340 0%,#00152300 16%,#0015232e 30%,#001523a8 44%,#001523de 60%,#001523f5 80%,#001523 100%)} .uf-site[data-page=home] .uf-home-hero .uf-home-hero-art svg{display:none} .uf-site[data-page=home] .uf-home-hero .uf-home-hero-inner{position:relative;z-index:1;padding:40px 0 44px} .uf-site[data-page=home] .uf-home-hero .uf-home-eyebrow{margin-bottom:16px;text-shadow:0 1px 10px #001523} .uf-site[data-page=home] .uf-home-hero h1{text-shadow:0 2px 24px #00152399} .uf-site[data-page=home] .uf-home-hero .uf-home-hero-dek{margin:18px 0 22px;text-shadow:0 1px 12px #001523} } /* B6/B9 (46:00, 52:12): twelve distinct park photos; phones show the best six so the call to action is closer. Photos are full colour (C2): no tint, filter or blend over them. */ .uf-site .uf-home-proof .uf-photo-grid img{filter:none;mix-blend-mode:normal} @media(max-width:767px){ .uf-site .uf-home-proof .uf-photo-grid img:nth-child(n+7){display:none} } /* B6/C2: the section texture was a big-box warehouse photo under a navy filter; plain navy now. Restore: the .uf-home-proof::before background in git show f6225ef:src/home.css. */ .uf-home-proof::before{background:linear-gradient(180deg,#001523,#021b2c)} /* B4 (42:30, 55:15): each unique leads with its promise. */ .uf-home-values .uf-home-value-lead{display:block;margin-bottom:4px;color:#001523;font-weight:700} /* B19: keep hyphenated words whole in display headings. */ .uf-home-nowrap{white-space:nowrap} .uf-site .uf-home-manual-list h3 .uf-home-nowrap{color:inherit;font:inherit;letter-spacing:inherit} /* B12 (56:32): the cost words float in the brand display face, all caps, and turn orange as they are pulled in (home-one-price.js). */ .uf-home-price-piece{font-family:var(--uf-display,UFDisplay,Arial,sans-serif);font-weight:400;font-synthesis:none;text-transform:uppercase;letter-spacing:.04em;color:#fffdfc} .uf-home-price-piece[data-tier="1"]{font-size:clamp(18px,1.85vw,30px);font-weight:600;font-variation-settings:"wght" 600} .uf-home-price-piece[data-tier="2"]{font-size:clamp(14px,1.3vw,20px);font-weight:400;font-variation-settings:"wght" 400} .uf-home-price-piece .uf-price-word{display:inline-block;will-change:transform} /* C01-44 (Rick audit 2026-10-08): reduced motion on wide screens shows the cost words still, at their scatter positions, and cross-fades them into the label over 0.4s (home-one-price.js applyStatic). The stage keeps room for them, so the fade never moves the layout. */ @media(min-width:1191px){ .uf-home-price.is-price-soft .uf-home-price-pieces{display:block} .uf-home-price.is-price-soft .uf-home-price-stage{min-height:clamp(280px,34vh,380px)} } /* B14 (59:47): where the block shows no moving pieces (phones, tablets, reduced motion) the line says what the pieces would have said. The pinned scene keeps "One number. Nothing hidden." */ .uf-home-price-sub-wide{display:none} .uf-home-price-sub-narrow{display:inline} .uf-home-price .uf-home-price-sub{max-width:34ch} @media(min-width:1191px) and (prefers-reduced-motion:no-preference){ html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-price-sub-wide{display:inline} html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-price-sub-narrow{display:none} } /* B13 (57:30 to 59:47): "Park in motion" features Melissa: a banner on the film and a direct call to action. */ .uf-home-film-banner{position:absolute;left:28px;top:24px;z-index:1;display:grid;gap:8px;padding:14px 22px 16px 18px;border-left:4px solid #ff7d01;background:#001523e6;color:#fffdfc;pointer-events:none} .uf-home-film-banner small{font:600 11px/1.2 var(--uf-body);letter-spacing:.16em;text-transform:uppercase;color:#ff9a3d} .uf-home-film-banner strong{font-family:var(--uf-display,UFDisplay,Arial,sans-serif);font-weight:400;font-size:clamp(20px,2.3vw,34px);line-height:1;letter-spacing:.02em;text-transform:uppercase} .uf-home-film-section .uf-home-film-footer{align-items:center} /* 2026-10-05: the qualifier line left of the button is gone (internal, Rick 61:47 and 62:58); the button keeps its place on the right. */ .uf-home-film-section .uf-home-film-footer{justify-content:flex-end} .uf-site[data-page=home] .uf-home-film-section .uf-home-film-cta{flex-shrink:0;color:#001523;white-space:nowrap} @media(max-width:800px){ .uf-home-film-banner{left:14px;top:14px;padding:10px 14px 11px 12px;gap:5px} .uf-home-film-banner small{font-size:10px} .uf-home-film-banner strong{font-size:18px} .uf-home-film-section .uf-home-film-footer{align-items:flex-start} .uf-site[data-page=home] .uf-home-film-section .uf-home-film-cta{width:100%;max-width:100%;justify-content:space-between;white-space:normal} /* The tracks may shrink below the button's one-line width, so phones under about 372px keep the heading, intro, caption and button inside the screen (the label wraps instead). */ .uf-home-film-section .uf-home-film-invitation,.uf-home-film-section .uf-home-film-copy{grid-template-columns:minmax(0,1fr)} } @media(max-width:389px){ /* "HEADQUARTERS." is one word: below 390px it fits the column only a little smaller. */ .uf-home-film-section .uf-home-film-copy .uf-home-display{font-size:min(26px,6.9vw)} } /* B10 (52:42 to 54:31): on very large screens (Rick's 2400px+ display) the value band's heading and cards grow with the screen, so the band no longer floats in empty grey. C01-60 (Rick audit 2026-10-08): the cards are wider again (44vw, up to 1200px) and home-premium.js centres the stack and steps it wider, so it fills the frame instead of leaving a grey strip on the right. */ @media(min-width:1800px){ .uf-home-value .uf-home-section-title, html.mx-js body[data-page=home]:not([data-uf-motion-paused=true]) .uf-home-value .uf-home-section-title{font-size:clamp(66px,3.2vw,84px)} .uf-home-values li{width:clamp(800px,44vw,1200px);padding:clamp(28px,1.3vw,34px) clamp(112px,5.6vw,150px) clamp(30px,1.4vw,36px) clamp(96px,4.6vw,124px)} .uf-home-values h3{font-size:clamp(27px,1.45vw,38px)} .uf-home-values .uf-home-number{font-size:clamp(36px,1.9vw,50px)} .uf-home-values .uf-home-value-body p{font-size:clamp(16px,.78vw,20px);max-width:62ch} .uf-home-values .uf-home-textlink{font-size:clamp(14px,.65vw,17px)} } /* Tablets (801 to 1190px): the hero ended about 250px below its call to action in empty navy (seen at 820px while checking B2). The hero is now as tall as its content, never taller than the photo frame. */ @media(min-width:801px) and (max-width:1190px){ .uf-site[data-page=home] .uf-home-hero{min-height:min(930px,calc(72.43vw * .9))} } /* B6/C6/C2 (2026-10-02): the closing band dropped Mart's cta-bg.jpg and its full-frame scrim for Melissa in full colour (Rick 01:19:29: a gradient on the frame edge is fine, a filter over the photo is not). home.css still names cta-bg.jpg. C01-13 (Rick audit 2026-10-08, Mart's Flex V3 closing block, "This should look like this >"): the Melissa film is the full-band background, a solid navy chevron comes in from each side (the hero's X, split by the copy), and the eyebrow, headline, line and both buttons are centred. The film stays unfiltered: only the top edge fades from the page navy, where the headline sits on the sky, as the PSD does. The chevrons live in the margins beside a centred copy column, so text never reaches them; on phones they are thin slivers inside the 20px margin. The aerial photo that sat behind the film (home/closing/melissa-park-aerial-1448.webp, 322 KB) loaded with the page even far below the fold; the film's own poster, fetched as it comes near (C09-32), is the still now. The split layout it replaces (photo left, copy right, 2026-10-02 item 10): git show 1f6eccb:src/home-premium.css. */ .uf-site[data-page=home] .uf-home-final{--uf-final-half:min(450px,50% - 24px);position:relative;isolation:isolate;overflow:hidden; display:grid;align-items:center;min-height:clamp(600px,44vw,860px);padding:clamp(110px,8.5vw,170px) 0 clamp(96px,7vw,150px); text-align:center;background-image:none;background-color:var(--mx-navy)} .uf-site[data-page=home] .uf-home-final::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,#001523 0%,#001523e6 16%,#001523bf 36%,#00152380 56%,#00152300 76%)} .uf-site[data-page=home] .uf-home-final-media{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden; background:none;filter:none;opacity:1;-webkit-mask:none;mask:none} .uf-site[data-page=home] .uf-home-final-media video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 72%} .uf-site[data-page=home] .uf-home-final-wedge{position:absolute;top:0;left:0;z-index:-1;height:100%; width:clamp(0px,calc(50% - var(--uf-final-half) - 32px),26vw);fill:#001523;stroke:none;pointer-events:none;overflow:visible} .uf-site[data-page=home] .uf-home-final-wedge-right{left:auto;right:0;transform:scaleX(-1)} .uf-site[data-page=home] .uf-home-final>.uf-home-wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center; width:calc(2 * var(--uf-final-half));max-width:none;margin-inline:auto} .uf-site[data-page=home] .uf-home-final p.uf-home-eyebrow{justify-content:center;margin:0 0 26px} .uf-site[data-page=home] .uf-home-final p.uf-home-eyebrow::after{content:"";width:32px;height:2px;background:#ff7d01} .uf-site[data-page=home] .uf-home-final .uf-home-section-title{text-align:center;max-width:none;margin-inline:auto;font-size:clamp(36px,5.2vw,92px)} .uf-site[data-page=home] .uf-home-final>.uf-home-wrap>p:not(.uf-home-eyebrow){max-width:540px;margin:26px auto 34px;color:#fff; text-shadow:0 1px 14px #001523,0 0 2px #001523b3} .uf-site[data-page=home] .uf-home-final-actions{justify-content:center;margin:0} @media(max-width:760px){ /* Phones: the copy column is the screen less the 20px margins; the chevrons shrink to slivers inside them and the navy edge reaches further down, because the copy covers most of the band. */ .uf-site[data-page=home] .uf-home-final{--uf-final-half:calc(50% - 20px);min-height:0;padding:96px 0 88px} .uf-site[data-page=home] .uf-home-final-wedge{width:12px} .uf-site[data-page=home] .uf-home-final::before{background:linear-gradient(180deg,#001523 0%,#001523eb 22%,#001523b8 50%,#00152380 68%,#00152300 92%)} .uf-site[data-page=home] .uf-home-final-actions{width:100%} } /* C2 (Rick 01:19:29, integration round 2026-10-02): the hero tint covered the whole video (desktop 15 to 55% navy everywhere, tablets never below 31%), so the middle of the film read as filtered. The tint now only darkens the band under the header (menu legibility) and the lower edge, and on tablets, where the headline sits on the film, a left gradient behind the copy that is gone before the middle of the frame (42% of the width). The centre of the video renders in full colour; on desktop the headline keeps Mart's navy veil. Phones keep their own rule above. Restore: delete these two rules (home.css still holds the old tint). */ @media(min-width:801px){ .uf-site[data-page=home] .uf-home-opening .uf-home-hero-art .uf-home-hero-tint{ background:linear-gradient(180deg,#0015238c 0,#00152300 17%,#00152300 78%,#00152366 100%)} .uf-site[data-page=home] .uf-home-opening:not(.is-hero-shape-fit) .uf-home-hero-art .uf-home-hero-tint{ background:linear-gradient(180deg,#0015238c 0,#00152300 17%),linear-gradient(90deg,#001523eb 0%,#001523d6 26%,#00152380 35%,#00152300 42%)} .uf-site[data-page=home] .uf-home-opening:not(.is-hero-shape-fit) .uf-home-hero h1{text-shadow:0 2px 24px #00152399} } /* Launch fix UF-H05 (2026-10-07; Rick via Mart 2026-09-23: the line continues across sections, behind images). The route SVG already sits below the photos, but the drifting wall fades its top and bottom rows out with a mask, so the orange line showed through the faded tiles and read as drawn across them. The wall's frame now holds the page navy behind the tiles, so the line passes behind the whole photo wall. */ .uf-site .uf-home-proof .uf-drift-shell.has-drift{background:var(--mx-navy,#001523)} /* ---------- brand photo band (Rick, Teams 2026-10-07 12:49 to 12:52 PM PT) ---------- The town hall image edge to edge after One United Price, "full width hi-res ... further up the page": 16:9 up to the window height (any crop comes off the sky, so the bottom-right logo keeps its place: it sits where Mart's 1920 logo version had it, 3.6% in from the right and 2vw up, 14.6% wide), and his clean version at 4:5 on phones (the entry tower). It wipes open once like the other photo blocks ([data-mx-wipe] in home-premium.js); without motion it is simply there. */ .uf-site[data-page=home] .uf-home-brandband{position:relative;padding:0;background:var(--mx-navy,#001523)} .uf-site[data-page=home] .uf-home-brandband-fig{position:relative;margin:0;overflow:hidden;height:56.25vw;height:min(56.25vw,100svh);min-height:300px} .uf-site[data-page=home] .uf-home-brandband-fig img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 100%} .uf-site[data-page=home] .uf-home-brandband-fig img.uf-home-brandband-logo{position:absolute;right:3.6%;bottom:2vw;width:14.6%;height:auto;object-fit:contain} @media (max-width:760px){.uf-site[data-page=home] .uf-home-brandband-fig img.uf-home-brandband-logo{display:none}} @media (max-width:760px){.uf-site[data-page=home] .uf-home-brandband-fig{height:auto;min-height:0;aspect-ratio:4/5}} /* Phones, with Rick's Melissa loop (2026-10-07): the portrait cut has bright sky in its upper half, where the kicker and the first headline line sit, so the gradient starts darkening sooner (kicker 4.5:1 or better); the headline's 24px glow is dropped there, because each SplitText line mask clipped it into a hard-edged box over the sky. */ @media(max-width:800px){ .uf-site[data-page=home] .uf-home-opening .uf-home-hero-art .uf-home-hero-tint{ background:linear-gradient(180deg,#00152340 0%,#00152300 12%,#00152366 22%,#001523c4 32%,#001523e6 46%,#001523f5 70%,#001523 100%)} .uf-site[data-page=home] .uf-home-hero h1{text-shadow:none} } /* Steady state and hover state for every homepage link (Rick: "remember, it's steady state hover state"). */ .uf-home-values .uf-home-value-body .uf-home-textlink,.uf-home-values .uf-home-textlink{transition:color .2s,border-color .2s} .uf-home-values .uf-home-value-body .uf-home-textlink:is(:hover,:focus-visible),.uf-home-values .uf-home-textlink:is(:hover,:focus-visible){color:#d96400;border-bottom-color:#d96400} .uf-home-manual-list>a h3{transition:color .2s} .uf-home-manual-list>a img{transition:opacity .25s} .uf-home-manual-list>a span>span{display:inline-block;transition:transform .2s} .uf-home-manual-list>a:is(:hover,:focus-visible) h3{color:#ff7d01} .uf-home-manual-list>a:is(:hover,:focus-visible) img{opacity:.86} .uf-home-manual-list>a:is(:hover,:focus-visible) span>span{transform:translateX(4px)} @media(prefers-reduced-motion:reduce){.uf-home-manual-list>a span>span{transition:none}.uf-home-manual-list>a:is(:hover,:focus-visible) span>span{transform:none}} /* C09-31 (Rick audit 2026-10-08): the park film card had a hover state but no visible keyboard focus. Focus now shows the hover state plus an inset orange outline (an outer one would be clipped by the card's wipe). */ .uf-site[data-page=home] .uf-home-film-section .uf-home-film-poster:focus-visible{outline:3px solid #ff7d01;outline-offset:-3px} .uf-site[data-page=home] .uf-home-film-poster:focus-visible .uf-home-film-watch{background:#001523eb;border-color:#ff7d01} .uf-site[data-page=home] .uf-home-film-poster:focus-visible .uf-home-film-play{background:white} /* Cheline's review (PDF, 2026-10-09). A3/A5: the orange X in NEXT is drawn solid in the one orange token, with no navy glow: the headline's 24px shadow (wide screens where the X shape does not fit) laid a navy halo over the orange, so the X looked faded beside the logo X and the buttons. A13: the MOTION outline behind "Explore Melissa, Texas" was a 1.5px stroke at 16% opacity, nearly invisible on navy; it now reads clearly and stays behind the copy. */ .uf-site[data-page=home] .uf-home-hero h1 span{color:var(--uf-orange,#ff7d01);text-shadow:none;opacity:1;-webkit-text-fill-color:currentColor} .uf-site[data-page=home] .uf-home-film-section .uf-home-wm{opacity:.5;-webkit-text-stroke-width:2px} @media(max-width:800px){.uf-site[data-page=home] .uf-home-film-section .uf-home-wm{-webkit-text-stroke-width:1.5px}} /* A18: the Shop Manual and Shop Talk arrows sat on the last word. home.css pins each arrow at the end of its button (2026-09-30 polish), but theme.css's shared button rule (position:relative, same specificity, loaded later) won, so "right" pulled the arrow 74px back over the label. Pinned again, clear of the text. */ .uf-site[data-page=home] .uf-home-shop-panel>.uf-home-button>span[aria-hidden=true]{position:absolute;left:auto;right:var(--shop-cta-arrow-end);top:calc(50% - 10px)} /* ---- Rick Loom 2026-10-13 (Homepage Optimization, Copy, Imagery, and Responsiveness) ---- */ /* 01:49 to 03:01 (R05): "this feels like an afterthought, and it shouldn't be... room to work, room to grow is another major tagline... bigger, bolder... match the weighting at bare minimum." The tagline over the headline now has the dek's bold weight and is about half again larger (12px regular before), still orange, capitals and tracked. The phone hero is anchored on its call to action, so the larger line grows upward; Find My Flex stays on the first screen at 1440x900, 390x844 and 320x640. Mart's hero X is drawn only while every line of the hero copy sits inside its left veil (home-premium.js fitHero), and the tagline is the top line, where the veil is narrowest: 17px at 1280 rising to 22px from 1680 keeps the X from 1280px up in Chromium and WebKit (it showed from 1266px with the 12px line; 18px hid it at 1280, tests/hero-seams.cjs). */ .uf-site[data-page=home] .uf-home-hero .uf-home-eyebrow{font-weight:700;font-size:clamp(17px,calc(1.25vw + 1px),22px);max-width:none} @media(max-width:800px){.uf-site[data-page=home] .uf-home-hero .uf-home-eyebrow{font-size:16px}} @media(max-width:480px){.uf-site[data-page=home] .uf-home-hero .uf-home-eyebrow{font-size:clamp(13px,4.1vw,16px);letter-spacing:.1em}} /* 11:45 and 12:40 (R19): the outline word behind "Explore Melissa, Texas" is RESERVE (home.html). It is a seventh of a word longer than MOTION, so on phones its size follows the width (5.4 is RESERVE's advance per 1px of type, measured 5.28) and the whole word shows; above 800px it already fits at the shared size. Decorative only. */ @media(max-width:800px){.uf-site[data-page=home] .uf-home-film-section .uf-home-wm{font-size:min(clamp(64px,20vw,120px),calc((100vw - 32px) / 5.4))}} /* 12:57 to 13:20 (R22): "let's match this line height... to this". BUILT FOR PEOPLE / WHO BUILD THINGS set two lines about 1.4 to 1.7 type-heights apart against 1.12 for WHAT IT MEANS TO MAKE A PARK YOUR HEADQUARTERS. Two causes: the big slash's own line box (1.6em type, so its line height) pushed the second line down, and the split line masks' -.3em top and bottom margins collapse into one between lines, adding .3em per line. Now the slash takes no line height, the heading uses the film heading's 1.12, and each following mask overlaps the one above by the full .6em it pads, so the lines sit 1.12 apart with and without motion. */ .uf-site[data-page=home] .uf-home-industries .uf-home-display{line-height:1.12} .uf-site[data-page=home] .uf-home-industries .uf-home-slash{line-height:0} body[data-page=home] .uf-home-industries .uf-home-display .mx-line-mask+.mx-line-mask{margin-top:-.6em} /* 16:02 to 16:45 (R29) and Teams 8:46 PM PT (T04, his iPhone at 440pt): "SIGN UP TO SEE THE FIRST EPISODE" ran into its arrow. The 2026-09-22 rule that squares both Shop buttons (home.css, "padding:18px 24px!important") names the Shop Talk button with :nth-child(2), so it outranked the later arrow-room padding below 1000px and the label used the arrow's 58px. The arrow room is reserved again on the Shop Talk button at every width (tests/button-arrow-overlap.cjs). */ .uf-site[data-page=home] .uf-home-shop-panel:nth-child(2)>.uf-home-button{padding-right:calc(var(--shop-cta-arrow-end) + var(--shop-cta-arrow-room))!important}