/* ========================================================================== BAKKAR PRINTING — THEME "MOMENTUM" pages/contact.css — contact.html only. -------------------------------------------------------------------------- OWNED BY: the contact-page agent. Everything here is namespaced `.ct-*` so it can never leak into another page. Anything that already exists in components.css / base.css (.btn, .field, .input, .social, .badge, .form-note, .spinner, .sec-head, .page-head--slim) is REUSED, not re-invented. THE PAGE, IN ORDER slim page head -> SEND US A MESSAGE the form, with the ASIDE beside it (business hours · follow us · the RFQ steer) -> TALK TO THE FACTORY the bento: one tall red WhatsApp tile, plus call / email / visit -> the closing RFQ band. There is NO map section. The address still appears once, on the bento's visit tile, where the Google Maps link carries the real coordinates — no third-party map script is ever loaded. COLOUR: every value resolves through a token from tokens.css, so the page is automatically correct under . The only literal colours are white-on-white overlays INSIDE the always-red WhatsApp tile, which is the same red gradient in both themes — a theme-flipping token there would be a bug, not a fix. RTL: logical properties only. No physical left/right/float anywhere; the two `translateX` hover nudges are transforms, which have no logical form and are mirrored explicitly. ========================================================================== */ /* ========================================================================== 0. DEFENSIVE SHIM — the outline button has no outline. -------------------------------------------------------------------------- components.css builds the button frame as box-shadow: inset 0 0 0 1px var(--btn-bd), var(--btn-sh); and `.btn--outline` sets --btn-bd but never sets --btn-sh, so --btn-sh keeps the `.btn` default of `none`. A box-shadow LIST may not contain `none` — `inset 0 0 0 1px #DDE0E6, none` is invalid, the whole declaration is dropped, and the hairline never paints. Verified in Chrome: getComputedStyle($('.btn--outline')).boxShadow === 'none' The button renders as bare floating text — "Open in Google Maps" on the visit tile, "Send another message" on the success panel. Scoped to this page's two outline buttons; it restores exactly what the markup already asks for. The moment components.css gives .btn--outline a real --btn-sh this becomes a no-op. FLAGGED FOR FOUNDATION: the proper fix is `--btn-sh: 0 0 #0000;` on `.btn`. ========================================================================== */ .ct-tile .btn--outline, .ct-success__again { box-shadow: inset 0 0 0 1px var(--btn-bd); } .ct-tile .btn--outline:hover, .ct-success__again:hover { box-shadow: inset 0 0 0 1px var(--btn-bd), var(--sh-2); } /* ========================================================================== 1. FORM + ASIDE -------------------------------------------------------------------------- One column below 1024px (form, then the three aside cards); two columns above it, with the aside sticking to the top of the viewport while the long form scrolls past. ========================================================================== */ .ct-main__grid { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 1024px) { .ct-main__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1.5rem, 0.9rem + 1.8vw, 2.5rem); } } /* ---- the form card ---- */ .ct-form-card { position: relative; min-inline-size: 0; padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem); border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--sh-4), var(--sh-ring); /* The success panel's palette. tokens.css has no "soft green surface", and --ok-50 is a light mint that would burn a hole in a dark page — so the two values the panel needs are declared here and flipped for dark. Both ends are tokens; neither is a literal. */ --ct-ok: var(--ok-700); /* 4.6:1 on the mint */ --ct-ok-bg: var(--ok-50); } :root[data-theme="dark"] .ct-form-card { --ct-ok: var(--ok-500); /* 6.4:1 on --surface-2 */ --ct-ok-bg: var(--surface-2); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .ct-form-card { --ct-ok: var(--ok-500); --ct-ok-bg: var(--surface-2); } } /* A hairline of brand along the top edge — the one flourish on the card. */ .ct-form-card::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem); block-size: 3px; border-radius: 0 0 var(--r-pill) var(--r-pill); background: var(--grad-hot); } .ct-form-card__head { margin-block-end: var(--sp-8); } .ct-form-card__title { margin-block-start: var(--sp-3); font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--text); } .ct-form-card__sub { margin-block-start: var(--sp-3); max-inline-size: 52ch; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.65; } .ct-form[hidden] { display: none; } /* A phone / email field always types LTR. In an Arabic layout we align it to its own inline end so the caret still sits where the eye expects it. */ .ct-form__ltr { font-family: var(--font-num); } [dir="rtl"] .ct-form__ltr { text-align: end; } /* The reassurance next to the submit button. */ .ct-form__reply { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ct-ok); font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ct-form__reply svg { inline-size: 14px; block-size: 14px; flex: none; } .ct-form__note { margin-block-start: var(--sp-5); } /* ---- the success state (the toast is the primary signal; this is the persistent, keyboard-reachable confirmation) ---- */ .ct-success { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-6); border-radius: var(--r-xl); background: var(--ct-ok-bg); box-shadow: inset 0 0 0 1px var(--ok-500); animation: ct-pop var(--d-slow) var(--e-spring) both; } .ct-success[hidden] { display: none; } .ct-success__icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; flex: none; border-radius: var(--r-circle); background: var(--ok-500); color: var(--ink-950); /* 9:1 on the green — white would be 2.5:1 */ } .ct-success__icon svg { inline-size: 20px; block-size: 20px; } .ct-success__text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; flex: 1 1 14rem; } .ct-success__title { font-size: var(--fs-md); font-weight: var(--fw-heavy); color: var(--ct-ok); } .ct-success__body { font-size: var(--fs-sm); color: var(--text-2); } .ct-success__again { flex: none; } @keyframes ct-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } } /* ========================================================================== 2. THE ASIDE CARDS — business hours · follow us · the RFQ steer ========================================================================== */ .ct-aside { display: flex; flex-direction: column; gap: var(--grid-gap); min-inline-size: 0; } @media (min-width: 1024px) { .ct-aside { position: sticky; inset-block-start: calc(var(--header-h-condensed) + var(--sp-5)); align-self: start; } } .ct-card { display: flex; flex-direction: column; gap: var(--sp-4); min-inline-size: 0; padding: var(--card-pad); border-radius: var(--card-r); background: var(--surface); box-shadow: var(--sh-2), var(--sh-ring); } .ct-card__title { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-md); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); color: var(--text); } .ct-card__icon { display: grid; place-items: center; inline-size: 36px; block-size: 36px; flex: none; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand-ink); } .ct-card__icon svg { inline-size: 17px; block-size: 17px; } /* ---- business hours ---- */ .ct-hours__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); } .ct-hours__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-block-size: 44px; padding-inline: var(--sp-3); padding-block: var(--sp-2); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-2); } .ct-hours__d { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-weight: var(--fw-semibold); } .ct-hours__t { font-weight: var(--fw-bold); color: var(--text); } .ct-hours__row.is-today { background: var(--grad-hot-soft); box-shadow: inset 0 0 0 1px var(--brand-soft-line); color: var(--text); } .ct-hours__today { display: inline-flex; align-items: center; min-block-size: 20px; padding-inline: var(--sp-2); border-radius: var(--r-pill); background: var(--grad-cta); color: var(--text-on-brand); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-wide); } /* "Closed" reads red — but the LEGIBLE red (--brand-ink), which lifts to #FF6B72 in dark instead of staying a muddy #C2181C. */ .ct-hours__row.is-closed .ct-hours__t { color: var(--brand-ink); font-weight: var(--fw-bold); } .ct-hours__row.is-closed .ct-hours__d { color: var(--text-3); } .ct-hours__note { font-size: var(--fs-xs); line-height: 1.6; color: var(--text-3); } /* ---- socials ---- */ .ct-social__note { font-size: var(--fs-xs); line-height: 1.6; color: var(--text-3); } /* ---- the RFQ steer ---- */ .ct-note { gap: var(--sp-3); background: var(--grad-hot-soft); box-shadow: inset 0 0 0 1px var(--brand-soft-line), var(--sh-2); } .ct-note__badge { align-self: flex-start; } .ct-note__title { font-size: var(--fs-lg); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); color: var(--text); } .ct-note__body { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-2); } .ct-note .btn { margin-block-start: var(--sp-2); } .ct-note__fine { font-size: var(--fs-2xs); line-height: 1.6; color: var(--text-2); text-align: center; } /* ========================================================================== 3. TALK TO THE FACTORY — the bento -------------------------------------------------------------------------- Desktop: the WhatsApp tile is tall (two rows, five columns); Call and Email sit beside it; the address tile runs the width beneath them. Grid areas mirror automatically in RTL — no second stylesheet. ========================================================================== */ .ct-bento { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "wa wa wa wa wa call call call mail mail mail mail" "wa wa wa wa wa visit visit visit visit visit visit visit"; margin-block-start: var(--sp-8); } .ct-tile--wa { grid-area: wa; } .ct-tile--call { grid-area: call; } .ct-tile--mail { grid-area: mail; } .ct-tile--visit { grid-area: visit; } @media (max-width: 1023px) { .ct-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "wa wa" "call mail" "visit visit"; } } @media (max-width: 639px) { .ct-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "wa" "call" "mail" "visit"; } } /* ---- the tile itself ---- */ .ct-tile { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); min-inline-size: 0; padding: var(--card-pad); border-radius: var(--card-r); background: var(--surface); box-shadow: var(--sh-2), var(--sh-ring); transition: transform var(--d-base) var(--e-spring), box-shadow var(--d-base) var(--e-soft); } .ct-tile:hover { transform: var(--lift); box-shadow: var(--sh-4), var(--sh-ring); } .ct-tile__icon { display: grid; place-items: center; inline-size: 46px; block-size: 46px; flex: none; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-ink); transition: transform var(--d-base) var(--e-spring); } .ct-tile__icon svg { inline-size: 22px; block-size: 22px; } .ct-tile:hover .ct-tile__icon { transform: rotate(-5deg) scale(1.06); } /* Three distinct chips — all three theme-aware. The old amber-50 / info-50 pair were light-only literals that turned into bright islands in dark. */ .ct-tile--mail .ct-tile__icon { background: var(--note-bg); color: var(--note-fg); } .ct-tile--visit .ct-tile__icon { background: var(--surface-3); color: var(--text); } .ct-tile__title { font-size: var(--fs-md); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); color: var(--text); } .ct-tile__sub { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); } .ct-tile__k { font-size: var(--fs-2xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-2); } [dir="rtl"] .ct-tile__k { text-transform: none; font-size: var(--fs-xs); } .ct-tile__addr { margin-block-start: var(--sp-1); max-inline-size: 46ch; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.6; color: var(--text); } /* ---- the link rows ---- */ .ct-tile__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); margin-block-start: auto; padding-block-start: var(--sp-2); } .ct-tile__item { min-inline-size: 0; } .ct-tile__link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-block-size: var(--tap); min-inline-size: 0; padding-inline: var(--sp-3); padding-block: var(--sp-2); border-radius: var(--r-md); color: var(--text); font-size: var(--fs-base); font-weight: var(--fw-bold); transition: background var(--d-quick) var(--e-soft), color var(--d-quick) var(--e-soft), transform var(--d-quick) var(--e-spring); } .ct-tile__link:hover { background: var(--surface-3); color: var(--brand-ink); transform: translateX(2px); } [dir="rtl"] .ct-tile__link:hover { transform: translateX(-2px); } .ct-tile__link:focus-visible { box-shadow: var(--focus-ring); outline: none; } .ct-tile__stack { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; } .ct-tile__mail { font-size: var(--fs-sm); font-weight: var(--fw-bold); overflow-wrap: anywhere; } .ct-tile__go { display: grid; place-items: center; inline-size: 26px; block-size: 26px; flex: none; border-radius: var(--r-circle); background: var(--surface-3); color: var(--text-2); transition: background var(--d-quick) var(--e-soft), color var(--d-quick) var(--e-soft); } .ct-tile__go svg { inline-size: 13px; block-size: 13px; } [dir="rtl"] .ct-tile__go svg { transform: scaleX(-1); } .ct-tile__link:hover .ct-tile__go { background: var(--grad-cta); color: var(--text-on-brand); } .ct-tile__cta { margin-block-start: var(--sp-3); } /* ---- the hot WhatsApp tile ---- This tile is the red gradient in BOTH themes, so the overlays on it are deliberately literal white at low alpha: a theme-flipping token would go black on a red ground in dark mode. --text-on-brand (#FFF, both themes) carries every piece of text. */ .ct-tile--wa { overflow: hidden; background: var(--grad-cta); color: var(--text-on-brand); box-shadow: var(--glow-brand), var(--sh-3); } .ct-tile--wa::after { content: ''; position: absolute; inset-block-start: -35%; inset-inline-end: -18%; inline-size: 20rem; block-size: 20rem; border-radius: var(--r-circle); background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 68%); pointer-events: none; } .ct-tile--wa:hover { box-shadow: var(--glow-brand-lg), var(--sh-4); } .ct-tile--wa > * { position: relative; z-index: var(--z-raised); } .ct-tile--wa .ct-tile__icon { background: rgba(255, 255, 255, .18); color: var(--text-on-brand); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); } .ct-tile--wa .ct-tile__title { color: var(--text-on-brand); } .ct-tile--wa .ct-tile__sub { color: var(--text-on-brand); } .ct-tile__big { font-family: var(--font-num); font-size: var(--fs-2xl); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); line-height: 1.15; color: var(--text-on-brand); } .ct-tile__big bdi { direction: ltr; unicode-bidi: isolate; } /* The hot tile is two rows tall, so it has spare height its siblings do not. Push the whole contact block to the bottom (the big number is the anchor) and let the slack fall as one deliberate breath under the intro — rather than as a hole in the middle of the tile. */ .ct-tile--wa .ct-tile__big { margin-block-start: auto; } .ct-tile--wa .ct-tile__list { gap: var(--sp-1); margin-block-start: 0; padding-block-start: var(--sp-3); border-block-start: 1px solid rgba(255, 255, 255, .2); } .ct-tile--wa .ct-tile__link { color: var(--text-on-brand); font-size: var(--fs-sm); } .ct-tile--wa .ct-tile__link:hover { background: rgba(255, 255, 255, .14); color: var(--text-on-brand); } .ct-tile--wa .ct-tile__go { background: rgba(255, 255, 255, .18); color: var(--text-on-brand); } /* A white chip carrying the CTA red — 4.97:1, and identical in both themes. */ .ct-tile--wa .ct-tile__link:hover .ct-tile__go { background: var(--text-on-brand); color: var(--red-cta); } /* A blue focus ring vanishes on red: go white. */ .ct-tile--wa .ct-tile__link:focus-visible, .ct-tile--wa .btn:focus-visible { box-shadow: 0 0 0 3px rgba(0, 0, 0, .25), 0 0 0 5px var(--focus-on-red); outline: none; } /* ---- the address tile: text on one side, the maps button on the other ---- */ .ct-tile__visit { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; min-inline-size: 0; } .ct-tile__visit > div { min-inline-size: 0; } .ct-tile--visit .ct-tile__cta { margin-block-start: 0; flex: none; } /* ========================================================================== 4. SMALL SCREENS ========================================================================== */ @media (max-width: 640px) { .ct-form-card { border-radius: var(--r-xl); } .ct-form__reply { inline-size: 100%; } .ct-success { padding: var(--sp-5); } .ct-success__again { inline-size: 100%; } .ct-tile--visit .ct-tile__cta { inline-size: 100%; } } /* ========================================================================== 5. MOTION — the theme is springy, but never at the expense of a user who asked for stillness. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .ct-tile, .ct-tile__icon, .ct-tile__link, .ct-tile__go { transition: none; } .ct-tile:hover, .ct-tile:hover .ct-tile__icon, .ct-tile__link:hover { transform: none; } .ct-success { animation: none; } }