:root { --fs-h1: 3.75em; --fs-h2: 0.875em; --fs-h2-simple: 1.5em; --fs-p: 1.25em; /* --clr-text: rgba(38,38,37,1); --clr-text-contrast: rgba(255,255,255,0.5); */ --clr-text: rgba(255,255,255,1); --clr-text-contrast: rgba(58,58,57,0.5); --clr-text-opacity: 0.5; --clr-border: rgba(38,38,37,0.5); --clr-underline: rgba(0,221,170,0.5); --clr-underline-solid: rgba(0,102,85,1); --clr-background: rgba(40,44,48,1); --clr-background-75: rgba(40,44,48,0.75); --clr-background-50: rgba(40,44,48,0.5); --clr-background-25: rgba(40,44,48,0.25); --clr-background-00: rgba(40,44,48,0); --clr-shadow: rgba(0,0,0,0); --clr-divider: rgba(255,255,255,0.25); --clr-button-text: rgba(0,0,0,0.75); --clr-button-background: rgba(255,255,255,1); --work__left-start: obese-start; --work__left-end: obese-end; --work__right-start: obese-start; --work__right-end: obese-end; --work__left-narrow-start: obese-start; --work__left-narrow-end: obese-end; --work__right-narrow-start: obese-start; --work__right-narrow-end: obese-end; --work__left-wide-start: obese-start; --work__left-wide-end: obese-end; --work__right-wide-start: obese-start; --work__right-wide-end: obese-end; --work__onethird__left-start: fat-start; --work__onethird__left-end: fat-end; --work__onethird__middle-start: fat-start; --work__onethird__middle-end: fat-end; --work__onethird__right-start: fat-start; --work__onethird__right-end: fat-end; --work__twothird__left-start: obese-start; --work__twothird__left-end: obese-end; --work__twothird__right-start: obese-start; --work__twothird__right-end: obese-end; --work__work__two__bkgd-clr: red; --work__work__three__bkgd-clr: orange; --work__work__four__bkgd-clr: yellow; --work__work__five__bkgd-clr: green; --work__work__six__bkgd-clr: blue; --work__work__seven__bkgd-clr: pink; --work__work__eight__bkgd-clr: purple; --work__work__nine__bkgd-clr: magenta; --work__work__ten__bkgd-clr: pink; --work__column__psuedoshadow__standard: 100px; --work__column__psuedoshadow__small: 25px; --work__column__psuedoshadowblur__standard: 50px; --work__column__psuedoshadowblur__small: 25px; --work__column__topmargin: 0px; --work__column__topmarginsmall: 0px; --work-top-margin: 0; --menu__item-width: 150px; --menu__icon-opacity: 0.5; ::selection { background-color: var(--clr-text-contrast); } } /* GENERAL STYLES */ @font-face { font-family: 'Geologica-web'; src: url('../fonts/GeologicaVariable.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; font-style: normal; } /* body::-webkit-scrollbar { background-color: transparent; } */ body { background-color: var(--clr-background); color: var(--clr-text); position: relative; font-family: 'Geologica-web', 'Helvetica Neue', Inter, Roboto, 'Arial Nova', 'Nimbus Sans', Arial, sans-serif; font-weight: normal; font-variation-settings: "CRSV" 0, "SHRP" 0, "slnt" 0; /* border: 1px solid transparent; */ & .work-grid a { color: var(--clr-background-50); } & .work__two { background-color: var(--work__work__two__bkgd-clr); } & .work__three { background-color: var(--work__work__three__bkgd-clr); } & .work__four { background-color: var(--work__work__four__bkgd-clr); } & .work__five { background-color: var(--work__work__five__bkgd-clr); } & .work__six { background-color: var(--work__work__six__bkgd-clr); } & .work__seven { background-color: var(--work__work__seven__bkgd-clr); } & .work__eight { background-color: var(--work__work__eight__bkgd-clr); } & .work__nine { background-color: var(--work__work__nine__bkgd-clr); } & .work__ten { background-color: var(--work__work__ten__bkgd-clr); } } body.Home { --clr-text-contrast: rgba(0,0,0,0.5); background-color: var(--clr-background); background-image: linear-gradient(var(--clr-background-00), var(--clr-background) 100vh), radial-gradient(var(--clr-background), var(--clr-background-00)), conic-gradient(var(--clr-background-00) 0%, var(--clr-background) 12%, var(--clr-background) 37%, var(--clr-background-75) 75%, var(--clr-background-50) 85%, var(--clr-background-50) 92%, var(--clr-background-00) 100%); background-blend-mode: multiply, normal, multiply; background-repeat: no-repeat, no-repeat, no-repeat; & main { overflow: hidden ; } /* & .intro p { margin: 2rem auto; } */ } @media (hover: hover) { body.Home { background-color: var(--clr-background); background-image: radial-gradient(var(--clr-background), var(--clr-background-00)), conic-gradient(var(--clr-background-00) 0%, var(--clr-background) 12%, rgba(0,0,0,1) 37%, var(--clr-background-75) 75%, var(--clr-background-50) 85%, var(--clr-background-50) 92%, var(--clr-background-00) 100%); background-blend-mode: normal, multiply; background-repeat: no-repeat, no-repeat; } } body.T-TDA { --clr-background: #15241d; --clr-text: #FFFFFF; --clr-text-contrast: #000000; --clr-shadow: rgba(0,0,0,0.75); --clr-border: rgba(255,255,255,0.5); --work-top-margin: inherit; background-image: url(../images/T-AssocRef-bkgd-main-dark.jpg); background-repeat: no-repeat; background-size: 100% auto; background-position: top center; & .hero__right { position: relative; } & .hero__right::after { content: ''; position: absolute; width: 100%; aspect-ratio: 1 / 1; left: 0; top: 0; background-image: url(../images/T-TDA-badge-hero-myname.gif); background-repeat: no-repeat; background-size: cover; background-position: top center; z-index: 100; } & .intro { padding-bottom: 2rem; } & .work { z-index: 1; } & .work__tda-color { position: relative; background-color:#f5f1eb; --clr-text: #183028; /* --clr-button-text: #f5f1eb; --clr-button-background: #38635a; */ /* row-gap: 0; */ /* padding-bottom: 0; */ } & .work__tda-color .h2__simple { margin-bottom: 0; } & .work__tda-24-5 { position: relative; background-color: #224460; /* padding-bottom: 0; */ } & .work__tda-24-5-final { row-gap: 0; padding: 0; } & .work__tda-holiday { background-color: #255c50; /* --clr-button-text: #183028; --clr-button-background: #FFF; */ } & .work__tda-websites-01 { --clr-text: #183028; background-color: #d3d2d3; } & .work__tda-websites-01 .h2__simple { margin-bottom: 0; padding-bottom: 0 } & .work__tda-websites-02 { background-color: #5e98ba; } & .work__tda-websites-02 .h2__simple { margin-bottom: 0; padding-bottom: 0; } & .work__tda-websites-03 { --clr-text: #183028; --clr-underline: #e8983e; background-color: #abd2e7; } & .work__tda-websites-03 p a:visited, .work__tda-websites-03 p a:link { --clr-text: #183028 !important; --clr-underline: #5e98ba !important; color: #183028; } & .work__tda-wps { background-color: #66bcb4; } & .work__tda-tickertape { --clr-text: #183028; background-color:#fff; row-gap: 2rem; } & .work__tda-rapstars { padding: 0; background-image: url(../images/T-TDA-rap-stars-leather.jpg); background-repeat: no-repeat; background-size: cover; background-position: top center; } & .work h2:has(+img) { margin-bottom: 3rem; } } body.T-Holiday { --clr-background: #255c50; /* */ --work__work__two__bkgd-clr: #052119; --clr-shadow: #052119; --clr-text: white; --clr-text-contrast: rgba(0,0,0,0.5); --clr-border: rgba(255,255,255,0.5); --clr-underline: #40a829; --clr-underline-solid: rgba(0,102,85,1); --work-top-margin: inherit; background-image: url(../images/T-Holiday-bkgd-lights-A-ALT.svg), url(../images/T-Holiday-bkgd-lights-B-ALT.svg), url(../images/T-Holiday-bkgd-lights-A-ALT.svg), url(../images/T-Holiday-bkgd-lights-C1-ALT.svg), url(../images/T-Holiday-bkgd-lights-C2-ALT.svg), url(../images/T-Holiday-bkgd-lights-C3-ALT.svg), url(../images/T-Holiday-bkgd-lights-C4-ALT.svg), url(../images/T-Holiday-bkgd-lights-C-dimmerer-ALT.svg), url(../images/T-Holiday-bkgd-lights-D-ALT.svg), url(../images/T-Holiday-bkgd-main.jpg); background-blend-mode: multiply, multiply, normal, multiply, multiply, multiply, multiply, screen, multiply, normal; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-x; background-size: 75% auto, 75% auto, 75% auto, 75% auto, 75% auto, 75% auto, 75% auto, 75% auto, 75% auto, 100% auto; background-position: right top, right top, right top, right top, right top, right top, right top, right top, right top, center top; -webkit-animation: holidaylights 4s infinite; animation: holidaylights 4s infinite; position: relative; z-index: 1; & .work__detail img { border-radius: 1rem; padding-bottom: 0; } } body.S-Schwab { --clr-background: rgba(0,157,219,1); --clr-shadow: rgba(0,31,113,1); --clr-text: white; --clr-text-contrast: rgba(0,0,0,0.5); --clr-border: rgba(255,255,255,0.5); --work-top-margin: inherit; & p { text-wrap-style: pretty; } & ul { margin: 1.5rem 0; } & li { border: unset; padding: 0.5rem 0; font-size: 0.9em; } & li strong { font-weight: 500; } & .work { z-index: 1; } & a { color: var(--clr-text) !important; } & .work__splash { background-color:#FFF; } & .work__appstore { background-image: linear-gradient(to bottom, transparent 10rem, #EAEAEA 40rem); --clr-text: black; /* --clr-underline: #bbdde6; */ --clr-underline: rgba(0,157,219,1); padding-bottom: 8rem; } & .work__appstore .work__onethird__left img, .work__appstore .work__onethird__middle img, .work__appstore .work__onethird__right img, .work__appstore .work__extranarrow img { border-radius: 2rem; } & .work__appstore .work__shadow { box-shadow: 0 20px 80px rgba(0,0,0,0.25); } & .work__appstore .work__subgrid img, .work__reduced-img-size { --clr-shadow: #ccc; } & .work__appstore .work__subgrid img, .work__reduced-img-size img { scale: 75%; /* transform-origin: top center; */ } & .work__appstore .work__subgrid div:first-child img { /* transform-origin: bottom center; */ } & .work__appstore p { max-width: unset; } & .work__appstore .work__extranarrow { margin-bottom: -3rem; } & .work__social-moneywise { --clr-divider: #000000; --clr-text: #000000; --clr-shadow: #444; --clr-underline: rgba(0,157,219,1); background-color: #d9d9d9; /* background-color: #98a4ae; */ row-gap: 5rem; } & .work__social-corporate { --clr-divider: #435664; --clr-text: #FFF; --clr-shadow: #888; --clr-underline: rgba(0,157,219,1); background-color: #425563; row-gap: 5rem; } & .work__social-moneywise .social-post::before { background-image: url(../images/S-Social-MW-header.png), url(../images/S-Social-header-dots.png); } & .work__social-corporate .social-post::before { background-image: url(../images/S-Social-corp-header.png), url(../images/S-Social-header-dots.png); } & .work__social-moneywise h2, .work__social-corporate h2 { margin-bottom: 0; padding-bottom: 0; } & .work__social-moneywise .work__shadowbordersmall::after, .work__social-corporate .work__shadowbordersmall::after { width: 88%; inset: 0 6% 0 6%; } & .social-post { padding: 3rem 1.5rem 0; border-radius: 0 0 0.5rem 0.5rem; /* border: 1px solid coral; */ } & .social-post .social-post-copy { border-radius: 0 0 0.5rem 0.5rem; } & .social-post::before { content: ''; position: absolute; top: 0; display: block; background-position: left top, right top; background-repeat: no-repeat, no-repeat; background-size: contain, contain; background-color: #FFF; width: calc(100% - 3rem); height: 3rem; padding: 0; margin: 0 1.5rem; z-index: 1; border-radius: 0.5rem 0.5rem 0 0; /* border: 1px solid coral; */ } & .work__social-moneywise:has(.work__dividerline-top) { padding-top: 0; } & .work__bluetrust { background-image: linear-gradient(to bottom, #000 0%, #29353d 30%, transparent 100%); } & .work__blueworld { padding-bottom: 8rem; } & .work__blueworld, .work__bluetrust { /* row-gap: 2rem; */ } & .work__blueworld h2, .work__appstore h2, .work__bluetrust h2 { margin-bottom: 0; } & .work__bluetrust h2.h2__sizeup { font-size: 3em; } /* & .work__bluetrust h2, .work__bluetrust p { color: #fff; } & .work__bluetrust p { color: #bbdde3; } */ & #adobe-dc-view-1, #adobe-dc-view-2 { width: 100%; aspect-ratio: 1 / 1; outline: 4px solid #425563; margin-top: 4rem; } } body.B-BigWheel { --clr-background: rgba(214,51,43,1); --clr-text: white; --clr-text-contrast: rgba(0,0,0,0.5); --clr-shadow: #a11400; --clr-border: rgba(255,255,255,0.5); --clr-underline: #e7ad2c; --work-top-margin: inherit; background-image: url(../images/B-BigWheel-bkgd-stripes.png), url(../images/B-BigWheel-bkgd-cubes.png); background-repeat: no-repeat, no-repeat; background-position: top center, bottom left; background-size: auto auto, 1440px auto; /* background-attachment: fixed; */ } body.B-JoeBeyrle { --clr-background: #4d4d4d; --clr-text: white; --clr-text-contrast: rgba(0,0,0,0.5); --clr-shadow: #000000; --clr-border: rgba(255,255,255,0.5); --work-top-margin: inherit; --work__work__two__bkgd-clr: #bf2e1a; background-image: url(../images/B-Joe-Beyrle-bkgd-paratrooper.png), url(../images/B-Joe-Beyrle-bkgd-clouds.jpg); background-repeat: no-repeat, no-repeat; background-position: top -120px right 10%, top center; background-size: auto, 1920px auto; /* background-attachment: fixed; bf2e1a*/ & .intro__center { grid-row-start: 1; grid-row-end: 2; } } body.T-NSCP { --fs-h1: 2.5em; /* --fs-h2: 0.75em; --fs-p: 1.25em; */ --clr-background: #030a14; --clr-text: white; --clr-text-contrast: rgba(0,0,0,0.5); --clr-shadow: #000000; --clr-border: rgba(255,255,255,0.5); --work-top-margin: inherit; --work__work__two__bkgd-clr: #bf2e1a; background-image: url(../images/T-NSCP-2014-bkgd.jpg); background-repeat: no-repeat; background-position: top 8rem center; background-size: 300%; & .intro__center { grid-row-start: 1; grid-row-end: 2; height: 80vh; min-height: 400px; align-content: start; } & .work:first-child { padding-top: 0; } & .nscp-house { margin-bottom: 8rem; } & .nscp-invite-front { z-index: 1; } & .nscp-invite-back { margin-top: -3rem; } & .work__nscp2017 { background-color: #0f2d47; } & .work video { border-radius: 40px; } & .work p { text-align: center; } } body.F-Darkhorse { --clr-background: #f05a28; --work__work__two__bkgd-clr: #231f20; --work__work__three__bkgd-clr: #f4ecda; --clr-text: white; --clr-text-contrast: rgba(0,0,0,0.5); --clr-border: rgba(255,255,255,0.5); --work-top-margin: inherit; /* & .work__expanse { border-bottom: 200px solid var(--work__work__two__bkgd-clr); } */ & .work { padding-bottom: 0; } & .work__one { grid-row-start: 3; } & .work__two { grid-row-start: 4; } & .work__three { grid-row-start: 5; } } body.F-Simply { --clr-background: #2b3990; --work__work__two__bkgd-clr: #231f20; --work__work__three__bkgd-clr: #f4ecda; --clr-text: white; --clr-text-contrast: rgba(0,0,0,0.5); --clr-border: rgba(255,255,255,0.5); --work-top-margin: inherit; background-image: linear-gradient(to bottom, transparent 25%, darkblue 90%), url(../images/F-SimplyFaithful-bkgd-biglogo.png) ; background-blend-mode: multiply, multiply; background-repeat: no-repeat, no-repeat; background-position: top right, top right; background-size: auto, auto; /* background-image: url(../images/F-SimplyFaithful-bkgd-biglogo.png); background-blend-mode: multiply; background-repeat: no-repeat; background-position: top right; background-size: auto; */ /* & .work__expanse { border-bottom: 200px solid var(--work__work__two__bkgd-clr); } */ & .work { padding-bottom: 8rem; } & .work__selected, .work__alternate { padding-bottom: 0; } & .work__alternate { row-gap: 2rem; } } body.F-Plates { --clr-background: #005eb8; --work__work__two__bkgd-clr: #005eb8; --work__work__three__bkgd-clr: #005eb8; --clr-text: white; --clr-text-contrast: rgba(0,0,0,0.5); --clr-border: rgba(255,255,255,0.5); --clr-shadow: #002e5a; --work-top-margin: inherit; --clr-underline: #EAC224; /* & .work__expanse { border-bottom: 200px solid var(--work__work__two__bkgd-clr); } */ & .work { padding-bottom: 0; } & .work__digital { background-image: linear-gradient(to bottom, #005eb8 20%, #001d38 80%); } & .work__plates-logos { background-image: linear-gradient(to bottom, #001d38 30%, #005eb8 100%); padding-bottom: 8rem; } } body.S-Network { --clr-background: #002533; --work__work__two__bkgd-clr: none; --work__work__three__bkgd-clr: #002533; --clr-text: white; --clr-text-contrast: rgba(0,0,0,0.5); --clr-border: rgba(255,255,255,0.5); --clr-divider: #009ddb; --work-top-margin: inherit; & .work { padding-bottom: 0; } & .work__two { padding-bottom: 6rem; background-image: linear-gradient(to bottom, rgba(0, 37, 51, 1) 0%, rgba(0, 37, 51, 0) 50%, rgba(0, 37, 51, 0) 100%), url(../images/S-Network-bkgd-pattern-tile-small-dark.png); background-repeat: no-repeat, repeat; background-position: top center, top center; /* background-size: 10% auto; */ /* background-attachment: fixed; */ } & .work p { text-align: center; } } body.A-Illustration { --clr-background: #2a0000; --clr-text: white; --clr-text-contrast: rgba(0,0,0,0.5); --clr-border: rgba(255,255,255,0.5); --work-top-margin: inherit; & .intro { padding-bottom: 6rem; } & .work__watertower { background-image: url(../images/F-Illustration-watertower-clouds.png), url(../images/F-Illustration-watertower-sky.png); background-repeat: no-repeat, no-repeat; background-size: cover, cover; background-position: center bottom, center bottom; } & .work__bornbarn { background-color:#354F60; } & .work__blue { background-color: rgba(0,157,219,1); } & .work__garnick { background-image: radial-gradient( rgba(187,185,182,0) 0%, rgba(187,185,182,0) 30%, rgba(187,185,182,1) ); background-blend-mode: multiply; background-size: cover; background-color:#BBB9B6; } & .work__openlate { position: relative; background-image: url(../images/T-Illustration-open-late-sky.png); background-repeat: no-repeat; background-size: cover; background-position: center center; } & .work__openlate::after { content: ''; position: absolute; width: 100%; height: 100%; z-index: 100; background-image: url(../images/T-Illustration-open-late-noise.png); background-repeat: repeat; background-size: auto; background-position: left top; opacity: 75%; mix-blend-mode:hard-light; } & .work__investne { background-color:#aedee4; background-image: url(../images/F-Illustration-invest-ne-cloud1.png), url(../images/F-Illustration-invest-ne-cloud2.png), url(../images/F-Illustration-invest-ne-cloud3.png); background-repeat: no-repeat, no-repeat, no-repeat; background-size: contain, contain, contain; background-position: left top, right top, center bottom; } & .work__holidayyou { background-color:#43B049; } & .work__holidaywinterful { background-color:#FFFFFF; } & .work__methodist { background-color:#009FCC; } & .work__grace { background-color:#a51e22; padding: 6rem 0 !important; } & .work__grace-believe { background-color:#000; } & .work__grace-window { background-color:#000; } & .work__socialbbq { background-image: linear-gradient(to right, #FFBB33 0%, #FFBB33 50%, #E1B5B1 50%, #E1B5B1 100%); } & .work__liedlodge { background-color:#FFFFFF; } & .work__elevenyears { background-image: linear-gradient(to bottom, #f05a28 0%, #f05a28 25%, #1b75bb 25%, #1b75bb 50%, #009345 50%, #009345 75%, #f8cf00 75%, #f8cf00 100%); } & .work__nscp2015 { background-color: gray; } & .work { padding: 0; margin: 0 2rem 2rem 2rem; } } body.A-Motion { background-color: #283a3b; --clr-text: white; --clr-border: rgba(255,255,255,0.5); & video { width: 100%; } & .intro__left { z-index: 100; } & .hero__right { position: relative; } & .hero__right::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; background-image: radial-gradient(transparent 20%, #283a3b 70%); aspect-ratio: 1 / 1; } & .work__stpat { background-color: #00a7e0; margin-top: 8rem; padding: 0; z-index: 1; } & .work__stpat .work__twothird__left { position: relative; } & .work__stpat .work__twothird__left::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; background-image: linear-gradient(to right, #00a7e0 0%, transparent 20%, transparent 80%, #00a7e0 100%); aspect-ratio: 1 / 1; } & .work__freed-to-move { background-color: gray; /* padding: 0; */ background-image: url(../images/F-anim-freed-to-bkgd.jpg); background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; } & .work__happy-holidays { background-color: #FFF; } & .work__crypto { position: relative; background-color: #40a829; padding-bottom: 10rem; } & .work__crypto .work__narrow { box-shadow: 0 0 80px #255c50; } & .work__crypto .work__narrow::after { content: ''; position: absolute; background-image: linear-gradient(to bottom, white 20%, transparent); top: 100%; left: 0; width: 100%; height: 100px; z-index: 100; } & .work__fathers-day { position: relative; background-color: #000; z-index: 1; /* -webkit-animation: fathersdaybkgd 22s infinite; */ /* animation: fathersdaybkgd 22s infinite; */ } & .work__fathers-day { background-color: #254164; } & .work__fathers-day .work__extranarrow { z-index: 1; } & .work__fathers-day-bkgd { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; border: 2px solid green; } & .work__fathers-day-bkgd video { object-fit: fill; width: 100%; height: 100%; } & .work__presidents { background-color: var(--clr-background); /* background-image: url(../images/T-Anim-studio1-house-bkgd.jpg); */ background-repeat: no-repeat; background-size: cover; background-position: center top; } & .work__presidents p { text-align: center; } & .work__studio-house { background-color: #000; background-image: url(../images/T-Anim-studio1-house-bkgd.jpg); background-repeat: no-repeat; background-size: cover; background-position: center top; } } body.A-Logos { --clr-background: #00002a; --work__work__two__bkgd-clr: #FFF; /* watertower */ --work__work__three__bkgd-clr: #354F60; /* barn */ --work__work__four__bkgd-clr: #BBB9B6; /* garnick */ --work__work__five__bkgd-clr: #43B049; /* open late */ --work__work__six__bkgd-clr: #43B049; /* holiday you */ --work__work__seven__bkgd-clr: #009FCC; /* methodist */ --work__work__eight__bkgd-clr: #FFF; /* bbq */ --work__work__nine__bkgd-clr: #FFF; /* lied */ --work__work__ten__bkgd-clr: #FFF; /* eleven */ --clr-text: white; --clr-text-contrast: rgba(0,0,0,0.5); --clr-border: rgba(255,255,255,0.5); --work-top-margin: inherit; & .intro { padding-bottom: 6rem; } & .work__logos-simply { --clr-text: white; --clr-underline: #e8983e; background-color: #2B3990; } & .work__logos-darkhorse { background-color: #f05a28; /* padding: 6rem; */ /* background-image: linear-gradient(to bottom, #f8f4e3 0%, #f8f4e3 50%, #f05a28 50%, #f05a28 100%); */ } & .work__logos-darkhorse .work__colorbars { background-image: linear-gradient(to right, #231f20 20%, #f8751d 20%, #f8751d 40%, #e5411b 40%, #e5411b 60%, #eadbbe 60%, #eadbbe 80%, #f4ecda 80%); height: 2rem; } & .work__logos-pandas { background-color: #80d4ce; } & .work__logos-pandas .work__rounded { border: 0.5rem solid #013a2e; } & .work__logos-network { --clr-text: white; --clr-underline: #009ddb; background-color: #002533; } & .work__logos-dave { background-color: #b0c4cf; } & .work__logos-grace { background-color: #f8f4e3; } & .work__logos-kaspar { background-color: #2a4816; } & .work__logos-kaspar .work__colorbars { background-image: linear-gradient(to right, #91ac3d 33.33%, #ccbda0 33.33%, #ccbda0 66.66%, #282215 66.66%); height: 2rem; } & .work__logos-slipstreem { background-color: #FFF; } & .work__logos-plates { background-color: #002e5a; --clr-text: white; --clr-underline: #f0cd00; } & .work__logos-bigwheel { background-color: rgba(214,51,43,1); --clr-text: white; --clr-underline: #e7ad2c; } & .work__logos-amt-ta { background-image: linear-gradient(to bottom, #8dc63f 0%, #8dc63f 50%, #85210d 50%, #85210d 100%); row-gap: 12rem; } & .work__logos-crosses { background-image: linear-gradient(to bottom, #440400 0%, #440400 50%, #dbe7e3 50%, #dbe7e3 100%); row-gap: 12rem; } & .work__logos-pups-lc { background-image: linear-gradient(to bottom, #ff0000 0%, #ff0000 50%, #b90823 50%, #b90823 100%); row-gap: 12rem; } & .work__logos-east-nama { background-image: linear-gradient(to bottom, #fecf49 0%, #fecf49 50%, #d0eef4 50%, #d0eef4 100%); row-gap: 12rem; } & .work__rounded { border-radius: 40px; } & .carousel__navigation { position: absolute; height: 3rem; right: 0; bottom: -3rem; left: 0; text-align: center; overflow: hidden; align-content: center; } & .carousel__navigation-list, .carousel__navigation-item { display: inline-block; top: 0; padding-top: 0; } & .carousel__navigation-button { display: inline-block; width: 1.5rem; height: 1.5rem; background-color: rgba(0,0,0,0.25); background-clip: content-box; border-radius: 0; font-size: 0; transition: transform 0.1s; border: 0; top: 0; overflow: hidden; } & .work__logos-01 { background-image: linear-gradient(to bottom, #2B3990 0%, #2B3990 50%, #ADDDF4 50%, #ADDDF4 100%); } & .work__logos-02 { background-image: linear-gradient(to bottom, #f8f4e3 0%, #f8f4e3 50%, #f05a28 50%, #f05a28 100%); } & .work__logos-03 { background-image: linear-gradient(to bottom, #002533 0%, #002533 50%, #85210d 50%, #85210d 100%); } & .work__logos-04 { background-image: linear-gradient(to bottom, #8dc63f 0%, #8dc63f 50%, #85210d 50%, #85210d 100%); } & .work__logos-05 { background-image: linear-gradient(to bottom, #ff0000 0%, #ff0000 50%, #b0c4cf 50%, #b0c4cf 100%); } & .work__logos-06 { background-image: linear-gradient(to bottom, #440400 0%, #440400 50%, #dbe7e3 50%, #dbe7e3 100%); } & .work__logos-07 { background-image: linear-gradient(to bottom, #dbe7e3 0%, #dbe7e3 50%, #b90823 50%, #b90823 100%); } & .work__logos-08 { background-image: linear-gradient(to bottom, #fecf49 0%, #fecf49 50%, #d0eef4 50%, #d0eef4 100%); } & .work__logos-09 { background-image: linear-gradient(to bottom, #002e5a 0%, #002e5a 50%, rgba(214,51,43,1) 50%, rgba(214,51,43,1) 100%); } & .work__logos-10 { background-image: linear-gradient(to bottom, #fff 0%, #fff 50%, #dde6cc 50%, #dde6cc 100%); } & .work { /* padding: 0; */ /* row-gap: 0; */ } } @media (hover: none) { #safari-menu { position: absolute; display: block; opacity: 1; top: 0; right: 0; } .site-header { position: static; } .header__menu, .header__menu::after { opacity: 0 !important; display: none !important; } header #safari-menu:hover { opacity: 0; } footer { /* height: 100vh; padding-top: 20vh; */ } footer .footer__signoff { bottom: 0; } body.About { background-image: none !important; } header.stuck::after { display: none; opacity: 0 !important; } .contact-modal[open] { & form *:not(:last-child) { margin-bottom: 1.5rem !important; } } } body.A-Digital { --clr-background: #2e4444; --clr-text: white; --clr-text-contrast: rgba(0,0,0,1); --clr-border: rgba(255,255,255,0.5); --clr-shadow: black; --work-top-margin: inherit; & .intro { padding-bottom: 1rem; } & .work__digital { position: relative; row-gap: 0; padding: 3rem 0; } & .work__uwm .work__right { margin-top: 3rem; margin-bottom: -3rem; } & .work__tda-color { background-color:#f5f1eb; /* --clr-button-text: #f5f1eb; --clr-button-background: #38635a; */ } & .work__tda-color .h2__simple { margin-bottom: 0; color: var(--clr-text-contrast); } & .work p { text-align: center; margin: 3rem auto 0 auto; font-size: 1.125em; line-height: 2em; text-wrap: balance; } & .boxed, .h2__simple{ margin-bottom: 3rem; } & .work__digital-meta { padding-top: 3rem; } & .work__digital-meta button { margin-top: 0; } & .work__left-wide, .work__right-wide { height: 80% !important; } } body.About { --clr-background: #777777; --clr-text: #FFFFFF; --clr-text-contrast: #000000; --clr-border: rgba(255,255,255,0.5); background-image: url(../images/T-About-bkgd-noise.gif); background-blend-mode: multiply; background-repeat: repeat; background-size: auto; background-position: center center; & .profilepic { align-content: center; position: relative; } & .profilepic img { width: 60%; margin: 0 auto; border-radius: 1000vh; border: 20px solid rgba(0, 0, 0, 0.25); aspect-ratio: 1/1; } & main { min-height: 60vh; margin-bottom: 10rem; } } body.Contact-Success { --clr-text: #FFFFFF; --clr-text-contrast: #000000; --clr-border: rgba(255,255,255,0.5); background-color: var(--clr-background); background-image: linear-gradient(var(--clr-background-00), var(--clr-background) 100vh), radial-gradient(var(--clr-background), var(--clr-background-00)), conic-gradient(var(--clr-background-00) 0%, var(--clr-background) 12%, var(--clr-background) 37%, var(--clr-background-75) 75%, var(--clr-background-50) 85%, var(--clr-background-50) 92%, var(--clr-background-00) 100%); background-blend-mode: multiply, normal, multiply; background-repeat: no-repeat, no-repeat, no-repeat; & .intro p { margin: 2rem auto; } & .work { padding-top: 0; grid-row-start: 3; min-height: 50vh; } & .work a, .work p, .work p a, .work div { text-align: left; margin-left: 0; } button.linkto, button.linkto:visited { color: var(--clr-button-background); background-color: var(--clr-underline-solid); border: none; } button.linkto:hover, button.linkto:focus { color: var(--clr-underline-solid); background-color: var(--clr-button-background); border: none; } } /* H E A D E R */ header { display: grid; grid-template-columns: 20px 36px 1fr; position: sticky; padding: 3rem 3rem 4rem 3rem; top: 0; z-index: 4444; overflow: visible; } header::after { content: ''; position: absolute; top: 0; left: 2rem; width: calc((56px) + (2rem)); height: calc((28px) + (6rem)); background-color: rgba(0,0,0,0.4); z-index: -1; opacity: 0; transition: 500ms; } header:has(.header__menu:hover)::after { opacity: 1.0 !important; width: calc((56px) + (2rem) + (3 * var(--menu__item-width))); } header:has(.header__menu:hover) a.logo { opacity: 0.5; } header.stuck::after { opacity: 1.0 !important; } header.stuck { width: calc((56px) + (6rem)); } header.stuck .header__menu svg .header__menu-line-1, header.stuck .header__menu svg .header__menu-line-2, header.stuck .header__menu svg .header__menu-line-3, header.stuck .header__menu svg .header__menu-line-4 { opacity: 0.5 !important; } header.stuck:hover .header__menu:hover svg .header__menu-line-1, header.stuck:hover .header__menu:hover svg .header__menu-line-2, header.stuck:hover .header__menu:hover svg .header__menu-line-3, header.stuck:hover .header__menu:hover svg .header__menu-line-4 { opacity: 1.0 !important; } header a { display: block; width: 36px; } header a.logo { position: relative; fill: var(--clr-text); transition: 500ms; } header a.logo::after { content: ''; position: absolute; top: -3rem; left: -1rem; width: calc((36px) + (1rem)); height: calc((28px) + (6rem)); transition: 500ms; } header .header__menu { position: absolute; display: block; top: 0; left: calc((20px) + (3rem)); width: calc((36px) + (1rem)); height: calc((28px) + (6rem)); padding-top: 3rem; fill: var(--clr-text); overflow: hidden; transition: 500ms; } header #safari-menu { position: absolute; display: none; top: 0; /* left: calc((20px) + (3rem)); */ left: 0; width: 52px; height: 124px; background: url(../images/CT-menu-static.png) left top no-repeat; background-size: auto 100%; opacity: 0.5; } header #safari-menu:hover { opacity: 1; } header .header__menu:hover { width: calc((40px) + (1rem) + (3 * var(--menu__item-width))); } header .header__menu a, header .header__menu button { color: var(--clr-text); text-decoration: none; font-size: var(--fs-h2); font-weight: 300; text-transform: uppercase; letter-spacing: 0.25ch; position: absolute; display: block; top: 0; width: var(--menu__item-width); height: calc((28px) + (6rem)); background-color: transparent; place-content: center; padding: 1rem; text-align: center; } header .header__menu a.menu_about { left: calc((36px) + (1rem)); } header .header__menu button.menu_contact { left: calc((36px) + (1rem) + (var(--menu__item-width))); } header .header__menu a.menu_work { left: calc((36px) + (1rem) + (2 *(var(--menu__item-width)))); } header .header__menu button { transition: none; border: none; } header .header__menu a:hover, header .header__menu button:hover { background-color: rgba(0,0,0,1); } header .header__menu svg { content: ''; position: absolute; overflow: visible; transition: 111ms ease 555ms; } header:hover .header__menu svg .header__menu-line-1, header:hover .header__menu svg .header__menu-line-2, header:hover .header__menu svg .header__menu-line-3, header:hover .header__menu svg .header__menu-line-4 { transition: 500ms; } header:hover .header__menu:hover svg .header__menu-line-1, header:hover .header__menu:hover svg .header__menu-line-2, header:hover .header__menu:hover svg .header__menu-line-3, header:hover .header__menu:hover svg .header__menu-line-4 { opacity: 1.0 !important; } header.stuck .header__menu svg .header__menu-line-1, header.stuck:hover .header__menu svg .header__menu-line-1 { animation: none; d: path("m 16 0 h 20 v 4 h -20 z"); transition: 500ms; } header.stuck .header__menu svg .header__menu-line-2, header.stuck:hover .header__menu svg .header__menu-line-2 { animation: none; d: path("m 16 0 h 20 v 4 h -20 z"); transition: 500ms; } header.stuck .header__menu svg .header__menu-line-3, header.stuck:hover .header__menu svg .header__menu-line-3 { animation: none; d: path("m 16 0 h 20 v 4 h -20 z"); transition: 500ms; } header.stuck .header__menu svg .header__menu-line-4, header.stuck:hover .header__menu svg .header__menu-line-4 { animation: none; d: path("m 16 0 h 20 v 4 h -20 z"); transition: 500ms; } header .header__menu svg .header__menu-line-1 { animation: hide 1s ease forwards; } header:hover .header__menu svg .header__menu-line-1 { animation: show 0.5s ease forwards; } header .header__menu svg .header__menu-line-2 { animation: hide 1s ease forwards; translate: 0 8px; } header:hover .header__menu svg .header__menu-line-2 { animation: show 0.5s ease 0.06s forwards; } header .header__menu svg .header__menu-line-3 { animation: hide 1s ease forwards; translate: 0 16px; } header:hover .header__menu svg .header__menu-line-3 { animation: show 0.5s ease 0.04s forwards; } header .header__menu svg .header__menu-line-4 { animation: hide 1s ease forwards; translate: 0 24px; } header:hover .header__menu svg .header__menu-line-4 { animation: show 0.5s ease 0.1s forwards; } @keyframes show { 0% {d: path("m 0 0 h 0 v 4 h 0 z");} 50% {d: path("m 0 0 h 36 v 4 h -36 z");} 60% {d: path("m 16 0 h 20 v 4 h -20 z"); opacity: 1;} 100% {d: path("m 16 0 h 20 v 4 h -20 z"); opacity: var(--menu__icon-opacity);} } @keyframes hide { 0% {d: path("m 16 0 h 20 v 4 h -20 z"); opacity: var(--menu__icon-opacity);} 62.5% {d: path("m 16 0 h 20 v 4 h -20 z"); opacity: var(--menu__icon-opacity);} 75% {d: path("m 0 0 h 36 v 4 h -36 z"); opacity: 1;} 100% {d: path("m 0 0 h 0 v 4 h 0 z"); opacity: 1;} } /* M A I N */ main { display: grid; grid-template-columns: [morbid-start] 1rem [obese-start] 1fr [fat-start] 1fr [healthy-start] 1fr [skinny-start] 1fr [midpoint] 1fr [skinny-end] 1fr [healthy-end] 1fr [fat-end] 1fr [obese-end] 1rem [morbid-end]; column-gap: 2rem; row-gap: 0; max-width: 1920px; /* min-height: 120vh; */ margin: 0 auto; place-content: start; } h1 { position: relative; font-size: var(--fs-h1); line-height: 1em; font-weight: 800; hyphens: manual; /* border: 3px solid purple; */ } h2 { position: relative; color: var(--clr-text); padding: 1ch 0; font-size: var(--fs-h2); font-weight: 300; text-transform: uppercase; letter-spacing: 0.25ch; text-wrap: balance; /* border-top: 1px solid var(--clr-border); border-bottom: 1px solid var(--clr-border); */ margin: 2rem 0; opacity: var(--clr-text-opacity); /* border: 3px solid purple; */ & a { text-decoration: none; } & span { color: var(--clr-text); } } h2::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-image: linear-gradient(to right, var(--clr-border) 0%, var(--clr-border) 35%, var(--clr-border) 65%, rgba(0,0,0,0) 100%); } h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-image: linear-gradient(to right, var(--clr-border) 0%, var(--clr-border) 35%, var(--clr-border) 65%, rgba(0,0,0,0) 100%); } h2.boxed { color: #FFF; margin: 0 auto; /* background-color: rgba(0,0,0,0.5); */ background-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 15%, rgba(0,0,0,0.5) 85%, rgba(0,0,0,0) 100%); width: 100%; padding: 20px 30px; opacity: 1; text-align: center; } h2.boxed::before, h2.boxed::after, h2.h2__simple::before, h2.h2__simple::after { display: none; } h2.h2__simple { color: var(--clr-text); text-transform: unset; letter-spacing: unset; font-size: var(--fs-h2-simple); font-weight: 600; opacity: 1; margin-top: 0; /* border-bottom: 1px solid #FFF5; */ } h3 { font-size: 2em; font-weight: 800; } ul { margin: 1.5rem 0; list-style-type: none; font-size: 1.25em; font-weight: 100; /* border: 1px solid red; */ } li { padding: 1rem 0 1rem 0; /* width: 50%; float: left; */ border-bottom: 1px solid var(--clr-border); } li:first-child { border-top: 1px solid var(--clr-border); } p { color: var(--clr-text); font-size: var(--fs-p); line-height: 1.8em; font-weight: 100; text-wrap: pretty; margin-bottom: 1em; /* border: 3px solid purple; */ } p a:link, p a:visited { color: #FFF; text-decoration-thickness: 4px; text-decoration-color: var(--clr-underline); text-decoration-style: solid; text-underline-offset: 0.3em; transition: 150ms ease; } p a:hover, p a:active { color: #FFF; /* background-color: var(--clr-underline-solid); */ text-decoration-thickness: 0.3em; text-decoration-color: var(--clr-text); text-decoration-style: solid; text-underline-offset: 0.3em; } .work__textleft { text-align: left !important; } .work__textcenter { text-align: center !important; } a.disguised { --clr-underline-solid: rgba(0,0,0,0); text-decoration: none; } del { opacity: 0.25; } button { cursor: pointer; } main button { position: relative; color: var(--clr-button-text); background-color: var(--clr-button-background); padding: 1ch 5px; font-size: var(--fs-h2); font-weight: 300; /* border: 4px solid var(--clr-button-background); */ transition: 150ms ease; /* margin: 2rem 0; */ /* border-radius: 100vh; */ } button.linkto { color: var(--clr-button-text); background-color: var(--clr-button-background); font-weight: 500; margin-top: 3rem; /* border: 2px solid #FFF; */ padding: 15px 35px; border-radius: 1000vh; /* border: 1px solid var(--clr-underline-solid); */ border: none; box-shadow: 0 8px 4px rgba(0,0,0,0.25), 0 8px 80px rgba(0,0,0,0.75); } button.linkto:hover, button.linkto:focus { color: var(--clr-button-background); background-color: var(--clr-button-text); border: none; } em { font-style: italic; } /* I N T R O */ .intro { display: block; /* CHANGING THIS TO GRID CAUSES ISSUES */ row-gap: 1.5rem; place-content: center; /* grid-row-start: 2; */ grid-column: obese; margin-top: 2rem; } .intro__home { grid-row-start: 1; margin: 2rem 0 0 0; } .intro__home p { margin: 2rem 0; padding-left: 2px; } .intro__left { margin-top: 6rem; text-align: left; & p { padding-left: 2px; } } .intro__left h1 { position: relative; left: -2px; } .intro__center { margin-top: 6rem; } .intro__center h2::before, .intro__center h2::after { background-image: linear-gradient(to right, var(--clr-border) 0%, var(--clr-border) 35%, var(--clr-border) 65%, rgba(0,0,0,0) 100%); } .work h2::before, .work h2::after { /* background-image: linear-gradient(to right, rgba(0,0,0,0) 0%, var(--clr-border) 35%, var(--clr-border) 65%, rgba(0,0,0,0) 100%); */ background-color: var(--clr-border); } .work p { text-align: center; margin: 3rem auto 0 auto; font-size: 1.125em; line-height: 2em; text-wrap: balance; } .intro__center p { margin: 0 auto; } .intro p:not(p:first-of-type) { /* margin-right: 0; */ } .intro__center-simple { grid-row-start: 1 !important; grid-row-end: 2 !important; margin-top: 0rem !important; } .hero { width:80%; grid-row-start: 1; grid-row-end: 2; margin-top: calc((7rem + 28px) * -1); margin-bottom: calc((7rem + 28px) * -1); place-content: center; overflow-x: visible; grid-column: obese; place-content: start; margin-left: auto; margin-right: auto; & img { object-fit: cover; } } .hero__center { width:80%; grid-column: obese; margin-top: calc((7rem + 28px) * -1); margin-bottom: calc((7rem + 28px) * -1); /* border: 1px solid yellow; */ } .work { display: grid; row-gap: 4rem; grid-template-columns: subgrid; margin-top: var(--work-top-margin); grid-column: morbid; padding: 6rem 0; } .work__pattern-feature { height: 36rem; } /***** removed grid-row-start(s) for all the .work / .work__two / etc. classes here ==== so far so good */ /****** HI. JUST WANT YOU TO KNOW... IF I WERE STARTING OVER, I WOULD HANDLE ALL THESE .WORK CLASSES DIFFERENTLY I'M THINKING CLASSES FOR THE COLUMN SPANS/STARTS/ENDS HMMMM ... WOULD THAT BE BETTER? ******/ .work__expanse { position: relative; grid-column: morbid; height: fit-content; } .work__expanse.bwbgame { overflow: hidden; & img { position: relative; left: calc(((720px - 100vw) / 2) * -1); min-width: 720px; } } .work__extrawide { display: grid; position: relative; grid-column: obese; height: fit-content; } .work__wide { display: grid; position: relative; grid-column: morbid; margin: 0; height: fit-content; } .work__full { display: grid; position: relative; grid-column: obese; text-align: center; height: fit-content; } .work__narrow { display: grid; position: relative; grid-column: obese; height: fit-content; } .work__extranarrow { display: grid; position: relative; grid-column: obese; height: fit-content; } .work__left { display: grid; position: relative; grid-column-start: var(--work__left-start); grid-column-end: var(--work__left-end); height: fit-content; /* background-color: rgba(0,0,0,0.25); */ } .work__right { display: grid; position: relative; grid-column-start: var(--work__right-start); grid-column-end: var(--work__right-end); height: fit-content; /* background-color: rgba(0,0,0,0.25); */ } .work__left-narrow { display: grid; position: relative; grid-column-start: var(--work__left-narrow-start); grid-column-end: var(--work__left-narrow-end); height: fit-content; /* background-color: rgba(0,0,0,0.25); */ } .work__right-narrow { display: grid; position: relative; grid-column-start: var(--work__right-narrow-start); grid-column-end: var(--work__right-narrow-end); height: fit-content; /* background-color: rgba(0,0,0,0.25); */ } .work__left-wide { display: grid; position: relative; grid-column-start: var(--work__left-wide-start); grid-column-end: var(--work__left-wide-end); height: fit-content; /* background-color: rgba(0,0,0,0.25); */ } .work__right-wide { display: grid; position: relative; grid-column-start: var(--work__right-wide-start); grid-column-end: var(--work__right-wide-end); height: fit-content; /* background-color: rgba(0,0,0,0.25); */ } .work__onethird__left { display: grid; position: relative; grid-column-start: var(--work__onethird__left-start); grid-column-end: var(--work__onethird__left-end); height: fit-content; /* background-color: rgba(0,0,0,0.25); */ } .work__onethird__middle { display: grid; position: relative; grid-column-start: var(--work__onethird__middle-start); grid-column-end: var(--work__onethird__middle-end); height: fit-content; /* background-color: rgba(0,0,0,0.25); */ } .work__onethird__right { display: grid; position: relative; grid-column-start: var(--work__onethird__right-start); grid-column-end: var(--work__onethird__right-end); height: fit-content; /* background-color: rgba(0,0,0,0.25); */ } .work__twothird__left { display: grid; position: relative; grid-column-start: var(--work__twothird__left-start); grid-column-end: var(--work__twothird__left-end); height: fit-content; /* background-color: rgba(0,0,0,0.25); */ } .work__twothird__right { display: grid; position: relative; grid-column-start: var(--work__twothird__right-start); grid-column-end: var(--work__twothird__right-end); height: fit-content; /* background-color: rgba(0,0,0,0.25); */ } .work__detail img { /* border-radius: 1rem; */ /* border: 2px solid var(--clr-text-contrast); */ } .work__desktop { display: none; } .work__mobile { display: block; } div.work__topmargin { margin-top: 2ch; } .work__topmarginnone { margin-top: 0 !important; } div.work__topmarginsmall { margin-top: 1rem; } div.work__topmarginlarge { margin-top: 3rem; } div.work__bottommargin { margin-bottom: 2rem; } div.work__bottommarginsmall { margin-bottom: 1rem; } div.work__bottommarginlarge { margin-bottom: 3rem; } .work__toppaddingnone { padding-top: 0 !important; } div.work__bottompaddinglarge { margin-bottom: 8rem; } div.work__gutterlarge-left { padding-left: 0rem; } div.work__gutterlarge-right { padding-right: 0rem; } div.work__guttersmall-left { padding-left: 0rem; } div.work__guttersmall-right { padding-right: 0rem; } .work__shadow { box-shadow: 0 20px 80px rgba(0,0,0,0.5), 0 0 40px rgba(0,0,0,0.7); /* box-shadow: 0px 20px var(--work__column__psuedoshadowblur__standard) var(--clr-shadow); */ } .work__shadow-alt { box-shadow: 0 20px 20px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.7); } .work__fadeout { mask-image: linear-gradient(black 80%, transparent); /* MAKE THIS A CUSTOM PROPERTY ??? */ } .work__shadow:has(.work__fadeout)::after { height: 80% !important; /* FIX !!! NEED TO TARGET THE PARENT (WORKSHADOW) BASED ON CHILD IMAGE (WORKFADEOUT) */ } .work__shadowborder:has(.work__fadeout)::after { height: 80% !important; /* FIX !!! NEED TO TARGET THE PARENT (WORKSHADOW) BASED ON CHILD IMAGE (WORKFADEOUT) */ } .work__dividerline-top { border-top: 1px solid var(--clr-divider); padding: 4rem 0 0 0; } .work__dividerline-bottom { border-bottom: 1px solid var(--clr-divider); padding: 0 0 8rem 0; } .work__shadowborder { position: relative; } .work__shadowborder::after { content: ''; position: absolute; filter: blur(var(--work__column__psuedoshadowblur__standard)); top: 5%; left: 0; width: 100%; height: 100%; /* IF SET TO LESS THAN 100% -- ONLY FOR ITEMS THAT FADE OUT ON BOTTOM */ z-index: -1; border: var(--work__column__psuedoshadow__standard) solid var(--clr-shadow); overflow: visible; mix-blend-mode: multiply; } .work__shadowbordersmall { position: relative; } .work__shadowbordersmall::after { content: ''; position: absolute; filter: blur(var(--work__column__psuedoshadowblur__small)); top: 0; left: 0; width: 100%; height: 100%; z-index: -1; border: var(--work__column__psuedoshadow__small) solid var(--clr-shadow); overflow: visible; mix-blend-mode: multiply; } .work__rotate-counterclock-2 { transform: rotate(-2deg); } .work__rotate-clock-2 { transform: rotate(2deg); } .work__rotate-counterclock-7 { transform: rotate(-7deg); } .work__rotate-clock-7 { transform: rotate(7deg); } .work__rotate-counterclock-10 { transform: rotate(-10deg); } .work__rotate-clock-10 { transform: rotate(10deg); } .work__digitalscrollfull { position: relative; } .work__digitalscrollfull div.screenframed { position: relative; height: 100%; aspect-ratio: 1280 / 860; overflow: scroll; border-top: clamp(10px, 1vw, 20px) solid black; border-left: clamp(10px, 1vw, 20px) solid black; border-right: clamp(10px, 1vw, 20px) solid black; border-bottom: clamp(10px, 1vw, 20px) solid black; border-radius: clamp(15px, 1.5vw, 30px); box-shadow: 0 0 0 2px #888, 0 8px 8px #000, 0 20px 80px #000; } /* .work__digitalscrollfull div.screenframed::-webkit-scrollbar { background-color: transparent; } */ .work__digitalscrollfull div.screenframed-mobile { position: relative; height: 80%; margin: 0 0 0 auto; align-self: end; aspect-ratio: 1 / 2; overflow: scroll; border-top: clamp(5px, 0.5vw, 10px) solid black; border-left: clamp(5px, 0.5vw, 10px) solid black; border-right: clamp(5px, 0.5vw, 10px) solid black; border-bottom: clamp(5px, 0.5vw, 10px) solid black; border-radius: clamp(20px, 2vw, 40px); box-shadow: 0 0 0 2px #888, 0 8px 8px #000, 0 20px 80px #000; } div.socialpost { align-self: center; } div.socialpost img { position: relative; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); } .work__sidescroller { /* height: 1000px; */ overflow: hidden; position: relative; width: 100%; display: flex; align-items: center; padding: 2rem 0 4rem; } /* .work__sidescroller:before, .work__sidescroller:after { content: ""; position: absolute; height: 1000px; width: 364px; z-index: 2; } .work__sidescroller:after { right: 0; top: 0; transform: rotateZ(180deg); } .work__sidescroller:before { left: 0; top: 0; } */ .work__sidescroller .work__sidescroller__track { display: flex; width: calc(320px * 24); animation: sidescroll 60s linear infinite; } .work__sidescroller .work__sidescroller__item { width: 320px; padding: 0 18px; } .work__sidescroller .work__sidescroller__item img { height: auto; border-radius: 5px; box-shadow: 0 10px 40px #001d38; } @keyframes sidescroll { from { transform: translateX(0); } to { transform: translateX(calc(-320px * 12)); } } /* this may not be necessary */ div.work img { width: 100% } @keyframes fathersdaybkgd { 0% { background-color: #446ca5; } 18.2% { background-color: #446ca5; } 19.5% { background-color: #fff3e2; } 36.4% { background-color: #fff3e2; } 37.8% { background-color: #7b984a; } 54.6% { background-color: #7b984a; } 56% { background-color: #efd9d5; } 70.8% { background-color: #efd9d5; } 72.3% { background-color: #446ca5; } 100% { background-color: #446ca5; } } @keyframes holidaylights { 0% { /* A B B C1 C2 C3 C4 C-dim D panelling */ background-blend-mode: multiply, multiply, normal, screen, darken, darken, darken, normal, multiply, normal; } 12.5% { background-blend-mode: multiply, multiply, normal, darken, screen, darken, darken, normal, multiply, normal; } 25% { background-blend-mode: multiply, multiply, normal, darken, darken, screen, darken, normal, multiply, normal; } 37.5% { background-blend-mode: multiply, multiply, normal, darken, darken, darken, screen, normal, multiply, normal; } 50% { background-blend-mode: multiply, multiply, normal, screen, darken, darken, darken, normal, multiply, normal; } 62.5% { background-blend-mode: multiply, multiply, normal, darken, screen, darken, darken, normal, multiply, normal; } 75% { background-blend-mode: multiply, multiply, normal, darken, darken, screen, darken, normal, multiply, normal; } 87.5% { background-blend-mode: multiply, multiply, normal, darken, darken, darken, screen, normal, multiply, normal; } 100% { background-blend-mode: multiply, multiply, normal, screen, darken, darken, darken, normal, multiply, normal; } } .video-bkgd { position: absolute; min-width: 100%; min-height: 100%; object-fit: cover; z-index: -1; mix-blend-mode:color-burn; opacity: 1; } /* MOBILE FOOTER */ footer { display: grid; grid-template-columns: 50% 50%; /* NEW */ grid-template-rows: 1fr auto; width: 100%; background-image: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.5)); margin: 0 auto 0 auto; padding: 0; /* NEW */ max-width: 1920px; color: rgba(255,255,255,0.5); } .footer__next, .footer__prev { /* NEW */ position: relative; color: var(--clr-text); text-decoration: none; text-align: right; } .footer__next { /* NEW */ text-align: right; } .footer__prev { /* NEW */ text-align: left; } .footer__next a:link, .footer__prev a:link, .footer__next a:visited, .footer__prev a:visited { /* NEW */ position: relative; height: 100%; text-decoration: none; display: block; padding: 3rem 3rem; background-color: rgba(0,0,0,0.35); transition: 150ms ease; } .footer__next a:link, .footer__next a:visited { /* NEW */ padding: 3rem 3rem 3rem 0; } .footer__prev a:link, .footer__prev a:visited { /* NEW */ padding: 3rem 0 3rem 3rem; } .footer__next a:link::before { content: ''; position: absolute; display: block; right: 0; top: 0; width: 3rem; height: 100%; align-content: center; opacity: 0.25; background-image: url(/assets/images/CT-arrow-next.png); background-size: 20px 28px; background-repeat: no-repeat; background-position: center center; transition: 150ms ease; } .footer__prev a:link::before { content: ''; position: absolute; display: block; left: 0; top: 0; width: 3rem; height: 100%; align-content: center; opacity: 0.25; background-image: url(/assets/images/CT-arrow-prev.png); background-size: 20px 28px; background-repeat: no-repeat; background-position: center center; transition: 150ms ease; } .footer__next a:hover, .footer__prev a:hover, .footer__next a:active, .footer__prev a:active { /* NEW */ background-color: rgba(0,0,0,1); } .footer__next a:hover::before, .footer__prev a:hover::before { opacity: 1; } .footer__next h4, .footer__prev h4 { /* NEW */ color: var(--clr-text); font-size: var(--fs-h2); font-weight: 400; text-transform: uppercase; letter-spacing: 0.25ch; opacity: 0.5; } .footer__next h3, .footer__prev h3 { /* NEW */ color: var(--clr-text); font-size: var(--fs-p); line-height: 1.2em; font-weight: 600; margin-top: 0.5rem; } /* .footer__prev::after { content: ''; position: absolute; display: block; right: 0; top: 0; width: 1px; height: 100%; background-color: var(--clr-text); opacity: 0.15; } */ .footer__menu { /* NEW */ grid-column: span 2; padding: 6rem 3rem 9rem 3rem; } .footer__menu_item { float: left; width: 100%; color: var(--clr-text); font-size: var(--fs-h2); font-weight: 400; text-transform: uppercase; letter-spacing: 0.25ch; text-align: left; text-decoration: none; margin-right: 0; margin-bottom: 2rem; background: none; border: none; } footer .footer__signoff { width: 100%; font-size: var(--fs-h2); text-wrap: balance; } footer.footer__remove-top-margin { margin: 0 auto; } .contact-modal[open] { height: 100%; width: max-content; height: min-content; margin: 0 auto; padding: 3rem; align-content: center; background-color: #FFF; top: 50vh; transform: translateY(-50%); overflow: visible; border: none; box-shadow: 5px 10px 80px #000; &::backdrop { background-image: radial-gradient(var(--clr-background-75) 10%, var(--clr-background) 120%); background-blend-mode: multiply; } & form { width: 100%; } & form *:not(:last-child) { margin-bottom: 2rem; } & h3 { color: rgba(40,44,48,1); font-size: 3em; line-height: 1em; font-weight: 800; opacity: 1; margin-bottom: 2rem; width: 75%; } & input, & textarea { font-size: 1.125em; outline: 2px solid var(--clr-background-25); width: clamp(100%, 50vw, 640px); /* width: clamp(200px, 50vw, 640px); max-width: clamp(200px, 50vw, 640px); */ border: none; padding: 1rem; } & input::placeholder, & textarea::placeholder { opacity: 0.5; } & input:focus::placeholder, & textarea:focus::placeholder { opacity: 0.25; } & input:not(:placeholder-shown):valid, textarea:not(:placeholder-shown):valid { outline-color: GREEN; } & input:not(:placeholder-shown):invalid { outline-color: RED; outline-style:dashed; } & input:focus, textarea:focus { outline: 4px solid var(--clr-background-75); } & .contact-modal__close { position: absolute; border: none; top: 0; right: 0; text-transform: uppercase; padding: 0.75rem 1rem 0.75rem 1.25rem; letter-spacing: 0.25ch; color: white; background-color: rgba(40,44,48,1); font-weight: 700; } & .contact-modal__close:hover { color: white; background-color: var(--clr-underline-solid); } & .contact-modal__submit { font-size: 1.125em; width: 100%; padding: 1rem 2rem; border-radius: 50vw; color: white; background-color: var(--clr-underline-solid); outline: 2px solid var(--clr-underline-solid); border: none; } & .contact-modal__submit:hover, .contact-modal__submit:focus { color: white; --clr-underline-solid: rgba(0,0,0,1); outline: 2px solid var(--clr-underline-solid); } & .contact-modal__open { color: white; } } @media (max-width: 639px) { .work__blueworld { --work__onethird__left-start: obese-start; --work__onethird__left-end: obese-end; --work__onethird__right-start: obese-start; --work__onethird__right-end: obese-end; } } @media (min-width: 420px) { body.T-NSCP { --fs-h1: 3em; } } @media (min-width: 480px) { body.T-NSCP { --fs-h1: 3.25em; } } @media (min-width: 560px) { body.T-NSCP { --fs-h1: 3.5em; } } @media (min-width: 640px) { :root { --fs-h1: 3.75em; --fs-h2: 0.875em; --fs-h2-simple: 1.5em; --fs-p: 1.25em; } body { grid-template-columns: 2fr; --work__left-start: fat-start; --work__left-end: fat-end; --work__right-start: fat-start; --work__right-end: fat-end; --work__left-narrow-start: obese-start; --work__left-narrow-end: obese-end; --work__right-narrow-start: obese-start; --work__right-narrow-end: obese-end; --work__left-wide-start: obese-start; --work__left-wide-end: obese-end; --work__right-wide-start: obese-start; --work__right-wide-end: obese-end; --work__onethird__left-start: fat-start; --work__onethird__left-end: midpoint; --work__onethird__middle-start: fat-start; --work__onethird__middle-end: fat-end; --work__onethird__right-start: midpoint; --work__onethird__right-end: fat-end; --work__twothird__left-start: fat-start; --work__twothird__left-end: fat-end; --work__twothird__right-start: fat-start; --work__twothird__right-end: fat-end; } .intro__home { grid-row-start: 1; margin: 0; } .intro { /* grid-row-start: 2; grid-row-end: 3; */ grid-column: fat; margin-top: 2rem; } .intro__center { margin-top: 4rem; } .hero { grid-row-start: 1; grid-row-end: 2; grid-column: fat; } .hero__center { margin-top: calc((7rem + 28px) * -1); } .work__expanse.bwbgame img { left: calc(((1080px - 100vw) / 2) * -1); min-width: 1080px; } .work__extrawide { grid-column: obese; } .work__wide { grid-column: morbid; } .work__full { grid-column: fat; } .work__narrow { grid-column: fat; } .work__extranarrow { grid-column: fat; } .work__appstore .work__extranarrow { grid-column: healthy; } body.T-NSCP { --fs-h1: 3.75em; --work__onethird__left-start: fat-start; --work__onethird__left-end: fat-end; --work__onethird__middle-start: fat-start; --work__onethird__middle-end: fat-end; --work__onethird__right-start: fat-start; --work__onethird__right-end: fat-end; background-image: url(../images/T-NSCP-2014-starsblink-03.gif), url(../images/T-NSCP-2014-starsblink-01.gif), url(../images/T-NSCP-2014-starsblink-02.gif), url(../images/T-NSCP-2014-bkgd.jpg); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: top center, top center, top center, top center; background-size: auto, auto, auto, auto; } body.T-TDA { --work__onethird__left-start: healthy-start; --work__onethird__left-end: healthy-end; } body.Contact-Success { & .work a, .work p, .work p a, .work div { text-align: center; } & .work p { margin-left: auto; } } /* DESKTOP FOOTER */ .footer__menu_item { width: initial; margin-right: 2rem; border-bottom: 4px solid transparent; transition: 150ms ease; } .footer__menu_item:hover { border-bottom: 4px solid white; } body.S-Schwab { & #adobe-dc-view-1, #adobe-dc-view-2 { aspect-ratio: 16 / 9; } } } @media (min-width: 800px) { & .social-post { padding-top: 4rem !important; } & .social-post::before { height: 4rem !important; } } @media (min-width: 1080px) { :root { --fs-h1: 4.5em; --fs-h2: 1em; --fs-h2-simple: 2em; --fs-p: 1.5em; } body { grid-template-columns: 3fr; --work__left-start: fat-start; --work__left-end: midpoint; --work__right-start: midpoint; --work__right-end: fat-end; --work__left-narrow-start: healthy-start; --work__left-narrow-end: midpoint; --work__right-narrow-start: midpoint; --work__right-narrow-end: healthy-end; --work__left-wide-end: midpoint; --work__right-wide-start: midpoint; --work__onethird__left-start: fat-start; --work__onethird__left-end: skinny-start; --work__onethird__middle-start: skinny-start; --work__onethird__middle-end: skinny-end; --work__onethird__right-start: skinny-end; --work__onethird__right-end: fat-end; --work__twothird__left-start: fat-start; --work__twothird__left-end: skinny-end; --work__twothird__right-start: skinny-start; --work__twothird__right-end: fat-end; } /* main:has(.intro:is(:first-child)) { row-gap:3rem; } */ .intro { grid-row-start: 1; grid-row-end: 2; margin-top:0; } .intro__home { margin: 8rem 0; grid-row-start: 1; } .intro__left { grid-column-start: fat-start; grid-column-end: midpoint; } .intro__center { text-align: center; grid-row-start: 2; grid-row-end: 3; } .intro__center h1, .intro__center h2 { grid-column: obese; } .intro__center p { padding: 0 8%; } .intro__wordy { grid-row-start: 1; grid-row-end: 4; } .intro p:not(p:first-of-type) { /* margin-right: calc((100% + 2rem) * -1); */ } .intro__center h2::before, .intro__center h2::after { background-image: linear-gradient(to right, rgba(0,0,0,0) 0%, var(--clr-border) 35%, var(--clr-border) 65%, rgba(0,0,0,0) 100%); } .hero { grid-row-start: 1; grid-row-end: 2; } .hero__right { width: 100%; grid-column-start: midpoint; grid-column-end: morbid-end; } .hero__center { width: 75%; grid-column: healthy; margin-bottom: -25%; } .work__expanse.bwbgame img { left: calc(((1920px - 100vw) / 2) * -1); min-width: 1920px; } .work__extrawide { grid-column: obese; } .work__wide { grid-column: fat; margin: 0 -4rem; } .work__full { grid-column: fat; } .work__narrow { grid-column: healthy; } .work__extranarrow { grid-column: skinny; } .work__onethird__left { display: block; } .work__onethird__middle { display: block; } .work__onethird__right { display: block; } .work__translate-left-20 { transform: translateX(-20px); } .work__translate-left-50 { transform: translateX(-50px); } .work__translate-right-20 { transform: translateX(20px); } .work__translate-right-50 { transform: translateX(50px); } .work__topmargin { margin-top: 4rem; } .work__topmarginsmall { margin-top: 2rem; } .work__topmarginlarge { margin-top: 6rem; } .work__bottommargin { margin-bottom: 4rem; } .work__bottommarginsmall { margin-bottom: 2rem; } .work__bottommarginlarge { margin-bottom: 6rem; } .work__gutterlarge-left { padding-left: 4rem; } .work__gutterlarge-right { padding-right: 4rem; } .work__guttersmall-left { padding-left: 2rem; } .work__guttersmall-right { padding-right: 2rem; } .work__desktop { display: block; } .work__mobile { display: none; } body.A-Illustration { & .work__elevenyears { background-image: conic-gradient( #1b75bb 0deg, #1b75bb 90deg, #f8cf00 90deg, #f8cf00 180deg, #009345 180deg, #009345 270deg, #f05a28 270deg, #f05a28 0deg); } } body.T-TDA { --work__onethird__left-start: fat-start; --work__onethird__left-end: skinny-start; } body.S-Network { & .intro { margin-top: 4rem; } } body.F-Plates { & .intro { margin-top: 4rem; } & .intro__left p { margin-right: -100%; } } body.A-Logos { & .work { min-height: 102vh; align-content: center; } & .work__logos-dave { background-color: #b0c4cf; } & .work__logos-amt-ta { background-image: linear-gradient(to right, #8dc63f 0%, #8dc63f 50%, #85210d 50%, #85210d 100%); } & .work__logos-crosses { background-image: linear-gradient(to right, #440400 0%, #440400 50%, #dbe7e3 50%, #dbe7e3 100%); } & .work__logos-pups-lc { background-image: linear-gradient(to right, #ff0000 0%, #ff0000 50%, #b90823 50%, #b90823 100%); } & .work__logos-east-nama { background-image: linear-gradient(to right, #fecf49 0%, #fecf49 50%, #d0eef4 50%, #d0eef4 100%); } & .work__logos-01 { background-image: linear-gradient(to right, #2B3990 0%, #2B3990 50%, #ADDDF4 50%, #ADDDF4 100%); } & .work__logos-02 { background-image: linear-gradient(to right, #f8f4e3 0%, #f8f4e3 50%, #f05a28 50%, #f05a28 100%); } & .work__logos-03 { background-image: linear-gradient(to right, #002533 0%, #002533 50%, #85210d 50%, #85210d 100%); } & .work__logos-04 { background-image: linear-gradient(to right, #8dc63f 0%, #8dc63f 50%, #85210d 50%, #85210d 100%); } & .work__logos-05 { background-image: linear-gradient(to right, #ff0000 0%, #ff0000 50%, #b0c4cf 50%, #b0c4cf 100%); } & .work__logos-06 { background-image: linear-gradient(to right, #440400 0%, #440400 50%, #dbe7e3 50%, #dbe7e3 100%); } & .work__logos-07 { background-image: linear-gradient(to right, #dbe7e3 0%, #dbe7e3 50%, #b90823 50%, #b90823 100%); } & .work__logos-08 { background-image: linear-gradient(to right, #fecf49 0%, #fecf49 50%, #d0eef4 50%, #d0eef4 100%); } & .work__logos-09 { background-image: linear-gradient(to right, #002e5a 0%, #002e5a 50%, rgba(214,51,43,1) 50%, rgba(214,51,43,1) 100%); } & .work__logos-10 { background-image: linear-gradient(to right, #fff 0%, #fff 50%, #dde6cc 50%, #dde6cc 100%); } & .work__logos-01, .work__logos-02, .work__logos-03, .work__logos-04, .work__logos-05, .work__logos-06, .work__logos-07, .work__logos-08, .work__logos-09, .work__logos-10 { padding: 6rem; } } body.A-Digital { & .work__uwm .work__right { margin-top: unset; margin-bottom: unset; } & .work__digital-01 { background-image: linear-gradient(to right, #888 0%, #888 50%, #ccc 50%, #ccc 100%); } & .work__digital-02 { background-image: linear-gradient(to right, #aaa 0%, #aaa 50%, #666 50%, #666 100%); } & .work__digital-03 { background-image: linear-gradient(to right, #888 0%, #888 50%, #ccc 50%, #ccc 100%); } & .work__digital-04 { background-image: linear-gradient(to right, #aaa 0%, #aaa 50%, #666 50%, #666 100%); } & .work__digital-05 { background-image: linear-gradient(to right, #888 0%, #888 50%, #ccc 50%, #ccc 100%); } & .work__digital-06 { background-image: linear-gradient(to right, #aaa 0%, #aaa 50%, #666 50%, #666 100%); } & .work__digital-07 { background-image: linear-gradient(to right, #888 0%, #888 50%, #ccc 50%, #ccc 100%); } & .work__digital-08 { background-image: linear-gradient(to right, #aaa 0%, #aaa 50%, #666 50%, #666 100%); } & .work__digital-09 { background-image: linear-gradient(to right, #888 0%, #888 50%, #ccc 50%, #ccc 100%); } & .work__digital-10 { background-image: linear-gradient(to right, #aaa 0%, #aaa 50%, #666 50%, #666 100%); } & .work { padding: 6rem; } } body.T-NSCP { --fs-h1: 4.5em; --work__onethird__left-start: fat-start; --work__onethird__left-end: skinny-start; --work__onethird__middle-start: skinny-start; --work__onethird__middle-end: skinny-end; --work__onethird__right-start: skinny-end; --work__onethird__right-end: fat-end; } /* DESKTOP FOOTER */ .footer__menu_item { margin-right: 3rem; } & .social-post { padding-top: 3rem !important; } & .social-post::before { height: 3rem !important; } } @media (min-width: 1280px) { & .work__appstore .work__twothird__right h2 { margin-top: 1rem; } & .social-post { padding-top: 3.5rem !important; } & .social-post::before { height: 3.5rem !important; } } @media (min-width: 1440px) { body { grid-template-columns: 4fr; } .hero__right { grid-column-start: midpoint; grid-column-end: obese-end; } .hero__center { margin-top: calc((7rem + 28px) * -1); width: 75%; } body.T-Holiday { background-size: 65% auto, 65% auto, 65% auto, 65% auto, 65% auto, 65% auto, 65% auto, 65% auto, 65% auto, 1240px auto; } body.F-Plates { & .intro__left p { margin-right: 0; } } & .work__appstore .work__twothird__right h2 { margin-top: 2rem; } & .social-post { padding-top: 4.5rem !important; } & .social-post::before { height: 4.5rem !important; } } @media (min-width: 1960px) { body::before { content: ''; position: absolute; top: 0; left: 0; width: calc(((100%) - (1920px)) / 2); height: 100%; background-color: var(--clr-background); background-image: url(../images/CT-bkgd-gray.png); background-size: 48px; background-blend-mode: multiply; background-position: 0px 16px; border-right: 20px solid rgba(0,0,0,0.10); } body::after { content: ''; position: absolute; top: 0; left: calc((((100%) - (1920px)) / 2) + 1920px);; width: calc(((100%) - (1920px)) / 2); height: 100%; background-color: var(--clr-background); background-image: url(../images/CT-bkgd-gray.png); background-size: 48px; background-blend-mode: multiply; background-position: right -4px top 0; border-left: 20px solid rgba(0,0,0,0.10); } .work__expanse.bwbgame img { left: 0; } & .social-post { padding-top: 5rem !important; } & .social-post::before { height: 5rem !important; } } /* put alt tags on all images put title tags on div wrappers for images working out below tooltip functionality */ main div[data-work=work-desc]::before { content: ''; opacity: 0; position: absolute; inset: 0 0 0 0; } main div[data-work=work-desc]:hover::before { transition: opacity 222ms ease-in; content: attr(alt); display: block; padding: 3rem; color: white; opacity: 1; background-color: rgba(0,0,0,0.75); font-size: var(--fs-p); font-weight: 300; text-align: left; z-index: 20000; }