/*
Theme Name: GeneratePress Child
Theme URI: http://generatepress.com
Description: Default GeneratePress child theme
Author: Thomas Usborne
Author URI: http://edge22.com
Template: generatepress
Version: 0.1
Tags: two-columns, three-columns, one-column, right-sidebar, left-sidebar, fluid-layout, responsive-layout, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options, light, white, dark, black, blue, brown, gray, green, orange, pink, purple, red, silver, tan, yellow
*/
/* TYPOGRAPHY FRAMEWORK VARIABLES */
:root {
/* TYPOGRAPHY: TEXT SIZE SCALE */
/* https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=320&minRatio=1.125&maxFontSize=18&maxWidth=1280&maxRatio=1.2&steps=xs,s,m,l,xl&baseStep=m&prefix=text&decimals=2&useRems=on&remValue=16&previewFont=Inter&previewText=Preview&previewWidth=900 */
--text-xs: clamp(0.79rem, -0.01vw + 0.79rem, 0.78rem);
--text-s: clamp(0.89rem, 0.08vw + 0.87rem, 0.94rem);
--text-m: clamp(1rem, 0.21vw + 0.96rem, 1.13rem);
--text-l: clamp(1.13rem, 0.37vw + 1.05rem, 1.35rem);
--text-xl: clamp(1.27rem, 0.59vw + 1.15rem, 1.62rem);
/* TYPOGRAPHY: HEADING SIZE SCALE */
/* https://www.fluid-type-scale.com/calculate?minFontSize=20&minWidth=320&minRatio=1.25&maxFontSize=22&maxWidth=1280&maxRatio=1.333&steps=6,5,4,3,2,1,title&baseStep=4&prefix=h&decimals=2&useRems=on&remValue=16&previewFont=Inter&previewText=Preview&previewWidth=900 */
--h6: clamp(0.8rem, -0.04vw + 0.81rem, 0.77rem);
--h5: clamp(1rem, 0.05vw + 0.99rem, 1.03rem);
--h4: clamp(1.25rem, 0.21vw + 1.21rem, 1.38rem);
--h3: clamp(1.56rem, 0.45vw + 1.47rem, 1.83rem);
--h2: clamp(1.95rem, 0.82vw + 1.79rem, 2.44rem);
--h1: clamp(2.44rem, 1.36vw + 2.17rem, 3.26rem);
--h-title: clamp(3.05rem, 2.15vw + 2.62rem, 4.34rem);
}
/* TEXT SIZE UTILITY CLASSES */
/* Do not set 'body' typography in Theme Styles.
REMOVE any previous font size and line height in Theme Styles > Typography > Body */
.text-xl {
font-size: var(--text-xl);
line-height: 1.4;
}
.text-l {
font-size: var(--text-l);
line-height: 1.5;
}
body, .text-m {
font-size: var(--text-m);
line-height: 1.5;
}
.text-s {
font-size: var(--text-s);
line-height: 1.6;
}
.text-xs {
font-size: var(--text-xs);
line-height: 1.7;
}
/* HEADING SIZE UTILITY CLASSES */
/* Do not set any headings typography in Theme Styles.
REMOVE any font sizes or line heights on all heading levels in Theme Styles > Typography. */
.h-title {
font-size: var(--h-title);
line-height: 1.05;
}
h1, .h1 {
font-size: var(--h1);
line-height: 1.1;
}
h2, .h2 {
font-size: var(--h2);
line-height: 1.2;
}
h3, .h3 {
font-size: var(--h3);
line-height: 1.3;
}
h4, .h4 {
font-size: var(--h4);
line-height: 1.4;
}
h5, .h5 {
font-size: var(--h5);
line-height: 1.5;
}
h6, .h6 {
font-size: var(--h6);
line-height: 1.6;
}
/* TYPOGRAPHICAL SPACING - IF *NOT* USING FLEX ROW GAP IN EXTRAS LESSON */
/* Reset all margins */
body :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {
margin: 0;
}
/* Responsive bottom margin PARAGRAPHS & LISTS */
body :is(p, ul, ol) {
margin-block-end: 1em;
}
body :is(p:last-of-type) {
margin-block-end: 0; /* Zero margin last para */
}
/* Responsive bottom margin HEADINGS */
body :is(h1, h2, h3, h4, h5, h6) {
margin-block-end: 0.5em;
}
/* Adds responsive top margin on HEADINGS within Rich Text and Posts */
body .brxe-text * + :is(h1, h2, h3, h4, h5, h6),
body .brxe-post-content:not([data-source="bricks"]) * + :is(h1, h2, h3, h4, h5, h6) {
margin-block-start: 1em;
}
/* Responsive bottom margin LIST ITEMS */
body .brxe-text * + li,
body .brxe-post-content:not([data-source="bricks"]) * + li {
margin-block-end: 0.5em;
}
/* Unindents lists within Rich Text and Posts */
body .brxe-text * + :is(ul, ol),
body .brxe-post-content:not([data-source="bricks"]) * + :is(ul, ol) {
padding-left: 16px;
margin-top: 0;
}
/* Makes H2s within Rich Text and blog posts one size smaller */
.brxe-text h2,
.brxe-post-content h2 {
font-size: var(--h3);
}
/* ============================
* SPACING FRAMEWORK VARIABLES */
:root {
/* GAP SCALE */
/* https://utopia.fyi/space/calculator?c=320,16,1.2,1280,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
--gap-xxxs: clamp(0.25rem, 0.15rem + 0.52vw, 0.56rem);
--gap-xxs: clamp(0.5rem, 0.38rem + 0.63vw, 0.88rem);
--gap-xs: clamp(0.75rem, 0.63rem + 0.63vw, 1.13rem);
--gap-s: clamp(1rem, 0.77rem + 1.15vw, 1.69rem);
--gap-m: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
--gap-l: clamp(2rem, 1.54rem + 2.29vw, 3.38rem);
--gap-xl: clamp(3rem, 2.5rem + 2.5vw, 4.5rem);
--gap-xxl: clamp(4rem, 3.08rem + 4.58vw, 6.75rem);
/* SECTION TOP AND BOTTOM PADDING SCALE */
/* https://utopia.fyi/space/calculator?c=320,24,1.2,1280,40,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
--section-xxxs: clamp(0.38rem, 0.08rem + 1.46vw, 1.25rem);
--section-xxs: clamp(0.75rem, 0.38rem + 1.88vw, 1.88rem);
--section-xs: clamp(1.13rem, 0.67rem + 2.29vw, 2.5rem);
--section-s: clamp(1.5rem, 0.75rem + 3.75vw, 3.75rem);
--section-m: clamp(2.25rem, 1.33rem + 4.58vw, 5rem);
--section-l: clamp(3rem, 1.5rem + 7.5vw, 7.5rem);
--section-xl: clamp(4.5rem, 2.67rem + 9.17vw, 10rem);
/* »»» CONTEXTUAL GAP VARIABLES ***/
--grid-gap: var(--gap-m); /* Gap between columns */
--content-gap: var(--gap-s); /* Gap between content elements */
--container-gap: var(--gap-m); /* Gap between multiple CONTAINERS in sections */
}
/* SECTION HEIGHT UTILITY CLASSES */
/* Do NOT set any section styles in Theme Styles. */
/* 'padding-block' is top and bottom. 'padding-inline' is left and right */
.section-xl {
padding-block: var(--section-xl);
}
.section-l {
padding-block: var(--section-l);
}
section, .section-m { /* Default section padding, all sections */
padding-block: var(--section-m); /* Top and bottom padding */
padding-inline: var(--gap-m); /* Left and right padding */
row-gap: var(--container-gap); /* Vertical gap between CONTAINERS inside SECTIONS */
}
.section-s {
padding-block: var(--section-s);
}
.section-xs {
padding-block: var(--section-xs);
}
.section-xxs {
padding-block: var(--section-xxs);
}
.section-xxxs {
padding-block: var(--section-xxxs);
}
/* GAP UTILITY CLASSES */
/* Set on a parent element to affect its direct children */
/* Gap between grid COLUMNS. Set in addition to a grid class. */
.grid-gap {
gap: var(--grid-gap);
}
/* Vertical spacing between CONTENT elements. Set on PARENT of the elements you want the gap between. */
.content-gap {
gap: var(--content-gap);
}
/* If you want smaller vertical spacing between CONTENT elements. As above. */
.content-gap-s {
gap: calc(var(--content-gap)/1.5);
}
/* Vertical gap between CONTAINERS inside a section.
You don't usually have to set this, because we already have a default row gap set for sections, above */
.container-gap {
gap: var(--container-gap);
border-bottom:1px solid red;
}
/* Images bottom margin inside blog posts */
.wp-block-image {
margin-bottom: 2rem;
}
/* CSS to remove huge margin between paragraphs and headings */
p:last-of-type+h1, p:last-of-type+h2, p:last-of-type+h3, p:last-of-type+h4, p:last-of-type+h5, p:last-of-type+h6 {margin-top: 0;}
/* =======================================
* GB GP*/
.ar-16-9 {
aspect-ratio: 16/9;
}
.ar-9-16 {
aspect-ratio: 9/16;
}
.ar-4-3 {
aspect-ratio: 4/3;
}
.ar-1-1 {
aspect-ratio: 1/1;
}
/* Visually Hidden */
.visually-hidden:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
/* No Underline */
.no-ul, .no-ul a {
text-decoration: none;
}
/* Remove bottom margin on last paragraph */
.gb-container p:last-child:last-of-type {
margin-bottom: 1rem;
}
.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
margin-bottom: 10px;
}
/**/
p + figure {
margin-top:1.5rem;
}
body.wp-admin div.eb-pattern-library-button-wrapper {
display:none !important;
min-width:0;
}
ul {
padding-left:1.2rem;
}
section {
display:flex;
flex-direction: column;
}
section div > figure {
margin-bottom:.8rem;
}
form#gform_1 input.gform_button:hover {
background-color:var(--brand);
}
.gfield--type-section h3.gsection_title {
font-size:1.35rem;
color:#999;
margin:1rem 0 0 0;
}