/* * Vandelay Investor Offerings — design system (spec §9). * * Two type worlds: * - Chrome (gate, grid nav, buttons): portal-standard, so the app reads as * part of the portal. * - Prospectus pages: a print-faithful island — Jost display + Libre * Baskerville serif, cream "paper", themed per offering via CSS custom * properties fed from Offering.brand_primary_color / brand_accent_color. * * Fonts are declared with system fallbacks; @import of Google Fonts is added in * the template (Jost, Libre Baskerville) — kept out of this file so the * chrome renders even offline. */ :root { /* §9.1 color tokens (sampled from source PDFs) */ --paper: #F0EFEC; --ink-navy: #282868; --accent-coral: #E85850; --accent-gold: #B3A379; --map-blue: #88D8F0; /* Per-offering brand overrides (set inline on the prospectus root) */ --brand-primary: #282868; --brand-accent: #B3A379; --brand-pop: #B3A379; /* bright highlight; defaults to accent until a brand sets one */ /* Chrome neutrals */ --chrome-bg: #14142b; --chrome-surface: #1e1e3a; --chrome-text: #f4f3f0; --chrome-muted: #a9a8c0; --chrome-border: rgba(255, 255, 255, 0.12); --font-display: "Jost", "Century Gothic", system-ui, sans-serif; --font-serif: "Libre Baskerville", "Baskerville", Georgia, serif; --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-ui); background: var(--chrome-bg); color: var(--chrome-text); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; } /* --- Chrome layout --- */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--chrome-border); } .site-header__brand { display: flex; align-items: baseline; gap: 0.9rem; } .site-header .wordmark { font-family: var(--font-serif); font-weight: 700; letter-spacing: 0.02em; font-size: 1.05rem; color: var(--chrome-text); text-decoration: none; display: inline-flex; align-items: center; } /* Uploaded site logo replaces the text wordmark; sized to the header height. */ .site-header .wordmark__logo { height: 30px; width: auto; max-width: 260px; display: block; } @media (max-width: 640px) { .site-header .wordmark__logo { height: 26px; max-width: 190px; } } .site-header .crumb { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.68rem; color: var(--accent-gold); } .site-header .crumb::before { content: "/"; color: var(--chrome-muted); margin-right: 0.9rem; } .site-header nav { display: flex; align-items: center; } .site-header__user { color: var(--chrome-muted); font-size: 0.8rem; } .site-header nav a { color: var(--accent-gold); text-decoration: none; margin-left: 1.25rem; font-size: 0.85rem; } .site-header nav a:hover { color: var(--chrome-text); } .container { max-width: 960px; margin: 0 auto; padding: 2.5rem 1.5rem; } .container--narrow { max-width: 460px; } .container--wide { max-width: 1500px; } /* --- Messages --- */ .messages { list-style: none; padding: 0; margin: 0 0 1.5rem; } .messages li { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 0.5rem; font-size: 0.9rem; background: var(--chrome-surface); border: 1px solid var(--chrome-border); } .messages li.error { border-color: var(--accent-coral); } /* --- Forms & buttons (portal-standard chrome) --- */ .field { margin-bottom: 1.1rem; } .field label { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--chrome-muted); margin-bottom: 0.4rem; } .field input, .field textarea { width: 100%; padding: 0.7rem 0.85rem; border-radius: 8px; border: 1px solid var(--chrome-border); background: var(--chrome-surface); color: var(--chrome-text); font-family: inherit; font-size: 0.95rem; } .field .errorlist { color: var(--accent-coral); font-size: 0.8rem; list-style: none; padding: 0; margin: 0.35rem 0 0; } .btn { display: inline-block; padding: 0.75rem 1.4rem; border-radius: 8px; border: none; background: var(--accent-gold); color: #1a1a1a; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; cursor: pointer; text-decoration: none; } .btn:hover { filter: brightness(1.05); } .btn--ghost { background: transparent; border: 1px solid var(--chrome-border); color: var(--chrome-text); } .btn--block { display: block; width: 100%; text-align: center; } .muted { color: var(--chrome-muted); font-size: 0.88rem; } .lead { font-size: 1.05rem; color: var(--chrome-muted); } h1 { font-family: var(--font-display); font-weight: 300; letter-spacing: 0.06em; } /* --- Offerings grid: cards = miniature prospectus covers (§9.5) --- */ .offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; } .offer-card { --brand-primary: #282868; --brand-accent: #B3A379; position: relative; display: flex; flex-direction: column; aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; text-decoration: none; background: var(--brand-primary); color: #fff; border: 1px solid rgba(255,255,255,0.08); transition: transform 0.15s ease, box-shadow 0.15s ease; } .offer-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.35); } .offer-card__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.4rem; gap: 0.6rem; } /* Status badge — outlined, top-right, like the deck cards. */ .offer-card__status { position: absolute; top: 0.85rem; right: 0.85rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.56rem; padding: 0.3rem 0.5rem; border: 1px solid var(--brand-accent); color: var(--brand-accent); border-radius: 3px; } /* A concept logo stands in for the title when one exists (it already carries the brand name); otherwise the name is set in the concept's own brand font. The mark sits in a FIXED-height zone so the city/kicker below line up across cards no matter how tall or short each brand's logo is. */ .offer-card__logo { height: 92px; /* fixed zone — logo is centred within it (contain) */ max-width: 72%; object-fit: contain; margin-bottom: 0.2rem; } .offer-card__title { min-height: 92px; /* same lockup zone for the text fallback */ display: flex; align-items: center; justify-content: center; margin-bottom: 0.2rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 300; font-size: 1.4rem; line-height: 1.15; color: var(--brand-accent); } .offer-card__city { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.82rem; color: rgba(255,255,255,0.82); } .offer-card__kicker { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.6rem; color: var(--brand-accent); opacity: 0.75; margin-top: 0.2rem; } /* Footer bar — a darker shade of the card, with a labelled figure at each end. */ .offer-card__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; padding: 0.85rem 1.1rem 0.95rem; background: rgba(0,0,0,0.20); } .offer-card__stat { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .offer-card__stat--right { text-align: right; align-items: flex-end; } .offer-card__stat-label { font-size: 0.58rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.6); } .offer-card__stat-value { font-size: 0.9rem; font-weight: 500; color: #fff; } /* Closed / archived offerings read muted, like the deck's greyed-out card. */ .offer-card--closed, .offer-card--archived { background: #2a2a30; color: rgba(255,255,255,0.6); } .offer-card--closed .offer-card__title, .offer-card--archived .offer-card__title, .offer-card--closed .offer-card__status, .offer-card--archived .offer-card__status, .offer-card--closed .offer-card__kicker, .offer-card--archived .offer-card__kicker { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.3); } /* Locked offering — a teaser card (full brand look) that can't be opened. Keeps the brand background but reads inert: no pointer, no hover lift, a "Coming Soon" kicker with a small lock glyph. Tilt/spotlight are skipped in JS. */ .offer-card--locked { cursor: default; } .offer-card--locked:hover { transform: none; box-shadow: none; } .offer-card__lock { display: inline-flex; align-items: center; gap: 0.4em; color: var(--brand-accent); } .offer-card__lock::before { content: "🔒"; font-size: 0.9em; filter: grayscale(1) opacity(0.85); } /* ===================================================================== */ /* Opportunities page — "wow" layer: ambient backdrop, animated grid, */ /* staggered reveal, cursor spotlight + 3D tilt, count-up stats. Scoped to */ /* .page-opportunities; degrades without JS and honours reduced-motion. */ /* ===================================================================== */ .page-opportunities { /* Full-height, viewport-anchored so the backdrop never seams at the bottom of the content or scrolls away underneath it. */ min-height: 100vh; background: radial-gradient(1100px 620px at 12% -8%, rgba(64, 64, 150, 0.40), transparent 60%), radial-gradient(900px 600px at 108% -5%, rgba(179, 163, 121, 0.14), transparent 55%), #0a0a18; background-attachment: fixed; } .page-opportunities .site-header { position: relative; z-index: 3; } .page-opportunities .container { position: relative; z-index: 1; } /* Fixed ambient layers behind all content (main is not a stacking context, so these compete with .container in the body context — hence z-index below). */ .fx-backdrop, .fx-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .fx-backdrop { overflow: hidden; } .fx-backdrop .orb { position: absolute; border-radius: 50%; filter: blur(90px); mix-blend-mode: screen; opacity: 0.5; } .fx-backdrop .orb--a { width: 48vw; height: 48vw; top: -10vw; right: -6vw; background: radial-gradient(circle, rgba(179, 163, 121, 0.55), transparent 62%); animation: orb-a 22s ease-in-out infinite alternate; } .fx-backdrop .orb--b { width: 52vw; height: 52vw; bottom: -18vw; left: -10vw; background: radial-gradient(circle, rgba(72, 72, 178, 0.60), transparent 62%); animation: orb-b 27s ease-in-out infinite alternate; } .fx-backdrop .orb--c { width: 40vw; height: 40vw; top: 30%; left: 42%; background: radial-gradient(circle, rgba(60, 150, 190, 0.30), transparent 62%); animation: orb-c 32s ease-in-out infinite alternate; } @keyframes orb-a { to { transform: translate(-7vw, 9vw) scale(1.15); } } @keyframes orb-b { to { transform: translate(9vw, -7vw) scale(1.12); } } @keyframes orb-c { to { transform: translate(-11vw, -5vw) scale(1.22); } } .fx-grid { background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(circle at 50% 24%, #000, transparent 74%); mask-image: radial-gradient(circle at 50% 24%, #000, transparent 74%); opacity: 0.6; animation: grid-drift 26s linear infinite; } @keyframes grid-drift { to { background-position: 48px 48px, 48px 48px; } } /* Heading + lead reveal (only armed once JS flags motion support). */ .motion-fx .page-opportunities .reveal { opacity: 0; transform: translateY(16px); } .motion-fx .page-opportunities .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); } .page-opportunities h1 { position: relative; display: inline-block; } .page-opportunities h1::after { content: ""; position: absolute; left: 0; bottom: -0.35rem; height: 2px; width: 100%; background: linear-gradient(90deg, var(--accent-gold), transparent); transform: scaleX(0); transform-origin: left; } .motion-fx .page-opportunities h1.is-in::after { animation: line-draw 1s .35s ease forwards; } @keyframes line-draw { to { transform: scaleX(1); } } /* Cards: staggered reveal + interactive spotlight / tilt / glow. */ .page-opportunities .offer-card { transform-style: preserve-3d; will-change: transform; --d: calc(var(--i, 0) * 80ms); transition: opacity .7s ease var(--d), transform .6s cubic-bezier(.2, .7, .2, 1) var(--d), box-shadow .35s ease; } .motion-fx .page-opportunities .offer-card { opacity: 0; transform: translateY(24px); } .motion-fx .page-opportunities .offer-card.is-in { opacity: 1; transform: none; } /* Cursor spotlight (under the content, over the card background). */ .page-opportunities .offer-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.16), transparent 60%); opacity: 0; transition: opacity .3s ease; } .page-opportunities .offer-card.is-live::before { opacity: 1; } /* Glowing gradient edge — a 1px gradient ring revealed via mask on hover. */ .page-opportunities .offer-card::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 1px; background: linear-gradient(130deg, transparent 20%, var(--brand-accent), transparent 80%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .35s ease; } .page-opportunities .offer-card.is-live::after, .page-opportunities .offer-card:hover::after { opacity: 0.9; } .page-opportunities .offer-card > * { position: relative; z-index: 1; } .page-opportunities .offer-card.is-live { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06); } /* Soft pulse on the live/upcoming status badge (never on closed cards). */ .page-opportunities .offer-card:not(.offer-card--closed):not(.offer-card--archived):not(.offer-card--locked) .offer-card__status { animation: badge-pulse 3s ease-in-out infinite; } @keyframes badge-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(179, 163, 121, 0); } 50% { box-shadow: 0 0 14px 0 rgba(179, 163, 121, 0.5); } } @media (prefers-reduced-motion: reduce) { .fx-backdrop .orb, .fx-grid, .page-opportunities .offer-card__status { animation: none !important; } .motion-fx .page-opportunities .reveal, .motion-fx .page-opportunities .offer-card { opacity: 1 !important; transform: none !important; transition: none !important; } .page-opportunities h1::after { transform: scaleX(1); } } /* --------------------------------------------------------------------- */ /* Prospectus island (§9.2–9.5) — themed per offering via --brand-* vars */ /* --------------------------------------------------------------------- */ .prospectus { /* Dark, readable, brand-tinted ink — dark green for Jack & Harry's, dark navy for Hudson House. Falls back to the fixed navy on browsers without color-mix. */ --ink: color-mix(in srgb, var(--brand-primary) 72%, #000); background: var(--paper); color: var(--ink, var(--ink-navy)); } .prospectus .band { padding: 4rem 2.75rem; } /* The Request CTA follows the Investment Offering directly — collapse the doubled band padding so it sits close under the terms box rather than floating away. */ .prospectus .section--investment_offering .band { padding-bottom: 1rem; } .prospectus #request { padding-top: 1rem; } /* Screenshot-deterrent watermark: the signed-in viewer's email, tiled faintly and fixed to the viewport so it rides over the page as you scroll. Never intercepts clicks. The repeating tile image is built from the email in JS. */ .viewer-watermark { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 9998; } .viewer-watermark__inner { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; transform: rotate(-26deg); /* Darkness is per-offering: --wm-viewer-opacity (a 0–40 percent) is set inline. */ opacity: calc(var(--wm-viewer-opacity, 5) / 100); background-repeat: repeat; } /* Two sections rendered side by side (e.g. demographics + map). The shared row supplies the band padding/measure; the inner bands collapse to fill each column. */ .prospectus .section-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; max-width: 1100px; margin: 0 auto; padding: 4rem 2.75rem; } .prospectus .section-pair .band { padding: 0; } .prospectus .section-pair .band__inner { max-width: none; margin: 0; } .prospectus .section-pair .location-map { height: 100%; min-height: 380px; } /* Drop the eyebrow kicker inside a pair so both columns start at the heading and the two headings line up. */ .prospectus .section-pair .kicker { display: none; } @media (max-width: 820px) { .prospectus .section-pair { grid-template-columns: 1fr; gap: 3rem; } } /* Wide content measure so the deck fills the page horizontally (tables, budget, gallery, cover). Running prose is capped separately for readability. */ .prospectus .band__inner { max-width: 1100px; margin: 0 auto; } /* Fine print / long narrative keeps a comfortable line length inside the wide band. */ .prospectus .legal { max-width: 78ch; } /* Brand background figure (deck-style watermark, e.g. the Hudson House pineapple). Opt-in per section; the `--wm` image URL is set inline on the section. It sits behind the section content (which has no opaque background on light bands) and is clipped to the section, subtle. Position, size and tilt are set per section via inline CSS vars: `--wm-x`/`--wm-y` are percentages measured to the figure's centre (so 0/50/100 = far edge/centred/far edge), `--wm-scale` is a percent multiplier, and `--wm-rotate` tilts it. The box is anchored by its centre so rotation and positioning pivot in place. The section is its own stacking context with an explicit paper background, and the figure sits at a negative z-index so it paints just above that paper and below the normal-flow content — content stays on top WITHOUT being given a positive z-index. That combination matters: an earlier version lifted the content with `z-index: 1`, which trapped the `mix-blend-mode: multiply` used by floorplan/rendering images inside an isolated stacking context with no paper behind them, so their baked-in white background reappeared. Here the section's own paper is the backdrop, so those images keep blending onto the paper — and onto the faint watermark behind them. */ .prospectus section.has-watermark { position: relative; overflow: hidden; isolation: isolate; background: var(--paper); } .prospectus section.has-watermark::before { content: ""; position: absolute; z-index: -1; left: var(--wm-x, 6%); top: var(--wm-y, 50%); /* --wm-shift is updated on scroll for a subtle parallax drift (set by prospectus-fx.js; stays 0 without JS or under reduced-motion). */ transform: translate(-50%, calc(-50% + var(--wm-shift, 0px))) rotate(var(--wm-rotate, 0deg)); width: calc(min(46%, 520px) * var(--wm-scale, 100) / 100); height: calc(128% * var(--wm-scale, 100) / 100); background: var(--wm) no-repeat center center / contain; opacity: calc(var(--wm-opacity, 12) / 100); pointer-events: none; will-change: transform; } /* Duotone tint (opt-in per section): fill the figure's shape with a brand gradient by using the image as a mask instead of painting it directly. Only sensible for a solid silhouette — a multi-colour logo would flatten to the gradient. Overrides the flat-image background above (kept adjacent so source order wins at equal specificity). */ .prospectus section.has-watermark--tint::before { background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); -webkit-mask: var(--wm) no-repeat center center / contain; mask: var(--wm) no-repeat center center / contain; } .prospectus .band--brand { background: var(--brand-primary); color: #fff; text-align: center; } /* Cover (§9.3 #1) — full-height brand lockup, deck-faithful */ .prospectus .cover { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 3.5rem 1.5rem; } .prospectus .cover__main { display: flex; flex-direction: column; align-items: center; } .prospectus .cover__logo { width: min(540px, 80vw); height: auto; max-height: 56vh; object-fit: contain; margin-bottom: 3rem; } .prospectus .cover__logo-fallback { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 300; font-size: 2.2rem; color: var(--brand-accent); margin-bottom: 2rem; } .prospectus .cover__city { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.3em; font-weight: 400; font-size: 1.9rem; color: var(--brand-accent); } .prospectus .cover__kicker { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.3em; font-weight: 300; font-size: 0.95rem; color: var(--brand-accent); margin-top: 0.7rem; } .prospectus .cover__address { font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; color: rgba(255, 255, 255, 0.72); margin-top: 2.25rem; } .prospectus .cover__wordmark { position: absolute; bottom: 2.5rem; left: 0; right: 0; font-family: var(--font-serif); font-variant: small-caps; letter-spacing: 0.28em; font-size: 0.72rem; color: var(--brand-accent); opacity: 0.85; } @media (max-width: 640px) { .prospectus .cover__city { font-size: 1.2rem; letter-spacing: 0.2em; } } .prospectus h2 { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: 0.14em; color: var(--brand-primary); } .prospectus .band--brand h2 { color: #fff; } .prospectus .kicker { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.7rem; color: var(--brand-accent); } .prospectus .serif { font-family: var(--font-serif); } /* Section dividers: a compact chapter break, not a full screen. */ .prospectus .band--divider { padding-top: 2.25rem; padding-bottom: 2.25rem; } .prospectus .band--divider h2 { /* Fluid so long headings (e.g. INTRODUCTION) never overflow the band, which clips (overflow:hidden) on narrow phones. */ font-size: clamp(1.5rem, 7vw, 2.6rem); letter-spacing: 0.24em; font-weight: 300; margin-top: 0.4rem; overflow-wrap: break-word; } .prospectus .divider-numeral { font-family: var(--font-display); font-weight: 200; font-size: 5rem; line-height: 1; color: var(--brand-pop); text-align: right; } .prospectus blockquote { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; border-left: 3px solid var(--brand-accent); padding-left: 1.25rem; margin: 1.5rem 0; } .prospectus .stat-label { font-family: var(--font-display); /* brand display face, like the kickers */ color: var(--brand-pop); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; } /* Concept intro (§9.3 #3) — half-bleed photo + serif body with pull quote */ /* Photo hugs its own (capped) width so the text sits right beside it — no empty half-column between them — and the text keeps a fixed measure so its right edge comes in from the page rather than stretching to the far side. */ .prospectus .concept__grid { display: flex; gap: 2rem; align-items: center; justify-content: center; /* photo + text sit centred in the band as one unit */ } .prospectus .concept__photo { flex: 0 0 auto; max-width: 420px; text-align: center; } .prospectus .concept__body { flex: 0 1 540px; } /* Whole photo at its natural proportions — no cropping — capped to a comfortable size. */ .prospectus .concept__photo img { display: inline-block; max-width: 100%; max-height: 480px; width: auto; height: auto; border-radius: 6px; } .prospectus .concept__photo:empty { display: none; } /* Concept gallery (§9.3 #4) — justified rows (Flickr/deck style). Each row is scaled to fill the full width, so photos vary in width by their aspect ratio while every row is the same height: the gallery stays a clean rectangle with flush edges and an even bottom. Sizes/positions still change per visit via the shuffle. Row height is set with a CSS variable used by the per-image flex-basis. */ .prospectus .gallery-grid { --gallery-row-h: 240px; display: flex; flex-wrap: wrap; gap: 10px; max-width: 1100px; margin: 0 auto; } .prospectus .gallery-grid__item { position: relative; height: var(--gallery-row-h); margin: 0; border-radius: 6px; overflow: hidden; /* flex-grow / flex-basis are set per-image inline from its aspect ratio. */ flex-grow: 1; flex-basis: 300px; } .prospectus .gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Optional caption appears only on hover so the mosaic stays clean. */ .prospectus .gallery-grid__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 0.75rem 0.55rem; font-family: var(--font-serif); font-style: italic; font-size: 0.8rem; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.55), transparent); opacity: 0; transition: opacity 0.2s ease; } .prospectus .gallery-grid__item:hover figcaption { opacity: 1; } @media (max-width: 900px) { .prospectus .gallery-grid { --gallery-row-h: 200px; } } @media (max-width: 560px) { .prospectus .gallery-grid { --gallery-row-h: 150px; gap: 8px; } } /* Floorplan (§9.3 #6) — quote beside the drawing */ .prospectus .floorplan-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; align-items: center; } /* Sections that blend a white-background image onto the paper must own an opaque paper backdrop inside an isolated stacking context. Otherwise mix-blend-mode is fragile: any ancestor that becomes a stacking context (e.g. the scroll reveal's opacity/transform, or the two-column landscape layout) leaves the multiply with no paper behind it and the baked-in white background reappears. (has-watermark sections already do this; this covers the rest.) */ .prospectus .section--floorplan, .prospectus .section--elevation { background: var(--paper); isolation: isolate; } /* Line-drawing floorplans blend onto the paper: a transparent PNG/SVG just works, and multiply drops a baked-in white background so a white-bg drawing blends too (white × paper = paper; dark linework stays). */ .prospectus .floorplan-img { /* Keep the drawing small relative to the page and consistent across brands: firm pixel caps (not viewport units, which balloon on large monitors), preserving aspect ratio. Shrinks to the column on narrow screens. */ display: block; width: auto; max-width: min(100%, 520px); max-height: 440px; margin-inline: auto; mix-blend-mode: multiply; } /* Exterior rendering blends onto the paper too — a transparent PNG just works; multiply also drops a white/paper background. The cream paper is near-white, so a color watercolor is only imperceptibly darkened. */ .prospectus .rendering-img { width: 100%; max-width: 980px; margin: 1.75rem auto 0; mix-blend-mode: multiply; } /* Images whose background has already been knocked out to transparent don't need the multiply hack — normal blend keeps their colours true and sits flush. */ .prospectus .rendering-img.is-flat, .prospectus .floorplan-img.is-flat { mix-blend-mode: normal; } /* Trade-area map (Leaflet). */ .prospectus .location-map { height: 460px; margin-top: 1.5rem; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.12); background: #eceae5; z-index: 0; /* stay under the sticky section nav */ } .prospectus .location-map .leaflet-control-layers { font-family: var(--font-ui); font-size: 0.82rem; line-height: 1.5; } /* Keep the required OSM/CARTO credit, but make it small and faint. */ .prospectus .location-map .leaflet-control-attribution { font-size: 9px; background: rgba(255, 255, 255, 0.55); color: #9a988f; padding: 0 4px; } .prospectus .location-map .leaflet-control-attribution a { color: #9a988f; } .map-callout { font-family: var(--font-ui); line-height: 1.35; } .map-callout__sales { color: var(--brand-pop, #E3170A); font-weight: 700; font-size: 1.05em; } .map-callout__label { color: #666; font-size: 0.8em; } .map-callout__note { color: #444; font-size: 0.85em; } @media (max-width: 720px) { .prospectus .floorplan-grid { grid-template-columns: 1fr; } .prospectus .concept__grid { flex-direction: column; align-items: stretch; } .prospectus .concept__photo, .prospectus .concept__body { flex-basis: auto; max-width: 100%; } } /* Leadership bios — the headshot floats so the name, title and bio wrap beside it and then continue full-width underneath, rather than sitting in a narrow column that leaves dead space below the photo (esp. on mobile). */ .prospectus .bio { display: flow-root; margin: 1.75rem 0; } .prospectus .bio__photo { float: left; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; filter: grayscale(1); margin: 0.25rem 1.25rem 0.5rem 0; shape-outside: circle(50%); /* text hugs the round photo */ } .prospectus .bio__name { color: var(--ink, var(--ink-navy)); font-size: 1.1rem; } .prospectus .bio__title { font-style: italic; color: var(--brand-accent); } .prospectus .bio__text { margin-top: 0.4rem; } /* Financial tables (§9.4) — scroll horizontally on mobile, never reflow. */ .prospectus .table-scroll { overflow-x: auto; } .prospectus table.fin { border-collapse: collapse; width: 100%; font-family: var(--font-serif); font-variant-numeric: tabular-nums; } .prospectus table.fin thead th { background: var(--brand-primary); color: #fff; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-family: var(--font-display); font-weight: 400; padding: 0.6rem 0.9rem; text-align: right; } .prospectus table.fin thead th:first-child { text-align: left; } .prospectus table.fin td { padding: 0.55rem 0.9rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12); text-align: right; } .prospectus table.fin td:first-child { text-align: left; } .prospectus .legal { font-family: var(--font-serif); font-style: italic; text-transform: uppercase; text-align: center; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink, var(--ink-navy)); max-width: 640px; margin: 0 auto; } .prospectus .footer-wordmark { font-family: var(--font-serif); font-variant: small-caps; letter-spacing: 0.25em; text-align: center; padding: 2rem; font-size: 0.8rem; } /* Sticky in-page nav (desktop) */ /* Invisible marker just above the sticky nav; when it scrolls out of view the nav is pinned, and JS toggles .is-stuck for the floating shadow. */ .section-nav__sentinel { height: 1px; margin-bottom: -1px; } /* On a prospectus, both chrome bars (the top site header from base.html and the sticky in-page nav) tint toward this offering's brand — a deep, brand-derived dark that keeps the light text legible. Falls back to the fixed navy chrome (and every non-prospectus page keeps the neutral chrome untouched). */ .prospectus-page { --chrome-brand: color-mix(in srgb, var(--brand-primary, #282868) 45%, #0b0b16); } .prospectus-page .site-header { background: var(--chrome-brand, var(--chrome-bg)); border-bottom-color: color-mix(in srgb, var(--brand-primary, #282868) 30%, var(--chrome-border)); } .prospectus .section-nav { position: sticky; top: 0; /* Same brand-tinted dark as the site header so the two chrome bars read as one, then flow into the cover — instead of a dark / light / brand sandwich. */ background: var(--chrome-brand, var(--chrome-bg)); border-bottom: 1px solid var(--chrome-border); z-index: 5; display: flex; gap: 1.5rem; padding: 0.75rem 1.5rem; overflow-x: auto; transition: box-shadow 0.2s ease; } /* Floating shadow, only once the nav is pinned (scrolled over content). */ .prospectus .section-nav.is-stuck { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); } .prospectus .section-nav a { color: var(--chrome-muted); text-decoration: none; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; white-space: nowrap; } .prospectus .section-nav a:hover { color: var(--chrome-text); } /* Back to the opportunities grid — accented and separated from the in-page anchors. */ .prospectus .section-nav__home { color: var(--accent-gold); border-right: 1px solid var(--chrome-border); padding-right: 1.5rem; } .prospectus .section-nav__home:hover { color: var(--chrome-text); } @media (max-width: 640px) { .prospectus .divider-numeral { font-size: 3.5rem; } .prospectus .band { padding: 2.5rem 1.25rem; } /* Tighter tracking so wide-tracked headings fit the narrow band. */ .prospectus .band--divider h2 { letter-spacing: 0.1em; } } /* ===================================================================== */ /* Prospectus modern layer — carries the opportunities-page character into */ /* the deck: cinematic dark cover, scroll reveals, count-up figures, */ /* animated dividers, reading-progress. Motion is armed by the .motion-fx */ /* flag (set before paint) so content is never hidden without JS; all of */ /* it honours prefers-reduced-motion. Orb keyframes are shared with the */ /* opportunities backdrop above. */ /* ===================================================================== */ /* --- Cinematic cover ------------------------------------------------- */ .prospectus .cover { overflow: hidden; background-color: #0a0a16; /* fallback for browsers without color-mix */ background-color: color-mix(in srgb, var(--brand-primary) 22%, #05050a); background-image: radial-gradient(1100px 620px at 14% -10%, color-mix(in srgb, var(--brand-primary) 32%, transparent), transparent 60%), radial-gradient(900px 600px at 104% 110%, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 55%); } .prospectus .cover__main { position: relative; z-index: 1; } .prospectus .cover__wordmark { z-index: 1; } /* keep its bottom-pinned absolute position */ .prospectus .cover__fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .prospectus .cover__fx .orb { position: absolute; border-radius: 50%; filter: blur(80px); mix-blend-mode: screen; } .prospectus .cover__fx .orb--a { width: 44vw; height: 44vw; top: -8vw; left: -6vw; opacity: 0.55; background: radial-gradient(circle, var(--brand-primary), transparent 62%); animation: orb-a 22s ease-in-out infinite alternate; } .prospectus .cover__fx .orb--b { width: 40vw; height: 40vw; bottom: -10vw; right: -6vw; opacity: 0.32; background: radial-gradient(circle, var(--brand-accent), transparent 60%); animation: orb-b 27s ease-in-out infinite alternate; } .prospectus .cover__fx .orb--c { width: 34vw; height: 34vw; top: 42%; left: 54%; opacity: 0.22; background: radial-gradient(circle, var(--brand-pop), transparent 62%); animation: orb-c 32s ease-in-out infinite alternate; } /* Faint tech grid, fading toward the edges. */ .prospectus .cover::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 72%); mask-image: radial-gradient(circle at 50% 40%, #000, transparent 72%); } /* Cover headline stats (count up on load). */ .prospectus .cover__stats { display: flex; gap: 3rem; justify-content: center; margin-top: 2.4rem; } .prospectus .cover__stat { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .prospectus .cover__stat-value { font-family: var(--font-display); font-weight: 300; font-size: 1.9rem; letter-spacing: 0.02em; color: #fff; font-variant-numeric: tabular-nums; } .prospectus .cover__stat-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.62rem; color: var(--brand-accent); } @media (max-width: 640px) { .prospectus .cover__stats { gap: 1.75rem; } .prospectus .cover__stat-value { font-size: 1.4rem; } } /* Cover entrance (staggered, on load). */ .motion-fx .prospectus .cover__logo, .motion-fx .prospectus .cover__logo-fallback, .motion-fx .prospectus .cover__city, .motion-fx .prospectus .cover__kicker, .motion-fx .prospectus .cover__stats, .motion-fx .prospectus .cover__address { opacity: 0; transform: translateY(16px); animation: cover-in .9s cubic-bezier(.2, .7, .2, 1) forwards; } .motion-fx .prospectus .cover__logo, .motion-fx .prospectus .cover__logo-fallback { animation-delay: .15s; } .motion-fx .prospectus .cover__city { animation-delay: .35s; } .motion-fx .prospectus .cover__kicker { animation-delay: .5s; } .motion-fx .prospectus .cover__stats { animation-delay: .65s; } .motion-fx .prospectus .cover__address { animation-delay: .8s; } @keyframes cover-in { to { opacity: 1; transform: none; } } /* --- Scroll reveals -------------------------------------------------- */ .motion-fx .prospectus > section:not(.section--cover), .motion-fx .prospectus > .section-pair, .motion-fx .prospectus > .band { opacity: 0; transform: translateY(26px); } .motion-fx .prospectus > section.is-in, .motion-fx .prospectus > .section-pair.is-in, .motion-fx .prospectus > .band.is-in { opacity: 1; transform: none; transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1); } /* Animated divider: the numeral drops in and the gold rule draws across. */ .motion-fx .prospectus .band--divider .divider-numeral { opacity: 0; transform: translateY(-10px); } .motion-fx .prospectus .band--divider hr { transform: scaleX(0); transform-origin: left; } .motion-fx .prospectus .section--divider.is-in .divider-numeral { opacity: 1; transform: none; transition: opacity .6s ease .15s, transform .6s ease .15s; } .motion-fx .prospectus .section--divider.is-in hr { transform: scaleX(1); transition: transform .8s cubic-bezier(.2, .7, .2, 1) .1s; } /* --- Reading progress (fixed hairline at the top of the viewport) ---- */ .prospectus .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; } .prospectus .reading-progress__fill { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--brand-accent), var(--brand-pop)); box-shadow: 0 0 8px var(--brand-pop); } /* --- Modern depth ---------------------------------------------------- */ .prospectus .location-map { box-shadow: 0 18px 40px rgba(20, 20, 50, 0.14); } .prospectus .concept__photo img { box-shadow: 0 16px 36px rgba(20, 20, 50, 0.16); } .prospectus .gallery-grid__item { box-shadow: 0 10px 24px rgba(20, 20, 50, 0.12); } /* --- Section dividers: dark, glowing chapter breaks (pop + flash) ---- */ .prospectus .band--divider { position: relative; overflow: hidden; isolation: isolate; background-color: #0a0a16; /* fallback for browsers without color-mix */ background-color: color-mix(in srgb, var(--brand-primary) 22%, #05050a); background-image: radial-gradient(620px 320px at 12% 0%, color-mix(in srgb, var(--brand-primary) 38%, transparent), transparent 60%), radial-gradient(520px 280px at 100% 120%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 55%); } .prospectus .band--divider .band__inner { position: relative; z-index: 1; } /* Faint tech grid, fading toward the edges. */ .prospectus .band--divider::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 76%); mask-image: radial-gradient(circle at 50% 50%, #000, transparent 76%); } /* Drifting brand orbs (short-band variant: tall + blurred). */ .prospectus .divider-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .prospectus .divider-fx .orb { position: absolute; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; } .prospectus .divider-fx .orb--a { width: 40vw; height: 220%; top: -60%; left: -6vw; opacity: 0.5; background: radial-gradient(circle, var(--brand-primary), transparent 60%); animation: orb-a 22s ease-in-out infinite alternate; } .prospectus .divider-fx .orb--b { width: 32vw; height: 220%; top: -60%; right: -6vw; opacity: 0.30; background: radial-gradient(circle, var(--brand-accent), transparent 60%); animation: orb-b 27s ease-in-out infinite alternate; } /* Glowing gradient numeral. */ .prospectus .band--divider .divider-numeral { color: var(--brand-pop); /* fallback if background-clip:text is unsupported */ background: linear-gradient(120deg, var(--brand-accent), var(--brand-pop) 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 14px rgba(179, 163, 121, 0.35)); } /* Glowing, shimmering rule. */ .prospectus .band--divider .divider-rule { border: none; height: 2px; margin: 1rem 0 0.7rem; background: linear-gradient(90deg, transparent, var(--brand-accent) 18%, var(--brand-pop) 50%, var(--brand-accent) 82%, transparent); background-size: 200% 100%; box-shadow: 0 0 12px rgba(179, 163, 121, 0.45); animation: rule-shimmer 6s linear infinite; } @keyframes rule-shimmer { to { background-position: 200% 0; } } /* Heading glow. */ .prospectus .band--divider h2 { color: var(--brand-accent); text-shadow: 0 0 22px rgba(179, 163, 121, 0.25); } /* One-time light sweep across the band as it reveals (the "flash"). */ .prospectus .band--divider::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.10) 50%, transparent 58%); transform: translateX(-120%); } .motion-fx .prospectus .section--divider.is-in .band--divider::after { animation: divider-sweep 1.15s ease .15s 1; } @keyframes divider-sweep { to { transform: translateX(120%); } } @media (prefers-reduced-motion: reduce) { .prospectus .cover__fx .orb, .prospectus .divider-fx .orb, .prospectus .band--divider .divider-rule, .prospectus .band--divider::after { animation: none !important; } .motion-fx .prospectus .cover__logo, .motion-fx .prospectus .cover__logo-fallback, .motion-fx .prospectus .cover__city, .motion-fx .prospectus .cover__kicker, .motion-fx .prospectus .cover__stats, .motion-fx .prospectus .cover__address, .motion-fx .prospectus > section, .motion-fx .prospectus > .section-pair, .motion-fx .prospectus > .band { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } .motion-fx .prospectus .band--divider hr { transform: scaleX(1); } .motion-fx .prospectus .band--divider .divider-numeral { opacity: 1; transform: none; } }