/* ========================================================= UK Land Register — Mobile-First Responsive Theme (Optimized) - True mobile-first with responsive type & buttons - Hamburger navigation (matches .nav-toggle / .nav-links in HTML) - Accessible focus states, reduced motion handling ========================================================= */ /* ---------- Design Tokens (Mobile-first) ---------- */ :root{ /* Base palette (Light) */ --bg: #ffffff; --surface: #f7f9ff; --surface-2: #eef2ff; --text: #0e1324; --muted: #596189; --border: #dfe3f2; /* Brand accents */ --brand: #2563eb; --brand-2: #9b8cff; --brand-3: #24d180; --ok: #24d180; /* Gradients & glow */ --grad-hero: linear-gradient(160deg, rgba(90,200,250,.28), rgba(155,140,255,.24) 45%, rgba(36,209,128,.18)); --grad-accent: linear-gradient(135deg, #5ac8fa, #9b8cff 55%, #24d180); /* Shadows & radii */ --shadow-1: 0 4px 12px rgba(18, 26, 66, .06); --shadow-2: 0 6px 20px rgba(18, 26, 66, .1); --radius-lg: 16px; --radius-md: 12px; --radius-sm: 8px; /* Layout */ --wrap-max: 1400px; --wrap-pad: 92vw; /* predictable container sizing */ --nav-height: 60px; /* Typography base (we'll also use clamp() on key headings) */ --fs-base: 16px; --fs-sm: 14px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 28px; --lh: 1.6; /* Touch targets */ --touch-target: 48px; --touch-spacing: 16px; } /* ---------- Dark Theme Overrides ---------- */ html[data-theme="dark"]{ --bg: #0b1020; --surface: #12172a; --surface-2: #0f1426; --text: #e6e8ef; --muted: #a5adcc; --border: #233056; --brand: #5ac8fa; --brand-2: #9b8cff; --brand-3: #24d180; --ok: #24d180; --grad-hero: linear-gradient(160deg, rgba(90,200,250,.18), rgba(155,140,255,.18) 45%, rgba(36,209,128,.12)); --shadow-1: 0 4px 12px rgba(10, 14, 35, .25); --shadow-2: 0 6px 20px rgba(10, 14, 35, .35); } /* ---------- Base ---------- */ *{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html{ font-size: var(--fs-base); scroll-behavior: smooth; } html, body{ margin: 0; padding: 0; overflow-x: hidden; } body{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: var(--bg); color: var(--text); line-height: var(--lh); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: var(--fs-base); } /* Lock body scroll when menu is open (JS toggles .menu-open on ) */ body.menu-open{ overflow: hidden; } /* ---------- Links & Focus ---------- */ a{ color: var(--brand); text-decoration: none; transition: color .2s ease, background .2s ease, box-shadow .2s ease; min-height: var(--touch-target); display: inline-flex; align-items: center; } a:hover{ text-decoration: underline; } a:focus-visible{ outline: 2px solid var(--brand-2); outline-offset: 2px; border-radius: 6px; } /* ---------- Layout container ---------- */ .wrap{ width: min(var(--wrap-max), var(--wrap-pad)); margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); } .narrow{ width: min(700px, 95%); margin-inline: auto; } /* ---------- Header & Navigation (Hamburger) ---------- */ .site-header{ position: sticky; top: 0; z-index: 1000; /* above hero */ backdrop-filter: blur(12px); background: color-mix(in oklab, var(--surface), transparent 10%); border-bottom: 1px solid var(--border); min-height: var(--nav-height); } .nav{ display: flex; justify-content: space-between; align-items: center; padding: 12px 0; position: relative; min-height: var(--nav-height); gap: 16px; } .logo{ font-weight: 800; font-size: var(--fs-lg); color: var(--text); letter-spacing: .3px; } /* Hamburger button */ .nav-toggle{ display: none; flex-direction: column; justify-content: space-around; width: 34px; height: 34px; background: transparent; border: 0; cursor: pointer; padding: 6px; border-radius: 8px; transition: background .2s ease; } .nav-toggle:hover{ background: color-mix(in oklab, var(--surface), var(--text) 8%); } .nav-toggle span{ width: 100%; height: 3px; background: var(--text); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; transform-origin: center; } .nav-toggle.active span:nth-child(1){ transform: rotate(45deg) translate(6px, 6px); } .nav-toggle.active span:nth-child(2){ opacity: 0; } .nav-toggle.active span:nth-child(3){ transform: rotate(-45deg) translate(6px, -6px); } /* Links (desktop) */ .nav-links{ display: flex; align-items: center; gap: 10px; } .nav-links a, .nav-links button{ padding: 10px 12px; border-radius: 8px; color: var(--muted); font-size: var(--fs-base); font-weight: 500; transition: background .2s ease, color .2s ease, box-shadow .2s ease; min-height: var(--touch-target); display: inline-flex; align-items: center; } .nav-links a:hover, .nav-links button:hover{ color: var(--text); background: color-mix(in oklab, var(--surface), var(--text) 6%); text-decoration: none; } /* ---------- Mobile menu (overlay) ---------- */ @media (max-width: 768px){ .nav-toggle{ display: flex; } .nav-links{ position: fixed; inset: var(--nav-height) 0 auto 0; /* top, right, bottom, left */ background: color-mix(in oklab, var(--surface), transparent 5%); backdrop-filter: blur(12px); border-top: 1px solid var(--border); flex-direction: column; padding: 18px; gap: 6px; /* slide-down effect */ transform: translateY(calc(-100% - var(--nav-height))); opacity: 0; visibility: hidden; transition: transform .28s ease, opacity .28s ease, visibility .28s ease; z-index: 1001; /* above header */ box-shadow: var(--shadow-2); /* ensure long menus scroll on short devices */ max-height: calc(100svh - var(--nav-height)); overflow: auto; } .nav-links.active{ transform: translateY(0); opacity: 1; visibility: visible; } .nav-links a, .nav-links button{ width: 100%; justify-content: center; font-size: clamp(1rem, 2.8vw, var(--fs-lg)); min-height: 52px; padding-block: 14px; margin-block: 2px; /* breathing room between items */ } } /* ---------- Buttons ---------- */ .btn{ background: linear-gradient(135deg, #1d4ed8, #3b82f6); color: #fff; padding: 12px 20px; border-radius: 10px; border: 0; font-weight: 700; font-size: clamp(0.95rem, 2.4vw, var(--fs-base)); letter-spacing: .3px; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 130px; box-shadow: var(--shadow-1); transition: transform .15s ease, box-shadow .2s ease; cursor: pointer; text-decoration: none; user-select: none; } .btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); text-decoration: none; } .btn:active{ transform: translateY(0); } .btn.ghost{ background: transparent; color: var(--brand); border: 2px solid var(--brand); box-shadow: none; } .btn.ghost:hover{ background: color-mix(in oklab, var(--brand), transparent 90%); box-shadow: var(--shadow-1); } .btn.sm{ padding: 10px 16px; font-size: clamp(0.9rem, 2.2vw, var(--fs-sm)); min-width: 110px; } .btn.full{ width: 100%; justify-content: center; } /* Mobile hero CTA stacking */ @media (max-width: 768px){ .cta{ flex-direction: column; align-items: stretch; } .cta .btn{ width: 100%; min-height: 56px; font-size: clamp(1rem, 3.4vw, 1.125rem); } .btn + .btn{ margin-top: 10px; } } /* ---------- Typography ---------- */ h1, h2, h3, h4, h5, h6{ line-height: 1.25; margin-top: 0; margin-bottom: 16px; font-weight: 800; } h1{ font-size: clamp(1.9rem, 6.4vw, 2.6rem); } h2{ font-size: clamp(1.35rem, 3.6vw, 1.75rem); } h3{ font-size: clamp(1.15rem, 3.2vw, 1.35rem); } h4{ font-size: clamp(1.05rem, 2.8vw, 1.2rem); } h5{ font-size: clamp(1rem, 2.6vw, 1.1rem); } h6{ font-size: clamp(.95rem, 2.4vw, 1rem); } p{ margin-bottom: 16px; max-width: 65ch; } .lead{ color: var(--muted); font-size: clamp(1rem, 2.9vw, 1.125rem); max-width: 60ch; } .tiny{ font-size: var(--fs-sm); } .muted{ color: var(--muted); } /* ---------- Hero ---------- */ .hero{ position: relative; z-index: 0; padding: 40px 0 32px; background: radial-gradient(800px 400px at 30% -10%, rgba(90,200,250,.15), transparent 70%), radial-gradient(700px 350px at 80% -15%, rgba(155,140,255,.18), transparent 70%), var(--surface-2); isolation: isolate; } .hero::before{ content: ""; position: absolute; inset: 0; background: var(--grad-hero); pointer-events: none; z-index: -1; } .hero-grid{ display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; } .hero h1{ font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.2; margin: 8px 0 16px; letter-spacing: -.3px; } .cta{ margin: 24px 0; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .quote{ margin-top: 16px; color: var(--text); opacity: .9; font-size: var(--fs-base); } .quote span{ color: var(--muted); } .hero-image img{ display: block; width: 100%; height: auto; object-fit: cover; border: 1px solid color-mix(in oklab, var(--border), #ffffff 8%); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); } /* ---------- Cards / Forms ---------- */ .card,.hero-card{ background: color-mix(in oklab, var(--surface), #ffffff 3%); border: 1px solid color-mix(in oklab, var(--border), #ffffff 10%); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-1); margin-bottom: 16px; } .card-form label{ display: block; margin: 12px 0 8px; font-weight: 600; color: var(--text); font-size: var(--fs-base); } .card-form input,.card-form textarea,.card-form select{ width: 100%; padding: 12px 16px; font: inherit; font-size: var(--fs-base); color: var(--text); background: color-mix(in oklab, var(--surface), #ffffff 3%); border: 2px solid color-mix(in oklab, var(--border), #ffffff 10%); border-radius: var(--radius-md); outline: none; min-height: var(--touch-target); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; -webkit-appearance: none; appearance: none; } .card-form input::placeholder,.card-form textarea::placeholder{ color: color-mix(in oklab, var(--muted), #ffffff 10%); } .card-form input:focus,.card-form textarea:focus,.card-form select:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand), transparent 80%); } .card-form button{ margin-top: 16px; } /* ---------- Logos row ---------- */ .logos{ display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 32px; opacity: .9; filter: saturate(1.05); } .logos img{ height: 28px; max-width: 120px; object-fit: contain; filter: grayscale(.1) contrast(1.03) brightness(.98); opacity: .9; } /* ---------- Sections ---------- */ .belief,.pros,.processes,.timeline,.results,.testimonials,.contact{ padding: 48px 0; background: transparent; } .options{ padding: 40px 0; background: color-mix(in oklab, var(--surface), #ffffff 4%); } /* ---------- Grids ---------- */ .two-col,.grid-3,.cards-3,.cards-2{ display: grid; gap: 20px; } .two-col{ grid-template-columns: 1fr; } .grid-3, .cards-3{ grid-template-columns: 1fr; } .cards-2{ grid-template-columns: 1fr; } /* ---------- List ticks ---------- */ .ticks{ list-style: none; padding-left: 0; } .ticks li{ position: relative; padding-left: 32px; margin: 12px 0; color: var(--text); font-size: var(--fs-base); line-height: var(--lh); } .ticks li::before{ content: '✓'; position: absolute; left: 8px; top: 2px; color: var(--ok); font-weight: 800; font-size: var(--fs-lg); } /* ---------- Timeline / Steps ---------- */ .steps{ display: grid; gap: 20px; grid-template-columns: 1fr; } .step{ background: color-mix(in oklab, var(--surface), #ffffff 3%); border: 1px dashed color-mix(in oklab, var(--border), #ffffff 14%); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-1); } .step h5{ margin: 4px 0 12px; font-size: var(--fs-lg); } /* ---------- Cases / Cards ---------- */ .case{ background: color-mix(in oklab, var(--surface), #ffffff 3%); border: 1px solid color-mix(in oklab, var(--border), #ffffff 10%); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-1); margin-bottom: 16px; transition: transform .15s ease, box-shadow .2s ease; } .case:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); } .case h3{ margin-top: 4px; font-size: var(--fs-xl); } /* ---------- Footer ---------- */ .site-footer{ border-top: 1px solid color-mix(in oklab, var(--border), #ffffff 10%); padding: 32px 0; background: color-mix(in oklab, var(--surface-2), #ffffff 3%); } .footer-grid{ display: grid; gap: 24px; grid-template-columns: 1fr; text-align: center; } .site-footer a{ color: var(--brand); min-height: var(--touch-target); } .site-footer a:hover{ color: var(--brand-2); } /* ---------- Utilities ---------- */ .mt{ margin-top: 32px; } /* ---------- Live Updates: Compact list/table ---------- */ .news-table{ display: grid; border-top: 1px solid color-mix(in oklab, var(--border), #fff 10%); } .news-head, .news-row{ display: grid; grid-template-columns: 120px 1fr 220px; /* Date | Title | Source */ gap: 12px; padding: 14px 16px; align-items: center; border-bottom: 1px solid color-mix(in oklab, var(--border), #fff 10%); } .news-head{ background: color-mix(in oklab, var(--surface), #fff 4%); font-weight: 600; color: var(--muted); } .news-row{ text-decoration: none; color: var(--text); transition: background .2s ease; } .news-row:hover{ background: color-mix(in oklab, var(--surface), var(--text) 4%); text-decoration: none; } .news-date{ font-variant-numeric: tabular-nums; color: var(--muted); } .news-title{ line-height: 1.4; } .news-source{ color: var(--muted); text-align: right; } /* Responsive collapse */ @media (max-width: 768px){ .news-head, .news-row{ grid-template-columns: 96px 1fr; /* hide source on mobile */ } .news-source, .hide-sm{ display: none; } } /* ---------- Responsive Breakpoints ---------- */ /* Small tablets and large phones */ @media (min-width: 480px){ :root{ --fs-base: 17px; --fs-lg: 19px; --fs-xl: 21px; --fs-2xl: 26px; --fs-3xl: 32px; } .hero{ padding: 56px 0 40px; } .logos{ gap: 32px; } .logos img{ height: 32px; } } /* Tablets */ @media (min-width: 768px){ :root{ --fs-base: 18px; --fs-lg: 20px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --wrap-pad: 94vw; } .hero{ padding: 64px 0 48px; } .hero-grid{ grid-template-columns: 1.3fr 1fr; gap: 40px; } .two-col{ grid-template-columns: 1fr 1fr; } .cards-2{ grid-template-columns: 1fr 1fr; } .steps{ grid-template-columns: 1fr 1fr; } .cta{ gap: 16px; } .footer-grid{ grid-template-columns: 2fr 1fr; text-align: left; } .ticks.three{ columns: 2; column-gap: 32px; } } /* Desktop */ @media (min-width: 1024px){ .grid-3, .cards-3{ grid-template-columns: repeat(3, 1fr); } .steps{ grid-template-columns: repeat(3, 1fr); } .footer-grid{ grid-template-columns: 2fr 1fr 2fr; } .ticks.three{ columns: 3; } } /* Large desktop */ @media (min-width: 1200px){ .steps{ grid-template-columns: repeat(4, 1fr); } .hero{ padding: 80px 0 56px; } .hero h1{ font-size: clamp(2.25rem, 4vw, 3.25rem); } } /* ---------- Accessibility & Performance ---------- */ @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html{ scroll-behavior: auto; } } @media (prefers-contrast: high){ :root{ --shadow-1: 0 2px 8px rgba(0,0,0,.3); --shadow-2: 0 4px 16px rgba(0,0,0,.4); } .btn{ border: 2px solid currentColor; } } /* ---------- Dark mode preference ---------- */ @media (prefers-color-scheme: dark){ html:not([data-theme="light"]){ --bg: #0b1020; --surface: #12172a; --surface-2: #0f1426; --text: #e6e8ef; --muted: #a5adcc; --border: #233056; } } /* === Ninodirect buttons: accessible green theme === */ /* Match only .btn anchors that point to ninodirect */ a.btn[href*="ninodirect.com"]{ /* Emerald gradient with WCAG-friendly contrast on white & dark */ background: linear-gradient(135deg, #15803D, #22C55E); /* 700 → 500 */ color: #ffffff; border: 0; box-shadow: var(--shadow-1); } a.btn[href*="ninodirect.com"]:hover{ background: linear-gradient(135deg, #166534, #16A34A); /* a touch darker on hover */ box-shadow: var(--shadow-2); text-decoration: none; } a.btn[href*="ninodirect.com"]:active{ transform: translateY(0); filter: saturate(1.02) brightness(0.98); } a.btn[href*="ninodirect.com"]:focus-visible{ outline: 3px solid #86EFAC; /* light green focus ring */ outline-offset: 2px; border-radius: 10px; } /* Dark-mode subtle lift */ html[data-theme="dark"] a.btn[href*="ninodirect.com"]{ box-shadow: 0 6px 20px rgba(20, 83, 45, .35); }