@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;1,400&family=DM+Mono:wght@400;500&display=swap');
/* ── Color & shape tokens (edit here to match your brand) ───────────────── */
.sq-preprod {
--pp-text-primary: #111827;
--pp-text-secondary: #6b7280;
--pp-border-primary: #9ca3af;
--pp-border-secondary: #d1d5db;
--pp-border-tertiary: #e5e7eb;
--pp-bg-primary: #ffffff;
--pp-bg-secondary: #f9fafb;
--pp-radius-md: 6px;
--pp-radius-lg: 10px;
--pp-font-sans: 'DM Sans', sans-serif;
--pp-font-mono: 'DM Mono', monospace;
}
/* ── Reset (scoped so it never bleeds into Squarespace) ─────────────────── */
.sq-preprod *, .sq-preprod *::before, .sq-preprod *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ── Layout ─────────────────────────────────────────────────────────────── */
.sq-preprod {
font-family: var(--pp-font-sans);
background: transparent;
max-width: 860px;
margin: 0 auto;
padding: 1.5rem 1rem;
}
/* ── Header ─────────────────────────────────────────────────────────────── */
.sq-preprod .pp-form-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
padding-bottom: 1.25rem;
border-bottom: 0.5px solid var(--pp-border-tertiary);
}
.sq-preprod .pp-form-title {
font-size: 20px;
font-weight: 500;
color: var(--pp-text-primary);
transition: all 0.2s;
}
.sq-preprod .pp-form-subtitle {
font-size: 12px;
color: var(--pp-text-secondary);
margin-top: 4px;
font-family: var(--pp-font-mono);
}
.sq-preprod .pp-print-btn {
padding: 8px 16px;
font-size: 12px;
font-weight: 500;
background: transparent;
border: 0.5px solid var(--pp-border-secondary);
border-radius: var(--pp-radius-md);
cursor: pointer;
color: var(--pp-text-secondary);
white-space: nowrap;
font-family: var(--pp-font-sans);
}
.sq-preprod .pp-print-btn:hover {
background: var(--pp-bg-secondary);
color: var(--pp-text-primary);
}
/* ── Section labels ─────────────────────────────────────────────────────── */
.sq-preprod .pp-section {
margin-bottom: 1.75rem;
}
.sq-preprod .pp-section-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--pp-text-secondary);
margin-bottom: 12px;
padding: 6px 10px;
background: var(--pp-bg-secondary);
border-radius: var(--pp-radius-md);
display: inline-block;
}
/* ── Field grid ─────────────────────────────────────────────────────────── */
.sq-preprod .pp-field-grid {
display: grid;
gap: 12px;
}
.sq-preprod .pp-cols-2 { grid-template-columns: 1fr 1fr; }
.sq-preprod .pp-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.sq-preprod .pp-field {
display: flex;
flex-direction: column;
gap: 5px;
}
.sq-preprod .pp-field label {
font-size: 12px;
color: var(--pp-text-secondary);
font-weight: 500;
font-family: var(--pp-font-sans);
}
.sq-preprod .pp-field input,
.sq-preprod .pp-field select,
.sq-preprod .pp-field textarea {
font-family: var(--pp-font-sans);
font-size: 14px;
padding: 8px 10px;
border: 0.5px solid var(--pp-border-secondary);
border-radius: var(--pp-radius-md);
background: var(--pp-bg-primary);
color: var(--pp-text-primary);
width: 100%;
outline: none;
transition: border-color 0.15s;
}
.sq-preprod .pp-field input:focus,
.sq-preprod .pp-field select:focus,
.sq-preprod .pp-field textarea:focus {
border-color: var(--pp-border-primary);
}
.sq-preprod .pp-field textarea {
resize: vertical;
min-height: 72px;
line-height: 1.5;
}
/* ── Tables ─────────────────────────────────────────────────────────────── */
.sq-preprod .pp-tbl {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.sq-preprod .pp-tbl thead tr {
border-bottom: 0.5px solid var(--pp-border-secondary);
}
.sq-preprod .pp-tbl thead th {
text-align: left;
padding: 8px 10px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pp-text-secondary);
}
.sq-preprod .pp-tbl tbody tr {
border-bottom: 0.5px solid var(--pp-border-tertiary);
}
.sq-preprod .pp-tbl tbody td {
padding: 5px 8px;
vertical-align: middle;
}
.sq-preprod .pp-tbl tbody td input {
border: none;
background: transparent;
font-family: var(--pp-font-sans);
font-size: 13px;
color: var(--pp-text-primary);
padding: 4px;
width: 100%;
outline: none;
border-bottom: 0.5px solid transparent;
transition: border-color 0.15s;
}
.sq-preprod .pp-tbl tbody td input:focus {
border-bottom-color: var(--pp-border-secondary);
}
.sq-preprod .pp-tbl tbody td select {
border: none;
background: transparent;
font-family: var(--pp-font-sans);
font-size: 13px;
color: var(--pp-text-primary);
padding: 4px;
width: 100%;
outline: none;
}
/* ── Buttons ─────────────────────────────────────────────────────────────── */
.sq-preprod .pp-add-row-btn {
margin-top: 10px;
padding: 7px 14px;
font-size: 12px;
font-weight: 500;
background: transparent;
border: 0.5px dashed var(--pp-border-secondary);
border-radius: var(--pp-radius-md);
cursor: pointer;
color: var(--pp-text-secondary);
width: 100%;
font-family: var(--pp-font-sans);
}
.sq-preprod .pp-add-row-btn:hover {
background: var(--pp-bg-secondary);
color: var(--pp-text-primary);
}
.sq-preprod .pp-del-btn {
background: transparent;
border: none;
cursor: pointer;
color: var(--pp-text-secondary);
padding: 4px 8px;
font-size: 16px;
line-height: 1;
opacity: 0.4;
}
.sq-preprod .pp-del-btn:hover { opacity: 1; color: #E24B4A; }
/* ── Divider ─────────────────────────────────────────────────────────────── */
.sq-preprod .pp-divider {
height: 0.5px;
background: var(--pp-border-tertiary);
margin: 1.5rem 0;
}
/* ── Sort badge ─────────────────────────────────────────────────────────── */
.sq-preprod .pp-sort-badge {
font-size: 10px;
color: var(--pp-text-secondary);
font-family: var(--pp-font-mono);
padding: 3px 8px;
border: 0.5px solid var(--pp-border-tertiary);
border-radius: var(--pp-radius-md);
white-space: nowrap;
}
/* ── Campaign cards ─────────────────────────────────────────────────────── */
.sq-preprod .pp-campaign-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.sq-preprod .pp-campaign-card {
border: 0.5px solid var(--pp-border-tertiary);
border-radius: var(--pp-radius-lg);
overflow: hidden;
background: var(--pp-bg-primary);
}
.sq-preprod .pp-campaign-card-header {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 12px;
align-items: end;
padding: 12px 14px;
background: var(--pp-bg-secondary);
border-bottom: 0.5px solid var(--pp-border-tertiary);
}
.sq-preprod .pp-campaign-card-body {
display: flex;
flex-direction: column;
}
.sq-preprod .pp-asset-row {
display: grid;
grid-template-columns: 1fr 160px auto;
gap: 8px;
align-items: center;
padding: 8px 14px;
border-bottom: 0.5px solid var(--pp-border-tertiary);
}
.sq-preprod .pp-asset-row input[type="text"] {
border: none;
background: transparent;
font-family: var(--pp-font-sans);
font-size: 13px;
color: var(--pp-text-primary);
padding: 4px;
width: 100%;
outline: none;
border-bottom: 0.5px solid transparent;
transition: border-color 0.15s;
}
.sq-preprod .pp-asset-row input[type="text"]:focus {
border-bottom-color: var(--pp-border-secondary);
}
.sq-preprod .pp-asset-row input[type="date"] {
border: none;
background: transparent;
font-family: var(--pp-font-mono);
font-size: 12px;
color: var(--pp-text-secondary);
padding: 4px;
width: 100%;
outline: none;
}
.sq-preprod .pp-add-asset-btn {
margin: 8px 14px;
padding: 5px 10px;
font-size: 12px;
background: transparent;
border: 0.5px dashed var(--pp-border-tertiary);
border-radius: var(--pp-radius-md);
cursor: pointer;
color: var(--pp-text-secondary);
text-align: left;
width: calc(100% - 28px);
font-family: var(--pp-font-sans);
}
.sq-preprod .pp-add-asset-btn:hover { background: var(--pp-bg-secondary); }
.sq-preprod .pp-campaign-del {
background: transparent;
border: none;
cursor: pointer;
color: var(--pp-text-secondary);
font-size: 18px;
line-height: 1;
opacity: 0.35;
padding: 0 4px;
margin-top: 18px;
}
.sq-preprod .pp-campaign-del:hover { opacity: 1; color: #E24B4A; }
/* ── Footer row ─────────────────────────────────────────────────────────── */
.sq-preprod .pp-footer-row {
display: flex;
gap: 12px;
padding-top: 1rem;
border-top: 0.5px solid var(--pp-border-tertiary);
}
.sq-preprod .pp-footer-row .pp-field { flex: 1; }
/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.sq-preprod .pp-cols-2,
.sq-preprod .pp-cols-3 { grid-template-columns: 1fr; }
.sq-preprod .pp-hide-sm { display: none; }
.sq-preprod .pp-campaign-card-header { grid-template-columns: 1fr auto; }
.sq-preprod .pp-asset-row { grid-template-columns: 1fr auto; }
.sq-preprod .pp-footer-row { flex-direction: column; }
}
/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
.sq-preprod .pp-print-btn,
.sq-preprod .pp-add-row-btn,
.sq-preprod .pp-del-btn,
.sq-preprod .pp-add-asset-btn,
.sq-preprod .pp-campaign-del,
.sq-preprod .pp-sort-badge { display: none !important; }
.sq-preprod { padding: 0; max-width: 100%; }
.sq-preprod .pp-field input,
.sq-preprod .pp-field select,
.sq-preprod .pp-field textarea,
.sq-preprod .pp-tbl tbody td input,
.sq-preprod .pp-tbl tbody td select,
.sq-preprod .pp-asset-row input {
border: none;
border-bottom: 0.5px solid #ccc;
border-radius: 0;
padding: 4px 2px;
}
}
Pre-Production
Shoot planning & production brief
Project Details
Campaigns & Focus Points
Auto-sorted by launch date
Crew & Roles
| Name | Role | Phone | Call time |
|---|
Schedule / Timeline
| Time | Duration | Activity / Scene | Location / Set | Notes |
|---|
Shot List
| Item | Format | Status |
|---|
Production Notes
Hello, World!
Hello, World!