/* industry-luxury.css — Fashion & Luxury vertical page */ /* ═══════════════════════════════════════════════════════ FONT-WEIGHT FIX Instrument Serif only ships weight 400. Any element using var(--f-serif) without an explicit font-weight risks browser-synthesized bold. Lock it down. ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ SECTION SHARED ═══════════════════════════════════════════════════════ */ .section-tag { font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 12px; } .section-tag--light { color: var(--amber); } .section-header { margin-bottom: 56px; } .section-header h2 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink-900); margin-bottom: 8px; } .section-header p { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink-600); max-width: 480px; } /* ═══════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════ */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-sans); font-size: 13.5px; font-weight: 500; padding: 10px 20px; border-radius: var(--r-md); background: var(--ink-900); color: var(--white); border: none; cursor: pointer; transition: background .2s, transform .1s; text-decoration: none; min-height: 44px;--amber:#f59e0b;} .btn-primary:hover { background: var(--ink-800); } .btn-primary:active { transform: scale(.98); } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-sans); font-size: 13.5px; font-weight: 500; padding: 10px 20px; border-radius: var(--r-md); background: transparent; color: var(--ink-900); border: 1px solid var(--ink-900); cursor: pointer; transition: background .2s, transform .1s; text-decoration: none; min-height: 44px; } .btn-secondary:hover { background: var(--warm-50); } /* Hero section — see hero.css (linked in before this stylesheet) */ /* ═══════════════════════════════════════════════════════ 2. SIGNAL BAND Moved to shared component: signal-band.css ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ 3. CONTEXT ═══════════════════════════════════════════════════════ */ .fash-context { background: var(--white); padding: 104px 0; } .fash-context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .fash-context-text .section-tag { margin-bottom: 12px; } .fash-context-text h2 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink-900); margin-bottom: 20px; } .fash-context-text p { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink-600); margin-bottom: 16px; } .fash-context-text p:last-child { margin-bottom: 0; } .fash-context-points { display: flex; flex-direction: column; gap: 0; } .fash-context-point { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--warm-200); } .fash-context-point:last-child { border-bottom: none; } .fash-context-point-num { font-family: var(--f-mono); font-size: 10px; font-weight: 500; color: var(--amber); flex-shrink: 0; padding-top: 2px; } .fash-context-point-body strong { font-size: 14px; font-weight: 500; color: var(--ink-900); display: block; margin-bottom: 4px; } .fash-context-point-body p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--ink-600); } /* ═══════════════════════════════════════════════════════ 4. OUTCOMES (was: Testimony) Changed from navy to warm-100 per section-rhythm policy. De-navied: now a warm-100 capability callout, not a quoted testimonial. Text tokens ink-900 / ink-600 instead of white. ═══════════════════════════════════════════════════════ */ .fash-outcomes { background: var(--warm-100); padding: 80px 0; } .fash-outcomes-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: start; } .fash-outcomes-divider { width: 1px; background: var(--warm-200); align-self: stretch; margin: 0 40px; } .fash-outcomes-tag { font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 14px; } .fash-outcomes-item h3 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; color: var(--ink-900); margin-bottom: 14px; } .fash-outcomes-item p { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--ink-600); } /* ═══════════════════════════════════════════════════════ 5. MATERIAL DEMOS ═══════════════════════════════════════════════════════ */ .fash-material { background: var(--white); padding: 104px 0; } .fash-material-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .fash-sample-card { background: var(--off-white); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--warm-200); } .fash-sample-card-visual { aspect-ratio: 520 / 360; overflow: hidden; position: relative; } .fash-sample-mood { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: flex-start; position: relative; background-color: var(--warm-100); /* fallback while the render loads */ background-size: cover; background-position: center; background-repeat: no-repeat; } /* bottom scrim so the finish label stays legible over the render */ .fash-sample-mood::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,20,16,.55), transparent 42%); pointer-events: none; } .fash-sample-mood-inner { position: relative; z-index: 1; padding: 20px; display: flex; flex-direction: column; gap: 2px; } .fash-sample-mood-label { font-family: var(--f-serif); font-weight: 400; font-size: 24px; color: rgba(255,255,255,.95); line-height: 1.2; } .fash-sample-mood-product { font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); } .fash-sample-card-footer { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .fash-sample-card-tag { font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); } .fash-sample-picker { display: flex; gap: 6px; } .fash-sample-swatch { width: 28px; height: 28px; min-width: 28px; min-height: 28px; border-radius: 50%; border: none; cursor: pointer; padding: 0; background-clip: border-box; /* colour fills the whole circle, no inset gap */ transition: box-shadow .2s, transform .15s; } .fash-sample-swatch.active { box-shadow: 0 0 0 2px var(--ink-900); /* ring sits outside, doesn't shrink the fill */ transform: scale(1.1); } .fash-sample-swatch:hover:not(.active) { transform: scale(1.05); } .fash-sample-swatch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════ 6. EMBROIDERY DEMO Warm-100 background per revised rhythm. Iframe sits in a framed panel (white fill, border, subtle shadow) so the demo reads as a contained product showcase against the warm surround. ═══════════════════════════════════════════════════════ */ .fash-emb-section { background: var(--warm-100); padding: 80px 0; } .fash-emb-section-header { margin-bottom: 40px; } .fash-emb-section-header h2 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; color: var(--ink-900); margin-bottom: 8px; } .fash-emb-section-header p { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink-600); max-width: 480px; } .fash-embroidery { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--warm-200); background: var(--white); box-shadow: var(--shadow-sm); } .fash-embroidery iframe { width: 100%; height: 420px; border: none; display: block; } /* ═══════════════════════════════════════════════════════ 7. MATERIAL EXPLANATION ═══════════════════════════════════════════════════════ */ .fash-material-explain { background: var(--warm-100); padding: 104px 0; } .fash-material-body { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .fash-material-body-text h3 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; color: var(--ink-900); margin-bottom: 16px; } .fash-material-body-text p { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink-600); } .fash-material-body-callout { background: var(--warm-50); border-radius: var(--r-md); padding: 24px; border: 1px solid var(--warm-200); } .fash-material-body-callout + .fash-material-body-callout { margin-top: 16px; } .fash-material-callout-label { font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 8px; } .fash-material-body-callout p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--ink-600); } /* ═══════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════ 8. PRODUCT EXPLORATION Warm-100 per adjacency rule (breaks white-on-white with §7). Cards stay on white/off-white fills for crispness; callout note shifts to white fill to contrast with warm-100 surround. ═══════════════════════════════════════════════════════ */ .fash-explore { background: var(--white); padding: 104px 0; } .fash-explore-header { margin-bottom: 56px; } .fash-explore-header .section-tag { margin-bottom: 12px; } .fash-explore-header h2 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink-900); margin-bottom: 8px; } .fash-explore-header p { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink-600); max-width: 480px; } .fash-explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .fash-explore-card { background: var(--off-white); border-radius: var(--r-lg); padding: 28px 24px; border: 1px solid var(--warm-200); transition: border-color .2s, box-shadow .2s; } .fash-explore-card:hover { border-color: var(--warm-300); box-shadow: var(--shadow-sm); } .fash-explore-card-icon { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--warm-200); display: flex; align-items: center; justify-content: center; color: var(--ink-500); margin-bottom: 20px; } .fash-explore-card-icon svg { width: 20px; height: 20px; } .fash-explore-product-tag { font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 6px; } .fash-explore-card h3 { font-family: var(--f-serif); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--ink-900); margin-bottom: 10px; } .fash-explore-card p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--ink-600); } .fash-explore-note { margin-top: 32px; background: var(--white); border-radius: var(--r-md); padding: 24px; border: 1px solid var(--warm-200); } .fash-explore-note-label { font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 8px; } .fash-explore-note p { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink-600); } .fash-explore-link { color: var(--blue); font-weight: 400; transition: color .15s; } .fash-explore-link:hover { color: var(--blue-mid); } /* ═══════════════════════════════════════════════════════ 9. CLIENTELING ═══════════════════════════════════════════════════════ */ .fash-clienteling { background: var(--navy); padding: 104px 0;--amber:#f59e0b;} .fash-clienteling-text { max-width: 820px; margin-bottom: 52px; } .fash-clienteling-text .section-tag--light { color: var(--amber); } .fash-clienteling-demo .section-tag { display: block; margin-bottom: 16px; } .fash-clienteling-text h2 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; color: var(--white); margin-bottom: 16px; } .fash-clienteling-text p { font-size: 14px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.7); margin-bottom: 16px; } .fash-clienteling-text p:last-child { margin-bottom: 0; } /* Mood image panels */ .fash-clienteling-visual { display: flex; flex-direction: column; gap: 16px; } .fash-mood-img { border-radius: var(--r-lg); overflow: hidden; position: relative; aspect-ratio: 560 / 240; } .fash-mood-img--boutique { background: linear-gradient(135deg, #1a1510 0%, #3d2e1f 50%, #1a1510 100%); } .fash-mood-img--clienteling { background: linear-gradient(135deg, #0c1f3d 0%, #163258 50%, #0c1f3d 100%);--amber:#f59e0b;} .fash-mood-img-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 20px; background: linear-gradient(transparent, rgba(0,0,0,.6)); display: flex; flex-direction: column; gap: 4px; } .fash-mood-img-tag { font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); } .fash-mood-img-desc { font-size: 12px; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,.75); } /* ═══════════════════════════════════════════════════════ 10. INTEGRATION ═══════════════════════════════════════════════════════ */ .fash-integration { background: var(--white); padding: 104px 0; } .fash-integration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .fash-integration-text .section-tag { margin-bottom: 12px; } .fash-integration-text h2 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink-900); margin-bottom: 16px; } .fash-integration-text p { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink-600); margin-bottom: 16px; } .fash-integration-text p:last-child { margin-bottom: 0; } /* Chain code panel */ .fash-chain-panel { background: var(--ink-900); border-radius: var(--r-lg); overflow: hidden;--amber:#f59e0b;} .fash-chain-panel-label { font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); padding: 16px 20px 0; } .fash-chain-code { padding: 16px 20px 20px; } .fash-chain-line { font-family: var(--f-mono); font-size: 12px; line-height: 1.8; color: rgba(255,255,255,.6); } .fash-chain-line.fc-indent { padding-left: 24px; } .fc-url { color: rgba(255,255,255,.4); } .fc-url em { color: rgba(255,255,255,.8); font-style: italic; } .fc-key { color: var(--amber); } .fc-val { color: rgba(255,255,255,.85); } .fc-comma { color: rgba(255,255,255,.3); } .fash-chain-output { background: var(--off-white); padding: 12px; display: flex; align-items: center; justify-content: center; } .fash-chain-output svg { width: 100%; max-width: 280px; height: auto; display: block; } /* ═══════════════════════════════════════════════════════ 11. DEPLOYMENT Warm-100 per revised rhythm. Note: this section directly precedes the navy closing CTA (§12), which is a documented exception to the golden rule "navy bounded by white". The exception is deliberate: a page-wide three-beat warm-100 rhythm (§4, §6, §11) reads better than forcing a structural white separator that would add no content value. ═══════════════════════════════════════════════════════ */ .fash-deploy { background: var(--warm-100); padding: 104px 0; } .fash-deploy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .fash-deploy-card { background: var(--white); border-radius: var(--r-lg); padding: 28px 24px; border: 1px solid var(--warm-200); transition: border-color .2s, box-shadow .2s; } .fash-deploy-card:hover { border-color: var(--warm-300); box-shadow: var(--shadow-sm); } .fash-deploy-tag { font-family: var(--f-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 10px; } .fash-deploy-card h3 { font-family: var(--f-serif); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--ink-900); margin-bottom: 10px; } .fash-deploy-card p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--ink-600); } .fash-deploy-note { margin-top: 24px; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--ink-500); max-width: 640px; } /* ═══════════════════════════════════════════════════════ 12. CTA Moved to shared component: closing-section.css ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ HIGH CONTRAST OVERRIDES ═══════════════════════════════════════════════════════ Removed (shared components handle their own HC): - .fash-rail* → see signal-band.css - .fash-cta-section* → see closing-section.css Not needed (warm-100 + ink tokens handle HC via root overrides): - .fash-outcomes → warm-100, text uses ink-* tokens - .fash-emb-section → warm-100, text uses ink-* tokens - .fash-deploy → warm-100, text uses ink-* tokens - .fash-material-explain → white, text uses ink-* tokens Retained: - .fash-clienteling → still navy, needs explicit HC overrides ═══════════════════════════════════════════════════════ */ body.hc .fash-clienteling { background: #00102a;--amber:#f59e0b;} body.hc .fash-clienteling-text h2 { color: #ffffff; } body.hc .fash-clienteling-text p { color: rgba(255,255,255,.85); } /* ═══════════════════════════════════════════════════════ RESPONSIVE — TABLET (max-width: 1024px) ═══════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .fash-context-grid { grid-template-columns: 1fr; gap: 40px; } .fash-outcomes-grid { grid-template-columns: 1fr; gap: 0; } .fash-outcomes-divider { width: 100%; height: 1px; margin: 32px 0; } .fash-material-cards { grid-template-columns: 1fr 1fr; } .fash-material-body { grid-template-columns: 1fr; gap: 32px; } .fash-explore-grid { grid-template-columns: 1fr 1fr; } .fash-clienteling-grid { grid-template-columns: 1fr; gap: 40px; } .fash-integration-grid { grid-template-columns: 1fr; gap: 40px; } .fash-deploy-grid { grid-template-columns: 1fr 1fr; } /* Tighter section padding */ .fash-context, .fash-material, .fash-material-explain, .fash-explore, .fash-clienteling, .fash-integration, .fash-deploy { padding: 80px 0; } } /* ═══════════════════════════════════════════════════════ RESPONSIVE — MOBILE (max-width: 768px) ═══════════════════════════════════════════════════════ */ @media (max-width: 768px) { .fash-context, .fash-material, .fash-material-explain, .fash-explore, .fash-clienteling, .fash-integration, .fash-deploy { padding: 64px 0; } .fash-context-grid { gap: 32px; } .fash-outcomes { padding: 64px 0; } .fash-material-cards { grid-template-columns: 1fr; } .fash-embroidery iframe { height: 420px; } .fash-explore-grid { grid-template-columns: 1fr; } .fash-explore-header { margin-bottom: 32px; } .fash-clienteling-grid { gap: 32px; } .fash-mood-img { aspect-ratio: 16 / 9; } .fash-integration-grid { gap: 32px; } .fash-deploy-grid { grid-template-columns: 1fr; } .section-header { margin-bottom: 32px; } } /* ═══════════════════════════════════════════════════════ RESPONSIVE — SMALL MOBILE (max-width: 480px) ═══════════════════════════════════════════════════════ */ @media (max-width: 480px) { .fash-context, .fash-material, .fash-material-explain, .fash-explore, .fash-clienteling, .fash-integration, .fash-deploy { padding: 52px 0; } .fash-outcomes { padding: 52px 0; } .fash-sample-card-footer { flex-direction: column; align-items: flex-start; gap: 10px; } .fash-sample-swatch { width: 24px; height: 24px; min-width: 24px; min-height: 24px; } .fash-emb-section { padding: 52px 0; } .fash-embroidery iframe { height: 360px; } .fash-explore-card { padding: 24px 20px; } .fash-chain-line { font-size: 11px; } .fash-deploy-card { padding: 24px 20px; } } /* ═══════════════════════════════════════════════════════ FOCUS & ACCESSIBILITY ═══════════════════════════════════════════════════════ */ a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════ REDUCED MOTION ═══════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .fash-sample-mood { transition: none; } .fash-sample-swatch { transition: none; } .fash-explore-card { transition: none; } .fash-deploy-card { transition: none; } }