/* =========================================================== Mersin Taksi — Yeniden Tasarım Stil Sistemi Modern & Sade tema — sarı/siyah taksi rengi paleti =========================================================== */ /* Fontlar HTML içinde preconnect + ile yüklenir. CSS @import kullanılmıyor: @import, tarayıcının önce style.css'i indirip ayrıştırmasını, ancak ondan sonra font isteğini başlatmasını zorlar (render-blocking zincir) ve LCP'yi geciktirir. */ :root{ --yellow: #FFC72C; --yellow-dark: #E6A800; /* yalnızca dolgu/arka plan için — metin için kullanma */ --link: #8F6300; /* beyaz üzerinde 5.31:1 — WCAG AA */ --ink: #16171B; --ink-soft: #33343B; --gray-700: #4B4D56; --gray-500: #686A76; /* beyaz 5.37:1, gri-100 4.92:1 — WCAG AA */ --gray-400: #92949E; /* koyu zemin üzerinde 5.93:1 */ --gray-300: #D8D9E0; --gray-100: #F4F5F8; --paper: #FFFFFF; --green: #17843A; /* beyaz metinle 4.77:1 — WCAG AA */ --green-dark: #11692D; --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; --shadow-sm: 0 2px 8px rgba(22,23,27,.06); --shadow-md: 0 8px 24px rgba(22,23,27,.10); --shadow-lg: 0 20px 48px rgba(22,23,27,.16); --container: 1180px; --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-head: 'Poppins', var(--font-body); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } /* Hareket hassasiyeti olan kullanıcılar için animasyonları kapat (WCAG 2.3.3) */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* Klavye ile gezinen kullanıcılar için her zaman görünür odak halkası (WCAG 2.4.7). Fare tıklamalarında görünmez, yalnızca klavyede çıkar. */ :focus-visible{ outline:3px solid var(--link); outline-offset:2px; border-radius:4px; } /* Koyu zeminlerde odak halkası sarı olsun ki görünür kalsın */ .site-footer :focus-visible, .cta-band :focus-visible, .hero :focus-visible{ outline-color:var(--yellow); } /* İçeriğe atla bağlantısı — klavye kullanıcıları menüyü her sayfada yeniden gezmek zorunda kalmasın (WCAG 2.4.1) */ .skip-link{ position:absolute; top:0; left:0; z-index:999; background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 var(--radius-sm) 0; font-weight:700; transform:translateY(-120%); } .skip-link:focus{ transform:translateY(0); } svg{ width:1em; height:1em; flex-shrink:0; vertical-align:-0.15em; } body{ margin:0; font-family:var(--font-body); color:var(--ink-soft); background:var(--paper); line-height:1.65; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3,h4{ font-family:var(--font-head); color:var(--ink); line-height:1.2; margin:0 0 .5em; font-weight:700; } h1{ font-size:clamp(2rem,4.2vw,3.1rem); font-weight:800; } h2{ font-size:clamp(1.5rem,2.8vw,2.1rem); } h3{ font-size:1.2rem; } p{ margin:0 0 1em; } ul{ margin:0; padding:0; } .container{ max-width:var(--container); margin:0 auto; padding:0 24px; } .section{ padding:72px 0; } .section-alt{ background:var(--gray-100); } .eyebrow{ display:inline-block; font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--link); background:rgba(255,199,44,.18); padding:6px 14px; border-radius:999px; margin-bottom:14px; } .lead{ font-size:1.15rem; color:var(--gray-700); max-width:62ch; } .center{ text-align:center; margin-left:auto; margin-right:auto; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-weight:700; font-size:.98rem; padding:14px 26px; border-radius:999px; border:2px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; white-space:nowrap; } .btn:hover{ transform:translateY(-2px); } .btn-primary{ background:var(--yellow); color:var(--ink); box-shadow:var(--shadow-sm); } .btn-primary:hover{ background:var(--yellow-dark); box-shadow:var(--shadow-md); } .btn-dark{ background:var(--ink); color:#fff; } .btn-dark:hover{ background:#000; box-shadow:var(--shadow-md); } .btn-outline{ border-color:var(--ink); color:var(--ink); background:transparent; } .btn-outline:hover{ background:var(--ink); color:#fff; } .btn-whatsapp{ background:var(--green); color:#fff; } .btn-whatsapp:hover{ background:var(--green-dark); box-shadow:var(--shadow-md); } .btn-block{ width:100%; } .btn-sm{ padding:10px 18px; font-size:.88rem; } .cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; } /* ---------- Header ---------- */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--gray-300); } .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 24px; } .brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:800; font-size:1.28rem; color:var(--ink); } .brand-badge{ width:40px; height:40px; border-radius:11px; background:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .brand-badge svg{ width:24px; height:24px; } .main-nav{ display:flex; align-items:center; gap:2px; } .main-nav a{ font-weight:600; font-size:.94rem; color:var(--ink-soft); padding:10px 14px; border-radius:999px; transition:background .15s ease, color .15s ease; } .main-nav a:hover, .main-nav a.active{ background:var(--gray-100); color:var(--ink); } .header-cta{ display:flex; align-items:center; gap:10px; } .header-phone{ display:flex; align-items:center; gap:8px; font-weight:800; color:var(--ink); font-size:.98rem; } .header-phone svg{ width:18px; height:18px; color:var(--link); } /* Ekran okuyucuya özel metin — görsel olarak gizli, erişilebilir kalır */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* Menü toggle'ı: display:none klavyeyle odaklanamaz, bu yüzden mobilde görsel olarak gizli ama odaklanabilir kalmalı (aşağıdaki media query). Masaüstünde menü zaten tamamen görünür; toggle'ın odak sırasında yer kaplamaması için tamamen gizli. */ .nav-toggle{ display:none; } .nav-toggle-label{ display:none; width:44px; height:44px; border-radius:12px; background:var(--gray-100); align-items:center; justify-content:center; cursor:pointer; } .nav-toggle-label svg{ width:22px; height:22px; } @media (max-width: 940px){ .main-nav{ position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; align-items:stretch; padding:10px 16px 18px; border-bottom:1px solid var(--gray-300); box-shadow:var(--shadow-md); max-height:0; overflow:hidden; transition:max-height .25s ease; } .main-nav a{ padding:12px 10px; border-radius:10px; } .nav-toggle{ display:block; position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none; } .nav-toggle:checked ~ .main-nav{ max-height:480px; } .nav-toggle-label{ display:flex; } /* Klavyeyle toggle'a gelindiğinde görünür geri bildirim */ .nav-toggle:focus-visible ~ .header-cta .nav-toggle-label{ outline:3px solid var(--link); outline-offset:2px; } /* Mobilde metin gizlenince geriye sadece 18px ikon kalıyordu; bu, en kritik dönüşüm noktası (telefon) için çok küçük bir hedefti. */ .header-phone span{ display:none; } .header-phone{ width:44px; height:44px; border-radius:12px; background:var(--gray-100); justify-content:center; } .header-phone svg{ width:20px; height:20px; } /* Mobilde "Hemen Ara" metin butonu hem header'ı taşırıyor hem de alttaki sabit çubuktaki "Ara" butonuyla tekrar ediyordu. */ .header-cta .btn-primary.btn-sm{ display:none; } } /* ---------- Breadcrumb ---------- */ .breadcrumb{ font-size:.85rem; color:var(--gray-500); margin-bottom:18px; display:flex; flex-wrap:wrap; gap:6px; } .breadcrumb a{ color:var(--gray-700); font-weight:600; } .breadcrumb a:hover{ color:var(--link); } /* ---------- Hero (home) ---------- */ /* Full-bleed fotoğraf arka plan + üzerine bindirilmiş metin. Fotoğraf ::before katmanında (WebP/JPEG image-set ile), okunabilirlik için koyu bir gradyan scrim ::after katmanında. İçerik (.container) her ikisinin üzerinde z-index ile durur. Metin rengi koyu fotoğraf üzerinde olduğu için beyaz/açık tona çevrildi; kontrast oranları WCAG AA için aşağıda kontrol edilmiştir. */ .hero{ position:relative; overflow:hidden; isolation:isolate; color:#fff; padding:112px 0 72px; min-height:600px; background:#0A0B0D; /* görsel yüklenmeden önce / başarısız olursa yedek zemin */ } .hero::before{ content:''; position:absolute; inset:0; z-index:-2; /* WebP destekleyen tarayıcılar daha küçük dosyayı alır; desteklemeyenler JPEG'e düşer. image-set bilinmiyorsa ilk satır devreye girer. */ background:#0A0B0D url('hero-taxi.jpg') center 55% / cover no-repeat; background-image:image-set(url('hero-taxi.avif') type('image/avif'), url('hero-taxi.webp') type('image/webp'), url('hero-taxi.jpg') type('image/jpeg')); background-image:-webkit-image-set(url('hero-taxi.avif') type('image/avif'), url('hero-taxi.webp') type('image/webp'), url('hero-taxi.jpg') type('image/jpeg')); } .hero::after{ content:''; position:absolute; inset:0; z-index:-1; /* Sol taraf (metnin durduğu yer) koyu, sağa doğru fotoğraf daha görünür. */ background:linear-gradient(100deg, rgba(8,9,11,.90) 0%, rgba(8,9,11,.80) 34%, rgba(8,9,11,.52) 58%, rgba(8,9,11,.22) 78%, rgba(8,9,11,.05) 100%), linear-gradient(0deg, rgba(8,9,11,.55) 0%, rgba(8,9,11,0) 26%); } .hero .container{ position:relative; } .hero-grid{ display:grid; grid-template-columns:minmax(0,640px); gap:48px; align-items:center; } .hero .eyebrow{ background:rgba(255,255,255,.14); color:var(--yellow); } .hero h1{ margin-bottom:16px; text-wrap:balance; color:#fff; } .hero .lead{ color:#F0F0F3; max-width:56ch; } /* Hero'daki Ara/WhatsApp butonları site genelindeki .btn'den daha ince — tam genişlikteki fotoğraf arka planın üzerinde daha kaba duruyorlardı. Asıl kabalık nedeni: .btn, body'nin satır yüksekliğini (1.65) miras alıyordu — bir metin paragrafı için uygun ama dolgulu bir hap buton için gereksiz yükseklik ekliyordu. line-height:1 ile düzeltildi. */ .hero .cta-row .btn{ padding:9px 20px; font-size:.9rem; line-height:1; } /* ---------- Renkli rozet hapları (genel amaçlı; sayfanın herhangi bir bölümünde kullanılabilir — bkz. anasayfa "Neden Biz" bölümü) ---------- */ .badge-row{ display:flex; flex-wrap:wrap; gap:14px; } .badge-pill{ display:flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; font-size:.95rem; font-weight:800; box-shadow:var(--shadow-sm); } .badge-pill svg{ width:18px; height:18px; } .badge-pill-yellow{ background:var(--yellow); color:var(--ink); } .badge-pill-yellow svg{ color:var(--ink); } .badge-pill-green{ background:var(--green); color:#fff; } .badge-pill-green svg{ color:#fff; } .badge-pill-ink{ background:var(--ink); color:#fff; } .badge-pill-ink svg{ color:var(--yellow); } @media (max-width: 900px){ /* Mobilde fotoğraf telefon ekranını tamamen kaplasın diye hero tam ekran yüksekliğinde. svh, adres çubuğu açılıp kapandığında sıçramayı önler; onu desteklemeyen tarayıcılar bir önceki vh değerinde kalır. */ .hero{ min-height:100vh; min-height:100svh; padding:96px 0 56px; } .hero-grid{ grid-template-columns:1fr; } .hero .lead{ max-width:none; } /* Taksi, orijinal fotoğrafın sağ yarısında; dar/uzun mobil kadrajda "cover" merkezi kırparsa araç kesilip gidiyordu — odağı araca kaydır. */ .hero::before{ background-position:72% 50%; } /* Dar ekranda metin fotoğrafın tüm genişliğini kaplar; sağa doğru açılan gradyan yerine tek biçim koyu bir örtü okunabilirliği garanti eder. */ .hero::after{ background:linear-gradient(180deg, rgba(8,9,11,.45) 0%, rgba(8,9,11,.30) 30%, rgba(8,9,11,.70) 68%, rgba(8,9,11,.92) 100%); } } /* ---------- Feature / Service grid ---------- */ .grid{ display:grid; gap:22px; } .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } @media (max-width:940px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } } .card{ background:#fff; border:1px solid var(--gray-300); border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-sm); transition:box-shadow .15s ease, transform .15s ease; } .card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); } .card .icon{ width:46px; height:46px; border-radius:12px; background:var(--yellow); display:flex; align-items:center; justify-content:center; margin-bottom:14px; } .card .icon svg{ width:24px; height:24px; color:var(--ink); } .card h3{ margin-bottom:8px; } .card p{ color:var(--gray-700); font-size:.95rem; margin-bottom:0; } /* ---------- CTA band ---------- */ .cta-band{ background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:44px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; } .cta-band h2{ color:#fff; margin-bottom:6px; } .cta-band p{ color:#C9CAD3; margin-bottom:0; } /* ---------- Content / article layout ---------- */ .page-hero{ background:var(--gray-100); padding:38px 0 34px; border-bottom:1px solid var(--gray-300); } /* Blog yazıları ve bölge (mahalle/ilçe/güzergah) sayfaları için: aynı hero fotoğrafı, daha kısa bir şerit halinde — üstte breadcrumb, H1, altında Ara/WhatsApp. Sabit/işlevsel sayfalar hâlâ yukarıdaki sade .page-hero'yu kullanıyor. Kontrast için tek biçim koyu bir scrim var; anasayfadaki gibi yönlü gradyan yok çünkü metin uzunluğu sayfa sayfa değişiyor (H1'ler çok kısa veya çok uzun olabiliyor). */ .page-hero-photo{ position:relative; overflow:hidden; isolation:isolate; color:#fff; padding:56px 0 44px; background:#0A0B0D; } .page-hero-photo::before{ content:''; position:absolute; inset:0; z-index:-2; background:#0A0B0D url('hero-taxi.jpg') center 55% / cover no-repeat; background-image:image-set(url('hero-taxi.avif') type('image/avif'), url('hero-taxi.webp') type('image/webp'), url('hero-taxi.jpg') type('image/jpeg')); background-image:-webkit-image-set(url('hero-taxi.avif') type('image/avif'), url('hero-taxi.webp') type('image/webp'), url('hero-taxi.jpg') type('image/jpeg')); } .page-hero-photo::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(8,9,11,.86) 0%, rgba(8,9,11,.72) 60%, rgba(8,9,11,.55) 100%); } .page-hero-photo .container{ position:relative; } .page-hero-photo .breadcrumb{ color:rgba(255,255,255,.75); margin-bottom:14px; } .page-hero-photo .breadcrumb a{ color:#fff; } .page-hero-photo .breadcrumb a:hover{ color:var(--yellow); } .page-hero-photo h1{ color:#fff; margin-bottom:22px; text-wrap:balance; } .page-hero-photo .cta-row .btn{ padding:9px 20px; font-size:.9rem; line-height:1; } @media (max-width:640px){ .page-hero-photo{ padding:44px 0 36px; } .page-hero-photo::after{ background:linear-gradient(180deg, rgba(8,9,11,.62) 0%, rgba(8,9,11,.82) 100%); } } .content-layout{ display:grid; grid-template-columns:2fr 1fr; gap:44px; align-items:start; } @media (max-width:900px){ .content-layout{ grid-template-columns:1fr; } } .prose h2{ margin-top:1.4em; } .prose p a{ color:var(--link); text-decoration:underline; text-underline-offset:3px; font-weight:700; } .prose p a:hover{ color:var(--ink); } .prose ul{ margin:0 0 1.2em; padding-left:1.2em; } .prose li{ margin-bottom:.5em; } .chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; } .chip{ background:var(--gray-100); border:1px solid var(--gray-300); color:var(--ink-soft); font-size:.82rem; font-weight:700; padding:7px 13px; border-radius:999px; } /* Tıklanabilir ilçe çipi (site içi kategori bağlantısı) */ a.chip:hover{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); } .side-card{ background:#fff; border:1px solid var(--gray-300); border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow-sm); position:sticky; top:96px; } .side-card h3{ margin-bottom:10px; } .side-card .phone-big{ font-family:var(--font-head); font-size:1.5rem; font-weight:800; color:var(--ink); margin:6px 0 16px; display:block; } .side-list{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; } .side-list a{ font-weight:600; font-size:.92rem; color:var(--gray-700); } .side-list a:hover{ color:var(--link); } /* ---------- FAQ ---------- */ .faq-item{ background:#fff; border:1px solid var(--gray-300); border-radius:var(--radius-md); margin-bottom:14px; overflow:hidden; } .faq-item summary{ cursor:pointer; list-style:none; padding:20px 24px; font-weight:700; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:16px; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:'+'; font-size:1.4rem; color:var(--link); flex-shrink:0; transition:transform .2s ease; } .faq-item[open] summary::after{ transform:rotate(45deg); } .faq-item .faq-a{ padding:0 24px 20px; color:var(--gray-700); } /* ---------- Contact page ---------- */ .info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } @media (max-width:700px){ .info-grid{ grid-template-columns:1fr; } } .info-item{ background:#fff; border:1px solid var(--gray-300); border-radius:var(--radius-md); padding:20px; } .info-item .label{ font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-500); margin-bottom:6px; } .info-item .value{ font-weight:700; color:var(--ink); font-size:1.02rem; } .map-placeholder{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--gray-300); } .map-placeholder iframe{ width:100%; height:340px; border:0; display:block; } /* ---------- Category / hub cards ---------- */ .post-card{ background:#fff; border:1px solid var(--gray-300); border-radius:var(--radius-md); padding:22px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow-sm); } .post-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); } .post-card .tag{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--link); } .post-card h3{ font-size:1.05rem; margin-bottom:2px; } .post-card p{ font-size:.88rem; color:var(--gray-500); margin-bottom:0; } /* ---------- Fare calculator ---------- */ .calc-box{ background:#fff; border:1px solid var(--gray-300); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-md); } .calc-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:620px){ .calc-row{ grid-template-columns:1fr; } .calc-box{ padding:20px; } /* Dar ekranda sonuç kutusu yan yana sığmıyordu; buton nowrap olduğu için kutuyu taşırıyordu. Alt alta diziyoruz. */ .result-box{ flex-direction:column; align-items:stretch; } .result-box .btn{ width:100%; white-space:normal; } } .field label{ display:block; font-weight:700; font-size:.86rem; margin-bottom:8px; color:var(--ink); } .field input{ width:100%; padding:13px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--gray-300); font-family:var(--font-body); font-size:1rem; } .field input:focus{ border-color:var(--link); box-shadow:0 0 0 3px rgba(143,99,0,.18); } .result-box{ margin-top:22px; background:var(--gray-100); border-radius:var(--radius-md); padding:20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; } .result-box .amount{ font-family:var(--font-head); font-size:1.8rem; font-weight:800; color:var(--ink); } /* ---------- Footer ---------- */ .site-footer{ background:var(--ink); color:#C9CAD3; padding:64px 0 24px; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; } @media (max-width:900px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } } .site-footer .brand{ color:#fff; } .site-footer .brand-badge{ background:var(--yellow); } .site-footer .brand-badge svg{ color:var(--ink); } .footer-desc{ color:#9EA0AC; font-size:.92rem; max-width:34ch; margin-top:14px; } .footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; } /* Dokunma hedefi en az 24px yüksekliğinde olmalı (WCAG 2.5.8); inline-block + dikey padding ile sağlanır. */ .footer-links li{ line-height:1.5; } .footer-links a{ color:#C9CAD3; font-size:.92rem; display:inline-block; padding:6px 0; min-height:24px; } .footer-links a:hover{ color:var(--yellow); } .footer-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid #2A2B31; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:.82rem; color:var(--gray-400); } /* ---------- Floating action buttons (mobile) ---------- */ .fab-row{ position:fixed; bottom:18px; left:18px; right:18px; z-index:200; display:none; gap:10px; } .fab-row a{ flex:1; } @media (max-width:760px){ .fab-row{ display:flex; } body{ padding-bottom:78px; } } /* ---------- Utility ---------- */ .text-muted{ color:var(--gray-500); } .small{ font-size:.85rem; } /* Anlamsal düzeltme: footer ve yan panel başlıkları başlık hiyerarşisinde seviye atlamaması için H2 oldu; görsel boyutları eskisi gibi korunuyor. */ .site-footer h2.footer-h{ font-size:.95rem; text-transform:uppercase; letter-spacing:.06em; color:#fff; margin:0 0 14px; } .side-card h2.side-h{ font-size:1.2rem; margin:0 0 .5em; }