/* Dog House, Dubai. Site stylesheet. Warm cream ground, brand green from the logo, photography in shaped frames. Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd. Built on Pressific Studio by Pressific. Colour rules, all measured, none guessed: --green #48AA1E is 2.79:1 on the cream ground. It is a FILL, never text. Text on a green fill is --ink (5.96:1). White on it is 2.98:1 and fails. --green-ink #276613 is 6.56:1 on cream and is the green used as text. --green-solid #276613 carries white text at 7.01:1 for solid buttons. --amber #F5A623 is 1.9:1 on cream: large decorative fills only. --amber-mark #C77A05 is 3.16:1 and is what star glyphs use. */ :root { /* Ground and ink */ --ground: #FBF7F0; --ground-2: #F1EADD; --ground-3: #E8DFCE; --ink: #16181D; --ink-2: #1F232B; --ink-soft: #55564F; --line: rgba(22, 24, 29, 0.12); --line-strong: rgba(22, 24, 29, 0.24); /* Brand */ --green: #48AA1E; /* fill only */ --green-ink: #276613; /* green as text on cream */ --green-solid: #276613; /* solid button, white text */ --green-wash: #EAF4E3; --amber: #F5A623; /* large fills only: 1.9:1 on the ground */ --amber-mark: #C77A05; /* star glyphs: 3.16:1, meets the 3:1 non-text threshold */ /* On the dark band */ --on-dark: #FBF7F0; --on-dark-soft: rgba(251, 247, 240, 0.72); --line-dark: rgba(251, 247, 240, 0.18); /* Type */ --display: "Outfit", "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --quote: "Fraunces", Georgia, "Times New Roman", serif; /* Rhythm */ --maxw: 1200px; --maxw-nr: 760px; --gutter: clamp(20px, 5vw, 56px); --sect: clamp(72px, 9vw, 132px); --r-sm: 10px; --r-md: 20px; --r-lg: 32px; --r-xl: clamp(48px, 9vw, 120px); /* the one oversized corner */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* Legacy token aliases: the lock-in partials and platform CSS reference these names, so they stay defined and point at this palette. */ --cream: var(--ink); --cream-soft: var(--ink-soft); --muted: var(--ink-soft); --gold: var(--green); --gold-2: var(--green-ink); --serif: var(--quote); } /* This design ships one contrast-checked palette. The theme cookie may set either value on ; both resolve to the same colours deliberately. */ [data-theme="light"], [data-theme="dark"] { color-scheme: light; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.68; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--green); color: var(--ink); } /* Everything interactive keeps a visible focus ring. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: var(--on-dark); padding: 14px 22px; border-radius: 0 0 var(--r-sm) 0; font-weight: 600; } .skip-link:focus { left: 0; } /* ---------------------------------------------------------------- layout */ .shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .shell--narrow { max-width: calc(var(--maxw-nr) + var(--gutter) * 2); } .section { padding-block: var(--sect); position: relative; } .section--tight { padding-block: clamp(48px, 6vw, 84px); } .section--warm { background: var(--ground-2); } .section--dark { background: var(--ink); color: var(--on-dark); } .section--dark .lede, .section--dark .section-head__lede { color: var(--on-dark-soft); } /* Bleed to the viewport edge from inside the centred shell. */ .bleed { margin-left: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--maxw)) / 2))); width: 100vw; max-width: 100vw; } /* ------------------------------------------------------------------ type */ h1, h2, h3, h4, h5 { font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -0.022em; text-wrap: balance; } .display-1 { font-size: clamp(2.7rem, 7.4vw, 5.4rem); font-weight: 800; letter-spacing: -0.032em; } .display-2 { font-size: clamp(2.1rem, 4.8vw, 3.6rem); font-weight: 700; letter-spacing: -0.026em; } .display-3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -0.018em; } .display-4 { font-size: clamp(1.2rem, 1.7vw, 1.4rem); font-weight: 700; letter-spacing: -0.01em; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-ink); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--green); flex: none; } .section--dark .eyebrow { color: var(--green); } .section--dark .eyebrow::before { background: var(--green); } .lede { font-size: clamp(1.06rem, 1.5vw, 1.24rem); line-height: 1.62; color: var(--ink-soft); max-width: 62ch; } .prose p + p { margin-top: 1.1em; } .prose p { max-width: 68ch; color: var(--ink-soft); } .section--dark .prose p { color: var(--on-dark-soft); } .section-head { max-width: 44ch; margin-bottom: clamp(36px, 5vw, 60px); } .section-head--wide { max-width: 60ch; } .section-head .lede { margin-top: 18px; } /* --------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -0.005em; padding: 15px 30px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: transform .28s var(--ease), background-color .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease); text-align: center; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } /* Ink text on the brand green fill: 5.96:1. White would be 2.98:1 and fail. */ .btn--primary { background: var(--green); color: var(--ink); box-shadow: 0 6px 0 rgba(39,102,19,.28); } .btn--primary:hover { background: #52BB24; box-shadow: 0 8px 0 rgba(39,102,19,.32); } .btn--ink { background: var(--ink); color: var(--on-dark); } .btn--ink:hover { background: var(--ink-2); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn--ghost:hover { border-color: var(--ink); background: rgba(22,24,29,.04); } .section--dark .btn--ghost { color: var(--on-dark); border-color: var(--line-dark); } .section--dark .btn--ghost:hover { border-color: var(--on-dark); background: rgba(251,247,240,.08); } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } /* A text link that reads as a link without underlining everything. */ .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; color: var(--green-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: rgba(72,170,30,.5); } .link-arrow:hover { text-decoration-color: var(--green-ink); } .link-arrow svg { transition: transform .3s var(--ease); flex: none; } .link-arrow:hover svg { transform: translateX(4px); } .section--dark .link-arrow { color: var(--green); text-decoration-color: rgba(72,170,30,.6); } /* ----------------------------------------------------------------- media */ /* One oversized corner, direction alternating down the page. */ .frame { position: relative; overflow: hidden; background: var(--ground-3); border-radius: var(--r-md); } .frame img { width: 100%; height: 100%; object-fit: cover; } .frame--tl { border-top-left-radius: var(--r-xl); } .frame--tr { border-top-right-radius: var(--r-xl); } .frame--br { border-bottom-right-radius: var(--r-xl); } .frame--bl { border-bottom-left-radius: var(--r-xl); } .frame--arch { border-radius: 999px 999px var(--r-md) var(--r-md); } .frame--round { border-radius: 999px; } .frame--4x3 { aspect-ratio: 4 / 3; } .frame--1x1 { aspect-ratio: 1 / 1; } .frame--3x4 { aspect-ratio: 3 / 4; } .frame--16x9 { aspect-ratio: 16 / 9; } .caption { margin-top: 12px; font-size: .88rem; color: var(--ink-soft); } .section--dark .caption { color: var(--on-dark-soft); } /* Slow drift on the hero photograph. Decoration, and reduced-motion safe. */ @media (prefers-reduced-motion: no-preference) { .kenburns img { animation: kb 34s var(--ease) infinite alternate; transform-origin: 52% 58%; } } @keyframes kb { from { transform: scale(1.01); } to { transform: scale(1.075); } } /* ---------------------------------------------------------------- header */ .site-header { position: sticky; top: 0; z-index: 90; background: rgba(251, 247, 240, 0.88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background-color .3s var(--ease); } .site-header.is-stuck { border-bottom-color: var(--line); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; } .brand { display: inline-flex; align-items: center; gap: 12px; flex: none; } .brand img { width: auto; height: 50px; } .brand__name { display: none; } .nav { display: flex; align-items: center; gap: 4px; } .nav__link { font-family: var(--display); font-weight: 600; font-size: .96rem; padding: 10px 13px; border-radius: 999px; color: var(--ink); transition: background-color .25s var(--ease), color .25s var(--ease); white-space: nowrap; } .nav__link:hover { background: var(--green-wash); color: var(--green-ink); } .nav__link[aria-current="page"] { color: var(--green-ink); background: var(--green-wash); } /* Services submenu. Hover on a pointer, click on touch, keyboard reachable. */ .nav__group { position: relative; } .nav__panel { position: absolute; top: calc(100% + 8px); left: 0; min-width: 232px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 18px 40px -18px rgba(22,24,29,.28); padding: 8px; display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; } .nav__group:hover .nav__panel, .nav__group:focus-within .nav__panel, .nav__group.is-open .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); } .nav__panel a { padding: 9px 14px; border-radius: var(--r-sm); font-size: .94rem; font-weight: 500; color: var(--ink-soft); } .nav__panel a:hover { background: var(--green-wash); color: var(--green-ink); } .header__cta { flex: none; } .header__cta .btn { padding: 12px 22px; font-size: .95rem; } .nav-toggle { display: none; width: 46px; height: 46px; flex: none; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; color: var(--ink); } .nav-toggle__bars { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease); } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 1080px) { .nav-toggle { display: inline-flex; } .header__cta { display: none; } .nav { position: fixed; inset: 76px 0 auto 0; background: var(--ground); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 2px; padding: 16px var(--gutter) 30px; max-height: calc(100dvh - 76px); overflow-y: auto; /* Closed state is display:none, not opacity: nothing to trap focus in. */ display: none; } .nav.is-open { display: flex; } .nav__link { padding: 13px 14px; font-size: 1.06rem; } .nav__panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 2px 0 6px 14px; padding: 2px 0 2px 10px; display: none; } .nav__group.is-open .nav__panel { display: grid; } .nav__mobile-cta { margin-top: 14px; } } @media (min-width: 1081px) { .nav__mobile-cta { display: none; } } /* ------------------------------------------------------------------ hero */ .hero { position: relative; padding-top: clamp(36px, 5vw, 64px); padding-bottom: 0; } .hero__grid > * { min-width: 0; } .hero__grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; } /* Measures go on the text elements themselves, never on this wrapper: a ch value on a container resolves against the CONTAINER's font-size, so 20ch here is about 160px and the display heading wraps a word per line. */ .hero__copy { min-width: 0; } /* The client's H1 is a long sentence, so the hero runs a step smaller than the display-1 default: at the full size it takes five lines and pushes both calls to action off a 900px screen. The column already sets the measure. */ .hero .display-1 { font-size: clamp(2.3rem, 5vw, 4.1rem); } .hero__lede { margin-top: 22px; max-width: 44ch; } /* The client's five taglines, cycled. Every line is in the DOM and readable with scripting off: the cycling is added by JS, never the visibility. With no script the list reads as one dot-separated line. */ .tagcycle { display: flex; align-items: flex-start; gap: 10px; font-family: var(--display); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--green-ink); margin-bottom: 18px; } .tagcycle::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--green); flex: none; margin-top: .62em; } .tagcycle__list { list-style: none; } .tagcycle__list li { display: inline; } .tagcycle__list li + li::before { content: " ยท "; } html.js .tagcycle__list { position: relative; } html.js .tagcycle__list li { display: block; position: absolute; top: 0; left: 0; right: 0; opacity: 0; transform: translateY(0.4em); transition: opacity .5s var(--ease), transform .5s var(--ease); } html.js .tagcycle__list li + li::before { content: none; } html.js .tagcycle__list li.is-on { opacity: 1; transform: none; position: relative; } @media (prefers-reduced-motion: reduce) { html.js .tagcycle__list li { transition: none; } } .hero__media { position: relative; } .hero__badge { position: absolute; left: -14px; bottom: 26px; background: var(--ground); color: var(--ink); border-radius: var(--r-md); padding: 16px 20px; box-shadow: 0 22px 44px -22px rgba(22,24,29,.4); display: flex; align-items: center; gap: 14px; max-width: 260px; } .hero__badge strong { font-family: var(--display); font-size: 1.5rem; line-height: 1; display: block; } .hero__badge span { font-size: .82rem; color: var(--ink-soft); line-height: 1.35; display: block; margin-top: 4px; } .hero__badge-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--green); flex: none; } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero .display-1 { max-width: 15ch; } .hero__badge { left: 10px; bottom: 14px; padding: 13px 16px; max-width: 220px; } } /* --------------------------------------------------------------- figures */ .facts { display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); background: var(--line); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); } .fact { background: var(--ground); padding: clamp(22px, 3vw, 34px); } .section--warm .fact { background: var(--ground-2); } .fact__n { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1; letter-spacing: -0.03em; color: var(--ink); } .fact__l { margin-top: 10px; font-size: .92rem; color: var(--ink-soft); line-height: 1.45; } @media (max-width: 860px) { .facts { grid-template-columns: repeat(2, 1fr); } } /* ---------------------------------------------------------------- cards */ .cards { display: grid; gap: clamp(20px, 2.6vw, 30px); } .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 980px) { .cards--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 680px) { .cards--3, .cards--2 { grid-template-columns: 1fr; } } .card { background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-md); border-bottom-right-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .section--warm .card { background: var(--ground); } .card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(22,24,29,.44); border-color: var(--line-strong); } .card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ground-3); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .card:hover .card__media img { transform: scale(1.045); } .card__body { padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 12px; flex: 1; } .card__body p { color: var(--ink-soft); font-size: .98rem; } .card__body .link-arrow { margin-top: auto; align-self: flex-start; } /* The two promises, on a green wash. */ .promises { display: grid; gap: clamp(18px, 2.4vw, 26px); grid-template-columns: repeat(2, minmax(0,1fr)); } @media (max-width: 720px) { .promises { grid-template-columns: 1fr; } } .promise { background: var(--green-wash); border-radius: var(--r-md); border-top-left-radius: var(--r-lg); padding: clamp(26px, 3vw, 40px); } .promise__icon { width: 52px; height: 52px; border-radius: 999px; background: var(--green); color: var(--ink); display: grid; place-items: center; margin-bottom: 20px; } .promise h3 { margin-bottom: 10px; } .promise p { color: var(--ink-soft); } /* ------------------------------------------------------------ split rows */ .split { display: grid; gap: clamp(30px, 5vw, 72px); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; } /* A grid item defaults to min-width:auto, so a wide child (the transport table) refuses to shrink and pushes the whole page sideways on a phone even though the table has its own overflow-x. */ .split > * { min-width: 0; } .split + .split { margin-top: clamp(56px, 8vw, 110px); } .split--flip .split__media { order: 2; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } .split--flip .split__media { order: 0; } } .tick-list { list-style: none; display: grid; gap: 12px; margin-top: 26px; } .tick-list li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; color: var(--ink-soft); } .tick-list li::before { content: ""; width: 22px; height: 22px; border-radius: 999px; background: var(--green-wash); border: 2px solid var(--green); margin-top: 5px; } .section--dark .tick-list li { color: var(--on-dark-soft); } .section--dark .tick-list li::before { background: rgba(72,170,30,.18); } /* ---------------------------------------------------------- testimonials */ .quotes { display: grid; gap: clamp(20px, 2.6vw, 28px); grid-template-columns: repeat(3, minmax(0,1fr)); align-items: start; } @media (max-width: 1000px) { .quotes { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 680px) { .quotes { grid-template-columns: 1fr; } } .quote { background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-md); border-top-right-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 16px; } .section--warm .quote { background: var(--ground); } .quote__mark { font-family: var(--quote); font-size: 3rem; line-height: .6; color: var(--green); height: 1.4rem; } .quote blockquote { font-family: var(--quote); font-size: 1.06rem; line-height: 1.55; font-optical-sizing: auto; } .quote__stars { display: flex; gap: 3px; } .quote__stars svg { width: 17px; height: 17px; color: var(--amber-mark); } .quote cite { font-style: normal; font-size: .88rem; font-weight: 600; color: var(--ink-soft); font-family: var(--display); } /* ------------------------------------------------------ opening sequence */ /* Every rule here is scoped to .dh-intro, an element that only exists when intro.php's script builds it. Nothing in this block can touch the page. */ .dh-intro { position: fixed; inset: 0; z-index: 300; background: var(--ground); display: grid; place-items: center; overflow: hidden; transition: transform .62s cubic-bezier(.86, 0, .07, 1), opacity .4s ease .22s; } /* Lifts upward, so it hands over to the page transition, which arrives from the top. */ .dh-intro.is-out { transform: translateY(-100%); opacity: 0; } /* The page must not scroll under a full-screen panel. */ html.dh-intro-on, html.dh-intro-on body { overflow: hidden; } /* Trail and mark are laid out as one row so the whole composition centres, rather than the mark centring and the trail hanging off to one side. */ .dh-intro__stage { display: flex; align-items: center; gap: clamp(6px, 2.5vw, 30px); } .dh-intro__trail { position: relative; flex: none; width: clamp(158px, 27vw, 310px); height: clamp(96px, 15vw, 160px); } .dh-intro__paw { position: absolute; display: block; width: clamp(30px, 6.5vw, 46px); color: var(--green); opacity: 0; transform: scale(.45) rotate(var(--rot, 0deg)); animation: dh-paw .52s cubic-bezier(.2, .9, .3, 1.5) forwards; } .dh-intro__paw svg { width: 100%; height: auto; fill: currentColor; } /* Trotting left to right, rising and falling like a real gait. */ .dh-intro__paw--1 { left: 0%; top: 58%; --rot: -18deg; animation-delay: .10s; } .dh-intro__paw--2 { left: 26%; top: 26%; --rot: -6deg; animation-delay: .25s; } .dh-intro__paw--3 { left: 52%; top: 56%; --rot: 8deg; animation-delay: .40s; } .dh-intro__paw--4 { left: 78%; top: 22%; --rot: 18deg; animation-delay: .55s; } @keyframes dh-paw { from { opacity: 0; transform: scale(.45) rotate(var(--rot, 0deg)); } 55% { opacity: 1; transform: scale(1.14) rotate(var(--rot, 0deg)); } to { opacity: .42; transform: scale(1) rotate(var(--rot, 0deg)); } } .dh-intro__mark { flex: none; width: clamp(124px, 24vw, 190px); height: auto; opacity: 0; transform: scale(.8) translateY(12px); animation: dh-mark .74s cubic-bezier(.2, .9, .3, 1.45) .7s forwards; } @keyframes dh-mark { from { opacity: 0; transform: scale(.82) translateY(10px); } to { opacity: 1; transform: none; } } /* Belt and braces: if the panel is ever still present when the system asks for less motion, it holds nothing back. */ @media (prefers-reduced-motion: reduce) { .dh-intro { display: none; } html.dh-intro-on, html.dh-intro-on body { overflow: auto; } } /* ------------------------------------------------- reviews as live notes */ /* The testimonials section is visible by default. html.has-toasts is only ever added by toasts.js in the same breath as starting the notes, so a script failure leaves the reviews exactly where they were. Hidden means VISUALLY hidden: the section stays in the document, so crawlers, answer engines and screen readers keep the full set of reviews either way. */ @media (min-width: 62rem) { html.has-toasts #testimonials { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; margin: 0; border: 0; } } .dh-toasts { position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 80; pointer-events: none; } .dh-toast { pointer-events: auto; width: min(23rem, calc(100vw - 3rem)); background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-md); border-bottom-left-radius: var(--r-lg); box-shadow: 0 6px 16px rgba(22,24,29,.10), 0 24px 60px rgba(22,24,29,.24); padding: 1.05rem 1.2rem 1.1rem; position: relative; /* from-state lives here, on an element this script creates itself, so it can never strand markup that was already in the page */ opacity: 0; transform: translate(-14px, 52px) rotate(-4deg); transition: opacity .5s var(--ease), transform .6s cubic-bezier(.2,.9,.3,1.3); } .dh-toast.is-in { opacity: 1; transform: translate(0, 0) rotate(-0.6deg); } .dh-toast.is-out { opacity: 0; transform: translate(0, 26px) rotate(-0.6deg); transition-duration: .4s, .4s; } .dh-toast__close { position: absolute; top: .35rem; right: .5rem; border: 0; background: none; cursor: pointer; font-size: 1.2rem; line-height: 1; color: var(--ink-soft); padding: .3rem; } .dh-toast__close:hover { color: var(--ink); } .dh-toast__stars { color: var(--amber-mark); font-size: .85rem; letter-spacing: .12em; margin-bottom: .45rem; } .dh-toast__stars span { display: inline-block; opacity: 0; transform: scale(0); } .dh-toast.is-in .dh-toast__stars span { animation: dh-stamp .35s cubic-bezier(.2,.9,.3,1.6) forwards; } .dh-toast.is-in .dh-toast__stars span:nth-child(1) { animation-delay: .25s; } .dh-toast.is-in .dh-toast__stars span:nth-child(2) { animation-delay: .32s; } .dh-toast.is-in .dh-toast__stars span:nth-child(3) { animation-delay: .39s; } .dh-toast.is-in .dh-toast__stars span:nth-child(4) { animation-delay: .46s; } .dh-toast.is-in .dh-toast__stars span:nth-child(5) { animation-delay: .53s; } @keyframes dh-stamp { to { opacity: 1; transform: scale(1); } } .dh-toast__text { position: relative; margin: 0 0 .55rem; font-size: .95rem; line-height: 1.55; color: var(--ink); } .dh-toast__ghost { visibility: hidden; } /* sizes the card up front */ .dh-toast__typed { position: absolute; inset: 0; } .dh-toast__caret { display: inline-block; width: 2px; height: 1em; background: var(--green); vertical-align: text-bottom; margin-left: 1px; animation: dh-caret .8s steps(1) infinite; } .dh-toast.is-signed .dh-toast__caret { display: none; } /* pen down */ @keyframes dh-caret { 50% { opacity: 0; } } .dh-toast__name { display: block; font-style: normal; font-family: var(--display); font-weight: 700; font-size: .84rem; color: var(--green-ink); opacity: 0; transition: opacity .4s var(--ease), transform .4s var(--ease); transform: translateY(5px); } .dh-toast.is-signed .dh-toast__name { opacity: 1; transform: none; } /* ------------------------------------------------------------ the video */ .video-inline { margin: 0; } .video-inline video { width: 100%; height: auto; display: block; border-radius: var(--r-md); border-top-right-radius: var(--r-xl); background: var(--ink); } .video-inline figcaption { margin-top: 16px; max-width: 66ch; } .video-inline figcaption strong { display: block; font-family: var(--display); font-size: 1.04rem; margin-bottom: 6px; } .video-inline figcaption span { color: var(--ink-soft); font-size: .95rem; } .section--dark .video-inline figcaption span { color: var(--on-dark-soft); } .video-card { position: relative; } .video-card__btn { display: block; position: relative; width: 100%; padding: 0; border: 0; background: var(--ground-3); cursor: pointer; border-radius: var(--r-md); border-bottom-left-radius: var(--r-xl); overflow: hidden; text-align: left; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .video-card__btn:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -28px rgba(22,24,29,.5); } .video-card__btn img { width: 100%; height: auto; display: block; transition: transform .6s var(--ease); } .video-card__btn:hover img { transform: scale(1.03); } .video-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 999px; background: var(--green); color: var(--ink); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(22,24,29,.35); transition: transform .3s var(--ease); } .video-card__btn:hover .video-card__play { transform: translate(-50%, -50%) scale(1.08); } .video-card__play svg { margin-left: 4px; } .video-card__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 24px 22px; background: linear-gradient(to top, rgba(10,11,14,.86), rgba(10,11,14,0)); color: var(--on-dark); } .video-card__label strong { display: block; font-family: var(--display); font-size: 1.14rem; } .video-card__label span { font-size: .9rem; opacity: .82; } /* ------------------------------------------------- the bottom-right stack */ /* Three things want this corner, so they are stacked deliberately rather than left to overlap. Measured from the bottom: 0px the WhatsApp button, 56px tall 68px the tour replay button, 44px, added by main.js after the film has been dismissed or watched (the platform's back-to-top is pushed above whichever of those exist) The review notes live bottom-LEFT, so they never enter this conversation. */ :root { --float-gut: clamp(14px, 3vw, 32px); --float-wa: 56px; --float-tour: 44px; } .floats { position: fixed; right: var(--float-gut); bottom: var(--float-gut); z-index: 96; } /* WhatsApp */ .wa__btn { display: flex; align-items: center; gap: 0; width: var(--float-wa); height: var(--float-wa); border-radius: 999px; background: #25D366; color: #fff; box-shadow: 0 6px 18px rgba(22,24,29,.22), 0 2px 6px rgba(22,24,29,.14); overflow: hidden; white-space: nowrap; transition: width .38s var(--ease), gap .38s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease); padding-left: 13px; } .wa__btn svg { flex: none; } .wa__btn-label { font-family: var(--display); font-weight: 700; font-size: .92rem; opacity: 0; max-width: 0; transition: opacity .28s var(--ease), max-width .38s var(--ease); } /* The label unfurls on hover; it is never the only way to know what this is, because the button carries an aria-label too. */ @media (hover: hover) and (min-width: 700px) { .wa:hover .wa__btn, .wa__btn:focus-visible { width: auto; gap: 10px; padding-right: 20px; } .wa:hover .wa__btn-label, .wa__btn:focus-visible .wa__btn-label { opacity: 1; max-width: 14rem; } } .wa__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22,24,29,.26); } .wa__panel { position: absolute; right: 0; bottom: calc(var(--float-wa) + 12px); width: min(19rem, calc(100vw - 2.5rem)); background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-md); border-bottom-right-radius: var(--r-sm); box-shadow: 0 6px 16px rgba(22,24,29,.10), 0 24px 56px rgba(22,24,29,.24); padding: 18px 18px 16px; transform-origin: bottom right; } html.js .wa__panel[hidden] { display: none; } .wa__panel.is-in { animation: wa-pop .34s cubic-bezier(.2,.9,.3,1.3) both; } @keyframes wa-pop { from { opacity: 0; transform: scale(.9) translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .wa__panel.is-in { animation: none; } } .wa__close { position: absolute; top: 6px; right: 8px; border: 0; background: none; cursor: pointer; font-size: 1.2rem; line-height: 1; color: var(--ink-soft); padding: 4px; } .wa__close:hover { color: var(--ink); } .wa__title { font-family: var(--display); font-weight: 700; font-size: 1.02rem; } .wa__desc { font-size: .9rem; color: var(--ink-soft); margin-top: 4px; } .wa__go { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 11px 13px; border-radius: var(--r-sm); background: var(--ground-2); border: 1px solid var(--line); transition: background-color .25s var(--ease), border-color .25s var(--ease); } .wa__go:hover { background: var(--green-wash); border-color: rgba(72,170,30,.45); } .wa__avatar { width: 38px; height: 38px; border-radius: 999px; flex: none; background: #25D366; color: #fff; display: grid; place-items: center; } .wa__go-text { display: grid; gap: 2px; min-width: 0; } .wa__go-text strong { font-family: var(--display); font-size: .95rem; } .wa__go-text span { font-size: .82rem; color: var(--ink-soft); } /* The collapsed tour button, sitting on top of the WhatsApp one. */ .tour-tab { position: fixed; z-index: 96; right: var(--float-gut); bottom: calc(var(--float-gut) + var(--float-wa) + 12px); width: var(--float-tour); height: var(--float-tour); border-radius: 999px; border: 1px solid var(--line); background: var(--ground); color: var(--green-ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 5px 14px rgba(22,24,29,.18); opacity: 0; transform: scale(.7); transition: opacity .35s var(--ease), transform .35s cubic-bezier(.2,.9,.3,1.5), background-color .25s var(--ease); } .tour-tab.is-in { opacity: 1; transform: none; } .tour-tab:hover { background: var(--green-wash); } .tour-tab svg { margin-left: 2px; } /* On a phone the corner belongs to WhatsApp: the tour stays reachable from the footer and from the homepage card. */ @media (max-width: 640px) { .tour-tab { display: none; } } /* Push the platform's back-to-top above this stack. vibed-enhance.css loads after this file, so the override needs the extra specificity of html. */ html .vibed-top { bottom: calc(var(--float-gut) + var(--float-wa) + 12px); } @media (min-width: 641px) { html.has-tour-tab .vibed-top { bottom: calc(var(--float-gut) + var(--float-wa) + var(--float-tour) + 24px); } } /* The nudge. Slides in from the right, above the whole stack. */ .video-nudge { position: fixed; z-index: 95; right: var(--float-gut); bottom: calc(var(--float-gut) + var(--float-wa) + var(--float-tour) + 34px); width: min(21rem, calc(100vw - 2.5rem)); background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-md); border-bottom-right-radius: var(--r-lg); box-shadow: 0 6px 16px rgba(22,24,29,.10), 0 26px 60px rgba(22,24,29,.26); opacity: 0; transform: translateX(calc(100% + clamp(14px, 3vw, 32px))); transition: transform .52s cubic-bezier(.2,.9,.3,1.15), opacity .4s var(--ease); } .video-nudge.is-in { opacity: 1; transform: none; } .video-nudge__close { position: absolute; top: -10px; right: -10px; z-index: 2; width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--line); background: var(--ground); color: var(--ink-soft); font-size: 1rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(22,24,29,.18); } .video-nudge__close:hover { color: var(--ink); border-color: var(--line-strong); } .video-nudge__go { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px; border: 0; background: none; cursor: pointer; text-align: left; border-radius: inherit; } .video-nudge__thumb { position: relative; flex: none; width: 84px; aspect-ratio: 16 / 11; border-radius: var(--r-sm); overflow: hidden; background: var(--ground-3); } .video-nudge__thumb img { width: 100%; height: 100%; object-fit: cover; } .video-nudge__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 999px; background: var(--green); color: var(--ink); display: grid; place-items: center; transition: transform .28s var(--ease); } .video-nudge__play svg { margin-left: 2px; } .video-nudge__go:hover .video-nudge__play { transform: translate(-50%, -50%) scale(1.12); } /* A ring that expands out of the play badge every few seconds. It is the cheapest way to keep catching the eye without the card taking any more room, and it costs nothing on the main thread: transform and opacity only. */ .video-nudge__play::after { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 2px solid var(--green); opacity: 0; } .video-nudge.is-in .video-nudge__play::after { animation: nudge-ping 4.5s ease-out 1.2s infinite; } @keyframes nudge-ping { 0% { transform: scale(1); opacity: .65; } 22% { transform: scale(2.1); opacity: 0; } 100% { transform: scale(2.1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .video-nudge.is-in .video-nudge__play::after { animation: none; } } .video-nudge__text { display: grid; gap: 3px; min-width: 0; } .video-nudge__text strong { font-family: var(--display); font-size: .98rem; line-height: 1.2; } .video-nudge__text span { font-size: .84rem; color: var(--ink-soft); line-height: 1.3; } @media (prefers-reduced-motion: reduce) { /* It still arrives, it just does not travel. */ .video-nudge { transform: none; transition: opacity .3s linear; } } @media (max-width: 520px) { /* No tour tab down here, so the nudge sits directly above WhatsApp. */ .video-nudge { right: 12px; left: 12px; width: auto; bottom: calc(12px + 56px + 12px); } } .video-modal { border: 0; padding: 0; background: transparent; width: min(1100px, 94vw); max-width: 94vw; border-radius: var(--r-md); overflow: visible; } .video-modal::backdrop { background: rgba(10, 11, 14, .82); backdrop-filter: blur(3px); } .video-modal__frame video { width: 100%; height: auto; display: block; border-radius: var(--r-md); background: #000; } .video-modal__close { position: absolute; top: -46px; right: 0; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(251,247,240,.32); background: rgba(251,247,240,.1); color: var(--on-dark); font-size: 1.4rem; line-height: 1; cursor: pointer; } .video-modal__close:hover { background: rgba(251,247,240,.22); } @media (max-width: 640px) { .video-modal__close { top: -44px; } .video-card__play { width: 62px; height: 62px; } .video-card__label { padding: 38px 18px 16px; } } /* ------------------------------------------------------------ founder */ .founder { display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: clamp(28px, 5vw, 64px); align-items: center; } @media (max-width: 900px) { .founder { grid-template-columns: 1fr; } } .founder blockquote { font-family: var(--quote); font-size: clamp(1.14rem, 1.9vw, 1.44rem); line-height: 1.52; } .founder blockquote p + p { margin-top: .9em; } .founder__who { margin-top: 24px; font-family: var(--display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; color: var(--green-ink); } .section--dark .founder__who { color: var(--green); } /* -------------------------------------------------------------- gallery */ .gal-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; } .gal-filter { font-family: var(--display); font-weight: 600; font-size: .93rem; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .gal-filter:hover { border-color: var(--ink); } .gal-filter[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--ink); } .gal-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px, 1.8vw, 22px); } @media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 560px) { .gal-grid { grid-template-columns: 1fr; } } .gal-item { margin: 0; } .gal-item a { display: block; border-radius: var(--r-md); overflow: hidden; background: var(--ground-3); } .gal-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .55s var(--ease); } .gal-item a:hover img { transform: scale(1.05); } .gal-item figcaption { margin-top: 10px; font-size: .88rem; color: var(--ink-soft); } .gal-item[hidden] { display: none; } /* --------------------------------------------------------------- tables */ .rate-block + .rate-block { margin-top: clamp(48px, 6vw, 86px); } .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); /* The table paints its own light background, so it has to set its own text colour too. Inside a dark section it would otherwise inherit the cream that section sets and render cream on cream. */ color: var(--ink); -webkit-overflow-scrolling: touch; /* Scroll shadows. Where a table still has to scroll sideways (tablet widths, and the wider tables inside articles), a soft shadow appears on whichever edge has content beyond it and disappears when you reach the end. The two `local` layers are the cover, the two `scroll` layers are the shadow: the cover moves with the content and slides out from under the shadow. Pure CSS, no script, no scroll listener. */ background: linear-gradient(to right, var(--ground) 32%, rgba(251, 247, 240, 0)) left center, linear-gradient(to left, var(--ground) 32%, rgba(251, 247, 240, 0)) right center, radial-gradient(farthest-side at 0 50%, rgba(22, 24, 29, .17), rgba(22, 24, 29, 0)) left center, radial-gradient(farthest-side at 100% 50%, rgba(22, 24, 29, .17), rgba(22, 24, 29, 0)) right center; background-color: var(--ground); background-repeat: no-repeat; background-size: 46px 100%, 46px 100%, 15px 100%, 15px 100%; background-attachment: local, local, scroll, scroll; } .section--dark .table-wrap { border-color: transparent; } table.rates { width: 100%; border-collapse: collapse; min-width: 520px; } table.rates caption { text-align: left; padding: 18px 22px 0; font-family: var(--display); font-weight: 700; font-size: 1.05rem; } table.rates th, table.rates td { padding: 15px 22px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } table.rates thead th { font-family: var(--display); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); background: var(--ground-2); white-space: nowrap; } table.rates tbody tr:last-child td { border-bottom: 0; } table.rates td.price { font-family: var(--display); font-weight: 700; font-size: 1.06rem; white-space: nowrap; } table.rates tr.is-highlight td { background: var(--green-wash); } table.rates tr.is-highlight td.price { color: var(--green-ink); } table.rates td ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: .93rem; } .note-card { background: var(--ground-2); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--r-sm); padding: clamp(20px, 2.4vw, 28px); margin-top: 24px; } .note-card h3 { font-size: 1.02rem; margin-bottom: 12px; } .note-card ul { list-style: none; display: grid; gap: 8px; } .note-card li { padding-left: 18px; position: relative; color: var(--ink-soft); font-size: .95rem; } .note-card li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 999px; background: var(--green); } /* On a phone the table stops being a table. A grid that scrolls sideways reads as a broken page to most people: they see a cut-off column and assume the site is wrong rather than that there is more to the right. So below this width each row becomes its own card, the column headings move onto each cell as a label (from data-label), and the header row is hidden visually while staying in the document for screen readers. The markup is unchanged, so the table is still a table to assistive technology and the page still parses as one. */ @media (max-width: 700px) { .table-wrap { overflow: visible; border: 0; border-radius: 0; background: none; } table.rates { min-width: 0; display: block; } table.rates caption { padding: 0 0 14px; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } table.rates thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } table.rates tbody { display: grid; gap: 12px; } table.rates tr { display: block; background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-md); border-bottom-right-radius: var(--r-lg); overflow: hidden; } table.rates tr.is-highlight { background: var(--green-wash); border-color: rgba(72, 170, 30, .45); } /* The row heading becomes the card title. */ table.rates tbody th[scope="row"] { display: block; padding: 15px 18px 11px; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 1.04rem; line-height: 1.25; } table.rates tbody th[scope="row"] ul { margin-top: 8px; padding-left: 16px; font-family: var(--sans); font-weight: 400; } /* Each cell becomes a labelled line. */ table.rates td { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 18px; border-bottom: 1px solid var(--line); text-align: right; } table.rates tr td:last-child { border-bottom: 0; } table.rates td::before { content: attr(data-label); flex: 1 1 auto; text-align: left; font-family: var(--display); font-weight: 600; font-size: .86rem; color: var(--ink-soft); } /* A cell with no label to show should not leave an empty gutter. */ table.rates td:not([data-label])::before { content: none; } table.rates td.price { font-size: 1.06rem; } /* Article tables get the same treatment: build-blog.py labels their cells and promotes each row's first cell to a row header for exactly this. */ .post-body table.rates { margin-inline: 0; } } /* ------------------------------------------------------------------ faq */ .faq { display: grid; gap: 10px; } .faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ground); overflow: hidden; transition: border-color .25s var(--ease); } .faq details[open] { border-color: var(--line-strong); } .faq summary { cursor: pointer; list-style: none; padding: 20px clamp(20px, 2.4vw, 28px); font-family: var(--display); font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: none; width: 13px; height: 13px; border-right: 2.5px solid var(--green-ink); border-bottom: 2.5px solid var(--green-ink); transform: rotate(45deg) translate(-2px, -2px); transition: transform .28s var(--ease); } .faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); } .faq .faq__a { padding: 0 clamp(20px, 2.4vw, 28px) 22px; color: var(--ink-soft); max-width: 76ch; } /* --------------------------------------------------------------- posts */ .posts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px, 2.6vw, 30px); } @media (max-width: 980px) { .posts { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px) { .posts { grid-template-columns: 1fr; } } /* The title link covers the card, so the photo is clickable without a second link that a screen reader would have to announce with no name of its own. */ .post-card { display: flex; flex-direction: column; gap: 14px; position: relative; } .post-card__title::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); } .post-card__media { border-radius: var(--r-md); border-bottom-right-radius: var(--r-lg); overflow: hidden; background: var(--ground-3); aspect-ratio: 3/2; } .post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); } .post-card:hover .post-card__media img { transform: scale(1.05); } .post-card__meta { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--ink-soft); font-family: var(--display); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .post-card__cat { color: var(--green-ink); } .post-card h3 { font-size: 1.14rem; line-height: 1.28; } .post-card a.post-card__title:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } /* -------------------------------------------------------- article body */ .post-body { font-size: 1.06rem; line-height: 1.72; } .post-body > * + * { margin-top: 1.1em; } .post-body p, .post-body li { color: var(--ink-soft); max-width: 70ch; } .post-body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--ink); margin-top: 1.9em; margin-bottom: .55em; scroll-margin-top: 96px; } .post-body h3 { font-size: clamp(1.16rem, 1.8vw, 1.42rem); color: var(--ink); margin-top: 1.6em; margin-bottom: .45em; scroll-margin-top: 96px; } .post-body h4 { font-size: 1.06rem; color: var(--ink); margin-top: 1.4em; } .post-body strong { color: var(--ink); font-weight: 600; } .post-body a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; text-decoration-color: rgba(39,102,19,.4); } .post-body a:hover { text-decoration-color: var(--green-ink); } .post-body ul, .post-body ol { padding-left: 1.35em; display: grid; gap: .5em; } .post-body ul { list-style: none; padding-left: 0; } .post-body ul li { position: relative; padding-left: 1.5em; } .post-body ul li::before { content: ""; position: absolute; left: .25em; top: .68em; width: 7px; height: 7px; border-radius: 999px; background: var(--green); } .post-body ol li::marker { color: var(--green-ink); font-weight: 700; } .post-body img { border-radius: var(--r-md); margin-inline: auto; } .post-body figure { margin-block: 1.6em; } .post-body figcaption { margin-top: 10px; font-size: .88rem; color: var(--ink-soft); text-align: center; } .post-body blockquote { border-left: 4px solid var(--green); background: var(--ground-2); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 18px 24px; margin-block: 1.6em; } .post-body blockquote p { font-family: var(--quote); font-size: 1.08rem; color: var(--ink); } .post-body .table-wrap { margin-block: 1.6em; } .post-body hr { border: 0; height: 1px; background: var(--line); margin-block: 2em; } /* Rank Math's table of contents, restyled. */ .post-toc { background: var(--ground-2); border: 1px solid var(--line); border-radius: var(--r-md); border-top-left-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 28px); margin-block: 1.8em; } .post-toc h2 { margin: 0 0 12px; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); } .post-toc ul { list-style: none; padding-left: 0; display: grid; gap: .4em; } .post-toc li { padding-left: 0; } .post-toc li::before { content: none; } .post-toc ul ul { margin-top: .4em; padding-left: 1.1em; border-left: 2px solid var(--line); } .post-toc a { color: var(--ink); text-decoration: none; font-size: .96rem; } .post-toc a:hover { color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; } /* WordPress post embeds become a plain internal link. */ .post-related { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; background: var(--green-wash); border-radius: var(--r-md); padding: 16px 20px; margin-block: 1.6em; max-width: none; } .post-related span { font-family: var(--display); font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-ink); } .post-related a { color: var(--ink); font-family: var(--display); font-weight: 700; text-decoration-color: rgba(22,24,29,.3); } .post-nav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } @media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } } .post-nav__item { border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 22px; display: grid; gap: 6px; transition: border-color .25s var(--ease), background-color .25s var(--ease); } .post-nav__item:hover { border-color: var(--line-strong); background: var(--ground-2); } .post-nav__item span { font-family: var(--display); font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-ink); } .post-nav__item strong { font-family: var(--display); font-size: 1rem; line-height: 1.3; } .post-nav__item--right { text-align: right; grid-column: 2; } @media (max-width: 640px) { .post-nav__item--right { text-align: left; grid-column: 1; } } /* ------------------------------------------------------------- contact */ .contact-grid > * { min-width: 0; } .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 68px); align-items: start; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .info-list { display: grid; gap: 22px; margin-top: 30px; } .info { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; } .info__icon { width: 44px; height: 44px; border-radius: 999px; background: var(--green-wash); color: var(--green-ink); display: grid; place-items: center; } .section--dark .info__icon { background: rgba(72,170,30,.16); color: var(--green); } .info__k { font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; } .section--dark .info__k { color: var(--on-dark-soft); } .info__v { line-height: 1.5; } .info__v a:hover { text-decoration: underline; text-underline-offset: 3px; } /* form */ .form-card { background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-md); border-top-right-radius: var(--r-lg); padding: clamp(24px, 3vw, 38px); } .section--dark .form-card { background: var(--ink-2); border-color: var(--line-dark); } .field { display: grid; gap: 7px; margin-bottom: 18px; } .field > label { font-family: var(--display); font-weight: 600; font-size: .88rem; } .field input, .field textarea, .field select { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--ground-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 13px 15px; transition: border-color .25s var(--ease), background-color .25s var(--ease); } .section--dark .field input, .section--dark .field textarea, .section--dark .field select { background: rgba(251,247,240,.06); border-color: var(--line-dark); color: var(--on-dark); } .field textarea { min-height: 132px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--green-ink); background: var(--ground); } .field input:user-invalid, .field textarea:user-invalid { border-color: #A1210F; } .form-hint { font-size: .84rem; color: var(--ink-soft); margin-top: -6px; margin-bottom: 16px; } .section--dark .form-hint { color: var(--on-dark-soft); } .form-status { border-radius: var(--r-sm); padding: 13px 16px; margin-bottom: 16px; font-size: .95rem; } .form-status--ok { background: var(--green-wash); color: #1F5410; border: 1px solid rgba(72,170,30,.5); } .form-status--err { background: #FBEAE7; color: #8A1C0C; border: 1px solid rgba(161,33,15,.35); } .map-frame { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); margin-top: 30px; } .map-frame img { width: 100%; display: block; } /* The two short fact columns beside an area map. */ .area-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; margin-top: 22px; } @media (max-width: 480px) { .area-facts { grid-template-columns: 1fr; } } .area-facts__k { font-family: var(--display); font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-ink); margin-bottom: 8px; } .area-facts ul { list-style: none; display: grid; gap: 5px; } .area-facts li { font-size: .93rem; color: var(--ink-soft); line-height: 1.4; } /* --------------------------------------------------------- site footer */ .site-footer { background: var(--ink); color: var(--on-dark); padding-top: clamp(56px, 7vw, 88px); } .site-footer a { color: var(--on-dark-soft); } .site-footer a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 4px; } .site-footer__grid { display: grid; gap: clamp(28px, 4vw, 52px); grid-template-columns: 1.35fr repeat(4, 1fr); padding-bottom: clamp(40px, 5vw, 60px); } @media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } } .site-footer h2 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: 16px; font-weight: 700; } .site-footer ul { list-style: none; display: grid; gap: 10px; font-size: .96rem; } .site-footer__blurb { color: var(--on-dark-soft); font-size: .96rem; max-width: 34ch; margin-top: 16px; } .site-footer__logo { height: 58px; width: auto; background: var(--on-dark); border-radius: var(--r-sm); padding: 7px 10px; } .social { display: flex; gap: 10px; margin-top: 20px; } .social a { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line-dark); display: grid; place-items: center; color: var(--on-dark-soft); transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .social a:hover { background: var(--green); color: var(--ink); border-color: var(--green); } /* The lock-in footer sits under ours as a slim credit bar. */ .footer { background: var(--ink); color: var(--on-dark-soft); border-top: 1px solid var(--line-dark); } .footer__inner { max-width: var(--maxw); margin-inline: auto; padding: 26px var(--gutter) 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: .86rem; } .footer__brand { display: none; } .footer__copy { order: 1; } .footer__legal { order: 2; display: flex; gap: 8px; flex-wrap: wrap; } .footer__credit { order: 3; margin-left: auto; } .footer a { color: var(--on-dark-soft); text-decoration: underline; text-underline-offset: 3px; } .footer a:hover { color: var(--on-dark); } @media (max-width: 760px) { .footer__credit { margin-left: 0; } } /* ---------------------------------------------------------------- misc */ .page-head { padding-top: clamp(46px, 6vw, 78px); padding-bottom: clamp(34px, 4vw, 54px); } .breadcrumb { font-size: .86rem; color: var(--ink-soft); margin-bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; } .breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; } .anchor-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .anchor-nav a { font-family: var(--display); font-weight: 600; font-size: .9rem; padding: 9px 17px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } .anchor-nav a:hover { background: var(--green); border-color: var(--green); color: var(--ink); } /* Sticky header offset for in-page anchors. */ [id] { scroll-margin-top: 96px; } .divider { height: 1px; background: var(--line); border: 0; } .section--dark .divider { background: var(--line-dark); } .cta-band { background: var(--green-wash); border-radius: var(--r-lg); border-bottom-left-radius: var(--r-xl); padding: clamp(34px, 5vw, 62px); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center; } @media (max-width: 800px) { .cta-band { grid-template-columns: 1fr; } } /* ------------------------------------------------------------- reveals */ /* Rule: CSS never hides content on its own. The from-state is gated behind html.js, which an inline script in the head sets, so scripting off means everything is visible. main.js also runs a watchdog that force-shows any element still waiting after 2.6s. */ html.js .reveal { opacity: 0; transform: translateY(18px); } html.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); } html.js .reveal-d1.is-in { transition-delay: .08s; } html.js .reveal-d2.is-in { transition-delay: .16s; } html.js .reveal-d3.is-in { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; } html.js .reveal.is-in { transition: none; } } /* Print: give them a readable page, not a screenshot of the design. */ @media print { .site-header, .site-footer, .nav-toggle, .btn-row, .anchor-nav, .form-card { display: none !important; } body { background: #fff; color: #000; font-size: 12pt; } .section { padding-block: 18px; } html.js .reveal { opacity: 1 !important; transform: none !important; } }