/*
Theme Name: Z-Designstudio
Theme URI: http://stuntarts.com
Author: Stuntarts GmbH
Author URI: http://stuntarts.com
Description: Z-Designstudio, merged standalone build. Nebula 1.1.5 (parent) and the former zumbuehl child theme 1.1.0 combined into one theme folder called z-design, so the theme no longer needs its parent theme directory to exist.
Version: 2.1.21
License: The License with which you bought this theme from ThemeForest
License URI: http://themeforest.net/wiki/support/legal-terms/licensing-terms/
Tags: white, light, three-columns, right-sidebar, left-sidebar, responsive-layout, custom-menu, editor-style, featured-images, full-width-template, post-formats, sticky-post, theme-options, translation-ready
Text Domain: nebula
*/
@import "assets/css/fonts.css";
@import "assets/css/font-icon.css";
/* ==========================================================================
HTML / Body
========================================================================== */
html {
height: 100%;
}
body {
min-height: 100%;
overflow-y: none;
}
a {
outline: 0;
}
/* ==========================================================================
Fonts
========================================================================== */
body, input, textarea, select, h1, h2, h3, h4, h5, h6, .post-title, .widget-title {
font-family: 'Gerbera-Bold', 'Open Sans', Arial, sans-serif !important;
font-weight: normal;
}
.industrial-design body, .industrial-design p, .industrial-design input, .industrial-design textarea, .industrial-design select, .industrial-design h1, .industrial-design h2, .industrial-design h3, .industrial-design h4, .industrial-design h5, .industrial-design h6, .industrial-design .post-title, .industrial-design .widget-title, .left-navigation, .left-language-switch, .industrial-design .footer-description, .industrial-design .atp-filter-label, .industrial-design .atp-filter-opener, .industrial-design .atp-project-details {
font-family: 'Gerbera-Light', 'Open Sans', Arial, sans-serif !important;
font-weight: normal;
}
.content-container p, .page-content p{
font-size: 23px;
line-height: 1.5em;
letter-spacing: 0.02em;
}
.section-title span, .menu a, h1, h2, h3, h4, h5, h6, .single .post-title, .post-title {
font-size: 33px;
font-weight: normal;
}
.single .post-title, .post-title {
line-height: 1.4em;
}
.section-title span, .menu a {
letter-spacing: 0.02em;
}
h1, h2, h3, h4, h5, h6, .post-title, .widget-title {
letter-spacing: -0.01px;
margin-bottom: 28px;
}
.language-switch, .footer-description, .atp-filter-opener:after, .atp-filter-label, .atp-project-details-container a, .sidebar-right p {
font-size: 14px !important;
font-weight: normal !important;
letter-spacing: 0.05em !important;
}
.sidebar-right p {
line-height: 1.4em;
}
/* ==========================================================================
Home
========================================================================== */
body.landingpage {
overflow: none !important;
max-height: 100vh;
}
.landingpage #main-container {
padding-top: 0px !important;
position: fixed;
top: 0px;
left: 0px;
height: 100vh;
}
.landingpage #main-container, .landingpage .main-container-wrapper, .landingpage #content, .landingpage .content-home {
min-height: 100%;
max-height: 100%;
height: 100%;
display: block;
}
.landingpage #content {
background-size: cover;
background-position: center center;
background-color: #f7f7f7;
background-repeat: no-repeat;
}
body.landingpage #content {
padding-left: 0px !important;
padding-right: 0px !important;
}
.content-landing {
width: 50%;
height: 100%;
display: block;
float: left;
}
.content-landing:hover {
background-color: #FFF;
opacity: 0.15;
}
a.content-landing {
transition: none;
-webkit-transition: none;
}
/* ==========================================================================
Header
========================================================================== */
#header {
position: inherit !important;
background: none !important;
top: 0px !important;
height: 0px;
}
.header-wrapper {
text-align: center;
position: relative;
z-index: 9999;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 210px;
}
.header-small .header-wrapper, .header-minimal .header-wrapper {
min-height: 0px;
}
/* ==========================================================================
Logo
========================================================================== */
.logo-wrapper {
margin-left: auto !important;
margin-right: auto !important;
margin-top: 75px;
position: fixed;
display: inline-block;
}
.logo-wrapper, .image-logo-dark {
width: 80px !important;
height: 144px !important;
}
.image-logo-dark {
background-size: 100% 100%;
}
.logo {
position: fixed;
z-index: 999;
display: block;
margin-left: -80px;
}
.logo img {
width: 100%;
height: 100%;
}
/* ==========================================================================
Left or Right
========================================================================== */
.interior-design .main-navigation.left-navigation, .interior-design .left-language-switch {
display: none;
}
.industrial-design .main-navigation.right-navigation, .industrial-design .right-language-switch {
display: none;
}
.interior-design .page-title, .interior-design #main-container, .interior-design .page-content, .interior-design .post-title {
text-align: right;
}
.industrial-design .content-container {
float: right;
}
.industrial-design .sidebar {
float: left;
padding-right: 5.3%;
padding-left: 0px;
}
.industrial-design .page-title, .industrial-design #main-container, .industrial-design .page-content, .industrial-design #main-container, .industrial-design #main-container .post-title, .sidebar-right .post-title {
text-align: left;
}
/* ==========================================================================
Update 2020
========================================================================== */
.language-switch {
display: none;
}
@media screen and (max-width: 720px) {
.industrial-design .logo-wrapper,
.industrial-design .image-logo-dark,
.interior-design .logo-wrapper,
.interior-design .image-logo-dark {
width: 32px !important;
height: 55px !important;
}
.industrial-design .logo-wrapper,
.interior-design .logo-wrapper {
margin-top: 25px;
position: absolute;
}
.industrial-design .logo,
.interior-design .logo {
margin-left: 0px;
}
.industrial-design .logo-wrapper {
right: 0px !important;
}
.interior-design .logo-wrapper {
left: 0px !important;
}
}
/* ==========================================================================
Navigation
========================================================================== */
.main-navigation {
top: 25px;
position: fixed;
}
.main-navigation.left-navigation{
left: 18px;
float: none;
text-align: left;
}
.main-navigation.right-navigation{
right: 18px;
float: none;
text-align: right;
}
.main-navigation.left-navigation .menu-icon {
float: left;
}
.section-title {
padding-bottom: 20px;
}
.section-title span {
float: none;
display: block;
margin-bottom: 10px;
}
.section-title span, .menu a {
margin-right: 0px;
text-shadow: none;
padding: 0 5px 0 5px;
text-transform: uppercase;
}
.main-navigation a {
text-decoration: none;
}
.menu li {
list-style: none;
padding-bottom: 7px;
}
.menu ul {
margin-left: 0px;
}
/* ==========================================================================
Menu Hidden
========================================================================== */
.main-navigation .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
overflow: hidden;
}
/* ==========================================================================
Navigation Menu Icon
========================================================================== */
.main-navigation .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 20px 20px;
position: relative;
user-select: none;
margin-bottom: 10px;
margin-right: -12px;
}
.main-navigation.left-navigation .menu-icon {
margin-left: -12px;
}
.main-navigation .menu-icon .navicon {
background: #000;
display: block;
height: 4px;
position: relative;
transition: background .2s ease-out;
width: 30px;
}
.main-navigation.left-navigation .menu-icon .navicon {
height: 3px;
}
.main-navigation .menu-icon .navicon:before,
.main-navigation .menu-icon .navicon:after {
background: #000;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.main-navigation .menu-icon .navicon:before {
top: 10px;
}
.main-navigation .menu-icon .navicon:after {
top: -10px;
}
/* ==========================================================================
Navigation Menu Icon Animation for closing
========================================================================== */
.main-navigation .menu-btn {
display: none;
}
.main-navigation .menu-btn:checked ~ .menu {
max-height: 500px;
padding-bottom: 20px;
}
.main-navigation .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.main-navigation .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.main-navigation .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.main-navigation.left-navigation .menu-btn:checked ~ .menu-icon .navicon:before {
width: 34px;
transform: rotate(-43deg);
}
.main-navigation.left-navigation .menu-btn:checked ~ .menu-icon .navicon:after {
width: 34px;
transform: rotate(43deg);
}
.main-navigation .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.main-navigation .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* ==========================================================================
Language Switcher
========================================================================== */
.industrial .right-navigation, .industrial .right-language-switch{
display: none;
}
.interior .left-navigation, .interior .left-language-switch {
display: none;
}
/* ==========================================================================
Language Switcher
========================================================================== */
.language-switch {
position: fixed;
bottom: 25px;
z-index: 999;
text-align: right;
font-size: 14px;
}
.left-language-switch {
float: left;
left: 25px;
}
.right-language-switch {
float: right;
right: 25px;
}
.bogo-language-switcher .en-US, .bogo-language-switcher .de-DE {
background: none !important;
}
ul.bogo-language-switcher li {
padding-left: 0px;
float: right;
line-height: 1.2em;
list-style: none;
}
ul.bogo-language-switcher li:first-child {
margin-left: 7px;
}
/*
* The current language and its hover state.
*
* This used `border-bottom`, which is painted across the element box - including its padding - so the rule ran wider
* than the two letters it belongs to. `text-decoration` hugs the glyphs, which is what the operator asked for
* ("underline width need to fit font width", 2026-11-03). A decoration set on the `li` still paints across the anchor
* inside it, so the current language keeps its marker.
*/
ul.bogo-language-switcher li.current,
ul.bogo-language-switcher li a:hover,
ul.bogo-language-switcher li a:focus-visible {
text-decoration: underline;
text-decoration-thickness: max(1px, 0.09em);
text-underline-offset: var(--zd-menu-underline-offset);
}
.left-language-switch ul.bogo-language-switcher li.current,
.left-language-switch ul.bogo-language-switcher li a:hover,
.left-language-switch ul.bogo-language-switcher li a:focus-visible {
text-decoration-thickness: max(1px, 0.04em);
}
ul.bogo-language-switcher li a {
text-decoration: none;
}
/* ==========================================================================
Portfolio
========================================================================== */
.three-fourths .atp-project-thumb {
max-height: 502px;
overflow: hidden;
}
.atp-load-more-wrapper {
display: none;
}
@media screen and (max-width: 1280px) and (min-width: 706px) {
.atp-projects-wrapper {
margin-top: 60px;
}
}
/* ==========================================================================
Portfolio Awards
========================================================================== */
li.atp-project.awards {
}
.atp-projects {
padding-top: 25px; /* to show awards labels on top*/
}
li.atp-project.awards:before {
width: 150px;
height: 40px;
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: 0.4em;
font-size: 20px;
text-align: center;
padding-top: 11px;
padding-left: 3px;
content: 'award';
position: absolute;
right: 25px;
top: -25px;
z-index: 999;
overflow: visible;
background: url('assets/img/awards_label_bg.png') no-repeat left top;
background-size: 100% 100%;
}
img.attachment-award-image-thumbnail {
width: 180px;
height: auto;
/*grayscale for background image*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
/* ==========================================================================
Article surface and real images
========================================================================== */
/*
* Portfolio articles sit on a light grey surface.
*
* Only `body` paints on this template: measured 2026-11-03, `#main-container`, `#content`, the article and every
* wrapper report a transparent background, so the grey has to go on the body. `#f7f7f7` is already in the theme's
* palette, not a new value.
*/
body.single-atp_project {
background-color: #f7f7f7;
}
/*
* The header slider is a real image now.
*
* It used to be `background-image` on an empty div, so a slide carried no alt text and no width/height. The template
* prints `![]()
`, and `object-fit: cover` reproduces
* `background-size: cover` exactly.
*
* `display` is deliberately NOT set on `.slide-img-bg` itself: that single class lost the desktop/mobile switch, because
* `.slide-mobile { display: none }` above is also one class and this file comes later. Both images then rendered, one
* under the other, and the slider stood 1400 px tall inside a 700 px header (measured live 2026-11-03). The switch is
* restated below with the two-class pair, which outranks either single class.
*/
.slide-img-bg {
object-fit: cover;
object-position: center center;
background-image: none;
}
@media screen and (min-width: 480px) {
.slide-img-bg.slide-desktop {
display: block;
}
.slide-img-bg.slide-mobile {
display: none;
}
}
@media screen and (max-width: 479px) {
.slide-img-bg.slide-desktop {
display: none;
}
.slide-img-bg.slide-mobile {
display: block;
}
}
/*
* Logo walls (clients, awards): the logo is a real image inside the box that used to hold the background.
*
* `object-fit: contain` reproduces `background-size: contain`; the div keeps its height, padding and the grayscale
* filter, which now applies to the image inside it.
*/
.logo-block-bg > .logo-block-img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
}
/* ==========================================================================
Portfolio Filter
========================================================================== */
.atp-filter-wrapper {
position: relative;
top: -5px !important;
max-width: 100%;
padding-bottom: 20px;
padding-top: 0px;
text-align: center;
z-index: 100;
}
ul.atp-filters {
display: inline-block;
max-width: 100%;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
.atp-filter-opener {
position: relative !important;
display: inline-block;
padding: 0px 0px;
z-index: 99 !important;
top: 20px !important;
text-align: center;
width: 100%;
}
.atp-fallback-filters {
display: none;
}
.atp-filter-opener:after {
content: 'Projektfilter';
margin-left: 10px;
z-index: 999;
}
#atp-filter-openee {
width: 100%;
}
#atp-filter-openee:checked ~ .atp-filter-opener {
background: none;
//width: 0px;
//height: 0px;
}
#atp-filter-openee:checked ~ .atp-filter-opener:after {
content: '';
}
#atp-filter-openee:checked ~ .site-control {
width: 50px !important;
height: 50px !important;
background: blue !important;
display: inline-block;
}
#atp-filter-openee:checked ~ .atp-projects-wrapper, #atp-filter-openee:checked ~ .atp-filter-wrapper, #atp-filter-openee:checked ~ .atp-filter-opener,
.atp-projects-wrapper, .atp-filter-wrapper, .atp-filter-opener, .atp-filters {
-webkit-transition: none;
transform: none;
}
.atp-filter-opener-icon {
background: url('assets/img/filter_icon_open.png') no-repeat center center;
background-size: 100% 100%;
height: 12px;
width: 14px;
margin-left: -70px;
}
.atp-filters li:first-of-type {
padding-left: 20px;
}
#atp-filter-openee:checked ~ .atp-filter-opener .atp-filter-opener-icon {
/*background: url('assets/img/filter_icon_close.png') no-repeat center center;
background-size: 14px 14px;
height: 20px;
width: 14px;
left: 50%;
top: 0px;
margin-top: 8px;
margin-left: -330px;*/
display: none;
}
.industrial-design #atp-filter-openee:checked ~ .atp-filter-opener .atp-filter-opener-icon {
//margin-left: -210px;
}
#atp-filter-openee:checked ~ .atp-filter-wrapper .atp-filters {
//padding-left: 30px;
}
~ .atp-filter-opener-icon {
display: none;
}
.atp-filter-opener .bar {
display: none;
}
#atp-filter-openee:checked ~ .atp-projects-wrapper {
position: relative;
}
.atp-projects {
margin-top: 35px;
}
.atp-filters li {
text-transform: none;
margin: 0 8px !important;
}
.atp-filters li a {
color: #000 !important;
line-height: 1.3em;
}
/*
* Filter hover used `border-bottom`, drawn across the box and therefore wider than the word by its padding.
* `text-decoration` hugs the glyphs - the operator's "underline width need to fit font width", 2026-11-03.
*/
.atp-filters li a:hover,
.atp-filters li a:focus-visible {
text-decoration: underline;
text-decoration-thickness: max(1px, 0.09em);
text-underline-offset: var(--zd-menu-underline-offset);
}
.industrial-design .atp-filters li a:hover,
.industrial-design .atp-filters li a:focus-visible {
text-decoration-thickness: max(1px, 0.04em);
}
/* ==========================================================================
Portfolio Single Post
========================================================================== */
.sidebar-right h1 {
line-height: 1.2em;
}
.sidebar-right p {
margin-bottom: 20px;
}
.content-left {
background: none;
}
.content-left, .content-right {
width: 60%;
}
.sidebar-right, .sidebar-left {
width: 40%;
}
@media screen and (max-width: 1100px) {
.content-left, .content-right {
float: none;
width: 100%;
}
.sidebar-right {
width: 100%;
padding-left: 0px;
}
}
@media screen and (max-width: 840px) {
.sidebar-left, .sidebar-right {
margin-top: 0px;
}
}
/* ==========================================================================
Slider
========================================================================== */
#header-image-wrapper {
height: auto !important;
min-height: 300px;
max-height: 80% !important;
}
.dynamic-image-slider .header-image {
background: none;
}
.slide-img-bg {
min-height: 80%;
background-size: cover;
height: 700px;
width: 100%;
min-width: 100% !important;
background-position: center center;
background-repeat: no-repeat;
}
.slick-slider {
margin-bottom: 0px !important;
}
.scroll-down-indicator {
display: none;
}
.slick-slider img {
min-width: 100%;
max-width: 100%;
}
ul.slick-dots {
margin-bottom: 0px;
}
.slick-dots li {
width: 10px !important;
}
.slick-dots {
bottom: 25px !important;
}
.slick-prev:before, .slick-next:before {
color: #000 !important;
}
.slick-prev, .slick-next {
z-index: 999;
}
.slick-prev {
left: 0px !important;
}
.slick-next {
right: 25px !important;
}
button.slick-prev, button.slick-next {
height: 100%;
}
button.slick-prev {
padding-left: 25px;
padding-right: 50px;
}
button.slick-next {
padding-left: 50px;
padding-right: 25px;
}
.slick-prev:before, .slick-next:before {
font-family: zdesignstudio !important;
font-size: 50px !important;
opacity: 1 !important;
}
.slick-prev:before {
content: '\e900' !important;
}
.slick-next:before {
content: '\e901' !important;
}
.slick-dots li button:before {
font-family: zdesignstudio !important;
font-size: 10px !important;
line-height: 20px;
opacity: 1 !important;
}
.slick-dots li button:before {
content: '\e902' !important;
}
.slick-dots li.slick-active button:before {
content: '\e903' !important;
}
.industrial-design .slick-prev:before {
content: '\e904' !important;
}
.industrial-design .slick-next:before {
content: '\e905' !important;
}
.industrial-design .slick-dots li button:before {
content: '\e906' !important;
}
.industrial-design .slick-dots li.slick-active button:before {
content: '\e907' !important;
}
@media screen and (max-width: 479px) {
#header-image-wrapper, .slide-img-bg {
min-height: 260px;
max-height: 260px;
}
.slide-desktop {
display: none;
}
.slide-mobile {
display: block;
}
}
@media screen and (min-width: 480px) {
.slide-desktop {
display: block;
}
.slide-mobile {
display: none;
}
}
@media screen and (min-width: 480px) and (max-width: 639px) {
#header-image-wrapper, .slide-img-bg {
min-height: 300px;
max-height: 300px;
}
}
@media screen and (min-width: 640px) {
#header-image-wrapper, .slide-img-bg {
min-height: 420px;
max-height: 420px;
}
}
@media screen and (min-width: 720px) {
#header-image-wrapper, .slide-img-bg {
min-height: 560px;
max-height: 560px;
}
.slick-dots{
bottom: 25px !important;
}
}
@media screen and (min-width: 960px) {
#header-image-wrapper, .slide-img-bg {
min-height: 700px;
}
}
@media screen and (min-height: 1280px) and (min-width: 1680px) {
#header-image-wrapper, .slide-img-bg {
min-height: 1080px !important;
max-height: 1080px
}
}
@media screen and (min-height: 960px) and (min-width: 1680px) {
#header-image-wrapper, .slide-img-bg {
min-height: 800px;
}
}
/* ==========================================================================
Content
========================================================================== */
#main-container {
margin-top: 0px !important;
}
#main-container {
padding-top: 300px;
}
.has-header-image #main-container {
padding-top: 50px;
}
.page-template-template-portfolio #main-container{
padding-top: 0px !important;
}
.content-wrapper {
margin-left: auto;
margin-right: auto;
}
body:not(.boxbuilder-content) #content, .footer-widgets-wrapper, .footer-copyright-wrapper, .section-background, .boxbuilder-content .section-full-width.section-rows-normal .atbb-row, .boxbuilder-content .atbb-section.section-normal-width, .footer-pagination-wrapper, .single:not(.boxbuilder-content) #content>.hentry, .comment-list-wrapper, .comments-form, .boxbuilder-content .atbb-section.section-normal-width {
padding-left: 25px;
padding-right: 25px;
}
@media screen and (max-width: 480px) {
#header, .footer-copyright, body:not(.boxbuilder-content):not(.single) #content, .footer-widgets-wrapper, .footer-copyright-wrapper, .section-background, .boxbuilder-content .section-full-width.section-rows-normal .atbb-row, .boxbuilder-content .atbb-section.section-normal-width, .single #content>.hentry, .comment-list-wrapper, .comments-form {
padding-left: 25px;
padding-right: 25px;
}
}
.post-title {
text-align: left;
margin-left: auto;
margin-right: auto;
padding: 0 0;
}
.interior #main-container, .interior #main-container .post-title, .sidebar-right .post-title {
text-align: right;
}
.industrial .content-left {
float: right;
}
body.success {
background-color: #FFF !important;
}
body.success:before {
display: none;
}
.page-header {
margin-bottom: 17px;
}
/* ==========================================================================
Footer
========================================================================== */
.footer-description-wrapper {
position: fixed;
bottom: 0px;
left: 0px;
text-align: center;
height: auto;
width: 100%;
max-width: 100%;
padding-bottom: 25px;
}
.footer-description a {
text-decoration: none !important;
}
/* ==========================================================================
Partner
========================================================================== */
.logo-block {
margin-bottom: 50px;
padding: 25px 25px;
height: 150px;
}
.logo-block-bg {
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
display: block;
height: 100%;
/*grayscale for background image*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.logo-block:hover .logo-block-bg {
/*opacity: 0.7;*/
}
.one-third-column:nth-child(3n) {
margin-right: 0px !important;
}
.page-template-template-clients .page-title{
visibility: hidden;
}
/* ==========================================================================
Motivation
========================================================================== */
.motivation-content h1.post-title, .motivation-content h2.sidebar-title {
font-size: 23px;
}
.motivation-content .content-container {
float: left;
}
.industrial-design .motivation-content .content-container {
float: right;
}
/* ==========================================================================
Responsive
========================================================================== */
@media screen and (max-width: 720px) {
.main-navigation {
position: relative;
}
.main-navigation.left-navigation{
left: -2px;
}
.main-navigation.right-navigation{
right: -2px;
}
#header {
display: block;
position: relative !important;
height: auto;
min-height: auto;
max-height: 500px !important;
}
.menu-btn:checked ~ #header {
height: 700px;
}
.logo-wrapper {
/*display: none;*/
}
button.slick-prev, button.slick-next {
height: auto;
}
.slick-prev:before, .slick-next:before {
display: none;
}
.interior-design .footer-description {
text-align: left;
margin-left: 25px;
}
.industrial-design .footer-description {
text-align: right;
margin-right: 25px;
}
footer {
display: none;
}
.footer-description {
display: none;
}
.language-switch {
bottom: initial;
top: 25px;
position: absolute;
}
.left-language-switch {
left: initial;
right: 25px;
}
.right-language-switch {
right: initial;
left: 25px;
}
#main-container {
padding-top: 0px;
}
.atp-projects {
margin-top: -25px;
}
.landingpage .logo-wrapper {
display: inline-block;
left:50%;
top:50%;
margin:-72px 0 0 -40px;
}
.landingpage .main-navigation.right-navigation {
right: 18px;
}
.landingpage .main-navigation.left-navigation{
left: 18px;
}
.landingpage .main-navigation.right-navigation{
right: 18px;
bottom: 16px !important;
top: initial;
}
.landingpage .menu-icon, .landingpage .language-switch, .landingpage .menu {
display: none;
}
.landingpage .main-navigation {
position: fixed;
}
.landingpage #header {
position: fixed !important;
}
.has-header-image #main-container {
padding-top: 25px;
}
/* Font Sizes */
.section-title span, .menu a, h1, .single .post-title, .post-title {
font-size: 28px;
line-height: 0.8em;
}
.section-title span, .menu a {
letter-spacing: 0.01em;
}
.content-container p, .page-content p, .sidebar-right p{
font-size: 14px;
line-height: 1.5em;
letter-spacing: 0.02em;
margin-bottom: 15px;
}
h1, h2, h3, h4, h5, h6 {
font-size: 18px;
line-height: 1.4em;
letter-spacing: 0px;
margin-bottom: 15px;
}
.single .post-title, .post-title, .sidebar-title {
line-height: 1.0em;
margin-bottom: 15px;
}
.language-switch, .footer-description, .atp-filter-opener:after, .atp-filter-label, .atp-project-details-container a, .sidebar-right p {
font-size: 14px !important;
}
li.atp-project.awards:before {
width: 100px;
height: 28px;
color: #FFFFFF;
letter-spacing: 0.2em;
font-size: 15px;
padding-top: 1px;
right: 15px;
top: -7px;
}
}
@media screen and (max-width: 640px) {
.one-third-column {
width: 48%;
margin-right: 2%;
}
.logo-block {
margin-bottom: 20px;
padding: 10px 10px;
height: 50px;
}
.page-template-template-awards .logo-block {
height: 90px;
margin-bottom: 25px;
}
}
@media screen and (max-width: 944px) and (max-height: 680px) {
.footer-description {
display: none;
}
}
@media screen and (min-width: 945px) and (max-height: 800px) {
.footer-description {
display: none;
}
}
/* ---- override: zumbuehl-2.0.1-links.css ---- */
/* ==========================================================================
Link affordances - menu underline, logo/site-title fade
--------------------------------------------------------------------------
The theme underlines only the language switcher and the portfolio filters;
navigation links had no hover state at all and the logo/site title had none
either. Rules use text-decoration (not border-bottom) so nothing shifts by a
pixel, and they cover :focus-visible so keyboard users get the same cue.
Opacity 0.6, not 0.55: black at 60% over white resolves to #666, ~5.7:1,
which still clears AA. The inherited transition only covers colour, so
opacity is added explicitly; reduced motion turns the fade into a snap.
========================================================================== */
/*
* Menu underline placement.
*
* `--zd-menu-underline-offset` is the one knob: the rule sits this far below the text. Measured with the
* theme's own Gerbera-Bold at the menu's 33px (painted pixels, 4x render):
*
* 0.30em 9.5px gap - what the supplied theme shipped, reads as a separate line
* 0.08em 2.5px gap - still visibly detached
* 0.04em 0.5px gap - attached to the word, no collision <- current
* 0 0px - the rule touches the glyphs
*
* It is a variable rather than a literal so it can be tuned from the browser (or a child stylesheet)
* without rebuilding the theme.
*/
:root {
--zd-menu-underline-offset: 0.04em;
}
/*
* Menu items: underline on hover, on focus and on the current page.
*
* The site's default face is Gerbera-Bold (the theme sets it on `body` at font-weight 400 - the weight
* comes from the font file, not from CSS), so a fixed 1px rule read as a hairline under those heavy
* strokes. Measured from a 4x render with the theme's own font at the menu's 33px:
* 1px -> 1.00px painted, auto -> 3.00px, max(1px, 0.09em) -> 3.00px.
*
* Thickness and offset are repeated in the state block below on purpose: the theme's rule for the
* current item uses the `text-decoration` shorthand, which resets both to their initial values.
*/
.main-navigation li > a {
text-decoration: none;
text-decoration-thickness: max(1px, 0.09em);
text-underline-offset: var(--zd-menu-underline-offset);
}
/*
* The light face needs a finer rule: the industrial subsite (and the portal) carries the theme's
* `industrial-design` body class, which swaps in Gerbera-Light, and the theme renders the left
* navigation in the light face as well. Same measurement approach: ~1.3px at 33px.
*/
.industrial-design .main-navigation li > a,
.industrial-design .main-navigation li > a:hover,
.industrial-design .main-navigation li > a:focus-visible,
.main-navigation.left-navigation li > a,
.main-navigation.left-navigation li > a:hover,
.main-navigation.left-navigation li > a:focus-visible {
text-decoration-thickness: max(1px, 0.04em);
text-underline-offset: var(--zd-menu-underline-offset);
}
/*
* Hover and keyboard focus only.
*
* The current page used to be underlined as well. The operator does not want the menu to mark where you already are
* (2026-11-03: "active page should not be marked"), so the four `current-*` selectors are gone. This block is what
* overrides the base theme's own marking rule, so nothing else applies an underline in the menu.
*/
.main-navigation li > a:hover,
.main-navigation li > a:focus-visible {
text-decoration: underline;
text-decoration-thickness: max(1px, 0.09em);
text-underline-offset: var(--zd-menu-underline-offset);
}
/* Logo and site title - only when they are links. The Z mark is a background
image on a span inside the anchor, so fading the anchor fades the mark too. */
a.logo,
a.section-title {
transition: opacity 0.3s ease, color 0.3s ease;
}
a.logo:hover,
a.logo:focus-visible,
a.section-title:hover,
a.section-title:focus-visible {
opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
a.logo,
a.section-title {
transition: none;
}
}
/* ---- override: zumbuehl-2.0.1-theme.css ---- */
/* ==========================================================================
Theme fixes for 2.0.1 - switcher visibility, Z mark centring
--------------------------------------------------------------------------
Appended by `merge-theme.py` after the child stylesheet, so it wins on order
without touching the backup or the generated code.
1. `.language-switch { display: none }` comes from the client's "Update 2020"
block in the original stylesheet: the switcher is printed and labelled
(the footer script shortens it to D/E) but hidden. The per-site corner
rules stay untouched, so each subsite keeps showing its own corner only
(interior -> right, industrial -> left), and the door stays clean.
2. At <=720px the subsites shrink the mark to 32x55 and push it into a
corner, while the portal centres it. Centring matches the door.
========================================================================== */
/* 1. Switcher: visible again on content pages, still hidden on the door. */
.language-switch {
display: block;
}
.landingpage .language-switch {
display: none;
}
/* 2. #content keeps its 25px gutter without overflowing.
The base sheet has `#content{float:left;width:100%}` and the child sheet adds
`padding-left:25px; padding-right:25px`. Under content-box sizing that produced a 1490px box in a
1440px viewport, so the 1060px column centred 25px right of the screen (measured: content centre 745
against a viewport centre of 720). border-box keeps the gutter and the centring. */
#content {
box-sizing: border-box;
}
/* 3. Z mark: exactly where the portal puts it, on every page of the two design subsites.
Measured on `/`: the mark sits top-centre above 720px (80x144 at y=75, horizontal offset 0) and
screen-centred at or below 720px (80x144, both offsets 0). The subsites already match above 720px; the
difference was mobile, where the theme shrinks the mark to 32x55 while the wrapper stays 80x144, so the
mark sat ~45px above the centre it was supposed to occupy. Sizing the mark with the wrapper fixes it.
Transform instead of margins: the base stylesheet sets `margin-left: auto !important` on the wrapper
and zeroes the mark's own margin below 720px, so offset hacks are overridden anyway. */
@media screen and (max-width: 720px) {
.interior-design .logo-wrapper,
.industrial-design .logo-wrapper {
position: fixed;
left: 50% !important;
right: auto !important;
top: 50%;
margin: -72px 0 0 -40px !important;
transform: none !important;
width: 80px !important;
height: 144px !important;
}
/* The mark has to fill the wrapper, otherwise centring the wrapper centres nothing.
The portal keeps the 80x144 mark at this width as well. */
.interior-design .image-logo,
.interior-design .image-logo-dark,
.interior-design .logo .image-logo-wrapper,
.industrial-design .image-logo,
.industrial-design .image-logo-dark,
.industrial-design .logo .image-logo-wrapper {
width: 80px !important;
height: 144px !important;
}
.interior-design .logo,
.industrial-design .logo {
margin-left: 0 !important;
}
/* Keep the switcher on screen: the base rules move it to `top: 25px; position: absolute`
below 720px, which put it past the bottom edge when the page is long. */
.language-switch {
position: fixed;
top: auto;
bottom: 25px;
z-index: 999;
}
.left-language-switch {
left: 25px;
right: auto;
}
.right-language-switch {
right: 25px;
left: auto;
}
}
/* ---- override: zumbuehl-2.0.2-slider-dots.css ---- */
/*
* Project header slider: keep the pagination dots on screen.
*
* `.slick-dots` is `position:absolute; bottom:25px` inside `.header-slider`, so the dots sit on the lower
* edge of a 700px-tall image and scroll away with it - on a short laptop viewport they are below the fold
* before the visitor ever sees them.
*
* They cannot simply be pinned from where they are: `.header-image` carries a transform (which makes it
* the containing block for `position:fixed`) and `.header-image-wrapper` is `overflow:hidden`. So the
* script (overrides/*.js) moves the dots list to `` and toggles `sc-slider-dots--visible` while the
* slider is on screen. Same nodes, so slick's own click handling and `slick-active` tracking keep working.
*/
.sc-slider-dots {
position: fixed !important;
top: auto !important;
right: 0;
bottom: 25px !important;
left: 0;
width: 100%;
margin: 0 !important;
z-index: 98;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sc-slider-dots.sc-slider-dots--visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Keep the dots above the image but below the fixed site header (z-index 999). */
@media (prefers-reduced-motion: reduce) {
.sc-slider-dots {
transition: none;
}
}
/* ---- override: zumbuehl-2.0.3-portal-bg.css ---- */
/*
* Portal: a different landing image per visit.
*
* Two classes, on two different elements: `.zd-portal-bg-ready` is set on `` by the head script
* once it has chosen, `.zd-portal-random` on `` by the theme's body_class filter. Hence the
* descendant selector - a compound `.a.b` would never match.
*
* The image is an inline `style` attribute on `#content`, so `!important` is required to beat it.
* Gating on `.zd-portal-bg-ready` means a visitor without JavaScript keeps the original image rather
* than losing the background entirely.
*/
.zd-portal-bg-ready .zd-portal-random #content {
background-image: var(--zd-portal-bg, none) !important;
}
/* ---- override: zumbuehl-2.1.0-project-meta.css ---- */
/*
* Project details: label and value on one line.
*
* `single-atp_project.php` prints the label, a hardcoded `
`, then the value - so every project read
*
* Material:
* Diverses
*
* The template ships inside the supplied theme source and stays untouched; hiding the break yields
* "Material: Diverses" (the whitespace around the `
` collapses to one space) without touching markup
* or data. Same for the Company line and for the "Year …" line, whose value is empty on projects without
* a `Umgesetzt von` entry - that trailing break was rendering an empty line.
*
* The description prose itself contains no `
` at all (checked on three projects), so nothing else is
* affected.
*/
.project-meta br {
display: none;
}
/* ---- override: zumbuehl-2.1.3-interior-text.css ---- */
/*
* Interior subsite: text centred, measure reduced to two thirds.
*
* The theme right-aligns body copy (`text-align: right` is inherited from `.page-content`), and the text
* column is a 636px grid column inside the 1060px page. Requested: centred text, on a measure of about
* two thirds of the regular content width, itself centred.
*
* Scoped to `.content-container` - the prose column - so the portfolio grid, the filter row and the
* address sidebar keep their layout.
*/
.interior-design .page-content .content-wrapper:not(:has(.sidebar-right)) .content-container {
float: none;
width: 100%;
max-width: 707px;
margin-left: auto;
margin-right: auto;
}
/* Text alignment is not set here: it comes from the shared setting in
zumbuehl-2.1.4-content-align.css, so interior and industrial cannot disagree. */
/* Below the tablet breakpoint the measure follows the screen instead of a fixed 707px. */
@media screen and (max-width: 720px) {
.interior-design .page-content .content-container {
max-width: 100%;
}
}
/* ---- override: zumbuehl-2.1.3-portal-contact.css ---- */
/*
* Portal: unlock the single-screen lock and style the contact block below it.
*
* The landing template is deliberately one screen high: `body.landingpage` is overflow:hidden and
* `#main-container` is fixed at 100vh, so there was nothing to scroll to and no scroll indicator element
* at all (the 2016 capture behaves the same way - this is a new block, not a lost one).
*
* Releasing the lock: the container goes back into normal flow at the same 100vh, the body scrolls, and
* the contact block printed by `zd_portal_contact_section()` (wp_footer) becomes reachable.
*/
body.landingpage {
overflow-y: auto !important;
}
.landingpage #main-container {
position: relative !important;
top: auto !important;
left: auto !important;
height: 100vh;
}
.zd-portal-contact {
position: relative;
z-index: 3;
background-color: #ffffff;
padding: 90px 25px 110px;
}
/* Two thirds of the site's regular 1060px column, centred - the same measure as the contact page's
text column, so the block reads as the same content rather than a different layout. */
.zd-portal-contact__grid {
display: block;
max-width: 707px;
margin: 0 auto;
text-align: center;
}
.zd-portal-contact__title {
margin: 0 0 40px;
text-align: center;
}
.zd-portal-contact__meta {
margin: 0 0 40px;
text-align: center;
}
.zd-portal-contact__meta p,
.zd-portal-contact__body p {
margin: 0 0 18px;
text-align: center;
}
.zd-portal-contact__body p:last-child,
.zd-portal-contact__meta p:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 720px) {
.zd-portal-contact {
padding: 60px 25px 80px;
}
}
/* ---- override: zumbuehl-2.1.4-content-align.css ---- */
/*
* Content alignment, shared by interior and industrial.
*
* Measured on the live sites: interior inherited `text-align: right` from `.page-content`, industrial uses
* `left`. This makes both follow one setting (Network Admin -> Settings -> Content alignment), with left -
* the industrial behaviour - as the default.
*
* Set on `.page-content` because paragraphs inherit from it, which is how the theme itself does it.
*/
body.interior-design .page-content,
body.industrial-design .page-content {
text-align: left;
}
body.zd-content-align-right .page-content {
text-align: right !important;
}
/* The centred measure from zumbuehl-2.1.3-interior-text.css is a width rule, not an alignment one; text
inside it follows the setting like everywhere else. The contact form and address blocks stay centred
on their own axis only while the setting is left. */
body.interior-design.zd-content-align-right .page-content .content-container {
text-align: right !important;
}
/* ===== zumbuehl-2.1.5-signature.css ===== */
/*
* The "Z-Designstudio" signature belongs after the content.
*
* Measured: the footer strip is pinned to the bottom of the viewport, so on the portfolio overview - a
* 29,515px document - the signature floats over the grid the whole way down, and on the portal it sits
* behind the full-screen image. Both already carry the brandmark, so the signature is redundant there.
* On content pages (contact, project) the page ends at the footer, which is exactly "after the content".
*/
.landingpage .footer-description,
.page-template-template-portfolio .footer-description {
display: none;
}
/*
* Portal: the page's own content, between the hero and the contact block.
*
* Printed from `zd_portal_content_section()` on wp_footer (priority 4), so it sits outside the 100vh hero container
* and above the contact block. Same measure as the contact block (707px, two thirds of the 1060 column) so the two
* read as one column of content rather than two different layouts.
*/
.zd-portal-content {
position: relative;
z-index: 3;
background-color: #ffffff;
padding: 90px 25px 0;
}
.zd-portal-content__grid {
display: block;
max-width: 707px;
margin: 0 auto;
text-align: left;
}
.zd-portal-content__grid > :first-child {
margin-top: 0;
}
.zd-portal-content__grid > :last-child {
margin-bottom: 0;
}
.zd-portal-content__grid img {
max-width: 100%;
height: auto;
}
/*
* Portal: let the hero keep one screen while the content and contact block flow UNDER it.
*
* The base theme pins `.landingpage #main-container` to `position: fixed; height: 100vh`, and the contact block is
* printed by wp_footer INSIDE that container. Measured on live 2026-11-02: `.zd-portal-contact` had rect
* [0,0,1440,1222] at `top: 0`, z-index 3, white - it covered the hero completely, and `scrollHeight` was 900, so
* there was nothing to scroll either. That is the "background images not visible" report: the photo was there, the
* white block was on top of it.
*
* So: container goes back into flow and is allowed to grow, `#content` keeps exactly one screen, and everything
* printed after it - the page content section, then the contact block - stacks underneath.
*/
body.landingpage #main-container {
position: relative !important;
height: auto !important;
min-height: 100vh !important;
max-height: none !important;
overflow: visible !important;
}
body.landingpage #content,
body.landingpage .main-container-wrapper {
height: 100vh !important;
min-height: 100vh !important;
max-height: none !important;
}
/*
* Portal: let the hero keep one screen while the content and contact block flow UNDER it.
*
* The base theme pins `.landingpage #main-container` to `position: fixed; height: 100vh`, and the contact block is
* printed by wp_footer INSIDE that container. Measured on live 2026-11-02: `.zd-portal-contact` had rect
* [0,0,1440,1222] at `top: 0`, z-index 3, white - it covered the hero completely, and `scrollHeight` was 900, so
* there was nothing to scroll either. That is the "background images not visible" report: the photo was there, the
* white block was on top of it.
*
* So: container goes back into flow and is allowed to grow, `#content` keeps exactly one screen, and everything
* printed after it - the page content section, then the contact block - stacks underneath.
*/
body.landingpage #main-container {
position: relative !important;
height: auto !important;
min-height: 100vh !important;
max-height: none !important;
overflow: visible !important;
}
body.landingpage #content,
body.landingpage .main-container-wrapper {
height: 100vh !important;
min-height: 100vh !important;
max-height: none !important;
}
/*
* ...and the container has to leave the float.
*
* The base theme has `#main-container { float: left }`. A float is out of normal flow, so the contact block that follows
* it starts at y=0 and the float overlaps it - and because the contact block is white with z-index 3, it paints over the
* photo. That is the mechanism behind "the portal images are not visible": the image element was there and full-bleed the
* whole time. Measured on the clone: `#main-container` 0..984, `.zd-portal-contact` 0..1306, and `elementFromPoint` at the
* centre of the first screen returned the contact block.
*/
body.landingpage #main-container {
float: none !important;
clear: both !important;
}
/*
* The body was pinned to one screen as well: `body { height: 900px; overflow: hidden auto }` made the body its own scroll
* box while `html.scrollHeight` stayed exactly at the viewport height, so the page itself could not be scrolled. Let the
* document grow instead and scroll normally.
*/
body.landingpage {
height: auto !important;
min-height: 100vh !important;
max-height: none !important;
}
/*
* The awards badge: 25% larger than the 2.1.6 halving, snapped to a 4px scale.
*
* It is a `::before` label image (`awards_label_bg.png`, stretched with `background-size: 100% 100%`) with the word
* "award" set as text on top, so the box, the type and the overhang have to scale together or the graphic squashes and
* the word overflows.
*
* Operator, 2026-11-03: "award label make it 25% bigger, use 4px compatible number". The halved sizes were 75x20 with
* 11px type and 50x14 with 8px; +25% is 93.75x25 / 13.75px and 62.5x17.5 / 10px, so each lands on the nearest multiple of
* 4: **96x24 with 14px type** and **64x16 with 10px type**. The overhang follows the height (-20 -> -24), which still
* fits the 25px the grid reserves above row 0.
*
* `line-height` equals the box height on purpose: half-leading then splits the space evenly (24-14)/2 = 5px above and
* below, 16-10 = 3px on the phone. Equal padding by construction, not by two numbers that can drift.
*/
li.atp-project.awards:before {
box-sizing: border-box;
width: 96px;
height: 24px;
font-size: 14px;
line-height: 24px;
letter-spacing: 0.2em;
padding: 0 0 0 4px;
right: 12px;
top: -24px;
}
@media screen and (max-width: 720px) {
li.atp-project.awards:before {
box-sizing: border-box;
width: 64px;
height: 16px;
font-size: 10px;
line-height: 16px;
letter-spacing: 0.1em;
padding: 0 0 0 4px;
right: 8px;
top: -16px;
}
}
/*
* Portfolio article: the title shares the copy column's axis; bigger and tighter on desktop, body copy a step smaller.
*
* The template prints the h1 as the first child of the `.content-right` copy column, so the title's left edge, width and
* wrap point are the column's own at every breakpoint - nothing to keep in sync by hand. Measured on the clone
* 2026-11-03: at 1440 px the copy column runs x 190 -> 826 (636 px) while the title sat at x 25 -> 1415, i.e. 165 px off
* the text it belongs to. Below 1101 px the columns already stack and both were at x 25, so only the desktop was wrong.
*
* `padding: 0` cancels the base theme's `.post-title { padding: 0 45px }`, which would indent the title from the copy
* underneath it. `text-align: left` keeps it left-aligned next to the copy: the base theme right-aligned the title for
* the days when it sat in the narrow sidebar column.
*/
.single-atp_project .post-title {
font-size: clamp(28px, 4.2vw, 52px);
line-height: 1.05;
margin: 0 0 0.3em;
padding: 0;
text-align: left;
}
/*
* Narrow widths: the copy column (title + body copy) comes first.
*
* The template prints the meta panel before the copy column, which is what lets it float to the right on desktop
* (the columns split at 1101 px, measured). Stacked below that, DOM order would open the article with "Material /
* Company / Year" and only then the title. Ordering the copy column first keeps every width opening with the title,
* and the meta panel follows underneath.
*/
@media (max-width: 1100px) {
.single-atp_project .content-wrapper {
display: flex;
flex-direction: column;
}
.single-atp_project .content-wrapper .content-right {
order: -1;
}
}
/*
* Body copy: 18 px at a 1.4 line-height from the first desktop breakpoint up.
*
* The theme shipped 23 px / 1.5 for page copy, and 2.1.6 set the portfolio article to 20 px / 1.3. The operator asked for
* one size across the content (2026-11-03: "decrease text size of content to 18px and 1.4 on desktop"), so both selectors
* are listed here - the article's copy sits in `.content-container`, a page's in `.page-content`.
*
* Below 721 px the theme's 14 px stays: shrinking that further would hurt readability on a phone. The right column keeps
* its own 14 px, which is set with `!important` in the theme and is untouched by this.
*/
@media (min-width: 721px) {
.single-atp_project .content-container p,
.page-content p {
font-size: 18px;
line-height: 1.4;
}
}
/* ==========================================================================
Interior layout: titles above the content, right column right-aligned
========================================================================== */
/*
* Page titles on the interior site sit above the content area and are left-aligned.
*
* The theme sets `.interior #main-container .post-title { text-align: right }` (style.css:1010) with an ID selector, so a
* plain class cannot beat it. This carries the same ID plus the body class. The Motivation and Contact templates print the
* as the first child of `.content-wrapper` now, so it is above the columns instead of inside one.
*/
body.interior-design #main-container .post-title {
text-align: left;
}
/*
* The right column stays right-aligned.
*
* The interior theme right-aligns `#main-container`, then the content-alignment override (zumbuehl-2.1.4-content-align.css)
* left-aligns `.page-content`, and the column inherits that. This gives the column its own alignment back at ID-level
* specificity, later in the cascade than the theme's rule.
*/
body.interior-design #main-container .sidebar-right,
body.interior-design #main-container .sidebar.sidebar-right {
text-align: right;
}
/* A title that lives inside the right column follows that column, not the page axis. */
body.interior-design #main-container .sidebar-right .post-title {
text-align: right;
}
/*
* A hairline between the blocks inside the right column.
*
* Motivation and Contact stack child sections (`.section`); a project article stacks its meta lines
* (`.project-meta p`). Both read as a column of separate blocks, and the operator asked for that separation to be visible
* (2026-11-03). `rgba`, not a new palette hex, so it sits correctly on the white card and the grey article surface alike.
*/
body.interior-design #main-container .sidebar-right .section + .section,
body.interior-design #main-container .sidebar-right .project-meta p + p {
border-top: 1px solid rgba(0, 0, 0, 0.15);
margin-top: 18px;
padding-top: 18px;
}
/* ==========================================================================
Phone layout: the Z out of the grid, and a readable card title
========================================================================== */
/*
* Below 720px the Z is a fixed, screen-centred watermark (zumbuehl-2.0.1-theme.css), so on a phone it lands on a project
* card: measured 2026-11-03 at 515px, the mark sat at 218,528 while the first card spans 25,300 -> 490,765 - the letter
* covered both the picture and its title. It stays fixed (so it does not scroll away) but moves to the top-left, where
* the header is, at the theme's original phone size. The portal keeps the centred mark: this is scoped to the two
* design subsites.
*/
@media screen and (max-width: 720px) {
.interior-design .logo-wrapper,
.industrial-design .logo-wrapper {
left: 25px !important;
right: auto !important;
top: 25px !important;
bottom: auto !important;
margin: 0 !important;
}
.interior-design .image-logo,
.interior-design .image-logo-dark,
.interior-design .logo .image-logo-wrapper,
.industrial-design .image-logo,
.industrial-design .image-logo-dark,
.industrial-design .logo .image-logo-wrapper {
width: 32px !important;
height: 55px !important;
}
}
/*
* The card title is white 14px text on a scrim over a photograph, and the scrim was 38% black - measured 2026-11-03,
* that is under 4.5:1 whenever the picture is pale, which is most of this portfolio. At 55% it is 4.8:1 even over a
* pure-white photo, so the words are legible without leaning on anything else - which matters here because text never
* carries a drop shadow on this site (operator rule, 2026-11-03).
*/
.atp-grid-portfolio .atp-projects > li .atp-project-details,
.atp-portfolio-wrapper .atp-projects > li .atp-project-details {
background-color: rgba(0, 0, 0, 0.55);
}
/*
* No text drop shadows anywhere on this site. Ever.
*
* The operator's instruction, 2026-11-03: "no text drop shadow never". One guard instead of trusting every present and
* future rule: the shipped theme carries one in `resources/css/main-style.css`, the plugin carried one on its phone
* caption, and these cards were given one earlier the same day. All of those are deleted; this stops a stylesheet, a
* widget, a plugin update or a future edit from bringing the effect back.
*/
* {
text-shadow: none !important;
}
/* ==========================================================================
Design system: type scale, page patterns, alignment
--------------------------------------------------------------------------
Everything below states a rule ONCE, by role, so a page cannot end up with a private exception. It supersedes the
per-page edits from 2.1.3 (centred measure), 2.1.4 (alignment), 2.1.6 (article type), 2.1.9 (surface), 2.1.10
(interior layout) and 2.1.14 (motivation columns). Those files stay as history; this block is the one to edit.
Measured confusion it replaces, 2026-11-03: 31 `text-align` declarations, 75 `width:` declarations, 22 `float:`
declarations and 129 `!important`s in the merged sheet, several of them contradicting each other page by page.
========================================================================== */
/* --------------------------------------------------------------------------
1. Type scale - four roles, no per-page sizes.
-------------------------------------------------------------------------- */
:root {
--zd-font-display: clamp(28px, 4.2vw, 52px); /* page and article titles */
--zd-line-display: 1.05;
--zd-font-body: 18px; /* prose, desktop */
--zd-line-body: 1.4;
--zd-font-meta: 14px; /* right column, captions, filters */
--zd-line-meta: 1.5;
}
/* Titles: one size, one alignment, above the content. */
.post-title,
.page-title {
font-size: var(--zd-font-display);
line-height: var(--zd-line-display);
text-align: left;
padding: 0;
margin: 0 0 0.6em;
}
/* Prose: one size. The theme's 14px below 721px is the phone size and is left alone. */
@media (min-width: 721px) {
.content-container p,
.page-content p {
font-size: var(--zd-font-body);
line-height: var(--zd-line-body);
}
}
/* Small text: one size. */
.sidebar-right p,
.atp-project-title,
.atp-filters li a,
.bogo-language-switcher li a {
font-size: var(--zd-font-meta);
line-height: var(--zd-line-meta);
}
/* --------------------------------------------------------------------------
2. Page patterns - a page is either prose-only or prose + right column.
Both are stated here, once, for every template that uses those classes.
-------------------------------------------------------------------------- */
/* 2a. Single-column prose: a centred reading measure. */
.page-content .content-container {
max-width: 707px;
margin-left: auto;
margin-right: auto;
float: none;
width: 100%;
}
/* 2b. Two columns: copy 60% left, right column 40% right, gutter inside the right column.
60 + 40 = 100 exactly - a margin on the copy as well would push the float to the next line (that bug cost a
round on /interior/motivation/). */
@media (min-width: 1101px) {
.page-content .content-container.content-left,
.page-content .content-container.content-right,
.page-content .content-container.two-third-column,
.content-wrapper > .content-right.content-container {
float: left;
width: 60%;
max-width: none;
margin-left: 0;
margin-right: 0;
}
.sidebar-right,
.sidebar.sidebar-right {
float: right;
width: 40%;
padding-left: 5.3%;
margin-left: 0;
}
}
/* 2c. Below the two-column breakpoint everything stacks, copy first. */
@media (max-width: 1100px) {
.page-content .content-container,
.content-wrapper > .content-right.content-container {
float: none;
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
}
.content-wrapper {
display: flex;
flex-direction: column;
}
.content-wrapper > .content-right.content-container {
order: -1;
}
}
/* --------------------------------------------------------------------------
3. Alignment - content left, right column right. Stated once.
-------------------------------------------------------------------------- */
.page-content,
.content-container,
.post-title,
.page-title {
text-align: left;
}
.sidebar-right,
.sidebar.sidebar-right {
text-align: right;
}
.sidebar-right .post-title {
text-align: right;
}
/* --------------------------------------------------------------------------
4. Colour roles - text that sits on a photograph is white.
The plugin set this only inside its no-hover/phone block, so on desktop the
label was black on a dark scrim: measured 2026-11-03, rgb(0,0,0) on
rgba(0,0,0,.55). The last two selectors carry the grid path on purpose -
the theme's customizer prints `.atp-project-details-container > a { color: #000 }`
into an inline