@import "woople-theme/variables.css.less"; @import "woople-theme/colours.css.less"; .page-header-with-image { img { .course-image(); max-width:@imageWidth; max-height:@imageWidth; float:left; margin-right:@gridGutterWidth; } p, h1 { margin-left: @gridGutterWidth + @imageWidth; } } .page-header { border-color:fade(@highlight, 10%); padding-left:@contentPadding; padding-right:@contentPadding; margin-top:0; margin-bottom:0; padding-top:@contentPadding * 1.5; background: @highlightBackground; h1 { font-weight:200; font-family:HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#0089D0; font-size:50px; line-height:55px; margin-bottom:10px; } p { font-size:16px; line-height:23px; color:@secondaryTextColour; margin-bottom:-4px; } } .page-header.completed { background-image:url(/assets/woople-theme/completed-triangle.png); background-position:top right; background-repeat:no-repeat; } @media (max-width: 767px) { .page-header { padding-left:@phoneMargin; padding-right:@phoneMargin; padding-top:@phoneMargin * 1.5; margin-bottom:0; h1 { font-size:28px; line-height:32px; } p { font-size:12px; line-height:18px; } } }