/* Chester Windows — Navy Studio presentation layer */ /* CW INTERNAL DESIGNER BRANDING */ .topbar-stacked-logo { display: none; } /* The existing landing-page branding remains independently styled. */ body:not(.door-type-landing) .designer-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 96px; height: auto; padding: 12px 24px; background: #ffffff; color: var(--navy); border-bottom: 1px solid var(--border); box-shadow: 0 3px 14px rgba(17, 38, 58, .045); } body:not(.door-type-landing) .topbar-brand { position: static; inset: auto; transform: none; display: flex; flex: 1 1 260px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px; width: auto; min-width: 0; height: auto; padding: 0; border: 0; } body:not(.door-type-landing) .topbar-logo, body:not(.door-type-landing) .landing-brand-tagline, body:not(.door-type-landing) .landing-page-heading, body:not(.door-type-landing) .topbar-spacer { display: none; } body:not(.door-type-landing) .topbar-stacked-logo { display: block; flex: 0 0 72px; width: 72px; height: 72px; object-fit: contain; } body:not(.door-type-landing) .topbar-title { position: static; inset: auto; transform: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; width: auto; min-width: 0; margin: 0; padding: 0; text-align: left; white-space: normal; color: var(--navy); } body:not(.door-type-landing) .topbar-title > span { display: block; color: var(--muted); font-size: .7rem; font-weight: 600; line-height: 1.3; letter-spacing: .13em; text-transform: uppercase; } body:not(.door-type-landing) .topbar-title > strong { display: block; color: var(--navy); font-family: inherit; font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; } body:not(.door-type-landing) .designer-topbar > .preview-toolbar { position: static; inset: auto; transform: none; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; width: auto; min-width: 0; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; } body:not(.door-type-landing) .designer-topbar > .preview-toolbar button { min-height: 40px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 7px; background: #ffffff; color: var(--navy); font: inherit; font-size: .8rem; line-height: 1.2; cursor: pointer; } body:not(.door-type-landing) .designer-topbar > .preview-toolbar button:hover { border-color: var(--gold); background: #faf8f3; } body:not(.door-type-landing) .designer-topbar > .preview-toolbar button:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; } body:not(.door-type-landing) .designer-topbar > .preview-toolbar button:is( .active, .is-active, .selected, .is-selected, [aria-pressed="true"] ) { border-color: var(--navy); background: var(--navy); color: #ffffff; } @media (max-width: 620px) { body:not(.door-type-landing) .designer-topbar { gap: 12px; padding: 12px 16px; } body:not(.door-type-landing) .topbar-brand { flex-basis: 100%; gap: 14px; } body:not(.door-type-landing) .topbar-stacked-logo { flex-basis: 60px; width: 60px; height: 60px; } body:not(.door-type-landing) .designer-topbar > .preview-toolbar { flex: 1 1 100%; justify-content: flex-start; } } /* END CW INTERNAL DESIGNER BRANDING */ /* CW INTERNAL CONTROLS THEME */ body:not(.door-type-landing) .designer-journey { background: #ffffff; color: var(--navy); border-right-color: var(--border); } body:not(.door-type-landing) .journey-nav li { color: #586674; border-color: #dfe5ea; background: transparent; } body:not(.door-type-landing) .journey-nav li.is-complete { color: var(--navy); border-color: #8d9eab; } body:not(.door-type-landing) .journey-nav li.is-current { color: var(--navy); border-color: var(--gold); background: #f4f6f8; font-weight: 700; } body:not(.door-type-landing) .journey-nav li.is-current::after { background: var(--gold); } body:not(.door-type-landing) .journey-nav li.has-error { color: var(--danger); border-color: var(--danger); } body:not(.door-type-landing) .journey-nav li > button, body:not(.door-type-landing) .journey-nav li > a { color: inherit; } body:not(.door-type-landing) .designer-options { background: #ffffff; color: var(--ink); border-color: var(--border); box-shadow: none; } body:not(.door-type-landing) .options-header { background: #ffffff; border-bottom-color: var(--border); } body:not(.door-type-landing) .options-step-label { color: #586674; } body:not(.door-type-landing) .options-header h2 { color: var(--navy); font-family: inherit; font-weight: 600; letter-spacing: -.025em; } body:not(.door-type-landing) .options-header p:last-child { color: #586674; } body:not(.door-type-landing) .options-header::after { background: var(--gold); } body:not(.door-type-landing) :is(.option-card, .opening-option-card, .opening-text-card, .furniture-option-card, .locking-option-card, .style-option-card) { background: #ffffff; color: var(--navy); border-color: #d7dfe6; border-radius: 8px; box-shadow: 0 2px 6px rgba(17, 38, 58, .035); } body:not(.door-type-landing) :is(.option-card, .opening-option-card, .opening-text-card, .furniture-option-card, .locking-option-card, .style-option-card):hover:not(:disabled):not(.is-unavailable):not(.has-error) { background: #f7f9fb; border-color: #9eacb9; box-shadow: 0 4px 12px rgba(17, 38, 58, .06); } body:not(.door-type-landing) :is(.option-card, .opening-option-card, .opening-text-card, .furniture-option-card, .locking-option-card, .style-option-card).is-selected { background: #f4f7fa; border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); } body:not(.door-type-landing) :is(.option-card, .opening-option-card, .opening-text-card, .furniture-option-card, .locking-option-card, .style-option-card).is-selected:hover:not(:disabled):not(.is-unavailable) { background: #f4f7fa; border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); } body:not(.door-type-landing) .option-card.is-selected::before { background: var(--gold); } body:not(.door-type-landing) .option-card::after, body:not(.door-type-landing) .option-card.is-selected::after { box-shadow: none; } body:not(.door-type-landing) :is(.option-card, .opening-option-card, .opening-text-card, .furniture-option-card, .locking-option-card, .style-option-card).has-error { border-color: var(--danger); background: #fff7f7; box-shadow: inset 0 0 0 1px var(--danger); } body:not(.door-type-landing) :is(.option-card, .opening-option-card, .opening-text-card, .furniture-option-card, .locking-option-card, .style-option-card):disabled, body:not(.door-type-landing) :is(.option-card, .opening-option-card, .opening-text-card, .furniture-option-card, .locking-option-card, .style-option-card).is-unavailable { opacity: .56; border-color: #d7dfe6; box-shadow: none; cursor: not-allowed; } body:not(.door-type-landing) .style-option-card--thumbnail .style-option-thumb { background: #f5f7f9; border-color: #e1e6eb; } body:not(.door-type-landing) .style-option-card--thumbnail.is-selected .style-option-name--below { background: #edf2f6; color: var(--navy); } body:not(.door-type-landing) :is(.colour-thumbnail-card, .hardware-finish-card) { border-color: #d7dfe6; } body:not(.door-type-landing) :is(.colour-thumbnail-card, .hardware-finish-card).is-selected { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); } body:not(.door-type-landing) .product-variant-selector { background: #f3f6f8; border-color: #d7dfe6; } body:not(.door-type-landing) .product-variant-button { color: var(--navy); } body:not(.door-type-landing) .product-variant-button.is-selected { background: var(--navy); border-color: var(--navy); color: #ffffff; box-shadow: none; } body:not(.door-type-landing) .opening-text-title, body:not(.door-type-landing) .door-half-secondary-heading strong, body:not(.door-type-landing) .door-review-section-title, body:not(.door-type-landing) .door-review-ready-copy strong { font-family: inherit; font-weight: 600; color: var(--navy); } body:not(.door-type-landing) .opening-text-direction { color: #586674; } body:not(.door-type-landing) .door-review-section { background: #ffffff; border-color: #d7dfe6; border-radius: 8px; box-shadow: 0 2px 6px rgba(17, 38, 58, .035); } body:not(.door-type-landing) .door-review-section-header, body:not(.door-type-landing) .door-review-row { border-bottom-color: #e5eaf0; } body:not(.door-type-landing) .door-review-label { color: #586674; } body:not(.door-type-landing) .door-review-value { color: var(--navy); } body:not(.door-type-landing) .door-review-edit { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; } body:not(.door-type-landing) .door-review-edit:hover { text-decoration-thickness: 2px; } body:not(.door-type-landing) .door-review-ready { background: #f4f7fa; border-color: #cbd6df; } body:not(.door-type-landing) .door-review-ready-copy { color: #586674; } body:not(.door-type-landing) .designer-actions { background: #ffffff; border-top-color: var(--border); } body:not(.door-type-landing) .designer-actions button { min-height: 44px; border-radius: 8px; font-weight: 600; } body:not(.door-type-landing) #backButton { background: #ffffff; color: var(--navy); border-color: #cbd5de; } body:not(.door-type-landing) #backButton:hover:not(:disabled) { background: #f4f7fa; border-color: #9eacb9; } body:not(.door-type-landing) #continueButton { background: var(--navy); color: #ffffff; border-color: var(--navy); } body:not(.door-type-landing) #continueButton:hover:not(:disabled) { background: var(--navy-deep); border-color: var(--navy-deep); } body:not(.door-type-landing) #continueButton:disabled { background: var(--navy); border-color: var(--navy); cursor: not-allowed; } body:not(.door-type-landing) #backButton:disabled { background: #ffffff; border-color: #cbd5de; cursor: not-allowed; } body:not(.door-type-landing) .final-action-card-primary { background: var(--navy); color: #ffffff; border-color: var(--navy); } body:not(.door-type-landing) .final-action-card-secondary { background: #ffffff; color: var(--navy); border-color: #cbd5de; } body:not(.door-type-landing) .designer-options button:focus-visible, body:not(.door-type-landing) .journey-nav button:focus-visible, body:not(.door-type-landing) .journey-nav a:focus-visible, body:not(.door-type-landing) .journey-nav li:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; } /* END CW INTERNAL CONTROLS THEME */ /* NAVY STUDIO — SHARED SURFACES AND PREVIEW LAYOUT */ body:not(.door-type-landing) .designer-app { height: 100vh; height: 100dvh; min-height: 0; grid-template-rows: auto minmax(0, 1fr); background: #e8eef3; } body:not(.door-type-landing) .designer-topbar { min-height: 96px; box-sizing: border-box; } body:not(.door-type-landing) .designer-topbar > .preview-toolbar { min-height: 0; } body:not(.door-type-landing) .designer-topbar > .preview-toolbar button:hover { background: #f1f5f8; } /* Navy navigation */ body:not(.door-type-landing) .designer-journey { background: var(--navy); color: #d8e2eb; border-right-color: #263d51; } body:not(.door-type-landing) .journey-nav li { color: #bac9d6; background: transparent; border-color: #405568; } body:not(.door-type-landing) .journey-nav li.is-complete { color: #e1e9f0; border-color: #7e94a7; } body:not(.door-type-landing) .journey-nav li.is-current { color: #ffffff; background: #283f53; border-color: var(--gold); border-radius: 0 7px 7px 0; } body:not(.door-type-landing) .journey-nav li.has-error { color: #ffcccc; border-color: #e48d8d; } body:not(.door-type-landing) .journey-nav li > button, body:not(.door-type-landing) .journey-nav li > a { color: inherit; } body:not(.door-type-landing) .journey-nav :is(button, a, li):focus-visible { outline: 2px solid #dfbd7f; outline-offset: 3px; } /* Preview, status and summary each receive their own space. */ body:not(.door-type-landing) .designer-preview { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; background: radial-gradient( ellipse at 50% 40%, #f5f8fa 0%, #e5ecf2 65%, #dbe4ec 100% ); } body:not(.door-type-landing) .preview-stage { position: relative; min-width: 0; min-height: 0; padding: 0; overflow: hidden; } body:not(.door-type-landing) .preview-stage::after { display: none; } /* Fit the SVG to the available stage; retain its own door proportions. */ body:not(.door-type-landing) .preview-stage #doorPreview { position: absolute; inset: clamp(18px, 2.5vw, 36px); display: grid; place-items: center; width: auto; height: auto; min-width: 0; min-height: 0; max-width: none; max-height: none; aspect-ratio: auto; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; transform: none; } body:not(.door-type-landing) .preview-stage #doorPreview > svg { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(17, 38, 58, .13)); } body:not(.door-type-landing) .opening-status { position: static; width: fit-content; max-width: calc(100% - 32px); margin: 0 auto 14px; padding: 7px 13px; background: #f7fafc; color: var(--navy); border-color: #cbd7e0; box-shadow: none; font-size: .8rem; font-weight: 600; } body:not(.door-type-landing) .design-summary { min-height: 64px; padding: 15px 24px; background: #edf2f6; border-top-color: #cfdbe4; gap: 8px 12px; } body:not(.door-type-landing) .design-summary strong { color: var(--navy); font-family: inherit; font-weight: 600; font-size: .9rem; } body:not(.door-type-landing) .design-summary span { color: #52697c; } /* White controls, cool-grey surrounding surfaces. */ body:not(.door-type-landing) .designer-options { min-height: 0; background: #ffffff; border-color: #d5dfe7; } body:not(.door-type-landing) .options-header { background: #ffffff; } body:not(.door-type-landing) .options-panel { background: #edf2f6; } body:not(.door-type-landing) .designer-actions { background: #ffffff; border-top-color: #d5dfe7; } body:not(.door-type-landing) .door-half-secondary-config { background: #ffffff; border-color: #d5dfe7; box-shadow: 0 3px 10px rgba(17, 38, 58, .04); } /* Landing page retains its prominent banner and existing layout. */ body.door-type-landing .designer-app, body.door-type-landing .designer-options, body.door-type-landing .options-panel { background: #e8eef3; } body.door-type-landing .door-type-landing-card { background: #ffffff; border-color: #d1dce5; border-radius: 12px; box-shadow: 0 5px 18px rgba(17, 38, 58, .06); } body.door-type-landing .door-type-landing-card:hover { background: #ffffff; border-color: #91a6b8; box-shadow: 0 8px 24px rgba(17, 38, 58, .10); } body.door-type-landing .door-type-landing-card.is-selected { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); } body.door-type-landing .door-type-landing-preview { background: #edf2f6; } @media (max-width: 850px) { body:not(.door-type-landing) .designer-app { height: auto; min-height: 100vh; min-height: 100dvh; display: block; overflow: visible; } body:not(.door-type-landing) .designer-preview { min-height: 0; grid-template-rows: clamp(320px, 60svh, 520px) auto auto; } body:not(.door-type-landing) .preview-stage { min-height: 0; } body:not(.door-type-landing) .preview-stage #doorPreview { inset: 20px; } body:not(.door-type-landing) .options-panel { overflow: visible; } body:not(.door-type-landing) .journey-nav li.is-current { border-radius: 7px 7px 0 0; } } body:not(.door-type-landing) .designer-preview:fullscreen { width: 100%; height: 100%; } /* 2026-10-02 PREVIEW CLEARANCE + LANDING SCALE */ /* * Desktop designer preview: * keep the rendered door comfortably above the Current design bar. * The renderer remains untouched; this is purely viewport geometry. */ @media (min-width: 1101px) { body:not(.door-type-landing) .preview-stage #doorPreview { inset: clamp(18px, 2.2vh, 28px) clamp(18px, 2vw, 30px) clamp(64px, 7vh, 78px); } } /* * Desktop landing gallery: * use more of each card for the actual product preview and reduce * the unnecessary empty space around the rendered doors. */ @media (min-width: 1001px) { body.door-type-landing .options-panel { padding-top: 16px; padding-bottom: 18px; } body.door-type-landing .door-type-landing-card { grid-template-rows: 360px 68px; } body.door-type-landing .door-type-landing-preview { padding: 10px 12px 8px; } body.door-type-landing .door-type-landing-preview .v2-product-svg, body.door-type-landing .door-type-landing-image { width: auto !important; height: min(336px, calc(100% - 12px)) !important; max-width: 98% !important; max-height: 98% !important; object-fit: contain; } } /* 2026-10-02 COMPACT CURRENT DESIGN BAR */ body:not(.door-type-landing) .design-summary { min-height: 44px; padding: 8px 18px; gap: 6px 10px; } body:not(.door-type-landing) .design-summary strong { font-size: 0.8rem; line-height: 1.15; } body:not(.door-type-landing) .design-summary span { font-size: 0.78rem; line-height: 1.15; } @media (max-width: 700px) { body:not(.door-type-landing) .design-summary { min-height: 40px; padding: 7px 14px; gap: 5px 8px; } body:not(.door-type-landing) .design-summary strong, body:not(.door-type-landing) .design-summary span { font-size: 0.74rem; } } /* 2026-10-02 COMPACT ACTION BAR */ body:not(.door-type-landing) .designer-actions { min-height: 44px; padding: 5px 16px; box-sizing: border-box; align-items: center; } body:not(.door-type-landing) .designer-actions button { min-height: 34px; height: 34px; padding: 5px 18px; box-sizing: border-box; } @media (max-width: 700px) { body:not(.door-type-landing) .designer-actions { min-height: 40px; padding: 4px 12px; } body:not(.door-type-landing) .designer-actions button { min-height: 32px; height: 32px; padding: 4px 14px; } } /* 2026-10-02 COMPACT STYLE CARDS + FOOTER BUTTONS */ /* Fit more door styles into the visible options area. */ body:not(.door-type-landing) .style-range-selector { gap: 8px; margin-bottom: 10px; } body:not(.door-type-landing) .style-range-button { min-height: 38px; padding: 6px 10px; font-size: 0.82rem; } body:not(.door-type-landing) .compact-style-option-grid { gap: 8px; } body:not(.door-type-landing) .style-option-card--thumbnail .style-option-thumb { width: 62px; height: 100px; margin: 6px auto 0; } body:not(.door-type-landing) .style-option-name--below { padding: 6px 5px 7px; font-size: 0.88rem; line-height: 1.1; } /* Make navigation buttons sit comfortably inside the slim footer. */ body:not(.door-type-landing) .designer-actions { padding-top: 6px; padding-bottom: 6px; } body:not(.door-type-landing) .designer-actions button { min-height: 28px; height: 28px; padding: 2px 14px; font-size: 0.86rem; line-height: 1; } @media (max-width: 700px) { body:not(.door-type-landing) .designer-actions button { min-height: 28px; height: 28px; padding: 2px 12px; font-size: 0.82rem; } } /* 2026-10-02 REMOVE CONTINUE BUTTON GOLD BAR */ body:not(.door-type-landing) #continueButton::before { display: none !important; } /* 2026-10-02 MOVE OPENING STATUS PILL */ /* * The opening-status pill must not consume a separate row beneath * the preview. Move it into unused preview space so the door gets * the full available vertical height. */ @media (min-width: 701px) { body:not(.door-type-landing) .designer-preview { position: relative; grid-template-rows: minmax(0, 1fr) auto; } body:not(.door-type-landing) .opening-status { position: absolute; left: 18px; bottom: 58px; z-index: 20; margin: 0; max-width: calc(50% - 30px); pointer-events: none; } } /* 2026-10-02 TIGHTEN LANDING HEADER */ @media (min-width: 1001px) { body.door-type-landing .designer-app { grid-template-rows: 126px minmax(0, 1fr); } body.door-type-landing .designer-topbar { min-height: 126px; height: 126px; } body.door-type-landing .topbar-brand { left: clamp(30px, 4vw, 64px); top: 50%; transform: translateY(-50%); width: clamp(390px, 32vw, 500px); gap: 0; } body.door-type-landing .topbar-logo { width: 100%; height: 86px; object-fit: contain; object-position: left center; } body.door-type-landing .landing-brand-tagline { margin-top: -5px; justify-content: center; font-size: 9px; letter-spacing: .18em; line-height: 1; } body.door-type-landing .landing-page-heading { left: 66%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 38vw); } body.door-type-landing .landing-page-heading > span { margin-bottom: 3px; font-size: 10px; } body.door-type-landing .landing-page-heading > strong { font-size: clamp(2.55rem, 3vw, 3.15rem); line-height: .98; } body.door-type-landing .landing-page-heading > small { margin-top: 6px; font-size: .9rem; } } /* 2026-10-02 LANDING HEADER ALIGNMENT FIX */ @media (min-width: 1001px) { /* Keep logo and tagline together as one brand lockup. */ body.door-type-landing .topbar-brand { left: clamp(30px, 4vw, 64px); top: 50%; transform: translateY(-50%); width: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } body.door-type-landing .topbar-logo { width: 100%; height: 84px; object-fit: contain; object-position: center center; } body.door-type-landing .landing-brand-tagline { width: auto; margin: -3px auto 0; display: flex; justify-content: center; align-items: center; gap: 9px; font-size: 9px; letter-spacing: .18em; line-height: 1; white-space: nowrap; } /* Restore true page-centred title block. */ body.door-type-landing .landing-page-heading { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(580px, 40vw); align-items: center; text-align: center; } } /* 2026-10-02 LANDING BRAND LEFT NUDGE */ @media (min-width: 1001px) { body.door-type-landing .topbar-brand { left: 28px; width: 360px; align-items: flex-start; } body.door-type-landing .topbar-logo { object-position: left center; } body.door-type-landing .landing-brand-tagline { margin: -3px 0 0; justify-content: flex-start; } } /* 2026-10-02 CENTRE LANDING LOGO OVER TAGLINE */ @media (min-width: 1001px) { body.door-type-landing .topbar-brand { left: 28px; width: max-content; align-items: center; } body.door-type-landing .topbar-logo { width: 250px; height: 84px; object-position: center center; } body.door-type-landing .landing-brand-tagline { width: max-content; margin: -3px 0 0; justify-content: flex-start; } } /* CW FOCUSED STYLE OPTIONS */ body:not(.door-type-landing) .designer-options-back { display: inline-flex; align-items: center; min-height: 40px; margin: 0 0 8px; padding: 6px 12px; border: 1px solid #cbd6df; border-radius: 7px; background: #edf2f6; color: var(--navy); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; } .designer-options-back[hidden] { display: none !important; } body:not(.door-type-landing) .designer-options-back:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; } body:not(.door-type-landing) .options-panel > .door-half-secondary-group { margin-top: 0; } body:not(.door-type-landing) .options-header { position: sticky; top: 0; z-index: 5; } body:not(.door-type-landing) .designer-actions { position: sticky; bottom: 0; z-index: 6; } /* CW SIDE PANEL CONTROLS */ body:not(.door-type-landing) .door-half-secondary-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; } body:not(.door-type-landing) .door-half-secondary-options .product-variant-button { min-height: 44px; white-space: normal; overflow-wrap: anywhere; } body:not(.door-type-landing) .side-panel-note { margin: 12px 0 0; color: #52697c; font-size: .86rem; line-height: 1.5; } /* 2026-10-05 LIVE HYBRID NAVY STUDIO ========================================================= Shared visual language with the approved brochure viewer. Dark/translucent structural shell. Clean light working surfaces. Muted blue controls. Gold reserved for emphasis and primary actions. ========================================================= */ /* --------------------------------------------------------- SHARED PAGE SHELL --------------------------------------------------------- */ body { background: #0b1824; } .designer-app { background: #0b1824; } /* --------------------------------------------------------- LANDING PAGE — DARK BRAND SHELL --------------------------------------------------------- */ body.door-type-landing .designer-app { background: linear-gradient( 180deg, rgba(11, 24, 36, .78), rgba(11, 24, 36, .93) ), url("assets/product-doors.webp") center / cover no-repeat; } body.door-type-landing .designer-topbar { background: linear-gradient( 135deg, rgba(17, 38, 58, .97), rgba(20, 59, 88, .95) ); border-bottom: 1px solid rgba(216, 180, 102, .38); box-shadow: 0 12px 32px rgba(4, 18, 30, .24); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body.door-type-landing .topbar-logo, body.door-type-landing .topbar-stacked-logo { filter: drop-shadow( 0 3px 7px rgba(0, 0, 0, .18) ); } body.door-type-landing .landing-brand-tagline { color: rgba(255, 255, 255, .76); } body.door-type-landing .landing-brand-tagline b { color: #d8b466; } body.door-type-landing .landing-page-heading > span { color: #d8b466; } body.door-type-landing .landing-page-heading > strong { color: #ffffff; } body.door-type-landing .landing-page-heading > small { color: rgba(255, 255, 255, .76); } /* --------------------------------------------------------- LANDING PAGE — CLEAN LIGHT PRODUCT CARDS --------------------------------------------------------- */ body.door-type-landing .designer-options, body.door-type-landing .options-panel { background: transparent; } body.door-type-landing .designer-options { border-color: transparent; } body.door-type-landing .door-type-landing-card { border-color: rgba(122, 166, 196, .38); background: rgba(244, 247, 249, .98); box-shadow: 0 16px 34px rgba(4, 18, 30, .20); } body.door-type-landing .door-type-landing-card:hover { border-color: rgba(216, 180, 102, .62); background: #ffffff; box-shadow: 0 20px 42px rgba(4, 18, 30, .26); } body.door-type-landing .door-type-landing-card.is-selected { border-color: #d8b466; box-shadow: 0 0 0 1px #d8b466, 0 18px 38px rgba(4, 18, 30, .24); } body.door-type-landing .door-type-landing-preview { background: #edf4f8; } /* --------------------------------------------------------- INTERNAL DESIGNER — NAVY STRUCTURE --------------------------------------------------------- */ body:not(.door-type-landing) .designer-app { background: #0b1824; } body:not(.door-type-landing) .designer-topbar { background: linear-gradient( 135deg, rgba(17, 38, 58, .98), rgba(20, 59, 88, .96) ); border-bottom: 1px solid rgba(216, 180, 102, .34); box-shadow: 0 10px 28px rgba(4, 18, 30, .22); } body:not(.door-type-landing) .topbar-title > span { color: #d8b466; } body:not(.door-type-landing) .topbar-title > strong { color: #ffffff; } body:not(.door-type-landing) .designer-journey { background: linear-gradient( 180deg, #14344d, #10283c ); border-right-color: rgba(122, 166, 196, .28); } body:not(.door-type-landing) .designer-brand h1 { color: #ffffff; } body:not(.door-type-landing) .journey-nav li { border-color: rgba(188, 214, 231, .22); } body:not(.door-type-landing) .journey-nav li.is-current { background: rgba(63, 111, 144, .44); border-color: #d8b466; } /* --------------------------------------------------------- INTERNAL DESIGNER — CLEAN WORKING SURFACES --------------------------------------------------------- */ body:not(.door-type-landing) .designer-preview { background: radial-gradient( ellipse at 50% 40%, #ffffff 0%, #f2f6f8 64%, #e8eff4 100% ); } body:not(.door-type-landing) .design-summary { background: #e8f1f6; border-top-color: #c4d5e0; } body:not(.door-type-landing) .designer-options { background: #f4f6f7; border-color: rgba(122, 166, 196, .30); } body:not(.door-type-landing) .options-header { background: #ffffff; } body:not(.door-type-landing) .options-panel { background: #edf4f8; } body:not(.door-type-landing) .designer-actions { background: #f4f6f7; border-top-color: #c9d8e2; } /* --------------------------------------------------------- INTERNAL TOPBAR CONTROLS --------------------------------------------------------- */ body:not(.door-type-landing) .designer-topbar .preview-toolbar button { color: #ffffff; border-color: rgba(190, 210, 223, .30); background: #45677e; box-shadow: none; } body:not(.door-type-landing) .designer-topbar .preview-toolbar button:hover { color: #ffffff; border-color: rgba(216, 180, 102, .72); background: #50758e; } /* --------------------------------------------------------- FULLSCREEN PREVIEW --------------------------------------------------------- */ body:not(.door-type-landing) .designer-preview:fullscreen { background: #f4f6f7; } /* --------------------------------------------------------- RESPONSIVE --------------------------------------------------------- */ @media (max-width: 850px) { body.door-type-landing .designer-app { background: linear-gradient( 180deg, rgba(11, 24, 36, .82), rgba(11, 24, 36, .95) ), url("assets/product-doors.webp") center / cover no-repeat; } } /* 2026-10-06 EXACT HOMEPAGE THEME — DOOR DESIGNER ========================================================= Visual values copied from the approved homepage. No door geometry, state, renderer or workflow logic. ========================================================= */ :root { --cw-home-navy: #0A2540; --cw-home-gold: #D4AF37; --cw-home-light-gold: #F5D78E; --cw-home-white: #FFFFFF; --cw-home-ink: #14263a; --cw-home-mist: #f6f7f8; --cw-home-section: radial-gradient( circle at 50% 0%, rgba(36, 88, 122, .18), transparent 42% ), #0b1824; --cw-home-card: linear-gradient( 180deg, #173f5c, #12344d ); --cw-home-card-border: rgba(125, 166, 192, .30); --cw-home-action-border: rgba(132, 175, 201, .36); } /* HOMEPAGE HEADER */ body.door-type-landing .designer-topbar, body:not(.door-type-landing) .designer-topbar { min-height: 126px; border-bottom: 1px solid rgba(255, 255, 255, .18); background: linear-gradient( 180deg, rgba(34, 76, 112, .97) 0%, rgba(23, 58, 91, .86) 48%, rgba(10, 37, 64, .50) 100% ); box-shadow: none; } body.door-type-landing .topbar-logo, body:not(.door-type-landing) .topbar-logo, body.door-type-landing .topbar-stacked-logo, body:not(.door-type-landing) .topbar-stacked-logo { width: 250px !important; height: 84px !important; max-width: none !important; max-height: none !important; object-fit: contain; } /* PAGE / WORKSPACE */ body, body.door-type-landing, body:not(.door-type-landing) { background: #0b1824; } body.door-type-landing .designer-app, body:not(.door-type-landing) .designer-app { background: var(--cw-home-section); } /* LEFT JOURNEY — HOMEPAGE CARD COLOURS */ body:not(.door-type-landing) .designer-journey { background: var(--cw-home-card); border-color: var(--cw-home-card-border); } body:not(.door-type-landing) .journey-nav li { border: 1px solid var(--cw-home-action-border); border-radius: 5px; background: rgba(8, 31, 48, .44); color: #e8f1f6; } body:not(.door-type-landing) .journey-nav li.is-current { border-color: #D4AF37; background: rgba(20, 59, 86, .82); color: #ffffff; } /* TOPBAR UI */ body:not(.door-type-landing) .designer-topbar .preview-toolbar button { min-height: 43px; border: 1px solid var(--cw-home-action-border); border-radius: 5px; background: rgba(8, 31, 48, .44); color: #e8f1f6; font-size: .8rem; font-weight: 700; letter-spacing: .025em; box-shadow: none; } body:not(.door-type-landing) .designer-topbar .preview-toolbar button:hover, body:not(.door-type-landing) .designer-topbar .preview-toolbar button:focus-visible { border-color: rgba(216, 180, 102, .68); background: rgba(20, 59, 86, .82); color: #ffffff; } /* PREVIEW */ body:not(.door-type-landing) .designer-preview { background: #f6f7f8; } body:not(.door-type-landing) .design-summary { border-color: var(--cw-home-card-border); background: #10283c; color: #e8f1f6; } /* OPTIONS AREA */ body:not(.door-type-landing) .designer-options { border-color: var(--cw-home-card-border); background: var(--cw-home-section); } body:not(.door-type-landing) .options-header { border-bottom: 1px solid rgba(137, 177, 202, .14); background: #0b1824; color: #ffffff; } body:not(.door-type-landing) .options-header h2, body:not(.door-type-landing) .designer-brand h1, body.door-type-landing .designer-brand h1 { color: #ffffff; font-family: Georgia, "Times New Roman", serif; font-weight: 600; } body:not(.door-type-landing) .options-header p { color: #b8c8d3; } body:not(.door-type-landing) .options-panel { background: transparent; } /* ALL DESIGNER OPTION CARDS — HOMEPAGE PRODUCT CARD */ body .designer-options [class*="card"], body.door-type-landing [class*="door-type"][class*="card"] { border: 1px solid var(--cw-home-card-border); border-radius: 6px; background: var(--cw-home-card); box-shadow: 0 12px 28px rgba(0, 0, 0, .18); color: #ffffff; } body .designer-options [class*="card"]:hover, body .designer-options [class*="card"]:focus-within { border-color: rgba(212, 175, 55, .62); } body .designer-options [class*="card"] h3, body .designer-options [class*="card"] strong { color: #ffffff; font-family: Georgia, "Times New Roman", serif; } body .designer-options [class*="card"] p, body .designer-options [class*="card"] small { color: #b8c8d3; } /* DESIGNER BUTTONS — HOMEPAGE PRECISION ACTION */ body:not(.door-type-landing) .designer-options button, body:not(.door-type-landing) .designer-actions button { border: 1px solid rgba(216, 180, 102, .82); border-radius: 5px; background: linear-gradient( 180deg, rgba(25, 67, 96, .98), rgba(13, 39, 58, .98) ); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 7px 18px rgba(0, 0, 0, .18); font-weight: 750; letter-spacing: .055em; transform: none; } body:not(.door-type-landing) .designer-options button:hover, body:not(.door-type-landing) .designer-options button:focus-visible, body:not(.door-type-landing) .designer-actions button:hover, body:not(.door-type-landing) .designer-actions button:focus-visible { border-color: rgba(216, 180, 102, .68); background: rgba(20, 59, 86, .82); color: #ffffff; } /* FOOT ACTION BAR — HOMEPAGE FOOTER */ body:not(.door-type-landing) .designer-actions { border-top: 1px solid rgba(137, 177, 202, .18); background: #08141f; } /* FULLSCREEN KEEPS FUNCTIONAL LIGHT PREVIEW */ body:not(.door-type-landing) .designer-preview:fullscreen { background: #f6f7f8; } /* HOMEPAGE RESPONSIVE BRAND */ @media (max-width: 1000px) { body.door-type-landing .designer-topbar, body:not(.door-type-landing) .designer-topbar { min-height: 92px; } body.door-type-landing .topbar-logo, body:not(.door-type-landing) .topbar-logo, body.door-type-landing .topbar-stacked-logo, body:not(.door-type-landing) .topbar-stacked-logo { width: min(210px, 48vw) !important; height: auto !important; max-height: 62px !important; } } @media (max-width: 640px) { body .designer-options [class*="card"] { border-radius: 5px; } } /* 2026-10-06 WHITE DOOR STYLE THUMBNAILS --------------------------------------------------------- Door-style catalogue previews are rendered white in JS. Remove the old pale thumbnail box so the white product itself sits directly against the approved navy card. --------------------------------------------------------- */ body:not(.door-type-landing) .style-option-card--thumbnail .style-option-thumb { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } body:not(.door-type-landing) .style-option-card--thumbnail .style-option-thumb svg { overflow: visible; } /* Preserve enough separation for a white door against the dark card without bringing back the old white box. */ body:not(.door-type-landing) .style-option-card--thumbnail .style-option-thumb .v2-product-svg { filter: drop-shadow( 0 2px 3px rgba(0, 0, 0, .22) ); } /* 2026-10-06 COLOUR THUMBNAIL LABEL FIT Keep the compact colour grid while allowing every approved colour name to fit cleanly inside its footer strip. */ body:not(.door-type-landing) .colour-thumbnail-footer { min-height: 42px; height: auto; padding: 5px 4px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; text-align: center; } body:not(.door-type-landing) .colour-thumbnail-name { width: 100%; display: block; overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: normal; word-break: normal; color: #ffffff; font-size: .76rem; font-weight: 700; line-height: 1.08; letter-spacing: 0; } /* 2026-10-06 WIDER OPTIONS SIDEBAR AND COLOUR CARDS --------------------------------------------------------- Give the configuration pane slightly more working room, make colour cards wider and slightly shorter, and restore comfortable label sizing without changing functionality. --------------------------------------------------------- */ /* DESKTOP — widen the right options pane from the old 360px */ @media (min-width: 1101px) { body:not(.door-type-landing) .designer-app { grid-template-columns: 250px minmax(0, 1fr) 430px !important; } } /* SMALLER DESKTOP / LANDSCAPE TABLET Keep the centre preview useful while still improving the old 320px options column. */ @media (min-width: 851px) and (max-width: 1100px) { body:not(.door-type-landing) .designer-app { grid-template-columns: 210px minmax(0, 1fr) 390px !important; } } /* COLOUR GRID — four broader tiles */ body:not(.door-type-landing) .colour-thumbnail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; } /* SHORTER SWATCH — less vertical card height */ body:not(.door-type-landing) .colour-thumbnail-media { aspect-ratio: auto !important; height: 66px !important; } /* COMPACT BUT COMFORTABLE NAME STRIP */ body:not(.door-type-landing) .colour-thumbnail-footer { min-height: 38px !important; height: 38px !important; padding: 4px 3px !important; } body:not(.door-type-landing) .colour-thumbnail-name { font-size: .78rem !important; line-height: 1.05 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } /* At genuinely narrow application widths, let the existing stacked layout take over rather than forcing four columns. */ @media (max-width: 850px) { body:not(.door-type-landing) .colour-thumbnail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 560px) { body:not(.door-type-landing) .colour-thumbnail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* 2026-10-06 STYLE CARD SELECTED STATE CLEANUP Keep selected style cards in the same navy treatment. Selection is indicated by the gold border only. */ body:not(.door-type-landing) .style-option-card--thumbnail.is-selected, body:not(.door-type-landing) .style-option-card--thumbnail.is-selected:hover, body:not(.door-type-landing) .style-option-card--thumbnail.is-selected:focus-visible { background: linear-gradient( 180deg, #173f5c, #12344d ) !important; border-color: #D4AF37 !important; box-shadow: none !important; } body:not(.door-type-landing) .style-option-card--thumbnail.is-selected .style-option-thumb { background: transparent !important; border-color: transparent !important; } body:not(.door-type-landing) .style-option-card--thumbnail.is-selected .style-option-name--below { background: #0d2b40 !important; color: #ffffff !important; } /* 2026-10-06 STYLE CARD HOVER STATE LOCK Remove the old light hover treatment from door-style cards. Hover remains within the approved homepage navy system. */ body:not(.door-type-landing) .style-option-card--thumbnail:hover:not(:disabled):not(.is-unavailable), body:not(.door-type-landing) .style-option-card--thumbnail:focus-visible:not(:disabled):not(.is-unavailable) { background: linear-gradient( 180deg, #173f5c, #12344d ) !important; border-color: rgba(216, 180, 102, .72) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, .16) !important; } body:not(.door-type-landing) .style-option-card--thumbnail:hover .style-option-thumb, body:not(.door-type-landing) .style-option-card--thumbnail:focus-visible .style-option-thumb { background: transparent !important; border-color: transparent !important; } body:not(.door-type-landing) .style-option-card--thumbnail:hover .style-option-name--below, body:not(.door-type-landing) .style-option-card--thumbnail:focus-visible .style-option-name--below { background: #0d2b40 !important; color: #ffffff !important; } /* Selected + hovered remains identical apart from the existing gold selection border. */ body:not(.door-type-landing) .style-option-card--thumbnail.is-selected:hover, body:not(.door-type-landing) .style-option-card--thumbnail.is-selected:focus-visible { background: linear-gradient( 180deg, #173f5c, #12344d ) !important; border-color: #D4AF37 !important; box-shadow: none !important; } /* 2026-10-06 STYLE NAME BLUE ACTION STRIP Replace the old white door-name footer with the same precision-blue action language used throughout the site. */ body:not(.door-type-landing) .style-option-card--thumbnail .style-option-name--below { min-height: 36px; padding: 7px 8px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-top: 1px solid rgba(132, 175, 201, .30); background: linear-gradient( 180deg, rgba(25, 67, 96, .98), rgba(13, 39, 58, .98) ) !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: .82rem; font-weight: 700; line-height: 1.1; letter-spacing: .025em; text-align: center; } /* Hover stays blue — only a restrained lift in tone. */ body:not(.door-type-landing) .style-option-card--thumbnail:hover .style-option-name--below, body:not(.door-type-landing) .style-option-card--thumbnail:focus-visible .style-option-name--below { background: rgba(20, 59, 86, .96) !important; color: #ffffff !important; } /* Selected state stays blue as well. Gold remains on the outer selected-card border. */ body:not(.door-type-landing) .style-option-card--thumbnail.is-selected .style-option-name--below, body:not(.door-type-landing) .style-option-card--thumbnail.is-selected:hover .style-option-name--below { background: linear-gradient( 180deg, rgba(25, 67, 96, .98), rgba(13, 39, 58, .98) ) !important; color: #ffffff !important; } /* 2026-10-06 DESIGNER FOOTER NAV THEME LOCK --------------------------------------------------------- Bring Back / Continue into the same Chester Windows precision-action system as the rest of the designer. --------------------------------------------------------- */ body:not(.door-type-landing) .designer-actions { gap: 10px; padding: 7px 12px; border-top: 1px solid rgba(137, 177, 202, .18); background: #08141f; } /* SHARED BUTTON GEOMETRY */ body:not(.door-type-landing) .designer-actions #backButton, body:not(.door-type-landing) .designer-actions #continueButton { min-height: 36px !important; height: 36px !important; padding: 5px 14px !important; border-radius: 5px !important; color: #ffffff !important; font-size: .84rem !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .025em !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 5px 14px rgba(0, 0, 0, .16) !important; transform: none !important; } /* BACK — SECONDARY HOMEPAGE ACTION */ body:not(.door-type-landing) .designer-actions #backButton { border: 1px solid rgba(132, 175, 201, .40) !important; background: rgba(8, 31, 48, .72) !important; } body:not(.door-type-landing) .designer-actions #backButton:hover, body:not(.door-type-landing) .designer-actions #backButton:focus-visible { border-color: rgba(216, 180, 102, .62) !important; background: rgba(20, 59, 86, .88) !important; color: #ffffff !important; } /* CONTINUE — PRIMARY PRECISION ACTION */ body:not(.door-type-landing) .designer-actions #continueButton { border: 1px solid rgba(216, 180, 102, .82) !important; background: linear-gradient( 180deg, rgba(25, 67, 96, .98), rgba(13, 39, 58, .98) ) !important; } body:not(.door-type-landing) .designer-actions #continueButton:hover:not(:disabled), body:not(.door-type-landing) .designer-actions #continueButton:focus-visible:not(:disabled) { border-color: rgba(216, 180, 102, .68) !important; background: rgba(20, 59, 86, .94) !important; color: #ffffff !important; } /* DISABLED CONTINUE — SAME THEME, CLEARLY INACTIVE */ body:not(.door-type-landing) .designer-actions #continueButton:disabled { border-color: rgba(132, 175, 201, .18) !important; background: rgba(8, 31, 48, .48) !important; color: rgba(232, 241, 246, .42) !important; box-shadow: none !important; opacity: 1 !important; cursor: not-allowed; } /* 2026-10-06 OPENING OPTION TEXT CONTRAST LOCK Opening cards now use the approved homepage dark-card typography: white primary label, muted blue secondary text. */ body:not(.door-type-landing) .opening-option-card { color: #ffffff !important; } body:not(.door-type-landing) .opening-option-card :is( .option-title, .opening-option-title, strong ) { color: #ffffff !important; } body:not(.door-type-landing) .opening-option-card :is( .option-description, .opening-option-description, small ) { color: #b8c8d3 !important; } /* Catch legacy span-based opening labels without affecting any future button/icon pseudo-elements. */ body:not(.door-type-landing) .opening-option-card > span { color: #b8c8d3 !important; } body:not(.door-type-landing) .opening-option-card > span:first-child { color: #ffffff !important; } /* Hover / focus must not revert to the old dark text. */ body:not(.door-type-landing) .opening-option-card:hover, body:not(.door-type-landing) .opening-option-card:focus-visible, body:not(.door-type-landing) .opening-option-card.is-selected { color: #ffffff !important; } body:not(.door-type-landing) .opening-option-card:hover :is(.option-title, .opening-option-title, strong), body:not(.door-type-landing) .opening-option-card:focus-visible :is(.option-title, .opening-option-title, strong), body:not(.door-type-landing) .opening-option-card.is-selected :is(.option-title, .opening-option-title, strong) { color: #ffffff !important; } /* 2026-10-06 OPENING TEXT CARD FINAL CONTRAST Exact selectors from renderOpeningStep(). Keep the approved navy cards and restore readable text. */ body:not(.door-type-landing) .opening-text-card { color: #ffffff !important; } body:not(.door-type-landing) .opening-text-card .opening-text-title { color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-weight: 700; } body:not(.door-type-landing) .opening-text-card .opening-text-direction { color: #b8c8d3 !important; font-family: Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: .08em; } /* Hover / focus remain dark and readable */ body:not(.door-type-landing) .opening-text-card:hover:not(:disabled), body:not(.door-type-landing) .opening-text-card:focus-visible:not(:disabled) { background: linear-gradient( 180deg, #173f5c, #12344d ) !important; border-color: rgba(216, 180, 102, .72) !important; } body:not(.door-type-landing) .opening-text-card:hover .opening-text-title, body:not(.door-type-landing) .opening-text-card:focus-visible .opening-text-title, body:not(.door-type-landing) .opening-text-card.is-selected .opening-text-title { color: #ffffff !important; } body:not(.door-type-landing) .opening-text-card:hover .opening-text-direction, body:not(.door-type-landing) .opening-text-card:focus-visible .opening-text-direction, body:not(.door-type-landing) .opening-text-card.is-selected .opening-text-direction { color: #b8c8d3 !important; } /* Selected state = same navy card, gold border */ body:not(.door-type-landing) .opening-text-card.is-selected { background: linear-gradient( 180deg, #173f5c, #12344d ) !important; border-color: #D4AF37 !important; box-shadow: none !important; } /* 2026-10-06 FURNITURE CARD STATE LOCK Remove legacy pale hover/selected states from handle and furniture cards. Keep the product image light for clarity, but keep the action/name area navy throughout. */ body:not(.door-type-landing) .furniture-option-card, body:not(.door-type-landing) .furniture-option-card:hover:not(:disabled):not(.is-unavailable), body:not(.door-type-landing) .furniture-option-card:focus-visible:not(:disabled):not(.is-unavailable), body:not(.door-type-landing) .furniture-option-card.is-selected, body:not(.door-type-landing) .furniture-option-card.is-selected:hover { background: linear-gradient( 180deg, #173f5c, #12344d ) !important; color: #ffffff !important; } /* Hover = restrained gold accent only */ body:not(.door-type-landing) .furniture-option-card:hover:not(:disabled):not(.is-unavailable), body:not(.door-type-landing) .furniture-option-card:focus-visible:not(:disabled):not(.is-unavailable) { border-color: rgba(216, 180, 102, .72) !important; } /* Selected = same navy card with clear gold border */ body:not(.door-type-landing) .furniture-option-card.is-selected { border-color: #D4AF37 !important; box-shadow: none !important; } /* Keep all normal furniture-card labels readable */ body:not(.door-type-landing) .furniture-option-card :is( .option-title, .option-name, .furniture-option-title, .furniture-option-name, strong ) { color: #ffffff !important; } /* Secondary / availability copy */ body:not(.door-type-landing) .furniture-option-card :is( .option-description, .furniture-option-description, small ) { color: #b8c8d3 !important; } /* Unavailable cards remain visually muted rather than switching back to the legacy light treatment. */ body:not(.door-type-landing) .furniture-option-card.is-unavailable, body:not(.door-type-landing) .furniture-option-card:disabled { background: linear-gradient( 180deg, rgba(23, 63, 92, .48), rgba(18, 52, 77, .48) ) !important; border-color: rgba(125, 166, 192, .18) !important; opacity: .58; } /* 2026-10-06 UNIFIED PREVIEW BACKGROUND --------------------------------------------------------- Cool pale blue-grey chosen to maximise visibility of: - white - chrome / silver - black - gold / bronze - coloured door surfaces Also keeps all preview imagery within the Chester Windows navy / blue-grey visual system. --------------------------------------------------------- */ body:not(.door-type-landing) .designer-preview, body:not(.door-type-landing) .preview-stage { background: #dfe8ee !important; } body:not(.door-type-landing) .furniture-option-card :is( .furniture-option-media, .option-media, .hardware-option-media ) { background: #dfe8ee !important; } body:not(.door-type-landing) .furniture-option-card img { background: #dfe8ee !important; } /* 2026-10-06 HANDLE FAMILY + VARIANT SELECTOR --------------------------------------------------------- Customer-facing handle flow: 1. choose brochure-aligned handle family 2. choose size only where multiple catalogue sizes exist Existing renderer IDs remain unchanged underneath. --------------------------------------------------------- */ body:not(.door-type-landing) .handle-family-grid { margin-bottom: 16px; } /* The family cards retain the existing furniture-card theme. */ body:not(.door-type-landing) .handle-family-card .furniture-option-name { color: #ffffff !important; } /* CONDITIONAL SECOND-LEVEL SELECTOR */ body:not(.door-type-landing) .handle-variant-selector { margin: 4px 0 16px; padding: 14px; border: 1px solid rgba(125, 166, 192, .30); border-radius: 6px; background: linear-gradient( 180deg, #173f5c, #12344d ); box-shadow: 0 10px 22px rgba(0, 0, 0, .14); } body:not(.door-type-landing) .handle-variant-heading { margin-bottom: 11px; } body:not(.door-type-landing) .handle-variant-heading strong { display: block; color: #ffffff; font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; font-weight: 600; line-height: 1.15; } body:not(.door-type-landing) .handle-variant-heading span { display: block; margin-top: 4px; color: #b8c8d3; font-size: .78rem; line-height: 1.35; } body:not(.door-type-landing) .handle-variant-grid { display: grid; grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: 8px; } body:not(.door-type-landing) .handle-variant-button { min-height: 48px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(132, 175, 201, .36); border-radius: 5px; background: rgba(8, 31, 48, .62); color: #ffffff; box-shadow: none; } body:not(.door-type-landing) .handle-variant-button strong { color: #ffffff; font-size: .82rem; font-weight: 700; line-height: 1.1; } body:not(.door-type-landing) .handle-variant-button small { margin-top: 4px; color: #b8c8d3; font-size: .68rem; line-height: 1.15; } body:not(.door-type-landing) .handle-variant-button:hover:not(:disabled), body:not(.door-type-landing) .handle-variant-button:focus-visible:not(:disabled) { border-color: rgba(216, 180, 102, .72); background: rgba(20, 59, 86, .92); } body:not(.door-type-landing) .handle-variant-button.is-selected { border-color: #D4AF37; background: linear-gradient( 180deg, rgba(25, 67, 96, .98), rgba(13, 39, 58, .98) ); box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .16); } body:not(.door-type-landing) .handle-variant-button.is-unavailable, body:not(.door-type-landing) .handle-variant-button:disabled { opacity: .48; cursor: not-allowed; } @media (max-width: 560px) { body:not(.door-type-landing) .handle-variant-grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } } /* 2026-10-06 HANDLE SUBMENU SIDEBAR REPLACEMENT --------------------------------------------------------- Follow-on choices replace the current sidebar menu. They are never appended beneath the previous choices. --------------------------------------------------------- */ body:not(.door-type-landing) .handle-submenu-back { width: fit-content; min-height: 38px; margin: 0 0 14px; padding: 7px 12px; border: 1px solid rgba(132, 175, 201, .40); border-radius: 5px; background: rgba(8, 31, 48, .72); color: #ffffff; font-size: .8rem; font-weight: 700; line-height: 1; letter-spacing: .025em; } body:not(.door-type-landing) .handle-submenu-back:hover, body:not(.door-type-landing) .handle-submenu-back:focus-visible { border-color: rgba(216, 180, 102, .68); background: rgba(20, 59, 86, .88); color: #ffffff; } body:not(.door-type-landing) .handle-variant-grid--standalone { margin: 0; align-content: start; } body:not(.door-type-landing) .handle-variant-grid--standalone .handle-variant-button { min-height: 62px; } /* The old wrapper is no longer part of the active flow. */ body:not(.door-type-landing) .handle-variant-selector { margin: 0; } /* 2026-10-06 NON-BLOCKING FURNITURE FINISH WARNING */ body:not(.door-type-landing) .hardware-finish-mismatch-notice { margin: 0 0 14px; padding: 11px 12px; display: grid; gap: 4px; border: 1px solid rgba(216, 180, 102, .72); border-radius: 5px; background: linear-gradient( 180deg, rgba(25, 67, 96, .98), rgba(13, 39, 58, .98) ); box-shadow: 0 7px 18px rgba(0, 0, 0, .16); color: #ffffff; } body:not(.door-type-landing) .hardware-finish-mismatch-notice strong { color: #f5d78e; font-size: .82rem; font-weight: 750; letter-spacing: .035em; } body:not(.door-type-landing) .hardware-finish-mismatch-notice span { color: #d8e4eb; font-size: .76rem; line-height: 1.45; } /* 2026-10-06 SECURITY LOCKING HOMEPAGE THEME --------------------------------------------------------- Security & Locking must use the exact established Chester Windows homepage / designer visual language. Styling only — no locking logic is changed. --------------------------------------------------------- */ body:not(.door-type-landing) .security-compatibility-note { width: 100%; max-width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 11px 12px; border: 1px solid rgba(216, 180, 102, .72); border-radius: 5px; background: linear-gradient( 180deg, rgba(25, 67, 96, .98), rgba(13, 39, 58, .98) ); color: #d8e4eb; font-size: .78rem; line-height: 1.45; box-shadow: 0 7px 18px rgba(0, 0, 0, .16); } /* LOCK OPTIONS */ body:not(.door-type-landing) .locking-option-grid { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 14px; overflow: visible; } body:not(.door-type-landing) .locking-option-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; padding: 14px !important; border: 1px solid rgba(125, 166, 192, .30) !important; border-radius: 6px !important; background: linear-gradient( 180deg, #173f5c, #12344d ) !important; color: #ffffff !important; text-align: left; box-shadow: 0 12px 28px rgba(0, 0, 0, .18) !important; overflow: hidden; } body:not(.door-type-landing) .locking-option-card:hover { border-color: rgba(216, 180, 102, .72) !important; background: linear-gradient( 180deg, #194865, #143b55 ) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, .18) !important; } body:not(.door-type-landing) .locking-option-card.is-selected, body:not(.door-type-landing) .locking-option-card.is-selected:hover { border-color: #D4AF37 !important; background: linear-gradient( 180deg, #173f5c, #12344d ) !important; box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .16), 0 12px 28px rgba(0, 0, 0, .18) !important; } body:not(.door-type-landing) .locking-option-card *, body:not(.door-type-landing) .security-included * { min-width: 0; } body:not(.door-type-landing) .locking-option-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; } body:not(.door-type-landing) .locking-option-title { color: #ffffff !important; font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; font-weight: 600; line-height: 1.1; overflow-wrap: anywhere; } body:not(.door-type-landing) .locking-option-subtitle { display: block; margin-bottom: 7px; color: #d8e4eb !important; font-size: .8rem; line-height: 1.42; overflow-wrap: anywhere; } body:not(.door-type-landing) .locking-option-detail { display: block; color: #b8c8d3 !important; font-size: .74rem; line-height: 1.4; overflow-wrap: anywhere; } /* LOCK ICON */ body:not(.door-type-landing) .locking-icon-body { background: #081f30 !important; } body:not(.door-type-landing) .locking-icon-shackle { border-color: #D4AF37 !important; } /* SECURITY INCLUDED */ body:not(.door-type-landing) .security-included { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 14px; border: 1px solid rgba(125, 166, 192, .30); border-radius: 6px; background: rgba(8, 31, 48, .44); box-shadow: none; overflow: hidden; } body:not(.door-type-landing) .security-included-heading { margin-bottom: 11px; color: #ffffff !important; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; font-weight: 600; line-height: 1.15; } body:not(.door-type-landing) .security-included-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; } body:not(.door-type-landing) .security-included-item { display: flex; align-items: center; gap: 8px; color: #b8c8d3 !important; font-size: .76rem; line-height: 1.3; } body:not(.door-type-landing) .security-check { flex: 0 0 auto; color: #D4AF37 !important; font-weight: 800; } /* Prevent legacy security content creating horizontal scroll. */ body:not(.door-type-landing) .locking-option-grid, body:not(.door-type-landing) .locking-option-card, body:not(.door-type-landing) .security-included, body:not(.door-type-landing) .security-included-grid, body:not(.door-type-landing) .security-included-item { max-inline-size: 100%; } /* 2026-10-06 EXPANDED BROCHURE SECURITY DETAILS */ body:not(.door-type-landing) .security-included-intro { margin: -2px 0 14px; color: #b8c8d3; font-size: .76rem; line-height: 1.45; } body:not(.door-type-landing) .security-detail-group + .security-detail-group { margin-top: 15px; padding-top: 14px; border-top: 1px solid rgba(125, 166, 192, .20); } body:not(.door-type-landing) .security-detail-title { margin-bottom: 9px; color: #f5d78e; font-size: .72rem; font-weight: 800; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; } body:not(.door-type-landing) .security-included-item { align-items: flex-start; } body:not(.door-type-landing) .security-included-item strong { color: #ffffff; font-weight: 750; } body:not(.door-type-landing) .security-check { margin-top: 1px; } body:not(.door-type-landing) .security-accreditations { display: grid; grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 7px; margin-top: 15px; padding-top: 14px; border-top: 1px solid rgba(125, 166, 192, .20); } body:not(.door-type-landing) .security-accreditation { min-width: 0; padding: 9px; border: 1px solid rgba(132, 175, 201, .28); border-radius: 5px; background: rgba(8, 31, 48, .44); } body:not(.door-type-landing) .security-accreditation strong { display: block; color: #ffffff; font-size: .7rem; font-weight: 750; line-height: 1.2; } body:not(.door-type-landing) .security-accreditation span { display: block; margin-top: 3px; color: #b8c8d3; font-size: .64rem; line-height: 1.3; } @media (max-width: 560px) { body:not(.door-type-landing) .security-accreditations { grid-template-columns: minmax(0, 1fr); } } /* 2026-10-06 PREMIUM SECURITY SPECIFICATION PANEL --------------------------------------------------------- Security credentials are intentionally prominent. Uses the established homepage navy / gold design language. --------------------------------------------------------- */ body:not(.door-type-landing) .security-included { padding: 0 !important; border: 1px solid rgba(125, 166, 192, .34) !important; background: linear-gradient( 180deg, #102f46, #0b2233 ) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, .16) !important; overflow: hidden; } /* HERO */ body:not(.door-type-landing) .security-spec-hero { padding: 17px 17px 15px; border-bottom: 1px solid rgba(125, 166, 192, .20); background: radial-gradient( circle at 100% 0%, rgba(216, 180, 102, .10), transparent 48% ); } body:not(.door-type-landing) .security-spec-kicker { display: block; margin-bottom: 6px; color: #f5d78e; font-size: .7rem; font-weight: 800; line-height: 1; letter-spacing: .11em; } body:not(.door-type-landing) .security-included-heading { margin: 0 0 7px !important; color: #ffffff !important; font-family: Georgia, "Times New Roman", serif; font-size: 1.28rem !important; font-weight: 600; line-height: 1.08 !important; } body:not(.door-type-landing) .security-included-intro { max-width: 38rem; margin: 0 !important; color: #c6d6e0 !important; font-size: .78rem; line-height: 1.45; } /* CREDENTIAL GRID */ body:not(.door-type-landing) .security-accreditations-primary { display: grid; grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 8px; margin: 0; padding: 14px 15px; border: 0; border-bottom: 1px solid rgba(125, 166, 192, .20); } body:not(.door-type-landing) .security-accreditation { position: relative; min-height: 90px; padding: 11px !important; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(132, 175, 201, .32) !important; border-radius: 5px; background: rgba(8, 31, 48, .52) !important; } body:not(.door-type-landing) .security-accreditation-featured { border-color: rgba(216, 180, 102, .72) !important; background: linear-gradient( 180deg, rgba(25, 67, 96, .96), rgba(13, 39, 58, .96) ) !important; } body:not(.door-type-landing) .security-accreditation-value { display: block; margin-bottom: 5px; color: #f5d78e !important; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem !important; font-weight: 700; line-height: 1; } body:not(.door-type-landing) .security-accreditation strong { display: block; color: #ffffff !important; font-size: .75rem !important; font-weight: 750; line-height: 1.2; } body:not(.door-type-landing) .security-accreditation span:not( .security-accreditation-value ) { display: block; margin-top: 4px; color: #b8c8d3 !important; font-size: .66rem !important; line-height: 1.3; } /* PHYSICAL SECURITY SPEC */ body:not(.door-type-landing) .security-protection-group { margin: 0 !important; padding: 15px 16px 17px !important; border: 0 !important; } body:not(.door-type-landing) .security-detail-title { margin-bottom: 10px; color: #f5d78e !important; font-size: .7rem; font-weight: 800; letter-spacing: .08em; } body:not(.door-type-landing) .security-protection-group .security-included-grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 10px 14px; } body:not(.door-type-landing) .security-protection-group .security-included-item { align-items: flex-start; gap: 7px; color: #b8c8d3 !important; font-size: .72rem; line-height: 1.35; } body:not(.door-type-landing) .security-protection-group .security-included-item strong { color: #ffffff !important; } body:not(.door-type-landing) .security-protection-group .security-check { margin-top: 0; color: #D4AF37 !important; font-size: .9rem; line-height: 1; } /* MOBILE */ @media (max-width: 560px) { body:not(.door-type-landing) .security-accreditations-primary, body:not(.door-type-landing) .security-protection-group .security-included-grid { grid-template-columns: minmax(0, 1fr); } body:not(.door-type-landing) .security-accreditation { min-height: 0; } } /* 2026-10-06 COMPACT DESIGNER SECURITY PANEL --------------------------------------------------------- The designer gives a concise security reassurance. Full product/security detail belongs on doors.html. --------------------------------------------------------- */ body:not(.door-type-landing) .security-included { padding: 0 !important; overflow: hidden; } body:not(.door-type-landing) .security-compact-hero { padding: 15px 16px 12px; } body:not(.door-type-landing) .security-compact-kicker { display: block; margin-bottom: 5px; color: #f5d78e; font-size: .68rem; font-weight: 800; letter-spacing: .10em; line-height: 1; } body:not(.door-type-landing) .security-compact-hero .security-included-heading { margin: 0 0 6px !important; color: #ffffff !important; font-size: 1.12rem !important; } body:not(.door-type-landing) .security-compact-copy { margin: 0; color: #b8c8d3; font-size: .75rem; line-height: 1.4; } body:not(.door-type-landing) .security-compact-credentials { display: grid; grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 6px; padding: 0 16px 13px; } body:not(.door-type-landing) .security-compact-credentials span { min-width: 0; padding: 7px 8px; border: 1px solid rgba(132,175,201,.30); border-radius: 5px; background: rgba(8,31,48,.46); color: #ffffff; font-size: .68rem; font-weight: 750; line-height: 1.2; text-align: center; } body:not(.door-type-landing) .security-compact-spec { padding: 11px 16px; border-top: 1px solid rgba(125,166,192,.18); border-bottom: 1px solid rgba(125,166,192,.18); color: #c5d4de; font-size: .7rem; line-height: 1.55; } body:not(.door-type-landing) .security-compact-spec b { margin: 0 3px; color: #D4AF37; } body:not(.door-type-landing) .security-compact-guarantee { padding: 11px 16px 13px; background: linear-gradient( 180deg, rgba(25,67,96,.72), rgba(13,39,58,.72) ); } body:not(.door-type-landing) .security-compact-guarantee strong { display: block; color: #f5d78e; font-size: .76rem; font-weight: 800; } body:not(.door-type-landing) .security-compact-guarantee span { display: block; margin-top: 2px; color: #b8c8d3; font-size: .66rem; } @media (max-width: 560px) { body:not(.door-type-landing) .security-compact-credentials { grid-template-columns: minmax(0, 1fr); } } /* 2026-10-06 COMPACT SECURITY INFO PANEL */ body:not(.door-type-landing) .security-info-panel { width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid rgba(125,166,192,.30); border-radius: 6px; background: linear-gradient( 180deg, rgba(20,55,80,.78), rgba(9,30,45,.82) ); box-shadow: 0 8px 20px rgba(0,0,0,.12); } body:not(.door-type-landing) .security-info-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 9px; border-bottom: 1px solid rgba(125,166,192,.18); } body:not(.door-type-landing) .security-info-mark { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border: 1px solid rgba(216,180,102,.72); border-radius: 50%; background: rgba(8,31,48,.55); color: #f5d78e; font-size: .9rem; font-weight: 800; } body:not(.door-type-landing) .security-info-kicker { display: block; margin-bottom: 2px; color: #f5d78e; font-size: .62rem; font-weight: 800; letter-spacing: .09em; line-height: 1; } body:not(.door-type-landing) .security-info-heading strong { display: block; color: #ffffff; font-family: Georgia, "Times New Roman", serif; font-size: .95rem; font-weight: 600; line-height: 1.15; } body:not(.door-type-landing) .security-info-list { display: grid; grid-template-columns: repeat( 2, minmax(0,1fr) ); gap: 7px 12px; } body:not(.door-type-landing) .security-info-item { min-width: 0; display: flex; align-items: flex-start; gap: 7px; padding: 6px 0; } body:not(.door-type-landing) .security-info-item > span { flex: 0 0 auto; margin-top: 1px; color: #D4AF37; font-size: .72rem; font-weight: 800; } body:not(.door-type-landing) .security-info-item p { min-width: 0; margin: 0; color: #aebfca; font-size: .65rem; line-height: 1.3; } body:not(.door-type-landing) .security-info-item strong { display: block; margin-bottom: 1px; color: #ffffff; font-size: .7rem; font-weight: 750; line-height: 1.25; } @media (max-width: 460px) { body:not(.door-type-landing) .security-info-list { grid-template-columns: minmax(0,1fr); } } /* 2026-10-06 SECURITY SUMMARY PANEL V2 */ body:not(.door-type-landing) .security-included { padding: 0 !important; overflow: hidden; } body:not(.door-type-landing) .security-summary-panel { width: 100%; box-sizing: border-box; } body:not(.door-type-landing) .security-summary-head { padding: 14px 16px 12px; border-bottom: 1px solid rgba(125,166,192,.20); background: radial-gradient( circle at 100% 0%, rgba(216,180,102,.09), transparent 48% ); } body:not(.door-type-landing) .security-summary-kicker { display: block; margin-bottom: 4px; color: #f5d78e; font-size: .63rem; font-weight: 800; letter-spacing: .10em; line-height: 1; } body:not(.door-type-landing) .security-summary-head > strong { display: block; margin-bottom: 5px; color: #ffffff; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; font-weight: 600; line-height: 1.15; } body:not(.door-type-landing) .security-summary-head p { max-width: 38rem; margin: 0; color: #b8c8d3; font-size: .72rem; line-height: 1.42; } body:not(.door-type-landing) .security-summary-grid { display: grid; grid-template-columns: repeat( 2, minmax(0,1fr) ); gap: 0; padding: 7px 16px 10px; } body:not(.door-type-landing) .security-summary-item { min-width: 0; display: flex; align-items: flex-start; gap: 8px; padding: 8px 8px 8px 0; } body:not(.door-type-landing) .security-summary-check { flex: 0 0 auto; margin-top: 1px; color: #D4AF37; font-size: .78rem; font-weight: 900; line-height: 1.1; } body:not(.door-type-landing) .security-summary-item strong { display: block; margin-bottom: 2px; color: #ffffff; font-size: .7rem; font-weight: 750; line-height: 1.22; } body:not(.door-type-landing) .security-summary-item div > span:last-child { display: block; color: #aebfca; font-size: .64rem; line-height: 1.32; } @media (max-width: 480px) { body:not(.door-type-landing) .security-summary-grid { grid-template-columns: minmax(0,1fr); } } /* 2026-10-06 EMPTY STEP DESCRIPTION COLLAPSE */ body:not(.door-type-landing) .options-header p:last-child:empty { display: none; margin: 0; } /* 2026-10-06 FACTUAL SECURITY SPEC PANEL */ body:not(.door-type-landing) .security-included { padding: 0 !important; overflow: hidden; } body:not(.door-type-landing) .security-facts-panel { width: 100%; box-sizing: border-box; } body:not(.door-type-landing) .security-facts-heading { padding: 13px 15px 11px; border-bottom: 1px solid rgba(125,166,192,.20); } body:not(.door-type-landing) .security-facts-heading > span { display: block; margin-bottom: 4px; color: #f5d78e; font-size: .62rem; font-weight: 800; letter-spacing: .09em; } body:not(.door-type-landing) .security-facts-heading > strong { display: block; color: #ffffff; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; font-weight: 600; line-height: 1.15; } body:not(.door-type-landing) .security-facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 13px; padding: 7px 15px 10px; } body:not(.door-type-landing) .security-fact { min-width: 0; display: flex; align-items: flex-start; gap: 7px; padding: 7px 0; } body:not(.door-type-landing) .security-fact-check { flex: 0 0 auto; color: #D4AF37; font-size: .78rem; font-weight: 900; line-height: 1.2; } body:not(.door-type-landing) .security-fact strong { display: block; color: #ffffff; font-size: .69rem; font-weight: 750; line-height: 1.2; } body:not(.door-type-landing) .security-fact small { display: block; margin-top: 2px; color: #aebfca; font-size: .62rem; line-height: 1.28; } body:not(.door-type-landing) .security-facts-guarantee { padding: 10px 15px 11px; border-top: 1px solid rgba(216,180,102,.30); background: linear-gradient( 180deg, rgba(25,67,96,.75), rgba(13,39,58,.75) ); } body:not(.door-type-landing) .security-facts-guarantee strong { display: block; color: #f5d78e; font-size: .74rem; font-weight: 800; } body:not(.door-type-landing) .security-facts-guarantee span { display: block; margin-top: 2px; color: #c0d0da; font-size: .63rem; } @media (max-width: 480px) { body:not(.door-type-landing) .security-facts-grid { grid-template-columns: minmax(0,1fr); } } /* 2026-10-06 SECURITY PANEL FULL CONTENT HEIGHT --------------------------------------------------------- Never crop the security specification. The options sidebar may scroll naturally when required. --------------------------------------------------------- */ body:not(.door-type-landing) .security-included, body:not(.door-type-landing) .security-facts-panel { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } body:not(.door-type-landing) .security-facts-grid { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; align-content: start; } body:not(.door-type-landing) .security-fact, body:not(.door-type-landing) .security-facts-guarantee { height: auto !important; max-height: none !important; overflow: visible !important; } body:not(.door-type-landing) .security-included { margin-bottom: 22px; } /* * Keep the last security content comfortably clear of * the fixed Back / Continue navigation while scrolling. */ body:not(.door-type-landing) .security-facts-guarantee { padding-bottom: 13px; } /* 2026-10-06 SECURITY FACTS SINGLE PANEL --------------------------------------------------------- The legacy security-included wrapper must not draw its own partial box. The actual facts panel owns the complete border/background and grows naturally with all content. --------------------------------------------------------- */ body:not(.door-type-landing) .security-included { height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin-bottom: 22px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } body:not(.door-type-landing) .security-facts-panel { width: 100%; height: auto !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box; border: 1px solid rgba(125,166,192,.30); border-radius: 6px; background: linear-gradient( 180deg, #143850, #0b2233 ); box-shadow: 0 10px 24px rgba(0,0,0,.14); overflow: hidden !important; } body:not(.door-type-landing) .security-facts-heading { background: rgba(19,59,84,.38); } body:not(.door-type-landing) .security-facts-guarantee { margin: 0; border-top: 1px solid rgba(216,180,102,.34); border-radius: 0; background: linear-gradient( 180deg, rgba(25,67,96,.92), rgba(13,39,58,.92) ); } /* 2026-10-06 REVIEW EDIT TEXT LINK */ body:not(.door-type-landing) .door-review-edit { width: auto !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--navy) !important; font: inherit !important; font-size: .72rem !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-decoration: underline !important; text-underline-offset: 2px; cursor: pointer; } body:not(.door-type-landing) .door-review-edit:hover, body:not(.door-type-landing) .door-review-edit:focus-visible { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #0A2540 !important; text-decoration-thickness: 2px !important; } /* 2026-10-06 REVIEW EDIT BACK TO FINISH */ body.review-edit-mode .designer-actions { grid-template-columns: minmax(0, 1fr) !important; } body.review-edit-mode #backButton { display: none !important; } body.review-edit-mode #continueButton { width: 100% !important; max-width: none !important; flex: 1 1 100% !important; grid-column: 1 / -1 !important; } /* 2026-10-06 INLINE INTERIOR COLOUR MATCH --------------------------------------------------------- Interior-match choice becomes part of the colour grid. On the 4-column desktop grid it occupies the two spaces beside the final two colour cards. --------------------------------------------------------- */ body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-match-option { grid-column: span 2; align-self: stretch; min-width: 0; min-height: 104px; margin: 0 !important; padding: 12px 15px !important; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid rgba(212,175,55,.72) !important; border-radius: 6px; background: linear-gradient( 180deg, #173f5c, #12344d ) !important; box-shadow: 0 8px 18px rgba(0,0,0,.14); color: #ffffff !important; cursor: pointer; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-match-option:hover { border-color: #F5D78E !important; background: linear-gradient( 180deg, #194765, #143a55 ) !important; } /* Checkbox */ body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-checkbox-wrap { position: relative; flex: 0 0 24px; width: 24px; height: 24px; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-checkbox-ui { position: absolute; inset: 0; box-sizing: border-box; border: 1px solid #D4AF37 !important; border-radius: 3px; background: #0b2233 !important; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-checkbox:checked + .inside-colour-checkbox-ui { background: #D4AF37 !important; border-color: #D4AF37 !important; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-checkbox:checked + .inside-colour-checkbox-ui::after { border-color: #0A2540 !important; } /* Copy */ body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-title { margin: 0 0 3px !important; color: #ffffff !important; font-family: Georgia, "Times New Roman", serif; font-size: .82rem !important; font-weight: 600; line-height: 1.15; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-help { color: #b8c8d3 !important; font-size: .66rem !important; line-height: 1.25; } /* * 3-column responsive layout: * allow the option to take two cells. */ @media (max-width: 850px) { body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-match-option { grid-column: span 2; } } /* * 2-column mobile layout: * use the full row rather than squeezing the copy. */ @media (max-width: 560px) { body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-match-option { grid-column: 1 / -1; min-height: 76px; } } /* 2026-10-06 COMPACT COLOUR STEP HEIGHT --------------------------------------------------------- Tighten only the exterior-colour screen. The :has() scope prevents these dimensions affecting Glass, Frame or any other thumbnail grids. --------------------------------------------------------- */ body:not(.door-type-landing) .colour-thumbnail-grid:has(.inside-colour-match-option) { column-gap: 8px !important; row-gap: 8px !important; } /* Shorten the colour swatch area slightly */ body:not(.door-type-landing) .colour-thumbnail-grid:has(.inside-colour-match-option) .colour-thumbnail-media { height: 72px !important; aspect-ratio: auto !important; } /* Compact the name strip */ body:not(.door-type-landing) .colour-thumbnail-grid:has(.inside-colour-match-option) .colour-thumbnail-footer { min-height: 34px !important; padding: 6px 8px !important; } body:not(.door-type-landing) .colour-thumbnail-grid:has(.inside-colour-match-option) .colour-thumbnail-name { font-size: .76rem !important; line-height: 1.05 !important; } /* Keep the match-interior card aligned with the colour cards */ body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-match-option { min-height: 108px !important; padding: 9px 12px !important; gap: 9px !important; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-checkbox-wrap { flex-basis: 22px !important; width: 22px !important; height: 22px !important; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-title { font-size: .76rem !important; line-height: 1.08 !important; margin-bottom: 2px !important; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-help { font-size: .61rem !important; line-height: 1.18 !important; } /* 2026-10-06 COMPACT COLOUR STEP HEIGHT --------------------------------------------------------- Tighten only the exterior-colour screen. The :has() scope prevents these dimensions affecting Glass, Frame or any other thumbnail grids. --------------------------------------------------------- */ body:not(.door-type-landing) .colour-thumbnail-grid:has(.inside-colour-match-option) { column-gap: 8px !important; row-gap: 8px !important; } /* Shorten the colour swatch area slightly */ body:not(.door-type-landing) .colour-thumbnail-grid:has(.inside-colour-match-option) .colour-thumbnail-media { height: 72px !important; aspect-ratio: auto !important; } /* Compact the name strip */ body:not(.door-type-landing) .colour-thumbnail-grid:has(.inside-colour-match-option) .colour-thumbnail-footer { min-height: 34px !important; padding: 6px 8px !important; } body:not(.door-type-landing) .colour-thumbnail-grid:has(.inside-colour-match-option) .colour-thumbnail-name { font-size: .76rem !important; line-height: 1.05 !important; } /* Keep the match-interior card aligned with the colour cards */ body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-match-option { min-height: 108px !important; padding: 9px 12px !important; gap: 9px !important; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-checkbox-wrap { flex-basis: 22px !important; width: 22px !important; height: 22px !important; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-title { font-size: .76rem !important; line-height: 1.08 !important; margin-bottom: 2px !important; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-help { font-size: .61rem !important; line-height: 1.18 !important; } /* 2026-10-06 COLOUR STEP FIT VIEWPORT --------------------------------------------------------- Compact ONLY the exterior-colour stage enough to fit comfortably above the fixed Back / Continue controls. --------------------------------------------------------- */ /* Tighter top area */ body:not(.door-type-landing) .designer-options:has(.inside-colour-match-option) .options-header { padding-top: 14px !important; padding-bottom: 10px !important; } body:not(.door-type-landing) .designer-options:has(.inside-colour-match-option) #optionsBackButton { min-height: 38px !important; height: 38px !important; padding: 0 14px !important; margin-bottom: 9px !important; font-size: .78rem !important; } body:not(.door-type-landing) .designer-options:has(.inside-colour-match-option) #stepTitle { margin-top: 0 !important; margin-bottom: 7px !important; font-size: 1.55rem !important; line-height: 1.05 !important; } body:not(.door-type-landing) .designer-options:has(.inside-colour-match-option) #stepDescription { margin: 0 !important; font-size: .78rem !important; line-height: 1.4 !important; } /* Pull the grid closer to the heading */ body:not(.door-type-landing) .designer-options:has(.inside-colour-match-option) .options-panel { padding-top: 9px !important; } body:not(.door-type-landing) .colour-thumbnail-grid:has(.inside-colour-match-option) { column-gap: 8px !important; row-gap: 8px !important; } /* Shorter colour cards */ body:not(.door-type-landing) .colour-thumbnail-grid:has(.inside-colour-match-option) .colour-thumbnail-media { height: 58px !important; min-height: 58px !important; aspect-ratio: auto !important; } body:not(.door-type-landing) .colour-thumbnail-grid:has(.inside-colour-match-option) .colour-thumbnail-footer { min-height: 29px !important; height: 29px !important; padding: 4px 7px !important; box-sizing: border-box; } body:not(.door-type-landing) .colour-thumbnail-grid:has(.inside-colour-match-option) .colour-thumbnail-name { font-size: .70rem !important; line-height: 1 !important; } /* Match-interior panel = same compact row height */ body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-match-option { min-height: 87px !important; height: 87px !important; padding: 8px 11px !important; gap: 9px !important; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-checkbox-wrap { flex: 0 0 20px !important; width: 20px !important; height: 20px !important; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-title { font-size: .69rem !important; line-height: 1.05 !important; margin: 0 0 2px !important; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-help { font-size: .57rem !important; line-height: 1.12 !important; } /* 2026-10-06 INTERIOR MATCH COPY POLISH */ body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-title { font-size: .78rem !important; line-height: 1.08 !important; font-weight: 700 !important; margin-bottom: 4px !important; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-help { font-size: .66rem !important; line-height: 1.2 !important; } body:not(.door-type-landing) .colour-thumbnail-grid .inside-colour-checkbox-wrap { flex-basis: 22px !important; width: 22px !important; height: 22px !important; } /* 2026-10-06 FINAL SCREEN COMPLETION PANEL --------------------------------------------------------- Bring the remaining legacy completion panel into the approved Chester Windows homepage/designer theme. Action cards are deliberately left untouched. --------------------------------------------------------- */ /* Final-step introductory description */ body:not(.door-type-landing) .designer-options:has(.final-actions) #stepDescription { color: #b8c8d3 !important; } /* Completion panel */ body:not(.door-type-landing) .final-actions-intro { padding: 13px 15px !important; border: 1px solid rgba(212,175,55,.48) !important; border-radius: 6px; background: linear-gradient( 180deg, #173f5c, #12344d ) !important; box-shadow: 0 10px 24px rgba(0,0,0,.14); } /* Gold/blue completion tick */ body:not(.door-type-landing) .final-actions-ready-mark { flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid rgba(212,175,55,.75); border-radius: 4px; background: #0A2540 !important; color: #F5D78E !important; font-size: .9rem !important; font-weight: 800 !important; } /* Completion copy */ body:not(.door-type-landing) .final-actions-intro-copy { gap: 3px !important; color: #b8c8d3 !important; font-size: .69rem !important; line-height: 1.35 !important; } body:not(.door-type-landing) .final-actions-intro-copy strong { color: #ffffff !important; font-family: Georgia, "Times New Roman", serif; font-size: .86rem !important; font-weight: 600 !important; line-height: 1.2 !important; } body:not(.door-type-landing) .final-actions-intro-copy > span { color: #b8c8d3 !important; } /* 2026-10-06 REVISITABLE JOURNEY HOVER --------------------------------------------------------- Give clear feedback only on completed stages that can actually be revisited. --------------------------------------------------------- */ body:not(.door-type-landing) .journey-nav li.is-complete:not(.is-current) { transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease, transform .14s ease; } body:not(.door-type-landing) .journey-nav li.is-complete:not(.is-current):hover { background: linear-gradient( 180deg, #194765, #143a55 ) !important; border-color: rgba(212,175,55,.82) !important; color: #ffffff !important; box-shadow: 0 0 0 1px rgba(212,175,55,.12), 0 6px 14px rgba(0,0,0,.16); transform: translateX(2px); cursor: pointer; } body:not(.door-type-landing) .journey-nav li.is-complete:not(.is-current):focus-visible { background: linear-gradient( 180deg, #194765, #143a55 ) !important; border-color: #D4AF37 !important; color: #ffffff !important; } /* 2026-10-06 PREMIUM FINAL ACTION CARDS --------------------------------------------------------- Refine the final three actions without changing their markup, behaviour or click handling. --------------------------------------------------------- */ /* --------------------------------------------------------- CARD SURFACE --------------------------------------------------------- */ body:not(.door-type-landing) .final-action-card { min-height: 96px !important; padding: 14px 16px !important; grid-template-columns: 48px minmax(0, 1fr) 36px !important; gap: 14px !important; border: 1px solid rgba(212,175,55,.64) !important; border-radius: 6px !important; background: linear-gradient( 135deg, #173f5c 0%, #12344d 58%, #0f2c42 100% ) !important; color: #ffffff !important; box-shadow: 0 10px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035); overflow: hidden; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; } body:not(.door-type-landing) .final-action-card:hover { transform: translateY(-2px) !important; border-color: #F5D78E !important; background: linear-gradient( 135deg, #1a4868 0%, #153b57 58%, #113149 100% ) !important; box-shadow: 0 14px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(212,175,55,.09), inset 0 1px 0 rgba(255,255,255,.045); } /* --------------------------------------------------------- PREMIUM ICON TILE --------------------------------------------------------- */ body:not(.door-type-landing) .final-action-icon { position: relative; display: flex !important; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; border: 1px solid rgba(212,175,55,.60); border-radius: 8px; background: linear-gradient( 145deg, rgba(212,175,55,.14), rgba(212,175,55,.035) ); color: #F5D78E !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 5px 12px rgba(0,0,0,.15); transition: border-color .16s ease, background .16s ease, transform .16s ease; } body:not(.door-type-landing) .final-action-card:hover .final-action-icon { border-color: #D4AF37; background: linear-gradient( 145deg, rgba(212,175,55,.22), rgba(212,175,55,.07) ); transform: translateY(-1px); } body:not(.door-type-landing) .final-action-icon svg { width: 24px !important; height: 24px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.7 !important; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow( 0 1px 1px rgba(0,0,0,.25) ); } /* --------------------------------------------------------- COPY --------------------------------------------------------- */ body:not(.door-type-landing) .final-action-content { gap: 5px !important; } body:not(.door-type-landing) .final-action-content strong { color: #ffffff !important; font-size: .96rem !important; font-weight: 600 !important; line-height: 1.16 !important; } body:not(.door-type-landing) .final-action-content span { color: #b8c8d3 !important; font-size: .69rem !important; line-height: 1.38 !important; } /* --------------------------------------------------------- REPLACE BASIC → WITH A PROPER CHEVRON CONTROL --------------------------------------------------------- */ body:not(.door-type-landing) .final-action-arrow { position: relative; justify-self: end; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; box-sizing: border-box; border: 1px solid rgba(212,175,55,.58); border-radius: 50%; background: rgba(10,37,64,.56); color: transparent !important; font-size: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); transition: background .16s ease, border-color .16s ease, transform .16s ease; } body:not(.door-type-landing) .final-action-arrow::before { content: ""; width: 7px; height: 7px; border-top: 2px solid #F5D78E; border-right: 2px solid #F5D78E; transform: rotate(45deg) translate(-1px, 1px); transform-origin: center; } body:not(.door-type-landing) .final-action-card:hover .final-action-arrow { border-color: #F5D78E; background: rgba(212,175,55,.13); transform: translateX(2px); } /* --------------------------------------------------------- HOME PREVIEW BADGE — MAKE IT FEEL INTEGRATED --------------------------------------------------------- */ body:not(.door-type-landing) .final-action-badge { top: 0 !important; right: 14px !important; padding: 5px 9px !important; border-radius: 0 0 4px 4px !important; background: linear-gradient( 180deg, #F5D78E, #D4AF37 ) !important; color: #0A2540 !important; box-shadow: 0 3px 8px rgba(0,0,0,.18); font-size: .54rem !important; font-weight: 900 !important; letter-spacing: .075em !important; } /* --------------------------------------------------------- KEYBOARD FOCUS --------------------------------------------------------- */ body:not(.door-type-landing) .final-action-card:focus-visible { outline: 2px solid #F5D78E !important; outline-offset: 3px !important; } /* Keep compact screens sensible */ @media (max-width: 560px) { body:not(.door-type-landing) .final-action-card { grid-template-columns: 42px minmax(0, 1fr) 30px !important; gap: 10px !important; padding: 12px !important; } body:not(.door-type-landing) .final-action-icon { width: 40px !important; height: 40px !important; } body:not(.door-type-landing) .final-action-arrow { width: 28px; height: 28px; } } /* 2026-10-06 TRUST STANDARD FINAL ACTION ICONS --------------------------------------------------------- Bespoke final-action artwork built to the same visual standard as the locked homepage Trust section. --------------------------------------------------------- */ body:not(.door-type-landing) .final-action-icon { width: 48px !important; height: 48px !important; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #D4AF37 !important; } body:not(.door-type-landing) .final-action-icon img { display: block; width: 46px; height: 46px; object-fit: contain; object-position: center; filter: drop-shadow( 0 4px 8px rgba(0,0,0,.20) ); transition: transform .18s ease, filter .18s ease; } body:not(.door-type-landing) .final-action-card:hover .final-action-icon img { transform: translateY(-2px) scale(1.035); filter: drop-shadow( 0 6px 11px rgba(0,0,0,.25) ); } /* Give the bespoke artwork enough breathing room */ body:not(.door-type-landing) .final-action-card { grid-template-columns: 54px minmax(0,1fr) 34px !important; gap: 14px !important; } /* --------------------------------------------------------- REPLACE THE LITERAL → WITH A PROPER NAVIGATION DETAIL --------------------------------------------------------- */ body:not(.door-type-landing) .final-action-arrow { position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; justify-self: end; box-sizing: border-box; border: 1px solid rgba(212,175,55,.55); border-radius: 50%; background: rgba(10,37,64,.45); color: transparent !important; font-size: 0 !important; transition: border-color .18s ease, background .18s ease, transform .18s ease; } body:not(.door-type-landing) .final-action-arrow::before { content: ""; width: 7px; height: 7px; border-top: 2px solid #F5D78E; border-right: 2px solid #F5D78E; transform: rotate(45deg) translate(-1px, 1px); } body:not(.door-type-landing) .final-action-card:hover .final-action-arrow { border-color: #F5D78E; background: rgba(212,175,55,.12); transform: translateX(2px); } @media (max-width: 560px) { body:not(.door-type-landing) .final-action-card { grid-template-columns: 46px minmax(0,1fr) 30px !important; gap: 10px !important; } body:not(.door-type-landing) .final-action-icon { width: 42px !important; height: 42px !important; } body:not(.door-type-landing) .final-action-icon img { width: 40px; height: 40px; } } /* 2026-10-06 LARGE PREMIUM FINAL MEDALLIONS --------------------------------------------------------- These are detailed Trust-standard medallions, not small utility icons. Give them enough size for the artwork to remain visible and worthwhile. --------------------------------------------------------- */ body:not(.door-type-landing) .final-action-card { grid-template-columns: 76px minmax(0,1fr) 34px !important; gap: 14px !important; min-height: 112px !important; } body:not(.door-type-landing) .final-action-icon { width: 70px !important; height: 70px !important; flex: 0 0 70px !important; } body:not(.door-type-landing) .final-action-icon img { width: 68px !important; height: 68px !important; object-fit: contain !important; object-position: center !important; filter: drop-shadow( 0 5px 9px rgba(0,0,0,.24) ) !important; } body:not(.door-type-landing) .final-action-card:hover .final-action-icon img { transform: translateY(-2px) scale(1.025) !important; } @media (max-width: 560px) { body:not(.door-type-landing) .final-action-card { grid-template-columns: 62px minmax(0,1fr) 30px !important; gap: 10px !important; min-height: 100px !important; } body:not(.door-type-landing) .final-action-icon { width: 58px !important; height: 58px !important; flex-basis: 58px !important; } body:not(.door-type-landing) .final-action-icon img { width: 56px !important; height: 56px !important; } } /* 2026-10-06 HOME PREVIEW ENQUIRY PREMIUM THEME --------------------------------------------------------- Exact Chester Windows navy / gold visual system. Enquiry behaviour and Home Preview logic are unchanged. --------------------------------------------------------- */ /* Backdrop */ body:not(.door-type-landing) .designer-enquiry-modal { background: rgba(4, 17, 28, .82) !important; backdrop-filter: blur(7px) !important; } /* Main modal */ body:not(.door-type-landing) .designer-enquiry-dialog { width: min(100%, 500px) !important; padding: 30px 30px 26px !important; box-sizing: border-box; border: 1px solid rgba(212,175,55,.55) !important; border-radius: 8px !important; background: radial-gradient( circle at 50% 0%, rgba(36,88,122,.18), transparent 42% ), #0b1824 !important; box-shadow: 0 28px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(212,175,55,.05) !important; color: #ffffff !important; } /* Gold top accent */ body:not(.door-type-landing) .designer-enquiry-dialog::before { content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 3px; border-radius: 0 0 999px 999px; background: linear-gradient( 90deg, #D4AF37, #F5D78E ); } /* Close */ body:not(.door-type-landing) .designer-enquiry-close { top: 13px !important; right: 15px !important; width: 32px !important; height: 32px !important; border: 1px solid rgba(125,166,192,.30) !important; border-radius: 50% !important; background: rgba(18,52,77,.75) !important; color: #ffffff !important; font-size: 1.15rem !important; font-weight: 400 !important; transition: border-color .16s ease, background .16s ease, color .16s ease; } body:not(.door-type-landing) .designer-enquiry-close:hover { border-color: #D4AF37 !important; background: #173f5c !important; color: #F5D78E !important; } /* Kicker */ body:not(.door-type-landing) .designer-enquiry-kicker { margin-bottom: 6px !important; color: #F5D78E !important; font-size: .64rem !important; font-weight: 850 !important; letter-spacing: .11em !important; } /* Heading */ body:not(.door-type-landing) .designer-enquiry-title { margin: 0 46px 9px 0 !important; color: #ffffff !important; font-family: Georgia, "Times New Roman", serif; font-size: 1.75rem !important; font-weight: 600 !important; line-height: 1.08 !important; } /* Intro */ body:not(.door-type-landing) .designer-enquiry-intro { margin: 0 0 22px !important; max-width: 430px; color: #b8c8d3 !important; font-size: .79rem !important; line-height: 1.55 !important; } /* Form */ body:not(.door-type-landing) .designer-enquiry-form { gap: 14px !important; } /* Labels */ body:not(.door-type-landing) .designer-enquiry-field { gap: 6px !important; } body:not(.door-type-landing) .designer-enquiry-field > span { color: #ffffff !important; font-size: .69rem !important; font-weight: 750 !important; } /* Inputs */ body:not(.door-type-landing) .designer-enquiry-field input { width: 100% !important; height: 46px !important; padding: 0 13px !important; border: 1px solid rgba(125,166,192,.38) !important; border-radius: 6px !important; background: linear-gradient( 180deg, #143850, #102f46 ) !important; color: #ffffff !important; caret-color: #F5D78E !important; font-size: .82rem !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; } body:not(.door-type-landing) .designer-enquiry-field input:hover { border-color: rgba(212,175,55,.48) !important; } body:not(.door-type-landing) .designer-enquiry-field input:focus { border-color: #D4AF37 !important; background: #143b56 !important; box-shadow: 0 0 0 3px rgba(212,175,55,.10) !important; outline: none !important; } /* Browser autofill */ body:not(.door-type-landing) .designer-enquiry-field input:-webkit-autofill, body:not(.door-type-landing) .designer-enquiry-field input:-webkit-autofill:hover, body:not(.door-type-landing) .designer-enquiry-field input:-webkit-autofill:focus { -webkit-text-fill-color: #ffffff !important; -webkit-box-shadow: 0 0 0 1000px #143850 inset !important; caret-color: #F5D78E !important; } /* Error panel */ body:not(.door-type-landing) .designer-enquiry-error { padding: 10px 12px !important; border: 1px solid rgba(220,90,90,.46) !important; border-radius: 6px !important; background: rgba(121,35,35,.20) !important; color: #ffd1d1 !important; font-size: .69rem !important; line-height: 1.4 !important; } /* Main CTA */ body:not(.door-type-landing) .designer-enquiry-submit { min-height: 48px !important; padding: 12px 18px !important; border: 1px solid #D4AF37 !important; border-radius: 6px !important; background: linear-gradient( 180deg, #173f5c, #12344d ) !important; color: #ffffff !important; font-family: Georgia, "Times New Roman", serif !important; font-size: .82rem !important; font-weight: 700 !important; letter-spacing: .01em; box-shadow: 0 8px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03); transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease; } body:not(.door-type-landing) .designer-enquiry-submit:hover:not(:disabled) { border-color: #F5D78E !important; background: linear-gradient( 180deg, #194765, #143a55 ) !important; transform: translateY(-1px); box-shadow: 0 11px 24px rgba(0,0,0,.22); } body:not(.door-type-landing) .designer-enquiry-submit:disabled { opacity: .55 !important; cursor: wait !important; transform: none !important; } /* Privacy / linking note */ body:not(.door-type-landing) .designer-enquiry-note { margin: 2px 0 0 !important; color: #91a8b7 !important; font-size: .62rem !important; line-height: 1.45 !important; text-align: center; } /* Mobile */ @media (max-width: 560px) { body:not(.door-type-landing) .designer-enquiry-modal { align-items: end !important; padding: 12px !important; } body:not(.door-type-landing) .designer-enquiry-dialog { width: 100% !important; max-height: calc(100vh - 24px) !important; padding: 27px 18px 20px !important; border-radius: 8px !important; } body:not(.door-type-landing) .designer-enquiry-dialog::before { left: 18px; right: 18px; } body:not(.door-type-landing) .designer-enquiry-title { font-size: 1.48rem !important; } body:not(.door-type-landing) .designer-enquiry-intro { font-size: .75rem !important; } body:not(.door-type-landing) .designer-enquiry-field input { height: 44px !important; } }