@charset "utf-8";
/* CSS Document */
body {
margin: 0;
font-family: 'ff-tisa-web-pro', Georgia, serif;
font-weight: 300;
font-style: normal;
font-size: 18px;
line-height: 1.6em;
color: #26262e;
}
h1, h2, h3, h4, h5, .subl {
font-family: "IBM Plex Sans", sans-serif;
line-height: 1.2em;
letter-spacing: 0.01em;
}
h1, h2, h3, h4, .subl, p {
text-rendering: optimizeLegibility;
font-feature-settings: "kern";
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1";
font-variant-ligatures: common-ligatures;
-webkit-font-variant-ligatures: common-ligatures;
}
h2 {margin: 0.2em 0}
.subl {margin-top: 1.5em}
p {margin: 0.7em 0}
@font-face {
font-family: 'ico';
src: url('../fonts/ico/ico.eot');
src: url('../fonts/ico/ico.eot?#iefix') format('embedded-opentype'),
url('../fonts/ico/ico.ttf') format('truetype'),
url('../fonts/ico/ico.woff') format('woff'),
url('fonts/ico/ico.svg#ico') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'ico';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-google-plus:before {
content: "\e600";
}
.icon-facebook:before {
content: "\e601";
}
.icon-twitter:before {
content: "\e602";
}
.icon-feed:before {
content: "\e603";
}
.icon-vimeo:before {
content: "\e604";
}
.icon-pinterest:before {
content: "\e605";
}
.icon-linkedin:before {
content: "\e606";
}
.icon-mail:before {
content: "\e607";
}
[class^="icon-"]:hover {
color: #33afee;
}
a {
text-decoration: none;
color: #2d9ad2;
}
footer a, footer .social a {color: #fff}
a:hover, .more:hover {
color: #33afee;
}
.social {
color: #ccccd6;
font-size: 2.5em;
padding-bottom: 1em;
}
.social a {
padding: 0em 0.4em;
}
.des {display: none !important;}
@media screen and (min-width: 595px) {
.des {display: block !important;}
.des.social-writings-row {display: flex !important;}
}
.social-row-mob {
padding-bottom: 0.5em;
}
@media screen and (min-width: 595px) {
.social-row-mob {display: none !important;}
}
header {
background-image: url(../images/fogarasy-tamas-bg.jpg);
background-position: 60% 0px;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
min-height: 100px;
max-height: 240px;
position: relative;
margin: 0 0 1em 0;
padding: 3em 0;
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 {
text-align: center;
margin: 130px 0 0 0;
color: #ccccd6;
font-size: 1.3em;
}
.wrapper{
max-width: 1180px;
margin: 0 auto;
padding: 0 1em;
}
.clearfix {
clear: both;
}
.more {
float: right;
height: 100%;
min-height: 50px;
max-width: 12em;
width: 15%;
min-width: 1em;
overflow: hidden;
padding: 8% 0 8% 0;
text-align: center;
font-size: 3em;
color: #adaeb7;
display: none;
}
.post-list article {
min-height: 220px;
border: solid #ececf2;
border-width: 0 0 1px 0;
padding: 1.5em 0;
position: relative;
}
.post-list article > section > a:first-child {
display: block;
}
.post-list article > section > a:first-child::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
}
.post-list article:has(> section > a:first-child) {
cursor: pointer;
}
.post-list article .more,
.post-list article .post-image,
.post-list article .details,
.post-list article .details a,
.post-list article .social-writings-row {
position: relative;
z-index: 1;
}
.post-list article .post-image {
margin: 0 30px 0 0;
width: 100%;
}
.post-list article .details {
overflow: hidden;
margin: 0 auto;
max-width: 720px;
}
.post-list .subl{
color: #adaeb7;
font-size: 1em;
}
footer {
padding: 2em 0;
margin: 1em 0 0 0;
background: #26262e;
color: #fff;
}
footer .social {
margin: 0 0 1em 0;
font-size: 3em;
}
/* NEWSLETTER */
form {
margin: 0.5em 0;
clear: both;
min-height: 70px;
}
.subscribe {
border: solid #ececf2;
border-width: 1px 0;
padding: 0 0 2em 0;
}
.subscribe-input {
height: 70px;
margin: 0;
padding: 0 0.5em;
width: 100%;
min-width: 220px;
font-size: 1.5em;
border: 0;
outline: 2px solid #adaeb7;
background-color: #fff;
position: relative;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.subscribe-submit {
height: 70px;
width: 20%;
min-width: 150px;
padding: 0;
margin: 0;
display: block;
background: #26262e;
border: 0;
text-align: center;
color: #fff;
font-size: 1em;
font-weight: 400;
position: relative;
float: right;
top: -70px;
}
.subscribe-submit:hover {
background: #d0d1da;
}
/* RESPONSIVE */
@media screen and (min-width: 595px) {
.mob {display: none;}
.des {display: block;}
.wrapper{
padding: 0 2em;
}
h1 {
text-align: left;
margin: 130px 0 0 0;
}
body {
font-size: 20px;
}
header {
background-position: 50% 0px;
min-height: 280px;
max-height: 620px;
}
h1, h2, h3, h4, .subl {
line-height: 1.3em;
}
.social {text-align: left; padding-top: 0.75em;}
}
@media screen and (min-width: 780px) {
header {
background-position: 42% 0px;
}
.social a {
padding: 0em 0.4em 0em 0em;
}
h1 {
font-size: 2em;
line-height: 1.3em;
}
h2 {
font-size: 1.5em;
line-height: 1.25em;
margin: 0;
}
.small {
font-size: 0.813em;
line-height: 1.4em;
}
.subl {margin-top: 0em}
.post-list article .post-image {
width: 50%;
float: left;
}
.subscribe {
margin: 0 1em;
}
.subscribe .wrapper{
margin: 0 10%;
}
}
@media screen and (min-width: 1024px) {
.more {
display: block;
}
.post-list article .post-image {
max-width: 420px;
}
}
@media screen and (min-width: 1280px) {
.more {
display: block;
}
}
/* SITE NAV - subpages only */
.site-nav {
font-family: "IBM Plex Sans", sans-serif;
font-size: 0.85em;
padding: 1em 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.site-nav .site-name a {
color: #26262e;
font-weight: 500;
}
.site-nav .site-links a {
color: #adaeb7;
margin-left: 1.5em;
}
.site-nav .site-links a:hover,
.site-nav .site-name a:hover {
color: #33afee;
}
/* BREADCRUMB */
.breadcrumb {
font-family: "IBM Plex Sans", sans-serif;
font-size: 0.8em;
color: #adaeb7;
padding: 0.8em 0 0 0;
}
.breadcrumb a {
color: #adaeb7;
}
.breadcrumb a:hover {
color: #33afee;
}
.breadcrumb .sep {
margin: 0 0.4em;
}
/* HERO IMAGE - articles */
.hero {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
min-height: 260px;
position: relative;
}
.hero-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 20%;
padding: 0 0 1.5em 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: linear-gradient(to bottom, transparent 0%, rgba(38,38,46,0.7) 50%, rgba(38,38,46,0.95) 100%);
}
.hero-overlay h1 {
color: #fff;
margin: 0;
text-align: left;
font-size: 1.5em;
}
.hero-overlay .post-date {
color: #ccccd6;
font-family: "IBM Plex Sans", sans-serif;
font-size: 0.85em;
margin: 0.4em 0 0 0;
}
/* WRITINGS LIST - homepage card style */
.social-writings-row {
display: flex;
align-items: center;
gap: 0;
padding-top: 0.75em;
}
.social-writings-row .social-link {
color: #ccccd6;
font-size: 1.9em;
padding: 0 0.48em 0 0;
}
.social-writings-row .social-link:hover {
color: #33afee;
}
.social-writings-row .writings-link {
margin-left: 0.5em;
}
.writings-link {
font-family: "IBM Plex Sans", sans-serif;
font-size: 1em;
font-weight: 500;
display: inline-block;
padding: 0.5em 0.5em;
background: #fff;
color: #26262e;
letter-spacing: 0.02em;
line-height: 1.4;
}
.writings-link:hover {
background: #33afee;
color: #fff;
}
@media screen and (min-width: 595px) {
.hero {
min-height: 320px;
}
.hero-overlay {
top: 15%;
}
.hero-overlay h1 {
font-size: 2em;
}
}
@media screen and (min-width: 780px) {
.hero {
min-height: 400px;
}
.hero-overlay {
top: 10%;
background: linear-gradient(to bottom, transparent 0%, rgba(38,38,46,0.55) 55%, rgba(38,38,46,0.93) 100%);
}
}
.social-text {
font-family: "IBM Plex Sans", sans-serif;
font-weight: 600;
}
.social-linkedin {
font-weight: 700;
}
/* DARK MODE - System preference based */
@media (prefers-color-scheme: dark) {
body {
background-color: #1d1d24;
color: #e5e5ec;
}
header {
background-color: transparent;
}
h1 {
color: #ccccd6;
}
h2, h3, h4, .subl {
color: #e5e5ec;
}
a {
color: #5ba7db;
}
a:hover, .more:hover {
color: #7bc4f0;
}
.social a {
color: #ccccd6;
}
.social a:hover {
color: #7bc4f0;
}
.post-list article {
border-color: #38383f;
}
.post-list article:hover {
background: #24242c;
}
.post-list .subl {
color: #a4a4ae;
}
.more {
color: #686872;
}
footer {
background: #191920;
color: #ccccd6;
}
footer a, footer .social a {
color: #ccccd6;
}
.subscribe-input {
background-color: #28282f;
color: #e5e5ec;
outline-color: #585862;
}
.subscribe-submit {
background: #38383f;
color: #ccccd6;
}
.subscribe-submit:hover {
background: #484852;
}
.subscribe {
border-color: #38383f;
}
.site-nav .site-name a {
color: #e5e5ec;
}
.site-nav .site-links a {
color: #686872;
}
.breadcrumb, .breadcrumb a {
color: #686872;
}
}