/** * Theme Name: VanWow * Description: VanWow - Custom WordPress Theme * Version: 1.0 **/ @font-face { font-display: block; font-family: 'Luckiest Guy'; src: local('LuckiestGuy-Regular'), url('link/font-face/LuckiestGuy-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-display: block; font-family: 'Permanent Marker'; src: local('PermanentMarker-Regular'), url('link/font-face/PermanentMarker-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-display: block; font-family: 'Poppins Regular'; src: local('Poppins-Regular'), url('link/font-face/Poppins-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-display: block; font-family: 'Poppins Bold'; src: local('Poppins-Regular'), url('link/font-face/Poppins-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-display: block; font-family: 'Poppins Black'; src: local('Poppins-Regular'), url('link/font-face/Poppins-Black.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } :root { --gap: 1rem; --gap-text: 0.5rem; --pad: 0.5rem; --padding: 1rem; --margin: 1rem; --form: #EEEEEE/* rgba(255,255,255,0.3) */; --field: white; --limit: 80rem; --border: #000000 solid medium; --shadow: 0 0 0 0.2rem rgba(0,0,0,0.25); --nav: 7rem; } ::placeholder {color: var(--lost);} ::-webkit-scrollbar {background-color: var(--dark); outline: var(--border); width: 1rem;} ::-webkit-scrollbar-thumb {background-color: var(--logo); /* border: var(--border); */} ::-webkit-scrollbar-thumb:hover {background-color: var(--pale);} ::-webkit-scrollbar-thumb:active {background-color: var(--grey);} * {box-sizing: border-box; font: 1rem/2rem 'Poppins Regular', sans-serif; margin: 0; padding: 0; /* text-wrap: balance; */} html {} body {background-color: var(--current); display: flex; flex-direction: column; height: 100%; min-height: 100dvh; width: 100%;} body.page-admin {scroll-padding-top: 9rem;} br, hr {display: none;} a {text-decoration: none;} h1 {font-family: 'Luckiest Guy', cursive; font-size: 3rem; line-height: 3rem; padding: var(--padding) 0 0 0; text-transform: uppercase;} h2 {font-family: 'Luckiest Guy', cursive; font-size: 2rem; line-height: 2rem; padding: var(--pad) 0 0 0; text-transform: uppercase;} h3 {font-family: 'Luckiest Guy', cursive; font-size: 2rem; line-height: 2rem; padding: var(--pad) 0 0 0; text-transform: uppercase;} h4 {font-family: 'Luckiest Guy', cursive; font-size: 1rem; text-transform: uppercase;} h5 {font-family: 'Luckiest Guy', cursive; font-size: 1rem; text-transform: uppercase;} h6 {font-family: 'Luckiest Guy', cursive; font-size: 1rem; text-transform: uppercase;} strong {font-family: 'Permanent Marker', sans-serif;} li, p, th, td {font-family: 'Poppins Regular', sans-serif;} small {font-size: small;} strong {font-weight: bold;} img, svg {display: block; height: 100%; width: 100%;} pre {background-color: var(--pale); border: var(--invalid) solid medium; padding: var(--padding); width: 100%;} sub {} sup {font-size: small; top: 0; position: absolute;} nav#nav_main {background-color: var(--logo); box-shadow: var(--shadow); display: grid; justify-content: space-between; inset: 0 0 auto 0; position: sticky; scroll-padding-top: var(--nav); width: 100%; z-index: 9999;} nav#nav_main > a {align-items: center; color: var(--current); display: flex; gap: var(--gap-text); grid-area: logo; min-height: 5rem; padding: var(--padding); position: relative; text-decoration: none;} nav#nav_main > a:focus, nav#nav_main > a:hover {color: var(--dark); text-decoration: none;} nav#nav_main > a svg {aspect-ratio: 1/1; color: var(--logo); display: block; max-width: 5rem;} nav#nav_main > a svg path#wow, nav#nav_main > a svg g#exclamation path {color: var(--logo,--dark);} nav#nav_main > a small {left: -100vw; position: absolute;} nav#nav_main ul#cta {align-items: center; background-color: var(--menu); display: flex; grid-area: cta; list-style: none; margin: 0 auto;} nav#nav_main ul#cta li {display: flex; justify-content: center;} nav#nav_main ul#cta a {align-items: center; color: var(--dark); display: flex; gap: var(--gap-text); justify-content: center; min-height: 5rem; padding: var(--padding); position: relative; text-decoration: none;} nav#nav_main ul#cta a:focus, nav#nav_main ul#cta a:hover {color: var(--pale); text-decoration: none;} nav#nav_main ul#cta a span {display: none;} nav#nav_main ul#cta img, nav#nav_main ul#cta svg {max-height: 3rem; max-width: 3rem;} nav#nav_main label {color: var(--dark); cursor: pointer; display: flex; grid-area: toggle; justify-content: center; padding: var(--padding);} nav#nav_main label:focus, nav#nav_main label:hover {} nav#nav_main label::after {font-size: 1.5rem; min-height: 2rem; min-width: 2rem; padding: var(--padding); text-align: center;} nav#nav_main label span {display: none;} nav#nav_main label svg {display: block; max-height: 3rem; max-width: 3rem;} nav#nav_main ul#menu-primary {align-items: center; display: flex; flex-direction: column;} nav#nav_main ul#menu-primary li { max-height: 5rem; min-width: fit-content; width: 100%;} nav#nav_main ul#menu-primary a {align-items: center; color: var(--dark); display: flex; gap: var(--gap-text); justify-content: center; min-height: 5rem; padding: var(--padding); text-decoration: none;} nav#nav_main ul#menu-primary a:focus, nav#nav_main ul#menu-primary a:hover {color: var(--pale); text-decoration: none;} nav#nav_main ul#menu-primary li.current-menu-item a, nav#nav_main ul#menu-primary li.current_page_item a {color: var(--pale);} nav#nav_main ul#menu-primary svg {max-height: 3rem; max-width: 3rem;} input#toggle ~ nav#nav_main {grid-template-areas: 'logo cta toggle' 'menu menu menu'; grid-template-rows: 7rem; min-height: var(--nav);} input#toggle ~ nav#nav_main label svg .show {display: block;} input#toggle ~ nav#nav_main label:not(:has(svg))::after {content: '\002B';} input#toggle ~ nav#nav_main ul#menu-primary {align-items: center; display: flex; flex-direction: column; grid-area: menu; height: 0; list-style: none; overflow-x: hidden; overflow-y: auto; scroll-padding-top: var(--nav); width: 100%;} input#toggle ~ nav#nav_main ul#menu-primary li {width: 100%;} input#toggle:checked ~ nav#nav_main {display: grid; grid-template-areas: 'logo cta toggle' 'menu menu menu'; min-height: 100dvh;} input#toggle:checked ~ nav#nav_main label svg .show {display: none;} input#toggle:checked ~ nav#nav_main label svg .show.hide {display: block;} input#toggle:checked ~ nav#nav_main label:not(:has(svg))::after {content: '\2212';} input#toggle:checked ~ nav#nav_main ul#menu-primary {grid-column: 1/-1; height: 100%; max-height: calc(100dvh - var(--nav)) !important;} #notification {background-color: var(--notice); color: var(--dark); display: flex; font-family: 'Permanent Marker', sans-serif; justify-content: center; padding: var(--pad) var(--padding);} #notification * {font-family: inherit;} header {align-items: center; display: flex; flex-direction: column; inset: 0; justify-content: center; position: relative;} header div {display: flex; flex-direction: column; gap: var(--gap);} header h1 {display: flex; flex-direction: column; font-family: 'Luckiest Guy', sans-serif; font-size: 3rem; line-height: 3rem; text-wrap: balance; position: relative; z-index: 9;} header br {display: block;} header strong {font-family: inherit; font-size: inherit; line-height: inherit;} header small {font-family: inherit; font-size: smaller;} header a.hilite {background-color: var(--pale); color: var(--logo); position: relative; z-index: 9;} header figure {position: relative; z-index: 9;} header figure img, header figure svg {max-height: 50dvh;} header figure svg g#vanwow {color: var(--logo);} header figure svg g#vanwow path#wow, header figure svg g#vanwow g#exclamation path {fill: var(--logo);} header figcaption {} header > img, header > svg {height: 100%; position: relative; width: 100%; z-index: 1;} header img.desktop {display: none;} header img.mobile {display: block;} main {display: flex; flex: 1; flex-direction: column;} ul#menu-admin {grid-column: 1/-1; min-height: 2rem; padding: 0;} ul#menu-admin {background-color: var(--dark); border-bottom: var(--border); border-top: var(--border); display: flex; gap: 3px; list-style: none; width: 100%;} ul#menu-admin li {flex: 1;} ul#menu-admin li.current-menu-item a, ul#menu-admin li.current_page_item a {background-color: var(--dark); color: var(--pale);} ul#menu-admin a {background-color: var(--logo); color: var(--dark); display: block; padding: var(--pad) var(--padding);} ul#menu-admin a:focus, ul#menu-admin a:hover {background-color: var(--dark); color: var(--pale);} article {display: flex; flex: 1; flex-direction: column; height: 100%; gap: var(--gap); margin: 0 auto; max-width: var(--limit); padding: var(--padding); width: 100%;} article.logged-in {max-width: 100% !important;} article > p {text-wrap: pretty;} section {align-items: center; display: flex; flex-direction: column; gap: var(--gap); justify-content: center;} section > * {margin: 0 auto; max-width: var(--limit); width: 100%;} table {background-color: var(--dark); border-collapse: collapse; border-spacing: 0.2rem; width: 100%;} thead th {border-bottom: var(--border);} th, td {background-color: var(--pale); vertical-align: top;} th {font-family: 'Poppins Bold', sans-serif; font-weight: bold; text-align: left; vertical-align: top;} td {border-top: var(--border);} td a {color: var(--link); line-height: inherit;} td a:focus, td a:hover {color: var(--over);} th ~ th, td ~ td {border-left: var(--border);} table:has(tr.hide) thead th {border-bottom: 0 none;} ol#vans {display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill,minmax(18rem,1fr)); list-style: none;} ol#vans li {align-items: center; background-color: var(--pale); display: flex; flex-direction: column; height: 100%; min-height: 4rem; padding: var(--padding); width: 100%;} ol#vans li.disable {opacity: 0.2;} ol#vans li.hide {display: none;} ol#vans li.show {display: flex;} ol#vans a {display: flex; flex-direction: column; gap: var(--gap); margin: 0 var(--margin); height: min-content; width: max-content;} ol#vans figure {background-color: var(--logo); display: flex; flex: 1; flex-direction: column-reverse; gap: var(--gap); justify-content: space-between; margin: 0 0 var(--margin) 0; padding: var(--padding); position: relative; width: 100%;} ol#vans figure::before {background-image: radial-gradient(var(--logo),transparent); content: ''; filter: brightness(1.5); inset: 0; position: absolute;} ol#vans figure::after {background: linear-gradient(to bottom, transparent, transparent 70%, var(--logo) 70%, transparent 100%); content: ''; filter: brightness(0.5); inset: 0; position: absolute; z-index: 1;} ol#vans figure > * {position: relative; z-index: 99;} ol#vans figcaption {color: var(--pale); font-family: 'Luckiest Guy', cursive; font-size: 2rem; line-height: 2rem; text-align: center; text-transform: uppercase;} ol#vans figcaption em {color: var(--notice); font-family: inherit; font-size: 1.5rem; font-weight: bold; text-shadow: 3px 3px rgba(0,0,0,0.75);} ol#vans h3 {padding: var(--padding) 0 0 0; text-shadow: 3px 3px rgba(0,0,0,0.75);} ol#vans h4 {color: var(--dark); font-size: 1.5rem; gap: var(--gap-text); line-height: 2rem; margin: 0 0 var(--margin) 0; text-align: center;} ol#vans h4 abbr {font-family: inherit; font-size: inherit; font-weight: inherit;} ol#vans img {height: auto; max-height: 20rem; max-width: 100%; object-fit: contain; object-position: center; width: 100%;} ol#vans svg {height: auto; max-height: 4rem; max-width: 6rem; object-fit: contain; object-position: center; width: 100%;} ol#vans li > small {line-height: 1rem; margin: 0 0 var(--margin) 0;} ol#vans br {display: block;} dl {background-color: var(--pale); border: var(--border); display: flex; flex-direction: column; flex-wrap: wrap;} dt {font-family: 'Poppins Bold', sans-serif; font-weight: bold; padding: var(--pad) var(--padding) 0 var(--padding); width: 100%;} dt ~ dt {border-top: var(--border);} dd {padding: 0 var(--padding) var(--pad) var(--padding); position: relative; width: 100%;} dd a {color: var(--link);} dd a:focus, dd a:hover {color: var(--over);} select:has(option[selected][value='quote']) {background-color: var(--quote);} select:has(option[selected][value='contacted']) {background-color: var(--contacted);} select:has(option[selected][value='delivered']) {background-color: var(--delivered);} select:has(option[selected][value='finance']) {background-color: var(--finance);} select:has(option[selected][value='cancelled']) {background-color: var(--cancelled);} select:has(option[selected][value='pending']) {background-color: var(--pending);} form {background-color: var(--form); display: flex; flex-direction: column; gap: var(--gap); margin: 0 auto; max-width: var(--limit); padding: var(--padding); width: 100%;} form a {color: var(--logo);} form a:focus, form a:hover {color: var(--dark);} label {display: flex; flex: 1; flex-direction: column-reverse;} label span.mth, label span.mls, label.gbp span.pm {display: flex; justify-content: space-between;} label.gbp span.pm::after {content: 'Ex VAT'; font-size: small; opacity: 0.5;} label.gbp span.wpcf7-form-control-wrap {align-items: center; display: flex; flex-direction: row; width: 100%;} label.gbp span.wpcf7-form-control-wrap::before {background-color: var(--grey); content: '£'; display: flex; height: 2rem; justify-content: center; max-width: 2rem; padding: var(--pad); text-align: center; width: 100%;} label.gbp span.wpcf7-form-control-wrap input {width: 100%;} /* label.gbp span.wpcf7-form-control-wrap {} */ /* label.mth span.wpcf7-form-control-wrap::after {background-color: var(--grey); content: 'Months'; display: flex; height: 2rem; justify-content: center; max-width: 2rem; padding: var(--pad); text-align: center; width: 100%;} */ span.mth::after {content: ' Months'; font-size: small; opacity: 0.5;} span.mls::after {content: ' Miles'; font-size: small; opacity: 0.5;} label small {float: right; opacity: 0.5;} fieldset {border: var(--border); display: flex; flex-direction: column; gap: var(--gap); padding: calc(5 * var(--padding)) var(--padding) var(--padding) var(--padding); position: relative; width: 100%;} fieldset.hidden-fields-container {display: none;} legend {font-family: 'Luckiest Guy', sans-serif; font-size: 2rem; left: var(--padding); line-height: 2rem; position: absolute; text-transform: uppercase; top: calc(2 * var(--padding));} fieldset .row {display: flex; flex-direction: column; gap: var(--gap);} fieldset label:has(textarea) {flex: 1;} select {appearance: none; background: transparent url('svg/components/select.svg') center right 0.5rem no-repeat;} input[type='checkbox'], input[type='radio'] {border: var(--border); height: 3rem; width: 3rem;} input, select, textarea {accent-color: var(--logo); background-color: var(--field); border: 0 none; display: block; font-size: 1rem !important; min-height: 3rem; padding: var(--pad) var(--padding) !important; width: 100%;} fieldset input:focus, fieldset select:focus, fieldset textarea:focus {outline: solid var(--logo) thin;} textarea {flex: 1; height: 100%; min-height: 10rem;} input[type='submit'], button {background-color: var(--logo); color: var(--pale); cursor: pointer; font-family: 'Poppins Bold', sans-serif; font-weight: bold;} form.wpcf7-form button, form.wpcf7-form input[type='submit'] {background-color: var(--logo); border: 0 none; cursor: not-allowed; display: block; filter: grayscale(1); grid-column: -1/1; opacity: 0.5; padding: var(--pad) var(--padding); pointer-events: none;} form.wpcf7-form:has(input[name='acceptance']:checked) button, form.wpcf7-form:has(input[name='acceptance']:checked) input[type='submit'] { cursor: pointer; filter: grayscale(0); opacity: 1; pointer-events: auto;} form.wpcf7-form:has(input[name='acceptance']:checked) button:focus, form.wpcf7-form:has(input[name='acceptance']:checked) button:hover, form.wpcf7-form:has(input[name='acceptance']:checked) input[type='submit']:focus, form.wpcf7-form:has(input[name='acceptance']:checked) input[type='submit']:hover {background-color: var(--dark);} .wpcf7-form-control-wrap {display: flex; flex-direction: column; height: 100%;} p.wpcf7cf_repeater_controls {display: flex; flex-direction: row-reverse;} p.wpcf7cf_repeater_controls::before {content: 'Need more vans?'; display: flex; width: 100%;} .wpcf7-list-item {margin: 0;} span[data-name='acceptance'] span.wpcf7-acceptance {display: flex; padding: 0; margin: 0;} span[data-name='acceptance'] span.wpcf7-acceptance label {align-items: center; display: flex; flex-direction: row; gap: var(--gap-text); height: 3rem;} button.wpcf7cf_add, button.wpcf7cf_remove {display: block; height: 3rem; text-align: center; width: 3rem;} button:focus, button:hover, input[type='submit']:focus, input[type='submit']:hover {background-color: var(--dark); /* color: var(--pale); */} textarea {resize: none;} form .wpcf7-response-output {background-color: var(--notice); border: 0 none !important; color: var(--dark); grid-column: -1/1; margin: 0 !important; padding: var(--pad) var(--padding) !important;} form.invalid .wpcf7-response-output {background-color: var(--invalid); color: var(--pale);} form.acf-form {border: var(--border); display: flex; flex-direction: column; gap: var(--gap); max-width: 100%;} form.acf-form input[type='url'], form.acf-form input, form.acf-form textarea {font-size: initial; line-height: initial; padding: var(--pad) var(--padding) !important;} .acf-hidden {display: none;} .acf-fields > .acf-field {border: 0 none !important; padding: 0 !important;} .acf-form-fields {display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill,minmax(18rem,1fr)); list-style: none;} /* .acf-form-fields .acf-tab-wrap, .acf-form-fields .acf-field-textarea {grid-column: 1/-1;} */ .acf-form-fields .acf-field-tab {flex: 1;} .acf-form-fields .acf-field-group {} .acf-form-fields .acf-field-number .acf-input-wrap .acf-is-prepended {border-radius: 0 !important;} .acf-field .acf-label {margin: 0 !important;} .acf-label label {display: block; margin: 0 !important;} .acf-required {} .acf-input {display: flex;} .acf-input .acf-input-prepend {order: 0;} .acf-input .acf-input-append {order: 3;} .acf-input .acf-input-append, .acf-input .acf-input-prepend {align-items: center; background-color: var(--grey); border: 0 none; border-radius: 0; font-size: small; line-height: 2rem; min-height: 3rem; min-width: 3rem; padding: var(--pad); text-align: center;} .acf-input .acf-input-wrap {flex: 1;} .acf-label {display: flex;} .acf-label p.description {font-size: small; opacity: 0.5; margin: 0 !important;} .acf-field-true-false {align-items: center; cursor: pointer; display: flex; flex-direction: row-reverse; gap: var(--gap-text); justify-content: flex-end;} .acf-true-false label {align-items: center; cursor: pointer; display: flex; flex-direction: row; gap: var(--gap-text);} .acf-form-fields [data-name='customer_quote_consent']:has(label input) ~ .acf-form-submit {} .acf-form-submit input[type='submit'] {filter: grayscale(1); opacity: 0.5; pointer-events: none;} .acf-form-fields:has( .acf-field-true-false[data-name='customer_quote_consent'] .acf-input label input:checked) ~ .acf-form-submit input[type='submit'] {filter: grayscale(0); opacity: 1; pointer-events: auto;} form.acf-form {padding: var(--padding); position: relative;} form.acf-form .acf-form-fields {position: relative;} form.acf-form .acf-tab-wrap {border: 0 none; left: -1rem; padding: 0; position: absolute; right: -1rem; top: -1rem; width: cacl(100% + 2rem); z-index: 9;} form.acf-form .acf-tab-wrap ul.acf-tab-group {border-bottom: 0 none !important; display: flex;} form.acf-form .acf-tab-wrap ul.acf-tab-group::before, form.acf-form .acf-tab-wrap ul.acf-tab-group::after {display: none;} form.acf-form .acf-tab-wrap ul.acf-tab-group li {border: 0 none; flex: 1; margin: 0;} form.acf-form .acf-tab-wrap ul.acf-tab-group li + li {border-left: var(--border);} form.acf-form .acf-tab-wrap ul.acf-tab-group li.active a {background-color: var(--form); border-bottom-color: transparent !important;} form.acf-form .acf-tab-wrap ul.acf-tab-group a {background-color: var(--logo); border: 0 none; border-bottom: var(--border); color: var(--dark); min-height: 3rem; padding: var(--pad);} body.page-quote .acf-field--post-title, body.page-quote .acf-field-6839e06a62b2f, /* Status - Quote */ body.page-quote .acf-field-684d695c8c2e7 /* URL Referer */ {display: none; /* opacity: 0.5; */} body.page-quote form.acf-form [data-type='tab'] {display: none;} body.page-quote form.acf-form .acf-form-fields {display: flex; flex-direction: column; gap: var(--gap);} body.page-quote form.acf-form .acf-form-fields [data-type='textarea'] {grid-column: 1/-1;} section#edit {border-bottom: var(--border);} body.page-admin form.acf-form, body.single-customer form.acf-form {padding: 0;} body.page-admin form.acf-form .acf-form-fields, body.single-customer form.acf-form .acf-form-fields {padding: var(--padding);} body.page-admin form.acf-form .acf-form-fields:has(.acf-tab-wrap), body.single-customer form.acf-form .acf-form-fields:has(.acf-tab-wrap) {padding: 4rem 1rem 1rem 1rem; position: relative;} body.page-admin form.acf-form .acf-form-fields .acf-tab-wrap, body.single-customer form.acf-form .acf-form-fields .acf-tab-wrap {left: -2rem; right: -2rem; position: absolute; top: -4rem;} body.page-admin {overflow-x: visible; scroll-padding-top: var(--nav);} body.page-admin header {display: flex; justify-content: space-between;} body.page-admin header p a {color: var(--logo);} body.page-admin header p a:focus, body.page-admin header p a:hover {color: var(--dark);} body.page-admin blockquote {background-color: var(--notice); border: var(--border); color: var(--dark); padding: var(--pad);} body.page-admin article, body.page-admin section > * {max-width: 100%;} body.page-admin details {} body.page-admin summary {align-items: center; border: var(--border); border-bottom: 0 none; cursor: pointer; display: flex; gap: var(--gap); height: 3rem; justify-content: space-between; padding: 0 var(--pad); position: relative; z-index: 99;} body.page-admin summary span {/* flex: 1; */} body.page-admin summary span:last-of-type {text-align: right;} body.page-admin details form {border-bottom: 0 none;} body.page-admin details form .acf-form-fields {padding: 4rem 1rem 0 1rem;} body.page-admin details form .acf-form-fields > .acf-field, body.page-admin details form .acf-form-submit {padding: 0 var(--padding) var(--padding) var(--padding);} body.page-admin dt, body.page-admin dd, body.page-admin th, body.page-admin td {padding: 0 var(--pad);} form.acf-form .acf-form-fields {display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill,minmax(18rem,1fr)); list-style: none;} form.acf-form .acf-form-fields > .acf-tab-wrap {background-color: transparent; grid-column: 1/-1;} form.acf-form .acf-form-fields > .acf-tab-wrap ul.acf-tab-group {margin-bottom: 0 !important; padding: 4rem 1rem 1rem 1rem;} body.page-admin form.acf-form .acf-form-fields [data-name='customer_quote_consent'] {display: none;} body.page-admin form.acf-form .acf-form-fields [data-type='select'][data-name='customer_quote_van'] {grid-column: 1/-1;} body.page-admin form.acf-form .acf-form-fields [data-type='textarea'] {grid-column: 1/-1;} body.page-admin form.acf-form p.description {display: none;} body.page-admin form.acf-form .acf-form-fields input, body.page-admin form.acf-form .acf-form-fields select, body.page-admin form.acf-form .acf-form-fields textarea {font-size: 1rem; line-height: 2rem; min-height: 3rem; padding: var(--pad) !important;} body.page-admin form.acf-form .acf-form-fields textarea {min-height: 6rem;} body.page-admin form.acf-form input[type='submit'] {border: var(--border); color: var(--dark);} body.page-admin form.acf-form input[type='submit']:focus, body.page-admin form.acf-form input[type='submit']:hover {color: var(--pale);} body.page-admin section#edit {gap: 0;} body.page-admin section#edit details ~ details {border-top: 0 none;} body.page-admin form.acf-form .acf-form-fields .acf-field-repeater, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater {gap: var(--gap); grid-column: 1/-1; margin: 0; width: 100%;} body.page-admin form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater {width: 100%;} form.acf-form .acf-form-fields::before, form.acf-form .acf-form-fields::after {display: none;} body.page-admin form.acf-form .acf-form-fields .acf-field-repeater table.acf-table, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater table.acf-table {background-color: var(--dark) !important; border: var(--border); border-collapse: unset; box-sizing: border-box; margin: 0; width: 100%;} body.page-admin form.acf-form .acf-form-fields .acf-field-repeater table.acf-table tr td.acf-fields, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater table.acf-table tr td.acf-fields {display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill,minmax(20rem,1fr));} body.page-admin form.acf-form .acf-form-fields .acf-field-repeater table.acf-table tr td.acf-fields > div, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater table.acf-table tr td.acf-fields > div {flex: 1; min-width: fit-content;} body.page-admin section#customer_forms table th {background-color: var(--logo);} body.page-admin form.acf-form .acf-form-fields .acf-field-repeater th, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater th {background-color: transparent; padding: var(--pad); width: auto !important;} body.page-admin form.acf-form .acf-form-fields .acf-field-repeater td, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater td {background-color: /* var(--status) */ lightgrey; padding: var(--pad); width: auto !important;} body.page-admin form.acf-form .acf-form-fields .acf-field-repeater th + th, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater th + th, body.page-admin form.acf-form .acf-form-fields .acf-field-repeater tbody td + td, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater tbody td + td {border-left: var(--border);} body.page-admin form.acf-form .acf-form-fields .acf-field-repeater tr + tr th, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater tr + tr th, body.page-admin form.acf-form .acf-form-fields .acf-field-repeater tr + tr td, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater tr + tr td {border-top: var(--border) !important;} .acf-row-number {color: var(--dark);} body.page-admin form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-block table.acf-table td.acf-fields, body.page-admin form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-row table.acf-table td.acf-fields {display: flex; flex-wrap: wrap; gap: var(--gap); padding: var(--pad) var(--padding) var(--padding) var(--padding) !important;} body.single-customer form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-block table.acf-table td.acf-fields, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-row table.acf-table td.acf-fields {/* display: flex; */ gap: var(--gap); padding: var(--pad) var(--padding) var(--padding) var(--padding) !important;} body.page-admin form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-block table.acf-table td.acf-row-handle, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-block table.acf-table td.acf-row-handle, body.page-admin form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-row table.acf-table td.acf-row-handle, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-row table.acf-table td.acf-row-handle {min-width: 2rem;} /* #customer_forms td:has(a) {padding: 0;} */ #customer_forms td a {color: var(--status); /* display: block; */ font-family: 'Poppins Bold', sans-serif; font-weight: bold; /* padding: var(--pad); */} td.acf-fields::before, td.acf-fields::after, body.page-quote td .acf-field::before, body.page-quote td .acf-field::after {display: none !important;} body.page-admin form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-block table.acf-table td.acf-fields > div, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-block table.acf-table td.acf-fields > div, body.page-admin form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-row table.acf-table td.acf-fields > div, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-row table.acf-table td.acf-fields > div {display: flex; flex-direction: column; /* min-width: 10rem; width: 100%; */} body.page-admin form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-block table.acf-table td.acf-fields > div::before, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-block table.acf-table td.acf-fields > div::before, body.page-admin form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-row table.acf-table td.acf-fields > div::before, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-row table.acf-table td.acf-fields > div::before, body.page-admin form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-block table.acf-table td.acf-fields > div::after, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-block table.acf-table td.acf-fields > div::after, body.page-admin form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-row table.acf-table td.acf-fields > div::after, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater .acf-repeater.-row table.acf-table td.acf-fields > div::after {display: none;} .acf-label, .acf-input:not(:has(input[type='checkbox'])) {float: none; padding: 0 !important; width: 100% !important;} /* .acf-label label {width: 100% !important;} */ body.page-admin form.acf-form .acf-form-fields .acf-field-repeater table.acf-table th label, body.single-customer form.acf-form .acf-form-fields .acf-field-repeater table.acf-table th label {font-family: inherit; font-size: inherit; font-weight: inherit; line-height: 1.5rem;} td [data-name='customer_quote_van'] {flex: 1;} body.single-customer header {display: flex; justify-content: space-between;} body.single-customer article {max-width: 100%;} body.single-customer section.customer {padding: 0;} body.single-customer section.customer [data-name='customer_quote_consent'] {padding: 2rem 0 0 0 !important;} body.single-customer form.acf-form {} body.single-customer form.acf-form p.description {display: none;} /* body.single-customer form.acf-form .acf-form-fields .acf-tab-wrap, */ body.single-customer form.acf-form .acf-form-fields .acf-field-textarea {grid-column: 1/-1;} /* body.single-customer form.acf-form .acf-form-fields > .acf-tab-wrap {background-color: transparent;} body.single-customer form.acf-form .acf-form-fields > .acf-tab-wrap ul.acf-tab-group {margin-bottom: 0 !important; padding: 0 !important;} body.single-customer form.acf-form .acf-form-fields > .acf-tab-wrap ul.acf-tab-group li a {background-color: var(--logo); color: var(--pale);} body.single-customer form.acf-form .acf-form-fields > .acf-tab-wrap ul.acf-tab-group li.active a {background-color: var(--pale); color: var(--dark);} */ body.single-customer form.acf-form .acf-form-fields input, body.single-customer form.acf-form .acf-form-fields select, body.single-customer form.acf-form .acf-form-fields textarea {border-radius: 0 !important; font-size: 1rem; line-height: 1.5rem; min-height: 3rem; padding: var(--pad) !important;} body.single-customer form.acf-form .acf-form-submit { padding: 0 var(--padding) var(--padding) var(--padding);} body.single-customer form.acf-form .acf-form-submit input {border: var(--border);} /* body.single-customer form.acf-form .acf-tab-wrap {border: 0 none;} body.single-customer form.acf-form .acf-tab-wrap li a {color: var(--dark) !important;} body.single-customer form.acf-form .acf-tab-wrap li.active a {background-color: transparent !important;} */ /* body.single-customer form.acf-form .acf-form-fields > .acf-field {padding-inline: var(--padding) !important;} */ .acf-actions {display: none;} .acf-actions a {background-color: var(--logo); /* border: var(--border); */ color: var(--pale); font-family: 'Poppins Bold', sans-serif; font-weight: bold; padding: var(--pad) var(--padding);} .acf-actions a:focus, .acf-actions a:hover {background-color: var(--dark); color: var(--pale);} body.page-admin form.acf-form, body.single-customer form.acf-form {gap: 0;} body.page-admin form.acf-form span.acf-required, body.single-customer form.acf-form span.acf-required {display: none;} #customer_forms {border: var(--border); display: flex; flex-direction: column; position: relative; width: 100%;} /* #customer_forms::after {border: var(--border); content: ''; display: block; inset: 0; position: absolute; z-index: 1;} */ #customer_forms > div {overflow: auto;} /* #customer_forms form {background-color: silver; flex-direction: row; gap: var(--gap); max-width: fit-content; width: fit-content;} #customer_forms form [data-type='tab'] {display: none;} #customer_forms form .acf-form-fields {display: flex; flex-direction: row; width: auto;} #customer_forms form .acf-form-submit {width: max-content;} #customer_forms form .acf-field:has(input[type='checkbox']) {flex-direction: column; justify-content: flex-start;} #customer_forms form input[type='email'], #customer_forms form input[type='number'], #customer_forms form input[type='tel'], #customer_forms form input[type='text'], #customer_forms form input[type='url'], #customer_forms form select, #customer_forms form textarea {width: max-content;} #customer_forms form select {min-width: 10rem;} #customer_forms form input[type='submit'] {margin: 2rem 0 0 0; white-space: nowrap;} #customer_forms form label {white-space: nowrap;} #customer_forms form ~ form label:has(input[type='text']), #customer_forms form p.description {display: none;} */ .test {background-color: pink;} .quote {background-color: var(--quote);} .contacted {background-color: var(--contacted);} .finance {background-color: var(--finance);} .delivered {background-color: var(--delivered);} .cancelled {background-color: var(--cancelled);} .pending {background-color: var(--pending);} .paused {background-color: var(--paused);} .spam {background-color: var(--spam);} .lost {background-color: var(--lost);} #message {background-color: var(--notice); border: var(--border); color: var(--dark); max-width: 100%; padding: var(--pad); text-align: center;} #message.updated {background-color: var(--valid); color: var(--pale);} details.customer {/* background-color: var(--cancelled); */ border: var(--border);} details.customer summary {background-image: url('svg/components/panel-open.svg'); background-repeat: no-repeat; background-position: right 0.5rem top 0.5rem; background-size: 1.5rem 1.5rem; cursor: pointer; display: flex; font-family: 'Poppins Bold', sans-serif; font-weight: bold; justify-content: space-between; line-height: 1.5rem; padding: var(--pad) 2.5rem var(--pad) var(--pad);} details.customer summary span {line-height: inherit;} details.customer form {padding: var(--pad);} details.customer form .acf-form-fields {gap: var(--pad);} details.customer {} details.customer[open] summary {background-image: url('svg/components/panel-close.svg');} form#filter {display: flex; flex-direction: row;} form#filter fieldset {align-items: flex-start; display: flex; flex-direction: column; gap: 0; height: 100%; width: 100%;} form#filter label {align-items: center; cursor: pointer; flex-direction: row; gap: var(--gap-text);} form#filter input[type='checkbox'] {max-height: 2rem; max-width: 2rem; outline: 0 none;} details#profile {} details#profile summary {background-color: var(--link); color: var(--dark); border: var(--border); cursor: pointer; padding: var(--pad) var(--padding);} details#profile summary:focus, details#profile summary:hover {bacground-color: var(--over);} details#profile[open] summary {border-bottom: 0 none;} ol#advertisments {display: grid; /* flex-direction: column; */ gap: var(--gap); grid-auto-flow: dense; grid-template-columns: repeat(auto-fill,minmax(18rem,1fr)); list-style-type: none; margin: 0;} ol#advertisments img {} aside {background-color: var(--pale); padding: var(--padding);} aside:has(ol#socials:empty) {display: none;} aside ol#socials {align-items: center; display: flex; gap: var(--gap); justify-content: center; list-style: none;} aside ol#socials li {} aside ol#socials a {} aside ol#socials img, aside ol#socials svg {} nav#nav_sub {background-color: var(--logo); display: flex; min-height: 3rem;} nav#nav_sub ul {display: flex; gap: var(--gap); justify-content: center; list-style: none; width: 100%;} nav#nav_sub li {} nav#nav_sub a {color: var(--dark); display: flex; padding: var(--pad) var(--padding);} nav#nav_sub a:focus, nav#nav_sub a:hover {color: var(--pale);} footer {background-color: var(--dark); color: var(--pale); display: flex; flex-direction: column; gap: var(--gap); justify-content: space-between; padding: var(--padding);} footer * {font-size: 0.8rem; line-height: 1rem;} footer small#disclaimer {text-wrap: pretty;} footer ul {display: flex; gap: var(--gap); list-style: none;} footer a {color: var(--logo);} footer li {} footer li.current-menu-item a, footer li.current_page_item a, footer a:focus, footer a:hover {color: var(--pale);} .lighter {filter: brightness(1.25);} .darker {filter: brightness(0.75);} .hide {left: -1000vw !important; opacity: 0; position: absolute; visibility: hidden;} .hidden-fields-container {display: none;} .limit {margin: 0 auto; max-width: var(--limit); width: 100%;} .shadow {box-shadow: var(--shadow); outline: lime solid medium;} .fit-the-fullspace {display: none;} a.hilite {background-color: var(--logo); color: var(--pale); font: 2rem/3rem 'Luckiest Guy', cursive; height: 100%; mask-image: url('svg/components/hilite.svg'); mask-position: center; mask-repeat: no-repeat; mask-size: 100% 100%; min-height: 3rem; padding: var(--padding) var(--padding) var(--pad) var(--padding); text-align: center; text-transform: uppercase; width: max-content;} a.hilite:focus, a.hilite:hover {background-color: var(--dark);} i.acf-icon {display: none;} ul.key {background-color: var(--dark); border: var(--border); display: flex; flex-wrap: wrap; gap: 3px; list-style: none;} ul.key li {flex: 1; min-width: fit-content; padding: 0 var(--pad);} body.page-quote form [data-name='customer_vans'] .acf-fields {display: flex; flex-direction: column; gap: var(--gap);} body.page-quote form [data-name='customer_vans'] .acf-fields::after {display: none;} body.page-quote form [data-name='customer_vans'] > .acf-label {display: none;} body.page-quote form [data-name='customer_vans'] .acf-field {flex: 1;} body.page-quote form .acf-field-repeater {grid-column: 1/-1;} body.page-quote form .acf-repeater {width: 100%;} body.page-quote form .acf-repeater a.acf-button {background-color: var(--logo); border: 0 none; color: var(--pale); padding: var(--pad) var(--padding);} body.page-quote form .acf-repeater a.acf-button:focus, body.page-quote form .acf-repeater a.acf-button:hover {background-color: var(--dark);} body.page-quote form table {background-color: transparent; border: 0 none; margin: 0 0 var(--gap) 0;} body.page-quote form [data-name='customer_van_condition'], body.page-quote form [data-name='customer_van_registration'], body.page-quote form [data-name='customer_van_cost'] {display: none;} body.page-quote form .acf-row-handle {} body.page-quote form table tr td.acf-row-handle.order {display: none;} body.page-quote form table tr:first-of-type td.acf-row-handle.remove {width: 4rem;} body.page-quote form table tr + tr {border-top: var(--border); margin-top: var(--space); padding-top: var(--space);} body.page-quote form table tr + tr td.acf-fields {padding-top: var(--space) !important; margin-top: var(--space) !important;} body.page-quote form table tr td.acf-row-handle.remove a {background-color: var(--logo); border: 0 none; border-radius: 0; color: var(--pale); display: block; height: 3rem; line-height: 1.5rem; margin: 0 !important; padding: var(--pad); right: 0; top: 2rem; width: 3rem;} body.page-quote form table tr:first-of-type td.acf-row-handle.remove a.-plus::before {content: '+'; font-family: 'Poppins Bold', sans-serif; font-size: 1.2rem; font-weight: bold; height: 1rem; width: 1rem;} body.page-quote form table tr:first-of-type td.acf-row-handle.remove a.-minus, body.page-quote form table tr:first-of-type td.acf-row-handle.remove a.-duplicate {display: none !important;} body.page-quote form table tr + tr td.acf-row-handle.remove {padding: 0; width: 3rem;} body.page-quote form table tr + tr td.acf-row-handle.remove a.-minus {background-color: var(--logo); border: 0 none; border-radius: 0; color: var(--pale); display: block; height: 3rem; line-height: 1.5rem; margin: 0 !important; padding: var(--pad); top: 1rem; width: 3rem;} body.page-quote form table tr + tr td.acf-row-handle.remove a.-minus::before {content: '-'; font-family: 'Poppins Bold', sans-serif; font-size: 1.2rem; font-weight: bold; height: 1rem; width: 1rem;} body.page-quote form table tr + tr td.acf-row-handle.remove a.-plus, body.page-quote form table tr + tr td.acf-row-handle.remove a.-duplicate {display: none !important;} body.page-quote form .acf-label {display: flex;} body.page-quote form label {display: flex; flex-direction: column-reverse; width: auto;} body.page-quote form span.acf-required {display: inline;} body.page-quote form th, body.page-quote form td {background-color: transparent !important; border: 0 none !important; /* max-width: calc((100% - (2 * var(--gap))) / 3); */ padding: 0;} body.page-quote form th + th, body.page-quote form td + td {padding: 0 0 0 var(--padding);} body.page-quote form th:has(label):has(p.description) {display: flex; gap: var(--gap);} body.page-quote form p.description {color: var(--dark); display: inline; font-size: small; margin: 0; opacity: 0.5; width: fit-content;} #admin_map {overflow: hidden;} #map {border: var(--border); height: 100%; min-height: calc(100dvh - var(--nav)); overflow: hidden; width: 100%;} #map .leaflet-popup {border: var(--border); border-radius: 0 none;} #map .leaflet-popup-content-wrapper {border-radius: 0; width: 30rem;} #map .leaflet-popup-content {display: flex; flex-direction: column; gap: var(--gap); margin: 0; max-width: 30rem; padding: /* var(--pad) */ var(--padding); width: 100% !important;} #map dl {border: 0; /* color: var(--pale); */display: grid; gap: 0 var(--gap); grid-template-columns: 6rem 15rem; width: 22rem;} #map dl dt {border: 0; padding: 0; width: 6rem;} #map dl dd {border: 0; padding: 0; width: 15rem;} #map dl dd a {color: var(--green);} #map dl dd a:focus, #map dl dd a:hover {color: var(--dark);} #map dl dd br {display: block;} #map .leaflet-popup-content > a {background-color: var(--green); color: var(--dark); display: block; font-family: 'Poppins Bold', sans-serif; font-weight: bold; padding: var(--pad) var(--padding); text-align: center; width: 100%;} #map .leaflet-popup-content > a:focus, #map .leaflet-popup-content > a:hover {background-color: var(--dark); color: var(--pale);} #map .leaflet-marker-pane > img {background-image: url('svg/components/marker.svg'); background-size: contain; mask-image: url('svg/components/marker-mask.svg'); mask-repeat: no-repeat; mask-size: contain;} form [data-name='customer_quote_business_postcode'] label:has(a) {display: flex; gap: var(--gap); justify-content: space-between;} .admin {background-color: pink !important;} article.faz-cookie-policy {gap: var(--gap); max-width: var(--limit);} article.faz-cookie-policy strong {font-family: unset; font-weight: bold;} article.faz-cookie-policy ul {margin-inline: auto; padding-inline: var(--padding); width: 100%;} /* article.faz-cookie-policy .faz-cookie-policy-disclaimer {display: none;} */ article.faz-cookie-policy section.faz-cookie-policy-category {margin: 0; min-height: auto;} article.faz-cookie-policy .faz-cookie-policy-details-body {padding: var(--padding);} article.faz-cookie-policy .faz-cookie-policy-table {border-collapse: unset;} @media (min-width: 640px){ form {display: grid; grid-template-columns: repeat(auto-fit,minmax(30rem,1fr));} body.page-quote form.acf-form .acf-form-fields {display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill,minmax(24rem,1fr));} } @media (min-width: 960px){ header img.desktop {display: block;} header img.mobile {display: none;} dl {display: flex; flex-direction: row; flex-wrap: wrap;} dt {width: 25%; padding: var(--pad) var(--padding);} dd {width: 75%; padding: var(--pad) var(--padding);} dd ~ dd {border-top: var(--border);} fieldset .row {flex-direction: row;} label:has(input[name='quote-quantity']) {max-width: 5rem;} label {flex: 1;} body.page-admin form.acf-form .acf-form-fields {/* display: grid; grid-template-columns: repeat(auto-fill,minmax(27rem,1fr)); */} body.page-admin form.acf-form .acf-form-fields [data-type='select'][data-name='customer_quote_van'] {grid-column: initial;} ol#vans {grid-template-columns: repeat(auto-fill,minmax(21rem,1fr));} body.page-quote form table {margin: 0;} body.page-quote form table tr + tr {border-top: 0 none; margin: 0; padding: 0;} body.page-quote form table + .acf-actions {display: none;} body.page-quote form [data-name='customer_vans'] table tr td.acf-fields {flex-direction: row;} body.page-quote form [data-name='customer_vans'] table tr + tr td.acf-fields {padding: var(--gap) 0 0 0 !important;} body.page-quote form [data-name='customer_vans'] table tr + tr td.acf-fields .acf-label {display: none;} body.page-quote form [data-name='customer_vans'] table tr td [data-name='customer_quote_quantity'] {max-width: 12rem;} body.page-quote form [data-name='customer_vans'] table tr td [data-name='customer_quote_van'] {max-width: auto;} body.page-quote form [data-name='customer_vans'] table tr td [data-name='customer_quote_van_mileage'] {max-width: 12rem;} footer {flex-direction: row;} /* footer small#disclaimer {text-wrap: balance;} */ } @media (min-width: 1280px){ body:has(input#toggle:checked){overflow-y: auto;} nav#nav_main > a {flex-direction: row;} nav#nav_main > a small {position: relative; left: auto;} nav#nav_main ul#cta a span {display: flex;} nav#nav_main label {display: none;} input#toggle ~ nav#nav_main, input#toggle:checked ~ nav#nav_main {grid-template-areas: 'logo cta menu'; min-height: var(--nav);} input#toggle ~ nav#nav_main ul#menu-primary, input#toggle:checked ~ nav#nav_main ul#menu-primary {flex-direction: row; flex-wrap: nowrap; grid-column: auto; height: var(--nav); min-height: var(--nav); overflow: visible;} input#toggle ~ nav#nav_main ul#menu-primary li, input#toggle:checked ~ nav#nav_main ul#menu-primary li {width: fit-content;} header {flex-direction: row;} }