/* ========================================================================== 03 · TYPOGRAPHY — banded fluid scale, font assignment, metal text All numbers live in 02-tokens.css. This file only wires them up. ========================================================================== */ /* --- Font assignment and shared metrics ---------------------------------- */ body { font-family: var(--sm-font-ui) !important; color: var(--sm-text) !important; font-weight: var(--sm-text-weight) !important; line-height: calc(var(--scalefactor-line-height-big) * 1em) !important; } p { font-weight: var(--sm-text-weight) !important; line-height: calc(var(--scalefactor-line-height-big) * 1em) !important; margin: 0 0 var(--sm-para-gap) 0 !important; color: var(--sm-text) !important; } p:last-child { margin-bottom: 0 !important; } /* --- Heading colour ------------------------------------------------------- Warm says heading, cool says clickable. Plain headings sat on the same near-white as the body copy and separated only by size and face; gold sharpens that and carries the warm family into the dark zone, where it otherwise appears only on the widget titles. Two places stay out of this because they sit on light ground: the title strip and the 404 page. Both keep their dark type — gold would not read there. Their rules are more specific and win on their own. ------------------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { font-family: var(--sm-font-display) !important; color: var(--sm-gold) !important; line-height: calc(var(--scalefactor-line-height) * 1em) !important; word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } /* Below 680 the hyphenation goes. At 25px Cinzel on a 287px column it fires on almost every line, and hyphens in an all-caps display face read as noise rather than as typography. Body copy keeps it — there it prevents large gaps between words. overflow-wrap stays as the safety net: a single word wider than the column would otherwise run out of the panel. */ @media only screen and (max-width: 680px) { h1, h2, h3, h4, h5, h6 { -webkit-hyphens: none !important; -moz-hyphens: none !important; hyphens: none !important; overflow-wrap: break-word !important; word-break: normal !important; } } /* The page headline and the sidebar widget titles carry the same weight, so the right column reads as a peer of the main heading rather than as body copy that happens to be set in the display face. */ h1, .edgtf-widget-title { font-weight: var(--sm-h1-weight) !important; } /* ========================================================================== DESKTOP FLUID 1025 - 1600px (also the base, overridden downwards below) ========================================================================== */ body { font-size: calc((var(--base-mid) * 1px + (var(--base-large) - var(--base-mid)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size)) !important; } p { font-size: calc((var(--p-mid) * 1px + (var(--p-large) - var(--p-mid)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size)) !important; } h1 { font-size: calc((var(--h1-mid) * 1px + (var(--h1-large) - var(--h1-mid)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size)) !important; } h2 { font-size: calc((var(--h2-mid) * 1px + (var(--h2-large) - var(--h2-mid)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size)) !important; } h3 { font-size: calc((var(--h3-mid) * 1px + (var(--h3-large) - var(--h3-mid)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size)) !important; } h4 { font-size: calc((var(--h4-mid) * 1px + (var(--h4-large) - var(--h4-mid)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size)) !important; } h5 { font-size: calc((var(--h5-mid) * 1px + (var(--h5-large) - var(--h5-mid)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size)) !important; } h6 { font-size: calc((var(--h6-mid) * 1px + (var(--h6-large) - var(--h6-mid)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size)) !important; } /* ========================================================================== LARGE DESKTOP >= 1601px — hold flat, otherwise the ramp keeps growing ========================================================================== */ @media only screen and (min-width: 1601px) { body { font-size: calc(var(--base-large) * 1px * var(--scalefactor-font-size)) !important; } p { font-size: calc(var(--p-large) * 1px * var(--scalefactor-font-size)) !important; } h1 { font-size: calc(var(--h1-large) * 1px * var(--scalefactor-font-size)) !important; } h2 { font-size: calc(var(--h2-large) * 1px * var(--scalefactor-font-size)) !important; } h3 { font-size: calc(var(--h3-large) * 1px * var(--scalefactor-font-size)) !important; } h4 { font-size: calc(var(--h4-large) * 1px * var(--scalefactor-font-size)) !important; } h5 { font-size: calc(var(--h5-large) * 1px * var(--scalefactor-font-size)) !important; } h6 { font-size: calc(var(--h6-large) * 1px * var(--scalefactor-font-size)) !important; } } /* ========================================================================== TABLET 768 - 1024px ========================================================================== */ @media only screen and (max-width: 1024px) and (min-width: 768px) { body { font-size: calc((var(--base-tablet) * 1px + (var(--base-mid) - var(--base-tablet)) * ((100vw - var(--typo-vw-tablet-min) * 1px) / (var(--typo-vw-tablet-max) - var(--typo-vw-tablet-min)))) * var(--scalefactor-font-size)) !important; } p { font-size: calc((var(--p-tablet) * 1px + (var(--p-mid) - var(--p-tablet)) * ((100vw - var(--typo-vw-tablet-min) * 1px) / (var(--typo-vw-tablet-max) - var(--typo-vw-tablet-min)))) * var(--scalefactor-font-size)) !important; } h1 { font-size: calc((var(--h1-tablet) * 1px + (var(--h1-mid) - var(--h1-tablet)) * ((100vw - var(--typo-vw-tablet-min) * 1px) / (var(--typo-vw-tablet-max) - var(--typo-vw-tablet-min)))) * var(--scalefactor-font-size)) !important; } h2 { font-size: calc((var(--h2-tablet) * 1px + (var(--h2-mid) - var(--h2-tablet)) * ((100vw - var(--typo-vw-tablet-min) * 1px) / (var(--typo-vw-tablet-max) - var(--typo-vw-tablet-min)))) * var(--scalefactor-font-size)) !important; } h3 { font-size: calc((var(--h3-tablet) * 1px + (var(--h3-mid) - var(--h3-tablet)) * ((100vw - var(--typo-vw-tablet-min) * 1px) / (var(--typo-vw-tablet-max) - var(--typo-vw-tablet-min)))) * var(--scalefactor-font-size)) !important; } h4 { font-size: calc((var(--h4-tablet) * 1px + (var(--h4-mid) - var(--h4-tablet)) * ((100vw - var(--typo-vw-tablet-min) * 1px) / (var(--typo-vw-tablet-max) - var(--typo-vw-tablet-min)))) * var(--scalefactor-font-size)) !important; } h5 { font-size: calc((var(--h5-tablet) * 1px + (var(--h5-mid) - var(--h5-tablet)) * ((100vw - var(--typo-vw-tablet-min) * 1px) / (var(--typo-vw-tablet-max) - var(--typo-vw-tablet-min)))) * var(--scalefactor-font-size)) !important; } h6 { font-size: calc((var(--h6-tablet) * 1px + (var(--h6-mid) - var(--h6-tablet)) * ((100vw - var(--typo-vw-tablet-min) * 1px) / (var(--typo-vw-tablet-max) - var(--typo-vw-tablet-min)))) * var(--scalefactor-font-size)) !important; } } /* ========================================================================== MOBILE 480 - 768px ========================================================================== */ @media only screen and (max-width: 768px) and (min-width: 480px) { body { font-size: calc((var(--base-mobile) * 1px + (var(--base-tablet) - var(--base-mobile)) * ((100vw - var(--typo-vw-mobile-min) * 1px) / (var(--typo-vw-mobile-max) - var(--typo-vw-mobile-min)))) * var(--scalefactor-font-size)) !important; } p { font-size: calc((var(--p-mobile) * 1px + (var(--p-tablet) - var(--p-mobile)) * ((100vw - var(--typo-vw-mobile-min) * 1px) / (var(--typo-vw-mobile-max) - var(--typo-vw-mobile-min)))) * var(--scalefactor-font-size)) !important; } h1 { font-size: calc((var(--h1-mobile) * 1px + (var(--h1-tablet) - var(--h1-mobile)) * ((100vw - var(--typo-vw-mobile-min) * 1px) / (var(--typo-vw-mobile-max) - var(--typo-vw-mobile-min)))) * var(--scalefactor-font-size)) !important; } h2 { font-size: calc((var(--h2-mobile) * 1px + (var(--h2-tablet) - var(--h2-mobile)) * ((100vw - var(--typo-vw-mobile-min) * 1px) / (var(--typo-vw-mobile-max) - var(--typo-vw-mobile-min)))) * var(--scalefactor-font-size)) !important; } h3 { font-size: calc((var(--h3-mobile) * 1px + (var(--h3-tablet) - var(--h3-mobile)) * ((100vw - var(--typo-vw-mobile-min) * 1px) / (var(--typo-vw-mobile-max) - var(--typo-vw-mobile-min)))) * var(--scalefactor-font-size)) !important; } h4 { font-size: calc((var(--h4-mobile) * 1px + (var(--h4-tablet) - var(--h4-mobile)) * ((100vw - var(--typo-vw-mobile-min) * 1px) / (var(--typo-vw-mobile-max) - var(--typo-vw-mobile-min)))) * var(--scalefactor-font-size)) !important; } h5 { font-size: calc((var(--h5-mobile) * 1px + (var(--h5-tablet) - var(--h5-mobile)) * ((100vw - var(--typo-vw-mobile-min) * 1px) / (var(--typo-vw-mobile-max) - var(--typo-vw-mobile-min)))) * var(--scalefactor-font-size)) !important; } h6 { font-size: calc((var(--h6-mobile) * 1px + (var(--h6-tablet) - var(--h6-mobile)) * ((100vw - var(--typo-vw-mobile-min) * 1px) / (var(--typo-vw-mobile-max) - var(--typo-vw-mobile-min)))) * var(--scalefactor-font-size)) !important; } } /* ========================================================================== SMALL MOBILE <= 480px — fixed ========================================================================== */ @media only screen and (max-width: 480px) { body { font-size: calc(var(--base-mobile) * 1px * var(--scalefactor-font-size)) !important; } p { font-size: calc(var(--p-mobile) * 1px * var(--scalefactor-font-size)) !important; } h1 { font-size: calc(var(--h1-mobile) * 1px * var(--scalefactor-font-size)) !important; } h2 { font-size: calc(var(--h2-mobile) * 1px * var(--scalefactor-font-size)) !important; } h3 { font-size: calc(var(--h3-mobile) * 1px * var(--scalefactor-font-size)) !important; } h4 { font-size: calc(var(--h4-mobile) * 1px * var(--scalefactor-font-size)) !important; } h5 { font-size: calc(var(--h5-mobile) * 1px * var(--scalefactor-font-size)) !important; } h6 { font-size: calc(var(--h6-mobile) * 1px * var(--scalefactor-font-size)) !important; } } /* --- Base text colour ---------------------------------------------------- Meta lines — post dates, event months — drop to the muted step so they read as annotation rather than as copy. ------------------------------------------------------------------------ */ .edgtf-post-info, .edgtf-post-info a, .edgtf-blog-holder .edgtf-post-info-date, .edgtf-post-info-date a, .evo_start .month { color: var(--sm-meta) !important; } body.edgtf-color-skin-light { color: var(--sm-text) !important; } /* --- Metal text treatment (texture clipped to glyphs) --------------------- The title band runs on metal.jpg — cool, blue-grey, matching the interaction family. The widget titles keep the warm texture, which is what gives the sidebar its hierarchy against the blue-tinted cards. silver.jpg is no longer referenced. ------------------------------------------------------------------------ */ body.edgtf-color-skin-light .edgtf-sidebar .edgtf-widget-title { border-bottom-color: var(--sm-white) !important; } /* --- Metal text treatment (texture clipped to glyphs) --------------------- */ /* --- Type on the sand bands ---------------------------------------------- The clipped metal textures are gone. They depended on whatever part of the artwork sat behind the glyphs, which made contrast a matter of luck; on the light sand they stopped reading altogether. gold.jpg, silver.jpg and metal.jpg are no longer referenced by any rule. The files stay in /images/ — reinstating the treatment is a matter of restoring these two rules, not of re-exporting assets. ------------------------------------------------------------------------ */ .edgtf-title-subtitle-holder-inner span { background-image: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--sm-on-sand); color: var(--sm-on-sand); line-height: 1em; } .hero-gold span, .edgtf-widget-title { background-image: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--sm-gold); color: var(--sm-gold); line-height: 1em; } .hero-gold span { letter-spacing: 6px; } /* .hero-logo — mask experiment, disabled. Kept as a note: .hero-logo { -webkit-mask-image: var(--sm-texture-silver); mask-image: var(--sm-texture-silver); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mask-mode: alpha; } */