w section-contactDetails.php
vh.css zeruje border-radius => wszędzie !important.
========================================================================= */
/* -------------------------------------------------------------------------
1) HERO (section-headerContact)
------------------------------------------------------------------------- */
.contactHero{ margin:28px 0 40px; }
.contactHero .container{
position:relative;
background:linear-gradient(180deg,#f6f8fc 0%,#eaf0fb 100%);
border:1px solid #e8ecf6;
border-radius:22px !important;
padding:60px 24px 54px;
overflow:hidden;
}
.contactHero .container > .absolute{ inset:0; }
.contactHero .container > .absolute span{ background:transparent !important; opacity:1 !important; }
.contactHero .container > .absolute img{ opacity:0 !important; }
/* nagłówek: granat, wyśrodkowany */
.contactHero .wp-page-invert{ max-width:760px; margin:0 auto 26px; text-align:center; }
.contactHero .wp-page-invert h1,
.contactHero .wp-page-invert h2,
.contactHero .wp-page-invert h3{
color:#2A304B !important; font-size:34px !important; font-weight:600 !important;
letter-spacing:-.5px; line-height:1.2 !important; margin:0 0 10px;
}
.contactHero .wp-page-invert p{
color:#6b7180 !important; font-size:15.5px !important; line-height:1.6 !important; margin:0;
}
/* FIX #2: usuń pomarańczowy "highlight" z nagłówka (mark + inline-tło + klasy Gutenberg) */
.contactHero .wp-page-invert mark,
.contactHero .wp-page-invert ins,
.contactHero .wp-page-invert [style*="background"],
.contactHero .wp-page-invert [class*="background"]{
background:none !important; background-color:transparent !important;
box-shadow:none !important; color:inherit !important; padding:0 !important; border-radius:0 !important;
}
/* realne źródło kwadracika: pusta pigułka .label-primary (#FFEDD5) z pola ACF */
.contactHero .wp-page-invert .label-primary{ display:none !important; }
/* FIX #1: krótki nagłówek w jednej linii (tylko desktop; na mobile może się zawinąć) */
@media (min-width:769px){
.contactHero .wp-page-invert h1,
.contactHero .wp-page-invert h2,
.contactHero .wp-page-invert h3{ white-space:nowrap; }
}
/* wyszukiwarka */
.contactHero .bg-white.p-4{
background:transparent !important; padding:0 !important; box-shadow:none !important;
max-width:600px; margin:0 auto;
}
.contactHero .shadow-dome{
background:#fff !important; border:1px solid #e1e4ec !important;
border-radius:14px !important; box-shadow:0 6px 24px rgba(42,48,75,.07) !important;
overflow:visible !important; transition:border-color .18s, box-shadow .18s;
}
.contactHero .shadow-dome:focus-within{
border-color:#0A56AD !important; box-shadow:0 0 0 3px rgba(10,86,173,.12) !important;
}
.contactHero input[type="search"]{
border:0 !important; background:transparent !important;
padding:16px 16px 16px 46px !important; font-size:15px !important; color:#2A304B !important;
}
.contactHero input[type="search"]::placeholder{ color:#9aa0b0 !important; }
.contactHero .shadow-dome .text-dome-blue svg{ color:#9aa0b0 !important; stroke:#9aa0b0 !important; }
.contactHero .btn-dome-primary{
display:flex; align-items:center; justify-content:center; height:100%;
background:#0A56AD !important; border:0 !important; border-radius:10px !important;
color:#fff !important; font-weight:700 !important; letter-spacing:.02em; transition:background .15s;
}
.contactHero .btn-dome-primary:hover{ background:#094a96 !important; }
/* chipy */
.contactHero .flex.flex-wrap{ gap:10px; margin-top:22px; }
.contactHero .flex.flex-wrap > a{
background:#fff !important; border:1px solid #e1e4ec !important; border-radius:999px !important;
color:#2A304B !important; font-size:13.5px !important; font-weight:600 !important;
padding:11px 20px !important; margin:0 !important; box-shadow:0 1px 2px rgba(42,48,75,.05);
transition:border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.contactHero .flex.flex-wrap > a:hover{
border-color:#0A56AD !important; color:#0A56AD !important; background:#fff !important;
box-shadow:0 6px 18px rgba(10,86,173,.10); transform:translateY(-1px);
}
.contactHero .flex.flex-wrap > a svg{ width:15px; height:15px; }
/* -------------------------------------------------------------------------
2) FORMULARZ (#contactForm)
------------------------------------------------------------------------- */
#contactForm > div.border-2{
border:1px solid #e1e4ec !important; border-radius:16px !important;
box-shadow:0 14px 44px rgba(42,48,75,.09) !important; background:#fff !important; padding:34px !important;
}
/* FIX #3: badge nieprzezroczysty (linia karty nie prześwituje) */
#contactForm > span{
background:#e9f0fb !important; color:#0A56AD !important; z-index:2;
font-size:11px !important; font-weight:700 !important; letter-spacing:.12em; text-transform:uppercase;
padding:8px 16px !important; border-radius:999px !important; box-shadow:0 1px 2px rgba(42,48,75,.06);
}
#contactForm > div.border-2 > p{
color:#2A304B !important; font-size:17px !important; font-weight:600 !important; margin:0 0 18px !important;
}
#contactForm .wpcf7-form input[type="text"],
#contactForm .wpcf7-form input[type="email"],
#contactForm .wpcf7-form input[type="tel"],
#contactForm .wpcf7-form textarea,
#contactForm .wpcf7-form select{
width:100%; border:1.5px solid #e1e4ec !important; border-radius:12px !important;
padding:14px 15px !important; font-size:15px !important; font-weight:500 !important; color:#2A304B !important;
background-color:#fff !important; box-shadow:none !important; transition:border-color .15s, box-shadow .15s;
}
#contactForm .wpcf7-form input:focus,
#contactForm .wpcf7-form textarea:focus,
#contactForm .wpcf7-form select:focus{
border-color:#0A56AD !important; box-shadow:0 0 0 3px rgba(10,86,173,.12) !important; outline:none !important;
}
#contactForm .wpcf7-form ::placeholder{ color:#9aa0b0 !important; font-weight:500; }
#contactForm .wpcf7-form textarea{ min-height:130px; resize:vertical; }
#contactForm .wpcf7-form select{
-webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; padding-right:40px !important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0b0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
}
#contactForm .wpcf7-form input[type="checkbox"]{ border-radius:5px !important; accent-color:#0A56AD; }
#contactForm .wpcf7-form .wpcf7-list-item label{ font-size:12.5px !important; color:#6b7180 !important; line-height:1.5; }
#contactForm .wpcf7-form input[type="submit"],
#contactForm .wpcf7-form .wpcf7-submit{
background:#0A56AD !important; color:#fff !important; border:0 !important; border-radius:12px !important;
padding:14px 28px !important; font-size:14px !important; font-weight:700 !important; letter-spacing:.02em !important;
cursor:pointer; transition:background .15s, box-shadow .15s, transform .15s;
}
#contactForm .wpcf7-form input[type="submit"]:hover,
#contactForm .wpcf7-form .wpcf7-submit:hover{
background:#094a96 !important; box-shadow:0 8px 20px rgba(10,86,173,.22); transform:translateY(-1px);
}
/* FIX: podpowiedź, że zgoda jest wymagana (przycisk jest nieaktywny bez zaznaczenia) */
#contactForm .wpcf7-acceptance{ display:block; }
#contactForm .wpcf7-acceptance::after{
content:"Zaznaczenie zgody jest wymagane,aby wysłać wiadomość.";
display:block; margin-top:8px; font-size:12px; font-weight:600; color:#6b7180;
}
#contactForm .wpcf7-form.sent .wpcf7-acceptance::after,
#contactForm .wpcf7-form:has(.wpcf7-acceptance input:checked) .wpcf7-acceptance::after{ display:none !important; }
/* nieaktywny przycisk wygląda na nieaktywny (a nie na klikalny) */
#contactForm .wpcf7-submit:disabled,
#contactForm .wpcf7-submit[disabled],
#contactForm .wpcf7-submit[aria-disabled="true"]{
background:#c7d0dd !important; color:#fff !important; cursor:not-allowed !important;
box-shadow:none !important; transform:none !important;
}
/* FIX: komunikat po wysłaniu -> na GÓRĘ formularza (bez scrollowania) + wyraźny */
#contactForm .wpcf7-form{ display:flex; flex-direction:column; }
#contactForm .wpcf7-response-output{ order:-1; }
#contactForm .wpcf7-response-output:empty{ display:none !important; }
#contactForm .wpcf7-response-output:not(:empty){
margin:0 0 20px !important; padding:13px 16px !important; border-radius:10px !important;
border:1px solid #e1e4ec !important; border-left:4px solid #6b7180 !important;
background:#f7f8fb !important; color:#2A304B !important; font-size:14px !important; font-weight:600;
}
#contactForm .wpcf7-form.sent .wpcf7-response-output{
border-color:#bbf7d0 !important; border-left-color:#16a34a !important;
background:#f0fdf4 !important; color:#15803d !important;
}
#contactForm .wpcf7-form.invalid .wpcf7-response-output,
#contactForm .wpcf7-form.unaccepted .wpcf7-response-output{
border-color:#fde68a !important; border-left-color:#f59e0b !important;
background:#fffbeb !important; color:#b45309 !important;
}
#contactForm .wpcf7-form.failed .wpcf7-response-output,
#contactForm .wpcf7-form.spam .wpcf7-response-output{
border-color:#fecaca !important; border-left-color:#dc2626 !important;
background:#fef2f2 !important; color:#b91c1c !important;
}
/* -------------------------------------------------------------------------
3) DANE KONTAKTOWE (.contactInfo — lewa kolumna) [FIX #4]
------------------------------------------------------------------------- */
.contactInfo{ color:#2A304B; }
/* nagłówek sekcji ("Nie ma rozwiązania...") */
.contactInfo h1,
.contactInfo h2{
color:#2A304B !important; font-size:26px !important; font-weight:600 !important;
letter-spacing:-.3px; line-height:1.25 !important; margin:0 0 12px !important;
}
.contactInfo p{ color:#6b7180 !important; font-size:14px !important; line-height:1.6 !important; }
/* e-mail */
.contactInfo #email_hours h4{ align-items:center; margin:20px 0 14px; }
.contactInfo #email_hours h4 svg{ width:22px !important; height:auto; margin-right:11px !important; fill:#0A56AD; }
.contactInfo #email_hours h4 span{ color:#2A304B; font-size:19px; font-weight:700; }
/* karta "Dostępność Agentów" */
.contactInfo #email_hours > .bg-slate-100{
background:#f7f8fb !important; border:1px solid #edeff4; border-radius:12px !important;
padding:16px 18px !important; margin-bottom:20px !important;
}
.contactInfo #email_hours > .bg-slate-100 > span{ color:#6b7180 !important; font-weight:600; margin-bottom:12px !important; }
.contactInfo #email_hours .bg-slate-100 .flex.items-center{ margin-right:0 !important; gap:18px; }
.contactInfo #email_hours .bg-slate-100 .flex.items-center .flex{ margin-right:0 !important; }
.contactInfo #email_hours .bg-slate-100 span.text-sm{ color:#6b7180 !important; }
/* pointery -> okrągłe, stonowane statusy */
.contactInfo .pointer,
.contactInfo [class*="pointer__"]{ width:11px !important; height:11px !important; border-radius:50% !important; flex:0 0 auto; }
.contactInfo .pointer__green{ background:#22c55e !important; }
.contactInfo .pointer__yellow{ background:#f59e0b !important; }
.contactInfo .pointer__red{ background:#ef4444 !important; }
/* godziny */
.contactInfo #email_hours .grid.grid-cols-2{ gap:22px; margin-bottom:4px; }
.contactInfo #email_hours .grid > div > span.text-sm{
display:block; margin-bottom:10px; color:#9aa0b0 !important;
font-size:11.5px !important; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.contactInfo #email_hours .grid .flex.items-center{ margin-bottom:7px; }
.contactInfo #email_hours .grid .flex.items-center span{ color:#2A304B !important; font-size:15px !important; font-weight:600 !important; }
.contactInfo #email_hours .grid .pointer,
.contactInfo #email_hours .grid [class*="pointer__"]{ margin-right:10px !important; }
/* duplikat "VH.PL":nazwa_reklama==nazwa_firmy ->chowamy nagłówek h3 */ .contactInfo>h3{display:none!important}.contactInfo dl{margin-top:20px!important;padding-top:22px;border-top:1px solid #edeff4;display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:4px;align-items:start}.contactInfo dl>div{margin:0!important}.contactInfo dl>div:nth-child(1){grid-column:1;grid-row:1 / span 2}.contactInfo dl>div:nth-child(2){grid-column:1;grid-row:3}.contactInfo dl>div:nth-child(3){grid-column:1;grid-row:4}.contactInfo dl>div:nth-child(4){grid-column:2;grid-row:1}.contactInfo dl>div:nth-child(5){grid-column:2;grid-row:2}.contactInfo dl>div:nth-child(6){grid-column:2;grid-row:3}.contactInfo dl>div:nth-child(7){grid-column:1 / -1;grid-row:5}.contactInfo dl>div:nth-child(8){grid-column:1 / -1;grid-row:6}.contactInfo dl .font-bold dd{color:#2A304B;font-size:15px;font-weight:700}.contactInfo dl .text-sm dd{color:#6b7180;font-size:13.5px;line-height:1.55}.contactInfo dl .flex.items-center{gap:8px}.contactInfo dl .flex.items-center dt{color:#9aa0b0!important;font-weight:600;font-size:13px;min-width:52px}.contactInfo dl .flex.items-center dd{color:#2A304B;font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums}.contactInfo dl>div.my-4{background:#f7f8fb!important;border:1px solid #edeff4;border-radius:12px!important;padding:15px 17px!important;margin:14px 0 0!important}.contactInfo dl>div.my-4 dt.font-bold{color:#2A304B!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.05em;margin:0 0 9px!important}.contactInfo dl>div.my-4 dd,.contactInfo dl>div.my-4 dd div{color:#2A304B!important;font-size:14px!important;line-height:1.7!important;font-variant-numeric:tabular-nums;letter-spacing:.01em}@media (max-width:1024px){.contactHero .container{padding:48px 20px 44px}.contactHero .wp-page-invert h1,.contactHero .wp-page-invert h2,.contactHero .wp-page-invert h3{font-size:29px!important}#contactForm>div.border-2{padding:28px!important}.contactInfo h1,.contactInfo h2{font-size:24px!important}}@media (max-width:768px){.contactHero{margin:18px 0 26px}.contactHero .container{padding:36px 16px;border-radius:18px!important}.contactHero .wp-page-invert{margin-bottom:20px}.contactHero .wp-page-invert h1,.contactHero .wp-page-invert h2,.contactHero .wp-page-invert h3{font-size:23px!important}.contactHero .flex.flex-wrap{margin-top:16px}.contactHero .flex.flex-wrap>a{padding:10px 16px!important;font-size:13px!important}#contactForm{margin-top:8px}#contactForm>div.border-2{padding:22px!important;border-radius:14px!important}#contactForm>span{right:16px!important}.contactInfo #email_hours .bg-slate-100 .flex.items-center{gap:12px;flex-wrap:wrap}.contactInfo dl{grid-template-columns:1fr}.contactInfo dl>div{grid-column:1!important;grid-row:auto!important}.contactInfo dl>div.my-4{margin-top:12px!important}}