/* Atlanta Urgent Care (AUC) — Shared stylesheet Design tokens, focus states, scroll-reveal, and micro-interactions. Palette and typography follow the brand guidelines; Tailwind utilities are compiled to css/tailwind.css (no runtime CDN). Load order in each page: tailwind.css first, then this file. */ /* --- Self-hosted Prompt (Regular 400 / Bold 700), works with no network --- */ @font-face { font-family: "Prompt"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/prompt-latin-400-normal.woff2") format("woff2"), url("../fonts/prompt-latin-400-normal.woff") format("woff"); } @font-face { font-family: "Prompt"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/prompt-latin-700-normal.woff2") format("woff2"), url("../fonts/prompt-latin-700-normal.woff") format("woff"); } /* --- Design tokens --- */ :root { --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 600ms; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Semantic z-index scale (never arbitrary 9999) */ --z-sticky: 100; --z-menu: 200; --z-skip: 300; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* Brand-wide slight tracking */ body { letter-spacing: 0.01em; } /* Balanced headings, pretty prose */ h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } /* --- Visible, high-contrast focus ring (WCAG 2.4.7 / 2.4.11) --- */ a:focus-visible, button:focus-visible { outline: 3px solid #31459c; outline-offset: 3px; border-radius: 6px; } /* Light focus ring on dark surfaces for contrast */ .on-dark a:focus-visible, .on-dark button:focus-visible { outline-color: #bdb8ef; } /* --- Scroll reveal: enhances an already-visible default --- Content is visible by default. The reveal only activates when JS adds `.js` to , so no-JS and headless renderers never ship blank. */ .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-slow) var(--ease-out-expo), transform var(--duration-slow) var(--ease-out-expo); } .js .reveal.is-visible { opacity: 1; transform: none; } /* Staggered children for lists that benefit from a sequential entrance */ .js .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease-out-expo), transform var(--duration-slow) var(--ease-out-expo); } .js .reveal-stagger.is-visible > * { opacity: 1; transform: none; } .js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; } .js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; } .js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; } .js .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; } .js .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; } /* Reduced motion: no transforms, instant reveal (WCAG 2.3.3) */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal, .js .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* --- Animated underline for nav links --- */ .nav-link { position: relative; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%; background: #31459c; transform: scaleX(0); transform-origin: left; transition: transform var(--duration-normal) var(--ease-out-expo); } .nav-link:hover::after, .nav-link:focus-visible::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); } /* --- CTA press micro-interaction --- */ .cta { transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-normal) var(--ease-out-expo), background-color var(--duration-normal) var(--ease-out-expo); } .cta:hover { transform: translateY(-2px); } .cta:active { transform: translateY(0); } /* --- Hero grid texture: subtle atmosphere on periwinkle tint --- */ .hero-grid { background-image: linear-gradient(to right, rgba(49, 69, 156, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(49, 69, 156, 0.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 40%, transparent 100%); } /* Decorative photo treatment: keep images crisp and on-brand */ .photo { object-fit: cover; width: 100%; height: 100%; display: block; } /* --------------------------------------------------------------------------- Duotone icon: a large, faint "ghost" copy behind a solid foreground copy. The foreground svg carries the size utilities; the ghost is 170 percent of the container, periwinkle, low-opacity, offset up-left. Foreground color comes from the container text color (brand on light, white on dark). NOTE: never write the sequence star-slash inside these comments. --------------------------------------------------------------------------- */ .duo { position: relative; display: inline-block; line-height: 0; vertical-align: middle; } .duo > .g { position: absolute; top: -50%; left: -50%; width: 170%; height: 170%; opacity: 0.28; pointer-events: none; z-index: 0; } .duo > .f { position: relative; z-index: 1; }