/* www.imvisitinglondon.com — the whole design, one hand-written file, no build step. Spec: .claude/research/design-direction.md and the owner-approved mock-ups in design/*.dc.html. Light only. The type and page layout switch to desktop at 720px; the inline header nav and the landmark/station rail (map + Nearby) join at 960px, the first width where they actually fit. The body HTML between the parity markers is verbatim WordPress output and is never restructured: the photo card, the landmark facts panel and the card lists below are all selectors over that markup. */ @font-face{font-family:Fraunces;src:url(/fonts/fraunces-latin.woff2) format("woff2");font-weight:500 650;font-display:swap} @font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-latin.woff2) format("woff2");font-weight:400 600;font-display:swap} :root{ --paper:#F6F2EA;--canvas:#E9E4DA;--ink:#1D2327;--muted:#56606A;--line:#E2DBCD;--line-strong:#C9C0AE; --panel:#EDE6D8;--card:#FFF;--accent:#0F5E54;--accent-ink:#0B4740;--station:#B8322A; --map-water:#BFD6DA;--map-land:#E8EFEA;--footer:#1D2327;--footer-ink:#D9D4CA;--footer-link:#F6F2EA; --serif:Fraunces,Georgia,serif;--sans:"Source Sans 3",system-ui,sans-serif; --lift:0 1px 2px rgba(29,35,39,.08); --shadow:0 1px 2px rgba(29,35,39,.08),0 8px 24px rgba(29,35,39,.1); } /* ---- Base ---- */ *,*::before,*::after{box-sizing:border-box} html{background:var(--canvas);-webkit-text-size-adjust:100%;text-size-adjust:100%} body{display:flex;flex-direction:column;min-height:100vh;max-width:1440px;margin:0 auto;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans)} a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--accent-ink)} :focus-visible{outline:3px solid var(--accent);outline-offset:2px} img{max-width:100%;height:auto} button,input,textarea{font:inherit;color:inherit} .wrap{width:min(1152px,100% - 40px);margin-inline:auto} .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .skip{position:absolute;top:-80px;left:12px;z-index:50;padding:10px 14px;border-radius:10px;background:var(--accent);color:#fff;font-weight:600} .skip:focus{top:12px;color:#fff} .ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .search-box button,.contact-form button{min-height:44px;padding:0 18px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;font-size:16px;cursor:pointer} .search-box button:hover,.contact-form button:hover{background:var(--accent-ink)} input[type=search],input[type=text],input[type=email],textarea{width:100%;min-height:44px;padding:9px 14px;border:1px solid var(--line-strong);border-radius:10px;background:var(--card);font-size:16px} /* ---- Header: phones and tablets (the inline desktop bar starts at 960px) ---- */ .site-header{position:relative;z-index:10;border-bottom:1px solid var(--line)} .hdr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:min(1152px,100% - 32px);min-height:72px;padding-block:14px} .brand{display:flex;flex:1;align-items:center;gap:10px;min-width:0;color:var(--ink);text-decoration:none} .brand:hover{color:var(--ink)} .mark{flex:none;width:30px;height:30px} .brand-name{display:block;font:650 17px/1.1 var(--serif)} .brand-sub{display:block;font-size:12px;line-height:1.3;color:var(--muted)} .tgl>summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;list-style:none;cursor:pointer} .tgl>summary::-webkit-details-marker,.nav-group>summary::-webkit-details-marker{display:none} .tgl[open]>summary{background:var(--panel)} .site-header .search-box,.nav{display:none;flex-basis:100%} .find[open]~.search-box{display:flex;gap:8px;padding-top:6px} .menu[open]~.nav{display:flex;flex-direction:column;padding:4px 0 8px} .nav a{display:block;padding-block:10px;line-height:24px;color:var(--ink);font-weight:600;text-decoration:none} .nav a:hover{color:var(--accent)} .nav-group>summary{padding:14px 0 2px;list-style:none;color:var(--accent);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer} .nav-group ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));column-gap:16px;margin:0;padding:0;list-style:none} .nav-group a{font-weight:400;line-height:1.25} /* Phone: the menu lists every group expanded. Where ::details-content exists the groups are simply always open; elsewhere they stay tappable accordions. */ @supports selector(::details-content){ @media (max-width:959.98px){ .nav-group::details-content{content-visibility:visible} .nav-group>summary{pointer-events:none} } } /* ---- Main ---- */ .site-main{flex:1;padding-block:18px 40px} .breadcrumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--muted)} .breadcrumbs a{padding-block:12px;margin-block:-12px} h1{margin:10px 0 18px;font:650 32px/1.1 var(--serif);letter-spacing:-.01em;text-wrap:balance} .page--landmark h1{font-size:36px;line-height:1.08} .kicker{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0;padding:4px 10px 4px 6px;border-radius:999px;background:var(--station);color:#fff;font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.04em;text-transform:uppercase} .kicker .ico{width:16px;height:16px;stroke-width:2.2} .section-title{margin:0 0 10px;font:650 24px/1.2 var(--serif)} /* ---- Prose: the verbatim body ---- */ /* overflow-wrap: the bodies carry long bare URLs and runs of U+00A0 that would otherwise push a 320px phone into horizontal scroll. */ .prose{font-size:17px;line-height:1.6;overflow-wrap:anywhere} .prose>p,.prose>h2,.prose>h3,.prose>h4,.prose>ul:not(.cards),.prose>ol,.prose>div:not(.photo-grid),.prose>form{max-width:720px} .prose p{margin:0 0 14px} .prose h1{margin:0;font:inherit} .prose h2{margin:26px 0 8px;color:var(--accent);font:600 13px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase} .prose h3,.prose h4{margin:22px 0 6px;font:600 18px/1.35 var(--sans)} .prose ul:not(.cards),.prose ol{margin:0 0 14px;padding-left:1.4em} .prose img{display:block;margin:6px auto 18px;border-radius:6px} /* The photo card: the body's first image — native size (never stretched), white frame, soft shadow, a slight tilt. Centred on phones, floated right from 720px. */ .prose>:first-child>img:first-child, .prose>p:first-child:not(:has(img))+p>img:first-child{ box-sizing:content-box;max-width:calc(100% - 16px);margin:4px auto 22px;padding:8px 8px 22px; border-radius:6px;background:var(--card);box-shadow:var(--shadow);transform:rotate(var(--tilt,-1deg))} .page--landmark{--tilt:-1.2deg} /* Hubs: every photo above a card list (the lead one, and any LinkCards lifted out of the list) gets the same frame. */ .page--hub .prose>p:has(~.cards)>img:first-child{box-sizing:content-box;max-width:calc(100% - 16px);padding:8px 8px 22px;background:var(--card);box-shadow:var(--shadow);transform:rotate(var(--tilt,-1deg))} .page--hub .prose>p+p:has(~.cards)>img:first-child{--tilt:1.5deg} .page--station,.page--home{--tilt:1deg} /* The landmark facts panel: from the

that opens Website / Opening Times / Getting There (PageView puts its index on .prose as data-facts) to the end of the body, every element sits on the panel colour, so the facts read as one card. CSS only; the markup is untouched. */ .prose[data-facts]{--pad:18px;--fsz:16px} .prose[data-facts="1"]>h2:nth-of-type(1),.prose[data-facts="1"]>h2:nth-of-type(1)~:not(.ad-slot), .prose[data-facts="2"]>h2:nth-of-type(2),.prose[data-facts="2"]>h2:nth-of-type(2)~:not(.ad-slot), .prose[data-facts="3"]>h2:nth-of-type(3),.prose[data-facts="3"]>h2:nth-of-type(3)~:not(.ad-slot), .prose[data-facts="4"]>h2:nth-of-type(4),.prose[data-facts="4"]>h2:nth-of-type(4)~:not(.ad-slot), .prose[data-facts="5"]>h2:nth-of-type(5),.prose[data-facts="5"]>h2:nth-of-type(5)~:not(.ad-slot), .prose[data-facts="6"]>h2:nth-of-type(6),.prose[data-facts="6"]>h2:nth-of-type(6)~:not(.ad-slot), .prose[data-facts="7"]>h2:nth-of-type(7),.prose[data-facts="7"]>h2:nth-of-type(7)~:not(.ad-slot), .prose[data-facts="8"]>h2:nth-of-type(8),.prose[data-facts="8"]>h2:nth-of-type(8)~:not(.ad-slot), .prose[data-facts="9"]>h2:nth-of-type(9),.prose[data-facts="9"]>h2:nth-of-type(9)~:not(.ad-slot), .prose[data-facts="10"]>h2:nth-of-type(10),.prose[data-facts="10"]>h2:nth-of-type(10)~:not(.ad-slot){margin:0;padding:var(--pt,0) var(--pad) var(--pb,14px);background:var(--panel);font-size:var(--fsz)} .prose[data-facts]>h2{--pt:12px;--pb:8px} .prose[data-facts="1"]>h2:nth-of-type(1), .prose[data-facts="2"]>h2:nth-of-type(2), .prose[data-facts="3"]>h2:nth-of-type(3), .prose[data-facts="4"]>h2:nth-of-type(4), .prose[data-facts="5"]>h2:nth-of-type(5), .prose[data-facts="6"]>h2:nth-of-type(6), .prose[data-facts="7"]>h2:nth-of-type(7), .prose[data-facts="8"]>h2:nth-of-type(8), .prose[data-facts="9"]>h2:nth-of-type(9), .prose[data-facts="10"]>h2:nth-of-type(10){--pt:18px;clear:both;margin-top:22px;border-radius:14px 14px 0 0} .prose[data-facts]>:last-child:not(.ad-slot){--pb:18px;border-radius:0 0 14px 14px} .prose[data-facts]>p[style*=center]:last-child{font-size:14px;color:var(--muted)} /* ---- Link cards (LinkCards: hub and home link lists) ---- */ .cards{display:grid;gap:12px;clear:both;margin:18px 0 22px;padding:0;list-style:none} .card{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:14px;min-height:88px;overflow:hidden;border-radius:12px;background:var(--card);box-shadow:var(--lift)} .card>a{display:grid;grid-area:1/1/-1/-1;grid-template-columns:subgrid;grid-template-rows:subgrid;color:var(--ink);text-decoration:none} .card>a:hover{color:var(--accent)} /* Absolutely placed so a portrait photo cannot make its row taller: the text sets the height. */ .card img{position:absolute;top:0;left:0;width:96px;height:100%;margin:0;border-radius:0;object-fit:cover} .card-title{grid-area:2/2;padding:10px 12px 2px 0;font-size:18px;font-weight:600;line-height:1.25} .card-note{grid-area:3/2;padding:0 12px 10px 0;color:var(--muted);font-size:14px;line-height:1.35} .card>a:not(:has(img))~.card-note,.card>a:not(:has(img)) .card-title{grid-column:1/-1;padding-left:16px} .card:not(:has(img)){min-height:56px} /* A link off the site: a dashed outline card, no image. */ .card:has(>a[href^="http"]){background:none;box-shadow:none;border:1px dashed var(--line-strong)} .card>a[href^="http"]{color:var(--accent)} .card>a[href^="http"] .card-title{display:flex;align-items:center;gap:12px;font-size:16px} .card>a[href^="http"] .card-title::before{content:"";flex:none;width:22px;height:22px;background:url("data:image/svg+xml,") center/contain no-repeat} .card>a[href^="http"] .card-title::after{content:"\2197"} /* Home: a two-up grid of image-on-top cards (four-up on desktop). */ .page--home .cards{grid-template-columns:repeat(2,minmax(0,1fr))} .page--home .card{display:block;min-height:0} .page--home .card>a{display:flex;flex-direction:column} .page--home .card img{position:static;width:100%;height:108px} .page--home .card-title{padding:10px 12px 12px;font-size:16px} .page--home .prose>p:last-child{margin-top:22px;color:#3A4247;font-size:16px} /* The photographs page */ .photo-grid{columns:3 150px;column-gap:12px;margin:0 0 22px} .photo-grid a{display:block;margin:0 0 12px;break-inside:avoid} .photo-grid img{width:100%;margin:0;box-shadow:var(--lift)} /* ---- Maps ---- */ .map-card{margin-top:22px} .map-card--tap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 10px;padding:0 12px 12px;overflow:hidden;border:1px solid var(--line);border-radius:14px} /* Before the tap, .map is a pass-through so its art and button share the card's grid with the Google Maps link that sits outside it; maps.js adds .is-live and draws into it. */ .map-card--tap .map:not(.is-live){display:contents} .map-card--tap{--pin:url("data:image/svg+xml,")} .map-card--station{--pin:url("data:image/svg+xml,")} .map-art{grid-column:1/-1;height:190px;margin:0 -12px;border-bottom:1px solid var(--line);background:var(--pin) 50% 45%/40px 44px no-repeat,url("data:image/svg+xml,") center/cover var(--map-land)} .map-load{min-height:44px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;font-size:16px;cursor:pointer} .map-load:hover{background:var(--accent-ink)} .map-google{grid-column:2;display:flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:10px;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap} .map-card--tap .map.is-live{grid-column:1/-1;height:320px;margin:0 -12px;border-bottom:1px solid var(--line)} .map--all{height:300px;border:1px solid var(--line);border-radius:14px 14px 0 0;background:url("data:image/svg+xml,") center/cover var(--map-land)} .map-note{margin:0;padding:10px 14px;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;color:var(--muted);font-size:14px} .map-card--all{margin-top:30px} /* ---- Nearby ---- */ .nearby{margin-top:30px} .nearby .section-title{margin-bottom:4px} .nearby-note{margin:0 0 12px;color:var(--muted);font-size:14px} .nearby ul{margin:0;padding:0;list-style:none} .nb{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding-block:6px;border-top:1px solid var(--line)} .nb-badge{display:flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:600} .nb--station .nb-badge{background:var(--station)} .nb--hub .nb-badge{background:var(--ink)} .nb-text{display:flex;flex:1;flex-direction:column;min-width:0;line-height:1.3} .nb a{color:var(--ink);font-size:17px;font-weight:600;text-decoration:none} .nb a::after{content:"";position:absolute;inset:0} .nb:hover a{color:var(--accent)} .nb-kind{color:var(--muted);font-size:14px} .nb-walk{flex:none;color:var(--accent);font-size:15px;font-weight:600;white-space:nowrap} /* ---- Home: Areas chips ---- */ .home-more{margin-top:28px} .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .chips a{display:flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);font-size:15px;font-weight:600;text-decoration:none} .chips a:hover{border-color:var(--accent)} /* ---- Advertising (templates/partials/ad.html.twig) ---- min-height reserves the tallest rectangle (280px) plus the 20px label line, so nothing below moves when the unit arrives (CLS 0). The label is ::before on purpose: a mid-article unit sits between the two halves of the parity markers, and a real text node there would add a word to what the migration's parity gate compares. The script in the partial adds .is-empty to a unit Google leaves unfilled while it is still below the fold. */ .ad-slot{display:block;clear:both;width:100%;min-height:304px;margin:28px auto 8px;border:1px dashed var(--line-strong);border-radius:10px;text-align:center} .ad-slot::before{content:"Advertisement";display:block;height:20px;color:var(--muted);font-size:11px;font-weight:600;line-height:20px;letter-spacing:.08em;text-transform:uppercase} .ad-slot:has(ins[data-ad-status=filled]){border-color:transparent} .ad-slot.is-empty{display:none} .ad-wide{max-width:970px} .prose .ad-slot{margin:10px 0 22px} /* ---- Search, contact, privacy, errors ---- */ .search-box--page{display:flex;flex-wrap:wrap;gap:8px;max-width:560px;margin:0 0 8px} .error-links{margin-top:32px} .search-box--page label{flex-basis:100%;font-weight:600} .search-box--page input{flex:1;width:auto} .results{margin:18px 0 0;padding:0;list-style:none} .result{padding:14px 0;border-top:1px solid var(--line)} .result>a{font-size:18px;font-weight:600} .result p{margin:4px 0 0;color:var(--muted);font-size:15px} .contact-form{max-width:560px;margin-top:8px} .contact-form p{margin:0 0 16px} .contact-form label{display:block;margin-bottom:6px;font-size:15px;font-weight:600} .field-error,.contact-error{color:var(--station)} .field-error{display:block;margin-top:4px;font-size:14px} .contact-sent{padding:14px 18px;border-radius:14px;background:var(--panel)} /* Honeypot: off-screen, not display:none (some bots skip hidden fields; a real browser must render it). */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ---- Footer ---- */ .site-footer{background:var(--footer);color:var(--footer-ink);font-size:15px} .ftr{display:flex;flex-direction:column;gap:10px;padding-block:28px 36px} .ftr-brand{color:var(--footer-link);font:650 18px/1.2 var(--serif)} .ftr nav{display:flex;flex-wrap:wrap;column-gap:18px} .site-footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--footer-link)} .site-footer a:hover{color:#fff} /* --accent is ~2:1 on the footer; a light ring is ~14:1 there. */ .site-footer :focus-visible{outline-color:var(--footer-link)} /* ================= Desktop (720px and up) ================= */ @media (min-width:720px){ body{font-size:18px} .hdr{width:min(1152px,100% - 40px)} .brand{gap:12px} .mark{width:36px;height:36px} .brand-name{font-size:20px} .brand-sub{font-size:13px} .site-main{padding-block:28px 48px} .breadcrumbs{font-size:15px} h1,.page--landmark h1{margin:10px 0 22px;font-size:52px;line-height:1.05;letter-spacing:-.015em} .section-title{font-size:28px;margin-bottom:14px} .prose{font-size:18px;line-height:1.65} .prose p{margin-bottom:16px} .prose h2{margin-top:28px} .prose img.alignleft{float:left;max-width:45%;margin:6px 28px 12px 0} .prose img.alignright{float:right;max-width:45%;margin:6px 0 12px 28px} .prose>:first-child>img:first-child, .prose>p:first-child:not(:has(img))+p>img:first-child{float:right;max-width:calc(45% - 16px);margin:6px 0 16px 28px} .page--landmark{--tilt:1.2deg} /* Hubs: an image that comes before a card list stays centred, not floated beside an empty gap. */ .page--hub .prose>p:has(~.cards){max-width:none} .page--hub .prose>p:has(~.cards)>img,.page--hub .prose>p:has(~.cards)>img:first-child{float:none;margin-inline:auto} .prose[data-facts]{--pad:24px;--fsz:17px} .cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} .page--home .cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .page--home .card img{height:150px} .page--home .card-title{padding:12px 14px 14px;font-size:18px} .photo-grid{columns:4 180px} /* Home: the hero is the H1 and intro on the left, the photo card on the right. */ .page--home{display:grid;grid-template-columns:minmax(0,1fr) 260px;column-gap:72px} .page--home .prose{display:contents} .page--home h1{grid-area:1/1;align-self:end;margin:0 0 18px;font-size:60px;line-height:1.03;letter-spacing:-.02em} .page--home .prose>p:first-child{grid-area:2/1;align-self:start;max-width:680px;font-size:20px} .page--home .prose>p:first-child+p{grid-area:1/2/3/3;align-self:center;margin:0} .page--home .prose>p:first-child+p>img:first-child{float:none;max-width:calc(100% - 16px);margin:0;--tilt:2deg} .page--home .prose>:nth-child(n+3){grid-column:1/-1} .page--home .cards{margin-top:40px} .page--home .prose>p:last-child{font-size:17px} .home-more{display:grid;grid-template-columns:340px minmax(0,1fr);gap:48px;align-items:start;margin-top:40px} .home-more .map-card--all{margin-top:0} .chips{gap:10px} .chips a{padding:0 16px;font-size:16px} .map--all{height:420px} .map-art{height:220px} .ftr{flex-direction:row;align-items:center;gap:28px;padding-block:32px 40px} .ftr-brand{flex:1;font-size:20px} .ftr nav{column-gap:28px} } /* ================= Desktop header (960px and up) ================= The inline nav + search field need ~920px; below that the phone header (icons + menu) stays. */ @media (min-width:960px){ .hdr{flex-wrap:nowrap;gap:clamp(20px,2.5vw,32px);min-height:76px;padding-block:0} .brand{flex:none} .tgl,.hdr .m-only{display:none} .nav{display:flex;flex:1;flex-basis:auto;gap:clamp(16px,2vw,24px)} .site-header .search-box{display:flex;flex:0 1 260px;min-width:170px} .site-header .search-box input{height:42px;min-height:0} /* One search field and no visible button: Enter submits (implicit submission), and a clipped button would be an invisible stop in the tab order. */ .site-header .search-box button{display:none} .nav-group{position:relative} .nav-group>summary{display:flex;align-items:center;min-height:44px;padding:0;color:var(--ink);font-size:16px;letter-spacing:0;text-transform:none} .nav-group>summary::after{content:"\25BE";margin-left:5px;font-size:13px} .nav-group[open]>summary,.nav-group>summary:hover{color:var(--accent)} .nav-group ul{position:absolute;top:100%;left:-18px;z-index:20;grid-template-columns:max-content;padding:8px 18px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:var(--shadow)} .nav-cats ul{grid-template-columns:repeat(2,max-content);column-gap:28px} .nav a,.nav-group a{font-size:16px;white-space:nowrap} .nav>a{display:flex;align-items:center;min-height:44px;padding:0} } /* ================= Landmark / station rail (960px and up) ================= */ @media (min-width:960px){ .layout--rail{display:grid;grid-template-columns:minmax(0,720px) minmax(280px,360px);grid-template-rows:auto auto 1fr;column-gap:clamp(40px,6vw,72px);align-items:start} .layout--rail>*{grid-column:1} .layout--rail>.rail{grid-area:2/2/4/3;padding-top:14px} .rail .map-card{margin-top:0} .rail .nearby{margin-top:28px} .rail .section-title{font-size:26px} .rail .nb{min-height:52px} .rail .nb-badge{width:28px;height:28px;font-size:12px} .rail .nb a{font-size:16px} .rail .nb-kind{display:none} .layout--rail>.ad-slot{margin-top:32px} }