/* ============================================================ zt1.css — the zeroto1 component layer. v1.0.0 Requires brand/tokens/dist/tokens.css. Components reference only semantic tokens (--bg, --fg, --border …) and density tokens (--dn-*), so [data-theme="film"] and [data-density="dense"] on or any subtree switch everything with no component-level overrides. Grammar: square corners; 1px ink rules; mono labels; ink fill for primary; state is drawn with rule weight and fill, not colour. Nothing floats. Paper components are lifted verbatim from zeroto1.co (index_type_b.html). ============================================================ */ /* ---------- base (opt-in) ---------- */ .zt-page{ font-family: var(--font-ui); font-size: var(--dn-body); line-height: var(--dn-body-lh); color: var(--fg); -webkit-font-smoothing: antialiased; } .zt-page *, .zt-page *::before, .zt-page *::after{ box-sizing: border-box; } .zt-page ::selection{ background: var(--selection-bg); color: var(--selection-fg); } .zt-page :focus-visible{ outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--border-radius-focus); } .zt-page a:not([class]){ color: inherit; } /* classed links (buttons, tlinks) own their colour */ .zt-grain{ position: fixed; inset: 0; z-index: 60; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); } .zt-wrap{ width: var(--size-measure); margin-inline: auto; } /* ---------- type ---------- */ .zt-d1, .zt-d2, .zt-d3, .zt-display{ font-family: var(--font-display); font-weight: var(--font-weight-display); letter-spacing: var(--font-tracking-display); font-stretch: var(--font-stretch-display); } .zt-d1{ font-size: var(--type-d1); line-height: var(--type-d1-lh); } .zt-d2{ font-size: var(--type-d2); line-height: var(--type-d2-lh); } .zt-d3{ font-size: var(--type-d3); line-height: var(--type-d3-lh); } .zt-heavy{ font-weight: var(--font-weight-display-heavy); letter-spacing: var(--font-tracking-display-heavy); } /* one heavier word per composition */ .zt-soft{ font-weight: var(--font-weight-display-soft); font-stretch: var(--font-stretch-soft); letter-spacing: var(--font-tracking-display-soft); } .zt-swash, em.zt-sw{ font-style: italic; letter-spacing: var(--font-tracking-swash); } .zt-numeral{ font-family: var(--font-display); font-weight: var(--font-weight-numeral); letter-spacing: var(--font-tracking-display); font-stretch: var(--font-stretch-numeral); font-variant-numeric: tabular-nums; line-height: 1; } .zt-stat{ font-family: var(--font-display); font-weight: var(--font-weight-ui-strong); font-size: var(--type-stat); line-height: .95; letter-spacing: -.035em; } .zt-essay{ font-family: var(--font-text); font-size: var(--type-essay); line-height: var(--type-essay-lh); max-width: var(--size-prose-measure); } .zt-essay p + p{ margin-top: 1.4em; } .zt-dropcap::first-letter{ font-family: var(--font-display); font-weight: var(--font-weight-display); font-stretch: var(--font-stretch-display); float: left; font-size: var(--type-dropcap); line-height: .78; padding: .1em .16em 0 0; } .zt-prose{ font-family: var(--font-text); font-size: var(--type-prose); line-height: var(--type-prose-lh); max-width: var(--size-card-measure); } .zt-prose p + p{ margin-top: .8em; } .zt-caption{ font-family: var(--font-text); font-style: italic; font-size: var(--type-caption); color: var(--fg-muted); } .zt-label{ font-family: var(--font-ui); font-weight: var(--font-weight-ui); font-size: var(--type-label); letter-spacing: var(--font-tracking-label); text-transform: uppercase; } .zt-mono{ font-family: var(--font-mono); font-size: var(--dn-label); letter-spacing: var(--font-tracking-label); text-transform: uppercase; color: var(--fg-label); } .zt-mono--wide{ letter-spacing: var(--font-tracking-label-wide); } .zt-foot{ font-size: var(--type-foot); color: var(--fg-faint); line-height: 1.5; } sup.zt-fn{ font-family: var(--font-mono); font-size: .55em; vertical-align: super; margin-left: .25em; color: var(--fg-muted); } @media (max-width: 700px){ .zt-mono, .zt-mono-floor{ font-size: max(var(--dn-label), var(--type-label-floor)); } } /* ---------- section head: № · TITLE ─────────── folio ---------- */ .zt-section-head{ position: relative; display: flex; align-items: baseline; gap: 1.25rem; border-top: var(--border-rule); padding-top: .8rem; margin-bottom: var(--space-head-gap); } .zt-section-head .no, .zt-section-head .folio{ font-family: var(--font-mono); font-size: .78rem; color: var(--fg-label); white-space: nowrap; } .zt-section-head .ti{ font-family: var(--font-ui); font-weight: var(--font-weight-ui); font-size: .82rem; letter-spacing: var(--font-tracking-label-wide); text-transform: uppercase; } .zt-section-head .fill{ flex: 1; border-bottom: var(--border-hair); transform: translateY(-.42em); } .zt-section-head .stamp{ position: absolute; right: 0; top: .55rem; width: var(--size-stamp); height: var(--size-stamp); display: block; border: 1px solid var(--border); object-fit: cover; } .zt-section-head--tight{ margin-bottom: var(--dn-gap); } @media (max-width: 700px){ .zt-section-head{ flex-wrap: wrap; } .zt-section-head .folio{ display: none; } .zt-masthead .bar{ flex-wrap: wrap; gap: .6rem 1.2rem; padding: .7rem 0; } .zt-nav{ margin-left: 0; width: 100%; gap: 1.2rem; flex-wrap: wrap; } } /* ---------- buttons ---------- */ .zt-btn{ display: inline-flex; align-items: center; justify-content: center; gap: .7rem; font-family: var(--font-ui); font-weight: var(--font-weight-ui); font-size: var(--type-label); letter-spacing: var(--font-tracking-label); text-transform: uppercase; text-decoration: none; padding: var(--dn-control-pad); min-height: var(--dn-control); border: var(--border-button); border-color: var(--accent); background: var(--accent); color: var(--accent-fg); border-radius: var(--border-radius); box-shadow: var(--shadow-button); transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background var(--motion-fast) ease, color var(--motion-fast) ease; cursor: pointer; white-space: nowrap; } .zt-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-button-hover); } .zt-btn:active{ transform: translateY(0); box-shadow: var(--shadow-button-active); } .zt-btn--ghost{ background: transparent; color: var(--fg); box-shadow: none; border-color: var(--border); } .zt-btn--ghost:hover{ background: var(--accent); color: var(--accent-fg); } .zt-btn--small{ padding: .68rem 1.1rem; min-height: var(--size-control-sm); font-size: var(--type-label-sm); } .zt-btn--danger{ background: var(--danger); border-color: var(--danger); color: var(--bg); } .zt-btn[disabled], .zt-btn:disabled{ opacity: .38; pointer-events: none; box-shadow: none; } [data-density="dense"] .zt-btn{ box-shadow: none; } [data-density="dense"] .zt-btn:hover{ transform: none; } .zt-arr{ width: .95em; height: .95em; flex: none; display: inline-block; vertical-align: -.08em; transition: transform .2s ease; } .zt-btn:hover .zt-arr, .zt-tlink:hover .zt-arr, .zt-row:hover .zt-arr{ transform: translateX(3px); } .zt-tlink{ display: inline-flex; align-items: baseline; gap: .55rem; font-family: var(--font-ui); font-weight: var(--font-weight-ui); font-size: var(--type-label); letter-spacing: var(--font-tracking-label); text-transform: uppercase; text-decoration: none; color: var(--fg); border-bottom: 2px solid var(--border); padding-bottom: .28rem; transition: gap .2s ease; } .zt-tlink:hover{ gap: .95rem; } /* ---------- small marks: motto, stamp pill, chip, badge ---------- */ .zt-motto{ display: inline-flex; align-items: center; gap: .9rem; font-family: var(--font-ui); font-weight: var(--font-weight-ui-strong); font-size: var(--type-label); letter-spacing: var(--font-tracking-motto); text-transform: uppercase; border: 1.5px solid var(--border); padding: .78rem 1.15rem; background: var(--bg-raised); } .zt-motto::before{ content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--fg); } .zt-stamp{ display: inline-block; font-family: var(--font-mono); font-size: var(--type-label-sm); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--fg-faint); padding: .42rem .7rem; border-radius: var(--border-radius-pill); color: var(--fg-muted); background: var(--bg-raised); } .zt-chip{ display: inline-block; font-family: var(--font-mono); font-size: var(--type-label-xs); letter-spacing: var(--font-tracking-label-tight); text-transform: uppercase; border: 1px solid var(--border); padding: .15rem .45rem; border-radius: var(--border-radius-chip); color: var(--fg-label); } .zt-badge{ display: inline-flex; align-items: center; gap: .45em; font-family: var(--font-mono); font-size: var(--dn-label); letter-spacing: .08em; text-transform: uppercase; padding: .28rem .6rem; border: 1px solid var(--border-hair); color: var(--fg-muted); border-radius: var(--border-radius); white-space: nowrap; } .zt-badge--solid{ background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } /* live / done */ .zt-badge--rule{ border: 1.5px solid var(--border); color: var(--fg); } /* active */ .zt-badge--dot::before{ content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; } .zt-badge--danger{ color: var(--danger); border-color: var(--danger); } /* ---------- cards ---------- */ .zt-card{ position: relative; border: var(--border-rule); background: linear-gradient(180deg, var(--bg-raised), transparent); padding: var(--dn-card); box-shadow: var(--shadow-card); border-radius: var(--border-radius); } .zt-card--deep{ border-width: 1.5px; background: linear-gradient(180deg, var(--bg-hi), var(--bg) 70%); box-shadow: var(--shadow-card-deep); padding: var(--space-card-xl); overflow: hidden; } .zt-card--framed::before{ content: ""; position: absolute; inset: 10px; border: var(--border-frame); pointer-events: none; } .zt-card--framed-solid::before{ content: ""; position: absolute; inset: 10px; border: 1px solid var(--border-hair); pointer-events: none; } .zt-card--flat{ box-shadow: none; background: transparent; } [data-density="dense"] .zt-card{ box-shadow: none; } .zt-fig-head, .zt-docket{ display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.2rem; font-family: var(--font-mono); font-size: var(--dn-label); letter-spacing: var(--font-tracking-label); text-transform: uppercase; color: var(--fg-label); } .zt-docket{ letter-spacing: var(--font-tracking-label-mono); flex-wrap: wrap; } .zt-fig-cap{ margin-top: 1.1rem; font-family: var(--font-text); font-style: italic; font-size: var(--type-caption); color: var(--fg-muted); } .zt-fig-foot{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2.2rem; border-top: var(--border-hair); padding-top: .8rem; margin-top: 1rem; font-family: var(--font-mono); font-size: max(.68rem, 11px); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-label); } .zt-card svg{ display: block; width: 100%; height: auto; } /* ---------- KPI tile (dashboards) ---------- */ .zt-kpi{ padding: var(--dn-row-pad) 0; border-top: 2px solid var(--border); } .zt-kpi .k{ font-family: var(--font-mono); font-size: var(--dn-label); letter-spacing: var(--font-tracking-label); text-transform: uppercase; color: var(--fg-label); } .zt-kpi .v{ margin-top: .5rem; font-family: var(--font-display); font-weight: var(--font-weight-numeral); font-stretch: var(--font-stretch-numeral); font-variant-numeric: tabular-nums; letter-spacing: var(--font-tracking-display); font-size: var(--type-numeral); line-height: 1; white-space: nowrap; } .zt-kpi .d{ margin-top: .45rem; font-family: var(--font-mono); font-size: var(--type-label-xs); letter-spacing: .06em; color: var(--fg-faint); } .zt-kpi .d.up::before{ content: "▲ "; } .zt-kpi .d.down::before{ content: "▼ "; } [data-density="dense"] .zt-kpi .v{ font-size: 1.6rem; } /* ---------- ledger (the audited figures table) ---------- */ .zt-ledger{ display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); border-top: 2.5px solid var(--border); border-bottom: var(--border-rule); } .zt-ledger > *{ padding: 2.3rem 1.6rem 2rem 0; border-right: var(--border-hair); margin-right: 1.6rem; } .zt-ledger > *:last-child{ border-right: 0; margin-right: 0; } .zt-ledger .v{ font-family: var(--font-display); font-weight: var(--font-weight-numeral); font-stretch: var(--font-stretch-numeral); font-variant-numeric: tabular-nums; font-size: var(--type-numeral); line-height: 1; letter-spacing: var(--font-tracking-display); white-space: nowrap; } .zt-ledger .l{ margin-top: .8rem; font-size: var(--type-small); color: var(--fg-muted); line-height: 1.45; } [data-density="dense"] .zt-ledger > *{ padding: 1rem 1rem .9rem 0; margin-right: 1rem; } @media (max-width: 1080px){ .zt-ledger{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px){ .zt-ledger{ grid-template-columns: repeat(2, 1fr); } } /* ---------- index rows (services list, any list of things) ---------- */ .zt-rows{ border-top: 2.5px solid var(--border); } .zt-row{ display: grid; grid-template-columns: 5.5ch minmax(0,1fr) minmax(0,1.25fr) auto; gap: var(--space-gap); align-items: center; padding: var(--space-row) 0; border-bottom: var(--border-rule); text-decoration: none; color: inherit; position: relative; } .zt-row .idx{ font-family: var(--font-mono); font-size: .8rem; color: var(--fg-label); } .zt-row .name{ font-family: var(--font-display); font-weight: var(--font-weight-display); font-stretch: var(--font-stretch-display); letter-spacing: -.028em; font-size: clamp(1.4rem, 2.3vw, 2.05rem); line-height: 1.05; transition: transform .25s var(--motion-ease-out); } .zt-row:hover .name{ transform: translateX(.35em); } .zt-row .hook{ font-size: var(--type-small); color: var(--fg-muted); max-width: 40ch; } [data-density="dense"] .zt-row{ padding: var(--dn-row-pad) 0; } [data-density="dense"] .zt-row .name{ font-size: 1.05rem; } @media (max-width: 760px){ .zt-row{ grid-template-columns: 5.5ch minmax(0,1fr); } .zt-row .hook{ grid-column: 2; } } /* ---------- data table (operate) ---------- */ .zt-table{ width: 100%; border-collapse: collapse; border-top: 2px solid var(--border); font-variant-numeric: tabular-nums; } .zt-table th{ text-align: left; font-family: var(--font-mono); font-weight: 400; font-size: var(--dn-label); letter-spacing: var(--font-tracking-label); text-transform: uppercase; color: var(--fg-label); padding: .7rem .8rem .7rem 0; border-bottom: var(--border-rule); white-space: nowrap; position: sticky; top: 0; background: var(--bg); } .zt-table th[aria-sort]{ cursor: pointer; } .zt-table th[aria-sort]::after{ content: " ↕"; opacity: .5; } .zt-table th[aria-sort="ascending"]::after{ content: " ↑"; opacity: 1; } .zt-table th[aria-sort="descending"]::after{ content: " ↓"; opacity: 1; } .zt-table td{ padding: var(--dn-row-pad) .8rem var(--dn-row-pad) 0; height: var(--dn-row); border-bottom: var(--border-hair); vertical-align: middle; } .zt-table td.num, .zt-table th.num{ text-align: right; font-family: var(--font-mono); font-size: .92em; padding-right: 0; } .zt-table--zebra tbody tr:nth-child(even) td{ background: var(--bg-wash); } .zt-table tbody tr:hover td{ background: var(--bg-hover); } .zt-table tbody tr[aria-selected="true"] td{ box-shadow: inset 3px 0 0 var(--accent); } .zt-table-scroll{ overflow-x: auto; } /* ---------- forms (operate) ---------- */ .zt-field{ display: grid; gap: .45rem; } .zt-field > label, .zt-field .lab{ font-family: var(--font-mono); font-size: var(--dn-label); letter-spacing: var(--font-tracking-label); text-transform: uppercase; color: var(--fg-label); } .zt-field .help{ font-size: var(--type-foot); color: var(--fg-faint); } .zt-field .err{ font-family: var(--font-mono); font-size: var(--type-label-xs); letter-spacing: .06em; color: var(--danger); } .zt-input, .zt-select, .zt-textarea{ font: inherit; font-family: var(--font-ui); color: var(--fg); background: transparent; width: 100%; min-height: var(--dn-control); padding: .55rem .8rem; border: 1px solid var(--border); border-radius: var(--border-radius); outline: none; transition: border-width var(--motion-fast) ease, box-shadow var(--motion-fast) ease; } .zt-input:hover, .zt-select:hover, .zt-textarea:hover{ box-shadow: inset 0 0 0 1px var(--border-hair); } .zt-input:focus-visible, .zt-select:focus-visible, .zt-textarea:focus-visible{ outline: none; box-shadow: inset 0 0 0 1px var(--focus); } /* 2px ink, no glow */ .zt-input::placeholder, .zt-textarea::placeholder{ color: var(--fg-quiet); } .zt-input[aria-invalid="true"], .zt-textarea[aria-invalid="true"]{ border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); } .zt-input:disabled, .zt-select:disabled, .zt-textarea:disabled{ opacity: .45; border-style: dashed; } .zt-textarea{ min-height: calc(var(--dn-control) * 2.6); resize: vertical; line-height: 1.5; } .zt-select{ appearance: none; padding-right: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%23171204' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 12px; } [data-theme="film"] .zt-select{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%23F7DC14' stroke-width='1.5'/%3E%3C/svg%3E"); } .zt-input--mono{ font-family: var(--font-mono); font-size: .92em; } .zt-input-row{ display: flex; } .zt-input-row > .zt-input{ flex: 1; } .zt-input-row > .zt-btn{ border-left: 0; } /* checkbox & radio: the checked state is the mark — disc and bar */ .zt-check{ display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; font-size: inherit; } .zt-check input{ appearance: none; margin: 0; width: 18px; height: 18px; flex: none; border: 1.5px solid var(--border); background: transparent; border-radius: var(--border-radius); transition: background var(--motion-fast) ease; cursor: pointer; } .zt-check input:checked{ background: radial-gradient(circle at 34% 50%, var(--accent-fg) 0 22%, transparent 24%), linear-gradient(var(--accent-fg), var(--accent-fg)) 74% 50% / 16% 56% no-repeat, var(--accent); } .zt-check input[type="radio"]{ border-radius: 50%; } .zt-check input[type="radio"]:checked{ background: radial-gradient(circle, var(--accent-fg) 0 28%, transparent 31%), var(--accent); } .zt-check input:focus-visible{ outline: 2px solid var(--focus); outline-offset: 3px; } .zt-check input:disabled{ opacity: .4; border-style: dashed; } .zt-check input:disabled + span{ opacity: .5; } .zt-check .lab{ font-family: var(--font-mono); font-size: var(--dn-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); } /* toggle: square knob, ink track when on */ .zt-toggle{ display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; } .zt-toggle input{ appearance: none; margin: 0; width: 38px; height: 20px; border: 1.5px solid var(--border); background: transparent; position: relative; cursor: pointer; transition: background var(--motion-fast) ease; flex: none; } .zt-toggle input::after{ content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--fg); transition: transform var(--motion-fast) var(--motion-ease-out), background var(--motion-fast) ease; } .zt-toggle input:checked{ background: var(--accent); } .zt-toggle input:checked::after{ transform: translateX(18px); background: var(--accent-fg); } .zt-toggle input:focus-visible{ outline: 2px solid var(--focus); outline-offset: 3px; } /* ---------- tabs ---------- */ .zt-tabs{ display: flex; gap: 1.6rem; border-bottom: var(--border-rule); } .zt-tabs [role="tab"], .zt-tabs a{ appearance: none; background: none; border: 0; cursor: pointer; padding: .7rem 0 .75rem; margin-bottom: -1px; font-family: var(--font-ui); font-weight: var(--font-weight-ui); font-size: var(--type-label-sm); letter-spacing: var(--font-tracking-label); text-transform: uppercase; color: var(--fg-faint); border-bottom: 2px solid transparent; text-decoration: none; transition: color var(--motion-fast) ease; } .zt-tabs [role="tab"]:hover, .zt-tabs a:hover{ color: var(--fg); } .zt-tabs [aria-selected="true"], .zt-tabs .on{ color: var(--fg); border-bottom-color: var(--border); } .zt-tabs .count{ font-family: var(--font-mono); margin-left: .4em; opacity: .7; } /* ---------- navigation: masthead, OS topbar, sidebar, crumbs ---------- */ .zt-masthead{ position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, var(--bg-hi), var(--bg)); border-bottom: var(--border-rule); } .zt-masthead::after{ content: ""; display: block; height: 3px; background: var(--fg); } .zt-masthead .bar{ width: var(--size-measure); margin-inline: auto; display: flex; align-items: center; gap: 2rem; padding: .9rem 0; } .zt-brand{ display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; } .zt-brand svg, .zt-brand img{ display: block; height: 26px; width: auto; } .zt-nav{ margin-left: auto; display: flex; gap: 1.9rem; } .zt-nav a{ font-family: var(--font-ui); font-size: .8rem; font-weight: var(--font-weight-ui); letter-spacing: var(--font-tracking-label); text-transform: uppercase; text-decoration: none; position: relative; padding: .2rem 0; color: inherit; } .zt-nav a::after{ content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--fg); transition: right .28s cubic-bezier(.2,.7,0,1); } .zt-nav a:hover::after, .zt-nav a[aria-current]::after{ right: 0; } .zt-topbar{ display: flex; align-items: center; gap: 1.4rem; height: 52px; padding: 0 1.2rem; border-bottom: var(--border-rule); background: var(--bg); position: sticky; top: 0; z-index: 40; } .zt-topbar .zt-brand svg{ height: 20px; } .zt-topbar .sp{ flex: 1; } .zt-sidenav{ display: flex; flex-direction: column; gap: .15rem; padding: 1rem 0; border-right: var(--border-rule); min-height: 100%; } .zt-sidenav .grp{ font-family: var(--font-mono); font-size: max(.62rem, 11px); letter-spacing: var(--font-tracking-label-wide); text-transform: uppercase; color: var(--fg-quiet); padding: 1.1rem 1.2rem .45rem; } .zt-sidenav a{ display: grid; grid-template-columns: 3.2ch 1fr auto; gap: .6rem; align-items: baseline; padding: .5rem 1.2rem; text-decoration: none; color: var(--fg-muted); font-family: var(--font-ui); font-weight: var(--font-weight-ui); font-size: var(--type-label-sm); letter-spacing: .06em; text-transform: uppercase; border-left: 2px solid transparent; } .zt-sidenav a .no{ font-family: var(--font-mono); font-size: max(.66rem, 11px); color: var(--fg-quiet); } .zt-sidenav a:hover{ color: var(--fg); background: var(--bg-hover); } .zt-sidenav a[aria-current]{ color: var(--fg); border-left-color: var(--accent); background: var(--bg-wash); } .zt-sidenav a[aria-current] .no{ color: var(--fg); } .zt-crumbs{ display: flex; flex-wrap: wrap; gap: .6rem; font-family: var(--font-mono); font-size: var(--dn-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); } .zt-crumbs a{ color: inherit; text-decoration: none; } .zt-crumbs a:hover{ color: var(--fg); } .zt-crumbs li + li::before{ content: "/"; margin-right: .6rem; color: var(--fg-quiet); } .zt-crumbs li:last-child{ color: var(--fg); } .zt-crumbs, .zt-pagination{ list-style: none; margin: 0; padding: 0; } .zt-pagination{ display: flex; gap: .4rem; align-items: center; } .zt-pagination a, .zt-pagination button, .zt-sq{ width: var(--size-control-sm); height: var(--size-control-sm); display: grid; place-items: center; border: 1.5px solid var(--border); background: transparent; color: var(--fg); font-family: var(--font-mono); font-size: .8rem; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; } .zt-pagination a:hover, .zt-pagination button:hover, .zt-sq:hover, .zt-pagination [aria-current]{ background: var(--accent); color: var(--accent-fg); } .zt-pagination .gap{ font-family: var(--font-mono); color: var(--fg-quiet); padding: 0 .3rem; } /* ---------- feedback: alert, toast, empty, skeleton ---------- */ .zt-alert{ display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: start; padding: .9rem 1.1rem; border: var(--border-rule); border-left-width: 3px; background: var(--bg-raised); font-size: var(--type-small); } .zt-alert .k{ font-family: var(--font-mono); font-size: var(--dn-label); letter-spacing: var(--font-tracking-label); text-transform: uppercase; color: var(--fg-label); padding-top: .15em; } .zt-alert--danger{ border-color: var(--danger); } .zt-alert--danger .k{ color: var(--danger); } .zt-alert--solid{ background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .zt-alert--solid .k{ color: inherit; opacity: .75; } .zt-toast{ position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90; max-width: 380px; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: .9rem 1.1rem; background: var(--accent); color: var(--accent-fg); border: 1px solid var(--accent); box-shadow: var(--shadow-card); font-size: var(--type-small); } .zt-toast .k{ display: block; font-family: var(--font-mono); font-size: var(--type-label-xs); letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: .25rem; } .zt-toast button{ appearance: none; background: none; border: 1px solid currentColor; color: inherit; font-family: var(--font-mono); font-size: max(.7rem, 11px); letter-spacing: .1em; text-transform: uppercase; padding: .4rem .7rem; cursor: pointer; } .zt-empty{ display: grid; justify-items: center; text-align: center; gap: 1rem; padding: clamp(2rem, 5vw, 4rem) 1rem; border: 1px dashed var(--border-hair); } .zt-empty img, .zt-empty svg{ width: 96px; height: 96px; display: block; border: 1px solid var(--border); } .zt-empty .k{ font-family: var(--font-mono); font-size: var(--dn-label); letter-spacing: var(--font-tracking-label-mono); text-transform: uppercase; color: var(--fg-label); } .zt-empty .t{ font-family: var(--font-text); font-style: italic; font-size: var(--type-prose); color: var(--fg-muted); max-width: 36ch; } .zt-skeleton{ display: block; background: var(--bg-wash); min-height: 1em; } /* no shimmer: nothing floats */ .zt-skeleton--line{ height: .9em; margin: .35em 0; } .zt-skeleton--line.short{ width: 60%; } .zt-skeleton--block{ aspect-ratio: 16/9; } /* ---------- modal & drawer ---------- */ .zt-modal::backdrop, .zt-drawer::backdrop{ background: rgba(23,18,4,.55); } [data-theme="film"] .zt-modal::backdrop, [data-theme="film"] .zt-drawer::backdrop{ background: rgba(0,0,0,.7); } .zt-modal, .zt-drawer{ border: 1.5px solid var(--border); background: var(--bg); color: var(--fg); padding: 0; max-width: min(92vw, 560px); width: 100%; box-shadow: var(--shadow-card-deep); } .zt-modal{ margin: auto; } .zt-modal .in{ position: relative; padding: var(--space-card); } .zt-modal .in::before, .zt-drawer .in::before{ content: ""; position: absolute; inset: 10px; border: var(--border-frame); pointer-events: none; } .zt-drawer{ margin: 0 0 0 auto; height: 100dvh; max-height: none; max-width: min(92vw, 440px); border-width: 0 0 0 1.5px; } .zt-drawer .in{ position: relative; padding: var(--space-card); min-height: 100%; } .zt-modal .head, .zt-drawer .head{ display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.2rem; } .zt-modal .head h2, .zt-drawer .head h2{ font-family: var(--font-display); font-weight: var(--font-weight-display); font-stretch: var(--font-stretch-display); letter-spacing: var(--font-tracking-display); font-size: var(--type-d3); line-height: 1.1; margin: 0; } .zt-modal .foot, .zt-drawer .foot{ display: flex; justify-content: flex-end; gap: .8rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: var(--border-hair); } /* ---------- FAQ / accordion (native details) ---------- */ .zt-faq{ border-top: 2px solid var(--border); display: block; } .zt-faq:last-of-type{ border-bottom: 2px solid var(--border); } .zt-faq summary{ list-style: none; cursor: pointer; display: grid; grid-template-columns: 4ch minmax(0,1fr) 2.2rem; gap: clamp(1rem, 2vw, 2rem); align-items: center; padding: 1.15rem 0; } .zt-faq summary::-webkit-details-marker{ display: none; } .zt-faq .n{ font-family: var(--font-mono); font-size: var(--type-label-xs); letter-spacing: var(--font-tracking-label-mono); color: var(--fg-label); } .zt-faq .q{ font-family: var(--font-display); font-weight: var(--font-weight-display); font-stretch: var(--font-stretch-display); letter-spacing: var(--font-tracking-display); font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.2; max-width: 40ch; margin: 0; color: var(--fg-muted); transition: color .2s, font-size .25s; } .zt-faq summary:hover .q{ color: var(--fg); } .zt-faq[open] .q{ font-size: clamp(1.5rem, 2.3vw, 2.1rem); max-width: 26ch; color: var(--fg); } .zt-faq .plus{ position: relative; width: 2.2rem; height: 2.2rem; border: 1.5px solid var(--border); border-radius: 50%; justify-self: end; transition: background .2s; } .zt-faq .plus::before, .zt-faq .plus::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: var(--fg); transform: translate(-50%,-50%); transition: transform .25s, background .2s; } .zt-faq .plus::after{ transform: translate(-50%,-50%) rotate(90deg); } .zt-faq[open] .plus{ background: var(--accent); } .zt-faq[open] .plus::before, .zt-faq[open] .plus::after{ background: var(--accent-fg); } .zt-faq[open] .plus::after{ transform: translate(-50%,-50%) rotate(0deg); } .zt-faq .a{ display: grid; grid-template-columns: 4ch minmax(0,1fr) 2.2rem; gap: clamp(1rem, 2vw, 2rem); padding: .2rem 0 2rem; font-family: var(--font-text); font-size: var(--type-prose); line-height: 1.66; animation: zt-faqin .35s ease-out both; } .zt-faq .a > *{ grid-column: 2; max-width: var(--size-card-measure); margin: 0; } .zt-faq .a > p + p{ margin-top: .8em; } .zt-faq .a .worked{ margin-top: 1.2rem; font-family: var(--font-mono); font-size: var(--type-label-sm); line-height: 1.9; color: var(--fg-label); border-left: 1px solid var(--fg-quiet); padding-left: 1.2rem; } @keyframes zt-faqin{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: none; } } [data-density="dense"] .zt-faq summary{ padding: .7rem 0; } [data-density="dense"] .zt-faq .q, [data-density="dense"] .zt-faq[open] .q{ font-size: 1rem; } /* ---------- quote band + client card ---------- */ .zt-quote-band{ background: radial-gradient(90% 130% at 50% -20%, rgba(255,235,0,.35), transparent 60%), linear-gradient(180deg, var(--bg-deep), var(--paper-dusk)); border-top: 2px solid var(--border); border-bottom: 2px solid var(--border); padding: clamp(3.4rem, 6.5vw, 6rem) 0; } [data-theme="film"] .zt-quote-band{ background: radial-gradient(90% 130% at 50% -20%, var(--tungsten-16), transparent 60%), linear-gradient(180deg, var(--bg-hi), var(--bg-low)); } .zt-quote{ position: relative; } .zt-quote blockquote{ font-family: var(--font-display); font-weight: var(--font-weight-quote); font-stretch: var(--font-stretch-quote); letter-spacing: var(--font-tracking-quote); font-size: var(--type-quote); line-height: 1.36; max-width: 30ch; margin: 0; } .zt-quote .mark{ position: absolute; left: -.08em; top: -.55em; font-family: var(--font-display); font-weight: 800; font-size: clamp(6rem, 11vw, 10rem); line-height: 1; color: var(--fg); opacity: .16; pointer-events: none; } .zt-quote .sig{ margin-top: 2.2rem; display: flex; align-items: center; gap: 1.1rem; font-size: var(--type-small); color: var(--fg-muted); } .zt-quote .sig::before{ content: ""; width: 46px; border-top: 2px solid var(--border); } .zt-quote .sig b{ font-weight: var(--font-weight-ui-strong); color: var(--fg); } .zt-client-card{ position: relative; margin: 0; border: 1.5px solid var(--border); background: linear-gradient(180deg, var(--bg-hi), var(--bg) 70%); padding: 1.3rem 1.5rem 1.5rem; box-shadow: var(--shadow-card-deep); } .zt-client-card::before, .zt-client-card::after{ content: "+"; position: absolute; font-family: var(--font-mono); font-size: .9rem; color: var(--fg-quiet); } .zt-client-card::before{ left: .5rem; top: .3rem; } .zt-client-card::after{ right: .5rem; bottom: .25rem; } .zt-client-card .head, .zt-client-card .sub{ display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: max(var(--type-label-xxs), var(--type-label-floor)); letter-spacing: var(--font-tracking-label-wide); text-transform: uppercase; color: var(--fg-label); } .zt-client-card .logo{ display: block; width: 58%; height: auto; margin: 1.2rem auto 1rem; } .zt-client-card .rule{ border-top: 1px solid var(--border-hair); margin: .2rem 0 .9rem; } /* ---------- snap scroller ---------- */ .zt-scroller .head{ display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; border-top: var(--border-rule); font-family: var(--font-mono); font-size: var(--type-label-xs); letter-spacing: var(--font-tracking-label-mono); text-transform: uppercase; color: var(--fg-label); } .zt-scroller .nav{ display: flex; align-items: center; gap: .8rem; } .zt-scroller .dots{ display: flex; gap: .4rem; } .zt-scroller .dots i{ width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--border); display: block; } .zt-scroller .dots i.on{ background: var(--fg); } .zt-scroller .track{ list-style: none; margin: 0; padding: .4rem 0 1.2rem; display: flex; gap: clamp(1rem, 2vw, 1.6rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .zt-scroller .track::-webkit-scrollbar{ display: none; } .zt-scroller .track > *{ flex: 0 0 min(100%, 1060px); scroll-snap-align: start; } /* ---------- film plate: the film object, always film regardless of theme ---------- */ .zt-plate{ position: relative; background: var(--film); color: var(--paper); overflow: hidden; border: 1px solid var(--ink); box-shadow: var(--shadow-plate); } .zt-plate::before{ content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .14; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } .zt-plate::after{ content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 100% at 50% 42%, transparent 42%, rgba(0,0,0,.55) 100%); } .zt-plate > img, .zt-plate > video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .zt-plate .tag{ position: absolute; z-index: 4; left: .9rem; right: .9rem; bottom: .8rem; display: flex; justify-content: space-between; gap: 1rem; white-space: nowrap; font-family: var(--font-mono); font-size: var(--type-label-sm); letter-spacing: var(--font-tracking-label-tight); text-transform: uppercase; color: var(--signal-85); } .zt-plate .tag .shoot{ color: var(--white-55); } .zt-plate .leader{ position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: .6rem .9rem; border-bottom: 1px solid var(--signal-16); font-family: var(--font-mono); font-size: var(--type-label-xs); letter-spacing: var(--font-tracking-label-tight); text-transform: uppercase; color: var(--signal-80); } .zt-plate .film-line{ position: absolute; z-index: 4; left: 1.2rem; bottom: 2.6rem; max-width: 22ch; font-family: var(--font-display); font-style: italic; font-weight: 540; font-stretch: 105%; letter-spacing: -.018em; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.1; color: var(--paper); text-shadow: 0 1px 8px rgba(0,0,0,.6); } .zt-plate .film-line::before{ content: ""; display: block; width: 52px; border-top: 2px solid var(--signal-85); margin-bottom: .8rem; box-shadow: 0 0 12px var(--signal-50); } .zt-plate .chip{ border: 1px solid var(--signal-50); padding: .15rem .45rem; border-radius: var(--border-radius-chip); letter-spacing: .08em; color: var(--signal-85); } /* ---------- cropmarks (a wrapper with position:relative) ---------- */ .zt-crop{ position: relative; } .zt-crop::before, .zt-crop::after, .zt-crop > .cm::before, .zt-crop > .cm::after{ content: ""; position: absolute; width: 18px; height: 18px; border: 0 solid var(--fg-quiet); pointer-events: none; } .zt-crop::before{ top: -10px; left: -26px; border-top-width: 1px; border-left-width: 1px; } .zt-crop::after{ top: -10px; right: -26px; border-top-width: 1px; border-right-width: 1px; } .zt-crop > .cm::before{ bottom: -6px; left: -26px; border-bottom-width: 1px; border-left-width: 1px; } .zt-crop > .cm::after{ bottom: -6px; right: -26px; border-bottom-width: 1px; border-right-width: 1px; } .zt-crop > .cm{ position: absolute; inset: 0; pointer-events: none; } @media (max-width: 760px){ .zt-crop::before, .zt-crop::after, .zt-crop > .cm{ display: none; } } /* ---------- colophon ---------- */ .zt-colophon{ border-top: 2.5px solid var(--border); background: linear-gradient(180deg, var(--bg-low), var(--bg-deep)); padding: clamp(2.4rem, 4vw, 3.4rem) 0 2rem; } [data-theme="film"] .zt-colophon{ background: linear-gradient(180deg, var(--bg), var(--bg-low)); } .zt-colophon .grid{ display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; } .zt-colophon .links{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.2rem 1.6rem; text-align: right; font-family: var(--font-mono); font-size: .7rem; letter-spacing: var(--font-tracking-label-tight); color: var(--fg-muted); line-height: 2; text-transform: uppercase; } .zt-colophon .links a{ text-decoration: none; display: block; } .zt-colophon .links a:hover{ color: var(--fg); } .zt-colophon .foot{ margin-top: 2rem; padding-top: 1rem; border-top: var(--border-hair); display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--type-label-sm); letter-spacing: var(--font-tracking-label); text-transform: uppercase; color: var(--fg-label); } @media (max-width: 700px){ .zt-colophon .links{ text-align: left; } } /* ---------- OS shell ---------- */ .zt-shell{ display: grid; grid-template-columns: 240px minmax(0,1fr); min-height: 100dvh; } .zt-shell > main{ padding: 1.4rem 1.6rem 3rem; min-width: 0; } .zt-shell .page-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .zt-shell .page-head h1{ font-family: var(--font-display); font-weight: var(--font-weight-display); font-stretch: var(--font-stretch-display); letter-spacing: var(--font-tracking-display); font-size: 1.6rem; line-height: 1.1; margin: 0; } .zt-grid{ display: grid; gap: var(--dn-gap); grid-template-columns: repeat(var(--cols, 4), minmax(0,1fr)); } @media (max-width: 700px){ .zt-grid{ grid-template-columns: 1fr; } .zt-shell > main{ padding: 1rem .9rem 2rem; } } @media (max-width: 900px){ .zt-shell{ grid-template-columns: 1fr; } .zt-sidenav{ border-right: 0; border-bottom: var(--border-rule); flex-direction: row; flex-wrap: wrap; } .zt-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } /* ---------- motion contract ---------- */ .zt-reveal{ opacity: 0; transform: translateY(var(--motion-rise)); transition: opacity var(--motion-reveal) var(--motion-ease-out), transform var(--motion-reveal) var(--motion-ease-out); } .zt-reveal.in{ opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ .zt-reveal{ opacity: 1; transform: none; transition: none; } .zt-page *, .zt-page *::before, .zt-page *::after{ animation: none !important; transition: none !important; } } html.flat .zt-reveal{ opacity: 1; transform: none; transition: none; }