/* ============================================
CLAUDE DESIGN — claude-style.css
Utilities reka bentuk "Claude-style" boleh guna semula.
Link selepas Tailwind CDN.
============================================ */
/* ---- Hide sampai Alpine/JS load (optional) ---- */
[x-cloak] { display: none !important; }
/* ============================================
TYPOGRAPHY
============================================ */
/* Hero display title — Space Grotesk tajam & tight */
.hero-title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.15;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Section heading */
.section-heading {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
letter-spacing: -0.025em;
-webkit-font-smoothing: antialiased;
}
/* Body premium — relaxed */
.body-premium {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 400;
line-height: 1.75;
letter-spacing: 0.01em;
}
/* Accent serif italic — untuk perkataan tertentu dalam headline */
.heading-serif-accent {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 700;
}
/* Gradient text untuk accent serif */
.heading-gradient-accent {
background: linear-gradient(135deg, #14b8a6 0%, #0d9488 50%, #fbbf24 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Hero gradient shimmer (loop) */
.hero-gradient-text {
background: linear-gradient(135deg, #fde68a 0%, #4ade80 40%, #34d399 70%, #fbbf24 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 200%;
animation: gradient-shift 4s ease infinite;
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Label kecil uppercase */
.badge-text {
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* Glow underline accent */
.glow-underline {
text-decoration: underline;
text-decoration-color: #facc15;
text-decoration-thickness: 3px;
text-underline-offset: 6px;
text-shadow: 0 0 20px rgba(250, 204, 21, 0.4);
}
/* ============================================
DEPTH — Grain, Glass, Shadow
============================================ */
/* Grain texture overlay — letak div ni sebagai anak pertama :
*/
.grain-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 999;
opacity: 0.025;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
}
/* Glassmorphism card */
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
/* Soft shadow berlapis — kad utama */
.shadow-soft {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04),
0 24px 60px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(0, 0, 0, 0.04);
}
/* Soft shadow ringan — kad testimoni */
.shadow-soft-sm {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04),
0 20px 50px rgba(0, 0, 0, 0.07);
}
/* Dot grid background — letak pada section relative */
.dot-grid-bg {
background-image: radial-gradient(circle, #CBD5E1 1px, transparent 1px);
background-size: 28px 28px;
opacity: 0.3;
}
/* Text shadow util */
.text-shadow-sm { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
/* ============================================
SCROLL REVEAL (pasangkan dengan reveal.js)
============================================ */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
will-change: transform, opacity;
}
.reveal-left { opacity: 0; transform: translateX(-40px); transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1); }
.reveal.active,
.reveal-left.active,
.reveal-right.active {
opacity: 1;
transform: translate(0, 0);
}
/* Scroll progress bar — */
#scroll-progress {
height: 3px;
background: linear-gradient(to right, #14b8a6, #facc15);
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 0%;
transition: width 0.1s ease-out;
}
/* ============================================
ANIMATIONS
============================================ */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }
@keyframes float-hero {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
.animate-float-hero { animation: float-hero 5s ease-in-out infinite; }
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.animate-marquee-container {
display: flex;
width: 200%;
animation: marquee 20s linear infinite;
}
.animate-marquee-container:hover { animation-play-state: paused; }
@keyframes bounce-x {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(25%); }
}
.animate-bounce-x { animation: bounce-x 1s infinite; }
/* Radar pulse — letak pada elemen relative */
@keyframes radar-pulse {
0% { transform: scale(0.9); opacity: 0.8; }
100% { transform: scale(1.4); opacity: 0; }
}
.radar-effect::before,
.radar-effect::after {
content: '';
position: absolute;
inset: -10px;
border-radius: 2.5rem;
border: 3px solid #facc15;
animation: radar-pulse 2s linear infinite;
z-index: -1;
pointer-events: none;
}
.radar-effect::after { animation-delay: 1s; }
/* ============================================
UTILITIES
============================================ */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.tracking-tight-xl { letter-spacing: -0.04em; }
/* Elak scroll mendatar */
html, body {
overflow-x: hidden !important;
max-width: 100vw;
}
/* Matikan hover transform pada peranti sentuh */
@media (hover: none) and (pointer: coarse) {
* { -webkit-tap-highlight-color: transparent; }
.hover\:-translate-y-1:hover,
.hover\:-translate-y-2:hover,
.hover\:scale-105:hover,
.hover\:scale-110:hover {
transform: none !important;
}
}