/* ========================================================================== sections2.css — v2 design-rebuild styles. Owner: Agent E. Loaded AFTER sections.css, so everything here wins. Covers: the v2 block types (chevron_band, subnav_band, product_card, cta_banner, split_panel, logo_grid, contact_split, site_footer, hero_billboard, quote_form v2 field markup) plus v2 skins for the reused v1 blocks (gallery on /events, download_list on /downloads, richtext / heading headers). Colours ALWAYS come from the theme custom props so the admin colour pickers keep working: --c-bg --c-accent --c-text --c-muted --c-surface --c-panel (site.css declares fallbacks for all six; theme_css_vars() in may override them.) ========================================================================== */ :root { /* v2 rhythm */ --v2-max: 1240px; /* wide content column (product cards, footer) */ --v2-band-h: 62px; /* chevron / subnav band height */ --v2-pad-x: 20px; /* chromatic offset print effect used on band + panel headlines */ --v2-chroma: 3px 3px 0 rgba(10, 189, 240, 0.30), -3px -3px 0 rgba(254, 1, 1, 0.30); --v2-chroma-sm: 2px 2px 0 rgba(10, 189, 240, 0.32), -2px -2px 0 rgba(254, 1, 1, 0.32); } /* -------------------------------------------------------------------------- Full-bleed reset — sections.css gives every .blk 3.25rem padding and caps its children at 980px. The v2 bands/panels run edge to edge and manage their own inner column. -------------------------------------------------------------------------- */ .blk-chevron_band, .blk-subnav_band, .blk-hero_billboard, .blk-product_card, .blk-cta_banner, .blk-split_panel, .blk-logo_grid, .blk-contact_split, .blk-site_footer, .blk-quote_form, .blk-download_list { padding: 0; } .blk-chevron_band > *, .blk-subnav_band > *, .blk-hero_billboard > *, .blk-product_card > *, .blk-cta_banner > *, .blk-split_panel > *, .blk-logo_grid > *, .blk-contact_split > *, .blk-site_footer > *, .blk-quote_form > *, .blk-download_list > * { max-width: none; margin-inline: 0; } /* ========================================================================== CHEVRON TAPE Pure CSS: two half-height repeating gradients whose black stripes are centred on the tile (25%..75%), which makes the pattern symmetric about the gradient origin — so the top "\" arms and bottom "/" arms always meet in a clean apex whatever the band height. ========================================================================== */ .chev, .dl-group-title::before, .dl-group-title::after { background-color: var(--c-accent); background-image: repeating-linear-gradient(45deg, transparent 0 7.5px, #000 7.5px 26.5px, transparent 26.5px 34px), repeating-linear-gradient(-45deg, transparent 0 7.5px, #000 7.5px 26.5px, transparent 26.5px 34px); background-size: 100% 50%; background-position: left top, left bottom; background-repeat: no-repeat; } /* -------------------------------------------------------------------------- CHEVRON BAND .chev-band > .chev.chev-l + .cb-label + .chev.chev-r -------------------------------------------------------------------------- */ .chev-band { display: flex; align-items: stretch; min-height: var(--v2-band-h); background: var(--c-accent); border-top: 2px solid rgba(72, 40, 130, 0.85); border-bottom: 2px solid rgba(72, 40, 130, 0.85); overflow: hidden; } .chev-band .chev { flex: 1 1 0; min-width: 40px; } .chev-band .cb-label { flex: 0 0 auto; display: flex; align-items: center; padding: 12px 30px; color: #000; font-weight: 800; font-size: clamp(1rem, 2.1vw, 1.85rem); line-height: 1.1; letter-spacing: 0.005em; text-transform: uppercase; text-align: center; text-shadow: var(--v2-chroma); } a.chev-band-link { display: flex; } a.chev-band-link:hover .cb-label, a.chev-band-link:focus-visible .cb-label { color: #1a1a1a; } /* -------------------------------------------------------------------------- SUBNAV BAND nav.subnav-band > a -------------------------------------------------------------------------- */ .subnav-band { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; min-height: var(--v2-band-h); background: var(--c-accent); } .subnav-band a { position: relative; display: flex; align-items: center; padding: 14px 30px; color: #000; font-weight: 800; font-size: clamp(0.95rem, 1.55vw, 1.4rem); letter-spacing: 0.005em; text-transform: uppercase; transition: opacity 0.15s ease; } .subnav-band a + a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 26px; background: #000; } .subnav-band a:hover, .subnav-band a:focus-visible { opacity: 0.62; } /* ========================================================================== HERO BILLBOARD .hero-billboard > .hb-media(img.hb-img) + .hb-copy The intro line ("PUT A STAGE ON YOUR") is burnt into the photo in the client's artwork, so the box is locked to the photo's 16:9 ratio and the rotating word is positioned in percentages — it stays glued to the burnt-in text at every width. ========================================================================== */ .hero-billboard { position: relative; width: 100%; aspect-ratio: 1920 / 1080; overflow: hidden; background: var(--c-bg); } .hb-media, .hb-media img.hb-img { position: absolute; inset: 0; width: 100%; height: 100%; } .hb-media img.hb-img { object-fit: cover; object-position: center; } .hb-copy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 10% 4% 0 35.5%; pointer-events: none; } .hb-lines { color: var(--c-accent); font-weight: 900; text-transform: uppercase; line-height: 1.15; font-size: clamp(0.9rem, 2.4vw, 2.1rem); } .hb-rotator { display: grid; justify-items: start; align-items: center; } .hb-word { grid-area: 1 / 1; opacity: 0; transition: opacity 0.5s ease; color: var(--c-accent); font-weight: 900; font-size: clamp(1.5rem, 6.25vw, 6.5rem); line-height: 1.2; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; text-shadow: var(--v2-chroma); } .hb-word.is-active { opacity: 1; } .hb-link { position: absolute; inset: 0; } /* ========================================================================== PRODUCT CARD .product-card > .pc-tabs(button.pc-tab) + .pc-panes > .pc-pane .pc-pane[main] > .pc-carousel(.pc-slide img.pc-img + .pc-dots) + .pc-overlay(h2.pc-title + .pc-tagline) + .pc-desc + .pc-actions ========================================================================== */ .product-card { background: var(--c-bg); } /* ---- tab strip: yellow band, active tab reads as a notch cut into it ---- */ .pc-tabs { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 8px; background: var(--c-accent); padding: 16px var(--v2-pad-x) 0; } .pc-tab { background: var(--c-accent); color: #000; border: 2px solid #000; border-bottom: 0; border-radius: 14px 14px 0 0; padding: 15px 34px; font-weight: 800; font-size: clamp(0.8rem, 1.1vw, 1rem); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; transition: background-color 0.15s ease, color 0.15s ease; } .pc-tab:hover:not(.is-active) { background: #fff; } .pc-tab.is-active { background: var(--c-bg); border-color: var(--c-bg); color: var(--c-accent); padding-block: 19px 17px; } /* ---- pane shell: black at the top fading into the charcoal card ------- */ .pc-panes { background-color: var(--c-bg); background-image: linear-gradient( 180deg, transparent 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.19) 100% ); } .pc-pane { max-width: var(--v2-max); margin-inline: auto; padding-inline: var(--v2-pad-x); } .pc-pane[hidden] { display: none; } /* ---- main pane: photo left, olive panel bleeding over its right edge --- */ .pc-pane[data-pane="main"] { display: grid; grid-template-columns: 57% 43%; align-items: start; padding-block: 52px 68px; } .pc-carousel { position: relative; grid-column: 1; grid-row: 1 / span 3; } .pc-slide { display: none; } .pc-slide.is-active { display: block; } .pc-slide img.pc-img { width: 100%; height: auto; aspect-ratio: 687 / 557; object-fit: cover; display: block; } .pc-dots { display: flex; justify-content: center; gap: 12px; padding-top: 22px; } .pc-dot { width: 8px; height: 8px; background: #6d6d6a; border: 0; padding: 0; border-radius: 1px; } .pc-dot.is-active { background: var(--c-accent); } .pc-overlay { position: relative; isolation: isolate; grid-column: 2; grid-row: 1; margin: 44px 18% 0 -37%; padding: 26px 34px 32px; } .pc-overlay::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-panel); opacity: 0.92; } .pc-title { color: var(--c-text); font-weight: 800; font-size: clamp(2rem, 5.6vw, 5.1rem); line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; } .pc-tagline { margin-top: 0.5em; color: var(--c-text); font-weight: 300; font-size: clamp(1rem, 2.4vw, 2.25rem); line-height: 1.15; text-transform: uppercase; } .pc-desc { grid-column: 2; grid-row: 2; padding: 26px 19% 0 12%; color: var(--c-muted); font-size: 0.95rem; line-height: 1.5; text-align: left; } .pc-desc p + p { margin-top: 0.8em; } .pc-actions { grid-column: 2; grid-row: 3; padding: 24px 19% 0 12%; text-align: center; } /* ---- SPECS / OVERVIEW panes (plain rich text on the card) -------------- */ /* NB: the renderer also puts .richtext on this node — undo its uppercase / letterspacing so the prose panes read normally. */ .pc-tabbody { padding-block: 46px 66px; color: var(--c-muted); font-size: 1rem; line-height: 1.6; letter-spacing: 0; text-transform: none; max-width: 900px; margin-inline: auto; } .pc-tabbody h3 { color: var(--c-accent); font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.5rem); text-transform: uppercase; letter-spacing: 0.02em; margin-top: 1.9em; } .pc-tabbody h3:first-child { margin-top: 0; } .pc-tabbody h4 { color: var(--c-text); font-weight: 800; font-size: 1.02rem; text-transform: uppercase; margin-top: 1.3em; } .pc-tabbody p { margin-top: 0.7em; } .pc-tabbody ul { margin-top: 0.8em; } .pc-tabbody li { position: relative; padding-left: 20px; margin-bottom: 0.5em; } .pc-tabbody li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background: var(--c-accent); } .pc-tabbody strong { color: var(--c-text); font-weight: 800; } .pc-tabbody a { color: var(--c-accent); font-weight: 800; } /* ========================================================================== CTA BANNER .cta-banner > .ctab-copy + a.btn-solid.ctab-btn ========================================================================== */ .cta-banner { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 58px clamp(20px, 5vw, 70px); background-color: var(--c-bg); background-size: cover; background-position: center; background-repeat: no-repeat; text-align: center; align-items: center; } .ctab-align-left { text-align: left; align-items: flex-start; } .ctab-align-right { text-align: right; align-items: flex-end; } .ctab-copy { max-width: 1100px; } .ctab-copy h3 { color: var(--c-accent); font-weight: 800; font-size: clamp(1.5rem, 3.1vw, 2.7rem); line-height: 1.14; letter-spacing: 0.005em; text-transform: uppercase; } .ctab-copy h4 { color: var(--c-text); font-weight: 800; font-size: clamp(1.1rem, 2.1vw, 1.7rem); line-height: 1.2; text-transform: uppercase; } .ctab-copy p { color: var(--c-text); font-weight: 300; font-size: clamp(1rem, 1.9vw, 1.55rem); line-height: 1.3; text-transform: uppercase; } .ctab-copy h3 + p, .ctab-copy p + p, .ctab-copy h3 + h3 { margin-top: 0.35em; } /* Rich-text is limited to p/strong/em/u/h3/h4 — these are the v2 "colour roles" the seeded copy relies on. */ .ctab-copy strong { color: var(--c-accent); font-weight: 800; } .ctab-copy em { color: var(--c-accent); font-weight: 300; font-style: normal; } .ctab-copy u { color: var(--c-text); font-weight: 300; text-decoration: none; } .ctab-btn { flex: 0 0 auto; } /* ========================================================================== SPLIT PANEL .split-panel.sp-media-{left|right}.spl-bg-{accent|surface|photo} ========================================================================== */ .split-panel { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; padding-block: 54px; background-size: cover; background-position: center; background-repeat: no-repeat; } .spl-bg-accent { background-color: var(--c-accent); } .spl-bg-surface { background-color: var(--c-surface); } .spl-bg-photo { background-color: var(--c-bg); } .spl-media { position: relative; z-index: 2; } .spl-media img.spl-img { width: 100%; height: auto; display: block; } .spl-copy { position: relative; z-index: 1; } /* --- the yellow "about" panels: pale inset card + overlapping photo ----- */ .spl-bg-accent .spl-copy { background-color: var(--c-accent); background-image: linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)); padding: 54px 56px; color: #000; font-size: clamp(0.9rem, 1.25vw, 1.06rem); line-height: 1.42; text-transform: uppercase; font-weight: 400; } .spl-bg-accent .spl-copy p + p { margin-top: 0.25em; } .spl-bg-accent .spl-copy strong { font-weight: 800; font-size: 1.3em; line-height: 1.15; text-shadow: var(--v2-chroma-sm); } .spl-bg-accent .spl-copy em { font-style: normal; display: block; height: 1.1em; } .sp-media-left.spl-bg-accent .spl-media { grid-row: 1; grid-column: 1 / 6; margin-left: 4%; } .sp-media-left.spl-bg-accent .spl-copy { grid-row: 1; grid-column: 4 / 10; padding-left: 46%; text-align: left; } .sp-media-right.spl-bg-accent .spl-media { grid-row: 1; grid-column: 7 / 13; margin-right: 5%; } .sp-media-right.spl-bg-accent .spl-copy { grid-row: 1; grid-column: 1 / 9; margin-left: 5%; padding-right: 46%; text-align: right; } /* --- generic (surface / photo) split: simple two-up ---------------------- */ .spl-bg-surface .spl-media, .spl-bg-photo .spl-media { grid-row: 1; } .spl-bg-surface .spl-copy, .spl-bg-photo .spl-copy { grid-row: 1; padding: 40px clamp(20px, 4vw, 60px); } .sp-media-left.spl-bg-surface .spl-media, .sp-media-left.spl-bg-photo .spl-media { grid-column: 1 / 7; } .sp-media-left.spl-bg-surface .spl-copy, .sp-media-left.spl-bg-photo .spl-copy { grid-column: 7 / 13; } .sp-media-right.spl-bg-surface .spl-media, .sp-media-right.spl-bg-photo .spl-media { grid-column: 7 / 13; } .sp-media-right.spl-bg-surface .spl-copy, .sp-media-right.spl-bg-photo .spl-copy { grid-column: 1 / 7; } .spl-bg-photo .spl-copy h3, .spl-bg-surface .spl-copy h3 { color: var(--c-text); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 2rem); text-transform: uppercase; line-height: 1.15; } /* ========================================================================== LOGO GRID .logo-grid.lg-cols-N > .lg-head + .lg-grid > figure.lg-item ========================================================================== */ .logo-grid { display: grid; grid-template-columns: minmax(190px, 1fr) 2.1fr; gap: 44px; align-items: start; max-width: var(--v2-max); margin-inline: auto; padding: 74px var(--v2-pad-x) 86px; background: var(--c-bg); } .lg-head { color: var(--c-accent); font-weight: 800; font-size: clamp(1.05rem, 1.85vw, 1.55rem); line-height: 1.55; letter-spacing: 0.01em; text-transform: uppercase; } .lg-head h3, .lg-head h4, .lg-head p { font: inherit; color: inherit; } .lg-grid { display: grid; gap: 12px; } .lg-cols-2 .lg-grid { grid-template-columns: repeat(2, 1fr); } .lg-cols-3 .lg-grid { grid-template-columns: repeat(3, 1fr); } .lg-cols-4 .lg-grid { grid-template-columns: repeat(4, 1fr); } .lg-cols-5 .lg-grid { grid-template-columns: repeat(5, 1fr); } .lg-item { background: #fff; aspect-ratio: 1 / 0.92; display: grid; place-items: center; padding: 14px; overflow: hidden; } .lg-item img.lg-img, .lg-link img.lg-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .lg-link { display: grid; place-items: center; width: 100%; height: 100%; } /* ========================================================================== CONTACT SPLIT .contact-split > .cs-left + .cs-right(form.qf-form) ========================================================================== */ .blk-contact_split { position: relative; overflow: hidden; } .blk-contact_split::before { content: ""; position: absolute; left: -10%; top: 4%; width: 78%; height: 92%; background: radial-gradient(ellipse at 42% 52%, rgba(46, 62, 200, 0.40), rgba(20, 20, 90, 0.16) 46%, transparent 70%); pointer-events: none; } .contact-split { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; max-width: var(--v2-max); margin-inline: auto; padding: 84px var(--v2-pad-x) 96px; } .cs-left { position: relative; text-align: right; min-height: 470px; } .cs-title { color: var(--c-accent); font-weight: 800; font-size: clamp(1.9rem, 4.1vw, 3.5rem); line-height: 1.05; text-transform: uppercase; } .cs-sub { margin-top: 0.35em; color: var(--c-text); font-weight: 300; font-size: clamp(1rem, 1.75vw, 1.45rem); text-transform: uppercase; } .cs-photo { position: absolute; left: 0; top: 128px; width: 68%; z-index: 0; } .cs-photo img.cs-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; } .cs-social-row { position: relative; z-index: 2; display: flex; justify-content: flex-end; gap: 16px; margin-top: 76px; } .cs-social-ic { color: var(--c-text); } .cs-social-ic svg { width: 32px; height: 32px; } .cs-social-ic:hover { color: var(--c-accent); } .cs-lines { position: relative; z-index: 2; margin-top: 34px; color: var(--c-text); } .cs-lines p { margin-bottom: 22px; font-weight: 300; font-size: clamp(1rem, 1.5vw, 1.3rem); } .cs-lines strong { display: block; color: var(--c-accent); font-weight: 800; font-size: clamp(1.05rem, 1.6vw, 1.35rem); text-transform: uppercase; } .cs-lines a { color: var(--c-text); } .cs-lines a:hover { color: var(--c-accent); } .cs-right { border: 1px solid rgba(255, 255, 255, 0.9); padding: 34px 34px 40px; background: rgba(0, 0, 0, 0.35); } /* ========================================================================== QUOTE FORM — v2 field markup (quote_fields_v2) .qf-field > .qf-lbl + input | .qf-row-2 > .qf-half > input + .qf-sublbl ========================================================================== */ .blk-quote_form .quote-form:not([style*="background-image"]) { background: none; padding: 66px var(--v2-pad-x) 96px; max-width: 1000px; margin-inline: auto; } .qf-form { color: var(--c-text); } .blk-quote_form .qf-form, .blk-quote_form .qf-status { max-width: 380px; margin-inline: auto; } .qf-field { margin-bottom: 22px; } .qf-lbl { display: block; margin-bottom: 8px; color: var(--c-text); font-weight: 400; font-size: 0.9rem; letter-spacing: 0.03em; text-transform: uppercase; } .qf-req { color: #e0533f; } .qf-form input[type="text"], .qf-form input[type="email"], .qf-form input[type="tel"], .qf-form input[type="date"], .qf-form textarea { width: 100%; background: #141414; border: 1px solid rgba(255, 255, 255, 0.92); color: var(--c-text); padding: 9px 11px; font-size: 0.98rem; border-radius: 0; } .qf-form textarea { resize: vertical; min-height: 110px; } .qf-form input:focus-visible, .qf-form textarea:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; } .qf-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .qf-half { display: block; } .qf-sublbl { display: block; margin-top: 6px; color: var(--c-muted); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; } .qf-hint { display: block; margin-top: 6px; color: var(--c-muted); font-size: 0.72rem; } .qf-inline { display: flex; align-items: center; gap: 12px; } .qf-inline input { max-width: 140px; } .qf-suffix { color: var(--c-text); font-size: 0.85rem; letter-spacing: 0.04em; } .qf-field-event_date input, .qf-field-show_days input { max-width: 175px; } .qf-checks { border: 0; margin: 0 0 26px; padding: 0; } .qf-checks legend { padding: 0; margin-bottom: 12px; color: var(--c-text); font-size: 0.9rem; letter-spacing: 0.03em; text-transform: uppercase; } .qf-checks .qf-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 11px; color: var(--c-accent); font-size: 0.9rem; letter-spacing: 0; line-height: 1.3; cursor: pointer; } .qf-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 15px; height: 15px; margin: 1px 0 0; border: 1px solid var(--c-text); background: transparent; border-radius: 0; cursor: pointer; } .qf-check input[type="checkbox"]:checked { background: var(--c-accent); border-color: var(--c-accent); } .qf-checks.qf-checks-single .qf-check { color: var(--c-text); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.9rem; } .qf-submit { margin-top: 32px; text-align: center; } .qf-submit-btn { min-width: 178px; font-weight: 400; letter-spacing: 0.05em; } .qf-status { margin-top: 14px; color: var(--c-accent); font-size: 0.92rem; text-align: center; } .qf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* the contact-page form sits inside its own bordered card */ .cs-form .qf-submit { text-align: center; } /* ========================================================================== SITE FOOTER (v2) ========================================================================== */ .site-footer { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "brand links" "social social" "copy copy"; gap: 26px 40px; align-items: start; max-width: var(--v2-max); margin-inline: auto; padding: 58px var(--v2-pad-x) 34px; background: var(--c-bg); } .sf-brand { grid-area: brand; display: flex; align-items: center; gap: 22px; } .sf-logo-box { display: inline-flex; flex-direction: column; gap: 1px; border: 2px solid var(--c-text); padding: 12px 14px; color: var(--c-text); line-height: 1; text-transform: uppercase; } .sf-logo-box > span { display: block; font-size: 1.5rem; letter-spacing: 0.005em; } .sfw-b { font-weight: 800; } .sfw-l { font-weight: 300; } .sf-l1 .sfw-l, .sf-l3 .sfw-b { margin-left: 0.28em; } .sf-contact { display: flex; flex-direction: column; gap: 4px; } .sf-phone, .sf-email { color: var(--c-text); font-size: 0.95rem; font-weight: 300; } .sf-phone:hover, .sf-email:hover { color: var(--c-accent); } .sf-links { grid-area: links; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; } .sf-links-row { display: flex; flex-wrap: wrap; justify-content: flex-end; } .sf-links-row a { position: relative; padding: 0 15px; color: var(--c-accent); font-size: 0.88rem; letter-spacing: 0.05em; text-transform: uppercase; } .sf-links-row a + a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: var(--c-accent); opacity: 0.75; } .sf-links-row a:hover { color: var(--c-text); } .sf-social { grid-area: social; display: flex; justify-content: center; gap: 22px; margin-top: 22px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.85); } .sf-ic { color: var(--c-text); } .sf-ic svg { width: 30px; height: 30px; } .sf-ic:hover { color: var(--c-accent); } .sf-copy { grid-area: copy; text-align: center; color: var(--c-muted); font-size: 0.72rem; letter-spacing: 0.02em; } /* the fallback footer never shows on v2 pages, but keep it out of the way */ body .site-footer-fallback { background: var(--c-bg); color: var(--c-muted); } /* ========================================================================== DOWNLOAD LIST — v2 skin: each group title becomes a chevron band and the file boxes ride on top of it. ========================================================================== */ .dl-groups { display: block; gap: 0; padding-block: 0; } .dl-group { position: relative; display: grid; grid-template-columns: 1fr; align-items: center; gap: 0; padding-block: 34px; } /* v1 drew a 1px accent rule behind the row — the v2 band replaces it */ .dl-group::before { display: none; } .dl-group-title { grid-area: 1 / 1; display: flex; align-items: stretch; padding: 0; white-space: normal; min-height: var(--v2-band-h); background: var(--c-accent); border-top: 2px solid rgba(72, 40, 130, 0.85); border-bottom: 2px solid rgba(72, 40, 130, 0.85); color: #000; font-weight: 800; font-size: clamp(1rem, 2.1vw, 1.85rem); letter-spacing: 0.005em; text-transform: uppercase; text-shadow: var(--v2-chroma); overflow: hidden; } .dl-group-title::before, .dl-group-title::after { content: ""; align-self: stretch; min-width: 40px; } .dl-group-title::before { flex: 1 1 0; margin-right: 26px; } .dl-group-title::after { flex: 1 1 0; margin-left: 26px; } /* boxes on the left → push the label right, and vice-versa */ .dl-group-left .dl-group-title::before { flex-grow: 2.6; } .dl-group-right .dl-group-title::after { flex-grow: 2.6; } .dl-items { grid-area: 1 / 1; z-index: 2; display: flex; flex-wrap: wrap; gap: 18px; padding-inline: clamp(20px, 6%, 90px); } .dl-group-left .dl-items { justify-content: flex-start; } .dl-group-right .dl-items { justify-content: flex-end; } .dl-box { display: grid; place-items: center; width: 200px; height: auto; min-height: 200px; padding: 14px; background: var(--c-bg); border: 2px solid var(--c-accent); color: var(--c-text); font-weight: 800; font-size: 0.92rem; letter-spacing: 0.02em; line-height: 1.25; text-align: center; text-transform: uppercase; transition: background-color 0.15s ease, color 0.15s ease; } .dl-box:hover, .dl-box:focus-visible { background: var(--c-accent); color: #000; } /* olive stage-light glow behind the downloads page */ body.page-downloads .site-main { background-image: radial-gradient( ellipse 900px 620px at 50% 26%, rgba(130, 148, 10, 0.30), rgba(60, 68, 5, 0.10) 55%, transparent 74% ); background-repeat: no-repeat; } #downloads-head { padding: 74px var(--v2-pad-x) 26px; } #downloads-head .richtext { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; max-width: var(--v2-max); margin-inline: auto; } #downloads-head .richtext { letter-spacing: 0; } #downloads-head h3 { color: var(--c-accent); font-weight: 800; font-size: clamp(2.2rem, 5.1vw, 4.6rem); line-height: 1; letter-spacing: 0.005em; text-transform: uppercase; } #downloads-head p { padding-left: 26px; border-left: 2px solid var(--c-text); color: var(--c-text); font-weight: 300; font-size: clamp(1rem, 1.9vw, 1.6rem); line-height: 1.28; letter-spacing: 0.01em; text-transform: uppercase; } /* the /terms download tile is a lone centred box */ body.page-terms .dl-group { padding-block: 26px 90px; } body.page-terms .dl-items { justify-content: center; } /* ========================================================================== GALLERY — v2 skin (events page): one big rounded photo per row. ========================================================================== */ body.page-events .blk-gallery { padding: 44px var(--v2-pad-x) 60px; } body.page-events .gallery { display: block; max-width: 660px; margin-inline: auto; } body.page-events .g-item { margin: 0 0 36px; } body.page-events .g-item img { width: 100%; height: auto; border-radius: 12px; display: block; } body.page-events .g-item figcaption { margin-top: 10px; color: var(--c-accent); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.11em; text-transform: uppercase; text-align: center; } /* events hero: photo inset with the two headline words riding its corners */ #events-hero .cta-banner { max-width: 1010px; margin-inline: auto; min-height: 0 !important; aspect-ratio: 980 / 578; border-radius: 16px; overflow: hidden; justify-content: space-between; align-items: stretch; padding: 26px 34px; } #events-hero { padding: 44px var(--v2-pad-x) 26px; } #events-hero .ctab-copy { max-width: none; width: 100%; } #events-hero .ctab-copy h3 { font-size: clamp(2rem, 7.2vw, 6.4rem); line-height: 1; font-weight: 800; } #events-hero .ctab-copy h3:first-child { text-align: left; } #events-hero .ctab-copy h3:last-child { text-align: right; margin-top: 0.85em; } /* ========================================================================== PAGE-SCOPED LAYOUTS ========================================================================== */ /* ---- HOME: hero + product cards + ADA banner --------------------------- */ /* the SC90 title is a full sentence, not a model number — dial it down */ #sc90 .pc-title { font-size: clamp(1.5rem, 3.6vw, 3.2rem); } #ada .ctab-copy h3 { font-size: clamp(1.5rem, 2.9vw, 2.5rem); } #ada .ctab-copy p { color: var(--c-accent); font-weight: 300; } /* ---- ABOUT ------------------------------------------------------------- */ #about-hero .cta-banner { justify-content: center; padding-block: 76px; position: relative; } #about-hero .cta-banner::before { /* subtle scrim so the headline reads over the bright sky, like the design */ content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.22); } #about-hero .ctab-copy { text-align: center; position: relative; } #about-hero .ctab-copy p { font-weight: 300; font-size: clamp(1.6rem, 3.6vw, 3.1rem); line-height: 1.12; color: var(--c-text); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); } #about-hero .ctab-copy strong { font-weight: 900; color: var(--c-accent); } #about-hero .ctab-copy em { font-style: normal; font-weight: 900; color: var(--c-accent); font-size: 1.35em; line-height: 1.05; } #about-hero .ctab-copy u { text-decoration: none; color: var(--c-text); font-weight: 300; } #about-team .cta-banner { padding-block: 62px; background-position: left center; } #about-team .ctab-copy p { color: var(--c-accent); font-weight: 800; font-size: clamp(1.05rem, 1.9vw, 1.6rem); line-height: 1.28; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.85); } #about-heart .split-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding-block: 40px 34px; min-height: 380px; } #about-heart .spl-media { width: min(310px, 60%); } #about-heart .spl-copy { padding: 0 20px; text-align: center; } #about-heart .spl-copy h3 { color: var(--c-text); font-weight: 800; font-size: clamp(1.2rem, 2.7vw, 2.2rem); text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); } /* ---- BANNERS: three-up hero (left photo = panel bg, right photo = media) */ #banners-hero .split-panel { grid-template-columns: 1fr 1fr 1fr; padding-block: 0; align-items: stretch; background-size: 33.34% 100%; background-position: left center; background-repeat: no-repeat; min-height: 470px; } #banners-hero .spl-copy { grid-column: 2; grid-row: 1; margin: 0; padding: 46px 24px; background: var(--c-bg); background-image: none; color: var(--c-text); text-align: center; display: flex; flex-direction: column; justify-content: center; text-transform: uppercase; } #banners-hero .spl-copy p { font-weight: 300; font-size: clamp(0.8rem, 1.35vw, 1.2rem); letter-spacing: 0.32em; line-height: 1.5; } #banners-hero .spl-copy h3 { color: var(--c-accent); font-weight: 800; font-size: clamp(1.9rem, 4.1vw, 3.7rem); line-height: 1.06; letter-spacing: 0.01em; } #banners-hero .spl-copy h4 { color: var(--c-text); font-weight: 800; font-size: clamp(1.7rem, 3.7vw, 3.3rem); line-height: 1.06; } #banners-hero .spl-media { grid-column: 3; grid-row: 1; margin: 0; } #banners-hero .spl-media img.spl-img { width: 100%; height: 100%; object-fit: cover; } #banner-specs .cta-banner { padding-block: 66px; gap: 0; } #banner-specs .ctab-copy p { color: var(--c-accent); font-weight: 800; font-size: clamp(1.05rem, 2vw, 1.7rem); line-height: 1.2; margin-bottom: 0.95em; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8); } #banner-specs .ctab-copy p:last-child { margin-bottom: 0; } /* ---- QUOTE ------------------------------------------------------------- */ #quote-hero .cta-banner { justify-content: flex-end; padding-block: 42px 34px; } #quote-hero .ctab-copy h3 { font-size: clamp(1.7rem, 4.1vw, 3.3rem); } #quote-hero .ctab-copy p { color: var(--c-text); font-weight: 300; font-size: clamp(1rem, 1.75vw, 1.45rem); text-transform: none; } /* ---- HIRING ------------------------------------------------------------ */ #hiring-hero .cta-banner { background-position: left center; padding-block: 88px; } #hiring-hero .ctab-copy h3 { font-size: clamp(1.9rem, 4.4vw, 3.6rem); } #hiring-hero .ctab-copy p { color: var(--c-text); font-weight: 300; } #hiring-apply .contact-split { padding-top: 24px; } #hiring-apply .cs-left { min-height: 0; text-align: right; } #hiring-apply .cs-lines { margin-top: 0; } #hiring-apply .cs-lines p { margin-bottom: 0; font-weight: 300; font-size: clamp(0.95rem, 1.45vw, 1.25rem); line-height: 1.3; text-transform: uppercase; } #hiring-apply .cs-lines strong { display: block; color: var(--c-accent); font-weight: 800; font-size: 1.28em; line-height: 1.15; } #hiring-apply .cs-lines em { font-style: normal; display: block; height: 1.1em; } body.page-hiring .blk-contact_split::before { display: none; } /* ---- TERMS ------------------------------------------------------------- */ body.page-terms .blk-heading { padding-top: 76px; } /* ---- BLOG: outlined post cards ---------------------------------------- */ body.page-blog .blk-split_panel { padding: 16px var(--v2-pad-x); } body.page-blog .blk-split_panel:first-child { padding-top: 44px; } body.page-blog .split-panel { display: grid; grid-template-columns: 1fr 1fr; max-width: 1000px; margin-inline: auto; padding-block: 0; min-height: 250px; background: var(--c-bg); border: 2px solid var(--c-accent); border-radius: 16px; overflow: hidden; } body.page-blog .split-panel.sp-media-right .spl-media { grid-column: 2; grid-row: 1; margin: 0; } body.page-blog .split-panel .spl-media img.spl-img { width: 100%; height: 100%; object-fit: cover; } body.page-blog .split-panel.sp-media-right .spl-copy { grid-column: 1; grid-row: 1; padding: 34px 32px; margin: 0; text-align: right; background: none; } body.page-blog .spl-copy h3 { color: var(--c-text); font-weight: 300; font-size: clamp(1.15rem, 2.05vw, 1.75rem); line-height: 1.24; text-transform: uppercase; letter-spacing: 0.01em; } body.page-blog .blk-split_panel:last-of-type { padding-bottom: 56px; } /* ========================================================================== MOBILE (≤768px) ========================================================================== */ @media (max-width: 768px) { :root { --v2-band-h: 52px; } /* ---- bands ---- */ .chev-band .chev { min-width: 26px; } .chev-band .cb-label { padding: 10px 14px; font-size: clamp(0.95rem, 4.4vw, 1.3rem); } .subnav-band { flex-direction: column; padding-block: 6px; } .subnav-band a { justify-content: center; padding: 13px 20px; font-size: 1.15rem; } .subnav-band a + a::before { left: 12%; right: 12%; top: 0; transform: none; width: auto; height: 2px; } /* ---- hero ---- */ .hb-copy { padding: 15% 4% 0 31%; } .hb-word { font-size: clamp(1.3rem, 8.4vw, 2.4rem); text-shadow: 2px 2px 0 rgba(10, 189, 240, .3), -2px -2px 0 rgba(254, 1, 1, .3); } /* ---- product card ---- */ .pc-tabs { gap: 6px; padding: 12px 12px 0; } .pc-tab { padding: 10px 14px; font-size: 0.78rem; border-radius: 10px 10px 0 0; } .pc-pane[data-pane="main"] { grid-template-columns: 1fr; padding-block: 26px 42px; } .pc-carousel { grid-column: 1; grid-row: 1; } .pc-overlay { grid-column: 1; grid-row: 2; margin: -22px 0 0; padding: 20px 22px 24px; } .pc-desc { grid-column: 1; grid-row: 3; padding: 22px 0 0; } .pc-actions { grid-column: 1; grid-row: 4; padding: 20px 0 0; text-align: center; } .pc-title { font-size: clamp(1.8rem, 11vw, 3rem); } .pc-tagline { font-size: clamp(1rem, 5.4vw, 1.5rem); } .pc-tabbody { padding-block: 30px 44px; } /* ---- banners ---- */ /* the desktop min-heights come from an inline style — cap them on phones so a short banner doesn't leave a screenful of empty photo */ .cta-banner { padding: 42px 20px; gap: 20px; min-height: 260px !important; } /* ---- split panels ---- */ .split-panel { grid-template-columns: 1fr; padding-block: 32px; } .sp-media-left.spl-bg-accent .spl-media, .sp-media-right.spl-bg-accent .spl-media, .spl-bg-surface .spl-media, .spl-bg-photo .spl-media { grid-column: 1; grid-row: 1; margin: 0 20px; } .sp-media-left.spl-bg-accent .spl-copy, .sp-media-right.spl-bg-accent .spl-copy, .spl-bg-surface .spl-copy, .spl-bg-photo .spl-copy { grid-column: 1; grid-row: 2; margin: -18px 20px 0; padding: 30px 24px; text-align: center; } #banners-hero .split-panel { grid-template-columns: 1fr; background-size: 100% 34%; background-position: left top; min-height: 0; } #banners-hero .spl-copy { grid-column: 1; grid-row: 2; margin: 0; padding: 34px 20px; } #banners-hero .spl-media { grid-column: 1; grid-row: 3; margin: 0; } #banners-hero .split-panel::before { content: ""; grid-column: 1; grid-row: 1; height: 210px; } #about-heart .spl-media { width: min(230px, 62%); } #about-heart .spl-copy { margin: 0; padding: 0 20px; } /* ---- logo grid ---- */ .logo-grid { grid-template-columns: 1fr; gap: 22px; padding: 44px 20px 56px; } .lg-head { text-align: center; } .lg-cols-3 .lg-grid, .lg-cols-4 .lg-grid, .lg-cols-5 .lg-grid { grid-template-columns: repeat(2, 1fr); } /* ---- contact ---- */ .contact-split { grid-template-columns: 1fr; gap: 34px; padding: 44px 20px 60px; } .cs-left { min-height: 0; text-align: center; } .cs-photo { position: static; width: min(320px, 78%); margin: 24px auto 0; } .cs-social-row { justify-content: center; margin-top: 24px; } .cs-lines { text-align: center; } .cs-right { padding: 26px 20px 30px; } #hiring-apply .cs-left { text-align: center; } /* ---- forms ---- */ .blk-quote_form .quote-form:not([style*="background-image"]) { padding: 44px 20px 64px; } .blk-quote_form .qf-form, .blk-quote_form .qf-status { max-width: none; } .qf-row-2 { grid-template-columns: 1fr; gap: 16px; } /* ---- downloads ---- */ .dl-group { padding-block: 22px; } .dl-group-title { grid-row: 1; } .dl-items { grid-area: auto; grid-row: 2; justify-content: center !important; padding: 22px 20px 0; } .dl-group-title::before, .dl-group-title::after { flex-grow: 1 !important; min-width: 18px; margin-inline: 14px; } .dl-box { width: 190px; min-height: 74px; } #downloads-head { padding: 40px 20px 8px; } #downloads-head .richtext { flex-direction: column; gap: 12px; text-align: center; } #downloads-head p { border-left: 0; padding-left: 0; } /* ---- events ---- */ #events-hero { padding: 22px 12px 14px; } #events-hero .cta-banner { border-radius: 12px; padding: 16px 18px; } #events-hero .ctab-copy h3 { font-size: clamp(1.6rem, 11vw, 3rem); } body.page-events .blk-gallery { padding: 26px 14px 40px; } body.page-events .g-item { margin-bottom: 26px; } body.page-events .g-item figcaption { font-size: 0.78rem; letter-spacing: 0.08em; } /* ---- blog ---- */ body.page-blog .split-panel { grid-template-columns: 1fr; min-height: 0; } body.page-blog .spl-media { grid-column: 1; grid-row: 2; } body.page-blog .spl-media img.spl-img { aspect-ratio: 485 / 320; } body.page-blog .spl-copy { grid-column: 1; grid-row: 1; text-align: center; padding: 26px 22px; } /* ---- footer ---- */ .site-footer { grid-template-columns: 1fr; grid-template-areas: "brand" "links" "social" "copy"; gap: 24px; justify-items: center; padding: 44px 20px 30px; text-align: center; } .sf-brand { flex-direction: column; gap: 14px; text-align: center; } .sf-contact { align-items: center; } .sf-links { align-items: center; } .sf-links-row { justify-content: center; } .sf-links-row a { padding: 4px 11px; font-size: 0.8rem; } /* separators land at the start of wrapped lines on narrow screens */ .sf-links-row a + a::before { display: none; } .sf-social { width: 100%; } } /* ---- narrow phones ----------------------------------------------------- */ @media (max-width: 420px) { .dl-box { width: 100%; max-width: 260px; } .pc-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; } .pc-tab { white-space: nowrap; } } /* ---- reduced motion ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .hb-word { transition: none; } }