/* The Brand Aid — shared stylesheet */ /* Dark mode via [data-theme="dark"] on */ /* ── Fonts ─────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'); /* ── Design tokens (light) ──────────────────────── */ :root { --black: #1A1A1A; --white: #FFFFFF; --warm: #F8F7F4; --warm2: #EDEAE4; --grey: #888888; --mid: #555555; --light: #CCCCCC; --border: rgba(0,0,0,0.08); --font: 'Manrope', -apple-system, Arial, sans-serif; /* Transitions */ --t: color .2s, background-color .2s, border-color .2s; } /* ── Design tokens (dark) ───────────────────────── */ [data-theme="dark"] { --black: #E8E8E8; --white: #111111; --warm: #1C1C1C; --warm2: #252525; --grey: #888888; --mid: #A0A0A0; --light: #555555; --border: rgba(255,255,255,0.08); } /* ── Reset ──────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--white); color: var(--black); -webkit-font-smoothing: antialiased; transition: var(--t); } /* ── Nav ────────────────────────────────────────── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--white); display: flex; align-items: center; justify-content: space-between; padding: 0 60px; height: 68px; border-bottom: 1px solid var(--border); transition: var(--t); } .nav-logo { font-size: 17px; font-weight: 800; color: var(--black); text-decoration: none; letter-spacing: -.03em; } .nav-links { display: flex; gap: 28px; align-items: center; } .nav-links a { font-size: 13px; font-weight: 500; color: var(--mid); text-decoration: none; transition: color .2s; } .nav-links a:hover, .nav-links a.active { color: var(--black); } .btn-nav { font-family: var(--font); font-size: 13px; font-weight: 700; background: var(--black); color: var(--white); border: none; padding: 9px 20px; border-radius: 99px; cursor: pointer; text-decoration: none; transition: opacity .2s; display: inline-block; } .btn-nav:hover { opacity: .8; } /* ── Nav: Theme toggle ──────────────────────────── */ .theme-toggle { font-family: var(--font); font-size: 16px; font-weight: 600; background: transparent; color: var(--mid); border: 1.5px solid var(--border); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--t); flex-shrink: 0; user-select: none; } .theme-toggle:hover { color: var(--black); border-color: var(--black); } /* ── Nav: Language switcher ─────────────────────── */ .lang-switcher { position: relative; flex-shrink: 0; } .lang-btn { font-family: var(--font); font-size: 12px; font-weight: 700; background: transparent; color: var(--mid); border: 1.5px solid var(--border); height: 34px; padding: 0 10px; border-radius: 99px; cursor: pointer; display: flex; align-items: center; gap: 5px; letter-spacing: .04em; transition: var(--t); white-space: nowrap; } .lang-btn:hover { color: var(--black); border-color: var(--black); } .lang-btn svg { transition: transform .2s; } .lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); } .lang-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; background: var(--white); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); list-style: none; padding: 6px 0; z-index: 200; max-height: 320px; overflow-y: auto; } .lang-dropdown li { font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--mid); padding: 9px 16px; cursor: pointer; transition: var(--t); letter-spacing: .03em; } .lang-dropdown li:hover, .lang-dropdown li.active { color: var(--black); background: var(--warm); } /* Mobile language select */ .mobile-lang-select { font-family: var(--font); font-size: 14px; font-weight: 600; background: var(--warm); color: var(--black); border: 1.5px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; width: 100%; outline: none; } /* ── Hamburger / mobile menu ────────────────────── */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--black); transition: all .3s; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--border); z-index: 99; flex-direction: column; padding: 16px 24px 24px; transition: var(--t); } .mobile-menu a { font-size: 15px; font-weight: 500; color: var(--mid); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--border); display: block; } .mobile-menu a:last-child { border-bottom: none; margin-top: 16px; background: var(--black); color: var(--white); text-align: center; padding: 12px; border-radius: 99px; font-weight: 700; } .mobile-menu.open { display: flex; } /* ── Sections & Layout ──────────────────────────── */ section { padding: 100px 60px; } .inner { max-width: 1100px; margin: 0 auto; } .page-hero { padding-top: 168px; padding-bottom: 100px; background: var(--warm); } .hero-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin-bottom: 24px; } .hero-h1 { font-size: clamp(44px,6vw,80px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--black); margin-bottom: 4px; } .hero-h1-dim { font-size: clamp(44px,6vw,80px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--grey); margin-bottom: 32px; } .hero-body { font-size: 18px; line-height: 1.7; color: var(--mid); max-width: 620px; margin-bottom: 40px; } .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; } .section-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin-bottom: 24px; } .section-h2 { font-size: clamp(28px,3.5vw,44px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: var(--black); margin-bottom: 24px; } .section-body { font-size: 17px; line-height: 1.75; color: var(--mid); } /* ── Buttons ────────────────────────────────────── */ .btn-primary { font-family: var(--font); font-size: 15px; font-weight: 700; background: var(--black); color: var(--white); border: none; padding: 14px 32px; border-radius: 99px; cursor: pointer; text-decoration: none; transition: opacity .2s; display: inline-block; } .btn-primary:hover { opacity: .8; } .btn-secondary { font-family: var(--font); font-size: 15px; font-weight: 600; background: transparent; color: var(--black); border: 1.5px solid rgba(0,0,0,.2); padding: 14px 32px; border-radius: 99px; cursor: pointer; text-decoration: none; transition: border-color .2s; display: inline-block; } [data-theme="dark"] .btn-secondary { border-color: rgba(255,255,255,.2); color: var(--black); } .btn-secondary:hover { border-color: var(--black); } /* ── Dark CTA band ──────────────────────────────── */ .dark-cta { background: #0D0D0D; padding: 100px 60px; text-align: center; } [data-theme="dark"] .dark-cta { background: #000; } .dark-cta-headline { font-size: clamp(28px,4vw,48px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: #FFFFFF; max-width: 680px; margin: 0 auto 16px; } .dark-cta-sub { font-size: 17px; color: var(--grey); margin-bottom: 40px; } .btn-cta-white { font-family: var(--font); font-size: 15px; font-weight: 700; background: #FFFFFF; color: #1A1A1A; border: none; padding: 16px 36px; border-radius: 99px; cursor: pointer; text-decoration: none; transition: opacity .2s; display: inline-block; } .btn-cta-white:hover { opacity: .85; } /* ── Footer ─────────────────────────────────────── */ footer { background: #1A1A1A; padding: 60px; transition: background-color .2s; } [data-theme="dark"] footer { background: #0A0A0A; } .footer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 60px; } .footer-logo { font-size: 18px; font-weight: 800; color: #FFFFFF; letter-spacing: -.03em; margin-bottom: 8px; } .footer-abn { font-size: 11px; color: #888; margin-bottom: 12px; letter-spacing: .02em; } .footer-contact-link a { font-size: 14px; font-weight: 600; color: #FFFFFF; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px; transition: border-color .2s; } .footer-contact-link a:hover { border-color: #FFFFFF; } .footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #888; margin-bottom: 20px; } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer-links a { font-size: 14px; color: #CCCCCC; text-decoration: none; transition: color .2s; } .footer-links a:hover { color: #FFFFFF; } .footer-bottom { max-width: 1100px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; } .footer-copy { font-size: 12px; color: #888; } /* ── Dark mode inline-style overrides ───────────── */ /* These selectors override the most common hardcoded colour values used in inline style="" attributes throughout the pages. */ /* Text colours */ [data-theme="dark"] [style*="color:#555"], [data-theme="dark"] [style*="color: #555"] { color: #A0A0A0 !important; } [data-theme="dark"] [style*="color:#1A1A1A"], [data-theme="dark"] [style*="color: #1A1A1A"], [data-theme="dark"] [style*="color:#1a1a1a"] { color: #E0E0E0 !important; } [data-theme="dark"] [style*="color:#888"], [data-theme="dark"] [style*="color: #888"] { color: #888 !important; } [data-theme="dark"] [style*="color:#CCC"], [data-theme="dark"] [style*="color:#ccc"], [data-theme="dark"] [style*="color: #ccc"] { color: #666 !important; } /* Background colours */ [data-theme="dark"] [style*="background:#F8F7F4"], [data-theme="dark"] [style*="background: #F8F7F4"], [data-theme="dark"] [style*="background:#f8f7f4"] { background: #1C1C1C !important; } [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:#ffffff"], [data-theme="dark"] [style*="background: #ffffff"] { background: #111111 !important; } [data-theme="dark"] [style*="background:#EDEAE4"], [data-theme="dark"] [style*="background: #EDEAE4"], [data-theme="dark"] [style*="background:#edeae4"] { background: #252525 !important; } /* Border overrides */ [data-theme="dark"] [style*="border-top:1px solid rgba(0,0,0"], [data-theme="dark"] [style*="border:1.5px solid #EDEAE4"], [data-theme="dark"] [style*="border:1.5px solid #edeae4"] { border-color: rgba(255,255,255,0.1) !important; } /* Form inputs */ [data-theme="dark"] input[style], [data-theme="dark"] textarea[style], [data-theme="dark"] select[style] { background: #1C1C1C !important; color: #E0E0E0 !important; border-color: rgba(255,255,255,0.12) !important; } /* ── RTL support ─────────────────────────────────── */ [dir="rtl"] nav { flex-direction: row-reverse; } [dir="rtl"] .nav-links { flex-direction: row-reverse; } [dir="rtl"] .footer-inner { direction: rtl; } [dir="rtl"] .lang-dropdown { right: auto; left: 0; } /* ── Responsive ─────────────────────────────────── */ @media (max-width: 900px) { nav { padding: 0 24px; } .nav-links { display: none; } .theme-toggle { display: none; } .lang-switcher { display: none; } .hamburger { display: flex; } section { padding: 72px 24px !important; } .page-hero { padding: 140px 24px 80px !important; } .dark-cta { padding: 72px 24px !important; } footer { padding: 60px 24px !important; } .footer-inner { grid-template-columns: 1fr !important; gap: 40px; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; } .two-col { grid-template-columns: 1fr !important; gap: 48px !important; } .three-col { grid-template-columns: 1fr !important; } .four-col { grid-template-columns: 1fr 1fr !important; } .founder-grid { grid-template-columns: 1fr !important; gap: 48px !important; } div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; gap: 40px !important; } div[style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; } div[style*="grid-template-columns:72px 1fr"] { grid-template-columns: 1fr !important; gap: 8px !important; } div[style*="grid-template-columns:140px 1fr"]{ grid-template-columns: 1fr !important; gap: 8px !important; } div[style*="display:flex;align-items:center;justify-content:space-between"] { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; } .hero-h1 { font-size: clamp(36px,9vw,60px) !important; } .hero-body { font-size: 16px !important; } .btn-primary, .btn-secondary, .btn-cta-white { width: 100%; text-align: center; display: block !important; box-sizing: border-box; } .hero-ctas { flex-direction: column !important; } section[style*="padding:80px 60px"] { padding: 60px 24px !important; } section[style*="padding:100px 60px"] { padding: 72px 24px !important; } section[style*="padding:140px 60px"] { padding: 72px 24px !important; } } @media (max-width: 600px) { .four-col { grid-template-columns: 1fr !important; } div[style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr !important; } .awards-grid { grid-template-columns: repeat(2,1fr) !important; } }