/* ============================================= DEVRUBBLE — Shared Design System ============================================= */ /* ---- GOOGLE FONT is loaded in each HTML ---- */ :root { --gold: #F0BC2A; --gold-dim: rgba(240, 188, 42, 0.12); --gold-border: rgba(240, 188, 42, 0.25); --bg-deep: #080D18; --bg-mid: #0C1422; --bg-card: #111E33; --border: #1A2840; } *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--bg-deep); color: #ffffff; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } /* ---- HERO GRID ---- */ .hero-grid-bg { background-image: linear-gradient(rgba(240,188,42,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(240,188,42,0.035) 1px, transparent 1px); background-size: 56px 56px; } /* ---- GOLD GRADIENT TEXT ---- */ .text-gold { background: linear-gradient(130deg, #F5CE63 0%, #F0BC2A 55%, #C99B15 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ---- GOLD DIVIDER LINE ---- */ .gold-line { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(240,188,42,0.35) 30%, rgba(240,188,42,0.35) 70%, transparent 100%); } /* ---- CARD HOVER ---- */ .card-hover { border: 1px solid var(--border); transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .card-hover:hover { border-color: rgba(240,188,42,0.4); transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 0 24px rgba(240,188,42,0.06); } /* ---- SCROLL REVEAL ---- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.in { opacity: 1; transform: translateY(0); } /* ---- NAVBAR ---- */ #nav { background: transparent; transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease; border-bottom: 1px solid transparent; } #nav.scrolled { background: rgba(8,13,24,0.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom-color: var(--border); } #nav a.nav-active { color: var(--gold) !important; } /* ---- MOBILE MENU ---- */ #mob-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; background: rgba(8,13,24,0.98); backdrop-filter: blur(18px); } #mob-menu.open { max-height: 420px; } /* ---- HAMBURGER ---- */ .hb span { display: block; width: 22px; height: 2px; background: white; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } .hb.x span:nth-child(1) { transform: rotate(45deg) translate(4px, 5px); } .hb.x span:nth-child(2) { opacity: 0; } .hb.x span:nth-child(3) { transform: rotate(-45deg) translate(4px, -5px); } /* ---- BUTTONS ---- */ .btn-gold { background-color: var(--gold); color: #080D18; font-weight: 700; transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .btn-gold:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(240,188,42,0.3); } .btn-ghost { border: 1px solid var(--border); color: #94A3B8; transition: border-color 0.2s ease, color 0.2s ease; } .btn-ghost:hover { border-color: rgba(240,188,42,0.4); color: #ffffff; } /* ---- ICON BOX ---- */ .icon-box { background-color: var(--gold-dim); border-radius: 10px; } /* ---- BADGE ---- */ .badge-gold { background: var(--gold-dim); border: 1px solid var(--gold-border); } /* ---- STATS GLOW ---- */ .stat-num { text-shadow: 0 0 40px rgba(240,188,42,0.25); } /* ---- TESTIMONIAL CARD ---- */ .t-card { background: var(--bg-card); border: 1px solid var(--border); transition: border-color 0.25s ease; } .t-card:hover { border-color: rgba(240,188,42,0.3); } /* ---- CASE STUDY ACCENT BAR ---- */ .cs-bar { background: linear-gradient(90deg, var(--gold), #C99B15); } /* ---- PROCESS STEP NUMBER ---- */ .step-num { font-size: 4.5rem; line-height: 1; font-weight: 900; color: rgba(240,188,42,0.08); position: absolute; top: 1.25rem; right: 1.5rem; } /* ---- CTA RADIAL ---- */ .cta-glow { background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(240,188,42,0.07) 0%, transparent 70%); } /* ---- FOOTER SOCIAL ---- */ .soc-btn { background: var(--bg-card); border: 1px solid var(--border); color: #64748B; transition: color 0.2s ease, border-color 0.2s ease; } .soc-btn:hover { color: #ffffff; border-color: rgba(240,188,42,0.35); } /* ---- SCROLL INDICATOR ---- */ .scroll-ind { animation: sbounce 2s infinite; } @keyframes sbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* ---- ACCORDION (Contact FAQ) ---- */ .faq-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; } .faq-body.open { max-height: 400px; } .faq-chevron { transition: transform 0.3s ease; } .faq-chevron.open { transform: rotate(180deg); } /* ---- FORM INPUTS ---- */ .form-input { background: var(--bg-card); border: 1px solid var(--border); color: #ffffff; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: 100%; border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; font-family: 'Inter', sans-serif; outline: none; } .form-input::placeholder { color: #4B5563; } .form-input:focus { border-color: rgba(240,188,42,0.4); box-shadow: 0 0 0 3px rgba(240,188,42,0.06); } .form-input option { background: var(--bg-card); } .form-label { display: block; font-size: 0.8125rem; font-weight: 600; color: #94A3B8; margin-bottom: 0.375rem; letter-spacing: 0.01em; } /* ---- TECH STACK CHIP ---- */ .tech-chip { background: var(--bg-card); border: 1px solid var(--border); color: #94A3B8; font-size: 0.75rem; font-weight: 500; padding: 0.375rem 0.75rem; border-radius: 9999px; display: inline-block; } /* ---- SERVICE BREADCRUMB ---- */ .breadcrumb-sep { color: #374151; } /* ---- VALUE PROP NUMBER ---- */ .vp-num { font-size: 3rem; font-weight: 900; color: rgba(240,188,42,0.07); line-height: 1; }