/* ============================================================ Simms Research — chrome + homepage sections Ported 1:1 from Shopify source sections/*.liquid. Depends on tokens in simms-base.css. ============================================================ */ /* ---- Section scaffold ---- */ .section { position: relative; } .section--page-width { } /* ============================================================ ANNOUNCEMENT BAR ============================================================ */ .announcement-bar { background: var(--color-foreground); color: var(--color-background); font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .announcement-bar__track { display: grid; grid: [stack] auto / [stack] auto; justify-items: center; align-items: center; width: 92%; margin-inline: auto; padding-block: 0.6rem; } .announcement-bar__item { grid-area: stack; display: inline-flex; align-items: center; gap: 0.5rem; text-align: center; opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; } .announcement-bar__item.is-active { opacity: 0.92; visibility: visible; } @media (max-width: 749px) { .announcement-bar__track { font-size: 0.5625rem; } } @media (prefers-reduced-motion: reduce) { .announcement-bar__item { transition: none; } } /* ============================================================ HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: rgb(var(--color-background-rgb) / 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.08); } .admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } } @media screen and (max-width: 600px) { .admin-bar .site-header { top: 0; } } .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; width: 90%; margin-inline: auto; min-height: 76px; } .site-header__brand { justify-self: start; display: inline-flex; align-items: center; } .site-header__brand img { height: 38px; width: auto; display: block; } .site-nav { justify-self: center; } .site-nav ul { display: flex; gap: 2rem; margin: 0; padding: 0; list-style: none; } .site-nav a { font-family: var(--font-body--family); font-size: 0.9375rem; font-weight: 500; color: rgb(var(--color-foreground-rgb) / 0.72); text-decoration: none; transition: color 160ms ease; } .site-nav a:hover { color: var(--color-foreground); } .site-header__actions { justify-self: end; display: flex; align-items: center; gap: 1.1rem; } .site-header__actions a { display: inline-flex; color: var(--color-foreground); } .site-header__actions svg { width: 21px; height: 21px; } .site-header__cart { position: relative; align-items: center; justify-content: center; } .site-header__cart-count { position: absolute; inset-block-start: -10px; inset-inline-end: -12px; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: 999px; background: var(--color-foreground); color: var(--color-background); font-family: var(--font-mono--family); font-size: 0.625rem; line-height: 1; } .site-header__toggle { display: none; justify-self: start; background: none; border: 0; padding: 0; color: var(--color-foreground); cursor: pointer; } .site-header__toggle svg { width: 24px; height: 24px; } html.simms-nav-open { overflow: hidden; } @media (max-width: 989px) { .site-header__inner { grid-template-columns: auto 1fr auto; } .site-header__toggle { display: inline-flex; } .site-header__brand { justify-self: center; } .site-nav { display: none; } } /* ============================================================ MOBILE NAV DRAWER (1:1 with simmsresearch.com menu) Rendered as a sibling, NOT inside

— the header's backdrop-filter would otherwise become the containing block for this fixed element and trap it inside the 76px header. ============================================================ */ .mobile-nav { position: fixed; inset: 0; z-index: 200; visibility: hidden; } html.simms-nav-open .mobile-nav { visibility: visible; } .mobile-nav__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.45); opacity: 0; transition: opacity 320ms ease; } html.simms-nav-open .mobile-nav__backdrop { opacity: 1; } .mobile-nav__panel { position: absolute; inset-block: 0; inset-inline-start: 0; display: flex; flex-direction: column; width: min(92vw, 420px); max-width: 100%; box-sizing: border-box; padding: 4.5rem 1.75rem 2rem; background: var(--color-background); box-shadow: 0 0 60px rgb(0 0 0 / 0.18); overflow-y: auto; transform: translateX(-100%); transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1); } html.simms-nav-open .mobile-nav__panel { transform: translateX(0); } .mobile-nav__close { position: absolute; inset-block-start: 1.5rem; inset-inline-start: 1.5rem; display: inline-flex; background: none; border: 0; padding: 0.25rem; color: var(--color-foreground); cursor: pointer; } .mobile-nav__close svg { width: 22px; height: 22px; } .mobile-nav__menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .mobile-nav__menu li { margin: 0; } .mobile-nav__menu a { display: block; padding: 0.55rem 0; font-family: var(--font-heading--family); font-size: 1.875rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--color-foreground-heading); text-decoration: none; } .mobile-nav__menu a:hover { color: var(--color-primary); } .mobile-nav__featured { margin-block-start: auto; padding-block-start: 2rem; } .mobile-nav__featured-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; } .mobile-nav__featured-list::-webkit-scrollbar { display: none; } .mobile-nav__featured-item { flex: 0 0 44%; } .mobile-nav__featured-link { display: block; text-decoration: none; color: var(--color-foreground); } .mobile-nav__featured-thumb { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: rgb(var(--color-foreground-rgb) / 0.04); margin-block-end: 0.5rem; } .mobile-nav__featured-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .mobile-nav__featured-title { font-size: 0.8125rem; font-weight: 500; margin: 0; line-height: 1.3; color: var(--color-foreground-heading); } .mobile-nav__featured-price { font-size: 0.8125rem; margin: 0.15rem 0 0; color: rgb(var(--color-foreground-rgb) / 0.6); } @media (min-width: 990px) { .mobile-nav { display: none; } } /* ============================================================ BUTTONS (Horizon presets) ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 50px; padding-inline: 1.75rem; border: 1px solid transparent; border-radius: var(--style-border-radius-buttons-primary); font-family: var(--font-body--family); font-size: 0.9375rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: opacity 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease; } .btn--primary { background: #fff; color: #0a0a0a; border-color: #fff; } .btn--primary:hover { opacity: 0.88; } .btn--secondary { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.5); } .btn--secondary:hover { background: rgb(255 255 255 / 0.1); } /* ============================================================ HERO (index.json hero: scheme-2 dark, full-screen, image + gradient) ============================================================ */ .hero { position: relative; min-height: calc(100svh - 76px); display: flex; align-items: center; color: #fff; overflow: hidden; background: #121212; } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.56), rgb(0 0 0 / 0.12) 58%, transparent); } .hero__inner { position: relative; z-index: 1; width: 90%; margin-inline: auto; padding-block: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .hero__eyebrow { font-family: var(--font-body--family); font-size: 0.875rem; letter-spacing: -0.01em; color: #f0f9ff; margin: 0 0 0.75rem; } .hero__title { font-family: var(--font-heading--family); font-size: clamp(2.75rem, 7vw, 5.5rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.02em; margin: 0; color: #fff; } .hero__subtitle { font-family: var(--font-body--family); font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.5; color: rgb(255 255 255 / 0.85); max-width: 44ch; margin: 1rem 0 0; } .hero__buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 2rem; } @media (max-width: 749px) { .hero__inner { align-items: flex-start; text-align: left; padding-block-end: 64px; } .hero__subtitle { margin-inline: 0; } } /* ============================================================ TRUST STRIP (sections/trust-strip.liquid) ============================================================ */ .trust-strip { padding-block: 48px; background: var(--color-background); color: var(--color-foreground); } .trust-strip__inner { max-width: min(var(--normal-page-width), 1040px); margin-inline: auto; } .trust-strip__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; row-gap: 1.5rem; border-block-start: 1px solid currentColor; padding-block-start: 1.75rem; } .trust-strip__column { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; text-align: center; padding-inline: clamp(0.75rem, 2vw, 2rem); border-inline-end: 1px solid rgb(var(--color-foreground-rgb) / 0.12); } .trust-strip__column:last-child { border-inline-end: none; } .trust-strip__icon { display: inline-flex; align-items: center; justify-content: center; width: clamp(1.625rem, 1.25vw, 2rem); height: clamp(1.625rem, 1.25vw, 2rem); color: var(--color-foreground); opacity: 0.85; margin-block-end: 0.25rem; } .trust-strip__icon svg { width: 100%; height: 100%; } .trust-strip__value { font-family: var(--font-heading--family); font-weight: 400; font-size: clamp(1.5rem, 1.6vw, 2.125rem); line-height: 1; letter-spacing: -0.01em; } .trust-strip__label { font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; line-height: 1.3; } @media (max-width: 749px) { .trust-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } .trust-strip__column:nth-child(2n) { border-inline-end: none; } .trust-strip__value { font-size: clamp(1.25rem, 5.6vw, 1.5rem); } .trust-strip__label { font-size: 0.5625rem; } } @media (min-width: 750px) and (max-width: 989px) { .trust-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust-strip__column:nth-child(2n) { border-inline-end: none; } } /* ============================================================ PRODUCT LIST (homepage "Popular Products") ============================================================ */ .home-products { padding-block: 100px 48px; background: var(--color-background); } .home-products__inner { width: 90%; max-width: 1520px; margin-inline: auto; } .home-products__head { text-align: center; margin-block-end: 2.5rem; } .home-products__eyebrow { font-family: var(--font-body--family); font-size: 0.875rem; letter-spacing: -0.01em; color: var(--color-primary); margin: 0 0 0.5rem; } .home-products__title { font-family: var(--font-heading--family); font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; margin: 0; color: var(--color-foreground-heading); } .home-products__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; list-style: none; margin: 0; padding: 0; } @media (max-width: 989px) { .home-products__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* Mobile: horizontal swipe carousel (1:1 with Shopify carousel_on_mobile). */ @media (max-width: 749px) { .home-products__grid { display: flex; grid-template-columns: none; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .home-products__grid::-webkit-scrollbar { display: none; } .home-products__grid > li { flex: 0 0 86%; scroll-snap-align: start; } } /* ============================================================ PROCESS STEPS (sections/process-steps.liquid; __surface merged in) ============================================================ */ .process-steps { padding-block: 120px 96px; background: linear-gradient(rgb(var(--color-foreground-rgb) / 0.035), rgb(var(--color-foreground-rgb) / 0.035)) top / 100% 1px no-repeat, linear-gradient(rgb(var(--color-foreground-rgb) / 0.035), rgb(var(--color-foreground-rgb) / 0.035)) bottom / 100% 1px no-repeat, #fcfaf6; } .process-steps__inner { width: 85%; margin-inline: auto; } .process-steps__hero { text-align: center; max-width: 42rem; margin-inline: auto; margin-block-end: 4rem; } .process-steps__eyebrow { font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.5); margin: 0 0 1.25rem; } .process-steps__heading { font-family: var(--font-heading--family); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--color-foreground-heading); margin: 0; } .process-steps__subhead { font-family: var(--font-body--family); font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); line-height: 1.55; color: rgb(var(--color-foreground-rgb) / 0.62); margin: 1.25rem auto 0; max-width: 38ch; } .process-steps__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .process-steps__card { position: relative; overflow: hidden; padding: 2rem 1.75rem 2.25rem; border: 1px solid rgb(var(--color-foreground-rgb) / 0.1); border-radius: 16px; background: var(--color-background); transition: border-color 220ms ease, box-shadow 220ms ease; } .process-steps__card:hover { border-color: var(--horizon-deep); box-shadow: 0 0 0 1px var(--horizon-deep); } .process-steps__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: rgb(var(--color-foreground-rgb) / 0.05); color: var(--color-foreground); margin-block-end: 2.25rem; transition: background 220ms ease, color 220ms ease; } .process-steps__card:hover .process-steps__icon { background: rgb(193 144 132 / 0.12); color: var(--horizon-deep); } .process-steps__icon svg { width: 1.125rem; height: 1.125rem; } .process-steps__bignum { position: absolute; inset-block-start: 1.25rem; inset-inline-end: 1.5rem; font-family: var(--font-heading--family); font-size: 5.5rem; font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: rgb(var(--color-foreground-rgb) / 0.06); pointer-events: none; user-select: none; transition: color 220ms ease; } .process-steps__card:hover .process-steps__bignum { color: rgb(193 144 132 / 0.45); } .process-steps__body { display: flex; flex-direction: column; gap: 0.5rem; } .process-steps__step-label { font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.42); margin: 0; transition: color 220ms ease; } .process-steps__card:hover .process-steps__step-label { color: var(--horizon-deep); } .process-steps__title { font-family: var(--font-heading--family); font-size: 1.25rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-foreground-heading); margin: 0; } .process-steps__desc { font-family: var(--font-body--family); font-size: 0.9375rem; line-height: 1.6; color: rgb(var(--color-foreground-rgb) / 0.62); margin: 0.25rem 0 0; } .process-steps__footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-block-start: 2.5rem; } .process-steps__footnote { font-family: var(--font-mono--family); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.45); margin: 0; } .process-steps__cta { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1.375rem; border-radius: var(--style-border-radius-buttons-primary); background: var(--color-foreground); color: var(--color-background); font-family: var(--font-body--family); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.005em; text-decoration: none; transition: opacity 180ms ease; } .process-steps__cta:hover { opacity: 0.85; } .process-steps__cta-arrow { transition: transform 220ms ease; } .process-steps__cta:hover .process-steps__cta-arrow { transform: translateX(2px); } @media (max-width: 989px) { .process-steps__grid { grid-template-columns: 1fr; gap: 1rem; } } @media (max-width: 749px) { .process-steps__inner { width: 100%; padding-inline: 1.25rem; box-sizing: border-box; } .process-steps__hero { text-align: left; margin-block-end: 2.5rem; } .process-steps__subhead { margin-inline: 0; } .process-steps__card { padding: 1.75rem 1.5rem 2rem; } .process-steps__bignum { font-size: 4rem; } .process-steps__icon { margin-block-end: 1.75rem; } .process-steps__footer { flex-direction: column; align-items: flex-start; gap: 1.25rem; } } /* ============================================================ PRECISION VERIFY (sections/precision-verify.liquid) ============================================================ */ .precision-verify { padding-block: 96px; background: var(--color-background); } .precision-verify__inner { width: 85%; margin-inline: auto; } .precision-verify__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(2rem, 6vw, 5rem); row-gap: 1.5rem; align-items: end; margin-block-end: 3.5rem; } .precision-verify__eyebrow { font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.55); margin: 0 0 1.5rem; } .precision-verify__heading { font-family: var(--font-heading--family); font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--color-foreground-heading); margin: 0; max-width: 14ch; } .precision-verify__body { font-family: var(--font-body--family); font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); line-height: 1.6; color: rgb(var(--color-foreground-rgb) / 0.7); margin: 0; max-width: 44ch; } .precision-verify__pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.12); margin-block-end: 3rem; } .precision-verify__pillar { padding: 2rem 1.5rem 1.75rem 0; display: flex; flex-direction: column; gap: 0.75rem; border-inline-end: 1px solid rgb(var(--color-foreground-rgb) / 0.12); } .precision-verify__pillar:last-child { border-inline-end: none; padding-inline-end: 0; } .precision-verify__pillar:not(:first-child) { padding-inline-start: 1.5rem; } .precision-verify__pillar-num { font-family: var(--font-mono--family); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; color: rgb(var(--color-foreground-rgb) / 0.4); margin: 0 0 0.75rem; } .precision-verify__pillar-title { font-family: var(--font-heading--family); font-size: 1.0625rem; font-weight: 500; line-height: 1.25; color: var(--color-foreground-heading); margin: 0; } .precision-verify__pillar-body { font-family: var(--font-body--family); font-size: 0.9375rem; line-height: 1.55; color: rgb(var(--color-foreground-rgb) / 0.65); margin: 0; } .precision-verify__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.12); border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.12); } .precision-verify__stat { padding: 2.25rem 1.5rem 2.25rem 0; display: flex; flex-direction: column; gap: 0.625rem; border-inline-end: 1px solid rgb(var(--color-foreground-rgb) / 0.12); } .precision-verify__stat:last-child { border-inline-end: none; padding-inline-end: 0; } .precision-verify__stat:not(:first-child) { padding-inline-start: 1.5rem; } .precision-verify__stat-value { font-family: var(--font-heading--family); font-size: clamp(2.25rem, 3.5vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: -0.025em; color: var(--color-foreground-heading); margin: 0; } .precision-verify__stat-label { font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.5); margin: 0; } .precision-verify__disclaimer { font-family: var(--font-body--family); font-size: 0.8125rem; line-height: 1.55; color: rgb(var(--color-foreground-rgb) / 0.45); max-width: 80ch; margin: 1.75rem 0 0; } @media (max-width: 989px) { .precision-verify__hero { grid-template-columns: 1fr; align-items: start; } .precision-verify__pillars, .precision-verify__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .precision-verify__pillar:nth-child(2n), .precision-verify__stat:nth-child(2n) { border-inline-end: none; padding-inline-end: 0; } .precision-verify__pillar:nth-child(-n+2), .precision-verify__stat:nth-child(-n+2) { border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.12); } } @media (max-width: 749px) { .precision-verify__inner { width: 100%; padding-inline: 1.25rem; } .precision-verify__hero { margin-block-end: 2.25rem; } .precision-verify__pillars, .precision-verify__stats { grid-template-columns: 1fr; } .precision-verify__pillar, .precision-verify__stat { padding: 1.5rem 0; border-inline-end: none; border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.12); } .precision-verify__pillar:not(:first-child), .precision-verify__stat:not(:first-child) { padding-inline-start: 0; } .precision-verify__pillar:last-child, .precision-verify__stat:last-child { border-block-end: none; } } /* ============================================================ FAQ ACCORDION (sections/faq-accordion.liquid) ============================================================ */ .faq-accordion { padding-block: 48px 72px; background: var(--color-background); } .faq-accordion__inner { width: 85%; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); column-gap: clamp(2rem, 6vw, 5rem); row-gap: 2.5rem; align-items: start; } .faq-accordion__hero { position: sticky; top: 6rem; } .faq-accordion__eyebrow { font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.55); margin: 0 0 1.25rem; } .faq-accordion__heading { font-family: var(--font-heading--family); font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--color-foreground-heading); margin: 0; max-width: 14ch; } .faq-accordion__contact { font-family: var(--font-body--family); font-size: 0.9375rem; color: rgb(var(--color-foreground-rgb) / 0.65); margin: 1.5rem 0 0; } .faq-accordion__contact-prefix { margin-inline-end: 0.4rem; } .faq-accordion__contact-link { color: var(--color-foreground); font-weight: 500; text-decoration: none; border-block-end: 1px solid currentColor; padding-block-end: 0.05rem; transition: opacity 180ms ease; } .faq-accordion__contact-link:hover { opacity: 0.7; } .faq-accordion__contact-link span { display: inline-block; margin-inline-start: 0.3rem; transition: transform 220ms ease; } .faq-accordion__contact-link:hover span { transform: translateX(2px); } .faq-accordion__list { list-style: none; margin: 0; padding: 0; } .faq-accordion__item + .faq-accordion__item { border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.12); } .faq-accordion__item:first-child { border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.12); } .faq-accordion__item:last-child { border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.12); } .faq-accordion__summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.5rem; cursor: pointer; user-select: none; } .faq-accordion__summary::-webkit-details-marker { display: none; } .faq-accordion__question { font-family: var(--font-body--family); font-size: clamp(1rem, 1.2vw, 1.0625rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; color: var(--color-foreground); } .faq-accordion__chevron { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; flex-shrink: 0; color: rgb(var(--color-foreground-rgb) / 0.55); transition: transform 220ms ease; } .faq-accordion__details[open] .faq-accordion__chevron { transform: rotate(180deg); color: var(--color-foreground); } .faq-accordion__answer { font-family: var(--font-body--family); font-size: 0.9375rem; line-height: 1.65; color: rgb(var(--color-foreground-rgb) / 0.7); padding-block: 0 1.75rem; max-width: 64ch; } .faq-accordion__answer :is(p, ul, ol) { margin-block: 0; } .faq-accordion__answer :is(p, ul, ol) + :is(p, ul, ol) { margin-block-start: 0.75rem; } @media (max-width: 989px) { .faq-accordion__inner { grid-template-columns: 1fr; } .faq-accordion__hero { position: static; } } @media (max-width: 749px) { .faq-accordion__inner { width: 100%; padding-inline: 1.25rem; } .faq-accordion__summary { padding-block: 1.25rem; } } /* ============================================================ CTA RESEARCH (sections/cta-research.liquid; dark card on light) ============================================================ */ .cta-research { padding-block: 112px; background: var(--color-background); } .cta-research__inner { width: 85%; margin-inline: auto; } .cta-research__card { position: relative; overflow: hidden; border-radius: 28px; background: linear-gradient(180deg, var(--dusk-deep) 0%, var(--dusk-mid) 62%, var(--dusk-violet) 100%); color: var(--dusk-fg); padding: clamp(3.5rem, 7.5vw, 6.5rem) clamp(1.5rem, 5vw, 4rem); border: 1px solid rgb(236 230 223 / 0.12); box-shadow: 0 24px 70px rgb(5 14 36 / 0.34); } .cta-research__glow { position: absolute; inset-inline: -10%; inset-block-end: -30%; height: 75%; background: radial-gradient(ellipse 70% 55% at 50% 50%, rgb(212 173 166 / 0.32) 0%, rgb(193 144 132 / 0.18) 28%, rgb(107 95 138 / 0.10) 55%, transparent 78%); pointer-events: none; z-index: 0; } .cta-research__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 44rem; margin-inline: auto; } .cta-research__eyebrow { font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--horizon); margin: 0 0 2rem; } .cta-research__heading { font-family: var(--font-heading--family); font-size: clamp(2.25rem, 4.5vw, 3.75rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.025em; color: var(--dusk-fg); margin: 0; } .cta-research__subhead { font-family: var(--font-body--family); font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); line-height: 1.55; color: rgb(236 230 223 / 0.72); max-width: 40ch; margin: 1.5rem 0 0; } .cta-research__buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 2.5rem; } .cta-research__btn { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.95rem 1.5rem; border-radius: var(--style-border-radius-buttons-primary); font-family: var(--font-body--family); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.005em; text-decoration: none; transition: background 180ms ease, color 180ms ease, border-color 180ms ease, opacity 180ms ease; } .cta-research__btn--primary { background: var(--dusk-fg); color: var(--dusk-deep); border: 1px solid var(--dusk-fg); } .cta-research__btn--primary:hover { background: #fff; border-color: #fff; } .cta-research__btn--secondary { background: transparent; color: var(--dusk-fg); border: 1px solid rgb(236 230 223 / 0.32); } .cta-research__btn--secondary:hover { color: var(--horizon); border-color: var(--horizon); background: rgb(212 173 166 / 0.06); } .cta-research__btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; color: var(--horizon); } .cta-research__btn-icon svg { width: 100%; height: 100%; } .cta-research__badges { list-style: none; margin: 3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 2rem; } .cta-research__badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body--family); font-size: 0.8125rem; line-height: 1.25; color: rgb(236 230 223 / 0.78); } .cta-research__badge-icon { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; color: var(--horizon); opacity: 0.85; } .cta-research__badge-icon svg { width: 100%; height: 100%; } @media (max-width: 749px) { .cta-research__inner { width: 100%; padding-inline: 1.25rem; } .cta-research__card { border-radius: 20px; padding: 3.25rem 1.5rem; } .cta-research__buttons { flex-direction: column; align-items: stretch; width: 100%; max-width: 18rem; } .cta-research__btn { justify-content: center; padding: 1rem 1.5rem; } .cta-research__badges { display: grid; grid-template-columns: max-content; justify-content: center; gap: 0.9rem 1.5rem; margin-block-start: 2.25rem; } .cta-research__badge { display: grid; grid-template-columns: 1rem auto; justify-content: start; text-align: left; } } /* ============================================================ NEWSLETTER (sections/newsletter-research.liquid) ============================================================ */ .newsletter-research { padding-block: 56px 72px; background: var(--color-background); } .newsletter-research__inner { width: 85%; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: clamp(1.5rem, 4vw, 3.5rem); row-gap: 1.5rem; align-items: center; } .newsletter-research__eyebrow { font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.55); margin: 0 0 0.875rem; } .newsletter-research__heading { font-family: var(--font-heading--family); font-size: clamp(1.5rem, 2.8vw, 2.125rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--color-foreground-heading); margin: 0; max-width: 18ch; } .newsletter-research__body { font-family: var(--font-body--family); font-size: 0.875rem; line-height: 1.55; color: rgb(var(--color-foreground-rgb) / 0.65); max-width: 42ch; margin: 0.875rem 0 0; } .newsletter-research__form { display: flex; flex-direction: column; gap: 0.625rem; width: 100%; } .newsletter-research__field { display: flex; align-items: center; gap: 0.375rem; width: 100%; padding: 0.25rem 0.25rem 0.25rem 1rem; border-radius: var(--style-border-radius-buttons-primary); background: var(--color-background); border: 1px solid rgb(var(--color-foreground-rgb) / 0.14); transition: border-color 180ms ease, box-shadow 180ms ease; } .newsletter-research__field:focus-within { border-color: rgb(var(--color-foreground-rgb) / 0.6); box-shadow: 0 0 0 4px rgb(var(--color-foreground-rgb) / 0.04); } .newsletter-research__input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-family: var(--font-body--family); font-size: 0.875rem; color: var(--color-foreground); padding-block: 0.55rem; } .newsletter-research__input::placeholder { color: rgb(var(--color-foreground-rgb) / 0.45); } .newsletter-research__submit { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.675rem 1.125rem; border: 0; border-radius: var(--style-border-radius-buttons-primary); background: var(--color-foreground); color: var(--color-background); font-family: var(--font-body--family); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; transition: opacity 180ms ease; } .newsletter-research__submit:hover { opacity: 0.85; } .newsletter-research__reassurance { font-family: var(--font-body--family); font-size: 0.8125rem; line-height: 1.5; color: rgb(var(--color-foreground-rgb) / 0.5); margin: 0.5rem 0 0 1.25rem; } @media (max-width: 989px) { .newsletter-research__inner { grid-template-columns: 1fr; row-gap: 1.75rem; } } @media (max-width: 749px) { .newsletter-research__inner { width: 100%; padding-inline: 1.25rem; } .newsletter-research__field { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.625rem; } .newsletter-research__submit { justify-content: center; padding: 0.875rem 1.125rem; } .newsletter-research__reassurance { margin-inline: 0.25rem; } } /* ============================================================ FOOTER (dark, scheme-2) ============================================================ */ .site-footer { background: #121212; color: var(--dusk-fg); } .site-footer__top { width: 90%; max-width: 1600px; margin-inline: auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 3rem; padding-block: 80px 56px; } .site-footer__brand img { height: 34px; width: auto; display: block; margin-block-end: 1.25rem; } .site-footer__tagline { font-family: var(--font-body--family); font-size: 0.9375rem; line-height: 1.6; color: rgb(236 230 223 / 0.66); max-width: 34ch; margin: 0 0 1.75rem; } .site-footer__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-end: 1.5rem; } .site-footer__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; border-radius: var(--style-border-radius-buttons-primary); font-family: var(--font-body--family); font-size: 0.8125rem; font-weight: 500; text-decoration: none; transition: opacity 160ms ease, background 160ms ease; } .site-footer__cta--primary { background: var(--dusk-fg); color: #121212; } .site-footer__cta--primary:hover { opacity: 0.88; } .site-footer__cta--ghost { border: 1px solid rgb(236 230 223 / 0.28); color: var(--dusk-fg); } .site-footer__cta--ghost:hover { border-color: var(--dusk-fg); } .site-footer__social { display: flex; gap: 1rem; } .site-footer__social a { display: inline-flex; align-items: center; justify-content: center; color: rgb(236 230 223 / 0.7); transition: color 160ms ease, transform 160ms ease; } .site-footer__social a:hover { color: var(--dusk-fg); transform: translateY(-1px); } .site-footer__social svg { width: 20px; height: 20px; display: block; } .site-footer__col h2 { font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(236 230 223 / 0.5); margin: 0 0 1.25rem; } .site-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .site-footer__menu a { color: rgb(236 230 223 / 0.78); text-decoration: none; font-family: var(--font-body--family); font-size: 0.9375rem; transition: color 160ms ease; } .site-footer__menu a:hover { color: var(--dusk-fg); } .site-footer__contact p { margin: 0 0 0.6rem; font-family: var(--font-body--family); font-size: 0.9375rem; color: rgb(236 230 223 / 0.78); line-height: 1.5; } .site-footer__contact a { color: inherit; } .site-footer__bottom { border-block-start: 1px solid rgb(236 230 223 / 0.12); } .site-footer__bottom-inner { width: 90%; max-width: 1600px; margin-inline: auto; padding-block: 28px 40px; display: flex; flex-direction: column; gap: 1rem; } .site-footer__disclaimer { font-family: var(--font-body--family); font-size: 0.75rem; line-height: 1.6; color: rgb(236 230 223 / 0.45); margin: 0; max-width: 110ch; } .site-footer__copy { font-family: var(--font-mono--family); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(236 230 223 / 0.4); margin: 0; } @media (max-width: 989px) { .site-footer__top { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; } .site-footer__brand { grid-column: 1 / -1; } } @media (max-width: 560px) { .site-footer__top { grid-template-columns: 1fr; } } /* ============================================================ SHOP / COLLECTION ARCHIVE ============================================================ */ .shop-page { background: var(--color-background); padding-block: 56px 96px; } .shop-page__head { width: 90%; max-width: 1704px; margin-inline: auto; text-align: left; margin-block-end: 2rem; } .shop-page__eyebrow { font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.5); margin: 0 0 1rem; } .shop-page__title { font-family: var(--font-heading--family); font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.02; color: var(--color-foreground-heading); margin: 0; } .shop-page__sub { font-family: var(--font-body--family); font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); line-height: 1.55; color: rgb(var(--color-foreground-rgb) / 0.62); max-width: 56ch; margin: 1rem 0 0; } .shop-page__inner { width: 90%; max-width: 1704px; margin-inline: auto; } .shop-page__inner ul.products { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 36px 20px; list-style: none; margin: 0; padding: 0; } .shop-page__empty { text-align: center; font-family: var(--font-body--family); color: rgb(var(--color-foreground-rgb) / 0.6); } .woocommerce-pagination { margin-block-start: 3rem; text-align: center; } .woocommerce-pagination ul { display: inline-flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; } .woocommerce-pagination a, .woocommerce-pagination span { display: inline-flex; min-width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid rgb(var(--color-foreground-rgb) / 0.15); border-radius: 8px; text-decoration: none; font-family: var(--font-mono--family); font-size: 0.8125rem; color: var(--color-foreground); } .woocommerce-pagination .current { background: var(--color-foreground); color: var(--color-background); border-color: var(--color-foreground); } @media (max-width: 1280px) { .shop-page__inner ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 989px) { .shop-page__inner ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .shop-page__inner ul.products { grid-template-columns: 1fr; } } /* ============================================================ ORDER CONFIRMATION ============================================================ */ .woocommerce-order-received .simms-section { padding-block: 56px 96px; background: #fbfbfa; } body.woocommerce-order-received { overflow-x: hidden; } .woocommerce-order-received .simms-rail { width: min(92%, 1160px); } .woocommerce-order-received .simms-entry > h1 { display: none; } .woocommerce-order-received .simms-entry__content { margin: 0; } .simms-order-confirmation { --confirmation-accent: #2b8d85; --confirmation-accent-soft: rgb(43 141 133 / 0.1); --confirmation-border: rgb(var(--color-foreground-rgb) / 0.12); --confirmation-muted: rgb(var(--color-foreground-rgb) / 0.58); display: grid; gap: 24px; color: var(--color-foreground); } .simms-order-confirmation :where(h1, h2, h3, p, dl, dd) { margin: 0; } .simms-order-confirmation__hero, .simms-order-confirmation__panel { display: grid; justify-items: center; gap: 18px; padding: 46px 40px; border: 1px solid rgb(43 141 133 / 0.42); border-radius: 8px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, rgb(43 141 133 / 0.08), transparent) border-box; text-align: center; } .simms-order-confirmation__hero--compact { max-width: 780px; margin-inline: auto; } .simms-order-confirmation__panel--failed { border-color: rgb(188 52 52 / 0.4); } .simms-order-confirmation__status-icon { --icon-stroke-width: 2.25; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 999px; background: var(--color-foreground); color: var(--color-background); } .simms-order-confirmation__panel--failed .simms-order-confirmation__status-icon { background: #bc3434; } .simms-order-confirmation__status-icon svg { width: 24px; height: 24px; } .simms-order-confirmation__eyebrow { color: var(--confirmation-accent); font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; line-height: 1.25; text-transform: uppercase; } .simms-order-confirmation h1 { max-width: 12ch; color: var(--color-foreground-heading); font-family: var(--font-heading--family); font-size: 4rem; font-weight: 500; letter-spacing: 0; line-height: 0.98; } .simms-order-confirmation__hero > p:not(.simms-order-confirmation__eyebrow), .simms-order-confirmation__panel > p:not(.simms-order-confirmation__eyebrow) { max-width: 58ch; color: var(--confirmation-muted); font-size: 1.0625rem; line-height: 1.55; } .simms-order-confirmation__thanks { color: var(--color-foreground) !important; font-weight: 600; } .simms-order-confirmation__overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .simms-order-confirmation__overview > div, .simms-order-confirmation__detail-card { min-width: 0; border: 1px solid var(--confirmation-border); border-radius: 8px; background: #fff; } .simms-order-confirmation__overview > div { padding: 18px; } .simms-order-confirmation dt { color: var(--confirmation-muted); font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.25; text-transform: uppercase; } .simms-order-confirmation dd { margin-block-start: 8px; color: var(--color-foreground); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; } .simms-order-confirmation__section { display: grid; gap: 24px; padding-block: 24px; } .simms-order-confirmation__summary { padding: 32px; border: 1px solid var(--confirmation-border); border-radius: 8px; background: #fff; } .simms-order-confirmation__section-head { display: grid; justify-items: center; gap: 10px; text-align: center; } .simms-order-confirmation__section-head h2 { color: var(--color-foreground-heading); font-family: var(--font-heading--family); font-size: 2rem; font-weight: 500; letter-spacing: 0; line-height: 1.08; } .simms-order-confirmation__items { display: grid; gap: 14px; } .simms-order-confirmation__item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px; border: 1px solid rgb(var(--color-foreground-rgb) / 0.08); border-radius: 8px; background: #fbfbfa; } .simms-order-confirmation__item-media { display: block; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 6px; background: rgb(var(--color-foreground-rgb) / 0.04); } .simms-order-confirmation__product-image, .simms-order-confirmation__item-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .simms-order-confirmation__item-body { display: grid; gap: 7px; min-width: 0; } .simms-order-confirmation__item h3 { color: var(--color-foreground-heading); font-family: var(--font-body--family); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; line-height: 1.25; } .simms-order-confirmation__item h3 a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .simms-order-confirmation__quantity, .simms-order-confirmation__item-meta { color: var(--confirmation-muted); font-size: 0.875rem; line-height: 1.45; } .simms-order-confirmation__item-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; } .simms-order-confirmation__item-meta span { color: var(--color-foreground); font-weight: 600; } .simms-order-confirmation__item-total { align-self: center; color: var(--color-foreground); font-size: 1.0625rem; line-height: 1.2; text-align: right; white-space: nowrap; } .simms-order-confirmation__purchase-note { padding: 14px 16px; border-radius: 8px; background: var(--confirmation-accent-soft); color: rgb(var(--color-foreground-rgb) / 0.72); font-size: 0.9375rem; } .simms-order-confirmation__totals { justify-self: end; width: min(100%, 520px); margin-block-start: 6px; padding-block-start: 22px; border-block-start: 1px solid var(--confirmation-border); } .simms-order-confirmation__totals h3 { margin-block-end: 12px; color: var(--color-foreground-heading); font-family: var(--font-heading--family); font-size: 1.5rem; font-weight: 500; letter-spacing: 0; line-height: 1.1; } .simms-order-confirmation__totals dl { display: grid; gap: 10px; } .simms-order-confirmation__totals dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } .simms-order-confirmation__totals dt { color: var(--confirmation-muted); font-family: var(--font-body--family); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; text-transform: none; } .simms-order-confirmation__totals dd { margin: 0; text-align: right; } .simms-order-confirmation__totals .is-total { margin-block-start: 8px; padding-block-start: 16px; border-block-start: 1px solid var(--confirmation-border); } .simms-order-confirmation__totals .is-total :where(dt, dd) { color: var(--confirmation-accent); font-size: 1.25rem; font-weight: 800; } .simms-order-confirmation__address-grid, .simms-order-confirmation__methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .simms-order-confirmation__detail-card { display: grid; gap: 12px; align-content: start; padding: 24px; } .simms-order-confirmation__detail-card h3 { color: var(--color-foreground-heading); font-family: var(--font-body--family); font-size: 1.0625rem; font-weight: 800; letter-spacing: 0; line-height: 1.25; } .simms-order-confirmation__detail-card p, .simms-order-confirmation__detail-card address { color: rgb(var(--color-foreground-rgb) / 0.72); font-size: 0.9375rem; font-style: normal; line-height: 1.55; } .simms-order-confirmation__detail-card address { display: grid; gap: 8px; } .simms-order-confirmation__detail-card address br { display: block; content: ""; margin-block: 2px; } .simms-order-confirmation__detail-icon { --icon-stroke-width: 2; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: var(--confirmation-accent-soft); color: var(--confirmation-accent); } .simms-order-confirmation__detail-icon svg { width: 19px; height: 19px; } .simms-order-confirmation__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .simms-order-confirmation__button, .simms-order-confirmation .order-again .button { min-height: 52px; border: 1px solid var(--color-foreground); border-radius: 999px; background: var(--color-foreground); color: var(--color-background); font-family: var(--font-body--family); font-size: 0.9375rem; font-weight: 700; line-height: 1.1; text-decoration: none; } .simms-order-confirmation__button:hover, .simms-order-confirmation .order-again .button:hover { opacity: 0.86; } .simms-order-confirmation__button--secondary { background: transparent; color: var(--color-foreground); } .simms-order-confirmation__additional, .simms-order-confirmation .woocommerce-order-downloads, .simms-order-confirmation .order-again { padding: 24px; border: 1px solid var(--confirmation-border); border-radius: 8px; background: #fff; } .simms-order-confirmation__additional :where(h2, h3), .simms-order-confirmation .woocommerce-order-downloads__title { margin-block: 0 14px; color: var(--color-foreground-heading); font-family: var(--font-heading--family); font-size: 1.5rem; font-weight: 500; letter-spacing: 0; line-height: 1.1; } .simms-order-confirmation__additional :where(p, ul, ol) { color: rgb(var(--color-foreground-rgb) / 0.7); font-size: 0.9375rem; line-height: 1.6; } .simms-order-confirmation .woocommerce-order-downloads table { width: 100%; border-collapse: collapse; } .simms-order-confirmation .woocommerce-order-downloads th, .simms-order-confirmation .woocommerce-order-downloads td { padding: 12px; border-block-start: 1px solid var(--confirmation-border); text-align: left; } @media (max-width: 860px) { .simms-order-confirmation__item { grid-template-columns: 78px minmax(0, 1fr); } .simms-order-confirmation__item-total { grid-column: 2; justify-self: start; text-align: left; } .simms-order-confirmation__address-grid, .simms-order-confirmation__methods { grid-template-columns: 1fr; } } @media (max-width: 620px) { .woocommerce-order-received .simms-section { padding: 28px 0 72px; } .woocommerce-order-received .simms-rail { width: calc(100% - 32px); max-width: 1160px; } .simms-order-confirmation { gap: 18px; } .simms-order-confirmation__hero, .simms-order-confirmation__panel { padding: 34px 20px; } .simms-order-confirmation h1 { max-width: 100%; font-size: 2.35rem; } .simms-order-confirmation__hero > p:not(.simms-order-confirmation__eyebrow), .simms-order-confirmation__panel > p:not(.simms-order-confirmation__eyebrow) { font-size: 1rem; } .simms-order-confirmation__summary { padding: 20px; } .simms-order-confirmation__overview { grid-template-columns: 1fr; } .simms-order-confirmation__section-head { justify-items: start; text-align: left; } .simms-order-confirmation__section-head h2 { font-size: 1.65rem; } .simms-order-confirmation__item { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 12px; } .simms-order-confirmation__totals { justify-self: stretch; } .simms-order-confirmation__totals dl > div { display: grid; grid-template-columns: 1fr; align-items: flex-start; gap: 4px; } .simms-order-confirmation__totals dd { max-width: 100%; overflow-wrap: anywhere; text-align: left; } .simms-order-confirmation__detail-card, .simms-order-confirmation__additional, .simms-order-confirmation .woocommerce-order-downloads, .simms-order-confirmation .order-again { padding: 20px; } .simms-order-confirmation__actions { align-items: stretch; flex-direction: column; } .simms-order-confirmation__button, .simms-order-confirmation .order-again .button { width: 100%; } } /* ============================================================ SEARCH RESULTS ============================================================ */ .search-page { padding-block: 40px 80px; background: var(--color-background); } .search-page__header { width: 90%; max-width: 1600px; margin-inline: auto; display: grid; gap: 1.25rem; align-items: start; } .search-page__title { max-width: 42rem; margin: 0; color: var(--color-foreground-heading); font-family: var(--font-heading--family); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; } .search-page__form { position: relative; display: flex; align-items: center; width: min(50vw, 42rem); min-width: min(100%, 20rem); border: 1px solid rgb(var(--color-foreground-rgb) / 0.14); border-radius: var(--inputs-border-radius); background: var(--color-background); } .search-page__form-icon { position: absolute; left: 1rem; display: inline-flex; width: 1rem; height: 1rem; color: rgb(var(--color-foreground-rgb) / 0.48); pointer-events: none; } .search-page__form-icon svg { width: 100%; height: 100%; } .search-page__form input { width: 100%; min-height: 3.25rem; border: 0; padding: 0.85rem 1rem 0.85rem 2.8rem; background: transparent; color: var(--color-foreground); font: inherit; } .search-page__form input:focus { outline: 0; } .search-page__form:focus-within { border-color: rgb(var(--color-foreground-rgb) / 0.42); box-shadow: 0 0 0 4px rgb(var(--color-foreground-rgb) / 0.04); } .search-page__form button { min-height: 2.6rem; margin-inline-end: 0.35rem; padding-inline: 1.1rem; border: 0; border-radius: calc(var(--inputs-border-radius) - 2px); background: var(--color-foreground); color: var(--color-background); font-family: var(--font-body--family); font-size: 0.875rem; font-weight: 500; cursor: pointer; } .search-page__no-results { max-width: 46rem; margin: 0; color: rgb(var(--color-foreground-rgb) / 0.62); font-family: var(--font-body--family); font-size: 0.95rem; line-height: 1.55; } .search-page__results { width: 90%; max-width: 1600px; margin: 40px auto 0; } .search-page__results ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; list-style: none; margin: 0; padding: 0; } .search-page__empty { color: rgb(var(--color-foreground-rgb) / 0.62); font-family: var(--font-body--family); } @media (max-width: 989px) { .search-page__form { width: min(100%, 42rem); } .search-page__results ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .search-page__header, .search-page__results { width: 100%; padding-inline: 1rem; } .search-page__form { min-width: 0; } .search-page__form button { display: none; } .search-page__results ul.products { grid-template-columns: 1fr; } } /* ============================================================ COLLECTIONS LIST ============================================================ */ .collections-page { padding-block: 48px; background: var(--color-background); } .collections-page__inner { width: 90%; max-width: 1600px; margin-inline: auto; } .collections-page__header { padding-block-end: 48px; } .collections-page__header h1 { margin: 0; color: var(--color-foreground-heading); font-family: var(--font-heading--family); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; } .collections-page__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; } .collections-page__card { position: relative; display: grid; gap: 8px; margin: 0; } .collections-page__link { position: absolute; inset: 0; z-index: 1; } .collections-page__image { overflow: hidden; aspect-ratio: 3 / 4; background: var(--simms-mist); } .collections-page__image img { display: block; width: 100%; height: 100%; object-fit: cover; } .collections-page__title { margin: 0; color: var(--color-foreground); font-family: var(--font-body--family); font-size: 1rem; line-height: 1.4; } @media (max-width: 749px) { .collections-page__inner { width: 100%; padding-inline: 1rem; } .collections-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================================ BLOG INDEX + ARTICLE ============================================================ */ .blog-page { padding-block: 0 48px; background: var(--color-background); } .blog-page__inner { width: 90%; max-width: 1100px; margin-inline: auto; } .blog-page__header { padding-block: 48px; } .blog-page__header h1, .blog-article__header h1 { margin: 0; color: var(--color-foreground-heading); font-family: var(--font-heading--family); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; } .blog-page__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 36px; } .blog-page__card { grid-column: span 3; border: 1px solid rgb(var(--color-foreground-rgb) / 0.2); padding: 0 1rem 1rem; } .blog-page__card:has(.blog-page__card-image) { border: 0; padding: 0; } .blog-page__card-link { display: grid; gap: 0.65rem; color: var(--color-foreground); text-decoration: none; } .blog-page__card-image { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--simms-mist); } .blog-page__card-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .blog-page__card-title { color: var(--color-foreground-heading); font-family: var(--font-heading--family); font-size: 1.25rem; line-height: 1.2; } .blog-page__card-date, .blog-article__header time { color: rgb(var(--color-foreground-rgb) / 0.55); font-family: var(--font-body--family); font-size: 0.9rem; } .blog-article { padding-block: 40px 80px; background: var(--color-background); } .blog-article__header, .blog-article__image, .blog-article__content { width: 90%; max-width: 900px; margin-inline: auto; } .blog-article__header { display: grid; gap: 1rem; text-align: center; } .blog-article__image { overflow: hidden; aspect-ratio: 16 / 9; margin-block-start: 32px; } .blog-article__image img { width: 100%; height: 100%; object-fit: cover; } .blog-article__content { margin-block-start: 32px; color: rgb(var(--color-foreground-rgb) / 0.75); font-family: var(--font-body--family); font-size: 1rem; line-height: 1.7; } @media (max-width: 749px) { .blog-page__inner, .blog-article__header, .blog-article__image, .blog-article__content { width: 100%; padding-inline: 1rem; } .blog-page__grid { grid-template-columns: 1fr; } .blog-page__card { grid-column: auto; } } /* ============================================================ 404 ============================================================ */ .not-found-page { display: grid; place-items: center; min-height: 360px; padding-block: max(20px, 100px); background: var(--color-background); text-align: center; } .not-found-page__content { display: grid; justify-items: center; gap: 20px; width: 90%; max-width: 760px; } .not-found-page__content h1 { margin: 0; color: var(--color-foreground-heading); font-family: var(--font-heading--family); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; } .not-found-page__content p { margin: 0 0 16px; color: rgb(var(--color-foreground-rgb) / 0.62); font-family: var(--font-body--family); font-size: 1rem; line-height: 1.55; } .not-found-page__button { width: fit-content; } .not-found-products { padding-block: 48px; background: var(--color-background); } .not-found-products__inner { width: 90%; max-width: 1600px; margin-inline: auto; } .not-found-products__header { margin-block-end: 36px; } .not-found-products__header h2 { margin: 0; color: var(--color-foreground-heading); font-family: var(--font-heading--family); font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; } .not-found-products ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 12px; list-style: none; margin: 0; padding: 0; } @media (max-width: 989px) { .not-found-products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 749px) { .not-found-products__inner { width: 100%; padding-inline: 1rem; } } /* ============================================================ PRODUCT (PDP) ============================================================ */ .pdp { padding-block: 48px 96px; } .pdp__main { width: 90%; max-width: 1500px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .pdp__gallery { position: relative; } .pdp__gallery .woocommerce-product-gallery__image, .pdp__gallery img { border-radius: 18px; overflow: hidden; display: block; width: 100%; height: auto; background: var(--simms-mist); } .pdp__gallery .flex-control-thumbs { display: flex; gap: 0.75rem; list-style: none; padding: 0; margin: 1rem 0 0; } .pdp__gallery .flex-control-thumbs img { border-radius: 10px; cursor: pointer; } .onsale { position: absolute; top: 1rem; left: 1rem; z-index: 2; background: var(--color-foreground); color: var(--color-background); font-family: var(--font-mono--family); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.7rem; border-radius: 999px; } .pdp__details { position: sticky; top: 6rem; } .pdp__eyebrow { font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.5); margin: 0 0 1rem; } .pdp__title { font-family: var(--font-heading--family); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; color: var(--color-foreground-heading); margin: 0 0 1.25rem; } .pdp__price { font-family: var(--font-heading--family); font-size: 1.75rem; font-weight: 500; color: var(--color-foreground); margin: 0 0 1.5rem; } .pdp__price-tba { font-family: var(--font-mono--family); font-size: 0.875rem; letter-spacing: 0.04em; color: rgb(var(--color-foreground-rgb) / 0.5); } .pdp__price del { color: rgb(var(--color-foreground-rgb) / 0.4); font-weight: 400; margin-inline-end: 0.5rem; } .pdp__price ins { text-decoration: none; } .pdp__excerpt { font-family: var(--font-body--family); font-size: 1rem; line-height: 1.6; color: rgb(var(--color-foreground-rgb) / 0.7); margin: 0 0 1.75rem; } .pdp__cart { margin: 0 0 2rem; } .pdp__cart form.cart { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0; } .pdp__cart .quantity .qty { width: 72px; height: 52px; text-align: center; border: 1px solid rgb(var(--color-foreground-rgb) / 0.2); border-radius: var(--style-border-radius-buttons-primary); font-family: var(--font-body--family); font-size: 1rem; } .pdp__cart .button, .pdp__cart .single_add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding-inline: 2rem; border: 0; border-radius: var(--style-border-radius-buttons-primary); background: var(--color-foreground); color: var(--color-background); font-family: var(--font-body--family); font-size: 0.9375rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: opacity 160ms ease; } .pdp__cart .button:hover { opacity: 0.88; } .pdp__cart .variations { width: 100%; border-collapse: collapse; margin: 0 0 1rem; } .pdp__cart .variations td, .pdp__cart .variations th { padding: 0.4rem 0; text-align: left; vertical-align: middle; } .pdp__cart .variations label { font-family: var(--font-mono--family); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.6); } .pdp__cart select { min-height: 46px; border: 1px solid rgb(var(--color-foreground-rgb) / 0.2); border-radius: var(--inputs-border-radius); padding-inline: 0.75rem; font-family: var(--font-body--family); background: var(--color-background); } .pdp__trust { list-style: none; margin: 0; padding: 1.5rem 0 0; border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.1); display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1.25rem; } .pdp__trust li { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body--family); font-size: 0.875rem; color: rgb(var(--color-foreground-rgb) / 0.75); } .pdp__trust svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-foreground); } .pdp__research { width: 90%; max-width: 1500px; margin: 4rem auto 0; } .product-research-details { display: grid; gap: 3rem; max-width: 60rem; } .product-research-details__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.55); margin: 0 0 1.25rem; } .product-research-details__eyebrow-icon { display: inline-flex; width: 16px; height: 16px; } .product-research-details__eyebrow-icon svg { width: 100%; height: 100%; } .product-research-details__lead { font-family: var(--font-body--family); font-size: 1.125rem; line-height: 1.6; color: var(--color-foreground); } .product-research-details__lead p:first-child { margin-top: 0; } .product-research-details__body { font-family: var(--font-body--family); font-size: 1rem; line-height: 1.65; color: rgb(var(--color-foreground-rgb) / 0.7); } .product-research-details__spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12); } .product-research-details__spec { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.12); } .product-research-details__spec:nth-child(odd) { padding-right: 1.5rem; border-right: 1px solid rgb(var(--color-foreground-rgb) / 0.12); } .product-research-details__spec:nth-child(even) { padding-left: 1.5rem; } .product-research-details__spec dt { font-family: var(--font-mono--family); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.5); margin: 0; } .product-research-details__spec dd { font-family: var(--font-mono--family); font-size: 0.8125rem; color: var(--color-foreground); margin: 0; text-align: right; } @media (max-width: 989px) { .pdp__main { grid-template-columns: 1fr; gap: 2rem; } .pdp__details { position: static; } } @media (max-width: 560px) { .pdp__trust { grid-template-columns: 1fr; } .product-research-details__spec-grid { grid-template-columns: 1fr; } .product-research-details__spec:nth-child(odd) { padding-right: 0; border-right: none; } .product-research-details__spec:nth-child(even) { padding-left: 0; } } /* ============================================================ WOOCOMMERCE CART + CHECKOUT (block-based) — brand overrides Blocks ship their own base CSS; we layer Simms brand on top. ============================================================ */ .woocommerce-cart main, .woocommerce-checkout main, .woocommerce-account main { padding-block: 40px 96px; } .wc-block-cart, .wc-block-checkout { width: 92%; max-width: 1240px; margin-inline: auto; font-family: var(--font-body--family); color: var(--color-foreground); } /* Section + summary titles → heading font */ .wc-block-components-title, .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title { font-family: var(--font-heading--family) !important; font-weight: 500 !important; letter-spacing: -0.01em; } /* Primary actions (proceed to checkout, place order, contained buttons) → brand ink */ .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-components-button.contained { background-color: var(--color-foreground) !important; color: var(--color-background) !important; border-radius: var(--style-border-radius-buttons-primary) !important; font-family: var(--font-body--family) !important; font-weight: 500 !important; transition: opacity 160ms ease; } .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover, .wc-block-components-button.contained:hover { opacity: 0.88; } /* Totals figures in mono for the lab texture */ .wc-block-components-totals-item__value, .wc-block-components-order-summary-item__total-price { font-family: var(--font-mono--family); } /* Links + selected accents → brand ink */ .wc-block-cart a, .wc-block-checkout a, .wc-block-components-checkout-step__title { color: var(--color-foreground); } /* Form fields → brand radius + focus */ .wc-block-components-text-input input, .wc-block-checkout input.input-text, .wc-block-components-text-input .input-text { border-radius: var(--inputs-border-radius) !important; font-family: var(--font-body--family) !important; } .wc-block-components-text-input.is-active label, .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title { color: var(--color-foreground); } /* Notices */ .wc-block-components-notice-banner { border-radius: 10px; font-family: var(--font-body--family); } /* Empty-cart state */ .wc-block-cart__empty-cart__title, .cart-empty { font-family: var(--font-heading--family); } /* ============================================================ LAB RESULTS — hero icon enhancements (1:1 with source) ============================================================ */ .simms-lab-page__hero .simms-search { position: relative; display: block; } .simms-search__icon { position: absolute; left: 20px; top: calc(50% + 4px); transform: translateY(-50%); width: 18px; height: 18px; color: rgb(var(--color-foreground-rgb) / 0.45); pointer-events: none; } .simms-search__icon svg { width: 100%; height: 100%; } .simms-lab-page__hero .simms-search input { padding-left: 52px; } .simms-lab-stats div { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .simms-lab-stats__icon { display: inline-flex; width: 22px; height: 22px; color: var(--color-foreground); opacity: 0.8; margin-block-end: 0.35rem; } .simms-lab-stats__icon svg { width: 100%; height: 100%; } /* ============================================================ FAQ PAGE (categorized accordions) ============================================================ */ .faq-page { background: var(--color-background); padding-block: 56px 96px; } .faq-page__hero { width: 85%; max-width: 1100px; margin: 0 auto 3.5rem; text-align: center; } .faq-page__eyebrow { font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.5); margin: 0 0 1rem; } .faq-page__heading { font-family: var(--font-heading--family); font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; color: var(--color-foreground-heading); margin: 0; } .faq-page__groups { width: 85%; max-width: 1100px; margin-inline: auto; display: grid; gap: 3.5rem; } .faq-page__group-title { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-heading--family); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -0.01em; color: var(--color-foreground-heading); margin: 0 0 0.75rem; } .faq-page__group-icon { display: inline-flex; width: 22px; height: 22px; color: var(--color-foreground); } .faq-page__group-icon svg { width: 100%; height: 100%; } @media (max-width: 749px) { .faq-page__hero, .faq-page__groups { width: 100%; padding-inline: 1.25rem; } } /* ============================================================ CONTACT PAGE ============================================================ */ .contact-page { padding-block-start: var(--contact-page-padding-block-start, 48px); padding-block-end: var(--contact-page-padding-block-end, 120px); background: radial-gradient(circle at 15% 10%, rgb(var(--color-foreground-rgb) / 0.035), transparent 28rem), rgb(var(--color-background-rgb)); } .contact-page, .contact-page * { box-sizing: border-box; } .contact-page__inner { display: grid; gap: clamp(2rem, 4vw, 3.8rem); width: 85%; margin-inline: auto; } .contact-page__header { max-width: 50rem; } .contact-page__eyebrow, .contact-page__label, .contact-page__field label { margin: 0; color: rgb(var(--color-foreground-rgb) / 0.48); font-family: var(--font-mono--family); font-size: 0.75rem; font-weight: var(--font-mono--weight); letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; } .contact-page__title { max-width: 40rem; margin: 0.85rem 0 0; font-size: clamp(2rem, 3.6vw, 2.75rem); letter-spacing: -0.045em; line-height: 1; } .contact-page__intro { max-width: 48rem; margin-block-start: 1.05rem; color: rgb(var(--color-foreground-rgb) / 0.62); font-size: clamp(1rem, 1.45vw, 1.18rem); line-height: 1.45; } .contact-page__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.4rem); align-items: start; } .contact-page__details { display: grid; gap: 1rem; } .contact-page__card, .contact-page__form-panel { border: 1px solid rgb(var(--color-foreground-rgb) / 0.12); border-radius: 18px; background: linear-gradient(rgb(var(--color-foreground-rgb) / 0.028), rgb(var(--color-foreground-rgb) / 0.028)), rgb(var(--color-background-rgb)); } .contact-page__card { padding: 1.15rem 1.25rem; } .contact-page__card--primary { border-color: rgb(var(--color-foreground-rgb) / 0.18); } .contact-page__card--contact { padding: 1.25rem; } .contact-page__contact-copy { margin: 0.65rem 0 0; color: rgb(var(--color-foreground-rgb) / 0.62); font-size: 0.95rem; line-height: 1.45; } .contact-page__contact-methods { display: grid; gap: 0.65rem; margin-block-start: 1rem; } .contact-page__contact-method { display: grid; gap: 0.18rem; padding: 0.85rem 0.95rem; border: 1px solid rgb(var(--color-foreground-rgb) / 0.1); border-radius: 12px; color: inherit; text-decoration: none; transition: border-color 160ms ease, background-color 160ms ease; } .contact-page__contact-method:hover { border-color: rgb(var(--color-foreground-rgb) / 0.22); background: rgb(var(--color-foreground-rgb) / 0.035); } .contact-page__method-label { color: rgb(var(--color-foreground-rgb) / 0.48); font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: var(--font-mono--weight); letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; } .contact-page__method-value { color: rgb(var(--color-foreground-rgb) / 0.9); font-size: 1.08rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; } .contact-page__method-note { color: rgb(var(--color-foreground-rgb) / 0.54); font-size: 0.875rem; line-height: 1.35; } .contact-page__value { display: block; margin-block-start: 0.45rem; color: rgb(var(--color-foreground-rgb) / 0.86); font-size: 1.15rem; font-weight: 500; line-height: 1.25; text-decoration: none; } .contact-page__value:hover { color: var(--color-foreground); text-decoration: underline; text-underline-offset: 0.2em; } .contact-page__meta { margin: 0.35rem 0 0; color: rgb(var(--color-foreground-rgb) / 0.54); font-size: 0.9375rem; line-height: 1.45; } .contact-page__form-panel { padding: clamp(1rem, 2vw, 1.35rem); } .contact-page__form-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-block-end: 1.25rem; } .contact-page__form-header p:last-child { margin: 0; color: rgb(var(--color-foreground-rgb) / 0.5); font-size: 0.875rem; } .contact-page__form { display: grid; gap: 1rem; } .contact-page__row { display: grid; grid-template-columns: 1fr; gap: 1rem; } .contact-page__field { display: grid; gap: 0.45rem; } .contact-page__field :is(input, select, textarea) { width: 100%; min-height: 3.3rem; padding: 0.85rem 1rem; border: 1px solid rgb(var(--color-foreground-rgb) / 0.14); border-radius: 14px; background: rgb(var(--color-background-rgb) / 0.62); color: var(--color-foreground); font: inherit; } .contact-page__field textarea { min-height: 16rem; resize: vertical; } .contact-page__field :is(input, select, textarea)::placeholder { color: rgb(var(--color-foreground-rgb) / 0.42); } .contact-page__field :is(input, select, textarea):focus { border-color: rgb(var(--color-foreground-rgb) / 0.46); outline: 2px solid rgb(var(--color-foreground-rgb) / 0.1); outline-offset: 2px; } .contact-page__submit { width: 100%; min-height: 3.35rem; margin-block-start: 0.2rem; border-radius: 999px; } .contact-page__message { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1rem; border-radius: 14px; font-size: 0.9375rem; } .contact-page__message--error { background: rgb(190 18 60 / 0.08); color: rgb(136 19 55); } .contact-page__message svg { width: 1rem; height: 1rem; flex: 0 0 auto; } .contact-page__confirmation { display: grid; grid-template-columns: auto 1fr; gap: 1rem; min-height: 23rem; padding: clamp(1.35rem, 3vw, 2rem); border: 1px solid rgb(0 122 70 / 0.28); border-radius: 14px; background: linear-gradient(rgb(0 155 87 / 0.08), rgb(0 155 87 / 0.08)), rgb(var(--color-background-rgb)); } .contact-page__confirmation:focus { outline: 2px solid rgb(0 122 70 / 0.32); outline-offset: 3px; } .contact-page__confirmation-icon { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 50%; background: #007a46; color: #fff; } .contact-page__confirmation-icon svg { width: 1rem; height: 1rem; } .contact-page__confirmation-title { margin: 0; color: rgb(var(--color-foreground-rgb) / 0.9); font-size: clamp(1.65rem, 3vw, 2.2rem); letter-spacing: 0; line-height: 1.05; } .contact-page__confirmation p { max-width: 29rem; margin: 0.7rem 0 0; color: rgb(var(--color-foreground-rgb) / 0.64); font-size: 1rem; line-height: 1.45; } .contact-page__confirmation-button { width: fit-content; min-height: 3rem; margin-block-start: 1.4rem; border-radius: 999px; } @media (max-width: 989px) { .contact-page__grid { grid-template-columns: 1fr; } } @media (max-width: 749px) { .contact-page__inner { width: 100%; } .contact-page__title { font-size: clamp(2.25rem, 11vw, 2.75rem); } .contact-page__row, .contact-page__form-header { display: grid; grid-template-columns: 1fr; } .contact-page__form-header { gap: 0.35rem; } .contact-page__confirmation { grid-template-columns: 1fr; min-height: 18rem; } } /* ============================================================ ABOUT / QUALITY PAGE ============================================================ */ .about-quality { padding-block-start: var(--about-quality-padding-block-start, 48px); padding-block-end: var(--about-quality-padding-block-end, 120px); } .about-quality, .about-quality * { box-sizing: border-box; } .about-quality__inner { width: 85%; margin-inline: auto; } .about-quality__eyebrow { font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.5); margin: 0 0 1rem 0; } .about-quality__hero { padding-block-end: 5rem; border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.1); margin-block-end: 5rem; } .about-quality__heading { font-family: var(--font-heading--family); font-size: clamp(2.25rem, 5vw, 4.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1.5rem 0; max-width: 18ch; } .about-quality__subhead { font-family: var(--font-body--family); font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.6; color: rgb(var(--color-foreground-rgb) / 0.65); max-width: 52ch; margin: 0; } .about-quality__diffs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgb(var(--color-foreground-rgb) / 0.1); border: 1px solid rgb(var(--color-foreground-rgb) / 0.1); border-radius: 16px; overflow: hidden; margin-block-end: 5rem; } .about-quality__diff { background: var(--color-background); padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 0.625rem; } .about-quality__diff-icon { display: inline-flex; align-items: center; justify-content: flex-start; width: 1.5rem; height: 1.5rem; color: var(--color-foreground); margin-block-end: 0.75rem; } .about-quality__diff-icon svg { width: 100%; height: 100%; } .about-quality__diff-eyebrow { font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.45); margin: 0; } .about-quality__diff-title { font-family: var(--font-heading--family); font-size: 1.1875rem; font-weight: 500; line-height: 1.2; margin: 0; } .about-quality__diff-body { font-family: var(--font-body--family); font-size: 0.9375rem; line-height: 1.6; color: rgb(var(--color-foreground-rgb) / 0.65); margin: 0; } .about-quality__section-header { margin-block-end: 3rem; } .about-quality__section-heading { font-family: var(--font-body--family); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: rgb(var(--color-foreground-rgb) / 0.85); } .about-quality__process { margin-block-end: 5rem; } .about-quality__steps { list-style: none; margin: 0; padding: 0; } .about-quality__step { display: flex; align-items: baseline; gap: 2rem; padding-block: 1.5rem; border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.1); } .about-quality__step:last-child { border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.1); } .about-quality__step-num { font-family: var(--font-mono--family); font-size: 0.875rem; font-weight: 500; color: rgb(var(--color-foreground-rgb) / 0.35); flex-shrink: 0; width: 2rem; } .about-quality__step-body { display: flex; flex-direction: column; gap: 0.375rem; } .about-quality__step-title { font-family: var(--font-heading--family); font-size: 1.0625rem; font-weight: 500; margin: 0; } .about-quality__step-desc { font-family: var(--font-body--family); font-size: 0.9375rem; line-height: 1.6; color: rgb(var(--color-foreground-rgb) / 0.6); margin: 0; max-width: 60ch; } .about-quality__commitments { margin-block-end: 5rem; } .about-quality__commitment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .about-quality__commitment { display: flex; gap: 1rem; align-items: flex-start; border: 1px solid rgb(var(--color-foreground-rgb) / 0.1); border-radius: 12px; padding: 1.5rem; } .about-quality__check { flex-shrink: 0; margin-top: 0.125rem; color: var(--color-foreground); opacity: 0.7; } .about-quality__commitment-title { font-family: var(--font-heading--family); font-size: 1rem; font-weight: 500; margin: 0 0 0.375rem 0; } .about-quality__commitment-body { font-family: var(--font-body--family); font-size: 0.9375rem; line-height: 1.6; color: rgb(var(--color-foreground-rgb) / 0.6); margin: 0; } .about-quality__cta { text-align: center; padding-block: 4rem; border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.1); } .about-quality__cta .about-quality__eyebrow { margin-block-end: 0.75rem; } .about-quality__cta-heading { font-family: var(--font-heading--family); font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 500; letter-spacing: -0.015em; margin: 0 0 2rem 0; } .about-quality__cta-buttons { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } .about-quality__btn { display: inline-block; font-family: var(--font-body--family); font-size: 0.9375rem; font-weight: 500; text-decoration: none; border-radius: 999px; padding: 0.75rem 2rem; transition: border-color 150ms ease, background 150ms ease, color 150ms ease; } .about-quality__btn--primary { background: var(--color-foreground); color: var(--color-background); border: 1px solid var(--color-foreground); } .about-quality__btn--primary:hover { background: transparent; color: var(--color-foreground); border-color: #e4f5ff; } .about-quality__btn--secondary { background: transparent; color: var(--color-foreground); border: 1px solid rgb(var(--color-foreground-rgb) / 0.25); } .about-quality__btn--secondary:hover { border-color: #e4f5ff; } @media (max-width: 749px) { .about-quality__inner { width: 100%; } .about-quality__heading { max-width: none; } .about-quality__diffs { grid-template-columns: repeat(2, 1fr); } .about-quality__commitment-grid { grid-template-columns: 1fr; } .about-quality__step { gap: 1.25rem; } } @media (max-width: 480px) { .about-quality__diffs { grid-template-columns: 1fr; } } /* ============================================================ PARTNERS PAGE ============================================================ */ .partners-page { padding-block-start: var(--partners-page-padding-block-start, 48px); padding-block-end: var(--partners-page-padding-block-end, 120px); background: radial-gradient(circle at 50% 0%, rgb(var(--color-foreground-rgb) / 0.035), transparent 28rem), rgb(var(--color-background-rgb)); } .partners-page, .partners-page * { box-sizing: border-box; } .partners-page__inner { width: 85%; margin-inline: auto; } .partners-page__hero { display: grid; justify-items: center; max-width: 48rem; min-height: clamp(22rem, 42vw, 33rem); margin-inline: auto; padding-block-start: 0; padding-block-end: clamp(3rem, 6vw, 5.5rem); text-align: center; } .partners-page__eyebrow, .partners-page__micro, .partners-page__stat span { font-family: var(--font-mono--family); font-weight: var(--font-mono--weight); letter-spacing: 0.12em; text-transform: uppercase; } .partners-page__eyebrow { margin: 0; color: rgb(var(--color-foreground-rgb) / 0.55); font-size: 0.6875rem; line-height: 1.2; } .partners-page__title { font-family: var(--font-heading--family); font-weight: 500; max-width: 42rem; margin: 1.2rem 0 0; font-size: clamp(2rem, 3.6vw, 2.75rem); letter-spacing: -0.015em; line-height: 1.05; } .partners-page__subhead { font-family: var(--font-body--family); max-width: 40rem; margin-block-start: 1.25rem; color: rgb(var(--color-foreground-rgb) / 0.55); font-size: 1rem; line-height: 1.5; } .partners-page__subhead p, .partners-page__cta-copy p { margin: 0; } .partners-page__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-block-start: 1.75rem; } .partners-page__button { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; min-width: 12.5rem; min-height: 3.6rem; border-radius: var(--style-border-radius-buttons-primary); background: var(--color-primary-button-background); color: var(--color-primary-button-text); white-space: nowrap; } .partners-page__button:hover { background: var(--color-primary-button-hover-background); border-color: var(--color-primary-button-hover-border); color: var(--color-primary-button-hover-text); } .partners-page__button span { flex: 0 0 auto; } .partners-page__secondary { color: rgb(var(--color-foreground-rgb) / 0.62); font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 0.28em; } .partners-page__secondary:hover { color: var(--color-foreground); } .partners-page__micro { margin: 1.4rem 0 0; color: rgb(var(--color-foreground-rgb) / 0.34); font-size: 0.6875rem; line-height: 1.2; } .partners-page__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid rgb(var(--color-foreground-rgb) / 0.1); } .partners-page__stat { display: grid; justify-items: center; gap: 0.6rem; padding: clamp(1.4rem, 3vw, 2.25rem) 1rem; text-align: center; } .partners-page__stat + .partners-page__stat { border-inline-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1); } .partners-page__stat p { margin: 0; color: var(--color-foreground); font-family: var(--font-heading--family); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1; letter-spacing: -0.01em; } .partners-page__stat span { color: rgb(var(--color-foreground-rgb) / 0.42); font-size: 0.6875rem; line-height: 1.2; } .partners-page__section { padding-block: clamp(3.5rem, 7vw, 6rem); border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.1); } .partners-page__section-title { font-family: var(--font-heading--family); font-weight: 500; max-width: 60rem; margin: 1rem auto 0; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.015em; line-height: 1.15; text-align: center; } .partners-page__section > .partners-page__eyebrow { text-align: center; } .partners-page__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.2rem); margin-block-start: clamp(2.2rem, 4.5vw, 3.75rem); } .partners-page__step { display: grid; gap: 0.75rem; padding-block-start: 1rem; border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1); } .partners-page__step-number { margin: 0; color: rgb(var(--color-foreground-rgb) / 0.18); font-family: var(--font-mono--family); font-size: clamp(2.8rem, 5vw, 4.5rem); line-height: 0.9; } .partners-page__step h3, .partners-page__card h3 { margin: 0; font-family: var(--font-body--family); font-weight: 600; color: rgb(var(--color-foreground-rgb) / 0.86); font-size: 1.0625rem; letter-spacing: -0.005em; line-height: 1.25; } .partners-page__step p:last-child, .partners-page__card p, .partners-page__faq-answer { margin: 0; font-family: var(--font-body--family); color: rgb(var(--color-foreground-rgb) / 0.66); font-size: 0.9375rem; line-height: 1.55; } .partners-page__benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-block-start: clamp(2.2rem, 4.5vw, 3.75rem); } .partners-page__card, .partners-page__final-cta { border: 1px solid rgb(var(--color-foreground-rgb) / 0.12); border-radius: 18px; background: linear-gradient(rgb(var(--color-foreground-rgb) / 0.028), rgb(var(--color-foreground-rgb) / 0.028)), rgb(var(--color-background-rgb)); } .partners-page__card { display: grid; gap: 1rem; min-height: 12rem; padding: clamp(1.25rem, 2.5vw, 1.8rem); } .partners-page__section--faq { border-block-end: 0; } .partners-page__faq { max-width: 58rem; margin: clamp(2.2rem, 4vw, 3.5rem) auto 0; } .partners-page__faq-item { border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1); } .partners-page__faq-item:last-child { border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.1); } .partners-page__faq summary { display: flex; gap: 1.1rem; padding-block: 1.45rem; color: rgb(var(--color-foreground-rgb) / 0.86); cursor: pointer; font-family: var(--font-body--family); font-weight: 500; font-size: 0.9375rem; letter-spacing: -0.005em; line-height: 1.4; list-style: none; } .partners-page__faq summary::-webkit-details-marker { display: none; } .partners-page__faq summary span { font-family: var(--font-mono--family); color: rgb(var(--color-foreground-rgb) / 0.42); transition: transform 180ms ease; } .partners-page__faq-item[open] summary span { transform: rotate(90deg); } .partners-page__faq-answer { max-width: 48rem; padding: 0 0 1.45rem 2rem; } .partners-page__final-cta { display: grid; justify-items: center; gap: 1.3rem; max-width: 58rem; margin: clamp(3.5rem, 7vw, 6rem) auto 0; padding: clamp(1.75rem, 4vw, 3rem); text-align: center; } .partners-page__final-cta h2 { max-width: 42rem; margin: 0; font-family: var(--font-heading--family); font-weight: 500; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.015em; line-height: 1.1; } .partners-page__cta-copy { font-family: var(--font-body--family); max-width: 38rem; color: rgb(var(--color-foreground-rgb) / 0.55); font-size: 1rem; line-height: 1.5; } @media (max-width: 989px) { .partners-page__steps, .partners-page__benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 749px) { .partners-page__inner { width: 100%; } .partners-page__hero { min-height: auto; padding-block-end: 4rem; } .partners-page__title { font-size: clamp(1.75rem, 6.5vw, 2.25rem); } .partners-page__stats, .partners-page__steps, .partners-page__benefits { grid-template-columns: 1fr; } .partners-page__stat + .partners-page__stat, .partners-page__stat:nth-child(3) { border-inline-start: 0; border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1); } .partners-page__actions { align-items: center; flex-direction: column; width: 100%; } } /* ============================================================ AFFILIATE APPLICATION PAGE ============================================================ */ .affiliate-application-page { padding-block-start: var(--affiliate-application-padding-block-start, 48px); padding-block-end: var(--affiliate-application-padding-block-end, 120px); background: radial-gradient(circle at 50% 0%, rgb(var(--color-foreground-rgb) / 0.026), transparent 30rem), rgb(var(--color-background-rgb)); } .affiliate-application-page, .affiliate-application-page * { box-sizing: border-box; } .affiliate-application-page__inner { width: 85%; max-width: 40rem; margin-inline: auto; } .affiliate-application-page__back { display: inline-flex; align-items: center; gap: 0.45rem; margin-block-end: clamp(1.5rem, 3vw, 2.4rem); color: rgb(var(--color-foreground-rgb) / 0.56); font-size: 0.9375rem; line-height: 1.3; text-decoration: none; } .affiliate-application-page__back:hover { color: var(--color-foreground); } .affiliate-application-page__eyebrow, .affiliate-application-page__field label { margin: 0; color: rgb(var(--color-foreground-rgb) / 0.62); font-family: var(--font-body--family); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; line-height: 1.25; } .affiliate-application-page__eyebrow { color: rgb(var(--color-foreground-rgb) / 0.48); font-family: var(--font-mono--family); font-size: 0.75rem; font-weight: var(--font-mono--weight); letter-spacing: 0.16em; text-transform: uppercase; } .affiliate-application-page__title { margin: 0.65rem 0 0; color: var(--color-foreground); font-family: var(--font-heading--family); font-size: clamp(2rem, 3.4vw, 2.4rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.05; } .affiliate-application-page__intro { max-width: 34rem; margin-block-start: 0.75rem; color: rgb(var(--color-foreground-rgb) / 0.58); font-size: 1.0625rem; line-height: 1.45; } .affiliate-application-page__intro p { margin: 0; } .affiliate-application-page__form { display: grid; gap: 1.1rem; margin-block-start: clamp(1.8rem, 3vw, 2.4rem); } .affiliate-application-page__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .affiliate-application-page__field { display: grid; gap: 0.45rem; } .affiliate-application-page__field :is(input, select, textarea) { width: 100%; min-height: 3.4rem; padding: 0.85rem 1rem; border: 1px solid rgb(var(--color-foreground-rgb) / 0.12); border-radius: 12px; background: rgb(var(--color-background-rgb) / 0.74); box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / 0.03); color: var(--color-foreground); font: inherit; } .affiliate-application-page__field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgb(var(--color-foreground-rgb) / 0.5) 50%), linear-gradient(135deg, rgb(var(--color-foreground-rgb) / 0.5) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.95rem) 50%; background-size: 0.35rem 0.35rem, 0.35rem 0.35rem; background-repeat: no-repeat; } .affiliate-application-page__field textarea { min-height: 7rem; resize: vertical; } .affiliate-application-page__field :is(input, select, textarea)::placeholder { color: rgb(var(--color-foreground-rgb) / 0.36); } .affiliate-application-page__field :is(input, select, textarea):focus { border-color: rgb(var(--color-foreground-rgb) / 0.42); outline: 2px solid rgb(var(--color-foreground-rgb) / 0.1); outline-offset: 2px; } .affiliate-application-page__submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; min-height: 3.55rem; margin-block-start: 0.35rem; border-radius: 12px; background: var(--color-primary-button-background); color: var(--color-primary-button-text); } .affiliate-application-page__submit:hover { background: var(--color-primary-button-hover-background); border-color: var(--color-primary-button-hover-border); color: var(--color-primary-button-hover-text); } .affiliate-application-page__submit span { display: inline-flex; } .affiliate-application-page__submit svg { width: 1.1rem; height: 1.1rem; --icon-stroke-width: 2; transform: rotate(-35deg); } .affiliate-application-page__message { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1rem; border-radius: 12px; font-size: 0.9375rem; } .affiliate-application-page__message--error { background: rgb(190 18 60 / 0.08); color: rgb(136 19 55); } .affiliate-application-page__message svg { width: 1rem; height: 1rem; flex: 0 0 auto; } .affiliate-application-page__confirmation { display: grid; grid-template-columns: auto 1fr; gap: 1rem; margin-block-start: clamp(1.8rem, 3vw, 2.4rem); padding: clamp(1.35rem, 3vw, 2rem); border: 1px solid rgb(0 122 70 / 0.28); border-radius: 14px; background: linear-gradient(rgb(0 155 87 / 0.08), rgb(0 155 87 / 0.08)), rgb(var(--color-background-rgb)); } .affiliate-application-page__confirmation:focus { outline: 2px solid rgb(0 122 70 / 0.32); outline-offset: 3px; } .affiliate-application-page__confirmation-icon { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 50%; background: #007a46; color: #fff; } .affiliate-application-page__confirmation-icon svg { width: 1rem; height: 1rem; } .affiliate-application-page__confirmation-title { margin: 0; color: rgb(var(--color-foreground-rgb) / 0.9); font-size: clamp(1.65rem, 3vw, 2.2rem); letter-spacing: 0; line-height: 1.05; } .affiliate-application-page__confirmation p { max-width: 29rem; margin: 0.7rem 0 0; color: rgb(var(--color-foreground-rgb) / 0.64); font-size: 1rem; line-height: 1.45; } .affiliate-application-page__confirmation-button { width: fit-content; min-height: 3rem; margin-block-start: 1.4rem; border-radius: 999px; } @media (max-width: 749px) { .affiliate-application-page__inner { width: 100%; } .affiliate-application-page__row { grid-template-columns: 1fr; } .affiliate-application-page__title { font-size: clamp(2rem, 10vw, 2.5rem); } .affiliate-application-page__confirmation { grid-template-columns: 1fr; } } /* ============================================================ POLICY PAGES ============================================================ */ .simms-policy-page { padding-block-start: 40px; padding-block-end: 80px; background: rgb(var(--color-background-rgb)); } .simms-policy-page, .simms-policy-page * { box-sizing: border-box; } .simms-policy-page .section-content-wrapper { max-width: min(46rem, calc(100% - 2rem)); margin-inline: auto; gap: 0; } .simms-policy-page .section-content-wrapper > .text-block:first-child { display: none; } .simms-policy-page .shopify-block.rte { width: 100%; } .simms-policy-page rte-formatter { display: block; font-family: Arial, Helvetica, sans-serif; color: #111; } .simms-policy-page rte-formatter :where(h1, h2, h3, h4, p, ul, ol) { margin: 0; } .simms-policy-page rte-formatter > [class*='text-center'] { margin-block: 0 2rem; text-align: left; } .simms-policy-page rte-formatter h1 { font-family: Arial, Helvetica, sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; color: #111; } .simms-policy-page rte-formatter h1 + p { margin-block-start: 0.75rem; font-size: 0.9375rem; line-height: 1.5; color: #444; } .simms-policy-page rte-formatter h2 { font-family: Arial, Helvetica, sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1.25; letter-spacing: 0; color: #111; } .simms-policy-page rte-formatter h3 { font-family: Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.4; letter-spacing: 0; color: #111; } .simms-policy-page rte-formatter p, .simms-policy-page rte-formatter li { font-family: Arial, Helvetica, sans-serif; font-size: 0.9375rem; line-height: 1.6; color: #222; } .simms-policy-page rte-formatter p + p { margin-block-start: 1rem; } .simms-policy-page rte-formatter ul, .simms-policy-page rte-formatter ol { padding-inline-start: 1.5rem; margin-block-start: 0.75rem; } .simms-policy-page rte-formatter li + li { margin-block-start: 0.25rem; } .simms-policy-page rte-formatter section { padding-block-start: 0; margin-block-start: 1.75rem; border: 0; } .simms-policy-page rte-formatter section > * + * { margin-block-start: 0.75rem; } .simms-policy-page rte-formatter :is([class*='shadcn-card'], [class*='border'], [class*='bg-'], [class*='rounded'], [class*='shadow']) { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .simms-policy-page rte-formatter :is([class*='shadcn-card'], [class*='border'], [class*='bg-'], [class*='rounded'], [class*='shadow']) + * { margin-block-start: 1.25rem; } .simms-policy-page rte-formatter [class*='flex'] { display: block; } .simms-policy-page rte-formatter svg { display: none; } /* ============================================================ CART DRAWER ============================================================ */ html.simms-cart-drawer-open, body.simms-cart-drawer-open { overflow: hidden; } .simms-cart-drawer { position: fixed; inset: 0; z-index: 1000; pointer-events: none; } .simms-cart-drawer__scrim { position: absolute; inset: 0; border: 0; background: rgb(0 0 0 / 0.38); opacity: 0; transition: opacity 180ms ease; cursor: default; } .simms-cart-drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; display: flex; flex-direction: column; width: min(100vw, 480px); background: var(--color-background); color: var(--color-foreground); box-shadow: -24px 0 64px rgb(0 0 0 / 0.14); transform: translateX(100%); transition: transform 220ms ease; } .simms-cart-drawer.is-open { pointer-events: auto; } .simms-cart-drawer.is-open .simms-cart-drawer__scrim { opacity: 1; } .simms-cart-drawer.is-open .simms-cart-drawer__panel { transform: translateX(0); } .simms-cart-drawer__panel > [data-simms-cart-drawer-content] { display: flex; flex-direction: column; min-height: 100%; } .simms-cart-drawer__header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 0.55rem; padding: 22px 26px 14px; } .simms-cart-drawer__header h2 { margin: 0; font-family: var(--font-heading--family); font-size: 1.45rem; font-weight: 500; letter-spacing: 0; line-height: 1; } .simms-cart-drawer__count { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: rgb(var(--color-foreground-rgb) / 0.08); color: rgb(var(--color-foreground-rgb) / 0.64); font-family: var(--font-mono--family); font-size: 0.75rem; } .simms-cart-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border: 2px solid var(--color-foreground); border-radius: 999px; background: transparent; color: var(--color-foreground); cursor: pointer; } .simms-cart-drawer__close svg { width: 16px; height: 16px; } .simms-cart-drawer__notices { padding-inline: 26px; color: var(--color-foreground); } .simms-cart-drawer__notices:empty { display: none; } .simms-cart-drawer__notices .woocommerce-error, .simms-cart-drawer__notices .woocommerce-message, .simms-cart-drawer__notices .woocommerce-info { margin: 0 0 1rem; padding: 0.85rem 1rem; border-radius: 8px; background: rgb(var(--color-foreground-rgb) / 0.05); list-style-position: inside; font-size: 0.875rem; } .simms-cart-drawer__items { flex: 1 1 auto; overflow: auto; padding: 0 26px 20px; } .simms-cart-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1rem; padding: 22px 0; border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.08); } .simms-cart-item__image { display: block; width: 64px; height: 64px; overflow: hidden; background: var(--simms-mist); border-radius: 2px; } .simms-cart-item__image img { display: block; width: 100%; height: 100%; object-fit: cover; } .simms-cart-item__main { min-width: 0; } .simms-cart-item__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; } .simms-cart-item__title { margin: 0 0 0.25rem; font-family: var(--font-heading--family); font-size: 1rem; font-weight: 500; line-height: 1.2; } .simms-cart-item__title a { color: inherit; text-decoration: none; } .simms-cart-item__meta { color: rgb(var(--color-foreground-rgb) / 0.62); font-size: 0.875rem; line-height: 1.35; } .simms-cart-item__meta:empty { display: none; } .simms-cart-item__meta dl, .simms-cart-item__meta p { margin: 0; } .simms-cart-item__meta dt, .simms-cart-item__meta dd { display: inline; margin: 0; } .simms-cart-item__meta dt::after { content: ": "; } .simms-cart-item__price { display: grid; justify-items: end; gap: 0.2rem; white-space: nowrap; font-size: 0.95rem; line-height: 1.2; } .simms-cart-item__price del { color: rgb(var(--color-foreground-rgb) / 0.4); } .simms-cart-item__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: 1rem; } .simms-cart-qty { display: inline-grid; grid-template-columns: 42px 42px 42px; align-items: center; min-height: 44px; border: 1px solid rgb(var(--color-foreground-rgb) / 0.1); border-radius: 8px; overflow: hidden; } .simms-cart-qty button, .simms-cart-qty input { width: 42px; height: 44px; border: 0; background: transparent; color: var(--color-foreground); text-align: center; font: inherit; } .simms-cart-qty button { cursor: pointer; font-size: 1.2rem; } .simms-cart-qty input::-webkit-outer-spin-button, .simms-cart-qty input::-webkit-inner-spin-button { margin: 0; appearance: none; } .simms-cart-item__remove { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; background: transparent; color: rgb(var(--color-foreground-rgb) / 0.75); cursor: pointer; } .simms-cart-item__remove svg { width: 20px; height: 20px; } .simms-cart-drawer__summary { flex: 0 0 auto; padding: 18px 26px 26px; border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.08); background: var(--color-background); } .simms-cart-discount { border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.08); margin-block-end: 18px; padding-block-end: 12px; } .simms-cart-discount summary { display: flex; align-items: center; justify-content: space-between; min-height: 38px; cursor: pointer; list-style: none; font-size: 0.9rem; } .simms-cart-discount summary::-webkit-details-marker { display: none; } .simms-cart-discount__form { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; margin-block-start: 0.5rem; } .simms-cart-discount__form input { min-width: 0; height: 44px; border: 1px solid rgb(var(--color-foreground-rgb) / 0.14); border-radius: 8px; padding-inline: 0.8rem; background: transparent; color: var(--color-foreground); } .simms-cart-discount__form button, .simms-cart-discount__applied button { height: 44px; border: 1px solid var(--color-foreground); border-radius: 999px; padding-inline: 1rem; background: transparent; color: var(--color-foreground); cursor: pointer; } .simms-cart-discount__applied { display: grid; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none; font-size: 0.85rem; } .simms-cart-discount__applied li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .simms-cart-shipping { display: grid; gap: 0.5rem; margin-block-end: 18px; } .simms-cart-shipping__label { display: flex; justify-content: space-between; gap: 1rem; color: rgb(var(--color-foreground-rgb) / 0.64); font-family: var(--font-mono--family); font-size: 0.72rem; line-height: 1.3; } .simms-cart-shipping__track { height: 9px; overflow: hidden; border-radius: 999px; background: rgb(var(--color-foreground-rgb) / 0.1); } .simms-cart-shipping__track span { display: block; height: 100%; border-radius: inherit; background: #3d9b58; } .simms-cart-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-block-end: 0.45rem; font-size: 0.95rem; } .simms-cart-total strong { font-size: 1rem; font-weight: 500; } .simms-cart-drawer__tax-note { margin: 0 0 1.4rem; color: rgb(var(--color-foreground-rgb) / 0.58); font-size: 0.82rem; } .simms-cart-drawer__checkout, .simms-cart-drawer__view-cart { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 60px; border-radius: 999px; text-decoration: none; } .simms-cart-drawer__checkout { background: var(--color-foreground); color: var(--color-background); } .simms-cart-drawer__view-cart { min-height: 42px; margin-block-start: 0.75rem; color: var(--color-foreground); font-size: 0.85rem; } .simms-cart-drawer__empty { display: grid; align-content: center; justify-items: start; gap: 0.75rem; min-height: min(620px, 70vh); padding: 26px; color: rgb(var(--color-foreground-rgb) / 0.64); } .simms-cart-drawer__empty-title { margin: 0; color: var(--color-foreground); font-family: var(--font-heading--family); font-size: 1.65rem; line-height: 1.1; } .simms-cart-drawer.is-loading .simms-cart-drawer__panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgb(255 255 255 / 0.24); } .simms-product-card__button.is-loading { pointer-events: none; opacity: 0.62; } @keyframes simms-cart-bump { 0% { transform: scale(1); } 30% { transform: scale(1.28); } 55% { transform: scale(0.9); } 100% { transform: scale(1); } } .site-header__cart.is-bumped { animation: simms-cart-bump 0.45s ease; transform-origin: center; } @media (prefers-reduced-motion: reduce) { .site-header__cart.is-bumped { animation: none; } } @media (max-width: 560px) { .simms-cart-drawer__panel { width: 100vw; } .simms-cart-drawer__header { padding-inline: 20px; } .simms-cart-drawer__items, .simms-cart-drawer__summary, .simms-cart-drawer__notices, .simms-cart-drawer__empty { padding-inline: 20px; } .simms-cart-item { grid-template-columns: 58px minmax(0, 1fr); gap: 0.85rem; } .simms-cart-item__image { width: 58px; height: 58px; } }