/* ============================================= GRAYMATTER REPLY — Global Stylesheet Gold-standard agency UI ============================================= */ /* Google Fonts — trimmed to used weights only */ /* Loaded via in HTML for non-blocking rendering */ /* ===================== CSS CUSTOM PROPERTIES ===================== */ :root { /* Palette — Apple-aligned */ --gm-black: #1d1d1f; --gm-white: #ffffff; /* Primary */ --gm-primary: #0071e3; --gm-primary-hover: #0077ed; --gm-primary-pale: #e8f0fe; /* Brand gold (from logo) */ --gm-gold: #EBB000; --gm-gold-deep: #D97706; /* Accent colours — card variants */ --gm-green: #15803d; --gm-green-pale: #e8f8ee; --gm-green-border: #bbf7d0; --gm-blue: #0056b3; --gm-blue-pale: #e8f0fe; --gm-amber: #a16207; --gm-amber-pale: #fef9ee; --gm-purple: #5b21b6; --gm-purple-pale: #f0ecff; --gm-red: #b91c1c; --gm-red-pale: #fef2f2; /* Greys — Apple-aligned */ --gm-grey-50: #fafafa; --gm-grey-100: #f5f5f7; --gm-grey-200: #d2d2d7; --gm-grey-300: #b8b8bd; --gm-grey-400: #86868b; --gm-grey-500: #6e6e73; --gm-grey-700: #1d1d1f; /* Typography */ --font-display: -apple-system, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-body: 'DM Sans', -apple-system, sans-serif; --font-mono: 'DM Mono', 'SF Mono', monospace; /* Transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 0.2s; --duration-med: 0.4s; --duration-slow: 0.6s; /* Layout */ --container-max: 1240px; --container-pad: 48px; /* Textures */ --noise-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.35'/%3E%3C/svg%3E"); } /* ===================== RESET ===================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; text-rendering: optimizeLegibility; font-feature-settings: 'kern' 1, 'liga' 1; } body { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--gm-grey-700); background: var(--gm-white); overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } ul, ol { list-style: none; } ::selection { background: var(--gm-primary); color: var(--gm-white); } /* ===================== TYPOGRAPHY ===================== */ h1 { font-family: var(--font-display); font-size: clamp(42px, 6.5vw, 76px); line-height: 1.04; font-weight: 700; color: var(--gm-black); letter-spacing: -0.036em; } h2 { font-family: var(--font-display); font-size: clamp(32px, 5vw, 64px); line-height: 1.08; font-weight: 700; color: var(--gm-black); letter-spacing: -0.032em; } h3 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); font-weight: 700; line-height: 1.1; color: var(--gm-black); letter-spacing: -0.026em; } h4, h3.card-title { font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--gm-black); letter-spacing: -0.01em; } p { font-family: var(--font-body); font-size: 15px; line-height: 1.68; color: var(--gm-grey-500); } /* ===================== LAYOUT UTILITIES ===================== */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } .section { padding: 120px 0; } .section-grey { background: var(--gm-grey-100); } .section-grey h2 + .grid-3 { margin-top: 40px; } .section-grey > .container > h2:first-child { font-size: clamp(28px, 3.5vw, 40px); } /* ===================== SECTION LABELS ===================== */ .gm-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gm-gold-deep); margin-bottom: 20px; display: block; } /* ===================== ICON CONTAINERS ===================== */ .icon-box { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 20px; background: var(--gm-grey-100); color: var(--gm-black); } .icon-box--green { background: var(--gm-green-pale); color: var(--gm-green); } .icon-box--blue { background: var(--gm-blue-pale); color: var(--gm-blue); } .icon-box--amber { background: var(--gm-amber-pale); color: var(--gm-amber); } .icon-box--purple { background: var(--gm-purple-pale); color: var(--gm-purple); } .icon-box--red { background: var(--gm-red-pale); color: var(--gm-red); } /* ===================== LOZENGES / PILLS ===================== */ .lozenge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.04em; padding: 5px 14px; border-radius: 20px; border: 1px solid var(--gm-grey-200); background: var(--gm-grey-50); color: var(--gm-grey-500); line-height: 1; } .lozenge--green { background: var(--gm-green-pale); color: var(--gm-green); border-color: var(--gm-green-border); } .lozenge--blue { background: var(--gm-blue-pale); color: var(--gm-blue); border-color: #c7d9f8; } .lozenge--amber { background: var(--gm-amber-pale); color: var(--gm-amber); border-color: #fde9a2; } .lozenge--purple { background: var(--gm-purple-pale); color: var(--gm-purple); border-color: #ddd6fe; } /* ===================== BUTTONS ===================== */ .gm-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--gm-primary); color: var(--gm-white); font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; padding: 12px 28px; border-radius: 980px; text-decoration: none; transition: background 0.18s ease, transform 0.18s ease; cursor: pointer; border: none; } .gm-btn-primary:hover { background: linear-gradient(135deg, var(--gm-gold) 0%, var(--gm-gold-deep) 100%); transform: translateY(-1px); } .gm-btn-primary:active { transform: translateY(0); } .btn-arrow { display: inline-block; transition: transform var(--duration-fast) var(--ease-smooth); } .gm-btn-primary:hover .btn-arrow { transform: translateX(3px); } .btn-group { display: flex; gap: 16px; flex-wrap: wrap; } /* ===================== STATS ===================== */ .stat-number { font-family: var(--font-display); font-size: clamp(48px, 6vw, 72px); line-height: 1; font-weight: 700; letter-spacing: -0.035em; margin-bottom: 8px; background: linear-gradient(135deg, var(--gm-gold) 0%, var(--gm-gold-deep) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-prefix { font-family: var(--font-body); font-size: 14px; font-weight: 400; letter-spacing: 0; -webkit-text-fill-color: var(--gm-grey-500); display: block; margin-bottom: 4px; } .stat-label { font-family: var(--font-body); font-size: 13px; color: var(--gm-grey-400); font-weight: 400; line-height: 1.5; } .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; } .stats-row > div { padding-top: 24px; border-top: 1px solid var(--gm-grey-200); } .content-placeholder { border: 2px dashed var(--gm-grey-300); background: var(--gm-grey-50); padding: 48px; text-align: center; font-family: var(--font-mono); font-size: 13px; color: var(--gm-grey-400); margin: 40px 0; } /* ===================== CARDS — SHARED ===================== */ .article-card { transition: transform var(--duration-med) var(--ease-out), box-shadow var(--duration-med) var(--ease-out), border-color var(--duration-med) var(--ease-out); } .article-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04); } /* Card image zoom on hover */ .article-card .card-image { overflow: hidden; } /* ===================== GRIDS ===================== */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; } /* ===================== CARD GRID — 1px divider pattern ===================== */ .card-grid { display: grid; gap: 1px; background: var(--gm-grey-200); border-radius: 18px; overflow: hidden; } .card-grid--3 { grid-template-columns: repeat(3, 1fr); } .card-grid > * { background: var(--gm-white); padding: 32px 24px; transition: background var(--duration-fast) ease; } .card-grid > *:hover { background: var(--gm-grey-50); } .card-grid h4 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--gm-black); } .card-grid p { font-size: 14px; line-height: 1.65; color: var(--gm-grey-500); } /* ===================== BREADCRUMB ===================== */ .breadcrumb { font-family: var(--font-body); font-size: 13px; color: var(--gm-grey-400); margin-bottom: 32px; letter-spacing: 0.01em; } .breadcrumb a { color: var(--gm-grey-400); text-decoration: none; transition: color var(--duration-fast) var(--ease-smooth); } .breadcrumb a:hover { color: var(--gm-primary); } /* ===================== SECTOR TAGS ===================== */ .sector-tag { display: inline-block; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gm-primary); background: var(--gm-primary-pale); padding: 4px 12px; border-radius: 980px; margin-bottom: 12px; } .sector-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .sector-tags .sector-tag { background: var(--gm-white); color: var(--gm-grey-500); padding: 6px 16px; font-size: 11px; font-weight: 400; letter-spacing: 0.02em; border: 1px solid var(--gm-grey-200); border-radius: 20px; text-transform: none; transition: border-color var(--duration-fast) var(--ease-smooth), background var(--duration-fast) var(--ease-smooth); } .sector-tags .sector-tag:hover { border-color: var(--gm-primary); background: var(--gm-primary-pale); color: var(--gm-primary); } /* ===================== HERO ===================== */ .hero { padding: 136px 0 88px; text-align: center; } .hero-content { max-width: 800px; margin: 0 auto; } .hero-content h1 { margin-bottom: 26px; } /* Gradient accent text */ .accent { background: linear-gradient(135deg, var(--gm-gold) 0%, var(--gm-gold-deep) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-content p { font-size: 20px; font-weight: 300; line-height: 1.55; color: var(--gm-grey-500); max-width: 640px; margin: 0 auto 40px; letter-spacing: -0.01em; } .hero-content .btn-group { justify-content: center; } /* Sub-page heroes — left-aligned */ .hero--left { text-align: left; padding-bottom: 56px; } .hero--left .hero-content { margin: 0; } .hero--left .hero-content p { margin: 0 0 40px; } .hero--left .hero-content .btn-group { justify-content: flex-start; } /* Tighter spacing between hero and first content section on sub-pages */ .hero--left + .section { padding-top: 56px; } /* ===================== ANIMATION SYSTEM ===================== */ /* Scroll reveal — gated behind .js class to prevent grey flash on load */ .js .fade-up { opacity: 0; transform: translateY(28px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } .js .fade-up.visible { opacity: 1; transform: translateY(0); } /* Hero stagger */ @keyframes heroReveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .hero-reveal { opacity: 0; animation: heroReveal 0.6s var(--ease-out) both; } /* Reduced motion override */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ===================== NAV ===================== */ .gm-nav { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth); } .gm-nav.scrolled { border-bottom-color: var(--gm-grey-200); box-shadow: 0 1px 16px rgba(0, 0, 0, 0.04); } .nav-inner { padding: 0 var(--container-pad); height: 80px; display: flex; align-items: center; justify-content: space-between; } .nav-logo { text-decoration: none; display: flex; align-items: baseline; gap: 6px; } .nav-links { display: flex; align-items: center; gap: 36px; } .nav-link { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--gm-grey-500); text-decoration: none; position: relative; letter-spacing: 0.005em; transition: color var(--duration-fast) var(--ease-smooth); } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1.5px; background: var(--gm-primary); transition: width 0.3s var(--ease-out); } .nav-link:hover { color: var(--gm-black); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link.active { color: var(--gm-black); font-weight: 600; } .nav-cta { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--gm-white); background: var(--gm-primary); padding: 10px 24px; border-radius: 980px; text-decoration: none; letter-spacing: -0.01em; transition: background 0.18s ease, transform 0.18s ease; } .nav-cta:hover { background: linear-gradient(135deg, var(--gm-gold) 0%, var(--gm-gold-deep) 100%); transform: translateY(-1px); } /* Burger */ .nav-burger { display: none; background: none; border: none; cursor: pointer; width: 28px; height: 20px; position: relative; flex-direction: column; justify-content: space-between; } .nav-burger span { display: block; width: 100%; height: 2px; background: var(--gm-black); transition: transform 0.3s var(--ease-smooth), opacity 0.3s var(--ease-smooth); } .nav-burger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* Mobile nav drawer */ .nav-mobile { display: none; flex-direction: column; background: var(--gm-white); padding: 24px var(--container-pad) 32px; border-top: 1px solid var(--gm-grey-200); } .nav-mobile.open { display: flex; } .nav-mobile a { font-family: var(--font-body); font-size: 18px; color: var(--gm-grey-700); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--gm-grey-100); } .nav-mobile a:last-child { border-bottom: none; color: var(--gm-primary); font-weight: 600; margin-top: 8px; } /* ===================== FOOTER ===================== */ .gm-footer { background: var(--gm-black); color: var(--gm-white); padding: 96px 0 48px; position: relative; } /* Noise grain on footer too */ .gm-footer::before { content: ''; position: absolute; inset: 0; background-image: var(--noise-grain); background-size: 256px 256px; opacity: 0.03; pointer-events: none; z-index: 0; } .gm-footer > * { position: relative; z-index: 1; } .footer-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } .footer-top { display: flex; justify-content: space-between; gap: 80px; padding-bottom: 64px; } .footer-brand { max-width: 320px; } .footer-tagline { font-size: 15px; color: rgba(255, 255, 255, 0.45); margin-top: 16px; line-height: 1.6; } .footer-socials { display: flex; gap: 16px; margin-top: 24px; } .footer-social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: rgba(255, 255, 255, 0.45); transition: color var(--duration-fast) var(--ease-smooth), background var(--duration-fast) var(--ease-smooth); } .footer-social-link:hover { color: var(--gm-gold); background: rgba(255, 255, 255, 0.06); } .footer-social-link svg { width: 18px; height: 18px; } .footer-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; } .footer-col h4 { color: var(--gm-white); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; font-family: var(--font-mono); } .footer-col a { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.55); text-decoration: none; padding: 5px 0; transition: color var(--duration-fast) var(--ease-smooth); } .footer-col a:hover { color: var(--gm-gold); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 40px; text-align: center; } .footer-bottom p { font-size: 13px; color: rgba(255, 255, 255, 0.35); line-height: 2; } .footer-legal a { color: rgba(255, 255, 255, 0.35); text-decoration: none; transition: color var(--duration-fast) var(--ease-smooth); } .footer-legal a:hover { color: var(--gm-gold); } /* ===================== FORM ===================== */ .form-group { margin-bottom: 24px; } .form-group label { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--gm-black); margin-bottom: 8px; letter-spacing: 0.02em; text-transform: uppercase; } .form-group input, .form-group select, .form-group textarea { width: 100%; font-family: var(--font-body); font-size: 16px; padding: 14px 16px; border: 1px solid var(--gm-grey-200); background: var(--gm-white); color: var(--gm-black); transition: border-color var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--gm-primary); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--gm-grey-400); } .form-group textarea { min-height: 140px; resize: vertical; } .form-submit { width: 100%; margin-top: 12px; } .form-error { display: none; font-family: var(--font-body); font-size: 14px; color: #c0392b; background: #fdf0ed; padding: 12px 16px; margin-bottom: 16px; } .form-success { text-align: left; padding: 80px 20px 60px; animation: formSuccessFadeIn 0.5s var(--ease-out) both; } @keyframes formSuccessFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .form-success-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--gm-grey-100); display: flex; align-items: center; justify-content: center; margin: 0 0 28px; } .form-success-icon svg { width: 28px; height: 28px; } .form-success-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gm-gold-deep); margin-bottom: 16px; display: block; } .form-success h3 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 38px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; color: var(--gm-black); margin-bottom: 12px; } .form-success h3 .accent { background: linear-gradient(135deg, var(--gm-gold) 0%, var(--gm-gold-deep) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .form-success p { font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--gm-grey-500); max-width: 360px; margin: 0; } /* ===================== ARTICLE BODY ===================== */ .article-body { max-width: 720px; margin: 0 auto; } .article-body p { margin-bottom: 28px; font-size: 17px; line-height: 1.8; } .article-body h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; margin-top: 48px; margin-bottom: 20px; } .article-body h3 { margin-top: 48px; margin-bottom: 20px; } .article-meta { font-family: var(--font-body); font-size: 14px; color: rgba(255, 255, 255, 0.45); margin-top: 16px; letter-spacing: 0.01em; } /* Article body — lists */ .article-body ul, .article-body ol { margin-bottom: 28px; padding-left: 24px; font-size: 17px; line-height: 1.8; } .article-body li { margin-bottom: 8px; } .article-body strong { font-weight: 600; color: var(--gm-black); } /* Article body — blockquote */ .article-body blockquote { margin: 40px 0; padding: 32px 36px; background: var(--gm-grey-50); border-left: 4px solid var(--gm-gold); border-radius: 0 12px 12px 0; font-size: 17px; line-height: 1.75; color: var(--gm-grey-500); font-style: italic; } .article-body blockquote p { margin-bottom: 12px; } .article-body blockquote p:last-child { margin-bottom: 0; } .article-body blockquote cite { display: block; margin-top: 16px; font-style: normal; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--gm-grey-400); text-transform: uppercase; } /* Case study hero — stacked image + stat cards */ .stacked-hero { max-width: 960px; margin: 0 auto; border-radius: 18px; overflow: hidden; } .stacked-hero img { width: 100%; height: auto; display: block; min-height: 400px; object-fit: cover; } .stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 960px; margin: -40px auto 56px; position: relative; z-index: 1; padding: 0 24px; } .stat-cards--4 { grid-template-columns: repeat(4, 1fr); } .stat-cards--2 { grid-template-columns: repeat(2, 1fr); max-width: 640px; } .stat-card { background: var(--gm-white); border: 1px solid var(--gm-grey-200); border-radius: 14px; padding: 28px 24px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03); transition: transform 0.2s ease, box-shadow 0.2s ease; } .stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); } .stat-card-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--gm-grey-50); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--gm-primary); } .stat-card .stat-value { font-family: var(--font-display); font-size: clamp(24px, 2.5vw, 30px); font-weight: 700; color: var(--gm-black); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 6px; } .stat-card .stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gm-grey-400); line-height: 1.5; } /* Screenshot frame — app screenshots with subtle device chrome */ .screenshot-frame { margin-top: 48px; max-width: 720px; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04); border: 1px solid var(--gm-grey-200); } .screenshot-frame img, .screenshot-frame video { width: 100%; height: auto; display: block; } .screenshot-frame--wide { max-width: 900px; } .screenshot-frame--center { margin-left: auto; margin-right: auto; } /* Image grid — supporting images within articles */ .image-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 40px 0; } .image-grid.image-grid--3 { grid-template-columns: repeat(3, 1fr); } .image-grid img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--gm-grey-200); } .image-grid .image-full { grid-column: 1 / -1; } @media (max-width: 600px) { .image-grid, .image-grid.image-grid--3 { grid-template-columns: 1fr; } } /* ===================== TWO-COLUMN LAYOUTS ===================== */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .two-col-content { display: grid; grid-template-columns: 1fr 480px; gap: 80px; align-items: center; } /* ===================== PIPELINE CARDS ===================== */ .pipeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 56px; background: var(--gm-grey-200); border-radius: 18px; overflow: hidden; } .pipeline-card { background: var(--gm-white); padding: 32px 24px 28px; position: relative; border-left: none; transition: background var(--duration-fast) ease; } .pipeline-card:hover { background: var(--gm-grey-50); } .pipeline-card .stage-num { font-family: var(--font-mono); font-size: 10px; color: var(--gm-grey-400); margin-bottom: 24px; letter-spacing: 0.1em; text-transform: uppercase; } .pipeline-card .pipeline-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .pipeline-card h3 { margin-bottom: 10px; font-size: 18px; letter-spacing: -0.02em; } .pipeline-card p { font-size: 14px; line-height: 1.65; color: var(--gm-grey-500); } .pipeline-card .pipeline-tag { display: inline-block; margin-top: 16px; font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 5px; } .pipeline-card--blue .pipeline-icon { background: var(--gm-blue-pale); color: var(--gm-blue); } .pipeline-card--blue h3 { color: var(--gm-blue); } .pipeline-card--blue .pipeline-tag { background: var(--gm-blue-pale); color: var(--gm-blue); } .pipeline-card--amber .pipeline-icon { background: var(--gm-amber-pale); color: var(--gm-amber); } .pipeline-card--amber h3 { color: var(--gm-amber); } .pipeline-card--amber .pipeline-tag { background: var(--gm-amber-pale); color: var(--gm-amber); } .pipeline-card--purple .pipeline-icon { background: var(--gm-purple-pale); color: var(--gm-purple); } .pipeline-card--purple h3 { color: var(--gm-purple); } .pipeline-card--purple .pipeline-tag { background: var(--gm-purple-pale); color: var(--gm-purple); } .pipeline-card--green .pipeline-icon { background: var(--gm-green-pale); color: var(--gm-green); } .pipeline-card--green h3 { color: var(--gm-green); } .pipeline-card--green .pipeline-tag { background: var(--gm-green-pale); color: var(--gm-green); } /* ===================== HUB CARDS ===================== */ .hub-card { background: var(--gm-white); padding: 56px 48px; border: 1px solid var(--gm-grey-200); border-radius: 18px; text-decoration: none; display: block; transition: transform var(--duration-med) var(--ease-out), box-shadow var(--duration-med) var(--ease-out), border-color var(--duration-med) var(--ease-out); } .hub-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08); border-color: var(--gm-grey-300); } .hub-card h3 { margin-bottom: 12px; color: var(--gm-black); font-size: 24px; } .hub-card p { margin-bottom: 24px; } .hub-card .card-link { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--gm-primary); transition: color 0.18s ease; } .hub-card:hover .card-link { color: var(--gm-primary-hover); } /* ===================== ARTICLE CARDS ===================== */ .article-card { background: var(--gm-white); border: 1px solid var(--gm-grey-200); border-radius: 18px; overflow: hidden; text-decoration: none; display: block; } .article-card .card-image { height: 220px; } .article-card .card-body { padding: 24px 28px 28px; } .article-card .card-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gm-primary); margin-bottom: 10px; display: block; } .article-card h3 { font-size: 18px; margin-bottom: 10px; color: var(--gm-black); line-height: 1.35; } .article-card .card-excerpt { font-size: 14px; color: var(--gm-grey-500); margin-bottom: 16px; line-height: 1.6; } .article-card .card-link { font-size: 13px; font-weight: 600; color: var(--gm-primary); text-decoration: none; letter-spacing: -0.01em; transition: color 0.18s ease; } .article-card:hover .card-link { color: var(--gm-primary-hover); } /* ===================== PRINCIPLE CARDS ===================== */ .principles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 56px; background: var(--gm-grey-200); border-radius: 18px; overflow: hidden; } .principle-card { border: none; padding: 36px 32px; background: var(--gm-white); transition: background var(--duration-fast) ease; } .principle-card:hover { background: var(--gm-grey-50); } .principle-card .principle-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; background: var(--gm-grey-100); color: var(--gm-grey-700); } .principle-card .card-num { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--gm-grey-400); margin-bottom: 24px; letter-spacing: 0.1em; text-transform: uppercase; } .principle-card h3 { font-family: var(--font-body); font-size: 18px; font-weight: 600; color: var(--gm-black); margin-bottom: 10px; letter-spacing: -0.02em; line-height: 1.3; } .principle-card p { font-size: 14px; color: var(--gm-grey-500); line-height: 1.65; } /* ===================== DIFFERENCE CARDS (about page) ===================== */ .difference-card { background: var(--gm-white); padding: 36px 32px; border: 1px solid var(--gm-grey-200); border-left: 4px solid transparent; border-radius: 18px; } /* Accent left borders — per card colour */ .difference-card--blue { border-left-color: var(--gm-primary); } .difference-card--green { border-left-color: var(--gm-green); } .difference-card--amber { border-left-color: var(--gm-amber); } .difference-card--purple { border-left-color: var(--gm-purple); } .difference-card .card-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .difference-card .card-num { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--gm-grey-400); margin-bottom: 24px; letter-spacing: 0.1em; text-transform: uppercase; } .difference-card h3 { font-size: clamp(20px, 2.5vw, 24px); font-weight: 700; margin-bottom: 14px; letter-spacing: -0.026em; } .difference-card p { font-size: 14px; line-height: 1.65; color: var(--gm-grey-500); } .difference-card .card-tag { display: inline-block; margin-top: 16px; font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 5px; } /* Hero card — full-width lead card */ .difference-card--hero { padding: 48px 40px; } .difference-card--hero h3 { font-size: clamp(32px, 4vw, 44px); } .difference-card--hero p { max-width: 640px; } /* ===================== FAQ ACCORDION ===================== */ .faq-section { padding: 120px 0; } .faq-category { margin-bottom: 64px; } .faq-category:last-child { margin-bottom: 0; } .faq-category-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gm-gold-deep); display: block; margin-bottom: 12px; } .faq-category-title { font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: var(--gm-black); letter-spacing: -0.026em; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--gm-grey-200); } .faq-list { display: flex; flex-direction: column; gap: 0; } .faq-item { border-bottom: 1px solid var(--gm-grey-200); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--gm-black); line-height: 1.4; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-smooth); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--gm-gold-deep); } .faq-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--gm-grey-100); display: flex; align-items: center; justify-content: center; transition: background var(--duration-fast) var(--ease-smooth), transform var(--duration-fast) var(--ease-smooth); } .faq-icon svg { transition: transform var(--duration-fast) var(--ease-smooth); color: var(--gm-grey-500); } .faq-item[open] .faq-icon { background: #fef9ee; } .faq-item[open] .faq-icon svg { transform: rotate(45deg); color: var(--gm-gold-deep); } .faq-body { padding: 0 0 24px 0; max-width: 720px; } .faq-body p { font-family: var(--font-body); font-size: 15px; line-height: 1.68; color: var(--gm-grey-500); } .faq-body p + p { margin-top: 12px; } /* Smooth open/close animation */ .faq-item:not([open]) .faq-body { animation: faqClose 0.2s ease-out forwards; } .faq-item[open] .faq-body { animation: faqOpen 0.25s ease-out forwards; } @keyframes faqOpen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes faqClose { from { opacity: 1; } to { opacity: 0; } } @media (max-width: 768px) { .faq-section { padding: 80px 0; } .faq-item summary { font-size: 15px; padding: 20px 0; } .faq-category { margin-bottom: 48px; } } /* ===================== CLIENT LOGO GRID ===================== */ .logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 56px; } .logo-placeholder { background: var(--gm-grey-50); display: flex; align-items: center; justify-content: center; height: 88px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--gm-grey-400); border: 1px dashed var(--gm-grey-300); transition: border-color var(--duration-fast) var(--ease-smooth), background var(--duration-fast) var(--ease-smooth); } .logo-placeholder:hover { border-color: var(--gm-grey-400); background: var(--gm-grey-100); } /* ===================== AWARDS GRID ===================== */ .awards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-top: 48px; } .award-card { background: var(--gm-white); border-radius: 18px; display: flex; align-items: center; justify-content: center; padding: 32px 28px; min-height: 150px; transition: box-shadow 0.3s ease; } .award-card:hover { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } .award-card img { max-width: 100%; max-height: 72px; width: auto; height: auto; object-fit: contain; opacity: 0.85; transition: opacity 0.3s ease; } .award-card--square img { max-height: 130px; } .award-card:hover img { opacity: 1; } /* ===================== ENTRY POINT CTA SECTION ===================== */ .entry-cta .container { text-align: center; max-width: 720px; } .entry-cta h2 { margin-bottom: 28px; } .entry-cta p { margin-bottom: 16px; font-size: 18px; } .entry-cta .rule-text { font-family: var(--font-display); font-size: clamp(20px, 2.5vw, 28px); font-weight: 700; letter-spacing: -0.02em; color: var(--gm-black); margin: 40px 0 8px; line-height: 1.2; background: linear-gradient(135deg, var(--gm-gold) 0%, var(--gm-gold-deep) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .entry-cta .btn-group { justify-content: center; margin-top: 40px; } /* ===================== FEATURE CARD (orchestrator on how-we-work) ===================== */ .feature-card { display: grid; grid-template-columns: 1fr 560px; gap: 80px; align-items: center; } .feature-card .feature-image { width: 560px; height: 400px; } /* ===================== BENTO GRID — Case Studies ===================== */ .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; } .bento-card { background: var(--gm-white); border: 1px solid var(--gm-grey-200); border-radius: 18px; overflow: hidden; text-decoration: none; display: block; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .bento-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08); } .bento-card--wide { grid-column: span 2; } .bento-card--tall { grid-row: span 2; } .bento-card .bento-image { width: 100%; background: var(--gm-grey-100); overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--gm-grey-400); letter-spacing: 0.06em; text-transform: uppercase; } .bento-card .bento-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); } .bento-card:hover .bento-image img { transform: scale(1.04); } .bento-card--wide .bento-image { height: 320px; } .bento-card--tall .bento-image { height: 100%; min-height: 280px; } .bento-card .bento-image { height: 220px; } .bento-card--tall { display: grid; grid-template-rows: auto 1fr; } .bento-card .bento-body { padding: 28px; } .bento-card .bento-body .sector-tag { margin-bottom: 12px; } .bento-card .bento-client { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--gm-grey-400); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; } .bento-card .bento-campaign { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--gm-black); margin-bottom: 12px; letter-spacing: -0.02em; line-height: 1.15; } .bento-card .bento-stat { font-family: -apple-system, 'SF Pro Display', sans-serif; font-size: 28px; font-weight: 700; color: var(--gm-primary); margin-bottom: 12px; letter-spacing: -0.03em; } .bento-card .bento-summary { font-size: 15px; line-height: 1.65; color: var(--gm-grey-500); margin-bottom: 20px; } .bento-card .bento-link { font-size: 14px; font-weight: 600; color: var(--gm-primary); text-decoration: none; transition: color 0.18s ease; } .bento-card:hover .bento-link { color: var(--gm-primary-hover); } /* ===================== RESPONSIVE — TABLET (768px) ===================== */ @media (max-width: 768px) { :root { --container-pad: 28px; } .section { padding: 80px 0; } .hero { padding: 100px 0 64px; } .nav-inner { height: 64px; } .nav-links { display: none; } .nav-burger { display: flex; } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .difference-card--hero { padding: 36px 28px; } .stats-row { grid-template-columns: repeat(2, 1fr); gap: 32px; } .two-col, .two-col-content { grid-template-columns: 1fr; gap: 48px; } .card-grid--3 { grid-template-columns: repeat(3, 1fr); } .pipeline-grid { grid-template-columns: repeat(2, 1fr); } .principles-grid { grid-template-columns: 1fr; } .feature-card { grid-template-columns: 1fr; gap: 40px; } .feature-card .feature-image { width: 100%; height: 300px; } .bento-grid { grid-template-columns: repeat(2, 1fr); } .bento-card--wide { grid-column: span 1; } .bento-card--tall { grid-row: span 1; } .bento-card--wide .bento-image, .bento-card--tall .bento-image, .bento-card .bento-image { height: 220px; min-height: auto; } .bento-card--tall { display: block; } .stacked-hero img { min-height: 260px; } .stat-cards, .stat-cards--4 { grid-template-columns: 1fr; margin-top: -24px; padding: 0 16px; gap: 12px; } .stat-cards--2 { grid-template-columns: 1fr; max-width: none; } .stat-card { padding: 20px; } .footer-top { flex-direction: column; gap: 48px; } .footer-nav { grid-template-columns: repeat(2, 1fr); gap: 32px; } .logo-grid { grid-template-columns: repeat(3, 1fr); } } /* ===================== RESPONSIVE — MOBILE (480px) ===================== */ @media (max-width: 480px) { :root { --container-pad: 20px; } .section { padding: 64px 0; } .hero { padding: 72px 0 56px; } .grid-3 { grid-template-columns: 1fr; } .stats-row { grid-template-columns: 1fr; } .card-grid--3 { grid-template-columns: 1fr; } .pipeline-grid { grid-template-columns: 1fr; } .footer-nav { grid-template-columns: 1fr; } .logo-grid { grid-template-columns: repeat(2, 1fr); } .bento-grid { grid-template-columns: 1fr; } .awards-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .btn-group { flex-direction: column; } .btn-group .gm-btn-primary { text-align: center; justify-content: center; } } /* ══════════════════════════════════════════ POD: BRANDS THAT TRUST US ══════════════════════════════════════════ */ .pod-brands h2 { margin-bottom: 48px; } /* ── Carousel ── */ .brands-carousel-outer { display: flex; align-items: center; margin-bottom: 56px; } .brands-viewport { flex: 1; overflow: hidden; padding: 28px 24px; margin: 0 -24px; } .brands-track { display: flex; gap: 16px; align-items: flex-end; transition: transform 0.5s var(--ease-smooth); } .brands-card { flex: 0 0 auto; aspect-ratio: 3 / 4; overflow: hidden; cursor: pointer; border-radius: 18px; position: relative; z-index: 1; transition: transform 0.28s var(--ease-out); } .brands-card:hover { transform: scale(1.06) translateY(-10px); z-index: 10; } .brands-card a { display: block; width: 100%; height: 100%; position: relative; } .brands-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.32s var(--ease-out); } .brands-card:hover img { transform: scale(1.06); } .brands-card-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 80px 20px 18px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0) 100%); pointer-events: none; transition: opacity 0.28s var(--ease-out); } .brands-card-client { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--gm-white); letter-spacing: -0.025em; line-height: 1.1; display: block; } .brands-card-campaign { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.7); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; display: block; margin-top: 4px; } /* ── Logo grid — 20-column LCM technique ── */ .brands-logo-grid { display: grid; grid-template-columns: repeat(20, 1fr); gap: 1px; background: var(--gm-grey-200); border: 1px solid var(--gm-grey-200); border-radius: 18px; overflow: hidden; } .brands-logo-cell { background: var(--gm-white); display: flex; align-items: center; justify-content: center; padding: 28px 16px; min-height: 92px; transition: background 0.2s ease; } .brands-logo-cell:hover { background: var(--gm-grey-100); } /* Row 1: 5 cells × span 4 cols */ .brands-logo-cell:nth-child(-n+5) { grid-column: span 4; } /* Row 2: 4 cells × span 5 cols */ .brands-logo-cell:nth-child(n+6) { grid-column: span 5; } .brands-logo-name { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gm-black); text-align: center; line-height: 1.4; } .brands-logo-name--small { font-size: 8px; font-weight: 500; letter-spacing: 0.09em; } .brands-logo-img { max-height: 52px; max-width: 160px; width: auto; height: auto; object-fit: contain; } /* Wide landscape logos (e.g. VWFS) — let width drive sizing */ .brands-logo-img--wide { max-height: none; max-width: 80%; } /* Larger square/circular logos (BSI, VW) */ .brands-logo-img--lg { max-height: 64px; } /* Override white SVG logos to render dark */ .brands-logo-img--dark { filter: brightness(0); } /* ── Brands pod responsive — tablet ── */ @media (min-width: 769px) and (max-width: 1023px) { .brands-logo-grid { grid-template-columns: repeat(3, 1fr); } .brands-logo-cell:nth-child(-n+5), .brands-logo-cell:nth-child(n+6) { grid-column: span 1; } .brands-logo-cell { padding: 24px 14px; min-height: 80px; } .brands-card-client { font-size: 18px; } .brands-card-campaign { font-size: 10px; } } /* ── Brands pod responsive — mobile ── */ @media (max-width: 768px) { .brands-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; } .brands-viewport::-webkit-scrollbar { display: none; } .brands-track { transition: none; } .brands-card { scroll-snap-align: start; } .brands-logo-grid { grid-template-columns: repeat(3, 1fr); border-radius: 12px; } .brands-logo-cell:nth-child(-n+5), .brands-logo-cell:nth-child(n+6) { grid-column: span 1; } .brands-logo-cell { padding: 20px 12px; min-height: 72px; } } @media (max-width: 480px) { .brands-card.active { transform: scale(1.06) translateY(-8px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); } .brands-logo-grid { grid-template-columns: repeat(2, 1fr); } .brands-carousel-outer { margin-bottom: 36px; } } /* ===================== ONETRUST COOKIE BANNER OVERRIDES ===================== */ #onetrust-banner-sdk { box-shadow: none !important; border: none !important; outline: none !important; } /* Close icon — inline SVG so it never depends on OneTrust CDN */ #onetrust-banner-sdk .onetrust-close-btn-handler.ot-close-icon { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1L1 11' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 12px !important; filter: none !important; } /* Persistent cookie icon — gold background, soft grey outline Uses #ot-sdk-btn-floating prefix to match OneTrust's own specificity */ #ot-sdk-btn-floating .ot-floating-button__front, #ot-sdk-btn-floating .ot-floating-button__back, .ot-floating-button__front, .ot-floating-button__back { background: var(--gm-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231d1d1f'%3E%3Cpath d='M21.6 11.1a1 1 0 0 0-.86-.18A2.9 2.9 0 0 1 20 11a3 3 0 0 1-3-3c0-.22.03-.44.08-.67a1 1 0 0 0-1.46-1.05c-.5.3-1.05.47-1.62.47a3 3 0 0 1-3-3c0-.47.12-.91.3-1.31a1 1 0 0 0-1-1.44A10 10 0 0 0 2 12c0 5.52 4.48 10 10 10s10-4.48 10-10l-.01-.15a1 1 0 0 0-.39-.75zM12 20a8 8 0 0 1-8-8 8.01 8.01 0 0 1 6.93-7.93A5 5 0 0 0 15 8.54 5 5 0 0 0 19.54 13A8.01 8.01 0 0 1 12 20z'/%3E%3Ccircle cx='8.5' cy='12.5' r='1.5'/%3E%3Ccircle cx='10.5' cy='16.5' r='1.5'/%3E%3Ccircle cx='14.5' cy='13.5' r='1.5'/%3E%3C/svg%3E") no-repeat center / 55% !important; background-color: var(--gm-gold) !important; border: 1px solid var(--gm-grey-200) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; } /* ===================== UTILITY CLASSES ===================== */ /* — Margin-top scale — */ .mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } .mt-48 { margin-top: 48px; } .mt-56 { margin-top: 56px; } /* — Article / case-study layout — */ .article-hero { max-width: 800px; margin: 0 auto 3rem; } .content-narrow { max-width: 720px; } .content-medium { max-width: 960px; margin: 0 auto; } /* — Image treatments — */ .img-card-thumb { width: 100%; height: 240px; object-fit: cover; border-radius: 12px 12px 0 0; } .img-hero-rounded { width: 100%; height: auto; border-radius: 18px; } .img-cover-fill { width: 100%; height: 100%; object-fit: cover; } .img-bordered { width: 100%; height: auto; overflow: hidden; border-radius: 14px; border: 1px solid var(--gm-grey-200); } .img-bordered-hero { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--gm-grey-200); } /* — Component utilities — */ .tag-purple { font-size: 10px; font-weight: 500; color: var(--gm-purple); background: var(--gm-purple-pale); border-radius: 4px; padding: 3px 8px; width: fit-content; } /* ===================== ACCESSIBILITY ===================== */ /* Skip-to-content — hidden until focused */ .skip-to-content { position: absolute; top: -100%; left: 16px; z-index: 10000; padding: 12px 24px; background: var(--gm-black); color: var(--gm-white); font-family: var(--font-body); font-size: 14px; font-weight: 600; border-radius: 0 0 8px 8px; text-decoration: none; transition: top 0.15s ease; } .skip-to-content:focus { top: 0; outline: 3px solid var(--gm-primary); outline-offset: 2px; } /* Focus-visible — keyboard users get a clear ring, mouse users don't */ :focus-visible { outline: 2px solid var(--gm-primary); outline-offset: 2px; } a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; } /* ===================== PRINT STYLES ===================== */ @media print { /* Hide chrome */ #nav-root, #footer-root, .skip-to-content, .brands-carousel-outer, .brands-logo-grid, #onetrust-banner-sdk, #onetrust-consent-sdk, .ot-sdk-btn, iframe { display: none !important; } /* Reset backgrounds and colours */ body { background: white !important; color: #1d1d1f !important; font-size: 11pt; line-height: 1.5; } * { box-shadow: none !important; text-shadow: none !important; } /* Ensure text is visible */ .section-dark, .section-dark * { background: white !important; color: #1d1d1f !important; } /* Show URLs after links */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #6e6e73; font-weight: 400; } /* Keep images reasonable */ img { max-width: 100% !important; page-break-inside: avoid; } /* Avoid page breaks inside content blocks */ h1, h2, h3 { page-break-after: avoid; } section, .card, .proof-card { page-break-inside: avoid; } /* Full-width layout */ .content-wrapper, .content-narrow, .content-medium { max-width: 100%; padding: 0; } }