Untitled
unknown
plain_text
2 years ago
6.4 kB
7
Indexable
/*-- -------------------------- --> <--- Side By Side --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0em) { :root { --primary: #D98900; --primaryLight: #FFC156; --headerColor: #1a1a1a; --bodyTextColor: #4E4B66; /* 13px - 16px */ --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem); /* 31px - 49px */ --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem); --bodyFontSize: 1rem; /* 60px - 100px top and bottom */ --sectionPadding: clamp(3.75em, 7.82vw, 6.25em) 1rem; } #sbs, #sbs-r { font-family: 'Roboto', 'Arial', sans-serif; padding: 0; position: relative; z-index: 1; } #sbs .cs-container, #sbs-r .cs-container { width: 100%; /* changes to 1280px on tablet */ max-width: 34.375em; padding: var(--sectionPadding); margin: auto; background: linear-gradient(90deg, rgba(241, 241, 244, 0) 0%, #f1f1f4 100%); /* prevents padding from adding to height and width */ box-sizing: border-box; position: relative; } #sbs .cs-container:before, #sbs-r .cs-container:before { /* Bottom Line */ content: ''; width: 100%; height: 1px; background: #b4b2c7; background: linear-gradient(83deg, #b4b2c7 0%, rgba(250, 251, 252, 0.005) 0%, #b4b2c7 100%); opacity: 1; position: absolute; display: block; bottom: 0; left: 0; } #sbs .cs-container:after, #sbs-r .cs-container:after { /* Right Line */ content: ''; width: 1px; height: 100%; background: #b4b2c7; background: linear-gradient(180deg, #b4b2c7 0%, rgba(250, 251, 252, 0.005) 0%, #b4b2c7 100%); opacity: 1; position: absolute; display: block; bottom: 0; right: 0; } #sbs .cs-lines, #sbs-r .cs-lines { display: none; } #sbs .cs-left, #sbs-r .cs-left { width: 100%; max-width: 32.625rem; margin: 0 auto 3rem; border: 1px solid var(--primary); position: relative; display: block; margin-left: 0; /* width divided by height */ aspect-ratio: 1; /* prevents border from adding to height and width */ box-sizing: border-box; } #sbs .cs-left img, #sbs-r .cs-left img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; } #sbs .cs-right, #sbs-r .cs-right { margin: auto; max-width: 33.875rem; } #sbs .cs-topper, #sbs-r .cs-topper { font-size: var(--topperFontSize); line-height: 1.2em; text-transform: uppercase; text-align: left; letter-spacing: .1em; font-weight: 700; color: var(--primary); margin-bottom: 1rem; display: block; } #sbs .cs-title, #sbs-r .cs-title { font-size: var(--headerFontSize); font-weight: 900; line-height: 1.2em; text-align: left; max-width: 27.125rem; margin: 0 auto 1rem 0; margin-left: 0; color: var(--headerColor); position: relative; } #sbs .cs-text, #sbs-r .cs-text { font-size: var(--bodyFontSize); line-height: 1.5em; text-align: left; width: 100%; max-width: 46.875rem; margin: 0 auto 0 0; margin-bottom: 1rem; color: var(--bodyTextColor); } #sbs .cs-text:last-of-type, #sbs-r .cs-text:last-of-type { margin-bottom: 2.5rem; } #sbs .cs-button-solid, #sbs-r .cs-button-solid { font-size: 1rem; /* 46px - 56px */ line-height: clamp(2.875em, 5.5vw, 3.5em); text-decoration: none; font-weight: 700; text-align: center; margin: auto; color: #fff; min-width: 9.375rem; padding: 0 1.5rem; background-color: var(--primary); border-radius: 0.25rem; display: inline-block; position: relative; z-index: 1; /* prevents padding from adding to the width */ box-sizing: border-box; } #sbs .cs-button-solid:before, #sbs-r .cs-button-solid:before { content: ''; position: absolute; height: 100%; width: 0%; background: #000; opacity: 1; top: 0; left: 0; z-index: -1; border-radius: 0.25rem; transition: width .3s; } #sbs .cs-button-solid:hover:before, #sbs-r .cs-button-solid:hover:before { width: 100%; } } /* Tablet - 768px */ @media only screen and (min-width: 48em) { #sbs .cs-container, #sbs-r .cs-container { max-width: 80rem; display: flex; justify-content: center; align-items: center; } #sbs .cs-left, #sbs-r .cs-left { width: 48%; /* 415px - 522px */ height: clamp(25.9375rem, 37.5vw, 32.625rem); margin: 0; /* 44px - 108px */ margin-right: clamp(2.75rem, 5.5vw, 6.75rem); flex: none; } #sbs .cs-right, #sbs-r .cs-right { max-width: 33rem; margin: 0; width: 45%; flex: none; } } /* Dark Mode */ @media only screen and (min-width: 0em) { body.dark-mode #sbs .cs-container, body.dark-mode #sbs-r .cs-container { background: linear-gradient(90deg, rgba(241, 241, 244, 0) 0%, var(--medium) 100%); } body.dark-mode #sbs .cs-topper, body.dark-mode #sbs-r .cs-topper { color: var(--primaryLight); } body.dark-mode #sbs .cs-title, body.dark-mode #sbs-r .cs-title, body.dark-mode #sbs .cs-text, body.dark-mode #sbs-r .cs-text { color: var(--bodyTextColorWhite); } } /*-- -------------------------- --> <--- Side By Side Reverse --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0em) { #sbs-r .cs-container { background: linear-gradient(90deg, #f1f1f4 0%, rgba(241, 241, 244, 0) 100%); } #sbs-r .cs-container:before { background: #b4b2c7; background: linear-gradient(270deg, #b4b2c7 0%, rgba(250, 251, 252, 0.005) 0%, #b4b2c7 100%); } #sbs-r .cs-container:after { left: 0; } } /* Tablet - 768px */ @media only screen and (min-width: 48em) { #sbs-r .cs-left { margin-right: 0; margin-left: clamp(2.75rem, 5.5vw, 6.75rem); order: 2; } } /* Dark Mode */ @media only screen and (min-width: 0em) { body.dark-mode #sbs-r .cs-container { background: linear-gradient(90deg, var(--medium) 0%, rgba(241, 241, 244, 0) 100%); } }
Editor is loading...