/* ========================================= SERVICE AREA PAGE  —  servicearea.css Matches screenshot: - Hero with yellow underline - "Brooklyn" centered heading - 4-col CSS-columns alpha list - Cyan italic letter + italic area links ========================================= */ :root { --sa-cyan: #29c3d4; --sa-yellow: #e8a020; --sa-dark: #1a1a1a; --sa-text: #444; --sa-white: #ffffff; --sa-bg: #ffffff; } /* ========================================= 1. HERO BANNER ========================================= */ .sa-hero { position: relative; width: 100%; height: 220px; background-size: cover; background-position: center center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; } .sa-hero-overlay { position: absolute; inset: 0; /* background: rgba(0, 0, 0, 0.48); */ } .sa-hero-content { position: relative; z-index: 2; } .sa-hero-content h1 { text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6); color: #ffffff; font-size: 36px; font-weight: 600; line-height: 36px; text-transform: uppercase; text-align: center !important; /* text-align: center !important; */ } /* Short yellow underline — exactly like screenshot */ .sa-hero-line { width: 54px; height: 4px; background: var(--sa-yellow); border-radius: 2px; margin: 0 auto; } /* ========================================= 2. PAGE BODY ========================================= */ .sa-page { background: var(--sa-bg); padding: 50px 0 70px; } .sa-container { max-width: 1060px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; } /* ── Region heading ("Brooklyn") ── */ .sa-region-title { text-align: center; font-size: 36px; font-weight: 800; color: #000; margin: 0 0 40px; /* font-family: 'Georgia', serif; */ } /* ========================================= 3. ALPHABETICAL GRID CSS multi-column so groups flow naturally and short letter groups sit next to taller ones — exactly like the screenshot ========================================= */ .sa-alpha-grid { columns: 4; column-gap: 32px; } /* Each letter block breaks across columns cleanly */ .sa-alpha-col-item { break-inside: avoid; margin-bottom: 28px; } /* Cyan italic letter heading — matches screenshot */ .sa-letter { display: block; font-size: 18px; font-weight: 700; /* font-style: italic; */ color: #000; margin-bottom: 4px; letter-spacing: 0.5px; } /* Area links list */ .sa-area-list { list-style: none; margin: 0; padding: 0; } .sa-area-list li { line-height: 1.6; margin: 0; } /* Italic area name links — matches screenshot */ .sa-area-list a { display: inline-block; font-size: 15px; /* font-style: italic; */ color: #000; text-decoration: none; line-height: 1.7; transition: color 0.2s; } /* .sa-area-list a:hover { color: var(--sa-cyan); } */ /* ========================================= RESPONSIVE ========================================= */ @media (max-width: 900px) { .sa-alpha-grid { columns: 3; column-gap: 24px; } } @media (max-width: 640px) { .sa-hero { height: 170px; } .sa-hero-content h1 { font-size: 30px; } .sa-alpha-grid { columns: 2; column-gap: 20px; } .sa-region-title { font-size: 22px; margin-bottom: 28px; } } @media (max-width: 400px) { .sa-alpha-grid { columns: 1; } }