@charset "UTF-8"; /* ===================================================== PER-PAGE ACCENT THEMES Add class to to swap the accent colour tokens. Default (no class) = blue, used by Steamline. .theme-orange = ProPoint ===================================================== */ body.theme-orange { --blue: #C95F1A; --blue-dark: #A84A12; --blue-tint: #FAF0E8; } body.theme-green { --blue: #3A7D44; --blue-dark: #2C6135; --blue-tint: #EBF4EC; } body.theme-dark { --blue: #C8C8C8; --blue-dark: #FFFFFF; --blue-tint: #C6C6C6; } /* Dark theme HMW banner: invert to near-black with white text */ body.theme-dark .hmw-banner { background: #141414; border-color: #2e2e2e; color: #FFFFFF; } body.theme-dark .hmw-banner .hmw-label { color: #777; } body.theme-dark .hmw-banner .p-hero { color: #FFFFFF; } body.theme-dark .hmw-banner strong { color: #FFFFFF; } body.theme-dark .hmw-banner em { color: #BBBBBB; } body.theme-dark .hmw-banner::before, body.theme-dark .hmw-banner::after { border-color: #C8C8C8; opacity: 0.45; } /* ===================================================== HERO ===================================================== */ .hero { position: relative; width: 100%; background: var(--ink); overflow: hidden; } .hero img { width: 100%; display: block; aspect-ratio: 16 / 7; object-fit: cover; opacity: 0.9; } .hero-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 3rem 56px 2.5rem; color: var(--white); font-family: var(--font-serif); font-size: clamp(2.5rem, 5.5vw, 5rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%); } /* ===================================================== MAIN ===================================================== */ main { max-width: 1440px; margin-left: auto; margin-right: auto; padding: 0 56px 5rem; } section { margin-bottom: calc(var(--u) * 5); } main > .meta-row:first-child { margin-top: calc(var(--u) * 3); } /* ===================================================== 12-COLUMN GRID 2px gap — components read as a unified surface ===================================================== */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; align-items: start; /* all children start at top by default */ } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; } /* ===================================================== IMAGE RATIOS No more forced squares — images breathe naturally ===================================================== */ /* Default: landscape 4:3 */ .img { background: var(--surface); overflow: hidden; position: relative; align-self: stretch; /* images stretch to fill grid row by default */ } .img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.25, 0, 0, 1); } .img:hover img { transform: scale(1.025); } /* Shape modifiers */ /* .sq = 4:3 landscape rectangle, sits at top of its cell */ .sq { aspect-ratio: 1 / 1; align-self: start; } /* .wide always stretches to fill its row height — it sits alongside text */ .wide { aspect-ratio: unset; align-self: stretch; min-height: 260px; } .tall { align-self: stretch; min-height: 280px; } .tall.img, .tall > .img { aspect-ratio: unset; height: 100%; min-height: 280px; } /* When a .sq sits in the same grid row as a .tall, it should stretch to match rather than be cropped at 4:3. Use the adjacent sibling combinator — .tall + .sq or .sq when .tall exists in same row. We target this via a grid modifier class on the parent. */ .grid--stretch-sq .sq { aspect-ratio: unset; align-self: stretch; min-height: 280px; } /* Generic stretch helper */ .img.stretch { align-self: stretch; aspect-ratio: unset; height: 100%; } /* ===================================================== TEXT BLOCKS Fit their content — no imposed height ===================================================== */ .text { display: flex; flex-direction: column; justify-content: flex-start; align-self: start; /* never stretch to fill — hug content */ padding: calc(var(--u) * 3); border: 1px solid var(--rule-light); background: var(--white); position: relative; } /* Left accent line in blue */ .text::before { content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: var(--blue); opacity: 0; transition: opacity 0.2s ease; } .text:hover::before { opacity: 1; } .text > div { width: 100%; } .text p { margin-top: calc(var(--u) * 0.75); } .text-column { display: flex; flex-direction: column; gap: calc(var(--u) * 2.5); } /* ===================================================== STACK / COL-STACK Items separated by 2px gap, stacked vertically ===================================================== */ .stack { display: flex; flex-direction: column; gap: 2px; align-self: stretch; } .stack > .img { aspect-ratio: 4 / 3; flex: 1; } .col-stack { display: flex; flex-direction: column; gap: 2px; align-self: stretch; } .col-stack > .text { /* text within col-stack hugs content */ align-self: start; } .col-stack > .img { flex: 1; align-self: stretch; aspect-ratio: unset; height: auto; min-height: 220px; } /* ===================================================== DOTTED CONNECTOR LINES Structural decoration between major sections ===================================================== */ /* Section-level dotted separator — use as a visual connector */ .dot-rule { display: flex; align-items: center; gap: calc(var(--u) * 1.5); margin: calc(var(--u) * 3) 0; grid-column: span 12; } .dot-rule::before, .dot-rule::after { content: ''; flex: 1; border-top: 1px dotted var(--rule); } .dot-rule-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); white-space: nowrap; flex-shrink: 0; } /* Dotted vertical connector — used in grid to join image to text below */ .dot-connector { position: relative; } .dot-connector::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 1px; height: calc(var(--u) * 2); border-left: 1px dotted var(--blue); z-index: 1; } /* Dotted border variant for text blocks that sit below images */ .text.dot-top { border-top: 1px dotted var(--rule); border-left: 1px dotted var(--rule); border-right: 1px dotted var(--rule); border-bottom: 1px solid var(--rule-light); } /* ===================================================== HOW MIGHT WE — full-bleed band ===================================================== */ .hmw-banner { background: var(--surface); margin: 0 -56px; padding: 5rem 56px; margin-bottom: calc(var(--u) * 4); border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule); position: relative; } /* Dotted corner marks — technical drawing detail */ .hmw-banner::before, .hmw-banner::after { content: ''; position: absolute; width: 12px; height: 12px; border-color: var(--blue); border-style: solid; opacity: 0.4; } .hmw-banner::before { top: 12px; left: 56px; border-width: 1px 0 0 1px; } .hmw-banner::after { bottom: 12px; right: 56px; border-width: 0 1px 1px 0; } .hmw-label { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: calc(var(--u) * 1.5); display: block; } /* ===================================================== REVEAL ANIMATION ===================================================== */ .reveal-up { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: var(--delay, 0ms); } .reveal-up.revealed { opacity: 1; transform: translateY(0); } /* ===================================================== CMF TABS ===================================================== */ .cmf { margin-bottom: 0; } .cmf-tabs { display: flex; border-bottom: 1px solid var(--ink); padding-left: 0; background: var(--surface); } .cmf-tab { display: flex; align-items: center; gap: 10px; padding: calc(var(--u) * 1.5) calc(var(--u) * 2); background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: background 0.15s ease; text-align: left; flex: 1; border-right: 1px solid var(--rule); } .cmf-tab:last-child { border-right: none; } .cmf-tab:hover { background: var(--white); } .cmf-tab.active { border-bottom-color: var(--blue); background: var(--white); } .cmf-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0; } .cmf-swatch--mat { border-radius: 2px; } .cmf-swatch--abs { background: linear-gradient(135deg, #d4d4d4 0%, #bebebe 100%); border: 1px solid #ccc; } .cmf-swatch--steel { background: repeating-linear-gradient(90deg, #b8babc 0px, #d2d4d6 2px, #b8babc 4px); border: 1px solid #aaa; } .cmf-swatch--cable { background: repeating-linear-gradient(45deg, #555 0px, #555 3px, #888 3px, #888 6px); border: 1px solid #444; } .cmf-tab-text { display: flex; flex-direction: column; gap: 2px; } .cmf-tab-cat { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); line-height: 1; } .cmf-tab-name { font-family: var(--font-body); font-size: 0.82rem; font-weight: 400; color: var(--ink); line-height: 1.2; } .cmf-tab.active .cmf-tab-name { color: var(--blue); font-weight: 500; } .cmf-panels { border: 1px solid var(--rule-light); border-top: none; } .cmf-panel { display: none; opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; } .cmf-panel.active { display: block; opacity: 1; transform: translateY(0); animation: cmf-fade-in 0.2s ease forwards; } @keyframes cmf-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .cmf-panel-inner { display: flex; gap: 0; } .cmf-panel-swatch { width: 200px; flex-shrink: 0; aspect-ratio: 1 / 1; min-height: unset; transition: background 0.3s ease; } .cmf-panel-swatch--abs { background: linear-gradient(160deg, #d8d8d8 0%, #b8b8b8 60%, #a8a8a8 100%); } .cmf-panel-swatch--steel { background: repeating-linear-gradient(90deg, #b4b6b8 0px, #d8dadc 3px, #b4b6b8 6px); } .cmf-panel-swatch--cable { background: repeating-linear-gradient(45deg, #4a4a4a 0px, #4a4a4a 5px, #767676 5px, #767676 10px); } .cmf-panel-body { padding: calc(var(--u) * 3) calc(var(--u) * 3.5); display: flex; flex-direction: column; gap: calc(var(--u) * 0.75); justify-content: center; border-left: 1px solid var(--rule-light); } .cmf-hex { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 300; color: var(--blue); letter-spacing: 0.04em; margin-bottom: calc(var(--u) * 0.5); } /* ===================================================== MARKET STATS ===================================================== */ .mkt-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px dashed var(--rule); margin-bottom: 0; } .mkt-stat { padding: calc(var(--u) * 2.5) calc(var(--u) * 2.5) calc(var(--u) * 2.5) 0; border-right: 1px dashed var(--rule); display: flex; flex-direction: column; gap: 5px; } .mkt-stat:last-child { border-right: none; padding-right: 0; } .mkt-stat-num { font-family: var(--font-serif); font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 300; letter-spacing: -0.025em; color: var(--blue); line-height: 1; } .mkt-stat-desc { font-family: var(--font-mono); font-size: 0.63rem; line-height: 1.55; color: var(--ink-muted); } .mkt-card { display: flex; flex-direction: column; border: 1px solid var(--rule-light); overflow: hidden; transition: border-color 0.2s ease; } .mkt-card:hover { border-color: var(--blue); } .mkt-card-img { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface); } .mkt-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .mkt-card:hover .mkt-card-img img { transform: scale(1.03); } .mkt-card-body { padding: calc(var(--u) * 1.75) calc(var(--u) * 2); display: flex; flex-direction: column; gap: 5px; border-top: 1px dashed var(--rule); background: var(--white); } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; } .mkt-takeaways { display: flex; flex-direction: column; gap: 0.75rem; } .mkt-takeaway { display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; align-items: baseline; padding-top: 0.75rem; border-top: 1px dashed var(--rule); } .mkt-takeaway-num { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em; color: var(--blue); padding-top: 0.15em; } .mkt-takeaway p { font-size: 0.875rem; line-height: 1.65; margin: 0; } /* ===================================================== INTERVIEWS ===================================================== */ .interviews { margin-bottom: calc(var(--u) * 5); } .interviews-label { margin-bottom: calc(var(--u) * 2); } .interviews-intro { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3); align-items: baseline; margin-bottom: calc(var(--u) * 4.5); } .interviews-heading { font-family: var(--font-serif); font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); } .interviews-sub { font-size: 0.875rem; line-height: 1.7; color: var(--ink-muted); font-weight: 300; } .interviews-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px dashed var(--rule); margin-bottom: calc(var(--u) * 4.5); } .interviews-stat { padding: calc(var(--u) * 2.5) calc(var(--u) * 2.5) calc(var(--u) * 2.5) 0; border-right: 1px dashed var(--rule); display: flex; flex-direction: column; gap: 5px; } .interviews-stat:first-child { padding-left: 0; } .interviews-stat:last-child { border-right: none; padding-right: 0; } .interviews-stat-num { font-family: var(--font-serif); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 300; letter-spacing: -0.03em; color: var(--blue); line-height: 1; } .interviews-stat-desc { font-family: var(--font-mono); font-size: 0.63rem; line-height: 1.5; color: var(--ink-muted); } .interviews-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-bottom: calc(var(--u) * 4.5); } .interview-quote { background: var(--surface); padding: calc(var(--u) * 3) calc(var(--u) * 2.5); margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--u) * 2.5); border-top: 1px dashed var(--rule); position: relative; } /* Blue dot at top of each quote card */ .interview-quote::before { content: ''; position: absolute; top: -1px; left: 0; width: 24px; height: 2px; background: var(--blue); } .interview-quote-text { font-family: var(--font-serif); font-size: clamp(0.9rem, 1.1vw, 1rem); font-weight: 300; font-style: italic; line-height: 1.7; color: var(--ink); } .interview-quote-attr { display: flex; flex-direction: column; gap: 3px; padding-top: calc(var(--u) * 1.5); border-top: 1px dotted var(--rule); } .interview-quote-name { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); } .interview-quote-role { font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-muted); font-weight: 300; } .interviews-findings { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); } .interviews-findings-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .interviews-finding { display: flex; flex-direction: column; gap: calc(var(--u) * 1); padding: calc(var(--u) * 2.5); background: var(--surface); border-top: 1px dashed var(--rule); } .interviews-finding-num { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.15em; color: var(--blue); } .interviews-finding-text { font-size: 0.84rem; line-height: 1.68; color: var(--ink-soft); } /* ===================================================== PERSONA ===================================================== */ .persona { margin-bottom: calc(var(--u) * 5); } .persona-label { margin-bottom: calc(var(--u) * 2); } .persona-card { display: grid; grid-template-columns: 260px 1fr; border: 1px solid var(--rule-light); border-top: 1px solid var(--ink); } .persona-profile { border-right: 1px solid var(--rule-light); display: flex; flex-direction: column; background: var(--surface); } .persona-avatar { width: 100%; aspect-ratio: 1 / 1; background: var(--blue-tint); overflow: hidden; position: relative; border-bottom: 1px dashed var(--rule); } .persona-avatar-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 3rem; font-weight: 300; color: var(--blue); letter-spacing: -0.02em; } .persona-identity { padding: calc(var(--u) * 2) calc(var(--u) * 2.5); border-bottom: 1px dashed var(--rule); display: flex; flex-direction: column; gap: 3px; } .persona-name { font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; } .persona-role { font-family: var(--font-mono); font-size: 0.63rem; color: var(--ink-muted); font-weight: 300; letter-spacing: 0.04em; } .persona-demos { padding: calc(var(--u) * 2) calc(var(--u) * 2.5); display: flex; flex-direction: column; gap: calc(var(--u) * 0.75); } .persona-demo-row { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: calc(var(--u) * 0.5); border-bottom: 1px dotted var(--rule); } .persona-demo-row:last-child { border-bottom: none; } .persona-demo-key { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); } .persona-demo-val { font-family: var(--font-body); font-size: 0.82rem; color: var(--ink); font-weight: 400; } .persona-insights { display: grid; grid-template-rows: auto 1fr auto; background: var(--white); } .persona-quote { padding: calc(var(--u) * 3); border-bottom: 1px dashed var(--rule); display: flex; align-items: center; } .persona-quote-text { font-family: var(--font-serif); font-size: clamp(0.95rem, 1.3vw, 1.15rem); font-weight: 300; font-style: italic; line-height: 1.6; color: var(--ink); } .persona-gf { display: grid; grid-template-columns: 1fr 1fr; } .persona-goals, .persona-frustrations { padding: calc(var(--u) * 2.5) calc(var(--u) * 3); display: flex; flex-direction: column; gap: calc(var(--u) * 1.25); } .persona-frustrations { border-left: 1px dashed var(--rule); } .persona-gf-label { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); } .persona-gf-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.75); } .persona-gf-list li { font-size: 0.84rem; line-height: 1.55; color: var(--ink-soft); font-weight: 300; padding-left: 1rem; position: relative; } .persona-gf-list li::before { content: ''; position: absolute; left: 0; top: 0.52em; width: 4px; height: 4px; border-radius: 50%; background: var(--rule); } .persona-goals .persona-gf-list li::before { background: var(--blue); } .persona-behaviors { padding: calc(var(--u) * 2.5) calc(var(--u) * 3); border-top: 1px dashed var(--rule); display: flex; flex-direction: column; gap: calc(var(--u) * 1.25); } .persona-behaviors-label { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); } .persona-behavior-bars { display: flex; flex-direction: column; gap: calc(var(--u) * 1); } .persona-bar-row { display: grid; grid-template-columns: 110px 1fr 110px; align-items: center; gap: calc(var(--u) * 1); font-family: var(--font-mono); font-size: 0.63rem; color: var(--ink-muted); } .persona-bar-track { height: 2px; background: var(--rule-light); position: relative; overflow: visible; } .persona-bar-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .persona-bar-fill.revealed { transform: scaleX(1); } .persona-bar-right { text-align: right; } /* ===================================================== PROPOINT VARIANTS ===================================================== */ .pp-stat-list { display: flex; flex-direction: column; border-top: 1px dashed var(--rule); } .pp-stat-row { display: grid; grid-template-columns: 80px 1fr; gap: 1rem; align-items: baseline; padding: calc(var(--u) * 1.25) 0; border-bottom: 1px dotted var(--rule); } .pp-stat-num { font-family: var(--font-serif); font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 300; letter-spacing: -0.02em; color: var(--blue); line-height: 1; } .pp-stat-desc { font-family: var(--font-mono); font-size: 0.65rem; line-height: 1.5; color: var(--ink-muted); } .pp-findings { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px dashed var(--rule); gap: 0; } .pp-finding { padding: calc(var(--u) * 2.5) calc(var(--u) * 2.5) calc(var(--u) * 2.5) calc(var(--u) * 2.5); border-right: 1px dashed var(--rule); display: flex; flex-direction: column; gap: calc(var(--u) * 1.25); } .pp-finding:first-child { padding-left: 0; } .pp-finding:last-child { border-right: none; padding-right: 0; } .pp-finding-num { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.15em; color: var(--blue); } .pp-finding-body { flex: 1; } .pp-finding-img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); } .pp-finding-img img { width: 100%; height: 100%; object-fit: cover; } .pp-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: calc(var(--u) * 4); } .pp-quote { background: var(--surface); padding: calc(var(--u) * 3) calc(var(--u) * 2.5); display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--u) * 2); border-top: 1px dashed var(--rule); position: relative; } .pp-quote::before { content: ''; position: absolute; top: -1px; left: 0; width: 24px; height: 2px; background: var(--blue); } .pp-interview-findings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px dashed var(--rule); } .pp-interview-finding { display: grid; grid-template-columns: 2rem 1fr; gap: calc(var(--u) * 1); align-items: baseline; padding: calc(var(--u) * 2) calc(var(--u) * 2.5) calc(var(--u) * 2) 0; border-bottom: 1px dashed var(--rule); border-right: 1px dashed var(--rule); } .pp-interview-finding:nth-child(even) { border-right: none; padding-left: calc(var(--u) * 2.5); padding-right: 0; } .pp-interview-finding:nth-child(3), .pp-interview-finding:nth-child(4) { border-bottom: none; } /* PP Persona */ .pp-persona { border: 1px solid var(--rule-light); border-top: 1px solid var(--ink); } .pp-persona-header { display: grid; grid-template-columns: 64px minmax(160px, auto) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); border-bottom: 1px dashed var(--rule); align-items: stretch; overflow: hidden; } .pp-persona-avatar { width: 64px; min-height: 64px; height: 100%; background: var(--blue-tint); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 0.95rem; font-weight: 300; color: var(--blue); border-right: 1px dashed var(--rule); overflow: hidden; flex-shrink: 0; position: relative; } .pp-persona-avatar .persona-avatar-initials { position: relative; inset: unset; font-size: 0.95rem; font-weight: 300; letter-spacing: -0.02em; } .pp-persona-identity { padding: calc(var(--u) * 1.5); display: flex; flex-direction: column; justify-content: center; gap: 2px; border-right: 1px dashed var(--rule); white-space: normal; min-width: 0; } .pp-persona-demos { padding: calc(var(--u) * 1.5); display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 0.5); border-right: 1px dashed var(--rule); } .pp-persona-quote-inline { padding: calc(var(--u) * 1.5) calc(var(--u) * 2); display: flex; align-items: center; } .pp-persona-quote-inline .persona-quote-text { font-size: 0.88rem; font-weight: 300; line-height: 1.5; color: var(--ink-muted); margin: 0; } .pp-persona-insights { display: grid; grid-template-columns: repeat(3, 1fr); } .pp-persona-col { padding: calc(var(--u) * 2); border-right: 1px dashed var(--rule); } .pp-persona-col:last-child { border-right: none; } .pp-persona-col .persona-bar-row { grid-template-columns: 72px 1fr 72px; font-size: 0.63rem; } /* 3D prototype stacks — same base as cardboard-stack */ .threed-stack { grid-column: span 3; } /* At desktop: use order to push 3D text (order 5) after cardboard images (1-4), so visually: cardboard stacks | cardboard text | 3D text | 3D stacks */ .cardboard-stack { order: 1; } .cardboard-text { order: 2; } .cardboard-text2 { order: 3; } .threed-stack { order: 4; } /* Full-bleed sketch image — spans full width, natural height, never cropped */ .sketch-full { width: 100%; aspect-ratio: unset; height: auto; overflow: visible; align-self: start; } .sketch-full img { width: 100%; height: auto; display: block; object-fit: contain; } /* Walkthrough images: always square, never cropped, object-fit contain */ .walkthrough-img { aspect-ratio: 1 / 1 !important; overflow: visible; align-self: start; } .walkthrough-img img { width: 100%; height: 100%; object-fit: contain; background: var(--surface); } /* ===================================================== TABLET (768–1023px) ===================================================== */ @media (max-width: 1023px) { main { padding: 0 32px 4rem; } .hero-title { padding: 2rem 32px 2rem; } .grid { gap: 2px; } .col-3 { grid-column: span 6; } .form-row { grid-template-columns: repeat(4, 1fr); } .form-row .form-text { grid-column: span 1; } .form-row .form-img { grid-column: span 1; } .col-9 { grid-column: span 12; } .wide { min-height: 200px; } .hmw-banner { margin: 0 -32px; padding: 4.5rem 48px; } .hmw-banner::before { left: 48px; } .hmw-banner::after { right: 48px; } .cmf-panel-swatch { width: 150px; min-height: 170px; } .interviews-intro { grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: calc(var(--u) * 3); } .interviews-stats { grid-template-columns: repeat(2, 1fr); } .interviews-stat:nth-child(2) { border-right: none; padding-left: calc(var(--u) * 2); } .interviews-stat:nth-child(3) { border-right: 1px dashed var(--rule); border-top: 1px dashed var(--rule); padding-left: 0; padding-top: calc(var(--u) * 2); } .interviews-stat:nth-child(4) { border-top: 1px dashed var(--rule); border-right: none; padding-top: calc(var(--u) * 2); padding-left: calc(var(--u) * 2); } .interviews-quotes { grid-template-columns: 1fr; } .interviews-findings-grid { grid-template-columns: repeat(2, 1fr); } .mkt-stats { grid-template-columns: repeat(2, 1fr); } .mkt-stat:nth-child(2) { border-right: none; } .mkt-stat:nth-child(3) { border-right: 1px dashed var(--rule); border-top: 1px dashed var(--rule); padding-left: 0; padding-top: calc(var(--u) * 2); } .mkt-stat:nth-child(4) { border-top: 1px dashed var(--rule); border-right: none; padding-top: calc(var(--u) * 2); } .docking-row { grid-template-rows: auto; } .docking-text { grid-column: 1 / span 6; grid-row: 1; } .docking-tall { grid-column: 1 / span 6; grid-row: 2; } .docking-steam { grid-row: 1 / span 2; grid-column: 7 / span 6; align-self: stretch; aspect-ratio: unset; min-height: 280px; margin-top: 0; } .col-4 { grid-column: span 6; } .col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; } .persona-card { grid-template-columns: 200px 1fr; } .persona-goals, .persona-frustrations { padding: calc(var(--u) * 2); } .persona-quote { padding: calc(var(--u) * 2); } .persona-behaviors { padding: calc(var(--u) * 2); } .persona-bar-row { grid-template-columns: 85px 1fr 85px; } .pp-persona-header { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; overflow: hidden; } .pp-persona-avatar { grid-row: 1; grid-column: 1; width: 56px; min-height: 56px; overflow: hidden; font-size: 0.85rem; } .pp-persona-avatar .persona-avatar-initials { font-size: 0.85rem; } .pp-persona-identity { grid-row: 1; grid-column: 2 / span 2; border-right: none; border-bottom: 1px dashed var(--rule); white-space: normal; min-width: 0; } .pp-persona-header > .pp-persona-demos:nth-child(3) { grid-row: 2; grid-column: 1 / span 2; border-right: 1px dashed var(--rule); border-top: 1px dashed var(--rule); } .pp-persona-header > .pp-persona-demos:nth-child(4) { grid-row: 2; grid-column: 3; border-right: none; border-top: 1px dashed var(--rule); } .pp-persona-quote-inline { grid-row: 3; grid-column: 1 / span 3; border-top: 1px dashed var(--rule); } .pp-findings { grid-template-columns: repeat(3, 1fr); } .pp-finding-img { aspect-ratio: 16 / 9; } .pp-quotes { grid-template-columns: 1fr; } .pp-interview-findings { grid-template-columns: 1fr; } .pp-interview-finding { border-right: none; padding-left: 0; padding-right: 0; border-bottom: 1px dashed var(--rule); } .pp-interview-finding:nth-child(even) { padding-left: 0; border-right: none; } .pp-interview-finding:nth-child(3), .pp-interview-finding:nth-child(4) { border-bottom: 1px dashed var(--rule); } .pp-interview-finding:last-child { border-bottom: none; } .pp-persona-insights { grid-template-columns: 1fr; } .pp-persona-col { border-right: none; border-top: 1px dashed var(--rule); } .pp-persona-col:first-child { border-top: none; } .pp-persona-col .persona-bar-row { grid-template-columns: 85px 1fr 85px; font-size: 0.65rem; } .walkthrough-text { grid-column: span 12; order: -1; } .walkthrough-img { grid-column: span 4 !important; } .cardboard-text { order: 1; grid-column: span 12; } .cardboard-stack { order: 2; grid-column: span 6; } .cardboard-text2 { order: 3; grid-column: span 12; } .threed-stack { order: 4; grid-column: span 6; } .text.col-9 { grid-column: span 12; } .pp-overview-row1 { grid-template-columns: 3fr 6fr 3fr !important; } .pp-ov1-text { grid-column: 1 !important; } .pp-ov1-img { grid-column: 2 !important; } .pp-ov1-tall { grid-column: 3 !important; } .pp-overview-row2 { grid-template-columns: 3fr 6fr 3fr !important; } .pp-ov2-stack { grid-column: 1 !important; } .pp-ov2-img { grid-column: 2 !important; } .pp-ov2-text { grid-column: 3 !important; } .pp-pkg-row1 { grid-template-columns: 3fr 6fr 3fr !important; } .pp-pkg-stack { grid-column: 1 !important; } .pp-pkg-img { grid-column: 2 !important; } .pp-pkg-text { grid-column: 3 !important; } .cmf-panel-swatch { width: 200px; aspect-ratio: 1 / 1; min-height: unset; } } /* ===================================================== MOBILE (<768px) ===================================================== */ @media (max-width: 767px) { main { padding: 0 16px 3rem; } section { margin-bottom: calc(var(--u) * 3); } .hero img { aspect-ratio: 4 / 3; } .hero-title { padding: 1.25rem 16px 1.5rem; font-size: clamp(1.8rem, 7vw, 2.5rem); } .grid { grid-template-columns: repeat(2, 1fr); gap: 2px; } .col-6, .col-9, .col-12 { grid-column: span 2; } .col-3 { grid-column: span 1; } .col-3.text { grid-column: span 2; } .img.col-3 { grid-column: span 1; } .img.col-6 { grid-column: span 1; } .img.col-6.sq { aspect-ratio: 4 / 3; } .text.col-6 { grid-column: span 2; } .text.col-9 { grid-column: span 2; } .pp-findings { grid-template-columns: 1fr; } .pp-finding { border-right: none; padding-left: 0; padding-right: 0; border-bottom: 1px dashed var(--rule); } .pp-finding:last-child { border-bottom: none; } .pp-finding-img { aspect-ratio: 16 / 9; } .form-row { grid-template-columns: repeat(3, 1fr); } .form-row .form-text { grid-column: span 3; } .form-row .form-img { grid-column: span 1; } .sq { aspect-ratio: 4 / 3; align-self: start; min-height: unset; } .wide { aspect-ratio: 16 / 9; align-self: start; min-height: unset; } .tall { min-height: unset; align-self: stretch; height: auto; } .tall.img, .tall > .img { aspect-ratio: unset; height: auto; min-height: unset; } .col-stack > .img { aspect-ratio: 4 / 3; min-height: unset; } .grid--stretch-sq .sq { aspect-ratio: 4 / 3; align-self: start; min-height: unset; } .text { padding: calc(var(--u) * 2); } h2 { font-size: 0.65rem; } p { font-size: 0.84rem; } hr { margin: calc(var(--u) * 3) 0; } .hmw-banner { margin: 0 -16px; padding: 3.5rem 28px; } .hmw-banner::before { left: 28px; top: 8px; } .hmw-banner::after { right: 28px; bottom: 8px; } .hmw { grid-column: span 2 !important; } .p-hero { font-size: clamp(1.1rem, 5vw, 1.4rem); } .cmf-tabs { flex-wrap: wrap; } .cmf-tab { flex: 1 1 calc(50% - 1px); padding: 0.65rem 0.75rem; } .cmf-tab:nth-child(5) { flex: 1 1 100%; } .cmf-panel-inner { flex-direction: row !important; align-items: stretch; } .cmf-panel-swatch { width: 40% !important; flex-shrink: 0; aspect-ratio: 1 / 1 !important; min-height: unset !important; } .cmf-panel-body { flex: 1; padding: calc(var(--u) * 2); border-left: 1px solid var(--rule-light); } .interviews-stats { grid-template-columns: repeat(2, 1fr); } .interviews-stat { padding: calc(var(--u) * 1.75) calc(var(--u) * 1.5); } .interviews-stat:first-child { padding-left: 0; } .interviews-stat:nth-child(2) { border-right: none; padding-right: 0; } .interviews-stat:nth-child(3) { border-right: 1px dashed var(--rule); border-top: 1px dashed var(--rule); padding-left: 0; padding-top: calc(var(--u) * 1.75); } .interviews-stat:nth-child(4) { border-top: 1px dashed var(--rule); border-right: none; padding-right: 0; padding-top: calc(var(--u) * 1.75); } .interviews-stat-num { font-size: clamp(1.5rem, 6vw, 2rem); } .interviews-intro { grid-template-columns: 1fr; gap: 0.5rem; margin-bottom: calc(var(--u) * 2.5); } .interviews-heading { font-size: clamp(1.3rem, 5.5vw, 1.7rem); } .interviews-quotes { grid-template-columns: 1fr; } .interview-quote { padding: calc(var(--u) * 2); } .interviews-findings-grid { grid-template-columns: 1fr 1fr; gap: 2px; } .interviews-finding { padding: calc(var(--u) * 1.75); } .mkt-stats { grid-template-columns: repeat(2, 1fr); } .mkt-stat { padding: calc(var(--u) * 1.5) calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0; } .mkt-stat:first-child { padding-left: 0; } .mkt-stat:nth-child(2) { border-right: none; padding-right: 0; } .mkt-stat:nth-child(3) { border-right: 1px dashed var(--rule); border-top: 1px dashed var(--rule); padding-left: 0; padding-top: calc(var(--u) * 1.5); } .mkt-stat:nth-child(4) { border-top: 1px dashed var(--rule); border-right: none; padding-top: calc(var(--u) * 1.5); } .mkt-stat-num { font-size: clamp(1.4rem, 5.5vw, 1.8rem); } .col-4 { grid-column: span 2; } .col-5 { grid-column: span 2; } .col-7 { grid-column: span 2; } .img.col-5, .img.col-7 { grid-column: span 1; } .mkt-card-body { padding: calc(var(--u) * 1.5); } .mkt-card-img { aspect-ratio: 16 / 9; } .walkthrough-text { grid-column: span 2; order: -1; } .walkthrough-img { grid-column: span 1; } .pp-overview-row1 { grid-template-columns: repeat(2, 1fr) !important; } .pp-ov1-text { grid-column: 1 / span 2 !important; grid-row: 1 !important; } .pp-ov1-img { grid-column: 1 !important; grid-row: 2 !important; aspect-ratio: 4 / 3; } .pp-ov1-tall { grid-column: 2 !important; grid-row: 2 !important; aspect-ratio: unset !important; align-self: stretch !important; } .pp-overview-row2 { grid-template-columns: repeat(2, 1fr) !important; } .pp-ov2-text { grid-column: 1 / span 2 !important; grid-row: 1 !important; order: -1; } .pp-ov2-stack { grid-column: 1 !important; grid-row: 2 !important; } .pp-ov2-img { grid-column: 2 !important; grid-row: 2 !important; aspect-ratio: 4 / 3; } .pp-pkg-row1 { grid-template-columns: repeat(2, 1fr) !important; } .pp-pkg-text { grid-column: 1 / span 2 !important; grid-row: 1 !important; order: -1; } .pp-pkg-stack { grid-column: 1 !important; grid-row: 2 !important; } .pp-pkg-img { grid-column: 2 !important; grid-row: 2 !important; aspect-ratio: 4 / 3; } .cardboard-text { order: 1; grid-column: span 2; } .cardboard-stack { order: 2; grid-column: span 1; } .cardboard-text2 { order: 3; grid-column: span 2; } .threed-stack { order: 4; grid-column: span 1; } .cardboard-stack .img { aspect-ratio: 4 / 3; min-height: unset; height: auto; overflow: visible; } .threed-stack .img { aspect-ratio: 4 / 3; min-height: unset; height: auto; overflow: visible; } .docking-row { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: auto !important; gap: 2px !important; } .docking-text { grid-column: 1 / span 2 !important; grid-row: 1 !important; } .docking-tall { grid-column: 1 !important; grid-row: 2 !important; aspect-ratio: unset !important; min-height: 240px; align-self: stretch !important; height: 100%; } .docking-tall img { height: 100%; object-fit: cover; } .docking-steam { grid-column: 2 !important; grid-row: 2 !important; aspect-ratio: 1 / 1 !important; min-height: unset !important; align-self: end !important; margin-top: 0; } .persona-card { grid-template-columns: 1fr; } .persona-profile { border-right: none; border-bottom: 1px dashed var(--rule); display: grid; grid-template-columns: 88px 1fr; } .persona-avatar { width: 88px; aspect-ratio: 1 / 1; } .persona-avatar-initials { font-size: 2rem; } .persona-identity { border-top: none; border-left: 1px dashed var(--rule); justify-content: center; padding: calc(var(--u) * 1.5); } .persona-demos { grid-column: span 2; padding: calc(var(--u) * 1.5); } .persona-quote { padding: calc(var(--u) * 2); } .persona-quote-text { font-size: 0.9rem; } .persona-gf { grid-template-columns: 1fr; } .persona-goals, .persona-frustrations { padding: calc(var(--u) * 1.75); } .persona-frustrations { border-left: none; border-top: 1px dashed var(--rule); } .persona-gf-list li { font-size: 0.8rem; } .persona-behaviors { padding: calc(var(--u) * 1.75); } .persona-bar-row { grid-template-columns: 65px 1fr 65px; font-size: 0.6rem; gap: 0.4rem; } .pp-stat-row { grid-template-columns: 65px 1fr; } .pp-persona-header { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto auto auto; overflow: hidden; } .pp-persona-avatar { grid-row: 1; grid-column: 1; width: 48px; min-height: 48px; font-size: 0.8rem; overflow: hidden; } .pp-persona-avatar .persona-avatar-initials { font-size: 0.8rem; } .pp-persona-identity { grid-row: 1; grid-column: 2; border-bottom: 1px dashed var(--rule); border-right: none; min-width: 0; } .pp-persona-header > .pp-persona-demos:nth-child(3) { grid-row: 2; grid-column: 1 / span 2; border-right: none; border-top: 1px dashed var(--rule); } .pp-persona-header > .pp-persona-demos:nth-child(4) { grid-row: 3; grid-column: 1 / span 2; border-right: none; border-top: 1px dashed var(--rule); } .pp-persona-quote-inline { grid-row: 4; grid-column: 1 / span 2; border-top: 1px dashed var(--rule); } .pp-persona-col .persona-bar-row { grid-template-columns: 65px 1fr 65px; font-size: 0.6rem; } }