/* ============================================================ Deidox.org — shared site chrome & components Built directly on the design system (styles.css tokens). This is the build spec for the Kadence rebuild: semantic, token-driven, no framework. Each page links styles.css then this file. ============================================================ */ /* ---------- JS-reveal gate ---------- Content is visible by default (no-JS / print / reduced-motion safe). When is set, reveal elements start hidden and fade-rise in via IntersectionObserver. */ .has-js .reveal { opacity: 0; transform: translateY(var(--rise)); } .reveal { transition: opacity var(--dur-cinematic) var(--ease-out), transform var(--dur-cinematic) var(--ease-out); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: 90ms; } .reveal[data-delay="2"] { transition-delay: 180ms; } .reveal[data-delay="3"] { transition-delay: 270ms; } .reveal[data-delay="4"] { transition-delay: 360ms; } @media (prefers-reduced-motion: reduce) { .has-js .reveal { opacity: 1; transform: none; } } /* ---------- Sections ---------- */ .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); } .section__head { max-width: 54ch; } .section__head .eyebrow { margin-bottom: var(--space-5); } .section__head h2 { margin: 0; } .section__head p { margin: var(--space-5) 0 0; color: var(--text-muted); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); } .section__headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; } /* A dark cinematic band */ .band-dark { background: var(--ink-950); color: var(--text); } .band-dark .section__head p { color: rgba(255,255,255,0.72); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-body-sm); line-height: 1; white-space: nowrap; cursor: pointer; border: 0; padding: 0.875rem 1.375rem; border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn .material-symbols-sharp { font-size: 1.25em; } .btn--lg { padding: 1.0625rem 1.75rem; font-size: var(--text-body); } .btn--sm { padding: 0.625rem 1rem; font-size: var(--text-caption); } .btn--full { width: 100%; } .btn--primary { background: var(--accent); color: var(--text-on-accent); } .btn--primary:hover { background: var(--accent-hover); color: var(--text-on-accent); } .btn--secondary { background: transparent; color: var(--text-strong); border: var(--border-width-strong) solid var(--border-strong); } .btn--secondary:hover { border-color: var(--accent); color: var(--accent-text); } .btn--ghost { background: transparent; color: var(--text); } .btn--ghost:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-strong); } .btn--link { padding: 0; background: transparent; color: var(--accent-text); } .btn--link:hover { color: var(--accent-text); } .btn--link:hover .btn__txt { text-decoration: underline; text-underline-offset: 3px; } .btn--link .material-symbols-sharp { transition: transform var(--dur-base) var(--ease-out); } .btn--link:hover .material-symbols-sharp { transform: translateX(3px); } /* ---------- Header / nav ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; color: #fff; transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), backdrop-filter var(--dur-base); border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: rgba(10,15,20,0.82); backdrop-filter: blur(12px) saturate(1.1); border-bottom-color: rgba(255,255,255,0.10); } .site-header__in { max-width: var(--container-wide); margin-inline: auto; padding: 0 var(--gutter); height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); } .site-header__brand { display: inline-flex; align-items: center; } .site-header__brand img { height: 29px; width: auto; } .site-nav { display: flex; align-items: center; gap: var(--space-8); } .site-nav a { font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: var(--weight-medium); color: rgba(255,255,255,0.80); letter-spacing: 0.01em; transition: color var(--dur-fast); white-space: nowrap; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--cyan-400); } .site-header__right { display: flex; align-items: center; gap: var(--space-4); } .site-header .btn--primary { background: var(--cyan-400); color: #000; } .site-header .btn--primary:hover { background: var(--cyan-300); } /* Mobile menu */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 0; color: #fff; cursor: pointer; } .nav-toggle .material-symbols-sharp { font-size: 28px; } .mobile-nav { position: fixed; inset: 0; z-index: 49; background: rgba(10,15,20,0.97); backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: var(--space-2); padding: 96px var(--gutter) var(--gutter); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base); } .mobile-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .mobile-nav a { color: #fff; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 1.75rem; padding: var(--space-3) 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .mobile-nav a:hover { color: var(--cyan-400); } .mobile-nav .btn { margin-top: var(--space-6); } @media (max-width: 900px) { .site-nav { display: none; } .site-header__right .btn--primary { display: none; } .nav-toggle { display: inline-flex; } } /* ---------- Film frame (cinematic media) ---------- */ .frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--ink-950); border-radius: var(--radius-frame); overflow: hidden; color: #fff; cursor: pointer; isolation: isolate; } .frame--cine { aspect-ratio: 2.39 / 1; } .frame--tall { aspect-ratio: 4 / 5; } .frame__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform var(--dur-cinematic) var(--ease-out); } .frame:hover .frame__img { transform: scale(1.04); } .frame__slate { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 3; font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.06em; color: #fff; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.18); padding: 3px 8px; border-radius: var(--radius-sm); } .frame__tag { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 3; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.66); } .frame__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: var(--space-8) var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .frame__cap .eyebrow { color: var(--cyan-400); } .frame__cap h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h3); margin: 0; text-shadow: 0 1px 18px rgba(0,0,0,0.45); } /* Play button — the one loud accent: filled glyph in a cyan disc */ .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 3; width: 74px; height: 74px; border-radius: var(--radius-pill); border: 0; cursor: pointer; background: var(--cyan-400); color: #000; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-cyan); transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast); } .play .material-symbols-sharp { font-size: 38px; margin-left: 3px; font-variation-settings: 'FILL' 1, 'wght' 500, 'opsz' 40; } .frame:hover .play { transform: translate(-50%,-50%) scale(1.08); background: var(--cyan-300); } .play--sm { width: 54px; height: 54px; } .play--sm .material-symbols-sharp { font-size: 28px; } /* A placeholder media frame when no real still exists yet */ .frame--placeholder { background: radial-gradient(120% 120% at 50% 30%, #16242e 0%, #0b1117 60%, #070b0f 100%); cursor: default; } .frame--placeholder .frame__note { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: var(--space-3); align-items: center; justify-content: center; text-align: center; padding: var(--space-6); font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.04em; color: rgba(255,255,255,0.5); } .frame--placeholder .frame__note .material-symbols-sharp { font-size: 34px; color: rgba(12,192,223,0.7); } /* ---------- Stats ---------- */ .stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-8); } .stat__num { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1; color: var(--text-strong); letter-spacing: -0.02em; } .stat__lab { display: block; margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); line-height: 1.4; } .band-dark .stat__num { color: #fff; } @media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-6); } } /* ---------- Testimonials ---------- */ .tcard { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .tcard__quote { font-family: var(--font-display); font-size: var(--text-h4); line-height: var(--leading-snug); color: var(--text-strong); } .tcard__who { display: flex; flex-direction: column; gap: 3px; margin-top: auto; } .tcard__name { font-weight: var(--weight-semibold); font-size: var(--text-body-sm); color: var(--text-strong); } .tcard__role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; } .tcard__badge { align-self: flex-start; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding: 3px 7px; border-radius: var(--radius-pill); } /* ---------- Footer ---------- */ .site-foot { background: var(--ink-950); color: var(--ink-200); padding: var(--space-24) var(--gutter) var(--space-10); } .site-foot__in { max-width: var(--container-wide); margin-inline: auto; } .site-foot__top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: var(--space-12); padding-bottom: var(--space-12); border-bottom: 1px solid rgba(255,255,255,0.10); } .site-foot__tag { font-family: var(--font-display); font-style: italic; font-size: var(--text-h4); color: #fff; margin-top: var(--space-6); line-height: 1.4; max-width: 24ch; } .site-foot h4 { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 var(--space-5); font-weight: var(--weight-medium); } .site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .site-foot li a { color: var(--ink-200); font-size: var(--text-body-sm); } .site-foot li a:hover { color: var(--cyan-400); } .site-foot__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-top: var(--space-8); flex-wrap: wrap; } .site-foot__meta { font-size: var(--text-caption); color: var(--ink-400); line-height: 1.7; } .site-foot__social { display: flex; gap: var(--space-2); } .site-foot__social a { width: 40px; height: 40px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.16); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-200); } .site-foot__social a:hover { border-color: var(--cyan-400); color: var(--cyan-400); } .site-foot__social svg { width: 19px; height: 19px; } @media (max-width: 760px) { .site-foot__top { grid-template-columns: 1fr 1fr; gap: var(--space-10); } } /* ---------- Generic grid helpers ---------- */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } } /* MailerLite embedded form panel */ .ml-panel{max-width:480px;margin-inline:auto} .ml-panel .ml-form-embedWrapper{border-radius:8px!important} /* ============ unified image grade (cinematic teal wash) ============ */ .grade{position:relative} .grade img{filter:saturate(.82) contrast(1.05)} .grade::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(165deg,rgba(14,58,82,.28) 0%,rgba(10,15,20,.18) 55%,rgba(12,192,223,.10) 100%);mix-blend-mode:multiply} /* ============ MailerLite embed — restyled to Deidox dark ============ */ .ml-panel #mlb2-43149395.ml-form-embedContainer .ml-form-embedWrapper{background:#111922 !important;border:1px solid rgba(255,255,255,.12) !important;border-radius:10px !important} .ml-panel #mlb2-43149395 .ml-form-embedBody,.ml-panel #mlb2-43149395 .ml-form-successBody{padding:28px 28px 8px !important} .ml-panel #mlb2-43149395 .ml-form-embedContent h4,.ml-panel #mlb2-43149395 .ml-form-successContent h4{font-family:"Fraunces",Georgia,serif !important;font-weight:500 !important;font-size:1.45rem !important;color:#EEF3F5 !important;letter-spacing:-.01em !important} .ml-panel #mlb2-43149395 .ml-form-embedContent p,.ml-panel #mlb2-43149395 .ml-form-successContent p{font-family:"Hanken Grotesk",system-ui,sans-serif !important;color:#B7C4CD !important;font-size:.95rem !important;line-height:1.55 !important} .ml-panel #mlb2-43149395 .ml-form-fieldRow input{background:#0A0F14 !important;color:#EEF3F5 !important;border:1px solid rgba(255,255,255,.18) !important;border-radius:8px !important;font-family:"Hanken Grotesk",system-ui,sans-serif !important;padding:13px 14px !important} .ml-panel #mlb2-43149395 .ml-form-fieldRow input::placeholder{color:#7E8F9B !important} .ml-panel #mlb2-43149395 .ml-form-embedSubmit button{background:#0CC0DF !important;color:#06232B !important;font-family:"Hanken Grotesk",system-ui,sans-serif !important;font-weight:700 !important;border-radius:8px !important;padding:13px !important;transition:background .2s ease !important} .ml-panel #mlb2-43149395 .ml-form-embedSubmit button:hover{background:#0AA2BC !important} .ml-panel #mlb2-43149395 .ml-form-recaptcha{margin-bottom:16px !important} /* ============ Deidox custom podcast player ============ */ .dxp{background:#0E141B;border-radius:8px;overflow:hidden} .dxp__now{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-6);border-bottom:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,#101A24,#0C1219)} .dxp__play{flex:0 0 auto;width:56px;height:56px;border-radius:50%;border:0;background:var(--cyan-400,#0CC0DF);color:#06232B;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,transform .2s ease} .dxp__play:hover{background:#0AA2BC;transform:scale(1.04)} .dxp__play .material-symbols-sharp{font-size:30px} .dxp__nowbody{flex:1;min-width:0} .dxp__nowlabel{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)} .dxp__nowtitle{display:block;font-family:var(--font-display);font-size:1.1rem;color:#fff;margin:.15rem 0 .55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dxp__bar{height:4px;background:rgba(255,255,255,.14);border-radius:2px;cursor:pointer} .dxp__barfill{height:100%;width:0;background:var(--cyan-400,#0CC0DF);border-radius:2px;box-shadow:0 0 8px rgba(12,192,223,.5)} .dxp__times{display:flex;justify-content:space-between;margin-top:.35rem;font-family:var(--font-mono);font-size:.66rem;color:rgba(255,255,255,.5)} .dxp__list{list-style:none;margin:0;padding:0;max-height:340px;overflow-y:auto} .dxp__row{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-6);cursor:pointer;border-bottom:1px solid rgba(255,255,255,.06);transition:background .15s ease} .dxp__row:hover{background:rgba(12,192,223,.06)} .dxp__row.is-active{background:rgba(12,192,223,.1)} .dxp__rowplay{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75)} .dxp__row.is-active .dxp__rowplay{border-color:var(--cyan-400);color:var(--cyan-400)} .dxp__rowplay .material-symbols-sharp{font-size:17px} .dxp__rowbody{min-width:0} .dxp__rowtitle{display:block;font-family:var(--font-display);font-size:.98rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dxp__rowmeta{display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:2px} .dxp__list::-webkit-scrollbar{width:8px}.dxp__list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px} /* footer: A Jesus Mission line */ .site-foot__ajm{margin-top:var(--space-2);font-size:var(--text-body-sm);color:rgba(255,255,255,.55)} .site-foot__ajm a{color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:2px} .site-foot__ajm a:hover{color:#fff}