/*----------------------------------------------------*/ /* BASIC SETUP*/ /* A Roboto e carregada por no de cada */ /* pagina — mais rapido que o @import que ficava aqui. */ /*----------------------------------------------------*/ * { margin: 0; padding: 0; box-sizing: border-box; outline: none; } /* mantem o anel de foco para quem navega pelo teclado */ *:focus-visible { outline: 2px solid #630948; outline-offset: 3px; } html { background-color: #fff; color: #555; font-family: 'Roboto', 'Arial', sans-serif; font-size: 20px; font-weight: 300; text-rendering: optimizeLegibility; -webkit-touch-callout: none; } /* o user-select: none global impedia o visitante de copiar qualquer coisa do site, inclusive e-mail e telefone. Agora so os videos ficam protegidos (regra que vinha de works.component.scss). */ video { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } video[poster] { object-fit: cover; } /*----------------------------------------------------*/ /* REUSABLE COMPONENTS*/ /*----------------------------------------------------*/ .row { max-width: 1140px; margin: 0 auto; } .text-box { letter-spacing: 1px; } /*------------HEADINGS------------*/ h1 { font-family: "Roboto"; font-size: 37px; font-weight: 200; letter-spacing: -0.2px; color: #393939; } h2 { font-size: 120%; word-spacing: 2px; text-align: center; letter-spacing: 1px; } h3 { display: inline-block; width: 35px; height: 8px; background: #f84e61; vertical-align: 14%; margin-right: 15px; font-size: 15px; } h4 { font-size: 20px; color: #F84E61; line-height: 20px; font-weight: 400; } h5 { font-size: 17px; font-weight: 500; color: #F84E61; line-height: 2em; } h6 { font-size: 19px; font-weight: 300; padding-top: 13px; } p { font-size: 19px; font-weight: 300; } li { list-style: none; font-size: 16px; font-weight: 300; } /*----------------------------------------------------*/ /* NAVIGATION BAR*/ /*----------------------------------------------------*/ input { display: none; } a { text-decoration: none; transition: color 0.3s ease, background-color 0.3s ease; } .navigation-sticky { background-color: rgba(250, 250, 250, 0.95); height: 70px; width: 100%; position: fixed; top: 0; z-index: 9999; } .main-nav { float: right; list-style: none; padding-top: 20px; } .main-nav li { display: inline-block; margin-left: 30px; } .font-size-navbar li { font-size: 19px; } .main-nav li:nth-of-type(1) { min-width: 9px; margin-right: 10px; text-align: center; } .main-nav li:nth-of-type(2) { min-width: 60px; margin-right: 10px; text-align: center; } .main-nav li:nth-of-type(3) { min-width: 64px; margin-right: 10px; text-align: center; } .main-nav li:nth-of-type(4) { min-width: 82px; margin-right: 10px; text-align: center; } .main-nav li:nth-of-type(5) { min-width: 89px; margin-right: 10px; text-align: center; } .main-nav li:nth-of-type(6) { min-width: 46px; text-align: center; } .main-nav li:nth-of-type(7) { min-width: 138px; text-align: center; } .main-nav li a:link, .main-nav li a:visited { padding: 8px 0; color: #000; font-weight: 400; text-decoration: none; font-size: 80%; transition: border-bottom 0.2s; } /*----------------------------------------------------*/ /* Re-usable classes */ /*----------------------------------------------------*/ .section-home-header { padding-top: 140px; } .adjust-class-wibd-works { font-size: 20px; color: #F84E61; line-height: 20px; font-weight: 400; padding-top: 20px; padding-bottom: 0px; } /* Hero da home: separadores discretos entre os cargos, para a sequencia ler como tres itens e nao como um bloco unico. */ /* Hero: 37px em toda largura de tela, sem excecao. Duas versoes do texto no HTML, trocadas em 1024px: >= 1024px completa "... | Java · Kotlin · Design Systems" < 1024px reduzida "Engineering Management | Head of Design | Design Engineer" O "Java · Kotlin · Design Systems" nunca vai para uma linha propria: ou esta na mesma faixa dos cargos, ou nao aparece. O texto quebra naturalmente; os no HTML seguram cada | junto da palavra anterior, entao nenhuma linha comeca com separador. */ .hero-line { font-size: 37px; line-height: 1.3; } .hero-full, .hero-short { display: block; } /* links da lista de contato do profile no mesmo cinza do texto */ .alignment-lists li a { color: #555; } /* links de site no fecho dos cases (diagonaldev, dmzstore, agendahello) no mesmo cinza do texto, como o link de e-mail ao lado */ .bold-text-trial a { color: #555; } /* lista do "What I bring" no mesmo corpo do texto da pagina (19px), e nao nos 16px das listas da timeline. Cada topico fica em uma linha corrida, com uma linha em branco separando um do outro. */ .what-i-bring li { font-size: 19px; margin-bottom: 23px; } .what-i-bring li:last-child { margin-bottom: 0; } /* Por padrao os dois trechos correm juntos e o navegador quebra onde couber. So em 1512px a quebra e fixada antes do "Java", com o pipe fechando a primeira linha. */ .hero-part { display: inline; } @media only screen and (width: 1512px) { .hero-part { display: block; } } /* padrao: reduzida */ .hero-full { display: none; } /* de 1024px para cima entra a versao completa */ @media only screen and (min-width: 1024px) { .hero-full { display: block; } .hero-short { display: none; } } /* tudo no mesmo tom: cargos, stack e separadores */ .hero-sep, .hero-dot { color: inherit; padding: 0 3px; } .adjust-class-wibd-big{ padding-top: 20px; } .adjust-class-wibd-title { padding-bottom: 50px; } .adjust-class-wibd-title2 { padding-bottom: 70px; } .adjust-class-wibd-title-general { padding-bottom: 30px; padding-top: 80px; } /*----------------------------------------------------*/ /* Home Initial Screen */ /*----------------------------------------------------*/ .section-home { background: fff; padding-top: 140px; } .line-title { display: inline-block; width: 35px; height: 8px; background: #f84e61; vertical-align: 14%; margin-right: 15px; font-size: 11px; } /*----------------------------------------------------*/ /* Showcase */ /*----------------------------------------------------*/ .logo-hello { width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto; margin-top: 0px; } .logo-hello-responsive { width: 100%; height: auto; margin-left: auto; margin-right: auto; margin-top: 0px; display: none; } .logo-diagonal { width: 100%; height: auto; display: grid; margin-right: 15px; margin-top: 15px; } .logo-dmz { width: 100%; height: auto; display: grid; margin-top: 15px; } /*----------------------------------------------------*/ /* Contact us */ /*----------------------------------------------------*/ .section-contact { background: fff; padding-top: 80px; } .line-contact { display: inline-block; width: 35px; height: 8px; background: #f84e61; vertical-align: 14%; margin-right: 15px; font-size: 11px; } .big-fonts { font-family: "Roboto"; font-size: 37px; font-weight: 200; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: -0.2px; color: #393939; } .kris-basque-mail { text-decoration: none; color: #555; padding-top: 50px; } .logo-linkedin { width: 24px; height: auto; display: block; margin-top: 8px; margin-bottom: 85px; } .hero-text-box2 { padding-top: 20px; padding-bottom: 15px; font-size: 18px; } /*----------------------------------------------------*/ /* Works - Agenda Hello */ /*----------------------------------------------------*/ /*------------VIDEO------------*/ .video-hello-site { padding-top: 0px; width: 100%; height: auto; } /*------------Hello Planing------------*/ .section-works-kris-basque-sketching { display: grid; } .description_planing { padding-right: 47px; width: 100%; float: left; } .hello-planing-image-2 { width: 100%; height: auto; padding-top: 20px; } .hello-planing { width: 100%; height: auto; } .planing-padding-bottom { padding-bottom: 50px; } /*------------Design Process------------*/ .images-padding-top { padding-top: 50px; } .sketching-image1 { width: 100%; height: auto; display: block; float: left; margin-right: 22px; margin-top: 22px; } .sketching-image2 { width: 100%; height: auto; display: block; float: left; margin-top: 22px; } /*------------Naming & Branding------------*/ .sketch-3 { width: 100%; height: auto; padding-top: 20px; } /*------------Website------------*/ .section-works-kris-basque-website-screenshot { padding-top: 0px; width: 75%; height: auto; display: block; margin-left: auto; margin-right: auto; } .section-works-kris-basque-mobile-twr-screenshot { padding-top: 0px; width: 30%; height: auto; display: block; margin-left: auto; margin-right: auto; } /*------------Conclusion------------*/ .section-home-conclusion { padding-bottom: 150px; } .bold-text-trial { font-weight: 400; color: #212121; } /*----------------------------------------------------*/ /* Profile */ /*----------------------------------------------------*/ /*------------How everything Started------------*/ .class-padding-button{ text-align: right; /* display: inline-block; */ z-index: 2; position: relative; } .contact-button { padding: 8px 20px; border: 1px solid #212121; border-radius: 50px; font-size: 14px; font-weight: 400; color: #212121; } .contact-button:hover { border: 1px solid #212121; background: #212121; color: white; } .alignment-lists { padding-top: 50px; } .section-how-everything-started-class { padding-top: 60px; } .section-how-everything-started-class-2 { padding-top: 30px; } .adjust-class-wibd p { font-size: 20px; color: #F84E61; line-height: 20px; font-weight: 400; padding-top: 60px; padding-bottom: 0px; } .adjust-class-wibd h1 { font-family: "Roboto"; font-size: 37px; font-weight: 200; letter-spacing: -0.2px; color: #393939; padding-bottom: 30px; } .class-year-info { padding-bottom: 20px; } .alignment-lists-year { padding-top: 60px; } .alignment-lists-details { padding-top: 30px; } .photo-kris-working { width: 100%; height: auto; display: block; float: left; margin-right: 22px; margin-top: 12px; border-right: 5px solid transparent; } .profile-how-everything-started-title { font-size: 19px; font-weight: 500; color: #F84E61; line-height: 2em; } .profile-how-everything-started-description { font-size: 19px; font-weight: 300; } .kris-basque-project-description-more { font-size: 19px; padding-bottom: 50px; } .section-what-ive-been-doing { padding-top: 40px; } .profile-timeline-year { font-size: 20px; color: #F84E61; line-height: 20px; font-weight: 400; } .profile-timeline-description { font-size: 19px; font-weight: 300; } /*----------------------------------------------------*/ /* Footer */ /*----------------------------------------------------*/ footer p { background-color: #F9F9F9; padding: 18px; text-align: center; font-size: 16px; font-weight: 300; } .footer-nav { list-style: none; float: right; } .logo-heart { width: 11px; height: auto; font-size: 5px; }