/*!****************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-4.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[3]!./styles/entry/pianosubscriptionpage.scss ***!
\****************************************************************************************************************************************************************************************************************************************************/
/* Layout */
/* Colours */
/* Autogen vars via build:palettes */
/* 1. Screen Sizes */
/* Topics */
/* Cards */
/*
xs 320px small-mobile
sm 576px mobile
md 768px small-tablet
lg 992px tablet
xl 1200px small-desktop
max 1400px desktop
*/
/* stylelint-disable function-no-unknown */
/* html-documentation
Accordion
Accordion toggle element 1
Accordion copy - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Accordion toggle element 2
Accordion copy - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Accordion toggle element 3
Accordion copy - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
*/
.accordion {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.accordion--collapsed {
max-height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
}
.accordion--show {
display: block;
max-height: 600px !important;
transition: max-height 0.2s ease;
}
.accordion[data-accordion-toggle=true] .collapse-icon {
display: block !important;
}
.accordion[data-accordion-toggle=true] .show-icon {
display: none !important;
}
.accordion[data-accordion-toggle=false] .collapse-icon {
display: none !important;
}
.accordion[data-accordion-toggle=false] .show-icon {
display: block !important;
}
.piano-subscriptions-page-container .piano-pad-container,
.piano-subscriptions-page-container .subscription-content-loading {
margin-bottom: 10px;
min-height: 500px;
}
.piano-subscriptions-page-container .nq-user-alert {
margin: 0 10px;
background-color: #9D0D13;
color: #FFFFFF;
padding: 5px 10px;
border-radius: 5px;
}
.piano-subscriptions-page-container .nq-user-alert h3 {
margin: 0;
}
.piano-subscriptions-page-container .subscription-content-container {
margin: 25px 10px;
max-width: 970px;
}
@media (min-width: 1200px) {
.piano-subscriptions-page-container .subscription-content-container {
max-width: 1260px;
}
}
.piano-subscriptions-page-container .subscription-content-container .block-heading {
font-size: var(--font-size-l);
}
.piano-subscriptions-page-container .subscription-content-container .digital-subscription-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
align-self: stretch;
}
@media (min-width: 768px) {
.piano-subscriptions-page-container .subscription-content-container .digital-subscription-info {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.piano-subscriptions-page-container .subscription-content-container .digital-subscription-info p {
font-size: var(--font-size-s);
}
.piano-subscriptions-page-container .subscription-content-container .issue-item {
margin: 10px 0;
}
.piano-subscriptions-page-container .subscription-content-container .issue-item button {
display: flex;
justify-content: flex-start;
align-items: center;
border: none;
width: 100%;
cursor: pointer;
background-color: transparent;
border-bottom: 1px solid #CCCFD6;
color: #333333;
font-weight: var(--font-weight-bold);
padding: 10px 0;
}
.piano-subscriptions-page-container .subscription-content-container .issue-item button span {
margin-right: auto;
text-align: left;
font-size: var(--font-size-s);
color: #333333;
}
.piano-subscriptions-page-container .subscription-content-container .issue-item button span a {
color: #000000;
font-weight: var(--font-weight-bold);
text-decoration: underline;
}
.piano-subscriptions-page-container .subscription-content-container .issue-item button span a:visited {
color: #595959;
}
.piano-subscriptions-page-container .subscription-content-container .issue-item .accordion-content {
margin-top: 20px;
}
.piano-subscriptions-page-container .subscription-content-container .issue-item .accordion-content p {
margin-bottom: 15px;
font-size: var(--font-size-s);
}
.piano-subscriptions-page-container .subscription-content-container .issue-item .accordion-content a {
color: #000000;
font-weight: var(--font-weight-bold);
text-decoration: underline;
}
.piano-subscriptions-page-container .subscription-content-container .issue-item .accordion-content a:visited {
color: #595959;
}
.piano-subscriptions-page-container .subscription-content-container .ad-free-information {
margin-top: 50px;
}
.piano-subscriptions-page-container .subscription-content-container .ad-free-information__why-buy {
display: grid;
grid-template-columns: auto;
margin-top: 20px;
}
@media (min-width: 576px) {
.piano-subscriptions-page-container .subscription-content-container .ad-free-information__why-buy {
grid-template-columns: repeat(4, 1fr);
}
}
.piano-subscriptions-page-container .subscription-content-container .ad-free-information__reason {
text-align: center;
padding: 20px;
border-bottom: 1px solid #CCCFD6;
}
@media (min-width: 576px) {
.piano-subscriptions-page-container .subscription-content-container .ad-free-information__reason {
border-bottom: none;
border-right: 1px solid #CCCFD6;
}
.piano-subscriptions-page-container .subscription-content-container .ad-free-information__reason:last-child {
border-right: none;
}
}
.piano-subscriptions-page-container .subscription-content-container .ad-free-information__reason-number {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: var(--main-colour);
color: #FFFFFF;
margin: auto;
border-radius: 50%;
font-size: var(--font-size-l);
font-weight: var(--font-weight-bold);
}
.piano-subscriptions-page-container .subscription-content-container .ad-free-information__reason .highlighted {
padding: 10px;
margin-top: 20px;
background-color: var(--main-colour);
color: #FFFFFF;
border-radius: 5px;
}
.piano-subscriptions-page-container .subscription-content-container .delivery-bottom-sheet {
margin-top: 50px;
margin-bottom: 50px;
}
.piano-subscriptions-page-container .subscription-content-container .delivery-bottom-sheet #DeliverySubsBottomSheet {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid #CCCFD6;
}
@media (min-width: 576px) {
.piano-subscriptions-page-container .subscription-content-container .delivery-bottom-sheet #DeliverySubsBottomSheet {
flex-direction: row;
align-items: flex-start;
}
}
@media (min-width: 576px) {
.piano-subscriptions-page-container .subscription-content-container .delivery-bottom-sheet #DeliverySubsBottomSheet img {
margin-right: 50px;
}
}
.piano-subscriptions-page-container .subscription-content-container .delivery-bottom-sheet #DeliverySubsBottomSheet .delivery-message {
text-align: center;
padding: 10px;
}
@media (min-width: 576px) {
.piano-subscriptions-page-container .subscription-content-container .delivery-bottom-sheet #DeliverySubsBottomSheet .delivery-message {
display: flex;
flex-direction: column;
text-align: left;
}
}
.piano-subscriptions-page-container .subscription-content-container .delivery-bottom-sheet #DeliverySubsBottomSheet .delivery-message p {
text-align: center;
font-size: var(--font-size-xs);
}
@media (min-width: 576px) {
.piano-subscriptions-page-container .subscription-content-container .delivery-bottom-sheet #DeliverySubsBottomSheet .delivery-message p {
text-align: left;
margin-bottom: 10px;
font-size: var(--font-size-s);
}
}
.piano-subscriptions-page-container .subscription-content-container .delivery-bottom-sheet #DeliverySubsBottomSheet .delivery-message a {
font-size: var(--font-size-xs);
color: #000000;
font-weight: var(--font-weight-bold);
text-decoration: underline;
}
.piano-subscriptions-page-container .subscription-content-container .delivery-bottom-sheet #DeliverySubsBottomSheet .delivery-message a:visited {
color: #595959;
}
@media (min-width: 576px) {
.piano-subscriptions-page-container .subscription-content-container .delivery-bottom-sheet #DeliverySubsBottomSheet .delivery-message a {
font-size: var(--font-size-s);
}
}
.block {
position: relative;
}
.block-heading {
font-size: var(--font-size-l);
font-weight: var(--font-weight-bold);
font-family: var(--header-font);
color: #000000;
text-transform: var(--text-transform-heading);
margin-bottom: 25px;
margin-top: 0;
padding-top: 0;
cursor: default;
}
.block-heading.heading-double-underline {
display: inline-block;
text-align: center;
font-size: var(--font-size-m);
border-bottom: 4px double #9DA0A4;
margin: auto;
padding-bottom: 0;
margin-bottom: 10px;
}
.block-heading {
line-height: 120%;
width: fit-content;
position: relative;
}
@media (min-width: 768px) {
.block-heading {
font-size: var(--font-size-xl);
}
}
.block-heading::after {
content: "";
height: 4px;
background: var(--accent-colour);
width: 100%;
display: block;
position: absolute;
}
.block-heading--sub {
text-transform: capitalize;
}