/* ============================================================ LWS AGENCY GLOBAL MASTER DESIGN SYSTEM — EXPERIMENTAL OVERRIDE Community Church of Glen Rock ------------------------------------------------------------ Loaded AFTER css/style.css on every page. 100% reversible: delete this file and remove the tag from each page's . style.css is never modified. Abstract system tokens (--primary-color, --text-dark, shadows) are bound to the EXISTING church brand palette so identity survives the experiment instead of going generic indigo/slate. Deliberately NOT applied (would hurt the bespoke church brand): • §1.4 heading weights/scale — faux-bolds the elegant Cormorant serif • §1.3 zig-zag row-reverse — would scramble custom split sections This is the "polish-only" build: spacing, elevation, button & card micro-interactions, form styling, smooth transitions, 1280px container. ============================================================ */ :root { /* Map the system's abstract tokens onto the real brand */ --primary-color: var(--teal, #4e8a8a); --text-dark: var(--charcoal, #4a4340); /* §2.2 Modern elevation — soft slate, never harsh black */ --shadow-low: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05); --shadow-high: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.10); --ds-ease: cubic-bezier(0.4, 0, 0.2, 1); /* §1.2 Proportional section spacing — premium room to breathe. This single variable cascades to every section in style.css. */ --section-pad: clamp(5rem, 8vw, 8rem); } /* ------------------------------------------------------------ §1.1 THE CONTAINER LAW ------------------------------------------------------------ */ .container { max-width: 1280px; padding-inline: 2.5rem; } /* §1.4 TYPOGRAPHY HIERARCHY — intentionally NOT applied. The brand's elegant light-weight Cormorant serif headings are core to the church identity; forcing 700–800 weights synthesized faux-bold and cheapened them. Headings keep their style.css values. */ /* ------------------------------------------------------------ §2.1 GLOBAL MICRO-INTERACTIONS ------------------------------------------------------------ */ a, button, .btn, .mosaic-item, [class*="card"] { transition: all 0.3s var(--ds-ease); } /* ------------------------------------------------------------ §3 PREMIUM CTA PATTERNS (mapped onto the existing .btn system) ------------------------------------------------------------ */ .btn { letter-spacing: 0.05em; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-high); } /* ------------------------------------------------------------ §2.2 / §2.3 ELEVATION + ADAPTIVE MEDIA ZOOM ------------------------------------------------------------ */ [class*="card"], .mosaic-item { box-shadow: var(--shadow-low); } [class*="card"]:hover, .mosaic-item:hover { box-shadow: var(--shadow-high); } [class*="card"]:hover img, .mosaic-item:hover img { transform: scale(1.04); } /* ------------------------------------------------------------ §4.2 NO UNWRAPPED FORMS — padded inputs + glowing focus ring ------------------------------------------------------------ */ input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), textarea, select { padding: 0.75rem 1rem; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 6px; transition: all 0.3s var(--ds-ease); } input:not([type="submit"]):not([type="button"]):focus, textarea:focus, select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(78, 138, 138, 0.25); } /* ------------------------------------------------------------ §1.2 MOBILE DOWNSCALE ------------------------------------------------------------ */ @media (max-width: 768px) { .container { padding-inline: 1.25rem; } :root { --section-pad: 3.5rem; } }