/*
Theme Name: Arweb
Theme URI: https://arweb.it/
Description: Arweb child theme of Hello Elementor
Author: Arweb
Author URI: https://arweb.it/
Template: hello-elementor
Version: 3.0.0
Text Domain: arweb-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
/* ================================================================================================ */
/* VARIABILI DARK THEME ARWEB */
/* ================================================================================================ */
:root {
--aw-bg: #08142C;
--aw-bg-2: #0c1a36;
--aw-bg-card: rgba(255, 255, 255, 0.04);
--aw-bg-card-hover:rgba(255, 255, 255, 0.07);
--aw-border: rgba(255, 255, 255, 0.08);
--aw-border-hover: rgba(0, 191, 255, 0.4);
--aw-cyan: #00BFFFFC;
--aw-cyan-dark: #00b8d4;
--aw-cyan-glow: rgba(0, 191, 255, 0.15);
--aw-text: #ffffff;
--aw-white: #ffffff; /* alias di --aw-text, usato in vari blocchi CSS */
--aw-text-muted: rgba(255, 255, 255, 0.6);
--aw-text-faint: rgba(255, 255, 255, 0.35);
--aw-radius: 12px;
--aw-radius-sm: 8px;
--aw-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* Mapping variabili Elementor */
--e-global-color-primary: #00BFFFFC;
--e-global-color-secondary: #00b8d4;
--e-global-color-text: #ffffff;
--e-global-color-accent: #00BFFFFC;
}
/* ================================================================================================ */
/* RESET BASE */
/* ================================================================================================ */
body {
background-color: var(--aw-bg);
color: var(--aw-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ================================================================================================ */
/* FONT INTER — applicato globalmente con specificità alta per battere Elementor/Hello Elementor */
/* ================================================================================================ */
html body,
html body input,
html body button,
html body select,
html body textarea,
html body p,
html body span,
html body div,
html body a,
html body li,
html body label,
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .elementor-heading-title,
html body .elementor-widget-heading .elementor-heading-title,
html body .elementor-button,
html body .elementor-widget-text-editor,
html body .elementor-widget-text-editor *,
html body .elementor-widget-button .elementor-button,
html body .elementor-icon-list-text,
html body .elementor-tab-title,
html body .elementor-tab-content {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .elementor-heading-title {
letter-spacing: -0.02em;
}
/* ================================================================================================ */
/* TIPOGRAFIA LINK */
/* ================================================================================================ */
p a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 0;
line-height: 1;
transition: color .25s;
color: var(--aw-cyan);
}
p a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: var(--aw-cyan);
transition: background-color .25s ease-in-out, width .36s cubic-bezier(.51,.5,.07,.99);
backface-visibility: hidden;
}
p a:hover {
color: var(--aw-cyan-dark);
}
p a:hover::after {
animation: animate-underline-from-left .7s cubic-bezier(.45,.29,0,.82) forwards;
width: 100%;
}
/* ================================================================================================ */
/* BREADCRUMBS */
/* ================================================================================================ */
#breadcrumbs span.separator {
width: 4px;
height: 7px;
margin: 0 5px;
}
#breadcrumbs span.separator svg path {
stroke: rgba(255, 255, 255, 0.35);
}
#breadcrumbs a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 0;
line-height: 1;
transition: color .25s;
color: var(--aw-text-muted);
}
#breadcrumbs a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: rgba(255, 255, 255, 0.2);
transition: background-color .25s ease-in-out, width .36s cubic-bezier(.51,.5,.07,.99);
backface-visibility: hidden;
}
#breadcrumbs a:hover {
color: var(--aw-cyan);
}
#breadcrumbs a:hover::after {
animation: animate-underline-from-left .7s cubic-bezier(.45,.29,0,.82) forwards;
width: 100%;
background-color: var(--aw-cyan);
}
/* ================================================================================================ */
/* ANIMAZIONI */
/* ================================================================================================ */
@keyframes animate-underline-from-left {
0% { transform: scaleX(1); transform-origin: right; }
37% { transform: scaleX(0); transform-origin: right; }
38% { transform: scaleX(0); transform-origin: left; }
100% { transform: scaleX(1); transform-origin: left; }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 20px var(--aw-cyan-glow); }
50% { box-shadow: 0 0 40px rgba(0, 191, 255, 0.3); }
}
/* ================================================================================================ */
/* HEADER */
/* ================================================================================================ */
#arweb-navigation .elementor-widget-container {
background: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
}
.text-gradient {
color: #00D4FF;
background-image: linear-gradient(45deg, #00D4FF , #FFFFFF 70%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.text-glow,
.text-glow .elementor-widget-container {
overflow: visible !important;
}
.text-glow::before {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 60%;
left: 50%;
top: 40%;
transform: translateX(-50%);
background: radial-gradient(
ellipse 50% 50% at 50% 50%,
rgba(0, 180, 220, 0.30) 0%,
rgba(0, 100, 180, 0.12) 50%,
transparent 100%
);
pointer-events: none;
}
/* ================================================================================================ */
/* BOTTONI */
/* ================================================================================================ */
/* Bottone principale cyan */
.btn-primary-aw .elementor-button {
background: var(--aw-cyan) !important;
color: #030d1a !important;
font-weight: 700;
border-radius: 6px;
border: none !important;
transition: all var(--aw-transition);
}
.btn-primary-aw .elementor-button:hover {
background: var(--aw-cyan-dark) !important;
transform: translateY(-2px);
box-shadow: 0 8px 24px var(--aw-cyan-glow);
}
/* Bottone outline */
.btn-outline-aw .elementor-button {
background: transparent !important;
color: var(--aw-cyan) !important;
border: 1px solid var(--aw-cyan) !important;
border-radius: 6px;
transition: all var(--aw-transition);
}
.btn-outline-aw .elementor-button:hover {
background: var(--aw-cyan-glow) !important;
box-shadow: 0 0 20px var(--aw-cyan-glow);
}
/* Bottone freccia (btn-more) */
.btn-more .elementor-button-icon {
transition: transform 0.3s;
}
.btn-more:hover .elementor-button-icon {
transform: translateX(5px);
}
/* Bottone underline */
.button-underline .elementor-button {
position: relative;
border-radius: 0;
background: transparent !important;
color: var(--aw-text) !important;
}
.button-underline .elementor-button .elementor-button-text {
transition: color .25s;
}
.button-underline .elementor-button::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: var(--aw-border);
transition: background-color .25s ease-in-out, width .36s cubic-bezier(.51,.5,.07,.99);
backface-visibility: hidden;
}
.button-underline .elementor-button:hover {
color: var(--aw-cyan) !important;
}
.button-underline .elementor-button:hover::after {
animation: animate-underline-from-left .7s cubic-bezier(.45,.29,0,.82) forwards;
background-color: var(--aw-cyan);
width: 100%;
}
.bg-glass {
background: rgba(6, 14, 37, 0.8);
-webkit-backdrop-filter: blur(10px) saturate(80%);
backdrop-filter: blur(10px) saturate(80%);
}
/* ================================================================================================ */
/* CARD / BOX */
/* ================================================================================================ */
.box-card-dark {
background: var(--aw-bg-card);
border: 1px solid var(--aw-border);
border-radius: var(--aw-radius);
transition: all var(--aw-transition);
}
.box-card-dark:hover {
background: var(--aw-bg-card-hover);
border-color: var(--aw-border-hover);
box-shadow: 0 0 30px var(--aw-cyan-glow);
}
/* Box invertito (su sfondo chiaro) */
.box-inverted p a {
color: #030d1a;
}
.box-inverted p a::after {
background-color: #030d1a;
}
/* ================================================================================================ */
/* UTILITY LAYOUT */
/* ================================================================================================ */
.hero-full-height {
min-height: 100vh !important;
}
.wrapper-container {
padding-left: 30px !important;
padding-right: 30px !important;
}
@media (min-width: 768px) and (max-width: 1024px) {
.wrapper-container {
padding-left: 25px !important;
padding-right: 25px !important;
}
}
@media (max-width: 767px) {
.wrapper-container {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
.dialog-close-button,
.dialog-lightbox-close-button {
position: fixed !important;
top: 30px !important;
right: 30px !important;
}
/* ================================================================================================ */
/* TABS ELEMENTOR */
/* ================================================================================================ */
.e-n-tabs-heading {
z-index: 1;
}
.elementor-widget-n-tabs .e-n-tabs-content {
transform: translateY(-1px);
}
/* ================================================================================================ */
/* HOTSPOT */
/* ================================================================================================ */
.e-hotspot__icon svg g {
transform: scale(0.9);
transform-origin: center;
}
/* ================================================================================================ */
/* COUNTER */
/* ================================================================================================ */
.elementor-counter-title {
text-align: center;
display: block;
}
/* ================================================================================================ */
/* FORM CF7 — DARK THEME */
/* ================================================================================================ */
.wpcf7-response-output {
border: 1px solid var(--aw-border) !important;
padding: 15px 20px !important;
font-size: 16px;
color: var(--aw-text-muted);
margin: 20px 0 0 0 !important;
border-radius: var(--aw-radius-sm);
}
/* Grid layout form */
.wpcf7-form .form-wrapper-1-col,
.wpcf7-form .form-wrapper-2-col,
.wpcf7-form .form-wrapper-3-col,
.wpcf7-form .form-wrapper-4-col {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -12px;
}
.wpcf7-form .form-wrapper-1-col .form-item { width: 100%; padding: 0 12px; margin: 0 0 24px 0; position: relative; }
.wpcf7-form .form-wrapper-2-col .form-item { width: 50%; padding: 0 12px; margin: 0 0 24px 0; position: relative; }
.wpcf7-form .form-wrapper-3-col .form-item { width: 33.33%; padding: 0 12px; margin: 0 0 20px 0; position: relative; }
.wpcf7-form .form-wrapper-4-col .form-item { width: 25%; padding: 0 12px; margin: 0 0 20px 0; position: relative; }
.wpcf7-form .form-wrapper-1-col .form-item p,
.wpcf7-form .form-wrapper-2-col .form-item p,
.wpcf7-form .form-wrapper-3-col .form-item p,
.wpcf7-form .form-wrapper-4-col .form-item p { margin: 0; }
@media (max-width: 767px) {
.wpcf7-form .form-wrapper-2-col .form-item,
.wpcf7-form .form-wrapper-3-col .form-item,
.wpcf7-form .form-wrapper-4-col .form-item { width: 100%; }
}
/* Label dark */
.wpcf7-form .form-wrapper-1-col .form-item label,
.wpcf7-form .form-wrapper-2-col .form-item label,
.wpcf7-form .form-wrapper-3-col .form-item label,
.wpcf7-form .form-wrapper-4-col .form-item label {
color: var(--aw-text-muted);
font-size: 13px;
margin-bottom: 8px;
display: block;
line-height: 1;
font-weight: 500;
pointer-events: none;
transition: all 0.2s ease;
}
.wpcf7-form .form-wrapper-1-col .form-item label::after,
.wpcf7-form .form-wrapper-2-col .form-item label::after,
.wpcf7-form .form-wrapper-3-col .form-item label::after,
.wpcf7-form .form-wrapper-4-col .form-item label::after { display: none !important; }
/* Input dark */
.wpcf7-form .form-wrapper-1-col .form-item input,
.wpcf7-form .form-wrapper-2-col .form-item input,
.wpcf7-form .form-wrapper-3-col .form-item input,
.wpcf7-form .form-wrapper-4-col .form-item input {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid var(--aw-border) !important;
border-radius: var(--aw-radius-sm);
padding: 0 16px !important;
width: 100%;
font-size: 15px;
height: 50px;
line-height: 50px;
color: var(--aw-text) !important;
outline: none;
box-shadow: none;
transition: all 0.3s ease;
}
.wpcf7-form .form-wrapper-1-col .form-item input:focus,
.wpcf7-form .form-wrapper-2-col .form-item input:focus,
.wpcf7-form .form-wrapper-3-col .form-item input:focus,
.wpcf7-form .form-wrapper-4-col .form-item input:focus {
border-color: var(--aw-cyan) !important;
background: rgba(0, 191, 255, 0.05) !important;
box-shadow: 0 0 0 3px var(--aw-cyan-glow);
}
.wpcf7-form .form-wrapper-1-col .form-item input::placeholder,
.wpcf7-form .form-wrapper-2-col .form-item input::placeholder,
.wpcf7-form .form-wrapper-3-col .form-item input::placeholder,
.wpcf7-form .form-wrapper-4-col .form-item input::placeholder {
color: var(--aw-text-faint);
}
.wpcf7-form .form-wrapper-1-col .form-item input.error,
.wpcf7-form .form-wrapper-2-col .form-item input.error,
.wpcf7-form .form-wrapper-3-col .form-item input.error,
.wpcf7-form .form-wrapper-4-col .form-item input.error {
border-color: #ff4d4d !important;
}
/* Full width override */
.wpcf7-form .form-wrapper-1-col.form-wrap-fields-full .form-item,
.wpcf7-form .form-wrapper-2-col.form-wrap-fields-full .form-item,
.wpcf7-form .form-wrapper-3-col.form-wrap-fields-full .form-item,
.wpcf7-form .form-wrapper-4-col.form-wrap-fields-full .form-item { width: 100%; }
/* -------------------------------- Textarea ----------------------------------- */
.wpcf7-form .form-item-textarea {
position: relative;
width: 100%;
padding: 0;
margin: 0;
}
.wpcf7-form .form-item-textarea label {
position: absolute;
color: var(--aw-text-faint);
font-size: 15px;
top: 16px;
left: 0;
pointer-events: none;
transition: all 0.2s ease;
}
.wpcf7-form .form-item-textarea label::after { display: none !important; }
.wpcf7-form .form-item-textarea textarea {
background: rgba(255, 255, 255, 0.05) !important;
border: none;
border-bottom: 1px solid var(--aw-border);
padding: 16px 0 !important;
width: 100%;
font-size: 15px;
color: var(--aw-text) !important;
outline: none;
box-shadow: none;
resize: vertical;
transition: all 0.3s ease;
border-radius: 0;
min-height: 120px;
}
.wpcf7-form .form-item-textarea textarea:focus,
.wpcf7-form .form-item-textarea textarea:not(:placeholder-shown) {
border-color: var(--aw-cyan);
box-shadow: none;
}
.wpcf7-form .form-item-textarea textarea:focus ~ label,
.wpcf7-form .form-item-textarea textarea:not(:placeholder-shown) ~ label {
transform: translateY(-22px);
font-size: 11px;
color: var(--aw-cyan);
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* -------------------------------- Select ----------------------------------- */
.wpcf7-form .select-holder {
position: relative;
margin: 0 0 28px 0;
}
.wpcf7-form .select-holder label {
color: var(--aw-text-muted);
font-size: 13px;
margin-bottom: 8px;
display: block;
letter-spacing: 0.03em;
text-transform: uppercase;
font-weight: 500;
}
.wpcf7-form .select-holder label::after { display: none !important; }
.wpcf7-form .select-holder .select-inner {
position: relative;
}
.wpcf7-form .select-holder .select-inner select {
appearance: none;
-webkit-appearance: none;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid var(--aw-border);
border-radius: var(--aw-radius-sm);
padding: 0 50px 0 16px !important;
width: 100%;
font-size: 15px;
height: 50px;
line-height: 50px;
color: var(--aw-text) !important;
cursor: pointer;
outline: none;
box-shadow: none;
transition: all 0.3s ease;
}
.wpcf7-form .select-holder .select-inner select:focus {
border-color: var(--aw-cyan);
box-shadow: 0 0 0 3px var(--aw-cyan-glow);
outline: 0;
}
.wpcf7-form .select-holder .select-inner select option {
background-color: var(--aw-bg-2);
color: var(--aw-text);
padding: 10px;
font-size: 15px;
}
.wpcf7-form .select-holder .select-inner::after {
content: "";
position: absolute;
pointer-events: none;
right: 0;
top: 0;
height: 50px;
width: 50px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: 50% 50%;
}
.wpcf7-form .select-holder .select-inner select.error {
border-color: #ff4d4d;
}
/* -------------------------------- Checkbox dark ----------------------------------- */
@supports (-webkit-appearance: none) {
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
appearance: none;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.25);
display: inline-block;
height: 18px !important;
width: 18px !important;
margin-right: 0;
outline: none;
padding: 0;
position: relative;
top: 0;
border-radius: 3px;
transition: all 0.2s ease;
flex-shrink: 0;
}
.wpcf7-form input[type="radio"] {
border-radius: 50%;
}
.wpcf7-form input[type="checkbox"]:hover,
.wpcf7-form input[type="radio"]:hover {
border-color: var(--aw-cyan);
cursor: pointer;
}
.wpcf7-form input[type="checkbox"]:checked,
.wpcf7-form input[type="radio"]:checked {
background-color: var(--aw-cyan);
border-color: var(--aw-cyan);
background-size: 60% auto !important;
background-position: 50% 50% !important;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath fill='none' stroke='%23030d1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 4l3.5 3.5L11 1'/%3E%3C/svg%3E");
}
.wpcf7-form input[type="checkbox"]:disabled,
.wpcf7-form input[type="radio"]:disabled {
opacity: 0.4;
cursor: not-allowed;
}
}
/* -------------------------------- Privacy / consent ----------------------------------- */
.wpcf7-form .form-consent {
margin-bottom: 20px;
}
.wpcf7-form .form-consent .wpcf7-list-item {
margin: 0;
padding: 0;
}
.wpcf7-form .form-consent label {
font-size: 14px;
color: var(--aw-text-muted);
display: flex;
gap: 10px;
align-items: flex-start;
cursor: pointer;
}
.wpcf7-form .form-consent label span {
flex: 1;
}
.wpcf7-form .form-consent label a {
color: var(--aw-cyan);
text-decoration: underline;
}
.wpcf7-form .privacy {
margin: 0 0 20px 0;
font-size: 14px;
color: var(--aw-text-muted);
}
.wpcf7-form .privacy a {
color: var(--aw-cyan);
text-decoration: underline;
}
/* -------------------------------- Box container form ----------------------------------- */
.wpcf7-form .fields-custom {
padding: 40px;
background: var(--aw-bg-card);
border-radius: var(--aw-radius);
border: 1px solid var(--aw-border);
}
@media (max-width: 1023px) {
.wpcf7-form .fields-custom { padding: 28px; }
}
@media (max-width: 767px) {
.wpcf7-form .fields-custom { padding: 20px; }
}
/* -------------------------------- Upload file ----------------------------------- */
.wpcf7-form input[type=file]::file-selector-button {
border: 1px solid var(--aw-border);
padding: 5px 12px !important;
height: auto !important;
border-radius: 4px;
color: var(--aw-text);
background-color: var(--aw-bg-card);
transition: 0.3s;
font-size: 13px;
margin-right: 10px;
cursor: pointer;
}
.wpcf7-form input[type=file]::file-selector-button:hover {
background-color: var(--aw-cyan-glow);
border-color: var(--aw-cyan);
}
.wpcf7-form .file-holder {
position: relative;
}
.wpcf7-form .file-holder::after {
content: "";
height: 50px;
line-height: 50px;
position: absolute;
pointer-events: none;
right: 0;
top: 0;
width: 50px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: 50% 50%;
}
/* ================================================================================================ */
/* WOOCOMMERCE (base) */
/* ================================================================================================ */
.add_to_cart_button {
display: none !important;
}
.woocommerce-Price-amount {
color: var(--aw-cyan);
}
.woocommerce-breadcrumb a {
font-weight: 600;
color: var(--aw-cyan);
}
/* === ARWEB SERVIZIO PACK START === */
/* ============================================================
ARWEB - SINGLE SERVIZIO (e pattern riusabili)
============================================================ */
/* ============================================================
1. HERO SERVIZIO
============================================================ */
/* Wrapper boxed di default per tutte le .container del single-servizio
(le sezioni con grid override mantengono il grid, ma ereditano il max-width) */
.aw-single-servizio .container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.aw-serv-hero {
position: relative;
padding: 200px 0 10px;
overflow-x: clip;
}
.aw-serv-hero .container {
display: flex;
justify-content: space-between;
gap: 60px;
align-items: center;
}
.divider-bottom {
position: relative;
}
.divider-bottom::before {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 1px;
background: url('./imgs/service-divider.svg') no-repeat center center;
opacity: 0.5;
pointer-events: none;
}
.divider-top {
position: relative;
}
.divider-top::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 1px;
background: url('./imgs/service-divider.svg') no-repeat center center;
opacity: 0.5;
pointer-events: none;
}
.divider-top-bottom {
position: relative;
}
.divider-top-bottom::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 1px;
background: url('./imgs/service-divider.svg') no-repeat center center;
opacity: 0.5;
pointer-events: none;
}
.divider-top-bottom::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 1px;
background: url('./imgs/service-divider.svg') no-repeat center center;
opacity: 0.5;
pointer-events: none;
}
.aw-serv-hero__content {
max-width: 700px;
}
.aw-serv-hero__eyebow {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--aw-cyan);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 40px;
}
.aw-serv-hero__eyebow::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--aw-cyan);
}
.aw-serv-hero__logo {
margin-bottom: 28px;
line-height: 0;
}
.aw-serv-hero__logo img {
max-width: 700px;
width: auto;
height: auto;
max-height: 110px;
display: block;
}
.aw-serv-hero__label {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--aw-cyan);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 24px;
}
.aw-serv-hero__label::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--aw-cyan);
}
.aw-serv-hero__title {
font-size: clamp(36px, 5vw, 64px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--aw-white);
margin: 0 0 24px;
}
.aw-serv-hero__title span { color: var(--aw-cyan); display: block; }
.aw-serv-hero__subtitle {
font-size: 30px;
font-weight: 800;
line-height: 1.4;
color: var(--aw-white);
}
.aw-serv-hero__subtitle span { color: var(--aw-cyan); }
.aw-serv-hero__illustration img {
width: 100%;
height: auto;
max-width: 520px;
margin-left: auto;
display: block;
}
@media (max-width: 900px) {
.aw-serv-hero .container { grid-template-columns: 1fr; gap: 32px; }
.aw-serv-hero__illustration img { max-width: 320px; margin: 0 auto; }
}
/* ============================================================
2. INTRO 2 COLONNE (immagine + testo)
============================================================ */
.aw-serv-intro { padding: 90px 0; }
.aw-serv-intro .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: center;
}
.aw-serv-intro__image {
border: 1px solid #70707070;
border-radius: 24px;
overflow: hidden;
}
.aw-serv-intro__image img {
width: 100%;
height: auto;
display: block;
}
.aw-serv-intro__title {
font-size: clamp(28px, 3vw, 36px);
font-weight: 700;
line-height: 1.2;
color: var(--aw-white);
margin: 0 0 35px;
position: relative;
}
.aw-serv-intro__title span { color: var(--aw-cyan); }
.aw-serv-intro__text {
color: var(--aw-text);
font-size: 16px;
line-height: 1.7;
}
.aw-serv-intro__text p { margin-bottom: 14px; }
@media (max-width: 900px) {
.aw-serv-intro .container { grid-template-columns: 1fr; gap: 32px; }
}
/* ============================================================
3. PROBLEMA
============================================================ */
.aw-serv-problem { padding: 60px 0; }
.aw-serv-problem .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: center;
}
.aw-serv-problem-title {
font-size: clamp(28px, 3vw, 40px);
font-weight: 700;
line-height: 1.2;
color: var(--aw-white);
margin: 0 0 24px;
position: relative;
}
.aw-serv-problem-title span { color: var(--aw-cyan); }
.aw-serv-problem-text {
color: var(--aw-text);
font-size: 16px;
line-height: 1.7;
}
.aw-serv-problem-text p { margin-bottom: 14px; }
.aw-serv-problem-text p strong {
color: var(--aw-cyan);
font-weight: 600;
}
/* ============================================================
3. SOLUZIONE
============================================================ */
.elementor-kit-12 h3 {
text-decoration: none !important;
}
.aw-serv-solution { padding: 60px 0; }
.aw-serv-block-title {
font-size: clamp(28px, 3vw, 40px);
font-weight: 700;
line-height: 1.2;
color: var(--aw-white);
margin: 0 0 24px;
position: relative;
}
.aw-serv-block-title span { color: var(--aw-cyan); }
.aw-serv-block-text {
color: var(--aw-text);
font-size: 16px;
line-height: 1.7;
}
.aw-serv-block-text p { margin-bottom: 14px; }
.aw-serv-cols-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
margin-top: 48px;
}
@media (max-width: 900px) {
.aw-serv-cols-2 { grid-template-columns: 1fr; gap: 32px; }
}
/* ============================================================
4. LISTA "COSA PUOI INCLUDERE"
============================================================ */
.aw-serv-includes { list-style: none; margin: 0; padding: 0; }
.aw-serv-includes li {
position: relative;
padding-left: 32px;
margin-bottom: 16px;
color: var(--aw-text);
font-size: 15px;
line-height: 1.6;
font-weight: 400;
}
.aw-serv-includes li::before {
content: '';
position: absolute;
left: 0; top: 4px;
width: 18px; height: 18px;
background: var(--aw-cyan);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.aw-serv-includes strong {
color: var(--aw-white);
font-weight: 600;
display: block;
margin-bottom: 2px;
}
/* ============================================================
5. BANNER CTA CENTRALE
============================================================ */
.aw-serv-banner { padding: 40px 0; }
.aw-serv-banner__inner {
background: linear-gradient(135deg, rgba(0,191,255,0.08), rgba(0,191,255,0.02));
border: 1px solid var(--aw-border);
border-radius: var(--aw-radius, 16px);
padding: 40px 48px;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 32px;
position: relative;
overflow: hidden;
}
.aw-serv-banner__title {
font-size: 22px;
font-weight: 700;
color: var(--aw-white);
margin: 0 0 6px;
}
.aw-serv-banner__text {
color: var(--aw-text-muted);
font-size: 15px;
margin: 0;
}
.aw-serv-banner__cta .btn {
background: var(--aw-cyan);
color: var(--aw-bg);
padding: 14px 28px;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: transform .2s ease, box-shadow .2s ease;
}
.aw-serv-banner__cta .btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0,191,255,0.25);
}
@media (max-width: 700px) {
.aw-serv-banner__inner { grid-template-columns: 1fr; text-align: center; padding: 28px; }
}
/* ============================================================
6. RISULTATO - 4 COLONNE
============================================================ */
.aw-serv-risultato { padding: 60px 0; }
.aw-serv-risultato__cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
margin-top: 48px;
}
.aw-serv-risultato__col ul { list-style: none; margin: 0; padding: 0; }
.aw-serv-risultato__col li {
position: relative;
padding-left: 28px;
margin-bottom: 14px;
color: var(--aw-text-muted);
font-size: 15px;
line-height: 1.5;
}
.aw-serv-risultato__col li::before {
content: '';
position: absolute;
left: 0; top: 5px;
width: 16px; height: 16px;
background: var(--aw-cyan);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
@media (max-width: 1100px) {
.aw-serv-risultato__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.aw-serv-risultato__cols { grid-template-columns: 1fr; }
}
/* ============================================================
7. CARDS (PATTERN RIUSABILE OVUNQUE)
============================================================ */
.aw-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.aw-card {
background: var(--aw-bg-card);
border: 1px solid var(--aw-border);
border-radius: var(--aw-radius, 12px);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .25s ease, border-color .25s ease;
text-decoration: none;
}
.aw-card:hover {
transform: translateY(-4px);
border-color: rgba(0,191,255,0.4);
}
.aw-card__image {
aspect-ratio: 16 / 10;
overflow: hidden;
position: relative;
}
.aw-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.aw-card:hover .aw-card__image img { transform: scale(1.05); }
.aw-card__body {
padding: 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.aw-card__tag {
display: inline-flex;
align-self: flex-start;
padding: 4px 12px;
border-radius: 999px;
background: rgba(0,191,255,0.1);
color: var(--aw-cyan);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 12px;
}
.aw-card__title {
font-size: 18px;
font-weight: 700;
color: var(--aw-white);
line-height: 1.3;
margin: 0 0 12px;
}
.aw-card__excerpt {
color: var(--aw-text-muted);
font-size: 14px;
line-height: 1.6;
margin: 0 0 20px;
flex: 1;
}
.aw-card__link {
color: var(--aw-cyan);
font-size: 14px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap .2s ease;
}
.aw-card__link:hover { gap: 10px; }
@media (max-width: 900px) {
.aw-cards-grid { grid-template-columns: 1fr; }
}
/* ============================================================
8. FAQ ACCORDION
============================================================ */
.aw-faq { margin-top: 40px; }
/* Item chiuso: separatore sottile sotto. L'ultima FAQ non lo prende. */
.aw-faq__item {
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
transition: background .3s ease, border-color .3s ease;
}
.aw-faq__item:last-child {
border-bottom: none;
}
/* Layout grid: num sopra a q (colonna sx), icon a destra (centrata sull'altezza) */
.aw-faq__head {
width: 100%;
background: none;
border: none;
padding: 32px 28px;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"num icon"
"q icon";
column-gap: 28px;
row-gap: 10px;
cursor: pointer;
color: var(--aw-white);
text-align: left;
}
/* Numero "01." cyan, più grande (era 12px) */
.aw-faq__num {
grid-area: num;
color: var(--aw-cyan);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1;
}
.aw-faq__q {
grid-area: q;
font-size: clamp(16px, 1.4vw, 18px);
font-weight: 700;
line-height: 1.4;
transition: color .25s ease;
}
/* Icona: cerchio con SVG dentro, centrata verticalmente sull'intera area num+q */
.aw-faq__icon {
grid-area: icon;
align-self: center;
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.12);
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 14px auto;
flex-shrink: 0;
transition: background-color .25s ease, border-color .25s ease;
}
/* Hover: numero/domanda virano leggermente cyan */
.aw-faq__head:hover .aw-faq__q { color: var(--aw-cyan); }
.aw-faq__head:hover .aw-faq__icon { border-color: var(--aw-cyan); }
/* ============================================================
Stato APERTO — card scura, numero/domanda cyan, freccia ↓
============================================================ */
.aw-faq__item.is-open {
background: var(--aw-bg-2);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 24px;
margin: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.aw-faq__item.is-open .aw-faq__q {
color: var(--aw-cyan);
}
.aw-faq__item.is-open .aw-faq__icon {
border-color: rgba(0, 191, 255, 0.4);
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px auto;
}
/* Body collassabile */
.aw-faq__body {
max-height: 0;
overflow: hidden;
transition: max-height .35s ease;
}
.aw-faq__body-inner {
padding: 0 28px 32px 28px;
color: var(--aw-text-muted);
font-size: 15px;
line-height: 1.7;
}
/* max-height gestita dinamicamente via JS (main.js) */
@media (max-width: 700px) {
.aw-faq__head { padding: 24px 20px; column-gap: 16px; }
.aw-faq__body-inner { padding: 0 20px 24px 20px; }
}
/* ============================================================
9. SECTION TITLE (riusabile)
============================================================ */
.aw-section-title {
text-align: center;
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 700;
color: var(--aw-white);
margin: 0 0 16px;
}
.aw-section-subtitle {
text-align: center;
color: var(--aw-text-muted);
max-width: 640px;
margin: 0 auto 24px;
line-height: 1.6;
}
.aw-faq-section .aw-section-title {
padding: 0 150px;
&::before {
top: 40%;
height: 100%;
}
}
/* === ARWEB START: design fidelity fixes 2026-05-12 === */
/* 1. Banner CTA — wave decoration cyan (mockup Servizio.jpg, lato destro)
Inline SVG via data URI: 3 curve sovrapposte con glow filter.
Niente asset esterni da gestire. */
.aw-serv-banner__inner {
position: relative;
overflow: hidden;
}
.aw-serv-banner__inner::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 60%;
background:
radial-gradient(ellipse 60% 80% at 95% 50%, rgba(0,191,255,0.18), transparent 65%),
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cfilter id='g' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='%2300BFFF' stroke-width='1.5' filter='url(%23g)'%3E%3Cpath d='M0,120 C100,40 220,160 340,80 C440,20 540,100 620,60' opacity='0.9'/%3E%3Cpath d='M0,150 C100,80 220,180 340,110 C440,60 540,130 620,90' opacity='0.55'/%3E%3Cpath d='M0,90 C100,30 220,130 340,60 C440,10 540,80 620,40' opacity='0.35'/%3E%3C/g%3E%3C/svg%3E") right center / 100% 100% no-repeat;
pointer-events: none;
z-index: 0;
}
.aw-serv-banner__inner > * {
position: relative;
z-index: 1;
}
@media (max-width: 700px) {
.aw-serv-banner__inner::after { width: 100%; opacity: 0.35; }
}
/* 2. FAQ — override stili globali (Elementor kit / Hello Elementor) per
tornare al look mockup. NB: usiamo background-color: transparent (non
"background: transparent") per non cancellare il background-image SVG
che disegna la freccia nell'icona. */
.aw-faq__head,
button.aw-faq__head {
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--aw-white) !important;
text-transform: none !important;
}
.aw-faq__head:hover,
.aw-faq__head:focus,
.aw-faq__head:focus-visible,
.aw-faq__head:active {
background-color: transparent !important;
outline: none !important;
box-shadow: none !important;
}
/* 3. .aw-section-title — abilita text-glow (richiede position:relative).
width: fit-content + auto margins fa sì che il glow ::before (width:100%)
sia largo quanto il TESTO, non quanto tutto il container. */
.aw-section-title {
position: relative;
width: fit-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
/* 4. Link cyan nei rich text di intro/problema/agisci-evita (wp_kses_post)
Senza questo i link ereditano il colore default del browser. */
.aw-serv-intro__text a,
.aw-serv-problem-text a,
.aw-serv-block-text a {
color: var(--aw-cyan);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color .2s ease;
}
.aw-serv-intro__text a:hover,
.aw-serv-problem-text a:hover,
.aw-serv-block-text a:hover {
color: var(--aw-cyan-dark);
}
.aw-serv-block-text a strong,
.aw-serv-block-text strong a {
color: inherit;
font-weight: 700;
}
/* 5. CTA centrato dopo "Il risultato" (riusa pattern banner btn) */
.aw-serv-risultato__cta {
text-align: center;
margin-top: 48px;
}
.aw-serv-risultato__cta .btn {
background: var(--aw-cyan);
color: var(--aw-bg);
padding: 14px 28px;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: transform .2s ease, box-shadow .2s ease;
}
.aw-serv-risultato__cta .btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 191, 255, 0.25);
}
/* 6. Padding uniforme tra sezioni del secondo tempo (match prima parte ~90-100px) */
.aw-serv-problem-solution { padding: 90px 0; }
.aw-serv-risultato { padding: 90px 0; }
.aw-serv-related { padding: 90px 0; }
.aw-serv-faq { padding: 90px 0; }
/* === ARWEB END === */
/* === ARWEB SERVIZIO PACK END === */
/* === ARWEB ARTICOLO PACK START === */
/* ============================================================
ARWEB - SINGLE NEWS / ARTICOLO
============================================================ */
/* ============================================================
1. ARTICLE HERO
============================================================ */
.aw-article-hero {
padding: 200px 0 32px;
}
.aw-article-hero .container {
max-width: 920px;
margin: 0 auto;
}
.aw-article-hero__meta {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.aw-article-hero__category {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--aw-cyan);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
}
.aw-article-hero__category::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--aw-cyan);
}
.aw-article-hero__date {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--aw-cyan);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.aw-article-hero__date::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--aw-cyan);
box-shadow: 0 0 12px rgba(0, 191, 255, 0.6);
}
.aw-article-hero__reading {
color: var(--aw-text-muted);
font-size: 13px;
}
.aw-article-hero__reading::before {
content: '·';
margin-right: 16px;
color: var(--aw-border);
}
.aw-article-hero__title {
font-size: clamp(32px, 4.5vw, 52px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--aw-white);
margin: 0 0 20px;
}
.aw-article-hero__subtitle {
font-size: 18px;
line-height: 1.6;
color: var(--aw-text-muted);
margin: 0;
}
/* ============================================================
2. FEATURED IMAGE FULL-WIDTH (ma con max e radius)
============================================================ */
.aw-article-featured {
padding: 24px 0 40px;
}
.aw-article-featured .container {
max-width: 1080px;
margin: 0 auto;
}
.aw-article-featured img {
width: 100%;
height: auto;
border-radius: var(--aw-radius, 12px);
display: block;
}
/* ============================================================
3. CONTENT TYPOGRAPHY (post editor output)
============================================================ */
.aw-article-content {
max-width: 720px;
margin: 0 auto;
padding: 24px 0 60px;
color: var(--aw-white);
font-size: 17px;
line-height: 1.75;
}
.aw-article-content p { color: var(--aw-white); }
.aw-article-content li { color: var(--aw-white); }
.aw-article-content > * { margin-top: 0; margin-bottom: 24px; }
.aw-article-content > *:last-child { margin-bottom: 0; }
.aw-article-content h2 {
color: var(--aw-white);
font-size: 18px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 48px;
margin-bottom: 16px;
}
.aw-article-content h3 {
color: var(--aw-cyan);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 36px;
margin-bottom: 12px;
}
.aw-article-content h4 {
color: var(--aw-white);
font-size: 18px;
font-weight: 700;
margin-top: 32px;
margin-bottom: 12px;
}
.aw-article-content p { margin-bottom: 24px; }
.aw-article-content a {
color: var(--aw-cyan);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color .2s ease;
}
.aw-article-content a:hover { color: var(--aw-white); }
.aw-article-content strong { color: var(--aw-white); font-weight: 600; }
.aw-article-content em { font-style: italic; }
/* Liste */
.aw-article-content ul,
.aw-article-content ol {
padding-left: 24px;
margin-bottom: 24px;
}
.aw-article-content ul { list-style: disc; }
.aw-article-content ol { list-style: decimal; }
.aw-article-content li { margin-bottom: 8px; padding-left: 4px; }
.aw-article-content li::marker { color: var(--aw-cyan); }
/* Immagini inline */
.aw-article-content img {
width: 100%;
height: auto;
border-radius: var(--aw-radius, 12px);
margin: 32px 0;
display: block;
}
/* Blockquote — design XD: ❝ icona cyan in alto, citazione centrata */
.aw-article-content blockquote,
.aw-article-blockquote {
position: relative;
padding: 36px 24px 24px;
margin: 40px 0;
color: var(--aw-white);
font-size: 17px;
line-height: 1.6;
text-align: center;
font-style: normal;
border: none;
}
.aw-article-content blockquote::before,
.aw-article-blockquote::before {
content: '\201C'; /* " unicode */
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
font-size: 56px;
line-height: 1;
font-family: Georgia, 'Times New Roman', serif;
color: var(--aw-cyan);
}
.aw-article-content blockquote cite,
.aw-article-blockquote__author {
display: block;
margin-top: 18px;
font-style: normal;
font-size: 12px;
color: var(--aw-text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.aw-article-blockquote__author strong { color: var(--aw-white); }
/* Code */
.aw-article-content code {
background: var(--aw-bg-card);
padding: 2px 8px;
border-radius: 4px;
font-family: 'SF Mono', Monaco, Consolas, monospace;
font-size: 0.9em;
color: var(--aw-cyan);
}
.aw-article-content pre {
background: var(--aw-bg-card);
padding: 24px;
border-radius: var(--aw-radius, 12px);
overflow-x: auto;
margin: 32px 0;
border: 1px solid var(--aw-border);
}
.aw-article-content pre code {
background: none;
padding: 0;
color: var(--aw-white);
}
/* ============================================================
4. POST NAVIGATION (Previous / Next)
============================================================ */
.aw-article-nav {
max-width: 1080px;
margin: 24px auto 80px;
padding: 40px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.aw-article-nav__inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
}
.aw-article-nav__link,
a.aw-article-nav__link {
display: inline-flex !important;
align-items: center;
gap: 12px;
padding: 14px 28px !important;
border: 1px solid rgba(255, 255, 255, 0.35) !important;
border-radius: 999px !important;
color: var(--aw-white) !important;
background: transparent !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition: all .25s ease !important;
}
.aw-article-nav__link:hover,
a.aw-article-nav__link:hover {
border-color: var(--aw-cyan) !important;
color: var(--aw-cyan) !important;
background: rgba(0, 191, 255, 0.06) !important;
}
.aw-article-nav__arrow {
width: 16px;
height: 13px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transition: transform .25s ease;
}
.aw-article-nav__arrow--left {
background-image: url("data:image/svg+xml;utf8,");
}
.aw-article-nav__arrow--right {
background-image: url("data:image/svg+xml;utf8,");
}
.aw-article-nav__link--prev:hover .aw-article-nav__arrow--left { transform: translateX(-3px); }
.aw-article-nav__link--next:hover .aw-article-nav__arrow--right { transform: translateX(3px); }
@media (max-width: 600px) {
.aw-article-nav__inner { flex-direction: column; align-items: stretch; }
.aw-article-nav__link { justify-content: center; }
}
/* ============================================================
5. COMMENT FORM
============================================================ */
.aw-comments-section {
max-width: 720px;
margin: 60px auto;
padding: 0 16px;
}
.aw-comments-section__title {
color: var(--aw-white);
font-size: 18px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin: 0 0 24px;
}
.aw-comments-section .comment-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.aw-comments-section .comment-form-comment,
.aw-comments-section .comment-form-cookies-consent,
.aw-comments-section .form-submit {
grid-column: 1 / -1;
}
.aw-comments-section .comment-form label {
display: block;
color: var(--aw-text-muted);
font-size: 12px;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.aw-comments-section .comment-form input[type="text"],
.aw-comments-section .comment-form input[type="email"],
.aw-comments-section .comment-form input[type="url"],
.aw-comments-section .comment-form textarea {
width: 100%;
background: var(--aw-bg-card);
border: 1px solid var(--aw-border);
border-radius: 8px;
padding: 12px 16px;
color: var(--aw-white);
font-size: 15px;
font-family: inherit;
transition: border-color .2s ease;
}
.aw-comments-section .comment-form input:focus,
.aw-comments-section .comment-form textarea:focus {
outline: none;
border-color: var(--aw-cyan);
}
.aw-comments-section .comment-form textarea {
min-height: 140px;
resize: vertical;
}
.aw-comments-section .form-submit input[type="submit"],
.aw-comments-section .submit {
background: var(--aw-cyan);
color: var(--aw-bg);
border: none;
padding: 14px 32px;
border-radius: 999px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.aw-comments-section .form-submit input[type="submit"]:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0,191,255,0.25);
}
/* ============================================================
6. COMMENTS LIST
============================================================ */
.aw-comments-list {
list-style: none;
margin: 32px 0 0;
padding: 0;
}
.aw-comments-list .comment {
padding: 24px 0;
border-top: 1px solid var(--aw-border);
}
.aw-comments-list .comment:first-child { border-top: none; }
.aw-comments-list .comment-body {
display: grid;
grid-template-columns: 48px 1fr;
gap: 16px;
}
.aw-comments-list .comment-author {
grid-row: 1 / 3;
}
.aw-comments-list .comment-author .avatar {
width: 48px;
height: 48px;
border-radius: 50%;
display: block;
}
.aw-comments-list .comment-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 8px;
}
.aw-comments-list .comment-meta .fn,
.aw-comments-list .comment-author cite {
font-style: normal;
color: var(--aw-white);
font-weight: 600;
font-size: 14px;
}
.aw-comments-list .comment-metadata {
color: var(--aw-text-muted);
font-size: 12px;
}
.aw-comments-list .comment-content {
color: var(--aw-text-muted);
font-size: 15px;
line-height: 1.7;
}
.aw-comments-list .reply {
margin-top: 8px;
}
.aw-comments-list .comment-reply-link {
color: var(--aw-cyan);
font-size: 13px;
text-decoration: none;
font-weight: 600;
}
.aw-comments-list .comment-reply-link:hover { text-decoration: underline; }
/* Replies indentation */
.aw-comments-list .children {
list-style: none;
margin: 24px 0 0;
padding: 0 0 0 64px;
border-left: 1px solid var(--aw-border);
}
/* ============================================================
7. ARTICOLI CORRELATI (riusa .aw-card)
============================================================ */
.aw-related-posts {
padding: 60px 0;
}
.aw-related-posts .container {
max-width: 1400px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
.aw-related-posts__title {
text-align: center;
color: var(--aw-white);
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
margin: 0 0 32px;
}
/* === ARWEB ARTICOLO PACK END === */
/* === ARWEB PROGETTO PACK START === */
/* ============================================================
ARWEB - SINGLE PROGETTO / CASE STUDY
============================================================ */
/* ============================================================
1. PROGETTO HERO
============================================================ */
.aw-prog-hero {
padding: 60px 0 40px;
}
.aw-prog-hero .container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 48px;
align-items: center;
}
.aw-prog-hero__label {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--aw-cyan);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 20px;
}
.aw-prog-hero__label::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--aw-cyan);
}
.aw-prog-hero__title {
font-size: clamp(32px, 4vw, 48px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--aw-white);
margin: 0;
}
.aw-prog-hero__brand {
display: flex;
align-items: center;
gap: 16px;
margin-top: 24px;
color: var(--aw-text-muted);
font-size: 14px;
}
.aw-prog-hero__brand strong { color: var(--aw-white); }
.aw-prog-hero__brand-sep {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--aw-border);
}
.aw-prog-hero__image img {
width: 100%;
height: auto;
border-radius: var(--aw-radius, 12px);
display: block;
}
@media (max-width: 900px) {
.aw-prog-hero .container {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* ============================================================
2. SEZIONE "LA SFIDA" CON SIDEBAR STICKY
============================================================ */
.aw-prog-section {
padding: 50px 0;
}
.aw-prog-section:first-child { padding-top: 0; }
.aw-prog-section__title {
font-size: clamp(28px, 3vw, 36px);
font-weight: 800;
line-height: 1.2;
color: var(--aw-white);
margin: 0 0 24px;
}
.aw-prog-section__text {
color: var(--aw-white);
font-size: 16px;
line-height: 1.75;
}
.aw-prog-section__text p { color: var(--aw-white); margin-bottom: 18px; }
.aw-prog-section__text li { color: var(--aw-white); }
.aw-prog-section__text strong { color: var(--aw-white); }
.aw-prog-section__text a {
color: var(--aw-cyan);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ============================================================
LAYOUT BODY 2-col: main content (sfida/soluzione/...) + sidebar sticky
============================================================ */
.aw-prog-body {
padding: 60px 0;
}
.aw-prog-body__container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 360px;
gap: 60px;
align-items: start;
}
.aw-prog-body--no-sidebar .aw-prog-body__container {
grid-template-columns: 1fr;
max-width: 920px;
}
.aw-prog-body__main {
min-width: 0;
}
/* ============================================================
SIDEBAR STICKY — Card "Ti interessa una soluzione simile?"
Dati da ACF Options Page (ARweb → Sidebar Progetto)
============================================================ */
.aw-prog-sidebar {
position: sticky;
top: 100px;
align-self: start;
}
.aw-prog-sidebar__inner {
background: linear-gradient(160deg, rgba(12, 26, 54, 0.95) 0%, rgba(8, 20, 44, 0.92) 100%);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 28px;
padding: 40px 32px;
text-align: left;
box-shadow:
0 0 60px rgba(0, 191, 255, 0.10),
0 4px 24px rgba(0, 0, 0, 0.25);
position: relative;
overflow: visible; /* permette al swoosh decorativo di uscire dalla card */
}
.aw-prog-sidebar__inner::before {
/* Swoosh neon cyan decorativo in offset top-right */
content: "";
position: absolute;
top: -62px;
right: -76px;
width: 187px;
height: 187px;
background: url("assets/aw-sidebar-swoosh.webp") no-repeat center / contain;
pointer-events: none;
z-index: 2;
filter: drop-shadow(0 0 18px rgba(0, 191, 255, 0.4));
}
.aw-prog-sidebar__inner > * {
position: relative;
z-index: 1;
}
.aw-prog-sidebar__title {
color: var(--aw-white) !important;
font-size: 22px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
margin: 0 0 28px !important;
padding-right: 20px;
letter-spacing: -0.01em;
}
/* Riga: immagine + testo affiancati */
.aw-prog-sidebar__row {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
margin-bottom: 28px;
}
.aw-prog-sidebar__image {
flex: 1 1 50%;
max-width: 50%;
text-align: center;
}
.aw-prog-sidebar__image img {
width: 100%;
max-width: 140px;
height: auto;
display: block;
margin: 0 auto;
}
.aw-prog-sidebar__text {
flex: 1 1 50%;
color: var(--aw-cyan) !important;
font-size: 19px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
margin: 0 !important;
text-align: left;
}
.aw-prog-sidebar__cta {
display: inline-flex !important;
align-items: center;
gap: 14px;
background: var(--aw-cyan) !important;
color: #08142c !important;
padding: 14px 24px;
border-radius: 20px;
border: 2px solid var(--aw-cyan);
font-weight: 700;
font-size: 13px;
line-height: 1.3;
text-decoration: none !important;
box-shadow: 0 0 32px rgba(0, 191, 255, 0.40);
transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.aw-prog-sidebar__cta:hover {
background: var(--aw-cyan-dark) !important;
border-color: var(--aw-cyan-dark);
transform: translateY(-2px);
box-shadow: 0 0 48px rgba(0, 191, 255, 0.60);
}
.aw-prog-sidebar__cta-arrow {
flex-shrink: 0;
width: 14px;
height: 12px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
transition: transform .25s ease;
}
.aw-prog-sidebar__cta:hover .aw-prog-sidebar__cta-arrow {
transform: translateX(3px);
}
@media (max-width: 1024px) {
.aw-prog-body__container {
grid-template-columns: 1fr;
}
.aw-prog-sidebar {
position: static;
max-width: 480px;
margin: 0 auto;
width: 100%;
}
}
/* ============================================================
3. VIDEO EMBED (responsive con play overlay opzionale)
============================================================ */
.aw-prog-video {
margin: 32px 0;
border-radius: var(--aw-radius, 12px);
overflow: hidden;
background: var(--aw-bg-card);
aspect-ratio: 16 / 9;
position: relative;
}
.aw-prog-video iframe,
.aw-prog-video video {
width: 100%;
height: 100%;
display: block;
border: none;
}
/* ============================================================
4. STATS NEL HERO
============================================================ */
.aw-prog-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--aw-border);
}
.aw-prog-stat__value {
font-size: clamp(22px, 2.5vw, 32px);
font-weight: 800;
color: var(--aw-cyan);
line-height: 1;
margin: 0 0 6px;
}
.aw-prog-stat__label {
color: var(--aw-text-muted);
font-size: 12px;
line-height: 1.4;
margin: 0;
}
/* ============================================================
5. UTILITY: ridotto — il container max-width è gestito da .aw-prog-body__container
============================================================ */
/* === ARWEB START: progetto related-posts + section polish 2026-05-12 === */
/* 1. Related posts section (3 card "Altri casi di successo") */
.aw-related-posts {
padding: 90px 0;
}
.aw-related-posts .aw-section-title {
margin-bottom: 40px;
}
/* 2. Hero padding top per liberare dall'header sticky */
.aw-prog-hero {
padding: 200px 0 60px 0;
}
/* === ARWEB END === */
/* === ARWEB PROGETTO PACK END === */
/* === ARWEB GLOBAL ATMOSPHERE START === */
/* ============================================================
GLOW RADIALE TOP-RIGHT (firma visiva di tutti i mockup)
- Posizionato in alto a destra dietro all'illustrazione hero
- position: absolute = scorre via con la pagina (non fixed)
- pointer-events: none = non blocca click/hover
- z-index: 0 = sta dietro al contenuto
============================================================ */
body {
position: relative;
}
body::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 900px;
background:
radial-gradient(
ellipse 55% 70% at 50% 5%,
rgba(0, 191, 255, 0.10),
rgba(0, 191, 255, 0.03) 35%,
transparent 65%
);
pointer-events: none;
z-index: 0;
}
/* Assicura che il contenuto stia sopra al glow */
.site-header,
.site-content,
main,
#main {
position: relative;
z-index: 1;
}
/* === ARWEB GLOBAL ATMOSPHERE END === */
/* === ARWEB START: saved sections (CTA + Newsletter) 2026-05-12 === */
/* ============================================================
CTA SECTION — "Pronto a portare la tua comunicazione..."
Riusabile a fondo di tutte le pagine (single, archive, statiche).
Due varianti: --button (CTA con bottone) e default (con form CF7).
============================================================ */
.aw-cta-section {
padding: 90px 0;
position: relative;
}
.aw-cta-section__inner {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 60px;
align-items: center;
position: relative;
}
.aw-cta-section__title {
font-size: clamp(28px, 3.2vw, 42px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--aw-white);
margin: 0 0 20px;
}
.aw-cta-section__title span { color: var(--aw-cyan); }
.aw-cta-section__title br + span,
.aw-cta-section__title span { display: inline; }
.aw-cta-section__subtitle {
color: var(--aw-text-muted);
font-size: 15px;
line-height: 1.6;
margin: 0;
max-width: 420px;
}
/* Form CF7 dentro al box CTA */
.aw-cta-section__form {
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid var(--aw-border);
border-radius: var(--aw-radius, 12px);
padding: 36px;
}
.aw-cta-section__form .wpcf7-form p { margin: 0 0 16px; }
.aw-cta-section__form label {
display: block;
color: var(--aw-text-muted);
font-size: 13px;
font-weight: 500;
margin-bottom: 6px;
}
.aw-cta-section__form input[type="text"],
.aw-cta-section__form input[type="email"],
.aw-cta-section__form input[type="tel"],
.aw-cta-section__form input[type="url"],
.aw-cta-section__form textarea {
width: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid var(--aw-border);
border-radius: 8px;
color: var(--aw-white);
font: inherit;
font-size: 14px;
padding: 12px 14px;
transition: border-color .2s ease, background .2s ease;
}
.aw-cta-section__form input:focus,
.aw-cta-section__form textarea:focus {
outline: none;
border-color: var(--aw-cyan);
background: rgba(0, 191, 255, 0.04);
}
.aw-cta-section__form textarea { min-height: 90px; resize: vertical; }
.aw-cta-section__form input[type="submit"],
.aw-cta-section__form .wpcf7-submit {
width: auto;
background: var(--aw-cyan);
color: var(--aw-bg);
border: none;
border-radius: 999px;
padding: 14px 28px;
font-weight: 700;
font-size: 14px;
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease;
}
.aw-cta-section__form input[type="submit"]:hover,
.aw-cta-section__form .wpcf7-submit:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 191, 255, 0.25);
}
.aw-cta-section__placeholder {
color: var(--aw-text-muted);
font-size: 13px;
}
.aw-cta-section__placeholder code {
background: rgba(0, 191, 255, 0.1);
color: var(--aw-cyan);
padding: 2px 6px;
border-radius: 4px;
font-family: monospace;
}
/* Variante con bottone (no form) */
.aw-cta-section--button .aw-cta-section__inner {
grid-template-columns: 1fr auto;
}
.aw-cta-section__btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--aw-cyan);
color: var(--aw-bg);
padding: 16px 32px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.aw-cta-section__btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 191, 255, 0.25);
}
@media (max-width: 900px) {
.aw-cta-section__inner,
.aw-cta-section--button .aw-cta-section__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.aw-cta-section__form { padding: 24px; }
}
/* ============================================================
NEWSLETTER SECTION — riga compatta prima del footer
============================================================ */
.aw-newsletter {
padding: 60px 0;
}
.aw-newsletter__inner {
background: linear-gradient(135deg, rgba(0,191,255,0.08), rgba(0,191,255,0.02));
border: 1px solid var(--aw-border);
border-radius: var(--aw-radius, 16px);
padding: 32px 40px;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 40px;
align-items: center;
}
.aw-newsletter__title {
font-size: 22px;
font-weight: 700;
color: var(--aw-white);
margin: 0 0 8px;
}
.aw-newsletter__text {
color: var(--aw-text-muted);
font-size: 14px;
line-height: 1.5;
margin: 0;
}
.aw-newsletter__form .wpcf7-form p {
display: flex;
gap: 8px;
margin: 0;
}
.aw-newsletter__form input[type="email"] {
flex: 1;
background: rgba(255,255,255,0.06);
border: 1px solid var(--aw-border);
border-radius: 999px;
color: var(--aw-white);
font: inherit;
font-size: 14px;
padding: 12px 18px;
}
.aw-newsletter__form input[type="submit"],
.aw-newsletter__form .wpcf7-submit {
background: var(--aw-cyan);
color: var(--aw-bg);
border: none;
border-radius: 999px;
padding: 12px 24px;
font-weight: 700;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
}
.aw-newsletter__placeholder {
color: var(--aw-text-muted);
font-size: 13px;
}
@media (max-width: 700px) {
.aw-newsletter__inner {
grid-template-columns: 1fr;
gap: 24px;
padding: 24px;
}
}
/* === ARWEB END === */
/* === ARWEB LISTING PACK START === */
/* ============================================================
ARWEB - LISTING PAGES (Blog, Casi di successo, Servizi)
============================================================ */
/* ============================================================
1. HERO LISTING (riusabile per Blog/Casi/Servizi)
============================================================ */
.aw-listing-hero {
padding: 200px 0 90px 0;
overflow-x: clip;
}
.aw-listing-hero .container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 60px;
align-items: center;
position: relative;
}
.aw-listing-hero__eyebow {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--aw-cyan);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 18px;
}
.aw-listing-hero__label {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--aw-cyan);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 18px;
}
.aw-listing-hero__label::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--aw-cyan);
}
.aw-listing-hero__title {
font-size: clamp(36px, 4.5vw, 56px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--aw-white);
margin: 0 0 20px;
}
.aw-listing-hero__title span { color: var(--aw-cyan); }
.aw-listing-hero__subtitle {
font-size: 17px;
line-height: 1.6;
color: var(--aw-text-muted);
max-width: 520px;
}
.aw-listing-hero__illustration {
margin-right: calc((100vw - 1400px) / -2);
align-self: center;
}
.aw-listing-hero__illustration img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 1440px) {
.aw-listing-hero__illustration {
margin-right: 0;
}
}
@media (max-width: 900px) {
.aw-listing-hero .container { grid-template-columns: 1fr; gap: 32px; }
.aw-listing-hero__illustration img { max-width: 320px; margin: 0 auto; }
}
/* Override mirato: /casi-di-successo/ — illustrazione dentro al wrapper
(no bleed destro) e dimensione ridotta per evitare il pixelation del
wireframe a densità sparsa. Servizi e Blog conservano il bleed default. */
.aw-archive-progetto .aw-listing-hero__illustration {
margin-right: 0;
}
.aw-archive-progetto .aw-listing-hero__illustration img {
max-width: 650px;
margin-left: auto;
}
/* ============================================================
2. STATS OVERALL (Image 5 - Casi di successo)
============================================================ */
.aw-stats-overall {
padding: 24px 0 40px;
}
.aw-stats-overall .container {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
text-align: center;
}
.aw-stat-overall__value {
font-size: clamp(32px, 4vw, 56px);
font-weight: 800;
line-height: 1;
color: var(--aw-cyan);
margin: 0 0 8px;
letter-spacing: -0.02em;
}
.aw-stat-overall__label {
color: var(--aw-text-muted);
font-size: 14px;
line-height: 1.4;
margin: 0;
}
@media (max-width: 900px) {
.aw-stats-overall .container { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 480px) {
.aw-stats-overall .container { grid-template-columns: 1fr; }
}
/* ============================================================
3. FILTER CHIPS (riusabile per tutti i listing)
============================================================ */
.aw-filter-section {
padding: 30px 0 20px;
text-align: center;
}
.aw-filter-section__label {
color: var(--aw-white);
font-size: 16px;
font-weight: 600;
margin: 0 0 16px;
}
.aw-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
}
.aw-filter-chip {
display: inline-flex;
align-items: center;
padding: 8px 20px;
background: transparent;
border: 1px solid var(--aw-border);
border-radius: 999px;
color: var(--aw-text-muted);
font-size: 13px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: all .2s ease;
}
.aw-filter-chip:hover {
border-color: var(--aw-cyan);
color: var(--aw-white);
}
.aw-filter-chip.is-active,
.aw-filter-chip[aria-pressed="true"] {
background: var(--aw-cyan);
border-color: var(--aw-cyan);
color: var(--aw-bg);
font-weight: 600;
}
/* ============================================================
4. CARD HERO LISTING (Image 5 - Primo case study evidenziato)
============================================================ */
.aw-card-hero {
background: var(--aw-bg-card);
border: 1px solid var(--aw-border);
border-radius: var(--aw-radius, 16px);
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 0;
margin: 32px auto 40px;
max-width: 1180px;
transition: border-color .25s ease;
}
.aw-card-hero:hover { border-color: rgba(0,191,255,0.4); }
.aw-card-hero__image {
position: relative;
overflow: hidden;
}
.aw-card-hero__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
min-height: 380px;
}
.aw-card-hero__body {
padding: 40px 48px;
display: flex;
flex-direction: column;
justify-content: center;
}
.aw-card-hero__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}
.aw-card-hero__tag {
display: inline-flex;
padding: 4px 12px;
border-radius: 999px;
background: rgba(0,191,255,0.1);
color: var(--aw-cyan);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.aw-card-hero__title {
font-size: clamp(22px, 2.5vw, 28px);
font-weight: 700;
color: var(--aw-white);
line-height: 1.25;
margin: 0 0 12px;
}
.aw-card-hero__brand {
display: flex;
gap: 12px;
color: var(--aw-text-muted);
font-size: 13px;
margin-bottom: 16px;
}
.aw-card-hero__brand strong { color: var(--aw-white); }
.aw-card-hero__excerpt {
color: var(--aw-text-muted);
font-size: 15px;
line-height: 1.6;
margin: 0 0 24px;
}
.aw-card-hero__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 20px 0;
margin-bottom: 24px;
border-top: 1px solid var(--aw-border);
border-bottom: 1px solid var(--aw-border);
}
.aw-card-hero__stat-value {
font-size: 22px;
font-weight: 800;
color: var(--aw-cyan);
line-height: 1;
margin: 0 0 4px;
}
.aw-card-hero__stat-label {
color: var(--aw-text-muted);
font-size: 11px;
line-height: 1.3;
}
.aw-card-hero__cta {
align-self: flex-start;
background: var(--aw-cyan);
color: var(--aw-bg);
padding: 12px 24px;
border-radius: 999px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.aw-card-hero__cta:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0,191,255,0.25);
}
@media (max-width: 900px) {
.aw-card-hero { grid-template-columns: 1fr; }
.aw-card-hero__image img { min-height: 260px; }
.aw-card-hero__body { padding: 32px 24px; }
}
/* ============================================================
4b. CENTERED STATEMENT (sezione intro centrata)
Riusabile per Servizi/Casi/Tecnologia/ecc.
============================================================ */
.aw-centered-statement {
padding: 60px 20px 50px;
text-align: center;
max-width: 880px;
margin: 0 auto;
}
.aw-centered-statement__label {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--aw-cyan);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 18px;
}
.aw-centered-statement__label::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--aw-cyan);
}
.aw-centered-statement__title,
.aw-centered-statement__title .elementor-heading-title,
.aw-centered-statement .elementor-heading-title.aw-centered-statement__title {
font-size: 45px !important;
font-weight: 800 !important;
line-height: 1.2em !important;
color: var(--aw-white);
margin: 0 0 18px;
}
.aw-centered-statement__title span,
.aw-centered-statement__title .elementor-heading-title span { color: var(--aw-cyan); }
.aw-centered-statement__text {
color: var(--aw-text);
font-size: 18px;
line-height: 1.65;
max-width: 680px;
margin: 0 auto;
}
/* ============================================================
5. CARD SERVICE ALTERNATA (Image 6 - Pagina Servizi)
============================================================ */
.aw-card-service {
background: linear-gradient(0deg, #102847 0%, #08142C 80%);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 20px;
padding: 30px 48px;
margin-bottom: 50px;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
align-items: center;
transition: border-color .25s ease, transform .25s ease;
}
.aw-card-service:hover {
border-color: rgba(0,191,255,0.35);
transform: translateY(-2px);
}
.aw-card-service__logo {
margin-bottom: 30px;
line-height: 0;
}
.aw-card-service__logo img {
width: auto;
height: 80px;
display: block;
}
.aw-card-service__title {
display: flex;
align-items: center;
gap: 12px;
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 700;
color: var(--aw-white);
margin: 0 0 16px;
}
.aw-card-service__icon {
width: 32px;
height: 32px;
color: var(--aw-cyan);
flex-shrink: 0;
}
.aw-card-service__features {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
list-style: none;
padding: 0;
}
.aw-card-service__feature {
display: inline-flex;
padding: 4px 12px;
border-radius: 999px;
background: rgba(0,191,255,0.08);
border: 1px solid rgba(0,191,255,0.2);
color: var(--aw-cyan);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
}
/* Tagline bold bianca (1 frase incisiva) */
.aw-card-service__tagline {
color: var(--aw-white);
font-size: 18px;
font-weight: 700;
line-height: 1.4;
margin: 0 0 14px;
}
/* Descrizione muted (paragrafo descrittivo) */
.aw-card-service__desc {
color: var(--aw-white);
opacity: 0.85;
font-size: 15px;
line-height: 1.65;
margin: 0 0 22px;
}
/* Excerpt legacy (per archive-servizio.php template che usa ancora questa class) */
.aw-card-service__excerpt {
color: var(--aw-text-muted);
font-size: 15px;
line-height: 1.65;
margin: 0 0 22px;
}
/* CTA con freccia SVG (no più carattere "→") */
.aw-card-service__cta {
margin-top: 15px;
display: inline-flex;
align-items: center;
gap: 12px;
background: transparent;
color: var(--aw-cyan) !important;
border: 1px solid var(--aw-cyan);
padding: 18px 28px;
max-width: 400px;
border-radius: 10px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
box-shadow: 0 0 24px rgba(0,191,255,0.30);
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.aw-card-service__cta:hover {
transform: translateY(-2px);
box-shadow: 0 0 36px rgba(0,191,255,0.55);
}
.aw-card-service__cta-arrow {
flex-shrink: 0;
display: inline-block;
width: 18px;
height: 14px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
transition: transform .25s ease;
}
.aw-card-service__cta:hover .aw-card-service__cta-arrow {
transform: translateX(4px);
}
.aw-card-service__image {
position: relative;
aspect-ratio: 4 / 3;
}
.aw-card-service__image img {
transform: translateY(-90px);
position: absolute;
width: 100%;
height: auto;
display: block;
}
@media (max-width: 900px) {
.aw-card-service,
.aw-card-service:nth-child(even) {
grid-template-columns: 1fr;
padding: 32px 24px;
gap: 24px;
}
.aw-card-service:nth-child(even) .aw-card-service__image {
order: 0;
}
}
/* ============================================================
6. PAGINAZIONE NUMERATA
============================================================ */
.aw-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 40px 0 60px;
}
.aw-pagination .page-numbers,
.aw-pagination__item {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border: 1px solid var(--aw-border);
border-radius: 8px;
color: var(--aw-text-muted);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all .2s ease;
}
.aw-pagination .page-numbers:hover,
.aw-pagination__item:hover {
border-color: var(--aw-cyan);
color: var(--aw-white);
}
.aw-pagination .page-numbers.current,
.aw-pagination__item.is-current {
background: var(--aw-cyan);
border-color: var(--aw-cyan);
color: var(--aw-bg);
font-weight: 700;
}
/* ============================================================
7. SECTION TITLE LISTING (centrale, riusabile)
============================================================ */
.aw-listing-section-title {
text-align: center;
color: var(--aw-white);
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
margin: 32px 0 16px;
}
.aw-listing-section-subtitle {
text-align: center;
color: var(--aw-text-muted);
max-width: 720px;
margin: 0 auto 32px;
line-height: 1.6;
font-size: 15px;
}
/* === ARWEB LISTING PACK END === */
/* === ARWEB STATIC PACK START === */
/* ============================================================
ARWEB - STATIC PAGES (Contatti, Chi Siamo, Tecnologia)
Pattern: hero, form contatti, sidebar info, principi numerati,
quote large, team grid, clients grid, tech block alternato.
============================================================ */
/* 1. STATIC HERO (riusabile per Contatti/Chi/Tech) */
.aw-static-hero {
padding: 110px 0 90px;
overflow-x: clip;
}
.aw-static-hero .container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 60px;
align-items: center;
position: relative;
}
.aw-static-hero__label {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--aw-cyan);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 18px;
}
.aw-static-hero__label::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--aw-cyan);
}
.aw-static-hero__title {
font-size: clamp(36px, 4.5vw, 58px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--aw-white);
margin: 0 0 20px;
}
.aw-static-hero__title span { color: var(--aw-cyan); }
.aw-static-hero__subtitle {
font-size: 17px;
line-height: 1.6;
color: var(--aw-text-muted);
max-width: 540px;
}
.aw-static-hero__illustration {
margin-right: calc((100vw - 1400px) / -2);
align-self: center;
}
.aw-static-hero__illustration img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 1240px) {
.aw-static-hero__illustration { margin-right: 0; }
}
@media (max-width: 900px) {
.aw-static-hero .container { grid-template-columns: 1fr; gap: 32px; }
.aw-static-hero__illustration img { max-width: 320px; margin: 0 auto; }
}
/* 2. CONTATTI - Form layout */
.aw-contact-section { padding: 60px 0; }
.aw-contact-section .container {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 60px;
align-items: start;
}
.aw-contact-form-card {
background: var(--aw-bg-card);
border: 1px solid var(--aw-border);
border-radius: var(--aw-radius, 16px);
padding: 36px 36px;
}
.aw-contact-form-card__title {
color: var(--aw-white);
font-size: 22px;
font-weight: 700;
margin: 0 0 8px;
}
.aw-contact-form-card__intro {
color: var(--aw-text-muted);
font-size: 14px;
line-height: 1.6;
margin: 0 0 28px;
}
.aw-form-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.aw-form-grid-2 .aw-form-row-full { grid-column: 1 / -1; }
@media (max-width: 600px) {
.aw-form-grid-2 { grid-template-columns: 1fr; }
}
/* 3. CONTATTI - Sidebar info */
.aw-contact-info {
display: flex;
flex-direction: column;
gap: 28px;
padding-top: 16px;
}
.aw-contact-info__item {
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
align-items: start;
}
.aw-contact-info__icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(0,191,255,0.1);
color: var(--aw-cyan);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.aw-contact-info__icon svg { width: 20px; height: 20px; }
.aw-contact-info__label {
color: var(--aw-text-muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 4px;
}
.aw-contact-info__value {
color: var(--aw-white);
font-size: 15px;
font-weight: 600;
margin: 0;
text-decoration: none;
transition: color .2s ease;
}
a.aw-contact-info__value:hover { color: var(--aw-cyan); }
.aw-social-strip {
display: flex;
gap: 12px;
margin-top: 8px;
}
.aw-social-strip a {
width: 40px;
height: 40px;
border: 1px solid var(--aw-border);
border-radius: 50%;
color: var(--aw-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all .2s ease;
}
.aw-social-strip a:hover {
border-color: var(--aw-cyan);
color: var(--aw-cyan);
transform: translateY(-2px);
}
.aw-social-strip a svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
.aw-contact-section .container {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* 4. CHI SIAMO - Principi numerati 3x2 */
.aw-principles-section { padding: 60px 0; }
.aw-principles-section .container {
max-width: 1180px;
margin: 0 auto;
}
.aw-principles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.aw-principle {
background: var(--aw-bg-card);
border: 1px solid var(--aw-border);
border-radius: var(--aw-radius, 12px);
padding: 32px 28px;
transition: border-color .25s ease, transform .25s ease;
}
.aw-principle:hover {
border-color: rgba(0,191,255,0.4);
transform: translateY(-4px);
}
.aw-principle__number {
color: var(--aw-cyan);
font-size: 32px;
font-weight: 800;
line-height: 1;
margin: 0 0 16px;
letter-spacing: -0.02em;
}
.aw-principle__title {
color: var(--aw-white);
font-size: 18px;
font-weight: 700;
margin: 0 0 12px;
}
.aw-principle__desc {
color: var(--aw-text-muted);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
@media (max-width: 900px) {
.aw-principles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.aw-principles-grid { grid-template-columns: 1fr; }
}
/* 5. CHI SIAMO - Quote large */
.aw-quote-large {
padding: 60px 0;
text-align: center;
max-width: 920px;
margin: 0 auto;
}
.aw-quote-large__icon {
color: var(--aw-cyan);
font-size: 48px;
line-height: 1;
margin: 0 0 24px;
opacity: 0.6;
}
.aw-quote-large__text {
color: var(--aw-white);
font-size: clamp(20px, 2.5vw, 28px);
font-weight: 500;
line-height: 1.4;
font-style: italic;
margin: 0 0 32px;
letter-spacing: -0.01em;
}
.aw-quote-large__attribution {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--aw-text-muted);
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* 6. CHI SIAMO - Team grid 4 colonne */
.aw-team-section { padding: 60px 0; }
.aw-team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 40px;
}
.aw-team-member { text-align: center; }
.aw-team-member__photo {
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: var(--aw-radius, 12px);
margin-bottom: 16px;
background: var(--aw-bg-card);
}
.aw-team-member__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.aw-team-member:hover .aw-team-member__photo img {
transform: scale(1.05);
}
.aw-team-member__name {
color: var(--aw-white);
font-size: 16px;
font-weight: 700;
margin: 0 0 4px;
}
.aw-team-member__role {
color: var(--aw-text-muted);
font-size: 13px;
margin: 0;
}
@media (max-width: 900px) {
.aw-team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.aw-team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
/* 7. CHI SIAMO - Logo clients grid */
.aw-clients-section { padding: 60px 0; }
.aw-clients-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 32px 48px;
margin-top: 40px;
align-items: center;
}
.aw-client-logo {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
.aw-client-logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
filter: brightness(0) invert(1) opacity(0.7);
transition: filter .25s ease, transform .25s ease;
}
.aw-client-logo:hover img {
filter: brightness(0) invert(1) opacity(1);
transform: scale(1.05);
}
@media (max-width: 900px) {
.aw-clients-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
.aw-clients-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 8. TECNOLOGIA - Block alternato */
.aw-tech-section { padding: 60px 0; }
.aw-tech-block {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 60px;
align-items: center;
padding: 40px 0;
}
.aw-tech-block:nth-child(even) {
grid-template-columns: 1.1fr 1fr;
}
.aw-tech-block:nth-child(even) .aw-tech-block__image {
order: -1;
}
.aw-tech-block__image img {
width: 100%;
height: auto;
border-radius: var(--aw-radius, 12px);
display: block;
}
.aw-tech-block__label {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--aw-cyan);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 16px;
}
.aw-tech-block__label::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--aw-cyan);
}
.aw-tech-block__title {
color: var(--aw-white);
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
line-height: 1.2;
margin: 0 0 16px;
}
.aw-tech-block__title span { color: var(--aw-cyan); }
.aw-tech-block__text {
color: var(--aw-text-muted);
font-size: 16px;
line-height: 1.7;
}
.aw-tech-block__text p { margin-bottom: 14px; }
.aw-tech-block__text strong { color: var(--aw-white); }
@media (max-width: 900px) {
.aw-tech-block,
.aw-tech-block:nth-child(even) {
grid-template-columns: 1fr;
gap: 24px;
}
.aw-tech-block:nth-child(even) .aw-tech-block__image {
order: 0;
}
}
/* === ARWEB STATIC PACK END === */
/* === ARWEB HOME PACK START === */
/* ============================================================
ARWEB — FRONT PAGE (home) — pattern specifici per le sezioni
ACF Flexible Content registrate in inc/acf-home.php.
Riusa: aw-listing-hero (hero), aw-serv-intro (intro split),
aw-card-hero + aw-cards-grid (cases), aw-principles (why_us),
aw-clients-grid (clients), aw-faq (faq).
============================================================ */
/* HOME HERO — wrapper riusa .aw-listing-hero ma aggiunge il body sotto al titolo */
.aw-home-hero .container { padding-top: 60px; padding-bottom: 60px; }
/* INTRO SPLIT con immagine a destra */
.aw-serv-intro--rev .container { grid-template-columns: 1fr 1fr; }
.aw-serv-intro--rev .aw-serv-intro__image { order: 2; }
/* ============================================================
1. FEATURE GRID 4 col (Testi / Foto / Video / 3D / AI)
============================================================ */
.aw-home-features { padding: 90px 0; }
.aw-home-features .container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.aw-home-features .aw-section-title { text-align: center; margin-bottom: 48px; }
.aw-home-features__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.aw-home-feature {
background: var(--aw-bg-card);
border: 1px solid var(--aw-border);
border-radius: var(--aw-radius, 12px);
padding: 28px 24px;
text-align: left;
}
.aw-home-feature__icon {
width: 40px; height: 40px;
margin-bottom: 18px;
}
.aw-home-feature__icon img {
width: 100%; height: 100%;
object-fit: contain;
}
.aw-home-feature__title {
font-size: 18px;
font-weight: 700;
color: var(--aw-white);
margin: 0 0 8px;
}
.aw-home-feature__desc {
color: var(--aw-text-muted);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
@media (max-width: 900px) {
.aw-home-features__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.aw-home-features__grid { grid-template-columns: 1fr; }
}
/* ============================================================
2. SERVIZI GRID — 4 colonne, card con logo/titolo/tagline/excerpt/CTA
Usato dalla home (e ovunque tramite shortcode [aw_servizi_grid])
============================================================ */
.aw-home-services { padding: 90px 0; }
.aw-home-services .container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.aw-home-services__head {
text-align: center;
max-width: 760px;
margin: 0 auto 56px;
}
.aw-home-services__eyebrow {
display: inline-block;
color: var(--aw-cyan);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 16px;
}
.aw-home-services__head .aw-section-subtitle { margin-top: 16px; }
.aw-home-services__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.aw-home-service-card {
background: var(--aw-bg-card);
border: 1px solid var(--aw-border);
border-radius: 20px;
padding: 28px 24px;
display: flex;
flex-direction: column;
text-decoration: none;
transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.aw-home-service-card:hover {
transform: translateY(-4px);
border-color: rgba(0, 191, 255, 0.4);
background: var(--aw-bg-2);
}
/* Logo del servizio (SVG con nome incluso nella grafica). No titolo testuale,
il nome del servizio è già nel SVG + alt + aria-label. */
.aw-home-service-card__logo {
line-height: 0;
margin-bottom: 22px;
}
.aw-home-service-card__logo img {
max-width: 100%;
max-height: 60px;
height: auto;
width: auto;
}
/* Titolo card — !important per battere CSS Elementor su h3 */
.aw-home-service-card h3.aw-home-service-card__title,
.aw-home-service-card .aw-home-service-card__title {
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
color: var(--aw-white) !important;
margin: 0 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* Tagline bold bianca (1 frase incisiva) */
.aw-home-service-card p.aw-home-service-card__tagline,
.aw-home-service-card .aw-home-service-card__tagline {
color: var(--aw-white) !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.5 !important;
margin: 0 0 16px !important;
}
/* Excerpt bianco (paragrafo descrittivo) */
.aw-home-service-card p.aw-home-service-card__excerpt,
.aw-home-service-card .aw-home-service-card__excerpt {
color: var(--aw-white) !important;
font-size: 13px !important;
line-height: 1.6 !important;
margin: 0 0 24px !important;
flex: 1;
}
/* CTA con freccia SVG */
.aw-home-service-card .aw-home-service-card__link {
display: flex !important;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
color: var(--aw-cyan) !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.5;
margin-top: auto;
text-decoration: none !important;
}
.aw-home-service-card__link-arrow {
flex-shrink: 0;
width: 18px;
height: 14px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
transition: transform .25s ease;
}
.aw-home-service-card:hover .aw-home-service-card__link-arrow {
transform: translateX(4px);
}
@media (max-width: 1100px) {
.aw-home-services__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.aw-home-services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.aw-home-services__grid { grid-template-columns: 1fr; }
}
/* ============================================================
3. CASES SECTION HEAD (featured + grid)
============================================================ */
.aw-home-cases { padding: 90px 0; }
.aw-home-cases .container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.aw-home-cases__head {
text-align: center;
max-width: 760px;
margin: 0 auto 40px;
}
.aw-home-cases__head .aw-centered-statement__label {
display: inline-flex;
margin-bottom: 16px;
}
/* ============================================================
CASI DI SUCCESSO GRID — righe 2-col (immagine + body)
Usata dalla home tramite shortcode [aw_casi_grid]
============================================================ */
.aw-home-casi {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
.aw-home-caso {
display: grid;
grid-template-columns: minmax(280px, 1fr) 2fr;
gap: 24px;
align-items: stretch;
min-height: 300px;
}
/* MEDIA: immagine con tag overlay. Niente aspect-ratio: il media si stretcha
in altezza per riempire la riga (la grid ha align-items: stretch). */
.aw-home-caso__media {
position: relative;
display: block;
border-radius: 20px;
overflow: hidden;
background: var(--aw-bg-card);
}
.aw-home-caso__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.aw-home-caso:hover .aw-home-caso__media img {
transform: scale(1.04);
}
/* Tag/badge in overlay sull'immagine */
.aw-home-caso__tag {
position: absolute;
left: 16px;
bottom: 16px;
background: var(--aw-cyan);
color: #08142c;
font-size: 12px;
font-weight: 700;
padding: 6px 14px;
border-radius: 999px;
letter-spacing: 0.02em;
}
/* BODY card — effetto vetro blu (glassmorphism) */
.aw-home-caso__body {
background: rgba(12, 26, 54, 0.55); /* blu navy semi-trasparente (--aw-bg-2 a 55%) */
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
padding: 36px 40px;
display: flex;
flex-direction: column;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.aw-home-caso__date {
color: var(--aw-cyan) !important;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
margin-bottom: 14px;
}
.aw-home-caso h3.aw-home-caso__title,
.aw-home-caso .aw-home-caso__title {
font-size: clamp(20px, 1.8vw, 26px) !important;
font-weight: 700 !important;
line-height: 1.25 !important;
color: var(--aw-white) !important;
margin: 0 0 18px !important;
}
.aw-home-caso__title a {
color: inherit !important;
text-decoration: none !important;
transition: color .2s ease;
}
.aw-home-caso__title a:hover { color: var(--aw-cyan) !important; }
.aw-home-caso p.aw-home-caso__excerpt,
.aw-home-caso .aw-home-caso__excerpt {
color: var(--aw-white) !important;
font-size: 14px !important;
line-height: 1.6 !important;
margin: 0 0 24px !important;
flex: 1;
}
/* Link "Leggi l'articolo" con freccia (stessa freccia delle service card) */
.aw-home-caso__link {
display: inline-flex !important;
align-items: center;
gap: 10px;
color: var(--aw-cyan) !important;
font-size: 14px !important;
font-weight: 700 !important;
text-decoration: none !important;
margin-top: auto;
align-self: flex-start;
transition: gap .2s ease;
}
.aw-home-caso__link-arrow {
width: 18px;
height: 14px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
transition: transform .25s ease;
}
.aw-home-caso__link:hover { gap: 16px; }
.aw-home-caso__link:hover .aw-home-caso__link-arrow { transform: translateX(4px); }
@media (max-width: 900px) {
.aw-home-caso {
grid-template-columns: 1fr;
}
.aw-home-caso__body {
padding: 28px 24px;
}
}
/* ============================================================
BLOG GRID — 3 col verticali con filtri pill e paginazione
Usata tramite shortcode [aw_blog_grid]
============================================================ */
.aw-blog {
display: flex;
flex-direction: column;
gap: 40px;
}
/* Filtri categoria */
.aw-blog__filters {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 50px;
align-items: center;
}
/* Gruppo per tassonomia */
.aw-blog__filter-group {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
align-items: center;
}
.aw-blog__filter-label {
color: var(--aw-white);
font-size: 30px;
font-weight: 800;
line-height: 1.2em;
text-align: center;
margin: 0;
letter-spacing: -0.01em;
}
.aw-blog__filter-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.aw-blog .aw-blog__filter,
a.aw-blog__filter {
display: inline-flex !important;
padding: 8px 18px;
border-radius: 999px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--aw-white) !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
letter-spacing: 0.02em;
transition: all .25s ease;
}
.aw-blog .aw-blog__filter:hover,
a.aw-blog__filter:hover {
border-color: var(--aw-cyan);
color: var(--aw-cyan) !important;
}
.aw-blog .aw-blog__filter.is-active,
a.aw-blog__filter.is-active {
background: var(--aw-cyan);
border-color: var(--aw-cyan);
color: #08142c !important;
}
/* Grid card */
.aw-blog__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.aw-blog-card {
display: flex;
flex-direction: column;
background: rgba(12, 26, 54, 0.55);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
overflow: hidden;
transition: transform .25s ease, border-color .25s ease;
}
.aw-blog-card:hover {
transform: translateY(-4px);
border-color: rgba(0, 191, 255, 0.35);
}
/* Media (immagine top) */
.aw-blog-card__media {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--aw-bg-card);
}
.aw-blog-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.aw-blog-card:hover .aw-blog-card__media img {
transform: scale(1.05);
}
.aw-blog-card__tag {
position: absolute;
left: 16px;
bottom: 16px;
background: var(--aw-cyan);
color: #08142c;
font-size: 12px;
font-weight: 700;
padding: 5px 12px;
border-radius: 999px;
letter-spacing: 0.02em;
}
/* Body */
.aw-blog-card__body {
padding: 24px 24px 28px;
display: flex;
flex-direction: column;
flex: 1;
}
.aw-blog-card__date {
color: var(--aw-cyan);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.05em;
margin-bottom: 10px;
}
.aw-blog-card h3.aw-blog-card__title,
.aw-blog-card .aw-blog-card__title {
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--aw-white) !important;
margin: 0 0 12px !important;
}
.aw-blog-card__title a {
color: inherit !important;
text-decoration: none !important;
transition: color .2s ease;
}
.aw-blog-card__title a:hover { color: var(--aw-cyan) !important; }
.aw-blog-card p.aw-blog-card__excerpt,
.aw-blog-card .aw-blog-card__excerpt {
color: var(--aw-white) !important;
opacity: 0.85;
font-size: 14px !important;
line-height: 1.6 !important;
margin: 0 0 20px !important;
flex: 1;
/* Limita a 3 righe con ellipsis */
display: -webkit-box !important;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.aw-blog-card__link {
display: inline-flex !important;
align-items: center;
gap: 10px;
color: var(--aw-cyan) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-decoration: none !important;
margin-top: auto;
align-self: flex-start;
transition: gap .2s ease;
}
.aw-blog-card__link-arrow {
width: 16px;
height: 13px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
transition: transform .25s ease;
}
.aw-blog-card__link:hover { gap: 14px; }
.aw-blog-card__link:hover .aw-blog-card__link-arrow { transform: translateX(3px); }
/* Paginazione */
.aw-blog__pagination {
display: flex;
justify-content: center;
margin-top: 16px;
}
.aw-blog__pagination .page-numbers,
.aw-blog__pagination ul {
list-style: none;
padding: 0;
margin: 0;
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
}
.aw-blog__pagination .page-numbers a,
.aw-blog__pagination .page-numbers span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: transparent;
color: var(--aw-white);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all .25s ease;
}
.aw-blog__pagination .page-numbers a:hover {
border-color: var(--aw-cyan);
color: var(--aw-cyan);
}
.aw-blog__pagination .page-numbers.current {
background: var(--aw-cyan);
border-color: var(--aw-cyan);
color: #08142c;
}
.aw-blog__pagination .page-numbers.dots {
border: none;
}
/* Empty state */
.aw-blog__empty {
text-align: center;
color: var(--aw-text-muted);
padding: 60px 20px;
font-size: 15px;
}
/* Loading state durante fetch AJAX */
.aw-blog__results {
transition: opacity .25s ease;
}
.aw-blog.is-loading .aw-blog__results {
opacity: 0.4;
pointer-events: none;
}
.aw-blog.is-loading {
position: relative;
}
.aw-blog.is-loading::after {
content: "";
position: absolute;
top: 120px;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 32px;
border: 3px solid rgba(255, 255, 255, 0.15);
border-top-color: var(--aw-cyan);
border-radius: 50%;
animation: aw-blog-spin .8s linear infinite;
z-index: 10;
}
@keyframes aw-blog-spin {
to { transform: translateX(-50%) rotate(360deg); }
}
@media (max-width: 1100px) {
.aw-blog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.aw-blog__grid { grid-template-columns: 1fr; }
.aw-blog__filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }
.aw-blog__filter { white-space: nowrap; flex-shrink: 0; }
}
/* ============================================================
PARTNER GRID — loghi clienti/partner
Usata dalla home tramite shortcode [aw_partner_grid]
============================================================ */
.aw-home-partners {
display: grid;
grid-template-columns: repeat(var(--aw-partners-cols, 5), 1fr);
gap: 48px 32px;
align-items: center;
justify-items: center;
}
.aw-home-partner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
text-decoration: none;
}
.aw-home-partner img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
opacity: 0.75;
transition: opacity .25s ease, transform .25s ease;
}
a.aw-home-partner:hover img {
opacity: 1;
transform: scale(1.05);
}
@media (max-width: 900px) {
.aw-home-partners { grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
}
@media (max-width: 600px) {
.aw-home-partners { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}
/* === ARWEB HOME PACK END === */
/* === ARWEB START: bg watermark "A" + cyan glow (utility) 2026-05-16 === */
/* Classe utility da applicare a un Container Elementor (o ) per
ottenere lo sfondo: watermark "A" outline + glow cyan radiale sotto.
Layering: ::before = glow (sotto), ::after = A outline (sopra).
Contenuto del container resta sopra a tutto via z-index. */
/* Contenitore: position relative + overflow hidden per ancorare e clippare i pseudo */
.aw-bg-a-glow,
.e-con.aw-bg-a-glow {
position: relative !important;
overflow: hidden !important;
}
/* Pseudo-elements comuni. Selettore .e-con.aw-bg-a-glow per specificità >
regole Elementor su .e-con::before del background overlay. */
.aw-bg-a-glow::before,
.aw-bg-a-glow::after,
.e-con.aw-bg-a-glow::before,
.e-con.aw-bg-a-glow::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
pointer-events: none !important;
display: block !important;
width: min(820px, 60vw) !important;
height: auto !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
}
.section-intro {
position: relative;
z-index: 1;
overflow: visible !important;
}
.section-intro::before {
content: "" !important;
position: absolute !important;
top: 20%;
left: auto !important;
right: 5% !important;
transform: translateY(-50%);
width: 45% !important;
aspect-ratio: 1 / 1 !important;
background: radial-gradient(
ellipse 50% 50% at 50% 50%,
rgba(0, 180, 220, 0.30) 0%,
rgba(0, 100, 180, 0.12) 50%,
transparent 100%
);
}
.image-square-container {
position: relative;
aspect-ratio: 1 / 1 !important;
overflow: visible !important;
}
.image-square-container img {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
width: 100% !important;
min-width: 1000px !important;
height: auto !important;
object-fit: contain;
}
/* GLOW cyan radiale (sotto) — ancorato a destra */
.aw-bg-a-glow::before,
.e-con.aw-bg-a-glow::before {
right: -8% !important;
left: auto !important;
aspect-ratio: 1 / 1 !important;
background-image: url("assets/aw-cyan-glow.svg") !important;
z-index: 0 !important;
}
/* A outline (sopra al glow) — ancorato a destra */
.aw-bg-a-glow::after,
.e-con.aw-bg-a-glow::after {
right: -8% !important;
left: auto !important;
aspect-ratio: 808 / 646 !important;
background-image: url("assets/aw-logo-watermark-outline.svg") !important;
z-index: 1 !important;
}
/* Contenuto sempre sopra ai pseudo-elements */
.aw-bg-a-glow > *,
.aw-bg-a-glow > .container,
.aw-bg-a-glow > .e-con-inner {
position: relative;
z-index: 2;
}
/* Modificatore: ancoraggio a sinistra invece che destra */
.aw-bg-a-glow--left::before,
.e-con.aw-bg-a-glow--left::before {
right: auto !important;
left: -8% !important;
}
.aw-bg-a-glow--left::after,
.e-con.aw-bg-a-glow--left::after {
right: auto !important;
left: -8% !important;
}
/* ============================================================
aw-bg-glow — Classe utility per SOLO bagliore cyan (senza A).
Modificatori: --center (default), --left, --right
Da applicare a un Container Elementor.
============================================================ */
.aw-bg-glow,
.e-con.aw-bg-glow {
position: relative !important;
overflow: hidden;
}
.aw-bg-glow-big {
position: relative !important;
}
.aw-bg-glow-big::before {
content: "" !important;
position: absolute !important;
top: -10% !important;
right: 0 !important;
left: auto !important;
width: min(1500px, 100vw) !important;
aspect-ratio: 1 / 1 !important;
background-image: url("assets/aw-cyan-glow.svg") !important;
background-repeat: no-repeat !important;
background-position: top right !important;
background-size: contain !important;
pointer-events: none !important;
display: block !important;
z-index: 0 !important;
}
.aw-bg-glow::before,
.e-con.aw-bg-glow::before {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: min(900px, 70vw) !important;
aspect-ratio: 1 / 1 !important;
background-image: url("assets/aw-cyan-glow.svg") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
pointer-events: none !important;
display: block !important;
z-index: 0 !important;
}
/* Contenuto sopra al bagliore */
.aw-bg-glow > *,
.aw-bg-glow > .container,
.aw-bg-glow > .e-con-inner {
position: relative;
z-index: 1;
}
/* Modificatori posizione */
.aw-bg-glow--left::before,
.e-con.aw-bg-glow--left::before {
left: -8% !important;
transform: translateY(-50%) !important;
}
.aw-bg-glow--right::before,
.e-con.aw-bg-glow--right::before {
left: auto !important;
right: -8% !important;
transform: translateY(-50%) !important;
}
/* === ARWEB END === */
/* === ARWEB START: design fidelity (CTA + Newsletter) 2026-05-15 === */
/* ============================================================
CTA "Pronto a portare..." — fedeltà al mockup
Scope: .aw-cta-section (funziona sia con il fallback PHP che
con il rendering Elementor Container — basta che la sezione
abbia la class .aw-cta-section).
============================================================ */
/* Watermark logo Arweb sullo sfondo + glow cyan dietro */
.aw-cta-section { overflow: hidden; position: relative; }
/* ::before = GLOW cyan radiale (livello più in basso) */
.aw-cta-section::before {
content: "";
position: absolute;
top: 50%;
left: -10%;
transform: translateY(-50%);
width: min(820px, 60vw);
aspect-ratio: 1 / 1;
background: url("assets/aw-cyan-glow.svg") center/contain no-repeat;
pointer-events: none;
z-index: 0;
}
/* ::after = logo "A" watermark (sopra al glow) */
.aw-cta-section::after {
content: "";
position: absolute;
top: 50%;
left: -8%;
transform: translateY(-50%);
width: min(820px, 60vw);
aspect-ratio: 808 / 645;
background: url("assets/aw-logo-watermark.svg") center/contain no-repeat;
opacity: 0.06;
pointer-events: none;
z-index: 1;
}
/* Contenuto sempre sopra al watermark e al glow */
.aw-cta-section > *,
.aw-cta-section .container,
.aw-cta-section__inner { position: relative; z-index: 2; }
/* --- Widget Heading di Elementor: titolo grande con span cyan ---
!important per battere CSS iniettato da Elementor sul widget. */
.aw-cta-section .elementor-widget-heading .elementor-heading-title,
.aw-cta-section .elementor-widget-heading h2.elementor-heading-title,
.aw-cta-section .elementor-widget-heading h3.elementor-heading-title,
.aw-cta-section h2.aw-cta-section__title {
font-size: clamp(28px, 3.2vw, 42px) !important;
font-weight: 800 !important;
line-height: 1.15 !important;
letter-spacing: -0.01em !important;
color: var(--aw-white) !important;
margin: 0 0 20px !important;
}
.aw-cta-section .elementor-heading-title span,
.aw-cta-section__title span { color: var(--aw-cyan) !important; }
.aw-newsletter .elementor-heading-title span,
.aw-newsletter__title span { color: var(--aw-cyan) !important; }
/* --- Widget Text Editor di Elementor: sottotitolo muted --- */
.aw-cta-section .elementor-widget-text-editor,
.aw-cta-section .elementor-widget-text-editor p,
.aw-cta-section p.aw-cta-section__subtitle {
color: var(--aw-text-muted);
font-size: 15px;
line-height: 1.6;
margin: 0;
max-width: 420px;
}
/* --- Form CF7: label cyan, non uppercase ---
Anche il selettore .aw-form-block per styling del form fuori dal CTA section
(es. pagina Contatti) — stessa identica grafica del form CTA. */
.aw-cta-section .wpcf7-form .form-wrapper-1-col .form-item label,
.aw-cta-section .wpcf7-form .form-wrapper-2-col .form-item label,
.aw-cta-section .wpcf7-form .form-item-textarea label,
.aw-form-block .wpcf7-form .form-wrapper-1-col .form-item label,
.aw-form-block .wpcf7-form .form-wrapper-2-col .form-item label,
.aw-form-block .wpcf7-form .form-item-textarea label,
.aw-form-block .wpcf7-form .select-holder label {
position: static;
transform: none;
color: var(--aw-cyan);
text-transform: none;
letter-spacing: 0;
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
}
/* --- Form CF7: textarea con bordo box (no floating label) --- */
.aw-cta-section .wpcf7-form .form-item-textarea,
.aw-form-block .wpcf7-form .form-item-textarea {
margin-top: 4px;
margin-bottom: 24px;
}
.aw-cta-section .wpcf7-form .form-item-textarea textarea,
.aw-form-block .wpcf7-form .form-item-textarea textarea {
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid var(--aw-border) !important;
border-bottom: 1px solid var(--aw-border) !important;
border-radius: var(--aw-radius-sm, 8px) !important;
padding: 14px 16px !important;
min-height: 120px;
}
.aw-cta-section .wpcf7-form .form-item-textarea textarea:focus,
.aw-form-block .wpcf7-form .form-item-textarea textarea:focus {
border-color: var(--aw-cyan) !important;
background: rgba(0, 191, 255, 0.04) !important;
box-shadow: 0 0 0 3px var(--aw-cyan-glow, rgba(0,191,255,0.15));
}
/* --- Form footer .aw-form-block: stessa logica del CTA (privacy full + bottone dx) --- */
.aw-form-block .wpcf7-form .form-footer {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 20px;
margin-top: 8px;
}
.aw-form-block .wpcf7-form .form-consent {
margin: 0;
}
.aw-form-block .wpcf7-form .form-footer .form-button {
position: relative;
display: inline-block;
background: transparent;
box-shadow: none;
border-radius: 0;
margin: 0;
overflow: visible;
align-self: flex-end;
}
.aw-form-block .wpcf7-form .form-footer .form-button::after {
content: "";
display: block;
position: absolute;
right: 28px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
z-index: 2;
transition: transform .25s ease;
}
.aw-form-block .wpcf7-form .form-footer .form-button:hover::after {
transform: translate(4px, -50%);
}
.aw-form-block .wpcf7-form .form-footer .form-button .wpcf7-submit {
background: var(--aw-cyan) !important;
color: #08142c;
border: none !important;
border-radius: 999px;
padding: 16px 60px 16px 36px;
min-width: 220px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
text-align: left;
cursor: pointer;
transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
box-shadow: 0 0 28px rgba(0, 191, 255, 0.35);
}
.aw-form-block .wpcf7-form .form-footer .form-button .wpcf7-submit:hover {
background: var(--aw-cyan-dark) !important;
box-shadow: 0 0 42px rgba(0, 191, 255, 0.6);
transform: translateY(-1px);
}
.aw-form-block .wpcf7-form .form-footer .form-button .wpcf7-submit:active {
transform: translateY(0);
}
.aw-form-block .wpcf7-form .form-footer .form-button .wpcf7-spinner {
position: absolute;
left: 100%;
top: 50%;
margin: 0 0 0 12px;
transform: translateY(-50%);
}
/* --- Form footer CTA: privacy full-width sopra, bottone a destra sotto --- */
.aw-cta-section .wpcf7-form .form-footer {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 20px;
margin-top: 8px;
}
.aw-cta-section .wpcf7-form .form-consent {
margin: 0;
}
.aw-cta-section .wpcf7-form .form-footer .form-button {
align-self: flex-end;
}
/* Wrapper neutro: posizione relativa per ancorare la freccia */
.aw-cta-section .wpcf7-form .form-footer .form-button {
position: relative;
display: inline-block;
background: transparent;
box-shadow: none;
border-radius: 0;
margin: 0;
overflow: visible;
}
/* Freccia SVG (::after del wrapper, non del submit — gli non hanno pseudo).
SVG inline come data URI così non dipende da file esterno. */
.aw-cta-section .wpcf7-form .form-footer .form-button::after {
content: "";
display: block;
position: absolute;
right: 28px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
z-index: 2;
transition: transform .25s ease;
}
.aw-cta-section .wpcf7-form .form-footer .form-button:hover::after {
transform: translate(4px, -50%);
}
/* Submit: padding-right maggiorato per far spazio alla freccia */
.aw-cta-section .wpcf7-form .form-footer .form-button .wpcf7-submit {
background: var(--aw-cyan) !important;
color: #08142c;
border: none !important;
border-radius: 999px;
padding: 16px 60px 16px 36px;
min-width: 280px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
text-align: left;
cursor: pointer;
transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
box-shadow: 0 0 28px rgba(0, 191, 255, 0.35);
}
.aw-cta-section .wpcf7-form .form-footer .form-button .wpcf7-submit:hover {
background: var(--aw-cyan-dark) !important;
box-shadow: 0 0 42px rgba(0, 191, 255, 0.6);
transform: translateY(-1px);
}
.aw-cta-section .wpcf7-form .form-footer .form-button .wpcf7-submit:active {
transform: translateY(0);
}
/* Spinner CF7: fuori dal flusso del wrapper (così non spinge la freccia) */
.aw-cta-section .wpcf7-form .form-footer .form-button .wpcf7-spinner {
position: absolute;
left: 100%;
top: 50%;
margin: 0 0 0 12px;
transform: translateY(-50%);
}
/* --- Solo fallback HTML: rimuove box decorativo intorno al form --- */
.aw-cta-section__form {
background: transparent;
border: none;
padding: 0;
}
/* ============================================================
NEWSLETTER — fedeltà al mockup
Scope: .aw-newsletter (funziona con fallback PHP e con
Container Elementor che ha quella class).
============================================================ */
/* --- Widget Heading: titolo con span cyan (stessa scala del CTA) ---
Note: Elementor inietta CSS con specificità >.aw-newsletter — quindi
!important è necessario per garantire il design. */
.aw-newsletter .elementor-widget-heading .elementor-heading-title,
.aw-newsletter .elementor-widget-heading h2.elementor-heading-title,
.aw-newsletter .elementor-widget-heading h3.elementor-heading-title,
.aw-newsletter .elementor-widget-heading h4.elementor-heading-title,
.aw-newsletter h3.aw-newsletter__title {
font-size: clamp(28px, 3.2vw, 42px) !important;
font-weight: 800 !important;
line-height: 1.15 !important;
letter-spacing: -0.01em !important;
color: var(--aw-white) !important;
margin: 0 !important;
}
.aw-newsletter .elementor-heading-title span,
.aw-newsletter__title span { color: var(--aw-cyan); }
/* --- Solo fallback HTML: container piatto, no box --- */
.aw-newsletter__inner {
background: transparent;
border: none;
padding: 0;
}
/* --- Form CF7: email a tutta larghezza --- */
.aw-newsletter .wpcf7-form .form-wrapper-1-col { margin: 0; }
.aw-newsletter .wpcf7-form .form-wrapper-1-col .form-item {
padding: 0;
margin: 0 0 16px;
width: 100%;
}
.aw-newsletter .wpcf7-form .form-wrapper-1-col .form-item label {
color: var(--aw-cyan) !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
}
.aw-newsletter .wpcf7-form .form-wrapper-1-col .form-item input {
border-radius: var(--aw-radius-sm, 8px) !important;
background: var(--aw-bg-card) !important;
border: 1px solid var(--aw-border) !important;
height: 56px;
line-height: 56px;
}
/* --- Footer: privacy sx, bottone dx --- */
.aw-newsletter .wpcf7-form .form-footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
gap: 24px;
margin-top: 0;
flex-wrap: wrap;
}
.aw-newsletter .wpcf7-form .form-consent {
flex: 1 1 auto;
margin: 0;
}
.aw-newsletter .wpcf7-form .form-footer .form-button {
/* wrapper neutro */
display: inline-block;
background: transparent;
box-shadow: none;
border-radius: 0;
margin: 0;
overflow: visible;
}
.aw-newsletter .wpcf7-form .form-footer .form-button .wpcf7-submit {
background: var(--aw-cyan) !important;
color: #030d1a;
border: none !important;
border-radius: 999px;
padding: 14px 32px;
min-width: 140px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
box-shadow: 0 0 24px rgba(0, 191, 255, 0.35);
}
.aw-newsletter .wpcf7-form .form-footer .form-button .wpcf7-submit:hover {
background: var(--aw-cyan-dark) !important;
box-shadow: 0 0 32px rgba(0, 191, 255, 0.55);
transform: translateY(-1px);
}
.aw-newsletter .wpcf7-form .form-footer .form-button .wpcf7-submit:active {
transform: translateY(0);
}
/* Spinner CF7: fuori dal flusso del wrapper */
.aw-newsletter .wpcf7-form .form-footer .form-button .wpcf7-spinner {
position: absolute;
left: 100%;
top: 50%;
margin: 0 0 0 12px;
transform: translateY(-50%);
}
@media (max-width: 700px) {
.aw-newsletter .wpcf7-form .form-footer {
flex-direction: column;
align-items: stretch;
}
.aw-newsletter .wpcf7-form .form-footer .form-button .wpcf7-submit {
width: 100%;
}
}
/* === ARWEB END === */