@coopdigital/shared-component--membershiphero
Version:
1 lines • 16.4 kB
Source Map (JSON)
{"version":3,"sources":["../src/membership-hero.pcss"],"names":[],"mappings":"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","file":"membership-hero.css","sourcesContent":["/* Membership hero */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n:root {\n /* Connector curved line (small) */\n --membership-hero-background-small-width: 800px;\n --membership-hero-background-small-height: 265px;\n --membership-hero-background-small-origin-x: 50%;\n --membership-hero-background-small-offset-x: calc(\n (var(--membership-hero-background-small-width) / -2) - 100px\n );\n --membership-hero-background-small-offset-y: 60px;\n\n /* Connector curved line (medium) */\n --membership-hero-background-medium-width: 1440px;\n --membership-hero-background-medium-height: 476px;\n --membership-hero-background-medium-origin-x: 50%;\n --membership-hero-background-medium-offset-x: calc(\n (var(--membership-hero-background-medium-width) / -2) - 120px\n );\n --membership-hero-background-medium-offset-y: 62px;\n\n /* Connector curved line (large) */\n --membership-hero-background-large-width: 1732px;\n --membership-hero-background-large-height: 573px;\n --membership-hero-background-large-origin-x: 50%;\n --membership-hero-background-large-offset-x: calc(\n (var(--membership-hero-background-large-width) / -2) + 50px\n );\n --membership-hero-background-large-offset-y: -174px;\n\n /* Connector curved line (xlarge) */\n --membership-hero-background-xlarge-offset-x: calc(\n (var(--membership-hero-background-medium-width) / -2) - 340px\n );\n --membership-hero-background-xlarge-offset-y: 46px;\n\n /* Connector full-width repeater (left) */\n --membership-hero-connector-left-offset-x: 0;\n --membership-hero-connector-left-offset-y: calc(var(--spacing-32) - 12px);\n --membership-hero-connector-left-origin-x: 0;\n\n /* Connector full-width repeater (left, large) */\n --membership-hero-connector-left-large-offset-x: 0;\n --membership-hero-connector-left-large-offset-y: calc(var(--spacing-48) - 8px);\n --membership-hero-connector-left-large-origin-x: 0;\n\n /* Connector full-width repeater (left, xlarge) */\n --membership-hero-connector-left-xlarge-offset-x: -100px;\n --membership-hero-connector-left-xlarge-offset-y: calc(var(--spacing-64) - 8px);\n --membership-hero-connector-left-xlarge-origin-x: 0;\n\n /* Connector full-width repeater (right) */\n --membership-hero-connector-right-offset-x: 0;\n --membership-hero-connector-right-offset-y: 264px;\n --membership-hero-connector-right-origin-x: 50%;\n\n /* Connector full-width repeater (right, xlarge) */\n --membership-hero-connector-right-xlarge-offset-x: 100px;\n --membership-hero-connector-right-xlarge-offset-y: 329px;\n --membership-hero-connector-right-xlarge-origin-x: 50%;\n\n /* Hero image (small) */\n --membership-hero-image-small-width: 400px;\n --membership-hero-image-small-height: 300px;\n --membership-hero-photo-small-width: 338px;\n --membership-hero-photo-small-height: 190px;\n\n /* Hero image (medium) */\n --membership-hero-image-medium-width: 512px;\n --membership-hero-image-medium-height: 384px;\n --membership-hero-photo-medium-width: 440px;\n --membership-hero-photo-medium-height: 247px;\n\n /* Hero image (large) */\n --membership-hero-image-large-width: 640px;\n --membership-hero-image-large-height: 480px;\n --membership-hero-photo-large-width: 555px;\n --membership-hero-photo-large-height: 312px;\n}\n\n.coop-c-membership-hero {\n position: relative;\n overflow: hidden;\n margin: 0 auto;\n\n /* required to overwrite foundation CSS */\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n.coop-c-membership-hero__inner {\n position: relative;\n z-index: 1;\n\n max-width: 81rem;\n min-height: 410px;\n margin: 0 auto;\n padding: var(--spacing-24) var(--spacing-16) 0;\n\n @media (--mq-medium) {\n min-height: 440px;\n padding: var(--spacing-32) var(--spacing-16) var(--spacing-48);\n }\n\n @media (--mq-large) {\n min-height: 500px;\n padding: var(--spacing-32) var(--spacing-24) var(--spacing-64);\n }\n\n @media (--mq-xlarge) {\n padding: var(--spacing-48) var(--spacing-16) var(--spacing-64);\n }\n}\n\n.coop-c-membership-hero__content {\n position: relative;\n z-index: 1;\n max-width: 33rem; /* 528px */\n\n @media (--mq-small) {\n padding-bottom: var(--spacing-64);\n }\n\n @media (--mq-medium) {\n padding-bottom: var(--spacing-32);\n }\n}\n\n.coop-c-membership-hero__content--full-width {\n max-width: none;\n}\n\n.coop-c-membership-hero__body {\n @media (--mq-small) {\n max-width: 80%;\n }\n\n @media (--mq-medium) {\n max-width: 90%;\n }\n}\n\n.coop-c-membership-hero__content--full-width {\n & .coop-c-membership-hero__body {\n @media (--mq-small) {\n max-width: 90%;\n }\n }\n}\n\n.coop-c-membership-hero__title {\n margin-bottom: var(--spacing-24);\n\n @media (--mq-medium) {\n margin-bottom: var(--spacing-16);\n }\n}\n\nh2.coop-c-membership-hero__title {\n margin-bottom: var(--spacing-24);\n}\n\n.coop-c-membership-hero__cta {\n margin-top: var(--spacing-24);\n font-size: var(--type-body-s);\n\n & .coop-t-link {\n color: var(--color-text);\n }\n}\n\n.coop-c-membership-hero__btns {\n margin-bottom: var(--spacing-24);\n /* removes whitespace caused by inline-block */\n font-size: 0;\n}\n\n.coop-c-membership-hero__btns .coop-btn--app {\n margin: 0 var(--spacing-16) var(--spacing-16) 0;\n\n &:last-child {\n margin-right: 0;\n }\n}\n\n.coop-c-membership-hero__caption {\n margin-bottom: 0;\n}\n\n.coop-c-membership-hero__media {\n position: relative;\n z-index: 0;\n margin: 0;\n}\n\n.coop-c-membership-hero__picture,\n.coop-c-membership-hero__image {\n display: block;\n}\n\n/* Digital card promo picture */\n.coop-c-membership-hero__picture {\n position: relative;\n z-index: 1;\n}\n\n.coop-c-membership-hero__image {\n display: block;\n width: 100%;\n}\n\n/* Connector curved line */\n.coop-c-membership-hero__connector {\n position: absolute;\n z-index: 0;\n top: 0;\n\n /* Small connector */\n left: var(--membership-hero-background-small-origin-x);\n width: var(--membership-hero-background-small-width);\n height: var(--membership-hero-background-small-height);\n margin-left: var(--membership-hero-background-small-offset-x);\n margin-top: var(--membership-hero-background-small-offset-y);\n\n /* Large connector (at small viewport) */\n @media (--mq-small) {\n left: var(--membership-hero-background-large-origin-x);\n width: var(--membership-hero-background-large-width);\n height: var(--membership-hero-background-large-height);\n margin-left: var(--membership-hero-background-large-offset-x);\n margin-top: var(--membership-hero-background-large-offset-y);\n }\n}\n\n/* Connector full-width repeater */\n.coop-c-membership-hero:before,\n.coop-c-membership-hero:after {\n position: absolute;\n z-index: 0;\n width: 50%;\n height: 0;\n border-top: 8px solid;\n border-color: inherit;\n content: \"\";\n}\n\n/* Connector full-width repeater (left) */\n.coop-c-membership-hero:before {\n bottom: var(--membership-hero-connector-left-offset-y);\n left: var(--membership-hero-connector-left-origin-x);\n margin-left: var(--membership-hero-connector-left-offset-x);\n display: none;\n\n @media (--mq-small) {\n display: block;\n }\n\n @media (--mq-large) {\n left: var(--membership-hero-connector-left-large-origin-x);\n\n /* Offset connector from origin */\n bottom: var(--membership-hero-connector-left-large-offset-y);\n margin-left: var(--membership-hero-connector-left-large-offset-x);\n }\n\n @media (--mq-xlarge) {\n left: var(--membership-hero-connector-left-xlarge-origin-x);\n\n /* Offset connector from origin */\n bottom: var(--membership-hero-connector-left-xlarge-offset-y);\n margin-left: var(--membership-hero-connector-left-xlarge-offset-x);\n }\n}\n\n/* Connector full-width repeater (right) */\n.coop-c-membership-hero:after {\n bottom: var(--membership-hero-connector-right-offset-y);\n left: var(--membership-hero-connector-right-origin-x);\n display: block;\n\n @media (--mq-small) {\n display: none;\n }\n\n @media (--mq-xlarge) {\n left: var(--membership-hero-connector-right-xlarge-origin-x);\n display: block;\n\n /* Offset connector from origin */\n bottom: var(--membership-hero-connector-right-xlarge-offset-y);\n margin-left: var(--membership-hero-connector-right-xlarge-offset-x);\n }\n}\n\n.coop-c-membership-hero__path {\n fill: none;\n stroke: inherit;\n}\n\n/* Adjust for hero with handset image (4:3) */\n.coop-c-membership-hero--handset {\n & .coop-c-membership-hero__content {\n max-width: 21.875rem; /* 350px */\n\n @media (--mq-medium) {\n max-width: 33rem; /* 528px */\n }\n }\n\n & .coop-c-membership-hero__content--full-width {\n max-width: none;\n\n @media (--mq-small) {\n max-width: 60%;\n }\n\n @media (--mq-medium) {\n max-width: 33rem; /* 528px */\n }\n }\n\n & .coop-c-membership-hero__media {\n height: var(--membership-hero-image-medium-height);\n\n @media (--mq-small) {\n position: absolute;\n z-index: 0;\n right: 0;\n right: -5%;\n bottom: 0;\n height: auto;\n margin-top: 0;\n }\n\n @media (--mq-medium) {\n right: 0;\n }\n }\n\n & .coop-c-membership-hero__picture {\n position: absolute;\n top: 0;\n left: 50%;\n\n width: var(--membership-hero-image-medium-width);\n height: var(--membership-hero-image-medium-height);\n margin-left: calc(var(--membership-hero-image-medium-width) / -2);\n\n @media (--mq-small) {\n position: relative;\n top: auto;\n left: auto;\n width: var(--membership-hero-image-small-width);\n height: var(--membership-hero-image-small-height);\n margin-left: 0;\n }\n\n @media (--mq-large) {\n width: var(--membership-hero-image-large-width);\n height: var(--membership-hero-image-large-height);\n }\n }\n\n & .coop-c-membership-hero__connector {\n /* Medium connector (at large viewport) */\n @media (--mq-large) {\n left: var(--membership-hero-background-medium-origin-x);\n width: var(--membership-hero-background-medium-width);\n height: var(--membership-hero-background-medium-height);\n margin-left: var(--membership-hero-background-medium-offset-x);\n margin-top: var(--membership-hero-background-medium-offset-y);\n }\n\n /* Medium connector (at xlarge viewport) */\n @media (--mq-xlarge) {\n margin-left: var(--membership-hero-background-xlarge-offset-x);\n margin-top: var(--membership-hero-background-xlarge-offset-y);\n }\n }\n}\n\n/* Adjust for hero with photo (16:9) */\n.coop-c-membership-hero--photo {\n & .coop-c-membership-hero__inner {\n @media (--mq-xlarge) {\n min-height: 580px;\n padding-bottom: var(--spacing-32);\n }\n }\n\n & .coop-c-membership-hero__content {\n @media (--mq-medium) {\n max-width: 50%;\n }\n }\n\n & .coop-c-membership-hero__media {\n margin: var(--spacing-32) calc(var(--spacing-16) * -1) 0;\n\n @media (--mq-medium) {\n position: absolute;\n right: var(--spacing-32);\n bottom: 110px;\n\n width: var(--membership-hero-photo-small-width);\n margin: 0;\n }\n\n @media (--mq-large) {\n right: var(--spacing-32);\n bottom: 205px;\n width: var(--membership-hero-photo-medium-width);\n }\n\n @media (--mq-xlarge) {\n right: var(--spacing-16);\n bottom: 205px;\n width: var(--membership-hero-photo-large-width);\n }\n }\n\n & .coop-c-membership-hero__picture {\n @media (--mq-medium) {\n height: var(--membership-hero-photo-small-height);\n }\n\n @media (--mq-large) {\n height: var(--membership-hero-photo-medium-height);\n }\n\n @media (--mq-xlarge) {\n height: var(--membership-hero-photo-large-height);\n }\n }\n\n & .coop-c-membership-hero__connector {\n @media (--mq-large) {\n top: 132px;\n }\n\n @media (--mq-xlarge) {\n top: 181px;\n }\n }\n\n &:before,\n &:after {\n display: none;\n }\n\n &:before {\n @media (--mq-medium) {\n display: block;\n }\n\n @media (--mq-xlarge) {\n bottom: 56px;\n }\n }\n}\n\n/* Adjust for hero with photo (16:9) on home page */\n.coop-c-membership-hero--photo.coop-c-membership-hero--home {\n & .coop-c-membership-hero__title {\n @media (--mq-medium) {\n margin-bottom: var(--spacing-32);\n font-size: 2.625rem; /* 42px */\n }\n\n @media (--mq-large) {\n font-size: 2.875rem; /* 46px */\n }\n\n @media (--mq-xlarge) {\n font-size: 4.25rem; /* 68px */\n }\n }\n\n & .coop-c-membership-hero__body {\n @media (--mq-large) {\n font-size: 1.375rem; /* 22px */\n }\n\n @media (--mq-xlarge) {\n font-size: 1.625rem; /* 26px */\n }\n }\n\n & .coop-c-membership-hero__cta {\n @media (--mq-xlarge) {\n margin-top: var(--spacing-48);\n }\n }\n\n & .coop-c-membership-hero__connector {\n @media (--mq-large) {\n top: 132px;\n }\n\n @media (--mq-xlarge) {\n top: 101px;\n }\n }\n\n &:before {\n @media (--mq-xlarge) {\n bottom: 136px;\n }\n }\n}\n\n.coop-c-membership-hero__list {\n list-style: none;\n padding-left: calc(var(--spacing-32) + var(--spacing-4));\n margin: var(--spacing-24) 0;\n}\n\n.coop-c-membership-hero__item {\n position: relative;\n margin-bottom: var(--spacing-16);\n}\n\n.coop-c-membership-hero__tick {\n position: absolute;\n left: calc((var(--spacing-32) + var(--spacing-4)) * -1);\n top: 0.1875rem; /* 3px */\n}\n"]}