/* ======================================================================= Global CSS Variables ======================================================================= */ :root { --clr-text: #000000; --clr-text-shadow: rgba(0,0,0,0.12); --clr-page-bg: rgba(0,0,0,0); --clr-surface: rgba(255,255,255,0.5); --clr-border: rgba(200,200,200,0.8); /* Links — N8 Solutions brand purple */ --clr-link: #6944b3; --clr-link-hover: #331157; --clr-ctrl-bg: rgba(255,255,255,0.9); --clr-ctrl-bg-hover: rgba(240,240,240,0.95); --clr-ctrl-shadow: rgba(0,0,0,0.25); --clr-icon: #000000; } [data-theme="dark"] { --clr-text: #ebebeb; --clr-text-shadow: rgba(0,0,0,0.5); --clr-page-bg: rgba(0,0,0,0); --clr-surface: rgba(0,0,0,0.5); --clr-border: #000000; --clr-link: #a57fe0; --clr-link-hover: #c4a0f0; --clr-ctrl-bg: #1a1a1a; --clr-ctrl-bg-hover: #333333; --clr-ctrl-shadow: rgba(255,255,255,0.20); --clr-icon: #e6e6e6; } /* ======================================================================= */ /* Base — black behind everything so iOS Safari gaps show dark not white */ /* ======================================================================= */ html { background: #000 !important; } html, body { margin: 0; padding: 0; background-color: var(--clr-page-bg); min-height: 100%; min-height: -webkit-fill-available; min-height: 100dvh; } /* ======================================================================= */ /* Video Background */ /* */ /* #video-background is a direct child of — NOT inside */ /* #n8-page-surround. This is critical on iOS Safari: position:fixed */ /* gets clipped by any ancestor with overflow:hidden. By placing the */ /* video outside the main wrapper it anchors correctly to the viewport. */ /* ======================================================================= */ #video-background { position: fixed; top: -60px; /* overshoots status bar + notch on any iPhone */ left: 0; right: 0; bottom: -50px; /* overshoots home indicator on any iPhone */ z-index: -1; overflow: hidden; background: #000; } #video-background video { position: absolute; top: 50%; left: 50%; min-width: 100vw; min-height: 100vh; min-height: 120dvh; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; opacity: 0; transition: opacity .5s ease-in-out; } #video-background video.ready { opacity: 1; } .icon-btn { background: none; border: 0; padding: 0; cursor: pointer; } .icon { width: 24px; height: 24px; fill: var(--clr-icon); } .fallback-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: opacity 0.5s ease-in-out; } @media (prefers-reduced-motion: reduce) { #video-background video { display: none !important; } .fallback-image { display: block !important; } } /* ======================================================================= */ /* Page Surround */ /* ======================================================================= */ #n8-page-surround { padding-top: max(20px, calc(env(safe-area-inset-top, 0px) + 10px)); padding-bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 10px)); min-height: 100vh; min-height: -webkit-fill-available; min-height: 100dvh; margin: 0; display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; background-color: transparent; padding: 20px; box-sizing: border-box; position: relative; /* No overflow:hidden here — that was clipping the fixed video on iOS */ } /* ── Content column ─────────────────────────────────────────────────── */ .container { text-align: left; max-width: 760px; width: 100%; margin: auto; position: relative; z-index: 1; background: transparent; } #main { position: relative; isolation: isolate; text-align: left; padding: 20px; background-color: var(--clr-surface); border: 1px solid var(--clr-border); box-shadow: inset 0 0 1px rgba(0,0,0,0.2), 0 0 10px 0 rgba(0,0,0,0.1); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transform: translateZ(0); -webkit-backface-visibility: hidden; } [data-theme="dark"] #main { box-shadow: inset 0 0 1px rgba(225,225,225,0.8), 0 0 10px 0 rgba(0,0,0,0.3); } #footer { margin: auto; padding: 20px; } /* ======================================================================= */ /* Typography */ /* ======================================================================= */ h1, h2, p, li, em { color: var(--clr-text); text-shadow: 1px 1px 1px var(--clr-text-shadow); } .section-icon { display: inline-flex; width: 1em; height: 1em; margin-right: .35em; vertical-align: -0.12em; } .section-icon svg { width: 100%; height: 100%; fill: #ffba00; /* N8 brand gold accent */ } /* ======================================================================= */ /* Links */ /* ======================================================================= */ a { color: var(--clr-link); text-decoration: none; text-shadow: 1px 1px 1px var(--clr-text-shadow); } a:hover { color: var(--clr-link-hover); text-decoration: underline; } /* ── Body link scale-up pill (Codrops InlineAnchorStyles) ────────────── */ #main p a, #main li a { position: relative; display: inline-block; vertical-align: baseline; padding: 0 0.25em; border-radius: 6px; color: var(--clr-link); text-shadow: 1px 1px 1px var(--clr-text-shadow); text-decoration: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: color 0.2s ease, text-shadow 0.2s ease; } #main p a::before, #main li a::before { content: ''; position: absolute; top: 0; left: -4px; z-index: -1; box-sizing: content-box; padding: 0 4px; width: 100%; height: 100%; border-radius: 6px; background-color: var(--clr-link); opacity: 0; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 0.22s cubic-bezier(0.25, 0.25, 0.325, 1.39), opacity 0.22s ease; transform: scale(0); transform-origin: center center; } #main p a:hover, #main p a:focus, #main li a:hover, #main li a:focus { color: #ffffff; text-shadow: none; text-decoration: none; } #main p a:hover::before, #main p a:focus::before, #main li a:hover::before, #main li a:focus::before { opacity: 1; transform: scale(1); } /* Hub card overrides */ .hub-link--n8, .hub-link--n8 *, .hub-link--chiro, .hub-link--chiro * { text-shadow: none !important; background-image: none; } .hub-link--n8::before, .hub-link--chiro::before { display: none !important; } /* Bot-bait link overrides */ .bot-bait a, .bot-bait p a { display: inline !important; position: static !important; padding: 0 !important; border-radius: 0 !important; background: none !important; color: var(--clr-link); text-shadow: none; } .bot-bait a::before, .bot-bait p a::before { display: none !important; } .bot-bait a:hover, .bot-bait p a:hover { color: var(--clr-link-hover); text-decoration: underline; } @media (prefers-reduced-motion: reduce) { #main p a::before, #main li a::before { transition: opacity 0.15s ease; transform: scale(1) !important; } } /* ======================================================================= */ /* Video Controls */ /* ======================================================================= */ #videoControls { position: absolute; top: 10px; right: 80px; cursor: pointer; font-size: 24px; padding: 0; width: 40px; height: 40px; background-color: var(--clr-ctrl-bg); border-radius: 999px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px var(--clr-ctrl-shadow); z-index: 9999; transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } #videoControls:hover { background-color: var(--clr-ctrl-bg-hover); transform: translate3d(0,0,0) scale(1.1); box-shadow: 0px 0px 7px 3px var(--clr-ctrl-shadow); } /* ======================================================================= */ /* Dark-Mode Toggle */ /* ======================================================================= */ #darkModeToggle { position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px; padding: 0; width: 40px; height: 40px; background-color: var(--clr-ctrl-bg); border-radius: 999px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px var(--clr-ctrl-shadow); z-index: 9999; transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; background-clip: padding-box; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } #darkModeToggle i, #darkModeToggle svg, #darkModeToggle .fa, #darkModeToggle .fa-duotone { color: var(--clr-icon) !important; fill: var(--clr-icon) !important; --fa-primary-color: var(--clr-icon); --fa-secondary-color: var(--clr-icon); --fa-secondary-opacity: 1; transition: color 0.3s ease; } #darkModeToggle:hover { background-color: var(--clr-ctrl-bg-hover); transform: translate3d(0,0,0) scale(1.1); box-shadow: 0px 0px 7px 3px var(--clr-ctrl-shadow); } [data-theme="dark"] #darkModeToggle:hover { background-color: var(--clr-ctrl-bg-hover); box-shadow: 0px 0px 7px 3px var(--clr-ctrl-shadow); } /* ======================================================================= */ /* Dark-Mode surface tweaks */ /* ======================================================================= */ [data-theme="dark"] body { background-color: var(--clr-page-bg); } [data-theme="dark"] .container { background-color: transparent; } [data-theme="dark"] #footer { background-color: transparent; } html, body, .container, #main, #footer { transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, p, li, em, a { transition: color 0.3s ease, text-shadow 0.3s ease; } @media (hover: none) and (pointer: coarse) { #darkModeToggle, #videoControls { width: 48px; height: 48px; } } @media screen and (max-width: 767px) { h1 { margin-top: 4rem; } #darkModeToggle { top: 15px; right: 15px; } #videoControls { top: 15px; right: 95px; } #main, #footer { padding: 15px; box-shadow: none; } } @media screen and (min-width: 768px) and (max-width: 991px) { #main { padding: 20px; box-shadow: inset 0 0 1px rgba(0,0,0,0.2), 0 0 5px 0 rgba(0,0,0,0.1); } [data-theme="dark"] #main { box-shadow: inset 0 0 1px rgba(225,225,225,0.8), 0 0 5px 0 rgba(0,0,0,0.3); } } @media screen and (min-width: 992px) and (max-width: 1199px) { #main { padding: 25px; box-shadow: inset 0 0 1px rgba(0,0,0,0.2), 0 0 10px 0 rgba(0,0,0,0.1); } [data-theme="dark"] #main { box-shadow: inset 0 0 1px rgba(225,225,225,0.8), 0 0 10px 0 rgba(0,0,0,0.3); } } @media screen and (min-width: 1200px) { #main { padding: 30px; box-shadow: inset 0 0 1px rgba(0,0,0,0.2), 0 0 15px 0 rgba(0,0,0,0.1); } [data-theme="dark"] #main { box-shadow: inset 0 0 1px rgba(225,225,225,0.8), 0 0 15px 0 rgba(0,0,0,0.3); } } /* ======================================================================= */ /* LLM Trap / Bot Bait */ /* ======================================================================= */ .bot-bait { background-color: #000; color: #33ff33; font-family: 'Courier New', Courier, monospace; padding: 20px; margin-top: 30px; border: 2px dashed #33ff33; box-shadow: 0 0 10px #33ff33; animation: blink 1s steps(1,start) infinite; } .bot-bait p { color: #666666; font-weight: bold; margin-bottom: 10px; text-shadow: none; } @keyframes blink { 50% { border-color: #666666; color: #666666; box-shadow: none; } } @media (prefers-reduced-motion: reduce) { .bot-bait { animation: none !important; } } /* ======================================================================= */ /* CTA Button — sliding fill (btn-1c) + icon slide-in (btn-4c) */ /* ======================================================================= */ .cta-group { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; align-items: center; margin: 1.25em 0 1.75em 0; } .cta-button { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.75em 1.75em; border-radius: 999px; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.03em; text-decoration: none !important; text-shadow: none !important; overflow: hidden; position: relative; background-image: linear-gradient(#ffffff 0 0); background-color: #6944b3; background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; color: #ffffff !important; border: none; transition: background-size 0.3s ease, color 0.3s ease, transform 0.15s ease, box-shadow 0.2s ease; box-shadow: 0 2px 8px rgba(105,68,179,0.30); -webkit-tap-highlight-color: transparent; } .cta-button i { display: inline-block; transform: translateX(-8px); opacity: 0.65; transition: transform 0.3s cubic-bezier(0.25, 0.25, 0.325, 1.39), opacity 0.3s ease, color 0.3s ease; } .cta-button:hover, .cta-button:focus, .cta-button:active { background-size: 100% 100%; color: #6944b3 !important; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(105,68,179,0.40); text-decoration: none !important; } .cta-button:hover i, .cta-button:focus i, .cta-button:active i { transform: translateX(0); opacity: 1; } /* ======================================================================= */ /* Vanity Accordion */ /* ======================================================================= */ .vanity-accordion { margin-top: 2.5em; } .vanity-accordion > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.75em 1.5em; border-radius: 999px; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border: 2px solid currentColor; opacity: 0.50; overflow: hidden; position: relative; height: 3em; transition: opacity 0.2s ease; user-select: none; width: fit-content; margin: 0 auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .vanity-accordion > summary::-webkit-details-marker { display: none; } .vanity-accordion > summary::marker { display: none; } /* Hover: opacity only — transforms are [open]-only to prevent iOS touch retaining hover state after tap-to-close */ .vanity-accordion > summary:hover { opacity: 1; } .vanity-accordion[open] > summary { opacity: 1; } /* Text: visible by default, slides down and out only when [open] */ .summary-text { display: inline-block; transition: transform 0.3s ease; transform: translateY(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .vanity-accordion[open] > summary .summary-text { transform: translateY(300%); } /* Icons: slide down into view only when [open] */ .summary-icons { position: absolute; top: 50%; left: 0; right: 0; width: 100%; padding: 0 1.5em; box-sizing: border-box; transform: translateY(calc(-50% - 300%)); display: flex; align-items: center; justify-content: space-around; font-size: 1.8rem; transition: transform 0.3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; --fa-secondary-opacity: 0.7; --fa-secondary-color: currentColor; } .vanity-accordion[open] > summary .summary-icons { transform: translateY(-50%); } .vanity-accordion > div { margin-top: 1.5em; } /* Dark mode: purple border + text for contrast, full opacity */ [data-theme="dark"] .vanity-accordion > summary { color: #a57fe0; opacity: 1; } /* ======================================================================= */ /* Hub Links — Grand Central section */ /* ======================================================================= */ .link-hub { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5em 0; justify-content: center; } /* ── Base pill button ─────────────────────────────────────────────────── */ .hub-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.5em 1.4em; border: 2px solid currentColor; border-radius: 100px; text-decoration: none; font-weight: 600; opacity: 0.82; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-size 0.3s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.18s ease, transform 0.12s ease; } /* ── LinkedIn / Email pill buttons ───────────────────────────────────── */ .hub-link:not(.hub-link--n8):not(.hub-link--chiro) { flex: 0 1 auto; min-width: 110px; max-width: 180px; overflow: hidden; background-image: linear-gradient(var(--clr-link) 0 0); background-color: transparent; background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; } /* FA icon: btn-4c slide-in animation */ .hub-link:not(.hub-link--n8):not(.hub-link--chiro) i { display: inline-block; transform: translateX(-6px); opacity: 0.65; margin-right: 0.3em; --fa-secondary-opacity: 0.7; --fa-secondary-color: currentColor; transition: transform 0.3s cubic-bezier(0.25, 0.25, 0.325, 1.39), opacity 0.3s ease, color 0.3s ease; } .hub-link:not(.hub-link--n8):not(.hub-link--chiro):hover, .hub-link:not(.hub-link--n8):not(.hub-link--chiro):focus, .hub-link:not(.hub-link--n8):not(.hub-link--chiro):active { background-size: 100% 100%; color: #ffffff; border-color: var(--clr-link); opacity: 1; transform: translateY(-1px); text-decoration: none; } .hub-link:not(.hub-link--n8):not(.hub-link--chiro):hover i, .hub-link:not(.hub-link--n8):not(.hub-link--chiro):focus i, .hub-link:not(.hub-link--n8):not(.hub-link--chiro):active i { transform: translateX(0); opacity: 1; } /* ── N8 Solutions: featured dark card ────────────────────────────────── */ .hub-link--n8 { flex-basis: 100%; flex-direction: column; align-items: center; gap: 0.2em; padding: 1.25em 2em 1.5em; background-color: #111827; background-image: none; border-color: #111827; border-radius: 12px; color: #eeeeee; opacity: 1; position: relative; } .hub-link--n8:hover, .hub-link--n8:focus, .hub-link--n8:active { background-color: #1e2d40; background-image: none; border-color: #1e2d40; transform: translateY(-2px); opacity: 1; text-decoration: none; } .hub-link--n8::after { content: 'Visit \2192'; position: absolute; bottom: 0.55em; right: 1em; font-size: 0.68rem; letter-spacing: 0.05em; opacity: 0; color: #7fb5c0; transform: none; transition: opacity 0.15s ease; } .hub-link--n8:hover::after, .hub-link--n8:focus::after, .hub-link--n8:active::after { opacity: 1; transform: none; } .n8-logo { width: 160px; height: auto; display: block; margin-bottom: 0.15em; } .hub-n8-brand { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; color: #eeeeee; } .hub-n8-service { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; color: #eeeeee; } .hub-n8-sub { font-size: 0.7rem; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.55; color: #eeeeee; } /* N8 card action line — brand gold */ .hub-n8-cta { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #ffba00; margin-top: 0.5em; opacity: 0.85; transition: opacity 0.15s ease; } .hub-link--n8:hover .hub-n8-cta, .hub-link--n8:focus .hub-n8-cta, .hub-link--n8:active .hub-n8-cta { opacity: 1; } /* ── Koontz Chiropractic: featured teal card ─────────────────────────── */ .hub-link--chiro { flex-basis: 100%; flex-direction: column; align-items: center; gap: 0.25em; padding: 1.25em 2em 1.5em; background-color: #0f2d35; background-image: none; border: 2px solid #1e4d5a; border-radius: 12px; color: #d8eef2; opacity: 1; position: relative; -webkit-tap-highlight-color: transparent; } .hub-link--chiro:hover, .hub-link--chiro:focus, .hub-link--chiro:active { background-color: #1a3d48; background-image: none; border-color: #2a6070; transform: translateY(-2px); opacity: 1; text-decoration: none; } .hub-link--chiro::after { content: 'Visit \2192'; position: absolute; bottom: 0.55em; right: 1em; font-size: 0.68rem; letter-spacing: 0.05em; opacity: 0; color: #7fb5c0; transform: none; transition: opacity 0.15s ease; } .hub-link--chiro:hover::after, .hub-link--chiro:focus::after, .hub-link--chiro:active::after { opacity: 1; transform: none; } .chiro-logo { width: 90px; height: auto; display: block; border-radius: 4px; margin-bottom: 0.15em; } .hub-chiro-vertebra { font-size: 0.62rem; font-weight: 400; letter-spacing: 0.05em; opacity: 0.5; color: #d8eef2; text-transform: uppercase; } .hub-chiro-name { font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; color: #d8eef2; } .hub-chiro-sub { font-size: 0.7rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; color: #d8eef2; }