/* AFIWAI Modern Design 7.0 — clean art-directed rebirth */ :root{--af-blue:#1598ff;--af-bg:#050911;--af-panel:#0a111d;--af-text:#f5f8fc;--af-muted:#9baabd} body.afiwai-modern-design-active{background:var(--af-bg)!important;color:var(--af-text);overflow-x:hidden} body.afiwai-md-hide-theme-sidebar #sidebar,body.afiwai-md-hide-theme-sidebar .sidebar,body.afiwai-md-hide-theme-sidebar aside.widget-area,body.afiwai-md-hide-theme-sidebar #secondary,body.afiwai-md-hide-theme-sidebar .et_pb_widget_area,body.afiwai-md-hide-theme-sidebar .widget-area{display:none!important} body.afiwai-md-hide-theme-sidebar #left-area,body.afiwai-md-hide-theme-sidebar #primary,body.afiwai-md-hide-theme-sidebar .content-area{width:100%!important;max-width:none!important;float:none!important;padding:0!important} body.afiwai-md-hide-theme-sidebar #main-content .container:before{display:none!important} body.afiwai-md-hide-theme-sidebar #main-content .container{width:100%!important;max-width:none!important;padding:0!important} .afiwai-md-backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(900px 650px at 80% 8%,rgba(0,126,255,.12),transparent 68%),linear-gradient(180deg,#040810,#070c15)} .afiwai-md-root{position:relative;z-index:1;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:transparent!important} .afiwai-md-root h1,.afiwai-md-root h2,.afiwai-md-root h3{color:var(--af-text)!important;letter-spacing:-.05em!important} .afiwai-md-root p,.afiwai-md-root li{color:var(--af-muted)!important;line-height:1.42!important} .afiwai-md-progress{position:fixed;z-index:99999;top:0;left:0;width:100%;height:2px;background:rgba(255,255,255,.04)}.afiwai-md-progress span{display:block;height:100%;background:var(--af-blue);transform-origin:left;transform:scaleX(0)} /* Hero */ .afiwai-md-hero{position:relative;min-height:78vh;display:flex;align-items:center;padding:clamp(120px,12vw,185px) max(5vw,calc((100vw - 1500px)/2)) clamp(90px,9vw,140px);overflow:hidden;background:linear-gradient(120deg,rgba(255,255,255,.018),transparent 50%)} .afiwai-md-hero:after{content:"";position:absolute;right:7%;top:18%;width:min(38vw,590px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(21,152,255,.14),transparent 64%);border:1px solid rgba(21,152,255,.09)} .afiwai-md-hero-inner{position:relative;z-index:2;width:min(980px,72vw)} .afiwai-md-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:28px;color:#8496aa;font:800 11px/1.2 ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase}.afiwai-md-eyebrow:before{content:"";width:38px;height:2px;background:var(--af-blue)} .afiwai-md-hero h1{margin:0 0 30px!important;font-size:clamp(58px,7.6vw,75px)!important;font-weight:900!important;line-height:.86!important;max-width:1050px!important} .afiwai-md-hero p{max-width:690px!important;font-size:clamp(17px,1.25vw,22px)!important;line-height:1.38!important;margin-bottom:12px!important} .afiwai-md-hero-visual{display:none!important}.afiwai-md-scrollhint{display:none!important} /* Every section is compact and content-driven: no min-height. */ .afiwai-md-section{position:relative;margin:0!important;padding:clamp(78px,7vw,118px) max(5vw,calc((100vw - 1500px)/2))!important;background:#07101a!important;border:0!important;border-radius:0!important;box-shadow:none!important;clip-path:none!important;min-height:0!important} .afiwai-md-section:nth-child(even){background:#050a12!important} .afiwai-md-section:after{content:"";position:absolute;left:max(5vw,calc((100vw - 1500px)/2));right:max(5vw,calc((100vw - 1500px)/2));top:0;height:1px;background:linear-gradient(90deg,rgba(21,152,255,.45),rgba(255,255,255,.06) 25%,transparent 75%)} .afiwai-md-section:before{content:attr(data-index);position:absolute;left:max(5vw,calc((100vw - 1500px)/2));top:44px;color:var(--af-blue);font:800 10px/1 ui-monospace,monospace;letter-spacing:.18em} .afiwai-md-section-shell{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:clamp(50px,7vw,120px);align-items:start} .afiwai-md-section-shell>h2{grid-column:1;margin:0!important;padding-top:28px!important;font-size:clamp(40px,4.6vw,76px)!important;font-weight:850!important;line-height:.94!important;position:relative!important;top:auto!important} .afiwai-md-section-shell>h2:after{content:"";display:block;width:70px;height:4px;margin-top:25px;background:var(--af-blue)} .afiwai-md-section-shell>h2~*{grid-column:2} .afiwai-md-section-shell>p:first-of-type{margin-top:24px!important;color:#d2dbe6!important;font-size:clamp(18px,1.2vw,22px)!important;line-height:1.4!important} .afiwai-md-section-shell>p{max-width:840px;margin-bottom:11px!important;line-height:1.42!important} /* Genuine H3 content gets a restrained grid. */ .afiwai-md-card-grid{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px;background:transparent!important;border:0!important} .afiwai-md-card{min-height:0!important;padding:28px!important;border:1px solid rgba(108,154,199,.12)!important;border-radius:16px!important;background:linear-gradient(180deg,#0b1725,#08111c)!important;box-shadow:none!important;transform:none!important} .afiwai-md-card:before{content:"";display:block;width:30px;height:3px;margin-bottom:22px;background:var(--af-blue)} .afiwai-md-card:after{display:none!important}.afiwai-md-card h3{margin:0 0 13px!important;font-size:clamp(21px,1.55vw,28px)!important}.afiwai-md-card h3:before{display:none!important} .afiwai-md-card p,.afiwai-md-card li{font-size:15px!important;line-height:1.38!important} /* WordPress: intentional compact blue composition, no empty 70vh */ .afiwai-md-section.is-feature{min-height:0!important;background:linear-gradient(120deg,#1088f5,#14a1ff)!important} .afiwai-md-section.is-feature h2,.afiwai-md-section.is-feature p,.afiwai-md-section.is-feature li,.afiwai-md-section.is-feature strong{color:#06101b!important} .afiwai-md-section.is-feature h2:after{background:#06101b} .afiwai-md-section.is-feature .afiwai-md-card{background:rgba(255,255,255,.13)!important;border-color:rgba(6,16,27,.18)!important} /* Native visual: fills the right column instead of reserving a blank viewport */ .afiwai-md-wp-visual{grid-column:2;margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:stretch} .afiwai-md-wp-core{grid-column:2;grid-row:1/3;display:grid;place-items:center;min-height:190px;border-radius:18px;background:#06101b;color:#fff;font-weight:900;font-size:22px;letter-spacing:.08em} .afiwai-md-wp-node{display:flex;align-items:center;gap:10px;min-height:86px;padding:16px;border:1px solid rgba(6,16,27,.2);border-radius:14px;background:rgba(255,255,255,.12);color:#06101b;font-weight:800}.afiwai-md-wp-node b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(6,16,27,.25);font:700 10px/1 monospace} /* Conversion */ .afiwai-md-conversion{grid-column:2;margin-top:30px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.afiwai-md-conversion span{position:relative;padding:18px 10px;border-top:1px solid rgba(21,152,255,.3);font:750 11px/1.25 ui-monospace,monospace;color:#b7c6d7;text-transform:uppercase}.afiwai-md-conversion span:before{content:attr(data-n);display:block;margin-bottom:12px;color:var(--af-blue);font-size:10px} /* Pricing / FAQ / links */ .afiwai-md-section.is-pricing .afiwai-md-card strong{color:#41adff!important;font-size:clamp(28px,3vw,50px)} .afiwai-md-faq .afiwai-md-card-grid{grid-template-columns:1fr}.afiwai-md-faq .afiwai-md-card{padding:20px 24px!important;background:#09131f!important}.afiwai-md-faq .afiwai-md-card h3{margin:0!important} .afiwai-md-link{display:inline-flex!important;align-items:center;gap:12px;margin:8px 7px 4px 0;padding:12px 20px!important;border:1px solid rgba(21,152,255,.55)!important;border-radius:9px!important;background:#0c7ee5!important;color:#fff!important;text-decoration:none!important;font-weight:750!important}.afiwai-md-link:after{content:"↗"}.afiwai-md-link:hover{background:#1598ff!important;color:#fff!important} /* No accidental huge vertical whitespace from source builders */ .afiwai-md-root .et_pb_section,.afiwai-md-root .et_pb_row,.afiwai-md-root .et_pb_column,.afiwai-md-root .et_pb_module{min-height:0!important} .afiwai-md-root .et_pb_row{height:auto!important} .afiwai-md-root p:empty,.afiwai-md-root br+br{display:none!important} .afiwai-md-reveal{opacity:0;transform:translateY(16px);transition:.55s ease}.afiwai-md-reveal.is-visible{opacity:1;transform:none} @media(max-width:1050px){.afiwai-md-section-shell{grid-template-columns:1fr;gap:25px}.afiwai-md-section-shell>h2,.afiwai-md-section-shell>h2~*,.afiwai-md-card-grid,.afiwai-md-wp-visual,.afiwai-md-conversion{grid-column:1}.afiwai-md-hero-inner{width:88vw}} @media(max-width:700px){.afiwai-md-hero{min-height:0;padding:115px 18px 75px}.afiwai-md-hero h1{font-size:clamp(48px,15vw,74px)!important}.afiwai-md-section{padding:72px 18px!important}.afiwai-md-section:before{left:18px;top:35px}.afiwai-md-section:after{left:18px;right:18px}.afiwai-md-card-grid{grid-template-columns:1fr}.afiwai-md-conversion{grid-template-columns:1fr}.afiwai-md-wp-visual{grid-template-columns:1fr}.afiwai-md-wp-core{grid-column:1;grid-row:auto;min-height:120px}} @media(prefers-reduced-motion:reduce){.afiwai-md-reveal{opacity:1!important;transform:none!important;transition:none!important}} /* v7.0.1 — compact AFIWAI typography */ .afiwai-md-root h1{line-height:.86!important} .afiwai-md-root h2{line-height:.94!important} .afiwai-md-root h3{line-height:1.05!important} .afiwai-md-root h4{line-height:1.1!important} .afiwai-md-root p{padding-bottom:0!important} .afiwai-md-root li{margin-bottom:.22em!important} .afiwai-md-root .et_pb_text_inner, .afiwai-md-root .et_pb_text_inner p, .afiwai-md-root .et_pb_module p{line-height:1.42!important} .afiwai-md-root .et_pb_text_inner p:not(:last-child), .afiwai-md-root .et_pb_module p:not(:last-child){margin-bottom:11px!important} /* v7.0.2 — SAFE rollback patch. No DOM restructuring. Only neutralizes excessive grid row stretching. */ .afiwai-md-section-shell{ align-items:start!important; grid-auto-rows:min-content!important; } .afiwai-md-section-shell>*{ min-height:0!important; height:auto!important; } .afiwai-md-section-shell>h2{ align-self:start!important; height:auto!important; min-height:0!important; } .afiwai-md-section-shell>p, .afiwai-md-section-shell>ul, .afiwai-md-section-shell>ol, .afiwai-md-section-shell>.afiwai-md-card-grid, .afiwai-md-section-shell>.afiwai-md-conversion, .afiwai-md-section-shell>.afiwai-md-wp-visual{ align-self:start!important; min-height:0!important; height:auto!important; } /* ========================================================= v7.0.3 — DESKTOP ONLY spacing fix Mobile/tablet behavior is intentionally untouched. The previous desktop CSS grid shared row heights between the large H2 and right-column paragraphs, creating huge vertical holes. Desktop now uses a floated title column plus a normal document flow for the content column. ========================================================= */ @media (min-width:1051px){ .afiwai-md-section-shell{ display:flow-root!important; min-height:0!important; height:auto!important; } .afiwai-md-section-shell>h2{ float:left!important; width:35%!important; max-width:520px!important; box-sizing:border-box!important; margin:0 8% 0 0!important; padding-top:28px!important; min-height:0!important; height:auto!important; } .afiwai-md-section-shell>h2~*{ display:block; width:57%!important; max-width:none!important; box-sizing:border-box!important; margin-left:43%!important; min-height:0!important; height:auto!important; grid-column:auto!important; grid-row:auto!important; } .afiwai-md-section-shell>p:first-of-type{ margin-top:28px!important; margin-bottom:10px!important; } .afiwai-md-section-shell>p:not(:first-of-type){ margin-top:0!important; margin-bottom:10px!important; } .afiwai-md-section-shell>ul, .afiwai-md-section-shell>ol{ margin-top:6px!important; margin-bottom:12px!important; } .afiwai-md-section-shell>.afiwai-md-card-grid{ display:grid!important; margin-top:20px!important; margin-bottom:0!important; } .afiwai-md-section-shell>.afiwai-md-conversion, .afiwai-md-section-shell>.afiwai-md-wp-visual{ display:grid!important; margin-top:20px!important; margin-bottom:0!important; } /* Prevent Divi/source wrappers from injecting desktop-only vertical gaps. */ .afiwai-md-section-shell>div:not(.afiwai-md-card-grid):not(.afiwai-md-conversion):not(.afiwai-md-wp-visual){ margin-top:0!important; margin-bottom:10px!important; min-height:0!important; height:auto!important; } } /* ========================================================= AFIWAI MEDIA 8.3.1 — frame controls shape, one image only ========================================================= */ .afiwai-media,.afiwai-media-grid{ width:57%!important; margin:24px 0 10px 43%!important; } .afiwai-media{ position:relative; overflow:hidden; border-radius:18px; border:1px solid rgba(87,153,214,.16); background:#07101a; box-shadow:0 18px 48px rgba(0,0,0,.22); } .afiwai-media>img,.afiwai-media-card>img{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; } /* Shapes are defined by the page template — one curated frame per section */ .afiwai-media--types{ aspect-ratio:16/10; margin-top:30px; border-radius:20px; } .afiwai-media--wordpress{ aspect-ratio:4/3; width:min(100%,680px)!important; margin-top:30px; border-radius:20px; } .afiwai-media--partner{ aspect-ratio:3/2; margin-top:30px; border-radius:22px; } .afiwai-media--europe{ aspect-ratio:21/9; margin-top:30px; border-radius:20px; } .afiwai-media--portfolio{ aspect-ratio:16/9; margin-top:30px; border-radius:18px; } /* Hero shape in final template */ .afiwai-media--hero{ position:absolute!important; z-index:2; right:max(3vw,calc((100vw - 1500px)/2)); top:15%; width:min(42vw,680px)!important; margin:0!important; aspect-ratio:16/10; border-radius:24px; } .afiwai-md-hero.has-afiwai-media .afiwai-md-hero-inner{ position:relative; z-index:3; width:min(760px,52vw); } /* Placeholder and final image occupy EXACTLY the same frame. */ .afiwai-media.is-placeholder{ background: radial-gradient(circle at 18% 22%,rgba(35,136,255,.24),transparent 32%), radial-gradient(circle at 82% 76%,rgba(123,97,255,.18),transparent 36%), linear-gradient(135deg,#081321 0%,#0d1b2d 52%,#08111e 100%); } .afiwai-media.is-placeholder::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg,transparent 49.7%,rgba(255,255,255,.055) 50%,transparent 50.3%), linear-gradient(0deg,transparent 49.7%,rgba(255,255,255,.045) 50%,transparent 50.3%); background-size:48px 48px; pointer-events:none; } /* Same attachment at every breakpoint; only the template frame changes. */ @media(max-width:1050px){ .afiwai-media{ width:100%!important; margin:20px 0 0!important; } .afiwai-media--hero{ position:relative!important; right:auto!important; top:auto!important; width:100%!important; margin:24px 0 0!important; aspect-ratio:16/10; } .afiwai-md-hero.has-afiwai-media .afiwai-md-hero-inner{width:100%} .afiwai-media--europe{aspect-ratio:16/9} } @media(max-width:700px){ .afiwai-media--hero{aspect-ratio:4/3} .afiwai-media--types{aspect-ratio:4/3} .afiwai-media--wordpress{aspect-ratio:4/3} .afiwai-media--partner{aspect-ratio:4/3} .afiwai-media--europe{aspect-ratio:16/10} .afiwai-media--portfolio{aspect-ratio:4/3} } /* AFIWAI front media editor — loaded only as behavior for authorized users via JS classes */ .afiwai-media.afiwai-media-editable, .afiwai-media-card.afiwai-media-editable{ position:relative; cursor:pointer; outline:none; } .afiwai-media.afiwai-media-editable::after, .afiwai-media-card.afiwai-media-editable::after{ content:""; position:absolute; inset:0; z-index:5; border:2px solid transparent; border-radius:inherit; pointer-events:none; transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease; } .afiwai-media.afiwai-media-editable:hover::after, .afiwai-media.afiwai-media-editable:focus-visible::after, .afiwai-media-card.afiwai-media-editable:hover::after, .afiwai-media-card.afiwai-media-editable:focus-visible::after{ border-color:rgba(35,136,255,.95); box-shadow:inset 0 0 0 3px rgba(35,136,255,.16),0 0 0 4px rgba(35,136,255,.12); } .afiwai-media.afiwai-media-editable.is-saving::after, .afiwai-media-card.afiwai-media-editable.is-saving::after{ border-color:rgba(35,136,255,.95); background:rgba(7,11,20,.18); } .afiwai-media.afiwai-media-editable img, .afiwai-media-card.afiwai-media-editable img{ pointer-events:none; user-select:none; } /* ========================================================= AFIWAI Modern Design 8.3 — Front illustration editor The template owns the shape. Admin chooses in-place and commits all pending illustration changes from admin bar. ========================================================= */ .afiwai-media.afiwai-media-editable, .afiwai-media-card.afiwai-media-editable{ cursor:pointer!important; } .afiwai-media.afiwai-media-editable.has-pending-change::after, .afiwai-media-card.afiwai-media-editable.has-pending-change::after{ border-color:#23a7ff!important; box-shadow:inset 0 0 0 3px rgba(35,167,255,.18),0 0 0 4px rgba(35,167,255,.14)!important; } .afiwai-media.afiwai-media-editable.is-placeholder::before, .afiwai-media-card.afiwai-media-editable.is-placeholder::before{ content:"Choisir une illustration"; position:absolute; z-index:6; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; min-width:180px; max-width:calc(100% - 32px); padding:12px 18px; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:rgba(5,9,17,.82); color:#fff; font:700 12px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:.02em; text-align:center; pointer-events:none; backdrop-filter:blur(8px); } #wpadminbar #wp-admin-bar-afiwai-md-save-media>.ab-item{ display:flex!important; align-items:center; gap:6px; background:#0064C0!important; color:#fff!important; font-weight:700!important; } #wpadminbar #wp-admin-bar-afiwai-md-save-media>.ab-item .ab-icon:before{ color:#fff!important; } #wpadminbar #wp-admin-bar-afiwai-md-save-media.is-clean>.ab-item{ opacity:.82; } #wpadminbar #wp-admin-bar-afiwai-md-save-media.is-dirty>.ab-item{ opacity:1; box-shadow:inset 0 -3px 0 #fff; } #wpadminbar #wp-admin-bar-afiwai-md-save-media.is-saving>.ab-item{ opacity:.7; } #wpadminbar #wp-admin-bar-afiwai-md-save-media.is-saved>.ab-item{ background:#0b8b55!important; } #wpadminbar #wp-admin-bar-afiwai-md-save-media.is-error>.ab-item{ background:#b32d2e!important; } /* ========================================================= AFIWAI Modern Design 8.4 — Builder mode in WP admin bar ========================================================= */ #wpadminbar #wp-admin-bar-afiwai-md-builder-mode>.ab-item{ display:flex!important; align-items:center; gap:6px; background:#0064C0!important; color:#fff!important; font-weight:700!important; } #wpadminbar #wp-admin-bar-afiwai-md-builder-mode>.ab-item .ab-icon:before{ color:#fff!important; } #wpadminbar #wp-admin-bar-afiwai-md-builder-mode.is-on>.ab-item{ background:#0b8b55!important; box-shadow:inset 0 -3px 0 #fff; } #wpadminbar #wp-admin-bar-afiwai-md-save-media.is-hidden{ display:none!important; } body:not(.afiwai-md-builder-active) .afiwai-media, body:not(.afiwai-md-builder-active) .afiwai-media-card{ cursor:default!important; } body.afiwai-md-builder-active .afiwai-media.afiwai-media-editable, body.afiwai-md-builder-active .afiwai-media-card.afiwai-media-editable{ cursor:pointer!important; } /* ========================================================== AFIWAI MODERN DESIGN 8.9.0 — SAFE HI-TECH BACKGROUNDS CSS-only ambient layer: no DOM nodes, no layout geometry, no media slots, no pointer interception. ========================================================== */ /* Hero: deep digital grid + luminous data corridor. */ .afiwai-md-hero{ background-color:#050b13!important; background-image: radial-gradient(circle at 78% 26%,rgba(0,136,255,.20) 0,rgba(0,136,255,.08) 18%,transparent 42%), linear-gradient(115deg,transparent 0 54%,rgba(0,100,192,.10) 54.2% 54.6%,transparent 54.8% 100%), repeating-linear-gradient(90deg,rgba(108,190,255,.055) 0 1px,transparent 1px 72px), repeating-linear-gradient(0deg,rgba(108,190,255,.035) 0 1px,transparent 1px 72px), linear-gradient(120deg,#050b13 0%,#071625 52%,#03070d 100%)!important; background-size:auto,auto,72px 72px,72px 72px,auto!important; background-position:center!important; } /* Standard sections: electronic blueprint texture, always behind content. */ .afiwai-md-section{ background-color:#07101a!important; background-image: radial-gradient(circle at 88% 16%,rgba(0,100,192,.12),transparent 30%), repeating-linear-gradient(90deg,rgba(100,184,255,.028) 0 1px,transparent 1px 56px), repeating-linear-gradient(0deg,rgba(100,184,255,.021) 0 1px,transparent 1px 56px), linear-gradient(135deg,transparent 0 74%,rgba(0,100,192,.055) 74.2% 74.55%,transparent 74.8% 100%), linear-gradient(180deg,#07101a,#06101a)!important; background-size:auto,56px 56px,56px 56px,auto,auto!important; } .afiwai-md-section:nth-child(even){ background-color:#050a12!important; background-image: radial-gradient(circle at 12% 78%,rgba(0,100,192,.13),transparent 28%), repeating-linear-gradient(90deg,rgba(91,177,255,.024) 0 1px,transparent 1px 64px), repeating-linear-gradient(0deg,rgba(91,177,255,.018) 0 1px,transparent 1px 64px), linear-gradient(45deg,transparent 0 80%,rgba(0,100,192,.045) 80.2% 80.6%,transparent 80.8% 100%), linear-gradient(180deg,#050a12,#06101a)!important; background-size:auto,64px 64px,64px 64px,auto,auto!important; } /* WordPress feature section: bright circuit-board surface. */ .afiwai-md-section.is-feature{ background-color:#1598ff!important; background-image: radial-gradient(circle at 84% 22%,rgba(255,255,255,.26),transparent 26%), repeating-linear-gradient(90deg,rgba(5,40,70,.09) 0 1px,transparent 1px 48px), repeating-linear-gradient(0deg,rgba(5,40,70,.07) 0 1px,transparent 1px 48px), linear-gradient(125deg,transparent 0 62%,rgba(5,40,70,.11) 62.2% 62.5%,transparent 62.8% 100%), linear-gradient(120deg,#1088f5,#14a1ff)!important; background-size:auto,48px 48px,48px 48px,auto,auto!important; } /* Cards: subtle terminal-panel feel without adding pseudo-elements. */ .afiwai-md-card{ background-image: linear-gradient(90deg,rgba(21,152,255,.055) 1px,transparent 1px), linear-gradient(0deg,rgba(21,152,255,.035) 1px,transparent 1px), linear-gradient(180deg,#0b1725,#08111c)!important; background-size:28px 28px,28px 28px,auto!important; } /* Pricing / FAQ remain readable but get a denser systems feel. */ .afiwai-md-section.is-pricing, .afiwai-md-section.afiwai-md-faq{ background-image: radial-gradient(circle at 82% 20%,rgba(0,100,192,.15),transparent 32%), repeating-linear-gradient(90deg,rgba(87,170,255,.03) 0 1px,transparent 1px 44px), repeating-linear-gradient(0deg,rgba(87,170,255,.022) 0 1px,transparent 1px 44px), linear-gradient(180deg,#06111c,#040910)!important; } /* Mobile: keep the premium tech identity, reduce density and visual noise. */ @media(max-width:700px){ .afiwai-md-hero{ background-image: radial-gradient(circle at 88% 16%,rgba(0,136,255,.15),transparent 36%), repeating-linear-gradient(90deg,rgba(108,190,255,.035) 0 1px,transparent 1px 48px), repeating-linear-gradient(0deg,rgba(108,190,255,.026) 0 1px,transparent 1px 48px), linear-gradient(180deg,#050b13,#071421)!important; background-size:auto,48px 48px,48px 48px,auto!important; } .afiwai-md-section, .afiwai-md-section:nth-child(even){ background-image: radial-gradient(circle at 90% 10%,rgba(0,100,192,.08),transparent 28%), repeating-linear-gradient(90deg,rgba(91,177,255,.018) 0 1px,transparent 1px 48px), repeating-linear-gradient(0deg,rgba(91,177,255,.014) 0 1px,transparent 1px 48px), linear-gradient(180deg,#06101a,#050b12)!important; background-size:auto,48px 48px,48px 48px,auto!important; } } /* ========================================================== AFIWAI MODERN DESIGN 9.0.0 — DEEP SYSTEM RESIDUALS Pure CSS decorative telemetry. No DOM mutation, no slots, no pointer capture, no SEO text nodes. ========================================================== */ /* Keep all telemetry layers out of the document flow. */ .afiwai-md-hero, .afiwai-md-section{isolation:isolate} .afiwai-md-hero-inner, .afiwai-md-section-shell{position:relative;z-index:2} .afiwai-md-hero-inner:before, .afiwai-md-hero-inner:after, .afiwai-md-section-shell:before, .afiwai-md-section-shell:after{ pointer-events:none!important; user-select:none!important; position:absolute; z-index:-1; box-sizing:border-box; } /* HERO — system monitor graph / oscilloscope trace. */ .afiwai-md-hero:before{ content:""; position:absolute; z-index:1; right:5vw; bottom:9%; width:min(43vw,680px); height:min(25vw,330px); pointer-events:none; opacity:.72; border:1px solid rgba(67,176,255,.14); border-radius:18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 300'%3E%3Cg fill='none' stroke='%231598ff' stroke-width='2'%3E%3Cpath opacity='.22' d='M0 245H700M0 185H700M0 125H700M0 65H700M70 0V300M140 0V300M210 0V300M280 0V300M350 0V300M420 0V300M490 0V300M560 0V300M630 0V300'/%3E%3Cpath opacity='.82' d='M0 228 L42 220 L73 226 L105 190 L130 202 L168 155 L195 166 L228 104 L256 126 L290 119 L320 77 L350 95 L384 52 L418 91 L452 78 L485 132 L520 108 L553 152 L590 138 L622 191 L659 172 L700 185'/%3E%3Cpath opacity='.34' d='M0 260 C85 220 120 275 188 230 S322 240 395 195 S550 215 700 118'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg,rgba(6,20,34,.58),rgba(3,10,18,.12)); background-size:100% 100%,auto; box-shadow:0 0 50px rgba(0,100,192,.08),inset 0 0 35px rgba(0,100,192,.04); mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 100%); } /* HERO — residual source code, deliberately fragmented like a developer screen. */ .afiwai-md-hero-inner:after{ content:"01 kernel.boot();\A02 const node = await edge.connect();\A03 render(scene, { mode: 'adaptive' });\A04 packet.route('/eu-west/afi');\A05 if (signal > 0.92) deploy();\A06 // residual stream 0xAF19C0"; white-space:pre; right:-31vw; top:-64px; width:360px; padding:16px 18px; color:rgba(126,205,255,.44); border-left:1px solid rgba(21,152,255,.28); background:linear-gradient(90deg,rgba(4,14,24,.42),transparent); font:600 10px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.02em; text-align:left; transform:rotate(-1.2deg); text-shadow:0 0 12px rgba(21,152,255,.12); } /* HERO — tiny telemetry labels over the monitoring graph. */ .afiwai-md-hero-inner:before{ content:"SYS.MONITOR // LIVE\A CPU 41% NET 2.4Gb/s\A RTT 08ms NODE AF-07"; white-space:pre; right:-30vw; bottom:-145px; color:rgba(161,218,255,.58); font:700 9px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.09em; text-align:right; } /* Selected sections get different technical residues, never every section. */ .afiwai-md-section[data-index="02"] .afiwai-md-section-shell:after{ content:"// build pipeline\Awebpack.runtime → wp.render\Acomponent.map(section)\Aviewport.sync(true)\Astatus: COMPILED"; white-space:pre; right:0; top:-42px; width:270px; padding:12px 14px; color:rgba(100,193,255,.28); border:1px solid rgba(21,152,255,.10); border-radius:10px; background:rgba(3,12,21,.20); font:600 9px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.03em; } .afiwai-md-section[data-index="03"] .afiwai-md-section-shell:before{ content:""; right:-1.5vw; top:48%; width:min(36vw,500px); height:150px; opacity:.42; background: radial-gradient(circle at 10% 58%,#1598ff 0 2px,transparent 3px), radial-gradient(circle at 29% 30%,#1598ff 0 2px,transparent 3px), radial-gradient(circle at 49% 62%,#1598ff 0 2px,transparent 3px), radial-gradient(circle at 71% 22%,#1598ff 0 2px,transparent 3px), radial-gradient(circle at 91% 55%,#1598ff 0 2px,transparent 3px), linear-gradient(158deg,transparent 0 20%,rgba(21,152,255,.45) 20.2% 20.6%,transparent 20.8% 100%), linear-gradient(18deg,transparent 0 48%,rgba(21,152,255,.31) 48.2% 48.6%,transparent 48.8% 100%); filter:drop-shadow(0 0 8px rgba(21,152,255,.18)); } .afiwai-md-section[data-index="04"] .afiwai-md-section-shell:after{ content:"GET /api/site HTTP/2\Ahost: afiwai.pt\Ax-edge-node: eu-pt-01\Acache-control: max-age=0\A200 OK · 18.7ms\A────────────────────────\A▸ render.complete"; white-space:pre; right:0; bottom:-36px; width:255px; padding:14px 16px; color:rgba(142,211,255,.34); border-left:1px solid rgba(21,152,255,.20); background:linear-gradient(90deg,rgba(4,13,23,.36),transparent); font:600 9px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* Europe / network-style section: route trace + packet graph. */ .afiwai-md-section[data-index="05"] .afiwai-md-section-shell:before{ content:""; right:-1vw; top:-8px; width:min(41vw,560px); height:210px; opacity:.46; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 210'%3E%3Cg fill='none' stroke='%231598ff'%3E%3Cpath opacity='.18' stroke-width='1' d='M0 176H560M0 126H560M0 76H560M80 0V210M160 0V210M240 0V210M320 0V210M400 0V210M480 0V210'/%3E%3Cpath opacity='.68' stroke-width='2' d='M18 164 C78 158 96 97 148 110 S233 181 280 120 S378 49 420 89 S496 143 545 61'/%3E%3Ccircle cx='148' cy='110' r='4' fill='%231598ff'/%3E%3Ccircle cx='280' cy='120' r='4' fill='%231598ff'/%3E%3Ccircle cx='420' cy='89' r='4' fill='%231598ff'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:100% 100%; } .afiwai-md-section[data-index="05"] .afiwai-md-section-shell:after{ content:"TRACE.ROUTE\A01 PT-LIS 04ms\A02 FR-PAR 09ms\A03 EU-EDGE 12ms\A04 CDN 07ms\A packets: 4096 / loss: 0.00%"; white-space:pre; right:8px; top:155px; color:rgba(124,204,255,.40); font:700 9px/1.62 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.04em; } /* Portfolio-like lower section: compact performance chart / PC dashboard feel. */ .afiwai-md-section[data-index="06"] .afiwai-md-section-shell:before{ content:"FPS 120\A GPU 37%\A MEM 4.8GB\A TEMP 51°C"; white-space:pre; right:0; top:8px; width:170px; padding:13px 15px; color:rgba(153,216,255,.42); border:1px solid rgba(21,152,255,.11); border-radius:12px; background: repeating-linear-gradient(0deg,rgba(21,152,255,.04) 0 1px,transparent 1px 16px), rgba(4,13,23,.26); font:700 9px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.08em; } .afiwai-md-section[data-index="06"] .afiwai-md-section-shell:after{ content:""; right:16px; top:118px; width:260px; height:74px; opacity:.45; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 74'%3E%3Cpath fill='none' stroke='%231598ff' stroke-width='2' d='M0 58 L18 53 L35 55 L52 40 L69 44 L85 27 L102 35 L119 18 L136 26 L153 21 L170 35 L188 15 L205 23 L222 12 L240 20 L260 8'/%3E%3Cpath fill='none' stroke='%231598ff' stroke-opacity='.16' d='M0 70H260M0 50H260M0 30H260M0 10H260'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:100% 100%; } /* Feature section: dark computer-terminal residues adapted to bright blue surface. */ .afiwai-md-section.is-feature .afiwai-md-section-shell:after{ content:"$ wp core verify-checksums\A success: integrity verified\A$ php -v\A engine.ready = true\A// deployment channel: stable"; white-space:pre; right:0; top:-32px; padding:12px 14px; color:rgba(4,21,36,.42); border:1px solid rgba(4,21,36,.14); border-radius:10px; background:rgba(255,255,255,.10); font:700 9px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* Responsive guardrails: preserve content hierarchy and performance. */ @media(max-width:1100px){ .afiwai-md-hero:before{right:2vw;width:46vw;opacity:.52} .afiwai-md-hero-inner:after{right:-24vw;opacity:.7} .afiwai-md-hero-inner:before{right:-23vw} .afiwai-md-section[data-index="03"] .afiwai-md-section-shell:before, .afiwai-md-section[data-index="05"] .afiwai-md-section-shell:before{opacity:.28} } @media(max-width:820px){ .afiwai-md-hero:before{ width:72vw; height:210px; right:-18vw; bottom:4%; opacity:.32; } .afiwai-md-hero-inner:before, .afiwai-md-hero-inner:after, .afiwai-md-section-shell:before, .afiwai-md-section-shell:after{ opacity:.16!important; } } @media(max-width:700px){ .afiwai-md-hero-inner:before, .afiwai-md-hero-inner:after, .afiwai-md-section-shell:before, .afiwai-md-section-shell:after{ display:none!important; } .afiwai-md-hero:before{ display:block!important; width:92vw; height:150px; right:-38vw; bottom:2%; opacity:.18; } } @media(prefers-reduced-motion:reduce){ .afiwai-md-hero:before, .afiwai-md-hero-inner:before, .afiwai-md-hero-inner:after, .afiwai-md-section-shell:before, .afiwai-md-section-shell:after{animation:none!important} } /* ========================================================= AFIWAI MODERN DESIGN 9.1.0 — TITLE FIELD / CODE RESIDUES CSS-only decorative layer. No DOM injection, no SEO content. ========================================================= */ .afi-modern-design .afi-section, .afi-modern-design section{ position:relative; isolation:isolate; } .afi-modern-design .afi-section > *, .afi-modern-design section > *{ position:relative; z-index:2; } /* subtle technical field beneath title zones */ .afi-modern-design .afi-section::before, .afi-modern-design section::before{ content:""; position:absolute; left:clamp(18px,4vw,64px); right:clamp(18px,4vw,64px); top:clamp(40px,6vw,86px); height:clamp(92px,12vw,158px); z-index:0; pointer-events:none; opacity:.42; border-radius:28px; background: radial-gradient(circle at 10% 42%, rgba(0,100,192,.18) 0 2px, transparent 3px), radial-gradient(circle at 64% 22%, rgba(43,167,255,.14) 0 1px, transparent 2px), linear-gradient(90deg, rgba(0,100,192,.14) 1px, transparent 1px), linear-gradient(rgba(0,100,192,.10) 1px, transparent 1px), linear-gradient(135deg, rgba(0,100,192,.08), transparent 46%); background-size: 56px 56px, 38px 38px, 48px 48px, 48px 48px, auto; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 88%,transparent 100%); } /* terminal residue / AFIWAI easter eggs under selected headings */ .afi-modern-design h2::after, .afi-modern-design .afi-section-title::after{ content:"// AFIWAI::signal_sync() • node.status=ONLINE • build:afi-core • route://afiwai.pt"; display:block; margin-top:12px; max-width:min(100%,760px); overflow:hidden; white-space:nowrap; text-overflow:clip; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:clamp(9px,.72vw,11px); line-height:1.5; letter-spacing:.055em; color:rgba(65,175,255,.48); text-transform:none; font-weight:500; pointer-events:none; } /* denser data traces for alternating sections */ .afi-modern-design .afi-section:nth-of-type(2n)::after, .afi-modern-design section:nth-of-type(2n)::after{ content:"01 10 11 00 /afi/mesh/route 200 OK latency:12ms gpu.draw=stable hub.link=ready"; position:absolute; right:clamp(18px,4vw,64px); top:clamp(88px,9vw,132px); z-index:1; max-width:min(44vw,640px); overflow:hidden; white-space:nowrap; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:10px; letter-spacing:.08em; color:rgba(108,198,255,.34); pointer-events:none; transform:rotate(-1deg); } /* waveform-like accent directly below title areas */ .afi-modern-design h2, .afi-modern-design .afi-section-title{ position:relative; } .afi-modern-design h2::before, .afi-modern-design .afi-section-title::before{ content:""; position:absolute; left:0; bottom:-18px; width:min(360px,72vw); height:8px; opacity:.5; pointer-events:none; background: linear-gradient(90deg, rgba(0,100,192,.0) 0%, rgba(0,100,192,.6) 10%, rgba(98,202,255,.95) 18%, rgba(0,100,192,.28) 27%, rgba(98,202,255,.82) 35%, rgba(0,100,192,.18) 44%, rgba(98,202,255,.64) 53%, rgba(0,100,192,.16) 64%, rgba(98,202,255,.48) 76%, rgba(0,100,192,.0) 100%); clip-path:polygon( 0 55%, 7% 55%, 10% 18%, 13% 82%, 16% 48%, 24% 48%, 27% 8%, 30% 88%, 34% 42%, 43% 42%, 47% 20%, 51% 68%, 55% 48%, 64% 48%, 68% 16%, 72% 76%, 76% 50%, 100% 50%, 100% 60%, 76% 60%, 72% 86%, 68% 28%, 64% 58%, 55% 58%, 51% 78%, 47% 32%, 43% 52%, 34% 52%, 30% 98%, 27% 18%, 24% 58%, 16% 58%, 13% 92%, 10% 28%, 7% 65%, 0 65% ); } /* targeted hidden nods to the AFIWAI ecosystem */ .afi-modern-design .afi-hero::after{ content:" // manager.bus::ready // plugin.engine=v3 // afiwai.pt"; position:absolute; left:clamp(20px,4vw,68px); bottom:clamp(22px,4vw,48px); z-index:1; max-width:70%; overflow:hidden; white-space:nowrap; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:10px; letter-spacing:.07em; color:rgba(126,213,255,.35); pointer-events:none; } @media (max-width:900px){ .afi-modern-design .afi-section::before, .afi-modern-design section::before{ opacity:.28; height:104px; background-size:44px 44px,34px 34px,44px 44px,44px 44px,auto; } .afi-modern-design .afi-section:nth-of-type(2n)::after, .afi-modern-design section:nth-of-type(2n)::after{ opacity:.65; max-width:52vw; } } @media (max-width:700px){ .afi-modern-design .afi-section::before, .afi-modern-design section::before{ opacity:.16; left:12px; right:12px; top:42px; height:82px; } .afi-modern-design h2::after, .afi-modern-design .afi-section-title::after{ font-size:8px; opacity:.55; max-width:100%; } .afi-modern-design .afi-section:nth-of-type(2n)::after, .afi-modern-design section:nth-of-type(2n)::after, .afi-modern-design .afi-hero::after{ display:none!important; } .afi-modern-design h2::before, .afi-modern-design .afi-section-title::before{ width:min(250px,72vw); opacity:.35; } } /* ========================================================= AFIWAI MODERN DESIGN 10.0.0 PREMIUM Premium technical compositions — CSS only, layout-safe. The image/builder engine is intentionally untouched. ========================================================= */ .afi-modern-design{ --afi-tech:#18a9ff; --afi-tech-soft:rgba(24,169,255,.18); --afi-tech-line:rgba(78,190,255,.16); --afi-tech-text:rgba(143,215,255,.52); } /* Every section becomes its own isolated technical canvas. */ .afi-modern-design .afi-section, .afi-modern-design section{ position:relative; isolation:isolate; overflow:hidden; } /* Keep actual content above all decorative layers. */ .afi-modern-design .afi-section > *, .afi-modern-design section > *{ position:relative; z-index:2; } /* LEFT-SIDE PREMIUM TECH FIELD: specifically fills the empty title/content column seen in the reference. */ .afi-modern-design .afi-section::before, .afi-modern-design section::before{ content:""; position:absolute; z-index:0; pointer-events:none; left:max(22px,calc((100vw - 1500px)/2)); top:clamp(150px,20%,230px); width:min(39vw,610px); height:min(48vw,520px); border-radius:32px; opacity:.82; background: radial-gradient(circle at 18% 16%,rgba(27,171,255,.22) 0 2px,transparent 3px), radial-gradient(circle at 72% 31%,rgba(27,171,255,.15) 0 1px,transparent 2px), linear-gradient(90deg,rgba(42,155,225,.105) 1px,transparent 1px), linear-gradient(rgba(42,155,225,.085) 1px,transparent 1px), radial-gradient(ellipse at 38% 46%,rgba(0,100,192,.13),transparent 62%); background-size:54px 54px,37px 37px,48px 48px,48px 48px,auto; border:1px solid rgba(61,174,239,.07); box-shadow:inset 0 0 90px rgba(0,100,192,.035); -webkit-mask-image:linear-gradient(135deg,#000 0 68%,transparent 96%); mask-image:linear-gradient(135deg,#000 0 68%,transparent 96%); } /* Technical trace overlay, still confined to the left composition. */ .afi-modern-design .afi-section::after, .afi-modern-design section::after{ content: "AFIWAI://NODE_01 LINK=ONLINE RTT 12ms\A" "01 1010 011 /modern/design/render\A" "CPU 34% GPU 21% NET 1.8Gb/s\A" "> AFIWAI_HUB::keep_alive();\A" "> route afiwai.pt -> PT -> FR -> EU\A" "> if($future){ return 'AFIWAI'; }"; position:absolute; z-index:1; pointer-events:none; left:max(42px,calc((100vw - 1460px)/2)); top:clamp(270px,34%,365px); width:min(34vw,520px); min-height:190px; padding:22px 24px; box-sizing:border-box; white-space:pre; overflow:hidden; border-radius:22px; border:1px solid rgba(70,181,246,.14); border-left:2px solid rgba(30,170,255,.48); color:var(--afi-tech-text); font:500 clamp(9px,.7vw,11px)/1.75 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; letter-spacing:.045em; background: linear-gradient(180deg,rgba(3,18,32,.56),rgba(2,12,23,.18)), repeating-linear-gradient(0deg,transparent 0 23px,rgba(41,161,232,.045) 24px); box-shadow:0 22px 70px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.025); } /* Premium title telemetry — deliberately compact so it belongs to the title column. */ .afi-modern-design h2, .afi-modern-design .afi-section-title{ position:relative; } .afi-modern-design h2::after, .afi-modern-design .afi-section-title::after{ content:"// AFIWAI.PREMIUM :: render.pipeline=ACTIVE :: signal=STABLE"; display:block; width:min(100%,590px); margin-top:15px; overflow:hidden; white-space:nowrap; font:500 clamp(8px,.64vw,10px)/1.5 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; letter-spacing:.075em; color:rgba(91,197,255,.46); text-transform:none; pointer-events:none; } /* Oscilloscope / performance trace directly under headings. */ .afi-modern-design h2::before, .afi-modern-design .afi-section-title::before{ content:""; display:block; width:min(100%,520px); height:34px; margin-top:14px; opacity:.72; pointer-events:none; background: linear-gradient(90deg,rgba(24,169,255,.08) 1px,transparent 1px), linear-gradient(rgba(24,169,255,.06) 1px,transparent 1px); background-size:26px 17px; border-bottom:1px solid rgba(72,188,255,.12); clip-path:polygon( 0 72%,5% 72%,8% 58%,11% 80%,15% 65%,20% 65%,24% 18%,28% 76%, 32% 54%,38% 54%,42% 35%,46% 68%,51% 51%,57% 51%,61% 14%,65% 74%, 70% 43%,76% 43%,80% 28%,84% 62%,89% 48%,94% 48%,97% 34%,100% 41%, 100% 100%,0 100% ); box-shadow:inset 0 -2px 0 rgba(75,194,255,.5); } /* Alternate technical identities: each section feels designed, not repeated. */ .afi-modern-design .afi-section:nth-of-type(2n)::after, .afi-modern-design section:nth-of-type(2n)::after{ content: "AFIWAI.RUNTIME / WEB_CORE\A" "$ wp core verify-checksums [OK]\A" "$ render --viewport=fluid [OK]\A" "MEM 42% CACHE 96% FPS 60\A" "> manager.bus::ready();\A" "> /* crafted_by_AFIWAI */"; } .afi-modern-design .afi-section:nth-of-type(3n)::after, .afi-modern-design section:nth-of-type(3n)::after{ content: "TRACE.ROUTE / AFIWAI NETWORK\A" "PT 10ms ••••••••••••••••••\A" "FR 18ms ••••••••••••••\A" "EU 22ms ••••••••••••\A" "> secure.link=true;\A" "> AFIWAI::build_the_future();"; } /* Cards get subtle instrumentation, matching the reference right column. */ .afi-modern-design .afi-card, .afi-modern-design [class*="card"]{ position:relative; overflow:hidden; } .afi-modern-design .afi-card::after, .afi-modern-design [class*="card"]::after{ content:""; position:absolute; z-index:0; pointer-events:none; inset:auto 20px 16px 20px; height:18px; opacity:.32; background: linear-gradient(90deg,transparent,rgba(39,176,255,.72) 14%,transparent 15% 25%, rgba(39,176,255,.42) 26%,transparent 27% 43%,rgba(39,176,255,.65) 44%, transparent 45% 62%,rgba(39,176,255,.35) 63%,transparent 64%); clip-path:polygon(0 70%,8% 70%,12% 38%,17% 80%,22% 52%,32% 52%,37% 18%,42% 72%,48% 44%,58% 44%,64% 28%,70% 64%,78% 49%,88% 49%,94% 32%,100% 40%,100% 100%,0 100%); } /* Hero remains richer, but never overlays real content. */ .afi-modern-design .afi-hero::before{ content:""; position:absolute; pointer-events:none; z-index:0; inset:0; opacity:.58; background: radial-gradient(circle at 78% 22%,rgba(0,126,224,.18),transparent 28%), linear-gradient(90deg,rgba(40,157,225,.055) 1px,transparent 1px), linear-gradient(rgba(40,157,225,.045) 1px,transparent 1px); background-size:auto,56px 56px,56px 56px; } @media (max-width:1100px){ .afi-modern-design .afi-section::after, .afi-modern-design section::after{ width:min(38vw,430px); font-size:8px; opacity:.72; } } @media (max-width:780px){ .afi-modern-design .afi-section::before, .afi-modern-design section::before{ left:14px; right:14px; width:auto; top:125px; height:210px; opacity:.30; } .afi-modern-design .afi-section::after, .afi-modern-design section::after{ display:none!important; } .afi-modern-design h2::after, .afi-modern-design .afi-section-title::after{ font-size:7px; opacity:.58; } .afi-modern-design h2::before, .afi-modern-design .afi-section-title::before{ height:24px; opacity:.46; } } /* ========================================================= AFIWAI MODERN DESIGN 10.1.0 PREMIUM — REAL TECH TEMPLATE Approved reference translated into live HTML/CSS components. ========================================================= */ body.afiwai-modern-design-active{ --afi-p-blue:#009cff; --afi-p-cyan:#19c6ff; --afi-p-line:rgba(25,174,255,.22); --afi-p-panel:rgba(2,18,34,.76); --afi-p-grid:rgba(25,174,255,.055); } body.afiwai-modern-design-active .afiwai-md-root{ background: radial-gradient(circle at 16% 22%,rgba(0,117,214,.13),transparent 30%), radial-gradient(circle at 83% 38%,rgba(0,104,204,.11),transparent 31%), linear-gradient(90deg,var(--afi-p-grid) 1px,transparent 1px), linear-gradient(var(--afi-p-grid) 1px,transparent 1px), #03101d; background-size:auto,auto,56px 56px,56px 56px,auto; } body.afiwai-modern-design-active .afiwai-md-section{ position:relative; overflow:hidden; isolation:isolate; border-top:1px solid rgba(31,160,240,.09); } body.afiwai-modern-design-active .afiwai-md-section-shell{ position:relative; z-index:2; } /* Large sections become the requested editorial + systems-interface composition. */ @media(min-width:981px){ body.afiwai-modern-design-active .afiwai-md-section-shell{ display:grid; grid-template-columns:minmax(300px,.78fr) minmax(520px,1.22fr); column-gap:clamp(42px,5vw,92px); align-items:start; } body.afiwai-modern-design-active .afiwai-md-section-shell > h2{ grid-column:1; margin-bottom:20px!important; } body.afiwai-modern-design-active .afiwai-tech-deck{ grid-column:1; } body.afiwai-modern-design-active .afiwai-md-section-shell > .afiwai-md-card-grid{ grid-column:2; grid-row:1 / span 20; margin-top:18px; } body.afiwai-modern-design-active .afiwai-md-section-shell > :not(h2):not(.afiwai-tech-deck):not(.afiwai-md-card-grid):not(.afiwai-media){ grid-column:1; } body.afiwai-modern-design-active .afiwai-md-section-shell > .afiwai-media{ grid-column:1; } } /* Left technical deck: this is the formerly empty area highlighted by the user. */ body.afiwai-modern-design-active .afiwai-tech-deck{ position:relative; width:100%; min-height:clamp(390px,36vw,560px); margin:8px 0 30px; border:1px solid rgba(34,170,255,.14); border-radius:22px; overflow:hidden; background: radial-gradient(circle at 18% 14%,rgba(0,160,255,.15),transparent 24%), linear-gradient(90deg,rgba(30,160,230,.075) 1px,transparent 1px), linear-gradient(rgba(30,160,230,.06) 1px,transparent 1px), linear-gradient(145deg,rgba(2,22,40,.86),rgba(2,13,25,.54)); background-size:auto,34px 34px,34px 34px,auto; box-shadow:inset 0 0 70px rgba(0,117,214,.08),0 24px 70px rgba(0,0,0,.16); pointer-events:none; } body.afiwai-modern-design-active .afiwai-tech-deck:before{ content:""; position:absolute;inset:0; background: linear-gradient(125deg,transparent 0 19%,rgba(17,167,255,.15) 19.2% 19.45%,transparent 19.7% 52%,rgba(17,167,255,.1) 52.2% 52.4%,transparent 52.7%), radial-gradient(circle at 20% 19%,#1ab7ff 0 2px,transparent 3px), radial-gradient(circle at 68% 52%,#1ab7ff 0 2px,transparent 3px), radial-gradient(circle at 84% 29%,#1ab7ff 0 1px,transparent 2px); opacity:.7; } body.afiwai-modern-design-active .afiwai-tech-console{ position:absolute;left:5%;top:6%;width:45%;height:35%; border:1px solid rgba(22,169,255,.24);border-radius:12px; background:rgba(0,10,22,.54);box-shadow:0 0 30px rgba(0,126,255,.08); } body.afiwai-modern-design-active .afiwai-tech-console:before{ content:"// AFIWAI.CONSOLE v10.1\A> init_system();\A> loading.modules...\A> afiwai.core.loaded\A> plugin.engine=10.1\A> AFIWAI_HUB::keep_alive();\A// crafted_by_AFIWAI\A// afiwai.pt"; white-space:pre;position:absolute;inset:13px 15px; color:rgba(55,202,255,.72); font:500 clamp(7px,.57vw,10px)/1.62 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.025em; } body.afiwai-modern-design-active .afiwai-tech-monitor{ position:absolute;right:5%;top:8%;width:40%;height:29%; border:1px solid rgba(22,169,255,.2);border-radius:10px; background:rgba(1,15,28,.62); } body.afiwai-modern-design-active .afiwai-tech-monitor:before{ content:"SYSTEM MONITOR\A CPU 23%\A NET 48%\A RTT 12ms"; white-space:pre;position:absolute;left:12px;top:10px; color:rgba(48,196,255,.75); font:600 clamp(7px,.55vw,9px)/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } body.afiwai-modern-design-active .afiwai-tech-monitor b{ position:absolute;left:46%;right:7%;bottom:18%;height:44%; background:linear-gradient(90deg,transparent 0 4%,#14b7ff 4% 5%,transparent 5% 14%,#14b7ff 14% 16%,transparent 16% 25%,#14b7ff 25% 27%,transparent 27% 39%,#14b7ff 39% 40%,transparent 40% 53%,#14b7ff 53% 56%,transparent 56% 67%,#14b7ff 67% 69%,transparent 69% 82%,#14b7ff 82% 84%,transparent 84%); clip-path:polygon(0 66%,9% 57%,18% 70%,28% 33%,39% 48%,50% 25%,61% 55%,72% 38%,84% 58%,100% 18%,100% 25%,84% 66%,72% 47%,61% 64%,50% 34%,39% 57%,28% 42%,18% 79%,9% 66%,0 75%); filter:drop-shadow(0 0 4px #00a9ff); } body.afiwai-modern-design-active .afiwai-tech-trace{ position:absolute;left:5%;right:5%;top:47%;height:23%; border:1px solid rgba(22,169,255,.15);border-radius:10px; background:linear-gradient(90deg,rgba(20,160,230,.06) 1px,transparent 1px),linear-gradient(rgba(20,160,230,.05) 1px,transparent 1px); background-size:28px 28px; } body.afiwai-modern-design-active .afiwai-tech-trace:before{ content:"PING afiwai.pt 64 bytes ttl=54 time=12.3ms\A64 bytes from afiwai.pt: seq=1 time=11.8ms\A64 bytes from afiwai.pt: seq=2 time=12.1ms\A--- AFIWAI network stable / packet loss 0% ---"; white-space:pre;position:absolute;left:14px;top:12px; color:rgba(65,194,255,.52); font:500 clamp(6px,.48vw,8px)/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } body.afiwai-modern-design-active .afiwai-tech-trace span{ position:absolute;right:3%;bottom:13%;width:46%;height:52%; background:#0aaeff; clip-path:polygon(0 72%,8% 61%,15% 68%,22% 39%,29% 54%,36% 28%,44% 57%,51% 45%,59% 62%,66% 22%,73% 43%,81% 31%,89% 51%,100% 16%,100% 21%,89% 58%,81% 39%,73% 50%,66% 30%,59% 69%,51% 52%,44% 64%,36% 36%,29% 62%,22% 47%,15% 76%,8% 68%,0 80%); opacity:.68;filter:drop-shadow(0 0 5px #008cff); } body.afiwai-modern-design-active .afiwai-tech-metrics{ position:absolute;left:5%;right:5%;bottom:6%;display:grid;grid-template-columns:repeat(4,1fr);gap:8px; } body.afiwai-modern-design-active .afiwai-tech-metrics i{ min-height:58px;border:1px solid rgba(20,170,255,.2);border-radius:9px;background:rgba(1,18,34,.66);position:relative; } body.afiwai-modern-design-active .afiwai-tech-metrics i:before{ position:absolute;inset:9px;color:#20baff;text-align:center; font:600 clamp(7px,.55vw,9px)/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } body.afiwai-modern-design-active .afiwai-tech-metrics i:nth-child(1):before{content:"FPS\A144"} body.afiwai-modern-design-active .afiwai-tech-metrics i:nth-child(2):before{content:"GPU\A68%"} body.afiwai-modern-design-active .afiwai-tech-metrics i:nth-child(3):before{content:"MEM\A62%"} body.afiwai-modern-design-active .afiwai-tech-metrics i:nth-child(4):before{content:"TEMP\A54°C"} /* Network nodes vary the composition without adding images. */ body.afiwai-modern-design-active .afiwai-tech-nodes{position:absolute;inset:0} body.afiwai-modern-design-active .afiwai-tech-nodes i{position:absolute;width:5px;height:5px;border-radius:50%;background:#12b8ff;box-shadow:0 0 12px #008cff} body.afiwai-modern-design-active .afiwai-tech-nodes i:nth-child(1){left:8%;top:44%} body.afiwai-modern-design-active .afiwai-tech-nodes i:nth-child(2){left:32%;top:43%} body.afiwai-modern-design-active .afiwai-tech-nodes i:nth-child(3){left:56%;top:71%} body.afiwai-modern-design-active .afiwai-tech-nodes i:nth-child(4){left:78%;top:42%} body.afiwai-modern-design-active .afiwai-tech-nodes i:nth-child(5){left:92%;top:66%} body.afiwai-modern-design-active .afiwai-tech-nodes i:nth-child(6){left:47%;top:84%} /* Right-hand cards become real dashboard modules, as in the reference. */ body.afiwai-modern-design-active .afiwai-md-card{ position:relative;overflow:hidden; border:1px solid rgba(20,160,240,.28)!important; background:linear-gradient(145deg,rgba(3,25,45,.92),rgba(2,15,29,.86))!important; box-shadow:inset 0 1px rgba(255,255,255,.025),0 18px 50px rgba(0,0,0,.16); } body.afiwai-modern-design-active .afiwai-md-card:before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(22,170,255,.045) 1px,transparent 1px),linear-gradient(rgba(22,170,255,.035) 1px,transparent 1px); background-size:24px 24px; } body.afiwai-modern-design-active .afiwai-card-tech{ position:relative;height:82px;margin:16px 0 4px;border-top:1px solid rgba(24,170,255,.12);pointer-events:none; } body.afiwai-modern-design-active .afiwai-card-tech:before{ content:"// AFIWAI.module.ready\A> audit_system()\A> solution_personnalisee();"; white-space:pre;position:absolute;left:0;top:11px; color:rgba(39,195,255,.58);font:500 8px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } body.afiwai-modern-design-active .afiwai-card-tech span{ position:absolute;right:0;bottom:7px;width:42%;height:55px; background:repeating-linear-gradient(90deg,#087ed0 0 5px,transparent 5px 10px); clip-path:polygon(0 100%,0 68%,10% 68%,10% 44%,20% 44%,20% 76%,30% 76%,30% 28%,40% 28%,40% 56%,50% 56%,50% 20%,60% 20%,60% 48%,70% 48%,70% 12%,80% 12%,80% 61%,90% 61%,90% 34%,100% 34%,100% 100%); opacity:.66; } body.afiwai-modern-design-active .afiwai-card-tech[data-variant="2"] span{ background:#0daeff; clip-path:polygon(0 72%,12% 60%,22% 70%,33% 42%,44% 58%,55% 26%,67% 48%,78% 34%,89% 51%,100% 18%,100% 26%,89% 59%,78% 42%,67% 56%,55% 35%,44% 66%,33% 50%,22% 78%,12% 68%,0 81%); } body.afiwai-modern-design-active .afiwai-card-tech[data-variant="3"]:before{ content:"// AFIWAI.network\A> connect()\A> secure.link=true;"; } /* Hero gets the same live-system visual language without becoming an illustration. */ body.afiwai-modern-design-active .afiwai-md-hero{ background: radial-gradient(circle at 72% 18%,rgba(0,131,232,.16),transparent 26%), linear-gradient(90deg,rgba(26,157,230,.07) 1px,transparent 1px), linear-gradient(rgba(26,157,230,.055) 1px,transparent 1px), linear-gradient(135deg,#031323,#020b14)!important; background-size:auto,48px 48px,48px 48px,auto; } body.afiwai-modern-design-active .afiwai-md-hero:after{ content:"AFIWAI://BOOT\A core.signal=STABLE\A web.engine=READY\A security=ACTIVE\A route=afiwai.pt"; white-space:pre;position:absolute;right:5%;top:18%;width:260px;padding:18px 20px; border:1px solid rgba(22,169,255,.22);border-radius:14px;background:rgba(1,14,27,.58); color:rgba(56,198,255,.58);font:500 9px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; pointer-events:none; } @media(max-width:980px){ body.afiwai-modern-design-active .afiwai-tech-deck{min-height:430px} body.afiwai-modern-design-active .afiwai-md-card-grid{grid-template-columns:1fr 1fr} } @media(max-width:700px){ body.afiwai-modern-design-active .afiwai-tech-deck{min-height:340px;border-radius:16px} body.afiwai-modern-design-active .afiwai-tech-console{width:90%;height:36%} body.afiwai-modern-design-active .afiwai-tech-monitor{display:none} body.afiwai-modern-design-active .afiwai-tech-trace{top:46%;height:24%} body.afiwai-modern-design-active .afiwai-tech-trace:before{font-size:6px} body.afiwai-modern-design-active .afiwai-tech-trace span{opacity:.4} body.afiwai-modern-design-active .afiwai-tech-metrics i{min-height:46px} body.afiwai-modern-design-active .afiwai-md-card-grid{grid-template-columns:1fr} body.afiwai-modern-design-active .afiwai-md-hero:after{display:none} } @media(prefers-reduced-motion:reduce){ body.afiwai-modern-design-active .afiwai-tech-deck *, body.afiwai-modern-design-active .afiwai-card-tech *{animation:none!important} } /* ========================================================= AFIWAI MODERN DESIGN 10.2.0 — PREMIUM SYSTEM DEPTH Real template depth: oscilloscope, telemetry, rails, HUD. ========================================================= */ body.afiwai-modern-design-active .afiwai-tech-console{ color:rgba(80,210,255,.72); white-space:pre; padding:36px 15px 12px; font:500 clamp(7px,.57vw,10px)/1.62 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } body.afiwai-modern-design-active .afiwai-tech-console:before{ content:attr(data-label) " / AFIWAI SYSTEM"; inset:11px auto auto 14px; color:#20baff; font-weight:800; letter-spacing:.09em; } body.afiwai-modern-design-active .afiwai-tech-scope{ position:absolute;left:5%;right:5%;top:73%;height:11%; border-top:1px solid rgba(26,178,255,.16); border-bottom:1px solid rgba(26,178,255,.09); background: linear-gradient(90deg,rgba(25,180,255,.06) 1px,transparent 1px), linear-gradient(rgba(25,180,255,.045) 1px,transparent 1px); background-size:22px 22px; overflow:hidden; } body.afiwai-modern-design-active .afiwai-tech-scope:before{ content:"TELEMETRY / AFIWAI.SIGNAL / 144Hz"; position:absolute;left:8px;top:5px;color:rgba(60,198,255,.36); font:600 6px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em; } body.afiwai-modern-design-active .afiwai-tech-scope b{ position:absolute;left:0;right:0;bottom:5px;height:60%; background:#13b9ff; clip-path:polygon(0 70%,5% 68%,9% 72%,13% 40%,17% 61%,22% 53%,27% 18%,32% 67%,37% 57%,42% 64%,47% 30%,52% 51%,57% 44%,62% 12%,67% 62%,72% 55%,77% 66%,82% 38%,87% 58%,92% 47%,96% 20%,100% 42%,100% 47%,96% 27%,92% 55%,87% 65%,82% 46%,77% 74%,72% 62%,67% 69%,62% 20%,57% 52%,52% 59%,47% 38%,42% 72%,37% 65%,32% 74%,27% 26%,22% 61%,17% 69%,13% 48%,9% 80%,5% 76%,0 78%); opacity:.62;filter:drop-shadow(0 0 4px #009cff); } body.afiwai-modern-design-active .afiwai-tech-scope span{ position:absolute;width:4px;height:4px;border-radius:50%;background:#2bc5ff;box-shadow:0 0 9px #009cff; } body.afiwai-modern-design-active .afiwai-tech-scope span:nth-child(1){left:13%;top:51%} body.afiwai-modern-design-active .afiwai-tech-scope span:nth-child(2){left:27%;top:29%} body.afiwai-modern-design-active .afiwai-tech-scope span:nth-child(3){left:47%;top:42%} body.afiwai-modern-design-active .afiwai-tech-scope span:nth-child(4){left:62%;top:24%} body.afiwai-modern-design-active .afiwai-tech-scope span:nth-child(5){left:82%;top:45%} body.afiwai-modern-design-active .afiwai-tech-scope span:nth-child(6){left:96%;top:31%} body.afiwai-modern-design-active .afiwai-tech-rail{ position:absolute;right:2%;top:41%;height:27%;width:10px; display:flex;flex-direction:column;gap:5px;align-items:center; } body.afiwai-modern-design-active .afiwai-tech-rail:before{ content:"AFI";writing-mode:vertical-rl;color:rgba(48,194,255,.34); font:700 6px/1 ui-monospace,monospace;letter-spacing:.16em;margin-bottom:4px; } body.afiwai-modern-design-active .afiwai-tech-rail i{ display:block;width:4px;flex:1;max-height:24px;border-radius:6px; background:linear-gradient(#21c2ff,#075d9a);box-shadow:0 0 6px rgba(0,156,255,.4); } body.afiwai-modern-design-active .afiwai-tech-rail i:nth-child(2){opacity:.45} body.afiwai-modern-design-active .afiwai-tech-rail i:nth-child(3){opacity:.75} body.afiwai-modern-design-active .afiwai-tech-rail i:nth-child(4){opacity:.3} /* Different system identities subtly alter the live module instead of cloning it. */ body.afiwai-modern-design-active .afiwai-tech-deck[data-system="WP.RUNTIME"]{ background: radial-gradient(circle at 78% 22%,rgba(0,156,255,.17),transparent 25%), repeating-linear-gradient(90deg,rgba(24,170,255,.055) 0 1px,transparent 1px 34px), repeating-linear-gradient(rgba(24,170,255,.045) 0 1px,transparent 1px 34px), linear-gradient(145deg,rgba(2,22,40,.9),rgba(2,13,25,.56)); } body.afiwai-modern-design-active .afiwai-tech-deck[data-system="AFIWAI.MESH"]:after{ content:"PT ●────────● FR ────────● EU\A AFIWAI SECURE MESH / ONLINE"; white-space:pre;position:absolute;right:6%;top:39%;color:rgba(54,196,255,.48); font:600 7px/1.7 ui-monospace,monospace;letter-spacing:.08em; } body.afiwai-modern-design-active .afiwai-tech-deck[data-system="PERF.LAB"] .afiwai-tech-monitor:after{ content:"LCP 1.2s\A CLS .01\A INP 82ms"; white-space:pre;position:absolute;right:12px;top:10px;color:rgba(44,197,255,.62); font:600 7px/1.8 ui-monospace,monospace; } body.afiwai-modern-design-active .afiwai-tech-deck[data-system="SECURITY"]:after{ content:"SHA256 ✓ NONCE ✓ MIME ✓ ACL ✓"; position:absolute;right:6%;top:42%;color:rgba(62,207,255,.46); font:600 7px/1 ui-monospace,monospace;letter-spacing:.08em; } /* Micro HUD on cards: richer but still subordinate to real content. */ body.afiwai-modern-design-active .afiwai-md-card:hover{ transform:translateY(-3px); border-color:rgba(43,187,255,.48)!important; box-shadow:0 22px 60px rgba(0,0,0,.22),0 0 34px rgba(0,122,220,.08); } body.afiwai-modern-design-active .afiwai-card-tech:after{ content:"AFI/10.2 ● ONLINE"; position:absolute;right:0;top:9px;color:rgba(53,197,255,.38); font:700 6px/1 ui-monospace,monospace;letter-spacing:.09em; } @media(max-width:700px){ body.afiwai-modern-design-active .afiwai-tech-scope{top:72%;height:10%} body.afiwai-modern-design-active .afiwai-tech-console{padding-top:31px} body.afiwai-modern-design-active .afiwai-tech-rail{display:none} } /* ========================================================= AFIWAI MODERN DESIGN 10.3.0 PREMIUM LEFT-SIDE BACKGROUND DEPTH — SAFE / NO DOM CHANGE ========================================================= */ /* Richer atmospheric field behind the left editorial + tech column */ @media(min-width:981px){ body.afiwai-modern-design-active .afiwai-md-section{ --afi-left-glow:rgba(0,145,255,.16); --afi-left-line:rgba(38,177,255,.095); --afi-left-dot:rgba(67,201,255,.22); } body.afiwai-modern-design-active .afiwai-md-section:before{ content:""; position:absolute; left:0; top:0; bottom:0; width:min(49vw,760px); z-index:0; pointer-events:none; background: radial-gradient(circle at 18% 24%,rgba(0,156,255,.18) 0 1px,transparent 2px), radial-gradient(circle at 64% 62%,rgba(43,190,255,.13) 0 1px,transparent 2px), linear-gradient(90deg,rgba(26,170,245,.085) 1px,transparent 1px), linear-gradient(rgba(26,170,245,.065) 1px,transparent 1px), radial-gradient(ellipse at 34% 42%,rgba(0,108,214,.17),transparent 48%), linear-gradient(135deg,rgba(0,83,165,.08),transparent 56%); background-size: 31px 31px, 47px 47px, 42px 42px, 42px 42px, auto, auto; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 72%,transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 72%,transparent 100%); opacity:.88; } /* fine circuit traces crossing the empty spaces */ body.afiwai-modern-design-active .afiwai-md-section:after{ content:""; position:absolute; left:clamp(12px,2vw,34px); top:clamp(56px,7vw,110px); width:min(40vw,610px); height:min(34vw,470px); z-index:0; pointer-events:none; opacity:.72; background: linear-gradient(90deg,transparent 0 7%,rgba(25,184,255,.18) 7.2% 7.45%,transparent 7.7% 32%,rgba(25,184,255,.12) 32.2% 32.4%,transparent 32.7% 70%,rgba(25,184,255,.10) 70.2% 70.45%,transparent 70.8%), linear-gradient(0deg,transparent 0 18%,rgba(25,184,255,.14) 18.2% 18.45%,transparent 18.7% 48%,rgba(25,184,255,.11) 48.2% 48.45%,transparent 48.8% 82%,rgba(25,184,255,.09) 82.2% 82.45%,transparent 82.8%), radial-gradient(circle at 7% 18%,var(--afi-left-dot) 0 2px,transparent 3px), radial-gradient(circle at 32% 48%,var(--afi-left-dot) 0 2px,transparent 3px), radial-gradient(circle at 70% 82%,var(--afi-left-dot) 0 2px,transparent 3px), radial-gradient(circle at 88% 27%,var(--afi-left-dot) 0 2px,transparent 3px); filter:drop-shadow(0 0 8px rgba(0,142,255,.12)); } /* cinematic glow specifically behind the title/content side */ body.afiwai-modern-design-active .afiwai-md-section-shell{ background: radial-gradient(circle at 13% 22%,rgba(0,139,255,.10),transparent 24%), radial-gradient(circle at 30% 74%,rgba(0,86,176,.08),transparent 28%); border-radius:28px; } /* subtle vertical HUD ruler on far left */ body.afiwai-modern-design-active .afiwai-tech-deck{ box-shadow: inset 0 0 80px rgba(0,117,214,.10), 0 24px 70px rgba(0,0,0,.18), -20px 0 70px rgba(0,115,220,.08); } body.afiwai-modern-design-active .afiwai-tech-deck:after{ content:"AFIWAI / GRID 10.3\A001\A016\A032\A064\A128"; white-space:pre; position:absolute; left:10px; top:78px; color:rgba(67,201,255,.24); font:700 6px/2.25 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.08em; pointer-events:none; z-index:2; } /* title receives a discreet underglow rather than another box */ body.afiwai-modern-design-active .afiwai-md-section-shell > h2{ position:relative; text-shadow:0 0 22px rgba(0,145,255,.08); } body.afiwai-modern-design-active .afiwai-md-section-shell > h2:before{ content:""; position:absolute; left:-18px; right:22%; bottom:-14px; height:1px; background:linear-gradient(90deg,rgba(42,191,255,.65),rgba(42,191,255,.10),transparent); box-shadow:0 0 14px rgba(0,155,255,.22); pointer-events:none; } } /* Slight variation so every left-side background does not look cloned */ @media(min-width:981px){ body.afiwai-modern-design-active .afiwai-md-section:nth-of-type(2n):before{ background: radial-gradient(circle at 76% 24%,rgba(0,156,255,.16) 0 1px,transparent 2px), linear-gradient(90deg,rgba(26,170,245,.075) 1px,transparent 1px), linear-gradient(rgba(26,170,245,.052) 1px,transparent 1px), radial-gradient(ellipse at 28% 54%,rgba(0,108,214,.14),transparent 48%), linear-gradient(145deg,rgba(0,83,165,.07),transparent 56%); background-size:41px 41px,38px 38px,38px 38px,auto,auto; } body.afiwai-modern-design-active .afiwai-md-section:nth-of-type(3n):after{ transform:scaleX(-1); transform-origin:center; opacity:.56; } } /* Tablet/mobile: preserve atmosphere without overcrowding */ @media(max-width:980px){ body.afiwai-modern-design-active .afiwai-md-section:before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 18% 20%,rgba(0,145,255,.10),transparent 30%), linear-gradient(90deg,rgba(26,170,245,.045) 1px,transparent 1px), linear-gradient(rgba(26,170,245,.035) 1px,transparent 1px); background-size:auto,46px 46px,46px 46px; opacity:.55; } body.afiwai-modern-design-active .afiwai-md-section:after{display:none} } /* ========================================================= AFIWAI MODERN DESIGN 10.4.0 PREMIUM BACKGROUND SCREENS — LIVE HUD DISPLAYS ========================================================= */ body.afiwai-modern-design-active .afiwai-bg-screens{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.9; } body.afiwai-modern-design-active .afiwai-bg-screen{ position:absolute; border:1px solid rgba(28,169,255,.18); border-radius:12px; background: linear-gradient(180deg,rgba(1,18,34,.72),rgba(1,10,22,.48)), linear-gradient(90deg,rgba(22,173,255,.045) 1px,transparent 1px), linear-gradient(rgba(22,173,255,.035) 1px,transparent 1px); background-size:auto,18px 18px,18px 18px; box-shadow: inset 0 0 28px rgba(0,139,255,.05), 0 0 26px rgba(0,123,230,.06); backdrop-filter:blur(2px); color:rgba(65,198,255,.55); overflow:hidden; } body.afiwai-modern-design-active .afiwai-bg-screen:before{ content:attr(data-title); position:absolute; left:10px; top:8px; color:rgba(67,204,255,.64); font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.08em; } body.afiwai-modern-design-active .afiwai-bg-screen:after{ content:""; position:absolute; left:10px; right:10px; top:24px; height:1px; background:linear-gradient(90deg,rgba(30,183,255,.3),transparent); } body.afiwai-modern-design-active .afiwai-bg-screen--a{ left:clamp(18px,3vw,54px); top:clamp(34px,6vw,96px); width:clamp(180px,18vw,280px); height:clamp(110px,12vw,170px); transform:rotate(-1.4deg); opacity:.72; } body.afiwai-modern-design-active .afiwai-bg-screen--a span{ position:relative; display:block; margin-left:12px; top:38px; color:rgba(81,205,255,.52); font:600 7px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } body.afiwai-modern-design-active .afiwai-bg-screen--a b{ position:absolute; right:12px; bottom:12px; width:48%; height:42%; background:#11baff; clip-path:polygon( 0 78%, 10% 69%, 20% 74%, 30% 42%, 40% 59%, 50% 31%, 60% 61%, 70% 44%, 80% 52%, 90% 27%, 100% 38%, 100% 44%, 90% 34%, 80% 60%, 70% 52%, 60% 69%, 50% 39%, 40% 67%, 30% 50%, 20% 82%, 10% 77%, 0 86% ); opacity:.56; filter:drop-shadow(0 0 4px #009cff); } body.afiwai-modern-design-active .afiwai-bg-screen--b{ left:clamp(300px,29vw,520px); top:clamp(120px,16vw,230px); width:clamp(150px,15vw,230px); height:clamp(90px,10vw,140px); transform:rotate(1.2deg); opacity:.52; } body.afiwai-modern-design-active .afiwai-bg-screen--b span{ position:absolute; bottom:12px; width:7px; background:linear-gradient(#15beff,#0069a9); border-radius:4px 4px 0 0; box-shadow:0 0 6px rgba(0,154,255,.28); } body.afiwai-modern-design-active .afiwai-bg-screen--b span:nth-child(1){left:18%;height:28%} body.afiwai-modern-design-active .afiwai-bg-screen--b span:nth-child(2){left:31%;height:42%} body.afiwai-modern-design-active .afiwai-bg-screen--b span:nth-child(3){left:44%;height:58%} body.afiwai-modern-design-active .afiwai-bg-screen--b i{ position:absolute; right:10px; left:56%; bottom:14px; height:40%; background:#15bfff; clip-path:polygon(0 75%,14% 65%,28% 70%,42% 36%,57% 51%,72% 29%,86% 48%,100% 18%,100% 26%,86% 56%,72% 37%,57% 59%,42% 44%,28% 78%,14% 73%,0 84%); opacity:.48; } body.afiwai-modern-design-active .afiwai-bg-screen--c{ left:clamp(36px,6vw,110px); bottom:clamp(40px,7vw,100px); width:clamp(210px,22vw,340px); height:clamp(100px,11vw,155px); transform:rotate(.7deg); opacity:.48; } body.afiwai-modern-design-active .afiwai-bg-screen--c code{ position:absolute; left:12px; right:12px; top:35px; white-space:pre; color:rgba(52,196,255,.48); font:500 7px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* Give each section a slightly different screen choreography */ body.afiwai-modern-design-active .afiwai-bg-screens[data-variant="2"] .afiwai-bg-screen--a{ left:auto; right:51%; top:9%; transform:rotate(1.8deg); } body.afiwai-modern-design-active .afiwai-bg-screens[data-variant="2"] .afiwai-bg-screen--b{ left:5%; top:auto; bottom:16%; } body.afiwai-modern-design-active .afiwai-bg-screens[data-variant="2"] .afiwai-bg-screen--c{ left:30%; bottom:7%; } body.afiwai-modern-design-active .afiwai-bg-screens[data-variant="3"] .afiwai-bg-screen--a{ left:7%; top:16%; opacity:.58; } body.afiwai-modern-design-active .afiwai-bg-screens[data-variant="3"] .afiwai-bg-screen--b{ left:31%; top:6%; opacity:.45; } body.afiwai-modern-design-active .afiwai-bg-screens[data-variant="3"] .afiwai-bg-screen--c{ left:12%; bottom:9%; } /* Keep real content always above the screens */ body.afiwai-modern-design-active .afiwai-md-section-shell, body.afiwai-modern-design-active .afiwai-md-section > .afiwai-media{ position:relative; z-index:2; } /* Tablet: fewer, softer screens */ @media(max-width:980px){ body.afiwai-modern-design-active .afiwai-bg-screen--b{display:none} body.afiwai-modern-design-active .afiwai-bg-screen--a{ width:210px;height:125px;opacity:.36;left:18px;top:24px; } body.afiwai-modern-design-active .afiwai-bg-screen--c{ width:240px;height:110px;opacity:.28;left:auto;right:18px;bottom:30px; } } /* Mobile: preserve atmosphere without obstructing content */ @media(max-width:700px){ body.afiwai-modern-design-active .afiwai-bg-screen--a{ width:160px;height:92px;opacity:.18;left:8px;top:18px; } body.afiwai-modern-design-active .afiwai-bg-screen--c{display:none} } /* ========================================================= AFIWAI MODERN DESIGN 10.5.0 PREMIUM DARK FEATURE SECTIONS + REFINED BACKGROUND HUD SCREENS ========================================================= */ /* Critical correction: remove the legacy bright-blue WordPress/feature background. */ body.afiwai-modern-design-active .afiwai-md-section.is-feature{ background: radial-gradient(circle at 13% 24%,rgba(0,126,220,.13),transparent 27%), radial-gradient(circle at 38% 76%,rgba(0,84,170,.09),transparent 31%), linear-gradient(90deg,rgba(24,151,224,.045) 1px,transparent 1px), linear-gradient(rgba(24,151,224,.038) 1px,transparent 1px), linear-gradient(145deg,#06111d,#030912 70%)!important; background-size:auto,auto,48px 48px,48px 48px,auto!important; } body.afiwai-modern-design-active .afiwai-md-section.is-feature h2, body.afiwai-modern-design-active .afiwai-md-section.is-feature h3, body.afiwai-modern-design-active .afiwai-md-section.is-feature p, body.afiwai-modern-design-active .afiwai-md-section.is-feature li, body.afiwai-modern-design-active .afiwai-md-section.is-feature strong{ color:#f3f7fb!important; } body.afiwai-modern-design-active .afiwai-md-section.is-feature p, body.afiwai-modern-design-active .afiwai-md-section.is-feature li{ color:#9db0c3!important; } body.afiwai-modern-design-active .afiwai-md-section.is-feature h2:after{ background:linear-gradient(90deg,#15b7ff,transparent)!important; } /* WordPress composition: dark glass modules, no white-on-blue boxes. */ body.afiwai-modern-design-active .afiwai-md-section.is-feature .afiwai-md-wp-core{ background:linear-gradient(145deg,rgba(3,18,33,.96),rgba(2,11,21,.94))!important; color:#fff!important; border:1px solid rgba(35,174,255,.25)!important; box-shadow:inset 0 0 35px rgba(0,123,210,.07),0 18px 42px rgba(0,0,0,.22)!important; } body.afiwai-modern-design-active .afiwai-md-section.is-feature .afiwai-md-wp-node{ background:linear-gradient(145deg,rgba(5,25,43,.78),rgba(3,16,30,.74))!important; color:#eaf6ff!important; border-color:rgba(35,174,255,.20)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important; } body.afiwai-modern-design-active .afiwai-md-section.is-feature .afiwai-md-wp-node b{ color:#2fc2ff!important; border-color:rgba(47,194,255,.34)!important; background:rgba(0,118,202,.08)!important; } /* Background screens now resemble embedded dark HUD monitors rather than large blue rectangles. */ body.afiwai-modern-design-active .afiwai-bg-screens{ opacity:1; width:min(49vw,760px); right:auto; overflow:visible; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 76%,transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 76%,transparent 100%); } body.afiwai-modern-design-active .afiwai-bg-screen{ border:1px solid rgba(48,180,255,.16)!important; border-radius:9px!important; background: linear-gradient(180deg,rgba(3,18,31,.72),rgba(2,10,19,.58)), repeating-linear-gradient(0deg,rgba(64,194,255,.025) 0 1px,transparent 1px 5px), linear-gradient(90deg,rgba(38,174,255,.035) 1px,transparent 1px), linear-gradient(rgba(38,174,255,.028) 1px,transparent 1px)!important; background-size:auto,auto,18px 18px,18px 18px!important; box-shadow: inset 0 0 24px rgba(0,133,224,.04), 0 0 22px rgba(0,119,210,.035)!important; backdrop-filter:none!important; filter:saturate(.92); } body.afiwai-modern-design-active .afiwai-bg-screen:before{ color:rgba(64,197,255,.48)!important; font-size:6px!important; letter-spacing:.10em!important; } body.afiwai-modern-design-active .afiwai-bg-screen:after{ background:linear-gradient(90deg,rgba(42,185,255,.20),rgba(42,185,255,.04),transparent)!important; } /* Screen A: small monitor, top-left, almost part of the circuitry. */ body.afiwai-modern-design-active .afiwai-bg-screen--a{ left:4%!important; top:7%!important; width:clamp(150px,14vw,220px)!important; height:clamp(88px,8.5vw,126px)!important; transform:rotate(-1deg)!important; opacity:.45!important; } body.afiwai-modern-design-active .afiwai-bg-screen--a span{ top:31px!important; margin-left:10px!important; font-size:6px!important; line-height:1.55!important; color:rgba(75,201,255,.42)!important; } body.afiwai-modern-design-active .afiwai-bg-screen--a b{ opacity:.42!important; right:8px!important; bottom:9px!important; width:46%!important; height:38%!important; } /* Screen B: narrow telemetry window, higher and farther back. */ body.afiwai-modern-design-active .afiwai-bg-screen--b{ left:31%!important; top:13%!important; width:clamp(130px,12vw,190px)!important; height:clamp(76px,7.2vw,108px)!important; transform:rotate(.6deg)!important; opacity:.31!important; } body.afiwai-modern-design-active .afiwai-bg-screen--b span{ width:4px!important; opacity:.62!important; } /* Screen C: console fragment tucked lower-left like the reference image. */ body.afiwai-modern-design-active .afiwai-bg-screen--c{ left:7%!important; right:auto!important; bottom:10%!important; width:clamp(175px,17vw,260px)!important; height:clamp(82px,8.5vw,122px)!important; transform:rotate(.4deg)!important; opacity:.34!important; } body.afiwai-modern-design-active .afiwai-bg-screen--c code{ top:30px!important; font-size:6px!important; line-height:1.48!important; color:rgba(63,196,255,.37)!important; } /* Ignore old choreography that pushed screens toward the center/right. */ body.afiwai-modern-design-active .afiwai-bg-screens[data-variant="2"] .afiwai-bg-screen--a, body.afiwai-modern-design-active .afiwai-bg-screens[data-variant="3"] .afiwai-bg-screen--a{ left:5%!important; right:auto!important; top:9%!important; } body.afiwai-modern-design-active .afiwai-bg-screens[data-variant="2"] .afiwai-bg-screen--b, body.afiwai-modern-design-active .afiwai-bg-screens[data-variant="3"] .afiwai-bg-screen--b{ left:30%!important; right:auto!important; top:15%!important; bottom:auto!important; } body.afiwai-modern-design-active .afiwai-bg-screens[data-variant="2"] .afiwai-bg-screen--c, body.afiwai-modern-design-active .afiwai-bg-screens[data-variant="3"] .afiwai-bg-screen--c{ left:8%!important; right:auto!important; bottom:9%!important; } /* Extra faint floating oscilloscope plane in the left background. */ @media(min-width:981px){ body.afiwai-modern-design-active .afiwai-md-section-shell:after{ content:"SYS TRACE / AFIWAI"; position:absolute; left:-1.5%; top:54%; width:min(35vw,520px); height:116px; z-index:-1; pointer-events:none; padding:10px 12px; box-sizing:border-box; border:1px solid rgba(37,174,255,.075); border-radius:10px; color:rgba(57,194,255,.16); font:700 6px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.09em; background: linear-gradient(90deg,rgba(29,167,240,.025) 1px,transparent 1px), linear-gradient(rgba(29,167,240,.02) 1px,transparent 1px), rgba(2,13,24,.16); background-size:22px 22px,22px 22px,auto; opacity:.72; } } /* Mobile/tablet: keep the dark premium background and reduce HUD density. */ @media(max-width:980px){ body.afiwai-modern-design-active .afiwai-bg-screens{ width:100%; -webkit-mask-image:none; mask-image:none; } body.afiwai-modern-design-active .afiwai-bg-screen--a{opacity:.18!important} body.afiwai-modern-design-active .afiwai-bg-screen--b, body.afiwai-modern-design-active .afiwai-bg-screen--c{display:none!important} } /* ========================================================= AFIWAI MODERN DESIGN 10.6.0 PREMIUM DATA TRANSITIONS — SECTION SEPARATORS ========================================================= */ body.afiwai-modern-design-active .afiwai-data-transition{ position:relative; width:min(1500px,94vw); height:clamp(82px,7vw,118px); margin:0 auto; display:grid; grid-template-columns:minmax(80px,1fr) auto minmax(110px,1.35fr) auto minmax(80px,1fr); align-items:center; gap:clamp(8px,1.4vw,22px); overflow:hidden; pointer-events:none; z-index:4; color:rgba(73,202,255,.60); } body.afiwai-modern-design-active .afiwai-data-transition:before{ content:""; position:absolute; inset:18% 2%; background: radial-gradient(circle at 15% 50%,rgba(0,166,255,.22) 0 2px,transparent 3px), radial-gradient(circle at 82% 50%,rgba(0,166,255,.18) 0 2px,transparent 3px), linear-gradient(90deg,transparent,rgba(25,174,255,.035) 20%,rgba(25,174,255,.055) 50%,rgba(25,174,255,.035) 80%,transparent); filter:blur(.2px); opacity:.8; } body.afiwai-modern-design-active .afiwai-data-line{ position:relative; height:32px; min-width:120px; } body.afiwai-modern-design-active .afiwai-data-line:before, body.afiwai-modern-design-active .afiwai-data-line:after{ content:""; position:absolute; height:1px; top:50%; background:linear-gradient(90deg,transparent,rgba(38,189,255,.38),rgba(38,189,255,.16)); box-shadow:0 0 8px rgba(0,151,255,.16); } body.afiwai-modern-design-active .afiwai-data-line--left:before{ left:0; right:42%; } body.afiwai-modern-design-active .afiwai-data-line--left:after{ left:58%; right:0; transform:translateY(-11px); } body.afiwai-modern-design-active .afiwai-data-line--right:before{ left:0; right:58%; transform:translateY(11px); } body.afiwai-modern-design-active .afiwai-data-line--right:after{ left:42%; right:0; } body.afiwai-modern-design-active .afiwai-data-line i{ position:absolute; width:5px;height:5px; border-radius:50%; background:#19baff; box-shadow:0 0 11px rgba(0,166,255,.65); top:calc(50% - 2px); } body.afiwai-modern-design-active .afiwai-data-line i:nth-child(1){left:24%} body.afiwai-modern-design-active .afiwai-data-line i:nth-child(2){left:50%;transform:translateY(-11px)} body.afiwai-modern-design-active .afiwai-data-line i:nth-child(3){left:78%} body.afiwai-modern-design-active .afiwai-data-line span{ position:absolute; width:38px;height:20px; border:1px solid rgba(45,190,255,.18); background: linear-gradient(90deg,rgba(30,173,245,.07) 1px,transparent 1px), linear-gradient(rgba(30,173,245,.05) 1px,transparent 1px), rgba(2,15,27,.42); background-size:8px 8px,8px 8px,auto; border-radius:4px; right:10%; top:50%; transform:translateY(-50%); opacity:.55; } body.afiwai-modern-design-active .afiwai-data-core{ position:relative; display:flex; align-items:center; gap:10px; min-width:max-content; padding:8px 12px; border:1px solid rgba(40,182,255,.16); border-radius:8px; background:rgba(2,14,26,.56); box-shadow:inset 0 0 18px rgba(0,125,220,.04); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:nowrap; } body.afiwai-modern-design-active .afiwai-data-core b{ color:rgba(55,202,255,.78); font-size:7px; letter-spacing:.08em; } body.afiwai-modern-design-active .afiwai-data-core span{ color:rgba(108,200,236,.46); font-size:6px; letter-spacing:.07em; } body.afiwai-modern-design-active .afiwai-data-core em{ color:rgba(43,188,255,.52); font-size:6px; font-style:normal; letter-spacing:.11em; } body.afiwai-modern-design-active .afiwai-data-wave{ position:relative; height:42px; min-width:170px; border-top:1px solid rgba(36,183,255,.08); border-bottom:1px solid rgba(36,183,255,.05); background: linear-gradient(90deg,rgba(29,171,244,.04) 1px,transparent 1px), linear-gradient(rgba(29,171,244,.03) 1px,transparent 1px); background-size:18px 18px; overflow:hidden; } body.afiwai-modern-design-active .afiwai-data-wave:before{ content:""; position:absolute; left:0;right:0;top:20%; height:60%; background:#16baff; clip-path:polygon( 0 61%,5% 59%,10% 67%,15% 31%,20% 55%,25% 47%,30% 22%,35% 62%,40% 52%, 45% 68%,50% 36%,55% 48%,60% 41%,65% 18%,70% 59%,75% 52%,80% 65%, 85% 34%,90% 51%,95% 27%,100% 44%,100% 51%,95% 35%,90% 58%,85% 42%, 80% 73%,75% 60%,70% 67%,65% 26%,60% 49%,55% 56%,50% 44%,45% 76%, 40% 60%,35% 70%,30% 30%,25% 55%,20% 63%,15% 39%,10% 75%,5% 67%,0 70% ); opacity:.46; filter:drop-shadow(0 0 4px rgba(0,156,255,.45)); } body.afiwai-modern-design-active .afiwai-data-wave i{ position:absolute; left:-8%; top:50%; width:16%; height:1px; background:linear-gradient(90deg,transparent,#29c5ff,transparent); box-shadow:0 0 10px rgba(0,173,255,.65); opacity:.75; animation:afiwaiDataPulse 5.2s linear infinite; } @keyframes afiwaiDataPulse{ 0%{left:-14%;opacity:0} 12%{opacity:.75} 88%{opacity:.75} 100%{left:102%;opacity:0} } /* Variants keep the separators from looking cloned */ body.afiwai-modern-design-active .afiwai-data-transition[data-variant="2"] .afiwai-data-core{ border-radius:4px 12px 4px 12px; } body.afiwai-modern-design-active .afiwai-data-transition[data-variant="2"] .afiwai-data-wave:before{ transform:scaleY(.72); opacity:.36; } body.afiwai-modern-design-active .afiwai-data-transition[data-variant="3"] .afiwai-data-line span{ left:8%; right:auto; } body.afiwai-modern-design-active .afiwai-data-transition[data-variant="3"] .afiwai-data-core{ background:rgba(1,11,22,.68); } /* Reduced motion */ @media(prefers-reduced-motion:reduce){ body.afiwai-modern-design-active .afiwai-data-wave i{ animation:none!important; left:42%; opacity:.45; } } /* Tablet */ @media(max-width:980px){ body.afiwai-modern-design-active .afiwai-data-transition{ width:92vw; grid-template-columns:1fr auto 1.1fr; height:86px; } body.afiwai-modern-design-active .afiwai-data-line--right{ display:none; } body.afiwai-modern-design-active .afiwai-data-core span:nth-of-type(2), body.afiwai-modern-design-active .afiwai-data-core em{ display:none; } } /* Mobile: compact technical divider, still not a plain HR */ @media(max-width:700px){ body.afiwai-modern-design-active .afiwai-data-transition{ width:90vw; height:68px; grid-template-columns:1fr auto; gap:10px; } body.afiwai-modern-design-active .afiwai-data-wave, body.afiwai-modern-design-active .afiwai-data-line--right{ display:none; } body.afiwai-modern-design-active .afiwai-data-line{ min-width:0; } body.afiwai-modern-design-active .afiwai-data-core{ padding:7px 9px; } body.afiwai-modern-design-active .afiwai-data-core b{ font-size:6px; } body.afiwai-modern-design-active .afiwai-data-core span, body.afiwai-modern-design-active .afiwai-data-core em{ display:none; } } /* ========================================================= AFIWAI MODERN DESIGN 10.7.0 PREMIUM CONTINUOUS CANVAS — NO SECTION BACKGROUND Sections become transparent; technical layers remain. ========================================================= */ body.afiwai-modern-design-active .afiwai-md-section, body.afiwai-modern-design-active .afiwai-md-section.is-feature, body.afiwai-modern-design-active .afiwai-md-section.is-dark, body.afiwai-modern-design-active .afiwai-md-section.is-light, body.afiwai-modern-design-active .afiwai-md-section.is-accent{ background:transparent!important; background-color:transparent!important; background-image:none!important; } /* Remove any hard visual plate on the section shell itself. */ body.afiwai-modern-design-active .afiwai-md-section-shell{ background:transparent!important; } /* Keep only a very subtle structural edge, not a section background. */ body.afiwai-modern-design-active .afiwai-md-section{ border-top-color:rgba(31,160,240,.045)!important; } /* Feature text must remain readable now that the former blue plate is gone. */ body.afiwai-modern-design-active .afiwai-md-section.is-feature h2, body.afiwai-modern-design-active .afiwai-md-section.is-feature h3, body.afiwai-modern-design-active .afiwai-md-section.is-feature strong{ color:#f3f7fb!important; } body.afiwai-modern-design-active .afiwai-md-section.is-feature p, body.afiwai-modern-design-active .afiwai-md-section.is-feature li{ color:#9db0c3!important; } /* Preserve the technical atmosphere as overlays only. */ body.afiwai-modern-design-active .afiwai-md-section:before{ opacity:.46!important; } body.afiwai-modern-design-active .afiwai-md-section:after{ opacity:.42!important; } body.afiwai-modern-design-active .afiwai-bg-screens{ opacity:.82!important; } /* Data transitions remain the visual bridge between transparent sections. */ body.afiwai-modern-design-active .afiwai-data-transition{ margin-top:-1px; margin-bottom:-1px; } /* ========================================================= AFIWAI MODERN DESIGN 10.8.0 PREMIUM DATA TRANSITION VISIBILITY BOOST ========================================================= */ body.afiwai-modern-design-active .afiwai-data-wave:before{ opacity:.66!important; filter:drop-shadow(0 0 6px rgba(0,170,255,.62))!important; } body.afiwai-modern-design-active .afiwai-data-wave i{ width:22%!important; height:2px!important; background:linear-gradient(90deg,transparent,#61dcff 25%,#13baff 52%,#61dcff 75%,transparent)!important; box-shadow: 0 0 8px rgba(0,184,255,.88), 0 0 18px rgba(0,150,255,.52)!important; opacity:.95!important; animation-duration:3.2s!important; } body.afiwai-modern-design-active .afiwai-data-line i{ width:6px!important; height:6px!important; box-shadow: 0 0 8px rgba(0,178,255,.85), 0 0 16px rgba(0,146,255,.48)!important; animation:afiwaiNodePulse 2.4s ease-in-out infinite; } body.afiwai-modern-design-active .afiwai-data-line i:nth-child(2){animation-delay:.35s} body.afiwai-modern-design-active .afiwai-data-line i:nth-child(3){animation-delay:.7s} body.afiwai-modern-design-active .afiwai-data-core{ border-color:rgba(45,191,255,.24)!important; box-shadow: inset 0 0 18px rgba(0,125,220,.05), 0 0 18px rgba(0,142,255,.05)!important; } body.afiwai-modern-design-active .afiwai-data-core b{ color:rgba(83,216,255,.92)!important; } body.afiwai-modern-design-active .afiwai-data-core span, body.afiwai-modern-design-active .afiwai-data-core em{ color:rgba(118,215,248,.62)!important; } @keyframes afiwaiNodePulse{ 0%,100%{ transform:scale(.82); opacity:.48; } 50%{ transform:scale(1.28); opacity:1; } } @media(prefers-reduced-motion:reduce){ body.afiwai-modern-design-active .afiwai-data-line i{ animation:none!important; transform:none!important; } } /* AFIWAI Modern Design 11.0.0 — per-page visual switches */ body.afiwai-md-no-background-screens .afiwai-bg-screens{display:none!important} body.afiwai-md-no-data-transitions .afiwai-data-transition{display:none!important} body.afiwai-md-no-tech-backgrounds .afiwai-tech-deck, body.afiwai-md-no-tech-backgrounds .afiwai-card-tech, body.afiwai-md-no-tech-backgrounds .afiwai-md-section:before, body.afiwai-md-no-tech-backgrounds .afiwai-md-section:after{display:none!important} /* ========================================================= AFIWAI MODERN DESIGN 11.1.0 PREMIUM GLOBAL HOMEPAGE — REFERENCE-INSPIRED LIVE LAYOUT No generated background image: real HTML/CSS composition. ========================================================= */ body.afiwai-md-home-premium{ --afi-home-cyan:#16c8ff; --afi-home-blue:#0064c0; --afi-home-deep:#01050d; background:#01050d!important; } body.afiwai-md-home-premium .afiwai-md-backdrop{ background: radial-gradient(900px 520px at 50% 9%,rgba(0,87,230,.10),transparent 70%), radial-gradient(700px 460px at 48% 36%,rgba(0,162,255,.035),transparent 72%), linear-gradient(180deg,#01040b,#020713 56%,#01040a)!important; } body.afiwai-md-home-premium .afiwai-md-root{ background:transparent!important; } /* Reference-like centered hero */ body.afiwai-md-home-premium .afiwai-home-hero{ min-height:1120px!important; padding:110px max(4vw,calc((100vw - 1480px)/2)) 70px!important; display:block!important; text-align:center; overflow:hidden; background:transparent!important; } body.afiwai-md-home-premium .afiwai-home-hero:before{ content:""; position:absolute;left:50%;top:70px;transform:translateX(-50%); width:min(1200px,90vw);height:520px;pointer-events:none; background: radial-gradient(ellipse at 50% 100%,transparent 0 58%,rgba(45,89,170,.11) 58.2% 58.45%,transparent 58.7% 66%,rgba(45,89,170,.075) 66.2% 66.4%,transparent 66.7% 75%,rgba(45,89,170,.05) 75.2% 75.4%,transparent 75.8%); opacity:.95; } body.afiwai-md-home-premium .afiwai-home-hero:after{display:none!important} body.afiwai-md-home-premium .afiwai-home-hero .afiwai-md-hero-inner{ width:min(1100px,92vw)!important;margin:0 auto!important;display:flex;flex-direction:column;align-items:center; } body.afiwai-md-home-premium .afiwai-home-hero .afiwai-md-eyebrow{ justify-content:center;margin-bottom:22px!important;padding:7px 12px;border:1px solid rgba(110,145,195,.16);border-radius:999px; background:rgba(255,255,255,.025);color:#8ca0b6!important;letter-spacing:.08em!important; } body.afiwai-md-home-premium .afiwai-home-hero .afiwai-md-eyebrow:before{display:none!important} body.afiwai-md-home-premium .afiwai-home-hero h1{ max-width:880px!important;margin:0 auto 28px!important;font-size:clamp(54px,5.8vw,92px)!important;line-height:.98!important;font-weight:520!important;letter-spacing:-.045em!important; } body.afiwai-md-home-premium .afiwai-home-hero p{ max-width:720px!important;margin-left:auto!important;margin-right:auto!important;color:#8496aa!important;font-size:clamp(16px,1.15vw,19px)!important; } body.afiwai-md-home-premium .afiwai-home-hero .afiwai-md-link{ margin-top:18px!important;background:linear-gradient(180deg,#0b6dff,#0539d8)!important;border-color:#338cff!important;box-shadow:0 0 32px rgba(0,93,255,.32),inset 0 1px rgba(255,255,255,.2)!important; } /* AFIWAI luminous central object built in CSS */ .afiwai-home-core-stage{position:relative;width:min(920px,92vw);height:640px;margin:36px auto 0;pointer-events:none} .afiwai-home-orbit{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);border:1px solid rgba(33,110,200,.10);border-radius:50%} .afiwai-home-orbit.orbit-a{width:880px;height:400px}.afiwai-home-orbit.orbit-b{width:690px;height:310px}.afiwai-home-orbit.orbit-c{width:510px;height:225px} .afiwai-home-core{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);width:280px;height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:46% 46% 38% 38%;background:linear-gradient(180deg,rgba(0,149,255,.20),rgba(2,25,58,.56));border:1px solid rgba(68,207,255,.30);box-shadow:0 0 30px rgba(0,173,255,.22),0 0 100px rgba(0,90,255,.18),inset 0 0 40px rgba(69,201,255,.08);z-index:4} .afiwai-home-core:before,.afiwai-home-core:after{content:"";position:absolute;left:12%;right:12%;height:46px;border:1px solid rgba(46,194,255,.25);border-radius:50%;background:rgba(0,82,210,.11)} .afiwai-home-core:before{top:18px;box-shadow:0 55px 0 rgba(0,105,235,.055),0 110px 0 rgba(0,105,235,.04)}.afiwai-home-core:after{bottom:18px} .afiwai-home-core img{position:relative;z-index:3;width:118px;height:118px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(0,187,255,.7))} .afiwai-home-core small{position:relative;z-index:3;margin-top:14px;color:rgba(113,222,255,.62);font:800 7px/1.4 ui-monospace,monospace;letter-spacing:.11em} .afiwai-home-core-glow{position:absolute;inset:-90px;background:radial-gradient(circle,rgba(0,178,255,.18),rgba(0,72,255,.07) 36%,transparent 68%);filter:blur(9px)} .afiwai-home-core-base{position:absolute;left:50%;top:64%;transform:translateX(-50%);width:360px;height:135px;z-index:2;clip-path:polygon(20% 0,80% 0,100% 34%,89% 100%,11% 100%,0 34%);background:linear-gradient(180deg,#0a1630,#020713);border:1px solid rgba(51,139,255,.2);box-shadow:0 30px 70px rgba(0,0,0,.65)} .afiwai-home-core-base span{display:block;width:52%;height:6px;margin:18px auto 0;border-radius:8px;background:#1259ff;box-shadow:0 0 15px rgba(25,120,255,.7)} .afiwai-home-data{position:absolute;top:46%;width:32%;height:150px;border-top:1px solid rgba(32,202,255,.26);border-bottom:1px solid rgba(32,202,255,.15);background:repeating-linear-gradient(180deg,transparent 0 10px,rgba(40,197,255,.055) 10px 11px)} .afiwai-home-data.data-l{left:2%;transform:perspective(500px) rotateY(24deg)}.afiwai-home-data.data-r{right:2%;transform:perspective(500px) rotateY(-24deg)} .afiwai-home-data i{display:block;height:1px;margin-top:16px;background:linear-gradient(90deg,transparent,rgba(34,213,255,.56),transparent);box-shadow:0 0 8px rgba(0,197,255,.25)} .afiwai-home-packet{position:absolute;width:6px;height:6px;background:#18c8ff;box-shadow:0 0 12px #18c8ff;opacity:.75;animation:afiwaiHomePacket 4.5s linear infinite}.afiwai-home-packet.p1{left:18%;top:44%}.afiwai-home-packet.p2{right:22%;top:52%;animation-delay:1.1s}.afiwai-home-packet.p3{left:35%;top:68%;animation-delay:2.2s} @keyframes afiwaiHomePacket{0%,100%{opacity:.15;transform:translateY(0) scale(.6)}50%{opacity:1;transform:translateY(-18px) scale(1.25)}} /* Large manifesto, like the reference breathing section */ .afiwai-home-manifesto{position:relative;min-height:620px;padding:150px max(5vw,calc((100vw - 1200px)/2));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .afiwai-home-manifesto p{max-width:1050px!important;margin:0 auto!important;color:#526173!important;font-size:clamp(28px,3.2vw,52px)!important;line-height:1.25!important;font-weight:450!important;letter-spacing:-.035em} .afiwai-home-manifesto p strong{color:#eaf4fb!important;font-weight:500!important} .afiwai-home-signal{width:min(980px,90vw);margin-top:100px;display:flex;justify-content:space-between;align-items:center;opacity:.5} .afiwai-home-signal i{display:block;width:10px;height:10px;border:1px solid rgba(85,206,255,.28);border-radius:2px;box-shadow:0 0 12px rgba(0,170,255,.08)} .afiwai-home-signal i:nth-child(4){width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,rgba(22,199,255,.17),transparent 65%);border-color:rgba(85,206,255,.34)} /* Full service panorama */ .afiwai-home-capabilities{padding:110px max(5vw,calc((100vw - 1480px)/2)) 140px;position:relative} .afiwai-home-capabilities:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 380px at 50% 48%,rgba(0,96,255,.045),transparent 72%)} .afiwai-home-cap-head{max-width:880px;margin:0 auto 66px;text-align:center}.afiwai-home-cap-head>span,.afiwai-home-process-title>span{color:#43cbff;font:800 8px/1 ui-monospace,monospace;letter-spacing:.14em}.afiwai-home-cap-head h2,.afiwai-home-process-title h2{font-size:clamp(42px,4.5vw,72px)!important;line-height:1!important;font-weight:520!important;letter-spacing:-.04em!important;margin:16px 0!important}.afiwai-home-cap-head p{color:#7f92a7!important;font-size:17px!important;line-height:1.6!important} .afiwai-home-cap-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid rgba(56,146,215,.09);background:rgba(41,122,185,.08)} .afiwai-home-cap-grid article{position:relative;min-height:220px;padding:26px;background:#030a14;overflow:hidden}.afiwai-home-cap-grid article:hover{background:#06121f}.afiwai-home-cap-grid em{display:block;color:#1fbfff;font:800 8px/1 ui-monospace,monospace;font-style:normal}.afiwai-home-cap-grid b{display:block;margin-top:28px;color:#edf6fc;font-size:18px;letter-spacing:-.01em}.afiwai-home-cap-grid p{margin:10px 0 34px!important;color:#718599!important;font-size:13px!important;line-height:1.5!important}.afiwai-home-cap-grid small{position:absolute;left:26px;bottom:20px;color:rgba(57,192,255,.32);font:700 6px/1 ui-monospace,monospace;letter-spacing:.08em}.afiwai-home-cap-grid article i{position:absolute;right:20px;bottom:20px;width:54px;height:28px;background:#11baff;opacity:.20;clip-path:polygon(0 70%,14% 60%,28% 72%,42% 34%,56% 55%,70% 25%,84% 50%,100% 17%,100% 28%,84% 61%,70% 36%,56% 66%,42% 46%,28% 82%,14% 70%,0 82%)} /* How we work, minimal bottom section */ .afiwai-home-process{padding:140px max(5vw,calc((100vw - 1480px)/2)) 130px;position:relative}.afiwai-home-process-title{max-width:660px;margin-bottom:66px}.afiwai-home-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:46px}.afiwai-home-process-grid article{position:relative;padding-top:34px;border-top:1px solid rgba(58,130,190,.13)}.afiwai-home-process-grid em{position:absolute;top:-13px;left:0;display:grid;place-items:center;width:26px;height:26px;border:1px solid rgba(58,188,255,.18);border-radius:50%;background:#030913;color:#44caff;font:700 7px/1 ui-monospace,monospace;font-style:normal}.afiwai-home-process-grid b{display:block;font-size:15px;margin-bottom:10px}.afiwai-home-process-grid p{font-size:12px!important;line-height:1.55!important;color:#6f8295!important} /* Existing page sections continue below but inherit a much calmer homepage presentation. */ body.afiwai-md-home-premium .afiwai-md-section{background:transparent!important;padding-top:120px!important;padding-bottom:120px!important} body.afiwai-md-home-premium .afiwai-md-section:before{opacity:.32!important} body.afiwai-md-home-premium .afiwai-md-section:after{opacity:.18!important} @media(max-width:1100px){.afiwai-home-cap-grid{grid-template-columns:repeat(3,1fr)}.afiwai-home-process-grid{grid-template-columns:repeat(2,1fr)}.afiwai-home-core-stage{transform:scale(.88);transform-origin:top center;margin-bottom:-70px}} @media(max-width:760px){body.afiwai-md-home-premium .afiwai-home-hero{min-height:920px!important;padding-left:18px!important;padding-right:18px!important}.afiwai-home-core-stage{width:100%;height:470px;transform:scale(.72);margin-top:32px;margin-bottom:-120px}.afiwai-home-data{display:none}.afiwai-home-manifesto{min-height:480px;padding:100px 22px}.afiwai-home-manifesto p{font-size:clamp(25px,8vw,38px)!important}.afiwai-home-signal{margin-top:65px}.afiwai-home-capabilities{padding:90px 18px 110px}.afiwai-home-cap-grid{grid-template-columns:1fr 1fr}.afiwai-home-cap-grid article{min-height:190px;padding:20px}.afiwai-home-cap-grid small{left:20px}.afiwai-home-process{padding:105px 18px}.afiwai-home-process-grid{grid-template-columns:1fr 1fr;gap:34px 18px}} @media(max-width:520px){.afiwai-home-cap-grid{grid-template-columns:1fr}.afiwai-home-process-grid{grid-template-columns:1fr}.afiwai-home-core-stage{transform:scale(.62);margin-left:-8%;width:116%}} @media(prefers-reduced-motion:reduce){.afiwai-home-packet{animation:none!important}} /* ========================================================= AFIWAI MODERN DESIGN 11.3.0 PREMIUM INÍCIO — GLOBAL AFIWAI HOMEPAGE Reference-inspired dark editorial experience. All illustrations remain real AFIWAI builder media slots. ========================================================= */ body.afiwai-md-home-premium{ --home-bg:#01050d; --home-panel:#030a14; --home-line:rgba(47,171,255,.14); --home-cyan:#19c5ff; --home-muted:#71869a; background:#01050d!important; } body.afiwai-md-home-premium .afiwai-md-backdrop{ background: radial-gradient(850px 560px at 50% 9%,rgba(0,74,196,.10),transparent 72%), radial-gradient(720px 460px at 50% 42%,rgba(0,150,255,.025),transparent 72%), linear-gradient(180deg,#01040b 0%,#010611 54%,#01040a 100%)!important; } body.afiwai-md-home-premium .afiwai-md-root{background:transparent!important} /* Hero */ body.afiwai-md-home-premium .afiwai-home-hero{ min-height:1120px!important; padding:108px max(4vw,calc((100vw - 1380px)/2)) 70px!important; text-align:center; background:transparent!important; overflow:hidden; } body.afiwai-md-home-premium .afiwai-home-hero:before{ content:"";position:absolute;left:50%;top:80px;transform:translateX(-50%); width:min(1250px,92vw);height:480px;pointer-events:none; background: radial-gradient(ellipse at 50% 100%,transparent 0 58%,rgba(52,89,154,.10) 58.2% 58.45%,transparent 58.7% 67%,rgba(52,89,154,.065) 67.2% 67.45%,transparent 67.8% 76%,rgba(52,89,154,.045) 76.2% 76.45%,transparent 76.8%); } body.afiwai-md-home-premium .afiwai-home-hero:after{display:none!important} body.afiwai-md-home-premium .afiwai-home-hero .afiwai-md-hero-inner{ width:min(1080px,94vw)!important;margin:0 auto!important;display:flex!important;flex-direction:column!important;align-items:center!important; } .afiwai-home-hero-kicker{ order:-3;margin-bottom:18px;padding:7px 12px;border:1px solid rgba(112,144,184,.16);border-radius:999px; color:#78899b;background:rgba(255,255,255,.02);font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.11em; } body.afiwai-md-home-premium .afiwai-home-hero h1{ max-width:880px!important;margin:0 auto 24px!important;font-size:clamp(54px,5.6vw,90px)!important;line-height:.98!important; font-weight:520!important;letter-spacing:-.047em!important; } body.afiwai-md-home-premium .afiwai-home-hero p{ max-width:720px!important;margin-left:auto!important;margin-right:auto!important;color:#8294a6!important;font-size:clamp(16px,1.15vw,19px)!important; } body.afiwai-md-home-premium .afiwai-home-hero .afiwai-md-link{ background:linear-gradient(180deg,#0d72ff,#063ad8)!important;border-color:#378fff!important; box-shadow:0 0 28px rgba(0,91,255,.28),inset 0 1px rgba(255,255,255,.18)!important; } /* Editable central hero image — the image replaces the "reactor" visual from the reference. */ .afiwai-home-hero-visual{ position:relative;width:min(920px,94vw);height:620px;margin:32px auto 0;display:grid;place-items:center; } .afiwai-home-hero-visual:before{ content:"";position:absolute;left:50%;top:51%;transform:translate(-50%,-50%); width:500px;height:180px;background:radial-gradient(ellipse,rgba(0,149,255,.20),transparent 70%);filter:blur(12px); } .afiwai-home-orbit{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);border:1px solid rgba(40,108,190,.105);border-radius:50%} .afiwai-home-orbit.orbit-a{width:850px;height:330px}.afiwai-home-orbit.orbit-b{width:690px;height:260px} .afiwai-home-hero-lines{position:absolute;top:46%;width:32%;height:140px;border-top:1px solid rgba(25,196,255,.20);border-bottom:1px solid rgba(25,196,255,.11)} .afiwai-home-hero-lines.lines-left{left:0}.afiwai-home-hero-lines.lines-right{right:0} .afiwai-home-hero-lines i{display:block;height:1px;margin-top:17px;background:linear-gradient(90deg,transparent,rgba(38,208,255,.44),transparent)} .afiwai-home-hero-data{position:absolute;left:4%;bottom:12%;color:rgba(58,196,255,.27);font:700 6px/1.8 ui-monospace,monospace;text-align:left;letter-spacing:.08em} /* Shared editable figures on homepage */ body.afiwai-md-home-premium .afiwai-home-service-visual .afiwai-media, body.afiwai-md-home-premium .afiwai-home-hero-visual .afiwai-media{ position:relative!important;inset:auto!important;margin:0!important;z-index:3!important; border:1px solid rgba(47,177,255,.18)!important;border-radius:20px!important; overflow:hidden!important;background:#040b14!important; box-shadow:0 30px 80px rgba(0,0,0,.34),0 0 45px rgba(0,108,220,.05)!important; } body.afiwai-md-home-premium .afiwai-home-service-visual .afiwai-media img, body.afiwai-md-home-premium .afiwai-home-hero-visual .afiwai-media img{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; object-fit:cover!important;object-position:center!important;transform:none!important;filter:none!important; } body.afiwai-md-home-premium .afiwai-media--home-hero{width:min(650px,78vw)!important;aspect-ratio:4/3!important;border-radius:26px!important} body.afiwai-md-home-premium .afiwai-media--home-digital{width:100%!important;aspect-ratio:16/10!important} body.afiwai-md-home-premium .afiwai-media--home-brand{width:min(430px,100%)!important;aspect-ratio:4/5!important} body.afiwai-md-home-premium .afiwai-media--home-image{width:100%!important;aspect-ratio:16/9!important} body.afiwai-md-home-premium .afiwai-media--home-print{width:min(470px,100%)!important;aspect-ratio:1/1!important} body.afiwai-md-home-premium .afiwai-media--home-custom{width:100%!important;aspect-ratio:4/3!important} body.afiwai-md-home-premium .afiwai-media--home-europe{width:100%!important;aspect-ratio:21/9!important} body.afiwai-md-home-premium .afiwai-media--home-partner{width:100%!important;aspect-ratio:16/10!important} /* Placeholder is the FINAL frame, not an admin widget. */ body.afiwai-md-home-premium .afiwai-media.is-placeholder:after{ content:"AFIWAI / VISUAL SLOT";position:absolute;right:14px;bottom:12px;z-index:4; color:rgba(72,204,255,.40);font:700 6px/1 ui-monospace,monospace;letter-spacing:.10em; } /* Manifesto */ .afiwai-home-manifesto{ min-height:610px;padding:140px max(5vw,calc((100vw - 1220px)/2));display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center; } .afiwai-home-manifesto-copy>span{ color:#3cc8ff;font:800 7px/1 ui-monospace,monospace;letter-spacing:.13em; } .afiwai-home-manifesto p{ max-width:1080px!important;margin:24px auto 0!important;color:#536273!important;font-size:clamp(28px,3.1vw,50px)!important;line-height:1.26!important;font-weight:450!important;letter-spacing:-.034em!important; } .afiwai-home-manifesto p strong{color:#edf6fc!important;font-weight:500!important} .afiwai-home-signal{width:min(1000px,90vw);margin-top:100px;display:flex;justify-content:space-between;align-items:center;opacity:.52} .afiwai-home-signal i{width:8px;height:8px;border:1px solid rgba(67,193,255,.30);border-radius:2px} .afiwai-home-signal i:nth-child(4){width:56px;height:56px;border-radius:50%;background:radial-gradient(circle,rgba(19,190,255,.14),transparent 66%)} /* Grouped service sections */ .afiwai-home-services{position:relative} .afiwai-home-service-section{padding:150px max(5vw,calc((100vw - 1480px)/2));position:relative;overflow:hidden} .afiwai-home-service-section:before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(600px 340px at 20% 50%,rgba(0,106,210,.035),transparent 72%), linear-gradient(90deg,rgba(29,157,220,.018) 1px,transparent 1px), linear-gradient(rgba(29,157,220,.015) 1px,transparent 1px); background-size:auto,48px 48px,48px 48px; } .afiwai-home-service-shell{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:clamp(60px,7vw,120px);align-items:center} .afiwai-home-service-section.media-left .afiwai-home-service-copy{order:2} .afiwai-home-service-section.media-left .afiwai-home-service-visual{order:1} .afiwai-home-service-eyebrow{color:#40caff;font:800 8px/1 ui-monospace,monospace;letter-spacing:.13em} .afiwai-home-service-copy h2{ max-width:700px;margin:18px 0 20px!important;color:#f3f8fc!important;font-size:clamp(40px,4.3vw,70px)!important;line-height:1.02!important;font-weight:520!important;letter-spacing:-.043em!important; } .afiwai-home-service-intro{max-width:660px!important;margin:0 0 46px!important;color:#7c90a4!important;font-size:17px!important;line-height:1.7!important} .afiwai-home-service-list{border-top:1px solid rgba(57,145,203,.11)} .afiwai-home-service-list article{ min-height:82px;display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center; border-bottom:1px solid rgba(57,145,203,.09);transition:background .2s ease,padding .2s ease; } .afiwai-home-service-list article:hover{background:rgba(0,137,230,.025);padding-left:8px} .afiwai-home-service-list em{font:700 7px/1 ui-monospace,monospace;color:#38c7ff;font-style:normal} .afiwai-home-service-list b{display:block;color:#e9f3fa;font-size:14px} .afiwai-home-service-list p{margin:4px 0 0!important;color:#687c90!important;font-size:12px!important;line-height:1.45!important} .afiwai-home-service-list small{color:rgba(53,190,255,.22);font:700 6px/1 ui-monospace,monospace;letter-spacing:.06em;white-space:nowrap} .afiwai-home-service-visual{position:relative;min-height:520px;display:grid;place-items:center} .afiwai-home-service-visual:before{ content:"";position:absolute;width:72%;height:72%;border:1px solid rgba(41,170,255,.09);border-radius:50%;box-shadow:0 0 70px rgba(0,112,230,.04); } .afiwai-home-visual-grid{position:absolute;inset:8%;background:linear-gradient(90deg,rgba(31,165,228,.035) 1px,transparent 1px),linear-gradient(rgba(31,165,228,.028) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle,#000,transparent 74%)} .afiwai-home-visual-status{position:absolute;right:7%;bottom:6%;color:rgba(60,200,255,.30);font:700 7px/1 ui-monospace,monospace;letter-spacing:.10em} /* Specific visual geometry gives each group a different feel. */ .afiwai-home-service-section.is-brand .afiwai-home-service-visual:before{width:58%;height:86%;border-radius:28px;transform:rotate(5deg)} .afiwai-home-service-section.is-image .afiwai-home-service-visual:before{width:88%;height:60%;border-radius:50%} .afiwai-home-service-section.is-print .afiwai-home-service-visual:before{width:68%;height:68%;border-radius:18px;transform:rotate(-6deg)} .afiwai-home-service-section.is-custom .afiwai-home-service-visual:before{width:84%;height:84%;border-radius:28px} .afiwai-home-service-section.is-europe .afiwai-home-service-visual{min-height:420px} .afiwai-home-service-section.is-partner .afiwai-home-service-visual:before{width:82%;height:64%;border-radius:50%} /* Between each group: reference-inspired subtle data line */ .afiwai-home-transition{ width:min(1360px,92vw);height:90px;margin:0 auto;display:grid;grid-template-columns:1fr 10px auto 1fr 10px 1fr;align-items:center;gap:12px;color:rgba(64,197,255,.36); } .afiwai-home-transition:before,.afiwai-home-transition b{ content:"";display:block;height:1px;background:linear-gradient(90deg,transparent,rgba(42,188,255,.26),transparent) } .afiwai-home-transition i{width:6px;height:6px;border-radius:50%;background:#20c7ff;box-shadow:0 0 10px rgba(0,180,255,.5);animation:afiwaiHomeNode 2.8s ease-in-out infinite} .afiwai-home-transition span{font:700 7px/1 ui-monospace,monospace;letter-spacing:.08em} @keyframes afiwaiHomeNode{0%,100%{opacity:.25;transform:scale(.75)}50%{opacity:.9;transform:scale(1.25)}} /* Process + final CTA */ .afiwai-home-process{padding:150px max(5vw,calc((100vw - 1480px)/2)) 130px} .afiwai-home-process-title{max-width:800px;margin-bottom:70px} .afiwai-home-process-title>span,.afiwai-home-final-cta>span{color:#42caff;font:800 8px/1 ui-monospace,monospace;letter-spacing:.13em} .afiwai-home-process-title h2{margin:16px 0!important;font-size:clamp(42px,4.6vw,72px)!important;line-height:1!important;font-weight:520!important;letter-spacing:-.04em!important} .afiwai-home-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:42px} .afiwai-home-process-grid article{position:relative;padding-top:36px;border-top:1px solid rgba(57,145,203,.12)} .afiwai-home-process-grid em{position:absolute;top:-13px;left:0;width:26px;height:26px;display:grid;place-items:center;border:1px solid rgba(58,188,255,.18);border-radius:50%;background:#030913;color:#44caff;font:700 7px/1 ui-monospace,monospace;font-style:normal} .afiwai-home-process-grid b{font-size:15px}.afiwai-home-process-grid p{font-size:12px!important;line-height:1.55!important;color:#6f8295!important} .afiwai-home-final-cta{margin-top:140px;padding:90px 30px;text-align:center;border-top:1px solid rgba(50,161,222,.10);border-bottom:1px solid rgba(50,161,222,.10);background:radial-gradient(circle at 50% 50%,rgba(0,105,220,.055),transparent 55%)} .afiwai-home-final-cta h3{margin:16px 0 10px;font-size:clamp(42px,5vw,76px);font-weight:520;letter-spacing:-.045em}.afiwai-home-final-cta p{color:#71869a!important} /* Keep original WordPress content in DOM after the new experience; make it quieter, not removed. */ body.afiwai-md-home-premium .afiwai-md-root>.afiwai-md-section{ padding-top:100px!important;padding-bottom:100px!important;opacity:.92; } body.afiwai-md-home-premium .afiwai-md-root>.afiwai-md-section:before{opacity:.18!important} body.afiwai-md-home-premium .afiwai-md-root>.afiwai-md-section:after{opacity:.10!important} /* Builder */ body.afiwai-md-builder-active.afiwai-md-home-premium .afiwai-media-editable{ cursor:pointer!important;outline:1px dashed rgba(41,199,255,.65)!important;outline-offset:5px!important; } body.afiwai-md-builder-active.afiwai-md-home-premium .afiwai-media-editable:before{ content:"CLIQUEZ POUR CHOISIR / REMPLACER";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8; padding:9px 12px;border-radius:8px;background:rgba(0,8,17,.78);border:1px solid rgba(42,199,255,.35);color:#7edfff;font:800 7px/1 ui-monospace,monospace;letter-spacing:.08em;pointer-events:none; } /* Responsive: same image file, frame geometry changes only. */ @media(max-width:1050px){ .afiwai-home-service-shell{grid-template-columns:1fr;gap:54px} .afiwai-home-service-section.media-left .afiwai-home-service-copy,.afiwai-home-service-section.media-left .afiwai-home-service-visual{order:initial} .afiwai-home-service-visual{min-height:460px} .afiwai-home-process-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:760px){ body.afiwai-md-home-premium .afiwai-home-hero{min-height:900px!important;padding:88px 18px 50px!important} .afiwai-home-hero-visual{height:460px;width:100%} .afiwai-home-orbit.orbit-a{width:620px;height:250px}.afiwai-home-orbit.orbit-b{width:480px;height:190px} .afiwai-home-hero-lines{display:none} body.afiwai-md-home-premium .afiwai-media--home-hero{width:min(520px,88vw)!important;aspect-ratio:4/3!important} .afiwai-home-manifesto{min-height:470px;padding:100px 22px} .afiwai-home-manifesto p{font-size:clamp(25px,7.8vw,38px)!important} .afiwai-home-signal{margin-top:62px} .afiwai-home-service-section{padding:100px 20px} .afiwai-home-service-visual{min-height:390px} .afiwai-home-service-list article{grid-template-columns:34px 1fr}.afiwai-home-service-list small{display:none} body.afiwai-md-home-premium .afiwai-media--home-digital, body.afiwai-md-home-premium .afiwai-media--home-image, body.afiwai-md-home-premium .afiwai-media--home-custom, body.afiwai-md-home-premium .afiwai-media--home-partner{aspect-ratio:4/3!important} body.afiwai-md-home-premium .afiwai-media--home-brand{aspect-ratio:4/5!important} body.afiwai-md-home-premium .afiwai-media--home-print{aspect-ratio:1/1!important} body.afiwai-md-home-premium .afiwai-media--home-europe{aspect-ratio:16/9!important} .afiwai-home-transition{height:68px;grid-template-columns:1fr 8px auto 1fr}.afiwai-home-transition i:nth-of-type(n+2),.afiwai-home-transition b{display:none} .afiwai-home-process{padding:110px 20px}.afiwai-home-process-grid{grid-template-columns:1fr 1fr;gap:34px 18px} .afiwai-home-final-cta{margin-top:100px;padding:72px 18px} } @media(max-width:520px){ .afiwai-home-process-grid{grid-template-columns:1fr} .afiwai-home-service-copy h2{font-size:clamp(36px,11vw,52px)!important} } @media(prefers-reduced-motion:reduce){ .afiwai-home-transition i{animation:none!important} } /* ========================================================= AFIWAI MODERN DESIGN 11.4.0 PREMIUM MANIFESTO TECH FIELD — LIVE HI-TECH ANIMATION Fills the previously empty space between manifesto and section 01. ========================================================= */ body.afiwai-md-home-premium .afiwai-home-manifesto{ min-height:760px!important; padding-bottom:90px!important; } .afiwai-home-tech-field{ position:relative; width:min(1120px,92vw); height:390px; margin:72px auto 0; overflow:hidden; border-top:1px solid rgba(40,184,255,.07); border-bottom:1px solid rgba(40,184,255,.07); background: radial-gradient(ellipse at 50% 50%,rgba(0,129,255,.055),transparent 64%), linear-gradient(180deg,rgba(0,13,27,.10),rgba(0,7,18,.02)); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .afiwai-techfield-grid{ position:absolute;inset:0; background: linear-gradient(90deg,rgba(33,159,225,.032) 1px,transparent 1px), linear-gradient(rgba(33,159,225,.028) 1px,transparent 1px); background-size:38px 38px; mask-image:radial-gradient(ellipse at 50% 50%,#000 0 54%,transparent 86%); opacity:.95; } .afiwai-techfield-arc{ position:absolute;left:50%;transform:translateX(-50%); border:1px solid rgba(34,134,220,.09);border-radius:50%; } .afiwai-techfield-arc.arc-1{top:10px;width:900px;height:315px} .afiwai-techfield-arc.arc-2{top:72px;width:650px;height:220px} .afiwai-techfield-route{ position:absolute;height:1px; background:linear-gradient(90deg,transparent,rgba(28,202,255,.30),rgba(28,202,255,.12),transparent); transform-origin:left center; } .afiwai-techfield-route:before{ content:"";position:absolute;inset:-3px 0 auto 0;height:7px; background:repeating-linear-gradient(90deg,transparent 0 45px,rgba(31,197,255,.15) 45px 47px,transparent 47px 78px); } .afiwai-techfield-route.route-a{left:6%;top:52%;width:39%;transform:rotate(-7deg)} .afiwai-techfield-route.route-b{right:6%;top:48%;width:39%;transform:rotate(7deg)} .afiwai-techfield-route.route-c{left:23%;bottom:24%;width:54%;transform:rotate(0)} .afiwai-techfield-route i{ position:absolute;top:-3px;width:6px;height:6px;border-radius:50%; background:#2acbff;box-shadow:0 0 10px rgba(0,193,255,.9),0 0 22px rgba(0,123,255,.45); animation:afiwaiTechNode 2.9s ease-in-out infinite; } .afiwai-techfield-route i:nth-child(1){left:15%} .afiwai-techfield-route i:nth-child(2){left:51%;animation-delay:.55s} .afiwai-techfield-route i:nth-child(3){left:84%;animation-delay:1.1s} .afiwai-techfield-screen{ position:absolute; width:210px;min-height:100px;padding:15px 16px; border:1px solid rgba(43,184,255,.14);border-radius:10px; background:linear-gradient(180deg,rgba(5,22,38,.58),rgba(2,12,23,.46)); box-shadow:inset 0 0 24px rgba(0,124,218,.035),0 12px 34px rgba(0,0,0,.14); color:#6790aa; font:600 7px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.04em; opacity:.75; animation:afiwaiHudFloat 6.8s ease-in-out infinite; } .afiwai-techfield-screen b{ display:block;margin-bottom:8px;color:rgba(66,207,255,.78);font-size:7px;letter-spacing:.09em } .afiwai-techfield-screen span{display:block} .afiwai-techfield-screen em{ display:block;height:28px;margin-top:8px; background:#17bfff;opacity:.23; clip-path:polygon(0 72%,10% 60%,20% 68%,31% 39%,42% 56%,52% 25%,64% 54%,75% 35%,86% 61%,100% 22%,100% 33%,86% 70%,75% 44%,64% 62%,52% 34%,42% 65%,31% 48%,20% 79%,10% 68%,0 84%); } .afiwai-techfield-screen.screen-a{left:3%;top:13%;transform:rotate(-2deg)} .afiwai-techfield-screen.screen-b{right:3%;top:16%;transform:rotate(2deg);animation-delay:1.2s} .afiwai-techfield-screen.screen-c{right:12%;bottom:8%;width:185px;min-height:88px;animation-delay:2.1s} .afiwai-techfield-console{ position:absolute;left:8%;bottom:9%;width:270px;padding:14px 16px; border-left:1px solid rgba(40,197,255,.18); background:linear-gradient(90deg,rgba(0,82,156,.045),transparent); color:rgba(63,202,255,.42); font:500 7px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.03em; } .afiwai-techfield-core{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:150px;height:150px;border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center; border:1px solid rgba(42,204,255,.22); background:radial-gradient(circle,rgba(0,143,255,.14),rgba(0,26,63,.24) 46%,rgba(0,7,20,.20) 70%); box-shadow:0 0 35px rgba(0,156,255,.10),inset 0 0 30px rgba(0,155,255,.05); z-index:4; } .afiwai-techfield-core:before,.afiwai-techfield-core:after{ content:"";position:absolute;border:1px solid rgba(45,178,255,.12);border-radius:50%; } .afiwai-techfield-core:before{inset:-34px;animation:afiwaiCoreRotate 14s linear infinite} .afiwai-techfield-core:after{inset:-68px;border-style:dashed;animation:afiwaiCoreRotate 22s linear infinite reverse} .afiwai-techfield-core span{ position:absolute;width:7px;height:7px;border-radius:50%;background:#24c9ff;box-shadow:0 0 12px #24c9ff; } .afiwai-techfield-core span:nth-child(1){top:5%;left:47%} .afiwai-techfield-core span:nth-child(2){right:6%;bottom:28%} .afiwai-techfield-core span:nth-child(3){left:7%;bottom:27%} .afiwai-techfield-core b{color:#dff8ff;font-size:22px;letter-spacing:.08em;font-weight:750} .afiwai-techfield-core small{margin-top:5px;color:rgba(56,205,255,.52);font:700 6px/1 ui-monospace,monospace;letter-spacing:.12em} .afiwai-techfield-wave{ position:absolute;left:28%;right:28%;bottom:14%;height:40px;overflow:hidden; } .afiwai-techfield-wave i{ position:absolute;inset:5px 0; background:#16c0ff;opacity:.34; clip-path:polygon(0 61%,7% 57%,14% 69%,21% 39%,28% 54%,35% 26%,42% 65%,50% 45%,58% 72%,65% 36%,72% 55%,80% 28%,88% 63%,95% 42%,100% 50%,100% 58%,95% 50%,88% 71%,80% 36%,72% 63%,65% 44%,58% 80%,50% 53%,42% 73%,35% 34%,28% 62%,21% 47%,14% 78%,7% 65%,0 69%); filter:drop-shadow(0 0 7px rgba(0,181,255,.4)); animation:afiwaiWavePulse 3.4s ease-in-out infinite; } .afiwai-techfield-packet{ position:absolute;width:5px;height:5px;background:#28caff;box-shadow:0 0 10px #28caff; animation:afiwaiPacketDrift 5.6s linear infinite;opacity:.65; } .afiwai-techfield-packet.p1{left:18%;top:42%} .afiwai-techfield-packet.p2{left:37%;top:27%;animation-delay:1.1s} .afiwai-techfield-packet.p3{right:31%;top:34%;animation-delay:2.2s} .afiwai-techfield-packet.p4{right:16%;bottom:26%;animation-delay:3.3s} .afiwai-techfield-coordinates{ position:absolute;left:50%;bottom:4%;transform:translateX(-50%); color:rgba(56,190,255,.22);font:700 6px/1 ui-monospace,monospace;letter-spacing:.09em;white-space:nowrap; } @keyframes afiwaiTechNode{ 0%,100%{opacity:.25;transform:scale(.75)} 50%{opacity:1;transform:scale(1.35)} } @keyframes afiwaiHudFloat{ 0%,100%{translate:0 0;opacity:.55} 50%{translate:0 -7px;opacity:.82} } @keyframes afiwaiCoreRotate{to{transform:rotate(360deg)}} @keyframes afiwaiWavePulse{ 0%,100%{opacity:.22;transform:scaleY(.82)} 50%{opacity:.48;transform:scaleY(1.12)} } @keyframes afiwaiPacketDrift{ 0%{opacity:0;transform:translate3d(-16px,10px,0) scale(.6)} 15%{opacity:.75} 70%{opacity:.8} 100%{opacity:0;transform:translate3d(110px,-34px,0) scale(1.15)} } @media(max-width:900px){ body.afiwai-md-home-premium .afiwai-home-manifesto{min-height:690px!important} .afiwai-home-tech-field{height:340px;margin-top:55px} .afiwai-techfield-screen{width:170px;min-height:85px;padding:12px} .afiwai-techfield-screen.screen-c{display:none} .afiwai-techfield-console{width:210px} .afiwai-techfield-core{width:130px;height:130px} } @media(max-width:620px){ body.afiwai-md-home-premium .afiwai-home-manifesto{min-height:610px!important} .afiwai-home-tech-field{height:290px;width:100%;margin-top:45px} .afiwai-techfield-screen.screen-a,.afiwai-techfield-screen.screen-b{width:130px;min-height:72px;font-size:5px} .afiwai-techfield-screen.screen-a{left:1%}.afiwai-techfield-screen.screen-b{right:1%} .afiwai-techfield-console{display:none} .afiwai-techfield-core{width:105px;height:105px} .afiwai-techfield-core:before{inset:-24px}.afiwai-techfield-core:after{inset:-44px} .afiwai-techfield-core b{font-size:16px} .afiwai-techfield-wave{left:20%;right:20%;bottom:11%} .afiwai-techfield-coordinates{font-size:4px} } @media(prefers-reduced-motion:reduce){ .afiwai-techfield-route i, .afiwai-techfield-screen, .afiwai-techfield-core:before, .afiwai-techfield-core:after, .afiwai-techfield-wave i, .afiwai-techfield-packet{animation:none!important} } /* ========================================================= AFIWAI MODERN DESIGN 11.5.0 PREMIUM IMMERSIVE DATA CORE — upgraded visual field More depth, motion and page integration without becoming a separate box. ========================================================= */ body.afiwai-md-home-premium .afiwai-home-manifesto{ min-height:860px!important; padding-bottom:70px!important; overflow:visible!important; } .afiwai-home-tech-field{ height:500px!important; margin-top:78px!important; border-top:0!important; border-bottom:0!important; overflow:visible!important; background: radial-gradient(ellipse at 50% 48%,rgba(0,155,255,.075),transparent 58%), radial-gradient(ellipse at 50% 62%,rgba(0,83,220,.055),transparent 72%), linear-gradient(180deg,transparent,rgba(1,13,27,.10) 35%,transparent 100%)!important; mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)!important; } .afiwai-home-tech-field:before, .afiwai-home-tech-field:after{ content:""; position:absolute; left:50%; transform:translateX(-50%); pointer-events:none; } .afiwai-home-tech-field:before{ top:-120px; width:min(1180px,96vw); height:340px; background:radial-gradient(ellipse at 50% 100%,rgba(0,105,255,.055),transparent 72%); filter:blur(12px); } .afiwai-home-tech-field:after{ bottom:-80px; width:min(980px,92vw); height:260px; background:radial-gradient(ellipse at 50% 0%,rgba(0,157,255,.045),transparent 72%); filter:blur(14px); } .afiwai-techfield-grid{ inset:-60px -40px!important; opacity:.82!important; background: linear-gradient(90deg,rgba(33,159,225,.034) 1px,transparent 1px), linear-gradient(rgba(33,159,225,.028) 1px,transparent 1px)!important; background-size:34px 34px!important; transform:perspective(720px) rotateX(63deg) translateY(130px) scale(1.16); transform-origin:center center; mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 72%,transparent 100%)!important; animation:afiwaiGridDrift 11s ease-in-out infinite; } .afiwai-techfield-depth{ position:absolute; left:50%; top:49%; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; } .afiwai-techfield-depth.depth-1{ width:760px;height:260px; border:1px solid rgba(34,142,235,.10); box-shadow:0 0 70px rgba(0,120,255,.035),inset 0 0 50px rgba(0,150,255,.025); animation:afiwaiDepthPulse 5.2s ease-in-out infinite; } .afiwai-techfield-depth.depth-2{ width:930px;height:340px; border:1px dashed rgba(43,128,210,.07); animation:afiwaiDepthRotate 30s linear infinite; } .afiwai-techfield-beam{ position:absolute; left:50%; top:48%; width:420px; height:1px; transform-origin:left center; background:linear-gradient(90deg,rgba(32,205,255,.7),rgba(0,102,255,.12),transparent); filter:drop-shadow(0 0 7px rgba(0,191,255,.45)); opacity:.32; } .afiwai-techfield-beam:after{ content:""; position:absolute; left:0;top:-2px;width:34px;height:5px; border-radius:999px; background:linear-gradient(90deg,#53dcff,transparent); box-shadow:0 0 14px rgba(0,197,255,.7); animation:afiwaiBeamScan 3.8s ease-in-out infinite; } .afiwai-techfield-beam.beam-a{transform:rotate(0deg)} .afiwai-techfield-beam.beam-b{transform:rotate(145deg);opacity:.22} .afiwai-techfield-beam.beam-c{transform:rotate(215deg);opacity:.18} .afiwai-techfield-beam.beam-b:after{animation-delay:1s} .afiwai-techfield-beam.beam-c:after{animation-delay:2s} .afiwai-techfield-particles{ position:absolute;inset:0;pointer-events:none; } .afiwai-techfield-particles i{ position:absolute; width:3px;height:3px;border-radius:50%; background:#42d2ff; box-shadow:0 0 10px rgba(0,199,255,.8); opacity:.28; animation:afiwaiParticleFloat 7s ease-in-out infinite; } .afiwai-techfield-particles i:nth-child(1){left:9%;top:28%} .afiwai-techfield-particles i:nth-child(2){left:18%;top:62%;animation-delay:.5s} .afiwai-techfield-particles i:nth-child(3){left:27%;top:20%;animation-delay:1s} .afiwai-techfield-particles i:nth-child(4){left:34%;top:70%;animation-delay:1.5s} .afiwai-techfield-particles i:nth-child(5){left:42%;top:31%;animation-delay:2s} .afiwai-techfield-particles i:nth-child(6){left:49%;top:78%;animation-delay:2.5s} .afiwai-techfield-particles i:nth-child(7){left:58%;top:21%;animation-delay:3s} .afiwai-techfield-particles i:nth-child(8){left:66%;top:68%;animation-delay:3.5s} .afiwai-techfield-particles i:nth-child(9){left:74%;top:34%;animation-delay:4s} .afiwai-techfield-particles i:nth-child(10){left:83%;top:63%;animation-delay:4.5s} .afiwai-techfield-particles i:nth-child(11){left:90%;top:25%;animation-delay:5s} .afiwai-techfield-particles i:nth-child(12){left:94%;top:76%;animation-delay:5.5s} .afiwai-techfield-arc.arc-1{ width:1020px!important;height:360px!important;top:28px!important; border-color:rgba(33,129,220,.10)!important; animation:afiwaiArcBreathe 6s ease-in-out infinite; } .afiwai-techfield-arc.arc-2{ width:760px!important;height:260px!important;top:96px!important; border-color:rgba(38,174,255,.11)!important; animation:afiwaiArcBreathe 6s ease-in-out infinite reverse; } .afiwai-techfield-route{ opacity:.86; } .afiwai-techfield-route.route-a{left:4%!important;top:53%!important;width:41%!important;transform:rotate(-6deg)!important} .afiwai-techfield-route.route-b{right:4%!important;top:48%!important;width:41%!important;transform:rotate(6deg)!important} .afiwai-techfield-route.route-c{left:19%!important;bottom:19%!important;width:62%!important} .afiwai-techfield-route:after{ content:""; position:absolute;top:-1px;left:0;width:22%;height:2px; background:linear-gradient(90deg,transparent,#37d5ff,transparent); filter:drop-shadow(0 0 8px rgba(0,196,255,.7)); animation:afiwaiRouteSweep 4.4s linear infinite; } .afiwai-techfield-route.route-b:after{animation-delay:1.4s} .afiwai-techfield-route.route-c:after{animation-delay:2.2s} .afiwai-techfield-screen{ backdrop-filter:blur(6px); border-color:rgba(58,191,255,.18)!important; background:linear-gradient(180deg,rgba(5,23,41,.48),rgba(2,12,23,.30))!important; box-shadow:inset 0 0 30px rgba(0,133,230,.04),0 20px 50px rgba(0,0,0,.12)!important; } .afiwai-techfield-screen.screen-a{left:1.5%!important;top:9%!important;transform:perspective(700px) rotateY(11deg) rotateZ(-1deg)!important} .afiwai-techfield-screen.screen-b{right:1.5%!important;top:11%!important;transform:perspective(700px) rotateY(-11deg) rotateZ(1deg)!important} .afiwai-techfield-screen.screen-c{right:9%!important;bottom:4%!important} .afiwai-techfield-screen:after{ content:""; position:absolute;inset:0; background:linear-gradient(120deg,transparent 0 42%,rgba(69,210,255,.035) 48%,transparent 54% 100%); animation:afiwaiScreenSheen 5.8s ease-in-out infinite; pointer-events:none; } .afiwai-techfield-console{ left:5%!important;bottom:5%!important;width:300px!important; opacity:.72; } .afiwai-techfield-core{ width:176px!important;height:176px!important; border-color:rgba(59,214,255,.34)!important; background: radial-gradient(circle,rgba(0,174,255,.18),rgba(0,44,105,.20) 34%,rgba(0,10,26,.16) 68%)!important; box-shadow: 0 0 32px rgba(0,191,255,.18), 0 0 90px rgba(0,90,255,.14), inset 0 0 34px rgba(0,181,255,.07)!important; } .afiwai-techfield-core:before{ inset:-44px!important; border-color:rgba(53,195,255,.16)!important; } .afiwai-techfield-core:after{ inset:-84px!important; border-color:rgba(45,133,220,.10)!important; } .afiwai-techfield-core-ring{ position:absolute; left:50%;top:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(63,202,255,.14); } .afiwai-techfield-core-ring.ring-a{ width:112px;height:112px; box-shadow:0 0 18px rgba(0,188,255,.12); animation:afiwaiRingPulse 3.5s ease-in-out infinite; } .afiwai-techfield-core-ring.ring-b{ width:142px;height:142px;border-style:dashed; animation:afiwaiDepthRotate 12s linear infinite reverse; } .afiwai-techfield-scanner{ position:absolute; left:50%;top:50%; width:78px;height:2px; transform-origin:left center; background:linear-gradient(90deg,#6fe6ff,transparent); box-shadow:0 0 10px rgba(0,208,255,.6); opacity:.8; animation:afiwaiScannerRotate 3.2s linear infinite; } .afiwai-techfield-core b{ font-size:24px!important; text-shadow:0 0 18px rgba(45,207,255,.36); } .afiwai-techfield-core small{ margin-top:7px!important; } .afiwai-techfield-wave{ left:25%!important;right:25%!important;bottom:10%!important;height:48px!important; } .afiwai-techfield-wave i{ opacity:.44!important; filter:drop-shadow(0 0 10px rgba(0,190,255,.45))!important; } .afiwai-techfield-packet{ width:6px!important;height:6px!important; border-radius:50%; } .afiwai-techfield-packet.p5{ left:52%;top:18%;animation-delay:4.2s; } .afiwai-techfield-flare{ position:absolute;left:50%;top:49%; width:340px;height:120px; transform:translate(-50%,-50%); background:radial-gradient(ellipse,rgba(20,199,255,.15),rgba(0,92,255,.06) 42%,transparent 72%); filter:blur(16px); opacity:.72; animation:afiwaiFlarePulse 4.6s ease-in-out infinite; pointer-events:none; } .afiwai-techfield-coordinates{ bottom:0!important; opacity:.72; } @keyframes afiwaiGridDrift{ 0%,100%{transform:perspective(720px) rotateX(63deg) translateY(130px) scale(1.16)} 50%{transform:perspective(720px) rotateX(63deg) translateY(116px) scale(1.19)} } @keyframes afiwaiDepthPulse{ 0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.96)} 50%{opacity:.88;transform:translate(-50%,-50%) scale(1.04)} } @keyframes afiwaiDepthRotate{ to{transform:translate(-50%,-50%) rotate(360deg)} } @keyframes afiwaiBeamScan{ 0%,100%{left:0;opacity:.25} 50%{left:82%;opacity:1} } @keyframes afiwaiParticleFloat{ 0%,100%{opacity:.12;transform:translate3d(0,0,0) scale(.65)} 50%{opacity:.72;transform:translate3d(0,-22px,0) scale(1.35)} } @keyframes afiwaiArcBreathe{ 0%,100%{opacity:.45;transform:translateX(-50%) scale(.97)} 50%{opacity:.9;transform:translateX(-50%) scale(1.025)} } @keyframes afiwaiRouteSweep{ 0%{left:-20%;opacity:0} 12%{opacity:.9} 82%{opacity:.75} 100%{left:100%;opacity:0} } @keyframes afiwaiScreenSheen{ 0%,100%{transform:translateX(-30%);opacity:0} 45%,55%{opacity:.9} 70%{transform:translateX(30%);opacity:0} } @keyframes afiwaiRingPulse{ 0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.92)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)} } @keyframes afiwaiScannerRotate{ to{transform:rotate(360deg)} } @keyframes afiwaiFlarePulse{ 0%,100%{opacity:.36;transform:translate(-50%,-50%) scale(.92)} 50%{opacity:.82;transform:translate(-50%,-50%) scale(1.08)} } @media(max-width:900px){ body.afiwai-md-home-premium .afiwai-home-manifesto{min-height:760px!important} .afiwai-home-tech-field{height:430px!important} .afiwai-techfield-depth.depth-1{width:640px;height:220px} .afiwai-techfield-depth.depth-2{width:760px;height:285px} .afiwai-techfield-arc.arc-1{width:820px!important;height:300px!important} .afiwai-techfield-arc.arc-2{width:620px!important;height:210px!important} .afiwai-techfield-screen.screen-c{display:none} } @media(max-width:620px){ body.afiwai-md-home-premium .afiwai-home-manifesto{min-height:660px!important} .afiwai-home-tech-field{height:340px!important} .afiwai-techfield-grid{transform:perspective(600px) rotateX(64deg) translateY(105px) scale(1.2)} .afiwai-techfield-depth.depth-1{width:460px;height:170px} .afiwai-techfield-depth.depth-2{width:560px;height:210px} .afiwai-techfield-screen.screen-a, .afiwai-techfield-screen.screen-b{display:none} .afiwai-techfield-core{width:126px!important;height:126px!important} .afiwai-techfield-core:before{inset:-30px!important} .afiwai-techfield-core:after{inset:-54px!important} .afiwai-techfield-core-ring.ring-a{width:84px;height:84px} .afiwai-techfield-core-ring.ring-b{width:104px;height:104px} .afiwai-techfield-scanner{width:58px} .afiwai-techfield-wave{left:14%!important;right:14%!important} .afiwai-techfield-console{display:none} .afiwai-techfield-beam{width:250px} } @media(prefers-reduced-motion:reduce){ .afiwai-techfield-grid, .afiwai-techfield-depth, .afiwai-techfield-beam:after, .afiwai-techfield-particles i, .afiwai-techfield-arc, .afiwai-techfield-route:after, .afiwai-techfield-screen:after, .afiwai-techfield-core-ring, .afiwai-techfield-scanner, .afiwai-techfield-flare{animation:none!important} } /* ========================================================= AFIWAI MODERN DESIGN 11.6.0 PREMIUM BLACK FUSION CORE — seamless homepage background ========================================================= */ body.afiwai-md-home-premium .afiwai-home-manifesto{ min-height:820px!important; padding-bottom:80px!important; background:#01050d!important; overflow:visible!important; } .afiwai-home-tech-field{ position:relative!important; width:min(1180px,94vw)!important; height:500px!important; margin:70px auto 0!important; overflow:visible!important; border:0!important; background:transparent!important; box-shadow:none!important; mask-image:radial-gradient(ellipse at 50% 50%,#000 0 58%,rgba(0,0,0,.95) 70%,transparent 100%)!important; -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 0 58%,rgba(0,0,0,.95) 70%,transparent 100%)!important; } .afiwai-techfield-grid, .afiwai-techfield-depth, .afiwai-techfield-beam, .afiwai-techfield-particles, .afiwai-techfield-arc, .afiwai-techfield-route, .afiwai-techfield-screen, .afiwai-techfield-console, .afiwai-techfield-core, .afiwai-techfield-wave, .afiwai-techfield-packet, .afiwai-techfield-flare, .afiwai-techfield-coordinates{ display:none!important; } .afiwai-core-haze{ position:absolute;left:50%;top:52%;width:760px;height:320px;transform:translate(-50%,-50%); background:radial-gradient(ellipse at 50% 50%,rgba(0,169,255,.17) 0%,rgba(0,100,255,.08) 28%,rgba(0,48,120,.035) 52%,transparent 76%); filter:blur(18px);opacity:.72;animation:afiwaiCoreHaze 5.8s ease-in-out infinite;pointer-events:none; } .afiwai-core-grid{ position:absolute;left:50%;top:54%;width:1120px;height:340px; transform:translate(-50%,-50%) perspective(800px) rotateX(67deg) translateY(105px); transform-origin:center center; background: linear-gradient(90deg,rgba(39,181,255,.045) 1px,transparent 1px), linear-gradient(rgba(39,181,255,.035) 1px,transparent 1px); background-size:36px 36px; mask-image:radial-gradient(ellipse at 50% 50%,#000 0 44%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 0 44%,transparent 78%); opacity:.58;animation:afiwaiCoreGrid 8.5s ease-in-out infinite; } .afiwai-core-arc{ position:absolute;left:50%;top:49%;transform:translate(-50%,-50%); border-radius:50%;border:1px solid rgba(37,125,214,.10);pointer-events:none; } .afiwai-core-arc.arc-a{width:980px;height:330px;animation:afiwaiCoreArc 7s ease-in-out infinite} .afiwai-core-arc.arc-b{width:760px;height:250px;border-color:rgba(43,171,255,.11);animation:afiwaiCoreArc 7s ease-in-out infinite reverse} .afiwai-core-arc.arc-c{width:540px;height:180px;border-color:rgba(55,205,255,.13);animation:afiwaiCoreArc 5.6s ease-in-out infinite} .afiwai-core-lines{position:absolute;top:47%;width:39%;height:170px;opacity:.62} .afiwai-core-lines.lines-left{left:-1%} .afiwai-core-lines.lines-right{right:-1%} .afiwai-core-lines i{ display:block;height:1px;margin:19px 0; background:linear-gradient(90deg,transparent 0%,rgba(23,197,255,.12) 18%,rgba(36,213,255,.42) 56%,rgba(36,213,255,.06) 100%); position:relative; } .afiwai-core-lines.lines-right i{transform:scaleX(-1)} .afiwai-core-lines i:after{ content:"";position:absolute;top:-2px;left:12%;width:44px;height:4px;border-radius:999px; background:linear-gradient(90deg,transparent,#47dcff,transparent); box-shadow:0 0 12px rgba(0,195,255,.55); animation:afiwaiCoreTrace 4.6s linear infinite; } .afiwai-core-lines i:nth-child(2):after{animation-delay:.7s} .afiwai-core-lines i:nth-child(3):after{animation-delay:1.4s} .afiwai-core-lines i:nth-child(4):after{animation-delay:2.1s} .afiwai-core-lines i:nth-child(5):after{animation-delay:2.8s} .afiwai-core-platform{ position:absolute;left:50%;top:51%;width:320px;height:250px;transform:translate(-50%,-50%); z-index:5;filter:drop-shadow(0 28px 48px rgba(0,0,0,.62)); } .afiwai-core-platform .layer{ position:absolute;left:50%;transform:translateX(-50%); border:1px solid rgba(49,191,255,.22); background: linear-gradient(180deg,rgba(0,117,255,.20),rgba(0,25,72,.44)), linear-gradient(90deg,rgba(35,200,255,.06),transparent 50%); clip-path:polygon(12% 0,88% 0,100% 28%,88% 100%,12% 100%,0 28%); box-shadow:inset 0 0 30px rgba(0,164,255,.055),0 0 18px rgba(0,122,255,.05); } .afiwai-core-platform .l1{top:44px;width:292px;height:154px;opacity:.24} .afiwai-core-platform .l2{top:28px;width:260px;height:146px;opacity:.40;animation:afiwaiCoreLayer 4.8s ease-in-out infinite} .afiwai-core-platform .l3{top:14px;width:226px;height:136px;opacity:.62;animation:afiwaiCoreLayer 4.8s ease-in-out infinite reverse} .afiwai-core-platform .l4{top:0;width:190px;height:124px;opacity:.9;animation:afiwaiCoreLayer 4.8s ease-in-out infinite} .afiwai-core-reactor{ position:absolute;left:50%;top:44%;width:130px;height:130px;transform:translate(-50%,-50%); display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:36%; border:1px solid rgba(89,218,255,.32); background:radial-gradient(circle at 50% 45%,rgba(28,205,255,.26),rgba(0,86,210,.16) 38%,rgba(0,13,34,.62) 70%); box-shadow:0 0 24px rgba(0,189,255,.20),0 0 68px rgba(0,91,255,.16),inset 0 0 28px rgba(40,210,255,.08); overflow:hidden; } .afiwai-core-reactor:before,.afiwai-core-reactor:after{ content:"";position:absolute;border-radius:50%;border:1px solid rgba(61,198,255,.15); } .afiwai-core-reactor:before{inset:12px;animation:afiwaiCoreSpin 10s linear infinite} .afiwai-core-reactor:after{inset:26px;border-style:dashed;animation:afiwaiCoreSpin 7s linear infinite reverse} .afiwai-core-reactor b{ position:relative;z-index:2;color:#edfaff;font-size:22px;font-weight:760;letter-spacing:.08em;text-shadow:0 0 18px rgba(73,220,255,.45) } .afiwai-core-reactor small{ position:relative;z-index:2;margin-top:7px;color:rgba(89,214,255,.56); font:700 6px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em; } .afiwai-core-code{ position:absolute;color:rgba(55,186,245,.20); font:600 6px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;white-space:nowrap;text-align:left; } .afiwai-core-code.code-a{left:8%;top:18%} .afiwai-core-code.code-b{right:8%;bottom:16%;text-align:right} .afiwai-core-particles{position:absolute;inset:0;pointer-events:none} .afiwai-core-particles i{ position:absolute;width:4px;height:4px;border-radius:50%;background:#35d1ff; box-shadow:0 0 10px rgba(0,190,255,.72);opacity:.28;animation:afiwaiCoreParticle 6.5s ease-in-out infinite; } .afiwai-core-particles i:nth-child(1){left:13%;top:38%} .afiwai-core-particles i:nth-child(2){left:23%;top:68%;animation-delay:.7s} .afiwai-core-particles i:nth-child(3){left:34%;top:27%;animation-delay:1.4s} .afiwai-core-particles i:nth-child(4){left:44%;top:75%;animation-delay:2.1s} .afiwai-core-particles i:nth-child(5){left:60%;top:24%;animation-delay:2.8s} .afiwai-core-particles i:nth-child(6){left:71%;top:70%;animation-delay:3.5s} .afiwai-core-particles i:nth-child(7){left:82%;top:34%;animation-delay:4.2s} .afiwai-core-particles i:nth-child(8){left:90%;top:61%;animation-delay:4.9s} .afiwai-core-pulse{ position:absolute;left:50%;top:50%;width:180px;height:180px;transform:translate(-50%,-50%); border-radius:50%;border:1px solid rgba(38,200,255,.14);opacity:0;animation:afiwaiCorePulse 4.8s ease-out infinite; } .afiwai-core-pulse.pulse-b{animation-delay:2.4s} @keyframes afiwaiCoreHaze{ 0%,100%{opacity:.50;transform:translate(-50%,-50%) scale(.94)} 50%{opacity:.82;transform:translate(-50%,-50%) scale(1.06)} } @keyframes afiwaiCoreGrid{ 0%,100%{transform:translate(-50%,-50%) perspective(800px) rotateX(67deg) translateY(105px) scale(1)} 50%{transform:translate(-50%,-50%) perspective(800px) rotateX(67deg) translateY(94px) scale(1.035)} } @keyframes afiwaiCoreArc{ 0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.98)} 50%{opacity:.75;transform:translate(-50%,-50%) scale(1.02)} } @keyframes afiwaiCoreTrace{ 0%{left:-10%;opacity:0} 12%{opacity:1} 80%{opacity:.85} 100%{left:100%;opacity:0} } @keyframes afiwaiCoreLayer{ 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-6px)} } @keyframes afiwaiCoreSpin{to{transform:rotate(360deg)}} @keyframes afiwaiCoreParticle{ 0%,100%{opacity:.12;transform:translateY(0) scale(.7)} 50%{opacity:.62;transform:translateY(-18px) scale(1.25)} } @keyframes afiwaiCorePulse{ 0%{opacity:.28;transform:translate(-50%,-50%) scale(.45)} 75%{opacity:.06} 100%{opacity:0;transform:translate(-50%,-50%) scale(3.7)} } @media(max-width:900px){ body.afiwai-md-home-premium .afiwai-home-manifesto{min-height:730px!important} .afiwai-home-tech-field{height:440px!important} .afiwai-core-grid{width:900px} .afiwai-core-arc.arc-a{width:820px;height:290px} .afiwai-core-arc.arc-b{width:640px;height:215px} .afiwai-core-lines{width:35%} .afiwai-core-code{opacity:.65} } @media(max-width:620px){ body.afiwai-md-home-premium .afiwai-home-manifesto{min-height:620px!important} .afiwai-home-tech-field{height:350px!important;margin-top:48px!important} .afiwai-core-grid{width:660px;height:260px} .afiwai-core-arc.arc-a{width:580px;height:210px} .afiwai-core-arc.arc-b{width:450px;height:165px} .afiwai-core-arc.arc-c{width:330px;height:120px} .afiwai-core-lines{width:31%;height:120px} .afiwai-core-lines i{margin:14px 0} .afiwai-core-platform{width:240px;height:190px} .afiwai-core-platform .l1{width:220px;height:118px} .afiwai-core-platform .l2{width:196px;height:110px} .afiwai-core-platform .l3{width:170px;height:102px} .afiwai-core-platform .l4{width:144px;height:94px} .afiwai-core-reactor{width:98px;height:98px} .afiwai-core-reactor b{font-size:16px} .afiwai-core-code{display:none} .afiwai-core-haze{width:520px;height:240px} } @media(prefers-reduced-motion:reduce){ .afiwai-core-haze,.afiwai-core-grid,.afiwai-core-arc,.afiwai-core-lines i:after, .afiwai-core-platform .layer,.afiwai-core-reactor:before,.afiwai-core-reactor:after, .afiwai-core-particles i,.afiwai-core-pulse{animation:none!important} } /* ========================================================= AFIWAI MODERN DESIGN 11.7.0 PREMIUM DIGITAL RAIN / MATRIX-INSPIRED DATA SPACE Cyan/blue AFIWAI identity; seamless black integration. ========================================================= */ body.afiwai-md-home-premium .afiwai-home-manifesto{ min-height:850px!important;background:#01050d!important;overflow:visible!important; } .afiwai-home-tech-field.afiwai-matrix-field{ --afiwai-parallax:0; position:relative!important;width:min(1240px,96vw)!important;height:520px!important; margin:62px auto 0!important;background:transparent!important;border:0!important;box-shadow:none!important; overflow:hidden!important; mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 82%,transparent 100%)!important; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 82%,transparent 100%)!important; } /* Neutralize all legacy visual generations. */ .afiwai-core-haze,.afiwai-core-grid,.afiwai-core-arc,.afiwai-core-lines,.afiwai-core-platform, .afiwai-core-code,.afiwai-core-particles,.afiwai-core-pulse, .afiwai-techfield-grid,.afiwai-techfield-depth,.afiwai-techfield-beam,.afiwai-techfield-particles, .afiwai-techfield-arc,.afiwai-techfield-route,.afiwai-techfield-screen,.afiwai-techfield-console, .afiwai-techfield-core,.afiwai-techfield-wave,.afiwai-techfield-packet,.afiwai-techfield-flare,.afiwai-techfield-coordinates{display:none!important} .afiwai-matrix-field:before{ content:"";position:absolute;inset:4% 4%; background: radial-gradient(ellipse at 50% 52%,rgba(0,171,255,.10),rgba(0,74,170,.035) 35%,transparent 67%); filter:blur(15px);pointer-events:none; animation:afiwaiMatrixBreath 6s ease-in-out infinite; } .afiwai-matrix-depth{position:absolute;inset:-12% 0;overflow:hidden;pointer-events:none} .afiwai-matrix-depth:before{ content:"AFIWAI 01001101 10110100 SYSTEM 00101101 11001010 WEB 01010110 00110011 PT 01100101 11010010 FR 00110110 10101100 CORE 01011001 00101110 DATA 10100101 01101010 AFIWAI 00111001 11010100 BUILD 01100110 10101001 FUTURE 01010101 00110010"; position:absolute;inset:-40% 0 0; color:rgba(34,190,255,.17);font:500 9px/2.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.32em;word-spacing:1.4em;writing-mode:vertical-rl;text-orientation:mixed; white-space:normal;overflow:hidden; text-shadow:0 0 9px rgba(0,178,255,.24); } .afiwai-matrix-depth.depth-back{opacity:.26;filter:blur(.7px);transform:translateY(calc(var(--afiwai-parallax) * -12px)) scale(.98)} .afiwai-matrix-depth.depth-back:before{animation:afiwaiCodeFall 18s linear infinite} .afiwai-matrix-depth.depth-mid{left:13%;right:13%;opacity:.48;transform:translateY(calc(var(--afiwai-parallax) * -25px))} .afiwai-matrix-depth.depth-mid:before{font-size:8px;line-height:2.6;color:rgba(46,209,255,.22);animation:afiwaiCodeFall 12s linear infinite reverse} .afiwai-matrix-depth.depth-front{left:27%;right:27%;opacity:.45;filter:blur(.15px);transform:translateY(calc(var(--afiwai-parallax) * -42px))} .afiwai-matrix-depth.depth-front:before{font-size:7px;line-height:3.1;color:rgba(100,226,255,.22);animation:afiwaiCodeFall 8.5s linear infinite} .afiwai-matrix-depth:after{ content:"";position:absolute;inset:0; background:radial-gradient(ellipse at center,transparent 0 27%,rgba(1,5,13,.18) 55%,#01050d 94%); } .afiwai-matrix-horizon{ position:absolute;left:3%;right:3%;top:52%;height:150px; transform:perspective(760px) rotateX(68deg);transform-origin:center top;opacity:.52; } .afiwai-matrix-horizon i{display:block;height:1px;margin:22px 0;background:linear-gradient(90deg,transparent,rgba(34,193,255,.22),rgba(67,217,255,.42),rgba(34,193,255,.22),transparent)} .afiwai-matrix-horizon:after{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,#52ddff,transparent);box-shadow:0 0 14px rgba(0,194,255,.5); animation:afiwaiHorizonScan 4.8s ease-in-out infinite; } .afiwai-matrix-network{position:absolute;inset:12% 7%;pointer-events:none} .afiwai-matrix-network .net{position:absolute;height:1px;transform-origin:left center;background:linear-gradient(90deg,transparent,rgba(42,205,255,.33),transparent)} .afiwai-matrix-network .n1{left:8%;top:45%;width:39%;transform:rotate(-8deg)} .afiwai-matrix-network .n2{left:48%;top:44%;width:41%;transform:rotate(8deg)} .afiwai-matrix-network .n3{left:20%;top:67%;width:60%;transform:rotate(0)} .afiwai-matrix-network .n4{left:31%;top:25%;width:38%;transform:rotate(0);opacity:.55} .afiwai-matrix-network .node{position:absolute;width:5px;height:5px;border-radius:50%;background:#52dcff;box-shadow:0 0 8px #35cfff,0 0 20px rgba(0,158,255,.5);animation:afiwaiNodePulse 2.7s ease-in-out infinite} .afiwai-matrix-network .node.a{left:13%;top:43%}.afiwai-matrix-network .node.b{left:36%;top:52%;animation-delay:.4s} .afiwai-matrix-network .node.c{left:50%;top:43%;animation-delay:.8s}.afiwai-matrix-network .node.d{left:72%;top:55%;animation-delay:1.2s} .afiwai-matrix-network .node.e{left:86%;top:43%;animation-delay:1.6s} .afiwai-matrix-terminal{ position:absolute;color:rgba(63,201,255,.28);font:600 7px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.04em;text-shadow:0 0 10px rgba(0,167,255,.12);white-space:nowrap; } .afiwai-matrix-terminal.term-a{left:7%;top:19%;transform:translateY(calc(var(--afiwai-parallax) * -18px))} .afiwai-matrix-terminal.term-b{right:7%;bottom:18%;text-align:right;transform:translateY(calc(var(--afiwai-parallax) * -30px))} .afiwai-matrix-orbit{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none} .afiwai-matrix-orbit.orbit-a{width:720px;height:230px;border:1px solid rgba(47,183,255,.10);animation:afiwaiOrbitPulse 5.5s ease-in-out infinite} .afiwai-matrix-orbit.orbit-b{width:510px;height:155px;border:1px dashed rgba(76,211,255,.12);animation:afiwaiOrbitPulse 5.5s ease-in-out infinite reverse} .afiwai-matrix-scan{ position:absolute;left:12%;right:12%;top:16%;height:2px; background:linear-gradient(90deg,transparent,rgba(62,219,255,.08),#5ce3ff,rgba(62,219,255,.08),transparent); box-shadow:0 0 12px rgba(0,199,255,.32);opacity:.5;animation:afiwaiMatrixScan 6.4s ease-in-out infinite; } .afiwai-matrix-signature{ position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);text-align:center;z-index:4; } .afiwai-matrix-signature b{display:block;color:#eefcff;font-size:24px;letter-spacing:.12em;font-weight:760;text-shadow:0 0 16px rgba(63,216,255,.42),0 0 44px rgba(0,119,255,.22)} .afiwai-matrix-signature span{display:block;margin-top:8px;color:rgba(83,213,255,.46);font:700 6px/1 ui-monospace,monospace;letter-spacing:.18em} .afiwai-matrix-signature:before{ content:"";position:absolute;left:50%;top:50%;width:180px;height:180px;transform:translate(-50%,-50%);border-radius:50%; background:radial-gradient(circle,rgba(0,173,255,.12),rgba(0,74,180,.035) 45%,transparent 70%); animation:afiwaiMatrixBreath 4.5s ease-in-out infinite;z-index:-1; } @keyframes afiwaiCodeFall{0%{transform:translateY(-16%)}100%{transform:translateY(24%)}} @keyframes afiwaiMatrixBreath{0%,100%{opacity:.45;transform:scale(.96)}50%{opacity:.9;transform:scale(1.04)}} @keyframes afiwaiHorizonScan{0%,100%{transform:translateY(0);opacity:.15}50%{transform:translateY(125px);opacity:.7}} @keyframes afiwaiNodePulse{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.4)}} @keyframes afiwaiOrbitPulse{0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(.97)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.03)}} @keyframes afiwaiMatrixScan{0%,100%{top:16%;opacity:0}15%{opacity:.55}70%{opacity:.38}85%,100%{top:80%;opacity:0}} @media(max-width:900px){ body.afiwai-md-home-premium .afiwai-home-manifesto{min-height:760px!important} .afiwai-home-tech-field.afiwai-matrix-field{height:450px!important} .afiwai-matrix-orbit.orbit-a{width:620px;height:205px}.afiwai-matrix-orbit.orbit-b{width:430px;height:140px} } @media(max-width:620px){ body.afiwai-md-home-premium .afiwai-home-manifesto{min-height:640px!important} .afiwai-home-tech-field.afiwai-matrix-field{height:350px!important;margin-top:45px!important} .afiwai-matrix-depth.depth-front{left:18%;right:18%} .afiwai-matrix-orbit.orbit-a{width:430px;height:150px}.afiwai-matrix-orbit.orbit-b{width:310px;height:105px} .afiwai-matrix-terminal{display:none} .afiwai-matrix-signature b{font-size:19px} .afiwai-matrix-horizon{left:-10%;right:-10%} } @media(prefers-reduced-motion:reduce){ .afiwai-matrix-field:before,.afiwai-matrix-depth:before,.afiwai-matrix-horizon:after, .afiwai-matrix-network .node,.afiwai-matrix-orbit,.afiwai-matrix-scan,.afiwai-matrix-signature:before{animation:none!important} } /* ========================================================= AFIWAI MODERN DESIGN 11.8.0 PREMIUM DISTRIBUTED LIVE CODE BACKGROUNDS ========================================================= */ body.afiwai-md-home-premium .afiwai-livecode-host{ position:relative!important; isolation:isolate; overflow:hidden; } body.afiwai-md-home-premium .afiwai-livecode-host > *:not(.afiwai-livecode-bg){ position:relative; z-index:2; } .afiwai-livecode-bg{ position:absolute; z-index:0; pointer-events:none; user-select:none; width:min(620px,52vw); min-height:240px; opacity:.34; color:#42cfff; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; text-shadow:0 0 12px rgba(0,171,255,.18); filter:blur(.05px); mix-blend-mode:screen; mask-image:radial-gradient(ellipse at 50% 50%,#000 0 43%,rgba(0,0,0,.72) 62%,transparent 88%); -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 0 43%,rgba(0,0,0,.72) 62%,transparent 88%); } .afiwai-livecode-pre{ margin:0; white-space:pre-wrap; color:rgba(63,205,255,.34); font:500 clamp(8px,.62vw,11px)/1.72 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; letter-spacing:.035em; } .afiwai-livecode-cursor{ display:inline-block; margin-left:3px; color:rgba(100,226,255,.60); font-size:10px; line-height:1; animation:afiwaiCodeCursor .85s steps(1,end) infinite; } .afiwai-livecode-bg:before{ content:""; position:absolute; left:-8%; right:-8%; top:50%; height:1px; background:linear-gradient(90deg,transparent,rgba(48,202,255,.11),transparent); box-shadow:0 0 16px rgba(0,165,255,.08); } .afiwai-livecode-bg:after{ content:""; position:absolute; inset:-20%; background: repeating-linear-gradient(180deg,transparent 0 17px,rgba(45,186,255,.012) 17px 18px); opacity:.55; } /* Different positions so the page feels alive rather than templated. */ .afiwai-livecode-bg.is-zone-1{ left:2.5%; bottom:7%; transform:rotate(-1.5deg); width:min(560px,46vw); opacity:.30; } .afiwai-livecode-bg.is-zone-2{ right:1%; top:12%; transform:rotate(1.2deg); opacity:.31; } .afiwai-livecode-bg.is-zone-3{ left:-1%; bottom:10%; transform:rotate(-2deg); width:min(590px,48vw); opacity:.26; } .afiwai-livecode-bg.is-zone-4{ right:3%; bottom:8%; transform:rotate(1.5deg); width:min(540px,44vw); opacity:.29; } .afiwai-livecode-bg.is-zone-5{ left:3%; top:13%; transform:rotate(-1deg); opacity:.30; } .afiwai-livecode-bg.is-zone-6{ right:4%; top:15%; transform:rotate(1deg); width:min(570px,46vw); opacity:.27; } /* Additional very faint glow behind active typing zones. */ .afiwai-livecode-host:has(.afiwai-livecode-bg):before{ content:""; position:absolute; z-index:0; width:620px; height:280px; right:-80px; top:10%; background:radial-gradient(ellipse,rgba(0,126,255,.035),transparent 70%); pointer-events:none; } @keyframes afiwaiCodeCursor{ 0%,48%{opacity:.2} 49%,100%{opacity:.9} } @media(max-width:900px){ .afiwai-livecode-bg{ width:min(520px,62vw); opacity:.23; } .afiwai-livecode-pre{ font-size:8px; } } @media(max-width:620px){ .afiwai-livecode-bg{ width:78vw; opacity:.16; min-height:170px; } .afiwai-livecode-bg.is-zone-1, .afiwai-livecode-bg.is-zone-3, .afiwai-livecode-bg.is-zone-5{ left:-14vw; } .afiwai-livecode-bg.is-zone-2, .afiwai-livecode-bg.is-zone-4, .afiwai-livecode-bg.is-zone-6{ right:-14vw; } .afiwai-livecode-pre{ font-size:6px; line-height:1.65; } } @media(prefers-reduced-motion:reduce){ .afiwai-livecode-cursor{ display:none!important; animation:none!important; } } /* AFIWAI 11.9 — live typing embedded in central Matrix field */ .afiwai-matrix-livecode{position:absolute;z-index:3;pointer-events:none;color:rgba(72,216,255,.42);text-shadow:0 0 10px rgba(0,190,255,.24);opacity:.72;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .afiwai-matrix-livecode pre{display:inline;margin:0;white-space:pre-wrap;color:inherit;font:600 7px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.035em} .afiwai-matrix-livecode span{color:rgba(112,232,255,.75);font:700 8px/1 ui-monospace,monospace;animation:afiwaiMatrixCursor .8s steps(1,end) infinite} .afiwai-matrix-livecode.live-a{left:13%;top:29%;transform:rotate(-2deg) translateY(calc(var(--afiwai-parallax) * -12px))} .afiwai-matrix-livecode.live-b{right:12%;top:33%;text-align:right;transform:rotate(1.5deg) translateY(calc(var(--afiwai-parallax) * -23px))} .afiwai-matrix-livecode.live-c{left:50%;bottom:12%;transform:translateX(-50%) translateY(calc(var(--afiwai-parallax) * -34px));opacity:.52} @keyframes afiwaiMatrixCursor{0%,48%{opacity:.15}49%,100%{opacity:1}} @media(max-width:760px){.afiwai-matrix-livecode.live-a{left:4%;top:25%}.afiwai-matrix-livecode.live-b{right:4%;top:31%}.afiwai-matrix-livecode.live-c{bottom:8%}.afiwai-matrix-livecode pre{font-size:5.5px}} @media(max-width:520px){.afiwai-matrix-livecode.live-b{display:none}.afiwai-matrix-livecode{opacity:.45}} @media(prefers-reduced-motion:reduce){.afiwai-matrix-livecode span{animation:none!important}} /* ========================================================= AFIWAI MODERN DESIGN 12.0 LIVE CODE VISIBILITY FIX ========================================================= */ body.afiwai-md-home-premium .afiwai-livecode-bg{ opacity:.58!important; z-index:1!important; mix-blend-mode:screen!important; filter:none!important; } body.afiwai-md-home-premium .afiwai-livecode-pre{ color:rgba(76,218,255,.58)!important; font-size:clamp(10px,.75vw,13px)!important; line-height:1.68!important; text-shadow: 0 0 8px rgba(0,198,255,.20), 0 0 18px rgba(0,115,255,.10)!important; } body.afiwai-md-home-premium .afiwai-livecode-cursor{ color:rgba(140,238,255,.90)!important; font-size:12px!important; text-shadow:0 0 10px rgba(0,207,255,.58)!important; } body.afiwai-md-home-premium .afiwai-livecode-host > *:not(.afiwai-livecode-bg){ position:relative; z-index:2!important; } /* Central Matrix writers: deliberately visible. */ body.afiwai-md-home-premium .afiwai-matrix-livecode{ opacity:.88!important; z-index:6!important; color:rgba(92,226,255,.78)!important; mix-blend-mode:screen; } body.afiwai-md-home-premium .afiwai-matrix-livecode pre{ color:inherit!important; font-size:clamp(9px,.72vw,12px)!important; line-height:1.65!important; font-weight:600!important; text-shadow: 0 0 8px rgba(0,204,255,.36), 0 0 22px rgba(0,110,255,.16)!important; } body.afiwai-md-home-premium .afiwai-matrix-livecode span{ color:#a4efff!important; font-size:12px!important; text-shadow:0 0 11px rgba(0,211,255,.72)!important; } body.afiwai-md-home-premium .afiwai-matrix-livecode.live-a{ left:9%!important; top:25%!important; } body.afiwai-md-home-premium .afiwai-matrix-livecode.live-b{ right:9%!important; top:28%!important; } body.afiwai-md-home-premium .afiwai-matrix-livecode.live-c{ bottom:8%!important; opacity:.76!important; } /* Slight black shadow behind glyphs, not a visible panel. */ body.afiwai-md-home-premium .afiwai-matrix-livecode pre, body.afiwai-md-home-premium .afiwai-livecode-pre{ filter:drop-shadow(0 1px 1px rgba(0,0,0,.78)); } @media(max-width:760px){ body.afiwai-md-home-premium .afiwai-livecode-bg{opacity:.38!important} body.afiwai-md-home-premium .afiwai-livecode-pre{font-size:8px!important} body.afiwai-md-home-premium .afiwai-matrix-livecode pre{font-size:7px!important} } @media(max-width:520px){ body.afiwai-md-home-premium .afiwai-matrix-livecode.live-a{left:3%!important} body.afiwai-md-home-premium .afiwai-matrix-livecode.live-b{display:none!important} } /* ========================================================= AFIWAI MODERN DESIGN 12.0.1 INÍCIO — wider hero copy block ========================================================= */ body.afiwai-md-home-premium .afiwai-home-hero .afiwai-md-hero-inner{ width:min(1240px,94vw)!important; } body.afiwai-md-home-premium .afiwai-home-hero h1{ max-width:1040px!important; } body.afiwai-md-home-premium .afiwai-home-hero p{ max-width:940px!important; } @media(max-width:900px){ body.afiwai-md-home-premium .afiwai-home-hero .afiwai-md-hero-inner{ width:min(96vw,1040px)!important; } body.afiwai-md-home-premium .afiwai-home-hero h1{ max-width:900px!important; } body.afiwai-md-home-premium .afiwai-home-hero p{ max-width:820px!important; } } @media(max-width:620px){ body.afiwai-md-home-premium .afiwai-home-hero .afiwai-md-hero-inner{ width:100%!important; } body.afiwai-md-home-premium .afiwai-home-hero h1, body.afiwai-md-home-premium .afiwai-home-hero p{ max-width:100%!important; } } /* ========================================================= AFIWAI MODERN DESIGN 12.0.2 INÍCIO — MAIN VISUAL EXACT 3:2 FRAME Source target: 1536 × 1024 (ratio 3:2) ========================================================= */ /* Give the main artwork enough breathing room without changing the page structure. */ body.afiwai-md-home-premium .afiwai-home-hero-visual{ width:min(1120px,96vw)!important; height:700px!important; margin-top:42px!important; } /* Exact frame matching the supplied/generated main artwork. */ body.afiwai-md-home-premium .afiwai-media--home-hero{ width:min(980px,90vw)!important; max-width:980px!important; aspect-ratio:3 / 2!important; height:auto!important; border-radius:24px!important; } /* No crop is required when the uploaded image is 3:2; keep safe cover behaviour for any future replacement using the same slot. */ body.afiwai-md-home-premium .afiwai-media--home-hero img{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center center!important; } /* Decorative lines adapt around the wider image instead of crossing it. */ body.afiwai-md-home-premium .afiwai-home-hero-lines{ width:24%!important; opacity:.72; } @media(max-width:1050px){ body.afiwai-md-home-premium .afiwai-home-hero-visual{ width:100%!important; height:620px!important; } body.afiwai-md-home-premium .afiwai-media--home-hero{ width:min(860px,90vw)!important; max-width:860px!important; aspect-ratio:3 / 2!important; } } @media(max-width:760px){ body.afiwai-md-home-premium .afiwai-home-hero-visual{ height:430px!important; margin-top:30px!important; } body.afiwai-md-home-premium .afiwai-media--home-hero{ width:min(620px,92vw)!important; max-width:620px!important; aspect-ratio:3 / 2!important; border-radius:18px!important; } } @media(max-width:520px){ body.afiwai-md-home-premium .afiwai-home-hero-visual{ height:330px!important; } body.afiwai-md-home-premium .afiwai-media--home-hero{ width:94vw!important; max-width:94vw!important; aspect-ratio:3 / 2!important; border-radius:16px!important; } } /* AFIWAI MODERN DESIGN 12.0.3 — DIGITAL SECTION PORTRAIT 4:5 */ body.afiwai-md-home-premium .afiwai-media--home-digital{ width:min(520px,42vw)!important;max-width:520px!important; aspect-ratio:4 / 5!important;height:auto!important;min-height:0!important; border-radius:24px!important;overflow:hidden!important; } body.afiwai-md-home-premium .afiwai-media--home-digital img{ display:block!important;width:100%!important;height:100%!important; aspect-ratio:4 / 5!important;object-fit:cover!important;object-position:center center!important; } body.afiwai-md-home-premium .afiwai-home-service-section.is-digital .afiwai-home-service-visual{ display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important; } @media(max-width:1050px){ body.afiwai-md-home-premium .afiwai-media--home-digital{ width:min(470px,46vw)!important;max-width:470px!important;aspect-ratio:4 / 5!important; } } @media(max-width:760px){ body.afiwai-md-home-premium .afiwai-media--home-digital{ width:min(460px,82vw)!important;max-width:460px!important;aspect-ratio:4 / 5!important; margin-inline:auto!important;border-radius:20px!important; } } @media(max-width:520px){ body.afiwai-md-home-premium .afiwai-media--home-digital{ width:min(390px,88vw)!important;max-width:390px!important;aspect-ratio:4 / 5!important;border-radius:18px!important; } } /* ========================================================= AFIWAI MODERN DESIGN 12.0.4 PREMIUM IMAGE SECTION — PORTRAIT 4:5 "Mostrar a empresa com imagens que inspiram confiança." ========================================================= */ body.afiwai-md-home-premium .afiwai-media--home-image{ width:min(520px,42vw)!important; max-width:520px!important; aspect-ratio:4 / 5!important; height:auto!important; min-height:0!important; border-radius:24px!important; overflow:hidden!important; } body.afiwai-md-home-premium .afiwai-media--home-image img{ display:block!important; width:100%!important; height:100%!important; aspect-ratio:4 / 5!important; object-fit:cover!important; object-position:center center!important; } body.afiwai-md-home-premium .afiwai-home-service-section.is-image .afiwai-home-service-visual{ display:flex!important; align-items:center!important; justify-content:center!important; min-width:0!important; } @media(max-width:1050px){ body.afiwai-md-home-premium .afiwai-media--home-image{ width:min(470px,46vw)!important; max-width:470px!important; aspect-ratio:4 / 5!important; } } @media(max-width:760px){ body.afiwai-md-home-premium .afiwai-media--home-image{ width:min(460px,82vw)!important; max-width:460px!important; aspect-ratio:4 / 5!important; margin-inline:auto!important; border-radius:20px!important; } } @media(max-width:520px){ body.afiwai-md-home-premium .afiwai-media--home-image{ width:min(390px,88vw)!important; max-width:390px!important; aspect-ratio:4 / 5!important; border-radius:18px!important; } } /* ========================================================= AFIWAI MODERN DESIGN 12.0.5 PREMIUM EUROPE SECTION — SQUARE VISUAL 1:1 "Uma ponte entre mercados e culturas." ========================================================= */ body.afiwai-md-home-premium .afiwai-media--home-europe{ width:min(600px,46vw)!important; max-width:600px!important; aspect-ratio:1 / 1!important; height:auto!important; min-height:0!important; border-radius:24px!important; overflow:hidden!important; } body.afiwai-md-home-premium .afiwai-media--home-europe img{ display:block!important; width:100%!important; height:100%!important; aspect-ratio:1 / 1!important; object-fit:cover!important; object-position:center center!important; } body.afiwai-md-home-premium .afiwai-home-service-section.is-europe .afiwai-home-service-visual{ display:flex!important; align-items:center!important; justify-content:center!important; min-width:0!important; } @media(max-width:1050px){ body.afiwai-md-home-premium .afiwai-media--home-europe{ width:min(540px,48vw)!important; max-width:540px!important; aspect-ratio:1 / 1!important; } } @media(max-width:760px){ body.afiwai-md-home-premium .afiwai-media--home-europe{ width:min(520px,86vw)!important; max-width:520px!important; aspect-ratio:1 / 1!important; margin-inline:auto!important; border-radius:20px!important; } } @media(max-width:520px){ body.afiwai-md-home-premium .afiwai-media--home-europe{ width:min(420px,90vw)!important; max-width:420px!important; aspect-ratio:1 / 1!important; border-radius:18px!important; } } /* AFIWAI Modern Design 12.4.0 — template physically integrated in post_content */ body.afiwai-modern-design-active .afiwai-md-hard-root{ width:100%; max-width:none; margin:0; } body.afiwai-modern-design-active .entry-content:has(> .afiwai-md-hard-root), body.afiwai-modern-design-active .et_builder_inner_content:has(> .afiwai-md-hard-root){ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; } /* ========================================================= AFIWAI Modern Design 12.6 — Adaptive Content Profiles The page purpose controls composition. Illustrations no longer dictate the layout of contact/legal content. ========================================================= */ /* CONTACT / FORM --------------------------------------------------- */ body.afiwai-md-profile-contact .afiwai-md-hero{ min-height:0!important; display:grid!important; grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr); gap:clamp(42px,5vw,90px); align-items:center; padding-top:clamp(130px,10vw,170px)!important; padding-bottom:clamp(72px,6vw,105px)!important; } body.afiwai-md-profile-contact .afiwai-md-hero:after{ width:min(28vw,430px); opacity:.55; } body.afiwai-md-profile-contact .afiwai-md-hero-inner{ width:100%!important; max-width:720px; } body.afiwai-md-profile-contact .afiwai-md-hero h1{ font-size:clamp(50px,5.8vw,78px)!important; line-height:.92!important; } body.afiwai-md-profile-contact .afiwai-media--hero{ display:none!important; } body.afiwai-md-profile-contact .afiwai-md-contact-stage{ position:relative; z-index:4; width:100%; min-width:0; padding:clamp(24px,2.4vw,38px); border:1px solid rgba(21,152,255,.34); border-radius:24px; background:linear-gradient(180deg,rgba(11,23,37,.97),rgba(7,16,26,.97)); box-shadow:0 24px 70px rgba(0,0,0,.28); } body.afiwai-md-profile-contact .afiwai-md-contact-stage:before{ content:"CONTACTO / FORM"; display:block; margin-bottom:18px; color:var(--af-blue); font:800 10px/1 ui-monospace,monospace; letter-spacing:.16em; } body.afiwai-md-profile-contact .afiwai-md-contact-stage form, body.afiwai-md-profile-contact .afiwai-md-contact-stage .wpcf7, body.afiwai-md-profile-contact .afiwai-md-contact-stage .wpforms-container, body.afiwai-md-profile-contact .afiwai-md-contact-stage .forminator-ui, body.afiwai-md-profile-contact .afiwai-md-contact-stage .gform_wrapper{ width:100%!important; max-width:none!important; margin:0!important; } body.afiwai-md-profile-contact .afiwai-md-form-source-empty{ display:none!important; } body.afiwai-md-profile-contact .afiwai-md-section{ padding-top:clamp(58px,5vw,82px)!important; padding-bottom:clamp(58px,5vw,82px)!important; } body.afiwai-md-profile-contact .afiwai-md-contact-hero--text-only{ grid-template-columns:minmax(0,900px)!important; } body.afiwai-md-profile-contact .afiwai-md-contact-hero--text-only .afiwai-md-hero-inner{ max-width:900px; } /* LEGAL / INSTITUTIONAL ------------------------------------------- */ body.afiwai-md-profile-legal .afiwai-md-hero{ min-height:0!important; justify-content:center!important; padding-top:clamp(125px,9vw,160px)!important; padding-bottom:clamp(65px,5vw,90px)!important; text-align:center; } body.afiwai-md-profile-legal .afiwai-md-hero-inner{ width:min(980px,90vw)!important; margin-inline:auto; } body.afiwai-md-profile-legal .afiwai-md-eyebrow{ justify-content:center; } body.afiwai-md-profile-legal .afiwai-md-hero h1, body.afiwai-md-profile-legal .afiwai-md-hero p{ margin-left:auto!important; margin-right:auto!important; } body.afiwai-md-profile-legal .afiwai-md-hero h1{ font-size:clamp(48px,5vw,72px)!important; line-height:.95!important; } body.afiwai-md-profile-legal .afiwai-media, body.afiwai-md-profile-legal .afiwai-tech-deck, body.afiwai-md-profile-legal .afiwai-md-wp-visual, body.afiwai-md-profile-legal .afiwai-md-conversion{ display:none!important; } body.afiwai-md-profile-legal .afiwai-md-section{ padding-top:clamp(54px,4.5vw,76px)!important; padding-bottom:clamp(54px,4.5vw,76px)!important; } body.afiwai-md-profile-legal .afiwai-md-section-shell{ grid-template-columns:minmax(220px,.42fr) minmax(0,1.58fr)!important; gap:clamp(36px,5vw,78px)!important; } body.afiwai-md-profile-legal .afiwai-md-section-shell>h2{ font-size:clamp(30px,3vw,48px)!important; } /* COMPACT / NO ILLUSTRATIONS ------------------------------------- */ body.afiwai-md-profile-compact .afiwai-media, body.afiwai-md-profile-compact .afiwai-tech-deck{ display:none!important; } body.afiwai-md-profile-compact .afiwai-md-hero{ min-height:0!important; padding-top:clamp(125px,9vw,160px)!important; padding-bottom:clamp(65px,5vw,90px)!important; } body.afiwai-md-profile-compact .afiwai-md-hero-inner{ width:min(980px,90vw)!important; } body.afiwai-md-profile-compact .afiwai-md-section{ padding-top:clamp(56px,4.5vw,80px)!important; padding-bottom:clamp(56px,4.5vw,80px)!important; } /* Responsive profile behavior ------------------------------------ */ @media(max-width:1050px){ body.afiwai-md-profile-contact .afiwai-md-hero{ grid-template-columns:1fr!important; gap:32px!important; } body.afiwai-md-profile-contact .afiwai-md-hero-inner, body.afiwai-md-profile-contact .afiwai-md-contact-stage{ width:100%!important; max-width:none!important; } } @media(max-width:700px){ body.afiwai-md-profile-contact .afiwai-md-hero{ padding-top:110px!important; padding-bottom:54px!important; } body.afiwai-md-profile-contact .afiwai-md-contact-stage{ padding:20px; border-radius:18px; } body.afiwai-md-profile-legal .afiwai-md-section-shell{ grid-template-columns:1fr!important; gap:20px!important; } body.afiwai-md-profile-legal .afiwai-md-section-shell>h2, body.afiwai-md-profile-legal .afiwai-md-section-shell>h2~*{ grid-column:1!important; } } /* ========================================================= AFIWAI Modern Design 12.6.1 — Legal Simple Pages concernées automatiquement : Informações legais, Política de privacidade, Política de cookies, Condições gerais de venda, Reclamações e litígios. ========================================================= */ body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-hero, body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section:first-of-type{ min-height:0!important; padding-top:clamp(120px,8vw,150px)!important; padding-bottom:clamp(46px,4vw,68px)!important; text-align:center!important; } body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-hero-inner, body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section:first-of-type .afiwai-md-section-shell{ width:min(980px,90vw)!important; max-width:980px!important; margin-inline:auto!important; } body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-hero h1, body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section:first-of-type h1{ max-width:900px!important; margin-left:auto!important; margin-right:auto!important; font-size:clamp(44px,4.6vw,68px)!important; line-height:.98!important; } body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-hero p, body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section:first-of-type p{ max-width:820px!important; margin-left:auto!important; margin-right:auto!important; } body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-eyebrow{ justify-content:center!important; } body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-media, body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-tech-deck, body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-wp-visual, body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-conversion, body.afiwai-md-profile-legal.afiwai-md-legal-simple [data-afiwai-media-slot], body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-data-transition, body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-background-screen{ display:none!important; } body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section{ padding-top:clamp(42px,3.6vw,60px)!important; padding-bottom:clamp(42px,3.6vw,60px)!important; } body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section-shell{ display:block!important; width:min(1120px,90vw)!important; max-width:1120px!important; margin-inline:auto!important; } body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section-shell>h2{ max-width:920px!important; margin:0 0 24px!important; font-size:clamp(28px,2.6vw,42px)!important; line-height:1.08!important; } body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section-shell>h3{ margin-top:32px!important; margin-bottom:14px!important; font-size:clamp(20px,1.7vw,27px)!important; } body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section-shell>p, body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section-shell>ul, body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section-shell>ol{ max-width:980px!important; } body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section-shell p, body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section-shell li{ line-height:1.72!important; } body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section.is-feature{ background:rgba(8,19,31,.55)!important; } body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section:before, body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section:after{ opacity:.18!important; } /* Les pages juridiques doivent rester confortables sur mobile. */ @media(max-width:700px){ body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-hero, body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section:first-of-type{ padding-top:105px!important; padding-bottom:38px!important; } body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section{ padding-top:34px!important; padding-bottom:34px!important; } body.afiwai-md-profile-legal.afiwai-md-legal-simple .afiwai-md-section-shell{ width:min(92vw,1120px)!important; } } /* ========================================================= AFIWAI Modern Design 12.7.1 — Contact / formulaire Objectif : texte à gauche, formulaire à droite, aucune illustration technique concurrente dans le premier écran. ========================================================= */ body.afiwai-md-profile-contact .afiwai-md-hero{ min-height:0!important; padding-top:clamp(120px,8vw,155px)!important; padding-bottom:clamp(64px,5vw,88px)!important; } body.afiwai-md-profile-contact .afiwai-md-hero-inner{ display:grid!important; grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr)!important; gap:clamp(44px,5vw,86px)!important; align-items:start!important; width:min(1540px,92vw)!important; max-width:1540px!important; margin-inline:auto!important; } body.afiwai-md-profile-contact .afiwai-md-hero-content{ grid-column:1!important; min-width:0!important; max-width:760px!important; } body.afiwai-md-profile-contact .afiwai-md-hero-content h1{ max-width:760px!important; } body.afiwai-md-profile-contact .afiwai-md-hero-content>p{ max-width:720px!important; } body.afiwai-md-profile-contact .afiwai-md-hero-form{ grid-column:2!important; grid-row:1!important; align-self:start!important; min-width:0!important; padding:clamp(24px,2.5vw,36px)!important; border:1px solid rgba(35,136,255,.48)!important; border-radius:22px!important; background: linear-gradient(180deg,rgba(10,28,45,.94),rgba(6,19,32,.92))!important; box-shadow: 0 24px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035)!important; } body.afiwai-md-profile-contact .afiwai-md-hero-form h2{ margin-top:12px!important; margin-bottom:12px!important; font-size:clamp(28px,2.3vw,40px)!important; line-height:1.05!important; } body.afiwai-md-profile-contact .afiwai-md-hero-form>p{ margin-bottom:22px!important; max-width:560px!important; } body.afiwai-md-profile-contact .afiwai-md-form-slot{ width:100%!important; } body.afiwai-md-profile-contact .afiwai-md-hero .afiwai-media, body.afiwai-md-profile-contact .afiwai-md-hero .afiwai-tech-deck, body.afiwai-md-profile-contact .afiwai-md-hero .afiwai-md-wp-visual, body.afiwai-md-profile-contact .afiwai-md-hero [data-afiwai-media-slot], body.afiwai-md-profile-contact .afiwai-md-hero .afiwai-md-background-screen, body.afiwai-md-profile-contact .afiwai-md-hero .afiwai-md-data-transition, body.afiwai-md-profile-contact .afiwai-md-hero .afiwai-md-hero-media{ display:none!important; } /* Le premier écran Contact ne doit pas forcer une colonne graphique automatique si un vrai bloc formulaire est présent. */ body.afiwai-md-profile-contact .afiwai-md-hero.has-afiwai-media{ grid-template-columns:none!important; } body.afiwai-md-profile-contact .afiwai-md-hero.has-afiwai-media .afiwai-md-hero-inner{ grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr)!important; } /* Formulaires WordPress génériques */ body.afiwai-md-profile-contact .afiwai-md-hero-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), body.afiwai-md-profile-contact .afiwai-md-hero-form select, body.afiwai-md-profile-contact .afiwai-md-hero-form textarea{ width:100%!important; max-width:none!important; min-height:48px!important; border:1px solid rgba(166,207,245,.34)!important; border-radius:10px!important; background:rgba(255,255,255,.045)!important; color:#f5f8ff!important; box-shadow:none!important; } body.afiwai-md-profile-contact .afiwai-md-hero-form textarea{ min-height:130px!important; } body.afiwai-md-profile-contact .afiwai-md-hero-form label{ color:#dfeaf5!important; } body.afiwai-md-profile-contact .afiwai-md-hero-form button, body.afiwai-md-profile-contact .afiwai-md-hero-form input[type="submit"]{ min-height:46px!important; border:1px solid #2388ff!important; border-radius:10px!important; background:#2388ff!important; color:#fff!important; font-weight:800!important; padding:0 20px!important; cursor:pointer!important; } body.afiwai-md-profile-contact .afiwai-md-hero-form button:hover, body.afiwai-md-profile-contact .afiwai-md-hero-form input[type="submit"]:hover{ filter:brightness(1.06)!important; } /* Contact direct : plus de gros boutons bleus automatiques. Les liens deviennent des lignes sobres, cohérentes et lisibles. */ body.afiwai-md-profile-contact .afiwai-md-section[data-index="03"] .afiwai-md-link, body.afiwai-md-profile-contact .afiwai-md-section[data-index="04"] .afiwai-md-link, body.afiwai-md-profile-contact .afiwai-md-section .afiwai-md-contact-link{ display:inline-flex!important; align-items:center!important; gap:8px!important; width:auto!important; min-height:0!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; color:#8fc8ff!important; font-size:inherit!important; font-weight:750!important; text-decoration:none!important; } body.afiwai-md-profile-contact .afiwai-md-section[data-index="03"] .afiwai-md-link:hover, body.afiwai-md-profile-contact .afiwai-md-section[data-index="04"] .afiwai-md-link:hover, body.afiwai-md-profile-contact .afiwai-md-section .afiwai-md-contact-link:hover{ color:#fff!important; text-decoration:underline!important; text-underline-offset:4px!important; } /* Variante recommandée pour les coordonnées en cartes fines. */ body.afiwai-md-profile-contact .afiwai-md-contact-direct{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px!important; max-width:760px!important; margin-top:26px!important; } body.afiwai-md-profile-contact .afiwai-md-contact-direct-item{ display:block!important; padding:18px 20px!important; border:1px solid rgba(35,136,255,.28)!important; border-radius:14px!important; background:rgba(255,255,255,.025)!important; } body.afiwai-md-profile-contact .afiwai-md-contact-direct-item span{ display:block!important; margin-bottom:6px!important; color:#718aa2!important; font-size:11px!important; font-weight:800!important; letter-spacing:.11em!important; text-transform:uppercase!important; } body.afiwai-md-profile-contact .afiwai-md-contact-direct-item a{ color:#eaf4ff!important; font-size:clamp(16px,1.35vw,20px)!important; font-weight:800!important; text-decoration:none!important; } body.afiwai-md-profile-contact .afiwai-md-contact-direct-item a:hover{ color:#8fc8ff!important; } @media(max-width:980px){ body.afiwai-md-profile-contact .afiwai-md-hero-inner{ grid-template-columns:1fr!important; gap:34px!important; } body.afiwai-md-profile-contact .afiwai-md-hero-content, body.afiwai-md-profile-contact .afiwai-md-hero-form{ grid-column:1!important; grid-row:auto!important; max-width:none!important; } } @media(max-width:700px){ body.afiwai-md-profile-contact .afiwai-md-hero{ padding-top:105px!important; padding-bottom:48px!important; } body.afiwai-md-profile-contact .afiwai-md-hero-inner{ width:min(92vw,1540px)!important; gap:28px!important; } body.afiwai-md-profile-contact .afiwai-md-hero-form{ padding:20px!important; border-radius:16px!important; } body.afiwai-md-profile-contact .afiwai-md-contact-direct{ grid-template-columns:1fr!important; } } /* ========================================================= AFIWAI Modern Design 12.7.2 — Contact layout hotfix Une seule grille : .afiwai-md-hero-inner ========================================================= */ body.afiwai-md-profile-contact .afiwai-md-hero{ display:block!important; grid-template-columns:none!important; gap:0!important; align-items:initial!important; } body.afiwai-md-profile-contact .afiwai-md-hero-inner{ display:grid!important; grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr)!important; gap:clamp(44px,5vw,82px)!important; align-items:start!important; width:min(1540px,92vw)!important; max-width:1540px!important; margin-inline:auto!important; } body.afiwai-md-profile-contact .afiwai-md-hero-content{ grid-column:1!important; grid-row:1!important; width:auto!important; max-width:760px!important; min-width:0!important; } body.afiwai-md-profile-contact .afiwai-md-hero-form{ display:block!important; grid-column:2!important; grid-row:1!important; width:100%!important; max-width:none!important; min-width:0!important; position:relative!important; z-index:5!important; padding:clamp(24px,2.3vw,34px)!important; border:1px solid rgba(35,136,255,.38)!important; border-radius:20px!important; background:linear-gradient(180deg,rgba(10,25,41,.96),rgba(7,18,30,.96))!important; box-shadow:0 22px 60px rgba(0,0,0,.24)!important; } body.afiwai-md-profile-contact .afiwai-md-hero-form[hidden]{ display:none!important; } body.afiwai-md-profile-contact .afiwai-md-contact-stage{ display:none!important; } /* Si aucun vrai formulaire n'existe, le texte récupère toute la largeur utile. */ body.afiwai-md-profile-contact .afiwai-md-contact-hero--text-only .afiwai-md-hero-inner{ grid-template-columns:minmax(0,900px)!important; justify-content:start!important; } body.afiwai-md-profile-contact .afiwai-md-contact-hero--text-only .afiwai-md-hero-content{ max-width:900px!important; } /* Le formulaire réellement rendu reste visible, quel que soit le plugin. */ body.afiwai-md-profile-contact .afiwai-md-hero-form form, body.afiwai-md-profile-contact .afiwai-md-hero-form .wpcf7, body.afiwai-md-profile-contact .afiwai-md-hero-form .wpforms-container, body.afiwai-md-profile-contact .afiwai-md-hero-form .forminator-ui, body.afiwai-md-profile-contact .afiwai-md-hero-form .gform_wrapper, body.afiwai-md-profile-contact .afiwai-md-hero-form .nf-form-cont{ display:block!important; visibility:visible!important; opacity:1!important; width:100%!important; max-width:none!important; } /* Aucun média automatique dans le Hero Contact. */ body.afiwai-md-profile-contact .afiwai-md-hero > .afiwai-media, body.afiwai-md-profile-contact .afiwai-md-hero .afiwai-media--hero, body.afiwai-md-profile-contact .afiwai-md-hero [data-afiwai-media-slot="hero"], body.afiwai-md-profile-contact .afiwai-md-hero .afiwai-tech-deck, body.afiwai-md-profile-contact .afiwai-md-hero .afiwai-md-background-screen{ display:none!important; } @media(max-width:980px){ body.afiwai-md-profile-contact .afiwai-md-hero-inner, body.afiwai-md-profile-contact .afiwai-md-contact-hero--text-only .afiwai-md-hero-inner{ grid-template-columns:1fr!important; gap:30px!important; } body.afiwai-md-profile-contact .afiwai-md-hero-content, body.afiwai-md-profile-contact .afiwai-md-hero-form{ grid-column:1!important; grid-row:auto!important; max-width:none!important; } } /* ========================================================= AFIWAI Modern Design 12.8.1 — Variations automatiques 6 assemblages pseudo-aléatoires, stables par page. Contact et Juridique gardent leurs règles spécialisées. ========================================================= */ /* VARIANTE 1 — Éditoriale asymétrique */ body.afiwai-md-variant-1:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-hero-inner{ grid-template-columns:minmax(0,1.25fr) minmax(300px,.65fr)!important; align-items:end!important; } body.afiwai-md-variant-1:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-hero h1{ max-width:980px!important; font-size:clamp(54px,6vw,102px)!important; letter-spacing:-.045em!important; } body.afiwai-md-variant-1:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-section:nth-of-type(odd) .afiwai-md-section-shell{ max-width:1120px!important; margin-left:7vw!important; margin-right:auto!important; } body.afiwai-md-variant-1:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-section:nth-of-type(even) .afiwai-md-section-shell{ max-width:1120px!important; margin-left:auto!important; margin-right:7vw!important; } /* VARIANTE 2 — Bento commercial */ body.afiwai-md-variant-2:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-hero-inner{ grid-template-columns:1fr!important; max-width:1320px!important; } body.afiwai-md-variant-2:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-hero-content{ max-width:980px!important; } body.afiwai-md-variant-2:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card-grid{ display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important; grid-auto-flow:dense!important; gap:16px!important; } body.afiwai-md-variant-2:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card:nth-child(6n+1){grid-column:span 7!important;min-height:300px!important} body.afiwai-md-variant-2:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card:nth-child(6n+2){grid-column:span 5!important} body.afiwai-md-variant-2:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card:nth-child(6n+3), body.afiwai-md-variant-2:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card:nth-child(6n+4), body.afiwai-md-variant-2:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card:nth-child(6n+5){grid-column:span 4!important} body.afiwai-md-variant-2:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card:nth-child(6n+6){grid-column:span 12!important} /* VARIANTE 3 — Immersive / grand rythme */ body.afiwai-md-variant-3:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-hero{ min-height:min(860px,86vh)!important; } body.afiwai-md-variant-3:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-hero-inner{ align-items:end!important; } body.afiwai-md-variant-3:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-hero h1{ font-size:clamp(58px,7vw,116px)!important; line-height:.9!important; } body.afiwai-md-variant-3:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-section{ padding-top:clamp(82px,7vw,138px)!important; padding-bottom:clamp(82px,7vw,138px)!important; } body.afiwai-md-variant-3:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-section:nth-of-type(even) .afiwai-md-section-shell{ max-width:1100px!important; margin-left:7vw!important; margin-right:auto!important; } body.afiwai-md-variant-3:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-section:nth-of-type(odd) .afiwai-md-section-shell{ max-width:1100px!important; margin-left:auto!important; margin-right:7vw!important; } /* VARIANTE 4 — Expertise / process */ body.afiwai-md-variant-4:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-hero-inner{ grid-template-columns:minmax(0,.86fr) minmax(420px,1.14fr)!important; } body.afiwai-md-variant-4:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-section{ border-top:1px solid rgba(86,154,214,.13)!important; } body.afiwai-md-variant-4:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-section[data-index] .afiwai-md-section-shell{ padding-left:clamp(42px,5vw,92px)!important; } body.afiwai-md-variant-4:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-section[data-index] .afiwai-md-section-shell:before{ content:attr(data-index); position:absolute; left:0; top:4px; color:#2388ff; font:800 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; } body.afiwai-md-variant-4:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card-grid{ grid-template-columns:1fr 1fr!important; } body.afiwai-md-variant-4:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-conversion{ display:grid!important; grid-template-columns:1fr!important; max-width:760px!important; } body.afiwai-md-variant-4:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-conversion span{ border-left:2px solid rgba(35,136,255,.34)!important; border-radius:0!important; padding:16px 0 16px 24px!important; background:transparent!important; } /* VARIANTE 5 — Catalogue */ body.afiwai-md-variant-5:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-hero-inner{ grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr)!important; } body.afiwai-md-variant-5:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card-grid{ grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:14px!important; } body.afiwai-md-variant-5:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card{ min-height:235px!important; border-radius:16px!important; } body.afiwai-md-variant-5:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-section:nth-of-type(3n){ background:linear-gradient(90deg,rgba(35,136,255,.06),transparent 46%)!important; } body.afiwai-md-variant-5:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-section:nth-of-type(3n+1) .afiwai-md-section-shell{ max-width:1380px!important; } /* VARIANTE 6 — Minimal contrasté */ body.afiwai-md-variant-6:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-hero{ min-height:0!important; padding-top:clamp(118px,8vw,148px)!important; padding-bottom:clamp(54px,5vw,78px)!important; } body.afiwai-md-variant-6:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-hero-inner{ grid-template-columns:minmax(0,1fr) minmax(330px,.72fr)!important; gap:clamp(36px,5vw,70px)!important; } body.afiwai-md-variant-6:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-section{ padding-top:48px!important; padding-bottom:48px!important; } body.afiwai-md-variant-6:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } body.afiwai-md-variant-6:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-section.is-feature{ background:rgba(11,27,44,.76)!important; } /* Responsive commun : toutes les variantes reviennent à une structure propre. */ @media(max-width:980px){ body[class*="afiwai-md-variant-"]:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-hero-inner{ grid-template-columns:1fr!important; } body.afiwai-md-variant-1:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-section:nth-of-type(n) .afiwai-md-section-shell, body.afiwai-md-variant-3:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-section:nth-of-type(n) .afiwai-md-section-shell{ margin-left:auto!important; margin-right:auto!important; } body.afiwai-md-variant-2:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card:nth-child(n), body.afiwai-md-variant-1:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card:nth-child(n){ grid-column:span 12!important; } body.afiwai-md-variant-5:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card-grid{ grid-template-columns:1fr 1fr!important; } } @media(max-width:700px){ body.afiwai-md-variant-4:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card-grid, body.afiwai-md-variant-5:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card-grid, body.afiwai-md-variant-6:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-md-card-grid{ grid-template-columns:1fr!important; } } /* ========================================================= AFIWAI Modern Design 12.8.2 — Vraies mises en page variées ========================================================= */ /* ---------- HERO : 6 architectures distinctes ---------- */ body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-editorial .afiwai-md-hero-inner{ grid-template-columns:minmax(0,1.35fr) minmax(260px,.55fr)!important; align-items:end!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-editorial .afiwai-md-hero-content{ max-width:980px!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-editorial h1{ font-size:clamp(58px,7vw,118px)!important; max-width:1050px!important; line-height:.9!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-centered .afiwai-md-hero-inner{ display:block!important; max-width:1120px!important; text-align:center!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-centered .afiwai-md-hero-content{ max-width:980px!important; margin-inline:auto!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-centered .afiwai-md-eyebrow{ justify-content:center!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-centered .afiwai-media--hero{ max-width:820px!important; margin:44px auto 0!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-immersive{ min-height:min(920px,92vh)!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-immersive .afiwai-md-hero-inner{ align-items:end!important; padding-bottom:5vh!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-immersive h1{ font-size:clamp(62px,7.5vw,126px)!important; line-height:.88!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-split .afiwai-md-hero-inner{ grid-template-columns:minmax(0,.86fr) minmax(420px,1.14fr)!important; gap:clamp(48px,6vw,100px)!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-split .afiwai-md-hero-content{ align-self:center!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-showcase .afiwai-md-hero-inner{ grid-template-columns:1fr!important; max-width:1400px!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-showcase .afiwai-md-hero-content{ max-width:920px!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-showcase .afiwai-media--hero{ width:min(1180px,92vw)!important; max-width:none!important; margin:52px 0 0 auto!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-compact{ min-height:0!important; padding-top:clamp(118px,8vw,150px)!important; padding-bottom:clamp(54px,4vw,72px)!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-hero-compact .afiwai-md-hero-inner{ grid-template-columns:minmax(0,1fr) minmax(300px,.65fr)!important; } /* ---------- SECTIONS : 6 architectures distinctes ---------- */ body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-wide .afiwai-md-section-shell{ width:min(1500px,92vw)!important; max-width:1500px!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-narrow .afiwai-md-section-shell{ width:min(860px,88vw)!important; max-width:860px!important; margin-inline:auto!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-narrow{ padding-top:clamp(58px,5vw,86px)!important; padding-bottom:clamp(58px,5vw,86px)!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-offset-left .afiwai-md-section-shell{ width:min(1080px,84vw)!important; max-width:1080px!important; margin-left:6vw!important; margin-right:auto!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-offset-right .afiwai-md-section-shell{ width:min(1080px,84vw)!important; max-width:1080px!important; margin-left:auto!important; margin-right:6vw!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-showcase{ padding-top:clamp(100px,9vw,160px)!important; padding-bottom:clamp(100px,9vw,160px)!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-showcase .afiwai-md-section-shell{ width:min(1360px,92vw)!important; max-width:1360px!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-showcase h2{ max-width:1050px!important; font-size:clamp(38px,4.2vw,68px)!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-split-left .afiwai-md-section-shell, body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-split-right .afiwai-md-section-shell{ display:grid!important; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important; gap:clamp(36px,5vw,82px)!important; align-items:start!important; width:min(1320px,92vw)!important; max-width:1320px!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-split-right .afiwai-md-section-shell{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-split-left .afiwai-md-card-grid, body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-split-right .afiwai-md-card-grid{ grid-column:1 / -1!important; } /* ---------- GRILLES DE CARTES : 5 rythmes ---------- */ body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-mosaic{ display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important; gap:16px!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-mosaic .afiwai-md-card:nth-child(5n+1){grid-column:span 7!important} body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-mosaic .afiwai-md-card:nth-child(5n+2){grid-column:span 5!important} body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-mosaic .afiwai-md-card:nth-child(5n+3){grid-column:span 4!important} body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-mosaic .afiwai-md-card:nth-child(5n+4){grid-column:span 4!important} body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-mosaic .afiwai-md-card:nth-child(5n+5){grid-column:span 4!important} body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-stagger .afiwai-md-card:nth-child(even){ transform:translateY(34px)!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-stagger{ margin-bottom:34px!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-rail{ display:flex!important; gap:18px!important; overflow-x:auto!important; scroll-snap-type:x proximity!important; padding-bottom:14px!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-rail .afiwai-md-card{ flex:0 0 min(390px,78vw)!important; scroll-snap-align:start!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-stack{ grid-template-columns:1fr!important; max-width:900px!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-stack .afiwai-md-card{ min-height:0!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-balanced{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } /* ---------- FEATURES : variation d'ambiance ---------- */ body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-feature-soft{ background:linear-gradient(180deg,rgba(35,136,255,.045),rgba(35,136,255,.012))!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-feature-panel .afiwai-md-section-shell{ padding:clamp(32px,4vw,58px)!important; border:1px solid rgba(35,136,255,.2)!important; border-radius:24px!important; background:rgba(13,27,43,.72)!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-feature-edge{ border-left:4px solid rgba(35,136,255,.7)!important; } /* ---------- RESPONSIVE ---------- */ @media(max-width:980px){ body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) [class*="afiwai-layout-hero-"] .afiwai-md-hero-inner{ grid-template-columns:1fr!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-offset-left .afiwai-md-section-shell, body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-offset-right .afiwai-md-section-shell{ width:min(92vw,1080px)!important; margin-inline:auto!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-split-left .afiwai-md-section-shell, body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-split-right .afiwai-md-section-shell{ grid-template-columns:1fr!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-mosaic .afiwai-md-card:nth-child(n){ grid-column:span 12!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-balanced{ grid-template-columns:1fr 1fr!important; } } @media(max-width:700px){ body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-stagger .afiwai-md-card:nth-child(even){ transform:none!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-balanced{ grid-template-columns:1fr!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-rail{ display:grid!important; grid-template-columns:1fr!important; overflow:visible!important; } body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-rail .afiwai-md-card{ flex:auto!important; } } /* ========================================================= AFIWAI Modern Design 12.9.0 — Intelligence de composition ========================================================= */ body:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-long-heading h2{ max-width:1080px!important; font-size:clamp(34px,3.8vw,62px)!important; line-height:1.02!important; letter-spacing:-.025em!important; } body.afiwai-md-variant-3:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-showcase{ min-height:520px!important; display:flex!important; align-items:center!important; } body.afiwai-md-variant-4:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-split-left .afiwai-md-section-shell, body.afiwai-md-variant-4:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-split-right .afiwai-md-section-shell{ border-top:1px solid rgba(35,136,255,.16)!important; padding-top:34px!important; } body.afiwai-md-variant-5:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-grid-mosaic .afiwai-md-card{ min-height:240px!important; } body.afiwai-md-variant-2:not(.afiwai-md-profile-contact):not(.afiwai-md-profile-legal) .afiwai-layout-section-wide .afiwai-md-card-grid{ margin-top:34px!important; }