/* London Tax Bureau — shared styles */ /* Palettes. Default is bottle green; alternatives are chosen with or . */ :root { --dark: #13302a; /* principal colour */ --darker: #0c221d; /* footer, deepest band */ --dark-line: #2c4a42; /* rules on dark */ --on-dark: #f3f1ea; /* text on dark */ --on-dark-muted: #b9c4bd; --accent: #b8955a; /* brass: rules, ornaments, text on dark */ --accent-deep: #7d5f2e; /* brass dark enough for text on light */ --paper: #fcfcfa; --stone: #eceae3; --ink: #1b2420; --slate: #5a615d; --rule: #d9d7cf; --white: #ffffff; --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif; --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif; --sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif; --wrap: 1240px; --gutter: clamp(20px, 5vw, 64px); --space: clamp(80px, 11vw, 150px); } [data-palette="midnight"] { --dark: #111c33; --darker: #0a1224; --dark-line: #2a3754; --on-dark: #f2f1ec; --on-dark-muted: #b3bbcc; --accent: #c2a068; --accent-deep: #7a5d2c; --ink: #171c28; --slate: #5a6070; } [data-palette="claret"] { --dark: #4a1622; --darker: #340e17; --dark-line: #663040; --on-dark: #f6f1ea; --on-dark-muted: #d4bfc2; --accent: #c4a36a; --accent-deep: #7a5a2a; --ink: #241a1c; --slate: #645a5c; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent-deep); text-underline-offset: 0.22em; text-decoration-thickness: 1px; } a:hover { color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .skip { position: absolute; left: -999px; top: 0; background: var(--dark); color: var(--on-dark); padding: 10px 16px; z-index: 20; } .skip:focus { left: 12px; top: 12px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .narrow { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); } .center { text-align: center; } .center p { margin-left: auto; margin-right: auto; } /* Type */ h1, h2 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: -0.01em; } h1 { font-size: clamp(2.8rem, 6.4vw, 5.75rem); line-height: 1.04; } h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.1; } h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.3; margin: 0 0 0.5em; } p { margin: 0 0 1em; max-width: 64ch; } .lede { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.55; max-width: 46ch; } .muted { color: var(--slate); } /* Ornament: a brass rule with a centred lozenge */ .ornament { position: relative; width: 150px; height: 11px; margin: 0 auto 28px; background: linear-gradient(var(--accent), var(--accent)) left center / 60px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) right center / 60px 1px no-repeat; } .ornament::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border: 1px solid var(--accent); transform: translate(-50%, -50%) rotate(45deg); } .ornament.left { margin-left: 0; } /* Header */ .site-header { background: var(--dark); color: var(--on-dark); } .site-header a { color: var(--on-dark); text-decoration: none; } .topbar { border-bottom: 1px solid var(--dark-line); font-size: 0.85rem; color: var(--on-dark-muted); } .topbar .wrap { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; } .topbar .contacts { display: flex; gap: 24px; } .topbar a { color: var(--on-dark-muted); } .topbar a:hover { color: var(--on-dark); } .masthead { padding: 34px 0 22px; text-align: center; position: relative; } .crest { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; } .crest-mark { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.08em; padding-left: 0.08em; color: var(--accent); border: 1px solid var(--accent); box-shadow: 0 0 0 4px var(--dark), 0 0 0 5px var(--accent); } .crest-name { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1; letter-spacing: 0.02em; } .crest-est { font-family: var(--serif); font-style: italic; font-size: 0.98rem; color: var(--on-dark-muted); } .nav { border-top: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line); } .nav ul { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; gap: clamp(24px, 4vw, 56px); } .nav a { display: inline-block; padding: 16px 0 14px; font-size: 0.98rem; letter-spacing: 0.02em; border-bottom: 1px solid transparent; } .nav a:hover { border-bottom-color: var(--on-dark-muted); } .nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); } .nav-toggle { display: none; position: absolute; right: var(--gutter); top: 24px; background: none; color: var(--on-dark); border: 1px solid var(--dark-line); font: inherit; font-size: 0.95rem; padding: 8px 14px; cursor: pointer; } @media (max-width: 760px) { .topbar .address { display: none; } .topbar .wrap { justify-content: center; } .masthead { padding: 22px var(--gutter) 20px; text-align: left; } .crest { flex-direction: row; gap: 14px; align-items: center; } .crest-mark { width: 46px; height: 46px; font-size: 0.8rem; box-shadow: 0 0 0 3px var(--dark), 0 0 0 4px var(--accent); } .crest-name { font-size: 1.35rem; } .crest-est { display: none; } .nav-toggle { display: block; top: 26px; } .nav { display: none; border-bottom: 0; } .nav.is-open { display: block; } .nav ul { flex-direction: column; gap: 0; padding: 0 var(--gutter) 12px; } .nav li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--dark-line); } } /* Dark bands */ .band-dark { background: var(--dark); color: var(--on-dark); } .band-dark a { color: var(--on-dark); } .band-dark .muted { color: var(--on-dark-muted); } .band-stone { background: var(--stone); } .section { padding: var(--space) 0; } .section-head { margin-bottom: clamp(44px, 6vw, 72px); } .section-head h2 { margin-bottom: 18px; } .section-head p { margin-bottom: 0; } /* Home hero */ .hero { padding: clamp(56px, 7vw, 96px) 0 clamp(200px, 22vw, 300px); text-align: center; } .hero h1 { max-width: 19ch; margin: 0 auto 30px; } .hero .lede { margin: 0 auto 40px; color: var(--on-dark-muted); } .hero .actions { justify-content: center; } .framed { margin: calc(clamp(160px, 18vw, 250px) * -1) auto 0; } .framed .frame { padding: 10px; border: 1px solid var(--accent); background: var(--paper); } .framed img { width: 100%; aspect-ratio: 1796 / 492; object-fit: cover; } .framed figcaption { font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--slate); text-align: center; padding-top: 14px; } @media (max-width: 760px) { .framed .frame { padding: 6px; } } /* Page banner (inner pages) */ .banner { padding: clamp(72px, 9vw, 120px) 0 clamp(72px, 9vw, 110px); text-align: center; } .banner h1 { max-width: 16ch; margin: 0 auto 26px; } .banner .lede { margin: 0 auto; color: var(--on-dark-muted); } .banner.with-photo { padding-bottom: clamp(200px, 22vw, 300px); } /* Buttons */ .actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; } .button { display: inline-block; font: inherit; font-size: 1rem; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; padding: 16px 30px; cursor: pointer; background: var(--dark); color: var(--on-dark); border: 1px solid var(--dark); } .button:hover { background: var(--darker); color: var(--on-dark); } .band-dark .button { background: var(--accent); border-color: var(--accent); color: var(--darker); } .band-dark .button:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--darker); } .button.ghost { background: transparent; color: var(--on-dark); border-color: var(--accent); } .button.ghost:hover { background: var(--accent); color: var(--darker); } .text-link { color: var(--ink); font-weight: 500; } /* Statement */ .statement { font-family: var(--display); font-style: italic; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.12; max-width: 20ch; margin: 0 auto; } /* Split */ .split { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(36px, 7vw, 110px); align-items: start; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } } /* Services index */ .ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px clamp(28px, 4vw, 64px); } .ledger h3 { font-size: 1.6rem; padding-bottom: 16px; border-bottom: 1px solid var(--accent); margin: 0; } .ledger ul { list-style: none; margin: 0; padding: 0; } .ledger li { border-bottom: 1px solid var(--dark-line); } .ledger li a { display: block; padding: 14px 0; text-decoration: none; } .ledger li a:hover { color: var(--accent); } @media (max-width: 960px) { .ledger { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .ledger { grid-template-columns: 1fr; } } /* Principles */ .principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(36px, 5vw, 72px); text-align: center; } .principles h3 { font-size: 1.55rem; margin-bottom: 14px; } .principles p { margin: 0 auto; max-width: 34ch; } @media (max-width: 860px) { .principles { grid-template-columns: 1fr; } } /* Services page */ .service-nav { background: var(--stone); border-bottom: 1px solid var(--rule); } .service-nav ul { list-style: none; margin: 0; padding: 20px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; } .service-nav a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); font-size: 0.95rem; } .service-nav a:hover { border-bottom-color: var(--accent-deep); } .service { display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px clamp(36px, 7vw, 110px); padding: clamp(56px, 7vw, 96px) 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 24px; } .service:last-child { border-bottom: 0; } .service h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); } .service h2::after { content: ""; display: block; width: 48px; height: 1px; background: var(--accent); margin-top: 22px; } .service ul { margin: 0 0 1em; padding-left: 1.1em; max-width: 60ch; } .service li { margin-bottom: 0.4em; } .service li::marker { color: var(--accent-deep); } @media (max-width: 860px) { .service { grid-template-columns: 1fr; } } /* About */ .profile { display: grid; grid-template-columns: 300px 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; } .profile figure { margin: 0; } .profile .frame { padding: 8px; border: 1px solid var(--accent); } .profile img { width: 100%; aspect-ratio: 271 / 398; object-fit: cover; } .profile figcaption { font-family: var(--serif); font-style: italic; color: var(--slate); padding-top: 12px; text-align: center; } @media (max-width: 700px) { .profile { grid-template-columns: 1fr; } .profile figure { max-width: 240px; } } /* Contact details */ .details { list-style: none; margin: 0; padding: 0; } .details li { padding: 20px 0; border-bottom: 1px solid var(--rule); } .details li:first-child { border-top: 1px solid var(--accent); } .details .label { display: block; font-family: var(--serif); font-style: italic; color: var(--slate); margin-bottom: 4px; } .details a { color: var(--ink); } .details .big { font-family: var(--display); font-size: 1.7rem; line-height: 1.2; text-decoration: none; } address { font-style: normal; } /* Form, set in a framed panel */ .panel { background: var(--white); border: 1px solid var(--rule); outline: 1px solid var(--accent); outline-offset: -10px; padding: clamp(32px, 5vw, 60px); } .panel h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); margin-bottom: 8px; } .form { display: grid; gap: 22px; margin-top: 28px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } } .field label { display: block; font-size: 0.92rem; font-weight: 500; margin-bottom: 6px; } .field .optional { font-weight: 400; color: var(--slate); } .field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid #c2c0b8; border-radius: 0; padding: 13px 14px; } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent-deep); } .check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; } .check input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--dark); } .hidden { position: absolute; left: -9999px; } .enquiry { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(36px, 7vw, 110px); align-items: start; } @media (max-width: 900px) { .enquiry { grid-template-columns: 1fr; } } /* Footer */ .site-footer { background: var(--darker); color: var(--on-dark-muted); padding: 80px 0 36px; font-size: 0.95rem; } .site-footer a { color: var(--on-dark); } .footer-crest { text-align: center; padding-bottom: 48px; } .footer-crest .crest-name { color: var(--on-dark); display: block; margin-bottom: 8px; } .footer-crest .crest-est { display: block; } .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; padding: 40px 0; border-top: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line); text-align: center; } .footer-grid h2 { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--accent); margin-bottom: 10px; } .footer-grid p, .footer-grid address { margin: 0 auto; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: 6px; } .footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; font-size: 0.85rem; } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }