/* ============================================================ 110s Digital Studio — Cinematic Design System v11.0.0 — Electric Blue + Purple Atmosphere Full site rebrand. Scoped to .ds-cinematic on . Does NOT affect admin panel. ============================================================ */ /* ---------------------------------------------------------- Design Tokens ---------------------------------------------------------- */ .ds-cinematic { --cin-bg: #0F172A; --cin-bg-alt: #111827; --cin-bg-card: #1F2937; --cin-bg-light: #F8FAFC; --cin-bg-white: #FFFFFF; --cin-accent: #2563EB; --cin-accent-soft: #3B82F6; --cin-accent-deep: #1E40AF; --cin-accent-glow: rgba(59, 130, 246, 0.35); --cin-purple-glow: rgba(139, 92, 246, 0.25); --cin-text: #FFFFFF; --cin-text-soft: #E2E8F0; --cin-text-muted: #94A3B8; --cin-text-dark: #0F172A; --cin-border: rgba(255, 255, 255, 0.08); --cin-border-hover: rgba(59, 130, 246, 0.5); --cin-border-light: #E2E8F0; --cin-radius: 8px; color-scheme: dark; } /* ---------------------------------------------------------- Global Overrides (public only) ---------------------------------------------------------- */ .ds-cinematic { background: var(--cin-bg); color: var(--cin-text); } .ds-cinematic main { background: var(--cin-bg); } /* ---------------------------------------------------------- Navbar — Electric Blue ---------------------------------------------------------- */ .ds-cinematic .ds-navbar { background: transparent; border-bottom: 1px solid transparent; transition: background 0.4s ease, border-color 0.4s ease; } .ds-cinematic .ds-navbar.scrolled { background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--cin-border); } .ds-cinematic .ds-navbar .navbar-brand { color: var(--cin-text); font-weight: 700; } .ds-cinematic .ds-navbar .navbar-brand .brand-accent { color: var(--cin-accent-soft); } .ds-cinematic .ds-navbar .nav-link { color: var(--cin-text-muted); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.025em; text-transform: uppercase; transition: color 0.3s ease; } .ds-cinematic .ds-navbar .nav-link:hover, .ds-cinematic .ds-navbar .nav-link.active { color: var(--cin-text); } .ds-cinematic .ds-navbar .nav-link::after { background: var(--cin-accent); } .ds-cinematic .ds-navbar .btn-nav-cta { background: transparent; color: var(--cin-accent-soft); border: 1px solid var(--cin-accent); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .ds-cinematic .ds-navbar .btn-nav-cta:hover { background: var(--cin-accent); color: #FFFFFF; box-shadow: 0 0 20px var(--cin-accent-glow); } .ds-cinematic .navbar-toggler-icon { filter: invert(1); } /* theme toggle: see below */ @media (max-width: 991.98px) { .ds-cinematic .ds-navbar .navbar-collapse { background: rgba(15, 23, 42, 0.98); border: 1px solid var(--cin-border); border-radius: var(--cin-radius); margin-top: 0.5rem; padding: 1rem; } .ds-cinematic .ds-navbar .nav-link { font-size: 0.875rem; padding: 0.6rem 0.75rem; } } /* ---------------------------------------------------------- Footer — Electric Blue ---------------------------------------------------------- */ .ds-cinematic .ds-footer { background: var(--cin-bg); border-top: 1px solid var(--cin-border); } .ds-cinematic .ds-footer .footer-brand { color: var(--cin-text); } .ds-cinematic .ds-footer .footer-brand .brand-accent { color: var(--cin-accent-soft); } .ds-cinematic .ds-footer-nav a { color: var(--cin-text-muted); font-size: 0.8125rem; letter-spacing: 0.02em; transition: color 0.3s ease; } .ds-cinematic .ds-footer-nav a:hover { color: var(--cin-text); } .ds-cinematic .ds-footer-social a { color: var(--cin-text-muted); transition: color 0.3s ease; } .ds-cinematic .ds-footer-social a:hover { color: var(--cin-accent-soft); } .ds-cinematic .ds-footer-bottom { border-top-color: var(--cin-border); } .ds-cinematic .ds-footer-bottom p { color: var(--cin-text-muted); opacity: 0.6; } /* ---------------------------------------------------------- Section Foundations ---------------------------------------------------------- */ .ds-cinematic .cin-section { padding: 6rem 0; position: relative; } .ds-cinematic .cin-section-sm { padding: 4rem 0; } /* ---------------------------------------------------------- Page Heroes — Blue System ---------------------------------------------------------- */ .ds-cinematic .ds-page-hero, .ds-cinematic .ds-page-placeholder { background: var(--cin-bg); padding: 6rem 0 4rem; } .ds-cinematic .ds-page-hero h1, .ds-cinematic .ds-page-placeholder h1 { color: var(--cin-text); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; } .ds-cinematic .ds-page-hero .hero-sub { color: var(--cin-text-muted); } .ds-cinematic .ds-page-hero .section-label, .ds-cinematic .ds-page-placeholder .section-label { color: var(--cin-accent-soft); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem; font-weight: 600; } .ds-cinematic .ds-gradient-text { background: linear-gradient(90deg, var(--cin-text) 0%, var(--cin-accent-soft) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ---------------------------------------------------------- Cards — Blue Border System ---------------------------------------------------------- */ .ds-cinematic .ds-card { background: transparent; border: 1px solid var(--cin-border); color: var(--cin-text); transition: border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .ds-cinematic .ds-card:hover { border-color: var(--cin-border-hover); transform: translateY(-6px); box-shadow: 0 0 20px var(--cin-accent-glow); color: var(--cin-text); } .ds-cinematic .ds-card-icon { background: rgba(37, 99, 235, 0.08); color: var(--cin-accent-soft); transition: background 0.35s ease, box-shadow 0.35s ease; } .ds-cinematic .ds-card:hover .ds-card-icon { background: rgba(37, 99, 235, 0.15); box-shadow: 0 0 16px var(--cin-accent-glow); } .ds-cinematic .ds-card-title { color: var(--cin-text); } .ds-cinematic .ds-card-text { color: var(--cin-text-muted); } .ds-cinematic .ds-card-link { color: var(--cin-accent-soft); } /* ---------------------------------------------------------- Service Items — Blue ---------------------------------------------------------- */ .ds-cinematic .ds-services { background: var(--cin-bg); } .ds-cinematic .ds-services .section-header h2 { color: var(--cin-text); } .ds-cinematic .ds-services .section-header .section-label { color: var(--cin-accent-soft); } .ds-cinematic .ds-services .section-header p { color: var(--cin-text-muted); } .ds-cinematic .ds-service-item { border-color: var(--cin-border); background: transparent; transition: border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .ds-cinematic .ds-service-item:hover { border-color: var(--cin-border-hover); transform: translateY(-6px); box-shadow: 0 0 20px var(--cin-accent-glow); background: transparent; } .ds-cinematic .ds-service-item .ds-service-icon { color: var(--cin-accent-soft); } .ds-cinematic .ds-service-item:hover .ds-service-icon { filter: drop-shadow(0 0 8px var(--cin-accent-glow)); } .ds-cinematic .ds-service-item h3 { color: var(--cin-text); } .ds-cinematic .ds-service-item p { color: var(--cin-text-muted); } /* ---------------------------------------------------------- Blog Post Cards — Blue ---------------------------------------------------------- */ .ds-cinematic .ds-post-card { border-bottom-color: var(--cin-border); } .ds-cinematic .ds-post-title { color: var(--cin-text); } .ds-cinematic .ds-post-title:hover { color: var(--cin-accent-soft); } .ds-cinematic .ds-post-excerpt { color: var(--cin-text-muted); } .ds-cinematic .ds-post-meta { color: var(--cin-text-muted); opacity: 0.7; } .ds-cinematic .ds-post-link { color: var(--cin-accent-soft); } /* ---------------------------------------------------------- Portfolio Cards — Blue ---------------------------------------------------------- */ .ds-cinematic .ds-project-card { background: transparent; border-color: var(--cin-border); transition: border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .ds-cinematic .ds-project-card:hover { border-color: var(--cin-border-hover); transform: translateY(-6px); box-shadow: 0 0 20px var(--cin-accent-glow); } .ds-cinematic .ds-project-info { background: var(--cin-bg); } .ds-cinematic .ds-project-title { color: var(--cin-text); } .ds-cinematic .ds-project-summary { color: var(--cin-text-muted); } .ds-cinematic .ds-project-thumb { background: var(--cin-bg-alt); } /* ---------------------------------------------------------- Section Titles ---------------------------------------------------------- */ .ds-cinematic .ds-section-title { color: var(--cin-text); } .ds-cinematic .ds-section-sub { color: var(--cin-text-muted); } /* ---------------------------------------------------------- Content Body (single pages) ---------------------------------------------------------- */ .ds-cinematic .ds-content-body { color: var(--cin-text-muted); line-height: 1.8; background: transparent !important;} .ds-cinematic .ds-content-body h2, .ds-cinematic .ds-content-body h3 { color: var(--cin-text); } .ds-cinematic .ds-content-body a { color: var(--cin-accent-soft); } .ds-cinematic .ds-content-body img { border-radius: var(--cin-radius); } /* ---------------------------------------------------------- Pagination — Blue ---------------------------------------------------------- */ .ds-cinematic .ds-pub-pagination .ds-page-link { color: var(--cin-text-muted); border-color: var(--cin-border); background: transparent; } .ds-cinematic .ds-pub-pagination .ds-page-link:hover { color: var(--cin-text); border-color: var(--cin-border-hover); } .ds-cinematic .ds-pub-pagination .ds-page-link.active { background: var(--cin-accent); border-color: var(--cin-accent); color: #FFFFFF; } /* ---------------------------------------------------------- Back Links ---------------------------------------------------------- */ .ds-cinematic .ds-back-link { color: var(--cin-text-muted); } .ds-cinematic .ds-back-link:hover { color: var(--cin-accent-soft); } /* ---------------------------------------------------------- Scroll Indicator + Error Pages ---------------------------------------------------------- */ .ds-cinematic .scroll-indicator span { background: var(--cin-text-muted); } .ds-cinematic .ds-error-page h1 { color: var(--cin-accent-soft); } /* ---------------------------------------------------------- GSAP Reveal Foundations ---------------------------------------------------------- */ .ds-cinematic .cin-reveal { opacity: 0; transform: translateY(30px); } @media (prefers-reduced-motion: reduce) { .ds-cinematic .cin-reveal { opacity: 1; transform: none; } } .ds-cinematic .ds-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .ds-cinematic .ds-reveal.visible { opacity: 1; transform: translateY(0); } /* ---------------------------------------------------------- Homepage Hero — Electric Blue + Purple Atmosphere ---------------------------------------------------------- */ .cin-hero-v2 { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 70% 30%, rgba(139,92,246,0.25), transparent 60%), linear-gradient(135deg, #0F172A 0%, #1E3A8A 45%, #2563EB 100%); } .cin-hero-v2::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23ffffff' stroke-width='0.3' fill='none' opacity='0.08'/%3E%3C/svg%3E"); pointer-events: none; } .cin-hero-v2 .container { position: relative; z-index: 2; } .cin-hero-v2 .cin-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; max-width: 1200px; margin: 0 auto; } .cin-hero-v2 .cin-hero-content { padding: 2rem 0; } .cin-hero-v2 .cin-hero-label { color: var(--cin-accent-soft); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.5rem; display: block; } .cin-hero-v2 h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--cin-text); margin-bottom: 1.5rem; } .cin-hero-v2 h1 .gradient-word { background: linear-gradient(90deg, #2563EB, #3B82F6, #60A5FA); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 100%; animation: gradientSweep 2s ease forwards; } @keyframes gradientSweep { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } .cin-hero-v2 .cin-hero-sub { color: var(--cin-text-soft); font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.7; max-width: 480px; margin-bottom: 2rem; } .cin-hero-v2 .cin-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; } /* ---------------------------------------------------------- Buttons — Blue System ---------------------------------------------------------- */ .cin-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 2rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; border-radius: var(--cin-radius); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; border: none; } .cin-btn-accent { background: var(--cin-accent); color: #FFFFFF; box-shadow: 0 0 0 0 var(--cin-accent-glow); } .cin-btn-accent:hover { background: var(--cin-accent-deep); color: #FFFFFF; box-shadow: 0 0 24px var(--cin-accent-glow); transform: translateY(-2px); } .cin-btn-ghost { background: transparent; color: var(--cin-text); border: 1px solid rgba(255, 255, 255, 0.3); } .cin-btn-ghost:hover { border-color: var(--cin-accent-soft); color: var(--cin-accent-soft); } .cin-btn-lg { padding: 1rem 2.5rem; font-size: 1rem; } /* ---------------------------------------------------------- Hero Visual Panel (Placeholder) ---------------------------------------------------------- */ .cin-hero-visual { display: flex; align-items: center; justify-content: center; } .cin-hero-visual-panel { width: 100%; aspect-ratio: 4/3; border-radius: 12px; background: radial-gradient(circle at 30% 70%, rgba(139,92,246,0.2), transparent 50%), radial-gradient(circle at 80% 20%, rgba(59,130,246,0.3), transparent 50%), linear-gradient(145deg, #1E293B, #0F172A); border: 1px solid rgba(59, 130, 246, 0.2); box-shadow: 0 0 40px rgba(59, 130, 246, 0.15), 0 0 80px rgba(139, 92, 246, 0.08); position: relative; overflow: hidden; animation: heroFloat 6s ease-in-out infinite; } @keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .cin-hero-visual-panel::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50h100M50 0v100M0 0l100 100M100 0L0 100' stroke='%233B82F6' stroke-width='0.3' fill='none' opacity='0.15'/%3E%3C/svg%3E"); pointer-events: none; } .cin-hero-visual-panel .cin-visual-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; color: rgba(59, 130, 246, 0.4); } .cin-hero-visual-panel .cin-visual-badge { position: absolute; bottom: 1.5rem; left: 1.5rem; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(8px); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 8px; padding: 0.75rem 1rem; color: var(--cin-text-soft); font-size: 0.75rem; font-weight: 500; } .cin-hero-visual-panel .cin-visual-badge strong { color: var(--cin-accent-soft); display: block; font-size: 0.875rem; } /* ---------------------------------------------------------- Authority Section — White Reset ---------------------------------------------------------- */ .cin-authority-v2 { background: var(--cin-bg-light); padding: 6rem 0; } .cin-authority-v2 .cin-authority-headline { color: var(--cin-text-dark); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; text-align: center; margin-bottom: 1.5rem; } .cin-authority-v2 .cin-authority-divider { width: 60px; height: 3px; background: var(--cin-accent); margin: 0 auto 3rem; border-radius: 2px; } .cin-authority-v2 .cin-stat-card { background: var(--cin-bg-white); border: 1px solid var(--cin-border-light); border-radius: var(--cin-radius); padding: 2rem; text-align: center; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .cin-authority-v2 .cin-stat-card:hover { transform: translateY(-4px); border-color: var(--cin-accent-soft); box-shadow: 0 8px 30px rgba(139, 92, 246, 0.08); } .cin-authority-v2 .cin-stat-number { font-size: 2.5rem; font-weight: 700; color: var(--cin-accent); display: block; line-height: 1; margin-bottom: 0.5rem; } .cin-authority-v2 .cin-stat-label { color: var(--cin-text-muted); font-size: 0.875rem; font-weight: 500; } /* ---------------------------------------------------------- Services Section — Dark Navy ---------------------------------------------------------- */ .cin-services-v2 { background: var(--cin-bg-alt); padding: 6rem 0; } .cin-services-v2 .cin-label { color: var(--cin-accent-soft); } .cin-services-v2 .cin-section-title { color: var(--cin-text); } .cin-services-v2 .cin-service-card-v2 { background: var(--cin-bg-card); border: 1px solid #1E3A8A; border-radius: var(--cin-radius); padding: 2rem; height: 100%; transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease; } .cin-services-v2 .cin-service-card-v2:hover { border-color: var(--cin-accent); box-shadow: 0 0 25px var(--cin-accent-glow); transform: translateY(-4px); } .cin-services-v2 .cin-svc-icon-wrap { width: 64px; height: 64px; border-radius: 12px; background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(139,92,246,0.1)); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; transition: transform 0.35s ease, box-shadow 0.35s ease; } .cin-services-v2 .cin-service-card-v2:hover .cin-svc-icon-wrap { transform: scale(1.03); box-shadow: 0 0 20px var(--cin-accent-glow); } .cin-services-v2 .cin-svc-icon-wrap i { font-size: 1.5rem; color: var(--cin-accent-soft); } .cin-services-v2 .cin-service-card-v2 h3 { color: var(--cin-text); font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; } .cin-services-v2 .cin-service-card-v2 p { color: var(--cin-text-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1rem; } .cin-card-link { color: var(--cin-accent-soft); font-size: 0.8125rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; transition: color 0.3s ease, gap 0.3s ease; } .cin-card-link:hover { color: var(--cin-text); gap: 0.6rem; } /* ---------------------------------------------------------- Portfolio Section — Dark Gradient ---------------------------------------------------------- */ .cin-portfolio-v2 { /* background matched to CTA */ background: linear-gradient(135deg, #0B1120 0%, #0F172A 30%, #1A1050 70%, #0B1120 100%); padding: 6rem 0; } .cin-portfolio-v2 .cin-section-title { color: var(--cin-text); } .cin-portfolio-v2 .cin-label { color: var(--cin-accent-soft); } .cin-portfolio-card-v2 { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--cin-radius); overflow: hidden; transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease; text-decoration: none; color: var(--cin-text); display: block; } .cin-portfolio-card-v2:hover { border-color: var(--cin-border-hover); box-shadow: 0 0 30px var(--cin-accent-glow), 0 0 60px rgba(139,92,246,0.06); transform: translateY(-4px); color: var(--cin-text); } .cin-portfolio-card-v2 .cin-pf-thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, #1E293B, #0F172A); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform 0.35s ease; } .cin-portfolio-card-v2:hover .cin-pf-thumb { transform: scale(1.03); } .cin-portfolio-card-v2 .cin-pf-thumb i { font-size: 2.5rem; color: rgba(59, 130, 246, 0.3); } .cin-portfolio-card-v2 .cin-pf-body { padding: 1.25rem; } .cin-portfolio-card-v2 .cin-pf-body h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.35rem; } .cin-portfolio-card-v2 .cin-pf-body p { color: var(--cin-text-muted); font-size: 0.8125rem; line-height: 1.5; margin: 0; } /* ---------------------------------------------------------- Final CTA — White Bright ---------------------------------------------------------- */ .cin-final-cta-v2 { background: var(--cin-bg-white); padding: 6rem 0; text-align: center; } .cin-final-cta-v2 .cin-cta-headline { color: var(--cin-text-dark); font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; margin-bottom: 1rem; } .cin-final-cta-v2 .cin-cta-sub { color: var(--cin-text-muted); font-size: 1rem; margin-bottom: 2rem; } /* ---------------------------------------------------------- Labels (global) ---------------------------------------------------------- */ .cin-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 0.75rem; } .cin-section-title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.2; margin-bottom: 1rem; } .cin-section-header { text-align: center; margin-bottom: 3rem; } /* ---------------------------------------------------------- Page Transitions ---------------------------------------------------------- */ .ds-page-wrapper { position: relative; } .cin-leaving { pointer-events: none; } /* ---------------------------------------------------------- Reading Progress Bar — Blue ---------------------------------------------------------- */ .cin-reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--cin-accent); z-index: 100000; transition: width 0.1s linear; } /* ---------------------------------------------------------- Legal Pages — Content Styling ---------------------------------------------------------- */ .ds-cinematic .ds-content-body h2 { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--cin-border); } .ds-cinematic .ds-content-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; } /* ---------------------------------------------------------- Mobile Responsive ---------------------------------------------------------- */ @media (max-width: 991.98px) { .cin-hero-v2 .cin-hero-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .cin-hero-v2 .cin-hero-sub { max-width: 100%; margin-left: auto; margin-right: auto; } .cin-hero-v2 .cin-hero-actions { justify-content: center; } .cin-hero-visual-panel { max-width: 400px; margin: 0 auto; } } @media (max-width: 575.98px) { .cin-hero-v2 h1 { font-size: 2rem; } .cin-btn { padding: 0.75rem 1.5rem; font-size: 0.8125rem; } .cin-section { padding: 4rem 0; } .cin-authority-v2, .cin-services-v2, .cin-portfolio-v2, .cin-final-cta-v2 { padding: 4rem 0; } } /* ---------------------------------------------------------- Inner Page Hero — Gradient + Purple Glow ---------------------------------------------------------- */ .cin-page-hero { background: radial-gradient(circle at 60% 40%, rgba(139,92,246,0.15), transparent 55%), linear-gradient(135deg, #0F172A 0%, #1E3A8A 60%); padding: 6rem 0 4rem; position: relative; overflow: hidden; } .cin-page-hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23ffffff' stroke-width='0.3' fill='none' opacity='0.05'/%3E%3C/svg%3E"); pointer-events: none; } .ds-page-hero-sm.cin-page-hero { padding: 8rem 0 3rem; } .cin-page-title { color: var(--cin-text); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 1rem; } .cin-page-sub { color: var(--cin-text-soft); font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.7; max-width: 560px; } .cin-accent-word { color: var(--cin-accent-soft); font-style: normal; } /* ---------------------------------------------------------- Services Listing Cards ---------------------------------------------------------- */ .cin-service-card { display: block; background: #1f2937; border: 1px solid var(--cin-border); border-radius: var(--cin-radius); text-decoration: none; color: var(--cin-text); height: 100%; transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease; } .cin-service-card:hover { border-color: var(--cin-border-hover); box-shadow: 0 0 25px var(--cin-accent-glow); transform: translateY(-4px); color: var(--cin-text); } .cin-service-icon { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(139,92,246,0.08)); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .cin-service-icon i { font-size: 1.4rem; color: var(--cin-accent-soft); } .cin-service-card h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--cin-text); } .cin-service-card p { color: var(--cin-text-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1rem; } /* ---------------------------------------------------------- Portfolio Listing Cards ---------------------------------------------------------- */ /* ---------------------------------------------------------- Image Effects ---------------------------------------------------------- */ .cin-img-reveal { border-radius: var(--cin-radius); overflow: hidden; margin-bottom: 2rem; } .cin-img-reveal img { width: 100%; height: auto; display: block; } /* ---------------------------------------------------------- Empty State ---------------------------------------------------------- */ .cin-empty { color: var(--cin-text-muted); text-align: center; padding: 4rem 0; font-size: 1rem; } /* ---------------------------------------------------------- About Page — Pillars ---------------------------------------------------------- */ /* ---------------------------------------------------------- About Page — Tech Grid ---------------------------------------------------------- */ /* ---------------------------------------------------------- About Page — Close ---------------------------------------------------------- */ /* ---------------------------------------------------------- Contact Page — Info Blocks ---------------------------------------------------------- */ .cin-contact-info { padding: 1rem 0; } .cin-contact-block { margin-bottom: 2rem; } .cin-contact-block p { color: var(--cin-text-muted); margin: 0.25rem 0 0; font-size: 0.9rem; } .cin-contact-link { color: var(--cin-accent-soft); font-size: 1rem; font-weight: 500; text-decoration: none; transition: color 0.3s ease; } .cin-contact-link:hover { color: var(--cin-text); } /* ---------------------------------------------------------- Forms — Floating Labels (Blue System) ---------------------------------------------------------- */ .cin-form-card { background: var(--cin-bg-card); border: 1px solid var(--cin-border); border-radius: var(--cin-radius); padding: 2rem; } .cin-float-group { position: relative; margin-bottom: 1.5rem; } .cin-float-input { width: 100%; padding: 1rem 0.875rem 0.5rem; font-size: 0.9rem; color: var(--cin-text); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--cin-border); border-radius: var(--cin-radius); outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; -webkit-appearance: none; } .cin-float-input:focus { border-color: var(--cin-accent); box-shadow: 0 0 12px rgba(59, 130, 246, 0.25); } .cin-float-label { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--cin-text-muted); font-size: 0.875rem; pointer-events: none; transition: all 0.2s ease; } .cin-float-input:focus ~ .cin-float-label, .cin-float-input:not(:placeholder-shown) ~ .cin-float-label { top: 0.35rem; transform: translateY(0); font-size: 0.7rem; color: var(--cin-accent-soft); } .cin-textarea { min-height: 120px; resize: vertical; } .cin-textarea ~ .cin-float-label { top: 1rem; transform: translateY(0); } .cin-textarea:focus ~ .cin-float-label, .cin-textarea:not(:placeholder-shown) ~ .cin-float-label { top: 0.35rem; font-size: 0.7rem; color: var(--cin-accent-soft); } .cin-select { cursor: pointer; } /* ---------------------------------------------------------- Quote Wizard — Blue System ---------------------------------------------------------- */ .cin-quote-wrap { max-width: 640px; margin: 0 auto; position: relative; } .cin-quote-progress { height: 3px; background: var(--cin-border); border-radius: 2px; margin-bottom: 2rem; overflow: hidden; } .cin-quote-progress-bar { height: 100%; background: linear-gradient(90deg, var(--cin-accent), var(--cin-accent-soft)); width: 20%; border-radius: 2px; transition: width 0.4s ease; } .cin-quote-steps-nav { display: flex; justify-content: center; gap: 0.75rem; margin-bottom: 2.5rem; } .cin-step-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--cin-border); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: var(--cin-text-muted); transition: all 0.3s ease; } .cin-step-dot.active { border-color: var(--cin-accent); color: var(--cin-accent-soft); box-shadow: 0 0 12px var(--cin-accent-glow); } .cin-step-dot.done { background: var(--cin-accent); border-color: var(--cin-accent); color: #FFFFFF; } .cin-quote-container { position: relative; min-height: 300px; } .cin-quote-step { display: none; } .cin-quote-step.active { display: block; } .cin-step-title { color: var(--cin-text); font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 2rem; } .cin-option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; } .cin-option-btn { background: var(--cin-bg-card); border: 1px solid var(--cin-border); border-radius: var(--cin-radius); padding: 1.5rem 1rem; text-align: center; color: var(--cin-text); cursor: pointer; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .cin-option-btn i { font-size: 1.5rem; color: var(--cin-accent-soft); } .cin-option-btn span { font-size: 0.8125rem; font-weight: 500; } .cin-option-btn:hover { border-color: var(--cin-border-hover); box-shadow: 0 0 20px var(--cin-accent-glow); transform: translateY(-2px); } .cin-option-btn.selected { border-color: var(--cin-accent); background: rgba(37, 99, 235, 0.1); box-shadow: 0 0 16px var(--cin-accent-glow); } .cin-quote-fields { max-width: 480px; margin: 0 auto; } .cin-quote-summary { background: var(--cin-bg-card); border: 1px solid var(--cin-border); border-radius: var(--cin-radius); padding: 1.5rem; margin-bottom: 2rem; color: var(--cin-text-muted); font-size: 0.875rem; line-height: 1.8; } .cin-quote-back { position: absolute; bottom: -3rem; left: 0; background: none; border: none; color: var(--cin-text-muted); font-size: 0.8125rem; cursor: pointer; transition: color 0.3s ease; padding: 0; } .cin-quote-back:hover { color: var(--cin-accent-soft); } /* ---------------------------------------------------------- Blog — Blue Accents ---------------------------------------------------------- */ .ds-cinematic .ds-post-card { border-bottom: 1px solid var(--cin-border); padding-bottom: 2rem; margin-bottom: 2rem; } .ds-cinematic .ds-post-thumb { border-radius: var(--cin-radius); overflow: hidden; margin-bottom: 1rem; } .ds-cinematic .ds-post-thumb img { width: 100%; height: auto; display: block; } .ds-cinematic .ds-article-image { border-radius: var(--cin-radius); overflow: hidden; margin-bottom: 2rem; } .ds-cinematic .ds-article-image img { width: 100%; height: auto; display: block; } .ds-cinematic .ds-meta-sep { color: var(--cin-text-muted); margin: 0 0.35rem; } /* ---------------------------------------------------------- Stagger Animation Support ---------------------------------------------------------- */ .cin-stagger-item { opacity: 0; transform: translateY(20px); } @media (prefers-reduced-motion: reduce) { .cin-stagger-item { opacity: 1; transform: none; } } /* ---------------------------------------------------------- Inner Page Mobile ---------------------------------------------------------- */ @media (max-width: 575.98px) { .cin-page-hero { padding: 7rem 0 3rem; } .cin-timeline { padding-left: 2.5rem; } .cin-option-grid { grid-template-columns: 1fr 1fr; } } /* ============================================================ REFINEMENT PATCH v1 — Visual Corrections + UX Fixes ============================================================ */ /* ---------------------------------------------------------- 1. CTA Buttons — Amber Authority (selective) Homepage: Start a Project, Start a Conversation Contact: Send Message ---------------------------------------------------------- */ .cin-btn-accent { background: #F59E0B; color: #0F172A; box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.35); } .cin-btn-accent:hover { background: #D97706; color: #0F172A; box-shadow: 0 0 24px rgba(245, 158, 11, 0.35); transform: translateY(-2px); } .cin-form-submit.cin-btn-accent { background: #F59E0B; color: #0F172A; } .cin-form-submit.cin-btn-accent:hover { background: #D97706; color: #0F172A; box-shadow: 0 0 24px rgba(245, 158, 11, 0.35); } /* ---------------------------------------------------------- 2. Authority Section — Stat Card Hover ---------------------------------------------------------- */ .cin-authority-v2 .cin-stat-card { transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .cin-authority-v2 .cin-stat-card:hover { transform: translateY(-6px); border-color: var(--cin-accent-soft); box-shadow: 0 4px 20px rgba(59, 130, 246, 0.12), 0 0 30px rgba(139, 92, 246, 0.08); } /* ---------------------------------------------------------- 3. Portfolio Preview H3 — White on Dark ---------------------------------------------------------- */ .cin-portfolio-v2 .cin-portfolio-card-v2 .cin-pf-body h3 { color: #FFFFFF; } /* ---------------------------------------------------------- 4. Inner Page Hero — Centered, Gradient, Purple Glow Applied to ALL inner pages via .cin-page-hero ---------------------------------------------------------- */ .cin-page-hero { background: radial-gradient(circle at 60% 40%, rgba(139, 92, 246, 0.18), transparent 55%), linear-gradient(135deg, #0F172A 0%, #1E3A8A 60%); padding: 6rem 0 4rem; position: relative; overflow: hidden; text-align: center; display: flex; align-items: center; min-height: 340px; } .cin-page-hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23ffffff' stroke-width='0.3' fill='none' opacity='0.05'/%3E%3C/svg%3E"); pointer-events: none; } .cin-page-hero .container { position: relative; z-index: 2; width: 100%; } .cin-page-hero .cin-page-sub, .cin-page-hero .cin-page-title, .cin-page-hero p { margin-left: auto; margin-right: auto; } .cin-page-hero .cin-page-sub { max-width: 560px; text-align: center; } .ds-page-hero-sm.cin-page-hero { padding: 8rem 0 3rem; min-height: 280px; } /* Back links — left align override within centered hero */ .cin-page-hero .ds-back-link { display: inline-block; margin-bottom: 1rem; text-align: left; } /* ---------------------------------------------------------- 6. Roadmap Page — Stage Icons (CSS-only visual markers) ---------------------------------------------------------- */ .cin-timeline { position: relative; margin: auto; padding: auto; } .cin-timeline .cin-timeline-item { position: relative; display: block; z-index: 2; background: linear-gradient(90deg, #4f46e5, #9333ea); border:none; height: 400px; transition: all 0.4s ease; box-shadow: 0 5px 10px rgba(79, 70, 229, 0.1); } .cin-timeline .cin-timeline-item:hover {box-shadow: 0 5px 20px rgba(79, 70, 229, 0.2);} .cin-timeline .cin-timeline-item:hover .body { border: 10px solid; border-image-slice: 1; border-width: 2px; border-image-source: linear-gradient(90deg, #4f46e5, #9333ea); border-top:none; } .cin-timeline .cin-timeline-item .head { position: relative; display: flex; align-items: center; color: #fff; font-weight: 400; width:100%; height:20%; } .cin-timeline .cin-timeline-item .head .number-box { display: inline; float: left; margin: 15px; padding: 0; font-size: 30px; line-height: 10px; font-weight: 600; background: rgba(0, 0, 0, 0.17); } .cin-timeline .cin-timeline-item .head h2 { text-transform: uppercase; font-size: 1.3rem; font-weight: inherit; letter-spacing: 2px; margin: 0; padding-bottom: 6px; line-height: 1rem; } .cin-timeline .cin-timeline-item .head h2 span { display: block; font-size: 0.6rem; margin: 0; } .cin-timeline .cin-timeline-item .body { background: #0F172A; color:#eee; border: 2px solid #0F172A; border-top: none; padding: 15px; position:relative; height: 80%; } [data-theme="day"] .cin-timeline .cin-timeline-item .body { background: #fff; border: 2px solid #fff; } .cin-timeline .cin-timeline-item .body p { font-size: 14px; line-height: 18px; margin-bottom: 15px; } .cin-timeline .cin-timeline-item .body .cin-timeline-img { background-position: center; background-repeat: no-repeat; background-size: 120%; width: 100%; height:215px; position:relative; border-radius:0.5em; transition-delay:0.3s; transition:all 0.3s ease-in; } .cin-timeline .cin-timeline-item .body:hover .cin-timeline-img { background-size: 100%; box-shadow: 0 0 13px rgba(0, 0, 0, 0.1); } .cin-timeline .cin-timeline-item .body .cin-timeline-img a { top:10px; right:10px; filter:opacity(0); } .cin-timeline .cin-timeline-item .body:hover .cin-timeline-img a{ filter:opacity(1); } .cin-timeline .cin-timeline-item:nth-child(odd) .head::after {border-color: #9333ea;} .cin-timeline .cin-timeline-item:nth-child(even) .head::after {border-color: #4f46e5;} .cin-timeline-item:nth-child(1){order: 1;} .cin-timeline-item:nth-child(2){order: 5;} .cin-timeline-item:nth-child(3){order: 2;} .cin-timeline-item:nth-child(4){order: 6;} .cin-timeline-item:nth-child(5){order: 3;} .cin-timeline-item:nth-child(6){order: 7;} .cin-timeline-item:nth-child(7){order: 4;} @media (max-width: 575px){ .cin-timeline .cin-timeline-item { max-width: 94%; margin:0 auto; margin-top:45px; } } @media (min-width: 576px){ .cin-timeline .cin-timeline-item { max-width: 90%; margin:0 auto; margin-top:45px; } .cin-timeline .cin-timeline-item .head h2 { font-size: 165%; line-height: 1.2rem; } .cin-timeline .cin-timeline-item .head h2 span { font-size: 0.8rem; } } @media (min-width: 768px){ .cin-timeline .cin-timeline-item { max-width: 60%; } } @media (min-width: 992px){ .cin-timeline { display: flex; flex-flow: column wrap; width: 90%; height: 2000px; margin: 0 auto; } .cin-timeline .cin-timeline-item { width: 40%; margin: 45px auto; } .cin-timeline .cin-timeline-item:nth-child(even) .head::after, .cin-timeline .cin-timeline-item:nth-child(odd) .head::after { position: absolute; content: ""; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; } .cin-timeline .cin-timeline-item:nth-child(even) .head::before, .cin-timeline .cin-timeline-item:nth-child(odd) .head::before { position: absolute; content: ""; width: 10px; height: 10px; background-color: #9333ea; border-radius: 10px; box-shadow: 0px 0px 2px 8px #0F172A, 0 0 10px 5px #4f46e5; } .cin-timeline .cin-timeline-item:nth-child(odd) { margin-left: 5%; } .cin-timeline .cin-timeline-item:nth-child(odd) .head::after { border-left-width: 15px; border-left-style: solid; left: 100%; } .cin-timeline .cin-timeline-item:nth-child(odd) .head::before { left: calc(110% + 7px); } .cin-timeline .cin-timeline-item:nth-child(even) { margin-right: 5%; } .cin-timeline .cin-timeline-item:nth-child(even) .head::after { border-right-width: 15px; border-right-style: solid; right: 100%; } .cin-timeline .cin-timeline-item:nth-child(even) .head::before { right: calc(110% + 5px); } .cin-timeline .cin-timeline-item:nth-child(2) { margin-top: 245px; } .cin-timeline .vertical_hr{ position:absolute; width:0; top:0; height:100%; border-left:solid 1px #21335c; box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); left:50%; } [data-theme="day"] .cin-timeline .cin-timeline-item:nth-child(even) .head::before, [data-theme="day"] .cin-timeline .cin-timeline-item:nth-child(odd) .head::before { box-shadow: 0px 0px 2px 8px #fff, 0 0 10px 5px #4f46e5; } [data-theme="day"] .cin-timeline .vertical_hr{ border-left:solid 1px #eee; box-shadow: 0 0 4px rgba(79, 70, 229, 0.3); } } .btns { position: relative; text-transform: uppercase; letter-spacing: 1px; display: inline-block !important; font-weight: 400; line-height: 1.5; text-align: center; text-decoration: none; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; border-radius:5rem; padding: 9px 30px; font-size: 0.85rem; z-index:9; transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); overflow:hidden; background: transparent; } .btns, .btns .txt{ cursor:pointer !important; display: inline-block; } .btns-black, a.btns-black { color: #000 !important; background:rgba(0, 0, 0, .5); border:solid 1px rgba(0, 0, 0, 0.3) !important; } .btns-black:hover { color: #fff !important; background: #000 !important; } .btns-white, a.btns-white{ color: #fff !important; background:rgba(255, 255, 255, .5); border:solid 1px rgba(255, 255, 255, 0.6) !important; } .btns-white:hover { color: #000 !important; background: #fff !important; } /* ---------------------------------------------------------- 7. Contact Page — Dropdown Fix + Amber Send Button ---------------------------------------------------------- */ .cin-select option { color: #0F172A; background: #FFFFFF; } .cin-select { color: var(--cin-text); } .cin-select:focus { color: var(--cin-text); } /* Ensure dropdown text visible when value selected */ .cin-float-input.cin-select option:not([value=""]) { color: #0F172A; background: #FFFFFF; } /* ---------------------------------------------------------- 8. Quote Wizard — Amber Submit Button ---------------------------------------------------------- */ .cin-quote-submit { background: #F59E0B; color: #0F172A; } .cin-quote-submit:hover { background: #D97706; color: #0F172A; box-shadow: 0 0 24px rgba(245, 158, 11, 0.35); } /* ---------------------------------------------------------- 9. Mobile Refinements for Inner Heroes ---------------------------------------------------------- */ @media (max-width: 575.98px) { .cin-page-hero { padding: 7rem 0 3rem; min-height: auto; } .cin-timeline { padding-left: 3.5rem; } .cin-timeline-marker { width: 40px; height: 40px; left: -3rem; } .cin-timeline::before { left: 19px; } } /* ---------------------------------------------------------- Navbar CTA — Amber Authority ---------------------------------------------------------- */ .ds-cinematic .ds-navbar .btn-nav-cta { background: #F59E0B; color: #0F172A; border: 1px solid #F59E0B; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; } .ds-cinematic .ds-navbar .btn-nav-cta:hover { background: #D97706; color: #0F172A; border-color: #D97706; box-shadow: 0 0 20px rgba(245, 158, 11, 0.35); } /* ---------------------------------------------------------- Packages — Index Cards ---------------------------------------------------------- */ .ds-cinematic .cin-package-card { position: relative; background: #1f2937; border: 1px solid #E2E8F0; border-radius: 12px; padding: 2.5rem 2rem; text-align: center; transition: all 0.35s ease; height: 100%; display: flex; flex-direction: column; } .ds-cinematic .cin-package-card:hover { border-color: var(--cin-accent); box-shadow: 0 8px 32px rgba(37,99,235,0.12); transform: translateY(-4px); } .ds-cinematic .cin-package-featured { border-color: var(--cin-accent); box-shadow: 0 0 0 2px var(--cin-accent), 0 8px 32px rgba(37,99,235,0.15); } .ds-cinematic .cin-package-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--cin-accent); color: #FFFFFF; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.3rem 1rem; border-radius: 2rem; } .ds-cinematic .cin-package-name { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; } .ds-cinematic .cin-package-price { font-size: 1.75rem; font-weight: 800; color: var(--cin-accent); margin-bottom: 1rem; } .ds-cinematic .cin-package-desc { color: #eee; font-size: 0.95rem; line-height: 1.6; margin-bottom: 2rem; flex: 1; } .ds-cinematic .cin-btn-block { width: 100%; } .ds-cinematic .cin-btn-outline { background: transparent; color: var(--cin-accent); border: 1px solid var(--cin-accent); padding: 0.65rem 1.5rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; transition: all 0.25s ease; } .ds-cinematic .cin-btn-outline:hover { background: var(--cin-accent); color: #FFFFFF; } /*************************************/ [data-theme="day"] .ds-cinematic .cin-package-card { background: #FFFFFF; border: 1px solid #c5cfdb; } [data-theme="day"] .ds-cinematic .cin-package-card:hover { border-color: var(--cin-accent); } [data-theme="day"] .ds-cinematic .cin-package-featured { border-color: var(--cin-accent); } [data-theme="day"] .ds-cinematic .cin-package-badge { background: var(--cin-accent); color: #FFFFFF; } [data-theme="day"] .ds-cinematic .cin-package-name { color: #0F172A; } [data-theme="day"] .ds-cinematic .cin-package-price { color: var(--cin-accent); } [data-theme="day"] .ds-cinematic .cin-package-desc { color: #64748B; } [data-theme="day"] .ds-cinematic .cin-btn-outline { background: transparent; color: var(--cin-accent); border: 1px solid var(--cin-accent); } [data-theme="day"] .ds-cinematic .cin-btn-outline:hover { background: var(--cin-accent); color: #FFFFFF; } /* ---------------------------------------------------------- Packages — Detail: Who It's For ---------------------------------------------------------- */ .ds-cinematic .cin-who-for { margin-top: 1.5rem; } .ds-cinematic .cin-who-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; font-size: 1rem; color: #334155; border-bottom: 1px solid #F1F5F9; } .ds-cinematic .cin-who-item:last-child { border-bottom: none; } /* ---------------------------------------------------------- Packages — Detail: Feature Groups ---------------------------------------------------------- */ .ds-cinematic .cin-feature-groups { display: grid; gap: 2rem; margin-top: 2rem; } .ds-cinematic .cin-feature-group { background: rgba(255,255,255,0.04); border: 1px solid rgba(59,130,246,0.15); border-radius: 10px; padding: 1.5rem; } .ds-cinematic .cin-feature-group-title { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cin-accent-soft); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .ds-cinematic .cin-feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; } .ds-cinematic .cin-feature-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; color: #CBD5E1; } /* ---------------------------------------------------------- Packages — Detail: Prose ---------------------------------------------------------- */ .ds-cinematic .cin-prose { font-size: 1.05rem; line-height: 1.8; color: #334155; } .ds-cinematic .cin-prose p { margin-bottom: 1.25rem; } .ds-cinematic .cin-prose p:last-child { margin-bottom: 0; } /* ---------------------------------------------------------- Packages — Detail: FAQ Accordion ---------------------------------------------------------- */ .ds-cinematic .cin-faq-accordion { margin-top: 1.5rem; } .ds-cinematic .cin-faq-item { border: 1px solid #E2E8F0; border-radius: 8px; margin-bottom: 0.75rem; overflow: hidden; transition: border-color 0.25s; } .ds-cinematic .cin-faq-item.open { border-color: var(--cin-accent); } .ds-cinematic .cin-faq-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; background: #FFFFFF; border: none; cursor: pointer; font-size: 1rem; font-weight: 600; color: #0F172A; text-align: left; gap: 1rem; transition: background 0.2s; } .ds-cinematic .cin-faq-trigger:hover { background: #F8FAFC; } .ds-cinematic .cin-faq-trigger i { transition: transform 0.3s ease; color: var(--cin-accent); flex-shrink: 0; } .ds-cinematic .cin-faq-item.open .cin-faq-trigger i { transform: rotate(180deg); } .ds-cinematic .cin-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; padding: 0 1.25rem; } .ds-cinematic .cin-faq-item.open .cin-faq-answer { max-height: 500px; padding: 0 1.25rem 1.25rem; } .ds-cinematic .cin-faq-answer p { color: #475569; line-height: 1.7; margin: 0; } /* ---------------------------------------------------------- Packages — Responsive ---------------------------------------------------------- */ @media (max-width: 767px) { .ds-cinematic .cin-package-card { padding: 2rem 1.25rem; } .ds-cinematic .cin-feature-groups { gap: 1.25rem; } } /* ---------------------------------------------------------- Packages — Comparison Table v2 (Premium Grid) ---------------------------------------------------------- */ .ds-cinematic .cin-comp-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; background: #FFFFFF; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 24px rgba(0,0,0,0.04); border: 1px solid #E2E8F0; } .ds-cinematic .cin-comp-table { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; background: #043d5e; } /* Column widths */ .ds-cinematic .cin-comp-fcol { width: 40%; } .ds-cinematic .cin-comp-pcol { width: 20%; } /* Header */ .ds-cinematic .cin-comp-table thead th { background: #F8FAFC; padding: 20px 16px; font-size: 0.9rem; font-weight: 600; color: #334155; text-align: center; border-bottom: 1px solid #E2E8F0; vertical-align: bottom; } .ds-cinematic .cin-comp-fcol { text-align: left; padding-left: 24px !important; border-right: 1px solid #E2E8F0; color: #64748B; font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; } .ds-cinematic .cin-comp-pname { font-size: 1rem; font-weight: 700; color: #0F172A; margin-bottom: 2px; } .ds-cinematic .cin-comp-pprice { font-size: 0.8rem; font-weight: 600; color: var(--cin-accent); } /* Featured column */ .ds-cinematic thead th.cin-comp-ft { background: linear-gradient(180deg, rgba(37,99,235,0.08) 0%, rgba(37,99,235,0.04) 100%); border-left: 2px solid var(--cin-accent); border-right: 2px solid var(--cin-accent); } .ds-cinematic td.cin-comp-ft { background: linear-gradient(180deg, rgba(37,99,235,0.04) 0%, rgba(37,99,235,0.02) 100%); border-left: 2px solid var(--cin-accent); border-right: 2px solid var(--cin-accent); } /* Group rows */ .ds-cinematic .cin-comp-grow td { background: #F1F5F9; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; color: #475569; padding: 14px 24px; border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; } /* Feature rows */ .ds-cinematic .cin-comp-frow td { padding: 18px 16px; border-bottom: 1px solid #F1F5F9; vertical-align: middle; transition: background 0.2s ease; } .ds-cinematic .cin-comp-frow:hover td { background: #F8FAFC; } .ds-cinematic .cin-comp-frow:hover td.cin-comp-ft { background: rgba(37,99,235,0.06); } .ds-cinematic .cin-comp-fname { text-align: left; padding-left: 24px !important; color: #334155; font-weight: 500; font-size: 0.92rem; border-right: 1px solid #F1F5F9; } .ds-cinematic .cin-comp-val { text-align: center; } /* Check icon */ .ds-cinematic .cin-comp-chk { display: inline-block; transition: transform 0.2s ease; } .ds-cinematic .cin-comp-frow:hover .cin-comp-chk { transform: scale(1.15); } /* Note value (replaces check when note exists) */ .ds-cinematic .cin-comp-note-val { display: inline-block; font-size: 0.78rem; font-weight: 600; color: var(--cin-accent); background: rgba(37,99,235,0.08); padding: 2px 10px; border-radius: 10px; } /* Dash */ .ds-cinematic .cin-comp-dsh { color: #CBD5E1; font-size: 1.25rem; font-weight: 300; line-height: 1; } /* Tooltip icon */ .ds-cinematic .cin-comp-info { margin-left: 6px; color: #94A3B8; font-size: 0.78rem; cursor: help; } .ds-cinematic .cin-comp-info:hover { color: var(--cin-accent); } /* Last row no border */ .ds-cinematic .cin-comp-frow:last-child td { border-bottom: none; } /* Responsive: sticky feature col */ @media (max-width: 767px) { .ds-cinematic .cin-comp-fcol, .ds-cinematic .cin-comp-fname { position: sticky; left: 0; z-index: 1; background: #FFFFFF; } .ds-cinematic .cin-comp-frow:hover .cin-comp-fname { background: #F8FAFC; } .ds-cinematic .cin-comp-grow td { position: sticky; left: 0; z-index: 1; } } /* ---------------------------------------------------------- Quote — Success Screen ---------------------------------------------------------- */ .ds-cinematic .cin-quote-success { text-align: center; padding: 3rem 1.5rem; max-width: 480px; margin: 0 auto; } .ds-cinematic .cin-success-icon { margin-bottom: 1.75rem; animation: cin-success-pop 0.5s ease; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } .ds-cinematic .cin-success-title { font-size: 1.75rem; font-weight: 800; color: #0F172A; margin-bottom: 0.75rem; } .ds-cinematic .cin-success-msg { font-size: 0.95rem; line-height: 1.7; color: #64748B; margin-bottom: 2rem; } .ds-cinematic .cin-success-details { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.75rem; } .ds-cinematic .cin-success-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.88rem; color: #334155; font-weight: 500; } .ds-cinematic .cin-success-item i { color: var(--cin-accent); font-size: 1.1rem; flex-shrink: 0; } .ds-cinematic .cin-success-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* ---------------------------------------------------------- Services — Image Support ---------------------------------------------------------- */ .ds-cinematic .cin-service-thumb { width: 100%; height: 200px; overflow: hidden; } .ds-cinematic .cin-service-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s ease; } .ds-cinematic .cin-service-card:hover .cin-service-thumb img { transform: scale(1.05); } .ds-cinematic .cin-service-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; background: linear-gradient(165deg, rgba(59,130,246,0.06) 0%, rgba(139,92,246,0.04) 50%, rgba(12,12,36,0.8) 100%); } [data-theme="day"] .ds-cinematic .cin-service-body { background: #fff; } /* ---------------------------------------------------------- Services Detail — Background Image Hero ---------------------------------------------------------- */ .ds-cinematic .cin-hero-has-bg h1, /* ---------------------------------------------------------- Blog — Card Grid ---------------------------------------------------------- */ .ds-cinematic .cin-blog-card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; overflow: hidden; text-decoration: none; height: 100%; transition: all 0.35s ease; } .ds-cinematic .cin-blog-card:hover { border-color: var(--cin-accent); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(37,99,235,0.1); } .ds-cinematic .cin-blog-thumb { width: 100%; height: 200px; overflow: hidden; } .ds-cinematic .cin-blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .ds-cinematic .cin-blog-card:hover .cin-blog-thumb img { transform: scale(1.05); } .ds-cinematic .cin-blog-thumb-placeholder { background: linear-gradient(135deg, #F1F5F9, #E2E8F0); display: flex; align-items: center; justify-content: center; } .ds-cinematic .cin-blog-thumb-placeholder i { font-size: 2.5rem; color: #94A3B8; } .ds-cinematic .cin-blog-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; } .ds-cinematic .cin-blog-meta { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: #94A3B8; margin-bottom: 0.6rem; font-weight: 500; } .ds-cinematic .cin-blog-title { font-size: 1.1rem; font-weight: 700; color: #0F172A; line-height: 1.4; margin-bottom: 0.5rem; } .ds-cinematic .cin-blog-card:hover .cin-blog-title { color: var(--cin-accent); } .ds-cinematic .cin-blog-excerpt { font-size: 0.88rem; line-height: 1.6; color: #64748B; margin-bottom: 1rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Pagination */ .ds-cinematic .cin-pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem; } .ds-cinematic .cin-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 0.75rem; border: 1px solid #E2E8F0; border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: #334155; text-decoration: none; transition: all 0.2s ease; } .ds-cinematic .cin-page-link:hover { border-color: var(--cin-accent); color: var(--cin-accent); background: rgba(37,99,235,0.04); } .ds-cinematic .cin-page-link.active { background: var(--cin-accent); border-color: var(--cin-accent); color: #FFFFFF; } /* ---------------------------------------------------------- Portfolio — Card Grid ---------------------------------------------------------- */ .ds-cinematic .cin-portfolio-card { display: flex; flex-direction: column; background: #1f2937; border: 1px solid #E2E8F0; border-radius: 14px; overflow: hidden; text-decoration: none; height: 100%; transition: all 0.35s ease; } .ds-cinematic .cin-portfolio-card:hover { border-color: var(--cin-accent); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(37,99,235,0.1); } .ds-cinematic .cin-portfolio-thumb { position: relative; width: 100%; height: 220px; overflow: hidden; } .ds-cinematic .cin-portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .ds-cinematic .cin-portfolio-card:hover .cin-portfolio-thumb img { transform: scale(1.05); } .ds-cinematic .cin-portfolio-overlay { position: absolute; inset: 0; background: rgba(15,23,42,0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .ds-cinematic .cin-portfolio-card:hover .cin-portfolio-overlay { opacity: 1; } .ds-cinematic .cin-portfolio-overlay i { font-size: 2rem; color: #FFFFFF; } .ds-cinematic .cin-portfolio-placeholder { background: linear-gradient(135deg, #F1F5F9, #E2E8F0); display: flex; align-items: center; justify-content: center; } .ds-cinematic .cin-portfolio-placeholder i { font-size: 2.5rem; color: #94A3B8; } .ds-cinematic .cin-portfolio-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; background: linear-gradient(165deg, rgba(59,130,246,0.06) 0%, rgba(139,92,246,0.04) 50%, rgba(12,12,36,0.8) 100%); } .ds-cinematic .cin-portfolio-title { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; } .ds-cinematic .cin-portfolio-card:hover .cin-portfolio-title { color: var(--cin-text); } .ds-cinematic .cin-portfolio-summary { font-size: 0.88rem; line-height: 1.6; color: #ccc; margin-bottom: 1rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } [data-theme="day"] .ds-cinematic .cin-portfolio-placeholder i { color: #94A3B8; } [data-theme="day"] .ds-cinematic .cin-portfolio-body { background: #FFF; } [data-theme="day"] .ds-cinematic .cin-portfolio-title { color: #0F172A; } [data-theme="day"] .ds-cinematic .cin-portfolio-card:hover .cin-portfolio-title { color: var(--cin-accent); } [data-theme="day"] .ds-cinematic .cin-portfolio-summary { color: #64748B; } /* ---------------------------------------------------------- Hero Transparent — Let Aurora show through All non-home pages. Does NOT affect cin-hero-has-bg. ---------------------------------------------------------- */ .ds-cinematic .cin-page-hero:not(.cin-hero-has-bg) { background: transparent !important; } .ds-cinematic .cin-page-hero:not(.cin-hero-has-bg)::before { display: none !important; } .ds-cinematic .ds-page-hero:not(.cin-hero-has-bg) { background: transparent !important; } /* Sections — transparent so aurora shows everywhere */ .ds-cinematic .cin-section { background: transparent; } /* ---------------------------------------------------------- Service Detail — Feature Image (centered, rounded) ---------------------------------------------------------- */ .ds-cinematic .cin-service-feature-img { max-width: 720px; margin: 0 auto; border-radius: 16px; overflow: hidden; border: 1px solid rgba(139,92,246,0.12); box-shadow: 0 8px 32px rgba(59,130,246,0.08), 0 0 60px rgba(139,92,246,0.04); } .ds-cinematic .cin-service-feature-img img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; } .ds-cinematic .cin-service-feature-img:hover img { transform: scale(1.02); } /* ---------------------------------------------------------- Blog Cards — Dark Theme Override ---------------------------------------------------------- */ .ds-cinematic .cin-blog-card { background: linear-gradient(165deg, rgba(59,130,246,0.06) 0%, rgba(139,92,246,0.04) 50%, rgba(12,12,36,0.8) 100%); border: 1px solid rgba(139,92,246,0.1); } .ds-cinematic .cin-blog-card:hover { border-color: rgba(59,130,246,0.3); box-shadow: 0 12px 40px rgba(59,130,246,0.12), 0 0 30px rgba(139,92,246,0.06); } .ds-cinematic .cin-blog-thumb-placeholder { background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(139,92,246,0.06)); } .ds-cinematic .cin-blog-thumb-placeholder i { color: rgba(139,92,246,0.35); } .ds-cinematic .cin-blog-body { background: transparent; } .ds-cinematic .cin-blog-meta { color: var(--cin-text-muted); gap: 0.5rem; } .ds-cinematic .cin-blog-meta i { color: var(--cin-accent-soft); font-size: 0.75rem; } .ds-cinematic .cin-blog-title { color: var(--cin-text); } .ds-cinematic .cin-blog-card:hover .cin-blog-title { color: #93C5FD; } .ds-cinematic .cin-blog-excerpt { color: var(--cin-text-muted); } .ds-cinematic .cin-pagination a, .ds-cinematic .cin-pagination span { background: rgba(59,130,246,0.08); border-color: rgba(139,92,246,0.12); color: var(--cin-text-muted); } .ds-cinematic .cin-pagination a:hover, .ds-cinematic .cin-pagination .active { background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(139,92,246,0.15)); border-color: var(--cin-accent); color: #FFFFFF; } /* ---------------------------------------------------------- Compare Features — Dark Theme Override ---------------------------------------------------------- */ #package-comparison { background: transparent !important; } #package-comparison .cin-section-title { color: var(--cin-text) !important; } #package-comparison p { color: var(--cin-text-muted) !important; } .ds-cinematic .cin-comp-wrapper { border-radius: 12px; border: 1px solid rgba(139,92,246,0.12); overflow: hidden; background: linear-gradient(165deg, rgba(59,130,246,0.04) 0%, rgba(12,12,36,0.6) 100%); } .ds-cinematic .cin-comp-table { border-collapse: collapse; width: 100%; } .ds-cinematic .cin-comp-table thead tr { background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(139,92,246,0.08)) !important; } .ds-cinematic .cin-comp-table thead th { color: var(--cin-text) !important; border-bottom: 1px solid rgba(139,92,246,0.15) !important; } .ds-cinematic .cin-comp-table .cin-comp-pname { color: var(--cin-text) !important; } .ds-cinematic .cin-comp-table .cin-comp-pprice { color: var(--cin-accent-soft) !important; } .ds-cinematic .cin-comp-grow td { background: linear-gradient(90deg, rgba(59,130,246,0.08), rgba(139,92,246,0.06)) !important; color: #93C5FD !important; font-weight: 700 !important; border-bottom: 1px solid rgba(139,92,246,0.1) !important; } .ds-cinematic .cin-comp-frow td { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; } .ds-cinematic .cin-comp-fname { color: var(--cin-text-muted) !important; } .ds-cinematic .cin-comp-note-val { color: var(--cin-text) !important; } .ds-cinematic .cin-comp-dsh { color: rgba(255,255,255,0.15) !important; } .ds-cinematic .cin-comp-chk path { stroke: #3B82F6 !important; } .ds-cinematic .cin-comp-info i { color: var(--cin-text-muted) !important; } .ds-cinematic .cin-comp-ft { background: rgba(59,130,246,0.04) !important; } /* ---------------------------------------------------------- Compare Table — Dark Override (fix white header/rows) ---------------------------------------------------------- */ .ds-cinematic .cin-comp-wrapper { background: rgba(12,12,36,0.6) !important; border: 1px solid rgba(139,92,246,0.12) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important; } .ds-cinematic .cin-comp-table thead th { background: rgba(59,130,246,0.1) !important; color: var(--cin-text) !important; border-bottom: 1px solid rgba(139,92,246,0.15) !important; } .ds-cinematic thead th.cin-comp-ft { background: linear-gradient(180deg, rgba(59,130,246,0.18) 0%, rgba(139,92,246,0.1) 100%) !important; border-left: 2px solid var(--cin-accent) !important; border-right: 2px solid var(--cin-accent) !important; } .ds-cinematic .cin-comp-pname { color: var(--cin-text) !important; } .ds-cinematic .cin-comp-grow td { background: linear-gradient(90deg, rgba(59,130,246,0.1), rgba(139,92,246,0.08)) !important; color: #93C5FD !important; border-top: 1px solid rgba(139,92,246,0.1) !important; border-bottom: 1px solid rgba(139,92,246,0.1) !important; } .ds-cinematic .cin-comp-frow td { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; } .ds-cinematic .cin-comp-frow:hover td { background: rgba(59,130,246,0.04) !important; } .ds-cinematic .cin-comp-frow:hover td.cin-comp-ft { background: rgba(59,130,246,0.08) !important; } .ds-cinematic td.cin-comp-ft { background: rgba(59,130,246,0.03) !important; border-left: 2px solid var(--cin-accent) !important; border-right: 2px solid var(--cin-accent) !important; } .ds-cinematic .cin-comp-fname { color: var(--cin-text-muted) !important; } .ds-cinematic .cin-comp-info i { color: var(--cin-text-muted) !important; } /* ---------------------------------------------------------- Blog — Brighter Section Background ---------------------------------------------------------- */ .ds-cinematic .cin-blog-card { background: linear-gradient(165deg, rgba(59,130,246,0.08) 0%, rgba(139,92,246,0.06) 50%, rgba(20,20,50,0.7) 100%) !important; border: 1px solid rgba(139,92,246,0.12) !important; } .ds-cinematic .cin-blog-thumb-placeholder { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(139,92,246,0.1)) !important; } /* ---------------------------------------------------------- Hero Image — cin-hero-img ---------------------------------------------------------- */ .ds-cinematic .cin-hero-img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; border: 1px solid rgba(139,92,246,0.12); box-shadow: 0 8px 40px rgba(59,130,246,0.1), 0 0 60px rgba(139,92,246,0.05); } /* ---------------------------------------------------------- Testimonials Section — Homepage ---------------------------------------------------------- */ .cin-testimonials-v2 { padding: 6rem 0; background: transparent; } .cin-testimonial-card { background: linear-gradient(165deg, rgba(59,130,246,0.06) 0%, rgba(139,92,246,0.04) 50%, rgba(15,23,42,0.8) 100%); border: 1px solid rgba(139,92,246,0.1); border-radius: 14px; padding: 2rem; height: 100%; display: flex; flex-direction: column; transition: all 0.4s ease; position: relative; } .cin-testimonial-card::before { content: '\201C'; font-family: 'Playfair Display', Georgia, serif; font-size: 4rem; background: linear-gradient(135deg, #3B82F6, #8B5CF6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0.12; position: absolute; top: 0.75rem; left: 1.5rem; line-height: 1; pointer-events: none; } .cin-testimonial-card:hover { border-color: rgba(59,130,246,0.25); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(59,130,246,0.08), 0 0 30px rgba(139,92,246,0.04); } .cin-test-stars { display: flex; gap: 2px; margin-bottom: 1rem; font-size: 0.8rem; color: #F59E0B; } .cin-test-content { font-size: 0.92rem; line-height: 1.75; color: var(--cin-text-muted, #94A3B8); font-style: italic; flex: 1; margin-bottom: 1.5rem; } .cin-test-author { display: flex; align-items: center; gap: 0.75rem; } .cin-test-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(59,130,246,0.2); } .cin-test-avatar-placeholder { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #3B82F6, #8B5CF6); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #FFFFFF; font-size: 0.8rem; box-shadow: 0 0 12px rgba(139,92,246,0.2); } .cin-test-name { display: block; font-size: 0.88rem; font-weight: 600; color: var(--cin-text, #F1F5F9); } .cin-test-role { display: block; font-size: 0.75rem; color: var(--cin-text-muted, #64748B); } /* ---------------------------------------------------------- Global H2 — White ---------------------------------------------------------- */ .ds-cinematic h2 { color: #FFFFFF !important; } /* ---------------------------------------------------------- Blog Cards — Solid Dark Background ---------------------------------------------------------- */ .ds-cinematic .cin-blog-card { background: linear-gradient(165deg, rgba(30,35,60,0.95) 0%, rgba(15,20,45,0.95) 100%) !important; border: 1px solid rgba(139,92,246,0.12) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ds-cinematic .cin-blog-card:hover { background: linear-gradient(165deg, rgba(40,45,75,0.98) 0%, rgba(20,25,55,0.98) 100%) !important; } /* ---------------------------------------------------------- Quote Wizard — Disable cin-reveal re-trigger ---------------------------------------------------------- */ .cin-quote-wrap .cin-quote-step .cin-option-btn, .cin-quote-wrap .cin-quote-step .cin-option-grid, .cin-quote-wrap .cin-quote-step .cin-step-title, .cin-quote-wrap .cin-quote-step * { opacity: 1 !important; transform: none !important; animation: none !important; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } .cin-quote-step.active { animation: cinStepFadeIn 0.3s ease forwards; } @keyframes cinStepFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---------------------------------------------------------- Homepage — Dark Text Overrides ---------------------------------------------------------- */ .cin-hero-v2 ~ .cin-final-cta-v2 .cin-cta-headline, .cin-authority-v2 .cin-authority-headline{ color: #0F172A !important; } /* ---------------------------------------------------------- Gradient Word — Blue to Yellow ---------------------------------------------------------- */ .cin-hero-v2 .gradient-word { background: linear-gradient(135deg, #3B82F6 0%, #F59E0B 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ---------------------------------------------------------- Hero Image — Animations & Effects ---------------------------------------------------------- */ .ds-cinematic .cin-hero-visual { perspective: 1000px; } .ds-cinematic .cin-hero-img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; border: 1px solid rgba(139,92,246,0.15) !important; box-shadow: 0 8px 40px rgba(59,130,246,0.12), 0 0 60px rgba(139,92,246,0.06), 0 0 0 1px rgba(59,130,246,0.05) !important; animation: heroImgFloat 6s ease-in-out infinite; transition: all 0.5s ease !important; position: relative; } .ds-cinematic .cin-hero-img:hover { transform: translateY(-8px) rotateY(-2deg) rotateX(2deg) scale(1.02); box-shadow: 0 20px 60px rgba(59,130,246,0.2), 0 0 80px rgba(139,92,246,0.1), 0 0 0 1px rgba(139,92,246,0.2) !important; } /* Floating animation */ @keyframes heroImgFloat { 0%, 100% { transform: translateY(0) rotateY(0deg); } 25% { transform: translateY(-10px) rotateY(1deg); } 50% { transform: translateY(-5px) rotateY(-0.5deg); } 75% { transform: translateY(-12px) rotateY(0.5deg); } } /* Glow ring behind image */ .ds-cinematic .cin-hero-visual::before { content: ''; position: absolute; inset: -15px; border-radius: 24px; background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(139,92,246,0.1), rgba(217,70,239,0.08)); filter: blur(30px); z-index: -1; animation: heroGlowPulse 4s ease-in-out infinite alternate; pointer-events: none; } @keyframes heroGlowPulse { 0% { opacity: 0.4; transform: scale(0.95); } 100% { opacity: 0.8; transform: scale(1.05); } } /* Shimmer overlay */ .ds-cinematic .cin-hero-visual::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 60%, transparent 100% ); border-radius: 16px; animation: heroShimmer 5s ease-in-out infinite; pointer-events: none; z-index: 1; } @keyframes heroShimmer { 0% { left: -100%; } 50% { left: 150%; } 100% { left: 150%; } } /* Ensure visual has relative positioning for pseudo-elements */ .cin-hero-v2 .cin-hero-visual { position: relative; z-index: 0; } .cin-section-title { color: #0F172A !important; } .ds-cinematic .cin-who-item > span { color: #bbb !important; } /* ---------------------------------------------------------- About Page — Cards, Metrics, Team ---------------------------------------------------------- */ /* Mission/Vision Cards */ .cin-about-card { background: rgba(30,35,60,0.6); border: 1px solid rgba(139,92,246,0.1); border-radius: 14px; padding: 2rem; backdrop-filter: blur(8px); transition: all 0.3s ease; height: 100%; } .cin-about-card:hover { border-color: rgba(59,130,246,0.2); box-shadow: 0 8px 32px rgba(59,130,246,0.08); transform: translateY(-4px); } .cin-about-card-icon { font-size: 1.75rem; color: #3B82F6; margin-bottom: 1rem; } .cin-about-card h3 { font-size: 1.25rem; color: #f1f5f9; margin-bottom: 0.75rem; } .cin-about-card p { color: #94a3b8; line-height: 1.7; margin: 0; } /* Authority Metrics Grid */ .cin-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; max-width: 900px; margin: 0 auto; } .cin-metric-card { background: rgba(30,35,60,0.5); border: 1px solid rgba(139,92,246,0.1); border-radius: 14px; padding: 2rem 1.5rem; text-align: center; transition: all 0.3s ease; } .cin-metric-card:hover { border-color: rgba(59,130,246,0.25); box-shadow: 0 8px 32px rgba(59,130,246,0.1); transform: translateY(-4px); } .cin-metric-value { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, #3B82F6, #8B5CF6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2; margin-bottom: 0.25rem; } .cin-metric-label { font-size: 0.9rem; color: #94a3b8; letter-spacing: 0.02em; } /* Team Grid */ .cin-team-grid { display: grid; gap: 2rem; } .cin-team-grid.grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .cin-team-grid.grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .cin-team-grid.grid-cols-5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 991px) { .cin-team-grid.grid-cols-3, .cin-team-grid.grid-cols-4, .cin-team-grid.grid-cols-5 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .cin-team-grid.grid-cols-3, .cin-team-grid.grid-cols-4, .cin-team-grid.grid-cols-5 { grid-template-columns: 1fr; } } /* Team Card */ .cin-team-card { background: rgba(30,35,60,0.6); border: 1px solid rgba(139,92,246,0.1); border-radius: 14px; overflow: hidden; transition: all 0.35s ease; perspective: 1000px; } .cin-team-card:hover { transform: translateY(-6px); border-color: rgba(59,130,246,0.25); box-shadow: 0 12px 40px rgba(59,130,246,0.12), 0 0 40px rgba(139,92,246,0.06); } /* Team Photo */ .cin-team-photo { width: 100%; aspect-ratio: 1; overflow: hidden; position: relative; } .cin-team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .cin-team-card:hover .cin-team-photo img { transform: scale(1.03); } .cin-team-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 700; background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(139,92,246,0.15)); color: #3B82F6; } /* Team Info */ .cin-team-info { padding: 1.25rem 1.5rem 1.5rem; } .cin-team-name { font-size: 1.1rem; font-weight: 700; color: #f1f5f9; margin: 0 0 0.25rem; } .cin-team-role { font-size: 0.85rem; color: #3B82F6; margin: 0 0 0.5rem; font-weight: 500; } .cin-team-bio { font-size: 0.85rem; color: #94a3b8; line-height: 1.6; margin: 0 0 0.75rem; } /* Social Icons */ .cin-team-social { display: flex; gap: 0.5rem; } .cin-social-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(59,130,246,0.1); color: #94a3b8; font-size: 0.85rem; transition: all 0.25s ease; text-decoration: none; } .cin-social-icon:hover { background: rgba(59,130,246,0.25); color: #3B82F6; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59,130,246,0.15); } /* ---------------------------------------------------------- Rich Content — cin-content wrapper ---------------------------------------------------------- */ .cin-content h2 { font-size: 1.5rem; font-weight: 700; color: #f1f5f9; margin: 2rem 0 0.75rem; line-height: 1.3; } .cin-content h3 { font-size: 1.25rem; font-weight: 600; color: #e2e8f0; margin: 1.75rem 0 0.6rem; } .cin-content h4, .cin-content h5 { font-size: 1.1rem; font-weight: 600; color: #cbd5e1; margin: 1.5rem 0 0.5rem; } .cin-content p { color: #94a3b8; line-height: 1.8; margin-bottom: 1.25rem; } .cin-content strong { color: #e2e8f0; } .cin-content em { font-style: italic; } .cin-content u { text-decoration: underline; text-underline-offset: 3px; } .cin-content ul, .cin-content ol { padding-left: 1.4rem; margin-bottom: 1.25rem; color: #94a3b8; } .cin-content li { margin-bottom: 0.4rem; line-height: 1.7; } .cin-content blockquote { border-left: 3px solid #3B82F6; padding: 0.75rem 1.25rem; margin: 1.5rem 0; background: rgba(59,130,246,0.05); border-radius: 0 8px 8px 0; color: #94a3b8; font-style: italic; } .cin-content a { color: #3B82F6; text-decoration: none; transition: color 0.2s ease; } .cin-content a:hover { color: #60a5fa; text-decoration: underline; } .cin-content img { max-width: 100%; height: auto; border-radius: 14px; margin: 1.5rem 0; border: 1px solid rgba(139,92,246,0.1); } .cin-content h2:first-child, .cin-content h3:first-child, .cin-content p:first-child { margin-top: 0; } /* ---------------------------------------------------------- Day/Night Theme System v1.0 Night = default (current dark). Day = light override. ---------------------------------------------------------- */ /* Day Theme — Variable Overrides */ [data-theme="day"] .ds-cinematic, [data-theme="day"].ds-cinematic { --cin-bg: #FFFFFF; --cin-bg-alt: #F8FAFC; --cin-bg-card: #FFFFFF; --cin-bg-light: #F1F5F9; --cin-bg-white: #FFFFFF; --cin-accent: #2563EB; --cin-accent-soft: #3B82F6; --cin-accent-deep: #1E40AF; --cin-accent-glow: rgba(59, 130, 246, 0.15); --cin-purple-glow: rgba(139, 92, 246, 0.1); --cin-text: #0F172A; --cin-text-soft: #334155; --cin-text-muted: #64748B; --cin-text-dark: #0F172A; --cin-border: rgba(0, 0, 0, 0.08); --cin-border-hover: rgba(59, 130, 246, 0.4); --cin-border-light: #E2E8F0; } /* Day: body + page backgrounds */ [data-theme="day"] body { background: #FFFFFF !important; color: #0F172A !important; } /* Day: Navbar */ [data-theme="day"] .ds-navbar { background: rgba(255,255,255,0.95) !important; border-bottom-color: rgba(0,0,0,0.06) !important; backdrop-filter: blur(12px); } [data-theme="day"] .ds-navbar.scrolled { background: rgba(255,255,255,0.98) !important; box-shadow: 0 1px 8px rgba(0,0,0,0.06); } [data-theme="day"] .ds-navbar .navbar-brand { color: #0F172A !important; } [data-theme="day"] .ds-navbar .nav-link { color: #334155 !important; } [data-theme="day"] .ds-navbar .nav-link:hover, [data-theme="day"] .ds-navbar .nav-link.active { color: #2563EB !important; } [data-theme="day"] .navbar-toggler-icon { filter: none !important; } /* Day: Hero sections */ [data-theme="day"] .cin-page-hero, [data-theme="day"] .cin-hero-v2 { background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 50%, #F8FAFC 100%) !important; } [data-theme="day"] .cin-page-title, [data-theme="day"] .cin-hero-v2 h1 { color: #0F172A !important; } [data-theme="day"] .cin-page-sub, [data-theme="day"] .cin-hero-sub { color: #64748B !important; } /* Day: Section backgrounds */ [data-theme="day"] .cin-section { background: transparent !important; } /* Day: Section titles */ [data-theme="day"] .cin-section-title, [data-theme="day"] .cin-cta-headline, [data-theme="day"] .cin-authority-headline { color: #0F172A !important; } /* Day: Cards (services, about, team, metrics) */ [data-theme="day"] .cin-service-card, [data-theme="day"] .cin-about-card, [data-theme="day"] .cin-team-card, [data-theme="day"] .cin-metric-card, [data-theme="day"] .cin-blog-card { background: #FFFFFF !important; border-color: #E2E8F0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04); } [data-theme="day"] .cin-service-card:hover, [data-theme="day"] .cin-about-card:hover, [data-theme="day"] .cin-team-card:hover, [data-theme="day"] .cin-metric-card:hover, [data-theme="day"] .cin-blog-card:hover { border-color: rgba(59,130,246,0.3) !important; box-shadow: 0 8px 24px rgba(59,130,246,0.08) !important; } /* Day: Card text */ [data-theme="day"] .cin-service-card h3, [data-theme="day"] .cin-about-card h3, [data-theme="day"] .cin-team-name, [data-theme="day"] .cin-blog-card h3 { color: #0F172A !important; } [data-theme="day"] .cin-service-card p, [data-theme="day"] .cin-about-card p, [data-theme="day"] .cin-team-bio, [data-theme="day"] .cin-blog-card p { color: #64748B !important; } [data-theme="day"] .cin-team-role { color: #2563EB !important; } /* Day: Metrics */ [data-theme="day"] .cin-metric-label { color: #64748B !important; } /* Day: Footer */ [data-theme="day"] .ds-footer { background: #F8FAFC !important; border-top-color: #E2E8F0 !important; } [data-theme="day"] .ds-footer, [data-theme="day"] .ds-footer p, [data-theme="day"] .ds-footer a { color: #64748B !important; } [data-theme="day"] .ds-footer .footer-brand { color: #0F172A !important; } /* Day: Buttons */ [data-theme="day"] .cin-btn-ghost { color: #334155 !important; border-color: #CBD5E1 !important; } [data-theme="day"] .cin-btn-ghost:hover { color: #2563EB !important; border-color: #2563EB !important; } /* Day: Who section */ [data-theme="day"] .cin-who-item > span { color: #64748B !important; } /* Day: Content blocks */ [data-theme="day"] .cin-content h2, [data-theme="day"] .cin-content h3 { color: #0F172A !important; } [data-theme="day"] .cin-content p, [data-theme="day"] .cin-content li { color: #475569 !important; } /* Day: Labels */ [data-theme="day"] .cin-label, [data-theme="day"] .cin-hero-label { color: #2563EB !important; border-color: rgba(37,99,235,0.2) !important; } /* Day: Testimonials */ [data-theme="day"] .cin-testimonial-card { background: #FFFFFF !important; border-color: #E2E8F0 !important; } [data-theme="day"] .cin-testimonial-card p { color: #475569 !important; } /* Day: Social icons */ [data-theme="day"] .cin-social-icon { background: rgba(37,99,235,0.08) !important; color: #64748B !important; } [data-theme="day"] .cin-social-icon:hover { background: rgba(37,99,235,0.15) !important; color: #2563EB !important; } /* Day: Placeholder text overrides */ [data-theme="day"] .cin-team-placeholder { background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(139,92,246,0.08)) !important; } /* Day: CTA sections */ [data-theme="day"] .cin-final-cta-v2 { background: #F8FAFC !important; } [data-theme="day"] .cin-cta-sub { color: #64748B !important; } /* Day: Mobile nav */ @media (max-width: 991.98px) { [data-theme="day"] .ds-cinematic .ds-navbar .navbar-collapse { background: rgba(255,255,255,0.98) !important; border-color: #E2E8F0 !important; } } /* ---------------------------------------------------------- Theme Toggle Button — Always Visible ---------------------------------------------------------- */ .ds-cinematic .ds-theme-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cin-border); background: transparent; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; padding: 0; } .ds-cinematic .ds-theme-toggle:hover { border-color: var(--cin-accent-soft); background: rgba(59,130,246,0.08); } .ds-cinematic .ds-theme-toggle:focus-visible { outline: 2px solid var(--cin-accent-soft); outline-offset: 2px; } .ds-cinematic .ds-theme-toggle .ds-icon-sun, .ds-cinematic .ds-theme-toggle .ds-icon-moon { font-size: 0.95rem; transition: opacity 0.3s ease, transform 0.3s ease; position: absolute; } /* Night mode (default): show moon, hide sun */ .ds-theme-toggle .ds-icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); } .ds-theme-toggle .ds-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); color: #94A3B8; } /* Day mode: show sun, hide moon */ [data-theme="day"] .ds-theme-toggle .ds-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); color: #F59E0B; } [data-theme="day"] .ds-theme-toggle .ds-icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); } /* ---------------------------------------------------------- Global Theme Transition (skip on initial load) ---------------------------------------------------------- */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; } /* Day: Portfolio section */ [data-theme="day"] .cin-portfolio-v2 { /* background matched to CTA */ background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 30%, #E0E7FF 70%, #EFF6FF 100%) !important; } [data-theme="day"] .cin-portfolio-card-v2 { background: #FFFFFF !important; border-color: #E2E8F0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04); } [data-theme="day"] .cin-portfolio-card-v2:hover { border-color: rgba(59,130,246,0.3) !important; box-shadow: 0 8px 24px rgba(59,130,246,0.08) !important; } [data-theme="day"] .cin-portfolio-card-v2 .cin-pf-body h3 { color: #0F172A !important; } [data-theme="day"] .cin-portfolio-card-v2 .cin-pf-body p { color: #64748B !important; } /* Day: Packages — Compare Table section */ [data-theme="day"] .cin-comp-wrapper { background: #FFFFFF !important; border-color: #E2E8F0 !important; } [data-theme="day"] .cin-comp-table { background: #fff !important; } [data-theme="day"] .cin-comp-table thead th { background: #F8FAFC !important; color: #334155 !important; border-bottom-color: #E2E8F0 !important; } [data-theme="day"] .cin-comp-grow td { background: #F1F5F9 !important; color: #475569 !important; } [data-theme="day"] .cin-comp-frow td { border-bottom-color: #F1F5F9 !important; } [data-theme="day"] .cin-comp-frow:hover td { background: #F8FAFC !important; } [data-theme="day"] .cin-comp-fname { color: #334155 !important; } /* Day: Package cards */ [data-theme="day"] .cin-package-card { background: #FFFFFF !important; border-color: #E2E8F0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04); } [data-theme="day"] .cin-package-card:hover { border-color: rgba(59,130,246,0.3) !important; box-shadow: 0 8px 24px rgba(59,130,246,0.08) !important; } [data-theme="day"] .cin-package-card h3 { color: #0F172A !important; } [data-theme="day"] .cin-package-card p, [data-theme="day"] .cin-package-card li { color: #64748B !important; } [data-theme="day"] .cin-feature-group { background: rgba(0,0,0,0.02) !important; border-color: #E2E8F0 !important; } [data-theme="day"] .cin-feature-item { color: #475569 !important; } /* Day: Blog card hover — override dark gradient */ [data-theme="day"] .ds-cinematic .cin-blog-card:hover { background: #FFFFFF !important; border-color: rgba(59,130,246,0.3) !important; box-shadow: 0 8px 24px rgba(59,130,246,0.08) !important; } [data-theme="day"] .cin-blog-card .cin-blog-title { color: #0F172A !important; } [data-theme="day"] .ds-cinematic .cin-blog-card:hover .cin-blog-title { color: #2563EB !important; } /* Blog Post — Hero Image (below hero, above content) */ .cin-post-hero-img { margin: -2rem auto 0; max-width: 900px; border-radius: 14px; overflow: hidden; } .cin-post-hero-img img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--cin-border); } [data-theme="day"] .cin-post-hero-img img { border-color: #E2E8F0; } .cin-section .container { background: transparent !important; } .cin-final-cta-v2 { background: #FFFFFF !important; } .cin-section.cin-final-cta-v2 { background: #FFFFFF !important; } section.cin-section.cin-final-cta-v2 { background: #FFFFFF !important; } section.cin-section.cin-section.cin-final-cta-v2 { background: #FFFFFF !important; } section.cin-final-cta-v2#final-cta { background: #FFFFFF !important; } [data-theme="day"] .cin-service-card-v2 { background: #FFFFFF !important; border-color: #E2E8F0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04); } [data-theme="day"] .cin-service-card-v2:hover { border-color: rgba(59,130,246,0.3) !important; box-shadow: 0 8px 24px rgba(59,130,246,0.08) !important; } /* ---------------------------------------------------------- Quote Success — Enhanced v2 ---------------------------------------------------------- */ .ds-cinematic .cin-quote-success { text-align: center !important; max-width: 560px !important; margin: 0 auto !important; padding: 3rem 2rem !important; background: rgba(30,35,60,0.5) !important; border: 1px solid rgba(34,197,94,0.15) !important; border-radius: 20px !important; backdrop-filter: blur(10px) !important; } .ds-cinematic .cin-success-icon { margin-bottom: 1.75rem !important; animation: cin-success-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } @keyframes cin-success-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } .ds-cinematic .cin-success-icon svg { filter: drop-shadow(0 0 20px rgba(34,197,94,0.2)); } .ds-cinematic .cin-success-title { font-size: 1.75rem !important; font-weight: 700 !important; color: #f1f5f9 !important; margin-bottom: 0.75rem !important; } .ds-cinematic .cin-success-msg { font-size: 1rem !important; color: #94a3b8 !important; line-height: 1.7 !important; margin-bottom: 2rem !important; } .ds-cinematic .cin-success-details { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; margin-bottom: 2rem !important; } .ds-cinematic .cin-success-item { display: flex !important; align-items: center !important; gap: 0.6rem !important; padding: 0.75rem 1rem !important; background: rgba(34,197,94,0.06) !important; border: 1px solid rgba(34,197,94,0.1) !important; border-radius: 10px !important; font-size: 0.88rem !important; color: #cbd5e1 !important; transition: all 0.3s ease; } .ds-cinematic .cin-success-item:hover { background: rgba(34,197,94,0.1) !important; border-color: rgba(34,197,94,0.2) !important; } .ds-cinematic .cin-success-item i { font-size: 1.1rem !important; color: #22C55E !important; } .ds-cinematic .cin-success-actions { display: flex !important; justify-content: center !important; gap: 1rem !important; flex-wrap: wrap !important; } /* Day mode */ [data-theme="day"] .ds-cinematic .cin-quote-success { background: #FFFFFF !important; border-color: rgba(34,197,94,0.2) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.04) !important; } [data-theme="day"] .ds-cinematic .cin-success-title { color: #0F172A !important; } [data-theme="day"] .ds-cinematic .cin-success-msg { color: #64748B !important; } [data-theme="day"] .ds-cinematic .cin-success-item { background: rgba(34,197,94,0.04) !important; border-color: rgba(34,197,94,0.12) !important; color: #475569 !important; } [data-theme="day"] .ds-cinematic .cin-success-item:hover { background: rgba(34,197,94,0.08) !important; } [data-theme="day"] .ds-cinematic .cin-success-item i { color: #16A34A !important; } @media (max-width: 575px) { .ds-cinematic .cin-success-details { grid-template-columns: 1fr !important; } } /* Homepage Stat Icons */ .cin-stat-icon { display: block; margin-bottom: 0.6rem; } .cin-stat-icon i { font-size: 1.6rem; color: var(--cin-accent-soft); filter: drop-shadow(0 0 8px rgba(59,130,246,0.2)); } [data-theme="day"] .cin-stat-icon i { color: #2563EB; filter: none; } /* Night: Metrics stat cards */ [data-theme="night"] .cin-authority-v2 .cin-stat-card { background: rgba(30,35,60,0.5); border-color: rgba(59,130,246,0.1); } [data-theme="night"] .cin-authority-v2 .cin-stat-card:hover { border-color: rgba(59,130,246,0.25); box-shadow: 0 8px 30px rgba(59,130,246,0.08); } [data-theme="night"] .cin-authority-v2 .cin-stat-number { color: var(--cin-accent-soft); } [data-theme="night"] .cin-authority-v2 .cin-stat-label { color: #94A3B8; } /* ================================================================ Night Mode — All Homepage Sections ================================================================ */ /* Fix root vars for night mode */ [data-theme="night"] { --cin-bg-light: #0F172A; --cin-bg-white: rgba(30,35,60,0.5); --cin-text-dark: #F1F5F9; } /* ── Authority / Metrics ──────────────────────────── */ [data-theme="night"] .cin-authority-v2 { background: #0B1120; } [data-theme="night"] .cin-authority-v2 .cin-authority-headline { color: #F1F5F9; } [data-theme="night"] .cin-authority-v2 .cin-authority-desc { color: #94A3B8; } /* ── Services ─────────────────────────────────────── */ [data-theme="night"] .cin-services-v2 { background: #111827; } [data-theme="night"] .cin-services-v2 .cin-service-card-v2 { background: rgba(30,35,60,0.6); border-color: rgba(59,130,246,0.12); } [data-theme="night"] .cin-services-v2 .cin-service-card-v2:hover { border-color: rgba(59,130,246,0.35); } [data-theme="night"] .cin-services-v2 .cin-service-card-v2 h3 { color: #E2E8F0; } [data-theme="night"] .cin-services-v2 .cin-service-card-v2 p { color: #94A3B8; } [data-theme="night"] .ds-cinematic .cin-process-card { background: rgba(30,35,60,0.5); border-color: rgba(59,130,246,0.1); } [data-theme="night"] .ds-cinematic .cin-process-card:hover { border-color: rgba(59,130,246,0.25); box-shadow: 0 12px 32px rgba(59,130,246,0.1); } [data-theme="night"] .ds-cinematic .cin-process-card h4 { color: #F1F5F9; } [data-theme="night"] .ds-cinematic .cin-process-card p { color: #94A3B8; } [data-theme="night"] .ds-cinematic .cin-process-num { color: rgba(59,130,246,0.08); } [data-theme="night"] .ds-cinematic .cin-process-icon { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(139,92,246,0.1)); } /* ── Portfolio ────────────────────────────────────── */ [data-theme="night"] .cin-portfolio-v2 { /* background matched to CTA */ background: linear-gradient(135deg, #0B1120 0%, #0F172A 30%, #1A1050 70%, #0B1120 100%); } [data-theme="night"] .cin-portfolio-card-v2 { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } [data-theme="night"] .cin-portfolio-card-v2 .cin-pf-body h3 { color: #F1F5F9; } [data-theme="night"] .cin-portfolio-card-v2 .cin-pf-body p { color: #94A3B8; } /* ── Testimonials ─────────────────────────────────── */ [data-theme="night"] .cin-testimonials-v2 { background: #0F172A; } [data-theme="night"] .cin-testimonial-card { background: linear-gradient(165deg, rgba(59,130,246,0.06) 0%, rgba(139,92,246,0.04) 50%, rgba(15,23,42,0.8) 100%); border-color: rgba(139,92,246,0.1); } [data-theme="night"] .cin-testimonial-card:hover { border-color: rgba(59,130,246,0.25); } [data-theme="night"] .cin-testimonials-v2 .cin-section-title { color: #F1F5F9; } /* Night: All section headlines + titles */ [data-theme="night"] .cin-authority-headline, [data-theme="night"] .cin-section-title { color: #F1F5F9 !important; } [data-theme="night"] .cin-section-sub { color: #94A3B8; } /* Yellow buttons — white text on hover */ .cin-btn-accent:hover, .cin-form-submit.cin-btn-accent:hover, .ds-cinematic .ds-navbar .btn-nav-cta:hover { color: #FFFFFF !important; } /* LQIP Blur Placeholder */ img.lazy-blur { filter: blur(20px); transform: scale(1.05); transition: filter 0.4s ease, transform 0.4s ease; will-change: filter, transform; } img.lazy-blur.lazy-loaded { filter: blur(0); transform: scale(1); } .img-processing { animation: imgPulse 1.5s ease-in-out infinite; } @keyframes imgPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } /* ================================================================ Cinematic Text Hero — Inner Pages Gold gradient title, atmospheric glow, lens flare, specular sweep ================================================================ */ :root { --cin-gold-light: #f5e6c8; --cin-gold-mid: #c9a96e; --cin-gold-deep: #a07830; --cin-silver-light: #f0eee9; --cin-silver-mid: #c5bfb3; } /* ── Atmospheric background override ─────────────── */ .cin-page-hero { background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(160,120,48,0.06) 0%, transparent 70%), radial-gradient(ellipse 120% 80% at 50% 120%, rgba(10,8,20,0.9) 0%, transparent 50%), radial-gradient(ellipse 100% 100% at 50% 0%, rgba(20,16,30,0.5) 0%, transparent 60%), #06060a !important; } /* Vignette overlay */ .cin-page-hero::before { background: radial-gradient(circle at 50% 50%, transparent 30%, #06060a 80%), url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23ffffff' stroke-width='0.3' fill='none' opacity='0.03'/%3E%3C/svg%3E") !important; } /* ── Title wrapper ────────────────────────────────── */ .cin-hero-title-wrap { position: relative; display: inline-block; } /* Deep shadow layer behind title */ .cin-hero-title-shadow { position: absolute; inset: 0; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: transparent; background: linear-gradient(180deg, rgba(201,0,0,0.9), rgba(160,0,0,0.9)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 60px rgba(160,120,48,0.15)) drop-shadow(0 0 120px rgba(160,120,48,0.08)) drop-shadow(0 20px 40px rgba(0,0,0,0.8)); opacity: 0; animation: cinHeroShadowIn 2.5s ease-out 0.8s forwards; user-select: none; pointer-events: none; } @keyframes cinHeroShadowIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Gold gradient title */ .cin-page-hero .cin-page-title { position: relative; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1; background: linear-gradient( 170deg, var(--cin-silver-light) 0%, var(--cin-gold-light) 20%, var(--cin-gold-mid) 40%, var(--cin-gold-light) 55%, var(--cin-silver-light) 70%, var(--cin-gold-mid) 85%, var(--cin-gold-deep) 100% ); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: cinHeroTitleIn 2s cubic-bezier(0.16,1,0.3,1) 0.5s both, cinHeroShimmer 8s ease-in-out 3s infinite; filter: drop-shadow(0 0 10px rgba(201,169,110,0.3)) drop-shadow(0 0 30px rgba(201,169,110,0.12)) drop-shadow(0 4px 8px rgba(0,0,0,0.6)); } @keyframes cinHeroTitleIn { 0% { opacity: 0; transform: translateY(20px) scale(0.95); letter-spacing: 0.15em; } 60% { opacity: 1; transform: translateY(-3px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 0.06em; } } @keyframes cinHeroShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ── Cinematic bars ───────────────────────────────── */ .cin-hero-bar { display: block; width: 120px; height: 1px; margin: 0 auto; border: none; background: linear-gradient(90deg, transparent, var(--cin-gold-mid), transparent); opacity: 0; animation: cinBarReveal 1.5s ease-out forwards; } .cin-hero-bar--top { animation-delay: 1.8s; margin-bottom: 1.5rem; } .cin-hero-bar--bottom { animation-delay: 2s; margin-top: 1.5rem; } @keyframes cinBarReveal { 0% { width: 0; opacity: 0; } 100% { width: 120px; opacity: 0.6; } } /* ── Label — cinematic subtitle ───────────────────── */ .cin-page-hero .cin-label { font-style: italic; letter-spacing: 0.3em; color: var(--cin-silver-mid); opacity: 0; animation: cinSubtitleIn 2s ease-out 2.2s forwards; } @keyframes cinSubtitleIn { 0% { opacity: 0; transform: translateY(8px); letter-spacing: 0.5em; } 100% { opacity: 0.5; transform: translateY(0); letter-spacing: 0.3em; } } /* ── Page subtitle ────────────────────────────────── */ .cin-page-hero .cin-page-sub { color: var(--cin-silver-mid); opacity: 0; animation: cinSubtitleIn 2s ease-out 2.4s forwards; } /* ── Glow orbs ────────────────────────────────────── */ .cin-hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; } .cin-hero-glow--warm { width: 400px; height: 200px; background: rgba(160,120,48,0.08); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: cinOrbPulse 6s ease-in-out infinite; } .cin-hero-glow--cool { width: 300px; height: 150px; background: rgba(100,110,140,0.04); top: 60%; left: 40%; transform: translate(-50%, -50%); animation: cinOrbPulse 8s ease-in-out 2s infinite; } @keyframes cinOrbPulse { 0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } } /* ── Lens flare ───────────────────────────────────── */ .cin-hero-flare { position: absolute; top: 35%; left: 52%; width: 6px; height: 6px; border-radius: 50%; background: var(--cin-gold-light); opacity: 0; z-index: 20; animation: cinFlareAppear 4s ease-in-out 4s infinite; box-shadow: 0 0 4px 2px rgba(245,230,200,0.8), 0 0 15px 5px rgba(201,169,110,0.4), 0 0 40px 10px rgba(201,169,110,0.15); pointer-events: none; } .cin-hero-flare::before { content: ''; position: absolute; top: 50%; left: -30px; width: 66px; height: 1px; background: linear-gradient(90deg, transparent, rgba(245,230,200,0.5), transparent); transform: translateY(-50%); } .cin-hero-flare::after { content: ''; position: absolute; left: 50%; top: -30px; width: 1px; height: 66px; background: linear-gradient(180deg, transparent, rgba(245,230,200,0.3), transparent); transform: translateX(-50%); } @keyframes cinFlareAppear { 0%, 100% { opacity: 0; transform: scale(0.5); } 15%, 35% { opacity: 0.8; transform: scale(1); } 50% { opacity: 0; transform: scale(0.8); } } /* ── Day mode ─────────────────────────────────────── */ [data-theme="day"] .cin-page-hero { background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(160,120,48,0.04) 0%, transparent 70%), radial-gradient(ellipse 120% 80% at 50% 120%, rgba(240,238,233,0.9) 0%, transparent 50%), #FAFAF8 !important; } [data-theme="day"] .cin-page-hero::before { background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(250,250,248,0.3) 80%), url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23000000' stroke-width='0.3' fill='none' opacity='0.03'/%3E%3C/svg%3E") !important; } [data-theme="day"] .cin-page-hero .cin-page-title { background: linear-gradient( 170deg, #1a1a2e 0%, var(--cin-gold-deep) 25%, var(--cin-gold-mid) 50%, var(--cin-gold-deep) 75%, #1a1a2e 100% ); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 8px rgba(160,120,48,0.1)) drop-shadow(0 2px 4px rgba(0,0,0,0.15)); } [data-theme="day"] .cin-hero-title-shadow { background: linear-gradient(180deg, rgba(160,120,48,0.15), rgba(160,120,48,0.05)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 40px rgba(160,120,48,0.06)) drop-shadow(0 10px 20px rgba(0,0,0,0.1)); } [data-theme="day"] .cin-page-hero .cin-label { color: var(--cin-gold-mid); } [data-theme="day"] .cin-page-hero .cin-page-sub { color: #64748B; } [data-theme="day"] .cin-hero-glow--warm { background: rgba(160,120,48,0.04); } [data-theme="day"] .cin-hero-glow--cool { background: rgba(100,110,140,0.02); } [data-theme="day"] .cin-hero-bar { background: linear-gradient(90deg, transparent, var(--cin-gold-deep), transparent); } [data-theme="day"] .cin-hero-flare { background: var(--cin-gold-mid); box-shadow: 0 0 4px 2px rgba(201,169,110,0.4), 0 0 15px 5px rgba(160,120,48,0.2), 0 0 40px 10px rgba(160,120,48,0.06); } /* ── Reduced motion ───────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .cin-page-hero .cin-page-title, .cin-hero-title-shadow, .cin-page-hero .cin-label, .cin-page-hero .cin-page-sub, .cin-hero-bar, .cin-hero-flare, .cin-hero-glow, .cin-hero-title-wrap::after { animation: none !important; opacity: 1 !important; } } /* ── Responsive ───────────────────────────────────── */ @media (max-width: 575px) { .cin-hero-glow { display: none; } .cin-hero-flare { display: none; } } /* Home hero — cinematic bg with grid layout preserved */ .cin-hero-v2.cin-page-hero { text-align: left; display: block; min-height: auto; padding: 6rem 0 4rem; } .cin-hero-v2.cin-page-hero .cin-page-title { font-size: clamp(2.5rem, 5vw, 3.75rem); } /* Home hero — flare on image only */ .cin-hero-v2 .cin-hero-visual { position: relative; } .cin-hero-v2 .cin-hero-visual .cin-hero-flare { top: 20%; left: 55%; } .cin-hero-v2 .cin-hero-visual .cin-hero-glow--warm { top: 40%; left: 60%; } .cin-hero-v2 .cin-hero-visual .cin-hero-glow--cool { top: 50%; left: 45%; } /* Home hero — animated light sweep on image */ .cin-hero-v2 .cin-hero-visual::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(245,230,200,0.06) 45%, rgba(245,230,200,0.12) 50%, rgba(245,230,200,0.06) 55%, transparent 65%, transparent 100% ); animation: cinImgSweep 5s ease-in-out 2s infinite; pointer-events: none; z-index: 2; border-radius: inherit; } @keyframes cinImgSweep { 0% { left: -100%; } 40%, 100% { left: 200%; } } /* ═══════════════════════════════════════════════════════ Testimonials v2 — Enhanced ═══════════════════════════════════════════════════════ */ /* Aggregate rating bar */ .cin-test-aggregate { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 1rem; } .cin-test-aggregate-stars { display: flex; gap: 2px; font-size: 1rem; color: #F59E0B; } .cin-test-aggregate-text { font-size: 0.85rem; color: var(--cin-text-muted, #94A3B8); font-weight: 500; } /* Featured badge */ .cin-test-featured-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #3B82F6; background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.15); border-radius: 20px; padding: 0.25rem 0.75rem; margin-bottom: 0.75rem; width: fit-content; } .cin-test-featured-badge i { font-size: 0.72rem; } /* Featured card enhancements */ .cin-testimonial-featured { border-color: rgba(59,130,246,0.18); background: linear-gradient(165deg, rgba(59,130,246,0.08) 0%, rgba(139,92,246,0.05) 50%, rgba(15,23,42,0.85) 100%); } .cin-testimonial-featured:hover { border-color: rgba(59,130,246,0.35); box-shadow: 0 16px 50px rgba(59,130,246,0.12), 0 0 40px rgba(139,92,246,0.06); } .cin-testimonial-featured .cin-test-avatar { width: 48px; height: 48px; border-color: rgba(59,130,246,0.3); box-shadow: 0 0 12px rgba(59,130,246,0.15); } /* Industry tag */ .cin-test-industry { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; color: #60A5FA; margin-top: 0.15rem; } .cin-test-industry i { font-size: 0.62rem; opacity: 0.7; } /* Supporting row spacing */ .cin-test-supporting-row { margin-top: 1.5rem; } /* Compact card variant */ .cin-testimonial-compact { padding: 1.4rem; } .cin-testimonial-compact::before { font-size: 2.8rem; top: 0.5rem; left: 1rem; } .cin-test-stars-sm { font-size: 0.65rem; margin-bottom: 0.6rem; } .cin-test-content-sm { font-size: 0.84rem; line-height: 1.65; margin-bottom: 1rem; } .cin-test-avatar-sm { width: 36px !important; height: 36px !important; } .cin-test-avatar-placeholder.cin-test-avatar-sm { width: 36px !important; height: 36px !important; font-size: 0.7rem; } /* ── Day mode overrides ── */ [data-theme="day"] .cin-test-aggregate-text { color: #64748B; } [data-theme="day"] .cin-test-featured-badge { color: #2563EB; background: rgba(37,99,235,0.06); border-color: rgba(37,99,235,0.12); } [data-theme="day"] .cin-testimonial-featured { background: linear-gradient(165deg, rgba(59,130,246,0.04) 0%, rgba(255,255,255,1) 100%) !important; border-color: rgba(59,130,246,0.15) !important; } [data-theme="day"] .cin-testimonial-featured:hover { border-color: rgba(59,130,246,0.3) !important; box-shadow: 0 12px 40px rgba(59,130,246,0.08); } [data-theme="day"] .cin-test-industry { color: #3B82F6; } [data-theme="day"] .cin-testimonial-compact { background: #FFFFFF !important; border-color: #E2E8F0 !important; } [data-theme="day"] .cin-testimonial-compact:hover { border-color: rgba(59,130,246,0.2) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.06); } [data-theme="day"] .cin-testimonial-compact p { color: #475569 !important; } /* ── Night mode overrides ── */ [data-theme="night"] .cin-test-featured-badge { color: #60A5FA; background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.2); } [data-theme="night"] .cin-testimonial-compact { background: linear-gradient(165deg, rgba(30,41,59,0.6) 0%, rgba(15,23,42,0.7) 100%); border-color: rgba(100,116,139,0.12); } [data-theme="night"] .cin-testimonial-compact:hover { border-color: rgba(59,130,246,0.2); box-shadow: 0 8px 30px rgba(59,130,246,0.06); } /* ---------------------------------------------------------- Day Mode — Variable Overrides v11.0.1 — Light theme for all cin-* components ---------------------------------------------------------- */ [data-theme="day"] .ds-cinematic { --cin-bg: #F8FAFC; --cin-bg-alt: #F1F5F9; --cin-bg-card: #FFFFFF; --cin-bg-light: #F8FAFC; --cin-bg-white: #FFFFFF; --cin-accent: #2563EB; --cin-accent-soft: #3B82F6; --cin-accent-deep: #1E40AF; --cin-accent-glow: rgba(59, 130, 246, 0.15); --cin-purple-glow: rgba(139, 92, 246, 0.10); --cin-text: #0F172A; --cin-text-soft: #1E293B; --cin-text-muted: #475569; --cin-text-dark: #0F172A; --cin-border: rgba(0, 0, 0, 0.08); --cin-border-hover: rgba(37, 99, 235, 0.4); --cin-border-light: #E2E8F0; --cin-radius: 8px; color-scheme: light; } /* Day mode — Quote wizard specific fixes */ [data-theme="day"] .cin-float-input { background: rgba(0, 0, 0, 0.02); color: #0F172A; } [data-theme="day"] .cin-float-input:focus { box-shadow: 0 0 12px rgba(37, 99, 235, 0.15); } [data-theme="day"] .cin-option-btn { background: #FFFFFF; border-color: #E2E8F0; color: #0F172A; } [data-theme="day"] .cin-option-btn:hover { border-color: rgba(37, 99, 235, 0.4); box-shadow: 0 0 16px rgba(59, 130, 246, 0.10); } [data-theme="day"] .cin-option-btn.selected { border-color: #2563EB; background: rgba(37, 99, 235, 0.06); box-shadow: 0 0 12px rgba(59, 130, 246, 0.12); } [data-theme="day"] .cin-option-btn i { color: #2563EB; } [data-theme="day"] .cin-step-title { color: #0F172A; } [data-theme="day"] .cin-step-dot { border-color: #E2E8F0; color: #64748B; } [data-theme="day"] .cin-step-dot.active { border-color: #2563EB; color: #2563EB; box-shadow: 0 0 8px rgba(37, 99, 235, 0.15); } [data-theme="day"] .cin-quote-summary { background: #FFFFFF; border-color: #E2E8F0; color: #475569; } [data-theme="day"] .cin-quote-back { color: #64748B; } [data-theme="day"] .cin-quote-back:hover { color: #2563EB; } /* Day mode — Hero area */ [data-theme="day"] .cin-page-hero { background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%); } [data-theme="day"] .cin-hero-glow--warm { opacity: 0.15; } [data-theme="day"] .cin-hero-glow--cool { opacity: 0.10; } [data-theme="day"] .cin-page-sub { color: #475569; } [data-theme="day"] .cin-label { color: #2563EB; } [data-theme="day"] .cin-hero-bar--top, [data-theme="day"] .cin-hero-bar--bottom { border-color: rgba(0, 0, 0, 0.06); } /* Day mode — Cards (blog, service, portfolio) */ [data-theme="day"] .cin-blog-card, [data-theme="day"] .cin-service-card, [data-theme="day"] .cin-portfolio-card { background: #FFFFFF; border-color: #E2E8F0; color: #0F172A; } [data-theme="day"] .cin-blog-card:hover, [data-theme="day"] .cin-service-card:hover, [data-theme="day"] .cin-portfolio-card:hover { border-color: rgba(37, 99, 235, 0.3); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } [data-theme="day"] .cin-blog-excerpt, [data-theme="day"] .cin-blog-meta, [data-theme="day"] .cin-service-body p, [data-theme="day"] .cin-portfolio-summary { color: #64748B; } [data-theme="day"] .cin-card-link { color: #2563EB; } /* Day mode — Content body */ [data-theme="day"] .cin-content, [data-theme="day"] .ds-content-body { color: #334155; } /* Day mode — Section backgrounds */ [data-theme="day"] .cin-section { background: transparent; }