/* WordPress-specific additions: the second send button, ordinary pages, the admin bar, the design preview bar, specification tables and the Products page layouts. */ /* ---------- Inquiry dialog: two ways to send ---------- */ .btn--whatsapp { background: #1f8f4e; color: #fff; } .btn--whatsapp:hover { background: #17703d; } .btn:disabled { opacity: 0.55; cursor: progress; } .inquiry__error { margin-top: 18px; padding: 12px 14px; background: #fdecec; border-left: 4px solid #b3261e; border-radius: 3px; color: #7a1712; font-size: 0.9375rem; } /* the honeypot field: out of sight for people, still in the form for bots */ .field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- Ordinary pages and posts ---------- */ .entry { max-width: 760px; } .entry h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); } .entry h2 { margin-top: 1.6em; font-size: clamp(1.625rem, 3vw, 2.125rem); } .entry h3 { margin-top: 1.4em; font-size: 1.375rem; } .entry p, .entry ul, .entry ol { margin-top: 1em; } .entry img { border-radius: 4px; } .entry__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .entry__item + .entry__item { margin-top: clamp(40px, 6vw, 72px); } /* ---------- The admin bar pushes sticky bars down for logged-in editors ---------- */ .admin-bar .masthead { top: 32px; } .admin-bar .brand-index { top: calc(var(--masthead-offset) + 32px); } .admin-bar .catalogue__filters { top: calc(var(--masthead-offset) + 32px + 24px); } @media (max-width: 782px) { .admin-bar .masthead { top: 46px; } .admin-bar .brand-index { top: calc(var(--masthead-offset) + 46px); } } /* below 600px WordPress stops fixing the admin bar, so nothing needs to move */ @media (max-width: 600px) { .admin-bar .masthead { top: 0; } .admin-bar .brand-index { top: var(--masthead-offset); } } /* ---------- Specifications (typed fields from Specification fields) ---------- */ .brand-more dd a { color: inherit; text-underline-offset: 0.18em; } .brand-more__heading { margin-top: 20px; color: var(--ink); font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; } .brand-more__scroll { overflow-x: auto; } .brand-table { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 0.9375rem; } .brand-table th, .brand-table td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; } .brand-table th { color: var(--muted); font-weight: 600; } .brand-table td { color: var(--ink); } .brand[data-box="ink"] .brand-more__heading, .brand[data-box="ink"] .brand-table td { color: #fff; } .brand[data-box="ink"] .brand-table th { color: #b8bec6; } /* ---------- Products page: photo behind the list ---------- */ .catalogue--photo { position: relative; isolation: isolate; } .catalogue__bg { position: absolute; inset: 0; z-index: -2; background-position: center; background-size: cover; } /* the veil keeps headings and the status line readable whatever the photo is */ .catalogue--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, 0.9); } .catalogue--dark::before { background: rgba(23, 25, 29, 0.86); } .catalogue--dark .catalogue__intro h2 { color: #fff; } .catalogue--dark .catalogue__intro p, .catalogue--dark .catalogue__status { color: #c5cad1; } /* ---------- Products page layouts: ---------- "sidebar" is the base look in style.css. The other three put the categories in a row on top. */ :is([data-catalogue-style="tabs"], [data-catalogue-style="list"], [data-catalogue-style="poster"]) .catalogue__layout { grid-template-columns: minmax(0, 1fr); gap: 22px; } :is([data-catalogue-style="tabs"], [data-catalogue-style="list"], [data-catalogue-style="poster"]) .catalogue__filters { position: static; padding: 0; background: transparent; } :is([data-catalogue-style="tabs"], [data-catalogue-style="list"], [data-catalogue-style="poster"]) .catalogue__filters h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } :is([data-catalogue-style="tabs"], [data-catalogue-style="list"], [data-catalogue-style="poster"]) .filter-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; /* style.css turns the list into an edge-to-edge strip on phones; here it wraps */ overflow: visible; } :is([data-catalogue-style="tabs"], [data-catalogue-style="list"], [data-catalogue-style="poster"]) .filter-list a { padding: 10px 16px; background: var(--mist); } :is([data-catalogue-style="tabs"], [data-catalogue-style="list"], [data-catalogue-style="poster"]) .filter-list a[aria-current="true"] { background: var(--ink); } /* On the dark veil a dark "current" group would vanish into the background: make it the accent colour. That is always the case for the three layouts above, and for "sidebar" once it has become a strip of categories without its own panel (859px and below, see style.css). */ :is([data-catalogue-style="tabs"], [data-catalogue-style="list"], [data-catalogue-style="poster"]) .catalogue--dark .filter-list a[aria-current="true"] { background: var(--accent); color: #fff; } @media (max-width: 859px) { .catalogue--dark .catalogue__filters h3 { color: #fff; } .catalogue--dark .filter-list a[aria-current="true"] { background: var(--accent); color: #fff; } } @media (min-width: 1100px) { [data-catalogue-style="tabs"] .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* list: one product per line */ [data-catalogue-style="list"] .product-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } [data-catalogue-style="list"] .product-card { flex-direction: row; align-items: center; gap: clamp(14px, 2.4vw, 28px); padding: 12px clamp(12px, 2vw, 22px) 12px 12px; } [data-catalogue-style="list"] .product-card__media { flex: none; width: clamp(96px, 14vw, 150px); overflow: hidden; border-radius: 3px; } [data-catalogue-style="list"] .product-card__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; grid-template-areas: "range text more" "name text more"; column-gap: clamp(16px, 3vw, 40px); align-items: center; padding: 0; } [data-catalogue-style="list"] .product-card__range { grid-area: range; } [data-catalogue-style="list"] .product-card__name { grid-area: name; margin-top: 2px; font-size: 1.3125rem; } [data-catalogue-style="list"] .product-card__text { grid-area: text; margin-top: 0; -webkit-line-clamp: 2; line-clamp: 2; } [data-catalogue-style="list"] .product-card__more { grid-area: more; margin-top: 0; padding-top: 0; white-space: nowrap; } @media (max-width: 759px) { [data-catalogue-style="list"] .product-card__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "range" "name"; } [data-catalogue-style="list"] .product-card__text, [data-catalogue-style="list"] .product-card__more { display: none; } } /* poster: the photo fills the card, the words sit on it */ [data-catalogue-style="poster"] .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-catalogue-style="poster"] .product-card { isolation: isolate; justify-content: flex-end; min-height: clamp(280px, 30vw, 380px); border: 0; border-radius: 6px; } [data-catalogue-style="poster"] .product-card__media { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; } /* The words carry their own dark ground, so it always starts above the first line however tall the text is and however bright the photo. */ [data-catalogue-style="poster"] .product-card__body { flex: none; padding: 64px 22px 22px; background: linear-gradient(180deg, rgba(23, 25, 29, 0) 0, rgba(23, 25, 29, 0.86) 56px, rgba(23, 25, 29, 0.95) 100%); } [data-catalogue-style="poster"] .product-card__range { color: var(--accent-on-dark); } [data-catalogue-style="poster"] .product-card__name { color: #fff; font-size: 1.625rem; } [data-catalogue-style="poster"] .product-card__text { color: #dde1e6; -webkit-line-clamp: 2; line-clamp: 2; } [data-catalogue-style="poster"] .product-card__more { color: #fff; } @media (max-width: 1099px) { [data-catalogue-style="poster"] .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 559px) { [data-catalogue-style="poster"] .product-grid { grid-template-columns: minmax(0, 1fr); } } /* Poster with a product photo on a transparent background: the product stands on the light panel above the dark text block instead of being stretched behind it. */ [data-catalogue-style="poster"] .product-card[data-photo="cutout"] .product-card__media img { inset: 6% 14% 34%; width: 72%; height: 60%; } /* ---------- Style preview bar (administrators only; assets/js/style-preview.js) ---------- One bar at the bottom of every page: tabs for the page design or layout (where the page has one) and for the header choices, the options of the chosen tab, the "Use..." buttons, a status line. Folds away into a small pill. */ .style-preview { position: fixed; left: 50%; bottom: 12px; z-index: 99990; width: min(820px, calc(100% - 24px)); transform: translateX(-50%); background: var(--ink-deep); border: 1px solid rgba(213, 218, 224, 0.28); border-top: 3px solid var(--accent-mark); border-radius: 10px; box-shadow: 0 22px 50px -14px rgba(15, 16, 19, 0.85); color: #fff; font-family: var(--font-ui); font-size: 0.875rem; line-height: 1.35; } .style-preview.is-folded { left: auto; right: 12px; width: auto; transform: none; border-radius: 999px; } .style-preview__head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; } .style-preview__title { flex: none; color: #c5cad1; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .style-preview__tabs { display: flex; flex: 1; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .style-preview__tabs::-webkit-scrollbar { display: none; } .style-preview__tabs[hidden] { display: none; } .style-preview__tabs button, .style-preview__fold { flex: none; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #dde1e6; font: inherit; font-weight: 600; cursor: pointer; } .style-preview__tabs button:hover { background: rgba(255, 255, 255, 0.1); } .style-preview__tabs button[aria-selected="true"] { background: #fff; color: var(--ink); } /* a tab whose choice on screen is not saved yet */ .style-preview__tabs button.is-changed::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; background: var(--accent-mark); border-radius: 50%; vertical-align: middle; } .style-preview__fold { margin-left: auto; border: 1px solid rgba(213, 218, 224, 0.35); color: #fff; font-weight: 500; } .style-preview__fold:hover { background: rgba(255, 255, 255, 0.1); } .style-preview__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 14px 12px; border-top: 1px solid rgba(213, 218, 224, 0.16); } .style-preview__body[hidden] { display: none; } .style-preview__options { display: flex; flex-wrap: wrap; gap: 5px; } .style-preview__options button { min-height: 34px; padding: 0 13px; border: 1px solid rgba(213, 218, 224, 0.35); border-radius: 999px; background: transparent; color: #fff; font: inherit; cursor: pointer; } .style-preview__options button:hover { background: rgba(255, 255, 255, 0.1); } .style-preview__options button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); font-weight: 700; } /* the choice visitors get right now */ .style-preview__options button.is-saved::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; background: currentColor; border-radius: 50%; vertical-align: middle; } .style-preview__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .style-preview__save { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; } .style-preview__save:hover:not(:disabled) { background: var(--accent); color: #fff; } .style-preview__save:disabled { opacity: 0.45; cursor: default; } .style-preview__status { grid-column: 1 / -1; margin: 0; color: #b8bec6; font-size: 0.78125rem; } .style-preview button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* keep the end of the page clear of the bar */ html[data-has-style-preview] .footer__legal { padding-bottom: 150px; } @media (max-width: 699px) { .style-preview { bottom: 8px; width: calc(100% - 16px); } .style-preview__head { flex-wrap: wrap; } .style-preview__tabs { order: 3; flex-basis: 100%; } .style-preview__body { grid-template-columns: minmax(0, 1fr); } .style-preview__actions { justify-content: stretch; } .style-preview__save { flex: 1; } } /* ---------- A site without a logo file: its name in the logo's place ---------- */ .masthead__name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; color: var(--ink); }