/* * Per-bundle theme overrides, layered on top of skin-foundation's main.css. * * How to add a theme: give a bundle a slug in BundleThemeHelper::CONFIG_THEME_BY_BUNDLE * (config/autoload/config.global.php), then add a ".theme--" block below overriding * whatever skin-foundation colours/components that theme needs to change. No template * changes are needed - base.html.twig already renders "theme--" on for * every bundle (falling back to "theme--standard" when no theme is configured). * * This file is a tracked source (copied into public/css/ by the * "install-skin-foundation-assets" composer script, since public/css/ itself is a * gitignored build artifact copied from skin-foundation on every composer install). */ /* theme--mono: replaces skin-foundation's bikmo-green (#3cf1c6 / #24CAA3) and * bikmo-magenta (#ff0080 / #EA0075 hover) with black, wherever skin-foundation's * compiled main.css uses them. Used today by the "specialized" and "specialized-full" * bundles. */ .theme--mono .block_tag::before, .theme--mono .progress::before, .theme--mono .consolidated-section.active .h2-text::before { background-color: #1a1a1a; } .theme--mono h2, .theme--mono .h2-text { font-family: DIN, sans-serif; text-transform: none; font-size: 32px; line-height: 128%; letter-spacing: normal; font-weight: bolder; } /* theme--mono: skin-foundation sets these to "DIN Bold" - drop the bold cut in * favour of plain DIN. */ .theme--mono .progress .progress__step, .theme--mono .badge--discount, .theme--mono .block_tag, .theme--mono .ebike-tag, .theme--mono .btn, .theme--mono .card__title, .theme--mono .payment-term--selected, .theme--mono .form__row__header { font-family: DIN, sans-serif; } .theme--mono .progress .progress__step, .theme--mono .badge--discount, .theme--mono .block_tag, .theme--mono .ebike-tag, .theme--mono .card__title, .theme--mono .payment-term--selected, .theme--mono .form__row__header { text-transform: none; } /* theme--mono: swap the sidebar photo skin-foundation shows on the bike-confirm * question (question-page--type-1) and the confirmation page for a Specialized-branded * shot. Compound selectors (theme class + page-type class) outrank skin-foundation's * single-class rules regardless of stylesheet order. */ .theme--mono.question-page--type-1 aside, .theme--mono.confirmation-page aside { background-image: url('../images/sidebar/sidebar-specialized.jpg'); } .theme--mono .block_tag { color: white; } .theme--mono .progress progress[value]::-moz-progress-bar { background: #1a1a1a; } .theme--mono .progress progress[value]::-webkit-progress-bar { background: #f2f2f2; } .theme--mono .progress progress[value]::-webkit-progress-value { background: #1a1a1a; } .theme--mono .progress .progress__step.progress__step--is-active:before, .theme--mono .progress .progress__step.progress__step--is-complete:before { background-color: #1a1a1a; } .theme--mono .ebike-tag { color: #1a1a1a; } .theme--mono .ebike-tag::before { border-color: #1a1a1a; } .theme--mono a:not([class]), .theme--mono a:not([class*="btn"]), .theme--mono a:any-link, .theme--mono a:-webkit-any-link, .theme--mono .link--green-underline { text-decoration-color: #1a1a1a; } .theme--mono .modal__content { border-top-color: #1a1a1a; } .theme--mono .bikmo-quote-block__nav__item--selected, .theme--mono .bikmo-quote-block__card--active { box-shadow: 0 -5px 0px 0px #1a1a1a; } .theme--mono .btn.btn--magenta-full { background: #1a1a1a; border-color: #1a1a1a; } .theme--mono .btn.btn--magenta-full:hover { background-color: #000; } .theme--mono .btn.btn--magenta-border { color: #1a1a1a; border-color: #1a1a1a; } .theme--mono .bikmo-quote-block__card__cta { border-top-color: #1a1a1a; } .theme--mono .qs-active::after { background-color: #1a1a1a; } .theme--mono .form__row.form__row--list-bikes .form__row__header { border-left-color: #1a1a1a; } .theme--mono .autocomplete__item--active { background-color: #1a1a1a !important; } .theme--mono .radio-toolbar.radio-toolbar--cards input[type="radio"]:checked + .card { background-color: rgba(26, 26, 26, 0.05); border-color: #1a1a1a; } .theme--mono .country-selection .card:hover { border-color: #1a1a1a; }