/* ==========================================================================
Sabah Booking — brand content pages.
Shared by the static/editorial pages: about, contact, faq, terms, esg,
sitemap, testimonials, tips, tipsinfo, bookingProcedure, travelAlone,
enquiry, weather, 404, 100.
Loaded AFTER css/brand-home.css, which supplies the tokens and the shared
brand shell (header, footer, buttons, cards, trust badge). This file adds
ONLY what content pages need.
The body carries "sb-home sb-page": `sb-home` is the brand shell scope that
brand-home.css resets are written against, `sb-page` is this layer.
Note brand-home.css zeroes margins on h1-h4/p and strips list styling from
ul. Editorial copy needs those back, so `.sb-prose` re-establishes them for
rich text (DB HTML and remote-fetched content) rather than fighting the
reset page-wide.
No !important anywhere: these pages do not load the legacy stylesheets.
========================================================================== */
/* A declared display value beats the `hidden` attribute's UA default, so any
flex/grid component toggled via `hidden` would stay visible without this. */
.sb-page [hidden]{display:none}
/* ---- page hero ---------------------------------------------------------
Replaces the legacy `hero_in bgN start_bg_zoom` banner. Same white
protection gradient as the listing hero — never a dark scrim, so brand
photography keeps its colour. Pages without a photo just omit the inline
background-image and land on the sand wash. */
.sb-pagehero{
position:relative;background-size:cover;background-position:center;
background-color:var(--sand-100);
padding:44px var(--gutter) 48px;
}
.sb-pagehero::before{
content:"";position:absolute;inset:0;
background:linear-gradient(100deg,
rgba(255,255,255,.97) 0%,
rgba(255,255,255,.92) 38%,
rgba(255,255,255,.55) 68%,
rgba(255,255,255,.15) 100%);
}
.sb-pagehero__inner{position:relative;z-index:2;max-width:720px}
.sb-pagehero h1{font:var(--text-h1);font-size:clamp(28px,3.4vw,40px)}
.sb-pagehero__sub{
font:var(--text-subtitle);font-size:15px;color:var(--text-muted);margin-top:10px;
}
.sb-crumb{font:var(--text-caption);color:var(--text-muted)}
.sb-crumb a{color:var(--text-muted)}
.sb-crumb a:hover{color:var(--text-link)}
.sb-pagehero .sb-crumb{margin-bottom:8px}
/* ---- content scaffolding ----------------------------------------------- */
.sb-content{padding:48px var(--gutter)}
.sb-content--soft{background:var(--sand-100)}
.sb-content--tight{padding-top:32px;padding-bottom:32px}
.sb-content__inner{max-width:1180px;margin:0 auto}
/* editorial copy wants a shorter measure than the 1180 shell */
.sb-content__inner--narrow{max-width:820px}
.sb-pagehead{max-width:640px;margin:0 auto 32px;text-align:center}
/* Boki parked in the empty margin to the left of a centred .sb-pagehead. Absolute
so the heading block keeps its own centring.
Mobile-first on purpose: the 640px pagehead only leaves room for a 230px mascot
once the viewport clears ~1260px, so below that Boki stays in normal flow above
the heading (visible on phones) rather than being squeezed or hidden.
Written as two-class selectors: a bare `.sb-content__boki` (0,1,0) would lose to
brand-home.css's `.sb-home img{display:block}` (0,1,1). */
.sb-content--boki .sb-content__inner{position:relative}
.sb-content--boki .sb-content__boki{width:140px;height:auto;margin:0 auto 16px;pointer-events:none}
@media (min-width:1260px){
.sb-content--boki .sb-content__boki{position:absolute;top:0;left:0;width:230px;margin:0}
}
.sb-pagehead h2{font:var(--text-h2)}
.sb-pagehead p{font:var(--text-subtitle);color:var(--text-muted);margin-top:8px}
.sb-pagehead--left{margin-left:0;text-align:left}
/* ---- trust panel ---------------------------------------------------------
The transparency block. This is the brand's positioning — "the most
transparent way to visit Sabah" — and the reason a traveller books here
rather than direct, so it is deliberately NOT the generic .sb-feat card
grid it started as: that read as three oversized, low-density tiles.
It is built to look like a credential, not a marketing panel: a green
header band, verified assurances with filled check discs, and the licence
numbers as a compact footer strip. Everything is real, checkable fact —
the MOTAC licence links out to the government register — which is what
makes the claim worth making. */
.sb-trustpanel{
border:2px solid var(--green-500);border-radius:var(--radius-lg);
overflow:hidden;background:var(--surface-card);
box-shadow:0 4px 16px rgba(108,194,67,.14),0 12px 32px rgba(34,34,34,.06);
}
/* Solid green header, not a tint: this is the one block on the page that
should read as a stamp rather than another content card. */
.sb-trustpanel__head{
display:flex;align-items:center;gap:13px;
padding:17px 22px;
background:var(--green-600);color:var(--text-inverse);
}
.sb-trustpanel__head .sb-icon{width:26px;height:26px;flex:none;color:var(--text-inverse)}
.sb-trustpanel__head h2{
font:var(--text-h3);font-size:19px;color:var(--text-inverse);margin:0;
}
.sb-trustpanel__head p{
font:var(--text-caption);color:rgba(255,255,255,.82);margin-top:2px;
}
.sb-trustpanel__body{padding:6px 20px 14px}
.sb-trustpanel__row{display:flex;gap:12px;align-items:flex-start;padding:12px 0}
.sb-trustpanel__row + .sb-trustpanel__row{border-top:1px solid var(--gray-100)}
.sb-trustpanel__check{
width:22px;height:22px;flex:none;border-radius:50%;
background:var(--green-500);color:var(--text-inverse);
display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.sb-trustpanel__check .sb-icon{width:13px;height:13px}
.sb-trustpanel__row b{
display:block;font:var(--text-subtitle);font-weight:600;color:var(--text-heading);
}
.sb-trustpanel__row p{font:var(--text-caption);color:var(--text-muted);margin-top:3px}
/* credentials strip — the 1px grid gap is the divider */
.sb-trustpanel__creds{
display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:var(--border-subtle);border-top:1px solid var(--border-subtle);
}
.sb-trustpanel__cred{
background:var(--sand-100);padding:14px 16px;
display:flex;gap:10px;align-items:flex-start;
}
.sb-trustpanel__cred .sb-icon{width:17px;height:17px;flex:none;color:var(--green-600);margin-top:1px}
.sb-trustpanel__cred b{
display:block;font:var(--text-small);font-weight:600;color:var(--text-heading);
}
.sb-trustpanel__cred span{display:block;font:var(--text-caption);color:var(--text-muted);margin-top:2px}
.sb-trustpanel__cred a{font:var(--text-caption);color:var(--text-link);text-decoration:underline}
/* ---- trust panel: Boki beside the card ----------------------------------
Moved here from brand-detail.css. It lived there because only the *info.jsp
detail pages included brandTrustPanel.jsp, and brand-page.css carried a
`display:none` guard so shuttleinfo.jsp — the one includer that does not
load brand-detail.css — would not drop him in at his full 211x440. Now that
shuttleinfo wants him too, the rules belong on the lower layer: every
includer loads brand-page.css, so nothing is duplicated and the detail
pages behave exactly as before.
The PNG already carries its own transparent margin on the left and top, so
he needs no cropping or negative offsets — flush against the card is enough
for the two to read as one unit. align-items:flex-end puts his feet on the
card's bottom edge whatever his rendered height turns out to be. He is
decorative (alt=""), so hiding him narrow costs nothing and gives the card
its full width back. */
.sb-trustpanel-wrap{display:flex;align-items:flex-end}
.sb-trustpanel-wrap .sb-trustpanel-wrap__mascot{display:block;flex:none}
/* squared off where Boki docks against the card; the hide breakpoints below
restore the rounded corner since nothing sits there once he's gone */
.sb-trustpanel-wrap .sb-trustpanel{flex:1;min-width:0;border-bottom-left-radius:0}
/* Boki stands down through one awkward band: on a detail page the rail is
still beside the main column here, but the creds strip does not collapse to
one column until 900px, so a 200px mascot squeezes three credentials into
~112px each and doubles the strip's height. Below 900 the rail drops away
and he fits again, so this is a band, not a floor.
Both hide rules are scoped through the wrap on purpose: brand-home.css sets
`.sb-home img{display:block}` (0,1,1), which outranks a bare class (0,1,0),
so an unscoped `display:none` here is silently ignored. */
@media (max-width:1100px) and (min-width:901px){
.sb-trustpanel-wrap .sb-trustpanel-wrap__mascot{display:none}
.sb-trustpanel-wrap .sb-trustpanel{border-bottom-left-radius:var(--radius-lg)}
}
@media (max-width:900px){
/* three credentials in a phone width give each ~112px; one per row instead */
.sb-trustpanel__creds{grid-template-columns:1fr}
}
@media (max-width:767px){
.sb-trustpanel-wrap .sb-trustpanel-wrap__mascot{display:none}
.sb-trustpanel-wrap .sb-trustpanel{border-bottom-left-radius:var(--radius-lg)}
}
/* ---- review summary ------------------------------------------------------
Also moved down from brand-detail.css, for the same reason: shuttleinfo.jsp
grew a reviews section and does not load that sheet. The individual review
cards reuse .sb-review* from brand-home.css; this is just the average +
per-star distribution block above them. */
.sb-revsum{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px;align-items:center}
.sb-revsum__avg{text-align:center}
.sb-revsum__score{font:600 44px/1 var(--font-display);color:var(--text-heading)}
.sb-revsum__stars{color:var(--star);font-size:16px;margin-top:6px}
.sb-revsum__count{font:var(--text-caption);color:var(--text-muted);margin-top:6px}
.sb-revbars{display:flex;flex-direction:column;gap:7px}
.sb-revbar{display:flex;align-items:center;gap:10px}
.sb-revbar__label{
font:var(--text-caption);color:var(--text-muted);
white-space:nowrap;min-width:34px;text-align:right;
}
/* Both of these are s. An inline box ignores height, so the track would
collapse and the fill would never paint — they must be blockified. The track
gets it from being a flex item; the fill needs it declared. */
.sb-revbar__track{
flex:1;display:block;height:7px;border-radius:var(--radius-pill);
background:var(--gray-100);overflow:hidden;
}
.sb-revbar__fill{display:block;height:100%;background:var(--star);border-radius:var(--radius-pill)}
.sb-revbar__n{font:var(--text-caption);color:var(--text-muted);min-width:26px}
@media (max-width:900px){
.sb-revsum{grid-template-columns:1fr;gap:18px}
}
/* ---- prose / rich text -------------------------------------------------
Scope for content this stylesheet does not author: DB article HTML and the
remote-fetched terms/procedure text. brand-home.css strips margins and list
markers globally, so they are restored here rather than page-wide. */
.sb-prose{font:var(--text-body);font-size:15px;color:var(--text-body-color)}
.sb-prose h1,.sb-prose h2,.sb-prose h3,.sb-prose h4{margin:28px 0 12px}
.sb-prose h2{font:var(--text-h2);font-size:22px}
.sb-prose h3{font:var(--text-h3)}
.sb-prose h4{font:var(--text-h4)}
.sb-prose > :first-child{margin-top:0}
.sb-prose p{margin:0 0 14px}
.sb-prose ul,.sb-prose ol{margin:0 0 14px;padding-left:22px}
.sb-prose ul{list-style:disc}
.sb-prose ol{list-style:decimal}
.sb-prose li{margin-bottom:6px}
.sb-prose a{color:var(--text-link);text-decoration:underline}
.sb-prose a:hover{color:var(--blue-600)}
.sb-prose img{max-width:100%;height:auto;border-radius:var(--radius-md);margin:12px 0}
/* CMS-authored prose HTML (route policies, terms, etc.) sometimes carries a
legacy table with inline pixel widths on its
s (e.g. width:800px) from
a desktop-era rich-text editor. `width:100%` alone doesn't stop that: an
auto-layout table still grows to fit oversized cells, blowing the whole
page out horizontally on mobile - which on a real phone can push a fixed-
position sibling like #mobileBookBar's Book Now button off past the edge
of the screen instead of just widening the table (found 2026-08-16 on a
transferinfo "Private Car Charter" route's vehicle/pricing table).
display:block+overflow-x:auto lets the table keep its authored column
widths and become independently scrollable instead, containing the
overflow - same technique as .sb-pricebar's horizontal scroll. */
.sb-prose table{display:block;overflow-x:auto;border-collapse:collapse;width:100%;margin:0 0 16px}
.sb-prose th,.sb-prose td{
border:1px solid var(--border-subtle);padding:8px 10px;text-align:left;
}
.sb-prose strong,.sb-prose b{color:var(--text-heading)}
.sb-prose hr{border:0;border-top:1px solid var(--border-subtle);margin:24px 0}
/* The terms/procedure feed arrives as -joined lines with no block
elements, so give consecutive breaks a little air to fake paragraphing. */
.sb-prose br{line-height:2.1}
/* ---- feature cards -----------------------------------------------------
Brand replacement for the legacy `box_feat` tile. Same shape as the
homepage `.sb-why__card` but standalone (no sand band of its own), so a
page can drop a grid of them into any section. */
.sb-feat__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sb-feat__grid--2{grid-template-columns:repeat(2,1fr)}
.sb-feat__card{
background:var(--surface-card);border-radius:var(--radius-lg);
box-shadow:var(--shadow-card);padding:24px;text-align:center;
display:block;color:inherit;
transition:transform var(--dur-med) var(--ease-brand),
box-shadow var(--dur-med) var(--ease-brand);
}
a.sb-feat__card:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
.sb-feat__disc{
width:48px;height:48px;border-radius:50%;background:var(--green-100);
display:inline-flex;align-items:center;justify-content:center;
}
.sb-feat__disc .sb-icon{width:22px;height:22px;color:var(--green-600)}
.sb-feat__disc--blue{background:var(--blue-100)}
.sb-feat__disc--blue .sb-icon{color:var(--blue-600)}
.sb-feat__disc--coral{background:var(--coral-100)}
.sb-feat__disc--coral .sb-icon{color:var(--coral-600)}
.sb-feat__card h3{font:var(--text-h3);margin-top:12px}
.sb-feat__card p{font:var(--text-body);color:var(--text-body-color);margin-top:8px}
/* ---- duo: copy beside an image -----------------------------------------
Named sb-duo, not sb-split: brand-home.css already owns `.sb-split` for the
homepage journey band (display:flex plus a 40px/gutter padding). Reusing
that name here would win on `display` but silently inherit the padding. */
.sb-duo{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.sb-duo--flip > :first-child{order:2}
/* the default vertical-centers a shorter column against a taller one; a
short plain list (contact.jsp's address/hours/phone/email) reads better
pinned to the same top edge as the other column instead of floating. */
.sb-duo--top{align-items:start}
/* the default gives the first column the larger share (copy beside a
smaller image); contact.jsp wants the reverse — the enquiry card carries
the actual task (WhatsApp/email form), the address/hours list is just
reference text, so the second column should get the extra room. */
.sb-duo--formwide{grid-template-columns:.85fr 1.15fr}
.sb-duo img{border-radius:var(--radius-lg);width:100%}
.sb-duo__stack{display:grid;grid-template-columns:1fr;gap:12px}
.sb-duo__stack img{aspect-ratio:4/3;height:auto;object-fit:cover}
.sb-duo__cap{font:var(--text-caption);color:var(--text-muted);margin-top:8px}
/* ---- B2B sign-in: login card beside the partner benefits -----------------
Deliberately NOT built on .sb-duo/.sb-feat__grid, both of which are wrong
here and are shared with about/esg/myAccount/review/weather:
.sb-duo img{width:100%} is meant for editorial photography; it blew the
50x50 benefit PNGs up to the column width, so they rendered soft and — as
the three grid columns were not equal — at three different sizes.
.sb-feat__grid uses repeat(3,1fr), and 1fr floors at auto, so a long word
("Competitive") widened its column and squeezed the others.
Hence minmax(0,1fr) for genuinely equal columns, and a fixed image height
so all six read as one set whatever their source dimensions. */
.sb-b2b{
display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);
gap:40px;align-items:start;
}
.sb-b2b__why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sb-b2b__tile{
background:var(--surface-card);border-radius:var(--radius-lg);
box-shadow:var(--shadow-card);padding:22px 14px;
display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
}
/* (0,1,1), same as `.sb-home img` — brand-page.css loads later, so this wins */
.sb-b2b__tile img{height:52px;width:auto;max-width:100%;object-fit:contain}
.sb-b2b__tile span{font:600 14px/1.4 var(--font-display);color:var(--text-heading)}
.sb-b2b__join{margin-top:20px;text-align:center}
@media (max-width:900px){
.sb-b2b{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:520px){
.sb-b2b__why{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---- pull quote --------------------------------------------------------- */
.sb-pullquote{
background:var(--sand-100);border-left:3px solid var(--green-500);
border-radius:var(--radius-md);padding:20px 24px;margin:24px 0;
font:var(--text-subtitle);font-size:16px;line-height:1.6;color:var(--text-heading);
}
.sb-pullquote cite{
display:block;margin-top:10px;
font:var(--text-caption);font-style:normal;color:var(--text-muted);
}
/* ---- two-column article layout -----------------------------------------
faq / tips / tipsinfo: sticky category rail beside the content column. */
.sb-withaside{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:start}
.sb-aside{position:sticky;top:84px} /* clears the sticky brand header */
.sb-aside__card{
background:var(--surface-card);border-radius:var(--radius-lg);
box-shadow:var(--shadow-card);padding:20px;
}
.sb-aside__card + .sb-aside__card{margin-top:20px}
.sb-aside__card h3{font:var(--text-h4);margin-bottom:12px}
.sb-aside__nav{display:flex;flex-direction:column;gap:2px}
.sb-aside__nav a{
display:flex;align-items:center;gap:8px;
padding:8px 10px;border-radius:var(--radius-sm);
font:var(--text-subtitle);color:var(--text-heading);
transition:background var(--dur-fast) var(--ease-brand);
}
.sb-aside__nav a:hover{background:var(--gray-100)}
.sb-aside__nav a.is-active{background:var(--green-100);color:var(--green-800)}
.sb-aside__nav .sb-icon{width:16px;height:16px;color:var(--text-muted)}
.sb-aside__nav a.is-active .sb-icon{color:var(--green-600)}
/* ---- accordion (faq) ---------------------------------------------------
Native /: no JS, keyboard-accessible for free, and the
legacy Bootstrap collapse ids (which collided across the two categories)
stop being load-bearing. */
.sb-acc{display:flex;flex-direction:column;gap:10px}
.sb-acc__item{
background:var(--surface-card);border:1px solid var(--border-subtle);
border-radius:var(--radius-md);overflow:hidden;
}
.sb-acc__item[open]{box-shadow:var(--shadow-card);border-color:transparent}
.sb-acc__q{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:16px 18px;cursor:pointer;list-style:none;
font:var(--text-h4);color:var(--text-heading);
}
.sb-acc__q::-webkit-details-marker{display:none}
.sb-acc__q:hover{color:var(--green-600)}
.sb-acc__q .sb-icon{
width:18px;height:18px;flex:none;color:var(--text-muted);
transition:transform var(--dur-med) var(--ease-brand);
}
.sb-acc__item[open] .sb-acc__q .sb-icon{transform:rotate(180deg)}
.sb-acc__a{padding:0 18px 18px}
/* ---- link lists (sitemap, travelAlone, 404 recovery) -------------------- */
.sb-linklist{display:flex;flex-direction:column;gap:2px}
.sb-linklist a{
display:flex;align-items:center;gap:10px;
padding:11px 14px;border-radius:var(--radius-sm);
font:var(--text-subtitle);font-size:15px;color:var(--text-heading);
transition:background var(--dur-fast) var(--ease-brand);
}
.sb-linklist a:hover{background:var(--sand-100);color:var(--green-600)}
.sb-linklist .sb-icon{width:16px;height:16px;color:var(--green-600)}
.sb-linklist--cols{
display:grid;grid-template-columns:repeat(2,1fr);gap:2px 24px;
}
/* numbered editorial list (travelAlone's top-10) */
.sb-ranklist{counter-reset:sbrank;display:flex;flex-direction:column;gap:2px}
.sb-ranklist a{
display:flex;align-items:center;gap:12px;
padding:11px 14px;border-radius:var(--radius-sm);
font:var(--text-subtitle);font-size:15px;color:var(--text-heading);
transition:background var(--dur-fast) var(--ease-brand);
}
.sb-ranklist a::before{
counter-increment:sbrank;content:counter(sbrank);
width:26px;height:26px;flex:none;border-radius:50%;
background:var(--green-100);color:var(--green-800);
display:inline-flex;align-items:center;justify-content:center;
font:var(--text-small);font-weight:600;
}
.sb-ranklist a:hover{background:var(--sand-100)}
/* ---- article (tipsinfo) ------------------------------------------------- */
.sb-article__meta{
display:flex;align-items:center;gap:16px;flex-wrap:wrap;
font:var(--text-caption);color:var(--text-muted);
padding-bottom:16px;margin-bottom:24px;
border-bottom:1px solid var(--border-subtle);
}
.sb-article__meta span{display:inline-flex;align-items:center;gap:6px}
.sb-article__meta .sb-icon{width:14px;height:14px}
.sb-article__share{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
margin-top:32px;padding-top:20px;border-top:1px solid var(--border-subtle);
}
.sb-article__share > span{font:var(--text-subtitle);font-weight:600;color:var(--text-heading)}
.sb-photostrip{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sb-photostrip img{width:100%;height:88px;object-fit:cover;border-radius:var(--radius-sm)}
/* ---- testimonial tiles -------------------------------------------------
Replaces the legacy `view view-tenth` hover mask, which hid the quote until
hover — the text is the point, so it is always visible now. */
.sb-quotes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sb-quotecard{
background:var(--surface-card);border-radius:var(--radius-lg);
box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;
}
.sb-quotecard img{width:100%;height:180px;object-fit:cover}
.sb-quotecard__body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.sb-quotecard__text{font:var(--text-body);color:var(--text-body-color)}
.sb-quotecard__by{
font:var(--text-caption);color:var(--text-muted);margin-top:auto;padding-top:8px;
}
/* ---- info list (contact) ------------------------------------------------ */
.sb-infolist{display:flex;flex-direction:column;gap:20px}
.sb-infoitem{display:flex;gap:14px;align-items:flex-start}
.sb-infoitem__disc{
width:40px;height:40px;flex:none;border-radius:50%;background:var(--blue-100);
display:inline-flex;align-items:center;justify-content:center;
}
.sb-infoitem__disc .sb-icon{width:18px;height:18px;color:var(--blue-600)}
.sb-infoitem h4{font:var(--text-h4);margin-bottom:4px}
.sb-infoitem p,.sb-infoitem a{font:var(--text-body);color:var(--text-body-color)}
.sb-infoitem a:hover{color:var(--text-link)}
.sb-map{
width:100%;height:380px;border:0;border-radius:var(--radius-lg);
box-shadow:var(--shadow-card);
}
/* ---- form --------------------------------------------------------------- */
.sb-form{
background:var(--surface-card);border-radius:var(--radius-lg);
box-shadow:var(--shadow-card);padding:28px;
}
.sb-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sb-field{display:flex;flex-direction:column;gap:6px}
.sb-field--full{grid-column:1 / -1}
.sb-field label{font:var(--text-subtitle);font-weight:600;color:var(--text-heading)}
.sb-field input,.sb-field textarea,.sb-field select{
font:var(--text-body);font-size:15px;color:var(--text-heading);
padding:11px 13px;border:1px solid var(--gray-300);
border-radius:var(--radius-md);background:var(--surface-page);
width:100%;font-family:var(--font-body);
transition:border-color var(--dur-fast) var(--ease-brand);
/* `