/*============================================================================== FREEZE CARE INDONESIA UI KIT Version : 2.0.0 Author : ChatGPT Project : Freeze Care Indonesia ==============================================================================*/ /*============================================================================== 1. RESET ==============================================================================*/ *, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; } html{ font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ font-family:"Poppins",Arial,sans-serif; font-size:1rem; font-weight:400; line-height:1.6; color:var(--fci-color-text); background:var(--fci-color-white); overflow-x:hidden; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } img{ display:block; max-width:100%; height:auto; border:none; } svg{ display:block; } picture{ display:block; } button{ font:inherit; background:none; border:none; cursor:pointer; } input, textarea, select{ font:inherit; outline:none; border:none; } a{ color:inherit; text-decoration:none; transition:all .3s ease; } ul{ list-style:none; } /*============================================================================== 2. DESIGN TOKENS ==============================================================================*/ :root{ /* COLORS */ --fci-color-primary:#0A3E91; --fci-color-primary-light:#1E88E5; --fci-color-accent:#47C2F3; --fci-color-success:#25D366; --fci-color-success-hover:#1EBE5B; --fci-color-heading:#1A1A1A; --fci-color-text:#5F6368; --fci-color-muted:#94A3B8; --fci-color-border:#E8EEF5; --fci-color-bg:#F7FAFC; --fci-color-white:#FFFFFF; /* TYPOGRAPHY */ --fci-font:"Poppins",Arial,sans-serif; --fci-fw-400:400; --fci-fw-500:500; --fci-fw-600:600; --fci-fw-700:700; /* FONT SIZE */ --fci-fs-xs:12px; --fci-fs-sm:14px; --fci-fs-md:16px; --fci-fs-lg:20px; --fci-fs-xl:28px; --fci-fs-2xl:48px; /* SPACING */ --fci-space-1:4px; --fci-space-2:8px; --fci-space-3:12px; --fci-space-4:16px; --fci-space-5:24px; --fci-space-6:32px; --fci-space-7:40px; --fci-space-8:48px; --fci-space-9:64px; --fci-space-10:80px; /* RADIUS */ --fci-radius-sm:10px; --fci-radius-md:16px; --fci-radius-lg:24px; --fci-radius-xl:32px; --fci-radius-pill:999px; /* SHADOW */ --fci-shadow-sm:0 8px 20px rgba(10,62,145,.08); --fci-shadow-md:0 16px 40px rgba(10,62,145,.12); --fci-shadow-lg:0 24px 60px rgba(10,62,145,.16); /* CONTAINER */ --fci-container:1240px; /* TRANSITION */ --fci-transition:.35s ease; } /*============================================================================== 3. BASE ==============================================================================*/ .fci-container{ width:min(100% - 40px,var(--fci-container)); margin-inline:auto; } .fci-section{ padding:80px 0; } .fci-section-sm{ padding:60px 0; } .fci-section-lg{ padding:110px 0; } .fci-overflow-hidden{ overflow:hidden; } .fci-relative{ position:relative; } /*============================================================================== 4. TYPOGRAPHY ==============================================================================*/ .fci-h1{ font-size:var(--fci-fs-2xl); font-weight:var(--fci-fw-700); line-height:1.18; letter-spacing:-.02em; color:var(--fci-color-heading); } .fci-h2{ font-size:var(--fci-fs-xl); font-weight:var(--fci-fw-700); line-height:1.3; color:var(--fci-color-heading); } .fci-h3{ font-size:var(--fci-fs-lg); font-weight:var(--fci-fw-600); line-height:1.4; color:var(--fci-color-heading); } .fci-text{ font-size:var(--fci-fs-md); line-height:1.8; color:var(--fci-color-text); } .fci-caption{ font-size:var(--fci-fs-xs); line-height:1.5; color:var(--fci-color-muted); } .fci-text-center{ text-align:center; } .fci-text-left{ text-align:left; } .fci-text-right{ text-align:right; } .fci-text-primary{ color:var(--fci-color-primary); } .fci-text-white{ color:#fff; } .fci-fw-400{ font-weight:400; } .fci-fw-500{ font-weight:500; } .fci-fw-600{ font-weight:600; } .fci-fw-700{ font-weight:700; } /*============================================================================== 5. MOBILE TYPOGRAPHY ==============================================================================*/ @media (max-width:768px){ .fci-section{ padding:60px 0; } .fci-h1{ font-size:34px; } .fci-h2{ font-size:26px; } .fci-h3{ font-size:20px; } } /*============================================================================== 6. LAYOUT SYSTEM ==============================================================================*/ .fci-grid{ display:grid; } .fci-grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--fci-space-7); align-items:center; } .fci-grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--fci-space-6); } .fci-grid-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--fci-space-5); } .fci-flex{ display:flex; } .fci-inline-flex{ display:inline-flex; } .fci-flex-column{ flex-direction:column; } .fci-flex-wrap{ flex-wrap:wrap; } .fci-items-start{ align-items:flex-start; } .fci-items-center{ align-items:center; } .fci-items-end{ align-items:flex-end; } .fci-justify-start{ justify-content:flex-start; } .fci-justify-center{ justify-content:center; } .fci-justify-between{ justify-content:space-between; } .fci-justify-end{ justify-content:flex-end; } /*============================================================================== 7. GAP SYSTEM ==============================================================================*/ .fci-gap-1{gap:var(--fci-space-1);} .fci-gap-2{gap:var(--fci-space-2);} .fci-gap-3{gap:var(--fci-space-3);} .fci-gap-4{gap:var(--fci-space-4);} .fci-gap-5{gap:var(--fci-space-5);} .fci-gap-6{gap:var(--fci-space-6);} .fci-gap-7{gap:var(--fci-space-7);} .fci-gap-8{gap:var(--fci-space-8);} .fci-gap-9{gap:var(--fci-space-9);} /*============================================================================== 8. MARGIN UTILITIES ==============================================================================*/ .fci-m-0{margin:0;} .fci-mt-1{margin-top:var(--fci-space-1);} .fci-mt-2{margin-top:var(--fci-space-2);} .fci-mt-3{margin-top:var(--fci-space-3);} .fci-mt-4{margin-top:var(--fci-space-4);} .fci-mt-5{margin-top:var(--fci-space-5);} .fci-mt-6{margin-top:var(--fci-space-6);} .fci-mt-7{margin-top:var(--fci-space-7);} .fci-mt-8{margin-top:var(--fci-space-8);} .fci-mt-9{margin-top:var(--fci-space-9);} .fci-mb-1{margin-bottom:var(--fci-space-1);} .fci-mb-2{margin-bottom:var(--fci-space-2);} .fci-mb-3{margin-bottom:var(--fci-space-3);} .fci-mb-4{margin-bottom:var(--fci-space-4);} .fci-mb-5{margin-bottom:var(--fci-space-5);} .fci-mb-6{margin-bottom:var(--fci-space-6);} .fci-mb-7{margin-bottom:var(--fci-space-7);} .fci-mb-8{margin-bottom:var(--fci-space-8);} .fci-mb-9{margin-bottom:var(--fci-space-9);} .fci-mx-auto{ margin-left:auto; margin-right:auto; } /*============================================================================== 9. PADDING UTILITIES ==============================================================================*/ .fci-p-1{padding:var(--fci-space-1);} .fci-p-2{padding:var(--fci-space-2);} .fci-p-3{padding:var(--fci-space-3);} .fci-p-4{padding:var(--fci-space-4);} .fci-p-5{padding:var(--fci-space-5);} .fci-p-6{padding:var(--fci-space-6);} .fci-p-7{padding:var(--fci-space-7);} .fci-p-8{padding:var(--fci-space-8);} .fci-px-4{ padding-left:var(--fci-space-4); padding-right:var(--fci-space-4); } .fci-px-5{ padding-left:var(--fci-space-5); padding-right:var(--fci-space-5); } .fci-py-4{ padding-top:var(--fci-space-4); padding-bottom:var(--fci-space-4); } .fci-py-5{ padding-top:var(--fci-space-5); padding-bottom:var(--fci-space-5); } /*============================================================================== 10. WIDTH & HEIGHT ==============================================================================*/ .fci-w-100{ width:100%; } .fci-w-auto{ width:auto; } .fci-max-480{ max-width:480px; } .fci-max-560{ max-width:560px; } .fci-max-640{ max-width:640px; } .fci-max-720{ max-width:720px; } .fci-max-960{ max-width:960px; } .fci-h-100{ height:100%; } /*============================================================================== 11. DISPLAY ==============================================================================*/ .fci-block{ display:block; } .fci-inline{ display:inline-block; } .fci-hidden{ display:none; } /*============================================================================== 12. POSITION ==============================================================================*/ .fci-relative{ position:relative; } .fci-absolute{ position:absolute; } .fci-fixed{ position:fixed; } .fci-top-0{ top:0; } .fci-left-0{ left:0; } .fci-right-0{ right:0; } .fci-bottom-0{ bottom:0; } /*============================================================================== 13. BORDER RADIUS ==============================================================================*/ .fci-radius-sm{ border-radius:var(--fci-radius-sm); } .fci-radius-md{ border-radius:var(--fci-radius-md); } .fci-radius-lg{ border-radius:var(--fci-radius-lg); } .fci-radius-xl{ border-radius:var(--fci-radius-xl); } .fci-radius-pill{ border-radius:999px; } /*============================================================================== 14. SHADOW ==============================================================================*/ .fci-shadow-sm{ box-shadow:var(--fci-shadow-sm); } .fci-shadow-md{ box-shadow:var(--fci-shadow-md); } .fci-shadow-lg{ box-shadow:var(--fci-shadow-lg); } /*============================================================================== 15. BACKGROUND ==============================================================================*/ .fci-bg-primary{ background:var(--fci-color-primary); } .fci-bg-light{ background:var(--fci-color-bg); } .fci-bg-white{ background:#fff; } .fci-bg-gradient{ background: linear-gradient( 135deg, var(--fci-color-primary), var(--fci-color-primary-light) ); } /*============================================================================== 16. BORDER ==============================================================================*/ .fci-border{ border:1px solid var(--fci-color-border); } .fci-border-top{ border-top:1px solid var(--fci-color-border); } .fci-border-bottom{ border-bottom:1px solid var(--fci-color-border); } /*============================================================================== 17. MOBILE LAYOUT ==============================================================================*/ @media (max-width:992px){ .fci-grid-4{ grid-template-columns:repeat(2,1fr); } .fci-grid-3{ grid-template-columns:repeat(2,1fr); } .fci-grid-2{ grid-template-columns:1fr; gap:var(--fci-space-6); } } @media (max-width:768px){ .fci-grid-3, .fci-grid-4{ grid-template-columns:1fr; } .fci-container{ width:min(100% - 32px,var(--fci-container)); } } /*============================================================================== 18. BUTTON SYSTEM ==============================================================================*/ .fci-btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:16px 30px; font-family:var(--fci-font); font-size:var(--fci-fs-md); font-weight:var(--fci-fw-600); line-height:1; border:none; border-radius:var(--fci-radius-pill); cursor:pointer; transition:var(--fci-transition); position:relative; overflow:hidden; white-space:nowrap; } .fci-btn svg{ width:18px; height:18px; flex-shrink:0; } .fci-btn:hover{ transform:translateY(-3px); } .fci-btn:active{ transform:translateY(0); } .fci-btn:focus-visible{ outline:3px solid rgba(30,136,229,.28); outline-offset:4px; } /*============================================================================== 19. BUTTON VARIANTS ==============================================================================*/ .fci-btn-primary{ background:var(--fci-color-primary); color:#fff; box-shadow:var(--fci-shadow-sm); } .fci-btn-primary:hover{ background:#1254bb; box-shadow:var(--fci-shadow-md); } .fci-btn-secondary{ background:var(--fci-color-primary-light); color:#fff; } .fci-btn-secondary:hover{ background:#1778d6; } .fci-btn-success{ background:var(--fci-color-success); color:#fff; box-shadow:0 14px 35px rgba(37,211,102,.22); } .fci-btn-success:hover{ background:var(--fci-color-success-hover); } .fci-btn-outline{ background:#fff; border:2px solid var(--fci-color-primary); color:var(--fci-color-primary); } .fci-btn-outline:hover{ background:var(--fci-color-primary); color:#fff; } .fci-btn-ghost{ background:transparent; color:var(--fci-color-primary); } .fci-btn-ghost:hover{ background:#EDF5FF; } /*============================================================================== 20. BUTTON SIZE ==============================================================================*/ .fci-btn-sm{ padding:12px 20px; font-size:14px; } .fci-btn-lg{ padding:18px 34px; font-size:17px; } /*============================================================================== 21. BADGE ==============================================================================*/ .fci-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:999px; font-size:13px; font-weight:600; background:#EAF5FF; color:var(--fci-color-primary); } .fci-badge-primary{ background:var(--fci-color-primary); color:#fff; } .fci-badge-success{ background:#E9FFF2; color:#1EBE5B; } /*============================================================================== 22. CARD ==============================================================================*/ .fci-card{ background:#fff; border:1px solid var(--fci-color-border); border-radius:var(--fci-radius-lg); padding:32px; box-shadow:var(--fci-shadow-sm); transition:var(--fci-transition); } .fci-card:hover{ transform:translateY(-8px); box-shadow:var(--fci-shadow-lg); } /*============================================================================== 23. GLASS CARD ==============================================================================*/ .fci-card-glass{ background:rgba(255,255,255,.74); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.55); } /*============================================================================== 24. SERVICE CARD ==============================================================================*/ .fci-service-card{ position:relative; overflow:hidden; } .fci-service-card::before{ content:""; position:absolute; left:0; top:0; width:100%; height:5px; background: linear-gradient( 90deg, var(--fci-color-primary), var(--fci-color-primary-light) ); transform:scaleX(0); transform-origin:left; transition:.35s; } .fci-service-card:hover::before{ transform:scaleX(1); } /*============================================================================== 25. FEATURE CARD ==============================================================================*/ .fci-feature-card{ text-align:center; } .fci-feature-card img{ width:70px; height:70px; margin:auto auto 20px; } /*============================================================================== 26. TRUST CARD ==============================================================================*/ .fci-trust-card{ display:flex; align-items:center; gap:14px; padding:18px; background:rgba(255,255,255,.78); border-radius:18px; border:1px solid rgba(255,255,255,.55); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:var(--fci-shadow-sm); transition:.35s; } .fci-trust-card:hover{ transform:translateY(-6px); } .fci-trust-card img{ width:52px; height:52px; flex-shrink:0; } .fci-trust-card h3{ font-size:16px; font-weight:600; margin-bottom:4px; } .fci-trust-card p{ font-size:13px; color:var(--fci-color-muted); } /*============================================================================== 27. ICON BOX ==============================================================================*/ .fci-icon{ display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:20px; background:#F2F8FD; transition:.35s; } .fci-icon img{ width:34px; height:34px; } .fci-icon:hover{ transform:scale(1.08); } /*============================================================================== 28. FORM ==============================================================================*/ .fci-input{ width:100%; padding:16px 20px; border:1px solid var(--fci-color-border); border-radius:16px; background:#fff; transition:.3s; } .fci-input:focus{ border-color:var(--fci-color-primary-light); box-shadow:0 0 0 4px rgba(30,136,229,.10); } .fci-textarea{ min-height:140px; resize:vertical; } /*============================================================================== 29. DIVIDER ==============================================================================*/ .fci-divider{ width:100%; height:1px; background:var(--fci-color-border); } /*============================================================================== 30. MOBILE COMPONENT ==============================================================================*/ @media(max-width:768px){ .fci-btn{ width:100%; justify-content:center; } .fci-card{ padding:24px; } .fci-trust-card{ padding:16px; } } /*============================================================================== 31. HERO FRAMEWORK ==============================================================================*/ .fci-hero{ position:relative; display:flex; align-items:center; min-height:650px; overflow:hidden; background-position:center; background-size:cover; background-repeat:no-repeat; isolation:isolate; } .fci-hero-overlay{ position:absolute; inset:0; background: linear-gradient( 90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 38%, rgba(255,255,255,.10) 100% ); z-index:1; } .fci-hero-container{ position:relative; z-index:2; display:grid; grid-template-columns:560px 1fr; gap:64px; align-items:center; width:min(100% - 40px,var(--fci-container)); margin-inline:auto; } .fci-hero-content{ display:flex; flex-direction:column; align-items:flex-start; } .fci-hero-badge{ margin-bottom:20px; } .fci-hero-title{ margin-bottom:24px; max-width:620px; } .fci-hero-text{ max-width:560px; margin-bottom:36px; } .fci-hero-actions{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:36px; } .fci-hero-trust{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:520px; } .fci-hero-media{ position:relative; display:flex; justify-content:flex-end; align-items:center; } .fci-hero-image{ position:relative; z-index:2; width:100%; max-width:640px; filter:drop-shadow(0 32px 60px rgba(0,0,0,.14)); animation:fciFloat 6s ease-in-out infinite; } /*============================================================================== 32. HERO BACKGROUND EFFECT ==============================================================================*/ .fci-hero-glow{ position:absolute; width:460px; height:460px; border-radius:50%; background: radial-gradient(circle, rgba(30,136,229,.18), transparent 70%); filter:blur(40px); pointer-events:none; z-index:0; } .fci-hero-glow-left{ left:-140px; top:-120px; } .fci-hero-glow-right{ right:-120px; bottom:-140px; } /*============================================================================== 33. DECORATIVE SHAPES ==============================================================================*/ .fci-shape{ position:absolute; pointer-events:none; opacity:.08; animation:fciShapeFloat 10s ease-in-out infinite; } .fci-shape-circle{ width:90px; height:90px; border-radius:50%; background:var(--fci-color-primary-light); } .fci-shape-square{ width:72px; height:72px; border-radius:18px; background:var(--fci-color-accent); transform:rotate(18deg); } /*============================================================================== 34. TRUST GRID ==============================================================================*/ .fci-trust-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } .fci-trust-grid .fci-trust-card{ height:100%; } /*============================================================================== 35. HERO IMAGE FLOAT ==============================================================================*/ @keyframes fciFloat{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } 100%{ transform:translateY(0); } } @keyframes fciShapeFloat{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-18px); } 100%{ transform:translateY(0); } } /*============================================================================== 36. MOBILE HERO ==============================================================================*/ @media(max-width:1024px){ .fci-hero{ min-height:auto; padding:80px 0; } .fci-hero-container{ grid-template-columns:1fr; gap:48px; } .fci-hero-content{ align-items:center; text-align:center; } .fci-hero-title, .fci-hero-text{ max-width:720px; } .fci-hero-actions{ justify-content:center; } .fci-hero-trust{ max-width:720px; } .fci-hero-media{ justify-content:center; } } @media(max-width:768px){ .fci-hero{ padding:56px 0; } .fci-hero-container{ gap:32px; width:min(100% - 32px,var(--fci-container)); } .fci-hero-content{ order:1; } .fci-hero-media{ order:2; } .fci-hero-trust{ order:3; grid-template-columns:1fr 1fr; margin-top:12px; } .fci-hero-image{ width:82%; max-width:340px; margin-inline:auto; } .fci-hero-actions{ flex-direction:column; width:100%; } .fci-hero-actions .fci-btn{ width:100%; } } @media(max-width:480px){ .fci-hero-title{ margin-bottom:18px; } .fci-hero-text{ margin-bottom:28px; } .fci-hero-trust{ gap:12px; } } /*============================================================================== 37. HEADER SYSTEM ==============================================================================*/ .fci-header{ position:sticky; top:0; z-index:999; background:rgba(255,255,255,.94); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--fci-color-border); transition:var(--fci-transition); } .fci-header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:84px; } .fci-logo{ display:flex; align-items:center; gap:16px; } .fci-logo img{ height:56px; width:auto; } .fci-nav{ display:flex; align-items:center; gap:32px; } .fci-nav a{ font-size:15px; font-weight:600; position:relative; color:var(--fci-color-heading); } .fci-nav a::after{ content:""; position:absolute; left:0; bottom:-8px; width:0; height:2px; background:var(--fci-color-primary); transition:.3s; } .fci-nav a:hover::after, .fci-nav a.is-active::after{ width:100%; } /*============================================================================== 38. SECTION HEADER ==============================================================================*/ .fci-section-header{ max-width:760px; margin:0 auto 64px; text-align:center; } .fci-section-header .fci-badge{ margin-bottom:18px; } .fci-section-header .fci-h2{ margin-bottom:20px; } .fci-section-header .fci-text{ max-width:680px; margin-inline:auto; } /*============================================================================== 39. SERVICE GRID ==============================================================================*/ .fci-service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; } .fci-service-card{ height:100%; display:flex; flex-direction:column; } .fci-service-icon{ width:72px; height:72px; display:flex; align-items:center; justify-content:center; background:#EDF7FF; border-radius:20px; margin-bottom:24px; } .fci-service-icon img{ width:40px; height:40px; } .fci-service-card h3{ margin-bottom:14px; } .fci-service-card .fci-text{ margin-bottom:22px; } .fci-service-card .fci-btn{ margin-top:auto; } /*============================================================================== 40. WHY CHOOSE US ==============================================================================*/ .fci-feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .fci-feature-card{ padding:34px; text-align:left; } .fci-feature-card .fci-icon{ margin-bottom:22px; } /*============================================================================== 41. PROCESS ==============================================================================*/ .fci-process{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; } .fci-process-step{ position:relative; text-align:center; padding-top:20px; } .fci-process-number{ width:56px; height:56px; margin:auto; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--fci-color-primary); color:#fff; font-weight:700; margin-bottom:20px; } /*============================================================================== 42. STATISTICS ==============================================================================*/ .fci-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .fci-stat{ text-align:center; padding:34px; border-radius:24px; background:#fff; border:1px solid var(--fci-color-border); box-shadow:var(--fci-shadow-sm); } .fci-stat-value{ font-size:44px; font-weight:700; line-height:1; color:var(--fci-color-primary); margin-bottom:10px; } .fci-stat-label{ font-size:15px; color:var(--fci-color-text); } /*============================================================================== 43. COVERAGE AREA ==============================================================================*/ .fci-map{ overflow:hidden; border-radius:28px; box-shadow:var(--fci-shadow-md); } .fci-map img{ width:100%; } /*============================================================================== 44. TESTIMONIAL ==============================================================================*/ .fci-testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .fci-testimonial{ display:flex; flex-direction:column; height:100%; } .fci-testimonial-author{ display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:24px; } .fci-testimonial-author img{ width:58px; height:58px; border-radius:50%; } /*============================================================================== 45. FAQ ==============================================================================*/ .fci-faq{ max-width:920px; margin-inline:auto; } .fci-faq-item{ border:1px solid var(--fci-color-border); border-radius:18px; margin-bottom:18px; overflow:hidden; background:#fff; } .fci-faq-question{ padding:22px 26px; cursor:pointer; font-weight:600; } .fci-faq-answer{ padding:0 26px 26px; display:none; } /*============================================================================== 46. CTA BANNER ==============================================================================*/ .fci-cta-banner{ position:relative; overflow:hidden; padding:64px; border-radius:32px; background: linear-gradient( 135deg, var(--fci-color-primary), var(--fci-color-primary-light) ); color:#fff; } .fci-cta-banner .fci-h2{ color:#fff; } .fci-cta-banner .fci-text{ color:rgba(255,255,255,.9); } /*============================================================================== 47. FOOTER ==============================================================================*/ .fci-footer{ background:#081E47; color:#fff; padding:80px 0 32px; } .fci-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; } .fci-footer h3{ margin-bottom:20px; color:#fff; } .fci-footer a{ opacity:.88; transition:.3s; } .fci-footer a:hover{ opacity:1; color:#fff; } .fci-footer-bottom{ margin-top:60px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); font-size:14px; text-align:center; opacity:.75; } /*============================================================================== 48. RESPONSIVE ==============================================================================*/ @media(max-width:1024px){ .fci-service-grid, .fci-feature-grid, .fci-process, .fci-stats, .fci-testimonial-grid{ grid-template-columns:repeat(2,1fr); } .fci-footer-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .fci-nav{ display:none; } .fci-section-header{ margin-bottom:44px; } .fci-service-grid, .fci-feature-grid, .fci-process, .fci-stats, .fci-testimonial-grid, .fci-footer-grid{ grid-template-columns:1fr; } .fci-cta-banner{ padding:36px 28px; } } /*============================================================================== 49. ELEMENTOR OPTIMIZATION ==============================================================================*/ /* HTML Widget Safe */ .elementor-widget-html{ width:100%; } .elementor-widget-html .fci-section:first-child{ margin-top:0; } .elementor-widget-html .fci-section:last-child{ margin-bottom:0; } /* Image Widget */ .elementor-widget-image img{ display:block; max-width:100%; height:auto; } /* Button Widget */ .elementor-widget-button{ margin:0; padding:0; } /* Icon Widget */ .elementor-icon{ line-height:1; } /* Avoid unexpected overflow */ .elementor{ overflow-x:clip; } /*============================================================================== 50. PERFORMANCE UTILITIES ==============================================================================*/ .fci-lazy{ content-visibility:auto; contain-intrinsic-size:1000px; } .fci-no-select{ user-select:none; } .fci-will-change{ will-change:transform; } .fci-gpu{ transform:translateZ(0); backface-visibility:hidden; } .fci-contain{ contain:layout style paint; } /*============================================================================== 51. IMAGE SYSTEM ==============================================================================*/ .fci-img{ display:block; width:100%; height:auto; } .fci-cover{ width:100%; height:100%; object-fit:cover; } .fci-contain-img{ width:100%; height:100%; object-fit:contain; } .fci-ratio-1x1{ aspect-ratio:1/1; } .fci-ratio-4x3{ aspect-ratio:4/3; } .fci-ratio-16x9{ aspect-ratio:16/9; } .fci-ratio-21x9{ aspect-ratio:21/9; } /*============================================================================== 52. ACCESSIBILITY ==============================================================================*/ .fci-btn:focus-visible, .fci-nav a:focus-visible, .fci-input:focus-visible{ outline:3px solid rgba(30,136,229,.30); outline-offset:4px; } .fci-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /*============================================================================== 53. SCROLLBAR ==============================================================================*/ ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:#F3F6FA; } ::-webkit-scrollbar-thumb{ background:#C8D7EA; border-radius:999px; } ::-webkit-scrollbar-thumb:hover{ background:var(--fci-color-primary); } /*============================================================================== 54. TEXT SELECTION ==============================================================================*/ ::selection{ background:var(--fci-color-primary); color:#fff; } /*============================================================================== 55. LOADING ==============================================================================*/ .fci-loading{ pointer-events:none; opacity:.65; } .fci-skeleton{ position:relative; overflow:hidden; background:#EDF2F7; } .fci-skeleton::after{ content:""; position:absolute; inset:0; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.6), transparent ); animation:fciSkeleton 1.2s infinite; } @keyframes fciSkeleton{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } } /*============================================================================== 56. FLOATING BUTTONS ==============================================================================*/ .fci-wa-float{ position:fixed; right:22px; bottom:22px; width:62px; height:62px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--fci-color-success); color:#fff; box-shadow: 0 16px 40px rgba(37,211,102,.35); z-index:999; transition:var(--fci-transition); } .fci-wa-float:hover{ transform:translateY(-6px); } .fci-scroll-top{ position:fixed; right:22px; bottom:100px; width:54px; height:54px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:50%; box-shadow:var(--fci-shadow-md); opacity:0; visibility:hidden; transition:var(--fci-transition); z-index:998; } .fci-scroll-top.is-active{ opacity:1; visibility:visible; } /*============================================================================== 57. PRINT ==============================================================================*/ @media print{ .fci-header, .fci-footer, .fci-wa-float, .fci-scroll-top, .fci-btn{ display:none!important; } body{ background:#fff; color:#000; } } /*============================================================================== 58. REDUCED MOTION ==============================================================================*/ @media(prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } } /*============================================================================== 59. MOBILE HELPERS ==============================================================================*/ @media(max-width:768px){ .fci-mobile-center{ text-align:center; } .fci-mobile-hide{ display:none!important; } .fci-mobile-show{ display:block!important; } .fci-mobile-full{ width:100%!important; } .fci-wa-float{ width:56px; height:56px; right:18px; bottom:18px; } .fci-scroll-top{ right:18px; bottom:86px; } } /*============================================================================== 60. DESKTOP HELPERS ==============================================================================*/ @media(min-width:769px){ .fci-desktop-hide{ display:none!important; } } /*============================================================================== FREEZE CARE UI KIT PART 7 PRODUCTION READY Version 2.0 ==============================================================================*/ /*============================================================================== 61. CSS LAYER ==============================================================================*/ @layer reset, tokens, base, layout, utilities, components, sections, helpers, responsive; /*============================================================================== 62. ROOT SETTINGS ==============================================================================*/ html{ overflow-x:hidden; scroll-padding-top:90px; } body{ min-width:320px; min-height:100vh; } /*============================================================================== 63. GLOBAL MEDIA ==============================================================================*/ img, picture, video, canvas, svg{ max-width:100%; display:block; } iframe{ width:100%; border:0; } /*============================================================================== 64. SAFE ELEMENTOR ==============================================================================*/ .elementor *{ box-sizing:border-box; } .elementor-widget-container{ margin:0; padding:0; } /*============================================================================== 65. SECTION DIVIDER ==============================================================================*/ .fci-section-divider{ width:100%; height:1px; background:var(--fci-color-border); opacity:.6; } /*============================================================================== 66. STATE ==============================================================================*/ .is-hidden{ display:none!important; } .is-visible{ display:block!important; } .is-disabled{ pointer-events:none; opacity:.5; } .is-loading{ pointer-events:none; opacity:.7; } /*============================================================================== 67. OPACITY ==============================================================================*/ .fci-opacity-0{ opacity:0; } .fci-opacity-25{ opacity:.25; } .fci-opacity-50{ opacity:.5; } .fci-opacity-75{ opacity:.75; } .fci-opacity-100{ opacity:1; } /*============================================================================== 68. Z INDEX ==============================================================================*/ .fci-z-1{ z-index:1; } .fci-z-5{ z-index:5; } .fci-z-10{ z-index:10; } .fci-z-50{ z-index:50; } .fci-z-100{ z-index:100; } .fci-z-max{ z-index:9999; } /*============================================================================== 69. CURSOR ==============================================================================*/ .fci-pointer{ cursor:pointer; } .fci-default{ cursor:default; } /*============================================================================== 70. TRANSITION ==============================================================================*/ .fci-transition{ transition:var(--fci-transition); } /*============================================================================== 71. HOVER ==============================================================================*/ .fci-hover-lift{ transition:var(--fci-transition); } .fci-hover-lift:hover{ transform:translateY(-8px); } .fci-hover-scale{ transition:var(--fci-transition); } .fci-hover-scale:hover{ transform:scale(1.04); } .fci-hover-shadow:hover{ box-shadow:var(--fci-shadow-lg); } /*============================================================================== 72. GLASS ==============================================================================*/ .fci-glass{ background:rgba(255,255,255,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.55); } /*============================================================================== 73. GRADIENT ==============================================================================*/ .fci-gradient-primary{ background: linear-gradient( 135deg, var(--fci-color-primary), var(--fci-color-primary-light) ); } .fci-gradient-light{ background: linear-gradient( 180deg, #ffffff, #f5f9fc ); } /*============================================================================== 74. OBJECT ==============================================================================*/ .fci-cover{ object-fit:cover; } .fci-contain{ object-fit:contain; } /*============================================================================== 75. LINE CLAMP ==============================================================================*/ .fci-line-2{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .fci-line-3{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } /*============================================================================== 76. ANIMATION ==============================================================================*/ .fci-fade{ animation:fciFade .6s ease; } @keyframes fciFade{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } } /*============================================================================== 77. SAFE TABLE ==============================================================================*/ table{ width:100%; border-collapse:collapse; } td, th{ padding:14px; border:1px solid var(--fci-color-border); } /*============================================================================== 78. SAFE FORM ==============================================================================*/ textarea{ resize:vertical; } input::-webkit-search-decoration, input::-webkit-search-cancel-button{ display:none; } /*============================================================================== 79. MOBILE ==============================================================================*/ @media(max-width:768px){ .fci-desktop{ display:none!important; } } /*============================================================================== 80. DESKTOP ==============================================================================*/ @media(min-width:769px){ .fci-mobile{ display:none!important; } } /*============================================================================== END ==============================================================================*/

freezecareindonesia.com

Kategori: Uncategorized