/* Decoration: All */ .wp-block-group[class*="is-decoration-"]:not(.is-decoration-none), .editor-styles-wrapper .wp-block-group[class*="is-decoration-"]:not(.is-decoration-none) { --is-decoration-linework-enclosed-spacing: calc(var(--cla--spacing--decoration) - var(--cla--point--size)); position: relative; } [class*="-background-color"].wp-block-group[class*="is-decoration-"]:not(.is-decoration-none)::before { --cla--color--linework: var(--cla--color--white); } .wp-block-group[class*="is-decoration-"]:not(.is-decoration-none)::before { --is-decoration-linework-gradient-colors: var(--cla--color--linework), var(--cla--color--linework) var(--cla--linework--width), transparent var(--cla--linework--width), transparent 100%; } :where(.wp-block-group[class*="is-decoration-"]:not(.is-decoration-none))::before { content: ""; position: absolute; z-index: var(--cla--layer--linework); top: 0; right: 0; bottom: 0; left: 0; display: block; pointer-events: none; } .editor-styles-wrapper .wp-block-group[class*="is-decoration-"]:not(.is-decoration-none)::before { z-index: initial; } .wp-block-group[class*="is-decoration-"]:not(.is-decoration-none) > .wp-block-group.alignfull, .editor-styles-wrapper .wp-block-group[class*="is-decoration-"]:not(.is-decoration-none) > .wp-block-group.alignfull { margin-left: 0; margin-right: 0; } .wp-block-group[class*="is-decoration-"]:not(.is-decoration-none) > *, .editor-styles-wrapper .wp-block-group[class*="is-decoration-"]:not(.is-decoration-none) > * { position: relative; z-index: var(--cla--layer--content); } /* Decoration: Brushstroke Background */ .wp-block-group.is-decoration-brushstroke-background::before { z-index: var(--cla--layer--brushstroke); background-image: url('../images/brushstroke-texture.png'); background-position: center center; background-size: cover; background-repeat: no-repeat; opacity: var(--cla--texture--brushstroke--opacity--default); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--default); } .wp-block-group.has-black-background-color.is-decoration-brushstroke-background::before { opacity: var(--cla--texture--brushstroke--opacity--black); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--black); transform: rotateZ(180deg); background-position: center 100%; } .wp-block-group.has-80-percent-black-background-color.is-decoration-brushstroke-background::before { opacity: var(--cla--texture--brushstroke--opacity--80-percent-black); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--80-percent-black); transform: rotateZ(180deg); background-position: center 65%; } .wp-block-group.has-gray-background-color.is-decoration-brushstroke-background::before { opacity: var(--cla--texture--brushstroke--opacity--gray); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--gray); transform: rotateZ(180deg); background-position: center 35%; } .wp-block-group.has-tan-background-color.is-decoration-brushstroke-background::before { opacity: var(--cla--texture--brushstroke--opacity--tan); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--tan); transform: rotateZ(180deg); background-position: center 5%; } .wp-block-group.has-csu-green-background-color.is-decoration-brushstroke-background::before { opacity: var(--cla--texture--brushstroke--opacity--csu-green); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--csu-green); } .wp-block-group.has-csu-gold-background-color.is-decoration-brushstroke-background::before { opacity: var(--cla--texture--brushstroke--opacity--csu-gold); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--csu-gold); background-position: center 5%; } .wp-block-group.has-aggie-orange-background-color.is-decoration-brushstroke-background::before { opacity: var(--cla--texture--brushstroke--opacity--aggie-orange); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--aggie-orange); background-position: center 95%; } .wp-block-group.has-oval-green-background-color.is-decoration-brushstroke-background::before { opacity: var(--cla--texture--brushstroke--opacity--oval-green); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--oval-green); background-position: center 0%; } .wp-block-group.has-lovers-lane-background-color.is-decoration-brushstroke-background::before { opacity: var(--cla--texture--brushstroke--opacity--lovers-lane); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--lovers-lane); background-position: center 25%; } .wp-block-group.has-energy-green-background-color.is-decoration-brushstroke-background::before { opacity: var(--cla--texture--brushstroke--opacity--energy-green); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--energy-green); } .wp-block-group.has-flower-trial-red-background-color.is-decoration-brushstroke-background::before { opacity: var(--cla--texture--brushstroke--opacity--flower-trial-red); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--flower-trial-red); background-position: center 70%; } .wp-block-group.has-powered-purple-background-color.is-decoration-brushstroke-background::before { opacity: var(--cla--texture--brushstroke--opacity--powered-purple); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--powered-purple); background-position: center 100%; } .wp-block-group.has-horsetooth-blue-background-color.is-decoration-brushstroke-background::before { opacity: var(--cla--texture--brushstroke--opacity--horsetooth-blue); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--horsetooth-blue); transform: rotateZ(180deg); background-position: center 5%; } .wp-block-group.has-stalwart-slate-background-color.is-decoration-brushstroke-background::before { opacity: var(--cla--texture--brushstroke--opacity--stalwart-slate); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--stalwart-slate); transform: rotateZ(180deg); background-position: center 45%; } .wp-block-group.has-sunshine-background-color.is-decoration-brushstroke-background::before { opacity: var(--cla--texture--brushstroke--opacity--sunshine); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--sunshine); transform: rotateZ(180deg); background-position: center 85%; } /* Decoration: Brushstroke Enclosed */ .wp-block-group.is-decoration-brushstroke-enclosed, .editor-styles-wrapper .wp-block-group.is-decoration-brushstroke-enclosed { padding: 0 0 var(--cla--spacing--decoration) var(--cla--spacing--decoration); } .wp-block-group.is-decoration-brushstroke-enclosed::before { z-index: var(--cla--layer--brushstroke); background-image: linear-gradient(0deg, var(--is-decoration-linework-gradient-colors)), linear-gradient(90deg, var(--is-decoration-linework-gradient-colors)), linear-gradient(0deg, var(--cla--color--tertiary) 0%, var(--cla--color--tertiary) 100%), linear-gradient(90deg, var(--cla--color--secondary) 0%, var(--cla--color--secondary) 100%); background-position: var(--cla--spacing--decoration) calc(100% - var(--cla--spacing--decoration)), var(--cla--spacing--decoration) 0, var(--cla--spacing--decoration) 100%, 0 0; background-size: 100% 100%, 100% 100%, calc(100% - var(--cla--spacing--decoration)) var(--cla--spacing--decoration), var(--cla--spacing--decoration) 100%; background-repeat: no-repeat, no-repeat, no-repeat; } .wp-block-group.is-decoration-brushstroke-enclosed::after { content: ""; position: absolute; z-index: var(--cla--layer--linework); top: 0; left: 0; bottom: 0; width: var(--cla--spacing--decoration); background-image: url('../images/brushstroke-texture.png'); background-position: 60% 65%; background-size: 750%; background-repeat: no-repeat; pointer-events: none; } .wp-block-group.is-cla-color-palette-csu-green.is-decoration-brushstroke-enclosed::after { opacity: var(--cla--texture--brushstroke--opacity--csu-green); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--csu-green); } .wp-block-group.is-cla-color-palette-csu-gold.is-decoration-brushstroke-enclosed::after { opacity: var(--cla--texture--brushstroke--opacity--csu-gold); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--csu-gold); } .wp-block-group.is-cla-color-palette-aggie-orange.is-decoration-brushstroke-enclosed::after { opacity: var(--cla--texture--brushstroke--opacity--aggie-orange); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--aggie-orange); } .wp-block-group.is-cla-color-palette-oval-green.is-decoration-brushstroke-enclosed::after { opacity: var(--cla--texture--brushstroke--opacity--oval-green); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--oval-green); } .wp-block-group.is-cla-color-palette-lovers-lane.is-decoration-brushstroke-enclosed::after { opacity: var(--cla--texture--brushstroke--opacity--lovers-lane); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--lovers-lane); } .wp-block-group.is-cla-color-palette-energy-green.is-decoration-brushstroke-enclosed::after { opacity: var(--cla--texture--brushstroke--opacity--energy-green); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--energy-green); } .wp-block-group.is-cla-color-palette-flower-trial-red.is-decoration-brushstroke-enclosed::after { opacity: var(--cla--texture--brushstroke--opacity--flower-trial-red); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--flower-trial-red); } .wp-block-group.is-cla-color-palette-powered-purple.is-decoration-brushstroke-enclosed::after { opacity: var(--cla--texture--brushstroke--opacity--powered-purple); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--powered-purple); } .wp-block-group.is-cla-color-palette-horsetooth-blue.is-decoration-brushstroke-enclosed::after { opacity: var(--cla--texture--brushstroke--opacity--horsetooth-blue); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--horsetooth-blue); } .wp-block-group.is-cla-color-palette-stalwart-slate.is-decoration-brushstroke-enclosed::after { opacity: var(--cla--texture--brushstroke--opacity--stalwart-slate); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--stalwart-slate); } .wp-block-group.is-cla-color-palette-sunshine.is-decoration-brushstroke-enclosed::after { opacity: var(--cla--texture--brushstroke--opacity--sunshine); mix-blend-mode: var(--cla--texture--brushstroke--mix-blend-mode--sunshine); } .wp-block-group.is-decoration-brushstroke-enclosed > .wp-block-group.is-layout-constrained { padding-right: calc(var(--wp--style--root--padding-right) + var(--cla--spacing--decoration)); } /* Decoration: Linework Enclosed */ .wp-block-group.is-decoration-linework-enclosed, .editor-styles-wrapper .wp-block-group.is-decoration-linework-enclosed { padding: var(--cla--spacing--decoration) var(--cla--spacing--decoration) 0 var(--cla--spacing--decoration); } .wp-block-group.is-decoration-linework-enclosed::before { background-image: radial-gradient(var(--cla--color--secondary) var(--cla--point--radial-gradient--atts)), radial-gradient(var(--cla--color--secondary) var(--cla--point--radial-gradient--atts)), linear-gradient(0deg, var(--is-decoration-linework-gradient-colors)), linear-gradient(90deg, var(--is-decoration-linework-gradient-colors)), linear-gradient(180deg, var(--is-decoration-linework-gradient-colors)), linear-gradient(270deg, var(--is-decoration-linework-gradient-colors)); background-position: var(--is-decoration-linework-enclosed-spacing) var(--is-decoration-linework-enclosed-spacing), calc(100% - var(--is-decoration-linework-enclosed-spacing)) var(--is-decoration-linework-enclosed-spacing), 0 100%, var(--cla--spacing--decoration) 0, 0 var(--cla--spacing--decoration), calc(100% - var(--cla--spacing--decoration)) 0; background-size: calc(var(--cla--point--size) * 2) calc(var(--cla--point--size) * 2), calc(var(--cla--point--size) * 2) calc(var(--cla--point--size) * 2), 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } /* Decoration: Linework Enclosed Compact */ .wp-block-group.is-decoration-linework-enclosed-compact, .editor-styles-wrapper .wp-block-group.is-decoration-linework-enclosed-compact { padding: 0 var(--cla--spacing--decoration); } .wp-block-group.is-decoration-linework-enclosed-compact::before { top: calc(0px - var(--cla--point--size)); background-image: radial-gradient(var(--cla--color--secondary) var(--cla--point--radial-gradient--atts)), radial-gradient(var(--cla--color--secondary) var(--cla--point--radial-gradient--atts)), linear-gradient(0deg, var(--is-decoration-linework-gradient-colors)), linear-gradient(90deg, var(--is-decoration-linework-gradient-colors)), linear-gradient(180deg, var(--is-decoration-linework-gradient-colors)), linear-gradient(270deg, var(--is-decoration-linework-gradient-colors)); background-position: var(--is-decoration-linework-enclosed-spacing) 0, calc(100% - var(--is-decoration-linework-enclosed-spacing)) 0, 0 100%, var(--cla--spacing--decoration) var(--cla--point--size), 0 var(--cla--point--size), calc(100% - var(--cla--spacing--decoration)) var(--cla--point--size); background-size: calc(var(--cla--point--size) * 2) calc(var(--cla--point--size) * 2), calc(var(--cla--point--size) * 2) calc(var(--cla--point--size) * 2), 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; }