| footer { |
| display: flex; |
| justify-content: center; |
| background-color: var(--footer-background); |
| color: var(--footer-font-color); |
| font-size: calc(15 / var(--rem-base) * 1rem); |
| line-height: var(--footer-line-height); |
| padding: 1.5rem; |
| flex-shrink: 0; |
| min-height: var(--footer-height); |
| } |
| |
| footer .footer { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| max-width: var(--static-max-width--desktop); |
| } |
| |
| footer .footer p { |
| flex-basis: 100%; |
| margin: 3rem 0 0.5rem 0; |
| padding: 0 1rem; |
| } |
| |
| footer .footer p.remark::after { |
| content: ''; |
| display: block; |
| position: relative; |
| height: 1px; |
| width: 25rem; |
| margin: 2rem auto 1rem auto; |
| background: var(--footer-after-background); |
| } |
| |
| footer .footer a { |
| color: var(--footer-font-color); |
| } |
| |
| footer .footer .context { |
| display: inline-block; |
| margin: 0 0 1rem 0; |
| } |
| |
| footer .footer .context a { |
| font-size: 15px; |
| text-transform: uppercase; |
| } |
| |
| footer .footer .context a::after { |
| content: ' '; |
| display: inline-block; |
| border-radius: 50%; |
| width: 8px; |
| height: 8px; |
| margin: 0 1rem; |
| background: var(--footer-after-background); |
| } |
| |
| footer .footer .context:last-child a::after { |
| display: none; |
| } |
| |
| footer .footer figure.logo { |
| flex-direction: row; |
| flex-grow: 1; |
| align-items: flex-start; |
| justify-content: center; |
| margin-inline-start: 0; |
| } |
| |
| footer .footer figure.logo img { |
| width: 6rem; |
| } |
| |
| footer .footer dl { |
| flex-direction: row; |
| flex-grow: 1; |
| align-items: flex-start; |
| justify-content: center; |
| margin: 3rem 0 0 1rem; |
| } |
| |
| footer .footer dl:first-child { |
| margin-top: 0; |
| } |
| |
| footer .footer dl dt { |
| font-size: 1.25rem; |
| font-weight: bold; |
| margin-bottom: 1.5rem; |
| } |
| |
| footer .footer dl dt::after { |
| content: ''; |
| display: block; |
| position: relative; |
| bottom: 0; |
| left: 0; |
| height: 2px; |
| width: 3rem; |
| background: var(--footer-font-color); |
| } |
| |
| footer .footer .footer-menu { |
| display: block; |
| } |
| |
| footer .footer dl dd { |
| margin: 0; |
| } |
| |
| .footer-tools { |
| position: relative; |
| top: -2rem; |
| height: 0; |
| text-align: right; |
| } |
| |
| .footer-tools a { |
| display: inline-block; |
| padding: 0.4rem; |
| background-color: var(--footer-background); |
| color: black; |
| border-radius: 0.4rem 0.4rem 0 0; |
| height: 2rem; |
| } |
| |
| footer .footer .break-row-footer { |
| display: block; |
| flex-basis: 100%; |
| height: 0; |
| } |
| |
| footer .footer .footer-icons { |
| display: flex; |
| align-items: flex-end; |
| justify-content: flex-end; |
| line-height: 1.6; |
| padding: 0.5rem; |
| font-weight: bold; |
| } |
| |
| footer .footer .footer-icons .brand-icon { |
| height: 2em; |
| width: 1.75em; |
| margin: 0.35rem; |
| fill: var(--navbar-font-color); |
| } |
| |
| footer .footer .show-menu, |
| footer .footer .hide-menu { |
| display: none; |
| } |
| |
| input[type="checkbox"] { |
| width: 0; |
| height: 0; |
| float: right; |
| visibility: hidden; |
| } |
| |
| @media screen and (max-width: 1023px) { |
| footer .footer dl { |
| flex-basis: 100%; |
| margin-top: 2rem; |
| } |
| |
| footer .footer dl dt { |
| margin-bottom: 0; |
| } |
| |
| footer .footer figure.logo { |
| text-align: center; |
| } |
| |
| footer .footer figure.logo img { |
| width: 4.5rem; |
| } |
| |
| footer .footer p.remark::after { |
| width: auto; |
| } |
| |
| footer .footer .context a { |
| font-size: 13.5px; |
| } |
| |
| footer .footer .context a::after { |
| width: 5px; |
| height: 5px; |
| } |
| |
| footer .footer .footer-icons .brand-icon { |
| height: 1.5rem; |
| } |
| |
| footer .footer .show-menu { |
| float: right; |
| height: 40px; |
| margin-top: -2.5rem; |
| } |
| |
| footer .footer .hide-menu { |
| float: right; |
| height: 35px; |
| margin-top: -2.5rem; |
| } |
| |
| footer .footer .footer-menu { |
| margin-top: 1rem; |
| } |
| |
| input[type="checkbox"] + label img.show-menu { |
| display: block; |
| } |
| |
| input[type="checkbox"] ~ label img.hide-menu, |
| input[type="checkbox"] ~ div.footer-menu { |
| display: none; |
| } |
| |
| input[type="checkbox"]:checked + label img.show-menu { |
| display: none; |
| } |
| |
| input[type="checkbox"]:checked ~ label img.hide-menu, |
| input[type="checkbox"]:checked ~ div.footer-menu { |
| display: block; |
| } |
| |
| input[type="checkbox"]:not(:checked) + label img.show-menu { |
| display: block; |
| } |
| |
| input[type="checkbox"]:not(:checked) ~ label .hide-menu, |
| input[type="checkbox"]:not(:checked) ~ div.footer-menu { |
| display: none; |
| } |
| } |