@coopdigital/shared-component--hero
Version:
Co-op Shared Component: Hero
1 lines • 8.15 kB
Source Map (JSON)
{"version":3,"sources":["../src/hero.pcss"],"names":[],"mappings":"AAIA,aACE,eAAgB,CAEhB,kBAAgC,CAChC,iBAAkB,CAClB,SACF,CAEA,8BACE,oBAAqB,CACrB,eAA+B,CAC/B,UACF,CAEA,uCACE,iBACF,CAEA,qCACE,aAAc,CACd,eACF,CAEA,oCACE,iBAAkB,CAClB,gBACF,CAEA,4CACE,aAAc,CACd,mBACF,CAEA,gCACE,aACF,CAEA,wBACE,aACE,kBACF,CACF,CACA,mBACE,mBACF,CACA,wBACE,mBACE,oBACF,CACF,CACA,oBACE,eAAgB,CAChB,qBAA8C,CAC9C,aAAc,CACd,iBACF,CACA,wBACE,oBACE,gBACF,CACF,CACA,wBACE,oBACE,qBACF,CACF,CACA,2BACE,oBACE,mBACF,CACF,CACA,2CACE,mBACF,CACA,wBACE,2CACE,mBACF,CACF,CACA,wBACE,2CACE,mBACF,CACF,CACA,2BACE,2CACE,mBACF,CACF,CACA,wBACE,wCACE,gBACF,CACF,CACA,uCACE,mBACF,CACA,wBACE,uCACE,oBACF,CACF,CACA,oBACE,iBAAkB,CAClB,SAAU,CACV,QAAS,CACT,kBAA2B,CAC3B,oBACF,CACA,wBACE,oBACE,UAAW,CACX,cAAe,CACf,kBACF,CACF,CACA,wBACE,wCACE,SACF,CACF,CACA,0BACE,kBAA2B,CAC3B,oBACF,CACA,4BACE,0BACE,cAAgC,CAChC,oBACF,CACF,CACA,wBACE,0BACE,gBACF,CACF,CACA,oBACE,mBAAiC,CACjC,iBAAkB,CAClB,SACF,CACA,wBACE,oBACE,SAAU,CACV,QAAS,CACT,iBAA+B,CAC/B,WACF,CACF,CACA,oBACE,aACF,CACA,wBACE,aAAc,CACd,UACF,CACA,mBACE,iBAAkB,CAClB,SAAU,CACV,mBACF,CACA,wBACE,mBACE,UAAW,CACX,cAAe,CACf,kBACF,CACF,CACA,2BACE,mBACE,gBACF,CACF,CACA,qBACE,sBAA2B,CAC3B,gBAA8B,CAC9B,kBACF,CACA,gCACE,eACF,CACA,wBACE,qBACE,kBACF,CACA,uCACE,SACF,CACF,CACA,wBACE,6DACE,SAAU,CACV,mBACF,CACF,CACA,wBACE,6DACE,mBACF,CACF,CACA,uBACE,iBAAkB,CAClB,QAAS,CACT,QAAS,CACT,UAAW,CACX,0BAA2B,CAC3B,gBAAiB,CACjB,SAAU,CACV,YAAgC,CAChC,mBACF,CAEA,wBACE,uBACE,SAAU,CACV,OAAQ,CACR,cAAe,CACf,UACF,CACF,CACA,wBACE,uBACE,OAAQ,CACR,UACF,CACF,CACA,2BACE,uBACE,UACF,CACF,CACA,wBACE,uBACE,WAAY,CACZ,UACF,CACF,CACA,8BACE,iBAAkB,CAClB,UAAW,CACX,QAAS,CACT,wBACF,CACA,4BACE,UAAW,CACX,WAAY,CACZ,iBAAkB,CAClB,KAAM,CACN,MACF,CAEA,oCACE,eACF,CAEA,iFAEE,qBACF,CAEA,6BACE,YAAa,CACb,cACF,CAEA,mBACE,iBAAkB,CAClB,kBACF,CAEA,yBACE,kBACF,CAEA,2BACE,cAA2B,CAC3B,eACF,CAEA,wBACE,2BACE,sBACF,CACF,CAKA,8JAGE,aACF,CAEA,8JAGE,UACF","file":"hero.css","sourcesContent":["/* Hero */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-hero {\n overflow: hidden;\n margin: 0 auto;\n margin-bottom: var(--spacing-32);\n position: relative;\n z-index: 0;\n}\n\n.coop-c-hero .coop-c-signpost {\n display: inline-block;\n margin: var(--spacing-16) 0 0 0;\n width: auto;\n}\n\n.coop-c-hero .coop-c-signpost__content {\n min-height: 3.3rem;\n}\n\n.coop-c-hero .coop-c-signpost__title {\n flex-shrink: 0;\n flex-basis: auto;\n}\n\n.coop-c-hero .coop-c-signpost__icon {\n fill: currentColor;\n margin-left: var(--spacing-16);\n}\n\n.coop-c-hero .coop-c-signpost__icon--prefix {\n margin-left: 0;\n margin-right: var(--spacing-12);\n}\n\n.coop-c-hero .coop-c-signpost a {\n color: var(--color-text);\n}\n\n@media (--mq-medium) {\n .coop-c-hero {\n margin-bottom: var(--spacing-48);\n }\n}\n.coop-c-hero--pull {\n margin-bottom: -6rem;\n}\n@media (--mq-large) {\n .coop-c-hero--pull {\n margin-bottom: -12rem;\n }\n}\n.coop-c-hero__inner {\n max-width: 81rem;\n padding: var(--spacing-24) var(--spacing-16) 0;\n margin: 0 auto;\n position: relative;\n}\n@media (--mq-medium) {\n .coop-c-hero__inner {\n padding-top: var(--spacing-32);\n }\n}\n@media (--mq-large) {\n .coop-c-hero__inner {\n padding: var(--spacing-32) var(--spacing-24) 0;\n }\n}\n@media (--mq-xlarge) {\n .coop-c-hero__inner {\n padding: var(--spacing-48) var(--spacing-16) 0;\n }\n}\n.coop-c-hero--squircle .coop-c-hero__inner {\n padding-bottom: var(--spacing-48);\n}\n@media (--mq-medium) {\n .coop-c-hero--squircle .coop-c-hero__inner {\n padding-bottom: var(--spacing-48);\n }\n}\n@media (--mq-large) {\n .coop-c-hero--squircle .coop-c-hero__inner {\n padding-bottom: 6rem;\n }\n}\n@media (--mq-xlarge) {\n .coop-c-hero--squircle .coop-c-hero__inner {\n padding-bottom: 7rem;\n }\n}\n@media (--mq-medium) {\n .coop-c-hero--media .coop-c-hero__inner {\n padding-bottom: 0;\n }\n}\n.coop-c-hero--pull .coop-c-hero__inner {\n padding-bottom: 6rem;\n}\n@media (--mq-large) {\n .coop-c-hero--pull .coop-c-hero__inner {\n padding-bottom: 13rem;\n }\n}\n.coop-c-hero__title {\n position: relative;\n z-index: 2;\n margin: 0;\n font-size: var(--type-h1-l);\n line-height: 3.625rem;\n}\n@media (--mq-medium) {\n .coop-c-hero__title {\n float: left;\n width: 66.6666%;\n padding-right: var(--spacing-16);\n }\n}\n@media (--mq-medium) {\n .coop-c-hero--media .coop-c-hero__title {\n width: 50%;\n }\n}\n.coop-c-hero__title--mega {\n font-size: var(--type-h1-s);\n line-height: 2.813rem;\n}\n@media (--mq-xsmall) {\n .coop-c-hero__title--mega {\n font-size: var(--type-h1-mega-s);\n line-height: 3.625rem;\n }\n}\n@media (--mq-large) {\n .coop-c-hero__title--mega {\n font-size: var(--type-h1-mega-l);\n }\n}\n.coop-c-hero__media {\n margin: var(--spacing-16) -1rem 0;\n position: relative;\n z-index: 2;\n}\n@media (--mq-medium) {\n .coop-c-hero__media {\n width: 50%;\n margin: 0;\n padding-left: var(--spacing-16);\n float: right;\n }\n}\n.coop-c-hero__image {\n display: block;\n}\n.coop-c-hero__image img {\n display: block;\n width: 100%;\n}\n.coop-c-hero__body {\n position: relative;\n z-index: 2;\n padding-top: 1.25rem;\n}\n@media (--mq-medium) {\n .coop-c-hero__body {\n float: left;\n width: 66.6666%;\n padding-right: var(--spacing-32);\n }\n}\n@media (--mq-xlarge) {\n .coop-c-hero__body {\n padding-top: var(--spacing-32);\n }\n}\n.coop-c-hero__body p {\n font-size: var(--type-sp-l);\n line-height: var(--spacing-32);\n margin-bottom: var(--spacing-16);\n}\n.coop-c-hero__body p:last-child {\n margin-bottom: 0;\n}\n@media (--mq-medium) {\n .coop-c-hero__body p {\n font-size: var(--type-lp-s);\n }\n .coop-c-hero--media .coop-c-hero__body {\n width: 50%;\n }\n}\n@media (--mq-medium) {\n .coop-c-hero--squircle.coop-c-hero--media .coop-c-hero__body {\n width: 50%;\n padding-bottom: var(--spacing-48);\n }\n}\n@media (--mq-large) {\n .coop-c-hero--squircle.coop-c-hero--media .coop-c-hero__body {\n padding-bottom: var(--spacing-64);\n }\n}\n.coop-c-hero__squircle {\n position: absolute;\n bottom: 0;\n left: 50%;\n width: 280%;\n transform: translateX(-50%);\n margin-left: -10%;\n z-index: 1;\n fill: var(--color-blue-light-10);\n pointer-events: none;\n}\n/* --color-blue-light-10 */\n@media (--mq-medium) {\n .coop-c-hero__squircle {\n left: auto;\n right: 0;\n transform: none;\n width: 150%;\n }\n}\n@media (--mq-large) {\n .coop-c-hero__squircle {\n right: 0;\n width: 160%;\n }\n}\n@media (--mq-xlarge) {\n .coop-c-hero__squircle {\n width: 145%;\n }\n}\n@media (--mq-xxlarge) {\n .coop-c-hero__squircle {\n right: -1rem;\n width: 155%;\n }\n}\n.coop-c-hero__squircle__inner {\n position: relative;\n width: 100%;\n height: 0;\n padding-top: 95.78246393%;\n}\n.coop-c-hero__squircle__svg {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.coop-c-hero .coop-c-hero__end-date {\n margin-top: var(--spacing-16);\n}\n\n.coop-c-hero .coop-c-hero__end-date svg,\n.coop-c-hero .coop-c-hero__end-date span {\n vertical-align: middle;\n}\n\n.coop-c-hero__link-container {\n display: flex;\n flex-wrap: wrap;\n}\n\n.coop-c-hero__link {\n margin-right: 10px;\n margin-bottom: 10px;\n}\n\n.coop-c-hero__disclaimer {\n margin-bottom: var(--spacing-16);\n}\n\n.coop-c-hero__disclaimer p {\n font-size: var(--type-sp-s);\n line-height: var(--type-line-height);\n}\n\n@media (--mq-large) {\n .coop-c-hero__disclaimer p {\n font-size: var(--type-sp-l);\n }\n}\n\n/* target links in heros that aren't coop-btn,\n or are direct descendants of hero__body\n or direct descendants of p tags descended directly from hero__body */\n.coop-c-hero.coop-u-black .coop-c-hero__body > a,\n.coop-c-hero.coop-u-black .coop-c-hero__body > p > a,\n.coop-c-hero.coop-u-black .coop-c-hero__body a:not(.coop-btn) {\n color: var(--color-text);\n}\n\n.coop-c-hero.coop-u-white .coop-c-hero__body > a,\n.coop-c-hero.coop-u-white .coop-c-hero__body > p > a,\n.coop-c-hero.coop-u-white .coop-c-hero__body a:not(.coop-btn) {\n color: var(--color-white);\n}\n"]}