/* ========================================================================== CAR MAX — Gravity Forms prototyypin ilmeeseen Gravity Forms 3:n "orbital"-teema on rakennettu CSS-muuttujien varaan, joten tyylit asetetaan muuttujiin eika ylikirjoiteta GF:n omia saantoja. Nain GF:n oma logiikka (fokus, virhetilat, responsiivisuus) sailyy. Vastaavuus prototyyppiin: kentta = .clean-input (tumma pinta, 1px reuna, 2px pyoristys) selite = .clean-field label nappi = .cmx-btn .cmx-btn-white .cmx-btn-lg .cmx-btn-full Oletus on TUMMA osio. Vaaleassa osiossa (.cmx-section-light) varit kaannetaan, kuten prototyypissa tehtiin inline-tyyleilla. MIKSI !important: Gravity Forms tulostaa jokaiselle lomakkeelle oman inline-tyylilohkon valitsimella #gform_wrapper_N[data-form-index="0"] .gform-theme, jonka tarkkuus on (1,2,0). Siina on id, jota ei voi ennakoida, joten mikaan luokkavalitsin ei voita sita. Lohko asettaa 64 muuttujaa, jotka menevat paallekkain naiden kanssa. Ilman !importantia osa muuttujista puri ja osa ei - lopputulos oli sekasotku, jossa esim. kenttien selitteet jaivat GF:n tummansiniseksi mustalla taustalla. ========================================================================== */ .carmax .gform_wrapper{ /* --- typografia --- */ --gf-font-family-primary: var(--font-sans) !important; --gf-ctrl-font-family: var(--font-sans) !important; --gf-ctrl-label-font-family-primary: var(--font-sans) !important; --gf-ctrl-btn-font-family: var(--font-sans) !important; /* --- kentat: .clean-input --- */ --gf-ctrl-bg-color: var(--c-dark-surface) !important; --gf-ctrl-bg-color-hover: var(--c-dark-surface) !important; --gf-ctrl-bg-color-focus: var(--c-dark-surface) !important; --gf-ctrl-bg-color-error: var(--c-dark-surface) !important; --gf-ctrl-border-color: var(--c-dark-border) !important; --gf-ctrl-border-color-hover: var(--c-dark-border) !important; --gf-ctrl-border-color-focus: #FFFFFF !important; --gf-ctrl-border-width: 1px !important; --gf-ctrl-color: #FFFFFF !important; --gf-ctrl-color-hover: #FFFFFF !important; --gf-ctrl-color-focus: #FFFFFF !important; --gf-ctrl-color-error: #FFFFFF !important; --gf-ctrl-radius: var(--radius-btn) !important; --gf-ctrl-font-size: 1.0625rem !important; --gf-ctrl-font-weight: 400 !important; --gf-ctrl-padding-x: 16px !important; --gf-ctrl-size: 60px !important; --gf-ctrl-size-md: 60px !important; --gf-ctrl-size-lg: 60px !important; --gf-ctrl-line-height: 58px !important; --gf-ctrl-textarea-height: 115px !important; --gf-ctrl-textarea-padding-y: 15px !important; --gf-ctrl-textarea-line-height: 1.65 !important; --gf-ctrl-textarea-radius: var(--radius-btn) !important; /* --- selitteet ja ohjetekstit --- */ --gf-ctrl-label-color-primary: var(--c-text-dark-secondary) !important; --gf-ctrl-label-color-secondary: var(--c-text-dark-muted) !important; --gf-ctrl-label-font-size-primary: 0.875rem !important; --gf-ctrl-label-font-weight-primary: 600 !important; --gf-ctrl-label-color-req: var(--c-text-dark-muted) !important; --gf-ctrl-desc-color: var(--c-text-dark-muted) !important; --gf-ctrl-desc-font-size: 0.875rem !important; --gf-color-out-ctrl-dark: var(--c-text-dark-secondary) !important; --gf-color-out-ctrl-dark-darker: var(--c-text-dark-primary) !important; --gf-color-out-ctrl-dark-lighter: var(--c-text-dark-muted) !important; --gf-color-out-ctrl-light: var(--c-dark-border) !important; --gf-color-out-ctrl-light-darker: var(--c-dark-border) !important; --gf-color-out-ctrl-light-lighter: var(--c-dark-surface) !important; /* --- kenttien sisapuoli --- */ --gf-color-in-ctrl: var(--c-dark-surface) !important; --gf-color-in-ctrl-contrast: #FFFFFF !important; --gf-color-in-ctrl-dark: var(--c-text-dark-secondary) !important; --gf-color-in-ctrl-dark-darker: #FFFFFF !important; --gf-color-in-ctrl-dark-lighter: var(--c-text-dark-muted) !important; --gf-color-in-ctrl-light: var(--c-dark-border) !important; --gf-color-in-ctrl-light-darker: var(--c-dark-border) !important; --gf-color-in-ctrl-light-lighter: var(--c-dark-surface) !important; --gf-color-in-ctrl-lighter: var(--c-dark-surface) !important; --gf-color-in-ctrl-darker: var(--c-dark-surface) !important; /* --- lahetysnappi: .cmx-btn-white .cmx-btn-lg --- */ --gf-ctrl-btn-bg-color-primary: #FFFFFF !important; --gf-ctrl-btn-bg-color-hover-primary: #E8E8E8 !important; --gf-ctrl-btn-bg-color-focus-primary: #FFFFFF !important; --gf-ctrl-btn-color-primary: #000000 !important; --gf-ctrl-btn-color-hover-primary: #000000 !important; --gf-ctrl-btn-color-focus-primary: #000000 !important; --gf-ctrl-btn-border-color-primary: #FFFFFF !important; --gf-ctrl-btn-border-color-hover-primary: #E8E8E8 !important; --gf-ctrl-btn-border-color-focus-primary: #FFFFFF !important; --gf-ctrl-btn-radius: var(--radius-btn) !important; --gf-ctrl-btn-font-size: 1.0625rem !important; --gf-ctrl-btn-font-weight: 700 !important; --gf-ctrl-btn-size: 60px !important; --gf-ctrl-btn-size-md: 60px !important; --gf-ctrl-btn-padding-x: 38px !important; /* --- valit: .clean-form{gap:16px} --- */ --gf-field-gap-x: 16px !important; --gf-field-gap-y: 16px !important; --gf-radius: var(--radius-btn) !important; /* --- korostusvari (fokusrenkaat yms.) --- */ --gf-color-primary: #FFFFFF !important; --gf-color-primary-contrast: #000000 !important; --gf-color-primary-darker: #E8E8E8 !important; --gf-color-primary-lighter: #FFFFFF !important; } /* Vaalea osio: kaannetaan varit kuten prototyypissa. */ .carmax .cmx-section-light .gform_wrapper{ --gf-ctrl-bg-color: var(--c-light-alt) !important; --gf-ctrl-bg-color-hover: var(--c-light-alt) !important; --gf-ctrl-bg-color-focus: var(--c-light-alt) !important; --gf-ctrl-bg-color-error: var(--c-light-alt) !important; --gf-ctrl-border-color: var(--c-light-border) !important; --gf-ctrl-border-color-hover: var(--c-light-border) !important; --gf-ctrl-border-color-focus: #000000 !important; --gf-ctrl-color: #000000 !important; --gf-ctrl-color-hover: #000000 !important; --gf-ctrl-color-focus: #000000 !important; --gf-ctrl-color-error: #000000 !important; --gf-ctrl-label-color-primary: #333333 !important; --gf-ctrl-label-color-secondary: var(--c-text-light-muted) !important; --gf-ctrl-label-color-req: var(--c-text-light-muted) !important; --gf-ctrl-desc-color: var(--c-text-light-muted) !important; --gf-color-out-ctrl-dark: var(--c-text-light-secondary) !important; --gf-color-out-ctrl-dark-darker: #000000 !important; --gf-color-out-ctrl-dark-lighter: var(--c-text-light-muted) !important; --gf-color-out-ctrl-light: var(--c-light-border) !important; --gf-color-out-ctrl-light-darker: var(--c-light-border) !important; --gf-color-out-ctrl-light-lighter: var(--c-light-alt) !important; --gf-color-in-ctrl: var(--c-light-alt) !important; --gf-color-in-ctrl-contrast: #000000 !important; --gf-color-in-ctrl-dark: var(--c-text-light-secondary) !important; --gf-color-in-ctrl-dark-darker: #000000 !important; --gf-color-in-ctrl-dark-lighter: var(--c-text-light-muted) !important; --gf-color-in-ctrl-light: var(--c-light-border) !important; --gf-color-in-ctrl-light-darker: var(--c-light-border) !important; --gf-color-in-ctrl-light-lighter: var(--c-light-alt) !important; --gf-color-in-ctrl-lighter: var(--c-light-alt) !important; --gf-color-in-ctrl-darker: var(--c-light-alt) !important; /* .cmx-btn-black */ --gf-ctrl-btn-bg-color-primary: #000000 !important; --gf-ctrl-btn-bg-color-hover-primary: #222222 !important; --gf-ctrl-btn-bg-color-focus-primary: #000000 !important; --gf-ctrl-btn-color-primary: #FFFFFF !important; --gf-ctrl-btn-color-hover-primary: #FFFFFF !important; --gf-ctrl-btn-color-focus-primary: #FFFFFF !important; --gf-ctrl-btn-border-color-primary: #000000 !important; --gf-ctrl-btn-border-color-hover-primary: #222222 !important; --gf-ctrl-btn-border-color-focus-primary: #000000 !important; --gf-color-primary: #000000 !important; --gf-color-primary-contrast: #FFFFFF !important; --gf-color-primary-darker: #222222 !important; --gf-color-primary-lighter: #000000 !important; } /* -------------------------------------------------------------------------- Muutama asia, jota muuttujat eivat kata -------------------------------------------------------------------------- */ /* Prototyypin lahetysnappi on aina taysleveä (.cmx-btn-full). */ .carmax .gform_wrapper .gform_footer{padding: 0; margin: 8px 0 0} .carmax .gform_wrapper .gform_footer .gform_button{width: 100%} /* Lomakkeen otsikko ja kuvaus tulevat shortcoden title="true":sta. Osiolla on jo oma otsikkonsa, joten tama pidetaan pienempana. */ .carmax .gform_wrapper .gform_heading{margin-bottom: 24px} .carmax .gform_wrapper .gform_title{ font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: inherit; margin-bottom: 6px; } .carmax .gform_wrapper .gform_description{ font-size: 0.9375rem; color: var(--c-text-dark-secondary); display: block; } .carmax .cmx-section-light .gform_wrapper .gform_description{ color: var(--c-text-light-secondary); } /* Pudotusvalikko: GF valittaa --gf-ctrl-line-heightin tekstikentille mutta ei selectille, jolloin riviväli jaa fontin kokoon (17px) ja teksti istuu 60 px:n laatikon ylareunassa. Sama riviväli kuin muissa kentissa keskittaa sen pystysuunnassa. */ .carmax .gform_wrapper select{line-height: var(--gf-ctrl-line-height)} /* Pakollisuuden merkinta ei saa napata katsetta prototyypin ilmeessa. */ .carmax .gform_wrapper .gfield_required{font-weight: 400} /* Vahvistusviesti samaan tyyliin kuin lomake. */ .carmax .gform_confirmation_message{ font-size: 1.0625rem; line-height: 1.7; padding: 24px; background: var(--c-dark-surface); border: 1px solid var(--c-dark-border); border-radius: var(--radius-btn); color: #FFFFFF; } .carmax .cmx-section-light .gform_confirmation_message{ background: var(--c-light-alt); border-color: var(--c-light-border); color: #000000; } /* Mobiilissa kentat allekkain, kuten muuallakin sivustolla. */ @media (max-width: 768px){ .carmax .gform_wrapper .gform_fields{grid-template-columns: 1fr} .carmax .gform_wrapper .gfield{grid-column: 1 / -1 !important} }