/* /assets/css/contact.css */ /* Scoped: only affects contact.html when */ body.contact-page{ --accent:#ff3b0a; --accent-2:#ff7a18; --bg-dark:#121316; --dark-2:#17181b; --on-dark:#e9ecf3; --txt:#111827; --muted:#6b7280; --line:rgba(17,24,39,.10); --radius-xl:28px; --radius-lg:20px; --radius-md:14px; --shadow-1:0 10px 30px rgba(0,0,0,.12); --shadow-2:0 18px 60px rgba(0,0,0,.22); background:#fff; color:var(--txt); } /* stop any global sticky header from interfering (you are using the pill nav instead) */ body.contact-page .site-header{ position:static !important; } /* keep container consistent on this page */ body.contact-page .container{ width:min(1180px, calc(100% - 48px)); margin-inline:auto; } /* ===== type helpers ===== */ body.contact-page .section{ padding:88px 0; } body.contact-page .center{ text-align:center; } body.contact-page .kicker{ letter-spacing:.16em; text-transform:uppercase; font-weight:700; font-size:.78rem; margin:0 0 14px; } body.contact-page .kicker--accent{ color:var(--accent); } body.contact-page .kicker--on-dark{ color:rgba(255,255,255,.75); } body.contact-page .h2{ font-size:clamp(1.8rem, 3.2vw, 2.6rem); line-height:1.1; margin:0 0 14px; color:var(--txt); } body.contact-page .serif{ font-family:ui-serif, Georgia, "Times New Roman", serif; font-style:italic; } body.contact-page .muted{ color:var(--muted); line-height:1.7; } /* ===== buttons ===== */ body.contact-page .btn{ text-decoration:none; border:1px solid transparent; font-weight:800; } body.contact-page .btn--pill{ border-radius:999px; } body.contact-page .btn--accent{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 18px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; box-shadow:var(--shadow-1); } body.contact-page .btn--ghost{ display:inline-flex; align-items:center; justify-content:center; padding:14px 18px; background:transparent; color:#111827; border-color:rgba(17,24,39,.14); } /* ===== PAGE HERO (dark rounded slab + pill nav, NOT sticky) ===== */ body.contact-page .page-hero{ width:min(1180px, calc(100% - 48px)); margin:28px auto 0; border-radius:26px; background:var(--dark-2); overflow:hidden; position:relative; min-height:360px; box-shadow:var(--shadow-2); } body.contact-page .page-hero__bg{ position:absolute; inset:0; background: radial-gradient(circle at 12% 30%, rgba(255,255,255,.10), transparent 55%), radial-gradient(circle at 86% 60%, rgba(255,255,255,.08), transparent 55%), radial-gradient(circle at 15% 70%, rgba(255,255,255,.06), transparent 55%); } body.contact-page .page-hero__nav{ position:absolute; top:18px; left:0; right:0; z-index:2; } body.contact-page .page-hero__content{ position:relative; z-index:1; min-height:360px; display:grid; place-items:center; text-align:center; padding:120px 20px 70px; } body.contact-page .page-hero__content h1{ margin:0 0 10px; color:#fff; font-size:clamp(2.2rem, 5vw, 3.4rem); font-weight:900; } body.contact-page .crumbs{ margin:0; color:rgba(255,255,255,.80); font-weight:800; } body.contact-page .crumbs a{ color:#fff; opacity:.9; } body.contact-page .crumbs a:hover{ opacity:1; } /* ===== PILL NAV (top only, not sticky) ===== */ body.contact-page .pill-header__inner{ width:min(1180px, calc(100% - 48px)); margin-inline:auto; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-radius:999px; padding:14px 18px; box-shadow:var(--shadow-2); display:flex; align-items:center; justify-content:space-between; gap:18px; } body.contact-page .pill-brand{ display:flex; align-items:center; gap:10px; color:#111827; text-decoration:none; font-weight:900; } body.contact-page .pill-brand img{ height:48px; width:auto; display:block; } /* kill old text logo parts */ body.contact-page .pill-brand__mark, body.contact-page .pill-brand__name{ display:none; } @media (max-width:980px){ body.contact-page .pill-brand img{ height:40px; } body.contact-page .pill-nav, body.contact-page .pill-cta__phone{ display:none; } } @media (max-width:560px){ body.contact-page .pill-brand img{ height:36px; } } body.contact-page .pill-nav{ display:flex; gap:18px; align-items:center; } body.contact-page .pill-nav__link{ text-decoration:none; color:#111827; font-weight:800; opacity:.9; padding:10px 10px; border-radius:999px; } body.contact-page .pill-nav__link:hover{ background:rgba(17,24,39,.06); } body.contact-page .pill-nav__link.is-active{ background:rgba(17,24,39,.08); } body.contact-page .pill-cta{ display:flex; align-items:center; gap:14px; } body.contact-page .pill-cta__phone{ display:flex; align-items:center; gap:10px; color:#111827; text-decoration:none; font-weight:800; opacity:.92; } body.contact-page .pill-cta__icon{ width:34px; height:34px; border-radius:999px; display:grid; place-items:center; background:rgba(17,24,39,.06); } /* ===== CONTACT FORM SECTION (headline + image left, form right) ===== */ body.contact-page .contact-slab{ background:#fff; } body.contact-page .contact-grid{ display:grid; grid-template-columns: 1fr 1.15fr; gap:34px; align-items:start; margin-top:10px; } body.contact-page .contact-left .h2{ font-size:clamp(2.0rem, 3.6vw, 3.0rem); letter-spacing:-0.02em; } body.contact-page .contact-figure{ margin-top:22px; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-1); height:280px; /* image later */ background: url("/assets/img/contact-figure.jpg") center/cover no-repeat; } body.contact-page .contact-figure img{ width:100%; height:100%; object-fit:cover; display:block; } /* form card layout like screenshot (no heavy card border; inputs are pills) */ body.contact-page .contact-form{ padding-top:8px; } body.contact-page .contact-form .form-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-bottom:18px; } body.contact-page .contact-form label{ display:block; font-weight:900; color:#111827; margin:0 0 10px; } body.contact-page .contact-form .field span{ display:block; font-weight:900; margin:0 0 10px; } body.contact-page .contact-form input, body.contact-page .contact-form textarea{ width:100%; padding:14px 16px; border-radius:999px; border:1px solid rgba(17,24,39,.12); background:#fff; font-family:inherit; font-size:0.98rem; outline:none; } body.contact-page .contact-form textarea{ border-radius:18px; min-height:160px; resize:vertical; } body.contact-page .contact-form input:focus, body.contact-page .contact-form textarea:focus{ border-color:rgba(255,59,10,.55); box-shadow:0 0 0 4px rgba(255,59,10,.12); } body.contact-page .contact-form .submit-row{ margin-top:16px; } body.contact-page .contact-form .btn--accent{ padding:12px 22px; min-width:160px; } /* ===== MAP + CONTACT CARDS (dark rounded slab like screenshot) ===== */ body.contact-page .map-slab{ padding: 0 0 88px; } body.contact-page .map-slab__inner{ background:var(--bg-dark); border-radius:26px; padding:28px; color:var(--on-dark); box-shadow:var(--shadow-2); width:min(1180px, calc(100% - 48px)); margin:0 auto; } body.contact-page .map-grid{ display:grid; grid-template-columns: 1.45fr .85fr; gap:18px; align-items:stretch; } body.contact-page .map-embed{ border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); min-height:340px; } body.contact-page .map-embed iframe{ width:100%; height:100%; border:0; display:block; } body.contact-page .info-stack{ display:grid; gap:14px; } body.contact-page .info-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:96px; } body.contact-page .info-card h3{ margin:0 0 8px; font-size:1.05rem; } body.contact-page .info-card p{ margin:0; color:rgba(233,236,243,.78); line-height:1.55; font-weight:700; } body.contact-page .info-ico{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); color:var(--accent); font-weight:950; flex:0 0 auto; } /* ===== FAQ (white section like screenshot) ===== */ body.contact-page .faq-slab{ background:#fff; padding:88px 0; } body.contact-page .faq-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap:34px; align-items:start; } body.contact-page .faq-left .h2{ font-size:clamp(2.0rem, 3.6vw, 3.0rem); letter-spacing:-0.02em; } body.contact-page .mini-card{ margin-top:22px; border-radius:18px; padding:18px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; box-shadow:var(--shadow-1); position:relative; overflow:hidden; } body.contact-page .mini-card::before{ content:""; position:absolute; right:-120px; top:-140px; width:420px; height:420px; border-radius:999px; background:rgba(255,255,255,.14); } body.contact-page .mini-card h3{ position:relative; margin:0 0 10px; font-size:1.05rem; } body.contact-page .mini-card p{ position:relative; margin:0 0 14px; opacity:.92; line-height:1.6; } body.contact-page .mini-card .btn{ position:relative; background:rgba(255,255,255,.92); color:#111827; border-color:transparent; padding:10px 16px; font-weight:900; } body.contact-page .faq-right{ border-top:1px solid rgba(17,24,39,.10); } body.contact-page .faq-item{ width:100%; text-align:left; border:0; background:transparent; padding:18px 0; border-bottom:1px solid rgba(17,24,39,.10); display:flex; justify-content:space-between; gap:14px; cursor:pointer; font-weight:950; color:#111827; } body.contact-page .faq-item .q{ font-size:1.02rem; } body.contact-page .faq-item .toggle{ color:rgba(17,24,39,.55); font-size:1.2rem; line-height:1; margin-top:2px; } body.contact-page .faq-item.is-open{ color:var(--accent); border-bottom-color:rgba(255,59,10,.45); } body.contact-page .faq-panel{ display:none; padding:0 0 18px; color:var(--muted); line-height:1.7; } body.contact-page .faq-item.is-open + .faq-panel{ display:block; } /* Add to assets/css/contact.css (keep scoped) */ /* Remove the earlier simple footer styling by overriding it here */ body.contact-page .contact-footer{ background: #14181c; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.78); } body.contact-page .contact-footer__inner{ max-width: 1120px; margin: 0 auto; padding: 42px 18px 22px; } /* CTA slab */ body.contact-page .footer-cta{ position: relative; overflow: hidden; border-radius: 18px; padding: 34px 34px; background: #ff3b0a; box-shadow: 0 18px 60px rgba(0,0,0,.45); display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; align-items: center; } body.contact-page .footer-cta__bg{ position: absolute; inset: 0; background: radial-gradient(600px 300px at 10% 0%, rgba(255,255,255,.16), transparent 60%), radial-gradient(520px 260px at 75% 10%, rgba(255,255,255,.12), transparent 62%), radial-gradient(240px 240px at 80% 30%, rgba(255,255,255,.10), transparent 65%), radial-gradient(340px 340px at 55% 85%, rgba(255,255,255,.10), transparent 68%); opacity: .85; pointer-events: none; } body.contact-page .footer-cta__left, body.contact-page .footer-cta__right{ position: relative; z-index: 1; } body.contact-page .footer-cta__kicker{ font-size: 12px; letter-spacing: .2px; font-weight: 650; opacity: .9; margin-bottom: 10px; color: rgba(255,255,255,.95); } body.contact-page .footer-cta__title{ margin: 0; color: #fff; font-size: 34px; line-height: 1.1; letter-spacing: -.3px; } body.contact-page .footer-cta__script{ font-style: italic; font-family: Georgia, "Times New Roman", serif; font-weight: 500; } body.contact-page .footer-cta__actions{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; } body.contact-page .footer-cta__btn{ display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-weight: 650; font-size: 13px; border: 1px solid rgba(255,255,255,.55); transition: transform .08s ease, background .2s ease, border-color .2s ease, color .2s ease; } body.contact-page .footer-cta__btn--solid{ background: #fff; color: #0f1316; border-color: #fff; } body.contact-page .footer-cta__btn--outline{ background: transparent; color: #fff; } body.contact-page .footer-cta__btn:active{ transform: translateY(1px); } /* Right contact blocks */ body.contact-page .cta-contact{ display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px 0; } body.contact-page .cta-contact__icon{ width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.20); border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; color: #fff; font-size: 14px; } body.contact-page .cta-contact__label{ font-size: 12px; color: rgba(255,255,255,.82); margin-bottom: 2px; } body.contact-page .cta-contact__value{ color: #fff; text-decoration: none; font-weight: 650; font-size: 14px; } body.contact-page .cta-contact__value:hover{ text-decoration: underline; text-underline-offset: 3px; } /* Columns */ body.contact-page .footer-cols{ display: grid; grid-template-columns: 1.1fr 1.1fr 1fr 1fr 1.2fr; gap: 24px; padding: 28px 0 18px; } body.contact-page .footer-col h3{ margin: 0 0 12px; font-size: 14px; color: rgba(255,255,255,.92); } body.contact-page .footer-col ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } body.contact-page .footer-col a{ color: rgba(255,255,255,.68); text-decoration: none; font-size: 13px; } body.contact-page .footer-col a:hover{ color: rgba(255,255,255,.92); text-decoration: underline; text-underline-offset: 3px; } body.contact-page .pill{ display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; margin-left: 8px; border-radius: 999px; background: rgba(255,59,10,.18); border: 1px solid rgba(255,59,10,.35); color: rgba(255,255,255,.92); font-size: 11px; font-weight: 650; } body.contact-page .pill--new{ background: rgba(255,59,10,.22); border-color: rgba(255,59,10,.45); } /* Social list in 2 columns like the reference */ body.contact-page .footer-col .social{ grid-template-columns: 1fr 1fr; gap: 10px 14px; } /* Contact list with small icons */ body.contact-page .contact-list li{ display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; color: rgba(255,255,255,.68); font-size: 13px; } body.contact-page .contact-list .icon{ opacity: .75; line-height: 1.2; margin-top: 1px; } /* Bottom bar */ body.contact-page .footer-bottom{ margin-top: 12px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; gap: 14px; } body.contact-page .footer-copy{ font-size: 12.5px; color: rgba(255,255,255,.65); } body.contact-page .footer-legal{ display: flex; gap: 14px; flex-wrap: wrap; } body.contact-page .footer-legal a{ font-size: 12.5px; color: rgba(255,255,255,.58); text-decoration: none; } body.contact-page .footer-legal a:hover{ color: rgba(255,255,255,.90); text-decoration: underline; text-underline-offset: 3px; } /* Responsive */ @media (max-width: 980px){ body.contact-page .footer-cta{ grid-template-columns: 1fr; padding: 28px 20px; } body.contact-page .footer-cols{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ body.contact-page .footer-cols{ grid-template-columns: 1fr; } body.contact-page .footer-bottom{ flex-direction: column; align-items: flex-start; } } /* ===== responsive ===== */ @media (max-width: 980px){ body.contact-page .pill-nav, body.contact-page .pill-cta__phone{ display:none; } body.contact-page .contact-grid{ grid-template-columns:1fr; } body.contact-page .contact-form .form-grid-2{ grid-template-columns:1fr; } body.contact-page .map-grid{ grid-template-columns:1fr; } body.contact-page .map-embed{ min-height:280px; } body.contact-page .faq-grid{ grid-template-columns:1fr; } body.contact-page .cta-orange{ grid-template-columns:1fr; } }