/* =========================================================
ULRICH RATHGEBER – BOOK PAGE
Visual language based on the Ulrich Rathgeber flyer
========================================================= */
/* ---------------------------------------------------------
FLYER-STYLE HEADLINE FONT
--------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap');
/* =========================================================
COMPLETE BOOK AREA
One continuous full-width colour atmosphere
========================================================= */
.author-books {
position: relative;
z-index: 0;
width: 100%;
background: #f5f2e8;
}
/* ---------------------------------------------------------
FULL-WIDTH CONTINUOUS COLOUR CLOUD
--------------------------------------------------------- */
.author-books::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 100vw;
transform: translateX(-50%);
z-index: -1;
pointer-events: none;
background:
/*
----------------------------------------------------
SKY BLUE
Upper left
----------------------------------------------------
*/
radial-gradient(
ellipse 68% 25% at 8% 7%,
rgba(201,222,243,0.98) 0%,
rgba(201,222,243,0.82) 30%,
rgba(201,222,243,0.48) 55%,
rgba(201,222,243,0.16) 72%,
transparent 88%
),
/*
----------------------------------------------------
LAVENDER
Upper right
----------------------------------------------------
*/
radial-gradient(
ellipse 68% 28% at 92% 18%,
rgba(201,181,237,0.92) 0%,
rgba(201,181,237,0.68) 30%,
rgba(201,181,237,0.34) 55%,
rgba(201,181,237,0.12) 72%,
transparent 90%
),
/*
----------------------------------------------------
SOFT PINK
Upper / middle
----------------------------------------------------
*/
radial-gradient(
ellipse 70% 25% at 50% 27%,
rgba(243,183,207,0.60) 0%,
rgba(243,183,207,0.40) 32%,
rgba(243,183,207,0.20) 58%,
rgba(243,183,207,0.06) 76%,
transparent 90%
),
/*
----------------------------------------------------
LAVENDER / PINK BRIDGE
Middle
----------------------------------------------------
*/
radial-gradient(
ellipse 75% 27% at 68% 47%,
rgba(201,181,237,0.48) 0%,
rgba(201,181,237,0.30) 35%,
rgba(243,183,207,0.18) 60%,
transparent 88%
),
/*
----------------------------------------------------
PEACH
Lower left
----------------------------------------------------
*/
radial-gradient(
ellipse 72% 30% at 12% 68%,
rgba(244,200,159,0.94) 0%,
rgba(244,200,159,0.68) 30%,
rgba(244,200,159,0.36) 55%,
rgba(244,200,159,0.12) 75%,
transparent 92%
),
/*
----------------------------------------------------
PINK
Lower right
----------------------------------------------------
*/
radial-gradient(
ellipse 70% 30% at 88% 82%,
rgba(243,183,207,0.90) 0%,
rgba(243,183,207,0.62) 32%,
rgba(243,183,207,0.30) 56%,
rgba(243,183,207,0.10) 76%,
transparent 92%
),
/*
----------------------------------------------------
BLUE / LAVENDER LOWER BRIDGE
----------------------------------------------------
*/
radial-gradient(
ellipse 65% 25% at 48% 92%,
rgba(201,222,243,0.38) 0%,
rgba(201,222,243,0.22) 35%,
rgba(201,181,237,0.14) 58%,
transparent 88%
),
/*
----------------------------------------------------
GENERAL WARM BASE
----------------------------------------------------
*/
#f5f2e8;
}
/* =========================================================
INDIVIDUAL BOOK SECTION
Transparent – background comes from .author-books
========================================================= */
.book-author {
position: relative;
z-index: 1;
width: 100%;
max-width: none;
margin: 0;
padding: 115px 20px 125px;
box-sizing: border-box;
color: #000000;
background: transparent !important;
overflow: visible;
}
/* ---------------------------------------------------------
No individual book background
--------------------------------------------------------- */
.book-author::before {
display: none;
}
/* =========================================================
HEADINGS – FLYER STYLE
========================================================= */
.book-author h1,
.book-author h2,
.book-author h3,
.book-author h4,
.book-author h5,
.book-author h6 {
font-family: 'Josefin Sans', sans-serif !important;
font-weight: 300 !important;
color: #000000 !important;
}
/* =========================================================
MAIN BOOK TITLE
========================================================= */
.book-author .book-info h2 {
font-size: 3rem;
line-height: 1.15;
letter-spacing: 0.035em;
margin-top: 0;
margin-bottom: 30px;
}
/* =========================================================
EDITION HEADINGS
========================================================= */
.book-author .book-editions h3 {
font-size: 1.8rem;
line-height: 1.2;
letter-spacing: 0.035em;
margin-bottom: 35px;
}
/* =========================================================
ALL BOOK TEXT BLACK
========================================================= */
.book-author,
.book-author p,
.book-author div,
.book-author span,
.book-author li,
.book-author a,
.book-author .book-info,
.book-author .book-details,
.book-author .edition-name,
.book-author .edition-isbn {
color: #000000;
}
/* =========================================================
CONTENT WIDTH
========================================================= */
.book-author .book-intro,
.book-author .book-editions {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* =========================================================
BOOK INTRO
========================================================= */
.book-author .book-intro {
display: grid !important;
grid-template-columns:
320px
minmax(0, 1fr) !important;
gap: 80px !important;
align-items: start !important;
}
/* =========================================================
MAIN COVER
========================================================= */
.book-author .book-cover {
width: 100% !important;
}
.book-author .book-cover img {
display: block;
width: 100%;
height: auto;
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.18);
}
/* =========================================================
BOOK TEXT
========================================================= */
.book-author .book-info {
width: auto !important;
}
.book-author .book-info p {
margin-bottom: 22px;
line-height: 1.8;
color: #000000 !important;
}
/* =========================================================
BOOK DETAILS
========================================================= */
.book-details {
margin-top: 30px;
line-height: 1.8;
}
.book-details div {
margin-bottom: 6px;
}
/* =========================================================
ALTERNATING COVER / TEXT
========================================================= */
.book-author.book-reverse .book-intro {
grid-template-columns:
minmax(0, 1fr)
320px !important;
}
.book-author.book-reverse .book-cover {
grid-column: 2;
grid-row: 1;
}
.book-author.book-reverse .book-info {
grid-column: 1;
grid-row: 1;
}
/* =========================================================
EDITIONS
========================================================= */
.book-author .book-editions {
margin-top: 90px;
}
.book-author .edition-row {
display: grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr)) !important;
gap: 40px !important;
}
.book-author .edition {
display: block !important;
width: auto !important;
text-align: center;
}
/* =========================================================
EDITION COVER
========================================================= */
.book-author .edition img {
display: block;
width: 160px;
max-width: 100%;
height: auto;
margin: 0 auto 18px;
box-shadow:
0 7px 19px rgba(0, 0, 0, 0.15);
}
/* =========================================================
EDITION NAME
========================================================= */
.book-author .edition-name {
font-weight: 600;
margin-bottom: 6px;
}
/* =========================================================
ISBN
========================================================= */
.book-author .edition-isbn {
font-size: 0.9em;
opacity: 1;
}
/* =========================================================
ENGLISH EDITIONS
========================================================= */
.book-author .book-editions-english {
margin-top: 70px;
}
/* =========================================================
REMOVE HARD BOOK SEPARATOR
========================================================= */
.book-author + .book-author {
border-top: none !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.book-author {
padding: 75px 20px 85px;
}
.book-author .book-intro,
.book-author.book-reverse .book-intro {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
.book-author .book-cover,
.book-author.book-reverse .book-cover {
grid-column: 1;
grid-row: auto;
max-width: 280px;
margin: 0 auto;
}
.book-author .book-info,
.book-author.book-reverse .book-info {
grid-column: 1;
grid-row: auto;
}
.book-author .book-info h2 {
font-size: 2.4rem;
}
.book-author .edition-row {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap: 40px 25px !important;
}
}
/* =========================================================
SMALL PHONES
========================================================= */
@media (max-width: 480px) {
.book-author .book-info h2 {
font-size: 2.1rem;
}
.book-author .edition-row {
grid-template-columns: 1fr !important;
}
}