/* ========================================================================== Tall Buildings — Interactive Skyline Hydrated by assets/js/bge-skyline.js. All styles scoped under .bge-skyline. ========================================================================== */ .bge-skyline { --bgsk-ink: #1e3a44; /* brand steel-deep — the site's dark text tone (not pure black) */ --bgsk-ink-soft: #5a6b7b; --bgsk-line: #e0d8d2; --bgsk-accent: #ff5500; /* BG&E Mandarin */ --bgsk-accent-dk: #e64d00; --bgsk-accent-100: #ffeee6; --bgsk-accent-300: #f7a990; --bgsk-accent-ink: #c24200; --bgsk-steel: #427a94; --bgsk-steel-dk: #356177; --bgsk-steel-deep: #1e3a44; --bgsk-paper: #ffffff; --bgsk-sky-top: #eef3f6; /* cool steel-blue sky */ --bgsk-sky-bottom: #ffffff; --bgsk-ground: rgba(30, 58, 68, 0.24); /* --- Vox print palette: flat warm newsprint, solid shapes, hard offsets --- */ --bgsk-cream: #f2ede2; /* warm newsprint canvas */ --bgsk-cream-dk: #e7ddc9; /* edge / grid tint */ --bgsk-yellow: #ffb892; /* soft peach focus highlight (subtler than Vox yellow) */ --bgsk-yellow-dk: #f59e76; /* deeper peach */ --bgsk-box: #16323b; /* dark label box — a deepened brand steel, not a pure-black slab */ --bgsk-grid: rgba(30, 58, 68, 0.06); --bgsk-offset: rgba(30, 58, 68, 0.20); /* hard drop-offset colour (replaces blur shadows) */ --bgsk-radius: 2px; /* Vox is SHARP */ --bgsk-shadow: 0 18px 40px -22px rgba(30, 58, 68, 0.4); --bgsk-card-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.18), 0 30px 45px -30px rgba(50, 50, 93, 0.25); --bgsk-ease-in: cubic-bezier(0.16, 1, 0.3, 1); --bgsk-ease-out: cubic-bezier(0.6, 0.6, 0, 1); --bgsk-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* big overshoot — mode morph + pin only */ --bgsk-spring: cubic-bezier(0.22, 1.2, 0.4, 1); /* gentle overshoot — breathe + entrance */ --bgsk-rim: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.85)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.85)); --bgsk-tower-gap: 10px; box-sizing: border-box; max-width: 1400px; margin: 0 auto; padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 48px); color: var(--bgsk-ink); font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } .bge-skyline *, .bge-skyline *::before, .bge-skyline *::after { box-sizing: border-box; } /* Embedded as a page section (shortcode embed="true"): the page's own hero carries the title, so the intro header is omitted in PHP and the interactive sits by itself. The stage stays full-bleed; we just trim the section's top padding since there's no intro header above it. */ .bge-skyline--embed { padding-top: 0; padding-bottom: 0; } /* Ensure the [hidden] attribute always wins over component display rules. */ .bge-skyline [hidden] { display: none !important; } /* Background scroll-lock while a detail modal is open (class set on by lockScroll) — kept top-level on purpose, since it targets the document element outside the .bge-skyline scope. Locks both html and body so it holds whichever the theme uses as the scroll container. */ .bgsk-modal-lock, .bgsk-modal-lock body { overflow: hidden !important; touch-action: none; } /* ---- Intro / stats ---- */ .bgsk-eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bgsk-accent); } .bgsk-title { margin: 0 0 12px; font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; /* DM Serif Display ships at 400 only — never let the global h2 force faux-bold */ font-size: clamp(32px, 5vw, 56px); line-height: 1.04; color: var(--bgsk-ink); } .bgsk-lede { max-width: 60ch; margin: 0 0 28px; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: var(--bgsk-ink-soft); } .bgsk-stats { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px); margin: 0 0 18px; padding: 0; } .bgsk-stat dt { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bgsk-ink-soft); } .bgsk-stat dd { margin: 4px 0 0; font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1; color: var(--bgsk-ink); font-variant-numeric: tabular-nums; } /* ---- Controls ---- */ .bgsk-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .bgsk-field { position: relative; } .bgsk-field--search { flex: 1 1 240px; min-width: 200px; } .bgsk-search, .bgsk-select { width: 100%; height: 44px; padding: 0 16px; border: 1px solid var(--bgsk-line); border-radius: 999px; background: var(--bgsk-paper); font: inherit; font-size: 14px; color: var(--bgsk-ink); transition: border-color 0.15s ease, box-shadow 0.15s ease; appearance: none; } .bgsk-select { padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6b7b' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; } .bgsk-search:focus, .bgsk-select:focus { outline: none; border-color: var(--bgsk-steel); box-shadow: 0 0 0 3px rgba(66, 122, 148, 0.22); } .bgsk-reset { height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; background: var(--bgsk-ink); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .bgsk-reset:hover { background: var(--bgsk-accent); } /* Compact ⇄ Spread segmented control */ .bgsk-mode { display: inline-flex; height: 44px; padding: 4px; gap: 2px; border: 1px solid var(--bgsk-line); border-radius: 999px; background: var(--bgsk-paper); } .bgsk-mode button { border: 0; background: none; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; color: var(--bgsk-ink-soft); cursor: pointer; transition: background 0.22s var(--bgsk-ease-in), color 0.22s ease; } .bgsk-mode button[aria-pressed="true"] { background: var(--bgsk-ink); color: #fff; } .bgsk-mode button[aria-pressed="false"]:hover { color: var(--bgsk-ink); } /* ---- Active filter pills ---- */ .bgsk-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .bgsk-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 999px; background: #eef2f3; color: var(--bgsk-steel-dk); font-size: 13px; font-weight: 500; } .bgsk-pill-close { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(66, 122, 148, 0.16); cursor: pointer; font-size: 12px; line-height: 1; } .bgsk-pill-close:hover { background: var(--bgsk-steel); color: #fff; } /* ---- In-frame UI: the location filter, folded into the top-RIGHT of the stage * (top-left is the title's reading position). ---- */ .bgsk-frame-ui { position: absolute; top: clamp(14px, 2.4vh, 22px); right: clamp(16px, 3vw, 30px); z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: calc(100% - 120px); will-change: opacity; transition: opacity 0.42s var(--bgsk-ease-in); } /* A tall tower (or its measurement pill) can rise up behind the top-right filter and get clipped by it. While that's true, recede the filter so content reads first — it lifts straight back the instant you reach for it, or when the tower scrolls off. Content-priority, control-on-demand. */ /* drop below the name card (z 7) / measurement pill (z 8) so focused content paints cleanly on top — but stay above the towers (the viewport's z 2) so the dimmed filter still reads through a tall silhouette rather than vanishing under it. Both: content on top, chrome receded behind. */ .bge-skyline.is-fui-dim .bgsk-frame-ui { opacity: 0.18; z-index: 6; } .bgsk-frame-ui:hover, .bgsk-frame-ui:focus-within { opacity: 1 !important; z-index: 50 !important; } /* reach for it → fully forward */ .bgsk-field--loc { min-width: 168px; } .bgsk-field--sort { min-width: 150px; } .bgsk-frame-ui .bgsk-select { height: 38px; font-size: 13px; font-weight: 500; background-color: #fff; border: 1.5px solid var(--bgsk-box); border-radius: 2px; box-shadow: 3px 3px 0 0 var(--bgsk-offset); /* flat hard offset — Vox */ } .bgsk-frame-ui .bgsk-active-filters { margin: 0; } .bgsk-frame-ui .bgsk-pill { background: #fff; border-radius: 2px; box-shadow: 3px 3px 0 0 var(--bgsk-offset); } /* Embed-mode section label — a centred title drawn INTO the map. It lives inside .bgsk-zoom (sibling of the track), so: it scales + slides off with the zoom when a tower is focused — clearing the building labels — while staying put during a plain pan; and the viewport's overflow:clip cleans up whatever slides past the edge. z:1 sits it *behind* the track (z:2) so the towers paint over it, like ink on the paper. Embed only — the standalone demo keeps its full .bgsk-intro header. pointer-events:none so a drag passes straight through; the soft paper-toned glow on the heading keeps it legible if a pale tower rises behind it. */ .bgsk-stage-title { position: absolute; top: clamp(18px, 5vh, 58px); left: 50%; transform: translateX(-50%); z-index: 1; width: max-content; max-width: min(72vw, 560px); margin: 0; text-align: center; pointer-events: none; transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } /* Focused a tower → the zoom carries the title up & off; fade it the rest of the way so it never ghosts behind the enlarged building or its labels. Restored when the zoom releases. */ .bge-skyline.is-zoomed .bgsk-stage-title { opacity: 0; } .bgsk-stage-heading { position: relative; isolation: isolate; /* own stacking context so the swash (z:0) sits cleanly behind the text (z:1) */ margin: 0; padding: 0; /* kill Divi's global h2 padding-bottom */ font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; /* DM Serif ships 400 only — block the global h2 faux-bold */ font-size: clamp(22px, 3vw, 34px); line-height: 1.06; color: var(--bgsk-ink); white-space: nowrap; /* keep the one-line title and its swash as a single unit */ } .bgsk-stage-text { position: relative; z-index: 1; } .bgsk-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* Highlighter band behind the title — built in code, no raster. A flat, translucent Mandarin fill (no vertical gradient, so it reads matte instead of like a 3D tube) lets the paper grain show through; the SVG filter (#bgsk-marker) thins the ink unevenly for a paper-absorbed texture and roughens the edges into an organic marker stroke — hand-drawn, no speckle artefacts. */ .bgsk-stage-mark { position: absolute; z-index: 0; left: -0.55em; right: -0.55em; top: 52%; height: 1.04em; transform: translateY(-50%) rotate(-0.8deg); /* a touch of hand tilt */ /* Real highlighter: a felt-tip stroke texture (assets/img/highlight-stroke.png — fine fibre streaks + uneven pen pressure + tapered ends) used as a MASK over a softer-than-Mandarin orange (full accent read too saturated / paint-like). The stroke's own alpha carries the streaky texture and keeps it translucent, so it reads as an actual pen swipe. */ background: #ff7838; -webkit-mask: url("../img/highlight-stroke.png") center / 100% 100% no-repeat; mask: url("../img/highlight-stroke.png") center / 100% 100% no-repeat; pointer-events: none; /* default = fully shown — the JS-dead / reduced-motion fallback (never stuck hidden) */ clip-path: inset(0 -3% 0 0); } /* Paint-in: only when JS is alive + motion is OK (root.bgsk-anim) do we hide the swash, then swipe it on left→right the moment the section scrolls into view (root.is-revealed). Plays once. */ .bge-skyline.bgsk-anim .bgsk-stage-mark { clip-path: inset(0 100% 0 0); } .bge-skyline.bgsk-anim.is-revealed .bgsk-stage-mark { /* Hold ~1s after the section settles so the title reads first, THEN a slower swipe people can see. */ animation: bgsk-mark-paint 0.9s cubic-bezier(0.62, 0, 0.36, 1) 1s forwards; } @keyframes bgsk-mark-paint { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -3% 0 0); } } /* On small screens the two top corners (hint + filters) close in on the centre, and the page's own "Tall Buildings" hero sits right above — drop the floating label rather than crowd them. */ @media (max-width: 760px) { .bgsk-stage-title { display: none; } } /* ---- Mobile: a slide-through timeline (no filters, no modal) ---- The designed labels — the name card + the animated height pill — ride above the active centred tower, same as on desktop. Only the filters and the desktop-only "explore to open" cue are dropped (there's no tap-to-open on mobile). */ @media (max-width: 768px) { .bgsk-frame-ui { display: none; } /* filters cut on mobile */ .bgsk-explore { display: none !important; } /* no tap-to-open → no "explore" cue */ } /* ---- Stage (full-bleed — breaks out of the content container) ---- */ .bgsk-stage { position: relative; width: 100vw; margin-left: calc(50% - 50vw); min-height: 180px; -webkit-user-select: none; user-select: none; /* no text/image highlight while dragging */ background: radial-gradient(rgba(30, 58, 68, 0.04) 1px, transparent 1.5px) 0 0 / 24px 24px, linear-gradient(180deg, #e7eef2 0%, #f4f7f9 60%, #fdfdfe 100%); overflow: clip; } /* Paper grain — the crumpled-paper texture + a fine tooth on top. */ .bgsk-paper { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("../img/skyline-paper.jpg") center / cover no-repeat; opacity: 0.6; filter: contrast(1.36) brightness(1.0); mix-blend-mode: multiply; } .bgsk-paper::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; opacity: 0.16; mix-blend-mode: multiply; } /* Edge feathering — the skyline dissolves into the page rather than hard-clipping. */ .bgsk-stage::before, .bgsk-stage::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(28px, 6vw, 96px); z-index: 3; pointer-events: none; } .bgsk-stage::before { left: 0; background: linear-gradient(90deg, #e7eef2 30%, rgba(231, 238, 242, 0)); } .bgsk-stage::after { right: 0; background: linear-gradient(270deg, #e7eef2 30%, rgba(231, 238, 242, 0)); } /* ---- Soft peach focus highlight — flat + grainy, sits BEHIND the focused building ---- */ .bgsk-focus { position: absolute; left: 0; top: 0; z-index: 1; /* above grid/paper, below the buildings (viewport z 2) */ width: 200px; height: 200px; border-radius: 50%; background: var(--bgsk-yellow); /* soft peach, no stroke, no glow */ opacity: 0; pointer-events: none; overflow: hidden; /* clip the grain to the disc */ transition: opacity 0.28s var(--bgsk-ease-in); will-change: transform; } .bge-skyline.has-hover .bgsk-focus { opacity: 0.6; } /* subtle base — the orange flagship cues are what "intensifies" for clickable */ /* (the focus circle's grain ::after was removed: a mix-blend-mode layer on an element that moves * every frame is a per-frame compositing cost, and the speckle is invisible at the circle's subtlety) */ .bgsk-viewport { z-index: 2; } /* buildings paint over the focus circle */ /* A feather means "more this way." At the actual ends it fades out, so the first/last * building sits crisp against the page and the timeline reads as genuinely finished. */ .bgsk-stage::before, .bgsk-stage::after { transition: opacity 0.3s ease; } .bge-skyline.is-at-start .bgsk-stage::before, .bge-skyline.is-at-end .bgsk-stage::after { opacity: 0; } .bgsk-viewport { position: absolute; inset: 0; overflow: clip; cursor: grab; touch-action: pan-y; /* Fade buildings out over the left gutter so the height-axis labels always * sit on clean sky. The mask lives on the viewport (the one frame that never * pans or zooms), so the fade band is pinned to the left edge — pan/zoom slide * content *through* it. The portaled tooltip (on ) and the ruler labels * (siblings, not children) are unaffected. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent calc(clamp(40px, 7vw, 108px) - 26px), #000 clamp(40px, 7vw, 108px)); mask-image: linear-gradient(90deg, transparent 0, transparent calc(clamp(40px, 7vw, 108px) - 26px), #000 clamp(40px, 7vw, 108px)); } .bge-skyline.is-dragging .bgsk-viewport { cursor: grabbing; } .bgsk-viewport:focus-visible { outline: 2px solid var(--bgsk-accent); outline-offset: -2px; } /* zoom layer — scales the whole skyline toward a hovered building (separate from the pan) */ .bgsk-zoom { position: absolute; inset: 0; transform: translate3d(0, 0, 0) scale(1); /* FIXED origin at the GROUND LINE (baseline), not the viewport bottom — so a zoom grows * buildings upward from a pinned base and the to-scale heights stay accurate. JS expresses * the horizontal anchor as a translate; the origin itself is never re-set. */ transform-origin: 0 calc(100% - var(--bgsk-baseline, 46px)); /* calm ease-out, NO overshoot — both translate (re-target pan) and scale tween together */ transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } .bge-skyline.is-zoom-out .bgsk-zoom { transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); } .bgsk-track { position: absolute; left: 0; bottom: 0; height: 100%; display: flex; align-items: flex-end; gap: 0; /* all spacing comes from per-building --bgsk-pack transforms */ /* symmetric lead-in / lead-out (aligned with the left axis gutter) */ padding: 0 clamp(40px, 7vw, 108px) var(--bgsk-baseline, 46px); will-change: transform; } .bgsk-track.is-chrono { gap: 0; } /* chrono spacing comes from each year-group's own gap (below) */ /* Height sorts have no year-groups, so the towers would sit tight (only the -8px pack between them). Give the flat row the SAME inter-tower gap a year-group uses, so the spacing matches chronological instead of bunching up. (Absolutely-positioned children like the ground strip are out of flex flow, so the gap only spaces the towers.) */ .bgsk-track:not(.is-chrono) { gap: clamp(5px, 0.7vw, 12px); } /* ---- Ruler ---- */ .bgsk-ruler { position: absolute; inset: 0; pointer-events: none; z-index: 1; /* The scale grows WITH the buildings on zoom: scaleY about the ground line by the same * factor JS feeds in, so a 200 m gridline stays level with a zoomed 200 m roof. */ transform: scaleY(var(--bgsk-axis-zoom, 1)); transform-origin: 0 calc(100% - var(--bgsk-baseline, 46px)); transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } .bge-skyline.is-zoom-out .bgsk-ruler { transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); } .bgsk-ruler-line { position: absolute; left: 0; right: 0; } /* faint full-width ledger lines so any building's height reads across the skyline */ .bgsk-ruler-tick { border-top: 1px solid rgba(30, 58, 68, 0.07); } .bgsk-ruler-line--ground { border-top: 1.5px solid var(--bgsk-ground); } /* (height read-out now lives on the building itself — see .bgsk-htag) */ .bgsk-ruler-label { position: absolute; left: clamp(40px, 7vw, 108px); /* counter the ruler's scaleY so the numbers keep their size while their positions spread */ transform: translate(calc(-100% - 8px), 50%) scaleY(calc(1 / var(--bgsk-axis-zoom, 1))); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: rgba(30, 58, 68, 0.55); font-variant-numeric: tabular-nums; white-space: nowrap; } .bgsk-ruler-unit { margin-left: 1.5px; font-size: 8.5px; font-weight: 600; opacity: 0.7; } /* ---- Buildings ---- */ .bgsk-track { position: relative; z-index: 2; } .bgsk-building { position: relative; flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; padding: 0; border: 0; background: none; opacity: 0; z-index: var(--bgsk-z, 1); /* depth: shorter in front (set inline) */ /* one transform carries: pack (mode), spread (breathe push), entrance y + tilt, * and the breathe magnification (--bgsk-mag, growing up from the pavement) */ transform: translate3d(calc(var(--bgsk-pack, 0px) + var(--bgsk-spread, 0px)), var(--bgsk-y, 22px), 0) rotate(var(--bgsk-tilt, 0deg)) scale(var(--bgsk-mag, 1)); transform-origin: bottom center; transition: opacity 0.6s var(--bgsk-ease-in), transform 0.5s var(--bgsk-spring); /* settle-back / entrance — gentle */ cursor: pointer; } .bgsk-building.is-in { opacity: 1; --bgsk-y: 0px; --bgsk-tilt: 0deg; } /* breathe: calm ease-out (NO overshoot — overshoot is what felt seasick), fires as you sweep */ .bge-skyline.has-hover .bgsk-building { transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.6s var(--bgsk-ease-in); } /* mode glide (compact ⇄ spread) */ .bgsk-track.is-morphing .bgsk-building { transition: transform 0.58s var(--bgsk-bounce) !important; } /* initial pack write — no animation */ .bgsk-track.bgsk-no-anim .bgsk-building { transition: none !important; } .bgsk-building.is-focus, .bgsk-building:focus-visible, .bgsk-building.is-pinned { z-index: 200; } .bgsk-building:focus-visible { outline: 2px solid var(--bgsk-steel-deep); outline-offset: 3px; border-radius: 2px; } /* grounded contact-shadow — seats each paper cut-out on the page (no floating) */ .bgsk-building::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 86%; height: 9px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(30, 58, 68, 0.22), transparent 70%); filter: blur(2px); z-index: -2; pointer-events: none; } .bgsk-building--noimg::before { opacity: 0.5; } /* All hits resolve to the button box (not the img/shadow), so relatedTarget stays * clean as the cursor sweeps between overlapping cut-outs. */ .bgsk-building-img, .bgsk-silhouette { pointer-events: none; } .bgsk-building-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; opacity: 0; -webkit-user-drag: none; user-select: none; /* don't ghost-drag the cut-out */ transform-origin: bottom center; /* white paper-cut rim so overlapping silhouettes read as separate cut-outs */ filter: var(--bgsk-rim); transition: opacity 0.55s ease, filter 0.2s ease 0.09s, transform 0.4s var(--bgsk-bounce) 0.09s; } .bgsk-building-img.is-loaded { opacity: 1; } .bgsk-building--info { cursor: default; } .bgsk-building--linked { cursor: pointer; } /* flagships open a project — signal it plainly */ /* hover: brighten + a grounded 2% step-forward (grows up from the pavement) */ /* the FOCUSED building reads in full colour (JS sets .is-focus — proximity hover means the * cursor may not be over the building box, so we can't rely on :hover) */ .bgsk-building.is-focus .bgsk-building-img, .bgsk-building:focus-visible .bgsk-building-img, .bgsk-building.is-pinned .bgsk-building-img { filter: var(--bgsk-rim) brightness(1.05) contrast(1.04) saturate(1.05); } /* A focused FLAGSHIP also gets a soft mandarin glow that hugs the building's silhouette (CSS * filters follow the cut-out's alpha, so it traces the building — not the rectangular PNG), * marking "this one opens". Stacked drop-shadows give an even halo all the way round. */ .bgsk-building--linked.is-focus .bgsk-building-img, .bgsk-building--linked:focus-visible .bgsk-building-img, .bgsk-building--linked.is-pinned .bgsk-building-img { filter: var(--bgsk-rim) brightness(1.05) contrast(1.04) saturate(1.05) drop-shadow(0 0 3px rgba(255, 85, 0, 0.85)) drop-shadow(0 0 7px rgba(255, 85, 0, 0.45)); } /* Mandarin ground-glow under a hovered linked building (blooms after the spread). */ .bgsk-building--linked::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 150%; height: 22px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 85, 0, 0.38), transparent 70%); opacity: 0; transition: opacity 0.22s ease; pointer-events: none; z-index: -1; } .bgsk-building--linked.is-focus::after, .bgsk-building--linked:focus-visible::after { opacity: 1; transition-delay: 0.09s; } /* Dim the rest to spotlight the focused building. */ .bge-skyline.has-hover .bgsk-building:not(.is-focus):not(:focus-visible):not(.is-pinned) .bgsk-building-img { filter: saturate(0.3) opacity(0.4); /* drop the per-pixel rim drop-shadows while dimmed — much cheaper repaint, same look */ transition-delay: 0.12s; } .bge-skyline.has-hover .bgsk-building:not(.is-focus):not(:focus-visible):not(.is-pinned) .bgsk-silhouette { filter: saturate(0.3) opacity(0.4); transition: filter 0.2s ease 0.12s; } /* While the modal is open, nothing in the skyline should linger behind it. */ .bge-skyline.is-modal-open .bgsk-card, .bge-skyline.is-modal-open .bgsk-leader, .bge-skyline.is-modal-open .bgsk-pin, .bge-skyline.is-modal-open .bgsk-building--linked::after { opacity: 0 !important; } .bge-skyline.is-modal-open .bgsk-building-img, .bge-skyline.is-modal-open .bgsk-silhouette { filter: none !important; } /* silhouette fallback when no image */ .bgsk-building--noimg .bgsk-building-img { display: none; } .bgsk-silhouette { width: 100%; height: 100%; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #9fb1c4 0%, #7e93a8 100%); filter: var(--bgsk-rim); } /* leader line — rises from the building top to its label */ .bgsk-leader { position: absolute; bottom: 100%; left: 50%; width: 0; height: 22px; border-left: 1px dashed rgba(30, 58, 68, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 6; } .bgsk-leader { z-index: 205; } .bgsk-building--linked .bgsk-leader { border-left-style: solid; border-left-color: rgba(255, 85, 0, 0.6); } .bgsk-building:hover .bgsk-leader, .bgsk-building:focus-visible .bgsk-leader, .bgsk-building.is-pinned .bgsk-leader { opacity: 1; transition-delay: 0.15s; } /* on-building selection node (premium affordance, lives on the cursor's target) */ .bgsk-pin { position: absolute; bottom: 100%; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; margin-bottom: -4.5px; border-radius: 50%; background: var(--bgsk-accent); box-shadow: 0 0 0 3px var(--bgsk-paper), 0 0 10px rgba(255, 85, 0, 0.5); opacity: 0; transform: scale(0.5); transition: opacity 0.2s ease, transform 0.32s var(--bgsk-bounce) 0.05s; z-index: 212; } .bgsk-building--info .bgsk-pin { display: none; } .bgsk-building--linked:hover .bgsk-pin, .bgsk-building--linked:focus-visible .bgsk-pin { opacity: 1; transform: scale(1); } /* hover label — light "paper" card, on brand */ .bgsk-card { position: absolute; bottom: calc(100% + 22px); left: 50%; transform: translate(-50%, 8px) scale(0.97); transform-origin: bottom center; min-width: 148px; max-width: 224px; padding: 11px 14px; border-radius: 11px; background: var(--bgsk-paper); border: 1px solid rgba(30, 58, 68, 0.08); color: var(--bgsk-ink); text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.26s var(--bgsk-ease-in), transform 0.26s var(--bgsk-ease-in); z-index: 210; box-shadow: var(--bgsk-card-shadow); } /* connector notch under the card */ .bgsk-card::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -7px; margin-top: -1px; border: 7px solid transparent; border-top-color: var(--bgsk-paper); filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.05)); } .bgsk-building:hover .bgsk-card, .bgsk-building:focus-visible .bgsk-card, .bgsk-building.is-pinned .bgsk-card { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: 0.21s; /* lands after the cluster has opened */ } .bgsk-card-name { display: block; font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 14px; line-height: 1.18; color: var(--bgsk-ink); } .bgsk-card-meta { display: block; margin-top: 2px; font-size: 12px; color: #4a5a68; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bgsk-card-height { display: block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--bgsk-ink); font-variant-numeric: tabular-nums; } /* quiet steel link — no underline; the arrow nudges on hover */ .bgsk-card-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--bgsk-steel); transition: color 0.2s ease; } .bgsk-card-cta::after { content: "\2192"; font-weight: 400; transition: transform 0.2s var(--bgsk-ease-in); } .bgsk-building:hover .bgsk-card-cta, .bgsk-building:focus-visible .bgsk-card-cta, .bgsk-building.is-pinned .bgsk-card-cta { color: var(--bgsk-steel-dk); } .bgsk-building:hover .bgsk-card-cta::after, .bgsk-building:focus-visible .bgsk-card-cta::after { transform: translateX(3px); } /* ---- Discipline chips / dots / legend ---- */ .bgsk-chip { display: inline-block; margin-bottom: 7px; padding: 2px 9px; border: 1.5px solid; border-radius: 5px; font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap; } /* Discipline scope — a calm, precise "scope" line (Linear-grade) sitting as a quiet footer under the interactive: a muted micro-label, then disciplines as hairline-divided segments with a quiet tabular count. No icons, no chips. The hairline above separates it from the skyline. */ .bgsk-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 18px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--bgsk-line); color: var(--bgsk-ink); } .bgsk-legend[hidden] { display: none !important; } .bgsk-legend-lead { font-weight: 600; color: var(--bgsk-ink-soft); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; } .bgsk-legend-items { display: inline-flex; flex-wrap: wrap; align-items: baseline; } .bgsk-legend-item { display: inline-flex; align-items: baseline; gap: 7px; padding: 0 16px; border-left: 1px solid var(--bgsk-line); /* hairline segment divider */ } .bgsk-legend-items > .bgsk-legend-item:first-child { padding-left: 0; border-left: 0; } .bgsk-legend-name { font-size: 13px; font-weight: 500; color: var(--bgsk-ink); letter-spacing: 0.005em; } .bgsk-legend-n { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 11px; line-height: 1; color: var(--bgsk-ink-soft); } /* ---- Year groups + colour bands (chronological mode) ---- */ .bgsk-year-group { position: relative; flex: 0 0 auto; display: flex; align-items: flex-end; gap: clamp(5px, 0.7vw, 12px); } .bgsk-year-band { position: absolute; left: 0; right: 0; bottom: -14px; height: 4px; } .bgsk-year-label { position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--bgsk-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } /* "Under construction" bucket — the towers that sort past the completed years. A diagonal hatch (vs a solid colour band) reads as provisional/in-progress, and the spelled-out label kills the cryptic "UC" so it can never be mistaken for a year on the timeline. */ .bgsk-year-group.is-uc .bgsk-year-band { background: repeating-linear-gradient(45deg, var(--bgsk-steel) 0 5px, #c3ccd5 5px 10px); opacity: 0.95; } .bgsk-year-group.is-uc .bgsk-year-label { color: var(--bgsk-steel-deep); letter-spacing: 0.02em; text-transform: uppercase; font-size: 10px; } /* ---- Ground strip (non-chronological sorts) — a base/plinth so the towers don't float. * Hidden in chrono mode, where the year colour bands already anchor the row. ---- */ .bgsk-ground-strip { position: absolute; left: 0; width: 100%; /* JS overrides left + width to span the actual packed building row */ bottom: calc(var(--bgsk-baseline, 46px) - 6px); /* top edge sits at the baseline — towers stand on it */ height: 6px; background: linear-gradient(90deg, var(--bgsk-steel-deep), var(--bgsk-steel) 50%, var(--bgsk-steel-deep)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 10px -6px rgba(30, 58, 68, 0.5); z-index: 1; /* behind the towers (z 20+) — it reads as the ground they sit on */ opacity: 0; transition: opacity 0.45s ease; } .bgsk-track.is-chrono .bgsk-ground-strip { display: none; } .bgsk-track:not(.is-chrono) .bgsk-ground-strip { opacity: 1; } /* ---- Multi-tower clusters ---- */ .bgsk-cluster { position: relative; flex: 0 0 auto; display: flex; align-items: flex-end; gap: var(--bgsk-tower-gap); padding: 0 6px; } .bgsk-cluster .bgsk-building { gap: 0; } .bgsk-cluster-base { position: absolute; left: 0; right: 0; bottom: -6px; height: 8px; border-radius: 3px; background: linear-gradient(180deg, #b8c4d2 0%, #8da0b4 100%); box-shadow: 0 4px 10px -4px rgba(11, 31, 51, 0.4); } .bgsk-cluster-bracket { position: absolute; left: 6px; right: 6px; top: -14px; height: 10px; border: 1px solid var(--bgsk-line); border-bottom: none; border-radius: 6px 6px 0 0; opacity: 0; transition: opacity 0.5s ease; } .bgsk-cluster.is-in .bgsk-cluster-bracket { opacity: 1; } .bgsk-cluster-label { position: absolute; left: 50%; top: -40px; transform: translateX(-50%); white-space: nowrap; text-align: center; opacity: 0; transition: opacity 0.5s ease 0.1s; } .bgsk-cluster.is-in .bgsk-cluster-label { opacity: 1; } .bgsk-cluster-label b { display: block; font-size: 13px; font-weight: 600; color: var(--bgsk-ink); } .bgsk-cluster-label span { font-size: 11px; color: var(--bgsk-ink-soft); } /* ---- Nav arrows ---- */ .bgsk-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 300; width: 46px; height: 46px; border: 1.5px solid var(--bgsk-box); border-radius: 50%; background: #fff; box-shadow: 3px 3px 0 0 var(--bgsk-offset); /* flat hard offset — Vox */ color: var(--bgsk-box); font-size: 24px; line-height: 1; cursor: pointer; transition: transform 0.13s ease, box-shadow 0.13s ease, opacity 0.3s ease; } .bgsk-nav:hover { box-shadow: 1px 1px 0 0 var(--bgsk-offset); } .bgsk-nav--prev:hover, .bgsk-nav--next:hover { transform: translateY(-50%) translate(2px, 2px); } .bgsk-nav--prev { left: 16px; transform: translateY(-50%); } .bgsk-nav--next { right: 16px; transform: translateY(-50%); } .bge-skyline.is-at-start .bgsk-nav--prev, .bge-skyline.is-at-end .bgsk-nav--next { opacity: 0; pointer-events: none; } /* ---- First-load invite: a one-time "you can scroll" hint in the sky headroom. * (A centred bottom cue inherently collides with the year labels, so the invite * sits up top and fades out for good once the user starts exploring; the pulsing * nav arrows + edge-fades are the persistent affordance.) ---- */ .bgsk-drag-hint { position: absolute; left: clamp(18px, 3vw, 44px); top: clamp(16px, 3.5vw, 34px); z-index: 300; display: flex; flex-direction: column; gap: 2px; pointer-events: none; white-space: nowrap; opacity: 0; transform: translateY(-4px); animation: bgsk-hint-in 0.7s var(--bgsk-ease-in) 0.5s forwards; transition: opacity 0.42s var(--bgsk-ease-in), transform 0.42s var(--bgsk-ease-in); } .bgsk-drag-hint.is-gone { opacity: 0 !important; transform: translateY(-6px); animation: none; } .bgsk-drag-main { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.005em; color: var(--bgsk-ink); } .bgsk-drag-arrows { font-size: 13px; letter-spacing: 1px; color: var(--bgsk-steel); } .bgsk-drag-sub { font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--bgsk-ink-soft); } @keyframes bgsk-hint-in { to { opacity: 1; transform: translateY(0); } } /* Earned CTA — sits where the hint was (top-left). Stays hidden + unfocusable (the [hidden] attr) until JS removes it and adds .is-cta, then it eases up + in. A quiet, Linear-grade text CTA: muted lead, confident action line, accent arrow that nudges on hover. Not a button. */ .bgsk-cta { position: absolute; left: clamp(18px, 3vw, 44px); top: clamp(16px, 3.5vw, 34px); z-index: 310; display: inline-flex; flex-direction: column; gap: 3px; text-decoration: none; white-space: nowrap; opacity: 0; transform: translateY(7px); pointer-events: none; transition: opacity 0.42s var(--bgsk-ease-in), transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } .bge-skyline.is-cta .bgsk-cta { opacity: 1; transform: none; pointer-events: auto; } /* A focused tower's name card can land over the top-left chrome (the drag hint or the CTA). While it overlaps, ease that element up and out of the way — restored the instant the label moves off or focus clears. The lift (vs a bare opacity blink) is what reads as graceful rather than abrupt. */ .bge-skyline.is-tl-dim .bgsk-drag-hint:not(.is-gone) { opacity: 0 !important; transform: translateY(-6px); } /* !important beats the hint-in animation */ .bge-skyline.is-cta.is-tl-dim .bgsk-cta { opacity: 0; transform: translateY(-6px); pointer-events: none; } .bgsk-cta-lead { font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--bgsk-ink-soft); } .bgsk-cta-action { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; letter-spacing: 0.005em; color: var(--bgsk-ink); transition: color 0.2s ease; } .bgsk-cta-arrow { flex: none; color: var(--bgsk-accent); transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1); } .bgsk-cta:hover .bgsk-cta-action, .bgsk-cta:focus-visible .bgsk-cta-action { color: var(--bgsk-accent-ink); } .bgsk-cta:hover .bgsk-cta-arrow, .bgsk-cta:focus-visible .bgsk-cta-arrow { transform: translateX(3px); } .bgsk-cta:focus-visible { outline: 2px solid var(--bgsk-accent); outline-offset: 4px; border-radius: 3px; } /* ---- Empty state ---- */ .bgsk-empty { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(2px); } .bgsk-empty-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--bgsk-ink); } /* ---- On-building height tag (portaled to body — sits above the hovered roofline) ---- */ .bgsk-htag { position: fixed; z-index: 2147483645; display: inline-flex; align-items: baseline; gap: 2px; padding: 3px 9px; border-radius: 2px; background: #16323b; /* dark measurement tag — deepened brand steel (portaled: no vars) */ color: #fff; box-shadow: 2px 2px 0 0 rgba(30, 58, 68, 0.2); font-family: 'Inter', system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(4px) scale(0.96); transform-origin: bottom center; transition: opacity 0.18s var(--bgsk-ease-in), transform 0.22s var(--bgsk-ease-in); } .bgsk-htag.is-on { opacity: 1; transform: translateY(0) scale(1); } .bgsk-htag-val { font-size: 15px; font-weight: 700; } .bgsk-htag-unit { font-size: 10px; font-weight: 600; opacity: 0.8; } /* ---- Building label — solid Vox box + handwritten location sticker + discipline badge. * JS sets left/top so it sits just above the focused building. ---- */ .bgsk-titlecard { position: absolute; z-index: 7; display: flex; flex-direction: column; align-items: flex-start; max-width: min(640px, 62vw); pointer-events: none; /* display only — clicking the column opens the project */ } .bgsk-titlecard[hidden] { display: none !important; } /* the solid near-black box */ .bgsk-tc-box { position: relative; display: inline-block; padding: 8px 16px 10px; background: var(--bgsk-box); box-shadow: 4px 4px 0 0 var(--bgsk-offset); /* hard print offset, no blur */ } /* grain inside the box so the black isn't flat-digital (screen = visible tooth) */ .bgsk-tc-box::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 120px 120px; opacity: 0.13; mix-blend-mode: screen; pointer-events: none; } .bgsk-tc-name { position: relative; margin: 0; padding: 0; /* kill Divi p padding */ white-space: nowrap; /* desktop has the horizontal room — keep names on one line */ font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(18px, 1.7vw, 25px); font-weight: 400; line-height: 1.08; letter-spacing: -0.005em; color: #fff; text-wrap: balance; } .bgsk-tc-name::after { content: "."; color: var(--bgsk-accent); } /* Mandarin full stop */ /* second line: the street address, smaller + lighter, inside the dark box under the name */ .bgsk-tc-addr { position: relative; display: block; margin: 3px 0 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.7); } .bgsk-tc-addr[hidden] { display: none !important; } /* discipline badge — white circle on the box's top-right corner (bigger so the icon reads) */ .bgsk-tc-badge { position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; color: var(--bgsk-steel-deep); box-shadow: 2px 2px 0 0 var(--bgsk-offset); } .bgsk-tc-badge[hidden] { display: none !important; } .bgsk-tc-badge svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .bgsk-tc-badge img { width: 21px; height: 21px; object-fit: contain; display: block; } /* the white handwritten location sticker, slightly stuck-on */ .bgsk-tc-sub { display: inline-block; margin: 9px 0 0 8px; padding: 2px 11px 3px; background: #fff; font-family: 'Caveat', 'Comic Sans MS', cursive; font-size: 16px; font-weight: 700; line-height: 1.15; letter-spacing: 0.01em; color: var(--bgsk-ink); text-transform: uppercase; white-space: nowrap; box-shadow: 2px 2px 0 0 var(--bgsk-offset); } /* Vox reveal — the box stamps in, the badge punches, the sticker pops */ .bgsk-tc-box { opacity: 0; transform: translateY(7px) scale(0.96); transform-origin: left bottom; transition: opacity 0.26s ease, transform 0.32s var(--bgsk-ease-in); } .bgsk-tc-badge { opacity: 0; transform: scale(0); transition: opacity 0.18s ease 0.18s, transform 0.42s var(--bgsk-bounce) 0.18s; } .bgsk-tc-sub { opacity: 0; transform: rotate(-2.6deg) translateY(7px) scale(0.82); transform-origin: left center; transition: opacity 0.22s ease 0.13s, transform 0.4s var(--bgsk-bounce) 0.13s; } .bgsk-titlecard.is-on .bgsk-tc-box { opacity: 1; transform: none; } .bgsk-titlecard.is-on .bgsk-tc-badge { opacity: 1; transform: scale(1); } .bgsk-titlecard.is-on .bgsk-tc-sub { opacity: 1; transform: rotate(-2.6deg); } /* Armed cue: the focused building gives a gentle, subtle nudge to invite a click. */ .bge-skyline.is-armed .bgsk-building.is-focus .bgsk-building-img { animation: bgsk-armnudge 1.8s ease-in-out infinite; } @keyframes bgsk-armnudge { 0%, 100% { transform: rotate(0deg); } 35% { transform: rotate(-0.9deg); } 70% { transform: rotate(0.9deg); } } /* quick uniform exit when switching A→B */ .bgsk-titlecard.is-switching .bgsk-tc-box, .bgsk-titlecard.is-switching .bgsk-tc-badge, .bgsk-titlecard.is-switching .bgsk-tc-sub { transition: transform 0.13s var(--bgsk-ease-out), opacity 0.13s ease !important; } /* ---- Hand-drawn "Click to explore" cue — separate absolutely-positioned layer (never * reflows; replaces the jumpy chip). Arrow draws on, then the marker note scribbles in. ---- */ .bgsk-explore { position: absolute; z-index: 8; width: 200px; height: 80px; /* compact, flat footprint — sits low (at the roofline) so it never reaches the centred name box above the roof */ pointer-events: none; /* the click passes through to the armed building */ opacity: 0; transform: translateY(4px) scale(0.96); transform-origin: 86% 72%; /* the tip — it "plants" at the building and the swoop unfurls */ transition: opacity 0.18s var(--bgsk-ease-out), transform 0.3s var(--bgsk-ease-in); } .bgsk-explore[hidden] { display: none !important; } .bgsk-explore-arrow { position: absolute; inset: 0; width: 200px; height: 80px; overflow: visible; } .bgsk-explore-shaft, .bgsk-explore-head { stroke-dasharray: 1; stroke-dashoffset: 1; } .bgsk-explore-shaft { transition: stroke-dashoffset 0.46s cubic-bezier(0.16, 1, 0.3, 1); } .bgsk-explore-head { transition: stroke-dashoffset 0.16s var(--bgsk-ease-out) 0.4s; } .bgsk-explore-text { position: absolute; left: 4px; top: -4px; font-family: 'Caveat', 'Comic Sans MS', cursive; font-size: 22px; font-weight: 700; line-height: 1; color: var(--bgsk-ink); white-space: nowrap; /* text-decoration: underline 2px var(--bgsk-accent); text-underline-offset: 3px; text-decoration-skip-ink: none; */ opacity: 0; transform: rotate(-4deg) translateY(6px) scale(0.94); transform-origin: left bottom; transition: opacity 0.26s var(--bgsk-ease-in) 0.22s, transform 0.34s var(--bgsk-bounce) 0.22s; } /* Flipped (building hugs the LEFT edge → label goes to the RIGHT, arrow mirrored) */ .bgsk-explore.is-flipped { transform-origin: 14% 72%; } .bgsk-explore.is-flipped .bgsk-explore-arrow { transform: scaleX(-1); } .bgsk-explore.is-flipped .bgsk-explore-text { left: auto; right: 4px; transform: rotate(4deg) translateY(6px) scale(0.94); transform-origin: right bottom; } .bge-skyline.is-armed .bgsk-explore.is-flipped.is-on .bgsk-explore-text { transform: rotate(4deg); } /* revealed (armed) */ .bge-skyline.is-armed .bgsk-explore.is-on { opacity: 1; transform: none; } .bge-skyline.is-armed .bgsk-explore.is-on .bgsk-explore-shaft, .bge-skyline.is-armed .bgsk-explore.is-on .bgsk-explore-head { stroke-dashoffset: 0; } .bge-skyline.is-armed .bgsk-explore.is-on .bgsk-explore-text { opacity: 1; transform: rotate(-4deg); } /* fast clean exit when un-armed / switching (no slow reverse-draw) */ .bge-skyline:not(.is-armed) .bgsk-explore { transition: opacity 0.13s var(--bgsk-ease-out), transform 0.13s var(--bgsk-ease-out); } .bge-skyline:not(.is-armed) .bgsk-explore .bgsk-explore-shaft, .bge-skyline:not(.is-armed) .bgsk-explore .bgsk-explore-head { transition: stroke-dashoffset 0.12s var(--bgsk-ease-out); } .bge-skyline:not(.is-armed) .bgsk-explore .bgsk-explore-text { transition: opacity 0.12s var(--bgsk-ease-out), transform 0.12s var(--bgsk-ease-out); } /* ---- Height measurement — its own element: count-up pill + a drop-tick to the roofline ---- */ .bgsk-measure { position: absolute; z-index: 7; display: flex; flex-direction: column; align-items: center; pointer-events: none; } .bgsk-measure[hidden] { display: none !important; } .bgsk-measure-pill { position: relative; overflow: hidden; /* clip the paper grain to the chip */ display: inline-flex; align-items: baseline; padding: 4px 11px 5px; border-radius: 2px; /* White measurement chip — secondary to the near-black title box. Treated like the location sticker: paper fill held up by a flat offset alone (no stroke — a hard border made it read heavier than the sticker and fight the solid title box). */ background: #fff; color: var(--bgsk-ink); box-shadow: 3px 3px 0 0 var(--bgsk-offset); font-family: 'Inter', system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Handcrafted print tooth — the same feTurbulence grain the title box carries, but MULTIPLIED onto the paper (dark speckle on white) with its own seed, so the chip reads as a hand-cut measurement sticker rather than a flat digital pill. */ .bgsk-measure-pill::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 110px 110px; opacity: 0.16; mix-blend-mode: multiply; pointer-events: none; } .bgsk-measure-val { position: relative; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; } /* above the grain */ .bgsk-measure-unit { position: relative; font-size: 11px; font-weight: 600; opacity: 0.7; margin-left: 3px; } /* the drop-tick: a thin Mandarin line from the pill down to the roofline */ .bgsk-measure-tick { width: 2px; height: 20px; background: var(--bgsk-accent); transform: scaleY(0); transform-origin: top center; } .bgsk-measure-tick::after { /* a small cap that lands on the roofline */ content: ""; position: absolute; bottom: 0; left: 50%; width: 12px; height: 2px; margin-left: -6px; background: var(--bgsk-accent); } /* reveal: pill stamps in, the tick draws DOWN to the roof, number counts up (JS) */ .bgsk-measure-pill { opacity: 0; transform: translateY(-6px) scale(0.9); transform-origin: center bottom; transition: opacity 0.22s ease, transform 0.34s var(--bgsk-bounce); } .bgsk-measure-tick { position: relative; transition: transform 0.34s var(--bgsk-ease-in) 0.12s; } .bgsk-measure.is-on .bgsk-measure-pill { opacity: 1; transform: none; } .bgsk-measure.is-on .bgsk-measure-tick { transform: scaleY(1); } .bgsk-measure.is-switching .bgsk-measure-pill, .bgsk-measure.is-switching .bgsk-measure-tick { transition: transform 0.13s var(--bgsk-ease-out), opacity 0.13s ease !important; } /* ---- Detail modal (centred "project dossier") ---- */ /* Portaled to , so it carries its own tokens + hidden rule. */ .bgsk-detail { --bgsk-ink: #1e3a44; /* brand steel-deep — match the site's dark text tone (not pure black) */ --bgsk-ink-soft: #5a6b7b; --bgsk-line: #e0d8d2; --bgsk-accent: #ff5500; --bgsk-accent-dk: #e64d00; --bgsk-accent-100: #ffeee6; --bgsk-accent-ink: #c24200; --bgsk-steel: #427a94; --bgsk-steel-dk: #356177; --bgsk-steel-deep: #1e3a44; --bgsk-paper: #ffffff; --bgsk-sky-top: #eef3f6; --bgsk-card-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.18), 0 30px 45px -30px rgba(50, 50, 93, 0.25); --bgsk-ease-in: cubic-bezier(0.16, 1, 0.3, 1); position: fixed; inset: 0; z-index: 2147483646; /* above the fixed site header (z 2147483640) */ display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); font-family: 'Inter', system-ui, -apple-system, sans-serif; } .bgsk-detail[hidden] { display: none !important; } /* the modal is portaled out of .bge-skyline, so it needs its own [hidden] guard */ .bgsk-detail [hidden] { display: none !important; } .bgsk-detail, .bgsk-detail *, .bgsk-detail *::before, .bgsk-detail *::after { box-sizing: border-box; } .bgsk-detail-backdrop { position: absolute; inset: 0; background: rgba(30, 58, 68, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.24s ease; } .bgsk-detail.is-open .bgsk-detail-backdrop { opacity: 1; } .bgsk-detail-panel { position: relative; display: flex; width: min(960px, 94vw); min-height: clamp(380px, 54vh, 500px); /* consistent footprint, not dictated by copy length */ max-height: 86vh; background: #fff; border: 1px solid var(--bgsk-line); border-radius: 12px; box-shadow: 0 40px 80px -30px rgba(30, 58, 68, 0.55), 0 12px 30px -18px rgba(0, 0, 0, 0.3); overflow: hidden; opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.28s var(--bgsk-ease-in), transform 0.28s var(--bgsk-ease-in); } .bgsk-detail.is-open .bgsk-detail-panel { opacity: 1; transform: translateY(0) scale(1); } .bgsk-detail-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.4); color: var(--bgsk-ink); font-size: 26px; line-height: 1; cursor: pointer; transition: background 0.15s ease; } .bgsk-detail-close:hover { background: var(--bgsk-line); } .bgsk-detail-media { flex: 0 0 42%; display: flex; align-items: flex-end; justify-content: center; padding: 32px 24px 0; background: linear-gradient(180deg, var(--bgsk-sky-top) 0%, #fff 100%); overflow: hidden; } .bgsk-detail-img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: bottom center; } /* once the real project photo loads, fill the media panel edge-to-edge */ .bgsk-detail-img.is-photo { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center; } .bgsk-detail-media:has(.is-photo) { padding: 0; align-items: stretch; } .bgsk-detail-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 40px 40px 0; /* the footer CTA supplies the bottom space */ overflow: hidden; /* the inner scroll region owns the overflow */ } /* scrollable content region — keeps the CTA footer out of the scroll so text can't bleed through it */ .bgsk-detail-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; overflow-y: auto; padding-bottom: 20px; } @media (max-width: 760px) { .bgsk-detail-panel { flex-direction: column; width: 100%; min-height: 0; max-height: 90vh; } .bgsk-detail-media { flex: 0 0 auto; height: 190px; padding: 22px 22px 0; } .bgsk-detail-body { padding: 26px 24px 0; } } /* discipline — brand sector-tag pill */ .bgsk-detail-disc { display: inline-block; margin: 0 0 14px; padding: 4px 11px; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bgsk-accent); background: var(--bgsk-accent-100); /* BGE mandarin */ border-radius: 999px; } .bgsk-detail-disc[hidden] { display: none !important; } .bgsk-detail-name { margin: 0 0 6px; font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; /* DM Serif Display is 400-only — match the project pages, no faux-bold */ font-size: clamp(28px, 3.2vw, 38px); line-height: 1.08; color: var(--bgsk-ink); text-wrap: balance; } /* padding:0 kills Divi's global `p { padding-bottom: 1em }` (~15px), which otherwise stacks on the intended 22px margin and leaves an oversized gap under the location line. */ .bgsk-detail-location { margin: 0 0 22px; padding: 0; font-size: 15px; color: var(--bgsk-ink-soft); } /* compact facts strip — Height · Completed · Client sit as 3 columns in one row */ .bgsk-detail-facts { display: flex; flex-wrap: wrap; gap: 16px 40px; width: 100%; margin: 0 0 22px; padding: 18px 0; border-top: 1px solid var(--bgsk-line); border-bottom: 1px solid var(--bgsk-line); } .bgsk-detail-facts > div { display: flex; flex-direction: column; min-width: 0; } .bgsk-detail-facts dt { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bgsk-ink-soft); } /* all three values share one family (DM Serif) so there's no sans/serif mismatch */ .bgsk-detail-facts dd { margin: 5px 0 0; font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 21px; line-height: 1.1; color: var(--bgsk-ink); font-variant-numeric: tabular-nums; } .bgsk-fact--client[hidden] { display: none !important; } .bgsk-fact--client dd { font-size: 18px; line-height: 1.3; font-variant-numeric: normal; text-wrap: balance; } /* names, not figures */ /* Adaptive: a short client completes the 3-column row; a long one drops to its own full-width line (set by JS) where it can wrap comfortably instead of cramping a narrow column. */ .bgsk-fact--client.is-long { flex: 1 1 100%; } /* long names: a hair smaller + roomier leading + balanced lines so the wrap reads cleanly (no lone "Zone Authority" orphan) instead of one long line and a stub */ .bgsk-fact--client.is-long dd { font-size: 16px; line-height: 1.42; max-width: 42ch; } /* intro paragraphs — fade in once the copy resolves */ .bgsk-detail-summary { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s var(--bgsk-ease-in); } .bgsk-detail-summary.is-in { opacity: 1; transform: none; } .bgsk-detail-summary p { margin: 0 0 12px; font-size: 15px; line-height: 1.62; color: var(--bgsk-ink); } .bgsk-detail-summary p:last-child { margin-bottom: 0; } /* ---- Loading state — gentle shimmer while uncached project copy is fetched ---- */ .bgsk-detail-skeleton { display: none; width: 100%; } .bgsk-detail.is-loading .bgsk-detail-skeleton { display: block; } .bgsk-detail.is-loading .bgsk-detail-summary { display: none; } .bgsk-skel-line { display: block; height: 13px; margin-bottom: 13px; border-radius: 7px; background: linear-gradient(100deg, #eaf0f3 28%, #f6fafb 48%, #eaf0f3 68%); background-size: 220% 100%; animation: bgsk-shimmer 1.25s ease-in-out infinite; } .bgsk-skel-line:nth-child(2) { animation-delay: 0.08s; } .bgsk-skel-line:nth-child(3) { animation-delay: 0.16s; } .bgsk-skel-line--short { width: 52%; animation-delay: 0.24s; } /* media: a soft light-sweep over the gradient/cutout while loading */ .bgsk-detail-img { position: relative; z-index: 1; } .bgsk-detail.is-loading .bgsk-detail-media::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%); background-size: 220% 100%; animation: bgsk-shimmer 1.5s ease-in-out infinite; } @keyframes bgsk-shimmer { from { background-position: 180% 0; } to { background-position: -120% 0; } } /* CTA out to the full project page — brand mandarin button with a sliding arrow */ .bgsk-detail-link { flex: 0 0 auto; align-self: stretch; /* solid footer, outside the scroll — never overlaps copy */ display: inline-flex; align-items: center; gap: 8px; padding: 16px 0 24px; border-top: 1px solid var(--bgsk-line); background: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--bgsk-accent); text-decoration: none; /* BGE mandarin */ } .bgsk-detail-link-arrow { transition: transform 0.2s var(--bgsk-ease-in); } .bgsk-detail-link:hover { color: var(--bgsk-accent-dk); } .bgsk-detail-link:hover .bgsk-detail-link-arrow { transform: translateX(4px); } .bgsk-detail-link:focus-visible { outline: 2px solid var(--bgsk-accent); outline-offset: 3px; border-radius: 2px; } /* ---- Non-flagship "spec card": a tower with no project page. Photo + facts + one evergreen line, * no write-up, no CTA footer — never a dead end, never an apology. ---- */ .bgsk-detail-portfolio { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--bgsk-ink-soft); } .bgsk-detail-portfolio[hidden] { display: none !important; } .bgsk-detail:not(.is-flagship) .bgsk-detail-summary, .bgsk-detail:not(.is-flagship) .bgsk-detail-skeleton, .bgsk-detail:not(.is-flagship) .bgsk-detail-link { display: none !important; } .bgsk-detail:not(.is-flagship) .bgsk-detail-body { padding-bottom: 40px; } /* ========================================================================== Mobile / reduced-motion fallback: vertical ranked list ========================================================================== */ .bgsk-list { display: flex; flex-direction: column; gap: 10px; } .bgsk-list-item { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--bgsk-line); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; font: inherit; } .bgsk-list-item:hover { border-color: var(--bgsk-accent); } .bgsk-list-thumb { display: flex; align-items: flex-end; justify-content: center; height: 56px; } .bgsk-list-thumb img { max-width: 100%; max-height: 56px; object-fit: contain; object-position: bottom; } .bgsk-list-info { min-width: 0; } .bgsk-list-name { display: block; font-size: 15px; font-weight: 600; color: var(--bgsk-ink); } .bgsk-list-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--bgsk-ink-soft); } .bgsk-list-bar { position: relative; height: 6px; margin-top: 8px; border-radius: 3px; background: var(--bgsk-line); overflow: hidden; } .bgsk-list-bar span { position: absolute; inset: 0; right: auto; background: var(--bgsk-accent); border-radius: 3px; } .bgsk-list-height { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 20px; color: var(--bgsk-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } /* When JS chooses the list view, hide the interactive stage chrome. */ .bge-skyline.is-list .bgsk-stage { display: none; } .bge-skyline:not(.is-list) .bgsk-list { display: none !important; } @media (max-width: 768px) { .bgsk-controls { gap: 8px; } .bgsk-field--search { flex-basis: 100%; } .bgsk-detail-panel { width: 100%; } /* mobile: not enough width for long names on one line — let them wrap again */ .bgsk-titlecard { max-width: min(34ch, 78vw); } .bgsk-tc-name { white-space: normal; max-width: 17ch; } } /* Respect reduced motion. */ @media (prefers-reduced-motion: reduce) { .bge-skyline * { transition: none !important; animation: none !important; } /* keep the pack transform (compact packing still applies) — just no entrance motion */ .bgsk-building { opacity: 1; --bgsk-y: 0px; --bgsk-tilt: 0deg; } /* title label + measurement: show fully formed, no draw/slide */ .bgsk-tc-box, .bgsk-tc-badge, .bgsk-measure-pill { transform: none !important; opacity: 1 !important; } .bgsk-measure-tick { transform: scaleY(1) !important; } .bgsk-tc-sub { transform: rotate(-2.6deg) !important; opacity: 1 !important; } /* explore cue: show fully-drawn, no motion */ .bgsk-explore { opacity: 1 !important; transform: none !important; } /* modal is portaled out of .bge-skyline, so silence its shimmer here too (static placeholder) */ .bgsk-skel-line, .bgsk-detail.is-loading .bgsk-detail-media::after { animation: none !important; background: #eef2f5 !important; } .bgsk-explore-shaft, .bgsk-explore-head { stroke-dashoffset: 0 !important; } .bgsk-explore-text { opacity: 1 !important; transform: rotate(-4deg) !important; } .bgsk-explore.is-flipped .bgsk-explore-text { transform: rotate(4deg) !important; } } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---- Skyline section spacing (Tall Buildings page) ---- Drop the divider line under the skyline and tighten the air above + below it, so the interactive reads as one calm block instead of floating between two big 112px-padded sections. Scoped by the presence of .bge-skyline, so it only affects the page the skyline is embedded on. :has(+ .bge-skyline) targets the description section directly above; .bge-skyline + .section the projects grid below. */ .section:has(+ .bge-skyline) { padding-bottom: clamp(36px, 5vw, 64px); } .bge-skyline + .section.border-top { border-top-color: transparent; /* the unnecessary separator under the skyline */ padding-top: clamp(40px, 6vw, 72px); }