/* ========================================================================== DKR design layer — "quiet catalogue" direction Rewritten 2026-09-20. Everything below this banner is one reversible block: delete it and the site returns to stock Avada. The premise: the photographs are already saturated, so the interface stops competing with them. Near-monochrome chrome, one warm accent held back for the button that earns money, photographs left to carry the page. This file is enqueued with a dependency on Avada's own stylesheet, so it loads after it and wins on order. !important appears only where Avada sets a value as an INLINE style, which no stylesheet can outrank. Every size rule uses min()/clamp() so it can only ever reduce a value, never inflate one someone set deliberately. ========================================================================== */ /* --- 1. Typefaces, self-hosted ------------------------------------------ Not loaded from Google: this site already has an 11.9s mobile LCP and an external stylesheet plus font requests would make that worse. Both families are VARIABLE fonts, so one file per subset covers every weight — 288 KB for the pair, and latin-ext carries ə ş ğ ı ö ü. font-display:swap so text paints immediately in the fallback. */ @font-face{ font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap; src:url('fonts/archivo-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap; src:url('fonts/archivo-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020, U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* --- 2. Palette, retuned at Avada's own tokens --------------------------- The whole theme is driven by --awb-color1..8, so redefining them re-skins every component coherently instead of patching each one. Only the three that carry the look are changed; the greys are left alone. color4 navy rgba(0,30,84,.86) -> #0C1B30 deepened, opaque, reads as ink color5 accent #ffa42d -> #B8863B the same gold, desaturated color2 band #f2f2f2 -> #F6F6F4 paper rather than flat grey color3 rule #e5e5e5 -> #E3E4E0 hairline, matched to paper */ :root{ --awb-color2:#F6F6F4; --awb-color3:#E3E4E0; --awb-color4:#0C1B30; --awb-color5:#B8863B; /* Avada routes some elements through named typography sets rather than the body font. Leaving these on Sansita meant the browser still downloaded it for three text blocks, so they are pointed at the new stack too. */ --awb-typography1-font-family:'Archivo',system-ui,sans-serif; --awb-typography2-font-family:'Archivo',system-ui,sans-serif; --awb-typography3-font-family:'Archivo',system-ui,sans-serif; --awb-typography4-font-family:'Archivo',system-ui,sans-serif; --body_typography-font-family:'Archivo',system-ui,sans-serif; --h1_typography-font-family:'Archivo',system-ui,sans-serif; --h2_typography-font-family:'Archivo',system-ui,sans-serif; --h3_typography-font-family:'Archivo',system-ui,sans-serif; --h4_typography-font-family:'Archivo',system-ui,sans-serif; --h5_typography-font-family:'Archivo',system-ui,sans-serif; --h6_typography-font-family:'Archivo',system-ui,sans-serif; --post_title_typography-font-family:'Archivo',system-ui,sans-serif; --post_titles_extras_typography-font-family:'Archivo',system-ui,sans-serif; --dkr-sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; --dkr-ink:#0C1B30; --dkr-ink-2:#6A7486; --dkr-line:#E3E4E0; --dkr-brass:#B8863B; --dkr-ease:cubic-bezier(.2,.7,.3,1); } /* --- 3. Typography ------------------------------------------------------- One family, Archivo, across the whole site. The serif was dropped on purpose: Source Serif 4 was 218 KB of the 284 KB font payload, and Archivo carries both roles on weight and size contrast instead. Prose gets extra line-height so it still reads easily set in a grotesque. Avada inlines font-family on its title elements, hence !important on those selectors. */ body,input,select,textarea,button, .fusion-menu,.awb-menu,.fusion-button,.button, .fusion-post-card-title,.product_title{ font-family:var(--dkr-sans); } h1,h2,h3,h4,h5,h6, .fusion-title-heading,.product_title,.fusion-post-card-title{ font-family:var(--dkr-sans) !important; letter-spacing:-.022em; line-height:1.14; } /* Avada hard-codes font-family:"Sansita" as an INLINE style on some elements, which no stylesheet outranks without !important. Catching them by attribute handles the ones that exist and any added later; without this the browser still downloads Sansita for three text blocks nobody sees it in. Prose rules below are more specific for their own elements, so they win. */ [style*="Sansita"]{ font-family:var(--dkr-sans) !important; } /* Running prose: product descriptions, article body, category copy. */ .post-content p,.post-content li, .woocommerce-product-details__short-description, .woocommerce-product-details__short-description p, .dkr-cat-intro p,.dkr-cat-intro li, .fusion-text p{ font-family:var(--dkr-sans); font-size:1em; line-height:1.72; letter-spacing:.003em; } /* Small uppercase labels — breadcrumbs, meta, counts. */ .fusion-breadcrumbs,.fusion-tb-published-word-count, .fusion-tb-published-read-time,.fusion-tb-total-views, .fusion-tb-modified-date{ font-family:var(--dkr-sans); letter-spacing:.05em; } /* --- 4. Headline sizing -------------------------------------------------- The homepage H1 was a fixed 60px: at 375px that overflowed its container by 122px and clipped "Dekorasiyachi.az-da" off the screen. Fusion sets the size on the wrapper and gives the heading font-size:1em, so capping against the viewport fixes it without touching the desktop value. */ @media (max-width: 800px){ .fusion-title-heading[style*="font-size:1em"]{ font-size: min(1em, 8.5vw) !important; } .fusion-title-heading{ line-height:1.12; } } h1,h2,h3,h4,.fusion-title-heading{ overflow-wrap:break-word; text-wrap:balance; } /* --- 5. Photographs, not cards ------------------------------------------ The minimal direction: images sit flat on the paper. No radius, no shadow, no hover lift — air and a label do the separating. The only motion left is a slow scale on hover, which reads as the photograph responding rather than the card moving. Avada crops product photos to 4:3 landscape while every photo in this catalogue is portrait (500x667), which cut the tops off balloon arches — the part that sells the work. !important because Avada's rule is more specific. */ .fusion-post-cards .fusion-classic-product-image-wrapper, .fusion-post-cards .fusion-image-wrapper{ border-radius:0; box-shadow:none; overflow:hidden; transform:none; transition:none; } .fusion-post-cards .fusion-classic-product-image-wrapper img, .fusion-post-cards .fusion-image-wrapper img{ aspect-ratio:4 / 5 !important; object-fit:cover; width:100%; height:auto; display:block; transition:transform .6s var(--dkr-ease); } .fusion-post-cards li:hover .fusion-classic-product-image-wrapper img{ transform:scale(1.03); } /* Card captions: small, quiet, with the category as a spaced micro-label. */ .fusion-post-cards .fusion-post-card-title{ font-size:.92rem; font-weight:600; letter-spacing:-.005em; margin-top:.7rem; } /* --- 6. One accent, one job --------------------------------------------- Brass is reserved for the order button. Decorative gold — separators and the divider rules under headings — goes quiet so the button is the only warm thing on the screen. */ .fusion-separator .sep-single, .fusion-separator .sep-double, .fusion-title .title-sep{ border-color:var(--dkr-line) !important; } /* No text-transform:uppercase on Azerbaijani. "WhatsApp ilə sifariş et" uppercases to "WHATSAPP İLƏ SİFARİŞ ET" with a DOTTED İ; a naive uppercase produces "SIFARIŞ" with an undotted I, which is a misspelling. Browsers are meant to honour lang="az" here, but the call-to-action is not the place to bet on that, so the button stays in sentence case. */ .woocommerce .single_add_to_cart_button, .single_add_to_cart_button, .fusion-button.button-large, .fusion-button-default{ /* Slightly rounded at the owner's request. 8px softens the corner without turning the button into a pill; the focus ring below matches it so the outline hugs the shape rather than cutting across it. */ border-radius:8px; letter-spacing:.02em; font-weight:600; transition:filter .2s var(--dkr-ease); } .single_add_to_cart_button:hover, .fusion-button:hover{ filter:brightness(.94); transform:none; box-shadow:none; } /* --- 7. Touch targets ---------------------------------------------------- 16 links rendered under 40px tall on a phone; 44px is the accessible minimum. Image links were inline, so the anchor box collapsed to a 21px line while the image sat outside it. */ .fusion-image-element a,a.fusion-no-lightbox{ display:inline-block; line-height:0; } @media (max-width: 800px){ .awb-menu__main-ul > li > a, .awb-menu__sub-ul > li > a{ min-height:48px; display:flex; align-items:center; } .dkr-contact-bar a{ padding:10px 4px; display:inline-block; } .fusion-post-cards .fusion-post-card-title a{ display:block; padding:4px 0; } } /* --- 8. The order button follows you on a phone -------------------------- This site has no prices, so the WhatsApp button is the only conversion path there is — and on a phone it sat at y=948, below the fold on every product page. p.cart holds nothing but that one button (no quantity field), so taking it out of flow is safe, and body padding compensates so it never covers the footer or the contact bar. */ @media (max-width: 800px){ body.single-product{ padding-bottom:92px; } .single-product p.cart{ position:fixed; left:0; right:0; bottom:0; z-index:90; margin:0; padding:11px 16px calc(11px + env(safe-area-inset-bottom)); background:#fff; box-shadow:0 -8px 24px rgba(12,27,48,.12); border-top:1px solid var(--dkr-line); } .single-product p.cart .single_add_to_cart_button{ margin:0; width:100%; justify-content:center; text-align:center; min-height:54px; font-size:1rem; } } /* --- 9. Table of contents on phones -------------------------------------- 20 links, 627px tall, stacked above the article on mobile — readers scrolled past most of a screen of link list before the first paragraph. The element has no collapse option, so it is capped and scrolls in its own box. */ @media (max-width: 800px){ .awb-toc-el__content{ max-height:244px; overflow-y:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--dkr-line); border-radius:2px; padding:12px 14px; background:rgba(12,27,48,.02); } .awb-toc-el__content::-webkit-scrollbar{ width:4px; } .awb-toc-el__content::-webkit-scrollbar-thumb{ background:rgba(12,27,48,.22); border-radius:4px; } } /* --- 10. Mobile rhythm --------------------------------------------------- */ @media (max-width: 800px){ .fusion-fullwidth{ padding-top:clamp(28px,7vw,60px) !important; padding-bottom:clamp(28px,7vw,60px) !important; } .fusion-title{ margin-bottom:.6em; } } /* --- 11. Keyboard focus and small details ------------------------------- Avada removes focus rings; this restores one for keyboard users without showing it on mouse clicks. */ a:focus-visible,button:focus-visible,input:focus-visible, .fusion-button:focus-visible,.single_add_to_cart_button:focus-visible{ outline:2px solid var(--dkr-brass); outline-offset:3px; border-radius:8px; } html{ scroll-behavior:smooth; } ::selection{ background:rgba(184,134,59,.22); } img{ height:auto; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* --- 12. Two things the palette retune could not reach -------------------- (a) Buttons built in Fusion Builder carry their gradient as INLINE custom properties with literal hex — the hero button was #f5e6a1 -> #d4af37, a different gold from the theme accent, so it never followed --awb-color5. A stylesheet !important outranks a non-important inline declaration, which is the only way to reach these. */ .fusion-button[style*="gradient_top_color"]{ --button_gradient_top_color:var(--dkr-brass) !important; --button_gradient_bottom_color:var(--dkr-brass) !important; } /* (b) Capping the H1 on phones inverted the hero hierarchy: the headline came down to 31.9px while the strapline under it stayed at 36px, so the subtitle read as the more important line. Fusion keeps each text block's size in --awb-font-size, so taking the min against the viewport only ever reduces — a block already set at 15px stays 15px. */ @media (max-width: 800px){ .fusion-text{ font-size: min(var(--awb-font-size, 1rem), 5.2vw); } } /* (c) The post-card grids wrap every image in a white plate: background, 8px padding and a hairline border, so a 170px card held a 128px photo. In this direction the photograph IS the card, so the plate comes off and the image runs the full width of its column. Scoped to .fusion-post-cards so genuine cards elsewhere keep their chrome. */ .fusion-post-cards .fusion-column-wrapper{ background-color:transparent; border-width:0; padding:0; box-shadow:none; } .fusion-post-cards .fusion-layout-column{ padding-left:0; padding-right:0; } /* --- 13. Give the phone screen back to the product ----------------------- (a) My own mobile-rhythm rule in section 10 targets every .fusion-fullwidth, and the header and footer are built from those too. The header asks for --awb-padding-top:4px and was being forced to 28px, so it stood 96px tall instead of 48px. Restoring each section's own declared value fixes it exactly, without guessing at numbers. */ .fusion-tb-header .fusion-fullwidth, .fusion-tb-footer .fusion-fullwidth{ padding-top:var(--awb-padding-top) !important; padding-bottom:var(--awb-padding-bottom) !important; } /* (b) The breadcrumb block spent 116px of padding on two lines of text, pushing the product photograph — the thing that actually sells — down to y=370 on a 812px screen. :has() is unsupported in old browsers, where this simply does nothing and the spacing stays as it was. */ @media (max-width: 800px){ .fusion-column-wrapper:has(.fusion-breadcrumbs){ padding-top:12px !important; padding-bottom:10px !important; } .fusion-breadcrumbs{ font-size:.82rem; line-height:1.5; } } /* --- 14. Two products per row on phones ---------------------------------- Category grids stacked one product per row, so a 12-product category ran to roughly 4,800px of scrolling and you could judge the range only by working through it. Two-up shows about six per screen — enough to see a setup at a glance and tap for detail, which is how people shop a visual catalogue. The 8px padding Avada already puts on each item forms the gutter. Desktop keeps its three columns. */ @media (max-width: 800px){ .fusion-post-cards ul.fusion-grid{ flex-wrap:wrap; } .fusion-post-cards ul.fusion-grid > li{ width:50% !important; flex:0 0 50% !important; max-width:50%; } .fusion-post-cards .fusion-post-card-title{ font-size:.82rem; line-height:1.35; } } /* --- 15. The article meta band ------------------------------------------ Reading time, word count, views and last-updated sat on a peach panel (#FFF8F0) that is a literal colour, so the palette retune never reached it and it was the warmest thing on an otherwise quiet page. A cool tint drawn from the ink keeps it as a distinct band without shouting. */ .fusion-column-wrapper:has(.fusion-tb-published-word-count){ background-color:rgba(12,27,48,.035) !important; } .fusion-tb-published-word-count,.fusion-tb-published-read-time, .fusion-tb-total-views,.fusion-tb-modified-date{ color:var(--dkr-ink-2); } /* --- 16. One frame for every product photo ------------------------------- Gallery images took their height from each photo, so a portrait product rendered 401x534 and a landscape one 401x305 — every product page a different shape. A fixed 4:5 frame makes them consistent, and matches the crop used on the cards, so the thumbnail and the product page agree. WooCommerce's own hover magnifier (jQuery.zoom) stays in charge: it injects .zoomImg inside this wrapper, which already clips, so the magnified view stays inside the same frame. No CSS transform zoom is added here — a second effect would fight the magnifier rather than improve it. */ /* Scoped to .single-product deliberately. Avada reuses the class .woocommerce-product-gallery__image on BLOG post-card images -- their wrapper is "awb-pc-image__swap-images featured-image woocommerce-product-gallery__image" -- so an unscoped rule here reached /bloq/ and cropped landscape article headers into a portrait frame. */ .single-product .woocommerce-product-gallery__image{ position:relative; aspect-ratio:4 / 5; overflow:hidden; } .single-product .woocommerce-product-gallery__image > a{ display:block; width:100%; height:100%; } .single-product .woocommerce-product-gallery__image img:not(.zoomImg), .single-product .woocommerce-product-gallery__image .zoomImg{ width:100%; height:100%; object-fit:cover; display:block; } /* --- 17. Service list photographs --------------------------------------- The About page listed seven services in ~3,200px of prose without a single photograph, on a site whose product IS the photograph. Each service that has work to show now carries one, floated so the text still wraps as a list rather than becoming a gallery. Masa Kartları and Nişan Şokaladları have no photograph in the library -- the same two categories that hold no products — so they stay text-only rather than borrowing a picture of something else. */ /* No forced crop. These four photographs are mixed orientation -- three are portrait (768x1024, 600x800) and one is landscape (768x576) -- and the original 4/3 box with object-fit:cover threw away 44% of each portrait, top and bottom, which is precisely the part of an arch or a backdrop worth seeing. Height follows each image instead; the list items are separate blocks, so uneven heights cost nothing, and the clearfix below already contains a float of any height. */ .dkr-service-photo{ float:right; width:170px; height:auto; margin:0 0 12px 18px; border-radius:2px; } @media (max-width: 800px){ .dkr-service-photo{ float:none; display:block; width:100%; max-width:100%; height:auto; margin:10px 0 14px; } } /* Contain the floated photo so it does not overhang the next item. NOT overflow:hidden -- on a list-item with list-style-position:outside that hides the number itself, which silently stripped the 1..6 numbering off the owner's list. display:flow-root would drop the marker too, since it replaces display:list-item. A clearfix contains the float and leaves both alone. */ .post-content ol > li::after,.fusion-text ol > li::after{ content:""; display:block; clear:both; } /* --- 18. The header contact block between 800px and full desktop --------- Below ~880px the header's right-hand column narrows to about 127px of usable width, while "Zəng və ya WhatsApp" needs roughly 135px at 14px. It wrapped to two lines by a hair, which made that block three lines tall, grew the header from 109px to 133px, and left the logo, menu and contact block sitting at three different heights -- the misalignment in the report, with the icon pushed up against the header edge. The label is given an inline font-size by the page, hence !important on that one rule. Below 801px none of this applies: the header switches to the logo-and-hamburger row instead. */ @media (min-width: 801px) and (max-width: 940px){ .fusion-tb-header .fusion-text > div{ font-size: 11.5px !important; white-space: nowrap; line-height: 1.35; } .fusion-tb-header .fusion-text > p{ font-size: 16px; white-space: nowrap; margin: 2px 0 0; line-height: 1.3; } } /* ========================================================================== "Fotozona" pass — the work leads, the interface frames it ========================================================================== */ /* --- 20. The order invitation, as one dark band -------------------------- The page already carried "Xüsusi dekor ideyan var?" — the invitation to send a photo and have it made. It read as one more pale section among several, so it is given the single dark band on the page. Nothing else inverts, which is what makes it register. */ .dkr-order-band{ background-color:#0E1822 !important; background-image:none !important; } .dkr-order-band .fusion-title-heading, .dkr-order-band .fusion-text, .dkr-order-band .fusion-text p, .dkr-order-band h1,.dkr-order-band h2,.dkr-order-band h3,.dkr-order-band h4{ color:#fff !important; } .dkr-order-band .fusion-text p{ color:rgba(255,255,255,.76) !important; } .dkr-order-band .fusion-separator .sep-single, .dkr-order-band .fusion-title .title-sep{ border-color:rgba(255,255,255,.18) !important; } /* --- 22. Category showcase ------------------------------------------------ One lead photograph with two smaller ones beside it, so the shape of the set is legible at a glance: this is what a birthday looks like here, this is what a wedding looks like. The whole block is one link. */ .dkr-cats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:26px; } .dkr-cat{ display:block; text-decoration:none; color:inherit; } .dkr-cat__shots{ display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:1fr 1fr; gap:5px; } .dkr-cat__shots img{ width:100%; height:100%; object-fit:cover; display:block; background:#E4E4E0; } .dkr-cat__lead{ grid-row:1 / span 2; aspect-ratio:4 / 5; } .dkr-cat__extra{ aspect-ratio:1 / 1; } /* The lead photo lifts a little on hover; the two supporting shots stay put, so the movement reads as one object responding rather than three. */ .dkr-cat__lead{ transition:transform .5s var(--dkr-ease); } .dkr-cat:hover .dkr-cat__lead, .dkr-cat:focus-visible .dkr-cat__lead{ transform:scale(1.03); } .dkr-cat__shots{ overflow:hidden; } .dkr-cat__meta{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:11px; } .dkr-cat__meta strong{ font-size:.95rem; font-weight:600; letter-spacing:-.005em; } .dkr-cat__meta em{ font-style:normal; font-size:.78rem; color:var(--dkr-ink-2); } .dkr-cat:hover .dkr-cat__meta strong{ color:var(--dkr-brass); } .dkr-cat:focus-visible{ outline:2px solid var(--dkr-brass); outline-offset:6px; } @media (max-width: 800px){ .dkr-cats{ grid-template-columns:repeat(2,1fr); gap:16px; } .dkr-cat__meta{ margin-top:8px; } .dkr-cat__meta strong{ font-size:.82rem; } .dkr-cat__meta em{ font-size:.72rem; } } /* Below 560px each card is only ~150px wide, which rendered the two supporting shots at 56x56 -- far too small to show what a backdrop or an arch actually looks like, so they read as texture rather than as the work. The lead photo takes the whole card instead: 150x188 is small but legible, and the section stays compact enough that visitors still reach the products. */ @media (max-width: 560px){ .dkr-cat__shots{ grid-template-columns:1fr; grid-template-rows:auto; } /* .dkr-cat__shots img{display:block} is 0,2,1 -- a bare .dkr-cat__extra loses to it and the extras stack below instead of hiding. */ .dkr-cat__shots img.dkr-cat__extra{ display:none; } .dkr-cat__lead{ grid-row:auto; height:auto; } /* Names that wrap to two lines made the second row taller than the first. A two-line floor levels the bottom edges without touching desktop. */ .dkr-cat__meta{ align-items:flex-start; } .dkr-cat__meta strong{ min-height:2.2em; line-height:1.1; } /* A two-line name squeezed the count's track until "11 is" broke across lines. The count never needs to wrap; the name is what should. */ .dkr-cat__meta em{ white-space:nowrap; flex:0 0 auto; } } /* --- 23. Hide the empty "Məhsul haqqında" section ------------------------- Layout 1600 pairs a "Məhsul haqqında" heading with [fusion_tb_content], which renders the product's LONG description. 107 of 108 products have none -- every product carries a short description instead, and that is already shown under the title. So on essentially every product page the heading announced a section that was not there. Avada renders the empty case as a truly :empty div, so the whole section can be hidden in CSS. The one product that does have a long description keeps its heading, and so will any product given one later -- which is why this is a CSS rule and not a deletion from the layout. */ .single-product .fusion-fullwidth:has(> .fusion-builder-row > .fusion-layout-column > .fusion-column-wrapper > .fusion-content-tb:empty){ display:none; } /* --- 24. Page H1s must not break mid-word on a phone ---------------------- /kataloq/ rendered its H1 as "Dekorasiyachi.a / z Kataloqu". The cause was one pixel: the heading box is 267px (375 minus the container's 30px and the column's 24px, both sides) and "Dekorasiyachi.az" measures 268px at 35px, so the overflow-wrap:break-word safety net in §5 snapped the brand name. The §5 cap did not reach it -- that one is scoped to headings Avada gives an inline font-size:1em, and this H1 takes 35px from Theme Options instead. --awb-font-size does resolve on it, so min() can only ever shrink, never inflate a size someone set deliberately. 8vw gives 30px at 375, which puts the brand name at ~230px with room to spare, and stops biting entirely by the time the viewport reaches 440px. The homepage hero H1 keeps its own clamp (§22) -- that selector is more specific, so this rule does not touch it. */ @media (max-width: 800px){ h1.fusion-title-heading{ font-size: min(var(--awb-font-size, 35px), 8vw) !important; } } /* --- 25. Blog cards are not product cards -------------------------------- /bloq/, /kataloq/'s product grid and /kataloq/'s category grid are all the same Avada post-cards element, so telling them apart is the whole problem. .awb-pc-image__swap-images is NOT the discriminator -- product cards carry it too; only the category grid lacks it, and a first attempt on that basis collapsed the 30-product grid to one column. The signal that actually separates them is `type-product`, which WooCommerce puts on product cards and nothing else. So blog cards are: has the swap wrapper, and is not a product. blog card swap ✓ type-product ✗ -> matches product card swap ✓ type-product ✓ -> excluded category card swap ✗ -> excluded Product photos are portrait (374x499) and the 4:5 crop in §5 suits them. Blog featured images are landscape (375x250) and that crop was discarding 47% of each one. The box is given an explicit 3/2 -- the sources' own ratio, so nothing is cropped -- rather than letting height follow the image. Intrinsic sizing was not reliable here: these images carry width="1000" height="667" attributes that disagree with the 375x250 file actually served, and two of the three resolved to a 1500px-tall box. A declared ratio does not care. */ .fusion-post-cards li:not(.type-product) .awb-pc-image__swap-images{ display:block; aspect-ratio:3 / 2; overflow:hidden; } .fusion-post-cards li:not(.type-product) .awb-pc-image__swap-images img{ aspect-ratio:auto !important; width:100% !important; height:100% !important; object-fit:cover; display:block; } /* One column on a phone. At flex:0 0 50% each card was 178px and the title box inside it only 106px, which broke "Həri, Nişan, Xına, Toy Dekorları və Növləri" into five lines at 22px -- one title ran to seven. The selector deliberately out-specifies the §5 rule it has to beat, which is `.fusion-post-cards ul.fusion-grid > li` (0,2,2). A plain `.fusion-grid:has(...) > li` is only (0,2,1) and loses silently. */ /* The homepage blog strip is the same problem in different markup: its cards have NO .awb-pc-image__swap-images (the image sits in .fusion-no-lightbox), so an earlier :has() form never reached them and a 25px title wrapped to six lines in a 146px box. Getting the selector right took three attempts, all of which hit a grid they should not have: .awb-pc-image__swap-images product cards carry it too data-post-type-label="yazılar" the /kataloq/ CATEGORY grid is also "yazılar", not just articles body:not(.post-type-archive-product):not(.tax-product_cat) misses the 404 page, whose body class is .error404 and which lists 16 categories The signal that actually separates them is a **per-card button**. Category cards (fusion_element 352) each carry a "Məhsullara bax" CTA; article cards never do -- /bloq/ and the homepage strip put their one button outside the grid. Measured across every grid on the site: /bloq/ articles yazılar 0 of 3 cards with a button homepage blog strip yazılar 0 of 3 /kataloq/ categories yazılar 5 of 5 404 categories yazılar 16 of 16 products (both) products 0 -- excluded by the label anyway So label + no per-card button = an article card, on any template, with no list of page types to keep up to date. The selector also has to out-specify the §5 rule it overrides, `.fusion-post-cards ul.fusion-grid > li` (0,2,2); this is (0,4,2). */ @media (max-width: 640px){ .fusion-post-cards[data-post-type-label="yazılar"] ul.fusion-grid > li:not(:has(.fusion-button)){ flex:0 0 100% !important; max-width:100% !important; } } /* Section numbers 19 and 21 are intentionally absent. 19 was the hero scrim and navy text panel, removed when the homepage went back to the banner image with centred type; 21 was the "Sifariş et" label that appeared on card hover. Both were reverted at the owner's request. The numbering is left with gaps so the remaining sections keep the numbers referenced in CLAUDE.md and in commit messages. */ /* --- 26. The order band's body copy follows its centred heading ----------- The heading is centred by its own content_align, but the paragraph beneath it has no alignment attribute of its own -- it inherits, and inheriting left under a centred heading reads as a mistake rather than a choice. */ .dkr-order-band .fusion-text, .dkr-order-band .fusion-text p{ text-align:center; } /* --- 27. The order band's call to action --------------------------------- The button was rgb(184,134,59) sitting on a card that runs rgb(198,142,69) to rgba(226,179,97) -- DARKER than the surface behind it, and separated from it only by a 4px white border. The one action in the section was the quietest thing in it. White reverses that: the surface reads first and the navy label sits on it at about 16:1. The border stays white so the button keeps its exact size -- it simply merges into the fill rather than ringing it. The brightness hover from §6 still applies and reads as a light grey press. The label and the WhatsApp icon are separate elements and were both white, so both have to flip or they disappear into the new fill. */ .dkr-order-band .fusion-button, .dkr-order-band .fusion-button:visited, .dkr-order-band .fusion-button:hover, .dkr-order-band .fusion-button:focus{ background:#fff !important; border-color:#fff !important; color:var(--dkr-ink) !important; } .dkr-order-band .fusion-button .fusion-button-text, .dkr-order-band .fusion-button .awb-button__icon, .dkr-order-band .fusion-button i{ color:var(--dkr-ink) !important; } /* --- 28. Blog prose measure ---------------------------------------------- Article body text ran the full 828px column at 17px, which measures 97 characters per line. Past roughly 80 the eye loses its place on the return sweep, and this is the one place on the site with long-form reading -- the TOC sidebar already takes 264px, so the column is wide because there is room, not because the text needs it. Capped at 66ch. Note `ch` is the width of "0", narrower than the average lowercase glyph, so 72ch still measured 82 characters -- 66ch lands at ~75. Scoped to .single-post so product descriptions and the trust pages, which are short, are untouched, and to wide viewports only -- at 375 the measure is already about 40 characters. */ @media (min-width: 1000px){ .single-post .post-content .fusion-text{ max-width:66ch; } } /* --- 29. Article text was double-padded on a phone ------------------------ Single posts nest two Fusion containers, and each applies its own 30px side padding: #main 375 -> pad 30 -> 315 outer .fusion-fullwidth breaks out (margin -30) and re-adds pad 30 -> 315 inner .fusion-fullwidth 315 -> pad 30 -> 255 <- the post's own container The outer pair cancels correctly; the inner one is the post's own builder container sitting inside the layout's, so its padding is charged twice. That left the text 255px of 375 -- about 30 characters a line, where 35-45 is comfortable -- and made a single article 8,122px tall. Zeroing the side padding on a fullwidth nested inside another fullwidth restores the standard 315px measure and the same 30px gutter every other page uses. Exactly one container on the page matches, so there is no collateral; verified left 30 / right 345, no overflow, nothing past the viewport, and the article down to 7,063px. Mobile only: on desktop that padding is part of the 828px column, which §28 caps at 66ch anyway. */ @media (max-width: 800px){ .single-post .fusion-fullwidth .fusion-fullwidth{ padding-left:0 !important; padding-right:0 !important; } } /* --- 30. Category banner ------------------------------------------------- The archive title banner still carried Avada's demo art: a leaf photograph under a radial wash in rgba(255,164,46) -- the ORANGE accent the palette retune (§2) replaced with brass. Nothing else on the site looks like it. Replaced with the brand's own navy, lit from the top-left with a brass glow. The background lives on the COLUMN WRAPPER, not the section, so it is targeted through the wrapper that holds the H1. */ .tax-product_cat .fusion-column-wrapper:has(h1), .post-type-archive-product .fusion-column-wrapper:has(h1){ background-image: radial-gradient(120% 150% at 14% 0%, rgba(184,134,59,.42) 0%, rgba(184,134,59,0) 60%), linear-gradient(135deg, #0C1B30 0%, #17293f 52%, #0C1B30 100%) !important; background-color:#0C1B30 !important; background-size:cover !important; } /* Every text element on the panel, not just the H1. /kataloq/ carries a subtitle ("Kataloqumuzda olan məhsullarla tanış olun") that inherits rgba(0,30,84,.86) -- navy on navy at 1.08:1, invisible. Category pages have a breadcrumb there instead, which is why an H1-only rule looked complete. */ .tax-product_cat .fusion-column-wrapper:has(h1) h1, .tax-product_cat .fusion-column-wrapper:has(h1) h2, .tax-product_cat .fusion-column-wrapper:has(h1) h3, .post-type-archive-product .fusion-column-wrapper:has(h1) h1, .post-type-archive-product .fusion-column-wrapper:has(h1) h2, .post-type-archive-product .fusion-column-wrapper:has(h1) h3{ color:#fff !important; } .tax-product_cat .fusion-column-wrapper:has(h1) .fusion-text, .tax-product_cat .fusion-column-wrapper:has(h1) .fusion-text p, .post-type-archive-product .fusion-column-wrapper:has(h1) .fusion-text, .post-type-archive-product .fusion-column-wrapper:has(h1) .fusion-text p{ color:rgba(255,255,255,.82) !important; } /* Breadcrumb sits on the same panel: brass for links, muted white for the trail and the current page. */ .tax-product_cat .fusion-column-wrapper:has(h1) .fusion-breadcrumbs, .tax-product_cat .fusion-column-wrapper:has(h1) .fusion-breadcrumbs span, .post-type-archive-product .fusion-column-wrapper:has(h1) .fusion-breadcrumbs, .post-type-archive-product .fusion-column-wrapper:has(h1) .fusion-breadcrumbs span{ color:rgba(255,255,255,.72) !important; } .tax-product_cat .fusion-column-wrapper:has(h1) .fusion-breadcrumbs a, .post-type-archive-product .fusion-column-wrapper:has(h1) .fusion-breadcrumbs a{ color:#E2B361 !important; } /* --- 31. Category cards showing an icon instead of a photograph ---------- Five categories now use line-art icons as their term thumbnail. The card frame is built for photographs -- object-fit:cover in a 4:5 box -- which crops an icon and pushes it to the edges. Icons are PNG and every product photograph is JPEG, so the file extension is the discriminator; `*=` rather than `$=` because LiteSpeed rewrites the src to ".png.webp". Scoped to category cards via the per-card button (see §25), so product and article cards are untouched. */ .fusion-post-cards li:has(.fusion-button) img[src*=".png"]{ object-fit:contain !important; padding:16%; background:#F6F6F4; /* palette band (--awb-color2) */ } /* --- 32. Category copy collapses behind "Daha çox" ----------------------- Every product category carries 2,400-3,300 characters of description, which rendered as a 1,466px wall of text below the products. The words earn their place with Rank Math, so none are deleted -- the block is clamped and the rest is one click away. Everything stays in the DOM, so search engines see the full text either way. The clamp class is added by JavaScript, never in the markup: with no JS the description simply renders in full, rather than being permanently cut off with no way to open it. */ .dkr-cat-intro.dkr-clamp{ max-height:300px; overflow:hidden; position:relative; } .dkr-cat-intro.dkr-clamp::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:120px; background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 88%); pointer-events:none; } .dkr-cat-intro.dkr-clamp.dkr-open{ max-height:none; } .dkr-cat-intro.dkr-clamp.dkr-open::after{ display:none; } .dkr-cat-more{ display:inline-flex; align-items:center; gap:8px; margin:14px 0 4px; padding:10px 20px; border:1px solid var(--dkr-line); border-radius:8px; background:#fff; color:var(--dkr-ink); font:inherit; font-weight:600; font-size:.92rem; cursor:pointer; transition:border-color .2s var(--dkr-ease), color .2s var(--dkr-ease); } .dkr-cat-more:hover{ border-color:var(--dkr-brass); color:var(--dkr-brass); } .dkr-cat-more:focus-visible{ outline:2px solid var(--dkr-brass); outline-offset:3px; } .dkr-cat-more::after{ content:"▾"; font-size:.8em; line-height:1; } .dkr-cat-more[aria-expanded="true"]::after{ content:"▴"; } /* --- 33. An odd last category card fills the row ------------------------- Five categories in a 2-across grid leave the fifth alone on its own row. `:last-child:nth-child(odd)` only matches when the count is odd, so an even set is untouched -- including the 404 page's sixteen. The image height is pinned rather than left to the 4:5 frame: at full width the box would be 355x444 and the icon would tower over its neighbours. 172px is the height the half-width cards' image boxes actually render at, so the three rows sit level; object-fit:contain from §31 centres the icon in the wider tile. */ @media (max-width: 800px){ .fusion-post-cards ul.fusion-grid > li:has(.fusion-button):last-child:nth-child(odd){ flex:0 0 100% !important; max-width:100% !important; } .fusion-post-cards ul.fusion-grid > li:has(.fusion-button):last-child:nth-child(odd) img{ aspect-ratio:auto !important; height:172px !important; } }