/* ═══════════════════════════════════════════════════════════════════════════ agenturen.app — COMPONENT STYLES All values reference tokens.css → change tokens = change everything. Link tokens.css BEFORE this file in HTML . ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Font Faces ──────────────────────────────────────────────────────────── */ @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/static/fonts/inter-v13-latin-regular.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/static/fonts/inter-v13-latin-500.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/static/fonts/inter-v13-latin-600.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/static/fonts/inter-v13-latin-700.woff2') format('woff2'); } /* ─── Reset ───────────────────────────────────────────────────────────────── */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } body { font-family:var(--font-primary); font-size:var(--text-base); line-height:var(--leading-normal); color:var(--n-700); background:var(--n-25); min-height:100vh; } img { display:block; max-width:100%; } svg { max-width:100%; } a { color:inherit; text-decoration:none; } button { cursor:pointer; border:none; background:none; font:inherit; } ul,ol { list-style:none; } input,textarea { font:inherit; } /* ─── Layout ──────────────────────────────────────────────────────────────── */ .container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--sp-6); } /* ─── Header ──────────────────────────────────────────────────────────────── */ .header { background:rgba(255,255,255,0.95); backdrop-filter:blur(16px); border-bottom:1px solid var(--n-100); position:sticky; top:0; z-index:100; } .header__inner { display:flex; align-items:center; justify-content:space-between; height:64px; } .header__logo { font-size:var(--text-lg); font-weight:var(--weight-bold); display:flex; align-items:center; gap:var(--sp-2); } .header__logo span { background:linear-gradient(135deg, var(--brand-primary), hsl(180,70%,36%)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .header__nav { display:flex; gap:var(--sp-8); align-items:center; } .header__link { font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--n-500); transition:color var(--duration-fast) var(--ease-out); position:relative; } .header__link:hover { color:var(--brand-primary); } .header__link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--cta-color); border-radius:var(--radius-full); transition:width var(--duration-normal) var(--ease-out); } .header__link:hover::after { width:100%; } .header__link--cta { background:var(--cta-gradient); color:var(--cta-text); padding:var(--sp-2) var(--sp-4); border-radius:var(--radius-full); font-weight:var(--weight-bold); } .header__link--cta:hover { filter:brightness(1.08); color:var(--cta-text); } .header__link--cta::after { display:none; } /* ─── Hamburger Button ───────────────────────────────────────────────── */ .header__burger { display:none; color:var(--n-600); padding:var(--sp-2); border-radius:var(--radius-md); transition:background var(--duration-fast); } .header__burger:hover { background:var(--n-100); } /* ─── Hero ────────────────────────────────────────────────────────────────── */ .hero { background:var(--hero-gradient); color:var(--n-0); padding:var(--sp-24) 0 var(--sp-20); text-align:center; position:relative; } .hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(255,255,255,0.06) 0%, transparent 50%); pointer-events:none; } .hero__title { font-family:var(--font-display); font-size:var(--text-4xl); font-weight:var(--weight-bold); line-height:var(--leading-tight); margin-bottom:var(--sp-5); position:relative; letter-spacing:-0.02em; } .hero__subtitle { font-size:var(--text-md); opacity:0.88; max-width:600px; margin:0 auto var(--sp-12); position:relative; line-height:var(--leading-relaxed); } /* ─── Search Bar (Hero CTA — most important conversion element) ────────── */ .search-bar { display:flex; max-width:640px; margin:0 auto; background:var(--n-0); border-radius:var(--radius-2xl); box-shadow:var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.15); overflow:hidden; position:relative; transition:box-shadow var(--duration-normal) var(--ease-out); } .search-bar:focus-within { box-shadow:var(--shadow-xl), 0 0 0 3px var(--brand-primary-muted); } .search-bar__input { flex:1; padding:var(--sp-5) var(--sp-6); border:none; outline:none; font-size:var(--text-md); color:var(--n-800); background:transparent; } .search-bar__input::placeholder { color:var(--n-300); } /* CTA Button: Orange gradient = action trigger, shadow creates depth */ .search-bar__btn { padding:var(--sp-4) var(--sp-8); background:var(--cta-gradient); color:var(--cta-text); font-weight:var(--weight-bold); font-size:var(--text-base); transition:all var(--duration-fast) var(--ease-out); box-shadow:var(--shadow-cta); letter-spacing:0.01em; white-space:nowrap; } .search-bar__btn:hover { filter:brightness(1.08); box-shadow:0 6px 20px var(--cta-glow); transform:translateY(-1px); } .search-bar__btn:active { transform:translateY(0); filter:brightness(0.96); } /* ─── Trust Bar (Social Proof — below hero) ───────────────────────────── */ .trust-bar { text-align:center; padding:var(--sp-6) 0; background:var(--n-0); border-bottom:1px solid var(--n-100); } .trust-bar__inner { display:flex; align-items:center; justify-content:center; gap:var(--sp-10); flex-wrap:wrap; } .trust-bar__item { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--text-sm); color:var(--n-400); font-weight:var(--weight-medium); } .trust-bar__icon { color:var(--trust-color); flex-shrink:0; width:18px; height:18px; } .trust-bar__number { font-weight:var(--weight-bold); color:var(--n-700); font-size:var(--text-md); } /* ─── Section ─────────────────────────────────────────────────────────────── */ .section { padding:var(--sp-20) 0; } .section__title { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:var(--weight-bold); color:var(--n-800); margin-bottom:var(--sp-2); letter-spacing:-0.01em; } .section__subtitle { font-size:var(--text-md); color:var(--n-400); margin-bottom:var(--sp-10); } /* ─── Category Card (Browsing entry points) ───────────────────────────── */ .category-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:var(--sp-4); } .category-card { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-5) var(--sp-6); background:var(--n-0); border:1px solid var(--n-100); border-radius:var(--radius-lg); transition:all var(--duration-normal) var(--ease-out); cursor:pointer; } .category-card:hover { border-color:var(--brand-primary-muted); background:var(--brand-primary-light); transform:translateY(-3px); box-shadow:var(--shadow-md); } .category-card__icon { width:44px; height:44px; border-radius:var(--radius-md); background:var(--brand-primary-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--brand-primary); transition:all var(--duration-normal) var(--ease-out); } .category-card:hover .category-card__icon { background:var(--brand-primary); color:var(--n-0); } .category-card__name { font-weight:var(--weight-semibold); font-size:var(--text-sm); color:var(--n-700); } .category-card__count { font-size:var(--text-xs); color:var(--n-400); margin-top:2px; } /* ─── Agency Card (Core conversion element — click = deeper engagement) ── */ .card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:var(--sp-6); } .agency-card { background:var(--n-0); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--n-100); overflow:hidden; transition:all var(--duration-normal) var(--ease-out); position:relative; } .agency-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-card-hover); border-color:var(--n-200); } .agency-card__body { padding:var(--sp-6); } .agency-card__header { display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-4); } .agency-card__logo { width:56px; height:56px; border-radius:var(--radius-md); object-fit:contain; background:var(--n-50); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:var(--text-lg); font-weight:var(--weight-bold); color:var(--brand-primary); } .agency-card__name { font-size:var(--text-lg); font-weight:var(--weight-semibold); color:var(--n-800); line-height:var(--leading-tight); } .agency-card__location { font-size:var(--text-sm); color:var(--n-400); display:flex; align-items:center; gap:var(--sp-1); margin-top:3px; } .agency-card__tags { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-4); } .agency-card__footer { display:flex; align-items:center; justify-content:space-between; padding-top:var(--sp-4); border-top:1px solid var(--n-50); } /* ─── Tag (Service labels) ────────────────────────────────────────────── */ .tag { display:inline-flex; align-items:center; padding:var(--sp-1) var(--sp-3); font-size:var(--text-xs); font-weight:var(--weight-medium); border-radius:var(--radius-full); background:#f3f4f6; color:#475569; } .tag--trust { background:var(--trust-light); color:var(--trust-text); font-weight:var(--weight-semibold); } /* ─── Rating Stars (Social proof — highest conversion impact) ─────────── */ .rating { display:flex; align-items:center; gap:var(--sp-2); } .rating__stars { display:flex; gap:2px; } .rating__star { width:16px; height:16px; color:var(--star-color); filter:drop-shadow(0 1px 1px rgba(0,0,0,0.08)); } .rating__star--empty { color:var(--star-empty); filter:none; } .rating__value { font-weight:var(--weight-bold); font-size:var(--text-sm); color:var(--n-800); } .rating__count { font-size:var(--text-xs); color:var(--n-400); } /* ─── Breadcrumbs ─────────────────────────────────────────────────────── */ .breadcrumbs { display:flex; align-items:center; gap:var(--sp-2); padding-top:var(--sp-4); padding-bottom:var(--sp-4); font-size:var(--text-sm); color:var(--n-400); } .breadcrumbs__link { color:var(--brand-primary); transition:color var(--duration-fast); } .breadcrumbs__link:hover { color:var(--brand-primary-hover); } .breadcrumbs__separator { color:var(--n-200); } /* ─── USP Grid (Trust building — "why choose us") ────────────────────── */ .usp-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-6); margin-top:var(--sp-10); } .usp-item { padding:var(--sp-8) var(--sp-6); background:var(--n-0); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); border:1px solid var(--n-100); transition:all var(--duration-normal) var(--ease-out); text-align:center; } .usp-item:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); } .usp-item__icon { width:60px; height:60px; border-radius:var(--radius-lg); background:var(--trust-light); color:var(--trust-color); display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-5); transition:all var(--duration-normal) var(--ease-out); } .usp-item:hover .usp-item__icon { background:var(--trust-color); color:var(--n-0); transform:scale(1.08); } .usp-item__title { font-size:var(--text-lg); font-weight:var(--weight-bold); color:var(--n-800); margin-bottom:var(--sp-2); } .usp-item__text { font-size:var(--text-sm); color:var(--n-400); line-height:var(--leading-relaxed); } /* ─── Pagination ──────────────────────────────────────────────────────── */ .pagination { display:flex; align-items:center; justify-content:center; gap:var(--sp-2); padding:var(--sp-10) 0; } .pagination__btn { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 var(--sp-3); border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--n-500); background:var(--n-0); border:1px solid var(--n-100); transition:all var(--duration-fast) var(--ease-out); } .pagination__btn:hover { border-color:var(--brand-primary-muted); color:var(--brand-primary); box-shadow:var(--shadow-sm); } .pagination__btn--active { background:var(--brand-primary); color:var(--n-0); border-color:var(--brand-primary); } /* ─── Profile Hero ───────────────────────────────────────────────────────── */ .profile-hero { background: linear-gradient(180deg, var(--n-50) 0%, var(--n-0) 100%); border-bottom: 1px solid var(--n-100); padding: var(--sp-4) 0 var(--sp-8); position: relative; overflow: hidden; } .profile-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, var(--brand-primary-light), transparent); opacity: 0.3; pointer-events: none; } .profile-hero__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: var(--sp-4); z-index: 1; } .profile-hero__logo { width: 100px; height: 100px; border-radius: var(--radius-xl); object-fit: contain; background: var(--n-0); box-shadow: var(--shadow-md); border: 1px solid var(--n-100); display: flex; align-items: center; justify-content: center; font-size: var(--text-4xl); font-weight: var(--weight-bold); color: var(--brand-primary); margin-bottom: var(--sp-2); } .profile-hero__name { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--n-900); line-height: var(--leading-tight); margin-bottom: var(--sp-1); } .profile-hero__meta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--sp-4); font-size: var(--text-sm); color: var(--n-500); } .profile-hero__detail { display: flex; align-items: center; gap: var(--sp-1); } /* ─── Content Card (Main layout boxes) ───────────────────────────────────── */ .content-card { background: var(--n-0); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); border: 1px solid var(--n-100); padding: var(--sp-8); margin-bottom: var(--sp-6); } .content-card__title { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--n-800); margin-bottom: var(--sp-6); display: flex; align-items: center; gap: var(--sp-2); } .content-card__content { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--n-600); } /* ─── Mobile Sticky CTA ──────────────────────────────────────────────────── */ .mobile-sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--n-100); box-shadow: 0 -4px 12px rgba(0,0,0,0.05); z-index: 900; } @media (max-width: 900px) { .mobile-sticky-cta { display: block; animation: slideUp 0.3s var(--ease-out); } body { padding-bottom: 80px; /* Space for the sticky CTA */ } } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ─── Profile Layout ────────────────────────────────────────────────────── */ .profile-content { width: 100%; margin: 0 auto; padding-top: var(--sp-8); } .profile-section { margin-bottom:var(--sp-10); } .profile-section__title { font-size:var(--text-lg); font-weight:var(--weight-semibold); color:var(--n-800); margin-bottom:var(--sp-4); padding-bottom:var(--sp-3); border-bottom:2px solid var(--brand-primary-light); } .profile-section__content { font-size:var(--text-base); line-height:var(--leading-relaxed); color:var(--n-500); } /* ─── Sidebar ─────────────────────────────────────────────────────────── */ .sidebar-card { background:var(--n-0); border:1px solid var(--n-100); border-radius:var(--radius-lg); padding:var(--sp-6); position:sticky; top:80px; } .sidebar-card__title { font-size:var(--text-lg); font-weight:var(--weight-semibold); margin-bottom:var(--sp-4); color:var(--n-800); } .sidebar-card__link { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) 0; font-size:var(--text-sm); color:var(--brand-primary); font-weight:var(--weight-medium); transition:color var(--duration-fast); border-bottom:1px solid var(--n-50); } .sidebar-card__link:hover { color:var(--brand-primary-hover); } .sidebar-card__link svg { flex-shrink:0; width:16px; height:16px; } .sidebar-card__address { display:flex; gap:var(--sp-3); padding-top:var(--sp-3); font-size:var(--text-sm); color:var(--n-500); line-height:var(--leading-relaxed); } /* ─── Listing Header ──────────────────────────────────────────────────── */ .listing-header { background:var(--n-0); border-bottom:1px solid var(--n-100); padding:var(--sp-8) 0; } .listing-header__title { font-size:var(--text-2xl); font-weight:var(--weight-bold); color:var(--n-800); margin-bottom:var(--sp-2); } .listing-header__count { font-size:var(--text-base); color:var(--n-400); } .listing-header__intro { margin-top:var(--sp-4); font-size:var(--text-base); line-height:var(--leading-relaxed); color:var(--n-500); max-width:720px; } /* ─── Search Results ──────────────────────────────────────────────────── */ .search-results { position:absolute; top:100%; left:0; right:0; background:var(--n-0); border-radius:0 0 var(--radius-xl) var(--radius-xl); box-shadow:var(--shadow-xl); max-height:400px; overflow-y:auto; z-index:200; display:none; } .search-results__item { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4) var(--sp-6); border-bottom:1px solid var(--n-50); transition:background var(--duration-fast); cursor:pointer; } .search-results__item:hover { background:var(--brand-primary-light); } .search-results__name { font-weight:var(--weight-semibold); font-size:var(--text-sm); color:var(--n-700); } .search-results__city { font-size:var(--text-xs); color:var(--n-300); margin-left:auto; } .search-results__rating { font-size:var(--text-xs); font-weight:var(--weight-bold); color:var(--star-color); margin-right:var(--sp-2); } .search-results__empty { padding:var(--sp-6); text-align:center; font-size:var(--text-sm); color:var(--n-300); } /* ─── Footer ──────────────────────────────────────────────────────────── */ .footer { background:var(--n-900); color:var(--n-400); padding:var(--sp-16) 0 var(--sp-8); } .footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--sp-12); margin-bottom:var(--sp-12); } .footer__brand { font-size:var(--text-xl); font-weight:var(--weight-bold); color:var(--n-0); margin-bottom:var(--sp-4); } .footer__desc { font-size:var(--text-sm); line-height:var(--leading-relaxed); } .footer__heading { font-size:var(--text-xs); font-weight:var(--weight-bold); color:var(--n-0); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:var(--sp-4); } .footer__link { display:block; font-size:var(--text-sm); padding:var(--sp-1) 0; transition:color var(--duration-fast); } .footer__link:hover { color:var(--n-0); } .footer__bottom { border-top:1px solid var(--n-800); padding-top:var(--sp-8); display:flex; justify-content:space-between; align-items:center; font-size:var(--text-xs); } /* ─── Responsive ──────────────────────────────────────────────────────── */ @media (max-width:768px) { .hero__title { font-size:var(--text-3xl); } .hero__subtitle { font-size:var(--text-base); } .hero { padding:var(--sp-16) 0 var(--sp-12); } .search-bar { flex-direction:column; border-radius:var(--radius-lg); } .search-bar__btn { border-radius:0 0 var(--radius-lg) var(--radius-lg); padding:var(--sp-4); } .card-grid { grid-template-columns:1fr; } .category-grid { grid-template-columns:repeat(2, 1fr); } .usp-grid { grid-template-columns:1fr; } .profile-grid { grid-template-columns:1fr; } .profile-header__inner { flex-direction:column; align-items:center; text-align:center; } .sidebar-card { position:static; } .footer__grid { grid-template-columns:1fr 1fr; gap:var(--sp-8); } .footer__bottom { flex-direction:column; gap:var(--sp-4); text-align:center; } .header__nav { display:none; position:fixed; top:64px; left:0; right:0; bottom:0; background:rgba(255,255,255,0.98); backdrop-filter:blur(20px); flex-direction:column; padding:var(--sp-8) var(--sp-6); gap:var(--sp-1); z-index:99; } .header__nav.is-open { display:flex; animation:slideDown 0.25s var(--ease-out); } .header__nav .header__link { font-size:var(--text-lg); padding:var(--sp-4) 0; border-bottom:1px solid var(--n-100); } .header__nav .header__link--cta { text-align:center; margin-top:var(--sp-4); border-bottom:none; } .header__burger { display:flex; align-items:center; justify-content:center; } .trust-bar__inner { gap:var(--sp-6); } body.nav-open { overflow: hidden; } } @keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } } @media (max-width:480px) { .category-grid { grid-template-columns:1fr; } .container { padding:0 var(--sp-4); } .footer__grid { grid-template-columns:1fr; } .hero__title { font-size:var(--text-2xl); } } /* ─── Breadcrumbs ─────────────────────────────────────────────────────────── */ .breadcrumbs { padding-top:var(--sp-4); padding-bottom:var(--sp-4); font-size:var(--text-sm); color:var(--n-400); } .breadcrumbs__link { color:var(--n-400); transition:color var(--duration-fast) var(--ease-out); } .breadcrumbs__link:hover { color:var(--brand-primary); } .breadcrumbs__separator { margin:0 var(--sp-2); } /* Removed duplicate profile header */ /* ─── Review Cards ────────────────────────────────────────────────────────── */ .review-card { background: var(--n-0); border: 1px solid var(--n-100); border-radius: var(--radius-xl); padding: var(--sp-6) var(--sp-8); margin-bottom: var(--sp-5); position: relative; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02); transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); } .review-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); } .review-card::before { content: '“'; position: absolute; top: 10px; left: 16px; font-size: 80px; line-height: 1; color: var(--brand-primary-light); opacity: 0.2; font-family: Georgia, serif; } .review-card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-4); position: relative; z-index: 1; } .review-card__author-wrap { display: flex; align-items: center; gap: var(--sp-3); } .review-card__avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-primary-light), var(--brand-primary)); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 18px; } .review-card__author { font-weight: var(--weight-bold); color: var(--n-800); font-size: var(--text-base); display: block; } .review-card__date { font-size: var(--text-sm); color: var(--n-400); display: block; margin-top: 2px; } .review-card__text { color: var(--n-700); line-height: 1.6; font-size: var(--text-base); position: relative; z-index: 1; } /* ─── Sidebar Cards ───────────────────────────────────────────────────────── */ .sidebar-card__title { font-size:var(--text-lg); font-weight:var(--weight-bold); color:var(--n-800); margin-bottom:var(--sp-3); } .sidebar-card__address { display:flex; gap:var(--sp-3); color:var(--n-500); font-size:var(--text-sm); margin-bottom:var(--sp-4); } .sidebar-card__address svg { flex-shrink:0; margin-top:2px; } .sidebar-card__link { display:flex; align-items:center; gap:var(--sp-2); color:var(--brand-primary); font-size:var(--text-sm); margin-top:var(--sp-3); } .sidebar-card__link:hover { color:var(--brand-primary-hover); } .sidebar-card__link svg { width:16px; height:16px; flex-shrink:0; } /* ─── Listing Header ──────────────────────────────────────────────────────── */ .listing-header { background:var(--n-0); border-bottom:1px solid var(--n-100); padding:var(--sp-6) 0 var(--sp-8); } .listing-header__title { font-size:var(--text-2xl); font-weight:var(--weight-bold); color:var(--n-900); } .listing-header__count { display:inline-block; font-size:var(--text-sm); color:var(--brand-primary); font-weight:var(--weight-semibold); background:var(--brand-primary-light); padding:var(--sp-1) var(--sp-3); border-radius:var(--radius-full); margin-top:var(--sp-2); } .listing-header__intro { color:var(--n-400); margin-top:var(--sp-3); max-width:640px; } .tag--trust { background:var(--trust-light); color:var(--trust-text); } /* ─── Pagination ──────────────────────────────────────────────────────────── */ .pagination { display:flex; justify-content:center; gap:var(--sp-2); margin-top:var(--sp-12); padding-bottom:var(--sp-8); } .pagination__btn { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--n-500); background:var(--n-0); border:1px solid var(--n-100); transition:all var(--duration-fast) var(--ease-out); } .pagination__btn:hover { border-color:var(--brand-primary); color:var(--brand-primary); } .pagination__btn--active { background:var(--brand-primary); color:var(--n-0); border-color:var(--brand-primary); } /* ─── Form Inputs ─────────────────────────────────────────────────────────── */ .form-input { display:block; width:100%; padding:var(--sp-3) var(--sp-4); border:1px solid var(--n-200); border-radius:var(--radius-md); font-size:var(--text-sm); font-family:inherit; color:var(--n-800); background:var(--n-0); transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out); resize:vertical; } .form-input:focus { outline:none; border-color:var(--brand-primary); box-shadow:0 0 0 3px hsla(234,89%,56%,0.1); } .form-input::placeholder { color:var(--n-300); } /* ─── Search Autocomplete ─────────────────────────────────────────────────── */ .search-results { display:none; position:absolute; top:100%; left:0; right:0; background:var(--n-0); border:1px solid var(--n-100); border-radius:0 0 var(--radius-lg) var(--radius-lg); box-shadow:var(--shadow-lg); max-height:360px; overflow-y:auto; z-index:100; } .search-bar { position:relative; } .search-results__item { display:flex; justify-content:space-between; align-items:center; padding:var(--sp-4) var(--sp-6); border-bottom:1px solid var(--n-50); transition:background var(--duration-fast) var(--ease-out); color:var(--n-700); } .search-results__item:hover { background:var(--n-50); } .search-results__item strong { color:var(--n-800); } .search-results__item span { font-size:var(--text-sm); color:var(--n-400); } .search-results__empty { padding:var(--sp-6); text-align:center; color:var(--n-400); font-size:var(--text-sm); } /* ─── Register Hero ───────────────────────────────────────────────────────── */ .register-hero { background:linear-gradient(135deg,hsl(234,85%,25%) 0%,hsl(180,80%,30%) 100%); color:var(--n-0); padding:var(--sp-16) 0; text-align:center; } .register-hero__title { font-size:var(--text-3xl); font-weight:var(--weight-bold); margin-bottom:var(--sp-4); } .register-hero__subtitle { font-size:var(--text-lg); color:hsla(0,0%,100%,0.8); max-width:600px; margin:0 auto; } /* ─── Register Grid ───────────────────────────────────────────────────────── */ .register-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12); align-items:start; } .register-benefits__title { font-size:var(--text-xl); font-weight:var(--weight-bold); color:var(--n-800); margin-bottom:var(--sp-6); } /* ─── Benefit Cards ───────────────────────────────────────────────────────── */ .benefit-card { display:flex; gap:var(--sp-4); padding:var(--sp-5) 0; border-bottom:1px solid var(--n-100); } .benefit-card:last-child { border-bottom:none; } .benefit-card__icon { flex-shrink:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--brand-primary-light); color:var(--brand-primary); border-radius:var(--radius-md); } .benefit-card__name { font-weight:var(--weight-semibold); color:var(--n-800); margin-bottom:var(--sp-1); } .benefit-card__text { font-size:var(--text-sm); color:var(--n-500); line-height:var(--leading-normal); } /* ─── Register Form Card ──────────────────────────────────────────────────── */ .register-form-card { background:var(--n-0); border:1px solid var(--n-100); border-radius:var(--radius-lg); padding:var(--sp-8); box-shadow:var(--shadow-lg); } .register-form-card__title { font-size:var(--text-xl); font-weight:var(--weight-bold); color:var(--n-800); margin-bottom:var(--sp-2); } .register-form-card__subtitle { font-size:var(--text-sm); color:var(--n-400); margin-bottom:var(--sp-6); } /* ─── Form Elements ───────────────────────────────────────────────────────── */ .form-group { margin-bottom:var(--sp-4); } .form-label { display:block; font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--n-700); margin-bottom:var(--sp-2); } .form-hint { display:block; font-size:var(--text-xs); color:var(--n-300); margin-top:var(--sp-1); } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); } .form-legal { font-size:var(--text-xs); color:var(--n-300); margin-top:var(--sp-4); line-height:var(--leading-normal); } .form-legal a { color:var(--brand-primary); } .register-form__btn { width:100%; border-radius:var(--radius-md); padding:var(--sp-4); text-align:center; font-size:var(--text-base); font-weight:var(--weight-semibold); margin-top:var(--sp-2); } .register-success { text-align:center; padding:var(--sp-8) 0; } .register-success h3 { font-size:var(--text-xl); font-weight:var(--weight-bold); color:var(--n-800); margin:var(--sp-4) 0 var(--sp-2); } .register-success p { color:var(--n-500); } /* ─── Utility ─────────────────────────────────────────────────────────────── */ .u-hidden { display:none !important; } .honeypot { position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden; } /* ─── Footer Enhanced ─────────────────────────────────────────────────────── */ .footer__heading { font-weight:var(--weight-semibold); color:var(--n-200); margin-bottom:var(--sp-4); font-size:var(--text-sm); text-transform:uppercase; letter-spacing:0.05em; } .footer__list { list-style:none; padding:0; margin:0; } .footer__list li { margin-bottom:var(--sp-2); } .footer__list a { color:var(--n-400); font-size:var(--text-sm); transition:color var(--duration-fast) var(--ease-out); } .footer__list a:hover { color:var(--n-0); } /* ─── Responsive: Register ────────────────────────────────────────────────── */ @media (max-width:768px) { .register-grid { grid-template-columns:1fr; } .form-row { grid-template-columns:1fr; } } /* ─── Error Page ──────────────────────────────────────────────────────────── */ .error-page { padding:var(--sp-24) 0; } .error-page__inner { text-align:center; max-width:540px; margin:0 auto; } .error-page__code { font-size:8rem; font-weight:var(--weight-bold); line-height:1; background:var(--hero-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:var(--sp-4); } .error-page__title { font-size:var(--text-2xl); font-weight:var(--weight-bold); color:var(--n-800); margin-bottom:var(--sp-4); } .error-page__message { font-size:var(--text-md); color:var(--n-500); margin-bottom:var(--sp-8); line-height:var(--leading-relaxed); } .error-page__btn { display:inline-block; padding:var(--sp-4) var(--sp-8); background:var(--cta-gradient); color:var(--cta-text); font-weight:var(--weight-bold); border-radius:var(--radius-lg); box-shadow:var(--shadow-cta); transition:all var(--duration-fast) var(--ease-out); } .error-page__btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-xl); } /* ─── Legal Pages ─────────────────────────────────────────────────────────── */ .legal-page { padding:var(--sp-12) 0 var(--sp-24); } .legal-page__title { font-size:var(--text-3xl); font-weight:var(--weight-bold); color:var(--n-800); margin:var(--sp-6) 0 var(--sp-2); } .legal-page__subtitle { font-size:var(--text-md); color:var(--n-400); margin-bottom:var(--sp-10); } .legal-content { max-width:720px; } .legal-content h2 { font-size:var(--text-xl); font-weight:var(--weight-bold); color:var(--n-800); margin:var(--sp-10) 0 var(--sp-4); padding-bottom:var(--sp-2); border-bottom:1px solid var(--n-100); } .legal-content h3 { font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--n-700); margin:var(--sp-6) 0 var(--sp-3); } .legal-content p { font-size:var(--text-base); color:var(--n-600); line-height:var(--leading-relaxed); margin-bottom:var(--sp-4); } .legal-content ul { padding-left:var(--sp-6); margin-bottom:var(--sp-4); } .legal-content li { font-size:var(--text-base); color:var(--n-600); line-height:var(--leading-relaxed); margin-bottom:var(--sp-2); list-style:disc; } .legal-content strong { color:var(--n-700); } /* ─── Profile Layout Replaced ────────────────────────────────────────────── */ /* .profile-grid removed */ /* .profile-sidebar removed */ /* ─── Quick Actions ──────────────────────────────────────────────────────── */ .quick-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-8); margin-top: calc(var(--sp-6) * -1); position: relative; z-index: 10; } .quick-action-btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--n-700); transition: all var(--duration-fast) var(--ease-out); box-shadow: var(--shadow-sm); } .quick-action-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); } .quick-action-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .quick-action-btn--primary { background: var(--brand-primary); color: var(--n-0); border-color: var(--brand-primary); } .quick-action-btn--primary:hover { background: var(--brand-primary-hover); color: var(--n-0); border-color: var(--brand-primary-hover); } .sidebar-card { background:var(--n-0); border:1px solid var(--n-100); border-radius:var(--radius-xl); padding:var(--sp-8); margin-bottom:var(--sp-6); box-shadow:var(--shadow-sm); } .sidebar-card__title { font-size:var(--text-lg); font-weight:var(--weight-bold); color:var(--n-800); margin-bottom:var(--sp-2); } .sidebar-card__desc { font-size:var(--text-sm); color:var(--n-500); margin-bottom:var(--sp-6); line-height:var(--leading-relaxed); } .contact-info__item { display:flex; gap:var(--sp-3); align-items:flex-start; margin-bottom:var(--sp-4); font-size:var(--text-sm); color:var(--n-600); } .contact-info__item svg { flex-shrink:0; margin-top:2px; color:var(--brand-primary); } .contact-info__item a { color:var(--brand-primary); } .contact-info__item a:hover { text-decoration:underline; } /* ─── Tab Navigation ───────────────────────────────────────────────────────── */ .tab-list { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--n-200); margin-bottom: var(--sp-8); width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tab-list::-webkit-scrollbar { display: none; } .tab-list__btn { flex: 1 1 0; width: 100%; text-align: center; background: none; border: none; padding: var(--sp-3) var(--sp-4); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--n-500); cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--duration-fast) var(--ease-out); } .tab-list__btn:hover { color: var(--n-800); } .tab-list__btn[aria-selected="true"] { color: var(--brand-primary); border-bottom-color: var(--brand-primary); } .tab-panel[hidden] { display: none !important; } .tab-panel { animation: fadeIn 0.3s var(--ease-out); } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ─── Profile Utilities (replaces inline styles) ─────────────────────────── */ .agency-logo-placeholder { display:flex; align-items:center; justify-content:center; font-size:1.25rem; font-weight:700; color:var(--brand-primary); } .agency-logo-placeholder--lg { width:80px; height:80px; border-radius:var(--radius-lg); font-size:2rem; background:var(--brand-primary-light); } .section--alt { background:var(--n-50); } .section--tight { padding-top:var(--sp-8); } .section--profile { padding-top:var(--sp-10); } .mt-3 { margin-top:var(--sp-3); } .mb-3 { margin-bottom:var(--sp-3); } .mb-4 { margin-bottom:var(--sp-4); } .mb-6 { margin-bottom:var(--sp-6); } .w-full { width:100%; } .btn--block { width:100%; border-radius:var(--radius-md); padding:var(--sp-4); } .sidebar-card__subtitle { font-size:var(--text-sm); color:var(--n-400); margin-bottom:var(--sp-4); } .contact-success { color:var(--trust-text); padding:var(--sp-4); text-align:center; font-weight:600; } /* ─── Toast Notifications ────────────────────────────────────────────────── */ .toast { position:fixed; bottom:var(--sp-6); right:var(--sp-6); padding:var(--sp-4) var(--sp-6); background:var(--n-800); color:var(--n-0); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); font-size:var(--text-sm); font-weight:var(--weight-medium); z-index:9999; transform:translateY(120%); opacity:0; transition:all var(--duration-normal) var(--ease-out); } .toast--visible { transform:translateY(0); opacity:1; } .toast--success { background:hsl(142,71%,28%); } .toast--error { background:hsl(0,84%,45%); } /* ─── Rate Limit Message ─────────────────────────────────────────────────── */ .form-error { color:hsl(0,84%,45%); font-size:var(--text-sm); padding:var(--sp-3) var(--sp-4); background:hsl(0,84%,95%); border-radius:var(--radius-md); margin-bottom:var(--sp-4); border:1px solid hsl(0,84%,85%); } /* ─── Facts Grid (Agency quick stats) ────────────────────────────────────── */ .facts-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--sp-4); margin-bottom:var(--sp-10); } .facts-grid__item { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-5); background:var(--n-0); border:1px solid var(--n-100); border-radius:var(--radius-lg); transition:all var(--duration-normal) var(--ease-out); } .facts-grid__item:hover { border-color:var(--brand-primary-muted); transform:translateY(-2px); box-shadow:var(--shadow-sm); } .facts-grid__icon { width:44px; height:44px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .facts-grid__icon--brand { background:var(--brand-primary-light); color:var(--brand-primary); } .facts-grid__icon--trust { background:var(--trust-light); color:var(--trust-color); } .facts-grid__icon--cta { background:hsl(28,100%,94%); color:hsl(28,100%,45%); } .facts-grid__icon--neutral { background:var(--n-100); color:var(--n-500); } .facts-grid__label { font-size:var(--text-xs); color:var(--n-400); text-transform:uppercase; letter-spacing:0.05em; font-weight:var(--weight-medium); } .facts-grid__value { font-size:var(--text-base); font-weight:var(--weight-bold); color:var(--n-800); margin-top:2px; } @media (max-width:480px) { .facts-grid { grid-template-columns:1fr; } } /* ─── Rating Distribution Bars ───────────────────────────────────────────── */ /* ─── Review Filters ──────────────────────────────────────────────────────── */ .review-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); margin-bottom: var(--sp-8); } .review-filter { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: var(--n-50); border: 1px solid var(--n-200); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--n-600); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } .review-filter:hover:not([disabled]) { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--brand-primary-light); } .review-filter.active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--n-0); box-shadow: var(--shadow-sm); } .review-filter__count { opacity: 0.7; font-size: 0.9em; font-variant-numeric: tabular-nums; } /* ─── Portfolio Grid ─────────────────────────────────────────────────────── */ .portfolio-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--sp-5); } .portfolio-card { background:var(--n-0); border:1px solid var(--n-100); border-radius:var(--radius-lg); overflow:hidden; transition:all var(--duration-normal) var(--ease-out); } .portfolio-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--brand-primary-muted); } .portfolio-card__body { padding:var(--sp-5); } .portfolio-card__title { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--n-800); margin-bottom:var(--sp-2); } .portfolio-card__desc { font-size:var(--text-xs); color:var(--n-400); line-height:var(--leading-relaxed); margin-bottom:var(--sp-3); } .portfolio-card__link { display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--text-xs); color:var(--brand-primary); font-weight:var(--weight-medium); } .portfolio-card__link:hover { color:var(--brand-primary-hover); } .portfolio-card__placeholder { height:140px; background:linear-gradient(135deg, var(--brand-primary-light) 0%, var(--n-100) 100%); display:flex; align-items:center; justify-content:center; color:var(--brand-primary); opacity:0.5; } /* ─── Similar Agencies ───────────────────────────────────────────────────── */ .similar-section { background:var(--n-50); padding:var(--sp-16) 0; } .similar-section__title { font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--weight-bold); color:var(--n-800); margin-bottom:var(--sp-2); } .similar-section__subtitle { font-size:var(--text-sm); color:var(--n-400); margin-bottom:var(--sp-8); } .similar-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--sp-5); } /* ─── Review Stars (per review) ──────────────────────────────────────────── */ .review-card__stars { display:flex; gap:1px; margin-left:auto; } .review-card__star { width:14px; height:14px; color:var(--star-color); } .review-card__star--empty { color:var(--star-empty); } /* ─── Profile Header Stars ──────────────────────────────────────────────── */ .profile-stars { display:flex; gap:2px; } .profile-stars__star { width:20px; height:20px; color:var(--star-color); filter:drop-shadow(0 1px 2px rgba(0,0,0,0.1)); } .profile-stars__star--empty { color:var(--star-empty); filter:none; } .profile-stars__star--half { color:var(--star-color); } /* ─── Sidebar Phone ──────────────────────────────────────────────────────── */ .sidebar-card__phone { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) 0; font-size:var(--text-sm); color:var(--n-600); font-weight:var(--weight-medium); border-bottom:1px solid var(--n-50); } .sidebar-card__phone svg { flex-shrink:0; width:16px; height:16px; color:var(--trust-color); } /* ─── Pagination ─────────────────────────────────────────────────────────── */ .pagination { display:flex; justify-content:center; gap:var(--sp-2); margin-top:var(--sp-8); padding:var(--sp-4) 0; } .pagination__btn { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--n-600); background:var(--n-0); border:1px solid var(--n-200); transition:all var(--duration-fast) var(--ease-out); cursor:pointer; } .pagination__btn:hover { border-color:var(--brand-primary); color:var(--brand-primary); background:var(--brand-primary-light); } .pagination__btn--active { background:var(--brand-primary); color:var(--n-0); border-color:var(--brand-primary); font-weight:var(--weight-bold); pointer-events:none; } /* ─── Body Scroll Lock (mobile nav open) ─────────────────────────────────── */ body.nav-open { overflow:hidden; } /* ─── Utility Classes ────────────────────────────────────────────────────── */ .u-hidden { display:none !important; } .mt-3 { margin-top:var(--sp-3); } .mb-3 { margin-bottom:var(--sp-3); } .mb-4 { margin-bottom:var(--sp-4); } .mb-6 { margin-bottom:var(--sp-6); } /* ─── Honeypot (invisible to real users) ─────────────────────────────────── */ .honeypot { position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; width:0; overflow:hidden; pointer-events:none; } /* ─── Form Inputs ────────────────────────────────────────────────────────── */ .form-input { display:block; width:100%; padding:var(--sp-3) var(--sp-4); font-size:var(--text-base); font-family:var(--font-primary); border:1px solid var(--n-200); border-radius:var(--radius-md); background:var(--n-0); color:var(--n-800); transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .form-input:focus { outline:none; border-color:var(--brand-primary); box-shadow:0 0 0 3px var(--brand-primary-light); } textarea.form-input { resize:vertical; min-height:80px; } .btn--block { width:100%; } /* ─── Contact Success ────────────────────────────────────────────────────── */ .contact-success { text-align:center; padding:var(--sp-6); color:var(--trust-text); background:var(--trust-light); border-radius:var(--radius-md); font-weight:var(--weight-semibold); } /* ─── Error Page ─────────────────────────────────────────────────────────── */ .error-page { min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; } .error-page__inner { max-width:480px; } .error-page__code { font-size:var(--text-5xl); font-weight:var(--weight-bold); color:var(--brand-primary-muted); line-height:1; margin-bottom:var(--sp-4); } .error-page__title { font-size:var(--text-2xl); font-weight:var(--weight-bold); color:var(--n-800); margin-bottom:var(--sp-3); } .error-page__message { font-size:var(--text-md); color:var(--n-500); line-height:var(--leading-relaxed); margin-bottom:var(--sp-8); } .error-page__btn { display:inline-block; padding:var(--sp-3) var(--sp-8); background:var(--cta-gradient); color:var(--cta-text); font-weight:var(--weight-bold); border-radius:var(--radius-full); transition:filter var(--duration-fast); } .error-page__btn:hover { filter:brightness(1.08); color:var(--cta-text); } /* ─── Search Results Dropdown ────────────────────────────────────────────── */ .search-results { position:absolute; top:100%; left:0; right:0; background:var(--n-0); border:1px solid var(--n-200); border-radius:0 0 var(--radius-lg) var(--radius-lg); box-shadow:var(--shadow-lg); z-index:50; max-height:320px; overflow-y:auto; } .search-results__item { display:flex; flex-direction:column; gap:2px; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--n-50); transition:background var(--duration-fast); } .search-results__item:hover { background:var(--brand-primary-light); } .search-results__item strong { font-size:var(--text-sm); color:var(--n-800); } .search-results__item span { font-size:var(--text-xs); color:var(--n-400); } .search-results__empty { padding:var(--sp-4); text-align:center; color:var(--n-400); font-size:var(--text-sm); } /* ─── Register Page: Hero ────────────────────────────────────────────────── */ .register-hero { background:var(--hero-gradient); color:var(--n-0); padding:var(--sp-16) 0 var(--sp-12); text-align:center; } .register-hero__inner { max-width:640px; margin:0 auto; } .register-hero__title { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:var(--weight-bold); line-height:var(--leading-tight); margin-bottom:var(--sp-4); } .register-hero__subtitle { font-size:var(--text-md); opacity:0.85; line-height:var(--leading-relaxed); } /* ─── Register Page: Grid Layout ─────────────────────────────────────────── */ .register-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:var(--sp-10); align-items:start; } @media (max-width:768px) { .register-grid { grid-template-columns:1fr; } } /* ─── Register Page: Benefits ────────────────────────────────────────────── */ .register-benefits__title { font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--weight-bold); color:var(--n-800); margin-bottom:var(--sp-6); } .benefit-card { display:flex; gap:var(--sp-4); padding:var(--sp-5); border-radius:var(--radius-lg); transition:background var(--duration-fast); } .benefit-card:hover { background:var(--n-50); } .benefit-card__icon { flex-shrink:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); background:var(--brand-primary-light); color:var(--brand-primary); } .benefit-card__name { font-size:var(--text-base); font-weight:var(--weight-semibold); color:var(--n-800); margin-bottom:var(--sp-1); } .benefit-card__text { font-size:var(--text-sm); color:var(--n-500); line-height:var(--leading-relaxed); } /* ─── Register Page: Form Card ───────────────────────────────────────────── */ .register-form-card { background:var(--n-0); border:1px solid var(--n-100); border-radius:var(--radius-xl); padding:var(--sp-8); box-shadow:var(--shadow-lg); position:relative; } .register-form-card__title { font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--weight-bold); color:var(--n-800); margin-bottom:var(--sp-2); } .register-form-card__subtitle { font-size:var(--text-sm); color:var(--n-400); margin-bottom:var(--sp-6); } /* ─── Register Page: Form Elements ───────────────────────────────────────── */ .form-group { margin-bottom:var(--sp-5); } .form-label { display:block; font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--n-700); margin-bottom:var(--sp-2); } .form-hint { display:block; font-size:var(--text-xs); color:var(--n-400); margin-top:var(--sp-1); } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); } @media (max-width:480px) { .form-row { grid-template-columns:1fr; } } .form-legal { font-size:var(--text-xs); color:var(--n-400); line-height:var(--leading-relaxed); margin-top:var(--sp-4); } .form-legal a { color:var(--brand-primary); text-decoration:underline; } .form-legal a:hover { color:var(--brand-primary-hover); } .register-form__btn { width:100%; margin-top:var(--sp-2); } /* ─── Register Page: Success Message ─────────────────────────────────────── */ .register-success { text-align:center; padding:var(--sp-8) var(--sp-6); } .register-success svg { margin:0 auto var(--sp-4); display:block; } .register-success h3 { font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--weight-bold); color:var(--n-800); margin-bottom:var(--sp-3); } .register-success p { font-size:var(--text-base); color:var(--n-500); line-height:var(--leading-relaxed); } /* ─── Legal Pages (Impressum, Datenschutz) ───────────────────────────────── */ .legal-page { padding:var(--sp-8) 0 var(--sp-16); } .legal-page .container { max-width:var(--max-w-narrow); } .legal-page__title { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:var(--weight-bold); color:var(--n-800); margin-bottom:var(--sp-2); line-height:var(--leading-tight); } .legal-page__subtitle { font-size:var(--text-md); color:var(--n-400); margin-bottom:var(--sp-8); } .legal-content { color:var(--n-600); line-height:var(--leading-relaxed); } .legal-content h2 { font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--weight-bold); color:var(--n-800); margin-top:var(--sp-10); margin-bottom:var(--sp-4); padding-bottom:var(--sp-2); border-bottom:1px solid var(--n-100); } .legal-content h3 { font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--n-700); margin-top:var(--sp-6); margin-bottom:var(--sp-3); } .legal-content p { margin-bottom:var(--sp-4); } .legal-content ul { margin-bottom:var(--sp-4); padding-left:var(--sp-6); } .legal-content ul li { position:relative; padding-left:var(--sp-4); margin-bottom:var(--sp-2); } .legal-content ul li::before { content:'•'; position:absolute; left:0; color:var(--brand-primary); font-weight:var(--weight-bold); } .legal-content a { color:var(--brand-primary); text-decoration:underline; text-underline-offset:2px; } .legal-content a:hover { color:var(--brand-primary-hover); } .legal-content strong { color:var(--n-700); } /* ─── Empty State ─────────────────────────────────────────────────────────── */ .empty-state { text-align:center; padding:var(--sp-16) var(--sp-6); } .empty-state p { font-size:var(--text-lg); color:var(--n-400); margin-bottom:var(--sp-6); } .empty-state__cta { display:inline-block; padding:var(--sp-3) var(--sp-6); background:var(--cta-gradient); color:var(--cta-text); font-weight:var(--weight-bold); border-radius:var(--radius-lg); text-decoration:none; transition:all var(--duration-fast) var(--ease-out); box-shadow:var(--shadow-cta); } .empty-state__cta:hover { filter:brightness(1.08); box-shadow:0 6px 20px var(--cta-glow); transform:translateY(-1px); } /* ─── Star Picker (Review Form) ───────────────────────────────────────────── */ .star-picker { display:flex; align-items:center; gap:var(--sp-3); } .star-picker__label { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--n-500); } .star-picker__stars { display:flex; gap:var(--sp-1); } .star-picker__star { all:unset; cursor:pointer; width:28px; height:28px; color:var(--n-200); transition:color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .star-picker__star:hover { transform:scale(1.15); } .star-picker__star.active { color:#f59e0b; } .star-picker__star:hover, .star-picker__star:hover ~ .star-picker__star { color:#fbbf24; } .star-picker__stars:hover .star-picker__star { color:#fbbf24; } .star-picker__stars:hover .star-picker__star:hover ~ .star-picker__star { color:var(--n-200); } .star-picker__star svg { width:100%; height:100%; } /* ─── Button Variants ─────────────────────────────────────────────────────── */ .btn--outline { background:transparent !important; border:2px solid var(--brand-primary) !important; color:var(--brand-primary) !important; box-shadow:none !important; } .btn--outline:hover { background:var(--brand-primary) !important; color:white !important; } .btn--brand { background:var(--brand-gradient) !important; } .btn--brand:hover { filter:brightness(1.1); } /* ─── Sidebar Card Highlight ──────────────────────────────────────────────── */ .sidebar-card--highlight { border:2px solid var(--brand-primary); background:linear-gradient(135deg, rgba(99,102,241,0.04), rgba(139,92,246,0.04)); } /* ─── City Pills ──────────────────────────────────────────────────────────── */ .city-pills { display:flex; flex-wrap:wrap; gap:var(--sp-2); } .city-pill { display:inline-flex; align-items:center; gap:var(--sp-1-5); padding:var(--sp-2) var(--sp-4); background:white; border:1px solid var(--card-border); border-radius:var(--radius-full); color:var(--n-600); font-size:var(--text-sm); font-weight:var(--weight-medium); text-decoration:none; transition:all var(--duration-fast) var(--ease-out); box-shadow:0 1px 3px rgba(0,0,0,0.06); } .city-pill:hover { background:var(--brand-primary); color:white; border-color:var(--brand-primary); transform:translateY(-1px); box-shadow:0 4px 12px rgba(99,102,241,0.25); } .city-pill:hover svg { color:white; } .city-pill svg { color:var(--brand-primary); flex-shrink:0; } .city-pill__count { background:var(--n-100); color:var(--n-500); padding:1px 8px; border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:var(--weight-semibold); } .city-pill:hover .city-pill__count { background:rgba(255,255,255,0.25); color:white; } /* ─── City Links Section (Category Page) ──────────────────────────────────── */ .city-links-section { margin-top:var(--sp-10); padding-top:var(--sp-8); border-top:1px solid var(--card-border); } .city-links-section__title { font-size:var(--text-lg); font-weight:var(--weight-bold); color:var(--n-700); margin-bottom:var(--sp-4); } /* ─── FAQ Accordion ───────────────────────────────────────────────────────── */ .faq-list { margin: 0 auto; width: 100%; } .faq-item { background:var(--n-0); border:1px solid var(--n-100); border-radius:var(--radius-lg); margin-bottom:var(--sp-3); overflow:hidden; transition:border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); } .faq-item:hover { border-color:var(--brand-primary-muted); } .faq-item[open] { border-color:var(--brand-primary); box-shadow:0 4px 16px rgba(99,102,241,0.08); } .faq-item__question { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-5) var(--sp-6); font-size:var(--text-base); font-weight:var(--weight-semibold); color:var(--n-700); cursor:pointer; list-style:none; user-select:none; transition:color var(--duration-fast) var(--ease-out); } .faq-item__question::-webkit-details-marker { display:none; } .faq-item__question::marker { display:none; content:''; } .faq-item__question::after { content:''; width:20px; height:20px; flex-shrink:0; margin-left:var(--sp-4); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:contain; transition:transform var(--duration-normal) var(--ease-out); } .faq-item[open] .faq-item__question::after { transform:rotate(180deg); } .faq-item[open] .faq-item__question { color:var(--brand-primary); } .faq-item__answer { padding:0 var(--sp-6) var(--sp-6); font-size:var(--text-sm); line-height:var(--leading-relaxed); color:var(--n-500); animation:faqSlideIn var(--duration-normal) var(--ease-out); } @keyframes faqSlideIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } } /* ─── CTA Section ─────────────────────────────────────────────────────────── */ .section--cta { background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); color:white; padding:var(--sp-16) 0; } .section--cta .section__title { color:white; } .section--cta .section__subtitle { color:rgba(255,255,255,0.85); } /* ─── Listing Layout (Sidebar + Grid) ────────────────────────────────────── */ .listing-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-8); align-items: start; } @media (max-width: 900px) { .listing-layout { grid-template-columns: 1fr; } .listing-sidebar { margin-bottom: var(--sp-6); } /* Show inline on mobile for now */ } .filter-sidebar { background: var(--n-0); border: 1px solid var(--n-100); border-radius: var(--radius-lg); padding: var(--sp-5); position: sticky; top: 88px; } .filter-sidebar__title { font-size: var(--text-lg); font-weight: var(--weight-bold); margin-bottom: var(--sp-4); color: var(--n-800); } .filter-group { margin-bottom: var(--sp-5); } .filter-group__label { display: block; font-weight: var(--weight-semibold); font-size: var(--text-sm); margin-bottom: var(--sp-2); color: var(--n-700); } .filter-group select, .filter-group input[type="number"] { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--n-200); border-radius: var(--radius-md); font-size: var(--text-sm); outline: none; background: var(--n-0); color: var(--n-800); } .filter-group select:focus, .filter-group input:focus { border-color: var(--brand-primary); } /* ─── Skip Link (Accessibility) ──────────────────────────────────────── */ .skip-link { position:absolute; top:-100%; left:var(--sp-4); padding:var(--sp-3) var(--sp-6); background:var(--brand-primary); color:var(--n-0); border-radius:0 0 var(--radius-md) var(--radius-md); font-size:var(--text-sm); font-weight:var(--weight-bold); z-index:9999; transition:top var(--duration-fast) var(--ease-out); } .skip-link:focus { top:0; } /* ─── Focus Visible (Keyboard Navigation) ────────────────────────────── */ :focus-visible { outline:none; box-shadow:var(--focus-ring); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); } .search-bar__btn:focus-visible, .header__link--cta:focus-visible { box-shadow:0 0 0 3px rgba(255,255,255,0.5); } /* ─── Scroll to Top ──────────────────────────────────────────────────── */ .scroll-top { position:fixed; bottom:var(--sp-6); right:var(--sp-6); width:44px; height:44px; border-radius:var(--radius-full); background:var(--n-0); border:1px solid var(--n-200); box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:center; color:var(--n-500); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(12px); transition:all var(--duration-normal) var(--ease-out); z-index:90; } .scroll-top:hover { background:var(--brand-primary); color:var(--n-0); border-color:var(--brand-primary); box-shadow:var(--shadow-lg); transform:translateY(-2px); } .scroll-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); } /* ─── Toast Notifications ────────────────────────────────────────────── */ #toast-container { position:fixed; bottom:var(--sp-6); left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:var(--sp-3); align-items:center; pointer-events:none; } .toast { padding:var(--sp-4) var(--sp-6); background:var(--n-800); color:var(--n-0); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); font-size:var(--text-sm); font-weight:var(--weight-medium); pointer-events:auto; opacity:0; transform:translateY(16px); animation:toastIn var(--duration-normal) var(--ease-out) forwards; } .toast--success { background:hsl(142,71%,28%); } .toast--error { background:hsl(0,84%,45%); } @keyframes toastIn { to { opacity:1; transform:translateY(0); } } @keyframes toastOut { to { opacity:0; transform:translateY(16px); } } /* ─── Skeleton Loading ───────────────────────────────────────────────── */ .skeleton { background:linear-gradient(90deg, var(--n-100) 25%, var(--n-50) 50%, var(--n-100) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--radius-md); } @keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } } /* ─── Share Buttons ──────────────────────────────────────────────────── */ .share-bar { display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-4); } .share-bar__label { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--n-500); } .share-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius-full); border:1px solid var(--n-200); color:var(--n-500); cursor:pointer; transition:all var(--duration-fast) var(--ease-out); background:var(--n-0); } .share-btn:hover { background:var(--brand-primary); color:var(--n-0); border-color:var(--brand-primary); transform:scale(1.1); } .share-btn svg { width:16px; height:16px; } /* ─── Filter Chips ───────────────────────────────────────────────────── */ .filter-chips { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-4); } .filter-chip { display:inline-flex; align-items:center; gap:var(--sp-1); padding:var(--sp-1) var(--sp-3); background:var(--brand-primary-light); color:var(--brand-primary); font-size:var(--text-xs); font-weight:var(--weight-semibold); border-radius:var(--radius-full); text-decoration:none; transition:all var(--duration-fast) var(--ease-out); } .filter-chip:hover { background:var(--brand-primary); color:var(--n-0); } .filter-chip__remove { display:inline-flex; margin-left:var(--sp-1); font-size:var(--text-sm); line-height:1; } /* ─── Sort Select ────────────────────────────────────────────────────── */ .sort-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-6); } .sort-bar__label { font-size:var(--text-sm); color:var(--n-400); } .sort-bar select { padding:var(--sp-2) var(--sp-3); border:1px solid var(--n-200); border-radius:var(--radius-md); font-size:var(--text-sm); background:var(--n-0); color:var(--n-700); cursor:pointer; } /* ─── Print Styles ───────────────────────────────────────────────────── */ @media print { .header, .footer, .scroll-top, #toast-container, .search-bar, .trust-bar, .filter-sidebar, .sidebar-card, .share-bar, .pagination, .header__burger, #contact-form, #review-form, #claim-form, .section--cta { display:none !important; } body { background:white; color:black; font-size:12pt; } .container { max-width:100%; padding:0; } .profile-grid { grid-template-columns:1fr; } a { color:inherit; text-decoration:underline; } a[href]::after { content:' (' attr(href) ')'; font-size:0.8em; color:#666; } } /* ─── Footer Brand ───────────────────────────────────────────────────── */ .footer__brand { font-size:var(--text-lg); font-weight:var(--weight-bold); color:var(--n-0); margin-bottom:var(--sp-3); } .footer__desc { font-size:var(--text-sm); color:var(--n-400); line-height:var(--leading-normal); } /* ─── Empty State ────────────────────────────────────────────────────── */ .empty-state { text-align:center; padding:var(--sp-16) var(--sp-8); } .empty-state p { font-size:var(--text-lg); color:var(--n-400); margin-bottom:var(--sp-6); } .empty-state__cta { display:inline-block; padding:var(--sp-3) var(--sp-8); background:var(--cta-gradient); color:var(--cta-text); border-radius:var(--radius-full); font-weight:var(--weight-semibold); text-decoration:none; box-shadow:var(--shadow-cta); transition:all var(--duration-fast) var(--ease-out); } .empty-state__cta:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); } /* ─── Search Results Active (keyboard nav) ───────────────────────────── */ .search-results__item.is-active { background:var(--brand-primary-light); } /* ─── Admin Dashboard ────────────────────────────────────────────────── */ .admin-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:var(--sp-4); margin-bottom:var(--sp-8); } .admin-stat-card { background:linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); color:white; border-radius:var(--radius-lg); padding:var(--sp-6); text-align:center; box-shadow:var(--shadow-md); } .admin-stat-card__value { display:block; font-size:2.5rem; font-weight:var(--weight-bold); line-height:1; } .admin-stat-card__label { display:block; font-size:var(--text-sm); opacity:0.85; margin-top:var(--sp-2); } .admin-section-title { font-size:var(--text-xl); font-weight:var(--weight-semibold); color:var(--n-900); margin-bottom:var(--sp-6); padding-bottom:var(--sp-3); border-bottom:2px solid var(--n-100); } .admin-empty { text-align:center; padding:var(--sp-12) var(--sp-8); background:var(--n-50); border-radius:var(--radius-lg); } .admin-empty p { font-size:var(--text-lg); color:var(--n-500); } .admin-reviews { display:flex; flex-direction:column; gap:var(--sp-4); } .admin-review-card { background:white; border:1px solid var(--n-200); border-radius:var(--radius-lg); padding:var(--sp-5); transition:border-color var(--duration-fast) var(--ease-out); } .admin-review-card:hover { border-color:var(--brand-primary-light); } .admin-review-card__header { margin-bottom:var(--sp-3); } .admin-review-card__agency { font-size:var(--text-lg); font-weight:var(--weight-semibold); color:var(--n-900); margin-bottom:var(--sp-1); } .admin-review-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); font-size:var(--text-sm); color:var(--n-500); } .admin-review-card__rating { color:var(--brand-secondary); } .admin-review-card__sep { opacity:0.3; } .admin-review-card__text { color:var(--n-700); line-height:var(--leading-relaxed); margin-bottom:var(--sp-4); } .admin-review-card__text--empty { color:var(--n-400); font-style:italic; } .admin-review-card__actions { display:flex; gap:var(--sp-3); } .admin-btn { display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-4); border:none; border-radius:var(--radius-sm); font-size:var(--text-sm); font-weight:var(--weight-medium); cursor:pointer; transition:all var(--duration-fast) var(--ease-out); } .admin-btn--approve { background:var(--trust-bg); color:var(--trust-text); } .admin-btn--approve:hover { background:var(--trust-color); color:white; } .admin-btn--reject { background:var(--urgency-light); color:var(--urgency-color); } .admin-btn--reject:hover { background:var(--urgency-color); color:white; } /* ─── Sort Bar Select ────────────────────────────────────────────────── */ .sort-bar select { appearance:none; background:white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center; border:1px solid var(--n-200); border-radius:var(--radius-sm); padding:var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-3); font-size:var(--text-sm); color:var(--n-700); cursor:pointer; transition:border-color var(--duration-fast) var(--ease-out); } .sort-bar select:hover { border-color:var(--brand-primary); } .sort-bar select:focus-visible { outline:var(--focus-ring); } /* ─── Scroll Reveal Animations ───────────────────────────────────────── */ .reveal { opacity:0; transform:translateY(24px); transition:opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .reveal.is-visible { opacity:1; transform:translateY(0); } .reveal--delay-1 { transition-delay:0.1s; } .reveal--delay-2 { transition-delay:0.2s; } .reveal--delay-3 { transition-delay:0.3s; } /* ─── Listing Header Intro ───────────────────────────────────────────── */ .listing-header__intro { color:var(--n-500); font-size:var(--text-base); line-height:var(--leading-relaxed); margin-top:var(--sp-3); max-width:640px; }