/*
Theme Name: Erika's Work Portfolio
Theme URI: Portfolio
Version: v 5.1
Author: Erika Rubio
Author URI: www.erika.com
Description: Wordpress work theme.
*/
@import url('css/protected-base.css');
/** Estilos **/
:root {
--white: #ffffff;
--off-white: #F6F6F6;
--off-white-82: rgba(246, 246, 246, 0.82);
--light-grey: #d7d9dd;
--dark-grey: #7e7e7e;
--graphite: #79828d;
--graphite-50: rgba(121, 130, 141, 0.5);
--graphite-30: rgba(121, 130, 141, 0.3);
--coal: #292929;
--coal-82: rgba(41, 41, 41, 0.82);
--oil: #1e1e1e;
--error: #f5002c;
--success: #00d032;
--warning: #ffe600;
--azure-blue: #007aff;
--azure-blue-30: rgba(0, 122, 255, 0.5);
--sky-blue: #5ac8fa;
--sky-blue-30: rgba(212, 242, 255, 0.16);
--panel-shadows: 0px 2px 25px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.2);
--baja-white: #E5E4D7;
--coral: #FF7F50;
--charcoal: #403D38;
/** Spacing */
--tiny-spacing: 6px;
--small-spacing: 12px;
--base-spacing: 24px;
--large-spacing: 48px;
--huge-spacing: 96px;
/** Transitions */
--transition: 300ms cubic-bezier(0.27, 0.175, 0.285, 1.01);
--pop-transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) 0.05s;
--slide-up-transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
--tabs-transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
/* Case Colors */
--navy-blue: #3F5366;
--sage-green: #7FB069;
--soft-orange: #E6AA68;
--rust-orange: #CA5310;
--ice-blue: #F5F7FA;
--slate-gray: #6E7A8A;
/* Complementary Colors */
--light-periwinkle: #D7D8E5;
--dusty-lavender: #7C7F9B;
/* Analogous Colors */
--pink-sand: #E5DAD7;
--pale-sage: #DBE5D7;
/* Split Complementary Colors */
--soft-sky: #D7E0E5;
--pale-lavender: #D7D0E5;
/* Triadic Colors */
--pale-aqua: #D7E5E4;
--soft-lilac: #E4D7E5;
/* Tetradic Colors */
--mint-cream: #D7E5D8;
--pale-mauve: #E5D7E4;
/* Monochromatic Colors */
--eggshell: #FFFDF0;
--stone: #CBC9BD;
--taupe: #9E9C8F;
--olive-gray: #726F62;
/* Shades */
--tint-1: #F2F1E8;
--shade-1: #C5C4B7;
--shade-2: #A5A497;
--shade-3: #7A7970;
/* Fonts */
--header-font: 'Neue Haas Unica', 'Segoe UI', sans-serif;
--body-font: 'Helvetica', 'Arial', sans-serif;
}
/** Scheme DiaNoche */
color-scheme: light dark;
/* Theme Colors - Light Mode (default) */
--bg-primary: var(--white);
--bg-secondary: var(--off-white);
--bg-tertiary: var(--baja-white);
--text-primary: var(--coal);
--text-secondary: var(--charcoal);
--text-tertiary: var(--graphite);
--border-color: var(--light-grey);
--card-bg: var(--white);
--card-shadow: var(--graphite-30);
--section-padding: var(--base-spacing);
--border-radius: 8px;
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: var(--oil);
--bg-secondary: var(--coal);
--bg-tertiary: var(--coal-82);
--text-primary: var(--off-white);
--text-secondary: var(--light-grey);
--text-tertiary: var(--dark-grey);
--border-color: var(--graphite-50);
--card-bg: var(--coal);
--card-shadow: rgba(0, 0, 0, 0.3);
}
}
/* Dark Mode Toggle (for manual control) */
body.dark-mode {
--bg-primary: var(--oil);
--bg-secondary: var(--coal);
--bg-tertiary: var(--coal-82);
--text-primary: var(--off-white);
--text-secondary: var(--light-grey);
--text-tertiary: var(--dark-grey);
--border-color: var(--graphite-50);
--card-bg: var(--coal);
--card-shadow: rgba(0, 0, 0, 0.3);
}
:root {
--footer-bg: #f8f8f8;
--footer-text: #24263a;
--footer-link: #24263a;
--footer-link-hover: #5966d2;
--footer-icon-bg: #f5f5f7;
--footer-icon-fill: #24263a;
--footer-divider: rgba(0, 0, 0, 0.1);
--footer-back-to-top-bg: #f5f5f7;
--footer-back-to-top-text: #24263a;
--footer-back-to-top-hover: #e0e0e5;
--footer-shadow: rgba(0, 0, 0, 0.08);
--contact-btn-bg: #000000;
--contact-btn-text: #ffffff;
--contact-btn-hover-bg: #333333;
--contact-btn-shadow: rgba(0, 0, 0, 0.2);
}
/* Dark mode overrides using system preference */
@media (prefers-color-scheme: dark) {
:root {
--footer-bg: #1a1a1a;
--footer-text: #e0e0e0;
--footer-link: #fff;
--footer-link-hover: #5966d2;
--footer-icon-bg: rgba(255, 255, 255, 0.1);
--footer-icon-fill: #fff;
--footer-divider: rgba(255, 255, 255, 0.15);
--footer-back-to-top-bg: rgba(255, 255, 255, 0.1);
--footer-back-to-top-text: #fff;
--footer-back-to-top-hover: rgba(255, 255, 255, 0.2);
--footer-shadow: rgba(0, 0, 0, 0.2);
--contact-btn-bg: #ffffff;
--contact-btn-text: #000000;
--contact-btn-hover-bg: #e0e0e0;
--contact-btn-shadow: rgba(255, 255, 255, 0.2);
}
}
/** Reset */
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
RESET
*/
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html button, html hr, html input {
overflow: visible;
}
html audio, html canvas, html progress, html video {
display: inline-block;
}
html progress, html sub, html sup {
vertical-align: baseline;
}
html [type=checkbox], html [type=radio], html legend {
box-sizing: border-box;
padding: 0;
}
html html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
html body {
margin: 0;
}
html article, html aside, html details, html figcaption, html figure, html footer, html header, html main, html menu, html nav, html section {
display: block;
}
html figure {
margin: 1em 40px;
}
html hr {
box-sizing: content-box;
height: 0;
}
html code, html kbd, html pre, html samp {
font-family: monospace,monospace;
font-size: 1em;
}
html a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
html abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
html b, html strong {
font-weight: bolder;
}
html dfn {
font-style: italic;
}
html mark {
background-color: #ff0;
color: #000;
}
html small {
font-size: 80%;
}
html sub, html sup {
font-size: 75%;
line-height: 0;
position: relative;
}
html sub {
bottom: -.25em;
}
html sup {
top: -.5em;
}
html audio:not([controls]) {
display: none;
height: 0;
}
html img {
border-style: none;
}
html svg:not(:root) {
overflow: hidden;
}
html button, html input, html optgroup, html select, html textarea {
font-family: sans-serif;
font-size: 100%;
margin: 0;
}
html button, html select {
text-transform: none;
}
html [type=button]::-moz-focus-inner, html [type=reset]::-moz-focus-inner, html [type=submit]::-moz-focus-inner, html button::-moz-focus-inner {
border-style: none;
padding: 0;
}
html [type=button]:-moz-focusring, html [type=reset]:-moz-focusring, html [type=submit]:-moz-focusring, html button:-moz-focusring {
outline: ButtonText dotted 1px;
}
html fieldset {
padding: .35em .75em .625em;
}
html legend {
color: inherit;
display: table;
max-width: 100%;
white-space: normal;
}
html textarea {
overflow: auto;
}
html [type=number]::-webkit-inner-spin-button, html [type=number]::-webkit-outer-spin-button {
height: auto;
}
html [type=search] {
outline-offset: -2px;
}
html [type=search]::-webkit-search-cancel-button, html [type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
html ::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
html summary {
display: list-item;
}
html [hidden], html template {
display: none;
}
/* Defaults */
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
img {
-webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-shrink: 0;
flex-shrink: 0;
max-width: 100%;
vertical-align: bottom;
}
section {
overflow: hidden;
}
::selection {
background: #5966d2;
color: #fff;
}
::-moz-selection {
background: #5966d2;
color: #fff;
}
/*
TYPOGRAPHY
*/
html {
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
body {
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
line-height: 1.5rem;
overflow-x: hidden;
}
body span.highlight {
color: var(--coral);
letter-spacing: 1.5px;
font-weight: 800;
text-align: inherit;
text-shadow: 8px;
}
a {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
color: var(--azure-blue);
cursor: pointer;
text-decoration: none;
}
a:hover:not(.button) {
color: var(--azure-blue);
}
blockquote {
font-size: 1.25rem;
font-weight: 400;
letter-spacing: 0.3px;
line-height: 2rem;
-webkit-border-radius: 0.1875rem;
-moz-border-radius: 0.1875rem;
border-radius: 0.1875rem;
background: #f6f6f9;
border-left: 3px solid #ccced0;
font-style: italic;
margin: 0 0 1rem 0;
padding: 1rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 1rem 0;
}
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
margin: 0;
}
h1 {
font-size: 4rem;
font-weight: 900;
line-height: 5.25rem;
}
@media only screen and (max-width: 479px) {
h1 {
font-size: 3rem;
line-height: 3.75rem;
}
}
h2 {
font-size: 3rem;
font-weight: 900;
line-height: 3.75rem;
}
@media only screen and (max-width: 479px) {
h2 {
font-size: 2.5rem;
line-height: 3.25rem;
}
}
h3 {
font-size: 2rem;
font-weight: 900;
line-height: 2.75rem;
}
@media only screen and (max-width: 479px) {
h3 {
font-size: 1.75rem;
line-height: 2.25rem;
}
}
h4 {
font-size: 1.5rem;
font-weight: 700;
line-height: 2.25rem;
}
h5 {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.75rem;
}
h6 {
font-size: 1rem;
font-weight: 700;
line-height: 1.5rem;
margin: 0 0 0.5rem 0;
}
p {
margin: 0 0 1rem 0;
}
p:last-child {
margin: 0;
}
.lead {
font-size: 1.75rem;
font-weight: 300;
line-height: 2.5rem;
}
@media only screen and (max-width: 479px) {
.lead {
font-size: 1.5rem;
line-height: 2rem;
}
}
.paragraph {
font-size: 1.25rem;
font-weight: 400;
letter-spacing: 0.3px;
line-height: 2rem;
}
@media only screen and (max-width: 479px) {
.paragraph {
font-size: 1.125rem;
letter-spacing: normal;
line-height: 1.75rem;
}
}
.muted {
opacity: 0.4;
}
.dark {
color: var(--egg-shell);
}
.dark a:not(.button) {
color: var(--egg-shell);
}
.dark blockquote {
color: var(--egg-shell);
}
.dark p {
opacity: 0.8;
}
/*
ICONS
*/
/* Skills-specific styles with unique namespace */
.skills-container {
background-color: #f8f8f8;
padding: 60px 20px;
width: 100%;
}
.skills-heading {
text-align: center;
margin-bottom: 40px;
}
.skills-title {
font-size: 1.2rem;
font-weight: 400;
color: #777;
margin-bottom: 5px;
}
.skills-subtitle {
font-size: 2.5rem;
font-weight: 400;
margin-bottom: 50px;
}
.skills-grid {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
justify-content: center;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.skills-col {
flex: 0 0 25%;
max-width: 25%;
padding: 0 15px;
margin-bottom: 30px;
box-sizing: border-box;
}
/* Card styling */
.skills-card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
background-color: white;
border-radius: 16px;
padding: 24px 16px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: all 0.3s ease;
position: relative;
cursor: pointer;
}
.skills-card:hover,
.skills-card:focus {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.skills-icon-wrapper {
margin-bottom: 16px;
display: flex;
justify-content: center;
align-items: center;
min-height: 70px;
position: relative;
}
.skills-icon {
width: 60px;
height: 60px;
transition: all 0.3s ease;
display: block;
}
.skills-card:hover .skills-icon,
.skills-card:focus .skills-icon {
transform: scale(1.05);
}
.skills-card-title {
font-size: 16px;
font-weight: 500;
color: #555;
margin-top: 8px;
margin-bottom: 0;
transition: all 0.3s ease;
text-align: center;
}
.skills-card:hover .skills-card-title,
.skills-card:focus .skills-card-title {
color: #FF7F50;
}
.skills-card-description {
font-size: 14px;
color: #777;
margin-top: 8px;
margin-bottom: 0;
line-height: 1.4;
text-align: center;
}
/* SVG color themes with unique names */
.skills-color-primary {
fill: #FF7F50;
}
.skills-color-dark {
fill: #333333;
}
.skills-color-light {
fill: #E8E8E8;
}
.skills-color-white {
fill: #FFFFFF;
}
/* Responsive adjustments with unique namespace */
@media (max-width: 1200px) {
.skills-subtitle {
font-size: 2.2rem;
}
.skills-icon {
width: 55px;
height: 55px;
}
}
@media (max-width: 992px) {
.skills-col {
flex: 0 0 50%;
max-width: 50%;
}
.skills-subtitle {
font-size: 2rem;
margin-bottom: 40px;
}
.skills-container {
padding: 50px 15px;
}
}
@media (max-width: 768px) {
.skills-card-title {
font-size: 15px;
}
.skills-card-description {
font-size: 13px;
}
.skills-subtitle {
font-size: 1.8rem;
margin-bottom: 30px;
}
}
@media (max-width: 576px) {
.skills-col {
flex: 0 0 100%;
max-width: 100%;
}
.skills-container {
padding: 40px 15px;
}
.skills-title {
font-size: 1.1rem;
}
.skills-subtitle {
font-size: 1.6rem;
margin-bottom: 25px;
}
.skills-icon {
width: 50px;
height: 50px;
}
.skills-icon-wrapper {
min-height: 60px;
}
}
/* Animation for card interaction */
@keyframes skills-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.skills-card:active .skills-icon {
animation: skills-pulse 0.3s ease-in-out;
}
/* Accessibility enhancements */
.skills-card:focus {
outline: 2px solid #FF7F50;
outline-offset: 2px;
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.skills-container {
background-color: #222;
}
.skills-card {
background-color: #333;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.skills-title {
color: #ccc;
}
.skills-subtitle {
color: #fff;
}
.skills-card-title {
color: #eee;
}
.skills-card-description {
color: #bbb;
}
.skills-color-light {
fill: #555;
}
.skills-color-dark {
fill: #eee;
}
}
/*
GRID
*/
.row {
display: table;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}
.row .col-one-half {
width: 48%;
}
.row .col-one-third {
width: 30.6666666667%;
}
.row .col-one-fourth {
width: 22%;
}
.row .col-one-fifth {
width: 16.8%;
}
.row .col-two-thirds {
width: 65.3333333333%;
}
.row .col-two-fourths {
width: 48%;
}
.row .col-two-fifths {
width: 37.6%;
}
.row .col-three-fourths {
width: 74%;
}
.row .col-three-fifths {
width: 58.4%;
}
.row .col-four-fifths {
width: 79.2%;
}
.row [class^="col-"] {
float: left;
margin: 0 2%;
}
.row [class^="col-"]:first-child {
margin-left: 0;
}
.row [class^="col-"]:last-child {
margin-right: 0;
}
@media only screen and (max-width: 1023px) {
.row [class^="col-"] {
margin: 3rem 2% 0 2%;
width: 48%;
}
.row [class^="col-"]:nth-child(-n+2) {
margin-top: 0;
}
.row [class^="col-"]:nth-child(odd) {
margin-left: 0;
}
.row [class^="col-"]:nth-child(even) {
margin-right: 0;
}
.row [class^="col-"]:last-child:nth-child(odd) {
width: 100%;
}
.row [class*="-fifth"] {
margin: 3rem 0 0 0;
width: 100%;
}
.row [class*="-fifth"]:nth-child(2) {
margin-top: 3rem;
}
}
@media only screen and (max-width: 767px) {
.row [class^="col-"] {
margin: 3rem 0 0 0;
width: 100%;
}
.row [class^="col-"]:nth-child(2) {
margin-top: 3rem;
}
}
/* Reduce spacing between rows */
@media only screen and (max-width: 1023px) {
.row.reduce-spacing [class^="col-"] {
margin: 1rem 2% 0 2%;
}
.row.reduce-spacing [class^="col-"]:last-child {
margin-right: 0;
}
.row.reduce-spacing [class^="col-"]:nth-child(-n+2) {
margin-top: 0;
}
.row.reduce-spacing [class^="col-"]:nth-child(odd) {
margin-left: 0;
}
.row.reduce-spacing [class^="col-"]:nth-child(even) {
margin-right: 0;
}
.row.reduce-spacing [class*="-fifth"] {
margin: 1rem 0 0 0;
}
.row.reduce-spacing [class*="-fifth"]:nth-child(2) {
margin-top: 1rem;
}
}
@media only screen and (max-width: 767px) {
.row.reduce-spacing [class^="col-"] {
margin: 1rem 0 0 0;
}
.row.reduce-spacing [class^="col-"]:nth-child(2) {
margin-top: 1rem;
}
}
/* Reverse the order of columns when going full-width */
@media only screen and (max-width: 767px) {
.row.reverse-order [class^="col-"] {
margin: 3rem 0 0 0;
}
.row.reverse-order [class^="col-"]:last-child {
margin-top: 0;
}
.row.reverse-order [class^="col-"]:nth-child(1) {
-webkit-order: 5;
-moz-order: 5;
order: 5;
}
.row.reverse-order [class^="col-"]:nth-child(2) {
-webkit-order: 4;
-moz-order: 4;
order: 4;
}
.row.reverse-order [class^="col-"]:nth-child(3) {
-webkit-order: 3;
-moz-order: 3;
order: 3;
}
.row.reverse-order [class^="col-"]:nth-child(4) {
-webkit-order: 2;
-moz-order: 2;
order: 2;
}
.row.reverse-order [class^="col-"]:nth-child(5) {
-webkit-order: 1;
-moz-order: 1;
order: 1;
}
.row.reverse-order.reduce-spacing [class^="col-"] {
margin: 1rem 0 0 0;
}
.row.reverse-order.reduce-spacing [class^="col-"]:last-child {
margin-top: 0;
}
}
/* Force a minimum of two columns */
@media only screen and (max-width: 1023px) {
.row.min-two-columns:not(.reverse-order) [class^="col-"] {
margin: 3rem 2% 0 2%;
width: 48%;
}
.row.min-two-columns:not(.reverse-order) [class^="col-"]:last-child {
margin-right: 0;
}
.row.min-two-columns:not(.reverse-order) [class^="col-"]:nth-child(-n+2) {
margin-top: 0;
}
.row.min-two-columns:not(.reverse-order) [class^="col-"]:nth-child(odd) {
margin-left: 0;
}
.row.min-two-columns:not(.reverse-order) [class^="col-"]:nth-child(even) {
margin-right: 0;
}
.row.min-two-columns:not(.reverse-order) [class^="col-"]:last-child:nth-child(odd) {
width: 100%;
}
.row.min-two-columns:not(.reverse-order).reduce-spacing [class^="col-"] {
margin: 1rem 2% 0 2%;
}
.row.min-two-columns:not(.reverse-order).reduce-spacing [class^="col-"]:last-child {
margin-right: 0;
}
.row.min-two-columns:not(.reverse-order).reduce-spacing [class^="col-"]:nth-child(-n+2) {
margin-top: 0;
}
.row.min-two-columns:not(.reverse-order).reduce-spacing [class^="col-"]:nth-child(odd) {
margin-left: 0;
}
.row.min-two-columns:not(.reverse-order).reduce-spacing [class^="col-"]:nth-child(even) {
margin-right: 0;
}
}
/* Remove gutter between columns */
.row.no-gutter .col-one-half {
width: 50%;
}
.row.no-gutter .col-one-third {
width: 33.3333333333%;
}
.row.no-gutter .col-one-fourth {
width: 25%;
}
.row.no-gutter .col-one-fifth {
width: 20%;
}
.row.no-gutter .col-two-thirds {
width: 66.6666666667%;
}
.row.no-gutter .col-two-fourths {
width: 50%;
}
.row.no-gutter .col-two-fifths {
width: 40%;
}
.row.no-gutter .col-three-fourths {
width: 75%;
}
.row.no-gutter .col-three-fifths {
width: 60%;
}
.row.no-gutter .col-four-fifths {
width: 80%;
}
.row.no-gutter [class^="col-"] {
margin: 0 !important;
}
@media only screen and (max-width: 1023px) {
.row.no-gutter [class^="col-"] {
width: 50%;
}
.row.no-gutter [class*="-fifth"] {
width: 100%;
}
}
@media only screen and (max-width: 767px) {
.row.no-gutter [class^="col-"] {
width: 100%;
}
}
/*
ALIGN
*/
.center {
text-align: center;
}
.left {
float: left;
text-align: left;
}
.right {
float: right;
text-align: right;
}
.middle {
display: table;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
}
@media only screen and (max-width: 1023px) {
.center-desktop {
text-align: center;
}
}
@media only screen and (max-width: 767px) {
.center-tablet {
text-align: center;
}
}
@media only screen and (max-width: 479px) {
.center-mobile {
text-align: center;
}
}
/*
TOOLS
*/
.bg-color-1{
background: #f4f3ef;
}
.bg-color-2 {
background: #D0D0D0;
}
.bg-color-3 {
background: #FFFDF0;
}
.bg-color-4 {
background: #FFFFFF;
}
.bg-color-5 {
background: #D7D8E5;
}
.bg-color-6 {
background: #E5E4D7;
}
.bg-color-7 {
background: #E9E9E9;
}
.bg-color-8 {
background: #D0D0D0;
}
.bg-color-grey {
background: #BBBBBB;
}
/* Gradients */
.bg-gradient-coral-safety {
background: #FF7F50;
background: -webkit-linear-gradient(140deg, #FF7F50 25%, #F77700 100%);
background: -moz-linear-gradient(140deg, #FF7F50 25%, #F77700 100%);
background: -ms-linear-gradient(140deg, #FF7F50 25%, #F77700 100%);
background: -o-linear-gradient(140deg, #FF7F50 25%, #F77700 100%);
background: linear-gradient(140deg, #FF7F50 25%, #F77700 100%);
}
/* Advanced backgrounds */
[class*="bg-image-"],
[class*="overlay-"] {
overflow: hidden;
position: relative;
z-index: 0;
}
[class*="bg-image-"]:before, [class*="bg-image-"]:after,
[class*="overlay-"]:before,
[class*="overlay-"]:after {
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
bottom: -1px;
content: "";
height: 101%;
left: -1%;
position: absolute;
top: -1px;
width: 102%;
}
[class*="bg-image-"]:before,
[class*="overlay-"]:before {
z-index: -1;
}
[class*="bg-image-"]:after,
[class*="overlay-"]:after {
z-index: -2;
}
/* Overlays */
.overlay:before {
background: rgba(255, 255, 255, 0.5);
}
.dark.overlay:before {
background: rgba(255, 255, 255, 0.5);
}
.overlay-shape-01:before {
background: url(../media/bg/shape-01.svg);
}
.dark.overlay-shape-01:before {
background: url(../media/bg/shape-dark-01.svg);
}
.overlay-shape-02:before {
background: url(../media/bg/shape-02.svg);
}
.dark.overlay-shape-02:before {
background: url(../media/bg/shape-dark-02.svg);
}
/* Images */
.bg-image-01:after {
background: url(../media/bg/image-01@2x.jpg);
}
@media only screen and (max-width: 479px) {
.bg-image-01:after {
background: url(../media/bg/image-01.jpg);
}
}
.bg-image-02:after {
background: url(../media/bg/image-02@2x.jpg);
}
@media only screen and (max-width: 479px) {
.bg-image-02:after {
background: url(../media/bg/image-02.jpg);
}
}
.bg-image-03:after {
background: url(../media/bg/image-03@2x.jpg);
}
@media only screen and (max-width: 479px) {
.bg-image-03:after {
background: url(../media/bg/image-03.jpg);
}
}
.bg-image-04 {
background: url(../media/nuevo/bg/image-04@2x-2.jpg);
}
@media only screen and (max-width: 479px) {
.bg-image-04 {
background: url(../media/nuevo/bg/image-04-2.jpg);
}
}
.bg-image-05 {
background: url(../media/nuevo/bg/image-05@2x.png);
}
@media only screen and (max-width: 479px) {
.bg-image-05 {
background: url(../media/nuevo/bg/image-05.png);
}
}
/* -----------------------------------------------------------------------------
# Tools - Divider
----------------------------------------------------------------------------- */
.divider {
border-bottom: 1px solid #ececee;
margin: 3rem 0;
width: 100%;
}
.dark .divider {
border-bottom: 1px solid #24263a;
}
/* -----------------------------------------------------------------------------
# Tools - Full Screen
----------------------------------------------------------------------------- */
.full-screen {
height: calc(100vh);
min-height: 40rem;
width: 100%;
}
/* -----------------------------------------------------------------------------
# Tools - Full Width
----------------------------------------------------------------------------- */
.full-width {
width: 100% !important;
}
@media only screen and (max-width: 767px) {
.full-width-tablet {
width: 100% !important;
}
}
@media only screen and (max-width: 479px) {
.full-width-mobile {
width: 100% !important;
}
}
/* -----------------------------------------------------------------------------
# Tools - Max Width
----------------------------------------------------------------------------- */
[class*="max-width-"] {
margin: 0 auto;
width: 100%;
}
.max-width-s {
max-width: 400px;
}
.max-width-m {
max-width: 800px;
}
.max-width-l {
max-width: 1200px;
}
/* -----------------------------------------------------------------------------
# Tools - Min Width
----------------------------------------------------------------------------- */
[class*="min-width-"] {
margin: 0 auto;
}
.min-width-s {
min-width: 400px;
}
.min-width-m {
min-width: 800px;
}
.min-width-l {
min-width: 1200px;
}
/* -----------------------------------------------------------------------------
# Tools - Opacity
----------------------------------------------------------------------------- */
.opacity-s {
opacity: 0.8 !important;
}
.opacity-m {
opacity: 0.4 !important;
}
.opacity-l {
opacity: 0.2 !important;
}
/* -----------------------------------------------------------------------------
# Tools - Rounded
----------------------------------------------------------------------------- */
.rounded {
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
border-radius: 0.5rem;
}
.rounded-bottom {
-webkit-border-bottom-left-radius: 0.5rem;
-moz-border-radius-bottomleft: 0.5rem;
border-bottom-left-radius: 0.5rem;
-webkit-border-bottom-right-radius: 0.5rem;
-moz-border-radius-bottomright: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.rounded-top {
-webkit-border-top-left-radius: 0.5rem;
-moz-border-radius-topleft: 0.5rem;
border-top-left-radius: 0.5rem;
-webkit-border-top-right-radius: 0.5rem;
-moz-border-radius-topright: 0.5rem;
border-top-right-radius: 0.5rem;
}
/* -----------------------------------------------------------------------------
# Tools - Shadow
----------------------------------------------------------------------------- */
.shadow-s {
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.shadow-m {
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.shadow-l {
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.shadow-none {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
/* -----------------------------------------------------------------------------
# Tools - Spacing
----------------------------------------------------------------------------- */
.padding {
padding: 5rem;
}
@media only screen and (max-width: 1023px) {
.padding {
padding: 3rem;
}
}
@media only screen and (max-width: 767px) {
.padding {
padding: 3rem 1rem;
}
}
.padding-bottom {
padding-bottom: 12rem;
}
@media only screen and (max-width: 1023px) {
.padding-bottom {
padding-bottom: 10rem;
}
}
@media only screen and (max-width: 767px) {
.padding-bottom {
padding-bottom: 8rem;
}
}
.padding-top {
padding-top: 12rem;
}
@media only screen and (max-width: 1023px) {
.padding-top {
padding-top: 10rem;
}
}
@media only screen and (max-width: 767px) {
.padding-top {
padding-top: 8rem;
}
}
/* Add spacing above content */
@media only screen and (max-width: 767px) {
.padding-top-tablet {
padding-top: 8rem;
}
}
/* Add spacing above or below content */
.margin-bottom {
margin-bottom: 5rem;
}
@media only screen and (max-width: 1023px) {
.margin-bottom {
margin-bottom: 3rem;
}
}
.margin-top {
margin-top: 5rem;
}
@media only screen and (max-width: 1023px) {
.margin-top {
margin-top: 3rem;
}
}
/* Negative spacing */
.-margin-bottom {
margin-bottom: -5rem;
}
@media only screen and (max-width: 1023px) {
.-margin-bottom {
margin-bottom: -3rem;
}
}
.-margin-bottom-2 {
margin-bottom: -10rem;
}
@media only screen and (max-width: 1023px) {
.-margin-bottom-2 {
margin-bottom: -6rem;
}
}
/* Default spacing */
.space {
margin: 1rem;
}
.space-bottom {
margin-bottom: 1rem;
}
.space-left {
padding-left: 1rem;
}
.space-right {
padding-right: 1rem;
}
.space-top {
margin-top: 1rem;
}
/* Remove spacing */
.space-none {
margin: 0;
}
.space-bottom-none {
margin-bottom: 0;
}
.space-left-none {
padding-left: 0;
}
.space-right-none {
padding-right: 0;
}
.space-top-none {
margin-top: 0;
}
/** Emojis */
.emoji-cursor-estados-unidos {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-casa {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-disenadora {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-ayuda {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-estrategia {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-computadora-mobil {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-portafolio {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-contacto {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-yo {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-trabajo {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-companias {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-diseno {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-ojos{
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-abajo{
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-hola{
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-vaquero{
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
/** Avatar **/
.avatar-container {
display: flex;
justify-content: center; /* Centers horizontally */
align-items: center;
height: 10vh;
}
#avatar1 {
width: 80px;
padding: 0.1em;
margin-bottom: 1em;
clip-path: circle(50% at 50% 50%);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.5);
position: relative;
}
/*
COMPONENTS
*/
.alert {
-webkit-border-radius: 0.1875rem;
-moz-border-radius: 0.1875rem;
border-radius: 0.1875rem;
background: #f6f6f9;
margin-bottom: 1rem;
padding: 1rem;
}
.alert.alert-default {
border-left: 3px solid #ccced0;
}
.alert.alert-error {
border-left: 3px solid #e52b20;
}
.alert.alert-success {
border-left: 3px solid #63ce63;
}
.alert.alert-warning {
border-left: 3px solid #ffbf2f;
}
.dark .alert {
background: #24263a;
}
/* -----------------------------------------------------------------------------
# Components - Buttons
----------------------------------------------------------------------------- */
.button {
font-size: 1rem;
font-weight: 400;
line-height: 1.5rem;
font-weight: 700;
-webkit-border-radius: 0.1875rem;
-moz-border-radius: 0.1875rem;
border-radius: 0.1875rem;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
display: inline-block;
height: 3rem;
line-height: 2.875rem;
padding: 0 1.25rem;
text-align: center;
}
.button.button-s {
font-size: 0.75rem;
font-weight: 400;
line-height: 1rem;
font-weight: 700;
height: 2rem;
line-height: 1.875rem;
padding: 0 0.75rem;
}
.button.button-m {
font-size: 0.875rem;
font-weight: 400;
line-height: 1rem;
font-weight: 700;
height: 2.5rem;
line-height: 2.375rem;
padding: 0 1rem;
}
.button.button-l {
font-size: 1.125rem;
font-weight: 400;
line-height: 1.5rem;
font-weight: 700;
height: 3.5rem;
line-height: 3.375rem;
padding: 0 1.5rem;
}
.button:hover {
-webkit-transform: translateY(-1px);
-moz-transform: translateY(-1px);
-ms-transform: translateY(-1px);
-o-transform: translateY(-1px);
transform: translateY(-1px);
}
.button.button-primary {
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
background: #5966d2;
border: 1px solid #5966d2;
color: #fff;
}
.button.button-primary:hover {
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
background: #6d78d7;
border: 1px solid #6d78d7;
}
.button.button-secondary {
background: rgba(36, 38, 58, 0.1);
border: 1px solid transparent;
color: #24263a;
}
.button.button-secondary:hover {
background: rgba(36, 38, 58, 0.05);
color: #5966d2;
}
.dark .button.button-secondary {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.active .button.button-secondary,
.fade-in .button.button-secondary {
background: rgba(36, 38, 58, 0.1);
border: 1px solid transparent;
color: #24263a;
}
.active .button.button-secondary:hover,
.fade-in .button.button-secondary:hover {
background: rgba(36, 38, 58, 0.05);
color: #5966d2;
}
.button.button-disabled {
background: #ccced0;
border: 1px solid #ccced0;
color: #24263a;
cursor: default;
opacity: 0.4;
pointer-events: none;
}
@media only screen and (max-width: 767px) {
.button:hover {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
@media only screen and (max-width: 479px) {
.button {
height: 3.5rem;
line-height: 3.375rem;
}
.button.button-s {
height: 2.5rem;
line-height: 2.375rem;
}
.button.button-m {
height: 3rem;
line-height: 2.875rem;
}
.button.button-l {
height: 4rem;
line-height: 3.875rem;
}
}
/* -----------------------------------------------------------------------------
# Components - Card
----------------------------------------------------------------------------- */
.card {
-webkit-border-radius: 0.1875rem;
-moz-border-radius: 0.1875rem;
border-radius: 0.1875rem;
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
background: #fff;
}
.card.dark,
.dark .card {
background: #24263a;
}
.card-content {
padding: 2rem;
}
@media only screen and (max-width: 479px) {
.card-content {
padding: 1.5rem;
}
}
/* -----------------------------------------------------------------------------
# Components - Code
----------------------------------------------------------------------------- */
.code-markup {
font-size: 0.875rem;
font-weight: 400;
line-height: 1rem;
margin-bottom: 1rem;
}
.code-markup .code-header {
-webkit-border-top-left-radius: 0.1875rem;
-moz-border-radius-topleft: 0.1875rem;
border-top-left-radius: 0.1875rem;
-webkit-border-top-right-radius: 0.1875rem;
-moz-border-radius-topright: 0.1875rem;
border-top-right-radius: 0.1875rem;
background: #2e304a;
color: #fff;
display: block;
padding: 1rem;
}
.code-markup span {
color: #d1d2d6;
}
.code-markup code {
-webkit-border-bottom-left-radius: 0.1875rem;
-moz-border-radius-bottomleft: 0.1875rem;
border-bottom-left-radius: 0.1875rem;
-webkit-border-bottom-right-radius: 0.1875rem;
-moz-border-radius-bottomright: 0.1875rem;
border-bottom-right-radius: 0.1875rem;
background: #24263a;
color: #dcc982;
display: block;
padding: 1rem;
}
/* -----------------------------------------------------------------------------
# Components - Footer -new!
----------------------------------------------------------------------------- */
/* ===== PRE-FOOTER STYLES ===== */
.pre-footer {
background-color: var(--footer-bg);
padding: 3rem 1rem;
border-bottom: 1px solid var(--footer-divider);
}
.pre-footer .heading {
color: var(--footer-text);
font-size: 2rem;
margin-bottom: 1.25rem;
}
.pre-footer-text {
color: var(--footer-text);
font-size: 1.1rem;
line-height: 1.6;
max-width: 800px;
margin: 0 auto 2rem;
}
.skill {
color: #F77700;
font-weight: 500;
}
.contact-button {
display: inline-flex;
align-items: center;
background-color: var(--contact-btn-bg);
color: var(--contact-btn-text) !important;
padding: 0.75rem 1.5rem;
border-radius: 2rem;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 10px var(--contact-btn-shadow);
}
.contact-button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 14px var(--contact-btn-shadow);
background-color: var(--contact-btn-hover-bg);
}
.contact-button .icon {
margin-right: 0.5rem;
font-size: 1.2rem;
}
/* ===== MAIN FOOTER STYLES ===== */
.footer-main {
background-color: var(--footer-bg);
color: var(--footer-text);
position: relative;
z-index: 10;
transition: background-color 0.3s ease;
}
/* Container styles */
.footer-main .footer-content {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1rem;
}
/* Link styles */
.footer-main a:not(.button) {
font-size: 0.875rem;
font-weight: 400;
line-height: 1rem;
color: var(--footer-link);
opacity: 1;
transition: all 0.3s ease;
}
.footer-main a:not(.button):hover {
color: var(--footer-link-hover);
}
.footer-main p {
opacity: 1;
}
.footer-main input[type="email"] {
background: #fff;
}
/* ===== SOCIAL ICONS ===== */
.footer-main .social-icons {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2.5rem;
}
.footer-main .social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
background-color: var(--footer-icon-bg);
box-shadow: 0 4px 10px var(--footer-shadow);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.footer-main .social-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--footer-link-hover);
transform: translateY(100%);
transition: transform 0.3s ease;
z-index: 1;
}
.footer-main .social-icon:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(89, 102, 210, 0.2);
}
.footer-main .social-icon:hover::before {
transform: translateY(0);
}
.footer-main .social-icon svg {
width: 22px;
height: 22px;
fill: var(--footer-icon-fill);
transition: all 0.3s ease;
z-index: 2;
position: relative;
}
.footer-main .social-icon:hover svg {
fill: #fff;
}
/* Brand-specific colors for social icons on hover */
.footer-main .social-icon.behance:hover::before {
background-color: #1769ff;
}
.footer-main .social-icon.linkedin:hover::before {
background-color: #0077b5;
}
.footer-main .social-icon.instagram:hover::before {
background-color: #e1306c;
}
/* ===== COPYRIGHT SECTION ===== */
.footer-main .copyright-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.footer-main .copyright {
font-size: 0.75rem;
font-weight: 400;
line-height: 1.2;
text-align: center;
margin-bottom: 0.5rem;
color: var(--footer-text);
}
.footer-main .copyright-legal {
margin-top: 0.75rem;
margin-bottom: 1.5rem;
padding-top: 0.75rem;
border-top: 1px solid var(--footer-divider);
width: 80%;
max-width: 400px;
}
.footer-main .copyright a {
font-size: 0.75rem;
font-weight: 400;
line-height: 1rem;
}
.footer-main .copyright a:hover {
color: inherit;
}
/* ===== BACK TO TOP LINK ===== */
.footer-main .back-to-top-link {
display: inline-flex;
align-items: center;
margin-left: 1rem;
padding: 0.5rem 0.75rem;
border-radius: 2rem;
background-color: var(--footer-back-to-top-bg);
color: var(--footer-back-to-top-text);
transition: all 0.3s ease;
}
.footer-main .back-to-top-link:hover {
background-color: var(--footer-back-to-top-hover);
}
.footer-main .arrow-up {
margin-right: 0.25rem;
}
/* ===== RESPONSIVE STYLES ===== */
@media only screen and (max-width: 1023px) {
.footer-main {
text-align: center;
}
.footer-main a:not(.button) {
font-size: 1rem;
font-weight: 400;
line-height: 1.5rem;
}
.footer-main .copyright a {
font-size: 0.75rem;
font-weight: 400;
line-height: 1rem;
}
.footer-main .social-icons {
margin-bottom: 2.5rem;
}
.footer-main .copyright-legal {
width: 90%;
}
}
@media only screen and (max-width: 768px) {
.pre-footer {
padding: 2rem 1rem;
}
.pre-footer .heading {
font-size: 1.5rem;
}
.pre-footer-text {
font-size: 1rem;
margin-bottom: 1.5rem;
}
}
@media only screen and (max-width: 640px) {
.footer-main .footer-content {
padding: 2rem 0.75rem;
}
.footer-main .social-icons {
gap: 1.25rem;
}
.footer-main .social-icon {
width: 42px;
height: 42px;
}
.footer-main .copyright-legal {
width: 100%;
padding-top: 1rem;
margin-top: 1rem;
}
.footer-main .back-to-top-link {
display: flex;
margin-left: 0;
margin-top: 1.5rem;
justify-content: center;
padding: 0.6rem 1rem;
}
.footer-main .arrow-up {
font-size: 1.1rem;
}
}
/* -----------------------------------------------------------------------------
# Components - Header
----------------------------------------------------------------------------- */
.no-scroll {
overflow: hidden;
}
.header-main {
background: transparent;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.header-main nav {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
display: inline-block;
padding: 1rem;
width: 100%;
}
.header-main a {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
.header-main a:not(.button) {
color: #24263a;
height: 2.5rem;
line-height: 2.5rem;
}
.header-main a:not(.button):not(.logo):hover {
color: #5966d2;
}
.header-main ul {
float: right;
margin: 0;
}
.header-main ul li {
margin-bottom: 0;
}
.header-main .nav-toggle {
cursor: pointer;
display: none;
}
.header-main.dark a:not(.button) {
color: #fff;
}
.header-main.dark a:not(.button):not(.logo):hover {
color: #fff;
opacity: 0.8;
}
.header-main.dark .nav-toggle:before {
color: #fff;
}
.header-main.fade-in nav {
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.98);
}
.header-main.fade-in a.logo {
-webkit-transition: all 0.2s !important;
-moz-transition: all 0.2s !important;
-ms-transition: all 0.2s !important;
-o-transition: all 0.2s !important;
transition: all 0.2s !important;
}
.header-main.fade-in a:not(.button) {
color: #24263a;
}
.header-main.fade-in a:not(.button):not(.logo):hover {
color: #5966d2;
opacity: 1;
}
.header-main.fade-in .nav-toggle:before {
color: #24263a;
}
@media only screen and (max-width: 767px) {
.header-main ul {
display: none;
}
.header-main .nav-toggle {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
align-items: right;
height: 2.5rem;
text-align: center;
width: 1.5rem;
}
.header-main .nav-toggle:before {
direction: ltr;
display: inline-block;
font-family: "Material Icons";
font-feature-settings: "liga";
font-size: 1.5rem;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 1;
text-rendering: optimizeLegibility;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #24263a;
content: "menu";
line-height: 2.5rem;
/* Prevent text from icon name to show up before load */
}
.preload .header-main .nav-toggle:before {
font-size: 0;
}
.header-main.active {
background: #fff;
height: 100%;
}
.header-main.active nav {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.header-main.active a:not(.button) {
color: #24263a;
}
.header-main.active a:not(.button):not(.logo):hover {
color: #5966d2;
opacity: 1;
}
.header-main.active ul {
display: block;
padding: 2rem;
width: 100%;
}
.header-main.active ul li {
font-size: 1.75rem;
font-weight: 300;
line-height: 2.5rem;
margin-bottom: 0.5rem;
padding: 0;
text-align: center;
width: 100%;
}
.header-main.active ul li:last-child {
margin-bottom: 0;
}
.header-main.active ul li a:not(.button) {
line-height: 3rem;
}
.header-main.active .nav-toggle {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.header-main.active .nav-toggle:before {
color: #24263a;
content: "close";
}
.header-main.active .button {
height: 3.5rem;
line-height: 3.375rem;
margin-top: 1rem;
}
}
/* -----------------------------------------------------------------------------
# Components - Icons
----------------------------------------------------------------------------- */
.feature-icons {
-webkit-border-radius: 1rem;
-moz-border-radius: 1rem;
border-radius: 1rem;
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-size: 3rem;
height: 4rem;
line-height: 4rem;
margin-bottom: 1rem;
text-align: center;
width: 4rem;
}
/* -----------------------------------------------------------------------------
# Components - List
----------------------------------------------------------------------------- */
ol,
ul {
margin: 0 0 1rem 0;
padding-left: 1.25rem;
}
ol.blank,
ul.blank {
list-style: none;
padding: 0;
}
ol.inline,
ul.inline {
padding-left: 0;
}
ol.inline li,
ul.inline li {
display: inline-block;
padding-right: 1rem;
vertical-align: top;
}
ol.inline li:last-child,
ul.inline li:last-child {
padding-right: 0;
}
/* -----------------------------------------------------------------------------
# Components - Logo
----------------------------------------------------------------------------- */
.logo {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
color: #24263a;
display: block;
float: left;
font-weight: 900;
height: 2.5rem;
line-height: 2.5rem;
text-transform: uppercase;
}
.logo span {
display: inline-block;
vertical-align: top;
}
.logo img,
.logo svg {
height: 2rem;
margin: 0.25rem;
}
.dark .logo {
color: #fff;
}
/* -----------------------------------------------------------------------------
# Components - Pricing
----------------------------------------------------------------------------- */
.pricing-switch {
margin-bottom: 2rem;
}
.pricing-switch li:first-child {
font-size: 1rem;
font-weight: 400;
line-height: 1.5rem;
font-weight: 700;
line-height: 2rem;
padding-right: 0.5rem;
}
.pricing-duration {
font-size: 0.75rem;
font-weight: 400;
line-height: 1rem;
}
.pricing-monthly,
.pricing-yearly.active {
display: inline-block;
}
.pricing-yearly,
.pricing-monthly.inactive {
display: none;
}
/* -----------------------------------------------------------------------------
# Components - Sidebar
----------------------------------------------------------------------------- */
.sidebar {
-webkit-border-radius: 0.1875rem;
-moz-border-radius: 0.1875rem;
border-radius: 0.1875rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid #ececee;
max-height: calc(100vh - 7.5rem);
overflow-x: hidden;
overflow-y: scroll;
position: -webkit-sticky;
position: sticky;
top: 6rem;
}
.sidebar .sidebar-header {
border-bottom: 1px solid #ececee;
margin-bottom: 0;
padding: 1rem;
}
.sidebar a {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
color: #24263a;
display: block;
padding: 0.5rem 1rem;
}
.sidebar a:hover {
background: #f6f6f9;
color: #5966d2;
}
.sidebar ul {
margin-bottom: 0;
}
.sidebar ul li {
border-bottom: 1px solid #ececee;
margin-bottom: 0;
}
.sidebar ul li:last-child {
border-bottom: none;
}
.dark .sidebar {
background: #24263a;
border: 1px solid #1a1c2a;
}
.dark .sidebar .sidebar-header {
border-bottom: 1px solid #1a1c2a;
}
.dark .sidebar a:hover {
background: #2e304a;
color: #fff;
}
.dark .sidebar ul li {
border-bottom: 1px solid #1a1c2a;
}
.dark .sidebar ul li:last-child {
border-bottom: none;
}
@media only screen and (max-width: 1023px) {
.sidebar {
cursor: pointer;
max-height: 100%;
overflow-y: visible;
position: relative;
top: 0;
}
.sidebar:before {
direction: ltr;
display: inline-block;
font-family: "Material Icons";
font-feature-settings: "liga";
font-size: 1.5rem;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 1;
text-rendering: optimizeLegibility;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
content: "keyboard_arrow_down";
height: 3rem;
line-height: 3rem;
pointer-events: none;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 3rem;
}
.sidebar .sidebar-header {
-webkit-border-radius: 0.1875rem;
-moz-border-radius: 0.1875rem;
border-radius: 0.1875rem;
border-bottom: none;
padding: 0.75rem 1rem;
}
.sidebar ul {
display: none;
}
.sidebar.active:before {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
.sidebar.active .sidebar-header {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-border-top-left-radius: 0.1875rem;
-moz-border-radius-topleft: 0.1875rem;
border-top-left-radius: 0.1875rem;
-webkit-border-top-right-radius: 0.1875rem;
-moz-border-radius-topright: 0.1875rem;
border-top-right-radius: 0.1875rem;
border-bottom: 1px solid #ececee;
}
.sidebar.active ul {
display: block;
}
.dark .sidebar .sidebar-header {
border-bottom: none;
}
.dark .sidebar.active .sidebar-header {
border-bottom: 1px solid #1a1c2a;
}
}
/* -----------------------------------------------------------------------------
# Components - Table
----------------------------------------------------------------------------- */
table {
-webkit-border-radius: 0.1875rem;
-moz-border-radius: 0.1875rem;
border-radius: 0.1875rem;
background: #f6f6f9;
border-collapse: collapse;
margin-bottom: 1rem;
width: 100%;
}
table tr {
border-bottom: 1px solid #ececee;
}
table tr:last-child {
border-bottom: none;
}
table th {
-webkit-border-top-left-radius: 0.1875rem;
-moz-border-radius-topleft: 0.1875rem;
border-top-left-radius: 0.1875rem;
-webkit-border-top-right-radius: 0.1875rem;
-moz-border-radius-topright: 0.1875rem;
border-top-right-radius: 0.1875rem;
padding: 1rem;
text-align: left;
}
table td {
padding: 1rem;
}
.dark table {
background: #24263a;
}
.dark table tr {
border-bottom: 1px solid #1a1c2a;
}
.dark table tr:last-child {
border-bottom: none;
}
/* -----------------------------------------------------------------------------
# Components - Onboarding
----------------------------------------------------------------------------- */
.page-onboarding {
padding: 1rem;
}
.page-onboarding .logo {
float: none;
margin-bottom: 1rem;
}
.page-onboarding .form-help {
line-height: 2.5rem;
position: absolute;
right: 0;
top: 0;
}
.page-onboarding .form-help:hover {
opacity: 1;
}
@media only screen and (max-width: 479px) {
.page-onboarding {
background: #fff;
}
.page-onboarding .logo {
display: none;
}
.page-onboarding .card {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
background: transparent;
padding: 0;
}
}
/* -----------------------------------------------------------------------------
# Components - Timeline
----------------------------------------------------------------------------- */
.timeline {
border-top: 2px solid #ccced0;
padding-top: 1.5rem;
position: relative;
}
.timeline:before, .timeline:after {
background: #ccced0;
content: "";
height: 2px;
position: absolute;
top: -2px;
width: 1rem;
}
.timeline:before {
-webkit-border-bottom-left-radius: 50%;
-moz-border-radius-bottomleft: 50%;
border-bottom-left-radius: 50%;
-webkit-border-top-left-radius: 50%;
-moz-border-radius-topleft: 50%;
border-top-left-radius: 50%;
left: -1rem;
}
.timeline:after {
-webkit-border-bottom-right-radius: 50%;
-moz-border-radius-bottomright: 50%;
border-bottom-right-radius: 50%;
-webkit-border-top-right-radius: 50%;
-moz-border-radius-topright: 50%;
border-top-right-radius: 50%;
right: -1rem;
}
.timeline [class^="col-"] {
position: relative;
}
.timeline [class^="col-"]:before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #575bde;
border: 4px solid #fff;
content: "";
height: 1rem;
left: -3px;
position: absolute;
top: -33px;
width: 1rem;
}
@media only screen and (max-width: 1023px) {
.timeline {
border-left: 2px solid #ccced0;
border-top: none;
padding-left: 1.5rem;
padding-top: 0;
}
.timeline:before, .timeline:after {
height: 1rem;
left: -2px;
width: 2px;
}
.timeline:before {
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
-webkit-border-top-left-radius: 50%;
-moz-border-radius-topleft: 50%;
border-top-left-radius: 50%;
-webkit-border-top-right-radius: 50%;
-moz-border-radius-topright: 50%;
border-top-right-radius: 50%;
top: -1rem;
}
.timeline:after {
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 50%;
-moz-border-radius-bottomleft: 50%;
border-bottom-left-radius: 50%;
-webkit-border-bottom-right-radius: 50%;
-moz-border-radius-bottomright: 50%;
border-bottom-right-radius: 50%;
bottom: -1rem;
top: auto;
}
.timeline [class^="col-"] {
margin: 3rem 0 0 0;
width: 100%;
}
.timeline [class^="col-"]:nth-child(2) {
margin-top: 3rem;
}
.timeline [class^="col-"]:before {
left: -33px;
top: 7px;
}
}
/*
ESTILILLO
*/
/** Reset */
*,
*::before,
*::after {
box-sizing: border-box;
}
/** Removes Padding */
ul[class],
ol[class] {
padding: 0;
}
/** Removes the default margins */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
/** Body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
ul[class],
ol[class] {
list-style: none;
}
a:not([class]) {
text-decoration-skip-ink: auto;
}
img {
max-width: 100%;
height: auto;
display: block;
}
article > * + * {
margin-top: 1em;
}
input,
button,
textarea,
select {
font: inherit;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/**! normalize-opentype.css v0.2.4 | MIT License | kennethormandy.com/journal/normalize-opentype-css **/
::-moz-selection {
color: inherit;
/** 1 */
text-shadow: inherit;
/** 2 */
background-color: var(--baja-white);
}
::selection {
color: inherit;
/** 1 */
text-shadow: inherit;
/** 2 */
background-color: var(--baja-white);
/** 3 */
}
html,
body,
table {
-webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
-moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
/** 2. */
}
/** Headings */
h1,
h2,
h3 {
-webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
-moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
/** 1. */
}
/** Text Level */
abbr {
text-transform: uppercase;
/** 1 */
-webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
-moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
/** 2 */
}
/*
* TODO: Turn on diagonal fractions where appropriate
*/
time {
-webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
-moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
}
/*
* 1. Turn off kerning and ligatures,
* Turn on lining, tabular numerals, slashed zero
*/
pre,
kbd,
samp,
code {
-webkit-font-feature-settings: "kern" 0, "liga" 0, "calt" 1, "dlig" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
-moz-font-feature-settings: "kern" 0, "liga" 0, "calt" 1, "dlig" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
font-feature-settings: "kern" 0, "liga" 0, "calt" 1, "dlig" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
/** 1. */
}
/** Proper Numbers */
sup {
-webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1;
-moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1;
/** 1. */
}
sub {
-webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1;
-moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1;
/** 1. */
}
Γ
/** Localization */
tbody,
caption {
-webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
-moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
/** 1. */
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
blockquote,
p,
address,
table,
fieldset,
figure,
pre {
margin-bottom: var(--base-spacing);
}
ol:not([class]),
ul:not([class]),
dt:not([class]) {
margin-left: var(--base-spacing);
}
/** Typefaces */
@media (prefers-reduced-data: no-preference) {
@font-face {
font-display: swap;
font-family: "Neue Haas Unica";
src: url(..media/fonts/neue-haas-unica/neue-haas-unica-light.woff) format("woff");
font-weight: 300;
font-style: normal;
}
@font-face {
font-display: swap;
font-family: "Neue Haas Unica";
src: url(..media/fonts/neue-haas-unica/neue-haas-unica-regular.woff) format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-display: swap;
font-family: "Neue Haas Unica";
src: url(..media/fonts/neue-haas-unica/neue-haas-unica-medium.woff) format("woff");
font-weight: 500;
font-style: normal;
}
}
.fonts-loaded {
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.fonts-loaded h1,
.fonts-loaded h2,
.fonts-loaded h3,
.fonts-loaded h4 {
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.fonts-loaded h5,
.fonts-loaded h6 {
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.fonts-loaded figcaption {
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.fonts-loaded .page-title {
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.fonts-loaded .page-subtitle {
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/* Headings */
.heading {
display: block;
margin-bottom: var(--base-spacing);
font-family:"Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: var (--charcoal);
}
@media (prefers-color-scheme: dark) {
.heading {
color: var(--baja-white);
}
}
.night .heading {
color: var(--baja-white);
}
.heading--light {
font-weight: 200;
color: var(--baja-white);
}
@media (prefers-color-scheme: dark) {
.heading--light {
color: var(--baja-white);
}
}
.night .heading--light {
color: var(--baja-white);
}
h5.heading,
h6.heading {
font-family:"Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
}
.tera {
font-size: 56px;
font-size: 3.5rem;
line-height: 1.28571;
}
.giga {
font-size: 48px;
font-size: 3rem;
line-height: 1;
}
.mega {
font-size: 40px;
font-size: 2.5rem;
line-height: 1.2;
}
.kilo,
blockquote p {
font-size: 32px;
font-size: 2rem;
line-height: 1.5;
}
.alpha {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.71429;
}
.beta {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
}
.gamma {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.09091;
}
.delta {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
}
.epsilon {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.33333;
}
.zeta {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
.tera,
.giga,
.mega,
.kilo,
blockquote p,
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 900;
}
h5,
h6 {
font-variant: small-caps;
text-transform: lowercase;
letter-spacing: 0.1em;
}
h6 {
font-style: italic;
}
/** Title */
.page-title {
font-weight: 500;
font-size: 1.125rem;
font-size: 18px;
color: var(--charcoal);
}
@media (prefers-color-scheme: dark) {
.page-title {
color: var(--baja-white);
}
}
.night .page-title {
color: var(--baja-white);
}
/** Subtitle */
.page-subtitle {
font-size: 1rem;
font-size: 16px;
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
@media (prefers-color-scheme: dark) {
.page-subtitle {
color: var(--baja-white);
}
}
.night .page-subtitle {
color: var(--baja-white);
}
/** Projects*/
.project {
content-visibility: auto;
}
.project .heading {
scroll-margin: 3.4375rem 0 0 0;
}
/** Paragraphs */
.lede {
font-size: 1.125em;
line-height: 1.5555555556;
}
/** Text Styles */
.no-spacing {
margin-bottom: 0;
}
.t--light {
font-weight: 200;
color: var(--baja-white);
}
.t--block {
display: block;
}
.t--inline {
display: inline;
}
.t--inline-block {
display: inline-block;
}
.t--center {
text-align: center;
}
.t--right {
text-align: right;
}
.t--left {
text-align: left;
}
.t--lowercase {
text-transform: lowercase;
}
.t--uppercase {
padding-left: 0.1em;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.t--smallcaps,
attr[title] {
padding-left: 0.15em;
font-variant: small-caps;
font-weight: 600;
text-transform: lowercase;
letter-spacing: 0.15em;
}
.w--300 {
font-weight: 300;
}
.w--400 {
font-weight: 400;
}
.w--800 {
font-weight: 800;
}
.w--break {
word-wrap: break-word;
}
.w--wrap {
word-wrap: normal;
}
/** Text Columns */
.text-col,
.text-col--2,
.text-col--3,
.text-col--4 {
max-width: 480px;
margin-right: auto;
margin-left: auto;
}
.text-col--2,
.text-col--3,
.text-col--4 {
margin-bottom: var(--base-spacing);
}
@media screen and (min-width: 915px) {
.text-col--2,
.text-col--3,
.text-col--4 {
max-width: none;
margin-right: none;
margin-left: none;
padding-right: 192px;
padding-left: 192px;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.71429;
column-count: 2;
column-gap: var(--base-spacing);
}
}
@media screen and (min-width: 923px) {
.text-col--3,
.text-col--4 {
padding-right: var(--huge-spacing);
padding-left: var(--huge-spacing);
font-size: 13px;
font-size: 0.8125rem;
line-height: 1.84615;
column-count: 3;
}
}
@media screen and (min-width: 923px) {
.text-col--4 {
padding-right: var(--large-spacing);
padding-left: var(--large-spacing);
font-size: 12px;
font-size: 0.75rem;
line-height: 2;
column-count: 4;
}
}
/** Links */
a,
.fake-link {
text-decoration: underline;
text-decoration-skip-ink: none;
text-decoration-thickness: 0.125em;
text-underline-offset: 0.0625em;
text-underline-position: under;
transition: 300ms text-underline-offset cubic-bezier(0.17, 0.89, 0.32, 1.28);
font-weight: bold;
font-style: italic;
color: var(--azure-blue);
fill: var(--azure-blue);
}
a:hover,
a:active {
outline: 0;
}
a:hover,
.fake-link:hover {
text-decoration-thickness: 0.125em;
text-underline-offset: 0.125em;
}
a:visited {
color: var(--graphite);
fill: var(--graphite);
}
@media (prefers-color-scheme: dark) {
a,
.fake-link {
color: var(--light-grey);
fill: var(--light-grey);
}
}
.night a,
.night .fake-link {
color: var(--light-grey);
fill: var(--light-grey);
}
a.ninja-link,
a:hover.ninja-link {
text-decoration: none;
}
a.ninja-link {
font-weight: normal;
font-style: normal;
}
/** External Links */
a[href*="//"] {
transition: 300ms text-underline-offset cubic-bezier(0.17, 0.89, 0.32, 1.28);
}
a[href*="//"]::after {
content: "ββ";
font-weight: normal;
font-style: normal;
font-size: inherit;
color: var(--azure-blue);
transition: 300ms opacity cubic-bezier(0.27, 0.175, 0.285, 1.01);
}
@media screen and (prefers-reduced-motion: reduce) {
a[href*="//"]::after {
transition-property: none;
}
}
@media (prefers-color-scheme: dark) {
a[href*="//"]::after {
color: var(--sky-blue);
}
}
.night a[href*="//"]::after {
color: var(--sky-blue);
}
a:visited[href*="//"]::after {
color: var(--graphite-50);
}
@media (prefers-color-scheme: dark) {
a:visited[href*="//"]::after {
color: var(--white);
}
}
.night a:visited[href*="//"]::after {
color: var(--white);
}
a:hover[href*="//"]::after {
opacity: 0.3;
}
a[href*="//"]::after {
display: inline-block;
transform-origin: top right;
transition: 300ms transform cubic-bezier(0.17, 0.89, 0.32, 1.28);
}
a:hover[href*="//"]::after {
transform: scale(0.9) rotate(-6deg);
}
/** Skip Links */
.skip-link:active,
.skip-link:focus {
left: auto;
top: auto;
width: auto;
height: auto;
overflow: auto;
padding: 0.5em 1em;
text-align: center;
font-size: 1.2em;
background-color: var(--off-white);
z-index: 999;
}
@media (prefers-color-scheme: dark) {
.skip-link:active,
.skip-link:focus {
background-color: var(--mineshaft);
}
}
.night .skip-link:active,
.night .skip-link:focus {
background-color: var(--mineshaft);
}
.skip-link {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -999;
}
/**
* Perma Links /**
*/
@media (pointer: fine) {
.subtitle-link {
opacity: 0;
transition: opacity var(--transition);
}
.heading:hover .subtitle-link {
opacity: 1;
}
}
a.subtitle-link {
font-style: normal;
font-weight: normal;
}
@media screen and (prefers-reduced-motion: reduce) {
.subtitle-link {
transition: none !important;
}
}
.subtitle-link {
color: var(--azure-blue-30);
}
.subtitle-link:hover {
color: var(--azure-blue);
}
@media (prefers-color-scheme: dark) {
.subtitle-link {
color: var(--sky-blue-30);
}
.subtitle-link:hover {
color: var(--sky-blue);
}
}
.night .subtitle-link {
color: var(--sky-blue-30);
}
.night .subtitle-link:hover {
color: var(--sky-blue);
}
/** Page */
@-ms-viewport {
width: device-width;
@media screen and (max-width: 400px) {
@-ms-viewport {
width: 400px;
}
}
}
@viewport {
width: device-width;
}
html,
body {
height: 100%;
}
html {
overflow-y: scroll;
scroll-behavior: smooth;
font-weight: 400;
font-size: 1em;
line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-webkit-font-smoothing: antialiased;
-webkit-font-feature-settings: "liga", "kern";
-moz-font-feature-settings: "liga=1,kern=1";
-moz-font-feature-settings: "liga", "kern";
-ms-font-feature-settings: "liga" 1, "kern" 1;
-ms-font-feature-settings: "liga", "kern";
-o-font-feature-settings: "liga", "kern";
font-feature-settings: "liga", "kern";
}
@media screen and (min-width: 0px) and (max-width: 249px) {
html {
font-size: 75%;
}
}
@media screen and (min-width: 250px) and (max-width: 319px) {
html {
font-size: 87.5%;
}
}
@media screen and (min-width: 468px) {
html {
font-size: 112.5%;
line-height: 1.75;
}
}
/* @media screen and (min-width: 982px) {
html { font-size: 120% }} */
body {
color: var(--coal);
background-color: var(--off-white);
padding: constant(safe-area-inset-top) constant(safe-area-inset-right)
constant(safe-area-inset-bottom) constant(safe-area-inset-left);
}
@media (prefers-color-scheme: dark) {
body {
color: var(--dark-grey);
background-color: var(--coal);
}
}
::selection {
background-color: var(--graphite-50);
text-shadow: none;
}
:focus {
outline: 4px dotted currentColor;
/**outline-color: rgb(153, 153, 158);
outline-style: auto;
outline-width: 5px*/
}
/** Page */
.page-header ~ .page-content {
padding-top: 151px;
}
/** Wrapper */
.wrapper {
max-width: 63em;
margin-right: auto;
margin-left: auto;
padding-right: var(--base-spacing);
padding-left: var(--base-spacing);
position: relative;
}
@supports (padding: 0px) {
.wrapper {
padding-right: max(24px, env(safe-area-inset-right));
padding-left: max(24px, env(safe-area-inset-left));
}
}
/** Page Wrapper*/
.page-header {
width: 100%;
overflow: visible;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 10;
background: var(--off-white);
}
@supports (-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px)) {
.page-header {
background: var(--off-white-82);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
}
@media (prefers-color-scheme: dark) {
.page-header {
background: var(--coal);
}
}
.night .page-header {
background: var(--coal);
}
@supports (-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px)) {
@media (prefers-color-scheme: dark) {
.page-header {
background: var(--coal-82);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
}
.night .page-header {
background: var(--coal-82);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
}
.page-header--absolute {
background-color: transparent;
}
.page-header--pinned {
background-color: transparent;
}
@media screen and (max-width: 692px) {
.page-header--pinned {
background-color: var(--off-white-82);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
}
.page-header .wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 3.4375rem;
height: 55px;
}
/** Nav Logo */
.nav-logo {
flex: 0 1 auto;
align-self: center;
margin-right: auto;
font-size: 15px;
line-height: 1;
}
a.nav-logo {
font-style: normal;
text-decoration: none;
}
a.nav-logo,
a:visited.nav-logo {
color: var(--coal);
}
@media (prefers-color-scheme: dark) {
a.nav-logo,
a:visited.nav-logo {
color: var(--light-grey);
}
}
.night a.nav-logo,
.night a:visited.nav-logo {
color: var(--light-grey);
}
.nav-title {
margin-bottom: 0;
font-size: inherit;
font-weight: normal;
}
.nav-glyph:after {
content: " Β· ";
}
/** Shortens the Nav Title */
@media (min-width: 459px) {
.nav-title--hidden-1 {
border: 0;
clip: rect(0 0 0 0);
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
}
.nav-title--hidden-2,
.nav-title--hidden-3 {
border: 0;
clip: rect(0 0 0 0);
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
@media (min-width: 459px) {
.nav-title--hidden-2 {
border: initial;
clip: initial;
height: initial;
margin: initial;
overflow: initial;
padding: initial;
position: initial;
width: initial;
white-space: initial;
}
}
@media (min-width: 527px) {
.nav-title--hidden-3 {
border: initial;
clip: initial;
height: initial;
margin: initial;
overflow: initial;
padding: initial;
position: initial;
width: initial;
white-space: initial;
}
}
/**
* Nav-Links
*/
.nav-link {
position: relative;
flex: 0 0 auto;
font-size: 15px;
line-height: 1;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
fill: var(--azure-blue);
}
a.nav-link {
font-weight: normal;
font-style: normal;
text-decoration: none;
}
@supports (font-feature-settings: "smcp" 1) {
.nav-link {
letter-spacing: 0.1em;
}
}
@media (prefers-color-scheme: dark) {
.nav-link {
fill: var(--sky-blue);
}
}
.night .nav-link {
fill: var(--sky-blue);
}
.nav-link:not(:first-of-type),
.nav-link.toggle-label {
margin-left: 0.75em;
}
@media (min-width: 400px) {
.nav-link:not(:first-of-type),
.nav-link.toggle-label {
margin-left: 1.5em;
}
}
.nav-link.toggle-label {
font-weight: normal;
font-style: normal;
}
.nav-link.new:after {
content: "New";
position: absolute;
top: 0;
right: 0;
margin-top: -2px;
margin-right: -12px;
padding: 3px;
padding-top: 0;
font-size: 10px;
font-weight: bold;
color: var(--white);
background: var(--error);
border-radius: 3px;
transform: rotate(4deg);
}
/** Footer */
/* *Abbs */
abbr,
abbr[title],
dfn,
dfn[title] {
font-style: normal;
text-decoration-color: #8a8a8a;
text-decoration-style: dotted;
text-decoration-thickness: 0.0625em;
text-decoration-skip-ink: auto;
}
@media (prefers-color-scheme: dark) {
abbr,
abbr[title],
dfn,
dfn[title] {
text-decoration-color: #a9a9a9;
}
}
.night abbr,
.night abbr[title],
.night dfn,
.night dfn[title] {
text-decoration-color: #a9a9a9;
}
abbr[title],
dfn[title] {
cursor: help;
}
/* Quotes */
q {
quotes: "β" "β" "\\201C" "\\201D";
}
q:before {
content: "β";
content: open-quote;
}
q:after {
content: "β";
content: close-quote;
}
q q:before {
content: "β";
content: open-quote;
}
q q:after {
content: "β";
content: close-quote;
}
blockquote {
quotes: "\\201C" "\\201D";
}
blockquote p {
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
}
blockquote p:before {
content: "\\201C";
content: open-quote;
}
blockquote p:after {
content: "";
content: no-close-quote;
}
blockquote p:last-of-type:after {
content: "\\201D";
content: close-quote;
}
blockquote q:before {
content: "β";
content: open-quote;
}
blockquote q:after {
content: "β";
content: close-quote;
}
blockquote {
/**
* .4em is roughly equal to the width of the opening β that we wish to hang.
*/
text-indent: -0.41em;
font-weight: 400;
text-align: center;
}
blockquote > p:last-of-type {
margin-bottom: 0;
}
.source {
display: block;
text-indent: 0;
}
.source:before {
content: "β";
}
/** Rules Horizontal */
.rule {
margin-bottom: 23px;
margin-bottom: 1.4375rem;
color: var(--dark-grey);
border: none;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.rule--ornament {
position: relative;
}
.rule--ornament:after {
content: "Β§";
position: absolute;
top: 0;
right: 0;
left: 0;
line-height: 0;
text-align: center;
}
.rule--ornament[data-ornament] {
border-color: transparent;
}
.rule--ornament[data-ornament]:after {
content: attr(data-ornament);
letter-spacing: 0.75em;
}
.rule--stump {
width: 75%;
margin-right: auto;
margin-left: auto;
color: #07399b;
border-bottom-width: 2px;
}
/** Icons */
.icon {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
position: relative;
top: -0.0625em;
font-size: 16px;
line-height: 1;
text-align: center;
pointer-events: none;
}
.icon-mini {
font-size: 0.5em;
}
.icon-small {
font-size: 0.75em;
}
.icon--medium {
font-size: 1.5em;
}
.icon--large {
font-size: 2em;
}
.icon--huge {
font-size: 4em;
}
.icon--natural {
font-size: inherit;
}
.icon-fill--natural {
fill: currentColor;
}
/** Images */
img {
font-style: italic;
}
/** Figures */
figure {
position: relative;
margin-right: -var(--base-spacing);
margin-left: -var(--base-spacing);
margin-bottom: var(--base-spacing);
}
figure > img {
display: block;
margin: 0 auto;
margin-bottom: 0.75em;
}
figcaption {
box-sizing: content-box;
padding-right: var(--base-spacing);
padding-left: var(--base-spacing);
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-size: 87.5%;
text-align: center;
color: var(--coal);
}
@media (prefers-color-scheme: dark) {
figcaption {
color: var(--light-grey);
}
}
.night figcaption {
color: var(--light-grey);
}
/** Gallery */
.gallery {
margin-bottom: var(--base-spacing);
}
.gallery--flush {
margin-right: -var(--base-spacing);
margin-left: -var(--base-spacing);
}
.gallery img {
display: block;
margin-right: auto;
margin-bottom: 0.125em;
margin-left: auto;
}
.gallery--two-up img,
.gallery--three-up img,
.gallery--four-up img {
float: left;
padding-right: 0.125em;
}
.gallery--two-up img {
width: 50%;
}
.gallery--three-up img:first-of-type {
width: 100%;
}
.gallery--three-up img {
width: 50%;
}
.gallery--four-up img {
width: 50%;
}
/** Spacing */
.u--m-all {
margin: var(--base-spacing);
}
.u--m-all--tiny {
margin: var(--tiny-spacing);
}
.u--m-all--small {
margin: var(--small-spacing);
}
.u--m-all--large {
margin: var(--large-spacing);
}
.u--m-all--huge {
margin: var(--huge-spacing);
}
.u--m-top {
margin-top: var(--base-spacing);
}
.u--m-top--tiny {
margin-top: var(--tiny-spacing);
}
.u--m-top--small {
margin-top: var(--small-spacing);
}
.u--m-top--large {
margin-top: var(--large-spacing);
}
.u--m-top--huge {
margin-top: var(--huge-spacing);
}
.u--m-right {
margin-right: var(--base-spacing);
}
.u--m-right--tiny {
margin-right: var(--tiny-spacing);
}
.u--m-right--small {
margin-right: var(--small-spacing);
}
.u--m-right--large {
margin-right: var(--large-spacing);
}
.u--m-right--huge {
margin-right: var(--huge-spacing);
}
.u--m-bottom {
margin-bottom: var(--base-spacing) !important;
}
.u--m-bottom--tiny {
margin-bottom: var(--tiny-spacing) !important;
}
.u--m-bottom--small {
margin-bottom: var(--small-spacing) !important;
}
.u--m-bottom--large {
margin-bottom: var(--large-spacing) !important;
}
.u--m-bottom--huge {
margin-bottom: var(--huge-spacing) !important;
}
.u--m-left {
margin-left: var(--base-spacing);
}
.u--m-left--tiny {
margin-left: var(--tiny-spacing);
}
.u--m-left--small {
margin-left: var(--small-spacing);
}
.u--m-left--large {
margin-left: var(--large-spacing);
}
.u--m-left--huge {
margin-left: var(--huge-spacing);
}
/** Elements for ipad */
.u--p-all {
padding: var(--base-spacing);
}
.u--p-all--tiny {
padding: var(--tiny-spacing);
}
.u--p-all--small {
padding: var(--small-spacing);
}
.u--p-all--large {
padding: var(--large-spacing);
}
.u--p-all--huge {
padding: var(--huge-spacing);
}
.u--p-top {
padding-top: var(--base-spacing);
}
.u--p-top--tiny {
padding-top: var(--tiny-spacing);
}
.u--p-top--small {
padding-top: var(--small-spacing);
}
.u--p-top--large {
padding-top: var(--large-spacing);
}
.u--p-top--huge {
padding-top: var(--huge-spacing);
}
.u--p-right {
padding-right: var(--base-spacing);
}
.u--p-right--tiny {
padding-right: var(--tiny-spacing);
}
.u--p-right--small {
padding-right: var(--small-spacing);
}
.u--p-right--large {
padding-right: var(--large-spacing);
}
.u--p-right--huge {
padding-right: var(--huge-spacing);
}
.u--p-bottom {
padding-bottom: var(--base-spacing);
}
.u--p-bottom--tiny {
padding-bottom: var(--tiny-spacing);
}
.u--p-bottom--small {
padding-bottom: var(--small-spacing);
}
.u--p-bottom--large {
padding-bottom: var(--large-spacing);
}
.u--p-bottom--huge {
padding-bottom: var(--huge-spacing);
}
.u--p-left {
padding-left: var(--base-spacing);
}
.u--p-left--tiny {
padding-left: var(--tiny-spacing);
}
.u--p-left--small {
padding-left: var(--small-spacing);
}
.u--p-left--large {
padding-left: var(--large-spacing);
}
.u--p-left--huge {
padding-left: var(--huge-spacing);
}
/** Hide */
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
@media (min-width: 400px) {
.visually-hidden--for-mobile {
border: initial;
clip: initial;
height: initial;
margin: initial;
overflow: initial;
padding: initial;
position: initial;
width: initial;
white-space: initial;
}
}
/* Work List */
.work-list {
list-style: none;
}
.work-list-item {
display: block;
text-align: center;
margin-bottom: 0.5rem;
font-size: 0.75em;
}
.work-list-link {
cursor: pointer;
user-select: none;
}
/** Animations */
.slide-up,
.top-page-link:hover {
-webkit-animation: slide-up 2s infinite;
-moz-animation: slide-up 2s infinite;
-ms-animation: slide-up 2s infinite;
-o-animation: slide-up 2s infinite;
animation: slide-up 2s infinite;
}
@-webkit-keyframes slide-up {
40% {
-webkit-transform: translate3d(0, -50%, 0) scale(0.9) rotateX(-20deg);
opacity: 0;
}
45% {
-webkit-transform: translate3d(0, 0, 0) scale 1 rotateX(0);
}
50% {
-webkit-transform: translate3d(0, 50%, 0) scale(0.9) rotateX(10deg);
opacity: 0;
}
70% {
-webkit-transform: translate3d(0, 0, 0) scale(1) rotateX(0);
opacity: 1;
}
}
@keyframes slide-up {
40% {
transform: translate3d(0, -50%, 0) scale(0.9) rotateX(-20deg);
opacity: 0;
}
45% {
transform: translate3d(0, 0, 0) scale 1 rotateX(0);
}
50% {
transform: translate3d(0, 50%, 0) scale(0.9) rotateX(10deg);
opacity: 0;
}
70% {
transform: translate3d(0, 0, 0) scale(1) rotateX(0);
opacity: 1;
}
}
.slide-down {
-webkit-animation: slide-down 3s 0.3s infinite;
-moz-animation: slide-down 3s 0.3s infinite;
-ms-animation: slide-down 3s 0.3s infinite;
-o-animation: slide-down 3s 0.3s infinite;
animation: slide-down 3s 0.3s infinite;
}
@-webkit-keyframes slide-down {
40% {
-webkit-transform: translate3d(0, 100%, 0) scale(0.9) rotateX(20deg);
opacity: 0;
}
45% {
-webkit-transform: translate3d(0, 0, 0) scale 1 rotateX(0);
}
50% {
-webkit-transform: translate3d(0, -100%, 0) scale(0.9) rotateX(-20deg);
opacity: 0;
}
70% {
-webkit-transform: translate3d(0, 0, 0) scale(1) rotateX(0);
opacity: 1;
}
}
@keyframes slide-down {
40% {
transform: translate3d(0, 100%, 0) scale(0.9) rotateX(20deg);
opacity: 0;
}
45% {
transform: translate3d(0, 0, 0) scale 1 rotateX(0);
}
50% {
transform: translate3d(0, -100%, 0) scale(0.9) rotateX(-20deg);
opacity: 0;
}
70% {
transform: translate3d(0, 0, 0) scale(1) rotateX(0);
opacity: 1;
}
}
.bounce-and-shake {
-webkit-animation: bounce-and-shake 300ms ease-out;
-moz-animation: bounce-and-shake 300ms ease-out;
-ms-animation: bounce-and-shake 300ms ease-out;
-o-animation: bounce-and-shake 300ms ease-out;
animation: bounce-and-shake 300ms ease-out;
}
@-webkit-keyframes bounce-and-shake {
15%, 40%, 75%, 100% {
-webkit-transform-origin: center center;
}
15% {
-webkit-transform: scale(1.4, 1.2);
}
40% {
-webkit-transform: scale(0.9, 0.9);
}
75% {
-webkit-transform: scale(1.08, 1);
}
100% {
-webkit-transform: scale(1, 1);
}
}
@keyframes bounce-and-shake {
15%, 40%, 75%, 100% {
transform-origin: center center;
}
15% {
transform: scale(1.4, 1.2);
}
40% {
transform: scale(0.9, 0.9);
}
75% {
transform: scale(1.08, 1);
}
100% {
transform: scale(1, 1);
}
}
/** Emojis2 */
.emoji-cursor-estadosunidos {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-casa {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-disenadora {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-ayuda {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-estrategia {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-computadoramobil {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-portafolio {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-contacto {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-yo {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-compu {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-companias {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-diseno {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-negocios {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
#avatar {
width: 38px;
padding: 0.1em;
margin-bottom: 1em;
margin-top: 1em;
-webkit-clip-path: circle(42.3% at 48% 48%);
clip-path: circle(42.3% at 48% 48%);
background: rgba(50, 50, 50, 0.1);
box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.957);
}
/** Fig Captions */
a figcaption {
font-style: normal;
font-weight: normal;
}
/**
** Reset form styles
*/
/* .toggle-label {
font-style: normal;
font-weight: normal;
}
}
/** Media */
.media {
/* The space (margin) between the sidebar and non-sidebar */
--spacing: 32px;
/* The narrowest the content (main) element can be before wrapping. Should be a percentage. */
--min-width: 50%;
/* The width of the sidebar (empty means not set; defaults to the content width) */
--side-width: 527px;
display: flex;
flex-wrap: wrap;
align-items: center;
margin: calc(var(--spacing) / 2 * -1);
overflow: hidden;
}
.media > * {
margin: calc(var(--spacing) / 2);
flex-basis: var(--side-width);
flex-grow: 1;
}
@media (min-width: 1134px) {
.media .text-col {
margin-left: 0;
}
}
.media > :first-child {
flex-basis: 0;
flex-grow: 999;
min-width: calc(var(--min-width) - var(--spacing));
}
/** Reverse Media */
/* .media--reversed > :first-child {
flex-basis: 0;
flex-grow: 999;
min-width: calc(var(--min-width) - var(--spacing));
}
.media--reversed > :last-child {
flex-basis: initial;
flex-grow: initial;
min-width: initial;
} */
/** Light box */
.lightbox-link {
cursor: zoom-in;
}
.lightbox {
display: none;
}
.lightbox:target {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: zoom-out;
display: grid;
place-items: center;
align-content: center;
background-color: rgba(200, 200, 200, 0.15);
-webkit-backdrop-filter: saturate(100%) blur(20px);
backdrop-filter: saturate(100%) blur(20px);
border: 0;
z-index: 20;
}
.lightbox img {
max-height: 50vh;
z-index: 4;
}
.lightbox:target:before {
/* Loading spinner */
content: "";
height: 2em;
width: 2em;
-webkit-animation: spin 0.8s infinite linear;
animation: spin 0.8s infinite linear;
border: 1px solid;
border-right-color: #000;
border-radius: 10%;
display: block;
position: absolute;
transform: translateX(-50%);
opacity: 0.25;
}
@-webkit-keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.lightbox:target:after {
/** Γ to close */
content: "Γ";
width: 32px;
height: 32px;
overflow: hidden;
position: fixed;
top: 0.75em;
right: 0.5em;
z-index: 20;
font-style: normal;
font-size: 20px;
line-height: 1.5;
text-align: center;
cursor: pointer;
background-color: rgba(200, 200, 200, 0.15);
-webkit-backdrop-filter: saturate(18000%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-radius: 16px;
}
/** Top Logo */
.nav-glyph {
display: inline-block;
font-size: 1.25em;
}
.nav-glyph:after {
content: "";
}
.nav-title--hidden-2:before {
content: "";
font-size: 1em;
}
/** Tex Appears */
@media (min-width: 376px) {
.nav-title--hidden-2:before {
content: " Β· ";
}
}
@keyframes zoomitbig {
15% {
transform-origin: center center;
transform: scale(1.4, 1.2);
}
40% {
transform-origin: center center;
transform: scale(0.9, 0.9);
}
75% {
transform-origin: center center;
transform: scale(1.08, 1);
}
100% {
transform-origin: center center;
transform: scale(1, 1);
}
}
@-webkit-keyframes zoomitbig {
15% {
transform-origin: center center;
transform: scale(1.4, 1.2);
}
40% {
transform-origin: center center;
transform: scale(0.9, 0.9);
}
75% {
transform-origin: center center;
transform: scale(1.08, 1);
}
100% {
transform-origin: center center;
transform: scale(1, 1);
}
}
.nav-logo:hover .nav-glyph {
-webkit-animation: zoomitbig 300ms ease-out;
animation: zoomitbig 300ms ease-out;
}
/** nav wraps */
@media (max-width: 399px) {
.nav-wrap {
display: flex;
justify-content: space-evenly;
align-items: flex-start;
width: 100%;
height: 55px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
background: var(--off-white);
padding-bottom: env(safe-area-inset-bottom);
}
@supports (-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px)) {
.nav-wrap {
background: var(--off-white-82);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
}
/** Margins Resets */
}
@media (max-width: 399px) and (prefers-color-scheme: dark) {
.nav-wrap {
background-color: #292929;
}
@supports (-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px)) {
.nav-wrap {
background-color: rgba(41, 41, 41, 0.82);
}
}
}
@media (max-width: 399px) {
.nav-wrap:after {
content: "";
display: block;
width: 100%;
height: 1px;
position: absolute;
bottom: 100%;
background-color: transparent;
background-image: linear-gradient(to bottom, transparent 0%, transparent 35%, rgba(41, 41, 41, 0.3) 35%);
background-size: 100% 1px;
}
}
@media (max-width: 399px) and (prefers-color-scheme: dark) {
.nav-wrap:after {
background-image: linear-gradient(to bottom, transparent 0%, transparent 35%, rgba(255, 255, 255, 0.16) 35%);
}
}
@media (max-width: 399px) {
.nav-link:not(:first-of-type),
.nav-link.toggle-label {
margin-left: 0;
}
}
@media (max-width: 399px) {
.nav-wrap .nav-link {
display: flex;
flex-direction: column;
/* width: 33.33vw; */
height: 55px;
line-height: 3.4375;
/* 55px */
text-align: center;
text-decoration: none;
}
}
/** Skills */
.skills {
padding-top: 0rem;
}
.skills h2 {
font-size: 1.3rem;
color: #6c757d;
text-transform: uppercase;
}
.skills .icons {
margin: 0.5rem 0 2rem 0;
}
.skills .icons i {
cursor: pointer;
margin-right: 1rem;
font-size: 1rem;
}
.skills .icons i.fa-figma:hover {
color: #6610f2;
}
.skills .icons i.fa-sketch:hover {
color: #f4f408;
}
.skills .icons i.fa-bootstrap:hover {
color: #533b78;
}
.skills .icons i.fa-sass:hover {
color: #c85e93;
}
.skills .icons i.fa-html5:hover {
color: #ff6f00;
}
.skills .icons i.fa-css3-alt:hover {
color: #2862e9;
}
.skills .icons i.fa-js:hover {
color: #f1d43b;
}
.skills .icons i.fa-jira:hover {
color: #0e489f;
}
.skills .icons i.fa-npm:hover {
color: #9f0e10;
}
.skills .icons i.fa-invision:hover {
color: #db14d1;
}
.skills ul {
list-style: square;
}
.skills ul li {
font-size: 1.3rem;
margin-left: 2rem;
}
/*
CARDS
*/
/** Case **/
.case {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
padding: 40px 0;
position: relative;
}
.case-content {
flex: 1 0 60%;
padding-right: 20px;
}
.case-content h1 {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.71429;
color: var(--coral);
}
.line-container {
margin: 15px 0;
}
.summary {
margin-bottom: 20px;
color: var(--graphite);
font-size: 18px;
}
.skills {
list-style-type: none;
margin: 0 20px 20px 0;
}
.skills li {
display: inline-block;
margin-right: 10px;
font-size: 16px;
color: var(--graphite);
}
/* Hero Image */
.heroImage {
flex: 1 0 40%;
display: flex;
justify-content: center;
align-items: center;
}
.heroImage img {
max-width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
/* CTA Container */
.cta-container {
margin-top: 50px;
width: 100%;
display: flex;
justify-content: flex-start;
}
.cta-button {
margin-top: auto
text-decoration: none;
padding: 14px 30px;
border-radius: 1rem;
border: 2px solid;
font-size: 18px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: background-color:#444 0.2s ease, transform 0.2s ease, border 0.2s ease;
}
.cta-button:hover {
color: var(--graphite);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.case {
flex-direction: column;
align-items: center;
text-align: center;
padding-bottom: 60px;
}
.case-content,
.heroImage {
flex: 1 0 100%;
padding-right: 0;
margin-bottom: 20px;
}
.cta-container {
justify-content: center;
margin-top: 50px;
width: 100%;
text-align: center;
}
.cta-button {
width: 100%;
max-width: 300px;
}
}
/*
ORANGE
*/
:root {
/* Primary Colors */
--coral: #FF7F50;
--safety-orange: #F77700;
--baja-white: #FFFFFF;
/* Complementary Colors */
--sage-green: #FF6D00;
--charcoal: #403D38;
--muted-teal: #8A9B94;
--pink: #FF66C7;
--blue: #5899E2;
--blue-2: #335C81;
/* Accent Colors */
--peach: #FFD6C0;
--light-stone: #C7C6B8;
--burnt-sienna: #D9553C;
--success-green: #28A745;
--error-red: #E74C3C;
--warning-yellow: #FFC107;
/* System Colors */
--white: #ffffff;
--light-gray: #f8f9fa;
--medium-gray: #e9ecef;
--dark-gray: #6c757d;
--text-dark: var(--charcoal);
--text-medium: var(--muted-teal);
--text-light: #7f8c8d;
--font-primary: 'Neue Haas Unica', 'Segoe UI', sans-serif;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
--shadow-md: 0 3px 6px rgba(0, 0, 0, 0.16);
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.19);
}
.orange-presentation-container {
max-width: 1000px;
margin: 0 auto;
padding: 2rem;
}
.orange-pdf-controls {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 1000;
display: flex;
gap: 0.5rem;
}
.orange-pdf-btn {
background: var(--charcoal);
color: var(--white);
border: none;
padding: 0.75rem 1.5rem;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
font-size: 0.875rem;
transition: all 0.3s ease;
box-shadow: var(--shadow-md);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.orange-pdf-btn:hover {
background: var(--sage-green);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.orange-pdf-btn.orange-download {
background: var(--safety-orange);
}
.orange-pdf-btn.orange-download:hover {
background: var(--burnt-sienna);
}
.orange-page {
background: var(--white);
border-radius: 12px;
margin-bottom: 2rem;
box-shadow: var(--shadow-lg);
overflow: hidden;
min-height: 90vh;
page-break-after: always;
}
.orange-page:last-child {
margin-bottom: 0;
}
.orange-page-header {
background: var(--charcoal);
color: var(--white);
padding: 3rem 2rem;
position: relative;
}
.orange-page-number {
position: absolute;
top: 1rem;
right: 2rem;
background: rgba(255, 255, 255, 0.2);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
}
.orange-page-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
line-height: 1.2;
}
.orange-page-subtitle {
font-size: 1.125rem;
opacity: 0.9;
font-weight: 400;
}
.orange-page-content {
padding: 2rem;
}
.orange-two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.orange-content-section {
margin-bottom: 2rem;
}
.orange-section-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--sage-green);
margin-bottom: 1rem;
position: relative;
padding-left: 1.5rem;
}
.orange-section-title::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--sage-green);
border-radius: 2px;
}
.orange-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin: 1rem 0;
}
.orange-stat-card {
background: var(--peach);
padding: 1.5rem;
border-radius: 12px;
text-align: center;
border-left: 4px solid var(--sage-green);
transition: all 0.3s ease;
}
.orange-stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.orange-stat-number {
font-size: 2rem;
font-weight: 700;
color: var(--sage-green);
margin-bottom: 0.25rem;
line-height: 1;
}
.orange-stat-label {
font-size: 0.875rem;
color: var(--charcoal);
font-weight: 500;
}
.orange-persona-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 1rem 0;
}
.orange-persona-card {
background: var(--white);
border: 1px solid var(--medium-gray);
border-radius: 12px;
padding: 1rem;
text-align: center;
transition: all 0.3s ease;
position: relative;
}
.orange-persona-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.orange-persona-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
border-radius: 12px 12px 0 0;
}
.orange-persona-card:nth-child(1)::before {
background: var(--blue);
}
.orange-persona-card:nth-child(2)::before {
background: var(--pink);
}
.orange-persona-card:nth-child(3)::before {
background: var(--blue-2);
}
.orange-persona-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
margin: 0 auto 0.75rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.25rem;
font-weight: 700;
}
.orange-persona-card:nth-child(1) .orange-persona-avatar {
background: var(--blue);
}
.orange-persona-card:nth-child(2) .orange-persona-avatar {
background: var(--pink);
}
.orange-persona-card:nth-child(3) .orange-persona-avatar {
background: var(--blue-2);
}
.orange-persona-name {
font-size: 1rem;
font-weight: 600;
color: var(--charcoal);
margin-bottom: 0.5rem;
}
.orange-persona-description {
font-size: 0.8rem;
color: var(--muted-teal);
line-height: 1.4;
}
.orange-process-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin: 1rem 0;
}
.orange-process-step {
background: var(--white);
border: 1px solid var(--medium-gray);
border-radius: 12px;
padding: 1rem;
text-align: center;
transition: all 0.3s ease;
}
.orange-process-step:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.orange-step-number {
width: 35px;
height: 35px;
background: var(--sage-green);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin: 0 auto 0.75rem;
font-size: 0.875rem;
}
.orange-step-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--charcoal);
margin-bottom: 0.5rem;
}
.orange-step-description {
font-size: 0.8rem;
color: var(--muted-teal);
line-height: 1.4;
}
.orange-insight-box {
background: var(--sage-green);
color: var(--white);
padding: 1.5rem;
border-radius: 12px;
margin: 1rem 0;
position: relative;
overflow: hidden;
}
.orange-insight-box::before {
content: '"';
position: absolute;
top: -10px;
left: 1rem;
font-size: 3rem;
opacity: 0.3;
font-family: serif;
}
.orange-insight-text {
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
position: relative;
z-index: 1;
font-style: italic;
}
.orange-skills-list {
list-style: none;
margin: 1rem 0;
}
.orange-skill-item {
display: flex;
align-items: flex-start;
margin-bottom: 0.75rem;
padding-left: 1.5rem;
position: relative;
}
.orange-skill-item::before {
content: 'β';
position: absolute;
left: 0;
top: 0;
color: var(--sage-green);
font-weight: 700;
font-size: 1rem;
}
.orange-skill-title {
font-weight: 600;
color: var(--charcoal);
margin-right: 0.5rem;
min-width: fit-content;
}
.orange-skill-description {
color: var(--muted-teal);
flex: 1;
}
.orange-results-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin: 1rem 0;
}
.orange-result-card {
background: var(--white);
border: 1px solid var(--medium-gray);
border-radius: 12px;
padding: 1rem;
text-align: center;
}
.orange-result-icon {
width: 40px;
height: 40px;
background: var(--success-green);
border-radius: 50%;
margin: 0 auto 0.75rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1rem;
}
.orange-result-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--charcoal);
margin-bottom: 0.5rem;
}
.orange-result-description {
font-size: 0.8rem;
color: var(--muted-teal);
line-height: 1.4;
}
.orange-contact-footer {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid var(--medium-gray);
text-align: center;
}
.orange-contact-footer p {
color: var(--muted-teal);
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.orange-presentation-container {
padding: 1rem;
}
.orange-page-header {
padding: 2rem 1rem;
}
.orange-page-title {
font-size: 2rem;
}
.orange-page-content {
padding: 1rem;
}
.orange-two-column {
grid-template-columns: 1fr;
gap: 1rem;
}
.orange-persona-grid {
grid-template-columns: 1fr;
}
.orange-stats-grid,
.orange-process-grid,
.orange-results-grid {
grid-template-columns: 1fr;
}
.orange-pdf-controls {
position: relative;
top: auto;
right: auto;
margin-bottom: 1rem;
justify-content: center;
}
}
/* Print Styles */
@media print {
body {
background: white !important;
color: black !important;
}
.orange-presentation-container {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.orange-pdf-controls {
display: none !important;
}
.orange-page {
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
min-height: 100vh !important;
page-break-after: always !important;
}
.orange-page:last-child {
page-break-after: avoid !important;
}
.orange-page-header {
background: var(--charcoal) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.orange-insight-box {
background: var(--sage-green) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.orange-stat-card {
background: var(--peach) !important;
border-left: 4px solid var(--sage-green) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.orange-persona-card:nth-child(1)::before {
background: var(--coral) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.orange-persona-card:nth-child(2)::before {
background: var(--sage-green) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.orange-persona-card:nth-child(3)::before {
background: var(--safety-orange) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.orange-persona-avatar {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.orange-result-icon, .orange-step-number {
background: var(--sage-green) !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
@page {
margin: 0.5in;
size: letter;
}
}
/*
PURPLE
*/
:root {
/* Healthcare Specific Colors */
--healthcare-blue: #635aa4;
--healthcare-blue-light: #E6F2F7;
--healthcare-teal: #d9f2f9;
--success-green: #28A745;
--error-red: #E74C3C;
--warning-yellow: #FFC107;
/* System Colors */
--white: #ffffff;
--light-gray: #f8f9fa;
--medium-gray: #e9ecef;
--dark-gray: #6c757d;
--text-dark: var(--charcoal);
--text-medium: var(--muted-teal);
--text-light: #7f8c8d;
/* Typography */
--font-primary: 'Neue Haas Unica', 'Segoe UI', sans-serif;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 0.75rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
--shadow-md: 0 3px 6px rgba(0, 0, 0, 0.16);
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.19);
/* Transitions */
--transition: 0.3s ease;
}
/* Reset & Base */
/* Navigation */
.purple-nav-container {
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--white);
z-index: 1000;
box-shadow: var(--shadow-sm);
border-bottom: 1px solid var(--light-stone);
}
.purple-nav-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-md) var(--spacing-xl);
}
.purple-nav-logo {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--healthcare-blue);
}
.purple-nav-links {
display: flex;
gap: var(--spacing-xl);
list-style: none;
}
.purple-nav-link {
text-decoration: none;
color: var(--text-medium);
font-weight: var(--font-weight-medium);
transition: var(--transition);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 20px;
}
.purple-nav-link:hover {
color: var(--healthcare-blue);
background: var(--healthcare-blue-light);
}
/* PDF Controls */
.purple-pdf-controls {
display: flex;
gap: var(--spacing-sm);
}
.purple-pdf-btn {
background: var(--charcoal);
color: var(--white);
border: none;
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: 25px;
cursor: pointer;
font-weight: var(--font-weight-semibold);
font-size: 0.875rem;
transition: var(--transition);
box-shadow: var(--shadow-md);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
}
.purple-pdf-btn:hover {
background: var(--healthcare-blue);
transform: translateY(-2px);
}
.purple-pdf-btn.purple-download {
background: var(--safety-orange);
}
.purple-pdf-btn.purple-download:hover {
background: var(--burnt-sienna);
}
/* Main Content */
.purple-main-content {
margin-top: 80px;
}
/* Section Base */
.purple-section {
padding: var(--spacing-3xl) 0;
max-width: 1200px;
margin: 0 auto;
padding-left: var(--spacing-xl);
padding-right: var(--spacing-xl);
}
.purple-section-title {
font-size: 2.5rem;
font-weight: var(--font-weight-bold);
color: var(--text-dark);
margin-bottom: var(--spacing-xl);
text-align: center;
}
.purple-section-subtitle {
font-size: 1.25rem;
color: var(--text-medium);
text-align: center;
margin-bottom: var(--spacing-2xl);
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* Hero Section */
.purple-hero {
background: var(--white);
padding: var(--spacing-3xl) 0;
text-align: center;
}
.purple-hero-title {
font-size: 3rem;
font-weight: var(--font-weight-bold);
color: var(--healthcare-blue);
margin-bottom: var(--spacing-lg);
line-height: 1.2;
}
.purple-hero-subtitle {
font-size: 1.5rem;
color: var(--text-medium);
margin-bottom: var(--spacing-2xl);
}
.purple-hero-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-2xl);
padding: 1.2rem 1.2rem 1.2rem 1.2rem;
}
.purple-hero-stat {
background: var(--peach);
padding: var(--spacing-xl);
border-radius: 12px;
border-left: 4px solid var(--healthcare-blue);
}
.purple-hero-stat-number {
font-size: 2.5rem;
font-weight: var(--font-weight-bold);
color: var(--healthcare-blue);
margin-bottom: var(--spacing-xs);
line-height: 1;
}
.purple-hero-stat-label {
font-size: 0.875rem;
color: var(--text-dark);
font-weight: var(--font-weight-medium);
}
/* Before/After Section */
.purple-before-after {
background: var(--light-gray);
}
.purple-comparison-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-2xl);
margin-top: var(--spacing-2xl);
}
.purple-comparison-side {
background: var(--white);
border-radius: 12px;
padding: var(--spacing-xl);
box-shadow: var(--shadow-md);
transition: var(--transition);
}
.purple-comparison-side:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.purple-comparison-label {
font-size: 1.125rem;
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-lg);
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: 25px;
text-align: center;
}
.purple-before-label {
background: var(--error-red);
color: var(--white);
}
.purple-after-label {
background: var(--success-green);
color: var(--white);
}
/* Form Mockups */
.purple-form-mockup {
border: 1px solid var(--light-stone);
border-radius: 8px;
padding: var(--spacing-lg);
background: var(--white);
margin-top: var(--spacing-lg);
}
.purple-form-header {
display: flex;
align-items: center;
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--light-stone);
}
.purple-form-logo {
width: 40px;
height: 40px;
background: var(--healthcare-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-weight: var(--font-weight-bold);
margin-right: var(--spacing-md);
}
.purple-form-title {
font-size: 1.25rem;
font-weight: var(--font-weight-semibold);
color: var(--text-dark);
}
.purple-form-field {
margin-bottom: var(--spacing-lg);
}
.purple-form-label {
display: block;
margin-bottom: var(--spacing-xs);
font-size: 0.875rem;
color: var(--text-dark);
font-weight: var(--font-weight-medium);
}
.purple-form-input {
width: 100%;
padding: var(--spacing-md);
border: 1px solid var(--light-stone);
border-radius: 4px;
font-size: 0.875rem;
transition: var(--transition);
}
.purple-form-input:focus {
outline: none;
border-color: var(--healthcare-blue);
box-shadow: 0 0 0 2px rgba(28, 117, 188, 0.2);
}
.purple-form-button {
background: var(--healthcare-blue);
color: var(--white);
border: none;
padding: var(--spacing-md) var(--spacing-xl);
border-radius: 25px;
font-weight: var(--font-weight-semibold);
cursor: pointer;
transition: var(--transition);
}
.purple-form-button:hover {
background: var(--healthcare-teal);
}
/* Process Steps */
.purple-process-steps {
background: var(--white);
}
.purple-steps-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-2xl);
}
.purple-step-card {
background: var(--healthcare-blue-light);
padding: var(--spacing-xl);
border-radius: 12px;
text-align: center;
border-left: 4px solid var(--healthcare-blue);
transition: var(--transition);
}
.purple-step-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.purple-step-number {
width: 50px;
height: 50px;
background: var(--healthcare-blue);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
margin: 0 auto var(--spacing-lg);
}
.purple-step-title {
font-size: 1.125rem;
font-weight: var(--font-weight-semibold);
color: var(--text-dark);
margin-bottom: var(--spacing-md);
}
.purple-step-description {
font-size: 0.875rem;
color: var(--text-medium);
line-height: 1.5;
}
/* Accessibility Demo */
.purple-accessibility-demo {
background: var(--light-gray);
}
.purple-accessibility-controls {
display: flex;
justify-content: center;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-2xl);
}
.purple-accessibility-toggle {
display: flex;
align-items: center;
gap: var(--spacing-sm);
background: var(--white);
padding: var(--spacing-md) var(--spacing-lg);
border-radius: 25px;
border: 1px solid var(--light-stone);
cursor: pointer;
transition: var(--transition);
}
.purple-accessibility-toggle:hover {
background: var(--healthcare-blue-light);
border-color: var(--healthcare-blue);
}
.purple-toggle-switch {
width: 40px;
height: 20px;
background: var(--light-stone);
border-radius: 10px;
position: relative;
transition: var(--transition);
}
.purple-toggle-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: var(--white);
border-radius: 50%;
transition: var(--transition);
}
/* Text Size Demo */
.purple-text-size-demo {
background: var(--white);
padding: var(--spacing-xl);
border-radius: 8px;
margin-top: var(--spacing-lg);
}
.purple-text-size-controls {
display: flex;
justify-content: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.purple-text-size-btn {
width: 40px;
height: 40px;
border: 1px solid var(--light-stone);
background: var(--white);
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.purple-text-size-btn:hover,
.purple-text-size-btn.purple-active {
background: var(--healthcare-blue);
color: var(--white);
border-color: var(--healthcare-blue);
}
/* Mobile Preview */
.purple-mobile-preview {
background: var(--white);
}
.purple-device-showcase {
display: flex;
justify-content: center;
gap: var(--spacing-2xl);
margin-top: var(--spacing-2xl);
flex-wrap: wrap;
}
.purple-device {
position: relative;
background: var(--charcoal);
border-radius: 20px;
padding: var(--spacing-md);
box-shadow: var(--shadow-lg);
}
.purple-device-desktop {
width: 300px;
height: 200px;
}
.purple-device-tablet {
width: 180px;
height: 240px;
}
.purple-device-mobile {
width: 120px;
height: 200px;
}
.purple-device-screen {
width: 100%;
height: 100%;
background: var(--white);
border-radius: 12px;
padding: var(--spacing-sm);
overflow: hidden;
}
.purple-device-mockup {
width: 100%;
height: 100%;
background: var(--healthcare-blue-light);
border-radius: 8px;
position: relative;
}
.purple-device-header {
height: 20%;
background: var(--healthcare-blue);
border-radius: 8px 8px 0 0;
}
.purple-device-content {
height: 80%;
padding: var(--spacing-xs);
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.purple-device-element {
height: 20%;
background: var(--peach);
border-radius: 4px;
}
/* Results Dashboard */
.purple-results-dashboard {
background: var(--light-gray);
}
.purple-results-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-2xl);
}
.purple-result-card {
background: var(--healthcare-blue-light);
padding: var(--spacing-xl);
border-radius: 12px;
box-shadow: var(--shadow-md);
text-align: center;
transition: var(--transition);
}
.purple-result-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.purple-result-icon {
width: 60px;
height: 60px;
background: var(--healthcare-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-lg);
font-size: 1.5rem;
color: var(--white);
}
.purple-result-metric {
font-size: 2.5rem;
font-weight: var(--font-weight-bold);
color: var(--healthcare-blue);
margin-bottom: var(--spacing-xs);
}
.purple-result-label {
font-size: 1rem;
color: var(--text-dark);
font-weight: var(--font-weight-medium);
margin-bottom: var(--spacing-sm);
}
.purple-result-description {
font-size: 0.875rem;
color: var(--text-medium);
line-height: 1.5;
}
/* Progress Bars */
.purple-progress-bar {
width: 100%;
height: 8px;
background: var(--light-stone);
border-radius: 4px;
overflow: hidden;
margin: var(--spacing-md) 0;
}
.purple-progress-fill {
height: 100%;
background: var(--healthcare-blue);
border-radius: 4px;
transition: width 2s ease;
}
/* Animations for scroll-triggered effects */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.purple-animate-on-scroll {
animation: fadeInUp 0.8s ease forwards;
}
/* Responsive Design */
@media (max-width: 768px) {
.purple-nav-links {
display: none;
}
.purple-hero-title {
font-size: 2rem;
}
.purple-section-title {
font-size: 2rem;
}
.purple-comparison-container {
grid-template-columns: 1fr;
}
.purple-device-showcase {
flex-direction: column;
align-items: center;
}
.purple-section {
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
}
}
/* Print Styles */
@media print {
.purple-nav-container,
.purple-pdf-controls {
display: none !important;
}
body {
background: white !important;
}
.purple-section {
page-break-inside: avoid;
margin-bottom: var(--spacing-xl);
}
.purple-hero {
page-break-after: always;
}
.purple-before-after {
page-break-after: always;
}
.purple-results-dashboard {
page-break-before: always;
}
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
@page {
margin: 0.75in;
size: letter;
}
}
/*
ESTILOTE :)
*/
/** Estilos **/
:root {
--white: #ffffff;
--off-white: #F6F6F6;
--off-white-82: rgba(246, 246, 246, 0.82);
--light-grey: #d7d9dd;
--dark-grey: #7e7e7e;
--graphite: #79828d;
--graphite-50: rgba(121, 130, 141, 0.5);
--graphite-30: rgba(121, 130, 141, 0.3);
--coal: #292929;
--coal-82: rgba(41, 41, 41, 0.82);
--oil: #1e1e1e;
--error: #f5002c;
--success: #00d032;
--warning: #ffe600;
--azure-blue: #007aff;
--azure-blue-30: rgba(0, 122, 255, 0.5);
--sky-blue: #5ac8fa;
--sky-blue-30: rgba(212, 242, 255, 0.16);
--panel-shadows: 0px 2px 25px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.2);
--baja-white: #E5E4D7;
--coral: #FF7F50;
--charcoal: #403D38;
/** Spacing */
--tiny-spacing: 6px;
--small-spacing: 12px;
--base-spacing: 24px;
--large-spacing: 48px;
--huge-spacing: 96px;
/** Transitions */
--transition: 300ms cubic-bezier(0.27, 0.175, 0.285, 1.01);
--pop-transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) 0.05s;
--slide-up-transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
--tabs-transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
/* Case Colors */
--navy-blue: #3F5366;
--sage-green: #7FB069;
--soft-orange: #E6AA68;
--rust-orange: #CA5310;
--ice-blue: #F5F7FA;
--slate-gray: #6E7A8A;
/* Complementary Colors */
--light-periwinkle: #D7D8E5;
--dusty-lavender: #7C7F9B;
/* Analogous Colors */
--pink-sand: #E5DAD7;
--pale-sage: #DBE5D7;
/* Split Complementary Colors */
--soft-sky: #D7E0E5;
--pale-lavender: #D7D0E5;
/* Triadic Colors */
--pale-aqua: #D7E5E4;
--soft-lilac: #E4D7E5;
/* Tetradic Colors */
--mint-cream: #D7E5D8;
--pale-mauve: #E5D7E4;
/* Monochromatic Colors */
--eggshell: #FFFDF0;
--stone: #CBC9BD;
--taupe: #9E9C8F;
--olive-gray: #726F62;
/* Shades */
--tint-1: #F2F1E8;
--shade-1: #C5C4B7;
--shade-2: #A5A497;
--shade-3: #7A7970;
/* Fonts */
--header-font: 'Neue Haas Unica', 'Segoe UI', sans-serif;
--body-font: 'Helvetica', 'Arial', sans-serif;
}
/** Scheme DiaNoche */
color-scheme: light dark;
/* Theme Colors - Light Mode (default) */
--bg-primary: var(--white);
--bg-secondary: var(--off-white);
--bg-tertiary: var(--baja-white);
--text-primary: var(--coal);
--text-secondary: var(--charcoal);
--text-tertiary: var(--graphite);
--border-color: var(--light-grey);
--card-bg: var(--white);
--card-shadow: var(--graphite-30);
--section-padding: var(--base-spacing);
--border-radius: 8px;
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: var(--oil);
--bg-secondary: var(--coal);
--bg-tertiary: var(--coal-82);
--text-primary: var(--off-white);
--text-secondary: var(--light-grey);
--text-tertiary: var(--dark-grey);
--border-color: var(--graphite-50);
--card-bg: var(--coal);
--card-shadow: rgba(0, 0, 0, 0.3);
}
}
/* Dark Mode Toggle (for manual control) */
body.dark-mode {
--bg-primary: var(--oil);
--bg-secondary: var(--coal);
--bg-tertiary: var(--coal-82);
--text-primary: var(--off-white);
--text-secondary: var(--light-grey);
--text-tertiary: var(--dark-grey);
--border-color: var(--graphite-50);
--card-bg: var(--coal);
--card-shadow: rgba(0, 0, 0, 0.3);
}
/** Reset */
*,
*::before,
*::after {
box-sizing: border-box;
}
/** Removes Padding */
ul[class],
ol[class] {
padding: 0;
}
/** Removes the default margins */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
/** Body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
ul[class],
ol[class] {
list-style: none;
}
a:not([class]) {
text-decoration-skip-ink: auto;
}
img {
max-width: 100%;
height: auto;
display: block;
}
article > * + * {
margin-top: 1em;
}
input,
button,
textarea,
select {
font: inherit;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/**! normalize-opentype.css v0.2.4 | MIT License | kennethormandy.com/journal/normalize-opentype-css **/
::-moz-selection {
color: inherit;
/** 1 */
text-shadow: inherit;
/** 2 */
background-color: var(--baja-white);
}
::selection {
color: inherit;
/** 1 */
text-shadow: inherit;
/** 2 */
background-color: var(--baja-white);
/** 3 */
}
html,
body,
table {
-webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
-moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
/** 2. */
}
/** Headings */
h1,
h2,
h3 {
-webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
-moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
/** 1. */
}
/** Text Level */
abbr {
text-transform: uppercase;
/** 1 */
-webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
-moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
/** 2 */
}
/*
* TODO: Turn on diagonal fractions where appropriate
*/
time {
-webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
-moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
}
/*
* 1. Turn off kerning and ligatures,
* Turn on lining, tabular numerals, slashed zero
*/
pre,
kbd,
samp,
code {
-webkit-font-feature-settings: "kern" 0, "liga" 0, "calt" 1, "dlig" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
-moz-font-feature-settings: "kern" 0, "liga" 0, "calt" 1, "dlig" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
font-feature-settings: "kern" 0, "liga" 0, "calt" 1, "dlig" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
/** 1. */
}
/** Proper Numbers */
sup {
-webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1;
-moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1;
/** 1. */
}
sub {
-webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1;
-moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1;
/** 1. */
}
/** Localization */
tbody,
caption {
-webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
-moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
/** 1. */
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
blockquote,
p,
address,
table,
fieldset,
figure,
pre {
margin-bottom: var(--base-spacing);
}
ol:not([class]),
ul:not([class]),
dt:not([class]) {
margin-left: var(--base-spacing);
}
/** Typefaces */
@media (prefers-reduced-data: no-preference) {
@font-face {
font-display: swap;
font-family: "Neue Haas Unica";
src: url(..media/fonts/neue-haas-unica/neue-haas-unica-light.woff) format("woff");
font-weight: 300;
font-style: normal;
}
@font-face {
font-display: swap;
font-family: "Neue Haas Unica";
src: url(..media/fonts/neue-haas-unica/neue-haas-unica-regular.woff) format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-display: swap;
font-family: "Neue Haas Unica";
src: url(..media/fonts/neue-haas-unica/neue-haas-unica-medium.woff) format("woff");
font-weight: 500;
font-style: normal;
}
}
.fonts-loaded {
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.fonts-loaded h1,
.fonts-loaded h2,
.fonts-loaded h3,
.fonts-loaded h4 {
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.fonts-loaded h5,
.fonts-loaded h6 {
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.fonts-loaded figcaption {
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.fonts-loaded .page-title {
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.fonts-loaded .page-subtitle {
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/* Headings */
.heading {
display: block;
margin-bottom: var(--base-spacing);
font-family:"Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: var (--charcoal);
}
@media (prefers-color-scheme: dark) {
.heading {
color: var(--baja-white);
}
}
.night .heading {
color: var(--baja-white);
}
.heading--light {
font-weight: 200;
color: var(--baja-white);
}
@media (prefers-color-scheme: dark) {
.heading--light {
color: var(--baja-white);
}
}
.night .heading--light {
color: var(--baja-white);
}
h5.heading,
h6.heading {
font-family:"Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
}
.tera {
font-size: 56px;
font-size: 3.5rem;
line-height: 1.28571;
}
.giga {
font-size: 48px;
font-size: 3rem;
line-height: 1;
}
.mega {
font-size: 40px;
font-size: 2.5rem;
line-height: 1.2;
}
.kilo,
blockquote p {
font-size: 32px;
font-size: 2rem;
line-height: 1.5;
}
.alpha {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.71429;
}
.beta {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
}
.gamma {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.09091;
}
.delta {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
}
.epsilon {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.33333;
}
.zeta {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
.tera,
.giga,
.mega,
.kilo,
blockquote p,
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 900;
}
h5,
h6 {
font-variant: small-caps;
text-transform: lowercase;
letter-spacing: 0.1em;
}
h6 {
font-style: italic;
}
/** Title */
.page-title {
font-weight: 500;
font-size: 1.125rem;
font-size: 18px;
color: var(--charcoal);
}
@media (prefers-color-scheme: dark) {
.page-title {
color: var(--baja-white);
}
}
.night .page-title {
color: var(--baja-white);
}
/** Subtitle */
.page-subtitle {
font-size: 1rem;
font-size: 16px;
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
@media (prefers-color-scheme: dark) {
.page-subtitle {
color: var(--baja-white);
}
}
.night .page-subtitle {
color: var(--baja-white);
}
/** Projects*/
.project {
content-visibility: auto;
}
.project .heading {
scroll-margin: 3.4375rem 0 0 0;
}
/** Paragraphs */
.lede {
font-size: 1.125em;
line-height: 1.5555555556;
}
/** Text Styles */
.no-spacing {
margin-bottom: 0;
}
.t--light {
font-weight: 200;
color: var(--baja-white);
}
.t--block {
display: block;
}
.t--inline {
display: inline;
}
.t--inline-block {
display: inline-block;
}
.t--center {
text-align: center;
}
.t--right {
text-align: right;
}
.t--left {
text-align: left;
}
.t--lowercase {
text-transform: lowercase;
}
.t--uppercase {
padding-left: 0.1em;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.t--smallcaps,
attr[title] {
padding-left: 0.15em;
font-variant: small-caps;
font-weight: 600;
text-transform: lowercase;
letter-spacing: 0.15em;
}
.w--300 {
font-weight: 300;
}
.w--400 {
font-weight: 400;
}
.w--800 {
font-weight: 800;
}
.w--break {
word-wrap: break-word;
}
.w--wrap {
word-wrap: normal;
}
/** Text Columns */
.text-col,
.text-col--2,
.text-col--3,
.text-col--4 {
max-width: 480px;
margin-right: auto;
margin-left: auto;
}
.text-col--2,
.text-col--3,
.text-col--4 {
margin-bottom: var(--base-spacing);
}
@media screen and (min-width: 915px) {
.text-col--2,
.text-col--3,
.text-col--4 {
max-width: none;
margin-right: none;
margin-left: none;
padding-right: 192px;
padding-left: 192px;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.71429;
column-count: 2;
column-gap: var(--base-spacing);
}
}
@media screen and (min-width: 923px) {
.text-col--3,
.text-col--4 {
padding-right: var(--huge-spacing);
padding-left: var(--huge-spacing);
font-size: 13px;
font-size: 0.8125rem;
line-height: 1.84615;
column-count: 3;
}
}
@media screen and (min-width: 923px) {
.text-col--4 {
padding-right: var(--large-spacing);
padding-left: var(--large-spacing);
font-size: 12px;
font-size: 0.75rem;
line-height: 2;
column-count: 4;
}
}
/** Links */
a,
.fake-link {
text-decoration: underline;
text-decoration-skip-ink: none;
text-decoration-thickness: 0.125em;
text-underline-offset: 0.0625em;
text-underline-position: under;
transition: 300ms text-underline-offset cubic-bezier(0.17, 0.89, 0.32, 1.28);
font-weight: bold;
font-style: italic;
color: var(--azure-blue);
fill: var(--azure-blue);
}
a:hover,
a:active {
outline: 0;
}
a:hover,
.fake-link:hover {
text-decoration-thickness: 0.125em;
text-underline-offset: 0.125em;
}
a:visited {
color: var(--graphite);
fill: var(--graphite);
}
@media (prefers-color-scheme: dark) {
a,
.fake-link {
color: var(--light-grey);
fill: var(--light-grey);
}
}
.night a,
.night .fake-link {
color: var(--light-grey);
fill: var(--light-grey);
}
a.ninja-link,
a:hover.ninja-link {
text-decoration: none;
}
a.ninja-link {
font-weight: normal;
font-style: normal;
}
/** External Links */
a[href*="//"] {
transition: 300ms text-underline-offset cubic-bezier(0.17, 0.89, 0.32, 1.28);
}
a[href*="//"]::after {
content: "ββ";
font-weight: normal;
font-style: normal;
font-size: inherit;
color: var(--azure-blue);
transition: 300ms opacity cubic-bezier(0.27, 0.175, 0.285, 1.01);
}
@media screen and (prefers-reduced-motion: reduce) {
a[href*="//"]::after {
transition-property: none;
}
}
@media (prefers-color-scheme: dark) {
a[href*="//"]::after {
color: var(--sky-blue);
}
}
.night a[href*="//"]::after {
color: var(--sky-blue);
}
a:visited[href*="//"]::after {
color: var(--graphite-50);
}
@media (prefers-color-scheme: dark) {
a:visited[href*="//"]::after {
color: var(--white);
}
}
.night a:visited[href*="//"]::after {
color: var(--white);
}
a:hover[href*="//"]::after {
opacity: 0.3;
}
a[href*="//"]::after {
display: inline-block;
transform-origin: top right;
transition: 300ms transform cubic-bezier(0.17, 0.89, 0.32, 1.28);
}
a:hover[href*="//"]::after {
transform: scale(0.9) rotate(-6deg);
}
/** Skip Links */
.skip-link:active,
.skip-link:focus {
left: auto;
top: auto;
width: auto;
height: auto;
overflow: auto;
padding: 0.5em 1em;
text-align: center;
font-size: 1.2em;
background-color: var(--off-white);
z-index: 999;
}
@media (prefers-color-scheme: dark) {
.skip-link:active,
.skip-link:focus {
background-color: var(--mineshaft);
}
}
.night .skip-link:active,
.night .skip-link:focus {
background-color: var(--mineshaft);
}
.skip-link {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -999;
}
/**
* Perma Links /**
*/
@media (pointer: fine) {
.subtitle-link {
opacity: 0;
transition: opacity var(--transition);
}
.heading:hover .subtitle-link {
opacity: 1;
}
}
a.subtitle-link {
font-style: normal;
font-weight: normal;
}
@media screen and (prefers-reduced-motion: reduce) {
.subtitle-link {
transition: none !important;
}
}
.subtitle-link {
color: var(--azure-blue-30);
}
.subtitle-link:hover {
color: var(--azure-blue);
}
@media (prefers-color-scheme: dark) {
.subtitle-link {
color: var(--sky-blue-30);
}
.subtitle-link:hover {
color: var(--sky-blue);
}
}
.night .subtitle-link {
color: var(--sky-blue-30);
}
.night .subtitle-link:hover {
color: var(--sky-blue);
}
/** Page */
@-ms-viewport {
width: device-width;
@media screen and (max-width: 400px) {
@-ms-viewport {
width: 400px;
}
}
}
@viewport {
width: device-width;
}
html,
body {
height: 100%;
}
html {
overflow-y: scroll;
scroll-behavior: smooth;
font-weight: 400;
font-size: 1em;
line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-webkit-font-smoothing: antialiased;
-webkit-font-feature-settings: "liga", "kern";
-moz-font-feature-settings: "liga=1,kern=1";
-moz-font-feature-settings: "liga", "kern";
-ms-font-feature-settings: "liga" 1, "kern" 1;
-ms-font-feature-settings: "liga", "kern";
-o-font-feature-settings: "liga", "kern";
font-feature-settings: "liga", "kern";
}
@media screen and (min-width: 0px) and (max-width: 249px) {
html {
font-size: 75%;
}
}
@media screen and (min-width: 250px) and (max-width: 319px) {
html {
font-size: 87.5%;
}
}
@media screen and (min-width: 468px) {
html {
font-size: 112.5%;
line-height: 1.75;
}
}
/* @media screen and (min-width: 982px) {
html { font-size: 120% }} */
body {
color: var(--coal);
background-color: var(--off-white);
padding: constant(safe-area-inset-top) constant(safe-area-inset-right)
constant(safe-area-inset-bottom) constant(safe-area-inset-left);
}
@media (prefers-color-scheme: dark) {
body {
color: var(--dark-grey);
background-color: var(--coal);
}
}
::selection {
background-color: var(--graphite-50);
text-shadow: none;
}
:focus {
outline: 4px dotted currentColor;
/**outline-color: rgb(153, 153, 158);
outline-style: auto;
outline-width: 5px*/
}
/** Page */
.page-header ~ .page-content {
padding-top: 151px;
}
/** Wrapper */
.wrapper {
max-width: 63em;
margin-right: auto;
margin-left: auto;
padding-right: var(--base-spacing);
padding-left: var(--base-spacing);
position: relative;
}
@supports (padding: 0px) {
.wrapper {
padding-right: max(24px, env(safe-area-inset-right));
padding-left: max(24px, env(safe-area-inset-left));
}
}
/** Page Wrapper*/
.page-header {
width: 100%;
overflow: visible;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 10;
background: var(--off-white);
}
@supports (-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px)) {
.page-header {
background: var(--off-white-82);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
}
@media (prefers-color-scheme: dark) {
.page-header {
background: var(--coal);
}
}
.night .page-header {
background: var(--coal);
}
@supports (-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px)) {
@media (prefers-color-scheme: dark) {
.page-header {
background: var(--coal-82);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
}
.night .page-header {
background: var(--coal-82);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
}
.page-header--absolute {
background-color: transparent;
}
.page-header--pinned {
background-color: transparent;
}
@media screen and (max-width: 692px) {
.page-header--pinned {
background-color: var(--off-white-82);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
}
.page-header .wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 3.4375rem;
height: 55px;
}
/** Nav Logo */
.nav-logo {
flex: 0 1 auto;
align-self: center;
margin-right: auto;
font-size: 15px;
line-height: 1;
}
a.nav-logo {
font-style: normal;
text-decoration: none;
}
a.nav-logo,
a:visited.nav-logo {
color: var(--coal);
}
@media (prefers-color-scheme: dark) {
a.nav-logo,
a:visited.nav-logo {
color: var(--light-grey);
}
}
.night a.nav-logo,
.night a:visited.nav-logo {
color: var(--light-grey);
}
.nav-title {
margin-bottom: 0;
font-size: inherit;
font-weight: normal;
}
.nav-glyph:after {
content: " Β· ";
}
/** Shortens the Nav Title */
@media (min-width: 459px) {
.nav-title--hidden-1 {
border: 0;
clip: rect(0 0 0 0);
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
}
.nav-title--hidden-2,
.nav-title--hidden-3 {
border: 0;
clip: rect(0 0 0 0);
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
@media (min-width: 459px) {
.nav-title--hidden-2 {
border: initial;
clip: initial;
height: initial;
margin: initial;
overflow: initial;
padding: initial;
position: initial;
width: initial;
white-space: initial;
}
}
@media (min-width: 527px) {
.nav-title--hidden-3 {
border: initial;
clip: initial;
height: initial;
margin: initial;
overflow: initial;
padding: initial;
position: initial;
width: initial;
white-space: initial;
}
}
/**
* Nav-Links
*/
.nav-link {
position: relative;
flex: 0 0 auto;
font-size: 15px;
line-height: 1;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
fill: var(--azure-blue);
}
a.nav-link {
font-weight: normal;
font-style: normal;
text-decoration: none;
}
@supports (font-feature-settings: "smcp" 1) {
.nav-link {
letter-spacing: 0.1em;
}
}
@media (prefers-color-scheme: dark) {
.nav-link {
fill: var(--sky-blue);
}
}
.night .nav-link {
fill: var(--sky-blue);
}
.nav-link:not(:first-of-type),
.nav-link.toggle-label {
margin-left: 0.75em;
}
@media (min-width: 400px) {
.nav-link:not(:first-of-type),
.nav-link.toggle-label {
margin-left: 1.5em;
}
}
.nav-link.toggle-label {
font-weight: normal;
font-style: normal;
}
.nav-link.new:after {
content: "New";
position: absolute;
top: 0;
right: 0;
margin-top: -2px;
margin-right: -12px;
padding: 3px;
padding-top: 0;
font-size: 10px;
font-weight: bold;
color: var(--white);
background: var(--error);
border-radius: 3px;
transform: rotate(4deg);
}
/** Footer */
/* *Abbs */
abbr,
abbr[title],
dfn,
dfn[title] {
font-style: normal;
text-decoration-color: #8a8a8a;
text-decoration-style: dotted;
text-decoration-thickness: 0.0625em;
text-decoration-skip-ink: auto;
}
@media (prefers-color-scheme: dark) {
abbr,
abbr[title],
dfn,
dfn[title] {
text-decoration-color: #a9a9a9;
}
}
.night abbr,
.night abbr[title],
.night dfn,
.night dfn[title] {
text-decoration-color: #a9a9a9;
}
abbr[title],
dfn[title] {
cursor: help;
}
/* Quotes */
q {
quotes: "β" "β" "\\201C" "\\201D";
}
q:before {
content: "β";
content: open-quote;
}
q:after {
content: "β";
content: close-quote;
}
q q:before {
content: "β";
content: open-quote;
}
q q:after {
content: "β";
content: close-quote;
}
blockquote {
quotes: "\\201C" "\\201D";
}
blockquote p {
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
}
blockquote p:before {
content: "\\201C";
content: open-quote;
}
blockquote p:after {
content: "";
content: no-close-quote;
}
blockquote p:last-of-type:after {
content: "\\201D";
content: close-quote;
}
blockquote q:before {
content: "β";
content: open-quote;
}
blockquote q:after {
content: "β";
content: close-quote;
}
blockquote {
/**
* .4em is roughly equal to the width of the opening β that we wish to hang.
*/
text-indent: -0.41em;
font-weight: 400;
text-align: center;
}
blockquote > p:last-of-type {
margin-bottom: 0;
}
.source {
display: block;
text-indent: 0;
}
.source:before {
content: "β";
}
/** Rules Horizontal */
.rule {
margin-bottom: 23px;
margin-bottom: 1.4375rem;
color: var(--dark-grey);
border: none;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.rule--ornament {
position: relative;
}
.rule--ornament:after {
content: "Β§";
position: absolute;
top: 0;
right: 0;
left: 0;
line-height: 0;
text-align: center;
}
.rule--ornament[data-ornament] {
border-color: transparent;
}
.rule--ornament[data-ornament]:after {
content: attr(data-ornament);
letter-spacing: 0.75em;
}
.rule--stump {
width: 75%;
margin-right: auto;
margin-left: auto;
color: #07399b;
border-bottom-width: 2px;
}
/** Icons */
.icon {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
position: relative;
top: -0.0625em;
font-size: 16px;
line-height: 1;
text-align: center;
pointer-events: none;
}
.icon-mini {
font-size: 0.5em;
}
.icon-small {
font-size: 0.75em;
}
.icon--medium {
font-size: 1.5em;
}
.icon--large {
font-size: 2em;
}
.icon--huge {
font-size: 4em;
}
.icon--natural {
font-size: inherit;
}
.icon-fill--natural {
fill: currentColor;
}
/** Images */
img {
font-style: italic;
}
/** Figures */
figure {
position: relative;
margin-right: -var(--base-spacing);
margin-left: -var(--base-spacing);
margin-bottom: var(--base-spacing);
}
figure > img {
display: block;
margin: 0 auto;
margin-bottom: 0.75em;
}
figcaption {
box-sizing: content-box;
padding-right: var(--base-spacing);
padding-left: var(--base-spacing);
font-family: "Neue Haas Unica", -apple-system, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
font-size: 87.5%;
text-align: center;
color: var(--coal);
}
@media (prefers-color-scheme: dark) {
figcaption {
color: var(--light-grey);
}
}
.night figcaption {
color: var(--light-grey);
}
/** Gallery */
.gallery {
margin-bottom: var(--base-spacing);
}
.gallery--flush {
margin-right: -var(--base-spacing);
margin-left: -var(--base-spacing);
}
.gallery img {
display: block;
margin-right: auto;
margin-bottom: 0.125em;
margin-left: auto;
}
.gallery--two-up img,
.gallery--three-up img,
.gallery--four-up img {
float: left;
padding-right: 0.125em;
}
.gallery--two-up img {
width: 50%;
}
.gallery--three-up img:first-of-type {
width: 100%;
}
.gallery--three-up img {
width: 50%;
}
.gallery--four-up img {
width: 50%;
}
/** Spacing */
.u--m-all {
margin: var(--base-spacing);
}
.u--m-all--tiny {
margin: var(--tiny-spacing);
}
.u--m-all--small {
margin: var(--small-spacing);
}
.u--m-all--large {
margin: var(--large-spacing);
}
.u--m-all--huge {
margin: var(--huge-spacing);
}
.u--m-top {
margin-top: var(--base-spacing);
}
.u--m-top--tiny {
margin-top: var(--tiny-spacing);
}
.u--m-top--small {
margin-top: var(--small-spacing);
}
.u--m-top--large {
margin-top: var(--large-spacing);
}
.u--m-top--huge {
margin-top: var(--huge-spacing);
}
.u--m-right {
margin-right: var(--base-spacing);
}
.u--m-right--tiny {
margin-right: var(--tiny-spacing);
}
.u--m-right--small {
margin-right: var(--small-spacing);
}
.u--m-right--large {
margin-right: var(--large-spacing);
}
.u--m-right--huge {
margin-right: var(--huge-spacing);
}
.u--m-bottom {
margin-bottom: var(--base-spacing) !important;
}
.u--m-bottom--tiny {
margin-bottom: var(--tiny-spacing) !important;
}
.u--m-bottom--small {
margin-bottom: var(--small-spacing) !important;
}
.u--m-bottom--large {
margin-bottom: var(--large-spacing) !important;
}
.u--m-bottom--huge {
margin-bottom: var(--huge-spacing) !important;
}
.u--m-left {
margin-left: var(--base-spacing);
}
.u--m-left--tiny {
margin-left: var(--tiny-spacing);
}
.u--m-left--small {
margin-left: var(--small-spacing);
}
.u--m-left--large {
margin-left: var(--large-spacing);
}
.u--m-left--huge {
margin-left: var(--huge-spacing);
}
/** Elements for ipad */
.u--p-all {
padding: var(--base-spacing);
}
.u--p-all--tiny {
padding: var(--tiny-spacing);
}
.u--p-all--small {
padding: var(--small-spacing);
}
.u--p-all--large {
padding: var(--large-spacing);
}
.u--p-all--huge {
padding: var(--huge-spacing);
}
.u--p-top {
padding-top: var(--base-spacing);
}
.u--p-top--tiny {
padding-top: var(--tiny-spacing);
}
.u--p-top--small {
padding-top: var(--small-spacing);
}
.u--p-top--large {
padding-top: var(--large-spacing);
}
.u--p-top--huge {
padding-top: var(--huge-spacing);
}
.u--p-right {
padding-right: var(--base-spacing);
}
.u--p-right--tiny {
padding-right: var(--tiny-spacing);
}
.u--p-right--small {
padding-right: var(--small-spacing);
}
.u--p-right--large {
padding-right: var(--large-spacing);
}
.u--p-right--huge {
padding-right: var(--huge-spacing);
}
.u--p-bottom {
padding-bottom: var(--base-spacing);
}
.u--p-bottom--tiny {
padding-bottom: var(--tiny-spacing);
}
.u--p-bottom--small {
padding-bottom: var(--small-spacing);
}
.u--p-bottom--large {
padding-bottom: var(--large-spacing);
}
.u--p-bottom--huge {
padding-bottom: var(--huge-spacing);
}
.u--p-left {
padding-left: var(--base-spacing);
}
.u--p-left--tiny {
padding-left: var(--tiny-spacing);
}
.u--p-left--small {
padding-left: var(--small-spacing);
}
.u--p-left--large {
padding-left: var(--large-spacing);
}
.u--p-left--huge {
padding-left: var(--huge-spacing);
}
/** Hide */
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
@media (min-width: 400px) {
.visually-hidden--for-mobile {
border: initial;
clip: initial;
height: initial;
margin: initial;
overflow: initial;
padding: initial;
position: initial;
width: initial;
white-space: initial;
}
}
/* Work List */
.work-list {
list-style: none;
}
.work-list-item {
display: block;
text-align: center;
margin-bottom: 0.5rem;
font-size: 0.75em;
}
.work-list-link {
cursor: pointer;
user-select: none;
}
/** Animations */
.slide-up,
.top-page-link:hover {
-webkit-animation: slide-up 2s infinite;
-moz-animation: slide-up 2s infinite;
-ms-animation: slide-up 2s infinite;
-o-animation: slide-up 2s infinite;
animation: slide-up 2s infinite;
}
@-webkit-keyframes slide-up {
40% {
-webkit-transform: translate3d(0, -50%, 0) scale(0.9) rotateX(-20deg);
opacity: 0;
}
45% {
-webkit-transform: translate3d(0, 0, 0) scale 1 rotateX(0);
}
50% {
-webkit-transform: translate3d(0, 50%, 0) scale(0.9) rotateX(10deg);
opacity: 0;
}
70% {
-webkit-transform: translate3d(0, 0, 0) scale(1) rotateX(0);
opacity: 1;
}
}
@keyframes slide-up {
40% {
transform: translate3d(0, -50%, 0) scale(0.9) rotateX(-20deg);
opacity: 0;
}
45% {
transform: translate3d(0, 0, 0) scale 1 rotateX(0);
}
50% {
transform: translate3d(0, 50%, 0) scale(0.9) rotateX(10deg);
opacity: 0;
}
70% {
transform: translate3d(0, 0, 0) scale(1) rotateX(0);
opacity: 1;
}
}
.slide-down {
-webkit-animation: slide-down 3s 0.3s infinite;
-moz-animation: slide-down 3s 0.3s infinite;
-ms-animation: slide-down 3s 0.3s infinite;
-o-animation: slide-down 3s 0.3s infinite;
animation: slide-down 3s 0.3s infinite;
}
@-webkit-keyframes slide-down {
40% {
-webkit-transform: translate3d(0, 100%, 0) scale(0.9) rotateX(20deg);
opacity: 0;
}
45% {
-webkit-transform: translate3d(0, 0, 0) scale 1 rotateX(0);
}
50% {
-webkit-transform: translate3d(0, -100%, 0) scale(0.9) rotateX(-20deg);
opacity: 0;
}
70% {
-webkit-transform: translate3d(0, 0, 0) scale(1) rotateX(0);
opacity: 1;
}
}
@keyframes slide-down {
40% {
transform: translate3d(0, 100%, 0) scale(0.9) rotateX(20deg);
opacity: 0;
}
45% {
transform: translate3d(0, 0, 0) scale 1 rotateX(0);
}
50% {
transform: translate3d(0, -100%, 0) scale(0.9) rotateX(-20deg);
opacity: 0;
}
70% {
transform: translate3d(0, 0, 0) scale(1) rotateX(0);
opacity: 1;
}
}
.bounce-and-shake {
-webkit-animation: bounce-and-shake 300ms ease-out;
-moz-animation: bounce-and-shake 300ms ease-out;
-ms-animation: bounce-and-shake 300ms ease-out;
-o-animation: bounce-and-shake 300ms ease-out;
animation: bounce-and-shake 300ms ease-out;
}
@-webkit-keyframes bounce-and-shake {
15%, 40%, 75%, 100% {
-webkit-transform-origin: center center;
}
15% {
-webkit-transform: scale(1.4, 1.2);
}
40% {
-webkit-transform: scale(0.9, 0.9);
}
75% {
-webkit-transform: scale(1.08, 1);
}
100% {
-webkit-transform: scale(1, 1);
}
}
@keyframes bounce-and-shake {
15%, 40%, 75%, 100% {
transform-origin: center center;
}
15% {
transform: scale(1.4, 1.2);
}
40% {
transform: scale(0.9, 0.9);
}
75% {
transform: scale(1.08, 1);
}
100% {
transform: scale(1, 1);
}
}
/** Emojis2 */
.emoji-cursor-estadosunidos {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-casa {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-disenadora {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-ayuda {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-estrategia {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-computadoramobil {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-portafolio {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-contacto {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-yo {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-compu {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-companias {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-diseno {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
.emoji-cursor-negocios {
cursor: url("data:image/svg+xml;utf8,") 16 0, auto;
}
#avatar {
width: 38px;
padding: 0.1em;
margin-bottom: 1em;
margin-top: 1em;
-webkit-clip-path: circle(42.3% at 48% 48%);
clip-path: circle(42.3% at 48% 48%);
background: rgba(50, 50, 50, 0.1);
box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.957);
}
/** Fig Captions */
a figcaption {
font-style: normal;
font-weight: normal;
}
/**
** Reset form styles
*/
/* .toggle-label {
font-style: normal;
font-weight: normal;
}
}
/** Media */
.media {
/* The space (margin) between the sidebar and non-sidebar */
--spacing: 32px;
/* The narrowest the content (main) element can be before wrapping. Should be a percentage. */
--min-width: 50%;
/* The width of the sidebar (empty means not set; defaults to the content width) */
--side-width: 527px;
display: flex;
flex-wrap: wrap;
align-items: center;
margin: calc(var(--spacing) / 2 * -1);
overflow: hidden;
}
.media > * {
margin: calc(var(--spacing) / 2);
flex-basis: var(--side-width);
flex-grow: 1;
}
@media (min-width: 1134px) {
.media .text-col {
margin-left: 0;
}
}
.media > :first-child {
flex-basis: 0;
flex-grow: 999;
min-width: calc(var(--min-width) - var(--spacing));
}
/** Reverse Media */
/* .media--reversed > :first-child {
flex-basis: 0;
flex-grow: 999;
min-width: calc(var(--min-width) - var(--spacing));
}
.media--reversed > :last-child {
flex-basis: initial;
flex-grow: initial;
min-width: initial;
} */
/** Light box */
.lightbox-link {
cursor: zoom-in;
}
.lightbox {
display: none;
}
.lightbox:target {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: zoom-out;
display: grid;
place-items: center;
align-content: center;
background-color: rgba(200, 200, 200, 0.15);
-webkit-backdrop-filter: saturate(100%) blur(20px);
backdrop-filter: saturate(100%) blur(20px);
border: 0;
z-index: 20;
}
.lightbox img {
max-height: 50vh;
z-index: 4;
}
.lightbox:target:before {
/* Loading spinner */
content: "";
height: 2em;
width: 2em;
-webkit-animation: spin 0.8s infinite linear;
animation: spin 0.8s infinite linear;
border: 1px solid;
border-right-color: #000;
border-radius: 10%;
display: block;
position: absolute;
transform: translateX(-50%);
opacity: 0.25;
}
@-webkit-keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.lightbox:target:after {
/** Γ to close */
content: "Γ";
width: 32px;
height: 32px;
overflow: hidden;
position: fixed;
top: 0.75em;
right: 0.5em;
z-index: 20;
font-style: normal;
font-size: 20px;
line-height: 1.5;
text-align: center;
cursor: pointer;
background-color: rgba(200, 200, 200, 0.15);
-webkit-backdrop-filter: saturate(18000%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-radius: 16px;
}
/** Top Logo */
.nav-glyph {
display: inline-block;
font-size: 1.25em;
}
.nav-glyph:after {
content: "";
}
.nav-title--hidden-2:before {
content: "";
font-size: 1em;
}
/** Tex Appears */
@media (min-width: 376px) {
.nav-title--hidden-2:before {
content: " Β· ";
}
}
@keyframes zoomitbig {
15% {
transform-origin: center center;
transform: scale(1.4, 1.2);
}
40% {
transform-origin: center center;
transform: scale(0.9, 0.9);
}
75% {
transform-origin: center center;
transform: scale(1.08, 1);
}
100% {
transform-origin: center center;
transform: scale(1, 1);
}
}
@-webkit-keyframes zoomitbig {
15% {
transform-origin: center center;
transform: scale(1.4, 1.2);
}
40% {
transform-origin: center center;
transform: scale(0.9, 0.9);
}
75% {
transform-origin: center center;
transform: scale(1.08, 1);
}
100% {
transform-origin: center center;
transform: scale(1, 1);
}
}
.nav-logo:hover .nav-glyph {
-webkit-animation: zoomitbig 300ms ease-out;
animation: zoomitbig 300ms ease-out;
}
/** nav wraps */
@media (max-width: 399px) {
.nav-wrap {
display: flex;
justify-content: space-evenly;
align-items: flex-start;
width: 100%;
height: 55px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
background: var(--off-white);
padding-bottom: env(safe-area-inset-bottom);
}
@supports (-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px)) {
.nav-wrap {
background: var(--off-white-82);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
}
/** Margins Resets */
}
@media (max-width: 399px) and (prefers-color-scheme: dark) {
.nav-wrap {
background-color: #292929;
}
@supports (-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px)) {
.nav-wrap {
background-color: rgba(41, 41, 41, 0.82);
}
}
}
@media (max-width: 399px) {
.nav-wrap:after {
content: "";
display: block;
width: 100%;
height: 1px;
position: absolute;
bottom: 100%;
background-color: transparent;
background-image: linear-gradient(to bottom, transparent 0%, transparent 35%, rgba(41, 41, 41, 0.3) 35%);
background-size: 100% 1px;
}
}
@media (max-width: 399px) and (prefers-color-scheme: dark) {
.nav-wrap:after {
background-image: linear-gradient(to bottom, transparent 0%, transparent 35%, rgba(255, 255, 255, 0.16) 35%);
}
}
@media (max-width: 399px) {
.nav-link:not(:first-of-type),
.nav-link.toggle-label {
margin-left: 0;
}
}
@media (max-width: 399px) {
.nav-wrap .nav-link {
display: flex;
flex-direction: column;
/* width: 33.33vw; */
height: 55px;
line-height: 3.4375;
/* 55px */
text-align: center;
text-decoration: none;
}
}
/** Skills */
.skills {
padding-top: 0rem;
}
.skills h2 {
font-size: 1.3rem;
color: #6c757d;
text-transform: uppercase;
}
.skills .icons {
margin: 0.5rem 0 2rem 0;
}
.skills .icons i {
cursor: pointer;
margin-right: 1rem;
font-size: 1rem;
}
.skills .icons i.fa-figma:hover {
color: #6610f2;
}
.skills .icons i.fa-sketch:hover {
color: #f4f408;
}
.skills .icons i.fa-bootstrap:hover {
color: #533b78;
}
.skills .icons i.fa-sass:hover {
color: #c85e93;
}
.skills .icons i.fa-html5:hover {
color: #ff6f00;
}
.skills .icons i.fa-css3-alt:hover {
color: #2862e9;
}
.skills .icons i.fa-js:hover {
color: #f1d43b;
}
.skills .icons i.fa-jira:hover {
color: #0e489f;
}
.skills .icons i.fa-npm:hover {
color: #9f0e10;
}
.skills .icons i.fa-invision:hover {
color: #db14d1;
}
.skills ul {
list-style: square;
}
.skills ul li {
font-size: 1.3rem;
margin-left: 2rem;
}
/** Tarjetas */
.tarjetas-portfolio-gallery-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.tarjetas-portfolio-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 30px;
}
.tarjetas-gallery-item {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
transition: all 0.3s ease;
border: 1px solid #e5e7eb;
}
.tarjetas-gallery-item:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}
.tarjetas-gallery-image {
position: relative;
overflow: hidden;
}
.tarjetas-gallery-img {
width: 100%;
height: 300px;
object-fit: cover;
border-bottom: 1px solid #e5e7eb;
transition: transform 0.3s ease;
}
.tarjetas-gallery-img:hover {
transform: scale(1.05);
}
.tarjetas-gallery-item-info {
padding: 20px;
}
.tarjetas-gallery-item-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 8px;
color: #1f2937;
}
.tarjetas-gallery-item-description {
color: #6b7280;
line-height: 1.6;
}
/* Responsive Design */
@media (max-width: 768px) {
.tarjetas-portfolio-gallery-container {
padding: 20px 15px;
}
.tarjetas-gallery-title {
font-size: 2rem;
}
.tarjetas-gallery-description {
font-size: 1.1rem;
}
.tarjetas-portfolio-gallery-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.tarjetas-project-selector {
position: static;
margin-bottom: 20px;
text-align: center;
}
}
@media (max-width: 480px) {
.tarjetas-gallery-item {
margin: 0 -5px;
}
.tarjetas-gallery-img {
height: 250px;
}
}