/* The approved homepage finish, shared by interior page families. Keep structural X artwork and content-specific layouts; unify component details. */ :root{--uf-radius-card:22px;--uf-radius-media:18px;--uf-radius-control:12px} .uf-action-icon{display:inline-block;width:20px;height:20px;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .uf-site:not([data-page-family=home]) :is(.btn,.uf-button,a.cta,button.cta,.rsv){clip-path:none;border-radius:var(--uf-radius-control);gap:12px;align-items:center;transition:background-color .2s,border-color .2s,color .2s;box-shadow:none} /* The header 'Find a bay' keeps Mart's flipped parallelogram on every page, as on the homepage (Mart, 'flip it like this'). */ .uf-site:not([data-page-family=home]) .uf-nav>.uf-button{clip-path:polygon(17px 0,100% 0,100% 100%,0 100%);border-radius:0} .uf-site:not([data-page-family=home]) :is(.btn,.uf-button,a.cta,button.cta,.rsv):hover{transform:none;filter:none;background-color:#ff941f} .uf-site:not([data-page-family=home]) :is(.btn-line,.btn-outline):hover{background-color:#082c40;color:white;border-color:#8299a6} /* Cheline 2026-10-09 (A36e): the shared wipe filled an outline button with white while this rule turned its label white, so "Sign up for new episodes" went blank on hover. The wipe is the same navy as the hover fill; the label stays white. */ .uf-site:not([data-page-family=home]) :is(.btn-line,.btn-outline)::before{background:#082c40} .uf-site:not([data-page-family=home]) :is(.uf-park-card,.pcard,.ccard,.tcard,.wc,.gbc,.card,.rcard,.fsc,.fmain,.rangebox,.cpanel,.result,.gate,.lnote,.spec,.callout,.pull,.art .q){border-radius:var(--uf-radius-card);box-shadow:none} .uf-site:not([data-page-family=home]) :is(.uf-park-card,.pcard,.ccard,.tcard,.wc,.gbc,.card,.rcard,.fsc,.fmain){overflow:hidden;transition:border-color .2s,background-color .2s;transform:none} .uf-site:not([data-page-family=home]) :is(.uf-park-card,.pcard,.ccard,.tcard,.wc,.gbc,.card,.rcard,.fsc,.fmain):hover{transform:none;box-shadow:none} .uf-site:not([data-page-family=home]) :where(.ph,.hframe,.uf-card-image,.gt,.uf-ed-mosaic .mz,.uf-ed-media #player,.uf-ed-media .frame){border-radius:var(--uf-radius-media);overflow:hidden} .uf-site:not([data-page-family=home]) .uf-mc-detail-hero :is(.hfr,.hframe){border-radius:var(--uf-radius-card);overflow:hidden} .uf-site:not([data-page-family=home]) :is(.plan img,.art>figure img){border-radius:var(--uf-radius-media)} .uf-site:not([data-page-family=home]) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){border-radius:10px;font-family:var(--uf-body)} .uf-site:not([data-page-family=home]) :is(.chips span,.tagc,.toc2 a,.fbar button,.uf-mc-park-option){border-radius:8px} .uf-site:not([data-page-family=home]) :is(.uf-mc-directory-cards .tagc,.uf-card-image span){clip-path:none} .uf-site:not([data-page-family=home]) :is(.mtabs,.btnav,.tabrow){border-radius:12px 12px 0 0;overflow:hidden} .uf-site:not([data-page-family=home]) :is(.bt-stage,.tpanel){border-radius:0 0 22px 22px;overflow:hidden} .uf-site:not([data-page-family=home]) :is(.avr,.acc .it,.tr){border-radius:12px} .uf-site:not([data-page-family=home]) :is(.acc .it,.tr){overflow:hidden;margin-bottom:10px} .uf-site:not([data-page-family=home]) :is(.uf-mc-directory-cards .pcard .cap,.uf-mc-directory-cards .pcard .chips,.uf-mc-directory-cards .uf-card-copy){padding-inline:18px} .uf-site:not([data-page-family=home]) .uf-mc-directory-cards :is(.pcard,.uf-park-card){background:#082230;border:1px solid #ffffff18} .uf-site:not([data-page-family=home]) .uf-mc-directory-cards .uf-card-copy{padding-bottom:20px} .uf-site:not([data-page-family=home]) :is(.uf-ed--cms .card .bd,.uf-ed--cms .rcard .bd){padding:24px} /* Native vertical flow: no sticky copy, sideways content rails, or scroll entrances. Tables and map interaction retain their accessible local scroll regions. */ .uf-site:not([data-page-family=home]) :is(.result,.side,.local .lhs,.seo .media,.toc,.jump,.fbar){position:relative;top:auto} .uf-site:not([data-page-family=home]) .uf-ed--cms .rail .sc-x{display:grid;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;scroll-snap-type:none;gap:24px} .uf-site:not([data-page-family=home]) :is(.ctaband .row,.chaps .wrap,.jump .wrap){flex-wrap:wrap;overflow:visible} .uf-site:not([data-page-family=home]) .uf-map-park-list{height:auto;overflow:visible;overscroll-behavior:auto} @media(max-width:900px){.uf-site:not([data-page-family=home]) .uf-ed--cms .rail .sc-x{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){ .uf-site:not([data-page-family=home]){--uf-radius-card:18px;--uf-radius-media:14px} .uf-site:not([data-page-family=home]) .uf-ed--cms .rail .sc-x{grid-template-columns:minmax(0,1fr)} } .uf-site:not([data-page-family=home]) :is(.rangebox,.result,.cpanel,.gate,.uf-first-look,.optin .box,.mag .mcard,.hero .media){clip-path:none;border-radius:var(--uf-radius-card);overflow:hidden} .uf-site:not([data-page-family=home]) :is(.copt button,.mag .mcard){border-radius:12px} .uf-site:not([data-page-family=home]) .uf-ed--cms .mag :is(p,.sub){color:#c5d3db} .uf-site:not([data-page-family=home]) .uf-map-park-list{display:grid;grid-template-columns:minmax(0,1fr);scroll-snap-type:none} .uf-site:not([data-page-family=home]) .uf-map-item{min-width:0;max-width:100%;border-radius:18px;overflow:hidden} @media(max-width:800px){ .uf-site:not([data-page-family=home]) .uf-map-rail{order:0} .uf-site:not([data-page-family=home]) .uf-map-park-list{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:540px){.uf-site:not([data-page-family=home]) .uf-map-park-list{grid-template-columns:minmax(0,1fr)}} /* Imported block entrances must not leave content waiting for a scroll trigger. */ .uf-site:not([data-page-family=home]) :is(.bl,.rv,.rv-l,.rv-r,.lts .lt){opacity:1;transform:none;animation:none;transition:none} .uf-site[data-page-family=resources] .mag .kick{color:var(--uf-orange)} .uf-site[data-page-family=resources] :is(.card,.rcard) .ph{clip-path:none} /* Property-card tags use the brand accent for a clear outline on navy. */ .uf-site .pcard .chips .chip2{border-color:var(--uf-orange)} /* Centered reference pill, sized to its content and responsive to wrapped copy. */ .uf-site .uf-reference{padding:14px 0;background:var(--uf-navy);border:0} .uf-site .uf-reference-note{display:flex;align-items:center;justify-content:center;gap:12px;width:fit-content;max-width:100%;margin-inline:auto;padding:11px 24px;border:1px solid #ffffff20;background:#0b2635;border-radius:0;text-align:center} .uf-reference-note>svg{width:16px;height:16px;flex:none;stroke:#8da5b2;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .uf-reference-note>div{display:flex;align-items:baseline;gap:16px;min-width:0} .uf-reference-label{flex:none;color:#c6d4dc;font:500 12px/1.6 var(--uf-body);letter-spacing:0;text-transform:none} .uf-site .uf-reference-note p{margin:0;color:#93aab6;font:400 12px/1.6 var(--uf-body);letter-spacing:0} @media(max-width:700px){ .uf-site .uf-reference{padding:12px 0} .uf-site .uf-reference-note{align-items:center;gap:10px;padding:16px 26px} .uf-reference-note>svg{margin-top:0} .uf-reference-note>div{display:block} .uf-reference-label{display:block;margin-bottom:3px} } /* One perimeter belongs to the card; nested media must not draw a clipped second rim. */ .uf-site:not([data-page-family=home]) .uf-mc-directory-cards :is(.pcard .ph,.uf-park-card .uf-card-image){border:0;border-bottom:1px solid #ffffff18;border-radius:0;outline:none} /* ...but a keyboard user still sees where they are: the photo link gets the site's orange focus ring, drawn inside the photo so the card's clipped corners cannot hide it (polish round 2026-10-03, P12; tests/pdf-amends.cjs). */ .uf-site:not([data-page-family=home]) .uf-mc-directory-cards .uf-park-card .uf-card-image:focus-visible{outline:3px solid var(--uf-orange);outline-offset:-3px} /* State guides: compact reading panels balanced against an honest media caption. */ .uf-site[data-page-family=geography] .seo{padding:76px 0;background:var(--uf-paper)} .uf-site[data-page-family=geography] .seo>.wrap>.kicker{font:700 12px/1.5 var(--uf-body);letter-spacing:.12em;color:#a64f00;margin-bottom:18px} .uf-site[data-page-family=geography] .seo h2{max-width:960px;margin:0;font:400 clamp(28px,3vw,40px)/1.12 var(--uf-display);letter-spacing:0} .uf-site[data-page-family=geography] .seo .cols{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;margin-top:36px;align-items:start} .uf-site[data-page-family=geography] .seo .media{position:relative;top:auto;min-height:0;padding:0;background:transparent;border:0;box-shadow:none} .uf-site[data-page-family=geography] .seo .vt{aspect-ratio:auto;border-radius:22px;overflow:hidden;background:var(--uf-navy)} .uf-site[data-page-family=geography] .seo .vt::after{display:none} .uf-site[data-page-family=geography] .seo .vt :is(img,video){display:block;width:100%;height:auto!important;aspect-ratio:4/3;object-fit:cover} .uf-site[data-page-family=geography] .seo .vt .cap{position:static;display:block;padding:17px 21px;background:var(--uf-navy);color:#c5d3db;font:400 12px/1.6 var(--uf-body);letter-spacing:0;text-transform:none} .uf-site[data-page-family=geography] .seo .acc{border:0;min-width:0} .uf-site[data-page-family=geography] .seo .acc .it{margin-bottom:12px;border:1px solid #0015231a;border-radius:18px;background:#fff;overflow:hidden} .uf-site[data-page-family=geography] .seo .acc .it.open{border-color:#ff7d0170} .uf-site[data-page-family=geography] .seo .acc button.q{padding:22px 24px;gap:20px;min-height:82px} .uf-site[data-page-family=geography] .seo .acc .q h3{margin:0;color:var(--uf-navy);font:400 clamp(18px,1.5vw,22px)/1.3 var(--uf-display);letter-spacing:0} .uf-site[data-page-family=geography] .seo .acc .q:hover h3{color:#a64f00} .uf-site[data-page-family=geography] .seo .acc .pl{position:relative;flex:0 0 34px;width:34px;height:34px;border:1px solid #00152324;border-radius:50%;clip-path:none;background:transparent;color:transparent;font-size:0;transform:none} .uf-site[data-page-family=geography] .seo .acc .pl::before,.uf-site[data-page-family=geography] .seo .acc .pl::after{content:'';position:absolute;left:10px;right:10px;top:15px;height:1.5px;background:var(--uf-navy)} .uf-site[data-page-family=geography] .seo .acc .pl::after{transform:rotate(90deg);transition:transform .2s} .uf-site[data-page-family=geography] .seo .acc .it.open .pl{background:var(--uf-orange);border-color:var(--uf-orange);transform:none} .uf-site[data-page-family=geography] .seo .acc .it.open .pl::after{transform:rotate(0)} .uf-site[data-page-family=geography] .seo .acc .bd p{padding:0 24px 24px;margin:0;color:#405560;font:400 16px/1.7 var(--uf-body);max-width:65ch} @media(max-width:960px){.uf-site[data-page-family=geography] .seo .cols{grid-template-columns:minmax(0,1fr);gap:24px}.uf-site[data-page-family=geography] .seo .vt :is(img,video){aspect-ratio:16/9}} @media(max-width:600px){.uf-site[data-page-family=geography] .seo{padding:48px 0}.uf-site[data-page-family=geography] .seo .acc button.q{padding:19px 18px;gap:14px}.uf-site[data-page-family=geography] .seo .acc .bd p{padding:0 18px 21px;font-size:15px}.uf-site[data-page-family=geography] .seo .vt{border-radius:18px}} /* UF-19 (2026-10-03 audit): padding-block 9px (18px total) was under the 44px tap-target floor at this font size; bumped to clear it, same invisible-expansion idea as the shared .qlinks a rule below. */ .uf-site[data-page-family=geography] .seo .qlinks a{border-radius:999px;padding:14px 13px;margin-block:-5px;font:600 12px/1.4 var(--uf-body);letter-spacing:0;text-transform:none} .uf-site[data-page-family=geography] .seo :is(.qnote,.qlinks a[data-dead]){display:none} .uf-site[data-page-family=geography] .seo .qlinks:not(:has(a:not([data-dead]))){display:none} /* Let the desktop guide photograph fill the accordion column's height. */ @media(min-width:961px){ .uf-site[data-page-family=geography] .seo .cols{align-items:stretch} .uf-site[data-page-family=geography] .seo .media{display:flex;flex-direction:column;min-height:0} .uf-site[data-page-family=geography] .seo .vt{flex:1;display:flex;flex-direction:column;min-height:0} .uf-site[data-page-family=geography] .seo .vt :is(img,video){flex:1;min-height:0;height:0!important;aspect-ratio:auto;object-fit:cover} .uf-site[data-page-family=geography] .seo .vt .cap{flex:none} .uf-site[data-page-family=geography] .seo .acc .it:last-child{margin-bottom:0} } /* Contained state statistics panel with a readable four-column rhythm. */ .uf-site[data-page-family=geography] .oband{width:70%;margin:32px auto;padding:44px 0;border-radius:26px} .uf-site[data-page-family=geography] .oband>.wrap{max-width:none;padding-inline:32px} .uf-site[data-page-family=geography] .oband .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:left} .uf-site[data-page-family=geography] .oband .stat{min-width:0} .uf-site[data-page-family=geography] .oband .stat .n{font:400 clamp(24px,2.5vw,44px)/1.1 var(--uf-display);letter-spacing:0;white-space:nowrap} .uf-site[data-page-family=geography] .oband .stat .l{font:600 12px/1.6 var(--uf-body);letter-spacing:.05em;margin-top:12px;color:var(--uf-navy)} .uf-site[data-page-family=geography] .oband .xl{opacity:.35} @media(max-width:1100px){.uf-site[data-page-family=geography] .oband .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}} @media(max-width:600px){.uf-site[data-page-family=geography] .oband{width:calc(100% - 40px);padding:30px 0;border-radius:20px}.uf-site[data-page-family=geography] .oband>.wrap{padding-inline:22px}.uf-site[data-page-family=geography] .oband .grid{gap:24px 18px}.uf-site[data-page-family=geography] .oband .stat .n{font-size:23px;white-space:normal;overflow-wrap:anywhere}} /* Continuous full-width navy outro, retaining the inset orange statistics panel. */ .uf-site[data-page-family=geography] .uf-state-outro{position:relative;isolation:isolate;overflow:hidden;width:100%;padding:32px 0 0;background:var(--uf-navy);border:0} .uf-site[data-page-family=geography] .uf-state-outro>.oband{position:relative;z-index:1;margin:0 auto;width:70%} .uf-site[data-page-family=geography] .uf-state-outro>.cta{position:relative;z-index:1;background:transparent;border:0;border-radius:0;padding:0} .uf-site[data-page-family=geography] .uf-state-outro>.cta>.wrap{padding:64px var(--uf-gutter) 80px} @media(max-width:600px){ .uf-site[data-page-family=geography] .uf-state-outro{padding-top:24px} .uf-site[data-page-family=geography] .uf-state-outro>.oband{width:calc(100% - 40px)} .uf-site[data-page-family=geography] .uf-state-outro>.cta>.wrap{padding-block:40px 48px} } /* The artwork spans the entire merged section, behind the inset statistics. */ .uf-site[data-page-family=geography] .uf-state-outro>.xmk{position:absolute;z-index:0;top:0;right:-4%;width:44%;height:100%;opacity:.35;pointer-events:none} /* Compact destination cards for existing county guides. */ .uf-site .uf-nearby{background:var(--uf-navy);border:0;padding:36px var(--uf-gutter)} .uf-site .uf-nearby-row{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;max-width:1240px;margin-inline:auto} .uf-site .uf-nearby-row>a{display:flex;align-items:center;gap:22px;flex:1 1 420px;max-width:720px;min-width:0;padding:26px 28px;background:#0a2634;border:1px solid #27414e;border-radius:16px;color:#f5f7f8;text-decoration:none;transition:background-color .2s,border-color .2s} .uf-site .uf-nearby-row>a:hover{background:#0d2d3d;border-color:#ff7d0180} .uf-site .uf-nearby-row>a:focus-visible{outline:2px solid var(--uf-orange);outline-offset:4px} .uf-site .uf-nearby-pin{width:42px;height:42px;flex:none;stroke:var(--uf-orange);stroke-width:1.3} .uf-site .uf-nearby-copy{display:flex;flex-direction:column;gap:8px;min-width:0} .uf-site .uf-nearby-kicker{font:700 12px/1.4 var(--uf-body);letter-spacing:.16em;text-transform:uppercase;color:var(--uf-orange)} .uf-site .uf-nearby-title{font:400 22px/1.2 var(--uf-display);text-transform:uppercase} .uf-site .uf-nearby-description{font:400 13px/1.6 var(--uf-body);color:#9db0bb} .uf-site .uf-nearby-arrow{width:48px;height:48px;margin-left:auto;flex:none;display:grid;place-items:center;border:1px solid #547080;border-radius:50%;color:var(--uf-orange)} @media(max-width:600px){.uf-site .uf-nearby-row>a{padding:22px 18px;gap:14px}.uf-site .uf-nearby-pin{width:30px;height:36px}.uf-site .uf-nearby-title{font-size:18px}.uf-site .uf-nearby-arrow{width:38px;height:38px}} /* Carry the shared background through the county destination card. */ .uf-site[data-page-family=geography] .uf-state-outro>.uf-nearby{position:relative;z-index:1;background:transparent} /* One continuous outline above bay-card photos, labels and rounded corners. */ .uf-site:not([data-page-family=home]) .uf-mc-directory-cards :is(.tcard,.ccard){border-radius:0;overflow:visible} .uf-site:not([data-page-family=home]) .uf-mc-directory-cards :is(.tcard,.ccard) .ph{border:0;border-radius:var(--uf-radius-card);outline:none;isolation:isolate} .uf-site:not([data-page-family=home]) .uf-mc-directory-cards :is(.tcard,.ccard) .ph::before{content:'';position:absolute;inset:0;z-index:3;border:1px solid #ffffff18;border-radius:inherit;pointer-events:none;transition:border-color .2s} .uf-site:not([data-page-family=home]) .uf-mc-directory-cards :is(.tcard,.ccard):is(.on,:hover,:focus-visible) .ph::before{border:2px solid var(--uf-orange)} /* Imported photo crops include old square borders; keep those outside the frame. */ .uf-site:not([data-page-family=home]) .uf-mc-directory-cards :is(.tcard,.ccard) .ph img{transform:scale(1.07)} .uf-site:not([data-page-family=home]) .uf-mc-directory-cards :is(.tcard,.ccard):hover .ph img{transform:scale(1.1)} /* Crop the baked grey side borders from the bay-types banner photograph. */ .uf-site[data-page-family=types] .bhero.uf-mc-directory-hero>.bg{overflow:hidden;background-size:0 0} .uf-site[data-page-family=types] .bhero.uf-mc-directory-hero>.bg::before{content:"";position:absolute;inset:0 -12px;background-image:inherit;background-position:center 40%;background-size:cover;background-repeat:no-repeat} /* Bay types: Mart's icon gallery (New icons - bay types.psd; Teams, 2026-09-30 11:51 UTC: "Replace this section ... To this"). At rest a card is only his white line icon on the page navy with the bay name centred under it: no border, no tile, no corner tag. Each card is a link to its bay's page (Saqib, 2026-09-30: the detail box under the gallery was an extra click), with the bay's size line shown under the tile. Hover (fine pointers only) and keyboard focus fill the tile solid orange, fade to his navy art and turn the name navy. States live on .ph and its images, never on .tcard, whose opacity and position belong to the page motion. Every art box is as wide as the widest icon and as tall as its own icon (--uf-bay-art, written by scripts/market_continuity.py); each icon's width is its share of that width, so all six keep Mart's relative sizes. All cards share one width; the grid row stretches every card to its tallest one and .ph stands the art and name on the tile bottom, so each row shares one ground line and the tallest icon in each row sits 42px under the tile top, as Mart's orange card hugs his micro bay. Every size line keeps room for two lines, so a line that wraps on a phone never lifts its tile off the row's ground line. */ .uf-site .uf-mc-directory-cards #tgrid.uf-bay-gallery{display:block} .uf-site .uf-bay-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 30px} .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;width:100%;min-width:0;margin:0;padding:0;font:inherit;color:inherit;text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent} .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard .ph{display:flex;flex:1 0 auto;flex-direction:column;justify-content:flex-end;align-items:stretch;aspect-ratio:auto;padding:9.58% 0 6.77%;border:0;border-radius:0;background-color:transparent;container-type:inline-size;transition:background-color 200ms ease,transform 160ms ease-out} .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard .ph::before,.uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard .ph::after{display:none} .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard .ph>.uf-bay-illustration{position:relative;inset:auto;display:block;width:auto;margin:0 9.2%;padding:0;aspect-ratio:var(--uf-bay-art,467/238);background:none;border:0} .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard .ph .uf-bay-icon{position:absolute;left:0;right:0;bottom:0;display:block;max-width:none;height:auto;margin:0 auto;object-fit:fill;transform:none;transition:opacity 200ms ease} .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard .ph .uf-bay-icon-selected{opacity:0} /* UF-19 (2026-10-03 audit): the clamp's floor was 10px, under the 12px minimum at narrow container widths. */ /* UF-19 (2026-10-03 audit): the clamp's floor moved from 10px to 12px (the text-size minimum); at that size "SMALL WAREHOUSE" no longer fits this card's width on one line, so it wraps instead of clipping (nowrap was fine when the floor could shrink further to fit). */ .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard .tagc{position:static;display:block;margin:4.42cqi 0 0;padding:0 2px;background:none;clip-path:none;border-radius:0;color:#fff;font:400 clamp(12px,4.71cqi,18px)/1.25 var(--uf-display);letter-spacing:normal;text-transform:uppercase;text-align:center;white-space:normal;transition:color 200ms ease} /* The bay's size line, under the tile (it was in the removed detail box). */ .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard .cap{position:static;display:block;flex:none;min-height:2.8em;margin:12px 0 0;padding:0 4px;background:none;border:0;color:#afc0c8;font:400 clamp(12px,1.05vw,15px)/1.4 var(--uf-body);letter-spacing:.01em;text-align:center;white-space:normal;text-wrap:balance;transition:color 200ms ease} .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard:focus-visible .ph{background-color:var(--uf-orange)} .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard:focus-visible .ph .uf-bay-icon-default{opacity:0} .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard:focus-visible .ph .uf-bay-icon-selected{opacity:1} .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard:focus-visible .tagc{color:#021321} .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard:focus-visible .cap{color:#fff} @media (hover:hover) and (pointer:fine){ .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard:hover .ph{background-color:var(--uf-orange)} .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard:hover .ph .uf-bay-icon-default{opacity:0} .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard:hover .ph .uf-bay-icon-selected{opacity:1} .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard:hover .tagc{color:#021321} .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard:hover .cap{color:#fff} } .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard:active .ph{transform:scale(.98)} /* Forced colours drop the orange fill, so the hovered or focused tile keeps a system-colour frame there. */ @media (forced-colors:active){.uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard:is(:hover,:focus-visible) .ph::before{display:block;content:'';position:absolute;inset:0;border:3px solid Highlight;pointer-events:none}} .uf-site[data-page=baytypes] .uf-bay-cards .tcard:focus-visible{outline:none} .uf-site[data-page=baytypes] .uf-bay-cards .tcard:focus-visible .ph{outline:2px solid #fff;outline-offset:4px} @media (prefers-reduced-motion:reduce){.uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard :is(.ph,.uf-bay-icon,.tagc,.cap){transition:none}.uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard:active .ph{transform:none}} @media(max-width:860px){.uf-site .uf-bay-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}} @media(max-width:520px){.uf-site .uf-bay-cards{gap:20px 12px}.uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard .cap{margin-top:8px} /* UF-19 (2026-10-03 audit): the 12px text floor no longer lets "Small Warehouse" (the longest label) fit on one line at this card width with Mart's tracking held at 0 - it alone wraps to two lines. The other five stay on one. Reserving a two-line box on every label (not just the one that needs it) keeps every card in this two-column layout the same height, so nothing in the row looks uneven. */ .uf-site[data-page=baytypes] .uf-mc-directory-cards .uf-bay-cards .tcard .tagc{min-height:calc(1.25em*2)}} /* Below 375px two cards cannot hold "SMALL WAREHOUSE" on one line at a readable size, so the gallery stacks. */ @media(max-width:374px){.uf-site .uf-bay-cards{grid-template-columns:minmax(0,1fr)}} /* Photo-led location navigation, with wrapping choices on small screens. */ .uf-site[data-page=baytypes] .uf-mc-type-selector{display:block;padding:0;background:var(--uf-navy)} .uf-site .uf-location-cinema{width:100%;border:0;border-radius:0;overflow:hidden;background:var(--uf-navy)} .uf-site[data-page=baytypes] .uf-mc-type-selector .plist{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:18px max(var(--uf-gutter),calc((100vw - 1240px)/2));background:white;list-style:none} .uf-site[data-page=baytypes] .uf-mc-type-selector .plist li{flex:1 1 145px;padding:0;background:transparent;border-radius:9px;min-height:0;list-style:none} .uf-site[data-page=baytypes] .uf-mc-type-selector .plist .n{display:none} .uf-site[data-page=baytypes] .uf-mc-type-selector .uf-mc-park-option{display:flex;align-items:center;justify-content:center;padding:14px 10px;min-height:48px;border:0;border-radius:9px;font:500 13px/1.4 var(--uf-body);background:transparent;color:var(--uf-navy);cursor:pointer;text-align:center} .uf-site[data-page=baytypes] .uf-mc-type-selector .plist li.on button{background:var(--uf-navy);color:white} .uf-site[data-page=baytypes] .uf-mc-type-selector .plist li:not(.on):hover button{background:#edf1f2} .uf-site .uf-location-cinema button:focus-visible{outline:2px solid var(--uf-orange);outline-offset:2px} .uf-site[data-page=baytypes] .uf-mc-type-selector .rgt{position:relative;display:flex;min-height:440px;overflow:hidden;background:var(--uf-navy)} .uf-site[data-page=baytypes] .uf-mc-type-selector .rgt .ph{position:absolute;inset:0;min-height:0;border:0;border-radius:0;aspect-ratio:auto} .uf-site[data-page=baytypes] .uf-mc-type-selector .rgt .ph img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;border-radius:0} .uf-site[data-page=baytypes] .uf-mc-type-selector .rgt::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#001722f5,#001722b0 48%,#00172215);pointer-events:none} .uf-site[data-page=baytypes] .uf-mc-type-selector .rgt .bd{position:relative;z-index:1;width:100%;padding:64px max(var(--uf-gutter),calc((100vw - 1240px)/2));align-self:flex-end;background:transparent;color:white} .uf-site .uf-location-kicker{font:700 12px/1.4 var(--uf-body);letter-spacing:.14em;text-transform:uppercase;color:var(--uf-orange);margin:0 0 8px} /* R51 (Rick, Loom 2026-10-13 27:28: "this feels like it needs to be caps or something"): the park's "Bays starting at" line reads as a heading. */ .uf-site[data-page=baytypes] .uf-mc-type-selector #sp-h2{font:800 clamp(18px,1.6vw,24px)/1.15 var(--uf-display);letter-spacing:.02em;color:#fff;text-transform:uppercase;margin:0 0 24px} .uf-site[data-page=baytypes] .uf-mc-type-selector .rgt .bd h3{font-size:clamp(26px,3vw,40px);line-height:1.15;max-width:800px;margin:0 0 14px;color:white} .uf-site[data-page=baytypes] .uf-mc-type-selector .rgt .ad{font:400 15px/1.6 var(--uf-body);color:#d0dce2} .uf-site[data-page=baytypes] .uf-mc-type-selector .rgt .btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px} .uf-site[data-page=baytypes] .uf-mc-type-selector .rgt .btn-navy{background:#ffffff0d;border:1px solid #ffffff66;color:white;order:2} /* Phones: the photo sits above the copy in full colour and the copy sits on the plain navy below it. Until 2026-10-03 the copy lay over the photo under a navy scrim of 76% to 98% that covered the whole photo (Rick, 2026-10-02 call, 01:19:29, C2: no filter over photos; 2026-10-03 polish, P8). */ @media(max-width:700px){.uf-site[data-page=baytypes] .uf-mc-type-selector{padding:0}.uf-site[data-page=baytypes] .uf-mc-type-selector .plist{padding:12px;gap:6px}.uf-site[data-page=baytypes] .uf-mc-type-selector .plist li{flex-basis:42%}.uf-site[data-page=baytypes] .uf-mc-type-selector .rgt .bd{padding:30px 24px}.uf-site[data-page=baytypes] .uf-mc-type-selector .rgt{flex-direction:column;min-height:0}.uf-site[data-page=baytypes] .uf-mc-type-selector .rgt .ph{position:relative;inset:auto;aspect-ratio:16/10;flex:none}.uf-site[data-page=baytypes] .uf-mc-type-selector .rgt::after{content:none}} /* Industry directory: orange benefits sidebar and a quiet navy link grid. */ .uf-site .uf-industry-directory{background:var(--uf-navy);padding:40px var(--uf-gutter)} .uf-site .uf-industry-directory-inner{max-width:var(--uf-width);margin:auto;display:grid;grid-template-columns:280px minmax(0,1fr);border:1px solid #ffffff20;border-radius:20px;overflow:hidden} .uf-site .uf-industry-benefits{background:var(--uf-orange);color:var(--uf-navy);padding:34px 28px} .uf-site .uf-industry-benefits :is(h2,.uf-industry-benefits-title){font:400 28px/1.15 var(--uf-display);margin:0 0 18px;text-transform:uppercase;color:var(--uf-navy)} .uf-site .uf-industry-benefits>p{font:400 14px/1.6 var(--uf-body);margin:0 0 26px} .uf-site .uf-industry-benefits .it{display:flex;gap:12px;align-items:center;margin-top:24px;font:400 13px/1.5 var(--uf-body)} .uf-site .uf-industry-benefits .it b{font-weight:600} .uf-site .uf-industry-benefits .it svg{width:24px;height:24px;flex:none;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .uf-site .uf-industry-directory .uf-mc-use-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;padding:16px 32px;background:var(--uf-navy)} .uf-site .uf-industry-directory .uf-mc-use-strip::before,.uf-site .uf-industry-directory .uf-mc-use-strip::after{display:none} .uf-site .uf-industry-directory .uf-mc-use-strip a{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:25px 0;min-height:90px;border:0;border-bottom:1px solid #ffffff20;font:400 17px/1.3 var(--uf-display);background:transparent;color:white} .uf-site .uf-industry-directory .uf-mc-use-strip a:nth-last-child(-n+2){border-bottom:0} .uf-site .uf-industry-link-arrow{flex:none;color:var(--uf-orange)} .uf-site .uf-industry-directory .uf-mc-use-strip a:hover,.uf-site .uf-industry-directory .uf-mc-use-strip a[aria-current]{background:transparent;color:var(--uf-orange)} .uf-site .uf-industry-directory a:focus-visible{outline:2px solid var(--uf-orange);outline-offset:4px} @media(max-width:800px){.uf-site .uf-industry-directory-inner{grid-template-columns:1fr}.uf-site .uf-industry-benefits{padding:28px}.uf-site .uf-industry-benefits .it{margin-top:16px}.uf-site .uf-industry-directory .uf-mc-use-strip{padding:8px 24px;gap:0 24px}} @media(max-width:500px){.uf-site .uf-industry-directory{padding:28px var(--uf-gutter)}.uf-site .uf-industry-directory .uf-mc-use-strip{grid-template-columns:1fr}.uf-site .uf-industry-directory .uf-mc-use-strip a{min-height:68px;padding:20px 0;font-size:16px}.uf-site .uf-industry-directory .uf-mc-use-strip a:nth-last-child(2){border-bottom:1px solid #ffffff20}} /* Approved navy trade cards with aligned imagery, copy and circular actions. */ .uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy{background:#fff;color:var(--uf-navy);padding-block:64px} .uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy .kick{color:var(--uf-orange);font:700 12px/1.5 var(--uf-body);letter-spacing:.14em;margin-bottom:14px} .uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy .h2x{color:var(--uf-navy);font-size:clamp(28px,3vw,42px);line-height:1.15;max-width:1000px;margin:0 0 32px} .uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy .who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch} .uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy .wc{display:flex;background:#0a2634;border:1px solid #29414d;border-radius:18px;padding:0;overflow:hidden;min-width:0} .uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy .uf-trade-link{display:flex;flex-direction:column;width:100%;color:white;text-decoration:none} .uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy .ph{display:block;aspect-ratio:16/10;border:0;border-radius:0;clip-path:none;overflow:hidden;flex:none} .uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%;transform:scale(1.3)} .uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy .uf-trade-copy{padding:24px;display:flex;flex-direction:column;flex:1} .uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy h3{font:400 18px/1.3 var(--uf-display);text-transform:uppercase;color:white;margin:0;min-height:47px} .uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy .wc p{font:400 15px/1.65 var(--uf-body);color:#adc0ca;margin:16px 0 24px;padding:0;text-align:left} .uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy .uf-trade-action{display:grid;place-items:center;align-self:flex-end;margin-top:auto;width:42px;height:42px;border:1px solid #426071;border-radius:50%;color:var(--uf-orange);transition:background-color .2s,color .2s} .uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy .wc:hover{border-color:var(--uf-orange)} .uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy .uf-trade-link:hover .uf-trade-action{background:var(--uf-orange);color:var(--uf-navy);border-color:var(--uf-orange)} .uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy .uf-trade-link:focus-visible{outline:2px solid var(--uf-orange);outline-offset:-3px;border-radius:17px} @media(max-width:1050px){.uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy .who{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy{padding-block:40px}.uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy .who{grid-template-columns:1fr}.uf-site[data-page=industries] .sec.uf-mc-photo-stories.uf-trades-navy h3{min-height:0}} /* The through-line photo fills its half of the rounded card. */ .uf-site .uf-mc-copy-photo .split{border-radius:24px;overflow:hidden} .uf-site .uf-mc-copy-photo .sim{position:relative;padding:0;overflow:hidden;min-height:440px;border-radius:0} .uf-site .uf-mc-copy-photo .sim img{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover} .uf-site .uf-mc-copy-photo .sim .cap{position:absolute;inset:auto 0 0;padding:48px 24px 22px;background:linear-gradient(transparent,#001523e8);color:white;z-index:1} @media(max-width:960px){.uf-site .uf-mc-copy-photo .sim{min-height:360px}} @media(max-width:600px){.uf-site .uf-mc-copy-photo .split{border-radius:20px}.uf-site .uf-mc-copy-photo .sim{min-height:320px}.uf-site .uf-mc-copy-photo .sim .cap{padding:40px 20px 18px}} /* White closing CTA on the industries page. */ .uf-site[data-page=industries] main>.closer.uf-mc-final{background:#fff;color:var(--uf-navy)} .uf-site[data-page=industries] main>.closer.uf-mc-final :is(h2,p){color:var(--uf-navy)} .uf-site[data-page=industries] main>.closer.uf-mc-final>.fx{display:none} /* Resource imagery has no orange bottom divider. */ .uf-site[data-page-family=resources] :is(.card,.rcard,.fsc) .ph{border-bottom:0} .uf-site[data-page-family=resources] :is(.card,.rcard) .ph::after{display:none} /* Keep the resource library below the hero in normal document flow. */ .uf-site[data-page-family=resources] .uf-ed--cms .uf-ed-library{margin-top:0;padding-top:48px;background:var(--uf-paper)} .uf-site[data-page-family=resources] .uf-ed--cms .uf-ed-hero{padding-bottom:64px} @media(max-width:600px){.uf-site[data-page-family=resources] .uf-ed--cms .uf-ed-library{padding-top:32px}} /* Give library cards clear contrast against the light section. */ .uf-site[data-page-family=resources] .uf-ed--cms #libgrid .card{background:#0a2634;color:white;border:1px solid #29414d} .uf-site[data-page-family=resources] .uf-ed--cms #libgrid .card b{color:white} .uf-site[data-page-family=resources] .uf-ed--cms #libgrid .card .dek{color:#b7c8d1} .uf-site[data-page-family=resources] .uf-ed--cms #libgrid .card .go{color:var(--uf-orange)} /* Resource categories sit together in a rounded navy dock. */ .uf-site[data-page-family=resources] .uf-ed-library-links .serieskey{display:flex;justify-content:center;align-items:center;gap:12px 28px;width:fit-content;max-width:100%;margin:12px auto 0;padding:22px 28px;background:var(--uf-navy);border:1px solid #29414d;border-radius:22px} .uf-site[data-page-family=resources] .uf-ed-library-links .serieskey span{color:#fff;min-height:28px;line-height:1.5} .uf-site[data-page-family=resources] .uf-ed-library-links .serieskey i{flex-shrink:0} @media(max-width:600px){.uf-site[data-page-family=resources] .uf-ed-library-links .serieskey{width:100%;justify-content:flex-start;gap:16px;padding:22px;border-radius:18px}.uf-site[data-page-family=resources] .uf-ed-library-links .serieskey span{width:100%}} /* Shop Talk and Shop Stories share one responsive media hub. */ .uf-site[data-page-family=resources] .uf-media-hub{background:var(--uf-paper);padding:64px 0;color:white} .uf-site[data-page-family=resources] .uf-media-hub>.wrap{max-width:1256px;padding-inline:24px} .uf-site .uf-media-shell{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;background:var(--uf-navy);border-radius:24px;padding:32px} .uf-site .uf-media-intro .kick{color:var(--uf-orange)} .uf-site .uf-media-intro h2{font:400 32px/1.2 var(--uf-display);color:white;margin:16px 0} .uf-site .uf-media-intro .o{color:var(--uf-orange)} .uf-site .uf-media-intro p{color:#b7c8d1;font:400 16px/1.6 var(--uf-body)} .uf-site .uf-media-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px} .uf-site .uf-media-tabs button{font:600 13px/1.4 var(--uf-body);min-height:44px;padding:10px 16px;border:1px solid #29414d;border-radius:30px;color:white;background:transparent;cursor:pointer} .uf-site .uf-media-tabs button[aria-selected=true]{background:var(--uf-orange);border-color:var(--uf-orange);color:var(--uf-navy)} .uf-site .uf-media-tabs button:focus-visible,.uf-site .uf-media-card:focus-visible{outline:3px solid var(--uf-orange);outline-offset:4px} .uf-site .uf-media-panels{min-width:0} .uf-site .uf-media-panels [role=tabpanel]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .uf-site .uf-media-panels [hidden]{display:none} .uf-site .uf-media-card{display:flex;flex-direction:column;min-width:0;border:1px solid #29414d;border-radius:18px;overflow:hidden;background:#0a2634;color:white;text-decoration:none} .uf-site .uf-media-photo{position:relative;display:block;aspect-ratio:16/10;overflow:hidden} .uf-site .uf-media-photo img{display:block;width:100%;height:100%;object-fit:cover} .uf-site .uf-media-play{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--uf-orange);color:var(--uf-navy);font-size:16px} .uf-site .uf-media-copy{display:flex;flex-direction:column;flex:1;padding:22px} .uf-site .uf-media-number{font:600 12px/1.4 var(--uf-body);color:var(--uf-orange);margin-bottom:10px} .uf-site .uf-media-copy h3{font:400 18px/1.3 var(--uf-display);color:white;margin:0 0 14px} .uf-site .uf-media-copy .dek{font:400 14px/1.6 var(--uf-body);color:#b7c8d1;margin-bottom:24px} .uf-site .uf-media-watch{margin-top:auto;font:600 14px/1.4 var(--uf-body);color:var(--uf-orange)} .uf-site .uf-media-card:hover{border-color:var(--uf-orange)} @media(max-width:1000px){.uf-site .uf-media-shell{grid-template-columns:1fr}.uf-site .uf-media-intro h2 br{display:none}} @media(max-width:600px){.uf-site[data-page-family=resources] .uf-media-hub{padding:40px 0}.uf-site[data-page-family=resources] .uf-media-hub>.wrap{padding-inline:20px}.uf-site .uf-media-shell{padding:20px;border-radius:20px;gap:24px}.uf-site .uf-media-panels [role=tabpanel]{grid-template-columns:1fr}.uf-site .uf-media-intro h2{font-size:27px}.uf-site .uf-media-copy{padding:20px}} /* Topic sidebar and reading list for the Shop Manual. */ .uf-site[data-page-family=resources] .uf-guide-browser{padding:64px 0;background:var(--uf-paper);color:var(--uf-navy)} .uf-site .uf-guide-browser>.wrap{max-width:1256px;padding-inline:24px} .uf-site .uf-guide-shell{display:grid;grid-template-columns:270px minmax(0,1fr);gap:32px;padding:30px;background:white;border-radius:24px} .uf-site .uf-guide-sidebar{background:var(--uf-navy);color:white;border-radius:18px;padding:28px;align-self:start} .uf-site .uf-guide-sidebar .kick{color:var(--uf-orange);font:700 12px/1.5 var(--uf-body);letter-spacing:2px} .uf-site .uf-guide-sidebar h2{font:400 28px/1.2 var(--uf-display);margin:16px 0;color:white} .uf-site .uf-guide-sidebar h2 span{color:var(--uf-orange)} .uf-site .uf-guide-sidebar p{font:400 14px/1.6 var(--uf-body);color:#b7c8d1;margin:0 0 16px} .uf-site .uf-guide-filters{display:grid;gap:8px} .uf-site .uf-guide-filters button{padding:13px 14px;min-height:44px;border:0;border-radius:10px;background:transparent;color:white;text-align:left;cursor:pointer;font:600 14px/1.4 var(--uf-body)} .uf-site .uf-guide-filters button[aria-pressed=true]{background:var(--uf-orange);color:var(--uf-navy)} .uf-site .uf-guide-results{min-width:0} .uf-site .uf-guide-results #rail-manual{display:block} .uf-site .uf-guide-row{display:grid;grid-template-columns:52px minmax(0,1fr) 28px;align-items:center;gap:20px;padding:25px 0;border-bottom:1px solid #d5dfe2;color:var(--uf-navy);text-decoration:none} .uf-site .uf-guide-row:first-child{padding-top:0} .uf-site .uf-guide-row:last-child{border-bottom:0} .uf-site .uf-guide-number{font:400 28px/1 var(--uf-display);color:var(--uf-orange)} .uf-site .uf-guide-copy h3{font:400 18px/1.35 var(--uf-display);margin:0 0 12px;color:var(--uf-navy)} .uf-site .uf-guide-copy>span{font:400 14px/1.6 var(--uf-body);color:#526570} .uf-site .uf-guide-arrow{width:26px;height:26px;color:var(--uf-orange)} .uf-site .uf-guide-row:hover h3{color:#a04a00} .uf-site .uf-guide-row:focus-visible,.uf-site .uf-guide-browser button:focus-visible{outline:3px solid var(--uf-orange);outline-offset:3px} .uf-site .uf-guide-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;border-top:1px solid #d5dfe2;padding-top:16px} .uf-site .uf-guide-pagination p{font:400 12px/1.5 var(--uf-body);color:#526570;margin:0} .uf-site .uf-guide-pagination>div{display:flex;gap:8px} .uf-site .uf-guide-pagination button{background:white;border:1px solid #c9d3d8;border-radius:9px;color:var(--uf-navy);font:600 12px/1.4 var(--uf-body);min-height:44px;padding:10px 14px;cursor:pointer} .uf-site .uf-guide-pagination button:disabled{opacity:.4;cursor:default} @media(max-width:900px){.uf-site .uf-guide-shell{grid-template-columns:1fr}.uf-site .uf-guide-filters{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.uf-site[data-page-family=resources] .uf-guide-browser{padding:40px 0}.uf-site .uf-guide-browser>.wrap{padding-inline:20px}.uf-site .uf-guide-shell{padding:20px;border-radius:20px;gap:24px}.uf-site .uf-guide-sidebar{padding:22px}.uf-site .uf-guide-sidebar h2{font-size:28px}.uf-site .uf-guide-row{grid-template-columns:36px minmax(0,1fr) 20px;gap:12px}.uf-site .uf-guide-number{font-size:21px}.uf-site .uf-guide-copy h3{font-size:15px}.uf-site .uf-guide-arrow{width:20px;height:20px}.uf-site .uf-guide-pagination{flex-wrap:wrap}} /* Subject-specific diagram covers for the Shop Manual. */ .uf-site .uf-guide-shell{display:block;padding:32px;background:white} .uf-site .uf-guide-sidebar{padding:0;background:transparent;border-radius:0;color:var(--uf-navy);margin-bottom:28px} .uf-site .uf-guide-sidebar h2{color:var(--uf-navy);font-size:34px;margin:10px 0} .uf-site .uf-guide-sidebar p{color:#526570} .uf-site .uf-guide-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .uf-site .uf-guide-filters button{color:var(--uf-navy);background:#eef2f1;border-radius:24px;padding-inline:20px} .uf-site .uf-guide-results #rail-manual{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .uf-site .uf-guide-row,.uf-site .uf-guide-row:first-child,.uf-site .uf-guide-row:last-child{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:1px solid #dbe3e5;border-radius:18px;overflow:hidden} .uf-site .uf-guide-cover{display:block;position:relative;background:#082230;padding:48px 16px 12px} .uf-site .uf-guide-cover-label{position:absolute;top:22px;left:22px;color:#b7c8d1;font:600 12px/1.4 var(--uf-body);letter-spacing:1.5px} .uf-site .uf-guide-cover .uf-guide-number{position:absolute;top:17px;right:20px;font-size:26px} .uf-site .uf-guide-cover svg{display:block;width:100%;height:auto} .uf-site .uf-guide-cover svg g{fill:none;stroke:#a9c2ce;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .uf-site .uf-guide-cover svg .accent{stroke:var(--uf-orange);stroke-width:4} .uf-site .uf-guide-row:nth-child(even) .uf-guide-cover{background:#0d3041} .uf-site .uf-guide-copy{padding:24px;display:flex;flex:1;flex-direction:column} .uf-site .uf-guide-copy h3{font-size:17px;line-height:1.4;margin-bottom:14px} .uf-site .uf-guide-copy .uf-guide-read{margin-top:auto;padding-top:24px;font-weight:700;color:#a04a00;display:flex;justify-content:space-between} /* The guide cards' arrow is the shared 20px action icon, the same as every other "Read guide" link (2026-10-12). */ .uf-site .uf-guide-read>span{line-height:1;display:inline-flex;align-items:center} .uf-site .uf-guide-row:hover{border-color:var(--uf-orange)} @media(max-width:1000px){.uf-site .uf-guide-results #rail-manual{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.uf-site .uf-guide-shell{padding:20px}.uf-site .uf-guide-results #rail-manual{grid-template-columns:1fr;gap:20px}.uf-site .uf-guide-copy{padding:22px}.uf-site .uf-guide-sidebar h2{font-size:28px}.uf-site .uf-guide-filters button{padding-inline:14px;font-size:12px}} /* Restore original source photography on manual guide cards. */ .uf-site .uf-guide-cover{padding:0;aspect-ratio:16/10;overflow:hidden} .uf-site .uf-guide-cover img{display:block;width:100%;height:100%;object-fit:cover} .uf-site .uf-guide-cover-label{z-index:1;top:16px;left:16px;padding:7px 10px;background:var(--uf-navy);color:white;border-radius:5px} .uf-site .uf-guide-cover .uf-guide-number{z-index:1;top:auto;bottom:16px;right:16px;padding:7px 10px;background:var(--uf-orange);color:var(--uf-navy);border-radius:5px;font-size:22px} /* Rounded FAQ search field matches the shared input finish. */ .uf-site[data-page=faq] .fsearch{clip-path:none;border-radius:var(--uf-radius-card,22px);overflow:hidden} /* FAQ category dock sits at the start of the answers section. */ .uf-site[data-page=faq] .uf-ed--faq .qa .jump{position:relative;top:auto;width:fit-content;max-width:calc(100% - 40px);margin:0 auto 40px;background:#082230;border:1px solid #ffffff24;border-radius:22px;z-index:1;overflow:hidden} .uf-site[data-page=faq] .qa .jump .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:10px;max-width:none;width:auto} .uf-site[data-page=faq] .qa .jump .jchip{border:1px solid transparent;border-radius:13px;color:white;background:transparent;font-size:12px;padding:12px 14px;min-height:44px} .uf-site[data-page=faq] .qa .jump .jchip:hover,.uf-site[data-page=faq] .qa .jump .jchip.on{background:#163b4d;border-color:#ff7d0166;color:white} .uf-site[data-page=faq] .qa .jump .jchip:focus-visible{outline:2px solid var(--uf-orange);outline-offset:-2px} @media(max-width:600px){.uf-site[data-page=faq] .qa .jump .wrap{display:grid;grid-template-columns:1fr 1fr}.uf-site[data-page=faq] .qa .jump .jchip{white-space:normal;font-size:12px;padding:10px}.uf-site[data-page=faq] .qa .jump .jchip:last-child{grid-column:1/-1;justify-content:center}} /* FAQ: clean closed rows and a navy expanded answer. */ .uf-site[data-page=faq] .uf-ed--faq .qa>.wrap{background:white;border-radius:24px;padding:30px;max-width:1019px;width:calc(100% - 40px)} .uf-site[data-page=faq] .qa .gline{display:none} .uf-site[data-page=faq] .qa .ghead{margin-bottom:24px} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .it{background:transparent;border:0;border-bottom:1px solid #d5dfe2;border-radius:0;margin-bottom:0} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .it.open{background:#082230;border-color:transparent;border-radius:18px;margin:8px 0} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .q{padding:22px 24px;gap:20px} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .q h3{font:700 18px/1.45 var(--uf-body);text-transform:none;letter-spacing:0;color:var(--uf-navy);margin:0} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .it.open .q h3{color:white} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .bd p{padding:0 24px 26px;margin:0;max-width:90ch;font:400 16px/1.75 var(--uf-body);color:#c4d2d9} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .bd a{color:inherit;border-bottom-color:var(--uf-orange)} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .pl{position:relative;flex:0 0 34px;width:34px;height:34px;border-radius:50%;clip-path:none;background:#eef2f3;color:transparent;font-size:0;transform:none} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .pl::before,:is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .pl::after{content:'';position:absolute;left:11px;right:11px;top:16px;height:2px;background:var(--uf-navy)} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .pl::after{transform:rotate(90deg)} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .it.open .pl{background:var(--uf-orange);color:transparent;transform:none} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .it.open .pl::after{display:none} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .q:focus-visible{outline:2px solid var(--uf-orange);outline-offset:-4px;border-radius:14px} @media(max-width:600px){.uf-site[data-page=faq] .uf-ed--faq .qa>.wrap{padding:20px;border-radius:20px}:is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .q{padding:20px 16px;gap:12px}:is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .q h3{font-size:16px}:is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .bd p{padding:0 16px 22px;font-size:15px}} /* Animate intrinsic answer height without a fixed maximum or clipped long copy. */ :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .it .bd{display:grid;grid-template-rows:0fr;max-height:none;opacity:0;transition:grid-template-rows .32s ease,opacity .25s ease} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .it.open .bd{grid-template-rows:1fr;max-height:none;opacity:1} .uf-site[data-page=faq] .uf-faq-answer-inner{min-height:0;overflow:hidden} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .it{transition:background-color .32s ease,border-radius .32s ease,margin .32s ease} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .q h3{transition:color .25s ease} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .pl::after{transition:transform .25s ease,opacity .25s ease} :is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .it.open .pl::after{display:block;transform:rotate(0);opacity:0} @media(prefers-reduced-motion:reduce){:is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) :is(.it,.bd,.pl,.q h3),:is(.uf-site[data-page=faq] .qa .acc,.uf-site[data-page-family=facility] .acc,.uf-site .uf-faq-style .acc,.uf-site main .acc.uf-shared-faq) .pl::after{transition:none}} /* Round FAQ photographic banners, including their overlays. */ .uf-site[data-page=faq] .uf-ed--faq .band{border-radius:24px;overflow:hidden} @media(max-width:600px){.uf-site[data-page=faq] .uf-ed--faq .band{border-radius:20px}} /* FAQ media bands (fix round 2026-10-03, V6; rule C2 in the bay hero's language, src/bay-hero.css): the photo or clip fills the band in its own colour (no brightness filter), the navy gradient covers the copy side and stops, so the far side of the photo is full colour, and the copy column keeps to the gradient side. On phones the photo is a band above the copy, which sits on plain navy. The page stylesheet sits in @layer source, where the unlayered img{height:auto} in theme.css beat its height:100% and left the photo short of the band. */ .uf-site[data-page=faq] .uf-ed--faq .band{background:#001523} .uf-site[data-page=faq] .uf-ed--faq .band .med :is(img,video){height:100%;filter:none} .uf-site[data-page=faq] .uf-ed--faq .band .sc{background:linear-gradient(90deg,rgba(0,21,35,.96) 0%,rgba(0,21,35,.9) 42%,rgba(0,21,35,.72) 58%,rgba(0,21,35,.3) 72%,rgba(0,21,35,0) 86%)} .uf-site[data-page=faq] .uf-ed--faq .band.flip .sc{background:linear-gradient(270deg,rgba(0,21,35,.96) 0%,rgba(0,21,35,.9) 42%,rgba(0,21,35,.72) 58%,rgba(0,21,35,.3) 72%,rgba(0,21,35,0) 86%)} .uf-site[data-page=faq] .uf-ed--faq .band:not(.flip) .wrap>*,.uf-site[data-page=faq] .uf-ed--faq .band.flip .in2{max-width:min(520px,56%)} @media(max-width:600px){ .uf-site[data-page=faq] .uf-ed--faq .band .med{position:relative;inset:auto;aspect-ratio:16/10} .uf-site[data-page=faq] .uf-ed--faq .band .sc{display:none} .uf-site[data-page=faq] .uf-ed--faq .band .wrap{padding-top:24px;padding-bottom:30px} .uf-site[data-page=faq] .uf-ed--faq .band:not(.flip) .wrap>*,.uf-site[data-page=faq] .uf-ed--faq .band.flip .in2{max-width:none} } /* Sizing method reads as an editorial sequence, without repeated boxed callouts. */ .uf-site[data-page=guide-space] .art .step{display:grid;grid-template-columns:36px minmax(0,1fr);gap:22px;margin:0;padding:28px 0;background:transparent;border:0;border-bottom:1px solid #cbd5d8;border-radius:0;box-shadow:none} .uf-site[data-page=guide-space] .art .step .sn{display:block;width:auto;height:auto;clip-path:none;background:transparent;color:#a45417;font:500 17px/1.5 var(--uf-body);padding-top:1px} .uf-site[data-page=guide-space] .art .step b{font:700 20px/1.4 var(--uf-body);text-transform:none;letter-spacing:0;color:var(--uf-navy)} .uf-site[data-page=guide-space] .art .step p{font:400 17px/1.75 var(--uf-body);color:#40535e;margin:10px 0 0;padding:0;max-width:68ch} @media(max-width:600px){.uf-site[data-page=guide-space] .art .step{grid-template-columns:27px minmax(0,1fr);gap:14px;padding:23px 0}.uf-site[data-page=guide-space] .art .step b{font-size:18px}.uf-site[data-page=guide-space] .art .step p{font-size:16px}} /* Approved two-column sizing spread, with original instructions intact. */ .uf-site[data-page=guide-space] .art .uf-sizing-spread{background:#fff;border-radius:24px;padding:32px;margin:40px 0} .uf-site[data-page=guide-space] .art .uf-sizing-heading .kick{font:700 12px/1.5 var(--uf-body);letter-spacing:2px;color:#a45417;margin-bottom:12px} .uf-site[data-page=guide-space] .art .uf-sizing-heading h2{margin:0 0 28px;font-size:28px;line-height:1.2} .uf-site[data-page=guide-space] .art .uf-sizing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px} .uf-site[data-page=guide-space] .art .uf-sizing-grid .step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding:26px 0;border:0;border-top:1px solid #ccd6d9;align-content:start} .uf-site[data-page=guide-space] .art .uf-sizing-grid .step .sn{font:400 30px/1.3 var(--uf-display);color:var(--uf-orange);padding:0} .uf-site[data-page=guide-space] .art .uf-sizing-grid .step>span:last-child{display:contents} .uf-site[data-page=guide-space] .art .uf-sizing-grid .step b{font:700 18px/1.4 var(--uf-body);align-self:center} .uf-site[data-page=guide-space] .art .uf-sizing-grid .step p{grid-column:1/-1;font:400 16px/1.7 var(--uf-body);margin:0;max-width:none} @media(max-width:700px){.uf-site[data-page=guide-space] .art .uf-sizing-spread{padding:22px;border-radius:20px}.uf-site[data-page=guide-space] .art .uf-sizing-grid{grid-template-columns:1fr}.uf-site[data-page=guide-space] .art .uf-sizing-heading h2{font-size:24px}.uf-site[data-page=guide-space] .art .uf-sizing-grid .step{padding:23px 0}} /* Round the sizing table while retaining local horizontal scrolling. */ .uf-site[data-page=guide-space] .art .tbl{border-radius:22px;overflow-x:auto;overflow-y:hidden} @media(max-width:600px){.uf-site[data-page=guide-space] .art .tbl{border-radius:18px}} /* Taller Somersworth hero media. */ .uf-site[data-page-family=facility] .hframe{aspect-ratio:5/4} .uf-site[data-page-family=facility] .uf-mc-geometry-detail{fill:var(--uf-orange);opacity:.22} /* Bay photos fill the full panel beside its copy. */ .uf-site[data-page-family=facility] .bt-slide .im>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover} /* Readable availability statuses on the light inventory section. */ .uf-site[data-page-family=facility] .bays .tk{color:#435963} .uf-site[data-page-family=facility] .bays .tB{background:#dce5e9;color:var(--uf-navy)} .uf-site[data-page-family=facility] .bays .tC,.uf-site[data-page-family=facility] .bays .tag.soon{background:#e5e9ec;color:#435963} /* Somersworth availability: full-width comparison panel. */ .uf-site[data-page-family=facility] #bays{padding:64px 24px} .uf-site[data-page-family=facility] #bays>.wrap{max-width:1320px;width:100%;margin-inline:auto} .uf-site[data-page-family=facility] #bays .uf-mc-inventory-layout{padding:32px;gap:24px;background:white;border-radius:24px} .uf-site[data-page-family=facility] #bays .uf-mc-inventory-intro{display:block;border:0;padding:0} .uf-site[data-page-family=facility] #bays .head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px} .uf-site[data-page-family=facility] #bays .head>.btn{font:700 14px/1.4 var(--uf-body);padding:14px 20px} .uf-site[data-page-family=facility] #bays .tierkey{grid-column:1/-1;margin:0;gap:24px} .uf-site[data-page-family=facility] #bays .uf-table-scroll{border-radius:14px;overflow-x:auto;border:1px solid #d7dcde} .uf-site[data-page-family=facility] #bays table{width:100%;min-width:1080px} .uf-site[data-page-family=facility] #bays th{color:white;font:700 12px/1.5 var(--uf-body);letter-spacing:.03em;padding:18px 14px} .uf-site[data-page-family=facility] #bays td{padding:24px 14px;line-height:1.55} .uf-site[data-page-family=facility] #bays td:nth-child(2){min-width:175px} .uf-site[data-page-family=facility] #bays td.price{color:var(--uf-navy);opacity:1!important} .uf-site[data-page-family=facility] #bays .tag{clip-path:none;border-radius:20px;background:#edf5f0;color:#365e4b;font:700 11px/1.4 var(--uf-body);letter-spacing:0} .uf-site[data-page-family=facility] #bays .tag.soon{background:#e5e9ec;color:#435963} .uf-site[data-page-family=facility] #bays .micro{margin-top:18px;max-width:100ch} @media(max-width:700px){ .uf-site[data-page-family=facility] #bays{padding:40px 16px} .uf-site[data-page-family=facility] #bays .uf-mc-inventory-layout{padding:22px 16px;border-radius:20px} .uf-site[data-page-family=facility] #bays .head{grid-template-columns:1fr;gap:20px} .uf-site[data-page-family=facility] #bays .head>.btn{justify-self:start} .uf-site[data-page-family=facility] #bays .tierkey{gap:12px} } /* Fit the full Somersworth site plan without a nested scroll area. */ .uf-site[data-page-family=facility] #siteplan .planbox{overflow:visible} .uf-site[data-page-family=facility] #siteplan-svg{display:block;width:100%;min-width:0;max-width:100%;height:auto;aspect-ratio:800/470} .uf-site[data-page-family=facility] #siteplan-svg{overflow:hidden} .uf-site[data-page-family=facility] #siteplan .scard:not(.show){display:none} .uf-site[data-page-family=facility] .mpane .film{border-bottom-left-radius:var(--uf-radius-card);border-bottom-right-radius:var(--uf-radius-card);overflow:hidden} /* Taller rounded location map, preserving the full diagram. */ .uf-site[data-page-family=facility] .area .amap{aspect-ratio:5/4;border-radius:var(--uf-radius-card);overflow:hidden} .uf-site[data-page-family=facility] .area .amap>svg{display:block;width:100%;height:100%} .uf-site[data-page-family=facility] .acc .bd>div{min-height:0;overflow:hidden} .uf-site[data-page-family=facility] .acc .q{border:0} /* Center the local contact copy and keep the light form readable. */ .uf-site[data-page-family=facility] #lead .cols{align-items:center} .uf-site[data-page-family=facility] #lead .cols>div:first-child{text-align:center} .uf-site[data-page-family=facility] #lead .contact{align-items:center} .uf-site[data-page-family=facility] #lead .contact a{color:var(--uf-navy);overflow-wrap:anywhere;max-width:100%} .uf-site[data-page-family=facility] #lead .promise{color:#435963;margin:26px auto 0;border-left:0;padding:0;line-height:1.7} .uf-site[data-page-family=facility] #lead .lform{clip-path:none;border-radius:var(--uf-radius-card);overflow:hidden} .uf-site[data-page-family=facility] #lead .lform>p{color:#435963!important} /* Related guides: larger original imagery and aligned reading actions. */ .uf-site[data-page-family=facility] .manualband .mb-grid{gap:24px;margin-top:32px} .uf-site[data-page-family=facility] .manualband .mbc{display:flex;flex-direction:column;border:1px solid #d6dfe3;border-radius:var(--uf-radius-card);padding:0;background:white;box-shadow:none;transition:border-color .2s} .uf-site[data-page-family=facility] .manualband .mbc:hover{transform:none;box-shadow:none;border-color:var(--uf-orange)} .uf-site[data-page-family=facility] .manualband .mbc .ph{height:auto;aspect-ratio:16/10;flex:none;border:0;border-radius:0;clip-path:none;margin:0} .uf-site[data-page-family=facility] .manualband .mbc .ph img{width:100%;height:100%;object-fit:cover} .uf-site[data-page-family=facility] .manualband .mbc .bd{display:flex;flex-direction:column;flex:1;padding:24px;gap:14px} .uf-site[data-page-family=facility] .manualband .mbc b{font-size:17px;line-height:1.4;letter-spacing:0} .uf-site[data-page-family=facility] .manualband .mbc .m{order:-1;margin:0;color:#536772;font:700 12px/1.5 var(--uf-body);letter-spacing:.08em} .uf-site[data-page-family=facility] .manualband .uf-guide-action{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:18px;font:700 14px/1.4 var(--uf-body);color:#a94e00} .uf-site[data-page-family=facility] .manualband .mb-note{color:#536772;max-width:85ch;line-height:1.6;margin-top:24px} /* Match the muted orange decorative bands used in the hero. */ .uf-site[data-page-family=facility] .applyband .xl{opacity:.22} .uf-site[data-page-family=facility] .applyband .xl i{height:clamp(24px,4vw,64px);background:var(--uf-orange)} /* Keep the site-plan reservation action legible in every state. */ .uf-site[data-page-family=facility] #sc-go,.uf-site[data-page-family=facility] #sc-go:visited,.uf-site[data-page-family=facility] #sc-go:hover,.uf-site[data-page-family=facility] #sc-go:focus-visible{color:#fff;background:#082230} /* Three routes into the park, with an orange specification strip. */ .uf-site[data-page-family=facility] .uf-entry-paths{padding:44px 0 56px;background:#000c13;color:white} .uf-site[data-page-family=facility] .uf-entry-shell{border:1px solid #29434e;border-radius:24px;overflow:hidden;background:#001523} .uf-site[data-page-family=facility] .uf-entry-main{padding:32px} .uf-site[data-page-family=facility] .uf-entry-main .kicker{margin:0 0 12px;font-size:12px} .uf-site[data-page-family=facility] .uf-entry-main h2{font:700 clamp(24px,2.5vw,34px)/1.2 var(--uf-display);color:white;margin:0 0 28px} .uf-site[data-page-family=facility] .uf-entry-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .uf-site[data-page-family=facility] .uf-entry-group{padding:24px;background:#0a2636;border:1px solid #2b4350;border-radius:16px} .uf-site[data-page-family=facility] .uf-entry-group h3{font:700 20px/1.3 var(--uf-body);color:white;margin:0 0 16px;text-transform:none;letter-spacing:0} .uf-site[data-page-family=facility] .uf-entry-group a{display:flex;align-items:center;gap:12px;min-height:62px;padding:16px 0;border-top:1px solid #2b4350;color:#e6edf1;font:400 14px/1.45 var(--uf-body);text-decoration:none} .uf-site[data-page-family=facility] .uf-entry-group a>svg:not(.uf-action-icon){width:18px;height:18px;flex:0 0 18px;fill:none;stroke:var(--uf-orange);stroke-width:1.6} .uf-site[data-page-family=facility] .uf-entry-group a .arr{margin-left:auto;color:var(--uf-orange)} .uf-site[data-page-family=facility] .uf-entry-group a:hover{color:var(--uf-orange)} .uf-site[data-page-family=facility] .uf-entry-group a:focus-visible{outline:2px solid var(--uf-orange);outline-offset:4px;border-radius:6px} .uf-site[data-page-family=facility] .uf-entry-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--uf-orange);color:var(--uf-navy);padding:28px 32px;gap:24px} .uf-site[data-page-family=facility] .uf-entry-facts strong{display:block;font:700 28px/1.25 var(--uf-body);margin-bottom:8px} .uf-site[data-page-family=facility] .uf-entry-facts span{font:400 14px/1.5 var(--uf-body)} @media(max-width:760px){.uf-site[data-page-family=facility] .uf-entry-groups{grid-template-columns:1fr}.uf-site[data-page-family=facility] .uf-entry-main{padding:24px 20px}.uf-site[data-page-family=facility] .uf-entry-facts{grid-template-columns:repeat(2,minmax(0,1fr));padding:24px 20px}.uf-site[data-page-family=facility] .uf-entry-paths{padding:28px 0 40px}} /* Shared table finish across all page families. Keep scrolling on the inner wrapper. */ .uf-site .uf-table-scroll{border-radius:var(--uf-radius-card,22px);overflow:auto} .uf-site .tbl:has(table){border-radius:var(--uf-radius-card,22px);overflow:hidden} .uf-site .uf-faq-style .acc .q{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;background:none;border:0;cursor:pointer} .uf-site .uf-faq-style .acc .bd>div{min-height:0;overflow:hidden} /* Worksheet card contrast and full-height decorative orange bands. */ /* Dark surfaces explicitly override the shared dark article-text rules. */ .uf-site .uf-editorial .art .gate :is(p,li,label){color:#c4d2d9} .uf-site .uf-editorial .art :is(.gate,.callout,.pull) a:not(.btn){color:#ff9a38} .uf-site .nap .gnote{color:#c4d2d9} .uf-site[data-page=search] .grp label{color:#c4d2d9} .uf-site .uf-editorial .gate .x{top:0;bottom:0;right:-3%;width:34%;height:100%;aspect-ratio:auto;opacity:.22;pointer-events:none} .uf-site .uf-editorial .gate .x path{stroke:var(--uf-orange)} /* Shared Keep going recommendations across guides and stories. */ .uf-site .uf-editorial .rel.uf-related-reading .grid{gap:24px;margin-top:30px} .uf-site .uf-editorial .rel.uf-related-reading .rc{display:flex;flex-direction:column;padding:0;border:1px solid #d6dfe3;border-radius:var(--uf-radius-card);overflow:hidden;box-shadow:none;transition:border-color .2s} .uf-site .uf-editorial .rel.uf-related-reading .rc:hover{transform:none;box-shadow:none;border-color:var(--uf-orange)} .uf-site .uf-editorial .rel.uf-related-reading .rph{height:auto;aspect-ratio:16/10;flex:none;margin:0;clip-path:none;border:0} .uf-site .uf-editorial .rel.uf-related-reading .rph img{display:block;width:100%;height:100%;object-fit:cover} .uf-site .uf-editorial .rel.uf-related-reading .rc b{padding:24px 24px 18px;font-size:18px;line-height:1.4;letter-spacing:0} .uf-site .uf-editorial .rel.uf-related-reading .uf-read-link{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding:16px 24px 24px;color:#a94e00;font:700 14px/1.4 var(--uf-body)} /* Shared numbered guide sequences. */ .uf-site .uf-editorial .uf-step-sequence{background:white;border:1px solid #d6dfe3;border-radius:var(--uf-radius-card);padding:8px 32px;margin:28px 0;overflow:hidden} .uf-site .uf-editorial .uf-step-sequence .step{display:grid;grid-template-columns:58px minmax(0,1fr);gap:20px;padding:26px 0;margin:0;background:none;border:0;border-bottom:1px solid #dce3e6;border-radius:0} .uf-site .uf-editorial .uf-step-sequence .step:last-child{border-bottom:0} .uf-site .uf-editorial .uf-step-sequence .sn{display:block;width:auto;height:auto;clip-path:none;background:none;color:#be5900;font:700 28px/1.3 var(--uf-display);padding:0} .uf-site .uf-editorial .uf-step-sequence b{display:block;font:700 19px/1.4 var(--uf-body);text-transform:none;letter-spacing:0;color:var(--uf-navy);margin:0 0 10px} .uf-site .uf-editorial .uf-step-sequence p{font:400 16px/1.7 var(--uf-body);color:#435963;margin:0;max-width:76ch} @media(max-width:600px){.uf-site .uf-editorial .uf-step-sequence{padding:4px 20px}.uf-site .uf-editorial .uf-step-sequence .step{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:22px 0}.uf-site .uf-editorial .uf-step-sequence .sn{font-size:22px}.uf-site .uf-editorial .uf-step-sequence b{font-size:17px}.uf-site .uf-editorial .uf-step-sequence p{font-size:15px}} .uf-site[data-page=article] .rel .rc>span:not(.rph):not(.uf-read-link){padding:0 24px 12px;margin:0;color:#536772;font:700 12px/1.5 var(--uf-body);letter-spacing:.06em} /* Requested desktop reading navigation; mobile keeps its normal document flow. */ @media(min-width:961px){ .uf-site[data-page=article] .uf-editorial .toc{position:sticky;top:110px;align-self:start;max-height:calc(100dvh - 130px);overflow-y:auto} } .uf-site .uf-editorial .rel.uf-related-reading .rc:focus-visible{outline:3px solid var(--uf-orange);outline-offset:4px} .uf-site .uf-editorial .rel.uf-related-reading .rc>span:not(.rph):not(.uf-read-link){padding:0 24px 12px;margin:0;color:#536772;font:700 12px/1.5 var(--uf-body);letter-spacing:.06em} /* Flight story media follows the hero instead of overlapping it. */ .uf-site .uf-ed--video .uf-ed-hero{min-height:0;padding-bottom:64px} .uf-site .uf-ed--video .uf-ed-media{margin-top:32px} /* Preserve each property's original feature wording in the shared orange strip. */ .uf-site[data-page-family=facility] .uf-entry-facts .it{display:flex;flex-direction:column;align-items:flex-start;gap:12px} .uf-site[data-page-family=facility] .uf-entry-facts .it svg{width:32px;height:32px;fill:none;stroke:var(--uf-navy);stroke-width:1.6} .uf-site[data-page-family=facility] .uf-entry-facts .it b{font:700 17px/1.45 var(--uf-body);color:var(--uf-navy)} .uf-site[data-page-family=facility] .manualband .mbc{overflow:hidden} /* Round the actual media perimeter, not only the image inside a square backing. */ .uf-site .uf-editorial .fig.uf-ed-media{background:transparent} .uf-site .uf-editorial .fig .frame{clip-path:none;border-radius:var(--uf-radius-media);overflow:hidden} .uf-site .uf-editorial .fig .frame.media{border:0} .uf-site .uf-editorial .fig .frame :is(img,video){display:block;clip-path:none} /* Episode player and chapter navigation share a calm, rounded treatment. */ .uf-site .uf-ed--video #player.uf-ed-media{border-radius:var(--uf-radius-card);overflow:hidden;clip-path:none} .uf-site .uf-ed--video #soundtag{right:auto;bottom:auto;width:max-content;max-width:calc(100% - 32px);border:1px solid #ffffff30;border-radius:999px;padding:8px 14px;background:#001523e6;font:700 12px/1.4 var(--uf-body);letter-spacing:.06em} .uf-site .uf-ed--video #bigplay{width:80px;height:80px;border:1px solid #ffffff66;background:var(--uf-orange);color:var(--uf-navy);box-shadow:0 4px 24px #00152330} .uf-site .uf-ed--video #bigplay svg{width:28px;height:28px;fill:var(--uf-navy);margin-left:4px} /* The 1px outline ran along the straight sides only and stopped at the 20px cut corner (episode.css clip-path): a 1px stripe draws it along the cut, just inside the clip (seam sweep, 2026-10-12). */ .uf-site .uf-ed--video #bigplay{background-image:linear-gradient(to top left,transparent 50%,#ffffff66 50%,#ffffff66 calc(50% + 1px),transparent calc(50% + 1px)); background-size:20px 20px;background-position:right bottom;background-repeat:no-repeat;background-origin:border-box} .uf-site .uf-ed--video #bigplay:hover{background-color:#ff9a38} .uf-site .uf-ed--video #bigplay:focus-visible{outline:3px solid white;outline-offset:5px} .uf-site .uf-ed--video .chaps{border:0;margin-top:18px} .uf-site .uf-ed--video .chaps>.wrap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding-block:0} .uf-site .uf-ed--video .chap{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;min-width:0;min-height:94px;padding:16px;text-align:left;background:white;border:1px solid #d5dfe2;border-radius:12px;font:700 12px/1.45 var(--uf-body);letter-spacing:0;text-transform:none} .uf-site .uf-ed--video .chap.on{background:var(--uf-navy);color:white;border-color:var(--uf-navy)} .uf-site .uf-ed--video .chap.on i{color:var(--uf-orange)} .uf-site .uf-ed--video .chap:hover{border-color:var(--uf-orange)} .uf-site .uf-ed--video .chap:focus-visible{outline:2px solid var(--uf-orange);outline-offset:3px} @media(max-width:700px){.uf-site .uf-ed--video .chaps>.wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.uf-site .uf-ed--video .chap{min-height:80px;padding:14px}.uf-site .uf-ed--video #bigplay{width:60px;height:60px}.uf-site .uf-ed--video #soundtag{top:12px;left:12px;font-size:12px}} /* Episode reading: quiet type hierarchy and compact, legible supporting cards. */ .uf-site .uf-ed--video .elay{gap:40px} .uf-site .uf-ed--video .story>h2{font:700 clamp(25px,2.5vw,32px)/1.25 var(--uf-body);letter-spacing:-.025em;text-transform:none;margin:14px 0 24px} .uf-site .uf-ed--video .story>p{font:400 17px/1.75 var(--uf-body);color:#40535e;margin:0 0 26px} .uf-site .uf-ed--video .story .pull{background:#082230;border:0;border-radius:var(--uf-radius-card);padding:28px;margin:30px 0} .uf-site .uf-ed--video .story .pull p{font:500 21px/1.5 var(--uf-body);text-transform:none;color:#f2f6f8;margin:0} .uf-site .uf-ed--video .side :is(.spec,.sub){border:1px solid #d5dfe2;border-radius:var(--uf-radius-card);clip-path:none;padding:24px;margin-bottom:18px} .uf-site .uf-ed--video .side .spec .t{font:700 18px/1.35 var(--uf-body);text-transform:none;color:var(--uf-navy);margin-bottom:18px} .uf-site .uf-ed--video .side .spec ul{margin:0;padding:0;list-style:none} .uf-site .uf-ed--video .side .spec li{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;padding:13px 0;border-bottom:1px solid #e2e8eb;align-items:start} .uf-site .uf-ed--video .side .spec li:last-child{border-bottom:0;padding-bottom:0} .uf-site .uf-ed--video .side .spec li b{font:700 14px/1.5 var(--uf-body);text-transform:none;color:var(--uf-navy);overflow-wrap:anywhere} .uf-site .uf-ed--video .side .spec a{color:#a94e00!important;text-decoration:none} .uf-site .uf-ed--video .side .spec a:hover{text-decoration:underline} .uf-site .uf-ed--video .side .sub{background:#082230;color:white;border-color:#082230} .uf-site .uf-ed--video .side .sub>b{display:block;font:700 20px/1.3 var(--uf-body);text-transform:none;color:white} .uf-site .uf-ed--video .side .sub :is(p,span){color:#c4d2d9;font:400 14px/1.6 var(--uf-body)} .uf-site .uf-ed--video .side .sub p{margin:12px 0 18px} .uf-site .uf-ed--video .side .sub input{margin-bottom:10px} .uf-site .uf-ed--video .tr{border:1px solid #d5dfe2;border-radius:var(--uf-radius-card);overflow:hidden} .uf-site .uf-ed--video .tr>.hd{font:700 17px/1.4 var(--uf-body);text-transform:none;padding:20px 24px} .uf-site .uf-ed--video .tr>.hd .pl{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ff7d01;color:#001523;flex:none} @media(min-width:801px){.uf-site .uf-ed--video .elay{grid-template-columns:minmax(0,1fr) 280px}} @media(max-width:600px){.uf-site .uf-ed--video .side{grid-template-columns:1fr}.uf-site .uf-ed--video .story .pull{padding:24px}.uf-site .uf-ed--video .story .pull p{font-size:19px}} /* Up next: give the text its own explicit light-surface colors. */ .uf-site .uf-editorial .next .nc{display:flex;flex-direction:column;border:1px solid #d6dfe3;border-radius:var(--uf-radius-card);overflow:hidden;transition:border-color .2s} .uf-site .uf-editorial .next .nc:hover{transform:none;border-color:var(--uf-orange)} .uf-site .uf-editorial .next .nc:focus-visible{outline:3px solid var(--uf-orange);outline-offset:4px} .uf-site .uf-editorial .next .nc .ph{margin:0;border-radius:0;clip-path:none;aspect-ratio:16/10;flex:none} .uf-site .uf-editorial .next .nc .bd{display:flex;flex:1;flex-direction:column;gap:18px;margin:0;padding:24px;color:var(--uf-navy)} .uf-site .uf-editorial .next .nc .bd b{color:var(--uf-navy);font-size:18px;line-height:1.4} .uf-site .uf-editorial .next .nc .bd>span{color:#536772;font:700 12px/1.5 var(--uf-body);letter-spacing:.02em;margin: auto 0 0;padding-top:8px} .uf-site main .acc.uf-shared-faq{border:0;background:transparent} .uf-site main .acc.uf-shared-faq .q{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;background:none;border:0;cursor:pointer} .uf-site main .acc.uf-shared-faq .bd .uf-answer-inner{min-height:0;overflow:hidden;padding:0} .uf-site main .acc.uf-shared-faq .it .bd{padding:0} @media(min-width:541px) and (max-width:900px){.uf-site .uf-editorial .next .grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Shared three-photo galleries: aligned images and readable caption panels. */ .uf-site .gal3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin-top:30px} .uf-site .gal3 .g,.uf-site .gal3 .g:first-child{display:flex;flex-direction:column;grid-row:auto;grid-column:auto;min-width:0;clip-path:none;border:1px solid #173643;border-radius:var(--uf-radius-card);overflow:hidden;background:var(--navy,#001523)} .uf-site .gal3 .g img,.uf-site .gal3 .g:first-child img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;flex:none;border-radius:0;clip-path:none} .uf-site .gal3 .g .c{position:static;display:block;flex:1;padding:20px 22px;border-top:3px solid var(--orange);background:#001523;color:#fff;font-family:var(--font-body,Arial,sans-serif);font-size:15px;font-weight:600;line-height:1.5;letter-spacing:0;text-transform:none} @media(max-width:640px){.uf-site .gal3{grid-template-columns:1fr;gap:18px}.uf-site .gal3 .g .c{padding:18px 20px}} /* Availability lists use the container width, without a second viewport gutter. */ .uf-site .uf-mc-inventory:has(.avl)>.wrap{max-width:1208px;width:calc(100% - 48px);margin-inline:auto;padding:0} .uf-site .uf-mc-inventory:has(.avl) .uf-mc-inventory-layout{padding:56px 0;gap:26px} .uf-site .uf-mc-inventory:has(.avl) .uf-mc-inventory-intro{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:24px;border-bottom:1px solid #cbd4d7} .uf-site .uf-mc-inventory:has(.avl) .uf-mc-inventory-intro :is(h2,.h2x){width:100%;max-width:none;text-wrap:balance;overflow-wrap:normal;word-break:normal} .uf-site .uf-mc-inventory:has(.avl) .uf-mc-inventory-intro :is(p,.lead-p){max-width:72ch} .uf-site .uf-mc-inventory .avr{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,1.7fr) minmax(150px,.8fr) auto;gap:24px;padding:26px;border:1px solid #d8dfe2;border-left:4px solid var(--uf-orange);border-radius:var(--uf-radius-card);margin-bottom:14px} .uf-site .uf-mc-inventory .avr>*{min-width:0} .uf-site .uf-mc-inventory .avr .pk{font:700 17px/1.4 var(--uf-body);text-transform:none;letter-spacing:0} /* UF-19 (2026-10-03 audit): was 11px, under the 12px floor. */ .uf-site .uf-mc-inventory .avr .st{display:table;margin:8px 0 0;border-radius:20px;padding:4px 10px;font:700 12px/1.4 var(--uf-body);letter-spacing:.04em} /* Rick Loom 2026-10-13 (R13, R73): the status reads "Ask the Welcome Team" (was "Ask leasing"), 186px wide; a 320px phone card leaves 175px, so under 360px the chip keeps its 12px floor and one line on tighter padding and tracking. */ @media(max-width:359px){.uf-site .uf-mc-inventory .avr .st{padding:4px 6px;letter-spacing:.01em}} .uf-site .uf-mc-inventory .avr .pr{font:700 19px/1.35 var(--uf-body);color:#ae5000;text-align:left;letter-spacing:0} .uf-site .uf-mc-inventory .avr .pr i{display:block;margin-top:4px;font:400 12px/1.4 var(--uf-body);letter-spacing:0;text-transform:none} .uf-site .uf-mc-inventory .avr .go a{justify-content:center;gap:8px;padding:13px 18px;border-radius:12px;white-space:nowrap;background:var(--uf-orange);color:#001523;text-decoration:none} @media(max-width:1000px){.uf-site .uf-mc-inventory .avr{grid-template-columns:1fr 1.5fr}.uf-site .uf-mc-inventory .avr .go{justify-self:end}.uf-site .uf-mc-inventory:has(.avl) .uf-mc-inventory-intro{grid-template-columns:1fr}} @media(max-width:540px){.uf-site .uf-mc-inventory .avr{grid-template-columns:1fr;padding:22px;gap:16px}.uf-site .uf-mc-inventory .avr .go{justify-self:stretch}.uf-site .uf-mc-inventory .avr .go a{display:flex}.uf-site .uf-mc-inventory:has(.avl) .uf-mc-inventory-layout{padding:40px 0}} /* One muted orange treatment for decorative X/chevron background artwork. */ .uf-site{--uf-artwork-opacity:.22} /* 2026-09-30, Mart (Teams, 11:51 UTC): "remove [the X] in some areas and put them in the footer". The watermark X inside content bands is gone and his navy X now sits in the footer (src/footer.css). Removed: the dark band X (.sec.dark::before, his example 1), the Shop Manual opt-in X (.optin, his example 2), the worksheet gate X, the closing CTA X, the video band X, the state outro X and the three faint landing X marks (.xint, .maxpot). Each is absolutely positioned, so hiding it never moves layout. Kept on purpose: hero and brand X artwork (home hero, facility and bay heroes, .uf-mc-geometry, hero svg.xbg), the state stats lines (.xl) and the landing line art (.xlines). Restore from d34dfd8. */ .uf-site .sec.dark::before{content:none} .uf-site :is(.optin svg.xw,.gate svg.x,.closer svg.fx,.vband svg.xwm,.uf-state-outro svg.xmk), .uf-site[data-page=landing] :is(.xint,.maxpot) svg.faint{display:none} .uf-site .uf-mc-geometry{fill:var(--uf-orange);opacity:var(--uf-artwork-opacity)} .uf-site svg:is(.fx,.xbg,.xmk,.xwm,.xmark,.xw,.xl,.faint,.seams,.seam,.sline){opacity:var(--uf-artwork-opacity);pointer-events:none} .uf-site svg:is(.fx,.xbg,.xmk,.xwm,.xmark,.xw,.xl,.faint,.seams,.seam,.sline) [stroke]:not([stroke="none"]){stroke:var(--uf-orange)} .uf-site svg:is(.fx,.xbg,.xmk,.xwm,.xmark,.xw,.xl,.faint,.seams,.seam,.sline) [fill]:not([fill="none"]){fill:var(--uf-orange)} .uf-site .uf-mc-inventory:has(.avl) .uf-mc-inventory-intro>*{min-width:0;max-width:100%} .uf-site .uf-mc-inventory:has(.avl) .uf-mc-inventory-intro :is(h2,.h2x){overflow-wrap:anywhere} /* September 23 brand reset: one shared sharp-corner policy. */ .uf-site,.uf-site *{--uf-radius-card:0px;--uf-radius-media:0px;--uf-radius-control:0px;--uf-field-radius:0px} .uf-site *,.uf-site *::before,.uf-site *::after{border-radius:0!important} .uf-site .uf-home-primary-cta{display:inline-flex;margin-top:28px;min-height:54px;padding:18px 28px} .uf-home-sizing-help{display:flex;max-width:1208px;margin:24px auto;padding:0 24px;font-size:15px} /* Original disclosure-led comparison, keeping the source inventory intact. */ .uf-collapsing-listings .uf-listing-disclosure{border-top:1px solid #50616b} .uf-collapsing-listings .uf-listing-disclosure:last-child{border-bottom:1px solid #50616b} .uf-collapsing-listings .uf-listing-toggle{width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) 44px;gap:20px;align-items:center;padding:26px 24px;border:0;background:#082230;color:#fff;text-align:left;font:700 clamp(18px,2vw,25px)/1.3 var(--uf-body);cursor:pointer} .uf-collapsing-listings .uf-listing-number{font-size:13px;color:#ff8b26} .uf-collapsing-listings .uf-listing-toggle-icon{display:grid;place-items:center;width:40px;height:40px;background:var(--uf-orange);color:#001523;font-size:24px} .uf-collapsing-listings .is-open>.uf-listing-toggle{background:#103548} .uf-collapsing-listings .uf-listing-toggle:focus-visible{outline:2px solid #ff8b26;outline-offset:-4px} .uf-collapsing-listings .uf-listing-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .6s cubic-bezier(.22,1,.36,1)} .uf-collapsing-listings.is-enhanced .uf-listing-disclosure:not(.is-open) .uf-listing-body{grid-template-rows:0fr} .uf-collapsing-listings .uf-listing-body-inner{min-height:0;overflow:hidden} .uf-collapsing-listings .uf-home-comparison-panel{padding:26px 24px;margin:0;background:#e4eaec;color:#001523} .uf-collapsing-listings .uf-home-comparison-panel-head :is(h4,p),.uf-collapsing-listings .uf-home-comparison-footnote{color:#344b57} .uf-collapsing-listings .uf-home-comparison-panel-head a{color:#9f4900} @media(max-width:600px){.uf-collapsing-listings .uf-listing-toggle{grid-template-columns:28px minmax(0,1fr) 36px;gap:10px;padding:22px 14px}.uf-collapsing-listings .uf-home-comparison-panel{padding:20px 12px}} @media(prefers-reduced-motion:reduce){.uf-collapsing-listings .uf-listing-body{transition:none}} .uf-collapsing-listings .uf-home-comparison-panel caption{color:#465f6c} .uf-collapsing-listings .uf-home-comparison-panel-head h4{font:700 24px/1.3 var(--uf-body);letter-spacing:0;text-transform:none} /* 2026-09-27: confirm sharp corners apply on homepage family too (Rick UI library ask). */ .uf-site[data-page-family=home],.uf-site[data-page-family=home] *{--uf-radius-card:0px;--uf-radius-media:0px;--uf-radius-control:0px;--uf-field-radius:0px} /* C2 and C5 (Rick and Mart call 2026-10-02, integration sweep): the 404 hero laid the photo at 22% opacity with a saturation filter on navy (a full-frame wash) and a thick translucent orange X over it. The photo is now full colour; a navy gradient behind the copy stops at 70% of the width, and the X is a thin orange line. Restore: delete these rules (content/styles/404.css keeps the old values). */ .uf-site[data-page="404"] .nf .bgph{opacity:1;filter:none} .uf-site[data-page="404"] .nf .bgph::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,#001523f2 0%,#001523db 34%,#00152380 52%,#00152300 70%)} .uf-site[data-page="404"] .nf .xbg{opacity:.9} .uf-site[data-page="404"] .nf .xbg path{stroke-width:.8;vector-effect:non-scaling-stroke} @media(max-width:760px){ .uf-site[data-page="404"] .nf .bgph::after{background:linear-gradient(180deg,#001523e6 0%,#001523cc 55%,#00152366 80%,#00152300 100%)} } /* UF-19 (2026-10-03 audit): site-wide text-link tap targets, invisible padding + matching negative margin so the visible size/position is unchanged (same technique as the header logo, footer links and breadcrumb). .golink/.uf-map-direct/.uf-map-list-link/.mxlead-mail are plain text-style links, not the button system, each under 44px tall in at least one context. */ .uf-site .golink{display:inline-flex;min-height:44px;padding-block:11px;margin-block:-11px} .uf-site[data-page=map3d] .uf-map-list-link{display:inline-flex;align-items:center;min-height:44px;padding-block:12px;margin-block:-12px} body[data-page-family=facility] .mxlead-mail{display:inline-flex;align-items:center;min-height:44px;padding-block:12px;margin-block:-12px} /* UF-19 (2026-10-03 audit): these bold table-cell and list links are the whole cell's content (not an inline link inside flowing prose), so they are not the WCAG 2.5.8 sentence exception; invisible padding expands the tap target to 44px without changing the visible row/cell size. */ .uf-site .tbl td>b>a{display:inline-block;padding:14px 4px;margin:-14px -4px} .uf-site main li>b>a,.uf-site main li>span+b>a{display:inline-block;padding-block:12px;margin-block:-12px} /* UF-19 (2026-10-03 audit): invisible padding expands these standalone (not inline-prose) links to a 44px tap target without changing visible size/spacing. */ .uf-site .qlinks a{display:inline-block;padding-block:12px;margin-block:-12px} .uf-site .uf-result-head a{display:inline-flex;align-items:center;padding-block:12px;margin-block:-12px} .uf-site .uf-tx-lead-mail a{display:inline-block;padding-block:12px;margin-block:-12px} .uf-site .prose li>a{display:inline-block;padding-block:12px;margin-block:-12px} /* ---------- uf-1004 mobile pass (Sun Oct 4, 2026): nothing under 12px on a phone ---------- Measured at 375x812 on production (af79073): these labels were 10px to 11px (step labels on Apply, the calculator legend, the Shop Manual series key, the accessibility chip link, the home film banner and the Shop Talk button, the site plan legends). PLAYBOOK M10 and the 12px floor. */ @media (max-width:760px){ .uf-site .steps>span,.uf-site .zlegend>span,.uf-site .serieskey>span,.uf-site .chips>a, .uf-site .uf-home-film-banner small,.uf-site a.uf-home-button,.uf-site .mxlgd>li{font-size:12px !important} .uf-site .crumb a{display:inline-block;padding-block:13px;margin-block:-13px} } /* uf-1004 mobile pass, round 2 (Sun Oct 4, 2026) 1. Tables on phones (PLAYBOOK M9: readable on a phone). The comparison tables on the guides, the county pages, the bay types, About and Owners hid their second and third columns off the right edge of a scroll box with no cue. Under 640px each row becomes a card: the first cell is the row title, the other cells carry their column name as a small label (data-label, added by scripts/build.py). Park pages keep their own unit cards. 2. Text inputs at 16px, so iOS Safari does not zoom the page when a field is tapped (the Shop Talk sign-up field was 13px). 3. 44px tap areas for standalone links that measured 20px to 33px tall (the accessibility page link chip, the Texas and New Jersey links on Locations, the park email and directions links). */ @media (max-width:640px){ .uf-site:not([data-page-family=facility]) .uf-table-scroll{overflow:visible;border:0;border-radius:0;box-shadow:none;background:none} .uf-site:not([data-page-family=facility]) .uf-table-scroll>table{display:block;width:100%;min-width:0 !important;max-width:none;border:0;font-size:15px;line-height:1.45} .uf-site:not([data-page-family=facility]) .uf-table-scroll>table>thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .uf-site:not([data-page-family=facility]) .uf-table-scroll>table>tbody{display:block} .uf-site:not([data-page-family=facility]) .uf-table-scroll>table>tbody>tr{display:block;padding:14px 16px;border-bottom:1px solid rgba(127,140,148,.35)} .uf-site:not([data-page-family=facility]) .uf-table-scroll>table>tbody>tr>:is(td,th){display:block;width:auto;min-width:0;padding:3px 0;border:0;white-space:normal;text-align:left} .uf-site:not([data-page-family=facility]) .uf-table-scroll>table>tbody>tr>:first-child{font-weight:700} .uf-site:not([data-page-family=facility]) .uf-table-scroll>table>tbody>tr>:not(:first-child)[data-label]::before{content:attr(data-label);display:block;margin:6px 0 2px;font:400 12px/1.3 var(--uf-display);letter-spacing:.1em;text-transform:uppercase;opacity:.7} } @media (max-width:760px){ .uf-site input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=range]),.uf-site select,.uf-site textarea{font-size:16px !important} .uf-site .chips>a{display:inline-flex;align-items:center;min-height:44px} .uf-site .uf-first-look>a{display:inline-flex;align-items:center;min-height:44px} .uf-site .mxnap a{display:inline-block;padding-block:12px;margin-block:-12px} } /* uf-1004 mobile pass, round 3 (Sun Oct 4, 2026): the "up next" captions on the two Shop Talk episodes were 10.5px on phones; the map's "See the space" link was 21px tall at tablet width. */ @media (max-width:760px){ .uf-site[data-page^=episode] span.bd{font-size:12px !important} } .uf-site #uf-map-bays-link{display:inline-flex;align-items:center;min-height:44px} /* 2026-10-05: owner inquiries use the existing rectangular form language. */ .uf-site .uf-inquiry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px} .uf-site .uf-inquiry label{display:block;margin-bottom:8px;font-weight:600} .uf-site .uf-inquiry input,.uf-site .uf-inquiry select,.uf-site .uf-inquiry textarea{width:100%;min-width:0;border:1px solid #8a959e;background:#fff;padding:12px;color:#001523;font:inherit} .uf-site .uf-inquiry p,.uf-site .uf-inquiry [data-form-status]{grid-column:1/-1} .uf-site [data-form-status]{overflow-wrap:anywhere} @media(max-width:640px){.uf-site .uf-inquiry{grid-template-columns:minmax(0,1fr)}.uf-site[data-page="apply"] #stepper>span{min-width:0;padding:12px 8px;overflow-wrap:anywhere;font-size:10px;letter-spacing:.03em}} /* Inquiry disclosures stay below email controls, including narrow editorial sidebars. */ .uf-site form.uf-email-request{display:grid;grid-template-columns:minmax(0,1fr);gap:10px} .uf-site form.uf-email-request input{width:100%;min-width:0} .uf-site form.uf-email-request .uf-heard-inline label{display:block;margin:2px 0 6px;font-size:.875em;font-weight:400;opacity:.85} .uf-site form.uf-email-request .uf-heard-inline select{width:100%;min-width:0;height:46px;padding:0 12px;border:1px solid #8a959e;border-radius:0;background-color:#fff;color:#001523;font:inherit} .uf-site form.uf-email-request p{grid-column:1/-1;min-width:0} @media(max-width:640px){.uf-site form.uf-email-request{grid-template-columns:minmax(0,1fr)}} /* UF-S02 (2026-10-07): the bay and use cards' price value reads in one case ('PRICE ON REQUEST'), whatever the display face, instead of mixing capital and small glyphs. */ .uf-site .rangebox .n{text-transform:uppercase} /* UF-B07 (2026-10-07): the Privacy Policy link in a form's fine print reads as a link, not plain text. */ .uf-site form .fine a{color:inherit;text-decoration:underline;text-underline-offset:2px} /* Square range sliders everywhere (Rick: no circular controls, fixed once in the UI library, not page by page). */ .uf-site input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:#001523;border-radius:0;accent-color:auto} .uf-site input[type=range]::-webkit-slider-runnable-track{height:4px;background:#001523;border-radius:0} .uf-site input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-7px;border:0;border-radius:0;background:#ff7d01;cursor:pointer} .uf-site input[type=range]::-moz-range-track{height:4px;background:#001523;border-radius:0} .uf-site input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:0;background:#ff7d01;cursor:pointer} .uf-site input[type=range]:focus-visible{outline:2px solid #ff7d01;outline-offset:6px} /* The labelled "Explore " button on each bay card (Rick, 2026-09-27; restored 2026-10-08, audit C07-14). It is the card link's label, so the whole card stays one link; hover or focus on the card fills it, as the tile does. */ .uf-site[data-page=baytypes] .uf-bay-cards .tcard .uf-bay-explore{display:inline-flex;align-items:center;justify-content:center;align-self:center;min-height:44px;margin:14px 0 0;padding:0 20px;border:2px solid var(--uf-orange);border-radius:0;background:transparent;color:#fff;font:700 13px/1.2 var(--uf-body);letter-spacing:.1em;text-transform:uppercase;text-align:center;transition:background-color 200ms ease,color 200ms ease} .uf-site[data-page=baytypes] .uf-bay-cards .tcard:is(:hover,:focus-visible) .uf-bay-explore{background:var(--uf-orange);color:#001523} @media(forced-colors:active){.uf-site[data-page=baytypes] .uf-bay-cards .tcard .uf-bay-explore{border-color:ButtonText;color:ButtonText}} @media(max-width:520px){.uf-site[data-page=baytypes] .uf-bay-cards .tcard .uf-bay-explore{padding:0 12px;font-size:12px;letter-spacing:.06em;margin-top:10px}} @media (prefers-reduced-motion:reduce){.uf-site[data-page=baytypes] .uf-bay-cards .tcard .uf-bay-explore{transition:none}} /* Cheline 2026-10-09 (A36m): Locations cards line up their Schedule a tour / Join the waitlist links when one card's line wraps to two (900px and other mid widths): the line takes the spare height, so every link starts level. */ .uf-site .uf-park-card{display:flex;flex-direction:column} .uf-site .uf-park-card>.uf-card-copy{display:flex;flex-direction:column;align-items:flex-start;flex:1 1 auto} .uf-site .uf-park-card>.uf-card-copy>p{flex:1 0 auto} /* Rick Loom 2026-10-13 33:35 to 34:00 (R70) and the frame check O05: on bay-micro.html the spec rows' "see the power guide for the math" and "sizing method" were links that read as plain text (the reset's colour:inherit and no underline). Links inside a sentence of body copy now look like links, the site's text-link pattern: the text keeps its colour (contrast stays) with an orange underline, and turns the darker readable orange on hover. Spec tables on every page, the hint and availability notes, the band copy (faq.html) and plain form notes (owners.html; the .fine notes were already underlined and keep their look). Buttons, cards, breadcrumbs and navigation are left alone (only links without a class of their own). */ .uf-site main :is(td,p.hint,p.avl-note,.band .in2>p,form>p:not(.fine))>a:not([class]){text-decoration:underline;text-decoration-color:var(--uf-orange,#ff7d01);text-decoration-thickness:2px;text-underline-offset:3px;transition:color .2s ease} @media (hover:hover) and (pointer:fine){ .uf-site main :is(td,p.hint,p.avl-note,form>p:not(.fine))>a:not([class]):hover{color:#ae5000} .uf-site main .band .in2>p>a:not([class]):hover{color:var(--uf-orange,#ff7d01)} } .uf-site main :is(td,p.hint,p.avl-note,.band .in2>p,form>p:not(.fine))>a:not([class]):focus-visible{outline:2px solid var(--uf-orange,#ff7d01);outline-offset:2px} /* Rick Loom 2026-10-13 16:02 to 16:45 (R29): "clean up on the responsiveness, specifically with the arrow overlap... at this super small screen size, maybe you remove the arrow altogether." A sweep of every page at 320 and 440px in Chromium and WebKit (tests/button-arrow-overlap.cjs with UF_OVERLAP_PAGES) found three more buttons beside Shop Talk: - availability rows' "See the bay" (storage.html and the other inventory lists): the arrow sat 2.7px from the label (a flex link with no gap), now 8px like the market pages' rows; - the county pages' waitlist button ("Join the Medford waitlist", burlington-county.html at 320): one unbreakable line ran out of both ends of the button; on phones the label now wraps inside it; - the use pages' two hero buttons sharing a phone row ("See warehouse floors", "See showroom space"): one long word ran past the button's edge below about 380px, so there the arrow is dropped and the label has the full width. */ .uf-site .avr .go a{gap:8px} @media(max-width:540px){.uf-site .uf-mc-inventory .avr .go a{white-space:normal;text-align:center}} @media(max-width:380px){.uf-site .uf-mc-use-hero .btns .btn>.arr{display:none}} /* A2P texting consent (scripts/build.py sms_consent_block, 2026-10-14): two optional, unchecked boxes right above a form's send button. Plain sentence text, never the uppercase field-label look, and a native checkbox. */ .uf-site form fieldset.uf-sms-consent{min-width:0;margin:18px 0 16px;padding:0;border:0} .uf-site form fieldset.uf-sms-consent legend{margin:0 0 10px;padding:0;font:600 14px/1.3 var(--uf-body,inherit);letter-spacing:0;text-transform:none} .uf-site form .uf-sms-consent label.uf-sms-consent-row{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;font:400 13px/1.5 var(--uf-body,inherit);letter-spacing:0;text-transform:none;color:inherit;cursor:pointer} .uf-site form .uf-sms-consent input[type=checkbox]{appearance:auto;flex:0 0 18px;width:18px;min-width:18px;height:18px;min-height:0;margin:2px 0 0;padding:0;border-radius:3px;accent-color:#ff7d01;cursor:pointer} .uf-site form .uf-sms-consent input[type=checkbox]:focus-visible{outline:2px solid #ff7d01;outline-offset:2px} .uf-site form .uf-sms-consent p.uf-sms-consent-note{margin:2px 0 0;font:400 12px/1.5 var(--uf-body,inherit)} body.uf-site[data-page-family=facility] #lead .mxform .uf-sms-consent{color:rgba(255,255,255,.78)} body.uf-site[data-page-family=facility] #lead .mxform .uf-sms-consent legend{color:var(--mx-white,#fff)} body.uf-site[data-page-family=facility] #lead .mxform .uf-sms-consent label.uf-sms-consent-row{display:flex;margin:0 0 10px;font:400 13px/1.5 var(--mx-body,inherit);letter-spacing:0;text-transform:none;color:rgba(255,255,255,.78)} body.uf-site[data-page-family=facility] #lead .mxform .uf-sms-consent input[type=checkbox]{-webkit-appearance:checkbox;appearance:auto;flex:0 0 18px;width:18px;min-width:18px;height:18px;min-height:0;margin:2px 0 0;padding:0;border:0;background:none;accent-color:#ff7d01} body.uf-site[data-page-family=facility] #lead .mxform .uf-sms-consent p.uf-sms-consent-note{color:rgba(255,255,255,.66)} .uf-site form .uf-sms-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}