Hi Andrew, you can apply the class to the page itself i.e. green or blue. Then in your css you can set something like:
.green {
.mx-title {
color: green;
}
}
You can simply add another class to the header text in the second layout you created. Open the text widget, and enter a new class name in the Class field. Then target that class with some CSS rules. If the rules don't go into effect, perhaps add !important to the end of them, to make sure they aren't being overwritten by default styling.
.secondaryHeader {
color: green !important;
}
Make a class for your new header like this
.new-header{
h1, .h1, .h1 > * {
font-size: 25px;
font-family: $font-second;
font-weight: 400;
color: $brand-primary;
}
}
In the modeler, put the header inside of a container (div) and add the class new-header.