/* HLP — Hospital Launch Pad. Dark "launch pad" language, ported from the hlp-v4-squircle reference: aurora light layer, white-glass tiles, 42px squircles, restrained resting glow, tight grid. Shared by the public page and the admin live preview. */ :root { --bg1: #0B1220; --bg2: #101A30; --txt: #F2F6FC; --txt2: #A8B4C8; --glass: rgba(255, 255, 255, 0.055); --glass-solid: rgba(20, 30, 52, 0.92); --edge: rgba(255, 255, 255, 0.10); --edge-hi: rgba(255, 255, 255, 0.28); --stat: #FF5A47; --radius: 16px; --disp: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* default squircle accent (each section overrides via .acc-*) */ --c: #2BD4B4; --c-line: rgba(43,212,180,.45); --c-glow: rgba(43,212,180,.18); --c-glow-hi: rgba(43,212,180,.40); /* aliases so the admin editor chrome (admin.html inline styles) stays legible — these want opaque panels, not the public page's frosted glass */ --surface: #131d30; --border: rgba(255,255,255,.12); --text: var(--txt); --muted: var(--txt2); --accent: #2BD4B4; --accent-soft: rgba(43,212,180,.14); --bg: #0b1220; --info-text: #9ecdf2; --outage-text: #FF5A47; } /* per-section accent — line = ~45% of hue, resting glow ~18%, hover ~40% */ .acc-teal { --c:#2BD4B4; --c-line:rgba(43,212,180,.45); --c-glow:rgba(43,212,180,.18); --c-glow-hi:rgba(43,212,180,.40); } .acc-blue { --c:#5B9BFF; --c-line:rgba(91,155,255,.45); --c-glow:rgba(91,155,255,.18); --c-glow-hi:rgba(91,155,255,.40); } .acc-orange { --c:#FFB25C; --c-line:rgba(255,178,92,.45); --c-glow:rgba(255,178,92,.18); --c-glow-hi:rgba(255,178,92,.40); } .acc-purple { --c:#B08CFF; --c-line:rgba(176,140,255,.45); --c-glow:rgba(176,140,255,.18); --c-glow-hi:rgba(176,140,255,.40); } .acc-green { --c:#4ADE80; --c-line:rgba(74,222,128,.45); --c-glow:rgba(74,222,128,.18); --c-glow-hi:rgba(74,222,128,.40); } .acc-pink { --c:#FF7A9C; --c-line:rgba(255,122,156,.45); --c-glow:rgba(255,122,156,.18); --c-glow-hi:rgba(255,122,156,.40); } * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } /* gradient on (not body) so the z-index:-1 aurora shows through in Safari — a negative-z fixed child hides behind the body's own background */ html { -webkit-text-size-adjust: 100%; min-height: 100%; background: linear-gradient(160deg, var(--bg1), var(--bg2) 60%, #0C1526) fixed; } body { min-height: 100vh; color: var(--txt); font: 400 15px/1.5 var(--font); background: transparent; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--c); outline-offset: 3px; border-radius: 8px; } /* ---------- aurora light layer (the atmosphere the glass sits on) ---------- */ .aurora { position: fixed; inset: 0; z-index: -1; filter: blur(70px); opacity: 0.45; overflow: hidden; pointer-events: none; } .aurora i { position: absolute; border-radius: 50%; display: block; } .aurora .a { width: 44vw; height: 44vw; left: -10vw; top: -12vw; background: radial-gradient(circle, #0FA98E, transparent 65%); animation: drift 26s ease-in-out infinite alternate; } .aurora .b { width: 38vw; height: 38vw; right: -8vw; top: 10vh; background: radial-gradient(circle, #3B6FE0, transparent 65%); animation: drift 32s ease-in-out infinite alternate-reverse; } .aurora .c { width: 34vw; height: 34vw; left: 30vw; bottom: -14vw; background: radial-gradient(circle, #7A4FD8, transparent 65%); animation: drift 38s ease-in-out infinite alternate; } @keyframes drift { to { transform: translate(6vw, 4vh) scale(1.12); } } /* glass surface (tiles, STAT, search) — frosted where supported, solid dark otherwise */ .glass { background: var(--glass); border: 1px solid var(--edge); border-radius: var(--radius); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 8px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10); } @supports not (backdrop-filter: blur(1px)) { .glass, .card, #search { background: var(--glass-solid) !important; } } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 30; background: var(--c); color: #06121b; padding: 8px 14px; border-radius: 0 0 10px 0; font-weight: 700; } .skip-link:focus { left: 0; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 10; padding: 14px 0; background: linear-gradient(180deg, rgba(11,18,32,.85), rgba(11,18,32,0)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .site-header__inner { max-width: 1180px; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; gap: 18px; } .brand { display: flex; align-items: center; gap: 12px; white-space: nowrap; } .brand__mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #2BD4B4; font: 800 12px var(--mono); background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid rgba(43,212,180,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 14px rgba(43,212,180,.2); } .site-title { font: 800 19px/1.1 var(--disp); } .site-sub { font: 600 10.5px var(--mono); color: var(--txt2); letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; } .search-wrap { flex: 1; max-width: 480px; margin-left: auto; position: relative; display: flex; } .search-wrap__icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--txt2); pointer-events: none; } #search { width: 100%; padding: 11px 44px 11px 40px; color: var(--txt); background: var(--glass); border: 1px solid var(--edge); border-radius: 999px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font: 500 14px var(--font); transition: border-color .15s, box-shadow .15s; } #search::placeholder { color: var(--txt2); } #search:focus { outline: none; border-color: var(--edge-hi); box-shadow: 0 0 0 4px rgba(43,212,180,.12); } .search-wrap__key { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font: 600 10px var(--mono); color: var(--txt2); border: 1px solid var(--edge); border-radius: 6px; padding: 2px 7px; pointer-events: none; } /* ---------- layout ---------- */ .app { max-width: 1180px; margin: 0 auto; padding: 8px 22px 48px; } .search-status { margin: 12px 2px 0; min-height: 1em; font: 500 12px var(--mono); color: var(--txt2); } .loading, .empty-state, .load-error { margin-top: 34px; text-align: center; font: 500 13px var(--mono); color: var(--txt2); } .load-error { color: var(--stat); } /* ---------- banner ---------- */ .banner { padding: 12px 16px; border-radius: var(--radius); margin: 16px 0 0; font-weight: 600; border: 1px solid var(--edge); } .banner--info { background: rgba(91,155,255,.10); color: #cfe0ff; border-color: rgba(91,155,255,.32); } .banner--warning { background: rgba(255,178,92,.10); color: #ffdca8; border-color: rgba(255,178,92,.34); } .banner--outage { background: rgba(255,90,71,.10); color: #ffb4aa; border-color: rgba(255,90,71,.38); } /* ---------- STAT strip ---------- */ .stat-strip { display: flex; align-items: stretch; gap: 9px; flex-wrap: wrap; margin: 18px 0 0; padding: 10px 12px; border: 1px solid rgba(255,90,71,.45); border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 8px 32px rgba(255,90,71,.10), inset 0 1px 0 rgba(255,255,255,.10); } .is-searching .stat-strip { display: none; } .stat-strip__label { align-self: center; display: flex; align-items: center; gap: 8px; font: 800 11px var(--disp); letter-spacing: .2em; color: var(--stat); padding: 0 8px; } .stat-strip__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--stat); box-shadow: 0 0 12px var(--stat); animation: pp 2s infinite; } @keyframes pp { 50% { opacity: .3; } } .stat-strip__item { flex: 1; min-width: 180px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); transition: transform .15s, border-color .15s; } .stat-strip__item:hover { transform: translateY(-2px); border-color: rgba(255,90,71,.6); } .stat-strip__name { font: 700 13.5px var(--font); } .stat-strip__phone { font: 600 13px var(--mono); color: #FFB4AA; white-space: nowrap; } /* ---------- sections ---------- */ .link-section { margin-top: 26px; } .link-section__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } .link-section__title { font: 700 12px var(--disp); letter-spacing: .18em; text-transform: uppercase; color: var(--txt2); } .link-section__thread { flex: 1; height: 1px; background: linear-gradient(90deg, var(--edge), transparent); } .card-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); perspective: 900px; } /* ---------- tiles ---------- */ .card { position: relative; display: flex; gap: 12px; align-items: center; overflow: hidden; padding: 12px 14px; min-height: 64px; background: var(--glass); border: 1px solid var(--edge); border-radius: var(--radius); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 8px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10); color: var(--txt); font: inherit; text-align: left; width: 100%; /* pointer-anchored glass: light follows --mx/--my; press dents + micro-tilts. Centered defaults keep keyboard focus glow working with no JS. */ --mx: 50%; --my: 50%; --r: 220px; --rim: 180px; transform-style: preserve-3d; will-change: transform; transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1)); transition: transform .14s ease, border-color .25s ease, box-shadow .18s ease; } button.card { cursor: pointer; -webkit-appearance: none; appearance: none; } .card:hover { border-color: var(--edge-hi); box-shadow: 0 14px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.16); } /* hover specular pool — radial light anchored to the pointer */ .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(var(--r) circle at var(--mx) var(--my), rgba(255,255,255,.13), rgba(255,255,255,.045) 40%, transparent 70%); opacity: 0; transition: opacity .3s ease; } .card:hover::before, .card:focus-visible::before { opacity: 1; } /* pointer-anchored border-ring glow */ .card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: radial-gradient(var(--rim) circle at var(--mx) var(--my), rgba(255,255,255,.5), transparent 65%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s ease; } .card:hover::after, .card:focus-visible::after { opacity: 1; } /* contact dent on press — shadow pool at the press point, faint rim opposite */ .dent { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(calc(var(--r) * .55) circle at var(--mx) var(--my), rgba(0,0,0,.30), rgba(0,0,0,.10) 45%, transparent 70%), radial-gradient(var(--r) circle at calc(100% - var(--mx)) calc(100% - var(--my)), rgba(255,255,255,.09), transparent 60%); opacity: 0; transition: opacity .12s ease; } .card.pressed .dent { opacity: 1; } .card.pressed { --sc: .985; } .card--pending { border-style: dashed; opacity: .82; } .card__icon-wrap { position: relative; flex: 0 0 auto; } .card__icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--c); background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid var(--c-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 14px var(--c-glow); transition: transform .18s cubic-bezier(.2,.8,.3,1.35), box-shadow .18s; } .card:hover .card__icon { transform: scale(1.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 20px var(--c-glow-hi); } .card__icon .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .card__icon img { width: 24px; height: 24px; object-fit: contain; border-radius: 5px; display: block; } .card__glyph { font: 700 11.5px var(--mono); letter-spacing: .4px; } /* per-user icon import affordance */ .card__icon-edit { position: absolute; z-index: 3; top: -7px; right: -7px; width: 19px; height: 19px; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 10px; background: #0d1626; border: 1px solid var(--edge-hi); color: var(--txt2); cursor: pointer; padding: 0; } .card:hover .card__icon-edit, .card__icon-edit:focus-visible { display: flex; } .card__icon-edit:hover { color: var(--c); border-color: var(--c-line); } .card__body { min-width: 0; } .card[data-network] .card__body { padding-right: 42px; } .card--nethelp[data-network] .card__body { padding-right: 68px; } .card--calc .card__body { padding-right: 22px; } .card--calc[data-network] .card__body { padding-right: 66px; } .card--calc.card--nethelp[data-network] .card__body { padding-right: 92px; } .card__title-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .card__title { font: 600 14px/1.25 var(--font); } .card__subtitle { font: 400 12px/1.35 var(--font); color: var(--txt2); margin-top: 2px; } .card__badge { font: 600 9px var(--mono); text-transform: uppercase; color: var(--stat); border: 1px solid rgba(255,90,71,.5); border-radius: 4px; padding: 1px 5px; } .card__inline-badge { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 22px; height: 22px; display: grid; place-items: center; color: var(--c); background: rgba(43,212,180,.10); border: 1px solid var(--c-line); border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); pointer-events: none; } .card__inline-badge svg { width: 14px; height: 14px; } .card[aria-expanded="true"] .card__inline-badge { background: var(--c); border-color: var(--c); color: #06121b; } /* access requirement chips (e.g. "SBGHC VPN") — colour-selectable per link */ .card__reqs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; min-width: 0; max-width: 100%; } .card__req { font: 600 10px var(--mono); letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--rq-line, rgba(255,255,255,.2)); background: var(--rq-bg, rgba(255,255,255,.06)); color: var(--rq-fg, #c3cdda); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .req-gray { --rq-fg:#c3cdda; --rq-line:rgba(255,255,255,.2); --rq-bg:rgba(255,255,255,.06); } .req-blue { --rq-fg:#8fbaff; --rq-line:rgba(91,155,255,.45); --rq-bg:rgba(91,155,255,.12); } .req-teal { --rq-fg:#5fe0c6; --rq-line:rgba(43,212,180,.45); --rq-bg:rgba(43,212,180,.12); } .req-green { --rq-fg:#7ee6a2; --rq-line:rgba(74,222,128,.45); --rq-bg:rgba(74,222,128,.12); } .req-amber { --rq-fg:#ffc987; --rq-line:rgba(255,178,92,.5); --rq-bg:rgba(255,178,92,.13); } .req-purple { --rq-fg:#c4a9ff; --rq-line:rgba(176,140,255,.45); --rq-bg:rgba(176,140,255,.12); } .req-pink { --rq-fg:#ff9ab4; --rq-line:rgba(255,122,156,.45); --rq-bg:rgba(255,122,156,.12); } .req-red { --rq-fg:#ff8f81; --rq-line:rgba(255,90,71,.5); --rq-bg:rgba(255,90,71,.13); } /* live VPN status (netwatch.js) — compact and fixed-position so long network names do not resize or reorder the card grid. */ .card__netstatus { position: absolute; z-index: 3; top: 8px; right: 8px; display: inline-flex; align-items: center; } .card__netchip, .card__nethelp { height: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; appearance: none; -webkit-appearance: none; border: 1px solid var(--net-line, rgba(255,255,255,.22)); background: var(--net-bg, rgba(255,255,255,.06)); color: var(--net-fg, #c3cdda); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); } .card__netchip { min-width: 42px; padding: 0 7px; border-radius: 999px; font: 700 9.5px var(--mono); letter-spacing: .08em; } .card__netchip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--net-dot, #9aa6ba); box-shadow: 0 0 9px var(--net-dot-glow, rgba(154,166,186,.35)); } .card__nethelp { position: absolute; top: 0; right: calc(100% + 4px); width: 22px; padding: 0; border-radius: 999px; font: 800 11px var(--font); opacity: 0; pointer-events: none; transform: translateX(3px); transition: opacity .15s ease, transform .15s ease, filter .15s ease; } .card:hover .card__nethelp, .card:focus-within .card__nethelp, .card.is-net-down .card__nethelp { opacity: 1; pointer-events: auto; transform: none; } .card.is-net-checking { --net-fg:#ffc987; --net-line:rgba(255,178,92,.46); --net-bg:rgba(255,178,92,.12); --net-dot:#ffc987; --net-dot-glow:rgba(255,178,92,.55); } .card.is-net-up { --net-fg:#7ee6a2; --net-line:rgba(74,222,128,.45); --net-bg:rgba(74,222,128,.11); --net-dot:#7ee6a2; --net-dot-glow:rgba(74,222,128,.48); } .card.is-net-down { --net-fg:#ffc987; --net-line:rgba(255,178,92,.55); --net-bg:rgba(255,178,92,.14); --net-dot:#ffb25c; --net-dot-glow:rgba(255,178,92,.65); } .card.is-net-uncheckable { --net-fg:#c3cdda; --net-line:rgba(255,255,255,.24); --net-bg:rgba(255,255,255,.07); --net-dot:#9aa6ba; --net-dot-glow:rgba(154,166,186,.36); } .card__netchip:hover, .card__nethelp:hover { filter: brightness(1.18); } .link-section__attribution { margin-top: 10px; font: 500 12px var(--mono); color: var(--txt2); } .link-section__attribution a { color: #2BD4B4; border-bottom: 1px dotted rgba(43,212,180,.5); } /* ---------- footer ---------- */ .site-footer { max-width: 1180px; margin: 0 auto; padding: 18px 22px 40px; border-top: 1px solid var(--edge); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font: 500 11px var(--mono); color: var(--txt2); } .site-footer a { color: #2BD4B4; } .noscript { max-width: 1180px; margin: 16px auto; padding: 0 22px; color: var(--txt2); } /* ---------- small screens ---------- */ @media (max-width: 640px) { .site-header__inner { flex-wrap: wrap; } .search-wrap { max-width: none; order: 3; flex-basis: 100%; } .card-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); } .card__icon-edit { display: flex; } /* no hover on touch */ } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .card { transform: none !important; } /* no press tilt/scale */ .stat-strip__item:hover { transform: none; } .aurora i { animation: none; } } /* touch / coarse pointers: no follow layers, plain press feedback instead */ @media (hover: none) { .card::before, .card::after, .dent { display: none; } .card:active { background: rgba(255,255,255,.10); } } /* ---------- local draft notice (admin preview) ---------- */ .draft-notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin: 16px 0 0; background: rgba(255,178,92,.08); color: #ffdca8; border: 1px solid rgba(255,178,92,.32); border-radius: var(--radius); font-size: .85rem; } .draft-notice button { font: inherit; padding: 4px 10px; border-radius: 7px; cursor: pointer; border: 1px solid currentColor; background: transparent; color: inherit; } /* ---------- icon-import modal ---------- */ .iconmodal-overlay { position: fixed; inset: 0; z-index: 60; padding: 16px; background: rgba(4,8,15,.72); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .iconmodal { width: 420px; max-width: 100%; background: linear-gradient(180deg, #131d30, #0e1626); border: 1px solid var(--edge-hi); border-radius: var(--radius); padding: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.5); } .iconmodal h2 { margin: 0 0 4px; font: 700 1.05rem var(--disp); } .iconmodal p { margin: 0 0 16px; color: var(--txt2); font-size: .85rem; } .iconmodal__preview { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; } .iconmodal__tile { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: var(--c); background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid var(--c-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 14px var(--c-glow); } .iconmodal__tile .icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .iconmodal__tile img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; } .iconmodal__tile .card__glyph { font-size: .95rem; } .iconmodal__row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; } .iconmodal__field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; } .iconmodal__field span { font-size: .72rem; color: var(--txt2); } .iconmodal input[type=text] { font: inherit; padding: 8px 10px; border-radius: 9px; background: rgba(12,19,33,.7); border: 1px solid var(--edge-hi); color: var(--txt); } .iconmodal__btn { font: inherit; font-weight: 600; padding: 9px 14px; border-radius: 10px; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid var(--edge-hi); color: var(--txt); } .iconmodal__btn--primary { background: var(--c); border-color: var(--c); color: #06121b; } .iconmodal__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } .iconmodal__hint { font-size: .74rem; color: var(--txt2); margin: 10px 0 0; } /* ---------- in-page tools (calculators, fee lookup) ---------- */ .card--calc[aria-expanded="true"] { border-color: var(--edge-hi); } .calc-inline { grid-column: 1 / -1; background: var(--glass); border: 1px solid var(--edge-hi); border-radius: var(--radius); padding: 16px 18px 18px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .calc-inline__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; } .calc-inline__head h3 { margin: 0; font: 700 .98rem var(--disp); } .calc-inline__close { font: inherit; background: none; border: none; color: var(--txt2); cursor: pointer; padding: 4px 8px; border-radius: 7px; } .calc-inline__close:hover { color: var(--txt); background: rgba(255,255,255,.06); } .calc-inline__body .calc__row { max-width: 470px; } .calc__units { display: inline-flex; border: 1px solid var(--edge-hi); border-radius: 10px; overflow: hidden; margin: 0 0 14px; } .calc__units button { font: inherit; padding: 7px 16px; border: none; background: transparent; color: var(--txt2); cursor: pointer; } .calc__units button[aria-pressed="true"] { background: var(--c); color: #06121b; font-weight: 600; } .calc__row { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 12px; } .calc__field { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .calc__label { font-size: .78rem; color: var(--txt2); min-height: 1em; } .calc__inputwrap { display: flex; align-items: center; gap: 6px; border: 1px solid var(--edge-hi); border-radius: 10px; background: rgba(12,19,33,.6); padding: 0 12px; } .calc__inputwrap:focus-within { border-color: var(--c-line); } .calc__inputwrap input { font: inherit; font-size: 1.05rem; border: none; outline: none; background: transparent; color: var(--txt); width: 100%; padding: 10px 0; } .calc__suffix { color: var(--txt2); font-size: .82rem; } .calc__result { margin: 14px 0 2px; font: 800 1.9rem var(--disp); font-variant-numeric: tabular-nums; } .calc__result-unit { font: 400 .95rem var(--font); color: var(--txt2); } .calc__cat { margin: 0; font-weight: 700; color: var(--c); min-height: 1.3em; } .calc__note { margin: 12px 0 0; font-size: .78rem; color: var(--txt2); } .tool-fees { display: grid; gap: 10px; } .tool-fees__bar { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 8px; align-items: center; } .tool-fees__search { width: 100%; font: 500 .95rem var(--font); color: var(--txt); background: rgba(12,19,33,.72); border: 1px solid var(--edge-hi); border-radius: 10px; padding: 10px 12px; } .tool-fees__search:focus { outline: none; border-color: var(--c-line); box-shadow: 0 0 0 4px rgba(43,212,180,.10); } .tool-fees__chip, .tool-fees__full, .tool-fees__action { font: 700 .78rem var(--font); border-radius: 9px; border: 1px solid var(--edge-hi); background: rgba(255,255,255,.05); color: var(--txt2); padding: 9px 11px; cursor: pointer; } .tool-fees__chip[aria-pressed="true"], .tool-fees__action:hover, .tool-fees__full:hover { background: var(--c); border-color: var(--c); color: #06121b; } .tool-fees__status, .tool-fees__more, .tool-fees__empty, .tool-fees__detail-meta { color: var(--txt2); font-size: .78rem; } .tool-fees__empty { padding: 14px 2px; } .tool-fees__results { display: grid; gap: 7px; max-height: min(520px, 62vh); overflow: auto; padding-right: 3px; } .tool-fees__item { display: grid; gap: 0; } .tool-fees .fee-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; width: 100%; min-height: 54px; padding: 10px 11px; border: 1px solid var(--edge); border-radius: 11px; background: rgba(12,19,33,.52); color: var(--txt); text-align: left; font: inherit; cursor: pointer; } .tool-fees .fee-row:hover, .tool-fees .fee-row[aria-expanded="true"] { border-color: var(--c-line); background: rgba(43,212,180,.07); } .tool-fees .fee-row__code { font: 800 1.08rem/1 var(--mono); color: var(--txt); min-width: 48px; } .tool-fees .fee-row__body { min-width: 0; } .tool-fees .fee-row__desc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; } .tool-fees .fee-row__desc--none { color: var(--txt2); font-style: italic; } .tool-fees .fee-row__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; } .tool-fees .fee-addon-list { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; } .tool-fees .fee-addon { display: flex; gap: 8px; align-items: baseline; min-width: 0; font-size: .76rem; line-height: 1.35; } .tool-fees .fee-addon__code { flex: 0 0 42px; color: var(--c); font: 800 .78rem var(--mono); } .tool-fees .fee-addon__desc { flex: 1 1 auto; min-width: 0; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tool-fees .fee-addon__amt { flex: 0 0 auto; color: var(--c); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .tool-fees .fee-addon__more { color: var(--txt2); font-size: .74rem; font-style: italic; } .tool-fees .fee-section, .tool-fees__section { display: inline-flex; border: 1px solid var(--edge); border-radius: 999px; padding: 1px 7px; color: var(--txt2); font: 700 .68rem var(--font); } .tool-fees .fee-row__fee { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; color: var(--c); } .tool-fees .fee-row__star { width: 30px; height: 30px; border: 1px solid var(--edge); border-radius: 8px; background: rgba(255,255,255,.04); color: var(--txt2); cursor: pointer; font-size: 1rem; } .tool-fees .fee-row__star[aria-pressed="true"] { color: #ffcf67; border-color: rgba(255,207,103,.45); background: rgba(255,207,103,.10); } .tool-fees__detail { margin: -1px 0 8px; padding: 11px 12px 12px 70px; border: 1px solid var(--c-line); border-top: 0; border-radius: 0 0 11px 11px; background: rgba(43,212,180,.05); } .tool-fees__sections { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 7px; } .tool-fees__detail-desc { margin: 0 0 5px; color: var(--txt); } .tool-fees__addons { margin: 12px 0 0; } .tool-fees__addons-title { margin: 0 0 6px; color: var(--txt2); font: 800 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; } .tool-fees__addons .fee-addon { font-size: .86rem; padding: 4px 0; border-top: 1px solid var(--edge); } .tool-fees__addons .fee-addon:first-child { border-top: 0; } .tool-fees__addons .fee-addon__desc { white-space: normal; } .tool-fees__actions { display: flex; justify-content: flex-end; margin-top: 9px; } .tool-query { display: grid; gap: 11px; max-width: 720px; } .tool-query__field { display: grid; gap: 5px; } .tool-query__label { color: var(--txt2); font: 700 .76rem var(--mono); letter-spacing: .08em; text-transform: uppercase; } .tool-query__input { width: 100%; font: 500 1rem var(--font); color: var(--txt); background: rgba(12,19,33,.72); border: 1px solid var(--edge-hi); border-radius: 11px; padding: 12px 13px; } .tool-query__input:focus { outline: none; border-color: var(--c-line); box-shadow: 0 0 0 4px rgba(43,212,180,.10); } .tool-query__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .tool-query__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; font: 800 .86rem var(--font); border-radius: 10px; border: 1px solid var(--edge-hi); background: rgba(255,255,255,.05); color: var(--txt); padding: 8px 13px; cursor: pointer; } .tool-query__btn--primary, .tool-query__btn:hover { background: var(--c); border-color: var(--c); color: #06121b; } .tool-query__hint { color: var(--txt2); font-size: .8rem; } @media (max-width: 620px) { .tool-fees__bar { grid-template-columns: 1fr; } .tool-fees .fee-row { grid-template-columns: auto minmax(0, 1fr) auto; } .tool-fees .fee-row__star { grid-column: 3; } .tool-fees__detail { padding-left: 12px; } } /* ---------- header "Customize" action (link to settings) ---------- */ .header-action { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; padding: 8px 12px; border-radius: 999px; color: var(--txt2); background: var(--glass); border: 1px solid var(--edge); } .header-action:hover { color: var(--txt); border-color: var(--edge-hi); } .header-action svg { width: 15px; height: 15px; } .header-action__text { font: 600 12px var(--mono); letter-spacing: .02em; } @supports not (backdrop-filter: blur(1px)) { .header-action { background: var(--glass-solid); } } @media (max-width: 620px) { .header-action__text { display: none; } } /* ---------- profile: shared-workstation chip (Addendum B §4.4) ---------- */ .profile-chip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; padding: 9px 14px; background: rgba(43,212,180,.08); border: 1px solid rgba(43,212,180,.32); border-radius: var(--radius); font-size: .85rem; color: var(--txt); } .profile-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); } .profile-chip__label { font-weight: 600; } .profile-chip__btn { margin-left: auto; font: 600 .8rem var(--font); cursor: pointer; padding: 5px 11px; border-radius: 8px; background: transparent; color: var(--accent); border: 1px solid var(--accent); } .profile-chip__btn:hover { background: var(--accent); color: #04120e; } /* ---------- toast (undo affordance) ---------- */ .toast { position: fixed; left: 50%; bottom: 22px; z-index: 70; display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 12px; background: linear-gradient(180deg, #17233a, #0f1727); border: 1px solid var(--edge-hi); color: var(--txt); font-size: .88rem; box-shadow: 0 18px 44px rgba(0,0,0,.5); transform: translate(-50%, 140%); opacity: 0; transition: transform .3s ease, opacity .3s ease; } .toast--in { transform: translate(-50%, 0); opacity: 1; } .toast button { font: 600 .84rem var(--font); cursor: pointer; padding: 5px 12px; border-radius: 8px; background: var(--accent); border: none; color: #04120e; } /* ---------- compact density (prefs.density) ---------- */ [data-density="compact"] .card-grid { gap: 6px; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); } [data-density="compact"] .card { min-height: 52px; padding: 9px 11px; } [data-density="compact"] .card__icon-wrap, [data-density="compact"] .card__icon { width: 34px; height: 34px; } [data-density="compact"] .link-section { margin-top: 22px; }