/* AllSafe Driving School — darker blue theme, full-width (site-wide) */ :root { --as-blue-950: #061525; --as-blue-900: #0a2540; --as-blue-850: #0f3355; --as-blue-800: #134875; --as-blue-700: #175a8f; --as-blue-600: #1d6fab; --as-blue-500: #2482c4; --as-blue-400: #3d96d4; --as-blue-300: #5aabd8; --as-blue-200: #7ec0e4; --as-blue-100: #a8d4ef; --as-blue-50: #cce5f5; --as-bg: #9bbdd6; --as-bg-soft: #b0cfe0; --as-bg-section: #6a9fbe; --as-text: #061525; --as-muted: #1e4468; --as-border: #4a85a8; --as-white: #ffffff; --as-shadow: 0 8px 28px rgba(6, 21, 37, 0.22); --as-radius: 10px; --as-navy-950: var(--as-blue-950); --as-navy-900: var(--as-blue-900); --as-navy-800: var(--as-blue-800); --as-navy-700: var(--as-blue-700); --as-navy-600: var(--as-blue-600); --as-navy-500: var(--as-blue-500); --as-navy-400: var(--as-blue-400); --as-navy-300: var(--as-blue-300); --as-navy-100: var(--as-blue-100); --as-navy-50: var(--as-blue-50); } body.as-site { background: linear-gradient(180deg, #7aadcc 0%, var(--as-bg) 45%, #8eb8d0 100%) !important; background-attachment: fixed !important; color: var(--as-text); font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important; font-size: 15px !important; min-height: 100vh; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden; } html { width: 100%; overflow-x: hidden; } /* Full-width shell — kill legacy Site.css 1050px box */ .as-site form { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: block; } .as-site .page, .page { width: 100% !important; max-width: none !important; margin: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; box-sizing: border-box; } /* Full-bleed bands — color & nav reach both edges of the screen */ .as-site .as-brand-row, .as-site .hideSkiplink, .as-site .as-hero, .as-site .as-home-programs, .as-site .as-trust-band, .as-site .footer { width: 100vw !important; max-width: 100vw !important; position: relative; left: 50%; right: 50%; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box; } .as-site .header { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } .as-site .header h1 { padding-left: 0 !important; margin: 0 !important; } .as-site .header .title { float: none !important; width: auto !important; } .as-site .main { width: 100% !important; max-width: none !important; background: transparent !important; background-color: transparent !important; padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 0 !important; } .as-content-wrap { max-width: 1200px; margin: 0 auto; padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); } /* ── Top bar ── */ .as-topbar { background: linear-gradient(90deg, var(--as-blue-900) 0%, var(--as-blue-800) 50%, var(--as-blue-700) 100%); color: #cce5f5; font-size: 13px; padding: 10px clamp(20px, 4vw, 48px); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--as-blue-600); width: 100% !important; max-width: none !important; box-sizing: border-box; } .as-topbar strong { color: #fff; letter-spacing: 0.07em; text-transform: uppercase; font-size: 11px; } .as-topbar a { color: #fff !important; font-weight: 600; text-decoration: none; } .as-topbar a:hover { color: #dbeefe !important; } .as-topbar-chat { background: #fff; color: var(--as-blue-800) !important; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; border: none; cursor: pointer; font-family: inherit; letter-spacing: 0.03em; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .as-topbar-chat:hover { background: var(--as-blue-50) !important; } /* ── Brand row — compact logo (icon + text, never full-width banner) ── */ .as-brand-row { background: linear-gradient(180deg, #ffffff 0%, var(--as-blue-100) 100%); border-bottom: 3px solid var(--as-blue-700); padding: 10px clamp(16px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; box-shadow: 0 4px 16px rgba(6, 21, 37, 0.15); width: 100%; } .as-brand-row .title { float: none !important; display: flex; align-items: center; max-width: 100%; } .as-brand-row .title h1 { font-size: 1rem !important; font-weight: 700 !important; color: var(--as-blue-900) !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } .as-site-logo, .as-site .header h1 img, .as-site .header .title h1 img, .as-site .title h1 img { height: 44px !important; width: 44px !important; max-width: 44px !important; max-height: 44px !important; flex-shrink: 0; display: block; border-radius: 0; object-fit: contain !important; } .as-site .header h1 img[src*="allsafe-logo-horizontal"], .as-site img.as-site-logo[src*="horizontal"] { height: 38px !important; width: auto !important; max-width: 180px !important; max-height: 38px !important; } .as-brand-link { display: inline-flex !important; flex-direction: row; align-items: center; gap: 10px; text-decoration: none !important; color: inherit !important; max-width: 100%; } .as-brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } .as-brand-name { display: block; font-size: 1.15rem; font-weight: 700; color: var(--as-blue-900); line-height: 1.2; white-space: nowrap; } .as-brand-link .as-brand-tagline { display: block; font-size: 11px; font-weight: 500; color: var(--as-blue-700); margin-top: 0; line-height: 1.25; } .as-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .as-btn { display: inline-block; padding: 10px 22px; border-radius: 6px; font-weight: 700; font-size: 14px; text-decoration: none !important; border: 2px solid transparent; transition: all 0.15s ease; letter-spacing: 0.02em; } .as-btn-primary { background: var(--as-blue-800); color: #fff !important; border-color: var(--as-blue-800); box-shadow: 0 3px 12px rgba(6, 21, 37, 0.25); } .as-btn-primary:hover { background: var(--as-blue-700); border-color: var(--as-blue-700); color: #fff !important; } .as-btn-outline { background: #fff; color: var(--as-blue-700) !important; border-color: var(--as-blue-400); } .as-btn-outline:hover { background: var(--as-blue-50); color: var(--as-blue-800) !important; } .as-btn-orange { background: var(--as-blue-700); color: #fff !important; border: 2px solid var(--as-blue-700); box-shadow: 0 3px 12px rgba(6, 21, 37, 0.2); } .as-btn-orange:hover { background: var(--as-blue-600); border-color: var(--as-blue-600); color: #fff !important; } .loginDisplay { font-size: 14px !important; padding: 0 !important; } .loginDisplay a { font-weight: 600 !important; color: var(--as-blue-700) !important; } /* ── Navigation ── */ .hideSkiplink, .as-site .header .nav { background: linear-gradient(180deg, var(--as-blue-800) 0%, var(--as-blue-900) 100%) !important; padding: 0 !important; border-bottom: 2px solid var(--as-blue-950); width: 100%; text-align: center; box-shadow: 0 4px 14px rgba(6, 21, 37, 0.25); } .as-site .nav { padding: 0 !important; width: 100% !important; } .as-site .nav > ul { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap; justify-content: center; width: 100% !important; max-width: none !important; } .as-site .nav > ul > li { float: none !important; } .as-site .nav > ul > li > a, .as-site .nav > ul > li > a:link, .as-site .nav > ul > li > a:visited { padding: 15px 20px !important; color: #fff !important; font-weight: 600 !important; font-size: 14px !important; text-decoration: none !important; border-right: 1px solid rgba(255, 255, 255, 0.2); transition: background 0.15s, color 0.15s; } .as-site .nav > ul > li:hover { background: rgba(255, 255, 255, 0.15) !important; } .as-site .nav > ul > li:hover > a { color: #fff !important; } .as-site .nav ul ul { background: var(--as-white) !important; border: 1px solid var(--as-border) !important; border-top: 3px solid var(--as-blue-500) !important; border-radius: 0 0 var(--as-radius) var(--as-radius) !important; box-shadow: var(--as-shadow) !important; min-width: 260px; } .as-site .nav ul ul a { color: var(--as-blue-800) !important; padding: 12px 18px !important; } .as-site .nav ul ul a:hover { background: var(--as-blue-50) !important; color: var(--as-blue-700) !important; } /* ── Main ── */ .main { background: transparent !important; padding: 0 !important; margin-bottom: 0 !important; width: 100% !important; } /* ── Inner pages — full-width blue wash, centered content ── */ .as-site .main:not(:has(.as-hero)) { padding: 28px clamp(20px, 4vw, 48px) !important; background: linear-gradient(180deg, #7aadcc 0%, #8eb8d0 50%, #9bbdd6 100%) !important; border-top: 1px solid var(--as-blue-600); border-bottom: 1px solid var(--as-blue-600); } .as-site .main:not(:has(.as-hero)) table, .as-site .main:not(:has(.as-hero)) .info-panel, .as-site .main:not(:has(.as-hero)) .alert, .as-site .main:not(:has(.as-hero)) > h1, .as-site .main:not(:has(.as-hero)) > h2, .as-site .main:not(:has(.as-hero)) > p, .as-site .main:not(:has(.as-hero)) > div:not(.as-programs-page) { max-width: 1200px; margin-left: auto; margin-right: auto; } .as-site .main:not(:has(.as-hero)):has(.as-programs-page), .as-site .main:not(:has(.as-hero)):has(.as-fees-page), .as-site .main:not(:has(.as-hero)):has(.as-dip-page), .as-site .main:not(:has(.as-hero)):has(.as-contact-page), .as-site .main:not(:has(.as-hero)):has(.as-locations-page), .as-site .main:not(:has(.as-hero)):has(.as-faq-page), .as-site .main:not(:has(.as-hero)):has(.as-howto-page) { padding: 0 !important; } .as-site .main h1, .as-site .main h2, .as-site .main h3 { color: var(--as-blue-900) !important; font-variant: normal; text-transform: none; } .as-site .as-hero h1, .as-site .as-hero h2, .as-site .as-hero h3, .as-site .as-home-programs .as-section-title h2 { color: #fff !important; border-bottom: none !important; padding-bottom: 0 !important; } .as-site .as-home-programs .as-section-title h2 { font-size: 1.75rem !important; font-weight: 800 !important; margin: 0 0 10px !important; } .as-site .main h2 { font-size: 1.65rem; font-weight: 700; margin: 0 0 20px; padding-bottom: 10px; border-bottom: 3px solid var(--as-blue-400); } .as-site .main p { line-height: 1.65; color: var(--as-text); } .as-site .as-hero p.lead, .as-site .as-home-programs .as-section-title p { color: #fff !important; } .as-site .main ul, .as-site .main ol { line-height: 1.65; } .as-site .main table { background: var(--as-white); border-collapse: collapse; } .as-site .main .table-bordered, .as-site .main table.table { border: 1px solid var(--as-border) !important; border-radius: var(--as-radius); overflow: hidden; box-shadow: 0 2px 12px rgba(43, 127, 201, 0.08); } .as-site .main .table td, .as-site .main .table th { border-color: var(--as-border) !important; padding: 12px 14px !important; font-size: 15px !important; color: var(--as-text) !important; } .as-site .main .table td[style*="background:#fff"], .as-site .main .table td[style*="background:#e2e2e1"] { background: var(--as-white) !important; } .as-site .info-panel { background: var(--as-white); border: 1px solid var(--as-border); border-left: 4px solid var(--as-blue-500); border-radius: var(--as-radius); padding: 20px; box-shadow: 0 2px 10px rgba(43, 127, 201, 0.08); margin-bottom: 16px; } .as-site .info-panel h2, .as-site .info-panel h3, .as-site .info-panel .h6 { color: var(--as-blue-900) !important; font-size: 1rem; font-weight: 700; margin: 0 0 10px; border: none; padding: 0; } .as-site .alert { border-radius: var(--as-radius); padding: 14px 18px; border-left: 4px solid var(--as-blue-500); } .as-site .alert-warning { background: #fff8e6; border-color: #d4a017; color: var(--as-blue-900); } .as-site .alert-secondary { background: var(--as-blue-50); border-left-color: var(--as-blue-500); color: var(--as-blue-900); } .as-site .btn.btn-primary, .as-site input.btn-primary { background: var(--as-blue-600) !important; border-color: var(--as-blue-600) !important; color: #fff !important; border-radius: 6px; font-weight: 600; } /* Legacy program column headers → light blue tiers */ .as-site .main div[style*="background-color:Orange"], .as-site .main div[style*="background-color:orange"] { background: var(--as-blue-600) !important; background-color: var(--as-blue-600) !important; } .as-site .main div[style*="background-color:#2C84B3"], .as-site .main div[style*="background-color:green"] { background: var(--as-blue-500) !important; background-color: var(--as-blue-500) !important; } .as-site .main #divPane1, .as-site .main #divPane2 { background: var(--as-white) !important; border-color: var(--as-border) !important; } .as-programs-page { padding: 0 0 48px !important; background: #eef4f9 !important; border-top: 1px solid var(--as-blue-600); border-bottom: 1px solid var(--as-blue-600); width: 100vw !important; max-width: none !important; position: relative; left: 50%; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box; } .as-programs-page > *:not(.as-prog-hero) { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); } .as-programs-page .as-back { margin-bottom: 0; padding-top: 16px; font-weight: 700; color: var(--as-blue-900) !important; } .as-programs-page .as-back a { color: var(--as-blue-800) !important; } /* Programs page hero */ .as-prog-hero { max-width: none !important; margin: 0 0 36px !important; padding: 48px clamp(20px, 5vw, 48px) 52px !important; background: linear-gradient(135deg, var(--as-blue-900) 0%, var(--as-blue-700) 55%, var(--as-blue-600) 100%); text-align: center; color: #fff; border-bottom: 3px solid var(--as-blue-500); position: relative; overflow: hidden; } .as-prog-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(90, 171, 216, 0.22) 0%, transparent 60%); pointer-events: none; } .as-prog-hero > * { position: relative; z-index: 1; } .as-prog-hero-kicker { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; margin-bottom: 12px; text-shadow: 0 1px 3px rgba(0, 20, 40, 0.35); } .as-prog-hero h2 { color: #ffffff !important; font-size: clamp(1.5rem, 3vw, 2rem) !important; font-weight: 800 !important; margin: 0 0 12px !important; padding: 0 !important; border: none !important; line-height: 1.25 !important; text-shadow: 0 2px 6px rgba(0, 20, 40, 0.3); } .as-prog-hero p { margin: 0 auto; max-width: 640px; font-size: 17px; line-height: 1.6; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 20, 40, 0.28); } /* Beat .as-site .main h2/p global navy overrides on programs hero */ .as-site .as-programs-page .as-prog-hero h2, .as-site .main .as-prog-hero h2 { color: #ffffff !important; border-bottom: none !important; padding-bottom: 0 !important; } .as-site .as-programs-page .as-prog-hero p, .as-site .main .as-prog-hero p { color: #ffffff !important; } .as-site .as-programs-page .as-prog-hero .as-prog-hero-kicker, .as-site .main .as-prog-hero .as-prog-hero-kicker { color: #ffffff !important; } /* Program cards */ .as-prog-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 28px; } .as-prog-card { background: #fff; border-radius: 12px; border: 1px solid #c5d8e8; box-shadow: 0 4px 20px rgba(6, 21, 37, 0.08); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; border-top: 4px solid var(--as-blue-600); } .as-prog-card-dip { border-top-color: var(--as-blue-600); } .as-prog-card-dui { border-top-color: #c47a12; } .as-prog-card-sober { border-top-color: #2a8f5c; } .as-prog-card-dui .as-prog-badge { color: #8a5a0a; background: #fff8e6; border-color: #e6c878; } .as-prog-card-sober .as-prog-badge { color: #1e6b42; background: #e8f7ef; border-color: #9dd4b4; } .as-prog-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(6, 21, 37, 0.14); } .as-prog-card-top { padding: 20px 20px 12px; background: linear-gradient(180deg, #f8fbfd 0%, #fff 100%); } .as-prog-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--as-blue-700); background: var(--as-blue-50); border: 1px solid var(--as-blue-200); padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; } .as-prog-card-title { margin: 0 0 8px !important; padding: 0 !important; border: none !important; font-size: 1rem !important; font-weight: 800 !important; line-height: 1.35 !important; color: var(--as-blue-900) !important; } .as-prog-card-title a { color: var(--as-blue-900) !important; text-decoration: none; } .as-prog-card-title a:hover { color: var(--as-blue-600) !important; } .as-prog-card-sub { margin: 0; font-size: 14px; font-weight: 600; color: var(--as-blue-600); } .as-prog-card-image { width: 100%; height: 130px; overflow: hidden; background: var(--as-blue-100); border-top: 1px solid #dce8f0; border-bottom: 1px solid #dce8f0; } .as-prog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .as-prog-card-content { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; } .as-prog-card-content p { margin: 0 0 16px; font-size: 14px; line-height: 1.65; color: var(--as-text); flex: 1; } .as-prog-card-actions { display: flex; flex-direction: column; gap: 8px; } .as-prog-cta { display: inline-block; text-align: center; padding: 10px 16px; background: var(--as-blue-700); color: #fff !important; font-weight: 700; font-size: 14px; border-radius: 6px; text-decoration: none !important; transition: background 0.15s; } .as-prog-cta:hover { background: var(--as-blue-800); color: #fff !important; } .as-prog-cta-phone { background: var(--as-blue-50); color: var(--as-blue-800) !important; border: 2px solid var(--as-blue-400); } .as-prog-cta-phone:hover { background: var(--as-blue-100); color: var(--as-blue-900) !important; } .as-prog-cta-outline { background: #fff; color: var(--as-blue-700) !important; border: 2px solid var(--as-blue-300); } .as-prog-cta-outline:hover { background: var(--as-blue-50); color: var(--as-blue-800) !important; } /* Notice */ .as-prog-notice { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid #c5d8e8; border-left: 4px solid var(--as-blue-600); border-radius: 10px; padding: 20px 22px; margin-bottom: 28px; box-shadow: 0 2px 12px rgba(6, 21, 37, 0.06); } .as-prog-notice-icon { flex-shrink: 0; width: 32px; height: 32px; background: var(--as-blue-100); color: var(--as-blue-700); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; line-height: 1; } .as-prog-notice-text { font-size: 15px; line-height: 1.65; color: var(--as-text); } .as-prog-notice-text a { font-weight: 700; color: var(--as-blue-700) !important; } /* Detail panels — equal height columns */ .as-prog-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; padding-bottom: 8px; } .as-prog-panel { background: #fff; border: 1px solid #c5d8e8; border-radius: 12px; box-shadow: 0 4px 20px rgba(6, 21, 37, 0.08); padding: 0; width: auto !important; overflow: hidden; display: flex; flex-direction: column; height: 100%; min-height: 100%; } .as-prog-panel-head { padding: 22px 24px 16px; background: linear-gradient(180deg, var(--as-blue-50) 0%, #fff 100%); border-bottom: 1px solid #dce8f0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-height: 88px; box-sizing: border-box; flex-shrink: 0; } .as-prog-panel-head h3 { margin: 0 !important; padding: 0 !important; border: none !important; font-size: 1.1rem !important; font-weight: 800 !important; color: var(--as-blue-900) !important; flex: 1; min-width: 200px; } .as-prog-panel-head h3 a { color: var(--as-blue-900) !important; text-decoration: none; } .as-prog-panel-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--as-blue-700); background: #fff; border: 1px solid var(--as-blue-300); padding: 4px 10px; border-radius: 4px; } .as-prog-panel > .as-prog-panel-head { padding-left: 24px; padding-right: 24px; } .as-prog-panel-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 0 24px 24px; box-sizing: border-box; } .as-prog-panel-body::after { content: ""; flex: 1 1 auto; min-height: 0; } .as-prog-panel-body > *:last-child { margin-bottom: 0; } .as-prog-loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 20px; margin-bottom: 8px; } .as-prog-loc-card { background: var(--as-blue-50); border: 1px solid var(--as-blue-200); border-radius: 8px; padding: 16px; text-align: center; } .as-prog-loc-name { display: block; font-size: 13px; font-weight: 700; color: var(--as-blue-900); margin-bottom: 10px; line-height: 1.35; } .as-prog-loc-card .as-prog-cta { width: 100%; box-sizing: border-box; } .as-prog-subsection { padding-top: 20px; margin-top: 8px; border-top: 1px solid #e8f0f6; } .as-prog-subsection-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .as-prog-subsection h4 { margin: 0 !important; padding: 0 !important; font-size: 0.9rem !important; font-weight: 800 !important; color: var(--as-blue-800) !important; text-transform: uppercase; letter-spacing: 0.05em; } .as-prog-subsection-head h4 { flex: 1; min-width: 180px; } .as-prog-subsection h4 a { color: var(--as-blue-800) !important; text-decoration: none; } .as-prog-subsection h4 a:hover { color: var(--as-blue-600) !important; } .as-prog-schedule-chip { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--as-blue-800); background: var(--as-blue-50); border: 1px solid var(--as-blue-200); padding: 5px 12px; border-radius: 20px; white-space: nowrap; } .as-prog-subsection-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: var(--as-muted); } .as-prog-facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .as-prog-fact-card { background: var(--as-blue-50); border: 1px solid var(--as-blue-200); border-radius: 8px; padding: 14px 16px; } .as-prog-fact-label { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--as-blue-600); margin-bottom: 6px; } .as-prog-fact-value { display: block; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--as-blue-900); } .as-prog-service-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .as-prog-service-card { background: #fff; border: 1px solid var(--as-blue-200); border-left: 4px solid var(--as-blue-600); border-radius: 8px; padding: 16px 18px; box-shadow: 0 2px 8px rgba(6, 21, 37, 0.04); } .as-prog-service-card h5 { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: var(--as-blue-900); line-height: 1.35; } .as-prog-service-card p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--as-muted); } .as-prog-service-card .as-prog-cta { display: inline-block; width: auto; min-width: 160px; padding: 8px 18px; font-size: 13px; } .as-prog-subsection p { margin: 0 0 10px; font-size: 14px; line-height: 1.65; color: var(--as-text); } .as-prog-facts { margin: 8px 0 0; padding: 0 0 0 18px; font-size: 14px; line-height: 1.65; color: var(--as-text); } .as-prog-facts li { margin-bottom: 8px; } .as-prog-warning { margin-top: 20px; background: #fff8e6; border: 1px solid #e6c878; border-radius: 8px; padding: 14px 16px; font-size: 14px; line-height: 1.55; color: #5c4a12; } .as-prog-lead { padding-top: 16px; font-size: 15px; line-height: 1.65; color: var(--as-muted); margin: 0 0 8px; } .as-prog-section-label { margin: 24px 0 14px !important; padding: 0 !important; font-size: 0.85rem !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--as-blue-700) !important; } .as-prog-center-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; } .as-prog-center-card { background: var(--as-blue-50); border: 1px solid var(--as-blue-200); border-radius: 8px; padding: 16px; } .as-prog-center-card-wide { grid-column: 1 / -1; } .as-prog-center-card h5 { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--as-blue-900); } .as-prog-center-hours { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--as-blue-600); } .as-prog-center-addr { margin: 0; font-size: 13px; line-height: 1.55; color: var(--as-text); } .as-prog-steps { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 12px; } .as-prog-steps li { display: flex; align-items: flex-start; gap: 14px; background: var(--as-blue-50); border: 1px solid var(--as-blue-200); border-radius: 8px; padding: 14px 16px; margin: 0; font-size: 14px; line-height: 1.6; color: var(--as-text); } .as-prog-step-num { flex-shrink: 0; width: 32px; height: 32px; background: var(--as-blue-700); color: #fff; font-weight: 800; font-size: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; } .as-prog-step-body { flex: 1; } .as-prog-step-body a { font-weight: 700; color: var(--as-blue-700) !important; } .as-programs-page h2, .as-programs-page h3, .as-programs-page h4, .as-programs-page h5 { border-bottom: none; font-variant: normal; text-transform: none; } .as-site .as-programs-page a:link, .as-site .as-programs-page a:visited { color: var(--as-blue-700) !important; } .as-site .as-programs-page .as-prog-cta, .as-site .as-programs-page .as-prog-cta:visited { color: #fff !important; } .as-site .as-programs-page .as-prog-cta-phone, .as-site .as-programs-page .as-prog-cta-phone:visited, .as-site .as-programs-page .as-prog-cta-outline, .as-site .as-programs-page .as-prog-cta-outline:visited { color: var(--as-blue-800) !important; } .as-site .as-programs-page .as-prog-card-title a, .as-site .as-programs-page .as-prog-card-title a:visited { color: var(--as-blue-900) !important; } .as-programs-page #divPane1, .as-programs-page #divPane2 { height: 100% !important; min-height: 100% !important; width: auto !important; } @media (max-width: 960px) { .as-prog-cards { grid-template-columns: 1fr; max-width: none; } .as-prog-panels { grid-template-columns: 1fr; } .as-prog-loc-grid { grid-template-columns: 1fr; } .as-prog-center-grid { grid-template-columns: 1fr; } .as-prog-center-card-wide { grid-column: auto; } .as-prog-facts-grid { grid-template-columns: 1fr; } } /* ── Fees page ── */ .as-fees-page { padding: 0 0 48px !important; background: #eef4f9 !important; border-top: 1px solid var(--as-blue-600); border-bottom: 1px solid var(--as-blue-600); width: 100vw !important; max-width: none !important; position: relative; left: 50%; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box; } .as-fees-page > *:not(.as-fees-hero) { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); } .as-fees-hero { max-width: none !important; margin: 0 0 32px !important; padding: 48px clamp(20px, 5vw, 48px) 52px !important; background: linear-gradient(135deg, var(--as-blue-900) 0%, var(--as-blue-700) 55%, var(--as-blue-600) 100%); text-align: center; color: #fff; border-bottom: 3px solid var(--as-blue-500); position: relative; overflow: hidden; } .as-fees-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(90, 171, 216, 0.22) 0%, transparent 60%); pointer-events: none; } .as-fees-hero > * { position: relative; z-index: 1; } .as-fees-hero-kicker { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; margin-bottom: 12px; text-shadow: 0 1px 3px rgba(0, 20, 40, 0.35); } .as-fees-hero h2 { color: #ffffff !important; font-size: clamp(1.75rem, 3.5vw, 2.25rem) !important; font-weight: 800 !important; margin: 0 0 12px !important; padding: 0 !important; border: none !important; line-height: 1.2 !important; text-shadow: 0 2px 6px rgba(0, 20, 40, 0.3); } .as-fees-hero p { margin: 0 auto; max-width: 560px; font-size: 17px; line-height: 1.6; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 20, 40, 0.28); } .as-site .as-fees-page .as-fees-hero h2, .as-site .main .as-fees-hero h2 { color: #ffffff !important; border-bottom: none !important; padding-bottom: 0 !important; } .as-site .as-fees-page .as-fees-hero p, .as-site .main .as-fees-hero p { color: #ffffff !important; } .as-site .as-fees-page .as-fees-hero .as-fees-hero-kicker, .as-site .main .as-fees-hero .as-fees-hero-kicker { color: #ffffff !important; } .as-fees-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; } .as-fees-grid { display: flex; flex-direction: column; gap: 20px; } .as-fees-card { background: #fff; border: 1px solid #c5d8e8; border-radius: 12px; box-shadow: 0 4px 20px rgba(6, 21, 37, 0.08); overflow: hidden; border-top: 4px solid var(--as-blue-600); } .as-fees-card-dip { border-top-color: var(--as-blue-600); } .as-fees-card-sober { border-top-color: #2a8f5c; } .as-fees-card-dui { border-top-color: #c47a12; } .as-fees-card-head { padding: 20px 22px 14px; background: linear-gradient(180deg, #f8fbfd 0%, #fff 100%); border-bottom: 1px solid #dce8f0; } .as-fees-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--as-blue-700); background: var(--as-blue-50); border: 1px solid var(--as-blue-200); padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; } .as-fees-card-sober .as-fees-badge { color: #1e6b42; background: #e8f7ef; border-color: #9dd4b4; } .as-fees-card-dui .as-fees-badge { color: #8a5a0a; background: #fff8e6; border-color: #e6c878; } .as-fees-card-head h3 { margin: 0 !important; padding: 0 !important; border: none !important; font-size: 1.05rem !important; font-weight: 800 !important; line-height: 1.35 !important; color: var(--as-blue-900) !important; } .as-fees-rows { padding: 6px 0; } .as-fees-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid #e8f0f6; } .as-fees-row:last-child { border-bottom: none; } .as-fees-label { font-size: 15px; font-weight: 600; color: var(--as-text); line-height: 1.4; } .as-fees-price { flex-shrink: 0; font-size: 1.35rem; font-weight: 800; color: var(--as-blue-800); line-height: 1; } .as-fees-card-foot { padding: 0 22px 20px; } .as-fees-cta { display: inline-block; padding: 10px 18px; background: var(--as-blue-700); color: #fff !important; font-weight: 700; font-size: 14px; border-radius: 6px; text-decoration: none !important; transition: background 0.15s; } .as-fees-cta:hover { background: var(--as-blue-800); color: #fff !important; } .as-fees-cta-outline { background: #fff; color: var(--as-blue-800) !important; border: 2px solid var(--as-blue-300); } .as-fees-cta-outline:hover { background: var(--as-blue-50); color: var(--as-blue-900) !important; } .as-fees-cta-phone { background: var(--as-blue-50); color: var(--as-blue-800) !important; border: 2px solid var(--as-blue-400); } .as-fees-cta-phone:hover { background: var(--as-blue-100); color: var(--as-blue-900) !important; } .as-fees-dui-body { padding: 18px 22px 22px; } .as-fees-dui-body p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--as-text); } .as-fees-dui-actions { display: flex; flex-wrap: wrap; gap: 10px; } .as-fees-aside { position: sticky; top: 16px; } .as-fees-aside-img { width: 100%; border-radius: 12px; border: 1px solid #c5d8e8; box-shadow: 0 4px 20px rgba(6, 21, 37, 0.08); display: block; object-fit: cover; aspect-ratio: 4 / 5; } .as-fees-aside-note { margin-top: 14px; background: #fff; border: 1px solid #c5d8e8; border-left: 4px solid var(--as-blue-600); border-radius: 10px; padding: 16px 18px; font-size: 14px; line-height: 1.6; color: var(--as-muted); } .as-fees-aside-note strong { color: var(--as-blue-900); } .as-site .as-fees-page a:link:not(.as-fees-cta), .as-site .as-fees-page a:visited:not(.as-fees-cta) { color: var(--as-blue-700) !important; font-weight: 700; } @media (max-width: 960px) { .as-fees-layout { grid-template-columns: 1fr; } .as-fees-aside { position: static; } .as-fees-aside-img { aspect-ratio: 16 / 9; max-height: 240px; } } /* ── DIP program page ── */ .as-dip-page { padding: 0 0 48px !important; background: #eef4f9 !important; border-top: 1px solid var(--as-blue-600); border-bottom: 1px solid var(--as-blue-600); width: 100vw !important; max-width: none !important; position: relative; left: 50%; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box; } .as-dip-page > *:not(.as-dip-hero) { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); } .as-dip-page .as-back { padding-top: 16px; font-weight: 700; color: var(--as-blue-900) !important; } .as-dip-page .as-back a { color: var(--as-blue-800) !important; } .as-dip-hero { max-width: none !important; margin: 0 0 32px !important; padding: 52px clamp(20px, 5vw, 48px) 56px !important; background: linear-gradient(135deg, var(--as-blue-900) 0%, var(--as-blue-700) 55%, var(--as-blue-600) 100%); text-align: center; color: #fff; border-bottom: 3px solid var(--as-blue-500); position: relative; overflow: hidden; } .as-dip-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(90, 171, 216, 0.22) 0%, transparent 60%); pointer-events: none; } .as-dip-hero > * { position: relative; z-index: 1; } .as-dip-hero-badge { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.35); padding: 6px 14px; border-radius: 24px; margin-bottom: 16px; text-shadow: 0 1px 2px rgba(0, 20, 40, 0.25); } .as-dip-hero h1 { margin: 0 0 16px !important; padding: 0 !important; border: none !important; font-size: clamp(1.65rem, 4vw, 2.35rem) !important; font-weight: 800 !important; line-height: 1.2 !important; color: #ffffff !important; text-shadow: 0 2px 8px rgba(0, 20, 40, 0.35); max-width: 900px; margin-left: auto !important; margin-right: auto !important; } .as-dip-hero-lead { margin: 0 auto; max-width: 720px; font-size: clamp(17px, 2.2vw, 20px); font-weight: 600; line-height: 1.55; color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 20, 40, 0.28); } .as-site .as-dip-page .as-dip-hero h1, .as-site .main .as-dip-hero h1 { color: #ffffff !important; border-bottom: none !important; padding-bottom: 0 !important; } .as-site .as-dip-page .as-dip-hero p, .as-site .main .as-dip-hero p, .as-site .as-dip-page .as-dip-hero .as-dip-hero-lead, .as-site .main .as-dip-hero .as-dip-hero-lead { color: #ffffff !important; } .as-dip-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; padding-bottom: 8px; } .as-dip-highlight { background: #fff; border: 1px solid #c5d8e8; border-left: 5px solid var(--as-blue-600); border-radius: 12px; padding: 24px 26px; margin-bottom: 24px; box-shadow: 0 4px 20px rgba(6, 21, 37, 0.08); font-size: 18px; font-weight: 600; line-height: 1.65; color: var(--as-blue-900); } .as-dip-highlight strong { font-weight: 800; } .as-dip-section-label { margin: 0 0 14px !important; padding: 0 !important; font-size: 0.9rem !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--as-blue-700) !important; } .as-dip-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; } .as-dip-action-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #c5d8e8; border-radius: 10px; padding: 18px 20px; text-decoration: none !important; box-shadow: 0 2px 12px rgba(6, 21, 37, 0.06); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .as-dip-action-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(6, 21, 37, 0.12); border-color: var(--as-blue-400); } .as-dip-action-icon { flex-shrink: 0; width: 44px; height: 44px; background: var(--as-blue-50); border: 1px solid var(--as-blue-200); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; } .as-dip-action-text { flex: 1; min-width: 0; } .as-dip-action-title { display: block; font-size: 16px; font-weight: 800; color: var(--as-blue-900) !important; line-height: 1.3; margin-bottom: 2px; } .as-dip-action-sub { display: block; font-size: 13px; font-weight: 600; color: var(--as-blue-600) !important; line-height: 1.35; } .as-dip-register-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } .as-dip-btn { flex: 1; min-width: 200px; display: inline-block; text-align: center; padding: 16px 22px; font-size: 16px; font-weight: 800; border-radius: 8px; text-decoration: none !important; transition: background 0.15s; } .as-dip-btn-primary { background: var(--as-blue-700); color: #fff !important; border: 2px solid var(--as-blue-700); } .as-dip-btn-primary:hover { background: var(--as-blue-800); border-color: var(--as-blue-800); color: #fff !important; } .as-dip-btn-outline { background: #fff; color: var(--as-blue-800) !important; border: 2px solid var(--as-blue-400); } .as-dip-btn-outline:hover { background: var(--as-blue-50); color: var(--as-blue-900) !important; } .as-dip-warning { background: #fff8e6; border: 1px solid #e6c878; border-left: 5px solid #c47a12; border-radius: 10px; padding: 18px 20px; margin-bottom: 24px; font-size: 16px; font-weight: 700; line-height: 1.5; color: #5c4a12; } .as-dip-phone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .as-dip-phone-card { background: var(--as-blue-50); border: 1px solid var(--as-blue-200); border-radius: 10px; padding: 20px; text-align: center; } .as-dip-phone-label { display: block; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--as-blue-800); margin-bottom: 12px; line-height: 1.35; } .as-dip-phone-card .as-dip-btn { min-width: 0; width: 100%; padding: 12px 16px; font-size: 15px; } .as-dip-aside-img { width: 100%; border-radius: 12px; border: 1px solid #c5d8e8; box-shadow: 0 4px 20px rgba(6, 21, 37, 0.08); display: block; object-fit: cover; } .as-dip-aside-facts { margin-top: 16px; background: #fff; border: 1px solid #c5d8e8; border-radius: 12px; padding: 20px 22px; box-shadow: 0 2px 12px rgba(6, 21, 37, 0.06); } .as-dip-aside-facts h4 { margin: 0 0 12px !important; padding: 0 !important; font-size: 0.85rem !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--as-blue-700) !important; } .as-dip-aside-facts ul { margin: 0; padding: 0 0 0 18px; font-size: 15px; line-height: 1.65; color: var(--as-text); } .as-dip-aside-facts li { margin-bottom: 8px; } .as-dip-aside-facts li:last-child { margin-bottom: 0; } @media (max-width: 960px) { .as-dip-layout { grid-template-columns: 1fr; } .as-dip-actions { grid-template-columns: 1fr; } .as-dip-phone-grid { grid-template-columns: 1fr; } .as-dip-register-bar { flex-direction: column; } .as-dip-btn { min-width: 0; width: 100%; } } /* ── 3-Hour Safe and Sober page (green theme on DIP layout) ── */ .as-sober-theme { --as-sober-900: #0f3d28; --as-sober-800: #1a5c3a; --as-sober-700: #227048; --as-sober-600: #2a8f5c; --as-sober-500: #3daf73; --as-sober-50: #e8f7ef; --as-sober-200: #9dd4b4; --as-sober-400: #5cbb84; } .as-sober-theme .as-dip-hero { background: linear-gradient(135deg, var(--as-sober-900) 0%, var(--as-sober-700) 55%, var(--as-sober-600) 100%); border-bottom-color: var(--as-sober-500); } .as-sober-theme .as-dip-hero::before { background: radial-gradient(ellipse at 50% 0%, rgba(93, 187, 132, 0.24) 0%, transparent 60%); } .as-sober-theme .as-dip-highlight { border-left-color: var(--as-sober-600); } .as-sober-theme .as-dip-section-label { color: var(--as-sober-700) !important; } .as-sober-theme .as-dip-action-card:hover { border-color: var(--as-sober-400); } .as-sober-theme .as-dip-action-icon { background: var(--as-sober-50); border-color: var(--as-sober-200); } .as-sober-theme .as-dip-action-title { color: var(--as-sober-900) !important; } .as-sober-theme .as-dip-action-sub { color: var(--as-sober-700) !important; } .as-sober-theme .as-dip-btn-primary { background: var(--as-sober-700); border-color: var(--as-sober-700); } .as-sober-theme .as-dip-btn-primary:hover { background: var(--as-sober-800); border-color: var(--as-sober-800); } .as-sober-theme .as-dip-btn-outline { color: var(--as-sober-800) !important; border-color: var(--as-sober-400); } .as-sober-theme .as-dip-btn-outline:hover { background: var(--as-sober-50); color: var(--as-sober-900) !important; } .as-sober-theme .as-dip-phone-card { background: var(--as-sober-50); border-color: var(--as-sober-200); } .as-sober-theme .as-dip-phone-label { color: var(--as-sober-800); } .as-sober-theme .as-dip-aside-facts h4 { color: var(--as-sober-700) !important; } .as-sober-theme .as-back { color: var(--as-sober-900) !important; } .as-sober-theme .as-back a { color: var(--as-sober-800) !important; } /* ── Locations page ── */ .as-locations-page { padding: 0 0 48px !important; background: #eef4f9 !important; border-top: 1px solid var(--as-blue-600); border-bottom: 1px solid var(--as-blue-600); width: 100vw !important; max-width: none !important; position: relative; left: 50%; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box; } .as-locations-page > *:not(.as-locations-hero) { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); } .as-locations-hero { max-width: none !important; margin: 0 0 32px !important; padding: 48px clamp(20px, 5vw, 48px) 52px !important; background: linear-gradient(135deg, var(--as-blue-900) 0%, var(--as-blue-700) 55%, var(--as-blue-600) 100%); text-align: center; color: #fff; border-bottom: 3px solid var(--as-blue-500); position: relative; overflow: hidden; } .as-locations-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(90, 171, 216, 0.22) 0%, transparent 60%); pointer-events: none; } .as-locations-hero > * { position: relative; z-index: 1; } .as-locations-hero-kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.32); padding: 6px 14px; border-radius: 24px; margin-bottom: 14px; } .as-locations-hero h1 { margin: 0 0 14px !important; padding: 0 !important; border: none !important; font-size: clamp(1.65rem, 4vw, 2.25rem) !important; font-weight: 800 !important; line-height: 1.2 !important; color: #fff !important; max-width: 820px; margin-left: auto !important; margin-right: auto !important; } .as-locations-hero p { margin: 0 auto; max-width: 720px; font-size: clamp(16px, 2.1vw, 19px); font-weight: 600; line-height: 1.55; color: #fff !important; } .as-site .as-locations-page .as-locations-hero h1, .as-site .main .as-locations-hero h1 { color: #fff !important; border-bottom: none !important; } .as-site .as-locations-page .as-locations-hero p, .as-site .main .as-locations-hero p { color: #fff !important; } .as-locations-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; padding-bottom: 8px; } .as-locations-callout { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid #c5d8e8; border-left: 5px solid var(--as-blue-600); border-radius: 12px; padding: 20px 22px; margin-bottom: 28px; box-shadow: 0 4px 20px rgba(6, 21, 37, 0.08); font-size: 16px; line-height: 1.55; color: var(--as-text); } .as-locations-callout-icon { flex-shrink: 0; font-size: 22px; line-height: 1; } .as-locations-section-label { margin: 0 0 14px !important; padding: 0 !important; font-size: 0.85rem !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--as-blue-700) !important; } .as-locations-region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 32px; } .as-locations-region-grid-single { grid-template-columns: 1fr; max-width: 520px; } .as-locations-grid-single { grid-template-columns: 1fr; max-width: 520px; } .as-locations-region-card { background: #fff; border: 1px solid #c5d8e8; border-radius: 12px; padding: 22px 24px; box-shadow: 0 4px 20px rgba(6, 21, 37, 0.08); } .as-locations-region-card h3 { margin: 0 0 8px !important; padding: 0 !important; font-size: 1.1rem !important; font-weight: 800 !important; color: var(--as-blue-900) !important; border: none !important; } .as-locations-region-card p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--as-muted); } .as-locations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 32px; } .as-locations-card { background: #fff; border: 1px solid #c5d8e8; border-radius: 12px; padding: 20px 22px; box-shadow: 0 2px 12px rgba(6, 21, 37, 0.06); display: flex; flex-direction: column; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .as-locations-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(6, 21, 37, 0.12); border-color: var(--as-blue-400); } .as-locations-card-appt { border-style: dashed; border-color: var(--as-blue-300); background: var(--as-blue-50); } .as-locations-card-head { margin-bottom: 10px; } .as-locations-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--as-blue-700); background: var(--as-blue-50); border: 1px solid var(--as-blue-200); padding: 4px 10px; border-radius: 20px; margin-bottom: 8px; } .as-locations-card h3 { margin: 0 !important; padding: 0 !important; font-size: 1.15rem !important; font-weight: 800 !important; color: var(--as-blue-900) !important; border: none !important; line-height: 1.25 !important; } .as-locations-landmark { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--as-blue-700); line-height: 1.4; } .as-locations-addr { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--as-text); } .as-locations-hours { margin: 0 0 16px; font-size: 13px; font-weight: 700; color: var(--as-blue-600); line-height: 1.4; } .as-locations-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; } .as-locations-btn { display: inline-block; padding: 10px 16px; font-size: 14px; font-weight: 800; border-radius: 8px; text-decoration: none !important; border: 2px solid var(--as-blue-400); background: #fff; color: var(--as-blue-800) !important; transition: background 0.15s, border-color 0.15s, color 0.15s; text-align: center; } .as-locations-btn:hover { background: var(--as-blue-50); color: var(--as-blue-900) !important; } .as-locations-btn-primary { background: var(--as-blue-700); border-color: var(--as-blue-700); color: #fff !important; } .as-locations-btn-primary:hover { background: var(--as-blue-800); border-color: var(--as-blue-800); color: #fff !important; } .as-locations-btn-outline { background: transparent; } .as-locations-btn-lg { flex: 1; min-width: 180px; padding: 14px 20px; font-size: 15px; } .as-locations-cta-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; } .as-locations-aside { display: flex; flex-direction: column; gap: 14px; } .as-locations-aside-card { background: #fff; border: 1px solid #c5d8e8; border-radius: 12px; padding: 20px 22px; box-shadow: 0 2px 12px rgba(6, 21, 37, 0.06); } .as-locations-aside-card h4 { margin: 0 0 12px !important; padding: 0 !important; font-size: 0.85rem !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--as-blue-700) !important; } .as-locations-aside-card p, .as-locations-aside-card li { margin: 0; font-size: 14px; line-height: 1.55; color: var(--as-text); } .as-locations-aside-card ul { margin: 0; padding: 0 0 0 18px; } .as-locations-aside-card li { margin-bottom: 8px; } .as-locations-aside-card li:last-child { margin-bottom: 0; } .as-locations-aside-card a { font-weight: 700; } .as-locations-aside-highlight { background: var(--as-blue-50); border-color: var(--as-blue-200); } .as-locations-back-wrap { margin: 28px 0 0 !important; text-align: center; font-size: 15px; font-weight: 700; } .as-locations-back-wrap a { color: var(--as-blue-800) !important; } .as-site .main a.as-locations-btn-primary:link, .as-site .main a.as-locations-btn-primary:visited { color: #fff !important; } @media (max-width: 960px) { .as-locations-layout { grid-template-columns: 1fr; } .as-locations-region-grid { grid-template-columns: 1fr; } .as-locations-grid { grid-template-columns: 1fr; } .as-locations-cta-bar { flex-direction: column; } .as-locations-btn-lg { width: 100%; min-width: 0; } } /* ── FAQ page ── */ .as-faq-page { padding: 0 0 48px !important; background: #eef4f9 !important; border-top: 1px solid var(--as-blue-600); border-bottom: 1px solid var(--as-blue-600); width: 100vw !important; max-width: none !important; position: relative; left: 50%; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box; } .as-faq-page > *:not(.as-faq-hero) { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); } .as-faq-hero { max-width: none !important; margin: 0 0 32px !important; padding: 48px clamp(20px, 5vw, 48px) 52px !important; background: linear-gradient(135deg, var(--as-blue-900) 0%, var(--as-blue-700) 55%, var(--as-blue-600) 100%); text-align: center; color: #fff; border-bottom: 3px solid var(--as-blue-500); position: relative; overflow: hidden; } .as-faq-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(90, 171, 216, 0.22) 0%, transparent 60%); pointer-events: none; } .as-faq-hero > * { position: relative; z-index: 1; } .as-faq-hero-kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.32); padding: 6px 14px; border-radius: 24px; margin-bottom: 14px; } .as-faq-hero h1 { margin: 0 0 14px !important; padding: 0 !important; border: none !important; font-size: clamp(1.65rem, 4vw, 2.25rem) !important; font-weight: 800 !important; line-height: 1.2 !important; color: #fff !important; max-width: 820px; margin-left: auto !important; margin-right: auto !important; } .as-faq-hero p { margin: 0 auto; max-width: 720px; font-size: clamp(16px, 2.1vw, 19px); font-weight: 600; line-height: 1.55; color: #fff !important; } .as-site .as-faq-page .as-faq-hero h1, .as-site .main .as-faq-hero h1 { color: #fff !important; border-bottom: none !important; } .as-site .as-faq-page .as-faq-hero p, .as-site .main .as-faq-hero p { color: #fff !important; } .as-faq-layout { display: grid; grid-template-columns: 1fr 280px; gap: 28px; align-items: start; padding-bottom: 8px; } .as-faq-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .as-faq-jump a { display: inline-block; padding: 8px 14px; font-size: 13px; font-weight: 800; border-radius: 24px; text-decoration: none !important; background: #fff; border: 1px solid var(--as-blue-300); color: var(--as-blue-800) !important; transition: background 0.15s, border-color 0.15s; } .as-faq-jump a:hover { background: var(--as-blue-50); border-color: var(--as-blue-500); } .as-faq-group { margin-bottom: 32px; } .as-faq-group-label { margin: 0 0 14px !important; padding: 0 !important; font-size: 0.85rem !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--as-blue-700) !important; border: none !important; } .as-faq-item { background: #fff; border: 1px solid #c5d8e8; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 2px 10px rgba(6, 21, 37, 0.05); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; } .as-faq-item:hover { border-color: var(--as-blue-400); } .as-faq-item[open] { border-color: var(--as-blue-500); box-shadow: 0 4px 20px rgba(6, 21, 37, 0.1); } .as-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-size: 16px; font-weight: 800; line-height: 1.35; color: var(--as-blue-900); cursor: pointer; list-style: none; user-select: none; } .as-faq-item summary::-webkit-details-marker { display: none; } .as-faq-item summary::after { content: "+"; flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; line-height: 1; color: var(--as-blue-700); background: var(--as-blue-50); border: 1px solid var(--as-blue-200); border-radius: 8px; transition: transform 0.2s, background 0.15s; } .as-faq-item[open] summary::after { content: "−"; background: var(--as-blue-700); border-color: var(--as-blue-700); color: #fff; } .as-faq-answer { padding: 0 22px 20px; font-size: 15px; line-height: 1.65; color: var(--as-text); border-top: 1px solid #e8f0f6; } .as-faq-answer p { margin: 14px 0 0; color: var(--as-text) !important; } .as-faq-answer p:first-child { margin-top: 16px; } .as-faq-answer ul, .as-faq-answer ol { margin: 12px 0 0; padding: 0 0 0 20px; } .as-faq-answer li { margin-bottom: 8px; line-height: 1.55; } .as-faq-answer li:last-child { margin-bottom: 0; } .as-faq-answer a { font-weight: 700; } .as-faq-cta-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .as-faq-btn { display: inline-block; padding: 10px 16px; font-size: 14px; font-weight: 800; border-radius: 8px; text-decoration: none !important; border: 2px solid var(--as-blue-400); background: #fff; color: var(--as-blue-800) !important; transition: background 0.15s, border-color 0.15s; text-align: center; } .as-faq-btn:hover { background: var(--as-blue-50); color: var(--as-blue-900) !important; } .as-faq-btn-primary { background: var(--as-blue-700); border-color: var(--as-blue-700); color: #fff !important; } .as-faq-btn-primary:hover { background: var(--as-blue-800); border-color: var(--as-blue-800); color: #fff !important; } .as-faq-btn-lg { flex: 1; min-width: 180px; padding: 14px 20px; font-size: 15px; } .as-faq-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; } .as-faq-aside-card { background: #fff; border: 1px solid #c5d8e8; border-radius: 12px; padding: 20px 22px; box-shadow: 0 2px 12px rgba(6, 21, 37, 0.06); } .as-faq-aside-card h4 { margin: 0 0 12px !important; padding: 0 !important; font-size: 0.85rem !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--as-blue-700) !important; border: none !important; } .as-faq-aside-card p, .as-faq-aside-card li { margin: 0; font-size: 14px; line-height: 1.55; color: var(--as-text); } .as-faq-aside-card ul { margin: 0; padding: 0 0 0 18px; } .as-faq-aside-card li { margin-bottom: 8px; } .as-faq-aside-card li:last-child { margin-bottom: 0; } .as-faq-aside-card a { font-weight: 700; } .as-faq-aside-highlight { background: var(--as-blue-50); border-color: var(--as-blue-200); } .as-faq-back-wrap { margin: 28px 0 0 !important; text-align: center; font-size: 15px; font-weight: 700; } .as-faq-back-wrap a { color: var(--as-blue-800) !important; } .as-site .main a.as-faq-btn-primary:link, .as-site .main a.as-faq-btn-primary:visited { color: #fff !important; } @media (max-width: 960px) { .as-faq-layout { grid-template-columns: 1fr; } .as-faq-aside { position: static; } .as-faq-cta-bar { flex-direction: column; } .as-faq-btn-lg { width: 100%; min-width: 0; } } /* ── How-to DIP page ── */ .as-howto-page { padding: 0 0 48px !important; background: #eef4f9 !important; border-top: 1px solid var(--as-blue-600); border-bottom: 1px solid var(--as-blue-600); width: 100vw !important; max-width: none !important; position: relative; left: 50%; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box; } .as-howto-page > *:not(.as-howto-hero) { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); } .as-howto-back { padding-top: 16px; margin: 0 0 8px !important; font-weight: 700; font-size: 15px; } .as-howto-back a { color: var(--as-blue-800) !important; } .as-howto-hero { max-width: none !important; margin: 0 0 32px !important; padding: 48px clamp(20px, 5vw, 48px) 52px !important; background: linear-gradient(135deg, var(--as-blue-900) 0%, var(--as-blue-700) 55%, var(--as-blue-600) 100%); text-align: center; color: #fff; border-bottom: 3px solid var(--as-blue-500); position: relative; overflow: hidden; } .as-howto-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(90, 171, 216, 0.22) 0%, transparent 60%); pointer-events: none; } .as-howto-hero > * { position: relative; z-index: 1; } .as-howto-hero-kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.32); padding: 6px 14px; border-radius: 24px; margin-bottom: 14px; } .as-howto-hero h1 { margin: 0 0 14px !important; padding: 0 !important; border: none !important; font-size: clamp(1.65rem, 4vw, 2.25rem) !important; font-weight: 800 !important; line-height: 1.2 !important; color: #fff !important; max-width: 860px; margin-left: auto !important; margin-right: auto !important; } .as-howto-hero p { margin: 0 auto; max-width: 720px; font-size: clamp(16px, 2.1vw, 19px); font-weight: 600; line-height: 1.55; color: #fff !important; } .as-site .as-howto-page .as-howto-hero h1, .as-site .main .as-howto-hero h1 { color: #fff !important; border-bottom: none !important; } .as-site .as-howto-page .as-howto-hero p, .as-site .main .as-howto-hero p { color: #fff !important; } .as-howto-layout { display: grid; grid-template-columns: 1fr 280px; gap: 28px; align-items: start; } .as-howto-warning { display: flex; gap: 14px; align-items: flex-start; background: #fff8e6; border: 1px solid #e6c878; border-left: 5px solid #c47a12; border-radius: 12px; padding: 18px 20px; margin-bottom: 28px; font-size: 16px; line-height: 1.55; color: #5c4a12; } .as-howto-warning-icon { flex-shrink: 0; font-size: 22px; line-height: 1; } .as-howto-warning a { font-weight: 700; color: #8a5a0a !important; } .as-howto-section-label { margin: 0 0 16px !important; padding: 0 !important; font-size: 0.85rem !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--as-blue-700) !important; border: none !important; } .as-howto-steps { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 14px; counter-reset: howto-step; } .as-howto-step { display: flex; align-items: flex-start; gap: 18px; background: #fff; border: 1px solid #c5d8e8; border-radius: 14px; padding: 22px 24px; box-shadow: 0 4px 20px rgba(6, 21, 37, 0.08); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .as-howto-step:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(6, 21, 37, 0.12); border-color: var(--as-blue-400); } .as-howto-step-num { flex-shrink: 0; width: 44px; height: 44px; background: var(--as-blue-700); color: #fff; font-weight: 800; font-size: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 4px 12px rgba(6, 21, 37, 0.18); } .as-howto-step-body { flex: 1; min-width: 0; } .as-howto-step-body h3 { margin: 0 0 8px !important; padding: 0 !important; font-size: 1.15rem !important; font-weight: 800 !important; color: var(--as-blue-900) !important; border: none !important; line-height: 1.3 !important; } .as-howto-step-body p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--as-text) !important; } .as-howto-step-link { display: inline-block; font-size: 14px; font-weight: 800; color: var(--as-blue-700) !important; text-decoration: none !important; } .as-howto-step-link:hover { text-decoration: underline !important; } .as-howto-highlight { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid #c5d8e8; border-left: 5px solid var(--as-blue-600); border-radius: 12px; padding: 20px 22px; margin-bottom: 28px; box-shadow: 0 4px 20px rgba(6, 21, 37, 0.08); font-size: 16px; line-height: 1.6; color: var(--as-text); } .as-howto-highlight-icon { flex-shrink: 0; font-size: 22px; line-height: 1; } .as-howto-checklist { margin: 0 0 28px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .as-howto-checklist li { background: #fff; border: 1px solid #c5d8e8; border-radius: 10px; padding: 14px 16px 14px 40px; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--as-text); position: relative; } .as-howto-checklist li::before { content: "✓"; position: absolute; left: 14px; top: 14px; font-weight: 800; color: var(--as-blue-700); } .as-howto-note { margin: -12px 0 28px; font-size: 15px; line-height: 1.55; color: var(--as-muted) !important; } .as-howto-note a { font-weight: 700; } .as-howto-centers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 28px; } .as-howto-center-card { background: #fff; border: 1px solid #c5d8e8; border-radius: 12px; padding: 20px 22px; box-shadow: 0 2px 12px rgba(6, 21, 37, 0.06); } .as-howto-center-card h3 { margin: 0 0 6px !important; padding: 0 !important; font-size: 1rem !important; font-weight: 800 !important; color: var(--as-blue-900) !important; border: none !important; } .as-howto-center-hours { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--as-blue-600); } .as-howto-center-addr { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--as-text); } .as-howto-center-phone { display: inline-block; font-size: 14px; font-weight: 800; color: var(--as-blue-700) !important; text-decoration: none !important; } .as-howto-center-phone:hover { text-decoration: underline !important; } .as-howto-cta-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; } .as-howto-btn { display: inline-block; padding: 10px 16px; font-size: 14px; font-weight: 800; border-radius: 8px; text-decoration: none !important; border: 2px solid var(--as-blue-400); background: #fff; color: var(--as-blue-800) !important; transition: background 0.15s, border-color 0.15s; text-align: center; } .as-howto-btn:hover { background: var(--as-blue-50); color: var(--as-blue-900) !important; } .as-howto-btn-primary { background: var(--as-blue-700); border-color: var(--as-blue-700); color: #fff !important; } .as-howto-btn-primary:hover { background: var(--as-blue-800); border-color: var(--as-blue-800); color: #fff !important; } .as-howto-btn-lg { flex: 1; min-width: 200px; padding: 14px 20px; font-size: 15px; } .as-howto-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; } .as-howto-aside-card { background: #fff; border: 1px solid #c5d8e8; border-radius: 12px; padding: 20px 22px; box-shadow: 0 2px 12px rgba(6, 21, 37, 0.06); } .as-howto-aside-card h4 { margin: 0 0 12px !important; padding: 0 !important; font-size: 0.85rem !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--as-blue-700) !important; border: none !important; } .as-howto-aside-card p, .as-howto-aside-card li { margin: 0; font-size: 14px; line-height: 1.55; color: var(--as-text); } .as-howto-aside-card ul { margin: 0; padding: 0 0 0 18px; } .as-howto-aside-card li { margin-bottom: 8px; } .as-howto-aside-card li:last-child { margin-bottom: 0; } .as-howto-aside-card a { font-weight: 700; } .as-howto-aside-highlight { background: var(--as-blue-50); border-color: var(--as-blue-200); } .as-howto-back-wrap { margin: 28px 0 0 !important; text-align: center; font-size: 15px; font-weight: 700; } .as-howto-back-wrap a { color: var(--as-blue-800) !important; } .as-site .main a.as-howto-btn-primary:link, .as-site .main a.as-howto-btn-primary:visited { color: #fff !important; } @media (max-width: 960px) { .as-howto-layout { grid-template-columns: 1fr; } .as-howto-aside { position: static; } .as-howto-checklist { grid-template-columns: 1fr; } .as-howto-centers { grid-template-columns: 1fr; } .as-howto-cta-bar { flex-direction: column; } .as-howto-btn-lg { width: 100%; min-width: 0; } } /* ── Contact page ── */ .as-contact-page { padding: 0 0 48px !important; background: #eef4f9 !important; border-top: 1px solid var(--as-blue-600); border-bottom: 1px solid var(--as-blue-600); width: 100vw !important; max-width: none !important; position: relative; left: 50%; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box; } .as-contact-page > * { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); } .as-contact-page > .as-contact-hero { max-width: none !important; padding-left: clamp(20px, 5vw, 48px) !important; padding-right: clamp(20px, 5vw, 48px) !important; } .as-contact-hero { margin: 0 0 32px !important; padding: 48px clamp(20px, 5vw, 48px) 52px !important; background: linear-gradient(135deg, var(--as-blue-900) 0%, var(--as-blue-700) 55%, var(--as-blue-600) 100%); text-align: center; color: #fff; border-bottom: 3px solid var(--as-blue-500); position: relative; overflow: hidden; } .as-contact-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(90, 171, 216, 0.22) 0%, transparent 60%); pointer-events: none; } .as-contact-hero > * { position: relative; z-index: 1; } .as-contact-hero-kicker { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; margin-bottom: 12px; text-shadow: 0 1px 3px rgba(0, 20, 40, 0.35); } .as-contact-hero h1, .as-contact-hero h2 { margin: 0 0 12px !important; padding: 0 !important; border: none !important; font-size: clamp(1.65rem, 3.5vw, 2.2rem) !important; font-weight: 800 !important; line-height: 1.2 !important; color: #ffffff !important; text-shadow: 0 2px 8px rgba(0, 20, 40, 0.35); } .as-contact-hero p { margin: 0 auto; max-width: 640px; font-size: 17px; line-height: 1.6; color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 20, 40, 0.28); } .as-site .as-contact-page .as-contact-hero h1, .as-site .as-contact-page .as-contact-hero h2, .as-site .main .as-contact-hero h1, .as-site .main .as-contact-hero h2 { color: #ffffff !important; border-bottom: none !important; } .as-site .as-contact-page .as-contact-hero p, .as-site .main .as-contact-hero p, .as-site .as-contact-page .as-contact-hero .as-contact-hero-kicker, .as-site .main .as-contact-hero .as-contact-hero-kicker { color: #ffffff !important; } .as-contact-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; padding-bottom: 8px; } .as-contact-phone-grid { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; } .as-contact-phone-card { background: #fff; border: 1px solid #c5d8e8; border-radius: 12px; padding: 22px 24px; box-shadow: 0 4px 20px rgba(6, 21, 37, 0.08); border-left: 5px solid var(--as-blue-600); } .as-contact-phone-card-dui { border-left-color: #c47a12; } .as-contact-phone-card h3 { margin: 0 0 8px !important; padding: 0 !important; border: none !important; font-size: 1rem !important; font-weight: 800 !important; color: var(--as-blue-900) !important; line-height: 1.35 !important; } .as-contact-phone-card p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--as-muted); } .as-contact-phone-card .as-contact-btn { margin-top: 4px; } .as-contact-btn { display: inline-block; padding: 12px 20px; background: var(--as-blue-50); color: var(--as-blue-800) !important; border: 2px solid var(--as-blue-400); border-radius: 8px; font-size: 16px; font-weight: 800; text-decoration: none !important; transition: background 0.15s, border-color 0.15s; } .as-contact-btn:hover { background: var(--as-blue-100); color: var(--as-blue-900) !important; border-color: var(--as-blue-600); } .as-contact-btn-primary { background: var(--as-blue-700); color: #fff !important; border-color: var(--as-blue-700); } .as-contact-btn-primary:hover { background: var(--as-blue-800); border-color: var(--as-blue-800); color: #fff !important; } .as-contact-btn-block { display: block; text-align: center; width: 100%; box-sizing: border-box; } .as-contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } .as-contact-actions .as-contact-btn { flex: 1; min-width: 180px; text-align: center; } .as-contact-notice { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #c5d8e8; border-left: 4px solid var(--as-blue-600); border-radius: 10px; padding: 18px 20px; margin-bottom: 20px; font-size: 14px; line-height: 1.6; color: var(--as-text); } .as-contact-notice-icon { flex-shrink: 0; font-size: 18px; line-height: 1; color: var(--as-blue-600); } .as-contact-path-code { display: inline-block; margin-top: 6px; padding: 4px 10px; background: var(--as-blue-50); border: 1px solid var(--as-blue-200); border-radius: 6px; font-family: Consolas, "Courier New", monospace; font-size: 13px; font-weight: 600; color: var(--as-blue-900); } .as-contact-aside-card { background: #fff; border: 1px solid #c5d8e8; border-radius: 12px; padding: 22px 24px; margin-bottom: 16px; box-shadow: 0 2px 12px rgba(6, 21, 37, 0.06); } .as-contact-aside-card h4 { margin: 0 0 12px !important; padding: 0 !important; font-size: 0.85rem !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--as-blue-700) !important; } .as-contact-aside-card p, .as-contact-aside-card li { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--as-text); } .as-contact-aside-card ul { margin: 0; padding: 0 0 0 18px; } .as-contact-aside-card a { font-weight: 700; } .as-contact-back-wrap { text-align: center; padding-top: 8px; padding-bottom: 8px; } .as-contact-form-panel { background: #fff; border: 1px solid #c5d8e8; border-radius: 12px; padding: 28px; margin-top: 28px; box-shadow: 0 4px 20px rgba(6, 21, 37, 0.08); } .as-contact-form-panel > h2 { margin: 0 0 8px !important; padding: 0 !important; border: none !important; font-size: 1.25rem !important; font-weight: 800 !important; color: var(--as-blue-900) !important; } .as-contact-form-panel > p { margin: 0 0 20px; font-size: 15px; color: var(--as-muted); } .as-site .main a.as-contact-btn-primary:link, .as-site .main a.as-contact-btn-primary:visited { color: #fff !important; } .as-site .main a.as-contact-btn:not(.as-contact-btn-primary):link, .as-site .main a.as-contact-btn:not(.as-contact-btn-primary):visited { color: var(--as-blue-800) !important; } @media (max-width: 960px) { .as-contact-layout { grid-template-columns: 1fr; } .as-contact-actions { flex-direction: column; } .as-contact-actions .as-contact-btn { min-width: 0; width: 100%; } } /* ── Homepage hero — full-width darker blue band ── */ .as-hero { background: linear-gradient(165deg, var(--as-blue-900) 0%, var(--as-blue-800) 35%, var(--as-blue-700) 70%, var(--as-blue-600) 100%); color: #fff; padding: 56px clamp(20px, 4vw, 48px) 64px; text-align: center; width: 100vw !important; position: relative; left: 50%; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box; border-bottom: 2px solid var(--as-blue-950); } .as-hero-inner { max-width: none; width: 100%; margin: 0 auto; position: relative; z-index: 1; padding: 0 clamp(12px, 3vw, 32px); box-sizing: border-box; } .as-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 20%, rgba(90, 171, 216, 0.2) 0%, transparent 65%); pointer-events: none; } .as-hero-badge { display: inline-block; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.35); padding: 8px 18px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; color: #fff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .as-hero h2 { font-size: 2.25rem; font-weight: 800; color: #fff !important; margin: 0 0 16px; line-height: 1.2; font-variant: normal; text-transform: none; } .as-hero p.lead { font-size: 1.1rem; color: #fff !important; margin: 0 auto 32px; line-height: 1.65; max-width: 960px; } .as-hero-actions { display: inline-flex; flex-wrap: nowrap; gap: 0; justify-content: stretch; align-items: stretch; margin: 0 auto 36px; max-width: min(960px, 100%); width: 100%; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 8px; overflow: hidden; box-shadow: 0 6px 24px rgba(6, 21, 37, 0.25); background: var(--as-blue-600); } .as-hero-actions .as-btn { flex: 1 1 0; min-width: 0; border-radius: 0 !important; border: none !important; border-right: 1px solid rgba(255, 255, 255, 0.28) !important; box-shadow: none !important; margin: 0; padding: 15px 16px; font-size: 14px; text-align: center; white-space: nowrap; background: var(--as-blue-600) !important; color: #fff !important; transition: background 0.15s ease; } .as-hero-actions .as-btn:last-child { border-right: none !important; } .as-hero-actions .as-btn, .as-hero-actions .as-btn:link, .as-hero-actions .as-btn:visited, .as-hero-actions .as-btn-primary, .as-hero-actions .as-btn-orange, .as-hero-actions .as-btn-outline { background: var(--as-blue-600) !important; border-color: transparent !important; color: #fff !important; } .as-hero-actions .as-btn:hover, .as-hero-actions .as-btn-primary:hover, .as-hero-actions .as-btn-orange:hover, .as-hero-actions .as-btn-outline:hover { background: var(--as-blue-500) !important; color: #fff !important; } .as-hero-slideshow { position: relative; max-width: min(960px, 100%); width: 100%; margin: 0 auto; border-radius: var(--as-radius); overflow: hidden; box-shadow: 0 12px 36px rgba(43, 127, 201, 0.25); border: 3px solid #fff; /* Fixed height — prevents page jump when slides change */ height: clamp(240px, 48vw, 440px); max-height: 440px; } .as-hero-slide-stage { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--as-blue-950); } .as-hero-slide-stage .as-hero-slide, .as-hero-slideshow img.as-hero-slide, .as-hero-slideshow img[name="SlideShow"] { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; object-position: center center; display: block; opacity: 0; transform: none; will-change: transform, opacity; pointer-events: none; user-select: none; } .as-hero-slide-stage .as-hero-slide.is-active { opacity: 1; z-index: 2; } .as-hero-slide-stage .as-hero-slide.is-leaving { z-index: 1; } /* ── Slideshow transition effects ── */ .as-fx-fade.is-transitioning .as-hero-slide.is-active { animation: asFxFadeIn 0.9s ease forwards; } .as-fx-fade.is-transitioning .as-hero-slide.is-leaving { animation: asFxFadeOut 0.9s ease forwards; } .as-fx-slide-left.is-transitioning .as-hero-slide.is-active { animation: asFxSlideInRight 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .as-fx-slide-left.is-transitioning .as-hero-slide.is-leaving { animation: asFxSlideOutLeft 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .as-fx-slide-right.is-transitioning .as-hero-slide.is-active { animation: asFxSlideInLeft 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .as-fx-slide-right.is-transitioning .as-hero-slide.is-leaving { animation: asFxSlideOutRight 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .as-fx-zoom.is-transitioning .as-hero-slide.is-active { animation: asFxZoomIn 1s ease forwards; } .as-fx-zoom.is-transitioning .as-hero-slide.is-leaving { animation: asFxZoomOut 1s ease forwards; } .as-fx-rise.is-transitioning .as-hero-slide.is-active { animation: asFxRiseIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .as-fx-rise.is-transitioning .as-hero-slide.is-leaving { animation: asFxFadeOut 0.95s ease forwards; } @keyframes asFxFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes asFxFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes asFxSlideInRight { from { opacity: 0.35; transform: translateX(8%); } to { opacity: 1; transform: translateX(0); } } @keyframes asFxSlideOutLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0.25; transform: translateX(-8%); } } @keyframes asFxSlideInLeft { from { opacity: 0.35; transform: translateX(-8%); } to { opacity: 1; transform: translateX(0); } } @keyframes asFxSlideOutRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0.25; transform: translateX(8%); } } @keyframes asFxZoomIn { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } } @keyframes asFxZoomOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } } @keyframes asFxRiseIn { from { opacity: 0; transform: translateY(6%); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .as-hero-slide-stage .as-hero-slide { animation: none !important; transition: opacity 0.4s ease; } } .as-hero-dots { display: none !important; } .as-hero-dots input { margin: 0 3px; cursor: pointer; accent-color: var(--as-blue-600); } .as-hero-dots span { color: #fff !important; font-size: 11px; margin-left: 6px; } .as-video-hidden { display: none !important; } /* ── Homepage program cards — full-width section ── */ .as-home-programs { padding: 52px clamp(20px, 4vw, 48px); width: 100%; max-width: none; margin: 0; position: relative; z-index: 2; background: linear-gradient(180deg, #5a94b8 0%, #6a9fbe 50%, #7aadcc 100%); border-radius: 0; box-shadow: none; border-top: 2px solid var(--as-blue-700); border-bottom: 2px solid var(--as-blue-700); } .as-home-programs .as-section-title, .as-home-programs .as-card-grid { max-width: min(1200px, 100%); width: 100%; margin-left: auto; margin-right: auto; padding-left: clamp(12px, 3vw, 32px); padding-right: clamp(12px, 3vw, 32px); box-sizing: border-box; } .as-section-title { text-align: center; margin-bottom: 36px; } .as-section-title h2 { font-size: 1.75rem; color: #fff !important; font-weight: 800; margin: 0 0 10px; border: none; padding: 0; } .as-section-title h2::after { content: ""; display: block; width: 56px; height: 4px; background: linear-gradient(90deg, var(--as-blue-300), #fff); margin: 14px auto 0; border-radius: 2px; } .as-section-title p { color: #fff !important; margin: 16px 0 0; font-size: 16px; } .as-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* Student MainMenu — bottom row cards fill full width */ .as-mainmenu-programs .as-mainmenu-primary { max-width: min(1200px, 100%); margin: 0 auto; } .as-mainmenu-primary-two { grid-template-columns: repeat(2, 1fr); } .as-mainmenu-secondary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: min(1200px, 100%); width: 100%; margin: 22px auto 0; } .as-mainmenu-wide-card { display: flex; flex-direction: column; min-height: 148px; } .as-mainmenu-wide-card .as-card-body { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px 20px; } .as-mainmenu-wide-card .as-card-body p { margin: 0; max-width: 36em; } .as-mainmenu-secondary .as-mainmenu-wide-card:only-child { grid-column: 1 / -1; } .as-mainmenu-schedules { max-width: min(1200px, 100%); margin: 40px auto 0; padding: 0 clamp(12px, 3vw, 24px); } .as-mainmenu-schedules-head { margin-bottom: 20px; text-align: center; } .as-mainmenu-schedules-kicker { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--as-blue-700); margin-bottom: 8px; } .as-mainmenu-schedules-head h3 { margin: 0 0 10px; font-size: 1.65rem; font-weight: 800; color: var(--as-blue-900); } .as-mainmenu-schedules-head p { margin: 0 auto; max-width: 42em; color: var(--as-text-muted); font-size: 16px; line-height: 1.55; } .as-mainmenu-schedules-panel { background: #fff; border: 1px solid var(--as-border); border-radius: var(--as-radius); box-shadow: 0 4px 20px rgba(19, 72, 117, 0.08); overflow: hidden; } .as-schedule-grid { width: 100% !important; border-collapse: collapse; } .as-schedule-grid-head th { background: linear-gradient(135deg, var(--as-blue-900), var(--as-blue-800)) !important; color: #fff !important; font-weight: 700; font-size: 13px; padding: 14px 12px !important; text-align: left; border: none !important; } .as-schedule-grid-row td, .as-schedule-grid-row-alt td { padding: 12px !important; border-bottom: 1px solid var(--as-border); font-size: 14px; vertical-align: top; } .as-schedule-grid-row-alt td { background: var(--as-blue-50); } .as-schedule-grid a { font-weight: 600; color: var(--as-blue-800) !important; } .as-schedules-empty { padding: 40px clamp(20px, 4vw, 48px); text-align: center; background: linear-gradient(180deg, var(--as-blue-50) 0%, #fff 100%); } .as-schedules-empty-kicker { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--as-blue-700); } .as-schedules-empty h4 { margin: 0 0 12px; font-size: 1.35rem; font-weight: 800; color: var(--as-blue-900); } .as-schedules-empty-lead { margin: 0 auto 24px; max-width: 36em; color: var(--as-text-muted); font-size: 15px; line-height: 1.6; } .as-schedules-empty-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; } .as-card { background: var(--as-white); border-radius: var(--as-radius); box-shadow: 0 4px 16px rgba(43, 127, 201, 0.1); overflow: hidden; border: 1px solid var(--as-border); transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; } .as-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(43, 127, 201, 0.18); border-color: var(--as-blue-400); } .as-card-bar { padding: 15px 14px; color: #fff !important; font-weight: 700; font-size: 13px; text-align: center; line-height: 1.4; } .as-card-bar a, .as-card-bar a:link, .as-card-bar a:visited, .as-card-bar a:hover { color: #fff !important; text-decoration: none; } .as-card-bar-dip { background: linear-gradient(135deg, var(--as-blue-900), var(--as-blue-800)); } .as-card-bar-dui { background: linear-gradient(135deg, var(--as-blue-800), var(--as-blue-700)); } .as-card-bar-sober { background: linear-gradient(135deg, var(--as-blue-700), var(--as-blue-600)); } .as-card-body { padding: 20px 18px; background: #fff; } .as-card-body img { border-radius: 6px; margin-bottom: 12px; border: 1px solid var(--as-border); } .as-card-body p { margin: 0 0 14px; line-height: 1.6; color: var(--as-muted); font-size: 14px; } .as-card-body .as-card-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--as-blue-600); margin-bottom: 8px; } .as-card-link { font-weight: 700; color: var(--as-blue-700) !important; font-size: 14px; } .as-card-link:hover { color: var(--as-blue-500) !important; } .as-trust-band { background: linear-gradient(90deg, #5a94b8 0%, #6a9fbe 50%, #5a94b8 100%); border-top: 2px solid var(--as-blue-700); border-bottom: 2px solid var(--as-blue-700); padding: 32px clamp(20px, 4vw, 48px); text-align: center; width: 100%; } .as-trust-band p { max-width: 900px; margin: 0 auto; color: #fff; font-size: 16px; } .as-trust-band strong { color: #fff; } .as-trust-band a { font-weight: 700; color: #cce5f5 !important; } /* ── Footer — full-width blue band ── */ .footer { background: linear-gradient(90deg, var(--as-blue-950) 0%, var(--as-blue-900) 50%, var(--as-blue-850) 100%) !important; color: #a8d4ef !important; padding: 36px clamp(20px, 4vw, 48px) !important; text-align: left !important; margin-top: 0 !important; border-top: 3px solid var(--as-blue-700); width: 100% !important; max-width: none !important; } .footer #Topfooter { padding-left: 0 !important; color: #dbeefe !important; max-width: 1200px; margin: 0 auto; } .footer a.alinkNew, .as-site .footer a:link, .as-site .footer a:visited { color: #fff !important; font-weight: 600 !important; padding: 0 10px !important; } .footer a.alinkNew:hover, .as-site .footer a:hover { color: #fff !important; background: rgba(255, 255, 255, 0.15) !important; border-radius: 4px; } .footer i { font-style: normal; display: block; line-height: 1.8; color: #dbeefe !important; } .footer .as-footer-links { margin-bottom: 16px; font-size: 14px; } .footer .as-footer-copy { font-size: 13px; color: #c5e6fa !important; } /* Main content links — exclude hero buttons & card headers */ .as-site .main a:link, .as-site .main a:visited { color: var(--as-blue-700) !important; } .as-site .main a:hover { color: var(--as-blue-500) !important; } /* Button-style CTAs — must beat .as-site .main a:link (blue on blue = invisible) */ .as-site .main a.as-prog-cta:link, .as-site .main a.as-prog-cta:visited, .as-site .main a.as-fees-cta:link, .as-site .main a.as-fees-cta:visited, .as-site .main a.as-dip-btn-primary:link, .as-site .main a.as-dip-btn-primary:visited, .as-site .main a.as-fees-cta:not(.as-fees-cta-phone):not(.as-fees-cta-outline):link, .as-site .main a.as-fees-cta:not(.as-fees-cta-phone):not(.as-fees-cta-outline):visited, .as-site .main a.as-prog-cta:not(.as-prog-cta-phone):not(.as-prog-cta-outline):link, .as-site .main a.as-prog-cta:not(.as-prog-cta-phone):not(.as-prog-cta-outline):visited, .as-site .main a.as-schedules-btn-primary:link, .as-site .main a.as-schedules-btn-primary:visited { color: #fff !important; } .as-site .main a.as-prog-cta-phone:link, .as-site .main a.as-prog-cta-phone:visited, .as-site .main a.as-fees-cta-phone:link, .as-site .main a.as-fees-cta-phone:visited, .as-site .main a.as-dip-btn-outline:link, .as-site .main a.as-dip-btn-outline:visited, .as-site .main a.as-prog-cta-outline:link, .as-site .main a.as-prog-cta-outline:visited, .as-site .main a.as-fees-cta-outline:link, .as-site .main a.as-fees-cta-outline:visited, .as-site .main a.as-schedules-btn-outline:link, .as-site .main a.as-schedules-btn-outline:visited, .as-site .main a.as-schedules-cta:link, .as-site .main a.as-schedules-cta:visited { color: var(--as-blue-800) !important; } .as-site .main a.as-prog-cta:hover, .as-site .main a.as-fees-cta:hover, .as-site .main a.as-dip-btn-primary:hover, .as-site .main a.as-schedules-btn-primary:hover { color: #fff !important; } .as-site .main a.as-prog-cta-phone:hover, .as-site .main a.as-fees-cta-phone:hover, .as-site .main a.as-dip-btn-outline:hover, .as-site .main a.as-prog-cta-outline:hover, .as-site .main a.as-fees-cta-outline:hover, .as-site .main a.as-schedules-btn-outline:hover, .as-site .main a.as-schedules-cta:hover { color: var(--as-blue-900) !important; } /* Header / top-level action buttons */ .as-site .header a.as-btn-primary:link, .as-site .header a.as-btn-primary:visited, .as-site .header a.as-btn-orange:link, .as-site .header a.as-btn-orange:visited, .as-site a.as-btn-primary:link, .as-site a.as-btn-primary:visited, .as-site a.as-btn-orange:link, .as-site a.as-btn-orange:visited { color: #fff !important; } .as-site .header a.as-btn-outline:link, .as-site .header a.as-btn-outline:visited, .as-site a.as-btn-outline:link, .as-site a.as-btn-outline:visited { color: var(--as-blue-700) !important; } .as-site .main a.as-schedules-callout-phone:link, .as-site .main a.as-schedules-callout-phone:visited, .as-site .main a.as-schedules-callout-phone:hover { color: #fff !important; } .as-site .as-hero a.as-btn:link, .as-site .as-hero a.as-btn:visited, .as-site .as-hero a.as-btn:hover, .as-site .as-home-programs .as-card-bar a:link, .as-site .as-home-programs .as-card-bar a:visited, .as-site .as-home-programs .as-card-bar a:hover { color: #fff !important; } /* Colored-surface links — keep readable */ .as-site .as-topbar a:link, .as-site .as-topbar a:visited { color: #fff !important; } .as-site .nav > ul > li > a:link, .as-site .nav > ul > li > a:visited { color: #fff !important; } .as-site .nav > ul > li > a:hover { color: #fff !important; } .as-site .as-card-bar a:link, .as-site .as-card-bar a:visited { color: #fff !important; } .preview-banner { background: var(--as-blue-800); color: #fff; text-align: center; padding: 8px 16px; font-size: 13px; margin: 0; } .preview-banner a { color: #fff !important; text-decoration: underline; } /* ── Login shell ── */ .as-login-shell { background: #eef4f9 !important; min-height: 100vh; } .as-login-shell .as-login-header { padding: 0; background: transparent; } .as-login-shell .as-login-header .as-brand-row { border-bottom: 3px solid var(--as-blue-400); } .as-login-shell .as-login-main { padding: 0 !important; max-width: none !important; margin: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .as-login-shell .main table { width: 100%; } /* ── Auth pages (login preview + login form) ── */ .as-auth-page { padding: 0 0 48px !important; background: #eef4f9 !important; border-top: 1px solid var(--as-blue-600); width: 100vw !important; max-width: none !important; position: relative; left: 50%; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box; } .as-site .main:not(:has(.as-hero)):has(.as-auth-page) { padding: 0 !important; } .as-auth-page-inner { max-width: 520px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 24px) 0; } .as-auth-panel { background: #fff; border: 1px solid #c5d8e8; border-radius: 14px; box-shadow: 0 8px 32px rgba(6, 21, 37, 0.1); overflow: hidden; } .as-auth-panel-head { padding: 28px 28px 20px; text-align: center; background: linear-gradient(180deg, var(--as-blue-50) 0%, #fff 100%); border-bottom: 1px solid #dce8f0; } .as-auth-panel-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 14px; background: var(--as-blue-700); color: #fff; font-size: 22px; font-weight: 800; border-radius: 50%; line-height: 1; } .as-auth-panel-head h2 { margin: 0 0 8px !important; padding: 0 !important; border: none !important; font-size: 1.45rem !important; font-weight: 800 !important; color: var(--as-blue-900) !important; } .as-auth-panel-head p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--as-muted); } .as-auth-panel-body { padding: 24px 28px 28px; } .as-auth-preview-banner { display: flex; gap: 12px; align-items: flex-start; background: #fff8e6; border: 1px solid #e6c878; border-left: 4px solid #c47a12; border-radius: 10px; padding: 16px 18px; margin-bottom: 22px; font-size: 14px; line-height: 1.6; color: #5c4a12; } .as-auth-preview-banner-icon { flex-shrink: 0; font-size: 18px; line-height: 1; } .as-auth-live-path { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; } .as-auth-live-path-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--as-blue-600); } .as-auth-live-path code, .as-auth-path-code { display: block; padding: 12px 16px; background: var(--as-blue-50); border: 1px solid var(--as-blue-200); border-radius: 8px; font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: 600; color: var(--as-blue-900); word-break: break-all; } .as-auth-mock-form { margin-bottom: 22px; opacity: 0.72; pointer-events: none; user-select: none; } .as-auth-field { margin-bottom: 16px; } .as-auth-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--as-blue-800); text-transform: uppercase; letter-spacing: 0.04em; } .as-auth-field input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #c5d8e8; border-radius: 8px; font-size: 15px; background: #f8fbfd; color: var(--as-muted); } .as-auth-mock-btn { width: 100%; padding: 13px 18px; background: var(--as-blue-700); color: #fff; font-weight: 700; font-size: 15px; border: none; border-radius: 8px; cursor: not-allowed; } .as-auth-links { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid #e8f0f6; text-align: center; font-size: 14px; line-height: 1.5; } .as-auth-links a { font-weight: 700; color: var(--as-blue-700) !important; text-decoration: none; } .as-auth-links a:hover { color: var(--as-blue-900) !important; text-decoration: underline; } .as-auth-links-divider { color: var(--as-muted); font-size: 13px; } .as-auth-back { display: inline-block; margin-top: 20px; font-size: 14px; font-weight: 700; color: var(--as-blue-800) !important; text-decoration: none; } .as-auth-back:hover { text-decoration: underline; } /* Register preview / auth extras */ .as-register-page-inner { max-width: 560px; } .as-register-section-label { margin: 0 0 12px !important; padding: 0 !important; border: none !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--as-blue-800) !important; } .as-register-programs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; } .as-register-program { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; padding: 14px 16px; background: #f8fbfd; border: 1px solid #dce8f0; border-radius: 10px; text-decoration: none !important; transition: border-color 0.15s, background 0.15s; } .as-register-program:hover { background: #eef6fc; border-color: var(--as-blue-400); } .as-register-program-badge { grid-row: 1 / span 2; display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--as-blue-700); background: var(--as-blue-50); border: 1px solid var(--as-blue-200); padding: 6px 10px; border-radius: 20px; white-space: nowrap; } .as-register-program-badge-green { color: #1e6b42; background: #e8f7ef; border-color: #9dd4b4; } .as-register-program-badge-muted { color: #475569; background: #f1f5f9; border-color: #cbd5e1; } .as-register-program-title { font-size: 15px; font-weight: 700; color: var(--as-blue-900) !important; line-height: 1.3; } .as-register-program-sub { font-size: 13px; color: var(--as-muted); line-height: 1.4; } .as-register-phone-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; margin-bottom: 22px; background: linear-gradient(135deg, var(--as-blue-900) 0%, var(--as-blue-700) 100%); border-radius: 10px; color: #fff; } .as-register-phone-text strong { display: block; font-size: 15px; margin-bottom: 4px; } .as-register-phone-text p { margin: 0; font-size: 13px; line-height: 1.5; color: #e8f4fc !important; } .as-register-phone-btn { display: inline-block; font-size: 18px; font-weight: 800; color: #fff !important; text-decoration: none !important; padding: 10px 18px; border: 2px solid rgba(255, 255, 255, 0.45); border-radius: 8px; white-space: nowrap; } .as-register-phone-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff !important; } .as-site .as-register-page .as-register-program-title, .as-site .main .as-register-page .as-register-program-title { color: var(--as-blue-900) !important; } .as-site .as-register-page .as-register-phone-btn, .as-site .main .as-register-page .as-register-phone-btn { color: #fff !important; } /* Live ASP.NET login form polish */ .as-login-shell .as-auth-panel { max-width: 520px; margin: 28px auto 48px; } .as-login-shell .as-auth-panel-body fieldset.login { border: none; margin: 0; padding: 0; } .as-login-shell .as-auth-panel-body fieldset.login legend { display: none; } .as-login-shell .as-auth-panel-body fieldset.login p { margin: 0 0 16px; } .as-login-shell .as-auth-panel-body fieldset.login label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--as-blue-800); text-transform: uppercase; letter-spacing: 0.04em; } .as-login-shell .as-auth-panel-body input.textEntry, .as-login-shell .as-auth-panel-body input.passwordEntry { width: 100% !important; box-sizing: border-box; padding: 12px 14px !important; border: 1px solid #c5d8e8 !important; border-radius: 8px !important; font-size: 15px !important; background: #fff !important; } .as-login-shell .as-auth-panel-body .submitButton { text-align: left; margin-top: 8px; } .as-login-shell .as-auth-panel-body .submitButton input, .as-login-shell .as-auth-panel-body .submitButton button { width: 100%; padding: 13px 18px !important; background: var(--as-blue-700) !important; color: #fff !important; font-weight: 700 !important; font-size: 15px !important; border: none !important; border-radius: 8px !important; cursor: pointer; } .as-login-shell .as-auth-panel-body .submitButton input:hover { background: var(--as-blue-800) !important; } .as-login-shell .accountInfo { width: 100% !important; } .as-login-shell .as-auth-intro { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--as-muted); } .as-login-shell .as-auth-intro a { font-weight: 700; } .as-login-shell .as-auth-panel-head h2, .as-site .as-login-shell .as-auth-panel-head h2 { color: var(--as-blue-900) !important; border-bottom: none !important; padding-bottom: 0 !important; } .as-auth-success { padding: 14px 16px; border-radius: 8px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: 15px; line-height: 1.55; } .as-login-shell .as-auth-links { flex-wrap: wrap; gap: 8px 14px; } @media (max-width: 900px) { .as-card-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } .as-mainmenu-primary-two { grid-template-columns: 1fr; max-width: 440px; } .as-mainmenu-secondary { grid-template-columns: 1fr; max-width: 440px; } .as-mainmenu-secondary .as-mainmenu-wide-card:only-child { grid-column: auto; } .as-hero h2 { font-size: 1.55rem; } .as-home-programs { padding: 36px 20px; } .as-site .main:not(:has(.as-hero)) { padding: 20px !important; } .as-login-shell .as-login-main { margin: 12px; } .as-hero-actions { flex-direction: column; max-width: 340px; } .as-hero-actions .as-btn { border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important; white-space: normal; } .as-hero-actions .as-btn:last-child { border-bottom: none !important; } } /* ── Schedules page ── */ .as-schedules-page { width: 100vw; max-width: none !important; position: relative; left: 50%; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box; } .as-schedules-page > *:not(.as-schedules-hero) { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); } .as-schedules-page .as-back { padding-top: 16px; font-weight: 700; color: var(--as-blue-900) !important; } .as-schedules-page .as-back a { color: var(--as-blue-800) !important; } .as-schedules-hero { max-width: none !important; margin: 0 0 32px !important; padding: 48px clamp(20px, 5vw, 48px) 52px !important; background: linear-gradient(135deg, var(--as-blue-900) 0%, var(--as-blue-700) 55%, var(--as-blue-600) 100%); text-align: center; color: #fff; border-bottom: 3px solid var(--as-blue-500); position: relative; overflow: hidden; } .as-schedules-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(90, 171, 216, 0.22) 0%, transparent 60%); pointer-events: none; } .as-schedules-hero > * { position: relative; z-index: 1; } .as-schedules-hero-kicker { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; margin-bottom: 12px; text-shadow: 0 1px 3px rgba(0, 20, 40, 0.35); } .as-schedules-hero h2 { color: #ffffff !important; font-size: clamp(1.75rem, 3.5vw, 2.25rem) !important; font-weight: 800 !important; margin: 0 0 12px !important; padding: 0 !important; border: none !important; line-height: 1.2 !important; text-shadow: 0 2px 6px rgba(0, 20, 40, 0.3); } .as-schedules-hero p { margin: 0 auto; max-width: 620px; font-size: 17px; line-height: 1.6; color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 20, 40, 0.28); } .as-site .as-schedules-page .as-schedules-hero h2, .as-site .main .as-schedules-hero h2 { color: #ffffff !important; border-bottom: none !important; padding-bottom: 0 !important; } .as-site .as-schedules-page .as-schedules-hero p, .as-site .main .as-schedules-hero p, .as-site .as-schedules-page .as-schedules-hero .as-schedules-hero-kicker, .as-site .main .as-schedules-hero .as-schedules-hero-kicker { color: #ffffff !important; } .as-schedules-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; padding-bottom: 32px; } .as-schedules-main { display: flex; flex-direction: column; gap: 20px; } .as-schedules-card { background: #fff; border: 1px solid #c5d8e8; border-radius: 12px; box-shadow: 0 4px 20px rgba(6, 21, 37, 0.08); overflow: hidden; } .as-schedules-card-classroom { border-top: 4px solid var(--as-blue-600); } .as-schedules-card-online { border-top: 4px solid #2a8f5c; } .as-schedules-card-head { padding: 22px 24px 16px; background: linear-gradient(180deg, #f8fbfd 0%, #fff 100%); border-bottom: 1px solid #dce8f0; } .as-schedules-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--as-blue-700); background: var(--as-blue-50); border: 1px solid var(--as-blue-200); padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; } .as-schedules-card-online .as-schedules-badge { color: #1e6b42; background: #e8f7ef; border-color: #9dd4b4; } .as-schedules-card-head h3 { margin: 0 0 10px !important; padding: 0 !important; border: none !important; font-size: 1.25rem !important; font-weight: 800 !important; color: var(--as-blue-900) !important; line-height: 1.3 !important; } .as-schedules-chip { display: inline-block; font-size: 13px; font-weight: 700; color: var(--as-blue-800); background: #e3f2fa; border: 1px solid #a8d4ef; padding: 5px 12px; border-radius: 20px; } .as-schedules-chip-green { color: #1e6b42; background: #e8f7ef; border-color: #9dd4b4; } .as-schedules-card-body { padding: 20px 24px 24px; } .as-schedules-lead { margin: 0 0 18px; font-size: 15px; line-height: 1.65; color: var(--as-text); } .as-schedules-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; } .as-schedules-fact { background: #f4f9fc; border: 1px solid #dce8f0; border-radius: 10px; padding: 14px 16px; } .as-schedules-fact-label { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--as-blue-700); margin-bottom: 4px; } .as-schedules-fact-value { display: block; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--as-blue-900); } .as-schedules-cta { display: inline-block; font-size: 14px; font-weight: 700; color: var(--as-blue-800) !important; text-decoration: none; padding: 10px 18px; border: 2px solid var(--as-blue-600); border-radius: 8px; background: #fff; transition: background 0.15s, color 0.15s; } .as-schedules-cta:hover { background: var(--as-blue-600); color: #fff !important; } .as-schedules-actions { display: flex; flex-wrap: wrap; gap: 10px; } .as-schedules-btn { display: inline-block; font-size: 14px; font-weight: 700; padding: 12px 20px; border-radius: 8px; text-decoration: none; cursor: pointer; border: 2px solid transparent; } .as-schedules-btn-primary { background: var(--as-blue-700); color: #fff !important; border-color: var(--as-blue-800); } .as-schedules-btn-primary:hover { background: var(--as-blue-800); } .as-schedules-btn-outline { background: #fff; color: var(--as-blue-800) !important; border-color: var(--as-blue-600); } .as-schedules-btn-outline:hover { background: var(--as-blue-50); } .as-schedules-callout { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; background: linear-gradient(135deg, var(--as-blue-900) 0%, var(--as-blue-700) 100%); border-radius: 12px; color: #fff; box-shadow: 0 6px 24px rgba(6, 21, 37, 0.18); } .as-schedules-callout-icon { font-size: 28px; line-height: 1; flex-shrink: 0; opacity: 0.9; } .as-schedules-callout-text strong { display: block; font-size: 17px; margin-bottom: 6px; } .as-schedules-callout-text p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: #e8f4fc !important; } .as-schedules-callout-phone { display: inline-block; font-size: 20px; font-weight: 800; color: #fff !important; text-decoration: none; letter-spacing: 0.02em; } .as-schedules-callout-phone:hover { text-decoration: underline; color: #cce5f5 !important; } .as-schedules-portal { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; background: #fff; border: 1px solid #c5d8e8; border-left: 5px solid var(--as-blue-500); border-radius: 10px; box-shadow: 0 2px 12px rgba(6, 21, 37, 0.06); } .as-schedules-portal-icon { font-size: 26px; line-height: 1; flex-shrink: 0; } .as-schedules-portal-text h4 { margin: 0 0 8px !important; padding: 0 !important; border: none !important; font-size: 16px !important; font-weight: 800 !important; color: var(--as-blue-900) !important; } .as-schedules-portal-text p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--as-text); } .as-schedules-portal-links { font-size: 14px; font-weight: 700; } .as-schedules-portal-links a { color: var(--as-blue-800) !important; text-decoration: none; } .as-schedules-portal-links a:hover { text-decoration: underline; } .as-schedules-portal-links span { color: #94a3b8; margin: 0 6px; } .as-schedules-aside { display: flex; flex-direction: column; gap: 16px; } .as-schedules-aside-img { width: 100%; height: auto; border-radius: 10px; border: 1px solid #c5d8e8; display: block; } .as-schedules-aside-panel { background: #fff; border: 1px solid #c5d8e8; border-radius: 10px; padding: 18px 20px; box-shadow: 0 2px 12px rgba(6, 21, 37, 0.06); } .as-schedules-aside-panel-muted { background: #f8fbfd; } .as-schedules-aside-panel h4 { margin: 0 0 12px !important; padding: 0 !important; border: none !important; font-size: 15px !important; font-weight: 800 !important; color: var(--as-blue-900) !important; } .as-schedules-aside-list { margin: 0 0 14px; padding: 0; list-style: none; font-size: 13px; line-height: 1.65; color: var(--as-text); } .as-schedules-aside-list li { padding: 8px 0; border-bottom: 1px solid #e8f0f5; } .as-schedules-aside-list li:last-child { border-bottom: none; } .as-schedules-aside-link { font-size: 13px; font-weight: 700; color: var(--as-blue-800) !important; text-decoration: none; } .as-schedules-aside-link:hover { text-decoration: underline; } .as-schedules-aside-panel-muted p { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--as-text); } .as-schedules-aside-chat { width: 100%; padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--as-blue-800); background: #fff; border: 2px solid var(--as-blue-600); border-radius: 8px; cursor: pointer; } .as-schedules-aside-chat:hover { background: var(--as-blue-50); } @media (max-width: 900px) { .as-schedules-layout { grid-template-columns: 1fr; } .as-schedules-facts { grid-template-columns: 1fr; } }