/* index.css — page-specific layout for the marketing home page (index.html): the hero, services, results gallery, why, coverage map, quote form, booking wizard, price calculator and the intl-tel-input dark theme. The chrome (nav, footer, mobile menu, to-top, body grain/glow), the gold eyebrow base and reveal come from the shared layer; this file keeps only page layout plus the few chrome overrides the home page needs (translucent hero nav, underlined nav links). Cascade: tokens -> base -> site -> animations -> index.css. */ /* The home page keeps the ORIGINAL 100ms reveal step; the site default is half that. Its groups are short rows - six services, three reasons, the hero strip - where the wider step reads as a cascade and the last item is still under a second behind the first. The long columns elsewhere (a policy, the FAQ) are what the smaller default is for. */ :root{--stagger:100ms} .container{max-width:1180px;margin:0 auto} /* ---------- NAV ---------- */ /* The bar's skin - background, blur, bottom rule - belongs to chrome.css and is NOT re-tinted here: one tone on every page, marketing and console alike. Only the link treatment is this page's: dimmer resting colour, underline on hover. */ .nav-links a{color:var(--ink-dim);position:relative} .nav-links a.hide-sm::after{ content:'';position:absolute;left:0;bottom:-2px; width:100%;height:1.5px; background:var(--gold); transform:scaleX(0);transform-origin:center; transition:transform .28s cubic-bezier(.4,0,.2,1); } @media(hover:hover) and (pointer:fine){ .nav-links a.hide-sm:hover{color:var(--ink-soft)} .nav-links a.hide-sm:hover::after{transform:scaleX(1)}} @media(prefers-reduced-motion:reduce){.nav-links a.hide-sm::after{transition:none}} /* ---------- HERO ---------- */ /* Content is anchored under the nav instead of centred in the viewport: centring made the gap under the fixed nav grow with screen height. The bottom padding keeps the block clear of the absolutely positioned .hero-meta strip: on a short viewport the header grows with its content, so the gap above the strip is exactly padding-bottom minus the strip's own height plus its 46px offset - 264 = 43 + 46 + the 175px the six-item strip needs for its two rows. */ header{ min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start; align-items:flex-start;text-align:left; padding:116px 0 264px;position:relative; } header .container{width:100%} .eyebrow,.lede{margin-left:0;margin-right:auto} .eyebrow{ display:inline-flex;align-items:center;gap:12px; color:var(--gold);font-size:.74rem;letter-spacing:.34em;text-transform:uppercase; margin-bottom:28px;opacity:0;animation:rise .9s .1s forwards; } .eyebrow::before{content:"";width:38px;height:1px;background:var(--gold)} /* site.css gives .eyebrow a trailing ::after rule too; the home hero has only a leading rule, so neutralise the shared trailing line here. */ .eyebrow::after{content:none} /* No ch-based width cap: every line break is authored as a .l span, and the longest line no longer fits the old cap - it would wrap into a fourth line. */ h1{ font-family:var(--serif);font-weight:300; font-size:clamp(2.9rem,8vw,6.2rem);line-height:.98;letter-spacing:-.015em; margin-bottom:30px; } h1 .em{font-style:italic;color:var(--gold-soft)} h1 .l{display:block;opacity:0;animation:rise 1s forwards} h1 .l:nth-child(1){animation-delay:.18s} h1 .l:nth-child(2){animation-delay:.32s} .lede{ font-size:clamp(1.02rem,2vw,1.22rem);color:var(--ink-soft);max-width:50ch; margin-bottom:42px;opacity:0;animation:rise 1s .6s forwards;font-weight:300; } /* The hero's three staggered entrances all START AT opacity 0, so the animation is not decoration here - it is the only thing that makes the largest text on the site appear. Two consequences the shared reveal rule does not cover, because these are `animation`s rather than the `.reveal` transition: - a visitor who asked for less motion still got the whole sequence; - and if the animation does not run at all, the headline never arrives. Under reduced motion they render finished immediately. Same end state, no movement, and nothing depending on an animation to become visible. */ @media(prefers-reduced-motion:reduce){ .eyebrow,h1 .l,.lede{animation:none;opacity:1} } .btn{ font-family:var(--sans);font-size:.86rem;letter-spacing:.08em;text-transform:uppercase; padding:16px 32px;border-radius:2px;text-decoration:none;cursor:pointer; transition:all .3s;border:1px solid transparent;display:inline-block; } .btn-gold{background:var(--gold);color:var(--bg);font-weight:500} @media(hover:hover) and (pointer:fine){.btn-gold:hover{background:var(--gold-soft);transform:translateY(-2px)}} .btn-gold:active{background:var(--gold-soft)} .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)} @media(hover:hover) and (pointer:fine){.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}} .btn-ghost:active{border-color:var(--gold);color:var(--gold)} /* ---------- INSTANT QUOTE (hero) ---------- */ /* A SHOWCASE of the wizard's calculator, so it owns nothing the wizard owns: no price rule, no option list, no second state that could disagree. index.js fills the three selects from the wizard's own option grids and prices them with the same function over the same prices.json; Book this hands the selection to those options' own click. The controls wear .field, the page's existing form skin - only the compact size and the drawn chevron are local, and appearance:none is what stops iOS repainting a select as its own light capsule on the page a visitor lands on first. */ .iq{ /* No top margin of its own: the panel stands exactly where the CTA row stood and the lede's own margin-bottom is the whole gap, as it was for that row. (A margin here would collapse against that one anyway - it bought nothing.) The tight bottom is measured: it is what puts the fine print above the fold on a 1280x720 laptop. */ max-width:640px;padding:22px 24px 10px; background:var(--panel);border:1px solid rgba(201,165,88,.28);border-radius:3px; opacity:0;animation:rise 1s .75s forwards; } .iq-head{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold); margin-bottom:16px} .iq-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .iq-field{position:relative;margin:0} .iq-field label{font-size:.62rem;letter-spacing:.14em;margin-bottom:7px} .iq .field select{appearance:none;-webkit-appearance:none;padding:11px 32px 11px 12px;font-size:.9rem} /* Drawn, not an image: a data-URI arrow would have to carry a literal colour, and the chevron here is the same shape the calendar and the TOC already use. */ .iq-field::after{content:'';position:absolute;right:14px;bottom:17px;width:6px;height:6px; border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft); transform:rotate(45deg);pointer-events:none} /* Price on the left, the two routes on the right in the hero row's own order: the ghost one, then the gold one at the end of the line. */ .iq-out{display:flex;align-items:flex-end;gap:12px;margin-top:18px;flex-wrap:wrap} .iq-total{margin-right:auto;padding-right:8px} .iq-label{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim); margin-bottom:4px} .iq-amount{display:flex;align-items:baseline;gap:10px} .iq-price{font-family:var(--serif);font-size:2.1rem;font-weight:400;color:var(--ink);line-height:1} /* The price re-renders on every change; the shared fade-in keyframe is what marks it, re-armed by removing and re-adding the class. No new duration, no new easing. */ .iq-price.tick{animation:fade-in var(--dur) var(--ease)} .iq-hrs{font-size:.82rem;color:var(--ink-dim)} /* Placeholder while prices.json is still in flight: a bar, not a spinner and not a guessed number. It does not pulse, so there is nothing for reduced motion to stop. */ .iq-skeleton{display:inline-block;width:104px;height:.72em;border-radius:2px; background:var(--line);opacity:.5} /* The pair inherits .btn whole - the hero row's own padding, type and sliding arrow - because it IS that row now. Only the line-height is pinned: one is an and one a