@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
/* Asset del tema: enqueued da page-templates/release-landing.php. Sorgente: template/styles.css nel repo — tenere allineati (rigenerato via script). */
/* ============================================================================
WeRoad — Product Release Landing — MASTER STYLES
----------------------------------------------------------------------------
CSS estratto dal sorgente Claude Design (weroad-release-v3), invariato nella
resa. Tutto scoped sotto ".wr-release" per non collidere con gli stili del
tema WordPress che ospita la pagina.
Font: Google Sans (font brand WeRoad, sostituisce Proxima Nova), usato sia per
i titoli sia per il corpo su questa pagina speciale. Caricato da GOOGLE FONTS
nel (link) — vedi index.html; nello snippet WP via @import. Non bundlato.
Fallback: system-ui. (I .ttf in assets/fonts restano solo per --embed-fonts.)
============================================================================ */
/* ---- root / tokens (scoped) ---- */
.wr-release{
--wr-coral:#FF4758;
--wr-coral-dark:#E83448;
--wr-ink:#121212;
--wr-text:#262626;
--wr-muted:#4d4d4d;
--wr-faint:#828282;
--wr-line:#F0F0F0;
--wr-surface:#F4F4F4;
--wr-font-body:'Google Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--wr-font-display:'Google Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--wr-max:1120px;
--wr-measure:720px;
background:#fff;
color:var(--wr-text);
font-family:var(--wr-font-body);
-webkit-font-smoothing:antialiased;
}
.wr-release *{box-sizing:border-box}
@keyframes wrUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* ---- layout wrappers ---- */
.wr-main{max-width:var(--wr-max);margin:0 auto;padding:0 24px}
.wr-measure{max-width:var(--wr-measure);margin:0 auto}
.wr-media{max-width:900px;margin:0 auto}
.wr-rule{height:1px;background:var(--wr-line);border:0;margin:0 0 48px}
/* ---- hero ---- */
.wr-hero{padding:76px 0 8px;animation:wrUp .5s ease both}
.wr-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wr-coral);margin-bottom:20px}
.wr-h1{
font-family:var(--wr-font-display);font-weight:700;
font-size:clamp(34px,4.6vw,52px);line-height:1.08;letter-spacing:-.02em;
margin:0;color:var(--wr-ink);
}
.wr-byline{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:14px;color:var(--wr-faint);font-weight:600}
.wr-dot{width:3px;height:3px;border-radius:50%;background:#C8C8C8}
/* ---- feature sections ---- */
.wr-section{padding:56px 0 0}
.wr-intro{padding:56px 0 8px}
.wr-h2{
font-family:var(--wr-font-body);font-weight:700;
font-size:clamp(26px,3vw,32px);line-height:1.14;letter-spacing:-.01em;
margin:0 0 22px;color:var(--wr-ink);
}
.wr-lead{font-size:20px;line-height:1.65;color:var(--wr-text);margin:0 0 26px;font-weight:500}
.wr-body{font-size:18px;line-height:1.72;color:var(--wr-muted);margin:0 0 24px}
.wr-body:last-child{margin-bottom:0}
/* Con ACF i campi WYSIWYG emettono i propri : qui .wr-lead/.wr-body sono
contenitori (
) e stiliamo i figli. Vale anche per liste/link. */
.wr-release .wr-lead>p{font-size:20px;line-height:1.65;color:var(--wr-text);font-weight:500;margin:0 0 26px}
.wr-release .wr-body>p{font-size:18px;line-height:1.72;color:var(--wr-muted);margin:0 0 24px}
.wr-release .wr-lead>p:last-child,.wr-release .wr-body>p:last-child{margin-bottom:0}
.wr-release .wr-body ul,.wr-release .wr-body ol{margin:0 0 24px;padding-left:1.4em}
.wr-release .wr-body li{font-size:18px;line-height:1.72;color:var(--wr-muted);margin:0 0 6px}
.wr-release .wr-lead a{color:var(--wr-text);text-decoration:underline}
.wr-release .wr-body a{color:var(--wr-coral);text-decoration:underline}
/* ---- media (asset reale: immagine o video) ---- */
/* Gli asset sono composizioni già rifinite (sfondo grigio + ombra), come su Airbnb.
L'asset sostituisce l'intero placeholder: niente frame device, niente didascalia. */
.wr-media{margin-top:32px}
.wr-hero-media{margin-top:36px}
.wr-media img,.wr-media video{display:block;width:100%;height:auto;border-radius:20px}
/* placeholder pulito 3:2 (quando l'asset reale non è ancora pronto) */
.wr-ph{background:var(--wr-surface);border-radius:20px;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--wr-faint);font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1.5}
/* ---- media placeholder (mockup device, alternativa quando manca l'asset reale) ---- */
.wr-stage{
background:var(--wr-surface);border-radius:20px;padding:44px 24px 40px;
display:flex;flex-direction:column;align-items:center;gap:22px;
}
.wr-devices{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;justify-content:center}
.wr-caption{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--wr-faint);text-align:center;max-width:460px;line-height:1.5}
.wr-browser{border-radius:14px;background:#fff;border:1px solid #E5E5E5;box-shadow:0 2px 8px rgba(18,18,18,.06);overflow:hidden}
.wr-browser-bar{height:32px;background:#F5F5F5;border-bottom:1px solid #ECECEC;display:flex;align-items:center;gap:6px;padding:0 12px}
.wr-browser-bar span{width:9px;height:9px;border-radius:50%;background:#DADADA}
.wr-screen{background:#FAFAFA;display:flex;align-items:center;justify-content:center}
.wr-w440{width:min(100%,440px)}
.wr-w460{width:min(100%,460px)}
.wr-ratio-16-10{aspect-ratio:16/10}
.wr-ratio-16-9{aspect-ratio:16/9}
.wr-phone{width:132px;border-radius:24px;background:#fff;border:1px solid #E5E5E5;box-shadow:0 2px 8px rgba(18,18,18,.06);padding:7px}
.wr-phone-screen{position:relative;aspect-ratio:9/19;border-radius:17px;background:#FAFAFA;display:flex;align-items:center;justify-content:center}
.wr-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:34px;height:5px;border-radius:3px;background:#E5E5E5}
.wr-play{width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center}
.wr-play::after{content:"";width:0;height:0;border-left:16px solid #A8A8A8;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.wr-play-sm{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center}
.wr-play-sm::after{content:"";width:0;height:0;border-left:11px solid #A8A8A8;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
/* ---- closing CTA ---- */
.wr-cta{padding:88px 0 96px;text-align:center}
.wr-cta .wr-rule{margin-bottom:56px}
.wr-cta-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center}
/* Primario: coral pieno, testo bianco. `!important` + scope .wr-release per battere
la regola link globale del tema del blog (a{color:coral}) quando embeddato. */
.wr-release .wr-btn{display:inline-block;background:var(--wr-coral)!important;color:#fff!important;font-weight:700;font-size:16px;padding:15px 30px;border-radius:12px;text-decoration:none;border:1px solid var(--wr-coral);transition:background .15s ease,border-color .15s ease}
.wr-release .wr-btn:hover{background:var(--wr-coral-dark)!important;border-color:var(--wr-coral-dark)}
/* Secondario: outline — fondo bianco, testo nero, bordo nero; coral all'hover. */
.wr-release .wr-link{display:inline-block;background:#fff!important;color:var(--wr-ink)!important;font-weight:700;font-size:16px;padding:15px 30px;border-radius:12px;text-decoration:none;border:1px solid var(--wr-ink);transition:color .15s ease,border-color .15s ease}
.wr-release .wr-link:hover{color:var(--wr-coral)!important;border-color:var(--wr-coral)!important}
/* ---- availability tag (modulo del brief, non ancora usato nel v3) ---- */
/* Pill riusabile per il tag di disponibilità mercati: `All markets`, `IT · DE`, ecc.
Stub pronto; attivare quando si aggiunge il markup .wr-tag alle section. */
.wr-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.02em;
color:var(--wr-coral);background:rgba(255,71,88,.08);border:1px solid rgba(255,71,88,.20);
padding:5px 11px;border-radius:999px;margin-bottom:18px}
/* ---- responsive ---- */
@media (max-width:640px){
.wr-main{padding:0 20px}
.wr-hero{padding:48px 0 4px}
.wr-intro{padding:40px 0 4px}
.wr-section{padding:44px 0 0}
.wr-rule{margin-bottom:36px}
.wr-lead,.wr-release .wr-lead>p{font-size:18px}
.wr-body,.wr-release .wr-body>p,.wr-release .wr-body li{font-size:16.5px}
.wr-stage{padding:28px 16px 26px;border-radius:16px}
.wr-media img,.wr-media video{border-radius:14px}
.wr-cta{padding:64px 0 72px}
.wr-cta-row{flex-direction:column}
.wr-btn,.wr-link{width:100%;max-width:320px;text-align:center}
}