/* ===================================================== 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 .mht-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: #0D0D0D; 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 { /* Phase 10.10.4: faux-glass (matches 00__global-base). No backdrop-filter. */ position: relative; isolation: isolate; background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.014)), linear-gradient(135deg, rgba(197,166,211,0.07), rgba(142,99,163,0.035) 30%, rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(24,19,31,0.95), rgba(16,12,21,0.92)); 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. */ .mht-section { position: relative; padding-block: var(--section-padding); background: transparent; } /* Global section header spacing. Smaller than before. */ .mht-section-head, .mht-proof__intro, .mht-thinking__head, .mht-logo-wall__intro, .mht-work__head, .mht-build__head { margin-bottom: var(--section-head-gap) !important; } /* Exception: How I Think keeps its own locked spacing/width. */ .mht-how-think, .mht-how-think * { --section-head-gap: initial; } /* Project cards / project cover images must match 1920×1080. */ .mht-project-cover, .mht-work-card__media, .mht-work-tile__media, .mht-selected-work__media { aspect-ratio: 16 / 9 !important; width: 100%; height: auto; overflow: hidden; } .mht-project-cover img, .mht-work-card__media img, .mht-work-tile__media img, .mht-selected-work__media img { width: 100%; height: 100%; object-fit: cover; } /* If an old selected-work card was square, this prevents it. */ .mht-work-card, .mht-work-tile, .mht-selected-work__card { aspect-ratio: auto !important; } /* Header top spacing and nav additions support */ .mht-header, .mht-site-header { padding-top: var(--header-top-gap); } .mht-header__bar, .mht-site-header__bar { width: var(--site-w); max-width: var(--site-max); margin-inline: auto; } /* Header nav should include: Services, Work, About, Templates, Thinking */ .mht-header__nav, .mht-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; } } /* ── PHASE 10.4.3 REMOVE SECTION DIVIDER LINES SITE-WIDE ── Remove only section-to-section horizontal borders. Keep: card borders, input borders, nav borders, footer nav divider. Target: the semi-transparent border-tops between major page sections. */ /* About page section-level dividers — already removed per-section in 15__about.css */ /* Project case block border-bottom used as divider — removed in 17b__project-case.css */ /* Generic: any .mht-section that has a section-level border-top via phase 10.4.x */ /* These selectors override any lingering border-tops on section wrappers */ .mht-about-page .mht-about-beliefs { border-top: none !important; } .mht-about-page .mht-about-process { border-top: none !important; } .mht-about-page .mht-about-fit { border-top: none !important; } .mht-about-page .mht-about-note { border-top: none !important; } /* Post related section */ .mht-post-single .mht-post-single__related { border-top: none !important; } /* ============================================================================= MIDO PHASE 10.4.4 — UNIFIED SECTION HEADING SYSTEM Makes all major section headings match the homepage mht-content-heading scale. Source of truth: homepage "Building Brands / Pushing Boundaries" headings. Gradient: #8E63A3 → #B78CFF (135deg). Applied to: About, FAQ, Enquiries, Project body sections, Templates. Does NOT apply to H1s (page titles) or small labels/kickers. ============================================================================= */ /* About page section headings */ .mht-about-note__heading, .mht-about-beliefs__title, .mht-about-process__title, .mht-about-fit__title { font-family: var(--content-heading-font) !important; font-size: clamp(2.2rem, 3.8vw, 4rem) !important; font-weight: var(--content-heading-weight) !important; line-height: var(--content-heading-line-height) !important; letter-spacing: var(--content-heading-letter-spacing) !important; color: var(--text-primary, #F6F2F7) !important; padding-bottom: .12em; overflow: visible; } /* FAQ section heading */ .mht-faq__heading, .mht-faq__title { font-family: var(--content-heading-font) !important; font-size: clamp(2.2rem, 3.8vw, 4rem) !important; font-weight: var(--content-heading-weight) !important; line-height: var(--content-heading-line-height) !important; letter-spacing: var(--content-heading-letter-spacing) !important; padding-bottom: .12em; overflow: visible; } /* Enquiries page section headings (non-H1) */ .mht-enquiries__section-heading, .mht-contact-fallback__heading { font-family: var(--content-heading-font) !important; font-size: clamp(1.9rem, 3.2vw, 3.4rem) !important; font-weight: var(--content-heading-weight) !important; line-height: var(--content-heading-line-height) !important; letter-spacing: var(--content-heading-letter-spacing) !important; color: var(--text-primary, #F6F2F7) !important; padding-bottom: .12em; } /* Templates page section headings */ .mht-templates__section-heading { font-family: var(--content-heading-font) !important; font-size: clamp(2rem, 3.4vw, 3.6rem) !important; font-weight: var(--content-heading-weight) !important; line-height: var(--content-heading-line-height) !important; letter-spacing: var(--content-heading-letter-spacing) !important; color: var(--text-primary, #F6F2F7) !important; padding-bottom: .12em; } /* Gradient treatment — apply to .mht-section-heading-gradient spans */ .mht-section-heading-gradient, .mht-about-note__heading em, .mht-faq__heading em, .mht-about-beliefs__title em, .mht-about-process__title em { display: block; font-style: italic; font-weight: 400; padding-bottom: .14em; overflow: visible; background: linear-gradient(135deg, #8E63A3 0%, #B78CFF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }