/* Theme Name: MyGatePass Theme URI: https://mygatepass.com Author: MyGatePass Author URI: https://mygatepass.com Description: The identity layer for physical spaces. Bespoke marketing theme for MyGatePass (MGP) — visitor management & access control for the GCC. Light-first, Auxia-inspired B2B SaaS design. Ported from the Claude design handoff. Version: 1.0.0 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 8.0 License: Proprietary Text Domain: mygatepass */ /* ───────────────────────────────────────────────────────────── MyGatePass — design tokens & base styles Light-first. Outfit for headings, Nunito Sans for body, Montserrat italic for highlights. (Ported verbatim from design_handoff styles.css :root tokens.) ───────────────────────────────────────────────────────────── */ :root { /* Brand */ --c-blue: #021EFF; --c-sky: #5FE4F2; --c-teal: #00B794; --c-mint: #79E8D3; --c-grey: #E8E8E8; --c-ink: #2D2D2D; --c-white: #FFFFFF; /* Derived */ --c-ink-60: rgba(45, 45, 45, 0.62); --c-ink-40: rgba(45, 45, 45, 0.42); --c-ink-20: rgba(45, 45, 45, 0.18); --c-ink-10: rgba(45, 45, 45, 0.10); --c-ink-06: rgba(45, 45, 45, 0.06); --c-grey-soft: #F4F4F4; --c-grey-line: #ECECEC; /* Accent (driven by emphasis: blue | teal | gradient) */ --accent: var(--c-blue); --accent-2: var(--c-sky); --accent-grad: linear-gradient(96deg, #021EFF 0%, #4A6CFF 38%, #5FE4F2 100%); --accent-grad-soft: linear-gradient(120deg, rgba(2,30,255,0.10), rgba(95,228,242,0.18)); --hero-text-fill: var(--accent-grad); /* Type */ --f-heading: 'Outfit', 'Helvetica Neue', system-ui, -apple-system, sans-serif; --f-body: 'Nunito Sans', 'Helvetica Neue', system-ui, -apple-system, sans-serif; --f-highlight: 'Montserrat', 'Outfit', system-ui, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Rhythm */ --container: 1280px; --container-narrow: 1120px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --shadow-card: 0 1px 0 rgba(45,45,45,0.04), 0 14px 40px -18px rgba(2,30,255,0.16), 0 2px 10px -4px rgba(45,45,45,0.06); --shadow-soft: 0 30px 80px -40px rgba(2,30,255,0.35), 0 8px 24px -16px rgba(45,45,45,0.18); } /* Emphasis modes (applied to via data-emphasis attribute) */ html[data-emphasis="blue"] { --accent: #021EFF; --accent-2: #5FE4F2; --accent-grad: linear-gradient(96deg, #021EFF 0%, #4A6CFF 60%, #6B8DFF 100%); } html[data-emphasis="teal"] { --accent: #00B794; --accent-2: #79E8D3; --accent-grad: linear-gradient(96deg, #00B794 0%, #2DC9A4 50%, #79E8D3 100%); } html[data-emphasis="gradient"] { --accent: #021EFF; --accent-2: #5FE4F2; --accent-grad: linear-gradient(96deg, #021EFF 0%, #2A4FFF 30%, #5FE4F2 100%); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--c-white); color: var(--c-ink); font-family: var(--f-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } img, svg { display: block; max-width: 100%; } /* Typography classes */ .h-eyebrow { font-family: var(--f-heading); font-weight: 200; text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; color: var(--c-ink-60); } .h-eyebrow .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 10px; vertical-align: middle; transform: translateY(-1px); } .h-display { font-family: var(--f-heading); font-weight: 800; letter-spacing: -0.035em; line-height: 0.96; font-size: clamp(48px, 7.4vw, 112px); color: var(--c-ink); margin: 0; text-wrap: balance; } .h-section { font-family: var(--f-heading); font-weight: 700; letter-spacing: -0.025em; line-height: 1.0; font-size: clamp(36px, 4.8vw, 68px); color: var(--c-ink); margin: 0; text-wrap: balance; } .h-sub { font-family: var(--f-heading); font-weight: 600; letter-spacing: -0.01em; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; margin: 0; text-wrap: balance; } .h-card { font-family: var(--f-heading); font-weight: 600; letter-spacing: -0.01em; font-size: 20px; line-height: 1.2; margin: 0; } .body-lead { font-family: var(--f-body); font-weight: 400; font-size: clamp(17px, 1.25vw, 21px); line-height: 1.55; color: var(--c-ink-60); text-wrap: pretty; max-width: 60ch; } .body { font-family: var(--f-body); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--c-ink-60); } .highlight { font-family: var(--f-highlight); font-weight: 700; font-style: italic; color: var(--c-ink); } .mono { font-family: var(--f-mono); } .caps { text-transform: uppercase; letter-spacing: 0.12em; } /* Gradient text */ .grad-text { background: var(--accent-grad); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Layout */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 32px; } .section { padding: clamp(80px, 10vw, 140px) 0; position: relative; } .section-tight { padding: clamp(56px, 7vw, 96px) 0; } .section-bg-grey { background: var(--c-grey); } .section-bg-softgrey { background: var(--c-grey-soft); } .row-gap-sm { gap: 12px; } .row-gap-md { gap: 24px; } .row-gap-lg { gap: 40px; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-heading); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; padding: 14px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -10px rgba(2,30,255,0.55), inset 0 1px 0 rgba(255,255,255,0.18); } .btn-primary:hover { box-shadow: 0 16px 36px -12px rgba(2,30,255,0.65), inset 0 1px 0 rgba(255,255,255,0.22); } .btn-grad { background: var(--accent-grad); color: #fff; box-shadow: 0 10px 30px -10px rgba(2,30,255,0.55); } .btn-ghost { background: transparent; color: var(--c-ink); border-color: var(--c-ink-20); } .btn-ghost:hover { border-color: var(--c-ink); background: var(--c-ink-06); } .btn-dark { background: var(--c-ink); color: #fff; } .btn-sm { padding: 10px 16px; font-size: 14px; } .btn-arrow { display: inline-block; transition: transform .25s ease; } .btn:hover .btn-arrow { transform: translateX(3px); } /* Pill / Tag */ .tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--c-ink-06); color: var(--c-ink); font-family: var(--f-heading); font-weight: 500; font-size: 12px; letter-spacing: 0.02em; } .tag-mint { background: rgba(121, 232, 211, 0.35); color: #0a5847; } .tag-sky { background: rgba(95, 228, 242, 0.25); color: #014f63; } .tag-blue { background: rgba(2, 30, 255, 0.08); color: var(--c-blue); } .tag-teal { background: rgba(0,183,148,0.12); color: #0a6b5a; } .tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Cards */ .card { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--c-grey-line); padding: 28px; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: transparent; } .card-flat { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--c-grey-line); padding: 28px; } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); transition-delay: var(--reveal-delay, 0ms); will-change: transform, opacity; } .reveal.is-in { opacity: 1; transform: translateY(0); } .reveal-fade { opacity: 0; transition: opacity 1s ease; transition-delay: var(--reveal-delay, 0ms); } .reveal-fade.is-in { opacity: 1; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-fade { opacity: 1 !important; transform: none !important; } } /* Browser chrome / device mocks */ .chrome { background: #fff; border-radius: 14px; border: 1px solid var(--c-grey-line); box-shadow: var(--shadow-soft); overflow: hidden; } .chrome-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #FAFAFA; border-bottom: 1px solid var(--c-grey-line); } .chrome-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-ink-10); } .chrome-dot.r { background: #FF6058; } .chrome-dot.y { background: #FFBE2E; } .chrome-dot.g { background: #28C840; } .chrome-addr { margin-left: 14px; font-family: var(--f-mono); font-size: 11px; color: var(--c-ink-40); background: #fff; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--c-grey-line); } /* Phone frame */ .phone { border-radius: 40px; background: var(--c-ink); padding: 10px; box-shadow: var(--shadow-soft); width: 280px; } .phone-inner { background: #fff; border-radius: 32px; overflow: hidden; position: relative; } .phone-notch { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 90px; height: 24px; border-radius: 14px; background: var(--c-ink); z-index: 3; } /* Marquee */ .marquee { display: flex; gap: 80px; animation: marquee 38s linear infinite; width: max-content; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-wrap { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } /* Hero animated visitor flow */ @keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 0.55; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes drift-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes scan { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } } .qr-scan { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(0,183,148,0.0) 40%, rgba(0,183,148,0.55) 50%, transparent 60%, transparent 100%); animation: scan 2.6s ease-in-out infinite; } /* Status pill animation */ @keyframes tick-in { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,183,148,0.5); } 70% { box-shadow: 0 0 0 8px rgba(0,183,148,0); } 100% { box-shadow: 0 0 0 0 rgba(0,183,148,0); } } /* Generic float */ .float { animation: drift-y 7s ease-in-out infinite; } /* Section divider */ .divider { height: 1px; background: var(--c-grey-line); } /* Number underline accent */ .num-accent { position: relative; display: inline-block; } .num-accent::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--accent-grad); border-radius: 2px; } /* Utility */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .gap-10 { gap: 40px; } .gap-12 { gap: 48px; } .wrap { flex-wrap: wrap; } .grid { display: grid; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mt-10 { margin-top: 40px; } .mt-12 { margin-top: 48px; } .mt-16 { margin-top: 64px; } .mt-20 { margin-top: 80px; } .text-center { text-align: center; } .relative { position: relative; } .w-full { width: 100%; } /* Responsive */ @media (max-width: 900px) { .container, .container-narrow { padding: 0 22px; } .hide-mobile { display: none !important; } } @media (min-width: 901px) { .hide-desktop { display: none !important; } } /* Selection */ ::selection { background: rgba(2,30,255,0.18); color: var(--c-ink); } /* Subtle background grain for hero */ .grain { position: absolute; inset: 0; background: radial-gradient(1200px 600px at 80% -10%, rgba(95,228,242,0.18), transparent 60%), radial-gradient(800px 500px at -10% 30%, rgba(2,30,255,0.08), transparent 60%); pointer-events: none; z-index: 0; } /* Skip link (a11y) */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--c-ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font-family: var(--f-heading); font-weight: 600; font-size: 14px; } .skip-link:focus { left: 0; }