/* ===================================================== Cloud Transition Page — cloud-transition.css Fonts loaded in page : Fira Sans (CMC/Enterprise), Montserrat (Nooko) ===================================================== */ /* ── Intro section ── */ .ct-intro-section { background: #f7f7f7; padding: 72px 0 56px; } .ct-intro-inner { max-width: 680px; margin: 0 auto; text-align: center; } .ct-badge { display: inline-block; background: #fff0f2; color: #D21F3C; border: 1px solid #f5c6cd; border-radius: 20px; padding: 4px 16px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 22px; font-family: 'Fira Sans', 'Open Sans', sans-serif; } .ct-headline { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; color: #111126; margin-bottom: 18px; line-height: 1.28; font-family: Poppins, sans-serif; } .ct-body { font-size: 1rem; color: #545E67; line-height: 1.7; margin-bottom: 28px; } .ct-customer-note { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid #D3D3D9; border-radius: 10px; padding: 16px 20px; text-align: left; max-width: 600px; margin: 0 auto; } .ct-customer-note i { color: #5B57E5; font-size: 1.05rem; margin-top: 2px; flex-shrink: 0; } .ct-customer-note p { margin: 0; font-size: 0.88rem; color: #545E67; line-height: 1.65; } /* ── Options section ── */ .ct-options-section { padding: 60px 0 80px; background: #fff; } .ct-section-subtitle { text-align: center; font-size: 0.95rem; color: #545E67; margin-bottom: 36px; } .ct-options-grid { display: flex; gap: 28px; justify-content: center; align-items: stretch; flex-wrap: wrap; margin-bottom: 44px; } /* ── Shared card base ── */ .ct-card { flex: 1 1 340px; max-width: 480px; display: flex; flex-direction: column; overflow: hidden; } /* ── Enterprise card (CMC style) ── */ .ct-card-enterprise { background: #ffffff; border: 1.5px solid #CCCCCC; border-radius: 20px; font-family: 'Fira Sans', 'Open Sans', sans-serif; } .ct-card-enterprise .ct-card-logo-area { padding: 24px 28px 20px; border-bottom: 1px solid #f0f0f0; } .ct-card-enterprise .ct-card-logo { height: 28px; width: auto; } .ct-card-enterprise .ct-card-body { padding: 24px 28px; flex: 1; } .ct-card-enterprise .ct-card-title { font-size: 1.15rem; font-weight: 700; color: #111126; margin-bottom: 12px; font-family: 'Fira Sans', 'Open Sans', sans-serif; } .ct-card-enterprise .ct-card-description { font-size: 0.88rem; color: #545E67; line-height: 1.7; margin-bottom: 20px; } .ct-card-enterprise .ct-bullets { list-style: none; padding: 0; margin: 0; } .ct-card-enterprise .ct-bullets li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 0.87rem; color: #333; border-bottom: 1px solid #f7f7f7; } .ct-card-enterprise .ct-bullets li:last-child { border-bottom: none; } .ct-card-enterprise .ct-bullets li i { color: #D21F3C; font-size: 1rem; flex-shrink: 0; } .ct-card-enterprise .ct-card-footer-area { padding: 20px 28px 28px; border-top: 1px solid #f0f0f0; } .ct-btn-enterprise { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; background: #D21F3C; color: #fff !important; border-radius: 4px; font-size: 0.9rem; font-weight: 600; text-decoration: none !important; transition: background 0.2s; font-family: 'Fira Sans', 'Open Sans', sans-serif; } .ct-btn-enterprise:hover, .ct-btn-enterprise:focus { background: #b81a33; color: #fff !important; outline: 2px solid #b81a33; outline-offset: 2px; } .ct-card-enterprise .ct-helper { margin: 10px 0 0; font-size: 0.78rem; color: #888E92; text-align: center; line-height: 1.4; } /* ── Nooko card (Nooko brand style) ── */ .ct-card-nooko { border: 1.5px solid #d9dee5; border-radius: 12px; font-family: 'Montserrat', 'Open Sans', sans-serif; background: #f5f7fa; } .ct-card-nooko .ct-card-logo-area { padding: 24px 28px 20px; border-bottom: 1px solid #e9edf3; background: #ffffff; border-radius: 10px 10px 0 0; } .ct-card-nooko .ct-card-logo { height: 28px; width: auto; } .ct-card-nooko .ct-card-body { padding: 24px 28px; flex: 1; } .ct-card-nooko .ct-card-title { font-size: 1.15rem; font-weight: 700; color: #111827; margin-bottom: 12px; font-family: 'Montserrat', 'Open Sans', sans-serif; } .ct-card-nooko .ct-card-description { font-size: 0.88rem; color: #334155; line-height: 1.7; margin-bottom: 20px; } .ct-card-nooko .ct-bullets { list-style: none; padding: 0; margin: 0; } .ct-card-nooko .ct-bullets li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 0.87rem; color: #334155; border-bottom: 1px solid #e9edf3; } .ct-card-nooko .ct-bullets li:last-child { border-bottom: none; } .ct-card-nooko .ct-bullets li i { color: #8fb53a; font-size: 1rem; flex-shrink: 0; } .ct-card-nooko .ct-card-footer-area { padding: 20px 28px 28px; border-top: 1px solid #e9edf3; background: #f1f4f8; border-radius: 0 0 10px 10px; } .ct-btn-nooko { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; background: #8fb53a; color: #fff !important; border-radius: 10px; font-size: 0.9rem; font-weight: 600; text-decoration: none !important; transition: background 0.2s; font-family: 'Montserrat', 'Open Sans', sans-serif; } .ct-btn-nooko:hover, .ct-btn-nooko:focus { background: #7da030; color: #fff !important; outline: 2px solid #7da030; outline-offset: 2px; } .ct-card-nooko .ct-helper { margin: 10px 0 0; font-size: 0.78rem; color: #64748b; text-align: center; line-height: 1.4; } /* ── Support note ── */ .ct-support-note { text-align: center; font-size: 0.9rem; color: #545E67; padding-top: 4px; } .ct-support-note a { color: #D21F3C; text-decoration: underline; } .ct-support-note a:hover { color: #b81a33; } /* ── Responsive ── */ @media (max-width: 768px) { .ct-intro-section { padding: 48px 0 40px; } .ct-options-section { padding: 44px 0 60px; } .ct-options-grid { flex-direction: column; align-items: center; } .ct-card { max-width: 100%; width: 100%; flex: none; } } @media (max-width: 480px) { .ct-intro-inner { padding: 0 4px; } .ct-card-enterprise .ct-card-logo-area, .ct-card-enterprise .ct-card-body, .ct-card-enterprise .ct-card-footer-area, .ct-card-nooko .ct-card-logo-area, .ct-card-nooko .ct-card-body, .ct-card-nooko .ct-card-footer-area { padding-left: 20px; padding-right: 20px; } }