/* Revolhost Order Form - Version Premium */
/* Variables globales */
:root {
--revolhost-primary: #2563eb;
--revolhost-secondary: #7c3aed;
--revolhost-accent: #f59e0b;
--revolhost-success: #10b981;
--revolhost-danger: #ef4444;
--revolhost-dark: #1e293b;
--revolhost-light: #f8fafc;
--revolhost-border: #e2e8f0;
--revolhost-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
--revolhost-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--revolhost-hero-gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #db2777 100%);
}
/* Reset et base */
* {
box-sizing: border-box;
}
.revolhost-container {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: var(--revolhost-dark);
background: #ffffff;
}
/* Hero Section */
.revolhost-hero {
position: relative;
background: var(--revolhost-hero-gradient);
color: white;
padding: 80px 0 120px;
overflow: hidden;
text-align: center;
}
.revolhost-hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
url('data:image/svg+xml;utf8,
');
background-size: cover, cover, 100% 100%;
will-change: transform;
}
.revolhost-hero-content {
position: relative;
z-index: 2;
}
.revolhost-hero-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 20px;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
animation: slideInDown 1s ease-out;
}
.revolhost-hero-subtitle {
font-size: 1.4rem;
opacity: 0.9;
margin-bottom: 40px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
animation: slideInUp 1s ease-out 0.2s both;
}
/* Badge promo */
.revolhost-promo-badge {
display: inline-block;
background: var(--revolhost-accent);
color: white;
padding: 12px 25px;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
margin-bottom: 40px;
box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
animation: pulse 2s infinite;
}
/* Recherche de domaine dans le hero */
.revolhost-domain-hero {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 40px;
margin: 40px auto 0;
max-width: 600px;
border: 1px solid rgba(255, 255, 255, 0.2);
animation: slideInUp 1s ease-out 0.4s both;
}
.revolhost-domain-hero h3 {
font-size: 1.5rem;
margin-bottom: 25px;
font-weight: 700;
}
.revolhost-search-group {
display: flex;
gap: 0;
margin-bottom: 20px;
background: white;
border-radius: 15px;
padding: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.revolhost-domain-input {
flex: 1;
border: none;
padding: 18px 20px;
font-size: 1.1rem;
border-radius: 10px;
background: transparent;
color: var(--revolhost-dark);
outline: none;
}
.revolhost-domain-input::placeholder {
color: #9ca3af;
}
.revolhost-search-btn {
background: var(--revolhost-primary);
color: white;
border: none;
padding: 18px 30px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1rem;
}
.revolhost-search-btn:hover {
background: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
}
/* Extensions */
.revolhost-extensions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.revolhost-ext-badge {
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.revolhost-ext-badge:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
/* Résultats de domaine */
.revolhost-domain-results {
margin-top: 30px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 25px;
color: var(--revolhost-dark);
}
.revolhost-domain-results h4 {
margin-bottom: 20px;
color: var(--revolhost-dark);
}
.revolhost-results-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.revolhost-result-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border-radius: 10px;
transition: all 0.3s ease;
}
.revolhost-result-item.available {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
}
.revolhost-result-item.taken {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
}
.domain-info {
display: flex;
align-items: center;
gap: 15px;
}
.status-available {
color: var(--revolhost-success);
font-weight: 600;
}
.status-taken {
color: var(--revolhost-danger);
font-weight: 600;
}
.domain-action {
display: flex;
align-items: center;
gap: 15px;
}
.domain-price {
font-weight: 700;
color: var(--revolhost-success);
font-size: 1.1rem;
}
.revolhost-add-btn {
background: var(--revolhost-success);
color: white;
border: none;
padding: 8px 20px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.revolhost-add-btn:hover {
background: #059669;
transform: translateY(-2px);
}
/* Section des plans */
.revolhost-plans-section {
padding: 100px 0;
background:
radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.05) 0%, transparent 20%),
radial-gradient(circle at 90% 80%, rgba(124, 58, 237, 0.05) 0%, transparent 20%),
linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);
}
.revolhost-plans-title {
font-size: 3rem;
font-weight: 800;
color: var(--revolhost-dark);
margin-bottom: 15px;
text-align: center;
}
.revolhost-plans-subtitle {
font-size: 1.2rem;
color: #64748b;
text-align: center;
margin-bottom: 0;
}
/* Cartes de plans */
.revolhost-plan-card {
background: white;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
position: relative;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
border: 2px solid var(--revolhost-border);
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.revolhost-plan-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--revolhost-primary) 0%, var(--revolhost-secondary) 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 0;
}
.revolhost-plan-card:hover::before {
opacity: 0.05;
}
.revolhost-plan-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
border-color: var(--revolhost-primary);
}
.revolhost-plan-card.featured {
border-color: var(--revolhost-accent);
background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(217, 119, 6, 0.05) 100%);
transform: scale(1.05);
}
.revolhost-plan-card.featured:hover {
transform: translateY(-15px) scale(1.08);
}
/* Badge populaire */
.revolhost-popular-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--revolhost-accent) 0%, #d97706 100%);
color: white;
padding: 10px 25px;
border-radius: 25px;
font-size: 0.85rem;
font-weight: 700;
box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
z-index: 3;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-10px); }
60% { transform: translateX(-50%) translateY(-5px); }
}
/* Header du plan */
.revolhost-plan-header {
position: relative;
z-index: 2;
margin-bottom: 30px;
}
.plan-icon {
font-size: 3rem;
color: var(--revolhost-primary);
margin-bottom: 20px;
transition: all 0.3s ease;
}
.revolhost-plan-card:hover .plan-icon {
transform: scale(1.1) rotateY(180deg);
}
.plan-name {
font-size: 1.8rem;
font-weight: 700;
color: var(--revolhost-dark);
margin-bottom: 20px;
}
/* Pricing */
.plan-pricing {
margin-bottom: 30px;
}
.price-main {
display: flex;
align-items: baseline;
justify-content: center;
margin-bottom: 15px;
}
.currency {
font-size: 1.5rem;
font-weight: 600;
color: var(--revolhost-primary);
}
.amount {
font-size: 3.5rem;
font-weight: 800;
color: var(--revolhost-primary);
margin: 0 5px;
line-height: 1;
}
.period {
font-size: 1.2rem;
color: #64748b;
font-weight: 500;
}
.revolhost-cycle-select {
background: var(--revolhost-light);
border: 1px solid var(--revolhost-border);
border-radius: 10px;
padding: 10px 15px;
width: 100%;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
}
.revolhost-cycle-select:focus {
outline: none;
border-color: var(--revolhost-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
/* Features */
.revolhost-plan-features {
flex-grow: 1;
text-align: left;
margin-bottom: 30px;
position: relative;
z-index: 2;
}
.feature-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid rgba(226, 232, 240, 0.5);
transition: all 0.3s ease;
}
.feature-row:last-child {
border-bottom: none;
}
.feature-row:hover {
background: rgba(37, 99, 235, 0.05);
border-radius: 8px;
padding: 12px 15px;
margin: 0 -15px;
}
.feature-row i {
color: var(--revolhost-success);
font-size: 1rem;
margin-top: 2px;
flex-shrink: 0;
}
.feature-row span {
color: #475569;
font-size: 0.95rem;
line-height: 1.5;
}
/* Footer du plan */
.revolhost-plan-footer {
position: relative;
z-index: 2;
}
.revolhost-cta-btn {
width: 100%;
background: linear-gradient(135deg, var(--revolhost-primary) 0%, #1d4ed8 100%);
color: white;
border: none;
padding: 18px 25px;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
margin-bottom: 15px;
}
.revolhost-cta-btn.premium {
background: linear-gradient(135deg, var(--revolhost-accent) 0%, #d97706 100%);
}
.revolhost-cta-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.revolhost-cta-btn:hover::before {
left: 100%;
}
.revolhost-cta-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(37, 99, 235, 0.4);
}
.revolhost-cta-btn.premium:hover {
box-shadow: 0 15px 35px rgba(245, 158, 11, 0.4);
}
.revolhost-guarantee {
color: #64748b;
font-size: 0.85rem;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.revolhost-guarantee i {
color: var(--revolhost-success);
}
/* Section des avantages */
.revolhost-benefits {
background: var(--revolhost-dark);
color: white;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.revolhost-benefits::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 25% 25%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(124, 58, 237, 0.1) 0%, transparent 50%);
}
.revolhost-benefits-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 50px;
position: relative;
z-index: 2;
}
.revolhost-benefit-item {
padding: 30px 20px;
text-align: center;
transition: all 0.3s ease;
position: relative;
z-index: 2;
}
.revolhost-benefit-item:hover {
transform: translateY(-10px);
}
.benefit-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--revolhost-primary) 0%, var(--revolhost-secondary) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
transition: all 0.3s ease;
}
.revolhost-benefit-item:hover .benefit-icon {
transform: scale(1.1) rotateY(360deg);
box-shadow: 0 15px 40px rgba(37, 99, 235, 0.4);
}
.benefit-icon i {
font-size: 2rem;
color: white;
}
.revolhost-benefit-item h5 {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 10px;
color: white;
}
.revolhost-benefit-item p {
color: rgba(255, 255, 255, 0.8);
margin: 0;
font-size: 1rem;
}
/* Alerts */
.revolhost-alert {
border-radius: 12px;
padding: 20px 25px;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 15px;
font-weight: 500;
border: none;
position: relative;
overflow: hidden;
}
.revolhost-alert::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: currentColor;
}
.revolhost-alert-success {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
color: #065f46;
}
.revolhost-alert-danger {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
color: #7f1d1d;
}
/* Animations */
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.fade-in {
animation: fadeInUp 0.8s ease-out both;
}
/* Responsivité */
@media (max-width: 1200px) {
.revolhost-plan-card.featured {
transform: none;
}
.revolhost-plan-card.featured:hover {
transform: translateY(-15px) scale(1.02);
}
}
@media (max-width: 768px) {
.revolhost-hero {
padding: 60px 0 80px;
}
.revolhost-hero-title {
font-size: 2.5rem;
}
.revolhost-hero-subtitle {
font-size: 1.2rem;
}
.revolhost-domain-hero {
padding: 30px 20px;
margin: 30px 20px 0;
}
.revolhost-search-group {
flex-direction: column;
padding: 15px;
gap: 10px;
}
.revolhost-domain-input {
width: 100%;
text-align: center;
}
.revolhost-search-btn {
width: 100%;
}
.revolhost-plans-section {
padding: 60px 0;
}
.revolhost-plans-title {
font-size: 2.2rem;
}
.revolhost-plan-card {
padding: 30px 25px;
margin-bottom: 30px;
}
.amount {
font-size: 2.8rem;
}
.revolhost-result-item {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.domain-action {
width: 100%;
justify-content: space-between;
}
.revolhost-benefits {
padding: 60px 0;
}
.revolhost-benefits-title {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.revolhost-hero-title {
font-size: 2rem;
}
.revolhost-hero-subtitle {
font-size: 1rem;
}
.revolhost-domain-hero {
margin: 30px 10px 0;
padding: 25px 15px;
}
.revolhost-plans-title {
font-size: 1.8rem;
}
.plan-name {
font-size: 1.5rem;
}
.amount {
font-size: 2.5rem;
}
.revolhost-ext-badge {
font-size: 0.8rem;
padding: 6px 12px;
}
.feature-row {
font-size: 0.9rem;
}
.revolhost-popular-badge {
font-size: 0.75rem;
padding: 8px 20px;
}
}
/* Mode sombre préféré */
@media (prefers-color-scheme: dark) {
:root {
--revolhost-light: #1e293b;
--revolhost-dark: #f8fafc;
--revolhost-border: #475569;
}
}
/* Optimisations de performance */
.revolhost-plan-card {
will-change: transform;
}
.revolhost-hero-bg {
will-change: transform;
}
/* États de focus pour l'accessibilité */
.revolhost-cta-btn:focus,
.revolhost-search-btn:focus,
.revolhost-add-btn:focus {
outline: 3px solid rgba(37, 99, 235, 0.5);
outline-offset: 2px;
}
/* Amélioration du contraste pour l'accessibilité */
.revolhost-plan-card:focus-within {
border-color: var(--revolhost-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
