/* ========================================================================== workspace.css - shared styles for every /workspaces// page. Loads AFTER hero.css. Each page sets its accent via style="--ws: #xxxxxx" on (handled by base_workspace.html). ========================================================================== */ /* ---- dropdown icons (used by base_hero.html) ---- */ .wbp-ws-lbl { display: flex; align-items: center; gap: .6rem; } .wbp-ws-ico { width: 18px; height: 18px; border-radius: 5px; flex: none; object-fit: cover; } /* current workspace gets a subtle marker */ .wbp-dropdown-menu a.is-current { color: var(--green); background: color-mix(in srgb, var(--teal) 16%, transparent); } /* ---- nav scroll tint ---- */ .wbp-nav.is-scrolled { background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(10px); } /* ---- page hero ---- */ .wbp-wsx { --ws: #25D366; } .wbp-wshero { padding: calc(var(--nav) + 70px) 0 90px; position: relative; overflow: hidden; } .wbp-wshero .wbp-glow-ws { position: absolute; top: -180px; left: 50%; transform: translateX(-50%); width: 720px; height: 420px; pointer-events: none; z-index: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--ws) 26%, transparent), transparent 72%); filter: blur(8px); } .wbp-wshero .wbp-wrap { position: relative; z-index: 1; } .wbp-wspill { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ws); background: color-mix(in srgb, var(--ws) 15%, var(--panel)); border: 1px solid color-mix(in srgb, var(--ws) 34%, transparent); padding: 8px 14px; border-radius: 100px; margin-bottom: 22px; } .wbp-wspill img { width: 16px; height: 16px; border-radius: 4px; } .wbp-wshero h1 { margin: 0 0 18px; font-family: var(--display); font-weight: 700; font-size: clamp(32px, 5vw, 58px); line-height: 1.06; letter-spacing: -.02em; max-width: 16ch; } .wbp-wshero .wbp-lead { max-width: 60ch; } /* ---- feature grid ---- */ .wbp-usecases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .wbp-uc { background: var(--panel); border: 1px solid var(--line2); border-radius: 16px; padding: 26px 24px; transition: transform .2s ease, border-color .2s ease; } .wbp-uc:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ws) 40%, transparent); } .wbp-uc-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 16px; color: var(--ws); background: color-mix(in srgb, var(--ws) 15%, var(--panel)); border: 1px solid color-mix(in srgb, var(--ws) 30%, transparent); } .wbp-uc-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .wbp-uc h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 600; font-size: 18px; } .wbp-uc p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; } .wbp-note { max-width: 760px; margin: 36px auto 0; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6; border-top: 1px solid var(--line); padding-top: 22px; } /* ---- booking module (hospitality) ---- */ .wbp-book { background: linear-gradient(180deg, var(--panel), #0a1319); border: 1px solid var(--line2); border-radius: 22px; padding: 34px; max-width: 900px; margin: 0 auto; position: relative; overflow: hidden; } .wbp-book::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ws), transparent); opacity: .7; } .wbp-book-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ws); margin-bottom: 6px; } .wbp-book-meta svg { width: 16px; height: 16px; } .wbp-book h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 600; font-size: 22px; } .wbp-book p.sub { margin: 0 0 24px; color: var(--muted); font-size: 14.5px; line-height: 1.6; } .wbp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .wbp-field { display: flex; flex-direction: column; gap: 7px; } .wbp-field.full { grid-column: 1 / -1; } .wbp-field label { font-size: 12.5px; font-weight: 600; color: var(--text); } .wbp-field input, .wbp-field select, .wbp-field textarea { width: 100%; background: #0b141a; border: 1px solid var(--line2); border-radius: 11px; padding: 12px 14px; color: var(--text); font-family: var(--body); font-size: 14px; transition: border-color .18s ease, box-shadow .18s ease; } .wbp-field input:focus, .wbp-field select:focus, .wbp-field textarea:focus { outline: none; border-color: var(--ws); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws) 22%, transparent); } .wbp-field textarea { resize: vertical; min-height: 76px; } .wbp-book-actions { margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .wbp-book-note { font-size: 12px; color: var(--muted); line-height: 1.5; } .wbp-book-status { margin-top: 16px; padding: 13px 16px; border-radius: 11px; font-size: 14px; display: none; } .wbp-book-status.ok { display: block; background: color-mix(in srgb, var(--green) 14%, transparent); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); color: var(--text); } .wbp-book-status.err { display: block; background: color-mix(in srgb, #E2694E 14%, transparent); border: 1px solid color-mix(in srgb, #E2694E 42%, transparent); color: var(--text); } .wbp-book-status.load { display: block; background: rgba(255,255,255,.05); border: 1px solid var(--line2); color: var(--muted); } /* ---- responsive ---- */ @media (max-width: 900px) { .wbp-usecases { grid-template-columns: 1fr; } } @media (max-width: 760px) { .wbp-form-grid { grid-template-columns: 1fr; } .wbp-book { padding: 24px; } }