:root { --font-family: 'Gantari', sans-serif; --fs-xlg: 1.5em; --fs-lg: 1.25em; --fs-sm: .75em; --fw-sm: 400; --fw-md: 500; --fw-lg: 700; --text-shadow-sm: 1px 1px rgb(0 0 18 /.75); --text-shadow-md: 2px 2px rgb(0 0 18 /.75); --text-shadow-lg: 3px 3px rgb(0 0 18 /.75); --clr-neutral-100: hsl(26, 17%, 92%); --clr-neutral-500: hsl(0, 0%, 50%); --clr-neutral-900: hsl(26, 17%, 8%); --blue-500: hsl(200, 85%, 40%); --blue-600: hsl(200, 85%, 25%); --blue-900: hsl(200, 80%, 10%); --primary: var(--blue-500); --accent: hsl(358, 83%, 52%); --spacer-xs: .5em; --spacer-sm: .75em; --spacer: 1em; --border-radius: 5px; --padding-box: var(--spacer) calc(var(--spacer) * 1.5); --box-shadow: 0 0 8px 0 rgb(0 0 18 /.5); --shadowed-gradient: linear-gradient(to bottom, rgb(0 0 18 /.25), transparent, rgb(0 0 18 /.25)); --duration-sm: 150ms; --duration-md: 600ms; --duration-lg: 1s; --scrollbarForegroundVerticle: var(--blue-600); --scrollbarBackground: var(--clr-neutral-500); --scrollbarHover: var(--blue-500); --soft-in: soft-in var(--duration-md) ease forwards; } /* #region New Reset */ /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) 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-inline-size: 100%; max-block-size: 100%; } /* 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; 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; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* 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; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* #endregion New Reset */ /* #region Document */ html, body { display: flex; flex-direction: column; width: 100%; min-height: 100vh; } html { font-family: var(--font-family); font-size: calc(15px + 0.390625vw); line-height: 1.5; } body { margin: 0; padding: 0; color: var(--clr-neutral-100); background: var(--clr-neutral-900); } .main { flex: 1 0 auto; } .scrollbar::-webkit-scrollbar { /* Mostly for vertical scrollbars */ width: 0.75rem; } .scrollbar::-webkit-scrollbar-thumb { background: var(--scrollbarForegroundVerticle); border-radius: var(--border-radius); } .scrollbar::-webkit-scrollbar-thumb:hover { background: var(--scrollbarHover); border: 1px solid var(--scrollbarBackground); } .scrollbar::-webkit-scrollbar-track { background: var(--scrollbarBackground); box-shadow: inset 1px 1px 8px #2222223f, inset -1px -1px 8px #2222223f; } blockquote::before { content: '\201C'; } blockquote::after { content: '\201D'; } label { display: block; } input, textarea { display: block; max-width: 100%; padding: var(--padding-box); color: var(--clr-neutral-900); background: var(--clr-neutral-100); border-radius: var(--border-radius); } input::placeholder, textarea::placeholder { opacity: .5; } input:focus, textarea:focus { outline: 3px solid var(--blue-500); } /* #endregion Document */ /* #region Layout */ @media screen and (min-width: 700px) { .sidebar-container { display: grid; grid-template-columns: 20rem 1fr; } .sidebar-container .author-sidebar { display: flex; } } /* #endregion Layout */ /* Component Styles */ /* #region About */ .about-main { border-radius: var(--border-radius); } .about h2 { font-style: italic; font-weight: var(--fw-md); padding-block-end: calc(var(--spacer) *.5); } /* #endregion About */ /* #region Appearances & News*/ .date { font-weight: var(--fw-lg); font-size: var(--fs-lg); } .time { font-style: italic; } .time::after { content: ' (EST)'; font-size: var(--fs-sm); } .host { font-weight: var(--fw-lg); } .conference { font-weight: var(--fw-lg); letter-spacing: 2px; } .venue { margin-top: .25em } .article-link { font-style: italic; font-weight: var(--fw-lg); } .type-heading { font-size: var(--fs-sm); font-weight: var(--fw-lg); color: var(--blue-600); text-transform: uppercase; letter-spacing: 1px; } .info-item { margin-block-end: var(--spacer); } .info-item a { text-decoration: underline; } .info-item a:hover, .info-item a:focus { color: var(--blue-500); } .appearance-link { font-style: oblique; } /* #endregion Appearances */ /* #region Author sidebar */ .author-sidebar { display: none; flex-direction: column; align-items: center; margin-inline-end: var(--spacer); color: var(--clr-neutral-100); background: var(--blue-500); border-radius: var(--border-radius); } .author-avatar { border-radius: 100vmax; } .author-copy { font-size: var(--fs-xlg); font-weight: var(--fw-md); text-transform: uppercase; text-align: center; padding: var(--spacer) 0; } .author-copy span { display: block; opacity: .75; } .author-copy .author { font-weight: var(--fw-lg); opacity: 1; } .author-sidebar .featured-book-link { text-decoration: underline; } .author-sidebar .featured-book-link:hover, .author-sidebar .featured-book-link:focus { color: var(--accent); } /* #endregion Author sidebar */ /* #region Book */ .book { border-radius: var(--border-radius); padding: var(--spacer); } .book.container { margin-top: var(--spacer); margin-bottom: var(--spacer); } @media screen and (min-width: 768px) { .book .book-image-container { float: left; margin-right: var(--spacer); } } .book-excerpt a { font-style: italic; text-decoration: underline; } .book-excerpt span { display: block; text-transform: uppercase; } .book-info h1, .book-info h2 { font-weight: var(--fw-lg); font-size: var(--fs-xlg); /* padding-top: var(--spacer); */ } .book-link { text-decoration: underline; } .book-link:hover, .book-link:focus { color: var(--blue-600); } .book-genre, .book-publishing-info { font-weight: var(--fw-md); } .book-genre span, .book-publishing-info span { font-weight: var(--fw-sm); font-style: italic; } .sales-links p { display: inline-block; font-size: var(--fs-sm); border-bottom: 1px dashed var(--clr-neutral-500); } .sales-links-container { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; font-weight: var(--fw-md); } .sales-link:hover, .sales-link:focus { font-style: italic; color: var(--blue-600); } .sales-link-seperator { margin: 0 var(--spacer); } .sales-link-seperator:last-child { display: none; } .book-blurb { font-style: italic; font-weight: var(--fw-md); margin-bottom: var(--spacer); border-radius: var(--border-radius); padding-inline: var(--spacer); } .book-blurb:last-child { margin-bottom: 0; } .book-blurb figcaption { display: flex; justify-content: flex-end; padding-block-start: var(--spacer-xs); padding-inline-start: var(--spacer); font-style: initial; font-weight: initial; } /* #region book-image */ .book-image-container { --book-width: 200px; --book-height: 300px; display: flex; justify-content: center; perspective: 600px; padding: calc(var(--book-height) * .10) calc(var(--book-height) * .05); } @keyframes initAnimation { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(-30deg); transform: rotateY(-30deg); } } .book-image { --shadow-color: rgb(0 0 0 /0.5); position: relative; width: var(--book-width); height: var(--book-height); -webkit-transition: var(--duration-lg) ease; transition: var(--duration-lg) ease; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-30deg); transform: rotateY(-30deg); -webkit-animation: var(--duration-lg) ease 0s 1 initAnimation; animation: var(--duration-lg) ease 0s 1 initAnimation; } .book-image:hover, .book-image-link:focus .book-image { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .book-image > :first-child { position: absolute; top: 0; left: 0; width: var(--book-width); height: var(--book-height); -webkit-box-shadow: 5px 5px 20px var(--shadow-color); box-shadow: 5px 5px 20px var(--shadow-color); border-radius: 0 2px 2px 0; background-color: black; -webkit-transform: translateZ(calc(var(--book-width) / 8)); transform: translateZ(calc(var(--book-width) / 8)); } .book-image::before { position: absolute; content: ' '; left: 0; top: calc(var(--book-height) / 100); width: calc(var(--book-width) / 4); height: calc(var(--book-height) - var(--book-height) * .02); background: linear-gradient(90deg, #fff 0%, #aaa 5%, #fff 10%, #aaa 15%, #fff 20%, #aaa 25%, #fff 30%, #aaa 35%, #fff 40%, #aaa 45%, #fff 50%, #aaa 55%, #fff 60%, #aaa 65%, #fff 70%, #aaa 75%, #fff 80%, #aaa 85%, #fff 90%, #aaa 95%, #fff 100%); transform: translateX(calc(var(--book-width) * .85)) rotateY(90deg); } .book-image::after { position: absolute; top: 0; left: 0; content: ' '; width: var(--book-width); height: var(--book-height); -webkit-box-shadow: -10px 0 50px 10px var(--shadow-color); box-shadow: -10px 0 50px 10px var(--shadow-color); background-color: #1d2129; border-radius: 0 2px 2px 0; -webkit-transform: translateZ(calc(var(--book-width) / 8 * -1)); transform: translateZ(calc(var(--book-width) / 8 * -1)); } /* #endregion book-image */ /* #endregion Book */ /* #region Contact */ .contact-form label { padding-top: var(--spacer); } .contact-form > * { width: 100%; max-width: 100%; } /* #endregion Contact */ /* #region Footer */ .site-footer { display: flex; align-items: center; flex-wrap: wrap-reverse; justify-content: space-between; padding: var(--padding-box); color: var(--clr-neutral-500); } .design-credit { font-size: var(--fs-sm); } .dev-link:hover, .dev-link:focus { color: var(--blue-500); } .footer-credits { margin-inline-end: var(--spacer); } .social-links { display: flex; gap: var(--spacer); } .social-link .icon { --icon-size: 2rem; width: var(--icon-size); height: var(--icon-size); transition: all var(--duration-sm) ease; } .social-link .icon:hover, .social-link:focus img { transform: scale(1.25); } /* #endregion Footer */ /* #region Hero */ .hero { position: relative; padding: 2em 0; background-image: url("../images/not_by_blood-bg-md.jpg"); background-position: center; } @media screen and (min-width: 768px) { .hero { padding: 4em 0; background-image: url("../images/not_by_blood-bg.jpg"); } } .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--clr-neutral-900), rgb(0 0 18 /.5), var(--clr-neutral-900)); } .hero-inner { display: flex; flex-wrap: wrap; justify-content: center; animation: var(--soft-in); } @media screen and (min-width: 768px) { .hero .book-image-container { --book-width: 300px; --book-height: 450px; } } .hero .cta-container { position: relative; display: flex; flex: 0 0 50%; flex-direction: column; align-items: center; justify-content: center; } .hero .cta-heading { display: none; color: var(--accent); font-size: 5em; font-weight: 900; letter-spacing: -2px; line-height: 1; text-align: center; text-shadow: var(--text-shadow-lg); animation: fade-in 1s ease forwards; } @media screen and (min-width: 625px) { .hero .cta-heading { display: block; } } .cta-button { margin-block-start: 2em; } /* #endregion Hero */ /* #region Navbar */ .site-header { position: fixed; top: 0px; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; background: var(--clr-neutral-900); padding: var(--padding-box); } .logo { padding-right: var(--spacer); color: var(--blue-500); font-size: var(--fs-xlg); font-weight: var(--fw-lg); letter-spacing: -1px; } .nav { display: flex; align-items: center; flex-wrap: wrap; } .nav .hide-for-small { display: none; } @media screen and (min-width:600px) { .nav .hide-for-small { display: initial; } } .nav ul { display: flex; flex-wrap: wrap; gap: var(--spacer); align-items: center; } .link { padding: .25rem } .nav ul li { border-bottom: 3px solid transparent; transition: all .15s ease-in-out; } .nav ul li.active { border-bottom: 3px solid var(--blue-500); } .nav ul li:hover, .nav ul li a:focus { color: var(--blue-500); } /* Collapse nav bar on scroll down */ .nav-collapse { animation: collapse var(--duration-lg) ease forwards; } @keyframes collapse { from { top: 0; opacity: 1; } to { top: -100%; opacity: 0; } } /* Open nav bar on scroll up */ .nav-open { animation: expand 0.5s ease forwards; } @keyframes expand { from { top: -100%; opacity: 0; } to { top: 0; opacity: 1; } } /* #endregion Navbar */ /* #region Newslettter */ .newsletter-container { display: flex; justify-content: center; } .newsletter-form { width: 100%; } .newsletter-form .input-group { display: flex; flex-wrap: wrap; gap: var(--spacer); } .newsletter-form input { flex: 1 1 auto; } .newsletter-form-label { line-height: 2; } .newsletter-button { flex: 1 0 auto; } /* #endregion Newlettter */ /* #region Profile header */ .profile { background: var(--blue-500); border-radius: var(--border-radius); } .profile-image { --side: 8rem; display: block; float: left; width: var(--side); height: var(--side); margin-inline-end: calc(var(--spacer)*2); border-radius: 100vmax; shape-outside: circle(50%); } .profile-image:hover { box-shadow: var(--box-shadow); } /* #endregion Profile header */ /* #end Component Styles */ /* #region Utility Styles */ .btn { position: relative; padding: var(--padding-box); color: var(--clr-neutral-100); text-align: center; text-shadow: var(--text-shadow-sm); background: var(--blue-500); border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: all .15s ease-in-out; } .btn::before { position: absolute; inset: 0; content: ""; background: var(--shadowed-gradient); } .btn:hover { cursor: pointer; } .btn:hover, .btn:focus { text-shadow: var(--text-shadow-md); background: var(--blue-600); box-shadow: none; } .clearfix:after { clear: both; display: block; visibility: hidden; content: " "; height: 0; font-size: 0; } .container { max-width: 70ch; margin-inline: auto; } .container-blue-600 { color: var(--clr-neutral-100); padding: var(--spacer); background: var(--blue-600); border-radius: var(--border-radius); margin-bottom: var(--spacer); text-shadow: var(--text-shadow-sm); } .hidden { visibility: hidden; height: 0; } .padded { padding: var(--spacer); } .paper { color: var(--clr-neutral-900); background: url(/static/images/paper.jpg); } .soft-in { animation: var(--soft-in); } .text-box { padding: 0 var(--spacer); white-space: pre-line; } .text-heading-lg { font-size: var(--fs-xlg); font-weight: var(--fw-lg); } .text-tight-spacing { line-height: 1.25; } .text-uppercase { text-transform: uppercase; } /* #endregion Utility styles */ /* #region Animations */ @keyframes fade-in { 0% { opacity: 0; -webkit-transform: scale3d(.75, .75, .75); transform: scale3d(.75, .75, .75); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes soft-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* #endregion Animations */