/* * SClinic Design System v2.0 — component styles * --------------------------------------------- * Loaded after tokens.css and after legacy base.css + components.css in * layout-v2.pug. Scoped by a `.ds-v2` class on so v2 rules do not * bleed into legacy pages that share the same stylesheet cache. * * All values reference tokens. No hand-rolled hex or px. * No component markup is inline-styled in Pug — styles live here. */ /* ============================================================ * Base reset (scoped to v2 body — legacy pages keep base.css) * ============================================================ */ body.ds-v2 { margin: 0; font-family: var(--font-sans); font-size: var(--font-body-size); font-weight: var(--font-w-light); line-height: var(--lh-body); color: var(--color-ink-700); background: var(--color-surface-0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.ds-v2 *, body.ds-v2 *::before, body.ds-v2 *::after { box-sizing: border-box; } /* Reset selectors wrapped in :where() to give them zero specificity so * component-level rules (e.g. .ds-footer__wordmark img height) override * without needing to be re-specific themselves. */ :where(body.ds-v2) img, :where(body.ds-v2) svg { max-width: 100%; height: auto; display: block; } :where(body.ds-v2) a { color: var(--color-link); text-decoration: none; } :where(body.ds-v2) a:hover { text-decoration: underline; } :where(body.ds-v2) h1, :where(body.ds-v2) h2, :where(body.ds-v2) h3, :where(body.ds-v2) h4, :where(body.ds-v2) h5, :where(body.ds-v2) h6 { margin: 0; font-weight: var(--font-w-regular); line-height: var(--lh-title); color: var(--color-ink-900); } :where(body.ds-v2) p { margin: 0; } body.ds-v2 button { font-family: inherit; cursor: pointer; } body.ds-v2 :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } body.ds-v2.is-drawer-open { overflow: hidden; } /* ============================================================ * Container * ============================================================ */ .ds-container { width: 100%; max-width: var(--container-max-v2); margin: 0 auto; padding: 0 var(--container-padding); } @media (min-width: 1024px) { .ds-container { padding: 0 var(--container-padding-lg); } } /* ============================================================ * Product detail * ============================================================ */ .ds-product-detail { padding: var(--space-8) 0; } .ds-product-detail__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; } .ds-product-detail__media { aspect-ratio: 1 / 1; border-radius: 0; display: block; overflow: hidden; width: 100%; } .ds-product-detail__image { width: 100%; height: 100%; object-fit: cover; display: block; } .ds-product-detail__info { display: flex; flex-direction: column; gap: var(--space-3); } .ds-product-detail__mark img { height: 24px; width: auto; } .ds-product-detail__brand { font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-500); margin: 0; } .ds-product-detail__title { font-size: var(--font-h2-size); letter-spacing: var(--tracking-title); text-transform: uppercase; font-weight: var(--font-w-light); color: var(--color-ink-900); margin: 0; } .ds-product-detail__price-box { display: inline-flex; align-items: center; padding: var(--space-3) var(--space-5); border: 1px solid var(--color-ink-100); border-radius: var(--radius-pill); background: var(--color-surface-0); align-self: flex-start; } .ds-product-detail__price { font-size: var(--font-h3-size); letter-spacing: var(--tracking-caps); color: var(--color-ink-900); font-weight: var(--font-w-regular); } .ds-product-detail__cta { align-self: flex-start; } .ds-product-detail__buy-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .ds-qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-ink-100); border-radius: var(--radius-pill); background: var(--color-surface-50); overflow: hidden; } .ds-qty-stepper__btn { appearance: none; background: transparent; border: 0; padding: 0 var(--space-3); height: 44px; font-size: var(--font-body-size); color: var(--color-ink-900); cursor: pointer; line-height: 1; } .ds-qty-stepper__btn:hover { background: var(--color-surface-100); } .ds-qty-stepper__value { min-width: 2ch; text-align: center; padding: 0 var(--space-2); font-variant-numeric: tabular-nums; color: var(--color-ink-900); user-select: none; } .ds-product-detail__description { color: var(--color-ink-700); line-height: var(--lh-body); } .ds-product-detail__heading { font-size: var(--font-h4-size); letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--font-w-bold); color: var(--color-ink-900); margin: var(--space-4) 0 0; } .ds-product-detail__media-col { display: flex; flex-direction: column; gap: var(--space-3); } .ds-product-detail__ingredients-box { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); color: var(--color-ink-700); line-height: var(--lh-body); } .ds-product-detail__ingredients-label { display: inline-block; background: var(--color-surface-0); padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-900); margin-bottom: var(--space-3); } .ds-product-detail__ingredients-body { margin: 0; font-size: var(--font-small-size); } @media (min-width: 1024px) { .ds-product-detail__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } } /* ============================================================ * Service detail — special panels (solutions grid, protocol steps) * ============================================================ */ .ds-solutions-panel { padding: var(--space-8) 0; } .ds-solutions-panel__title { text-align: center; font-size: var(--font-h2-size); letter-spacing: var(--tracking-title); text-transform: uppercase; font-weight: var(--font-w-light); margin: 0 0 var(--space-7); } .ds-solutions-panel__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; } .ds-solutions-panel__col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); } .ds-solutions-panel__col strong { display: block; font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-900); margin-bottom: var(--space-1); } .ds-solutions-panel__col p { color: var(--color-ink-700); line-height: var(--lh-body); margin: 0; } .ds-solutions-panel__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.4); } .ds-solutions-panel__mark { width: 40%; max-width: 180px; opacity: 0.5; } @media (min-width: 1024px) { .ds-solutions-panel__grid { grid-template-columns: 1fr 1.2fr 1fr; gap: var(--space-7); } } .ds-protocol-panel { padding: var(--space-8) 0; } .ds-protocol-panel__header { max-width: 640px; margin: 0 auto var(--space-6); text-align: center; } .ds-protocol-panel__title { font-size: var(--font-h2-size); letter-spacing: var(--tracking-title); text-transform: uppercase; font-weight: var(--font-w-light); margin: 0 0 var(--space-3); } .ds-protocol-panel__intro { color: var(--color-ink-700); line-height: var(--lh-body); margin: 0; } .ds-protocol-panel__steps { list-style: decimal; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-5); max-width: 780px; margin: 0 auto; } .ds-protocol-panel__steps li { list-style: none; counter-increment: step; padding-left: var(--space-7); position: relative; } .ds-protocol-panel__steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0; font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); color: var(--color-ink-500); } .ds-protocol-panel__steps strong { display: block; font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-900); margin-bottom: var(--space-1); } .ds-protocol-panel__steps p { color: var(--color-ink-700); line-height: var(--lh-body); margin: 0; } @media (min-width: 768px) { .ds-protocol-panel__steps { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-7); } } /* ============================================================ * Intertitle — large centred heading between page-header and article * ============================================================ */ .ds-intertitle { padding: var(--space-7) 0 var(--space-5); text-align: center; } .ds-intertitle__text { font-size: var(--font-h1-size); letter-spacing: var(--tracking-title); text-transform: uppercase; font-weight: var(--font-w-light); color: var(--color-ink-900); margin: 0; } /* ============================================================ * Article body (content + service detail pages) * ============================================================ */ .ds-article { padding: var(--space-8) 0; } .ds-article__body { max-width: 720px; margin: 0 auto; line-height: var(--lh-body); color: var(--color-ink-700); font-size: var(--font-body-lg-size); } .ds-article__title { max-width: 720px; margin: 0 auto var(--space-6); font-size: var(--font-h2-size); letter-spacing: var(--tracking-title); text-transform: uppercase; font-weight: var(--font-w-light); color: var(--color-ink-900); } .ds-article__body h2 { font-size: var(--font-h2-size); letter-spacing: var(--tracking-title); text-transform: uppercase; font-weight: var(--font-w-light); color: var(--color-ink-900); margin: var(--space-7) 0 var(--space-4); } .ds-article__body h3 { font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: var(--font-w-regular); color: var(--color-ink-900); margin: var(--space-6) 0 var(--space-3); } .ds-article__body p { margin: 0 0 var(--space-4); } .ds-article__body ul, .ds-article__body ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); } .ds-article__body li + li { margin-top: var(--space-2); } .ds-article__body a { color: var(--color-ink-900); text-decoration: underline; } .ds-article__body strong { font-weight: var(--font-w-bold); } .ds-article__body img { max-width: 100%; border-radius: var(--radius-md); margin: var(--space-5) 0; } /* ============================================================ * Error page (404 / 500) * ============================================================ */ .ds-error { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: var(--space-9) 0; background: var(--color-surface-0); } .ds-error__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; max-width: 540px; } .ds-error__inner img { height: 72px; width: auto; margin-bottom: var(--space-4); opacity: 0.85; } .ds-error__status { font-size: 96px; letter-spacing: 0.12em; font-weight: var(--font-w-light); color: var(--color-ink-300); line-height: 1; margin: 0; } .ds-error__title { font-size: var(--font-h2-size); letter-spacing: var(--tracking-title); text-transform: uppercase; font-weight: var(--font-w-light); color: var(--color-ink-900); margin: 0; } .ds-error__message { color: var(--color-ink-700); line-height: var(--lh-body); margin: 0; } .ds-error__actions { margin-top: var(--space-5); display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; } @media (min-width: 1024px) { .ds-error__status { font-size: 144px; } .ds-error__inner img { height: 96px; } } /* ============================================================ * Cart — drawer items, page, row * ============================================================ */ .ds-cart-item { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-ink-100); align-items: center; } .ds-cart-item:has(> .ds-cart-item__body:first-child) { grid-template-columns: 1fr auto; } .ds-cart-item__image { width: 72px; height: 72px; object-fit: cover; display: block; background: var(--color-surface-100); } .ds-cart-item__title { font-size: var(--font-body-size); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; color: var(--color-ink-900); } .ds-cart-item__meta { font-size: var(--font-small-size); color: var(--color-ink-500); margin: var(--space-1) 0 0; } .ds-cart-item__remove { width: 32px; height: 32px; border: 0; background: transparent; color: var(--color-ink-500); font-size: 20px; cursor: pointer; } .ds-cart-item__remove:hover { color: var(--color-ink-900); } .ds-cart__summary { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .ds-cart__total-row { display: flex; justify-content: space-between; font-size: var(--font-body-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .ds-cart-page { padding: var(--space-8) 0; } .ds-cart-page__empty { text-align: center; padding: var(--space-8) 0; color: var(--color-ink-500); } .ds-cart-page__list { display: flex; flex-direction: column; gap: var(--space-2); } .ds-cart-row { display: grid; grid-template-columns: 96px 1fr auto auto auto; gap: var(--space-4); align-items: center; padding: var(--space-4); background: var(--color-surface-50); border-radius: var(--radius-md); } .ds-cart-row:has(> .ds-cart-row__body:first-child) { grid-template-columns: 1fr auto auto auto; } .ds-cart-row__image { width: 96px; height: 96px; object-fit: cover; display: block; background: var(--color-surface-100); } .ds-cart-row__title { font-size: var(--font-body-size); letter-spacing: 0.08em; text-transform: uppercase; margin: 0; } .ds-cart-row__price { font-size: var(--font-small-size); color: var(--color-ink-500); margin: var(--space-1) 0 0; } .ds-cart-row__qty { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-ink-100); border-radius: var(--radius-pill); padding: 4px 12px; } .ds-cart-row__qty button { width: 24px; height: 24px; border: 0; background: transparent; font-size: 16px; cursor: pointer; color: var(--color-ink-900); } .ds-cart-row__total { font-size: var(--font-body-size); font-weight: var(--font-w-regular); margin: 0; min-width: 100px; text-align: right; } .ds-cart-row__remove { border: 0; background: transparent; color: var(--color-ink-500); font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; cursor: pointer; } .ds-cart-row__remove:hover { color: var(--color-error); } .ds-cart-page__checkout { margin-top: var(--space-6); padding: var(--space-6); background: var(--color-surface-100); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-end; } .ds-cart-page__total { display: flex; gap: var(--space-4); font-size: var(--font-h4-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .ds-cart-page__note { color: var(--color-ink-500); font-size: var(--font-small-size); margin: 0; text-align: right; } @media (max-width: 767px) { .ds-cart-row { grid-template-columns: 1fr auto; } .ds-cart-row__qty, .ds-cart-row__total, .ds-cart-row__remove { grid-column: 1 / -1; justify-self: flex-start; } } /* ============================================================ * Checkout — payment method tabs + bank info panel * ============================================================ */ .ds-checkout { padding: var(--space-8) 0; } .ds-checkout__section-title { font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-500); margin: var(--space-7) 0 var(--space-3); } .ds-checkout__submit { margin-top: var(--space-6); display: flex; justify-content: center; } /* Checkout — saved address picker (cards as radios) */ .ds-checkout__addresses { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-3); } @media (min-width: 768px) { .ds-checkout__addresses { grid-template-columns: 1fr 1fr; } } .ds-checkout__addresses .ds-address-card { cursor: pointer; position: relative; transition: border-color 120ms ease, box-shadow 120ms ease; } .ds-checkout__addresses .ds-address-card.is-selected { border-color: var(--color-ink-900); box-shadow: 0 0 0 1px var(--color-ink-900) inset; } .ds-address-card__radio { position: absolute; opacity: 0; pointer-events: none; } .ds-address-card__body { display: flex; flex-direction: column; gap: var(--space-1); } .ds-address-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .ds-address-card__name { font-size: var(--font-body-size); color: var(--color-ink-900); } .ds-address-card__loc, .ds-address-card__contact { margin: 0; font-size: var(--font-small-size); color: var(--color-ink-500); } .ds-address-card--new { border-style: dashed; } .ds-address-card--new .ds-address-card__name { color: var(--color-ink-700); } .ds-checkout__addresses-link { margin: 0 0 var(--space-5); font-size: var(--font-small-size); } .ds-checkout__addresses-link a { color: var(--color-ink-700); text-decoration: underline; } .ds-form-field__check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-small-size); color: var(--color-ink-700); cursor: pointer; } .ds-paytabs { display: flex; flex-direction: column; } .ds-paytabs__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); margin-bottom: var(--space-4); } .ds-paytabs__tab { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-5); background: var(--color-surface-100); border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard); } .ds-paytabs__tab:hover { background: var(--color-surface-200); } .ds-paytabs__tab--disabled { cursor: not-allowed; opacity: 0.55; } .ds-paytabs__tab--disabled:hover { background: var(--color-surface-100); } .ds-paytabs__icon { font-size: 28px; } .ds-paytabs__label { font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--font-w-bold); } .ds-paytabs__hint { font-size: var(--font-small-size); color: var(--color-ink-500); } /* Selected tab highlight — use :checked radio state */ #pm-bank:checked ~ .ds-paytabs__tabs label[for='pm-bank'], #pm-iyzico:checked ~ .ds-paytabs__tabs label[for='pm-iyzico'] { background: var(--color-surface-0); box-shadow: 0 0 0 2px var(--color-ink-900) inset; } .ds-paytabs__panel--bank { padding: var(--space-5) 0; display: none; } #pm-bank:checked ~ .ds-paytabs__panel--bank { display: block; } .ds-paytabs__bank-row { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); background: var(--color-surface-50); border-radius: var(--radius-md); margin-bottom: var(--space-4); } .ds-paytabs__check { color: var(--color-success); font-size: 20px; line-height: 1; margin-top: 2px; } .ds-paytabs__bank-name { font-weight: var(--font-w-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin: 0 0 var(--space-1); color: var(--color-ink-900); } .ds-paytabs__bank-iban { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--color-ink-700); margin: 0; letter-spacing: 0.02em; } /* ============================================================ * My orders (user order history) * ============================================================ */ .ds-my-orders { padding: var(--space-8) 0; } .ds-my-orders__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .ds-my-orders__row { display: grid; grid-template-columns: 1fr 2fr auto auto; gap: var(--space-4); align-items: center; padding: var(--space-4); background: var(--color-surface-50); border-radius: var(--radius-md); } .ds-my-orders__meta { display: flex; flex-direction: column; gap: 2px; } .ds-my-orders__number { font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin: 0; color: var(--color-ink-900); } .ds-my-orders__date { font-size: var(--font-small-size); color: var(--color-ink-500); margin: 0; } .ds-my-orders__items p { margin: 0; font-size: var(--font-small-size); color: var(--color-ink-700); } .ds-my-orders__status-badge { display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; background: var(--color-surface-100); color: var(--color-ink-900); } .ds-my-orders__status-badge--delivered { background: var(--color-success); color: var(--color-on-primary); } .ds-my-orders__status-badge--cancelled { background: var(--color-error); color: var(--color-on-primary); } .ds-my-orders__total { font-weight: var(--font-w-regular); min-width: 100px; text-align: right; } .ds-my-orders__empty { text-align: center; padding: var(--space-8) 0; color: var(--color-ink-500); } @media (max-width: 767px) { .ds-my-orders__row { grid-template-columns: 1fr; gap: var(--space-2); } } /* ============================================================ * Favorites (wishlist) page + product-detail heart toggle * ============================================================ */ .ds-favorites { padding: var(--space-8) 0; } .ds-favorites__empty { grid-column: 1 / -1; text-align: center; color: var(--color-ink-500); padding: var(--space-8) 0; } .ds-favorites__remove { margin-top: var(--space-2); align-self: center; } .ds-product-detail__fav { align-self: flex-start; padding-left: 0; padding-right: 0; margin-top: var(--space-2); } .ds-product-detail__fav[aria-pressed='true'] { color: var(--color-cta); } /* ============================================================ * Floating chat FAB (WhatsApp + live support) * ============================================================ */ .ds-chat-fab { position: fixed; right: var(--space-5); bottom: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); z-index: var(--z-header); } .ds-chat-fab__btn { width: 48px; height: 48px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; color: var(--color-on-primary); box-shadow: var(--shadow-2); transition: transform var(--motion-fast) var(--ease-standard); } .ds-chat-fab__btn:hover { transform: translateY(-2px); text-decoration: none; } .ds-chat-fab__btn--whatsapp { background: #25D366; } .ds-chat-fab__btn--chat { background: var(--color-ink-900); } /* ============================================================ * Search drawer * ============================================================ */ .ds-search { display: flex; flex-direction: column; gap: var(--space-4); } .ds-search__label { font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-500); } .ds-search__input { font-family: inherit; font-size: var(--font-body-lg-size); padding: var(--space-3) var(--space-4); border: 0; border-bottom: 1px solid var(--color-ink-100); background: transparent; color: var(--color-ink-900); outline: none; } .ds-search__input:focus { border-bottom-color: var(--color-ink-900); } .ds-search__hint { font-size: var(--font-small-size); color: var(--color-ink-500); margin: 0; } .ds-search__results { display: flex; flex-direction: column; gap: var(--space-4); } .ds-search-result { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-3); align-items: center; } .ds-search-result__thumb { aspect-ratio: 1; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; overflow: hidden; } .ds-search-result__thumb img { max-width: 70%; max-height: 70%; object-fit: contain; } .ds-search-result__body { display: flex; flex-direction: column; gap: var(--space-1); } .ds-search-result__brand { font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-500); margin: 0; } .ds-search-result__title { font-size: var(--font-body-size); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-900); margin: 0; } .ds-search-result__price { font-size: var(--font-small-size); color: var(--color-ink-700); margin: 0; } .ds-search-result__actions { margin-top: var(--space-2); } .ds-search-result__actions .ds-btn { padding: 8px 16px; min-height: 36px; font-size: 10px; } /* ============================================================ * Cart drawer * ============================================================ */ .ds-cart { display: flex; flex-direction: column; gap: var(--space-4); } .ds-cart__page-link { font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-900); border-bottom: 1px solid var(--color-ink-100); padding-bottom: var(--space-3); } .ds-cart__empty { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; color: var(--color-ink-700); } .ds-cart__empty p { margin: 0; } .ds-cart__hint { font-size: var(--font-small-size); color: var(--color-ink-500); } /* ============================================================ * Blog list + detail * ============================================================ */ .ds-blog-list { padding: var(--space-8) 0; } .ds-blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } .ds-blog-card__link { display: flex; flex-direction: column; gap: var(--space-2); color: inherit; } .ds-blog-card__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); } .ds-blog-card__date { font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-500); margin: var(--space-2) 0 0; } .ds-blog-card__title { font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--font-w-regular); color: var(--color-ink-900); margin: 0; } .ds-blog-card__excerpt { color: var(--color-ink-500); line-height: var(--lh-body); } .ds-blog-list__empty { text-align: center; color: var(--color-ink-500); padding: var(--space-8) 0; } .ds-article__cover { width: 100%; max-width: 960px; display: block; margin: 0 auto var(--space-6); border-radius: var(--radius-md); } @media (min-width: 768px) { .ds-blog-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-7); } } @media (min-width: 1024px) { .ds-blog-grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================================ * Account hub * ============================================================ */ .ds-account { padding: var(--space-8) 0; } .ds-account__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } .ds-account__card { background: var(--color-surface-100); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); } .ds-account__card-title { font-size: var(--font-h4-size); letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--font-w-bold); margin: 0; } @media (min-width: 768px) { .ds-account__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } } /* ============================================================ * Clinical results * ============================================================ */ .ds-clinical-intro { padding: var(--space-8) 0; text-align: center; } .ds-clinical-intro__body { max-width: 640px; margin: var(--space-5) auto 0; color: var(--color-ink-700); line-height: var(--lh-body); } .ds-clinical-grid { padding: var(--space-6) 0 var(--space-8); } .ds-clinical-grid__items { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .ds-clinical-grid__items { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ds-clinical-grid__items { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); } } .ds-case-card { display: flex; flex-direction: column; gap: var(--space-3); } .ds-case-card__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-100); } .ds-case-card__figure { position: relative; aspect-ratio: 3 / 4; margin: 0; overflow: hidden; } .ds-case-card__figure img { width: 100%; height: 100%; object-fit: cover; display: block; } .ds-case-card__figure figcaption { position: absolute; bottom: var(--space-2); left: var(--space-2); font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); color: var(--color-on-primary); background: rgba(15, 15, 15, 0.55); padding: 4px 8px; border-radius: var(--radius-sm); } .ds-case-card__placeholder { aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); color: var(--color-ink-300); background: var(--color-surface-200); } .ds-case-card__title { font-size: var(--font-h4-size); letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--font-w-regular); margin: 0; } .ds-case-card__duration { font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-500); margin: 0; } .ds-case-card__notes { color: var(--color-ink-700); line-height: var(--lh-body); margin: 0; } .ds-clinical-coming-soon { max-width: 520px; margin: 0 auto; padding: var(--space-8) var(--space-6); background: var(--color-surface-100); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; } .ds-clinical-coming-soon__mark { width: 64px; height: auto; opacity: 0.5; } .ds-clinical-coming-soon__label { font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-500); margin: 0; } .ds-clinical-coming-soon__body { color: var(--color-ink-700); line-height: var(--lh-body); margin: 0; } /* ============================================================ * Auth — login + register combined * ============================================================ */ .ds-auth { padding: var(--space-8) 0; } .ds-auth__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } .ds-auth__col { display: flex; flex-direction: column; gap: var(--space-4); } .ds-auth__title { font-size: var(--font-h2-size); letter-spacing: var(--tracking-title); text-transform: uppercase; font-weight: var(--font-w-light); color: var(--color-ink-900); margin: 0; } .ds-auth__form { display: flex; flex-direction: column; gap: var(--space-4); } .ds-auth__actions { display: flex; gap: var(--space-4); align-items: center; justify-content: flex-start; flex-wrap: wrap; } .ds-auth__link { color: var(--color-ink-900); font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: var(--space-3) 0; } .ds-auth__consent { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-small-size); color: var(--color-ink-700); } @media (min-width: 1024px) { .ds-auth__grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); } } /* ============================================================ * Appointment / Contact form * ============================================================ */ .ds-appointment { padding: var(--space-8) 0; } .ds-appointment__header { text-align: center; max-width: 640px; margin: 0 auto var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); } .ds-appointment__title { font-size: var(--font-h1-size); letter-spacing: var(--tracking-title); text-transform: uppercase; font-weight: var(--font-w-light); color: var(--color-ink-900); margin: 0; } .ds-appointment__lead { font-size: var(--font-body-size); color: var(--color-ink-700); margin: 0; } .ds-appointment__form { display: grid; grid-template-columns: 1fr; gap: var(--space-4); max-width: 960px; margin: 0 auto; } .ds-form-field { display: flex; flex-direction: column; gap: var(--space-2); } .ds-form-field--full { grid-column: 1 / -1; } .ds-form-field__label { font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-700); } .ds-form-field__input { font-family: inherit; font-size: var(--font-body-size); padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-sm); background: var(--color-surface-100); color: var(--color-ink-900); min-height: 48px; } .ds-form-field__input--textarea { min-height: 160px; resize: vertical; } .ds-form-field__input:focus { outline: 2px solid var(--color-ink-900); outline-offset: -2px; } .ds-form-field__error { margin: var(--space-1) 0 0; font-size: var(--font-small-size); color: var(--color-error); letter-spacing: 0; } .ds-form-field__error--global { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: rgba(180, 35, 24, 0.08); border-radius: var(--radius-sm); grid-column: 1 / -1; } .ds-appointment__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; } .ds-appointment__contact { max-width: 960px; margin: var(--space-8) auto 0; display: flex; flex-direction: column; gap: var(--space-2); } .ds-appointment__contact-label { font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-700); margin: 0; } .ds-appointment__contact-phone { color: var(--color-ink-900); font-size: var(--font-body-lg-size); letter-spacing: var(--tracking-caps); } .ds-appointment__contact-chat { display: flex; gap: var(--space-3); align-items: center; } @media (min-width: 768px) { .ds-appointment__form { grid-template-columns: 1fr 1fr; gap: var(--space-5); } } /* ============================================================ * Branch list * ============================================================ */ .ds-branch-list { padding: var(--space-8) 0; } .ds-branch-list__filter { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin: var(--space-5) 0; } .ds-branch-list__filter-label { font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-500); } .ds-branch-list__filter-select { font-family: inherit; font-size: var(--font-body-size); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-ink-100); border-radius: var(--radius-pill); background: var(--color-surface-0); color: var(--color-ink-900); min-width: 240px; } .ds-branch-list__items { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: flex; flex-direction: column; gap: var(--space-3); } .ds-branch-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface-stone); border-radius: var(--radius-md); align-items: center; } .ds-branch-row__mark img { height: 24px; width: auto; } .ds-branch-row__city { text-align: center; } .ds-branch-row__city h3 { font-size: var(--font-h2-size); letter-spacing: var(--tracking-title); text-transform: uppercase; font-weight: var(--font-w-light); margin: 0; } .ds-branch-row__contact p { margin: 0; font-size: var(--font-small-size); color: var(--color-ink-500); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .ds-branch-row__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); } .ds-branch-row__hours { margin: 0; font-size: var(--font-small-size); color: var(--color-ink-700); letter-spacing: 0.08em; white-space: nowrap; } @media (min-width: 768px) { .ds-branch-row { grid-template-columns: auto 1fr 1.5fr auto; gap: var(--space-5); } .ds-branch-row__actions { align-items: flex-end; } } .ds-branch-list__empty { text-align: center; color: var(--color-ink-500); } /* ============================================================ * Page header banner — generic hero-lite for non-home pages. * Consumes the same ds-section--accent-* backgrounds as home. * ============================================================ */ .ds-page-header { padding: var(--space-8) 0; } .ds-page-header__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); } .ds-page-header__inner img { height: var(--logo-hero-h); width: auto; } .ds-page-header__kicker { font-size: var(--font-kicker-size); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-ink-500); margin: 0; } .ds-page-header__title { font-size: var(--font-h1-size); letter-spacing: var(--tracking-title); text-transform: uppercase; font-weight: var(--font-w-light); color: var(--color-ink-900); margin: 0; } @media (min-width: 1024px) { .ds-page-header { padding: var(--space-9) 0; } .ds-page-header__inner img { height: var(--logo-hero-h-desktop); } } /* Overlay variant — full-bleed photo with text overlay, per-page * position (left|right|center) + theme (light|dark). Used by any * interior page that provides a bannerImage. */ .ds-page-header--overlay { position: relative; overflow: hidden; min-height: 420px; padding: 0; } .ds-page-header--overlay > .ds-page-header__media { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; } .ds-page-header--overlay > .ds-page-header__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ds-page-header--overlay > .ds-container { position: relative; z-index: 1; min-height: inherit; display: flex; align-items: center; padding-top: var(--space-7); padding-bottom: var(--space-7); } .ds-page-header--overlay .ds-page-header__text { max-width: 560px; gap: var(--space-4); } /* Legibility scrim — direction follows text position / theme. */ .ds-page-header--overlay::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.25) 100%); } .ds-page-header--overlay.ds-page-header--pos-left::after { background: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0) 100%); } .ds-page-header--overlay.ds-page-header--pos-center::after { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%); } .ds-page-header--overlay.ds-page-header--theme-dark::after { background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,0.35) 100%); } .ds-page-header--overlay.ds-page-header--theme-dark.ds-page-header--pos-left::after { background: linear-gradient(90deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 100%); } .ds-page-header--overlay.ds-page-header--theme-dark.ds-page-header--pos-center::after { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 100%); } /* Text position within the overlay container. */ .ds-page-header--overlay.ds-page-header--pos-left .ds-page-header__text { margin-right: auto; margin-left: 0; text-align: left; } .ds-page-header--overlay.ds-page-header--pos-right .ds-page-header__text { margin-left: auto; margin-right: 0; text-align: left; } .ds-page-header--overlay.ds-page-header--pos-center .ds-page-header__text { margin-left: auto; margin-right: auto; text-align: center; align-items: center; } /* Theme: text + lead color over the photo. Logo variant is swapped * in the template (wordmark light vs dark), no filter needed. */ .ds-page-header--overlay.ds-page-header--theme-light .ds-page-header__title, .ds-page-header--overlay.ds-page-header--theme-light .ds-page-header__kicker { color: var(--color-surface-0, #fff); } .ds-page-header--overlay.ds-page-header--theme-light .ds-page-header__lead { color: rgba(255,255,255,0.92); } .ds-page-header--overlay.ds-page-header--theme-dark .ds-page-header__title { color: var(--color-ink-900); } .ds-page-header--overlay.ds-page-header--theme-dark .ds-page-header__kicker { color: var(--color-ink-500); } .ds-page-header--overlay.ds-page-header--theme-dark .ds-page-header__lead { color: var(--color-ink-700); } @media (min-width: 1024px) { .ds-page-header--overlay { min-height: 560px; } .ds-page-header--overlay > .ds-container { padding-top: var(--space-9); padding-bottom: var(--space-9); } } /* (Legacy) Split variant — kept for any consumer that still opts in. */ .ds-page-header--split { padding: var(--space-7) 0; overflow: hidden; } .ds-page-header__split { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; } .ds-page-header__text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: var(--space-4); } .ds-page-header__text img { height: var(--logo-hero-h); width: auto; } .ds-page-header__text .ds-page-header__title, .ds-page-header__text .ds-page-header__kicker, .ds-page-header__text .ds-page-header__lead { text-align: left; } .ds-page-header__lead { font-size: var(--font-body-lg-size); line-height: 1.55; color: var(--color-ink-700); max-width: 42ch; margin: 0; } .ds-page-header__media { min-height: 260px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .ds-page-header__media img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 1024px) { .ds-page-header--split { padding: var(--space-8) 0; } .ds-page-header__split { grid-template-columns: 1fr 1fr; gap: var(--space-8); min-height: 420px; } .ds-page-header__text img { height: var(--logo-hero-h-desktop); } /* Media extends past the container to the viewport's right edge. * Width grows by the right gutter (half of viewport-vs-container diff * + container padding), clamped at 0 so narrow viewports don't shrink. */ .ds-page-header__media { min-height: 420px; width: calc(100% + max(0px, (100vw - var(--container-max-v2)) / 2) + var(--container-padding-lg)); } } /* ============================================================ * SiteHeader * ============================================================ */ /* Not sticky — design decision. Header scrolls out of view with the page. */ .ds-header { position: relative; z-index: var(--z-header); background: var(--color-surface-0); border-bottom: 1px solid var(--color-ink-100); } /* Logo centred in the flow; hamburger + utility icons positioned * absolutely at top-left / top-right so they stick to the page edge * and don't push the logo off centre. */ .ds-header__utility-row { position: relative; display: flex; justify-content: center; align-items: center; padding: var(--space-7) 0 var(--space-4); min-height: 56px; } .ds-header__hamburger { position: absolute; left: 0; top: var(--space-3); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--color-ink-700); } .ds-header__logo { display: flex; justify-content: center; padding: 0; } .ds-utility-icons { position: absolute; top: var(--space-3); right: 0; display: flex; gap: var(--space-2); align-items: center; } .ds-header__logo img { height: var(--logo-header-h); width: auto; } @media (min-width: 768px) { .ds-header__logo img { height: var(--logo-header-h-desktop); } .ds-header__utility-row { min-height: 96px; padding: var(--space-6) 0 var(--space-4); } .ds-header__hamburger { display: none; } } .ds-utility-icons { display: flex; align-items: center; gap: var(--space-2); } .ds-utility-icons__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--color-ink-500); border-radius: var(--radius-md); position: relative; } .ds-utility-icons__btn:hover { color: var(--color-ink-900); } .ds-utility-icons__btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; } .ds-utility-icons__badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-full); background: var(--color-ink-900); color: var(--color-on-primary); font-size: 10px; line-height: 16px; text-align: center; } .ds-utility-icons__dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-cta-lavender); border: 1px solid var(--color-surface-0); pointer-events: none; } .ds-utility-icons__dot[hidden] { display: none; } .ds-utility-icons__lang { margin-left: var(--space-3); font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-700); padding: 0 var(--space-2); } /* Mobile: hide some utility icons to conserve space */ .ds-utility-icons__btn--hide-mobile, .ds-utility-icons__lang { display: none; } @media (min-width: 768px) { .ds-utility-icons__btn--hide-mobile { display: inline-flex; } .ds-utility-icons__lang { display: inline-flex; align-items: center; } } /* ============================================================ * PrimaryNav * ============================================================ */ .ds-nav { display: none; } .ds-nav__list { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-6); padding: var(--space-3) 0; } .ds-nav__link { font-size: var(--font-caps-size); font-weight: var(--font-w-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-700); position: relative; padding: var(--space-1) 0; } .ds-nav__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--color-ink-900); transform: scaleX(0); transform-origin: left center; transition: transform var(--motion-fast) var(--ease-standard); } .ds-nav__link:hover::after, .ds-nav__link:focus-visible::after { transform: scaleX(1); } .ds-nav__link:hover { text-decoration: none; } @media (min-width: 1024px) { .ds-nav { display: block; } } /* Drawer-tone variant for mobile menu drawer */ .ds-nav--drawer .ds-nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) 0; } /* ============================================================ * Button * ============================================================ */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 36px; padding: 8px 24px; border-radius: var(--radius-pill); border: 1px solid transparent; font-family: inherit; font-size: var(--font-caps-size); font-weight: var(--font-w-medium); letter-spacing: 0.111em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); white-space: nowrap; } .ds-btn:hover { text-decoration: none; } .ds-btn:active { transform: scale(0.98); } .ds-btn:disabled, .ds-btn[aria-disabled='true'] { opacity: 0.5; pointer-events: none; } /* Compound selectors (.ds-btn.ds-btn--primary) score 0,2,0 which beats * the body.ds-v2 a reset at 0,1,2 — required because most CTA buttons * are anchor tags and would otherwise inherit the link color. */ .ds-btn.ds-btn--primary { background: var(--color-cta); color: var(--color-on-cta); border-color: var(--color-cta); } .ds-btn.ds-btn--primary:hover { background: var(--color-cta-hover); border-color: var(--color-cta-hover); } .ds-btn.ds-btn--secondary { background: transparent; color: var(--color-on-secondary); border-color: var(--color-ink-900); } .ds-btn.ds-btn--secondary:hover { background: var(--color-ink-900); color: var(--color-on-primary); } .ds-btn.ds-btn--dark { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); } .ds-btn.ds-btn--dark:hover { background: #222; border-color: #222; } .ds-btn.ds-btn--tinted { background: var(--color-cta-lavender); color: var(--color-ink-900); border-color: var(--color-cta-lavender); } .ds-btn.ds-btn--tinted:hover { background: var(--color-cta-lavender-hover); border-color: var(--color-cta-lavender-hover); color: var(--color-ink-900); } .ds-btn.ds-btn--tinted-peach { background: var(--color-cta-lavender); color: var(--color-ink-900); border-color: var(--color-cta-lavender); } .ds-btn.ds-btn--tinted-peach:hover { background: var(--color-cta-lavender-hover); border-color: var(--color-cta-lavender-hover); color: var(--color-ink-900); } .ds-btn.ds-btn--light { background: var(--color-on-primary); color: var(--color-ink-900); border-color: var(--color-on-primary); } .ds-btn.ds-btn--light:hover { background: #e2e2e2; border-color: #e2e2e2; color: var(--color-ink-900); } .ds-btn.ds-btn--tertiary { background: transparent; color: var(--color-ink-900); border-color: transparent; padding: 12px 0; } .ds-btn.ds-btn--tertiary:hover { text-decoration: underline; } .ds-btn.ds-btn--on-dark.ds-btn--secondary { color: var(--color-on-primary); border-color: var(--color-on-primary); } .ds-btn.ds-btn--on-dark.ds-btn--secondary:hover { background: var(--color-on-primary); color: var(--color-ink-900); } /* ============================================================ * SectionHeading * ============================================================ */ .ds-section-heading { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; margin-bottom: var(--space-6); } .ds-section-heading__kicker { font-size: var(--font-kicker-size); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-ink-500); } .ds-products-section .ds-section-heading__kicker { font-size: 24px; } .ds-section-heading__title { font-size: var(--font-h2-size); letter-spacing: var(--tracking-title); text-transform: uppercase; color: var(--color-ink-900); font-weight: var(--font-w-regular); white-space: pre-line; } @media (min-width: 768px) { .ds-section-heading__title { font-size: 32px; } } /* ============================================================ * SectionDivider * ============================================================ */ .ds-section-divider { padding: var(--space-6) 0 0; background: var(--color-surface-0); border: 0; text-align: center; /* Let the ornament overflow into the next section so the ink-drop mark * visually bridges the white/tinted boundary (per design reference). */ overflow: visible; } .ds-section-divider__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); position: relative; z-index: 1; } .ds-section-divider__tagline { font-size: var(--font-kicker-size); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-ink-900); font-weight: var(--font-w-light); margin: 0; } .ds-tagline { display: block; height: 32px; width: auto; max-width: 100%; margin: 0 auto; } .ds-tagline--light { filter: brightness(0) invert(1); opacity: 0.85; } @media (min-width: 1024px) { .ds-tagline { height: 40px; } } .ds-footer .ds-tagline { height: 16px; } @media (min-width: 1024px) { .ds-footer .ds-tagline { height: 20px; } } .ds-section-divider__ornament { margin-bottom: calc(var(--logo-divider-h) * -0.6); } .ds-section-divider__ornament img { height: var(--logo-divider-h); width: auto; opacity: 1; } @media (min-width: 1024px) { .ds-section-divider__ornament img { height: var(--logo-divider-h-desktop); } .ds-section-divider__ornament { margin-bottom: calc(var(--logo-divider-h-desktop) * -0.6); } } /* ============================================================ * HeroCarousel * ============================================================ */ .ds-hero { position: relative; overflow: hidden; } .ds-hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; } .ds-hero__track::-webkit-scrollbar { display: none; } .ds-hero__slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; position: relative; min-height: 560px; overflow: hidden; } .ds-hero__slide--warm { background: var(--color-accent-hero-warm); } .ds-hero__slide--blue { background: var(--color-accent-spray); } .ds-hero__slide--blush { background: var(--color-accent-gummy); } .ds-hero__slide--sage { background: var(--color-accent-hair); } .ds-hero__slide--peach { background: var(--color-accent-vitamin); } /* Generic section accent backgrounds — apply to any top-level section * on a ds-v2 page that needs a pastel zemin. Section padding already * comes from the component class (ds-service-banner, ds-contact-preview, * ds-content-hub); this only tints the bg. */ .ds-section--accent-blue { background: var(--color-accent-spray); } .ds-section--accent-pink { background: var(--color-accent-collagen); } .ds-section--accent-cream { background: var(--color-surface-100); } .ds-section--accent-blush { background: var(--color-accent-gummy); } .ds-section--accent-warm { background: var(--color-accent-hero-warm); } .ds-section--accent-vitamin { background: var(--color-accent-vitamin); } .ds-hero__media { position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-accent-hero-warm) 0%, var(--color-surface-200) 100%); overflow: hidden; } .ds-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Scrim improves legibility of overlay text without flattening the photo. * Direction follows the text position so the darker edge sits under text. */ .ds-hero__slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 45%, rgba(0,0,0,0.25) 100%); } .ds-hero__slide--pos-left::after { background: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.00) 55%, rgba(0,0,0,0.00) 100%); } .ds-hero__slide--pos-center::after { background: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.25) 100%); } .ds-hero__slide--theme-dark::after { background: linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.00) 45%, rgba(255,255,255,0.35) 100%); } .ds-hero__slide--theme-dark.ds-hero__slide--pos-left::after { background: linear-gradient(90deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.00) 55%, rgba(255,255,255,0.00) 100%); } .ds-hero__slide--theme-dark.ds-hero__slide--pos-center::after { background: linear-gradient(180deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.35) 100%); } /* Generic media placeholder — stylized "image coming soon" slot. * Works anywhere: hero slide media, service banner media, team photo, * etc. Parent must give it dimensions (min-height or flex fill). */ .ds-media-placeholder { width: 100%; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-7) var(--space-5); opacity: 0.6; } .ds-media-placeholder__mark { width: 40%; max-width: 220px; height: auto; opacity: 0.6; } .ds-media-placeholder__caption { font-size: var(--font-kicker-size); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-ink-500); } .ds-hero__body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); padding: var(--space-7) var(--container-padding); min-height: inherit; max-width: 560px; margin-left: auto; } .ds-hero__slide--pos-left .ds-hero__body { margin-left: 0; margin-right: auto; text-align: left; } .ds-hero__slide--pos-right .ds-hero__body { margin-left: auto; margin-right: 0; text-align: left; } .ds-hero__slide--pos-center .ds-hero__body { margin-left: auto; margin-right: auto; text-align: center; align-items: center; } /* Light theme = light text over darker photo area */ .ds-hero__slide--theme-light .ds-hero__headline { color: var(--color-surface-0, #fff); } .ds-hero__slide--theme-light .ds-hero__lead { color: rgba(255,255,255,0.92); } /* Dark theme = dark text over lighter photo area (default) */ .ds-hero__slide--theme-dark .ds-hero__headline { color: var(--color-ink-900); } .ds-hero__slide--theme-dark .ds-hero__lead { color: var(--color-ink-700); } .ds-hero__lockup { font-size: 32px; letter-spacing: var(--tracking-tight); line-height: 1.1; font-weight: var(--font-w-regular); } .ds-hero__logo-line img { height: var(--logo-hero-h); width: auto; display: inline-block; margin-bottom: var(--space-2); } .ds-hero__headline { font-size: 24px; letter-spacing: 0.124em; text-transform: uppercase; font-weight: var(--font-w-light); color: var(--color-ink-900); white-space: pre-line; line-height: 1.15; } @media (min-width: 1024px) { .ds-hero__headline { font-size: 38px; } } .ds-hero__lead { max-width: 44ch; font-size: var(--font-body-lg-size); line-height: 1.55; letter-spacing: 0.044em; color: var(--color-ink-700); padding: 10px 0; } .ds-hero__dots { display: flex; gap: var(--space-2); justify-content: center; padding: var(--space-4) 0 var(--space-6); position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; pointer-events: none; } .ds-hero__dot { width: 10px; height: 10px; border-radius: var(--radius-full); border: 1px solid var(--color-surface-0, #fff); background: transparent; padding: 0; cursor: pointer; pointer-events: auto; } .ds-hero__dot[aria-current='true'] { background: var(--color-surface-0, #fff); } @media (min-width: 1024px) { .ds-hero__slide { min-height: 680px; } .ds-hero__body { padding: var(--space-9) var(--space-9); max-width: 620px; } .ds-hero__slide--pos-left .ds-hero__body, .ds-hero__slide--pos-right .ds-hero__body { width: 50%; } .ds-hero__headline { font-size: 38px; } .ds-hero__logo-line img { height: var(--logo-hero-h-desktop); } } /* ============================================================ * Science intro * ============================================================ */ .ds-science-intro { background: var(--color-surface-50); padding: var(--space-8) 0; text-align: center; } .ds-science-intro__inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); } .ds-science-intro__title { font-size: var(--font-h2-size); letter-spacing: var(--tracking-title); text-transform: uppercase; font-weight: var(--font-w-regular); color: var(--color-ink-900); } @media (min-width: 768px) { .ds-science-intro { padding: var(--space-9) 0; } .ds-science-intro__title { font-size: 32px; } } .ds-science-intro__body { max-width: 60ch; color: var(--color-ink-500); } /* ============================================================ * ProductGrid + ProductCard * ============================================================ */ .ds-products-section { padding: var(--space-8) 0 0; position: relative; } .ds-products-section > .ds-section-heading, .ds-products-section > .ds-products-lead, .ds-products-section > .ds-products-grid, .ds-products-section > .ds-products-empty { max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: var(--container-padding); padding-right: var(--container-padding); } .ds-products-section > .ds-products-lead { max-width: none; text-align: center; white-space: pre-line; font-size: var(--font-body-size); font-weight: var(--font-w-light); color: var(--color-ink-500); line-height: var(--lh-body); margin-top: var(--space-3); margin-bottom: var(--space-7); } @media (min-width: 1024px) { .ds-products-section > .ds-section-heading, .ds-products-section > .ds-products-lead, .ds-products-section > .ds-products-grid, .ds-products-section > .ds-products-empty { padding-left: var(--container-padding-lg); padding-right: var(--container-padding-lg); } } .ds-products-section::after { content: ''; display: block; height: 6px; margin-top: var(--space-8); background: linear-gradient( 90deg, var(--color-accent-collagen) 0%, var(--color-surface-0) 50%, var(--color-accent-spray) 100% ); } .ds-products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } @media (min-width: 768px) { .ds-products-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); } } @media (min-width: 1024px) { .ds-products-grid { gap: var(--space-8); } } .ds-product-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; } .ds-product-card__media { width: 100%; aspect-ratio: 4 / 5; display: block; background: var(--card-bg, var(--color-surface-100)); border-radius: 0; overflow: hidden; margin-bottom: var(--space-4); transition: transform var(--motion-fast) var(--ease-standard); } .ds-product-card__media:hover { transform: translateY(-2px); } .ds-product-card__image { width: 100%; height: 100%; object-fit: cover; display: block; } .ds-product-card__image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-ink-300); font-size: var(--font-small-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .ds-product-card__title-link { color: inherit; } .ds-product-card__title-link:hover { text-decoration: none; } .ds-product-card__title { font-size: 17px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-900); font-weight: var(--font-w-light); line-height: 1.5; } .ds-product-card__brand { display: block; font-weight: var(--font-w-light); } .ds-product-card__name { display: block; font-weight: var(--font-w-light); } .ds-product-card__price { font-size: var(--font-small-size); letter-spacing: var(--tracking-caps); color: var(--color-ink-700); font-weight: var(--font-w-light); margin-top: var(--space-2); } .ds-product-card__cta { margin-top: var(--space-3); } .ds-product-card__cta.ds-btn, .ds-product-card__cta.ds-btn:hover { color: var(--color-surface-0, #fff); } .ds-product-card--accent-hair { --card-bg: var(--color-accent-hair); } .ds-product-card--accent-spray { --card-bg: var(--color-accent-spray); } .ds-product-card--accent-vitamin { --card-bg: var(--color-accent-vitamin); } .ds-product-card--accent-collagen { --card-bg: var(--color-accent-collagen); } .ds-product-card--accent-gummy { --card-bg: var(--color-accent-gummy); } .ds-products-empty { text-align: center; padding: var(--space-7) 0; color: var(--color-ink-500); } /* ============================================================ * ServicePromoBanner * ============================================================ */ .ds-service-banner { padding: var(--space-7) 0; width: 100%; } .ds-service-banner__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: center; width: 100%; } .ds-service-banner__media { position: relative; min-height: 260px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .ds-service-banner__image { width: 100%; height: 100%; min-height: inherit; object-fit: cover; display: block; } .ds-service-banner__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); } .ds-service-banner__kicker { font-size: var(--font-kicker-size); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-ink-500); } .ds-service-banner__title { font-size: var(--font-h2-size); letter-spacing: var(--tracking-title); text-transform: uppercase; font-weight: var(--font-w-regular); color: var(--color-ink-900); } .ds-service-banner__body p { color: var(--color-ink-500); max-width: 48ch; } .ds-service-banner__actions { margin-top: var(--space-3); } @media (min-width: 1024px) { .ds-service-banner__inner { grid-template-columns: 1fr 1fr; min-height: 420px; } .ds-service-banner__body { padding: var(--space-8); } .ds-service-banner--photo-right .ds-service-banner__media { order: 2; } .ds-service-banner--photo-right .ds-service-banner__body { order: 1; } } /* Centered body variant — title / kicker / copy / CTA stack horizontally * centered in their column. Used by Uzman Kadro. */ .ds-service-banner--center .ds-service-banner__body { align-items: center; text-align: center; } .ds-service-banner--center .ds-service-banner__body p { margin-left: auto; margin-right: auto; } .ds-service-banner--center .ds-service-banner__title { letter-spacing: 0.2em; } /* ============================================================ * BleedHero — single full-bleed photo with overlay text. * Reusable anywhere a section needs the same treatment as the * homepage hero (e.g. Uzman Kadro). Position (left|right|center) * and theme (light|dark) control lockup placement and text color. * ============================================================ */ .ds-bleed-hero { position: relative; width: 100%; min-height: 420px; overflow: hidden; display: flex; align-items: center; padding: var(--space-8) var(--container-padding); } .ds-bleed-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } .ds-bleed-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(90deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0) 100%); } .ds-bleed-hero--pos-right::after { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.28) 100%); } .ds-bleed-hero--pos-center::after { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.28) 100%); } .ds-bleed-hero--theme-dark::after { background: linear-gradient(90deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 100%); } .ds-bleed-hero--theme-dark.ds-bleed-hero--pos-right::after { background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,0.45) 100%); } .ds-bleed-hero--theme-dark.ds-bleed-hero--pos-center::after { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 100%); } .ds-bleed-hero__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-3); max-width: 520px; } /* Pin logo size so it does not shrink with short titles — reset body's * max-width:100% for images so the monogram always renders at logo-hero-h. */ .ds-bleed-hero__body img { height: var(--logo-hero-h); width: auto; max-width: none; } @media (min-width: 1024px) { .ds-bleed-hero__body img { height: var(--logo-hero-h-desktop); } } .ds-bleed-hero--pos-left .ds-bleed-hero__body { margin-right: auto; margin-left: 0; text-align: left; align-items: flex-start; } .ds-bleed-hero--pos-right .ds-bleed-hero__body { margin-left: auto; margin-right: 0; text-align: left; align-items: flex-start; } .ds-bleed-hero--pos-center .ds-bleed-hero__body { margin: 0 auto; text-align: center; align-items: center; } .ds-bleed-hero__title { font-size: 38px; letter-spacing: 0.124em; text-transform: uppercase; font-weight: var(--font-w-light); line-height: 1.2; margin: 0; } .ds-bleed-hero__kicker { font-size: var(--font-kicker-size); letter-spacing: var(--tracking-kicker); text-transform: uppercase; margin: 0; } .ds-bleed-hero__lead { font-size: var(--font-body-lg-size); line-height: 1.55; max-width: 44ch; margin: 0; } .ds-bleed-hero__actions { margin-top: var(--space-3); } /* Theme colors for overlay text. */ .ds-bleed-hero--theme-light .ds-bleed-hero__title, .ds-bleed-hero--theme-light .ds-bleed-hero__kicker { color: var(--color-surface-0, #fff); } .ds-bleed-hero--theme-light .ds-bleed-hero__lead { color: rgba(255,255,255,0.92); } .ds-bleed-hero--theme-dark .ds-bleed-hero__title { color: var(--color-ink-900); } .ds-bleed-hero--theme-dark .ds-bleed-hero__kicker { color: var(--color-ink-500); } .ds-bleed-hero--theme-dark .ds-bleed-hero__lead { color: var(--color-ink-700); } @media (min-width: 1024px) { .ds-bleed-hero { min-height: 560px; padding: var(--space-9) var(--container-padding-lg); } } /* ============================================================ * Team + Results-stat (anasayfa blocks) * ============================================================ */ .ds-team { padding: var(--space-8) 0; background: var(--color-surface-50); } .ds-team__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); } .ds-team__media { width: 100%; max-width: 840px; min-height: 240px; background: var(--color-surface-200); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-ink-300); font-size: var(--font-kicker-size); letter-spacing: var(--tracking-kicker); text-transform: uppercase; margin-bottom: var(--space-5); } .ds-results-stat { padding: var(--space-8) 0; text-align: center; } .ds-results-stat__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .ds-results-stat__title { font-size: var(--font-h2-size); letter-spacing: var(--tracking-title); text-transform: uppercase; font-weight: var(--font-w-regular); color: var(--color-ink-900); } .ds-results-stat__number { font-size: 40px; font-weight: var(--font-w-light); color: var(--color-ink-900); margin-top: var(--space-3); } .ds-results-stat__label { font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-500); } /* ============================================================ * ScienceTeaser * ============================================================ */ .ds-science-teaser { padding: var(--space-8) 0; background: var(--color-surface-50); } .ds-science-teaser__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: var(--space-5) auto; max-width: 960px; } .ds-science-teaser__thumb { aspect-ratio: 1 / 1; background: var(--color-surface-200); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-ink-300); font-size: var(--font-small-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; } /* ============================================================ * Contact / Randevu preview * ============================================================ */ .ds-contact-preview { padding: var(--space-8) 0; text-align: center; } .ds-contact-preview__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); max-width: var(--container-max-v2); margin: 0 auto; padding: 0 var(--container-padding); } .ds-contact-preview .ds-section-heading { padding-top: 80px; } .ds-contact-preview__inner > .ds-btn { margin-top: 26px; margin-bottom: 50px; } .ds-contact-preview__body { max-width: none; color: var(--color-ink-500); } .ds-contact-preview__body p { white-space: pre-line; } .ds-contact-preview__subtitle { font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-700); font-weight: var(--font-w-light); margin: 0; } .ds-contact-preview--klinik { background: var(--color-surface-0); min-height: 420px; padding: var(--space-8) var(--container-padding); display: flex; align-items: center; justify-content: center; } /* ============================================================ * Content hub * ============================================================ */ .ds-content-hub { padding: var(--space-8) 0; text-align: center; } .ds-content-hub__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); max-width: var(--container-max-v2); margin: 0 auto; padding: 0 var(--container-padding); } .ds-content-hub__body { max-width: 60ch; color: var(--color-ink-500); } /* ============================================================ * SSS Accordion * ============================================================ */ .ds-faq { padding: var(--space-8) 0; } .ds-faq__list { max-width: 840px; margin: 0 auto; border-top: 1px solid var(--color-ink-100); } .ds-faq-item { border-bottom: 1px solid var(--color-ink-100); } .ds-faq-item__question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; padding: var(--space-5) 0; background: transparent; border: 0; text-align: left; font-family: inherit; font-size: var(--font-body-size); color: var(--color-ink-900); } .ds-faq-item__glyph { font-size: 20px; line-height: 1; transition: transform var(--motion-fast) var(--ease-standard); color: var(--color-ink-500); } .ds-faq-item.is-open .ds-faq-item__glyph { transform: rotate(45deg); color: var(--color-ink-900); } .ds-faq-item__body { padding: 0 0 var(--space-5); color: var(--color-ink-500); max-width: 72ch; } .ds-faq-item[hidden], .ds-faq-item__body[hidden] { display: none; } .ds-faq__all { display: block; text-align: center; margin-top: var(--space-6); } /* ============================================================ * SiteFooter * ============================================================ */ .ds-footer { background: var(--color-ink-900); color: var(--color-on-primary); padding: var(--space-9) 0 var(--space-6); } /* Ensure body.ds-v2 defaults (gray text, black links) don't bleed into * the dark footer. */ .ds-footer, .ds-footer p, .ds-footer h4, .ds-footer .ds-footer__bottom { color: var(--color-on-primary); } .ds-footer__brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding-bottom: var(--space-9); margin-bottom: var(--space-9); } .ds-footer__wordmark img { height: var(--logo-footer-primary-h); width: auto; max-width: 100%; } .ds-footer__tagline { font-size: var(--font-kicker-size); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: rgba(255, 255, 255, 0.75); } .ds-footer__columns { display: grid; grid-template-columns: 1fr; gap: var(--space-7); } @media (min-width: 768px) { .ds-footer__columns { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ds-footer__columns { grid-template-columns: repeat(4, 1fr); } } .ds-footer__col { text-align: center; display: flex; flex-direction: column; align-items: center; } .ds-footer__col h4 { font-size: var(--font-h4-size); font-weight: var(--font-w-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-on-primary); margin-bottom: var(--space-4); } .ds-footer__col--ornament h4 { /* First two cols use the wordmark monogram instead of a text heading */ font-size: 0; line-height: 0; } /* Desktop: nudge text headings (MERAK ETTİKLERİNİZ, ÜYELİK) down so * they align with the col-1/2 mini wordmarks. */ @media (min-width: 1024px) { .ds-footer__col:not(.ds-footer__col--ornament) h4 { padding-top: 15px; } } .ds-footer__col-mark img { width: auto; margin-bottom: var(--space-4); } .ds-footer__col-mark--1 img { height: var(--logo-footer-col-1-h); } .ds-footer__col-mark--2 img { height: var(--logo-footer-col-2-h); } .ds-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } /* body.ds-v2 a (specificity 0,1,2) sets default black link color, so we * prefix footer link rules with .ds-footer to win on specificity. */ .ds-footer .ds-footer__col a { color: rgba(255, 255, 255, 0.85); font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .ds-footer .ds-footer__col a:hover { color: var(--color-on-primary); } .ds-footer__actions { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; width: 100%; max-width: 200px; } .ds-footer__social { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-6); } .ds-footer__social-label { font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-on-primary); font-weight: var(--font-w-bold); } .ds-footer__social-icons { display: flex; gap: var(--space-3); align-items: center; } .ds-footer .ds-footer__social-icons .ds-footer__social-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-on-primary); color: var(--color-ink-900); transition: background-color var(--motion-fast) var(--ease-standard); } .ds-footer .ds-footer__social-icons .ds-footer__social-icon svg { width: 18px; height: 18px; display: block; } .ds-footer .ds-footer__social-icons .ds-footer__social-icon:hover { background: var(--color-ink-100); } .ds-footer__bottom { margin-top: var(--space-8); padding-top: var(--space-5); display: grid; grid-template-columns: 1fr; gap: var(--space-2); text-align: center; font-size: var(--font-small-size); color: rgba(255, 255, 255, 0.65); } .ds-footer__bottom p { margin: 0; } .ds-footer__bottom .ds-footer__bottom-copy { text-align: center; } .ds-footer__bottom .ds-footer__bottom-site { text-align: center; } .ds-footer__bottom .ds-footer__bottom-address { text-align: center; } @media (min-width: 1024px) { .ds-footer__bottom { grid-template-columns: 1fr 1fr 1fr; align-items: center; } .ds-footer__bottom .ds-footer__bottom-copy { text-align: left; } .ds-footer__bottom .ds-footer__bottom-site { text-align: center; } .ds-footer__bottom .ds-footer__bottom-address { text-align: right; } } /* ds-btn on dark for member buttons in footer. Compound .ds-btn.ds-btn--* * needed to outrank .ds-footer .ds-footer__col a (0,2,1) which otherwise * paints these white-pill buttons with white text. */ .ds-footer__actions .ds-btn.ds-btn--primary { background: var(--color-on-primary); color: var(--color-ink-900); border-color: var(--color-on-primary); } .ds-footer__actions .ds-btn.ds-btn--primary:hover { background: #e2e2e2; border-color: #e2e2e2; color: var(--color-ink-900); } .ds-footer__actions .ds-btn.ds-btn--secondary { color: var(--color-on-primary); border-color: rgba(255, 255, 255, 0.6); } .ds-footer__actions .ds-btn.ds-btn--secondary:hover { background: var(--color-on-primary); color: var(--color-ink-900); border-color: var(--color-on-primary); } /* ============================================================ * Scrim + Drawer * ============================================================ */ /* Default hidden — scrim is only visible when a drawer is open. Uses the * same positive `.is-open` class as .ds-drawer so the JS controller can * toggle both with one convention. */ .ds-scrim { position: fixed; inset: 0; background: rgba(15, 15, 15, 0.4); z-index: var(--z-scrim); opacity: 0; pointer-events: none; transition: opacity var(--motion-base) var(--ease-standard); } .ds-scrim.is-open { opacity: 1; pointer-events: auto; } /* Body scroll lock while any drawer is open — the JS controller toggles * this class on . */ body.ds-no-scroll { overflow: hidden; } .ds-drawer { position: fixed; top: 0; bottom: 0; z-index: var(--z-drawer); width: 100vw; max-width: 420px; background: var(--color-surface-0); box-shadow: var(--shadow-2); transform: translateX(100%); transition: transform var(--motion-base) var(--ease-standard); display: flex; flex-direction: column; } .ds-drawer--right { right: 0; } .ds-drawer--left { left: 0; transform: translateX(-100%); max-width: 320px; } .ds-drawer.is-open { transform: translateX(0); } .ds-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-ink-100); } .ds-drawer__title { font-size: var(--font-h2-size); letter-spacing: var(--tracking-title); text-transform: uppercase; font-weight: var(--font-w-regular); color: var(--color-ink-900); margin: 0; } .ds-drawer__close { width: 40px; height: 40px; border: 0; background: transparent; color: var(--color-ink-700); font-size: 24px; line-height: 1; } .ds-drawer__body { flex: 1; padding: var(--space-5) var(--space-6); overflow-y: auto; } .ds-drawer__footer { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--color-ink-100); } /* ============================================================ * Breadcrumb (for later pages) * ============================================================ */ .ds-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--font-small-size); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-500); padding: var(--space-4) 0; } .ds-breadcrumb__sep { color: var(--color-ink-300); } .ds-breadcrumb a { color: var(--color-ink-500); } .ds-breadcrumb a:hover { color: var(--color-ink-900); } /* ============================================================ * Cookie / KVKK consent banner * ============================================================ */ .ds-cookie-consent { position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 1200; background: var(--color-surface-0); color: var(--color-ink-900); border: 1px solid var(--color-ink-100); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); } .ds-cookie-consent[hidden] { display: none; } .ds-cookie-consent__inner { display: flex; flex-direction: column; gap: var(--space-3); max-width: 960px; margin: 0 auto; } .ds-cookie-consent__text { margin: 0; font-size: var(--font-small-size); line-height: 1.5; color: var(--color-ink-700); } .ds-cookie-consent__text a { color: var(--color-ink-900); text-decoration: underline; } .ds-cookie-consent__actions { display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; } @media (min-width: 768px) { .ds-cookie-consent__inner { flex-direction: row; align-items: center; justify-content: space-between; } } /* ============================================================ * Stock state — product card badge + detail indicators * ============================================================ */ .ds-product-card { position: relative; } .ds-product-card__badge { position: absolute; top: var(--space-3); left: var(--space-3); background: var(--color-ink-900); color: var(--color-on-primary); font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); pointer-events: none; } .ds-product-card__badge--low { background: var(--color-cta); color: var(--color-on-cta); } .ds-product-card--out .ds-product-card__image, .ds-product-card--out .ds-product-card__media { opacity: 0.6; } .ds-product-card__cta[disabled] { opacity: 0.5; cursor: not-allowed; } .ds-product-detail__stock { display: inline-block; margin-left: var(--space-3); font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: 4px 12px; border-radius: var(--radius-pill); vertical-align: middle; } .ds-product-detail__stock--out { background: var(--color-ink-900); color: var(--color-on-primary); } .ds-product-detail__stock--low { background: var(--color-cta); color: var(--color-on-cta); } .ds-product-detail__stock-notice { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); background: var(--color-surface-50); border-left: 3px solid var(--color-ink-900); font-size: var(--font-small-size); color: var(--color-ink-700); line-height: 1.5; } .ds-account__card--disabled { opacity: 0.7; } .ds-account__card--disabled .ds-btn:disabled { cursor: not-allowed; opacity: 0.6; } .ds-my-orders__empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-8) 0; } .ds-my-orders__empty { color: var(--color-ink-500); margin: 0; text-align: center; } /* ============================================================ * Branch list empty state (city has no branches) * ============================================================ */ .ds-branch-list__empty-state { text-align: center; padding: var(--space-8) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .ds-branch-list__empty-title { font-size: var(--font-h3-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--font-w-light); margin: 0; color: var(--color-ink-900); } .ds-branch-list__empty-body { max-width: 48ch; color: var(--color-ink-500); margin: 0 0 var(--space-3); } /* ============================================================ * Search drawer no-results empty state * ============================================================ */ .ds-search__empty { padding: var(--space-6) var(--space-2); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .ds-search__empty-title { font-size: var(--font-body-lg-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--font-w-light); margin: 0; color: var(--color-ink-900); } .ds-search__empty-body { color: var(--color-ink-500); margin: 0 0 var(--space-2); max-width: 36ch; } /* ============================================================ * Toast region — bottom-right stack, animated in/out * ============================================================ */ .ds-toast-region { position: fixed; bottom: var(--space-4); right: var(--space-4); left: auto; z-index: 1300; display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; max-width: calc(100vw - var(--space-8)); } .ds-toast { pointer-events: auto; min-width: 260px; max-width: 360px; background: var(--color-surface-0); color: var(--color-ink-900); border: 1px solid var(--color-ink-100); border-left-width: 4px; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-md); display: flex; align-items: flex-start; gap: var(--space-3); opacity: 0; transform: translateY(8px); transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); } .ds-toast--visible { opacity: 1; transform: translateY(0); } .ds-toast--success { border-left-color: var(--color-success); } .ds-toast--error { border-left-color: var(--color-error); } .ds-toast--info { border-left-color: var(--color-cta-lavender); } .ds-toast__body { flex: 1; font-size: var(--font-small-size); line-height: 1.45; } .ds-toast__close { border: 0; background: transparent; color: var(--color-ink-500); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 var(--space-1); } .ds-toast__close:hover { color: var(--color-ink-900); } /* ============================================================ * Address book — /hesabim/adreslerim * ============================================================ */ .ds-addresses { padding: var(--space-8) 0; } .ds-addresses__toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--space-5); } .ds-addresses__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 768px) { .ds-addresses__list { grid-template-columns: 1fr 1fr; } } .ds-address-card { padding: var(--space-4) var(--space-5); background: var(--color-surface-50); border: 1px solid var(--color-ink-100); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-2); } .ds-address-card--default { border-color: var(--color-cta-lavender); } .ds-address-card__header { display: flex; align-items: center; gap: var(--space-2); } .ds-address-card__label { font-size: var(--font-body-size); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-900); } .ds-address-card__badge { background: var(--color-cta-lavender); color: var(--color-ink-900); font-size: var(--font-caps-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-pill); } .ds-address-card__line { color: var(--color-ink-700); font-size: var(--font-small-size); margin: 0; line-height: 1.5; } .ds-address-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); } .ds-addresses__empty { text-align: center; color: var(--color-ink-500); padding: var(--space-7) 0; } .ds-addresses__form { margin-top: var(--space-6); padding: var(--space-5); background: var(--color-surface-0); border: 1px solid var(--color-ink-100); border-radius: var(--radius-md); } .ds-addresses__form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 768px) { .ds-addresses__form-grid { grid-template-columns: 1fr 1fr; } } .ds-addresses__field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-small-size); color: var(--color-ink-700); } .ds-addresses__field--wide { grid-column: 1 / -1; } .ds-addresses__field input { padding: 10px 14px; border: 1px solid var(--color-ink-100); border-radius: var(--radius-md); font-family: inherit; font-size: var(--font-body-size); background: var(--color-surface-0); } .ds-addresses__field-check { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--font-small-size); color: var(--color-ink-700); } .ds-addresses__form-actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-4); } /* ============================================================ * Loading states — spinner, button-loading, skeleton * ============================================================ */ @keyframes ds-spin { to { transform: rotate(360deg); } } @keyframes ds-skeleton-shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } .ds-spinner { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ds-spin 0.7s linear infinite; vertical-align: middle; } .ds-spinner--lg { width: 28px; height: 28px; border-width: 3px; } /* Button loading state — overlay spinner, preserve width via hiding text */ .ds-btn.ds-btn--loading { position: relative; color: transparent !important; pointer-events: none; opacity: 0.85; } .ds-btn.ds-btn--loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin-top: -8px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--color-ink-900); border-right-color: transparent; animation: ds-spin 0.7s linear infinite; } .ds-btn--loading.ds-btn--primary::after, .ds-btn--loading.ds-btn--dark::after { border-color: var(--color-on-primary); border-right-color: transparent; } /* Skeleton — generic shimmering block, can be composed into any layout */ .ds-skeleton { display: block; background: var(--color-surface-100); background-image: linear-gradient( 90deg, var(--color-surface-100) 0%, var(--color-surface-200) 40%, var(--color-surface-100) 80% ); background-size: 200px 100%; background-repeat: no-repeat; animation: ds-skeleton-shimmer 1.2s linear infinite; border-radius: var(--radius-md); } .ds-skeleton--line { height: 14px; margin: var(--space-2) 0; border-radius: var(--radius-pill); } .ds-skeleton--line--short { width: 40%; } .ds-skeleton--line--mid { width: 65%; } .ds-skeleton--line--wide { width: 90%; } .ds-skeleton--block { height: 120px; } .ds-skeleton--media { aspect-ratio: 4 / 5; } /* Product-card shaped skeleton used in grid placeholders */ .ds-skeleton-card { display: flex; flex-direction: column; gap: var(--space-2); } .ds-skeleton-card__media { aspect-ratio: 4 / 5; border-radius: 0; } .ds-skeleton-card__line { height: 14px; border-radius: var(--radius-pill); } .ds-skeleton-card__line--short { width: 40%; align-self: center; } .ds-skeleton-card__line--mid { width: 65%; align-self: center; } /* Row-shaped skeleton used for lists (orders, addresses) */ .ds-skeleton-row { height: 96px; border-radius: var(--radius-md); margin-bottom: var(--space-3); } /* Inline loader (e.g. search input right side) */ .ds-inline-loader { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-ink-500); pointer-events: none; } .ds-search__loading { padding: var(--space-6) 0; display: flex; justify-content: center; color: var(--color-ink-500); } .ds-blog-list__empty-state { text-align: center; padding: var(--space-8) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .ds-blog-list__empty-title { font-size: var(--font-h3-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--font-w-light); margin: 0; color: var(--color-ink-900); } .ds-blog-list__empty-body { max-width: 48ch; color: var(--color-ink-500); margin: 0; } /* ============================================================ * Simple auth form (forgot / reset) — single-column layout * ============================================================ */ .ds-auth-simple { padding: var(--space-8) 0; } .ds-auth-simple__inner { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); } .ds-auth-simple__body { color: var(--color-ink-700); line-height: 1.5; margin: 0; } .ds-auth-simple__form { display: flex; flex-direction: column; gap: var(--space-3); } .ds-auth-simple__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); } .ds-auth-simple__result { padding: var(--space-3) var(--space-4); background: var(--color-surface-50); border-left: 3px solid var(--color-cta-lavender); color: var(--color-ink-900); font-size: var(--font-small-size); line-height: 1.5; } .ds-auth__forgot { margin: var(--space-2) 0 0; font-size: var(--font-small-size); } .ds-auth__forgot a { color: var(--color-ink-700); text-decoration: underline; } .ds-auth__forgot a:hover { color: var(--color-ink-900); } /* ============================================================ * Email verification banner — non-blocking warning on account hub * ============================================================ */ .ds-verify-banner { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); background: var(--color-surface-50); border-left: 4px solid var(--color-cta); border-radius: var(--radius-md); flex-wrap: wrap; } .ds-verify-banner__body { flex: 1; min-width: 220px; } .ds-verify-banner__title { font-size: var(--font-body-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--font-w-regular); margin: 0 0 var(--space-1); color: var(--color-ink-900); } .ds-verify-banner__text { margin: 0; font-size: var(--font-small-size); color: var(--color-ink-700); line-height: 1.5; } /* ============================================================ * Bank transfer instructions (post-checkout thank-you page) * ============================================================ */ .ds-bank-instr { padding: var(--space-7) 0 var(--space-9); } .ds-bank-instr__inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-6); } .ds-bank-instr__label { font-size: var(--font-small-size); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-500); margin: 0 0 var(--space-2); font-weight: var(--font-w-regular); } .ds-bank-instr__order { text-align: center; } .ds-bank-instr__order-number { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 28px; letter-spacing: 0.06em; color: var(--color-ink-900); margin: 0 0 var(--space-3); font-weight: var(--font-w-bold); user-select: all; } .ds-bank-instr__total { margin: 0; color: var(--color-ink-700); font-size: var(--font-body-size); } .ds-bank-instr__total strong { font-weight: var(--font-w-bold); } .ds-bank-instr__notice { background: var(--color-accent-vitamin); border-radius: var(--radius-md); padding: var(--space-5); text-align: center; } .ds-bank-instr__notice p { margin: 0 0 var(--space-2); color: var(--color-ink-900); } .ds-bank-instr__notice p:last-child { margin-bottom: 0; } .ds-bank-instr__notice-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 22px; letter-spacing: 0.06em; font-weight: var(--font-w-bold); user-select: all; } .ds-bank-instr__notice-hint { font-size: var(--font-small-size); color: var(--color-ink-700); } .ds-bank-instr__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } .ds-form-hint { font-size: var(--font-small-size); color: var(--color-ink-500); margin: 0 0 var(--space-2); line-height: 1.5; }