/* ============================================ NewCasino.ai — Design Upgrade CSS Version: 2.0 INSTRUCTIONS: Add this file AFTER your existing main.css to override and enhance the design. Upload to: /wp-content/themes/newcasino/assets/css/design-upgrade.css Enqueue in functions.php after main.css ============================================ */ /* ── Enhanced Color Palette ── */ :root { /* Add gold accent to the existing palette */ --color-gold: #D4A843; --color-gold-light: #F5E6C8; --color-gold-dark: #B8912E; --color-accent: #E07B00; /* Orange for CTAs that need to pop */ --color-accent-hover: #C56A00; --color-bg-subtle: #FAFAF8; --color-success: #22c55e; --color-info: #3b82f6; /* Typography upgrade */ --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Enhanced shadows */ --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04); --shadow-card-hover: 0 4px 12px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.06); --shadow-hero: 0 8px 40px rgba(15,110,86,.25); } /* ── Google Font Import (add to instead for better performance) ── */ /* */ /* ── Enhanced Body ── */ body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Header Upgrade ── */ .site-header { border-bottom: none; box-shadow: 0 1px 0 rgba(0,0,0,.06); backdrop-filter: blur(12px); background: rgba(255,255,255,.95); } .site-header .container { height: 72px; } .site-logo { display: flex; align-items: center; gap: .5rem; font-size: 1.5rem; } /* Add logo mark before text */ .site-logo::before { content: ''; display: inline-block; width: 36px; height: 36px; background-image: url('../images/badges/logo-mark.webp'); background-size: contain; background-repeat: no-repeat; } .site-nav a { position: relative; padding: .5rem 0; } .site-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--color-primary); transition: width .3s ease; } .site-nav a:hover::after { width: 100%; } /* ── Hero Section Upgrade ── */ .hp-hero { background: linear-gradient(135deg, #0a5040 0%, #0F6E56 40%, #0a3d2e 100%); padding: 6rem 0 5rem; position: relative; overflow: hidden; } /* Hero background image overlay */ .hp-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('../images/hero/hero-illustration.webp'); background-size: cover; background-position: center; opacity: .35; z-index: 0; } .hp-hero::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 80px; background: linear-gradient(to top, var(--color-bg), transparent); z-index: 1; } .hp-hero .container, .hp-hero__inner { position: relative; z-index: 2; } .hp-hero__title { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 900; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0,0,0,.2); word-wrap: break-word; overflow-wrap: break-word; } .hp-hero__subtitle { font-size: 1.15rem; max-width: 600px; margin-left: auto; margin-right: auto; } .hp-hero__badge { background: rgba(212,168,67,.2); border: 1px solid rgba(212,168,67,.5); color: var(--color-gold-light); } .hp-hero__trust { font-size: .85rem; } .hp-hero__trust span { background: rgba(255,255,255,.1); padding: .35rem .75rem; border-radius: 100px; backdrop-filter: blur(4px); } /* ── Social Proof Counter Bar ── */ .social-proof-bar { background: var(--color-dark); padding: 2rem 0; position: relative; z-index: 2; } .social-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; } .social-proof-item { position: relative; } .social-proof-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 10%; height: 80%; width: 1px; background: linear-gradient(to bottom, transparent, var(--color-gold), transparent); } .social-proof-number { font-size: 2.5rem; font-weight: 900; color: var(--color-white); font-family: var(--font-heading); letter-spacing: -.02em; } .social-proof-label { font-size: .85rem; color: rgba(255,255,255,.6); margin-top: .25rem; text-transform: uppercase; letter-spacing: .08em; } /* ── Enhanced Casino Cards ── */ .casino-card { border: 1px solid var(--color-border); box-shadow: var(--shadow-card); transition: all .3s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden; } .casino-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-gold)); opacity: 0; transition: opacity .3s ease; } .casino-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); border-color: var(--color-primary); } .casino-card:hover::before { opacity: 1; } /* Casino card image enhancement */ .casino-card img { transition: transform .4s ease; } .casino-card:hover img { transform: scale(1.03); } /* ── Enhanced CTA Buttons ── */ .btn-primary { background: linear-gradient(135deg, var(--color-primary) 0%, #0a5a46 100%); box-shadow: 0 4px 12px rgba(15,110,86,.3); transition: all .3s ease; position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); transition: left .5s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15,110,86,.4); } .btn-primary:hover::after { left: 100%; } /* Orange CTA variant for high-priority actions */ .btn-accent, .casino-card-cta { background: linear-gradient(135deg, var(--color-accent) 0%, #c56a00 100%) !important; box-shadow: 0 4px 12px rgba(224,123,0,.3); } .btn-accent:hover, .casino-card-cta:hover { background: linear-gradient(135deg, #c56a00 0%, #a85b00 100%) !important; box-shadow: 0 6px 20px rgba(224,123,0,.4); transform: translateY(-1px); } /* ── Geo Cards Enhancement ── */ .geo-card { border: 1px solid var(--color-border); transition: all .3s cubic-bezier(.4,0,.2,1); position: relative; } .geo-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--color-primary); transform: scaleX(0); transition: transform .3s ease; } .geo-card:hover::after { transform: scaleX(1); } .geo-card__flag { font-size: 3.5rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.1)); } /* ── Enhanced Tables ── */ .summary-table tr { transition: background .2s ease; } .summary-table tr:hover { background: var(--color-bg-subtle); } .summary-table tr:nth-child(even) { background: var(--color-bg-subtle); } .summary-table tr:nth-child(even):hover { background: var(--color-primary-light); } /* Comparison tables on review pages */ table { border-collapse: separate; border-spacing: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); } table thead th { background: var(--color-primary); color: var(--color-white); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; padding: .875rem 1rem; text-align: left; } table tbody tr { transition: background .2s ease; } table tbody tr:nth-child(even) { background: var(--color-bg-subtle); } table tbody tr:hover { background: var(--color-primary-light); } table tbody td { padding: .75rem 1rem; font-size: .9rem; border-bottom: 1px solid var(--color-border); } /* ── Review Content Enhancement ── */ .casino-review-content h2 { border-left: 4px solid var(--color-gold); padding-left: 1rem; font-family: var(--font-heading); font-weight: 800; } .casino-review-content blockquote { border-left: 4px solid var(--color-primary); background: var(--color-primary-light); padding: 1.25rem 1.5rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5rem 0; font-style: italic; color: var(--color-dark-muted); } /* ── Trust Badge Enhancement ── */ .trust-badge { background: linear-gradient(135deg, var(--color-primary-light), #d4f0e5); border: 1px solid rgba(15,110,86,.2); font-size: .8rem; padding: .3rem .75rem; } .trust-badge img { width: 16px; height: 16px; } /* ── Animated Number Counters ── */ @keyframes countUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .counter-animated { animation: countUp .6s ease-out forwards; } /* ── Scroll Reveal Animation ── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .nc-js .reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; /* Fallback: reveal content after 2s if JS has not fired */ animation: forceReveal 0.001s 0.1s forwards; } .nc-js .reveal-on-scroll.visible { opacity: 1; transform: translateY(0); animation: none; } @keyframes forceReveal { to { opacity: 1; transform: translateY(0); } } /* ── Section Backgrounds ── */ .hp-section--alt { background-image: url('../images/backgrounds/section-bg-pattern.webp'); background-size: 400px 400px; background-repeat: repeat; } /* ── Blog Cards Enhancement ── */ .blog-card { border: 1px solid var(--color-border); } .blog-card__thumb { position: relative; overflow: hidden; } .blog-card__thumb img { transition: transform .4s ease; } .blog-card:hover .blog-card__thumb img { transform: scale(1.05); } .blog-card__date { position: relative; display: inline-block; } .blog-card__date::after { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--color-primary); margin-left: .5rem; vertical-align: middle; } /* ── Editor's Pick Enhancement ── */ .casino-card.editor-pick { border: 2px solid var(--color-gold); box-shadow: 0 4px 20px rgba(212,168,67,.15); } .casino-card.editor-pick::before { background: linear-gradient(90deg, var(--color-gold), var(--color-gold-dark)); opacity: 1; height: 4px; } /* ── Footer Enhancement ── */ .site-footer { background: var(--color-dark); background-image: url('../images/backgrounds/section-bg-dark.webp'); background-size: 400px 400px; background-repeat: repeat; } .footer-col h3 { position: relative; padding-bottom: .5rem; } .footer-col h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 24px; height: 2px; background: var(--color-gold); } /* ── Responsible Gambling Enhancement ── */ .responsible-gambling { border-radius: var(--radius-lg); border: 1px solid #e5c07b; background: linear-gradient(135deg, #fff8f0, #fff4e0); } /* ── Author Bio Enhancement ── */ .author-bio { border: 1px solid var(--color-border); position: relative; } .author-bio::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-gold)); } .author-bio__avatar { border: 3px solid var(--color-primary-light); } /* ── Quick Pick Block Enhancement ── */ .quick-pick-block { border: 2px solid var(--color-gold); background: linear-gradient(135deg, #fefdf8, #f5f5f3); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .quick-pick-cta { background: linear-gradient(135deg, var(--color-accent), #c56a00) !important; border-radius: var(--radius); transition: all .3s ease; } .quick-pick-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(224,123,0,.3); } /* ── Pros/Cons Enhancement ── */ .pros { border-top: 3px solid var(--color-success); background: linear-gradient(to bottom, #f0fdf4, var(--color-bg)); } .cons { border-top: 3px solid var(--color-danger); background: linear-gradient(to bottom, #fef2f2, var(--color-bg)); } /* ── FAQ Enhancement ── */ .faq-item { border: 1px solid var(--color-border); transition: border-color .3s ease; } .faq-item:hover { border-color: var(--color-primary); } .faq-item.open { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(15,110,86,.08); } /* ── Mobile Responsive Fixes ── */ @media (max-width: 768px) { .hp-hero { padding: 4rem 1rem 3rem; } .hp-hero::before { background-image: url('../images/hero/hero-illustration-mobile.webp'); } .hp-hero__title { font-size: clamp(1.5rem, 6vw, 2.25rem); /* Fix the text overflow issue */ word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; padding: 0 .5rem; } .hp-hero__subtitle { font-size: .95rem; padding: 0 .5rem; } .social-proof-grid { grid-template-columns: repeat(3, 1fr); gap: .75rem; } .social-proof-number { font-size: 1.5rem; } .social-proof-label { font-size: .7rem; } .social-proof-item:not(:last-child)::after { display: none; } } /* ── Loading Skeleton ── */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius); } /* ── Smooth Page Transitions ── */ .page-transition { animation: fadeInUp .4s ease-out; } /* ── Print Styles ── */ @media print { .site-header, .site-footer, .sticky-cta-bar, .btn { display: none !important; } body { background: white; color: black; } } /* ── Scroll-Reveal: CSS fallback (NEC-385) ────────────────────────────────── If JavaScript never fires (error, slow device, no IntersectionObserver), content must not stay hidden. Fallback animation kicks in after 1.5s and forces opacity:1. JS-triggered .visible class cancels this animation first. ─────────────────────────────────────────────────────────────────────────── */ @keyframes nc-reveal-fallback { to { opacity: 1; transform: translateY(0); } } /* Apply fallback only to elements that haven't been revealed by JS yet */ .nc-js .reveal-on-scroll:not(.visible) { animation: nc-reveal-fallback 0.6s 0s ease both; } /* ── NEC-436 Small Fixes ── */ /* Hide skip-to-content link (not needed for visual users) */ .skip-link.screen-reader-text { display: none !important; } /* Mobile header: prevent logo overflow on small screens */ @media (max-width: 768px) { .site-logo { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 60px); } .site-header .container { overflow: hidden; } }