/* =================================================== AZUL - Tap to Pay en iPhone - Landing Page Custom styles (built on top of Bootstrap 3.3.7) Measurements taken directly from the source PSB exports (2x design: native px / 2 = CSS px) =================================================== */ @font-face { font-family: "VAG Rounded"; src: url("../fonts/vag-rounded-bold.woff2") format("woff2"), url("../fonts/vag-rounded-bold.woff") format("woff"), url("../fonts/vag-rounded-bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "VAG Rounded"; src: url("../fonts/vag-rounded-light.woff2") format("woff2"), url("../fonts/vag-rounded-light.woff") format("woff"), url("../fonts/vag-rounded-light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "VAG Rounded"; src: url("../fonts/vag-rounded-thin.woff2") format("woff2"), url("../fonts/vag-rounded-thin.woff") format("woff"), url("../fonts/vag-rounded-thin.otf") format("opentype"); font-weight: 100; font-style: normal; font-display: swap; } :root { --azul-navy: #042361; --azul-navy-glow: #0a90d1; --azul-cyan: #02abe3; --azul-orange: #f7921e; --azul-orange-dark: #e07d0c; --azul-gray-bg: #f0f0f0; --azul-box-bg: #f4f4f6; --azul-text: #1d1d1f; --azul-text-soft: #6e6e73; --font-bold: "VAG Rounded", "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-light: "VAG Rounded", "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif; } html, body { height: 100%; } .ms-rtestate-field { background: #f0f0f0; } body { font-family: var(--font-light); font-weight: 300; color: var(--azul-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Narrow boxed page: the whole landing is a centered column sitting on the #f0f0f0 canvas, not a full-bleed layout. Each section below is its own panel with a small gap revealing the page background underneath. The #f0f0f0 lives on this wrapper div, not on . */ .ttp-page { /* max-width: 1024px; */ max-width: 824px; margin: 0 auto; background-color: #f0f0f0; } .ttp-page>section { margin-bottom: 20px; } .ttp-page>section:last-child { margin-bottom: 0; } .ttp-container { padding-left: 24px; padding-right: 24px; } img { max-width: 100%; height: auto; } a { color: var(--azul-cyan); } a:hover, a:focus { color: var(--azul-navy); text-decoration: none; } /* ---------- Buttons ---------- */ .btn-azul { display: inline-block; background-color: var(--azul-orange); color: #ffffff !important; font-family: var(--font-bold); font-weight: 700; font-size: 14px; line-height: 18px; padding: 9px 32px; border-radius: 999px; border: none; text-decoration: none; -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; } .btn-azul:hover, .btn-azul:focus { background-color: var(--azul-orange-dark); color: #ffffff !important; text-decoration: none; } /* ---------- Navy sections (hero / video / cta) ---------- */ .ttp-navy{ background-color:var(--azul-navy); background-image:radial-gradient(ellipse 85% 60% at 50% 108%, var(--azul-navy-glow) 0%, var(--azul-navy) 62%); color:#ffffff !important; } /* Hero */ .ttp-hero { background-image: radial-gradient(ellipse 55% 45% at 50% 72%, var(--azul-navy-glow) 0%, var(--azul-navy) 95%); padding-top: 90px; padding-bottom: 0; text-align: center; } .ttp-hero h1 { font-family: var(--font-bold); font-weight: 700; font-size: 30px; line-height: 1.18; margin: 0 0 20px !important; color: #fff !important; } .ttp-hero p.lead { max-width: 560px; margin: 0 auto 32px !important; font-family: var(--font-light) !important; font-weight: 300 !important; font-size: 16px !important; line-height: 1.7 !important; color: #fff !important; } @media (min-width:600px) { .ttp-hero h1 { font-size: 38px; } } @media (min-width:768px) { .ttp-hero h1 { font-size: 44px; margin-bottom: 22px !important; ; } .ttp-hero p.lead { font-size: 17px; line-height: 1.75; margin-bottom: 40px; } } .ttp-hero .ttp-hero-img { padding-bottom: 36px; } .ttp-hero .ttp-hero-img img { display: block; width: 100%; } /* Video / "Mira cómo funciona" */ .ttp-video { background-image: radial-gradient(ellipse 50% 75% at 50% -5%, #02abe3 0%, #10215f 78%); padding-top: 50px; padding-bottom: 50px; } .ttp-video h2 { font-family: var(--font-bold); font-weight: 700; font-size: 32px; line-height: 1.2; margin: 0; color: #fff !important; } .ttp-video .ttp-video-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: 16px; overflow: hidden; } .ttp-video .ttp-video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; } .ttp-video .ttp-video-media { margin-top: 24px; } .ttp-video .ttp-video-media img { border-radius: 16px; display: block; width: 100%; } @media (min-width:768px) { .ttp-video .ttp-video-media { margin-top: 0; } } /* ---------- White feature sections ---------- */ .ttp-feature { background-color: #ffffff; padding-top: 56px; padding-bottom: 56px; } .ttp-feature .ttp-feature-media { margin-bottom: 28px; } .ttp-feature .ttp-feature-media img { border-radius: 14px; display: block; width: 100%; } .ttp-feature h2 { font-family: var(--font-bold); font-weight: 700; font-size: 32px; line-height: 1.22; color: var(--azul-navy) !important; margin: 0 0 18px !important; } .ttp-feature h2.ttp-h2-cyan { color: var(--azul-cyan) !important; } .ttp-feature p { font-family: var(--font-light) !important; font-weight: 300 !important; font-size: 20px !important; line-height: 1.75; color: var(--azul-text) !important; } .ttp-feature p strong { font-weight: 700; font-family: var(--font-bold); } @media (min-width:768px) { .ttp-feature .ttp-feature-media { margin-bottom: 0; } } /* Vertically centers the two Bootstrap grid columns in a .row next to each other. This only changes alignment, not width: column widths still come entirely from Bootstrap's own .col-sm-* percentages. Scoped to the sm+ breakpoint so the default Bootstrap stacking behavior below 768px (each .col-sm-* becomes a full-width block) is left untouched. */ @media (min-width:768px) { .row-flex { display: flex; flex-wrap: wrap; align-items: center; } } /* Accessibility icon box (real Apple accessibility artwork, cropped from source) */ .ttp-feature .ttp-feature-media.ttp-a11y-media img { border-radius: 0; } /* ---------- 3 steps section ---------- */ .ttp-steps { background-color: #ffffff; padding-top: 60px; padding-bottom: 60px; text-align: center; } .ttp-steps h2 { font-family: var(--font-bold); font-weight: 700; font-size: 28px; line-height: 1.25; color: var(--azul-cyan) !important; margin: 0 0 44px !important; } .ttp-steps .ttp-step { margin-bottom: 34px; text-align: left; max-width: 280px; margin-left: auto; margin-right: auto; } .ttp-steps .ttp-step-num .step-icon { width: 36px; height: 36px; line-height: 31px; text-align: center; margin: 0 0 14px; } .ttp-steps .ttp-step p { font-family: var(--font-light); font-weight: 300; font-size: 15px; line-height: 1.6; margin: 0; } @media (min-width:768px) { .ttp-steps .ttp-step { margin-bottom: 0; margin-left: 0; } } /* ---------- Final CTA ---------- */ .ttp-cta { padding-top: 60px; padding-bottom: 60px; text-align: center; margin-bottom: 0 !important; } .ttp-cta h2 { font-family: var(--font-bold); font-weight: 700; font-size: 22px; line-height: 1.25; margin: 0 !important; color: #ffffff !important; margin-bottom: 5px !important; } .ttp-cta h2.ttp-cta-cyan { color: var(--azul-cyan) !important; margin-bottom: 20px !important; } @media (min-width:600px) { .ttp-cta h2 { font-size: 26px; } } @media (min-width:768px) { .ttp-cta h2 { font-size: 30px; line-height: 1.2; } } .ttp-cta p.ttp-cta-tag { font-family: var(--font-light) !important; font-size: 17px !important; margin: 0 0 10px !important; color: #fff !important; } .ttp-cta p.ttp-cta-price { font-family: var(--font-light) !important; font-weight: 300 !important; font-size: 14px !important; color: #c7d3e8 !important; max-width: 520px; margin: 0 auto 28px !important; } .ttp-cta .btn-azul { margin-top: 6px; } /* ---------- Legal footer ---------- */ .ttp-legal { background-color: var(--azul-gray-bg) !important; padding-top: 32px !important; padding-bottom: 42px !important; } .ttp-legal p { font-family: var(--font-light) !important; font-weight: 300; font-size: 12px !important; line-height: 1.75 !important; color: var(--azul-text-soft) !important; } .ttp-legal .ttp-legal-title { font-family: var(--font-light); font-size: 13px; color: var(--azul-text-soft) !important; margin-bottom: 16px; } .ttp-legal p { margin-bottom: 16px; } .ttp-legal strong { font-family: var(--font-bold); font-weight: 700; } .ttp-legal a { color: var(--azul-text-soft); text-decoration: underline; } .ttp-legal a:hover { color: var(--azul-navy); } /* utility */ .ttp-text-center { text-align: center; }