@font-face { font-family: "Bricolage Display"; font-style: normal; font-weight: 600; font-display: block; src: url("fonts/bricolage-title-600.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AE, U+00B0, U+00B7, U+00D7, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+20AC, U+2122, U+2191, U+2193, U+2212; } @font-face { font-family: "Bricolage Display"; font-style: normal; font-weight: 600; font-display: block; src: url("fonts/bricolage-extended.woff2") format("woff2"); unicode-range: U+00A1-00A2, U+00A4-00A8, U+00AA-00AD, U+00AF, U+00B1-00B6, U+00B8-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2015-2017, U+201A-201B, U+201E-2021, U+2023-2025, U+2027-206F, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bricolage Display"; font-style: normal; font-weight: 750; font-display: block; src: url("fonts/bricolage-title-750.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AE, U+00B0, U+00B7, U+00D7, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+20AC, U+2122, U+2191, U+2193, U+2212; } @font-face { font-family: "Bricolage Display"; font-style: normal; font-weight: 750; font-display: block; src: url("fonts/bricolage-extended.woff2") format("woff2"); unicode-range: U+00A1-00A2, U+00A4-00A8, U+00AA-00AD, U+00AF, U+00B1-00B6, U+00B8-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2015-2017, U+201A-201B, U+201E-2021, U+2023-2025, U+2027-206F, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bricolage Heading"; font-style: normal; font-weight: 400 750; font-display: block; src: url("fonts/bricolage-text.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AE, U+00B0, U+00B7, U+00D7, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+20AC, U+2122, U+2191, U+2193, U+2212; } @font-face { font-family: "Bricolage Heading"; font-style: normal; font-weight: 400 750; font-display: block; src: url("fonts/bricolage-extended.woff2") format("woff2"); unicode-range: U+00A1-00A2, U+00A4-00A8, U+00AA-00AD, U+00AF, U+00B1-00B6, U+00B8-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2015-2017, U+201A-201B, U+201E-2021, U+2023-2025, U+2027-206F, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bricolage Text"; font-style: normal; font-weight: 400 750; font-display: optional; src: url("fonts/bricolage-text.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AE, U+00B0, U+00B7, U+00D7, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+20AC, U+2122, U+2191, U+2193, U+2212; } @font-face { font-family: "Bricolage Text"; font-style: normal; font-weight: 400 750; font-display: optional; src: url("fonts/bricolage-extended.woff2") format("woff2"); unicode-range: U+00A1-00A2, U+00A4-00A8, U+00AA-00AD, U+00AF, U+00B1-00B6, U+00B8-00D6, U+00D8-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2015-2017, U+201A-201B, U+201E-2021, U+2023-2025, U+2027-206F, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bricolage Text Fallback"; font-style: normal; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo"), local("Arimo-Regular"); size-adjust: 105.2%; ascent-override: 88.4%; descent-override: 25.7%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Text Fallback"; font-style: normal; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold"); size-adjust: 100%; ascent-override: 93%; descent-override: 27%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Display Fallback"; font-style: normal; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold"); size-adjust: 90.2%; ascent-override: 103.1%; descent-override: 29.9%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Text Fallback Roboto"; font-style: normal; font-weight: 400; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 105.9%; ascent-override: 87.8%; descent-override: 25.5%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Text Fallback Roboto"; font-style: normal; font-weight: 700; src: local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 105.9%; ascent-override: 87.8%; descent-override: 25.5%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Display Fallback Roboto"; font-style: normal; font-weight: 700; src: local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 96.1%; ascent-override: 96.8%; descent-override: 28.1%; line-gap-override: 0%; } :root { --stone: #f7f5f2; --stone-2: #f1eee9; --paper: #ffffff; --ink: #1d1a21; --text: #34303a; --muted: #5c5664; --line: #ddd7cf; --accent: #b0205a; --accent-hover: #931a4b; --night: #1a1019; --night-ink: #f8eef4; --night-muted: #c4b2c0; --peach: #ff8db4; --good: #2f6b4f; --display: "Bricolage Display", "Bricolage Display Fallback", "Bricolage Display Fallback Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --display-s: "Bricolage Heading", "Bricolage Text Fallback", "Bricolage Text Fallback Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --display-weight: 600; --display-tracking: -0.015em; --display-leading: 1; --display-axes: "opsz" 96; --display-em-style: normal; --sans: "Bricolage Text", -apple-system, BlinkMacSystemFont, "Bricolage Text Fallback", "Bricolage Text Fallback Roboto", "Segoe UI", system-ui, sans-serif; --serif: var(--display); --radius: 10px; --band: clamp(44px, 5vw, 72px); --band-s: clamp(28px, 3.5vw, 44px); --head: 20px; --gap: 24px; --gap-s: 12px; } h1, h2 { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: var(--display-leading); font-variation-settings: var(--display-axes); } h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; } @media (max-width: 600px) { :root { --display-leading: 1.03; } } .btn, .button { border-radius: var(--radius); } .crumb { letter-spacing: 0; text-transform: none; font-size: .875rem; } .refund, .status { border: 0; border-radius: var(--radius); background: var(--stone-2); outline: 1px solid transparent; } .home { color: var(--text); background: var(--paper); } .home h1, .home h2, .home h3 { color: var(--ink); } .home em { font-style: normal; color: inherit; } .home .lead { max-width: 40em; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--text); text-wrap: pretty; } .home .home-head { max-width: 46rem; margin: 0 0 clamp(24px, 3vw, 36px); text-align: left; } .home .home-head h2, .home-cta h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; text-wrap: balance; } .home .home-head .lead { margin: 12px 0 0; } .home-items, .home-plans, .home-steps, .home-faq, .home-cta { padding-block: var(--band); } .home .home-alt { background: var(--stone); } .home .btn { min-height: 50px; padding: 0 24px; gap: 10px; border-radius: var(--radius); font: 600 16px/1 var(--sans); letter-spacing: 0; } .home .btn .arrow { width: 18px; height: 18px; font-size: 0; background: currentColor; -webkit-mask: url("icons/arrow.svg") center / contain no-repeat; mask: url("icons/arrow.svg") center / contain no-repeat; } .home a:not(.btn) { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .home a:not(.btn):hover { color: var(--accent-hover); text-decoration-thickness: 2px; } .home-hero { display: grid; padding: 0; background: var(--stone); } .home-hero > .wrap { order: 1; padding-block: clamp(36px, 6vw, 72px) 32px; } .home .home-hero > .home-media { order: 2; margin: 0; } .home .home-hero > .home-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .home-hero h1 { max-width: 15em; margin: 0; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; text-wrap: balance; } .home-hero .lead { margin: 18px 0 0; } .home .home-hero .home-actions { margin: 26px 0 0; } @media (min-width: 960px) { .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .home-hero > .wrap { max-width: none; margin: 0; padding: 64px 56px 64px max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))); } .home .home-hero > .home-media { height: 100%; } .home .home-hero > .home-media img { height: 100%; min-height: 480px; aspect-ratio: auto; } } .home .home-items-list { gap: 28px 40px; } .home .home-items-list li { max-width: 34em; } .home .home-items-list h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.35; } .home .home-items-list p { margin: 0; line-height: 1.55; } .home .home-items-list .home-link { margin-top: 10px; font-weight: 500; } @media (min-width: 720px) { .home .home-items-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .home .home-steps-list li { display: block; } .home .home-steps-list img { width: 100%; max-width: 260px; aspect-ratio: 600 / 1300; height: auto; border-radius: 15.33% / 7.08%; background: #1b1418; } .home .home-steps-list h3 { margin: 20px 0 4px; font-size: 18px; line-height: 1.35; } .home .home-steps-list p { margin: 0; max-width: 26em; } @media (max-width: 719px) { .home .home-steps-list { gap: 28px; } .home .home-steps-list li { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 18px; align-items: center; } .home .home-steps-list img { grid-row: span 2; max-width: 112px; } .home .home-steps-list h3 { margin: 0 0 4px; align-self: end; } .home .home-steps-list p { align-self: start; } } @media (min-width: 720px) { .home .home-steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } } .home .home-plans-list { gap: 40px; } .home .home-plan { display: flex; flex-direction: column; } .home .home-plan > img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--radius); } .home .home-plan-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 0 0; } .home .home-plan h3 { margin: 0; font-size: 24px; line-height: 1.2; } .home .home-plan p { margin: 0; } .home .home-bullets { display: grid; gap: 6px; margin: 4px 0 10px; } .home .home-bullets li { position: relative; padding-left: 18px; } .home .home-bullets li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); } .home .home-plan .btn { width: auto; align-self: flex-start; margin-top: auto; } @media (min-width: 860px) { .home .home-plans-list { grid-template-columns: 1fr 1fr; } } .home .home-faq-list { max-width: 820px; border-top: 1px solid var(--line); } .home .home-faq-list details { margin: 0; border-bottom: 1px solid var(--line); background: none; } .home .home-faq-list summary { display: flex; justify-content: space-between; gap: 20px; min-height: 0; padding: 20px 0; list-style: none; cursor: pointer; font: 600 18px/1.4 var(--sans); color: var(--ink); } .home .home-faq-list summary::-webkit-details-marker { display: none; } .home .home-faq-list summary::after { content: ""; flex: none; width: 24px; height: 24px; background: var(--muted); -webkit-mask: url("icons/plus.svg") center / contain no-repeat; mask: url("icons/plus.svg") center / contain no-repeat; } .home .home-faq-list details[open] summary::after { rotate: 45deg; } .home .home-answer { display: grid; gap: 10px; max-width: 44em; padding: 0 0 22px; color: var(--text); } .home-cta { background: var(--paper); text-align: left; } .home-cta .home-line { max-width: 36em; margin: 12px 0 0; color: var(--text); font-size: clamp(17px, 1.4vw, 19px); } .home .home-cta .home-actions { margin: 24px 0 0; } @media (forced-colors: active) { .home .btn .arrow, .home .home-faq-list summary::after, .home .home-bullets li::before { forced-color-adjust: none; background: CanvasText; } } .look-women { --stone: #f6f1ea; --stone-2: #ede5da; --paper: #fffdf9; --ink: #221a1f; --text: #4a4046; --muted: #675c62; --line: #ddd2c5; --night: #1f161b; --pill: 999px; background: var(--stone); } .look-women .nav { background: var(--stone); backdrop-filter: none; -webkit-backdrop-filter: none; } .wordmark { align-items: center; font: 700 21px/1 var(--sans); letter-spacing: -0.04em; } @media not all and (forced-colors: active) { .wordmark .wm { display: none; } .wordmark::before { content: ""; flex: none; width: 118px; height: 26px; background: url("logo/lockup-light.svg") left center / contain no-repeat; } } @property --fitvee-stroke-1 { syntax: "<percentage>"; inherits: false; initial-value: 120%; } @property --fitvee-stroke-2 { syntax: "<percentage>"; inherits: false; initial-value: 120%; } @media (prefers-reduced-motion: no-preference) { @media not all and (forced-colors: active) { @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) { .nav .wordmark { position: relative; background: url("logo/lockup-light-word.svg") left center / 118px 26px no-repeat; } .nav .wordmark::before, .nav .wordmark::after { -webkit-mask: linear-gradient(to bottom, #000 var(--fitvee-stroke), transparent calc(var(--fitvee-stroke) + 18%)); mask: linear-gradient(to bottom, #000 var(--fitvee-stroke), transparent calc(var(--fitvee-stroke) + 18%)); } .nav .wordmark::before { --fitvee-stroke: var(--fitvee-stroke-1); background-image: url("logo/lockup-light-stroke-1.svg"); animation: fitvee-stroke-1 280ms cubic-bezier(.45, 0, .25, 1) 80ms both; } .nav .wordmark::after { content: ""; position: absolute; left: 0; top: 50%; width: 118px; height: 26px; margin-top: -13px; --fitvee-stroke: var(--fitvee-stroke-2); background: url("logo/lockup-light-stroke-2.svg") left center / contain no-repeat; animation: fitvee-stroke-2 300ms cubic-bezier(.45, 0, .25, 1) 300ms both; } .nav .wordmark:hover::before, .nav .wordmark:focus-visible::before { animation: fitvee-stroke-1 280ms cubic-bezier(.45, 0, .25, 1) 80ms both, fitvee-stroke-1-again 280ms cubic-bezier(.45, 0, .25, 1) both; } .nav .wordmark:hover::after, .nav .wordmark:focus-visible::after { animation: fitvee-stroke-2 300ms cubic-bezier(.45, 0, .25, 1) 300ms both, fitvee-stroke-2-again 300ms cubic-bezier(.45, 0, .25, 1) 220ms both; } .look-men .nav .wordmark { background-image: url("logo/lockup-men-dark-word.svg"); } .look-men .nav .wordmark::before { background-image: url("logo/lockup-men-dark-stroke-1.svg"); } .look-men .nav .wordmark::after { background-image: url("logo/lockup-men-dark-stroke-2.svg"); } } } @keyframes fitvee-stroke-1 { from { --fitvee-stroke-1: 7%; } to { --fitvee-stroke-1: 100%; } } @keyframes fitvee-stroke-1-again { from { --fitvee-stroke-1: 7%; } to { --fitvee-stroke-1: 100%; } } @keyframes fitvee-stroke-2 { from { --fitvee-stroke-2: -18%; } to { --fitvee-stroke-2: 100%; } } @keyframes fitvee-stroke-2-again { from { --fitvee-stroke-2: -18%; } to { --fitvee-stroke-2: 100%; } } } .look-women .btn, .look-women .button { border-radius: var(--pill); } .look-women .home { background: var(--stone); color: var(--text); } .look-women .home .home-alt { background: var(--stone-2); } .look-women .home h1, .look-women .home h2 { color: var(--ink); text-wrap: balance; } .look-women .home h1 { margin: 0; font-size: clamp(42px, 5vw, 64px); line-height: var(--display-leading); } .look-women .home .home-head h2, .look-women .home-cta h2 { font-size: clamp(42px, 5vw, 64px); line-height: var(--display-leading); } .look-women .home .lead { font-size: clamp(19px, 1.6vw, 20px); line-height: 1.5; max-width: 34em; } .look-women .home .home-head { max-width: 820px; margin-bottom: clamp(40px, 6vw, 72px); } .look-women .home .home-head .lead { margin-top: 20px; } .look-women .home-steps .home-head, .look-women .home-faq .home-head, .look-home .home-steps .home-head { margin-inline: auto; text-align: center; } .look-women .home-steps .home-head .lead, .look-home .home-steps .home-head .lead { margin-inline: auto; } .look-women .home-steps, .look-women .home-items, .look-women .home-faq { padding-block: var(--band); } .look-home .home-steps { padding-block: var(--band); } .look-women .home .btn { min-height: 52px; padding: 0 28px; font: 600 17px/1 var(--sans); letter-spacing: -0.01em; } .look-women .nav .btn { min-height: 40px; padding: 0 18px; font-size: 15px; } .look-women .home-hero { position: relative; display: block; padding: 0; background: var(--night); } .look-women .home .home-hero > .home-media { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #2b2226; } .look-women .home .home-hero > .home-media video, .look-women .home .home-hero > .home-media img { width: 100%; height: 100%; object-fit: cover; } .look-women .home .home-hero > .home-media img { min-height: 0; } .look-women .home-hero > .wrap { padding-block: 36px 64px; background: var(--stone); } .look-women .home-hero .lead { margin: 18px 0 28px; } .look-women .home .home-hero .home-actions { margin: 0; } @media (min-width: 1200px) { .look-women .home .home-hero > .home-media { height: min(calc(100svh - 72px), 56.25vw); aspect-ratio: auto; } .look-women .home .home-hero > .home-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 110% 130% at 0% 100%, rgba(24, 15, 20, .86) 0%, rgba(24, 15, 20, .74) 40%, rgba(24, 15, 20, .4) 70%, rgba(24, 15, 20, 0) 100%); } .look-women .home-hero > .wrap { position: absolute; left: 0; right: 0; bottom: 92px; max-width: none; padding: 0 max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))); background: none; pointer-events: none; } .look-women .home-hero .home-content { max-width: 560px; } .look-women .home .home-hero h1 { color: #fff; font-size: clamp(56px, 5vw, 72px); } .look-women .home-hero .lead { color: rgba(255, 255, 255, .92); } .look-women .home-hero .btn { pointer-events: auto; } .look-women .home-hero .btn:focus-visible { outline-color: #fff; } } .look-women .home .home-steps-list, .look-home .home .home-steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; } .look-women .home .home-steps-list li, .look-home .home .home-steps-list li { display: grid; grid-template-columns: none; gap: 18px; justify-items: center; align-content: start; text-align: center; } .look-women .home .home-steps-list img, .look-home .home .home-steps-list img { grid-row: auto; width: 100%; max-width: 272px; height: auto; aspect-ratio: 546 / 1178; border-radius: 0; background: none; filter: drop-shadow(0 30px 30px rgba(34, 26, 31, .28)); } .look-women .home .home-steps-list h3, .look-home .home .home-steps-list h3 { align-self: auto; margin: 0; font: 600 17px/1.3 var(--sans); color: var(--ink); } .look-women .home .home-steps-list h3::before, .look-home .home .home-steps-list h3::before { content: none; } .look-women .home .home-steps-list p, .look-home .home .home-steps-list p { align-self: auto; margin: -12px 0 0; max-width: 250px; font-size: 15px; color: var(--muted); text-wrap: balance; } @media (min-width: 1040px) { .look-women .home .home-steps-list, .look-home .home .home-steps-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } } .look-women .home #body .home-items-list, .look-home .home #body .home-items-list { grid-template-columns: none; gap: 40px; } .look-women .home #body .home-items-list li, .look-home .home #body .home-items-list li { max-width: none; } .look-women .home #body .home-items-list img, .look-home .home #body .home-items-list img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; } .look-women .home #body .home-items-list h3, .look-home .home #body .home-items-list h3 { margin: 20px 0 0; font: 600 clamp(22px, 2vw, 26px)/1.15 var(--display-s); letter-spacing: -0.01em; color: var(--ink); } .look-women .home #body .home-items-list p, .look-home .home #body .home-items-list p { margin-top: 8px; max-width: 26em; } @media (min-width: 760px) { .look-women .home #body .home-items-list, .look-home .home #body .home-items-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } } .look-home .home #problem .home-items-list h3 { margin: 0 0 8px; font: 600 clamp(22px, 2vw, 26px)/1.15 var(--display-s); letter-spacing: -0.01em; color: var(--ink); } .look-home .home #problem .home-items-list p { max-width: 24em; } @media (min-width: 760px) { .look-home .home #problem .home-items-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } } @media (prefers-reduced-motion: no-preference) { @media (max-width: 759.98px) and (orientation: portrait) { @supports (animation-timeline: view()) and (timeline-scope: --a) { .look-home .home #body .home-items-list { display: block; timeline-scope: --deck-2, --deck-3; } .look-home .home #body .home-items-list li { position: sticky; top: calc(88px + var(--deck-i, 0) * 12px); padding-bottom: 32px; background: var(--stone-2); transform-origin: 50% 0; } .look-home .home #body .home-items-list img { max-height: calc(100svh - 252px); } .look-home .home #body .home-items-list li:nth-child(2) { --deck-i: 1; view-timeline: --deck-2 block; } .look-home .home #body .home-items-list li:nth-child(3) { --deck-i: 2; view-timeline: --deck-3 block; } .look-home .home #body .home-items-list li:nth-child(1) { animation: fitvee-tuck linear both; animation-timeline: --deck-2; animation-range: entry 0% entry 100%; } .look-home .home #body .home-items-list li:nth-child(2) { animation: fitvee-tuck linear both; animation-timeline: --deck-3; animation-range: entry 0% entry 100%; } } } @keyframes fitvee-tuck { to { transform: scale(0.86); filter: brightness(0.72); } } } @media (max-width: 1039.98px) { .look-home .home:not(.home-landing) #session .home-steps-list li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); } } @media (min-width: 1040px) { .look-home .home:not(.home-landing) #session .home-steps-list { grid-template-columns: repeat(3, minmax(0, 272px)); justify-content: center; gap: 40px 48px; } } .look-women .home :is(#plan, #days) .wrap { display: grid; gap: 36px; align-items: start; } .look-women .home :is(#plan, #days) .home-head { margin: 0; } .look-women .home #plan .home-media { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--stone-2); } .look-women .home #plan .home-media video, .look-women .home #plan .home-media img { width: 100%; height: 100%; object-fit: cover; } .look-women .home #days .home-media { margin: 0; justify-self: center; } .look-women .home #days .home-media img { width: 300px; max-width: 100%; height: auto; filter: drop-shadow(0 40px 40px rgba(34, 26, 31, .3)); } .look-women .home :is(#plan, #days) .home-items-list { grid-template-columns: none; gap: 18px; max-width: 34em; } .look-women .home :is(#plan, #days) .home-items-list li { max-width: none; padding-top: 18px; border-top: 1px solid var(--line); } .look-women .home #plan .home-items-list li { display: grid; grid-template-columns: 24px 1fr; column-gap: 14px; } .look-women .home #plan .home-items-list li > .home-icon { grid-row: 1 / span 2; margin: 1px 0 0; } .look-women .home #plan .home-items-list li > :not(.home-icon) { grid-column: 2; } .look-women .home :is(#plan, #days) .home-items-list h3 { margin: 0 0 2px; font: 600 17px/1.4 var(--sans); color: var(--ink); } .look-women .home #plan .home-actions { margin: 8px 0 0; } @media (min-width: 960px) { .look-women .home :is(#plan, #days) .wrap { grid-template-columns: 1.1fr 1fr; column-gap: 64px; row-gap: 24px; } .look-women .home #days .home-media { grid-column: 1; grid-row: 1 / span 3; } .look-women .home #plan .home-media { grid-column: 1; grid-row: 1 / span 3; align-self: stretch; aspect-ratio: auto; min-height: 320px; } .look-women .home #plan .home-media :is(video, img) { object-position: 65% 50%; } .look-women .home :is(#plan, #days) .home-head, .look-women .home :is(#plan, #days) .home-items-list, .look-women .home #plan .home-actions { grid-column: 2; } .look-women .home #days .wrap { grid-template-columns: 1fr 1fr; } .look-women .home #days .home-head { align-self: end; } } .look-women .home .home-faq-list { max-width: 860px; margin-inline: auto; } .look-women .home .home-faq-list summary { padding: 24px 0; font: 600 19px/1.35 var(--sans); } .look-women .home-cta { position: relative; overflow: hidden; padding: 0; color: #fff; background: var(--night); text-align: center; } .look-women .home .home-cta > .home-media { position: absolute; inset: 0; margin: 0; } .look-women .home .home-cta > .home-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; } .look-women .home-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(24, 15, 20, .86) 0%, rgba(24, 15, 20, .7) 32%, rgba(24, 15, 20, .3) 52%, rgba(24, 15, 20, 0) 72%); } .look-women .home-cta > .wrap { position: relative; z-index: 1; display: grid; justify-items: center; align-content: end; gap: 22px; min-height: clamp(560px, 52vw, 800px); padding-block: 0 clamp(48px, 6vw, 88px); } .look-women .home .home-cta h2 { color: #fff; } .look-women .home .home-cta .home-actions { margin: 0; } .look-women .home-cta .btn { background: #fff; color: var(--ink); } .look-women .home-cta .btn:hover { background: var(--stone); } .look-women .home-cta .btn:focus-visible { outline-color: #fff; } @media (min-width: 900px) { .look-women .home-cta > .wrap { justify-items: start; text-align: left; } .look-women .home .home-cta h2 { max-width: 7.5em; } } .look-women .site-footer { background: var(--stone); } .look-women .foot-note { color: var(--text); } .look-home, .look-page { --stone: #f6f1ea; --stone-2: #ede5da; --paper: #fffdf9; --ink: #1f1a17; --text: #4a4046; --muted: #675c62; --line: #ddd2c5; --accent: #1f1a17; --accent-hover: #3d3530; --green: #266e4c; --night: #1f1a17; --pill: 999px; background: var(--stone); } .look-home .nav, .look-page .nav { background: var(--stone); backdrop-filter: none; -webkit-backdrop-filter: none; } .look-home .btn, .look-home .button, .look-page .btn, .look-page .button { border-radius: var(--pill); } .look-home .btn-primary, .look-page .btn-primary { background: var(--ink); color: #fff; } .look-home .btn-primary:hover, .look-page .btn-primary:hover { background: var(--accent-hover); } .look-home .home { background: var(--stone); color: var(--text); } .look-home .home .home-alt { background: var(--stone-2); } .look-home .home h1, .look-home .home h2 { color: var(--ink); text-wrap: balance; } .look-home .home .home-head h2, .look-home .home-cta h2 { font-size: clamp(42px, 5vw, 64px); line-height: var(--display-leading); } .look-home .home .lead { font-size: clamp(19px, 1.6vw, 20px); line-height: 1.5; max-width: 34em; } .look-home .home .home-head { max-width: 820px; margin-bottom: clamp(28px, 4vw, 44px); } .look-home .home .home-head .lead { margin-top: 14px; } .look-home .home-faq .home-head { margin-inline: auto; text-align: center; } .look-home .home-plans, .look-home .home-items, .look-home .home-faq { padding-block: var(--band); } .look-home .home-hero + .home-plans { padding-top: 0; } .look-home .home .btn { min-height: 52px; padding: 0 28px; font: 600 17px/1 var(--sans); letter-spacing: -0.01em; } .look-home .nav .btn, .look-page .nav .btn { min-height: 40px; padding: 0 18px; font-size: 15px; } .look-home .home a.home-textlink { font-weight: 600; color: var(--ink); text-underline-offset: 4px; } .look-home .home-hero { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 64px); background: var(--stone); } .look-home .home-hero > .wrap { order: 1; max-width: 1240px; margin-inline: auto; padding: 0 var(--gutter); text-align: center; } .look-home .home .home-hero > .home-media { order: 2; width: min(1240px - 2 * var(--gutter), 100% - 2 * var(--gutter)); margin: clamp(32px, 4vw, 48px) auto 0; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: #2b2226; box-shadow: 0 40px 60px -40px rgba(31, 26, 23, .6); } .look-home .home .home-hero > .home-media video, .look-home .home .home-hero > .home-media img { width: 100%; height: 100%; object-fit: cover; } .look-home .home-hero .home-content { max-width: 1000px; margin-inline: auto; } .look-home .home .home-hero h1 { max-width: none; margin: 0; font-size: clamp(42px, 5.6vw, 72px); line-height: var(--display-leading); } .look-home .home-hero .lead { margin: 18px auto 26px; } .look-home .home .home-hero .home-actions { justify-content: center; margin: 0; } .look-home .home .home-plans-list { grid-template-columns: none; gap: 24px; } @media (min-width: 900px) { .look-home .home .home-plans-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @supports (grid-template-rows: subgrid) { @media (min-width: 900px) { .look-home .home .home-plans-list { row-gap: 0; } .look-home .home .home-plan { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; } .look-home .home .home-plan:nth-child(n + 4) { margin-top: 24px; } .look-home .home .home-plan-body { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 12px; } .look-home .home .home-plan-body > * { align-self: start; } .look-home .home .home-plan-body > .btn { grid-row: -2 / -1; justify-self: start; margin-top: 0; } } } .look-home .home .home-plan { overflow: hidden; border-radius: 28px; background: var(--paper); box-shadow: 0 30px 60px -50px rgba(31, 26, 23, .5); } .look-home .home .home-plan > .home-media { margin: 0; aspect-ratio: 16 / 9; background: var(--stone-2); } .look-home .home .home-plan > .home-media video, .look-home .home .home-plan > .home-media img { width: 100%; height: 100%; object-fit: cover; } .look-home .home .home-plan-body { gap: 12px; padding: 26px 26px 30px; } .look-home .home .home-plan .home-tag { justify-self: start; align-self: flex-start; margin: 0; padding: 4px 10px; border-radius: var(--pill); background: var(--stone-2); color: var(--ink); font-size: 13px; } .look-home .home .home-plan h3 { margin: 0; font: 600 clamp(24px, 2.2vw, 28px)/1.1 var(--display-s); letter-spacing: -0.01em; color: var(--ink); } .look-home .home .home-bullets li::before { background: #b0205a; } .look-home .home .home-plan .btn { background: #b0205a; color: #fff; } .look-home .home .home-plan .btn:hover { background: #931a4b; } .look-home .home .home-plan > .home-media { aspect-ratio: 4 / 3; } .look-home .home .home-plan h3 + p { font: 500 17px/1.45 var(--sans); color: var(--ink); } .look-home .home .home-plan:nth-child(3) .home-tag { background: #e3eaf2; color: #1d2b3a; } .look-home .home .home-plan:nth-child(3) .home-bullets li::before { background: #4d76a5; } .look-home .home .home-plan:nth-child(3) .btn { background: #3d6390; color: #fff; } .look-home .home .home-plan:nth-child(3) .btn:hover { background: #2f5079; } .look-home .home .home-wants .home-want-q { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr) 24px; column-gap: 18px; align-items: center; min-height: 96px; padding: 16px 0; cursor: pointer; } .look-home .home .home-want + .home-want .home-want-q { border-top: 1px solid var(--line); } .look-home .home .home-want-radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .look-home .home .home-want-q img { grid-row: 1 / 3; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; background: var(--stone-2); } .look-home .home .home-want-want { align-self: end; font: 600 clamp(22px, 2vw, 26px)/1.15 var(--display-s); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; } .look-home .home .home-want-plan { align-self: start; margin-top: 5px; font: 500 17px/1.4 var(--sans); color: var(--muted); } .look-home .home .home-want-more { grid-column: 3; grid-row: 1 / 3; width: 22px; height: 22px; background: var(--ink); -webkit-mask: url("icons/chevron.svg") center / contain no-repeat; mask: url("icons/chevron.svg") center / contain no-repeat; } .look-home .home .home-want-q:has(:checked) .home-want-more { visibility: hidden; } .look-home .home .home-want-q:has(:checked) img { outline: 2.5px solid #b0205a; outline-offset: 3px; } .look-home .home .home-want[data-reading="men"] .home-want-q:has(:checked) img { outline-color: #3d6390; } .look-home .home .home-want-q:has(:focus-visible) { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 14px; } .look-home .home .home-want-in { overflow: hidden; min-height: 0; padding: 0 0 28px 78px; } .look-home .home .home-want-in p { margin: 0; max-width: 31em; font: 400 clamp(19px, 1.6vw, 20px)/1.5 var(--sans); color: var(--text); text-wrap: balance; } .look-home .home .home-want-in .home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 20px; } .look-home .home .home-want .btn { background: #b0205a; color: #fff; } .look-home .home .home-want .btn:hover { background: #931a4b; } .look-home .home .home-want[data-reading="men"] .btn { background: #3d6390; } .look-home .home .home-want[data-reading="men"] .btn:hover { background: #2f5079; } .look-home .home .home-want .home-textlink { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; text-decoration-thickness: 1.5px; text-underline-offset: 5px; } .look-home .home .home-want-media { position: relative; height: 440px; margin: 2px 0 20px; overflow: hidden; border-radius: 50% 50% 22px 22px / 180px 180px 22px 22px; background: var(--stone-2); } .look-home .home .home-want-media:empty { display: none; } .look-home .home .home-want-media .home-media { height: 100%; margin: 0; } .look-home .home .home-want-media :is(video, img) { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; } .look-home .home .home-want[data-reading="men"] .home-want-media :is(video, img) { object-position: 62% 0; } @supports selector(:has(*)) { .look-home .home .home-want-body { display: grid; grid-template-rows: 0fr; visibility: hidden; } .look-home .home .home-want-in { padding-bottom: 0; } .look-home .home .home-want:has(:checked) .home-want-body { grid-template-rows: 1fr; visibility: visible; } .look-home .home .home-want:has(:checked) .home-want-in { padding-bottom: 28px; } .look-home .home .home-want-media { display: none; } .look-home .home .home-want:has(:checked) .home-want-media:not(:empty) { display: block; } @media (max-width: 860px) { .look-home .home .home-wants { display: grid; grid-template-columns: minmax(0, 1fr); } .look-home .home .home-want { display: contents; } .look-home .home .home-want-media { grid-row: 2; height: 340px; margin: 0 0 12px; border-radius: 50% 50% 22px 22px / 170px 170px 22px 22px; } .look-home .home .home-want-q { grid-template-columns: 52px minmax(0, 1fr) 22px; column-gap: 14px; min-height: 84px; } .look-home .home .home-want-q img { width: 52px; height: 52px; } .look-home .home .home-want-in { padding-left: 0; } .look-home .home .home-want-in .home-actions { gap: 4px; } .look-home .home .home-want-in .btn { justify-content: center; width: 100%; } } @media (min-width: 861px) { .look-home .home .home-wants { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); grid-template-rows: repeat(7, auto) 1fr; column-gap: clamp(48px, 7vw, 96px); } .look-home .home .home-want { display: contents; } .look-home .home .home-wants > .home-head, .look-home .home .home-want-q, .look-home .home .home-want-body { grid-column: 1; } .look-home .home .home-want-media { grid-column: 2; grid-row: 1 / -1; align-self: start; height: clamp(560px, 52vw, 680px); margin: 0; border-radius: 50% 50% 28px 28px / 300px 300px 28px 28px; } } @media (prefers-reduced-motion: no-preference) { .look-home .home .home-want-body { transition: grid-template-rows .4s cubic-bezier(.3, .7, .2, 1), visibility 0s .4s; } .look-home .home .home-want:has(:checked) .home-want-body { transition: grid-template-rows .4s cubic-bezier(.3, .7, .2, 1); } .look-home .home .home-want:has(:checked) .home-want-media { transition: opacity .5s ease; } @starting-style { .look-home .home .home-want:has(:checked) .home-want-media { opacity: 0; } } } } @supports not selector(:has(*)) { .look-home .home .home-want-radio:focus-visible ~ .home-want-want { outline: 3px solid var(--ink); outline-offset: 4px; } } @media (forced-colors: active) { .look-home .home .home-want-more { forced-color-adjust: none; background: CanvasText; } .look-home .home .home-want-q:has(:checked) img { outline-color: Highlight; } } .look-home .home #guidelines .home-items-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } .look-home .home #guidelines .home-items-list li { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 20px; align-items: start; max-width: none; margin: 0; padding: 22px 0; } .look-home .home #guidelines .home-items-list li + li { border-top: 1px solid var(--line); } .look-home .home #guidelines .home-items-list img { grid-row: 1 / -1; width: 84px; height: 84px; object-fit: contain; } .look-home .home #guidelines .home-items-list h3 { margin: 0; font: 750 clamp(52px, 5vw, 64px)/.95 var(--display); font-variation-settings: var(--display-axes); letter-spacing: -0.02em; color: var(--ink); } .look-home .home #guidelines .home-items-list h3 em { font-size: .6em; letter-spacing: 0; color: inherit; } .look-home .home #guidelines .home-items-list h3 + p { margin: 8px 0 0; font: 400 clamp(19px, 1.6vw, 20px)/1.4 var(--sans); color: var(--text); text-wrap: pretty; } .look-home .home #guidelines .home-link { margin: 8px 0 0; font: 500 16px/1.4 var(--sans); } .look-home .home #guidelines .home-link a { color: var(--muted); text-underline-offset: 4px; } .look-home .home #guidelines .home-items-list li:first-child { grid-template-columns: minmax(0, 1fr); padding-top: 0; } .look-home .home #guidelines .home-items-list li:first-child img { grid-row: auto; width: 150px; height: 150px; margin-bottom: 8px; } .look-home .home #guidelines .home-items-list li:first-child h3 { font-size: clamp(112px, 12.5vw, 160px); line-height: .86; } .look-home .home #guidelines .home-note { max-width: 46em; margin: 20px 0 0; font: 400 15px/1.45 var(--sans); color: var(--muted); text-wrap: pretty; } @media (max-width: 480px) { .look-home .home #guidelines .home-items-list li { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; } .look-home .home #guidelines .home-items-list img { width: 64px; height: 64px; } } @media (min-width: 901px) { .look-home .home #guidelines .home-items-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(48px, 7vw, 96px); } .look-home .home #guidelines .home-items-list li:first-child { grid-column: 1; grid-row: 1 / span 3; align-self: start; padding: 0; } .look-home .home #guidelines .home-items-list li:not(:first-child) { grid-column: 2; } .look-home .home #guidelines .home-items-list li:nth-child(2) { padding-top: 0; } .look-home .home #guidelines .home-items-list li:first-child + li { border-top: 0; } } .look-home .home #steps .home-items-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 880px; } .look-home .home #steps .home-items-list > li { display: grid; grid-template-columns: 140px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: clamp(20px, 3vw, 36px); align-items: start; max-width: none; margin: 0; padding: 26px 0; } .look-home .home #steps .home-items-list > li + li { border-top: 1px solid var(--line); } .look-home .home #steps .home-items-list > li > img { grid-row: 1 / -1; width: 140px; height: 140px; object-fit: contain; } .look-home .home #steps .home-items-list > li > :not(img) { grid-column: 2; } .look-home .home #steps .home-items-list > li > .home-icon { box-sizing: border-box; width: 104px; height: 104px; margin: 18px; padding: 32px; border-radius: 50%; background: #fedce8; } .look-home .home #steps h3 { margin: 6px 0 0; font: 600 clamp(24px, 2.4vw, 30px)/1.15 var(--display-s); letter-spacing: -0.01em; color: var(--ink); } .look-home .home :is(#steps, #rules, #doctor, #answers) p { max-width: 38em; margin: 10px 0 0; font: 400 clamp(17px, 1.5vw, 19px)/1.5 var(--sans); color: var(--text); text-wrap: pretty; } .look-home .home :is(#steps, #rules, #doctor) .home-items-list ul, .look-home .home #doctor .home-note ul { margin: 12px 0 0; padding: 0; list-style: none; } .look-home .home :is(#steps, #rules, #doctor) .home-items-list ul li, .look-home .home #doctor .home-note li { position: relative; max-width: 38em; font: 400 clamp(17px, 1.5vw, 19px)/1.45 var(--sans); color: var(--text); } .look-home .home #steps .home-items-list ul li { margin-top: 6px; padding-left: 20px; } .look-home .home #steps .home-items-list ul li::before, .look-home .home #doctor .home-note li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: #b0205a; } .look-home .home #rules .home-items-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px clamp(36px, 6vw, 88px); } .look-home .home #rules .home-items-list > li { max-width: none; margin: 0; } .look-home .home #rules h3 { margin: 0; font: 600 clamp(22px, 2vw, 26px)/1.2 var(--display-s); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; } .look-home .home #rules .home-items-list ul li, .look-home .home #doctor .home-note li { padding: 12px 0 12px 30px; border-top: 1px solid var(--line); } .look-home .home #rules .home-items-list ul li::before { content: "✓"; position: absolute; left: 2px; top: 12px; font-weight: 700; color: var(--green); } .look-home .home #doctor .home-note li::before { left: 4px; top: calc(12px + .62em); } .look-home .home #doctor .home-note { max-width: 860px; margin: 0; } .look-home .home :is(#doctor, #answers) .home-head { margin-bottom: 18px; } .look-home .home #answers .home-note p { margin: 0; } .look-home .home #answers .home-note a, .look-home .home #steps a { color: var(--ink); text-decoration-color: rgba(31, 26, 23, .35); text-underline-offset: 3px; } @media (min-width: 900px) { .look-home .home #rules .home-items-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 719.98px) { .look-home .home #steps .home-items-list > li { grid-template-columns: 88px minmax(0, 1fr); } .look-home .home #steps .home-items-list > li > img { width: 88px; height: 88px; } .look-home .home #steps .home-items-list > li > .home-icon { width: 68px; height: 68px; margin: 10px; padding: 20px; } } @media (forced-colors: active) { .look-home .home .home-bullets li::before, .look-home .home .home-plan:nth-child(3) .home-bullets li::before { forced-color-adjust: none; background: CanvasText; } .look-home .home #steps .home-items-list ul li::before, .look-home .home #doctor .home-note li::before { forced-color-adjust: none; background: CanvasText; } } .look-home .home .home-faq-list { max-width: 860px; margin-inline: auto; } .look-home .home .home-faq-list summary { padding: 18px 0; font: 600 19px/1.35 var(--sans); } .look-home .home-cta { padding-block: var(--band); background: var(--night); text-align: center; } .look-home .home-cta > .wrap { display: grid; justify-items: center; gap: 24px; } .look-home .home-cta > .wrap::before { content: ""; width: 56px; height: 56px; background: url("logo/mark-light.svg") center / contain no-repeat; } .look-home .home .home-cta h2 { color: #fff; } .look-home .home .home-cta .home-actions { justify-content: center; margin: 0; } .look-home .home-cta .btn { background: #fff; color: var(--ink); } .look-home .home-cta .btn:hover { background: var(--stone); } .look-home .home-cta .btn:focus-visible { outline-color: #fff; } .look-home .site-footer, .look-page .site-footer { background: var(--stone); } .look-home .home #prices { padding: var(--band-s) 0 var(--band); } .look-home .home #prices .home-head { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; } .look-home .home #prices h1 { margin: 0; font-size: clamp(42px, 5.6vw, 72px); line-height: var(--display-leading); } .look-home .home #prices .lead { margin: 20px auto 0; } .look-home .home .home-price-list { max-width: 860px; margin-inline: auto; gap: 18px; } @media (min-width: 720px) { .look-home .home .home-price-list { grid-template-columns: 1fr 1fr; gap: 24px; } } .look-home .home .home-price { gap: 6px; padding: 30px 28px 28px; border-radius: 28px; } .look-home .home .home-price-featured { background: var(--night); color: #fff; box-shadow: 0 30px 60px -30px rgba(31, 26, 23, .55); } .look-home .home .home-price :is(h2, h3) { margin: 0; font: 600 17px/1.2 var(--sans); letter-spacing: 0; color: inherit; } .look-home .home .home-price-amount { margin: 8px 0 0; font: 750 clamp(52px, 6vw, 72px)/.95 var(--display); font-variation-settings: var(--display-axes); letter-spacing: -0.02em; color: var(--ink); } .look-home .home .home-price-for { font: 500 16px/1.35 var(--sans); color: var(--muted); } .look-home .home .home-price-day { margin-top: 14px; padding-top: 14px; font: 650 16px/1.3 var(--sans); color: var(--ink); } .look-home .home .home-price-then { margin-bottom: 18px; font: 650 16px/1.35 var(--sans); color: var(--ink); } .look-home .home .home-price-featured .home-price-amount, .look-home .home .home-price-featured .home-price-day, .look-home .home .home-price-featured .home-price-then { color: #fff; } .look-home .home .home-price-featured .home-price-for { color: rgba(255, 255, 255, .78); } .look-home .home .home-price-featured .home-price-day { border-top-color: rgba(255, 255, 255, .18); } .look-home .home .home-price .btn { width: 100%; } .look-home .home .home-price-featured .btn { background: #fff; color: var(--ink); } .look-home .home .home-price-featured .btn:hover { background: var(--stone); } .look-home .home .home-price-featured :focus-visible { outline-color: #fff; } .look-home .home .home-price-plans { grid-column: 1 / -1; } .look-home .home .home-price-badge { justify-self: start; margin: 4px 0 0; padding: 4px 10px; border-radius: var(--pill); background: var(--stone-2); color: var(--ink); font: 600 13px/1.3 var(--sans); } .look-home .home .home-price-featured .home-price-badge { background: var(--peach); color: var(--night); } .look-home .home .home-price-plan { display: grid; align-content: start; gap: 6px; min-width: 0; margin-top: 22px; } .look-home .home .home-price-plan :is(h3, h4) { font: 600 15px/1.25 var(--sans); color: var(--muted); } .look-home .home .home-price-featured .home-price-plan :is(h3, h4) { color: rgba(255, 255, 255, .78); } .look-home .home .home-price-plan .home-price-then { margin-bottom: 0; } .look-home .home .home-price-plan + .home-price-plan { margin-top: 34px; } .look-home .home .home-price-plans .btn { margin-top: 24px; } @media (min-width: 720px) { .look-home .home .home-price-plans { grid-template-columns: 1fr 1fr; column-gap: 48px; } .look-home .home .home-price-plan + .home-price-plan { margin-top: 22px; } .look-home .home .home-price-plans > :is(h2, h3) { grid-column: 1; align-self: center; } .look-home .home .home-price-plans > .home-price-badge { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; margin: 0; } .look-home .home .home-price-plans > .btn { grid-column: 1 / -1; justify-self: center; width: calc(50% - 24px); } } .look-home .home .home-price-coffee { margin: 22px auto 0; text-align: center; font: 700 17px/1.35 var(--sans); color: var(--ink); } .look-home .home .home-ticks { justify-content: center; gap: 10px 22px; max-width: 860px; margin: 26px auto 0; } .look-home .home .home-ticks li { padding-left: 26px; font: 600 15px/1.3 var(--sans); color: var(--ink); } .look-home .home .home-ticks li::before { font-weight: 700; color: var(--green); } .look-home .home .home-price-note { max-width: 640px; margin: 14px auto 0; text-align: center; font: 500 14px/1.45 var(--sans); color: var(--muted); } .look-home .home #billing { padding-block: var(--band); } .look-home .home #billing .home-head { margin: 0 auto; text-align: center; } .look-home .home .home-billing-list { position: relative; max-width: 980px; margin: clamp(24px, 3vw, 40px) auto 0; grid-template-columns: none; gap: 22px; } .look-home .home .home-billing-list li { position: relative; display: grid; gap: 6px; padding-left: 38px; } .look-home .home .home-billing-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--night); box-shadow: 0 0 0 6px var(--stone); } .look-home .home .home-alt .home-billing-list li::before { box-shadow: 0 0 0 6px var(--stone-2); } .look-home .home .home-billing-list li:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 28px; bottom: -22px; width: 2px; background: var(--line); } .look-home .home .home-billing-list h3 { margin: 0; font: 600 clamp(22px, 2vw, 26px)/1.15 var(--display-s); letter-spacing: -0.01em; color: var(--ink); } .look-home .home .home-billing-list p { font: 500 16px/1.4 var(--sans); color: var(--text); } @media (min-width: 760px) { .look-home .home .home-billing-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .look-home .home .home-billing-list li { padding: 40px 0 0; text-align: center; justify-items: center; } .look-home .home .home-billing-list li::before { left: calc(50% - 10px); top: 0; } .look-home .home .home-billing-list li:not(:last-child)::after { left: calc(50% + 18px); right: calc(-50% + 4px); top: 9px; bottom: auto; width: auto; height: 2px; } } .look-home .home #billing .home-price-note { margin-top: 28px; } .look-page main.site { color: var(--text); } .look-page main.site h1 { font: var(--display-weight) clamp(42px, 5vw, 64px)/var(--display-leading) var(--display); font-variation-settings: var(--display-axes); letter-spacing: var(--display-tracking); color: var(--ink); text-wrap: balance; } @media not all and (forced-colors: active) { .look-page > main.site:only-child:not(:has(> form)) > h1:first-child { font-size: 0; line-height: 0; } .look-page > main.site:only-child:not(:has(> form)) > h1:first-child::before { content: ""; display: block; width: 118px; height: 26px; background: url("logo/lockup-light.svg") left center / contain no-repeat; } .look-page > main.site:only-child:has(> form)::before { content: ""; display: block; margin-bottom: 32px; width: 118px; height: 26px; background: url("logo/lockup-light.svg") left center / contain no-repeat; } } .look-page main.site h2 { font: 600 clamp(24px, 2.4vw, 30px)/1.15 var(--display-s); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; } .look-page main.site h3 { font: 600 18px/1.35 var(--sans); color: var(--ink); } .look-page main.site a { color: var(--ink); text-decoration-color: rgba(31, 26, 23, .35); text-underline-offset: 3px; } .look-page main.site a:hover { text-decoration-color: currentColor; } .look-page main.site:not(.home) .crumb, .look-page main.site:not(.home) .crumb a { color: var(--muted); } .look-page main.site .button, .look-page main.site .btn-primary { border-radius: var(--pill); background: var(--ink); color: #fff; } .look-page main.site .button:hover, .look-page main.site .btn-primary:hover { background: var(--accent-hover); } .look-page main.site:not(.home, :only-child) { max-width: 1240px; padding-inline: var(--gutter); } .look-page main.site:not(.home) > * { max-width: 760px; } .look-page main.site:not(.home) h1 { margin: 8px 0 18px; } .look-page main.site:not(.home) h2 { margin: 48px 0 12px; } .look-page main.site:not(.home) h3 { margin: 28px 0 8px; } .look-page main.site:not(.home) :is(p:not(.crumb, .note), li:where(:not(.prices > li))) { font: 400 clamp(17px, 1.5vw, 19px)/1.5 var(--sans); color: var(--text); text-wrap: pretty; } .look-page main.site:not(.home) p.lead { font-size: clamp(19px, 1.7vw, 21px); } .look-page main.site:not(.home) ul:not(.articles, .prices) { padding: 0; list-style: none; } .look-page main.site:not(.home) ul:not(.articles, .prices) > li { position: relative; margin: 8px 0; padding-left: 22px; } .look-page main.site:not(.home) ul:not(.articles, .prices) > li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: #b0205a; } .look-page main.site:not(.home) ol { padding-left: 1.4em; } .look-page main.site:not(.home) .articles { display: block; margin: 8px 0 0; } .look-page main.site:not(.home) .articles li { margin: 0; padding: 0; border-top: 1px solid var(--line); } .look-page main.site:not(.home) .articles li:last-child { border-bottom: 1px solid var(--line); } .look-page main.site:not(.home) .articles a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 10px 0; font: 600 clamp(18px, 1.6vw, 20px)/1.3 var(--sans); color: var(--ink); text-decoration: none; border-bottom: 0; } .look-page main.site:not(.home) .articles a::after { content: ""; flex: none; width: 18px; height: 18px; background: var(--ink); -webkit-mask: url("icons/arrow.svg") center / contain no-repeat; mask: url("icons/arrow.svg") center / contain no-repeat; } .look-page main.site:not(.home) .articles a:hover { text-decoration: underline; text-decoration-color: rgba(31, 26, 23, .35); text-underline-offset: 4px; } .look-page main.site:not(.home) :is(.company, .choices) { padding: 0; border-radius: 0; background: none; box-shadow: none; } .look-page main.site:not(.home) .choices { margin-top: 28px; } @media (forced-colors: active) { .look-page main.site:not(.home) ul:not(.articles, .prices) > li::before, .look-page main.site:not(.home) .articles a::after { forced-color-adjust: none; background: CanvasText; } } .look-men { --stone: #050300; --stone-2: #12100c; --paper: #23211d; --ink: #ebe1d3; --text: #d6ccbe; --muted: #b3a999; --line: rgba(235, 225, 211, .16); --accent: #8fb3d9; --accent-hover: #b3cbe6; --pill: 999px; background: var(--stone); color: var(--text); font-family: var(--sans); } .look-men .nav { background: var(--stone); border-bottom: 1px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; } @media not all and (forced-colors: active) { .look-men .wordmark::before { background-image: url("logo/lockup-men-dark.svg"); } } .look-men .nav-links a, .look-men .nav-right .account, .look-men .menu-btn { color: var(--text); } .look-men .pop { background: var(--paper); } .look-men .pop a { color: var(--ink); } .look-men .btn, .look-men .button { border-radius: var(--pill); } .look-men .btn-primary { background: var(--ink); color: #050300; } .look-men .btn-primary:hover { background: #f6efe5; } .look-men .btn.soon { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } .look-men :focus-visible { outline-color: var(--accent); } .look-men .home { background: var(--stone); color: var(--text); } .look-men .home .home-alt { background: var(--stone-2); } .look-men .home h1, .look-men .home h2 { font-weight: 750; color: var(--ink); text-transform: uppercase; letter-spacing: 0; text-wrap: balance; } .look-men .home h1 { max-width: 6.2em; margin: 0; font-size: clamp(40px, 5.4vw, 80px); line-height: var(--display-leading); } .look-men .home .home-head h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1; } .look-men .home .lead { color: var(--text); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; max-width: 34em; } .look-men .home .home-head { max-width: 820px; margin-bottom: 0; } .look-men .home .home-head .lead { margin-top: 14px; } .look-men .home .btn { min-height: 52px; padding: 0 28px; font: 600 17px/1 var(--sans); } .look-men .nav .btn { min-height: 40px; padding: 0 18px; font-size: 15px; } .look-men .home .home-actions { margin: 0; } .look-men .home-hero { position: relative; display: block; padding: 0; background: var(--stone); } .look-men .home .home-hero > .home-media { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #050300; } .look-men .home .home-hero > .home-media img { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; object-position: 70% 40%; } .look-men .home-hero > .wrap { padding-block: 32px 56px; } .look-men .home-hero .lead { margin: 18px 0 28px; } @media (min-width: 1200px) { .look-men .home .home-hero > .home-media { height: min(calc(100svh - 72px), 56.25vw); aspect-ratio: auto; } .look-men .home .home-hero > .home-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 120% 150% at 0% 100%, rgba(5, 3, 0, .94) 0%, rgba(5, 3, 0, .86) 40%, rgba(5, 3, 0, .5) 68%, rgba(5, 3, 0, 0) 100%); } .look-men .home-hero > .wrap { position: absolute; left: 0; right: 0; bottom: 88px; max-width: none; padding: 0 max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))); pointer-events: none; } .look-men .home-hero .home-content { max-width: 640px; } .look-men .home .home-hero h1 { color: #fff; font-size: clamp(56px, 5.4vw, 80px); } .look-men .home-hero .btn { pointer-events: auto; } } .look-men .home #feel { padding-block: var(--band); } .look-men .home #feel .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } .look-men .home #feel .home-items-list { order: 1; width: 100%; grid-template-columns: 1fr 1fr; gap: 12px; } @media (min-width: 900px) { .look-men .home #feel .home-items-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } } .look-men .home #feel .home-items-list li { max-width: none; } .look-men .home #feel .home-media { margin: 0; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--paper); } .look-men .home #feel .home-media video, .look-men .home #feel .home-media img { width: 100%; height: 100%; object-fit: cover; } .look-men .home #feel .home-items-list h3 { margin: 10px 0 0; font: 750 clamp(15px, 1.6vw, 22px)/1.1 var(--display-s); letter-spacing: 0; text-transform: uppercase; color: var(--ink); text-wrap: balance; } .look-men .home #feel .home-head { order: 2; margin-top: clamp(28px, 4vw, 56px); } .look-men .home #feel .home-head h2 { font-size: clamp(30px, 4.6vw, 64px); } .look-men .home #feel .home-actions { order: 3; margin-top: 22px; } .look-men .home :is(#how, #ladder) { padding-block: var(--band); } .look-men .home #how .wrap { display: grid; gap: 28px; align-items: center; } @media (min-width: 900px) { .look-men .home #how .wrap { grid-template-columns: 1fr 1fr; gap: 56px; } } .look-men .home #how .home-media { margin: 0; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: var(--paper); } .look-men .home #how .home-media video, .look-men .home #how .home-media img { width: 100%; height: 100%; object-fit: cover; } .look-men .home #ladder .home-head { margin-bottom: 28px; } .look-men .home #ladder .home-items-list { grid-template-columns: none; gap: 30px; } .look-men .home #ladder .home-items-list li { max-width: none; } .look-men .home #ladder .home-items-list h3 { margin: 0 0 14px; font: 700 15px/1 var(--sans); color: var(--muted); } .look-men .home #ladder .home-items-list ul { position: relative; display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 0 0 18px; list-style: none; } .look-men .home #ladder .home-items-list ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--line), var(--accent)); } .look-men .home #ladder .home-items-list ul li { font: 750 clamp(17px, 3vw, 44px)/1 var(--display); font-variation-settings: var(--display-axes); letter-spacing: 0; text-transform: uppercase; color: var(--ink); } .look-men .home #ladder .home-items-list p { display: flex; justify-content: space-between; margin: 8px 0 0; font-size: 12px; color: var(--muted); } .look-men .home #ladder .home-items-list strong { font-weight: 400; } .look-men .home #ladder .home-actions { margin-top: 8px; } .look-men .home-pick { padding-block: var(--band); } .look-men .home-pick .home-head { margin: 0 auto 32px; text-align: center; } .look-men .home-pick .home-head .lead { margin-inline: auto; } .look-men .home .home-pick-list { gap: 14px; } @media (min-width: 900px) { .look-men .home .home-pick-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .look-men .home .home-pick-list a, .look-men .home .home-pick-card { position: relative; overflow: hidden; gap: 0; border-radius: 18px; background: var(--paper); color: #050300; } .look-men .home .home-pick-list img { border-radius: 0; aspect-ratio: 4 / 5; object-fit: cover; } .look-men .home .home-pick-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 12px 12px 14px; background: var(--ink); color: #050300; font: 700 16px/1 var(--sans); white-space: nowrap; } .look-men .home .home-pick-list a:hover .home-pick-label { background: #fff; } @media (max-width: 359px) { .look-men .home .home-pick-label { gap: 4px; padding: 10px; font-size: 14px; } } .look-men .home .home-pick .home-note { margin: 18px auto 0; text-align: center; font-size: 13px; color: var(--muted); } .look-men .home .home-note a, .look-men .home a:not(.btn) { color: var(--ink); } .look-men .home .home-pick .home-actions { justify-content: center; margin-top: 20px; } .look-men .home-faq .home-head { margin: 0 auto 32px; text-align: center; } .look-men .home .home-faq-list { max-width: 860px; margin-inline: auto; border-color: var(--line); } .look-men .home .home-faq-list details { border-color: var(--line); } .look-men .home .home-faq-list summary { padding: 24px 0; font: 600 19px/1.35 var(--sans); color: var(--ink); } .look-men .home .home-faq-list summary::after { background: var(--muted); } .look-men .home-faq { padding-block: var(--band); } .look-men .site-footer { background: var(--stone); color: var(--muted); } .site-footer .foot-legal { border-top: 0; padding-top: 0; margin-top: var(--gap-s); column-gap: 24px; } main.site:not(.home) + .site-footer .wrap { border-top: 0; } .site-footer .foot-legal p { display: flex; flex-wrap: wrap; gap: 4px 20px; } .site-footer .foot-sep { display: none; } .site-footer .foot-legal p a { padding-block: 1px; margin-block: -1px; } .look-men .foot-h, .look-men .foot-cols a { color: var(--ink); } @media (prefers-reduced-motion: no-preference) { .look-men .home .home-hero > .home-media img { animation: men-settle 4.5s cubic-bezier(.2, .7, .2, 1) both; } @supports (animation-timeline: view()) { .look-men .home #feel .home-items-list li { animation: men-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; } .look-men .home #feel .home-items-list li:nth-child(2) { animation-range: entry 8% entry 88%; } .look-men .home #feel .home-items-list li:nth-child(3) { animation-range: entry 16% entry 96%; } .look-men .home #feel .home-items-list li:nth-child(4) { animation-range: entry 24% entry 100%; } .look-men .home #feel .home-media { animation: men-zoom linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; } .look-men .home #feel .home-head { animation: men-rise linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; } .look-men .home #ladder .home-items-list ul::after { transform-origin: left; animation: men-draw linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; } .look-men .home #ladder .home-items-list ul li { animation: men-rise linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; } .look-men .home #ladder .home-items-list ul li:nth-child(2) { animation-range: entry 20% cover 45%; } .look-men .home #ladder .home-items-list ul li:nth-child(3) { animation-range: entry 30% cover 50%; } .look-men .home #ladder .home-items-list ul li:nth-child(4) { animation-range: entry 40% cover 55%; } .look-men .home .home-pick-list li { animation: men-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; } } @keyframes men-settle { from { transform: scale(1.08); } to { transform: none; } } @keyframes men-zoom { from { transform: scale(.86); opacity: .3; } to { transform: none; opacity: 1; } } @keyframes men-rise { from { transform: translateY(36px); } to { transform: none; } } @keyframes men-draw { from { transform: scaleX(0); } to { transform: none; } } } @media (prefers-reduced-motion: no-preference) { .btn:not(.soon)::after { content: none; } .btn-primary:hover, .button:hover, .btn-light:not(.soon):hover { transform: none; } a:hover .arrow { translate: none; } } .menu-pop:popover-open { align-content: start; } @media (max-width: 599px) { .pop { bottom: auto; height: auto; max-height: calc(100dvh - 88px); overflow-y: auto; } } .menu-pop a { gap: .75rem; } .menu-pop a::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; opacity: .8; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } .menu-pop a[href$="#readings"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); } .menu-pop a[href="/how-it-works"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5v7l5.5-3.5z'/%3E%3C/svg%3E"); } .menu-pop a[href="/pricing"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); } .menu-pop a[href="/help"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.5V14M12 17.5h.01'/%3E%3C/svg%3E"); } .menu-pop a:is([href="/account"], [href="/charge"]) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }