/*-----------------------------------------*\ HOMEPAGE CSS PREFIXED \*-----------------------------------------*/ /* This file adds prefixes to all the CSS classes so that components from the new homepage can be used on other pages without creating css collisions */ /*-----------------------------------------*\ #GENERIC \*-----------------------------------------*/ /* Set defaults like Normalize.css and border-sizing. */ .new-site-header--homepage * { list-style-type: none; } /* Border-box reset. */ .new-site-header--homepage { box-sizing: border-box; } /* Sets inheritance so that compnents can easily override the border-box if required. */ .new-site-header--homepage *, .new-site-header--homepage *:before, .new-site-header--homepage *:after { box-sizing: inherit; } /*-----------------------------------------*\ #OVERRIDES \*-----------------------------------------*/ /* Override Bootstrap rules. */ .new-site-header label { margin-bottom: 0; } /* Override Article page rules. */ .new-site-header .fa:before, .btn-social-icon .glyphicon:before { font-size: 1em; } /*-----------------------------------------*\ #SETTINGS \*-----------------------------------------*/ /* Global...............Globally-available variables and config. */ /* SET BASE PARAMETERS ------------------- */ /* Base Units */ :root { /* Set REM size */ /* This sets the basic unit for the modular grid and typography systems */ font-size: 9px; /* Set baseline grid increment */ --baseline-grid: 2rem; /* This should be a multiple of the rem grid unit. Probably 2rem. */ /* Set column number */ --column-number: 12; /* This is only used for drawing the test grid overlay. */ } /* Set base type size and color */ /* :root { --base-type-size: 2rem; --base-line-height: 3rem; } These variables aren't in use. The values are set on below: */ .new-site-header--homepage { font-size: 1.6rem; line-height: 2rem; color: var(--text-colour); } /* Base Colours */ :root { /* BRAND COLOUR -- Tyee Orange. */ --brand-colour__hue: 49; /* HSLA values are broken into */ --brand-colour__sat: 100%; /* separate variables for */ --brand-colour__lig: 50%; /* computational manipulation */ --brand-colour__alp: 1; /* in Colour System below. */ /* Set --brand-colour variable based on HSLA variables */ --brand-colour: hsla(var(--brand-colour__hue),var(--brand-colour__sat),var(--brand-colour__lig),var(--brand-colour__alp)); --link-colour: var(--brand-colour--text-darker); --text-colour: #393939; --text-colour-light: #808080; --border-colour-cols: hsl(0, 0%, 74%); --utility-background-color: #444; /* used for utility components like drop-down, footer, scroll-bounce */ } /* Scroll-bounce Colours */ html { background-color: var(--utility-background-color); } .new-site-header--homepage { background-color: white; } /* Typefaces */ :root { --typeface-serif: miller-text, georgia, serif; --typeface-sans: franklin-gothic-urw, helvetica, sans-serif; --typeface-item-body: franklin-gothic-urw, helvetica, sans-serif; --typeface-display: miller-text, georgia, serif; --typeface-display-small: miller-text, georgia, serif; --typeface-display-medium: miller-display, georgia, serif; --typeface-display-large: miller-banner, georgia, serif; } .new-homepage--harriet, .new-homepage--harriet_b { --typeface-serif: Harriet-Texttest, georgia, serif; --typeface-sans: franklin-gothic-urw, helvetica, sans-serif; --typeface-item-body: franklin-gothic-urw, helvetica, sans-serif; --typeface-display: Harriet-Texttest, georgia, serif; --typeface-display-small: Harriet-Texttest, georgia, serif; --typeface-display-medium: Harriet-DisplayTest, georgia, serif; --typeface-display-large: Harriet-DisplayTest, georgia, serif; } .new-homepage--harriet_c { --typeface-serif: Harriet-Texttest, georgia, serif; --typeface-sans: franklin-gothic-urw, helvetica, sans-serif; --typeface-item-body: franklin-gothic-urw, helvetica, sans-serif; --typeface-display: Harriet-Texttest, georgia, serif; --typeface-display-small: Harriet-Texttest, georgia, serif; --typeface-display-medium: Harriet-Texttest, georgia, serif; --typeface-display-large: Harriet-Texttest, georgia, serif; } .new-homepage--harriet-some { --typeface-serif: miller-text, georgia, serif; --typeface-sans: franklin-gothic-urw, helvetica, sans-serif; --typeface-item-body: franklin-gothic-urw, helvetica, sans-serif; --typeface-display: miller-text, georgia, serif; --typeface-display-small: Harriet-Texttest, georgia, serif; --typeface-display-medium: Harriet-Texttest, georgia, serif; --typeface-display-large: Harriet-DisplayTest, georgia, serif; } /* Typefaces for retina and high-dpi screens */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 195dpi) { :root { --typeface-display: miller-text, georgia, serif; --typeface-display-small: miller-text, georgia, serif; --typeface-display-medium: miller-text, georgia, serif; --typeface-display-large: miller-display, georgia, serif; } } /* HIGH-DPI TYPOGRAPHY MEDIUM BRKPNT TO TERTIARY BREAKPOINT: 684px to 999px */ @media (-webkit-min-device-pixel-ratio: 2) and (min-width: 684px) and (max-width: 999px), (min-resolution: 195dpi) and (min-width: 684px) and (max-width: 999px) { /* Increase weight of Recent Stories Primary Story headline (set in Miller Display) to match weight of Secondary Story headlines (set in Miller Text at high-dpi) */ .new-hmpg-org-recent-stories .new-story-item--primary .new-story-item__headline { font-weight: 700; } /* Increase weight of Pinned Stories headline (set in Miller Display) to match weight of Secondary Story headlines (set in Miller Text at high-dpi) */ .new-hmpg-org-pinned-story .new-story-item--primary .new-story-item__headline { font-weight: 700; } } /* HIGH-DPI TYPOGRAPHY TERTIARY BRKPNT TO LARGE BREAKPOINT: 1180px to 1367px */ @media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1180px) and (max-width: 1367px), (min-resolution: 195dpi) and (min-width: 1180px) and (max-width: 1367px) { /* Increase weight of Recent Stories Primary Story headline (set in Miller Display) to match weight of Secondary Story headlines (set in Miller Text) */ .new-hmpg-org-recent-stories .new-story-item--primary .new-story-item__headline { font-weight: 700; } } /* RESPONSIVE SETTINGS */ /* NOTE: CSS variables can't be used within media query selectors, so these responsive settings are for reference only. The varaibles defined below aren't functional. */ /* If we want to use CSS variables to create a layout grid that responds to viewport dimensions then we could set the grid properties via a variable and set that variable relative to the viewport dimension. Simple examples: --column-gutter: calc(5vw+10px); .new-container { grid-column-gap:var(--column-gutter); } --col-grid-main: 1fr 1fr; @media screen and (min-width: 1368px) { --col-grid-main: 2fr 1fr 1fr 1fr; } .new-hmpg-org-recent-stories__top-stories { grid-template-columns: var(--col-grid-main); } */ :root { --breakpoint-width-xs: 0; --breakpoint-width-s: 0; --breakpoint-width-m: 684px; --breakpoint-width-nav: 850px; /* This is the breakpoint for expanding the nav. Also increases lateral page margins */ --breakpoint-width-tertiary: 1000px; /* tertiary story-items expand from stacked to 2 columns */ --breakpoint-width-margins--min: 1100px /* Page Margins breakpoint: 1100-1368px */ --breakpoint-width-margins--max: 1368px /* This breakpoint range prevents columns from getting too wide at upper end of Medium width range */ --breakpoint-width-adblock: 1180px; /* half-page ad appears at 1180px width */ --breakpoint-width-l: 1368px; /* >> This breakpoint needs to be increased to 1380px to accommodate the wider page margins */ --breakpoint-width-xl: 1368px; } /*-----------------------------------------*\ #SYSTEMS \*-----------------------------------------*/ /* Design system styles are derived computationally from the base parameters. */ /* COLOUR SYSTEM */ /* Use the Base Colours to derive a colour system. Use the HSLA colorspec with each of the 4 values set by a separate variable. Then perform computations on those variables to change the colour. https://www.w3.org/TR/css-color-3/#hsl-color https://www.w3schools.com/cssref/func_hsla.asp https://caniuse.com/#feat=css3-colors */ /* BRAND TEXT COLOUR */ /* Brand colour is darkened for use in text and icons */ :root { --brand-colour--text: hsla( calc(var(--brand-colour__hue)*.9), /* makes brand colour more red */ var(--brand-colour__sat), calc(var(--brand-colour__lig)*.98), /* darkens brand colour */ var(--brand-colour__alp) ); } /* BRAND TEXT COLOUR - darker */ /* Brand colour is darkened further for particularly small text and fine lines */ :root { --brand-colour--text-darker: hsla( calc(var(--brand-colour__hue)*.82), /* makes brand colour more red */ var(--brand-colour__sat), calc(var(--brand-colour__lig)*.96), /* darkens brand colour */ var(--brand-colour__alp) ); } /* BRAND BACKGROUND COLOUR */ /* Brand colour is lightened for use in module backgrounds */ :root { --brand-colour--mod-bg: hsla( var(--brand-colour__hue), var(--brand-colour__sat), calc(var(--brand-colour__lig)*1.34), /* lightens brand colour */ var(--brand-colour__alp) /* 0.5 /* AG - temporary tansparency to show grid */ ); } /* BRAND COLOUR PALE */ /* Brand colour is lightened a lot */ :root { --brand-colour--pale: hsla( var(--brand-colour__hue), var(--brand-colour__sat), calc(var(--brand-colour__lig)*1.99), /* lightens brand colour */ var(--brand-colour__alp) /* 0.5 /* AG - temporary tansparency to show grid */ ); } /* ELEMENT COLOURS */ /* Typographic Elements */ :root { --icon-search-svg-colour: var(--text-colour); --icon-arrow-toggle-down-svg-colour: var(--text-colour); } /* end of Colour System */ /* GRID SYSTEM */ /* Column Spacing */ :root { /* standard column gutter width */ --gutter-column: 4rem; /* use half of gutter width when column borders are required */ --gutter-column-half: calc(var(--gutter-column) / 2); /* standard row gutter width */ --gutter-row: 6rem; /* use half of gutter width when row borders are required */ --gutter-row-half: calc(var(--gutter-row) / 2); } /* >> Use pseudo element :after to create the column borders */ /* PAGE MARGINS */ /* Page margins should be set by applying rules to the --page-margin-sides variable. Exceptions can be handled by writing rules for particular modules and classes. This is much easier and also DRYer. */ /* AG -- Having dynamic CSS variables like this might make it more difficult to create fallbacks for older browsers that don't support CSS variables. */ :root { --page-margin-sides: var(--gutter-column-half); --page-margin-top: 4rem; } /* PAGE MARGINS NAV BREAKPOINT -- breakpoint-width-nav: 850px */ @media screen and (min-width: 850px) { /* Increase page margins */ :root { --page-margin-sides: var(--gutter-column); } } /* PAGE MARGINS LAYOUT BREAKPOINT 1 -- 1100px */ /* Prevents columns from getting too wide at upper end of Medium width range */ @media screen and (min-width: 1100px) and (max-width: 1367px) { /* Keep content of organism containers at 1100px width but run lateral padding to edge of screen so the borders and background colours don't show a gap */ :root { --page-margin-sides: calc( var(--gutter-column) + (100vw - 1100px) * 0.5 ) ; /* (base margin width) + ( view size ) * rate of ) */ /* + ( beyond 1100 ) change ) */ } } /* PAGE MARGINS LARGE BREAKPOINT -- breakpoint-width-l: 1380px */ /* This breakpoint needs to be increased to 1380px to accommodate the wider page margins */ @media screen and (min-width: 1380px) { /* Progressively increase the page margins as viewport width expands beyond 1380px. Increase the rate of change for larger page margins. */ :root { --page-margin-sides: calc( var(--gutter-column) + calc((100vw - 1380px) * 0.2 ));} /* (base margin width) + (( view size ) * rate of ) */ /* + (( beyond 1380 ) change ) */ } /* end of Page Margins */ /*-----------------------------------------*\ #TYPE STYLES \*-----------------------------------------*/ /* Default text styles ----------------- */ .new-site-header--homepage { font-family: var(--typeface-sans); font-weight: 400; font-style: normal; } /* Header Typography -- Logo block ----------------- */ .new-site-header__tagline { position: relative; font-family: var(--typeface-serif); font-size: 0.86em; font-weight: 600; } .new-site-header__tagline::before, .new-site-header__tagline::after { content: ""; display: block; position: absolute; width: 4rem; border-top: 1px solid var(--text-colour); } .new-site-header__tagline::before { top: -1rem; } .new-site-header__tagline::after { bottom: -1rem; } .new-site-header__tagline--a::before, .new-site-header__tagline--a::after { right: 0; } /* Header Typography -- Navigation */ .new-site-nav-main { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .new-site-nav-main a.new-nav__link--join { color: var(--brand-colour--text); } .new-site-nav__dropdown a.new-nav__link--join { color: var(--brand-colour); } .new-site-nav__dropdown-heading, .new-site-nav__dropdown .new-nav__link--join, .new-site-nav__dropdown .new-twitter { padding-top: 2rem; } .new-nav__link--dropdown-item { font-weight: 400 } .new-expander-content__topics-submenu .new-nav__link--dropdown-item, .new-expander-content__more-submenu .new-nav__link--dropdown-item { text-transform: capitalize; letter-spacing: 0 } .new-site-nav__dropdown .new-nav__link--newsletter, .new-site-nav__dropdown .new-facebook, .new-site-nav__dropdown .new-twitter { padding-top: 1rem; } /* Module text styles ----------------- */ .new-label--small { font-style: italic; } .new-hmpg-module-header__main-label, .new-m-comment-noted__label, .new-m-barometer__label { font-size: 1.4em; font-weight: 800; text-transform:uppercase; letter-spacing: 0.125em; display: inline-block; position: relative; } /* HOMEPAGE MODULE HEADER MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { /* Center the module label when the module appears directly below page header (and therefore with no top border) */ .new-hmpg-org-wrapper:first-of-type .new-hmpg-module-header { text-align: center; } } .new-m-comment-noted__label { padding-left: 1.1em; } .new-m-comment-noted__label::before { content: url(../img/icon-comment-noted.svg); display: inline-block; position: absolute; left: 0em; transform: scale(.65) translate(-40%, -40%); } .new-m-barometer__label { padding-left: 1.4em; } .new-m-barometer__label::before { content: url(../img/icon-barometer.svg); display: inline-block; position: absolute; left: 0.2em; transform: scale(.75) translate(-40%, -40%); } .new-tyee-insider__story .new-story-item__deck, .new-hmpg-org-deep-dive .new-story-item--primary .new-story-item__deck { font-family: var(--typeface-serif); font-size: 1.33em; line-height: 3rem; color: var(--text-colour); } .new-tyee-insider__story .new-story-item__deck p:nth-of-type(n+2), .new-hmpg-org-deep-dive .new-story-item--primary .new-story-item__deck p:nth-of-type(n+2) { padding-top: 2rem; } .new-m-tyee-insider__related-label { font-size: 0.85em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin: 3rem 0 1rem; /* 4rem total realigns with 2rem-baseline grid */ } .new-m-comment-noted__title, .new-m-barometer__title { font-family: var(--typeface-display-medium); font-weight: 600; line-height: 3rem; font-size: 1.5em; text-transform: none; } /* Content text styles ----------------- */ /* Story Items */ .new-story-item__headline { font-family: var(--typeface-display); font-weight: 600; line-height: 3rem; /* this is 1.5 x baseline, so headlines that break over odd-numbered lines will throw off the grid */ font-size: 1.5em; text-transform: capitalize; margin: 0rem 0 2rem; /* 4rem total realigns with baseline grid */ } .new-homepage--harriet_b .new-story-item__headline { font-weight: 700; } .new-category-label { font-family: var(--typeface-sans); font-size: 0.875em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-colour--text); margin: 1rem 0 1rem; /* Adds up to 2rem, aligning with baseline grid */ } .new-story-item__deck { color: var(--text-colour-light); } .new-story-item__author, .new-story-item__date { font-weight: 600; } .new-story-item__author { margin-top: 0rem; } .new-m-comment-noted .new-story-item__author { display: block; margin-top: 2rem; text-align } .new-m-comment-noted .new-story-item__author::before { content:"Submitted by"; display: block; margin-top: 2rem; font-weight: 400; font-style: italic; } .new-story-item__news-source { font-family: var(--typeface-sans); font-weight: 200; } /* for Reported Elsewhere */ /* Separator between headline and news source */ .new-story-item__news-source::before { content:"•"; padding-left: 0.25em; padding-right: 0.25em; } /* primary story-items */ .new-story-item--primary .new-story-item__headline { font-family: var(--typeface-display-large); line-height: 4rem; /* this is 2 x baseline */ font-size: 2.33em; margin: 0rem 0 2rem; /* 2rem total aligns with baseline grid */ } .new-story-item--primary .new-category-label { font-size: 1.11em; } .new-story-item--primary .new-story-item__author { padding-top: 2rem; /* 2rem total aligns with baseline grid */ } /* secondary story-items */ .new-story-item--secondary .new-story-item__headline { font-family: var(--typeface-display-medium); } /* tertiary story-items */ .new-story-item--tertiary .new-story-item__headline { font-family: var(--typeface-display-medium); font-size: 1.5em; line-height: 3rem; margin: 0; /* matches with deck margin-bottom to realign with baseline grid */ } .new-story-item--tertiary .new-story-item__deck { font-size: 1em; line-height: 2rem; margin: 1rem 0 0rem; /* No bottom padding to prevent gap above author byline */ } /* minimum story-items */ .new-story-item--minimum .new-story-item__headline { font-family: var(--typeface-display-medium); /* font-weight: 600; */ line-height: 3rem; margin-bottom: 0rem; } /* ---- STORY ITEMS TYPOGRAPHY responsive enhancement ---- */ /* STORY ITEMS TYPOGRAPHY MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-story-item--primary .new-story-item__deck { text-transform: uppercase; } .new-hmpg-org-tyee-insider .new-story-item--primary .new-story-item__deck { text-transform: none ; } /* Reduce size of Primary headlines so that they don't take up too much vertical space in a 2-col layout */ .new-story-item--primary .new-story-item__headline { line-height: 3rem; /* this is 2 x baseline */ font-size: 1.65em; margin: 0rem 0 2rem; /* 2rem total aligns with baseline grid */ } /* Keep large size of Primary headlines in module that have more space for them */ .new-m-tyee-insider__main .new-story-item--primary .new-story-item__headline, .new-hmpg-org-deep-dive .new-story-item--primary .new-story-item__headline { font-family: var(--typeface-display-large); line-height: 4rem; /* this is 2 x baseline */ font-size: 2.33em; margin: 0rem 0 2rem; /* 2rem total aligns with baseline grid */ } } /* STORY ITEMS TYPOGRAPHY TERTIARY BREAKPOINT -- breakpoint-width-tertiary: 1000px */ @media screen and (min-width: 1000px) { .new-story-item--primary .new-story-item__headline { font-family: var(--typeface-display-large); line-height: 4rem; /* this is 2 x baseline */ font-size: 2.33em; margin: 0rem 0 2rem; /* 2rem total aligns with baseline grid */ } } /* STORY ITEMS TYPOGRAPHY ADBLOCK BREAKPOINT -- breakpoint-width-adblock: 1180px - 1367px */ @media screen and (min-width: 1180px) and (max-width: 1367px) { /* Reduce size of Primary headlines in Recent Stories module because halfpage adblock is reducing the column width. */ .new-hmpg-org-recent-stories--general .new-story-item--primary .new-story-item__headline { line-height: 3rem; /* this is 2 x baseline */ font-size: 1.65em; } } /* STORY ITEMS TYPOGRAPHY LARGE BREAKPOINT -- breakpoint-width-l: 1368px; */ @media screen and (min-width: 1368px) { /* Slightly reduce size of tertiary headlines in wide screens to accommodate a 2-col stiry-item layout. */ .new-story-item--tertiary .new-story-item__headline { font-family: var(--typeface-display); font-family: var(--typeface-display-medium); font-size: 1.25em; line-height: 2.5rem; /* decimal values here cause a browser rounding error that throws throws off the baseline grid. */ } /* Enlarge Topic module primary story headline in wide views (like pinned story headline) */ .new-hmpg-org-recent-stories--topic .new-story-item--primary .new-story-item__headline { line-height: 6rem; /* this is 3 x baseline */ font-size: 3.35em; margin-bottom: 4rem } .new-hmpg-org-recent-stories--topic .new-story-item--primary > :not(.story-item__image):not(.story-item__headline) { margin-left: 8rem; margin-right: 8rem; } /* Pinned Story enhancement */ .new-hmpg-org-pinned-story .new-story-item--primary .new-category-label { margin-bottom: 1.5rem; } .new-hmpg-org-pinned-story .new-story-item--primary .new-story-item__headline { line-height: 6rem; /* this is 3 x baseline */ font-size: 3.35em; margin-bottom: 4rem } .new-hmpg-org-pinned-story .new-story-item--primary > :not(.story-item__image) { margin-left: 4rem; margin-right: 4rem; } .new-hmpg-org-pinned-story .new-story-item--primary .new-story-item__deck { margin-left: 11.5rem; margin-right: 11.5rem; } .new-hmpg-org-pinned-story .new-story-item--primary.story-item--reverse .new-badge--story-item-placement { transform: scale(1.2); right: -3em; } } /* end of Story Items Typography */ /*-----------------------------------------*\ #ATOMS \*-----------------------------------------*/ strong.new-site-header--homepage { font-weight: 600; } /* LINK atom */ a.new-site-header--homepage { text-decoration: none; } /* link styles for body text of Insider and Deep Dive */ .new-site-header--homepage p a, .new-site-header__tagline a { border-bottom: 2px solid var(--link-colour); } /* link styles for body text of Insider */ .new-hmpg-org-tyee-insider p a { border-color: white; /* can't be brand color because Insider has an orange background */ } /* Hovers states for nav-bar items -- only on devices with hover capability, exclude mobile */ @media (hover: hover) and (pointer: fine) { .new-nav__link:hover, .new-site-footer a:hover { display: inline-block; color: var(--link-colour); transform: scale(1.05)!important; /* !important is required to override badges that are scaled by default */ } } /* Hover states for text links and buttons */ .new-story-item a:hover, .new-story-item a:focus, .new-site-header__tagline a:hover, .new-site-header__tagline a:focus { display: inline-block; color: var(--link-colour); transform: scale(1.05)!important; /* !important is required to override badges that are scaled by default */ } .new-hmpg-org-tyee-insider a:hover, .new-hmpg-org-tyee-insider a:focus { color: white; /* can't be brand color because Insider has an orange background */ } .new-story-item p a:hover, .new-story-item p a:focus { margin-bottom: -2px; /* Offsets the effect of setting underlined text as an inline-block */ } .new-text-link--button { display:table; padding-top: 2rem; font-style:italic; border-bottom: 1px solid; margin-bottom: -1px; /* Offsets 1px border */ } /* BUTTON atom */ .new-button { -webkit-appearance: button; -moz-appearance: button; appearance: button; cursor: pointer; } .new-button { display: inline-block; border: 2px solid var(--brand-colour--text); border-radius: 0rem; padding: calc(1rem - 2px) 4rem; margin: 0; height: 4rem; text-decoration: none; background: none; color: var(--text-colour); font-family: var(--typeface-sans); font-size: 1em; font-weight: 500; text-transform: uppercase; letter-spacing: .new-08em; cursor: pointer; text-align: center; transition: background 250ms ease-in-out, transform 150ms ease; -webkit-appearance: none; -moz-appearance: none; } .new-button--spanrow { grid-column: 1 / -1; /* Make button span entire grid row */ justify-self: center; /* Collapses button width to its content + padding */ } .new-button--dark-bg { color: var(--text-colour); background-color: hsla(0, 0%, 100%, 0.3); border: 2px solid white; } .new-button--dark { color: white; background-color: var(--text-colour); } .new-button--barometer { display: block; } .new-site-nav__search-form .new-button { display: inline-block; border: none; padding: 1rem 2rem; background: var(--brand-colour); color: #ffffff; color: var(--text-colour); } .new-button:hover, .new-button:focus { color: white; color: var(--text-colour); background: var(--brand-colour--text-darker); border-color: transparent; outline: 2px solid #fff; transform: scale(1.05) } .new-button:focus { outline: 1px solid #fff; outline-offset: -4px; } .new-button:active { transform: scale(0.99); } /* BUTTON EXPANDER is used to show and hide content */ .new-button--expander { } /*-----------------------------------------*\ #MOLECULES \*-----------------------------------------*/ /* BADGE molecule */ /* This styles the existing story-badge html molecule from the story page to work on the homepage. These styles replace the story page badge styles. */ .new-badge { } .new-badge--story-item-placement { display: block; position: absolute; width: auto; left: -1.25em; top: -1.5em; transform: scale(1); padding-left: inherit; /* Adjusts badge position when there's padding on the parent */ } .new-story-item--secondary .new-badge--story-item-placement, .new-story-item--tertiary .new-badge--story-item-placement { left: -2.5em; top: -1em; transform: scale(.85); } .new-hmpg-org-recent-stories__list .new-story-item--tertiary .new-badge--story-item-placement, .new-hmpg-org-deep-dive .new-story-item--tertiary .new-badge--story-item-placement { left: -2.5em; top: -1.5em; transform: scale(.7); } /* ---- BADGE responsive enhancement ---- */ /* BADGE MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-story-item--primary .new-badge--story-item-placement, .new-story-item--reverse.story-item--primary .new-badge--story-item-placement { left: -2.25em; top: 1em; } .new-story-item--reverse.story-item--primary .new-badge--story-item-placement { left: unset; right: -2.25em; } } /* BADGE MEDIUM BREAKPOINT -- breakpoint-width-nav: 850px */ @media screen and (min-width: 850px) { .new-story-item--primary .new-badge--story-item-placement, .new-story-item--reverse.story-item--primary .new-badge--story-item-placement { left: -2.25em; top: calc(1em + 1.5vw); } .new-story-item--reverse.story-item--primary .new-badge--story-item-placement { left: unset; right: -2.25em; } .new-story-item--secondary .new-badge--story-item-placement, .new-story-item--tertiary .new-badge--story-item-placement { transform: scale(1); } } /* end of Badge molecule */ /* STORY ITEM MOLECULE ------------------- */ /* default story item grid -- single column */ .new-story-item--index-page { position: relative; display: grid; grid-column-gap: var(--gutter-column); grid-row-gap: 0; grid-template-areas: "image" "category" "headline" "deck" "author" "date" "border"; } .new-story-item__image { display: grid; /* Necessary for baseline-element.js to prevent element height from collapsing */ position: relative; } /* Story Item element layout -- Assign story-item elements to grid areas */ .new-story-item--index-page .new-story-item__image { grid-area: image; } .new-story-item--index-page .new-badge--story-item-placement {/* grid-area: image; */z-index: 20;} .new-story-item--index-page .new-category-label { grid-area: category; } .new-story-item--index-page .new-story-item__headline { grid-area: headline; } .new-story-item--index-page .new-story-item__deck { grid-area: deck; } .new-story-item--index-page .new-story-item__author { grid-area: author; } .new-story-item--index-page .new-story-item__date { grid-area: date; } /* STORY ITEM EXTENSIONS */ .new-story-item--primary { } .new-story-item--secondary { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto) 1fr; grid-template-areas: "category image" "headline image" "deck image" "author image" "date image"; } .new-story-item--secondary .new-category-label { margin-top: 0} /* 0 top margin aligns label with figure in 2-col story-item layouts */ .new-story-item--secondary .new-story-item__author { justify-self: start; } .new-story-item--tertiary { } .new-story-item--tertiary .new-story-item__image { display: none; } .new-story-item--tertiary .new-badge--story-item-placement { display: none; } .new-story-item--tertiary .new-category-label { display: none; } .new-story-item--tertiary .new-story-item__headline { display: block; } .new-story-item--tertiary .new-story-item__deck { display: block; } .new-story-item--tertiary .new-story-item__author { display: block; } .new-story-item--tertiary .new-story-item__date { display: none; } .new-hmpg-org-recent-stories__list .new-story-item--tertiary { /* font-size: var(--small-text); */ grid-column-gap: calc(var(--gutter-column) * 0.5); } .new-story-item--tertiary .new-story-item__author { justify-self: start; } .new-story-item--minimum { } .new-story-item--minimum .new-story-item__image { display: none; } .new-story-item--minimum .new-badge--story-item-placement { display: none; } .new-story-item--minimum .new-category-label { display: none; } .new-story-item--minimum .new-story-item__headline { display: block; } .new-story-item--minimum .new-story-item__deck { display: none; } .new-story-item--minimum .new-story-item__author { display: none; } .new-story-item--minimum .new-story-item__date { display: none; } .new-story-item--reverse { } /* ---- STORY ITEM responsive enhancement ---- */ /* STORY ITEM SUB-MEDIUM BREAKPOINT -- < breakpoint-width-m: < 683px */ @media screen and (max-width: 683px) { /* Some story-items use float-based layout in small viewports: -> Secondary story-items in the recent stories list -> Tertiary story-items in the Insider Related Stories list */ /* Same as Tertiary items in large viewports. */ .new-hmpg-org-recent-stories__list .new-story-item--secondary, .new-m-tyee-insider__related-stories .new-story-item--tertiary { display: block; } /* Use float-based layout for Secondary story-items in Recent Stories module */ /* Same as Tertiary items in large viewports. */ .new-hmpg-org-recent-stories__list .new-story-item--secondary .new-story-item__image, .new-m-tyee-insider__related-stories .new-story-item--tertiary .new-story-item__image { float: right; width: calc(50% - (var(--gutter-column-half) * 0.5)); margin-left: var(--gutter-column-half); margin-bottom: 2rem; } .new-m-tyee-insider__related-stories .new-story-item--tertiary .new-story-item__headline { padding-top: 0; } /* Secondary story item gets single-col stacked layout in Deep Dive on narrow viewports. */ .new-hmpg-org-deep-dive .new-story-item--secondary { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto 1fr; grid-template-areas: "image" "category" "headline" "deck" "author" "date"; } .new-hmpg-org-deep-dive .new-story-item--secondary .new-category-label { font-family: var(--typeface-sans); font-size: 0.875em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-colour--text); margin: 1rem 0 1rem; } .new-hmpg-org-deep-dive .new-story-item--secondary .new-story-item__headline { font-family: var(--typeface-display-medium); font-weight: 600; line-height: 3rem; font-size: 1.5em; text-transform: capitalize; margin: 0rem 0 2rem; } } /* end of Story Item sub-Medium breakpoint */ /* STORY ITEM MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-story-item--primary { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto) 1fr; grid-template-areas: "category image" "headline image" "deck image" "author image" "date image"; } /* Vertically centre Primary story-item text block in wide views (only for Recent Stories and Pinned Story modules) */ .new-hmpg-org-recent-stories__list .new-story-item--primary, .new-hmpg-org-pinned-story .new-story-item--primary { grid-template-rows: 1fr auto auto auto 1fr; } .new-hmpg-org-recent-stories__list .new-story-item--primary .new-story-item__image { } .new-story-item--primary .new-category-label { margin: 0 0 1rem; align-self: end; } .new-story-item--primary .new-story-item__date { margin-bottom: 1rem; /* offsets the 1-rem margin of the category-label */ } .new-story-item--primary.story-item--reverse { grid-template-columns: 1fr 1fr; grid-template-areas: "image category" "image headline" "image deck" "image author" "image date"; text-align: center; } .new-story-item--secondary { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto 1fr; grid-template-areas: "image" "category" "headline" "deck" "author" "date"; } .new-story-item--secondary .new-category-label { margin-top: 1rem} /* Creates space between image and headline in stacked story-item layout */ .new-story-item--tertiary { grid-template-rows: auto auto auto auto 1fr; } .new-story-item--tertiary .new-story-item__image {display: grid;} /* Necessary for baseline-element.js to prevent element height from collapsing */ .new-story-item--tertiary .new-badge--story-item-placement {display: block;} .new-story-item--tertiary .new-category-label {display: block;} .new-story-item--tertiary .new-story-item__deck {display: block;} } /* end of Story Item medium breakpoint */ /* STORY ITEM LARGE BREAKPOINT -- breakpoint-width-l: 1368px */ @media screen and (min-width: 1368px) { /* Teriary story-items in the recent stories list use float-based layout in wide viewports. */ /* This selects only the first 8 story items because the display of the subsequent items needs to be controled by the expander--recent-stories. (There seems to be some kind of CSS bug because nth-of-type is counting all story-items, not just .new-story-item--tertiary. We really only want to select the first 4 .new-story-item--tertiary elements) */ .new-hmpg-org-recent-stories__list .new-story-item--tertiary:nth-of-type(-n+8) { display: block; } } /* end of Story Item large breakpoint */ /* end of Story Item */ /* ROW & COLUMN BORDERS ------------------- */ /* Set borders within grid-column-gaps and grid-row-gaps to separate story-items. */ /* row border */ /* Uses a pseudo element to create borders within the grid-row-gap. Excludes the first item. Explained here: https://www.smashingmagazine.com/2018/02/generated-content-grid-layout/ */ .new-hmpg-org-recent-stories .new-story-item--index-page:not(:first-of-type)::before, .new-hmpg-org-deep-dive .new-story-item--index-page:nth-of-type(n+3)::before, .new-m-tyee-insider__main .new-story-item--tertiary:not(:first-of-type)::before { content:""; position: absolute; top: calc(var(--gutter-row-half) * -1); width: 100%; border-bottom: 1px solid var(--border-colour-cols); mix-blend-mode: multiply; } /* ---- ROW & COLUMN BORDERS responsive enhancement ---- */ /* ROW & COLUMN BORDER MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { /* row border */ /* expand Recent Stories row borders in medium views */ .new-hmpg-org-recent-stories .new-story-item--index-page:not(:first-of-type)::before { left: calc(var(--gutter-column-half) * -1); width: calc(100% + var(--gutter-column)); } /* removes row borders from Insider and Deep Dive in medium views */ .new-hmpg-org-deep-dive .new-story-item--index-page:nth-of-type(n+3)::before, .new-m-tyee-insider__main .new-story-item--tertiary:not(:first-of-type)::before { content: none; } /* column border */ /* Uses a pseudo element to create column borders within the grid-column-gap. Excludes the first item. Explained here: https://www.smashingmagazine.com/2018/02/generated-content-grid-layout/ */ .new-hmpg-org-recent-stories .new-story-item--index-page:not(:first-of-type)::after { content:''; position: absolute; top: 0; right: calc(var(--gutter-column-half) * -1); height: 100%; border-right: 1px solid var(--border-colour-cols); } } /* end of borders medium breakpoint */ /* ROW & COLUMN BORDER ONLY MEDIUM BREAKPOINT -- breakpoint-width-m: 684px - 999px */ @media screen and (min-width: 684px) and (max-width: 999px) { /* remove column border on last item in each Recent Stories row */ .new-hmpg-org-recent-stories .new-story-item--index-page:nth-of-type(4n)::after { content:none; } /* remove column border on all tertiary story-items in Recent Stories */ .new-hmpg-org-recent-stories .new-story-item--index-page.story-item--tertiary::after { content:none; } } /* end of borders medium breakpoint */ /* ROW & COLUMN BORDER ONLY TERTIARY BREAKPOINT -- breakpoint-width-tertiary: 1000px - 1367px */ @media screen and (min-width: 1000px) and (max-width: 1367px) { /* remove column border on last item in each Recent Stories row */ .new-hmpg-org-recent-stories .new-story-item--index-page:nth-of-type(n+4):nth-of-type(2n)::after { content:none; } /* remove column border on all tertiary story-items in Recent Stories */ .new-hmpg-org-recent-stories .new-story-item--index-page.story-item--tertiary::after { content:none; } } /* end of borders tertiary breakpoint */ /* ROW & COLUMN BORDER LARGE BREAKPOINT -- breakpoint-width-l: 1367px */ @media screen and (min-width: 1368px) { /* remove column border on last item in each Recent Stories row */ .new-hmpg-org-recent-stories .new-story-item--index-page:nth-of-type(4n)::after { content:none; } /* remove column border on all tertiary story-items in Recent Stories */ .new-hmpg-org-recent-stories .new-story-item--index-page.story-item--tertiary::after { content:none; } /* This would remove row borders on tertiary story-items in Recent Stories .new-hmpg-org-recent-stories .new-story-item--index-page:nth-of-type(n+9)::before { content: none; } */ /* add column borders around Insider molecules */ .new-hmpg-org-tyee-insider > div:not(:last-of-type)::after { content:''; position: absolute; bottom: 0; right: calc(var(--gutter-column-half) * -1); height: calc(100% - 10rem); border-right: 1px solid var(--text-colour); } /* add row borders around Deep Dive tertiary story-items */ .new-hmpg-org-deep-dive > .new-story-item--tertiary:nth-of-type(n+4)::before { content:'' !important; /* !important is required to overrule the earlier .new-hmpg-org-deep-dive .new-story-item--index-page:nth-of-type(n+3)::before, .new-m-tyee-insider__main .new-story-item--tertiary:not(:first-of-type)::before { content: none; but this could also achieved by making the breakpoint of this previous rule more specific. */ position: absolute; top: calc(var(--gutter-row-half) * -1); left: calc(0); width: calc(100%); border-bottom: 1px solid var(--border-colour-cols); } /* add column border around Deep Dive tertiary story-items */ .new-hmpg-org-deep-dive > .new-story-item--tertiary::after { content:''; position: absolute; top: calc(var(--gutter-row-half) * -1); left: calc(var(--gutter-column-half) * -1); height: calc(100% + var(--gutter-row)); border-left: 1px solid var(--border-colour-cols); } } /* end of borders large breakpoint */ /* end of Row & Column Borders */ /* HMPG AD BOX MOLECULE ------------------- */ .new-hmpg-ad-box { position: relative; } .new-hmpg-ad-box--halfpage { display: none; } .new-hmpg-ad-box iframe { /* width:100%; This prevents the ad from breaking the col but it will get crops the graphic */ } /* Towards a scaling ad solution: */ .new-hmpg-ad-box--halfpage iframe { /* position: absolute; --> This pulls ad out of flow and lets grid col size properly top:0; left:0; transform: scale(.8) translate(-55px, -75px); --> translations must be calculated relative grid col size depending on viewport width */ } .new-hmpg-ad-box--bigbox { margin-top: var(--gutter-row); height: calc(2rem * 14); /* Set ad-box height to an even multiple of the baseline grid */ } /* HMPG AD BOX BREAKPOINT -- breakpoint-width-adblock: 1180px */ @media screen and (min-width: 1180px) { .new-hmpg-ad-box--halfpage {display: block;} } /* end of HMPG Ad Box molecule */ /* COUNTER LIST molecule ----------------- */ /* This formats a container of articles into a numbered list with custom numbers. It uses the styling method from https://www.w3schools.com/css/css_counters.asp Variants can be seen here: https://www.w3.org/Style/Examples/007/color-bullets.en.html */ /* COUNTER LIST molecule ----------------- */ /* This formats a container of articles into a numbered list with custom numbers. It uses the styling method from https://www.w3schools.com/css/css_counters.asp Variants can be seen here: https://www.w3.org/Style/Examples/007/color-bullets.en.html */ .new-counter-list--story-items { counter-reset: story-item; } .new-counter-list--story-items > .new-story-item { counter-increment: story-item; padding-left: 1.4em; position: relative; } /* Realign odd-numbered list with baseline grid. This doesn't work if there's an even # of items in the list. Using margins that vary between odd and even items could produce a universal solution. E.g. select the last list item only if it's odd-numbered. */ .new-counter-list--story-items > .new-story-item:last-of-type { margin-bottom: 0rem; } .new-counter-list--story-items > .new-story-item h2::before { content: counter(story-item); display: inline-block; position: absolute; left: -0.1em; color: var(--brand-colour--text); background-color: none; font-family: var(--typeface-display); font-weight: 800; font-size: 1.1em; } /* end of Counter List molecule */ /*-----------------------------------------*\ #ORGANISMS \*-----------------------------------------*/ /* HMPG ORGANISM WRAPPER ----------------- */ /* There's also styles for this wrapper mixed in with other organisms. */ /* Should be considolidated at some point. */ .new-hmpg-org-wrapper { position: relative; padding: 0 var(--page-margin-sides); padding-bottom: calc(var(--gutter-row) + 0rem); } main .new-hmpg-org-wrapper { padding-top: calc(5rem - 0px); } /* Omit top padding from first modules (This will maintain correct padding when the order of modules changes) */ main .new-hmpg-org-wrapper:first-of-type { padding-top: 0; } /* Create thick top border on modules that doesn't extend into page magins */ main .new-hmpg-org-wrapper::before { content: ""; position: absolute; top: 3rem; left: 0; grid-column: 1 / -1; width: 100%; border-bottom: 4px solid var(--text-colour); } /* Omit top border from first modules (This will maintain correct borders when the order of modules changes) */ main .new-hmpg-org-wrapper:first-of-type::before { content: none; } /* Increase separation between Page Header and first content module. */ /* Applying padding-top to the content module (rather than padding-bottom to the Header) allows for modules with coloured backgorunds. */ main .new-hmpg-org-wrapper:first-of-type { padding-top: 1rem; } /* Site Header NON-STANDARD BREAKPOINT -- non-standard-width: 600px */ @media screen and (min-width: 600px) { /* Progressively increase separation between Page Header and first content module. */ main .new-hmpg-org-wrapper:first-of-type { padding-top: 1rem; } } /* Site Header NON-STANDARD BREAKPOINT -- MIN-WIDTH 850px --------------- */ @media screen and (min-width: 850px) { /* Progressively increase separation between Page Header and first content module. */ main .new-hmpg-org-wrapper:first-of-type { padding-top: 4rem; } } /* end of HMPG Organism Wrapper */ /* HMPG RECENT STORIES organism ---------- */ .new-hmpg-org-recent-stories { display: grid; } /* Add space between Recent Stories module header and content */ .new-hmpg-org-recent-stories .new-hmpg-module-header { margin-bottom: 6rem; } /* Reduce space between Recent Stories module header and content when module appears at top of page */ .new-hmpg-org-wrapper:first-of-type.hmpg-org-recent-stories .new-hmpg-module-header { margin-bottom: 4rem; } .new-hmpg-org-recent-stories__list { /* AG -- might want to abstract universal grid specs to "".hmpg-org-wrapper >" */ display: grid; width: 100%; grid-column-gap: var(--gutter-column); grid-row-gap: var(--gutter-row); margin-bottom: 0rem;/* Aligns with baseline grid (content may still throw it off) */ /* Decimal values in the .new-story-item--tertiary headline line-height (at some medium and large views)cause a browser rounding error that throws throws off the baseline grid. */ } /* RECENT STORIES LIST EXPANDER */ /* This uses a checkbox and labels to toggle the display of content without using javascript. See: https://jsfiddle.net/Algreenwich/uLpzvx4n/36/ This was adapted from The Checkbox/Label Trick described here: https://javascript.works-hub.com/learn/a-javascript-free-frontend-61275 An alternative (although less robust) method is to use anchors links: https://jsfiddle.net/Algreenwich/uym9s0bg/ https://stackoverflow.com/questions/40312901/showing-and-hiding-something-with-pure-css-with-show-and-hide-button */ .new-button--expander-open ~ :not(script) { display: none; } #new-expander--recent-stories:checked ~ :not(script) { display: grid; /* This must be "grid" because the revealed items are themselves using internal grid layouts */ } /* LIST EXPANDER LARGE BREAKPOINT -- breakpoint-width-adblock: 1368px */ @media screen and (min-width: 1368px) { /* Tertiary story-items in the recent stories list use float-based layout in wide viewports, so at large screen sizes the expander must set the display to block instead of grid. */ #new-expander--recent-stories:checked ~ :not(script) { display: block; /* This must be "block" because revealed items are using internal float layouts */ } } /* end of List Expander adblock breakpoint */ #new-expander--recent-stories:checked ~ .new-button--expander-open { display: none; } /* ---- RECENT STORIES responsive enhancement ---- */ /* Story items are allocated grid space and location based on their story-item extension class, e.g. .new-story-item--primary spans full first row. */ /* RECENT STORIES MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-hmpg-org-recent-stories__list { grid-template-columns: repeat(12, 1fr); grid-template-areas: "primary primary primary primary primary primary" "2ndary 2ndary 2ndary 2ndary 2ndary 2ndary"; } .new-hmpg-org-recent-stories__list > .new-story-item--primary { grid-column: auto / span 12; text-align: center; } .new-hmpg-org-recent-stories__list > .new-story-item--secondary { grid-column: auto / span 4; } .new-hmpg-org-recent-stories__list > .new-story-item--tertiary { grid-column: auto / span 3; } .new-hmpg-org-recent-stories__list > .new-story-item--tertiary .new-story-item__headline { font-size: 1.25em; line-height: 2.5rem; /* decimal values here cause a browser rounding error that throws throws off the baseline grid. */ } .new-hmpg-org-recent-stories__list > .new-story-item--tertiary .new-category-label { margin-top: 1rem; } } /* STORY ITEM TERTIARY BREAKPOINT -- breakpoint: 1000px */ /* tertiary story-items expand from stacked to 2 columns */ @media screen and (min-width: 1000px) { .new-hmpg-org-recent-stories__list > .new-story-item--tertiary { grid-column: auto / span 6; } .new-hmpg-org-recent-stories__list > .new-story-item--tertiary .new-story-item__headline { font-size: 1.5em; line-height: 3rem; } .new-hmpg-org-recent-stories__list .new-story-item--tertiary { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto) 1fr; grid-template-areas: "category image" "headline image" "deck image" "author image" "date image"; } .new-hmpg-org-recent-stories__list > .new-story-item--tertiary .new-category-label { display: block;margin-top: 0; } /* 0 top margin aligns label with figure in 2-col story-item layouts */ } /* RECENT STORIES ADBLOCK BREAKPOINT -- breakpoint-width-adblock: 1180px */ /* This breakpoint adds the half-page ad into the layout so it is only relevant for hmpg-org-recent-stories--general */ @media screen and (min-width: 1180px) { .new-hmpg-org-recent-stories--general .new-hmpg-org-recent-stories__list { grid-template-columns: repeat(4, 1fr); grid-template-areas: "primary primary primary ad" "2ndary 2ndary 2ndary ad"; } .new-hmpg-org-recent-stories--general .new-hmpg-org-recent-stories__list > .new-story-item--primary { grid-area: primary; } .new-hmpg-org-recent-stories--general .new-hmpg-org-recent-stories__list > .new-story-item--secondary { grid-column: auto / span 1; } .new-hmpg-org-recent-stories--general .new-hmpg-org-recent-stories__list > .new-story-item--tertiary { grid-column: auto / span 2; } /* Scale Half-page Adblock so it doesn't break the grid */ .new-hmpg-org-recent-stories__list .new-hmpg-ad-box--halfpage { position: relative; grid-area: ad; } .new-hmpg-org-recent-stories__list .new-hmpg-ad-box--halfpage aside { position: absolute; transform: scale(.9); transform-origin: 0% 0%; } } /* end of Recent Stories Adblock Breakpoint */ /* RECENT STORIES SECONDARY IMAGE BREAKPOINT RANGE -- breakpoint-width-adblock: 1180px-1367px */ @media screen and (min-width: 1180px) and (max-width: 1367px) { /* Force Secondary Recent Story images to display at correct layout size. */ /* This only applies while the margins are keeping the module width constant and the half-page ad is showing. */ .new-hmpg-org-recent-stories--general .new-hmpg-org-recent-stories__list > .new-story-item--secondary .new-story-item__image .new-responsive-img { height: 18rem !important; } } /* RECENT STORIES LARGE BREAKPOINT -- breakpoint: 1368px */ @media screen and (min-width: 1368px) { .new-hmpg-org-recent-stories__list > .new-story-item--tertiary { grid-column: auto / span 1; } /* Slightly reduce size of tertiary headlines in wide screens to accommodate extra column */ .new-hmpg-org-recent-stories__list > .new-story-item--tertiary .new-story-item__headline { font-family: var(--typeface-display-medium); font-size: 1.25em; line-height: 2.5rem; /* decimal values here cause a browser rounding error that throws throws off the baseline grid. */ } /* Use float-based layout for Tertiary story-items in Recent Stories module */ .new-hmpg-org-recent-stories__list .new-story-item--tertiary .new-story-item__image { float: right; width: calc(50% - (var(--gutter-column-half) * 0.5)); margin-left: var(--gutter-column-half); /* margin-bottom: 2rem; <-- This makes the row-gaps appear too wide */ } /* Disable scaling of Half-page Adblock so that it displays at full size */ .new-hmpg-org-recent-stories__list .new-hmpg-ad-box--halfpage aside { transform: none; transform-origin: 0% 0%; } /* Align Half-page Ad with right edge of its grid container */ .new-hmpg-org-recent-stories__list .new-hmpg-ad-box--halfpage aside div div { display: grid; justify-items: end; } } /* end of Recent Stories Large Breakpoint */ /* end of Recent Stories */ /* TYEE INSIDER organism ----------------- */ /* AG -- It would be great to use subgrids to keep molecules separated yet aligned, but the subgrid spec isn't completed yet and no browsers support it. The display: content also has very poor support so that's not viable either. */ .new-hmpg-org-tyee-insider { position: relative; display: grid; grid-column-gap: var(--gutter-column); grid-row-gap: var(--gutter-row); background-color: hsla(51, 100%, 50%, 0.3); /* temporary alpha for testing, should be var(--brand-colour--mod-bg) */ } .new-hmpg-module-header { height: 2rem; margin-bottom: 2rem; } .new-hmpg-org-tyee-insider .new-hmpg-module-header { margin-bottom: 8rem; /* Insider needs more space here because it doesn't use Grid at top level and therefore has no row gap */ } .new-hmpg-org-most--column .new-hmpg-module-header { margin-bottom: 4rem; /* Most module columns need more space here because they only use a half-gutter row gap */ } .new-hmpg-org-reported-elsewhere .new-hmpg-module-header { margin-bottom: 4rem; /* Reported Elsewhere module needs more space here because they only use a half-gutter row gap */ } /* Modules that have a tagline/blurb following their label need a margin */ .new-m-tyee-insider__main .new-hmpg-module-header__main-label, .new-hmpg-org-deep-dive .new-hmpg-module-header__main-label { margin-right: 3rem; } /* When Recent Stories module appears at top of page its module header and label are hidden */ .new-hmpg-org-wrapper:first-of-type.hmpg-org-recent-stories--general .new-hmpg-module-header { display: none; } .new-hmpg-module-header__main-label-blurb { display: inline-block; } .new-m-tyee-insider__related-stories { display: grid; grid-row-gap: var(--gutter-row); margin-bottom: -1rem; /* offsets 3rem line-height of headlines in list */ } .new-m-tyee-insider__main, .new-m-comment-noted { position: relative } /* Tyee Insider Primary Story-item */ .new-m-tyee-insider__main .new-story-item--primary { } .new-m-tyee-insider__main .new-story-item--primary .new-badge--story-item-placement { display: none;} .new-m-tyee-insider__main .new-story-item--primary .new-category-label { display: none;} .new-m-tyee-insider__main .new-story-item--primary .new-story-item__headline { grid-area: headline; } .new-m-tyee-insider__main .new-story-item--primary .new-story-item__deck { grid-area: deck; } .new-m-tyee-insider__main .new-story-item--primary .new-story-item__author { display: none;} .new-m-tyee-insider__main .new-story-item--primary .new-story-item__date { display: none;} .new-m-tyee-insider__main .new-story-item--primary { grid-template-areas: "headline" /* put headline above image */ "image" "deck" "author" "date"; } .new-m-tyee-insider__main .new-story-item--primary .new-story-item__headline { margin-bottom: 4rem; } .new-m-tyee-insider__main .new-story-item--primary img { width: 100%; /* required becasue this img must omit the .new-responsive-img class so that it doesn't get targeted by baselineElement */ } .new-m-tyee-insider__main .new-story-item--primary .new-story-item__image { margin-bottom: 4rem } /* Tyee Insider Tertiary Story-item */ .new-m-tyee-insider__main .new-story-item--tertiary { grid-template-rows: auto auto auto auto 1fr; } .new-m-tyee-insider__main .new-story-item--tertiary .new-story-item__image {display: grid; margin-bottom: 2rem;} /* Necessary for baseline-element.js to prevent element height from collapsing */ .new-m-tyee-insider__main .new-story-item--tertiary .new-badge--story-item-placement {display: none;} .new-m-tyee-insider__main .new-story-item--tertiary .new-category-label {display: none;} .new-m-tyee-insider__main .new-story-item--tertiary .new-story-item__headline {display: block; padding: 0rem 0 1rem} .new-m-tyee-insider__main .new-story-item--tertiary .new-story-item__deck {display: none;} /* Comment Noted and Barometer molecule styles */ .new-m-comment-noted, .new-m-barometer { padding-top: 2rem; border-top: 4px solid var(--text-colour); margin-top: calc(2rem - 4px); /* Offsets the 1px border */ } .new-m-comment-noted .new-hmpg-module-header, .new-m-barometer .new-hmpg-module-header { height: 2rem; margin-bottom: 4rem; } .new-m-comment-noted__title, .new-m-barometer__title { /* padding: 1rem 0; This should be contained in typographic styles not module layout */ min-height: 10rem; } .new-m-barometer__footer { padding-top: 4rem; } /* Barometer form */ /* Checkbox display method is adapted from here: https://paulund.co.uk/how-to-style-a-checkbox-with-css */ .new-barometer-form-list__item { display: block; padding-bottom: 2rem; } input[type=radio] { visibility: hidden; display: none; } .new-barometer-form-label { position: relative; left: 3rem; display: inline-block; } .new-barometer-form-label::before { content:""; cursor: default; position: absolute; width: 2rem; height: 2rem; top: 0; left: -3rem; background: hsla(0, 0%, 100%, 0.3); border: 2px solid white; } /* input[name="barometerpoll"]:checked + .new-barometer-form-label::after { opacity: 1; content: ''; position: absolute; bottom: 1.1rem; left: -2.7rem; width: 20px; height: 9px; background: transparent; border: 3px solid var(--text-colour); border-top: none; border-right: none; transform: rotate(-50deg); } */ /* ---- TYEE INSIDER responsive enhancement ---- */ /* TYEE INSIDER MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-hmpg-org-tyee-insider { position: relative; grid-template-columns: repeat(6, 1fr); } .new-hmpg-org-tyee-insider > :first-child { grid-column: auto / span 6; } .new-hmpg-org-tyee-insider > :nth-child(2) { grid-column: auto / span 3;} .new-hmpg-org-tyee-insider > :nth-child(3) { grid-column: auto / span 3;} /* Insider Primary Story uses a float-based layout so that text can wrap the image */ .new-hmpg-org-tyee-insider .new-story-item--primary { display: block; } .new-hmpg-org-tyee-insider .new-story-item--primary .new-story-item__image { float: right; display: block; width: Calc(50% - var(--gutter-column-half)); margin-left: var(--gutter-column); margin-bottom: 3rem; } .new-m-tyee-insider__main .new-story-item--primary img { display: block; width: 100%; /* required becasue this img must omit the .new-responsive-img class so that it doesn't get targeted by baselineElement */ } .new-m-tyee-insider__main .new-story-item--primary .new-story-item__deck { max-width: 34em; } .new-m-tyee-insider__main .new-story-item--primary .new-story-item__headline { margin-bottom: 4rem; } .new-m-tyee-insider__related-stories { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-row-gap: 2rem; grid-column-gap: var(--gutter-column); margin-bottom: -1rem; /* offsets 3rem line-height of headlines in list */ } .new-m-tyee-insider__related-label { grid-column: 1 / -1; /* Span all columns (required for medium views) */ } .new-m-comment-noted__title, .new-m-barometer__title { min-height: 10rem; margin-bottom: 2rem; } } /* End of Tyee Insider medium breakpoint */ /* TYEE INSIDER LARGE BREAKPOINT -- breakpoint-width-l: 1368px */ @media screen and (min-width: 1368px) { .new-hmpg-org-tyee-insider { grid-template-columns: repeat(5, 1fr); } .new-hmpg-org-tyee-insider > :first-child { grid-column: auto / span 3; } .new-hmpg-org-tyee-insider > :nth-child(2) { grid-column: auto / span 1;} .new-hmpg-org-tyee-insider > :nth-child(3) { grid-column: auto / span 1;} .new-m-tyee-insider__main .new-story-item--primary .new-story-item__headline { min-height: 12rem; margin-bottom: 2rem; } .new-m-comment-noted, .new-m-barometer { padding-top: 0rem; border-top: none; margin-top: 0; } .new-m-comment-noted .new-hmpg-module-header, .new-m-barometer .new-hmpg-module-header { height: 2rem; margin-bottom: 8rem; } .new-m-comment-noted__title, .new-m-barometer__title { min-height: 12rem; margin-bottom: 2rem; } } /* End of Tyee Insider large breakpoint */ /* End of Tyee Insider organism */ /* PINNED STORY organism ----------------- */ .new-hmpg-org-pinned-story { display: grid; z-index: 10; /* So that bottom border doesn't fall underneath the BG of next module due to negative margin */ padding-top: var(--gutter-row); } .new-hmpg-org-pinned-story .new-story-item { padding-top: calc(var(--gutter-row) - 2rem); } /* Set second top border */ /* .new-hmpg-org-pinned-story::before { content:""; position: absolute; top: 3px; left: 0; width: 100%; border-top: 1px solid var(--text-colour); } */ /* Set second bottom border */ /* .new-hmpg-org-pinned-story::after { content:""; position: absolute; bottom: 3px; left: 0; width: 100%; border-top: 1px solid var(--text-colour); } */ /* End of Pinned Story organism */ /* DEEP DIVE organism ----------------- */ .new-hmpg-org-deep-dive { display: grid; grid-column-gap: var(--gutter-column); grid-row-gap: var(--gutter-row); background-color: hsla(0, 0%, 90%, 0.68); /* For testing purposes */ /* AG - temporary tansparency to show grid */ } .new-hmpg-org-deep-dive > .new-story-item:first-of-type .new-story-item__image { display: none; } .new-hmpg-org-deep-dive > .new-story-item:first-of-type .new-badge--story-item-placement { display: none; } .new-hmpg-org-deep-dive > .new-story-item:first-of-type .new-category-label { display: none; } .new-hmpg-org-deep-dive > .new-story-item:first-of-type .new-story-item__author { display: none; } .new-hmpg-org-deep-dive > .new-story-item:first-of-type .new-story-item__date { display: none; } /* Remove bottom row border from first story-item */ .new-hmpg-org-deep-dive .new-story-item--index-page:first-of-type::after { content:none; } /* Tyee Insider Story-items */ .new-hmpg-org-deep-dive .new-story-item--primary { grid-template-columns: 1fr; } .new-hmpg-org-deep-dive .new-story-item--primary .new-story-item__deck { text-transform: none; } /* ---- DEEP DIVE responsive enhancement ---- */ /* */ /* DEEP DIVE MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-hmpg-org-deep-dive { grid-template-columns: repeat(6, 1fr); } .new-hmpg-org-deep-dive > * { grid-column: auto / span 2; } .new-hmpg-org-deep-dive > .new-hmpg-module-header { grid-column: 1 / -1; } .new-hmpg-org-deep-dive > .new-story-item:first-of-type { grid-column: 1 / span 3; grid-template-rows: auto 1fr; grid-template-areas: "headline" "deck"; } .new-hmpg-org-deep-dive > .new-story-item--secondary { grid-column: auto / span 3; } .new-hmpg-org-deep-dive > .new-story-item--tertiary { grid-column: auto / span 2; grid-template-columns: 1fr; grid-template-areas: "image" "category" "headline" "deck" "author" "date"; } } /* DEEP DIVE LARGE BREAKPOINT -- breakpoint-width-l: 1368px */ @media screen and (min-width: 1368px) { .new-hmpg-org-deep-dive { grid-template-columns: repeat(6, 1fr); } .new-hmpg-org-deep-dive > .new-story-item:first-of-type { /* Set the item's position */ grid-column: 1 / span 2; grid-row: auto / span 3; /* Set the item's internal grid */ grid-template-rows: auto; align-content: start; } .new-hmpg-org-deep-dive > .new-story-item--secondary { /* Set the item's position */ grid-column: auto / span 2; grid-row: auto / span 3; /* Set the item's internal grid */ align-content: start; } .new-hmpg-org-deep-dive > .new-story-item--tertiary { /* Set the item's position */ grid-column: auto / span 2; /* Set the item's internal grid */ grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto) 1fr; grid-template-areas: "category image" "headline image" "deck image" "author image" "date image"; } .new-hmpg-org-deep-dive > .new-story-item--tertiary .new-category-label { margin-top: 0; /* 0 top margin aligns label with figure in 2-col story-item layouts */ } } /* End of Deep Dive large breakpoint */ /* End of Deep Dive organism */ /* MOST organism ----------------- */ .new-hmpg-org-most { display: grid; grid-column-gap: var(--gutter-column); grid-row-gap: var(--gutter-row); } /* In narrow views override universal top border (border is on each column) */ main .new-hmpg-org-most::before { content: none; } /* In narrow views adjust first column top border position to match other module top borders */ .new-hmpg-org-most--column:first-child { margin-top: -2rem; } .new-hmpg-org-most--column { position: relative; display: grid; grid-row-gap: var(--gutter-row-half); padding-top: 2rem; padding-bottom: 2rem; margin-bottom: -1rem; /* offsets the row-gap (but dependent on length of headlines) */ } .new-hmpg-org-most--column::before { content: ""; position: absolute; top: 0px; left: 0; grid-column: 1 / -1; width: 100%; border-bottom: 4px solid var(--text-colour); } .new-hmpg-org-most--column .new-story-item__headline { margin-bottom: 0; } /* ---- MOST responsive enhancement ---- */ /* */ /* MOST MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-hmpg-org-most { grid-template-columns: 1fr 1fr 1fr; } /* In wider eliminate first column position adjustment */ .new-hmpg-org-most--column:first-child { margin-top: 0rem; } /* Set top border on outer container instead of on each column */ main .new-hmpg-org-most::before { content: ""; } /* Remove top borders from each column */ .new-hmpg-org-most--column { padding-top: 0; } .new-hmpg-org-most--column::before { content: none; } } /* End of Most organism */ /* REPORTED ELSEWHERE organism ----------------- */ .new-hmpg-org-reported-elsewhere { display: grid; padding-top: 2rem; grid-column-gap: var(--gutter-column); grid-row-gap: 0; align-items: start; } .new-hmpg-org-reported-elsewhere > .new-hmpg-module-header { } .new-hmpg-org-reported-elsewhere__list .new-story-item { padding-top: var(--gutter-row-half); } /* ---- REPORTED ELSEWHERE responsive enhancement ---- */ /* */ /* Reported Elsewhere MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-hmpg-org-reported-elsewhere__list { column-count: 2; column-gap: var(--gutter-column); } .new-hmpg-org-reported-elsewhere__list > .new-story-item{ -webkit-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; } } /* Reported Elsewhere NONSTANDARD BREAKPOINT -- breakpoint: 1010px */ /* The fixed width of the bigbox ad requires a specific breakpoint here. */ @media screen and (min-width: 1010px) { .new-hmpg-org-reported-elsewhere__list { column-count: 3; column-gap: var(--gutter-column); } .new-hmpg-org-reported-elsewhere__list > .new-story-item{ -webkit-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; } } /* End of Reported Elsewhere organism */ /* BUILDER organism ----------------- */ .new-hmpg-org-builder { display: grid; justify-content: center; padding-top: 3rem !important; background-color: var(--brand-colour--mod-bg); /* temporary alpha for testing: hsla(51, 100%, 50%, 0.3); should be var(--brand-colour--mod-bg) */ } /* Override unversal module top border */ main .new-hmpg-org-builder::before { content:none; } .new-builder__content { position: relative; max-width: 1000px; display: grid; justify-items: center; grid-column-gap: var(--gutter-column-half); grid-row-gap: 0; grid-template-areas: "image" "headline" "deck" "cta"; text-align: center; } .new-builder__image { grid-area: image; } .new-builder__headline { grid-area: headline; } .new-builder__deck { grid-area: deck; } .new-builder__cta { grid-area: cta; } .new-builder__image { display: grid; /* Necessary for baseline-element.js to prevent element height from collapsing */ position: relative; } .new-builder__image img { width: 100%; max-height: 14rem; } .new-button--builder { max-width: 280px } .new-button--builder span { color: var(--brand-colour); } /* Builder text styles */ .new-builder__headline { font-family: var(--typeface-display-large); line-height: 4rem; font-size: 2.33em; margin: 2rem 0 2rem; } .new-builder__deck { font-family: var(--typeface-serif); font-size: 1.33em; line-height: 3rem; color: var(--text-colour); margin: 0 0 3rem; } /* BUILDER MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-builder__content { justify-items: stretch; grid-template-columns: 1fr 3fr; grid-template-rows: auto auto 1fr; align-content: center; grid-template-areas: "image headline" "image deck" "image cta"; text-align: left; } .new-builder__image { justify-self:end; } .new-builder__image img { width: 100%; max-width: 20rem; max-height: none; } .new-builder__headline { margin-top: 3rem; align-self: end; } } /* end of Builder medium breakpoint */ /* end of Builder organism */ /* SITE HEADER organism ----------------- */ /* This thing is a beast ---------------- */ .new-site-header { padding-bottom: 0rem; } .new-site-header__logo-block { display: grid; grid-template-columns: 1fr; grid-column-gap: var(--gutter-column); grid-row-gap: 0; align-items: start; padding-top: 3rem; padding-bottom: 1rem; /* balances grid alignment */ } .new-site-header__tagline { margin-top: calc(.3rem + 2vw); } .new-site-header__tagline--a, .new-site-header__tagline--b { display: none; } .new-site-header__tagline--mobile { position: absolute; width: 100%; text-align: center; } .new-site-header__tagline--mobile::before, .new-site-header__tagline--mobile::after { display: none; } .new-site-header__logo { position: relative; justify-self:center; line-height: 0; /* required to prevent additional height in element */ min-height: 12rem; /* Keeps height of logo block aligned with grid */ } .new-site-header__logo img{ max-width: 100%; max-height: 96px; padding: 0 2vw; } /* SITE NAV MOLECULE */ /* Default for narrow views: Hide all nav item items except the hamburger, search button, and the dropdown menus. (This rule leaves the dropdown menus unaffected so that their visibility will be controlled by the checkbox state of #new-expander--nav-menu (and #new-expander--search) as defined below in the NAV DROPDOWN EXPANDER rules) */ .new-site-nav-main > :not(.new-nav__burger):not(.site-nav__dropdown):not(.new-nav__link--search):not(.new-site-nav__search-dropdown) { display: none; } .new-nav__link { cursor: pointer; } .new-site-nav-main__expander-toggle.new-nav__burger::before, .new-site-nav-main__expander-toggle.new-nav__link--more::after { content: "arrow_drop_down"; display: inline-block; vertical-align: -0.25em; font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 1.5em; line-height: 1rem; /* required to prevent additional height in element */ letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; /* required for Edge browser */ } .new-nav__link--join { position: relative; left: 1.35em; /* Keeps icon placed ::before within the grid column */ margin-right: 1.35em; /* Offsets the shift left to prevent breaking the grid in narrow views */ } .new-site-footer .new-nav__link--join { position: relative; left: unset; /* Keeps link centered in narrow ipad view */ margin-right: -1.25em; /* Keeps link centered in narrow ipad view */ } .new-nav__link--join::before { content: url('../img/icon-dollar-heart.svg'); display: block; position: absolute; left: -1.5em; transform: scale(.6) translate(-40%, -30%); } .new-nav__link--search { position: relative; left: 1.35em; /* Keeps icon placed ::before within the grid column */ margin-right: 1.35em; /* Offsets the shift left to prevent breaking the grid in narrow views */ } .new-nav__link--search::before { content: url('../img/icon-search.svg'); display: inline-block; position: absolute; left: -1.35em; transform: scale(.6) translate(-40%, -30%); } /* NAV DROPDOWN EXPANDER */ /* This uses a checkbox and labels to toggle the display of content without using javascript. See: https://jsfiddle.net/Algreenwich/uLpzvx4n/36/ This was adapted from The Checkbox/Label Trick described here: https://javascript.works-hub.com/learn/a-javascript-free-frontend-61275 An alternative (although less robust) method is to use anchors links: https://jsfiddle.net/Algreenwich/uym9s0bg/ https://stackoverflow.com/questions/40312901/showing-and-hiding-something-with-pure-css-with-show-and-hide-button */ /* DEFAULT state: Dropdown Menu is hidden */ .new-site-nav__dropdown { display: none ; grid-column: 1 / -1; } /* ACTIVATED state: Menu is shown and toggle icon is inverted */ #new-expander--nav-menu:checked ~ .new-site-nav__dropdown { display: grid; /* This must be "grid" if the revealed menu is itself using an internal grid layout */ } .new-site-nav #new-expander--nav-menu:checked ~ .new-site-nav-main__expander-toggle::before, .new-site-nav #new-expander--nav-menu:checked ~ .new-site-nav-main__expander-toggle::after { transform: rotate(180deg); } /* SEARCH DROPDOWN EXPANDER */ /* Search Dropdown is now integrated into the Nav Dropdown and the Search button is just another label for the input#new-expander--nav-menu checkbox */ .new-site-nav__search-dropdown { grid-column: 1 / -1; padding-top: 3rem; padding-bottom: 3rem; margin-top: 0.5rem; margin-bottom: -0.5rem; background-color: var(--utility-background-color); } .new-site-nav__search-dropdown .new-site-nav__search-form { display: grid ; grid-template-columns: 4fr 1fr; font-size: 2.7rem; } .new-site-nav__search-dropdown .new-site-nav__search-form .new-button { padding-top: 1rem; } .new-site-nav__search-dropdown .new-site-nav__search-form > * { display: grid ; grid-template-columns: 4fr 1fr; font-size: 0.6em; height: 4rem; border: 1px solid var(--utility-background-color); } form input { padding-left: 0.65em; } /* SUB-NAV DROPDOWN EXPANDERS */ /* This uses a checkbox and labels to toggle the display of content without using javascript. See: https://jsfiddle.net/Algreenwich/uLpzvx4n/36/ This was adapted from The Checkbox/Label Trick described here: https://javascript.works-hub.com/learn/a-javascript-free-frontend-61275 An alternative (although less robust) method is to use anchors links: https://jsfiddle.net/Algreenwich/uym9s0bg/ https://stackoverflow.com/questions/40312901/showing-and-hiding-something-with-pure-css-with-show-and-hide-button */ /* Sub-nav has arrow toggle icon */ .new-site-nav__dropdown-expander-toggle::after { content: "arrow_drop_down"; display: inline-block; vertical-align: -0.25em; font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 1.5em; line-height: 1rem; /* required to prevent additional height in element */ letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; /* required for Edge browser */ } /* subnav DEFAULT STATE: Menu content in adjacent sibling div is hidden */ #new-expander--nav-menu-section-submenu + label.new-site-nav__dropdown-expander-toggle + div.new-expander-content, #new-expander--nav-menu-topics-submenu + label.new-site-nav__dropdown-expander-toggle + div.new-expander-content, #new-expander--nav-menu-more-submenu + label.new-site-nav__dropdown-expander-toggle + div.new-expander-content { display: none ; } /* subnav ACTIVATED STATE: Menu content is shown and adjacent sibling toggle icon is inverted */ #new-expander--nav-menu-section-submenu:checked + label.new-site-nav__dropdown-expander-toggle + div.new-expander-content, #new-expander--nav-menu-topics-submenu:checked + label.new-site-nav__dropdown-expander-toggle + div.new-expander-content, #new-expander--nav-menu-more-submenu:checked + label.new-site-nav__dropdown-expander-toggle + div.new-expander-content { display: grid ; /* Menu content is shown */ } #new-expander--nav-menu-section-submenu:checked + .new-site-nav__dropdown-expander-toggle::after, #new-expander--nav-menu-topics-submenu:checked + .new-site-nav__dropdown-expander-toggle::after, #new-expander--nav-menu-more-submenu:checked + .new-site-nav__dropdown-expander-toggle::after { transform: rotate(180deg); /* toggle icon is inverted */ } /* ---- SITE HEADER responsive enhancement ---- */ /* -------------------------------------------- */ /* Site Header MEDIUM BREAKPOINT -- breakpoint-width-m: 684px */ @media screen and (min-width: 684px) { .new-site-header { padding-bottom: 1rem; } } /* Site Header NON-STANDARD BREAKPOINT -- MAX 849px */ /* Style Nav only in narrow views */ @media screen and (max-width: 849px) { /* Reduce space below page header on Story-pages in narrow views */ .story-page .new-site-header { margin-bottom: -4rem; } .new-site-header__logo-block { padding-top: 2rem; padding-bottom: 0; /* balances grid alignment */ } .new-site-header__logo img{ max-width: 50vw; /* Makes room for burger and search icons beside logo */ } /* Raise Nav to be parallel with logo in narrow views */ .new-site-nav-main { position: relative; top: -4rem; } .new-site-nav-main__expander-toggle.new-nav__burger { position: relative; } .new-site-nav-main__expander-toggle.new-nav__burger::before { content: "menu"; display: inline-block; position: absolute; top: -3rem; left: -0.5rem; font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 5.5rem; line-height: 1rem; /* required to prevent additional height in element */ letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; /* required for Edge browser */ } .new-nav__link--search { position: absolute; right: 0rem; left: initial; margin-right: 0; /* Eliminates an offset required in wide views */ } .new-nav__link--search::before { top: -4rem; left: 1rem; transform: scale(1); } /* Dropdown Menu appearance in narrow views */ .new-site-nav__dropdown { position: absolute; left: -2rem; top: 4rem; z-index: 100; grid-template-rows: auto auto auto auto auto auto auto 1fr; width: 100vw; padding-left: 2rem; padding-right: 2rem; min-height: 100vh; padding-bottom: 8rem; background-color: var(--utility-background-color); color: #eee; } /* Adds inside border to Dropdown Menu in narrow views */ .new-site-nav__dropdown::after { content: ''; position: absolute; left: 0rem; bottom: 1rem; z-index: 100; width: calc(100vw); border-bottom: 1px solid #bbb; } .new-site-nav__dropdown a { color: var(--brand-colour); padding: 0.5rem 0; } .new-site-nav__dropdown-heading { padding-bottom: 0.5rem; border-bottom: 1px solid #888; } .new-expander-content__section-submenu a, .new-expander-content__topics-submenu a, .new-expander-content__more-submenu a { border-bottom: 1px solid #888; } .new-site-nav__dropdown .new-nav__link--join { padding-top: 3rem; } /* Search Dropdown appearance in narrow views */ .new-site-nav__search-dropdown { position: relative; /* left: -2rem; */ /* width: 100vw; */ /* min-height: 100vh; */ } .new-hmpg-org-recent-stories { padding-top: 2rem; /* Narrows gap between header and main content */ } } /* end os narrow breakpoint styles -- max-wdith 849px */ /* Site Header NON-STANDARD BREAKPOINT -- non-standard-width: 425px */ @media screen and (min-width: 0px) and (max-width: 425px) { /* Raise Nav to be parallel with logo in narrowest views */ .new-site-nav-main { position: relative; top: -5rem; } } /* Site Header NON-STANDARD BREAKPOINT -- MIN-WIDTH 850px --------------- */ @media screen and (min-width: 850px) { .new-site-header { padding-bottom: 0rem; /* Run logo block and nav to edge of screen */ padding-left: 0; padding-right: 0; } /* Expand site-header grid and show taglines */ .new-site-header__logo-block { grid-template-columns: 1fr 1fr 1fr; } .new-site-header__tagline--a { display: block; text-align: right; } .new-site-header__tagline--b { display: block; } .new-site-header__tagline--mobile { display: none; } /* Create SITE-NAV BAR GRID */ .new-site-nav-main { /* Set element's position within its container (.site-header__logo-block) */ grid-column: 1 / -1; position: relative; /* Define Grid within element */ display: grid; grid-template-columns: calc(var(--page-margin-sides)) [main-items] 1fr 1fr 1fr 1fr [secondary-items] 1fr 1fr calc(var(--page-margin-sides) - var(--gutter-column)); padding-top: var(--gutter-row); grid-column-gap: 0; grid-row-gap: 0; align-items: end; margin-top: 1.5rem; /* desired offset from logo (3rem) - self padding-top (.5rem) - padding on nav__link (0.5rem)*/ border-top: 1px solid var(--border-colour-cols); padding: calc(.5rem) 0 calc(0rem + 2px); /* border-bottom: 1px solid var(--text-colour); */ margin-bottom: calc(.5rem - 1px - 2px); /* increment to offset margin-top for grid alignment - self top border (1px) - self padding-bottom (2px) */ } /* Nav bar button spacing and positioning */ .new-site-nav-main > .new-nav__link { padding-top: 0.25rem; /* offset by reduction in top-margin in site-nav-main to realign with baseline grid */ padding-bottom: 0.25rem; /* offset by reduction in top-margin in site-nav-main to realign with baseline grid */ } .new-site-nav-main > a:first-of-type { grid-column: main-items; } .new-site-nav-main .new-nav__link--news, .new-site-nav-main .new-nav__link--analysis, .new-site-nav-main .new-nav__link--culture, .new-site-nav-main .new-nav__link--more { justify-self: center; width: 100%; border-right: 1px solid var(--border-colour-cols); text-align: center; } .new-site-nav-main .new-nav__link--more { border-right: none; } .new-site-nav-main .new-nav__link--join { grid-column: secondary-items; justify-self: center; } .new-site-nav-main .new-nav__link--news, .new-site-nav-main .new-nav__link--analysis, .new-site-nav-main .new-nav__link--culture, .new-site-nav-main .new-nav__link--more { padding-right: var(--gutter-column-half); padding-left: var(--gutter-column-half); } /* Nav bar borders */ /* dot-screen shadow */ .new-site-nav-main::after { content:""; display: grid; z-index: 0; grid-column: 1 / -1; position: relative; top: calc(1rem - 1px); /* top: calc(1rem + 2px + 1px); -- for nav version with double bottom border */ /* height of self (1rem) + .new-site-nav-main padding-bottom (2px) + .new-site-nav-main border-top (1px) */ left: 0; width: 100%; height: 1rem; background-image: url(../img/texture-dotscreen-1.2x.svg); } /* heavy-border below */ .new-site-nav-main::before { content:""; position: absolute; bottom: 3px; /* .new-site-nav-main padding-bottom(2px) + .new-site-nav-main border-top(1px) */ left: 0; grid-column: 1 / -1; width: 100%; border-bottom: 4px solid var(--text-colour); } /* HAMBURGER SHOW/HIDE */ /* In wide views show all nav item items except the hamburger, search button, and the dropdown menus. (This rule leaves the dropdown menus unaffected so that their visibility will be controlled by the checkbox state of #new-expander--nav-menu (and #new-expander--search) as defined below in the NAV DROPDOWN EXPANDER rules) */ .new-site-nav-main > :not(.new-nav__burger):not(.new-site-nav__dropdown):not(.new-nav__link--search):not(.new-site-nav__search-dropdown) { display: block; } /* In wide views hide the hamburger */ .new-site-nav-main > .new-nav__burger { display: none; } /* DROPDOWN NAV MENU */ /* Nav Dropdown grid for wide views */ .new-site-nav__dropdown { grid-column: 1 / -1; grid-template-columns: calc(var(--page-margin-sides) + 0.5rem) [col-1] 1fr [col-2] 1fr [col-3] 1fr [col-4 secondary-items] 1fr [col-5] 1fr [col-6] 1fr calc(var(--page-margin-sides) - var(--gutter-column)); /* + offset to align with nav button */ grid-template-rows: auto auto [row-2] 1fr; grid-column-gap: 0; grid-auto-flow: row dense; align-items: start; margin-top: 0.5rem; padding-bottom: 7.5rem; background-color: var(--utility-background-color); color: #eee; } .new-site-nav__search-dropdown { grid-column: 2 / -2; } .new-site-nav__dropdown > * { padding-right: 0; padding-left: 4.5vw; /* offset to align with nav button */ } .new-site-nav__search-dropdown { padding-left: ; padding-right: 8rem; } .new-site-nav__dropdown .new-site-nav__dropdown-heading-sections, .new-site-nav__dropdown .new-expander-content__section-submenu { padding-left: 5.5vw; /* offset to align with nav button */ } .new-site-nav__dropdown .new-facebook, .new-site-nav__dropdown .new-twitter { padding-left: 0; } .new-site-nav__dropdown a { color: var(--brand-colour); line-height: 2.5rem } .new-expander-content__section-submenu, .new-expander-content__topics-submenu, .new-expander-content__more-submenu { display: grid !important} /* show submenus by default */ .new-site-nav__dropdown-expander-toggle::after {content: none;} /* Hides dropdown toggle arrows */ .new-site-nav__dropdown-heading-more {grid-column: col-3;} .new-site-nav__dropdown-heading-sections, .new-expander-content__section-submenu {grid-column: col-1;} .new-site-nav__dropdown-heading-topics, .new-expander-content__topics-submenu {grid-column: col-2;} .new-expander-content__more-submenu { grid-column: col-3; grid-row: row-2; /* Prevents submenu from expanding first row of grid. (Only necessary if .new-site-nav__dropdown-heading-more is hidden) )*/ position: relative; } .new-site-nav__dropdown .new-nav__link--newsletter {grid-column: col-4; padding-top: 2rem;} .new-site-nav__dropdown .new-nav__link--join {display: none} /* Hides redundant link */ .new-site-nav__dropdown .new-facebook {grid-column: col-5; justify-self: center; padding-top: 2rem;} .new-site-nav__dropdown .new-twitter {grid-column: col-5; justify-self: center; } } /* End of Site Header responsive breakpoint 850px*/ /* Site Header MARGINS BREAKPOINT -- breakpoint-width-margins 1100px --------------- */ @media screen and (min-width: 1100px) { .new-site-nav__dropdown > * { padding-left: 5.75rem; /* offset to align with nav button */ } .new-site-nav__dropdown .new-site-nav__dropdown-heading-sections, .new-site-nav__dropdown .new-expander-content__section-submenu { padding-left: 6.9rem; /* offset to align with nav button */ } } /* Site Header LARGE BREAKPOINT -- breakpoint-width-l 1368px --------------- */ @media screen and (min-width: 1368px) { /* Spacing for Nav buttons and dropdown */ .new-site-nav-main { grid-template-columns: calc(var(--page-margin-sides)) [main-items] 1fr 1fr 1fr 1fr [secondary-items] 1fr 1fr calc(var(--page-margin-sides) - var(--gutter-column)); } .new-site-nav-main .new-nav__link--join { justify-self: end; } .new-site-nav-main .new-nav__link--search { justify-self: center; } .new-site-nav__dropdown { grid-template-columns: calc(var(--page-margin-sides) + 2.75em)[col-1] 1fr [col-2] 1fr [col-3] 1fr [col-4 secondary-items] 1fr [col-5] 1fr [col-6] 1fr calc(var(--page-margin-sides) - var(--gutter-column)); } /* + offset to align with nav button */ .new-site-nav__dropdown > * { padding-left: 3.5vw; /* offset to align with nav button */ } .new-site-nav__dropdown .new-site-nav__dropdown-heading-sections, .new-site-nav__dropdown .new-expander-content__section-submenu { padding-left: 4vw; /* offset to align with nav button */ } .new-site-nav__dropdown .new-site-nav__dropdown-heading-more, .new-site-nav__dropdown .new-expander-content__more-submenu { padding-left: 4vw; /* offset to align with nav button */ } } /* End of Site Header organism */ /* SITE FOOTER organism ----------------- */ .new-site-footer { position: relative; display: grid; grid-template-columns: repeat(auto-fit, 140px); grid-column-gap: var(--gutter-column); grid-row-gap: 2rem; align-items: start; justify-content: center; padding-top: 4rem; padding-bottom: var(--gutter-row); color: #eee; background-color: var(--utility-background-color); /* Patches CSS for new footer on storypages */ font-family: var(--typeface-sans); font-weight: 400; font-style: normal; font-size: 1.6rem; line-height: 2rem; } .new-site-footer div { padding-bottom: 2rem; text-align: center } .new-site-footer .new-facebook { padding-bottom: 2rem; /* Patches CSS for new footer on storypages */ font-size: 100%; } /* Patches CSS for new footer on storypages */ .new-site-footer .fa { font-size: 100%; } .new-site-footer .new-site-footer__logo-container { display: none; } .new-site-footer .new-site-footer__logo { width: 80%; } .new-links-group { display:grid; grid-template-rows: auto; } .new-links-group h2 { min-height: 4rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; /* Patches CSS for new footer on storypages */ font-family: var(--typeface-sans); color: #eee; font-size: 1.6rem; line-height: 2rem; margin: 0; } .new-links-group a { color: var(--brand-colour); line-height: 2.5rem; } /* ---- SITE FOOTER responsive enhancement ---- */ /* */ /* Site Header NON-STANDARD BREAKPOINT -- 664px */ @media screen and (min-width: 704px) { .new-site-footer { grid-template-columns: 1fr 1fr 1fr 1fr; justify-content: left; } .new-site-footer div { padding-bottom: 2rem; text-align: left; } } /* Site Header NON-STANDARD BREAKPOINT -- 664px */ @media screen and (min-width: 950px) { .new-site-footer { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } } /* Site Header LARGE BREAKPOINT -- 1368px */ @media screen and (min-width: 1368px) { .new-site-footer .new-site-footer__logo-container { display: block; } } /* End of Site Footer organism */ /*------------------------------------*\ #HELPER CLASSES \*------------------------------------*/ /* RESPONSIVE IMAGES -- forces the image to be the same width as its parent element. Confusingly similar in name to Bootstrap's .new-img-responsive but this will actually stretch an image rather than merely shrink it. */ .new-responsive-img { width: 100%; height: auto; display: block; } /*------------------------------------*\ #GRID GUIDES \*------------------------------------*/ /* This draws guides for column grid and baseline grid to tune the layout. */ /* Omitted from live prototype */ /*------------------------------------*\ #PATCHES \*------------------------------------*/ /* SET DEFAULT IMG HEIGHT FOR TERTIARY RECENT STORIES ITEMS */ /* Sets a default min-height for Tertiary Recent Stories items so that baseline-element.js doesn't set their height to zero. Some of the tertiary recent stories items are hidden and only revealed when the reader clicks "more recent stories" button. Baseline-element.js will set the height of imgs within display:none to zero unless a default height is set in advance. */ /* Calculation: img height = ( ( ( (100vw - page-margins - col-gutters) / #cols ) x img-col-size ) / img-aspect ) = ( ( ( (100vw - (page-margin x 2) - ( #cols-1 x colgutter) ) / #cols ) x 1 ) / img-aspect ) */ .new-hmpg-org-recent-stories .new-story-item--tertiary .new-story-item__image .new-responsive-img { min-height: calc( ( ( ( 100vw - (var(--page-margin-sides) * 2) - (3 * var(--gutter-column)) ) / 4 ) * 1 ) / 1.5 ) } /* RECENT STORIES DEFAULT IMG HEIGHT LARGE BREAKPOINT -- breakpoint: 1368px */ /* This is the same as above except that img-col-size is set to 0.5 because the img only occupies half the column width (minus a margin)*/ /* Calculation: img height = ( ( ( (100vw - page-margins - col-gutters) / #cols ) x img-col-size ) / img-aspect ) = ( ( ( (100vw - (page-margin x 2) - ( #cols-1 x colgutter) ) / #cols ) x 0.5 ) / img-aspect ) */ /* THIS RULE PRODUCES A LAYOUT BUG --> @media screen and (min-width: 1368px) { .new-hmpg-org-recent-stories .new-story-item--tertiary .new-story-item__image .new-responsive-img { min-height: calc( ( ( ( 100vw - (var(--page-margin-sides) * 2) - (3 * var(--gutter-column)) ) / 4 ) * 0.45 ) / 1.5 ); } } */ /* IE PATCHES */ /* Hide old header from all non-IE browsers */ .site__header-IE {display:none;} /* Show old header to IE 10 and IE 11. Hide new header. */ @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .site__header-IE {display:block;} .new-site-header {display: none;} } /* Hide old footer from all non-IE browsers */ .site-footer-IE {display:none;} /* Show old footer to IE 10 and IE 11. Hide new header. */ @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .site-footer-IE {display:block;} .new-site-footer {display: none;} } /* Set footer links in green on IE 10 and 11 */ .site-footer-IE .footer__menu a, .site-footer-IE .footer__menu a:link, .site-footer-IE .footer__menu a:visited { color: #82AD00; }