/* SkyCanvas — shared styles. Mobile-first. No filter:blur / no backdrop-filter
on large surfaces (perf on mobile); tiny blur allowed on modal backdrop only. */
:root{
/* palette */
--sky-1:#eaf4fb; --sky-2:#cfe6f5; --sky-3:#a9d2ec; --sky-4:#7fb8dd;
--ink:#16334d; --ink-soft:#46617a; --ink-faint:#7d92a6;
--line:#d9e7f2; --line-strong:#bfd6e7;
--danger:#b3324a; --ok:#1f6b3f;
--accent:#2f6fa3; --accent-deep:#1d4568;
--surface:#ffffff; --surface-2:#f5fafd; --surface-3:#eaf3fa;
/* elevation + shape */
--shadow-s:0 1px 3px rgba(22,51,77,.07), 0 1px 2px rgba(22,51,77,.05);
--shadow:0 8px 28px rgba(22,51,77,.09);
--shadow-l:0 18px 50px rgba(22,51,77,.16);
--ring:0 0 0 3px rgba(127,184,221,.4);
--radius-s:9px; --radius-m:12px; --radius:16px;
--nav-h:60px;
--content-max:960px;
--grad-brand:linear-gradient(180deg,#3f7db0,#1d4568);
}
*{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; }
html,body{min-height:100%}
body{
font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
color:var(--ink);
/* Static gradient — paints once, no per-frame work */
background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 55%,var(--sky-3) 100%);
background-attachment:fixed;
min-height:100vh;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:var(--ink-soft);text-decoration:none}
a:hover{color:var(--ink)}
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:6px; }
::selection{ background:rgba(127,184,221,.45); }
.icon{ width:20px; height:20px; flex:0 0 auto; }
.icon-s{ width:16px; height:16px; flex:0 0 auto; }
/* ─── Navbar ──────────────────────────────────────────────────────────────── */
.nav{
position:sticky; top:0; z-index:50;
height:var(--nav-h);
background:rgba(255,255,255,.92);
border-bottom:1px solid rgba(22,51,77,.07);
box-shadow:0 1px 12px rgba(22,51,77,.05);
}
.nav-inner{
max-width:var(--content-max);
margin:0 auto;
height:100%;
padding:0 1rem;
display:flex; align-items:center; justify-content:space-between;
}
.brand{
font-family:'Italianno',cursive;
font-size:2.05rem;
color:var(--ink-soft);
line-height:1;
transition:color .15s;
}
.brand:hover{ color:var(--accent-deep); }
.nav-links{display:flex; align-items:center; gap:.35rem;}
.nav-links a{
font-size:.76rem; letter-spacing:.17em; text-transform:uppercase;
padding:.68rem .9rem; border-radius:9px;
transition:background .15s, color .15s;
}
.nav-links a:hover{background:rgba(127,184,221,.16)}
.nav-toggle{
display:none;
width:44px; height:44px;
border:0; background:transparent; cursor:pointer; padding:0;
align-items:center; justify-content:center;
border-radius:10px;
}
.nav-toggle span{
display:block; width:22px; height:2px; background:var(--ink-soft);
position:relative; transition:transform .2s ease, opacity .2s ease;
border-radius:2px;
}
.nav-toggle span::before,
.nav-toggle span::after{
content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink-soft);
transition:transform .2s ease, top .2s ease;
border-radius:2px;
}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
.nav.open .nav-toggle span{background:transparent}
.nav.open .nav-toggle span::before{top:0; transform:rotate(45deg)}
.nav.open .nav-toggle span::after{top:0; transform:rotate(-45deg)}
@media (max-width:720px){
.nav-toggle{display:flex}
.nav-links{
position:absolute; top:var(--nav-h); left:0; right:0;
flex-direction:column; align-items:stretch;
background:rgba(255,255,255,.98);
border-bottom:1px solid rgba(22,51,77,.08);
box-shadow:0 18px 34px rgba(22,51,77,.12);
padding:.5rem .9rem 1rem;
gap:0;
transform:translateY(-8px);
opacity:0; pointer-events:none;
transition:opacity .15s ease, transform .15s ease;
}
.nav-links a{
padding:.95rem .8rem;
border-bottom:1px solid rgba(22,51,77,.06);
font-size:.9rem;
border-radius:8px;
}
.nav-links a:last-child{border-bottom:0}
.nav.open .nav-links{ opacity:1; transform:none; pointer-events:auto; }
}
/* ─── Layout ──────────────────────────────────────────────────────────────── */
.wrap{ max-width:var(--content-max); margin:0 auto; padding:1.7rem 1rem 4rem; }
h1.title{
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
font-size:clamp(2rem,4.6vw,3.2rem); color:var(--ink);
margin-bottom:.3rem; line-height:1.05;
}
.sub{color:var(--ink-soft); margin-bottom:1.4rem; font-size:.95rem}
.muted{color:var(--ink-soft); font-size:.88rem}
.card{
background:var(--surface);
border:1px solid rgba(22,51,77,.07);
border-radius:var(--radius);
padding:1.25rem;
box-shadow:var(--shadow);
margin-bottom:1rem;
}
.card h2{
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
font-size:1.35rem; color:var(--ink); margin-bottom:.9rem;
}
@media (min-width:560px){ .card{padding:1.7rem} }
/* ─── Forms ───────────────────────────────────────────────────────────────── */
label{
display:block; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
color:var(--ink-soft); margin-bottom:.32rem; font-weight:500;
}
input,textarea,select{
width:100%; padding:.72rem .85rem;
border:1px solid var(--line); border-radius:var(--radius-s); background:#fff;
font:inherit; color:var(--ink);
/* 16px font-size on inputs prevents iOS auto-zoom on focus */
font-size:16px;
transition:border-color .15s, box-shadow .15s;
}
input:focus,textarea:focus,select:focus{
outline:none; border-color:var(--sky-4);
box-shadow:var(--ring);
}
input::placeholder,textarea::placeholder{ color:var(--ink-faint); }
select{
appearance:none; -webkit-appearance:none; cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right .7rem center;
padding-right:2.1rem;
}
input[type="checkbox"],input[type="radio"]{
width:16px; height:16px; padding:0; border:0; border-radius:4px;
box-shadow:none; accent-color:var(--accent); flex:0 0 auto;
}
input[type="checkbox"]:focus,input[type="radio"]:focus{ box-shadow:var(--ring); }
textarea{ min-height:96px; resize:vertical; font-family:inherit }
.row{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px){ .row{grid-template-columns:1fr 1fr} .row.three{grid-template-columns:1fr 1fr 1fr} }
.field{margin-bottom:1rem}
button,.btn{
display:inline-block; border:0; cursor:pointer; font:inherit; font-weight:500;
padding:.75rem 1.4rem; border-radius:999px;
background:var(--grad-brand); color:#fff;
letter-spacing:.05em; min-height:44px;
box-shadow:0 2px 10px rgba(29,69,104,.28);
transition:filter .12s, transform .08s, box-shadow .15s;
}
/* display:inline-block above would defeat the HTML hidden attribute (see the
.modal[hidden] convention) — keep this rule right next to it. */
button[hidden],.btn[hidden]{ display:none; }
button:hover,.btn:hover{filter:brightness(1.09); box-shadow:0 4px 16px rgba(29,69,104,.32); color:#fff;}
button:active,.btn:active{transform:translateY(1px); box-shadow:0 1px 6px rgba(29,69,104,.3);}
button:focus-visible,.btn:focus-visible{ box-shadow:var(--ring), 0 2px 10px rgba(29,69,104,.28); }
button.ghost,.btn.ghost{
background:rgba(255,255,255,.75); color:var(--ink-soft);
border:1px solid var(--line-strong); box-shadow:none;
}
button.ghost:hover,.btn.ghost:hover{ background:#fff; color:var(--ink); border-color:var(--sky-4); filter:none; box-shadow:var(--shadow-s); }
button.danger{
background:transparent;color:var(--danger);border:1px solid #e5c3cc;
padding:.45rem .85rem;font-size:.82rem;min-height:auto; box-shadow:none;
}
button.danger:hover{ background:#fdf2f4; border-color:var(--danger); filter:none; box-shadow:none; }
button.full{display:block;width:100%}
.msg{
padding:.7rem .9rem; border-radius:10px; margin-bottom:1rem;
font-size:.92rem; display:none;
}
.msg.show{display:block}
.msg.err{background:#fbe9ed;color:var(--danger);border:1px solid #f0c8d2}
.msg.ok{background:#e7f3ec;color:var(--ok);border:1px solid #c5e1cf}
/* ─── Avatar / social ─────────────────────────────────────────────────────── */
.avatar{
width:96px;height:96px;border-radius:50%;
background:var(--sky-2) center/cover;
border:3px solid #fff; box-shadow:0 4px 16px rgba(22,51,77,.16);
flex-shrink:0;
}
.avatar.lg{width:128px;height:128px}
@media (min-width:560px){ .avatar.lg{width:144px;height:144px} }
.social-list{display:flex;flex-direction:column;gap:.5rem}
.social-item{
display:flex; align-items:center; gap:.6rem;
padding:.62rem .8rem; border:1px solid var(--line); border-radius:var(--radius-s);
background:#fff; flex-wrap:wrap;
transition:border-color .15s, box-shadow .15s;
}
.social-item:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-s); }
.social-item .plat{
font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-soft); min-width:84px; font-weight:500;
}
.social-item .url{
flex:1; min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Add-social form: stacks on mobile, single row on wider screens */
.social-form{ display:grid; gap:.6rem; margin-top:1rem; grid-template-columns:1fr; }
@media (min-width:640px){ .social-form{ grid-template-columns:1fr 2fr auto; align-items:start; } }
.handle-wrap{
display:flex; align-items:stretch;
border:1.5px solid transparent; border-radius:12px;
background:var(--surface-2); overflow:hidden; min-height:48px;
transition:border-color .15s, box-shadow .15s, background .15s;
}
.handle-wrap:hover{ background:var(--surface-3); }
.handle-wrap:focus-within{ background:#fff; border-color:var(--sky-4); box-shadow:var(--ring); }
.handle-wrap .handle-prefix{
display:flex; align-items:center; padding:0 .7rem;
background:var(--surface-2); color:var(--ink-soft);
font-size:.92rem; white-space:nowrap; user-select:none;
}
.handle-wrap input{
flex:1; border:0; outline:0; padding:.6rem .8rem; min-width:0;
background:transparent; font:inherit; box-shadow:none;
}
.handle-wrap input:disabled{ color:var(--ink-soft); cursor:not-allowed; }
/* ─── Coming-soon (smooth, no blur filters) ───────────────────────────────── */
.cs-hero{
position:relative;
min-height:calc(100vh - var(--nav-h));
display:grid; place-items:center;
text-align:center;
padding:2rem 1rem 5rem;
overflow:hidden;
}
.cs-hero .clouds{
position:absolute; inset:0; z-index:0; pointer-events:none;
opacity:.85;
}
.cs-hero main{ position:relative; z-index:1; max-width:780px; }
.cs-mark{
font-family:'Italianno',cursive;
font-size:clamp(2rem,4vw,3rem);
color:var(--ink-soft);
margin-bottom:.4rem;
}
.cs-title{
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
font-size:clamp(3.4rem,12vw,8.4rem); line-height:.95;
background:linear-gradient(180deg,#244966 0%, #4a7ea6 55%, #7fb8dd 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.cs-flourish{
display:flex; align-items:center; justify-content:center; gap:.8rem;
margin:1rem auto; color:var(--ink-soft);
}
.cs-flourish .line{ height:1px; width:min(22vw,160px); background:linear-gradient(90deg,transparent,var(--ink-soft),transparent); }
.cs-flourish .star{ font-family:'Italianno',cursive; font-size:1.4rem; opacity:.75 }
.cs-tag{
font-family:'Inter',sans-serif; font-weight:300;
letter-spacing:.42em; text-transform:uppercase;
font-size:clamp(.7rem,1vw,.82rem); color:var(--ink-soft);
}
/* Subtle drift, GPU-friendly transform-only animation. */
.cs-hero .drift{ animation: drift 18s ease-in-out infinite; will-change:transform; }
@keyframes drift{
0%,100% { transform:translate3d(0,0,0); }
50% { transform:translate3d(0,-10px,0); }
}
@media (prefers-reduced-motion: reduce){
.cs-hero .drift{ animation:none; }
*,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}
/* ─── 404 ────────────────────────────────────────────────────────────────── */
.nf-hero .nf-numeral{
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
font-size:clamp(7rem,22vw,15rem); line-height:.85;
letter-spacing:-.04em;
background:linear-gradient(180deg,#244966 0%, #4a7ea6 55%, #a9d2ec 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
opacity:.18;
margin:0 0 -.55em;
}
.nf-hero .nf-title{ font-size:clamp(2.2rem,7vw,4.4rem); }
.nf-hero .nf-actions{ margin-top:1.6rem; }
.nf-hero .nf-actions .btn{
letter-spacing:.18em; text-transform:uppercase;
font-size:.78rem; padding:.78rem 1.8rem; text-decoration:none;
}
/* ─── Dashboard ──────────────────────────────────────────────────────────── */
.dash-head{
display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; justify-content:space-between;
margin-bottom:1.4rem;
}
.dash-eyebrow{
font-family:'Italianno',cursive; font-size:1.5rem; color:var(--ink-soft);
margin:0 0 .1rem; line-height:1;
}
.dash-title{
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
font-size:clamp(1.8rem,4vw,2.6rem); margin:0; line-height:1.1;
background:linear-gradient(180deg,#244966 0%, #4a7ea6 70%, #7fb8dd 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.dash-quick{ display:flex; flex-wrap:wrap; gap:.5rem; }
.dash-quick .btn{
font-size:.82rem; padding:.6rem 1rem; min-height:auto;
letter-spacing:.04em; text-decoration:none;
}
.kpi-grid{
display:grid; gap:.7rem; margin-bottom:1.2rem;
grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){ .kpi-grid{ grid-template-columns:repeat(4,1fr); } }
.kpi{
background:var(--surface); border:1px solid rgba(22,51,77,.07); border-radius:var(--radius-m);
padding:.95rem 1.05rem; display:flex; flex-direction:column; gap:.15rem;
box-shadow:var(--shadow-s);
}
.kpi-label{ font-size:.68rem; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; }
.kpi-value{
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
font-size:2.1rem; line-height:1; color:var(--ink); margin:.12rem 0 .05rem;
}
.kpi-sub{ font-size:.78rem; color:var(--ink-faint); }
.tool-grid{
display:grid; gap:1rem; margin-bottom:1.2rem;
grid-template-columns:1fr;
}
@media (min-width:880px){ .tool-grid{ grid-template-columns:1fr 1fr; } }
.tool-card{
background:var(--surface); border:1px solid rgba(22,51,77,.07); border-radius:var(--radius);
padding:1.2rem 1.2rem 1rem; display:flex; flex-direction:column; gap:1rem;
box-shadow:var(--shadow-s);
transition:box-shadow .18s, transform .18s;
}
.tool-card:hover{ box-shadow:var(--shadow); }
.tool-head{ display:flex; gap:.9rem; align-items:flex-start; }
.tool-head h2{ font-size:1.15rem; margin:0 0 .15rem; }
.tool-head .muted{ font-size:.88rem; margin:0; }
.tool-icon{
flex:0 0 auto;
width:44px; height:44px; border-radius:12px;
display:grid; place-items:center;
background:linear-gradient(135deg,#eaf4fb,#cfe4f3); color:#244966;
}
.tool-stats{
display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem;
margin:0; padding:0;
}
.tool-stats > div{
background:var(--surface-2); border-radius:10px; padding:.6rem .7rem;
display:flex; flex-direction:column; gap:.1rem;
}
.tool-stats dt{ font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; }
.tool-stats dd{
margin:0; font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
font-size:1.35rem; color:var(--ink); line-height:1.1;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tool-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:auto; }
.tool-actions .btn{ font-size:.82rem; padding:.55rem 1rem; min-height:auto; text-decoration:none; }
.tool-empty{
font-size:.85rem; color:var(--ink-soft); margin:0;
padding:.6rem .8rem; background:var(--surface-2); border-radius:10px;
}
.tool-empty[hidden]{ display:none; }
.dash-grid{
display:grid; gap:1rem;
grid-template-columns:1fr;
}
/* grid items default to min-width:auto, so a wide child (e.g. the 30-day
chart's min-content) blows the 1fr track past the viewport on phones */
.dash-grid > *{ min-width:0; }
@media (min-width:880px){ .dash-grid{ grid-template-columns:1.2fr 1fr; } }
.activity{
list-style:none; padding:0; margin:0;
display:flex; flex-direction:column; gap:.5rem;
}
.activity-empty{ font-size:.9rem; padding:.6rem .8rem; background:var(--surface-2); border-radius:10px; }
.shortcuts{ display:grid; gap:.5rem; }
.shortcut{
display:flex; gap:.8rem; align-items:center;
padding:.72rem .85rem; border-radius:12px;
background:var(--surface-2); color:var(--ink); text-decoration:none;
border:1px solid transparent; transition:background .12s, border-color .12s, transform .12s;
}
.shortcut:hover{ background:var(--sky-1); border-color:var(--sky-3); transform:translateX(2px); }
.shortcut .sc-icon{
width:36px; height:36px; flex:0 0 auto;
display:grid; place-items:center;
border-radius:10px; background:#fff; color:var(--accent);
border:1px solid var(--line);
}
.shortcut .sc-icon svg{ width:18px; height:18px; }
.shortcut .sc-text{ display:flex; flex-direction:column; gap:.05rem; }
.shortcut .sc-text strong{ font-weight:500; font-size:.95rem; }
.shortcut .sc-text small{ font-size:.78rem; color:var(--ink-soft); }
.nav-links a.active{ color:var(--ink); position:relative; }
.nav-links a.active::after{
content:""; position:absolute; left:0; right:0; bottom:-6px;
height:2px; border-radius:2px; background:var(--sky-4);
}
/* ─── Links list + detail ────────────────────────────────────────────────── */
.link-list{ display:grid; gap:.8rem; }
.link-card{
background:var(--surface); border:1px solid rgba(22,51,77,.07); border-radius:var(--radius-m);
padding:1.05rem; display:flex; flex-direction:column; gap:.7rem;
box-shadow:var(--shadow-s);
transition:box-shadow .18s, border-color .18s;
}
.link-card:hover{ box-shadow:var(--shadow); border-color:var(--line); }
.link-head{ display:flex; gap:1rem; align-items:flex-start; }
.link-titles{ flex:1; min-width:0; }
.link-title{
margin:0 0 .2rem; font-size:1.05rem;
overflow-wrap:anywhere; word-break:break-word;
}
.link-description{
margin:0 0 .35rem; font-size:.85rem; line-height:1.4;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden; text-overflow:ellipsis;
overflow-wrap:anywhere;
}
.link-urls{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.link-short{
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.95rem; color:var(--accent-deep); text-decoration:none;
word-break:break-all;
}
.link-short:hover{ text-decoration:underline; }
.link-target{
font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
max-width:100%; color:var(--ink-faint);
}
.link-qr{
flex:0 0 auto; background:#fff; padding:4px; border:1px solid var(--line); border-radius:10px;
display:grid; place-items:center;
}
.link-qr img{ display:block; }
.link-stats{
display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.86rem; color:var(--ink-soft);
padding:.5rem .8rem; background:var(--surface-2); border-radius:10px;
}
.link-stats strong{ font-weight:500; color:var(--ink); font-size:1rem; }
.link-actions{ display:flex; gap:.4rem; flex-wrap:wrap; }
.link-actions .btn{ font-size:.78rem; padding:.5rem .85rem; min-height:auto; text-decoration:none; }
.link-detail{ display:flex; flex-direction:column; gap:1rem; }
.link-detail-card{ display:flex; gap:1.2rem; align-items:flex-start; flex-wrap:wrap; }
.link-detail-main{ flex:1; min-width:240px; display:flex; flex-direction:column; gap:.5rem; }
.link-detail-main .link-short{ font-size:1.15rem; }
.link-detail-actions{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.4rem; }
.link-detail-actions .btn{ font-size:.78rem; padding:.5rem .85rem; min-height:auto; text-decoration:none; }
.link-detail-qr{ flex:0 0 auto; padding:6px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.spark-wrap{
display:flex; align-items:flex-end; gap:2px;
height:80px; margin:.4rem 0 .2rem;
}
.spark-bar{
flex:1; min-width:0; background:linear-gradient(180deg,#7fb8dd,#244966);
border-radius:3px 3px 0 0; min-height:2px;
}
.ref-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.35rem; }
.ref-row{
display:flex; justify-content:space-between; gap:.6rem;
padding:.45rem .7rem; background:var(--surface-2); border-radius:8px;
font-size:.9rem;
}
.ref-host{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ref-n{ color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.link-edit .field input{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.pub-toggle{ display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; font-size:.92rem; }
.pub-toggle input{ width:17px; height:17px; accent-color:var(--accent); }
.form-actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem; }
/* ─── Fliers — list ──────────────────────────────────────────────────────── */
.flier-grid{
display:grid; gap:1rem;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.flier-card{
background:var(--surface); border:1px solid rgba(22,51,77,.07); border-radius:var(--radius-m);
overflow:hidden; display:flex; flex-direction:column;
box-shadow:var(--shadow-s);
transition:box-shadow .18s, transform .18s;
}
.flier-card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.flier-thumb{
display:block; aspect-ratio:1/1; background:var(--surface-2);
display:grid; place-items:center;
overflow:hidden; text-decoration:none;
}
.flier-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.flier-thumb-empty{ color:var(--ink-faint); font-size:.85rem; letter-spacing:.15em; }
.flier-meta{ padding:.9rem 1rem 1rem; display:flex; flex-direction:column; gap:.4rem; }
.flier-meta h3{ margin:0; font-size:1rem; }
.flier-meta .muted{ font-size:.78rem; margin:0; }
.flier-status{
display:inline-block; padding:2px 9px; border-radius:999px;
font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; font-weight:500;
}
.flier-status-draft{ background:#fdf6e3; color:#8a6d2b; }
.flier-status-published{ background:#e7f3ec; color:var(--ok); }
.flier-actions{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.3rem; }
.flier-actions .btn{ font-size:.78rem; padding:.45rem .85rem; min-height:auto; text-decoration:none; }
/* ─── Flier editor ───────────────────────────────────────────────────────── */
.flier-editor{
position:fixed; inset:var(--nav-h) 0 0 0; z-index:10;
display:flex; flex-direction:column;
background:#eef3f7;
}
.flier-bar-top{
display:flex; gap:.55rem; align-items:center;
padding:.5rem .75rem; background:#fff; border-bottom:1px solid var(--line);
flex-wrap:nowrap;
}
.flier-bar-top input{
flex:1; min-width:80px;
padding:.48rem .7rem; border:1px solid transparent; border-radius:var(--radius-s);
font-size:.95rem; font-weight:500; background:transparent;
transition:border-color .15s, background .15s;
}
.flier-bar-top input:hover{ background:var(--surface-2); }
.flier-bar-top input:focus{ background:#fff; border-color:var(--sky-4); box-shadow:var(--ring); }
.flier-bar-actions{ display:flex; gap:.4rem; align-items:center; flex:0 0 auto; }
.flier-bar-actions button{ font-size:.84rem; padding:.5rem .95rem; min-height:38px; }
.flier-bar-actions .icon-btn{
padding:0; width:38px; height:38px; font-size:1rem;
display:grid; place-items:center; border-radius:10px;
}
.flier-bar-actions .icon-btn:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }
.flier-bar-top .btn{ font-size:.8rem; padding:.5rem .85rem; min-height:38px; text-decoration:none; }
.bar-toggle{
display:flex; align-items:center; gap:.35rem;
font-size:.76rem; color:var(--ink-soft); font-weight:500; letter-spacing:.02em;
padding:.42rem .6rem; border:1px solid var(--line); border-radius:9px;
cursor:pointer; user-select:none; text-transform:none; margin:0;
transition:background .12s, border-color .12s;
}
.bar-toggle:hover{ background:var(--surface-2); }
.bar-toggle input{ margin:0; width:auto; box-shadow:none; accent-color:var(--accent); }
.panels-toggle{ display:none; }
/* Overflow "⋯" menu for the editor top bar */
.bar-menu-wrap{ position:relative; flex:0 0 auto; }
.flier-bar-actions .bar-menu-btn{ display:none; }
.bar-menu{
position:absolute; right:0; top:calc(100% + 8px); z-index:70;
min-width:196px; padding:.4rem;
background:#fff; border:1px solid var(--line); border-radius:12px;
box-shadow:var(--shadow-l);
display:flex; flex-direction:column; gap:2px;
animation:modalIn .16s cubic-bezier(.2,.7,.3,1.1) backwards;
}
.bar-menu[hidden]{ display:none; }
.bar-menu hr{ border:0; border-top:1px solid var(--line); margin:.3rem .35rem; }
.bar-menu-item{
display:flex; align-items:center; gap:.55rem;
background:transparent; color:var(--ink); border:0; border-radius:8px;
padding:.52rem .6rem; min-height:auto; font-size:.85rem; font-weight:400;
text-align:left; cursor:pointer; box-shadow:none; letter-spacing:0;
}
.bar-menu-item:hover{ background:var(--surface-2); color:var(--ink); filter:none; box-shadow:none; }
.bar-menu-item .bmi-check{
width:17px; height:17px; flex:0 0 auto;
display:grid; place-items:center;
border:1.5px solid var(--line-strong); border-radius:5px;
font-size:.68rem; line-height:1; color:transparent;
transition:background .12s, border-color .12s, color .12s;
}
.bar-menu-item.checked .bmi-check{ background:var(--accent); border-color:var(--accent); color:#fff; }
/* Responsive ladder — secondary actions fold into the ⋯ menu as space runs
out, so the bar NEVER clips. Measured: full bar needs ~1280px since the
"Post to Social Media" button joined it (was ~1100px). */
@media (max-width:1300px){
.flier-bar-actions .sky-file-btn{ display:none; }
.flier-bar-actions .bar-menu-btn{ display:grid; }
}
@media (max-width:900px){
.flier-bar-actions #downloadBtn{ display:none; }
}
@media (max-width:760px){
.flier-bar-actions .bar-toggle{ display:none; }
}
@media (max-width:520px){
#backLink{ font-size:0; padding:.5rem .65rem; }
#backLink::before{ content:'←'; font-size:1.05rem; line-height:1; }
.flier-bar-top{ gap:.4rem; }
.flier-bar-top input{ min-width:60px; }
}
@media (max-width:380px){
.flier-bar-top{ flex-wrap:wrap; }
}
/* Short windows (landscape phones): compress vertical chrome */
@media (max-height:480px){
.flier-bar-top{ padding:.3rem .6rem; }
.tool-options{ padding:.3rem .6rem; }
.flier-bar-bottom{ padding:.25rem .6rem; }
}
.tool-options{
display:flex; gap:.9rem; align-items:center; flex-wrap:wrap;
padding:.5rem .9rem;
background:var(--surface-2); border-bottom:1px solid var(--line);
font-size:.82rem;
}
.tool-options[hidden]{ display:none; }
.tool-options-label{
font-size:.7rem; letter-spacing:.17em; text-transform:uppercase; color:var(--accent-deep);
font-weight:600;
padding-right:.7rem; border-right:1px solid var(--line-strong); flex:0 0 auto;
}
.tool-options .opt-field{ display:flex; gap:.45rem; align-items:center; color:var(--ink-soft); font-size:.76rem; flex:0 0 auto; margin:0; text-transform:uppercase; letter-spacing:.08em; }
.tool-options .opt-field input[type=range]{ width:120px; padding:0; border:0; box-shadow:none; accent-color:var(--accent); background:transparent; }
.tool-options .opt-field input[type=color]{ width:34px; height:28px; padding:1px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.tool-options .opt-field output{ font-variant-numeric:tabular-nums; min-width:1.8em; color:var(--ink); }
.tool-options .opt-field[hidden]{ display:none; }
.opt-hint{ flex:1 1 auto; text-align:right; font-size:.76rem; color:var(--ink-faint); margin:0; min-width:140px; text-transform:none; letter-spacing:0; }
.opt-hint-flash{ color:var(--danger); font-weight:500; }
.flier-body{ flex:1; display:flex; min-height:0; overflow:hidden; position:relative; }
.flier-tools{
width:58px; flex:0 0 auto;
background:#fff; border-right:1px solid var(--line);
padding:.55rem .45rem; display:flex; flex-direction:column; align-items:center; gap:.28rem;
overflow-y:auto;
}
.tool-btn{
width:44px; height:44px; padding:0; min-height:auto;
background:transparent; color:var(--ink-soft); border:1px solid transparent; border-radius:11px;
font-size:1.05rem; line-height:1; cursor:pointer; display:grid; place-items:center;
box-shadow:none;
transition:background .12s, color .12s, transform .08s;
}
.tool-btn svg{ width:20px; height:20px; }
.tool-btn:hover{ background:var(--surface-3); color:var(--ink); filter:none; box-shadow:none; }
.tool-btn.active{
background:var(--grad-brand); color:#fff; border-color:transparent;
box-shadow:0 3px 10px rgba(29,69,104,.35);
}
.tool-btn.danger-tool{ color:var(--danger); }
.tool-btn.ai-tool{
background:linear-gradient(135deg,#7fb8dd,#244966);
color:#fff;
box-shadow:0 3px 12px rgba(29,69,104,.35);
}
.tool-btn.ai-tool:hover{ filter:brightness(1.12); color:#fff; transform:scale(1.05); }
.tool-btn.danger-tool:hover{ background:#fdf2f4; }
.tool-sep{ border:0; border-top:1px solid var(--line); margin:.28rem 0; width:70%; }
.flier-canvas-wrap{
flex:1; min-width:0; min-height:0;
display:grid; place-items:center;
padding:20px; overflow:auto;
background:repeating-conic-gradient(#dde6ee 0% 25%, #eef3f7 0% 50%) 50% / 20px 20px;
}
.flier-canvas-stage{
background:#fff; box-shadow:0 10px 34px rgba(29,69,104,.2); border-radius:4px;
position:relative;
}
.flier-canvas-stage canvas{ display:block; }
.flier-canvas-stage.grid-on::before{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:
linear-gradient(to right, rgba(36,73,102,.08) 1px, transparent 1px),
linear-gradient(to bottom, rgba(36,73,102,.08) 1px, transparent 1px);
background-size:20px 20px;
z-index:2;
}
.flier-canvas-stage .guide-canvas{
position:absolute; inset:0; pointer-events:none; z-index:3;
}
.flier-canvas-stage .wand-overlay{
position:absolute; inset:0; pointer-events:none; z-index:4;
}
.flier-side{
width:300px; flex:0 0 auto;
background:#fff; border-left:1px solid var(--line);
display:flex; flex-direction:column; min-height:0;
}
.flier-panel{ display:flex; flex-direction:column; min-height:0; }
.flier-panel-head{
padding:.65rem .95rem .45rem;
display:flex; align-items:center; justify-content:space-between;
flex:0 0 auto;
}
.flier-panel-head h3{
margin:0; font-size:.72rem; letter-spacing:.17em; text-transform:uppercase;
color:var(--accent-deep); font-weight:600;
}
.layer-tools{ display:flex; gap:2px; }
.layer-tools button{
width:26px; height:26px; padding:0; min-height:auto;
display:grid; place-items:center;
background:transparent; color:var(--ink-soft); border:0; border-radius:7px;
cursor:pointer; box-shadow:none;
transition:background .1s, color .1s;
}
.layer-tools button svg{ width:15px; height:15px; }
.layer-tools button:hover{ background:var(--surface-3); color:var(--ink); filter:none; box-shadow:none; }
.layer-tools button:disabled{ opacity:.35; cursor:default; }
/* Layers panel — fixed flex-basis controlled by JS (drag/keyboard). */
.layers-panel{
flex:0 0 auto; height:40%;
min-height:80px;
}
.layer-list{ list-style:none; margin:0; padding:.15rem .45rem .6rem; overflow-y:auto; flex:1 1 auto; display:flex; flex-direction:column; gap:2px; }
/* Divider between Layers and Properties — drag to resize, keyboard to nudge. */
.panel-divider{
flex:0 0 auto; height:8px; cursor:ns-resize;
background:var(--surface-2);
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
position:relative;
transition:background .12s;
outline:none;
}
.panel-divider:hover, .panel-divider:active, .panel-divider:focus{ background:var(--sky-2); }
.panel-divider::after{
content:''; position:absolute; left:50%; top:50%;
transform:translate(-50%, -50%);
width:36px; height:3px; border-radius:3px;
background:var(--line-strong);
}
.panel-divider:hover::after{ background:var(--accent); }
/* Properties panel — fills remaining vertical space; minimize collapses the body. */
.props-section{ flex:1 1 auto; min-height:0; }
.props-section.minimized{ flex:0 0 auto; }
.props-section.minimized .props-panel{ display:none; }
.panel-minimize{
background:transparent; color:var(--ink-soft); border:0;
padding:2px 8px; min-height:auto; min-width:auto;
font-size:1.15rem; line-height:1; cursor:pointer;
border-radius:6px; box-shadow:none;
}
.panel-minimize:hover{ color:var(--ink); background:var(--surface-2); filter:none; box-shadow:none; }
/* Layer rows — clear selected state: accent bar + tint, hover reveals actions */
.layer-row{
display:flex; align-items:center; gap:.25rem;
padding:.4rem .45rem .4rem .55rem; border-radius:9px; font-size:.85rem;
position:relative; cursor:default;
border:1px solid transparent;
transition:background .1s, border-color .1s;
}
.layer-row::before{
content:""; position:absolute; left:2px; top:20%; bottom:20%;
width:3px; border-radius:3px; background:transparent;
transition:background .1s;
}
.layer-row:hover{ background:var(--surface-2); }
.layer-row.active{
background:var(--sky-1); border-color:rgba(127,184,221,.55);
}
.layer-row.active::before{ background:var(--accent); }
.layer-row.active .layer-name{ color:var(--accent-deep); font-weight:500; }
.layer-row button{
background:transparent; border:0; padding:0; min-height:auto; cursor:pointer;
color:var(--ink-faint); font-size:.9rem; box-shadow:none;
width:24px; height:24px; display:grid; place-items:center; border-radius:6px;
transition:color .1s, background .1s;
}
.layer-row button svg{ width:15px; height:15px; }
.layer-row button:hover{ color:var(--ink); background:rgba(127,184,221,.2); filter:none; box-shadow:none; }
.layer-row .layer-vis.is-off{ color:var(--line-strong); }
.layer-row .layer-lock.is-locked{ color:var(--accent-deep); }
.layer-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; padding:0 .15rem; }
.layer-buttons{ display:flex; gap:.05rem; opacity:.25; transition:opacity .12s; }
.layer-row:hover .layer-buttons, .layer-row.active .layer-buttons{ opacity:1; }
/* Grouped children — indented, lighter, guide line on the left */
.layer-row.layer-child{
margin-left:1.35rem; padding:.22rem .45rem .22rem .5rem;
font-size:.8rem; color:var(--ink-soft);
border-left:2px solid var(--line);
border-radius:0 8px 8px 0;
}
.layer-row.layer-child::before{ display:none; }
.layer-row.layer-child.in-active-group{ border-left-color:var(--sky-4); background:rgba(234,244,251,.55); }
.layer-row.layer-child .layer-vis{ width:20px; height:20px; }
.layer-row.layer-child .layer-vis svg{ width:13px; height:13px; }
.props-panel{ padding:.5rem .95rem 1.1rem; overflow-y:auto; flex:1; }
.props-panel .prop-row{ display:flex; gap:.55rem; margin-bottom:.55rem; flex-wrap:wrap; }
.props-panel .prop-row label{ flex:1; min-width:90px; font-size:.7rem; color:var(--ink-soft); display:flex; flex-direction:column; gap:.2rem; letter-spacing:.08em; }
.props-panel .prop-row label.prop-check{ flex-direction:row; align-items:center; gap:.4rem; text-transform:none; letter-spacing:0; font-size:.8rem; }
.props-panel .prop-row input, .props-panel .prop-row select, .props-panel .prop-row textarea{
width:100%; padding:.38rem .5rem; font:inherit; font-size:.85rem;
border:1px solid var(--line); border-radius:7px; background:#fff;
}
.props-panel .prop-row input[type=checkbox]{ width:auto; accent-color:var(--accent); box-shadow:none; }
.props-panel .prop-row input[type=range]{ padding:0; border:0; box-shadow:none; accent-color:var(--accent); background:transparent; }
.props-panel .prop-row input[type=color]{ height:32px; padding:2px; }
.props-panel .prop-row button{ font-size:.78rem; padding:.42rem .75rem; min-height:auto; }
.props-panel .prop-row.prop-align{ gap:0; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.props-panel .prop-row.prop-align button{
flex:1; min-width:26px; padding:.42rem .2rem; font-size:.92rem; line-height:1;
background:#fff; color:var(--ink-soft); border:0; border-right:1px solid var(--line);
border-radius:0; box-shadow:none;
}
.props-panel .prop-row.prop-align button:last-child{ border-right:0; }
.props-panel .prop-row.prop-align button:hover{ background:var(--surface-3); color:var(--ink); filter:none; }
.props-panel .prop-subhead{
font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent-deep);
font-weight:600; padding-top:.3rem; border-top:1px dashed var(--line); width:100%; padding-top:.55rem;
}
.opacity-row{ display:flex; align-items:center; gap:.4rem; }
.opacity-row input[type=range]{ flex:1; min-width:0; padding:0; height:24px; }
.opacity-row output{
font-variant-numeric:tabular-nums; min-width:2.7em; text-align:right;
color:var(--ink); font-size:.78rem;
}
.flier-bar-bottom{
flex:0 0 auto;
background:#fff; border-top:1px solid var(--line);
padding:.45rem .8rem;
display:flex; justify-content:center; align-items:center;
}
.zoom-control{
display:flex; gap:.5rem; align-items:center;
font-size:.82rem; color:var(--ink);
}
.zoom-control input[type=range]{ width:220px; max-width:40vw; height:24px; padding:0; border:0; box-shadow:none; accent-color:var(--accent); background:transparent; }
.zoom-control button{
padding:.3rem .6rem; min-height:auto; font-size:.85rem; min-width:auto;
border-radius:8px; box-shadow:none;
}
.zoom-control button#zoomInBtn,
.zoom-control button#zoomOutBtn{
width:32px; height:30px; padding:0; font-size:1rem;
background:var(--surface-2); color:var(--ink); border:1px solid var(--line);
}
.zoom-control button#zoomInBtn:hover,
.zoom-control button#zoomOutBtn:hover{ background:var(--surface-3); filter:none; }
.zoom-control output{
font-variant-numeric:tabular-nums; min-width:3.2em; text-align:center;
color:var(--ink); font-size:.85rem;
padding:.25rem .5rem; background:var(--surface-2); border-radius:6px;
}
.zoom-control button#zoomFitBtn{
background:transparent; color:var(--ink-soft); border:1px solid var(--line);
font-size:.78rem; padding:.3rem .7rem; letter-spacing:.04em;
}
.zoom-control button#zoomFitBtn.active{
background:var(--sky-1); color:var(--accent-deep); border-color:var(--sky-3);
}
/* Editor — tablets: side panel becomes a slide-in drawer */
@media (max-width:880px){
.panels-toggle{ display:grid; }
.flier-side{
position:absolute; top:0; right:0; bottom:0; z-index:30;
width:min(320px, 88vw);
transform:translateX(102%);
transition:transform .22s ease;
box-shadow:-16px 0 40px rgba(22,51,77,.18);
border-left:1px solid var(--line);
}
.flier-side.open{ transform:none; }
}
/* Editor — phones: tool rail moves to the bottom, horizontal + scrollable */
@media (max-width:640px){
.flier-body{ flex-direction:column; }
.flier-canvas-wrap{ order:1; padding:12px; }
.flier-tools{
order:2; width:100%; height:56px;
flex-direction:row; align-items:center;
padding:.35rem .5rem;
border-right:0; border-top:1px solid var(--line);
overflow-x:auto; overflow-y:hidden;
-webkit-overflow-scrolling:touch;
}
.tool-btn{ width:42px; height:42px; flex:0 0 auto; }
.tool-sep{ border-top:0; border-left:1px solid var(--line); width:1px; height:60%; margin:0 .25rem; flex:0 0 auto; }
.flier-side{ top:0; }
/* Save and the panels toggle come first — the most important controls
stay next to the title. (The ⋯ menu ladder keeps the bar from ever
overflowing, so no horizontal scroll is needed.) */
.flier-bar-actions #saveBtn{ order:-2; }
.flier-bar-actions .panels-toggle{ order:-1; }
.opt-hint{ display:none; }
.zoom-control input[type=range]{ width:130px; }
}
@media (max-width:760px){
.zoom-control button#zoomFitBtn{ padding:.3rem .55rem; }
}
.required-mark{ color:var(--danger); margin-left:.15rem; font-weight:500; }
.dash-description{
margin:.3rem 0 0; font-size:.95rem; line-height:1.45;
max-width:62ch;
}
/* ─── QR inline panel (create page) ──────────────────────────────────────── */
.qr-panel-inline{ max-width:640px; margin-top:1rem; }
.qr-panel-head{ margin-bottom:.8rem; }
.qr-panel-head h2{ margin:0 0 .15rem; font-size:1.05rem; }
/* ─── Modal + QR designer ────────────────────────────────────────────────── */
body.modal-open{ overflow:hidden; }
.modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal[hidden]{ display:none; }
.modal-backdrop{
position:absolute; inset:0; background:rgba(29,69,104,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.modal-card{
position:relative; z-index:1;
background:#fff; border-radius:18px; max-width:680px; width:100%;
max-height:calc(100vh - 2rem); overflow:auto;
padding:1.4rem 1.4rem 1.2rem; box-shadow:var(--shadow-l);
}
.modal-card h2{ margin:0 0 .8rem; font-size:1.25rem; }
.modal-close{
position:absolute; top:.6rem; right:.6rem;
background:transparent; color:var(--ink-soft); border:0; cursor:pointer;
width:34px; height:34px; padding:0; min-height:auto; font-size:1.5rem; line-height:1;
border-radius:9px; box-shadow:none;
}
.modal-close:hover{ color:var(--ink); background:var(--surface-2); filter:none; box-shadow:none; }
.qr-editor{ display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media (min-width:640px){ .qr-editor{ grid-template-columns:220px 1fr; } }
.qr-preview-wrap{ text-align:center; }
.qr-preview-wrap img{
display:block; margin:0 auto;
background:
linear-gradient(45deg,#eee 25%,transparent 25%),
linear-gradient(-45deg,#eee 25%,transparent 25%),
linear-gradient(45deg,transparent 75%,#eee 75%),
linear-gradient(-45deg,transparent 75%,#eee 75%);
background-size:16px 16px;
background-position:0 0,0 8px,8px -8px,-8px 0;
border:1px solid var(--line); border-radius:10px; padding:4px;
}
.qr-preview-hint{ font-size:.78rem; margin:.5rem 0 0; }
.qr-form fieldset{
border:1px solid var(--line); border-radius:10px;
padding:.7rem .8rem .8rem; margin:0 0 .7rem;
}
.qr-form legend{ font-size:.7rem; letter-spacing:.17em; text-transform:uppercase; color:var(--accent-deep); font-weight:600; padding:0 .35rem; }
.qr-row{ display:flex; gap:.8rem; flex-wrap:wrap; }
.qr-row label{
display:flex; flex-direction:column; gap:.25rem;
font-size:.78rem; color:var(--ink-soft); flex:1; min-width:120px;
}
.qr-row label.qr-bgtransparent-wrap{ flex-direction:row; align-items:center; gap:.4rem; }
.qr-row select{ font:inherit; padding:.45rem .55rem; border:1px solid var(--line); border-radius:8px; background:#fff; }
.qr-row input[type=color]{ width:100%; height:36px; border:1px solid var(--line); border-radius:8px; background:#fff; padding:2px; }
.qr-row input[type=checkbox]{ width:auto; accent-color:var(--accent); box-shadow:none; }
.qr-note{ font-size:.74rem; margin:.5rem 0 0; }
.qr-actions{ display:flex; justify-content:flex-end; gap:.5rem; flex-wrap:wrap; margin-top:.4rem; }
.qr-actions button{ font-size:.85rem; padding:.55rem 1rem; min-height:auto; }
/* ─── OAuth buttons ──────────────────────────────────────────────────────── */
.oauth-box{ margin-bottom:1.2rem; }
.oauth-buttons{ display:grid; gap:.55rem; }
.oauth-btn{
display:flex; align-items:center; justify-content:center; gap:.7rem;
padding:.7rem 1rem; border-radius:999px; min-height:44px;
background:#fff; color:var(--ink); border:1px solid var(--line);
text-decoration:none; font-weight:500; font-size:.92rem;
transition:background .12s, border-color .12s, transform .04s, box-shadow .15s;
}
.oauth-btn:hover{ background:var(--surface-2); border-color:var(--sky-4); box-shadow:var(--shadow-s); }
.oauth-btn:active{ transform:translateY(1px); }
.oauth-btn svg{ flex:0 0 auto; }
.oauth-divider{
display:flex; align-items:center; gap:.8rem; margin:1rem 0 .2rem;
color:var(--ink-soft); font-size:.75rem; letter-spacing:.3em; text-transform:uppercase;
}
.oauth-divider::before, .oauth-divider::after{
content:""; flex:1; height:1px;
background:linear-gradient(90deg,transparent,var(--line),transparent);
}
/* ─── Floating-label fields ──────────────────────────────────────────────── */
.ff{ position:relative; margin-bottom:1rem; }
.ff > input, .ff > textarea, .ff > select{
width:100%; padding:1.42rem .95rem .5rem;
background:var(--surface-2);
border:1.5px solid transparent; border-radius:12px;
font-size:16px; color:var(--ink);
transition:background .15s, border-color .15s, box-shadow .15s;
}
.ff > textarea{ min-height:104px; padding-top:1.55rem; }
.ff > select{ appearance:none; -webkit-appearance:none; cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right .85rem center;
}
.ff > input:hover, .ff > textarea:hover, .ff > select:hover{ background-color:var(--surface-3); }
.ff > input:focus, .ff > textarea:focus, .ff > select:focus{
background-color:#fff; border-color:var(--sky-4); box-shadow:var(--ring); outline:none;
}
.ff > label{
position:absolute; left:1rem; top:50%; transform:translateY(-50%);
margin:0; padding:0; pointer-events:none;
font-size:.95rem; color:var(--ink-faint);
text-transform:none; letter-spacing:0; font-weight:400;
transition:top .16s ease, transform .16s ease, font-size .16s ease,
letter-spacing .16s ease, color .16s ease;
max-width:calc(100% - 2rem); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ff > textarea ~ label{ top:1.5rem; }
.ff > input:focus ~ label, .ff > input:not(:placeholder-shown) ~ label,
.ff > textarea:focus ~ label, .ff > textarea:not(:placeholder-shown) ~ label,
.ff > select ~ label{
top:.68rem; transform:none;
font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
color:var(--ink-soft); font-weight:600;
}
.ff > input:focus ~ label, .ff > textarea:focus ~ label, .ff > select:focus ~ label{ color:var(--accent); }
/* hide placeholder until the label has floated out of the way */
.ff > input:not(:focus)::placeholder, .ff > textarea:not(:focus)::placeholder{ color:transparent; }
.ff .ff-hint{ margin:.35rem .2rem 0; font-size:.78rem; color:var(--ink-faint); }
.ff.ff-prefix .handle-wrap{ border-radius:12px; background:var(--surface-2); border-color:transparent; min-height:52px; }
.ff.ff-prefix .handle-wrap:focus-within{ background:#fff; }
/* password visibility toggle */
.pw-toggle{
position:absolute; right:.55rem; top:50%; transform:translateY(-50%);
width:36px; height:36px; padding:0; min-height:auto;
display:grid; place-items:center;
background:transparent; color:var(--ink-faint); border:0; border-radius:9px;
cursor:pointer; box-shadow:none;
}
.pw-toggle:hover{ color:var(--accent-deep); background:rgba(127,184,221,.18); filter:none; box-shadow:none; }
.pw-toggle svg{ width:18px; height:18px; }
.ff.has-toggle > input{ padding-right:3rem; }
/* ─── Auth pages ─────────────────────────────────────────────────────────── */
.auth-wrap{ max-width:460px; margin:1.5rem auto 0; }
.auth-wrap .title, .auth-wrap .sub{ text-align:center; }
.auth-wrap .card{ animation:rise .55s cubic-bezier(.2,.7,.3,1) backwards; animation-delay:.08s; }
.auth-alt{ text-align:center; margin-top:1.1rem; font-size:.9rem; }
.auth-alt a{ color:var(--accent); font-weight:500; }
.auth-alt a:hover{ text-decoration:underline; }
/* ─── Ambient sky decoration (transform-only, GPU-cheap) ─────────────────── */
.sky-decor{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.sky-decor i{
position:absolute; border-radius:50%;
background:radial-gradient(circle at 38% 38%, rgba(255,255,255,.92), rgba(255,255,255,0) 68%);
animation:cloud 44s ease-in-out infinite;
}
.sky-decor i:nth-child(1){ width:420px; height:180px; top:12%; left:-6%; }
.sky-decor i:nth-child(2){ width:520px; height:220px; top:58%; right:-10%; animation-delay:-14s; animation-duration:56s; }
.sky-decor i:nth-child(3){ width:300px; height:130px; top:34%; left:58%; animation-delay:-28s; animation-duration:64s; }
@keyframes cloud{
0%,100%{ transform:translate3d(0,0,0); }
50%{ transform:translate3d(46px,-16px,0); }
}
@media (prefers-reduced-motion: reduce){ .sky-decor i{ animation:none; } }
/* ─── Entrance animations ────────────────────────────────────────────────── */
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.wrap .kpi, .wrap .tool-card, .wrap .card, .wrap .link-card, .wrap .flier-card{
animation:rise .5s cubic-bezier(.2,.7,.3,1) backwards;
}
.kpi:nth-child(2), .tool-card:nth-child(2){ animation-delay:.06s; }
.kpi:nth-child(3){ animation-delay:.12s; }
.kpi:nth-child(4){ animation-delay:.18s; }
.link-card:nth-child(2), .flier-card:nth-child(2){ animation-delay:.05s; }
.link-card:nth-child(3), .flier-card:nth-child(3){ animation-delay:.1s; }
.link-card:nth-child(n+4), .flier-card:nth-child(n+4){ animation-delay:.15s; }
/* ─── Tooltips ───────────────────────────────────────────────────────────── */
[data-tip]{ position:relative; }
[data-tip]::after{
content:attr(data-tip);
position:absolute; bottom:calc(100% + 9px); left:50%;
transform:translateX(-50%) translateY(4px);
background:var(--ink); color:#fff;
font-size:.72rem; font-weight:500; letter-spacing:.02em;
padding:.38rem .65rem; border-radius:8px; white-space:nowrap;
opacity:0; pointer-events:none; z-index:95;
transition:opacity .15s ease, transform .15s ease;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after{
opacity:1; transform:translateX(-50%);
}
[data-tip].tip-left::after{ left:auto; right:calc(100% + 9px); bottom:50%; transform:translateY(50%) translateX(4px); }
[data-tip].tip-left:hover::after, [data-tip].tip-left:focus-visible::after{ transform:translateY(50%); }
/* ─── Floating action button + speed dial ────────────────────────────────── */
.fab-wrap{
position:fixed; z-index:80;
right:max(1.15rem, env(safe-area-inset-right));
bottom:max(1.25rem, env(safe-area-inset-bottom));
display:flex; flex-direction:column; align-items:flex-end; gap:.65rem;
/* The wrap and the (closed) speed-dial must NEVER intercept clicks meant
for page content underneath — only the button itself, and the menu
items while open, are interactive. */
pointer-events:none;
}
.fab-wrap .fab{ pointer-events:auto; }
.fab{
width:58px; height:58px; border-radius:50%; padding:0; min-height:auto;
background:var(--grad-brand); color:#fff; border:0; cursor:pointer;
display:grid; place-items:center;
box-shadow:0 10px 30px rgba(29,69,104,.42);
transition:transform .18s, box-shadow .18s, filter .12s;
}
.fab:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(29,69,104,.5); }
.fab svg{ width:24px; height:24px; transition:transform .22s cubic-bezier(.4,0,.2,1); }
.fab-wrap.open .fab svg{ transform:rotate(45deg); }
.fab-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:.55rem; pointer-events:none; }
.fab-action{
display:flex; align-items:center; gap:.6rem;
opacity:0; transform:translateY(10px) scale(.92);
pointer-events:none; visibility:hidden;
transition:opacity .18s ease, transform .18s cubic-bezier(.2,.7,.3,1.2), visibility .18s;
}
.fab-wrap.open .fab-action{ visibility:visible; }
.fab-wrap.open .fab-action{ opacity:1; transform:none; pointer-events:auto; }
.fab-wrap.open .fab-action:nth-last-child(1){ transition-delay:0s; }
.fab-wrap.open .fab-action:nth-last-child(2){ transition-delay:.04s; }
.fab-wrap.open .fab-action:nth-last-child(3){ transition-delay:.08s; }
.fab-wrap.open .fab-action:nth-last-child(4){ transition-delay:.12s; }
.fab-wrap.open .fab-action:nth-last-child(5){ transition-delay:.16s; }
.fab-wrap.open .fab-action:nth-last-child(6){ transition-delay:.2s; }
/* dim + blur the page behind the open speed-dial so the menu pops */
.fab-backdrop{
position:fixed; inset:0; z-index:75;
background:rgba(29,69,104,.35);
backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
opacity:0; pointer-events:none;
transition:opacity .2s ease;
}
.fab-backdrop.show{ opacity:1; pointer-events:auto; }
.fab-label{
background:#fff; color:var(--ink); font-size:.8rem; font-weight:500;
padding:.4rem .75rem; border-radius:999px;
box-shadow:var(--shadow); border:1px solid rgba(22,51,77,.06);
}
.fab-mini{
width:44px; height:44px; border-radius:50%; padding:0; min-height:auto;
background:#fff; color:var(--accent-deep); border:1px solid var(--line);
display:grid; place-items:center; cursor:pointer;
box-shadow:var(--shadow);
transition:transform .15s, border-color .15s, filter .12s;
}
.fab-mini:hover{ transform:scale(1.08); border-color:var(--sky-4); filter:none; color:var(--accent-deep); }
.fab-mini svg{ width:19px; height:19px; }
/* ─── Confirm dialog (shared modal skin) ─────────────────────────────────── */
.confirm-card{ max-width:420px; }
.confirm-card h2{ font-family:'Inter',sans-serif; font-style:normal; font-size:1.1rem; font-weight:600; }
.confirm-card p{ color:var(--ink-soft); font-size:.92rem; line-height:1.5; margin:.2rem 0 1.1rem; }
.confirm-actions{ display:flex; justify-content:flex-end; gap:.5rem; }
.confirm-actions .danger-solid{
background:linear-gradient(180deg,#c9536b,#a02a44); color:#fff; border:0;
box-shadow:0 2px 10px rgba(160,42,68,.3);
}
.modal .modal-card{ animation:modalIn .22s cubic-bezier(.2,.7,.3,1.1) backwards; }
@keyframes modalIn{ from{ opacity:0; transform:translateY(12px) scale(.97); } to{ opacity:1; transform:none; } }
/* ─── AI design modal ────────────────────────────────────────────────────── */
.ai-card{ max-width:600px; }
.ai-card h2{ font-family:'Inter',sans-serif; font-style:normal; font-weight:600; font-size:1.15rem; }
.ai-sub{ margin:-.4rem 0 1rem; }
.ai-uploads{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin:.2rem 0 .8rem; }
@media (max-width:560px){ .ai-uploads{ grid-template-columns:1fr; } }
.ai-upload{
display:flex; flex-direction:column; align-items:center; gap:.5rem;
padding:.8rem .6rem; border:1.5px dashed var(--line-strong); border-radius:12px;
background:var(--surface-2); cursor:pointer; text-align:center;
transition:border-color .15s, background .15s;
margin:0; text-transform:none; letter-spacing:0;
}
.ai-upload:hover{ border-color:var(--sky-4); background:var(--surface-3); }
.ai-upload.has-file{ border-style:solid; border-color:var(--sky-4); background:#fff; }
.ai-up-thumb{
width:56px; height:56px; border-radius:10px;
display:grid; place-items:center; color:var(--ink-faint);
background:#fff center/cover no-repeat; border:1px solid var(--line);
}
.ai-upload.has-file .ai-up-thumb svg{ display:none; }
.ai-up-thumb svg{ width:22px; height:22px; }
.ai-up-text{ display:flex; flex-direction:column; gap:.1rem; }
.ai-up-text strong{ font-size:.8rem; font-weight:600; color:var(--ink); }
.ai-up-text small{ font-size:.68rem; color:var(--ink-faint); line-height:1.3; }
.ai-clear-row{
display:flex; align-items:center; gap:.45rem;
font-size:.8rem; color:var(--ink-soft); margin:0 0 .9rem;
text-transform:none; letter-spacing:0; cursor:pointer;
}
.ai-bg-row{
display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin:0 0 .6rem;
}
.ai-bg-lab{ font-size:.8rem; color:var(--ink-soft); margin-right:.2rem; }
.ai-bg-pill{ cursor:pointer; }
.ai-bg-pill input{ position:absolute; opacity:0; pointer-events:none; }
.ai-bg-pill span{
display:inline-block; padding:.3rem .8rem; border-radius:999px;
font-size:.78rem; color:var(--ink-soft);
background:var(--surface); border:1px solid var(--line);
transition:background .15s, color .15s, border-color .15s;
}
.ai-bg-pill input:checked + span{
background:var(--accent); border-color:var(--accent); color:#fff;
}
.ai-bg-pill input:focus-visible + span{ box-shadow:var(--ring); }
.ai-status[hidden]{ display:none; }
.ai-status{
display:flex; align-items:center; gap:.6rem;
padding:.6rem .8rem; margin-bottom:.9rem;
background:var(--sky-1); border:1px solid var(--sky-3); border-radius:10px;
font-size:.85rem; color:var(--accent-deep);
}
.ai-spinner{
width:16px; height:16px; flex:0 0 auto; border-radius:50%;
border:2.5px solid rgba(47,111,163,.25); border-top-color:var(--accent);
animation:aispin .8s linear infinite;
}
@keyframes aispin{ to{ transform:rotate(360deg); } }
/* ─── Avatar editing ─────────────────────────────────────────────────────── */
.avatar-edit{ position:relative; cursor:pointer; border:0; padding:0; background:none; min-height:auto; box-shadow:none; border-radius:50%; }
.avatar-edit .avatar{ transition:box-shadow .18s, transform .18s; }
.avatar-edit:hover .avatar{ box-shadow:0 6px 24px rgba(29,69,104,.3); transform:scale(1.02); }
.avatar-edit .avatar-overlay{
position:absolute; inset:3px; border-radius:50%;
display:grid; place-items:center;
background:rgba(29,69,104,.45); color:#fff;
opacity:0; transition:opacity .15s;
}
.avatar-edit:hover .avatar-overlay, .avatar-edit:focus-visible .avatar-overlay{ opacity:1; }
.avatar-overlay svg{ width:26px; height:26px; }
/* ─── Public profile hero ────────────────────────────────────────────────── */
.pp-hero{ text-align:center; padding:1.2rem 0 .4rem; }
.pp-avatar-ring{
width:148px; height:148px; margin:0 auto 1rem; border-radius:50%;
padding:5px; background:linear-gradient(135deg,#7fb8dd,#244966 70%);
box-shadow:0 12px 34px rgba(29,69,104,.28);
animation:rise .55s cubic-bezier(.2,.7,.3,1) backwards;
}
.pp-avatar-ring .avatar{ width:100%; height:100%; border-width:4px; box-shadow:none; }
.pp-name{
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
font-size:clamp(2rem,6vw,2.9rem); line-height:1.05; margin:.2rem 0;
animation:rise .55s .06s cubic-bezier(.2,.7,.3,1) backwards;
}
.pp-meta{
display:flex; justify-content:center; gap:.45rem; flex-wrap:wrap; margin:.5rem 0 0;
animation:rise .55s .12s cubic-bezier(.2,.7,.3,1) backwards;
}
.pp-chip{
display:inline-flex; align-items:center; gap:.4rem;
background:rgba(255,255,255,.8); border:1px solid var(--line);
border-radius:999px; padding:.32rem .8rem;
font-size:.8rem; color:var(--ink-soft);
}
.pp-chip svg{ width:13px; height:13px; }
.pp-bio{
max-width:56ch; margin:1.1rem auto 0; text-align:center;
color:var(--ink-soft); line-height:1.55; font-size:.96rem;
animation:rise .55s .18s cubic-bezier(.2,.7,.3,1) backwards;
}
.pp-social{
display:flex; justify-content:center; flex-wrap:wrap; gap:.55rem;
margin:1.4rem auto .6rem; max-width:560px;
animation:rise .55s .24s cubic-bezier(.2,.7,.3,1) backwards;
}
.pp-social-btn{
display:inline-flex; align-items:center; gap:.5rem;
background:#fff; border:1px solid var(--line); border-radius:999px;
padding:.55rem 1.05rem; font-size:.88rem; font-weight:500; color:var(--ink);
box-shadow:var(--shadow-s);
transition:transform .15s, box-shadow .15s, border-color .15s;
}
.pp-social-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--sky-4); color:var(--accent-deep); }
.pp-social-btn .plat-ico{ width:16px; height:16px; flex:0 0 auto; }
.pp-sections{ max-width:640px; margin:1.4rem auto 0; }
.pp-sections .card{ text-align:left; }
/* Featured links (user-selected public links) */
#linksWrap{ margin:0 0 1.6rem; animation:rise .55s .28s cubic-bezier(.2,.7,.3,1) backwards; }
.pp-links-title{
font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
color:var(--ink-faint); text-align:center; margin:0 0 .7rem;
}
.pp-links{ display:flex; flex-direction:column; gap:.65rem; }
.pp-link-card{
display:flex; align-items:center; gap:.9rem; text-align:left;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-m);
padding:.85rem 1.15rem; box-shadow:var(--shadow-s); color:var(--ink);
transition:transform .15s, box-shadow .15s, border-color .15s;
animation:rise .5s cubic-bezier(.2,.7,.3,1) backwards;
}
.pp-link-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--sky-4); }
.pp-link-card:hover .pp-link-arrow{ color:var(--accent); transform:translate(2px,-2px); }
.pp-link-body{ min-width:0; flex:1; }
.pp-link-body strong{ display:block; font-weight:600; font-size:.95rem; line-height:1.3; }
.pp-link-body small{
margin-top:.15rem; color:var(--ink-soft); font-size:.8rem; line-height:1.45;
overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.pp-link-url{
flex:0 0 auto; font-size:.74rem; color:var(--ink-faint); white-space:nowrap;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.pp-link-arrow{ width:16px; height:16px; flex:0 0 auto; color:var(--ink-faint); transition:transform .15s, color .15s; }
@media (max-width:520px){ .pp-link-url{ display:none; } }
/* ─── Footer ─────────────────────────────────────────────────────────────── */
.footer{
text-align:center; padding:1.2rem; color:var(--ink-soft); opacity:.7;
font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
}
/* ─── Marketing / landing pages ──────────────────────────────────────────── */
html{ overflow-x:clip; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
[id]{ scroll-margin-top:calc(var(--nav-h) + 14px); }
/* Full-bleed hero (breaks out of .wrap) */
.ld-hero{
position:relative; overflow:hidden; text-align:center;
margin:-1.7rem calc(50% - 50vw) 0;
padding:clamp(3.2rem,8vw,5.5rem) 1.2rem clamp(2.6rem,6vw,4.2rem);
}
.ld-hero .clouds{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.85; }
.ld-hero-inner{ position:relative; z-index:1; max-width:820px; margin:0 auto; }
.ld-eyebrow{
font-family:'Italianno',cursive; font-size:clamp(1.9rem,3.5vw,2.6rem);
color:var(--ink-soft); line-height:1; margin-bottom:.5rem;
}
.ld-title{
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600;
font-size:clamp(2.3rem,6.4vw,4.3rem); line-height:1.04;
background:linear-gradient(180deg,#1c3c5c 0%, #40749e 55%, #6ea9d4 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
margin-bottom:1rem;
}
.ld-sub{
color:var(--ink-soft); font-size:clamp(.95rem,1.6vw,1.08rem); line-height:1.6;
max-width:56ch; margin:0 auto 1.6rem;
}
.ld-cta{ display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.ld-cta .btn{ text-decoration:none; font-size:.92rem; padding:.8rem 1.7rem; }
.ld-badges{ display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; }
.ld-badge{
display:inline-flex; align-items:center; gap:.4rem;
background:rgba(255,255,255,.78); border:1px solid var(--line);
border-radius:999px; padding:.34rem .85rem;
font-size:.76rem; color:var(--ink-soft); cursor:default;
}
.ld-badge svg{ width:13px; height:13px; color:var(--accent); }
.ld-hero .drift{ animation:drift 18s ease-in-out infinite; will-change:transform; }
/* Section scaffolding */
.ld-section{ padding:clamp(2.2rem,5vw,3.6rem) 0 0; }
.ld-head{ text-align:center; max-width:640px; margin:0 auto 1.8rem; }
.ld-kicker{
font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
color:var(--accent); font-weight:600; margin-bottom:.4rem;
}
.ld-head h2{
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600;
font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.1; color:var(--ink);
margin-bottom:.5rem;
}
.ld-head p{ color:var(--ink-soft); font-size:.95rem; line-height:1.55; }
/* Feature cards */
.ld-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:760px){ .ld-grid{ grid-template-columns:repeat(3,1fr); } }
.ld-card{
position:relative;
background:var(--surface); border:1px solid rgba(22,51,77,.07); border-radius:var(--radius);
padding:1.4rem 1.3rem 1.2rem; display:flex; flex-direction:column; gap:.7rem;
box-shadow:var(--shadow-s);
transition:box-shadow .2s, transform .2s;
}
.ld-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.ld-card h3{ font-size:1.12rem; font-weight:700; margin:0; letter-spacing:-.01em; }
.ld-card p{ color:var(--ink-soft); font-size:.88rem; line-height:1.55; margin:0; flex:1; }
.ld-peek{
position:absolute; top:.9rem; right:.9rem; z-index:2;
width:30px; height:30px; padding:0; min-height:auto;
display:grid; place-items:center;
background:rgba(255,255,255,.88); color:var(--ink-soft); border:1px solid var(--line);
border-radius:9px; cursor:pointer; box-shadow:var(--shadow-s);
}
.ld-peek:hover{ color:var(--accent-deep); background:var(--surface-2); border-color:var(--line); filter:none; box-shadow:none; }
.ld-peek svg{ width:16px; height:16px; }
.ld-more{
display:inline-flex; align-items:center; gap:.35rem;
color:var(--accent); font-weight:500; font-size:.86rem; margin-top:.2rem;
}
.ld-more svg{ width:15px; height:15px; transition:transform .15s; }
.ld-more:hover{ color:var(--accent-deep); }
.ld-more:hover svg{ transform:translateX(3px); }
/* Card art vignettes */
.ld-card-art{
position:relative; height:122px; border-radius:12px; overflow:hidden;
background:linear-gradient(135deg,var(--sky-1),var(--sky-2));
display:grid; place-items:center;
border:1px solid rgba(22,51,77,.05);
}
.ld-card-art::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse at 18% 0%, rgba(255,255,255,.75), transparent 55%);
}
/* links vignette: short-link pill + tilted QR chip */
.mock-pill{
position:relative; display:inline-flex; align-items:center; gap:.4rem;
background:#fff; border:1px solid var(--line); border-radius:999px;
padding:.44rem .85rem; margin-right:58px;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.7rem; font-weight:600; color:var(--accent-deep);
box-shadow:var(--shadow-s); white-space:nowrap;
}
.mock-pill i{ width:8px; height:8px; border-radius:50%; background:var(--grad-brand); flex:0 0 auto; }
.mock-qr-chip{
position:absolute; right:16px; top:50%; margin-top:-31px;
width:62px; height:62px; padding:6px;
background:#fff; border-radius:12px; box-shadow:var(--shadow);
transform:rotate(7deg);
transition:transform .25s cubic-bezier(.2,.7,.3,1.2);
}
.ld-card:hover .mock-qr-chip{ transform:rotate(0deg) translateY(-3px); }
/* fliers vignette: layered mini flier + AI badge */
.mock-layer{
position:absolute; width:62px; height:82px; border-radius:8px;
background:rgba(255,255,255,.6); border:1px solid var(--line);
transition:transform .25s cubic-bezier(.2,.7,.3,1.2);
}
.mock-layer.l1{ transform:rotate(-10deg) translateX(-32px); }
.mock-layer.l2{ transform:rotate(9deg) translateX(32px); }
.ld-card:hover .mock-layer.l1{ transform:rotate(-15deg) translateX(-40px); }
.ld-card:hover .mock-layer.l2{ transform:rotate(14deg) translateX(40px); }
.mock-flier{
position:relative; width:64px; height:86px; padding:7px;
background:#fff; border-radius:8px; box-shadow:var(--shadow);
display:flex; flex-direction:column; gap:4px;
}
.mock-flier .mf-band{ height:20px; border-radius:4px; background:var(--grad-brand); }
.mock-flier .mf-line{ height:5px; border-radius:3px; background:var(--sky-2); }
.mock-flier .mf-line.w70{ width:70%; }
.mock-flier .mf-line.w50{ width:50%; }
.mock-flier .mf-qr{
width:16px; height:16px; margin:auto 0 0 auto; border-radius:3px;
background:#244966;
background-image:radial-gradient(#fff 1px, transparent 1px);
background-size:5px 5px;
}
.mock-ai{
position:absolute; top:12px; left:14px;
display:inline-flex; align-items:center; gap:.28rem;
background:linear-gradient(135deg,#7fb8dd,#244966); color:#fff;
font-size:.6rem; font-weight:700; letter-spacing:.14em;
padding:.28rem .55rem; border-radius:999px;
box-shadow:0 3px 10px rgba(29,69,104,.3);
}
.mock-ai svg{ width:10px; height:10px; }
/* profile vignette: avatar ring + handle + social dots */
.mock-prof{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.mock-ava{
width:44px; height:44px; border-radius:50%; padding:3px;
background:linear-gradient(135deg,#7fb8dd,#244966);
box-shadow:0 5px 14px rgba(29,69,104,.25);
}
.mock-ava i{
display:grid; place-items:center; width:100%; height:100%;
border-radius:50%; background:#fff; color:var(--accent);
}
.mock-ava svg{ width:20px; height:20px; }
.mock-handle{
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600;
font-size:.92rem; color:var(--ink); line-height:1;
}
.mock-socials{ display:flex; gap:6px; }
.mock-socials i{
width:22px; height:22px; border-radius:50%;
background:#fff; border:1px solid var(--line);
display:grid; place-items:center; color:var(--accent-deep);
box-shadow:var(--shadow-s);
transition:transform .22s cubic-bezier(.2,.7,.3,1.2);
}
.mock-socials svg{ width:11px; height:11px; }
.ld-card:hover .mock-socials i{ transform:translateY(-3px); }
.ld-card:hover .mock-socials i:nth-child(2){ transition-delay:.05s; }
.ld-card:hover .mock-socials i:nth-child(3){ transition-delay:.1s; }
/* How it works */
.how-steps{
list-style:none; display:grid; gap:1rem; grid-template-columns:1fr;
counter-reset:step; padding:0; position:relative;
}
@media (min-width:760px){
.how-steps{ grid-template-columns:repeat(3,1fr); }
/* dashed journey line — visible only in the gaps between cards */
.how-steps::before{
content:""; position:absolute; top:56px; left:6%; right:6%;
border-top:2px dashed var(--line-strong);
}
}
.how-step{
background:var(--surface); border:1px solid rgba(22,51,77,.07); border-radius:var(--radius);
padding:1.45rem 1.3rem 1.35rem; box-shadow:var(--shadow-s);
position:relative; overflow:hidden;
transition:box-shadow .2s, transform .2s;
}
.how-step:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.how-step::before{
counter-increment:step; content:counter(step);
position:absolute; top:-.28em; right:.09em; z-index:0;
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:700;
font-size:6.4rem; line-height:1;
background:linear-gradient(180deg,#244966, #7fb8dd);
-webkit-background-clip:text; background-clip:text; color:transparent;
opacity:.16; pointer-events:none;
}
.how-step > *{ position:relative; z-index:1; }
.hs-icon{
width:46px; height:46px; border-radius:13px; margin-bottom:.9rem;
display:grid; place-items:center;
background:var(--grad-brand); color:#fff;
box-shadow:0 5px 16px rgba(29,69,104,.3);
}
.hs-icon svg{ width:22px; height:22px; }
.how-step h3{ font-size:1.05rem; font-weight:700; margin:0 0 .4rem; letter-spacing:-.01em; }
.how-step p{ color:var(--ink-soft); font-size:.87rem; line-height:1.55; margin:0; }
/* Split section (copy + visual) */
.ld-split{ display:grid; gap:1.6rem; align-items:center; grid-template-columns:1fr; }
@media (min-width:820px){
.ld-split{ grid-template-columns:1.05fr .95fr; gap:2.6rem; }
.ld-split.flip > .ld-split-copy{ order:2; }
}
.ld-split-copy h2{
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600;
font-size:clamp(1.6rem,3.6vw,2.3rem); line-height:1.12; margin-bottom:.6rem;
}
.ld-split-copy p{ color:var(--ink-soft); font-size:.94rem; line-height:1.6; margin-bottom:.9rem; }
.ld-checks{ list-style:none; padding:0; display:grid; gap:.45rem; }
.ld-checks li{ display:flex; gap:.55rem; align-items:flex-start; font-size:.9rem; color:var(--ink); }
.ld-checks svg{ width:17px; height:17px; flex:0 0 auto; color:var(--accent); margin-top:.1rem; }
/* Decorative analytics mock (pure CSS/SVG, animates on reveal) */
.ld-visual{
background:var(--surface); border:1px solid rgba(22,51,77,.07); border-radius:var(--radius);
padding:1.3rem; box-shadow:var(--shadow);
}
.ld-visual-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.9rem; }
.ld-visual-head strong{ font-size:.85rem; font-weight:600; }
.ld-visual-head span{ font-size:.72rem; color:var(--ink-faint); letter-spacing:.12em; text-transform:uppercase; }
.ld-spark{ display:flex; align-items:flex-end; gap:5px; height:110px; margin-bottom:.9rem; }
.ld-spark i{
flex:1; border-radius:4px 4px 0 0; min-height:4px;
background:linear-gradient(180deg,#7fb8dd,#244966);
transform:scaleY(0); transform-origin:bottom;
}
.reveal.in .ld-spark i{ animation:barGrow .65s cubic-bezier(.2,.7,.3,1) forwards; }
.reveal.in .ld-spark i:nth-child(2){ animation-delay:.05s; } .reveal.in .ld-spark i:nth-child(3){ animation-delay:.1s; }
.reveal.in .ld-spark i:nth-child(4){ animation-delay:.15s; } .reveal.in .ld-spark i:nth-child(5){ animation-delay:.2s; }
.reveal.in .ld-spark i:nth-child(6){ animation-delay:.25s; } .reveal.in .ld-spark i:nth-child(7){ animation-delay:.3s; }
.reveal.in .ld-spark i:nth-child(8){ animation-delay:.35s; } .reveal.in .ld-spark i:nth-child(9){ animation-delay:.4s; }
.reveal.in .ld-spark i:nth-child(10){ animation-delay:.45s; } .reveal.in .ld-spark i:nth-child(11){ animation-delay:.5s; }
.reveal.in .ld-spark i:nth-child(12){ animation-delay:.55s; }
@keyframes barGrow{ to{ transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce){ .ld-spark i{ transform:none; animation:none !important; } }
.ld-visual-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; }
.ld-visual-stats div{ background:var(--surface-2); border-radius:10px; padding:.55rem .7rem; }
.ld-visual-stats dt{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; }
.ld-visual-stats dd{
margin:0; font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
font-size:1.3rem; color:var(--ink);
}
/* FAQ accordion */
.faq-list{ display:grid; gap:.6rem; max-width:760px; margin:0 auto; }
.faq-item{
background:var(--surface); border:1px solid rgba(22,51,77,.07); border-radius:var(--radius-m);
box-shadow:var(--shadow-s); overflow:hidden;
transition:box-shadow .18s, border-color .18s;
}
.faq-item[open]{ box-shadow:var(--shadow); border-color:var(--line); }
.faq-item summary{
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; gap:.8rem;
padding:1rem 1.15rem; font-weight:500; font-size:.95rem; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ background:var(--surface-2); }
.faq-chev{
margin-left:auto; flex:0 0 auto; width:22px; height:22px;
display:grid; place-items:center; border-radius:50%;
color:var(--accent); background:var(--sky-1);
transition:transform .22s cubic-bezier(.2,.7,.3,1.1);
}
.faq-chev svg{ width:13px; height:13px; }
.faq-item[open] .faq-chev{ transform:rotate(45deg); }
.faq-body{ padding:0 1.15rem 1.05rem; color:var(--ink-soft); font-size:.9rem; line-height:1.6; }
.faq-item[open] .faq-body{ animation:rise .28s cubic-bezier(.2,.7,.3,1) backwards; }
/* CTA band */
.cta-band{
margin-top:clamp(2.4rem,5vw,3.6rem);
background:var(--grad-brand); border-radius:var(--radius);
padding:clamp(2rem,5vw,3rem) 1.5rem; text-align:center;
box-shadow:var(--shadow-l); position:relative; overflow:hidden;
}
.cta-band::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.16), transparent 55%),
radial-gradient(ellipse at 85% 100%, rgba(127,184,221,.25), transparent 60%);
}
.cta-band > *{ position:relative; }
.cta-band h2{
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600;
font-size:clamp(1.7rem,4.4vw,2.6rem); color:#fff; margin-bottom:.4rem;
}
.cta-band p{ color:rgba(255,255,255,.82); font-size:.95rem; margin-bottom:1.3rem; }
.cta-band .btn{
background:#fff; color:var(--accent-deep); text-decoration:none;
font-weight:600; box-shadow:0 6px 22px rgba(10,25,40,.3);
}
.cta-band .btn:hover{ filter:none; background:var(--sky-1); color:var(--accent-deep); }
/* Scroll reveal */
.reveal{ opacity:0; transform:translateY(18px);
transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.07s; }
.reveal[data-delay="2"]{ transition-delay:.14s; }
.reveal[data-delay="3"]{ transition-delay:.21s; }
@media (prefers-reduced-motion: reduce){
.reveal{ opacity:1; transform:none; transition:none; }
}
/* Peek modal */
.peek-card{ max-width:520px; }
.peek-card h2{ display:flex; align-items:center; gap:.7rem; font-size:1.2rem; }
.peek-card h2 .tool-icon{ width:40px; height:40px; border-radius:10px; }
.peek-card .ld-checks{ margin:.4rem 0 1.2rem; }
.peek-actions{ display:flex; justify-content:flex-end; gap:.5rem; flex-wrap:wrap; }
.peek-actions .btn{ text-decoration:none; font-size:.86rem; padding:.6rem 1.15rem; min-height:auto; }
/* Feature detail pages */
.fd-hero{ text-align:center; max-width:720px; margin:1rem auto 2.2rem; }
.fd-crumb{ font-size:.76rem; color:var(--ink-faint); letter-spacing:.08em; margin-bottom:.9rem; }
.fd-crumb a{ color:var(--ink-soft); }
.fd-crumb a:hover{ color:var(--accent-deep); }
.fd-hero .tool-icon{ width:56px; height:56px; margin:0 auto 1rem; border-radius:16px; }
.fd-hero h1{
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600;
font-size:clamp(2rem,5.4vw,3.2rem); line-height:1.08;
background:linear-gradient(180deg,#1c3c5c 0%, #40749e 55%, #6ea9d4 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
margin-bottom:.7rem;
}
.fd-hero p{ color:var(--ink-soft); font-size:.98rem; line-height:1.6; }
.fd-hero .ld-cta{ margin:1.4rem 0 0; }
.fd-grid{ display:grid; gap:1rem; grid-template-columns:1fr; margin-bottom:.6rem; }
@media (min-width:680px){ .fd-grid{ grid-template-columns:1fr 1fr; } }
.fd-grid .ld-card p{ flex:none; }
/* Proof visual (finished flier + a live-styled layers panel) */
.ld-proof{ max-width:960px; margin-left:auto; margin-right:auto; }
.ld-proof-stage{ display:grid; gap:1.6rem; grid-template-columns:1fr; align-items:center; }
@media (min-width:680px){ .ld-proof-stage{ grid-template-columns:.56fr .44fr; gap:2.2rem; } }
.proof-flier{ margin:0; perspective:900px; animation:proofFloat 7s ease-in-out infinite; }
.proof-flier img{
width:100%; height:auto; display:block; border-radius:var(--radius);
box-shadow:var(--shadow-l); transition:transform .25s ease; will-change:transform;
}
@keyframes proofFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.proof-panel{
background:var(--surface); border:1px solid rgba(22,51,77,.07);
border-radius:var(--radius); box-shadow:var(--shadow);
padding:1.1rem 1rem; animation:proofFloat 8.5s ease-in-out 1.2s infinite;
}
.pp-head{
display:flex; justify-content:space-between; align-items:center;
margin-bottom:.6rem; padding:0 .35rem;
font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; font-weight:600; color:var(--ink);
}
.pp-tools{ display:flex; gap:.55rem; color:var(--ink-faint); }
.pp-tools svg{ width:15px; height:15px; }
.pp-rows{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem; }
.pp-rows li{
display:flex; align-items:center; gap:.6rem; padding:.48rem .55rem; border-radius:9px;
font-size:.86rem; color:var(--ink); opacity:0; transform:translateX(16px);
transition:opacity .45s ease calc(var(--d) * 55ms),
transform .45s cubic-bezier(.2,.7,.3,1) calc(var(--d) * 55ms),
background .15s;
}
.ld-proof-stage.in .pp-rows li{ opacity:1; transform:none; }
.pp-rows li:hover{ background:rgba(63,125,176,.08); }
.pp-rows svg{ width:15px; height:15px; color:var(--ink-faint); flex:0 0 auto; }
.pp-rows li:hover svg:first-child{ color:var(--accent); }
.pp-more{ color:var(--ink-faint); font-style:italic; }
@media (prefers-reduced-motion: reduce){
.proof-flier, .proof-panel{ animation:none; }
.pp-rows li{ opacity:1; transform:none; transition:none; }
}
.ld-proof-cap{ text-align:center; color:var(--ink-soft); font-size:.88rem; line-height:1.55; margin:1rem auto 0; max-width:56ch; }
.ld-audience{ text-align:center; color:var(--ink-soft); font-size:.9rem; line-height:1.6; margin:1.4rem auto 0; max-width:62ch; }
/* Micro trust line under conversion CTAs */
.ld-micro{ font-size:.78rem; color:var(--ink-faint); }
.ld-hero-inner .ld-micro{ margin:-.7rem 0 1.4rem; }
.fd-hero .ld-micro{ font-size:.78rem; margin:.7rem 0 0; }
.cta-band .ld-micro{ font-size:.78rem; color:rgba(255,255,255,.72); margin:.9rem 0 0; }
/* Promo film */
.promo-video{ max-width:960px; margin:0 auto; }
.promo-video video{
width:100%; height:auto; display:block;
border-radius:var(--radius); border:1px solid rgba(22,51,77,.07);
box-shadow:var(--shadow-l); background:#0d1e30;
}
/* Prompt gallery cards (pinned-poster feel: slight tilt, straighten + zoom on hover) */
.gal-card{ padding:1rem 1rem 1.1rem; }
.gal-frame{ display:block; overflow:hidden; border-radius:var(--radius-m); border:1px solid rgba(22,51,77,.08); }
.gal-frame img{ width:100%; height:auto; display:block; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.gal-prompt{ color:var(--ink-soft); font-size:.85rem; line-height:1.55; font-style:italic; margin:0; }
.gal-grid .gal-card{ transition:box-shadow .25s, transform .35s cubic-bezier(.2,.7,.3,1), opacity .55s ease; }
.gal-grid .gal-card.in:nth-child(odd){ transform:rotate(-1.1deg); }
.gal-grid .gal-card.in:nth-child(even){ transform:rotate(1.1deg); }
@media (hover:hover){
.gal-grid .gal-card.in:hover{ transform:rotate(0) translateY(-8px); box-shadow:var(--shadow-l); }
.gal-card:hover .gal-frame img{ transform:scale(1.045); }
}
@media (prefers-reduced-motion: reduce){
.gal-grid .gal-card.in{ transform:none; }
.gal-frame img{ transition:none; }
}
/* Niche case-study gallery (video + flier + prompt per row) */
.niche-grid{ display:grid; gap:1.4rem; max-width:1120px; margin:0 auto; }
.niche-card{
background:var(--surface); border:1px solid rgba(22,51,77,.08);
border-radius:var(--radius); box-shadow:var(--shadow-s); overflow:hidden;
transition:box-shadow .3s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}
@media (hover:hover){ .niche-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); } }
.niche-head{
display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
padding:1rem 1.3rem .3rem;
}
.niche-tag{ font-family:'Italianno',cursive; font-size:1.65rem; color:var(--ink-soft); line-height:1; }
.niche-meta{
font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--ink-faint); font-weight:500;
}
.niche-media.solo{ grid-template-columns:minmax(0,1fr) !important; }
.niche-media{
display:grid; gap:.9rem; padding:.15rem 1.3rem 0;
grid-template-columns:1fr;
}
@media (min-width:820px){
.niche-media{ grid-template-columns:minmax(0,1fr) minmax(0,1.65fr); align-items:stretch; }
}
.niche-flier{
margin:0; position:relative; align-self:start;
border-radius:var(--radius-m); overflow:hidden;
border:1px solid rgba(22,51,77,.08); box-shadow:var(--shadow-s);
background:#0d1e30;
transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
cursor:zoom-in;
}
.niche-flier img{ width:100%; height:auto; display:block; }
.niche-flier::after{
content:'The design'; position:absolute; left:.55rem; top:.55rem;
font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
padding:.28rem .55rem; border-radius:999px;
background:rgba(255,255,255,.86); color:var(--ink-soft);
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
pointer-events:none;
}
@media (hover:hover){ .niche-flier:hover{ transform:rotate(-1deg) scale(1.015); box-shadow:var(--shadow); } }
.niche-video-wrap{
position:relative; border-radius:var(--radius-m); overflow:hidden;
border:1px solid rgba(22,51,77,.08); box-shadow:var(--shadow);
background:#0d1e30; aspect-ratio:16/9;
}
.niche-video-wrap video{ width:100%; height:100%; object-fit:cover; display:block; }
.niche-video-wrap::before{
content:'The film'; position:absolute; left:.65rem; top:.65rem; z-index:2;
font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
padding:.28rem .55rem; border-radius:999px;
background:rgba(13,30,48,.55); color:#fff;
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
pointer-events:none;
}
.niche-play{
position:absolute; left:50%; top:50%; z-index:2;
transform:translate(-50%,-50%);
width:64px; height:64px; border-radius:50%; border:0; cursor:pointer;
background:rgba(255,255,255,.94); color:var(--accent-deep);
box-shadow:0 12px 32px rgba(10,25,40,.4);
display:grid; place-items:center;
transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.niche-play svg{ width:22px; height:22px; margin-left:3px; }
.niche-card.playing .niche-play{
opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.75);
}
.niche-mute{
position:absolute; right:.7rem; bottom:.7rem; z-index:2;
width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
background:rgba(13,30,48,.72); color:#fff;
display:grid; place-items:center;
transition:background .2s ease, transform .2s;
opacity:0; pointer-events:none;
}
.niche-mute svg{ width:15px; height:15px; }
.niche-card.playing .niche-mute{ opacity:1; pointer-events:auto; }
.niche-mute:hover{ background:rgba(29,69,104,.92); transform:scale(1.06); }
.niche-prompt{
margin:1.1rem 1.3rem 1.25rem;
padding:.85rem 1.15rem .9rem;
border-left:3px solid var(--accent);
background:var(--sky-1);
border-radius:0 var(--radius-m) var(--radius-m) 0;
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
font-size:1.05rem; line-height:1.5; color:var(--ink);
position:relative;
}
.niche-prompt::before{
content:'What it does'; position:absolute; top:-.55rem; left:.9rem;
font-family:Inter,sans-serif; font-style:normal; font-weight:500;
font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--accent-deep); background:var(--surface); padding:0 .4rem;
}
.niche-prompt p{ margin:0; }
/* Lightbox for the flier zoom */
.niche-lightbox{
position:fixed; inset:0; z-index:120; display:none;
background:rgba(13,30,48,.82); backdrop-filter:blur(6px);
align-items:center; justify-content:center; padding:2rem;
opacity:0; transition:opacity .25s ease;
}
.niche-lightbox.on{ display:flex; opacity:1; }
.niche-lightbox img{
max-width:min(92vw,720px); max-height:88vh; border-radius:var(--radius-m);
box-shadow:0 24px 60px rgba(0,0,0,.5);
transform:scale(.96); transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.niche-lightbox.on img{ transform:scale(1); }
.niche-lightbox-close{
position:absolute; top:1rem; right:1rem;
width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
background:rgba(255,255,255,.14); color:#fff;
display:grid; place-items:center;
transition:background .2s;
}
.niche-lightbox-close:hover{ background:rgba(255,255,255,.28); }
@media (prefers-reduced-motion: reduce){
.niche-card, .niche-flier, .niche-play, .niche-mute, .niche-lightbox img{ transition:none; }
.niche-flier:hover{ transform:none; }
}
/* Site footer */
.site-footer{
margin-top:2.5rem;
background:rgba(255,255,255,.65);
border-top:1px solid rgba(22,51,77,.08);
}
.sf-inner{
max-width:var(--content-max); margin:0 auto;
padding:2.4rem 1rem 1.6rem;
display:grid; gap:1.8rem; grid-template-columns:1fr;
}
@media (min-width:720px){ .sf-inner{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:1.2rem; } }
.sf-brand .brand{ font-size:1.9rem; }
.sf-brand p{ color:var(--ink-soft); font-size:.84rem; line-height:1.55; margin-top:.5rem; max-width:30ch; }
.sf-col h3{
font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
color:var(--accent-deep); font-weight:600; margin-bottom:.7rem;
}
.sf-col ul{ list-style:none; padding:0; display:grid; gap:.4rem; }
.sf-col a{ font-size:.88rem; color:var(--ink-soft); }
.sf-col a:hover{ color:var(--accent-deep); }
.sf-legal{
max-width:var(--content-max); margin:0 auto;
padding:1rem 1rem 1.4rem;
border-top:1px solid rgba(22,51,77,.06);
display:flex; justify-content:space-between; gap:.8rem; flex-wrap:wrap;
font-size:.76rem; color:var(--ink-faint);
}
/* ─── Link analytics (link_detail) ────────────────────────────────────────────
Series colors are validated (CVD + contrast) — QR = deep blue, clicks = light
blue; identity is never color-alone (legend + labels everywhere). */
:root{ --an-qr:#25679c; --an-direct:#4f9ad6; }
.an-legend{ display:flex; gap:1rem; flex-wrap:wrap; margin:.1rem 0 .5rem; font-size:.82rem; color:var(--ink-soft); }
.an-key{ display:inline-flex; align-items:center; gap:.38rem; }
.an-key strong{ color:var(--ink); font-weight:600; }
.an-chip{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.an-chip-qr{ background:var(--an-qr); }
.an-chip-direct{ background:var(--an-direct); }
/* stacked daily bars — 2px surface gap between segments */
.spark-col{
flex:1; min-width:0; height:100%;
display:flex; flex-direction:column; justify-content:flex-end; gap:2px;
}
.spark-seg{ display:block; border-radius:3px; min-height:2px; }
.seg-qr{ background:var(--an-qr); }
.seg-direct{ background:var(--an-direct); }
.seg-zero{ background:var(--line); height:2px; }
/* source split bar */
.an-split{ display:flex; gap:2px; height:14px; margin:.35rem 0 .55rem; }
.an-seg{ display:block; border-radius:4px; min-width:6px; }
.an-split-labels{ display:flex; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:var(--ink-soft); }
.an-split-labels strong{ color:var(--ink); font-weight:600; }
/* flier attribution + generic ranked lists */
.an-list{ list-style:none; padding:0; margin:.7rem 0 0; display:flex; flex-direction:column; gap:.35rem; }
.an-list li{
display:flex; justify-content:space-between; align-items:center; gap:.6rem;
padding:.45rem .7rem; background:var(--surface-2); border-radius:8px; font-size:.9rem;
}
.an-list a{ color:var(--accent); }
.an-n{ font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); flex:0 0 auto; }
/* label + track + count rows (devices, locations) */
.an-bars{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.an-bars li{ display:flex; align-items:center; gap:.6rem; font-size:.9rem; }
.an-bar-label{ flex:0 0 42%; min-width:0; display:flex; flex-direction:column; gap:1px; color:var(--ink-soft); }
.an-bar-label > *{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-bar-label small{ font-size:.76rem; }
.an-bar-track{ flex:1; height:8px; background:var(--surface-3); border-radius:4px; overflow:hidden; }
.an-bar-track i{ display:block; height:100%; background:var(--an-qr); border-radius:4px; }
.an-hint{ font-size:.78rem; margin-top:.7rem; }
.an-hint a{ color:var(--ink-faint); text-decoration:underline; }
/* recent activity rows */
.an-recent li{ font-size:.88rem; line-height:1.45; }
.an-badge{
display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.06em;
text-transform:uppercase; padding:.1rem .45rem; border-radius:5px; color:#fff;
vertical-align:1px;
}
.an-badge-qr{ background:var(--an-qr); }
.an-badge-direct{ background:var(--an-direct); }
.an-bot{ opacity:.55; }
/* ─── Analytics dashboard (dashboard + /analytics) ───────────────────────────
Filter row scopes everything below it; refetches hold the previous render at
reduced opacity (no skeleton flash). */
.an-filter-row{
display:flex; align-items:center; justify-content:space-between; gap:.8rem;
flex-wrap:wrap; margin:0 0 1rem;
}
.an-range{ display:inline-flex; gap:2px; background:var(--surface-3); padding:3px; border-radius:10px; }
.an-range button{
background:transparent; color:var(--ink-soft); border:0; box-shadow:none;
font-size:.8rem; font-weight:500; padding:.38rem .8rem; min-height:auto; border-radius:8px;
}
.an-range button:hover{ filter:none; transform:none; color:var(--ink); }
.an-range button.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-s); }
.an-more{
display:inline-flex; align-items:center; gap:.35rem;
font-size:.85rem; font-weight:500; color:var(--accent);
}
.an-more:hover{ color:var(--accent-deep); }
.an-linkpick{ display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; }
.an-linkpick select{
border:1px solid var(--line-strong); border-radius:9px; background:var(--surface);
color:var(--ink); font:inherit; font-size:.85rem; padding:.4rem 2rem .4rem .7rem;
max-width:min(60vw,300px);
}
.an-scope{ transition:opacity .18s ease; }
.an-scope.an-loading{ opacity:.55; pointer-events:none; }
/* trend chips — status colors mean better/worse, never series identity */
.an-delta{
display:inline-block; font-size:.72rem; font-weight:600;
padding:.05rem .4rem; border-radius:6px; vertical-align:1px;
}
.an-delta.up{ background:#e7f3ec; color:var(--ok); }
.an-delta.down{ background:#fbe9ed; color:var(--danger); }
.an-delta.flat{ background:var(--surface-3); color:var(--ink-faint); }
/* chart card head: title + legend + table toggle in one row */
.an-card-head{
display:flex; align-items:center; justify-content:space-between;
gap:.8rem; flex-wrap:wrap; margin-bottom:.6rem;
}
.an-card-head h2{ margin:0; }
.an-card-tools{ display:flex; align-items:center; gap:.7rem; }
.an-card-tools .an-legend{ margin:0; }
.an-toggle{
background:transparent; border:1px solid var(--line-strong); color:var(--ink-soft);
box-shadow:none; padding:.35rem .5rem; min-height:auto; border-radius:8px; line-height:0;
}
.an-toggle:hover{ filter:none; color:var(--ink); border-color:var(--ink-faint); }
.an-toggle[aria-pressed="true"]{ background:var(--surface-3); color:var(--ink); }
/* the daily column chart */
.anc{ position:relative; padding-top:1.4rem; }
.anc-grid{
position:absolute; left:0; right:0; top:1.4rem;
border-top:1px solid var(--line);
}
.anc-max{
position:absolute; right:0; top:-1.05rem;
font-size:.72rem; color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.anc-cols{ display:flex; align-items:flex-end; gap:2px; height:150px; }
.anc-col{
flex:1; min-width:0; height:100%; position:relative;
display:flex; flex-direction:column; justify-content:flex-end;
border-radius:4px; cursor:default;
}
.anc-col:hover, .anc-col:focus-visible{ background:rgba(127,184,221,.14); box-shadow:none; }
.anc-stack{ display:flex; flex-direction:column; justify-content:flex-end; gap:2px; flex:1; }
.anc-seg{ display:block; border-radius:3px; min-height:2px; }
.anc-seg.seg-qr{ background:var(--an-qr); }
.anc-seg.seg-direct{ background:var(--an-direct); }
.anc-seg.seg-zero{ background:var(--line); height:2px; }
.anc-tick{
height:1.05rem; margin-top:2px; font-size:.68rem; color:var(--ink-faint);
white-space:nowrap; overflow:visible; text-align:left;
}
.anc-peak{
position:absolute; top:-1.25rem; left:50%; transform:translateX(-50%);
font-size:.72rem; font-weight:600; color:var(--ink-soft);
font-variant-numeric:tabular-nums; font-style:normal;
}
.anc-tip{
position:absolute; top:0; transform:translate(-50%,-20%);
background:var(--ink); color:#fff; font-size:.76rem; line-height:1.5;
padding:.4rem .6rem; border-radius:8px; pointer-events:none; z-index:5;
box-shadow:var(--shadow); white-space:nowrap;
}
.anc-tip .an-chip{ display:inline-block; width:8px; height:8px; vertical-align:0; }
.anc.is-empty{ display:none; }
/* table twin of the chart */
.an-table-scroll{ overflow-x:auto; }
.an-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.an-table th{
text-align:left; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
color:var(--ink-faint); font-weight:600; padding:.4rem .6rem;
border-bottom:1px solid var(--line);
}
.an-table td{
padding:.4rem .6rem; border-bottom:1px solid var(--line);
font-variant-numeric:tabular-nums;
}
.an-table tbody tr:last-child td{ border-bottom:0; }
/* three-up audience row */
.an-trio{ display:grid; gap:1rem; margin-bottom:1rem; }
@media (min-width:880px){ .an-trio{ grid-template-columns:1fr 1fr 1fr; } }
/* wide 2:1 grid for chart + top links */
.dash-grid-wide{ margin-bottom:1rem; }
@media (min-width:880px){ .dash-grid-wide{ grid-template-columns:2fr 1fr; } }
/* top-links list: stacked QR/direct mini bars */
.an-toplinks .an-bar-label a{ color:var(--ink); font-weight:500; }
.an-toplinks .an-bar-label a:hover{ color:var(--accent); }
.an-bar-stacked{ display:flex; gap:2px; background:var(--surface-3); }
.an-bar-stacked i{ display:block; height:100%; border-radius:4px; min-width:3px; }
.an-bar-stacked .an-chip-qr{ background:var(--an-qr); }
.an-bar-stacked .an-chip-direct{ background:var(--an-direct); }
.an-recent-link{ color:var(--accent); font-weight:500; }
.an-when{ color:var(--ink-soft); }
/* ─── Manage-links spreadsheet ──────────────────────────────────────────────── */
.sheet-bar{
position:sticky; top:calc(var(--nav-h) + 8px); z-index:20;
display:flex; align-items:center; justify-content:space-between; gap:.8rem;
flex-wrap:wrap; margin-bottom:.8rem;
background:var(--surface); border:1px solid var(--line);
border-radius:var(--radius-m); box-shadow:var(--shadow);
padding:.55rem .9rem;
}
.sheet-bar-left, .sheet-bar-right{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.sheet-bar span{ font-size:.85rem; color:var(--ink-soft); font-weight:500; }
.sheet-bar .btn, .sheet-bar button.danger{ font-size:.78rem; padding:.45rem .85rem; min-height:auto; }
.sheet-card{ padding:0 !important; overflow:hidden; }
.sheet-card .an-hint{ padding:.7rem 1.1rem 1rem; margin:0; }
.sheet-scroll{ overflow-x:auto; }
.sheet{ width:100%; border-collapse:collapse; font-size:.86rem; min-width:880px; }
.sheet thead th{
position:sticky; top:0; z-index:2;
background:var(--surface-2); color:var(--ink-faint);
font-size:.68rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
text-align:left; padding:.65rem .7rem; border-bottom:1px solid var(--line-strong);
white-space:nowrap;
}
.sheet .sh-sort{ cursor:pointer; user-select:none; }
.sheet .sh-sort:hover{ color:var(--ink); }
.sheet .sh-sort.sorted{ color:var(--accent); }
.sh-arrow{ font-style:normal; }
.sheet tbody td{
padding:.3rem .45rem; border-bottom:1px solid var(--line);
vertical-align:middle; background:var(--surface);
transition:background .25s ease;
}
.sheet tbody td + td{ border-left:1px solid var(--line); }
.sheet tbody tr:hover td{ background:var(--surface-2); }
.sheet tbody tr:last-child td{ border-bottom:0; }
.sh-pub{ width:52px; }
.sheet .sh-pub{ text-align:center; }
.sh-pub input{ width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.sh-check{ width:34px; text-align:center; }
.sh-check input{ width:15px; height:15px; accent-color:var(--accent); }
.sh-qr{ width:50px; }
.sh-qrbtn{
background:transparent; border:1px solid var(--line); border-radius:7px;
padding:2px; line-height:0; box-shadow:none; min-height:auto;
}
.sh-qrbtn:hover{ filter:none; transform:none; border-color:var(--accent); }
.sh-qrbtn img{ border-radius:5px; }
.sh-cell input{
width:100%; min-width:110px; border:1px solid transparent; background:transparent;
font:inherit; font-size:.86rem; color:var(--ink);
padding:.42rem .5rem; border-radius:7px;
}
.sh-cell input:hover{ border-color:var(--line-strong); }
.sh-cell input:focus{ outline:none; border-color:var(--accent); background:var(--surface); box-shadow:var(--ring); }
.sh-cell input.cell-err{ border-color:var(--danger); background:#fdf2f4; }
.sh-slug{ white-space:nowrap; }
.sh-slug .sh-prefix{ font-size:.78rem; color:var(--ink-faint); }
.sh-slug input{
min-width:90px; max-width:130px; display:inline-block; vertical-align:middle;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.82rem;
}
.sh-url input{ min-width:180px; color:var(--ink-soft); }
.sh-num{ text-align:right; white-space:nowrap; }
th.sh-num{ text-align:right; }
.sh-num a{ display:inline-flex; flex-direction:column; align-items:flex-end; gap:0; line-height:1.25; }
.sh-num strong{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.sh-num small{ font-size:.72rem; }
.sh-date{ white-space:nowrap; font-size:.8rem; }
.sh-actions{ white-space:nowrap; text-align:right; width:1%; }
.sh-ico{
display:inline-flex; align-items:center; justify-content:center;
width:30px; height:30px; border-radius:7px; border:0; background:transparent;
color:var(--ink-faint); box-shadow:none; padding:0; min-height:auto; vertical-align:middle;
}
.sh-ico:hover{ filter:none; transform:none; background:var(--surface-3); color:var(--ink); }
.sh-ico.sh-del:hover{ background:#fdf2f4; color:var(--danger); }
.sh-ico.sh-save{ color:var(--ok); }
.sh-ico.sh-save:hover{ background:#e7f3ec; color:var(--ok); }
.sh-dirty-tools{ display:inline-flex; gap:2px; margin-right:.3rem; }
.sheet tr.row-dirty td{ background:#fdf8ec; }
.sheet tr.row-dirty:hover td{ background:#fbf3dd; }
.sheet tr.row-saved td{ background:#e7f3ec; }
.sheet tr.row-err td{ background:#fdf2f4; }
@media (max-width:640px){
.sheet-bar{ top:calc(var(--nav-h) + 4px); }
}
/* display:flex components need explicit [hidden] rules (the CSS-hidden gotcha) */
.an-legend[hidden], .sheet-bar[hidden], .sheet-bar-left[hidden],
.sheet-bar-right[hidden], .sh-dirty-tools[hidden]{ display:none; }
/* /analytics filtered to one link: sources card takes the whole row */
.dash-grid.dash-grid-single{ grid-template-columns:1fr; }
/* ─── Zernio settings (profile) ─────────────────────────────────────────── */
.zernio-table{ width:100%; border-collapse:collapse; margin-top:.4rem; }
.zernio-table th{
text-align:left; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-soft); font-weight:500; padding:.4rem .6rem;
border-bottom:1px solid var(--line);
}
.zernio-table td{ padding:.55rem .6rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.zernio-table td.plat{
font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-soft); font-weight:500;
}
.zernio-table .zernio-status .ok{ color:#1e7c46; font-weight:500; }
.zernio-table .zernio-verify{ white-space:nowrap; }
@media (max-width:560px){
.zernio-table thead{ display:none; }
.zernio-table tr{ display:block; padding:.4rem 0; }
.zernio-table td{ display:block; border-bottom:none; padding:.15rem .2rem; }
.zernio-table tr + tr{ border-top:1px solid var(--line); }
}
/* ─── Post to Social Media modal ────────────────────────────────────────── */
.sp-card{ max-width:640px; width:min(640px, calc(100vw - 2rem)); }
.sp-body{ max-height:min(58vh, 34rem); overflow-y:auto; padding-right:.2rem; }
.sp-list{ display:flex; flex-direction:column; gap:.8rem; }
.sp-row{
border:1px solid var(--line); border-radius:var(--radius-s); background:#fff;
padding:.6rem .7rem;
}
.sp-row-head{ display:flex; align-items:center; gap:.5rem; cursor:pointer; }
.sp-row-head .plat{
font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-soft); font-weight:500;
}
.sp-row-head .sp-count{ margin-left:auto; font-size:.78rem; }
.sp-row-head .sp-count.over{ color:#b3261e; font-weight:600; }
.sp-caption{ width:100%; margin-top:.5rem; resize:vertical; min-height:4.4rem; }
.sp-actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem; }
.sp-err{ color:#b3261e; margin:.6rem 0 0; }
.sp-genline{ margin-top:0; }
.sp-results{ display:flex; flex-direction:column; gap:.55rem; }
.sp-result{
display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
border:1px solid var(--line); border-radius:var(--radius-s);
padding:.55rem .7rem; background:#fff;
}
.sp-result .plat{
font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-soft); font-weight:500; min-width:84px;
}
.sp-result.ok{ border-color:rgba(30,124,70,.35); }
.sp-result.bad{ border-color:rgba(179,38,30,.4); }
.sp-result.bad span{ color:#b3261e; }
/* ─── Conversion tracking (link detail + analytics) ─────────────────────── */
.track-snippet{
display:block; margin:.35rem 0 .5rem; padding:.7rem .85rem;
border:1px solid var(--line); border-radius:var(--radius-s);
background:var(--surface-2); color:var(--ink);
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.8rem; line-height:1.5;
white-space:pre-wrap; word-break:break-all; overflow-x:auto;
}
.track-steps{ display:flex; flex-direction:column; gap:1rem; margin-top:.6rem; }
.track-details{ margin-top:.7rem; }
.track-details summary{
cursor:pointer; color:var(--ink-soft); font-size:.88rem; font-weight:500;
}
.track-details summary:hover{ color:var(--ink); }
.track-details p{ margin:.45rem 0 0; }
.sh-conv{ color:#1e7c46; font-weight:600; font-size:.72rem; }
#convEvents:not(:empty){ margin-top:.8rem; }
#convEvents li{
display:flex; justify-content:space-between; align-items:center;
padding:.4rem 0; border-bottom:1px solid var(--line); font-size:.88rem;
}
#convEvents li:last-child{ border-bottom:none; }
#convEvents .an-n{ color:var(--ink-soft); font-variant-numeric:tabular-nums; }
/* ─── /tracking page ────────────────────────────────────────────────────── */
.track-how{ margin:.3rem 0 .9rem 1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.track-how li{ padding-left:.25rem; }
.track-how code{ background:var(--surface-2); padding:.1rem .35rem; border-radius:5px; font-size:.85em; }
.track-link{ margin-bottom:1rem; }
.track-link-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.track-link-names{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.track-link-names a{ font-size:.85rem; overflow-wrap:anywhere; }
.track-toggle{ white-space:nowrap; }
.track-link-body{ margin-top:.9rem; display:flex; flex-direction:column; gap:.9rem; }
.track-statusline{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.track-status{ font-size:.86rem; }
.track-status.ok{ color:#1e7c46; font-weight:600; }
.track-status.wait{ color:var(--ink-soft); }
.btn-s{ padding:.35rem .7rem; font-size:.82rem; }
.track-goalrow{ display:flex; gap:.5rem; align-items:center; }
.track-goalrow input{ flex:1; min-width:0; }
.track-statline a{ font-weight:600; }
.track-offhint{ margin-top:.55rem; }
.sh-track a{ display:inline-block; font-size:.72rem; font-weight:600; padding:.14rem .5rem;
border-radius:999px; border:1px solid var(--line-strong); color:var(--ink-soft); white-space:nowrap; }
.sh-track a.on{ color:#1e7c46; border-color:rgba(30,124,70,.4); background:rgba(30,124,70,.07); }
.sh-track a:hover{ border-color:var(--sky-4); }
/* ─── Analytics compare mode ────────────────────────────────────────────── */
.cmp-scroll{ overflow-x:auto; }
.cmp-table{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:640px; }
.cmp-table th,.cmp-table td{ padding:.55rem .65rem; text-align:right; border-bottom:1px solid var(--line); }
.cmp-table th:first-child,.cmp-table td:first-child{ text-align:left; }
.cmp-table thead th{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; }
.cmp-table td{ font-variant-numeric:tabular-nums; }
.cmp-table .cmp-link strong{ display:block; }
.cmp-table .cmp-link small{ color:var(--ink-soft); }
.cmp-bar{ position:relative; background:var(--surface-2); border-radius:6px; height:8px; margin-top:.3rem; overflow:hidden; }
.cmp-bar i{ position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--sky-4),var(--sky-5,#2c6e9e)); border-radius:6px; }
.cmp-best{ color:#1e7c46; font-weight:700; }
/* ─── Find bar (tracking + links search/filter) ─────────────────────────── */
.find-bar{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:1rem; }
.find-bar input[type="search"]{ flex:1; min-width:220px; max-width:440px; }
.sheet-toolbar{ margin-bottom:.8rem; }
.find-chips{ display:flex; gap:.35rem; }
.find-chips button{
padding:.32rem .8rem; font-size:.82rem; border-radius:999px;
background:rgba(255,255,255,.75); color:var(--ink-soft);
border:1px solid var(--line-strong); box-shadow:none; filter:none;
}
.find-chips button:hover{ background:#fff; color:var(--ink); border-color:var(--sky-4); }
.find-chips button.active{
background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600;
}
#trackCount,#sheetCount{ white-space:nowrap; font-size:.82rem; }
.track-flash{ animation:trackflash 2.4s ease; }
@keyframes trackflash{
0%,55%{ box-shadow:0 0 0 3px var(--sky-4); }
100%{ box-shadow:none; }
}
/* ─── Blog (blog.skycanvas.online + /blog) ──────────────────────────────── */
.bl-hero{ padding-bottom:clamp(1.8rem,4vw,3rem); }
.bl-list{ padding-top:0; }
.bl-card h3{ font-size:1.12rem; font-weight:700; margin:0; letter-spacing:-.01em; line-height:1.3; }
.bl-card h3 a{ color:var(--ink); }
.bl-card h3 a:hover{ color:var(--accent-deep); }
.bl-date{
font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
color:var(--ink-faint); font-weight:500; margin:0;
}
.bl-frame{
display:block; overflow:hidden; border-radius:12px;
border:1px solid rgba(22,51,77,.06);
background:linear-gradient(135deg,var(--sky-1),var(--sky-2));
aspect-ratio:16/9;
}
.bl-frame img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.bl-card:hover .bl-frame img{ transform:scale(1.045); }
.bl-pager{
display:flex; align-items:center; justify-content:center; gap:1rem;
margin-top:1.6rem;
}
.bl-pager .btn{ text-decoration:none; font-size:.85rem; padding:.55rem 1.2rem; min-height:auto; }
.bl-empty{ max-width:520px; margin:2.5rem auto; text-align:center; }
/* Article page */
.bl-article{ max-width:720px; margin:0 auto; }
.bl-article-head{ text-align:center; margin:1rem 0 1.8rem; }
.bl-article-title{
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600;
font-size:clamp(2rem,5.4vw,3.2rem); line-height:1.08;
background:linear-gradient(180deg,#1c3c5c 0%, #40749e 55%, #6ea9d4 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
margin-bottom:.6rem;
}
.bl-article-sub{ color:var(--ink-soft); font-size:1.02rem; line-height:1.6; max-width:56ch; margin:0 auto; }
.bl-tags{ display:flex; justify-content:center; gap:.45rem; flex-wrap:wrap; margin:.9rem 0 0; }
.bl-hero-img{
margin:0 0 1.8rem; border-radius:var(--radius); overflow:hidden;
border:1px solid rgba(22,51,77,.07); box-shadow:var(--shadow-l);
}
.bl-hero-img img{ width:100%; height:auto; display:block; }
.bl-body{
background:var(--surface); border:1px solid rgba(22,51,77,.07);
border-radius:var(--radius); box-shadow:var(--shadow);
padding:clamp(1.4rem,4vw,2.6rem);
font-size:1rem; line-height:1.75; color:var(--ink);
}
.bl-body > * + *{ margin-top:1em; }
.bl-body h2{
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600;
font-size:1.7rem; line-height:1.15; margin-top:1.6em;
}
.bl-body h3{ font-size:1.15rem; font-weight:700; letter-spacing:-.01em; margin-top:1.4em; }
.bl-body a{ color:var(--accent); font-weight:500; }
.bl-body a:hover{ color:var(--accent-deep); text-decoration:underline; }
.bl-body ul, .bl-body ol{ padding-left:1.4rem; }
.bl-body li + li{ margin-top:.35em; }
.bl-body img{ border-radius:var(--radius-m); border:1px solid var(--line); }
.bl-body blockquote{
border-left:3px solid var(--accent); background:var(--sky-1);
border-radius:0 var(--radius-m) var(--radius-m) 0;
padding:.85rem 1.15rem; margin:1.2em 0;
font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
font-size:1.15rem; line-height:1.5;
}
.bl-body blockquote p{ margin:0; }
.bl-body code{
background:var(--surface-2); padding:.1rem .35rem; border-radius:5px;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;
}
.bl-body pre{
background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-s);
padding:.9rem 1rem; overflow-x:auto; font-size:.85rem; line-height:1.6;
}
.bl-body pre code{ background:transparent; padding:0; }
.bl-body hr{ border:0; border-top:1px dashed var(--line-strong); margin:1.6em 0; }
.bl-more{ max-width:960px; margin:0 auto; }
/* ─── UI refresh 2026-07: toasts, shortcuts, palette, skeletons ──────────── */
/* Page entrance: opacity only (no transform, keeps fixed children stable) */
@keyframes pageIn{ from{ opacity:0 } to{ opacity:1 } }
.wrap{ animation:pageIn .28s ease both; }
/* Button press feedback */
button:active, .btn:active{ transform:translateY(1px); }
.an-range button:active{ transform:none; }
/* kbd chips */
kbd{
display:inline-block; min-width:1.45em; text-align:center;
font-family:'Inter',system-ui,sans-serif; font-size:.7rem; font-weight:600;
color:var(--ink-soft); background:var(--surface);
border:1px solid var(--line-strong); border-bottom-width:2px;
border-radius:6px; padding:.14rem .38rem; line-height:1.2;
box-shadow:0 1px 0 rgba(22,51,77,.04);
}
/* Toasts (top right, stacked) */
.toast-stack{
position:fixed; z-index:120;
top:calc(var(--nav-h) + .8rem);
right:max(1rem, env(safe-area-inset-right));
display:flex; flex-direction:column; gap:.5rem;
pointer-events:none;
max-width:min(92vw, 380px);
}
.toast{
pointer-events:auto;
display:flex; align-items:flex-start; gap:.6rem;
background:var(--surface); color:var(--ink);
border:1px solid var(--line); border-left:3px solid var(--accent);
border-radius:12px; padding:.7rem .9rem;
box-shadow:var(--shadow-l);
font-size:.88rem; line-height:1.45;
animation:toastIn .22s cubic-bezier(.2,.7,.3,1.1) both;
}
.toast.ok{ border-left-color:var(--ok); }
.toast.err{ border-left-color:var(--danger); }
.toast.out{ animation:toastOut .18s ease both; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(14px) } to{ opacity:1; transform:none } }
@keyframes toastOut{ from{ opacity:1 } to{ opacity:0; transform:translateX(10px) } }
.toast .toast-x{
background:transparent; border:0; box-shadow:none; padding:0 0 0 .2rem; min-height:auto;
color:var(--ink-faint); cursor:pointer; font-size:1rem; line-height:1;
}
.toast .toast-x:hover{ color:var(--ink); filter:none; transform:none; }
/* Command palette + shortcut help (shared overlay skin) */
.cmdk{
position:fixed; inset:0; z-index:110;
display:flex; justify-content:center; align-items:flex-start;
padding:min(14vh,120px) 1rem 1rem;
}
.cmdk-backdrop{
position:absolute; inset:0; background:rgba(22,51,77,.35);
backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
animation:pageIn .15s ease both;
}
.cmdk-card{
position:relative; width:100%; max-width:560px;
background:var(--surface); border-radius:var(--radius);
border:1px solid rgba(22,51,77,.08);
box-shadow:var(--shadow-l);
overflow:hidden;
animation:cmdkIn .18s cubic-bezier(.2,.7,.3,1.1) both;
}
@keyframes cmdkIn{ from{ opacity:0; transform:translateY(-8px) scale(.985) } to{ opacity:1; transform:none } }
.cmdk-input-row{
display:flex; align-items:center; gap:.6rem;
padding:.85rem 1rem; border-bottom:1px solid var(--line);
}
.cmdk-input-row svg{ color:var(--ink-faint); }
.cmdk-input{
flex:1; border:0; outline:none; box-shadow:none; background:transparent;
font:inherit; font-size:1rem; color:var(--ink); padding:0; min-height:auto;
}
.cmdk-input::placeholder{ color:var(--ink-faint); }
.cmdk-list{
list-style:none; margin:0; padding:.4rem;
max-height:min(46vh, 380px); overflow-y:auto;
}
.cmdk-item{
display:flex; align-items:center; gap:.7rem;
padding:.6rem .7rem; border-radius:10px; cursor:pointer;
color:var(--ink); font-size:.92rem;
}
.cmdk-item svg{ width:18px; height:18px; color:var(--ink-soft); flex:0 0 auto; }
.cmdk-item .cmdk-kbds{ margin-left:auto; display:flex; gap:.25rem; }
.cmdk-item.sel{ background:var(--sky-1); }
.cmdk-item.sel svg{ color:var(--accent-deep); }
.cmdk-group{
font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--ink-faint); font-weight:600; padding:.55rem .7rem .25rem;
}
.cmdk-empty{ padding:1rem .7rem 1.2rem; color:var(--ink-faint); font-size:.9rem; text-align:center; }
.cmdk-foot{
display:flex; gap:1rem; align-items:center;
padding:.55rem 1rem; border-top:1px solid var(--line);
background:var(--surface-2); font-size:.72rem; color:var(--ink-faint);
}
.cmdk-foot span{ display:inline-flex; gap:.3rem; align-items:center; }
/* Shortcut help grid */
.kbd-help-grid{
display:grid; grid-template-columns:1fr 1fr; gap:.2rem 1.6rem;
padding:.9rem 1.1rem 1.1rem;
}
@media (max-width:560px){ .kbd-help-grid{ grid-template-columns:1fr; } }
.kbd-help-row{
display:flex; align-items:center; justify-content:space-between; gap:1rem;
padding:.42rem 0; font-size:.88rem; color:var(--ink-soft);
}
.kbd-help-row .kbds{ display:flex; gap:.25rem; flex:0 0 auto; }
.kbd-help-head{
display:flex; align-items:center; justify-content:space-between;
padding:.9rem 1.1rem .3rem;
}
.kbd-help-head h2{ margin:0; font-size:1.05rem; font-weight:600; }
/* Navbar palette trigger */
.nav-cmdk{
display:inline-flex; align-items:center; gap:.45rem;
border:1px solid var(--line-strong); border-radius:999px;
padding:.42rem .8rem !important;
font-size:.78rem !important; letter-spacing:.02em !important; text-transform:none !important;
color:var(--ink-faint);
}
.nav-cmdk:hover{ border-color:var(--sky-4); color:var(--ink); background:var(--surface) !important; }
.nav-cmdk kbd{ font-size:.62rem; padding:.08rem .3rem; }
@media (max-width:720px){ .nav-cmdk kbd{ display:none; } }
/* Loading skeleton: KPI numbers shimmer while their scope is fetching */
@keyframes shimmer{ from{ background-position:200% 0 } to{ background-position:-200% 0 } }
.an-loading .kpi-value{
color:transparent; border-radius:8px; min-height:1em; max-width:4.5ch;
background:linear-gradient(90deg,var(--surface-3) 25%,var(--sky-1) 50%,var(--surface-3) 75%);
background-size:200% 100%;
animation:shimmer 1.1s linear infinite;
}
/* Dashboard "?" hint + quick-action kbd chips */
.kbd-hint{
display:inline-flex; align-items:center; gap:.4rem;
background:transparent; border:1px dashed var(--line-strong); box-shadow:none;
border-radius:999px; padding:.4rem .8rem; min-height:auto;
font-size:.76rem; color:var(--ink-faint); cursor:pointer;
}
.kbd-hint:hover{ color:var(--ink); border-color:var(--sky-4); filter:none; transform:none; }
@media (hover:none){ .kbd-hint{ display:none; } }
.shortcut .sc-kbd{ margin-left:auto; flex:0 0 auto; opacity:.75; }
@media (hover:none){ .shortcut .sc-kbd{ display:none; } }
@media (prefers-reduced-motion:reduce){
.wrap, .toast, .cmdk-card, .cmdk-backdrop{ animation:none; }
.an-loading .kpi-value{ animation:none; }
}
.nav-cmdk svg{ width:14px; height:14px; }
.cmdk-input-row svg{ width:18px; height:18px; flex:0 0 auto; }
@media (max-width:720px){ .nav-cmdk span{ display:none; } .nav-cmdk{ padding:.42rem .55rem !important; } }
.nav-cmdk{ white-space:nowrap; }
.nav-cmdk kbd{ white-space:nowrap; }
/* ─── Navbar dropdowns (decram the bar) ──────────────────────────────────── */
.nav-dd{ position:relative; display:inline-flex; }
.nav-dd-btn{
display:inline-flex; align-items:center; gap:.3rem;
background:transparent; border:0; box-shadow:none; cursor:pointer; min-height:auto;
font-family:inherit; font-weight:400;
font-size:.76rem; letter-spacing:.17em; text-transform:uppercase;
color:var(--ink-soft); padding:.68rem .9rem; border-radius:9px;
transition:background .15s, color .15s;
}
.nav-dd-btn:hover{ background:rgba(127,184,221,.16); color:var(--ink); filter:none; transform:none; }
.nav-dd-btn.active{ color:var(--ink); }
.nav-dd-caret{ width:12px; height:12px; transition:transform .15s; }
.nav-dd.open .nav-dd-caret{ transform:rotate(180deg); }
.nav-dd-menu{
position:absolute; top:calc(100% + 6px); left:50%;
transform:translateX(-50%) translateY(-4px);
min-width:210px; background:var(--surface); border:1px solid var(--line);
border-radius:12px; box-shadow:var(--shadow-l); padding:.35rem;
opacity:0; pointer-events:none; z-index:60;
transition:opacity .14s ease, transform .14s ease;
}
.nav-dd.open .nav-dd-menu{ opacity:1; pointer-events:auto; transform:translateX(-50%); }
@media (hover:hover){
.nav-dd:hover .nav-dd-menu{ opacity:1; pointer-events:auto; transform:translateX(-50%); }
.nav-dd:hover .nav-dd-caret{ transform:rotate(180deg); }
}
.nav-links .nav-dd-menu a{
display:block; font-size:.82rem; letter-spacing:.02em; text-transform:none;
padding:.55rem .7rem; border-radius:8px; color:var(--ink-soft);
}
.nav-links .nav-dd-menu a:hover{ background:var(--sky-1); color:var(--ink); }
.nav-links .nav-dd-menu a.active{ color:var(--ink); background:var(--surface-3); }
.nav-links .nav-dd-menu a.active::after{ display:none; }
/* Mobile: groups flatten back into the stacked menu */
@media (max-width:720px){
.nav-dd{ display:block; }
.nav-dd-btn{ display:none; }
.nav-dd-menu{
position:static; transform:none; opacity:1; pointer-events:auto;
box-shadow:none; border:0; padding:0; min-width:0; background:transparent;
}
.nav-links .nav-dd-menu a{
font-size:.9rem; padding:.95rem .8rem;
border-bottom:1px solid rgba(22,51,77,.06); border-radius:8px;
}
}
/* Search pill: icon-only below 1100px so it never crowds the brand */
@media (max-width:1099px){
.nav-cmdk span, .nav-cmdk kbd{ display:none; }
.nav-cmdk{ padding:.42rem .55rem !important; }
}
/* ─── Brand Kit page ─────────────────────────────────────────────────────── */
.brand-intro{ max-width:640px; margin:0 0 1.2rem; font-size:.92rem; line-height:1.55; }
.brand-profile{ margin-bottom:1.4rem; }
.bk-status{
font-size:.76rem; color:var(--accent); font-weight:500;
animation:pulseSoft 1.2s ease-in-out infinite;
}
@keyframes pulseSoft{ 50%{ opacity:.45; } }
.bk-plist{ margin:.4rem 0 0; }
.bk-prow{ display:flex; gap:.9rem; padding:.35rem 0; font-size:.9rem; }
.bk-prow dt{
flex:0 0 108px; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
color:var(--ink-soft); font-weight:500; padding-top:.15rem;
}
.bk-prow dd{ margin:0; color:var(--ink); line-height:1.5; min-width:0; }
.bk-swatches{ display:inline-flex; gap:.3rem; align-items:center; }
.bk-swatch{
width:16px; height:16px; border-radius:5px; display:inline-block;
border:1px solid rgba(22,51,77,.15);
}
.bk-swatches-lg .bk-swatch{ width:26px; height:26px; border-radius:8px; }
.bk-phrases{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; }
.bk-phrase{
font-family:'Cormorant Garamond',serif; font-style:italic; font-size:.95rem;
background:var(--surface-2); border:1px solid var(--line);
padding:.3rem .7rem; border-radius:999px; color:var(--ink-soft);
}
.bk-notes{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line);
display:flex; flex-direction:column; gap:.5rem; }
.bk-notes label{ font-size:.85rem; }
.bk-notes textarea{
border:1px solid var(--line-strong); border-radius:10px; padding:.6rem .8rem;
font:inherit; font-size:.9rem; color:var(--ink); background:var(--surface);
resize:vertical;
}
.bk-notes .btn{ align-self:flex-start; font-size:.82rem; padding:.5rem 1rem; min-height:auto; }
.bk-h2{ font-size:1.15rem; margin:0 0 .8rem; }
.bk-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.bk-card{
background:var(--surface); border:1px solid rgba(22,51,77,.07); border-radius:var(--radius-m);
box-shadow:var(--shadow-s); overflow:hidden;
display:flex; flex-direction:column;
transition:box-shadow .18s;
}
.bk-card:hover{ box-shadow:var(--shadow); }
.bk-thumb{ aspect-ratio:4/3; background:var(--surface-3); }
.bk-thumb img{ width:100%; height:100%; object-fit:cover; }
.bk-meta{ padding:.7rem .8rem .3rem; display:flex; flex-direction:column; gap:.4rem; }
.bk-name{
margin:0; font-size:.85rem; font-weight:500;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bk-row{ display:flex; align-items:center; gap:.6rem; justify-content:space-between; }
.bk-tone{ font-size:.78rem; margin:0; line-height:1.4;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bk-chip{
font-size:.68rem; font-weight:600; letter-spacing:.04em;
padding:.14rem .5rem; border-radius:6px;
}
.bk-chip.ok{ background:#e7f3ec; color:var(--ok); }
.bk-chip.err{ background:#fbe9ed; color:var(--danger); }
.bk-chip.busy{ background:var(--surface-3); color:var(--ink-soft);
animation:pulseSoft 1.2s ease-in-out infinite; }
.bk-actions{
display:flex; gap:.4rem; padding:.5rem .8rem .7rem; margin-top:auto;
}
.bk-actions button{
font-size:.76rem; padding:.35rem .7rem; min-height:auto; border-radius:8px;
}
.bk-actions .danger{ color:var(--danger); border-color:rgba(179,50,74,.35); }
.bk-actions .danger:hover{ background:#fbe9ed; }
.bk-empty p{ margin:.2rem 0; }
/* Closed dropdown menus must be unreachable by keyboard too, not just invisible */
.nav-dd-menu{ visibility:hidden; transition:opacity .14s ease, transform .14s ease, visibility .14s; }
.nav-dd.open .nav-dd-menu{ visibility:visible; }
@media (hover:hover){ .nav-dd:hover .nav-dd-menu{ visibility:visible; } }
@media (max-width:720px){ .nav-dd-menu{ visibility:visible; } }