s -- the panel's first two `.dmnav-row` * links ("Services", "Challenge" + their chevrons) appeared as stray * text at the top-left of every page. js/site-mobile-nav.js now also * adds `md:hidden` to both elements (matching .dmnav-bar's markup), but * this explicit, unconditional rule is the real fix -- it holds even if * the Tailwind utility CSS is ever missing/delayed/blocked, rather than * depending on a same-specificity utility class racing nothing. */ @media (min-width: 768px) { .cine-scope .dmnav-panel, .cine-scope .dmnav-backdrop { display: none !important; } } /* js/site-header.js's desktop nav links and js/site-mobile-nav.js's bottom-nav items are plain tags styled with Tailwind color utilities, not one of this file's own named components -- Tailwind's own preflight sets a:focus{outline:2px solid transparent}, so without this they'd have literally no visible keyboard-focus indicator at all. Scoped to the two mount points' own IDs rather than every site-wide. */ #siteHeader a:focus-visible, #siteMobileNav a:focus-visible { outline: none; box-shadow: var(--ps-focus-ring); border-radius: var(--radius-xs); } /* ========================================================================= * ROLE PROFILE SHELL -- shared foundation for engineer.html/designer.html * (and future role profile pages). Reuses the SAME Profile Shell component * vocabulary office.html already depends on (.ps-hero, .ps-avatar*, * .ps-badge*, .ps-tablist/.ps-tab/.ps-panel, .ps-card, .ps-empty, * .ps-skeleton, .ps-input, .ps-field-label, .ps-grid, all defined in * profile-tokens.css) -- almost none of it needs a .cine-scope override * here at all, because every one of those classes already reads the * --ps-color-* / --ps-radius-* custom properties .cine-scope redefines * elsewhere in this file. office.html itself never carries .cine-scope, * so none of this touches its current light theme. * * The two fixes below are the ONLY .ps-* rules that don't already flow * correctly through that cascade (both are the same class of bug as the * .auth-btn-secondary fix from an earlier phase: a rule that reads * --ps-color-primary as a FOREGROUND color, which only makes sense in * the light default theme where primary is a dark navy). * ========================================================================= */ .cine-scope .ps-tab[aria-selected="true"] { color: var(--ps-color-secondary); border-block-end-color: var(--ps-color-secondary); } .cine-scope .rounded-full { border-radius: var(--radius-sm); } /* ---- Role hero -- image-led composition, distinct from office.html's * plain solid .ps-hero. Structure: a media layer (real photo, or a * generated role-aware fallback pattern -- never a hotlinked stock photo * or a fabricated "portfolio" image) with the identity block layered on * top, positioned differently per role variant below. ------------------ */ .cine-scope .rp-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--ps-color-outline-variant); background: var(--ps-color-surface-container-low); } .cine-scope .rp-hero-media { position: relative; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--ps-color-surface-container); } .cine-scope .rp-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,10,10,0.15) 0%, rgba(9,10,10,0.55) 70%, rgba(9,10,10,0.86) 100%); } .cine-scope .rp-hero-identity { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 20px clamp(16px, 4vw, 32px); margin-block-start: -64px; } .cine-scope .rp-hero-name { color: var(--ps-color-on-surface); } .cine-scope .rp-hero-meta { color: var(--ps-color-on-surface-variant); } .cine-scope .rp-hero-eyebrow { color: var(--cine-gold-1); font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; } /* PHASE 3B -- optional provider cover image. * * Layered UNDER .rp-hero-media rather than replacing it, so a profile * with no cover renders byte-for-byte as it did before: the role's own * gradient/texture treatment below is untouched and remains the default. * A cover, when present, sits behind that treatment and shows through it, * which keeps every role visually recognisable instead of collapsing all * six into one generic photo banner. * * position:absolute + inset:0 on a position:relative .rp-hero means the * cover cannot change the hero's height, so adding one never shifts * layout -- the identity block's negative margin still lands correctly. */ .cine-scope .rp-hero-cover { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } /* Only applied once a real cover URL is set, so the scrim never darkens * a hero that has no cover behind it. */ .cine-scope .rp-hero-cover--set::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,10,10,0.30) 0%, rgba(9,10,10,0.62) 68%, rgba(9,10,10,0.88) 100%); } /* With a cover behind it the role texture must not also paint an opaque * surface colour, or the cover would be hidden by the very element meant * to sit on top of it. */ .cine-scope .rp-hero-cover--set + .rp-hero-media { background-color: transparent; } /* Owner-only media controls live inside the identity block, so they need * the same stacking context as the rest of the identity content. */ .cine-scope .rp-hero-identity #mediaControls { position: relative; z-index: 2; } /* Engineer: technical/architectural -- moderate image height, identity * card reads as a dense "spec sheet" strip anchored at the base of the * image (per spec: "large project image + identity card layered * beside/below it"). */ .cine-scope .rp-hero--engineer .rp-hero-media { height: clamp(220px, 32vw, 340px); } .cine-scope .rp-hero--engineer .rp-hero-media::before { /* Restrained blueprint-line texture -- a decorative technical motif, * not a stand-in for a real project photo (that's the fallback state, * see .rp-fallback--engineer below); this sits under real photos too, * at low opacity, as a quiet "engineering" signature. */ content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(198,154,75,0.07) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(198,154,75,0.07) 0 1px, transparent 1px 32px); mix-blend-mode: overlay; opacity: 0.5; } /* Designer: portfolio/editorial -- the image IS the hero (more vertical * space than Engineer), identity block kept minimal so it never * dominates the composition. */ .cine-scope .rp-hero--designer .rp-hero-media { height: clamp(280px, 44vw, 460px); } .cine-scope .rp-hero--designer .rp-hero-identity { margin-block-start: -48px; } /* Lawyer: balanced, formal geometric lines -- a quiet document/seal- * inspired motif (concentric rings + hairline grid), same sizing as * Engineer's "spec sheet" composition since both are text-forward, * document-heavy professions. */ .cine-scope .rp-hero--lawyer .rp-hero-media { height: clamp(220px, 32vw, 340px); } .cine-scope .rp-hero--lawyer .rp-hero-media::before { content: ''; position: absolute; inset: 0; background-image: repeating-radial-gradient(circle at 85% 15%, rgba(198,154,75,0.08) 0 1px, transparent 1px 26px), repeating-linear-gradient(0deg, rgba(198,154,75,0.05) 0 1px, transparent 1px 40px); mix-blend-mode: overlay; opacity: 0.5; } /* Landscaping: organic terrain -- soft, irregular contour lines instead * of the rigid grids used by Engineer/Lawyer, evoking topography without * a literal (or copyrighted) plant photograph. */ .cine-scope .rp-hero--landscaping .rp-hero-media { height: clamp(220px, 32vw, 340px); } .cine-scope .rp-hero--landscaping .rp-hero-media::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(ellipse 60% 40% at 20% 30%, rgba(127,184,154,0.10), transparent 70%), radial-gradient(ellipse 50% 35% at 80% 70%, rgba(198,154,75,0.08), transparent 70%); opacity: 0.7; } /* Cleaning: clean reflective surface -- a subtle diagonal sheen sweep, * evoking polish/purity without literal spray-bottle iconography. */ .cine-scope .rp-hero--cleaning .rp-hero-media { height: clamp(220px, 32vw, 340px); } .cine-scope .rp-hero--cleaning .rp-hero-media::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(115deg, transparent 30%, rgba(237,227,212,0.07) 48%, transparent 66%); opacity: 0.9; } /* ---- Role-aware fallback visuals (no real media yet) -- generated CSS * patterns, never a hotlinked stock photo and never a fabricated * "sample project". Each role gets its own quiet visual language so an * empty profile still reads as belonging to that profession. --------- */ .cine-scope .rp-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--ps-color-surface-container); } .cine-scope .rp-fallback .material-symbols-outlined { font-size: 40px; color: var(--ps-color-outline); opacity: 0.7; } .cine-scope .rp-fallback--engineer { background: repeating-linear-gradient(45deg, rgba(198,154,75,0.05) 0 2px, transparent 2px 22px), repeating-linear-gradient(-45deg, rgba(198,154,75,0.05) 0 2px, transparent 2px 22px), var(--ps-color-surface-container); } .cine-scope .rp-fallback--designer { background: linear-gradient(135deg, var(--ps-color-surface-container) 0%, var(--ps-color-surface-container-low) 45%, var(--ps-color-surface-container) 100%); } .cine-scope .rp-fallback--lawyer { background: repeating-radial-gradient(circle at 50% 50%, rgba(198,154,75,0.06) 0 1px, transparent 1px 24px), var(--ps-color-surface-container); } .cine-scope .rp-fallback--landscaping { background: radial-gradient(ellipse 70% 50% at 30% 40%, rgba(127,184,154,0.08), transparent 70%), var(--ps-color-surface-container); } .cine-scope .rp-fallback--cleaning { background: linear-gradient(115deg, var(--ps-color-surface-container) 30%, var(--ps-color-surface-container-low) 48%, var(--ps-color-surface-container) 66%); } /* ---- Specialty / service chips ---------------------------------------- */ .cine-scope .rp-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--radius-xs); background: var(--ps-color-surface-container); border: 1px solid var(--ps-color-outline-variant); color: var(--ps-color-on-surface-variant); font-size: 12.5px; font-weight: 500; } /* ---- Project / portfolio cards ----------------------------------------- * Shared card chrome for both roles; each page's own JS decides internal * content density (Engineer: image + type/location/role/status text * block below; Designer: image-forward, caption on hover/below, more * image, less text -- per spec "images should be the hero of this * profile"). */ .cine-scope .rp-project-card { background: var(--ps-color-surface-container-lowest); border: 1px solid var(--ps-color-outline-variant); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--motion-standard, 220ms) var(--ease-premium, ease), border-color var(--motion-standard, 220ms) var(--ease-premium, ease), box-shadow var(--motion-standard, 220ms) var(--ease-premium, ease); } .cine-scope .rp-project-card:hover, .cine-scope .rp-project-card:focus-within { transform: translateY(-3px); border-color: var(--ps-color-secondary); box-shadow: var(--ps-shadow-3d-2); } .cine-scope .rp-project-media { position: relative; width: 100%; aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: var(--ps-color-surface-container); overflow: hidden; } .cine-scope .rp-project-status { position: absolute; top: 10px; inset-inline-end: 10px; background: rgba(198,154,75,0.16); border: 1px solid rgba(198,154,75,0.4); color: var(--cine-gold-2); border-radius: var(--radius-xs); padding: 3px 9px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; backdrop-filter: blur(3px); } .cine-scope .rp-project-title { color: var(--ps-color-on-surface); } .cine-scope .rp-project-meta { color: var(--ps-color-on-surface-variant); } .cine-scope .rp-project-meta .material-symbols-outlined { color: var(--ps-color-outline); font-size: 15px; } /* Designer masonry -- a simple CSS-columns editorial gallery (no JS * layout library); each card's own height varies naturally with its * image, unlike Engineer's uniform 4:3 grid. */ .cine-scope .rp-masonry { columns: 1; column-gap: 16px; } @media (min-width: 640px) { .cine-scope .rp-masonry { columns: 2; } } @media (min-width: 1024px) { .cine-scope .rp-masonry { columns: 3; } } .cine-scope .rp-masonry .rp-project-card, .cine-scope .rp-masonry .pwc-card { break-inside: avoid; margin-bottom: 16px; display: inline-block; width: 100%; } .cine-scope .rp-masonry .rp-project-media { aspect-ratio: auto; } /* ---- Contact / consultation request form ------------------------------- */ .cine-scope .rp-contact-card { background: var(--ps-color-surface-container-lowest); border: 1px solid var(--ps-color-outline-variant); border-radius: var(--radius-md); padding: clamp(18px, 3vw, 28px); } .cine-scope .rp-contact-sent { color: var(--cine-success); } /* ---- Owner-only management affordances --------------------------------- */ .cine-scope .rp-owner-note { color: var(--cine-gold-1); font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* ========================================================================= * PROFESSIONAL CONTENT -- ProfessionalWorkCard (.pwc-*) / ProfessionalCreatorCard * (.pcc-*), Phase P2 UI prototype. Shared by the Designer profile's Work * tab, the Design Discovery grid, and a work detail page's "More work by * this Designer" -- one component, several mounting contexts, per * PROFESSIONAL_CONTENT_ARCHITECTURE.md. Image-first, minimal, editorial -- * deliberately NOT a property-listing-card or a social-feed-card look. * ========================================================================= */ /* ---- ProfessionalWorkCard ------------------------------------------------ */ .cine-scope .pwc-card { background: var(--ps-color-surface-container-lowest); border: 1px solid var(--ps-color-outline-variant); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--motion-standard, 220ms) var(--ease-premium, ease), border-color var(--motion-standard, 220ms) var(--ease-premium, ease), box-shadow var(--motion-standard, 220ms) var(--ease-premium, ease); } .cine-scope .pwc-card:hover, .cine-scope .pwc-card:focus-within { transform: translateY(-3px); border-color: var(--ps-color-secondary); box-shadow: var(--ps-shadow-3d-2); } .cine-scope .pwc-media-link { display: block; } .cine-scope .pwc-media { display: block; width: 100%; height: auto; object-fit: cover; background: var(--ps-color-surface-container); } .cine-scope .pwc-media-fallback { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ps-color-surface-container) 0%, var(--ps-color-surface-container-low) 45%, var(--ps-color-surface-container) 100%); } .cine-scope .pwc-media-fallback .material-symbols-outlined { font-size: 32px; color: var(--ps-color-outline); opacity: 0.7; } .cine-scope .pwc-body { padding: 12px 14px 14px; } .cine-scope .pwc-title-link { text-decoration: none; } .cine-scope .pwc-title { color: var(--ps-color-on-surface); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.35; } .cine-scope .pwc-meta { color: var(--ps-color-on-surface-variant); font-size: 12px; margin-top: 3px; } .cine-scope .pwc-body .pcc-card.pcc-inline { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ps-color-outline-variant); } /* ---- ProfessionalCreatorCard --------------------------------------------- * The CONTENT -> PROFESSIONAL link. `.pcc-inline` sits inside a work * card's footer (small avatar + name + verified only); `.pcc-full` is the * standalone block on a work detail page (avatar + name + role/location + * an explicit "View Profile" affordance). Both are plain elements -- * the whole identity strip is one click to the real profile, never a * decorative non-link. */ .cine-scope .pcc-card { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; } .cine-scope .pcc-avatar { flex: none; width: 28px; height: 28px; border-radius: 999px; overflow: hidden; background: var(--ps-color-surface-container); display: flex; align-items: center; justify-content: center; border: 1px solid var(--ps-color-outline-variant); } .cine-scope .pcc-avatar img { width: 100%; height: 100%; object-fit: cover; } .cine-scope .pcc-avatar .material-symbols-outlined { font-size: 15px; color: var(--ps-color-outline); } .cine-scope .pcc-name-row { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .cine-scope .pcc-name { color: var(--ps-color-on-surface); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cine-scope .pcc-verified { font-size: 14px; color: var(--cine-gold-2); flex: none; } .cine-scope .pcc-card.pcc-inline:hover .pcc-name { color: var(--ps-color-secondary); } .cine-scope .pcc-card.pcc-full { gap: 14px; padding: 14px 16px; background: var(--ps-color-surface-container-lowest); border: 1px solid var(--ps-color-outline-variant); border-radius: var(--radius-md); transition: border-color var(--motion-standard, 220ms) var(--ease-premium, ease); } .cine-scope .pcc-card.pcc-full:hover { border-color: var(--ps-color-secondary); } .cine-scope .pcc-card.pcc-full .pcc-avatar { width: 48px; height: 48px; } .cine-scope .pcc-card.pcc-full .pcc-avatar .material-symbols-outlined { font-size: 24px; } .cine-scope .pcc-card.pcc-full .pcc-identity { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cine-scope .pcc-card.pcc-full .pcc-name { font-size: 15px; } .cine-scope .pcc-meta { color: var(--ps-color-on-surface-variant); font-size: 12px; } .cine-scope .pcc-viewprofile { color: var(--cine-gold-1); font-family: 'IBM Plex Sans', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; } /* ---- Work-first profile tab / discovery chrome --------------------------- */ .cine-scope .pwork-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; } .cine-scope .pwork-filter-chip { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--ps-color-surface-container); border: 1px solid var(--ps-color-outline-variant); color: var(--ps-color-on-surface-variant); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color var(--motion-fast, 150ms) var(--ease-premium, ease), border-color var(--motion-fast, 150ms) var(--ease-premium, ease), background-color var(--motion-fast, 150ms) var(--ease-premium, ease); } .cine-scope .pwork-filter-chip:hover { border-color: var(--ps-color-secondary); } .cine-scope .pwork-filter-chip:focus-visible { outline: none; box-shadow: var(--ps-focus-ring); } .cine-scope .pwork-filter-chip.is-active { background: var(--ps-color-secondary); color: var(--ps-color-primary); border-color: var(--ps-color-secondary); } .cine-scope .pwork-addwork-btn { display: inline-flex; align-items: center; gap: 6px; } .cine-scope .pwork-comingsoon { color: var(--ps-color-on-surface-variant); font-size: 12.5px; margin-top: 8px; } .cine-scope .pwork-hero-media { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--ps-color-outline-variant); background: var(--ps-color-surface-container); } .cine-scope .pwork-detail-title { color: var(--ps-color-on-surface); } .cine-scope .pwork-detail-meta { color: var(--ps-color-on-surface-variant); } .cine-scope .pwork-section-heading { color: var(--ps-color-on-surface); font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } /* ---- Add Work / Edit Work publish form (Designer publishing) --------- */ .cine-scope .pwork-optional-tag { color: var(--ps-color-on-surface-variant); font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: normal; margin-inline-start: 4px; } .cine-scope .pwork-form-subtitle { color: var(--ps-color-on-surface-variant); font-size: 13.5px; margin-block-start: -18px; } /* Numbered section grouping (Media / Project Details / Location & Date) * -- a divider + small numbered eyebrow, reusing .pwork-section-heading's * existing type treatment rather than inventing a second heading style. */ .cine-scope .pwork-form-section { padding-block-start: 32px; margin-block-start: 32px; border-block-start: 1px solid var(--ps-color-outline-variant); } .cine-scope .pwork-form-section:first-of-type { padding-block-start: 0; margin-block-start: 28px; border-block-start: none; } .cine-scope .pwork-section-number { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-xs); background: rgba(198, 154, 75, 0.12); color: var(--cine-gold-2); font-size: 10px; font-weight: 700; margin-inline-end: 8px; } .cine-scope .pwork-cover-zone { position: relative; width: 100%; aspect-ratio: 16/9; border: 1.5px dashed var(--ps-color-outline-variant); border-radius: var(--radius-md); background: var(--ps-color-surface-container); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; transition: border-color var(--motion-fast, 150ms) var(--ease-premium, ease); } .cine-scope .pwork-cover-zone:hover, .cine-scope .pwork-cover-zone:focus-visible { border-color: var(--ps-color-secondary); } .cine-scope .pwork-cover-zone:focus-visible { outline: none; box-shadow: var(--ps-focus-ring); } .cine-scope .pwork-cover-zone img { width: 100%; height: 100%; object-fit: cover; } .cine-scope .pwork-cover-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ps-color-on-surface-variant); font-size: 12.5px; text-align: center; padding: 0 16px; } .cine-scope .pwork-cover-placeholder .material-symbols-outlined { font-size: 30px; opacity: 0.7; } .cine-scope .pwork-remove-btn { position: absolute; top: 8px; inset-inline-end: 8px; width: 26px; height: 26px; border-radius: 999px; background: rgba(9,10,10,0.72); border: 1px solid rgba(255,255,255,0.25); color: #F4EFE7; display: flex; align-items: center; justify-content: center; cursor: pointer; } .cine-scope .pwork-remove-btn:focus-visible { outline: none; box-shadow: var(--ps-focus-ring); } .cine-scope .pwork-remove-btn .material-symbols-outlined { font-size: 16px; } .cine-scope .pwork-gallery-caption { color: var(--ps-color-on-surface-variant); font-size: 12px; margin-block-end: 12px; } /* Empty state: one wide, inviting dropzone (matching the Cover zone's * visual language, just shorter) -- NOT the small square "add" tile, * which only appears once at least one image already exists and the * grid needs a trailing "add more" affordance. */ .cine-scope .pwork-gallery-empty { width: 100%; min-height: 108px; border: 1.5px dashed var(--ps-color-outline-variant); border-radius: var(--radius-md); background: var(--ps-color-surface-container); display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: border-color var(--motion-fast, 150ms) var(--ease-premium, ease); color: var(--ps-color-on-surface-variant); font-size: 13px; } .cine-scope .pwork-gallery-empty:hover, .cine-scope .pwork-gallery-empty:focus-visible { border-color: var(--ps-color-secondary); } .cine-scope .pwork-gallery-empty:focus-visible { outline: none; box-shadow: var(--ps-focus-ring); } .cine-scope .pwork-gallery-empty .material-symbols-outlined { font-size: 22px; opacity: 0.7; } .cine-scope .pwork-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .cine-scope .pwork-thumb { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden; background: var(--ps-color-surface-container); border: 1px solid var(--ps-color-outline-variant); } .cine-scope .pwork-thumb img { width: 100%; height: 100%; object-fit: cover; } .cine-scope .pwork-thumb-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ps-color-on-surface-variant); font-size: 11px; cursor: pointer; border: 1.5px dashed var(--ps-color-outline-variant); transition: border-color var(--motion-fast, 150ms) var(--ease-premium, ease); } .cine-scope .pwork-thumb-add:hover { border-color: var(--ps-color-secondary); } .cine-scope .pwork-thumb-add:focus-visible { outline: none; box-shadow: var(--ps-focus-ring); } .cine-scope .pwork-thumb-add .material-symbols-outlined { font-size: 22px; } .cine-scope .pwork-progress { color: var(--ps-color-on-surface-variant); font-size: 12.5px; } .cine-scope .pwork-confirm-card { background: var(--ps-color-surface-container-lowest); border: 1px solid var(--ps-color-outline-variant); border-radius: var(--radius-md); padding: 20px; } /* ========================================================================= * `.hidden` must always win over the `.pwork-*` component rules -- * root-cause fix, not a per-element patch. SCOPED to `.pwork-*` only * (see regression note below for why it must not be broader). * * Found while diagnosing the Add Work page: several `.cine-scope .xxx` * component rules above declare `display: flex/grid` (a 2-class compound * selector, CSS specificity (0,2,0)) which is MORE specific than * Tailwind's own `.hidden { display: none }` (a single class, * specificity (0,1,0)). Per the cascade, specificity decides before * source order -- so `element.classList.add('hidden')` on, e.g., * `.pwork-cover-placeholder` or `.pwork-remove-btn` was silently having * NO visual effect at all: the element stayed rendered, `display:flex`, * on top of whatever was meant to replace it (this is what actually * caused the Cover/Gallery uploaders to look "broken" -- the placeholder * text and the real image preview were both visible at once). The same * `.pwork-*` classes are shared by designer.html (`#workToolbar`) and * work.html (`#galleryStrip`, `#deleteConfirm`), so this must keep * covering all three, not just add-work.html. * * REGRESSION (found auditing the Home page nav): an earlier version of * this rule was `.cine-scope .hidden { display: none; }` -- unscoped, * matching ANY element under `.cine-scope`. That is also (0,2,0), which * made it beat Tailwind's *responsive* utilities too -- e.g. * `.md\:flex { display: flex }` (0,1,0) inside a `@media (min-width:...)` * block. Media-query wrapping does not add specificity, so on any * `class="hidden md:flex"` element (the header's desktop nav on * index.html/design.html/designer.html/engineer.html/work.html, the * hero's `hidden sm:inline` AI-search label, etc.) `.cine-scope .hidden` * won unconditionally at EVERY viewport width, including desktop -- * forcing `display:none` even where `.md:flex` should have taken over. * That silently deleted the entire desktop nav (Home/Map/Services/ * About/Profile/MAM AI) site-wide on every `.cine-scope` page. * * Fix: match only elements that actually carry a `pwork-` component * class, via an attribute-substring selector. `[class*="pwork-"]` alone * is one more specificity unit (0,1,0), so combined with `.hidden` and * the `.cine-scope` ancestor this rule is (0,3,0) -- it still * unconditionally beats the `.pwork-*` component rules' (0,2,0) above * (no more relying on being declared last), while never touching * Tailwind's `hidden md:flex`/`hidden sm:inline`/etc pattern anywhere, * since none of those elements carry a `pwork-` class. */ .cine-scope [class*="pwork-"].hidden { display: none; } /* ===================================================================== * MAP CONTROLS + APPROXIMATE-LOCATION UX * --------------------------------------------------------------------- * The right-side controls previously rendered as empty rounded squares * whenever the Material Symbols font was judged unavailable (see * js/icon-fallback.js for that root cause). These controls now carry * INLINE SVG, so they are correct even with no webfont at all -- a map * control is exactly the case where a font dependency is not worth it. * ===================================================================== */ /* currentColor + the button's own font-size means one icon definition * inherits hover/focus/active colour with no per-state overrides. */ .cine-scope .ctl-svg { width: 20px; height: 20px; flex: none; display: block; color: currentColor; } .cine-scope .map-overlay-btn-labeled .ctl-svg, .cine-scope .search-this-area-chip .ctl-svg, .cine-scope .draw-action-btn .ctl-svg, .cine-scope .map-search-chip .ctl-svg { width: 16px; height: 16px; } /* Grouped, consistent chrome: one radius, one size, one spacing rhythm, * rather than a loose stack of unrelated squares. */ .cine-scope .map-overlay-btn { border-radius: 12px; transition: background-color .15s ease, border-color .15s ease, transform .1s ease; } .cine-scope .map-overlay-btn:hover { background: rgba(198,154,75,0.16); } .cine-scope .map-overlay-btn:active { transform: scale(0.96); } /* A visible keyboard focus ring -- these are icon-only controls, so * without one a keyboard user cannot tell where they are. */ .cine-scope .map-overlay-btn:focus-visible, .cine-scope .search-this-area-chip:focus-visible, .cine-scope .draw-action-btn:focus-visible, .cine-scope .map-search-chip:focus-visible, .cine-scope .map-type-btn:focus-visible { outline: 2px solid var(--cine-gold-1, #C69A4B); outline-offset: 2px; } /* Draw mode is a MODE, not a one-shot action, so it needs a state a user * can see and a screen reader can read (aria-pressed, set in map.html). */ .cine-scope .map-overlay-btn[aria-pressed="true"] { background: var(--cine-gold-1, #C69A4B); color: #0B0E12; border-color: var(--cine-gold-1, #C69A4B); } /* ---- Approximate-location halo ------------------------------------- */ /* pointer-events:none is belt-and-braces alongside Leaflet's * interactive:false -- the halo must never intercept a click meant for a * marker or a cluster badge underneath it. */ .cine-scope .approx-halo { pointer-events: none; } /* ---- Approximate-location disclosure in the popup ------------------- */ .cine-scope .approx-note { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--ps-color-outline-variant, #2B2C2A); font-family: 'Inter', sans-serif; font-size: 11.5px; line-height: 1.45; color: var(--ps-color-on-surface-variant, #B8B0A5); } .cine-scope .approx-note-dot { width: 8px; height: 8px; margin-top: 4px; flex: none; border-radius: 50%; border: 1.5px solid var(--cine-gold-1, #C69A4B); background: rgba(198,154,75,0.25); } /* ---- Cluster vs listing marker -------------------------------------- */ /* Deliberately a different SHAPE (circle) and colour from a price pin, so * a cluster count can never be misread as a price. */ .cine-scope .price-cluster { border-radius: 999px; font-variant-numeric: tabular-nums; box-shadow: 0 2px 10px rgba(0,0,0,0.45); } /* A long title or id must not stretch a pin across the map. */ .cine-scope .price-pin { max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The controls inside the group keep the container's own stacking rhythm, * so wrapping them changed the DOM but not the desktop layout. */ .cine-scope .map-overlay-group { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } /* The group toggle exists only for narrow viewports -- above the * breakpoint every control is already visible, so a button to reveal them * would be one more thing to explain. */ .cine-scope .map-tools-toggle { display: none; } /* ---- Mobile: a compact group, not a tall floating stack -------------- */ @media (max-width: 767px) { .cine-scope .map-overlay-btn { border-radius: 10px; } /* 44px keeps the touch target at the platform minimum even though the * icon itself is 18px. */ .cine-scope .map-overlay-btn-icon { width: 44px; height: 44px; justify-content: center; } .cine-scope .map-overlay-btn-icon .ctl-svg { width: 18px; height: 18px; } /* Draw Area keeps its text on mobile too -- it is the one control whose * purpose is not obvious from an icon alone. */ .cine-scope .map-overlay-btn-labeled { padding-inline: 12px; height: 44px; } /* One tap reveals the tools; the map keeps the rest of the screen. * Visibility is driven purely by this attribute, so the state survives * re-renders and there is no JS width check to get out of sync. */ .cine-scope .map-tools-toggle { display: flex; } .cine-scope .map-overlay-controls[data-tools="collapsed"] .map-overlay-group { display: none; } .cine-scope .map-tools-toggle[aria-expanded="true"] { background: var(--cine-gold-1, #C69A4B); color: #0B0E12; border-color: var(--cine-gold-1, #C69A4B); } } /* ===================================================================== * PROPERTY LISTING CARD (.lc) -- the map's left result panel * --------------------------------------------------------------------- * A card answers, in order: what is it, where is it, how big, how much. * The old card led with the address and buried the price in a corner, * so scanning the column told you nothing about the properties in it. * * The height is FIXED and set elsewhere (.listing-card in map.html): the * wheel's snap-centering maths needs every card to be exactly the same * height in every language. So every row here is single-line and * truncates -- nothing in this component may wrap, or the column stops * centering correctly. * ===================================================================== */ /* Smoked-glass card surface -- a soft gradient wash over translucent * obsidian plus backdrop-blur, matching the same recipe used by the * toolbar/navbar/hero (not the previous flat #17191B fill), so the list * column and the rest of the page read as one visual system. */ .cine-scope .lc { display: flex; align-items: stretch; gap: 0; overflow: hidden; position: relative; cursor: pointer; border-radius: 16px; background-image: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 45%); background-color: rgba(23,25,27,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(224,190,130,.12); box-shadow: var(--ps-shadow-3d-1); } .cine-scope .lc:hover { border-color: rgba(224,190,130,.4); box-shadow: var(--ps-shadow-3d-2); } /* The selected card is the one the map is showing. A gold rail on the * leading edge reads at a glance down a scrolling column in a way a * border-colour change alone does not. A soft gold wash over the card's * own dark surface keeps the row's own text legible with zero contrast * flip -- everything inside still reads through the normal dark-card * text colors below. Logical inset-inline-start keeps the rail on the * correct side under RTL with no separate rule. */ .cine-scope .lc.active { border-color: var(--cine-gold-1, #C69A4B); background: linear-gradient(180deg, rgba(198,154,75,0.16) 0%, rgba(198,154,75,0.06) 100%), #17191B; } .cine-scope .lc.active::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: linear-gradient(180deg, #D4AF60, #C69A4B); z-index: 3; } /* ---- Media ---------------------------------------------------------- */ .cine-scope .lc-media { position: relative; flex: none; width: 104px; overflow: hidden; background: #1C1F21; /* the box has colour before the photo lands */ } @media (min-width: 768px) { .cine-scope .lc-media { width: 124px; } } .cine-scope .lc-media img { width: 100%; height: 100%; object-fit: cover; /* fill the slot, never distort the photo */ display: block; } .cine-scope .lc-media.is-hidden-loc img { filter: blur(7px); transform: scale(1.15); } /* Listings with no photograph of their own: the slot keeps its shape and shows a neutral house outline rather than a stock photo of some other building. */ .cine-scope .lc-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--cine-text-secondary, #9aa0a6); } .cine-scope .lc-noimg svg { width: 30px; height: 30px; } .cine-scope .lc-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(9,10,10,0.5); color: #F4EFE7; } .cine-scope .lc-lock svg { width: 18px; height: 18px; } /* Deal state sits on the image instead of taking one of the four text * rows -- the card is height-constrained, and this is the one fact that * reads fine as a small overlay. */ .cine-scope .lc-deal { position: absolute; inset-block-end: 6px; inset-inline-start: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(9,10,10,0.78); backdrop-filter: blur(4px); color: #DDD4C7; font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; } .cine-scope .lc-fav { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; width: 26px; height: 26px; border-radius: 999px; border: none; display: flex; align-items: center; justify-content: center; background: rgba(9,10,10,0.6); backdrop-filter: blur(4px); color: #F4EFE7; cursor: pointer; transition: background-color .15s ease, color .15s ease; z-index: 4; } .cine-scope .lc-fav svg { width: 14px; height: 14px; } .cine-scope .lc-fav:hover { background: rgba(9,10,10,0.85); } .cine-scope .lc-fav.is-on { color: var(--cine-gold-1, #C69A4B); } /* ---- Body ----------------------------------------------------------- */ .cine-scope .lc-body { flex: 1; min-width: 0; /* lets the truncation below actually happen */ padding: 9px 11px; display: flex; flex-direction: column; justify-content: center; gap: 3px; } .cine-scope .lc-head { display: flex; align-items: center; gap: 5px; min-width: 0; } .cine-scope .lc-title { flex: 1; min-width: 0; margin: 0; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 650; line-height: 1.25; color: #F4EFE7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 768px) { .cine-scope .lc-title { font-size: 15px; } } .cine-scope .lc-verified { width: 14px; height: 14px; flex: none; color: #7FB88A; } .cine-scope .lc-place { margin: 0; font-family: 'Inter', sans-serif; font-size: 11.5px; line-height: 1.3; color: #B8B0A5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Property-type identity badge -- same icon language as the map markers, a fixed-width icon next to (never replacing) lc-place's own ellipsis. */ .cine-scope .lc-meta { display: flex; align-items: center; gap: 5px; min-width: 0; } .cine-scope .lc-type { flex: none; display: inline-flex; } .cine-scope .lc-type-icon { width: 13px; height: 13px; color: #C69A4B; } /* ---- Facts ---------------------------------------------------------- */ .cine-scope .lc-facts { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; } .cine-scope .lc-facts:empty { display: none; } /* no data, no empty row */ .cine-scope .lc-fact { display: inline-flex; align-items: center; gap: 3px; flex: none; font-family: 'Inter', sans-serif; font-size: 11px; font-variant-numeric: tabular-nums; color: #B8B0A5; white-space: nowrap; } .cine-scope .lc-fact-icon { width: 13px; height: 13px; flex: none; color: #C69A4B; } /* ---- Price + actions ------------------------------------------------ */ .cine-scope .lc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; margin-block-start: 1px; } /* The number people are actually shopping on, so it gets the one strong * colour on the card and the largest size. */ .cine-scope .lc-price { margin: 0; min-width: 0; font-family: 'Inter', sans-serif; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--cine-gold-1, #C69A4B); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 768px) { .cine-scope .lc-price { font-size: 16.5px; } } .cine-scope .lc-actions { display: flex; align-items: center; gap: 5px; flex: none; } .cine-scope .lc-action { width: 27px; height: 27px; border-radius: 999px; border: 1px solid var(--ps-color-outline-variant); background: transparent; color: #B8B0A5; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .cine-scope .lc-action svg { width: 14px; height: 14px; } .cine-scope .lc-action:hover { background: rgba(198,154,75,0.16); border-color: var(--cine-gold-1, #C69A4B); color: #C69A4B; } .cine-scope .lc-action:focus-visible, .cine-scope .lc-fav:focus-visible, .cine-scope .lc:focus-visible { outline: 2px solid var(--cine-gold-1, #C69A4B); outline-offset: 2px; } /* Touch targets: the whole card is the primary hit area, but the two * icon buttons are separate actions and need the platform minimum. */ @media (max-width: 767px) { .cine-scope .lc-action { width: 30px; height: 30px; } .cine-scope .lc-fav { width: 30px; height: 30px; } .cine-scope .lc-fav svg { width: 15px; height: 15px; } } /* ===================================================================== * MAP EDGE DRAWER * --------------------------------------------------------------------- * Closed, the map's tools cost one thin handle on the trailing edge. * Open, they are a glass panel over the map -- the map keeps rendering * behind it and is never re-initialised, because this is a sibling * overlay rather than anything in the map's own layout. * * Everything positional uses logical properties (inset-inline-end, * padding-inline), so the whole component mirrors under RTL with no * second set of rules -- including the drag direction, which is derived * from the computed direction in map.html rather than hardcoded. * ===================================================================== */ /* ---- The handle ------------------------------------------------------ */ .cine-scope .map-edge-handle { position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); z-index: 1150; width: 22px; height: 92px; padding: 0; border: 1px solid rgba(198,154,75,0.35); border-inline-end: none; border-start-start-radius: 11px; border-end-start-radius: 11px; border-start-end-radius: 0; border-end-end-radius: 0; background: linear-gradient(180deg, rgba(28,25,17,0.86), rgba(17,15,11,0.92)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: -3px 0 16px rgba(0,0,0,0.42); cursor: pointer; display: flex; align-items: center; justify-content: center; touch-action: none; /* the handle owns its gesture, not the map */ transition: width .18s ease, background-color .18s ease, border-color .18s ease; } .cine-scope .map-edge-handle:hover { width: 26px; border-color: rgba(198,154,75,0.7); } .cine-scope .map-edge-handle:focus-visible { outline: 2px solid var(--cine-gold-1, #C69A4B); outline-offset: 2px; } /* The grip is the affordance: a short vertical rule, the same language a * physical sliding panel uses. */ .cine-scope .meh-grip { width: 3px; height: 34px; border-radius: 999px; background: linear-gradient(180deg, rgba(216,188,128,0.95), rgba(142,116,72,0.85)); } /* Marks a tool that has become available while the drawer is shut -- * today, "search this area" after a real pan. Without it, moving the map * would offer nothing and the user would never know to look. */ .cine-scope .meh-dot { position: absolute; top: 12px; inset-inline-end: 6px; width: 6px; height: 6px; border-radius: 999px; background: var(--cine-gold-1, #C69A4B); opacity: 0; transform: scale(0.5); transition: opacity .2s ease, transform .2s ease; } .cine-scope .map-edge-handle[data-attention="1"] .meh-dot { opacity: 1; transform: scale(1); } /* While a boundary is being drawn the handle is the way back to Finish, * so it says so rather than looking idle. */ .cine-scope .map-edge-handle[data-drawing="1"] { border-color: var(--cine-gold-1, #C69A4B); background: linear-gradient(180deg, rgba(70,57,32,0.92), rgba(40,33,19,0.95)); } .cine-scope .map-edge-handle[data-drawing="1"] .meh-grip { animation: mehPulse 1.6s ease-in-out infinite; } @keyframes mehPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } /* ---- The drawer ------------------------------------------------------ */ .cine-scope .map-drawer { position: absolute; inset-block: 0; inset-inline-end: 0; z-index: 1160; width: min(320px, 86vw); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(26,23,16,0.90) 0%, rgba(14,13,9,0.94) 100%); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); border-inline-start: 1px solid rgba(198,154,75,0.28); border-start-start-radius: 18px; border-end-start-radius: 18px; box-shadow: -18px 0 48px rgba(0,0,0,0.5); /* Closed by default. --drawer-x is written by the drag handler so the * panel tracks the finger; released, the transition below springs it * to whichever end it settled nearest. */ transform: translateX(var(--drawer-x, 100%)); transition: transform 380ms cubic-bezier(0.22, 1.2, 0.36, 1); overscroll-behavior: contain; padding-inline-end: env(safe-area-inset-right, 0px); padding-block-end: env(safe-area-inset-bottom, 0px); } /* RTL: the drawer sits on the left, so "closed" is the other direction. * Handled here rather than by negating in JS, which would have to know * about direction at every write. */ .cine-scope [dir="rtl"] .map-drawer, [dir="rtl"] .cine-scope .map-drawer { transform: translateX(calc(-1 * var(--drawer-x, 100%))); } .cine-scope .map-drawer.is-dragging { transition: none; } /* follow the finger exactly */ .cine-scope .map-drawer.is-open { --drawer-x: 0%; } /* (A `data-mode="compact"` drawer width used to live here: the polygon * tool needed Undo/Finish reachable across many vertex clicks, so the * drawer narrowed instead of closing. The circle tool is one gesture with * no mid-draw controls, so arming simply closes the drawer and hands the * whole map to the gesture -- nothing sets data-mode any more.) */ @media (prefers-reduced-motion: reduce) { .cine-scope .map-drawer { transition: none; } .cine-scope .map-edge-handle[data-drawing="1"] .meh-grip { animation: none; } } .cine-scope .map-drawer-scrim { position: absolute; inset: 0; z-index: 1155; background: rgba(6,6,5,0.28); opacity: 0; pointer-events: none; transition: opacity .3s ease; } /* Open, the scrim dims the map but does NOT take the click. * * It used to set pointer-events:auto, which made every click anywhere on * the map hit the scrim instead of the map: a marker could not be * selected at all while the drawer was open, and the only thing a click * did was close the drawer. On a 320px drawer over a full-width map that * is the wrong trade -- the map is still the page, and most of it is * still visible. * * Closing on an outside click still happens; it is driven by a document * listener in map.html rather than by this element, so the same click * both reaches the marker underneath and dismisses the drawer. */ .cine-scope .map-drawer-scrim.is-open { opacity: 1; } /* Mobile keeps the blocking scrim. There the drawer covers ~82vw, so the * strip of map still showing is too narrow to aim at -- a tap there is * far more likely to mean "close this" than "select that marker", and a * mis-aimed tap that both selected a listing and closed the drawer would * be worse than one that just closes it. */ @media (max-width: 767px) { .cine-scope .map-drawer-scrim.is-open { pointer-events: auto; } } /* ---- Drawer chrome --------------------------------------------------- */ .cine-scope .map-drawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 14px 11px; border-block-end: 1px solid rgba(198,154,75,0.16); } .cine-scope .map-drawer-title { margin: 0; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cine-gold-1, #C69A4B); } .cine-scope .map-drawer-close { width: 30px; height: 30px; flex: none; border-radius: 8px; border: 1px solid rgba(198,154,75,0.4); background: transparent; color: #B8B0A5; display: flex; align-items: center; justify-content: center; cursor: pointer; } .cine-scope .map-drawer-close svg { width: 15px; height: 15px; } .cine-scope .map-drawer-close:hover { background: rgba(198,154,75,0.14); color: #F4EFE7; } .cine-scope .map-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 18px; display: flex; flex-direction: column; gap: 14px; } /* ---- Groups ---------------------------------------------------------- */ /* Each group is a card, so the drawer reads as four labelled sets rather * than one undifferentiated column of buttons. */ .cine-scope .drawer-group { border: 1px solid rgba(198,154,75,0.32); border-radius: 13px; background: rgba(255,250,240,0.028); padding: 9px; display: flex; flex-direction: column; gap: 5px; } .cine-scope .drawer-group-title { margin: 0 0 2px; padding-inline: 3px; font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #8F887C; } /* ---- Tool rows -------------------------------------------------------- */ /* One shape for every tool: icon, label, full-width hit area. Uniformity * is the point -- a row's meaning comes from its label, not from being * shaped differently to its neighbours. */ .cine-scope .tool-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 10px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: #F4EFE7; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; text-align: start; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } @media (max-width: 767px) { .cine-scope .tool-row { min-height: 44px; } } .cine-scope .tool-row .ctl-svg { width: 18px; height: 18px; flex: none; color: #C69A4B; } .cine-scope .tool-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cine-scope .tool-row:hover:not(:disabled) { background: rgba(198,154,75,0.13); border-color: rgba(198,154,75,0.34); } .cine-scope .tool-row:focus-visible { outline: 2px solid var(--cine-gold-1, #C69A4B); outline-offset: 1px; } .cine-scope .tool-row:disabled { opacity: 0.38; cursor: not-allowed; } /* A mode that is currently ON -- filled, not merely tinted, so it is * unmistakable at a glance which tool is armed. */ .cine-scope .tool-row[aria-pressed="true"] { background: var(--cine-gold-1, #C69A4B); border-color: var(--cine-gold-1, #C69A4B); color: #0B0E12; font-weight: 650; } .cine-scope .tool-row[aria-pressed="true"] .ctl-svg { color: #0B0E12; } .cine-scope .tool-row-danger .ctl-svg { color: #D98C6A; } /* (.tool-row-sub, .tool-row-primary and .draw-actions were removed with * the polygon tool: they styled only its Undo point / Finish sub-actions, * which the one-gesture circle has no equivalent of. Verified * unreferenced across every .html/.css/.js in the repo before deleting, * rather than left as rules matching nothing.) */ /* ---- Segmented map-type control -------------------------------------- */ .cine-scope .map-drawer .map-type-switch { display: flex; width: 100%; gap: 2px; padding: 3px; border-radius: 9px; border: 1px solid rgba(198,154,75,0.4); background: rgba(9,10,10,0.42); box-shadow: none; } .cine-scope .map-drawer .map-type-btn { flex: 1; min-width: 0; min-height: 34px; padding: 6px 4px; border: none; border-radius: 7px; background: transparent; color: #B8B0A5; font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .15s ease, color .15s ease; } /* DESIGN-SYSTEM CONSOLIDATION (Phase 1): was a solid gold fill/dark-text active state -- the drawer's own version of the same "casino gold" pattern map.html's inline .chip-opt/.hometype-card/.currency-opt/ .map-type-btn (the floating overlay variant) all had. Converted to the identical smoked-champagne glass recipe used everywhere else. */ .cine-scope .map-drawer .map-type-btn.active { background-image: linear-gradient(180deg, rgba(224,190,130,.22), rgba(224,190,130,.07)); background-color: rgba(20,22,30,.68); color: #F2ECDD; } .cine-scope .map-drawer .map-type-btn:hover:not(.active) { color: #F4EFE7; background: rgba(198,154,75,0.1); } .cine-scope .map-drawer .map-type-btn:focus-visible { outline: 2px solid var(--cine-gold-1, #C69A4B); outline-offset: -2px; } /* ========================================================================= * HOME SCENE DEPTH -- pictorial cues, not bigger transforms * ========================================================================= * Two earlier passes treated this as an animation problem and both were * wrong in the same way. The first found the transforms were already large * (~105px of Z, 0.076 of scale). The second gave each scene a surface so * there was something on screen to move -- necessary, but it produced a * stack of near-black panels on a near-black page, every one the same * width, none ever crossing another. Measured: the surface highlight * topped out at rgba(255,255,255,0.062) -- a 6% lift -- against a page * that is already almost black, with a 17%-opacity hairline. Everything * sat in one narrow value band at one scale, so it read as a list. * * Depth in a picture comes from cues, and the transforms were never the * missing one. The three that were: * * OCCLUSION -- if A covers B, A is nearer. Full stop. Paint order * now follows distance from viewport centre * (js/cine-scroll-3d.js) and consecutive surfaces * overlap, so the focal scene physically covers its * neighbours. This is the single biggest change. * AERIAL -- distance washes things out. A receding scene now * PERSPECTIVE loses its light, gains a dark scrim, drops contrast * and blurs slightly; the focal one gets a genuinely * brighter surface and a crisp lit top edge. Real * value separation instead of a 6% lift. * SCALE -- a receding scene is narrower and shorter, not just * dimmer, so the eye reads a size cue too. * * Behind all of it sits a fixed environment field, so the planes have * something to be in front of and to parallax against; against a flat * void, motion has no reference and reads as nothing. */ /* The environment. Fixed, so it is maximally out of phase with everything that scrolls -- the cheapest real parallax there is, one element, no scroll work. Sits behind every scene. */ .cine-scope .home-cine-env { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 70% at 50% -10%, rgba(198, 154, 75, 0.10), transparent 58%), radial-gradient(90% 55% at 12% 42%, rgba(198, 154, 75, 0.05), transparent 62%), radial-gradient(80% 50% at 88% 78%, rgba(3, 29, 57, 0.04), transparent 60%), linear-gradient(180deg, #F4EFE7 0%, #DDD4C7 46%, #1C1F21 100%); } /* A vignette on top of the field pulls the eye to the centre of the frame and grounds the edges -- a whisper of navy, not the black wash this used when the environment itself was dark; the page must stay reading as ivory, not as a darkened photo backdrop. */ .cine-scope .home-cine-env::after { content: ''; position: absolute; inset: 0; background: radial-gradient(115% 80% at 50% 45%, transparent 55%, rgba(3, 29, 57, 0.08) 100%); } /* Scenes sit above the environment and establish their own stacking context so the controller's z-index ordering is meaningful. */ .cine-scope [data-cine3d="rail"], .cine-scope [data-cine3d="cards"] { position: relative; isolation: isolate; } /* THE SURFACE. Values here are deliberately far apart between focal and receding: --near is 1 at the centre of the viewport and 0 at either extreme, and every property below is driven from it. */ .cine-scope [data-cine3d="rail"]::before, .cine-scope [data-cine3d="cards"]::before { --near: calc(1 - var(--d, 0) * 2); content: ''; position: absolute; z-index: -2; /* Generous vertical bleed so consecutive surfaces OVERLAP inside the margin between sections -- occlusion needs them to actually cross. The overlap lands in empty margin space, never over content. */ inset: -110px clamp(-26px, -1.6vw, -10px) -130px; border-radius: 34px; /* Light-theme aerial perspective: a receding plane washes out toward the ivory environment behind it (real daytime haze desaturates toward the ambient light, not toward black) -- the FAR end of this gradient is a soft warm putty tone, never black, and the shadow below is navy-tinted instead of a pure-black drop shadow. */ background: linear-gradient(168deg, rgba(255, 255, 255, calc(0.65 + var(--near) * 0.35)) 0%, rgba(255, 255, 255, calc(0.35 + var(--near) * 0.30)) 30%, rgba(224, 216, 196, calc(0.30 + (1 - var(--near)) * 0.25)) 100%), radial-gradient(130% 95% at 50% 0%, rgba(198, 154, 75, calc(0.02 + var(--near) * 0.12)), transparent 62%); border: 1px solid rgba(198, 154, 75, calc(0.08 + var(--near) * 0.30)); /* The big shadow is what lets a near plane sit ON the one behind it. */ box-shadow: 0 40px 90px -35px rgba(3, 29, 57, calc(0.10 + var(--near) * 0.16)), inset 0 1px 0 rgba(255, 255, 255, calc(0.3 + var(--near) * 0.4)); transform: translate3d(0, calc(var(--d, 0) * 26px), 0) scale(calc(1 - var(--d, 0) * 0.075)); pointer-events: none; } /* AERIAL PERSPECTIVE. A separate scrim above the surface but below the content: it fades IN as the scene recedes, washing the whole plane toward the (now light) environment behind it, the same way distance does in daylight. Doing it as its own layer (rather than by lowering the surface's opacity) keeps the near state at full strength instead of making everything permanently semi-transparent. */ .cine-scope [data-cine3d="rail"]::after, .cine-scope [data-cine3d="cards"]::after { --near: calc(1 - var(--d, 0) * 2); content: ''; position: absolute; z-index: -1; inset: -110px clamp(-26px, -1.6vw, -10px) -130px; border-radius: 34px; background: linear-gradient(180deg, rgba(252, 250, 245, 0.55), rgba(252, 250, 245, 0.82)); opacity: calc(1 - var(--near)); backdrop-filter: blur(calc((1 - var(--near)) * 2.5px)); pointer-events: none; } /* The hero keeps its media plate and gains the same treatment on the way out, so the very first handoff already reads as depth. Hero is the one movement the brief explicitly allows to stay dark/cinematic, so this recede scrim stays dark too -- just navy-tinted instead of warm-black, to match the new brand identity rather than the old bronze one. */ .cine-scope [data-cine3d="hero"] { position: relative; isolation: isolate; } .cine-scope [data-cine3d="hero"]::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(3, 29, 57, 0.35), rgba(3, 29, 57, 0.72)); opacity: var(--hl, 0); pointer-events: none; } /* Tablet: same cues, shorter travel. */ @media (min-width: 768px) and (max-width: 1024px) { .cine-scope [data-cine3d="rail"]::before, .cine-scope [data-cine3d="cards"]::before { inset: -84px clamp(-20px, -1.4vw, -10px) -100px; transform: translate3d(0, calc(var(--d, 0) * 18px), 0) scale(calc(1 - var(--d, 0) * 0.05)); } .cine-scope [data-cine3d="rail"]::after, .cine-scope [data-cine3d="cards"]::after { inset: -84px clamp(-20px, -1.4vw, -10px) -100px; } } /* Mobile: the CUES stay -- they are what makes a phone feel spatial -- but the travel is cut and the backdrop-filter is dropped, since a full-width blur is the most expensive thing here on a phone GPU. The scrim alone still carries the aerial read. */ .cine3d-mobile [data-cine3d="rail"]::before, .cine3d-mobile [data-cine3d="cards"]::before { /* Side bleed goes INWARD: these sections are full-viewport-width, so an outward bleed would give the document a horizontal scrollbar. */ inset: -34px 6px -42px; border-radius: 24px; transform: translate3d(0, calc(var(--d, 0) * 10px), 0) scale(calc(1 - var(--d, 0) * 0.03)); } .cine3d-mobile [data-cine3d="rail"]::after, .cine3d-mobile [data-cine3d="cards"]::after { inset: -34px 6px -42px; border-radius: 24px; backdrop-filter: none; } .cine3d-mobile .home-cine-env { background-attachment: scroll; } /* Reduced motion: the whole composition is kept -- environment, surfaces, edges, shadows -- and only the scroll-linked change is removed. Every scene renders at its near/focal value so nothing is left washed out. */ @media (prefers-reduced-motion: reduce) { .cine-scope [data-cine3d="rail"]::before, .cine-scope [data-cine3d="cards"]::before { --near: 1; transform: none !important; } .cine-scope [data-cine3d="rail"]::after, .cine-scope [data-cine3d="cards"]::after, .cine-scope [data-cine3d="hero"]::after { opacity: 0 !important; } } /* Compact premium empty state for a listing rail. Wide enough to hold the scene's mass, short enough never to read as a dead zone, and it offers real destinations rather than a placeholder property card. */ .cine-scope .home-rail-empty { flex: 1 1 100%; min-width: 0; /* The rail track is a flex row, so the default align-items:stretch would inflate this to the height a full property card occupies -- a compact state that is not actually compact. */ align-self: flex-start; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 30px 28px; border-radius: 20px; border: 1px dashed rgba(198, 154, 75, 0.30); background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.24)); } .cine-scope .home-rail-empty-glyph { font-size: 26px; color: var(--cine-gold-2, #D4AF60); opacity: .85; } .cine-scope .home-rail-empty-title { font-size: 14.5px; color: var(--ps-color-on-surface); max-width: 42ch; line-height: 1.5; } .cine-scope .home-rail-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; } .cine-scope .home-rail-empty-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; background: var(--cine-gold-2, #D4AF60); color: #0B0E12; transition: filter 160ms ease; } .cine-scope .home-rail-empty-cta:hover { filter: brightness(1.08); } .cine-scope .home-rail-empty-cta.is-quiet { background: transparent; color: var(--cine-gold-2, #D4AF60); border: 1px solid rgba(198, 154, 75, 0.42); } .cine-scope .home-rail-empty-cta:focus-visible { outline: none; box-shadow: var(--ps-focus-ring); }