/* ============================================================================ PUBLIC-GLASS — the one unified liquid-glass design system for the whole SkyHigh Realty NYC public website (every page that extends base_sky.html). --------------------------------------------------------------------------- Inspired by fluid.glass: soft, luminous, translucent frosted glass with a SINGLE consistent radius language, a bright catch-light on every edge, and calm, high-visibility type. Loaded globally from base_sky.html AFTER public-sky.css, so every un-layered rule here wins over Tailwind utilities by cascade-layer priority (no !important arms-race needed). Everything is scoped to `.sky-public` (the class) so it can never touch the app. Home keeps a thin home-only layer (fluid-glass-home.css) for the video hero, parallax and stat band — but it now shares THESE tokens, so home and every interior page finally feel like one site. ============================================================================ */ .sky-public { /* ── One radius language, used everywhere ─────────────────────────────── Panels/cards/inputs/images = soft rounded. Buttons/chips/badges = pill. */ --r-xs: 10px; /* tiny controls, tags */ --r-sm: 14px; /* inputs, selects, small cards */ --r-md: 18px; /* default card / panel */ --r-lg: 24px; /* large panel, search bar, feature card */ --r-xl: 30px; /* hero-scale panels */ --r-pill: 999px; /* buttons, chips, badges, nav, avatars */ /* ── The glass recipe — IDENTICAL to the home page's .fg-glass (fluid-glass- home.css). Bright, luminous frosted glass: high-white gradient fill, strong saturate+brightness on the backdrop blur, a bright 0.45–0.5 top catch-light and a crisp white border. This is what makes every page read like home. ── */ --glass-fill: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)); --glass-fill-strong: linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.06)); --glass-fill-dark: linear-gradient(180deg, rgba(12,14,18,0.40), rgba(12,14,18,0.56)); --glass-border: rgba(255,255,255,0.22); --glass-border-strong: rgba(255,255,255,0.30); --glass-hi: inset 0 1px 0 rgba(255,255,255,0.45); /* top catch-light (home = 0.5) */ --glass-hi-lo: inset 0 -1px 0 rgba(255,255,255,0.10); /* soft bottom edge */ --glass-shadow: 0 24px 60px -26px rgba(0,0,0,0.55); --glass-shadow-lg: 0 40px 90px -30px rgba(0,0,0,0.62); --glass-blur: 22px; /* The full backdrop-filter recipe used everywhere, matching home. */ --glass-filter: blur(22px) saturate(170%) brightness(1.06); /* ── Visibility: the stock muted tokens read as washed-out gray on #08080a. Lift them once, here, and every page inherits legible text. ─────────── */ --color-muted: #8b8c96; /* was #71717a */ --color-muted-foreground: #bcbcc6; /* was #a1a1aa */ --color-border: #26262e; /* was #1d1d22 — a touch more defined */ } /* ── Ambient field ──────────────────────────────────────────────────────── A quiet luminous wash behind every page so the canvas is never dead-flat. Body goes transparent; html keeps the near-black; this fixed layer paints the glow behind all content. Sections with their own background cover it. */ body.sky-public { background: transparent; } body.sky-public::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(72% 55% at 12% -6%, rgba(96,165,250,0.16), transparent 60%), radial-gradient(60% 48% at 106% 4%, rgba(34,211,238,0.11), transparent 55%), radial-gradient(90% 60% at 50% 118%, rgba(96,165,250,0.09), transparent 62%), #09090c; } /* ── Unified display type ────────────────────────────────────────────────── fluid.glass reads as a tight, light SANS — not a serif. Home already does this; make it the whole site's headline voice so every page matches. ──── */ .sky-public .font-display { font-family: var(--font-sans); font-weight: 380; letter-spacing: -0.03em; line-height: 1.02; } .sky-public h2.font-display, .sky-public h3.font-display, .sky-public h4.font-display { font-weight: 460; } .sky-public .font-display-italic, .sky-public .font-display .italic, .sky-public .italic { font-style: italic; font-weight: 320; } /* Eyebrows / mono labels — quiet technical voice, lifted for legibility. */ .sky-public .eyebrow { font-family: var(--font-mono); letter-spacing: 0.2em; color: #9a9ba6; } /* ════════════════════════════════════════════════════════════════════════ RADIUS NORMALIZATION — collapse the four legacy languages into one. rounded-full stays a pill; everything else lands on the panel scale. ════════════════════════════════════════════════════════════════════════ */ .sky-public .rounded-sm { border-radius: var(--r-sm); } .sky-public .rounded, .sky-public .rounded-md { border-radius: var(--r-md); } .sky-public .rounded-lg { border-radius: var(--r-md); } .sky-public .rounded-xl { border-radius: var(--r-lg); } .sky-public .rounded-2xl, .sky-public .rounded-3xl { border-radius: var(--r-xl); } /* responsive + corner-specific variants seen in the markup */ @media (min-width: 768px) { .sky-public .md\:rounded-lg { border-radius: var(--r-md); } .sky-public .md\:rounded-xl { border-radius: var(--r-lg); } .sky-public .md\:rounded-2xl { border-radius: var(--r-xl); } } .sky-public .rounded-l-full { border-top-left-radius: var(--r-pill); border-bottom-left-radius: var(--r-pill); } .sky-public .rounded-r-full { border-top-right-radius: var(--r-pill); border-bottom-right-radius: var(--r-pill); } /* ════════════════════════════════════════════════════════════════════════ GLASS SURFACES ════════════════════════════════════════════════════════════════════════ */ /* Reusable helpers */ .sky-public .glass { background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border: 1px solid var(--glass-border); border-radius: var(--r-md); box-shadow: var(--glass-hi), var(--glass-hi-lo), var(--glass-shadow); } .sky-public .glass-strong { background: var(--glass-fill-strong); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border: 1px solid var(--glass-border-strong); border-radius: var(--r-lg); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), var(--glass-shadow-lg); } /* The shared `bg-card` panel becomes glass site-wide (contact form, landlord pricing/form cards, capability tiles, detail sidebar + neighborhood cards, agent card, about blocks). It's always a real panel, never a section. */ .sky-public .bg-card { background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border-color: var(--glass-border); box-shadow: var(--glass-hi), var(--glass-hi-lo), var(--glass-shadow); } /* `bg-card-elevated` mostly backs full-bleed section bands — keep it a quiet elevated tint (no blur/border) so bands read as depth, not floating cards. */ .sky-public .bg-card-elevated { background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.012)); } /* When bg-card-elevated is used as an actual bordered card, glass it up. */ .sky-public .bg-card-elevated.border, .sky-public .bg-card-elevated[class*="ring-"] { -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border-color: var(--glass-border); box-shadow: var(--glass-hi), var(--glass-shadow); } /* A gentle lift on any glass/card that opts into hover (cards, chips, tiles). */ .sky-public .lift-on-hover, .sky-public .glass-hover { transition: transform .5s cubic-bezier(.16,.84,.44,1), box-shadow .5s cubic-bezier(.16,.84,.44,1), border-color .4s ease, background .4s ease; } .sky-public .glass-hover:hover { transform: translateY(-3px); border-color: var(--glass-border-strong); box-shadow: var(--glass-hi), var(--glass-shadow-lg); } /* ════════════════════════════════════════════════════════════════════════ FORM CONTROLS — one frosted input everywhere (home hero search overrides). ════════════════════════════════════════════════════════════════════════ */ .sky-public input:not([type=checkbox]):not([type=radio]):not([type=range]), .sky-public select, .sky-public textarea { border-radius: var(--r-sm); background: rgba(6,8,13,0.42); border: 1px solid rgba(255,255,255,0.16); color: var(--color-foreground); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; } .sky-public input::placeholder, .sky-public textarea::placeholder { color: rgba(230,230,238,0.42); } .sky-public input:focus, .sky-public select:focus, .sky-public textarea:focus { outline: none; border-color: rgba(96,165,250,0.55); background: rgba(255,255,255,0.07); box-shadow: 0 0 0 3px rgba(96,165,250,0.16); } .sky-public select option, .sky-public select optgroup { color: #111; } /* Custom caret so native selects match the glass */ .sky-public select { -webkit-appearance: none; appearance: none; padding-right: 2.4em; background-image: linear-gradient(45deg, transparent 50%, rgba(230,230,238,0.7) 50%), linear-gradient(135deg, rgba(230,230,238,0.7) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } /* ════════════════════════════════════════════════════════════════════════ BUTTONS — every CTA lands on the same pill. Two families: • solid (accent / foreground / white) → high-contrast dark ink • ghost (glass) → luminous frosted Normalizes the existing utility-class CTAs without re-classing every page. ════════════════════════════════════════════════════════════════════════ */ .sky-public :is(a, button).bg-accent, .sky-public :is(a, button).bg-foreground, .sky-public :is(a, button).bg-white { border-radius: var(--r-pill); font-weight: 500; transition: transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease, background-color .3s ease, filter .3s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 12px 26px -14px rgba(0,0,0,0.7); } /* accent CTA — dark ink for real contrast (white-on-#60a5fa was unreadable) */ .sky-public :is(a, button).bg-accent { background-color: var(--color-accent); color: #06131f; } .sky-public :is(a, button).bg-accent:hover { background-color: var(--color-accent-hover); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 16px 34px -14px rgba(96,165,250,0.5); } .sky-public :is(a, button).bg-foreground { color: #08080a; } .sky-public :is(a, button).bg-white { color: #08080a; } .sky-public :is(a, button):is(.bg-foreground,.bg-white):hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 16px 34px -14px rgba(0,0,0,0.6); } /* Bordered / ghost CTAs → frosted glass pill */ .sky-public a.border.border-white\/30, .sky-public a.border.border-border { border-radius: var(--r-pill); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); transition: transform .3s ease, background .3s ease, border-color .3s ease; } /* Listing-card "Request a tour" (a , so normalized here separately) */ .sky-public .group\/btn { border-radius: var(--r-pill); color: #06131f; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); } /* First-class glass button component (used by re-skinned CTAs) */ .sky-public .g-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 13px 26px; border-radius: var(--r-pill); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11.5px; cursor: pointer; color: #fff; border: 1px solid var(--glass-border-strong); background: var(--glass-fill-strong); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 14px 30px -16px rgba(0,0,0,0.6); transition: transform .3s cubic-bezier(.16,.84,.44,1), border-color .3s ease, background .3s ease; } .sky-public .g-btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.42); } .sky-public .g-btn--accent { background: var(--color-accent); color: #06131f; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .sky-public .g-btn--accent:hover { background: var(--color-accent-hover); } /* ════════════════════════════════════════════════════════════════════════ CHIPS / BADGES / PILLS — anything that reads as a tag is a pill. ════════════════════════════════════════════════════════════════════════ */ .sky-public .rounded-full { border-radius: var(--r-pill); } /* Accent badges (non-interactive tags like "Featured") → dark ink for contrast, matching the accent buttons. White-on-#60a5fa failed WCAG. */ .sky-public :is(span, div, p).bg-accent { color: #06131f; } /* Glass eyebrow chip — the signature little "pane of glass" label. */ .sky-public .g-eyebrow { display: inline-flex; align-items: center; gap: .6em; padding: 8px 16px; border-radius: var(--r-pill); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; color: #eef1f6; background: var(--glass-fill-strong); border: 1px solid var(--glass-border-strong); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: var(--glass-hi), var(--glass-hi-lo); } .sky-public .g-eyebrow svg { color: var(--color-cyan); } /* ════════════════════════════════════════════════════════════════════════ CHROME — the header now mirrors the HOME header on EVERY interior page: the utility strip is hidden, the nav is a glass pill, and the CTAs are frosted white-glass pills. Home's own transparent-over-video variant is set in fluid-glass-home.css and still wins there (it loads after this file). ════════════════════════════════════════════════════════════════════════ */ .sky-public #skyHeader { -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); background: rgba(8,8,10,0.55); border-color: transparent; } .sky-public #skyHeader.bg-background\/90 { background: rgba(8,8,10,0.8); } /* Hide the top utility strip (matches home). */ .sky-public #skyHeader > .hidden.md\:block:first-child { display: none !important; } /* Nav → floating glass pill (matches home). */ .sky-public #skyHeader nav.md\:flex { gap: 0.15rem; padding: 7px 12px; border-radius: var(--r-pill); background-image: linear-gradient(180deg, rgba(20,22,28,0.55), rgba(14,16,20,0.68)); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border: 1px solid rgba(255,255,255,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); } .sky-public #skyHeader nav.md\:flex a { padding: 6px 15px; border-radius: var(--r-pill); color: rgba(255,255,255,0.82); } .sky-public #skyHeader nav.md\:flex a:hover { color: #fff; } /* Active state → soft glowing underline instead of the flat bar. */ .sky-public #skyHeader nav.md\:flex a .bg-accent { bottom: 2px; left: 15px; right: 15px; box-shadow: 0 0 10px rgba(96,165,250,0.7); } /* CTAs → frosted white-glass pills (matches home; replaces the solid blue). */ .sky-public #skyHeader a[href="/contact/"], .sky-public #skyHeader a[href*="applications/apply"] { background-color: transparent !important; background-image: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08)) !important; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,0.3); color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } .sky-public #skyHeader a[href="/contact/"]:hover, .sky-public #skyHeader a[href*="applications/apply"]:hover { background-image: linear-gradient(135deg, rgba(255,255,255,0.32), rgba(255,255,255,0.16)) !important; } .sky-public #skyHeader img { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); } /* ════════════════════════════════════════════════════════════════════════ VISIBILITY — a few explicit lifts where the markup hard-codes low opacity. (Muted tokens already lifted via the variable overrides above.) ════════════════════════════════════════════════════════════════════════ */ .sky-public .text-white\/60, .sky-public .text-white\/50, .sky-public .text-white\/40 { color: rgba(255,255,255,0.72); } .sky-public .text-foreground\/85, .sky-public .text-foreground\/80 { color: rgba(244,244,245,0.9); } /* Selection */ .sky-public ::selection { background: var(--color-accent); color: #06131f; }