/* Framework 3.6.10 library parity. Loaded after category CSS. No legacy baseline gate in Studio. sb-* aliases live on the actual faithful composition root, preserving direct-child selectors. Theme tokens are translated to Studio roles; source files and checks are documented in framework-parity.md. */ .pb-theme{--bl-site-text:var(--pb-text);--bl-site-muted:var(--pb-muted);--bl-site-border:var(--pb-border);--bl-site-surface:var(--pb-surface);--bl-site-bg:var(--pb-bg);--bl-site-primary:var(--pb-primary);--bl-site-secondary:var(--pb-secondary);--bl-site-ink:var(--pb-text);--bl-site-link:var(--pb-primary)} body .sb-blk.sb-blk{--pb-ink:var(--bl-site-ink);--pb-tint:var(--bl-site-surface);--pb-muted-on-dark:color-mix(in srgb,var(--pb-on-dark) 72%,transparent);--pb-rule-on-dark:color-mix(in srgb,var(--pb-on-dark) 20%,transparent);--bl-look-headings:currentColor} body .sb-blk.sb-blk.sb-dark{--pb-text:var(--pb-on-dark);--pb-muted:var(--pb-muted-on-dark);--pb-border:var(--pb-rule-on-dark);color:var(--pb-on-dark)} /* Studio row-level text overrides must yield to the look's own panels. Filled buttons keep their own readable ink (.pt-btn read dark on Index's orange, 2026-11-05). */ .pb-theme .pb-block .sb-blk.sb-blk :is(h1,h2,h3,h4,h5,h6,a:not(.btn):not(.ef-btn):not(.g-btn):not(.dv-btn):not(.pt-btn)){color:inherit} body .sb-blk:not(.sb-edge){--st-space:0px} body .sb-blk:not(.sb-edge)>:is(.sec,.section,.blk){background:transparent!important;padding-block:0!important;margin-block:0!important} body .sb-blk:not(.sb-edge)>:is(.sec,.section,.blk)>.wrap,body .sb-blk:not(.sb-edge)>.wrap{max-width:none!important;padding-inline:0!important} /* 3.6.10: headings follow Branding > Font Titles Caps like the framework layouts (owner, 2026-10-30: an all-caps site showed Studio Block headings in sentence case). Sites built before 3.6.10 keep their look (inc/look-baseline.php). */ body .sb-blk :is(h1, h2, h3) { text-transform: var(--title-transform, none); } /* 3.6.10: grid and flex children may shrink below their content (min-width: auto made a price line, a long word or a wide card push whole blocks 150-300px past a phone screen: block proof 2026-10-31, memberships 07-17, testimonials 11/12, team 16/20, sponsorships 09/12). Text wraps instead; long unbroken words break. Phones only: on wider screens it let auto-sized label columns shrink below their words (VOL-02 titles split every few letters). Older looks keep the old sizing. */ @media (max-width: 767px) { body .sb-blk :is(.wrap, [class*="grid"], [class*="list"], [class*="row"], [class*="stack"], [class*="cols"], [class*="card"], .strip, .stub, .meter) > * { min-width: 0; } body .sb-blk :is(p, h1, h2, h3, h4, li, dd, dt, span, a) { overflow-wrap: break-word; } } /* 3.6.10: on a dark band, cards and panels drawn on the surface color turn into a faint light tint over the band, so the white text the band gives them stays readable (GRP-10, ICN-15 printed white text on light cards). */ body .sb-blk.sb-blk.sb-dark { --pb-surface: color-mix(in srgb, var(--pb-on-dark) 8%, transparent); } /* 3.6.10: looks that paint their own dark panel in the text color (.dark, .ink, wizards 12/19 ...) turned white on a dark band, where the text color flips to white (WIZ-12, WIZ-19, TML-12: white panels with white text). On a dark band they paint Branding Dark instead. */ body .sb-blk.sb-blk.sb-dark :is(.dark, .ink, .tn-dark, .w12, .w19, .h11, .h16, .h22, .b07, .b19, .p17, .t9 .panels, .s12 .panel, .s13 .top, .t18 li, .sbi6, .p02 .card.feat, .i16-s, .m04, .m10, .ov-giant, .pm-giant, .m-panel, .util), body .sb-blk.sb-blk.sb-dark:is(.sb-wizards.sb-wizards, .sb-timelines.sb-timelines) > :is(.dark, .w12, .w19) { background: var(--pb-ink); } /* 3.6.10: form labels and legends on a dark band use the light text color, not Branding's (dark) form label color (WIZ-12, WIZ-19, FRM-13: black labels on a black band). */ body .sb-blk.sb-blk.sb-dark { --form-label-color: var(--pb-on-dark); } /* Same inside a look's own dark panel on any band, where cards also take the faint light tint (GRP-10's match card and the wizard tiles printed white text on light cards). */ body .sb-blk.sb-blk :is(.dark, .ink, .is-dark, .tn-dark, .w12, .w19) { --form-label-color: var(--pb-on-dark); } /* A light panel or card inside such a section (FRM-03, FRM-07 forms) keeps dark labels. */ body .sb-blk.sb-blk :is(.dark, .ink, .tn-dark) :is(.panel, [class*="card"]) { --form-label-color: var(--pb-text); } /* .is-dark pads and the wizards 12/19 draw their cards and tiles as a faint light tint over the dark. */ body .sb-blk.sb-blk :is(.is-dark, .w12, .w19) { --pb-surface: color-mix(in srgb, var(--pb-on-dark) 8%, transparent); --pb-muted: var(--pb-muted-on-dark); } /* .is-dark pads color their text with the text color, so it turns light inside them. (.dark and .ink keep it: the library uses it there as dark ink on light accents, such as LST-19's inverted button.) */ body .sb-blk.sb-blk .is-dark { --pb-text: var(--pb-on-dark); --pb-border: var(--pb-rule-on-dark); } /* 3.6.10: a dark framework row adds .white, whose ".white h1-h6 { color: white !important }" outranked the looks' own heading color. Looks that keep a light panel on a dark row (ICN-06/19, IMG-12, SRM-06/09/12/15/18/20, VID-03, VOL-04, WIZ-01/03/18) printed white headings on it. Inside a look, headings follow the look's color, as on a light row. */ body .sb-blk.sb-blk :is(h1, h2, h3, h4, h5, h6) { color: var(--bl-look-headings) !important; } /* 3.6.10: text links follow the library's own dark containers and photo captions too (block proof 2026-10-31: CTA-01..16, EVT-03/07/10/19, GAL-17, IMG-13/20, MEM-16, SLD-17/20, TEM-19, VOL-13/15 printed Branding's dark link color on a dark band or photo). Main-color fills use the text color chosen for Main. Older looks keep the Branding link color. */ body .sb-blk.sb-blk.sb-blk :is(.ink, .photo, .is-dark, .ov, .sb-ctas.sb-ctas .c5-door, .sb-galleries.sb-galleries .g17-cap, .sb-imagery.sb-imagery .i20-bar, .sb-sliders-carousels.sb-sliders-carousels .s17-c, .sb-team.sb-team .t19 .txt, .sb-events.sb-events .v7-photo, .sb-events.sb-events .v19, .sb-events.sb-events .v3-txt, .sb-careers.sb-careers .c16, .sb-blog.sb-blog .b18-i.hl) .tlink { color: var(--pb-on-dark); } body .sb-blk.sb-blk.sb-blk :is(.pri, .on-primary, .sb-sliders-carousels.sb-sliders-carousels .s20-card:nth-child(even)) .tlink { color: var(--pbd-fallback-on-brand); } /* Source: articles.fixes.css */ /* The theme forces p and li to inherit size and line-height (!important), which beats the library's font shorthand on these p elements; restore the design's sizes. */ body .sb-articles.sb-articles .acn{font-size:var(--st-type-h3) !important;line-height:var(--st-lh-h3) !important} body .sb-articles.sb-articles .a12-n{line-height:var(--st-lh-head) !important} body .sb-articles.sb-articles .a17-q p{line-height:1.08 !important;letter-spacing:-.02em} body .sb-articles.sb-articles .a11-big>p:last-child{line-height:1.2 !important} body .sb-articles.sb-articles .a10-box h2{line-height:1.6 !important} /* Wide and full-bleed figures (and the hanging/outdented pull quotes) reach past the framed column: the block must not clip them; the page clips the 100vw overflow instead. */ body .sb-blk.sb-articles.sb-articles{overflow-x:visible} html:has(.sb-articles.sb-articles),body:has(.sb-articles.sb-articles){overflow-x:clip} /* The frame strips a look's own .wrap max-width; these looks keep a narrower measure than the page (design: max-width incl. 56px side padding). */ body .sb-blk.sb-articles.sb-articles .sec > .wrap.a10-w,body .sb-blk.sb-articles.sb-articles .sec > .wrap.a11-w,body .sb-blk.sb-articles.sb-articles .sec > .wrap.a13-w,body .sb-blk.sb-articles.sb-articles .sec > .wrap.a20-w{margin-inline:auto} body .sb-blk.sb-articles.sb-articles .sec > .wrap.a10-w{max-width:calc(960px - 2 * clamp(20px,4vw,56px)) !important} body .sb-blk.sb-articles.sb-articles .sec > .wrap.a11-w{max-width:calc(860px - 2 * clamp(20px,4vw,56px)) !important} body .sb-blk.sb-articles.sb-articles .sec > .wrap.a13-w{max-width:calc(1100px - 2 * clamp(20px,4vw,56px)) !important} body .sb-blk.sb-articles.sb-articles .sec > .wrap.a20-w{max-width:calc(1000px - 2 * clamp(20px,4vw,56px)) !important} /* The theme removes link underlines; the design keeps the browser underline on the share links. */ body .sb-articles.sb-articles .share a{text-decoration:underline} body .sb-articles.sb-articles .a07-n .share a{text-decoration:none} body .sb-articles.sb-articles .poster.cc-poster-static { cursor: default; } body .sb-articles.sb-articles .poster.cc-poster-static:hover img { transform: none; } /* Branding Sizes: role overrides kept outside the generated category CSS. */ body .sb-articles.sb-articles .btn { font-size: var(--st-type-body) !important; } body .sb-articles.sb-articles .b10-ctl button { font-size: var(--st-type-body) !important; } body .sb-articles.sb-articles .sel select,body .sb-articles.sb-articles .fin { font-size: var(--st-type-body) !important; } body .sb-articles.sb-articles .lb .close { font-size: var(--st-type-body) !important; } body .sb-articles.sb-articles .at.disp,body .sb-articles.sb-articles .at.big { font-size:var(--st-type-h2) !important; } body .sb-articles.sb-articles .at.big { font-size:var(--st-type-h2) !important; } body .sb-articles.sb-articles .ab { font-size: var(--st-type-body) !important; } body .sb-articles.sb-articles .ab .lead { font-size: var(--st-type-lead) !important; } body .sb-articles.sb-articles .ab h2 { font-size:var(--st-type-h3); } body .sb-articles.sb-articles .pq { font-size: var(--st-type-quote); } body .sb-articles.sb-articles .pq.out { font-size: var(--st-type-quote) !important; } body .sb-articles.sb-articles .ab .dc::first-letter { font-size:var(--st-type-display); } body .sb-articles.sb-articles .rel .tt { font-size:var(--st-type-h3); } body .sb-articles.sb-articles .a08-r a { font-size: var(--st-type-h3); } body .sb-articles.sb-articles .a11-w { font-size: var(--st-type-body) !important; } body .sb-articles.sb-articles .a11-big>p:last-child { font-size: var(--st-type-quote) !important; } body .sb-articles.sb-articles .a11-pts>li::before { font-size:var(--st-type-display) !important; } body .sb-articles.sb-articles .a12-h { font-size: var(--st-type-body) !important; } body .sb-articles.sb-articles .a12-n { font-size:var(--st-type-h3) !important; } body .sb-articles.sb-articles .a13-w { font-size: var(--st-type-body) !important; } body .sb-articles.sb-articles .a13-r h2 { font-size:var(--st-type-h3); } body .sb-articles.sb-articles .a17-q p { font-size: var(--st-type-quote) !important; } body .sb-articles.sb-articles .a17-h { font-size: var(--st-type-body) !important; } body .sb-articles.sb-articles .a17-f { font-size: var(--st-type-body) !important; } body .sb-articles.sb-articles .a19-q { font-size:var(--st-type-h3) !important; } body .sb-articles.sb-articles .a20-w { font-size: var(--st-type-body) !important; } body .sb-articles.sb-articles .a20-l li::before { font-size:var(--st-type-display); } /* Source: bentos.fixes.css */ /* The theme pads every
; photo tiles must be edge to edge so the caption sits where the design has it. */ body .sb-blk.sb-bentos.sb-bentos .tile.k-photo{padding:0 !important} /* The design's "tint" band is the Branding Fifth (tint) color, which base.css clears from the section; paint it here (same as cards). --st-space is 0 in the frame, so pad with a clamp. */ body .sb-blk.sb-bentos.sb-bentos .sec.on-tint{background:var(--pb-tint) !important} /* Row backgrounds: ink band = the design's text color; surface = the design's plain white. */ /* Explicit opt-in: adaptive tiles never use the fixed per-look slots. */ body .sb-bentos.sb-bentos .bento.cc-bento-adaptive { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); grid-auto-rows: auto; } body .sb-bentos.sb-bentos .cc-bento-adaptive > .tile { grid-area: auto; min-height: 0; } /* Branding Sizes: role overrides kept outside the generated category CSS. */ body .sb-bentos.sb-bentos .top code { font-size: var(--st-type-small) !important; } body .sb-bentos.sb-bentos .tt { font-size:var(--st-type-h3) !important; } body .sb-bentos.sb-bentos .big .tt { font-size:var(--st-type-h3) !important; } body .sb-bentos.sb-bentos .b3 .k-quote blockquote { font-size: var(--st-type-quote) !important; } body .sb-bentos.sb-bentos .big blockquote { font-size: var(--st-type-quote) !important; } body .sb-bentos.sb-bentos .k-photo.chip .cap .h3 { font-size:var(--st-type-h3) !important; } body .sb-bentos.sb-bentos .k-photo.pano .h3 { font-size:var(--st-type-h3) !important; } body .sb-bentos.sb-bentos .num { font-size:var(--st-type-display) !important; } body .sb-bentos.sb-bentos .giant .num { font-size:var(--st-type-display) !important; } body .sb-bentos.sb-bentos .giant .h3 { font-size:var(--st-type-h3) !important; } body .sb-bentos.sb-bentos .k-quote blockquote { font-size: var(--st-type-quote) !important; } body .sb-bentos.sb-bentos .huge blockquote { font-size: var(--st-type-quote) !important; } body .sb-bentos.sb-bentos .k-button.big .tt { font-size:var(--st-type-h3) !important; } /* 3.6.10: the Branding Sizes overrides above dropped the tile-width caps, so stats, quotes and titles ran past narrow tiles (BEN-01/04/07/08/11/16/17/19). Every tile is an inline-size container: keep the Branding size, never wider than the tile. */ body .sb-bentos.sb-bentos .tile .num { font-size: min(clamp(calc(var(--st-type-display) * .55), 9.375vw, var(--st-type-display)), 24cqi) !important; } body .sb-bentos.sb-bentos .tile blockquote { font-size: min(var(--st-type-quote), 10.5cqi) !important; } body .sb-bentos.sb-bentos .tile :is(.tt, .h3) { font-size: min(clamp(calc(var(--st-type-h3) * .75), 2.1875vw, var(--st-type-h3)), 15cqi) !important; } /* 3.6.10: looks that paint their own band (BEN-04/10/14/19: the category's page color, a tint or a dark bar of their own) keep their light-row colors on a dark row, so they render the same on every row. The dark row only turned their text white (white on their own light band) and faded their surface color to an 8% tint. */ body .sb-blk.sb-blk.sb-bentos.sb-bentos.sb-edge.sb-dark:is(.sb-look-04, .sb-look-10, .sb-look-14, .sb-look-19) { --pb-text: var(--bl-site-text, var(--bl-look-headings)); --pb-muted: var(--bl-site-muted); --pb-border: var(--bl-site-border); --pb-surface: var(--bl-site-surface, var(--bl-site-bg)); --form-label-color: inherit; color: var(--pb-text); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-bentos.sb-bentos.sb-edge.sb-dark:is(.sb-look-04, .sb-look-10, .sb-look-14, .sb-look-19) .btn:not(.ghost):not(:is(.dark, .ink, .is-dark, .on-dark) *) { background: var(--bl-site-primary); color: var(--pbd-fallback-on-brand); border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-bentos.sb-bentos.sb-edge.sb-dark:is(.sb-look-04, .sb-look-10, .sb-look-14, .sb-look-19) .btn.ghost:not(:is(.dark, .ink, .is-dark, .on-dark) *) { background: transparent; color: var(--bl-site-primary); border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-bentos.sb-bentos.sb-edge.sb-dark:is(.sb-look-04, .sb-look-10, .sb-look-14, .sb-look-19) .tlink:not(:is(.dark, .ink, .is-dark, .on-dark, .photo, .ov) *) { color: var(--bl-site-link); } /* 3.6.10: base.css paints .b07 and .b19 Dark on a dark row (staff bios 07 and 19 panels); the bento grids 07 and 19 share those class names and showed black lines between their tiles. Bento grids stay unpainted. */ body .sb-blk.sb-blk.sb-bentos.sb-bentos.sb-dark :is(.b07, .b19) { background: transparent; } /* Source: blog.fixes.css */ /* Studio Blocks: blog. Without JS the topic filter and rail arrows are inert, so hide them. */ body .sb-blog.sb-blog:not(.sb-js) .b05-f,body .sb-blog.sb-blog:not(.sb-js) .b10-ctl{display:none} /* Dark rows turn --pb-text light, so the cream button on a dark band lost its (ink) text and play icon. */ body .sb-blog.sb-blog.dark .btn,body .sb-blog.sb-blog.dark a.btn:hover{color:var(--pb-ink) !important} body .sb-blog.sb-blog.sb-blk.sb-blk:not(.sb-dark){--pb-surface:var(--pb-tint)} /* Branding Sizes: role overrides kept outside the generated category CSS. */ body .sb-blog.sb-blog .btn { font-size: var(--st-type-body) !important; } body .sb-blog.sb-blog .b10-ctl button { font-size: var(--st-type-body) !important; } body .sb-blog.sb-blog .sel select,body .sb-blog.sb-blog .fin { font-size: var(--st-type-body) !important; } body .sb-blog.sb-blog .lb .close { font-size: var(--st-type-body) !important; } body .sb-blog.sb-blog .b02-r h3 { font-size: var(--st-type-h3); } body .sb-blog.sb-blog .b02-r .ar { font-size: var(--st-type-body) !important; } body .sb-blog.sb-blog .b03-t { font-size:var(--st-type-h3); } body .sb-blog.sb-blog .b03-r .tt { font-size:var(--st-type-h3); } body .sb-blog.sb-blog .b04-h { font-size:var(--st-type-h2); } body .sb-blog.sb-blog .b04-t { font-size:var(--st-type-h3); } body .sb-blog.sb-blog.b04 .tt { font-size:var(--st-type-h3); } body .sb-blog.sb-blog.b05 .tt { font-size:var(--st-type-h3); } body .sb-blog.sb-blog.b06 .tt { font-size:var(--st-type-h3); } body .sb-blog.sb-blog.b07 .tt { font-size:var(--st-type-h3); } body .sb-blog.sb-blog .b09-t { font-size:var(--st-type-h3); } body .sb-blog.sb-blog.b09 .tt { font-size:var(--st-type-h3); } body .sb-blog.sb-blog.b10 .tt { font-size:var(--st-type-h3); } body .sb-blog.sb-blog.b11 .tt { font-size:var(--st-type-h3); } body .sb-blog.sb-blog .b11-r time { font-size:var(--st-type-h3) !important; } body .sb-blog.sb-blog .b12-tile b { font-size:var(--st-type-h3) !important; } body .sb-blog.sb-blog.b12 .tt { font-size:var(--st-type-h3); } body .sb-blog.sb-blog.b13 .tt { font-size:var(--st-type-h3); } body .sb-blog.sb-blog.b14 .tt { font-size:var(--st-type-h3); } body .sb-blog.sb-blog .b15-c blockquote { font-size: var(--st-type-quote); } body .sb-blog.sb-blog.b15 .tt { font-size:var(--st-type-h3); } body .sb-blog.sb-blog.b16 .tt { font-size:var(--st-type-h3); } body .sb-blog.sb-blog .b17-r h3 { font-size: var(--st-type-h3); } body .sb-blog.sb-blog.b18 .tt { font-size:var(--st-type-h3); } body .sb-blog.sb-blog.b19 .tt { font-size:var(--st-type-h3) !important; } /* 3.6.10: looks drawn as a dark band (.dark) sit on the row's Background, which paints the band. On a light row their words, rules, buttons and links follow the row (dark text), not white (BLG-07, BLG-17 and BLG-19 printed white on white). On a Secondary row they follow that color's lightness; Main, Black and photo rows keep the white design. */ body .sb-blk.sb-blk.sb-blog.sb-blog:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *).dark { --pb-on-dark: var(--pb-text); --pb-muted-on-dark: var(--bl-site-muted); --pb-muted: var(--bl-site-muted); --pb-border: var(--bl-site-border); --pb-rule-on-dark: var(--bl-site-border); color: var(--pb-text); } body .bg-sec .sb-blk.sb-blk.sb-blog.sb-blog:not(.sb-edge):not(.sb-dark).dark { --pb-on-dark: oklch(from var(--bl-site-secondary) clamp(0, (0.62 - l) * 1000, 1) 0 0); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-blog.sb-blog:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *).dark .btn:not(.ghost) { background: var(--bl-site-primary); color: var(--pbd-fallback-on-brand) !important; border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-blog.sb-blog:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *).dark .btn:not(.ghost):hover { background: var(--bl-site-primary); color: var(--pbd-fallback-on-brand) !important; border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-blog.sb-blog:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *).dark .btn.ghost { background: transparent; color: var(--bl-site-primary) !important; border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blog.sb-blog:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *).dark .tlink { color: var(--bl-site-link); } /* 3.6.10: looks that paint their own band (BLG-08: the category's page color, a tint or a dark bar of their own) keep their light-row colors on a dark row, so they render the same on every row. The dark row only turned their text white (white on their own light band) and faded their surface color to an 8% tint. */ body .sb-blk.sb-blk.sb-blog.sb-blog.sb-edge.sb-dark:is(.sb-look-08) { --pb-text: var(--bl-site-text, var(--bl-look-headings)); --pb-muted: var(--bl-site-muted); --pb-border: var(--bl-site-border); --pb-surface: var(--bl-site-surface, var(--bl-site-bg)); --form-label-color: inherit; color: var(--pb-text); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-blog.sb-blog.sb-edge.sb-dark:is(.sb-look-08) .btn:not(.ghost):not(:is(.dark, .ink, .is-dark, .on-dark) *) { background: var(--bl-site-primary); color: var(--pbd-fallback-on-brand); border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-blog.sb-blog.sb-edge.sb-dark:is(.sb-look-08) .btn.ghost:not(:is(.dark, .ink, .is-dark, .on-dark) *) { background: transparent; color: var(--bl-site-primary); border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-blog.sb-blog.sb-edge.sb-dark:is(.sb-look-08) .tlink:not(:is(.dark, .ink, .is-dark, .on-dark, .photo, .ov) *) { color: var(--bl-site-link); } /* Source: booking.fixes.css */ /* The theme's global h3 (serif, tight line height) reaches the plain h3 headings inside looks. */ body .sb-booking.sb-booking .b03 .day h3, body .sb-booking.sb-booking .b12 .col h3 { font-family: var(--pb-body-font) !important; line-height: 1.55 !important; } /* BKG-09: the design's ol keeps the browser's list padding and top margin (the theme resets them). */ body .sb-booking.sb-booking .b09 .steps { padding-left: 40px; margin-top: 17px; } /* BKG-18: the design sets this link's border and padding inline; the ".opts a" card rule is more specific than the generated .sbi13. */ body .sb-booking.sb-booking .b18 .opts a.sbi13 { border: 0; padding: 8px 0; } /* Result line of a posted form (shared Forms submit): inherits the look text color. */ body .sb-booking.sb-booking .sbstatus { margin: 12px 0 0; font-weight: var(--pb-ui-weight); } /* Text links with an arrow: the library link is one text run, sb_a adds a span, so no flex gap between them. */ body .sb-booking.sb-booking .tlink { gap: 0; } /* The theme has a global ".light { font-weight: 300 !important }" that hits the library's light button. */ body .sb-booking.sb-booking .btn.light { font-weight: var(--pb-ui-weight) !important; } /* The theme paints placeholders #bbb; the library keeps the browser default. */ body .sb-booking.sb-booking input::placeholder, body .sb-booking.sb-booking textarea::placeholder { color: var(--pb-placeholder); opacity: 1; } /* Branding Sizes: role overrides kept outside the generated category CSS. */ body .sb-booking.sb-booking .cur { font-size: var(--st-type-small) !important; } body .sb-booking.sb-booking .btn { font-size: var(--st-type-body); } body .sb-booking.sb-booking .cal button,body .sb-booking.sb-booking .cal span.d { font-size: var(--st-type-body); } body .sb-booking.sb-booking .field input,body .sb-booking.sb-booking .field textarea,body .sb-booking.sb-booking .field select { font-size: var(--st-type-body); } body .sb-booking.sb-booking .b01 .price { font-size:var(--st-type-display) !important; } body .sb-booking.sb-booking .b03 .day h3 b { font-size: var(--st-type-h3) !important; } body .sb-booking.sb-booking .b05 .cap b { font-size:var(--st-type-h3) !important; } body .sb-booking.sb-booking .b07 .big .cal button,body .sb-booking.sb-booking .b07 .big .cal span.d { font-size: var(--st-type-body) !important; } body .sb-booking.sb-booking .b07 .big .cal button::after { font-size: var(--st-type-body) !important; } body .sb-booking.sb-booking .b08 .days .slot b { font-size: var(--st-type-h3) !important; } body .sb-booking.sb-booking .b11 .row b { font-size:var(--st-type-display) !important; } body .sb-booking.sb-booking .b16 td.n { font-size: var(--st-type-body) !important; } body .sb-booking.sb-booking .b17 .date b { font-size:var(--st-type-h3) !important; } body .sb-booking.sb-booking .b18 .opts b { font-size:var(--st-type-h3) !important; } body .sb-booking.sb-booking .b19 .date b { font-size:var(--st-type-h3) !important; } body .sb-booking.sb-booking h2.h3 { font-size:var(--st-type-h2) !important; } /* 3.6.10: 06's provider note (3.6.9) sat flush on the card's left edge; it takes the card's 40px padding (BKG-06). */ body .sb-booking.sb-booking .b06 .card > p.small { margin: 0; padding: 0 40px; } @media (max-width: 640px) { body .sb-booking.sb-booking .b06 .card > p.small { padding-inline: 24px; } } /* 3.6.10: 05's three capacity cells may shrink and wrap a long figure instead of running under the next cell (BKG-05). */ body .sb-booking.sb-booking .b05 .cap div { min-width: 0; } body .sb-booking.sb-booking .b05 .cap b { overflow-wrap: break-word; line-height: 1.15; } /* Source: cards.fixes.css */ /* The design's "tint" band is the Branding Fifth (tint) color, which base.css clears from the section; paint it here (the looks are edge to edge, so the band keeps the design's full width and padding). */ body .sb-blk.sb-cards.sb-cards .sec.on-tint{background:var(--pb-tint) !important} /* Row backgrounds: ink band = the design's text color; surface = the design's plain white. */ /* Branding Sizes: role overrides kept outside the generated category CSS. */ body .sb-cards.sb-cards .top code { font-size: var(--st-type-small) !important; } body .sb-cards.sb-cards .c10-t { font-size:var(--st-type-h3) !important; } body .sb-cards.sb-cards .c12-i .h2 { font-size:var(--st-type-h2) !important; } body .sb-cards.sb-cards .c14-t { font-size:var(--st-type-h3) !important; } body .sb-cards.sb-cards .c16-n b { font-size:var(--st-type-display) !important; } body .sb-cards.sb-cards .c17-b .h2 { font-size:var(--st-type-h3) !important; } body .sb-cards.sb-cards h3.h2 { font-size:var(--st-type-h3) !important; } /* 3.6.10: without an icon, 09's rows give the text the full width (it fell into the 36px icon column). */ body .sb-cards.sb-cards .c9-row:not(:has(> .ic)) { grid-template-columns: 1fr; } /* 3.6.10: no icon picked, no empty tinted box (CRD-08). */ body .sb-cards.sb-cards .c8-i:not(:has(img, svg)) { display: none; } /* 3.6.10: looks that paint their own band (CRD-04/15/19: the category's page color, a tint or a dark bar of their own) keep their light-row colors on a dark row, so they render the same on every row. The dark row only turned their text white (white on their own light band) and faded their surface color to an 8% tint. */ body .sb-blk.sb-blk.sb-cards.sb-cards.sb-edge.sb-dark:is(.sb-look-04, .sb-look-15, .sb-look-19) { --pb-text: var(--bl-site-text, var(--bl-look-headings)); --pb-muted: var(--bl-site-muted); --pb-border: var(--bl-site-border); --pb-surface: var(--bl-site-surface, var(--bl-site-bg)); --form-label-color: inherit; color: var(--pb-text); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-cards.sb-cards.sb-edge.sb-dark:is(.sb-look-04, .sb-look-15, .sb-look-19) .btn:not(.ghost):not(:is(.dark, .ink, .is-dark, .on-dark) *) { background: var(--bl-site-primary); color: var(--pbd-fallback-on-brand); border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-cards.sb-cards.sb-edge.sb-dark:is(.sb-look-04, .sb-look-15, .sb-look-19) .btn.ghost:not(:is(.dark, .ink, .is-dark, .on-dark) *) { background: transparent; color: var(--bl-site-primary); border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-cards.sb-cards.sb-edge.sb-dark:is(.sb-look-04, .sb-look-15, .sb-look-19) .tlink:not(:is(.dark, .ink, .is-dark, .on-dark, .photo, .ov) *) { color: var(--bl-site-link); } /* 3.6.10: on a dark row the tint panels inside a look (CRD-14/17 cards, FRM-19's intro) fade like its surface color, so the row's white text stays readable on them. */ body .sb-blk.sb-blk.sb-cards.sb-cards.sb-dark:not(.sb-edge) { --pb-tint: color-mix(in srgb, var(--pb-on-dark) 12%, transparent); } /* Source: careers.fixes.css */ /* Careers: framework-only fixes. */ /* Content looks sit on the row's Background (surface or dark), so the look's own tint/dark band must not paint a second box. */ body .sb-blk.sb-careers.sb-careers:not(.sb-edge) .tint, body .sb-blk.sb-careers.sb-careers:not(.sb-edge) .dark{background:transparent} /* Author display rules (grid, flex) beat the [hidden] attribute the filters use. */ body .sb-careers.sb-careers [hidden]{display:none !important} /* The theme caps .section at 1240px; edge bands must touch both screen edges. */ body .sb-careers.sb-careers.sb-edge .section{max-width:none;width:100%} /* Phone table cards: the theme does not set border-box, so padding pushed the card past its column. */ body .sb-careers.sb-careers .c09-t tr{box-sizing:border-box} /* The theme's "p inherits size" rule (!important) shrinks display numerals and pay lines that are

s. */ body .sb-careers.sb-careers .c18-t,body .sb-careers.sb-careers .c04-pay{font-size:var(--st-type-h3) !important} body .sb-careers.sb-careers .c18-n{line-height:.8 !important;margin:0} body .sb-careers.sb-careers .c18-t{line-height:1.25 !important} /* The theme's h3 weight/spacing beat the design's .t3/.tt (500). */ body .sb-careers.sb-careers .t3,body .sb-careers.sb-careers .tt{font-weight:500} body .sb-careers.sb-careers .c19-n{line-height:1 !important;margin:0} /* The design's page sets border-box on everything; the theme does not, so padded cards and rows overflowed their columns. */ body .sb-careers.sb-careers *,body .sb-careers.sb-careers *::before,body .sb-careers.sb-careers *::after{box-sizing:border-box} /* Dark bands: mix borders and muted text with Black; --pb-text is already light there. */ body .sb-careers.sb-careers .dark{--pb-muted:color-mix(in srgb, var(--pb-on-dark) 74%, var(--pb-ink));--pb-border:color-mix(in srgb, var(--pb-on-dark) 20%, var(--pb-ink))} /* Sweep: the theme's p size/line-height (!important) and h3 rules reach into these elements. */ body .sb-careers.sb-careers p.eyebrow{font-size:var(--st-type-label) !important;line-height:1.2 !important} body .sb-careers.sb-careers .c04-pay{line-height:1.2 !important} body .sb-careers.sb-careers .c13-p{line-height:1.1 !important} body .sb-careers.sb-careers .c04-o{font-weight:700;line-height:1.6 !important} /* Design: 960px border-box column with 56px padding = 848px of content, centered. */ body .sb-careers.sb-careers.sb-blk:not(.sb-edge) > .c12 > .c12-w.wrap{max-width:848px !important;margin-inline:auto} body .sb-careers.sb-careers.sb-blk.sb-blk:not(.sb-dark){--pb-surface:var(--pb-tint)} body .sb-careers.sb-careers .c20 .btn{background:var(--pb-on-dark) !important;color:var(--pb-ink) !important} body .sb-careers.sb-careers .c20 .tlink{color:var(--pb-on-dark) !important} /* Branding Sizes: role overrides kept outside the generated category CSS. */ body .sb-careers.sb-careers .btn { font-size: var(--st-type-body) !important; } body .sb-careers.sb-careers .b10-ctl button { font-size: var(--st-type-body) !important; } body .sb-careers.sb-careers .sel select,body .sb-careers.sb-careers .fin { font-size: var(--st-type-body) !important; } body .sb-careers.sb-careers .lb .close { font-size: var(--st-type-body) !important; } body .sb-careers.sb-careers .c02-r h3 { font-size: var(--st-type-h3); } body .sb-careers.sb-careers .c03 .tt { font-size:var(--st-type-h3); } body .sb-careers.sb-careers .c04-o { font-size:var(--st-type-h3) !important; } body .sb-careers.sb-careers .c04-l a { font-size: var(--st-type-h3); } body .sb-careers.sb-careers .c06-h { font-size:var(--st-type-h2) !important; } body .sb-careers.sb-careers .c06 .tt { font-size:var(--st-type-h3); } body .sb-careers.sb-careers .c09-t tbody th { font-size: var(--st-type-h3); } body .sb-careers.sb-careers .c10-l b { font-size:var(--st-type-h3); } body .sb-careers.sb-careers .c12-d summary b { font-size:var(--st-type-h3); } body .sb-careers.sb-careers .c13 .tt { font-size:var(--st-type-h3); } body .sb-careers.sb-careers .c13-p { font-size:var(--st-type-display) !important; } body .sb-careers.sb-careers .c14-l { font-size:var(--st-type-h2); } body .sb-careers.sb-careers .c14 .tt { font-size:var(--st-type-h3); } body .sb-careers.sb-careers .c15-o li::before { font-size:var(--st-type-h3); } body .sb-careers.sb-careers .c16-n b { font-size:var(--st-type-display); } body .sb-careers.sb-careers .c17-q blockquote { font-size: var(--st-type-quote); } body .sb-careers.sb-careers .c17-h { font-size:var(--st-type-h2) !important; } body .sb-careers.sb-careers .c17 .tt { font-size:var(--st-type-h3); } body .sb-careers.sb-careers .c18-n { font-size:var(--st-type-display) !important; } body .sb-careers.sb-careers .c18-l a { font-size: var(--st-type-h3) !important; } body .sb-careers.sb-careers .c19-n { font-size:var(--st-type-display) !important; } body .sb-careers.sb-careers .c20-h { font-size:var(--st-type-h2); } /* 3.6.10: in 04's "Other openings" list the place and type squeezed into a sliver ("Full-/time", CAR-04). The facts keep one line and the role title takes the wrap; phones already stack them. */ @media (min-width: 768px) { body .sb-careers.sb-careers .c04-l li > span { flex: 0 0 auto; white-space: nowrap; } body .sb-careers.sb-careers .c04-l li > a { min-width: 0; } } /* 3.6.10: looks drawn as a dark band (.dark) sit on the row's Background, which paints the band. On a light row their words, rules, buttons and links follow the row (dark text), not white (CAR-09 and CAR-18 printed white on white). On a Secondary row they follow that color's lightness; Main, Black and photo rows keep the white design. */ body .sb-blk.sb-blk.sb-careers.sb-careers:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .dark { --pb-on-dark: var(--pb-text); --pb-muted-on-dark: var(--bl-site-muted); --pb-muted: var(--bl-site-muted); --pb-border: var(--bl-site-border); --pb-rule-on-dark: var(--bl-site-border); color: var(--pb-text); } body .bg-sec .sb-blk.sb-blk.sb-careers.sb-careers:not(.sb-edge):not(.sb-dark) > .dark { --pb-on-dark: oklch(from var(--bl-site-secondary) clamp(0, (0.62 - l) * 1000, 1) 0 0); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-careers.sb-careers:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .dark .btn:not(.ghost) { background: var(--bl-site-primary); color: var(--pbd-fallback-on-brand) !important; border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-careers.sb-careers:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .dark .btn:not(.ghost):hover { background: var(--bl-site-primary); color: var(--pbd-fallback-on-brand) !important; border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-careers.sb-careers:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .dark .btn.ghost { background: transparent; color: var(--bl-site-primary) !important; border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-careers.sb-careers:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .dark .tlink { color: var(--bl-site-link); } /* Source: content.fixes.css */ /* CON-10: the theme's blockquote p size beats the library rule on desktop; restore the h2-scale pull quote. */ @media (min-width:768px){body .sb-content.sb-content .c10-q blockquote p{line-height:1.14 !important}} /* CON-07: the theme resets borders on .copy; restore the vertical hairline beside the note. */ @media (min-width:768px){body .sb-content.sb-content .c07-b{border-left:var(--st-line-w) solid var(--pb-border) !important}} /* The theme resets paragraph size and line height (!important); these paragraphs carry the library's display sizes. */ @media (max-width:767px){body .sb-content.sb-content .c10-q blockquote p{line-height:1.14 !important}} body .sb-content.sb-content .c19-l .c19-sig{font-size:var(--st-type-h3) !important;line-height:1.35 !important} @media (max-width:767px){body .sb-content.sb-content .c08-q p{line-height:1.3 !important}} /* CON-08: links in the text stay underlined (the theme removes it). */ body .sb-content.sb-content .c08-body a{text-decoration:underline !important} /* Branding Sizes: role overrides kept outside the generated category CSS. */ body .sb-content.sb-content .d { font-size:var(--st-type-h2); } body .sb-content.sb-content .btn { font-size: var(--st-type-body); } body .sb-content.sb-content .c04-stats dt { font-size:var(--st-type-display); } body .sb-content.sb-content .c08-first::first-letter { font-size:var(--st-type-display); } body .sb-content.sb-content .c08-q p { font-size: var(--st-type-quote) !important; } body .sb-content.sb-content .c10-q blockquote p { font-size: var(--st-type-quote) !important; } body .sb-content.sb-content .c19-q { font-size: var(--st-type-quote); } /* 3.6.10: the brand-band statement (06) is designed for Background = Main Color; on a light row its white words vanished. There the look paints its own brand panel. */ body .sb-content.sb-content:not(.sb-dark):not(.sb-edge) > .sec.on-primary { background: var(--pb-primary) !important; color: var(--pbd-fallback-on-brand); border-radius: var(--st-photo-r); padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px) !important; } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-content.sb-content .on-primary .btn:not(.ghost) { background: var(--pbd-fallback-on-brand); color: var(--bl-site-primary); border-color: var(--pbd-fallback-on-brand); } /* Source: countdowns.fixes.css */ /* The theme's paragraph reset overrides font shorthands in the library. Restore display text. */ body .sb-countdowns.sb-countdowns .k03-d { font-size: var(--st-type-h3) !important; line-height: 1 !important; } body .sb-countdowns.sb-countdowns .k07-s { font-size: var(--st-type-label) !important; line-height: 1.2 !important; } body .sb-countdowns.sb-countdowns .k07-d { font-size: var(--st-type-h2) !important; line-height: var(--st-lh-head) !important; } body .sb-countdowns.sb-countdowns .k07-c[data-state="ended"] .k07-d { font-size: var(--st-type-h3) !important; } body .sb-countdowns.sb-countdowns .k13-s { font-size: var(--st-type-h1) !important; line-height: var(--st-lh-head) !important; } body .sb-countdowns.sb-countdowns .k14-cd { line-height: var(--st-lh-display) !important; } body .sb-countdowns.sb-countdowns .k15-in, body .sb-countdowns.sb-countdowns .k17-mo { font-size: var(--st-type-h3) !important; line-height: var(--st-lh-h3) !important; } body .sb-countdowns.sb-countdowns p.h { font-size: var(--st-type-h2) !important; line-height: var(--st-lh-head) !important; } /* Keep calendar actions inside the photo band at narrow phone widths. */ @media (max-width: 767px) { body .sb-countdowns.sb-countdowns .k13-s { font-size: var(--st-type-h2) !important; } body .sb-countdowns.sb-countdowns .k02 .acts {gap:var(--st-grid-gap,12px 16px); } } /* The library scopes body overflow to each block; allow the native calendar popup to extend. */ body .sb-countdowns.sb-countdowns { overflow: visible; } @media (min-width: 768px) { body .sb-countdowns.sb-countdowns .cal ul { left: auto; right: 0; } } /* The month view's calendar action sits in the left column at tablet widths. */ @media (min-width: 768px) { body .sb-countdowns.sb-countdowns.sb-look-17 .cal ul { left: 0; right: auto; } } /* The theme resets link underlines; the design underlines the live/ended text links. */ body .sb-countdowns.sb-countdowns p.h > a { text-decoration: underline; } /* sb_a() prints the arrow in its own span; the design has it as part of the link text (one underline, no flex gap). */ body .sb-countdowns.sb-countdowns a:is(.tlink, .btn) > span[aria-hidden="true"] { display: contents; } /* Branding Sizes: role overrides kept outside the generated category CSS. */ body .sb-countdowns.sb-countdowns .d { font-size:var(--st-type-h2); } body .sb-countdowns.sb-countdowns .btn { font-size: var(--st-type-body); } body .sb-countdowns.sb-countdowns .k01-grid .cd-n { font-size:var(--st-type-display) !important; } body .sb-countdowns.sb-countdowns .k02-row .cd-n { font-size:var(--st-type-display) !important; } body .sb-countdowns.sb-countdowns .k04-row .cd-n { font-size:var(--st-type-display) !important; } body .sb-countdowns.sb-countdowns .k04-day { font-size:var(--st-type-display) !important; } body .sb-countdowns.sb-countdowns .k05-r .cd-n { font-size:var(--st-type-display) !important; } body .sb-countdowns.sb-countdowns .k06-tile { font-size:var(--st-type-h3); } body .sb-countdowns.sb-countdowns .k08-cd .cd-n { font-size:var(--st-type-display) !important; } body .sb-countdowns.sb-countdowns .k09-n .cd-n { font-size:var(--st-type-display) !important; } body .sb-countdowns.sb-countdowns .k10-n { font-size:var(--st-type-display); } body .sb-countdowns.sb-countdowns .k11-cd .cd-n { font-size:var(--st-type-display) !important; } body .sb-countdowns.sb-countdowns .k12-rail .cd-n { font-size:var(--st-type-display) !important; } body .sb-countdowns.sb-countdowns .k14-cd { font-size:var(--st-type-display) !important; } body .sb-countdowns.sb-countdowns .k15-dt b { font-size:var(--st-type-h3); } body .sb-countdowns.sb-countdowns .k16-cd .cd-n { font-size:var(--st-type-display) !important; } body .sb-countdowns.sb-countdowns .k18 .cd-n { font-size:var(--st-type-display) !important; } body .sb-countdowns.sb-countdowns .k20-cd .cd-n { font-size:var(--st-type-display) !important; } body .sb-countdowns.sb-countdowns h2.h3 { font-size:var(--st-type-h2) !important; } /* 3.6.10: the Branding Numbers size is wider than the ticket stub (11) and the event card (20): the minutes ran past the card edge (CDN-11/20). Inside those boxes the countdown never grows wider than the box. */ body .sb-countdowns.sb-countdowns :is(.k11-stub, .k20-b) { container-type: inline-size; } body .sb-countdowns.sb-countdowns .k11-cd .cd-n { font-size: min(clamp(calc(var(--st-type-display) * .55), 9.375vw, var(--st-type-display)), 18cqi) !important; } body .sb-countdowns.sb-countdowns .k20-cd .cd-n { font-size: min(clamp(calc(var(--st-type-display) * .55), 9.375vw, var(--st-type-display)), 20cqi) !important; } /* 3.6.10: brand-band countdowns (03, 13, 18) are designed for Background = Main Color; the row paints that color, so on a light row their white numbers vanished (CDN-03/13/18). On a light row the look paints its own brand panel. */ body .sb-countdowns.sb-countdowns:not(.sb-dark):not(.sb-edge) > .sec.on-primary { background: var(--pb-primary) !important; color: var(--pbd-fallback-on-brand); border-radius: var(--st-photo-r); padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px) !important; } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-countdowns.sb-countdowns .on-primary .btn:not(.ghost) { background: var(--pbd-fallback-on-brand); color: var(--bl-site-primary); border-color: var(--pbd-fallback-on-brand); } /* 3.6.10: the inline strip (03) gets a little more air so it reads as a band, not a hairline bar (CDN-03). */ body .sb-countdowns.sb-countdowns .k03 { padding-block: 24px; } /* Source: ctas.fixes.css */ /* Content looks have their .ink/.pri/.sur background removed (the row paints it), and a dark row turns --pb-text light, so the library's "light button on ink" would be light on light. Keep the button light with dark text. */ body .sb-ctas.sb-ctas.sb-dark .ink .btn { background: var(--pb-on-dark); color: var(--pb-ink); } /* The arrow follows the text like the design's "Text →": the helper prints a no-break space and a span, and .tlink's flex gap made it wide. The arrow glyph is not in the Branding font's latin subset; the library page falls back to the system UI font. */ body .sb-ctas.sb-ctas :is(.tlink, .big){gap:0} body .sb-ctas.sb-ctas :is(.tlink, .big) span[aria-hidden]{font-family:var(--pb-body-font,system-ui, sans-serif)} /* 14: the theme resets paragraph size; the quote is the h3 size. */ /* 03: the text half lines up with the framework's sections at every width (base.css --sb-side). */ body .sb-ctas.sb-ctas .c3-text{padding-left:var(--sb-side)} @media (max-width:900px){body .sb-ctas.sb-ctas .c3-text{padding-inline:var(--sb-side)}} /* Branding Sizes: role overrides kept outside the generated category CSS. */ body .sb-ctas.sb-ctas .btn { font-size: var(--st-type-body); } body .sb-ctas.sb-ctas .inp { font-size: var(--st-type-body) !important; } body .sb-ctas.sb-ctas .c5-door h3 { font-size:var(--st-type-h3); } body .sb-ctas.sb-ctas .c6 h2.hd { font-size:var(--st-type-h3) !important; } body .sb-ctas.sb-ctas .c13-stats b { font-size:var(--st-type-display); } body .sb-ctas.sb-ctas .c14 blockquote p { font-size: var(--st-type-quote) !important; } body .sb-ctas.sb-ctas .c16-track span { font-size:var(--st-type-h2); } body .sb-ctas.sb-ctas .c19-steps .n { font-size:var(--st-type-display); } body .sb-ctas.sb-ctas .c20 .note { font-size: var(--st-type-quote) !important; } body .sb-ctas.sb-ctas .c20 .sig b { font-size:var(--st-type-h3) !important; } /* 3.6.10: brand-color looks (.pri) are designed for Background = Main Color; the row paints that color, so on a light row their white text vanished (CTA-02/14). On a light row the look paints its own brand panel. */ body .sb-ctas.sb-ctas:not(.sb-dark):not(.sb-edge) > .blk.pri { background: var(--pb-primary) !important; color: var(--pbd-fallback-on-brand); border-radius: var(--st-photo-r); padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px) !important; } /* A fill button on its own brand panel is the panel's color; the library puts a light button there (CTA-03). */ body .sb-blk.sb-blk.sb-blk.sb-blk.sb-ctas.sb-ctas .pri .btn:not(.ghost) { background: var(--pbd-fallback-on-brand); color: var(--bl-site-primary); border-color: var(--pbd-fallback-on-brand); } /* 04: the card is Branding Secondary; its words follow it (dark on a light card, light on a dark one). */ body .sb-ctas.sb-ctas .c4-card { --c4-on: oklch(from var(--pb-secondary) clamp(0, (0.62 - l) * 1000, 1) 0 0); color: var(--c4-on); } body .sb-blk.sb-blk.sb-blk.sb-ctas.sb-ctas .c4-card :is(.hd, .lead, .tlink) { color: var(--c4-on); } /* 3.6.10: 14's quote fills half the band; at the full Quotes size it ran seven lines of three words. */ body .sb-ctas.sb-ctas .c14 blockquote p { font-size: min(var(--st-type-quote), max(26px, 2.5vw)) !important; } /* 3.6.10: CTA-20's note is a personal note in the design (lead size, about 20-26px), not a pull quote; the Branding Sizes pass printed it at the full Quotes size (a nine-line wall on desktop, three words a line on a phone) and the signature name at Medium. Both go back to the design's proportions: note at Lead (scaled up a little on wide screens), name at Copy. */ body .sb-ctas.sb-ctas .c20 .note { font-size:var(--st-type-lead) !important; } body .sb-ctas.sb-ctas .c20 .sig b { font-size: var(--st-type-body) !important; } /* 3.6.10: a Secondary row is not one of the dark rows the bridge marks (.sb-dark), so on a dark Secondary color the look's sentence, checklist and links kept the dark body and link colors (CTA-08 on the Luma test: 2.2:1). Looks that sit on the row follow that color's lightness; panels painted in the text color (.ink), brand panels (.pri) and photo panels keep their own colors. Edge looks paint their own band (CTA-10, CTA-12) and keep their light-row colors. */ body .bg-sec .sb-blk.sb-blk.sb-ctas.sb-ctas:not(.sb-dark):not(.sb-edge) { --sb-on-sec: oklch(from var(--bl-site-secondary) clamp(0, (0.62 - l) * 1000, 1) 0 0); --pb-text: var(--sb-on-sec); --pb-muted: color-mix(in srgb, var(--sb-on-sec) 88%, var(--bl-site-secondary)); --pb-border: color-mix(in srgb, var(--sb-on-sec) 22%, transparent); color: var(--pb-text); } body .bg-sec .sb-blk.sb-blk.sb-ctas.sb-ctas:not(.sb-dark):not(.sb-edge) :is(.ink, .pri, .photo) { --pb-text: var(--bl-site-text, var(--pb-ink)); } body .bg-sec .sb-blk.sb-blk.sb-blk.sb-ctas.sb-ctas:not(.sb-dark):not(.sb-edge) .tlink:not(:is(.ink, .pri, .photo, .ov) *) { color: var(--sb-on-sec); } /* On a Secondary row the brand panel's button label (Main) printed in the button's own color (CTA-02/14); it takes the panel's brand color, which the panel itself paints. */ body .bg-sec .sb-blk.sb-blk.sb-blk.sb-blk.sb-ctas.sb-ctas .pri .btn:not(.ghost) { color: var(--pb-primary); } /* 3.6.10: a dark Secondary row now counts as dark (.sb-dark). CTA-10 and CTA-12 paint their own light band there, so they keep their light-row colors, as they did before (white words on their light band otherwise). CTA-12's top line stays light: it sits on the look's own brand strip (the measure reads the block's white behind it as 1.0:1). */ body .bg-sec .sb-blk.sb-blk.sb-blk.sb-ctas.sb-ctas.sb-edge.sb-dark:is(.sb-look-10, .sb-look-12) { --pb-text: var(--bl-site-text, var(--bl-look-headings)); --pb-muted: var(--bl-site-muted); --pb-border: var(--bl-site-border); --pb-surface: var(--bl-site-surface, var(--bl-site-bg)); --form-label-color: inherit; color: var(--pb-text); } body .bg-sec .sb-blk.sb-blk.sb-blk.sb-blk.sb-ctas.sb-ctas.sb-edge.sb-dark:is(.sb-look-10, .sb-look-12) .btn:not(.ghost) { background: var(--bl-site-primary); color: var(--pbd-fallback-on-brand); border-color: var(--bl-site-primary); } body .bg-sec .sb-blk.sb-blk.sb-blk.sb-blk.sb-ctas.sb-ctas.sb-edge.sb-dark:is(.sb-look-10, .sb-look-12) .btn.ghost { background: transparent; color: var(--bl-site-primary); border-color: var(--bl-site-primary); } body .bg-sec .sb-blk.sb-blk.sb-blk.sb-blk.sb-ctas.sb-ctas.sb-edge.sb-dark:is(.sb-look-10, .sb-look-12) .tlink { color: var(--bl-site-link); } /* Source: data.fixes.css */ body .sb-blk.sb-data.sb-data .dark{background:var(--pb-ink);color:var(--pb-on-dark)} /* DAT-20: the design's photo carries height="960" and the generated CSS can't cancel it, so it renders 960px tall; match it. */ body .sb-data.sb-data .folio-top figure img{height:960px} /* Only configured recommendations override the historical second-column treatment. */ body .sb-data.sb-data .cc-recommended th, body .sb-data.sb-data .cc-recommended td { background: transparent; border-left: 0; border-right: 0; } body .sb-data.sb-data .focus-matrix .cc-recommended thead th:not(:first-child) { font-size: var(--st-type-h3) !important; } body .sb-data.sb-data .cc-recommended .is-recommended { background: var(--pb-surface); border-inline: var(--st-line-w) solid var(--pb-primary); } body .sb-data.sb-data .cc-recommended thead th.is-recommended { border-top: 3px solid var(--pb-primary); font-size: var(--st-type-h2) !important; } /* Branding Sizes: role overrides kept outside the generated category CSS. */ body .sb-data.sb-data .stat h3 { font-size:var(--st-type-h3); } body .sb-data.sb-data .quartet .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .lead-number .primary .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .lead-number .secondary .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .photo-count .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .inverted .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .ledger .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .columns-chart .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .rings .stat .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .progress-list .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .billboard .primary .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .billboard .grid3 .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .segments .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .panorama-facts .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .constellation .stat .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .rail-layout .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .word-led .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .word-led .stat h3 { font-size:var(--st-type-h3); } body .sb-data.sb-data .photo-field .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .spine-layout .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .receipt .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .ribbons .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .lead-cells dd { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .value { font-size:var(--st-type-display) !important; } body .sb-data.sb-data .rings .value { font-size:var(--st-type-display) !important; } /* 3.6.10: 10 with one group of rows shows one full-width table (half the band stayed empty). */ body .sb-data.sb-data .paired-tables:has(> table:only-child) { grid-template-columns: 1fr; } /* 3.6.10: DAT-20's folio photo is a landscape picture beside the intro; a global image height stretched it into a tall strip that left the intro column mostly empty. */ body .sb-data.sb-data .folio-top figure { align-self: start; } body .sb-data.sb-data .folio-top figure img { height: auto !important; aspect-ratio: 3 / 2; object-fit: cover; } /* 3.6.10: looks drawn as a dark band (.dark) sit on the row's Background, which paints the band. On a light row their words, rules, buttons and links follow the row (dark text), not white (DAT-11 printed white on white). On a Secondary row they follow that color's lightness; Main, Black and photo rows keep the white design. */ body .sb-blk.sb-blk.sb-data.sb-data:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .dark { --pb-on-dark: var(--pb-text); --pb-muted-on-dark: var(--bl-site-muted); --pb-muted: var(--bl-site-muted); --pb-border: var(--bl-site-border); --pb-rule-on-dark: var(--bl-site-border); color: var(--pb-text); } body .bg-sec .sb-blk.sb-blk.sb-data.sb-data:not(.sb-edge):not(.sb-dark) > .dark { --pb-on-dark: oklch(from var(--bl-site-secondary) clamp(0, (0.62 - l) * 1000, 1) 0 0); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-data.sb-data:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .dark .btn:not(.ghost) { background: var(--bl-site-primary); color: var(--pbd-fallback-on-brand) !important; border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-data.sb-data:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .dark .btn:not(.ghost):hover { background: var(--bl-site-primary); color: var(--pbd-fallback-on-brand) !important; border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-data.sb-data:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .dark .btn.ghost { background: transparent; color: var(--bl-site-primary) !important; border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-data.sb-data:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .dark .tlink { color: var(--bl-site-link); } /* Source: dividers-utility.fixes.css */ /* Dividers and utility: framework-only fixes (the category file is hand written; this file holds later fixes). */ /* 3.6.10: looks that paint their own pale paper band (01, 04, 06, 08, 13, 14, 17) keep dark type on a dark row background; on a dark band their white title sat on the pale paper (DIV-04, DIV-06). */ body .sb-dividers-utility.sb-dividers-utility.sb-dark:is(.sb-look-01, .sb-look-04, .sb-look-06, .sb-look-08, .sb-look-13, .sb-look-14, .sb-look-17) { --pb-text: var(--bl-site-text, var(--bl-look-headings)); --pb-muted: var(--bl-site-muted, #6b6b73); --pb-border: var(--bl-site-border); --pb-surface: var(--bl-site-surface, var(--bl-site-bg)); --dv-ink: var(--pb-text); --dv-surface: var(--pb-surface); color: var(--dv-ink); } /* 3.6.10: DIV-12's title took the Titles size inside a 30px line, so the sentence under it ran into it. An announcement bar title stays bar-sized. */ body .sb-dividers-utility.sb-dividers-utility.sb-blk .d12-h { font-size:var(--st-type-h3) !important; line-height: 1.15 !important; } body .sb-dividers-utility.sb-dividers-utility .d12-t { margin-top: 8px; } /* 3.6.10: DIV-06 at the Branding Huge size (the design's word was 200px) filled a 70px strip edge to edge, so the faint word read as a cut-off smudge. The word gets room above and below and a little more ink. */ body .sb-dividers-utility.sb-dividers-utility .d06 { padding-block: clamp(20px, 3vw, 44px); } body .sb-dividers-utility.sb-dividers-utility .d06-w { line-height: 1 !important; color: color-mix(in srgb, var(--dv-ink) 22%, transparent); } /* 3.6.10: looks that paint their own dark bar (09, 10, 12, 15, 19) keep their light-row colors on a dark row: the row turned their ink white (DIV-10's bar went white) and their light words into an 8% tint (DIV-12, DIV-19). */ body .sb-dividers-utility.sb-dividers-utility.sb-dark:is(.sb-look-09, .sb-look-10, .sb-look-12, .sb-look-15, .sb-look-19) { --pb-text: var(--bl-site-text, var(--bl-look-headings)); --pb-surface: var(--bl-site-surface, var(--bl-site-bg)); --dv-ink: var(--pb-text); --dv-surface: var(--pb-surface); } /* Source: email-rows.fixes.css */ /* Email rows: framework-only fixes. */ /* 3.6.10: the consent row (3.6.9) was styled only in look 16; elsewhere it printed tiny, with the link in the page's dark link color, unreadable on the dark panels (EML-05). Every look gets the readable row, in its own text colors. */ body .sb-email-rows.sb-email-rows .e:not(.e16) .ef-consent { display: flex; align-items: center;gap:var(--st-grid-gap,10px); min-height: 44px; margin-top: 10px; font-size: var(--st-type-small); line-height: 1.4; color: var(--e-mut); cursor: pointer; } body .sb-email-rows.sb-email-rows .e:not(.e16) .ef-consent span { font-size: var(--st-type-small) !important; } body .sb-email-rows.sb-email-rows .e:not(.e16) .ef-consent input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: currentColor; } body .sb-email-rows.sb-email-rows .e:not(.e16) .ef-consent a { color: inherit; font-weight: var(--pb-ui-weight); text-decoration: underline; text-underline-offset: 3px; min-height: 0; } body .sb-email-rows.sb-email-rows .e:is(.e04, .e05, .e06, .e09, .e10, .e11, .e18) .ef-consent { color: color-mix(in srgb, var(--e-bg) 82%, transparent); } /* 3.6.10: looks that paint their own band (EML-02/04/05/06/07/14/17: the category's page color, a tint or a dark bar of their own) keep their light-row colors on a dark row, so they render the same on every row. The dark row only turned their text white (white on their own light band) and faded their surface color to an 8% tint. */ body .sb-blk.sb-blk.sb-email-rows.sb-email-rows.sb-edge.sb-dark:is(.sb-look-02, .sb-look-04, .sb-look-05, .sb-look-06, .sb-look-07, .sb-look-14, .sb-look-17) { --pb-text: var(--bl-site-text, var(--bl-look-headings)); --pb-muted: var(--bl-site-muted); --pb-border: var(--bl-site-border); --pb-surface: var(--bl-site-surface, var(--bl-site-bg)); --form-label-color: inherit; color: var(--pb-text); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-email-rows.sb-email-rows.sb-edge.sb-dark:is(.sb-look-02, .sb-look-04, .sb-look-05, .sb-look-06, .sb-look-07, .sb-look-14, .sb-look-17) .btn:not(.ghost):not(:is(.dark, .ink, .is-dark, .on-dark) *) { background: var(--bl-site-primary); color: var(--pbd-fallback-on-brand); border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-email-rows.sb-email-rows.sb-edge.sb-dark:is(.sb-look-02, .sb-look-04, .sb-look-05, .sb-look-06, .sb-look-07, .sb-look-14, .sb-look-17) .btn.ghost:not(:is(.dark, .ink, .is-dark, .on-dark) *) { background: transparent; color: var(--bl-site-primary); border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-email-rows.sb-email-rows.sb-edge.sb-dark:is(.sb-look-02, .sb-look-04, .sb-look-05, .sb-look-06, .sb-look-07, .sb-look-14, .sb-look-17) .tlink:not(:is(.dark, .ink, .is-dark, .on-dark, .photo, .ov) *) { color: var(--bl-site-link); } /* Source: events.fixes.css */ /* Events: framework-only fixes. */ /* Content looks sit on the row's Background (surface or dark), so the look's own band must not paint a second box. */ body .sb-blk.sb-events.sb-events:not(.sb-edge) .is-surface, body .sb-blk.sb-events.sb-events:not(.sb-edge) .is-dark{background:transparent} /* The theme caps .section at 1240px; the edge bands must touch both screen edges. */ body .sb-events.sb-events.sb-edge .section{max-width:none;width:100%} /* sb_a() prints a non-breaking space before the arrow and the link already has a gap: close the double space. */ body .sb-events.sb-events .tlink>span[aria-hidden]{margin-left:-.4em} /* The theme's "p inherits size" rule (!important) shrinks the month name, a

. */ body .sb-events.sb-events .v11-m .h1{font-size:var(--st-type-h1) !important} /* Time numerals are

s: the theme's "p inherits size" rule (!important) shrinks them. */ body .sb-events.sb-events .v12-day .tm,body .sb-events.sb-events .v18-tm{font-size:var(--st-type-h3) !important} /* The design's palette: red accent and white cards. Branding's main (green) and fourth (cream) would recolor buttons, date cards and panels. */ body .sb-events.sb-events .v13-nav .cc-month-nav { display: inline-flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; padding: 8px; } body .sb-events.sb-events .v13-nav .cc-month-nav:focus-visible { outline: 0; background: var(--pb-surface); } /* Branding Sizes: role overrides kept outside the generated category CSS. */ body .sb-events.sb-events .btn { font-size: var(--st-type-body); } body .sb-events.sb-events .v2-h { font-size:var(--st-type-h2); } body .sb-events.sb-events .v3-d { font-size:var(--st-type-display) !important; } body .sb-events.sb-events .v4-date .d { font-size:var(--st-type-h3); } body .sb-events.sb-events .v5-stub .d { font-size:var(--st-type-h3); } body .sb-events.sb-events .v6-md .d { font-size:var(--st-type-h3); } body .sb-events.sb-events .v7-card .d { font-size:var(--st-type-h3); } body .sb-events.sb-events .v8-tile .d { font-size:var(--st-type-h3); } body .sb-events.sb-events .v9-tile .d { font-size:var(--st-type-h3) !important; } body .sb-events.sb-events .v10-n { font-size:var(--st-type-display); } body .sb-events.sb-events .v11-g .dt b { font-size:var(--st-type-h3); } body .sb-events.sb-events .v12-strip button .d { font-size:var(--st-type-h3); } body .sb-events.sb-events .v13-nav button { font-size: var(--st-type-body); } body .sb-events.sb-events .v13-cal .n { font-size: var(--st-type-body); } body .sb-events.sb-events .v13-agenda .d { font-size:var(--st-type-h3); } body .sb-events.sb-events .v14-hd .d { font-size:var(--st-type-h3); } body .sb-events.sb-events .v15-tm { font-size:var(--st-type-h3) !important; } body .sb-events.sb-events .v16-tb .tm { font-size:var(--st-type-h3) !important; } body .sb-events.sb-events .v17-n { font-size:var(--st-type-display); } body .sb-events.sb-events .v19-cd dd { font-size:var(--st-type-display); } body .sb-events.sb-events .v20-list .ti { font-size: var(--st-type-h3); } body .sb-events.sb-events .v20-list .ar { font-size: var(--st-type-body) !important; } body .sb-events.sb-events h3.h2 { font-size:var(--st-type-h3) !important; } /* Missing durations use a readable agenda instead of invented one-hour blocks. */ body .sb-events.sb-events .v14-agenda-only .v14-ag{display:block} body .sb-events.sb-events .v14-agenda-only .v14-ag section{padding:14px 0 28px;border-top:2px solid var(--pb-text)} body .sb-events.sb-events .v14-agenda-only .v14-ag h3{display:flex;justify-content:space-between;gap:var(--st-grid-gap,16px)} body .sb-events.sb-events .v14-agenda-only .v14-ag li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--st-grid-gap,16px);padding:12px 0} /* 3.6.10 fit pass: EVT-05's ticket was 6/13 of the row with a 210px stub, so the title broke over three lines ("Proof / EVT- / 05"); the ticket now takes the wider share and its title sits at the Medium size. */ @media (min-width:861px){ body .sb-events.sb-events .v5-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} body .sb-events.sb-events .v5-ticket{grid-template-columns:minmax(0,1fr) 180px} body .sb-events.sb-events .v5-main .h2{font-size:var(--st-type-h3) !important} } /* EVT-16: the room column took what the big class names left and broke "Main Hall" one word per line. */ @media (min-width:861px){ body .sb-events.sb-events .v16-tb td:last-child{white-space:nowrap} } /* EVT-18: "5:30 PM" broke under the number in the 130px time column while "8:15 PM" fit; times stay on one line. */ @media (min-width:861px){ body .sb-events.sb-events .v18-tm{white-space:nowrap;font-size:var(--st-type-h3) !important} } /* 3.6.10: looks that paint their own band (EVT-14: the category's page color, a tint or a dark bar of their own) keep their light-row colors on a dark row, so they render the same on every row. The dark row only turned their text white (white on their own light band) and faded their surface color to an 8% tint. */ body .sb-blk.sb-blk.sb-events.sb-events.sb-edge.sb-dark:is(.sb-look-14) { --pb-text: var(--bl-site-text, var(--bl-look-headings)); --pb-muted: var(--bl-site-muted); --pb-border: var(--bl-site-border); --pb-surface: var(--bl-site-surface, var(--bl-site-bg)); --form-label-color: inherit; color: var(--pb-text); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-events.sb-events.sb-edge.sb-dark:is(.sb-look-14) .btn:not(.ghost):not(:is(.dark, .ink, .is-dark, .on-dark) *) { background: var(--bl-site-primary); color: var(--pbd-fallback-on-brand); border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-events.sb-events.sb-edge.sb-dark:is(.sb-look-14) .btn.ghost:not(:is(.dark, .ink, .is-dark, .on-dark) *) { background: transparent; color: var(--bl-site-primary); border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-events.sb-events.sb-edge.sb-dark:is(.sb-look-14) .tlink:not(:is(.dark, .ink, .is-dark, .on-dark, .photo, .ov) *) { color: var(--bl-site-link); } /* Source: faqs.fixes.css */ /* faqs: the generated CSS has no base .intro rule (the design page's was dropped); restore the stacked intro. */ body .sb-faqs.sb-faqs .intro { display: grid; gap: var(--st-stack-gap, 24px); align-content: start; } body .sb-faqs.sb-faqs .topline .intro { display: contents; } /* theme h3 styling beats the small sans category label */ body .sb-faqs.sb-faqs h3.category, body .sb-faqs.sb-faqs span.category { font-family: var(--pb-body-font) !important; font-weight: 600 !important; color: var(--pb-primary) !important; text-transform: none; } /* theme removes link underlines; the design underlines the contact link and topic jump links */ body .sb-faqs.sb-faqs .contact, body .sb-faqs.sb-faqs .topic-nav a { text-decoration: underline; } /* edge look: the theme's .section caps width at 1240px and centers it; the band must reach both edges */ body .sb-faqs.sb-faqs.sb-look-17 > .f17 { max-width: none; width: 100%; margin-inline: 0; } /* Row backgrounds: the design's ink band is its text color, and its surface is a slight tint of the page color; the stock Black/Surface rows are pure black and near white. */ /* FAQ-07 phone: the heading block stacks as one grid like the design (the desktop display: contents spreads it into the topline grid). */ @media (max-width: 767px) { body .sb-faqs.sb-faqs .topline .intro { display: grid; } } /* Branding Sizes: role overrides kept outside the generated category CSS. */ body .sb-faqs.sb-faqs summary { font-size: var(--st-type-h3) !important; } body .sb-faqs.sb-faqs .f09 .lead-question h3 { font-size:var(--st-type-h3) !important; } body .sb-faqs.sb-faqs .f16 .hero-answer h3 { font-size:var(--st-type-h3) !important; } body .sb-faqs.sb-faqs .f20 summary { font-size: var(--st-type-h3) !important; } /* 3.6.10: looks drawn as a dark band (.ink) sit on the row's Background, which paints the band. On a light row their words, rules, buttons and links follow the row (dark text), not white (FAQ-11 printed white on white). On a Secondary row they follow that color's lightness; Main, Black and photo rows keep the white design. */ body .sb-blk.sb-blk.sb-faqs.sb-faqs:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .ink { --pb-on-dark: var(--pb-text); --pb-muted-on-dark: var(--bl-site-muted); --pb-muted: var(--bl-site-muted); --pb-border: var(--bl-site-border); --pb-rule-on-dark: var(--bl-site-border); color: var(--pb-text); } body .bg-sec .sb-blk.sb-blk.sb-faqs.sb-faqs:not(.sb-edge):not(.sb-dark) > .ink { --pb-on-dark: oklch(from var(--bl-site-secondary) clamp(0, (0.62 - l) * 1000, 1) 0 0); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-faqs.sb-faqs:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .ink .btn:not(.ghost) { background: var(--bl-site-primary); color: var(--pbd-fallback-on-brand) !important; border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-faqs.sb-faqs:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .ink .btn:not(.ghost):hover { background: var(--bl-site-primary); color: var(--pbd-fallback-on-brand) !important; border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-blk.sb-faqs.sb-faqs:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .ink .btn.ghost { background: transparent; color: var(--bl-site-primary) !important; border-color: var(--bl-site-primary); } body .sb-blk.sb-blk.sb-blk.sb-faqs.sb-faqs:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .ink .tlink { color: var(--bl-site-link); } /* Source: forms.fixes.css */ /* forms: selects use the owner's chevron rule (appearance:none, inline SVG on the right, padding-right >= 40px); replaces the design's CSS-border arrow. */ body .sb-forms.sb-forms label:has(>select)::after { content: none; } body .sb-forms.sb-forms select { -webkit-appearance: none; appearance: none; padding-right: 48px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 14px 9px; } /* required marker, help text and radio/checkbox groups (not in the design) */ body .sb-forms.sb-forms .req { color: var(--pb-primary); } body .sb-forms.sb-forms .help { font-weight: 400; color: var(--pb-muted); font-size: var(--st-type-small); } body .sb-forms.sb-forms fieldset.opts { border: 0; margin: 0; padding: 0; display: grid;gap:var(--st-grid-gap,4px); min-width: 0; } body .sb-forms.sb-forms fieldset.opts legend { font-size: var(--st-type-label); font-weight: 500; padding: 0 0 8px; } /* theme: submit button is a