/* myrapiddelivery.co.uk — shared styles */ :root { /* Navy + cream + warm amber */ --navy-900: oklch(0.22 0.045 250); --navy-800: oklch(0.28 0.05 250); --navy-700: oklch(0.36 0.055 250); --navy-500: oklch(0.52 0.05 250); --navy-300: oklch(0.78 0.025 250); --navy-100: oklch(0.92 0.015 250); --cream-50: oklch(0.985 0.01 85); --cream-100: oklch(0.97 0.015 85); --cream-200: oklch(0.94 0.02 85); --cream-300: oklch(0.89 0.025 80); --amber-600: oklch(0.68 0.135 55); --amber-500: oklch(0.74 0.135 60); --amber-400: oklch(0.82 0.11 70); --amber-100: oklch(0.94 0.04 75); --ink: var(--navy-900); --ink-soft: var(--navy-700); --ink-muted: var(--navy-500); --bg: var(--cream-100); --bg-elevated: #fff; --bg-deep: var(--navy-900); --line: oklch(0.88 0.015 85); --line-soft: oklch(0.92 0.012 85); --accent: var(--amber-600); --accent-soft: var(--amber-100); --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 28px; --shadow-sm: 0 1px 2px rgba(15, 26, 50, 0.04), 0 1px 1px rgba(15, 26, 50, 0.03); --shadow: 0 1px 2px rgba(15, 26, 50, 0.04), 0 8px 24px -8px rgba(15, 26, 50, 0.12); --shadow-lg: 0 1px 2px rgba(15, 26, 50, 0.05), 0 24px 48px -16px rgba(15, 26, 50, 0.18); --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; --sans: "Geist", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", monospace; --container: 1240px; } /* Palette variants applied via [data-palette] on */ html[data-palette="navy-cream"] { /* default (above) */ } html[data-palette="forest-cream"] { --navy-900: oklch(0.28 0.04 155); --navy-800: oklch(0.34 0.045 155); --navy-700: oklch(0.42 0.05 155); --navy-500: oklch(0.55 0.05 155); --navy-300: oklch(0.78 0.025 155); --navy-100: oklch(0.92 0.015 155); --amber-600: oklch(0.68 0.13 50); } html[data-palette="plum-blush"] { --navy-900: oklch(0.26 0.06 320); --navy-800: oklch(0.32 0.065 320); --navy-700: oklch(0.4 0.07 320); --navy-500: oklch(0.55 0.06 320); --navy-300: oklch(0.8 0.03 320); --navy-100: oklch(0.93 0.015 320); --cream-50: oklch(0.985 0.012 25); --cream-100: oklch(0.97 0.018 25); --cream-200: oklch(0.94 0.024 25); --cream-300: oklch(0.89 0.03 25); --amber-600: oklch(0.7 0.13 25); } html[data-palette="ink-citrus"] { --navy-900: oklch(0.2 0.02 260); --navy-800: oklch(0.26 0.025 260); --navy-700: oklch(0.34 0.03 260); --navy-500: oklch(0.5 0.03 260); --navy-300: oklch(0.78 0.015 260); --navy-100: oklch(0.92 0.008 260); --cream-50: oklch(0.985 0.005 100); --cream-100: oklch(0.97 0.008 100); --cream-200: oklch(0.94 0.012 100); --cream-300: oklch(0.89 0.018 100); --amber-600: oklch(0.78 0.16 95); --amber-500: oklch(0.83 0.16 95); --amber-100: oklch(0.95 0.05 95); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* Subtle paper grain */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(rgba(40, 30, 15, 0.025) 1px, transparent 1px); background-size: 3px 3px; opacity: 0.6; } body > * { position: relative; z-index: 1; } .container { max-width: var(--container); margin: 0 auto; padding: 0 32px; } /* Typography */ .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; } h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.02em; } h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -0.022em; } h1 em { font-style: italic; color: var(--accent); font-weight: 400; } h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.018em; } h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } /* Header */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklch, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line-soft); } .site-header .inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 18px; padding-bottom: 18px; } .logo { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 24px; color: var(--ink); letter-spacing: -0.01em; } .logo-mark { width: 38px; height: 38px; display: block; flex-shrink: 0; color: var(--ink); --mark-seam: color-mix(in oklch, var(--cream-50) 18%, transparent); --mark-arrow: var(--accent); } .logo-mark.on-dark { color: var(--cream-50); --mark-seam: color-mix(in oklch, var(--navy-900) 22%, transparent); } .logo-mark .mark-body { fill: currentColor; } .logo-mark .mark-seam { stroke: var(--mark-seam); } .logo-mark .mark-arrow { stroke: var(--mark-arrow); } .logo:hover .logo-mark .mark-arrow { transform: translateX(1.5px); transition: transform 180ms ease; } .logo .logo-mark .mark-arrow { transition: transform 180ms ease; transform-origin: center; } .logo b { font-weight: 400; } .logo span.dim { color: var(--ink-muted); font-style: italic; } .nav { display: flex; align-items: center; gap: 28px; } .nav a { font-size: 14.5px; color: var(--ink-soft); font-weight: 500; padding: 8px 0; border-bottom: 1px solid transparent; transition: color 120ms, border-color 120ms; } .nav a:hover { color: var(--ink); border-bottom-color: var(--accent); } .nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--ink); align-items: center; justify-content: center; padding: 0; flex-shrink: 0; } .nav-toggle:hover { color: var(--accent); } .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform 160ms ease, opacity 160ms ease, top 160ms ease; } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; top: -6px; } .nav-toggle-bars::after { top: 6px; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); } .mobile-nav-panel { display: contents; } .header-actions { display: flex; align-items: center; gap: 12px; } .phone { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); } .phone strong { color: var(--ink); font-weight: 600; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; border: 1px solid transparent; transition: transform 120ms ease, box-shadow 200ms, background 160ms, color 160ms; white-space: nowrap; } .btn-primary { background: var(--ink); color: var(--cream-50); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 16px -8px rgba(15, 26, 50, 0.45); } .btn-primary:hover { background: var(--navy-800); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 22px -10px rgba(15, 26, 50, 0.55); } .btn-accent { background: var(--accent); color: var(--navy-900); box-shadow: 0 6px 16px -10px var(--accent); } .btn-accent:hover { transform: translateY(-1px); filter: brightness(1.04); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--ink-soft); } .btn-block { width: 100%; padding: 18px 22px; font-size: 16px; } .btn .arrow { transition: transform 200ms; } .btn:hover .arrow { transform: translateX(3px); } /* Cards */ .card { background: var(--bg-elevated); border-radius: var(--radius-lg); border: 1px solid var(--line-soft); box-shadow: var(--shadow); } /* Pills */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--cream-200); color: var(--ink-soft); font-size: 12.5px; font-weight: 500; border: 1px solid var(--line-soft); } .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* Form */ .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); } .input, .select { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--cream-50); font: inherit; font-size: 15px; color: var(--ink); transition: border-color 120ms, box-shadow 120ms, background 120ms; } .input:focus, .select:focus { outline: none; border-color: var(--navy-700); background: #fff; box-shadow: 0 0 0 4px color-mix(in oklch, var(--navy-700) 12%, transparent); } .select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } .input::placeholder { color: oklch(0.6 0.02 250); } .toggle-group { display: inline-flex; background: var(--cream-200); padding: 4px; border-radius: 999px; border: 1px solid var(--line-soft); } .toggle-group button { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-soft); letter-spacing: -0.005em; } .toggle-group button.active { background: var(--bg-elevated); color: var(--ink); box-shadow: 0 1px 2px rgba(15,26,50,0.08); } /* Sections */ section { padding: 88px 0; } section.tight { padding: 56px 0; } /* Footer */ .site-footer { background: var(--bg-deep); color: var(--cream-100); padding: 72px 0 32px; margin-top: 96px; } .site-footer a { color: color-mix(in oklch, var(--cream-100) 78%, transparent); } .site-footer a:hover { color: var(--cream-50); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid color-mix(in oklch, var(--cream-100) 12%, transparent); } .footer-col h4 { font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklch, var(--cream-100) 60%, transparent); margin-bottom: 18px; font-weight: 600; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-size: 13px; color: color-mix(in oklch, var(--cream-100) 55%, transparent); } /* Utilities */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .text-muted { color: var(--ink-muted); } .text-soft { color: var(--ink-soft); } .mono { font-family: var(--mono); font-feature-settings: "tnum"; } @media (max-width: 900px) { .container { padding: 0 24px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } section { padding: 64px 0; } .site-header .inner { position: relative; gap: 12px; } .nav-toggle { display: inline-flex; } .mobile-nav-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg-elevated); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 16px 20px 20px; flex-direction: column; gap: 12px; z-index: 60; } .mobile-nav-panel[data-open] { display: flex; } .mobile-nav-panel .nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .mobile-nav-panel .nav a { padding: 14px 4px; font-size: 16px; border-bottom: 1px solid var(--line-soft); } .mobile-nav-panel .nav a:last-child { border-bottom: 0; } .mobile-nav-panel .header-actions { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line-soft); margin-top: 4px; } .mobile-nav-panel .header-actions .phone { font-size: 15px; } .mobile-nav-panel .header-actions .btn { width: 100%; } .btn { min-height: 44px; } .input, .select { min-height: 44px; font-size: 16px; } } @media (max-width: 768px) { section { padding: 48px 0; } .site-footer { padding: 56px 0 24px; margin-top: 64px; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; } } @media (max-width: 480px) { .container { padding: 0 20px; } .footer-grid { grid-template-columns: 1fr; gap: 24px; padding-bottom: 32px; } h1 { letter-spacing: -0.018em; } .site-header .inner { padding-top: 14px; padding-bottom: 14px; } .logo { font-size: 20px; gap: 10px; } .logo-mark { width: 32px; height: 32px; } }