/* Theme Name: Tierhold Author: Daniel Schmitzer (daschmi@daschmi.de) Version: 1.0 Text Domain: tierhold */ @font-face { font-family:'AeonisLTPro'; font-weight:400; font-style:normal; src:url('assets/fonts/AeonisLTPro-Regular/font.woff2') format('woff2'), url('assets/fonts/AeonisLTPro-Regular/font.woff') format('woff'); } @font-face { font-family:'AeonisLTPro'; font-weight:400; font-style:italic; src:url('assets/fonts/AeonisLTPro-Italic/font.woff2') format('woff2'), url('assets/fonts/AeonisLTPro-Italic/font.woff') format('woff'); } @font-face { font-family:'AeonisLTPro'; font-weight:700; font-style:normal; src:url('assets/fonts/AeonisLTPro-Bold/font.woff2') format('woff2'), url('assets/fonts/AeonisLTPro-Bold/font.woff') format('woff'); } @font-face { font-family:'AeonisLTPro'; font-weight:700; font-style:italic; src:url('assets/fonts/AeonisLTPro-BoldItalic/font.woff2') format('woff2'), url('assets/fonts/AeonisLTPro-BoldItalic/font.woff') format('woff'); } :root { --wp--preset--color--black: #000000; --wp--preset--color--cyan-bluish-gray: #3A3A3A; --wp--preset--color--dunkelgruen: #0C240EFF; } body, html { scroll-behavior:smooth; font-family:'AeonisLTPro', sans-serif; font-weight:400; } body { background-color:#3A3A3A; color:#FFFFFF; padding-top:36px; } #topbar { position:fixed; top:0; left:0; right:0; z-index:300; height:36px; background:rgba(0,0,0,.75); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:stretch; & > .inner { max-width:1600px; margin-left:auto; margin-right:auto; padding-left:1rem; padding-right:1rem; flex-grow:1; display:flex; justify-content:space-between; align-items:center; padding:0 1rem; a { color:inherit; text-decoration:none; display:flex; align-items:center; gap:0.5rem; font-size:12px; } a.logo { font-weight:bold; } } nav { display:none; } } #topbar .topbar__nav ul { list-style:none; display:flex; gap:1.5rem; } #topbar .topbar__nav ul li a { color:#fff; text-decoration:none; font-size:.8rem; opacity:.7; transition:opacity .2s; } #topbar .topbar__nav ul li a:hover { opacity:1; } * { margin:0; padding:0; box-sizing:border-box; } img { max-width:100%; height:auto; } section#hero { position:relative; line-height:0; text-shadow: 0 0 2px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.8), 2px 2px 3px rgba(0,0,0,0.9), -1px -1px 2px rgba(0,0,0,0.6); .img_wrap > img { width:100vw; height:calc(100vh - 36px); object-fit:cover; object-position: calc(50% - 130px) top; } a.logo { position:absolute; left:2rem; top:2rem; width:180px; opacity:0; animation:heroFadeIn .6s ease .1s forwards; } .page_wrap_outer { position:absolute; left:0; top:0; width:100%; height:100%; & > .page_wrap { position:relative; } } } .hero-content { position:absolute; bottom:5rem; left:50%; transform:translateX(-50%); width:90%; max-width:700px; z-index:10; text-align:center; opacity:0; animation:heroContentIn .7s ease .35s forwards; & h1 { font-size:1.9rem; font-weight:700; color:#fff; line-height:1.15; margin-bottom:1.2rem; text-shadow:0 2px 12px rgba(0,0,0,.45); } & p { font-size:1.25rem; color:rgba(255,255,255,.88); line-height:1.6; margin-bottom:2rem; } & .hero-btn { display:inline-block; padding:.9rem 2rem; border:2px solid #fff; color:#fff; text-decoration:none; font-size:1rem; font-weight:700; letter-spacing:.03em; transition:background .25s, color .25s; line-height:120%; } & .hero-btn:hover { background:#fff; color:#000; text-shadow:none; } } .scroll-down-arrow { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:5px; text-decoration:none; z-index:5; opacity:0; animation:heroScrollFadeIn 1.2s ease .8s forwards, heroScrollBounce 1.8s ease-in-out 2s infinite; & .scroll-down-arrow__chevron { display:block; width:20px; height:20px; border-right:2px solid rgba(255,255,255,.75); border-bottom:2px solid rgba(255,255,255,.75); transform:rotate(45deg); transition:border-color .2s; } &:hover .scroll-down-arrow__chevron { border-color:#fff; } } #back-to-top { position:fixed; bottom:32px; right:32px; display:flex; flex-direction:column; align-items:center; gap:5px; text-decoration:none; z-index:100; opacity:0; pointer-events:none; transition:opacity .4s ease; & .back-to-top__chevron { display:block; width:20px; height:20px; border-right:2px solid rgba(255,255,255,.75); border-bottom:2px solid rgba(255,255,255,.75); transform:rotate(-135deg); transition:border-color .2s; } &:hover .back-to-top__chevron { border-color:#fff; } } #back-to-top.is-visible { opacity:1; pointer-events:auto; } @keyframes heroFadeIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } } @keyframes heroContentIn { from { opacity:0; transform:translateX(-50%) translateY(20px); } to { opacity:1; transform:translateX(-50%) translateY(0); } } @keyframes heroScrollFadeIn { from { opacity:0; transform:translateX(-50%) translateY(6px); } to { opacity:1; transform:translateX(-50%) translateY(0); } } @keyframes heroScrollBounce { 0%, 100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(10px); } } /* Burger */ .burger { background:none; border:none; cursor:pointer; padding:8px; display:flex; flex-direction:column; justify-content:space-between; gap:0; height:36px; z-index:30; position:relative; } .burger span { display:block; width:34px; height:2px; background:#fff; transition:transform .3s ease, opacity .3s ease; } .burger.is-open { width:50px; height:50px; position:relative; & > span { position:absolute; left:0; top:50%; width:100%; } } .burger.is-open span:nth-child(1) { transform:rotate(45deg); } .burger.is-open span:nth-child(2) { opacity:0; } .burger.is-open span:nth-child(3) { transform:rotate(-45deg); } /* Nav-Overlay */ @keyframes navOverlayIn { from { opacity:0; } to { opacity:1; } } @keyframes navItemIn { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:translateX(0); } } /* Hero-Navigation */ .hero-nav { position:absolute; top:2rem; right:1.5rem; z-index:20; & ul { display:none; } &.is-open { position:fixed; inset:0; z-index:400; background:rgba(0,0,0,.65); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); display:flex; align-items:center; justify-content:center; animation:navOverlayIn .3s ease; } &.is-open .burger { position:absolute; top:2rem; right:1.5rem; } &.is-open ul { display:flex; list-style:none; flex-direction:column; align-items:center; gap:4rem; text-align:center; } &.is-open ul li a { display:block; color:#fff; text-decoration:none; font-size:1.8rem; font-weight:700; opacity:0; animation:navItemIn .4s ease forwards; transition:opacity .2s; } &.is-open ul li a:hover { opacity:.65 !important; } &.is-open ul li:nth-child(1) a { animation-delay:.05s; } &.is-open ul li:nth-child(2) a { animation-delay:.1s; } &.is-open ul li:nth-child(3) a { animation-delay:.15s; } &.is-open ul li:nth-child(4) a { animation-delay:.2s; } &.is-open ul li:nth-child(5) a { animation-delay:.25s; } &.is-open ul li:nth-child(6) a { animation-delay:.3s; } &.is-open ul li:nth-child(7) a { animation-delay:.35s; } &.is-open ul li:nth-child(8) a { animation-delay:.4s; } } main { ul, ol, p { margin-bottom:1rem; line-height:160%; font-size:1rem; } h3 { margin-bottom:1rem; font-size:1.5rem; line-height:160%; } ul, ol { padding-left:2rem; } a { color:inherit; } } .page_wrap { margin-left:auto; margin-right:auto; max-width:1600px; } #site-header { background:#000; border-bottom:1px solid rgba(255,255,255,.15); & .site-header__inner { display:flex; flex-direction:row; align-items:center; justify-content:space-between; padding:1.2rem 1.5rem; } & .site-header__logo img { height:32px; width:auto; display:block; } & .site-header__nav ul { display:none; } & .site-header__nav.is-open { position:fixed; inset:0; z-index:400; background:rgba(0,0,0,.65); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); display:flex; align-items:center; justify-content:center; animation:navOverlayIn .3s ease; } & .site-header__nav.is-open .burger { position:absolute; top:1.4rem; right:1.5rem; } & .site-header__nav.is-open ul { display:flex; list-style:none; flex-direction:column; align-items:center; gap:4rem; text-align:center; } & .site-header__nav.is-open ul li a { display:block; color:#fff; text-decoration:none; font-size:1.8rem; font-weight:700; opacity:0; animation:navItemIn .4s ease forwards; transition:opacity .2s; } & .site-header__nav.is-open ul li a:hover { opacity:.65 !important; } & .site-header__nav.is-open ul li:nth-child(1) a { animation-delay:.05s; } & .site-header__nav.is-open ul li:nth-child(2) a { animation-delay:.1s; } & .site-header__nav.is-open ul li:nth-child(3) a { animation-delay:.15s; } & .site-header__nav.is-open ul li:nth-child(4) a { animation-delay:.2s; } & .site-header__nav.is-open ul li:nth-child(5) a { animation-delay:.25s; } & .site-header__nav.is-open ul li:nth-child(6) a { animation-delay:.3s; } & .site-header__nav.is-open ul li:nth-child(7) a { animation-delay:.35s; } & .site-header__nav.is-open ul li:nth-child(8) a { animation-delay:.4s; } } #page:has(#site-header) { display:flex; flex-direction:column; min-height:100vh; } #page:has(#site-header) > main { flex:1; } @keyframes navItemIn { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:translateX(0); } } h1, h2 { font-size:2.5rem; line-height:160%; margin-bottom:2rem; &:only-child { margin-bottom:0; } } .padding-y-default { padding-top:1rem; padding-bottom:1rem; } #footer { background:#fff; position:relative; overflow:hidden; color:#000000; &:before { content:' '; left:0; top:0; height:1000vh; width:50vw; position:absolute; background-color:#0C240EFF; left:0; } & .footer__inner { position:relative; display:flex; flex-direction:column; align-items:center; gap:1.2rem; text-align:center; background-color:white; } & .footer__logo img { height:100%; width:auto; display:block; } & .footer__copy { font-size:.85rem; opacity:.6; } & .footer__nav ul { list-style:none; display:flex; gap:2rem; } & .footer__nav a { color:#000000; text-decoration:none; font-size:.95rem; opacity:.75; transition:opacity .2s; } & .footer__nav a:hover { opacity:1; } } #page > main { & > .wp-block-group { margin-left:auto; margin-right:auto; padding-left:1rem; padding-right:1rem; opacity:0; transform:translateY(28px); transition:opacity .55s ease, transform .55s ease; } & > .wp-block-group.is-visible { opacity:1; transform:translateY(0); } & > .wp-block-group.alignwide { max-width:1600px; } } /* Angebote */ .wp-block-acf-angebote { max-width:none; margin-left:-1.5rem; margin-right:-1.5rem; } .block-angebote { display:grid; grid-template-columns:1fr; gap:1.5rem; } .angebot-card { background:#3A3A3A; border:1px solid rgba(255,255,255,.1); display:grid; grid-template-columns:1fr; & > .content { padding:1rem; } & > .media { padding:0 1rem; } & > .disclaimer { padding:1rem; } & .angebot-card__img { aspect-ratio:16/9; overflow:hidden; background:#1a1a1a; display:flex; align-items:center; justify-content:center; } & .angebot-card__img img { width:100%; height:100%; object-fit:contain; transition:transform .5s ease; padding:.5rem; } &:hover .angebot-card__img img { transform:scale(1.03); } & .angebot-card__body { padding:1.5rem; display:flex; flex-direction:column; flex:1; } & .angebot-card__typ { display:block; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.5; margin-bottom:.5rem; } & .angebot-card__titel { font-size:1.9rem; font-weight:700; line-height:1.3; margin-bottom:.75rem; } & .angebot-card__km-row { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1rem; } & .angebot-card__km-btn { padding:.5rem 1rem; border:2px solid rgba(255,255,255,.35); background:none; color:#fff; font-family:inherit; font-size:.85rem; font-weight:700; letter-spacing:.02em; cursor:pointer; transition:background .2s, color .2s, border-color .2s; } & .angebot-card__km-btn:hover { border-color:#fff; } & .angebot-card__km-btn.is-active { background:#fff; color:#000; border-color:#fff; } & .angebot-card__preis { display:inline-block; font-size:1.9rem; font-weight:700; line-height:1; margin-bottom:1.5rem; & sup { font-size:.6em; vertical-align:super; line-height:1; margin-left:.1em; color:rgba(255,255,255,.55); } } & .angebot-card__preis-value { display:inline-block; transition:transform .2s cubic-bezier(.4,0,.2,1), opacity .2s cubic-bezier(.4,0,.2,1); } & .angebot-card__preis-value.is-out { transform:translateY(-10px); opacity:0; } & .angebot-card__preis-value.is-in { transform:translateY(10px); opacity:0; transition:none; } & .angebot-card__note { font-size:.75rem; opacity:.5; line-height:1.5; margin-top:1.2rem; border-top:1px solid rgba(255,255,255,.1); padding-top:.9rem; margin-bottom:0; & sup { font-size:.85em; vertical-align:super; margin-right:.2em; } } & .angebot-card__content { font-size:.88rem; opacity:.65; line-height:1.65; margin-bottom:1.5rem; flex:1; & p { margin-bottom:.6rem; } & p:last-child { margin-bottom:0; } & ul, & ol { padding-left:1.2rem; margin-bottom:.6rem; } } & .angebot-card__btn { align-self:flex-start; margin-top:auto; display:inline-block; padding:.75rem 1.75rem; border:2px solid #fff; color:#fff; text-decoration:none; font-size:.95rem; font-weight:700; letter-spacing:.03em; transition:background .25s, color .25s; } & .angebot-card__btn:hover { background:#fff; color:#000; } } /* Kontaktformular */ .block-kontakt { max-width:800px; margin:0 auto; } .kontakt-grid { display:grid; grid-template-columns:1fr; gap:1.2rem; } .kontakt-field { display:flex; flex-direction:column; gap:.4rem; & span { font-size:.9rem; font-weight:700; } & em { color:#e05; font-style:normal; } & input, & select, & textarea { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff; padding:.7rem 1rem; font-family:inherit; font-size:1rem; width:100%; transition:border-color .2s; } & input:focus, & select:focus, & textarea:focus { outline:none; border-color:#fff; } & select option { background:#222; color:#fff; } & textarea { resize:vertical; } } .kontakt-field--full { grid-column:1 / -1; } .kontakt-required-note { font-size:.8rem; opacity:.6; margin-top:.4rem; } .kontakt-error { background:rgba(220,50,50,.2); border:1px solid rgba(220,50,50,.5); color:#f88; padding:.8rem 1rem; margin-top:1rem; font-size:.95rem; } .kontakt-submit { margin-top:1.5rem; padding:.9rem 2.5rem; border:2px solid #fff; background:none; color:#fff; font-family:inherit; font-size:1rem; font-weight:700; cursor:pointer; letter-spacing:.03em; transition:background .25s, color .25s; &:hover:not(:disabled) { background:#fff; color:#000; } &:disabled { opacity:.5; cursor:default; } } .kontakt-success { padding:2rem; text-align:center; font-size:1.1rem; } /* 404 */ .error-404 { padding:5rem 1.5rem; text-align:center; & .error-404__number { font-size:8rem; font-weight:700; line-height:1; opacity:.12; letter-spacing:-.04em; margin-bottom:-1.5rem; } & .error-404__heading { font-size:2rem; font-weight:700; margin-bottom:1rem; } & .error-404__text { font-size:1rem; opacity:.7; max-width:480px; margin:0 auto 2.5rem; line-height:1.7; } & .error-404__actions { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; } & .error-404__btn { display:inline-block; padding:.9rem 2rem; border:2px solid #fff; color:#fff; text-decoration:none; font-family:inherit; font-size:1rem; font-weight:700; letter-spacing:.03em; background:none; cursor:pointer; transition:background .25s, color .25s; } & .error-404__btn:hover { background:#fff; color:#000; } & .error-404__btn--ghost { opacity:.6; } & .error-404__btn--ghost:hover { opacity:1; background:#fff; color:#000; } } @media (min-width:601px) { .kontakt-grid { grid-template-columns:1fr 1fr; } .angebot-card { flex-direction:row; } .angebot-card .angebot-card__img { width:45%; aspect-ratio:unset; flex-shrink:0; } } @media (max-width:768px) { #topbar & > .inner a.logo { display:none; } #footer { height:100px; .footer__logo { position:absolute; left:0; top:0; img { height:100px; } } &:before { display:none; } .footer__inner { align-items:flex-end; padding:1rem 2rem 0 0; gap:0.5rem; } #menu-footermenue { flex-direction:column; gap:0.25rem; align-items:flex-end; margin-top:0.25rem; } } } @media (min-width:769px) { #topbar { nav { display:block; } } section#hero a.logo { width:260px; } .hero-content { bottom:8rem; } .hero-content h1 { font-size:3.2rem; } .hero-content p { font-size:1.1rem; } .hero-nav { top:4rem; right:5rem; } .hero-nav.is-open .burger { top:4rem; right:5rem; } #site-header .site-header__nav.is-open .burger { top:1.4rem; right:2rem; } #footer .footer__inner { flex-direction:row; justify-content:space-between; gap:0; text-align:left; } #footer .footer__inner { flex-directio.padding-y-defaultn:row; justify-content:space-between; gap:0; text-align:left; } #footer .footer__copy { position:absolute; left:50%; transform:translateX(-50%); } section#hero a.logo { left:5rem; } #site-header .site-header__inner { padding:1.2rem 2rem; } #site-header .site-header__logo img { height:36px; } } @media (min-width:1200px) { #page > main { & > .wp-block-group { padding-left:1.5rem; padding-right:1.5rem; } } .zitatkacheln__item { padding:32px 28px 28px; } .padding-y-default { padding-top:4rem; padding-bottom:4rem; } .angebot-card { grid-template-columns:2fr 1fr; & > .disclaimer { grid-column:1 / -1; } } section#hero { .img_wrap > img { object-position: top center; } } }