/* ===================================================== Mido Hasan — Global Style Foundation Updates Purpose: apply BEFORE homepage assembly ===================================================== */ :root { /* Harmonized website background */ --bg-primary: #0D0D0D; --bg-surface: #141017; --bg-elevated: #1B1620; --text-primary: #F6F2F7; --text-secondary: #DDD6E3; --text-muted: #AFA4B8; --text-faint: #7C7284; --accent: #8E63A3; --accent-soft: #C5A6D3; --accent-deep: #4C345D; --accent-lime: #B78CFF; --accent-gold: #E6D8FF; --border: rgba(44,37,50,0.55); --border-faint: rgba(44,37,50,0.30); --site-max: 1120px; --site-gutter: 40px; --site-w: min(var(--site-max), calc(100% - var(--site-gutter))); --section-padding: clamp(72px, 10vw, 130px); /* Reduced globally. How I Think can override this locally. */ --section-head-gap: clamp(30px, 4.2vw, 52px); /* Header top spacing */ --header-top-gap: clamp(16px, 2.2vw, 30px); --nav-top-offset: 28px; /* viewport-top to fixed .cbm-nav */ } /* When the WordPress admin bar is visible, push the fixed nav below it. */ body.admin-bar { --nav-top-offset: 60px; /* 32px admin bar + 28px desktop gap */ } @media (max-width: 782px) { body.admin-bar { --nav-top-offset: 66px; /* 46px mobile admin bar + 20px gap */ } } html { background: var(--bg-primary); overflow-x: clip; } body { position: relative; min-height: 100%; background: linear-gradient(180deg, #0D0D0D 0%, #111015 50%, #0D0D0D 100%); color: var(--text-muted); overflow-x: clip; } body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; } body::before { background: none; opacity: 0; } body::after { z-index: -1; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 72% 62% at 50% 20%, black, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 20%, black, transparent 78%); opacity: .34; } /* Better global selection. Clear, branded, readable. */ ::selection { background: #B78CFF; color: #0D0D0D; } /* Locked glass effect — do not change the core values. */ .glass-card { backdrop-filter: blur(20px) saturate(200%); -webkit-backdrop-filter: blur(20px) saturate(200%); background-color: rgba(1, 0, 5, 0.1); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.125); } /* Use when a glass card needs premium depth without changing the locked glass rule. */ .glass-card--depth { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(183,140,255,.035), 0 2px 6px rgba(0,0,0,.10), 0 8px 18px rgba(0,0,0,.10), 0 20px 44px rgba(0,0,0,.12), 0 36px 80px rgba(0,0,0,.10); } /* Section layout shell only. Background is harmonized globally on , so no per-section ambience plate, clip, or isolation here — those caused visible section boundary cuts. */ .cbm-section { position: relative; padding-block: var(--section-padding); background: transparent; } /* Global section header spacing. Smaller than before. */ .cbm-section-head, .cbm-proof__intro, .cbm-thinking__head, .cbm-logo-wall__intro, .cbm-work__head, .cbm-build__head { margin-bottom: var(--section-head-gap) !important; } /* Exception: How I Think keeps its own locked spacing/width. */ .cbm-how-think, .cbm-how-think * { --section-head-gap: initial; } /* Project cards / project cover images must match 1920×1080. */ .cbm-project-cover, .cbm-work-card__media, .cbm-work-tile__media, .cbm-selected-work__media { aspect-ratio: 16 / 9 !important; width: 100%; height: auto; overflow: hidden; } .cbm-project-cover img, .cbm-work-card__media img, .cbm-work-tile__media img, .cbm-selected-work__media img { width: 100%; height: 100%; object-fit: cover; } /* If an old selected-work card was square, this prevents it. */ .cbm-work-card, .cbm-work-tile, .cbm-selected-work__card { aspect-ratio: auto !important; } /* Header top spacing and nav additions support */ .cbm-header, .cbm-site-header { padding-top: var(--header-top-gap); } .cbm-header__bar, .cbm-site-header__bar { width: var(--site-w); max-width: var(--site-max); margin-inline: auto; } /* Header nav should include: Services, Work, About, Templates, Thinking */ .cbm-header__nav, .cbm-site-header__nav { gap: clamp(16px, 2vw, 28px); } @media (max-width: 760px) { :root { --section-head-gap: clamp(28px, 8vw, 42px); --header-top-gap: 14px; --nav-top-offset: 20px; } body::after { background-size: 54px 54px; opacity: .22; } }