/* =========================================================================== style.futuristic.css — Futuristic (replaces Minimal) A booking console rather than a booking page: deep navy ground, panels that sit at different elevations, cyan-teal signal colour, crisp mono-tabular numerals for anything you compare. WHY DARK, AND WHY THIS IS STILL PRACTICAL Three of the four themes are light. Making this one dark is the fastest honest way to read as "technology" without reaching for the usual neon-on-black cliché, and it separates it unmistakably from Classic, Signature and Showcase. It stays practical because: · body text is #E8F1FA on #0A1626 — 14.9:1, far past AA · the accent is used for state, never for decoration · surfaces are separated by a 1px light border plus a 1px inner highlight, the way real depth reads, instead of by heavy shadow · nothing relies on colour alone: selection also carries a checkmark BRAND CONTINUITY The blue is the marketing theme's own --blue-500 #0EA5E9, and the teal #22D3EE sits one step along the same hue ramp, so this reads as the same company after dark rather than a different product. LAYERED SURFACES L0 #0A1626 page L1 #0F1E33 card L2 #152A44 inset panels, group bodies L3 #1C3555 raised controls Each layer adds a hairline top highlight, which is what makes the stack legible without shadows doing the work. =========================================================================== */ html[data-ui="futuristic"] { --l0: #0A1626; --l1: #0F1E33; --l2: #152A44; --l3: #1C3555; --edge: rgba(148, 197, 232, .16); --edge-2: rgba(148, 197, 232, .10); --hi: inset 0 1px 0 rgba(255, 255, 255, .06); --ink: #E8F1FA; --ink-2: #9FB6CC; --ink-3: #6E8AA6; --cyan: #22D3EE; --cyan-2: #67E8F9; --blue: #0EA5E9; --blue-deep: #0284C7; --mint: #34D399; --amber: #FBBF24; --rose: #FB7185; --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --t1: 140ms cubic-bezier(.2, .8, .2, 1); /* Baseline token remap. !important because common-fb.js applyTheme() writes --bg/--text/--accent inline on from the saved Firestore theme, and inline beats any stylesheet rule at any specificity. */ --bg: #0A1626 !important; --card: #0F1E33 !important; --card-strong: #0F1E33 !important; --text: #E8F1FA !important; --muted: #9FB6CC !important; --accent: #22D3EE !important; --accent2: #22D3EE !important; --accent-soft: rgba(34, 211, 238, .14) !important; --ok: #34D399 !important; --ok-soft: rgba(52, 211, 153, .16) !important; --danger: #FB7185 !important; --warn: #FBBF24 !important; --border: rgba(148, 197, 232, .16) !important; --border-2: rgba(148, 197, 232, .10) !important; --shadow: 0 24px 60px rgba(0, 0, 0, .45) !important; --shadow-2: 0 2px 10px rgba(0, 0, 0, .35) !important; --radius: 14px !important; --theme-bg: #0A1626 !important; --theme-card: 15, 30, 51 !important; --theme-text: #E8F1FA !important; --theme-muted: #9FB6CC !important; --theme-primary: #22D3EE !important; --theme-outline: #22D3EE !important; --panel-alpha: 1 !important; /* Toolbar contract */ --ui-font: var(--sans); --ui-ink: var(--ink); --ui-ink-soft: var(--ink-2); --ui-surface: var(--l3); --ui-line: var(--edge); --ui-accent: var(--cyan); --ui-accent-ink: #04121C; --ui-accent-soft: rgba(34, 211, 238, .10); --ui-radius-pill: 8px; --ui-shadow: 0 2px 8px rgba(0, 0, 0, .4); --ui-ring: 0 0 0 3px rgba(34, 211, 238, .30); /* Interaction contract */ --fx-hover-border: rgba(34, 211, 238, .55); --fx-hover-bg: rgba(34, 211, 238, .10); --fx-sel-border: var(--cyan); --fx-sel-bg: rgba(34, 211, 238, .18); --fx-sel-ink: #EAFDFF; --fx-sel-ring: 0 0 0 3px rgba(34, 211, 238, .22), 0 0 22px rgba(34, 211, 238, .18); --fx-sel-mark: var(--cyan); --fx-sel-mark-ink: #04121C; --fx-focus-color: var(--cyan-2); --fx-disabled-bg: rgba(148, 197, 232, .05); --fx-disabled-ink: rgba(159, 182, 204, .45); /* Duration coding survives the dark ground as two distinct hues. */ --fx-short-bg: rgba(52, 211, 153, .10); --fx-short-border: rgba(52, 211, 153, .28); --fx-long-bg: rgba(14, 165, 233, .12); --fx-long-border: rgba(14, 165, 233, .30); --auth-bg: #0A1626; --auth-surface: #0F1E33; --auth-ink: #E8F1FA; --auth-ink-2: #9FB6CC; --auth-muted: #6E8AA6; --auth-line: rgba(148, 197, 232, .16); --auth-radius: 14px; --auth-shadow: 0 24px 60px rgba(0, 0, 0, .45); --auth-accent: #22D3EE; --auth-font: var(--sans); --auth-h1: 1.125rem; } /* beats booking.css:827 html,body{background:#F6F7FB !important} */ html[data-ui="futuristic"], html[data-ui="futuristic"] body { background: var(--l0) !important; background-image: none !important; color: var(--ink); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; } /* A faint grid, the way instrumentation reads. beats booking.css:833. */ html[data-ui="futuristic"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(34, 211, 238, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, .045) 1px, transparent 1px) !important; background-size: 44px 44px, 44px 44px; -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 75%); } html[data-ui="futuristic"] h1, html[data-ui="futuristic"] h2, html[data-ui="futuristic"] h3 { font-family: var(--sans); font-weight: 650; letter-spacing: -.02em; line-height: 1.18; color: var(--ink); } html[data-ui="futuristic"] .small, html[data-ui="futuristic"] .muted, html[data-ui="futuristic"] .sub { color: var(--ink-2); } /* --- toolbar: an instrument bar ------------------------------------------ */ html[data-ui="futuristic"] .topbar, html[data-ui="futuristic"] .container > .nav { background: linear-gradient(180deg, rgba(21, 42, 68, .9), rgba(15, 30, 51, .72)); border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--hi); padding-inline: 1rem; margin-top: .75rem; } html[data-ui="futuristic"] .uiStyleSeg { background: rgba(10, 22, 38, .7); border: 1px solid var(--edge); border-radius: 9px; padding: 3px; } html[data-ui="futuristic"] .uiStyleBtn { border-radius: 6px; color: var(--ink-2); font-weight: 600; } html[data-ui="futuristic"] .uiStyleBtn:hover { color: var(--ink); } html[data-ui="futuristic"] .uiStyleBtn[aria-pressed="true"] { background: rgba(34, 211, 238, .16); color: #EAFDFF; box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .5); } html[data-ui="futuristic"] #loginBtn, html[data-ui="futuristic"] #myBookingsBtn, html[data-ui="futuristic"] #logoutBtn, html[data-ui="futuristic"] #signoutBtn, html[data-ui="futuristic"] #saveProfileBtn, html[data-ui="futuristic"] #myBookingsMakeBtn { background: var(--l3) !important; border: 1px solid var(--edge) !important; color: var(--ink) !important; border-radius: 9px !important; font-weight: 600 !important; font-size: .875rem !important; padding: .5rem .875rem !important; box-shadow: var(--hi) !important; } html[data-ui="futuristic"] #loginBtn:hover, html[data-ui="futuristic"] #myBookingsBtn:hover, html[data-ui="futuristic"] #logoutBtn:hover, html[data-ui="futuristic"] #signoutBtn:hover, html[data-ui="futuristic"] #saveProfileBtn:hover, html[data-ui="futuristic"] #myBookingsMakeBtn:hover { border-color: rgba(34, 211, 238, .5) !important; color: #EAFDFF !important; } /* --- progress: a telemetry strip ----------------------------------------- */ html[data-ui="futuristic"] .ab-progress { position: sticky; top: 0; z-index: 55; background: rgba(10, 22, 38, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 0; border-bottom: 1px solid var(--edge); border-radius: 0; box-shadow: none; } html[data-ui="futuristic"] .ab-progress-inner { padding-block: .875rem; } html[data-ui="futuristic"] .ab-dot { background: var(--l2); border: 1px solid var(--edge); color: var(--ink-3); font-weight: 700; font-variant-numeric: tabular-nums; } html[data-ui="futuristic"] .ab-label { font-weight: 600; color: var(--ink-2); font-size: .8125rem; letter-spacing: .02em; } html[data-ui="futuristic"] .ab-step.active .ab-dot { background: var(--cyan); border-color: var(--cyan); color: #04121C; box-shadow: 0 0 18px rgba(34, 211, 238, .45); } html[data-ui="futuristic"] .ab-step.done .ab-dot { border-color: var(--cyan); color: var(--cyan); } html[data-ui="futuristic"] .ab-step.active .ab-label { color: var(--ink) !important; } html[data-ui="futuristic"] .ab-step.done .ab-label { color: var(--ink-2) !important; } html[data-ui="futuristic"] .ab-line { background: var(--edge); } html[data-ui="futuristic"] .welcomeNote { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 1.25rem 0 0 !important; } html[data-ui="futuristic"] .welcomeSub { color: var(--ink-2); max-width: 72ch; } /* --- cards: L1 panels with a hairline highlight -------------------------- */ html[data-ui="futuristic"] .card { background: var(--l1) !important; border: 1px solid var(--edge) !important; border-radius: 16px !important; box-shadow: var(--hi), 0 20px 50px rgba(0, 0, 0, .4) !important; overflow: hidden; margin-top: 1.5rem; } /* The step header reads as a console title bar. */ html[data-ui="futuristic"] .cardheader { background: linear-gradient(180deg, var(--l2), rgba(21, 42, 68, .5)); border-bottom: 1px solid var(--edge); padding: 1.5rem 1.5rem 1.25rem; position: relative; } html[data-ui="futuristic"] .cardheader::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: .55; } html[data-ui="futuristic"] .cardheader h2 { font-size: 1.35rem; color: var(--ink); } html[data-ui="futuristic"] .cardheader .sub { color: var(--ink-2); font-size: .9rem; max-width: 70ch; } html[data-ui="futuristic"] .cardbody { padding: 1.5rem; } html[data-ui="futuristic"] .apptDateLabel { color: var(--ink-3); font-weight: 700; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; } html[data-ui="futuristic"] #date { background: var(--l0) !important; border: 1px solid var(--edge) !important; color: var(--ink) !important; border-radius: 9px; font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; padding: .5rem .75rem; color-scheme: dark; } html[data-ui="futuristic"] #datePretty { color: var(--ink-2) !important; font-weight: 600; } /* --- services ------------------------------------------------------------ */ html[data-ui="futuristic"] .svcPanel { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } html[data-ui="futuristic"] .svcTitle { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); } html[data-ui="futuristic"] .svcSub { color: var(--ink-3); font-size: .78rem; font-variant-numeric: tabular-nums; } html[data-ui="futuristic"] .svcSearch { font-family: var(--sans); background: var(--l0); border: 1px solid var(--edge); border-radius: 9px; color: var(--ink); padding: .5rem .875rem; } html[data-ui="futuristic"] .svcSearch::placeholder { color: var(--ink-3); } html[data-ui="futuristic"] .svcSearch:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); } html[data-ui="futuristic"] .svcGroup { background: var(--l2); border: 1px solid var(--edge-2); border-radius: 12px; box-shadow: var(--hi); overflow: hidden; margin-bottom: .75rem; } html[data-ui="futuristic"] .svcGroup > summary { padding: .875rem 1rem; background: rgba(28, 53, 85, .5); border-bottom: 1px solid transparent; } html[data-ui="futuristic"] .svcGroup[open] > summary { border-bottom-color: var(--edge-2); } html[data-ui="futuristic"] .svcGroup > summary:hover { background: rgba(34, 211, 238, .08); } html[data-ui="futuristic"] .svcGroupName { font-weight: 650; color: var(--ink); font-size: .95rem; } html[data-ui="futuristic"] .svcGroupMeta { color: var(--ink-3); font-size: .72rem; } html[data-ui="futuristic"] .svcGroupCount { background: rgba(34, 211, 238, .14); border: 1px solid rgba(34, 211, 238, .3); color: var(--cyan-2); font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1.5rem; height: 1.35rem; padding: 0 .4rem; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; } html[data-ui="futuristic"] .svcGroupHint { color: var(--ink-3); font-size: .78rem; } html[data-ui="futuristic"] .svcGroupBody { padding: .875rem 1rem 1rem; } html[data-ui="futuristic"] .svcGrid, html[data-ui="futuristic"] .pills { display: grid; gap: .5rem; } html[data-ui="futuristic"] .svcPill { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "meta price"; align-items: center; column-gap: 1rem; row-gap: .125rem; width: 100%; text-align: left; padding: .75rem 2.25rem .75rem .875rem; /* right room for the mark */ border: 1px solid var(--edge); border-radius: 10px; color: var(--ink); font-family: var(--sans); box-shadow: var(--hi); } html[data-ui="futuristic"] .svcName { grid-area: name; font-weight: 600; font-size: .9rem; line-height: 1.3; color: var(--ink); } html[data-ui="futuristic"] .svcMeta { display: contents; } html[data-ui="futuristic"] .svcMeta > .svcDur { grid-area: meta; font-size: .74rem; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: .02em; } html[data-ui="futuristic"] .svcMeta > .svcPrice { grid-area: price; justify-self: end; font-size: .95rem; font-weight: 700; color: var(--cyan-2); font-variant-numeric: tabular-nums; white-space: nowrap; } html[data-ui="futuristic"] .svcSelectedBar { background: var(--l2); border: 1px solid var(--edge); border-radius: 12px; padding: .875rem 1rem; box-shadow: var(--hi); } html[data-ui="futuristic"] .svcSelectedTitle { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--cyan); font-weight: 700; } html[data-ui="futuristic"] .svcChip { background: rgba(34, 211, 238, .12); border: 1px solid rgba(34, 211, 238, .3); border-radius: 7px; color: var(--ink); font-size: .78rem; font-weight: 600; padding: .25rem .5rem; box-shadow: none; } /* --- totals: readouts ---------------------------------------------------- */ html[data-ui="futuristic"] .summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; background: transparent; border: 0; padding: 0; } html[data-ui="futuristic"] .summary > div { background: var(--l2); border: 1px solid var(--edge); border-radius: 12px; padding: .875rem 1rem; box-shadow: var(--hi); } html[data-ui="futuristic"] .summary .small { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); font-weight: 700; } html[data-ui="futuristic"] #totalDuration, html[data-ui="futuristic"] #totalPrice { font-size: 1.5rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -.02em; } html[data-ui="futuristic"] #totalPrice { color: var(--cyan-2); } /* --- buttons ------------------------------------------------------------- */ html[data-ui="futuristic"] .btn { font-family: var(--sans); font-weight: 600; font-size: .875rem; padding: .625rem 1.125rem; border-radius: 9px; background: var(--l3); color: var(--ink); border: 1px solid var(--edge); box-shadow: var(--hi); } html[data-ui="futuristic"] .btn:hover:not(:disabled) { border-color: rgba(34, 211, 238, .5); color: #EAFDFF; } html[data-ui="futuristic"] .btn.primary, html[data-ui="futuristic"] #finalConfirmBtn { background: linear-gradient(180deg, var(--cyan), var(--blue)); color: #04121C; border-color: transparent; font-weight: 700; box-shadow: 0 6px 20px rgba(34, 211, 238, .3); } html[data-ui="futuristic"] .btn.primary:hover:not(:disabled), html[data-ui="futuristic"] #finalConfirmBtn:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 8px 26px rgba(34, 211, 238, .42); } html[data-ui="futuristic"] .btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; } /* Back keeps its amber warning tint - that is meaningful, so it is not flattened to match the other buttons - but the baseline pairs the tint with near-black text (styles.css and booking.css both, both !important). On this dark ground that reads as a muddy olive smear. Re-asserted at matching weight: same hue, inverted for dark. */ html[data-ui="futuristic"] .btn.backBtn { background: rgba(251, 191, 36, .14) !important; border-color: rgba(251, 191, 36, .42) !important; color: #FDE68A !important; } html[data-ui="futuristic"] .btn.backBtn:hover:not(:disabled) { background: rgba(251, 191, 36, .22) !important; border-color: rgba(251, 191, 36, .65) !important; color: #FEF3C7 !important; } /* --- staff & time: the 21st split-panel idea, adapted -------------------- The reference (21st.dev "Appointment Picker Calendar", id 25340) puts the picker and the time list side by side separated by a hairline divider, with times as outline buttons that fill solid when chosen. Our engine already lays step 2 out in two columns, so the borrowed part is the divider and the outline-to-solid treatment, not the markup. */ html[data-ui="futuristic"] .staffTimeLayout { position: relative; } /* booking.css gives .timeCol/.staffCol `background: rgba(255,255,255,.8) !important` (its light glass panel). Unanswered, that put a pale slab under the dark staff cards and made the selected card's light text unreadable (found 2026-09-15 on the live engine; the fixture had no staff list). The split panel sits on the card's own surface, divided by the hairline. */ html[data-ui="futuristic"] .timeCol, html[data-ui="futuristic"] .staffCol { background: transparent !important; border: 0 !important; border-radius: 0; backdrop-filter: none; } html[data-ui="futuristic"] .timeCol { padding-right: 1.25rem; } @media (min-width: 900px) { html[data-ui="futuristic"] .staffCol { border-left: 1px solid var(--edge) !important; padding-left: 1.25rem; } } html[data-ui="futuristic"] .timeHeader { border-bottom: 1px solid var(--edge); padding-bottom: .625rem; margin-bottom: .875rem; } html[data-ui="futuristic"] .timeHeader .small.muted { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); font-weight: 700; } html[data-ui="futuristic"] #employeeList > * + * { margin-top: .5rem; } html[data-ui="futuristic"] #employeeList .empCard, html[data-ui="futuristic"] #employeeList button { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; padding: .75rem 2.25rem .75rem .875rem; background: var(--l2); border: 1px solid var(--edge); border-radius: 10px; color: var(--ink); font-family: var(--sans); box-shadow: var(--hi); } html[data-ui="futuristic"] #employeeList .empAvatar, html[data-ui="futuristic"] #employeeList .avatar, html[data-ui="futuristic"] #employeeList .initials { width: 2.25rem; height: 2.25rem; border-radius: 8px; background: rgba(34, 211, 238, .14); border: 1px solid rgba(34, 211, 238, .32); color: var(--cyan-2); display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none; } html[data-ui="futuristic"] .empName { font-weight: 650; color: var(--ink); } html[data-ui="futuristic"] .empMeta { color: var(--ink-3); } html[data-ui="futuristic"] .slotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .5rem; } html[data-ui="futuristic"] .slotgrid button { font-family: var(--sans); font-weight: 600; font-size: .85rem; font-variant-numeric: tabular-nums; padding: .625rem .5rem; text-align: center; white-space: nowrap; background: var(--l2); border: 1px solid var(--edge); border-radius: 9px; color: var(--ink); box-shadow: var(--hi); } /* --- review & confirm ---------------------------------------------------- */ html[data-ui="futuristic"] .reviewBox { background: var(--l2); border: 1px solid var(--edge); border-radius: 12px; box-shadow: var(--hi); padding: 1rem 1.125rem; color: var(--ink); } html[data-ui="futuristic"] #loginNote { background: rgba(34, 211, 238, .08); border-color: rgba(34, 211, 238, .3); } html[data-ui="futuristic"] .reviewBox label { font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); } html[data-ui="futuristic"] #custName, html[data-ui="futuristic"] #custPhone, html[data-ui="futuristic"] #custNotes { font-family: var(--sans); width: 100%; background: var(--l0); border: 1px solid var(--edge); border-radius: 9px; padding: .625rem .75rem; color: var(--ink); } html[data-ui="futuristic"] #custName::placeholder, html[data-ui="futuristic"] #custPhone::placeholder, html[data-ui="futuristic"] #custNotes::placeholder { color: var(--ink-3); } html[data-ui="futuristic"] #custName:focus, html[data-ui="futuristic"] #custPhone:focus, html[data-ui="futuristic"] #custNotes:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); } html[data-ui="futuristic"] .invalid, html[data-ui="futuristic"] [aria-invalid="true"] { border-color: var(--rose) !important; box-shadow: 0 0 0 3px rgba(251, 113, 133, .18) !important; } html[data-ui="futuristic"] .termsRowInline { color: var(--ink-2); } html[data-ui="futuristic"] .termsRowInline a { color: var(--cyan-2); font-weight: 600; } /* --- sticky bar + dialogs ------------------------------------------------ */ html[data-ui="futuristic"] #stickyCta { background: rgba(10, 22, 38, .93); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--edge); box-shadow: 0 -10px 30px rgba(0, 0, 0, .5); } html[data-ui="futuristic"] #stickyServices, html[data-ui="futuristic"] #stickyDate { color: var(--ink); font-weight: 600; } html[data-ui="futuristic"] .modalCard, html[data-ui="futuristic"] .modalCardPro, html[data-ui="futuristic"] .msgCard, html[data-ui="futuristic"] .thankCard { background: var(--l1); border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--hi), 0 30px 70px rgba(0, 0, 0, .6); font-family: var(--sans); color: var(--ink); } html[data-ui="futuristic"] .msgTitle, html[data-ui="futuristic"] .modalTitlePro, html[data-ui="futuristic"] .thankTitle { color: var(--ink); font-weight: 650; } html[data-ui="futuristic"] .msgBody, html[data-ui="futuristic"] .msgSubtitle { color: var(--ink-2); } html[data-ui="futuristic"] .userPill { background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .28); border-radius: 8px; color: var(--cyan-2); font-weight: 600; } html[data-ui="futuristic"] .notifBanner { background: var(--l2); color: var(--ink); border-bottom: 1px solid var(--edge); } html[data-ui="futuristic"] .notifBtn { background: var(--cyan); color: #04121C; border: 0; border-radius: 8px; font-weight: 700; } /* --- baseline overrides needing matching weight -------------------------- */ html[data-ui="futuristic"] .svcGroupBody .svcGrid, html[data-ui="futuristic"] #serviceList .svcGrid, html[data-ui="futuristic"] .pills.svcGrid { grid-template-columns: 1fr !important; } @media (min-width: 820px) { html[data-ui="futuristic"] .svcGroupBody .svcGrid, html[data-ui="futuristic"] #serviceList .svcGrid, html[data-ui="futuristic"] .pills.svcGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 1280px) { html[data-ui="futuristic"] .svcGroupBody .svcGrid, html[data-ui="futuristic"] #serviceList .svcGrid, html[data-ui="futuristic"] .pills.svcGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } html[data-ui="futuristic"] .pill .svcName { grid-area: name !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } html[data-ui="futuristic"] .pill .svcMeta { display: contents !important; } html[data-ui="futuristic"] #serviceList .svcGrid .svcPill { height: auto !important; } html[data-ui="futuristic"] .card { box-shadow: var(--hi), 0 20px 50px rgba(0, 0, 0, .4) !important; } @media (max-width: 560px) { html[data-ui="futuristic"] .cardheader { padding: 1.125rem 1rem 1rem; } html[data-ui="futuristic"] .cardbody { padding: 1.125rem 1rem; } html[data-ui="futuristic"] .summary { grid-template-columns: 1fr; } html[data-ui="futuristic"] .timeCol { padding-right: 0; } html[data-ui="futuristic"] .slotgrid { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); } } /* --- logo on a dark ground ------------------------------------------------ Customer logos are almost always dark artwork on transparency, which simply disappears on #0A1626. Rather than invert it — which wrecks colour logos — the mark sits on a soft light plate. That works for any logo the customer supplies, light or dark, and reads as a deliberate panel rather than a patch. Padding is inside the same box, so the aspect ratio set in ui-core is preserved by background-size: contain. */ html[data-ui="futuristic"] .siteLogoLink { background-color: rgba(255, 255, 255, .92); border: 1px solid var(--edge); border-radius: 12px; padding: .375rem .625rem; background-origin: content-box; box-shadow: var(--hi), 0 6px 18px rgba(0, 0, 0, .35); }