/* ========================================================================== Diaspora Heritage Countdown – Stylesheet v1.1.0 Theme: St. Kitts & Nevis Diaspora Unit Colors: Navy (#0D2240), SKN Green (#009E49), Gold (#D4AF37), White (#FFFFFF) Author: EVOKE | Janelle Mason & Twanna Finch Fix: Removed negative-margin breakout trick (causes white-space on overflow:hidden parent containers). Full-width is now handled by JS DOM repositioning. ========================================================================== */ /* ---------- Custom Properties ---------- */ :root { --dchp-navy: #0D2240; --dchp-navy-deep: #061529; --dchp-green: #009E49; --dchp-green-dark: #007A38; --dchp-gold: #D4AF37; --dchp-gold-light: #F0D060; --dchp-black: #0A0A0A; --dchp-white: #FFFFFF; --dchp-glass: rgba(255, 255, 255, 0.06); --dchp-glass-border: rgba(212, 175, 55, 0.3); --dchp-font-head: 'Georgia', 'Times New Roman', serif; --dchp-font-body: 'Arial', 'Helvetica Neue', sans-serif; --dchp-transition: 0.3s ease; } /* ---------- Reset for the banner section ---------- */ .dchp-banner, .dchp-banner *, .dchp-banner *::before, .dchp-banner *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---------- Banner – base (fills its container by default) ---------- When JS repositioning fires, it moves this element to be a direct child of / the site wrapper so it naturally spans 100% width. DO NOT use negative margins here – they cause white-space on themes that set overflow:hidden on .entry-content / .elementor-section. -------------------------------------------------------------------- */ .dchp-banner { display: block; width: 100%; /* fill whatever container it's in */ overflow: hidden; /* contain child elements */ position: relative; background-color: var(--dchp-navy-deep); background-image: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 158, 73, 0.18) 0%, transparent 70%), linear-gradient(160deg, var(--dchp-navy-deep) 0%, var(--dchp-navy) 55%, #0F2D50 100%); background-size: cover; background-position: center; background-repeat: no-repeat; } /* State added by JS once the banner has been moved to root level */ .dchp-banner.dchp-is-root { width: 100vw; /* true viewport width once outside container */ max-width: 100%; /* Prevent horizontal scroll from 100vw when scrollbar is present */ left: 0; right: 0; } /* Optional background image (set via admin) */ .dchp-banner[style*="--dchp-bg-img"] { background-image: linear-gradient(160deg, rgba(6, 21, 41, 0.87) 0%, rgba(13, 34, 64, 0.82) 60%, rgba(15, 45, 80, 0.85) 100%), var(--dchp-bg-img); } /* ---------- Subtle texture overlay ---------- */ .dchp-overlay { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; z-index: 0; } /* ---------- SKN Flag Accent Strips (top & bottom) ---------- */ .dchp-flag-strip { display: flex; width: 100%; height: 6px; position: relative; z-index: 2; } .dchp-stripe { flex: 1; display: block; height: 100%; } .dchp-stripe--green { background: var(--dchp-green); } .dchp-stripe--gold { background: var(--dchp-gold); flex: 0.4; } .dchp-stripe--black { background: var(--dchp-black); flex: 0.6; } /* ---------- Inner Content ---------- */ .dchp-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 24px 48px; gap: 20px; } /* ---------- Date Badge ---------- */ .dchp-badge { display: inline-block; background: var(--dchp-glass); border: 1px solid var(--dchp-glass-border); color: var(--dchp-gold-light); font-family: var(--dchp-font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 18px; border-radius: 50px; backdrop-filter: blur(4px); } /* ---------- Title ---------- */ .dchp-title { font-family: var(--dchp-font-head); font-size: clamp(1.6rem, 4vw, 2.8rem); font-weight: 700; color: var(--dchp-white); line-height: 1.2; max-width: 800px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); } /* ---------- Subtitle ---------- */ .dchp-subtitle { font-family: var(--dchp-font-body); font-size: clamp(0.88rem, 2vw, 1.05rem); color: rgba(255, 255, 255, 0.72); max-width: 560px; line-height: 1.6; } /* ---------- Countdown Clock ---------- */ .dchp-clock { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .dchp-unit { display: flex; flex-direction: column; align-items: center; background: var(--dchp-glass); border: 1px solid var(--dchp-glass-border); border-radius: 12px; padding: 20px 28px 16px; min-width: 100px; backdrop-filter: blur(8px); transition: transform var(--dchp-transition), border-color var(--dchp-transition); } .dchp-unit:hover { transform: translateY(-3px); border-color: var(--dchp-gold); } .dchp-num { font-family: var(--dchp-font-head); font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700; color: var(--dchp-gold); line-height: 1; letter-spacing: -0.02em; text-shadow: 0 0 24px rgba(212, 175, 55, 0.45); display: block; transition: opacity 0.15s ease; } .dchp-num.dchp-flip { opacity: 0; } .dchp-label { font-family: var(--dchp-font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-top: 6px; } /* Separator colon */ .dchp-sep { font-family: var(--dchp-font-head); font-size: clamp(2rem, 5vw, 3.2rem); color: var(--dchp-green); font-weight: 700; line-height: 1; margin-bottom: 24px; user-select: none; opacity: 0.7; } /* ---------- Live / Ended Message ---------- */ .dchp-live-msg { font-family: var(--dchp-font-head); font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: var(--dchp-green); font-weight: 600; letter-spacing: 0.04em; } /* ---------- CTA Buttons ---------- */ .dchp-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 4px; } .dchp-btn { display: inline-block; font-family: var(--dchp-font-body); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 14px 34px; border-radius: 50px; border: 2px solid transparent; cursor: pointer; transition: background var(--dchp-transition), color var(--dchp-transition), border-color var(--dchp-transition), transform var(--dchp-transition), box-shadow var(--dchp-transition); } .dchp-btn:hover { transform: translateY(-2px); } /* Primary – Gold filled */ .dchp-btn--primary { background: var(--dchp-gold); color: var(--dchp-navy-deep); border-color: var(--dchp-gold); } .dchp-btn--primary:hover { background: var(--dchp-gold-light); border-color: var(--dchp-gold-light); box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4); color: var(--dchp-navy-deep); } /* Outline – Green border */ .dchp-btn--outline { background: transparent; color: var(--dchp-white); border-color: var(--dchp-green); } .dchp-btn--outline:hover { background: var(--dchp-green); border-color: var(--dchp-green); color: var(--dchp-white); box-shadow: 0 8px 24px rgba(0, 158, 73, 0.35); } /* ---------- Placeholder shown before JS moves the element ---------- Prevents layout shift from showing a collapsed element in its original shortcode position while the JS rearranges the DOM. */ .dchp-placeholder { display: none !important; height: 0 !important; overflow: hidden !important; } /* ---------- Tablet ---------- */ @media (max-width: 768px) { .dchp-inner { padding: 40px 16px 36px; gap: 16px; } .dchp-unit { min-width: 76px; padding: 16px 18px 12px; } .dchp-clock { gap: 6px; } .dchp-sep { margin-bottom: 20px; } } /* ---------- Mobile ---------- */ @media (max-width: 480px) { .dchp-inner { padding: 32px 12px 28px; gap: 14px; } .dchp-unit { min-width: 64px; padding: 14px 12px 10px; border-radius: 10px; } .dchp-sep { display: none; } .dchp-clock { gap: 8px; } .dchp-ctas { flex-direction: column; align-items: center; } .dchp-btn { width: 100%; max-width: 280px; text-align: center; padding: 13px 24px; } } /* ---------- Accessibility ---------- */ @media (prefers-reduced-motion: reduce) { .dchp-btn, .dchp-unit, .dchp-num { transition: none; } }