/* ============================================================ BEAVER HUB — SUB-PAGES v2 (landing-matched, bone/navy/orange) Restyles the existing .sp-* content components to the LANDING design language. Loads AFTER styles.css + landing.css, so the --bh-* tokens, pill .nav and .bh-foot all come from landing.css. The old dark "cosmos / starfield" theme is fully superseded. ============================================================ */ /* ---------- page canvas ---------- */ html, body{ overflow-x:clip; } /* contain any residual side overflow (mobile) */ body{ background:var(--bh-bone); color:var(--bh-ink); font-family:var(--bh-sans); max-width:100%; } ::selection{ background:var(--bh-orange); color:#fff; } .sp{ position:relative; overflow-x:clip; } /* responsive media — never let an asset push the page wider than the viewport */ .sp img, .sp video, .sp iframe{ max-width:100%; } .sp-wrap, .sp-section, .sp-hero__inner{ width:min(1180px, calc(100% - clamp(2rem,6vw,7rem))); margin-inline:auto; } /* ---------- shared subpage nav bits (pill nav from landing.css) ---------- */ /* explicit way back to the site — every subpage is a dead end otherwise */ .nav__home{ font-family:var(--bh-mono); font-size:.68rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.7); white-space:nowrap; transition:color .25s; display:flex; align-items:center; gap:.4rem; } .nav__home:hover{ color:#fff; } .nav__home svg{ width:14px; height:14px; flex:none; } .sp-nav2 .sp-menu{ margin-right:auto; } /* quick-menu hugs the brand */ /* panel centering is now the shared default in styles.css (.sp-menu__panel) — both nav bars are centered pills with an off-center trigger, so no .sp-nav2-specific override is needed here any more. */ /* sp-nav2 has no hamburger collapse — brand + quick-menu + home + contact all stay in one row, so on phones they must shrink or they silently overflow past the pill (clipped invisible by the page's overflow-x:clip). */ @media (max-width:700px){ .sp-nav2{ padding-inline:.55rem .45rem; gap:.4rem; } .sp-nav2 .brand{ gap:.4rem; } .sp-nav2 .brand__logo{ width:26px; height:26px; } .sp-nav2 .brand__name{ display:none; } .sp-nav2 .sp-menu__trigger{ font-size:.72rem; padding:.4rem .15rem; gap:.3rem; } .sp-nav2 .nav__home{ font-size:0; gap:0; } /* icon-only "way back" link */ .sp-nav2 .nav__home svg{ width:18px; height:18px; } .sp-nav2 .nav__pill-btn--contact{ padding:.55rem .8rem; font-size:.6rem; letter-spacing:.1em; } } /* Quick-menu on phones: the panel can't just become a viewport-spanning overlay in place — `.nav` has `transform:translateX(-50%)` (for centering), which makes IT the containing block for any `position:fixed` descendant, so top/left/right there would resolve against the 54px pill, not the screen. menu.js detaches the panel into (adding this class) when opened on a narrow viewport, so it can become a real full-width modal card that fits the whole menu without scrolling, with the page locked behind it. (html.bh-menu-lock itself is defined in styles.css — shared with the home page's hamburger menu, which subpage.css isn't loaded for.) */ /* top AND bottom are both pinned (no computed height/dvh guess) so the browser's own fixed-positioning layout — which already accounts for a mobile browser's collapsing/expanding address bar — decides the real available height. A `calc(100dvh - Nrem)` max-height was tried first and under-filled on a real phone (dvh resolved larger than the visible area the panel could actually occupy, so content got clipped below the fold with nothing to scroll to reach it). */ .sp-menu__panel--modal{ position:fixed; top:4.6rem; left:.6rem; right:.6rem; bottom:.6rem; width:auto; height:auto; max-height:none; z-index:210; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(6,9,20,.98); box-shadow:0 24px 60px -20px rgba(0,0,0,.75); } .sp-menu__panel--modal.is-open{ opacity:1; visibility:visible; transform:none; } .sp-menu__panel--modal .sp-menu__col{ display:grid; grid-template-columns:1fr 1fr; gap:0 .55rem; min-width:0; align-content:start; } .sp-menu__panel--modal .sp-menu__col + .sp-menu__col{ margin:.3rem 0 0; padding:.4rem 0 0; } .sp-menu__panel--modal .sp-menu__group{ grid-column:1/-1; padding:.22rem .45rem .18rem; font-size:.58rem; } /* title + product-name share one row (was two stacked lines) — the single biggest saving toward fitting all 17 links on-screen without scrolling */ .sp-menu__panel--modal a{ display:flex; flex-flow:row wrap; align-items:baseline; column-gap:.35rem; row-gap:0; padding:.3rem .45rem; font-size:.76rem; line-height:1.25; } .sp-menu__panel--modal a small{ font-size:.62rem; opacity:.7; } /* ---------- sections & type ---------- */ .sp-section{ padding-block:clamp(3.5rem,10vh,7.5rem); position:relative; } .sp-eyebrow{ font-family:var(--bh-mono); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--bh-orange); margin-bottom:.9rem; display:inline-flex; align-items:center; gap:.5rem; } .sp-title{ font-family:"Space Grotesk", var(--bh-sans); font-weight:500; letter-spacing:-.03em; line-height:1.08; font-size:clamp(1.8rem,3.6vw,2.9rem); color:var(--bh-ink); margin:0 0 1.2rem; max-width:22ch; } .sp-body{ color:var(--bh-gray); font-size:clamp(1rem,1.15vw,1.08rem); line-height:1.72; max-width:66ch; margin:0 0 1.1rem; } .sp-body:last-child{ margin-bottom:0; } /* ---------- HERO ---------- */ .sp-hero{ padding-top:clamp(7.5rem,17vh,11rem); padding-bottom:clamp(2.5rem,7vh,4.5rem); position:relative; } .sp-hero__inner--split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; } .sp-hero__inner--center{ max-width:66ch; text-align:center; } .sp-hero__inner--center .sp-kicker{ justify-content:center; } .sp-hero__inner--center .sp-hero__sub{ margin-inline:auto; } .sp-hero__inner--center .sp-actions{ justify-content:center; } .sp-kicker{ font-family:var(--bh-mono); font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--bh-dim); display:flex; align-items:center; gap:.55rem; margin-bottom:1.2rem; } .sp-kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--bh-orange); box-shadow:0 0 12px 2px rgba(255,93,0,.7); } .sp-hero__title{ font-family:"Space Grotesk", var(--bh-sans); font-weight:500; letter-spacing:-.035em; line-height:1.03; font-size:clamp(2.4rem,5.6vw,4.3rem); color:var(--bh-ink); margin:0; } .sp-hero__title em, .sp-hero__title span{ font-style:normal; color:var(--bh-orange); } .sp-hero__sub{ color:var(--bh-gray); font-size:clamp(1.08rem,1.5vw,1.28rem); line-height:1.62; max-width:52ch; margin:1.4rem 0 0; } .sp-actions{ display:flex; gap:1rem; margin-top:2.1rem; flex-wrap:wrap; } /* hero media (split = .sp-logo, center = .sp-frame) */ .sp-logo, .sp-frame{ border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--bh-line); box-shadow:0 24px 60px rgba(4,32,59,.12); -webkit-clip-path:polygon(0 0,100% 0,100% 100%,20px 100%,0 calc(100% - 20px)); clip-path:polygon(0 0,100% 0,100% 100%,20px 100%,0 calc(100% - 20px)); } .sp-frame{ margin-top:clamp(2.4rem,6vh,4rem); } .sp-logo img, .sp-frame img{ display:block; width:100%; height:auto; } /* ============================================================ HERO — DARK PHOTO VARIANT Full-bleed cinematic hero matching the landing page: the page's own hero image fills the whole section (softly blurred, navy wash on top), text centred and floating above. Add both `sp-hero--dark sp-hero--photo` to `.sp-hero`, drop `.sp-frame`, and add `.sp-hero__bg > img` + `.sp-hero__scrim` as the first two children (before `.sp-hero__inner`). For pages with no hero photo, use `sp-hero--dark sp-hero--nophoto` instead (no bg/scrim markup needed — texture is pure CSS). ============================================================ */ .sp-hero--dark{ background:var(--bh-ink); min-height:92vh; display:flex; align-items:center; padding-top:clamp(6.5rem,14vh,9rem); padding-bottom:clamp(3rem,7vh,4.5rem); overflow:hidden; } .sp-hero--dark .sp-decor{ display:none; } .sp-hero--dark .sp-hero__inner{ position:relative; z-index:2; } .sp-hero--dark .sp-kicker{ color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); padding:.5rem 1rem .5rem .8rem; border-radius:999px; width:fit-content; backdrop-filter:blur(6px); } .sp-hero--dark .sp-hero__title{ color:#fff; font-size:clamp(2.6rem,5.2vw,4.4rem); text-shadow:0 4px 30px rgba(0,0,0,.35); } .sp-hero--dark .sp-hero__sub{ color:rgba(255,255,255,.82); text-shadow:0 2px 16px rgba(0,0,0,.3); } /* .sp-actions in the selector bumps specificity above ".sp .btn--ghost" further down this file (same 2-class weight would otherwise lose on source order) */ .sp-hero--dark .sp-actions .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.5); backdrop-filter:blur(6px); } .sp-hero--dark .sp-actions .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); } .sp-hero--photo{ padding-top:0; padding-bottom:0; } /* !important: the DECOR layer rule below (".sp-hero > :not(.bh-paths)") forces position:relative on every direct child of .sp-hero, which would turn these into flex siblings instead of full-bleed layers — must win over that. */ .sp-hero__bg{ position:absolute !important; inset:0; z-index:0 !important; overflow:hidden; width:100%; height:100%; } .sp-hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; filter:blur(1.5px) saturate(1.05); transform:scale(1.02); } .sp-hero__scrim{ position:absolute !important; inset:0; z-index:1 !important; background: radial-gradient(60% 55% at 50% 42%, rgba(4,32,59,.55), rgba(4,32,59,.72) 100%), linear-gradient(0deg, rgba(4,32,59,.88) 0%, rgba(4,32,59,.6) 40%, rgba(4,32,59,.6) 100%); } /* no-photo fallback — pure CSS texture (glow + dot grid) for the couple of pages that never had a hero image, so they still get the dark treatment */ .sp-hero--nophoto .sp-hero__glow{ position:absolute !important; inset:0; z-index:0 !important; pointer-events:none; background: radial-gradient(46% 60% at 82% 8%, rgba(255,93,0,.16), transparent 70%), radial-gradient(60% 55% at 8% 100%, rgba(0,71,143,.4), transparent 70%); } .sp-hero--nophoto .sp-hero__grid{ position:absolute !important; inset:0; z-index:0 !important; pointer-events:none; opacity:.5; background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size:34px 34px; -webkit-mask-image:radial-gradient(75% 75% at 50% 30%, #000 30%, transparent 78%); mask-image:radial-gradient(75% 75% at 50% 30%, #000 30%, transparent 78%); } /* ---------- STATS (hairline grid) ---------- */ .sp-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--bh-line); border:1px solid var(--bh-line); border-radius:14px; overflow:hidden; } .sp-stat{ background:var(--bh-bone); padding:clamp(1.3rem,2.5vw,2rem) 1.4rem; display:flex; flex-direction:column; gap:.5rem; } .sp-stat__num{ font-family:"Space Grotesk", var(--bh-sans); font-weight:600; font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-.02em; color:var(--bh-ink); } .sp-stat__label{ font-family:var(--bh-mono); font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; color:var(--bh-dim); line-height:1.4; } /* full-sentence captions instead of a 2-3 word tag — the mono/uppercase/ wide-tracking treatment above reads fine short but fights legibility at sentence length, so swap to a normal-case body style */ .sp-stats--detailed .sp-stat__num{ font-size:clamp(1.9rem,3.4vw,2.6rem); } .sp-stats--detailed .sp-stat__label{ font-family:var(--bh-sans); font-size:.88rem; letter-spacing:0; text-transform:none; color:var(--bh-gray); line-height:1.55; } /* ---------- STORY (two columns) ---------- */ .sp-story{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; } /* ---------- CARDS ---------- */ .sp-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:clamp(.8rem,1.4vw,1.15rem); margin-top:clamp(1.6rem,3vh,2.4rem); } /* fixed 3-up instead of auto-fill — for a 6-card set two even rows read calmer than 4+2 with a ragged, half-empty second row */ @media (min-width:640px){ .sp-cards--3{ grid-template-columns:repeat(3,1fr); } } @media (min-width:560px){ .sp-cards--2{ grid-template-columns:repeat(2,1fr); } } .sp-card{ position:relative; background:#fff; border:1px solid var(--bh-line); border-radius:14px; padding:1.5rem 1.4rem; transition:border-color .3s var(--bh-ease), transform .3s var(--bh-ease), box-shadow .3s var(--bh-ease); } .sp-card:hover{ border-color:var(--bh-orange); transform:translateY(-3px); box-shadow:0 14px 34px rgba(4,32,59,.09); } .sp-card__icon{ display:inline-flex; font-size:1.5rem; line-height:1; margin-bottom:1rem; filter:saturate(.9); } .sp-card__name{ font-family:"Space Grotesk", var(--bh-sans); font-weight:600; font-size:1.05rem; letter-spacing:-.01em; color:var(--bh-ink); margin-bottom:.5rem; } .sp-card__desc{ color:var(--bh-gray); font-size:.92rem; line-height:1.62; } /* ---------- PHASES (numbered rule) ---------- */ .sp-phases{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.4vw,2rem); margin-top:clamp(1.6rem,3vh,2.4rem); } .sp-phase{ border-top:2px solid var(--bh-ink); padding-top:1.1rem; } .sp-phase__num{ font-family:var(--bh-mono); font-size:.82rem; font-weight:600; letter-spacing:.06em; color:var(--bh-orange); } .sp-phase__title{ font-family:"Space Grotesk", var(--bh-sans); font-weight:600; font-size:1.08rem; color:var(--bh-ink); margin:.6rem 0 .5rem; } .sp-phase__desc{ color:var(--bh-gray); font-size:.9rem; line-height:1.6; } /* ---------- CATEGORIES (app groups) ---------- */ .sp-cats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(1rem,2vw,1.3rem); margin-top:clamp(1.6rem,3vh,2.4rem); } .sp-cat{ background:#fff; border:1px solid var(--bh-line); border-radius:14px; padding:1.6rem 1.5rem; } .sp-cat__head{ font-family:"Space Grotesk", var(--bh-sans); font-weight:600; font-size:1.15rem; letter-spacing:-.01em; color:var(--bh-ink); } .sp-cat__sub{ display:block; color:var(--bh-gray); font-size:.92rem; line-height:1.6; margin:.45rem 0 1.1rem; font-family:var(--bh-sans); font-weight:400; } .sp-cat__apps{ display:flex; flex-wrap:wrap; gap:.5rem; } .sp-app-tag{ font-family:var(--bh-mono); font-size:.66rem; letter-spacing:.05em; color:var(--bh-gray); background:var(--bh-bone-2); border:1px solid var(--bh-line); padding:.42rem .7rem; border-radius:999px; } /* ---------- POSITIONS / list ---------- */ .sp-pos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.8rem 1.4rem; margin-top:clamp(1.6rem,3vh,2.4rem); } .sp-pos--4{ grid-template-columns:repeat(4,1fr); } .sp-pos__item{ border-left:2px solid var(--bh-orange); padding:.35rem 0 .35rem 1rem; color:var(--bh-ink); font-weight:500; font-size:1rem; line-height:1.4; } /* ---------- QUOTES (navy card) ---------- */ .sp-quotes{ display:grid; gap:1.2rem; margin-top:clamp(1.6rem,3vh,2.4rem); } .sp-quote{ background:var(--bh-ink); color:#fff; border-radius:18px; padding:clamp(2rem,4vw,3.2rem); display:grid; gap:clamp(1.4rem,3vw,2.4rem); align-items:center; } .sp-quote__media{ border-radius:12px; overflow:hidden; } .sp-quote__media img{ display:block; width:100%; height:auto; } .sp-quote__text, .sp-quote__body{ font-family:"Space Grotesk", var(--bh-sans); font-weight:500; font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.32; letter-spacing:-.02em; } .sp-quote__who, .sp-quote__name{ font-weight:600; margin-top:1.3rem; } .sp-quote__role{ color:rgba(255,255,255,.55); font-size:.9rem; margin-top:.25rem; } /* ---------- VIDEO ---------- */ .sp-video{ position:relative; aspect-ratio:16/9; margin-top:clamp(1.6rem,3vh,2.4rem); border:1px solid var(--bh-line); border-radius:16px; overflow:hidden; background:#000; box-shadow:0 24px 60px rgba(4,32,59,.12); } .sp-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* ---------- JOURNEY (before/after step-chip comparison, for dark bands) ---------- */ .sp-journey{ display:grid; gap:1rem; margin-top:clamp(1.6rem,3vh,2.4rem); } .sp-journey__row{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:1.3rem 1.4rem; } .sp-journey__label{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem; margin-bottom:1rem; } .sp-journey__label b{ color:#fff; font-family:"Space Grotesk", var(--bh-sans); font-weight:600; font-size:1rem; } .sp-journey__label span{ font-family:var(--bh-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); } .sp-journey__chips{ display:flex; flex-wrap:wrap; gap:.6rem; } .sp-journey__chip{ flex:1 1 130px; text-align:center; padding:.7rem .8rem; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.8); font-size:.84rem; line-height:1.3; } .sp-journey__chip--risk{ background:rgba(255,93,0,.14); border-color:rgba(255,93,0,.4); color:#ffcba8; font-weight:500; } .sp-journey__chip--good{ background:rgba(255,93,0,.1); border-color:rgba(255,93,0,.5); color:#fff; font-weight:600; } .sp-journey__chip--note{ flex:2 1 220px; background:transparent; border:1px dashed rgba(255,255,255,.22); color:rgba(255,255,255,.55); font-style:italic; } @media (max-width:640px){ .sp-journey__chip{ flex-basis:100%; text-align:left; } } /* ---------- SHOTS (product screenshots with a browser-ish caption bar) ---------- */ .sp-shots{ display:grid; grid-template-columns:1fr; gap:1.4rem; margin-top:clamp(1.6rem,3vh,2.4rem); } @media (min-width:760px){ .sp-shots--2{ grid-template-columns:1fr 1fr; } } /* text column capped near the heading's own 22ch wrap so the paragraphs align under it instead of running wider; the freed width goes to the shot */ @media (min-width:760px){ .sp-shots--intro{ grid-template-columns:minmax(260px,29rem) 1fr; } } .sp-shots--intro .sp-body{ text-align:justify; text-justify:inter-word; } .sp-shot > a{ display:block; } .sp-shot__frame{ position:relative; cursor:zoom-in; border:1px solid var(--bh-line); border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 18px 44px rgba(4,32,59,.1); } .sp-shot__frame:focus-visible{ outline:2px solid var(--bh-orange); outline-offset:2px; } /* hover/focus affordance — screenshots are dense at grid size; the zoom badge signals there's a full-resolution view a click away */ .sp-shot__frame::after{ content:''; position:absolute; inset:0; opacity:0; pointer-events:none; background:rgba(4,32,59,.1); transition:opacity .2s var(--bh-ease); } .sp-shot__frame:hover::after, .sp-shot__frame:focus-visible::after{ opacity:1; } .sp-shot__zoom{ position:absolute; top:.6rem; right:.6rem; width:30px; height:30px; border-radius:50%; background:rgba(4,32,59,.82); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(3px) scale(.9); pointer-events:none; transition:opacity .2s var(--bh-ease), transform .2s var(--bh-ease); } .sp-shot__frame:hover .sp-shot__zoom, .sp-shot__frame:focus-visible .sp-shot__zoom{ opacity:1; transform:none; } .sp-band--dark .sp-shot__frame{ border-color:rgba(255,255,255,.14); box-shadow:0 18px 44px rgba(0,0,0,.3); } .sp-shot__bar{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; padding:.55rem .9rem; background:var(--bh-bone-2); border-bottom:1px solid var(--bh-line); font-family:var(--bh-mono); font-size:.64rem; letter-spacing:.03em; color:var(--bh-dim); } .sp-band--dark .sp-shot__bar{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.5); } .sp-shot__bar strong{ color:var(--bh-ink); font-weight:600; } .sp-band--dark .sp-shot__bar strong{ color:#fff; } .sp-shot__frame img{ display:block; width:100%; height:auto; } .sp-shot__cap{ color:var(--bh-gray); font-size:.84rem; line-height:1.55; margin-top:.7rem; } .sp-band--dark .sp-shot__cap{ color:rgba(255,255,255,.55); } /* ---------- LIGHTBOX (click a screenshot to see it full-size) ---------- */ .sp-lightbox{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:clamp(1.2rem,5vh,3.4rem) 1.2rem; background:rgba(2,8,18,.9); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .25s var(--bh-ease), visibility .25s; } .sp-lightbox.is-open{ opacity:1; visibility:visible; } .sp-lightbox figure{ margin:0; max-width:min(1100px,100%); text-align:center; } .sp-lightbox img{ display:block; max-width:100%; max-height:82vh; margin:0 auto; border-radius:10px; box-shadow:0 40px 100px rgba(0,0,0,.55); background:#fff; } .sp-lightbox figcaption{ color:rgba(255,255,255,.7); font-size:.88rem; margin-top:1rem; line-height:1.5; } .sp-lightbox__close{ position:fixed; top:1.1rem; right:1.1rem; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; } .sp-lightbox__close:hover{ background:rgba(255,255,255,.2); } /* ---------- MODS + TIER (back-office module lists) ---------- */ .sp-tier{ display:grid; grid-template-columns:1fr; gap:1.6rem; margin-top:clamp(1.6rem,3vh,2.4rem); } @media (min-width:820px){ .sp-tier{ grid-template-columns:1fr 1fr; } } .sp-tier__col{ background:#fff; border:1px solid var(--bh-line); border-radius:16px; padding:1.7rem; } .sp-tier__col--pro{ background:var(--bh-ink); border-color:var(--bh-ink); } .sp-tier__name{ font-family:"Space Grotesk", var(--bh-sans); font-weight:600; font-size:1.15rem; margin:.6rem 0 .2rem; color:var(--bh-ink); } .sp-tier__col--pro .sp-tier__name{ color:#fff; } .sp-tier__note{ color:var(--bh-gray); font-size:.86rem; } .sp-tier__col--pro .sp-tier__note{ color:rgba(255,255,255,.6); } .sp-mods{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1.3rem; margin-top:1.3rem; } .sp-mod h4{ font-family:"Space Grotesk", var(--bh-sans); font-weight:600; font-size:.9rem; color:var(--bh-ink); margin-bottom:.15rem; } .sp-mod p{ color:var(--bh-gray); font-size:.8rem; line-height:1.48; } .sp-tier__col--pro .sp-mod h4{ color:#fff; } .sp-tier__col--pro .sp-mod p{ color:rgba(255,255,255,.58); } @media (max-width:480px){ .sp-mods{ grid-template-columns:1fr; } } /* ---------- SEGMENTS (property-type breakdown, on a dark band) ---------- */ .sp-segments{ display:grid; gap:clamp(2.4rem,5vh,3.6rem); margin-top:clamp(1.6rem,3vh,2.4rem); } .sp-segment{ display:grid; grid-template-columns:1fr; gap:1.5rem; } @media (min-width:860px){ .sp-segment{ grid-template-columns:.6fr 1.4fr; gap:clamp(2rem,4vw,3.4rem); } /* the aside's heading is a few lines while its paired body runs to several images + copy — pin it instead of leaving it stranded above a tall gap */ .sp-segment__aside{ position:sticky; top:6.5rem; align-self:start; } } .sp-segment__aside h3{ font-family:"Space Grotesk", var(--bh-sans); font-weight:600; font-size:1.25rem; color:#fff; margin:.7rem 0 .3rem; letter-spacing:-.01em; } .sp-segment__aside p{ color:rgba(255,255,255,.55); font-size:.92rem; } .sp-segment__body p{ color:rgba(255,255,255,.68); font-size:.92rem; line-height:1.6; } .sp-proof{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.5rem; } .sp-proof li{ position:relative; padding-left:1.3rem; color:rgba(255,255,255,.75); font-size:.86rem; line-height:1.5; } .sp-proof li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--bh-orange); } /* ---------- CHIPSET (allergy pills) ---------- */ .sp-chipset{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0; } .sp-chip{ font-family:var(--bh-mono); font-size:.66rem; letter-spacing:.02em; padding:.4rem .8rem; border-radius:999px; border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.55); } .sp-chip--on{ background:rgba(255,93,0,.18); border-color:rgba(255,93,0,.5); color:#fff; font-weight:600; } /* ---------- FIT (lead / match / roadmap summary ahead of the compare table) ---------- */ /* colors matched directly from the reference mock (green/blue/red tag dots + matching pale card tints) — a one-off exception to the site's usual orange/navy-only rule, kept to this semantic lead/match/gap read only */ .sp-fit{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.1rem; margin-top:clamp(1.6rem,3vh,2.4rem); } .sp-fit__col{ border:1px solid var(--bh-line); border-radius:16px; padding:1.6rem 1.5rem; background:var(--bh-bone-2); } .sp-fit__tag{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--bh-mono); font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; color:var(--bh-orange); margin-bottom:1rem; } .sp-fit__tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; } .sp-fit__col--lead{ background:#F4FBF7; border-color:#BEE0CC; } .sp-fit__col--lead .sp-fit__tag{ color:#1E7B4D; } .sp-fit__col--match{ background:#fff; border-color:#D8E0EA; } .sp-fit__col--match .sp-fit__tag{ color:var(--bh-navy); } .sp-fit__col--next{ background:#fff; border-color:#D8E0EA; } .sp-fit__col--next .sp-fit__tag{ color:var(--bh-ink); } .sp-fit__name{ font-family:"Space Grotesk", var(--bh-sans); font-weight:600; font-size:1.1rem; color:var(--bh-ink); margin-bottom:1rem; } .sp-fit__list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; } .sp-fit__list li{ position:relative; padding-left:1.1rem; color:var(--bh-gray); font-size:.88rem; line-height:1.55; } .sp-fit__list li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--bh-faint); } /* ---------- COMPARE (capability table) ---------- */ /* clipped to roughly 5 of 7 columns so SiteMinder/RoomRaccoon sit just off- screen — a horizontal-scroll affordance instead of dumping all 7 at once */ .sp-compare{ overflow-x:auto; margin-top:clamp(1.6rem,3vh,2.4rem); border:1px solid var(--bh-line); border-radius:14px; max-width:985px; } .sp-compare table{ width:100%; border-collapse:collapse; min-width:1320px; font-size:.84rem; } .sp-compare caption{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .sp-compare th, .sp-compare td{ padding:.7rem .85rem; text-align:left; border-bottom:1px solid var(--bh-line); } /* capability column gets extra room for its longer row labels; the rest grow evenly so the 5 visible columns aren't cramped against each other */ .sp-compare th:first-child, .sp-compare td:first-child{ min-width:300px; } .sp-compare th:not(:first-child), .sp-compare td:not(:first-child){ min-width:170px; } .sp-compare thead th{ font-family:var(--bh-mono); font-size:.64rem; letter-spacing:.04em; text-transform:uppercase; color:var(--bh-dim); background:var(--bh-bone-2); white-space:nowrap; } .sp-compare thead th.us{ color:var(--bh-orange); } .sp-compare tbody th{ font-weight:500; color:var(--bh-ink); font-size:.85rem; } .sp-compare td.us{ background:rgba(255,93,0,.05); } .sp-compare tbody tr:last-child td, .sp-compare tbody tr:last-child th{ border-bottom:0; } .sp-cap{ display:inline-block; padding:.26rem .6rem; border-radius:999px; font-family:var(--bh-mono); font-size:.66rem; white-space:nowrap; } .sp-cap--yes{ background:rgba(9,110,79,.1); color:#0a6b4c; } .sp-cap--warn{ background:rgba(255,93,0,.12); color:#b34600; } .sp-cap--no{ background:var(--bh-bone-2); color:var(--bh-dim); } /* ---------- GAPS (honest limitations list) ---------- */ .sp-gaps{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:1rem; } .sp-gaps li{ display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 1.2rem; background:var(--bh-bone-2); border:1px solid var(--bh-line); border-radius:12px; } .sp-gaps b{ display:block; color:var(--bh-ink); font-family:"Space Grotesk", var(--bh-sans); font-weight:600; margin-bottom:.15rem; } .sp-gaps p{ margin:0; color:var(--bh-gray); font-size:.86rem; } @media (max-width:600px){ .sp-gaps li{ flex-direction:column; gap:.4rem; } } /* quieter variant — a footnote-level disclosure doesn't need the same visual weight as a selling section: no tint band, smaller heading, a tight 3-up row */ .sp-gaps--compact{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.7rem; } .sp-gaps--compact li{ flex-direction:column; align-items:flex-start; gap:.35rem; padding:.85rem 1rem; background:transparent; } .sp-gaps--compact b{ font-size:.86rem; } .sp-gaps--compact p{ font-size:.78rem; } /* ---------- FAQ (accordion, native

— no JS) ---------- */ .sp-faq{ display:grid; gap:.8rem; margin-top:clamp(1.6rem,3vh,2.4rem); max-width:840px; } .sp-faq__item{ border:1px solid var(--bh-line); border-radius:12px; background:var(--bh-bone-2); overflow:hidden; } .sp-faq__item summary{ list-style:none; cursor:pointer; padding:1.05rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-family:"Space Grotesk", var(--bh-sans); font-weight:600; font-size:.96rem; color:var(--bh-ink); } .sp-faq__item summary::-webkit-details-marker{ display:none; } .sp-faq__item summary::after{ content:"+"; font-family:var(--bh-mono); font-size:1.2rem; line-height:1; color:var(--bh-dim); flex:none; transition:transform .25s var(--bh-ease), color .25s var(--bh-ease); } .sp-faq__item[open]{ background:#fff; border-color:var(--bh-orange); } .sp-faq__item[open] summary::after{ transform:rotate(45deg); color:var(--bh-orange); } .sp-faq__item p{ margin:0; padding:0 1.25rem 1.15rem; color:var(--bh-gray); font-size:.9rem; line-height:1.62; } /* ---------- CONTACT BAR (under the closing CTA) ---------- */ .sp-contactbar{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.4rem; margin-top:2.2rem; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.14); text-align:left; } .sp-contactbar span{ display:block; font-family:var(--bh-mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:.3rem; } .sp-contactbar a, .sp-contactbar p{ color:#fff; font-size:.88rem; margin:0; } .sp-contactbar a{ text-decoration:none; } .sp-contactbar a:hover{ color:var(--bh-orange); } /* ---------- CTA (navy card) ---------- */ .sp-cta{ position:relative; overflow:hidden; text-align:center; width:min(1180px, calc(100% - clamp(2rem,6vw,7rem))); margin:clamp(3rem,8vh,6rem) auto clamp(4rem,10vh,7rem); background:var(--bh-ink); color:#fff; border-radius:22px; padding:clamp(3rem,8vh,5.5rem) 1.5rem; } .sp-cta::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 80% at 50% 0%, rgba(255,93,0,.18), transparent 60%); } .sp-cta__title{ position:relative; font-family:"Space Grotesk", var(--bh-sans); font-weight:500; letter-spacing:-.025em; line-height:1.12; font-size:clamp(1.7rem,3.4vw,2.7rem); color:#fff; max-width:22ch; margin:0 auto 1.9rem; } .sp-cta .btn{ position:relative; } /* ---------- buttons on bone (override styles.css dark theme) ---------- */ .sp .btn, .sp-cta .btn{ font-family:var(--bh-mono); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; padding:1rem 1.7rem; border-radius:9px; transition:filter .25s, border-color .25s, color .25s; } .sp .btn--primary, .sp-cta .btn--primary{ background:var(--bh-orange); color:#fff; border:0; } .sp .btn--primary:hover, .sp-cta .btn--primary:hover{ filter:brightness(1.08); } .sp .btn--ghost{ background:transparent; color:var(--bh-ink); border:1px solid var(--bh-line); } .sp .btn--ghost:hover{ border-color:var(--bh-ink); } /* ghost button sitting on the navy CTA card is on dark → light it */ .sp-cta .btn--ghost{ color:#fff; border:1px solid rgba(255,255,255,.28); } .sp-cta .btn--ghost:hover{ border-color:#fff; } /* ============================================================ DECOR — animated circuit traces, flicker crosses, faint grid (borrows the landing's .bh-paths/.bh-pulse/.bh-cross; the SVG routes + crosses are injected at varied spots by js/sp-decor.js) ============================================================ */ /* circuit artwork lives ONLY in measured empty zones (blank side of a section, hero side-margins, dark CTA) — js/sp-decor.js keeps it clear of every text box. Content is lifted above the decor layer. */ .sp-hero, .sp-section, .sp-cta{ position:relative; } .sp .bh-paths.sp-decor{ position:absolute; z-index:0; } .sp-hero > :not(.bh-paths):not(.sp-cross), .sp-section > :not(.bh-paths):not(.sp-cross), .sp-cta > :not(.bh-paths):not(.sp-cross){ position:relative; z-index:1; } .sp-cta::before{ z-index:0; } .sp-cross{ opacity:.4; } /* the CTA box is small — the branching circuit motif crams too many glow pads into it and reads as noise right behind the headline. Drop it. */ .sp-cta .sp-decor{ display:none; } /* card accent line grows on hover */ .sp-card{ overflow:hidden; } .sp-card::after{ content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--bh-orange); transition:width .35s var(--bh-ease); } .sp-card:hover::after{ width:42%; } /* no spare room on phones → keep them completely clean */ @media (max-width:760px){ .sp .sp-decor, .sp .sp-cross{ display:none; } } /* ============================================================ SECTION RHYTHM — alternating tint/dark bands so a page reads in beats instead of one continuous bone-coloured scroll. Wrap a `.sp-section`/`.sp-band` around any section: `.sp-band--tint` for a quiet bone-2 strip (proof stats, secondary content), or `.sp-band--dark` for a full navy break (mirrors the landing page's dark punchline sections) — pair `.sp-band--dark` with a bone→ink `.bh-sep` before it and an ink→bone one after. ============================================================ */ .sp-band{ position:relative; } .sp-band--tint{ background:var(--bh-bone-2); border-top:1px solid var(--bh-line); border-bottom:1px solid var(--bh-line); } .sp-band--dark{ background:var(--bh-ink); } .sp-band--dark .sp-decor{ display:none; } .sp-band--dark::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(50% 70% at 15% 15%, rgba(255,93,0,.1), transparent 65%); } .sp-band--dark .sp-section{ position:relative; z-index:1; } .sp-band--dark .sp-title{ color:#fff; } .sp-band--dark .sp-eyebrow{ color:var(--bh-orange); } .sp-band--dark .sp-body{ color:rgba(255,255,255,.65); } .sp-band--dark .sp-pos__item{ color:#fff; } .sp-band--dark .sp-pos__item p{ color:rgba(255,255,255,.6); } .sp-band--dark .sp-card{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); } .sp-band--dark .sp-card__name{ color:#fff; } .sp-band--dark .sp-card__desc{ color:rgba(255,255,255,.6); } .sp-band--dark .sp-card__icon{ background:rgba(255,255,255,.08); color:#fff; } /* ---------- responsive ---------- */ @media (max-width:900px){ .sp-hero__inner--split{ grid-template-columns:1fr; gap:2rem; } .sp-story{ grid-template-columns:1fr; gap:1.6rem; } .sp-stats{ grid-template-columns:repeat(2,1fr); } .sp-phases{ grid-template-columns:repeat(2,1fr); } .sp-pos--4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .sp-stats{ grid-template-columns:1fr 1fr; } .sp-phases{ grid-template-columns:1fr; } .sp-pos, .sp-pos--4{ grid-template-columns:1fr; } } /* ============================================================ MITHURA / AI-AGENT PRODUCT COMPONENTS Added for the AI Merchandiser (Mithura) page — kept generic enough (.sp-*) for reuse by future AI-assistant subpages. ============================================================ */ /* ---------- hero footnote (dot-separated dim line under actions) ---------- */ .sp-hero__foot{ margin-top:1.6rem; font-family:var(--bh-mono); font-size:.72rem; letter-spacing:.04em; color:rgba(255,255,255,.5); display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem .9rem; } .sp-hero__foot span{ display:inline-flex; align-items:center; gap:.9rem; } .sp-hero__foot span::after{ content:"·"; color:rgba(255,255,255,.3); } .sp-hero__foot span:last-child::after{ content:none; } /* ---------- ticker (auto-scrolling feature strip, dark hero only) ---------- */ .sp-ticker{ margin-top:clamp(2rem,5vh,3.2rem); width:100%; position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); padding-block:.9rem; } .sp-ticker__track{ display:flex; width:max-content; gap:2.4rem; animation:sp-ticker-scroll 32s linear infinite; } .sp-ticker__item{ font-family:var(--bh-mono); font-size:.76rem; letter-spacing:.04em; color:rgba(255,255,255,.65); white-space:nowrap; display:flex; align-items:center; gap:.6rem; } .sp-ticker__item::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--bh-orange); flex:none; } @keyframes sp-ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (prefers-reduced-motion:reduce){ .sp-ticker__track{ animation:none; } } @media (max-width:760px){ .sp-ticker{ display:none; } } /* ---------- badge pill (status flag on a light section, e.g. "Live in Production") ---------- */ .sp-badge{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--bh-mono); font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--bh-orange); border:1px solid rgba(255,93,0,.35); background:rgba(255,93,0,.07); padding:.5rem 1rem; border-radius:999px; margin-bottom:1.1rem; } .sp-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--bh-orange); box-shadow:0 0 10px 2px rgba(255,93,0,.6); flex:none; } /* ---------- dictionary definition card ---------- */ .sp-dict{ background:var(--bh-ink); color:#fff; border-radius:18px; padding:clamp(1.8rem,3.5vw,2.6rem); position:relative; overflow:hidden; } .sp-dict::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 70% at 85% 0%, rgba(255,93,0,.16), transparent 65%); } .sp-dict__term{ position:relative; font-family:"Space Grotesk", var(--bh-sans); font-weight:600; font-size:clamp(1.6rem,3vw,2.1rem); letter-spacing:-.01em; margin:0 0 .3rem; } .sp-dict__term em{ font-style:normal; color:var(--bh-orange); } .sp-dict__phon{ position:relative; font-family:var(--bh-mono); font-size:.76rem; color:rgba(255,255,255,.5); margin-bottom:1.4rem; display:block; } .sp-dict__def{ position:relative; display:flex; gap:.8rem; margin-bottom:1rem; } .sp-dict__def:last-child{ margin-bottom:0; } .sp-dict__def b{ font-family:var(--bh-mono); font-size:.78rem; color:var(--bh-orange); flex:none; padding-top:.15rem; } .sp-dict__def p{ margin:0; color:rgba(255,255,255,.78); font-size:.92rem; line-height:1.6; } .sp-dict__logo{ position:relative; display:block; width:44px; height:44px; margin-bottom:1.1rem; filter:drop-shadow(0 4px 14px rgba(0,0,0,.35)); } /* ---------- product logo mark (small brand icon reused in a few spots) ---------- */ .sp-kicker__logo{ width:16px; height:16px; flex:none; } .sp-shot__bar .sp-bar-logo{ width:14px; height:14px; flex:none; margin-right:.4rem; vertical-align:-2px; } /* ---------- live feed (real-time operations log) ---------- */ .sp-feed{ background:#fff; border:1px solid var(--bh-line); border-radius:16px; padding:1.4rem 1.5rem 1.6rem; margin-top:clamp(2rem,4vh,3rem); box-shadow:0 18px 44px rgba(4,32,59,.08); } .sp-feed__head{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; font-family:var(--bh-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bh-dim); } .sp-feed__head::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--bh-orange); box-shadow:0 0 10px 2px rgba(255,93,0,.6); animation:sp-feed-pulse 1.6s ease-in-out infinite; } @keyframes sp-feed-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } } .sp-feed__list{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem; } .sp-feed__item{ display:flex; align-items:baseline; gap:.8rem; padding:.6rem 0; border-top:1px solid var(--bh-line); font-size:.86rem; } .sp-feed__item:first-child{ border-top:0; } .sp-feed__tag{ flex:none; font-family:var(--bh-mono); font-size:.6rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--bh-gray); background:var(--bh-bone-2); border:1px solid var(--bh-line); padding:.28rem .55rem; border-radius:999px; min-width:5.2rem; text-align:center; } .sp-feed__item--flag .sp-feed__tag{ color:#b34600; background:rgba(255,93,0,.12); border-color:rgba(255,93,0,.35); } .sp-feed__item--done .sp-feed__tag{ color:#fff; background:var(--bh-orange); border-color:var(--bh-orange); } .sp-feed__text{ color:var(--bh-ink); flex:1; line-height:1.5; } .sp-feed__time{ flex:none; font-family:var(--bh-mono); font-size:.72rem; color:var(--bh-dim); } @media (max-width:560px){ .sp-feed__item{ flex-wrap:wrap; } .sp-feed__time{ width:100%; padding-left:calc(5.2rem + .8rem); } } /* ---------- status pill (Available / Preview, on a card) ---------- */ .sp-status{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--bh-mono); font-size:.6rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; padding:.3rem .6rem; border-radius:999px; margin-bottom:.7rem; } .sp-status::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; } .sp-status--live{ color:var(--bh-orange); background:rgba(255,93,0,.1); } .sp-status--preview{ color:var(--bh-dim); background:var(--bh-bone-2); } .sp-band--dark .sp-status--preview{ color:rgba(255,255,255,.5); background:rgba(255,255,255,.08); } /* ============================================================ WEBINAR REGISTRATION PAGE COMPONENTS Used by webinar.html (a temporary page) — kept generic (.sp-*) in case a future event page reuses the same pattern. ============================================================ */ /* ---------- registration card (white card on a dark hero) ---------- */ .sp-regcard{ background:#fff; border-radius:20px; border:1px solid rgba(255,255,255,.14); box-shadow:0 40px 90px -30px rgba(0,0,0,.55); overflow:hidden; } .sp-regcard__hd{ padding:1.6rem 1.7rem 0; } .sp-regcard__hd h2{ font-family:"Space Grotesk", var(--bh-sans); font-weight:600; font-size:1.3rem; color:var(--bh-ink); margin:0 0 .3rem; } .sp-regcard__hd p{ color:var(--bh-gray); font-size:.86rem; margin:0 0 1.3rem; } .sp-regcard__form{ padding:0 1.7rem 1.7rem; } .sp-regcard .req{ color:var(--bh-orange); } .sp-regcard__legal{ font-size:.74rem; line-height:1.5; color:var(--bh-dim); margin:0; } /* ---------- ODOO PAGE: figures, icon tiles, app grid + detail overlay ---------- */ .sp-figure{ margin-top:clamp(1.6rem,3vh,2.4rem); border-radius:16px; overflow:hidden; border:1px solid var(--bh-line); background:#fff; } .sp-figure img{ display:block; width:100%; height:auto; } .sp-card__icon--img{ width:44px; height:44px; } .sp-card__icon--img img{ width:100%; height:100%; object-fit:contain; display:block; } /* ---------- APP CATEGORY HOVER-LIST (odoo.html) ---------- Same mechanism as the home page's Solutions list (js/landing.js .bh-sol, css/landing.css): hover/click a category name on the left, its app-icon panel cross-fades in on the right. Reuses the --bh-* tokens + the bhSolProg progress-line keyframe from landing.css (loaded on every subpage). */ .sp-catlist{ display:grid; grid-template-columns:1fr minmax(320px,44%); gap:clamp(1.6rem,3.5vw,3rem); align-items:stretch; margin-top:clamp(1.6rem,3vh,2.4rem); } .sp-catlist__list{ display:flex; flex-direction:column; justify-content:center; } .sp-catlist__item{ position:relative; display:flex; align-items:baseline; gap:1rem; width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:1.05rem .3rem; border-top:1px solid var(--bh-line); } .sp-catlist__item::before{ content:""; position:absolute; top:-1px; left:0; height:2px; width:100%; background:var(--bh-orange); transform-origin:left; transform:scaleX(0); transition:transform .4s var(--bh-ease); } .sp-catlist__item.is-active::before{ transform:scaleX(1); } .sp-catlist__item:last-child{ border-bottom:1px solid var(--bh-line); } .sp-catlist__body{ flex:1; min-width:0; } .sp-catlist__name{ display:block; font-family:"Space Grotesk", var(--bh-sans); font-weight:600; letter-spacing:-.01em; line-height:1.2; font-size:clamp(1.02rem,1.6vw,1.22rem); color:var(--bh-gray); transition:color .35s var(--bh-ease); } .sp-catlist__desc{ display:block; font-size:.86rem; line-height:1.55; color:var(--bh-gray); max-width:44ch; overflow:hidden; max-height:0; opacity:0; margin-top:0; transition:max-height .5s var(--bh-ease), opacity .4s var(--bh-ease), margin-top .5s var(--bh-ease); } .sp-catlist__arrow{ font-size:1rem; color:var(--bh-gray); transition:color .35s var(--bh-ease), transform .35s var(--bh-ease); } .sp-catlist__item:hover .sp-catlist__name{ color:var(--bh-navy); } .sp-catlist__item.is-active .sp-catlist__name{ color:var(--bh-navy); } .sp-catlist__item.is-active .sp-catlist__desc{ max-height:4em; opacity:1; margin-top:.4rem; } .sp-catlist__item.is-active .sp-catlist__arrow{ color:var(--bh-orange); transform:translateX(4px); } .sp-catlist__item:focus-visible{ outline:2px solid var(--bh-orange); outline-offset:4px; border-radius:6px; } .sp-catlist__panel{ background:#fff; border-radius:18px; border:1px solid var(--bh-line); padding:clamp(1.5rem,2.8vw,2.1rem); } .sp-catpanel{ transition:opacity .18s ease; } .sp-catpanel[hidden]{ display:none; } .sp-catpanel.is-fading{ opacity:0; } /* app chips — pick which app's detail shows below */ .sp-applist{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.5rem; } .sp-appchip{ display:flex; align-items:center; gap:.6rem; background:var(--bh-bone-2); border:1px solid var(--bh-line); border-radius:999px; padding:.4rem .95rem .4rem .4rem; cursor:pointer; transition:background .25s var(--bh-ease), border-color .25s var(--bh-ease), transform .25s var(--bh-ease); } .sp-appchip__icon{ width:34px; height:34px; border-radius:9px; background:#fff; flex:none; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(4,32,59,.1); } .sp-appchip__icon img{ width:22px; height:22px; object-fit:contain; } .sp-appchip__name{ font-family:var(--bh-sans); font-weight:600; font-size:.84rem; color:var(--bh-ink); white-space:nowrap; transition:color .25s var(--bh-ease); } .sp-appchip:hover{ border-color:var(--bh-navy); transform:translateY(-2px); } .sp-appchip.is-active{ background:var(--bh-navy); border-color:var(--bh-navy); } .sp-appchip.is-active .sp-appchip__name{ color:#fff; } .sp-appchip:focus-visible{ outline:2px solid var(--bh-orange); outline-offset:2px; } /* app detail — always fully visible, no cap, no scroll */ .sp-appdetail{ padding-top:1.4rem; border-top:1px solid var(--bh-line); transition:opacity .18s ease; } .sp-appdetail.is-fading{ opacity:0; } .sp-appdetail__head{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.1rem; } .sp-appdetail__icon{ width:46px; height:46px; object-fit:contain; flex:none; } .sp-appdetail__cat{ font-family:var(--bh-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bh-gray); margin-bottom:.28rem; } .sp-appdetail__title{ font-family:"Space Grotesk", var(--bh-sans); font-weight:700; font-size:1.28rem; letter-spacing:-.01em; color:var(--bh-ink); } .sp-appdetail__body p{ color:var(--bh-gray); font-size:.92rem; line-height:1.68; max-width:60ch; margin-bottom:.9rem; } .sp-appdetail__body p:last-child{ margin-bottom:0; } @media (max-width:880px){ .sp-catlist{ grid-template-columns:1fr; } .sp-catlist__name{ font-size:1.05rem; } .sp-catlist__desc{ font-size:.84rem; } .sp-appchip__name{ font-size:.8rem; } /* js/sp-catlist.js relocates .sp-catlist__panel to sit directly under the tapped category (true accordion) instead of at the bottom of the whole list — give it breathing room wherever it lands */ .sp-catlist__panel{ margin:.9rem 0 1.3rem; } } /* inline video embed (digital-twins "how we build") */ .sp-figure--video{ position:relative; aspect-ratio:16/9; background:#04203B; } .sp-figure--video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* hotels "what we don't do yet" — keep the decorative flicker-crosses off this compact card row (they were landing on the cards at some widths) */ #honest .sp-cross{ display:none; }