/* ============================================================ VIK VEER ENT SURGEON — DESIGN SYSTEM consultant-surgeon.co.uk ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Outfit:wght@300;400;500;600;700&display=swap'); :root { --blue: #29AAE1; --blue-dark: #1d87b5; --blue-light: #e8f6fd; --navy: #1B3A5C; --navy-deep: #0d2236; --navy-mid: #234b75; --white: #ffffff; --light: #f5f8fc; --light-mid: #eef3f9; --gray: #667085; --gray-dark: #344054; --border: #d0dae8; --gold: #c9a84c; --font-head: 'Cormorant Garamond', Georgia, serif; --font-body: 'Outfit', system-ui, sans-serif; --radius: 0.375rem; --radius-lg: 0.75rem; --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05); --shadow: 0 4px 16px rgba(0,0,0,.10); --shadow-lg: 0 12px 40px rgba(0,0,0,.14); --transition: .25s ease; --nav-h: 4.5rem; } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* font-size:100% honours the user's browser font-size preference. Default is 16px so 1rem = 16px for most visitors, but anyone who has bumped their browser setting to e.g. 20px for accessibility gets proportionally larger text throughout the entire site. */ html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 1.0625rem; /* 17px at 16px root */ line-height: 1.78; color: var(--gray-dark); background: var(--white); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--blue); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--blue-dark); } ul { list-style: none; } button { font-family: var(--font-body); cursor: pointer; border: none; background: none; } /* ── Typography clamp(min, fluid-vw, max) — all three values in rem so they scale with the user's root font-size preference. */ h1,h2,h3,h4,h5,h6 { font-family:var(--font-head); font-weight:600; line-height:1.2; color:var(--navy); } h1 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 500; } h2 { font-size: clamp(1.625rem,3.5vw,2.5rem); font-weight: 500; } h3 { font-size: clamp(1.25rem, 2.5vw,1.75rem); font-weight: 500; } h4 { font-size: 1.125rem; } h5 { font-size:.875rem; font-family:var(--font-body); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--blue); } p { margin-bottom: 1.1rem; } p:last-child { margin-bottom: 0; } strong { color: var(--navy); font-weight: 600; } .lead { font-size: 1.125rem; line-height: 1.8; color: var(--gray); } /* ── Layout Container: max-width in rem, padding in rem. Grid columns in percentages so layout flexes at every viewport. */ .container { max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; } .container-wide { max-width: 90rem; margin-inline: auto; padding-inline: 1.5rem; } .section { padding-block: 5rem; } .section-sm { padding-block: 3rem; } .section-lg { padding-block: 6.875rem; } .section--light { background: var(--light); } .section--navy { background: var(--navy); color: var(--white); } .section--deep { background: var(--navy-deep); color: var(--white); } .grid-2 { display:grid; grid-template-columns: repeat(2,49%); gap:2%; } .grid-3 { display:grid; grid-template-columns: repeat(3,32%); gap:2%; } .grid-4 { display:grid; grid-template-columns: repeat(4,23.5%); gap:2%; } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .gap-sm { gap:.5rem; } .gap-md { gap:1rem; } .gap-lg { gap:1.5rem; } .text-center { text-align: center; } .text-white { color: var(--white) !important; } .text-blue { color: var(--blue); } .text-navy { color: var(--navy); } .mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem} .mt-4{margin-top:2rem} .mt-6{margin-top:3rem} .mb-1{margin-bottom:.5rem} .mb-2{margin-bottom:1rem} .mb-3{margin-bottom:1.5rem} .mb-4{margin-bottom:2rem} /* ── Buttons */ .btn { display:inline-flex; align-items:center; gap:.5rem; padding:.8125rem 1.75rem; border-radius:var(--radius); font-family:var(--font-body); font-size:.9375rem; font-weight:500; letter-spacing:.02em; line-height:1; transition:all var(--transition); white-space:nowrap; cursor:pointer; } .btn-primary { background:var(--blue); color:var(--white); } .btn-primary:hover { background:var(--blue-dark); color:var(--white); transform:translateY(-1px); box-shadow:0 6px 20px rgba(41,170,225,.4); } .btn-navy { background:var(--navy); color:var(--white); } .btn-navy:hover { background:var(--navy-mid); color:var(--white); transform:translateY(-1px); } .btn-outline { border:2px solid var(--navy); color:var(--navy); background:transparent; } .btn-outline:hover { background:var(--navy); color:var(--white); } .btn-outline-white { border:2px solid rgba(255,255,255,.7); color:var(--white); background:transparent; } .btn-outline-white:hover { background:var(--white); color:var(--navy); } .btn-lg { padding:1rem 2.25rem; font-size:1rem; } .btn-sm { padding:.5625rem 1.25rem; font-size:.875rem; } /* ── Section labels */ .section-tag { display:inline-block; font-family:var(--font-body); font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:.75rem; } .section-tag::before { content:''; display:inline-block; width:1.375rem; height:2px; background:var(--blue); vertical-align:middle; margin-right:.5rem; } .section-heading { margin-bottom:1.25rem; } .section-intro { max-width:40rem; margin-inline:auto; } /* ── Cards */ .card { background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--border); overflow:hidden; transition:box-shadow var(--transition),transform var(--transition); } .card:hover { box-shadow:var(--shadow); transform:translateY(-3px); } .card-body { padding:1.75rem; } .card-img img { width:100%; height:13.75rem; object-fit:cover; } /* ── Top bar */ .topbar { background:var(--navy); color:rgba(255,255,255,.85); font-size:.875rem; padding:.5625rem 0; } .topbar a { color:rgba(255,255,255,.85); transition:color var(--transition); } .topbar a:hover { color:var(--white); } .topbar .container { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .topbar-left,.topbar-right { display:flex; align-items:center; gap:1.25rem; } .topbar-item { display:flex; align-items:center; gap:.4375rem; } .topbar-item svg { flex-shrink:0; } .topbar-book { background:var(--blue); color:var(--white)!important; padding:.3125rem 1rem; border-radius:4px; font-weight:500; font-size:.8125rem; transition:background var(--transition); } .topbar-book:hover { background:var(--blue-dark)!important; } /* ── Navigation */ .site-nav { position:sticky; top:0; z-index:1000; background:var(--white); box-shadow:0 1px 0 var(--border); transition:box-shadow var(--transition); } .site-nav.scrolled { box-shadow:var(--shadow); } .nav-inner { display:flex; align-items:center; gap:.5rem; height:var(--nav-h); } .nav-logo { flex-shrink:0; margin-right:.5rem; } .nav-logo img { height:3.125rem; width:auto; } .nav-links { display:flex; align-items:center; gap:.25rem; margin-left:auto; list-style:none; } .nav-links>li { position:relative; height:100%; /* stretch to full nav bar height */ display:flex; align-items:center; /* keep the text centred vertically */ } /* Transparent hover-bridge so mouse can travel from nav link to mega-menu */ .nav-links > li:hover::after, .nav-links > li.nav-open::after { content: ''; position: absolute; bottom: -8px; /* extends 8px below the
  • */ left: -20px; right: -20px; height: 8px; } .nav-links>li>a { display:flex; align-items:center; gap:.3125rem; padding:.625rem .875rem; font-size:.9rem; font-weight:500; color:var(--navy); border-radius:var(--radius); transition:all var(--transition); white-space:nowrap; } .nav-links>li>a:hover,.nav-links>li>a.active { color:var(--blue); background:var(--blue-light); } .nav-links>li>a .caret { display:inline-block; transition:transform var(--transition); } .nav-links>li:hover>a .caret { transform:rotate(180deg); } .nav-book-btn { background:var(--blue)!important; color:var(--white)!important; padding:.5625rem 1.25rem!important; border-radius:var(--radius)!important; font-weight:600!important; } .nav-book-btn:hover { background:var(--blue-dark)!important; color:var(--white)!important; } /* Mega menu */ .mega-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(0); background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:1px solid var(--border); min-width:40rem; padding:1.75rem; display:grid; grid-template-columns:repeat(3,31%); gap:1.5rem 3.5%; padding-top:0.625rem; opacity:0; visibility:hidden; transition:all .2s ease; pointer-events:none; z-index:100; } .nav-links>li:hover .mega-menu, .nav-links>li.nav-open .mega-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto; } .mega-col h6 { font-family:var(--font-body); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); border-bottom:1px solid var(--border); padding-bottom:.5rem; margin-bottom:.75rem; } .mega-col ul { list-style:none; } .mega-col ul li a { display:block; padding:.3125rem 0; font-size:.875rem; color:var(--gray-dark); transition:color var(--transition); } .mega-col ul li a:hover { color:var(--blue); } .mega-col ul li a::before { content:'→ '; color:var(--blue); font-size:.75rem; } .dropdown-menu { position:absolute; top:calc(100% + .375rem); left:0; background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:1px solid var(--border); min-width:13.75rem; padding:.5rem; opacity:0; visibility:hidden; transform:translateY(0); transition:all .2s ease; pointer-events:none; list-style:none; z-index:100; } .nav-links>li:hover .dropdown-menu, .nav-links>li.nav-open .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; } .dropdown-menu li a { display:block; padding:.5rem .875rem; font-size:.875rem; color:var(--gray-dark); border-radius:4px; transition:all var(--transition); } .dropdown-menu li a:hover { background:var(--blue-light); color:var(--blue); } /* Mobile nav */ .nav-hamburger { display:none; flex-direction:column; gap:5px; padding:.5rem; cursor:pointer; margin-left:auto; } .nav-hamburger span { display:block; width:1.5rem; height:2px; background:var(--navy); border-radius:2px; transition:all var(--transition); } .mobile-nav { display:none; position:fixed; inset:0; background:var(--white); z-index:2000; overflow-y:auto; padding:1.5rem; } .mobile-nav.open { display:block; } .mobile-nav-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; padding-bottom:1rem; border-bottom:1px solid var(--border); } .mobile-nav-close { font-size:1.5rem; color:var(--navy); background:none; border:none; cursor:pointer; min-width:2.75rem; min-height:2.75rem; display:flex; align-items:center; justify-content:center; } .mobile-nav-links { list-style:none; } .mobile-nav-links>li>a { display:block; padding:1rem 0; font-size:1.125rem; font-weight:500; color:var(--navy); border-bottom:1px solid var(--border); } .mobile-nav-links .mobile-sub { list-style:none; padding:.5rem 0 .5rem 1rem; } .mobile-nav-links .mobile-sub li a { display:flex; align-items:center; padding:.5rem 0; font-size:1rem; color:var(--gray-dark); border-bottom:1px solid #f0f0f0; min-height:2.75rem; } .mobile-sub-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; padding:1rem 0; font-size:1.125rem; font-weight:500; color:var(--navy); border-bottom:1px solid var(--border); cursor:pointer; background:none; border-left:none; border-right:none; border-top:none; text-align:left; font-family:var(--font-body); } .mobile-sub-toggle .caret { transition:transform var(--transition); } .mobile-sub-toggle.open .caret { transform:rotate(180deg); } .mobile-sub-group { display:none; } .mobile-sub-group.open { display:block; } .mobile-sub-head { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); padding:.75rem 0 .25rem; } .mobile-cta { margin-top:1.5rem; display:flex; flex-direction:column; gap:.75rem; } .mobile-cta .btn { width:100%; justify-content:center; padding:1rem; font-size:1rem; } /* ── Page hero (inner pages) */ .page-hero { background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 60%,var(--navy-mid) 100%); color:var(--white); padding:4.375rem 0 3.75rem; position:relative; overflow:hidden; } .page-hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2329AAE1' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity:.5; } .page-hero .container { position:relative; } .page-hero h1 { color:var(--white); margin-bottom:1rem; } .page-hero p { color:rgba(255,255,255,.8); font-size:1.05rem; max-width:38.75rem; } .breadcrumb { display:flex; align-items:center; gap:.5rem; font-size:.8125rem; color:rgba(255,255,255,.6); margin-bottom:1.25rem; flex-wrap:wrap; } .breadcrumb a { color:rgba(255,255,255,.7); } .breadcrumb a:hover { color:var(--white); } .breadcrumb-sep { color:rgba(255,255,255,.4); } /* ── Hero slider */ .hero { position:relative; height:100svh; min-height:37.5rem; max-height:53.75rem; overflow:hidden; } .hero-slide { position:absolute; inset:0; opacity:0; transition:opacity .8s ease; display:flex; align-items:flex-end; } .hero-slide.active { opacity:1; z-index:1; } .hero-slide-bg { position:absolute; inset:0; background-size:cover; background-position:center; } .hero-slide-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(13,34,54,.55) 0%,rgba(13,34,54,.88) 20%,rgba(13,34,54,.62) 48%,rgba(13,34,54,.10) 72%,transparent 88%); } /* hero-content-wrap: full-width flex child so text sits at left of container, not centred */ .hero-content-wrap { width:100%; position:relative; z-index:2; } .hero-content { padding-bottom:5rem; max-width:42rem; } .hero-content h1 { color:var(--white); margin-bottom:1.25rem; } .hero-content p { color:rgba(255,255,255,.85); font-size:1.1rem; margin-bottom:2rem; } .hero-btns { display:flex; gap:.875rem; flex-wrap:wrap; } .hero-nav { position:absolute; bottom:2rem; right:2rem; z-index:2; display:flex; align-items:center; gap:.625rem; } .hero-dot { width:2rem; height:3px; background:rgba(255,255,255,.35); border-radius:2px; cursor:pointer; transition:background var(--transition); border:none; } .hero-dot.active { background:var(--white); } /* ── Stats bar */ .stats-bar { background:var(--navy); color:var(--white); padding:1.75rem 0; } .stats-grid { display:flex; align-items:center; justify-content:space-evenly; gap:1rem; flex-wrap:wrap; } .stat-item { text-align:center; } .stat-num { font-family:var(--font-head); font-size:clamp(1.5rem,3vw,2.4rem); font-weight:600; color:var(--blue); line-height:1; display:block; } .stat-label { font-size:.8rem; color:rgba(255,255,255,.7); margin-top:.25rem; } /* ── Credentials bar */ .cred-bar { background:var(--white); border-bottom:1px solid var(--border); padding:1.125rem 0; } .cred-items { display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap; } .cred-item { display:flex; align-items:center; gap:.625rem; font-size:.8125rem; font-weight:500; color:var(--navy); } .cred-icon { width:2.125rem; height:2.125rem; background:var(--blue-light); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .cred-icon svg { color:var(--blue); } /* ── About section */ .about-grid { display:grid; grid-template-columns:37% 60%; gap:3%; align-items:start; } .about-img { position:relative; } .about-img img { width:auto; max-width:100%; height:auto; display:block; } .about-badge { position:absolute; bottom:1.5rem; left:1.5rem; background:var(--navy); color:var(--white); padding:.75rem 1.125rem; border-radius:var(--radius); font-size:.8125rem; font-weight:500; border-left:3px solid var(--blue); } .about-quote { border-left:3px solid var(--blue); padding:1rem 1.25rem; background:var(--blue-light); border-radius:0 var(--radius) var(--radius) 0; margin:1.5rem 0; font-style:italic; color:var(--navy); font-size:1rem; } /* ── Pathway cards */ .pathway-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:all var(--transition); box-shadow:var(--shadow-sm); } .pathway-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); } .pathway-card-img { height:13.75rem; overflow:hidden; } .pathway-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .pathway-card:hover .pathway-card-img img { transform:scale(1.04); } .pathway-card-body { padding:1.75rem; } .pathway-card-body h3 { margin-bottom:.75rem; font-size:1.375rem; } .pathway-card-body p { font-size:.9rem; color:var(--gray); margin-bottom:1.25rem; } /* ── Treatment list */ .treatments-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:1rem; } .treatment-item { display:flex; align-items:center; gap:.75rem; padding:1rem 1.25rem; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); font-size:.9rem; font-weight:500; color:var(--navy); transition:all var(--transition); text-decoration:none; } .treatment-item:hover { border-color:var(--blue); background:var(--blue-light); color:var(--blue); transform:translateX(4px); } .treatment-dot { width:.5rem; height:.5rem; background:var(--blue); border-radius:50%; flex-shrink:0; } /* ── Testimonials */ .testimonial-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.75rem; position:relative; transition:box-shadow var(--transition); } .testimonial-card:hover { box-shadow:var(--shadow); } .testimonial-card::before { content:'\201C'; font-family:var(--font-head); font-size:4rem; color:var(--blue); line-height:.6; position:absolute; top:1.25rem; left:1.5rem; opacity:.4; } .testimonial-text { font-size:.9rem; line-height:1.75; color:var(--gray-dark); margin-bottom:1.25rem; padding-top:1.25rem; } .testimonial-footer { display:flex; align-items:center; justify-content:space-between; } .testimonial-name { font-weight:600; font-size:.875rem; color:var(--navy); } .testimonial-source { font-size:.8rem; color:var(--gray); } .stars { color:#f6a623; font-size:.875rem; letter-spacing:2px; margin-bottom:.25rem; } .review-badge { display:flex; align-items:center; gap:.375rem; font-size:.8rem; font-weight:500; color:var(--gray); } .review-badge img { height:1.25rem; } /* ── Video cards */ .video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(18.75rem,1fr)); gap:1.5rem; } .video-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:all var(--transition); } .video-card:hover { box-shadow:var(--shadow); transform:translateY(-3px); } .video-thumb { position:relative; padding-top:56.25%; overflow:hidden; background:var(--navy-deep); } .video-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .3s ease; } .video-card:hover .video-thumb img { transform:scale(1.04); } .video-thumb-iframe { position:absolute; inset:0; width:100%; height:100%; border:none; } .video-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.3); transition:background var(--transition); } .video-card:hover .video-play { background:rgba(0,0,0,.15); } .video-play-btn { width:3.25rem; height:3.25rem; background:rgba(255,255,255,.92); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform var(--transition); } .video-card:hover .video-play-btn { transform:scale(1.1); } .video-play-btn svg { color:var(--navy); margin-left:3px; } .video-info { padding:1.125rem 1.25rem; } .video-info h4 { font-family:var(--font-body); font-size:.9rem; font-weight:600; color:var(--navy); line-height:1.4; margin-bottom:0; } .video-category { font-size:.75rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--blue); margin-bottom:.375rem; } .filter-bar { display:flex; gap:.625rem; flex-wrap:wrap; margin-bottom:2rem; } .filter-btn { padding:.5rem 1.25rem; border-radius:1.875rem; font-size:.875rem; font-weight:500; border:2px solid var(--border); color:var(--gray-dark); background:var(--white); cursor:pointer; transition:all var(--transition); } .filter-btn:hover,.filter-btn.active { background:var(--blue); border-color:var(--blue); color:var(--white); } .video-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9000; align-items:center; justify-content:center; padding:1.5rem; } .video-modal.open { display:flex; } .video-modal-inner { width:100%; max-width:56.25rem; aspect-ratio:16/9; position:relative; } .video-modal-inner iframe { width:100%; height:100%; border:none; border-radius:var(--radius); } .video-modal-close { position:absolute; top:-2.5rem; right:0; color:var(--white); font-size:1.5rem; cursor:pointer; background:none; border:none; padding:.25rem .5rem; line-height:1; } /* ── Content layout (inner pages) 74% article + 24% sidebar + 2% gap. On the 80rem container this gives about 950px article width, which is comfortable for long-form reading. */ .content-layout { display:grid; grid-template-columns:74% 24%; gap:2%; align-items:start; } .content-body { min-width:0; } .content-body h2 { margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--border); } .content-body h2:first-of-type { border-top:none; margin-top:0; padding-top:0; } .content-body h3 { margin-top:1.5rem; margin-bottom:.75rem; } .content-body h4 { margin-top:1.25rem; margin-bottom:.625rem; } .content-body p { margin-bottom:1rem; color:var(--gray-dark); font-size:1rem; line-height:1.8; } .content-body ul,.content-body ol { padding-left:1.5rem; margin-bottom:1rem; color:var(--gray-dark); } .content-body ul { list-style:disc; } .content-body ol { list-style:decimal; } .content-body li { margin-bottom:.375rem; font-size:1rem; line-height:1.75; } /* .content-body img — see inner page additions below */ /* Sidebar */ .sidebar { position:sticky; top:calc(var(--nav-h) + 1.5rem); } .sidebar-box { background:var(--light); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; margin-bottom:1.25rem; } .sidebar-box h4 { font-family:var(--font-body); font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--blue); margin-bottom:1rem; padding-bottom:.625rem; border-bottom:1px solid var(--border); } .sidebar-cta { background:var(--navy); color:var(--white); border-radius:var(--radius-lg); padding:1.5rem; text-align:center; } .sidebar-cta h4 { color:var(--white); font-family:var(--font-head); font-size:1.25rem; text-transform:none; letter-spacing:0; border-bottom:none; padding-bottom:0; } .sidebar-cta p { font-size:.875rem; color:rgba(255,255,255,.75); margin-bottom:1rem; } .sidebar-nav-list { list-style:none; } .sidebar-nav-list li a { display:block; padding:.4375rem 0; font-size:.875rem; color:var(--gray-dark); border-bottom:1px solid var(--border); transition:color var(--transition); } .sidebar-nav-list li a:hover { color:var(--blue); } .sidebar-nav-list li:last-child a { border-bottom:none; } /* Info boxes */ .key-facts { background:var(--blue-light); border:1px solid rgba(41,170,225,.25); border-left:4px solid var(--blue); border-radius:0 var(--radius) var(--radius) 0; padding:1.25rem 1.5rem; margin:1.75rem 0; } .key-facts h4 { color:var(--navy); font-family:var(--font-body); font-size:.875rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:.75rem; } .key-facts ul { list-style:none; padding:0; } .key-facts ul li { padding:.25rem 0 .25rem 1rem; font-size:.9rem; color:var(--navy); position:relative; } .key-facts ul li::before { content:'✓'; position:absolute; left:0; color:var(--blue); font-weight:600; } .warning-box { background:#fff8e6; border:1px solid #f6a623; border-left:4px solid #f6a623; border-radius:0 var(--radius) var(--radius) 0; padding:1.125rem 1.375rem; margin:1.5rem 0; font-size:.9rem; } .warning-box strong { color:#8a5a00; } .info-box { background:var(--blue-light); border:1px solid rgba(41,170,225,.3); border-radius:var(--radius); padding:1.25rem 1.5rem; margin:1.5rem 0; font-size:.9rem; } /* ── Location cards */ .location-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow var(--transition); } .location-card:hover { box-shadow:var(--shadow); } .location-map iframe { width:100%; height:13.75rem; border:none; display:block; } .location-body { padding:1.375rem; } .location-type { display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.1875rem .625rem; border-radius:1.875rem; margin-bottom:.625rem; } .location-type--private { background:rgba(41,170,225,.15); color:var(--blue-dark); } .location-type--nhs { background:#e8f4e8; color:#276527; } .location-body h3 { font-size:1.2rem; margin-bottom:.5rem; } .location-detail { display:flex; align-items:flex-start; gap:.5rem; font-size:.875rem; color:var(--gray); margin-bottom:.375rem; } .location-detail svg { flex-shrink:0; margin-top:3px; color:var(--blue); } .location-directions { display:inline-flex; align-items:center; gap:.375rem; font-size:.8125rem; font-weight:500; color:var(--blue); margin-top:.875rem; padding:.4375rem .875rem; border:1px solid var(--blue); border-radius:var(--radius); transition:all var(--transition); } .location-directions:hover { background:var(--blue); color:var(--white); } /* ── Contact form */ .contact-form { max-width:42.5rem; } .form-group { margin-bottom:1.25rem; } .form-label { display:block; font-size:.875rem; font-weight:500; color:var(--navy); margin-bottom:.375rem; } .form-label span { color:var(--blue); } .form-control { width:100%; padding:.75rem 1rem; border:1.5px solid var(--border); border-radius:var(--radius); font-family:var(--font-body); font-size:1rem; color:var(--gray-dark); background:var(--white); transition:border-color var(--transition); outline:none; -webkit-appearance:none; } .form-control:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(41,170,225,.12); } textarea.form-control { resize:vertical; min-height:7.5rem; } .form-row { display:grid; grid-template-columns:49% 49%; gap:2%; } .honey { display:none; } /* ── Footer */ .site-footer { background:var(--navy-deep); color:rgba(255,255,255,.75); padding:4rem 0 0; } .footer-grid { display:grid; grid-template-columns:36% 19% 19% 19%; gap:7%; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.1); } .footer-logo img { height:3.375rem; margin-bottom:1.125rem; } .footer-desc { font-size:.875rem; line-height:1.75; color:rgba(255,255,255,.6); margin-bottom:1.25rem; max-width:18.75rem; } .footer-social { display:flex; gap:.75rem; } .footer-social a { width:2.375rem; height:2.375rem; background:rgba(255,255,255,.08); border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); transition:all var(--transition); } .footer-social a:hover { background:var(--blue); color:var(--white); } .footer-col h5 { font-family:var(--font-body); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:1.125rem; } .footer-links { list-style:none; } .footer-links li { margin-bottom:.5625rem; } .footer-links a { font-size:.875rem; color:rgba(255,255,255,.6); transition:color var(--transition); } .footer-links a:hover { color:var(--white); } .footer-contact-item { display:flex; align-items:flex-start; gap:.625rem; font-size:.875rem; color:rgba(255,255,255,.65); margin-bottom:.75rem; } .footer-contact-item svg { flex-shrink:0; margin-top:3px; color:var(--blue); } .footer-contact-item a { color:rgba(255,255,255,.65); } .footer-contact-item a:hover { color:var(--white); } .footer-bottom { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 0; font-size:.8rem; color:rgba(255,255,255,.4); gap:1rem; flex-wrap:wrap; } .footer-bottom a { color:rgba(255,255,255,.4); } .footer-bottom a:hover { color:rgba(255,255,255,.7); } /* ── Cookie banner */ .cookie-banner { position:fixed; bottom:0; left:0; right:0; background:var(--navy); color:rgba(255,255,255,.9); padding:1rem 1.5rem; z-index:5000; border-top:2px solid var(--blue); display:none; } .cookie-banner.show { display:block; } .cookie-banner-inner { max-width:80rem; margin:auto; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; } .cookie-banner p { flex:1; font-size:.875rem; color:rgba(255,255,255,.8); margin:0; } .cookie-banner a { color:var(--blue); } .cookie-btns { display:flex; gap:.625rem; flex-shrink:0; } /* ── Scroll reveal */ .reveal { opacity:0; transform:translateY(1.5rem); transition:opacity .6s ease,transform .6s ease; } .reveal.visible { opacity:1; transform:none; } /* ── CTA banner */ .cta-banner { background:var(--blue); color:var(--white); padding:4rem 0; text-align:center; } .cta-banner h2 { color:var(--white); margin-bottom:.75rem; } .cta-banner p { color:rgba(255,255,255,.85); margin-bottom:2rem; font-size:1.05rem; } .cta-banner .btn { margin:0 .5rem .5rem; } /* ── Review platforms */ .review-platforms { display:flex; gap:1rem; flex-wrap:wrap; } .review-platform-btn { display:flex; align-items:center; gap:.5rem; padding:.625rem 1.25rem; border:2px solid var(--border); border-radius:var(--radius); font-weight:500; font-size:.875rem; color:var(--navy); transition:all var(--transition); } .review-platform-btn:hover { border-color:var(--blue); color:var(--blue); } .review-platform-btn img { height:1.375rem; } /* ── Accordion */ .accordion-item { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:.625rem; overflow:hidden; } .accordion-header { width:100%; display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; background:var(--white); cursor:pointer; font-weight:500; color:var(--navy); text-align:left; border:none; font-family:var(--font-body); font-size:1rem; transition:background var(--transition); } .accordion-header:hover { background:var(--light); } .accordion-header.open { background:var(--blue-light); color:var(--blue); } .accordion-icon { transition:transform var(--transition); flex-shrink:0; } .accordion-header.open .accordion-icon { transform:rotate(180deg); } .accordion-body { display:none; padding:0 1.25rem 1rem; } .accordion-body.open { display:block; } /* ── Tables */ .data-table { width:100%; border-collapse:collapse; font-size:.9rem; margin:1.5rem 0; } .data-table th { background:var(--navy); color:var(--white); padding:.75rem 1rem; text-align:left; font-weight:600; } .data-table td { padding:.6875rem 1rem; border-bottom:1px solid var(--border); color:var(--gray-dark); } .data-table tr:nth-child(even) td { background:var(--light); } .data-table tr:hover td { background:var(--blue-light); } /* ── Misc */ .divider { border:none; border-top:1px solid var(--border); margin:2rem 0; } .tag { display:inline-block; padding:.1875rem .625rem; border-radius:1.25rem; font-size:.75rem; font-weight:600; background:var(--blue-light); color:var(--blue-dark); } .visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } /* ── Patient quotes */ .patient-quote,blockquote { background:var(--blue-light); border-left:4px solid var(--blue); padding:1.125rem 1.375rem; margin:1.75rem 0; border-radius:0 .5rem .5rem 0; font-style:italic; color:var(--navy); position:relative; } .patient-quote::before,blockquote::before { content:'\201C'; font-size:3rem; color:var(--blue); line-height:.5; display:block; margin-bottom:.625rem; font-style:normal; font-family:var(--font-head); opacity:.6; } .patient-quote cite,blockquote cite { display:block; font-style:normal; font-size:.875rem; font-weight:600; color:var(--navy); margin-top:.625rem; padding-top:.5rem; border-top:1px solid rgba(41,170,225,.2); } /* ── Inline video */ /* .video-inline is defined fully in the inner page additions below */ /* ============================================================ RESPONSIVE BREAKPOINTS 1100px: sidebar drops below; footer 2-col; about stacks. 768px: hamburger nav; all grids collapse; font base bumps up. 400px: small-phone fine-tuning. ============================================================ */ @media (max-width: 68.75rem) { /* 1100px */ .content-layout { grid-template-columns:100%; gap:2rem; } .sidebar { position:static; display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:1rem; } .sidebar-cta { grid-column:1/-1; } .about-grid { grid-template-columns:100%; gap:2.5rem; } .footer-grid { grid-template-columns:47% 47%; gap:6%; } } @media (max-width: 48rem) { /* 768px */ :root { --nav-h: 4rem; } /* Bumping html font-size scales ALL rem values proportionally. 106.25% at 16px root = 17px effective base. This makes body text, spacing and tap targets all larger on mobile without touching a single HTML file. */ html { font-size: 106.25%; } body { line-height: 1.82; } .nav-links,.nav-book-btn-wrap { display:none!important; } .nav-hamburger { display:flex; } .grid-2,.grid-3,.grid-4 { grid-template-columns:100%; gap:1.25rem; } .sidebar { display:block; } .hero { max-height:37.5rem; } .hero-content { padding-bottom:3.75rem; } .hero-content p { font-size:1rem; } .hero-btns { flex-direction:column; } .hero-btns .btn { width:100%; justify-content:center; } .hero-nav { bottom:1.25rem; right:1.25rem; } .section { padding-block:3.5rem; } .section-sm { padding-block:2rem; } .section-lg { padding-block:4rem; } .cta-banner { padding:2.5rem 0; } .page-hero { padding:2.5rem 0 2rem; } .page-hero p { font-size:1rem; } .stats-grid { gap:1.5rem; } .cred-items { flex-direction:column; gap:.75rem; align-items:flex-start; } .form-row { grid-template-columns:100%; gap:0; } .footer-grid { grid-template-columns:100%; gap:2rem; } .footer-bottom { flex-direction:column; text-align:center; } .topbar .topbar-right { display:none; } .data-table { display:block; overflow-x:auto; white-space:nowrap; } .cta-banner .btn { display:block; width:90%; max-width:20rem; margin:0 auto .75rem; text-align:center; justify-content:center; } .mega-menu { min-width:100vw; } .content-body p,.content-body li { font-size:1rem; } .filter-bar { gap:.5rem; } } @media (max-width: 25rem) { /* 400px */ .container { padding-inline:1rem; } h1 { font-size:clamp(1.625rem,8vw,3.6rem); } h2 { font-size:clamp(1.375rem,6vw,2.5rem); } h3 { font-size:clamp(1.125rem,5vw,1.75rem); } .btn-lg { padding:.875rem 1.5rem; font-size:.9375rem; } .video-grid { grid-template-columns:100%; } .stat-num { font-size:1.5rem; } } /* ============================================================ INNER PAGE ADDITIONS (previously scattered as inline