/* =================================================================== Technical Methods Limited. Website stylesheet Brand direction: Introba register. Inter (unified). Two near-whites, light navy accent, deep navy text. No background patterns. Palette derived from www.introba.com, accent refined to light navy. =================================================================== */ :root { --ink: #020C69; --ink-soft: #3656C9; --bone: #EDF2E8; --bone-mid: #E7EDE0; --bone-warm: #E0E9D6; --accent: #3E7E4D; --accent-deep: #2D5E38; --graphite: #6F7B6B; --ink-rgb: 2,12,105; --accent-rgb: 62,126,77; --rule: rgba(var(--accent-rgb), 0.20); --rule-soft: rgba(var(--accent-rgb), 0.32); --rule-light: rgba(var(--ink-rgb), 0.10); --cta-on-accent: #FFFFFF; --card-shadow: rgba(var(--ink-rgb), 0.10); } /* === DARK MODE: ENABLED. Hybrid behaviour (E3 option C) === Default: follow OS preference via @media (prefers-color-scheme: dark). Override: user toggles light/dark via the nav button. Choice persists in localStorage as 'tml-theme'. Applied to by a pre-paint inline script in , so no FOUC. The :not([data-theme="light"]) selector lets a user lock light even when their OS is dark. ================================================ */ html[data-theme="dark"] { --ink: #F3EEDF; --ink-soft: #D9CCAE; --bone: #10193A; --bone-mid: #151E40; --bone-warm: #1A2447; --accent: #6BB57F; --accent-deep: #8DCCA0; --graphite: #9CA89B; --ink-rgb: 243,238,223; --accent-rgb: 107,181,127; --cta-on-accent: #0B1226; --card-shadow: rgba(0,0,0,0.50); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --ink: #F3EEDF; --ink-soft: #D9CCAE; --bone: #10193A; --bone-mid: #151E40; --bone-warm: #1A2447; --accent: #6BB57F; --accent-deep: #8DCCA0; --graphite: #9CA89B; --ink-rgb: 243,238,223; --accent-rgb: 107,181,127; --cta-on-accent: #0B1226; --card-shadow: rgba(0,0,0,0.50); } } /* --- Theme toggle button (sits at the end of nav.primary) --- */ .theme-toggle { background: transparent; border: 1px solid var(--accent); color: var(--accent); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin-left: 8px; transition: background 0.15s, color 0.15s; } .theme-toggle:hover { background: var(--accent); color: var(--cta-on-accent); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } html:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bone); color: var(--ink); font-family: 'Inter', sans-serif; line-height: 1.55; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* --- Layout + type utilities --- */ .wrap { max-width: 1320px; margin: 0 auto; padding: 0 56px; } .wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 56px; } .label-sc { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink); } .roman { font-family: 'Inter', sans-serif; font-style: italic; font-weight: 400; font-size: 13px; color: var(--ink); letter-spacing: 0.05em; } .display { font-family: 'Inter', sans-serif; font-weight: 400; letter-spacing: -0.005em; } .top-rule { background: var(--bone-warm); height: 6px; border-bottom: 1px solid var(--accent); } /* --- Header --- */ header.site-header { background: var(--bone-warm); color: var(--ink); padding: 28px 0; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; } .logo-lockup { display: flex; align-items: center; gap: 14px; } .logo-lockup .square { width: 42px; height: 42px; background: transparent; border: 1px solid var(--accent); display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0.06em; color: var(--accent); } .logo-lockup .word { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 20px; line-height: 1; color: var(--ink); } .logo-lockup .word small { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 8px; color: var(--accent); letter-spacing: 0.32em; text-transform: uppercase; margin-top: 6px; text-align: center; } nav.primary { display: flex; gap: 28px; align-items: center; } nav.primary a { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); opacity: 0.78; padding: 4px 0; transition: opacity 0.15s, color 0.15s; } nav.primary a:hover { opacity: 1; color: var(--accent); } nav.primary a.active { opacity: 1; color: var(--ink); border-bottom: 1px solid var(--accent); padding-bottom: 2px; } nav.primary a.cta { color: var(--ink); padding: 8px 18px; border: 1px solid var(--accent); opacity: 1; } nav.primary a.cta:hover { background: var(--accent); color: var(--cta-on-accent); } /* --- Buttons --- */ .btn-primary { background: transparent; color: var(--ink); font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; padding: 18px 32px; border: 1px solid var(--accent); cursor: pointer; transition: background 0.2s, color 0.2s; display: inline-block; } .btn-primary:hover { background: var(--accent); color: var(--cta-on-accent); border-color: var(--accent); } .btn-link { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--accent); padding-bottom: 6px; transition: color 0.15s; display: inline-block; } .btn-link:hover { color: var(--accent); } .btn-link.on-bone { color: var(--ink); border-bottom-color: var(--accent-deep); } /* --- Homepage hero --- */ .hero { background: var(--bone-warm); color: var(--ink); padding: 80px 0 88px; position: relative; } .hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: stretch; } .hero-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; } .hero-eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--accent); } .hero h1 { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 88px; line-height: 0.96; color: var(--ink); margin-bottom: 14px; max-width: 13ch; letter-spacing: -0.015em; } .hero h1 em { font-style: italic; font-weight: 400; color: var(--accent); } .hero-sub-tagline { font-family: 'Inter', sans-serif; font-style: italic; font-weight: 400; font-size: 24px; color: var(--ink); margin-bottom: 24px; } .hero-rule { width: 80px; height: 1px; background: var(--accent); margin: 0 0 36px; } .hero .lead { font-family: 'Inter', sans-serif; font-style: italic; font-weight: 300; font-size: 22px; line-height: 1.55; color: rgba(var(--ink-rgb),0.78); max-width: 44ch; } .hero-meta { display: flex; flex-direction: column; gap: 28px; padding-bottom: 8px; justify-content: space-between; } .hero-stats { display: flex; flex-direction: column; gap: 30px; padding-left: 32px; border-left: 1px solid var(--accent); } .hero-stat-item { display: flex; flex-direction: column; gap: 6px; } .hero-stat-num { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 38px; line-height: 1; color: var(--ink); letter-spacing: -0.005em; } .hero-stat-label { font-family: 'Inter', sans-serif; font-style: italic; font-size: 14px; line-height: 1.5; color: rgba(var(--ink-rgb),0.65); max-width: 38ch; } .hero-cta { display: flex; gap: 32px; align-items: center; margin-top: 64px; } .hero-corner { position: absolute; bottom: 56px; right: 56px; font-family: 'Inter', sans-serif; font-style: italic; font-size: 13px; color: rgba(var(--accent-rgb),0.55); letter-spacing: 0.04em; } /* --- Homepage claims / evidence band --- */ .claims { background: var(--bone); padding: 88px 0; position: relative; } .claims::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rule); } .claims-head { text-align: center; margin-bottom: 80px; } .claims-head .label-sc { color: var(--accent-deep); } .claims-head h3 { font-family: 'Inter', sans-serif; font-style: italic; font-weight: 400; font-size: 24px; color: var(--ink); margin-top: 14px; } .claims-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; position: relative; } .claims-grid::before, .claims-grid::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(var(--ink-rgb),0.10); } .claims-grid::before { left: 33.33%; } .claims-grid::after { left: 66.66%; } .claim { display: flex; flex-direction: column; gap: 18px; padding: 0 16px; text-align: center; align-items: center; } .claim .roman { color: var(--accent-deep); margin-bottom: 4px; } .claim .claim-pillar { font-family: 'Inter', sans-serif; font-style: italic; font-weight: 400; font-size: 17px; color: var(--accent-deep); line-height: 1.4; max-width: 28ch; min-height: 44px; display: flex; align-items: center; justify-content: center; } .claim .num { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 84px; line-height: 1; color: var(--ink); letter-spacing: -0.015em; } .claim .num em { font-style: italic; color: var(--accent-deep); } .claim .num small { font-family: 'Inter', sans-serif; font-style: italic; font-weight: 400; font-size: 28px; color: var(--accent-deep); } .claim .body { font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 30ch; } .claim .source { font-family: 'Inter', sans-serif; font-size: 9px; color: var(--graphite); letter-spacing: 0.22em; text-transform: uppercase; margin-top: 12px; } /* --- Homepage approach band --- */ .approach { background: var(--bone); color: var(--ink); padding: 96px 0; position: relative; } .approach::before, .approach::after { content: ''; position: absolute; left: 56px; right: 56px; height: 1px; background: var(--rule-soft); } .approach::before { top: 0; } .approach::after { bottom: 0; } .approach-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 96px; align-items: center; } .approach .roman { color: var(--ink); } .approach .label-sc { margin-bottom: 14px; display: block; margin-top: 8px; } .approach h2 { font-family: 'Inter', sans-serif; font-weight: 300; font-style: italic; font-size: 56px; line-height: 1.05; margin-top: 18px; max-width: 14ch; color: var(--ink); letter-spacing: -0.01em; } .approach h2 em { font-style: normal; color: var(--accent); } .approach-body p { font-family: 'Inter', sans-serif; font-size: 19px; line-height: 1.65; color: rgba(var(--ink-rgb),0.85); margin-bottom: 24px; } .approach-body p:first-child::first-letter { font-family: 'Inter', sans-serif; font-weight: 500; font-style: normal; font-size: 64px; line-height: 0.9; float: left; padding-right: 12px; padding-top: 8px; color: var(--accent); } .approach-body .read-more { display: inline-flex; align-items: center; gap: 14px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); margin-top: 24px; padding-bottom: 6px; border-bottom: 1px solid var(--accent); } .approach-body .read-more::after { content: '\2192'; font-family: 'Inter', sans-serif; font-size: 14px; } /* --- Homepage portfolio band --- */ .portfolio { background: var(--bone-warm); padding: 96px 0; } .section-head { text-align: center; margin-bottom: 80px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .section-head h2 { font-family: 'Inter', sans-serif; font-weight: 300; font-style: italic; font-size: 52px; line-height: 1.05; color: var(--ink); letter-spacing: -0.01em; } .section-head h2 em { font-style: normal; color: var(--accent-deep); } .section-head .roman { color: var(--accent-deep); } .section-head .all-link { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; color: var(--ink); border-bottom: 1px solid var(--accent-deep); padding-bottom: 5px; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 18px; } .projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; } .project-card { background: var(--bone); color: var(--ink); border: 1px solid transparent; transition: border-color 0.2s; cursor: pointer; } .project-card:hover { border-color: var(--accent); } .project-image { background: var(--bone); height: 280px; position: relative; border-bottom: 1px solid var(--rule-soft); } .project-image::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0, transparent 24px, rgba(var(--accent-rgb),0.04) 24px, rgba(var(--accent-rgb),0.04) 25px); } .project-image .placeholder-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-style: italic; font-size: 14px; color: rgba(var(--ink-rgb),0.30); letter-spacing: 0.05em; text-align: center; padding: 0 20px; } .project-meta { padding: 36px; } .project-meta .label-sc { color: var(--ink); margin-bottom: 16px; display: block; } .project-meta h3 { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--ink); margin-bottom: 22px; letter-spacing: -0.005em; } .project-meta .specs { display: flex; flex-direction: column; gap: 0; font-family: 'Inter', sans-serif; font-size: 14px; color: rgba(var(--ink-rgb),0.72); } .project-meta .specs .row { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--rule); gap: 16px; } .project-meta .specs .row span:first-child { font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); padding-top: 3px; white-space: nowrap; } .project-meta .specs .row span:last-child { font-style: italic; text-align: right; } /* --- Homepage sectors band --- */ .sectors { background: var(--bone); color: var(--ink); padding: 96px 0; } .sectors .section-head h2 { color: var(--ink); } .sectors .section-head h2 em { color: var(--accent); } .sectors .section-head .roman { color: var(--ink); } .sectors .section-head .label-sc { color: var(--ink); } .sectors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .sector { padding: 36px 28px; border: 1px solid var(--rule-soft); transition: border-color 0.2s, transform 0.15s; cursor: pointer; min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .sector .sector-photo { margin: -36px -28px 22px; height: 180px; overflow: hidden; } .sector .sector-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; } .sector:hover .sector-photo img { transform: scale(1.04); } .sector:hover { border-color: var(--accent); transform: translateY(-2px); } .sector .label-sc { color: var(--ink); margin-bottom: 18px; display: block; } .sector h3 { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--ink); margin-bottom: 14px; letter-spacing: -0.005em; } .sector h3 em { font-style: italic; color: var(--accent); } .sector .descriptor { font-family: 'Inter', sans-serif; font-style: italic; font-size: 15px; color: rgba(var(--ink-rgb),0.72); line-height: 1.5; margin-bottom: 24px; } .sector .specs { display: flex; flex-direction: column; gap: 14px; font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(var(--ink-rgb),0.55); padding-top: 16px; border-top: 1px solid var(--rule); } .sector .specs .row { display: flex; flex-direction: column; gap: 4px; } .sector .specs .row span:first-child { font-family: 'Inter', sans-serif; font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); } .sector .specs .row span + span { font-family: 'Inter', sans-serif; font-size: 14px; color: rgba(var(--ink-rgb),0.85); line-height: 1.4; } .sector .visit { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; } .sector .visit::after { content: '\2192'; } /* --- Homepage sustainability band --- */ .sustain { background: var(--bone-warm); padding: 96px 0; position: relative; } .sustain-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 96px; align-items: start; } .sustain .roman { color: var(--accent-deep); } .sustain .label-sc { color: var(--accent-deep); margin-bottom: 14px; display: block; margin-top: 8px; } .sustain h2 { font-family: 'Inter', sans-serif; font-weight: 300; font-style: italic; font-size: 56px; line-height: 1.05; margin-top: 18px; max-width: 14ch; color: var(--ink); letter-spacing: -0.01em; } .sustain h2 em { font-style: normal; color: var(--accent-deep); } .sustain-body p { font-family: 'Inter', sans-serif; font-size: 18px; line-height: 1.65; color: var(--ink); margin-bottom: 24px; } .sustain-body p:first-child::first-letter { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 60px; line-height: 0.9; float: left; padding-right: 12px; padding-top: 6px; color: var(--accent-deep); } .sustain-body .read-more { display: inline-flex; align-items: center; gap: 14px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); margin-top: 24px; padding-bottom: 6px; border-bottom: 1px solid var(--accent-deep); } .sustain-body .read-more::after { content: '\2192'; font-family: 'Inter', sans-serif; font-size: 14px; } .sustain-metrics { display: flex; gap: 24px; margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(var(--ink-rgb),0.10); } .sustain-metric { flex: 1; } .sustain-metric .num { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 36px; line-height: 1; color: var(--accent-deep); margin-bottom: 4px; } .sustain-metric .num em { font-style: italic; } .sustain-metric .label { font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--graphite); } /* --- Homepage contact band --- */ .contact { background: var(--bone); color: var(--ink); padding: 96px 0; position: relative; } .contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; } .contact h2 { font-family: 'Inter', sans-serif; font-weight: 300; font-style: italic; font-size: 60px; line-height: 1.1; color: var(--ink); max-width: 14ch; margin-top: 22px; margin-bottom: 36px; letter-spacing: -0.015em; } .contact h2 em { font-style: normal; color: var(--accent); } .contact .label-sc { color: var(--ink); } .contact .body { font-family: 'Inter', sans-serif; font-size: 19px; line-height: 1.65; color: rgba(var(--ink-rgb),0.82); margin-bottom: 40px; max-width: 44ch; } .contact .form { background: rgba(var(--accent-rgb),0.03); padding: 48px; border: 1px solid var(--rule-soft); } .contact .form .label-sc { color: var(--ink); margin-bottom: 28px; display: block; } .contact .form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; } .contact .form .field span { font-family: 'Inter', sans-serif; font-size: 9px; color: rgba(var(--ink-rgb),0.55); letter-spacing: 0.22em; text-transform: uppercase; } .contact .form .field .input { background: transparent; border: 0; border-bottom: 1px solid var(--rule-soft); color: var(--ink); padding: 8px 0; font-family: 'Inter', sans-serif; font-size: 16px; font-style: italic; width: 100%; } .contact .form .submit { background: transparent; color: var(--ink); font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; padding: 18px 32px; border: 1px solid var(--accent); margin-top: 12px; cursor: pointer; transition: background 0.2s, color 0.2s; } .contact .form .submit:hover { background: var(--accent); color: var(--cta-on-accent); border-color: var(--accent); } /* --- Footer --- */ footer.site-footer { background: var(--bone-warm); color: var(--ink); padding: 96px 0 40px; border-top: 1px solid var(--rule); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 64px; border-bottom: 1px solid var(--rule); } .footer-grid.footer-grid-slim { grid-template-columns: 2fr 1fr; } .footer-grid.footer-grid-trio { grid-template-columns: 1.4fr 1.2fr 1fr; } .footer-site-grid .site-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 32px; } .footer-site-grid .site-grid a { display: block; padding: 0; line-height: 1.4; } .footer-brand .desc { font-family: 'Inter', sans-serif; font-style: italic; font-size: 14px; color: rgba(var(--ink-rgb),0.65); margin-top: 18px; max-width: 32ch; line-height: 1.6; } .footer-col .col-h, .contact-details .detail .col-h { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink); margin-bottom: 22px; } .footer-col a, .footer-col p { display: block; font-family: 'Inter', sans-serif; font-size: 15px; color: rgba(var(--ink-rgb),0.72); padding: 5px 0; line-height: 1.5; } .footer-col a:hover { color: var(--accent); } .footer-bottom { display: flex; justify-content: space-between; padding-top: 32px; font-family: 'Inter', sans-serif; font-size: 9px; color: rgba(var(--ink-rgb),0.40); letter-spacing: 0.22em; text-transform: uppercase; } .footer-bottom a.footer-link { color: rgba(var(--ink-rgb),0.55); text-decoration: none; transition: color 0.2s; } .footer-bottom a.footer-link:hover { color: var(--accent); } /* =================================================================== INNER PAGE COMPONENTS =================================================================== */ /* --- Inner page hero --- */ .page-hero { background: var(--bone-warm); color: var(--ink); padding: 96px 0 64px; position: relative; } .page-hero::after { content: ''; position: absolute; left: 56px; right: 56px; bottom: 0; height: 1px; background: var(--rule-soft); } .breadcrumb { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--ink-rgb),0.5); margin-bottom: 36px; display: flex; gap: 10px; } .breadcrumb a { color: var(--ink); } .breadcrumb a:hover { color: var(--ink); } .breadcrumb span.sep { color: rgba(var(--ink-rgb),0.3); } .page-hero .eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; } .page-hero .eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--accent); } .page-hero h1 { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 68px; line-height: 1.04; color: var(--ink); letter-spacing: -0.015em; max-width: 18ch; } .page-hero h1 em { font-style: italic; color: var(--accent); } .page-hero .lead { font-family: 'Inter', sans-serif; font-style: italic; font-weight: 300; font-size: 21px; line-height: 1.55; color: rgba(var(--ink-rgb),0.78); max-width: 52ch; margin-top: 28px; } /* --- Generic content section --- */ .page-section { padding: 88px 0; background: var(--bone); } .page-section.navy { background: var(--bone-warm); color: var(--ink); } .page-section.soft { background: var(--bone); } .page-section.mid { background: var(--bone-warm); } .page-section.mid .index-card { background: var(--bone); } .page-section.mid .index-card .img-ph { background: var(--bone); } .section-title { font-family: 'Inter', sans-serif; font-weight: 300; font-style: italic; font-size: 44px; line-height: 1.1; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 12px; } .section-title em { font-style: normal; color: var(--accent-deep); } .page-section.navy .section-title { color: var(--ink); } .page-section.navy .section-title em { color: var(--accent); } /* --- Prose / long-form article body --- */ .prose { max-width: 720px; overflow-wrap: break-word; word-wrap: break-word; } .prose p { font-family: 'Inter', sans-serif; font-size: 19px; line-height: 1.7; color: var(--ink); margin-bottom: 24px; } .prose.on-navy p { color: rgba(var(--ink-rgb),0.85); } .prose p.intro { font-size: 23px; font-style: italic; line-height: 1.55; color: var(--graphite); margin-bottom: 36px; } .prose.on-navy p.intro { color: rgba(var(--ink-rgb),0.78); } .prose p.dropcap::first-letter { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 64px; line-height: 0.9; float: left; padding-right: 12px; padding-top: 8px; color: var(--accent-deep); } .prose.on-navy p.dropcap::first-letter { color: var(--accent); } .prose h2 { font-family: 'Inter', sans-serif; font-weight: 400; font-style: italic; font-size: 32px; line-height: 1.2; color: var(--ink); margin: 56px 0 18px; letter-spacing: -0.005em; } .prose.on-navy h2 { color: var(--ink); } .prose h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep); margin: 40px 0 14px; } .prose.on-navy h3 { color: var(--ink); } .prose ul, .prose ol { margin: 0 0 24px 22px; } .prose li { font-family: 'Inter', sans-serif; font-size: 19px; line-height: 1.65; color: var(--ink); margin-bottom: 8px; } .prose.on-navy li { color: rgba(var(--ink-rgb),0.85); } .prose a.inline { color: var(--accent-deep); border-bottom: 1px solid var(--rule-soft); } .prose.on-navy a.inline { color: var(--ink); } .prose blockquote { border-left: 2px solid var(--accent); padding-left: 28px; margin: 36px 0; } .prose blockquote p { font-style: italic; font-size: 22px; color: var(--graphite); } /* --- Pull quote --- */ .pullquote { text-align: center; max-width: 800px; margin: 0 auto; padding: 24px 0; } .pullquote .mark { width: 48px; height: 1px; background: var(--accent); margin: 0 auto 32px; } .pullquote p { font-family: 'Inter', sans-serif; font-style: italic; font-weight: 300; font-size: 38px; line-height: 1.25; color: var(--ink); letter-spacing: -0.01em; } .page-section.navy .pullquote p { color: var(--ink); } .pullquote p em { font-style: normal; color: var(--accent-deep); } .page-section.navy .pullquote p em { color: var(--accent); } .pullquote .attr { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--graphite); margin-top: 28px; } /* --- Two-column editorial --- */ .two-col { display: grid; grid-template-columns: 1fr 1.5fr; gap: 88px; align-items: start; } /* Contact page two-col override is desktop-only so the @media stack rule wins on mobile. */ @media (min-width: 961px) { .two-col.contact-two-col { grid-template-columns: 1fr 1.4fr; gap: 56px; } } .two-col .col-label .roman { color: var(--accent-deep); } .two-col .col-label .label-sc { color: var(--accent-deep); display: block; margin: 10px 0 16px; } .two-col .col-label h2 { font-family: 'Inter', sans-serif; font-weight: 300; font-style: italic; font-size: 46px; line-height: 1.08; color: var(--ink); letter-spacing: -0.01em; } .two-col .col-label h2 em { font-style: normal; color: var(--accent-deep); } .page-section.navy .two-col .col-label .roman, .page-section.navy .two-col .col-label .label-sc { color: var(--ink); } .page-section.navy .two-col .col-label h2 { color: var(--ink); } .page-section.navy .two-col .col-label h2 em { color: var(--accent); } /* --- Levers grid (Method page two-col: value levers + governance) --- */ .levers-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 88px; align-items: start; } /* --- Sustainability page two-col blocks --- */ .standard-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; } .standard-grid .standard-art { max-width: 380px; margin-left: auto; } .standard-grid .standard-art img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 12px; } .standard-grid .standard-art .caption { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-deep); margin-top: 14px; text-align: center; } .standard-grid.wide-art { grid-template-columns: 1fr 1fr; } .standard-grid.wide-art .standard-art { max-width: none; } .audit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } /* --- Index card grid (portfolio / news / sector landings) --- */ .index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .index-grid.two { grid-template-columns: repeat(2, 1fr); } .index-grid.centered { max-width: 880px; margin-left: auto; margin-right: auto; } .index-card { background: var(--bone-warm); color: var(--ink); border: 1px solid var(--rule); transition: border-color 0.2s, transform 0.15s; display: block; } .index-card:hover { border-color: var(--accent); transform: translateY(-2px); } .index-card .img-ph { height: 220px; } .index-card .body { padding: 32px; } .index-card .label-sc { color: var(--ink); display: block; margin-bottom: 14px; } .index-card h3 { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--ink); margin-bottom: 12px; } .index-card p { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.55; color: rgba(var(--ink-rgb),0.7); } .index-card .meta-row { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--ink-rgb),0.55); } /* --- Image placeholder (reusable) --- */ .img-ph { background: var(--bone-warm); position: relative; border: 1px solid var(--rule-soft); overflow: hidden; } .img-ph::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0, transparent 24px, rgba(var(--accent-rgb),0.04) 24px, rgba(var(--accent-rgb),0.04) 25px); } .img-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 2; } .img-ph .ph-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: 'Inter', sans-serif; font-style: italic; font-size: 14px; color: rgba(var(--ink-rgb),0.34); letter-spacing: 0.05em; text-align: center; padding: 0 24px; z-index: 1; } .img-ph .ph-label .tag { font-family: 'Inter', sans-serif; font-style: normal; font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); } .img-ph.tall { aspect-ratio: 3 / 4; } .img-ph.wide { aspect-ratio: 16 / 9; } .img-ph.banner { height: 480px; } .img-ph.banner.news-photo { height: auto; aspect-ratio: 16 / 9; } .img-ph.banner.news-photo img { object-position: center 35%; } .img-ph img, .project-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; display: block; } .venture-logo { display: block; height: 56px; width: auto; } /* --- D3 section illustration block (Gemini-produced architect plates) --- */ .section-illustration { padding: 56px 0 32px; text-align: center; background: var(--bone); position: relative; z-index: 1; } .section-illustration img { display: block; max-width: 100%; width: auto; height: auto; margin: 0 auto; border-radius: 16px; } .section-illustration .caption { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-deep); margin-top: 20px; } .section-illustration img.portrait { max-height: 720px; } .section-illustration img.landscape { max-width: 1080px; } .section-illustration img.wide { max-width: 1180px; } /* --- Section illustration paired with side prose (image-left layout) --- */ .section-illustration.with-text { padding: 72px 0; text-align: left; background: var(--bone); } .section-illustration.with-text .wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: start; } .section-illustration.with-text.text-left .wrap { grid-template-columns: 1.2fr 1fr; } .section-illustration.with-text .art { text-align: center; } .section-illustration.with-text .art img { max-height: 760px; max-width: 100%; } .section-illustration.with-text .art .caption { margin-top: 18px; } .section-illustration.with-text .side-prose h2 { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 38px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 24px; } .section-illustration.with-text .side-prose h2 em { font-style: italic; color: var(--accent); } .section-illustration.with-text .side-prose p { font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0 0 18px; } .section-illustration.with-text .side-prose p.lead-tight { font-size: 19px; line-height: 1.55; color: var(--ink); } .section-illustration.with-text .side-prose .step-list { margin: 32px 0 0; padding: 0; list-style: none; } .section-illustration.with-text .side-prose .step-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); } .section-illustration.with-text .side-prose .step-list li:last-child { border-bottom: 1px solid var(--rule); } .section-illustration.with-text .side-prose .step-list .step-num { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-deep); padding-top: 4px; } .section-illustration.with-text .side-prose .step-list .step-body { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.5; color: var(--ink); } .section-illustration.with-text .side-prose .step-list .step-body strong { display: block; font-weight: 500; font-size: 17px; color: var(--ink); margin-bottom: 4px; } @media (max-width: 900px) { .section-illustration.with-text .wrap { grid-template-columns: 1fr; gap: 48px; } .section-illustration.with-text .side-prose h2 { font-size: 30px; } } /* --- Trusted by band --- */ .trusted-band { background: var(--bone-warm); border-top: 1px solid rgba(var(--accent-rgb), 0.22); border-bottom: 1px solid rgba(var(--accent-rgb), 0.22); padding: 64px 0; } .trusted-band .trusted-head { text-align: center; max-width: 760px; margin: 0 auto 56px; } .trusted-band .trusted-head .label-sc { color: var(--accent-deep); margin-bottom: 14px; display: inline-block; } .trusted-band .trusted-title { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 40px; line-height: 1.12; letter-spacing: -0.012em; color: var(--ink); margin: 0 0 16px; } .trusted-band .trusted-title em { font-style: italic; color: var(--accent); } .trusted-band .trusted-sub { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.55; color: var(--graphite); margin: 0; } .trusted-band .logos-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 48px 48px; align-items: center; justify-items: center; } .trusted-band .logo-tile { display: flex; align-items: center; justify-content: center; height: 100px; width: 100%; padding: 8px 12px; opacity: 0.85; transition: opacity 0.35s ease, transform 0.35s ease; } .trusted-band .logo-tile:hover { opacity: 1; transform: translateY(-2px); } .trusted-band .logo-tile img { max-height: 76px; max-width: 82%; width: auto; height: auto; object-fit: contain; display: block; } /* Square / portrait logos get a taller cap so they read at similar visual weight to horizontals */ .trusted-band .logo-tile img[src*="partner-moh"], .trusted-band .logo-tile img[src*="partner-masic"], .trusted-band .logo-tile img[src*="partner-neom"], .trusted-band .logo-tile img[src*="partner-diriyah"], .trusted-band .logo-tile img[src*="partner-greap"] { max-height: 84px; max-width: 88%; } .trusted-band .logo-tile.wordmark span { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); } .trusted-band .trusted-also { font-family: 'Inter', sans-serif; font-style: italic; font-size: 13px; line-height: 1.6; color: var(--graphite); text-align: center; margin: 56px auto 0; max-width: 820px; } @media (max-width: 900px) { .trusted-band .logos-grid { grid-template-columns: repeat(5, 1fr); gap: 32px 32px; } .trusted-band .trusted-title { font-size: 32px; } .trusted-band .logo-tile { height: 72px; } } @media (max-width: 600px) { .trusted-band { padding: 64px 0; } .trusted-band .logos-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .trusted-band .logo-tile { height: 80px; } } /* --- Award placements (Recognition stream) --- */ .img-ph.award { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; background: var(--bone-warm); } .img-ph.award::after { display: none; } .img-ph.award .award-logo { max-width: 60%; max-height: 56%; width: auto; height: auto; position: relative; inset: auto; object-fit: contain; z-index: 2; display: block; } .img-ph.award .award-cap { font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-deep); text-align: center; line-height: 1.5; } .img-ph.banner.award { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 56px 24px; } .img-ph.banner.award .award-logo { max-width: 320px; max-height: 220px; } .img-ph.banner.award .award-cap { font-size: 11px; } .img-ph.banner.event-card { aspect-ratio: 1 / 1; max-width: 540px; height: auto; margin: 40px auto; } .img-ph.banner.event-card img { position: relative; inset: auto; width: 100%; height: 100%; object-fit: contain; } /* --- Inline figures within prose --- */ .prose figure { margin: 36px 0; } .prose figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); } .prose figure.card-inline { max-width: 420px; margin: 36px auto; } .prose figure.card-inline img { border: 0; } .prose figure figcaption { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.02em; color: var(--accent-deep); text-align: center; margin-top: 12px; line-height: 1.5; } /* --- Entry hero (portfolio scheme / news article) --- */ .entry-hero { background: var(--bone-warm); color: var(--ink); padding: 88px 0 0; } .entry-hero .entry-head { max-width: 900px; } .entry-hero h1 { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 60px; line-height: 1.05; color: var(--ink); letter-spacing: -0.015em; margin: 24px 0; } .entry-hero h1 em { font-style: italic; color: var(--accent); } .entry-hero .entry-meta { display: flex; gap: 28px; font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--ink-rgb),0.6); margin-bottom: 48px; } .entry-hero .entry-meta span.gold { color: var(--ink); } .entry-hero .img-ph.banner { margin-top: 8px; border-left: 0; border-right: 0; } /* --- Spec panel (scheme details) --- */ .spec-panel { border: 1px solid var(--rule-soft); } .spec-panel .spec-row { display: flex; justify-content: space-between; gap: 24px; padding: 16px 24px; border-bottom: 1px solid var(--rule); } .spec-panel .spec-row:last-child { border-bottom: 0; } .spec-panel .spec-row .k { font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-deep); padding-top: 4px; white-space: nowrap; } .spec-panel .spec-row .v { font-family: 'Inter', sans-serif; font-style: italic; font-size: 17px; color: var(--ink); text-align: right; } .page-section.navy .spec-panel .spec-row .v { color: var(--ink); } /* --- Team grid --- */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } .team-grid.two { grid-template-columns: repeat(2, 1fr); max-width: 920px; margin: 0 auto; gap: 96px; } .team-card .img-ph.tall { margin-bottom: 24px; } .team-card h2 { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 24px; color: var(--ink); margin: 0; letter-spacing: -0.005em; } .page-section.navy .team-card h2 { color: var(--ink); } .team-card .role { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-deep); margin: 8px 0 16px; } .team-card .bio { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; color: var(--graphite); } .page-section.navy .team-card .bio { color: rgba(var(--ink-rgb),0.75); } .team-card .post-noms { font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-top: 12px; } .team-card .team-linkedin { display: inline-flex; align-items: center; margin-top: 18px; color: #0A66C2; transition: color 0.2s ease, transform 0.2s ease; } .team-card .team-linkedin:hover { color: #004182; transform: translateY(-1px); } .team-card .team-linkedin svg { width: 26px; height: 26px; display: block; } /* --- News list --- */ .news-list { display: flex; flex-direction: column; } .news-item { display: grid; grid-template-columns: 200px 1fr auto; gap: 40px; padding: 40px 0; border-top: 1px solid var(--rule-light); align-items: baseline; } .news-item:last-child { border-bottom: 1px solid var(--rule-light); } .news-item .date { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep); } .news-item h2 { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--ink); margin: 0 0 10px; letter-spacing: -0.005em; } .news-item p { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.55; color: var(--graphite); max-width: 56ch; } .news-item .arrow { font-family: 'Inter', sans-serif; font-size: 20px; color: var(--accent-deep); } .news-item:hover h2 { color: var(--accent-deep); } /* --- CTA band (reusable bottom-of-page prompt) --- */ .cta-band { background: var(--bone-warm); color: var(--ink); padding: 96px 0; text-align: center; border-top: 1px solid var(--rule); } .cta-band.light { background: var(--bone); border-top: 0; } .cta-band .label-sc { color: var(--ink); } .cta-band h2 { font-family: 'Inter', sans-serif; font-weight: 300; font-style: italic; font-size: 52px; line-height: 1.1; color: var(--ink); letter-spacing: -0.015em; margin: 16px auto 36px; max-width: 18ch; } .cta-band h2 em { font-style: normal; color: var(--accent); } .cta-band .cta-actions { display: flex; gap: 28px; align-items: center; justify-content: center; } /* --- Placeholder note (marks content needing real input) --- */ .placeholder-note { border: 1px dashed var(--accent); background: rgba(var(--accent-rgb),0.07); padding: 14px 20px; font-family: 'Inter', sans-serif; font-size: 11px; line-height: 1.5; color: var(--accent-deep); letter-spacing: 0.04em; margin: 24px 0; } .placeholder-note strong { color: var(--ink); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 9px; display: block; margin-bottom: 4px; } .page-section.navy .placeholder-note strong, .page-hero .placeholder-note strong { color: var(--ink); } /* --- Visually hidden helper (screen-reader-only heading labels) --- */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* --- Filter / tag bar --- */ .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 56px; } .filter-bar .tag { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--graphite); background: transparent; border: 1px solid var(--rule-light); border-radius: 999px; padding: 10px 20px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; -webkit-appearance: none; appearance: none; } .filter-bar .tag:hover { border-color: var(--accent-deep); color: var(--ink); } .filter-bar .tag.active { border-color: var(--accent); background: var(--accent); color: var(--bone); } .filter-bar .tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .index-card.filter-hidden { display: none; } /* --- Contact details block --- */ .contact-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .contact-details .detail .col-h { color: var(--ink); margin-bottom: 14px; } .contact-details .detail p, .contact-details .detail a { font-family: 'Inter', sans-serif; font-size: 18px; line-height: 1.5; color: var(--ink); display: block; } .contact-details .detail a:hover { color: var(--accent-deep); } /* --- Responsive --- */ @media (max-width: 1100px) { .wrap, .wrap-narrow { padding: 0 32px; } .hero-grid, .approach-grid, .sustain-grid, .contact-inner, .two-col, .levers-grid, .standard-grid, .audit-grid { grid-template-columns: 1fr; gap: 56px; } .claims-grid { grid-template-columns: 1fr; gap: 56px; } .claims-grid::before, .claims-grid::after { display: none; } .projects-grid, .index-grid, .index-grid.two, .team-grid, .contact-details { grid-template-columns: 1fr; } .sectors-grid { grid-template-columns: repeat(2, 1fr); } .hero h1 { font-size: 60px; } .page-hero h1, .entry-hero h1 { font-size: 48px; } nav.primary { gap: 18px; flex-wrap: wrap; } .news-item { grid-template-columns: 1fr; gap: 12px; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid.footer-grid-slim { grid-template-columns: 1fr; } .footer-grid.footer-grid-trio { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 10px; } } /* === Typography unification + curved cards + hover motion === */ .logo-lockup .square { font-weight: 800; letter-spacing: 0.08em; } .project-card, .index-card { border-radius: 24px; overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.2s; } .project-card:hover, .index-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px var(--card-shadow); } .project-image, .img-ph { border-radius: 24px; overflow: hidden; } .project-image img, .img-ph img { transition: transform 0.6s cubic-bezier(.2,.7,.2,1); } .project-card:hover .project-image img, .index-card:hover .img-ph img { transform: scale(1.06); } .sector { border-radius: 24px; transition: transform 0.35s ease, border-color 0.2s ease; } .sector:hover { transform: translateY(-4px); } .team-card .img-ph.tall { border-radius: 24px; overflow: hidden; } .entry-hero .img-ph.banner { border-radius: 32px; overflow: hidden; } .img-ph::after, .project-image::after { display: none; } /* =================================================================== MOTION + INTERACTION LAYER (Track A liveness bundle) =================================================================== */ /* --- Hover micro-interactions --- */ /* Primary CTA: arrow appears and slides on hover */ .btn-primary { padding-right: 28px; position: relative; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, padding-right 0.25s ease; } .btn-primary::after { content: '\2192'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%) translateX(-4px); opacity: 0; transition: opacity 0.28s ease, transform 0.28s ease; font-size: 14px; line-height: 1; } .btn-primary:hover { padding-right: 36px; } .btn-primary:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } /* Inline button-link: subtle right-shift + colour shift on hover */ .btn-link { transition: color 0.22s ease, transform 0.25s ease, border-color 0.22s ease; } .btn-link:hover { color: var(--accent); transform: translateX(2px); } /* Read-more: arrow slides further right on hover */ .read-more { transition: color 0.22s ease, border-color 0.22s ease; } .read-more::after { display: inline-block; transition: transform 0.28s cubic-bezier(.2,.7,.2,1); } .read-more:hover::after { transform: translateX(6px); } /* Inline prose links: animated underline */ .prose a.inline { position: relative; border-bottom: 0; padding-bottom: 1px; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.4s cubic-bezier(.2,.7,.2,1), color 0.22s ease; } .prose a.inline:hover { background-size: 0 1px; background-position: 100% 100%; color: var(--accent-deep); } /* Nav items: subtle lift on hover */ nav.primary a { transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease; } nav.primary a:not(.cta):hover { transform: translateY(-1px); } /* --- Pull-quote: stronger editorial treatment --- */ .pullquote { padding: 56px 0; position: relative; } .pullquote::before { content: '\201C'; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-family: 'Inter', sans-serif; font-style: italic; font-weight: 300; font-size: 96px; color: var(--accent); line-height: 1; opacity: 0.32; pointer-events: none; } .pullquote .mark { width: 64px; height: 1px; background: var(--accent); margin: 0 auto 36px; } .pullquote p { font-family: 'Inter', sans-serif; font-style: italic; font-weight: 300; font-size: 36px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); } .pullquote p em { font-style: normal; color: var(--accent-deep); } .pullquote .attr { margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(var(--accent-rgb), 0.20); display: inline-block; } /* --- Scroll-triggered fade reveals (CSS, paired with site.js) --- */ .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.85s cubic-bezier(.2,.7,.2,1), transform 0.85s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: none; } /* --- Hero illustration: Architect's working drawing (Option A, vertical) --- */ .hero-illustration-wrap { width: 100%; max-width: 600px; align-self: center; margin-left: auto; } .hero-illustration { width: 100%; height: auto; display: block; } .hero-grid > div:first-child { align-self: center; } .hero-illustration .hero-draw { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: hero-illust-draw 2.6s cubic-bezier(.4, 0, .2, 1) forwards; } /* Line weights, layered for visual hierarchy */ .hero-illustration .hero-draw.hair { stroke-width: 0.6; } .hero-illustration .hero-draw.thin { stroke-width: 1; } .hero-illustration .hero-draw.bold { stroke-width: 2; } .hero-illustration .hero-draw.building { stroke-width: 3; } .hero-illustration .hero-draw.cornice { stroke-width: 2.5; } .hero-illustration .hero-draw.floor { stroke-width: 1.8; } .hero-illustration .hero-draw.window { stroke-width: 0.9; } /* Eight-stage choreography: title block, foundation, building, floors, annotations bottom to top */ .hero-illustration .hero-delay-1 .hero-draw { animation-delay: 0.0s; } .hero-illustration .hero-delay-2 .hero-draw { animation-delay: 0.30s; } .hero-illustration .hero-delay-3 .hero-draw { animation-delay: 0.55s; } .hero-illustration .hero-delay-4 .hero-draw { animation-delay: 0.85s; } .hero-illustration .hero-delay-5 .hero-draw { animation-delay: 1.10s; } .hero-illustration .hero-delay-6 .hero-draw { animation-delay: 1.40s; } .hero-illustration .hero-delay-7 .hero-draw { animation-delay: 1.70s; } .hero-illustration .hero-delay-8 .hero-draw { animation-delay: 2.00s; } /* Text elements: labels, numbers, annotations, meta text. Fade in after their strokes draw. */ .hero-illustration .hero-label, .hero-illustration .hero-num, .hero-illustration .hero-anno, .hero-illustration .hero-meta-text { font-family: 'Inter', sans-serif; fill: var(--accent); opacity: 0; animation: hero-illust-fade 0.55s ease forwards; } .hero-illustration .hero-label { font-size: 14px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } .hero-illustration .hero-num { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; } .hero-illustration .hero-anno { font-size: 9px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--accent-deep); } .hero-illustration .hero-meta-text { font-size: 8px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; fill: var(--graphite); } .hero-illustration .hero-f1 { animation-delay: 1.30s; } .hero-illustration .hero-f2 { animation-delay: 1.60s; } .hero-illustration .hero-f3 { animation-delay: 1.90s; } .hero-illustration .hero-f4 { animation-delay: 2.20s; } .hero-illustration .hero-fmeta { animation-delay: 0.40s; } .hero-illustration .hero-fall { animation-delay: 2.40s; } @keyframes hero-illust-draw { to { stroke-dashoffset: 0; } } @keyframes hero-illust-fade { to { opacity: 1; } } @media (max-width: 1100px) { .hero-illustration-wrap { align-self: center; max-width: 360px; margin-left: 0; } .hero-grid > div:first-child { align-self: stretch; } } /* --- D4 v5 ambient drift dot grid (body-level, fixed) --- */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle, rgba(var(--accent-rgb), 0.30) 1.6px, transparent 1.6px); background-size: 24px 24px; background-position: 0 0; animation: ambient-drift 18s linear infinite; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(0,0,0,0.85), rgba(0,0,0,0)); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(0,0,0,0.85), rgba(0,0,0,0)); } @keyframes ambient-drift { 0% { background-position: 0px 0px; } 50% { background-position: -24px 48px; } 100% { background-position: 0px 144px; } } /* Make sure all page content sits above the ambient layer */ body > * { position: relative; z-index: 1; } /* --- D2 page transitions (CSS view-transitions API, cross-document) --- */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: page-fade-out 220ms cubic-bezier(.4, 0, .2, 1) forwards; } ::view-transition-new(root) { animation: page-fade-in 280ms cubic-bezier(.2, .7, .2, 1) forwards; } @keyframes page-fade-out { to { opacity: 0; transform: translateY(-8px); } } @keyframes page-fade-in { from { opacity: 0; transform: translateY(12px); } } /* --- prefers-reduced-motion: turn the lot off --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1 !important; transform: none !important; } .project-card:hover, .index-card:hover, .sector:hover, .team-card:hover, nav.primary a:hover { transform: none !important; } .project-card:hover .project-image img, .index-card:hover .img-ph img { transform: none !important; } .hero-illustration .hero-draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; } .hero-illustration .hero-label, .hero-illustration .hero-num, .hero-illustration .hero-anno, .hero-illustration .hero-meta-text { opacity: 1 !important; animation: none !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } body::before { animation: none !important; } } /* === Enquiry form: real inputs, honeypot, status === */ .contact .form .field label { display: block; line-height: 1; } .contact .form .field input.input, .contact .form .field textarea.input { -webkit-appearance: none; appearance: none; border-radius: 0; outline: none; } .contact .form .field textarea.input { resize: vertical; min-height: 110px; font-style: italic; line-height: 1.5; } .contact .form .field input.input:focus, .contact .form .field textarea.input:focus { border-bottom-color: var(--accent); } .contact .form .field input.input::placeholder, .contact .form .field textarea.input::placeholder { color: rgba(var(--ink-rgb), 0.40); font-style: italic; } .contact .form .submit { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; padding: 18px 32px; background: transparent; color: var(--ink); border: 1px solid var(--accent); margin-top: 12px; cursor: pointer; transition: background 0.2s, color 0.2s; } .contact .form .submit:hover { background: var(--accent); color: var(--cta-on-accent); } .contact .form .submit:disabled { opacity: 0.55; cursor: not-allowed; } .contact .form .hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .contact .form .enquiry-status { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.5; color: var(--graphite); margin-top: 18px; min-height: 1.5em; } .contact .form .enquiry-status[data-state="ok"] { color: var(--accent-deep); } .contact .form .enquiry-status[data-state="err"] { color: #B0413E; } /* DARK MODE second block: form error colour. Hybrid behaviour, mirrors the main block above. */ html[data-theme="dark"] .contact .form .enquiry-status[data-state="err"] { color: #F08C8A; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .contact .form .enquiry-status[data-state="err"] { color: #F08C8A; } } /* DARK MODE third block: cream-baked illustration plates only. illustration-sustainability-v2 + illustration-partnerships-v2 (.standard-art) and news-the-handover-gap (.illustration-plate) were authored with cream backgrounds baked in. The CSS dim blends the cream into the dark page; the thin sage outline frames the plate as intentional; hover restores full brightness for legibility. Real photographs (portfolio entry banners and the other news article banners) deliberately receive no filter so they retain their tonal range against the dark surface. */ html[data-theme="dark"] .standard-art img, html[data-theme="dark"] .illustration-plate img { filter: brightness(0.78); outline: 1px solid rgba(107, 181, 127, 0.32); outline-offset: 0; transition: filter 0.25s; } html[data-theme="dark"] .standard-art img:hover, html[data-theme="dark"] .illustration-plate img:hover { filter: brightness(1); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .standard-art img, html:not([data-theme="light"]) .illustration-plate img { filter: brightness(0.78); outline: 1px solid rgba(107, 181, 127, 0.32); outline-offset: 0; transition: filter 0.25s; } html:not([data-theme="light"]) .standard-art img:hover, html:not([data-theme="light"]) .illustration-plate img:hover { filter: brightness(1); } } /* DARK MODE fourth block: partner logo treatment. Most partner logos are dark line marks on transparent PNGs designed for the cream brand surface. On the dark navy band they would render at low contrast. In dark mode we render them as white silhouettes via a filter stack: grayscale removes any baked-in colour, brightness(0) collapses every visible pixel to black, then invert(1) flips the result to pure white, then opacity(0.78) softens the silhouette so it reads as logo-of-trust rather than a hard-edged stencil. This produces a consistent press-band of white marks across all logos, regardless of the source asset. No per-tile chip, no border-radius, no cream card. The same filter applies to the venture logos. Award badges and event cards are handled in the next block. */ html[data-theme="dark"] .trusted-band .logo-tile img, html[data-theme="dark"] img.venture-logo { filter: grayscale(1) brightness(0) invert(1) opacity(0.78); transition: filter 0.25s ease, opacity 0.25s ease; } html[data-theme="dark"] .trusted-band .logo-tile:hover img, html[data-theme="dark"] img.venture-logo:hover { filter: grayscale(1) brightness(0) invert(1) opacity(1); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .trusted-band .logo-tile img, html:not([data-theme="light"]) img.venture-logo { filter: grayscale(1) brightness(0) invert(1) opacity(0.78); transition: filter 0.25s ease, opacity 0.25s ease; } html:not([data-theme="light"]) .trusted-band .logo-tile:hover img, html:not([data-theme="light"]) img.venture-logo:hover { filter: grayscale(1) brightness(0) invert(1) opacity(1); } } /* AWARD + EVENT-CARD BANNERS: switch the surface from bone-warm (slightly sage-tinted) to a clean neutral cream so the certificate-style badge reads as paper, not as a brand-tinted panel. Works in both modes. Subtle 1 px sage-rule frame echoes the brand without competing with the badge artwork. */ .img-ph.banner.award, .img-ph.banner.event-card, .img-ph.award { background: #F7F4ED; border: 1px solid rgba(var(--ink-rgb), 0.06); } /* (Labeled illustration overlay system removed. Text labels are now baked into the v2 watercolour illustrations by Ideogram/Gemini, so no HTML overlay or .art-canvas wrapper is needed.) */ /* ===================================================================== RESPONSIVE: stack all multi-column layouts on tablet / mobile. Site was authored desktop-first; this block fills the responsive gap. ===================================================================== */ /* Tablet portrait and below: stack the two-column content grids. */ @media (max-width: 960px) { .wrap, .wrap-narrow { padding: 0 32px; } .hero-grid, .approach-grid, .sustain-grid, .contact-inner, .standard-grid, .standard-grid.wide-art, .audit-grid, .levers-grid, .two-col, .section-illustration.with-text .wrap, .section-illustration.with-text.text-left .wrap { grid-template-columns: 1fr; gap: 48px; } /* Standard art (sustainability/partnerships): full width on stack, no upper max-width. */ .standard-grid .standard-art, .standard-grid.wide-art .standard-art { max-width: none; margin: 0 auto; } /* Three- and four-column grids step down one level. */ .claims-grid { grid-template-columns: 1fr; gap: 48px; } .projects-grid { grid-template-columns: 1fr; gap: 32px; } .sectors-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .index-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } .index-grid.two { grid-template-columns: 1fr; } /* Hero typography down a tier so it doesn't overflow on tablet. */ .hero h1 { font-size: 56px; } .hero .lead { font-size: 18px; } .page-hero h1 { font-size: 48px; } .page-hero .lead { font-size: 18px; } .approach h2, .sustain h2, .contact h2 { font-size: 40px; } /* Footer grids stack. */ .footer-grid, .footer-grid.footer-grid-slim, .footer-grid.footer-grid-trio { grid-template-columns: 1fr; gap: 40px; } .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; } } /* Mobile: tighter padding, smaller type, hide illustration overlay labels (they overlap when the image renders this small). */ @media (max-width: 600px) { .wrap, .wrap-narrow { padding: 0 20px; } .hero { padding: 56px 0 64px; } .hero h1 { font-size: 44px; line-height: 1.02; } .hero .lead { font-size: 17px; } .page-hero { padding: 48px 0 56px; } .page-hero h1 { font-size: 36px; } .approach h2, .sustain h2, .contact h2 { font-size: 32px; } .sectors-grid { grid-template-columns: 1fr; gap: 24px; } .index-grid { grid-template-columns: 1fr; } /* Flex rows that can overrun at small viewports. The .sustain-metrics row carries three large numbers (36 px) that do not shrink below their content by default. Wrap them onto a new line and shrink the type so the band never pushes the page wider than the viewport. */ .sustain-metrics { flex-wrap: wrap; gap: 18px 24px; } .sustain-metric { min-width: 0; flex: 1 1 40%; } .sustain-metric .num { font-size: 28px; } .hero-cta { flex-wrap: wrap; gap: 18px; } .hero-stats { padding-left: 24px; } .cta-band .cta-actions { flex-wrap: wrap; gap: 18px; } .filter-bar { gap: 8px; } .filter-bar .tag { padding: 8px 14px; font-size: 9px; } } /* ===================================================================== MOBILE NAV: hamburger drawer. Desktop nav.primary stays as-is. Below 960px the inline nav hides and a hamburger button reveals a slide-down drawer. ===================================================================== */ .nav-toggle { display: none; background: transparent; border: 1px solid var(--accent); color: var(--accent); width: 40px; height: 40px; cursor: pointer; padding: 0; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .nav-toggle:hover { background: var(--accent); color: var(--cta-on-accent); } .nav-toggle svg { width: 18px; height: 18px; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } @media (max-width: 960px) { .nav-toggle { display: inline-flex; } nav.primary { position: fixed; inset: 0; background: var(--bone-warm); flex-direction: column; gap: 20px; padding: 96px 32px 32px; z-index: 50; transform: translateY(-100%); transition: transform 0.28s ease; overflow-y: auto; } nav.primary.is-open { transform: translateY(0); } nav.primary a { font-size: 14px; padding: 8px 0; opacity: 1; } nav.primary a.cta { padding: 12px 22px; align-self: flex-start; } /* The theme toggle moves into the drawer with the nav links. */ nav.primary .theme-toggle { margin: 8px 0 0; } /* Site header gets relative positioning so the toggle can sit inside it. */ header.site-header { position: sticky; top: 0; z-index: 60; } .header-inner { position: relative; z-index: 70; } }