.hb-corteiz-transition { --hb-ink: #111111; --hb-copy: #343434; --hb-muted: #77736d; --hb-line: #d8d5cf; --hb-soft: #f5f4f1; --hb-warm: #ece8df; --hb-white: #ffffff; --hb-shadow: rgba(17,17,17,.16); width: 100%; max-width: 1180px; margin: 0 auto; color: var(--hb-copy); background: var(--hb-white); font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height: 1.74; } .hb-corteiz-transition, .hb-corteiz-transition * { box-sizing: border-box; } .hb-corteiz-transition h2, .hb-corteiz-transition h3, .hb-corteiz-transition p, .hb-corteiz-transition ul, .hb-corteiz-transition ol, .hb-corteiz-transition figure { margin-top: 0; } .hb-corteiz-transition strong { color: var(--hb-ink); } .hb-corteiz-transition a { color: var(--hb-ink); font-weight: 700; text-decoration-color: #8d8982; text-decoration-thickness: 1px; text-underline-offset: 4px; } .hb-corteiz-transition a:hover { text-decoration-color: var(--hb-ink); } .hb-corteiz-transition .hb-keyword-link { font-weight: 800; text-decoration-thickness: 2px; text-decoration-color: var(--hb-ink); } .hb-corteiz-transition .hb-intro { max-width: 980px; padding: 16px 0 10px; } .hb-corteiz-transition .hb-kicker { margin-bottom: 16px; color: var(--hb-muted); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .hb-corteiz-transition .hb-lede { max-width: 940px; margin-bottom: 20px; color: #242424; font-size: 21px; line-height: 1.63; } .hb-corteiz-transition .hb-intro p:last-child { margin-bottom: 0; } /* TOC */ .hb-corteiz-transition .hb-toc { max-width: 980px; margin: 30px 0 46px; padding: 24px 26px 25px; border: 1px solid var(--hb-line); background: #f7f7f5; } .hb-corteiz-transition .hb-toc-title { margin-bottom: 16px; color: var(--hb-ink); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .hb-corteiz-transition .hb-toc-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; } .hb-corteiz-transition .hb-toc-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 13px; border: 1px solid #cbc8c2; background: #fff; color: var(--hb-ink); font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; transition: border-color .22s ease, background .22s ease, transform .22s ease; } .hb-corteiz-transition .hb-toc-link span { color: var(--hb-muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; } .hb-corteiz-transition .hb-toc-link:hover { border-color: var(--hb-ink); background: var(--hb-soft); transform: translateY(-1px); text-decoration: none; } .hb-corteiz-transition section[id] { scroll-margin-top: 28px; } /* Typography */ .hb-corteiz-transition .hb-body { max-width: 900px; margin: 0 auto; } .hb-corteiz-transition h2 { margin: 76px 0 22px; color: var(--hb-ink); font-size: clamp(29px,3.2vw,40px); line-height: 1.15; letter-spacing: -.03em; } .hb-corteiz-transition h3 { margin: 34px 0 12px; color: var(--hb-ink); font-size: 21px; line-height: 1.32; } .hb-corteiz-transition p { margin-bottom: 19px; } .hb-corteiz-transition ul, .hb-corteiz-transition ol { margin-bottom: 25px; padding-left: 25px; } .hb-corteiz-transition li { margin-bottom: 10px; } /* Day logic */ .hb-corteiz-transition .hb-day-read { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 33px 0; border-top: 2px solid var(--hb-ink); border-bottom: 1px solid var(--hb-line); } .hb-corteiz-transition .hb-day-read > div { padding: 22px 22px 23px 0; } .hb-corteiz-transition .hb-day-read > div + div { padding-left: 22px; border-left: 1px solid var(--hb-line); } .hb-corteiz-transition .hb-day-read b { display: block; margin-bottom: 7px; color: var(--hb-muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; } .hb-corteiz-transition .hb-day-read span { display: block; font-size: 14px; line-height: 1.55; } .hb-corteiz-transition .hb-note { margin: 29px 0; padding: 22px 26px; border-left: 4px solid var(--hb-ink); background: var(--hb-soft); } .hb-corteiz-transition .hb-note p { margin: 0; } /* Product / editorial features */ .hb-corteiz-transition .hb-feature { display: grid; grid-template-columns: minmax(310px,.93fr) minmax(0,1.07fr); gap: 40px; align-items: center; max-width: 1060px; margin: 45px auto 55px; padding: 35px 0; border-top: 1px solid var(--hb-ink); border-bottom: 1px solid var(--hb-ink); } .hb-corteiz-transition .hb-feature.hb-reverse .hb-feature-copy { order: -1; } .hb-corteiz-transition .hb-magnet { position: relative; margin: 0; transform: translate3d(0,0,0); transform-style: preserve-3d; transition: transform .36s cubic-bezier(.2,.72,.2,1), box-shadow .36s ease; will-change: transform; } .hb-corteiz-transition .hb-media { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1 / 1; min-height: 420px; border: 1px solid var(--hb-line); background: #eeedea; } .hb-corteiz-transition .hb-full-image { position: absolute; inset: 0; z-index: 2; display: block; text-decoration: none; } .hb-corteiz-transition .hb-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #eeedea; transition: opacity .43s ease, transform .55s cubic-bezier(.2,.72,.2,1); } .hb-corteiz-transition .hb-media img:nth-child(2) { opacity: 0; } .hb-corteiz-transition .hb-caption { margin: 14px 2px 0; color: var(--hb-muted); font-size: 13px; line-height: 1.52; } .hb-corteiz-transition .hb-feature-label { display: block; margin-bottom: 10px; color: var(--hb-muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .hb-corteiz-transition .hb-feature-copy h3 { margin-top: 0; font-size: 27px; line-height: 1.23; } .hb-corteiz-transition .hb-feature-copy p:last-of-type { margin-bottom: 22px; } .hb-corteiz-transition .hb-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 16px; border: 1px solid var(--hb-ink); background: var(--hb-ink); color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; } .hb-corteiz-transition .hb-button:hover { background: #fff; color: var(--hb-ink); } /* Shorts-to-cargos transition */ .hb-corteiz-transition .hb-transition { margin: 33px 0; border-top: 2px solid var(--hb-ink); } .hb-corteiz-transition .hb-transition-row { display: grid; grid-template-columns: 165px minmax(0,1fr); gap: 28px; padding: 21px 0; border-bottom: 1px solid var(--hb-line); } .hb-corteiz-transition .hb-transition-row strong { font-size: 15px; } .hb-corteiz-transition .hb-transition-row span { color: var(--hb-muted); font-size: 15px; line-height: 1.56; } /* Outfit progression */ .hb-corteiz-transition .hb-outfit-ladder { margin: 34px 0; border-top: 2px solid var(--hb-ink); } .hb-corteiz-transition .hb-outfit { display: grid; grid-template-columns: 58px minmax(210px,.75fr) minmax(0,1.25fr); gap: 20px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--hb-line); } .hb-corteiz-transition .hb-outfit-number { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--hb-ink); color: var(--hb-ink); font-size: 12px; font-weight: 800; } .hb-corteiz-transition .hb-outfit strong { font-size: 17px; line-height: 1.42; } .hb-corteiz-transition .hb-outfit p { margin: 0; color: var(--hb-muted); font-size: 15px; } /* Colour transition */ .hb-corteiz-transition .hb-colour-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 30px 0; } .hb-corteiz-transition .hb-colour-card { padding: 24px; border: 1px solid var(--hb-line); } .hb-corteiz-transition .hb-colour-card small { display: block; margin-bottom: 8px; color: var(--hb-muted); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .hb-corteiz-transition .hb-colour-card strong { display: block; margin-bottom: 8px; font-size: 18px; } .hb-corteiz-transition .hb-colour-card p { margin: 0; color: var(--hb-muted); font-size: 15px; } /* Mistakes */ .hb-corteiz-transition .hb-errors { margin: 31px 0; border-top: 1px solid var(--hb-ink); } .hb-corteiz-transition .hb-error { display: grid; grid-template-columns: minmax(220px,.75fr) minmax(0,1.25fr); gap: 28px; padding: 21px 0; border-bottom: 1px solid var(--hb-line); } .hb-corteiz-transition .hb-error strong { font-size: 15px; } .hb-corteiz-transition .hb-error p { margin: 0; color: var(--hb-muted); font-size: 15px; } /* Purchase logic */ .hb-corteiz-transition .hb-buy-box { margin: 32px 0; padding: 29px 31px; background: var(--hb-warm); } .hb-corteiz-transition .hb-buy-box h3 { margin-top: 0; } .hb-corteiz-transition .hb-gap-check { margin: 31px 0; border-top: 2px solid var(--hb-ink); border-bottom: 1px solid var(--hb-ink); } .hb-corteiz-transition .hb-gap-row { display: grid; grid-template-columns: minmax(220px,.76fr) minmax(0,1.24fr); gap: 28px; padding: 19px 0; border-bottom: 1px solid var(--hb-line); } .hb-corteiz-transition .hb-gap-row:last-child { border-bottom: 0; } .hb-corteiz-transition .hb-gap-row strong { font-size: 15px; } .hb-corteiz-transition .hb-gap-row span { color: var(--hb-muted); font-size: 15px; } /* Related reading */ .hb-corteiz-transition .hb-related { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 31px 0; border-top: 1px solid var(--hb-ink); border-bottom: 1px solid var(--hb-ink); } .hb-corteiz-transition .hb-related a { display: flex; flex-direction: column; min-height: 188px; padding: 23px; border-right: 1px solid var(--hb-line); text-decoration: none; } .hb-corteiz-transition .hb-related a:last-child { border-right: 0; } .hb-corteiz-transition .hb-related small { margin-bottom: 13px; color: var(--hb-muted); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .hb-corteiz-transition .hb-related strong { font-size: 17px; line-height: 1.38; } .hb-corteiz-transition .hb-related span { margin-top: auto; padding-top: 20px; color: var(--hb-muted); font-size: 13px; } /* FAQ */ .hb-corteiz-transition .hb-faq { margin: 28px 0; border-top: 1px solid var(--hb-ink); } .hb-corteiz-transition .hb-faq details { border-bottom: 1px solid var(--hb-line); } .hb-corteiz-transition .hb-faq summary { position: relative; padding: 21px 50px 21px 0; color: var(--hb-ink); font-weight: 800; line-height: 1.45; cursor: pointer; list-style: none; } .hb-corteiz-transition .hb-faq summary::-webkit-details-marker { display: none; } .hb-corteiz-transition .hb-faq summary::after { content: "+"; position: absolute; top: 14px; right: 2px; font-size: 28px; font-weight: 400; } .hb-corteiz-transition .hb-faq details[open] summary::after { content: "−"; } .hb-corteiz-transition .hb-faq details p { max-width: 820px; padding: 0 48px 20px 0; color: var(--hb-muted); } /* Final CTA */ .hb-corteiz-transition .hb-final { max-width: 1080px; margin: 78px auto 0; padding: 39px; border: 2px solid var(--hb-ink); } .hb-corteiz-transition .hb-final h2 { margin-top: 0; } .hb-corteiz-transition .hb-final-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 25px; } .hb-corteiz-transition .hb-primary, .hb-corteiz-transition .hb-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 18px; border: 1px solid var(--hb-ink); font-size: 13px; font-weight: 800; text-decoration: none; } .hb-corteiz-transition .hb-primary { background: var(--hb-ink); color: #fff; } .hb-corteiz-transition .hb-secondary { background: #fff; color: var(--hb-ink); } .hb-corteiz-transition .hb-primary:hover { background: #fff; color: var(--hb-ink); } .hb-corteiz-transition .hb-secondary:hover { background: var(--hb-soft); } /* Magnetic image hover */ @media (hover:hover) { .hb-corteiz-transition .hb-magnet:hover { z-index: 4; box-shadow: 0 28px 58px var(--hb-shadow); } .hb-corteiz-transition .hb-magnet:hover .hb-media img:first-child { opacity: 0; transform: scale(1.025); } .hb-corteiz-transition .hb-magnet:hover .hb-media img:nth-child(2) { opacity: 1; transform: scale(1.02); } } @media (prefers-reduced-motion: reduce) { .hb-corteiz-transition .hb-magnet, .hb-corteiz-transition .hb-media img, .hb-corteiz-transition .hb-toc-link { transition: none !important; transform: none !important; } } @media (max-width: 850px) { .hb-corteiz-transition { font-size: 16px; } .hb-corteiz-transition .hb-feature { grid-template-columns: 1fr; } .hb-corteiz-transition .hb-feature.hb-reverse .hb-feature-copy { order: 0; } .hb-corteiz-transition .hb-magnet { max-width: 650px; margin: 0 auto; } .hb-corteiz-transition .hb-related { grid-template-columns: 1fr; } .hb-corteiz-transition .hb-related a { min-height: 0; border-right: 0; border-bottom: 1px solid var(--hb-line); } .hb-corteiz-transition .hb-related a:last-child { border-bottom: 0; } } @media (max-width: 720px) { .hb-corteiz-transition .hb-toc-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .hb-corteiz-transition .hb-day-read, .hb-corteiz-transition .hb-colour-grid { grid-template-columns: 1fr; } .hb-corteiz-transition .hb-day-read > div { padding: 19px 0; } .hb-corteiz-transition .hb-day-read > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--hb-line); } .hb-corteiz-transition .hb-outfit { grid-template-columns: 50px minmax(0,1fr); } .hb-corteiz-transition .hb-outfit p { grid-column: 2; } } @media (max-width: 540px) { .hb-corteiz-transition .hb-lede { font-size: 18px; } .hb-corteiz-transition h2 { margin-top: 59px; font-size: 29px; } .hb-corteiz-transition .hb-toc { padding: 20px; } .hb-corteiz-transition .hb-toc-grid { grid-template-columns: 1fr; } .hb-corteiz-transition .hb-toc-link { justify-content: flex-start; text-align: left; } .hb-corteiz-transition .hb-transition-row, .hb-corteiz-transition .hb-error, .hb-corteiz-transition .hb-gap-row { grid-template-columns: 1fr; gap: 6px; } .hb-corteiz-transition .hb-media { min-height: 330px; } .hb-corteiz-transition .hb-buy-box, .hb-corteiz-transition .hb-final { padding: 23px; } }