/image beneath it. */
pointer-events: none;
}
.patent-badge__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
display: block;
}
.patent-badge__text {
white-space: nowrap;
color: var(--eurotherm-black);
font-size: 0.7rem;
font-weight: 700;
}
/* Listing/related-product cards: seal + visible label together inside a
compact rounded chip, bottom-right of the photo (v7s40 -- moved from
top-right, which covered the upper part of some product photos).
Width follows the text content naturally (TR "Patentli Ürün" vs EN
"Patented Product" simply render at their own natural width), never
overlapping the product name below the photo since the badge stays
confined to the image area (bottom offset, not the card body). */
.product-card .patent-badge {
/* v7s40: moved from top-right to bottom-right so the seal no longer
covers the upper part of the product photo (body/handle on some
products). Detail-page badge below is untouched. */
inset-block-start: auto;
inset-block-end: 8px;
inset-inline-end: 8px;
gap: 4px;
background: var(--eurotherm-white);
border: 1px solid rgba(0, 145, 200, 0.45);
border-radius: var(--radius-form);
padding: 3px 7px;
box-shadow: var(--shadow-soft);
max-width: calc(100% - 12px);
}
.product-card .patent-badge .patent-badge__icon {
width: 14px;
height: 14px;
}
.product-card .patent-badge .patent-badge__text {
font-size: 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
}
/* Product detail pages: bigger seal, visible label, both grouped inside
one rounded chip so icon + text read as a single badge component.
Unchanged from v7s33/v7s34. */
.product-detail__main-image .patent-badge {
inset-block-start: 14px;
inset-inline-end: 14px;
gap: 8px;
background: var(--eurotherm-white);
padding: 6px 10px;
border-radius: var(--radius-form);
box-shadow: var(--shadow-soft);
}
.product-detail__main-image .patent-badge .patent-badge__icon {
width: 34px;
height: 34px;
filter: none;
}
.product-detail__main-image .patent-badge .patent-badge__text { font-size: 0.82rem; }
@media (max-width: 420px) {
/* v7s40: was a bare .patent-badge top-right offset tweak; card badges
now own their position via .product-card .patent-badge above, so
the mobile tightening is expressed on that same selector instead
of the generic base class (which would no longer have any effect
here now that card position is set explicitly). */
.product-card .patent-badge {
inset-block-end: 6px;
inset-inline-end: 6px;
gap: 3px;
padding: 2px 5px;
max-width: calc(100% - 8px);
}
.product-card .patent-badge .patent-badge__icon { width: 12px; height: 12px; }
.product-card .patent-badge .patent-badge__text { font-size: 0.52rem; }
}
@media (max-width: 480px) {
.product-detail__main-image .patent-badge { inset-block-start: 10px; inset-inline-end: 10px; gap: 6px; padding: 5px 8px; }
.product-detail__main-image .patent-badge .patent-badge__icon { width: 27px; height: 27px; }
.product-detail__main-image .patent-badge .patent-badge__text { font-size: 0.72rem; }
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .product-card { border-radius: 16px; } }
@media (max-width: 420px) { .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
/* ==========================================================================
Generic page chrome (used by the content pages: products/production/
private-label/export/about/catalogues/contact)
========================================================================== */
.site-main { display: block; }
.page-title { font-size: 1.85rem; margin-block: 24px 14px; }
.page-content { padding-block-end: 48px; }
.page-content--narrow { max-width: 640px; }
.product-listing { padding-block-end: 48px; }
.product-detail { padding-block-end: 12px; }
/* ==========================================================================
Breadcrumbs
========================================================================== */
.breadcrumbs { padding-block: 14px; }
.breadcrumbs__list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding-inline-start: 24px; font-size: 0.82rem; color: #666; }
.breadcrumbs__item:not(:last-child)::after { content: "/"; margin-inline-start: 6px; color: var(--eurotherm-grey-mid); }
/* ==========================================================================
Product listing (category page) + mobile filter toggle
========================================================================== */
.product-search { position: relative; max-width: 480px; margin-block: 18px 22px; }
.product-search__icon { position: absolute; inset-inline-start: 14px; inset-block-start: 50%; transform: translateY(-50%); color: var(--eurotherm-grey-mid); pointer-events: none; }
.product-search__input {
width: 100%;
padding: 12px 14px 12px 42px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-form);
font-family: inherit;
font-size: 0.98rem;
background: #fff;
}
.product-listing__layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; margin-block-start: 20px; align-items: start; }
.product-listing__filters { background: var(--eurotherm-grey-light); padding: 18px; border-radius: var(--radius-box); }
.filters-toggle { display: none; }
.filters-form fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.filters-form legend { font-weight: 700; margin-block-end: 8px; padding: 0; font-size: 0.88rem; }
.filters-form__pill {
display: block;
padding: 7px 4px;
font-size: 0.88rem;
color: #333;
border-radius: var(--radius-form);
cursor: pointer;
background: none;
border: none;
text-align: start;
width: 100%;
}
.filters-form__pill:hover { background: #ECECEC; text-decoration: none; }
.filters-form__pill.is-active { color: var(--eurotherm-teal); font-weight: 700; }
.product-listing__count { color: #666; margin-block-end: 14px; font-size: 0.9rem; }
@media (max-width: 900px) {
.product-listing__layout { grid-template-columns: 1fr; }
.filters-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: var(--eurotherm-grey-light);
border: 1px solid var(--border-soft);
border-radius: var(--radius-form);
padding: 12px 16px;
font-weight: 700;
cursor: pointer;
margin-block-end: 12px;
}
.product-listing__filters { display: none; }
.product-listing__filters.is-open { display: block; }
}
/* ==========================================================================
Product detail
========================================================================== */
.product-detail__top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; padding-block: 28px; }
.product-detail__gallery,
.product-detail__summary {
min-width: 0;
max-width: 100%;
}
.product-detail__main-image {
aspect-ratio: 1/1;
background: var(--eurotherm-grey-light);
border: 1px solid var(--border-soft);
border-radius: var(--radius-image);
overflow: hidden;
position: relative;
}
.product-detail__main-image img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__eyebrow { color: #555; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; margin-block-end: 6px; text-transform: uppercase; }
.product-detail__title { font-size: 1.7rem; margin-block-end: 6px; }
.product-detail__code { color: #555; margin-block-end: 16px; font-variant-numeric: tabular-nums; }
.product-detail__description { margin-block-end: 20px; }
.product-detail__summary .btn { margin-block-end: 22px; }
.product-detail__cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-block-end: 16px; }
.product-detail__cta-row .btn { margin-block-end: 0; }
@media (max-width: 900px) {
.product-detail__top {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
}
/* Draft/admin content box -- for copy that is NOT verified and must never
be mistaken for real published content (spec section 9). */
.draft-box {
background: var(--eurotherm-teal-wash);
border: 1px dashed var(--eurotherm-teal);
border-radius: var(--radius-box);
padding: 14px 16px;
font-size: 0.85rem;
color: #7a0f20;
margin-block: 14px;
}
.draft-box__label {
display: inline-block;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
background: var(--eurotherm-teal);
color: #fff;
padding: 2px 8px;
border-radius: var(--radius-pill);
margin-block-end: 6px;
}
/* Tables -- horizontal scroll wrapper on mobile instead of squeezing/breaking */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 0; border-radius: var(--radius-image); margin-block-start: 14px; width: 100%; max-width: 100%; }
table.variant-table, table.spec-table {
width: 100%;
min-width: 420px;
border-collapse: collapse;
margin-block-start: 0;
}
table.variant-table caption { text-align: start; font-weight: 700; margin-block-end: 8px; font-size: 0.9rem; }
.variant-table th, .variant-table td, .spec-table th, .spec-table td {
border: 1px solid var(--eurotherm-grey-mid);
padding: 10px 12px;
text-align: start;
font-size: 0.88rem;
white-space: nowrap;
}
.variant-table thead th, .spec-table th[scope="row"] { background: var(--eurotherm-grey-light); }
.variant-table tbody tr.is-selected { background: var(--eurotherm-teal-wash); }
.variant-table tbody tr.is-selected td { font-weight: 700; }
.variant-select-btn { white-space: nowrap; }
/* Tighten the gap between the variant table's per-row action buttons and
the CTA row below it -- .product-detail__summary .btn's 22px bottom
margin (needed for the main Teklif Al / WhatsApp buttons) was also
landing on every in-table .variant-select-btn, making rows taller than
necessary and leaving a large gap before the CTA row. */
.product-detail__summary .variant-table .variant-select-btn {
margin-block-end: 0;
}
.variant-table td:last-child {
vertical-align: middle;
}
.table-scroll + .product-detail__cta-row {
margin-block-start: 6px;
}
.product-detail__specs, .product-detail__applications, .product-detail__downloads,
.product-detail__more-info, .product-detail__related, .product-detail__quote-form { padding-block: 28px; }
.product-detail__more-info { border-block-start: 1px solid var(--eurotherm-grey-light); }
.product-detail__more-info h2 { font-size: 1.15rem; margin-block-end: 8px; }
.product-detail__more-info p { margin-block-end: 8px; }
.product-detail__private-label { padding: 28px; text-align: center; border-radius: var(--radius-box); margin-block: 20px; }
.downloads-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* v7s31: the "Bu Ürün için Teklif İste / Request a Quote for This Product"
gray container sat almost flush against its own form fields with sharp
corners. Give it its own padding (overriding the shared 28px
padding-block rule above, which still applies unchanged to
.product-detail__more-info and .product-detail__related) and round its
corners to the site's standard content-box radius. Scoped to
.product-detail__quote-form only -- no other .section--tinted usage
(homepage "Eurotherm by Ekpar" / "Öne Çıkan Ürünler") is affected, and
the box's own width still tracks its parent .container exactly as
before, so it stays centered and aligned with the rest of the page. */
.product-detail__quote-form {
padding: 40px 36px;
border-radius: var(--radius-box);
}
@media (max-width: 600px) {
.product-detail__quote-form { padding: 28px 20px; }
}
/* ==========================================================================
Variant choice modal -- opened from a product detail page's per-variant
"Bu varyant için teklif al" button. Fully independent of the product image
lightbox (see the "Product image lightbox" section below): separate class
namespace, separate open/close state, never nested inside it. Reuses the
same brand colours/buttons/typography as the rest of the site -- no new
design system.
========================================================================== */
.variant-choice-overlay {
position: fixed;
inset: 0;
background: rgba(17, 17, 17, 0.86);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.variant-choice-modal {
position: relative;
width: min(460px, 100%);
max-height: 90vh;
overflow-y: auto;
background: var(--eurotherm-white);
border-radius: var(--radius-modal);
box-shadow: var(--shadow-modal);
padding: 24px;
box-sizing: border-box;
}
.variant-choice-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-block-end: 16px;
}
.variant-choice-modal__title {
font-size: 1.05rem;
margin: 0;
}
.variant-choice-modal__close {
flex-shrink: 0;
width: 44px; height: 44px; /* v7s48: was 36x36, WCAG 44x44 touch-target minimum */
display: flex; align-items: center; justify-content: center;
background: var(--eurotherm-white);
border: 1px solid var(--border-soft);
border-radius: var(--radius-form);
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
color: var(--eurotherm-black);
}
.variant-choice-modal__product-info {
background: var(--eurotherm-grey-light);
border-radius: var(--radius-box);
padding: 14px 16px;
margin-block-end: 20px;
font-size: 0.92rem;
}
.variant-choice-modal__product-info p { margin: 0; padding-block: 3px; }
.variant-choice-modal__product-info strong { font-weight: 700; }
.variant-choice-modal__actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.variant-choice-modal__actions .btn { width: 100%; text-align: center; }
.variant-choice-modal__close-text {
display: block;
width: 100%;
margin-block-start: 14px;
padding: 10px 18px;
border-radius: var(--radius-form);
border: 2px solid var(--eurotherm-black);
background: var(--eurotherm-white);
color: var(--eurotherm-black);
font-weight: 700;
cursor: pointer;
text-align: center;
}
@media (max-width: 480px) {
.variant-choice-modal { padding: 18px; }
.variant-choice-modal__title { font-size: 1rem; }
}
/* ==========================================================================
Certificate grid
========================================================================== */
.certificate-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 18px; }
.certificate-filters__pill { border: 1px solid var(--eurotherm-grey-mid); border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; color: #333; background: none; cursor: pointer; }
.certificate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-block-end: 36px; }
.certificate-card { border: 1px solid var(--border-soft); border-radius: var(--radius-image); padding: 16px; }
.certificate-card--draft { grid-column: 1 / -1; background: var(--eurotherm-teal-wash); border-color: var(--eurotherm-teal); text-align: center; font-weight: 700; color: var(--eurotherm-teal); }
@media (max-width: 900px) { .certificate-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .certificate-grid { grid-template-columns: 1fr; } }
/* ==========================================================================
Info-block layout (used by uretim/ozel-marka-uretim/ihracat/hakkimizda)
========================================================================== */
.info-blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.info-block {
border: 1px solid var(--border-soft);
border-radius: var(--radius-box);
padding: 20px;
}
.info-block h3 { font-size: 1rem; margin-block-end: 8px; }
.info-block p { font-size: 0.9rem; margin-block-end: 0; }
@media (max-width: 700px) { .info-blocks { grid-template-columns: 1fr; } }
/* ==========================================================================
Hakkımızda/About page layout only -- v7s20: replaces the v7s18/v7s19
.info-block-based cards with a dedicated, more prestigious "company
summary + mission + timeline" layout. Entirely scoped to .about-*
classes so .info-block/.info-blocks/.fact-list base rules (still used
by uretim/ozel-marka-uretim/ihracat) are completely untouched.
========================================================================== */
.about-intro {
max-width: 760px;
margin-block-end: 32px;
}
.about-overview {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
margin-block-end: 52px;
}
.about-facts-card,
.about-mission-card {
border-radius: var(--radius-box);
padding: 28px;
}
.about-facts-card h2,
.about-mission-card h2 {
font-size: 1.1rem;
margin-block-end: 16px;
}
.about-facts-card {
background: var(--eurotherm-grey-light);
}
/* .fact-list's base rule (main.css, "Info-block layout" section above)
gives a border-block-end the same colour as this card's own background,
so it becomes invisible here -- override with a slightly darker, still
subtle divider, scoped to this card only. Red checkmarks are inherited
from the base .fact-list li::before rule and kept as-is. */
.about-facts-card .fact-list li {
border-block-end-color: rgba(26, 26, 26, 0.1);
}
.about-facts-card .fact-list li:last-child {
border-block-end: none;
}
.about-mission-card {
position: relative;
overflow: hidden;
background: var(--eurotherm-black);
color: #fff;
}
.about-mission-card::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
height: 4px;
background: var(--eurotherm-teal);
}
.about-mission-card h2 {
color: #fff;
}
.about-mission-card p {
color: #e8e8e8;
font-size: 0.95rem;
margin-block-end: 0;
}
.about-history-section {
max-width: 1040px;
margin-inline: auto;
}
.about-history-heading {
margin-block-end: 26px;
text-align: center;
}
.about-history-heading__eyebrow {
display: block;
margin-block-end: 6px;
color: var(--eurotherm-teal);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.about-history-heading h2 {
font-size: 1.4rem;
margin-block-end: 0;
}
.about-timeline {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 40px;
row-gap: 34px;
}
.about-timeline__item {
border-inline-start: 3px solid var(--eurotherm-teal);
padding-inline-start: 18px;
}
.about-timeline__period {
color: var(--eurotherm-teal);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.04em;
margin-block-end: 4px;
}
.about-timeline__title {
font-size: 1rem;
margin-block-end: 8px;
}
.about-timeline__item p:not(.about-timeline__period) {
font-size: 0.92rem;
color: #444;
margin-block-end: 0;
}
@media (max-width: 800px) {
.about-overview {
grid-template-columns: 1fr;
gap: 18px;
margin-block-end: 32px;
}
.about-timeline {
grid-template-columns: 1fr;
row-gap: 26px;
}
.about-history-heading {
text-align: start;
}
}
/* Three-card variant of .info-blocks (Üretim, İhracat, Özel Marka Üretim
info cards after the v6h prototype-language cleanup -- same visual
family, just an extra column on desktop). */
.info-blocks--triple { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .info-blocks--triple { grid-template-columns: 1fr; } }
/* Brand-mark placeholder card -- used only where the source catalogue has
no product photo at all (Bahçe Musluğu). Shows the Eurotherm logo plus a
plain caption instead of a fabricated product photo or a "hazırlanıyor"
note, so it never reads as a real product image. */
.brand-placeholder-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
aspect-ratio: 4 / 3;
background: var(--eurotherm-grey-light);
border-bottom: 1px solid var(--eurotherm-grey-mid);
padding: 16px;
}
.brand-placeholder-card--square {
aspect-ratio: 1 / 1;
height: 100%;
border: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
border-radius: var(--radius-image);
}
.brand-placeholder-card__logo { max-width: 55%; max-height: 40px; width: auto; height: auto; }
.brand-placeholder-card__logo-fallback {
font-weight: 800;
letter-spacing: 0.06em;
font-size: 0.95rem;
color: var(--eurotherm-black);
}
.brand-placeholder-card__caption {
font-size: 0.78rem;
font-weight: 600;
color: var(--eurotherm-grey-metallic);
text-align: center;
}
/* Homepage "Eurotherm by Ekpar" brand card -- replaces the old empty
"Fabrika / marka görseli eklenecek" placeholder with a clean, responsive
panel built from the logo we actually have, rather than a fabricated
factory photo. */
.brand-showcase {
display: flex;
align-items: center;
justify-content: center;
background: var(--eurotherm-white);
border: 1px solid var(--border-soft);
border-radius: var(--radius-box);
box-shadow: var(--shadow-soft);
padding: 40px 28px;
min-height: 260px;
}
.brand-showcase img { width: min(100%, 260px); height: auto; }
.brand-showcase__fallback {
display: none;
flex-direction: column;
align-items: center;
gap: 6px;
}
.brand-showcase__fallback strong { font-size: 1.4rem; letter-spacing: 0.04em; }
.brand-showcase__fallback span { font-size: 0.85rem; color: var(--eurotherm-grey-metallic); }
@media (max-width: 480px) { .brand-showcase { padding: 28px 18px; min-height: 200px; } }
/* Homepage "Üretim" section product collage -- three real, already-verified
product photos standing in for a future factory photo. Explicitly
presented as product examples (see the alt text/caption), never implied
to be a production-line photo. */
.product-collage {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.product-collage img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
background: var(--eurotherm-white);
border: 1px solid var(--border-soft);
border-radius: var(--radius-image);
padding: 10px;
}
.product-collage__caption {
grid-column: 1 / -1;
font-size: 0.76rem;
color: var(--eurotherm-grey-metallic);
text-align: center;
margin-block-start: 4px;
}
@media (max-width: 480px) { .product-collage { gap: 6px; } }
/* Quiet, visitor-friendly info box (teklif-al.html) -- explains the form
isn't wired to a live backend yet, without looking like a warning/error
or a developer note. */
.form-info-notice {
background: var(--eurotherm-grey-light);
border: 1px solid var(--border-soft);
border-radius: var(--radius-box);
padding: 14px 18px;
font-size: 0.88rem;
color: #333;
margin-block-end: 22px;
}
/* Simple info panel used by pages that need a single centred call-to-action
block instead of a grid of placeholder cards (Kalite ve Sertifikalar). */
.info-panel {
border: 1px solid var(--border-soft);
border-radius: var(--radius-box);
padding: 32px;
max-width: 68ch;
}
.info-panel p { color: #444; margin-block-end: 20px; }
.fact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fact-list li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 0.92rem;
padding-block: 8px;
border-block-end: 1px solid var(--eurotherm-grey-light);
}
.fact-list li::before { content: "✓"; color: var(--eurotherm-teal); font-weight: 800; flex-shrink: 0; }
/* Catalogue cards */
.catalogue-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.catalogue-card {
border: 1px solid var(--border-soft);
border-radius: var(--radius-image);
padding: 20px;
display: flex; flex-direction: column; gap: 10px;
}
.catalogue-card--draft { border-style: dashed; }
@media (max-width: 700px) { .catalogue-grid { grid-template-columns: 1fr; } }
/* Real catalogue PDF download area -- the one card in this section that
links to an actual file (assets/docs/eurotherm-urun-katalogu.pdf) rather
than being a design placeholder. Kept visually in the same family as
.catalogue-card (border/radius/padding) but wider/standalone since it's
the primary action on the page. */
.catalogue-download {
border: 1px solid var(--border-soft);
border-radius: var(--radius-image);
padding: 28px;
margin-block-end: 28px;
display: flex;
flex-direction: column;
gap: 10px;
}
.catalogue-download__title { margin: 0; font-size: 1.3rem; }
.catalogue-download__desc { margin: 0; color: #444; max-width: 62ch; }
.catalogue-download__meta {
margin: 0;
font-size: 0.82rem;
font-weight: 700;
color: var(--eurotherm-grey-metallic);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.catalogue-download__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
margin-block-start: 6px;
}
.catalogue-download__actions .btn svg { flex-shrink: 0; }
.catalogue-download__view-link { font-weight: 600; font-size: 0.92rem; }
.catalogue-download__note {
margin: 4px 0 0;
font-size: 0.82rem;
color: var(--eurotherm-grey-metallic);
}
@media (max-width: 480px) {
.catalogue-download { padding: 20px; }
.catalogue-download__actions { flex-direction: column; align-items: stretch; gap: 10px; }
.catalogue-download__actions .btn { width: 100%; }
}
/* Contact page layout */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-grid dt { font-weight: 700; font-size: 0.85rem; color: var(--eurotherm-grey-metallic); margin-block-start: 14px; }
.contact-grid dd { margin: 2px 0 0; font-size: 1rem; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
/* Contact page map -- real Google Maps embed (no API key required), fixed
16:9 frame so the map never stretches/distorts regardless of viewport
width. A plain-text link below opens the verified Google Maps place page
in a new tab for visitors who want the full interactive map / directions. */
.contact-map { display: flex; flex-direction: column; gap: 10px; }
.contact-map__frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border: 1px solid var(--border-soft);
border-radius: var(--radius-box);
overflow: hidden;
background: var(--eurotherm-grey-light);
}
.contact-map__frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.contact-map__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
font-weight: 600;
align-self: flex-start;
}
.contact-map__privacy-gate {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
text-align: center;
padding: 24px;
background: var(--eurotherm-grey-light);
border-radius: var(--radius-box);
}
.contact-map__privacy-gate p {
max-width: 46ch;
font-size: 0.9rem;
color: var(--eurotherm-black);
margin: 0;
}
.contact-map__privacy-gate .btn {
white-space: nowrap;
}
.legal-content {
max-width: 72ch;
margin: 0 auto;
padding-block: 8px 48px;
}
.legal-content .section__intro { max-width: 72ch; }
.legal-content section { margin-block-start: 36px; }
.legal-content h2 {
font-size: 1.15rem;
margin-block-end: 10px;
padding-block-start: 8px;
border-block-start: 1px solid var(--eurotherm-grey-mid);
}
.legal-content section:first-of-type h2 { border-block-start: 0; padding-block-start: 0; }
.legal-content h3 { font-size: 1rem; margin-block: 16px 8px; }
.legal-content p { margin-block-end: 12px; line-height: 1.6; }
.legal-content ul, .legal-content ol { margin: 0 0 12px; padding-inline-start: 22px; }
.legal-content li { margin-block-end: 6px; line-height: 1.6; }
.legal-content a { text-decoration: underline; text-underline-offset: 2px; }
.legal-content .legal-meta { color: var(--eurotherm-grey-metallic); font-size: 0.85rem; margin-block-end: 24px; }
/* Homepage İletişim section map -- v7s13: reuses the same .contact-map
system as the İletişim page, only overriding the frame's height (desktop
~320-380px, mobile ~260-320px) instead of a 16:9 ratio, so the map stays
visually aligned with the shorter contact text column next to it instead
of towering over it. */
.split__media .contact-map { width: 100%; }
.split__media .contact-map__frame {
aspect-ratio: unset;
height: clamp(320px, 28vw, 380px);
}
@media (max-width: 900px) {
.split__media .contact-map__frame { height: clamp(260px, 60vw, 320px); }
}
/* ==========================================================================
Forms
========================================================================== */
.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-block-start: 16px; }
.quote-form__row { display: flex; flex-direction: column; gap: 6px; }
.quote-form__row--full { grid-column: 1 / -1; }
.quote-form label { font-size: 0.85rem; font-weight: 700; }
.quote-form input[type="text"],
.quote-form input[type="email"],
.quote-form input[type="tel"],
.quote-form select,
.quote-form textarea {
padding: 10px 12px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-form);
font-family: inherit;
font-size: 0.95rem;
background: #fff;
}
.quote-form__row--checkbox { flex-direction: row; align-items: center; gap: 8px; }
.quote-form__row--checkbox label { font-weight: 500; }
.quote-form__row--locked input { background: var(--eurotherm-grey-light); }
.quote-form__privacy-note { font-size: 0.85rem; color: var(--eurotherm-grey-metallic); max-width: 60ch; margin-block-end: 4px; }
.phone-field { display: flex; gap: 8px; max-width: 100%; }
.phone-field__code { flex: 0 0 auto; width: 42%; max-width: 190px; min-width: 108px; }
.phone-field input[type="tel"] { flex: 1 1 auto; min-width: 0; }
@media (max-width: 420px) {
.phone-field { flex-wrap: wrap; }
.phone-field__code, .phone-field input[type="tel"] { width: 100%; max-width: none; }
}
.required { color: var(--eurotherm-teal); }
.quote-form button[type="submit"] { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 700px) { .quote-form { grid-template-columns: 1fr; } }
.form-success {
display: none;
background: #F0FAF0;
border: 1px solid #2E7D32;
color: #1b5e20;
border-radius: var(--radius-box);
padding: 16px 18px;
margin-block-start: 16px;
font-size: 0.92rem;
}
.form-success.is-visible { display: block; }
.form-error {
display: none;
background: var(--color-error-bg);
border: 1px solid var(--color-error);
color: var(--color-error);
border-radius: var(--radius-box);
padding: 16px 18px;
margin-block-start: 16px;
font-size: 0.92rem;
}
.form-error.is-visible { display: block; }
/* Honeypot: a real (not type="hidden") field bots fill in but people never
see -- off-screen, not display:none, since some crawlers skip fields
display:none hides. Real users/screen readers never reach it (no tab
stop, aria-hidden, no visible label to read). */
.form-honeypot-field {
position: absolute;
inset-inline-start: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form-turnstile { margin-block: 14px 4px; }
.quote-form button[type="submit"][disabled] { opacity: 0.6; cursor: not-allowed; }
/* ==========================================================================
Footer
========================================================================== */
/* Global content-to-footer spacing -- v7s22: replaces the old page-specific
Contact-only padding (v7s14/v7s15, removed above) with one shared rule
that applies sitewide, on every page, in both languages. Uses the adjacent
sibling selector so it only ever adds space directly above the black
footer, never touching the footer's own background, padding, or content.
clamp() keeps it from being too large on mobile or too small on desktop. */
.site-main + .site-footer {
margin-block-start: clamp(56px, 6vw, 80px);
}
.site-footer { background: var(--eurotherm-black); color: #ccc; padding-block-start: 40px; }
.site-footer__top { padding-block-end: 24px; border-block-end: 1px solid #333; margin-block-end: 28px; }
.site-footer__brand-statement { color: #ccc; font-size: 0.88rem; margin-block-start: 12px; max-width: 60ch; }
.site-footer h2 { color: var(--eurotherm-white); font-size: 0.92rem; margin-block-end: 12px; }
.site-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block-end: 30px; }
.site-footer__grid a { color: #ccc; font-size: 0.85rem; display: block; margin-block-end: 8px; }
.site-footer__grid p { color: #ccc; font-size: 0.85rem; margin: 0 0 6px; }
.site-footer__grid a:hover { color: #fff; }
.site-footer__bottom { border-block-start: 1px solid #333; padding-block: 18px; font-size: 0.78rem; color: #A8A8A8; }
/* v7s48: the global `p { color: #333; }` rule above otherwise wins over the inherited .site-footer__bottom color for the copyright itself (a directly-matching rule always beats an inherited value), leaving it near-invisible on the dark footer (#333 on #1A1A1A measured 1.38:1). Declared explicitly here so it can never be shadowed again -- measures 7.32:1 on #1A1A1A. */
.site-footer__bottom,
.site-footer__bottom p {
color: #A8A8A8;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-block-start: 10px; }
.site-footer__legal a { color: var(--eurotherm-grey-mid); font-size: 0.78rem; text-decoration: underline; text-underline-offset: 2px; }
.site-footer__legal a:hover, .site-footer__legal a:focus-visible { color: var(--eurotherm-white); }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }
.admin-notice {
background: #FFF8E1;
border: 1px dashed #C9A227;
padding: 12px 16px;
border-radius: var(--radius-box);
font-size: 0.85rem;
color: #6b5900;
}
.link-arrow { font-weight: 700; display: inline-block; }
[dir="rtl"] .breadcrumbs__item:not(:last-child)::after { content: "\\"; }
/* ==========================================================================
v7r homepage visual rhythm experiment
Scoped entirely under body.page-home (index.html / en/index.html only).
Removing the "page-home" class from
removes this experiment
completely; it has zero effect on any other page.
========================================================================== */
/* -- Hero: more breathing room around headline/support/actions. Background
is owned entirely by the base .hero rule now (v9 dark "Akış Hattı"
scene) -- this experiment only ever touches spacing, not color. -- */
body.page-home .hero__inner { padding-block: 84px; }
body.page-home .hero__headline { margin-block-end: 22px; }
body.page-home .hero__support { margin-block-end: 32px; }
body.page-home .hero__actions { gap: 18px; }
/* -- Section background rhythm -- */
body.page-home .section--categories { background: var(--eurotherm-white); }
body.page-home .section--manufacturing { background: var(--eurotherm-white); }
body.page-home .section--quality { background: var(--eurotherm-white); }
body.page-home .section--catalogue { background: var(--eurotherm-white); }
body.page-home .section--tinted { background: #F5F6F7; } /* Eurotherm by Ekpar + Öne Çıkan Ürünler */
body.page-home .section--contact { background: #F5F6F7; }
/* .section--accent (Özel Marka Üretimi, final CTA) intentionally left
untouched -- keeps the existing red-accent structure as instructed. */
/* -- Section vertical rhythm (desktop ~72-88px, varied per section rather
than one mechanical value) -- */
body.page-home .section--categories { padding-block: 80px; }
body.page-home .section--brand { padding-block: 76px; }
body.page-home .section--manufacturing { padding-block: 80px; }
body.page-home .section--private-label { padding-block: 76px; }
body.page-home .section--quality { padding-block: 76px; }
body.page-home .section--selected-products { padding-block: 84px; }
body.page-home .section--catalogue { padding-block: 72px; }
body.page-home .section--final-cta { padding-block: 80px; }
body.page-home .section--contact { padding-block: 84px; }
/* -- Small corporate red accent above section titles -- v7s restricts this
to exactly three sections (Ürün Kategorileri, Üretim, Kalite Yaklaşımı).
40px x 3px, 12px above the title, brand red, lightly rounded ends. -- */
body.page-home .section--categories .section__title,
body.page-home .section--manufacturing .section__title,
body.page-home .section--quality .section__title {
position: relative;
}
body.page-home .section--categories .section__title::before,
body.page-home .section--manufacturing .section__title::before,
body.page-home .section--quality .section__title::before {
content: "";
display: block;
width: 40px;
height: 3px;
border-radius: 2px;
background: var(--eurotherm-teal);
margin-block-end: 12px;
}
body.page-home .section--quality .section__title::before {
margin-inline: auto;
}
/* -- Tablet: ~60-72px rhythm -- */
@media (max-width: 900px) {
body.page-home .hero__inner { padding-block: 64px; }
body.page-home .section--categories { padding-block: 64px; }
body.page-home .section--brand { padding-block: 64px; }
body.page-home .section--manufacturing { padding-block: 64px; }
body.page-home .section--private-label { padding-block: 64px; }
body.page-home .section--quality { padding-block: 64px; }
body.page-home .section--selected-products { padding-block: 68px; }
body.page-home .section--catalogue { padding-block: 64px; }
body.page-home .section--final-cta { padding-block: 64px; }
body.page-home .section--contact { padding-block: 68px; }
}
/* -- Mobile: ~48-60px rhythm -- */
@media (max-width: 600px) {
body.page-home .hero__inner { padding-block: 52px; }
body.page-home .section--categories { padding-block: 52px; }
body.page-home .section--brand { padding-block: 48px; }
body.page-home .section--manufacturing { padding-block: 52px; }
body.page-home .section--private-label { padding-block: 52px; }
body.page-home .section--quality { padding-block: 52px; }
body.page-home .section--selected-products { padding-block: 56px; }
body.page-home .section--catalogue { padding-block: 48px; }
body.page-home .section--final-cta { padding-block: 52px; }
body.page-home .section--contact { padding-block: 56px; }
}
/* ==========================================================================
v7s homepage refinement pass (typography scale, 3x2 category grid, trust
strip, reduced repetition). Also scoped entirely under body.page-home --
builds on the v7r block above rather than replacing it wholesale.
========================================================================== */
/* -- Typography scale: font-FAMILY was intentionally left unchanged in this
round. Barlow Semi Condensed / Source Sans 3 could not be sourced as real,
licensed local WOFF2 files in this environment (see report), and per
instruction no placeholder/corrupt font files were created. The
requested size / line-height / weight / letter-spacing rhythm is still
applied here using the existing system font stack. -- */
body.page-home .hero__headline {
font-size: clamp(2.125rem, 4vw, 3rem);
line-height: 1.08;
font-weight: 700;
letter-spacing: -0.015em;
}
body.page-home .section__title {
font-size: clamp(1.625rem, 2.6vw, 1.875rem);
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.01em;
}
/* -- Product category grid: 3x2 on desktop instead of a single 6-wide row. -- */
body.page-home .category-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
/* Reserve consistent vertical space for the title line so a 2-line category
name in one card doesn't visibly unbalance its row against 1-line names. */
body.page-home .category-card__title { min-height: 2.4em; }
/* -- v7s3: modest ~10% desktop scale-down. Centering the 3x2 grid inside a
narrower max-width (rather than shrinking gap/columns) makes the whole
block read a bit less oversized without touching card internals. -- */
body.page-home .section--categories .category-grid {
width: 100%;
max-width: 1040px;
margin-inline: auto;
}
@media (max-width: 900px) {
body.page-home .category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
}
@media (max-width: 480px) {
body.page-home .category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
}
/* Very small screens: keep the 2-column layout, just tighten type/padding
so nothing overflows at 360px and below. */
@media (max-width: 380px) {
body.page-home .category-card__title { font-size: 0.86rem; padding: 10px 10px 3px; min-height: 2.3em; }
body.page-home .category-card__cta { padding: 0 10px 10px; font-size: 0.78rem; }
}
/* -- Hero trust strip (v7s1 rewrite): a single, quiet, dark corporate
band -- not a set of separate cards. No icons, no per-item background,
no shadow, no rounded boxes. Thin, low-opacity internal grid dividers
only; a small brand-red line marks the top edge. -- */
body.page-home .home-trust {
background: #171A1D;
color: #FFFFFF;
border-block-start: 3px solid var(--eurotherm-teal);
padding-block: 22px;
}
body.page-home .home-trust__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.page-home .home-trust__list li {
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.01em;
color: #FFFFFF;
text-align: center;
padding-inline: 18px;
border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}
body.page-home .home-trust__list li:first-child {
border-inline-start: 0;
}
/* -- v7s4: EN-only fix. Some EN trust-strip items wrap to two lines,
which stretches the grid row and leaves single-line items sitting
near the top of their cell instead of centered. Flex-center each
item vertically and horizontally within its own cell -- TR is
unaffected since this selector is scoped to html[lang="en"]. -- */
html[lang="en"] body.page-home .home-trust__list li {
display: flex;
align-items: center;
justify-content: center;
min-height: 2.6em;
line-height: 1.3;
}
@media (max-width: 900px) {
body.page-home .home-trust__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Reset the desktop vertical dividers; tablet/mobile use a 2-col
grid with its own top/left divider logic below. */
body.page-home .home-trust__list li {
border-inline-start: 0;
border-block-start: 1px solid rgba(255, 255, 255, 0.14);
padding: 12px;
}
/* First row (items 1-2) needs no top divider. */
body.page-home .home-trust__list li:nth-child(-n+2) {
border-block-start: 0;
}
/* Right-hand column gets a vertical divider instead. */
body.page-home .home-trust__list li:nth-child(even) {
border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}
}
@media (max-width: 700px) {
body.page-home .home-trust {
padding-block: 16px;
}
body.page-home .home-trust__list li {
font-size: 0.8rem;
padding-inline: 12px;
}
}
/* -- v7s1: refined shadow/hover for homepage category + featured-product
cards only (Ürün Kategorileri + Öne Çıkan Ürünler). Does not touch
urunler.html/en/urunler.html product cards or any other page. No red
border on hover here -- uses the same neutral border in both states. -- */
body.page-home .category-card,
body.page-home .product-card {
box-shadow: 0 4px 14px rgba(17, 26, 31, 0.05);
border-color: var(--border-soft);
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
body.page-home .category-card:hover,
body.page-home .product-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(17, 26, 31, 0.09);
border-color: var(--border-soft);
}
@media (prefers-reduced-motion: reduce) {
body.page-home .category-card,
body.page-home .product-card {
transition: none;
}
body.page-home .category-card:hover,
body.page-home .product-card:hover {
transform: none;
}
}
/* ==========================================================================
v7s3 scale-down pass
Scoped entirely under body.page-home (index.html / en/index.html only).
Only changes: hero/section title clamp() sizes (edited above, in place)
and centered max-width constraints on the categories/selected-products
grids below. No layout redesign, no card-internal changes, no other
page affected.
========================================================================== */
/* -- Featured Products grid: same centered max-width treatment as the
category grid above, so the two homepage grids read at a matching
visual scale. Card internals (image, title, price/CTA, hover, radius)
are untouched -- only the outer grid width is constrained. -- */
body.page-home .section--selected-products .product-grid {
width: 100%;
max-width: 1040px;
margin-inline: auto;
}
/* -- Below 1100px the grids should behave exactly as they did before this
round: full-width, letting the existing 3x2 / 2-col responsive column
rules (defined above) take over without an artificial width cap. -- */
@media (max-width: 1100px) {
body.page-home .section--categories .category-grid,
body.page-home .section--selected-products .product-grid {
max-width: 100%;
}
}
/* ==========================================================================
Product image lightbox (assets/js/product-image-lightbox.js)
Replaces the retired 360-degree prototype viewer. Two pieces:
1. .product-image-zoom-trigger -- small button injected by JS into the
bottom-right corner of .product-detail__main-image (which already has
position: relative, set above; its size/aspect-ratio is untouched).
2. .product-image-lightbox -- the modal overlay, built + torn down on
each open/close, never left in the DOM while closed.
========================================================================== */
.product-image-zoom-trigger {
position: absolute;
inset-block-end: 10px;
inset-inline-end: 10px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
min-height: 44px; /* v7s48: was 40px, WCAG 44x44 touch-target minimum */
background: rgba(26, 26, 26, 0.72);
color: var(--eurotherm-white);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: var(--radius-form);
font-size: 0.78rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: background-color 0.15s ease;
}
.product-image-zoom-trigger:hover,
.product-image-zoom-trigger:focus-visible {
background: var(--eurotherm-teal);
border-color: var(--eurotherm-teal);
}
.product-image-zoom-trigger:focus-visible {
outline: 2px solid var(--eurotherm-white);
outline-offset: 2px;
}
.product-image-zoom-trigger__icon { flex: none; }
.product-image-zoom-trigger__text { white-space: nowrap; }
@media (max-width: 600px) {
.product-image-zoom-trigger {
inset-block-end: 8px;
inset-inline-end: 8px;
padding: 0;
min-width: 44px;
min-height: 44px;
justify-content: center; /* v7s48: icon-only mobile state now meets 44x44 touch-target minimum (was ~36x40) */
}
.product-image-zoom-trigger__text { display: none; }
}
.product-image-lightbox {
position: fixed;
inset: 0;
background: rgba(17, 17, 17, 0.86);
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
}
.product-image-lightbox__dialog {
position: relative;
width: auto;
max-width: 92vw;
max-height: 88vh;
display: flex;
align-items: center;
justify-content: center;
}
.product-image-lightbox__close {
position: absolute;
inset-block-start: -14px;
inset-inline-end: -14px;
width: 44px;
height: 44px; /* v7s48: was 40x40, WCAG 44x44 touch-target minimum */
display: flex;
align-items: center;
justify-content: center;
background: var(--eurotherm-white);
border: 1px solid var(--border-soft);
border-radius: var(--radius-form);
font-size: 1.4rem;
line-height: 1;
color: var(--eurotherm-black);
cursor: pointer;
z-index: 1;
}
.product-image-lightbox__close:hover,
.product-image-lightbox__close:focus-visible {
color: var(--eurotherm-white);
background: var(--eurotherm-teal);
border-color: var(--eurotherm-teal);
}
.product-image-lightbox__close:focus-visible {
outline: 2px solid var(--eurotherm-white);
outline-offset: 2px;
}
.product-image-lightbox__image-wrap {
max-width: 92vw;
max-height: 88vh;
background: var(--eurotherm-white);
border-radius: var(--radius-image);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
box-sizing: border-box;
}
.product-image-lightbox__image {
display: block;
width: auto;
height: auto;
max-width: min(1200px, 88vw);
max-height: calc(88vh - 24px);
object-fit: contain;
}
.product-image-lightbox__error {
font-size: 0.9rem;
color: var(--eurotherm-teal);
text-align: center;
padding: 40px 20px;
margin: 0;
}
@media (max-width: 600px) {
.product-image-lightbox { padding: 12px; }
.product-image-lightbox__dialog { max-width: 96vw; max-height: 90vh; }
.product-image-lightbox__image-wrap { max-width: 96vw; max-height: 90vh; padding: 8px; }
.product-image-lightbox__image { max-width: 92vw; max-height: calc(90vh - 16px); }
.product-image-lightbox__close {
inset-block-start: 8px;
inset-inline-end: 8px;
width: 44px;
height: 44px; /* v7s48: was 36x36 on mobile, WCAG 44x44 touch-target minimum */
}
}
@media (prefers-reduced-motion: reduce) {
.product-image-zoom-trigger { transition: none; }
}
/* ==========================================================================
404 page (v7s27) -- scoped, self-contained block. Reuses existing tokens
(colors, .btn, .container, .page-title) so the error page stays visually
consistent with the rest of the site without touching any shared rule.
========================================================================== */
.page-404__content {
max-width: 640px;
margin-inline: auto;
padding-block: 64px 96px;
text-align: center;
}
.page-404__code {
font-size: clamp(3rem, 12vw, 5.5rem);
font-weight: 800;
line-height: 1;
color: var(--eurotherm-teal);
margin-block: 0 8px;
}
.page-404__content .page-title { margin-block-end: 14px; }
.page-404__text {
color: #333;
font-size: 1.05rem;
line-height: 1.6;
max-width: 52ch;
margin-inline: auto;
margin-block-end: 32px;
}
.page-404__actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 480px) {
.page-404__actions { flex-direction: column; align-items: stretch; }
}
/* ==========================================================================
v7s30: Large-screen (>=1600px) controlled scale-up
Targets 24"/27" desktop monitors (~1920x1080, ~2560x1440) where the
v7s29 1200px-capped layout reads narrow and small. Everything in this
block lives inside a single min-width: 1600px media query, so every
viewport below 1600px keeps byte-identical CSS behaviour to v7s29 --
nothing outside this block was edited.
No zoom/transform/scale, no horizontal scroll, no mobile/tablet
redesign: only a handful of existing values (container width, base
type size, header logo/padding, two homepage grid widths) grow in
controlled steps as viewport width increases.
========================================================================== */
@media (min-width: 1600px) {
:root {
/* v7s29 baseline: fixed 1200px. Grows with viewport width, floored
at 1320px (~1600px screens) and capped at 1480px (2560px+
screens) so very large monitors never stretch content past a
comfortable reading width. */
--container-width: clamp(1320px, 75vw, 1480px);
}
/* ~6% base type scale (16px -> 17px, the spec's own cap). Every
existing rem-sized heading, button, menu item and helper text
scales proportionally through this single change -- no other font
sizes were touched. The existing ch-based line-length caps (hero
support text, section intros, legal content, footer statement,
404 body text) are ch-relative, so they grow by the same ~6% as
the text inside them rather than being stretched further. */
html, body { font-size: 17px; }
/* Header: logo and vertical padding grow slightly; nav link/menu text
already scales via the base rem increase above. The 1180px
hamburger-menu breakpoint is untouched -- this query only ever
applies at 1600px and above, far past it, so the TR/EN desktop
menu keeps its existing single-line layout, just slightly larger. */
.site-header__inner { padding-block: 16px; }
.brand-logo__image { height: 42px; }
.site-header__cta { padding-block: 10px; padding-inline: 18px; }
/* Homepage "Ürün Kategorileri" / "Öne Çıkan Ürünler" grids: v7s3
capped these at a fixed 1040px so the 3x2 grid wouldn't look
oversized on typical desktops. On very wide monitors that same
fixed cap now reads too narrow next to the wider page around it,
so let it grow with viewport width -- floored at 1120px (~1600px
screens), capped at 1280px (2560px+ screens). Column count, card
aspect ratio and card internals are unchanged; only the outer grid
width grows. */
body.page-home .section--categories .category-grid,
body.page-home .section--selected-products .product-grid {
max-width: clamp(1120px, 65vw, 1280px);
}
}
/* ==========================================================================
Certificate showcase (kalite-sertifikalar.html / en/kalite-sertifikalar.html
only). Originally a single ISO 9001:2015 card (v7s37); now shows 7
documents (ISO 9001 + 5 trademark registrations + the Azerbaijan
conformity certificate added in v7s46) in the v7s42 carousel below.
Image-only lightbox, no PDF links.
========================================================================== */
.certificate-showcase {
/* v7s43: the section used to open with an ISO-specific + intro
paragraph; both were removed (the standalone "ISO 9001" mention
next to the page title made the section look like it only held one
document, when it now shows 7). This is the only spacing rule left
controlling the gap between the h1 page title and the carousel. */
margin-block-start: 32px;
}
/* v7s42: horizontal auto-scrolling certificate carousel. Replaces the
v7s38/v7s39 wrapping flex list (.certificate-showcase__grid, removed)
now that there are 7 documents instead of 1-2 (a 7th, the Azerbaijan
conformity certificate, was added in v7s46 without further changes to
this carousel mechanism). All 7 certificates are unchanged in
content/order -- only the presentation is now a single horizontal strip
instead of a vertical stack.
No-JS baseline: .certificate-carousel__viewport is a plain native
horizontally-scrollable container (overflow-x:auto) so every card stays
visible and reachable with zero script. assets/js/certificate-showcase.js
adds the "certificate-carousel--enhanced" class once it has cloned the
track for the seamless loop and wired up autoplay/drag/keyboard -- only
then does the viewport switch to a JS-driven transform and the prev/next
arrows appear (tablet width and up; below that, touch-swipe carries the
interaction and arrows would eat too much width from a single card). */
.certificate-carousel {
display: flex;
align-items: center;
gap: 8px;
margin-block-start: 8px;
}
.certificate-carousel__arrow {
flex: 0 0 auto;
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px; /* v7s48: was 40x40, WCAG 44x44 touch-target minimum */
border-radius: 50%;
background: var(--eurotherm-white);
border: 1px solid var(--border-soft);
color: var(--eurotherm-black);
cursor: pointer;
padding: 0;
box-shadow: var(--shadow-soft);
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.certificate-carousel__arrow svg {
display: block;
pointer-events: none;
}
.certificate-carousel__arrow:hover,
.certificate-carousel__arrow:focus-visible {
background: var(--eurotherm-teal);
border-color: var(--eurotherm-teal);
color: var(--eurotherm-white);
}
.certificate-carousel__arrow:focus-visible {
outline: 2px solid var(--eurotherm-teal);
outline-offset: 2px;
}
.certificate-carousel__viewport {
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.certificate-carousel--enhanced .certificate-carousel__viewport {
overflow: hidden;
touch-action: pan-y;
cursor: grab;
-webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}
.certificate-carousel--enhanced.is-dragging .certificate-carousel__viewport {
cursor: grabbing;
}
.certificate-carousel__track {
display: flex;
gap: 16px;
list-style: none;
margin: 0;
padding: 4px 2px;
width: max-content;
}
.certificate-carousel--enhanced .certificate-carousel__track {
will-change: transform;
}
.certificate-carousel__slide {
flex: 0 0 260px;
list-style: none;
}
@media (min-width: 640px) {
.certificate-carousel--enhanced .certificate-carousel__arrow {
display: flex;
}
.certificate-carousel__slide {
flex-basis: 300px;
}
.certificate-carousel__track {
gap: 20px;
}
.certificate-carousel--enhanced .certificate-carousel__viewport {
-webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.certificate-card__image-wrap {
height: 220px;
}
}
@media (min-width: 1024px) {
.certificate-carousel__slide {
flex-basis: 320px;
}
.certificate-card__image-wrap {
height: 230px;
}
}
@media (min-width: 1600px) {
.certificate-carousel__slide {
flex-basis: 340px;
}
.certificate-carousel__track {
gap: 24px;
}
.certificate-card__image-wrap {
height: 240px;
}
}
.certificate-card__trigger {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background: var(--eurotherm-white);
border: 1px solid var(--border-soft);
border-radius: var(--radius-card);
box-shadow: var(--shadow-soft);
overflow: hidden;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
padding: 0;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.certificate-card__trigger:hover,
.certificate-card__trigger:focus-visible {
box-shadow: var(--shadow-soft-hover);
border-color: var(--eurotherm-teal);
}
.certificate-card__trigger:focus-visible {
outline: 2px solid var(--eurotherm-teal);
outline-offset: 2px;
}
.certificate-card__image-wrap {
display: flex;
align-items: center;
justify-content: center;
background: var(--eurotherm-grey-light, #f4f4f4);
padding: 16px;
height: 190px;
flex: 0 0 auto;
}
.certificate-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 6px;
}
.certificate-card__body {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 18px 18px;
flex: 1 1 auto;
}
.certificate-card__title {
font-weight: 700;
font-size: 1.05rem;
color: var(--eurotherm-black);
}
.certificate-card__meta,
.certificate-card__issuer,
.certificate-card__date {
font-size: 0.92rem;
color: var(--eurotherm-grey-metallic, #555);
}
.certificate-card__cta {
display: inline-flex;
align-items: center;
margin-block-start: 8px;
padding: 9px 18px;
border: 1.5px solid var(--eurotherm-teal);
border-radius: var(--radius-pill, 999px);
color: var(--eurotherm-teal);
font-weight: 600;
font-size: 0.92rem;
width: fit-content;
transition: background-color 0.15s ease, color 0.15s ease;
}
.certificate-card__trigger:hover .certificate-card__cta,
.certificate-card__trigger:focus-visible .certificate-card__cta {
background: var(--eurotherm-teal);
color: var(--eurotherm-white);
}
/* ==========================================================================
Certificate lightbox (assets/js/certificate-showcase.js)
Image-only: no info panel, no PDF links, no counter, no prev/next.
Built + torn down on each open/close, same discipline as
.product-image-lightbox: never left in the DOM while closed, one
instance at a time, focus trapped and restored to the triggering card.
========================================================================== */
.certificate-lightbox {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(20, 20, 20, 0.82);
box-sizing: border-box;
}
.certificate-lightbox__dialog--image-only {
position: relative;
width: auto;
max-width: min(1600px, calc(100vw - 48px));
max-height: calc(100vh - 48px);
background: var(--eurotherm-white);
border-radius: var(--radius-modal);
box-shadow: var(--shadow-modal);
overflow: hidden;
display: flex;
}
.certificate-lightbox__close {
position: absolute;
inset-block-start: 12px;
inset-inline-end: 12px;
width: 44px;
height: 44px; /* v7s48: was 38x38, WCAG 44x44 touch-target minimum */
border-radius: 50%;
background: var(--eurotherm-white);
color: var(--eurotherm-black);
border: 1px solid var(--border-soft);
font-size: 1.4rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
transition: background-color 0.15s ease, color 0.15s ease;
}
.certificate-lightbox__close:hover,
.certificate-lightbox__close:focus-visible {
background: var(--eurotherm-teal);
color: var(--eurotherm-white);
}
.certificate-lightbox__close:focus-visible {
outline: 2px solid var(--eurotherm-teal);
outline-offset: 2px;
}
.certificate-lightbox__image-area {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
max-height: calc(100vh - 48px);
}
.certificate-lightbox__image {
display: block;
width: auto;
height: auto;
max-width: min(1600px, calc(100vw - 48px));
max-height: calc(100vh - 48px);
object-fit: contain;
}
.certificate-lightbox__error {
padding: 32px;
text-align: center;
color: var(--eurotherm-black);
max-width: 320px;
}
@media (max-width: 600px) {
.certificate-lightbox {
padding: 12px;
}
.certificate-lightbox__dialog--image-only {
max-width: calc(100vw - 24px);
max-height: calc(100vh - 24px);
}
.certificate-lightbox__image-area,
.certificate-lightbox__image {
max-height: calc(100vh - 24px);
max-width: calc(100vw - 24px);
}
.certificate-lightbox__close {
width: 44px;
height: 44px; /* v7s48: was 34x34 on mobile, WCAG 44x44 touch-target minimum */
inset-block-start: 8px;
inset-inline-end: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.certificate-card__trigger,
.certificate-lightbox__close,
.certificate-carousel__arrow {
transition: none;
}
/* v7s42: assets/js/certificate-showcase.js reads this same media query
and never starts the autoplay loop for these users -- it still wires
up drag/touch/keyboard/arrow navigation on the same markup, so the
carousel becomes a manually-controlled horizontal strip instead of
an animated one. This CSS only removes the two small transitions
(card hover shadow, arrow-button hover) that aren't essential. */
}
/* ==========================================================================
Quote list ("Teklif Listem" / "My Quote List") -- v7s45
Site-wide floating button + accessible panel that lets a visitor collect
product variants across pages and carry them into the existing quote
form. Built with the exact same overlay pattern already used by
.variant-choice-overlay above and the certificate/product-image
lightboxes elsewhere in this file: fixed full-screen overlay, centered
card, built/torn down on open/close (see assets/js/quote-list.js).
Z-index: the floating button (900) sits below every existing overlay
(.variant-choice-overlay/.certificate-lightbox = 1000,
.product-image-lightbox = 1100), so whenever one of those opens it is
automatically covered and un-clickable -- no extra JS coordination
needed, matching how those three overlays already coexist. The panel's
own overlay (1150) sits above all of them so it can never appear stacked
underneath another dialog; only one modal/panel can be visible at a
time site-wide.
========================================================================== */
.quote-list-fab {
position: fixed;
inset-block-end: 20px;
inset-inline-end: 20px;
z-index: 900;
display: inline-flex;
align-items: center;
gap: 8px;
padding-block: 13px;
padding-inline: 20px;
min-height: 44px; /* v7s48: WCAG 44x44 touch-target minimum floor */
background: var(--eurotherm-teal);
color: var(--eurotherm-white);
border: none;
border-radius: var(--radius-pill);
font-weight: 700;
font-size: 0.9rem;
box-shadow: var(--shadow-modal);
cursor: pointer;
max-width: calc(100vw - 40px);
}
.quote-list-fab:hover { background: var(--eurotherm-teal-deep); }
.quote-list-overlay {
position: fixed;
inset: 0;
background: rgba(17, 17, 17, 0.86);
z-index: 1150;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.quote-list-panel {
position: relative;
width: min(560px, 100%);
max-height: 88vh;
overflow-y: auto;
background: var(--eurotherm-white);
border-radius: var(--radius-modal);
box-shadow: var(--shadow-modal);
padding: 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.quote-list-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-block-end: 16px;
}
.quote-list-panel__title {
font-size: 1.15rem;
margin: 0;
}
.quote-list-panel__close {
flex-shrink: 0;
width: 44px; height: 44px; /* v7s48: was 36x36, WCAG 44x44 touch-target minimum */
display: flex; align-items: center; justify-content: center;
background: var(--eurotherm-white);
border: 1px solid var(--border-soft);
border-radius: var(--radius-form);
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
color: var(--eurotherm-black);
}
.quote-list-panel__body { flex: 1 1 auto; }
.quote-list-panel__empty {
color: var(--eurotherm-grey-metallic);
font-size: 0.95rem;
margin: 0;
padding-block: 12px;
}
.quote-list-panel__items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.quote-list-item {
background: var(--eurotherm-grey-light);
border-radius: var(--radius-box);
padding: 14px 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.quote-list-item__info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1 1 180px;
min-width: 0;
}
.quote-list-item__name {
font-weight: 700;
color: var(--eurotherm-black);
overflow-wrap: break-word;
}
.quote-list-item__model {
font-size: 0.85rem;
color: var(--eurotherm-grey-metallic);
}
.quote-list-item__meta,
.quote-list-item__carton {
font-size: 0.82rem;
color: #555;
}
.quote-list-item__qty {
display: flex;
flex-direction: column;
gap: 4px;
flex: 0 0 auto;
}
.quote-list-item__qty-label {
font-size: 0.72rem;
font-weight: 700;
color: var(--eurotherm-grey-metallic);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.quote-list-item__qty-input {
width: 76px;
padding: 7px 8px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-form);
font-size: 0.92rem;
}
.quote-list-item__qty-input[aria-invalid="true"] {
border-color: var(--eurotherm-teal);
}
.quote-list-item__qty-error {
font-size: 0.75rem;
color: var(--eurotherm-teal);
min-height: 1em;
}
.quote-list-item__total {
flex: 0 0 auto;
font-size: 0.85rem;
font-weight: 700;
color: var(--eurotherm-black);
white-space: nowrap;
}
.quote-list-item__remove {
flex: 0 0 auto;
background: transparent;
border: 1px solid var(--eurotherm-black);
color: var(--eurotherm-black);
border-radius: var(--radius-form);
padding-block: 8px;
padding-inline: 14px;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
}
.quote-list-item__remove:hover { background: var(--eurotherm-black); color: var(--eurotherm-white); }
.quote-list-panel__footer {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-block-start: 20px;
}
.quote-list-panel__footer .btn { flex: 1 1 200px; text-align: center; }
/* Inline "please select a size/variant first" warning shown next to the
CTA-row button when it is clicked before any variant row is selected. */
.quote-list-inline-warning {
margin: 8px 0 0;
font-size: 0.85rem;
font-weight: 700;
color: var(--eurotherm-teal);
flex-basis: 100%;
}
/* Selected Products section on teklif-al.html / en/teklif-al.html --
reuses the same item-row styling as the panel above (see
assets/js/quote-list.js renderItemsInto/buildItemRow, shared by both
surfaces) inside a titled box that matches the rest of the quote form. */
.quote-list-form-section {
background: var(--eurotherm-grey-light);
border-radius: var(--radius-box);
padding: 20px;
margin-block-end: 28px;
}
.quote-list-form-section__title {
font-size: 1.05rem;
margin: 0 0 6px;
}
.quote-list-form-section__help {
font-size: 0.88rem;
color: #555;
margin: 0 0 16px;
}
.quote-list-form-section .quote-list-panel__items { gap: 12px; }
.quote-list-form-section .quote-list-item { background: var(--eurotherm-white); }
.quote-list-form-section__clear {
margin-block-start: 16px;
}
@keyframes quote-list-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes quote-list-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.quote-list-overlay { animation: quote-list-fade-in 0.18s ease-out; }
.quote-list-panel { animation: quote-list-slide-up 0.22s ease-out; }
.quote-list-fab { animation: quote-list-fade-in 0.18s ease-out; }
@media (max-width: 480px) {
.quote-list-fab {
inset-block-end: 14px;
inset-inline-end: 14px;
padding-block: 11px;
padding-inline: 16px;
font-size: 0.82rem;
min-height: 44px; /* v7s48: WCAG 44x44 touch-target minimum floor */
}
.quote-list-panel { padding: 18px; }
.quote-list-panel__title { font-size: 1.02rem; }
.quote-list-item { padding: 12px; }
.quote-list-item__qty-input { width: 64px; }
.quote-list-panel__footer .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
.quote-list-overlay,
.quote-list-panel,
.quote-list-fab {
animation: none;
}
}
/* ==========================================================================
Inline-style cleanup -- patterns pulled out of markup so styling stays
in one place. Each rule below replaces a one-off `style="..."` attribute
that was scattered across a handful of pages.
========================================================================== */
.section--private-label .container,
.section--quality .container,
.section--catalogue .container,
.section--final-cta .container {
text-align: center;
}
.section--private-label p {
max-width: 60ch;
margin-inline: auto;
}
/* End-of-page single CTA block (kataloglar/ihracat/ozel-marka-uretim/uretim) */
.section--cta {
text-align: center;
padding-block-end: 0;
}
.fact-list--intro {
max-width: 60ch;
margin-block-end: 32px;
}
.contact-grid dl + .btn {
margin-block-start: 20px;
}
.section--catalogue .btn + p {
margin-block-start: 10px;
}
.btn__icon {
margin-inline-end: 8px;
}
/* ==========================================================================
Trial branch (v9-teal-deneme): scroll-reveal on the homepage. Sections
fade/rise into place once; product/category cards inside a revealed
grid stagger in slightly after it. Progressive enhancement -- with JS
disabled or the observer unsupported, main.js adds .is-visible
immediately, so content is never hidden without motion.
========================================================================== */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal.is-visible .category-grid > *,
.reveal.is-visible .product-grid > * {
animation: reveal-stagger 0.5s ease backwards;
}
.reveal .category-grid > *:nth-child(1), .reveal .product-grid > *:nth-child(1) { animation-delay: 0.05s; }
.reveal .category-grid > *:nth-child(2), .reveal .product-grid > *:nth-child(2) { animation-delay: 0.1s; }
.reveal .category-grid > *:nth-child(3), .reveal .product-grid > *:nth-child(3) { animation-delay: 0.15s; }
.reveal .category-grid > *:nth-child(4), .reveal .product-grid > *:nth-child(4) { animation-delay: 0.2s; }
.reveal .category-grid > *:nth-child(5), .reveal .product-grid > *:nth-child(5) { animation-delay: 0.25s; }
.reveal .category-grid > *:nth-child(6), .reveal .product-grid > *:nth-child(6) { animation-delay: 0.3s; }
@keyframes reveal-stagger {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.reveal.is-visible .category-grid > *,
.reveal.is-visible .product-grid > * { animation: none; }
.hero__media-wrap::before { animation: none; }
.hero__flow path { animation: none; }
}