/* * Anticipate — Maintenance Page Styles * CSS custom-property driven — values injected by PHP inline style on * ───────────────────────────────────────────────────────────────────────── */ /* ── 1. Custom properties ────────────────────────────────────────────────── */ :root { --bg: #0f0f0f; --accent: #3B82F6; --text: #ffffff; --text-muted: rgba(255,255,255,0.45); --border: rgba(255,255,255,0.22); --input-bg: rgba(255,255,255,0.06); --radius: 6px; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: var(--font); --font-countdown: var(--font-display); --font-tagline: var(--font); --size-tagline: var(--size-tagline-d, 12px); --size-display: var(--size-display-d, 48px); --size-countdown: var(--size-countdown-d, 40px); --logo-size: var(--logo-size-d, 60px); --progress-text-size: 0.85rem; --progress-text-color: #ffffff; --progress-border: none; --progress-shadow: none; --transition: 0.3s ease; --max-w: 780px; } /* Progressive enhancement — visible without JS/GSAP */ body:not(.gsap-ready) #anticipate-logo, body:not(.gsap-ready) #anticipate-headline, body:not(.gsap-ready) #anticipate-countdown, body:not(.gsap-ready) #anticipate-progress, body:not(.gsap-ready) #anticipate-slider, body:not(.gsap-ready) #anticipate-subscribe, body:not(.gsap-ready) #anticipate-footer { opacity: 1 !important; transform: none !important; } /* ── 2. Reset & base ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background-color: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ── 3. Page layout ──────────────────────────────────────────────────────── */ #anticipate-page { min-height: 100vh; display: grid; grid-template-rows: 1fr auto; place-items: center center; padding: 48px 24px; } #anticipate-content { width: 100%; max-width: var(--max-w); display: flex; flex-direction: column; align-items: center; gap: 48px; } /* ── 4. Logo ─────────────────────────────────────────────────────────────── */ #anticipate-logo { opacity: 0; } #anticipate-logo img { max-height: var(--logo-size, 60px); width: auto; display: block; } /* ── 5. Headline ─────────────────────────────────────────────────────────── */ #anticipate-headline { text-align: center; opacity: 0; } .anticipate-tagline { font-size: var(--size-tagline); font-family: var(--font-tagline); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; } .anticipate-caption { font-size: var(--size-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: var(--text); margin: 0; font-family: var(--font-display); } .anticipate-caption .word { display: inline-block; will-change: transform, opacity; } /* ── 6. Countdown ────────────────────────────────────────────────────────── */ #anticipate-countdown { display: flex; gap: 32px; opacity: 0; } .anticipate-unit { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; } .anticipate-unit__value { font-size: var(--size-countdown); font-weight: 700; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; font-family: var(--font-countdown); } .anticipate-unit__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); } /* ── 7. Progress bar ─────────────────────────────────────────────────────── */ #anticipate-progress { width: 100%; opacity: 0; } #anticipate-progress-track { width: 100%; height: 50px; background: var(--border); border-radius: 99px; overflow: hidden; position: relative; border: var(--progress-border); box-shadow: var(--progress-shadow); } #anticipate-progress-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 99px; transform-origin: left; position: relative; display: flex; align-items: center; justify-content: flex-end; min-width: 52px; overflow: hidden; } #anticipate-progress-percent { padding-right: 14px; font-size: var(--progress-text-size); font-weight: 700; color: var(--progress-text-color); white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,0.35); } #anticipate-progress-fill::after { content: ''; position: absolute; right: 0; top: 0; width: 6px; height: 100%; background: rgba(255,255,255,0.35); filter: blur(4px); pointer-events: none; } #anticipate-progress-label { display: flex; justify-content: flex-start; margin-top: 8px; font-size: 0.75rem; color: var(--text-muted); } /* ── 8. Content slider ───────────────────────────────────────────────────── */ #anticipate-slider { width: 100%; position: relative; overflow: hidden; opacity: 0; } #anticipate-slides { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .anticipate-slide { min-width: 100%; padding: 32px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--input-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .anticipate-slide h2 { font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 600; margin-bottom: 12px; color: var(--text); } .anticipate-slide p, .anticipate-slide .entry-content { color: var(--text-muted); font-size: 0.95rem; max-width: 540px; margin: 0 auto; } #anticipate-slider-nav { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } .anticipate-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; transition: background var(--transition), transform var(--transition); padding: 0; } .anticipate-dot.is-active { background: var(--accent); transform: scale(1.4); } /* ── 9. Get in Touch form ────────────────────────────────────────────────── */ #anticipate-subscribe { width: 100%; max-width: 480px; opacity: 0; } .anticipate-contact-heading { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; text-align: center; } #anticipate-subscribe-form { display: flex; flex-direction: column; gap: 10px; width: 100%; } #anticipate-message-input { width: 100%; padding: 12px 16px; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 0.9rem; font-family: var(--font); outline: none; resize: vertical; min-height: 100px; transition: border-color var(--transition); } #anticipate-message-input::placeholder { color: var(--text-muted); } #anticipate-message-input:focus { border-color: var(--accent); } #anticipate-email-submit { padding: 12px 20px; background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; font-family: var(--font); cursor: pointer; width: 100%; transition: opacity var(--transition), transform var(--transition); } #anticipate-email-submit:hover { opacity: 0.85; transform: translateY(-1px); } #anticipate-subscribe-msg { margin-top: 4px; font-size: 0.8rem; min-height: 1.2em; text-align: center; color: var(--accent); } /* ── 10. Social icons ────────────────────────────────────────────────────── */ #anticipate-footer { width: 100%; max-width: var(--max-w); display: flex; justify-content: center; gap: 20px; padding-top: 20px; margin-top: 8px; opacity: 0; border-top: 1px solid var(--border); } #anticipate-footer:empty { display: none; } .anticipate-social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--input-bg); border: 1px solid var(--border); color: var(--text-muted); text-decoration: none; transition: color var(--transition), border-color var(--transition), transform var(--transition); } .anticipate-social-link:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); } .anticipate-social-link svg { width: 16px; height: 16px; fill: currentColor; display: block; } /* ── 11. Countdown style variants ───────────────────────────────────────── */ #anticipate-countdown.cd-cards .anticipate-unit { background: rgba(255,255,255,0.07); border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #anticipate-countdown.cd-minimal { align-items: baseline; gap: 0; } #anticipate-countdown.cd-minimal .anticipate-unit { min-width: auto; } #anticipate-countdown.cd-minimal .anticipate-unit__label { display: none; } #anticipate-countdown.cd-minimal .anticipate-unit:not(:last-child) .anticipate-unit__value::after { content: ':'; margin: 0 6px; color: var(--text-muted); font-weight: 300; } #anticipate-countdown.cd-neon .anticipate-unit__value { color: #fff; text-shadow: 0 0 8px var(--accent), 0 0 20px var(--accent), 0 0 40px var(--accent); } #anticipate-countdown.cd-neon .anticipate-unit__label { color: var(--accent); text-shadow: 0 0 8px var(--accent); } #anticipate-countdown.cd-outlined .anticipate-unit__value { -webkit-text-stroke: 2px var(--accent); color: transparent; } #anticipate-countdown.cd-blocks .anticipate-unit { background: var(--accent); border-radius: var(--radius); padding: 14px 18px; min-width: 72px; } #anticipate-countdown.cd-blocks .anticipate-unit__value { color: var(--bg); } #anticipate-countdown.cd-blocks .anticipate-unit__label { color: rgba(0,0,0,0.45); } #anticipate-countdown.cd-ticker { gap: 16px; font-family: 'Courier New', 'Lucida Console', monospace; } #anticipate-countdown.cd-ticker .anticipate-unit__value { font-family: inherit; color: var(--accent); letter-spacing: 0.05em; } #anticipate-countdown.cd-ticker .anticipate-unit__value::before { content: '[ '; color: var(--text-muted); } #anticipate-countdown.cd-ticker .anticipate-unit__value::after { content: ' ]'; color: var(--text-muted); } #anticipate-countdown.cd-ticker .anticipate-unit__label { font-family: inherit; font-size: 0.6rem; letter-spacing: 0.08em; } /* ── 12. Progress bar ambient animations ─────────────────────────────────── */ @keyframes ap-shimmer { 0% { transform: translateX(-100%) skewX(-20deg); } 100% { transform: translateX(400%) skewX(-20deg); } } #anticipate-progress-fill.ap-ambient-shimmer::before { content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%); animation: ap-shimmer 2s ease-in-out infinite; pointer-events: none; } @keyframes ap-pulse { 0%, 100% { box-shadow: 0 0 6px 2px rgba(255,255,255,0.15); } 50% { box-shadow: 0 0 18px 6px rgba(255,255,255,0.45); } } #anticipate-progress-fill.ap-ambient-pulse { animation: ap-pulse 2s ease-in-out infinite; } @keyframes ap-stripes { 0% { background-position: 0 0; } 100% { background-position: 40px 0; } } #anticipate-progress-fill.ap-ambient-stripes { background-image: repeating-linear-gradient( -45deg, transparent, transparent 8px, rgba(255,255,255,0.15) 8px, rgba(255,255,255,0.15) 16px ); background-color: var(--accent); animation: ap-stripes 0.6s linear infinite; } @keyframes ap-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } #anticipate-progress-fill.ap-ambient-gradient { background: linear-gradient( 90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, white), var(--accent) ); background-size: 200% 100%; animation: ap-gradient 2.5s ease infinite; } /* ── 13. Responsive — Divi breakpoints: Tablet 980px / Mobile 767px ────── */ @media (max-width: 980px) { :root { --size-tagline: var(--size-tagline-t, 11px); --size-display: var(--size-display-t, 36px); --size-countdown: var(--size-countdown-t, 32px); --logo-size: var(--logo-size-t, 50px); } #anticipate-countdown { gap: 20px; } } @media (max-width: 767px) { :root { --size-tagline: var(--size-tagline-m, 10px); --size-display: var(--size-display-m, 28px); --size-countdown: var(--size-countdown-m, 26px); --logo-size: var(--logo-size-m, 40px); } #anticipate-countdown { gap: 16px; } .anticipate-unit { min-width: 48px; } #anticipate-subscribe-form { flex-direction: column; } #anticipate-email-submit { width: 100%; } .anticipate-slide { padding: 20px 16px; } }