/* Every Sitework site. ONE STYLESHEET, SEVEN LAYOUTS, TWELVE COLOUR SETS (OR THEIR OWN), TWELVE PAIRS OF LETTERING. A site's own colours and fonts arrive as the variables in the small :root block at the top of its page (render.css_vars); everything here is written against those names, so any combination a business picks is a finished page. The layout is a class on (st-bold, st-poster...). Phone first: most people looking a business up are on a phone in a car park, so every rule starts from a narrow screen and widens. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; /* a jump to a heading clears the header */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; --radius: 10px; --gap: clamp(56px, 8vw, 104px); } body.st-classic { --radius: 3px; } body.st-clean { --radius: 16px; } body.has-callbar { padding-bottom: 64px; } @media (min-width: 761px) { body.has-callbar { padding-bottom: 0; } } img { max-width: 100%; height: auto; display: block; } a { color: var(--link); text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 4px; } h1, h2, h3 { font-family: var(--display); font-weight: var(--display-weight); line-height: 1.12; letter-spacing: -0.01em; margin: 0; text-wrap: balance; } h2 { font-size: clamp(28px, 4.2vw, 44px); margin-bottom: 28px; } h3 { font-size: 20px; } p { margin: 0 0 1em; } .s-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; } /* A part meant for reading keeps a reading width -- but lines up on the left with every other part, rather than floating in the middle of the page. */ .s-narrow > * { max-width: 760px; } .s-skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; z-index: 100; } .s-skip:focus { left: 12px; top: 12px; } /* ---- the strip saying what this page is --------------------------------- */ .s-band { background: var(--soft); color: var(--ink); font-size: 14px; text-align: center; padding: 9px 16px; border-bottom: 1px solid var(--line); } .s-band a { font-weight: 700; margin-left: 6px; } .s-banner { background: var(--accent); color: var(--accent-ink); text-align: center; font-weight: 700; padding: 11px 16px; font-size: 15px; } /* ---- buttons ----------------------------------------------------------- */ .s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; /* a thumb, not a mouse pointer */ padding: 12px 24px; border-radius: var(--radius); border: 2px solid var(--accent); background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .15s ease, filter .15s ease; } .s-btn:hover { filter: brightness(1.07); transform: translateY(-1px); } .s-btn:active { transform: translateY(0); } .s-btn.s-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .s-btn.s-ghost:hover { border-color: var(--ink); filter: none; } .s-btn-sm { min-height: 40px; padding: 8px 16px; font-size: 14.5px; } body.st-bold .s-btn { text-transform: none; letter-spacing: .01em; } .s-link { font-weight: 700; text-decoration: none; } .s-link:hover { text-decoration: underline; } /* ---- header ------------------------------------------------------------ */ .s-top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); } @supports not (background: color-mix(in srgb, red 50%, blue)) { .s-top { background: var(--bg); } } .s-top-in { display: flex; align-items: center; gap: 16px; min-height: 64px; } .s-brand { display: flex; align-items: center; color: var(--ink); text-decoration: none; min-width: 0; flex: 0 1 auto; } .s-logo { max-height: 44px; width: auto; } .s-brand-name { font-family: var(--display); font-weight: var(--display-weight); font-size: 20px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s-nav { display: none; } .s-top-cta { margin-left: auto; white-space: nowrap; } .s-top-cta .s-sm { display: none; } @media (max-width: 560px) { /* "Call 256-555-0142" beside the name leaves no room for the name */ .s-top-cta .s-lg { display: none; } .s-top-cta .s-sm { display: inline; } } .s-menu { position: relative; } .s-menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 11px; border-radius: 8px; } .s-menu summary::-webkit-details-marker { display: none; } .s-menu summary span { display: block; height: 2px; background: var(--ink); border-radius: 2px; } .s-menu nav { position: absolute; right: 0; top: 52px; min-width: 210px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: 0 14px 40px rgba(0, 0, 0, .18); display: flex; flex-direction: column; } .s-menu nav a { color: var(--ink); text-decoration: none; padding: 11px 12px; border-radius: 8px; font-weight: 600; } .s-menu nav a:hover { background: var(--soft); } @media (max-width: 460px) { .s-top-cta { padding: 8px 12px; font-size: 14px; } } @media (min-width: 900px) { .s-nav { display: flex; gap: 22px; margin-left: auto; } .s-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; opacity: .82; } .s-nav a:hover { opacity: 1; text-decoration: underline; } .s-top-cta { margin-left: 10px; } .s-menu { display: none; } /* A label never breaks in two ("Our / story"). */ .s-nav a { white-space: nowrap; } } /* A MENU TOO LONG FOR ONE LINE (render.nav_fit) gets a row of its own, under the name and the button, rather than being squeezed in beside them: "long" on every screen, "mid" only where the screen is narrow. Not the side-menu layout on a wide screen -- that has its own column. */ @media (min-width: 900px) { body:not(.st-side) .s-top.nav-long .s-top-in { flex-wrap: wrap; row-gap: 4px; padding-top: 12px; } body:not(.st-side) .s-top.nav-long .s-nav { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; gap: 6px 26px; padding: 2px 0 14px; } body:not(.st-side) .s-top.nav-long .s-top-cta { margin-left: auto; } } @media (min-width: 900px) and (max-width: 1180px) { body:not(.st-side) .s-top.nav-mid .s-top-in { flex-wrap: wrap; row-gap: 4px; padding-top: 12px; } body:not(.st-side) .s-top.nav-mid .s-nav { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; gap: 6px 26px; padding: 2px 0 14px; } body:not(.st-side) .s-top.nav-mid .s-top-cta { margin-left: auto; } } @media (min-width: 900px) and (max-width: 1099px) { body.st-side .s-top.nav-long .s-top-in, body.st-side .s-top.nav-mid .s-top-in { flex-wrap: wrap; row-gap: 4px; padding-top: 12px; } body.st-side .s-top.nav-long .s-nav, body.st-side .s-top.nav-mid .s-nav { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; gap: 6px 26px; padding: 2px 0 14px; } body.st-side .s-top.nav-long .s-top-cta, body.st-side .s-top.nav-mid .s-top-cta { margin-left: auto; } } /* ---- the top of the page ---------------------------------------------- */ .s-hero { position: relative; overflow: hidden; background: var(--soft); isolation: isolate; } .s-hero-in { position: relative; z-index: 1; } .s-hero-words { padding: clamp(56px, 9vw, 120px) 0 clamp(48px, 8vw, 104px); max-width: 760px; } .s-eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .s-hero h1 { font-size: clamp(38px, 7vw, 76px); } .s-hero-name { margin: 14px 0 0; font-weight: 700; font-size: 18px; } .s-tag { margin: 18px 0 0; font-size: clamp(18px, 2.4vw, 21px); line-height: 1.5; max-width: 34em; } .s-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .s-open { display: inline-flex; align-items: center; gap: 9px; margin: 24px 0 0; font-weight: 600; font-size: 15px; } .s-dot { width: 10px; height: 10px; border-radius: 50%; background: #9aa3ad; box-shadow: 0 0 0 4px rgba(154, 163, 173, .22); } .s-open.is-open .s-dot { background: #2fa84f; box-shadow: 0 0 0 4px rgba(47, 168, 79, .22); } .s-open.is-closed .s-dot { background: #d8543f; box-shadow: 0 0 0 4px rgba(216, 84, 63, .2); } /* A photo at the top: behind the words for bold and classic, beside them for clean. Either way the words stay readable, whatever the photo. */ .s-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .focus-top .s-hero-img { object-position: center 20%; } .focus-center .s-hero-img { object-position: center center; } .focus-bottom .s-hero-img { object-position: center 80%; } .s-hero.has-photo::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, rgba(10, 12, 16, .78) 0%, rgba(10, 12, 16, .55) 55%, rgba(10, 12, 16, .30) 100%); } .s-hero.has-photo .s-hero-words, .s-hero.has-photo .s-eyebrow, .s-hero.has-photo .s-tag { color: #fff; } .s-hero.has-photo .s-btn.s-ghost { color: #fff; border-color: rgba(255, 255, 255, .6); } .s-hero.has-photo .s-btn.s-ghost:hover { border-color: #fff; } /* bold: big, heavy, full width */ body.st-bold .s-hero:not(.has-photo) { background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent) 22%, transparent) 0, transparent 42%), repeating-linear-gradient(135deg, transparent 0 22px, color-mix(in srgb, var(--line) 55%, transparent) 22px 23px), var(--soft); } body.st-bold .s-hero.has-photo .s-hero-words { padding-top: clamp(84px, 14vw, 170px); padding-bottom: clamp(72px, 12vw, 150px); } /* classic: centred, calm */ body.st-classic .s-hero-words { margin: 0 auto; text-align: center; } body.st-classic .s-hero-btns { justify-content: center; } body.st-classic .s-tag { margin-left: auto; margin-right: auto; } body.st-classic .s-hero:not(.has-photo) { background: var(--soft); } body.st-classic .s-hero h1::after { content: ""; display: block; width: 64px; height: 2px; background: var(--accent); margin: 22px auto 0; } body.st-classic .s-hero.has-photo::after { background: rgba(12, 12, 14, .58); } /* clean: words on the left, photo on the right, lots of air */ body.st-clean .s-hero:not(.has-photo) { background: var(--bg); } /* with the same ground above and below, the usual gap under the top reads as a hole in the page */ body.st-clean .s-hero:not(.has-photo) .s-hero-words { padding-bottom: 16px; } @media (min-width: 900px) { body.st-clean .s-hero.has-photo { background: var(--bg); } body.st-clean .s-hero.has-photo::after { display: none; } body.st-clean .s-hero.has-photo .s-hero-words, body.st-clean .s-hero.has-photo .s-eyebrow, body.st-clean .s-hero.has-photo .s-tag { color: var(--ink); } body.st-clean .s-hero.has-photo .s-eyebrow { color: var(--muted); } body.st-clean .s-hero.has-photo .s-btn.s-ghost { color: var(--ink); border-color: var(--line); } body.st-clean .s-hero.has-photo .s-hero-img { left: auto; right: max(20px, calc((100vw - 1120px) / 2 + 20px)); top: 48px; bottom: 48px; width: min(44%, 500px); height: calc(100% - 96px); border-radius: var(--radius); } body.st-clean .s-hero.has-photo .s-hero-words { max-width: 52%; } } /* ---- the opening words ------------------------------------------------- */ .s-intro { padding: clamp(40px, 6vw, 72px) 0 0; } .s-intro p { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.65; } body.st-classic .s-intro { text-align: center; } /* ---- a section --------------------------------------------------------- */ .s-sec { padding: var(--gap) 0 0; } .s-sec:last-of-type { padding-bottom: var(--gap); } body.st-classic .s-sec h2 { text-align: center; } body.st-classic .s-sec h2::after { content: ""; display: block; width: 48px; height: 2px; background: var(--accent); margin: 18px auto 0; } body.st-classic .s-narrow > * { margin-left: auto; margin-right: auto; } /* the contact part is two columns: its heading lines up with its column */ body.st-classic .s-contact h2 { text-align: left; } body.st-classic .s-contact h2::after { margin-left: 0; } body.st-bold .s-sec h2 { font-size: clamp(30px, 5vw, 52px); } .s-after { margin: 26px 0 0; } body.st-classic .s-after { text-align: center; } .s-note { color: var(--muted); font-size: 15px; margin-top: 12px; } .s-small { color: var(--muted); font-size: 14px; margin: 4px 0 16px; } /* services */ .s-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } .s-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; display: flex; flex-direction: column; } .s-card h3 { margin-bottom: 8px; } .s-card-desc { color: var(--muted); font-size: 16px; } .s-card-desc p:last-child { margin-bottom: 0; } .s-price { margin: auto 0 0; padding-top: 14px; font-weight: 700; color: var(--link); } body.st-bold .s-card { border-top: 4px solid var(--accent); } body.st-clean .s-card { border-color: var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); } /* menu */ .s-menu-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 56px; } .s-menu-group h3 { font-size: 22px; padding-bottom: 10px; margin: 12px 0 6px; border-bottom: 2px solid var(--accent); } .s-menu-group ul { list-style: none; margin: 0; padding: 0; } .s-menu-group li { padding: 12px 0; border-bottom: 1px dashed var(--line); } .s-mi-line { display: flex; align-items: baseline; gap: 10px; } .s-mi-name { font-weight: 700; } .s-mi-dots { flex: 1; border-bottom: 2px dotted var(--line); transform: translateY(-4px); min-width: 20px; } .s-mi-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .s-mi-desc { display: block; color: var(--muted); font-size: 15px; margin-top: 3px; } /* why us */ .s-why-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 28px; } .s-why-list li { position: relative; padding: 4px 0 4px 40px; font-size: 18px; font-weight: 600; } .s-why-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); } /* the tick itself, drawn in the button's own lettering colour */ .s-why-list li::after { content: ""; position: absolute; left: 9px; top: 9px; width: 7px; height: 12px; border: solid var(--accent-ink); border-width: 0 3px 3px 0; transform: rotate(45deg); } /* bold sets "why us" on a band of its own, the width of the page */ body.st-bold .s-why { background: var(--surface); margin-top: var(--gap); padding: var(--gap) 0; } /* photos */ .s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .s-grid figure { margin: 0; } .s-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--surface); } .s-grid figcaption { font-size: 14px; color: var(--muted); margin-top: 7px; } /* team */ .s-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; } .s-person { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 20px 20px; } .s-person img, .s-initial { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; } .s-initial { display: flex; align-items: center; justify-content: center; background: var(--soft); color: var(--link); font-family: var(--display); font-weight: var(--display-weight); font-size: 44px; } .s-role { color: var(--muted); font-size: 15px; margin: 4px 0 10px; } .s-bio { font-size: 15.5px; } .s-bio p:last-child { margin-bottom: 0; } /* reviews */ .s-quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; } .s-quote { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 22px; position: relative; } .s-quote::before { content: "\201C"; position: absolute; top: -6px; left: 18px; font-family: Georgia, serif; font-size: 72px; line-height: 1; color: var(--accent); } .s-quote blockquote { margin: 16px 0 12px; font-size: 17px; } .s-quote blockquote p:last-child { margin-bottom: 0; } .s-quote figcaption { font-weight: 700; font-size: 15px; } /* questions */ .s-q { border-bottom: 1px solid var(--line); padding: 4px 0; } .s-q summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 18px; padding: 16px 36px 16px 0; position: relative; } .s-q summary::-webkit-details-marker { display: none; } .s-q summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 24px; font-weight: 400; color: var(--link); } .s-q[open] summary::after { content: "\2212"; } .s-q > div { padding: 0 0 16px; color: var(--muted); } .s-q > div p:last-child { margin-bottom: 0; } /* where we work */ .s-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .s-chips li { padding: 9px 16px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); font-weight: 600; font-size: 15.5px; } body.st-classic .s-chips { justify-content: center; } /* about */ .s-facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .s-facts li { font-size: 15px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); } body.st-classic .s-about { text-align: center; } body.st-classic .s-about .s-facts { justify-content: center; } .s-contact .s-facts { margin-top: 22px; } /* ---- getting in touch -------------------------------------------------- */ .s-contact { padding-bottom: var(--gap); } .s-contact-in { display: grid; gap: 40px; } @media (min-width: 900px) { .s-contact-in { grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; } } .s-contact h3 { margin: 30px 0 12px; font-size: 19px; } .s-ways { list-style: none; margin: 0; padding: 0; } .s-ways li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .s-way { color: var(--muted); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .s-ways a { font-weight: 700; font-size: 18px; word-break: break-word; } .s-hours { border-collapse: collapse; width: 100%; max-width: 420px; font-variant-numeric: tabular-nums; } .s-hours th, .s-hours td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 16px; } .s-hours th { font-weight: 600; width: 45%; } .s-hours tr.is-closed td { color: var(--muted); } .s-hours tr.is-today th, .s-hours tr.is-today td { font-weight: 800; color: var(--ink); } .s-hours tr.is-today th::after { content: " · today"; font-weight: 600; color: var(--link); font-size: 13px; } .s-social { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .s-social a { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px; } .s-social a:hover { border-color: var(--ink); } .s-form-box { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 26px 22px; } .s-form-box > h3 { margin-top: 0; font-size: 24px; } .s-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .s-f { display: block; margin: 0 0 14px; } .s-f > span { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; } .s-f input, .s-f textarea, .s-f select { width: 100%; font: inherit; font-size: 16px; /* 16px or iOS zooms the page on focus */ color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: calc(var(--radius) - 2px); padding: 12px 13px; min-height: 48px; } .s-f textarea { resize: vertical; min-height: 120px; } /* The photo box: the browser's own "Choose file" button, drawn in the site's colours rather than as a grey system button on a finished page. */ .s-f input[type=file] { padding: 8px 10px; cursor: pointer; } .s-f input[type=file]::file-selector-button { font: inherit; font-size: 15px; font-weight: 600; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: max(0px, calc(var(--radius) - 4px)); padding: 8px 14px; margin-right: 12px; cursor: pointer; } .s-f input:focus, .s-f textarea:focus, .s-f select:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 25%, transparent); } .s-f2 { display: grid; gap: 0 14px; } @media (min-width: 560px) { .s-f2 { grid-template-columns: 1fr 1fr; } } .s-form .s-btn { width: 100%; } .s-form fieldset[disabled] { opacity: .55; } .s-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .s-error { background: rgba(216, 84, 63, .12); border: 1px solid rgba(216, 84, 63, .45); color: var(--ink); border-radius: 8px; padding: 10px 13px; font-weight: 600; } .s-thanks { background: var(--soft); border-radius: var(--radius); padding: 18px; font-size: 18px; font-weight: 600; } .s-thanks p:last-child { margin-bottom: 0; } /* ---- the foot ---------------------------------------------------------- */ .s-foot { border-top: 1px solid var(--line); padding: 34px 0 40px; color: var(--muted); font-size: 14.5px; } .s-foot p { margin: 0 0 6px; } .s-foot a { color: var(--muted); } .s-foot-name { color: var(--ink); font-weight: 700; font-size: 16px; } body.st-classic .s-foot { text-align: center; } .s-install, .s-install-ios { margin-top: 14px !important; } /* ---- the call bar on a phone ------------------------------------------- */ .s-callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: var(--accent); box-shadow: 0 -6px 18px rgba(0, 0, 0, .15); padding-bottom: env(safe-area-inset-bottom); } .s-callbar a { flex: 1; text-align: center; padding: 16px 6px; color: var(--accent-ink); font-weight: 800; text-decoration: none; font-size: 16px; } .s-callbar a + a { border-left: 1px solid color-mix(in srgb, var(--accent-ink) 25%, transparent); } @media (min-width: 761px) { .s-callbar { display: none; } } /* ---- the page that says "not here" ------------------------------------- */ .s-missing { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; } .s-missing h1 { font-size: clamp(28px, 5vw, 44px); margin-bottom: 14px; } .s-missing p { color: var(--muted); } .s-plain { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } .s-privacy { padding: 56px 0 72px; } .s-privacy h1 { font-size: clamp(30px, 5vw, 46px); margin-bottom: 20px; } .s-privacy h2 { font-size: 22px; margin: 30px 0 10px; } /* ---- a part of their own ------------------------------------------------ */ /* Only ever on their preview while JTS has not said yes: said plainly, so what they are looking at is never mistaken for what the public sees. */ .s-waiting { display: inline-block; margin: 0 0 16px; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--line); background: var(--soft); color: var(--muted); font-size: 14px; font-weight: 600; } /* =========================================================================== FOUR MORE LAYOUTS. Every one of them draws the same page -- the same parts in the same order -- so anything a business turns on works in all of them. Only the arrangement changes. =========================================================================== */ /* ---- poster: the top fills the screen, like a sign ----------------------- */ body.st-poster .s-hero { min-height: min(86vh, 920px); display: flex; align-items: flex-end; } body.st-poster .s-hero-in { width: 100%; } body.st-poster .s-hero-words { padding: 110px 0 clamp(48px, 7vw, 88px); max-width: 920px; } body.st-poster .s-hero h1 { font-size: clamp(46px, 10vw, 124px); line-height: 1.0; letter-spacing: -0.02em; } body.st-poster .s-tag { font-size: clamp(19px, 2.6vw, 24px); } body.st-poster .s-sec h2 { font-size: clamp(32px, 5.4vw, 56px); } body.st-poster .s-hero.has-photo::after { background: linear-gradient(0deg, rgba(10, 12, 16, .86) 0%, rgba(10, 12, 16, .45) 55%, rgba(10, 12, 16, .16) 100%); } /* With no photo the top is their button colour, and everything on it uses the button's own lettering, which is always picked to read on it. The main button turns inside out, or it would vanish into the ground. */ body.st-poster .s-hero:not(.has-photo) { background: var(--accent); } body.st-poster .s-hero:not(.has-photo) .s-hero-words, body.st-poster .s-hero:not(.has-photo) .s-eyebrow, body.st-poster .s-hero:not(.has-photo) .s-tag, body.st-poster .s-hero:not(.has-photo) .s-open { color: var(--accent-ink); } body.st-poster .s-hero:not(.has-photo) .s-btn { background: var(--accent-ink); color: var(--accent); border-color: var(--accent-ink); } body.st-poster .s-hero:not(.has-photo) .s-btn.s-ghost { background: transparent; color: var(--accent-ink); border-color: var(--accent-ink); } @media (max-width: 700px) { body.st-poster .s-hero { min-height: 72vh; } } /* ---- cards: every part in its own panel, on a soft ground --------------- */ body.st-cards { background: var(--soft); --radius: 14px; } body.st-cards .s-top { background: color-mix(in srgb, var(--soft) 92%, transparent); } @supports not (background: color-mix(in srgb, red 50%, blue)) { body.st-cards .s-top { background: var(--soft); } } body.st-cards .s-hero, body.st-cards .s-intro > .s-wrap, body.st-cards .s-sec > .s-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .05); } body.st-cards .s-hero { width: min(1080px, calc(100% - 24px)); margin: 14px auto 0; } body.st-cards .s-hero:not(.has-photo) { background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent) 14%, transparent) 0, transparent 46%), var(--surface); } body.st-cards .s-intro > .s-wrap, body.st-cards .s-sec > .s-wrap { width: min(1080px, calc(100% - 24px)); padding: clamp(24px, 4vw, 48px); } body.st-cards .s-intro, body.st-cards .s-sec { padding-top: 14px; } body.st-cards .s-sec:last-of-type, body.st-cards .s-contact { padding-bottom: 28px; } /* inside a panel, the smaller boxes sit on the page's own ground */ body.st-cards .s-card, body.st-cards .s-quote, body.st-cards .s-person, body.st-cards .s-form-box, body.st-cards .s-facts li { background: var(--bg); } body.st-cards .s-foot { border-top: 0; } /* ---- side menu: on a computer, the name and menu stay down the left ----- */ @media (min-width: 1100px) { body.st-side { padding-left: 280px; } body.st-side .s-top { position: fixed; top: 0; bottom: 0; left: 0; width: 280px; border-bottom: 0; border-right: 1px solid var(--line); background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; overflow-y: auto; } body.st-side .s-top-in { flex-direction: column; align-items: stretch; gap: 24px; max-width: none; margin: 0; padding: 36px 26px; min-height: 100%; } body.st-side .s-brand { flex: none; } body.st-side .s-brand-name { white-space: normal; font-size: 28px; line-height: 1.15; } body.st-side .s-logo { max-height: 96px; } body.st-side .s-top-cta { order: 1; margin: 0; width: 100%; } body.st-side .s-nav { order: 2; display: flex; flex-direction: column; gap: 2px; margin: 0; } body.st-side .s-nav a { padding: 9px 12px; border-radius: 8px; font-size: 16px; opacity: 1; color: var(--ink); } body.st-side .s-nav a:hover { background: var(--soft); text-decoration: none; } body.st-side .s-menu { display: none; } } /* ---- brochure: headings down the left, the words beside them ------------ */ body.st-brochure { --radius: 4px; } body.st-brochure .s-hero { border-top: 6px solid var(--accent); } body.st-brochure .s-hero:not(.has-photo) { background: var(--bg); border-bottom: 1px solid var(--line); } @media (min-width: 900px) { /* The contact part keeps its own two columns, so it is left out. */ body.st-brochure .s-sec:not(.s-contact) > .s-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); column-gap: clamp(32px, 5vw, 72px); align-items: start; } body.st-brochure .s-sec:not(.s-contact) > .s-wrap > h2 { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 92px; margin-bottom: 0; padding-top: 12px; border-top: 3px solid var(--accent); font-size: clamp(24px, 2.6vw, 34px); } body.st-brochure .s-sec:not(.s-contact) > .s-wrap > :not(h2) { grid-column: 2; } body.st-brochure .s-sec:not(.s-contact) > .s-wrap.s-narrow > * { max-width: none; } } /* ---- pages -------------------------------------------------------------- */ /* On a page of its own, a part's heading is the page's h1. It is drawn exactly the way that part's h2 is drawn on the home page, in every layout, so moving a part to its own page changes where it is, not how it looks. */ .s-sec > .s-wrap > h1 { font-size: clamp(28px, 4.2vw, 44px); margin-bottom: 28px; } body.st-classic .s-sec h1 { text-align: center; } body.st-classic .s-sec h1::after { content: ""; display: block; width: 48px; height: 2px; background: var(--accent); margin: 18px auto 0; } body.st-bold .s-sec h1 { font-size: clamp(30px, 5vw, 52px); } body.st-poster .s-sec h1 { font-size: clamp(32px, 5.4vw, 56px); } @media (min-width: 900px) { body.st-brochure .s-sec:not(.s-contact) > .s-wrap > h1 { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 92px; margin-bottom: 0; padding-top: 12px; border-top: 3px solid var(--accent); font-size: clamp(24px, 2.6vw, 34px); } body.st-brochure .s-sec:not(.s-contact) > .s-wrap > :not(h1):not(h2) { grid-column: 2; } } /* Where you are: "Ridgeline Plumbing / Photos", under the top bar. */ .s-crumb { border-bottom: 1px solid var(--line); padding: 12px 0; font-size: 14px; color: var(--muted); } .s-crumb a { color: var(--link); text-decoration: none; font-weight: 600; } .s-crumb a:hover { text-decoration: underline; } /* A page of their own: a title, a photo, their words. */ .s-own-img { width: 100%; border-radius: var(--radius, 12px); margin: 0 0 24px; } /* The page you are on, in the menu. */ .s-nav a.on { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; } .s-menu nav a.on { background: var(--soft); }