/*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; height: auto; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } :root { --h1: #000; --h2: #181819; --h3: rgb(26, 25, 25); --borders: #181819; --background: #fbfbfb; --background-code: #e1e1e1; --text-primary: #000000; --main-bg-color: #f1f1f1; --main-color: #000; --page-width: 1028px; } html { font-size: 16px; overflow-x: hidden; } body { background-color: var(--background); color: var(--text-primary); font-family: var(--primary-font); font-size: 1.125rem; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; } body:has(.hamburger__container.active) { overflow: hidden; } .site-header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px; margin: 0 auto; height: 80px; border-bottom: 1px solid var(--h2); position: relative; background: #fff; } .site-header__container { width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; } @media screen and (min-width: 30em) { .site-header__container { width: min(95vw, var(--page-width)); } } .logo__permalink, .custom-logo-link { display: flex; justify-content: center; align-items: center; width: min(var(--logo-width, 200px), 45vw); } .menu__top { position: absolute; inset-block-start: 80px; inset-inline-end: 0; width: 100vw; height: calc(100dvh - 80px); font-size: clamp(1.375rem, 5vw, 2rem); z-index: 5; color: var(--template-txt); font-family: var(--titles-font); font-weight: 900; text-transform: uppercase; background: linear-gradient(313deg, var(--template-color) 30%, white); text-align: center; display: flex; justify-content: center; align-items: center; right: -100vw; transition: all 0.5s 0.3s; } .menu__top:has(+ .active) { right: 0; } .menu__top .menu { display: flex; flex-direction: column; gap: 15px; } html:has(.hamburger__container.active) { overflow: hidden; } .hamburger__container { height: 50px; width: 50px; display: flex; justify-content: end; align-items: center; z-index: 10; } .hamburger__container .hamburger { width: 35px; height: 4.5px; background: #000; border-radius: 50px; position: relative; transition: rotate 0.3s, translate 0.3s 0.3s; } .hamburger__container .hamburger::before, .hamburger__container .hamburger::after { content: ""; position: absolute; width: 100%; height: 100%; background: #000; border-radius: 50px; } .hamburger__container .hamburger::before { top: -9px; transition: rotate 0.3s; } .hamburger__container .hamburger::after { bottom: -9px; transition: all 0.3s 0.3s; } .hamburger__container.active .hamburger { translate: 0 9px; rotate: 35deg; background: #000; transition: translate 0.3s, rotate 0.3s 0.3s; transform-origin: right; } .hamburger__container.active .hamburger::before, .hamburger__container.active .hamburger::after { translate: 0 -9px; background: #000; transition: translate 0.3s; } .hamburger__container.active .hamburger::before { rotate: 110deg; translate: 0 9px; transition: all 0.3s 0.3s; } .content .cm-s-material.CodeMirror, .content .cp_embed_wrapper { border-radius: 15px; border: #212121 solid 5px; box-shadow: 7px 7px var(--borders); } .content .CodeMirror-panel { background-color: rgba(0, 0, 0, 0.5); } .content .CodeMirror-panel .control-panel > span { cursor: url(/wp-content/themes/cssisrael/assets/img/copy.png), auto; } .content .CodeMirror-lines { padding: 15px; } .content .CodeMirror .language { color: orange; } .content .CodeMirror .language, .content .CodeMirror .language.css { background: transparent; } .content .CodeMirror .language.js { background: #444; } .content .CodeMirror .language.scss, .content .CodeMirror .language.sass { color: #eeeeee; } .cp_embed_wrapper { margin: 15px auto 25px; } .main { width: min(95vw, var(--page-width)); margin: 45px auto; } .home .main { width: 100%; margin: 0 auto 45px; } .single .main__content { width: min(100%, 95vw); padding: 0 15px; } .content h1 { font-weight: 700; font-size: clamp(22px, 5vw, 32px); line-height: clamp(26px, 5.2vw, 36px); margin-block-end: 10px; color: var(--h1); font-family: var(--titles-font); } .content h1:nth-of-type(2) { display: none; } .content h2 { font-weight: 700; font-size: 1.375rem; margin-bottom: 10px; color: var(--h2); text-transform: capitalize; font-family: var(--titles-font); } .content h3 { font-weight: 700; font-size: 1.25rem; color: var(--h3); text-transform: capitalize; margin-block-end: 5px; } .content h4 { font-size: 16px; margin-bottom: 10px; } .content p { margin-bottom: 15px; font-weight: 300; } .content p::selection { background: rgba(75, 102, 199, 0.6392156863); } .content p code { font-family: monospace; padding: 0 4px; background-color: var(--background-code); direction: ltr; display: inline-block; } .content p strong { font-weight: 700; } .content p a { color: #3858e9; transition: color 0.3s; } .content p a:hover, .content p a:active { color: #1537d0; text-decoration: underline; } .pagination .nav-links { display: flex; justify-content: space-evenly; align-items: center; margin-top: 15px; } .pagination .nav-links .page-numbers.current { color: #1537d0; } ul:not(.menu) { margin: 12px 0; } ul:not(.menu) :is(.wp-block-list, li) { list-style: disc; font-size: 15px; font-weight: 200; margin: 2px 30px; } ul:not(.menu) :is(.wp-block-list, li) a { color: #3858e9; transition: color 0.3s; } ul:not(.menu) :is(.wp-block-list, li) a:hover, ul:not(.menu) :is(.wp-block-list, li) a:active { color: #1537d0; text-decoration: underline; } #cookieBanner a:visited { color: var(main-color); } .hp__top { display: grid; grid-template-columns: auto; gap: 20px; width: min(95vw, var(--page-width)); margin: 60px auto 25px; } .hp__top--main { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; } @media screen and (min-width: 37.5em) { .hp__top--main { grid-template-columns: repeat(8, 1fr); } } @media screen and (min-width: 750px) { .hp__top--main { gap: 20px; grid-template-rows: repeat(auto-fill, minmax(100px, 150px)); } } .hp__top--main a { display: flex; height: 100%; } .hp__top--main .card { border: 1px solid rgba(0, 0, 0, 0.2509803922); } .hp__top--main .card:first-child { grid-column: span 8; grid-row: span 2; border: solid black 1px; background: linear-gradient(282deg, var(--template-color), transparent); color: white; } @media screen and (min-width: 750px) { .hp__top--main .card:first-child { grid-column: span 4; } } .hp__top--main .card:first-child a { gap: 10px; } .hp__top--main .card:first-child .card__img--container { flex: 1 0 calc(50% - 5px); } @media screen and (min-width: 750px) { .hp__top--main .card:first-child .card__img--container { flex: 1 0 50%; } } .hp__top--main .card:first-child p { font-size: 14px; } .hp__top--main .card:nth-child(n+2) { grid-column: span 4; } @media screen and (min-width: 900px) { .hp__top--main .card:nth-child(n+2) { grid-column: span 2; } } .hp__top--main .card:nth-child(n+2) a { display: flex; flex-direction: column; } @media screen and (min-width: 450px) { .hp__top--main .card:nth-child(n+2) a { flex-direction: row; } } @media screen and (min-width: 450px) { .hp__top--main .card:nth-child(n+2) .card__img--container { flex: 1 0 clamp(40%, 7vw, 50%); } } .hp__top--main .card:not(:first-child) { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .hp__top--main .card:not(:first-child) .card__info { color: black; } .hp__top--main img { aspect-ratio: 1; object-fit: cover; width: 100%; height: 100%; } .hp__top--main .card__info { margin: 14px; align-self: end; color: var(--template-txt); } .hp__top--main .card__info--title { font-weight: 700; font-size: clamp(16px, 2.5vw, 20px); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .hp__top--main .card__info p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hp__top--second { border: 1px solid rgba(0, 0, 0, 0.1882352941); padding: 0 15px; display: flex; flex-direction: column; justify-content: space-between; container: hp-second/inline-size; } .hp__top--second_title { font-family: "Fjalla One", sans-serif; align-self: center; margin: 15px 0; font-size: 18px; } .hp__top--second_articles { display: grid; column-gap: 10px; } @media screen and (min-width: 30em) { .hp__top--second_articles { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } .hp__top--second .card { padding: 15px 5px 15px 0; border-top: rgba(0, 0, 0, 0.1882352941) 1px solid; flex: 1 1 210px; } @media screen and (min-width: 59.375em) { .hp__top--second .card { flex: 1 1 250px; } } @media screen and (min-width: 71.5em) { .hp__top--second .card { padding: 15px 0; flex: 0 0 0; } } .hp__top--second .card a { display: flex; gap: 10px; } .hp__top--second .card__img--container { width: 100px; height: 100px; flex-shrink: 0; } .hp__top--second .card img { aspect-ratio: 1; object-fit: cover; width: 100%; } .hp__top--second .card__info--title { font-size: 16px; } .hp__med { background-image: linear-gradient(72deg, var(--homepage-gradient-1) var(--homepage-gradient-start), var(--homepage-gradient-2) var(--homepage-gradient-end)); padding: 45px 0; } .hp__med--inner { display: flex; gap: 20px; width: min(95vw, var(--page-width)); margin: auto; overflow-x: auto; scroll-snap-type: x mandatory; } @media screen and (min-width: 43.75em) { .hp__med--inner { display: grid; grid-template-columns: repeat(4, 1fr); } } .hp__med--inner::-webkit-scrollbar { display: none; } .hp__med .card { border: 1px solid rgba(255, 255, 255, 0.2509803922); background: white; flex: 0 0 250px; scroll-snap-align: start; } @media screen and (min-width: 43.75em) { .hp__med .card { flex: 1 1 250px; } } .hp__med .card img { aspect-ratio: 1; object-fit: cover; width: 100%; } .hp__med .card__info { margin: 15px; } .hp__bottom { padding: 45px 0; } .hp__bottom--inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; width: min(95vw, var(--page-width)); margin: auto; padding: 0; } @media screen and (min-width: 37.5em) { .hp__bottom--inner { grid-template-columns: repeat(2, 1fr); } } @media screen and (min-width: 43.75em) { .hp__bottom--inner { grid-template-columns: repeat(4, 1fr); } } .hp__bottom .card { border: 1px solid rgba(0, 0, 0, 0.2509803922); background: white; } .hp__bottom .card a { height: 100%; display: flex; flex-direction: column; } .hp__bottom .card img { aspect-ratio: 1; object-fit: cover; width: 100%; } .hp__bottom .card__info { margin: 15px; display: flex; flex-direction: column; height: 100%; } .hp__bottom .card__info--title { font-weight: 700; font-size: clamp(16px, 4vw, 20px); } .hp__bottom .card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; margin-top: auto; } form.wpcf7-form.init { display: flex; flex-direction: column; } form .wpcf7-form-control.wpcf7-text, form .wpcf7-form-control.wpcf7-textarea { width: 100%; background: var(--background-code); padding: 10px; } form .wpcf7-form-control.wpcf7-submit { padding: 15px; background: var(--h2); cursor: pointer; width: 150px; display: flex; justify-content: center; transition: background 0.3s; } form .wpcf7-form-control.wpcf7-submit:hover { background: var(--h3); } p:has(.wpcf7-submit) { display: flex; width: 100%; justify-content: start; } .recaptcha-text { text-align: left; direction: ltr; } .grecaptcha-badge { visibility: hidden; } footer:not(.site-footer) { display: none; } .site-footer { margin-top: auto; padding: 1.5rem; border-top: 1px solid var(--h2); gap: 0.75rem; display: flex; font-weight: 700; flex-direction: column; justify-content: center; font-family: var(--titles-font); background-color: var(--template-color); color: var(--template-txt); } @media screen and (min-width: 510px) { .site-footer { align-items: center; } } .menu__footer { container: footer-menu/inline-size; width: 100%; } .menu__footer .menu { display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; } @media screen and (min-width: 510px) { .menu__footer .menu { flex-direction: row; gap: clamp(0.875rem, 3vw, 1.5rem); } } .archive .page-title, .search .page-title { font-weight: 700; font-size: 1.5rem; margin-block-end: 20px; display: flex; justify-content: center; align-items: center; } .archive .card, .search .card { border: 1px solid rgba(0, 0, 0, 0.2509803922); background: white; } .archive .cards__container, .search .cards__container { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; width: min(95vw, var(--page-width)); margin: auto; padding: 0 15px; } @media screen and (min-width: 37.5em) { .archive .cards__container, .search .cards__container { grid-template-columns: repeat(2, 1fr); } } @media screen and (min-width: 43.75em) { .archive .cards__container, .search .cards__container { grid-template-columns: repeat(4, 1fr); } } .archive .card img, .search .card img { aspect-ratio: 1; object-fit: cover; width: 100%; } .archive .card__info, .search .card__info { margin: 15px; display: flex; flex-direction: column; gap: 10px; } .archive .card p, .search .card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; margin-top: auto; } .related__container { border-block-start: 1px solid var(--template-color); margin-block: 25px; } .related__title { padding: 10px 5px; font-weight: 600; font-size: 18px; } .related__posts--container { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; } .related__posts--container::-webkit-scrollbar { display: none; } @media screen and (min-width: 700px) { .related__posts--container { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; } } .related__post { border: 1px var(--template-color) solid; border-radius: 15px; padding: 5px; flex: 0 0 170px; min-height: 270px; scroll-snap-align: start; } .related__img { border-radius: 15px; aspect-ratio: 4/3; object-fit: cover; } .related__info { padding: 10px 3px 15px; font-weight: 700; font-size: clamp(18px, 4vw, 20px); line-height: clamp(19px, 4.1vw, 21px); } .more-articles__container { border-block-start: 1px solid var(--template-color); position: sticky; top: 0; width: min(100%, 95vw); padding: 0 15px; } .more-articles__title { padding: 10px 5px; font-weight: 600; font-size: 18px; } .more-articles__posts--container { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(222px, 1fr)); } .more-articles__post { border: 1px solid var(--template-color); border-radius: 15px; padding: 5px; } .more-articles__link { display: flex; gap: 10px; container-type: inline-size; container-name: sidebar; } .more-articles__img { aspect-ratio: 1; object-fit: cover; height: auto; border-radius: 15px; } .more-articles__img--container { display: flex; flex: 0 0 90px; } .more-articles__info { font-weight: 500; font-size: clamp(14px, 5.5cqw, 18px); line-height: clamp(16px, 5.8cqw, 20px); padding: 6px 0; } body .asl_w_container { min-width: 140px; } .author__box { display: flex; gap: 7px; align-items: center; margin-bottom: 15px; } .author__img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; width: 60px; } .author__info { display: flex; flex-direction: column; justify-content: center; } .author__info h4 { font-size: clamp(12px, 4vw, 16px); margin-bottom: 0; } .single-post .main { display: grid; grid-template-columns: 1fr; gap: 15px; width: min(100%, 95vw); } @media screen and (min-width: 1080px) { .single-post .main { grid-template-columns: 728px 300px; width: max-content; } } .content img.wp-post-image { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; margin-block-start: 10px; } .content img[class^="aligncenter wp-image"] { width: 100%; height: auto; aspect-ratio: 16/8.5; object-fit: cover; } article div h1 { display: none; } article p br:empty { display: none; } .page .main:has(.page) { width: min(var(--page-width), 95vw); } .dir-ltr { direction: ltr; }