/* ═══════════════════════════════════════════════════════════════════
lib/ui.css — shared editorial design system for auth + admin chrome.
Linked from on every page so styles arrive at first paint
(no FOUC). Source of truth for the auth/admin visual language.
─────────────────────────────────────────────────────────────── */
/* ─── Nav-link dropdown (PROJECTS → directory / pipeline) ─────────
Pure-CSS dropdown attached to a .nav-links when it carries the
.wbo-has-dropdown class. Opens on hover OR keyboard focus (focus-
within). Hidden below 860px to match the rest of the nav. */
.nav-links li.wbo-has-dropdown{ position:relative; }
.nav-links li.wbo-has-dropdown > a{
display:inline-flex; align-items:center; gap:5px;
}
.nav-links li.wbo-has-dropdown > a::after{
content:""; display:inline-block;
width:0; height:0; margin-top:1px;
border-left:3px solid transparent;
border-right:3px solid transparent;
border-top:3px solid currentColor;
opacity:.7;
transition:transform .2s ease;
}
.nav-links li.wbo-has-dropdown:hover > a::after,
.nav-links li.wbo-has-dropdown:focus-within > a::after{
transform:rotate(180deg);
}
.wbo-nav-dropdown{
position:absolute;
top:calc(100% + 6px);
left:-14px;
list-style:none;
margin:0; padding:6px 0;
min-width:200px;
background:var(--nav-bg, var(--bg2));
border:1px solid var(--border);
border-radius:4px;
box-shadow:0 14px 36px rgba(0,0,0,.2);
-webkit-backdrop-filter:blur(24px);
backdrop-filter:blur(24px);
z-index:60;
opacity:0; visibility:hidden;
transform:translateY(-4px);
transition:
opacity .18s ease,
transform .18s ease,
visibility 0s linear .18s;
}
.nav-links li.wbo-has-dropdown:hover > .wbo-nav-dropdown,
.nav-links li.wbo-has-dropdown:focus-within > .wbo-nav-dropdown{
opacity:1; visibility:visible; transform:translateY(0);
transition:opacity .18s ease, transform .18s ease;
}
.wbo-nav-dropdown li{ list-style:none; }
.wbo-nav-dropdown a{
display:block;
padding:9px 18px;
font-size:10px; font-weight:500;
letter-spacing:2px; text-transform:uppercase;
color:var(--text-dim);
text-decoration:none;
white-space:nowrap;
transition:color .15s ease, background .15s ease;
}
.wbo-nav-dropdown a:hover,
.wbo-nav-dropdown a:focus{
color:var(--text); background:var(--accent-dim); outline:none;
}
@media (max-width: 860px){
.wbo-nav-dropdown{ display:none; }
}
/* ─── Page loader ─────────────────────────────────────────────────
Shown on every full page load (Home / Map / Projects). Editorial:
subtitle top-left, 0→100% counter bottom-left that slides over to
the bottom-right on completion, then the bg slides up to reveal
the page beneath. Minimum visible time is enforced in JS; the
reveal also waits for window.load.
─────────────────────────────────────────────────────────────────── */
#wbo-loader{
position:fixed; inset:0; z-index:99999;
background:var(--bg);
color:var(--text);
display:block;
transform:translateY(0);
transition:transform .75s cubic-bezier(.7,.0,.3,1);
will-change:transform;
}
#wbo-loader.is-done{ transform:translateY(-101%); }
#wbo-loader[aria-hidden="true"]{ pointer-events:none; }
.wbo-loader-tagline{
position:absolute; top:48px; left:48px;
max-width:680px;
font-family:var(--font, 'Inter', system-ui, sans-serif);
font-size:32.5px; line-height:1.55; font-weight:300;
letter-spacing:.01em;
color:var(--text-mid);
opacity:0;
animation:wbo-loader-fade-in .6s ease .1s forwards;
}
.wbo-loader-tagline em{
font-style:normal; color:var(--text);
}
.wbo-loader-counter{
position:absolute; bottom:44px; left:48px;
font-family:var(--font, 'Inter', system-ui, sans-serif);
font-size:84px; font-weight:300; line-height:1;
letter-spacing:-.04em;
color:var(--text);
font-variant-numeric:tabular-nums;
transform:translateX(0);
transition:transform .55s cubic-bezier(.7,.0,.3,1);
opacity:0;
animation:wbo-loader-fade-in .5s ease forwards;
}
.wbo-loader-counter.is-complete{
transform:translateX(var(--wbo-loader-slide, 60vw));
}
@keyframes wbo-loader-fade-in{ to { opacity:1 } }
@media (max-width:520px){
.wbo-loader-tagline{ top:32px; left:24px; max-width:80vw; font-size:30px; }
.wbo-loader-counter{ bottom:28px; left:24px; font-size:64px; }
}
/* Native [hidden] must win against our flex .wbo-field rule. */
.wbo-auth-root [hidden], .wbo-overlay [hidden], .wbo-popover [hidden]{
display:none !important;
}
/* ── Nav chrome (auth + admin triggers) ─────────────────────────
Matches the site's existing .nav-links a styling exactly so
HOME/MAP/PROJECTS, ADMIN, and SIGN IN read as a single typographic
family with consistent spacing between every adjacent button. */
.wbo-nav { display:flex; align-items:center; gap:28px; }
/* Base styling for ADMIN / SIGN IN buttons. Visual chrome only — the
actual box dimensions are forced to match the anchor nav-links via
the unified rule below. */
.wbo-nav-link{
appearance: none;
-webkit-appearance: none;
font: inherit;
background: none;
border: 0;
color: var(--text-dim);
cursor: pointer;
font-size: 10px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
transition: color .15s ease;
}
/* === Unified hero-nav button sizing ============================
Every clickable item in the top nav — anchor or button — renders
as a 14px-tall inline-block box with line-height equal to height,
so the text is dead-centered. Both element types now share the
exact same visual baseline; no per-element nudges needed.
Scoped to direct children of .nav-links so the PROJECTS dropdown
menu items (which are deeper anchors) keep their own padding.
The wrappers also need font-size/line-height locked to the
anchor's values. Without this, each inherits the body's 16px
font and ~1.2 line-height, which creates a 19.2px strut inside
the line box and pushes the inline-block down to centre on
the taller strut baseline. The neighbouring ADMIN / SIGN IN
buttons live directly in .wbo-nav (no , no strut), so their
text would sit 2–4px higher than the anchors. Matching the strut
below pins every nav item's text to the same baseline. */
nav .nav-links > li {
font-size: 10px;
line-height: 14px;
}
nav .nav-links > li > a,
nav .wbo-nav .wbo-nav-link {
display: inline-block;
box-sizing: content-box;
height: 14px;
line-height: 14px;
padding: 0;
margin: 0;
vertical-align: baseline;
}
/* =============================================================== */
/* Profile button always sits a little further out from whatever
precedes it (typically the ADMIN trigger), so it reads as the
"account" zone, separate from the navigation row. */
.wbo-nav .wbo-profile-btn{ margin-left:12px; }
.wbo-nav-link:hover{ color:var(--text); }
.wbo-nav-link .wbo-arrow{
display:inline-block; margin-left:6px; transition:transform .2s ease;
}
.wbo-nav-link:hover .wbo-arrow{ transform:translateX(3px); }
/* Pre-mount placeholders (rendered synchronously from HTML).
Identical styling to the live versions so the swap is invisible. */
.wbo-pre{ cursor:default; }
/* ── Profile button (signed-in trigger in nav) ────────────────── */
.wbo-profile-btn{
width:36px; height:36px; border-radius:999px;
background:var(--accent-dim);
border:1px solid var(--border);
color:var(--text); cursor:pointer; padding:0;
display:inline-flex; align-items:center; justify-content:center;
font-size:13px; font-weight:600; letter-spacing:.04em;
transition:border-color .15s ease, transform .15s ease;
}
.wbo-profile-btn:hover{ border-color:var(--accent); }
.wbo-profile-btn.is-open{
border-color:var(--accent); transform:scale(1.02);
}
/* ── Anchored popover (profile menu) ──────────────────────────── */
.wbo-popover-layer{
position:fixed; inset:0; z-index:9990; background:transparent;
}
.wbo-popover{
position:fixed; z-index:9991;
min-width:280px; max-width:320px;
background:var(--bg2); color:var(--text);
border:1px solid var(--border); border-radius:4px;
padding:8px;
box-shadow:0 20px 60px rgba(0,0,0,.45);
opacity:0; transform:translateY(-6px);
animation:wbo-pop .18s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes wbo-pop { to { opacity:1; transform:translateY(0); } }
.wbo-pop-section{ padding:14px 16px; }
.wbo-pop-divider{
height:1px; background:var(--border); margin:2px 8px;
}
.wbo-pop-row{
display:flex; align-items:center; gap:10px;
padding:10px 12px; border-radius:3px;
background:transparent; border:0; width:100%;
color:var(--text); font:inherit; font-size:13px;
cursor:pointer; text-align:left;
transition:background .12s ease, color .12s ease;
}
.wbo-pop-row:hover{ background:var(--accent-dim); }
.wbo-pop-row.is-danger:hover{ color:#e8636a; background:transparent; }
.wbo-pop-row .wbo-pop-icon{
width:16px; height:16px; flex-shrink:0; color:var(--text-dim);
display:inline-flex; align-items:center; justify-content:center;
}
.wbo-pop-row:hover .wbo-pop-icon{ color:var(--text); }
.wbo-pop-label{
font-size:10px; font-weight:500; letter-spacing:.22em;
text-transform:uppercase; color:var(--text-dim);
padding:0 4px 6px;
}
.wbo-pop-identity{
padding:18px 16px 14px; display:flex; flex-direction:column; gap:2px;
}
.wbo-pop-name{
display:flex; align-items:center; gap:8px;
font-size:15px; font-weight:500; color:var(--text);
min-height:24px;
}
.wbo-pop-name button{
background:none; border:0; padding:2px; cursor:pointer;
color:var(--text-dim); display:inline-flex;
transition:color .15s ease;
}
.wbo-pop-name button:hover{ color:var(--accent); }
.wbo-pop-name .wbo-edit-input{
flex:1; font:inherit; font-size:15px; font-weight:500;
color:var(--text); background:transparent; border:0;
border-bottom:1px solid var(--accent); padding:2px 0;
}
.wbo-pop-name .wbo-edit-input:focus{ outline:none; }
.wbo-pop-email{
font-size:11px; color:var(--text-dim); letter-spacing:.04em;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wbo-pop-org{
display:flex; align-items:center; gap:10px; flex:1; min-width:0;
}
.wbo-pop-org-name{
font-size:13px; color:var(--text); font-weight:500;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
}
.wbo-pop-org-empty{
font-size:12px; color:var(--text-dim); font-style:italic;
}
.wbo-role-chip{
font-size:9px; font-weight:600; letter-spacing:.18em;
text-transform:uppercase; color:var(--text-dim);
padding:3px 8px; border:1px solid var(--border); border-radius:999px;
}
.wbo-role-chip.is-active{ color:var(--accent); border-color:var(--accent); }
.wbo-theme-switch{
display:flex; align-items:center; gap:2px; padding:3px;
background:var(--bg); border:1px solid var(--border); border-radius:999px;
}
.wbo-theme-switch button{
width:26px; height:24px; padding:0; border:0; border-radius:999px;
background:transparent; color:var(--text-dim); cursor:pointer;
display:inline-flex; align-items:center; justify-content:center;
transition:background .15s ease, color .15s ease;
}
.wbo-theme-switch button:hover{ color:var(--text); }
.wbo-theme-switch button.is-active{
background:var(--accent-dim); color:var(--accent);
}
/* ── Card overlay (modals) ────────────────────────────────────── */
.wbo-overlay{
position:fixed; inset:0; z-index:10000;
background:rgba(8, 14, 24, .55);
-webkit-backdrop-filter:blur(8px) saturate(120%);
backdrop-filter:blur(8px) saturate(120%);
display:flex; align-items:center; justify-content:center;
padding:24px; opacity:0; animation:wbo-fade .22s ease forwards;
}
[data-theme="light"] .wbo-overlay{ background:rgba(40, 32, 22, .35); }
@keyframes wbo-fade { to { opacity:1 } }
.wbo-card{
position:relative; width:100%; max-width:420px;
background:var(--bg2); color:var(--text);
border:1px solid var(--border); border-radius:4px;
padding:40px 40px 36px;
box-shadow:0 30px 80px rgba(0,0,0,.45);
transform:translateY(8px); opacity:0;
animation:wbo-rise .35s cubic-bezier(.2,.7,.2,1) .05s forwards;
}
.wbo-card-wide{
max-width:560px; padding:40px 44px 36px;
max-height:82vh;
display:flex; flex-direction:column;
}
@keyframes wbo-rise{ to { transform:translateY(0); opacity:1 } }
.wbo-card-close{
position:absolute; top:14px; right:14px;
width:28px; height:28px; padding:0;
background:none; border:0; color:var(--text-dim);
font-size:20px; line-height:1; cursor:pointer;
transition:color .15s ease, transform .2s ease;
}
.wbo-card-close:hover{ color:var(--text); transform:rotate(90deg); }
/* ── Typographic devices ──────────────────────────────────────── */
.wbo-eyebrow{
font-size:10px; font-weight:500; letter-spacing:.28em;
text-transform:uppercase; color:var(--text-dim);
margin:0 0 12px;
}
.wbo-display{
font-size:26px; font-weight:300; line-height:1.1;
letter-spacing:-.012em; color:var(--text);
margin:0;
}
.wbo-display em{ font-style:normal; color:var(--accent-hi); }
.wbo-rule{
height:1px; background:var(--accent);
width:36px; margin:18px 0 26px; opacity:.9;
}
.wbo-rule-full{ width:100%; background:var(--border); opacity:1; }
.wbo-sub{
color:var(--text-mid); font-size:13px; line-height:1.55; margin:0 0 22px;
}
/* ── Tab switcher ─────────────────────────────────────────────── */
.wbo-tabs{
display:flex; gap:24px; margin-bottom:26px;
border-bottom:1px solid var(--border);
}
.wbo-tabs button{
font:inherit; background:none; border:0; padding:0 0 12px;
color:var(--text-dim); cursor:pointer;
font-size:11px; font-weight:500; letter-spacing:.22em;
text-transform:uppercase;
border-bottom:1px solid transparent;
margin-bottom:-1px;
transition:color .15s ease, border-color .15s ease;
}
.wbo-tabs button:hover{ color:var(--text); }
.wbo-tabs button.is-active{
color:var(--text); border-bottom-color:var(--accent);
}
/* ── Pane container — absolute panes so they overlay (no
stack-doubling) and the card height never balloons during
tab transitions. ───────────────────────────────────────── */
.wbo-pane-wrap{
position:relative; flex:1;
min-height:420px;
}
.wbo-pane{
position:absolute; inset:0;
overflow-y:auto;
padding-right:4px; /* compensates scrollbar width */
opacity:0; transform:translateY(4px);
animation:wbo-pane-in .25s cubic-bezier(.2,.7,.2,1) forwards;
}
.wbo-pane.is-out{
animation:wbo-pane-out .15s ease forwards;
pointer-events:none;
}
@keyframes wbo-pane-in {
to { opacity:1; transform:translateY(0); }
}
@keyframes wbo-pane-out {
to { opacity:0; transform:translateY(-4px); }
}
.wbo-pane::-webkit-scrollbar{ width:6px; }
.wbo-pane::-webkit-scrollbar-thumb{
background:var(--border); border-radius:999px;
}
/* ── Forms ────────────────────────────────────────────────────── */
.wbo-stack{ display:flex; flex-direction:column; gap:22px; }
.wbo-stack-sm{ gap:14px; }
.wbo-field{ display:flex; flex-direction:column; gap:5px; }
.wbo-field-label{
font-size:10px; font-weight:500; letter-spacing:.22em;
text-transform:uppercase; color:var(--text-dim);
}
.wbo-field-input{
font:inherit; font-size:15px; font-weight:400;
color:var(--text); background:transparent;
border:0; border-bottom:1px solid var(--border);
padding:8px 0 9px;
transition:border-color .15s ease;
}
.wbo-field-input::placeholder{ color:var(--text-dim); }
.wbo-field-input:focus{ outline:none; border-bottom-color:var(--accent); }
.wbo-field-hint{
font-size:11px; color:var(--text-dim); letter-spacing:.02em;
margin-top:2px;
}
/* ─────────────────────────────────────────────────────────────────
Page-level auth gate (used on /map.html and /projects.html).
Synchronous script sets data-auth-required="locked" before
first paint, which engages these rules. lib/auth-gate.js then
reconciles against the real session and removes the attribute if
the user is signed in.
While locked: every direct body child except the gate overlay is
hidden — both visually AND from interaction. The gate itself is a
centred glass card that sits on top of a tinted backdrop. The
wordmark + nav are deliberately HIDDEN too while locked, because
we don't want the signed-out user to interact with the page chrome
underneath; their only path forward is one of the two CTAs.
─────────────────────────────────────────────────────────────────── */
/* Hide every direct body child except the gate itself and any modal /
popover layers that openCard()/openPopover() append at runtime — the
auth modal must remain visible on top of the gate so the user can
actually sign in. */
html[data-auth-required="locked"] body > *:not(.wbo-gate):not(.wbo-overlay):not(.wbo-popover-layer):not(.wbo-popover) {
visibility: hidden !important;
pointer-events: none !important;
}
html[data-auth-required="locked"] body { overflow: hidden; }
.wbo-gate {
position: fixed;
inset: 0;
/* Sits above the page chrome (nav z-index 200) but BELOW the
.wbo-overlay auth modal (z-index 10000) — so clicking Sign in /
Create account inside the gate opens the modal cleanly on top
of the gate's backdrop. */
z-index: 9000;
display: none;
align-items: center;
justify-content: center;
padding: 32px;
background:
radial-gradient(ellipse at top, var(--accent-dim) 0%, transparent 60%),
var(--bg);
/* Faint editorial grid behind the card — same texture vocab as the hero */
background-image:
radial-gradient(ellipse at top, var(--accent-dim) 0%, transparent 60%),
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: auto, 48px 48px, 48px 48px;
background-color: var(--bg);
}
[data-theme="light"] .wbo-gate {
background-image:
radial-gradient(ellipse at top, var(--accent-dim) 0%, transparent 60%),
linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
background-size: auto, 48px 48px, 48px 48px;
}
html[data-auth-required="locked"] .wbo-gate { display: flex; }
.wbo-gate-card {
max-width: 480px;
width: 100%;
padding: 44px 44px 36px;
background: var(--glass-bg, var(--bg2));
border: 1px solid var(--border);
border-radius: 4px;
box-shadow:
0 24px 64px rgba(0, 0, 0, 0.18),
0 2px 6px rgba(0, 0, 0, 0.08);
text-align: left;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.wbo-gate-eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent-hi);
margin-bottom: 16px;
}
.wbo-gate-title {
font-size: 26px;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.3px;
color: var(--text);
margin: 0 0 14px;
}
.wbo-gate-title em {
font-style: normal;
color: var(--accent-hi);
font-weight: 500;
}
.wbo-gate-body {
font-size: 14px;
line-height: 1.65;
color: var(--text-mid);
margin: 0 0 28px;
}
.wbo-gate-actions {
display: flex;
gap: 12px;
margin-bottom: 22px;
}
.wbo-gate-actions .wbo-cta {
flex: 1;
}
.wbo-gate-back {
display: inline-block;
font-size: 10px;
font-weight: 600;
letter-spacing: 2.2px;
text-transform: uppercase;
color: var(--text-dim);
text-decoration: none;
transition: color 0.18s ease;
}
.wbo-gate-back:hover { color: var(--text); }
.wbo-gate-back::before { content: "← "; }
@media (max-width: 520px) {
.wbo-gate-card { padding: 32px 26px 26px; }
.wbo-gate-title { font-size: 22px; }
.wbo-gate-actions { flex-direction: column; }
}
/* ── Platform-policy consent row (sign-up tab) ──────────────────
A flat checkbox + reading-density label, with the policy link
highlighted in the accent colour so it reads as a deliberate
call-to-attention, not just hyperlinked filler text. */
.wbo-policy-row{
display:flex; gap:12px; align-items:flex-start;
padding:14px 14px 14px 12px;
background:var(--accent-dim);
border-left:2px solid var(--accent);
border-radius:2px;
cursor:pointer;
user-select:none;
}
.wbo-policy-row[hidden]{ display:none !important; }
.wbo-policy-check{
flex-shrink:0;
width:16px; height:16px;
margin-top:2px;
accent-color:var(--accent);
cursor:pointer;
}
.wbo-policy-text{
font-size:12.5px; font-weight:400;
line-height:1.55;
color:var(--text-mid);
letter-spacing:0;
}
.wbo-policy-link{
color:var(--accent-hi);
font-weight:600;
text-decoration:underline;
text-underline-offset:2px;
text-decoration-color:var(--border);
transition:color .15s ease, text-decoration-color .15s ease;
}
.wbo-policy-link:hover{
color:var(--accent);
text-decoration-color:var(--accent);
}
.wbo-error{
font-size:12px; color:#e8636a; line-height:1.45;
padding-left:10px; border-left:2px solid #e8636a;
margin:0;
}
.wbo-ok{
font-size:13px; color:var(--text); line-height:1.55;
padding-left:12px; border-left:1px solid var(--accent);
margin:0;
}
/* ── Buttons ──────────────────────────────────────────────────── */
.wbo-cta{
font:inherit; cursor:pointer;
background:var(--accent); color:#fff;
border:1px solid var(--accent);
padding:11px 18px; border-radius:3px;
font-size:11px; font-weight:600; letter-spacing:.2em;
text-transform:uppercase;
transition:background .15s ease, border-color .15s ease, transform .12s ease;
width:100%;
}
.wbo-cta:hover{ background:var(--accent-hi); border-color:var(--accent-hi); }
.wbo-cta:active{ transform:translateY(1px); }
.wbo-cta:disabled{ opacity:.5; cursor:default; transform:none; }
.wbo-cta-ghost{
background:transparent; color:var(--text); border-color:var(--border);
}
.wbo-cta-ghost:hover{
background:transparent; color:var(--accent-hi); border-color:var(--accent);
}
.wbo-cta-danger{
background:transparent; color:#e8636a; border-color:#e8636a40;
}
.wbo-cta-danger:hover{
background:#e8636a; color:#fff; border-color:#e8636a;
}
.wbo-cta-sm{ padding:7px 12px; font-size:10px; width:auto; }
.wbo-link{
font:inherit; background:none; border:0; padding:2px 0;
color:var(--text-mid); cursor:pointer;
font-size:11px; letter-spacing:.16em; text-transform:uppercase;
border-bottom:1px solid transparent;
transition:color .15s ease, border-color .15s ease;
align-self:flex-start;
}
.wbo-link:hover{ color:var(--text); border-bottom-color:var(--accent); }
/* ── Lists ────────────────────────────────────────────────────── */
.wbo-list{ list-style:none; padding:0; margin:0; }
.wbo-list-item{
display:flex; align-items:center; gap:14px;
padding:14px 0; border-bottom:1px solid var(--border);
}
.wbo-list-item:last-child{ border-bottom:0; }
.wbo-list-primary{ flex:1; min-width:0; }
.wbo-list-primary strong{
display:block; font-size:13px; font-weight:500;
color:var(--text);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wbo-list-primary span{
display:block; font-size:11px; color:var(--text-dim);
letter-spacing:.04em; margin-top:2px;
}
.wbo-list-scroll{
/* The pane itself now owns scrolling; this becomes a no-op wrapper. */
}
.wbo-role-select{
font:inherit; font-size:11px; letter-spacing:.12em;
text-transform:uppercase;
color:var(--text); background:transparent;
border:1px solid var(--border); border-radius:3px;
padding:5px 8px 5px 10px; cursor:pointer;
appearance:none; -webkit-appearance:none;
padding-right:26px;
background-image:url("data:image/svg+xml;utf8,