/* ── CSS Variables (matching main site) ─────────────────────────────── */ :root { --color-navy-dark: #0b1929; --color-navy-mid: #132438; --color-navy-light: #1a3450; --color-orange: #f58113; --color-orange-dk: #d4690a; --color-white: #fff; --color-text: #1a2a3a; --color-muted: #5a7a9a; --color-border: #d6e4f0; --color-light: #f4f8fc; --color-green: #16a34a; --font-display: 'Poppins', sans-serif; --font-sans: 'DM Sans', sans-serif; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 18px; } /* ── Base ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); background-color: var(--color-navy-dark); background-image: linear-gradient(rgba(11,25,41,0.72), rgba(11,25,41,0.72)), url('../img/derbyshire-landscape.jpg'); background-size: cover; background-position: center 40%; background-attachment: fixed; color: var(--color-text); min-height: 100vh; } @media (max-width: 639px) { body { background-attachment: scroll; } } /* ── Header ──────────────────────────────────────────────────────────── */ /* * Desktop: logo is absolutely positioned so it floats over the left edge * and bleeds down into the breadcrumb bar without expanding the header height. * A left-padding on the header reserves enough space to keep the secure badge * from sliding behind the logo. * * Mobile: logo returns to normal flow, centred, in a sticky header. * A scroll listener adds .su-scrolled to ; the logo then fades + shrinks * away, leaving a minimal sticky strip so the breadcrumb stays fully visible. */ .su-header { position: relative; overflow: visible; /* let logo bleed downward */ background: var(--color-navy-dark); padding: 0.625rem 1.5rem 0.625rem 210px; /* left pad ≈ logo width + gutter */ display: flex; align-items: center; justify-content: flex-end; min-height: 64px; z-index: 20; } .su-header__logo { position: absolute; top: 0.5rem; left: 1.5rem; z-index: 30; text-decoration: none; display: block; } .su-header__logo img { height: 96px; max-width: 180px; width: auto; object-fit: contain; object-position: left center; display: block; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.55)); } .su-header__secure { display: flex; align-items: center; gap: 0.5rem; background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.25); border-radius: 8px; padding: 0.45rem 0.85rem; } .su-header__secure svg { color: #4ade80; flex-shrink: 0; } .su-header__secure-text { display: flex; flex-direction: column; line-height: 1.2; } .su-header__secure-text strong { font-size: 0.8rem; color: rgba(255,255,255,0.9); font-weight: 600; } .su-header__secure-text small { font-size: 0.68rem; color: #4ade80; letter-spacing: 0.02em; } /* ── Progress ────────────────────────────────────────────────────────── */ .su-progress { background: var(--color-navy-mid); padding: 1rem 1.5rem; position: relative; z-index: 10; /* below the floating logo */ } .su-progress__track { display: flex; gap: 0; max-width: 720px; margin: 0 auto; } .su-progress__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; position: relative; } .su-progress__step::before { content: ''; position: absolute; top: 13px; left: 50%; right: -50%; height: 2px; background: rgba(255,255,255,0.12); z-index: 0; } .su-progress__step:last-child::before { display: none; } .su-progress__step--done::before { background: var(--color-orange); } .su-progress__step--active::before { background: rgba(255,255,255,0.12); } .su-progress__dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); background: var(--color-navy-mid); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.4); position: relative; z-index: 1; transition: all 0.2s ease; } .su-progress__step--done .su-progress__dot { background: var(--color-orange); border-color: var(--color-orange); color: #fff; } .su-progress__step--active .su-progress__dot { border-color: var(--color-orange); color: #fff; background: var(--color-navy-mid); box-shadow: 0 0 0 3px rgba(245,129,19,0.25); } .su-progress__label { font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.35); text-align: center; line-height: 1.2; } .su-progress__step--active .su-progress__label { color: rgba(255,255,255,0.7); } .su-progress__step--done .su-progress__label { color: rgba(255,255,255,0.5); } /* ── Layout ──────────────────────────────────────────────────────────── */ .su-wrap { max-width: 740px; margin: 0 auto; padding: 2rem 1.25rem 4rem; } /* ── Card ────────────────────────────────────────────────────────────── */ .su-card { background: var(--color-white); border-radius: var(--radius-xl); box-shadow: 0 8px 48px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25); overflow: hidden; } .su-card__header { background: var(--color-navy-dark); padding: 1.5rem 1.75rem 1.25rem; } .su-card__title { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; color: var(--color-white); margin: 0 0 0.2rem; letter-spacing: -0.02em; } .su-card__subtitle { font-size: 0.88rem; color: rgba(255,255,255,0.5); margin: 0; } .su-card__body { padding: 1.75rem; } .su-card__footer { padding: 1.25rem 1.75rem; background: var(--color-light); border-top: 1px solid var(--color-border); display: flex; gap: 0.75rem; justify-content: flex-end; align-items: center; } /* ── Errors ──────────────────────────────────────────────────────────── */ .su-errors { background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-md); padding: 0.875rem 1rem; margin-bottom: 1.5rem; } .su-errors__title { font-size: 0.85rem; font-weight: 600; color: #b91c1c; margin: 0 0 0.4rem; } .su-errors ul { margin: 0; padding-left: 1.25rem; } .su-errors li { font-size: 0.85rem; color: #dc2626; margin-bottom: 0.2rem; } /* ── Form fields ─────────────────────────────────────────────────────── */ .su-field { margin-bottom: 1.1rem; } .su-label { display: block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); margin-bottom: 0.35rem; } .su-label .req { color: var(--color-orange); } .su-input, .su-select, .su-textarea { display: block; width: 100%; padding: 0.65rem 0.875rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.925rem; font-family: var(--font-sans); color: var(--color-text); background: #fff; transition: border-color 0.15s, box-shadow 0.15s; } .su-input:focus, .su-select:focus, .su-textarea:focus { outline: none; border-color: var(--color-orange); box-shadow: 0 0 0 3px rgba(245,129,19,0.12); } .su-textarea { resize: vertical; min-height: 80px; } .su-input-hint { font-size: 0.75rem; color: var(--color-muted); margin-top: 0.3rem; } .su-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .su-cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 0.75rem; } @media (max-width: 520px) { .su-cols-2, .su-cols-3 { grid-template-columns: 1fr; } } /* ── Section headings ────────────────────────────────────────────────── */ .su-section-head { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-orange); margin: 1.75rem 0 1rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--color-border); } .su-section-head:first-child { margin-top: 0; } /* ── Choice cards (service type, tariff, etc.) ───────────────────────── */ .su-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; } .su-choice-grid--single { grid-template-columns: 1fr; } @media (max-width: 500px) { .su-choice-grid { grid-template-columns: 1fr; } } .su-choice { position: relative; border: 2px solid rgba(245,129,19,0.3); border-radius: var(--radius-lg); padding: 1.1rem 1rem 1rem; cursor: pointer; background: rgba(245,129,19,0.04); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .su-choice:hover { border-color: rgba(245,129,19,0.6); background: rgba(245,129,19,0.08); } .su-choice input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; } .su-choice--selected { border-color: var(--color-orange-dk); background: rgba(212,105,10,0.18); box-shadow: 0 0 0 3px rgba(212,105,10,0.22); } .su-choice__check { position: absolute; top: 0.75rem; right: 0.75rem; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--color-border); display: flex; align-items: center; justify-content: center; background: #fff; transition: all 0.15s; } .su-choice--selected .su-choice__check { border-color: var(--color-orange-dk); background: var(--color-orange-dk); } .su-choice--selected .su-choice__check::after { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #fff; } .su-choice__name { font-weight: 700; font-size: 0.975rem; color: var(--color-text); margin: 0 1.5rem 0.3rem 0; } .su-choice__desc { font-size: 0.82rem; color: var(--color-muted); line-height: 1.5; margin: 0; } .su-choice__badge { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; background: var(--color-orange); color: #fff; border-radius: 4px; padding: 2px 7px; margin-bottom: 0.4rem; } .su-choice__price { font-size: 1.1rem; font-weight: 700; color: var(--color-navy-dark); margin: 0.45rem 0 0.25rem; } .su-choice__price small { font-size: 0.72rem; font-weight: 400; color: var(--color-muted); } .su-choice__speed { font-size: 0.75rem; font-weight: 600; color: var(--color-orange); letter-spacing: 0.04em; margin-bottom: 0.25rem; } .su-choice--coming { opacity: 0.75; } .su-choice--coming:hover { border-color: rgba(245,129,19,0.4); } /* ── Tariff grid ─────────────────────────────────────────────────────── */ .su-tariff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; } /* ── Radio row (yes/no style) ─────────────────────────────────────────── */ .su-radio-row { display: flex; gap: 0.75rem; flex-wrap: wrap; } .su-radio-row .su-choice { flex: 1; min-width: 130px; padding: 0.8rem 0.9rem; } /* ── Inline sort code ────────────────────────────────────────────────── */ .su-sortcode { display: flex; align-items: center; gap: 0.5rem; } .su-sortcode input { width: 64px; text-align: center; letter-spacing: 0.12em; } .su-sortcode__sep { color: var(--color-muted); font-weight: 700; font-size: 1rem; } /* ── Info box ─────────────────────────────────────────────────────────── */ .su-info { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--radius-md); padding: 0.875rem 1rem; font-size: 0.85rem; color: #1e40af; line-height: 1.55; margin-bottom: 1.25rem; } .su-info svg { vertical-align: -3px; margin-right: 5px; } /* ── DD guarantee logo area ──────────────────────────────────────────── */ .su-dd-brand { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--color-light); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 1.5rem; } .su-dd-brand__logo { flex-shrink: 0; line-height: 0; } .su-dd-brand__text { font-size: 0.8rem; color: var(--color-muted); line-height: 1.4; } .su-dd-brand__text strong { color: var(--color-text); } /* ── Review table ────────────────────────────────────────────────────── */ .su-review-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .su-review-table tr { border-bottom: 1px solid var(--color-border); } .su-review-table tr:last-child { border-bottom: none; } .su-review-table th { width: 38%; text-align: left; padding: 0.65rem 0.5rem 0.65rem 0; font-size: 0.78rem; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; vertical-align: top; } .su-review-table td { padding: 0.65rem 0 0.65rem 0.5rem; color: var(--color-text); font-weight: 500; } .su-review-section { margin-bottom: 1.5rem; } .su-review-section__title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-orange); margin-bottom: 0.6rem; } /* ── T&Cs checkboxes ─────────────────────────────────────────────────── */ .su-check-item { display: flex; gap: 0.75rem; padding: 0.875rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 0.75rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .su-check-item:hover { border-color: var(--color-orange); background: #fffbf6; } .su-check-item input[type=checkbox] { margin-top: 1px; accent-color: var(--color-orange); width: 16px; height: 16px; flex-shrink: 0; } .su-check-item label { font-size: 0.875rem; color: var(--color-text); line-height: 1.5; cursor: pointer; } .su-check-item label a { color: var(--color-orange); } /* ── Buttons ─────────────────────────────────────────────────────────── */ .su-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.6rem; border-radius: var(--radius-md); font-size: 0.925rem; font-weight: 600; font-family: var(--font-sans); border: none; cursor: pointer; text-decoration: none; transition: background 0.15s, transform 0.1s, box-shadow 0.15s; } .su-btn:active { transform: translateY(1px); } .su-btn--primary { background: var(--color-orange); color: #fff; } .su-btn--primary:hover { background: var(--color-orange-dk); } .su-btn--ghost { background: transparent; color: var(--color-muted); border: 1.5px solid var(--color-border); } .su-btn--ghost:hover { color: var(--color-text); border-color: #b0c8e0; } /* ── Success page ────────────────────────────────────────────────────── */ .su-success { text-align: center; padding: 3rem 1.75rem; } .su-success__icon { width: 72px; height: 72px; border-radius: 50%; background: #dcfce7; color: var(--color-green); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; } .su-success__title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--color-text); margin: 0 0 0.75rem; } .su-success__text { font-size: 1rem; color: var(--color-muted); max-width: 440px; margin: 0 auto 2rem; line-height: 1.65; } /* ── Footer ──────────────────────────────────────────────────────────── */ .su-footer { text-align: center; padding: 2rem 1.5rem 1rem; font-size: 0.78rem; color: rgba(255,255,255,0.3); background: var(--color-navy-dark); } .su-footer a { color: rgba(255,255,255,0.45); } /* ── Postcode address lookup ─────────────────────────────────────────── */ .su-pc-lookup { display: flex; gap: 0.5rem; align-items: flex-end; margin-bottom: 0.75rem; } .su-pc-lookup .su-field { margin-bottom: 0; flex: 1; } .su-pc-lookup__btn { flex-shrink: 0; height: 42px; padding: 0 1rem; background: var(--color-navy-dark); color: #fff; border: none; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; font-family: var(--font-sans); cursor: pointer; white-space: nowrap; transition: background 0.15s; } .su-pc-lookup__btn:hover { background: var(--color-navy-light); } .su-pc-lookup__btn:disabled { opacity: 0.6; cursor: not-allowed; } .su-addr-list { list-style: none; margin: 0 0 1.25rem; padding: 0; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); overflow-y: auto; max-height: 260px; } .su-addr-list[hidden] { display: none; } .su-addr-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; cursor: pointer; border-bottom: 1px solid var(--color-border); transition: background 0.12s; font-size: 0.9rem; } .su-addr-item:last-child { border-bottom: none; } .su-addr-item:hover { background: #f0f7ff; } .su-addr-item svg { color: var(--color-muted); flex-shrink: 0; } .su-addr-item__text { flex: 1; } .su-addr-item__l1 { font-weight: 600; color: var(--color-text); } .su-addr-item__l2 { font-size: 0.8rem; color: var(--color-muted); } .su-addr-item__chev { color: var(--color-border); flex-shrink: 0; transition: transform 0.12s; } .su-addr-item:hover .su-addr-item__chev { transform: translateX(3px); color: var(--color-orange); } .su-addr-spinner { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--color-muted); padding: 0.5rem 0 0.75rem; } .su-addr-spinner[hidden] { display: none; } .su-addr-spinner__ring { width: 18px; height: 18px; border: 2px solid var(--color-border); border-top-color: var(--color-navy-dark); border-radius: 50%; animation: suSpin 0.65s linear infinite; flex-shrink: 0; } @keyframes suSpin { to { transform: rotate(360deg); } } .su-addr-manual { font-size: 0.8rem; color: var(--color-muted); margin-bottom: 1rem; } .su-addr-manual a { color: var(--color-orange); cursor: pointer; text-decoration: underline; background: none; border: none; font-family: var(--font-sans); font-size: inherit; padding: 0; } /* ── Clickable breadcrumb steps ──────────────────────────────────────── */ .su-progress__step--nav { cursor: pointer; } .su-progress__step--nav:hover .su-progress__dot { background: var(--color-orange-dk); border-color: var(--color-orange-dk); transform: scale(1.12); } .su-progress__step--nav:hover .su-progress__label { color: rgba(255,255,255,0.85); } .su-progress__step--nav .su-progress__dot { transition: background 0.15s, transform 0.15s; } .su-progress__step--nav:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 3px; border-radius: 4px; } /* ── Tablet: slightly smaller floating logo ───────────────────────────── */ @media (max-width: 860px) { .su-header { padding-left: 170px; } .su-header__logo img { height: 76px; } } /* ── Mobile: logo returns to flow, sticky header, fades on scroll ─────── */ @media (max-width: 639px) { .su-header { /* Back to normal flex layout */ position: sticky; top: 0; overflow: hidden; padding: 0.625rem 1rem; justify-content: center; align-items: center; transition: padding 0.25s ease; z-index: 100; } .su-header__logo { position: static; /* back in the normal flow */ display: block; } .su-header__logo img { height: 44px; max-width: none; filter: none; transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease; transform-origin: top center; } /* Secure badge: absolute so it doesn't push the centred logo off */ .su-header__secure { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); padding: 0.3rem 0.6rem; transition: opacity 0.2s ease; } .su-header__secure-text small { display: none; } /* Breadcrumb sticks just below the compact header */ .su-progress { position: sticky; top: 68px; /* matches header height */ z-index: 99; transition: top 0.25s ease; } /* ── Scrolled state: logo fades, header shrinks, crumb slides up ── */ body.su-scrolled .su-header { padding-top: 0.25rem; padding-bottom: 0.25rem; } body.su-scrolled .su-header__logo img { opacity: 0; transform: scale(0.6) translateY(-8px); max-height: 0; pointer-events: none; } body.su-scrolled .su-header__secure { opacity: 0; pointer-events: none; } body.su-scrolled .su-progress { top: 8px; /* header nearly gone — crumb slides up */ } }