/* ============================================================================ oluştur.haberself.com — "haberself" skin ---------------------------------------------------------------------------- www.haberself.com (res/css/hab_theme.css, YÖN: C) ile AYNI tasarım dili: sistem fontları, nötr palet + tek marka vurgusu (Haberself kırmızısı), aynı boşluk/ölçek/yarıçap token'ları, gündüz/gece. Markup hab_olustur_yeni.css ile ortak (hs- namespace). Skin değiştirmek için 'deki tek satırını değiştirmek yeterli. ============================================================================ */ /* ---------------------------------------------------------------------------- 1) TOKEN'LAR (hab_theme.css ile birebir) -------------------------------------------------------------------------- */ :root { --hs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PT Sans", sans-serif; --hs-serif: Georgia, "PT Serif", "Times New Roman", serif; --hs-fs-xs: 12px; --hs-fs-sm: 13.5px; --hs-fs-base: 16px; --hs-fs-lg: 18px; --hs-fs-xl: 22px; --hs-fs-2xl: 28px; --hs-fs-3xl: 34px; --hs-fs-4xl: 42px; --hs-lh: 1.6; --hs-lh-tight: 1.2; --hs-sp-1:4px; --hs-sp-2:8px; --hs-sp-3:12px; --hs-sp-4:16px; --hs-sp-5:24px; --hs-sp-6:32px; --hs-sp-7:48px; --hs-sp-8:64px; --hs-radius-sm: 8px; --hs-radius: 12px; --hs-radius-lg: 16px; --hs-radius-pill: 999px; --hs-maxw: 1200px; --hs-header-h: 60px; --hs-transition: 160ms ease; /* nötr palet — GÜNDÜZ */ --hs-bg:#ffffff; --hs-bg-soft:#f6f7f9; --hs-surface:#ffffff; --hs-surface-2:#eef1f4; --hs-surface-3:#e4e8ee; --hs-text:#11151c; --hs-text-soft:#49515e; --hs-muted:#8b95a3; --hs-border:#e6e9ee; --hs-border-strong:#d4d9e0; --hs-shadow:rgba(17,21,28,.08); --hs-shadow-lg:rgba(17,21,28,.16); /* marka vurgusu — Haberself kırmızısı (www accent 2) */ --hs-accent:#dc2626; --hs-accent-hover:#b91c1c; --hs-accent-soft:#fdeaea; --hs-on-accent:#ffffff; color-scheme: light; } html[data-theme="dark"] { --hs-bg:#0e1116; --hs-bg-soft:#141921; --hs-surface:#171d26; --hs-surface-2:#222a35; --hs-surface-3:#2c3643; --hs-text:#e8ecf2; --hs-text-soft:#aab4c2; --hs-muted:#697383; --hs-border:#252e3a; --hs-border-strong:#333d4b; --hs-shadow:rgba(0,0,0,.45); --hs-shadow-lg:rgba(0,0,0,.6); --hs-accent:#f87171; --hs-accent-hover:#fca5a5; --hs-accent-soft:#3a1d1d; --hs-on-accent:#1b0b0b; color-scheme: dark; } /* ---------------------------------------------------------------------------- 2) TEMEL -------------------------------------------------------------------------- */ body.hs-body { margin:0; width:auto; max-width:none; /* eski CSS'in 1100px gövde sınırını sıfırla */ overflow-x:hidden; background:var(--hs-bg); color:var(--hs-text); font-family:var(--hs-font); font-size:var(--hs-fs-base); line-height:var(--hs-lh); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transition:background var(--hs-transition), color var(--hs-transition); } .hs-header *, .hs-main *, .hs-footer * { box-sizing:border-box; } .hs-header, .hs-main, .hs-footer { box-sizing:border-box; } .hs-main a, .hs-header a, .hs-footer a { color:var(--hs-accent); text-decoration:none; transition:color var(--hs-transition); } .hs-main a:hover, .hs-header a:hover, .hs-footer a:hover { color:var(--hs-accent-hover); } .hs-main h1, .hs-main h2, .hs-main h3, .hs-main h4 { line-height:var(--hs-lh-tight); color:var(--hs-text); margin:0 0 var(--hs-sp-3); font-weight:800; letter-spacing:-.015em; } .hs-main ::selection { background:var(--hs-accent); color:var(--hs-on-accent); } .hs-container { width:100%; max-width:var(--hs-maxw); margin:0 auto; padding:0 var(--hs-sp-4); } /* ---------------------------------------------------------------------------- 3) HEADER -------------------------------------------------------------------------- */ .hs-header { position:sticky; top:0; z-index:200; background:var(--hs-bg); border-bottom:1px solid var(--hs-border); -webkit-backdrop-filter:saturate(150%) blur(8px); backdrop-filter:saturate(150%) blur(8px); } .hs-header-inner { display:flex; align-items:center; gap:var(--hs-sp-4); min-height:var(--hs-header-h); } .hs-brand { display:flex; align-items:center; gap:var(--hs-sp-3); margin-right:auto; } .hs-brand-logo { height:30px; width:auto; display:block; } .hs-brand-tag { font-size:var(--hs-fs-xs); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--hs-muted); border-left:1px solid var(--hs-border); padding-left:var(--hs-sp-3); } .hs-nav { display:flex; align-items:center; gap:var(--hs-sp-1); margin-left:auto; flex-wrap:wrap; } .hs-nav a { color:var(--hs-text-soft); font-weight:600; font-size:var(--hs-fs-sm); padding:8px 13px; border-radius:var(--hs-radius-pill); } .hs-nav a:hover { color:var(--hs-text); background:var(--hs-surface-2); } .hs-nav .hs-greet, .hs-greet { color:var(--hs-muted); font-weight:600; padding:8px 6px; font-size:var(--hs-fs-sm); } /* CTA = www primary buton (accent pill) */ .hs-cta-link { background:var(--hs-accent); color:var(--hs-on-accent) !important; font-weight:700; padding:8px 16px; } .hs-cta-link:hover { background:var(--hs-accent-hover); color:var(--hs-on-accent) !important; } /* tema toggle + hamburger */ .hs-theme-toggle, .hs-nav-toggle { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--hs-radius-sm); cursor:pointer; border:1px solid var(--hs-border); background:var(--hs-surface); color:var(--hs-text); font-size:17px; line-height:1; padding:0; flex:0 0 auto; transition:background var(--hs-transition), border-color var(--hs-transition); } .hs-theme-toggle:hover, .hs-nav-toggle:hover { background:var(--hs-surface-2); border-color:var(--hs-border-strong); } .hs-theme-toggle .hs-ico-moon { display:none; } .hs-theme-toggle .hs-ico-sun { display:inline; } html[data-theme="dark"] .hs-theme-toggle .hs-ico-moon { display:inline; } html[data-theme="dark"] .hs-theme-toggle .hs-ico-sun { display:none; } .hs-nav-toggle { display:none; } /* ---- sağdaki açılır menü (gece/gündüz buraya gizli) ---- */ .hs-menu { position:relative; flex:0 0 auto; margin-left:var(--hs-sp-1); } .hs-menu-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--hs-radius-sm); cursor:pointer; border:1px solid var(--hs-border); background:var(--hs-surface); color:var(--hs-text); font-size:20px; line-height:1; padding:0; transition:background var(--hs-transition), border-color var(--hs-transition); } .hs-menu-btn:hover { background:var(--hs-surface-2); border-color:var(--hs-border-strong); } .hs-menu-panel { display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:300; min-width:200px; max-height:80vh; overflow-y:auto; padding:var(--hs-sp-2); background:var(--hs-surface); border:1px solid var(--hs-border); border-radius:var(--hs-radius-sm); box-shadow:0 12px 30px var(--hs-shadow); } .hs-menu.hs-menu-open .hs-menu-panel { display:block; } /* panel içindeki linkler: tam genişlik satırlar */ .hs-menu-panel a { display:block; padding:9px 11px; border-radius:var(--hs-radius-sm); color:var(--hs-text-soft); font-size:var(--hs-fs-sm); font-weight:600; } .hs-menu-panel a:hover { background:var(--hs-surface-2); color:var(--hs-text); } .hs-menu-sep { height:1px; margin:var(--hs-sp-2) 4px; background:var(--hs-border); } .hs-menu-sites { display:flex; flex-direction:column; } .hs-menu-sites a { color:var(--hs-muted); font-size:var(--hs-fs-xs); padding:6px 11px; } /* panel içindeki tema butonu: tam genişlik, etiketli satır */ .hs-menu-panel .hs-theme-toggle { display:flex; align-items:center; gap:var(--hs-sp-2); width:100%; height:auto; padding:9px 11px; border:0; border-radius:var(--hs-radius-sm); background:transparent; color:var(--hs-text); cursor:pointer; font:inherit; font-size:var(--hs-fs-sm); font-weight:600; text-align:left; transition:background var(--hs-transition); } .hs-menu-panel .hs-theme-toggle:hover { background:var(--hs-surface-2); } .hs-theme-label { flex:1 1 auto; } /* site seçim açılır listesi (giriş yapınca) */ .hs-sitelist { position:relative; } .hs-sitelist > a { color:var(--hs-muted); font-size:var(--hs-fs-sm); display:block; padding:4px 13px; } /* ---------------------------------------------------------------------------- 4) MAIN -------------------------------------------------------------------------- */ .hs-main { padding:var(--hs-sp-6) var(--hs-sp-4) var(--hs-sp-8); } /* ---- hero (landing) ---- */ .hs-hero { display:grid; grid-template-columns:1.55fr 1fr; gap:var(--hs-sp-5); align-items:stretch; margin-bottom:var(--hs-sp-6); } .hs-hero-card { position:relative; overflow:hidden; border-radius:var(--hs-radius-lg); padding:var(--hs-sp-7) var(--hs-sp-6); background: radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.14), transparent 55%), linear-gradient(135deg, var(--hs-accent) 0%, var(--hs-accent-hover) 100%); color:#fff; box-shadow:0 12px 30px var(--hs-shadow); } .hs-hero-card::after { content:""; position:absolute; right:-60px; bottom:-80px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); } .hs-hero-kicker { font-size:var(--hs-fs-xs); font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.9; margin:0 0 var(--hs-sp-4); position:relative; z-index:1; } .hs-hero-title { color:#fff; font-size:clamp(28px, 4vw, var(--hs-fs-4xl)); line-height:var(--hs-lh-tight); letter-spacing:-.02em; margin:0 0 var(--hs-sp-5); position:relative; z-index:1; } .hs-steps { list-style:none; margin:0; padding:0; position:relative; z-index:1; } .hs-steps li { display:flex; align-items:baseline; gap:var(--hs-sp-3); font-size:var(--hs-fs-lg); font-weight:600; padding:var(--hs-sp-2) 0; } .hs-steps .hs-num { flex:0 0 auto; width:30px; height:30px; border-radius:var(--hs-radius-sm); display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.18); font-size:15px; font-weight:800; transform:translateY(3px); } .hs-steps em { font-style:normal; font-weight:400; opacity:.85; } .hs-steps .hs-hl { color:#fff; font-weight:700; box-shadow:inset 0 -2px 0 rgba(255,255,255,.6); } /* ---- CTA form kartı ---- */ .hs-cta-card { background:var(--hs-surface); border:1px solid var(--hs-border); border-radius:var(--hs-radius-lg); padding:var(--hs-sp-6); box-shadow:none; display:flex; flex-direction:column; justify-content:center; } .hs-cta-title { font-size:var(--hs-fs-xl); font-weight:800; margin:0 0 var(--hs-sp-1); } .hs-cta-sub { color:var(--hs-muted); font-size:var(--hs-fs-sm); margin:0 0 var(--hs-sp-5); } /* ---------------------------------------------------------------------------- 5) FORM ALANLARI (www .hs-input dili — çıplak input'lar dahil) -------------------------------------------------------------------------- */ .hs-field { margin-bottom:var(--hs-sp-4); } .hs-field label, .hs-iletisim label, .hs-kayit-form label { display:block; font-size:var(--hs-fs-sm); font-weight:600; color:var(--hs-text-soft); margin-bottom:var(--hs-sp-2); } .hs-main input[type="text"], .hs-main input[type="email"], .hs-main input[type="password"], .hs-main input[type="search"], .hs-main textarea, .hs-main select { width:100%; font:inherit; color:var(--hs-text); background:var(--hs-surface); border:1px solid var(--hs-border-strong); border-radius:var(--hs-radius-sm); padding:11px 13px; outline:none; transition:border-color var(--hs-transition), box-shadow var(--hs-transition); } .hs-main input:focus, .hs-main textarea:focus, .hs-main select:focus { border-color:var(--hs-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--hs-accent) 22%, transparent); } .hs-main input::placeholder, .hs-main textarea::placeholder { color:var(--hs-muted); } .hs-main textarea { resize:vertical; min-height:120px; line-height:1.6; } /* suffix'li input (siteadi.haberself.com) */ .hs-input-wrap { display:flex; align-items:stretch; } .hs-input-wrap input { border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; } .hs-input-suffix { display:inline-flex; align-items:center; padding:0 var(--hs-sp-3); background:var(--hs-surface-2); border:1px solid var(--hs-border-strong); border-left:0; border-radius:0 var(--hs-radius-sm) var(--hs-radius-sm) 0; color:var(--hs-muted); font-size:var(--hs-fs-sm); white-space:nowrap; } /* submit = www primary buton */ .hs-submit { display:inline-flex; align-items:center; justify-content:center; gap:var(--hs-sp-2); width:100%; padding:13px 18px; margin-top:var(--hs-sp-1); font:inherit; font-size:var(--hs-fs-base); font-weight:700; cursor:pointer; color:var(--hs-on-accent); border:1px solid transparent; border-radius:var(--hs-radius-pill); background:var(--hs-accent); transition:background var(--hs-transition); } .hs-submit:hover { background:var(--hs-accent-hover); color:var(--hs-on-accent); } .hs-submit:active { transform:translateY(1px); } /* onay kutusu (kayıt sözleşme) */ .hs-check { display:flex; align-items:flex-start; gap:var(--hs-sp-2); font-size:var(--hs-fs-sm); color:var(--hs-text-soft); margin:var(--hs-sp-2) 0 var(--hs-sp-4); cursor:pointer; } .hs-check input[type="checkbox"] { width:auto !important; margin:2px 0 0; flex:0 0 auto; accent-color:var(--hs-accent); } /* ---- intro paragraf ---- */ .hs-intro { background:var(--hs-surface); border:1px solid var(--hs-border); border-radius:var(--hs-radius); padding:var(--hs-sp-5) var(--hs-sp-6); margin-bottom:var(--hs-sp-6); color:var(--hs-text-soft); box-shadow:0 1px 2px var(--hs-shadow); font-size:var(--hs-fs-base); } .hs-intro b { color:var(--hs-text); } .hs-intro .hs-hl { color:var(--hs-accent); font-weight:700; } /* ---------------------------------------------------------------------------- 6) KART IZGARASI -------------------------------------------------------------------------- */ .hs-grid { display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--hs-sp-5); margin-bottom:var(--hs-sp-6); } .hs-card { background:var(--hs-surface); border:1px solid var(--hs-border); border-radius:var(--hs-radius); padding:var(--hs-sp-5); box-shadow:0 1px 2px var(--hs-shadow); position:relative; transition:border-color var(--hs-transition), box-shadow var(--hs-transition); } .hs-card:hover { border-color:var(--hs-border-strong); box-shadow:0 12px 30px var(--hs-shadow); } .hs-card h3 { margin:0 0 var(--hs-sp-4); font-size:15px; font-weight:800; color:var(--hs-text); display:flex; align-items:center; gap:var(--hs-sp-2); text-transform:uppercase; letter-spacing:.06em; } .hs-card h3::before { content:""; width:4px; height:16px; border-radius:3px; background:var(--hs-accent); } .hs-col-4 { grid-column:span 4; } .hs-col-8 { grid-column:span 8; } .hs-col-12 { grid-column:span 12; } /* sıralı listeler */ .hs-list { list-style:none; counter-reset:hs; margin:0; padding:0; } .hs-list li { counter-increment:hs; display:flex; align-items:baseline; gap:var(--hs-sp-3); padding:var(--hs-sp-2) 0; border-bottom:1px solid var(--hs-border); font-size:var(--hs-fs-sm); } .hs-list li:last-child { border-bottom:0; } .hs-list li::before { content:counter(hs); flex:0 0 auto; min-width:22px; height:22px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; background:var(--hs-surface-2); color:var(--hs-muted); border-radius:7px; font-size:11px; font-weight:700; } .hs-list li a { font-weight:600; color:var(--hs-text); } .hs-list li a:hover { color:var(--hs-accent); } .hs-list .hs-count { margin-left:auto; color:var(--hs-muted); font-size:var(--hs-fs-xs); font-weight:600; font-variant-numeric:tabular-nums; } /* popüler üyeler */ .hs-members { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--hs-sp-3); } .hs-members .hs-avatar { aspect-ratio:1; border-radius:var(--hs-radius-sm); overflow:hidden; border:1px solid var(--hs-border); background:var(--hs-surface-2); } .hs-members .hs-avatar img { width:100%; height:100%; object-fit:cover; display:block; } .hs-members-wide { grid-template-columns:repeat(8, 1fr); } /* duyurular */ .hs-duyuru ul { list-style:none; margin:0; padding:0; } .hs-duyuru li { padding:var(--hs-sp-4) 0; border-bottom:1px solid var(--hs-border); } .hs-duyuru li:last-child { border-bottom:0; } .hs-duyuru .hs-du-baslik { font-weight:800; font-size:var(--hs-fs-base); margin-bottom:var(--hs-sp-1); color:var(--hs-text); } .hs-duyuru .hs-du-tarih { display:block; margin-top:var(--hs-sp-2); font-size:var(--hs-fs-xs); color:var(--hs-muted); } .hs-duyuru .hs-du-devami a { font-weight:700; } /* istatistik yönlendirme kartı */ .hs-promo { display:flex; flex-direction:column; } .hs-promo-text { color:var(--hs-text-soft); font-size:var(--hs-fs-base); margin:0 0 var(--hs-sp-5); } .hs-promo-btn { margin-top:auto; width:auto; align-self:flex-start; text-decoration:none; color:var(--hs-on-accent) !important; } .hs-promo-btn:hover { color:var(--hs-on-accent) !important; } /* iç sayfa başlığı */ .hs-page-head { margin-bottom:var(--hs-sp-6); } .hs-page-title { font-size:clamp(26px, 3.4vw, var(--hs-fs-3xl)); font-weight:800; margin:0 0 var(--hs-sp-1); letter-spacing:-.02em; } .hs-page-sub { color:var(--hs-muted); margin:0; font-size:var(--hs-fs-base); } /* ---------------------------------------------------------------------------- 7) İÇ SAYFALAR (önceden stilsizdi) -------------------------------------------------------------------------- */ /* SSS / FAQ */ .hs-faq { list-style:none; margin:0; padding:0; display:grid; gap:var(--hs-sp-3); max-width:880px; } .hs-faq li { background:var(--hs-surface); border:1px solid var(--hs-border); border-radius:var(--hs-radius); padding:var(--hs-sp-4) var(--hs-sp-5); box-shadow:0 1px 2px var(--hs-shadow); } .hs-q { margin:0 0 var(--hs-sp-2); font-weight:800; font-size:var(--hs-fs-lg); color:var(--hs-text); line-height:var(--hs-lh-tight); } .hs-a { margin:0; color:var(--hs-text-soft); font-size:var(--hs-fs-base); line-height:var(--hs-lh); } /* blog / gelişmeler */ .hs-blog { max-width:880px; } .hs-blog-list { display:grid; gap:var(--hs-sp-4); } .hs-blog-item { background:var(--hs-surface); border:1px solid var(--hs-border); border-radius:var(--hs-radius); padding:var(--hs-sp-5); box-shadow:0 1px 2px var(--hs-shadow); color:var(--hs-text-soft); line-height:var(--hs-lh); } .hs-blog-item + .hs-blog-item { margin-top:var(--hs-sp-4); } .hs-blog-meta { font-size:var(--hs-fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--hs-muted); margin-bottom:var(--hs-sp-3); } .hs-blog-note { margin-top:var(--hs-sp-5); padding:var(--hs-sp-4); border-left:3px solid var(--hs-accent); background:var(--hs-bg-soft); border-radius:0 var(--hs-radius-sm) var(--hs-radius-sm) 0; color:var(--hs-text-soft); font-size:var(--hs-fs-sm); } /* iletişim + kayıt form sarıcı */ .hs-iletisim, .hs-kayit-wrap { max-width:560px; background:var(--hs-surface); border:1px solid var(--hs-border); border-radius:var(--hs-radius-lg); padding:var(--hs-sp-6); box-shadow:0 1px 2px var(--hs-shadow); } .hs-lead { margin:0 0 var(--hs-sp-5); color:var(--hs-text-soft); font-size:var(--hs-fs-base); } /* üyelik sözleşmesi (popup) */ .hs-soz { max-width:760px; margin:var(--hs-sp-6) auto; padding:0 var(--hs-sp-4); color:var(--hs-text-soft); line-height:var(--hs-lh); } .hs-soz-kicker { font-size:var(--hs-fs-xs); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--hs-accent); margin:0 0 var(--hs-sp-3); } .hs-soz-foot { margin-top:var(--hs-sp-6); padding-top:var(--hs-sp-4); border-top:1px solid var(--hs-border); } .hs-soz-close { font:inherit; font-weight:700; cursor:pointer; padding:10px 20px; color:var(--hs-on-accent); background:var(--hs-accent); border:0; border-radius:var(--hs-radius-pill); } .hs-soz-close:hover { background:var(--hs-accent-hover); } /* ---------------------------------------------------------------------------- 8) FOOTER (www: ortalanmış, sade, bg-soft) -------------------------------------------------------------------------- */ .hs-footer { border-top:1px solid var(--hs-border); background:var(--hs-bg-soft); margin-top:var(--hs-sp-8); } .hs-footer-inner { padding:var(--hs-sp-5) var(--hs-sp-4); display:flex; flex-wrap:wrap; align-items:center; gap:var(--hs-sp-3) var(--hs-sp-5); } .hs-footer-nav { display:flex; flex-wrap:wrap; gap:var(--hs-sp-2) var(--hs-sp-5); } .hs-footer-nav a { font-weight:600; font-size:var(--hs-fs-sm); color:var(--hs-text-soft); } .hs-footer-nav a:hover { color:var(--hs-accent); } .hs-copy { color:var(--hs-muted); font-size:var(--hs-fs-sm); margin-left:auto; } .hs-copy a { color:var(--hs-muted); } .hs-copy a:hover { color:var(--hs-accent); } /* ---------------------------------------------------------------------------- 9) RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width: 920px) { .hs-hero { grid-template-columns:1fr; } .hs-col-4, .hs-col-8 { grid-column:span 12; } } @media (max-width: 760px) { .hs-nav-toggle { display:inline-flex; } .hs-nav { position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:var(--hs-sp-1); background:var(--hs-surface); border-bottom:1px solid var(--hs-border); padding:var(--hs-sp-3) var(--hs-sp-4); box-shadow:0 12px 30px var(--hs-shadow); margin-left:0; display:none; } .hs-nav.hs-open { display:flex; } .hs-nav a { padding:12px 14px; border-radius:var(--hs-radius-sm); } .hs-cta-link { text-align:center; } .hs-theme-toggle { align-self:flex-start; margin:var(--hs-sp-2) 0 0; } .hs-header-inner { position:relative; flex-wrap:wrap; } .hs-hero-card { padding:var(--hs-sp-6) var(--hs-sp-5); } .hs-members, .hs-members-wide { grid-template-columns:repeat(4, 1fr); } .hs-copy { margin-left:0; width:100%; } } @media (max-width: 460px) { .hs-brand-tag { display:none; } .hs-members, .hs-members-wide { grid-template-columns:repeat(3, 1fr); } }