/* ============================================================ MORETECH -- Design Tokens First-party WEB360 template built as a universal, AI-controllable design foundation for WEB360 Studio (not cloned from Fable5's visual identity -- only its technical token STRUCTURE was used as a starting point, per the real WEB360 clone-first procedure). Palette: deep ink navy (--mt-brand-primary) + warm terracotta accent (--mt-accent) -- deliberately distinct from Fable5's navy/gold and from Fable5's own template-local --fbl-accent (#2D9CFF), so a rendered page is never ambiguous about which template it belongs to. ------------------------------------------------------------ RULE (unchanged from every WEB360 template): override using the SAME variable names 01-foundation.css / 02-layout.css expect. Do NOT invent new variable names -- override the existing ones. Every recurring visual value MoreTech's own CSS needs is expressed as a real --mt-* token here, on purpose -- MoreTech must never repeat Fable5's --fbl-* problem of a hidden, template-local value Studio's capability model cannot see. ============================================================ */ /* ============================================================= SS1 BRAND ============================================================= */ :root { /* PlusFab palette (2026-10-01): graphite / stainless steel / copper. Primary: graphite */ --mt-brand-primary: #1E2226; --mt-brand-primary-hover: #131619; --mt-brand-primary-active: #0E1012; --mt-brand-primary-soft: #ECEEF0; --mt-brand-primary-rgb: 30, 34, 38; /* Bridge for Bootstrap overrides */ --primary: var(--mt-brand-primary); --primary-rgb: var(--mt-brand-primary-rgb); /* Accent: restrained copper -- emphasis only, never a large fill */ --mt-accent: #B8733A; --mt-accent-hover: #9C5F2D; --mt-accent-soft: #F6EDE4; /* Feedback -- keep standard */ --mt-success: #22c55e; --mt-success-soft: #f0fdf4; --mt-warning: #f59e0b; --mt-warning-soft: #fffbeb; --mt-danger: #ef4444; --mt-danger-soft: #fef2f2; } /* ============================================================= SS2 SURFACES ============================================================= */ :root { --mt-surface-page: #ffffff; --mt-surface-raised: #ffffff; --mt-surface-sunken: #F3F4F5; --mt-surface-subtle: #E9EBED; /* V2 Phase 2.1 (Section Rhythm): a deliberately more distinct light surface, scoped ONLY to homepage marketing-module section backgrounds (Brands Bar / Services / Process Flow's own root selectors) — never the shared --mt-surface-sunken, which real inner-page/shared CSS (04-pages.css, gallery.css, overlay.css) also consumes ~25 times and must stay untouched. Root cause: F4F5F8 vs #ffffff was a ~9% relative-luminance gap, barely perceptible as two adjacent full-width bands; this value roughly doubles that gap while staying in the same light, premium register. */ --mt-surface-alt: #E9EBED; --mt-surface-dark: #1A1D21; --mt-surface-dark-alt: #131619; --mt-surface-header: #ffffff; --mt-surface-utility: linear-gradient(90deg, #131619, #1E2226); --mt-surface-dropdown: #ffffff; /* Theme-aware surfaces (aliases on this light-foundation template -- see MASTER_TEMPLATE_FABLE5.md SS1 "Option B": global --mt-* tokens stay light; a per-section/per-page dark identity, if ever wanted, is a deliberate additional layer, never a silent re-value here). */ --mt-page-bg: var(--mt-surface-page); --mt-surface-card: var(--mt-surface-raised); --mt-surface-glass-bg: transparent; --mt-surface-glass-border: 1px solid var(--mt-border-default); /* Legacy */ --mt-surface-light: var(--mt-surface-page); --mt-surface-soft: var(--mt-surface-sunken); } /* ============================================================= SS3 BORDERS ============================================================= */ :root { --mt-border-light: #E1E4E7; --mt-border-default: #E1E4E7; --mt-border-strong: #C5CBD0; --mt-border-focus: rgba(184, 115, 58, 0.45); --mt-border-color: var(--mt-border-default); } /* ============================================================= SS4 GRADIENTS ============================================================= */ :root { --mt-gradient-primary: linear-gradient(135deg, #1E2226, #2B3035); --mt-gradient-dark: linear-gradient(180deg, #1A1D21, #131619); --mt-gradient-surface: linear-gradient(180deg, #F3F4F5, #ffffff); --mt-gradient-surface-r: linear-gradient(180deg, #ffffff, #F3F4F5); --mt-gradient-glow: radial-gradient(circle, rgba(184,115,58,0.10), transparent 70%); } /* ============================================================= SS5 TEMPLATE-SPECIFIC ALIASES ============================================================= */ :root { /* Primary aliases */ --mt-primary: var(--mt-brand-primary); --mt-primary-dark: var(--mt-brand-primary-hover); --mt-primary-light: #3A4047; --mt-primary-soft: var(--mt-brand-primary-soft); /* Accent aliases */ --mt-accent-dark: var(--mt-accent-hover); --mt-accent-light: #D9A77A; /* Background aliases */ --mt-white: #ffffff; --mt-off-white: #FAFAFB; --mt-light-bg: var(--mt-surface-sunken); --mt-border: var(--mt-border-default); /* Text aliases */ --mt-text-dark: #16191C; --mt-text-medium: #3E444A; /* Shadow aliases */ --mt-shadow-accent: 0 8px 32px rgba(184, 115, 58, 0.20); /* Button radius alias */ --mt-radius: 10px; --mt-radius-lg: 20px; --mt-radius-pill: var(--mt-radius-full); } /* ============================================================= SS6 ALL OTHER TOKENS -- unchanged, template-agnostic "engineering" scale (neutral, spacing, typography, shadows, motion, z-index). Kept identical to every other WEB360 template on purpose -- these are the shared scale Studio's own curated token controls (radius/ weight/type-scale/spacing) already read directly, and there is no real design reason for a template to redefine them. ============================================================= */ /* Neutral scale */ :root { /* PlusFab (2026-10-01): neutral steel greys replace the blue-tinted slate scale -- same names, same roles. */ --mt-neutral-950: #0B0C0E; --mt-neutral-900: #16191C; --mt-neutral-800: #22262A; --mt-neutral-700: #3E444A; --mt-neutral-600: #555C63; --mt-neutral-500: #6B737A; --mt-neutral-400: #8A939B; --mt-neutral-300: #C5CBD0; --mt-neutral-200: #E1E4E7; --mt-neutral-100: #EEF0F2; --mt-neutral-50: #F6F7F8; --mt-neutral-0: #ffffff; --mt-text-heading: var(--mt-neutral-900); --mt-text-body: var(--mt-neutral-700); --mt-text-muted: var(--mt-neutral-500); --mt-text-subtle: var(--mt-neutral-400); --mt-text-inverse: var(--mt-neutral-0); --mt-text-light: var(--mt-text-inverse); --mt-text-strong: var(--mt-text-heading); } /* Shadows */ :root { --mt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --mt-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06); --mt-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08); --mt-shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.10); --mt-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.12); --mt-shadow-2xl: 0 30px 70px rgba(0, 0, 0, 0.14); --mt-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); --mt-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06); --mt-shadow-card-hover: 0 20px 50px rgba(0, 0, 0, 0.12); --mt-shadow-soft: var(--mt-shadow-md); --mt-shadow-strong: var(--mt-shadow-lg); } /* ============================================================ DESIGN LANGUAGE v2 — MoreTech Universal Template craftsmanship pass. Template-local semantic values (same precedent as --mt-surface-alt / --mt-surface-subtle: authored craft values, NOT brand levers, so they are deliberately NOT registered in app/design/tokens.py CURATED_TOKEN_KEYS). These give the first-party modules ONE coherent set of decisions for card elevation, reading measure, and section atmosphere, instead of each module re-picking magic numbers. ============================================================ */ :root { /* Elevation — one decision for "a resting card" and "a lifted card". --mt-shadow-xs was effectively invisible (0 1px 2px / 0.05); the card modules now rest at -sm and lift to -lg on hover. */ --mt-elevation-card: var(--mt-shadow-sm); --mt-elevation-card-hover: var(--mt-shadow-lg); --mt-elevation-raised: var(--mt-shadow-md); /* Reading measures — replace scattered 46ch/52ch/60ch literals with one coherent typographic rhythm. */ --mt-measure: 66ch; /* body copy / section lead */ --mt-measure-tight: 54ch; /* card body copy */ --mt-measure-head: 20ch; /* a section heading, deliberate 2-line wrap */ /* Section atmosphere — a single, restrained depth cue reused where a section wants more than a flat fill (kept low-opacity: considered lighting, never decoration). */ --mt-section-glow: radial-gradient(60% 55% at 15% 0%, rgba(var(--mt-brand-primary-rgb), 0.05) 0%, rgba(var(--mt-brand-primary-rgb), 0) 60%); /* The shared "kicker" hierarchy device (accent rule + label) all first-party section headers now use — one rule length, one gap. */ --mt-kicker-rule: 28px; } /* Border radius */ :root { --mt-radius-xs: 4px; --mt-radius-sm: 6px; --mt-radius-md: 10px; --mt-radius-xl: 20px; --mt-radius-2xl: 24px; --mt-radius-full: 999px; } /* Spacing */ :root { --mt-space-1: 4px; --mt-space-2: 8px; --mt-space-3: 12px; --mt-space-4: 16px; --mt-space-5: 20px; --mt-space-6: 24px; --mt-space-8: 32px; --mt-space-10: 40px; --mt-space-12: 48px; --mt-space-16: 64px; --mt-space-20: 80px; --mt-space-24: 96px; --mt-space-32: 128px; } /* Typography -- Inter (see head-css.php), one of Studio's already- curated brand fonts (app/design/tokens.py::CURATED_FONTS) */ :root { --mt-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mt-font-body: var(--mt-font-sans); /* PlusFab heading face (loaded in head-css.php). Used by the Hero first; later sections adopt it batch by batch. */ --mt-font-heading: 'Archivo', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --mt-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; --mt-text-xs: 0.72rem; --mt-text-sm: 0.82rem; --mt-text-base: 1rem; --mt-text-md: 1.05rem; --mt-text-lg: 1.2rem; --mt-text-xl: 1.45rem; --mt-text-2xl: 1.75rem; --mt-text-3xl: 2.2rem; --mt-text-4xl: 2.8rem; /* V2 Phase 2.0: hero/display tier — see moretech-hero.css's own .mt-hero__title comment for why the prior 4xl ceiling wasn't enough. */ --mt-text-5xl: 3.5rem; /* Hero-fix round: true display tier — the .mt-hero__title clamp already reached --mt-text-5xl at desktop width, so an AI/human H1 edit had no headroom left. This gives the hero headline a real premium ceiling (~72px) distinct from a large section heading. */ --mt-text-6xl: 4.5rem; --mt-weight-light: 300; --mt-weight-normal: 400; --mt-weight-medium: 500; --mt-weight-semibold: 600; --mt-weight-bold: 700; --mt-weight-black: 800; --mt-leading-tight: 1.15; --mt-leading-snug: 1.3; --mt-leading-normal: 1.6; --mt-leading-relaxed: 1.75; --mt-tracking-tight: -0.02em; --mt-tracking-normal: 0; --mt-tracking-wide: 0.04em; --mt-tracking-wider: 0.12em; --mt-tracking-widest: 0.18em; } /* Motion */ :root { --mt-ease-default: cubic-bezier(0.22, 1, 0.36, 1); --mt-ease-in: cubic-bezier(0.55, 0, 1, 0.45); --mt-ease-out: cubic-bezier(0, 0.55, 0.45, 1); --mt-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --mt-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --mt-duration-fast: 0.15s; --mt-duration-normal: 0.25s; --mt-duration-slow: 0.4s; --mt-duration-slower: 0.6s; --mt-ease: var(--mt-ease-default); } /* Z-index */ :root { --mt-z-base: 1; --mt-z-dropdown: 100; --mt-z-sticky: 200; --mt-z-header: 1000; --mt-z-overlay: 5000; --mt-z-modal: 9000; --mt-z-toast: 9500; --mt-z-loader: 9999; } /* Section spacing */ :root { --mt-section-py: 100px; --mt-section-py-sm: 64px; --mt-section-gap: var(--mt-space-16); } @media (max-width: 991px) { :root { --mt-section-py: 80px; --mt-section-py-sm: 48px; } } @media (max-width: 767px) { :root { --mt-section-py: 64px; --mt-section-py-sm: 40px; } }