/* El Nawawy - owner-requested page overrides that outrank per-page family CSS. Lives in the button-system mu-plugin (site-custom.css is a regenerated mirror of the Customizer and cannot hold hand edits). */ /* yarns-and-fabrics (enw-yf family): its split grid ran the article text at 418px beside a 554px card rail - far narrower than the ~1000px column every other article uses (owner request, 31 Aug 2026). Stack the pairs full-width; the family's own inner grids (.enw-yf-grid) keep their columns. Hero and non-split sections untouched. */ .enw-yf-wrap.enw-yf-split { display: block !important; } .enw-yf-wrap.enw-yf-split > * + * { margin-top: 22px; } /* Mobile full-bleed for the yf page (owner request, 31 Aug 2026): the ancestor chain (16px template padding + 10px Elementor container) kept every block off the screen edge. Blocks with backgrounds - the hero, the navy note/CTA cards, the FAQ stage - now bleed edge-to-edge as bands; text keeps a 16px gutter via the wrap. The -26px equals the fixed ancestor paddings, so no horizontal overflow. */ @media (max-width: 640px) { .enw-yf-hero, .enw-yf-section { margin-left: -26px !important; margin-right: -26px !important; } .enw-yf-hero { border-radius: 0 !important; } .enw-yf-wrap { padding-left: 16px !important; padding-right: 16px !important; } .enw-yf-note, .enw-yf-cta, .enw-yf [data-enwfaq] { margin-left: -16px !important; margin-right: -16px !important; border-radius: 0 !important; } } /* yf navy note card: its h2 was navy #1A3465 on the card's own #1A3465 gradient - "Choosing the right material for the right" was invisible, only the gold .tone span showed (also visible in the owner's phone screenshot). System ivory ink for dark grounds. */ .enw-yf-note h2 { color: #F5EFE2 !important; } /* yf mobile: with the bands full-bleed, the stacked template paddings read as blank white stripes (owner report, 31 Aug 2026). Header->hero was 66px (28 container + 28 inner + 10 e-con); FAQ->CTA was 81px (40px + 40px section paddings meeting). Collapse the template chrome on this page and tighten section rhythm. */ @media (max-width: 640px) { body.elementor-page-13860 .elementor-element-98ec9c8 { padding-top: 0 !important; padding-bottom: 0 !important; } body.elementor-page-13860 .elementor-element-98ec9c8 > .e-con-inner { padding-top: 0 !important; padding-bottom: 0 !important; } .elementor-element-51220138 { padding-top: 0 !important; padding-bottom: 0 !important; } .enw-yf-section { padding-top: 14px !important; padding-bottom: 14px !important; } .enw-yf-hero { padding-bottom: 24px !important; } } /* yf numbered cards (owner, 31 Aug 2026: "I hate that numbers shapes... title is below the number"). The filled navy circle stacked above the title becomes the site's knot ring - gold ring, navy numeral - sitting inline BESIDE the title on one row, the same numbering language as the FAQ knots. Paragraph spans full width below. */ .enw-yf-card:has(.num) { display: grid !important; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 9px; } .enw-yf-card .num { width: 28px !important; height: 28px !important; border-radius: 50% !important; display: inline-grid !important; place-items: center; background: transparent !important; border: 2px solid #C99700 !important; color: #1A3465 !important; font: 700 13px/1 Inter, system-ui, sans-serif !important; margin: 0 !important; flex: none; } .enw-yf-card h3 { margin: 0 !important; } .enw-yf-card p { grid-column: 1 / -1; margin-bottom: 0 !important; } /* yf checklist (owner, 31 Aug 2026: "I hate that check marks design"). The "✓" text glyph in a pale gold pill becomes the Tabler check as a CSS mask - crisp 2.5px gold stroke, no bubble - the same icon technique as the FAQ needle. Pure ::before restyle, no content. */ .enw-yf-list li::before { content: "" !important; background: #C99700 !important; border-radius: 0 !important; width: 19px !important; height: 19px !important; left: 12px !important; top: 15px !important; -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } /* ================= THE SPINNING LINE (owner-approved, 31 Aug 2026) ===== The yarns-and-fabrics article as one thread from fiber to fabric. Style-only: every word, heading, and anchor untouched. ============= */ /* -- chapter grounds: the twist chapter reads on mist ---------------- */ #yf-structure { background: #EEF2F8 !important; border-radius: 18px; padding-left: 22px !important; padding-right: 22px !important; } @media (max-width: 640px) { #yf-structure { border-radius: 0; padding-left: 26px !important; padding-right: 26px !important; } } /* -- the thread rail (desktop wayfinding + progress) ----------------- */ .enwyf-rail { position: fixed; z-index: 60; left: max(14px, calc(50vw - 690px)); top: 50%; transform: translateY(-50%); padding-left: 18px; opacity: 0; pointer-events: none; transition: opacity .35s ease; } .enwyf-rail.on { opacity: 1; pointer-events: auto; } .enwyf-rail::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: #E5E6EA; } .enwyf-rail .enwyf-fill { position: absolute; left: 6px; top: 6px; width: 2px; height: 0; border-radius: 2px; background: linear-gradient(180deg, #C99700, #E1B447); box-shadow: 0 0 8px rgba(201,151,0,.55); transition: height .25s ease; } .enwyf-rail a { display: block; position: relative; font: 500 12.5px/1.3 Inter, system-ui, sans-serif; color: #7d8494; text-decoration: none; padding: 6px 0 6px 10px; white-space: nowrap; } .enwyf-rail a::before { content: ""; position: absolute; left: -16px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; box-sizing: border-box; border-radius: 50%; border: 2px solid #E5E6EA; background: #FFFFFF; } .enwyf-rail a.done { color: #1A3465; } .enwyf-rail a.done::before { border-color: #C99700; background: #C99700; } .enwyf-rail a.here { color: #1A3465; font-weight: 700; } .enwyf-rail a.here::before { border-color: #C99700; background: #FFFFFF; box-shadow: 0 0 7px rgba(201,151,0,.6); } @media (max-width: 1250px) { .enwyf-rail { display: none; } } /* -- the chip strip (mobile wayfinding) ------------------------------ */ .enwyf-chips { position: fixed; left: 0; right: 0; top: 0; z-index: 70; display: flex; gap: 8px; overflow-x: auto; padding: 9px 12px; background: rgba(252,250,245,.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid #E5E6EA; transform: translateY(-110%); transition: transform .3s ease; scrollbar-width: none; } .enwyf-chips::-webkit-scrollbar { display: none; } .enwyf-chips.on { transform: none; } .enwyf-chips a { flex: none; font: 600 12px/1 Inter, system-ui, sans-serif; color: #1A3465; text-decoration: none; border: 1px solid #E5E6EA; border-radius: 6px; padding: 8px 11px; background: #FFFFFF; } .enwyf-chips a.here { border-color: #C99700; background: rgba(201,151,0,.12); } @media (min-width: 641px) { .enwyf-chips { display: none; } } /* -- twist diagrams + spec strips (injected, aria-hidden) ------------ */ #yf-structure .enw-yf-card .num { display: none !important; } .enwyf-dg { width: 44px; height: 44px; flex: none; } .enwyf-dg svg { width: 100%; height: 100%; display: block; } .enwyf-specs { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 4px; } .enwyf-spec { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 8px; font: 600 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .06em; color: #7d8494; text-transform: uppercase; } .enwyf-spec i { height: 5px; border-radius: 3px; background: rgba(201,151,0,.14); position: relative; font-style: normal; } .enwyf-spec i::after { content: ""; position: absolute; inset: 0; width: var(--v); border-radius: 3px; background: linear-gradient(90deg, #E1B447, #C99700); } #yf-structure .enw-yf-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } #yf-structure .enw-yf-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(26,52,101,.10); border-color: rgba(201,151,0,.35) !important; } /* -- cloth swatches: the four fabric cards show their construction --- */ #yf-fabric-construction .enw-yf-grid.two > .enw-yf-card { position: relative; padding-top: 122px !important; overflow: hidden; } #yf-fabric-construction .enw-yf-grid.two > .enw-yf-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 104px; border-bottom: 1px solid #E5E6EA; } #yf-fabric-construction .enw-yf-grid.two > .enw-yf-card:nth-child(1)::before { background: repeating-linear-gradient(90deg, rgba(26,52,101,.16) 0 7px, transparent 7px 14px), repeating-linear-gradient(0deg, rgba(201,151,0,.20) 0 7px, transparent 7px 14px), #F8F5EC; } #yf-fabric-construction .enw-yf-grid.two > .enw-yf-card:nth-child(2)::before { background: radial-gradient(circle at 7px 9px, transparent 4px, rgba(26,52,101,.13) 4px 5.5px, transparent 5.5px), radial-gradient(circle at 21px 23px, transparent 4px, rgba(201,151,0,.18) 4px 5.5px, transparent 5.5px), #F8F5EC; background-size: 28px 28px, 28px 28px, auto; } #yf-fabric-construction .enw-yf-grid.two > .enw-yf-card:nth-child(3)::before { background: repeating-linear-gradient(90deg, rgba(26,52,101,.12) 0 1.5px, transparent 1.5px 12px), repeating-linear-gradient(0deg, rgba(26,52,101,.12) 0 1.5px, transparent 1.5px 12px), #F8F5EC; } #yf-fabric-construction .enw-yf-grid.two > .enw-yf-card:nth-child(4)::before { background: repeating-linear-gradient(45deg, rgba(201,151,0,.22) 0 8px, rgba(201,151,0,.06) 8px 16px, rgba(26,52,101,.10) 16px 24px, rgba(201,151,0,.06) 24px 32px), #F8F5EC; } /* -- specification rows become stations on a thread ------------------ */ #yf-specification .enw-yf-compare { position: relative; padding-left: 46px; counter-reset: enwspec; } #yf-specification .enw-yf-compare::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #C99700, rgba(201,151,0,.15)); } #yf-specification .enw-yf-spec { position: relative; counter-increment: enwspec; } #yf-specification .enw-yf-spec::before { content: counter(enwspec); position: absolute; left: -42px; top: 4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 11.5px/1 Inter, system-ui, sans-serif; background: #FFFFFF; border: 2px solid #C99700; color: #1A3465; box-shadow: 0 0 8px rgba(201,151,0,.25); } /* -- the applications band: checklist becomes product tiles ---------- */ #yf-applications .enw-yf-note { margin-bottom: 14px !important; } #yf-applications .enw-yf-list { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; padding: 0 !important; list-style: none !important; } #yf-applications .enw-yf-list li { margin: 0 !important; background: #FFFFFF; border: 1px solid #E5E6EA; border-radius: 14px !important; padding: 136px 16px 16px 40px !important; position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; font-size: .95em; } #yf-applications .enw-yf-list li:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(26,52,101,.10); } #yf-applications .enw-yf-list li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 112px; background-color: #F8F5EC; background-position: center; background-size: cover; border-bottom: 1px solid #E5E6EA; } #yf-applications .enw-yf-list li:nth-child(1)::after { background-image: url('https://elnawawycompany.com/wp-content/uploads/2022/09/wet-spin2-768x512.webp'); } #yf-applications .enw-yf-list li:nth-child(2)::after { background-image: url('https://elnawawycompany.com/wp-content/uploads/2025/02/1F0A2600-sized-for-page-slider-768x512.jpg'); } #yf-applications .enw-yf-list li:nth-child(3)::after { background-image: url('https://elnawawycompany.com/wp-content/uploads/2025/02/4630ae897ffc278f30d65888525ea877-1-768x315.webp'); } #yf-applications .enw-yf-list li:nth-child(4)::after { background-image: url('https://elnawawycompany.com/wp-content/uploads/2025/03/Polypropylene-pp.-rafia-German-Production-Lines-768x513.webp'); } #yf-applications .enw-yf-list li:nth-child(5)::after { background-image: url('https://elnawawycompany.com/wp-content/uploads/2025/02/1F0A2600-sized-for-page-slider-219x146-1.jpg'); } #yf-applications .enw-yf-list li::before { top: 142px !important; left: 13px !important; } /* -- the ending: the thread reaches the needle ----------------------- */ .enw-yf-cta { position: relative; } .enw-yf-cta::before { content: ""; display: block; width: 26px; height: 26px; margin: 0 0 12px; background: #E1B447; -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(225,180,71,.5)); }