.container{width:min(var(--container),calc(100% - 2*var(--space-5)));margin-inline:auto} .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 var(--space-6);border-radius:var(--radius-chip);font-weight:700;border:1.5px solid transparent;cursor:pointer;transition:transform .12s ease,background .16s ease} .btn:hover{transform:translateY(-1px)} .btn-primary{color:#fff;background:var(--ink)} .btn-primary:hover{background:var(--ink-dark)} .site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .header-inner{display:flex;align-items:center;gap:var(--space-6);padding:var(--space-4) 0} .topnav{display:flex;gap:var(--space-5);margin-left:auto;font-weight:600} .topnav a{color:var(--ink);border-radius:var(--radius-nav);padding:var(--space-1) var(--space-2)} .topnav a:hover{color:var(--accent)} .topnav a[aria-current="page"]{color:var(--accent)} .nav-toggle{display:none;margin-left:auto;flex-direction:column;gap:4px;background:none;border:0;padding:var(--space-2);cursor:pointer;border-radius:var(--radius-nav)} .nav-toggle span{display:block;width:22px;height:2px;background:var(--ink)} .mobilenav{display:none;flex-direction:column;padding:var(--space-3) var(--space-5) var(--space-5);border-top:1px solid var(--line);background:var(--card)} .mobilenav a{padding:var(--space-3) 0;font-weight:600;border-bottom:1px solid var(--line)} .mobilenav[hidden]{display:none} .site-footer{margin-top:var(--space-7);background:var(--ink);color:var(--line)} .footer-inner{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);align-items:center;padding:var(--space-7) 0} .footer-brand{font-family:var(--font-heading);font-weight:800;margin:0} .footer-nav{display:flex;gap:var(--space-5);margin-left:auto} .footer-nav a:hover{color:#fff} .footer-legal{width:100%;color:var(--muted);font-size:var(--text-small);margin:var(--space-4) 0 0} @media (max-width:820px){ .topnav{display:none} .header-inner .btn-primary{display:none} .nav-toggle{display:flex} .mobilenav:not([hidden]){display:flex} } /* =========================================================================== Sun State International — site design layer The tokens carry colour, type and spacing; this file carries the handful of structural decisions the handoff makes that tokens alone cannot express: the 48px page gutter, the 90px section rhythm, hard-edged chrome, and the contrast rules for text on the near-black chrome and the red accent bands. Everything below is scoped to platform block classes or to a node id. =========================================================================== */ /* The handoff sets text-wrap: pretty on , so every heading and paragraph on the site is laid out with it. It is the reason its headings break where they do — without it the same text, at the same size in the same box, keeps one more word on the first line and strands the last. */ body { text-wrap: pretty; } /* --- Page gutter ----------------------------------------------------------- blocks.css pins a section's container to --space-4; the handoff's gutter is 48px / 32px / 20px, which is what layout.padDesktop et al. already record. */ .bz-section > .bz-container { padding-inline: var(--container-pad); } @media (max-width: 1100px) { .bz-section > .bz-container { padding-inline: var(--container-pad-tablet); } } @media (max-width: 640px) { .bz-section > .bz-container { padding-inline: var(--container-pad-mobile); } } /* --- Section rhythm -------------------------------------------------------- The handoff's own token says 120px, but the sections it draws almost all use 90 (68 of them) with 80 and 100 next; 120 appears nowhere. Sections ask for the band rhythm with paddingY 10, so that is what 10 means here. 8 and 9 stay 64/80 for tighter bands. */ :root { --space-10: 90px; } /* The handoff separates the dark *chrome* (#141414 — header, footer, the type rail, the legal hero) from --color-ink (#242424), which is body text and the contact band. The platform has one ink token, so the chrome values live here. */ :root { --chrome: #141414; --chrome-line: #333333; --chrome-text: #EDEDED; --chrome-body: #C7C1B4; --chrome-meta: #A0A0A0; --chrome-label: #8A8A8A; --chrome-dim: #B5B5B5; --body-text: #3f3f3f; } @media (max-width: 640px) { :root { --space-8: 48px; --space-9: 56px; --space-10: 64px; } } /* --- Block padding --------------------------------------------------------- blocks.css opens every block with 16px of vertical padding. The handoff sets its rhythm with margins on the headings and gaps on the grids instead, so the padding doubles every gap it participates in. Zeroing it here puts the two models back in step; spacing that is wanted is asked for explicitly. */ .bz-block { padding-block: 0; } /* --- Type ------------------------------------------------------------------ */ body { color: #242424; font-size: var(--text-body); line-height: var(--leading-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); letter-spacing: normal; } /* The handoff tracks in only its display headings: 32 of them carry -.01em and not one of its 227 section headings does. */ .bz-block h1 { letter-spacing: -0.01em; } .bz-block h2, .bz-block h3, .bz-block h4 { letter-spacing: normal; } .bz-block h1 { font-size: var(--text-h1); line-height: 1.05; } .bz-block h2 { font-size: var(--text-h2); line-height: 1.6; } .bz-block h3 { font-size: var(--text-h3); } @media (max-width: 1100px) { .bz-block h1 { font-size: 46px; } } @media (max-width: 640px) { .bz-block h1 { font-size: 30px; } .bz-block h2 { font-size: 28px; } .bz-block h3 { font-size: 24px; } } /* The handoff's eyebrow: tracked-out micro-label, muted on light, not accent. */ .bz-block .bz-eyebrow, .bz-eyebrow { font: 700 var(--text-eyebrow) / 1 var(--font-body); letter-spacing: 0.16em; color: var(--muted); margin-bottom: 18px; } .bz-section--bg-ink .bz-eyebrow, .bz-col--bg-ink .bz-eyebrow { color: #E2E2E2; } .bz-section--bg-accent .bz-eyebrow { color: rgba(255,255,255,.9); } .bz-lede { color: #3f3f3f; font-size: var(--text-body); line-height: 1.7; max-width: 62ch; } .bz-section--bg-ink .bz-lede, .bz-lede--on-dark { color: #C7C1B4; } .bz-block p { line-height: 1.7; } /* --- Colour on dark chrome and on the accent band -------------------------- The handoff states these as their own tokens rather than opacities so the contrast is explicit; keep them explicit here too. */ .bz-section--bg-ink, .bz-col--bg-ink { color: #EDEDED; } .bz-section--bg-ink p, .bz-col--bg-ink p { color: #C7C1B4; } .bz-section--bg-accent, .bz-col--bg-accent { color: #fff; } .bz-section--bg-accent :is(h1,h2,h3,h4,h5,h6), .bz-col--bg-accent :is(h1,h2,h3,h4,h5,h6) { color: #fff; } .bz-section--bg-accent a, .bz-col--bg-accent a { color: #fff; } /* --- Buttons --------------------------------------------------------------- One primitive, hard edges, display face at 700, hover darkens the fill. There is no scale or bounce anywhere in this system. */ .bz-btn { min-height: 46px; padding: 0 16px; border-radius: 0; gap: 8px; /* base.css sets .btn in --font-display: the all-caps display face IS the button style here, not a text-transform. Only .btn--secondary and .btn--ghost drop back to the body face (below). */ font: 700 var(--text-small) / 1.6 var(--font-heading); } /* A component's optional button is a CTA with an empty label when the placement leaves it out; the renderer still emits the anchor. Hide the empty ones. */ .bz-btn:empty { display: none; } /* Every CTA on the site, primary or secondary, on any band: white with black text and an 8px corner, turning orange (--accent-dark) with white text when hovered, pressed or focused. This is the "Built a spec?" band's look, drawn once here so no page or component paints its own. The 1px black edge keeps a white button visible on a white or light-grey band; on a dark band it disappears into the background. The white is a literal because a dark page redefines --card as a dark grey, and the doubled class outranks the renderer's transparent secondary on a dark hero. */ .bz-btn:is(.bz-btn--primary, .bz-btn--secondary) { background: #fff; color: #000; border: 1px solid #000; border-radius: 8px; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .bz-btn:is(.bz-btn--primary, .bz-btn--secondary):is(:hover, :active, :focus-visible) { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; } .bz-btn:is(.bz-btn--primary, .bz-btn--secondary):focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; } .bz-btn--link { /* A text link in this design is text, not a box: the base button's 1.5px transparent border would add 3px to its height. */ min-height: 0; padding: 0; border: 0; background: none; color: var(--accent); text-decoration: none; } .bz-btn--link:hover { text-decoration: underline; text-underline-offset: 3px; } .bz-btn--on-dark.bz-btn--link { color: #fff; } /* --- Form controls --------------------------------------------------------- */ .bz-input, .bz-field select, .bz-field textarea { min-height: 50px; border-radius: 0; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); font-family: var(--font-body); font-size: 15px; } .bz-field textarea { min-height: 140px; } /* The handoff sets a form on the page rather than in a card, repeats no title, and pairs the short fields two to a row. */ .bz-form { background: none; border: 0; border-radius: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; } .bz-form__t { display: none; } .bz-field { grid-column: span 1; gap: 8px; } .bz-field:has(textarea), .bz-field--consent, .bz-field--hp { grid-column: 1 / -1; } .bz-form > button, .bz-form__status, .bz-form > .bz-btn { grid-column: 1 / -1; justify-self: start; } .bz-label { font: 700 11px / 1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } @media (max-width: 640px) { .bz-form { grid-template-columns: minmax(0, 1fr); } .bz-field { grid-column: 1 / -1; } } .bz-label { font: 700 var(--text-eyebrow) / 1.4 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .bz-req { color: var(--accent); } /* --- Cards and rules ------------------------------------------------------- Resting surfaces separate with a 1px line, never a shadow; shadow is for floating chrome only. */ .bz-card, .bz-quick, .bz-service, .bz-person, .bz-post, .bz-quote { border-radius: 0; border: 1px solid var(--line); background: var(--card); box-shadow: none; } .bz-hr { border-color: var(--line); } /* --- FAQ accordion --------------------------------------------------------- The handoff draws 132 of these; the platform's faq widget renders native
, which needs no script and is open-able in the editor. */ /* The handoff's FAQ band holds a 900px well; every page's is the same shape. */ .bz-section:has(.bz-faqs) { padding-block: 100px; } .bz-section:has(.bz-faqs) > .bz-container { max-width: calc(900px + 2 * var(--container-pad)); } @media (max-width: 640px) { .bz-section:has(.bz-faqs) { padding-block: 64px; } } .bz-section:has(.bz-faqs) .bz-block h2 { font-size: 32px; margin-bottom: 40px; } .bz-section:has(.bz-faqs) .bz-eyebrow { margin-bottom: 18px; } .bz-faqs { border-top: 1px solid var(--line); gap: 0; } .bz-faq { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; } .bz-faq > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 22px 0; cursor: pointer; list-style: none; font: 700 17px / 1.6 var(--font-heading); color: var(--ink); } .bz-faq > summary::-webkit-details-marker { display: none; } .bz-faq > summary::after { content: "+"; font-weight: 400; font-size: 22px; color: var(--accent); line-height: 1; transition: transform .18s ease; } .bz-faq[open] > summary::after { transform: rotate(45deg); } .bz-block .bz-faq__a { margin-top: 0; padding: 0 0 24px; color: var(--body-text); font-size: 15px; line-height: 1.7; max-width: 760px; } /* --- Photography ----------------------------------------------------------- Every photograph in the handoff is still a slot. The placeholder art ships as an image so each one stays a real, replaceable image block on the canvas. */ img[src$="photo-placeholder.svg"] { width: 100%; height: 100%; object-fit: cover; background: #D8D8D8; } /* --- Hero ------------------------------------------------------------------ Scrim at rgba(20,20,20,.68), per the handoff's --scrim-hero. */ .bz-block--hero { position: relative; background: var(--chrome); color: #fff; padding-block: 96px; text-align: center; } .bz-hero__img { opacity: 1; } .bz-block--hero .bz-hero__bg::after { content: ""; position: absolute; inset: 0; background: rgba(20,20,20,.68); pointer-events: none; } .bz-block--hero .bz-hero__copy { max-width: 960px; margin-inline: auto; } .bz-block--hero h1, .bz-block--hero h2 { color: #fff; font-size: 44px; line-height: 1.14; letter-spacing: -0.01em; margin: 0 0 20px; } .bz-block--hero .bz-hero__sub { color: #E2E2E2; font-size: 17px; line-height: 1.7; max-width: 700px; margin: 0 auto 30px; } .bz-block--hero .bz-eyebrow { color: #E2E2E2; margin-bottom: 22px; } .bz-block--hero .bz-btns { justify-content: center; gap: 14px; margin-block: 0; } .bz-block--hero .bz-btn { min-height: 48px; padding: 0 26px; } @media (max-width: 1100px) { .bz-block--hero { padding-block: 72px; } .bz-block--hero h1, .bz-block--hero h2 { font-size: 36px; } } @media (max-width: 640px) { .bz-block--hero { padding-block: 56px; } .bz-block--hero h1, .bz-block--hero h2 { font-size: 30px; } } /* --- Chrome: header, utility bar, footer ----------------------------------- */ .bz-menu--horizontal .bz-nav, .bz-menu--mega .bz-nav { gap: var(--space-4); } .bz-navitem > a, .bz-navlabel { font-family: var(--font-body); font-weight: 600; } .bz-menu--mega .bz-nav > .bz-navitem > a { padding: 8px 10px; } .bz-subnav { border-radius: 0; box-shadow: 0 12px 30px rgba(0,0,0,.18); } /* --- Image blocks that fill their node ------------------------------------ An image block nests block > container > figure > img. A `height: 100%` on the figure resolves against the container, so the container has to carry the height too or the picture keeps its intrinsic 16:9 and leaves a gap. With an auto-height block all three resolve to auto, so this is inert everywhere it is not wanted. */ .bz-block--image > .bz-container, .bz-block--image .bz-figure { height: 100%; } .bz-block--image .bz-figure { margin: 0; } /* --- Stacked rows collapse to one track ---------------------------------- blocks.css stacks a row by setting `grid-column: 1 / -1` on its columns, but the row keeps twelve tracks and eleven gaps. At this site's 48px gap and 20px mobile gutter that is 528px of gap inside a 350px container, so the row runs off the side of a phone. Collapsing the template to a single track at the same breakpoints the platform stacks at fixes it without touching the renderer. (Worth reporting: the same arithmetic bites any site whose gap is larger than about a twelfth of the mobile content width.) */ @media (max-width: 640px) { .bz-row--stack-tablet, .bz-row--stack-mobile { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 641px) and (max-width: 1100px) { .bz-row--stack-tablet { grid-template-columns: minmax(0, 1fr); } } /* --- Testimonial cards ---------------------------------------------------- The handoff draws a plain white card with a rule, the quote at 15px and the attribution under it. Stars are not part of that design, so they are hidden here and shown again only where a page actually rates something. */ .bz-quote { border-radius: 0; padding: 32px; display: flex; flex-direction: column; gap: 18px; } .bz-quote blockquote { font-size: 15px; line-height: 1.7; color: #3f3f3f; margin: 0 } .bz-quote figcaption { gap: 4px } .bz-quote__n { font: 700 13px/1.4 var(--font-body); color: var(--ink) } .bz-quote__r { font-size: 13px; color: var(--muted) } .bz-stars { display: none } /* --- Stat bands ----------------------------------------------------------- Three figures with a tracked-out caps label, the way the handoff sets them: the number in ink at display weight, the label small and muted, each in its own bordered card across the full width of the band. blocks.css draws this block as a dark two-column claim-and-figures split; the handoff's is a plain row of cards on the page, so the split is undone here. */ .bz-block--statBand { background: none; color: inherit; padding-block: 0; } .bz-block--statBand .bz-band { display: block; } .bz-block--statBand .bz-stat { border: 0; padding: 32px 28px; background: var(--ink); } .bz-block--statBand .bz-stats { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } .bz-block--statBand .bz-stat__v { color: #fff; } .bz-block--statBand .bz-stat__l { color: var(--chrome-meta); letter-spacing: 0.14em; } .bz-stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-6) } .bz-stat__v { font: 800 38px/1 var(--font-heading); color: var(--ink) } .bz-stat__l { font: 700 11px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 12px; } .bz-section--bg-ink .bz-stat__v { color: #fff } .bz-section--bg-ink .bz-stat__l { color: #A0A0A0 } /* --- Inventory listing cards --------------------------------------------- The live inventory widget's card, dressed as the handoff's listing card: photo, title, price, spec chips and a hard-edged rule around it. */ .bz-card { border-radius: 0; overflow: hidden; display: flex; flex-direction: column; height: 100% } .bz-card img, .bz-card .bz-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover } .bz-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px } .bz-card__t { font: 800 17px/1.3 var(--font-heading); color: var(--ink); text-transform: uppercase } .bz-card__m { font: 800 22px/1 var(--font-heading); color: var(--ink) } .bz-card__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 } .bz-card__facts > div { display: inline-flex; align-items: baseline; gap: 5px; border: 1px solid var(--line); padding: 6px 9px; font-size: 12px; color: var(--muted); } .bz-card__facts dt { order: 2; font-weight: 400 } .bz-card__facts dd { order: 1; margin: 0; font-weight: 700; color: var(--ink) } /* --- Feature lists --------------------------------------------------------- The handoff draws a `list` as a ruled column of plain statements, not a grid of titled cards: a hairline above each item, 15px body copy, no heading face. blocks.css sets the item title on an

, which `.bz-block h3` then sizes at the display step, so these have to win on specificity. */ .bz-block--list .bz-grid { gap: 0 24px; } .bz-feature { border-top: 1px solid var(--line); padding: 16px 0; } .bz-block .bz-feature__t { font: 400 15px / 1.5 var(--font-body); color: var(--body-text); margin: 0; } .bz-block .bz-feature__d { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0; } /* --- Responsive steps, taken from the handoff's own two breakpoints ---------- The handoff drops .grid-3 and .grid-4 to two-up below 1100px and every grid to one-up below 640px, and keeps its 48px page gutter until 640px. The platform's own breakpoints are the same two widths. A column's span is an inline custom property, so these steps have to outrank it. Rows the author marked "never stack" — the header and utility bars — are left alone. */ @media (min-width: 641px) and (max-width: 1100px) { .bz-row:not(.bz-row--stack-never):not(.bz-row--stack-tablet) > .bz-col[style*="--bz-span:3"], .bz-row:not(.bz-row--stack-never):not(.bz-row--stack-tablet) > .bz-col[style*="--bz-span:4"] { --bz-span: 6 !important; } } /* Below 640px the handoff sets every section heading to 26px, whatever size it carries at desktop. Two attributes so a page's own desktop size, set at (0,1,1), does not keep winning here. */ @media (max-width: 640px) { .bz-section .bz-block h2 { font-size: 26px; } } /* The FAQ band sets its own 32px heading at a higher specificity, so the 26px mobile step has to be said again at that weight. */ @media (max-width: 640px) { .bz-section:has(.bz-faqs) .bz-block h2 { font-size: 26px; } } /* --- Band content width ---------------------------------------------------- The handoff draws two band geometries and the split is exact: all 93 bands with no background cap the SECTION at 1280px, so the 48px gutter eats into it and their content is 1184 wide; all 54 bands that paint a background (paper, ink, chrome) put the gutter on the section and a 1280px wrapper inside it, so their colour runs full-bleed and their content is a full 1280. A white/card band is never one of the 54 - it has no background to bleed. */ .bz-section--bg-paper > .bz-container, .bz-section--bg-ink > .bz-container, .bz-section--bg-accent > .bz-container { max-width: calc(1280px + 2 * var(--container-pad)); } @media (max-width: 1100px) { .bz-section--bg-paper > .bz-container, .bz-section--bg-ink > .bz-container, .bz-section--bg-accent > .bz-container { max-width: calc(1280px + 2 * var(--container-pad-tablet)); } } @media (max-width: 640px) { .bz-section--bg-paper > .bz-container, .bz-section--bg-ink > .bz-container, .bz-section--bg-accent > .bz-container { max-width: calc(1280px + 2 * var(--container-pad-mobile)); } } /* --- Mega panel anchoring -------------------------------------------------- blocks.css centres the viewport-wide panel on its trigger (left:50%; translateX(-50%); width:100vw), which only lands correctly when the trigger happens to sit mid-viewport. This header's nav is right-aligned, so every panel was offset by its trigger's position and ran off the right edge - "Location Details" by 446px. Worth reporting upstream: any right- or left-aligned mega nav hits this. So the panel is hung off the nav list rather than off the item that owns it: the item goes out of the positioning flow and the