/* ============================================================================
Deltra — Deluxe Transfers: the anonymous marketing site.
Loaded ONLY by Views/Shared/_MarketingLayout.cshtml, which shares nothing with
the eight app layouts — no bootstrap, no jQuery, no DataTables, no flatpickr,
no sweetalert2, no site.css, no orderstyle.css.
That omission IS the isolation, and it has to be. site.css:20-33 paints a
fixed background photo on bare and site.css/orderstyle.css both reset
html{font-size}; none of it is scoped, so no amount of .deltra-site nesting
could undo it from the inside. What .deltra-site buys is the OTHER direction:
it keeps this file's reset and its shared partials (the cookie notice and
modal) inert if they are ever pulled onto an app page.
Every value here comes from design_handoff_deltra_site/README.md, which is
declared high-fidelity — treat the numbers as fixed, not as suggestions.
Two conventions that exist to protect the design, and that you should not
"tidy":
1. NO `font:` SHORTHAND, anywhere. The shorthand cannot carry
letter-spacing, so the reference prototype re-declares tracking at ~40
call sites — which is exactly where a value gets rounded off. Longhands
throughout, with every tracking value read from a --track-* token that
is typed once, below. "The wide tracking on small caps is the whole
luxury signal. Do not round it away."
2. px, NEVER rem. The design specifies 9.5px, 12.5px, 13.5px exactly. In
rem those become 0.59375rem and friends — numbers that invite tidying,
and that would break outright if this file ever met html{font-size:14px}.
============================================================================ */
/* --- fonts ---------------------------------------------------------------- */
/* Self-hosted, latin subset, Google's own unmodified woff2 files, SIL OFL 1.1
(licences alongside them in wwwroot/fonts/). There is deliberately NO Google
Fonts . This design draws its own markers — a gold dot
for unordered items and a gold counter for ordered ones — so leaving the native
marker on renders every number twice ("1. 1."). */
:where(.deltra-site) :where(ul, ol) {
list-style: none;
}
:where(.deltra-site) :where(fieldset) {
border: 0;
min-width: 0;
}
:where(.deltra-site) :where(legend) {
padding: 0;
float: none;
}
:where(.deltra-site) :where(img, video) {
display: block;
max-width: 100%;
}
:where(.deltra-site) :where(a) {
color: inherit;
text-decoration: none;
}
:where(.deltra-site) :where(button, input, select, textarea) {
font: inherit;
color: inherit;
margin: 0;
}
/* Gold focus ring, everywhere. --gold-light rather than --gold: on #080808 it
measures about 11.5:1 against the gold's 6:1, it is unmistakable, and it is
already the design's hover colour so it stays on-brand. */
.deltra-site :focus-visible {
outline: 2px solid var(--gold-light);
outline-offset: 3px;
}
.deltra-site :focus:not(:focus-visible) {
outline: none;
}
/* Chrome paints #E8F0FE over autofilled inputs, which is very visible on a
near-black panel. The absurd transition delay is the only reliable defeat. */
.deltra-site input:-webkit-autofill,
.deltra-site input:-webkit-autofill:hover,
.deltra-site input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--bone);
caret-color: var(--bone);
transition: background-color 0s 600000s, color 0s 600000s;
}
/* Windows High Contrast blanks any text painted with color:transparent, which
would erase the foil headline entirely. */
@media (forced-colors: active) {
.dsite-foil {
background: none;
color: CanvasText;
-webkit-text-fill-color: revert;
}
}
/* --- motion --------------------------------------------------------------- */
/* Every animation on this site is decorative, so the keyframes AND the rules
that use them both live inside the no-preference query. That is deliberate:
the entrance animations rely on `both` fill with from{opacity:0} to hide an
element before they run, so binding them outside the query would leave a
reduced-motion visitor depending on the browser dropping the declaration —
which happens to work, but only by accident. Inside, they simply never get an
animation and render at their natural state. */
@media (prefers-reduced-motion: no-preference) {
@keyframes dfade {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
@keyframes dsoft {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes dvline {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}
/* The foil sweep. background-size is 220% 100%, so 180% -> -80% travels
260% of the box: exactly one pass. 9s linear infinite with a 1.2s delay,
which lands it just as the headline's own dfade finishes. */
@keyframes dsheen {
0% { background-position: 180% 0; }
100% { background-position: -80% 0; }
}
/* The hero's entrance stagger: .12 / .24 / .40 / .52 / .64s. */
.dsite-header--hero { animation: dsoft 1.2s ease both; }
.dsite-hero-kicker { animation: dfade 1s var(--ease-d) both .12s; }
.dsite-hero-headline { animation: dfade 1.2s var(--ease-d) both .24s,
dsheen 9s linear infinite 1.2s; }
.dsite-hero-rule { animation: dvline 1.1s var(--ease-d) both .5s; }
.dsite-hero-sub { animation: dfade 1.2s var(--ease-d) both .40s; }
.dsite-hero-ctas { animation: dfade 1.2s var(--ease-d) both .52s; }
.dsite-hero-lang { animation: dfade 1.2s var(--ease-d) both .64s; }
.dsite-cookie { animation: dfade 1s var(--ease-d) both 1.1s; }
.dsite-modal::backdrop { animation: dsoft .45s ease both; }
.dsite-modal-card { animation: dfade .5s var(--ease-d) both; }
/* This is the entire "smooth-scroll to #about" requirement. Fragment
navigation uses it, so the hero's About link needs no JavaScript and
honours reduced motion for free. */
html.deltra-site { scroll-behavior: smooth; }
}
/* --- scroll reveals -------------------------------------------------------- */
/* An extension of the hero's motion vocabulary, not a new one: the same 18px rise,
the same --ease-d decelerating curve, the same unhurried duration. Sections
settle into place rather than sliding, popping or bouncing — nothing overshoots,
because overshoot reads as playful and this design is not.
Three rules govern the whole system:
1. CONTENT IS VISIBLE BY DEFAULT. The hiding only ever happens under
html.dsite-js, a class marketing.js adds to before first paint. With
scripting off — or if the script fails — every element renders normally and
nobody is left staring at a blank page waiting for an animation that will
never come.
2. REVEAL ONCE. The observer stops watching an element the moment it appears.
Re-animating on scroll-back is the single clearest tell of a template.
3. REDUCED MOTION GETS NOTHING. The whole block sits inside the no-preference
query, so there is no state to override and no chance of a stuck element. */
@media (prefers-reduced-motion: no-preference) {
html.dsite-js .dsite-reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 1.1s var(--ease-d), transform 1.1s var(--ease-d);
/* Promoted for the duration of the move only — leaving will-change on
permanently would pin a layer per element for the whole session. */
will-change: opacity, transform;
}
html.dsite-js .dsite-reveal.is-revealed {
opacity: 1;
transform: none;
will-change: auto;
}
/* A gold section rule that draws itself open from the centre outward, the
horizontal cousin of the hero's dvline hairline. The real border is made
transparent and a pseudo-element does the drawing, because a border cannot
be animated along its length. */
html.dsite-js .dsite-ruledraw {
position: relative;
border-top-color: transparent;
}
html.dsite-js .dsite-ruledraw::before {
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 1px;
background: var(--gold-22);
transform: scaleX(0);
transform-origin: center;
transition: transform 1.5s var(--ease-d);
}
html.dsite-js .dsite-ruledraw.is-revealed::before {
transform: scaleX(1);
}
/* The photographs settle rather than appear — a slow release from 1.04 to
true scale, like a camera coming to rest. The frame clips it, so the image
only ever loses the outer 4% during the move. */
html.dsite-js .dsite-reveal--frame img {
transform: scale(1.04);
transition: transform 1.8s var(--ease-d);
}
html.dsite-js .dsite-reveal--frame.is-revealed img {
transform: scale(1);
}
}
/* --- page transitions ------------------------------------------------------ */
/* Moving between the pages of this site is a dissolve, not a cut: the outgoing
page fades as it pushes gently in, the incoming one settles out of a whisper
of a zoom, and the header does not move at all while it happens.
It is done entirely with cross-document view transitions — no router, no
click interception, not one line of JavaScript. The browser performs the
navigation exactly as it always did and animates between the two renders, so
a middle click, a new tab, a form post, the back button, a link opened from
another app and a visitor with scripting off all keep working with no special
case written for any of them.
Four things about this block are load-bearing:
1. BOTH documents must opt in, which is why this lives in the one stylesheet
every marketing page loads and no other page loads. Leaving the site for
the app — the header's Login link — crosses into pages that never see
this file, so that navigation stays an ordinary cut. Which is right: the
dispatch app is a different place, not another page of this one.
2. The opt-in is the `navigation` descriptor, inside the no-preference
query, rather than a pile of animations to override afterwards. A
visitor who has asked for reduced motion gets no transition at all —
nothing to unwind, nothing that can strand a snapshot on screen. The
at-rule is explicitly allowed inside a conditional group rule.
3. A browser without the feature navigates precisely as it does today.
There is no fallback to write, because the fallback IS the plain
navigation, and a scripted imitation would have to re-implement every
case in the paragraph above to earn its risk.
4. Both snapshots scale in the SAME direction (out 1 -> 1.008, in
1.012 -> 1). Scaling either of them below 1 would open a band of bare
canvas around the edge of the viewport for the length of the fade. */
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
}
/* The incoming page's release from 1.012 is the same gesture the About
photographs make when they reveal (1.04 -> 1), an octave quieter: a
camera coming to rest rather than a zoom. Nothing overshoots here either.
The curves overlap on purpose. The outgoing page is still at roughly .58
as the incoming one reaches .45, so the two never sum to much under 1 and
the page does not blink through black; the `plus-lighter` blend the
browser puts on both snapshots is what makes that arithmetic hold. The
shallow dip that remains, around .32s, reads as one slow breath.
transform-origin is stated rather than assumed: these are the only
transforms on the site whose element is generated by the browser. */
::view-transition-old(root) {
animation: dpageout .32s cubic-bezier(.4, 0, 1, 1) both;
transform-origin: 50% 50%;
}
::view-transition-new(root) {
animation: dpagein .56s var(--ease-d) .06s both;
transform-origin: 50% 50%;
}
@keyframes dpageout {
to { opacity: 0; transform: scale(1.008); }
}
@keyframes dpagein {
from { opacity: 0; transform: scale(1.012); }
}
/* The header is the one thing that survives the crossing. Naming it lifts it
out of the page snapshot into a group of its own, and switching that
group's animation off pins the group to its NEW position for the whole
transition, leaving the two headers to cross-fade in place.
Switching the morph off is the point, not a simplification. Left on, the
group travels from wherever the header sat in the OUTGOING viewport — and
the header is in normal flow on /quote and the legal pages, so it scrolls
away. Anyone who reached /privacy by clicking a link in the footer, which
is how nearly everyone reaches it, would watch the header fly down the
screen from somewhere above.
`animation: none` on the group also zeroes the duration its two snapshots
inherit from it, so both fades are declared here in full rather than
leaning on the browser's defaults. */
.dsite-header {
view-transition-name: dsite-header;
}
::view-transition-group(dsite-header) {
animation: none;
}
::view-transition-old(dsite-header) {
animation: dsoftout .42s var(--ease-d) both;
}
::view-transition-new(dsite-header) {
animation: dsoft .42s var(--ease-d) both;
}
@keyframes dsoftout {
to { opacity: 0; }
}
/* Chrome that the transition has just carried across from the previous page
must not then perform its own entrance on arrival: it would fade out with
the old page and fade back in a second later, which is the exact stutter a
page transition exists to remove. The hero header is the element being
held still above, and the cookie notice is fixed in the same corner on
every page — .dsite-cookie's entrance is delayed 1.1s, so without this it
would leave a hole where the card had been for most of a second.
html.dsite-warm marks a page reached from another page on this site; it is
set before first paint by the inline script in _MarketingLayout. (0,2,1)
outranks the (0,1,0) bindings in the motion block wherever they sit. */
html.dsite-warm .dsite-header--hero,
html.dsite-warm .dsite-cookie {
animation: none;
}
}
/* --- primitives ----------------------------------------------------------- */
.dsite-skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 14px 22px;
background: var(--gold);
color: var(--ink-3);
font-family: var(--font-ui);
font-weight: 500;
font-size: 10.5px;
line-height: 1;
letter-spacing: var(--track-btn);
text-transform: uppercase;
}
.dsite-skip:focus {
left: 12px;
top: 12px;
}
/* Archivo 400 / 9.5px / 1 / .52em UPPERCASE — the gold section kicker. */
.dsite-kicker {
font-family: var(--font-ui);
font-weight: 400;
font-size: 9.5px;
line-height: 1;
letter-spacing: var(--track-kicker);
text-transform: uppercase;
color: var(--gold);
}
/* The gold italic emphasis inside every display heading — "car door",
"already there", "why", "arrangement", "from". Cormorant has a real 300
italic, so this is a genuine italic face, never a synthesised slant. */
.dsite-em {
font-style: italic;
color: var(--gold);
}
/* Archivo 400 / 9px / 1 / .42em UPPERCASE — form and column labels. */
.dsite-label {
display: block;
font-family: var(--font-ui);
font-weight: 400;
font-size: 9px;
line-height: 1;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--label-ink);
}
.dsite-label-optional {
letter-spacing: var(--track-tile);
color: var(--optional-ink);
}
/* Archivo 400 / 9.5px / 1.6 / .30em UPPERCASE — captions and micro caps. */
.dsite-micro {
font-family: var(--font-ui);
font-weight: 400;
font-size: 9.5px;
line-height: 1.6;
letter-spacing: var(--track-micro);
text-transform: uppercase;
color: var(--bone-42);
}
/* Gold button. Archivo 500 / 10.5px / .26em UPPERCASE on --gold. */
.dsite-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
padding: 19px 40px;
background: var(--gold);
color: var(--ink-3);
font-family: var(--font-ui);
font-weight: 500;
font-size: 10.5px;
line-height: 1;
letter-spacing: var(--track-btn);
text-transform: uppercase;
text-align: center;
cursor: pointer;
transition: background var(--t-hover-slow) ease,
transform var(--t-hover-slow) var(--ease-d),
box-shadow var(--t-hover-slow) ease;
}
/* Ghost button — 1px bone hairline, no fill. */
.dsite-btn--ghost {
padding: 15px 24px;
background: none;
border: 1px solid var(--bone-24);
color: var(--bone-78);
font-weight: 400;
font-size: 9.5px;
transition: border-color var(--t-hover) ease, color var(--t-hover) ease;
}
/* Text button — no fill, no border, no padding. See the hit-area note below. */
.dsite-btn--text {
padding: 0;
background: none;
border: 0;
color: var(--bone-62);
font-weight: 400;
font-size: 9.5px;
transition: color var(--t-hover) ease, border-color var(--t-hover) ease;
}
/* Underlined text button, e.g. "Send another request". */
.dsite-btn--underline {
padding: 0 0 7px;
border-bottom: 1px solid var(--bone-22);
color: var(--bone-72);
}
@media (hover: hover) {
.dsite-btn:hover {
background: var(--gold-light);
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(182, 159, 57, .24);
}
.dsite-btn--ghost:hover {
background: none;
transform: none;
box-shadow: none;
border-color: var(--gold);
color: var(--gold);
}
.dsite-btn--text:hover {
background: none;
transform: none;
box-shadow: none;
color: var(--bone);
}
.dsite-btn--underline:hover {
color: var(--gold);
border-color: var(--gold);
}
}
/* --- the request-a-quote CTA ---------------------------------------------- */
/* The buttons that ask for the sale, treated as machined objects rather than
rectangles of gold: "Request a quote" in the hero, the same words again at the
foot of the page, and "Send the request" that closes the form they both lead
to. One journey, one button, three places.
Everything below is motion and shadow: the resting face is still exactly the
flat --gold the design specifies, so a screenshot of the page at rest is
unchanged.
It is a modifier, not a rule on .dsite-btn, on purpose. The cookie buttons,
"Send another request" and the error page's "back to the home page" are all
.dsite-btn too, and none of them glint — a button that catches the light in
the corner of the eye is a device for drawing attention to the way FORWARD,
and it stops pointing anywhere the moment it is on everything. */
.dsite-btn--cta {
position: relative;
/* The glint is a child at z-index:-1, which paints above the button's own
background but below its lettering — light travelling UNDER the type, the
way it would across a real brass plate, instead of a white wash over the
top of it. isolation keeps that negative index inside this button rather
than letting it escape to an ancestor and slide behind the page. */
isolation: isolate;
/* Clips the glint's travel. Does NOT clip box-shadow, which is why the lift
below is drawn with shadows and not with a second pseudo-element. */
overflow: hidden;
/* No transition of its own: .dsite-btn already transitions background,
transform and box-shadow on the same slow curve, which is exactly the set
used below. It stays inherited so that none of these three buttons can
drift away from the others.
That only holds because no .dsite-btn--cta carries .dsite-reveal — the
footer one is wrapped instead. A reveal on the button takes ownership of
`transition` at a specificity classes cannot outrank, silently narrowing
the list to opacity and transform and leaving the shadow to snap. See the
note in _MarketingFooter.cshtml before moving that class back. */
}
@media (prefers-reduced-motion: no-preference) {
/* The band itself: a soft warm highlight, skewed so it rakes across the face
rather than wiping it. Taller than the button at both ends, so the skew
never exposes a corner. */
.dsite-btn--cta::before {
content: "";
position: absolute;
top: -30%;
bottom: -30%;
left: 0;
width: 38%;
z-index: -1;
background: linear-gradient(90deg,
rgba(255, 249, 233, 0),
rgba(255, 249, 233, .55),
rgba(255, 249, 233, 0));
transform: translateX(-160%) skewX(-14deg);
pointer-events: none;
}
/* At rest it glints once every 7s and spends the rest of the cycle parked
off the right-hand edge — a catch of light, not a sweep on a loop. The
idle pass is the ONLY version most visitors ever see: a phone has no
hover, so a hover-only treatment would ship this to nobody.
Same family as the headline's dsheen, which also runs on a long infinite
cycle inside this query. Under reduced motion neither exists. */
.dsite-btn--cta::before {
animation: dglint 7s var(--ease-d) 1.4s infinite;
}
@keyframes dglint {
0% { transform: translateX(-160%) skewX(-14deg); }
16%, 100% { transform: translateX(400%) skewX(-14deg); }
}
/* Hover and keyboard focus re-run it as a single, faster pass. Swapping the
animation-name restarts the timeline, which is the whole trick: the light
answers the pointer instead of carrying on to its own schedule. */
.dsite-btn--cta:hover::before,
.dsite-btn--cta:focus-visible::before {
animation: dsweep .85s var(--ease-d);
}
@keyframes dsweep {
from { transform: translateX(-160%) skewX(-14deg); }
to { transform: translateX(400%) skewX(-14deg); }
}
}
/* Lifted higher and more slowly than a plain .dsite-btn, and on two shadows
rather than one: a tight dark contact shadow under the edge plus the wide gold
bloom. The contact shadow is what stops it reading as a flat card with a glow
behind it — it is the only thing that says the button is off the surface.
Both work over the hero video and over ink, which a drawn frame would not.
Outside the reduced-motion query deliberately, matching .dsite-btn:hover above
it: a state change under the pointer is a response, not an animation, and
removing it would leave the button with no hover feedback at all. */
@media (hover: hover) {
.dsite-btn--cta:hover {
transform: translateY(-3px);
box-shadow: 0 3px 9px rgba(0, 0, 0, .34),
0 26px 54px rgba(182, 159, 57, .30);
}
}
.dsite-btn--cta:focus-visible {
transform: translateY(-3px);
box-shadow: 0 3px 9px rgba(0, 0, 0, .34),
0 26px 54px rgba(182, 159, 57, .30);
}
/* Pressed: it settles most of the way back and the bloom tightens, quickly.
A press that animates on the same slow curve as the hover feels unresponsive
however good it looks. */
.dsite-btn--cta:active {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, .38),
0 10px 24px rgba(182, 159, 57, .22);
transition-duration: .12s;
}
/* ⚠️ DEVIATION FROM THE SPEC, invisible by construction.
The design's text buttons and micro links are 9.5px type with padding:0, so
they compute to roughly 12px tall — far under the 44px minimum the brief
asks for (and under WCAG 2.2 SC 2.5.8's 24px). Adding padding would move the
design. Instead each carries a transparent ::after that expands only the
POINTER target: it is a child, so it inherits the click; it is absolutely
positioned, so it contributes nothing to layout; and the focus ring still
hugs the text, which is correct — the ring should show the control, not its
hit box. */
.dsite-hit {
position: relative;
}
.dsite-hit::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
min-width: 44px;
height: 44px;
}
/* Where two of them sit closer than 44px apart, drop the min-width and let
WCAG's spacing exception carry it rather than overlapping the hit boxes. */
.dsite-hit--tight::after {
min-width: 0;
}
/* Small gold dot: the 3px language-strip separator and the 4px list markers. */
.dsite-dot {
display: block;
flex: none;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--gold-75);
}
.dsite-dot--list {
width: 4px;
height: 4px;
background: var(--gold);
}
/* Language strip: Íslenska · English, 9.5px .30em, gold dot between.
Rendered as , not : there is no Icelandic site yet, and a link to
"#" is a broken promise to anyone using a screen reader. Swap to
when /is exists. */
.dsite-lang {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
}
/* Both the inactive language (an ) and the active one (a ) share the
type; only the colour differs. The dot is excluded — it has its own size.
The list is wrapped in :where() to keep this rule at (0,1,0). Written the
obvious way, `.dsite-lang > span:not(.dsite-dot)` is (0,2,1) — :not() carries
its argument's specificity — which OUTRANKS `.dsite-lang .dsite-lang-active`
at (0,2,0), so the active language silently rendered in the inactive grey.
Same trap as the reset block at the top of this file. */
.dsite-lang > :where(span:not(.dsite-dot), a) {
font-family: var(--font-ui);
font-weight: 400;
font-size: 9.5px;
line-height: 1;
letter-spacing: var(--track-micro);
text-transform: uppercase;
color: var(--bone-42);
transition: color var(--t-hover) ease;
}
/* The language you are currently reading. Gold is the design's own signal — it is
how the footer strip already marks English — plus the 1px gold underline the
header's Login link uses, so "you are here" is unmistakable rather than a
subtle hue difference between two small grey words. */
.dsite-lang .dsite-lang-active {
color: var(--gold);
padding-bottom: 5px;
border-bottom: 1px solid var(--gold-45);
}
/* The inactive language gets a FAINT rule rather than a transparent one.
Both boxes were already pixel-identical, but only the active word sat on a
visible line, so the other had no floor for the eye to rest on and read as
floating — most obviously with "Íslenska", whose Í accent carries 2px more ink
above the baseline than "English" does. Giving both a rule anchors them to the
same optical line; the gold one is simply brighter. */
.dsite-lang > a {
padding-bottom: 5px;
border-bottom: 1px solid var(--rule-inner);
}
/* The separator centres on the words' BOXES, and those boxes carry 6px of
padding and border below the text — which left the dot sitting about 3px
below the optical centre of the words beside it. The extra bottom margin
gives the dot the same lower mass, lifting its centre onto the text's. */
.dsite-lang .dsite-dot {
margin-bottom: 6px;
}
@media (hover: hover) {
.dsite-lang > a:hover {
color: var(--gold-light);
border-bottom-color: var(--gold-45);
}
}
/* --- header --------------------------------------------------------------- */
.dsite-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: var(--pad-page-y) var(--pad-page-x);
}
/* Over the hero video: transparent, and re-enables pointer events because the
hero's content column is pointer-events:none so the video stays inert. */
.dsite-header--hero {
background: none;
pointer-events: auto;
}
/* On /quote and the legal pages, where there is no video behind it. */
.dsite-header--solid {
background: var(--ink);
border-bottom: 1px solid var(--rule-header);
}
/* The logo link. The mark itself drops to 38px on phones, which would leave the
link under the 44px minimum; the header is 74px tall even there, so giving the
link a 44px floor costs nothing visually. */
.dsite-header > a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* width:auto plus the intrinsic width/height attributes keep the mark at its
natural 1024x579 (~1.77:1) aspect at every size. It must never be stretched. */
.dsite-logo {
display: block;
height: var(--logo-h);
width: auto;
}
.dsite-header-right {
display: flex;
align-items: center;
gap: 28px;
}
.dsite-header-phone {
font-family: var(--font-ui);
font-weight: 400;
font-size: 11px;
line-height: 1;
letter-spacing: var(--track-phone);
color: var(--bone-66);
transition: color var(--t-hover) ease;
}
.dsite-header-login {
padding-bottom: 7px;
border-bottom: 1px solid var(--gold-45);
font-family: var(--font-ui);
font-weight: 400;
font-size: 10px;
line-height: 1;
letter-spacing: var(--track-nav);
text-transform: uppercase;
color: var(--gold);
transition: color var(--t-hover) ease, border-color var(--t-hover) ease;
}
@media (hover: hover) {
.dsite-header-phone:hover { color: var(--gold); }
.dsite-header-login:hover {
color: var(--gold-light);
border-color: var(--gold-light);
}
}
/* --- footer --------------------------------------------------------------- */
.dsite-footer {
background: var(--ink);
border-top: 1px solid var(--gold-22);
padding: var(--footer-pad-t) var(--pad-section-x) var(--footer-pad-b);
}
.dsite-footer-close {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.dsite-footer-h2 {
margin-top: 30px;
max-width: 18ch;
font-family: var(--font-display);
font-weight: 300;
font-size: 54px;
line-height: 1.16;
letter-spacing: var(--track-display);
color: var(--bone);
text-wrap: pretty;
}
.dsite-footer-copy {
margin-top: 26px;
max-width: 56ch;
font-family: var(--font-ui);
font-weight: 300;
font-size: 15px;
line-height: 1.9;
color: var(--bone-60);
text-wrap: pretty;
}
.dsite-footer-cta {
margin-top: 38px;
}
.dsite-footer-cols {
margin-top: 104px;
padding-top: 44px;
border-top: 1px solid var(--rule-inner);
display: grid;
grid-template-columns: 1fr 200px 260px;
gap: 70px;
align-items: start;
}
.dsite-footer-brand {
display: flex;
flex-direction: column;
gap: 22px;
}
/* align-self keeps the mark at its natural width inside a stretch container —
without it the flex column would stretch it edge to edge. */
.dsite-footer-brand .dsite-logo {
height: var(--logo-h-footer);
align-self: flex-start;
}
.dsite-footer-brand p {
max-width: 40ch;
font-family: var(--font-ui);
font-weight: 300;
font-size: 13.5px;
line-height: 1.85;
color: var(--bone-45);
text-wrap: pretty;
}
.dsite-footer-col {
display: flex;
flex-direction: column;
gap: 16px;
}
.dsite-footer-col > span:first-child {
font-family: var(--font-ui);
font-weight: 400;
font-size: 9px;
line-height: 1;
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--bone-34);
}
.dsite-footer-link {
font-family: var(--font-ui);
font-weight: 400;
font-size: 13.5px;
line-height: 1;
letter-spacing: var(--track-link);
color: var(--bone-70);
transition: color var(--t-hover) ease;
}
@media (hover: hover) {
.dsite-footer-link:hover { color: var(--gold); }
}
.dsite-footer-note {
font-family: var(--font-display);
font-weight: 300;
font-style: italic;
font-size: 12.5px;
line-height: 1.7;
color: var(--bone-38);
}
.dsite-footer-note--desk {
font-size: 13px;
line-height: 1.6;
color: var(--bone-42);
}
/* The © + language strip. Also used standalone on /quote and the legal pages,
which is why it is its own partial. */
.dsite-strip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.dsite-footer .dsite-strip {
margin-top: 56px;
}
/* The strip as a standalone page footer (_MarketingFooterBar), on the pages that
do not carry the full footer. */
.dsite-stripbar {
background: var(--ink);
border-top: 1px solid var(--rule-inner);
padding: var(--pad-page-y) var(--pad-page-x);
}
.dsite-copyright {
font-family: var(--font-ui);
font-weight: 400;
font-size: 9.5px;
line-height: 1.6;
letter-spacing: var(--track-copy);
text-transform: uppercase;
color: var(--bone-32);
}
/* --- opening screen -------------------------------------------------------- */
/* Only on the landing page (ViewData["Loader"]). Dismissed by marketing.js;
neutralised entirely by the block in the layout. */
.dsite-loader {
position: fixed;
inset: 0;
z-index: 200;
display: grid;
place-items: center;
background: var(--ink);
opacity: 1;
transition: opacity .7s ease, visibility 0s linear .7s;
}
.dsite-loader.is-done {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.dsite-loader[hidden] {
display: none;
}
/* A visitor arriving from another page of this site does not meet the opening
screen again. They have already seen it, they already have the fonts and the
poster frame it exists to wait for, and replaying it would put a black screen
in the middle of the page transition — which is the one thing the transition
is there to avoid. Cold arrivals — typed, bookmarked, from a search result or
an app store listing — are unaffected.
Kept out of the reduced-motion query deliberately: skipping the intro is not a
motion decision, and a visitor who asked for less motion has even less reason
to sit through it. The inline script in _MarketingLayout also takes
`dsite-loading` off in the same breath, which is what releases the
hero's entrance animations — this rule only stops the screen being painted. */
html.dsite-warm .dsite-loader {
display: none;
}
.dsite-loader-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 34px;
/* A whisker above centre — optically centred rather than measured. */
transform: translateY(-4%);
}
.dsite-loader-mark {
height: 64px;
width: auto;
opacity: .92;
}
/* The same 1px gold hairline language as the hero rule and the section rules,
here as an indeterminate sweep. No percentage is shown, because none of the
things being waited on report progress and a fake bar is a lie. */
.dsite-loader-track {
position: relative;
width: 160px;
height: 1px;
overflow: hidden;
background: var(--rule-inner);
}
.dsite-loader-bar {
position: absolute;
inset: 0 auto 0 0;
width: 40%;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
@media (prefers-reduced-motion: no-preference) {
@keyframes dloadsweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(400%); }
}
.dsite-loader-mark { animation: dsoft .8s ease both; }
.dsite-loader-bar { animation: dloadsweep 1.5s cubic-bezier(.65, 0, .35, 1) infinite; }
}
/* Under reduced motion there is no sweep, so show a static gold hairline rather
than a bar frozen at the left edge. */
@media (prefers-reduced-motion: reduce) {
.dsite-loader-bar {
width: 100%;
background: var(--gold-45);
}
}
/* Hold the hero's entrance stagger — and the foil sweep — until the loader has
gone, so the reveal is one composed moment instead of an animation that
already finished behind a black screen.
Specificity (0,2,1) deliberately outranks the (0,1,0) bindings in the motion
block, wherever they sit in the file. */
html.dsite-loading .dsite-header--hero,
html.dsite-loading .dsite-hero-kicker,
html.dsite-loading .dsite-hero-headline,
html.dsite-loading .dsite-hero-rule,
html.dsite-loading .dsite-hero-sub,
html.dsite-loading .dsite-hero-ctas,
html.dsite-loading .dsite-hero-lang,
html.dsite-loading .dsite-cookie {
animation-play-state: paused;
}
/* No scrolling behind the loader — the page underneath is fully rendered and a
trackpad flick would otherwise scroll it invisibly. */
html.dsite-loading,
html.dsite-loading body {
overflow: hidden;
}
/* --- hero ----------------------------------------------------------------- */
/* ⚠️ DEVIATION FROM THE SPEC, requested: the README fixes the hero at 830px; it
is now the viewport height instead.
Expressed as a min-height on the CONTENT rather than a height on the section,
which matters. The content column is in normal flow (the media layers behind it
are the absolute ones), so the hero is exactly one viewport tall when the
content fits and GROWS when it does not — a short laptop window or a large
accessibility font size can never clip the headline against overflow:hidden.
svh, not vh: on iOS, vh is the LARGE viewport height, so a 100vh hero sits
partly under the URL bar until the user scrolls and then jumps. svh is the
small-viewport height and is stable. The vh line above it is the fallback. */
.dsite-hero {
position: relative;
overflow: hidden;
background: var(--ink);
}
/* The video sits in its own ink-filled box, so the fraction of a second before
the poster paints is brand black rather than white. Together with the fixed
hero height and inset:0 positioning, this makes layout shift structurally
impossible here — the poster is for looks, not for CLS. */
.dsite-hero-media {
position: absolute;
inset: 0;
background: var(--ink);
}
.dsite-hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Decorative and inert: it must not be right-clickable into a play control,
and the pause button below is the only handle on it. */
pointer-events: none;
}
.dsite-hero-scrim,
.dsite-hero-vignette,
.dsite-hero-grain {
position: absolute;
inset: 0;
pointer-events: none;
}
.dsite-hero-scrim {
background: linear-gradient(180deg,
rgba(5, 5, 5, .94) 0%,
rgba(5, 5, 5, .50) 32%,
rgba(5, 5, 5, .60) 64%,
rgba(5, 5, 5, .97) 100%);
opacity: .72;
}
.dsite-hero-vignette {
background: radial-gradient(115% 80% at 50% 50%, transparent 38%, rgba(0, 0, 0, .66) 100%);
}
/* Film grain: an inline feTurbulence SVG at its intrinsic 160x160, so it tiles
at 160px with no background-size needed. Generated rather than shipped as an
image because it is a handful of bytes and never needs a second request. */
.dsite-hero-grain {
opacity: .16;
mix-blend-mode: overlay;
background-image: url('data:image/svg+xml;utf8,
because it performs an action rather than navigating. */
.dsite-footer-cookies {
padding: 0;
background: none;
border: 0;
text-align: left;
cursor: pointer;
}
.dsite-footer-cookies[hidden] {
display: none;
}
/* --- quote page (/quote) --------------------------------------------------- */
/* The page is three blocks inside : the solid header, this split, and the
© strip. Making the flex column and giving the split whatever is left
means it reaches the bottom of the screen at ANY header or strip height — no
calc() that would have to be re-derived at every breakpoint.
It is a MIN height and the split never shrinks (flex: 1 0 auto), so the usual
case — a form taller than the window — is completely untouched. The growth
only happens on a window tall enough that the page would otherwise stop short
and leave a dead band under the footer, which is what a large desktop monitor
does: the design is authored on a 1440px canvas and the form runs out first.
svh, not vh: same reason as the hero — on iOS vh is the LARGE viewport height,
so the strip would sit under the URL bar. The vh line is the fallback.
:has() rather than a class on , so _MarketingLayout stays exactly as it
is for the other three pages that share it; .dsite-errorsummary:has() already
relies on the same support. */
main:has(> .dsite-quote) {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100svh;
}
.dsite-quote {
flex: 1 0 auto;
display: grid;
grid-template-columns: var(--col-plate) 1fr;
background: var(--ink-2);
}
/* left plate ---------------------------------------------------------------- */
.dsite-plate {
position: relative;
min-height: 100%;
overflow: hidden;
background: var(--ink);
}
.dsite-plate-media {
position: absolute;
inset: 0;
}
.dsite-plate-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dsite-plate-scrim {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg,
rgba(5, 5, 5, .90) 0%,
rgba(5, 5, 5, .72) 45%,
rgba(5, 5, 5, .94) 100%);
}
.dsite-plate-body {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 86px 56px 64px;
}
.dsite-plate-h1 {
margin-top: 30px;
max-width: 15ch;
font-family: var(--font-display);
font-weight: 300;
font-size: 52px;
line-height: 1.14;
letter-spacing: var(--track-display);
color: var(--bone);
text-wrap: pretty;
}
.dsite-plate-copy {
margin-top: 26px;
max-width: 40ch;
font-family: var(--font-ui);
font-weight: 300;
font-size: 15px;
line-height: 1.9;
color: var(--bone-62);
text-wrap: pretty;
}
/* margin-top:auto pins the assurances to the bottom of the plate, however tall
the form beside it turns out to be. */
.dsite-plate-foot {
margin-top: auto;
padding-top: 56px;
display: flex;
flex-direction: column;
gap: 18px;
}
.dsite-plate-rule {
display: block;
height: 1px;
background: var(--gold-30);
}
.dsite-assurances {
display: flex;
flex-direction: column;
gap: 18px;
}
.dsite-assurances li {
display: flex;
gap: 14px;
align-items: baseline;
font-family: var(--font-ui);
font-weight: 300;
font-size: 14px;
line-height: 1.7;
color: var(--bone-62);
}
.dsite-plate-mail {
margin-top: 14px;
align-self: flex-start;
font-family: var(--font-display);
font-weight: 300;
font-style: italic;
font-size: 20px;
line-height: 1;
color: var(--bone);
transition: color var(--t-hover) ease;
}
@media (hover: hover) {
.dsite-plate-mail:hover { color: var(--gold); }
}
/* form panel ---------------------------------------------------------------- */
/* On a window taller than the form, the leftover height belongs to the panel —
the photograph beside it runs the full screen and the form sits centred
against it, the way the plate's own block is pinned to the bottom of its
column. Nothing moves at the height the design was drawn at; there is no free
space to distribute there.
Grid align-content rather than flex centring or margin:auto, because the
panel's height is a floor and not a ceiling (it is a stretched grid item in a
min-height page), so the free space here can never go negative — a form
taller than the window keeps its top edge where it is instead of being
centred off the top of the page, which is the classic way this breaks. */
.dsite-form-panel {
padding: 86px 90px 78px;
display: grid;
align-content: center;
}
/* journey-type tiles -------------------------------------------------------- */
.dsite-tiles-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 20px;
}
.dsite-tile {
position: relative;
}
/* Clipped, NOT display:none or visibility:hidden — either of those would remove
the input from the accessibility tree and make it unfocusable, which is the
whole reason for using a real radio in the first place. */
.dsite-tile-input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
white-space: nowrap;
clip-path: inset(50%);
}
.dsite-tile-face {
display: flex;
align-items: center;
justify-content: center;
min-height: 54px; /* already over the 44px minimum as designed */
height: 100%;
padding: 18px 14px;
text-align: center;
cursor: pointer;
background: var(--tile-fill);
border: 1px solid var(--rule-tile);
color: var(--bone);
font-family: var(--font-ui);
font-weight: 400;
font-size: 10px;
line-height: 1.4;
letter-spacing: var(--track-tile);
text-transform: uppercase;
transition: border-color var(--t-line) ease, background var(--t-line) ease;
}
.dsite-tile-input:checked + .dsite-tile-face {
background: var(--gold-14);
border-color: var(--gold);
}
/* The ring goes on the visible tile, since the input it belongs to is clipped. */
.dsite-tile-input:focus-visible + .dsite-tile-face {
outline: 2px solid var(--gold-light);
outline-offset: 3px;
}
@media (hover: hover) {
.dsite-tile-face:hover { border-color: var(--gold-50); }
}
/* fields -------------------------------------------------------------------- */
.dsite-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--field-gap) var(--field-gap-x);
margin-top: 52px;
}
.dsite-fields--who { margin-top: 26px; }
.dsite-block { margin-top: 64px; }
.dsite-field {
display: flex;
flex-direction: column;
gap: 10px;
}
.dsite-field--notes { margin-top: 34px; }
/* Underline inputs: transparent, no border except a 1px bottom hairline that
turns gold on focus. color-scheme:dark on the root already darkens the native
date and time pickers. */
.dsite-input {
width: 100%;
padding: 10px 0;
background: transparent;
border: 0;
border-bottom: 1px solid var(--rule-input);
outline: none;
color: var(--bone);
font-family: var(--font-ui);
font-weight: 300;
font-size: 15px;
line-height: 1.4;
transition: border-color var(--t-line) ease;
}
.dsite-input::placeholder {
/* Raised from the design's implicit level — see --optional-ink. */
color: var(--optional-ink);
opacity: 1; /* Firefox dims placeholders by default */
}
.dsite-input:focus {
border-bottom-color: var(--gold);
}
/* The underline is the field's own affordance, so the focus ring would double
up on it. Everything else on the site keeps the standard ring. */
.dsite-input:focus-visible {
outline: none;
border-bottom-color: var(--gold-light);
}
.dsite-select {
cursor: pointer;
}
/* The dropdown list itself is painted by the OS, which does not inherit the
panel background — set it explicitly or the options render black-on-black. */
.dsite-select option {
background: var(--ink-2);
color: var(--bone);
}
.dsite-textarea {
resize: none;
line-height: 1.7;
}
/* The honeypot. Off-screen rather than display:none, which the better bots skip.
aria-hidden + tabindex="-1" in the markup keep it away from real users. */
.dsite-hp {
position: absolute;
left: -9999px;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
}
/* errors -------------------------------------------------------------------- */
.dsite-error {
font-family: var(--font-ui);
font-weight: 400;
font-size: 11px;
line-height: 1.5;
letter-spacing: var(--track-panel);
color: var(--error);
}
.dsite-error:empty {
display: none;
}
.dsite-error--tiles {
display: block;
margin-top: 12px;
}
/* ASP.NET adds .input-validation-error to a field that failed. Switching the
underline to the error hue keeps the field reading as the same gold hairline
system in a different colour, which is what the README asks for. */
.dsite-input.input-validation-error {
border-bottom-color: var(--error-line);
}
.dsite-input.input-validation-error:focus {
border-bottom-color: var(--error-focus);
}
.dsite-errorsummary {
margin-bottom: 28px;
font-family: var(--font-ui);
font-weight: 400;
font-size: 12.5px;
line-height: 1.7;
color: var(--error);
}
.dsite-errorsummary ul {
display: flex;
flex-direction: column;
gap: 6px;
}
.dsite-errorsummary:has(ul:empty) {
display: none;
}
/* submit -------------------------------------------------------------------- */
.dsite-submitrow {
display: flex;
align-items: center;
gap: 30px;
margin-top: 52px;
flex-wrap: wrap;
}
.dsite-btn--submit {
padding: 20px 42px;
}
.dsite-submitnote {
font-family: var(--font-ui);
font-weight: 300;
font-size: 13.5px;
line-height: 1.7;
color: var(--bone-45);
}
/* submitted state ----------------------------------------------------------- */
.dsite-received {
padding: 70px 0;
border-top: 1px solid var(--gold-30);
}
.dsite-received-h2 {
margin-top: 28px;
max-width: 20ch;
font-family: var(--font-display);
font-weight: 300;
font-size: 46px;
line-height: 1.18;
color: var(--bone);
text-wrap: pretty;
}
.dsite-received-copy {
margin-top: 24px;
max-width: 52ch;
font-family: var(--font-ui);
font-weight: 300;
font-size: 15px;
line-height: 1.9;
color: var(--bone-60);
text-wrap: pretty;
}
.dsite-received-again {
display: inline-block;
margin-top: 40px;
font-size: 10.5px;
}
/* --- legal pages (/privacy, /terms) --------------------------------------- */
.dsite-legal {
background: var(--ink-2);
padding: 110px var(--pad-section-x) 96px;
}
.dsite-legal-inner {
max-width: 760px;
}
.dsite-legal h1 {
margin-top: 30px;
max-width: 18ch;
font-family: var(--font-display);
font-weight: 300;
font-size: 54px;
line-height: 1.16;
letter-spacing: var(--track-display);
color: var(--bone);
text-wrap: pretty;
}
.dsite-legal-updated {
margin-top: 22px;
font-family: var(--font-ui);
font-weight: 400;
font-size: 9.5px;
line-height: 1.6;
letter-spacing: var(--track-micro);
text-transform: uppercase;
color: var(--bone-42);
}
.dsite-legal-lede {
margin-top: 34px;
max-width: 58ch;
font-family: var(--font-ui);
font-weight: 300;
font-size: 17px;
line-height: 1.9;
color: var(--bone-72);
text-wrap: pretty;
}
/* --- the legal documents themselves ---------------------------------------
Everything below styles the AUTHORED markup inside Data/Legal/*.html — its own
headings, lists, tables, callouts and table of contents. Those files carry no
stylesheet of their own (theirs was stripped, along with its Google Fonts
links), so this is where they get their appearance.
Element selectors are scoped under .dsite-legal-doc and wrapped in :where()
where they could compete with a class, for the same specificity reason as the
reset at the top of this file.
-------------------------------------------------------------------------- */
.dsite-legal-doc {
margin-top: 48px;
}
.dsite-legal-doc :where(h2) {
margin-top: 64px;
padding-top: 34px;
border-top: 1px solid var(--gold-22);
font-family: var(--font-display);
font-weight: 300;
font-size: 30px;
line-height: 1.24;
letter-spacing: var(--track-display);
color: var(--bone);
/* Section anchors are linked from the document's own contents list; without
this the sticky-free layout still lands the heading flush to the top edge. */
scroll-margin-top: 24px;
}
.dsite-legal-doc :where(h3) {
margin-top: 38px;
font-family: var(--font-ui);
font-weight: 500;
font-size: 13px;
line-height: 1.5;
letter-spacing: var(--track-tile);
text-transform: uppercase;
color: var(--gold);
}
.dsite-legal-doc :where(p) {
margin-top: 20px;
max-width: 68ch;
font-family: var(--font-ui);
font-weight: 300;
font-size: 15px;
line-height: 1.95;
color: var(--bone-72);
text-wrap: pretty;
}
.dsite-legal-doc :where(.lede) {
font-size: 17px;
color: var(--bone-72);
}
.dsite-legal-doc :where(strong) {
font-weight: 500;
color: var(--bone);
}
.dsite-legal-doc :where(em) {
font-style: italic;
}
.dsite-legal-doc :where(code) {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
color: var(--gold-light);
}
.dsite-legal-doc :where(a) {
color: var(--gold);
border-bottom: 1px solid var(--gold-45);
padding-bottom: 1px;
transition: color var(--t-hover) ease, border-color var(--t-hover) ease;
}
@media (hover: hover) {
.dsite-legal-doc a:hover {
color: var(--gold-light);
border-bottom-color: var(--gold-light);
}
}
.dsite-legal-doc :where(ul, ol) {
margin-top: 20px;
padding-left: 0;
max-width: 68ch;
display: flex;
flex-direction: column;
gap: 12px;
}
.dsite-legal-doc :where(ol) {
counter-reset: dsite-legal-ol;
}
.dsite-legal-doc :where(li) {
position: relative;
padding-left: 22px;
font-family: var(--font-ui);
font-weight: 300;
font-size: 15px;
line-height: 1.8;
color: var(--bone-72);
}
/* A gold dot for unordered items, a gold numeral for ordered ones — the same
marker language as the quote page's assurances. */
.dsite-legal-doc :where(ul) > li::before {
content: "";
position: absolute;
left: 0;
top: .72em;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--gold);
}
.dsite-legal-doc :where(ol) > li::before {
counter-increment: dsite-legal-ol;
content: counter(dsite-legal-ol) ".";
position: absolute;
left: 0;
top: 0;
color: var(--gold);
font-variant-numeric: tabular-nums;
}
/* Contents list at the top of each document.
The block is Contents …