/* ========================================================================== Erdparadies — Bio-Liefergemüse -------------------------------------------------------------------------- Retro-erdfarbene Gestaltung: warmes Papier, Terrakotta, Olive, Ocker und Staubrose. Deckende, aber blasse Flächen; harte Kanten, kleine Radien, Serifen-Überschriften und Monospace-Labels. O-Box wird ausschließlich über Design-Tokens auf eingefärbt (Familie --all-* / --navi-*, siehe obox-docs/concepts/theming.md). Nur dokumentierte, öffentliche O-Box-Klassen werden für das Grundgerüst ergänzt — keine undokumentierten Interna. ========================================================================== */ :root { --wb-paper: #f2e8d3; --wb-paper-2: #eadfc3; --wb-card: #fbf6ea; --wb-card-2: #f6efdd; --wb-ink: #3a3126; --wb-ink-soft: #6b5d49; --wb-line: #ded0b2; --wb-line-strong: #c8b58e; --wb-clay: #a85f3f; --wb-clay-dark: #82462b; --wb-olive: #66744a; --wb-olive-dark: #4d5836; --wb-ochre: #c9a75b; --wb-ochre-soft: #e7d7ad; --wb-ochre-band: #dfcd9f; --wb-rose: #b98a7c; --wb-radius: 3px; --wb-wrap: 1180px; --wb-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif; --wb-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --wb-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--wb-sans); font-size: 16px; line-height: 1.65; color: var(--wb-ink); background-color: var(--wb-paper); background-image: radial-gradient(rgba(150, 128, 88, .12) 1px, transparent 1.1px); background-size: 22px 22px; } /* --------------------------------------------------------------- Typografie */ h1, h2, h3, h4 { font-family: var(--wb-serif); font-weight: 700; line-height: 1.14; margin: 0 0 .55em; color: var(--wb-ink); } h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); letter-spacing: -.01em; } h2 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); } h3 { font-size: 1.18rem; } p { margin: 0 0 1em; } a { color: var(--wb-clay-dark); text-underline-offset: 3px; } a:hover { color: var(--wb-clay); } img { max-width: 100%; height: auto; } strong { font-weight: 700; } .wrap { width: 100%; max-width: var(--wb-wrap); margin: 0 auto; padding: 0 1.25rem; } .eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 .9rem; font-family: var(--wb-mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--wb-olive-dark); } .eyebrow::before { content: ""; width: 1.9rem; height: 1px; background: var(--wb-olive); flex: 0 0 auto; } .eyebrow.center { justify-content: center; } .eyebrow.center::after { content: ""; width: 1.9rem; height: 1px; background: var(--wb-olive); } .lead { font-size: 1.12rem; color: var(--wb-ink-soft); max-width: 46ch; } .muted { color: var(--wb-ink-soft); } .center { text-align: center; } .center .lead { margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------------ Knöpfe */ .btn { display: inline-block; padding: .72rem 1.35rem; font-family: var(--wb-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; border-radius: var(--wb-radius); cursor: pointer; transition: transform .12s ease, background-color .12s ease, color .12s ease; } .btn + .btn { margin-left: .6rem; } .btn-primary { background: var(--wb-clay); color: #fdf8ec; box-shadow: 0 3px 0 var(--wb-clay-dark); } .btn-primary:hover { background: var(--wb-clay-dark); color: #fff; transform: translateY(1px); box-shadow: 0 2px 0 #6d3820; } .btn-secondary { background: var(--wb-olive); color: #fdf8ec; box-shadow: 0 3px 0 var(--wb-olive-dark); } .btn-secondary:hover { background: var(--wb-olive-dark); color: #fff; transform: translateY(1px); box-shadow: 0 2px 0 #3c462a; } .btn-ghost { background: transparent; border-color: var(--wb-ink); color: var(--wb-ink); } .btn-ghost:hover { background: var(--wb-ink); color: var(--wb-paper); } .btn-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; } .btn-row .btn + .btn { margin-left: 0; } /* ---------------------------------------------------------------- Kopfzeile */ .site-header { position: relative; z-index: 30; } .topbar { background: var(--wb-ochre-soft); border-bottom: 1px solid var(--wb-line-strong); color: var(--wb-ink-soft); } .topbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1.5rem; padding-top: .45rem; padding-bottom: .45rem; } .topbar-tag { margin: 0; font-family: var(--wb-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wb-ink-soft); } .utility-nav { display: flex; flex-wrap: wrap; gap: .35rem 1.15rem; font-size: .8rem; } .utility-nav a { color: var(--wb-ink); text-decoration: none; border-bottom: 1px solid transparent; } .utility-nav a:hover, .utility-nav a[aria-current] { color: var(--wb-clay-dark); border-color: var(--wb-clay); } .masthead { background: var(--wb-paper); padding: 1.1rem 0; } .masthead-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 1.75rem; } .brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--wb-ink); } .brand-mark { flex: 0 0 auto; width: 48px; height: 48px; } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-text strong { font-family: var(--wb-serif); font-size: 1.55rem; letter-spacing: .01em; } .brand-text small { margin-top: .3rem; font-family: var(--wb-mono); font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--wb-olive-dark); } .masthead-right { display: flex; align-items: center; gap: 1.25rem; flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; } .navbar { background: var(--wb-ochre-band); border-top: 1px solid var(--wb-line-strong); border-bottom: 1px solid var(--wb-line-strong); } .navbar-inner { display: flex; align-items: center; gap: 1rem; min-height: 3.1rem; } #navi-wrapper { flex: 1 1 auto; min-width: 0; } .ham { display: none; margin-left: auto; padding: .5rem .85rem; font-family: var(--wb-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; background: var(--wb-card); color: var(--wb-ink); border: 1px solid var(--wb-line-strong); border-radius: var(--wb-radius); cursor: pointer; } /* Flash-Meldungen bekommen einen festen, ruhigen Platz unter der Kopfzeile */ #oo-flash { max-width: var(--wb-wrap); margin: 0 auto; padding: 0 1.25rem; } #oo-flash:empty { display: none; } /* ------------------------------------------------------------------ Footer */ .site-footer { margin-top: 4rem; background: var(--wb-paper-2); border-top: 1px solid var(--wb-line-strong); color: var(--wb-ink-soft); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem; padding-top: 3rem; padding-bottom: 2.4rem; } .footer-grid h3 { font-family: var(--wb-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wb-ink); margin-bottom: 1rem; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: .45rem; } .footer-grid a { color: var(--wb-ink-soft); text-decoration: none; } .footer-grid a:hover { color: var(--wb-clay-dark); text-decoration: underline; } .footer-brand .brand { margin-bottom: 1rem; } .footer-brand p { max-width: 34ch; font-size: .92rem; } .footer-base { background: var(--wb-ochre-soft); border-top: 1px solid var(--wb-line-strong); font-family: var(--wb-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; } .footer-base .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding-top: .8rem; padding-bottom: .8rem; } /* ------------------------------------------------------------------- Hero */ .hero { padding: 3.4rem 0 3rem; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; } .hero-copy h1 { margin-bottom: .8rem; } .hero-copy .lead { font-size: 1.18rem; margin-bottom: 1.6rem; } .hero-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px dashed var(--wb-line-strong); } .badge { font-family: var(--wb-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wb-olive-dark); border: 1px solid var(--wb-line-strong); background: var(--wb-card); border-radius: 999px; padding: .35rem .8rem; } .hero-art { position: relative; background: var(--wb-card); border: 1px solid var(--wb-line-strong); border-radius: var(--wb-radius); box-shadow: 10px 10px 0 var(--wb-ochre-soft); padding: 1.6rem; } .hero-art svg { display: block; width: 100%; height: auto; } .hero-stamp { position: absolute; right: -18px; top: -18px; width: 88px; height: 88px; border-radius: 50%; background: var(--wb-clay); color: #fdf8ec; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: var(--wb-mono); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; transform: rotate(8deg); border: 2px solid var(--wb-clay-dark); } .hero-stamp b { font-family: var(--wb-serif); font-size: 1.05rem; letter-spacing: 0; } /* -------------------------------------------------------------- Abschnitte */ .section { padding: 3.2rem 0; } .section-head { max-width: 62ch; margin-bottom: 2rem; } .section-head.center { margin-left: auto; margin-right: auto; } .band { background: var(--wb-card); border-top: 1px solid var(--wb-line); border-bottom: 1px solid var(--wb-line); } .band-olive { background: var(--wb-olive-dark); color: #efe9d8; border-color: var(--wb-olive-dark); } .band-olive h2, .band-olive h3 { color: #faf5e7; } .band-olive .lead, .band-olive p { color: #ded8c4; } .band-ochre { background: var(--wb-ochre-soft); border-color: var(--wb-line-strong); } .trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .trust-item { display: flex; gap: 1rem; align-items: flex-start; } .trust-icon { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--wb-line-strong); background: var(--wb-card); display: flex; align-items: center; justify-content: center; color: var(--wb-olive-dark); } .trust-item h3 { margin-bottom: .2rem; font-size: 1.02rem; } .trust-item p { margin: 0; font-size: .9rem; color: var(--wb-ink-soft); } .card { background: var(--wb-card); border: 1px solid var(--wb-line-strong); border-radius: var(--wb-radius); padding: 1.6rem; } .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .card .card-kicker { font-family: var(--wb-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wb-clay-dark); margin-bottom: .7rem; } .card h3 { margin-bottom: .4rem; } .card p { font-size: .93rem; color: var(--wb-ink-soft); } .card a.card-link { font-family: var(--wb-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; } /* ---------------------------------------------------------- O-Box-Bühnen */ .panel { background: var(--wb-card); border: 1px solid var(--wb-line-strong); border-radius: var(--wb-radius); padding: 1.5rem; box-shadow: 6px 6px 0 var(--wb-ochre-soft); } .panel-plain { box-shadow: none; } .ticker-stage { padding: 1.2rem 1.4rem; overflow: hidden; } .ticker-stage .oo-ticker { margin: 0 auto; } /* -------------------------------------------------------------- Shop-Seite */ .shop-layout { display: grid; grid-template-columns: 270px 1fr; gap: 2.2rem; align-items: start; } .shop-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 1rem; } .shop-main { min-width: 0; } .side-card { background: var(--wb-card); border: 1px solid var(--wb-line-strong); border-radius: var(--wb-radius); padding: 1.1rem 1.2rem; } .side-card h3 { font-family: var(--wb-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wb-ink); margin-bottom: .8rem; } .side-card p { font-size: .88rem; color: var(--wb-ink-soft); margin-bottom: .6rem; } .shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; margin-bottom: 1.2rem; background: var(--wb-card-2); border: 1px solid var(--wb-line); border-radius: var(--wb-radius); } .shop-toolbar .crumbs { font-family: var(--wb-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } .page-head { padding: 2.6rem 0 1.4rem; } .page-head h1 { margin-bottom: .5rem; } .page-head .lead { margin-bottom: 0; } .content-layout { display: grid; grid-template-columns: 1fr 300px; gap: 2.2rem; align-items: start; } .stack > * + * { margin-top: 1.4rem; } .loading-wrap { display: flex; justify-content: center; min-height: 0; } .note { border-left: 3px solid var(--wb-ochre); background: var(--wb-card-2); padding: .8rem 1rem; font-size: .88rem; color: var(--wb-ink-soft); } /* ========================================================================== O-Box — Design-Tokens (Familie client2.js?config=std-embedded: --all-*). Auf , damit sie das zur Laufzeit nachgeladene :root des Mandanten sicher überschreiben. Keine Komponenten-Interna, nur Tokens. ========================================================================== */ body { --all-bgcolor: var(--wb-card); --all-color: var(--wb-ink); --all-text-color: var(--wb-ink-soft); --all-border-radius: 3px; --all-text-relsize: 1em; --item-box-bg-color: var(--wb-card); --item-border-color: var(--wb-line-strong); --item-box-height: 300px; --bgcolor-1: var(--wb-ochre-soft); --bgcolor-2: var(--wb-ochre-band); --bgcolor-3: var(--wb-card-2); --cart-bgcolor: var(--wb-card); --cart-assorted-bgcolor: #eef0de; --cart-assortment-bgcolor: var(--wb-card); --navi-bgcolor: transparent; --navi-color: var(--wb-ink); --navi-picked-bgcolor: var(--wb-card); --navi-picked-color: var(--wb-clay-dark); --navi-left-bgcolor: var(--wb-card-2); --navi-left-color: var(--wb-ink); --navi-left-picked-bgcolor: var(--wb-card); --navi-left-picked-color: var(--wb-clay-dark); --overlay-bgcolor: var(--wb-card); --overlay-color: var(--wb-ink); --flash-text-color: var(--wb-ink); --action-alt-color: var(--wb-olive-dark); --action-major-bgcolor: var(--wb-clay); --action-major-color: #fdf8ec; --action-minor-bgcolor: var(--wb-olive); --action-minor-color: #fdf8ec; --signal-color-1: #e6cf8b; --signal-color-2: #8fa86a; --headerfooter-bg-color: var(--wb-ochre-soft); --headerfooter-sep-color: var(--wb-line-strong); --headerfooter-sep-height: 1px; --button-radius: 3px; } /* Der Ladebalken darf laut Doku ausdrücklich gestylt werden. */ .oo-loadingbar-box { background: var(--wb-ochre-soft); } .oo-loadingbar-bar { background: var(--wb-clay); } /* ------------------------------------------------------------------------- Kopfzeilen-Gerüst für handplatzierte O-Box-Komponenten. Die eingebundene Standard-Vorlage bringt für die Komponenten eigene Layout-Annahmen mit (u. a. eine fixierte Navigation). Hier werden nur Container-Eigenschaften und dokumentierte öffentliche Klassen in das Seitenlayout überführt. ------------------------------------------------------------------------- */ body #oo-navi { position: static; padding: 0; } body #oo-navi li.oo-navi-1st-pane { position: relative; } body #oo-navi .oo-navi-mega { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 230px; padding: 0; background: none; border: 0; box-shadow: none; } body #oo-navi ul.oo-navi-2nd-pane { margin: 0; min-width: 230px; max-width: 340px; padding: .4rem; background-color: var(--wb-card); border: 1px solid var(--wb-line-strong); border-radius: var(--wb-radius); box-shadow: 0 10px 22px rgba(58, 49, 38, .16); } body #oo-navi > ul.oo-navi-pane { display: flex; flex-wrap: wrap; align-items: center; padding: 0; margin: 0; } body #oo-navi li { list-style: none; } body #oo-navi a { color: var(--wb-ink); text-decoration: none; } body #oo-navi a:hover { color: var(--wb-clay-dark); } body #oo-navi .oo-navi-name { padding: 0; margin: 0; font-family: var(--wb-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } body #oo-navi li.oo-navi-1st-pane { background: transparent; border-radius: 0; margin: 0; padding: 0; } body #oo-navi li.oo-navi-1st-pane > a { display: block; padding: .75rem .85rem; border-bottom: 2px solid transparent; } body #oo-navi li.oo-navi-1st-pane > a:hover, body #oo-navi li.oo-active > a { border-color: var(--wb-clay); } body #oo-search { height: auto; min-width: 0; flex: 1 1 320px; max-width: 440px; } body #oo-search input.oo-search-val { width: 100%; padding: .62rem .9rem .62rem 2.4rem; font-family: var(--wb-sans); font-size: .95rem; color: var(--wb-ink); background-color: var(--wb-card); border: 1px solid var(--wb-line-strong); border-radius: var(--wb-radius); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: .75rem center; background-size: 1.05rem 1.05rem; } body #oo-search input.oo-search-val::placeholder { color: var(--wb-ink-soft); } body #oo-search .oo-search-btn { padding: .62rem .9rem; font-family: var(--wb-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #fdf8ec; background: var(--wb-olive); border: 0; border-radius: var(--wb-radius); cursor: pointer; } body #oo-status { font-size: .9rem; flex: 0 0 auto; } body #oo-status a { color: var(--wb-ink); } body #oo-status .oo-status-cart-link, body #oo-status .oo-status-field { background: var(--wb-card); border: 1px solid var(--wb-line-strong); border-radius: 999px; padding: .3rem .8rem; } /* Warenkorb-, Konto- und Terminseiten: ruhige Bühne für die Komponenten */ body #oo-cart, body #oo-profile, body #oo-date, body #oo-logon { margin: 0; } /* Shop: Kacheln bekommen den Papier-Hintergrund aus den Tokens */ body #oo-shop .oo-shop-item { border-radius: var(--wb-radius); } body #oo-shop .oo-shop-title-head { background-color: var(--wb-ochre-soft); } /* Inhaltsseiten */ body .oo-content { padding: 0; } body .oo-contentnavi a { color: var(--wb-ink); text-decoration: none; } body .oo-contentnavi a:hover { color: var(--wb-clay-dark); } /* ------------------------------------------------------------------ Responsiv */ @media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 2rem; } .hero-art { max-width: 520px; } .shop-layout { grid-template-columns: 1fr; } .shop-sidebar { position: static; } .content-layout { grid-template-columns: 1fr; } .card-grid { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .masthead-inner { align-items: flex-start; } .masthead-right { width: 100%; justify-content: stretch; } body #oo-search { flex: 1 1 100%; max-width: none; } .masthead-right { flex-direction: column; align-items: stretch; gap: .8rem; } body #oo-status { text-align: left; } .ham { display: inline-block; } #navi-wrapper { display: none; } #navi-wrapper.oo-ham-on, body #oo-navi.oo-ham-on { display: block; } .ham[aria-expanded="true"] { background: var(--wb-olive); color: #fdf8ec; } body #oo-navi > ul.oo-navi-pane { flex-direction: column; align-items: stretch; padding: .3rem 0; } body #oo-navi .oo-navi-mega { position: static; box-shadow: none; border: 0; padding: 0 0 0 1rem; } .trust { grid-template-columns: 1fr; } .card-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; } .btn-row { flex-direction: column; align-items: stretch; } .btn-row .btn { text-align: center; } } /* ========================================================================== Ticker — horizontal, kartenartig. Der Ticker ist laut Doku ausdrücklich zum Stylen gedacht (.oo-ticker-pane, .oo-ticker-item, .oo-item-img …). ========================================================================== */ body .oo-ticker { width: auto; max-width: 100%; position: relative; } body .oo-ticker .oo-ticker-pane { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 1.1rem; } body .oo-ticker .oo-ticker-head { display: block; flex: 1 1 100%; width: 100%; margin: 0 0 .1rem; font-family: var(--wb-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wb-olive-dark); } body .oo-ticker .oo-ticker-item { display: block; flex: 0 0 212px; width: 212px; margin: 0; padding: .6rem; text-align: center; background: var(--wb-card); border: 1px solid var(--wb-line-strong); border-radius: var(--wb-radius); box-shadow: 3px 3px 0 var(--wb-ochre-soft); } body .oo-ticker .oo-item-img { width: 100%; height: 176px; margin: 0 0 .55rem; background-color: var(--wb-card-2); background-size: contain; background-position: center; background-repeat: no-repeat; border: 1px solid var(--wb-line); border-radius: var(--wb-radius); } body .oo-ticker .oo-ticker-item .oo-item-img.oo-missing-img { background-image: url("data:image/svg+xml;utf8,"); background-color: var(--wb-card-2); background-size: 46% 46%; } body .oo-ticker .oo-ticker-details { font-size: .84rem; line-height: 1.45; color: var(--wb-ink-soft); } body .oo-ticker .oo-item-name { font-family: var(--wb-serif); font-size: 1.02rem; color: var(--wb-ink); margin-top: .15rem; } body .oo-ticker .oo-item-id { font-family: var(--wb-mono); font-size: .6rem; color: var(--wb-ink-soft); } body .oo-ticker .oo-item-price { color: var(--wb-clay-dark); font-weight: 700; } body .oo-ticker .oo-ticker-controls { display: none; position: static; justify-content: center; gap: .55rem; margin-top: .9rem; } body .oo-ticker:hover .oo-ticker-controls { display: flex; } body .oo-ticker .oo-ticker-prev, body .oo-ticker .oo-ticker-next { width: 2.1rem; height: 2.1rem; padding: 0; color: transparent; background-color: var(--wb-olive); background-size: 1.1rem 1.1rem; background-repeat: no-repeat; background-position: center; border: 0; border-radius: var(--wb-radius); cursor: pointer; } body .oo-ticker .oo-ticker-prev { background-image: url("data:image/svg+xml;utf8,"); } body .oo-ticker .oo-ticker-next { background-image: url("data:image/svg+xml;utf8,"); } body .oo-ticker .oo-ticker-prev:hover, body .oo-ticker .oo-ticker-next:hover { background-color: var(--wb-olive-dark); } /* Statische Zusatzlisten in der Seitenleiste */ .side-links { list-style: none; margin: .9rem 0 0; padding: .9rem 0 0; border-top: 1px dashed var(--wb-line-strong); } .side-links li { margin-bottom: .4rem; } .side-links a { color: var(--wb-ink); text-decoration: none; font-size: .9rem; } .side-links a:hover { color: var(--wb-clay-dark); text-decoration: underline; } .side-empty { font-size: .88rem; color: var(--wb-ink-soft); margin: 0; }