/* Autor: PUM! estudio Index: 1 -- Structure 1.1 -- Header 1.2 -- Footer 1.3 -- Popup 2 -- Text 3 -- Interaction 3.1 -- CTAs 3.2 -- Form 3.3 -- Cursor 4 -- Icons 5 -- Animation */ @charset "UTF-8"; /* 1 -- Structure */ html { background-color: var(--bg-html); scroll-behavior: smooth;} body { background-color: var(--bg-body);} .col-main { width: 100%; max-width: var(--max-w-main); padding: 0 var(--padd-main);} /* 1.1 -- Header */ .header { position: sticky; top: 0; left: 0; z-index: 1000; width: 100%; background-color: var(--c-white);} .header-in { padding: var(--unit-6) var(--unit-4); border-bottom: var(--border-1-b);} .header-logo a, .header-logo button { text-decoration: none; color: var(--c-black);} .header-logo a, .header-logo img, .header-logo svg, .header-logo video { display: block;} .header-logo img, .header-logo svg, .header-logo video { height: var(--unit-14); width: auto;} .header .header-btns { position: relative; z-index: 1;} .header .header-btns .cta-lang { display: flex;} .header .header-btns .cta-menu { z-index: 3;} .scroll-up .header { transform: translateY(0);} .scroll-up .header::before { opacity: 1;} .scroll-down .header { transform: translateY(-100%);} .header-menu { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100dvh; pointer-events: none; overflow: hidden; display: flex; justify-content: flex-end;} .menu { position: relative; padding: 0 var(--unit-14) var(--unit-25); height: 100%; width: 70%; background-color: var(--c-yellow); transform: translateX(100%); overflow: scroll; pointer-events: all;} .menu .header-menu-cta { position: sticky; top: 0; z-index: 10; padding: var(--unit-10) 0 var(--unit-15); width: 100%; display: flex; justify-content: flex-end; background: linear-gradient(to bottom, var(--c-yellow) 70%, transparent 100%);} .menu-main li { width: 100%;} .menu-main li > a { display: block; padding: var(--unit-2) 0; border-top: 1px solid var(--c-black); text-decoration: none;} .menu-main li > a:hover { font-style: italic;} .menu-active { overflow: hidden;} .menu-active .menu { transform: translateX(0); } .menu-main { position: relative; z-index: 2;} .menu-main .menu-list-child { position: relative; container-type: inline-size; overflow: hidden;} .menu-main .menu-list-child ul { position: relative; max-height: 0; top: 0; left: 0; width: 100%; padding: 0 10rem 0 var(--unit-12); background-color: transparent; opacity: 1; pointer-events: all; visibility: visible; border: 0; transition: all .4s var(--bezier);} .menu-main .menu-list-child ul::before, .menu-main .menu-list-child ul::after { content: ''; display: block; position: absolute; top: -1rem; right: 0; width: var(--unit-9); height: var(--unit-9); transform: translateY(-100%); z-index: 2; transition: all .8s var(--bezier);} .menu-main .menu-list-child ul::before { z-index: 3; cursor: pointer;} .menu-main .menu-list-child ul::after { background-image: var(--icon-b-arrow-drop); background-position: center; background-repeat: no-repeat; background-size: var(--unit-6) var(--unit-6); pointer-events: none;} .menu-main .menu-list-child.active ul { max-height: 9999px; padding: var(--unit-9) 10rem 0 var(--unit-12);} .menu-main .menu-list-child.active ul::after { transform: translateY(-100%) rotate(180deg);} .header-search { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: 100%; background-color: var(--c-yellow); transform: translateY(-100%); opacity: 0; pointer-events: none; transition: all .8s var(--bezier);} .header-search form { width: 100%;} .header-search form button[type=submit] { display: none;} .header-search input[type=text] { color: #665C48; text-align: right; border: none; padding-right: var(--unit-20); font-size: var(--txt-h4); font-weight: var(--txt-h4); line-height: var(--txt-h4-lh); letter-spacing: var(--txt-h4-ls);} .header-search .icon { position: absolute; top: 50%; right: calc(var(--padd-main) + var(--padd)); transform: translateY(-50%); border: solid .15rem var(--c-black); padding: .4rem; border-radius: 100%;} .search-active .header-search { transform: translateY(0); pointer-events: all; opacity: 1;} @container style(--size-m: true) { .header { position: fixed;} .header-in { padding: 1.5rem .5rem;} .menu { padding: 0 calc(var(--padd-main) + var(--padd)) var(--unit-15); height: 100%; width: 100%; background-color: var(--c-yellow); transform: translateX(100%); overflow: scroll;} .menu .header-menu-cta { padding: var(--unit-6) 0 var(--unit-13); width: 100%; display: flex; justify-content: flex-end; background: linear-gradient(to bottom, var(--c-yellow) 70%, transparent 100%);} .menu-main .menu-list-child ul { padding: 0 var(--unit-7) 0 var(--unit-5);} .menu-main .menu-list-child.active ul { padding: var(--unit-4) var(--unit-7) 0 var(--unit-5);} .menu-main .menu-list-child ul::after { top: 0;} .header-search input[type=text] { padding-right: var(--unit-12);} } @container style(--size-s: true) { .header-logo img { height: var(--unit-8);} } /* 1.2 -- Footer */ .footer { background-color: var(--c-black); color: var(--c-black-100); padding: var(--unit-12) 0; --c-txt: var(--c-black-100);} .footer-in { row-gap: 20rem;} .footer-in a.hover { opacity: .6;} .footer-logo a, .footer-logo img, .footer-logo svg, .footer-logo video { display: block;} .footer-logo img, .footer-logo svg, .footer-logo video { height: var(--unit-20); width: auto;} .footer-cols { row-gap: var(--unit-10);} .footer-logos img { height: var(--unit-14); width: auto;} .footer-rrss img { height: var(--unit-6); width: auto;} @container style(--size-m: true) { .footer-in { row-gap: var(--unit-20);} .footer-logo img { height: var(--unit-12);} .footer-logos img { height: auto; max-height: var(--unit-10); max-width: 100%;} } /* 1.3 -- Popup */ .popup { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: var(--unit-10); opacity: 0; visibility: hidden; pointer-events: none; overflow: auto; transition: all .4s var(--bezier);} .popup::after, .popup::before { content: ''; display: block; flex-grow: 1;} .popup.active { opacity: 1; visibility: visible; pointer-events: auto;} .popup .popup-content { position: relative; z-index: 2; width: 100%; max-width: var(--max-w-main); padding: var(--padd-main); border-radius: var(--unit); background-color: var(--c-white);} .popup .popup-close { position: fixed; z-index: 3; top: var(--unit-10); right: var(--unit-10); width: var(--unit-10); height: var(--unit-10); display: flex; align-items: center; justify-content: center; background-color: var(--c-white); border-radius: 100%; overflow: hidden; text-indent: -9999px; color: transparent; cursor: pointer; transition: all .4s var(--bezier);} .popup .popup-close::after { position: absolute;} .popup .popup-bg { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; background-color: #ffffff88; backdrop-filter: blur(var(--unit-10));} .popup .popup-bg.active { opacity: 1;} .popup-active, .popup-active body { overflow: hidden;} @container style(--size-s: true) { .popup { padding: var(--unit-10) var(--unit-3);} .popup .popup-content { padding: var(--unit-4);} .popup .popup-close { top: var(--unit-3); right: var(--unit-3);} } /* 2 -- Text */ html, body, input, button, select, textarea { font-family: var(--font-2); font-style: normal; color: var(--c-txt);} html { font-size: var(--txt-html);} body { font-size: var(--txt-body); line-height: var(--txt-body-lh); font-weight: var(--txt-body-fw); letter-spacing: var(--txt-body-ls);} a, button { color: var(--c-txt);} .txt-h0 { font-family: var(--font); font-size: var(--txt-h0); line-height: var(--txt-h0-lh); font-weight: var(--txt-h0-fw); letter-spacing: var(--txt-h0-ls);} .unit-txt h1, .txt-h1 { font-family: var(--font); font-size: var(--txt-h1); line-height: var(--txt-h1-lh); font-weight: var(--txt-h1-fw); letter-spacing: var(--txt-h1-ls);} .unit-txt h2, .txt-h2 { font-family: var(--font); font-size: var(--txt-h2); line-height: var(--txt-h2-lh); font-weight: var(--txt-h2-fw); letter-spacing: var(--txt-h2-ls);} .unit-txt h3, .txt-h3 { font-family: var(--font); font-size: var(--txt-h3); line-height: var(--txt-h3-lh); font-weight: var(--txt-h3-fw); letter-spacing: var(--txt-h3-ls);} .unit-txt h4, .txt-h4 { font-size: var(--txt-h4); line-height: var(--txt-h4-lh); font-weight: var(--txt-h4-fw); letter-spacing: var(--txt-h4-ls);} .unit-txt h5, .txt-h5 { font-size: var(--txt-h5); line-height: var(--txt-h5-lh); font-weight: var(--txt-h5-fw); letter-spacing: var(--txt-h5-ls);} .unit-txt h6, .txt-h6 { font-size: var(--txt-h6); line-height: var(--txt-h6-lh); font-weight: var(--txt-h6-fw); letter-spacing: var(--txt-h6-ls);} .unit-txt p, .unit-txt ul, .unit-txt ol, .txt-body { font-size: var(--txt-body); line-height: var(--txt-body-lh); font-weight: var(--txt-body-fw); letter-spacing: var(--txt-body-ls); text-align: left !important;} .cta { font-size: var(--txt-cta); line-height: var(--txt-cta-lh); font-weight: var(--txt-cta-fw); letter-spacing: var(--txt-cta-ls); text-decoration: none;} .txt-caption { font-size: var(--txt-caption); line-height: var(--txt-caption-lh); font-weight: var(--txt-caption-fw); letter-spacing: var(--txt-caption-ls); text-decoration: none;} input[type=submit] { font-size: var(--txt-submit); line-height: var(--txt-submit-lh); font-weight: var(--txt-submit-fw); letter-spacing: var(--txt-submit-ls);} .unit-txt h1, .unit-txt h2, .unit-txt h3 { margin-bottom: var(--unit-4); margin-top: var(--unit-8);} .unit-txt h4 { margin-bottom: 0; margin-top: 0;} .unit-txt h5 { margin-bottom: var(--txt-h5-lh);} .unit-txt h6 { margin-bottom: var(--txt-h6-lh);} .unit-txt p, .unit-txt ul, .unit-txt ol { margin-bottom: var(--txt-body-lh);} .unit-txt ul, .unit-txt ol { padding-left: var(--unit-4);} .unit-txt li { margin-bottom: var(--unit-2);} .unit-txt h1:first-child, .unit-txt h2:first-child, .unit-txt h3:first-child { margin-top: 0;} .unit-txt h3 + h4 { margin-top: calc(0px - var(--unit-2));} .unit-txt p + ul { margin-top: calc(0px - var(--txt-body-lh));} .unit-txt :last-child { margin-bottom: 0;} a.icon { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.15em;} /* -- Table */ .unit-txt table { width: 100%; border-radius: var(--unit);} .unit-txt tr th, .unit-txt tr td { padding: var(--unit-2); vertical-align: top; border: var(--border-1-b); max-width: 33%;} .unit-txt tr th { background-color: var(--c-black-200); text-align: left; font-size: var(--txt-h4); font-weight: var(--txt-h4-fw); line-height: var(--txt-h4-lh); letter-spacing: var(--txt-h4-ls);} .unit-txt tr td { font-size: var(--txt-body); font-weight: var(--txt-body-fw); line-height: var(--txt-body-lh); letter-spacing: var(--txt-body-ls);} .unit-txt a { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.15em;} .unit-txt a.hover { color: var(--c-txt);} .txt-strong, strong, b { font-weight: var(--fw-strong);} .txt-italic, em, i { font-style: italic;} .txt-a-l { text-align: left;} .txt-a-c { text-align: center;} .txt-a-r { text-align: right;} .txt-upper { text-transform: uppercase;} .txt-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .txt-line-2 { display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .txt-line-3 { display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;} .header a, .footer a { text-decoration: none;} sup { font-size: calc(0.5em + .4rem);} .txt-grey { color: var(--c-black-300); --c-txt: var(--c-black-300);} .txt-color { color: var(--c-yellow);} .unit-txt a.external-link:has(img) { display: none;} .line-break { line-break: anywhere;} /* 3 -- Interaction */ ::selection { background: var(--c-black); color: var(--c-white);} ::-moz-selection { background: var(--c-black); color: var(--c-white);} ::-webkit-selection { background: var(--c-black); color: var(--c-white);} /* a.hover, a.active { color: var(--c-black);} a:focus, a:active { color: var(--c-black);} */ /* 3.1 -- CTAs */ .cta { display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer; text-decoration: none;} .cta-box { -webkit-appearance: none; appearance: none; padding: var(--cta-padd);} .cta-box.cta-box-m { padding: var(--cta-padd-m);} .cta-box.cta-box-s { padding: var(--cta-padd-s);} .cta-box.cta-primary { background-color: var(--cta-p-color-bg); color: var(--cta-p-color); border: var(--cta-p-border);} .cta-box.cta-primary.hover, .hover .cta-box.cta-primary { background-color: var(--cta-p-hov-color-bg); color: var(--cta-p-hov-color); border-color: var(--cta-p-hov-border-color);} .cta-box.cta-secondary { background-color: var(--cta-s-color-bg); color: var(--cta-s-color); border: var(--cta-s-border); border-radius: var(--cta-border-r);} .cta-box.cta-secondary.hover, .hover .cta-box.cta-secondary, .cta-box.cta-secondary.active { background-color: var(--cta-s-hov-color-bg); color: var(--cta-s-hov-color); border-color: var(--cta-s-hov-border-color); font-style: italic;} .cta-box:disabled { background-color: var(--c-black-100); color: var(--c-white); border-color: var(--c-black-100);} .cta-box:disabled.hover, .hover .cta-box:disabled { background-color: var(--c-black-100); color: var(--c-white); border-color: var(--c-black-100);} .cta.icon { gap: var(--unit-2);} @container style(--size-m: true) { .cta.icon { gap: var(--unit);} } /* 3.2 -- Form */ input, select, textarea { width: 100%;} input[type=submit] { width: auto;} /* 3.2.1 -- Input, select, textarea */ input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea { font-size: var(--txt-input); line-height: var(--txt-input-lh); font-weight: var(--txt-input-fw); letter-spacing: var(--txt-input-ls); padding: var(--input-padd); border-radius: var(--input-border-r); background-color: var(--input-color-bg); color: var(--input-color); border-bottom: var(--input-border);} textarea { min-height: var(--unit-30); border: var(--input-border); padding: var(--unit-2);} select { padding-right: var(--select-padd-r); background-image: var(--icon-b-arrow-drop); background-repeat: no-repeat; background-position: calc(100% - var(--unit-3)); background-size: var(--unit-4) var(--unit-4);} /* 3.2.2 -- Button */ input[type=submit] { -webkit-appearance: none; appearance: none; font-size: var(--txt-submit); line-height: var(--txt-submit-lh); font-weight: var(--txt-submit-fw); letter-spacing: var(--txt-submit-ls); border-radius: var(--submit-border-r); padding: var(--submit-padd); background: var(--submit-color-bg); color: var(--submit-color); border: var(--submit-border);} input[type=submit].hover { background-color: var(--submit-hov-color-bg); color: var(--submit-hov-color); border-color: var(--submit-hov-border-color);} /* 3.2.3 -- Checkbox */ input[type=checkbox], input[type=radio] { width: var(--checkbox-width); height: var(--checkbox-height); border: var(--border-1-b); background-color: transparent; background-size: 0 0; background-position: center; background-repeat: no-repeat; margin: auto 0;} input[type=checkbox]:checked, input[type=radio]:checked { border-color: var(--c-black); background-color: transparent; background-size: var(--checkbox-bg-size);} input[type=checkbox]:checked { background-image: var(--icon-b-check); background-repeat: no-repeat; background-position: center;} input[type=radio]:checked { background-image: var(--icon-b-radio); background-repeat: no-repeat; background-position: center;} input[type=checkbox]:checked + *, input[type=radio]:checked + * { color: var(--c-black);} /* 3.2.4 -- Labels */ label, legend { cursor: pointer; font-size: var(--txt-h5); line-height: var(--txt-h5-lh); font-weight: var(--txt-h5-fw); letter-spacing: var(--txt-h5-ls);} /* 3.2.5 -- :focus */ input:focus, textarea:focus, select:focus { border-color: var(--c-black);} :focus::placeholder { color: var(--c-black); border-color: var(--c-black);} /* 3.2.6 -- Input range */ input[type="range"] { -webkit-appearance: none; display: block; appearance: none; width: 100%; height: var(--unit); border-radius: var(--unit); outline: none; background-color: var(--range-color-bg); transition: background 0.2s var(--bezier);} /* WebKit */ input[type="range"]::-webkit-slider-runnable-track { height: var(--unit); border-radius: var(--unit); margin-top: 0; background: linear-gradient(to right, var(--range-color) 0%, var(--range-color) var(--val), #A1A1A100 var(--val), #A1A1A100 100%);} input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--unit-6); height: var(--unit-6); border-radius: 50%; cursor: pointer; transition: transform 0.2s var(--bezier); background-color: var(--range-color); margin-top: -1rem;} input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); } */ /* Firefox */ input[type="range"]::-moz-range-track { background: var(--c-white);} input[type="range"]::-moz-range-progress { background: var(--range-color);} input[type="range"]::-moz-range-thumb { width: var(--unit-6); height: var(--unit-6); border-radius: 50%; cursor: pointer; transition: transform 0.2s; background-color: var(--range-color);} @container style(--size-s: true) { input[type="range"]::-webkit-slider-thumb { width: var(--unit-5); height: var(--unit-5); margin-top: -0.75rem;} input[type="range"]::-moz-range-thumb { width: var(--unit-5); height: var(--unit-5);} } /* 3.3 -- Cursor */ #cursor { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 9998; display: flex; align-items: center; overflow: hidden; justify-content: center; overflow: visible; transform: translate(-50%, -50%); transform-origin: center; pointer-events: none;} #cursor:after { content: ''; position: absolute; display: block; width: var(--unit); height: var(--unit); background-color: var(--c-black); border: 1px solid var(--c-black); border-radius: 50%; z-index: 1; transition: all .2s var(--bezier);} #cursor.hover:after { width: var(--unit-16); height: var(--unit-16); background: transparent;} #cursor.txt:after { width: 0; height: 0; opacity: 0;} #cursor.txt .cursor-txt { opacity: 1; visibility: visible; transform: scale(1); padding: var(--unit) var(--unit-3); max-width: max-content;} #cursor .cursor-txt { opacity: 0; visibility: hidden; transform: scale(0); max-width: 0; position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; border-radius: var(--unit-10); white-space: nowrap; background-color: var(--c-black); color: var(--c-white); font-size: var(--txt-h6); transition: all .2s var(--bezier);} #cursor.c-black:after { border-color: var(--c-black); background-color: var(--c-black);} #cursor.c-black .cursor-txt { background-color: var(--c-black); color: var(--c-white);} #cursor.c-white:after { border-color: var(--c-white); background-color: var(--c-white);} #cursor.c-white .cursor-txt { background-color: var(--c-white); color: var(--c-black);} .window-inactive #cursor::after, .mobile-device #cursor { display: none;} /* 4 -- Icons */ .icon::after { content: ''; display: block; width: var(--unit-6); height: var(--unit-6); background-position: center; background-repeat: no-repeat; background-size: contain; flex-shrink: 0;} .icon-xs::after { width: var(--unit-4); height: var(--unit-4);} .icon-s::after { width: var(--unit-5); height: var(--unit-5);} .icon-m::after { width: var(--unit-6); height: var(--unit-6);} .icon-l::after { width: var(--unit-8); height: var(--unit-8);} .icon-xl::after { width: var(--unit-12); height: var(--unit-12);} @container style(--size-s: true) { .icon-xs::after { width: var(--unit-3); height: var(--unit-3);} .icon-s::after { width: var(--unit-4); height: var(--unit-4);} .icon-l::after { width: var(--unit-6); height: var(--unit-6);} .icon-xl::after { width: var(--unit-6); height: var(--unit-6);} } .icon-b-arrow::after { background-image: var(--icon-b-arrow);} .icon-b-arrow-b::after { background-image: var(--icon-b-arrow-b);} .icon-b-arrow-drop::after { background-image: var(--icon-b-arrow-drop);} .icon-b-arrow-l::after { background-image: var(--icon-b-arrow-l);} .icon-b-arrow-r::after { background-image: var(--icon-b-arrow-r);} .icon-b-arrow-t::after { background-image: var(--icon-b-arrow-t);} .icon-b-check::after { background-image: var(--icon-b-check);} .icon-b-cross::after { background-image: var(--icon-b-cross);} .icon-b-download::after { background-image: var(--icon-b-download);} .icon-b-less::after { background-image: var(--icon-b-less);} .icon-b-plus::after { background-image: var(--icon-b-plus);} .icon-b-radio::after { background-image: var(--icon-b-radio);} .icon-b-search::after { background-image: var(--icon-b-search);} .icon-b-play::after { background-image: var(--icon-b-play);} .icon-b-pause::after { background-image: var(--icon-b-pause);} .icon-b-rewind::after { background-image: var(--icon-b-rewind);} .icon-b-forward::after { background-image: var(--icon-b-forward);} .icon-b-volume::after { background-image: var(--icon-b-volume);} .icon-b-volume-muted::after { background-image: var(--icon-b-volume-muted);} .icon-b-fullscreen::after { background-image: var(--icon-b-fullscreen);} .icon-b-lang::after { background-image: var(--icon-b-lang);} .icon-w-arrow::after { background-image: var(--icon-w-arrow);} .icon-w-arrow-b::after { background-image: var(--icon-w-arrow-b);} .icon-w-arrow-drop::after { background-image: var(--icon-w-arrow-drop);} .icon-w-arrow-l::after { background-image: var(--icon-w-arrow-l);} .icon-w-arrow-r::after { background-image: var(--icon-w-arrow-r);} .icon-w-arrow-t::after { background-image: var(--icon-w-arrow-t);} .icon-w-check::after { background-image: var(--icon-w-check);} .icon-w-cross::after { background-image: var(--icon-w-cross);} .icon-w-download::after { background-image: var(--icon-w-download);} .icon-w-less::after { background-image: var(--icon-w-less);} .icon-w-plus::after { background-image: var(--icon-w-plus);} .icon-w-radio::after { background-image: var(--icon-w-radio);} .icon-w-search::after { background-image: var(--icon-w-search);} .icon-w-play::after { background-image: var(--icon-w-play);} .icon-w-pause::after { background-image: var(--icon-w-pause);} .icon-w-rewind::after { background-image: var(--icon-w-rewind);} .icon-w-forward::after { background-image: var(--icon-w-forward);} .icon-w-volume::after { background-image: var(--icon-w-volume);} .icon-w-volume-muted::after { background-image: var(--icon-w-volume-muted);} .icon-w-fullscreen::after { background-image: var(--icon-w-fullscreen);} .icon-c-arrow::after { background-image: var(--icon-c-arrow);} .icon-c-arrow-drop::after { background-image: var(--icon-c-arrow-drop);} /* 5 -- Animation */ a, button, .cta, .icon::after, .header, .header::before, .header .cta-menu::before, .header .cta-menu::after, .menu, input, select, textarea, ::placeholder { transition: all .8s var(--bezier);} input[type="checkbox"], input[type="radio"] { transition: all .2s var(--bezier);} [data-view] { opacity: 0; transition: all 1.2s var(--bezier);} [data-view].view { opacity: 1; transform: translate(0);} [data-view=scale] { transform: scale(.9);} [data-view=scale].view { transform: scale(1);} [data-view=top] { transform: translateY(8rem);} [data-view=top].view { transform: translateY(0);} [data-view=bottom] { transform: translateY(-8rem);} [data-view=bottom].view { transform: translateY(0);} [data-view=left] { transform: translateX(8rem);} [data-view=left].view { transform: translateX(0);} [data-view=right] { transform: translateX(-8rem);} [data-view=right].view { transform: translateX(0);} @keyframes fadein { 0% { opacity: 0;} 100% { opacity: 1;} } @keyframes fadeout { 0% { opacity: 1;} 100% { opacity: 0;} } /* The end -- :P */