/* #region Reset */
body, body *:where(:not(html, iframe, canvas, img, svg, video, audio, svg, link, script, style, .__brackets-ld-highlight)) {
display: revert;
all: unset;
}
body, body *, body *::before, body *::after {
box-sizing: border-box;
}
a, button {
cursor: revert;
}
ol, ul, menu {
list-style: none;
}
[data-highlight] {
outline: 1px solid #ff000050;
background: #ff000025;
}
#fiveserver-info-wrapper {
display: none ! important;
}
:root {
interpolate-size: allow-keywords;
}
/* #endregion */
/* #region Variables
MARK: Variables
*/
:root {
--offset-work: 0;
--offset-about: 0;
--offset-contact: 0;
--spacer-height: 640px;
}
/* #endregion */
/* #region Controls
MARK: Controls
*/
aside.controls {
mix-blend-mode: exclusion;
filter: invert(1);
position: fixed;
bottom: 0;
left: 0;
z-index: 9999999999999;
background: #fff;
&:hover {
label {
opacity: .25;
&:has(:checked) {
opacity: .75;
}
}
}
label {
display: block;
opacity: 0;
cursor: pointer;
padding: .25em;
text-transform: uppercase;
font-size: .5em;
&:has(:checked) {
opacity: .5;
}
&:hover {
opacity: 1 !important;
}
}
}
body:has(#grid:checked) {
&:before {
position: absolute;
top: 0;
left: 0;
z-index: 9999999999999999999999999999999999;
background-image:
linear-gradient(to right, rgb(0 0 0 / 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgb(0 0 0 / 0.1) 1px, transparent 1px);
background-size: 1vw 1vw;
width: 100vw;
height: 100%;
content: "";
pointer-events: none;
}
}
body:has(#cols:checked) {
&:after {
position: absolute;
top: 0;
left: 1vw;
z-index: 9999999999999999999999;
background: repeating-linear-gradient(to right,
rgba(0, 0, 0, .1),
rgba(0, 0, 0, .1) 2vw,
transparent 2vw,
transparent 8vw);
width: 100vw;
height: 100%;
content: "";
pointer-events: none;
}
}
body:has(#space:checked) {
--space-color: #0f05;
}
body:has(#box:checked) {
article {
outline: 1px solid blue;
}
}
html {
filter: invert(1);
background: #eee;
&:has(#invert:checked) {
filter: unset;
background: #fff;
}
}
body {
&:has(#color:checked) {
filter: saturate(0);
}
}
/* #endregion */
/* #region Global */
html, body {
overflow: hidden;
}
body {
display: flex;
/* transition: font-variation-settings 1s linear; */
line-height: 1;
color: #000;
font-family: Control Upright Web, Helvetica Neue, sans-serif;
font-size: 1.33333vw;
/*font-size: 1vw; */
font-weight: 425;
font-feature-settings: 'ss01' off, 'ss04' on, 'ss08' on, 'ss09' on, 'ss11' on, 'ss13' on;
font-variation-settings: 'wght' 400, 'CONT' 0, 'TRAK' -3, 'OPEN' 24;
overscroll-behavior: none;
}
/* #endregion */
@keyframes fadeOutScale {
from {
transform: scaleY(1);
opacity: 1;
}
to {
transform: scaleY(.3);
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes embolden {
from {
font-variation-settings: 'wght' 400, 'CONT' 0, 'TRAK' -3, 'OPEN' 24;
}
to {
font-variation-settings: 'wght' 450, 'CONT' 0, 'TRAK' -15, 'OPEN' 24;
}
}
#about:has(a.link1:hover) #link1 p:first-of-type {
position: fixed;
bottom: 2em;
left: 2em;
z-index: 99999999999;
background: #fff !important;
width: 33vw;
pointer-events: none;
}
/* TODO overlap front page hovers so theres no flicker..
TODO special hover state for Working and/or simply minimum width for header
TODO reconcile the above with full width hover state when stuck
TODO photo / images for up top hover states (e.g. profile photo)
*/
main#front {
display: flex;
position: relative;
flex: 1;
transform-origin: top center;
margin: 0 1vw;
padding: 0 2vw;
height: 100dvh;
/* height: 100vh; */
overflow: hidden;
/*1.33 to be exact */
/* font-size: 15.7px; */
gap: 2vw;
section {
flex: 1;
margin-right: -2vw;
/* justify-content: end; */
margin-left: -2vw;
padding-right: 2vw;
padding-left: 2vw;
/* padding-left: 1px; */
/* overflow-x: clip; */
overflow-x: hidden;
/* overflow-x: hidden; */
overflow-y: auto;
scroll-timeline: --squareTimeline y;
scroll-behavior: smooth;
hyphens: auto;
> header {
display: block;
position: sticky;
top: calc(-100dvh + 3em);
z-index: 999999;
/* margin-top: calc(50vh - 1.5em); */
margin-right: -2em;
margin-bottom: 0em;
margin-left: -2vw;
/* background-color: violet; */
/* background: url(fade.png) repeat-x bottom; */
background-color: #fff;
background-size: 8px auto;
padding-left: 2vw;
height: 100dvh;
animation: rotateAnimation 1s linear infinite;
font-variation-settings: 'wght' 400, 'CONT' 0, 'TRAK' 0, 'OPEN' 24;
font-feature-settings: 'ss01' off, 'ss04' on, 'ss08' on, 'ss09' off, 'ss11' on, 'ss13' on;
/* padding-bottom: .25em; */
a {
display: inline-flex;
align-items: center;
height: 100%;
animation-name: embolden;
animation-timing-function: linear;
animation-fill-mode: both;
animation-range: contain entry 100vh;
animation-timeline: --squareTimeline;
/* animation: embolden 2s linear infinite alternate both; */
/* padding-bottom: .5em; */
&:hover {
background: blue;
}
h2 {
position: sticky;
top: 2em;
&:before {
background: #fff !important;
/* animation: fadeOutScale 2s linear infinite alternate both !important; */
animation: fadeOut 2s linear;
animation-fill-mode: both;
animation-range: contain entry 100vh;
animation-timeline: --squareTimeline;
}
}
/* display: inline-block; */
/*showstoppuing*/
}
}
}
section header:has(h2 a:hover) a {
/* background: red; */
}
#work {
z-index: 9999999;
}
#work header h2 {
text-indent: .1em;
}
/* #region Header
MARK: Header
*/
#work header a h2:before {
position: absolute;
top: 0;
left: 0;
left: .1em;
z-index: 999;
background: inherit;
width: 1em;
/* animation-name: fadeOut; */
/* margin-right: -1ch; */
/* animation-timing-function: linear; */
/* animation-fill-mode: both; */
text-align: center;
text-align: right;
content: 'w';
/* animation-range: contain entry calc(50vh - 2em); */
/* animation-range: contain entry 100vh; */
/* animation-timeline: --squareTimeline; */
pointer-events: none;
section#projects {
display: block;
position: absolute;
right: 2vw;
z-index: 9999999999999999999999999999999;
margin: unset;
padding-right: 0;
padding-left: 0;
height: 100%;
text-align: right;
header {
display: block;
all: unset;
a {
display: block;
padding: calc(50vh - 1.5em) 0 50vh 0;
all: unset;
}
}
}
}
#contact header a h2:before {
position: absolute;
top: 0;
left: 0;
transform-origin: top center;
z-index: 999;
/* display: block; */
background: inherit;
background: #fff;
/* animation-range: contain entry calc(50vh - 2em); */
animation-timing-function: linear;
/* animation-name: fadeOutScale; */
content: 'p';
pointer-events: none;
}
section#projects {
display: block;
position: absolute;
/* position: fixed; */
right: 2vw;
z-index: 9999999999999999999999999999999;
margin: unset;
padding-right: 0;
padding-left: 0;
height: 100%;
text-align: right;
/* position: relative; */
header {
display: block;
all: unset;
a {
display: block;
padding: calc(50vh - 1.5em) 0 50vh 0;
all: unset;
}
/* padding: unset; */
}
/* padding-right: 0; */
/* padding: unset; */
/* width: 0; */
}
.char {
font-size: .85em;
/* line-height: 2; */
font-variation-settings: 'wght' 415, 'CONT' 0, 'TRAK' 0, 'OPEN' 24;
}
/* #endregion */
/* #region Block
MARK: Block
*/
section:not(#featured) > article {
display: block;
position: relative;
transform-origin: 0 0;
transition: all 1s linear;
margin-bottom: 2em;
/* background-position: center; */
/* outline: 1px solid red; */
/* word-break: break-all; */
background:
/* Top Left Corner */
linear-gradient(to bottom, black 1px, transparent 1px),
linear-gradient(to right, black 1px, transparent 1px),
/* Top Right Corner */
linear-gradient(to bottom, black 1px, transparent 1px),
linear-gradient(to left, black 1px, transparent 1px),
/* Bottom Right Corner */
linear-gradient(to top, black 1px, transparent 1px),
linear-gradient(to left, black 1px, transparent 1px),
/* Bottom Left Corner */
linear-gradient(to top, black 1px, transparent 1px),
linear-gradient(to right, black 1px, transparent 1px);
background: unset;
background-repeat: no-repeat;
background-position:
0 0,
0 0,
100% 0,
100% 0,
100% 100%,
100% 100%,
0 100%,
0 100%;
/* mix-blend-mode: difference; */
/* background-position: center center; */
background-size: 1vw 1vw;
/* margin-bottom: 2em; */
/* padding-top: .5em; */
height: auto;
text-align: justify;
/* Fix might be needed ^ */
line-height: 1.2;
line-height: 1.5;
hyphens: auto;
label:has(input[type='checkbox']) {
display: block;
position: absolute;
top: 0em;
right: 0;
z-index: 9999;
cursor: pointer;
width: 100%;
height: 3em;
color: inherit;
/* font-size: 1vw; */
pointer-events: none;
&:after {
display: block;
position: absolute;
top: .75em;
right: .5em;
transform: rotate(45deg);
border: 1px solid currentColor;
border-top: none;
border-left: none;
width: .75em;
height: .75em;
/* content: ''; */
/* opacity: 0; */
}
&:hover {
pointer-events: auto;
& + h3 {
opacity: .75;
}
}
&:has(:checked) {
/* &:after { */
/* opacity: 1; */
/* } */
}
}
&:has(label input:checked) {
/* opacity: .5; */
/* height: 5em; */
/* line-height: 0; */
/* color: transparent; */
label {
height: 100%;
pointer-events: auto;
}
p {
/* margin-bottom: 0; */
/* opacity: 0; */
/* outline: 1px solid black; */
/* line-height: inherit; */
line-height: 0;
color: transparent;
&:before {
/* opacity: 1; */
color: #000;
}
/* text-indent: 0; */
}
}
> p {
display: block;
position: static;
/* transition: all .1s ease-in-out; */
margin-bottom: 1vw;
/* text-indent: 2ch; */
/* padding-bottom: 1vw; */
/* outline: 1px solid transparent; */
/* min-height: 1em; */
color: inherit;
hyphens: auto;
&:before {
transition: all .1s ease-in-out;
margin-left: -2ch;
/* opacity: 0; */
color: transparent;
content: '12 ';
}
&:hover {
background-position:
0 0,
0 0,
100% 0,
100% 0,
100% 100%,
100% 100%,
0 100%,
0 100%;
}
&:first-line {
line-height: 1.4;
color: #000;
}
&:last-of-type {}
}
h3 {
display: block;
position: sticky;
top: 3em;
z-index: 100;
margin-bottom: .5vw;
/* margin-left: -.5em; */
background: green;
/* font-size: 1vw; */
height: 2em;
/* background: #fff; */
/* line-height: 1.5; */
line-height: 1.2;
color: #000;
font-weight: bold;
text-wrap: balance;
pointer-events: none;
font-variation-settings: 'wght' 450, 'CONT' 0, 'TRAK' 0, 'OPEN' 24;
a {
transition: all 1s linear;
/* outline: 1px solid red; */
/* height: 1em; */
/* padding: .25em 0; */
margin: -.5em;
background: pink;
/* display: inline-block; */
padding: .5em .5em .5em .5em;
pointer-events: auto;
}
&:hover + label {
pointer-events: auto;
}
}
}
/* #endregion */
/* #region Target
MARK: Target
*/
body:has(article:target) {
/* background: red; */
article:not(:target) {
opacity: .15;
/* height: 1em !important; */
&:has(label:has(input[type='checkbox']) input:not(:checked)) {
opacity: .5;
height: 3em;
line-height: 1;
color: #fff;
/* add the open close indicator as an after for the label */
}
&:has(label:has(input[type='checkbox']) input:checked) {
/* not a pure toggle inverter */
opacity: 1;
height: unset;
/* line-height: 1.2; */
color: currentColor;
}
}
}
/* #endregion */
/* #region Spacers
MARK: Spacers
*/
.stick {
transition: all .2s linear;
/* text-align: right; */
background: #888;
/* background: blue; */
/* padding: 5em 0em; */
line-height: 1em;
color: orange;
/* height: 8em; */
color: purple;
/* display: inline-flex; */
/* opacity: .75; */
&:hover {
/* line-height: 11em; */
.substick {
height: 10em;
}
}
.substick {
display: block;
transition: all .2s linear;
aspect-ratio: 16 / 9;
/* width: 50%; */
/* width: 100%; */
/* background: #fff; */
/* outline: 1px solid red; */
/* height: 1em; */
/* float: left; */
/* margin-right: -15vw; */
/* margin-left: auto; */
clip-path: inset(-1px -1px -1px -1px);
/* outline: 1px solid red; */
.content {
/* background: purple; */
outline: 50vw solid #fff;
background: url(https://www.nps.gov/featurecontent/ard/webcams/images/washlarge.jpg);
background-repeat: no-repeat;
background-position: 0 center;
background-size: 33vw;
color: transparent;
/* background-attachment: local; */
}
}
}
/* sidenotes - push half from left
images - inline rebus that expands to a clickthru crossfade gallery
inline-images: headshot etc, tending to the left
*/
.sentence {
display: inline;
position: relative;
margin: 0 -.5ch;
outline: 1px solid #808080;
background: red;
background-attachment: fixed;
/* background-repeat: no-repeat; */
background-position: 2vw calc(var(--offset-about) * -1px);
/* background: url(https://www.nps.gov/featurecontent/ard/webcams/images/washlarge.jpg); */
/* background-size: cover; */
background-size: 28vw auto;
/* background: #aaa; */
padding: .15em .5ch;
/* float: left; */
width: 15.5vw;
text-align: left;
/* position: sticky; */
/* top: 0; */
/* overflow: clip; */
/* clip-path: inset(-100% -100% -100% -100%); */
&:before {
display: block;
position: absolute;
top: 0;
/* right: 0; */
top: 0;
/* left: 0; */
bottom: 0;
/* opacity: .5; */
outline: 2px solid purple;
/* left: 0; */
/* width: 33vw; */
width: 30vw;
height: 100%;
constent: '';
}
}
.franco {
display: none;
}
#contact:before,
#about:before {
--element-offset: calc(var(--offset-featured) * 1px);
/* transition: all .1s ease-in-out; */
/* --offset-work: 0; */
/* --offset-about: 0; */
/* --offset-contact: 0; */
/* mix-blend-mode: overlay; */
/* display: block; */
/* display: none; */
/* position: relative; */
/* transition: width .2s ease-out; */
visibility: hidden;
/* z-index: 99999999999; */
background: blue;
/* background: red; */
width: calc(50% - 1em);
content: '';
pointer-events: none;
}
#contact:before {
--offset-section: var(--offset-contact);
float: left;
margin-right: 1em;
height: calc(100vh + (var(--offset-contact) * 1px));
}
#about:before {
--offset-section: var(--offset-about);
float: right;
margin-left: 1em;
height: calc(100vh + (var(--offset-about) * 1px));
}
#contact:before,
#about:before {
--offset-diff: calc((var(--offset-section) - var(--offset-work)) * 1px);
--shape-top: calc(var(--offset-diff) + var(--element-offset) + (var(--spacer-height) - min(var(--spacer-height), calc(var(--element-offset) - (var(--offset-work) * 1px) + var(--spacer-height)))));
--shape-height: calc(clamp(0px,
calc(var(--element-offset) - (var(--offset-work) * 1px) + var(--spacer-height)),
var(--spacer-height) - max(0px, (-1 * var(--offset-diff)) - var(--element-offset))));
--polygon: polygon(0% var(--shape-top),
100% var(--shape-top),
100% calc(var(--shape-top) + var(--shape-height)),
0% calc(var(--shape-top) + var(--shape-height)));
shape-outside: var(--polygon);
/* clip-path: var(--polygon); */
}
/* #endregion */
/* #region About
MARK: - About
*/
#about {
z-index: 99999999;
/* outline: 1px solid red; */
header a {
margin-left: -.5em;
padding-left: .5em;
}
}
/* header h2 a:first-letter { */
/* all: unset; */
/* } */
figure {
&:hover {
picture {
filter: unset;
image-rendering: unset;
&:after {
opacity: 0;
}
}
}
#door {
display: none;
}
picture {
filter: contrast(500%) saturate(0);
display: block;
position: relative;
image-rendering: pixelated;
img {
display: inline-block;
margin-right: -33vw;
width: 100%;
object-fit: cover;
}
&:after {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: .5;
/* mix-blend-mode: exclusion; */
background-attachment: fixed;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAOklEQVR4nC3KQQFAQAAAwd0EIohANA0uiiiugQgiiLA+5j0AVBewVa/VUGd1qBNgrR5gqW6r8x+7Oj8/xCBur9LU/wAAAABJRU5ErkJggg==');
/* background-size: 4px 8px; */
background-size: 8px;
content: '';
image-rendering: pixelated;
pointer-events: none;
}
}
}
}
/* #endregion */
/* #region Featured
MARK: Featured
*/
#featured {
display: grid;
/* display: grid; */
position: fixed;
grid-template-rows: repeat(auto-fill, minmax(2em, 1fr));
grid-template-columns: repeat(3, 1fr);
/* grid-auto-rows: 1.5em; */
grid-auto-flow: column;
transform: translateY(calc(var(--offset-work) * -1px));
/* opacity: 0; */
/* opacity: .8; */
/* grid-template-columns: repeat(4, 1fr); */
z-index: 9999999;
margin: 0 auto;
/* margin-top: calc(var(--offset-work) * -1px); */
margin-left: -15.74vw !important;
background:
/* Top Left Corner */
linear-gradient(to bottom, black 1px, transparent 1px),
linear-gradient(to right, black 1px, transparent 1px),
/* Top Right Corner */
linear-gradient(to bottom, black 1px, transparent 1px),
linear-gradient(to left, black 1px, transparent 1px),
/* Bottom Right Corner */
linear-gradient(to top, black 1px, transparent 1px),
linear-gradient(to left, black 1px, transparent 1px),
/* Bottom Left Corner */
linear-gradient(to top, black 1px, transparent 1px),
linear-gradient(to right, black 1px, transparent 1px);
background-color: #fff;
background-repeat: no-repeat;
/* mix-blend-mode: difference; */
background-position:
0 0,
0 0,
100% 0,
100% 0,
100% 100%,
100% 100%,
0 100%,
0 100%;
background-size: 2em 2em;
padding: 2em;
padding-top: 512px;
width: 63.5vw;
/* opacity: .5; */
/* height: 640px; */
/* height: auto; */
height: calc(512px + 12em);
/* background-blend-mode: difference; */
/* max-height: 700px; */
/* overflow-y: auto; */
/* counter-reset: item; */
& + * {
margin-top: var(--spacer-height);
/* background-color: red; */
}
/* gap: 2em; */
.client {
display: flex;
flex-direction: column;
opacity: 0;
margin: 0;
padding: 0;
overflow: hidden;
.overview {
/* overflow: hidden; */
display: block;
/* outline: 1px solid red; */
/* flex: 1 5em; */
/* display: none; */
* {
display: none;
}
.title {
display: block;
margin-bottom: -1em;
font-weight: 500;
font-variation-settings: 'wght' 450, 'CONT' 0, 'TRAK' 0, 'OPEN' 24;
}
}
&:hover {
background: blue;
.slides {
opacity: 1;
}
}
&:nth-child(5n + 2) .slides {
margin-left: 4vw;
}
&:nth-child(5n + 3) .slides {
margin-left: 8vw;
}
&:nth-child(5n + 4) .slides {
margin-left: 12vw;
}
&:nth-child(5n + 5) .slides {
margin-left: 16vw;
}
&:nth-child(5n + 1) .slides {
margin-left: 0;
}
.slides {
display: flex;
position: absolute;
top: 0;
outline: 1px solid green;
width: 4vw;
height: 20em;
/* opacity: 0; */
/* height: 3em; */
.slide {
display: grid;
flex: 1;
/* height: 100%; */
grid-template-rows: 100%;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
/* outline: 10px solid orange; */
&:hover {
background: orange;
}
.asset {
/* padding: .5em; */
cursor: pointer;
&:hover {
background: #aaa;
.picture {
/* display: block; */
/* background: blue; */
position: absolute;
top: 2em;
right: 0;
left: 0;
/* bottom: 50%; */
height: calc(500px - 5em);
pointer-events: none;
.image {
object-fit: contain;
}
}
}
.picture {
background: red;
.image {
/* display: block; */
width: 100%;
/* display: block; */
height: 100%;
object-fit: cover;
}
}
}
/* display: block; */
.caption {
display: none;
}
}
.description {
display: none;
outline: 10px solid blue;
}
}
}
}
section:not(#featured) > article:has(label:hover) {
h3 a {
outline: 1px solid black;
}
p {
/* outline-color: black; */
/* color: transparent; */
color: #0005;
&:before {
/* opacity: .5; */
color: #0005;
}
}
}
/* #endregion */
/* #region Page
MARK: Page
*/
main#item {
.slides {
display: flex;
flex-direction: column;
outline: 1px solid red;
.items:hover {
/* margin-left: 0 !important; */
figure {
margin-left: 0;
width: 100vw !important;
}
}
.slide {
display: block;
outline: 1px solid green;
width: 100vw;
height: 40vh;
.items {
display: flex;
padding: 5vw;
height: 100%;
.item {
display: block;
flex: none;
margin-left: -90vw;
outline: 1px solid orange;
/* background: red; */
width: 100%;
height: 100%;
/* height: 33vw; */
/* pointer-events: none !important; */
&:first-child {
margin-left: 0;
}
figure {
display: block;
transition: all 10s linear;
opacity: .5;
outline: 1px solid rgb(91, 91, 132);
width: 5vw;
picture {
display: block;
width: 100%;
height: 100%;
img {
display: block;
width: 100%;
height: 100%;
}
}
figcaption {
display: none;
}
}
}
}
}
article {
display: block;
background: #eee;
}
}
}
/* #endregion */
.litem {
display: inline;
position: relative;
padding-right: 2em;
&:after {
display: inline-block;
position: absolute;
background: url(amtrak.svg);
background-repeat: no-repeat;
background-size: contain;
width: 2em;
height: .8em;
line-height: 1;
color: transparent;
content: '';
}
}
article:has(span:hover) p {
color: #0005 !important;
}
.marquee {
display: inline-block;
background: orange;
padding: .5em;
text-shadow: 8vw 0 0 orange;
}
.logo {
display: inline;
display: inline-block;
position: absolute;
left: 20em;
/* margin-bottom: -2em; */
float: left;
/* display: inline-block; */
/* display: block; */
/* display: inline-block; */
float: left;
/* margin-right: -4em; */
outline: 1px solid orange;
/* width: 50%; */
height: 10em;
}
@keyframes train {
0% {
background-position: 0 50%, calc(100% + 5em) 50%;
}
100% {
background-position: calc(-100% - 5em) 50%, 0 50%;
}
}
#work {
header {
white-space: nowrap;
}
h3 {
line-height: 0;
img {
display: block;
margin: 0 auto;
/* outline: 1px solid green; */
width: 50%;
/* max-height: 3em; */
height: 3em;
font-size: initial;
object-fit: contain;
}
a {
display: block;
height: unset !important;
text-align: center;
line-height: 0;
font-size: 0;
}
}
p {
display: block;
/* text-align: justify; */
/* text-align: left; */
text-align-last: center;
}
}
#contact article {
/* text-align: right !important; */
text-align-last: right;
h3 {
/* text-align: left; */
text-align-last: left;
}
}
.drop {
/* display: none; */
/* display: inline-block; */
/* max-width: 1em; */
transition: all 5s linear 5s, color 5s linear 0s;
/* outline: 1px solid red; */
width: 100%;
/* height: 5em; */
/* overflow: clip; */
overflow: hidden;
letter-spacing: -.49em;
color: transparent;
&:hover {
transition: all 5s linear, color 5s linear 5s;
letter-spacing: 0;
color: #000;
}
}
article:has(.drop) {
text-align: left !important;
}
/*
.sidecar {
/~ display: contents; ~/
/~ outline: 10px solid green; ~/
/~ opacity: 0; ~/
&:before {
/~ display: block; ~/
/~ float: left; ~/
float: right;
/~ margin-right: -50%; ~/
/~ opacity: 0; ~/
/~ margin-right: -50%; ~/
background: red;
width: 50%;
height: 5em;
content: 'before';
/~ display: block; ~/
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 63%);
shape-outside: polygon(100% 0, 100% 100%, 0 100%, 0 63%);
}
&:after {
display: block;
/~ opacity: 0; ~/
float: left;
opacity: .5;
/~ clear: left; ~/
margin-top: 0em;
margin-right: -50%;
/~ margin-right: -50%; ~/
background: blue;
width: 100%;
height: 5em;
/~ clear: right; ~/
content: 'after';
/~ display: block; ~/
clip-path: polygon(100% 0, 100% 60%, 0 100%, 0 0);
shape-outside: polygon(100% 0, 100% 60%, 0 100%, 0 0);
}
}
*/
article:has(.sidecar) {
margin-left: -1em;
border-left: .5em solid black;
padding-left: .5em;
word-break: break-all;
}