/* ========================================================================== ATLANTA AIRPORT — CUSTOM STYLESHEET (UPGRADED) Theme: Zakra Child Description: Complete custom styles for Hartsfield-Jackson Atlanta International Airport website. Upgraded for a more professional, modern corporate aesthetic. Naming: BEM-lite with .atl-* prefix to avoid theme conflicts. Grid: Bootstrap 3 (col-md-*, col-sm-*, col-xs-*) Fonts: Oswald (headings) + Source Sans Pro (body) via Google Fonts Author: Child Theme Developer ========================================================================== */ /* ---------------------------------------------------------- ROOT VARIABLES ---------------------------------------------------------- */ :root { /* ── Brand palette (primary) ─────────────────────── */ --atl-navy: #2c7ecb; /* Primary blue */ --atl-navy-dark: #1a5faa; /* Dark tint of navy – hover states, dark bands */ --atl-red: #BA0C2F; /* Primary red */ --atl-red-dark: #96091f; /* Dark tint of red – hover states */ /* ── Functional / status colors (not brand palette) ─ Used only for wait-time indicators, TSA status badges, and similar data-driven UI elements. */ --atl-green: #10B981; --atl-green-light: #d1fae5; --atl-purple: #7C3AED; --atl-amber: #F59E0B; /* ── Neutrals ────────────────────────────────────── */ --atl-dark: #111827; --atl-light: #F4F6FA; --atl-border: #E2E8F0; --atl-white: #FFFFFF; --atl-text: #1E293B; --atl-text-mid: #475569; --atl-muted: #94A3B8; --font-primary: 'Montserrat', sans-serif; --font-secondary: 'Montserrat', sans-serif; /* Spacing */ --atl-section-py: 72px; /* Shadows */ --atl-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --atl-shadow-md: 0 4px 16px rgba(0,0,0,.10); --atl-shadow-lg: 0 10px 40px rgba(0,0,0,.14); --atl-shadow-xl: 0 20px 60px rgba(0,0,0,.20); /* Radii */ --atl-radius: 6px; --atl-radius-lg: 10px; /* Transitions */ --atl-transition: all 0.22s ease; } /* ---------------------------------------------------------- PAGE WRAPPER ---------------------------------------------------------- */ .atl-page-wrap { font-family: var(--font-secondary), sans-serif; color: var(--atl-text); background: var(--atl-white); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary), sans-serif !important; } body { font-family: var(--font-secondary), sans-serif !important; } /* Home page css */ a:focus { outline: none!important; outline-offset: unset!important; } /* ============================================================ BASE — mirrors style.css?v=1.0.7 from reference site ============================================================ */ img { max-width: 100%; height: auto; } /* ── Search input height ── */ .search-input-height, .search-input-height .form-control, .search-input-height .btn { height: 48px; border-radius: 0; } /* ── w-lg-25 for wait-time stat cards ── */ @media (min-width: 992px) { .w-lg-25 { width: 45% !important; } } @media (max-width: 767px) { .w-lg-25 { width: 100% !important; } } /* ── Brand colours ── */ :root { --brand: #015a9c; --brand-light: #2c7ecb; --brand-dark: #05509b; --shadow-sm: 0 2px 8px rgba(1,90,156,.10); --shadow-md: 0 8px 32px rgba(1,90,156,.18); --shadow-lg: 0 16px 48px rgba(1,90,156,.22); --primary: #015a9c; --primary-dark: #013f6e; --accent: #e8622a; --accent-light: #f0845a; --white: #ffffff; --text-dark: #1a2332; --text-muted: #6c7a8d; --border: #dde3ea; --bg-soft: #f4f7fb; --shadow-sm: 0 2px 8px rgba(1,90,156,.10); --shadow-md: 0 8px 32px rgba(1,90,156,.18); --shadow-lg: 0 16px 48px rgba(1,90,156,.22); --radius: 12px; } /* ============================================================ TYPOGRAPHY SYSTEM — Single source of truth Font: Montserrat (already set on body) Scale: Section H2=28px, Section H3=22px, Body=15px ============================================================ */ /* ── Font variables (fix undefined --font-display / --font-main) ── */ :root { --font-main: "Montserrat", sans-serif; --font-display: "Montserrat", sans-serif; /* Type scale */ --fs-h1: 30px; /* Banner headline only */ --fs-h2: 26px; /* Section headings */ --fs-h3: 24px; /* Sub-headings / cards */ --fs-h4: 22px; /* Card titles */ --fs-h5: 20px; /* Small card titles */ --fs-body: 15px; /* Default paragraph */ --fs-small: 13px; /* Meta / badges */ --fs-xs: 11px; /* Labels / caps */ /* Weight scale */ --fw-bold: 700; --fw-semi: 600; --fw-normal: 400; /* Line heights */ --lh-heading: 1.25; --lh-body: 1.7; } /* ── Reset global heading sizes — use variables ── */ h1 { font-size: var(--fs-h1) !important; font-weight: var(--fw-bold); line-height: var(--lh-heading); margin-bottom: 16px; } h2 { font-size: var(--fs-h2) !important; font-weight: var(--fw-bold); line-height: var(--lh-heading); margin-bottom: 12px; } h3 { font-size: var(--fs-h3) !important; font-weight: var(--fw-semi); line-height: var(--lh-heading); margin-bottom: 10px; } h4 { font-size: var(--fs-h4) !important; font-weight: var(--fw-semi); line-height: var(--lh-heading); margin-bottom: 8px; } h5 { font-size: var(--fs-h5) !important; font-weight: var(--fw-semi); line-height: var(--lh-heading); margin-bottom: 6px; } h6 { font-size: var(--fs-small) !important; font-weight: var(--fw-semi); line-height: var(--lh-heading); margin-bottom: 4px; } /* ── Global paragraph ── */ p { font-size: var(--fs-body); line-height: var(--lh-body); color: #4a5568; margin-bottom: 12px; } /* ── Responsive scale-down ── */ @media (max-width: 991px) { :root { --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 20px; } } @media (max-width: 767px) { :root { --fs-h1: 26px; --fs-h2: 21px; --fs-h3: 18px; --fs-h4: 17px; --fs-h5: 15px; } } /* ── Theme colours ── */ .theme-bg { background-color: #015a9c !important; } .theme-bg:hover { background-color: #2c7ecb !important; } .theme-color { color: #015a9c !important; } .badge-theme-bg { background-color: #015a9c; } .badge-bg { background-color: yellow; color: black; font-weight: 700; } .green-bg { background-color: green; } .red-bg { background-color: red; } .text-primary { color: #2c7ecb !important; } .text-brand-success { color: rgb(5,80,155) !important; } .bg-info { background-color: #2c7ecb !important; } span.mia-minutes { color: #fff !important; } /* ── Thin scrollbar ── */ ::-webkit-scrollbar { width: 8px !important; height: 2px !important; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #555; } .table-responsive { scrollbar-color: #ffc107 #f1f1f18a; } /* ---------- Flex Utilities ---------- */ .d-flex { display: flex !important; } .d-block { display: block !important; } .flex-column { flex-direction: column !important; } .flex-wrap { flex-wrap: wrap !important; } .justify-content-between { justify-content: space-between !important; } .justify-content-center { justify-content: center !important; } .align-items-center { align-items: center !important; } .align-items-start { align-items: flex-start !important; } .align-self-center { align-self: center !important; } @media (min-width: 768px) { .d-md-flex { display: flex !important; } .d-md-block { display: block !important; } } /* ---------- Spacing Utilities ---------- */ .mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: 10px !important; } .mb-3 { margin-bottom: 15px !important; } .mb-4 { margin-bottom: 20px !important; } .mb-5 { margin-bottom: 30px !important; } .mt-2 { margin-top: 10px !important; } .mt-3 { margin-top: 15px !important; } .mt-4 { margin-top: 20px !important; } .mt-5 { margin-top: 30px !important; } .ml-3 { margin-left: 15px !important; } .ml-auto { margin-left: auto !important; } .mx-2 { margin-left: 10px !important; margin-right: 10px !important; } .my-2 { margin-top: 10px !important; margin-bottom: 10px !important; } .my-3 { margin-top: 15px !important; margin-bottom: 15px !important; } .my-4 { margin-top: 20px !important; margin-bottom: 20px !important; } .my-5 { margin-top: 30px !important; margin-bottom: 30px !important; } .p-0 { padding: 0 !important; } .p-1 { padding: 5px !important; } .p-2 { padding: 10px !important; } .p-3 { padding: 15px !important; } .p-4 { padding: 20px !important; } .p-5 { padding: 30px !important; } .py-5 { padding-top: 30px !important; padding-bottom: 30px !important; } .px-3 { padding-left: 15px !important; padding-right: 15px !important; } .txt-white {color: #fff!important;} @media (min-width: 768px) { .p-sm-3 { padding: 15px !important; } .p-sm-5 { padding: 30px !important; } .p-md-5 { padding: 30px !important; } } /* ---------- Sizing Utilities ---------- */ .h-100 { height: 100% !important; } .w-100 { width: 100% !important; } .min-vh-100 { min-height: 100vh !important; } @media (min-width: 992px) { .h-md-100 { height: 100% !important; } } /* ---------- Position Utilities ---------- */ .position-relative { position: relative !important; } .position-absolute { position: absolute !important; } /* ---------- Border & Radius Utilities ---------- */ .border-0 { border: none !important; } .rounded { border-radius: 4px !important; } .rounded-0 { border-radius: 0 !important; } .rounded-2 { border-radius: 6px !important; } .rounded-3 { border-radius: 8px !important; } .rounded-pill { border-radius: 50rem !important; } /* ---------- Misc Utilities ---------- */ .text-decoration-none { text-decoration: none !important; } .object-fit-cover { object-fit: cover !important; } .pos133 { top: 0 !important; position: relative; } /* ============================================================ UNIFIED SECTION SPACING SYSTEM Target: 60px top/bottom, 40px left/right (desktop) 40px top/bottom, 16px left/right (mobile) ============================================================ */ /* Every major section gets equal breathing room */ .section-wrap { padding: 60px 40px; } /* Full-bleed sections (bg image/colour) keep vertical pad only */ .section-wrap--fullbleed { padding-top: 60px; padding-bottom: 60px; } /* Shared inner container for consistent horizontal bounds */ .section-inner { max-width: 1280px; margin-left: auto; margin-right: auto; } /* Section heading — consistent bottom gap */ .section-title { text-align: center; margin-bottom: 40px; } .section-title h2 { margin-bottom: 10px; color: #2c7ecb; } .section-title p { color: #6c7a8d; font-size: var(--fs-body); margin-bottom: 0; } @media (max-width: 991px) { .section-wrap { padding: 50px 24px; } } @media (max-width: 767px) { .section-wrap { padding: 40px 16px; } .section-wrap--fullbleed { padding-top: 40px; padding-bottom: 40px; } } .geometric-texture { animation: textureMove 25s ease-in-out infinite; background: linear-gradient(135deg, #f0f4ff 25%, #e8f0fe 50%, #f0f4ff 75%); background-size: 200% 200%; } @keyframes textureMove { 0%,100% { background-position: 0 0, 0 0, 0 0; } 25% { background-position: 50px 25px, 0 0, 0 0; } 50% { background-position: 100px 50px, 0 0, 0 0; } 75% { background-position: 150px 25px, 0 0, 0 0; } } .glass-card { backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 8px 32px rgb(44 126 203 / 30%); border-radius: 8px; overflow: hidden; } .geometric-texture .both-card-miami { align-items: center; justify-content: center; display: flex; flex-wrap: wrap; } .image-container { position: relative; overflow: hidden; min-height: 420px; max-height: 420px; display: flex; align-items: center; justify-content: center; } .image-container img { width: 100%; height: 100%; object-fit: cover; display: block; } .content-section { padding: 3rem; display: flex; flex-direction: column; justify-content: center; animation: fadeInUp 1s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .main-title { font-size: var(--fs-h2) !important; font-weight: var(--fw-bold); color: #2c7ecb; margin-bottom: 1.2rem; line-height: var(--lh-heading); text-align: center; } .gradient-text { background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } h5.card-title { font-size: var(--fs-h5) !important; font-weight: var(--fw-semi); } /* ============================================================ HISTORY SECTION (Section 4) ============================================================ */ .history-section { width: 100%; background: #f8f8f9; text-align: center; } .history-content { max-width: 90%; margin: 0 auto; text-align: left; } .history-title { font-size: var(--fs-h2) !important; color: #2c7ecb; margin-bottom: 24px; font-weight: var(--fw-bold); text-align: center; } .history-text { font-size: var(--fs-body); line-height: var(--lh-body); color: #4a5568; margin-bottom: 16px; } /* ============================================================ WAIT TIME SECTION (Section 5) ============================================================ */ .parking-back { background: linear-gradient(177deg, rgb(44 126 203 / 76%), rgb(1 90 156) 99.52%), url('https://images.unsplash.com/photo-1530521954074-e64f6810b32d?w=1400&q=80'), #d3d3d3 50% / cover no-repeat; background-position: 50%; background-size: cover; padding-bottom: 88px; padding-top: 88px; background-attachment: fixed; position: relative; } .border-bottom-sss { border-bottom: 1px solid; margin-bottom: 0; } .wait-table-scroll { max-height: 478px; overflow-y: auto; } .table-sticky-head thead { position: sticky; top: 0; z-index: 1; } /* Wait-time summary cards */ .wait-stat-card { border-radius: 8px; padding: 20px 16px; background: rgba(255,255,255,0.95); box-shadow: 0 4px 18px rgba(0,0,0,0.12); text-align: center; margin-bottom: 20px; } /* Table borders match reference */ tbody, td, tfoot, th, thead, tr { border-color: #2c7ecb; border: 1px solid; } /* ============================================================ IMPORTANT INSIGHTS (Section 6) ============================================================ */ .feature-card { position: relative; overflow: hidden; color: white; } .feature-card img { width: 100%; height: auto; } .myimage3 { position: relative; overflow: hidden; } .myimage3 img { width: 100%; height: 326px !important; object-fit: cover; display: block; transition: transform 0.3s ease; } .myimage3:hover img { transform: scale(1.06); } .helpful-font { display: block; width: 100%; padding: 20px; text-decoration: none; color: #BA0C2F !important; font-weight: bold; font-size:18px; } .btn-size-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* ============================================================ BUTTONS ============================================================ */ .btn-size { font-size: var(--fs-body); border-radius: 0; padding: 10px 18px; color: #fff; } .btn-custom { border: 1px solid #015a9c; background-color: #015a9c; color: #fff !important; } .btn-custom:hover { background-color: #2c7ecb; color: #fff !important; } /* btn-default = outline variant */ .btn-default { border: 1px solid #015a9c; background-color: transparent; color: #015a9c !important; } .btn-default:hover { background-color: #015a9c; color: #fff !important; } .btn-mysuccess { background: #015a9c; border: 2px solid #ffffff !important; color: #ffffff !important; } .btn-mysuccess:hover { background: #2c7ecb; border: 2px solid #ffffff; color: #ffffff !important; } /* ============================================================ FAQ SECTION (Section 8) ============================================================ */ .faq-container { max-width: 900px; margin: 0 auto; } .faq-header { text-align: center; /* margin-bottom: 50px; */ padding: 10px 0; } .faq-title { font-size: var(--fs-h2) !important; font-weight: var(--fw-bold); color: #000; margin-bottom: 15px; position: relative; text-align: center; color:#2c7ecb; } .faq-subtitle { font-size: var(--fs-body); color: #4a5568; max-width: 600px; margin: 0 auto; padding: 0 10px; line-height: var(--lh-body); } .faq-list { display: flex; flex-direction: column; gap: 15px; } .faq-item { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: all 0.3s ease; } .faq-item:hover { box-shadow: 0 6px 12px rgba(0,0,0,0.1); } .faq-question { width: 100%; padding: 18px 24px; text-align: left; background-color: #2c7ecb; border: none; font-size: var(--fs-body); font-weight: var(--fw-semi); color: #fff; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; font-family: var(--font-main); line-height: var(--lh-heading); } .faq-question:hover{ color: #2c7ecb; } .faq-question:hover .faq-icon{ color: #2c7ecb; } .faq-icon { font-size: 1.2rem; color: #fff; transition: transform 0.3s ease; flex-shrink: 0; margin-left: 15px; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: #f7fafc; } .faq-answer-content { padding: 15px 25px 20px; color: #4a5568; line-height: 1.6; } .faq-item.is-open .faq-answer { max-height: 500px; } .faq-item.is-open .faq-icon { transform: rotate(45deg); } /* ============================================================ CTA / HELP BANNER (Section 9) ============================================================ */ .banner766 { height: 24em; background: linear-gradient(135deg, rgba(1,60,120,0.92), rgba(29,104,172,0.88)), url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=1600&q=80') center / cover no-repeat; background-attachment: fixed; display: flex; align-items: center; justify-content: center; } .help-width { width: 60%; } .help-width .text-light{ color: #fff; } /* ============================================================ BLOG SECTION (Section 10) — Redesigned ============================================================ */ /* ── Section wrapper ── */ #blogSection { /* spacing handled by .section-wrap */ display:none!important; } /* ── Section heading accent line ── */ .blog-section-heading { position: relative; margin-bottom: 8px; color:#2c7ecb; margin:15px 0; } /* ── Featured (left) card ── */ .blog-featured-card { position: relative; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.10); height: 100%; display: flex; flex-direction: column; transition: box-shadow 0.3s ease, transform 0.3s ease; } .blog-featured-card:hover { box-shadow: 0 10px 36px rgba(186,12,47,0.15); transform: translateY(-4px); } .blog-featured-card .blog-feat-img-wrap { position: relative; overflow: hidden; height: 260px; flex-shrink: 0; } .blog-featured-card .blog-feat-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .blog-featured-card:hover .blog-feat-img-wrap img { transform: scale(1.05); } /* Red top accent stripe */ .blog-featured-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #BA0C2F, #2c7ecb); z-index: 2; } .blog-featured-card .blog-feat-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; } .blog-feat-category { display: inline-block; background: #BA0C2F; color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 3px; margin-bottom: 12px; width:fit-content; } .blog-featured-card .blog-feat-title { font-size: var(--fs-h3) !important; font-weight: var(--fw-bold); color: #1a2332; line-height: var(--lh-heading); margin-bottom: 10px; } .blog-featured-card .blog-feat-excerpt { font-size: var(--fs-body); color: #6c7a8d; line-height: var(--lh-body); flex: 1; margin-bottom: 16px; } .blog-feat-meta { display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); color: #6c7a8d; border-top: 1px solid #eef0f4; padding-top: 12px; margin-top: auto; } .blog-feat-meta .meta-date { display: flex; align-items: center; gap: 5px; } .blog-read-link { margin-left: auto; font-size: var(--fs-small); font-weight: var(--fw-bold); color: #2c7ecb; text-decoration: none; display: flex; align-items: center; gap: 4px; transition: color 0.2s; } .blog-read-link:hover { color: #BA0C2F; } /* ── Secondary (right) cards ── */ .blog-secondary-card { display: flex; align-items: stretch; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.08); margin-bottom: 16px; transition: box-shadow 0.25s ease, transform 0.25s ease; position: relative; border-left: 3px solid transparent; } .blog-secondary-card:hover { box-shadow: 0 6px 24px rgba(44,126,203,0.16); transform: translateY(-3px); border-left-color: #2c7ecb; } .blog-secondary-card .blog-thumb { width: 130px; min-width: 130px; flex-shrink: 0; overflow: hidden; } .blog-secondary-card .blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .blog-secondary-card:hover .blog-thumb img { transform: scale(1.07); } .blog-secondary-card .card-body { padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; } .blog-secondary-card .card-title { font-size: var(--fs-small) !important; font-weight: var(--fw-bold); margin-bottom: 5px; line-height: 1.35; color: #1a2332; } .blog-secondary-card .blog-excerpt { font-size: var(--fs-small); color: #6c7a8d; margin-bottom: 8px; line-height: 1.55; } .blog-badge-date { display: inline-flex; align-items: center; gap: 4px; background: #f4f7fb; color: #2c7ecb; font-size: var(--fs-xs); font-weight: var(--fw-semi); padding: 2px 8px; border-radius: 3px; border: 1px solid #dde3ea; max-width: fit-content; } /* ── "Read More" button area ── */ .blog-readmore-wrap { padding: 0 40px 60px; } @media (max-width: 991px) { .blog-readmore-wrap { padding: 0 24px 50px; } } @media (max-width: 767px) { .blog-readmore-wrap { padding: 0 16px 40px; } } .badge.theme-bg { max-width: fit-content; } /* ── Responsive overrides for blog ── */ @media (max-width: 767px) { .blog-featured-card .blog-feat-img-wrap { height: 200px; } .blog-secondary-card .blog-thumb { width: 100px; min-width: 100px; } } /* ============================================================ MISC / SHARED ============================================================ */ .arrow { display: inline-block; transition: transform 0.2s ease; } a:hover .arrow { transform: translateX(4px); } .margin-dine { margin-bottom: 20px; } body .card:not(.rounded) { border-radius: 0 !important; } /* ============================================================ RESPONSIVE OVERRIDES ============================================================ */ @media (max-width: 767px) { .image-container { min-height: 400px; height: auto; } .content-section { padding: 1.5rem; } .history-section { padding: 30px 10px; } .myimage3 img { height: 184px !important; } .mob-button { display: inline-block; text-align: center; margin-bottom: 10px; width: 100%; } .parking-back { padding-top: 55px !important; background-attachment: scroll; } .banner766 { background-attachment: scroll; height: auto; min-height: 260px; } .help-width { width: 100%; } .faq-list { padding: 0 10px; } .faq-question { padding: 14px 18px; } } @media (max-width: 991.98px) { .image-container { min-height: 400px; } .content-section { padding: 2rem; } } /* ── Responsive: ≤767px (mobile) ── */ @media (max-width: 767px) { } /* ── Banner Section ─────────────────────────────────────── */ .banner-section { position: relative; padding: 70px 0; min-height: 520px; display: flex; align-items: center; overflow: hidden; background: linear-gradient( 135deg, rgba(1, 35, 70, 0.88) 0%, rgba(1, 90, 156, 0.72) 55%, rgba(1, 90, 156, 0.40) 100% ), url('https://media.istockphoto.com/id/466981370/photo/passengers-rush-staircase-in-hong-kong-international-airport-china-asia.jpg?s=612x612&w=0&k=20&c=MWNf1AiWOUrFqmAuWIyRoZ4Yh4_U2moyYAUInR81XSw=') center center / cover no-repeat; } /* Subtle animated shimmer overlay */ .banner-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 40%, rgba(255,255,255,.04) 50%, transparent 60% ); background-size: 200% 100%; animation: shimmer 6s ease-in-out infinite; pointer-events: none; } @keyframes shimmer { 0%, 100% { background-position: -100% 0; } 50% { background-position: 200% 0; } } .banner-section .container-fluid { position: relative; z-index: 2; padding-left: 30px; padding-right: 30px; max-width: 1280px; margin: 0 auto; } /* ── Right column headline (optional) ──────────────────── */ .banner-tagline { color: var(--white); padding: 20px 0 20px 30px; animation: fadeUp .6s ease both; } @keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } .banner-tagline .eyebrow { font-size: var(--fs-xs); letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 12px; } .banner-tagline h1 { font-size: var(--fs-h1) !important; font-weight: var(--fw-bold); line-height: 1.1; margin: 0 0 16px; color: var(--white); } .banner-tagline h1 span { color: var(--alt-navy); } .banner-tagline p { font-size: var(--fs-body); color: rgba(255,255,255,.75); line-height: var(--lh-body); max-width: 380px; } /* ── Stats Row ──────────────────────────────────────────── */ .banner-stats { display: flex; gap: 28px; margin-top: 32px; flex-wrap: wrap; } .stat-item { text-align: center; } .stat-item .stat-num { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--white); line-height: 1; } .stat-item .stat-label { font-size: var(--fs-xs); letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 4px; } .stat-divider { width: 1px; background: rgba(255,255,255,.2); align-self: stretch; } /* ── Search Card ────────────────────────────────────────── */ .search-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; animation: fadeUp .5s ease both; } /* Card Header */ .card-header-bar { background: linear-gradient(90deg, var(--primary-dark), var(--primary)); padding: 16px 22px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .card-header-bar h2 { font-family: var(--font-display); font-size: var(--fs-h3) !important; font-weight: var(--fw-bold); color: var(--white); margin: 0; letter-spacing: .3px; display: flex; align-items: center; gap: 8px; } .card-header-bar h2 i { font-size: 18px; opacity: .85; } .weather-badge { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2); border-radius: 50px; padding: 6px 14px; backdrop-filter: blur(4px); } .weather-badge .wi { font-size: 20px; } .weather-badge .weather-text { font-size: var(--fs-small); font-weight: var(--fw-semi); color: var(--white); white-space: nowrap; } /* Card Body */ .card-body-inner { padding: 20px 22px; } /* ── Tabs ───────────────────────────────────────────────── */ .flight-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 18px; } .flight-tab-btn { flex: 1; background: none; border: none; padding: 11px 0; font-family: var(--font-main); font-size: var(--fs-small); font-weight: var(--fw-semi); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .2s, border-color .2s; letter-spacing: .3px; } .flight-tab-btn i { font-size: 15px; } .flight-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); } .flight-tab-btn:hover:not(.active) { color: var(--accent); border-bottom-color: var(--accent); } /* ── Tab Panes ──────────────────────────────────────────── */ .tab-pane { display: none; } .tab-pane.active { display: block; animation: fadeIn .25s ease; } @keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } /* ── Search Bar ─────────────────────────────────────────── */ .search-wrap { margin-top: 16px; } /* Reset any WordPress theme styles on the form */ .flight-search form, .flight-search label { display: block; width: 100%; margin: 0; padding: 0; } .search-input-group { display: flex; flex-direction: row; align-items: stretch; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; transition: border-color .2s, box-shadow .2s; width: 100%; } .search-input-group:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(1,90,156,.12); } .search-input-group input[type="search"], .search-input-group input[type="text"] { flex: 1; min-width: 0; border: none !important; outline: none !important; box-shadow: none !important; padding: 11px 14px; font-size: 14px; color: var(--text-dark); background: transparent; border-radius: 0; height: auto; width: auto; } .search-input-group input::placeholder { color: #aab4c0; } .search-input-group button[type="submit"], .search-input-group button { flex-shrink: 0; background: var(--primary) !important; border: none !important; padding: 0 18px !important; cursor: pointer; display: flex !important; align-items: center; justify-content: center; gap: 6px; color: var(--white) !important; font-size: 13px; font-weight: 600; transition: background .2s; white-space: nowrap; border-radius: 0 !important; height: auto; width: auto; } .search-input-group button:hover { background: var(--primary-dark) !important; } /* ── View All Link ──────────────────────────────────────── */ .view-all-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--primary); font-size: var(--fs-small); font-weight: var(--fw-semi); text-decoration: none; transition: gap .2s, color .2s; } .view-all-link:hover { color: var(--accent); gap: 10px; text-decoration: none; } .view-all-link i { font-size: 12px; } /* ── Responsive ─────────────────────────────────────────── */ @media (max-width: 991px) { .banner-section { padding: 50px 0; } .banner-tagline { padding: 30px 0 0 0; } } @media (max-width: 767px) { .banner-section { padding: 40px 0; min-height: auto; } .banner-section .container-fluid { padding-left: 16px; padding-right: 16px; } .banner-tagline { padding: 30px 0 0 0; text-align: center; } .banner-tagline p { max-width: 100%; } .banner-stats { justify-content: center; } .card-header-bar { flex-direction: column; align-items: flex-start; gap: 10px; } /* Hide some table columns on mobile */ .hide-sm { display: none; } .flight-tab-btn { font-size: 13px; padding: 10px 0; } } @media (max-width: 480px) { .card-body-inner { padding: 16px 14px; } } /* Home page css end here */ /* ========================================================================== 1. HERO SECTION ========================================================================== */ .atl-hero { background: linear-gradient( 160deg, rgba(9, 18, 48, 0.95) 0%, rgba(26, 95, 170, 0.88) 55%, rgba(186, 12, 47, 0.15) 100% ), url('/wp-content/uploads/2026/05/atlanta-airport-hero.webp') center / cover no-repeat; min-height: 520px; display: flex; align-items: center; padding: 80px 0 56px; position: relative; overflow: hidden; } /* Subtle animated runway-light line at the bottom */ .atl-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--atl-red), transparent); } /* ── Hero text column ───────────────────────────────── */ .atl-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85); font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; padding: 5px 14px; border-radius: 20px; margin-bottom: 20px; backdrop-filter: blur(6px); } .atl-hero-eyebrow-dot { width: 7px; height: 7px; background: var(--atl-red); border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px var(--atl-red); animation: atl-pulse 2s infinite; } @keyframes atl-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.25); } } .atl-hero-title { font-family: var(--font-primary), sans-serif; color: var(--atl-white); font-size: 46px; font-weight: 700; line-height: 1.1; margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.02em; } .atl-hero-title span { color: var(--atl-red); } .atl-hero-subtitle { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.7; margin: 0 0 32px; max-width: 500px; } /* ── Hero actions ───────────────────────────────────── */ .atl-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; } /* ── Weather Badge ──────────────────────────────────── */ .atl-weather-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20); color: var(--atl-white); padding: 8px 16px; border-radius: 24px; font-size: 13px; font-weight: 500; backdrop-filter: blur(6px); letter-spacing: 0.01em; } .atl-weather-badge svg { width: 18px; height: 18px; fill: #93C5FD; flex-shrink: 0; } /* ── Trust strip below hero title ───────────────────── */ .atl-hero-trust { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .atl-hero-trust-item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.65); font-size: 13px; } .atl-hero-trust-item svg { width: 16px; height: 16px; fill: var(--atl-red); flex-shrink: 0; } .atl-hero-divider { color: rgba(255,255,255,.2); font-size: 18px; } /* ========================================================================== 2. FLIGHT SEARCH WIDGET ========================================================================== */ .atl-search-widget { background: var(--atl-white); border-radius: var(--atl-radius-lg); overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); } /* ── Tabs ──────────────────────────────────────────── */ .atl-search-tabs { display: flex; background: #F8FAFC; border-bottom: 1px solid var(--atl-border); } .atl-search-tab-btn { flex: 1; padding: 14px 18px; background: transparent; border: none; border-bottom: 3px solid transparent; color: var(--atl-muted); font-family: var(--font-secondary), sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; cursor: pointer; transition: var(--atl-transition); display: flex; align-items: center; justify-content: center; gap: 7px; } .atl-search-tab-btn svg { width: 16px; height: 16px; fill: var(--atl-muted); transition: fill 0.2s; flex-shrink: 0; } .atl-search-tab-btn.atl-active, .atl-search-tab-btn:hover { background: var(--atl-white); border-bottom-color: var(--atl-navy); color: var(--atl-navy); } .atl-search-tab-btn.atl-active svg, .atl-search-tab-btn:hover svg { fill: var(--atl-navy); } /* ── Search Body ───────────────────────────────────── */ .atl-search-body { padding: 24px; } .atl-search-body .atl-input-group { display: flex; gap: 10px; } .atl-search-body .zak-search-form { display: flex !important; gap: 10px !important; width: 100% !important; background: transparent !important; } .atl-search-body .zak-search-field-label { flex: 1 !important; margin: 0 !important; background: transparent !important; } .atl-search-body .zak-icon--search { display: none !important; } .atl-search-body .zak-search-field { width: 100% !important; background: #F8FAFC !important; border: 1.5px solid var(--atl-border) !important; border-radius: var(--atl-radius) !important; padding: 12px 16px !important; font-size: 15px !important; font-family: var(--font-secondary), sans-serif !important; color: var(--atl-text) !important; outline: none !important; box-shadow: none !important; transition: border-color 0.2s, background 0.2s !important; } .atl-search-body .zak-search-field:focus { border-color: var(--atl-navy) !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(44,126,203,.10) !important; } .atl-search-body .zak-search-field::placeholder { color: var(--atl-muted) !important; } .atl-search-body .zak-icon--close { display: none !important; } .atl-search-body .zak-search-container { background: transparent !important; padding: 0 !important; position: static !important; width: 100%; } .atl-search-body .zak-search-submit { background: var(--atl-navy) !important; color: var(--atl-white) !important; border: none !important; padding: 12px 22px !important; border-radius: var(--atl-radius) !important; font-family: var(--font-secondary), sans-serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; cursor: pointer !important; white-space: nowrap !important; width: auto !important; height: auto !important; transition: background 0.2s !important; display: block !important; } .atl-search-body .zak-search-submit:hover { background: var(--atl-navy-dark) !important; } /* ── Search Footer ─────────────────────────────────── */ .atl-search-footer { padding: 10px 24px 16px; border-top: 1px solid var(--atl-border); background: #FAFBFD; } .atl-view-all-link { font-size: 13px; color: var(--atl-navy); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: var(--atl-transition); } .atl-view-all-link svg { width: 16px; height: 16px; fill: var(--atl-navy); transition: transform 0.2s; flex-shrink: 0; } .atl-view-all-link:hover { color: var(--atl-navy); text-decoration: none; } .atl-view-all-link:hover svg { fill: var(--atl-navy); transform: translateX(3px); } /* ========================================================================== 3. QUICK SERVICES BAR ========================================================================== */ .atl-quick-services { background: var(--atl-dark); padding: 0; border-bottom: 1px solid rgba(255,255,255,.06); } .atl-qs-container { padding-left: 0; padding-right: 0; } .atl-qs-grid { display: flex; flex-wrap: wrap; } .atl-qs-item { flex: 1; min-width: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px 14px; text-decoration: none; color: rgba(255,255,255,.75); border-right: 1px solid rgba(255,255,255,.07); transition: var(--atl-transition); text-align: center; position: relative; } .atl-qs-item::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scaleX(0); width: 40%; height: 2px; background: var(--atl-red); transition: transform 0.22s ease; } .atl-qs-item:last-child { border-right: none; } .atl-qs-item:hover { background: rgba(255,255,255,.05); color: var(--atl-white); text-decoration: none; } .atl-qs-item:hover::after { transform: translateX(-50%) scaleX(1); } .atl-qs-icon { width: 38px; height: 38px; fill: var(--atl-red); margin-bottom: 10px; transition: transform 0.2s; flex-shrink: 0; } .atl-qs-item:hover .atl-qs-icon { transform: translateY(-3px); } .atl-qs-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.4; } /* ========================================================================== 4. SECTION COMMON STYLES ========================================================================== */ .atl-section { padding: var(--atl-section-py) 0; } .atl-section-light { background: var(--atl-light); } .atl-section-dark { background: var(--atl-dark); } .atl-section-navy { background: var(--atl-navy); } /* ── Section header block ──────────────────────────── */ .atl-section-header { margin-bottom: 48px; } .atl-section-header--center { text-align: center; } .atl-section-label { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--atl-red); margin-bottom: 10px; } .atl-section-title { font-family: var(--font-primary), sans-serif; font-size: 32px; font-weight: 600; color: var(--atl-navy); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 14px; line-height: 1.15; } .atl-section-subtitle { font-size: 16px; color: var(--atl-text-mid); margin: 0; line-height: 1.7; max-width: 580px; } .atl-section-header--center .atl-section-subtitle { margin-left: auto; margin-right: auto; } /* ── Accent rule ───────────────────────────────────── */ .atl-rule { width: 40px; height: 3px; background: var(--atl-red); margin: 0 0 18px; border: none; display: block; } .atl-rule--center { margin-left: auto; margin-right: auto; } /* Deprecated aliases kept for backward compat */ .atl-divider { width: 44px; height: 3px; background: var(--atl-red); margin: 10px 0 20px; display: block; } .atl-divider-center { margin-left: auto; margin-right: auto; } /* ── Text helpers ──────────────────────────────────── */ .atl-text-center { text-align: center; } .atl-mt-24 { margin-top: 24px; } .atl-mt-32 { margin-top: 32px; } .atl-mb-0 { margin-bottom: 0; } /* ========================================================================== 5. BUTTONS ========================================================================== */ .atl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: var(--atl-radius); font-family: var(--font-secondary), sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; letter-spacing: 0.05em; text-transform: uppercase; transition: var(--atl-transition); cursor: pointer; border: none; line-height: 1; } /* Primary — Navy */ .atl-btn-primary { background: var(--atl-navy); color: var(--atl-white); box-shadow: 0 2px 10px rgba(44,126,203,.30); } .atl-btn-primary:hover { background: var(--atl-navy-dark); color: var(--atl-white); text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(44,126,203,.35); } .atl-btn-primary svg { width: 17px; height: 17px; fill: var(--atl-white); flex-shrink: 0; } /* Red accent */ .atl-btn-red { background: var(--atl-red); color: var(--atl-white); box-shadow: 0 2px 10px rgba(186,12,47,.30); } .atl-btn-red:hover { background: var(--atl-red-dark); color: var(--atl-white); text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(186,12,47,.35); } .atl-btn-red svg { width: 17px; height: 17px; fill: var(--atl-white); flex-shrink: 0; } /* Outline navy */ .atl-btn-outline-navy { border: 2px solid var(--atl-navy); color: var(--atl-navy); background: transparent; } .atl-btn-outline-navy:hover { background: var(--atl-navy); color: var(--atl-white); text-decoration: none; transform: translateY(-1px); } /* Outline white (for dark backgrounds) */ .atl-btn-outline-white { border: 2px solid rgba(255,255,255,.6); color: var(--atl-white); background: transparent; } .atl-btn-outline-white:hover { background: rgba(255,255,255,.12); border-color: var(--atl-white); color: var(--atl-white); text-decoration: none; } /* Size modifiers */ .atl-btn--sm { font-size: 12px; padding: 9px 18px; } .atl-btn--lg { font-size: 15px; padding: 15px 34px; } .atl-btn--nowrap { white-space: nowrap; flex-shrink: 0; } /* ========================================================================== 6. ABOUT SECTION ========================================================================== */ .atl-about-row { display: flex; flex-wrap: wrap; align-items: center; flex-direction:row-reverse; gap: 0; } /* ── Image side ────────────────────────────────────── */ .atl-about-img-wrap { position: relative; } .atl-about-img-wrap img { width: 100%; border-radius: var(--atl-radius-lg); object-fit: cover; height: 400px; display: block; box-shadow: var(--atl-shadow-lg); } /* Decorative corner accent */ .atl-about-img-wrap::before { content: ''; position: absolute; top: -12px; left: -12px; width: 80px; height: 80px; border-top: 4px solid var(--atl-red); border-left: 4px solid var(--atl-red); border-radius: 2px 0 0 0; z-index: 1; } .atl-about-img-badge { position: absolute; bottom: -20px; right: -10px; background: var(--atl-navy); color: var(--atl-white); text-align: center; padding: 18px 22px; border-radius: var(--atl-radius); font-family: var(--font-primary), sans-serif; box-shadow: 0 8px 30px rgba(44,126,203,.40); border-bottom: 3px solid var(--atl-red); } .atl-about-img-badge .atl-badge-num { font-size: 34px; font-weight: 700; display: block; line-height: 1; color: var(--atl-white); } .atl-about-img-badge .atl-badge-text { font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; margin-top: 4px; display: block; } /* ── Text side ─────────────────────────────────────── */ .atl-about-text { padding-right: 50px; } .atl-about-text p { font-size: 16px; line-height: 1.85; color: var(--atl-text-mid); margin-bottom: 18px; } /* ── Stat cards ────────────────────────────────────── */ .atl-about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 28px 0; } .atl-stat-card { background: var(--atl-white); border: 1px solid var(--atl-border); border-left: 4px solid var(--atl-navy); padding: 18px 20px; border-radius: var(--atl-radius); transition: var(--atl-transition); box-shadow: var(--atl-shadow-sm); } .atl-stat-card:hover { border-left-color: var(--atl-red); box-shadow: var(--atl-shadow-md); transform: translateY(-2px); } .atl-stat-card .atl-stat-num { font-family: var(--font-primary), sans-serif; font-size: 28px; font-weight: 700; color: var(--atl-navy); display: block; line-height: 1; margin-bottom: 4px; } .atl-stat-card .atl-stat-label { font-size: 12px; color: var(--atl-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } /* ========================================================================== 7. WAIT TIME SECTION ========================================================================== */ .atl-wait-card { background: var(--atl-white); border-radius: var(--atl-radius-lg); padding: 28px 20px; text-align: center; box-shadow: var(--atl-shadow-md); border-top: 4px solid var(--atl-red); display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; transition: var(--atl-transition); } .atl-wait-card:hover { transform: translateY(-3px); box-shadow: var(--atl-shadow-lg); } .atl-wait-card--blue { border-top-color: var(--atl-navy); } .atl-wait-card--green { border-top-color: var(--atl-green); } .atl-wait-card--purple { border-top-color: var(--atl-purple); } .atl-wait-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .atl-wait-icon svg { width: 100%; height: 100%; } .atl-wait-icon-red { fill: var(--atl-red); } .atl-wait-icon-blue { fill: var(--atl-navy); } .atl-wait-icon-green { fill: var(--atl-green); } .atl-wait-icon-purple { fill: var(--atl-purple); } .atl-wait-card .atl-wait-num { font-family: var(--font-primary), sans-serif; font-size: 38px; font-weight: 700; color: var(--atl-navy); line-height: 1; } .atl-wait-card .atl-wait-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--atl-muted); font-weight: 600; } /* ── TSA Checkpoint Table ──────────────────────────── */ .atl-table-wrap { border-radius: var(--atl-radius-lg); overflow: hidden; box-shadow: var(--atl-shadow-md); } .atl-checkpoint-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--atl-white); } .atl-checkpoint-table thead tr { background: var(--atl-navy); color: var(--atl-white); } .atl-checkpoint-table thead th { padding: 14px 20px; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; text-align: left; } .atl-checkpoint-table tbody tr { border-bottom: 1px solid var(--atl-border); transition: background 0.15s; } .atl-checkpoint-table tbody tr:hover { background: #EEF2FF; } .atl-checkpoint-table tbody tr:nth-child(even) { background: var(--atl-light); } .atl-checkpoint-table tbody tr:nth-child(even):hover { background: #EEF2FF; } .atl-checkpoint-table tbody td { padding: 13px 20px; color: var(--atl-text); } /* ── Status Badges ─────────────────────────────────── */ .atl-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .atl-status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .atl-status-open { background: var(--atl-green-light); color: #065F46; } .atl-status-open::before { background: var(--atl-green); } .atl-status-closed { background: #FEE2E2; color: #991B1B; } .atl-status-closed::before { background: var(--atl-red); } .atl-status-reservation { background: #FEF3C7; color: #78350F; } .atl-status-reservation::before { background: var(--atl-amber); } /* ── Subsection & Description ──────────────────────── */ .atl-subsection-title { font-family: var(--font-primary), sans-serif; font-size: 20px; color: var(--atl-navy); text-transform: uppercase; letter-spacing: 0.04em; margin: 32px 0 16px; display: flex; align-items: center; gap: 8px; } .atl-subsection-title svg { width: 22px; height: 22px; fill: var(--atl-navy); flex-shrink: 0; } /* ========================================================================== 8. SERVICES SECTION (tabs layout) ========================================================================== */ .atl-services-tabs-bar { display: flex; gap: 0; border-bottom: 2px solid var(--atl-border); margin-bottom: 32px; overflow-x: auto; } .atl-services-tab { padding: 12px 22px; background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; font-family: var(--font-secondary), sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--atl-muted); cursor: pointer; white-space: nowrap; transition: var(--atl-transition); } .atl-services-tab.atl-active, .atl-services-tab:hover { color: var(--atl-navy); border-bottom-color: var(--atl-navy); } .atl-services-panel { display: none; } .atl-services-panel.atl-active { display: block; } /* ── Service cards grid ────────────────────────────── */ .atl-service-cards { display: flex; flex-wrap: wrap; gap: 20px; } .atl-service-card { flex: 1; min-width: 200px; background: var(--atl-white); border: 1px solid var(--atl-border); border-radius: var(--atl-radius-lg); padding: 28px 22px; text-decoration: none; color: var(--atl-text); transition: var(--atl-transition); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--atl-shadow-sm); } .atl-service-card:hover { border-color: var(--atl-navy); box-shadow: var(--atl-shadow-md); transform: translateY(-3px); text-decoration: none; color: var(--atl-text); } .atl-service-card-icon { width: 48px; height: 48px; background: var(--atl-light); border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .atl-service-card:hover .atl-service-card-icon { background: rgba(44,126,203,.10); } .atl-service-card-icon svg { width: 26px; height: 26px; fill: var(--atl-navy); flex-shrink: 0; } .atl-service-card-title { font-family: var(--font-primary), sans-serif; font-size: 17px; font-weight: 600; color: var(--atl-navy); text-transform: uppercase; letter-spacing: 0.03em; margin: 0; } .atl-service-card-desc { font-size: 14px; color: var(--atl-text-mid); line-height: 1.6; margin: 0; } .atl-service-card-link { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--atl-red); display: inline-flex; align-items: center; gap: 5px; margin-top: auto; } .atl-service-card-link svg { width: 14px; height: 14px; fill: var(--atl-red); transition: transform 0.2s; } .atl-service-card:hover .atl-service-card-link svg { transform: translateX(3px); } /* ========================================================================== 9. MAP CTA BANNER ========================================================================== */ .atl-map-cta { background: var(--atl-navy); padding: 48px 0; position: relative; overflow: hidden; } /* Subtle runway pattern overlay */ .atl-map-cta::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( -55deg, transparent, transparent 40px, rgba(255,255,255,.015) 40px, rgba(255,255,255,.015) 80px ); pointer-events: none; } .atl-map-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; position: relative; } .atl-map-cta-left { display: flex; align-items: center; gap: 24px; } .atl-map-cta-icon { width: 56px; height: 56px; background: rgba(255,255,255,.10); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .atl-map-cta-icon svg { width: 32px; height: 32px; fill: var(--atl-red); } .atl-map-cta-text h3 { font-family: var(--font-primary), sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--atl-white); margin: 0 0 6px; } .atl-map-cta-text p { font-size: 15px; color: rgba(255,255,255,.65); margin: 0; line-height: 1.6; } /* ========================================================================== 10. FAQ ACCORDION ========================================================================== */ .atl-faq-list { max-width: 820px; margin: 0 auto; } .atl-faq-item { border: 1px solid var(--atl-border); border-radius: var(--atl-radius); margin-bottom: 10px; overflow: hidden; transition: box-shadow 0.2s; background: var(--atl-white); } .atl-faq-item.atl-open { box-shadow: var(--atl-shadow-md); border-color: rgba(44,126,203,.25); } .atl-faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: none; border: none; text-align: left; font-family: var(--font-secondary), sans-serif; font-size: 16px; font-weight: 600; color: var(--atl-text); cursor: pointer; transition: color 0.2s; } .atl-faq-question:hover{ color: var(--atl-navy)!important; } .atl-faq-item.atl-open .atl-faq-question { color: var(--atl-navy); border-bottom: 1px solid var(--atl-border); } .atl-faq-icon { width: 28px; height: 28px; background: var(--atl-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s, transform 0.25s; } .atl-faq-icon svg { width: 14px; height: 14px; fill: var(--atl-navy); } .atl-faq-item.atl-open .atl-faq-icon { background: var(--atl-navy); transform: rotate(45deg); } .atl-faq-item.atl-open .atl-faq-icon svg { fill: var(--atl-white); } .atl-faq-answer { display: none; padding: 18px 22px; font-size: 15px; line-height: 1.75; color: var(--atl-text-mid); } .atl-faq-item.atl-open .atl-faq-answer { display: block; } /* ========================================================================== 11. BLOG CARDS ========================================================================== */ .atl-blog-card { background: var(--atl-white); border: 1px solid var(--atl-border); border-radius: var(--atl-radius-lg); overflow: hidden; transition: var(--atl-transition); height: 100%; display: flex; flex-direction: column; box-shadow: var(--atl-shadow-sm); } .atl-blog-card:hover { box-shadow: var(--atl-shadow-lg); transform: translateY(-4px); border-color: rgba(44,126,203,.20); } a:hover .atl-blog-card { box-shadow: var(--atl-shadow-lg); transform: translateY(-4px); border-color: rgba(44,126,203,.20); } .atl-blog-card-img { position: relative; overflow: hidden; height: 200px; background: var(--atl-light); } .atl-blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .atl-blog-card:hover .atl-blog-card-img img, a:hover .atl-blog-card .atl-blog-card-img img { transform: scale(1.04); } .atl-blog-card-date { position: absolute; top: 14px; left: 14px; background: var(--atl-navy); color: var(--atl-white); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 3px; letter-spacing: 0.05em; text-transform: uppercase; } .atl-blog-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; } .atl-blog-card-body h3 { font-family: var(--font-primary), sans-serif; font-size: 18px; font-weight: 600; color: var(--atl-navy); margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.3; } .atl-blog-card-body p { font-size: 14px; line-height: 1.65; color: var(--atl-text-mid); margin: 0 0 16px; flex: 1; } .atl-blog-read-more { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--atl-red); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; transition: gap 0.2s; } .atl-blog-read-more svg { width: 14px; height: 14px; fill: var(--atl-red); } .atl-blog-read-more:hover { text-decoration: none; color: var(--atl-navy); gap: 10px; } .atl-blog-read-more:hover svg { fill: var(--atl-navy); } /* ========================================================================== 12. WAITING LOT / INFO STRIP ========================================================================== */ .atl-waiting-lot { display: flex; align-items: center; gap: 24px; background: var(--atl-white); border: 1px solid var(--atl-border); border-left: 4px solid var(--atl-amber); border-radius: var(--atl-radius); padding: 20px 24px; box-shadow: var(--atl-shadow-sm); } .atl-waiting-lot-icon { width: 44px; height: 44px; fill: var(--atl-amber); flex-shrink: 0; } .atl-waiting-lot-text h4 { font-family: var(--font-primary), sans-serif; font-size: 16px; text-transform: uppercase; color: var(--atl-navy); margin: 0 0 4px; } .atl-waiting-lot-text p { font-size: 14px; color: var(--atl-text-mid); margin: 0; line-height: 1.5; } /* ========================================================================== 13. MODAL (Newsletter / CTA pop-up) ========================================================================== */ /* .atl-modal-overlay = generic modal used on homepage .atl-overlay = enquiry popup in acf-child.php / child.php Both share identical base styles; JS controls visibility via .atl-open / .atl-overlay-show respectively. */ .atl-modal-overlay, .atl-overlay { position: fixed; inset: 0; background: rgba(10,14,30,.65); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 99999; padding: 20px; } .atl-modal-overlay.atl-open, .atl-overlay.atl-overlay-show { display: flex; } .atl-modal { background: var(--atl-white); border-radius: var(--atl-radius-lg); overflow: hidden; max-width: 680px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; box-shadow: var(--atl-shadow-xl); position: relative; } .atl-modal-left { padding: 44px 36px; display: flex; flex-direction: column; justify-content: center; } .atl-modal-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(186,12,47,.08); color: var(--atl-red); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; padding: 5px 12px; border-radius: 20px; margin-bottom: 18px; width: fit-content; } .atl-modal-headline { font-family: var(--font-primary), sans-serif; font-size: 24px; font-weight: 700; text-transform: uppercase; color: var(--atl-navy); margin: 0 0 8px; } .atl-modal-sub { font-size: 14px; color: var(--atl-text-mid); line-height: 1.6; margin: 0 0 24px; } .atl-modal-services { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 8px; } .atl-modal-services li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--atl-text); font-weight: 500; } .atl-modal-services li svg { /* The checkmark SVG in acf-child.php uses a stroke-based polyline, not a filled path. fill:none + stroke keeps it visible. */ width: 16px; height: 16px; fill: none; stroke: var(--atl-navy); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* Circle wrapper around each checkmark icon */ .atl-check-dot { width: 22px; height: 22px; background: rgba(44, 126, 203, .10); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .atl-modal-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--atl-navy); border-radius: var(--atl-radius); color: var(--atl-white); font-size: 15px; font-weight: 700; font-family: var(--font-secondary), sans-serif; letter-spacing: 0.04em; text-transform: uppercase; border: none; padding: 15px 28px; cursor: pointer; transition: var(--atl-transition); text-decoration: none; box-shadow: 0 4px 16px rgba(44,126,203,.30); } .atl-modal-cta-btn:hover { background: var(--atl-navy-dark); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(44,126,203,.40); color: var(--atl-white); text-decoration: none; } .atl-modal-cta-btn svg { width: 18px; height: 18px; fill: var(--atl-white); flex-shrink: 0; } .atl-modal-disclaimer { margin-top: 14px; font-size: 11px; color: var(--atl-muted); line-height: 1.5; } .atl-modal-right { position: relative; overflow: hidden; background: var(--atl-navy); min-height: 280px; } .atl-modal-right img { width: 100%; height: 100%; object-fit: cover; display: block; } .atl-modal-close-btn { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.10); backdrop-filter: blur(6px); color: var(--atl-white); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: var(--atl-transition); line-height: 1; } .atl-modal-close-btn:hover { background: var(--atl-red); transform: rotate(90deg); } /* ========================================================================== 14. FOOTER ========================================================================== */ footer#colophon.site-footer { background-color: var(--atl-navy) !important; background-image: none; padding: 0px 0 0 0; position: relative; margin-bottom:50px; } /* Subtle top border */ footer#colophon.site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--atl-navy), var(--atl-red), var(--atl-navy)); display: block !important; } footer#colophon.site-footer::after { display: none; } .pre-footer { padding-bottom: 48px; display:none; } .menu-head { font-family: var(--font-primary), sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.10em; color: var(--atl-white) !important; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid rgba(255,255,255,.12); } .menu-new ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } .menu-new ul li { margin-bottom: 10px; } .menu-new ul li a { color: rgba(255,255,255,.75) !important; font-size: 14px; font-family: var(--font-secondary), sans-serif; font-weight: 400; line-height: 1.5; text-decoration: none !important; transition: color 0.2s; } .menu-new ul li a:hover { color: var(--atl-white) !important; text-decoration: none !important; } .menu-new ul.children { margin-top: 10px !important; } /* Disclaimer bar */ .disc__main { background-color: var(--atl-red); } .disc__main .container { padding: 20px 15px !important; border-top: 1px solid rgba(255,255,255,.10) !important; } .disc__main p { color: rgba(255,255,255) !important; font-size: 12px !important; line-height: 1.7; margin: 0 !important; } .disc__main p strong { color: rgba(255,255,255) !important; } /* Copyright bar */ .site-info { background-color: var(--atl-red); } .site-info .container { border-top: 1px solid rgba(255,255,255,.08) !important; padding-top: 20px !important; padding-bottom: 20px !important; } .site-info p { color: rgba(255,255,255,.50) !important; font-size: 13px !important; margin: 0 !important; line-height: 1.8; text-align: center; } /* Bottom footer nav */ ul.menu-new-footer { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-wrap: wrap; gap: 14px; justify-content: flex-end !important; } ul.menu-new-footer li a { color: rgba(255,255,255,.50) !important; font-size: 13px; font-family: var(--font-secondary), sans-serif; text-decoration: none !important; transition: color 0.2s; } ul.menu-new-footer li a:hover { color: var(--atl-white) !important; } /* ========================================================================== 15. INNER PAGE (child pages) styles ========================================================================== */ /* ── Inner Banner ────────────────────────────────────────────────────────── Two-layer treatment: solid navy base + subtle diagonal stripe overlay. A red accent line at the bottom ties the page into the brand palette. The H1 gets a short left-border rule to anchor the title visually. ── */ .inner-wrapper { padding: 48px 0 40px; background: var(--atl-navy); position: relative; overflow: hidden; background-repeat:no-repeat!important; background-size:cover!important; background-position:center, center!important; } /* Diagonal stripe texture — adds depth without competing with content */ .inner-wrapper::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( -55deg, transparent, transparent 40px, rgba(255, 255, 255, 0.028) 40px, rgba(255, 255, 255, 0.028) 80px ); pointer-events: none; } /* Fading red bottom border — directional brand energy */ .inner-wrapper::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: linear-gradient( 90deg, var(--atl-red) 0%, rgba(186, 12, 47, 0.15) 100% ); } /* Title */ .inner-title h1 { font-family: var(--font-primary), sans-serif; font-size: 30px; font-weight: 700; /* text-transform: uppercase; */ color: var(--atl-white); margin: 0 0 12px; letter-spacing: 0.03em; line-height: 1.2; padding-left: 16px; border-left: 4px solid var(--atl-red); position: relative; } .inner-title p { color: rgba(255, 255, 255, .65); font-size: 15px; margin: 8px 0 0; padding-left: 20px; } /* ── Yoast breadcrumbs inside .brcr on dark banner ──────────────────────── */ .inner-wrapper .brcr, .child_banner .brcr { margin-top: 4px; padding-left: 20px; } .inner-wrapper .brcr #breadcrumbs, .inner-wrapper .brcr p, .child_banner .brcr #breadcrumbs, .child_banner .brcr p { font-size: 13px; color: rgba(255, 255, 255, .52); margin: 0; line-height: 1.6; } .inner-wrapper .brcr #breadcrumbs a, .inner-wrapper .brcr p a, .child_banner .brcr #breadcrumbs a, .child_banner .brcr p a { color: rgba(255, 255, 255, 1); text-decoration: none; transition: color 0.2s; } .inner-wrapper .brcr #breadcrumbs a:hover, .inner-wrapper .brcr p a:hover, .child_banner .brcr #breadcrumbs a:hover, .child_banner .brcr p a:hover { color: var(--atl-navy); } /* Yoast separator character */ .inner-wrapper .brcr #breadcrumbs span.breadcrumb_last, .child_banner .brcr #breadcrumbs span.breadcrumb_last { color: rgba(255, 255, 255, 1); } /* Legacy .breadcrumb-atl class — kept for backward compatibility */ .breadcrumb-atl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 10px; flex-wrap: wrap; } .breadcrumb-atl a { color: rgba(255,255,255,.70); text-decoration: none; } .breadcrumb-atl a:hover { color: var(--atl-white); } .breadcrumb-atl span { color: var(--atl-red); } .inner-page { padding: 40px 0 60px; } .child-banner img { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--atl-radius-lg); margin-bottom: 28px; box-shadow: var(--atl-shadow-md); } .child-content { font-size: 16px; line-height: 1.85; color: var(--atl-text-mid); } .child-content h2 { font-family: var(--font-primary), sans-serif; font-size: 26px; font-weight: 600; color: var(--atl-navy); /* text-transform: uppercase; */ letter-spacing: 0.03em; margin: 36px 0 14px; line-height:1.5; } .child-content h3 { font-family: var(--font-primary), sans-serif; font-size: 20px; font-weight: 600; color: var(--atl-navy); /* text-transform: uppercase; */ letter-spacing: 0.03em; margin: 28px 0 12px; } .child-content h4 { font-size: 16px; font-weight: 700; color: var(--atl-text); margin: 22px 0 10px; } .child-content ul, .child-content ol { padding-left: 22px; margin-bottom: 18px; } .child-content li { margin-bottom: 8px; } .child-content table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 24px 0; box-shadow: var(--atl-shadow-sm); border-radius: var(--atl-radius); overflow: hidden; } .child-content table th { background: var(--atl-navy); color: var(--atl-white); padding: 12px 16px; font-weight: 700; font-size: 12px; /* text-transform: uppercase; */ letter-spacing: 0.07em; text-align: left; } .child-content table td { padding: 11px 16px; border-bottom: 1px solid var(--atl-border); } .child-content table tr:nth-child(even) td { background: var(--atl-light); } /* Sidebar */ .sidebar { padding-left: 24px; } a.side-a { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--atl-border); border-radius: var(--atl-radius); margin-bottom: 12px; text-decoration: none; background: var(--atl-white); transition: var(--atl-transition); box-shadow: var(--atl-shadow-sm); } a.side-a:hover { border-color: var(--atl-navy); box-shadow: var(--atl-shadow-md); text-decoration: none; transform: translateX(2px); } a.side-a img { width: 62px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } a.side-a p { font-size: 13px; color: var(--atl-text); margin: 0; line-height: 1.4; font-weight: 600; } /* ========================================================================== 16. GALLERY (desktop grid / mobile slider) ========================================================================== */ .custom-gallery { height: 380px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; border-radius: var(--atl-radius-lg); overflow: hidden; } .custom-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .custom-gallery img:hover { transform: scale(1.04); } /* Mobile gallery slider */ .mobile-gallery-slider { display: none; overflow-x: auto; gap: 10px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; border-radius: var(--atl-radius); scrollbar-width: none; } .mobile-gallery-slider::-webkit-scrollbar { display: none; } .mobile-gallery-slider img { height: 220px; min-width: 80%; object-fit: cover; border-radius: var(--atl-radius); scroll-snap-align: start; flex-shrink: 0; } .desktop-gallery { display: block; } /* ========================================================================== 17. RESPONSIVE BREAKPOINTS ========================================================================== */ /* ── Tablet: 768px – 991px ─────────────────────────── */ @media (max-width: 991px) { :root { --atl-section-py: 56px; } .atl-hero { min-height: 460px; padding: 60px 0 44px; } .atl-hero-title { font-size: 36px; } .atl-about-text { padding-left: 0; margin-top: 56px; } .atl-about-img-badge { right: 0; } .atl-about-img-wrap::before { display: none; } .atl-about-stats { grid-template-columns: repeat(2, 1fr); } .atl-qs-item { min-width: 33.33%; } .atl-sidebar { padding-left: 0; margin-top: 40px; } .sidebar { padding-left: 0; margin-top: 40px; } .inner-title h1 { font-size: 26px; padding-left: 14px; } .child-banner img { max-height: 320px; } .custom-gallery { height: 300px; } } /* ── Mobile: max 767px ─────────────────────────────── */ @media (max-width: 767px) { :root { --atl-section-py: 48px; } .atl-hero { min-height: 0; padding: 48px 0 36px; } .atl-hero-title { font-size: 28px; } .atl-hero-subtitle { font-size: 15px; max-width: 100%; } .atl-hero-actions { flex-direction: column; align-items: flex-start; } .atl-hero-trust { gap: 16px; } .atl-hero-divider { display: none; } .atl-qs-item { min-width: 50%; } .atl-section-title { font-size: 26px; } .atl-about-row { flex-direction: column; } .atl-about-img-wrap img { height: 280px; } .atl-about-img-badge { right: 0; bottom: -16px; } .atl-about-img-wrap::before { display: none; } .atl-about-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; } .atl-map-cta-inner { flex-direction: column; text-align: center; } .atl-map-cta-left { flex-direction: column; text-align: center; } .atl-map-cta-icon { margin: 0 auto; } .atl-modal { grid-template-columns: 1fr; max-width: 380px; } .atl-modal-right { display: none; } .atl-modal-left { padding: 36px 28px 32px; } .inner-wrapper { padding: 32px 0 28px; } .inner-title h1 { font-size: 22px; padding-left: 14px; } .inner-page .row { display: flex; flex-direction: column; } .inner-page .col-md-9, .inner-page .col-md-3 { width: 100%; } .sidebar { padding-left: 0; margin-top: 36px; } .child-banner img { max-height: 240px; } .inner-page { padding: 28px 0 40px; } .child-content h2 { font-size: 22px; } .child-content h3 { font-size: 18px; } .child-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .atl-waiting-lot { flex-direction: column; text-align: center; } footer#colophon.site-footer { padding-top: 48px; margin-bottom:50px; } .pre-footer .col-md-3 { margin-bottom: 28px; } ul.menu-new-footer { justify-content: center !important; margin-top: 10px; } .site-info .col-md-6 { text-align: center; } .desktop-gallery { display: none !important; } .mobile-gallery-slider { display: flex; } } /* ── Small mobile: max 480px ───────────────────────── */ @media (max-width: 480px) { .atl-hero-title { font-size: 24px; } .atl-qs-item { min-width: 50%; } .atl-about-img-badge { right: 0; bottom: -12px; } .atl-about-stats { grid-template-columns: 1fr 1fr; } .inner-title h1 { font-size: 20px; padding-left: 12px; } .inner-wrapper { padding: 28px 0 24px; } .child-banner img { max-height: 200px; } .child-content { font-size: 15px; } .child-content h2 { font-size: 20px; } a.side-a { gap: 10px; padding: 10px 14px; } a.side-a img { width: 54px; height: 42px; } a.side-a p { font-size: 12px; } @media (max-height: 600px) { .atl-modal-left { padding: 24px 24px 20px; } .atl-modal-badge { margin-bottom: 10px; } .atl-modal-headline { font-size: 19px; margin-bottom: 4px; } .atl-modal-sub { font-size: 12px; margin-bottom: 12px; } .atl-modal-services { gap: 5px; margin-bottom: 14px; } .atl-modal-cta-btn { padding: 12px 20px; font-size: 13px; } } } /* ========================================================================== HOMEPAGE REDESIGN — ADDITIONAL & UPDATED STYLES Append these to your custom.css (or paste at the bottom). These styles cover: - Hero layout adjustments - Stats Strip (new section) - Wait Time cards (redesigned) - FAQ two-column layout (new) - Blog card link wrapping fix ========================================================================== */ /* ---------------------------------------------------------- HERO — layout alignment helpers ---------------------------------------------------------- */ .atl-hero-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .atl-hero-col-left, .atl-hero-col-right { padding-top: 0; } /* Weather badge repositioned below widget — ensure it shows on dark bg */ .atl-hero-col-right .atl-weather-badge { margin-top: 16px; display: inline-flex; } /* ---------------------------------------------------------- STATS STRIP (Section 4 — new) Full-width dark navy band, 4 headline numbers in a row. ---------------------------------------------------------- */ .atl-stats-strip { background: var(--atl-navy-dark); padding: 48px 0; } .atl-stats-strip-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0; } .atl-stats-strip-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; padding: 8px 48px; } .atl-stats-strip-num { font-family: var(--font-primary), sans-serif; font-size: 42px; font-weight: 700; color: var(--atl-white); line-height: 1; margin-bottom: 6px; letter-spacing: 0.02em; } .atl-stats-strip-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: rgba(255, 255, 255, 0.55); line-height: 1.5; } .atl-stats-strip-divider { width: 1px; height: 52px; background: rgba(255, 255, 255, 0.12); -ms-flex-negative: 0; flex-shrink: 0; } /* ---------------------------------------------------------- WAIT TIME CARDS (Section 5 — redesigned) Replaces plain pill badges with bordered cards. ---------------------------------------------------------- */ .atl-wait-cards-row { margin-bottom: 32px; } .atl-wait-card { background: var(--atl-white); border-radius: var(--atl-radius-lg); border-left: 4px solid transparent; box-shadow: var(--atl-shadow-sm); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 14px; padding: 20px 18px; margin-bottom: 20px; transition: var(--atl-transition); } .atl-wait-card:hover { box-shadow: var(--atl-shadow-md); -webkit-transform: translateY(-2px); transform: translateY(-2px); } .atl-wait-card--green { border-left-color: var(--atl-green); } .atl-wait-card--amber { border-left-color: var(--atl-amber); } .atl-wait-card--red { border-left-color: var(--atl-red); } .atl-wait-card-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--atl-light); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; } .atl-wait-card--green .atl-wait-card-icon svg { fill: var(--atl-green); } .atl-wait-card--amber .atl-wait-card-icon svg { fill: var(--atl-amber); } .atl-wait-card--red .atl-wait-card-icon svg { fill: var(--atl-red); } .atl-wait-card-icon svg { width: 20px; height: 20px; } .atl-wait-card-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2px; } .atl-wait-card-num { font-family: var(--font-primary), sans-serif; font-size: 24px; font-weight: 700; color: var(--atl-text); line-height: 1; } .atl-wait-card-label { font-size: 13px; color: var(--atl-text-mid); font-weight: 500; } .atl-wait-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-top: 4px; } .atl-status-green { color: var(--atl-green); } .atl-status-amber { color: var(--atl-amber); } .atl-status-red { color: var(--atl-red); } /* Wait table wrapper */ .atl-wait-table-wrap { background: var(--atl-white); border-radius: var(--atl-radius-lg); overflow: hidden; box-shadow: var(--atl-shadow-sm); border: 1px solid var(--atl-border); } .atl-wait-updated { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; font-size: 12px; color: var(--atl-muted); padding: 10px 16px 14px; margin: 0; } .atl-wait-updated svg { width: 13px; height: 13px; fill: var(--atl-muted); -ms-flex-negative: 0; flex-shrink: 0; } /* Status badge pills inside table */ .atl-badge-status { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .atl-badge-green { background: var(--atl-green-light); color: #065f46; } .atl-badge-amber { background: #fef3c7; color: #92400e; } .atl-badge-red { background: #fee2e2; color: #991b1b; } /* ---------------------------------------------------------- FAQ — Two-column layout on desktop (Section 7) ---------------------------------------------------------- */ .atl-faq-columns { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 24px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; } .atl-faq-col { -webkit-box-flex: 1; -ms-flex: 1 1 340px; flex: 1 1 340px; min-width: 0; } /* ---------------------------------------------------------- BLOG — card link wrapping fix ---------------------------------------------------------- */ .atl-blog-card-link { display: block; text-decoration: none; color: inherit; margin-bottom: 20px; } .atl-blog-card-link:hover, .atl-blog-card-link:focus { text-decoration: none; color: inherit; } .atl-blog-col { margin-bottom: 24px; } /* ---------------------------------------------------------- RESPONSIVE — additions for new sections ---------------------------------------------------------- */ @media (max-width: 991px) { .atl-stats-strip-item { padding: 8px 28px; } .atl-stats-strip-num { font-size: 34px; } .atl-faq-columns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media (max-width: 767px) { .atl-stats-strip { padding: 36px 0; } .atl-stats-strip-grid { gap: 0; } .atl-stats-strip-item { padding: 12px 20px; width: 50%; } .atl-stats-strip-divider { display: none; } .atl-stats-strip-num { font-size: 30px; } .atl-wait-card { padding: 16px 14px; } .atl-wait-card-num { font-size: 20px; } .atl-hero-col-right { margin-top: 32px; } } @media (max-width: 480px) { .atl-stats-strip-item { width: 100%; padding: 10px 16px; } .atl-stats-strip-num { font-size: 28px; } } /* ========================================================================== SIDE-LATEST SIDEBAR WIDGET — IMPROVED STYLES ========================================================================== */ /* Wrapper card */ .side-latest { background: var(--atl-white); border: 1px solid var(--atl-border); border-radius: var(--atl-radius-lg); overflow: hidden; box-shadow: var(--atl-shadow-sm); margin-bottom: 28px; } /* Section heading */ .side-latest .heading { display: flex; align-items: center; gap: 10px; padding: 13px 16px; margin: 0; font-family: var(--font-primary), sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.10em; color: var(--atl-navy); background: var(--atl-light); border-bottom: 1px solid var(--atl-border); } .side-latest p { padding: 13px 16px; margin: 0; } /* Left accent bar on the heading */ .side-latest .heading::before { content: ''; display: inline-block; width: 3px; height: 16px; background: var(--atl-red); border-radius: 2px; flex-shrink: 0; } /* List reset */ ul.latest-side { list-style: none !important; padding: 0 !important; margin: 0 !important; } ul.latest-side li { border-bottom: 1px solid var(--atl-border); } ul.latest-side li:last-child { border-bottom: none; } /* Link row */ a.side-a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; text-decoration: none; background: var(--atl-white); transition: background 0.18s ease; /* Remove old conflicting properties */ border: none !important; border-radius: 0 !important; box-shadow: none !important; margin-bottom: 0 !important; } a.side-a:hover { background: var(--atl-light); transform: none; text-decoration: none; border-color: transparent !important; box-shadow: none !important; } /* Thumbnail */ a.side-a img { width: 54px; height: 42px; object-fit: cover; border-radius: 5px; flex-shrink: 0; background: var(--atl-light); } /* Placeholder when no thumbnail */ .side-a-no-img { width: 54px; height: 42px; border-radius: 5px; flex-shrink: 0; background: var(--atl-light); display: flex; align-items: center; justify-content: center; } /* Page title */ a.side-a p { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--atl-text); margin: 0; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a.side-a:hover p { color: var(--atl-navy); } /* Chevron arrow at right */ a.side-a::after { content: '›'; font-size: 18px; color: var(--atl-muted); flex-shrink: 0; line-height: 1; margin-left: auto; transition: transform 0.18s ease, color 0.18s ease; } a.side-a:hover::after { color: var(--atl-navy); transform: translateX(3px); } /* Responsive */ @media (max-width: 991px) { .side-latest { margin-bottom: 20px; } } /* ============================================= COLOR THEMES — one per card (Same pattern as sample_css reference) ============================================= */ .flight-tracker { --bg-color: #60b8f5; --bg-color-light: #d0eafd; --text-color-hover: #1a3c5e; --box-shadow-color: rgba(96, 184, 245, 0.48); } .book-parking { --bg-color: #B8F9D3; --bg-color-light: #e2fced; --text-color-hover: #1a4a30; --box-shadow-color: rgba(184, 249, 211, 0.48); } .wait-time { --bg-color: #ffd861; --bg-color-light: #ffeeba; --text-color-hover: #4C5656; --box-shadow-color: rgba(255, 216, 97, 0.48); } .walk-times { --bg-color: #CEB2FC; --bg-color-light: #F0E7FF; --text-color-hover: #2d1a5e; --box-shadow-color: rgba(206, 178, 252, 0.48); } .transportation { --bg-color: #f9a8c9; --bg-color-light: #fde0ee; --text-color-hover: #5e1a38; --box-shadow-color: rgba(249, 168, 201, 0.48); } .connecting { --bg-color: #80e8c8; --bg-color-light: #c6f8ed; --text-color-hover: #0f4a35; --box-shadow-color: rgba(128, 232, 200, 0.48); } /* ============================================= CARD BASE STYLES ============================================= */ #services { /* padding: 60px 0; */ background: #f8f9fa; } .service-card { width: 270px; height: 321px; background: #fff; border-top-right-radius: 10px; border-bottom-left-radius: 10px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; /* Required: overlay is absolute inside this */ box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04); transition: all 0.3s ease-out; text-decoration: none; margin: 0 auto 24px; border: none; /* Override Bootstrap's .card border */ } /* ============================================= HOVER EFFECTS ============================================= */ .service-card:hover { transform: translateY(-5px) scale(1.005) translateZ(0); box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11), 0 24px 46px var(--box-shadow-color); } .service-card:hover .overlay { transform: scale(4) translateZ(0); } .service-card:hover .circle { border-color: var(--bg-color-light); background: var(--bg-color); } .service-card:hover .circle::after { background: var(--bg-color-light); } .service-card:hover .card-label { color: var(--text-color-hover); } .service-card:hover .circle i { color: var(--text-color-hover); } .service-card:active { transform: scale(1) translateZ(0); box-shadow: 0 15px 24px rgba(0, 0, 0, 0.11), 0 15px 24px var(--box-shadow-color); } /* ============================================= CARD LABEL ============================================= */ .card-label { font-size: 17px; color: #4C5656; margin-top: 30px; margin-bottom: 0; z-index: 1000; transition: color 0.3s ease-out; font-weight: 500; } /* ============================================= CIRCLE ============================================= */ .circle { width: 131px; height: 131px; border-radius: 50%; background: #fff; border: 2px solid var(--bg-color); display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; transition: all 0.3s ease-out; } .circle::after { content: ""; width: 118px; height: 118px; display: block; position: absolute; background: var(--bg-color); border-radius: 50%; top: 5px; left: 5px; transition: opacity 0.3s ease-out; } /* Icon sits above the ::after pseudo-element */ .circle i { position: relative; z-index: 10000; font-size: 28px; color: #4C5656; transition: color 0.3s ease-out; } /* ============================================= OVERLAY — expands on hover to flood the card ============================================= */ .overlay { width: 118px; height: 118px; border-radius: 50%; background: var(--bg-color); position: absolute; top: 70px; left: 35px; z-index: 0; transition: transform 0.3s ease-out; } /* ========================================================================== ATL SIDEBAR — COMPLETE COMPONENT STYLES Classes used: .atl-sidebar, .atl-sidebar-widget, .atl-sidebar-title, .atl-sidebar-list, .atl-sidebar-list li, .atl-sidebar-list li img, .atl-sidebar-list li div, .atl-sidebar-list li a, .atl-sidebar-list li span Design: Mirrors the .side-latest pattern — card shell, red-accented heading, divider-separated rows, thumbnail + text + chevron. ========================================================================== */ /* ---------------------------------------------------------- Outer column wrapper (Bootstrap col already handles width; this adds top gap on desktop when it sits beside content) ---------------------------------------------------------- */ .atl-sidebar { display: flex; flex-direction: column; gap: 0; /* widgets carry their own margin-bottom */ } /* ---------------------------------------------------------- Widget card shell (≡ .side-latest) ---------------------------------------------------------- */ .atl-sidebar-widget { background: var(--atl-white); border: 1px solid var(--atl-border); border-radius: var(--atl-radius-lg); overflow: hidden; box-shadow: var(--atl-shadow-sm); margin-bottom: 28px; transition: box-shadow 0.22s ease; } .atl-sidebar-widget:last-child { margin-bottom: 0; } .atl-sidebar-widget:hover { box-shadow: var(--atl-shadow-md); } /* ---------------------------------------------------------- Widget heading (≡ .side-latest .heading) — light grey band, red left-accent bar, navy uppercase text ---------------------------------------------------------- */ .atl-sidebar-title { display: flex; align-items: center; gap: 10px; padding: 13px 16px; margin: 0; font-family: var(--font-primary), sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--atl-navy); background: var(--atl-light); border-bottom: 1px solid var(--atl-border); line-height: 1.3; } /* Red accent bar to the left of every title */ .atl-sidebar-title::before { content: ''; display: inline-block; width: 3px; height: 16px; background: var(--atl-red); border-radius: 2px; flex-shrink: 0; } /* ---------------------------------------------------------- List reset (≡ ul.latest-side) ---------------------------------------------------------- */ .atl-sidebar-list { list-style: none !important; padding: 0 !important; margin: 0 !important; } /* ---------------------------------------------------------- List items — divider rows ---------------------------------------------------------- */ .atl-sidebar-list li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--atl-border); transition: background 0.18s ease; } .atl-sidebar-list li:last-child { border-bottom: none; } .atl-sidebar-list li:hover { background: var(--atl-light); } /* ---------------------------------------------------------- Thumbnail image (≡ a.side-a img) — fixed 54 × 42 px, rounded, covers content ---------------------------------------------------------- */ .atl-sidebar-list li img { width: 54px; height: 42px; object-fit: cover; border-radius: 5px; flex-shrink: 0; background: var(--atl-light); /* placeholder tint while loading */ display: block; } /* ---------------------------------------------------------- Text block (wraps and ) ---------------------------------------------------------- */ .atl-sidebar-list li > div { flex: 1; min-width: 0; /* allow text-overflow on children */ display: flex; flex-direction: column; gap: 3px; } /* ---------------------------------------------------------- Post / page title link ---------------------------------------------------------- */ .atl-sidebar-list li a { font-family: var(--font-secondary), sans-serif; font-size: 13px; font-weight: 600; color: var(--atl-text); text-decoration: none; line-height: 1.35; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.18s ease; } .atl-sidebar-list li a:hover, .atl-sidebar-list li:hover a { color: var(--atl-navy); text-decoration: none; } /* ---------------------------------------------------------- Date / meta span (e.g. "May 26, 2025") ---------------------------------------------------------- */ .atl-sidebar-list li span { font-size: 11px; color: var(--atl-muted); font-weight: 500; letter-spacing: 0.02em; display: block; } /* ---------------------------------------------------------- Chevron arrow at row right-edge (added via ::after on each
  • so no extra markup needed) ---------------------------------------------------------- */ .atl-sidebar-list li::after { content: '›'; font-size: 18px; color: var(--atl-muted); flex-shrink: 0; line-height: 1; margin-left: auto; padding-left: 6px; transition: transform 0.18s ease, color 0.18s ease; } .atl-sidebar-list li:hover::after { color: var(--atl-navy); transform: translateX(3px); } /* ---------------------------------------------------------- "No thumbnail" rows: when
  • contains only
    (Latest Pages widget — no ), remove left gap so title aligns flush with the heading text. ---------------------------------------------------------- */ .atl-sidebar-list li:not(:has(img)) { gap: 0; } .atl-sidebar-list li:not(:has(img)) > div { padding-right: 4px; } /* ---------------------------------------------------------- Responsive overrides ---------------------------------------------------------- */ /* Tablet (768 – 991 px): sidebar drops below content */ @media (max-width: 991px) { .atl-sidebar { padding-left: 0; margin-top: 40px; } .atl-sidebar-widget { margin-bottom: 20px; } } .marquee { width: 100%; background-color: var(--primary); border-bottom: 2px solid #8a0921; padding: 8px 0; text-align: center; color: #fff; } /* === Top Bar === */ .topbar-wrap { width: 100%; background-color: var(--atl-red); border-bottom: 2px solid #8a0921; } .topbar-inner { padding: 8px 0; display: flex; align-items: center; justify-content: center; gap: 12px; } .topbar-left { display: flex; align-items: center; justify-content:center; gap: 10px; flex: 1; } .topbar-icon { flex-shrink: 0; width: 28px; height: 28px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .topbar-icon .glyphicon { font-size: 13px; color: #fff; } .topbar-text { font-size: 12.5px; color: rgba(255,255,255,0.92); line-height: 1.45; letter-spacing: 0.01em; } .topbar-text strong { color: #fff; font-weight: 600; } .topbar-badge { flex-shrink: 0; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); border-radius: 4px; padding: 3px 9px; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,0.85); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .topbar-divider { width: 1px; height: 14px; background: rgba(255,255,255,0.25); flex-shrink: 0; } /* Desktop - static */ .marquee { width: 100%; text-align: center; } .marquee span { display: inline-block; } /* Mobile (≤ 767 px): slightly tighter thumbnail */ @media (max-width: 767px) { .marquee { overflow: hidden; white-space: nowrap; } .marquee span { display: inline-block; padding-right: 100%; font-size: 13px; animation: marquee-right 15s linear infinite; } .atl-sidebar-widget { margin-bottom: 16px; } .atl-sidebar-list li img { width: 46px; height: 36px; } .atl-sidebar-title { font-size: 11px; } .overlay { left: 70px; } } @keyframes marquee-right { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } .footercall button{ background: var(--primary); } .footercall button:hover { background: var(--primary-dark); } .footercall { position: fixed; width: 100%; bottom: 0; text-align: center; z-index: 999; } .footercall button { width: 100%; border: 0; border-radius:unset!important; } .footercall button .content { color: #fff; font-size: 24px; text-transform: capitalize; } .footercall button .content svg { width: 30px; height: 25px; float: none; margin-bottom: -4px; margin-right: 10px; } .footercall button .content svg path { fill: #fff; } .footercall button .content svg path:nth-child(2) { -webkit-animation: 1s cubic-bezier(0.1, 0.57, 0.5, 1) infinite header-phone; animation: 1s cubic-bezier(0.1, 0.57, 0.5, 1) infinite header-phone; } .footercall button .content svg path:nth-child(3) { -webkit-animation: 1s cubic-bezier(0.1, 0.57, 0.5, 1) infinite header-phone2; animation: 1s cubic-bezier(0.1, 0.57, 0.5, 1) infinite header-phone2; } @-webkit-keyframes header-phone { 0%, 30% { opacity: 0; -webkit-transform: translate3d(-20px, 20px, 0); transform: translate3d(-20px, 20px, 0); } 80% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 0; } } @keyframes header-phone { 0%, 30% { opacity: 0; -webkit-transform: translate3d(-20px, 20px, 0); transform: translate3d(-20px, 20px, 0); } 80% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 0; } } @-webkit-keyframes header-phone2 { 0% { opacity: 0; -webkit-transform: translate3d(-20px, 20px, 0); transform: translate3d(-20px, 20px, 0); } 70%, 90% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 0; } } @keyframes header-phone2 { 0% { opacity: 0; -webkit-transform: translate3d(-20px, 20px, 0); transform: translate3d(-20px, 20px, 0); } 70%, 90% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 0; } } .site-info-main { margin-bottom: 50px; text-align: center; } @media only screen and (max-width: 319px), (min-width: 320px) and (max-width: 359px), (min-width: 360px) and (max-width: 413px), (min-width: 414px) and (max-width: 643px), (min-width: 644px) and (max-width: 767px) { .footercall button { padding: 20px; } .footercall button .content { font-size: 18px; } .footercall button .content svg { width: 20px; height: 20px; } }