/* __DESIGN_SITE__ */ /* ================================================================ sextreffen-niedersachsen.de — habillage unique (design-unique-site) Direction imposée : moutarde + gris ardoise, registre « carnet » (bordures pointillées, coins 6 px). - sidebar desktop : fond ardoise, logo souligné en pointillé, liens en pointillé au survol - barre mobile : bandeau moutarde, textes recolorés en ardoise foncé (le gabarit les posait en blanc semi-transparent) - pied de page : ardoise, liens en 2 colonnes séparées par un filet pointillé vertical (CSS columns, sans toucher au HTML) Ne touche qu'à la sidebar, au bandeau mobile, à la barre d'onglets basse et au footer — rien d'autre (grille de profils, formulaires, age gate, prelinker : intouchés). ================================================================ */ html:not(#_){ --carnet-moutarde: #caa022; --carnet-moutarde-fonce: #9c7c17; --carnet-ardoise: #3a414a; --carnet-ardoise-fonce: #23282e; --carnet-creme: #f4eedd; --carnet-texte-sombre: #20242a; } /* --------------------------------------------------------------- 1) Sidebar desktop — aside.sidebar > .sidebar-inner > .sb-* --------------------------------------------------------------- */ html:not(#_) .sidebar-inner{ background: var(--carnet-ardoise-fonce); border-right: 2px dashed var(--carnet-moutarde-fonce); } /* Logo : « signé » d'un soulignement pointillé, comme dans un carnet */ html:not(#_) .sb-logo{ gap: .6rem; padding-bottom: .6rem; margin-bottom: .75rem; border-bottom: 1px dashed rgba(202, 160, 34, .5); } html:not(#_) .sb-logo-text{ color: var(--carnet-creme); text-decoration: underline; text-decoration-style: dashed; text-decoration-color: var(--carnet-moutarde); text-underline-offset: 5px; } html:not(#_) .sb-logo-dot{ color: var(--carnet-moutarde); transition: transform .2s ease; } html:not(#_) .sb-logo:hover .sb-logo-dot{ transform: rotate(-8deg); } /* Liens de nav : pointillé au survol, actif = pastille moutarde */ html:not(#_) .sb-link{ color: rgba(244, 238, 221, .78); border-radius: 6px; transition: color .18s ease, background-color .18s ease, transform .18s ease; } html:not(#_) .sb-link:hover{ color: var(--carnet-creme); background: rgba(202, 160, 34, .14); text-decoration: underline; text-decoration-style: dashed; text-decoration-color: var(--carnet-moutarde); transform: translateX(3px); } html:not(#_) .sb-link.active{ color: var(--carnet-texte-sombre); background: var(--carnet-moutarde); font-weight: 600; } /* Le lien « Registrieren » se distingue en pastille : c'est le clic qui convertit */ html:not(#_) .sb-link[href="/register"]{ border: 1px dashed var(--carnet-moutarde); margin-top: .5rem; } html:not(#_) .sb-link[href="/register"]:hover{ background: var(--carnet-moutarde); color: var(--carnet-texte-sombre); } /* Bloc « Städte der Region » : carte de carnet, titre pointillé */ html:not(#_) .sb-section-title{ color: var(--carnet-moutarde); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; border-bottom: 1px dashed rgba(202, 160, 34, .4); padding-bottom: .4rem; } html:not(#_) .sb-map-quick-link{ border: 1px dashed rgba(244, 238, 221, .35); border-radius: 6px; color: var(--carnet-creme); transition: border-color .18s ease, color .18s ease; } html:not(#_) .sb-map-quick-link:hover{ border-color: var(--carnet-moutarde); color: var(--carnet-moutarde); } html:not(#_) .sb-silo-region{ color: var(--carnet-creme); border-bottom: 1px dashed rgba(244, 238, 221, .2); } html:not(#_) .sb-silo-region:hover, html:not(#_) .sb-silo-group.open .sb-silo-region{ color: var(--carnet-moutarde); } html:not(#_) .sb-silo-ville{ color: rgba(244, 238, 221, .62); border-radius: 6px; } html:not(#_) .sb-silo-ville:hover{ color: var(--carnet-moutarde); text-decoration: underline; text-decoration-style: dashed; } /* --------------------------------------------------------------- 2) Barre mobile — .mobile-guest-top (bandeau moutarde) Les textes du gabarit (blanc semi-transparent sur violet) deviennent ardoise foncé opaque : moutarde clair exige un texte sombre pour rester lisible. --------------------------------------------------------------- */ html:not(#_) .mobile-guest-top{ background: var(--carnet-moutarde); border-bottom: 2px dashed var(--carnet-ardoise-fonce); } html:not(#_) .mobile-guest-head{ border-bottom: 1px dashed rgba(35, 40, 46, .35); padding-bottom: .5rem; } html:not(#_) .mobile-guest-brand{ color: var(--carnet-texte-sombre); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 4px; } html:not(#_) .mobile-guest-login{ color: var(--carnet-texte-sombre); border: 1px dashed var(--carnet-texte-sombre); border-radius: 6px; } /* Disposition : le bloc horaire passe à gauche, l'offre/mot-clé à droite */ html:not(#_) .mobile-guest-cta-left{ order: 2; text-align: right; } html:not(#_) .mobile-guest-cta-right{ order: 1; text-align: left; } html:not(#_) .mobile-guest-cta-offer, html:not(#_) .mobile-guest-timer-label{ color: var(--carnet-texte-sombre); opacity: .82; } html:not(#_) .mobile-guest-cta-kw{ color: var(--carnet-texte-sombre); font-weight: 700; opacity: 1; } html:not(#_) .mobile-guest-timer{ color: var(--carnet-ardoise-fonce); background: rgba(244, 238, 221, .55); border: 1px dashed var(--carnet-texte-sombre); border-radius: 6px; padding: .1rem .5rem; font-variant-numeric: tabular-nums; } html:not(#_) .mobile-guest-cta-btn{ background: var(--carnet-ardoise-fonce); color: var(--carnet-creme); border: 1px dashed var(--carnet-creme); border-radius: 6px; min-height: 44px; transition: transform .15s ease, background-color .15s ease; } html:not(#_) .mobile-guest-cta-btn:active{ transform: scale(.97); background: var(--carnet-ardoise); } /* --------------------------------------------------------------- 3) Barre d'onglets basse — nav.bottom-bar > a.btab --------------------------------------------------------------- */ html:not(#_) .bottom-bar{ background: var(--carnet-ardoise-fonce); border-top: 2px dashed var(--carnet-moutarde); } html:not(#_) .btab{ color: rgba(244, 238, 221, .55); transition: color .18s ease, transform .12s ease; } html:not(#_) .btab:active{ transform: scale(.93); } html:not(#_) .btab.active{ color: var(--carnet-moutarde); position: relative; } html:not(#_) .btab.active::after{ content: ""; position: absolute; bottom: 2px; left: 50%; width: 16px; height: 2px; background: var(--carnet-moutarde); border-radius: 2px; transform: translateX(-50%); animation: carnet-tab-in .25s ease; } @keyframes carnet-tab-in { from { width: 0; opacity: 0; } to { width: 16px; opacity: 1; } } /* --------------------------------------------------------------- 4) Pied de page — footer.footer-v2 2 colonnes natives (CSS columns) séparées par un pointillé vertical, sans changer le HTML (un seul