/* Extend CLF4 style with class apply to components - v0.0.2 */ /* Variable and fallback */ :root { /* General Style */ --com-padding: 40px; /* Color fallback in case variable name change */ --color-p1: var(--c-p1, #cc0633); --color-p2: var(--c-p2, #a6192e); --color-p3: var(--c-p3: #000); --color-p4: var(--c-p4: #fff); --color-s1: var(--c-s1, #414042); --color-s2: var(--c-s2, #e6e7e8); --color-s3: var(--c-s3, #f5f5f5); --color-s4: var(--c-s4, #a7a9ac); --color-s5: var(--c-s5, #6d6f71); --color-s6: var(--c-s6, #49484a); --color-s7: var(--c-s7, #efefef); --color-s8: var(--c-s8, #979797); --color-s9: var(--c-s9, #d7d7d7); --color-transparent: var(--c-transparent, #fff0); } /*** Browser Anchor link smooth scrolling and padding space ***/ *[id] { scroll-margin-top: 80px; } html { scroll-behavior: smooth; } /*** Column control component - Vertical align cewtner ***/ .col1-valign-center .c1, .col2-valign-center .c2, .col3-valign-center .c3, .col4-valign-center .c4, .all-valign-center :is(.c1, .c2, .c3, .c4) { display: grid; align-items: center; } .col1-valign-center .c1:not(:has(.fill-col)), .col2-valign-center .c2:not(:has(.fill-col)), .col3-valign-center .c3:not(:has(.fill-col)), .col4-valign-center .c4:not(:has(.fill-col)), .all-valign-center :is(.c1, .c2, .c3, .c4):not(:has(.fill-col)) { align-content: center; /* Fix Grid automatically stretches the rows to fill that entire height */ } .col1-valign-bottom .c1, .col2-valign-bottom .c2, .col3-valign-bottom .c3, .col4-valign-bottom .c4, .all-valign-bottom :is(.c1, .c2, .c3, .c4) { display: grid; align-items: end; } .col1-valign-bottom .c1:not(:has(.fill-col)), .col2-valign-bottom .c2:not(:has(.fill-col)), .col3-valign-bottom .c3:not(:has(.fill-col)), .col4-valign-bottom .c4:not(:has(.fill-col)), .all-valign-bottom :is(.c1, .c2, .c3, .c4):not(:has(.fill-col)) { align-content: end; /* Fix Grid automatically stretches the rows to fill that entire height */ } /* For Vertical align preview in author mode (hide new section create zone) */ .col1-valign-center .c1 > div.new.section, .col2-valign-center .c2 > div.new.section, .col3-valign-center .c3 > div.new.section, .col4-valign-center .c4 > div.new.section, .all-valign-center :is(.c1, .c2, .c3, .c4) > div.new.section, .col1-valign-bottom .c1 > div.new.section, .col2-valign-bottom .c2 > div.new.section, .col3-valign-bottom .c3 > div.new.section, .col4-valign-bottom .c4 > div.new.section, .all-valign-bottom :is(.c1, .c2, .c3, .c4) > div.new.section { display: none; } /*** Images component - Responsive fill the column and content vertical align ***/ .image.parbase:has(div[class*="fill-col"]), .textimage:has(div[class*="fill-col"]), [class*="fill-col"]:is(.image-container, .overlay-banner, .overlay-banner-white), [class*="fill-col"] > div:not(.clear):not(.text) { height: 100%; grid-template-rows: 1fr auto; } [class*="fill-col"] img { height: 100%; object-fit: cover; } [class*="fill-col"] > div.clear { display: none; } /*** Text & Image component (overlay-banner style) - Vertical align at dekstop (980px above) ***/ @media (min-width: 980px) { .main__content div.textimage [class*="fill-col"]:is(.overlay-banner, .overlay-banner-white) > div.text, .main__content div.textimage [class*="valign-"]:is(.overlay-banner, .overlay-banner-white) > div.text { padding-top: calc( 0.45em + var(--com-padding) ); padding-bottom: var(--com-padding); width: 50%; & p { position: unset; /* unset white test box position:absolute; in AEM */ } } :where(.main__content div.textimage [class*="fill-col"]:is(.overlay-banner, .overlay-banner-white), .main__content div.textimage [class*="valign-"]:is(.overlay-banner, .overlay-banner-white) ) { display: grid; align-items: center; } /* follow existing align center as default */ .main__content div.textimage [class*="fill-col"]:is(.overlay-banner, .overlay-banner-white).text-right > div.text p, .main__content div.textimage [class*="valign-"]:is(.overlay-banner, .overlay-banner-white).text-right > div.text p { text-align: right; margin-right: 3rem; margin-left: auto; } .main__content div.textimage .valign-top:is(.overlay-banner, .overlay-banner-white) { align-items: start; } .main__content div.textimage .valign-center:is(.overlay-banner, .overlay-banner-white) { align-items: center; } .main__content div.textimage .valign-bottom:is(.overlay-banner, .overlay-banner-white) { align-items: end; } } @media (max-width: 979px) { .main__content div.textimage [class*="fill-col"]:is(.overlay-banner, .overlay-banner-white) > div.text { /* grid-row: 1; */ align-content: end; } .main__content div.textimage [class*="fill-col"]:is(.overlay-banner, .overlay-banner-white).text-right > div.text { justify-items:normal; } } /* Text & Image component - Text size */ div.textimage .title-Emph1 > .text :is(h1, h2, h3, h4, h5, h6){ padding-top: 0.15em; line-height: 0.95em; padding-bottom: 0; font-size: clamp(47px, 47px + 0.05185185185 * (100vw - 900px), 75px); } /* Position the focus point of the photo */ :is(.image-container, .overlay-banner, .overlay-banner-white){ &.focus-0-0 img{ object-position: 0% 0%; } &.focus-12\.5-0 img{ object-position: 12.5% 0%; } &.focus-25-0 img{ object-position: 25% 0%; } &.focus-37\.5-0 img{ object-position: 37.5% 0%; } &.focus-50-0 img{ object-position: 50% 0%; } &.focus-62\.5-0 img{ object-position: 62.5% 0%; } &.focus-75-0 img{ object-position: 75% 0%; } &.focus-87\.5-0 img{ object-position: 87.5% 0%; } &.focus-100-0 img{ object-position:100% 0%; } &.focus-0-12\.5 img{ object-position: 0% 12.5%; } &.focus-12\.5-12\.5 img{ object-position: 12.5% 12.5%; } &.focus-25-12\.5 img{ object-position: 25% 12.5%; } &.focus-37\.5-12\.5 img{ object-position: 37.5% 12.5%; } &.focus-50-12\.5 img{ object-position: 50% 12.5%; } &.focus-62\.5-12\.5 img{ object-position: 62.5% 12.5%; } &.focus-75-12\.5 img{ object-position: 75% 12.5%; } &.focus-87\.5-12\.5 img{ object-position: 87.5% 12.5%; } &.focus-100-12\.5 img{ object-position:100% 12.5%; } &.focus-0-25 img{ object-position: 0% 25%; } &.focus-12\.5-25 img{ object-position: 12.5% 25%; } &.focus-25-25 img{ object-position: 25% 25%; } &.focus-37\.5-25 img{ object-position: 37.5% 25%; } &.focus-50-25 img{ object-position: 50% 25%; } &.focus-62\.5-25 img{ object-position: 62.5% 25%; } &.focus-75-25 img{ object-position: 75% 25%; } &.focus-87\.5-25 img{ object-position: 87.5% 25%; } &.focus-100-25 img{ object-position:100% 25%; } &.focus-0-37\.5 img{ object-position: 0% 37.5%; } &.focus-12\.5-37\.5 img{ object-position: 12.5% 37.5%; } &.focus-25-37\.5 img{ object-position: 25% 37.5%; } &.focus-37\.5-37\.5 img{ object-position: 37.5% 37.5%; } &.focus-50-37\.5 img{ object-position: 50% 37.5%; } &.focus-62\.5-37\.5 img{ object-position: 62.5% 37.5%; } &.focus-75-37\.5 img{ object-position: 75% 37.5%; } &.focus-87\.5-37\.5 img{ object-position: 87.5% 37.5%; } &.focus-100-37\.5 img{ object-position:100% 37.5%; } &.focus-0-50 img{ object-position: 0% 50%; } &.focus-12\.5-50 img{ object-position: 12.5% 50%; } &.focus-25-50 img{ object-position: 25% 50%; } &.focus-37\.5-50 img{ object-position: 37.5% 50%; } &.focus-50-50 img{ object-position: 50% 50%; } &.focus-62\.5-50 img{ object-position: 62.5% 50%; } &.focus-75-50 img{ object-position: 75% 50%; } &.focus-87\.5-50 img{ object-position: 87.5% 50%; } &.focus-100-50 img{ object-position:100% 50%; } &.focus-0-62\.5 img{ object-position: 0% 62.5%; } &.focus-12\.5-62\.5 img{ object-position: 12.5% 62.5%; } &.focus-25-62\.5 img{ object-position: 25% 62.5%; } &.focus-37\.5-62\.5 img{ object-position: 37.5% 62.5%; } &.focus-50-62\.5 img{ object-position: 50% 62.5%; } &.focus-62\.5-62\.5 img{ object-position: 62.5% 62.5%; } &.focus-75-62\.5 img{ object-position: 75% 62.5%; } &.focus-87\.5-62\.5 img{ object-position: 87.5% 62.5%; } &.focus-100-62\.5 img{ object-position:100% 62.5%; } &.focus-0-75 img{ object-position: 0% 75%; } &.focus-12\.5-75 img{ object-position: 12.5% 75%; } &.focus-25-75 img{ object-position: 25% 75%; } &.focus-37\.5-75 img{ object-position: 37.5% 75%; } &.focus-50-75 img{ object-position: 50% 75%; } &.focus-62\.5-75 img{ object-position: 62.5% 75%; } &.focus-75-75 img{ object-position: 75% 75%; } &.focus-87\.5-75 img{ object-position: 87.5% 75%; } &.focus-100-75 img{ object-position:100% 75%; } &.focus-0-87\.5 img{ object-position: 0% 87.5%; } &.focus-12\.5-87\.5 img{ object-position: 12.5% 87.5%; } &.focus-25-87\.5 img{ object-position: 25% 87.5%; } &.focus-37\.5-87\.5 img{ object-position: 37.5% 87.5%; } &.focus-50-87\.5 img{ object-position: 50% 87.5%; } &.focus-62\.5-87\.5 img{ object-position: 62.5% 87.5%; } &.focus-75-87\.5 img{ object-position: 75% 87.5%; } &.focus-87\.5-87\.5 img{ object-position: 87.5% 87.5%; } &.focus-100-87\.5 img{ object-position:100% 87.5%; } &.focus-0-100 img{ object-position: 0% 100%; } &.focus-12\.5-100 img{ object-position: 12.5% 100%; } &.focus-25-100 img{ object-position: 25% 100%; } &.focus-37\.5-100 img{ object-position: 37.5% 100%; } &.focus-50-100 img{ object-position: 50% 100%; } &.focus-62\.5-100 img{ object-position: 62.5% 100%; } &.focus-75-100 img{ object-position: 75% 100%; } &.focus-87\.5-100 img{ object-position: 87.5% 100%; } &.focus-100-100 img{ object-position:100% 100%; } } /*** Images component (with fill-col fit) - Aspect ratio and min height ***/ :is(.image-container, .overlay-banner, .overlay-banner-white){ &.aspect1-1 img { aspect-ratio: 1/1; } &.aspect4-3 img { aspect-ratio: 4/3; } &.aspect3-2 img { aspect-ratio: 3/2; } &.aspect16-9 img { aspect-ratio: 16/9;} &.aspect5-2 img { aspect-ratio: 5/2; } &.aspect3-1 img { aspect-ratio: 3/1; } &.aspect4-1 img { aspect-ratio: 4/1; } &.aspect5-1 img { aspect-ratio: 5/1; } &.aspect6-1 img { aspect-ratio: 6/1; } } /* make aspect ratio able to use without fill-col fill column class */ :is(.image-container, .overlay-banner, .overlay-banner-white)[class*="aspect"]:not(.fill-col) img { object-fit: cover; } /* minimum height for help mobile image height not too small */ :is(.image-container, .overlay-banner, .overlay-banner-white){ &.min-h-150 img { min-height: 150px; } &.min-h-175 img { min-height: 175px; } &.min-h-200 img { min-height: 200px; } &.min-h-225 img { min-height: 225px; } &.min-h-250 img { min-height: 250px; } &.min-h-275 img { min-height: 275px; } &.min-h-300 img { min-height: 300px; } &.min-h-325 img { min-height: 325px; } &.min-h-350 img { min-height: 350px; } } /*** Images component - Parallax scroll effect ***/ .image-container.parallax:not(.fill-col):not([class*="aspect"]) img { aspect-ratio: 5 / 1; object-fit: cover; /* object-position: 50% 50%; */ } .sfu-columns > .parallax, /* this make it also work with content teaser add Parallax effect */ .image-container.parallax img { animation: parallax linear; animation-timeline: view(); /* Not totally support in Fireforx yet */ } @keyframes parallax { from { background-position-y: 75%; object-position: 50% 75%; } to { background-position-y: 25%; object-position: 50% 25%; } } /*** Text component - Bg Gradient (For overlay use) ***/ /* Black with white text */ .parbase.section > .gradientbg-black { background: #000000; /* fall back */ color: #fff; background: linear-gradient(90deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 100%); & a, &.more p.more-link a { color: #fff; } } /* Dark Red with white text */ .parbase.section > .gradientbg-red { background: #A6192E; /* fall back */ color: #fff; background: linear-gradient(90deg,rgba(166, 25, 46, 0.5) 0%, rgba(166, 25, 46, 0.4) 100%); & a, &.more p.more-link a { color: #fff; } } /* while Bg with normal text */ .parbase.section > .block.white { background: #fff; color: var(--color-s1);} .main__content div.block.red div[class*=graphics] p, .main__content div.block.light-red div[class*=graphics] p { color: unset; } /* Thin outline */ .parbase.section > .outline.thin { border-width: thin; } /*** Text color ****/ /* Title components (whole title)*/ .title.section > .light-red > h1 { color: var(--color-p1); } .title.section > .red > h1 { color: var(--color-p2); } /* Text components (selective area or whole component) */ .parbase.section .light-red, .parbase.section .light-red a, .parbase.section .light-red :is(h1, h2, h3, h4, h5, h6) { color: var(--color-p1); } .parbase.section .light-red a:hover { color: var(--color-s5); } .parbase.section .red, .parbase.section .red a, .parbase.section .red :is(h1, h2, h3, h4, h5, h6) { color: var(--color-p2); } .parbase.section .red a:hover { color: var(--color-s5); } /***
tag line - thin style ***/ hr.thin { border-width: 0.5px; } /*** Inview trigger animation ***/ /* Delay sec */ .delay-0\.25s { --delay: 0.25s; } .delay-0\.5s { --delay: 0.5s; } .delay-0\.75s { --delay: 0.75s; } .delay-0\.33s { --delay: 0.33s; } .delay-0\.66s { --delay: 0.66s; } .delay-1s { --delay: 1s; } .delay-1\.25s { --delay: 1.25s; } .delay-1\.5s { --delay: 1.5s; } .delay-1\.75s { --delay: 1.75s; } .delay-1\.33s { --delay: 1.33s; } .delay-1\.66s { --delay: 1.66s; } .delay-2s { --delay: 2s; } .delay-2\.25s { --delay: 2.25s; } .delay-2\.5s { --delay: 2.5s; } .delay-2\.75s { --delay: 2.75s; } .delay-2\.33s { --delay: 2.33s; } .delay-2\.66s { --delay: 2.66s; } .delay-3s { --delay: 3s; } .delay-3\.25s { --delay: 3.25s; } .delay-3\.5s { --delay: 3.5s; } .delay-3\.75s { --delay: 3.75s; } .delay-3\.33s { --delay: 3.33s; } .delay-3\.66s { --delay: 3.66s; } .delay-4s { --delay: 4s; } .delay-4\.25s { --delay: 4.25s; } .delay-4\.5s { --delay: 4.5s; } .delay-4\.75s { --delay: 4.75s; } .delay-4\.33s { --delay: 4.33s; } .delay-4\.66s { --delay: 4.66s; } .delay-5s { --delay: 5s; } .delay-5\.25s { --delay: 5.25s; } .delay-5\.5s { --delay: 5.5s; } .delay-5\.75s { --delay: 5.75s; } .delay-5\.33s { --delay: 5.33s; } .delay-5\.66s { --delay: 5.66s; } .delay-6s { --delay: 6s; } /* apply by animation-delay: var(--delay, 0); or transition-delay: var(--delay, 0); */ /* Init */ /* Text */ .text > [class*="anim-inview"].fade-in { opacity: 0; transition: opacity 1.5s; transition-delay: var(--delay, 0); } .text > [class*="anim-inview"].zoom-out{ opacity: 0; transform: scale(1.6); transition: opacity 2s, transform 1.5s; transition-delay: var(--delay, 0); } .text:has(div[class*="zoom-out"]) { overflow: hidden; } /* Photo */ .image > .image[class*="anim-inview"]{ &.fade-in { opacity: 0; transition: opacity 1.5s; transition-delay: var(--delay, 0);} &.zoom-reveal, &.zoom-in, &.zoom-out{ height:100%; width:100%; overflow: hidden; } &.zoom-reveal img { opacity: 0; transition: opacity 1.5s, filter 1.5s, transform 1.5s; transition-delay: var(--delay, 0); /* min-height:clamp(1px, 40vw, 450px); */ filter: brightness(420%) contrast(110%); transform-origin: center; transform: translate(0px) scale(1.3); } &.zoom-in img { transform: scale(.6); } &.zoom-out img { transform: scale(1.6); } &.zoom-in img, &.zoom-out img { opacity: 0; transition: opacity 1.5s, transform 1.5s; transition-delay: var(--delay, 0); /* transition-timing-function: cubic-bezier(.175, .885, .32, 1.275); */ } } /* text & image - overlay style */ .textimage > .overlay-banner[class*="anim-inview"]{ &.slide-reveal { overflow: hidden; &:not(.text-right){ @media (width >= 980px) { & > .text { transform-origin: left center; left: -50%; transition: left 2.3s; transition-delay: var(--delay, 0); position: relative; } } @media (width < 979px) { & > .text { background: var(--color-p1); } & > .text :is(h1, h2, h3, h4, h5, h6) { transform-origin: left center; left: -100%; transition: left 2.3s; transition-delay: var(--delay, 0); position: relative; } } } } } @keyframes flashBGphoto { 0% {filter:brightness(1.0); } 50% {filter:brightness(1.4); } 100% {filter:brightness(1.0); } } /* Trigger */ /* Text */ .text > .trigger[class*="anim-inview"].fade-in { opacity: 1; } .text > .trigger[class*="anim-inview"].zoom-out{ opacity: 1; transform: scale(1);} /* Photo */ .image > .image.trigger[class*="anim-inview"]{ &.fade-in { opacity: 1; } &.zoom-reveal img{ opacity: 1; filter: none; transform: scale(1); } &.zoom-in img, &.zoom-out img { opacity: 1; transform: scale(1); } } /* text & image - overlay style */ .textimage > .overlay-banner.trigger[class*="anim-inview"]{ &.slide-reveal{ animation-name: flashBGphoto; animation-duration: 3.0s; animation-delay: var(--delay, 0); &:not(.text-right){ @media (width >= 980px) { & > .text { left: 0; } } @media (width < 979px) { & > .text :is(h1, h2, h3, h4, h5, h6) { left: 0; } } } } }