A complete overview of our current stylesheet and when to use each of the CSS classes. All styles on this page are approved and ready for use
Paragraph – our standard body copy
.entry-content p:first-of-type – font-size:1.7rem; line-height:2rem;
p class=second
H2 Heading – our main sub-heading
size:2rem; line-height:2.4rem
H3 Heading – used for sub-headings
size:1.5rem; line-height:1.8rem
H3.flipcard – used for titles on flipcards
h3.flipcard {h3.flipcard { font-size: 1.5rem; line-height:0.1rem; position: relative; bottom: 40px; color: #ffffff; text-align: center;
H4 Heading – used in our web elements as a special sub-heading
size:1.25rem; line-height:1.5rem
H5 Heading – used for annotating chart and giving source info
font-size:1.1rem; line-height:1.3rem
H6 Heading – used as body copy under icons
font-size:1.15rem; line-height:1.3rem;
Quote Block – h3.large
size:2rem; line-height:2.4rem
We’ve been leading digital transformation since it began; you can have this skillset on your team
Icon full width block – H3
Latest thinking on digital marketing regulation & brand safety
Case studies &
practical examples
Best practice tips &
judgement tools
D – Profiles – h2 class=”profile”
John Smith
Chief Executive
Driving digital and marketing transformation
Jane Smith
VP Strategy & Insight
Creating the right strategies to win in a digital world
Transparent navigation
This CSS code is applied to the additional CSS section of a specific page, this ensures the code does not effect all other pages. -10rem margin is added to the header section to move the image behind the nav and the slider is set to a fixed height of 600px.
/*Transparent Header*/
#main-header { background-color: rgba(255,255,255,0)!important;}
/*Header hover states*/
#main-header:hover {background-color: #ffffff!important; }
#main-header:hover #top-menu a {
color: #2D3393!important;
}
#main-header:hover #logo {
content:url(/wp-content/uploads/2020/07/logo-dsc-vector-rgb.svg);
}
#main-header:hover #et_search_icon {
color: #2D3393!important;}
/*Fixed header colour*/
#main-header.et-fixed-header { background-color:#ffffff!important;}
#top-menu a {
color: #ffffff;}
.et-fixed-header #et-top-navigation a
{color: #2D3393;}
.et-fixed-header #et_search_icon
{color: #2D3393;}
/*Search icon colour*/
#et_search_icon, .mobile_menu_bar {
color: #ffffff;
}
/*Removes the default nav bar shadow*/
#main-header, #main-header.et-fixed-header {
-webkit-box-shadow: none!important;
-moz-box-shadow: none!important;
box-shadow: none!important;
}
/*Sets the logo for both the fixed header and sticky state*/
.et-fixed-header #logo {
content: url(/wp-content/uploads/2020/07/logo-dsc-vector-rgb.svg)!important;
}
#main-header #logo {
content: url(/wp-content/uploads/2020/12/logo-dsc-vector-rgb-white-01.svg);
}
Bullet points
This CSS code styles a list of DSC bullet points, DSC blue and white bullets icons are below.
#left-area ul, .entry-content ul {
padding: 0 10px 0 10px;
margin: 0;
line-height:1.6rem;
/*line-height:3rem;*/
}
ul.icon {
list-style-type: none!important;
padding-top:1rem;
}
ul.icon li
{
/*text-indent: 1.4em;*/
padding-left: 1.8rem;
text-indent: -1.8rem;
}
/*DSC blue icon*/
ul.icon li:before
{
font-family: icomoon;
content: “!”;
float: left;
width: 1.8rem;
color:#2D3393;
}
ul.icon-white {
list-style-type: none!important;
}
/*DSC white icon*/
ul.icon-white li:before
{
font-family: icomoon;
content: “!”;
float: left;
width: 1.8rem;
color:#ffffff;
}
ul.icon-white li
{
Using the D shaped graphics
This CSS code creates an oversized D Icon which can be filled with a background image.
.icon-Dee:before {
content: “\21”;
.DEEE {
/*background:linear-gradient(to top right, #2D3393, #00C0DF);*/
max-width:225px;
}
.DEEE img {
border-radius:inherit;
width:100%;
height:100%;
max-width:200px;
/*opacity:.6;*/
}
.DEEE1 img {
border-radius:1em 10em 10em 1em;
width:100%;
height:100%;
/*opacity:.6;*/
}
Nav bar: using the search icon
This CSS code styles and aligns the search icon found in the nav bar.
.icon-D-search:before {
content: “\e918”;
}
#et_search_icon, .mobile_menu_bar {
color:#2D3393;
}
#et_search_icon:hover, .mobile_menu_bar:hover {
color:#00C0DF;
}
#et_top_search {
float:none !important;
display:inline-block !important
}
.et_header_style_left #et_top_search {
vertical-align: top !important;
margin-top:15px
}
/*Search icon on DI alignment*/
button.et_pb_menu__icon {
margin-bottom:10px;
Zoom masthead effect
This CSS applies a Ken Burns effect to a masthead image
.kb-zoomin .et_pb_slide .et_parallax_bg {
animation: zoomin 17s forwards;
-ms-animation: zoomin 17s forwards;
-webkit-animation: zoomin 17s forwards;
-0-animation: zoomin 17s forwards;
-moz-animation: zoomin 17s forwards;
}
.kb-zoomin .et_parallax_bg {
animation: zoomin 27s forwards;
-ms-animation: zoomin 27s forwards;
-webkit-animation: zoomin 27s forwards;
-0-animation: zoomin 27s forwards;
-moz-animation: zoomin 17s forwards;
}
/*KB Keyframe */
@keyframes zoomin{
0%{
animation-timing-function: ease-in;
-ms-transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
}
100%{
-ms-transform: scale3d(1.2, 1.2, 1.2) translate3d(-0px, 0px, 0px);
-webkit-transform: scale3d(1.2, 1.2, 1.2) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.2, 1.2, 1.2) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
transform: scale3d(1.2, 1.2, 1.2) translate3d(0px, 0px, 0px);
}
‘Read more’ text typeface
This CSS class switches the colours once a user hovers over the text
}
#read-more {
color: #2d3393;
border-color: #2d3393;
}
#read-more :hover {
color: #2ea3f2 !important;
border-color: #2d3393;
}
Using our imported fonts
This CSS imports fonts via Font Face
@font-face {
font-family: ‘museo_sans_rounded300’;
src: url(‘/wp-includes/fonts/MuseoSansRounded-300-webfont.woff2’) format(‘woff2’)/*,
url(‘/wp-includes/fonts/MuseoSansRounded-300-webfont.woff’) format(‘woff’),
url(‘/wp-includes/fonts/MuseoSansRounded-300-webfont.ttf’) format(‘truetype’)*/;
font-weight: normal;
font-style: normal;
font-display:swap;
}
@font-face {
font-family: ‘museo_sans_rounded700’;
src: url(‘/wp-includes/fonts/MuseoSansRounded-700-webfont.woff2’) format(‘woff2’)/*,
url(‘/wp-includes/fonts/MuseoSansRounded-700-webfont.woff’) format(‘woff’),
url(‘/wp-includes/fonts/MuseoSansRounded-700-webfont.ttf’) format(‘truetype’)*/;
font-weight: normal;
font-style: normal;
font-display:swap;
}
/*@font-face {
font-family:’dsc-glyphs’;
src: url(‘/wp-includes/fonts/dsc-glyphs.eot’);
src: url(‘/wp-includes/fonts/dsc-glyphs.woff2’) format(‘woff2’),
url(‘/wp-includes/fonts/dsc-glyphs.woff’) format(‘woff’),
url(‘/wp-includes/fonts/dsc-glyphs.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}*/
Using our imported icons
This CSS imports icons via Font Face
@font-face {
font-family: ‘icomoon’;
src: url(‘https://s3.amazonaws.com/icomoon.io/186345/dsc-glyphs/icomoon.eot?z6w5bi’);
src: url(‘https://s3.amazonaws.com/icomoon.io/186345/dsc-glyphs/icomoon.eot?z6w5bi#iefix’) format(’embedded-opentype’),
url(‘https://s3.amazonaws.com/icomoon.io/186345/dsc-glyphs/icomoon.woff2?z6w5bi’) format(‘woff2’),
url(‘https://s3.amazonaws.com/icomoon.io/186345/dsc-glyphs/icomoon.ttf?z6w5bi’) format(‘truetype’),
url(‘https://s3.amazonaws.com/icomoon.io/186345/dsc-glyphs/icomoon.woff?z6w5bi’) format(‘woff’),
url(‘https://s3.amazonaws.com/icomoon.io/186345/dsc-glyphs/icomoon.svg?z6w5bi#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^=”icon-“], [class*=” icon-“] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: ‘icomoon’ !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
