/* ========================================================== MERITZA UI KIT Version: 1.0 ========================================================== */ /* ========================================================== SURFACE SYSTEM ========================================================== */ .mc-surface{ position:relative; background: linear-gradient( 145deg, rgba(255,255,255,.82), rgba(248,250,253,.95) ); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.45); border-radius:24px; box-shadow: 0 12px 35px rgba(10,25,70,.08); overflow:hidden; transition:all .35s ease; } .mc-surface::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background: radial-gradient( circle at top left, rgba(212,175,55,.10), transparent 35% ), radial-gradient( circle at bottom right, rgba(56,189,248,.08), transparent 40% ); } /* ========================================================== PREMIUM SURFACE ========================================================== */ .mc-surface-premium{ position:relative; background: linear-gradient( 145deg, rgba(255,255,255,.90), rgba(246,249,253,.98) ); border:1px solid rgba(212,175,55,.20); border-radius:26px; box-shadow: 0 18px 50px rgba(10,25,70,.10); } /* ========================================================== GOLD SURFACE ========================================================== */ .mc-surface-gold{ background: linear-gradient( 145deg, rgba(255,251,238,.95), rgba(255,255,255,.98) ); } /* ========================================================== HOVER EFFECT ========================================================== */ .mc-hover{ transition: transform .35s ease, box-shadow .35s ease; } .mc-hover:hover{ transform: translateY(-8px) scale(1.02); box-shadow: 0 30px 60px rgba(10,25,70,.14); } /* ========================================================== ICON CIRCLE ========================================================== */ .mc-icon-circle{ width:80px; height:80px; margin:auto; display:flex; align-items:center; justify-content:center; border-radius:50%; background: linear-gradient( 145deg, rgba(255,255,255,.96), rgba(255,246,219,.96) ); box-shadow: 0 10px 30px rgba(212,175,55,.18); } .mc-icon-circle i{ font-size:2rem; color:var(--mc-gold); } /* ========================================================== PILL ========================================================== */ .mc-pill{ display:inline-flex; align-items:center; padding:8px 18px; border-radius:999px; background:rgba(212,175,55,.12); color:var(--mc-primary); font-size:.85rem; font-weight:700; } /* ========================================================== CARD ========================================================== */ .mc-card{ position:relative; padding:32px; border-radius:24px; } /* ========================================================== SECTION ========================================================== */ .mc-section{ padding:60px 0; } .mc-section-title{ font-size:clamp(2rem,3vw,2.5rem); font-weight:800; color:var(--mc-primary); margin-bottom:0; } .mc-section-subtitle{ max-width:760px; margin:auto; color:var(--mc-text-light); line-height:1.8; } /* ========================================================== RESPONSIVE ========================================================== */ @media(max-width:768px){ .mc-card{ padding:22px; } .mc-icon-circle{ width:64px; height:64px; } .mc-icon-circle i{ font-size:1.5rem; } .mc-section{ padding:70px 0; } } /* ========================================================== SECTION HEADER ========================================================== */ .mc-section-header{ text-align:center; max-width:760px; margin:0 auto 40px; margin-bottom:16px; } .mc-section-label{ display:inline-flex; align-items:center; justify-content:center; gap:16px; font-size:.76rem; font-weight:700; letter-spacing:.30em; text-transform:uppercase; color:var(--mc-gold); margin-bottom:12px; } .mc-section-label::before, .mc-section-label::after{ content:""; width:70px; height:2px; border-radius:2px; background:linear-gradient( 90deg, rgba(212,175,55,.55), rgba(212,175,55,.95) ); } .mc-section-title{ font-size:clamp(2rem,3.5vw,2.6rem); font-weight:800; line-height:1.15; letter-spacing:-0.03em; color:var(--mc-primary); margin:0; } /* ========================================================== PREMIUM CARD ========================================================== */ .mc-card-premium{ isolation:isolate; cursor:default; position:relative; background: linear-gradient( 180deg, #ffffff 0%, #fcfdfe 35%, #f7f9fc 72%, #edf3f8 92%, #e6eef6 100% ); border:1px solid rgba(10,25,70,.10); border-radius:22px; overflow:hidden; transition:all .35s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 24px rgba(10,25,70,.06), 0 2px 6px rgba(10,25,70,.03), 0 0 0 1px rgba(212,175,55,.04); } .mc-card-premium::before{ content:""; position:absolute; top:0; left:0; width:4px; height:36px; background:linear-gradient( 180deg, var(--mc-gold), rgba(212,175,55,.15) ); border-radius:0 0 8px 0; transition:.35s ease; } .mc-card-premium::after{ content:""; position:absolute; top:18px; right:18px; width:60px; height:60px; border-radius:50%; background:radial-gradient( rgba(212,175,55,.10), transparent 70% ); opacity:.6; z-index:-1; transition:.35s ease; } .mc-card-premium:hover{ filter:saturate(1.04); transform:translateY(-4px); border-color:rgba(212,175,55,.28); box-shadow: 0 18px 42px rgba(10,25,70,.10), 0 4px 12px rgba(10,25,70,.05), 0 0 0 1px rgba(212,175,55,.08); } .mc-card-premium:hover::before{ height:70px; } /* ========================================================== PREMIUM ICON ========================================================== */ .mc-icon-premium{ width:52px; height:52px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; border-radius:18px; background:linear-gradient( 135deg, rgba(212,175,55,.16), rgba(212,175,55,.05) ); box-shadow: 0 6px 16px rgba(212,175,55,.16); transition:all .35s ease; } .mc-icon-premium i{ font-size:1.3rem; color:var(--mc-gold); } .mc-card-premium:hover .mc-icon-premium{ transform:scale(1.06) rotate(4deg); }