.elementor-kit-318{--e-global-color-primary:#FFD23D;--e-global-color-secondary:#D4AF37;--e-global-color-text:#F5F5F6;--e-global-color-accent:#FFD23D;--e-global-color-canvas0:#0D0D0D;--e-global-color-surfac1:#1A1917;--e-global-color-surfac2:#282724;--e-global-color-border0:#2E2D29;--e-global-color-inkmut0:rgba(245,245,246,0.7);--e-global-color-onprim0:#17150F;--e-global-color-scntxt0:#F5F0E6;--e-global-color-gold950:#6F5410;--e-global-color-gold900:#8A6A1C;--e-global-color-gold700:#B8860B;--e-global-color-gold500:#D4AF37;--e-global-color-gold400:#E8C96D;--e-global-color-gold300:#F6E27A;--e-global-color-gold200:#FFE9A8;--e-global-color-gold100:#FDF6D8;--e-global-color-success0:#22C55E;--e-global-color-danger00:#EF4444;--e-global-typography-primary-font-family:"Heebo";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Heebo";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Heebo";--e-global-typography-text-font-weight:500;--e-global-typography-accent-font-family:"Heebo";--e-global-typography-accent-font-weight:800;background-color:#0D0D0D;color:#F5F5F6;font-family:"Heebo", Sans-serif;font-size:16px;font-weight:500;line-height:1.6em;}.elementor-kit-318 button,.elementor-kit-318 input[type="button"],.elementor-kit-318 input[type="submit"],.elementor-kit-318 .elementor-button{background-color:#DDB13A;font-family:"Heebo", Sans-serif;font-weight:800;color:#17150F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#8A6A1C;border-radius:6px 6px 6px 6px;padding:13px 30px 13px 30px;}.elementor-kit-318 e-page-transition{background-color:#FFBC7D;}.elementor-kit-318 a{color:#F5F5F6;}.elementor-kit-318 a:hover{color:#FFD23D;}.elementor-kit-318 h1{color:#FFFFFF;font-family:"Heebo", Sans-serif;font-weight:800;}.elementor-kit-318 h2{color:#FFFFFF;font-family:"Heebo", Sans-serif;font-weight:800;}.elementor-kit-318 h3{color:#FFFFFF;font-family:"Heebo", Sans-serif;font-weight:700;}.elementor-kit-318 h4{color:#FFFFFF;font-family:"Heebo", Sans-serif;font-weight:700;}.elementor-kit-318 h5{color:#FFFFFF;font-family:"Heebo", Sans-serif;font-weight:700;}.elementor-kit-318 h6{color:#FFFFFF;font-family:"Heebo", Sans-serif;font-weight:600;}.elementor-kit-318 button:hover,.elementor-kit-318 button:focus,.elementor-kit-318 input[type="button"]:hover,.elementor-kit-318 input[type="button"]:focus,.elementor-kit-318 input[type="submit"]:hover,.elementor-kit-318 input[type="submit"]:focus,.elementor-kit-318 .elementor-button:hover,.elementor-kit-318 .elementor-button:focus{color:#17150F;}.elementor-kit-318 input:not([type="button"]):not([type="submit"]),.elementor-kit-318 textarea,.elementor-kit-318 .elementor-field-textual{color:#F5F5F6;background-color:#1F1E1B;border-radius:4px 4px 4px 4px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ========================================================================== IBET73 DESIGN SYSTEM — v2.0 "CHAMPAGNE" (2026-08-20) Base values extracted 1:1 from bet365gold.com (Tectoris ec1a91f4, dark, scene bronze), refined by AD decree: · sharper geometry (4/6/8px radii — the 12–16px rounding read cheap) · metallic multi-stop champagne gradients (Lamborghini-finish: the color shifts across the surface, always in harmony) · engineered depth: bevels, top-light, layered shadows · surgical spacing tokens — text-to-frame distances are specified, not felt SSOT: spec/design-system.json (v2 refinement block) WHERE THIS GOES: Elementor → Site Settings → Custom CSS (or child theme). Pair with build/elementor-kit-settings.md. Purge LiteSpeed after changes. RTL-safe: logical properties only. Dark-only brand. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · TOKENS -------------------------------------------------------------------------- */ :root { /* color — core (unchanged from extraction) */ --ib-bg: #0d0d0d; --ib-bg-deep: #0b0b0b; --ib-surface: #1a1917; --ib-surface-2: #282724; --ib-border: #2e2d29; --ib-text: #f5f5f6; --ib-text-muted: rgba(245, 245, 246, 0.70); /* color — the gold register (dark → light: a real metal ramp) */ --ib-gold-950: #6f5410; /* deepest shadow bronze */ --ib-gold-900: #8a6a1c; /* edge / border bronze */ --ib-gold-700: #b8860b; /* old gold */ --ib-gold-500: #d4af37; /* antique gold — ornament */ --ib-gold-400: #e8c96d; /* champagne */ --ib-gold-300: #f6e27a; /* light champagne */ --ib-gold-200: #ffe9a8; /* glint */ --ib-gold-100: #fdf6d8; /* near-white sheen */ --ib-primary: #ffd23d; /* interactive gold (links, focus, icons) */ --ib-primary-hover: #e8c96d; --ib-on-primary: #17150f; /* color — feedback (forms only) */ --ib-success: #22c55e; --ib-danger: #ef4444; --ib-warning: #f59e0b; /* color — areas */ --ib-header: #0d0d0d; --ib-card: #1a1917; --ib-input: #1f1e1b; --ib-scrim: rgba(0, 0, 0, 0.78); --ib-hero-overlay: rgba(0, 0, 0, 0.75); /* ------------------------------------------------------------------ gradients — the metallic family. Multi-stop = the "different color from every angle" finish. Angles are fixed per role so the light always comes from the same sky. ------------------------------------------------------------------ */ /* full metal ramp — display text, ornaments */ --ib-grad-champagne: linear-gradient(100deg, var(--ib-gold-900) 0%, var(--ib-gold-500) 16%, var(--ib-gold-300) 34%, var(--ib-gold-100) 50%, var(--ib-gold-300) 66%, var(--ib-gold-700) 86%, var(--ib-gold-950) 100%); /* CTA metal — vertical ramp, calmer, holds 4.5:1 with --ib-on-primary */ --ib-grad-cta: linear-gradient(180deg, #f8e191 0%, #eec95c 26%, #ddb13a 52%, #c8992c 78%, #b18422 100%); /* sheen overlays: layer ABOVE a ramp for the angle-shift illusion */ --ib-sheen-top: radial-gradient(130% 90% at 50% -8%, rgba(255,250,230,.30), transparent 46%); --ib-sheen-side: linear-gradient(255deg, rgba(255,255,255,.10), transparent 42%); /* hairline — light travels along the line and peaks at center */ --ib-hairline: linear-gradient(90deg, transparent, var(--ib-gold-700) 12%, var(--ib-gold-500) 30%, var(--ib-gold-200) 50%, var(--ib-gold-500) 70%, var(--ib-gold-700) 88%, transparent); /* card border metal — used via border-box double background */ --ib-border-metal: linear-gradient(160deg, rgba(212,175,55,.50), rgba(255,255,255,.10) 30%, rgba(212,175,55,.12) 62%, rgba(212,175,55,.42)); --ib-header-tex: radial-gradient(50% 40% at 20% 0%, rgba(255,210,61,.03), transparent 60%), radial-gradient(50% 40% at 80% 100%, rgba(255,255,255,.024), transparent 60%); /* scene "bronze" — deepened, vignetted */ --ib-scn-gold-bg: radial-gradient(120% 160% at 50% -30%, rgba(212,175,55,.14), transparent 55%), linear-gradient(120deg, #1a1507, #2a2005 55%, #191408); --ib-scn-gold-text: #f5f0e6; --ib-scn-gold-muted: rgba(245, 240, 230, 0.70); --ib-scn-gold-border: rgba(212, 175, 55, 0.28); --ib-scn-dark-bg: linear-gradient(#0b0a08, #12100a); --ib-scn-footer-bg: linear-gradient(175deg, #14110a, #1d1706 55%, #120f09); --ib-scn-footer-art: radial-gradient(70% 45% at 50% 0, rgba(212,175,55,.07), transparent 75%); /* type */ --ib-font: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif; /* radii — SHARP. Luxury is precise, not soft. */ --ib-r-sm: 4px; /* inputs, chips, tags */ --ib-r-md: 6px; /* buttons */ --ib-r-lg: 8px; /* cards, panels */ --ib-r-xl: 12px; /* hero media, large frames */ /* elevation — ambient + key, plus the top-light that sells depth */ --ib-toplight: inset 0 1px 0 rgba(255,255,255,.05); --ib-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.20); --ib-elev-2: 0 2px 4px rgba(0,0,0,.28), 0 10px 24px -8px rgba(0,0,0,.40); --ib-elev-3: 0 4px 8px rgba(0,0,0,.30), 0 24px 48px -16px rgba(0,0,0,.55); --ib-bevel-gold: inset 0 1px 0 rgba(255,246,214,.55), inset 0 -1px 0 rgba(80,58,10,.45); /* motion */ --ib-dur: .2s; --ib-dur-fast: .12s; --ib-ease: cubic-bezier(.4, 0, .2, 1); /* ------------------------------------------------------------------ spacing — the surgical scale. 4px base; component distances are tokens, not judgment calls. ------------------------------------------------------------------ */ --ib-s-1: 4px; --ib-s-2: 8px; --ib-s-3: 12px; --ib-s-4: 16px; --ib-s-5: 20px; --ib-s-6: 24px; --ib-s-8: 32px; --ib-s-10: 40px; --ib-s-12: 48px; --ib-s-16: 64px; --ib-btn-pad: 13px 30px; /* block inline */ --ib-card-pad: var(--ib-s-6); /* 24px all sides */ --ib-input-pad: 12px 16px; --ib-label-gap: 10px; /* micro-label → title */ --ib-title-gap: var(--ib-s-2); /* title → body */ --ib-cta-gap: var(--ib-s-5); /* text block → buttons */ --ib-section-pad: clamp(56px, 8vw, 96px); /* section block padding */ --ib-container: 1240px; --ib-container-pad: clamp(16px, 4vw, 40px); } /* -------------------------------------------------------------------------- 2 · GLOBAL RESKIN -------------------------------------------------------------------------- */ html { color-scheme: dark; } body { background-color: var(--ib-bg); color: var(--ib-text); font-family: var(--ib-font); font-weight: 500; font-size: 16px; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--ib-font); color: #fff; line-height: 1.2; } h1 { font-weight: 800; font-size: clamp(32px, 4.5vw, 48px); line-height: 1.14; } h2 { font-weight: 800; font-size: clamp(22px, 2.6vw, 28px); } h3, h4 { font-weight: 700; } p { color: var(--ib-text); } a { color: var(--ib-text); transition: color var(--ib-dur) var(--ib-ease); } a:hover { color: var(--ib-primary); } ::selection { background: var(--ib-primary); color: var(--ib-on-primary); } .elementor-widget-text-editor { color: var(--ib-text-muted); } /* display text in metal — headline keywords, numerals, the brand moments */ .ib-gold-text { background: var(--ib-grad-champagne); -webkit-background-clip: text; background-clip: text; color: transparent; } /* -------------------------------------------------------------------------- 3 · HEADER / FOOTER -------------------------------------------------------------------------- */ .site-header, header.elementor-location-header, [data-elementor-type="header"] { background-color: var(--ib-header); background-image: var(--ib-header-tex); border-block-end: 1px solid var(--ib-border); } .site-header a, [data-elementor-type="header"] a { font-weight: 600; } .site-header a:hover, [data-elementor-type="header"] a:hover { color: var(--ib-primary); } .site-footer, footer.elementor-location-footer, [data-elementor-type="footer"] { position: relative; background: var(--ib-scn-footer-bg); color: var(--ib-scn-gold-text); border-block-start: 0; } [data-elementor-type="footer"]::before, .site-footer::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--ib-scn-footer-art); } [data-elementor-type="footer"]::after, .site-footer::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 1px; background: var(--ib-hairline); pointer-events: none; } .ib-footer-box { background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.12); border-radius: var(--ib-r-lg); box-shadow: var(--ib-toplight); padding: var(--ib-card-pad); } /* -------------------------------------------------------------------------- 4 · BUTTONS — machined metal -------------------------------------------------------------------------- */ /* Primary — champagne metal CTA */ .elementor-button, .wp-block-button__link, button[type="submit"], .ib-btn-primary { background: var(--ib-sheen-top), var(--ib-sheen-side), var(--ib-grad-cta); background-size: 100% 100%, 100% 100%, 120% 120%; background-position: 50% 0, 0 0, 50% 30%; color: var(--ib-on-primary) !important; border: 1px solid var(--ib-gold-900); border-radius: var(--ib-r-md); padding: var(--ib-btn-pad); font-family: var(--ib-font); font-weight: 800; letter-spacing: .01em; box-shadow: var(--ib-bevel-gold), 0 2px 6px rgba(0,0,0,.35), 0 12px 24px -12px rgba(0,0,0,.50); transition: background-position var(--ib-dur) var(--ib-ease), filter var(--ib-dur) var(--ib-ease), transform var(--ib-dur-fast) var(--ib-ease), box-shadow var(--ib-dur-fast) var(--ib-ease); } .elementor-button:hover, .wp-block-button__link:hover, button[type="submit"]:hover, .ib-btn-primary:hover { color: var(--ib-on-primary) !important; background-position: 50% 0, 0 0, 50% 55%; /* the light slides — angle change */ filter: brightness(1.05); } .elementor-button:active, .ib-btn-primary:active { transform: translateY(1px); box-shadow: var(--ib-bevel-gold), 0 1px 3px rgba(0,0,0,.35), 0 6px 12px -8px rgba(0,0,0,.45); } /* Secondary — graphite chip with a gold thread */ .ib-btn-chip .elementor-button, a.ib-btn-chip, button.ib-btn-chip { background: linear-gradient(180deg, #302e2a, #232220 60%, #1e1d1a); color: var(--ib-text) !important; border: 1px solid rgba(212,175,55,.34); border-radius: var(--ib-r-md); padding: var(--ib-btn-pad); font-weight: 700; letter-spacing: .01em; box-shadow: var(--ib-toplight), 0 1.5px 0 rgba(0,0,0,.30), 0 8px 16px -10px rgba(0,0,0,.45); transition: border-color var(--ib-dur) var(--ib-ease), transform var(--ib-dur-fast) var(--ib-ease), box-shadow var(--ib-dur-fast) var(--ib-ease); filter: none; } .ib-btn-chip .elementor-button:hover, a.ib-btn-chip:hover, button.ib-btn-chip:hover { border-color: var(--ib-gold-400); color: var(--ib-text) !important; } .ib-btn-chip .elementor-button:active, a.ib-btn-chip:active, button.ib-btn-chip:active { transform: translateY(1px); box-shadow: var(--ib-toplight), 0 0 0 rgba(0,0,0,.30), 0 4px 8px -6px rgba(0,0,0,.40); } /* WhatsApp CTA — keeps its green, in system geometry */ .ib-btn-whatsapp .elementor-button, a.ib-btn-whatsapp, button.ib-btn-whatsapp, .qlwapp-toggle { background: radial-gradient(130% 90% at 50% -8%, rgba(255,255,255,.25), transparent 46%), linear-gradient(180deg, #2fd873, #1fa856 70%, #188a47); color: #06140f !important; border: 1px solid #12693a; border-radius: var(--ib-r-md); padding: var(--ib-btn-pad); font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(6,40,22,.5), 0 2px 6px rgba(0,0,0,.35); } /* -------------------------------------------------------------------------- 5 · CARDS, INPUTS, LABELS — metal-edged, sharp -------------------------------------------------------------------------- */ .ib-card { background: linear-gradient(var(--ib-card), var(--ib-card)) padding-box, var(--ib-border-metal) border-box; border: 1px solid transparent; border-radius: var(--ib-r-lg); box-shadow: var(--ib-toplight), var(--ib-elev-2); overflow: hidden; transition: box-shadow var(--ib-dur) var(--ib-ease), transform var(--ib-dur) var(--ib-ease); } .ib-card:hover { box-shadow: var(--ib-toplight), var(--ib-elev-3); transform: translateY(-2px); } .ib-card > .ib-card-body { padding: var(--ib-card-pad); } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea, select { background-color: var(--ib-input); color: var(--ib-text); border: 1px solid var(--ib-border); border-radius: var(--ib-r-sm); padding: var(--ib-input-pad); box-shadow: inset 0 2px 4px rgba(0,0,0,.25); transition: border-color var(--ib-dur) var(--ib-ease), box-shadow var(--ib-dur) var(--ib-ease); } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--ib-gold-500); box-shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 0 0 3px rgba(255,210,61,.16); } a:focus-visible, button:focus-visible { outline: 2px solid var(--ib-primary); outline-offset: 2px; } ::placeholder { color: var(--ib-text-muted); } .ib-micro { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; opacity: .85; margin-block-end: var(--ib-label-gap); } .ib-section-title { display: flex; align-items: center; gap: var(--ib-s-3); font-size: 18px; font-weight: 700; color: #fff; } .ib-section-title::before { content: ""; inline-size: 3px; block-size: 20px; background: linear-gradient(180deg, var(--ib-gold-200), var(--ib-gold-700)); } /* thin free-standing divider */ .ib-hairline { block-size: 1px; background: var(--ib-hairline); border: 0; } /* -------------------------------------------------------------------------- 6 · THE SIGNATURE — Gold Scene band (one per page + footer) -------------------------------------------------------------------------- */ .ib-scene { position: relative; background: var(--ib-scn-gold-bg); color: var(--ib-scn-gold-text); padding-block: var(--ib-s-12) var(--ib-s-12); } .ib-scene::before, .ib-scene::after { content: ""; position: absolute; inset-inline: 0; block-size: 1px; background: var(--ib-hairline); pointer-events: none; } .ib-scene::before { inset-block-start: 0; } .ib-scene::after { inset-block-end: 0; } .ib-scene h1, .ib-scene h2, .ib-scene h3 { color: var(--ib-scn-gold-text); } .ib-scene p { color: var(--ib-scn-gold-muted); } .ib-scene .ib-card { border-color: var(--ib-scn-gold-border); } .ib-scene-dark { background: var(--ib-scn-dark-bg); } /* -------------------------------------------------------------------------- 7 · HERO -------------------------------------------------------------------------- */ .ib-hero { position: relative; color: #fff; } .ib-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 100%, rgba(212,175,55,.10), transparent 60%), var(--ib-hero-overlay); } .ib-hero > * { position: relative; } .ib-hero h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 800; line-height: 1.12; } /* -------------------------------------------------------------------------- 8 · COMPOSITION HELPERS — clean responsiveness without per-page hacks -------------------------------------------------------------------------- */ .ib-container { max-inline-size: var(--ib-container); margin-inline: auto; padding-inline: var(--ib-container-pad); } .ib-section { padding-block: var(--ib-section-pad); } .ib-grid { display: grid; gap: var(--ib-s-5); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .ib-stack { display: grid; gap: var(--ib-s-3); } .ib-actions { display: flex; flex-wrap: wrap; gap: var(--ib-s-3); margin-block-start: var(--ib-cta-gap); } @media (prefers-reduced-motion: reduce) { .ib-card, .elementor-button, .ib-btn-primary, a, input, textarea, select { transition: none; } .ib-card:hover { transform: none; } } /* -------------------------------------------------------------------------- 9 · QUARANTINE — kit globals remapped; logo cyan lives only in the logo -------------------------------------------------------------------------- */ .elementor-kit-318 { --e-global-color-primary: var(--ib-primary); --e-global-color-secondary: var(--ib-gold-500); --e-global-color-text: var(--ib-text); --e-global-color-accent: var(--ib-primary); } /* ========================================================================== V3 — ENTERPRISE COMPONENTS (2026-08-20) Implements spec/: flows.md · header.md · mega-menu.md · footer.md · page-templates.md, under the binding law of spec/rtl.md. ========================================================================== */ /* -------------------------------------------------------------------------- 10 · RTL LAW PLUMBING (rtl.md §4–§5, §9) -------------------------------------------------------------------------- */ .ib-ltr { direction: ltr; unicode-bidi: isolate; } input[type="tel"], input[type="email"], input[type="url"] { direction: ltr; text-align: end; } /* Hebrew has no italics — emphasis is weight */ .ib-prose em, .ib-prose i { font-style: normal; font-weight: 700; color: #fff; } /* directional icons mirror by flag only (rtl.md §3) */ [dir="rtl"] svg[data-rtl="mirror"] { transform: scaleX(-1); } /* Hebrew micro-label: NO uppercase, tight tracking (ib-micro stays for Latin) */ .ib-micro-he { font-size: 11px; font-weight: 600; letter-spacing: .06em; opacity: .85; margin-block-end: var(--ib-label-gap); } /* -------------------------------------------------------------------------- 11 · ICONS (briefs/icons-commission-v1.md) -------------------------------------------------------------------------- */ .ib-icon { inline-size: 24px; block-size: 24px; flex: none; color: currentColor; } .ib-icon--sm { inline-size: 20px; block-size: 20px; } .ib-icon--feature { inline-size: 48px; block-size: 48px; } .ib-icon--gold { color: var(--ib-gold-500); } /* -------------------------------------------------------------------------- 12 · HEADER STATES (header.md) — classes for the rebuilt template #325 -------------------------------------------------------------------------- */ .ib-header { transition: background var(--ib-dur) var(--ib-ease), box-shadow var(--ib-dur) var(--ib-ease); } .ib-header.is-scrolled { background: rgba(13,13,13,.88) !important; -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); box-shadow: var(--ib-elev-2); } .ib-nav-link { position: relative; padding: 10px var(--ib-s-3); font-weight: 600; color: var(--ib-text); } .ib-nav-link::after { content: ""; position: absolute; inset-inline: 12px; inset-block-end: 6px; block-size: 2px; background: var(--ib-grad-accent); transform: scaleX(0); transition: transform 160ms var(--ib-ease); } .ib-nav-link:hover { color: var(--ib-primary); } .ib-nav-link:hover::after { transform: scaleX(1); } .ib-nav-link[aria-current="page"] { color: var(--ib-gold-400); } .ib-nav-link[aria-current="page"]::after { transform: scaleX(1); background: var(--ib-gold-500); } /* mobile drawer (header.md §6) */ .ib-drawer { position: fixed; inset: 0; z-index: 1200; background: var(--ib-bg-deep); transform: translateX(100%); transition: transform 240ms var(--ib-ease); display: flex; flex-direction: column; overflow-y: auto; } [dir="rtl"] .ib-drawer { transform: translateX(-100%); } .ib-drawer.is-open { transform: translateX(0); } .ib-drawer-nav a { display: flex; align-items: center; min-block-size: 52px; font-size: 18px; font-weight: 700; border-block-end: 1px solid var(--ib-border); padding-inline: var(--ib-s-4); } .ib-drawer-cta { position: sticky; inset-block-end: 0; margin-block-start: auto; background: var(--ib-surface); padding: var(--ib-s-4); display: grid; gap: var(--ib-s-3); border-block-start: 1px solid var(--ib-border); } /* mobile sticky bottom CTA bar */ .ib-bottom-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 1100; display: none; grid-template-columns: 1fr 1fr; gap: var(--ib-s-2); padding: var(--ib-s-2) var(--ib-s-3); background: var(--ib-surface); box-shadow: var(--ib-elev-3); border-block-start: 1px solid var(--ib-border); transform: translateY(100%); transition: transform var(--ib-dur) var(--ib-ease); } .ib-bottom-bar.is-visible { transform: translateY(0); } @media (max-width: 767px) { .ib-bottom-bar { display: grid; } } /* -------------------------------------------------------------------------- 13 · MEGA MENU (mega-menu.md) -------------------------------------------------------------------------- */ .ib-mega { position: absolute; inset-inline: 0; z-index: 1050; background: var(--ib-bg-deep); border-block-end: 1px solid var(--ib-border); box-shadow: var(--ib-elev-3); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 200ms var(--ib-ease), transform 200ms var(--ib-ease); } .ib-mega::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 1px; background: var(--ib-hairline); } .ib-mega.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .ib-mega-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--ib-s-6); padding-block: var(--ib-s-8) var(--ib-s-6); } .ib-mega-col h3 { display: flex; align-items: center; gap: var(--ib-s-2); font-size: 15px; font-weight: 700; padding-block-end: var(--ib-s-2); border-block-end: 1px solid var(--ib-border); margin-block-end: var(--ib-s-3); } .ib-mega-col h3 .ib-icon { color: var(--ib-gold-500); inline-size: 22px; block-size: 22px; } .ib-mega-link { display: block; padding: 8px var(--ib-s-2); border-radius: var(--ib-r-sm); font-size: 13.5px; font-weight: 600; min-block-size: 40px; } .ib-mega-link small { display: block; font-size: 12px; font-weight: 400; color: var(--ib-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ib-mega-link:hover { background: var(--ib-surface); color: var(--ib-gold-400); } .ib-mega-rail { display: flex; align-items: center; justify-content: space-between; gap: var(--ib-s-4); flex-wrap: wrap; border-block-start: 1px solid var(--ib-border); padding-block: var(--ib-s-5) var(--ib-s-6); } .ib-mega-backdrop { position: fixed; inset: 0; z-index: 1040; background: var(--ib-scrim); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ib-ease); } .ib-mega-backdrop.is-open { opacity: .4; pointer-events: auto; } /* -------------------------------------------------------------------------- 14 · FOOTER ROWS (footer.md) — classes for the rebuilt template #378 -------------------------------------------------------------------------- */ .ib-footer-a { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: var(--ib-s-8); padding-block: var(--ib-s-16) var(--ib-s-10); } .ib-footer-a nav h3 { font-size: 14px; font-weight: 700; color: var(--ib-scn-gold-text); margin-block-end: var(--ib-s-3); } .ib-footer-a nav a { display: flex; align-items: center; min-block-size: 32px; font-size: 13px; font-weight: 500; color: var(--ib-scn-gold-muted); } .ib-footer-a nav a:hover { color: var(--ib-gold-200); text-decoration: underline; text-underline-offset: 3px; } .ib-footer-b { padding-block: var(--ib-s-6); border-block: 1px solid var(--ib-scn-gold-border); display: flex; align-items: center; justify-content: center; gap: var(--ib-s-8); flex-wrap: wrap; } .ib-footer-b img { filter: grayscale(1); opacity: .55; transition: opacity var(--ib-dur); } .ib-footer-b img:hover { opacity: 1; } .ib-footer-c { display: flex; align-items: center; justify-content: space-between; gap: var(--ib-s-3); flex-wrap: wrap; padding-block: var(--ib-s-4); font-size: 12px; color: var(--ib-scn-gold-muted); background: rgba(0,0,0,.25); border-block-start: 1px solid var(--ib-scn-gold-border); } @media (max-width: 1024px) { .ib-footer-a { grid-template-columns: 1.4fr 1fr 1fr; } } @media (max-width: 767px) { .ib-footer-a { grid-template-columns: 1fr; padding-block: var(--ib-s-10) var(--ib-s-6); } .ib-footer-c { justify-content: center; text-align: center; } } /* -------------------------------------------------------------------------- 15 · ACCORDION (footer mobile + FAQ + drawer) — [data-ib-accordion] -------------------------------------------------------------------------- */ .ib-acc-head { display: flex; align-items: center; justify-content: space-between; min-block-size: 52px; inline-size: 100%; background: none; border: 0; border-block-end: 1px solid var(--ib-border); color: inherit; font: inherit; font-weight: 700; cursor: pointer; padding-inline: var(--ib-s-2); } .ib-acc-head .ib-icon { color: var(--ib-gold-500); transition: transform 200ms var(--ib-ease); } .ib-acc.is-open > .ib-acc-head .ib-icon { transform: rotate(180deg); } .ib-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ib-ease); } .ib-acc-body > div { overflow: hidden; } .ib-acc.is-open > .ib-acc-body { grid-template-rows: 1fr; } /* -------------------------------------------------------------------------- 16 · BREADCRUMBS · TOC · SHARE · PAGINATION · FILTER CHIPS -------------------------------------------------------------------------- */ .ib-breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ib-text-muted); flex-wrap: wrap; } .ib-breadcrumbs a:hover { color: var(--ib-gold-400); } .ib-breadcrumbs .sep { color: var(--ib-gold-700); } .ib-breadcrumbs [aria-current="page"] { color: var(--ib-gold-400); } .ib-toc { position: sticky; inset-block-start: 96px; inline-size: 260px; padding-inline-start: var(--ib-s-5); border-inline-start: 1px solid var(--ib-border); } .ib-toc a { display: block; padding-block: 6px; font-size: 13px; color: var(--ib-text-muted); } .ib-toc a.is-active { color: var(--ib-gold-400); } .ib-share { display: flex; gap: var(--ib-s-2); } .ib-share a { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border: 1px solid var(--ib-border); border-radius: var(--ib-r-sm); background: var(--ib-surface); } .ib-share a:hover { border-color: var(--ib-gold-400); color: var(--ib-gold-400); } .ib-pagination { display: flex; gap: var(--ib-s-2); justify-content: center; } .ib-pagination a, .ib-pagination span { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border: 1px solid var(--ib-border); border-radius: var(--ib-r-sm); font-size: 14px; font-weight: 600; } .ib-pagination .current { border-color: var(--ib-gold-500); color: var(--ib-gold-400); } .ib-pagination a:hover { border-color: var(--ib-gold-400); color: var(--ib-gold-400); } .ib-filter-chip { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--ib-border); border-radius: var(--ib-r-sm); background: var(--ib-surface); font-size: 12px; font-weight: 600; cursor: pointer; } .ib-filter-chip:hover { border-color: var(--ib-gold-400); } .ib-filter-chip.is-active { border-color: var(--ib-gold-500); color: var(--ib-gold-400); } /* -------------------------------------------------------------------------- 17 · PROSE — long-form typography (page-templates.md §5), class ib-prose -------------------------------------------------------------------------- */ .ib-prose, .elementor-widget.ib-prose { max-inline-size: 70ch !important; margin-inline: auto !important; } /* the article header block aligns to the same measure */ .elementor-widget.ib-post-title, .elementor-widget.ib-post-meta, .elementor-widget.ib-post-featured { max-inline-size: 70ch !important; margin-inline: auto !important; } .ib-prose p { font-size: 17px; line-height: 1.75; font-weight: 400; color: rgba(245,245,246,.92); margin-block: 0 var(--ib-s-4); } .ib-prose > p:first-child { font-size: 19px; line-height: 1.7; font-weight: 500; color: var(--ib-text); } .ib-prose h2 { display: flex; align-items: center; gap: var(--ib-s-3); font-size: 24px; font-weight: 800; color: #fff; margin-block: var(--ib-s-10) var(--ib-s-3); } .ib-prose h2::before { content: ""; inline-size: 3px; block-size: 24px; background: linear-gradient(180deg, var(--ib-gold-200), var(--ib-gold-700)); } .ib-prose h3 { font-size: 19px; font-weight: 700; color: #fff; margin-block: var(--ib-s-6) var(--ib-s-2); } .ib-prose a { color: var(--ib-gold-400); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .ib-prose a:hover { color: var(--ib-gold-200); } .ib-prose strong { font-weight: 700; color: #fff; } .ib-prose ul, .ib-prose ol { padding-inline-start: var(--ib-s-5); margin-block: 0 var(--ib-s-4); } .ib-prose li { margin-block-end: var(--ib-s-2); } .ib-prose li::marker { color: var(--ib-gold-500); } .ib-prose blockquote { border-inline-start: 3px solid var(--ib-gold-500); background: var(--ib-surface); border-radius: var(--ib-r-sm); padding: var(--ib-s-3) var(--ib-s-5); margin-block: var(--ib-s-5); font-size: 18px; font-weight: 500; } .ib-prose table { inline-size: 100%; border-collapse: collapse; font-size: 14px; } .ib-prose thead th { background: var(--ib-surface-2); font-size: 13px; font-weight: 700; padding: 10px var(--ib-s-3); text-align: start; } .ib-prose td { padding: 10px var(--ib-s-3); border-block-end: 1px solid var(--ib-border); } .ib-prose img, .ib-prose figure { border-radius: var(--ib-r-lg); border: 1px solid rgba(255,255,255,.10); max-inline-size: 100%; } .ib-prose figcaption { font-size: 12px; color: var(--ib-text-muted); text-align: center; margin-block-start: var(--ib-s-2); } .ib-prose hr { border: 0; block-size: 1px; background: var(--ib-hairline); margin-block: var(--ib-s-8); } .ib-prose code { background: var(--ib-surface-2); border-radius: var(--ib-r-sm); padding: 2px 6px; font-size: 13px; } .ib-table-scroll { overflow-x: auto; } /* article meta row (Z2d) — Hebrew micro, no uppercase */ .ib-post-meta { display: flex; gap: var(--ib-s-3); align-items: center; font-size: 12px; color: var(--ib-text-muted); letter-spacing: .06em; } /* -------------------------------------------------------------------------- 18 · V3.1 — HEADER BAR & FOOTER LAYOUT (template rebuild support) -------------------------------------------------------------------------- */ [data-elementor-type="header"] { position: sticky; inset-block-start: 0; z-index: 1000; } .ib-hdr-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ib-s-4); min-block-size: 76px; transition: min-block-size var(--ib-dur) var(--ib-ease); } .is-scrolled .ib-hdr-bar { min-block-size: 64px; } .ib-hdr-logo img { block-size: 40px; inline-size: auto; display: block; transition: block-size var(--ib-dur) var(--ib-ease); } .is-scrolled .ib-hdr-logo img { block-size: 34px; } .ib-hdr-nav { display: flex; align-items: center; gap: var(--ib-s-2); } .ib-hdr-nav .ib-nav-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; font: inherit; font-size: 16px; cursor: pointer; } .ib-nav-link .ib-chevron { transition: transform 200ms var(--ib-ease); } .ib-nav-link[aria-expanded="true"] .ib-chevron { transform: rotate(180deg); } .ib-hdr-actions { display: flex; align-items: center; gap: var(--ib-s-3); } .ib-hdr-actions .ib-btn-primary, .ib-hdr-actions .ib-btn-whatsapp { padding: 10px 22px; font-size: 14px; text-decoration: none; border-radius: var(--ib-r-md); } .ib-hdr-burger { display: none; place-items: center; inline-size: 44px; block-size: 44px; background: var(--ib-surface); border: 1px solid var(--ib-border); border-radius: var(--ib-r-sm); color: var(--ib-text); cursor: pointer; } @media (max-width: 1024px) { .ib-hdr-nav, .ib-mega, .ib-mega-backdrop { display: none; } .ib-hdr-burger { display: grid; } .ib-hdr-actions .ib-btn-whatsapp { display: none; } .ib-hdr-bar { min-block-size: 60px; } .ib-hdr-logo img { block-size: 32px; } } @media (max-width: 767px) { .ib-hdr-actions { display: none; } } /* drawer internals */ .ib-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--ib-s-3) var(--ib-s-4); border-block-end: 1px solid var(--ib-border); } .ib-drawer .ib-acc-head { min-block-size: 52px; font-size: 18px; padding-inline: var(--ib-s-4); } .ib-drawer .ib-acc-body a { display: flex; align-items: center; min-block-size: 44px; font-size: 14px; color: var(--ib-text-muted); padding-inline: var(--ib-s-6); } .ib-drawer .ib-acc-body a:hover { color: var(--ib-gold-400); } .ib-drawer-nav > a { color: var(--ib-text); text-decoration: none; } /* footer grid: brand + 5 pillar columns (v3.1 overrides §14 four-col default) */ .ib-footer-a { grid-template-columns: 1.6fr repeat(5, 1fr); gap: var(--ib-s-6); } .ib-footer-brand p { font-size: 14px; color: var(--ib-scn-gold-muted); max-inline-size: 40ch; margin-block: var(--ib-s-3) var(--ib-s-5); } .ib-footer-brand img { block-size: 36px; inline-size: auto; } .ib-footer-brand .ib-actions { margin-block-start: 0; display: grid; gap: var(--ib-s-3); max-inline-size: 240px; } .ib-footer-brand .ib-btn-primary, .ib-footer-brand .ib-btn-whatsapp { padding: 11px 20px; font-size: 14px; text-align: center; text-decoration: none; } .ib-footer-c a { color: var(--ib-scn-gold-muted); } .ib-footer-c a:hover { color: var(--ib-gold-200); } @media (max-width: 1024px) { .ib-footer-a { grid-template-columns: 1.4fr 1fr 1fr; } } @media (max-width: 767px) { .ib-footer-a { grid-template-columns: 1fr; } } /* header container width (template uses plain div, not e-con) */ .ib-hdr-wrap { position: relative; } /* -------------------------------------------------------------------------- 19 · V3.2 — live fixes (2026-08-20) -------------------------------------------------------------------------- */ /* the off-canvas drawer must never extend the scrollable area (RTL exposes inline-start overflow): reveal with clip-path instead of translate — zero layout footprint while closed */ html { overflow-x: clip; } .ib-drawer { transform: none; visibility: hidden; clip-path: inset(0 0 0 100%); transition: clip-path 240ms var(--ib-ease), visibility 0s 240ms; } [dir="rtl"] .ib-drawer { transform: none; clip-path: inset(0 100% 0 0); } .ib-drawer.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition-delay: 0s, 0s; } /* Elementor kit paints ALL