*{box-sizing:border-box} :root{ --dnaA: #4aa3ff; --dnaB: #6d5dfe; --dnaC: #33cc99; --dnaGradient: linear-gradient(135deg, var(--dnaA), var(--dnaB), var(--dnaC)); --font-display:'Fraunces','Playfair Display',serif; --font-ui:system-ui,-apple-system,Segoe UI,Roboto,Arial; /* Active pack accent (drives premium intent pills) */ --pack-accent:#33cc99; --pack-accent2:#4aa3ff; /* Section accents (must stay in sync across UI) */ --create:#4aa3ff; --generate:#d6b35d; --post:#33cc99; /* Intent pill fills */ --pill-inspire:#4aa3ff; --pill-attn:#f5c84c; --pill-explain:#b07cff; --pill-activate:#33cc99; --pill-mix:#ff6bb3; --bg:#0b0f1a; --panel:#0f1627; --text:#e7ebff; --muted:#9aa6c6; --accent:#7a5cff; --accent2:#00d2ff; --line:rgba(255,255,255,0.10) } body{margin:0;font-family:var(--font-ui);background:radial-gradient(1200px 600px at 20% 0%, rgba(122,92,255,0.20), transparent 60%),radial-gradient(900px 500px at 90% 10%, rgba(0,210,255,0.18), transparent 55%), var(--bg); color:var(--text);} .topbar{ position: sticky; top: 0; z-index: 50; padding: 10px 14px; background: rgba(6,10,18,.72); border-bottom: 1px solid rgba(255,255,255,.06); box-shadow: 0 10px 30px rgba(0,0,0,.35); } .logo.app-icon, .app-icon{width:54px;height:54px;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.45);flex:0 0 auto;} .app-icon img{width:100%;height:100%;display:block;} .logo.app-icon img, .app-icon img{ width:100%; height:100%; display:block; border-radius:12px; } .brand{display:flex;gap:14px;align-items:center} .logo{display:flex;align-items:center;justify-content:center;} .title .h1{font-weight:700} .title .h2{font-size:12px;color:var(--muted)} .topbar-right{display:flex;gap:14px;align-items:center} .toggle{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px} /* TIPs: clean + Post-green highlight (no haze) */ #tipsToggle{accent-color: var(--post);} label.toggle span{ color: var(--post); font-weight: 600; position:relative; padding:3px 10px 3px 26px; border-radius:999px; background: rgba(46,204,113,0.12); box-shadow: inset 0 0 0 1px rgba(46,204,113,0.24); } .toggle span::before{content:"πŸ’‘";margin-right:10px;} /* minimalist lamp icon */ label.toggle span::before{ content:""; position:absolute; left:9px; top:50%; width:12px; height:12px; transform:translateY(-50%); background: currentColor; opacity:.95; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } .ticker{min-width:320px;max-width:520px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--line);padding:10px 12px;border-radius:12px;background:rgba(15,22,39,0.6);color:var(--text);font-size:13px} .build-badge{ font-size:11px; font-weight:800; letter-spacing:.9px; padding:7px 12px; border-radius:999px; text-transform:uppercase; color:rgba(255,255,255,0.92); background:linear-gradient(135deg, rgba(122,92,255,0.16), rgba(0,210,255,0.10)); border:1px solid rgba(255,255,255,0.14); box-shadow:0 12px 32px rgba(0,0,0,0.35), 0 0 24px rgba(122,92,255,0.16);white-space:nowrap; } .build-badge span{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight:800; opacity:.95;} .grid{display:grid;grid-template-columns: 11fr 5fr 6fr;gap:14px;padding:14px 14px 90px} .panel{ position:relative; /* Keep a single source of truth for all rounded frames */ --radius: 18px; border-radius: var(--radius); background:rgba(15,22,39,0.70); padding:12px; overflow:hidden; /* accent defaults (overridden by .create/.generate/.post) */ --panel-accent: rgba(255,255,255,.22); /* Premium frame (double line requested) */ border:2px solid var(--panel-accent); /* Keep only depth shadow; no extra outline layer (prevents "double layers"). */ box-shadow: 0 10px 24px rgba(0,0,0,.28); } /* Inner line (double border) */ .panel::after{ content:""; position:absolute; /* Keep the inner line perfectly continuous: radius must match inset */ inset:4px; border-radius: calc(var(--radius) - 4px); /* 18px outer radius - 4px inset */ border:1px solid var(--panel-accent); opacity:.85; pointer-events:none; } /* Preview/Post pane uses the exact same double-frame system as OutPut. Only the accent color differs (gold -> green). */ .panel.preview{ --panel-accent: var(--post); } .panel-title{font-family:var(--font-display);font-weight:700;margin-bottom:10px;letter-spacing:.3px;position:relative} .block{padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(12,18,34,0.65);margin-bottom:10px} .label{font-size:12px;color:var(--muted);margin-bottom:6px} .muted{color:var(--muted);font-weight:500} textarea,select{width:100%;border:1px solid rgba(255,255,255,0.12);border-radius:12px;background:rgba(0,0,0,0.25);color:var(--text);padding:10px;font-size:13px;outline:none} .tabs{display:flex;flex-wrap:wrap;gap:8px} .tab{border:1px solid rgba(255,255,255,0.14);background:rgba(0,0,0,0.2);color:var(--text);padding:8px 10px;border-radius:999px;font-size:13px} .tab.active{border-color:rgba(122,92,255,0.8);box-shadow:0 0 0 3px rgba(122,92,255,0.18) inset} .tab:disabled{opacity:0.45;cursor:not-allowed} button{border:1px solid rgba(255,255,255,0.14);background:rgba(0,0,0,0.25);color:var(--text);padding:10px 12px;border-radius:12px;cursor:pointer} .primary{background:linear-gradient(135deg, rgba(122,92,255,0.9), rgba(0,210,255,0.75));border:none;font-weight:700} .ghost{background:transparent;border:1px solid rgba(255,255,255,0.18)} .ghost:hover{background:rgba(255,255,255,0.06)} .danger{background:rgba(255,65,105,0.10);border:1px solid rgba(255,65,105,0.35)} .danger:hover{background:rgba(255,65,105,0.18)} .label-row{display:flex;align-items:center;justify-content:space-between;gap:10px} .visual-actions{display:flex;gap:8px} /* Visual upload label behaves like a button */ .visual-actions .uploadBtn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;user-select:none} .row{display:flex;gap:10px;margin-top:10px} .tip{font-weight: 500; margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(20,60,40,0.22);border:1px solid rgba(60,220,140,0.35);border-left:4px solid rgba(60,220,140,0.9);color:rgba(90,255,175,0.95);box-shadow: inset 0 -10px 18px rgba(60,220,140,0.12), 0 0 0 1px rgba(60,220,140,0.12);} .upgrade-note{margin-top:12px;color:var(--muted);font-size:12px;display:flex;gap:10px;align-items:center} .badge{font-size:11px;padding:4px 8px;border-radius:999px;background:rgba(255,183,3,0.15);border:1px solid rgba(255,183,3,0.35);color:rgba(255,183,3,0.95)} .visuals{display:grid;grid-template-columns: 11fr 5fr 6fr;gap:10px} .visual{display:flex;gap:10px;align-items:center;border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:8px;background:rgba(0,0,0,0.20)} .visual img{width:52px;height:52px;border-radius:12px;border:1px solid rgba(255,255,255,0.10)} .phone{border:1px solid rgba(255,255,255,0.12);border-radius:24px;background:rgba(0,0,0,0.35);padding:12px} .phone-top{display:flex;align-items:center;gap:8px;padding:6px 6px 10px} .ig-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.16)} .phone-title{margin-left:auto;color:var(--muted);font-size:12px} .post{border:1px solid rgba(215,219,224,0.55);border-radius:18px;overflow:hidden;background:rgba(0,0,0,0.28)} .carousel{display:grid;grid-template-columns: 40px 1fr 40px;align-items:stretch} .media{background:#000} .media img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block} .nav{height:100%;min-height:260px;border:none;border-left:1px solid rgba(255,255,255,0.06);border-right:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.30);font-size:22px} .nav:disabled{opacity:0.35} .dots{display:flex;gap:6px;justify-content:center;padding:10px;background:rgba(0,0,0,0.20)} .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.20)} .dot.active{background:rgba(0,210,255,0.85)} .meta{padding:12px} .user{font-weight:700;font-size:13px} .snippet{margin-top:8px;font-size:13px;line-height:1.4;color:rgba(231,235,255,0.92)} .more{margin-top:6px;font-size:12px;color:rgba(0,210,255,0.85)} .footer-note{padding:10px 12px;border-top:1px solid rgba(255,255,255,0.07);font-size:11px;color:var(--muted);background:rgba(0,0,0,0.18)} /* ───────────────────────────────────────────────────────────── Platform post UI (Instagram / Facebook / X) inside Preview ───────────────────────────────────────────────────────────── */ .post-header{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(0,0,0,0.22);border-bottom:1px solid rgba(255,255,255,0.08)} .post-header .avatar{width:34px;height:34px;border-radius:999px;background:linear-gradient(135deg, rgba(122,92,255,0.85), rgba(0,210,255,0.75));box-shadow:0 0 0 2px rgba(255,255,255,0.06) inset} .post-header .ph-text{flex:1;min-width:0} .ph-line1{display:flex;gap:8px;align-items:baseline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ph-name{font-weight:800;font-size:13px} .ph-handle{font-size:12px;color:rgba(231,235,255,0.70)} .post[data-platform="facebook"] .ph-handle{display:none} .post[data-platform="x"] .ph-handle{display:none} .ph-line2{font-size:11px;color:rgba(231,235,255,0.62);margin-top:2px} .ph-menu{margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,0.10);padding:6px 9px;border-radius:10px;color:rgba(231,235,255,0.80)} .ph-menu:hover{background:rgba(255,255,255,0.06)} .media{position:relative} .preview-empty{display:none;position:absolute;inset:0;display:grid;place-items:center;color:rgba(231,235,255,0.70);font-size:12px;padding:16px;text-align:center} /* Subtle glass sheen overlay */ .sheen{position:absolute;inset:-10%;pointer-events:none;mix-blend-mode:screen;opacity:.22;transform:translateX(-30%) rotate(-12deg);background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0.06) 55%, transparent 100%)} .phone.chrome:hover .sheen{opacity:.28;transform:translateX(-10%) rotate(-12deg);transition:transform 900ms ease, opacity 900ms ease} .platform-ui{background:rgba(0,0,0,0.20)} .platform-ui .ui{display:none} .post[data-platform="instagram"] .platform-ui .ui[data-ui="instagram"], .post[data-platform="facebook"] .platform-ui .ui[data-ui="facebook"], .post[data-platform="x"] .platform-ui .ui[data-ui="x"], .post[data-platform="tiktok"] .platform-ui .ui[data-ui="tiktok"]{display:block} /* TikTok (Preview v2) */ .post[data-platform="tiktok"]{position:relative} .post[data-platform="tiktok"] .post-header{display:none} .post[data-platform="tiktok"] .footer-note{display:none} .post[data-platform="tiktok"] .platform-ui{background:transparent} .post[data-platform="tiktok"] .platform-ui .ui.tt{position:absolute;inset:0;display:block;pointer-events:none} .post[data-platform="tiktok"] .carousel{grid-template-columns:1fr} .post[data-platform="tiktok"] .nav{display:none} .post[data-platform="tiktok"] .media img{height:560px} .ui.tt{color:#fff} .tt-top{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:center;gap:10px;font-size:13px;font-weight:700;pointer-events:none;text-shadow:0 6px 16px rgba(0,0,0,0.55)} .tt-tabs{display:flex;gap:10px;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.14);font-weight:600} .tt-tabs .sep{opacity:.55} .tt-tabs .on{opacity:1} .tt-search{position:absolute;right:14px;top:0;width:30px;height:30px;border-radius:999px;display:grid;place-items:center;background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.12)} .tt-right{position:absolute;right:12px;bottom:120px;display:flex;flex-direction:column;gap:14px;align-items:center;pointer-events:auto} .tt-avatar{width:46px;height:46px;border-radius:999px;background:linear-gradient(135deg, rgba(122,92,255,0.85), rgba(0,210,255,0.75));box-shadow:0 10px 24px rgba(0,0,0,0.45);position:relative;border:2px solid rgba(255,255,255,0.70)} .tt-avatar .plus{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:999px;display:grid;place-items:center;background:#ff2d55;border:2px solid rgba(0,0,0,0.25);font-weight:900;font-size:14px} .tt-act{pointer-events:auto;background:rgba(0,0,0,0.18);border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:8px 8px;width:54px;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;line-height:1} .tt-act .n{font-size:11px;font-weight:800;opacity:.95} .tt-disc{width:42px;height:42px;border-radius:999px;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), rgba(0,0,0,0.65) 60%), conic-gradient(from 0deg, rgba(255,255,255,0.15), rgba(0,0,0,0.75), rgba(255,255,255,0.15));border:2px solid rgba(255,255,255,0.25);box-shadow:0 10px 24px rgba(0,0,0,0.45)} .tt-bottom{position:absolute;left:12px;right:90px;bottom:56px;pointer-events:none;text-shadow:0 6px 16px rgba(0,0,0,0.65)} .tt-user{font-weight:900;font-size:14px} .tt-caption{margin-top:6px;font-size:13px;line-height:1.35;opacity:.95;max-height:52px;overflow:hidden} .tt-music{margin-top:8px;font-size:12px;display:flex;gap:8px;align-items:center;opacity:.92} .tt-music .note{opacity:.9} .tt-music .track{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tt-nav{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:space-around;font-size:11px;opacity:.92;pointer-events:none;text-shadow:0 6px 16px rgba(0,0,0,0.65)} .tt-nav .plus{font-size:18px;font-weight:900;margin-top:-4px} /* Instagram */ .ig-actions{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 8px} .ig-left,.ig-right{display:flex;gap:10px;align-items:center} .iconbtn{background:transparent;border:1px solid rgba(255,255,255,0.10);padding:6px 8px;border-radius:10px;font-size:13px;line-height:1} .iconbtn:hover{background:rgba(255,255,255,0.06)} .ig-meta{padding:0 12px 12px} .ig-likes{font-size:12px;color:rgba(231,235,255,0.86)} .ig-likes .num{font-weight:800} .ig-caption{margin-top:6px;font-size:13px;line-height:1.4;color:rgba(231,235,255,0.92)} .ig-caption .u{font-weight:800;margin-right:6px} .ig-more{margin-top:6px;font-size:12px;color:rgba(0,210,255,0.85)} /* Facebook */ .fb-reactions{display:flex;align-items:center;gap:8px;padding:10px 12px 6px;font-size:12px;color:rgba(231,235,255,0.82)} .fb-reactions .pill{padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04)} .fb-reactions .sep{opacity:.5} .fb-reactions .muted{color:rgba(231,235,255,0.62)} .fb-caption{padding:0 12px 10px;font-size:13px;line-height:1.45;color:rgba(231,235,255,0.92);white-space:pre-line} .fb-actions{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px 12px;border-top:1px solid rgba(255,255,255,0.08)} .fb-btn{flex:1;min-width:94px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);padding:8px 10px;border-radius:12px;font-size:12px} .fb-btn:hover{background:rgba(255,255,255,0.08)} /* X */ .x-caption{padding:10px 12px 6px;white-space:pre-line} .x-line{font-size:12px;color:rgba(231,235,255,0.86)} .x-name{font-weight:900} .x-handle,.x-time{color:rgba(231,235,255,0.62)} .x-text{margin-top:6px;font-size:13px;line-height:1.45;color:rgba(231,235,255,0.92)} .x-actions{display:flex;justify-content:space-between;gap:8px;padding:10px 12px 12px;border-top:1px solid rgba(255,255,255,0.08)} .x-btn{background:transparent;border:1px solid rgba(255,255,255,0.10);padding:7px 10px;border-radius:12px;font-size:12px;display:flex;gap:6px;align-items:center;justify-content:center;flex:1} .x-btn:hover{background:rgba(255,255,255,0.06)} .x-btn .n{color:rgba(231,235,255,0.70);font-weight:700} /* ───────────────────────────────────────────────────────────── Premium chrome phone mockup (Preview) ───────────────────────────────────────────────────────────── */ .phone.chrome{ position:relative; border-radius:34px; padding:0; background:linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.05) 18%, rgba(0,0,0,0.35) 55%, rgba(255,255,255,0.08) 85%, rgba(255,255,255,0.18)); border:1px solid rgba(255,255,255,0.22); box-shadow: 0 22px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,210,255,0.10) inset, 0 0 0 2px rgba(122,92,255,0.10) inset; } .phone.chrome::before{ content:""; position:absolute; inset:8px; border-radius:28px; background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.15)); pointer-events:none; } .phone-bezel{ position:relative; margin:12px; border-radius:26px; background:rgba(0,0,0,0.60); border:1px solid rgba(255,255,255,0.10); overflow:hidden; } /* Antenna lines (subtle, high-end realism) */ .phone.chrome .phone-bezel::before{ content:""; position:absolute; left:10px; right:10px; top:10px; height:2px; border-radius:999px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent); opacity:.55; pointer-events:none; } .phone.chrome .phone-bezel::after{ content:""; position:absolute; left:10px; right:10px; bottom:12px; height:2px; border-radius:999px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); opacity:.5; pointer-events:none; } /* Micro-screws near bottom edge */ .phone.chrome .screen::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:0; pointer-events:none; box-shadow: 58px calc(100% - 18px) 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); } .phone.chrome .phone-bezel .screws{ position:absolute; left:0; right:0; bottom:10px; height:12px; pointer-events:none; z-index:6; background: radial-gradient(circle at 28% 50%, rgba(40,40,45,0.95) 0 1.4px, rgba(255,255,255,0.28) 1.5px 1.9px, transparent 2.2px), radial-gradient(circle at 72% 50%, rgba(40,40,45,0.95) 0 1.4px, rgba(255,255,255,0.28) 1.5px 1.9px, transparent 2.2px); opacity:.65; } .screen{ position:relative; border-radius:24px; overflow:hidden; background:rgba(0,0,0,0.28); } .top-hardware{ position:absolute; top:8px; left:50%; transform:translateX(-50%); width:140px; height:22px; display:flex; align-items:center; justify-content:center; gap:12px; z-index:5; pointer-events:none; } .earpiece{ width:74px; height:8px; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,0.22), rgba(0,0,0,0.55)); border:1px solid rgba(255,255,255,0.12); box-shadow:0 1px 0 rgba(255,255,255,0.10) inset; } .front-cam{ width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 35% 35%, rgba(0,210,255,0.35), rgba(0,0,0,0.90) 65%); border:1px solid rgba(255,255,255,0.14); } .home-button{ height:54px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.35)); border-top:1px solid rgba(255,255,255,0.08); } .home-button::before{ content:""; width:46px; height:46px; border-radius:50%; background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.18), rgba(0,0,0,0.55) 70%); border:1px solid rgba(255,255,255,0.14); box-shadow: 0 0 0 1px rgba(0,0,0,0.65) inset, 0 2px 10px rgba(0,0,0,0.55); } /* Side buttons */ .side-buttons{ position:absolute; top:80px; display:flex; flex-direction:column; gap:10px; z-index:6; } .side-buttons.left{left:-2px} .side-buttons.right{right:-2px;top:105px} .side-btn{ width:6px; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,0.35), rgba(0,0,0,0.55)); border:1px solid rgba(255,255,255,0.12); box-shadow:0 1px 0 rgba(255,255,255,0.12) inset, 0 4px 12px rgba(0,0,0,0.35); } .side-btn.mute{height:28px} .side-btn.volume{height:44px} .side-btn.power{height:54px} /* Make the on-screen content breathe inside the bezel */ .phone.chrome .phone-top{padding:16px 12px 10px} .phone.chrome .post{border-radius:18px;margin:0 10px 10px} .phone.chrome .media img, .phone.chrome .nav{height:320px} .phone.chrome .nav{border-left:1px solid rgba(255,255,255,0.05);border-right:1px solid rgba(255,255,255,0.05)} @media (max-width:1100px){ .phone.chrome{margin-top:10px} } .status-ticker{position:fixed;left:0;right:0;bottom:0;/* no separator line */border-top:none;background:rgba(11,15,26,0.70);padding:10px 14px;display:flex;gap:14px;align-items:center} .activity-title-unused{font-weight:700} .status-line{color:rgba(231,235,255,0.85);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (max-width:1100px){.grid{grid-template-columns: 11fr 5fr 6fr;padding-bottom:120px}.ticker{min-width:180px}} /* Output row buttons */ .row{display:flex;gap:10px;flex-wrap:wrap;} #btnOpenVisuals{border:1px solid rgba(255,255,255,.2);} /* platform bar */ .platformbar{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.03);} .platform-tabs{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .ptab{padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.2);color:rgba(255,255,255,.9);cursor:pointer} .ptab.active{border-color:rgba(168,85,247,.55);box-shadow:0 0 0 2px rgba(168,85,247,.2) inset} .platform-note{font-size:12px;opacity:.85} #btnOpenPlatform{border:1px solid rgba(255,255,255,.2);} .status-ticker{position:sticky;bottom:0;margin-top:14px;padding:10px 14px;/* remove stray separator */border-top:none;background:rgba(0,0,0,.65);} .activity-title-unused{font-size:12px;opacity:.85;margin-bottom:6px} .status-line{font-size:12px} .activity-log-unused{list-style:none;padding:8px 0 0 0;margin:0;display:flex;flex-direction:column;gap:6px;max-height:120px;overflow:auto} .activity-log-unused li{font-size:12px;opacity:.9;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.03)} .secondary{padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:rgba(255,255,255,.92);cursor:pointer} .action-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .intent-panel{margin-top:10px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.03)} .intent-title{font-size:12px;opacity:.9;margin-bottom:8px} .intent-options{display:flex;gap:8px;flex-wrap:wrap} .intent-note{margin-top:8px;font-size:12px;opacity:.8} .packsbar{grid-column:1/-1;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.03);margin-bottom:6px} .packStoreTitle{ margin: 8px 2px 10px; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: .3px; text-transform: none; opacity: 1; color: rgba(255,255,255,0.95); } .packs-row{display:flex;gap:10px;flex-wrap:wrap} .pack{padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.18);cursor:pointer;display:flex;flex-direction:column;gap:4px;min-width:170px} .pack.active{border-color:rgba(168,85,247,.55);box-shadow:0 0 0 2px rgba(168,85,247,.2) inset} /* Packs mockup row */ .packRow{display:flex;gap:12px;overflow:auto;padding:6px 2px 2px 2px;scrollbar-width:thin} .packCard{flex:0 0 auto;width:240px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);cursor:pointer;position:relative;overflow:hidden;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, opacity .15s ease} .packCard:focus{outline:2px solid rgba(166,120,255,.55);outline-offset:2px} .packCard:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.35)} .packCard .media{position:relative} .packCard img{width:100%;height:140px;object-fit:cover;display:block} .packCard .overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:10px 12px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.70));opacity:0;transition:opacity .15s ease;pointer-events:none} .packCard:hover .overlay{opacity:1} .packCard.locked .overlay{opacity:1;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.78))} .packCard .overlayTop{font-size:11px;letter-spacing:.2px;opacity:.95} .packCard .overlayHint{font-size:11px;line-height:1.25;opacity:.92;max-width:95%} .packCard .meta{padding:10px 12px;display:flex;flex-direction:column;gap:6px} .packCard .name{font-size:13px;font-weight:650;line-height:1.2} .packCard .sub{font-size:12px;opacity:.82;line-height:1.25} .packCard .row{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:2px} .packCard .badge{font-size:11px;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);opacity:.92;white-space:nowrap} .packCard .ctaMini{font-size:11px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.25);color:#fff;white-space:nowrap} .packCard.unlocked{border-color:rgba(34,197,94,.38)} .packCard.unlocked .ctaMini{border-color:rgba(34,197,94,.42)} .packCard.locked{opacity:.78} .packCard.locked:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55));pointer-events:none} .packCard.locked .ctaMini{border-color:rgba(250,204,21,.35)} .packCard.active{box-shadow:0 0 0 2px rgba(168,85,247,.30) inset, 0 14px 32px rgba(0,0,0,.35);border-color:rgba(168,85,247,.38)} .packCard[data-pack="free_starter"].unlocked{border-color:rgba(34,197,94,.55)} .packCard[data-pack="free_starter"] .badge{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10)} .create-block .create-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px;justify-content:space-between} .create-block .right-group{display:flex;gap:10px;align-items:center;margin-left:auto} .create-block .left-group{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .create-help{font-size:12px;opacity:.85;margin-top:6px;line-height:1.35} .intent-bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} /* Intent pills: OUTLINE style (matches panel framing) */ .intent{ position:relative; padding:10px 14px; border-radius:999px; border:0; cursor:pointer; user-select:none; font-weight:850; letter-spacing:.2px; /* original intent hues, toned by pack accents */ --base1:#4aa3ff; /* inspire */ --base2:#7a5cff; /* explain */ --c1: color-mix(in srgb, var(--base1) 55%, var(--pack-accent) 45%); --c2: color-mix(in srgb, var(--base2) 55%, var(--pack-accent2) 45%); /* no fill: glass */ background:rgba(0,0,0,.18); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.55); /* Single outline (no double line) */ border:2px solid var(--c2); box-shadow: 0 10px 22px rgba(0,0,0,.30); transition:transform .12s ease, filter .12s ease, box-shadow .12s ease; } .intent::before{ content:""; position:absolute; inset:0; border-radius:999px; /* keep gloss */ background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0)); opacity:.7; pointer-events:none; mix-blend-mode:overlay; } .intent:hover{transform:translateY(-1px);filter:brightness(1.05)} .intent.active{ box-shadow: 0 12px 28px rgba(0,0,0,.38); } /* Intent variants: keep original feel, but harmonized with pack tones */ .intent-inspire{--base1:#4aa3ff; --base2:#00d2ff;} .intent-attn{--base1:#f5b942; --base2:#ff9a3c;} .intent-explain{--base1:#a86cff; --base2:#7a5cff;} .intent-activate{--base1:#3ddc84; --base2:#22c55e;} .intent-mix{--base1:#ff6b9c; --base2:#ff3d7a;} .visuals-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;align-items:start} .visuals-order{border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px;background:rgba(255,255,255,.02)} .order-title{font-size:12px;opacity:.85;margin-bottom:8px} .order-list{display:flex;flex-direction:column;gap:8px} .order-item{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.03)} .order-item .id{font-size:12px;opacity:.9} .order-item .btns{display:flex;gap:6px} .order-item button{padding:6px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.25);color:#fff;cursor:pointer} .last-action{font-size:12px;opacity:.8;margin-top:6px;text-align:right} @media(max-width:1100px){.visuals-wrap{grid-template-columns:1fr}} .visual{position:relative} .order-badge{position:absolute;top:10px;left:10px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:rgba(168,85,247,.85);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;border:1px solid rgba(255,255,255,.18)} .order-item.drag-over{outline:2px dashed rgba(168,85,247,.55);background:rgba(168,85,247,.08)} .order-item.dragging{opacity:.6} .preview-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;opacity:.85;background:rgba(0,0,0,.25);border:1px dashed rgba(255,255,255,.18);border-radius:14px;} .media{position:relative;} #blockTov{display:none;} /* === Header (LOCKED / stable) === - Normal DOM flow (no absolute/fixed hacks) - Fixed height (600px) β€” user-set for now - with object-fit: cover - No "black gap"/letterboxing */ .hero{max-width:none;margin:12px 0 0; padding:0 14px;} .headerImg{ width:100%; height:600px; object-fit:cover; object-position:center; border-radius:16px; display:block; /* remove implicit dark letterbox backgrounds */ background:transparent; box-shadow:0 18px 60px rgba(0,0,0,.55); } /* Keep header height consistent across breakpoints for stability */ .flowStrip{margin:10px auto 0;display:flex;gap:10px;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);} .flowWord{ font-family:'Fraunces','Playfair Display',serif; font-weight:700; font-style:italic; /* slightly more "creative" without going childish */ font-size:19px; letter-spacing:1.1px; font-variation-settings: "opsz" 72, "SOFT" 70, "WONK" 1; color:var(--c,#e7ebff) !important; /* glow + crisp edge (safe fallback for browsers without color-mix) */ text-shadow: 0 0 1px rgba(0,0,0,.55), 0 0 14px rgba(122,92,255,.22), 0 0 18px color-mix(in srgb, var(--c,#7a5cff) 55%, transparent); } /* word color must match section block color vars */ .fw1{--c:var(--create);} .fw2{--c:var(--generate);} .fw3{--c:var(--post);} .flowSep{opacity:.55;} .packsBar{max-width:1180px;margin:10px auto 0; padding:0 12px;} .packsWrap{display:flex;gap:12px;align-items:center;justify-content:space-between;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px 12px;} .tabs{display:flex;gap:10px;flex-wrap:wrap;} .packTab{min-width:170px;text-align:left;border-radius:14px;padding:10px 12px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);color:#e9eef7;cursor:pointer;} .packTab.active{outline:2px solid rgba(166,120,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;} .packTab.locked{opacity:.75;} .packTop{font-weight:800;} .packSub{font-size:12px;opacity:.75;margin-top:4px;} .packState{font-size:12px;margin-top:6px;color:#7dffb0;} .packTab.locked .packState{color:#ffd27d;} .packSelect{min-width:240px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);color:#e9eef7;border-radius:12px;padding:10px 12px;} .lockedBanner{margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(255,196,0,.10);border:1px solid rgba(255,196,0,.25);color:#ffe7a8;} .lockedBanner{display:none;} .lockedBanner.show{display:block;} .hidden{display:none !important;} @media (max-width: 980px){ .packsWrap{flex-direction:column;align-items:stretch;} .packSelect{width:100%;} } /* ───────────────────────────────────────────────────────────── Preview v2 – iOS device mockup (reference: user screenshot) ───────────────────────────────────────────────────────────── */ .device-stage{ display:flex; justify-content:center; align-items:center; padding:22px; min-height:560px; border-radius:18px; /* Neutral stage: remove purple canvas behind the device */ background: radial-gradient(120% 140% at 20% 10%, rgba(255,255,255,0.07), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0)); border:1px solid rgba(255,255,255,0.08); } /* Premium preview shell (browser header + phone) */ .preview-shell{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; } /* Screenshot-render mode: rasterize the preview-shell into an so overlays are baked like a real screenshot */ .device-stage{ position:relative; } .preview-shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:40; border-radius:24px; pointer-events:none; filter: drop-shadow(0 18px 45px rgba(0,0,0,.55)); } .preview-shell.is-rasterized{ opacity:0; pointer-events:none; } .browserbar{ width:min(390px, 100%); border-radius:16px; background:rgba(10,10,14,0.72); border:1px solid rgba(255,255,255,0.18); box-shadow:0 18px 60px rgba(0,0,0,0.45);padding:10px 12px; } .bb-top{display:flex;align-items:center;justify-content:space-between;gap:10px;} .bb-left{display:flex;align-items:center;gap:10px;min-width:0;} .bb-icon{ width:26px;height:26px;border-radius:8px; display:inline-flex;align-items:center;justify-content:center; font-size:12px;font-weight:900;letter-spacing:.2px; background:linear-gradient(135deg, rgba(168,85,247,.75), rgba(59,130,246,.65)); color:#fff; } .bb-icon svg{width:16px;height:16px;display:block;color:#fff;} .bb-title{font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .bb-close{ width:28px;height:28px;border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff;cursor:default; } .bb-bottom{ margin-top:10px; display:flex;align-items:center;gap:10px; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.90); font-size:12px; } .bb-nav{opacity:.9;font-weight:900;} .bb-lock{opacity:.9;filter:grayscale(1);} .bb-url{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.92;} /* ───────────────────────────────────────────────────────────── Device (rebuilt from scratch) – single shell + clipped screen Goal: zero bleed, premium frame, predictable bounds. ───────────────────────────────────────────────────────────── */ .device{ width:100%; display:flex; justify-content:center; align-items:center; } .device-ios{ position:relative; width:min(390px, 100%); aspect-ratio: 9 / 19.5; border-radius:48px; background:linear-gradient(180deg, rgba(18,18,20,0.98), rgba(4,4,6,0.98)); border:1px solid rgba(255,255,255,0.18); box-shadow:0 24px 70px rgba(0,0,0,0.55); padding:12px; /* bezel thickness */ } /* Inner bezel highlight */ .device-ios::before{ content:""; position:absolute; inset:6px; border-radius:44px; box-shadow:0 0 0 1px rgba(255,255,255,0.10) inset; pointer-events:none; } /* Notch + top sensors */ .device-ios::after{ content:""; position:absolute; top:10px; left:50%; transform:translateX(-50%); width:172px; height:34px; border-radius:0 0 18px 18px; background:rgba(0,0,0,0.82); box-shadow:0 2px 8px rgba(0,0,0,0.35); pointer-events:none; } .device-screen{ position:relative; width:100%; height:100%; border-radius:38px; background:#fff; overflow:hidden; /* the key: everything stays inside */ } /* Home indicator */ .device-screen:after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:10px; width:130px; height:5px; border-radius:999px; background:rgba(0,0,0,0.20); pointer-events:none; } /* Paradepaard: platform UI has its own bottom bars; avoid the iOS home indicator overlay */ .platform-frame .device-screen:after{display:none;} /* Safe areas inside the screen for platform frames */ .device-screen .pf{ height:100%; display:flex; flex-direction:column; min-height:0; } /* iOS safe-area padding: keep content clear of notch + homebar */ .device-screen{padding-top:54px; padding-bottom:34px;} @media (max-width: 420px){ .device-ios{width:min(320px, 100%); border-radius:44px; padding:10px;} .device-ios::after{width:160px; height:32px;} .device-screen{border-radius:34px; padding-top:52px; padding-bottom:32px;} } .phone.ios{ padding:0; border:none; background:transparent; } .phone.ios .ios-shell{ position:relative; width:min(390px, 100%); aspect-ratio: 9 / 19.5; border-radius:44px; background:linear-gradient(180deg, rgba(20,20,22,0.92), rgba(6,6,8,0.96)); box-shadow:0 24px 70px rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.18); overflow:hidden; } .phone.ios .ios-shell::before{ content:""; position:absolute; inset:10px; border-radius:36px; /* Screen base: dark so we never show harsh white */ background:#0b0c10; box-shadow:0 0 0 1px rgba(255,255,255,0.08) inset; } /* Glass reflection for a more "real screenshot" look */ .phone.ios .ios-shell::after{ content:""; position:absolute; inset:6px; border-radius:36px; pointer-events:none; background: radial-gradient(120% 60% at 18% 8%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,.06) 70%, rgba(255,255,255,0) 100%); mix-blend-mode:screen; opacity:.55; } .phone.ios .ios-screen::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(120% 120% at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 72%, rgba(0,0,0,.55) 100%); opacity:.35; } .phone.ios .ios-status{ position:absolute; top:16px; left:0; right:0; z-index:6; display:flex; justify-content:space-between; align-items:center; padding:0 22px; font-size:12px; font-weight:700; color:rgba(255,255,255,0.86); pointer-events:none; } .phone.ios .ios-status-icons{ display:flex; gap:8px; align-items:center; } .phone.ios .ios-signal, .phone.ios .ios-wifi, .phone.ios .ios-battery{ display:inline-block; width:16px; height:10px; border-radius:2px; background:rgba(255,255,255,0.18); } .phone.ios .ios-battery{ width:22px; position:relative; } .phone.ios .ios-battery::after{ content:""; position:absolute; right:-3px; top:3px; width:2px; height:4px; border-radius:1px; background:rgba(0,0,0,0.35); } .phone.ios .ios-notch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:180px; height:30px; background:linear-gradient(180deg, rgba(0,0,0,0.92), rgba(0,0,0,0.98)); border-radius:0 0 22px 22px; z-index:7; } .phone.ios .ios-earpiece{ position:absolute; left:50%; top:10px; transform:translateX(-50%); width:62px; height:6px; border-radius:999px; background:rgba(255,255,255,0.20); } .phone.ios .ios-cam{ position:absolute; right:42px; top:9px; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 35% 35%, rgba(0,200,255,0.25), rgba(0,0,0,0.92) 70%); } .phone.ios .ios-screen{ position:absolute; inset:10px; border-radius:36px; overflow:hidden; /* geen hard wit: dark-mode basis + subtiele film grain voor "foto" feel */ background: radial-gradient(140% 90% at 50% 0%, rgba(255,255,255,.06) 0%, rgba(0,0,0,0) 55%), linear-gradient(180deg, #0b0f1a 0%, #070a12 60%, #05070d 100%); z-index:5; padding-top:54px; /* status + notch safe zone */ padding-bottom:26px; /* home indicator safe zone */ } /* Screen layout: platform-true frames (rebuilt per platform) */ #iosScreen{display:flex;flex-direction:column;height:100%;} /* platform frame container must participate in flex sizing */ #platformFrame{flex:1;min-height:0;display:flex;flex-direction:column;} .pf{display:flex;flex-direction:column;height:100%;background:#0b0f1a;color:#e9eefc;} /* Common bits */ .pf .appbar{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:800;} .pf .appbar .title{font-size:14px;} .pf .appbar .icons{display:flex;gap:10px;opacity:.85;font-weight:700;} /* Preview scroll safety: - Prevent content from ever sitting under the iOS home indicator - Keep everything clipped to the rounded screen (no bleed) */ .pf .scroll{ flex:1; overflow:auto; background:#0b0f1a; padding-bottom:64px; /* safe-area for homebar + rounded corners */ box-sizing:border-box; -webkit-overflow-scrolling:touch; } .pf .card{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);} .pf .row{display:flex;align-items:center;gap:10px;} .pf .avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg, rgba(59,130,246,.25), rgba(168,85,247,.25));border:1px solid rgba(0,0,0,.08);} .pf .meta{display:flex;flex-direction:column;line-height:1.1;} .pf .name{font-weight:800;font-size:12px;} .pf .handle{font-size:11px;opacity:.6;} /* Media container */ .pf .media{width:100%;border-radius:14px;overflow:hidden;background:#0b1220;border:1px solid rgba(0,0,0,.08);} .pf .media img{width:100%;height:100%;object-fit:cover;display:block;} .pf .media .preview-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;background:rgba(0,0,0,.20);color:#fff;border:none;border-radius:0;} /* Carousel bar (kept minimal; no overlay tricks) */ .pf .carouselbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px 0;} .pf .carouselbar .pv-nav{width:34px;height:28px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35);cursor:pointer;color:#e9eefc;} .pf .pv-dots{display:flex;gap:6px;justify-content:center;flex:1;} .pf .dot{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.18);} .pf .dot.active{background:rgba(0,0,0,.60);} /* Action rows */ .pf .actions{display:flex;align-items:center;justify-content:space-between;padding:10px 0 0;} .pf .actions .left{display:flex;gap:14px;} .pf .actions .ic{width:18px;height:18px;border-radius:5px;background:rgba(0,0,0,.10);} .pf .caption{padding:10px 0 0;font-size:12px;white-space:pre-wrap;} /* Instagram */ .pf-instagram .appbar .title{letter-spacing:.2px;} .pf-instagram .media{aspect-ratio:1/1;} /* Facebook */ .pf-facebook .appbar .title{font-weight:900;} .pf-facebook .media{aspect-ratio:4/5;} .pf-facebook .reactions{display:flex;justify-content:space-between;align-items:center;padding:10px 0 0;font-size:11px;opacity:.75;} /* LinkedIn */ .pf-linkedin .appbar .title{font-weight:900;} .pf-linkedin .media{aspect-ratio:1.91/1;} .pf-linkedin .subline{font-size:11px;opacity:.70;margin-top:2px;} /* X */ .pf-x .appbar .title{font-weight:900;} .pf-x .media{aspect-ratio:16/9;} /* TikTok (basic – stable first; overlay polish later) */ .pf-tiktok{background:#000;color:#fff;} .pf-tiktok .appbar{background:rgba(0,0,0,.95);border-bottom:1px solid rgba(255,255,255,.08);color:#fff;} .pf-tiktok .scroll{background:#000;} .pf-tiktok .card{border-bottom:none;} .pf-tiktok .media{aspect-ratio:9/16;border-radius:18px;border:1px solid rgba(255,255,255,.10);} .pf-tiktok .caption{color:rgba(255,255,255,.85);} /* ============================================================ PARADEPAARD PREVIEW v2 β€” platform-true DOM (pixel grid) Each template uses a single media slot (#pvMedia) + #previewImg Everything is clipped by .device-screen overflow:hidden. ============================================================ */ .pf{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;} .pf *{box-sizing:border-box;} /* Shared helpers */ .pf .preview-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;opacity:.70;} .pf #previewImg{width:100%;height:100%;object-fit:cover;display:block;} /* ───────── Instagram (Feed / post) β€” dark-mode screenshot look ───────── */ .pf-instagram{background:#0b0f17;color:#e9eef7;} .pf-instagram .ig-top{ height:44px;display:flex;align-items:center;justify-content:space-between; padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08); } .pf-instagram .ig-brand{font-weight:800;letter-spacing:-0.2px;} .pf-instagram .ig-top-icons{display:flex;gap:10px;align-items:center;color:rgba(233,238,247,.88);} .pf-instagram .ig-feed{flex:1;min-height:0;overflow:auto;} .pf-instagram .ig-post{padding:10px 0 8px;} .pf-instagram .ig-header{display:flex;align-items:center;gap:10px;padding:0 14px 10px;} .pf-instagram .ig-avatar{width:30px;height:30px;border-radius:999px;background:rgba(130,130,150,.28);} .pf-instagram .ig-meta{display:flex;flex-direction:column;line-height:1.15;} .pf-instagram .ig-name{font-size:13px;font-weight:800;} .pf-instagram .ig-handle{font-size:11px;color:rgba(233,238,247,.60);} .pf-instagram .ig-more{margin-left:auto;color:rgba(233,238,247,.60);font-weight:900;} .pf-instagram .ig-media{position:relative;margin:0 0 8px;} /* IG feed: 4:5 default (good for your pack visuals) */ .pf-instagram .ig-media{aspect-ratio:4/5;} .pf-instagram .ig-actions{display:flex;align-items:center;justify-content:space-between;padding:0 14px 8px;} .pf-instagram .ig-actions-left,.pf-instagram .ig-actions-right{display:flex;gap:12px;} .pf-instagram .ig-ic{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; background:transparent; color:rgba(255,255,255,.92); font-size:16px; line-height:1; user-select:none; } .pf-instagram .ig-ic svg{width:18px;height:18px;display:block;} .pf-instagram .ig-ic svg path,.pf-instagram .ig-ic svg rect,.pf-instagram .ig-ic svg circle{stroke:currentColor;} .pf-instagram .ig-caption{padding:0 14px;font-size:12px;line-height:1.35;color:rgba(233,238,247,.88);white-space:pre-wrap;} .pf-instagram .ig-caption .u{font-weight:900;color:rgba(233,238,247,.95);} .pf-instagram .ig-moretext{padding:6px 14px 0;font-size:11px;color:rgba(233,238,247,.48);} .pf-instagram .ig-carousel{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px 0;} .pf-instagram .pv-nav{width:34px;height:24px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);} .pf-instagram .pv-dots{display:flex;gap:6px;align-items:center;justify-content:center;flex:1;} .pf-instagram .dot{width:6px;height:6px;border-radius:999px;background:rgba(233,238,247,.22);} .pf-instagram .dot.on{background:rgba(233,238,247,.72);} /* ───────── Facebook (post) β€” dark-mode screenshot look ───────── */ .pf-facebook{background:#0b0f17;color:#e9eef7;} .pf-facebook .fb-top{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);} .pf-facebook .fb-brand{font-weight:900;} .pf-facebook .fb-top-icons{display:flex;gap:12px;color:rgba(233,238,247,.78);font-weight:800;} .pf-facebook .fb-feed{flex:1;min-height:0;overflow:auto;} .pf-facebook .fb-card{padding:10px 0 12px;} .pf-facebook .fb-header{display:flex;align-items:center;gap:10px;padding:0 14px 10px;} .pf-facebook .fb-avatar{width:32px;height:32px;border-radius:999px;background:rgba(130,130,150,.28);} .pf-facebook .fb-name{font-size:13px;font-weight:900;} .pf-facebook .fb-sub{font-size:11px;color:rgba(233,238,247,.60);} .pf-facebook .fb-more{margin-left:auto;color:rgba(233,238,247,.60);font-weight:900;} .pf-facebook .fb-media{position:relative;aspect-ratio:4/5;} .pf-facebook .fb-reactions{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 6px;font-size:11px;color:rgba(233,238,247,.62);} .pf-facebook .fb-actions{display:flex;justify-content:space-between;gap:10px;padding:6px 14px 0;border-top:1px solid rgba(255,255,255,.10);} .pf-facebook .fb-btn{flex:1;height:28px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:rgba(233,238,247,.85);} /* ───────── LinkedIn (post) β€” dark-mode screenshot look ───────── */ .pf-linkedin{background:#0b0f17;color:#e9eef7;} .pf-linkedin .li-top{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.10);} .pf-linkedin .li-brand{font-weight:900;} .pf-linkedin .li-top-icons{display:flex;gap:12px;color:rgba(233,238,247,.72);font-weight:800;} .pf-linkedin .li-feed{flex:1;min-height:0;overflow:auto;} .pf-linkedin .li-card{padding:10px 0 12px;} .pf-linkedin .li-header{display:flex;align-items:center;gap:10px;padding:0 14px 10px;} .pf-linkedin .li-avatar{width:34px;height:34px;border-radius:999px;background:rgba(130,130,150,.28);} .pf-linkedin .li-name{font-size:13px;font-weight:900;} .pf-linkedin .li-sub{font-size:11px;color:rgba(233,238,247,.60);} .pf-linkedin .li-media{position:relative;aspect-ratio:1.91/1;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);} .pf-linkedin .li-text{padding:0 14px 10px;font-size:12px;line-height:1.35;color:rgba(233,238,247,.88);white-space:pre-wrap;} .pf-linkedin .li-footer{display:flex;justify-content:space-between;gap:10px;padding:8px 14px 0;font-size:11px;color:rgba(233,238,247,.60);} /* ───────── X (tweet) β€” dark-mode screenshot look ───────── */ .pf-x{background:#0b0f17;color:#e9eef7;} .pf-x .x-top{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.10);} .pf-x .x-brand{font-weight:900;} .pf-x .x-feed{flex:1;min-height:0;overflow:auto;} .pf-x .x-card{padding:12px 14px 14px;} .pf-x .x-row{display:flex;gap:10px;align-items:flex-start;} .pf-x .x-avatar{width:34px;height:34px;border-radius:999px;background:rgba(130,130,150,.28);} .pf-x .x-meta{flex:1;} .pf-x .x-name{font-size:13px;font-weight:900;} .pf-x .x-handle{font-size:11px;color:rgba(233,238,247,.60);margin-top:1px;} .pf-x .x-text{margin-top:8px;font-size:12px;line-height:1.35;color:rgba(233,238,247,.88);white-space:pre-wrap;} .pf-x .x-media{position:relative;margin-top:10px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);} .pf-x .x-actions{display:flex;justify-content:space-between;gap:10px;margin-top:10px;color:rgba(233,238,247,.60);} .pf-x .x-ic{width:16px;height:16px;border-radius:4px;background:rgba(255,255,255,.14);} /* ───────── TikTok (video) ───────── */ .pf-tiktok{background:#000;color:#fff;} .pf-tiktok .tt-top{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.10);} .pf-tiktok .tt-brand{font-weight:900;letter-spacing:-0.2px;} .pf-tiktok .tt-stage{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;padding:10px 12px;} .pf-tiktok .tt-video{position:relative;width:100%;aspect-ratio:9/16;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#000;} .pf-tiktok .tt-rail{position:absolute;right:10px;bottom:68px;display:flex;flex-direction:column;gap:12px;align-items:center;} .pf-tiktok .tt-ic{width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);} .pf-tiktok .tt-caption{position:absolute;left:10px;right:70px;bottom:10px;font-size:12px;line-height:1.25;color:rgba(255,255,255,.92);text-shadow:0 2px 10px rgba(0,0,0,.55);white-space:pre-wrap;} .pf-tiktok .tt-user{font-weight:900;margin-bottom:4px;} .pf-tiktok .tt-progress{position:absolute;left:10px;right:10px;bottom:56px;height:3px;border-radius:999px;background:rgba(255,255,255,.18);} .pf-tiktok .tt-progress::after{content:"";display:block;width:38%;height:100%;border-radius:999px;background:rgba(255,255,255,.72);} /* Dots/nav shared inside new templates */ .pf .pv-dots .dot{cursor:pointer;} /* Instagram app chrome (only when platform=instagram) */ #iosScreen:not([data-platform="instagram"]) .ig-appbar, #iosScreen:not([data-platform="instagram"]) .ig-bottomnav{display:none;} .ig-appbar{ height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid rgba(0,0,0,0.08); font-weight:700; color:rgba(0,0,0,0.85); background:#fff; } .ig-appbar-center{font-weight:800;letter-spacing:-0.2px;} .ig-appbar-left,.ig-appbar-right{width:54px;color:rgba(0,0,0,0.55);font-weight:800;} .ig-appbar-right{text-align:right} .ig-bottomnav{ height:52px; display:flex; align-items:center; justify-content:space-around; border-top:1px solid rgba(0,0,0,0.08); background:#fff; color:rgba(0,0,0,0.75); font-size:18px; } .ig-bottomnav .igbn.on{color:rgba(0,0,0,0.92)} .phone.ios .ios-homebar{ position:absolute; left:50%; transform:translateX(-50%); bottom:18px; width:118px; height:4px; border-radius:999px; background:rgba(0,0,0,0.18); z-index:8; } /* Instagram light-mode overrides (Feed screenshot feel) */ .post[data-platform="instagram"]{ background:#ffffff; border:1px solid rgba(0,0,0,0.12); } .post[data-platform="instagram"] .post-header{ background:#ffffff; border-bottom:1px solid rgba(0,0,0,0.08); } .post[data-platform="instagram"] .ph-name{color:rgba(0,0,0,0.86)} .post[data-platform="instagram"] .ph-handle, .post[data-platform="instagram"] .ph-sub{color:rgba(0,0,0,0.55)} .post[data-platform="instagram"] .ph-menu{color:rgba(0,0,0,0.55)} .post[data-platform="instagram"] .carousel{background:#ffffff} .post[data-platform="instagram"] .media{background:#f3f4f6} .post[data-platform="instagram"] .platform-ui{background:#ffffff} .post[data-platform="instagram"] .iconbtn{color:rgba(0,0,0,0.82);border-color:rgba(0,0,0,0.10)} .post[data-platform="instagram"] .ig-likes{color:rgba(0,0,0,0.80)} .post[data-platform="instagram"] .ig-caption{color:rgba(0,0,0,0.80)} .post[data-platform="instagram"] .ig-caption .u{color:rgba(0,0,0,0.92)} .post[data-platform="instagram"] .ig-more{color:rgba(0,0,0,0.45)} @media (max-width:1100px){ .device-stage{padding:14px} .phone.ios .ios-shell{width:min(320px,100%)} } /* Minimal build status ticker (1 line) */ .status-ticker{ position:fixed; left:14px; right:14px; bottom:10px; z-index:50; border:1px solid rgba(255,255,255,0.10); border-radius:999px; padding:10px 14px; background:rgba(10,14,24,0.78);} .status-ticker .status-line{ font-size:12px; color:rgba(231,235,255,0.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* iOS device refinements – dark, photo-like glass */ .device-stage{background:radial-gradient(120% 140% at 20% 10%, rgba(255,255,255,0.06), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(10,14,24,0.06), rgba(10,14,24,0));} .phone.ios .ios-shell{ background:linear-gradient(180deg, rgba(18,20,26,0.96), rgba(10,12,16,0.96)); border:1px solid rgba(255,255,255,0.10); box-shadow:0 24px 70px rgba(0,0,0,0.55); } .phone.ios .ios-shell:before{ content:""; position:absolute; inset:6px; border-radius:40px; background:rgba(0,0,0,0.88); z-index:1; } .phone.ios .ios-notch{ background:rgba(0,0,0,0.92); z-index:6; } .phone.ios .ios-screen{ inset:12px; border-radius:38px; /* No white canvas behind the app */ background:#0b0d10; z-index:5; overflow:hidden; /* clip platform frame to rounded screen */ } .phone.ios .ios-homebar{ /* User requirement: no visible "white" UI elements */ background:rgba(0,0,0,0.35); mix-blend-mode:normal; } /* iOS status bar */ .phone.ios .ios-status{ position:absolute; left:18px; right:18px; top:10px; height:18px; display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:600; color:rgba(0,0,0,0.86); z-index:20; pointer-events:none; } .phone.ios .ios-sicons{display:flex;align-items:center;gap:8px} .phone.ios .ios-sicons .sig{ width:18px;height:10px;border-radius:3px; background:linear-gradient(90deg, rgba(0,0,0,0.85) 30%, rgba(0,0,0,0.25) 30%); -webkit-mask: linear-gradient(90deg, #000 0 100%); } .phone.ios .ios-sicons .wifi{ width:16px;height:10px;border-radius:999px; background:radial-gradient(circle at 50% 100%, rgba(0,0,0,0.86) 0 35%, transparent 36% 100%); opacity:.9; } .phone.ios .ios-sicons .bat{ position:relative;width:22px;height:10px;border-radius:3px;border:1.5px solid rgba(0,0,0,0.75); } .phone.ios .ios-sicons .bat:after{ content:"";position:absolute;right:-3px;top:2px;width:2px;height:6px;border-radius:1px;background:rgba(0,0,0,0.75); } .phone.ios .ios-sicons .bat:before{ content:"";position:absolute;left:1px;top:1px;right:5px;bottom:1px;border-radius:2px;background:rgba(0,0,0,0.70); } /* Preview build badge (to verify correct build is running) */ /* Force the iOS device to always be visible inside the preview card */ .device-stage{min-height:560px;} .phone.ios{width:100%;display:flex;justify-content:center;align-items:center;} .phone.ios .ios-shell{width:min(320px,100%);} /* === New features (collapsed) === */ .new-features{ margin-top:14px; border:1px solid rgba(255,255,255,.10); border-radius:16px; background:rgba(255,255,255,.03); overflow:hidden; } .new-features__summary{ list-style:none; cursor:pointer; padding:12px 14px; font-weight:800; letter-spacing:.2px; display:flex; align-items:center; justify-content:space-between; } .new-features__summary::-webkit-details-marker{display:none;} .new-features[open] .new-features__summary{ border-bottom:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.22); } .new-features__body{ padding:12px 14px 14px; } .new-features .block{ margin-top:10px; } /* Hide upper pack tabs row (text pills) */ #packTabs{display:none !important;} /* Section color coding: Create / Generate / Post IMPORTANT: do NOT reuse .panel::before for the top accent line. .panel::before is reserved for the premium double border. */ .panel.create{--panel-accent: var(--create); box-shadow:0 12px 34px color-mix(in srgb, var(--create) 12%, transparent);} .panel.generate{--panel-accent: var(--generate); box-shadow:0 12px 34px color-mix(in srgb, var(--generate) 12%, transparent);} .panel.post{--panel-accent: var(--post); box-shadow:0 12px 34px color-mix(in srgb, var(--post) 12%, transparent);} /* Remove the extra "floating" accent stripe. It was read as a stray/loose line on some zoom levels and devices. */ .panel.create .panel-title::before, .panel.generate .panel-title::before, .panel.post .panel-title::before{display:none; content:none;} .panel.create .panel-title{font-family:var(--font-display);font-weight:700;margin-bottom:10px;letter-spacing:.3px} .panel.generate .panel-title{font-family:var(--font-display);font-weight:700;margin-bottom:10px;letter-spacing:.3px} .panel.post .panel-title{font-family:var(--font-display);font-weight:700;margin-bottom:10px;letter-spacing:.3px} /* Post (Preview) uses the SAME double-frame logic as Inputs/Output. We only set the accent color; the base .panel border + inner line does the rest. */ .panel.post{ --panel-accent: var(--post); } /* Luxury "you are here" indicator: whichever panel you're interacting with */ .panel:focus-within{ box-shadow: 0 0 0 1px color-mix(in srgb, var(--panel-accent) 40%, transparent), 0 18px 44px rgba(0,0,0,0.45); } .panel-title .sub{display:block; font-size:.78rem; color:var(--muted); font-weight:500; margin-top:2px;} .new-features__body{opacity:.65;} .new-features__body *{opacity:1;} /* ========================= CLEAN PREVIEW v2.8.1 Single-layer. No stacking hacks. ========================= */ .ios-screen .pv{ height:100%; display:flex; flex-direction:column; gap:10px; padding:12px; } .pv-top{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:14px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.08); } .pv-platform{font-weight:900; letter-spacing:.2px;} .pv-sub{font-size:.78rem; color:var(--muted);} .pv-card{ flex:1; display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.08); } .pv-header{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.07); } .pv-avatar{ width:30px; height:30px; border-radius:999px; background:linear-gradient(135deg, rgba(109,93,254,.45), rgba(74,163,255,.35)); border:1px solid rgba(255,255,255,.10); } .pv-user{display:flex; flex-direction:column; line-height:1.1;} .pv-name{font-weight:850; font-size:.92rem;} .pv-handle{font-size:.78rem; color:var(--muted);} .pv-more{margin-left:auto; color:rgba(255,255,255,.70);} .pv-media{ width:100%; background:rgba(0,0,0,.35); display:grid; place-items:center; border-bottom:1px solid rgba(255,255,255,.07); } .pv-media img{ width:100%; height:100%; object-fit:cover; display:block; } .pv-carouselbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(0,0,0,.18); } .pv-nav{ width:34px; height:30px; border-radius:10px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.25); color:rgba(255,255,255,.9); font-weight:900; } .pv-dots{display:flex; align-items:center; gap:6px; flex:1; justify-content:center;} .pv-dots .dot{ width:7px; height:7px; border-radius:999px; background:rgba(255,255,255,.28); } .pv-dots .dot.active{background:rgba(255,255,255,.85);} .pv-actions{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.07); } .pv-ic{opacity:.92;} .pv-ic.right{margin-left:auto;} .pv-caption{ padding:12px; font-size:.88rem; color:rgba(255,255,255,.92); white-space:pre-wrap; } .pv-footnote{ font-size:.76rem; color:var(--muted); padding:2px 2px 0; } /* Platform-specific media behaviour (still single-layer) */ #iosScreen[data-platform="linkedin"] .pv-media img, #iosScreen[data-platform="x"] .pv-media img{ object-fit:cover; } #iosScreen[data-platform="tiktok"] .pv-card{ border-radius:18px; } /* Seed dropdown rows (pack-linked) */ .seed-row{display:flex;gap:10px;align-items:center;margin:8px 0 6px} .seed-select{flex:1;min-width:0;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22);color:var(--text);padding:10px 12px;font-size:13px} .seed-apply{border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--text);padding:10px 12px;font-weight:800;cursor:pointer} .seed-apply:hover{background:rgba(255,255,255,.10)} /* ============================================================ PARADEPAARD PREVIEW v2 β€” platform-true DOM (pixel grid) ============================================================ */ /* Base frame area inside screen */ .pf{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;} .pf .preview-empty{position:absolute;inset:0;display:none;place-items:center;text-align:center;font-weight:800;color:rgba(255,255,255,.85);background:rgba(0,0,0,.35);border-radius:18px;} /* Shared elements */ .pf img#previewImg{width:100%;height:100%;display:block;object-fit:cover;} /* ───────── Instagram (Feed Post) ───────── */ .pf-instagram{background:#0b0f17;color:#e9eef7;} .pf-instagram .ig-top{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08)} .pf-instagram .ig-brand{font-weight:900;letter-spacing:-.2px} .pf-instagram .ig-top-icons{display:flex;gap:10px;opacity:.65;font-weight:900} .pf-instagram .ig-feed{flex:1;min-height:0;overflow:auto;} .pf-instagram .ig-post{padding:10px 0 14px;} .pf-instagram .ig-header{display:flex;align-items:center;gap:10px;padding:0 14px 10px;} .pf-instagram .ig-avatar{ width:28px; height:28px;border-radius:999px;background:linear-gradient(135deg,#c7c9ff,#e6e7ff);box-shadow:0 0 0 1px rgba(0,0,0,.10) inset} .pf-instagram .ig-name{font-weight:900;font-size:13px;line-height:1} .pf-instagram .ig-handle{font-size:11px;opacity:.65;margin-top:2px} .pf-instagram .ig-more{margin-left:auto;opacity:.65;font-weight:900} .pf-instagram .ig-media{position:relative;margin:0 0 10px;} .pf-instagram .ig-media{aspect-ratio:1/1;} .pf-instagram .ig-actions{display:flex;align-items:center;justify-content:space-between;padding:0 14px 10px;} .pf-instagram .ig-actions-left{display:flex;gap:12px;} .pf-instagram .ig-ic{width:18px;height:18px;border-radius:4px;background:rgba(255,255,255,.12)} .pf-instagram .ig-caption{padding:0 14px;font-size:12px;line-height:1.35;color:rgba(233,238,247,.88);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .pf-instagram .ig-carousel{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px 10px;} .pf-instagram .pv-nav{border:1px solid rgba(255,255,255,.14);background:rgba(15,22,39,.75);color:rgba(233,238,247,.95)} .pf-instagram .pv-nav:hover{background:rgba(15,22,39,.92)} .pf-instagram .pv-dots{display:flex;gap:6px;justify-content:center;align-items:center;flex:1} .pf-instagram .dot{width:6px;height:6px;border-radius:999px;background:rgba(233,238,247,.22)} .pf-instagram .dot.on{background:rgba(233,238,247,.75)} /* Instagram bottom nav (inside safe bounds) */ .pf-instagram .ig-bottom{height:52px;display:flex;align-items:center;justify-content:space-around;border-top:1px solid rgba(255,255,255,.08);padding:0 10px;background:#0b0f17} .pf-instagram .igbn{width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.12)} .pf-instagram .igbn.on{background:rgba(233,238,247,.85)} /* ───────── Facebook (Feed Post) ───────── */ .pf-facebook{background:#0b0f17;color:#e9eef7;} .pf-facebook .fb-top{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08)} .pf-facebook .fb-brand{font-weight:900;letter-spacing:-.2px} .pf-facebook .fb-top-icons{display:flex;gap:10px;opacity:.65;font-weight:900} .pf-facebook .fb-feed{flex:1;min-height:0;overflow:auto;} .pf-facebook .fb-card{padding:12px 14px 16px;} .pf-facebook .fb-header{display:flex;align-items:center;gap:10px;} .pf-facebook .fb-avatar{width:34px;height:34px;border-radius:999px;background:linear-gradient(135deg,rgba(199,201,255,.9),rgba(230,231,255,.9));box-shadow:0 0 0 1px rgba(255,255,255,.10) inset} .pf-facebook .fb-name{font-weight:900;font-size:13px;line-height:1} .pf-facebook .fb-sub{font-size:11px;opacity:.55;margin-top:2px} .pf-facebook .fb-more{margin-left:auto;opacity:.55;font-weight:900} .pf-facebook .fb-media{position:relative;margin-top:10px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.10) inset} .pf-facebook .fb-stats{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11px;color:rgba(233,238,247,.7)} .pf-facebook .fb-carousel{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;} .pf-facebook .fb-actions{display:flex;gap:10px;margin-top:10px;color:rgba(233,238,247,.55)} .pf-facebook .fb-ic{width:18px;height:18px;border-radius:4px;background:rgba(255,255,255,.12)} .pf-facebook .fb-caption{margin-top:10px;font-size:12px;line-height:1.35;color:rgba(233,238,247,.88);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} /* ───────── LinkedIn (Post) ───────── */ .pf-linkedin{background:#0b0f17;color:#e9eef7;} .pf-linkedin .li-top{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08)} .pf-linkedin .li-brand{font-weight:900;letter-spacing:-.2px} .pf-linkedin .li-top-icons{display:flex;gap:10px;opacity:.65;font-weight:900} .pf-linkedin .li-feed{flex:1;min-height:0;overflow:auto;} .pf-linkedin .li-card{padding:12px 14px 16px;} .pf-linkedin .li-header{display:flex;align-items:center;gap:10px;} .pf-linkedin .li-avatar{width:34px;height:34px;border-radius:999px;background:linear-gradient(135deg,rgba(199,201,255,.9),rgba(230,231,255,.9));box-shadow:0 0 0 1px rgba(255,255,255,.10) inset} .pf-linkedin .li-name{font-weight:900;font-size:13px;line-height:1} .pf-linkedin .li-sub{font-size:11px;opacity:.55;margin-top:2px} .pf-linkedin .li-more{margin-left:auto;opacity:.55;font-weight:900} .pf-linkedin .li-caption{margin-top:10px;font-size:12px;line-height:1.35;color:rgba(233,238,247,.88);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line} .pf-linkedin .li-media{position:relative;margin-top:10px;aspect-ratio:1.91/1;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.10) inset} .pf-linkedin .li-carousel{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;} .pf-linkedin .li-actions{display:flex;gap:10px;margin-top:10px;color:rgba(233,238,247,.55)} .pf-linkedin .li-ic{width:18px;height:18px;border-radius:4px;background:rgba(255,255,255,.12)} /* ───────── X (Tweet) ───────── */ .pf-x{background:#0b0f17;color:#e9eef7;} .pf-x .x-top{height:44px;display:flex;alignments:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08)} .pf-x .x-brand{font-weight:900;letter-spacing:-.2px} .pf-x .x-top-icons{display:flex;gap:10px;opacity:.65;font-weight:900} .pf-x .x-feed{flex:1;min-height:0;overflow:auto;} .pf-x .x-card{padding:12px 14px 16px;} .pf-x .x-header{display:flex;gap:10px;align-items:flex-start;} .pf-x .x-avatar{width:34px;height:34px;border-radius:999px;background:linear-gradient(135deg,#c7c9ff,#e6e7ff);box-shadow:0 0 0 1px rgba(0,0,0,.10) inset} .pf-x .x-name{font-weight:900;font-size:13px;line-height:1} .pf-x .x-handle{font-size:11px;opacity:.55;margin-top:2px} .pf-x .x-more{margin-left:auto;opacity:.55;font-weight:900} .pf-x .x-caption{margin-top:10px;font-size:12px;line-height:1.35;color:rgba(0,0,0,.78);white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} .pf-x .x-media{position:relative;margin-top:10px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.10) inset} .pf-x .x-carousel{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;} .pf-x .x-actions{display:flex;justify-content:space-between;margin-top:10px;opacity:.55} .pf-x .x-ic{width:18px;height:18px;border-radius:4px;background:rgba(0,0,0,.10)} /* ───────── TikTok (Video) ───────── */ .pf-tiktok{background:#000;color:#fff;} .pf-tiktok .tt-top{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08)} .pf-tiktok .tt-brand{font-weight:900;letter-spacing:-.2px} .pf-tiktok .tt-top-icons{display:flex;gap:10px;opacity:.75;font-weight:900} .pf-tiktok .tt-stage{flex:1;min-height:0;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:10px 0 0;} .pf-tiktok .tt-video{position:relative;width:92%;max-width:320px;aspect-ratio:9/16;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.10) inset} .pf-tiktok .tt-video img{width:100%;height:100%;object-fit:cover;display:block;} .pf-tiktok .tt-rail{position:absolute;right:10px;bottom:64px;display:flex;flex-direction:column;gap:12px;align-items:center;} .pf-tiktok .tt-ic{width:38px;height:38px;border-radius:999px;background:rgba(255,255,255,.14);box-shadow:0 8px 18px rgba(0,0,0,.35)} .pf-tiktok .tt-bottom{position:absolute;left:10px;right:60px;bottom:12px;font-size:12px;line-height:1.25;color:rgba(255,255,255,.92);text-shadow:0 2px 10px rgba(0,0,0,.65)} .pf-tiktok .tt-user{font-weight:900;margin-bottom:4px} .pf-tiktok .tt-caption{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pf-tiktok .tt-carousel{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px;pointer-events:none;opacity:.85} .pf-tiktok .dot{width:5px;height:5px;border-radius:999px;background:rgba(255,255,255,.25)} .pf-tiktok .dot.on{background:rgba(255,255,255,.92)} /* ========================== Preview Paradepaard v3 - Remove purple stage - Add A/B/C style toggle - More "photo-like" screen ========================== */ .preview-style-toggle{display:flex;gap:8px;justify-content:flex-end;margin:-6px 0 10px 0;} .pst-btn{height:28px;min-width:34px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.22);color:rgba(255,255,255,.9);font-weight:800;letter-spacing:.06em;cursor:pointer;} .pst-btn:hover{border-color:rgba(255,255,255,.34);background:rgba(0,0,0,.3)} .pst-btn.is-active{border-color:rgba(120,160,255,.8);box-shadow:0 0 0 2px rgba(120,160,255,.2) inset, 0 10px 26px rgba(0,0,0,.35);background:rgba(10,16,30,.45)} /* Stage background: dark photo-like, no purple blocks */ .preview-canvas{ background: radial-gradient(1000px 520px at 50% 12%, rgba(120,160,255,.10), rgba(0,0,0,0) 60%), radial-gradient(900px 520px at 65% 85%, rgba(255,200,120,.08), rgba(0,0,0,0) 65%), linear-gradient(180deg, rgba(10,14,22,.92), rgba(6,8,12,.92)); } /* Make device feel like a photographed object */ .device-ios{ box-shadow: 0 28px 70px rgba(0,0,0,.65), 0 10px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset; } /* Screen backgrounds per style (NO white) */ html[data-preview-style="A"] .device-ios .device-screen{background:#0b0c10;} html[data-preview-style="B"] .device-ios .device-screen{ background:linear-gradient(180deg,#0b0c10 0%, #0f1627 55%, #0b0c10 100%); } html[data-preview-style="C"] .device-ios .device-screen{ background:linear-gradient(180deg,#0b0c10 0%, #0f1422 45%, #0b0c10 100%); } /* Glass / glare overlay (C) */ html[data-preview-style="C"] .device-ios::after{ content:""; position:absolute; inset:8px; border-radius:44px; pointer-events:none; background: radial-gradient(520px 220px at 30% 18%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%), radial-gradient(620px 280px at 70% 40%, rgba(255,255,255,.08), rgba(255,255,255,0) 62%), linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,0) 50%, rgba(255,255,255,.03)); mix-blend-mode:screen; opacity:.9; } /* Prevent ugly text-selection highlights inside the preview */ .preview, .preview *{ -webkit-user-select:none; user-select:none; } /* Reduce the "flat" look of UI blocks by adding subtle depth */ .device-ios .post-card, .device-ios .pf-ig, .device-ios .pf-fb, .device-ios .pf-li, .device-ios .pf-x, .device-ios .pf-tiktok{ box-shadow:0 10px 24px rgba(0,0,0,.18); } /* Kill any legacy purple stage if present */ .preview-shell{background:transparent !important;} /* ============================= PARADEPAARD – SCREEN REALISM Goal: zero purple canvas + zero harsh white in preview ============================= */ /* Absolutely remove any purple stage */ .device-stage{ /* User requirement: no purple/white/overlay canvas – show ONLY the phone. Keep a subtle drop shadow but make the stage fully transparent. */ background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } /* iOS screen base must never be white */ .phone.ios .ios-shell::before{background:#0b0c10 !important;} .phone.ios .ios-status{color:rgba(255,255,255,0.86) !important; text-shadow:0 1px 2px rgba(0,0,0,0.45);} /* Platform frames: force dark-mode realism */ .pf-instagram, .pf-facebook, .pf-linkedin, .pf-x, .pf-tiktok{ background:#0b0c10 !important; color:rgba(255,255,255,0.92) !important; } /* Instagram */ .pf-instagram .ig-top{background:#10111a !important;border-bottom:1px solid rgba(255,255,255,0.08) !important;} .pf-instagram .ig-top .ig-name{color:rgba(255,255,255,0.92) !important;} .pf-instagram .ig-top .ig-url{color:rgba(255,255,255,0.48) !important;} .pf-instagram .ig-top-icons{color:rgba(255,255,255,0.70) !important;} .pf-instagram .ig-post{background:#0b0c10 !important;} .pf-instagram .ig-header{background:rgba(255,255,255,0.02) !important;border-bottom:1px solid rgba(255,255,255,0.06) !important;} .pf-instagram .ig-handle{color:rgba(255,255,255,0.86) !important;} .pf-instagram .ig-meta, .pf-instagram .ig-caption{color:rgba(255,255,255,0.78) !important;} .pf-instagram .ig-bottom{background:#0b0c10 !important;border-top:1px solid rgba(255,255,255,0.06) !important;} .pf-instagram .ig-bicon{background:rgba(255,255,255,0.12) !important;} /* Facebook */ .pf-facebook .fb-top{background:#10111a !important;border-bottom:1px solid rgba(255,255,255,0.08) !important;} .pf-facebook .fb-top .fb-title{color:rgba(255,255,255,0.92) !important;} .pf-facebook .fb-top .fb-icons{color:rgba(255,255,255,0.70) !important;} .pf-facebook .fb-post{background:#0b0c10 !important;} .pf-facebook .fb-header{border-bottom:1px solid rgba(255,255,255,0.06) !important;} .pf-facebook .fb-name{color:rgba(255,255,255,0.88) !important;} .pf-facebook .fb-meta{color:rgba(255,255,255,0.50) !important;} .pf-facebook .fb-reactions{color:rgba(255,255,255,0.72) !important;border-top:1px solid rgba(255,255,255,0.06) !important;} /* X */ .pf-x .x-top{background:#10111a !important;border-bottom:1px solid rgba(255,255,255,0.08) !important;} .pf-x .x-top .x-title{color:rgba(255,255,255,0.92) !important;} .pf-x .x-top .x-icons{color:rgba(255,255,255,0.70) !important;} .pf-x .x-tweet{background:#0b0c10 !important;} .pf-x .x-name{color:rgba(255,255,255,0.90) !important;} .pf-x .x-meta{color:rgba(255,255,255,0.50) !important;} .pf-x .x-text{color:rgba(255,255,255,0.82) !important;} /* LinkedIn */ .pf-linkedin .li-top{background:#10111a !important;border-bottom:1px solid rgba(255,255,255,0.08) !important;} .pf-linkedin .li-top .li-title{color:rgba(255,255,255,0.92) !important;} .pf-linkedin .li-top .li-icons{color:rgba(255,255,255,0.70) !important;} .pf-linkedin .li-post{background:#0b0c10 !important;} .pf-linkedin .li-name{color:rgba(255,255,255,0.90) !important;} .pf-linkedin .li-meta{color:rgba(255,255,255,0.50) !important;} .pf-linkedin .li-text{color:rgba(255,255,255,0.82) !important;} /* Shared carousel controls (avoid light blobs) */ .pf .carouselbar{background:#0b0c10 !important;border-top:1px solid rgba(255,255,255,0.06) !important;} .pf .car-nav{background:rgba(255,255,255,0.08) !important;border:1px solid rgba(255,255,255,0.12) !important;color:rgba(255,255,255,0.78) !important;} .pf .dot{background:rgba(255,255,255,0.20) !important;} .pf .dot.active{background:rgba(255,255,255,0.90) !important;} /* ================================ DPB v2.9 β€” PARADEPAARD PATCH 1) Preview/Post clean borders (real borders only) 2) Luxury DPB app icon in topbar ================================ */ /* --- Topbar: luxury DPB icon + hierarchy --- */ .topbar .brand{display:flex;align-items:center;gap:14px;} .topbar /* Background envelope silhouette (subtle light, behind letters) */ .topbar /* INNER: thin metallic silver line, close to outer (like sections) */ .topbar .app-icon::after{ content:""; position:absolute; inset:5px; border-radius:12px; border:1px solid rgba(232,235,242,0.58); box-shadow: inset 0 1px 1px rgba(255,255,255,0.10), inset 0 -1px 1px rgba(0,0,0,0.35); pointer-events:none; } .topbar /* D = Create (blue) */ .topbar .app-icon .d{ color: var(--create); filter: saturate(1.25) contrast(1.05); } /* P = Generate (gold) */ .topbar .app-icon .p{ background:linear-gradient(180deg, #FFF1B8 0%, #E2BF4A 45%, #9B6A00 92%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; filter: saturate(1.15) contrast(1.02); } /* B = Post (green) */ .topbar .app-icon .b{ color: var(--post); filter: saturate(1.25) contrast(1.05); } .topbar .title-group .h1{font-family:var(--font-display);font-weight:700;letter-spacing:.4px;} .topbar .title-group .h1 .brand{font-weight:820;} .topbar .title-group .h1 .product{font-weight:560;opacity:.88;} /* --- Sections: use ONE unified double-frame system (outer + inner line) --- */ .section{ position:relative; --radius: 18px; border-radius: var(--radius); background:rgba(15,22,39,0.70); padding:12px; overflow:hidden; --panel-accent: rgba(255,255,255,.22); border:2px solid var(--panel-accent); box-shadow: 0 10px 24px rgba(0,0,0,.28); } /* Inner line (double border) */ .section::after{ content:""; position:absolute; inset:4px; border-radius: calc(var(--radius) - 4px); border:1px solid var(--panel-accent); opacity:.85; pointer-events:none; } /* Color variants (if any legacy markup still uses .section.*) */ .section.create{ --panel-accent: var(--create); } .section.generate{ --panel-accent: var(--generate); } .section.post{ --panel-accent: var(--post); } /* Ensure inner border stretches to full panel height (matches other sections) */ .section.post.preview{ height: 100%; display: flex; flex-direction: column; } .section.post.preview .section-inner{ height: 100%; display: flex; flex-direction: column; } .section.post.preview .pv-root{ flex: 1; } /* Ensure the inner border stays continuous: no child frame may draw over it */ .section.post.preview .device-stage{ border:none !important; background:transparent !important; box-shadow:none !important; } .section.post.preview .preview-shell, .section.post.preview .device{ width:100%; } /* Preview hygiene: avoid legacy pseudo-layer stacks inside the *rendered screen* only. (Do NOT disable pseudo-elements on the whole section, or we lose premium frames.) */ .section.post.preview .pv-screen *::before, .section.post.preview .pv-screen *::after, .section.post.preview #pvScreen *::before, .section.post.preview #pvScreen *::after{ content:none !important; } /* ================================ v2.9 GREENFIELD PREVIEW PHONE (new clean phone + renderer) ================================ */ .section.post.preview .preview-style-toggle{ display:none !important; } .section.post.preview .pv-root{ width:100%; display:flex; justify-content:center; align-items:flex-start; padding: 6px 0 2px; } .section.post.preview .pv-phone{ width:min(420px, 100%); aspect-ratio: 9 / 19.5; border-radius: 52px; /* Premium dark-metal frame */ background: radial-gradient(120% 80% at 18% 10%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(28,28,32,.98), rgba(6,6,10,.98)); border: 1px solid rgba(255,255,255,.20); box-shadow: 0 28px 90px rgba(0,0,0,.60), 0 0 0 1px rgba(0,0,0,.45) inset, 0 0 0 10px rgba(0,0,0,.35) inset; overflow:hidden; position:relative; padding: 12px; /* bezel thickness */ } .section.post.preview .pv-topbar{ height: 34px; display:flex; align-items:center; justify-content:center; position:absolute; left:0; right:0; top:18px; pointer-events:none; opacity:.92; z-index:5; } .section.post.preview .pv-speaker{ width: 110px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.10); } .section.post.preview .pv-camera{ width: 10px; height: 10px; border-radius: 50%; margin-left: 14px; background: rgba(120,180,255,.18); border: 1px solid rgba(255,255,255,.14); } /* Home indicator (screen-off state still shows premium detail) */ .section.post.preview .pv-home{ position:absolute; left:50%; transform:translateX(-50%); bottom:18px; width:128px; height:5px; border-radius:999px; background:rgba(255,255,255,.10); pointer-events:none; opacity:.85; } /* Glass reflection layer */ .section.post.preview .pv-glass{ position:absolute; inset:8px; border-radius:44px; pointer-events:none; background: radial-gradient(120% 60% at 18% 8%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,.06) 70%, rgba(255,255,255,0) 100%); mix-blend-mode:screen; opacity:.65; } .section.post.preview .pv-screen{ position:absolute; inset: 12px; /* inside bezel */ border-radius: 40px; padding-top: 58px; /* notch safe area */ padding-bottom: 28px; /* home bar safe area */ background: radial-gradient(120% 120% at 50% 10%, rgba(255,255,255,.05), rgba(255,255,255,0) 40%), #05060a; /* screen-off base */ overflow:hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; } /* Legacy preview stack: neutralize to prevent overlays if still referenced elsewhere */ .section.post.preview .device-stage, .section.post.preview .preview-shell, .section.post.preview .browserbar, .section.post.preview .device, .section.post.preview #iosScreen, .section.post.preview #platformFrame{ display:none !important; } /* ================================ Instagram β€” pixel-first (v2.9) Goal: readable, believable, no emojis ================================ */ .section.post.preview .ig-app{ height:100%; display:flex; flex-direction:column; background:#000; color:rgba(255,255,255,.92); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; } .section.post.preview .ig-appbar{ height:46px; display:flex; align-items:center; justify-content:space-between; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.10); } .section.post.preview .ig-wordmark{ font-weight:800; letter-spacing:.2px; font-size:18px; } .section.post.preview .ig-appbar-right{ display:flex; gap:12px; align-items:center; } .section.post.preview .ig-ico{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; color:rgba(255,255,255,.92); } .section.post.preview .ig-ico svg{ width:22px; height:22px; display:block; } .section.post.preview .ig-post{ display:flex; flex-direction:column; min-height:0; } .section.post.preview .ig-posthdr{ display:flex; align-items:center; padding: 10px 14px; gap:10px; } .section.post.preview .ig-avatar{ width:28px; height:28px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(140,130,255,.95), rgba(46,204,113,.55)); } .section.post.preview .ig-meta{ display:flex; flex-direction:column; line-height:1.12; } .section.post.preview .ig-name{ font-weight:800; font-size:13px; } .section.post.preview .ig-handle{ font-size:12px; color:rgba(255,255,255,.62); } .section.post.preview .ig-more{ margin-left:auto; opacity:.9; } .section.post.preview .ig-media{ position:relative; width:100%; aspect-ratio: 1 / 1; background:#0b0e16; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); } /* No visual selected: keep the media slot visible (black) so the UI doesn't collapse */ .section.post.preview .ig-media.is-empty{ background:#000; } .section.post.preview .ig-media img{ width:100%; height:100%; object-fit:cover; display:block; } .section.post.preview .preview-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.55); font-size:12px; } .section.post.preview .ig-actions{ display:flex; align-items:center; justify-content:space-between; padding: 10px 14px 6px; } .section.post.preview .ig-actions-left{ display:flex; gap:14px; align-items:center; } .section.post.preview .ig-carousel{ display:flex; align-items:center; justify-content:center; gap:10px; padding: 4px 14px 6px; } .section.post.preview .pv-nav{ width:32px; height:26px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.25); color: rgba(255,255,255,.85); } .section.post.preview .pv-dots{ display:flex; gap:6px; align-items:center; justify-content:center; min-height:10px; } .section.post.preview .pv-dots .dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.28); } .section.post.preview .pv-dots .dot.on, .section.post.preview .pv-dots .dot.active{ background:rgba(255,255,255,.88); } .section.post.preview .ig-caption{ padding: 0 14px 10px; font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.88); overflow:hidden; display:-webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .section.post.preview .ig-bottomnav{ margin-top:auto; height:48px; display:flex; align-items:center; justify-content:space-between; padding: 0 18px; border-top: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.75); } /* IG avatar: use DPB app visual instead of generic circle */ .ig-avatar.ig-avatar-app{ width: 42px; height: 42px; border-radius: 12px; display:flex; align-items:center; justify-content:center; gap: 0px; position: relative; overflow:hidden; background: radial-gradient(circle at 30% 18%, rgba(255,255,255,0.10), transparent 42%), linear-gradient(145deg,#0a0c16 0%, #111426 34%, #6D5DFE 62%, #1EB5E9 86%, #0a0c16 100%); border: 2px solid rgba(225,228,235,0.85); box-shadow: 0 10px 22px rgba(0,0,0,0.55), inset 0 1px 2px rgba(255,255,255,0.10); } .ig-avatar-app::before{ content:""; position:absolute; inset:3px; border-radius:9px; padding:1.5px; background: linear-gradient(135deg, #6D5DFE 0%, #1EB5E9 45%, #2ECC71 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.85; pointer-events:none; } .ig-avatar-app span{ position:relative; font-family: var(--font-display); font-weight:780; font-size:14px; line-height:1; letter-spacing:-0.6px; text-shadow: 0 2px 6px rgba(0,0,0,0.55); } .ig-avatar.ig-avatar-app .d{ color: var(--create); filter:saturate(1.25) contrast(1.05); } .ig-avatar.ig-avatar-app .p{ color: var(--post); filter:saturate(1.25) contrast(1.05); } .ig-avatar.ig-avatar-app .b{ background:linear-gradient(180deg, #FFE9A6 0%, #D8B13A 45%, #9A6D00 92%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; filter:saturate(1.15) contrast(1.02); } /* ========================================================= DPB v2.9.10 β€” PHONE SHELL MATERIAL UPGRADE (NO MODEL CHANGE) Goal: More gloss + metallic + depth, same dimensions/shape. ========================================================= */ /* Try common wrappers used in our builds */ .pv-phone, .phone, .phone-frame, .phone-shell, .device, .device-frame { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } /* Metallic body: stronger specular + rim light + micro contrast */ .pv-phone, .phone-frame, .phone-shell, .device-frame{ background: linear-gradient(135deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.02) 18%, rgba(0,0,0,0.0) 35%), linear-gradient(225deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.0) 35%), linear-gradient(90deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.06) 10%, rgba(35,38,52,1) 35%, rgba(12,14,22,1) 60%, rgba(255,255,255,0.08) 85%, rgba(255,255,255,0.28) 100%); box-shadow: 0 42px 140px rgba(0,0,0,0.80), 0 10px 30px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 0 18px rgba(255,255,255,0.08), inset 0 -26px 44px rgba(0,0,0,0.55); } /* Rim lights (subtle DigiCrate DNA tint) */ .pv-phone::before, .phone-frame::before, .phone-shell::before, .device-frame::before{ content:""; position:absolute; inset: 10px; border-radius: inherit; pointer-events:none; background: radial-gradient(1200px 600px at 10% 20%, rgba(120,90,255,0.22), transparent 55%), radial-gradient(1200px 600px at 90% 35%, rgba(0,220,255,0.14), transparent 60%), linear-gradient(90deg, rgba(255,255,255,0.20), rgba(255,255,255,0.02) 35%, rgba(0,0,0,0.0) 65%, rgba(255,255,255,0.14)); mix-blend-mode: screen; filter: blur(0.2px); opacity: 0.95; } /* Extra hard specular edge highlight */ .pv-phone::after, .phone-frame::after, .phone-shell::after, .device-frame::after{ content:""; position:absolute; inset: 0; border-radius: inherit; pointer-events:none; background: linear-gradient(90deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.06) 12%, transparent 30%, transparent 70%, rgba(255,255,255,0.08) 88%, rgba(255,255,255,0.28) 100%); opacity: 0.70; } /* Screen glass: deeper contrast + glossy sweep */ .pv-screen, .screen, .screen-off, .device-screen{ background: radial-gradient(900px 520px at 25% 18%, rgba(255,255,255,0.14), transparent 55%), linear-gradient(120deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 22%, rgba(0,0,0,0.0) 45%), linear-gradient(200deg, rgba(255,255,255,0.06) 0%, transparent 35%), #05070B; box-shadow: inset 0 0 90px rgba(0,0,0,0.92), inset 0 0 10px rgba(255,255,255,0.08); } /* Thin inner bevel on screen edge */ .pv-screen, .screen, .screen-off, .device-screen{ outline: 1px solid rgba(255,255,255,0.06); outline-offset: -1px; } /* Buttons: stronger metal shine */ .side-button, .btn, .device-btn{ background: linear-gradient(to bottom, rgba(255,255,255,0.26), rgba(255,255,255,0.06) 35%, rgba(0,0,0,0.45) 100%); box-shadow: 0 0 6px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(255,255,255,0.10); } /* === v2.9.10 Preview Phone Shell Override (realistic 3D) === */ .section.post.preview .pv-phone { position: relative; width: min(420px, 100%); aspect-ratio: 9 / 19.5; margin: 0 auto; background: url("assets/iphone_shell.png") center / contain no-repeat; filter: drop-shadow(0 44px 64px rgba(0,0,0,.55)); } .section.post.preview .pv-phone::before { content: ""; position: absolute; inset: -10%; background: url("assets/iphone_shadow.png") center / contain no-repeat; z-index: -1; opacity: .95; pointer-events: none; } .section.post.preview .pv-screen { -webkit-mask-image: url("assets/iphone_mask.png"); mask-image: url("assets/iphone_mask.png"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* ========================================================= DPB v2.9.16 β€” App Icon Silver (Apple Store reflective) ========================================================= */ .app-icon .dpb-text, .app-icon .letters, /* Keep DPB letters tight */ .app-icon .letters{ letter-spacing:-0.04em !important; } /* ========================================================= DPB v2.9.16 β€” Voice & Upcoming UI ========================================================= */ .block.upcoming .cards{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; } .uc-card{ position:relative; border:1px solid rgba(255,255,255,0.10); border-radius:14px; padding:10px; background:rgba(9,12,22,0.55); min-height:78px; } .uc-title{font-weight:700; font-size:13px; margin-bottom:4px;} .uc-sub{font-size:12px; color:rgba(255,255,255,0.70); line-height:1.25;} .uc-badge{ position:absolute; top:10px; right:10px; font-size:10px; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,0.14); color:rgba(255,255,255,0.75); background:rgba(255,255,255,0.06); } #voiceBlock .divider{ height:1px; background:rgba(255,255,255,0.10); margin:10px 0; } #voiceBlock .row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } #voiceBlock .spacer{flex:1;} #voiceBlock .mini{display:flex; flex-direction:column; gap:4px; min-width:120px;} #voiceBlock input[type="range"]{width:140px;} #ttsText{width:100%;} /* --- v2.9.16 Voice-over module --- */ #voiceOverModule .miniHint{opacity:.8;font-size:12px} #voiceOverModule .tiny{gap:10px} .chk{display:inline-flex;align-items:center;gap:8px;font-size:13px;opacity:.9} .chk input{accent-color:#6d5dfe} .stack{display:flex;flex-direction:column;gap:6px;min-width:140px} .miniLabel{font-size:12px;opacity:.75} .textarea.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace} /* App icon: keep it crisp (reduce blur glow) */ .app-icon .dpb-letter{ -webkit-text-stroke: 0.6px rgba(225,235,255,.85); text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 6px rgba(140,130,255,.35); } /* New features cards */ .featuresGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px} .featureCard{padding:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);box-shadow: 0 0 0 1px rgba(140,130,255,.25) inset} .fcTitle{font-weight:700;margin-bottom:6px} .fcDesc{font-size:13px;opacity:.8} /* Modal for slideshow preview */ .modal.hidden{display:none} .modal{position:fixed;inset:0;z-index:9999} .modalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);margin:6vh auto 0;max-width:980px;width:92vw;border-radius:18px; background:rgba(12,14,22,.92);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 70px rgba(0,0,0,.6)} .modalHeader{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.10)} .modalTitle{font-weight:800} .modalBody{padding:16px} .slideStage{height:420px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.10); display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:12px} #slideImg{max-width:100%;max-height:100%;object-fit:contain;image-rendering:auto} /* ================================ v3.3.0 PREVIEW CORE (EMPTY) Single premium iPhone shell + clean viewport ================================ */ /* Keep preview subtree clean: no accidental overlays */ .section.post.preview .pv3-root{ width:100%; display:flex; justify-content:center; align-items:flex-start; padding: 8px 0 14px; } .section.post.preview .pv3-phone{ position:relative; width:min(360px, 92%); aspect-ratio: 9 / 19.5; } .section.post.preview .pv3-shadow{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform: translateY(6px) scale(1.02); opacity:.85; filter: blur(0.2px); pointer-events:none; user-select:none; } .section.post.preview .pv3-shell{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; } /* Viewport: placeholder rect (we'll calibrate to your PNG next) */ .section.post.preview .pv3-viewport{ position:absolute; /* These are intentionally conservative defaults. We'll measure & lock them next step. */ left: 12.5%; top: 6.8%; width: 75%; height: 86.2%; border-radius: 28px; overflow:hidden; background: #0b0d12; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 14px 40px rgba(255,255,255,.03); } /* Empty canvas look: premium, subtle vignette */ .section.post.preview .pv3-blank{ width:100%; height:100%; background: radial-gradient(120% 80% at 50% 10%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.0) 30%), #0b0d12; } /* ================================ v3.3.0 PREVIEW CORE FIXES - Match wrapper aspect ratio to provided PNG (512x1024 = 1/2) - Center phone in preview column - Prevent stretching that breaks viewport alignment ================================ */ .section.post.preview .pv3-root{ align-items:center; padding: 12px 0 18px; } .section.post.preview .pv3-phone{ width: min(420px, 96%); aspect-ratio: 1 / 2; /* matches iphone_shell.png ratio */ } /* Let images define the box without stretching artifacts */ .section.post.preview .pv3-shadow, .section.post.preview .pv3-shell{ object-fit: contain; } /* More realistic shadow positioning (no big drift) */ .section.post.preview .pv3-shadow{ transform: translateY(8px) scale(1.01); opacity: .78; } /* Temporary viewport rect tuned for this PNG family (can be calibrated later) */ .section.post.preview .pv3-viewport{ left: 14.2%; top: 7.2%; width: 71.6%; height: 85.6%; border-radius: 30px; } /* ================================ v3.3.0 PREVIEW CORE FIXES - Use centered iPhone assets (single phone, no drift) - Viewport rect aligned to centered shell ================================ */ .section.post.preview .pv3-phone{ width: min(420px, 96%); aspect-ratio: 1 / 2; } .section.post.preview .pv3-viewport{ left: 25.6%; top: 10.0%; width: 42.0%; height: 80.0%; border-radius: 30px; } /* Optional: subtle inner bezel vignette to feel premium */ .section.post.preview .pv3-blank{ background: radial-gradient(120% 80% at 50% 10%, rgba(255,255,255,.05), rgba(255,255,255,0) 58%), radial-gradient(120% 120% at 50% 110%, rgba(0,0,0,.55), rgba(0,0,0,0) 55%), #0b0d12; } /* ================================ v3.3.0 PREVIEW POSITIONING FIX Goal: phone centered in Preview column (not drifting right), and vertically balanced for premium look. ================================ */ .section.post.preview{ display:flex; flex-direction:column; } .section.post.preview .pv3-root{ width:100%; display:flex; justify-content:center; align-items:center; padding: 0; margin: 0 auto; min-height: 560px; /* keeps it visually anchored */ } .section.post.preview .pv3-phone{ width: min(460px, 92%); aspect-ratio: 1 / 2; margin: 0 auto; } /* subtle breathing room inside the preview frame */ .section.post.preview .pv3-shadow{ transform: translateY(10px) scale(1.01); opacity:.72; } /* viewport rect - keep same as v3.3.0 for now */ /* ================================ v3.3.0 ASSET CENTERING + PREVIEW FIX - iphone_*_center.png are now truly centered ================================ */ .section.post.preview .pv3-root{ justify-content:center; } .section.post.preview .pv3-phone{ margin: 0 auto; } /* Optional: enable for debugging in DevTools :root{ --pv-debug: 0; } */ .section.post.preview .pv3-viewport{ outline: calc(var(--pv-debug) * 1px) solid rgba(0,255,0,.6); } /* ================================ v3.3.0 TRUE DEVICE FOUNDATION - SVG shell (chrome/glas), fixed geometry - Single viewport aligned to SVG screen rect (x=70 y=120 w=760 h=1710 on 900x1950) ================================ */ .section.post.preview .pv3-root{ width:100%; display:flex; justify-content:center; align-items:center; padding: 8px 0 18px; min-height: 600px; } .section.post.preview .tdf-phone{ position:relative; width: min(470px, 92%); aspect-ratio: 9 / 19.5; } .section.post.preview .tdf-svg{ width:100%; height:100%; display:block; } /* Viewport aligned to the SVG screen rect */ .section.post.preview .tdf-viewport{ position:absolute; /* 70/900 = 7.78% | 120/1950 = 6.15% | 760/900 = 84.44% | 1710/1950 = 87.69% */ left: 7.78%; top: 6.15%; width: 84.44%; height: 87.69%; border-radius: 36px; /* visual match; fine-tune later */ overflow:hidden; background: radial-gradient(120% 80% at 50% 12%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0) 28%), #070a12; } /* v3.3: ensure the platform template fills the entire phone viewport */ .section.post.preview .tdf-viewport > .pv-screen{ position:absolute; inset:0; /* Allow realistic platform preview scrolling inside the phone */ overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius:0; padding:0; background:transparent; box-shadow:none; } /* Legacy selector (.section.post.preview .pv-screen) was intended for an older phone shell and shrank the screen via inset/padding. Force canonical sizing inside #pvViewport. */ #pvViewport > #pvScreen.pv-screen{ inset:0 !important; /* Safe-area padding so platform top-bars/bottom-navs don't clip against the phone shell */ padding:28px 10px 22px 10px !important; box-sizing:border-box !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; /* Make the phone screen scrollable (caption/comments/etc.) */ overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; scrollbar-width: none; /* Firefox */ /* Hard-disable legacy PNG mask that can collapse the viewport into a thin strip on some reloads/devices */ -webkit-mask-image: none !important; mask-image: none !important; } /* Hide scrollbars (WebKit) while keeping scroll behavior */ #pvViewport > #pvScreen.pv-screen::-webkit-scrollbar{ width:0; height:0; } /* Empty canvas look (keep it clean) */ .section.post.preview .pv3-blank{ width:100%; height:100%; } /* Optional debug: in DevTools set :root { --pv-debug: 1; } */ :root{ --pv-debug: 0; } .section.post.preview .tdf-viewport{ outline: calc(var(--pv-debug) * 1px) solid rgba(0,255,0,.55); } /* Preview actions (future: AutoPost) */ .section.post.preview .previewActions{display:flex;justify-content:center;margin-top:12px} .section.post.preview .previewActions .btn{min-width:220px} /* ================================ v3.3.0 Instagram Screenshot UI (forced) ================================ */ .section.post.preview .ig-screen{ width:100%; height:100%; } .section.post.preview .ig{ width:100%; height:100%; display:flex; flex-direction:column; background:#000; color:#fff; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .section.post.preview .ig-statusbar{ height:34px; padding:10px 14px 0; display:flex; align-items:center; justify-content:space-between; font-size:12px; letter-spacing:.2px; color:rgba(255,255,255,.92); } .section.post.preview .ig-sys{ display:flex; gap:8px; align-items:center; } .section.post.preview .ig-signal, .section.post.preview .ig-wifi, .section.post.preview .ig-batt{ display:inline-block; height:10px; width:16px; border-radius:2px; background:rgba(255,255,255,.65); opacity:.9; } .section.post.preview .ig-batt{ width:22px; border-radius:3px; position:relative; } .section.post.preview .ig-batt::after{ content:""; position:absolute; right:-3px; top:3px; width:3px; height:4px; border-radius:1px; background:rgba(255,255,255,.65); } .section.post.preview .ig-topbar{ height:46px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.08); } .section.post.preview .ig-logo{ font-weight:700; font-size:16px; letter-spacing:.2px; } .section.post.preview .ig-top-icons{ display:flex; gap:12px; align-items:center; } .section.post.preview .ig-post{ flex:1; display:flex; flex-direction:column; } .section.post.preview .ig-post-hdr{ display:flex; align-items:center; gap:10px; padding:10px 14px; } .section.post.preview .ig-avatar{ width:28px; height:28px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,0) 55%), #20242d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); } .section.post.preview .ig-user{ flex:1; min-width:0; } .section.post.preview .ig-username{ font-weight:700; font-size:13px; line-height:1.1; } .section.post.preview .ig-location{ font-size:11px; color:rgba(255,255,255,.70); margin-top:2px; } .section.post.preview .ig-more{ color:rgba(255,255,255,.75); letter-spacing:2px; } .section.post.preview .ig-media{ width:100%; aspect-ratio:1/1; background: radial-gradient(80% 60% at 25% 25%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%), linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0) 40%), #141824; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); } .section.post.preview .ig-actions{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px 6px; } .section.post.preview .ig-actions-left, .section.post.preview .ig-actions-right{ display:flex; gap:14px; align-items:center; } .section.post.preview .ig-ico{ width:18px; height:18px; display:inline-block; border-radius:4px; background:rgba(255,255,255,.78); opacity:.92; } .section.post.preview .ig-ico-msg{ height:14px; border-radius:3px; } .section.post.preview .ig-ico-plus{ border-radius:5px; } .section.post.preview .ig-meta{ padding:0 14px 10px; font-size:12.5px; line-height:1.35; } .section.post.preview .ig-likes{ margin-bottom:6px; } .section.post.preview .ig-caption strong{ font-weight:700; } .section.post.preview .ig-comments, .section.post.preview .ig-timeago{ margin-top:6px; color:rgba(255,255,255,.62); font-size:11.5px; } .section.post.preview .ig-bottomnav{ height:54px; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-around; padding:0 10px; } .section.post.preview .ig-nav{ width:22px; height:22px; border-radius:6px; background:rgba(255,255,255,.72); opacity:.9; } .section.post.preview .ig-nav-prof{ border-radius:50%; width:24px; height:24px; } /* ================================ v3.3.0 Instagram Dark β€” Pixel Lock Overrides ================================ */ .section.post.preview .ig-topbar{ height: 48px; padding: 0 14px; } .section.post.preview .ig-brand{ display:flex; align-items:center; gap:10px; } .section.post.preview .ig-brand-ico{ width:20px; height:20px; display:inline-flex; color: rgba(255,255,255,.92); } .section.post.preview .ig-brand-ico svg{ width:20px; height:20px; } .section.post.preview .ig-brand-text{ font-size: 16px; font-weight: 700; letter-spacing: .2px; color: rgba(255,255,255,.96); } .section.post.preview .ig-btn{ width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; color: rgba(255,255,255,.92); } .section.post.preview .ig-btn svg{ width:22px; height:22px; } .section.post.preview .ig-ico{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; color: rgba(255,255,255,.92); } .section.post.preview .ig-ico svg{ width:24px; height:24px; } .section.post.preview .ig-post-hdr{ padding: 10px 14px 8px; } .section.post.preview .ig-avatar{ width:28px; height:28px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,0)), #1a1f2a; } .section.post.preview .ig-username{ font-size: 13px; font-weight: 700; } .section.post.preview .ig-location{ font-size: 11px; } .section.post.preview .ig-media{ background:#0b0f18; } .section.post.preview .ig-media-img{ width:100%; height:100%; object-fit: cover; display:block; } .section.post.preview .ig-actions{ padding: 10px 12px 4px; } .section.post.preview .ig-actions-left{ gap: 14px; } .section.post.preview .ig-actions-right{ gap: 10px; } .section.post.preview .ig-meta{ padding: 0 14px 12px; font-size: 12.5px; } .section.post.preview .ig-strong{ font-weight: 700; } .section.post.preview .ig-caption{ margin-top: 6px; display:flex; gap:6px; } .section.post.preview .ig-cap-text{ display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden; } .section.post.preview .ig-tags{ margin-top: 6px; font-size: 12px; line-height: 1.3; } .section.post.preview .ig-muted{ color: rgba(255,255,255,.62); } .section.post.preview .ig-bottomnav{ height: 58px; padding-bottom: 6px; /* iOS safe area feel */ } .section.post.preview .ig-nav{ width: 26px; height: 26px; display:inline-flex; align-items:center; justify-content:center; color: rgba(255,255,255,.92); } .section.post.preview .ig-nav svg{ width:24px; height:24px; } .section.post.preview .ig-nav-prof svg{ width:26px; height:26px; } /* v3.3.0 reset old placeholder blocks */ .section.post.preview .ig-ico, .section.post.preview .ig-btn, .section.post.preview .ig-nav{ background: none !important; border-radius: 0 !important; opacity: 1 !important; } /* v3.3.0 IG status icons (SVG) */ .section.post.preview .ig-sys-ico{ display:inline-flex; width: 18px; height: 18px; align-items:center; justify-content:center; color: rgba(255,255,255,.90); opacity: .95; } .section.post.preview .ig-sys-ico svg{ width:18px; height:18px; display:block; } .section.post.preview .ig-sys-batt svg{ width:28px; height:14px; } /* App icon mail marker */ .topbar .app-icon .mail{ position:absolute; bottom:6px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:4px; font-size:10px; line-height:1; color:rgba(225,228,232,0.95); text-shadow:0 1px 2px rgba(0,0,0,0.65); } .topbar .app-icon .mail .env{font-size:11px;opacity:.95} .topbar .app-icon .mail .at{ font-weight:800; font-size:10px; opacity:.95; } /* Tips toggle -> Post green */ .toggle input{ accent-color: var(--post); } .toggle input:checked + span{ color: var(--post); font-weight:800; text-shadow: 0 0 10px rgba(51,204,153,0.25); } /* IG avatar uses app logo colors */ .section.post.preview .ig-avatar-app{ width:34px;height:34px;border-radius:50%; display:flex;align-items:center;justify-content:center; gap:1px; background: radial-gradient(circle at 30% 18%, rgba(255,255,255,0.12), transparent 45%), linear-gradient(145deg,#0a0c16 0%, #1B1C26 40%, #6D5DFE 75%, #1EB5E9 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); position:relative; } .section.post.preview .ig-avatar-app .d{color:var(--create);} .section.post.preview .ig-avatar-app .p{color:var(--post);} .section.post.preview .ig-avatar-app .b{ background:linear-gradient(180deg, #F2E4A6 0%, #C9A227 46%, #8B6D00 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .section.post.preview .ig-avatar-app span{ font-size:11px; font-weight:900; font-family: var(--font-ui); transform: translateY(-0.5px); } /* TIPs toggle uses Post-green */ .toggle input[type="checkbox"]{ accent-color: var(--post); filter: drop-shadow(0 0 6px rgba(46,204,113,0.35)); } .toggle span{ color: rgba(235,238,244,0.92); } /* DNA gradient text accents */ .title-group .h1 .brand, .title-group .h1 .product{ background: var(--dnaGradient); -webkit-background-clip: text; background-clip: text; color: transparent; /* Hard silver edge so the DNA-gradient stays readable over the header */ -webkit-text-stroke: 1px rgba(220, 226, 236, 0.90); text-shadow: 0 1px 0 rgba(10, 12, 18, 0.78), 1px 0 0 rgba(220, 226, 236, 0.55), -1px 0 0 rgba(220, 226, 236, 0.55), 0 -1px 0 rgba(220, 226, 236, 0.45), 0 0 18px rgba(77,170,255,0.16); } /* Subtitle ("Multiplatform...") needs a clean metallic edge too */ .title-group .h2{ -webkit-text-stroke: 0.6px rgba(220, 226, 236, 0.40); text-shadow: 0 1px 0 rgba(10, 12, 18, 0.70); } .tip::after{display:none;} /* Force consistent TIPs checkbox styling (Chrome/Android) */ .toggle input[type="checkbox"]{ appearance:none; -webkit-appearance:none; width:18px;height:18px;border-radius:5px; border:2px solid rgba(60,220,140,0.95); background: rgba(10,18,14,0.35); box-shadow: 0 0 0 1px rgba(60,220,140,0.15); display:inline-grid; place-items:center; } .toggle input[type="checkbox"]::after{ content:""; width:10px;height:6px; border-left:3px solid rgba(8,18,12,0.0); border-bottom:3px solid rgba(8,18,12,0.0); transform: rotate(-45deg); } .toggle input[type="checkbox"]:checked{ background: rgba(60,220,140,0.95); box-shadow: 0 0 14px rgba(60,220,140,0.35); } .toggle input[type="checkbox"]:checked::after{ border-left-color: rgba(8,18,12,0.95); border-bottom-color: rgba(8,18,12,0.95); } .ig-avatar{width:36px;height:36px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,0.08);} .ig-avatar-img{width:100%;height:100%;object-fit:cover;display:block;} /* --- v3.3.0 header + icon polish overrides --- */ .header-left{ gap: 14px; } .app-icon{ filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); } .title .h1{ display: flex; align-items: baseline; gap: .12em; letter-spacing: -0.03em; } .title .h1 .brand, .title .h1 .product{ background: var(--dnaGradient); -webkit-background-clip: text; background-clip: text; color: transparent; /* Thin hard-silver edge: readable, not hazy */ -webkit-text-stroke: 0.8px rgba(232,235,242,.92); text-shadow: 0 1px 0 rgba(8,10,14,.75), 0 0 10px rgba(0,0,0,.35); } /* keep subtitle readable without haze */ .title .sub{ color: rgba(232,236,255,.78); text-shadow: 0 2px 8px rgba(0,0,0,.45); } /* TIPS: white label, green checkbox, yellow bulb; no underline bar */ label.toggle span{ color: rgba(240,244,255,.92); font-weight: 600; background: transparent; box-shadow: none; border: 0; } label.toggle span::before{ background: #f5d24a; filter: drop-shadow(0 0 10px rgba(245,210,74,.35)); } label.toggle input{ accent-color: #2bdc7c; } /* slightly calmer green */ .tip{ color: rgba(195,255,220,.95); font-weight: 400; border-left: 0; box-shadow: none; } .tip::after{ display:none; } .ig-avatar-app img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;} /* ================================ v3.3.0 PREVIEW MASTER β€” Platform-realistic frames ================================== */ .pv-screen{ width:100%; height:100%; } /* Shared preview reset */ .pv-ui{ width:100%; height:100%; display:flex; flex-direction:column; background:#000; color:#fff; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .pv-row{ display:flex; align-items:center; } .pv-muted{ color: rgba(255,255,255,.65); } .pv-hr{ border-top:1px solid rgba(255,255,255,.08); } .pv-svg-ico{ width:18px; height:18px; display:inline-block; } .pv-svg-ico.lg{ width:20px; height:20px; } .pv-svg-ico.xl{ width:22px; height:22px; } .pv-statusbar{ height:34px; padding:10px 14px 0; display:flex; align-items:center; justify-content:space-between; font-size:12px; letter-spacing:.2px; color:rgba(255,255,255,.92); } .pv-statusbar .sys{ display:flex; gap:8px; align-items:center; } .pv-statusbar svg{ width:18px; height:12px; opacity:.9; } /* Instagram (dark) */ .ig{ background:#000; } .ig-topbar{ height:46px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.08); } .ig-logo{ font-weight:700; font-size:16px; letter-spacing:.2px; } .ig-top-icons{ display:flex; gap:12px; align-items:center; } .ig-post{ flex:1; display:flex; flex-direction:column; } .ig-post-hdr{ display:flex; align-items:center; gap:10px; padding:10px 14px; } .ig-avatar{ width:28px; height:28px; border-radius:50%; overflow:hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); background:#20242d; } .ig-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .ig-username{ font-weight:700; font-size:13px; line-height:1.1; } .ig-location{ font-size:11px; color:rgba(255,255,255,.70); margin-top:2px; } .ig-media{ width:100%; aspect-ratio:1/1; background:#141824; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); position:relative; overflow:hidden; } .ig-media img{ width:100%; height:100%; object-fit:cover; display:block; } .ig-actions{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px 6px; } .ig-actions-left, .ig-actions-right{ display:flex; gap:14px; align-items:center; } .ig-meta{ padding:0 14px 10px; font-size:12.5px; line-height:1.35; } .ig-likes{ margin-bottom:6px; } .ig-caption strong{ font-weight:700; } .ig-comments, .ig-timeago{ margin-top:6px; color:rgba(255,255,255,.62); font-size:11.5px; } .ig-bottomnav{ height:54px; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-around; padding:0 10px; } /* TikTok */ .tt{ background:#000; } .tt-top{ height:54px; display:flex; align-items:flex-end; justify-content:center; padding: 0 14px 8px; } .tt-tabs{ display:flex; gap:18px; font-weight:650; font-size:14px; } .tt-tabs .muted{ color: rgba(255,255,255,.55); font-weight:600; } .tt-video{ position:relative; flex:1; background:#000; overflow:hidden; } .tt-video img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform: scale(1.02); } .tt-overlay{ position:absolute; left:50%; /* keep headline away from caption region */ top:42%; transform: translate(-50%,-50%); width:78%; text-align:center; font-weight:800; letter-spacing:.2px; line-height:1.05; color:#fff; text-shadow: 0 10px 24px rgba(0,0,0,.80); padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.58); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); z-index: 60; } .tt-overlay.small{ font-size:18px; } .tt-overlay.med{ font-size:22px; } .tt-overlay.lg{ font-size:26px; } .tt-right{ /* TikTok-native rail: floating items, no "pill" container */ position:absolute; top: 86px; /* 34 statusbar + ~52 topbar */ right: 10px; bottom: 92px; /* above dots + bottomnav */ width: 56px; z-index: 50; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap: 14px; padding: 0; background: transparent; backdrop-filter: none; box-shadow: none; border-radius: 0; /* hard stop any accidental image bleed */ background-image:none !important; } /* Profile avatar: rounded-square app icon, with subtle TikTok-ish add badge */ .tt-right .ava{ width: 46px; height: 46px; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.06); box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.78); position: relative; } .tt-right .ava::after{ content:"+"; position:absolute; left:50%; bottom:-10px; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 999px; display:flex; align-items:center; justify-content:center; font-weight: 900; font-size: 14px; color:#fff; background: #ff2d55; box-shadow: 0 8px 18px rgba(0,0,0,.45); } .tt-right .ava img{ width:100%; height:100%; object-fit:cover; display:block; } .tt-right .ico{ width: 44px; height: 44px; display:flex; align-items:center; justify-content:center; border-radius: 999px; background: rgba(0,0,0,.22); box-shadow: 0 10px 24px rgba(0,0,0,.35); } .tt-right .ico svg{ width: 18px; height: 22px; opacity: .95; } .tt-right .count{ font-size:11px; color:rgba(255,255,255,.88); margin-top:-8px; text-shadow: 0 6px 14px rgba(0,0,0,.55); } .tt-bottom{ position:absolute; left:0; right:0; bottom:0; padding: 10px 74px 16px 14px; /* leave space for right rail */ background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.65) 45%, rgba(0,0,0,.85)); } .tt-user{ font-weight:800; font-size:13px; margin-bottom:6px; } .tt-cap{ font-size:12.5px; line-height:1.25; color: rgba(255,255,255,.92);;white-space:pre-line} .tt-music{ margin-top:8px; font-size:12px; color: rgba(255,255,255,.78); display:flex; gap:8px; align-items:center; } .tt-dots{ position:absolute; bottom: 82px; left: 50%; transform: translateX(-50%); display:flex; gap:6px; } .tt-dots span{ width:6px; height:6px; border-radius:999px; background: rgba(255,255,255,.35); } .tt-dots span.active{ background: rgba(255,255,255,.92); } .tt-bottomnav{ height: 54px; border-top: 1px solid rgba(255,255,255,.10); display:flex; align-items:center; justify-content:space-around; padding: 0 10px; background:#000; } /* Simple slide transition */ .tt-fade{ animation: ttFade .22s ease-out; } @keyframes ttFade{ from{ opacity:.35 } to{ opacity:1 } } /* Ensure preview media fills the platform media box */ #previewImg{width:100%;height:100%;display:block;object-fit:cover;} /* ========================= v3.4.0 Action Rail Layout ========================= */ .panel-body{ display:flex; flex-direction:column; min-height: 820px; /* ensures weighted rail + bottom mass */ gap: 14px; } .zone-core{ } .zone-advanced{ margin-top: 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); min-height: 220px; /* visual weight under rail */ } .zone-title{ font-weight: 700; font-size: 12px; letter-spacing: .2px; opacity: .9; margin-bottom: 10px; } .action-rail{ display:flex; flex-wrap: wrap; gap: 10px; justify-content:center; align-items:center; padding: 12px 10px; margin-top: auto; /* push downward */ margin-bottom: 10px; /* sits above zone-advanced */ } /* Secondary rail inside advanced */ .rail-secondary{ display:flex; gap: 10px; flex-wrap: wrap; } /* Planning skeleton */ .planning-skeleton{ display:flex; flex-direction:column; gap: 8px; opacity: .9; } .ps-row{ display:flex; justify-content:space-between; font-size: 12px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); } .ps-row .muted{ opacity:.65; } /* ========================= Metallic Button System (matches app icon vibe) ========================= */ .btn-metal{ position:relative; border-radius: 14px; padding: 12px 16px; min-height: 44px; font-weight: 700; letter-spacing: .2px; color: rgba(245,248,255,.92); background: linear-gradient(180deg, rgba(20,26,42,.95), rgba(10,12,18,.95)); border: 2px solid rgba(210,216,226,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -10px 18px rgba(0,0,0,.55), 0 10px 28px rgba(0,0,0,.35); cursor:pointer; } .btn-metal::before{ content:""; position:absolute; inset: 2px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); pointer-events:none; } .btn-metal::after{ content:""; position:absolute; left: 10px; right: 10px; bottom: 6px; height: 10px; border-radius: 999px; opacity: .55; filter: blur(10px); background: transparent; pointer-events:none; } .btn-metal:hover{ transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -10px 18px rgba(0,0,0,.55), 0 14px 34px rgba(0,0,0,.42); } .btn-metal:active{ transform: translateY(0px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -8px 14px rgba(0,0,0,.65), 0 10px 26px rgba(0,0,0,.35); } .btn-metal[disabled], .btn-metal.is-locked{ opacity: .55; cursor: not-allowed; transform:none; } .btn-secondary{ font-weight: 650; opacity:.95; } .btn-generate::after{ background: rgba(214,176,77,.85); } .btn-preview::after{ background: rgba(109,93,254,.85); } .btn-execute::after{ background: rgba(46,224,142,.80); } /* === STEP 1: Header meta inline behind title === */ .header-meta-inline{ display:flex; align-items:center; gap:14px; margin-left:18px; } .title-group{ display:flex; align-items:center; gap:18px; } .header-meta-inline .topbar-right{ display:flex; align-items:center; gap:12px; } /* === STEP 1B: Header inline row behind title; restore subtitle; avoid duplicate version === */ .title.title-group{ display:flex; flex-direction:column; gap:2px; } .brand{ display:flex; align-items:center; gap:14px; } /* Put meta row directly behind title block, on same horizontal lane under title */ .header-inline-row{ display:flex; align-items:center; gap:14px; margin-left: 12px; flex-wrap: wrap; } /* Ensure status lamp + tips + ticker sit nicely */ .header-inline-row .topbar, .header-inline-row .topbar-right{ display:flex; align-items:center; gap:12px; } /* Hide any legacy version text element if still present */ #dpbVersion{ display:none !important; } /* === STEP 2: Larger Premium App Icon === */ /* ========================================= RELEASE CANDIDATE: HEADER LOCK (Visual 6 leads) - Banner never shifts - TIPs/ticker/build badge/last action are overlays ========================================= */ .topbar{ position: sticky; top: 0; z-index: 50; height: 120px; /* fixed header stage */ padding: 0 14px; /* keep side breathing room */ } /* Banner is the anchor */ .topbar .brand{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 10; } /* Center lane (TIPs + ticker) */ .topbar .header-inline-row{ position: absolute; left: 360px; /* aligns after banner */ right: 340px; /* leaves room for right meta */ top: 50%; transform: translateY(-50%); z-index: 6; margin: 0; } /* Right meta (badge + last action) */ .topbar .build-badge{ position: absolute; right: 16px; top: 22px; z-index: 6; } .topbar .last-action{ position: absolute; right: 16px; top: 64px; z-index: 6; opacity: .85; font-size: 12px; color: rgba(255,255,255,.78); white-space: nowrap; } @media (max-width: 980px){ .topbar{ height: 132px; } .topbar .header-inline-row{ left: 14px; right: 14px; top: 105px; transform:none; } .topbar .build-badge{ top: 18px; } .topbar .last-action{ top: 56px; } } .app-icon, .logo.app-icon{ width: 88px !important; height: 88px !important; border-radius: 22px !important; box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 2px rgba(255,255,255,0.08); } .app-icon img, .logo.app-icon img{ width: 100% !important; height: 100% !important; object-fit: cover; } /* Adjust title alignment after bigger icon */ .brand{ align-items: center; gap: 22px !important; } .title.title-group{ justify-content: center; } /* === STEP 3: Premium Title Styling (match App Icon DNA style) === */ /* Reduce space between icon and title */ .brand{ gap: 14px !important; } /* Stack DigiCrate and Post Builder tighter */ .title.title-group{ line-height: 1.05 !important; gap: 2px !important; } /* DigiCrate (top line) */ .title .brand{ font-size: 32px !important; font-weight: 800 !important; letter-spacing: .5px; background: linear-gradient(180deg,#9fb3ff 0%,#5f7bff 40%,#2e49ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 10px rgba(80,120,255,0.35), 0 0 2px rgba(255,255,255,0.3); } /* Post Builder (second line) */ .title .product{ font-size: 20px !important; font-weight: 700 !important; letter-spacing: .4px; background: linear-gradient(180deg,#ffd77a 0%,#e5a900 60%,#b88400 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 8px rgba(255,200,0,0.35); } /* Subtitle spacing tighter */ .h2{ margin-top: 2px !important; font-size: 13px; opacity: .85; } /* === STEP 4: Restore Original Icon + 3D Metallic Title === */ .app-icon, .logo.app-icon{ width: 96px !important; height: 96px !important; border-radius: 24px !important; } /* 3D Metallic chrome style for title */ .title .brand, .title .product{ font-weight: 900 !important; letter-spacing: .6px; -webkit-text-stroke: 1px rgba(0,0,0,0.55); text-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 2px 0 rgba(0,0,0,0.6), 0 6px 14px rgba(0,0,0,0.6); } /* DigiCrate β€” chrome blue tone */ .title .brand{ font-size: 34px !important; background: linear-gradient( 180deg, #d7e8ff 0%, #5a8dff 40%, #1f49ff 75%, #0e2c9e 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Post Builder β€” gold metallic */ .title .product{ font-size: 22px !important; background: linear-gradient( 180deg, #fff2b0 0%, #f3c63a 45%, #d79a00 75%, #8a5d00 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* === STEP 4B: Title layout - DigiCrate top, Post Builder below (together) === */ .title.title-group{ display:flex; flex-direction:column; line-height:1.05 !important; gap:2px !important; } .title .h1{ display:flex; flex-direction:column; } .title .brand{ display:block; } .title .product{ display:block; margin-top:2px; } /* === FINAL ICON SHARP OPTIMIZATION === */ .app-icon img, .logo.app-icon img{ image-rendering: auto; filter: contrast(1.02) saturate(1.05); } /* === v3.5.6 TITLE IMAGE (letters only) === */ .dpb-title-image{ height: 62px; width: auto; display:block; margin-top: 2px; } @media (min-width: 1200px){ .dpb-title-image{ height: 68px; } } .brand{ gap: 12px !important; } /* === v3.5.7: Header composition A&B (title nearly icon-height, slightly smaller) === */ .brand{align-items:center !important;gap:10px !important;} .app-icon,.logo.app-icon{width:96px !important;height:96px !important;border-radius:24px !important;} .dpb-title-image{height:78px !important;width:auto !important;display:block;margin:0 !important;} @media (min-width:1200px){.dpb-title-image{height:84px !important;}} .title.title-group .h2{margin-top:4px !important;line-height:1.15 !important;opacity:.9;} /* === v3.5.9 step1 title swap: use Visual 2 title image === */ .dpb-title-image{ height: 84px !important; } /* === v3.6.0 step2: Integrated title (no pasted background) === */ .dpb-title-image{ height: 84px !important; width: auto !important; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.55)) drop-shadow(0 0 10px rgba(120,70,255,0.22)); } /* v3.6.1 PackStore rename applied (rebuild) */ /* --- Ro hotfix: hide scrollbars to prevent "right strip" artifacts in device preview --- */ #pvViewport > #pvScreen.pv-screen{ overflow-x:hidden !important; scrollbar-width:none; /* Firefox */ } #pvViewport > #pvScreen.pv-screen::-webkit-scrollbar{ width:0; height:0; } /* TikTok must be edge-to-edge (no side padding), otherwise it looks like a right-side strip */ #pvViewport > #pvScreen.pv-screen[data-platform="tiktok"]{ padding:0 !important; overflow:hidden !important; } /* === DPB Header: use combined brand banner (app icon + name) === */ .brand{gap:0 !important;} .brandBanner{ height:72px; width:auto; display:block; max-width:min(520px, 62vw); object-fit:contain; } @media (max-width: 980px){ .brandBanner{height:64px;max-width:70vw;} } @media (max-width: 520px){ .brandBanner{height:54px;max-width:78vw;} } /* === TikTok: hide right-side strip by biasing crop to the left === */ .tt-video img{ object-position: 38% 50% !important; transform: scale(1.06) !important; } /* === Facebook: swap emoji icons for SVG and keep sizing consistent === */ .fb-top-icons{display:flex;gap:10px;align-items:center;} .fb-top-icons .fb-ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:#cbd5e1;} .fb-top-icons .fb-ico svg{width:18px;height:18px;} /* ============================ RC1.1 FIXES (Readability + Preview polish) ============================ */ /* Make topbar brand readable at 100% */ .topbar .app-icon{width:76px;height:76px;border-radius:20px;} .topbar .app-icon img{border-radius:18px;} .topbar .title .h1{font-size:22px;line-height:1.05;letter-spacing:.2px;} .topbar .title .h2{font-size:13px;opacity:.9;} .topbar .title .accent{color: var(--accent2, #F6C451);} /* soft gold */ /* Ensure inner accent line is ALWAYS visible (continuous) */ .panel::after{z-index:5;} .panel > *{position:relative;z-index:2;} /* keep content above background but below inner line */ .panel::after{pointer-events:none;} /* Preview panel: keep inner line aligned with outer border */ .panel{outline:none;} /* TikTok right rail: TikTok-native anchors + spacing (no pill container) */ .tt-right{ top: 86px; right: 10px; bottom: 92px; width: 56px; padding: 0; gap: 14px; justify-content: flex-start; background: transparent; backdrop-filter: none; border-radius: 0; box-shadow: none; } /* Profile avatar: rounded-square app icon + add badge */ .tt-right .ava{ width: 46px; height: 46px; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.78); } /* Topbar layout: brand left, status center, meta right */ .topbar{display:flex;align-items:center;gap:16px;} .topbar .brand{display:flex;align-items:center;gap:14px;flex:0 0 auto;} .topbar .header-inline-row{flex:1;display:flex;justify-content:center;margin-left:0;} .topbar .build-badge{margin-left:auto;} .topbar .last-action{margin-left:12px;} /* ============================ Platform logos & avatars (native) ============================ */ .pv-logo{ width: 18px; height: 18px; display: block; } .ig-logo, .fb-brand, .li-brand, .x-brand{ display: flex; align-items: center; gap: 8px; } /* Make topbar brands look like app UI */ .ig-logo{ font-weight: 700; } .fb-brand, .li-brand, .x-brand{ font-weight: 900; } /* Avatar images: no distortion */ .ig-avatar, .fb-avatar, .li-avatar, .x-avatar, .tt-right .ava{ overflow: hidden; } .ig-avatar img, .fb-avatar img, .li-avatar img, .x-avatar img, .tt-right .ava img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* LinkedIn/X top icons align */ .li-top-icons, .x-top-icons{ display:flex; align-items:center; gap: 10px; } .li-top-icons .pv-svg-ico, .x-top-icons .pv-svg-ico{ width: 18px; height: 18px; } /* ===== v4.0 Launch MVP additions ===== */ .quickstart{ max-width: 1240px; margin: 14px auto 0; padding: 14px 16px; border-radius: 18px; border: 3px solid rgba(30,108,255,.75); /* InPuts blue */ position: relative; } .quickstart:before{ content:""; position:absolute; inset:6px; border-radius: 14px; border: 1px solid rgba(30,108,255,.55); pointer-events:none; } .qs-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .qs-title{ font-family: var(--fontTitle, "Playfair Display", serif); font-weight:700; letter-spacing:.3px; } .qs-actions{ display:flex; align-items:center; gap:12px; } .qs-toggle{ font-size: 12px; opacity:.9; } .qs-toggle input{ transform: translateY(1px); } .qs-close{ width:32px;height:32px;border-radius:10px; border:1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); cursor:pointer; } .qs-sub{ margin-top:10px; font-weight:600; opacity:.9; } .qs-steps{ margin:8px 0 0 18px; padding:0; } .qs-steps li{ margin: 4px 0; } .qs-note{ margin-top:10px; font-size:12px; opacity:.85; color: rgba(170,210,255,.95); } .quickstart.collapsed .qs-body{ display:none; } .quickstart.collapsed{ padding-bottom: 10px; } .progress-row{ grid-column: 1 / -1; display:grid; /* Match the main 3-column layout so headings sit centered above each section */ grid-template-columns: 11fr 5fr 6fr; gap: 14px; align-items:center; margin: 10px 0 4px; } @media (max-width: 980px){ .progress-row{ grid-template-columns: 1fr; gap: 10px; } } /* ---- Readiness / progress (soft guidance, not a hard gate) ---- */ .mvp-readiness{ margin:12px 0 16px; padding:12px 12px 10px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.10); box-shadow:0 10px 30px rgba(0,0,0,.25); } .readiness-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; } .readiness-title{ font-weight:700; letter-spacing:.2px; opacity:.92; } .readiness-pct{ font-variant-numeric: tabular-nums; font-weight:800; opacity:.85; } .readiness-bar{ height:10px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; border:1px solid rgba(255,255,255,.12); } .readiness-fill{ height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg, rgba(90,167,255,.95), rgba(255,208,90,.95), rgba(55,255,165,.90)); box-shadow:0 0 18px rgba(90,167,255,.25); transition:width .25s ease; } .readiness-list{ list-style:none; padding:10px 2px 0; margin:0; display:grid; gap:6px; font-size:12.5px; opacity:.9; } .readiness-item{ display:flex; align-items:center; gap:8px; } .readiness-detail{ margin-left:auto; font-size:12px; opacity:.75; max-width:52%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .readiness-dot{ width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); box-shadow:0 0 0 2px rgba(0,0,0,.25) inset; } .readiness-item.is-done .readiness-dot{ background:rgba(42,187,112,.35); border-color:rgba(42,187,112,.65); box-shadow:0 0 10px rgba(42,187,112,.25); } .readiness-label{opacity:.92;} .prog-item{ text-align:center; font-family: var(--fontTitle, "Playfair Display", serif); font-weight:800; letter-spacing:.4px; font-size: 20px; opacity: .45; } .prog-item.active{opacity:1;} .prog-item.done{opacity:.9;} .prog-create{ color: rgba(30,108,255,1); } .prog-generate{ color: rgba(212,175,55,1); } .prog-post{ color: rgba(42,187,112,1); } .prog-item.active{ opacity: 1; } .prog-item.done{ opacity: 1; } .platform-tabs{ display:flex; gap:10px; flex-wrap:wrap; } .ptab{ min-height:64px; padding: 10px 16px; display:flex; align-items:center; gap:12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); color: #fff; font-weight: 700; } . /* Platform buttons β€” premium neutral (logo tile + accent), no full-brand backgrounds */ .ptab{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.92); cursor:pointer; position:relative; overflow:hidden; transition: transform .08s ease, border-color .12s ease, background .12s ease; } .ptab::before{ /* Premium accent ring (only visible when active) */ content:""; position:absolute; inset:0; border-radius:14px; padding:1px; background: linear-gradient( 135deg, color-mix(in srgb, var(--pfAccent) 85%, #ffffff 15%), rgba(255,255,255,0.22), color-mix(in srgb, var(--pfAccent) 70%, transparent) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition: opacity .14s ease; pointer-events:none; } .ptab::after{ /* Small status gem (only visible when active) */ content:""; position:absolute; right:10px; top:10px; width:8px; height:8px; border-radius:999px; background: var(--pfAccent, rgba(255,255,255,0.55)); box-shadow: 0 0 0 2px rgba(0,0,0,0.45), 0 0 14px color-mix(in srgb, var(--pfAccent) 55%, transparent); opacity:0; transform: scale(.9); transition: opacity .14s ease, transform .14s ease; pointer-events:none; } .ptab:hover{ border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.055) !important; } .ptab:active{ transform: translateY(0px); } .ptab.active{ border-color: rgba(255,255,255,0.30); background: rgba(255,255,255,0.06) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset, 0 14px 36px rgba(0,0,0,0.40); transform: translateY(-1px); } .ptab.active::before{ opacity:1; } .ptab.active::after{ opacity:1; transform: scale(1); } .ptab .picon{ width:34px; height:34px; padding:7px; border-radius:10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); display:block; object-fit:contain; } .ptab .pname{ font-weight:700; letter-spacing:.01em; } /* Platform accents */ .ptab[data-platform="instagram"]{ --pfAccent:#E1306C; } .ptab[data-platform="facebook"]{ --pfAccent:#1877F2; } .ptab[data-platform="linkedin"]{ --pfAccent:#0A66C2; } .ptab[data-platform="x"]{ --pfAccent:#FFFFFF; } .ptab[data-platform="tiktok"]{ --pfAccent:#25F4EE; } /* ============================ v4.0 FIX4 β€” Preview realism + readability ============================ */ /* Make platform brand marks in previews smaller / more realistic */ .section.post.preview .ig-topbar .pv-logo, .section.post.preview .fb-topbar .pv-logo, .section.post.preview .li-topbar .pv-logo, .section.post.preview .x-topbar .pv-logo{ width: 14px; height: 14px; } /* Allow image-based brand marks (e.g., LinkedIn in-bug) */ .section.post.preview .pv-logo-img{ width: 14px; height: 14px; display:block; object-fit:contain; } /* Avatars: less β€œbillboard”, more app-realistic */ .section.post.preview .ig-avatar{ width: 22px; height: 22px; } .section.post.preview .fb-avatar{ width: 24px; height: 24px; } .section.post.preview .li-avatar{ width: 24px; height: 24px; } .section.post.preview .x-avatar{ width: 24px; height: 24px; } .section.post.preview .ig-avatar img, .section.post.preview .fb-avatar img, .section.post.preview .li-avatar img, .section.post.preview .x-avatar img{ width:100%; height:100%; object-fit:cover; } /* New Features readability bump */ .uc-card{ background: rgba(12, 16, 30, 0.72); border-color: rgba(255,255,255,0.14); } .uc-title{ font-size: 14px; font-weight: 800; } .uc-sub{ color: rgba(255,255,255,0.82); } .new-features__summary{ color: rgba(255,255,255,0.94); } /* ============================ v4.0 FIX5 β€” Toast + New Features readability + Preview divider ============================ */ /* New Features: increase readability (keep premium) */ .new-features{ background: rgba(255,255,255,0.055); border-color: rgba(255,255,255,0.18); } .new-features__summary{ color: rgba(255,255,255,0.98); } .new-features__summary .muted{ color: rgba(255,255,255,0.70); } .new-features__body{opacity: .92;} /* LinkedIn platform icon: white "in" on official blue tile */ .ptab[data-platform="linkedin"] .picon{ background: #0A66C2; border-color: rgba(255,255,255,0.10); } /* Preview: remove the stray divider line under the device (zone-advanced top border) */ .section.post.preview .zone-advanced{ border-top: none; padding-top: 8px; } /* Toast (status) β€” option B */ .toast{ position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9999; max-width: min(720px, calc(100vw - 28px)); padding: 10px 14px; border-radius: 14px; background: rgba(0,0,0,0.62); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.88); font-size: 13px; letter-spacing: .2px; backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .toast.show{ opacity: 1; transform: translateX(-50%) translateY(-2px); } /* Header ticker stays, but becomes low-noise */ .ticker{ opacity: .55; font-size: 12px; } /* ========================= v4.0 Launch MVP β€” Fix6 - Remove Refinement & Upgrades block (HTML removed) - Fix stray preview divider/line - Improve New Features readability ========================= */ /* Prevent any inner-frame bleed / stray lines on some zoom levels */ .panel.preview{ overflow:hidden; } /* Extra safety: never show a divider line under the device in Preview */ .section.post.preview .zone-advanced{ border-top:none !important; } .section.post.preview .panel-body{ border-top:none !important; } /* Ensure content isn't hidden behind the toast */ body{ padding-bottom:80px; } /* New Features β€” higher contrast, readable at 100% */ .new-features{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.18) !important; } .new-features__summary{ color: rgba(255,255,255,.96) !important; } .new-features__summary .muted{ color: rgba(255,255,255,.72) !important; } .new-features__body{ opacity:.92 !important; } /* If any old rule dimmed the body, override it */ .new-features__body *{ opacity:1 !important; } /* ================================ DPB v4.0 β€” Preview platform skins Facebook / LinkedIn / X (aligns with pv-ui classes) ==================================*/ .pv-ui.facebook, .pv-ui.linkedin, .pv-ui.x{ height:100%; width:100%; display:flex; flex-direction:column; background:#0b0f17; color:#e9eef7; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } /* Shared: hide scrollbars inside phone frame */ .pv-ui.facebook *, .pv-ui.linkedin *, .pv-ui.x *{ box-sizing:border-box; } .pv-ui.facebook .fb-feed, .pv-ui.linkedin .li-feed, .pv-ui.x .x-feed{ flex:1; min-height:0; overflow:hidden; /* keep it screenshot-clean */ } /* ---------- Facebook ---------- */ .pv-ui.facebook .fb-top{ height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.10); background:rgba(10,12,18,.92); } .pv-ui.facebook .fb-brand svg{ height:18px; width:auto; display:block; } .pv-ui.facebook .fb-post{ display:flex; flex-direction:column; min-height:100%; } .pv-ui.facebook .fb-header{ display:flex; align-items:center; gap:10px; padding:12px 14px 10px; } .pv-ui.facebook .fb-avatar{ width:26px; height:26px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.10); flex:0 0 auto; } .pv-ui.facebook .fb-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .pv-ui.facebook .fb-name{ font-size:13px; font-weight:800; letter-spacing:.1px; } .pv-ui.facebook .fb-sub{ font-size:11px; color:rgba(233,238,247,.62); margin-top:1px; } .pv-ui.facebook .fb-more{ margin-left:auto; color:rgba(233,238,247,.55); font-weight:900; } .pv-ui.facebook .fb-media{ position:relative; width:100%; aspect-ratio:4/5; background:#000; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); } .pv-ui.facebook .fb-reactions{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px 8px; font-size:11px; color:rgba(233,238,247,.66); } .pv-ui.facebook .fb-carousel{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 14px 0; } .pv-ui.facebook .fb-caption{ padding:10px 14px 14px; font-size:12.5px; line-height:1.35; color:rgba(233,238,247,.90); white-space:pre-wrap; } /* ---------- LinkedIn ---------- */ .pv-ui.linkedin .li-top{ height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.10); background:rgba(10,12,18,.92); } .pv-ui.linkedin .li-brand svg{ height:18px; width:auto; display:block; } .pv-ui.linkedin .li-post{ display:flex; flex-direction:column; min-height:100%; } .pv-ui.linkedin .li-header{ display:flex; align-items:center; gap:10px; padding:12px 14px 10px; } .pv-ui.linkedin .li-avatar{ width:28px; height:28px; border-radius:6px; /* company-style */ overflow:hidden; background:rgba(255,255,255,.10); flex:0 0 auto; } .pv-ui.linkedin .li-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .pv-ui.linkedin .li-name{ font-size:13px; font-weight:850; } .pv-ui.linkedin .li-sub{ font-size:11px; color:rgba(233,238,247,.62); margin-top:1px; display:flex; align-items:center; gap:6px; } .pv-ui.linkedin .li-sub .globe{ font-size:12px; opacity:.85; } .pv-ui.linkedin .li-caption{ padding:0 14px 10px; font-size:12.5px; line-height:1.35; color:rgba(233,238,247,.92); white-space:pre-wrap; } .pv-ui.linkedin .li-media{ position:relative; width:100%; aspect-ratio:1.91/1; background:#000; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); } .pv-ui.linkedin .li-carousel{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 14px 0; } .pv-ui.linkedin .li-footer{ margin-top:auto; padding:12px 14px 14px; font-size:11px; color:rgba(233,238,247,.62); border-top:1px solid rgba(255,255,255,.06); } /* ---------- X ---------- */ .pv-ui.x .x-top{ height:44px; display:flex; align-items:center; justify-content:center; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.10); background:rgba(10,12,18,.92); } .pv-ui.x .x-brand svg{ height:18px; width:auto; display:block; } .pv-ui.x .x-tweet{ display:flex; gap:10px; padding:12px 14px 10px; } .pv-ui.x .x-avatar{ width:28px; height:28px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.10); flex:0 0 auto; } .pv-ui.x .x-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .pv-ui.x .x-main{ flex:1; min-width:0; } .pv-ui.x .x-head{ display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; } .pv-ui.x .x-name{ font-size:13px; font-weight:850; } .pv-ui.x .x-handle{ font-size:11px; color:rgba(233,238,247,.62); } .pv-ui.x .x-caption{ margin-top:8px; font-size:12.5px; line-height:1.35; color:rgba(233,238,247,.92); white-space:pre-wrap; } .pv-ui.x .x-media{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; margin-top:10px; border:1px solid rgba(255,255,255,.08); } .pv-ui.x .x-carousel{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0 0; } .ig-caption span{white-space:pre-line} /* ========================= MOBILE HOTFIX – DPB Plak onderaan style.css ========================= */ html, body { max-width: 100%; overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } img, svg, video, canvas { max-width: 100%; height: auto; } textarea, select, button, input { max-width: 100%; } /* Hoofdgrid mobiel onder elkaar */ @media (max-width: 900px) { .grid { display: flex !important; flex-direction: column !important; gap: 14px !important; } .panel, .section.post.preview, .packsbar, .progress-row { width: 100% !important; min-width: 0 !important; } .panel-body, .zone-core, .zone-advanced, .block { min-width: 0 !important; } .panel.create, .panel.generate, .section.post.preview { grid-column: auto !important; } /* Topbar compacter */ .topbar { padding: 10px 12px !important; gap: 10px !important; flex-wrap: wrap !important; } .brand { min-width: 0 !important; } .title .h1 { font-size: 20px !important; line-height: 1.1 !important; } .title .h2 { font-size: 12px !important; } .build-badge, .last-action, .header-meta-inline, .topbar-right { width: 100% !important; min-width: 0 !important; } .ticker, #lastAction, #activityLine { white-space: normal !important; word-break: break-word !important; } /* Hero */ .hero, .headerImg { width: 100% !important; max-width: 100% !important; } /* Quickstart */ .quickstart { width: 100% !important; overflow: hidden !important; } /* Pack area */ .packs, .packRow, .packSelectWrap, .tabs { width: 100% !important; min-width: 0 !important; } .packRow { display: flex !important; gap: 12px !important; overflow-x: auto !important; overflow-y: hidden !important; padding-bottom: 6px !important; scroll-snap-type: x proximity; } .packCard { flex: 0 0 82% !important; min-width: 82% !important; scroll-snap-align: start; } .packTab { min-width: 220px !important; } .tabs { overflow-x: auto !important; white-space: nowrap !important; } /* Progress */ .progress-row { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 8px !important; } .prog-item { font-size: 12px !important; padding: 10px 8px !important; text-align: center !important; } /* Inputs */ .create-controls, .create-left, .intent-bar, .seed-row, .visual-actions, .action-rail { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } .create-left > *, .seed-row > *, .visual-actions > *, .action-rail > * { min-width: 0 !important; } .intent-bar .intent { flex: 1 1 calc(50% - 8px) !important; } .select, .seed-select, .packSelect, textarea { width: 100% !important; min-width: 0 !important; } textarea { font-size: 16px !important; /* voorkomt iPhone zoom */ } /* Visuals */ .visuals-wrap { display: flex !important; flex-direction: column !important; gap: 12px !important; } .visuals { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .visual, .visual-item { min-width: 0 !important; } .visual img, .visual-item img { width: 100% !important; height: auto !important; display: block !important; } .visuals-order, .order-list, #selectedOrder { width: 100% !important; } .order-item { display: flex !important; justify-content: space-between !important; gap: 8px !important; align-items: center !important; } .order-item .id { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Output knoppen */ .rail-output, .rail-inputs, .rail-preview { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } .rail-output .btn-metal, .rail-inputs .btn-metal, .rail-preview .btn-metal, .rail-output button, .rail-inputs button, .rail-preview button { flex: 1 1 calc(50% - 8px) !important; } /* Preview mobiel kleiner en netter */ .pv3-root, .tdf-phone, .tdf-viewport, #pvViewport, #pvScreen { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .tdf-phone { margin: 0 auto !important; } .tdf-svg { width: 100% !important; height: auto !important; display: block !important; } .previewActions { flex-wrap: wrap !important; } /* New features cards */ .featuresGrid { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } /* Locked banner */ .lockedBanner { width: 100% !important; min-width: 0 !important; } .lockedBanner .cta { display: flex !important; flex-direction: column !important; gap: 8px !important; } } /* Extra small phones */ @media (max-width: 560px) { .visuals { grid-template-columns: 1fr !important; } .packCard { flex: 0 0 88% !important; min-width: 88% !important; } .intent-bar .intent, .rail-output .btn-metal, .rail-inputs .btn-metal, .rail-preview .btn-metal, .rail-output button, .rail-inputs button, .rail-preview button { flex: 1 1 100% !important; } .title .h1 { font-size: 18px !important; } }