/* ---------- Design tokens ---------- */
:root {
--bg: #ffffff;
--bg-subtle: #fafafa;
--bg-hover: #f4f4f5;
--bg-active: #f1f3f5;
--border: #ececec;
--border-strong: #e2e2e2;
--text: #1a1a1a;
--text-muted: #6b7280;
--text-faint: #9ca3af;
--accent: #0f1b2d; /* Baltha navy */
--header-h: 60px;
--sidebar-w: 224px; /* ~10% narrower than the original 248px */
--skills-w: 264px;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: var(--font);
color: var(--text);
background: var(--bg);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* ---------- App shell ---------- */
.app {
display: flex;
flex-direction: column; /* full-width header on top, body row below */
position: relative;
height: 100vh;
overflow: hidden;
}
/* The row beneath the header: product area + CV panel share this. Grid (not
flex) so the panel track can be sized in vw reliably and still animate —
flex-basis with vw collapses to 0 in this nested context. */
.app-body {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: 1fr 0px;
transition: grid-template-columns 0.25s ease;
}
.app.cv-open .app-body {
grid-template-columns: 1fr 40vw;
}
.main-area {
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
/* ---------- Header ---------- */
.header {
height: var(--header-h);
flex-shrink: 0;
display: flex;
align-items: center;
border-bottom: 1px solid var(--border);
background: var(--bg);
}
.brand {
display: flex;
align-items: center;
flex-shrink: 0;
width: var(--sidebar-w);
height: 100%;
padding-left: 22px;
border-right: 1px solid var(--border);
}
.brand-logo {
height: 30px;
width: auto;
display: block;
}
.header-nav {
display: flex;
align-items: stretch;
gap: 0;
height: 100%;
padding-left: 0;
}
.about-toggle {
appearance: none;
margin-left: auto;
height: 100%;
/* Full-height square tab flush to the right edge, with a divider on its left
(the nav buttons stay borderless — only this one keeps a border). */
border: none;
border-left: 1px solid var(--border);
background: none;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: var(--text-muted);
padding: 0 20px;
border-radius: 0;
cursor: pointer;
white-space: nowrap;
transition: background 0.12s ease, color 0.12s ease;
}
.about-toggle:hover {
background: var(--bg-hover);
color: var(--text);
}
.about-toggle.active {
background: var(--bg-active);
color: var(--text);
}
.header-nav button {
appearance: none;
border: none;
background: none;
font-family: inherit;
font-size: 14px;
color: var(--text-muted);
height: 100%;
padding: 0 16px;
border-radius: 0;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.header-nav button:hover {
background: var(--bg-hover);
color: var(--text);
}
.header-nav button.active {
background: var(--bg-hover);
color: var(--text);
font-weight: 500;
}
/* ---------- Layout ---------- */
.layout {
display: flex;
flex: 1;
min-height: 0;
}
/* ---------- Skills & tools panel (right rail) ---------- */
.skills-panel {
flex: 25 1 0;
min-width: 0;
border-left: 1px solid var(--border);
background: var(--bg);
overflow-y: auto;
padding: 32px 30px;
/* Animate the collapse to 0 when the CV opens (see .app.cv-open below). */
transition: flex-grow 0.25s ease, padding 0.25s ease,
border-left-color 0.25s ease;
}
.skills-title {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-faint);
margin: 0 0 18px;
}
.skills-group {
margin-bottom: 22px;
}
.skills-group h4 {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin: 0 0 9px;
}
.skills-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.skill-tag {
font-size: 12px;
color: var(--text-muted);
background: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: 999px;
padding: 4px 10px;
}
.skills-empty {
font-size: 13px;
color: var(--text-faint);
}
/* Per-section blocks in the right rail (Project summary + the three pill sets).
The heading copies .skills-title's font exactly, with tighter spacing. */
.skills-block {
margin-bottom: 24px;
}
.skills-block:last-child {
margin-bottom: 0;
}
.skills-head {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-faint);
margin: 0 0 10px;
}
.skills-summary {
font-size: 13px;
line-height: 1.62;
color: var(--text-muted);
margin: 0;
}
.skills-summary + .skills-summary {
margin-top: 11px;
}
/* ---------- Sidebar ---------- */
.sidebar {
width: var(--sidebar-w);
flex-shrink: 0;
border-right: 1px solid var(--border);
padding: 16px 12px;
overflow-y: auto;
background: var(--bg);
}
.sidebar-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-faint);
padding: 4px 10px 8px;
}
.sidebar-label {
font-size: 12px;
line-height: 1.5;
color: var(--text-muted);
padding: 4px 10px 14px;
/* Match the gap below the inter-project dividers (.side-item padding-top), so
the first project sits the same distance from its line as the rest. */
margin-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Separate each project with a divider line and a larger gap, so a project is
clearly distinct from the sub-topics nested under it. */
.side-item + .side-item {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
/* Project row: the project pill + an optional expand/collapse arrow. */
.side-row {
display: flex;
align-items: center;
border-radius: 6px;
transition: background 0.12s ease;
}
.side-row:hover {
background: var(--bg-hover);
}
.side-row.active {
background: var(--bg-active);
}
.side-proj {
flex: 1;
min-width: 0;
appearance: none;
border: none;
background: none;
font-family: inherit;
font-size: 13px;
text-align: left;
color: var(--text-muted);
padding: 7px 10px;
cursor: pointer;
}
.side-row:hover .side-proj,
.side-row.active .side-proj {
color: var(--text);
}
.side-row.active .side-proj {
font-weight: 500;
}
.side-arrow {
appearance: none;
border: none;
background: none;
display: flex;
align-items: center;
justify-content: center;
padding: 6px 9px;
color: var(--text-faint);
cursor: pointer;
}
.side-arrow svg {
transition: transform 0.15s ease;
}
.side-arrow.open svg {
transform: rotate(90deg);
}
/* Nested section list shown when a project is expanded — animated via the
grid-rows 0fr→1fr trick (the inner wrapper is clipped while collapsed). */
.side-sub {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.25s ease;
}
.side-sub.open {
grid-template-rows: 1fr;
}
.side-sub-inner {
overflow: hidden;
min-height: 0;
display: flex;
flex-direction: column;
margin-left: 16px;
padding-left: 8px;
border-left: 1px solid var(--border);
}
.side-sec {
appearance: none;
border: none;
background: none;
font-family: inherit;
font-size: 12px;
text-align: left;
color: var(--text-faint);
padding: 5px 8px;
border-radius: 5px;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.side-sec:hover {
background: var(--bg-hover);
color: var(--text);
}
/* ---------- Content ---------- */
.content {
flex: 75 1 0;
min-width: 0;
overflow-y: auto;
padding: 40px;
}
/* Thin scrollbars throughout the portfolio shell. */
.content,
.sidebar,
.skills-panel {
scrollbar-width: thin;
scrollbar-color: rgba(20, 20, 40, 0.18) transparent;
}
.content::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.skills-panel::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.content::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.skills-panel::-webkit-scrollbar-thumb {
background: rgba(20, 20, 40, 0.18);
border-radius: 999px;
}
.content::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.skills-panel::-webkit-scrollbar-thumb:hover {
background: rgba(20, 20, 40, 0.3);
}
.content::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.skills-panel::-webkit-scrollbar-track {
background: transparent;
}
.content-inner {
max-width: none;
}
.eyebrow {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-faint);
margin: 0 0 8px;
}
.content h1 {
font-size: 26px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 14px;
color: var(--text);
}
.content p {
color: var(--text-muted);
margin: 0 0 16px;
/* Text runs the full content width, flush with the images/iframe edge. */
max-width: none;
}
.placeholder-box {
margin-top: 28px;
border: 1px dashed var(--border-strong);
border-radius: 10px;
background: var(--bg-subtle);
height: 320px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-faint);
font-size: 13px;
}
/* Home / empty state */
.home {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
height: 100%;
}
/* ---------- Wide content (custom project pages) ---------- */
.content-wide {
max-width: none;
}
/* ---------- Petwheels project page ---------- */
.pw-logo {
height: 40px;
width: auto;
display: block;
margin: 0 0 20px;
}
/* Zenik's wordmark is more compact than Petwheels' — give it more height. */
.zenik-page .pw-logo {
height: 74px;
}
/* Durare's wordmark sits inside a rounded outline — a touch more height. */
.durare-page .pw-logo {
height: 50px;
}
.docol-page .pw-logo {
height: 46px;
}
/* Brand lockup: the CAN Energy Drink logo followed by the TUFF wordmark. */
.tuff-page .tuff-brand {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 20px;
}
/* The logo sits in a padded black box so its artwork has breathing room from the
rounded edge (the logo's own background is black, so the padding blends in). */
.tuff-page .tuff-can-logo {
height: 68px;
width: auto;
display: block;
background: #000;
padding: 13px;
border-radius: 16px;
box-sizing: content-box;
}
.tuff-page .tuff-wordmark {
display: block;
font-size: 46px;
font-weight: 500;
letter-spacing: 0.16em;
color: var(--text-muted);
}
/* Cover: the final render and the prototype photo side by side, heights matched
(each figure's flex-grow is set inline to its aspect ratio). */
.tuff-cover {
display: flex;
gap: 14px;
align-items: stretch;
max-width: none;
margin: 8px 0 6px;
}
.tuff-cover figure {
margin: 0;
min-width: 0;
}
.tuff-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Phase intro diagram: the PRODIP model opening each phase section — a paragraph
sits above it, the diagram below. Capped so the wide diagram isn't upscaled. */
.tuff-phase-img {
max-width: 540px;
}
/* Justified image gallery: every image shares one row-height and keeps its own
aspect ratio (varying width), so mixed CAD/photo/diagram sets line up cleanly
instead of being squashed into equal cells. Rows wrap; --h sets the height. */
.tuff-jgallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 12px 0 18px;
}
.tuff-jgallery figure {
margin: 0;
height: var(--h, 185px);
flex: 0 1 auto;
min-width: 0;
}
.tuff-jgallery img {
display: block;
height: 100%;
width: auto;
max-width: 100%;
object-fit: contain;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
}
.tuff-jgallery figcaption {
font-size: 12px;
color: var(--text-faint);
text-align: center;
margin-top: 6px;
}
/* The product photo: a portrait bottle shot, kept small and left-aligned. The
figure shrinks to the image so the caption sits directly under it. */
.tuff-product {
margin: 10px 0 16px;
width: fit-content;
max-width: 100%;
}
/* Higher specificity than `.pw-img img` so the fixed height wins (otherwise the
portrait shot stretches to the full content width). */
.tuff-page .tuff-product img {
display: block;
width: auto;
height: 360px;
max-width: 100%;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
}
.tuff-page .tuff-product figcaption {
font-size: 12px;
color: var(--text-faint);
margin-top: 8px;
text-align: left;
}
/* Technical drawings: up to two per row at a normal image width, collapsing to
one per row once the column gets too narrow. */
.tuff-drawings {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 16px;
margin: 12px 0 18px;
}
.tuff-drawing {
margin: 0;
max-width: none;
}
.tuff-drawing img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
}
/* Justified single row that fills the full content width: each figure grows by
its aspect ratio (--ar = width/height) so all images share one height and
together span 100% of the row. */
.tuff-jrow {
display: flex;
flex-wrap: nowrap;
gap: 10px;
margin: 12px 0 18px;
}
.tuff-jrow figure {
margin: 0;
flex: var(--ar, 1) 1 0;
min-width: 0;
}
.tuff-jrow img {
display: block;
width: 100%;
height: auto;
aspect-ratio: var(--ar, 1);
object-fit: contain;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
}
/* ========================= Epicyclic Magnetic Gear ========================= */
/* Brand lockup: the NJIT badge (already red) + the project wordmark. */
.epi-page .epi-brand {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin: 0 0 20px;
}
.epi-page .epi-njit-badge {
height: 62px;
width: auto;
border-radius: 10px;
display: block;
}
.epi-page .epi-wordmark {
font-size: 33px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--text-muted);
}
/* Cover: the two videos side by side, heights matched (flex-grow set inline to
each clip's aspect ratio). */
.epi-cover {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 12px;
margin: 8px 0 20px;
}
.epi-cover figure {
margin: 0;
min-width: 240px;
}
.epi-cover video {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--border);
border-radius: 10px;
background: #000;
}
.epi-cover figcaption {
font-size: 12px;
color: var(--text-faint);
text-align: center;
margin-top: 6px;
}
/* Nested bullet list (the design breakdown) — a touch tighter. */
.epi-page .pw-list ul {
margin: 6px 0 4px;
padding-left: 18px;
}
.epi-page .pw-list ul li {
margin: 0 0 4px;
}
.epi-credit {
font-size: 12.5px;
color: var(--text-muted);
}
/* Slide viewer: one slide at a time, prev/next + counter. */
.epi-slider {
max-width: 840px;
margin: 8px 0 10px;
outline: none;
}
.epi-stage {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.epi-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
.epi-slide.on {
opacity: 1;
}
.epi-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 12px;
}
.epi-nav {
width: 38px;
height: 38px;
border: 1px solid var(--border-strong);
border-radius: 50%;
background: var(--bg-subtle);
color: var(--text);
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease;
}
.epi-nav:hover {
background: var(--bg-active);
}
.epi-counter {
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
min-width: 64px;
text-align: center;
}
/* Structure & build: the 9 CAD/build images as a 3×3 block — fixed row height,
widths varying by aspect ratio, left-aligned — with the tall motor-on-bottle
photo standing full-height beside it. The whole block hugs the left edge. */
.tuff-build {
display: flex;
align-items: stretch;
justify-content: flex-start;
gap: 12px;
margin: 12px 0 18px;
width: fit-content;
max-width: 100%;
}
.tuff-build-rows {
flex: 0 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.tuff-brow {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 10px;
height: 150px;
}
.tuff-brow figure {
margin: 0;
height: 100%;
min-width: 0;
}
.tuff-brow img {
display: block;
height: 100%;
width: auto;
max-width: 100%;
object-fit: contain;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
}
.tuff-build .tuff-tall {
flex: 0 0 clamp(120px, 14vw, 165px);
margin: 0;
}
.tuff-build .tuff-tall img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
}
/* Give each subsection pill clear breathing room from the block above it
(a dr-key box, table or the phase diagram) so subsections read as distinct. */
.tuff-page .pw-pill {
margin-top: 42px;
}
/* Patent table: small muted source tag (INPI / Google). */
.tuff-src {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 4px;
background: var(--bg-active);
color: var(--text-muted);
font-size: 11px;
font-weight: 600;
vertical-align: middle;
}
/* Market cards (durare .mkt-brand pattern) — coolers have no brand logo, so the
product name stands in for it in the logo slot. */
.mkt-logo .mkt-name {
font-weight: 700;
font-size: 13.5px;
color: var(--text);
line-height: 1.25;
}
/* The Cooper Cooler card — TUFF's direct inspiration — gets a subtle accent. */
.tuff-mkt-key {
border-color: var(--accent);
background: var(--bg-active);
}
/* ---------- TUFF: conceptual-phase tables (matched to the report) ---------- */
/* Horizontal scroll wrapper so the wide six-column concepts table never overflows
the content column on narrow screens. */
.tuff-table-scroll {
overflow-x: auto;
margin: 8px 0 18px;
}
/* The five-concepts comparison (report Fig. 14): teal header, blue function
column, the winning concept's column tinted. */
.tuff-ctable {
width: 100%;
min-width: 640px;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
font-size: 12px;
}
.tuff-ctable th,
.tuff-ctable td {
padding: 8px 10px;
text-align: left;
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
vertical-align: top;
}
.tuff-ctable th:last-child,
.tuff-ctable td:last-child {
border-right: 0;
}
/* Column headers (Concept 1-5) — teal. */
.tuff-ctable thead th {
background: #4bacc6;
color: #fff;
font-weight: 700;
border-top: 0;
text-align: center;
}
/* Row labels (the function names) — blue, like the report. */
.tuff-ctable tbody th,
.tuff-ctable thead th:first-child {
background: #4f81bd;
color: #fff;
font-weight: 600;
text-align: left;
white-space: nowrap;
}
.tuff-ctable tbody td {
color: var(--text);
}
.tuff-ctable tbody tr:nth-child(even) td {
background: var(--bg-subtle);
}
/* Winning concept (Concept 1) column — header darker, cells tinted. These rules
come last so they win over the even-row stripe. */
.tuff-ctable thead th.tuff-ctable-win {
background: #2f6fb0;
}
.tuff-ctable td.tuff-ctable-win,
.tuff-ctable tbody tr:nth-child(even) td.tuff-ctable-win {
background: #e7f0fb;
font-weight: 600;
color: var(--text);
}
/* The selected concept (report Fig. 16): a vertical two-column blue summary. */
.tuff-selected {
width: 100%;
max-width: 460px;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
font-size: 13px;
margin: 8px 0 16px;
}
.tuff-selected thead th {
background: #4bacc6;
color: #fff;
font-weight: 700;
text-align: left;
padding: 9px 12px;
letter-spacing: 0.02em;
}
.tuff-selected tbody th {
background: #4f81bd;
color: #fff;
font-weight: 600;
text-align: left;
width: 45%;
}
.tuff-selected tbody th,
.tuff-selected tbody td {
padding: 8px 12px;
border-top: 1px solid var(--border);
}
.tuff-selected tbody td {
background: var(--bg-subtle);
color: var(--text);
}
/* ---------- TUFF: component cards (each with a photo slot) ---------- */
.tuff-parts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 14px;
margin: 12px 0 18px;
}
.tuff-part {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-subtle);
padding: 12px;
}
/* Photo slot — placeholder now, swapped for an ![]()
later. Height-capped so
cards line up; the compound selector beats the taller default
`.pw-page .placeholder-box` rule. */
.tuff-page .tuff-part-shot,
.tuff-page .tuff-part-shot.placeholder-box {
height: 130px;
margin: 0 0 10px;
}
.tuff-part-shot img {
display: block;
width: 100%;
height: 130px;
object-fit: contain;
border-radius: 6px;
background: #fff;
}
.tuff-part-name {
font-weight: 700;
font-size: 13px;
color: var(--text);
margin-bottom: 4px;
}
.tuff-part-spec {
margin: 0;
font-size: 12px;
line-height: 1.4;
color: var(--text-muted);
}
/* ---------- TUFF: calculation formula blocks ---------- */
.tuff-formula {
margin: 12px 0 6px;
padding: 12px 16px;
background: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: 8px;
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 14px;
color: var(--text);
text-align: center;
overflow-x: auto;
}
.tuff-inline {
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 13px;
background: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: 5px;
padding: 1px 6px;
white-space: nowrap;
}
/* Variable key under a formula, and small caption above a table. */
.tuff-where {
margin: 0 0 14px;
font-size: 12.5px;
color: var(--text-muted);
text-align: center;
}
.tuff-cap {
margin: 4px 0 6px;
font-size: 12.5px;
font-weight: 600;
color: var(--text-muted);
}
/* Specification table goal arrows. */
.tuff-goal {
font-size: 11px;
line-height: 1;
}
.tuff-goal-down {
color: #2f6fb0;
}
.tuff-goal-up {
color: #2e9e6b;
}
.tuff-spec-table td:last-child,
.tuff-spec-table th:last-child {
text-align: center;
}
/* Docol cover: a single image spanning the full content width. */
.pw-img.docol-cover {
max-width: none;
margin: 8px 0 4px;
}
.pw-img.docol-cover img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
}
/* Cover: two product renders side by side, matched in height (widths follow
each image's aspect ratio via inline flex-grow). */
.zenik-cover {
display: flex;
gap: 16px;
align-items: flex-start;
max-width: 860px;
margin: 8px 0;
}
.zenik-cover .pw-img {
min-width: 0;
}
/* Durare cover spans the full content width (three images). */
.durare-cover {
max-width: none;
}
/* ---------- Zenik: hand-built SWOT diagram ---------- */
/* The wrap is a query container, so the diagram responds to its OWN available
width (sidebar / CV panel / window resize) rather than the viewport. */
.swot-wrap {
container-type: inline-size;
max-width: 656px; /* ~80% of the image-bundle width */
margin: 6px 0 8px;
}
.swot {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.swot-quad {
position: relative;
z-index: 1;
border: 2px solid;
border-radius: 14px;
padding: 14px 16px;
}
.swot-quad h4 {
margin: 0 0 8px;
font-size: 15px;
font-weight: 700;
}
.swot-quad ul {
margin: 0;
padding: 0;
list-style: none;
}
.swot-quad li {
position: relative;
padding-left: 14px;
margin-bottom: 3px;
font-size: 13px;
line-height: 1.45;
color: var(--text);
}
.swot-quad li::before {
content: "–";
position: absolute;
left: 0;
color: var(--text-faint);
}
/* Quadrant colours, matched to the original slide. */
.swot-s { background: #edf4e3; border-color: #aacf8d; }
.swot-s h4 { color: #5f8a3a; }
.swot-w { background: #e7f0f9; border-color: #a3c4e3; }
.swot-w h4 { color: #356193; }
.swot-o { background: #fdf6da; border-color: #e7cf78; }
.swot-o h4 { color: #97791f; }
.swot-t { background: #efe7f4; border-color: #c4a9d6; }
.swot-t h4 { color: #6a4a87; }
/* Gray cross of arrows running through the gutters between quadrants. */
.swot-axis {
position: absolute;
z-index: 0;
background: #d2d2d4;
}
/* Axes stay within the diagram's bounds. The bars are inset by the arrowhead
length so the line ends at the arrowhead's base (not poking past its tip). */
.swot-axis-v {
left: 50%;
top: 12px;
bottom: 12px;
width: 5px;
transform: translateX(-50%);
}
.swot-axis-h {
top: 50%;
left: 12px;
right: 12px;
height: 5px;
transform: translateY(-50%);
}
.swot-axis::before,
.swot-axis::after {
content: "";
position: absolute;
width: 0;
height: 0;
}
/* Vertical arrowheads (up / down) — tips flush with the top/bottom edges,
bases meeting the bar so the line reads as capped. */
.swot-axis-v::before {
top: -12px;
left: 50%;
transform: translateX(-50%);
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 12px solid #d2d2d4;
}
.swot-axis-v::after {
bottom: -12px;
left: 50%;
transform: translateX(-50%);
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 12px solid #d2d2d4;
}
/* Horizontal arrowheads (left / right). */
.swot-axis-h::before {
left: -12px;
top: 50%;
transform: translateY(-50%);
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 12px solid #d2d2d4;
}
.swot-axis-h::after {
right: -12px;
top: 50%;
transform: translateY(-50%);
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 12px solid #d2d2d4;
}
/* When the diagram's own width gets tight, stack the quadrants and drop the
cross — handles sidebar/CV-panel/window resizing gracefully. */
@container (max-width: 560px) {
.swot {
grid-template-columns: 1fr;
gap: 12px;
}
.swot-axis {
display: none;
}
}
/* ---------- Zenik: target-audience research visuals ---------- */
.aud-wrap {
container-type: inline-size;
max-width: 760px;
margin: 2px 0 8px;
}
/* Each chart sits in its own bordered, rounded card for clear separation. */
.aud-card {
border: 1px solid var(--border-strong);
border-radius: 12px;
padding: 18px 20px 20px;
margin-bottom: 16px;
}
.aud-cap {
font-size: 13px;
font-weight: 600;
color: var(--text);
margin: 0 0 16px;
}
.aud-track {
height: 12px;
background: var(--bg-hover);
border-radius: 999px;
overflow: hidden;
}
.aud-fill {
display: block;
height: 100%;
border-radius: 999px;
}
.aud-v {
font-size: 12px;
color: var(--text-muted);
}
/* Demographics */
.aud-demo {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
.aud-group h4 {
margin: 0 0 10px;
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.aud-row {
display: grid;
grid-template-columns: 50px 1fr 46px;
align-items: center;
gap: 8px;
margin-bottom: 7px;
}
.aud-k {
font-size: 12px;
color: var(--text-muted);
}
.aud-row .aud-v {
text-align: right;
}
.aud-m { background: #2f86c9; }
.aud-f { background: #a02a3a; }
.aud-age {
margin: 9px 0 0;
font-size: 13px;
color: var(--text-muted);
}
.aud-age strong {
color: var(--text);
}
/* Needs ranking */
.aud-needs {
display: grid;
gap: 8px;
}
.aud-need {
display: grid;
grid-template-columns: 160px 1fr 26px;
align-items: center;
gap: 10px;
}
.aud-need-k {
font-size: 13px;
color: var(--text);
}
.aud-need .aud-track {
height: 16px;
}
.aud-n { background: #d2603f; }
.aud-need .aud-v {
font-weight: 600;
color: var(--text);
}
/* Work-habit pies */
.aud-habits {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.aud-pie-block {
text-align: center;
}
.aud-pie {
width: 112px;
height: 112px;
border-radius: 50%;
margin: 0 auto 10px;
}
.aud-pie-cap {
margin: 0 0 8px;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.aud-legend {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
.aud-legend li {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
color: var(--text-muted);
margin-bottom: 4px;
}
.aud-legend i {
width: 10px;
height: 10px;
border-radius: 2px;
flex-shrink: 0;
}
/* Tight widths: stack the multi-column visuals. */
@container (max-width: 560px) {
.aud-demo,
.aud-habits {
grid-template-columns: 1fr;
gap: 18px;
}
.aud-need {
grid-template-columns: 120px 1fr 24px;
}
}
/* ---------- Durare: user-research diagrams ---------- */
/* Wider value column for decimal percentages, right-aligned. */
.dr-bars .aud-need {
grid-template-columns: 150px 1fr 50px;
}
.dr-bars .aud-v {
text-align: right;
}
/* Small label above a chart inside a research card. */
.dr-sub {
font-size: 12px;
font-weight: 600;
color: var(--text);
margin: 16px 0 8px;
}
.dr-note {
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
margin: 8px 0 0;
}
.dr-note strong {
color: var(--text);
}
/* Highlighted key insight. */
.dr-key {
margin: 14px 0 0;
padding: 10px 14px;
background: var(--bg-subtle);
border-left: 3px solid var(--accent);
border-radius: 6px;
font-size: 13px;
color: var(--text);
}
.pw-intro {
font-size: 15px;
color: var(--text-muted);
max-width: none;
margin: 0 0 28px;
}
.pw-frame {
width: 100%;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: var(--bg-subtle);
}
.pw-frame iframe {
display: block;
width: 100%;
height: 640px;
border: 0;
}
/* Petwheels business model: paragraph → media row (CadQuery video + photo,
side by side at matched height) → paragraph → customizer. */
.pw-bm {
margin: 4px 0 22px;
}
.pw-bm .pw-text:last-child {
margin-bottom: 0;
}
.pw-bm-row {
display: flex;
gap: 16px;
align-items: flex-start;
/* Same cap as .pw-images so media rows line up across the page. */
max-width: 820px;
margin: 20px 0;
}
.pw-bm-row figure {
margin: 0;
min-width: 0;
flex: 1 1 0; /* fallback until JS reads the real aspect ratios */
}
.pw-bm-row img,
.pw-bm-row video {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--bg-subtle);
}
@media (max-width: 760px) {
.pw-bm-row {
flex-direction: column;
}
}
/* Responsive 16:9 video embed (e.g. YouTube). */
.pw-video {
max-width: 820px;
margin: 4px 0 22px;
aspect-ratio: 16 / 9;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--border);
background: #000;
}
.pw-video iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* Embedded map (e.g. Baltha Maker location). */
.pw-map {
max-width: 900px;
height: 380px;
margin: 8px 0 24px;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--border);
}
.pw-map iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
@media (max-width: 760px) {
.pw-map { height: 320px; }
}
/* Baltha Maker project logos (Star Wars / SESC / MESC). */
.maker-page .pw-logo {
height: 58px;
}
/* Edge Planning wordmark is chunky — a bit smaller. */
.pw-titlebar .edge-logo {
height: 46px;
}
/* Baltha Maker wordmark is a compact two-line block — sized up to match the Edge logo. */
.pw-titlebar .baltha-logo {
height: 76px;
}
/* Interactive Design company headers. */
.pw-titlebar .meetkai-logo { height: 46px; }
/* Extra specificity: the later .work-page .pw-logo (58px) rule must not win. */
.work-page .pw-titlebar .mtr-logo { height: 106px; }
/* Baltha Studio work-project logos (clients / tools). */
.work-page .pw-logo {
height: 58px;
}
/* Square badge logos read smaller than wide wordmarks at the same height —
give them more. */
.work-page .pistons-logo {
height: 84px;
}
/* The Chevrolet bowtie sits in the middle third of a square canvas — extra
height so the visible mark matches the others; negative margins absorb the
transparent padding above and below it. */
.work-page .chevy-logo {
height: 112px;
margin: -18px 0 2px;
}
/* The Dolce Gusto badge is a circle on a solid square background — crop it
fully round. */
.work-page .dg-logo {
height: 84px;
border-radius: 50%;
}
/* Inline heading for continuous (non-collapsible) project content. */
.pw-heading {
font-size: 19px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
margin: 30px 0 12px;
}
/* Baltha Maker service columns (FDM / resin / laser) — framed cards, full image. */
.pw-services {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 900px;
margin: 20px 0 30px;
}
.pw-service {
display: flex;
flex-direction: column;
border: 1px solid var(--border-strong);
border-radius: 12px;
padding: 16px;
background: var(--bg);
}
.pw-service img {
width: 100%;
height: auto;
display: block;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-subtle);
}
.pw-service h3 {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin: 12px 0 4px;
}
.pw-service p {
font-size: 13px;
line-height: 1.55;
color: var(--text-muted);
margin: 6px 0 0;
}
@media (max-width: 760px) {
.pw-services { grid-template-columns: 1fr; gap: 16px; }
}
/* Project-kind grid (4 x 2). */
.pw-kinds {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 16px;
max-width: 900px;
margin: 12px 0 28px;
}
.pw-kind {
margin: 0;
display: flex;
flex-direction: column;
border: 1px solid var(--border-strong);
border-radius: 12px;
overflow: hidden;
background: var(--bg);
}
.pw-kind img {
width: 100%;
height: auto;
display: block;
background: var(--bg-subtle);
}
.pw-kind span {
display: block;
padding: 12px;
text-align: center;
font-size: 13px;
font-weight: 500;
color: var(--text);
}
/* Instagram embeds: two fixed-width columns side by side. The blockquotes carry
IG's own width:calc(100% - 2px) inline style, so they size to each column;
columns wrap below each other on narrow screens. */
.pw-ig {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
margin: 12px 0 8px;
}
.pw-ig-col {
flex: 1 1 320px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.pw-ig-col .instagram-media {
margin: 0 !important;
min-width: 0 !important;
}
/* ---- Polish components ---- */
/* Icon + wordmark logo lockup (Meetcraft). */
.pw-lockup { display: flex; align-items: center; gap: 7px; margin: 0 0 22px; flex-wrap: wrap; }
.pw-lockup-icon { height: 50px; width: auto; display: block; }
.pw-lockup-word { height: 26px; width: auto; display: block; }
/* Title bar: logo and/or title with an optional action button beside it. */
.pw-titlebar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 0 0 18px; }
.pw-titlebar h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pw-titlebar .pw-logo { margin: 0; }
/* Heading with an action button beside it. */
.pw-headbar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 30px 0 12px; }
.pw-headbar .pw-heading { margin: 0; }
/* Cover image + video side by side (both framed 16:9). */
.pw-cover-row { display: flex; gap: 16px; align-items: flex-start; max-width: 980px; margin: 8px 0 24px; }
.pw-cover-row > * { flex: 1 1 0; min-width: 0; margin: 0; }
.pw-cover-row .pw-cover-cell img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border: 1px solid var(--border); border-radius: 10px; }
@media (max-width: 760px) { .pw-cover-row { flex-direction: column; } }
/* Two videos side by side. */
.pw-video-row { display: flex; gap: 16px; max-width: 980px; margin: 8px 0 22px; }
.pw-video-row .pw-video { flex: 1 1 0; min-width: 0; margin: 0; }
@media (max-width: 760px) { .pw-video-row { flex-direction: column; } }
/* Responsive feature cards (title, image, text) that wrap to new rows. */
.pw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; max-width: 940px; margin: 20px 0 30px; }
.pw-card { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--border-strong); border-radius: 12px; padding: 16px; background: var(--bg); }
.pw-card h3 { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 12px; }
.pw-card img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); }
.pw-card p { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin: 12px 0 0; }
/* Before/after drag comparison slider (mirrors the interactive site). */
.pw-compare { margin: 8px 0 24px; max-width: 860px; }
.pw-compare-box { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); cursor: ew-resize; user-select: none; }
.pw-compare-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.pw-compare-before { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; }
.pw-compare-before img { width: 200%; max-width: none; }
.pw-compare-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 6px rgba(15,23,42,.4); pointer-events: none; }
.pw-compare-divider::after { content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(255,255,255,.92); border: 2px solid #fff; box-shadow: 0 1px 6px rgba(15,23,42,.35); }
.pw-compare figcaption { font-size: 12px; color: var(--text-faint); margin-top: 8px; }
/* Feature row: an image beside a short title + paragraph (image left by
default, .img-right flips it). Stacks on mobile. */
.pw-feature {
display: flex;
gap: 26px;
align-items: center;
max-width: 860px;
margin: 18px 0 26px;
}
.pw-feature.img-right {
flex-direction: row-reverse;
}
.pw-feature-media {
flex: 1 1 0;
min-width: 0;
}
.pw-feature-media img {
width: 100%;
height: auto;
display: block;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-subtle);
}
.pw-feature-body {
flex: 1 1 0;
min-width: 0;
}
.pw-feature-body h3 {
font-size: 15px;
font-weight: 600;
color: var(--text);
margin: 0 0 8px;
}
.pw-feature-body p {
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
margin: 0;
}
@media (max-width: 760px) {
.pw-feature,
.pw-feature.img-right {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
}
/* Cover row: two media side by side, full width. JS sets each figure's
flex-grow to its media aspect ratio (flex-basis 0), so heights match. */
.pw-cover {
display: flex;
gap: 16px;
align-items: flex-start;
width: 100%;
margin: 8px 0 28px;
}
.pw-cover figure {
margin: 0;
min-width: 0;
flex: 1 1 0; /* fallback until JS reads the real aspect ratios */
}
.pw-cover img,
.pw-cover video {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-subtle);
}
@media (max-width: 760px) {
.pw-cover {
flex-direction: column;
}
}
.pw-section {
/* No divider line — the gray title block separates sections instead. */
margin-top: 16px;
}
.pw-section-head {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
/* Light-gray stripe that bleeds outward (negative margins) so its padding
lines the title up with the body text rather than indenting it. */
background: var(--bg-active);
border-radius: 10px;
padding: 10px 16px;
margin: 0 -16px;
}
.pw-section-title {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
margin: 0;
}
/* Header variant that stacks the title and a small annotation (e.g.
"Summarized") with a tight, controlled gap — no margin-collapse guesswork. */
.pw-section-head--stack {
flex-direction: column;
align-items: flex-start;
gap: 3px;
}
/* Header variant that baseline-aligns an inline annotation (e.g. "(Summarized)")
with the bottom of the section title. */
.pw-section-head--tag {
align-items: baseline;
}
.pw-section-tag {
font-size: 14px;
font-weight: 500;
line-height: 1.2;
color: var(--text-muted);
margin: 0;
}
/* Lighter heading for parts within a subsection (e.g. Lifestyle / Concepts). */
.pw-subhead {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin: 24px 0 10px;
}
/* Sub-item label: a small light-gray pill that hugs its text (one level down
from a main section title). */
.pw-pill {
display: inline-block;
background: var(--bg-active);
border-radius: 8px;
padding: 5px 12px;
font-size: 15px;
font-weight: 600;
color: var(--text);
margin: 28px 0 12px;
}
/* A sub-head directly under a pill belongs to it — keep them close. */
.pw-pill + .pw-subhead {
margin-top: 0;
}
/* A single-row image group: all images the same height, widths set by each
image's aspect ratio (inline flex-grow), scaling to fit the row. */
.pw-row {
display: flex;
gap: 16px;
align-items: flex-start;
max-width: 820px;
margin: 4px 0 22px;
}
.pw-row .pw-img {
min-width: 0;
}
/* A vertical pair sharing one slot of a .pw-row: two images stacked on top of
each other, together matching the height of the row's other images (the
slot's flex is the pair's combined aspect ratio: 1 / (1/a1 + 1/a2)). */
.pw-row .pw-stack {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
/* Image set: several images acting as ONE figure — a single border wraps the
whole row (a thin background seam divides the images) and one caption sits
below the group. Per-image flex is each image's aspect ratio, so they come
out the same height. */
.pw-imgset-row {
display: flex;
gap: 4px;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
background: var(--bg-subtle);
}
.pw-img .pw-imgset-row img {
min-width: 0;
width: auto;
height: auto;
border: 0;
border-radius: 0;
}
/* Two paired blocks (text row + image row) sharing one grid, so each text sits
directly above its image. Columns are proportional to the image aspect ratios,
which makes the two images come out the same height. */
.dr-mfg {
display: grid;
/* Columns proportional to the image aspect ratios so the two images end up the
same height; cells stretch to equal height. */
grid-template-columns: 1.785fr 1.492fr;
align-items: stretch;
gap: 16px;
margin: 16px 0 22px;
max-width: 820px;
}
.dr-mfg-cell {
display: flex;
flex-direction: column;
border: 1px solid var(--border-strong);
border-radius: 10px;
padding: 14px 16px;
}
.dr-mfg-cell .pw-subhead {
margin-top: 0;
}
.dr-mfg-cell .pw-text {
margin-bottom: 14px;
}
/* Pin the image to the bottom so both align regardless of text length. */
.dr-mfg-cell .pw-img {
margin: auto 0 0;
}
/* A standalone bordered card (e.g. In-house components). */
.dr-box {
border: 1px solid var(--border-strong);
border-radius: 10px;
padding: 14px 16px;
max-width: 820px;
margin: 16px 0 18px;
}
.dr-box .pw-subhead {
margin-top: 0;
}
.dr-box .pw-text {
margin-bottom: 14px;
}
.dr-box .pw-row {
margin: 0;
max-width: none;
}
/* Plain data table (e.g. the user / project requirement lists). */
.dr-table {
width: 100%;
max-width: 820px;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
font-size: 13px;
margin: 4px 0 22px;
}
.dr-table th,
.dr-table td {
text-align: left;
padding: 8px 12px;
}
/* Vertical separators between columns (rows already have horizontal lines). */
.dr-table th:not(:last-child),
.dr-table td:not(:last-child) {
border-right: 1px solid var(--border);
}
.dr-table thead th {
background: var(--bg-active);
color: var(--text);
font-weight: 700;
}
.dr-table tbody td {
border-top: 1px solid var(--border);
color: var(--text);
}
.dr-table tbody tr:nth-child(even) td {
background: var(--bg-subtle);
}
/* Row-header cells (e.g. the grouped category / part-name first column). */
.dr-table tbody th {
text-align: left;
font-weight: 600;
color: var(--text);
background: var(--bg-subtle);
border-top: 1px solid var(--border);
vertical-align: top;
}
/* Total / summary row. */
.dr-table tr.dr-total th,
.dr-table tr.dr-total td {
background: var(--bg-active);
color: var(--text);
font-weight: 700;
border-top: 2px solid var(--border-strong);
}
/* Numeric (rank / relevance) columns stay narrow and centred. */
.dr-table-num td:first-child,
.dr-table-num th:first-child,
.dr-table-num td:nth-child(3),
.dr-table-num th:nth-child(3) {
width: 1%;
white-space: nowrap;
text-align: center;
}
/* Relevance shown as a number followed by a 10-dot meter (filled = score). */
.dr-relev {
display: inline-flex;
gap: 3px;
align-items: center;
}
.dr-relev-n {
margin-right: 6px;
font-weight: 600;
color: var(--text);
}
/* Ideation gallery: full width, breaking 4 → 2 → 1 across screen sizes. */
.dr-ideation {
container-type: inline-size;
margin: 4px 0 22px;
}
.dr-ideation-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
align-items: start;
}
/* Uniform box shape so every image is the same height in its row; narrower
sketches just get white side-margins (no cropping). */
.dr-ideation-grid .pw-img img {
aspect-ratio: 0.8;
height: auto;
object-fit: contain;
background: #fff;
}
@container (max-width: 720px) {
.dr-ideation-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@container (max-width: 380px) {
.dr-ideation-grid {
grid-template-columns: 1fr;
}
}
/* Single near-square mood board, kept to a modest width. */
.pw-img.dr-board {
max-width: 500px;
margin: 4px 0 22px;
}
/* Magnetic-lock tests: a full-width row of five labelled photo cards,
dropping to fewer columns as the content area narrows. */
.dr-magnets {
container-type: inline-size;
margin: 6px 0 18px;
}
.dr-magnets-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
@container (max-width: 560px) {
.dr-magnets-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@container (max-width: 320px) {
.dr-magnets-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.dr-mag {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
background: var(--bg-subtle);
}
.dr-mag-img {
display: flex;
align-items: center;
justify-content: center;
height: 140px;
background: #fff;
border-bottom: 1px solid var(--border);
}
.dr-mag-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.dr-mag-body {
display: flex;
flex-direction: column;
gap: 5px;
padding: 9px 12px 12px;
}
.dr-mag-n {
font-weight: 700;
font-size: 12px;
color: var(--text);
}
.dr-mag-spec {
font-size: 12px;
line-height: 1.4;
color: var(--text-muted);
}
.dr-mag-tag {
align-self: flex-start;
margin-top: 1px;
padding: 2px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
}
.dr-mag-tag.pick {
background: var(--accent);
color: #fff;
}
.dr-mag-tag.out {
background: var(--bg-hover);
color: var(--text-faint);
}
/* Retractable wheel: exploded view (3/8) · mechanism diagram (3/8) · steps (2/8),
each filling its column so the diagrams render large. Wraps when narrow. */
.dr-wheel {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 22px;
margin: 6px 0 20px;
}
.pw-img.dr-wheel-explode {
flex: 3 1 240px;
margin: 0;
}
.pw-img.dr-wheel-explode img {
width: 100%;
height: auto;
}
/* The mechanism diagram (3/8) with its three steps (2/8) beside it. */
.dr-wheel-mech {
flex: 5 1 380px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 18px;
}
.dr-wheel-mech .dr-mech-fig {
flex: 3 1 200px;
margin: 0;
}
.dr-wheel-mech .dr-mech-fig img {
width: 100%;
height: auto;
}
/* Steps stretch to the image height and spread out so each sits beside its
panel in the diagram. */
.dr-steps {
flex: 2 1 160px;
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
line-height: 1.45;
color: var(--text-muted);
}
.dr-steps li {
display: flex;
gap: 8px;
}
.dr-steps strong {
color: var(--text);
font-weight: 700;
}
/* Prototype mosaic: column-based masonry that auto-fits the available width,
so it reflows on its own when the CV panel opens or the window resizes.
Mixed portrait/landscape shots keep their own proportions. */
.proto-mosaic {
columns: 300px;
column-gap: 12px;
margin: 6px 0 22px;
}
/* Row-major prototype grid — fills left-to-right, top-to-bottom (so order is
preserved and any empty cell lands at the bottom-right). */
.proto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
align-items: start;
margin: 6px 0 22px;
}
.proto-grid figure.pw-img {
margin: 0;
}
.proto-grid figure.pw-img img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
background: #fff;
}
.proto-mosaic figure.pw-img {
break-inside: avoid;
width: 100%;
margin: 0 0 12px;
border-radius: 8px;
overflow: hidden;
background: #fff;
}
.proto-mosaic figure.pw-img img,
.proto-mosaic figure.pw-img video {
display: block;
width: 100%;
height: auto;
}
/* Making-of shots: a fixed responsive grid — 1×4, 2×2 or 4×1 by width. */
.proto-make {
container-type: inline-size;
margin: 6px 0 22px;
}
.proto-make-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
align-items: start;
}
@container (max-width: 600px) {
.proto-make-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@container (max-width: 300px) {
.proto-make-grid {
grid-template-columns: 1fr;
}
}
.proto-make-grid figure.pw-img {
margin: 0;
border-radius: 8px;
overflow: hidden;
background: #fff;
}
.proto-make-grid figure.pw-img img {
display: block;
width: 100%;
height: auto;
}
/* ---------- Market analysis: brand cards (logos only) ---------- */
.mkt-brands {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 14px;
margin: 6px 0 18px;
}
.mkt-brand {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px;
background: var(--bg-subtle);
}
.mkt-logo {
display: flex;
align-items: center;
height: 44px;
margin-bottom: 10px;
}
.mkt-logo img {
display: block;
width: auto;
height: auto;
max-height: 38px;
max-width: 145px;
}
.mkt-price {
margin: 0 0 6px;
font-size: 12px;
font-weight: 700;
color: var(--text);
}
.mkt-note {
margin: 0 0 12px;
font-size: 12.5px;
line-height: 1.45;
color: var(--text-muted);
}
/* Suitcase photo pinned to the bottom of each card, so all cards run to the
same height (grid stretches them) with the product shot aligned across the row. */
.mkt-shot {
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
height: 150px;
padding: 10px;
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
}
.mkt-shot img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
/* ---------- Competitor analysis: one wide card per brand ---------- */
.cmp-cards {
margin: 6px 0 18px;
}
.cmp-card {
display: flex;
flex-wrap: wrap;
gap: 22px;
align-items: flex-start;
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px 18px;
background: var(--bg-subtle);
margin: 0 0 14px;
}
.cmp-left {
flex: 0 0 196px;
}
.cmp-logo {
display: flex;
align-items: center;
justify-content: center;
height: 66px;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 12px;
}
.cmp-logo img {
max-width: 100%;
max-height: 42px;
width: auto;
height: auto;
}
.cmp-info {
margin: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.cmp-info > div {
display: flex;
gap: 6px;
font-size: 12px;
line-height: 1.3;
}
.cmp-info dt {
margin: 0;
flex: 0 0 84px;
color: var(--text-muted);
font-weight: 600;
}
.cmp-info dd {
margin: 0;
color: var(--text);
}
.cmp-body {
flex: 1 1 280px;
min-width: 0;
}
.cmp-body p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
}
/* ---------- Docol: mission / vision + principles ---------- */
.docol-mv {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
margin: 6px 0 16px;
}
.docol-mv-card {
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: 8px;
padding: 12px 14px;
background: var(--bg-subtle);
}
.docol-mv-k {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 5px;
}
.docol-mv-card p {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--text);
}
.docol-principles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
margin: 4px 0 18px;
}
.docol-pri {
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
background: #fff;
}
.docol-pri span {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--accent);
margin-bottom: 3px;
}
.docol-pri p {
margin: 0;
font-size: 12px;
line-height: 1.4;
color: var(--text-muted);
}
/* ---------- Universal design: 7 principle cards ---------- */
.ud-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 12px;
margin: 6px 0 18px;
}
.ud-card {
position: relative;
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px 12px 14px;
background: var(--bg-subtle);
}
.ud-n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 12px;
font-weight: 700;
margin-bottom: 8px;
}
.ud-card h4 {
margin: 0 0 4px;
font-size: 13.5px;
color: var(--text);
}
.ud-card p {
margin: 0;
font-size: 12px;
line-height: 1.45;
color: var(--text-muted);
}
/* ---------- Heated-towel-rail market cards ---------- */
.htr-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
margin: 6px 0 18px;
}
.htr-card {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px;
background: var(--bg-subtle);
}
.htr-logo {
display: flex;
align-items: center;
height: 40px;
margin-bottom: 10px;
}
.htr-logo img {
width: auto;
height: auto;
max-height: 34px;
max-width: 130px;
}
.htr-tag {
margin: 0 0 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--accent);
}
.htr-note {
margin: 0;
font-size: 12.5px;
line-height: 1.45;
color: var(--text-muted);
}
/* Ideation: both config studies stacked inside one bordered card. */
.idea-stack {
display: flex;
flex-direction: column;
gap: 14px;
max-width: 720px;
margin: 6px 0 18px;
padding: 16px;
border: 1px solid var(--border);
border-radius: 10px;
background: #fff;
}
.idea-stack figure {
margin: 0;
}
.idea-stack img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
background: #fff;
}
/* Creation: in-the-bathroom render cards — 2×2 block with one tall card on the right. */
.amb-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 6px 0 18px;
}
.amb-tall {
grid-column: 3;
grid-row: 1 / span 2;
}
@media (max-width: 720px) {
.amb-grid {
grid-template-columns: 1fr 1fr;
}
.amb-tall {
grid-column: auto;
grid-row: auto;
}
}
@media (max-width: 440px) {
.amb-grid {
grid-template-columns: 1fr;
}
}
.amb-card {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
background: var(--bg-subtle);
}
.amb-card figure {
margin: 0;
background: #fff;
border-bottom: 1px solid var(--border);
}
.amb-card figure img {
display: block;
width: 100%;
height: auto;
}
.amb-card h4 {
margin: 12px 14px 4px;
font-size: 14px;
color: var(--text);
}
.amb-card p {
margin: 0 14px 14px;
font-size: 12.5px;
line-height: 1.45;
color: var(--text-muted);
}
/* Ideation: weighted decision matrix. */
.idm-wrap {
max-width: none;
margin: 8px 0 14px;
overflow-x: auto;
}
.idm {
width: 100%;
min-width: 720px;
border-collapse: collapse;
font-size: 13px;
}
.idm th,
.idm td {
padding: 8px 10px;
text-align: center;
border-bottom: 1px solid var(--border);
}
.idm th:first-child,
.idm td:first-child {
text-align: left;
min-width: 220px;
max-width: 300px;
}
.idm td:first-child b {
display: inline-block;
min-width: 14px;
margin-right: 4px;
color: var(--accent);
}
.idm thead th {
background: var(--accent);
color: #fff;
font-weight: 600;
font-size: 12px;
vertical-align: bottom;
}
.idm thead th span {
display: block;
margin-top: 2px;
font-size: 10px;
font-weight: 500;
opacity: 0.75;
}
.idm-w td {
background: var(--bg-active);
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
border-bottom: 1px solid var(--border-strong);
}
.idm-w td:first-child {
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 10px;
}
.idm-w td:last-child {
font-weight: 500;
color: var(--text-faint);
}
.idm tbody tr:nth-child(even) {
background: var(--bg-subtle);
}
.idm tbody td:last-child {
font-weight: 700;
color: var(--text);
}
.idm-win {
background: #eaf0f7 !important;
box-shadow: inset 3px 0 0 var(--accent);
}
.idm-win td:first-child {
font-weight: 700;
}
.idm-win td:last-child {
color: var(--accent);
}
.idm-tag {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-size: 10px;
font-weight: 600;
vertical-align: middle;
}
/* Product-definition: text beside the towel-rail icon. */
.pdef-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 28px;
margin: 2px 0 4px;
}
.pdef-row .pw-text {
flex: 1 1 300px;
margin: 0;
}
.pdef-icon {
flex: 0 0 auto;
margin: 0;
}
.pdef-icon img {
display: block;
width: 138px;
height: auto;
}
/* The two current DocolCozy rails, side by side at matched height. */
.docol-rails {
display: flex;
align-items: flex-start;
gap: 16px;
max-width: 460px;
margin: 8px 0 18px;
}
.docol-rails .pw-img {
min-width: 0;
margin: 0;
}
.docol-rails .pw-img img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
}
.docol-rails figcaption {
text-align: center;
font-size: 12px;
color: var(--text-muted);
margin-top: 6px;
}
/* ---------- Concept: two poles + mood boards ---------- */
.cpt-poles {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 32px 56px;
margin: 10px 0 22px;
}
.cpt-pole {
flex: 0 0 240px;
text-align: center;
}
.cpt-circle {
display: block;
width: 150px;
height: 150px;
margin: 0 auto 10px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
}
.cpt-pole-name {
font-size: 16px;
font-weight: 700;
color: var(--accent);
margin-bottom: 9px;
}
.cpt-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
max-width: 230px;
margin: 0 auto;
}
.cpt-tags span {
font-size: 11.5px;
color: var(--text-muted);
background: var(--bg-hover);
border-radius: 999px;
padding: 3px 9px;
}
.pw-img.cpt-board {
max-width: none;
margin: 4px 0 18px;
}
.pw-img.cpt-board img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
}
/* ---------- User research (audience cards, NETI field study, demands) ---------- */
.dur-subtitle {
font-size: 16px;
font-weight: 600;
color: var(--text);
margin: 28px 0 10px;
}
.dur-audience {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 18px 0 6px;
}
.dur-aud-card {
display: flex;
align-items: center;
gap: 13px;
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--bg-subtle);
}
.dur-aud-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 10px;
background: var(--bg);
border: 1px solid var(--border);
color: var(--text-muted);
}
.dur-aud-icon svg {
width: 22px;
height: 22px;
}
.dur-aud-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.dur-aud-text b {
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.dur-aud-text span {
font-size: 12px;
color: var(--text-faint);
}
.dur-field {
display: grid;
grid-template-columns: 1fr 0.92fr;
gap: 30px;
align-items: start;
margin-top: 6px;
}
.dur-field .pw-text:last-child {
margin-bottom: 0;
}
.dur-photo {
margin: 0;
}
.dur-photo img {
width: 100%;
height: auto;
display: block;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--bg-subtle);
}
.dur-photo figcaption {
font-size: 12px;
color: var(--text-faint);
margin-top: 8px;
}
.dur-demands {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 16px 0 6px;
max-width: 540px;
}
.dur-demand {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
}
.dur-icon {
width: 84px;
height: 84px;
border-radius: 18px;
display: grid;
place-items: center;
background: var(--c);
box-shadow: 0 10px 20px -12px var(--c);
}
.dur-icon svg {
width: 40px;
height: 40px;
}
.dur-demand-label {
font-size: 15px;
font-weight: 700;
color: var(--c);
}
@media (max-width: 760px) {
.dur-audience,
.dur-demands {
grid-template-columns: 1fr;
}
.dur-field {
grid-template-columns: 1fr;
}
.dur-demands {
max-width: none;
}
}
/* ---------- Design requirements (must-have / nice-to-have tables) ---------- */
.ddr-tables {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
margin-top: 20px;
}
.ddr-table {
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.ddr-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
font-size: 14px;
font-weight: 600;
color: #fff;
}
.ddr-head-src {
font-size: 12px;
font-weight: 600;
opacity: 0.92;
}
.ddr-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 16px;
font-size: 13.5px;
border-top: 1px solid var(--bg);
}
.ddr-req {
color: var(--text);
font-weight: 500;
}
.ddr-src {
font-size: 12px;
color: var(--text-faint);
white-space: nowrap;
}
.ddr-must .ddr-head {
background: #5b9bd5;
}
.ddr-must .ddr-row {
background: #f4f8fc;
}
.ddr-must .ddr-row:nth-child(even) {
background: #e9f1fa;
}
.ddr-nice .ddr-head {
background: #ed7d31;
}
.ddr-nice .ddr-row {
background: #fdf5ef;
}
.ddr-nice .ddr-row:nth-child(even) {
background: #fbe9dc;
}
@media (max-width: 760px) {
.ddr-tables {
grid-template-columns: 1fr;
}
}
/* ---------- Interactive 3D opportunity map ---------- */
.opp3d {
position: relative;
height: 400px;
max-width: 820px;
margin: 10px 0 4px;
perspective: 1150px;
cursor: grab;
user-select: none;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 10px;
background:
radial-gradient(120% 90% at 50% 10%, #fff 0%, var(--bg-subtle) 100%);
}
.opp3d.grabbing {
cursor: grabbing;
}
.opp3d-fallback {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--text-faint);
}
.opp3d-stage {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
transform-style: preserve-3d;
}
.opp3d-stage > * {
position: absolute;
left: 0;
top: 0;
transform-style: preserve-3d;
}
.opp3d-wall {
background-color: rgba(15, 27, 45, 0.03);
background-image:
linear-gradient(rgba(15, 27, 45, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(15, 27, 45, 0.08) 1px, transparent 1px);
background-size: 25% 25%;
border: 1px solid var(--border-strong);
}
.opp3d-axis {
height: 2px;
transform-origin: 0 50%;
background: var(--text-faint);
}
.opp3d-axis.ax-i {
background: #d99a3a;
}
.opp3d-axlabel {
display: flex;
align-items: center;
gap: 3px;
font-size: 11px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
transform-origin: 0 0;
}
.opp3d-axlabel.ax-il {
color: #c07d1e;
}
.opp3d-emoji {
font-size: 13px;
}
.opp3d-conn {
height: 2px;
transform-origin: 0 50%;
background: repeating-linear-gradient(90deg, #d99a3a 0 5px, transparent 5px 9px);
}
.opp3d-dot {
position: absolute;
left: 0;
top: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--text-muted);
transform: translate(-50%, -50%);
}
.opp3d-pt.is-docol .opp3d-dot {
background: #d99a3a;
width: 9px;
height: 9px;
}
.opp3d-chip {
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
display: flex;
align-items: center;
justify-content: center;
padding: 4px 6px;
background: #fff;
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.14);
}
.opp3d-chip img {
display: block;
width: auto;
height: auto;
max-height: 19px;
max-width: 72px;
}
.opp3d-pt.is-docol .opp3d-chip {
border-color: #d99a3a;
box-shadow: 0 0 0 2px rgba(217, 154, 58, 0.35), 0 3px 9px rgba(0, 0, 0, 0.2);
}
.opp3d-q {
font-size: 42px;
font-weight: 800;
color: rgba(217, 154, 58, 0.5);
transform-origin: 0 0;
}
.opp3d-cap {
font-size: 12px;
line-height: 1.5;
color: var(--text-muted);
margin: 2px 0 18px;
}
.opp3d-cap span {
color: var(--text-faint);
}
/* ---------- Cost × benefit positioning map ---------- */
/* Container query so the map scales to its own width (sidebar / CV panel). */
.cxb-wrap {
container-type: inline-size;
max-width: 600px;
margin: 10px 0 16px;
}
.cxb {
position: relative;
aspect-ratio: 1.4 / 1;
margin: 24px 84px 24px 8px;
border-left: 2px solid var(--border-strong);
border-bottom: 2px solid var(--border-strong);
}
/* Axis arrowheads. */
.cxb::before {
content: "";
position: absolute;
left: -5px;
top: -9px;
border: 5px solid transparent;
border-bottom-color: var(--border-strong);
}
.cxb::after {
content: "";
position: absolute;
right: -9px;
bottom: -5px;
border: 5px solid transparent;
border-left-color: var(--border-strong);
}
.cxb-ylabel {
position: absolute;
top: -24px;
left: -6px;
font-size: 12px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.cxb-xlabel {
position: absolute;
left: calc(100% + 10px);
bottom: -10px;
font-size: 12px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.cxb-emoji {
font-size: 14px;
}
/* The area of opportunity — a dashed orange circle in the low-cost/high-benefit corner. */
.cxb-opp {
position: absolute;
transform: translate(-50%, -50%);
width: 32%;
aspect-ratio: 1 / 1;
border: 2px dashed #e0863a;
background: rgba(224, 134, 58, 0.12);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.cxb-opp span {
font-size: 11px;
font-weight: 600;
line-height: 1.2;
color: #c06a1c;
}
/* Brand markers — a white chip holding the logo, centred on its point. */
.cxb-mark {
position: absolute;
z-index: 1;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
padding: 5px 8px;
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.cxb-mark img {
display: block;
width: auto;
height: auto;
max-height: 24px;
max-width: 84px;
}
@container (max-width: 380px) {
.cxb-mark {
padding: 3px 5px;
}
.cxb-mark img {
max-height: 17px;
max-width: 58px;
}
.cxb-opp span {
font-size: 9px;
}
}
.dr-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--border-strong);
}
.dr-dot.on {
background: var(--text);
}
/* Materials: a full-width row of bordered info cards (4 across when there's
room, wrapping on narrow widths). */
.dr-mat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
margin-bottom: 18px;
}
.dr-mat {
border: 1px solid var(--border-strong);
border-radius: 10px;
padding: 14px 16px;
}
.dr-mat h4 {
margin: 0 0 6px;
font-size: 15px;
font-weight: 600;
color: var(--text);
}
.dr-mat p {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
}
/* ---------- Durare: ergonomic analysis ---------- */
/* OWAS task cards: a posture photo beside its analysis. The wrap is a query
container so the cards stack when the column gets tight (CV panel open, etc.). */
.erg-tasks {
container-type: inline-size;
display: flex;
flex-direction: column;
gap: 14px;
max-width: 820px;
margin: 16px 0 22px;
}
.erg-task {
display: grid;
grid-template-columns: 230px 1fr;
gap: 20px;
align-items: center;
border: 1px solid var(--border-strong);
border-radius: 10px;
padding: 16px;
}
/* Landscape photos (walking, lifting) get a wider image column. */
.erg-task--wide {
grid-template-columns: 330px 1fr;
}
/* The task with no posture photo collapses to a single text column. */
.erg-task--text {
grid-template-columns: 1fr;
}
.erg-task .pw-img {
margin: 0;
}
.erg-task-head {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin: 0 0 4px;
}
.erg-task-head h4 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--text);
}
/* Navy chip carrying the three-digit OWAS code. */
.erg-code {
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--bg);
background: var(--accent);
border-radius: 6px;
padding: 3px 8px;
}
.erg-posture {
margin: 0 0 8px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-faint);
}
.erg-task-body p:last-child {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--text-muted);
}
/* Problems: numbered cards, photo beside the note (or text-only / full-width). */
.erg-problems {
container-type: inline-size;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 820px;
margin: 16px 0 22px;
}
.erg-problem {
display: grid;
grid-template-columns: 190px 1fr;
gap: 18px;
align-items: center;
border: 1px solid var(--border-strong);
border-radius: 10px;
padding: 14px 16px;
}
.erg-problem--text {
grid-template-columns: 1fr;
}
/* Walking on uneven ground pairs two photos in a wider image column so the
shots read large; the note takes the remaining space. */
.erg-problem--two {
grid-template-columns: 430px 1fr;
}
.erg-problem-imgs {
display: flex;
gap: 10px;
}
.erg-problem-imgs .pw-img {
margin: 0;
min-width: 0;
}
.erg-problem .pw-img {
margin: 0;
}
.erg-problem-body h4 {
display: flex;
align-items: baseline;
gap: 8px;
margin: 0 0 6px;
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.erg-num {
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
color: var(--accent);
}
.erg-problem-body p {
margin: 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-muted);
}
/* Significant measures: reference diagram beside the two driving dimensions.
auto-fit keeps it two columns when wide and stacks to one when tight. */
.erg-sig {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
max-width: 820px;
margin: 12px 0 22px;
align-items: stretch;
}
.erg-sig-figure {
margin: 0;
}
/* The two stat cards stack and split the diagram's height evenly. */
.erg-sig-measures {
display: flex;
flex-direction: column;
gap: 14px;
}
.erg-sig-measures .erg-measure {
flex: 1 1 0;
}
.erg-measure {
border: 1px solid var(--border-strong);
border-radius: 12px;
padding: 18px 20px;
}
/* The two driving dimensions carry the soft Zenik-SWOT tones — one warm,
one cool — so they read as the headline takeaways of the analysis. */
.erg-measure--orange {
background: #fdf6da;
border-color: #e7cf78;
}
.erg-measure--orange .erg-measure-val {
color: #97791f;
}
.erg-measure--blue {
background: #e7f0f9;
border-color: #a3c4e3;
}
.erg-measure--blue .erg-measure-val {
color: #356193;
}
.erg-measure-val {
display: block;
font-size: 30px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--accent);
}
.erg-measure h4 {
margin: 10px 0 6px;
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.erg-measure p {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
}
/* Tight columns: drop the photo/text into a single stack. */
@container (max-width: 520px) {
.erg-task,
.erg-task--wide,
.erg-problem,
.erg-problem--two {
grid-template-columns: 1fr;
gap: 14px;
}
}
/* Concept cards (mood-board concepts). auto-fit reflows on resize, no query. */
.concepts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 26px;
max-width: 780px;
margin: 4px 0 22px;
}
.concept {
text-align: center;
}
.concept-ic {
width: 138px;
height: 138px;
border-radius: 50%;
object-fit: cover;
display: block;
margin: 0 auto 14px;
border: 1px solid var(--border);
}
/* Mood-board collages already have rounded corners baked in — match them. */
.mb-board img {
border-radius: 20px;
}
.concept-name {
margin: 0 0 8px;
font-size: 15px;
font-weight: 700;
}
.concept-tech { color: #4b5563; }
.concept-comm { color: #b3892f; }
.concept-vita { color: #5f8a3a; }
.concept p {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
text-align: left;
}
/* ---------- Zenik: design-requirements tables ---------- */
.req-wrap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 18px;
max-width: 820px;
margin: 6px 0 8px;
}
.req {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
font-size: 13px;
}
.req th,
.req td {
text-align: left;
padding: 8px 12px;
}
.req thead th {
color: #fff;
font-weight: 700;
}
.req tbody td {
color: var(--text);
border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.req tbody td:last-child {
font-size: 12px;
color: var(--text-muted);
}
/* Mandatory — green; Desirable — gold (matched to the slide). */
.req-must thead th { background: #5f8a3a; }
.req-must tbody tr:nth-child(odd) td { background: #eef4e6; }
.req-must tbody tr:nth-child(even) td { background: #f6faf0; }
.req-nice thead th { background: #c6a23a; }
.req-nice tbody tr:nth-child(odd) td { background: #faf3da; }
.req-nice tbody tr:nth-child(even) td { background: #fdf9ec; }
/* Main section titles — full-width light-gray stripe (same look as
.pw-section-head), bleeding to the content edges. */
.pw-subtitle {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
background: var(--bg-active);
border-radius: 10px;
padding: 10px 16px;
/* Small top gap only; content spacing lives in .pw-sec-inner so collapsed
stripes sit close together. */
margin: 14px -16px 0;
}
/* Collapsible main titles: a chevron on the right, content hidden until open. */
.pw-collapsible {
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.pw-subtitle.pw-collapsible:hover,
.pw-section-head.pw-collapsible:hover {
background: #e7eaee;
}
.pw-collapsible::after {
content: "";
flex-shrink: 0;
width: 8px;
height: 8px;
margin-left: auto;
border-right: 2px solid var(--text-faint);
border-bottom: 2px solid var(--text-faint);
transform: translateY(-2px) rotate(-45deg);
transition: transform 0.15s ease;
}
.pw-collapsible.open::after {
transform: translateY(1px) rotate(45deg);
}
/* Animated collapse via grid-rows 0fr→1fr; the inner wrapper is clipped. */
.pw-sec-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
}
.pw-sec-body.open {
grid-template-rows: 1fr;
}
.pw-sec-inner {
overflow: hidden;
min-height: 0;
padding-top: 12px;
}
/* Group divider (e.g. "Research & Development") — a light label, no background,
with a full-width underline. Sits above its main-title sections. */
.pw-group {
display: flex;
align-items: baseline;
gap: 8px;
border-bottom: 1px solid var(--border-strong);
padding-bottom: 10px;
margin: 8px 0 6px;
}
.pw-group-label {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
}
.pw-group-tag {
font-size: 13px;
color: var(--text-faint);
}
/* Compact bulleted list (e.g. the user-research audiences). */
.pw-list {
margin: 0 0 20px;
padding-left: 18px;
font-size: 14px;
color: var(--text-muted);
}
.pw-list li {
margin-bottom: 6px;
}
.pw-list strong {
color: var(--text);
font-weight: 600;
}
/* A single figure (e.g. the mind map) — capped like the image bundles so it
doesn't dominate the page on wide screens. */
/* Higher specificity so the bottom gap wins over the later `.pw-img { margin:0 }`
— keeps space between stacked single images (e.g. Solutions, Drawings). */
.pw-img.pw-img-single {
margin: 4px 0 22px;
max-width: 820px;
}
.pw-text {
font-size: 14px;
color: var(--text-muted);
max-width: none;
margin: 0 0 20px;
}
.pw-btn {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
font-size: 13px;
font-weight: 500;
color: var(--text);
text-decoration: none;
padding: 8px 14px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--bg);
transition: background 0.12s ease, border-color 0.12s ease;
}
.pw-btn:hover {
background: var(--bg-hover);
border-color: var(--text-faint);
}
/* Angle driver for the orbiting glow (registered so it can be animated). */
@property --pw-glow-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
/* Attention cue: a colored glow (orange -> lilac -> blue) that orbits the
button's outline, tracing the border ring, then rests. A conic gradient with
one bright arc (centered on the driver angle) is masked to the 1px border
ring; a blurred copy underneath makes the thin line read as a glow.
Pacing: a plain constant rotation looks wrong on a rectangle — the short
sides span few degrees so the glow whips across them. The keyframes instead
give each edge a slice of TIME proportional to its length (top/bottom ~16%
each, sides ~4% each) and interpolate the angle across that edge, so the
perceived speed is roughly even all the way around. Tuned for a wide, short
button (~3.8:1). Subtle. */
.pw-btn-glow {
position: relative;
}
/* The traveling ring, shared by the crisp line and the blurred glow layer. */
.pw-btn-glow::after,
.pw-btn-glow-fx::before {
content: "";
position: absolute;
inset:-1px;
border-radius: inherit;
padding: 1px; /* ring thickness = the 1px border */
pointer-events: none;
background: conic-gradient(
from var(--pw-glow-angle),
rgba(203, 158, 203, 1) 0deg,
rgba(152, 161, 229, 0.95) 14deg,
transparent 42deg,
transparent 318deg,
rgba(240, 129, 82, 0.95) 346deg,
rgba(203, 158, 203, 1) 360deg
);
/* Show the gradient only on the border ring (border-box minus content-box). */
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: pw-btn-orbit 5.5s linear infinite;
}
/* The glow. The blur MUST live on a PARENT of the masked ring: CSS applies
`filter` before `mask`, so blurring the ring directly just gets re-clipped to
the crisp 1px line (that's why an inline blur did nothing, even at 10px). So
this wrapper element carries the blur and its ::before carries the masked
ring — the mask runs first, then the parent blurs the result into a halo. */
.pw-btn-glow-fx {
position: absolute;
inset: -1px;
border-radius: inherit;
pointer-events: none;
filter: blur(3px);
}
@keyframes pw-btn-orbit {
0% { --pw-glow-angle: -65deg; opacity: 0; } /* top-left corner */
3% { opacity: 1; }
10% { --pw-glow-angle: 55deg; } /* across top -> top-right */
20% { --pw-glow-angle: 105deg; } /* down right -> bottom-right */
30% { --pw-glow-angle: 255deg; } /* across bottom -> bottom-left */
40% { opacity: 1; }
50% { --pw-glow-angle: 400deg; opacity: 0; } /* up left -> back to start */
100% { --pw-glow-angle: 285deg; opacity: 0; } /* rest */
}
@media (prefers-reduced-motion: reduce) {
.pw-btn-glow::after,
.pw-btn-glow-fx::before { animation: none; }
}
.pw-images {
display: grid;
gap: 16px;
/* Cap the whole bundle (not each image) so figures stay a reasonable size on
wide screens — left-aligned with the text. */
max-width: 820px;
/* Breathing room before whatever follows (e.g. the next paragraph), so
captions don't crowd it. */
margin-bottom: 22px;
}
.pw-images-2 {
grid-template-columns: repeat(2, 1fr);
}
.pw-images-3 {
grid-template-columns: repeat(3, 1fr);
margin-top: 4px;
}
/* Aspect-fit pair: a flex row where JS (fitMediaRow) sets each figure's
flex-grow to its image's own aspect ratio, so the images come out the same
height even when their ratios differ (e.g. the two patent figures). */
.pw-images-fit {
display: flex;
align-items: flex-start;
}
.pw-images-fit .pw-img {
min-width: 0;
flex: 1 1 0; /* fallback until JS reads the real aspect ratios */
}
/* Environment-analysis clips/photos: uniform 5:4, cropped to fill (no
distortion) so the mixed sources line up cleanly. */
.pw-images-3 .pw-img img {
aspect-ratio: 5 / 4;
object-fit: cover;
}
.pw-img {
margin: 0;
}
.pw-img img,
.pw-img video {
width: 100%;
height: auto;
display: block;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-subtle);
}
.pw-img figcaption {
font-size: 12px;
color: var(--text-faint);
margin-top: 8px;
text-align: center;
}
.pw-page .placeholder-box {
height: 200px;
}
/* Image placeholder — fills a figure slot while the final image is pending. */
.pw-ph {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 200px;
height: 100%;
padding: 16px;
box-sizing: border-box;
border: 1px dashed var(--border-strong);
border-radius: 10px;
background: var(--bg-subtle);
color: var(--text-faint);
font-size: 12px;
line-height: 1.45;
text-align: center;
}
/* ---------- Petwheels: Research & Development components ---------- */
/* Copper accent picked up from the product renders. */
/* Diachronic timeline — milestones hung off a left rail. The left margin
makes room for the node bullets (they overhang the rail by 6px) so the
collapsible's overflow:hidden doesn't clip them. */
.pw-timeline {
margin: 10px 0 24px 7px;
border-left: 2px solid var(--border-strong);
}
.pw-tl {
position: relative;
padding: 0 0 20px 26px;
}
.pw-tl:last-child {
padding-bottom: 0;
}
.pw-tl::before {
content: "";
position: absolute;
left: -8px;
top: 2px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--bg);
border: 2px solid #c8703c;
}
.pw-tl-year {
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.02em;
color: #c8703c;
}
.pw-tl-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin: 2px 0 4px;
}
.pw-tl-text {
font-size: 13.5px;
color: var(--text-muted);
margin: 0;
}
/* Figure strip under a milestone — images sit at a uniform height, widths set
by their own aspect ratio (so mixed line-art and photos line up). */
.pw-tl-figs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
.pw-tl-figs figure.pw-img {
margin: 0;
}
.pw-tl-figs figure.pw-img img {
height: 132px;
width: auto;
max-width: 100%;
object-fit: contain;
background: var(--bg-subtle);
}
.pw-tl-figs figcaption {
text-align: left;
}
@media (max-width: 760px) {
.pw-tl-figs figure.pw-img img {
height: 108px;
}
}
/* Market competitor cards (no logo). */
.pw-mkt {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 6px 0 22px;
}
.pw-mkt-card {
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px 18px;
background: var(--bg);
}
.pw-mkt-name {
font-size: 15px;
font-weight: 600;
color: var(--text);
margin: 0 0 2px;
}
.pw-mkt-loc {
font-size: 12px;
color: var(--text-faint);
margin: 0 0 12px;
}
.pw-mkt-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 12px;
}
.pw-mkt-meta span {
font-size: 11.5px;
background: var(--bg-active);
color: var(--text);
border-radius: 6px;
padding: 4px 8px;
}
.pw-mkt-note {
font-size: 13px;
color: var(--text-muted);
margin: 0;
}
/* Product shots under a brand's blurb — uniform height, side by side, wrapping
when the card is too narrow to fit them all on one row. */
.pw-mkt-figs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.pw-mkt-figs figure.pw-img {
margin: 0;
}
.pw-mkt-figs figure.pw-img img {
height: 92px;
width: auto;
max-width: 100%;
object-fit: contain;
background: var(--bg-subtle);
border-radius: 8px;
}
/* Audience demand table (three publics). */
.pw-aud {
width: 100%;
border-collapse: collapse;
margin: 6px 0 18px;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
font-size: 13px;
}
.pw-aud th,
.pw-aud td {
text-align: left;
padding: 11px 14px;
border-top: 1px solid var(--border);
vertical-align: top;
}
.pw-aud thead th {
background: var(--bg-active);
color: var(--text);
font-weight: 600;
font-size: 13px;
border-top: 0;
}
.pw-aud tbody th {
background: var(--bg-subtle);
color: var(--text);
font-weight: 600;
width: 120px;
}
.pw-aud td {
color: var(--text-muted);
}
/* Personas. */
.pw-personas {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 6px 0 22px;
}
.pw-persona {
border: 1px solid var(--border);
border-radius: 12px;
padding: 18px;
background: var(--bg);
}
.pw-persona-pub {
display: inline-block;
margin-bottom: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #c8703c;
}
.pw-persona-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.pw-persona-av {
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: cover;
background: var(--bg-active);
flex-shrink: 0;
display: block;
}
.pw-persona-name {
font-size: 14.5px;
font-weight: 600;
color: var(--text);
margin: 0;
}
.pw-persona-role {
font-size: 12px;
color: var(--text-faint);
margin: 1px 0 0;
}
.pw-persona p {
font-size: 13px;
color: var(--text-muted);
margin: 0;
}
/* Concept cards (mood boards). */
.pw-concepts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 8px 0 18px;
}
.pw-concept figure {
margin: 0;
}
.pw-concept img {
width: 100%;
display: block;
border: 1px solid var(--border);
border-radius: 10px;
}
.pw-concept-name {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin: 12px 0 4px;
}
.pw-concept p {
font-size: 13px;
color: var(--text-muted);
margin: 0;
}
/* Morphometric measurement chips. */
.pw-measures {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 6px 0 18px;
}
.pw-measure {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid var(--border);
border-radius: 10px;
padding: 9px 14px;
background: var(--bg);
}
.pw-measure-n {
width: 22px;
height: 22px;
border-radius: 50%;
background: #c8703c;
color: #fff;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pw-measure-k {
font-size: 13px;
color: var(--text);
font-weight: 500;
}
.pw-measure-v {
font-size: 13px;
color: var(--text-faint);
}
/* Material cards. */
.pw-materials {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin: 6px 0 20px;
}
.pw-mat {
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
background: var(--bg);
}
.pw-mat-name {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin: 0 0 2px;
}
.pw-mat-use {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #c8703c;
margin: 0 0 8px;
}
.pw-mat p {
font-size: 13px;
color: var(--text-muted);
margin: 0;
}
/* Environment analysis — task cards (dog / owner). */
.pw-taskgrid {
display: grid;
gap: 12px;
margin: 4px 0 18px;
}
.pw-taskgrid-3 {
grid-template-columns: repeat(3, 1fr);
}
.pw-taskgrid-2 {
grid-template-columns: repeat(2, 1fr);
}
.pw-taskcard {
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
background: var(--bg);
}
.pw-taskcard h5 {
font-size: 13.5px;
font-weight: 600;
color: var(--text);
margin: 0 0 5px;
}
.pw-taskcard p {
font-size: 12.5px;
line-height: 1.5;
color: var(--text-muted);
margin: 0;
}
/* Wider cards (urinate / defecate) — image sits beside the text. */
.pw-taskcard-media {
display: flex;
align-items: center;
gap: 14px;
}
.pw-taskcard-media .pw-taskcard-txt {
flex: 1;
min-width: 0;
}
.pw-taskcard-media figure.pw-img {
margin: 0;
flex-shrink: 0;
width: 42%;
max-width: 200px;
}
.pw-taskcard-media figure.pw-img img {
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 8px;
}
@media (max-width: 680px) {
.pw-taskgrid-3,
.pw-taskgrid-2 {
grid-template-columns: 1fr;
}
}
/* Environment analysis — numbered problems list. */
.pw-probs {
list-style: none;
margin: 4px 0 22px;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.pw-prob {
display: flex;
gap: 12px;
border: 1px solid var(--border);
border-radius: 10px;
padding: 13px 15px;
background: var(--bg);
}
.pw-prob-n {
width: 24px;
height: 24px;
border-radius: 50%;
background: #c8703c;
color: #fff;
font-size: 12.5px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pw-prob-t {
font-size: 13.5px;
font-weight: 600;
color: var(--text);
margin: 2px 0 4px;
}
.pw-prob div p:last-child {
font-size: 12.5px;
line-height: 1.5;
color: var(--text-muted);
margin: 0;
}
@media (max-width: 760px) {
.pw-probs {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.pw-mkt,
.pw-personas,
.pw-concepts,
.pw-materials {
grid-template-columns: 1fr;
}
}
/* ---------- Petwheels: news pile ("thrown on the table") ---------- */
.pw-news {
position: relative;
height: 440px; /* JS overrides to design-height × scale */
margin: 28px 0 8px;
}
/* The cards are authored against a fixed 1080×440 stage; JS sets --pw-scale so
the whole pile scales proportionally to the content width and always fits.
Scaling from the top centre keeps it horizontally centred and top-anchored. */
.pw-news-stage {
position: absolute;
top: 0;
left: 50%;
width: 1080px;
height: 440px;
margin-left: -540px;
transform: scale(var(--pw-scale, 1));
transform-origin: top center;
}
.pw-news-card {
position: absolute;
left: 50%;
top: 50%;
width: 260px;
height: auto;
border-radius: 6px;
background: #fff;
/* A soft, layered drop shadow so each card reads as a physical sheet. */
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12),
0 10px 26px rgba(15, 23, 42, 0.16);
/* Resting pose (also the no-JS / pre-animation fallback). */
transform: translate(-50%, -50%) translate(var(--x), var(--y))
rotate(var(--rot));
will-change: transform, opacity;
}
/* Before the pile scrolls into view, hide the cards so the throw reads from an
empty table. Once #pwNews gets .is-in, each card is dealt onto the pile. */
.pw-news.is-in .pw-news-card {
opacity: 0;
animation: pwThrow 0.5s cubic-bezier(0.18, 0.84, 0.31, 1) var(--delay) both;
}
@keyframes pwThrow {
0% {
opacity: 0;
/* Comes in from above the table, a touch larger and barely rotated. */
transform: translate(-50%, -50%)
translate(var(--x), calc(var(--y) - 50px))
rotate(calc(var(--rot) * 0.25)) scale(1.05);
}
70% {
opacity: 1;
}
100% {
opacity: 1;
transform: translate(-50%, -50%) translate(var(--x), var(--y))
rotate(var(--rot)) scale(1);
}
}
/* Respect users who prefer reduced motion: no throw, just the settled pile. */
@media (prefers-reduced-motion: reduce) {
.pw-news.is-in .pw-news-card {
opacity: 1;
animation: none;
}
}
@media (max-width: 760px) {
.pw-images-2 {
grid-template-columns: 1fr;
}
.pw-images-3 {
grid-template-columns: 1fr 1fr;
}
.pw-images-fit {
flex-direction: column;
}
}
/* ---------- Curriculum Vitae panel (slides in from the right) ---------- */
.cv-panel {
/* Width comes from the .app-body grid track; here we just clip and style. */
position: relative; /* contains the mobile close button (clipped when closed) */
min-width: 0;
overflow: hidden;
border-left: 1px solid transparent;
background: var(--bg);
}
.cv-panel.open {
border-left-color: var(--border);
}
/* While the CV is open, collapse the project skills rail to 0 (animated, so it
slides shut smoothly) — the product content then uses the full width of the
compressed main area. */
.app.cv-open .skills-panel {
flex-grow: 0;
flex-basis: 0;
padding-left: 0;
padding-right: 0;
border-left-color: transparent;
overflow: hidden;
}
.cv-inner {
/* Fixed width so the document doesn't reflow while the panel animates. */
width: 40vw;
height: 100%;
overflow-y: auto;
padding: 32px 36px;
scrollbar-width: thin;
scrollbar-color: rgba(20, 20, 40, 0.18) transparent;
}
.cv-inner::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.cv-inner::-webkit-scrollbar-thumb {
background: rgba(20, 20, 40, 0.18);
border-radius: 999px;
}
.cv-inner::-webkit-scrollbar-thumb:hover {
background: rgba(20, 20, 40, 0.3);
}
/* ---------- Curriculum Vitae ---------- */
.cv-page {
/* Fills the panel; the panel already constrains the width. */
max-width: none;
/* The panel is a fixed 40vw (desktop) / 100vw (mobile), so the identity card
can be narrow regardless of the viewport. Make this a query container so
the card can restructure based on its own width, not the screen's. */
container-type: inline-size;
container-name: cvpage;
}
/* Identity card: photo flush on the left, info on the right. */
.cv-card {
display: flex;
align-items: stretch;
padding: 0;
border: 1px solid var(--border-strong);
border-radius: 16px;
overflow: hidden; /* clips the photo's corners to the card radius */
background: var(--bg-subtle);
}
/* Portrait image: fixed width, stretched to the full card height (the info
column is usually the taller side). object-fit: cover crops the sides to fill
instead of leaving gaps or distorting. */
.cv-photo {
width: 180px;
align-self: stretch;
height: auto;
object-fit: cover;
object-position: center;
flex-shrink: 0;
display: block;
}
.cv-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
padding: 22px 26px;
}
.cv-info-row {
display: flex;
align-items: baseline;
gap: 12px;
}
.cv-info-label {
flex-shrink: 0;
width: 96px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-faint);
}
.cv-info-value {
font-size: 15px;
color: var(--text);
overflow-wrap: anywhere; /* long emails/links wrap instead of overflowing */
}
.cv-info-value a {
color: var(--text);
text-decoration: none;
border-bottom: 1px solid var(--border-strong);
}
.cv-info-value a:hover {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* Narrow card (small screen, or the 40vw panel on a smaller monitor): the flush
full-height portrait doesn't fit next to the info, so drop it to its own row
as a small, centered framed thumbnail ("moldura") and let the info list span
the full width. Driven by the card's own width via the .cv-page container. */
@container cvpage (max-width: 500px) {
.cv-card {
flex-direction: column;
align-items: stretch;
gap: 18px;
padding: 20px;
}
.cv-photo {
width: 132px;
align-self: center;
border: 1px solid var(--border-strong);
border-radius: 12px;
}
.cv-info {
width: 100%;
padding: 0;
justify-content: flex-start;
}
}
.cv-section {
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
/* Profile sits right under the identity card: no divider, smaller gap. */
#cv-profile {
margin-top: 22px;
padding-top: 0;
border-top: none;
}
.cv-section-title {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
margin: 0 0 16px;
}
.cv-text {
font-size: 14px;
color: var(--text-muted);
max-width: none;
margin: 0 0 16px;
}
.cv-skill-group {
margin-bottom: 22px;
}
.cv-skill-group:last-child {
margin-bottom: 0;
}
.cv-skill-label {
font-size: 13px;
font-weight: 600;
color: var(--text);
margin: 0 0 10px;
}
.cv-skill-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
/* Reuse the project skill chip look, slightly larger for the CV page. */
.cv-skill-tags .skill-tag {
font-size: 13px;
padding: 5px 12px;
}
.cv-skill-note {
font-size: 12px;
font-style: italic;
color: var(--text-faint);
}
.cv-page .placeholder-box {
height: 180px;
}
/* Experience: stacked cards, each with a role/period header, a company
meta line and a bullet list of responsibilities. */
.cv-jobs {
display: flex;
flex-direction: column;
gap: 14px;
}
.cv-job {
padding: 18px 20px;
border: 1px solid var(--border-strong);
border-radius: 14px;
background: var(--bg-subtle);
}
.cv-job-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
}
.cv-job-role {
font-size: 15px;
font-weight: 600;
color: var(--text);
margin: 0;
}
.cv-job-period {
flex-shrink: 0;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--text-faint);
white-space: nowrap;
}
.cv-job-meta {
font-size: 13px;
color: var(--text-muted);
margin: 4px 0 0;
}
.cv-job-company {
font-weight: 600;
color: var(--text);
}
.cv-job-sep {
margin: 0 7px;
color: var(--text-faint);
}
.cv-job-bullets {
margin: 11px 0 0;
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.cv-job-bullets li {
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
}
/* Education: one card per entry, degree + school on the left, years right. */
.cv-edu-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.cv-edu-item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
padding: 16px 20px;
border: 1px solid var(--border-strong);
border-radius: 14px;
background: var(--bg-subtle);
}
.cv-edu-degree {
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.cv-edu-note {
font-size: 12px;
font-weight: 700;
margin-left: 6px;
}
.cv-edu-note--split {
color: var(--text-faint); /* gray — split graduation */
}
.cv-edu-note--incomplete {
color: #ca8a04; /* yellow/gold — incomplete (kept legible on white) */
}
.cv-edu-school {
display: block;
font-size: 13px;
color: var(--text-muted);
margin-top: 2px;
}
.cv-edu-period {
flex-shrink: 0;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--text-faint);
white-space: nowrap;
}
.cv-references {
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid var(--border);
font-size: 12px;
font-style: italic;
color: var(--text-faint);
}
/* ====================================================================
Mobile shell
These elements only exist on small screens; hide them on desktop and
reveal/lay them out in the max-width: 760px block below.
==================================================================== */
.brand-icon,
.header-dd,
.subheader,
.info-modal,
.cv-close {
display: none;
}
/* ---- Custom dropdown (category + project pickers) ---- */
.m-dd {
position: relative;
}
.m-dd-btn {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
height: 100%;
padding: 0 14px;
border: none;
background: transparent;
font-family: inherit;
font-size: 14px;
font-weight: 500;
color: var(--text);
text-align: left;
cursor: pointer;
}
.m-dd-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.m-dd-chev {
flex-shrink: 0;
color: var(--text-faint);
transition: transform 0.18s ease;
}
.m-dd.open .m-dd-chev {
transform: rotate(180deg);
}
.m-dd-menu {
position: absolute;
top: calc(100% + 6px);
left: 8px;
right: 8px;
margin: 0;
padding: 6px;
list-style: none;
background: var(--bg);
border: 1px solid var(--border-strong);
border-radius: 12px;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
max-height: 62vh;
overflow-y: auto;
z-index: 90;
/* Hidden state: lifted up and faded out. visibility is delayed so the close
animation can play before the menu is removed from the hit-testing tree. */
opacity: 0;
transform: translateY(-8px);
visibility: hidden;
pointer-events: none;
transform-origin: top center;
transition: opacity 0.18s ease, transform 0.18s ease,
visibility 0s linear 0.18s;
}
.m-dd.open .m-dd-menu {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
.m-dd-menu {
transition: none;
}
}
.m-dd-opt {
padding: 11px 14px;
border-radius: 8px;
font-size: 14px;
color: var(--text-muted);
cursor: pointer;
}
.m-dd-opt:hover {
background: var(--bg-hover);
color: var(--text);
}
.m-dd-opt.active {
background: var(--bg-active);
color: var(--text);
font-weight: 500;
}
/* Header category picker: a full-height tab next to the logo, the menu dropping
from the header. */
.header-dd {
flex: 1;
min-width: 0;
height: 100%;
}
.header-dd .m-dd-btn {
padding: 0 16px;
font-size: 15px;
}
/* ---- Sub-header: a slightly recessed bar (subtle fill + stronger divider)
so it reads as secondary to the white header. ---- */
.subheader {
flex-shrink: 0;
align-items: stretch;
height: 48px;
padding: 0;
background: #f6f7f9; /* a hair darker than --bg-subtle so it reads as secondary */
border-bottom: 1px solid var(--border-strong);
}
.info-toggle {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 100%;
border: none;
border-right: 1px solid var(--border);
border-radius: 0;
background: transparent;
color: var(--text-muted);
cursor: pointer;
}
.info-toggle:active {
background: var(--bg-active);
}
.subhead-dd {
flex: 1;
min-width: 0;
height: 100%;
}
/* Project-info overlay (bottom sheet). */
.info-modal {
position: fixed;
inset: 0;
z-index: 80;
align-items: flex-end;
justify-content: center;
}
.info-modal.open {
display: flex;
}
.info-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.42);
}
.info-modal-card {
position: relative;
width: 100%;
max-height: 86vh;
background: var(--bg);
border-top-left-radius: 16px;
border-top-right-radius: 16px;
box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.2);
overflow-y: auto;
padding: 26px 22px 32px;
animation: infoSheetUp 0.26s ease;
}
@keyframes infoSheetUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.info-modal-close {
position: absolute;
top: 12px;
right: 12px;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 8px;
background: var(--bg-subtle);
color: var(--text-muted);
cursor: pointer;
z-index: 1;
}
/* Mobile-only close button for the full-screen CV panel. */
.cv-close {
position: absolute;
top: 12px;
right: 12px;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--bg-subtle);
color: var(--text-muted);
cursor: pointer;
z-index: 5;
}
@media (max-width: 760px) {
/* Header: bigger icon logo, hide the desktop nav, show the category picker. */
.brand-logo {
display: none;
}
.brand-icon {
display: block;
height: 38px;
width: auto;
}
.brand {
width: auto;
padding-left: 16px;
padding-right: 16px;
border-right: 1px solid var(--border);
}
.header {
/* Separate the white header from the device status bar (time/wifi/battery). */
border-top: 1px solid #d4d4d8;
}
.header-nav,
.about-toggle {
display: none;
}
.header-dd {
display: block;
}
/* Sub-header replaces the sidebar/skills rails. */
.subheader {
display: flex;
}
.sidebar,
.skills-panel {
display: none;
}
.content {
flex: 1;
padding: 22px 16px;
}
.cv-close {
display: flex;
}
/* Section header stripes (both the main .pw-section-head and the collapsible
R&D .pw-subtitle stripes) sit inside the content padding so they keep a gap
from the screen edge, rather than bleeding to it as they do on desktop. */
.pw-section-head,
.pw-subtitle {
margin-left: 0;
margin-right: 0;
}
/* CV takes the full viewport on mobile (no 50/50 split). */
.app.cv-open .app-body {
grid-template-columns: 0 1fr;
}
.cv-inner {
width: 100vw;
padding: 24px 16px;
}
/* Identity card layout (row → stacked portrait) is handled by the .cv-page
container query; here we just tighten the info type for narrow screens. */
.cv-info {
gap: 9px;
}
.cv-info-row {
gap: 10px;
}
.cv-info-label {
width: 72px;
font-size: 10px;
}
.cv-info-value {
font-size: 13px;
}
/* Image rows stack on narrow screens. */
.pw-row {
flex-direction: column;
}
/* Customizer: shorter so it isn't overly tall; its controls drawer scrolls. */
.pw-frame iframe {
height: 520px;
}
}
/* ---- Project covers: per-layout stacking on mobile ----
Inline flex-grow values set each image's desktop width, so these mobile
overrides use !important to win over the inline styles. */
@media (max-width: 760px) {
/* Durare (3 images): first image on its own row, the other two share a
second row. DocolCozy reuses these classes with 2 images, so the same
rule naturally lays it out as two stacked rows. */
.durare-cover {
flex-wrap: wrap;
}
.durare-cover .pw-img:first-child {
flex: 1 1 100% !important;
}
.durare-cover .pw-img:nth-child(2),
.durare-cover .pw-img:nth-child(3) {
flex: 1 1 0 !important;
}
/* Zenik and TUFF (2 images each): one image per row. */
.zenik-cover:not(.durare-cover) {
flex-direction: column;
}
.tuff-cover {
flex-direction: column;
}
.tuff-cover img {
height: auto;
}
}