/* MK Logistics — custom CSS overrides. Loaded after the parent theme styles. */ /* --------------------------------------------------------------------------- Sticky header + WordPress admin bar --------------------------------------------------------------------------- Guests:
sticks flush to the viewport top. Logged-in users: #wpadminbar is position:fixed above 600px (32px tall on desktop, 46px on tablet), so the sticky header must be pushed down by that amount or it slides underneath the toolbar. WordPress exposes the current toolbar height as --wp-admin--admin-bar--height on , so one rule covers both breakpoints. Below 600px the admin bar is position:absolute and scrolls away with the page, so the header must sit at top:0 again. --------------------------------------------------------------------------- */ body.admin-bar header.sticky { top: var(--wp-admin--admin-bar--height, 32px); } @media screen and (max-width: 600px) { body.admin-bar header.sticky { top: 0; } } /* --------------------------------------------------------------------------- Contact lists (phone numbers / email addresses / address) --------------------------------------------------------------------------- Shared by the homepage contact cards and the footer contact column. Every row is an optional leading icon plus a body holding the value and its caption. With a single entry the caption sits inline after the value, so the block reads exactly like the old single-value fields. Two or more entries add the --stacked modifier: the caption drops below the value and the rows get more breathing room, which keeps a four-number phone list scannable. These rules live here rather than as Tailwind utility classes because the parent theme ships a pre-built, purged Tailwind bundle — new utilities simply would not exist in the compiled stylesheet. --------------------------------------------------------------------------- */ .mk-contact-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; min-width: 0; } .mk-contact-list--stacked { gap: 12px; margin-top: 8px; } /* Inside the homepage cards the icon and title form their own header row, so the list below starts flush with the card padding rather than being indented under the title. */ .mk-contact-list--columns, .mk-contact-body { margin-top: 14px; } .mk-contact-list__row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } /* Icon column: fixed width so every value in the list starts on the same vertical line, nudged down to sit optically centred on the first text line. */ .mk-contact-list__icon { flex: 0 0 14px; display: flex; justify-content: center; margin-top: 5px; color: var(--brand); } .mk-contact-list__icon svg { width: 14px; height: 14px; } .mk-contact-list__body { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 1px; min-width: 0; } .mk-contact-list--stacked .mk-contact-list__body { flex-direction: column; align-items: flex-start; } .mk-contact-list__value { font-size: 16px; line-height: 1.5; color: var(--muted-foreground); text-decoration: none; overflow-wrap: anywhere; transition: color .2s ease; } a.mk-contact-list__value:hover, a.mk-contact-list__value:focus-visible { color: var(--brand); } .mk-contact-list__meta { font-size: 14px; line-height: 1.5; color: var(--muted-foreground); } /* Two or more entries: the value carries the weight, the caption steps back. */ .mk-contact-list--stacked .mk-contact-list__value { font-size: 17px; font-weight: 600; color: var(--foreground); } .mk-contact-list--stacked .mk-contact-list__meta { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; } /* Footer variant — same structure on the dark background. */ .mk-contact-list--invert .mk-contact-list__value { color: rgba(255, 255, 255, .75); } .mk-contact-list--invert .mk-contact-list__meta { color: rgba(255, 255, 255, .45); } .mk-contact-list--invert.mk-contact-list--stacked .mk-contact-list__value { font-size: 16px; color: #fff; } .mk-contact-list--invert a.mk-contact-list__value:hover, .mk-contact-list--invert a.mk-contact-list__value:focus-visible { color: var(--brand); } /* The footer address is not a link, so it keeps the plain body colour. */ .mk-contact-list__value--plain { cursor: default; } /* Two columns once the card is wide enough — four phone numbers then read as a 2 × 2 block instead of one tall stack. Stays single-column on small screens, and is opt-in so the narrow footer column is never affected. Each column is roughly 180px inside the desktop contact card, so the type steps down a notch here: at the full 17px a long address such as mk-ops@mklogistics.sg would break across two lines mid-word. */ @media (min-width: 640px) { .mk-contact-list--columns.mk-contact-list--stacked { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 14px; } .mk-contact-list--columns.mk-contact-list--stacked .mk-contact-list__value { font-size: 15px; } .mk-contact-list--columns.mk-contact-list--stacked .mk-contact-list__meta { font-size: 11px; letter-spacing: .06em; } } /* Past the point where the card itself grows, give the type its size back. */ @media (min-width: 1280px) { .mk-contact-list--columns.mk-contact-list--stacked { column-gap: 20px; } .mk-contact-list--columns.mk-contact-list--stacked .mk-contact-list__value { font-size: 16px; } }