/* * The platform stylesheet: every client's pages load it first, then their own theme (/theme.css, * or /css/theme-platform.css with no client), which brings the fonts, every design token and the * client's brand rules. No build step: served as-is from /css/base.css. */ /* ------------------------------------------------------------------ tokens Only the grid lives here, because the media queries right below redefine it; every other token comes from the client's theme. */ :root { --ui-grid-cols: 4; --ui-grid-gutter: 16px; --ui-grid-margin: 16px; } @media (min-width: 600px) { :root { --ui-grid-cols: 8; --ui-grid-gutter: 20px; --ui-grid-margin: 40px; } } @media (min-width: 1136px) { :root { --ui-grid-cols: 12; --ui-grid-gutter: 20px; --ui-grid-margin: 80px; } } /* ------------------------------------------------------------------ THE WEBSITE DESIGN SYSTEM * * One product, two surfaces. * * The kiosk's design system lives at the top of public/css/kiosk.css and is pinned by * tests/Feature/Kiosk/KioskDesignSystemTest.php. This is that SAME system at website scale, not * a second one: the same four-step rhythm, the same single selected treatment, the same * image-to-text ratio, the same currency, the same three typographic jobs. Where a value here * differs from the kiosk's it differs for exactly one reason — a mouse and a phone are not a * finger at arm's length on a low-density panel — and the line says so. * * The design review that produced this block found the same defect the kiosk review found, on a * different surface: not any single control, but that the desktop pages were compressed while * the mobile product and checkout screens were vertically heavy, so the two surfaces read as two * products. Nothing about the identity changed. Red, black, white, the photography and the * display italic are KFC's and are untouched; what this defines is how much room each gets. */ :root { /* --- rhythm: the kiosk's four steps, written in the website's own scale of 4 -------------- Kiosk 8 / 16 / 24 / 40 ARE --ui-space-2 / 4 / 6 / 10. Aliasing them rather than redeclaring the numbers is the whole point: there is one scale in the building. */ --w-gap-tight: var(--ui-space-2); /* 8 — inside one control: icon to label, label to price */ --w-gap-inline: var(--ui-space-4); /* 16 — between controls sitting on one line */ --w-gap-block: var(--ui-space-6); /* 24 — between rows of a list, between cards */ --w-gap-section: var(--ui-space-10); /* 40 — between one section of a page and the next */ /* --- pointer: the ONE deliberate divergence from the kiosk -------------------------------- --k-tap is 104px because a cabinet is a large low-density panel at arm's length, with no hover and no keyboard. A phone or a mouse is neither. 48px is the existing --tap and is what a thumb wants; 44px is WCAG 2.5.5 and is the floor for a control that sits INSIDE a bar or a row, where 48 would push the bar taller than the content it acts on. */ --w-tap: var(--tap); /* 48 — a standalone tappable thing */ --w-tap-inline: 44px; /* a control inside a bar or a list row */ /* --- choice: ONE selected treatment, and it is the kiosk's -------------------------------- Red line, light red fill, and a mark that is present-but-empty when nothing is chosen, so an unanswered question looks unanswered rather than absent. Colour alone is not a state. The fill is the kiosk's own --k-chosen-fill and is written out exactly once, below. */ KFC's Digital Guidelines (ui-border, stated) put the LINE of a selected card at 1px Grey 900 and a checked box in Brand Red with a white tick; the line follows the guideline now, the red lives in the mark, and the light fill stays the kiosk's. */ --w-chosen-line: var(--ui-grey-900); --w-chosen-fill: #FFF4F5; --w-chosen-width: var(--ui-border-100); --w-chosen-mark: 20px; /* the kiosk's 40px mark, at pointer scale */ --w-chosen-mark-fill: var(--ui-primary); /* checkbox / radio checked: Brand Red + white tick (stated) */ /* --- cards: one image-to-text ratio ------------------------------------------------------- The kiosk fixes a tile's photograph and its body in pixels because its grid is fixed. A website grid is fluid, so the same proportion is held as a ratio plus a RESERVED text block — which is what makes the name, the price and the action line up across a row whatever length of name the POS sends. */ --w-card-media: 4 / 3; /* every product photograph, in a card or on a page */ --w-card-name: 3; /* the product name runs to at most three lines (KFC card spec) */ --w-card-desc: 40px; /* two lines of the description, reserved */ --w-thumb: 56px; /* cart and order-summary line thumbnail */ /* --- type: three faces, three jobs, the same three as the kiosk --------------------------- stripes the category divider and the section transition, Hero size and up only serif HEADINGS, the product name on a product CARD (KFC's card spec), and the primary CTA label — Kentucky Fried Sans ships Light and Regular only, so a sans CTA would be a weaker button, not a cleaner one sans everything a customer READS rather than scans: descriptions, option labels, prices, cart lines, form fields, captions The card name was sans Title Case for a while, to stop the POS's mixed casing showing; KFC's Digital Guidelines set it in Serif caps, which flattens the casing anyway. Pinned by WebsiteDesignSystemTest. */ --w-type-category: var(--t-hero-xxl); /* the Stripes category divider: Hero-XXL, 96 -> 120 (never under Hero 72) */ --w-type-item: clamp(16px, calc(16px + 6 * (100vw - 390px) / 746), 22px); /* a product's name: H5 -> H4 */ --w-type-money: 16px; /* an inline price */ } @media (min-width: 1136px) { :root { --w-type-money: 18px; --w-card-desc: 20px; --w-thumb: 64px; } } /* The mark. Exactly the kiosk's `.k-option-mark` at pointer scale: a box that is ALWAYS in the row, empty, so an unanswered question looks unanswered rather than absent; filled with the chosen colour when it is answered. It is decoration — the state a screen reader is told is `aria-pressed` / `:checked` on the control itself. */ .chosen-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--w-chosen-mark); height: var(--w-chosen-mark); border: var(--ui-border-100) solid var(--ui-control-line); border-radius: var(--ui-radius-40); background: var(--ui-white); color: transparent; } .chosen-mark svg { width: 14px; height: 14px; } [aria-pressed="true"] > .chosen-mark, [aria-pressed="true"] .chosen-mark { border-color: var(--w-chosen-mark-fill); background: var(--w-chosen-mark-fill); color: var(--ui-white); } /* ------------------------------------------------------------------ checkbox and radio (one component) KFC ui-border (stated): default 1px Grey 300 box — we use the control line (Grey 400, WCAG 1.4.11, see --ui-control-line) — checked = Brand Red fill and a white tick. Radius 4 like every control, and a radio is the SAME box: KFC's "Radio Button Default" (ui-border 03) is a square, and the guide shows no circle anywhere. Drawn once, here, for every native checkbox and radio on the site. */ input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 0; cursor: pointer; border: var(--ui-border-100) solid var(--ui-control-line); border-radius: var(--ui-radius-40); background: var(--ui-white); display: inline-grid; place-content: center; vertical-align: middle; } input[type="checkbox"]:checked, input[type="radio"]:checked { border-color: var(--w-chosen-mark-fill); background: var(--w-chosen-mark-fill); } input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { content: ""; width: 12px; height: 12px; background: var(--ui-white); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); } input[type="checkbox"]:disabled, input[type="radio"]:disabled { border-color: var(--ui-grey-200); background: var(--ui-grey-50); cursor: not-allowed; } input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled) { border-color: var(--ui-black); } /* ------------------------------------------------------------------ base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ui-canvas); color: var(--ui-text); font-family: var(--ui-font-body); font-weight: 300; /* Body 1: Sans Light 16/24 */ font-size: 16px; line-height: 24px; letter-spacing: 0; font-synthesis-weight: none; /* no faux bold: KFC Sans has Light + Regular only */ -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } strong, b { font-weight: 400; } /* emphasis = Sans Regular against Light body */ /* Focus (stated): 2.5px black ring, 4px padding, 4px radius. White on the black header. */ /* No border-radius here: changing an element's own radius on focus reshapes it. The ring follows the element's radius. */ :focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus); outline-offset: var(--ui-focus-padding); } /* A text link's ring is the stated one: 2.5px black, 4px padding, 4px radius (ui-border, focus). (Only on elements with no fill of their own, so the radius cannot reshape anything.) */ a:not([class]):focus-visible, .text-link:focus-visible, .link-button:focus-visible, .prose a:focus-visible, .nav-link:focus-visible, .nav-account:focus-visible, .nav-order:focus-visible { border-radius: var(--ui-focus-radius); } .site-header :focus-visible, .cart-bar-checkout :focus-visible, .tab-bar :focus-visible, .hero :focus-visible { outline-color: var(--ui-white); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; /* hairline: the standard visually-hidden clip */ overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ui-white); padding: var(--ui-space-3) var(--ui-space-4); } .skip-link:focus { top: 8px; } /* Layout container on the stated grid: 4/8/12 columns, margins 16/40/80. */ .wrap { max-width: var(--ui-page-max); margin: 0 auto; padding: 0 var(--ui-grid-margin); } .grid { display: grid; grid-template-columns: repeat(var(--ui-grid-cols), minmax(0, 1fr)); column-gap: var(--ui-grid-gutter); } .icon { flex: none; display: inline-block; vertical-align: middle; } .icon-md { width: var(--ui-icon-md); height: var(--ui-icon-md); } .icon-sm { width: var(--ui-icon-sm); height: var(--ui-icon-sm); } .icon-xs { width: var(--ui-icon-xs); height: var(--ui-icon-xs); } /* ------------------------------------------------------------------ typescale ONE table, every style KFC names, as a token pair: a MOBILE value at 390px and the DESKTOP value at 1136px, and clamp() between them — "dynamic typescaling" rather than a jump at a breakpoint. DESKTOP column = STATED (portal > UI Typography > Specs, Desktop tab). MOBILE column = ASSUMED. The Mobile tab was never captured. Derived from KFC's own step list (10 12 14 16 20 22 24 28 40 52 72 96 120 214) one or two steps down, with two floors that are rules rather than guesses: Stripes never below Hero (72px, "Mega and Hero sizes only"), and reading text never below 16px. Replace this column, and nothing else, when the Mobile tab is captured. style face mobile (ASSUMED) desktop (STATED) notes Mega-L Stripes 120 / 108 280 / 260 Mega Stripes 120 / 108 214 / 194 Hero-XXL Stripes 96 / 86 120 / 108 Hero-XL Stripes 72 / 68 96 / 86 Hero Stripes 72 / 68 72 / 68 the Stripes floor H1 Serif 40 / 40 52 / 52 one step down H2 Serif 28 / 28 40 / 40 one step down H3 Serif 24 / 24 32 / 32 32 is not on the step list; 24 is H4 Serif 20 / 20 22 / 22 +0.25px tracking (stated) H5 Serif 16 / 16 16 / 16 +0.25px tracking (stated) Subtitle 1 Sans L 16 / 24 18 / 24 Subtitle 2 Sans L 14 / 20 14 / 20 Body 1 Sans L 16 / 24 16 / 24 the page body Body 2 Sans L 14 / 24 14 / 24 Caption Sans L 12 / 16 12 / 16 Overline Sans R 12 / 16 12 / 16 caps Button Serif 16 / 24 16 / 24 primary CTA uses --ui-cta-size (WCAG, above) Button S Serif 14 / 16 14 / 16 Serif headings are set SOLID (line-height = size, stated): KFC's headings are tight, and the earlier 1.2-1.4 line-heights are what made the pages read airy next to kfc-aruba.com. */ :root { --ui-fluid: (100vw - 390px) / 746; /* 0 at 390px, 1 at 1136px */ --t-mega-l: clamp(120px, calc(120px + 160 * var(--ui-fluid)), 280px); --t-mega: clamp(120px, calc(120px + 94 * var(--ui-fluid)), 214px); --t-hero-xxl: clamp(96px, calc(96px + 24 * var(--ui-fluid)), 120px); --t-hero-xl: clamp(72px, calc(72px + 24 * var(--ui-fluid)), 96px); --t-hero: 72px; --t-h1: clamp(40px, calc(40px + 12 * var(--ui-fluid)), 52px); --t-h2: clamp(28px, calc(28px + 12 * var(--ui-fluid)), 40px); --t-h3: clamp(24px, calc(24px + 8 * var(--ui-fluid)), 32px); --t-h4: clamp(20px, calc(20px + 2 * var(--ui-fluid)), 22px); --t-h5: 16px; --t-subtitle-1: clamp(16px, calc(16px + 2 * var(--ui-fluid)), 18px); } .kfc-mega-l, .kfc-mega, .kfc-hero-xxl, .kfc-hero-xl, .kfc-hero { font-family: var(--ui-font-display); font-weight: 900; font-style: normal; text-transform: uppercase; letter-spacing: 0; } .kfc-h1, .kfc-h2, .kfc-h3, .kfc-h4, .kfc-h5, .kfc-button, .kfc-button-sm, h1, h2, h3, h4, .heading { font-family: var(--ui-font-heading); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0; margin: 0; } .kfc-subtitle-1, .kfc-subtitle-2, .kfc-body-1, .kfc-body-2, .kfc-caption, .kfc-overline { font-family: var(--ui-font-body); font-style: normal; letter-spacing: 0; } .kfc-mega-l { font-size: var(--t-mega-l); line-height: .93; } /* 260/280 */ .kfc-mega { font-size: var(--t-mega); line-height: .9; } /* 194/214 */ .kfc-hero-xxl { font-size: var(--t-hero-xxl); line-height: .9; } /* 108/120 */ .kfc-hero-xl { font-size: var(--t-hero-xl); line-height: .9; } /* 86/96 */ .kfc-hero { font-size: var(--t-hero); line-height: 68px; } .kfc-h1, h1 { font-size: var(--t-h1); line-height: 1; } .kfc-h2, h2 { font-size: var(--t-h2); line-height: 1; } .kfc-h3, h3 { font-size: var(--t-h3); line-height: 1; } .kfc-h4, h4 { font-size: var(--t-h4); line-height: 1; letter-spacing: .25px; } .kfc-h5 { font-size: var(--t-h5); line-height: 1; letter-spacing: .25px; } .kfc-subtitle-1 { font-weight: 300; font-size: var(--t-subtitle-1); line-height: 24px; } .kfc-subtitle-2 { font-weight: 300; font-size: 14px; line-height: 20px; } .kfc-body-1 { font-weight: 300; font-size: 16px; line-height: 24px; } .kfc-body-2 { font-weight: 300; font-size: 14px; line-height: 24px; } .kfc-caption { font-weight: 300; font-size: 12px; line-height: 16px; } .kfc-overline { font-weight: 400; font-size: 12px; line-height: 16px; text-transform: uppercase; } .kfc-button { font-size: 16px; line-height: 24px; } .kfc-button-sm { font-size: 14px; line-height: 16px; } /* ------------------------------------------------------------------ Stripes: the category divider "Our iconic bucket stripes reimagined using typography... Only used with Mega and Hero sizes" (stated). Roles: the category divider on the PLP and the PDP, and the transition into another section. The word, in Brand Red, repeated end to end in a line that runs off both edges of the page; it translates horizontally as the page scrolls vertically (a parallax marquee). The heading IS the band:

carries the one real word for a screen reader, and the repeats beside it are aria-hidden. It is clipped by its own box, so it can never make the page scroll sideways. motion.js moves .stripes-track; with JavaScript off or reduced motion it simply stands still, starting at the grid margin like a heading. */ .stripes { display: block; overflow: hidden; white-space: nowrap; color: var(--ui-primary); font-family: var(--ui-font-display); font-weight: 900; font-style: normal; text-transform: uppercase; letter-spacing: 0; font-size: var(--w-type-category); line-height: .9; margin: 0; /* Out of the .wrap to the page edges, then the first word back on the grid margin. */ margin-left: calc(-1 * var(--ui-grid-margin)); padding-left: var(--ui-grid-margin); /* Runs past the right edge of the screen, whatever the container;
clips it there. */ margin-right: -50vw; /* The Stripes face overhangs its em box on the slant; this keeps the clip off the glyphs. */ padding-block: .06em .02em; } .stripes-track { display: inline-block; will-change: transform; } .stripes-word { display: inline; } /* The named band (partials/stripes): the first name whole in a box at most the column wide, the repeats in a clipped strip beside it that runs off the screen (main clips it) and is the only thing the marquee moves. The band's own font-size is the ceiling; the row starts at Hero 72, wrapping at its spaces, until motion.js fits it (fitStripes). */ .stripes-named { container-type: inline-size; overflow: visible; white-space: normal; margin-right: 0; } .stripes-row { display: flex; align-items: flex-end; margin-right: -100vw; font-size: var(--t-hero); } .stripes-named .stripes-word { flex: 0 1 auto; min-width: 0; max-width: 100cqi; white-space: normal; } .stripes-rest { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; margin-left: .3em; } .stripes-rest .stripes-track > span { margin-right: .25em; } p { margin: 0 0 var(--ui-space-3); } .muted { color: var(--ui-text-secondary); } .small { font-size: 14px; line-height: 20px; } /* ------------------------------------------------------------------ header: black bar, red lettermark KFC's own (plp-desktop-final / pdp-desktop / our-history): lettermark, three links in Sans Light at Subtitle size, the current one in Brand Red; on the right the account link with a Lucide user icon, START ORDER (or the order's pickup/delivery + restaurant, underlined, with a chevron) and the cart as a bucket with its count. Radius 0 (structural). On a phone the bar is the lettermark and START ORDER only: the rest is in the tab bar at the foot. */ .site-header { position: relative; background: var(--ui-black); color: var(--ui-white); border-radius: var(--ui-radius-none); } /* QA E10: from 600px the header is sticky on scroll (as the guide draws it), so the bucket, its count and the drop animation are on screen when something is added from far down the menu. On a phone the cart is the red bar at the foot instead, and the screen height is kept. --header-h is what every other sticky thing and every anchor offsets by. */ :root { --header-h: 0px; } @media (min-width: 600px) { :root { --header-h: 64px; } .site-header { position: sticky; top: 0; z-index: 30; } html { scroll-padding-top: var(--header-h); } } /* The header hugs the VIEWPORT, not the content grid (plp-desktop-final: lettermark ~36px from the left edge, the bucket ~48px from the right, at every width): its own edge margin, never capped. */ .site-header .wrap { display: flex; align-items: center; gap: var(--ui-space-4); min-height: 64px; max-width: none; padding: 0 var(--ui-grid-margin); } @media (min-width: 1136px) { .site-header .wrap { padding: 0 var(--ui-space-9); } } /* Lettermark clear space: 20% of its height on every side (32px mark -> 6.4px, padded to 8px). */ .logo { display: inline-flex; align-items: center; padding: var(--ui-space-2); margin-left: calc(-1 * var(--ui-space-2)); text-decoration: none; } .logo img { height: 32px; width: auto; } .site-nav { display: none; } .site-nav a.nav-link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--ui-space-3); color: var(--ui-white); text-decoration: none; font-weight: 300; font-size: var(--t-subtitle-1); line-height: 24px; white-space: nowrap; } .site-nav a.nav-link:hover, .site-nav a.nav-link[aria-current="page"] { color: var(--ui-primary); } .site-actions { display: flex; align-items: center; gap: var(--ui-space-4); margin-left: auto; } .nav-account { align-items: center; gap: var(--ui-space-1); min-height: 44px; color: var(--ui-white); text-decoration: none; font-size: 14px; font-weight: 300; white-space: nowrap; } .nav-account[aria-current="page"], .nav-account:hover { color: var(--ui-primary); } .nav-order { align-items: center; gap: var(--ui-space-1); min-height: 44px; color: var(--ui-white); font-size: 14px; font-weight: 400; white-space: nowrap; text-underline-offset: 3px; } .nav-order-type { text-decoration: underline; } .nav-order-store { text-decoration: underline; } /* The bucket: KFC's Bucket Device in white on the black bar, the count set into it in black. */ .header-bucket, .cart-bucket { position: relative; display: inline-flex; align-items: center; justify-content: center; } .header-bucket { width: var(--w-tap-inline); height: var(--w-tap-inline); color: var(--ui-white); text-decoration: none; } /* Phone: the cart is the red bar at the foot, so the bar up here holds only the lettermark and START ORDER (mobile-plp-and-story). */ .nav-account, .header-bucket { display: none; } /* Once ordering has started, the order's pickup/delivery + restaurant takes START ORDER's place at every width (QA E09: on a phone it used to vanish, leaving only the lettermark). */ .nav-order { display: inline-flex; min-width: 0; max-width: 60vw; } .nav-order-store { overflow: hidden; text-overflow: ellipsis; } .header-bucket .xicon { width: 32px; height: 25px; } .bucket-n { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-40%); text-align: center; font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; font-size: 13px; line-height: 1; color: var(--ui-black); } .header-bucket:hover, .header-bucket[aria-current="page"] { color: var(--ui-primary); } /* The Cart expressive animation (ui-motion 15, MEASURED ~870ms): an item drops into the bucket, the bucket tips and bounces, the count rolls up. motion.js adds .is-dropping on every add. */ @keyframes kfc-bucket { 0%, 30% { transform: none; } 45% { transform: rotate(-8deg) translateY(2px); } 60% { transform: rotate(4deg) translateY(-3px); } 75% { transform: rotate(-2deg); } 100% { transform: none; } } @keyframes kfc-drop { 0% { transform: translate(-10px, -26px) scale(.6); opacity: 0; } 15% { opacity: 1; } 40% { transform: translate(0, -2px) scale(.5); opacity: 1; } 45%, 100% { transform: translate(0, 4px) scale(.3); opacity: 0; } } @keyframes kfc-roll { 0%, 40% { transform: translateY(-40%); opacity: 1; } 55% { transform: translateY(-110%); opacity: 0; } 56% { transform: translateY(40%); opacity: 0; } 100% { transform: translateY(-40%); opacity: 1; } } .motion-ok .is-dropping .xicon-bucket { animation: kfc-bucket 870ms var(--ui-ease-out); transform-origin: 50% 100%; } .motion-ok .is-dropping .bucket-n { animation: kfc-roll 870ms var(--ui-ease-standard); } .motion-ok .is-dropping::before { content: ""; position: absolute; inset: 0; width: 12px; height: 12px; margin: auto; background: currentColor; animation: kfc-drop 870ms var(--ui-ease-in) both; } .header-bucket:hover .bucket-n, .header-bucket[aria-current="page"] .bucket-n { color: var(--ui-white); } /* START ORDER: the primary button, compact in the bar. m1: 44px, the WCAG 2.5.8 minimum. Review #39: white on Brand Red is 4.27:1, AA only as large text, so the label stays at the CTA size (19px Heavy) instead of shrinking to 16px in the bar. */ .site-header .btn { min-height: 44px; padding: 0 var(--ui-space-4); font-size: var(--ui-cta-size); } @media (min-width: 600px) { .header-bucket { display: inline-flex; } } @media (min-width: 900px) { .site-nav { display: flex; align-items: center; gap: var(--ui-space-2); margin-left: var(--ui-space-6); } .nav-account { display: inline-flex; } .nav-order { max-width: none; } } /* ------------------------------------------------------------------ phone tab bar (<600px) KFC's app bar (mobile-cart-bar-and-tabbar, ui-motion 17): black, four items, an expressive icon over a Sans label, white — the current one Brand Red. Fixed to the foot of the screen; the page keeps room for it, and the red cart bar sits on top of it. */ :root { --tab-h: 64px; } .tab-bar { display: none; } .xicon { display: block; width: 28px; height: 28px; } .xi-burst { opacity: 0; } @media (max-width: 599px) { body:has(> .tab-bar) { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); } .tab-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 26; display: grid; grid-template-columns: repeat(4, 1fr); height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--ui-black); color: var(--ui-white); border-radius: var(--ui-radius-none); } .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-1); min-height: var(--tab-h); color: var(--ui-white); text-decoration: none; font-size: 12px; line-height: 16px; font-weight: 300; cursor: pointer; list-style: none; } .tab[aria-current="page"], .nav-menu[open] > .tab { color: var(--ui-primary); } } /* The expressive icons' own motion (ui-motion 13-16, MEASURED), played once by the CURRENT tab as its page opens, and again on a press: Home - the awning ripples; Menu - the box lid lifts and tilts about -5deg (370ms); Rewards - the heart turns red with a burst (800ms). Transform and opacity only; nothing with reduced motion. */ @keyframes kfc-awning { 0%, 100% { transform: none; } 40% { transform: scaleY(.82) translateY(-1px); } 70% { transform: scaleY(1.06); } } @keyframes kfc-lid { 0%, 100% { transform: none; } 45% { transform: translateY(-3px) rotate(-5deg); } } @keyframes kfc-burst { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } } @keyframes kfc-beat { 0%, 100% { transform: none; } 30% { transform: scale(1.12); } } .xi-awning, .xi-lid, .xi-burst, .xi-heart { transform-box: fill-box; transform-origin: 50% 100%; } .xi-lid { transform-origin: 10% 100%; } .xi-burst { transform-origin: 50% 60%; } .motion-ok .tab[aria-current="page"] .xi-awning, .motion-ok .tab:active .xi-awning { animation: kfc-awning 400ms var(--ui-ease-out); } .motion-ok .tab[aria-current="page"] .xi-lid, .motion-ok .tab:active .xi-lid { animation: kfc-lid 370ms var(--ui-ease-out); } .motion-ok .tab[aria-current="page"] .xi-burst, .motion-ok .tab:active .xi-burst { animation: kfc-burst 800ms var(--ui-ease-out); fill: var(--ui-accent-2); } .motion-ok .tab[aria-current="page"] .xi-heart, .motion-ok .tab:active .xi-heart { animation: kfc-beat 800ms var(--ui-ease-out); } /* Phone menu, opened from the tab bar's More: a black sheet docked above the bar (dialog radius 16, top corners only, stated). Items are 56px tall (over the 44px minimum), Serif Heavy Italic caps as in KFC's own digital-guidelines navigation, a Grey 700 rule between them. z-index 24 sits under the sticky cart bar (25), which hides while the menu is open. */ .nav-menu { display: contents; } .nav-menu-button::-webkit-details-marker { display: none; } .nav-menu-button::marker { content: ""; } .nav-menu-panel { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); z-index: 24; background: var(--ui-black); border-radius: var(--ui-radius-200) var(--ui-radius-200) 0 0; max-height: calc(100dvh - var(--tab-h) - 64px); overflow-y: auto; } .nav-menu-panel ul { list-style: none; margin: 0; padding: var(--ui-space-2) var(--ui-grid-margin) var(--w-gap-block); } .nav-menu-panel li + li { border-top: var(--ui-border-100) solid var(--ui-grey-700); } .nav-menu-panel a { display: flex; align-items: center; min-height: 56px; color: var(--ui-white); text-decoration: none; font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 20px; line-height: 24px; } .nav-menu-panel a[aria-current="page"], .nav-menu-panel a:focus-visible { color: var(--ui-primary); } @media (hover: hover) { .nav-menu-panel a:hover { color: var(--ui-primary); } } body:has(.nav-menu[open]) .cart-bar { visibility: hidden; } @media (min-width: 600px) { .nav-menu { display: none; } } /* ------------------------------------------------------------------ buttons Primary: Brand Red fill, white Serif Heavy Italic caps at 19px (large text, see --ui-cta-size), radius 4. Press: scale .97 + label roll (MEASURED from KFC's button video). */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-2); min-height: var(--tap); padding: 0 var(--ui-space-5); border: 0; border-radius: var(--ui-radius-40); background: var(--ui-cta-bg); color: var(--ui-cta-text); font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: var(--ui-cta-size); line-height: 24px; letter-spacing: 0; text-decoration: none; cursor: pointer; transition: transform var(--ui-dur-press) var(--ui-ease-out), background-color var(--ui-dur-press) var(--ui-ease-out); } .btn:focus-visible { background: var(--ui-cta-bg-pressed); } @media (hover: hover) { .btn:hover { background: var(--ui-cta-bg-pressed); } } .btn:active { transform: scale(.968); background: var(--ui-cta-bg-pressed); } /* MEASURED, ui-motion 01 */ .btn.btn[disabled], .btn.btn[aria-disabled="true"], fieldset:disabled .btn.btn { background: var(--ui-grey-100); color: var(--ui-grey-500); cursor: not-allowed; transform: none; } .btn-block { display: flex; width: 100%; } /* A class selector beats the browser's own [hidden] rule, so .btn-block[hidden] stayed on screen. That is what kept the dead grey CONTINUE TO PAYMENT block visible after the payment step opened (B4) — the same trap already documented for .cart-bar[hidden] and .progress[hidden]. */ .btn[hidden], .btn-block[hidden] { display: none; } .btn-large { min-height: 56px; } /* Secondary: black outline on white, black label (21:1), KFC Button size 16px. */ .btn-outline { background: var(--ui-white); color: var(--ui-black); box-shadow: inset 0 0 0 1px var(--ui-black); font-size: 16px; } .btn-outline:focus-visible, .btn-outline:active { background: var(--ui-grey-100); color: var(--ui-black); } @media (hover: hover) { .btn-outline:hover { background: var(--ui-grey-100); color: var(--ui-black); } } .btn-count { display: inline-block; min-width: 24px; padding: 0 var(--ui-space-1); border-radius: var(--ui-radius-40); background: var(--ui-white); color: var(--ui-black); font-family: var(--ui-font-body); font-style: normal; font-weight: 400; font-size: 14px; line-height: 24px; text-align: center; } /* Label roll: motion.js wraps a text-only label in two stacked copies (the copy is aria-hidden). */ .btn-roll { display: inline-grid; overflow: hidden; line-height: inherit; } .btn-roll > span { grid-area: 1 / 1; transition: transform var(--ui-dur-label-roll) var(--ui-ease-standard); } .btn-roll > span + span { transform: translateY(110%); } .btn:active .btn-roll > span:first-child { transform: translateY(-110%); } .btn:active .btn-roll > span + span { transform: none; } @media (hover: hover) { .btn:not([disabled]):not([aria-disabled="true"]):hover .btn-roll > span:first-child { transform: translateY(-110%); } .btn:not([disabled]):not([aria-disabled="true"]):hover .btn-roll > span + span { transform: none; } } .text-link { display: inline-flex; align-items: center; gap: var(--ui-space-1); min-height: var(--tap); color: var(--ui-text-link); font-weight: 400; text-underline-offset: 3px; } .link-button { background: none; border: 0; padding: 0 var(--ui-space-1); min-height: var(--tap); cursor: pointer; font-weight: 400; color: var(--ui-text-link); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; } /* M10 — spec §5, verbatim: functional icons are Black on light and "are never red in the functional set". The label stays Digital Red; only the glyph goes black. */ .text-link .icon, .link-button .icon, .store-current .change .icon, .locate-button .icon { color: var(--ui-black); } /* ------------------------------------------------------------------ page frame */ main { display: block; } /* The Stripes bands run off the right edge of the screen on purpose. `clip`, not `hidden`: it stops the page scrolling sideways without making
a scroll container, so the sticky category strip and cart bar keep working. */ main { overflow-x: clip; } /* Mobile pages were vertically heavy and desktop ones compressed, so the frame is not one number: 20px above the first thing on a phone, the stated 32 from 600px up. */ .page { padding-top: var(--ui-space-5); padding-bottom: var(--ui-space-12); } @media (min-width: 600px) { .page { padding-top: var(--ui-space-8); padding-bottom: var(--ui-space-14); } } .page-head { margin-bottom: var(--ui-space-6); } .page-head p { margin-top: var(--ui-space-3); } .notice { border-radius: var(--ui-radius-100); padding: var(--ui-space-3) var(--ui-space-4); background: var(--ui-warning-light); color: var(--ui-black); margin: 0 0 var(--ui-space-4); } .error-text { color: var(--ui-error-dark); font-weight: 400; } [role="alert"]:empty { display: none; } /* ------------------------------------------------------------------ THE HOME PAGE * kfc-aruba.com's brand home, rebuilt: hero slides, the order block, the menu row, the two * worlds, favourites, events, birthdays, careers, find your KFC. Bands alternate black / white / * grey / red the way KFC market sites do, every band on the page grid, no cards, no gradients. */ /* Hero (homepage-4-languages, video19): the headline ON the photo, top left, in white, with a small red ORDER NOW under it and KFC's dash pagination below — no panel, no gradient. KFC's hero photos are shot dark where the words go; a soft text shadow (not a box) keeps AA contrast on a lighter frame, and guidelines.cjs measures it. Homepage hero banner 2:1 (stated) from 900px, capped so the order block still starts in the first screen; 4:5 on a phone, as KFC's mobile hero cards are. */ .home-hero { position: relative; background: var(--ui-black); color: var(--ui-white); } .home-slides { list-style: none; margin: 0; padding: 0; } .home-hero-many .home-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .home-hero-many .home-slides::-webkit-scrollbar { display: none; } .home-hero-many .home-slide { flex: 0 0 100%; scroll-snap-align: start; } .motion-ok .home-hero-many .home-slides { scroll-behavior: smooth; } .home-slide { position: relative; } .home-slide-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 30%; background: var(--ui-grey-800); } /* QA E11: the words never sit on the photograph. Over this campaign photo the subtitle measured ~2.0:1 and the red accent ~2.4:1, and no scrim short of blacking the picture out fixes a red word over a lit face. So the text sits on the hero's own black: below the photo on a phone and tablet, in a left column beside it from 900px (image on the right, cropped to fit). White on black is 21:1, Brand Red on black 4.9:1 (AA for the large accent and for body). */ .home-slide-text { position: static; padding: var(--w-gap-block) 0 var(--ui-space-8); } .home-slide-panel { max-width: 640px; } /* Overline (stated): Sans Regular 12/16 caps. */ .home-slide-text .kfc-overline { margin: 0 0 var(--ui-space-2); color: var(--ui-white); font-size: 12px; line-height: 16px; font-weight: 400; } /* Serif H1 on a phone; Stripes Hero from 900px (Stripes is Mega and Hero sizes only, and a 72px Stripes word does not fit 358px). */ .home-slide-title { margin: 0; font-size: var(--t-h1); line-height: 1; color: var(--ui-white); max-width: 11ch; } .home-slide-title span { display: block; } .home-red { color: var(--ui-primary); } .home-slide-sub { margin: var(--ui-space-3) 0 0; font-size: 16px; line-height: 24px; max-width: 34ch; } /* Review #39: 19px, not 14px: a red CTA's white label passes AA only as large text. */ .home-slide .home-actions .btn { min-height: var(--w-tap-inline); padding: 0 var(--ui-space-4); font-size: var(--ui-cta-size); line-height: 20px; text-shadow: none; } /* On a photo the secondary button is filled black: a see-through outline over a light part of the picture was unreadable. */ .home-slide .btn-outline-light { background: var(--ui-black); } .home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3) var(--w-gap-inline); margin: var(--w-gap-block) 0 0; } @media (max-width: 599px) { .home-slide-img { aspect-ratio: 4 / 3; } } @media (min-width: 600px) { .home-slide-img { aspect-ratio: 16 / 9; } } @media (min-width: 900px) { .home-slide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } .home-slide-img { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 3; height: 100%; max-height: calc(100vh - 64px - 120px); min-height: 440px; } .home-slide-text { grid-column: 1; grid-row: 1; padding: var(--ui-space-8) 0; } .home-slide-text .wrap { max-width: none; padding-right: var(--w-gap-block); } .home-slide-title { font-family: var(--ui-font-display); font-style: normal; font-size: var(--t-hero); line-height: 68px; max-width: 9ch; } } .home-slide-nav { background: var(--ui-black); } .home-slide-nav .wrap { display: flex; gap: var(--ui-space-2); padding-top: var(--ui-space-2); padding-bottom: var(--ui-space-3); } /* Dash pagination (KFC's carousels): a white dash per slide, the current one Brand Red. The tap target stays 44px; the dash is drawn inside it. The slide number is read, not shown. */ .home-slide-nav a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: var(--w-tap-inline); min-height: var(--w-tap-inline); color: transparent; text-decoration: none; } .home-slide-nav a::after { position: absolute; left: 10px; top: 50%; } .home-slide-nav a::after { content: ""; width: 24px; height: 3px; background: var(--ui-white); } .home-slide-nav a[aria-current="true"]::after { background: var(--ui-primary); } /* Buttons on black and on red. The CTA red on the brand red would vanish, so on red the primary button turns white with a black label; on black the secondary is a white outline. */ .btn-outline-light { background: transparent; color: var(--ui-white); box-shadow: inset 0 0 0 1px var(--ui-white); } .btn-outline-light:focus-visible, .btn-outline-light:active { background: var(--ui-grey-800); } @media (hover: hover) { .btn-outline-light:hover { background: var(--ui-grey-800); } } .btn-light { background: var(--ui-white); color: var(--ui-black); } .btn-light:focus-visible, .btn-light:active { background: var(--ui-grey-100); color: var(--ui-black); } @media (hover: hover) { .btn-light:hover { background: var(--ui-grey-100); color: var(--ui-black); } } .text-link-light { color: var(--ui-white); } /* The order block on the home page: one grey band straight under the hero. No white gap and no second black rule above it — the hero's own black edge is the divider (Morris, 1850px shot). */ .home-order { background: var(--ui-grey-50); scroll-margin-top: 0; } .home-order .order-setup { padding: 0; } .home-order .order-block { margin: 0; padding: var(--w-gap-block) 0 0; background: transparent; border-top: 0; } .home-order-go { margin: 0; padding: var(--w-gap-block) 0 var(--w-gap-section); } @media (min-width: 600px) { .home-order .order-block { padding-top: var(--w-gap-section); } } /* A home band: its heading and its one link on one line. */ .home-block { padding: var(--ui-space-12) 0 0; } .home-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ui-space-2) var(--w-gap-inline); margin-bottom: var(--w-gap-block); } .home-head h2 { margin: 0; } /* Under a Stripes band the band IS the heading; the row keeps only its one link. */ .home-head-link { justify-content: flex-start; margin: var(--ui-space-2) 0 var(--w-gap-inline); } /* The menu: KFC's category tiles (mobile-category-tiles) - a two-column grid, the name top-left in Serif Heavy Italic caps, the cut-out under it, thin black rules between the tiles; the featured tile (the offers) in Herbs. From 1136 it is one row of eight. Radius 0 (tiles). */ .home-categories .stripes { margin-bottom: 0; } .home-category-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: var(--ui-border-100) solid var(--ui-black); border-left: var(--ui-border-100) solid var(--ui-black); } .home-category-list li { border-right: var(--ui-border-100) solid var(--ui-black); border-bottom: var(--ui-border-100) solid var(--ui-black); } .home-category-list a { display: flex; flex-direction: column; justify-content: space-between; gap: var(--ui-space-2); min-height: 150px; height: 100%; padding: var(--ui-space-3); text-decoration: none; color: var(--ui-black); border-radius: var(--ui-radius-none); } .home-category-list img { width: 88px; height: 88px; object-fit: contain; align-self: center; order: 2; } .home-category-list span { order: 1; font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 16px; line-height: 1; } .home-category-featured a { background: var(--ui-accent-1); } @media (hover: hover) { .home-category-list a:hover span { color: var(--ui-primary-text); } .home-category-featured a:hover span { color: var(--ui-black); } } @media (min-width: 600px) { .home-category-list { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1136px) { .home-category-list { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; } .home-category-list a { min-height: 180px; } } /* The two worlds: two photos, side by side from 900, each with its words on black under it. */ .home-worlds { display: grid; margin-top: var(--ui-space-12); background: var(--ui-black); color: var(--ui-white); } @media (min-width: 900px) { .home-worlds { grid-template-columns: 1fr 1fr; } } .home-world { display: flex; flex-direction: column; } .home-world img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .home-world-text { padding: var(--w-gap-block) var(--ui-grid-margin) var(--w-gap-section); } .home-world-text .kfc-overline { margin: 0 0 var(--ui-space-2); color: var(--ui-grey-200); font-size: 14px; line-height: 20px; } .home-world-text h2 { margin: 0 0 var(--ui-space-3); color: var(--ui-white); } .home-world-text > p { max-width: 46ch; margin: 0 0 var(--w-gap-block); font-size: 16px; line-height: 24px; } .home-world-text > p:last-child { margin: 0; } @media (min-width: 1136px) { .home-world-text { padding: var(--w-gap-section) var(--ui-space-12) var(--ui-space-12); } } /* Signed in (homepage-4-languages): "WELCOME BACK," in Serif caps with the name in Brand Red. */ .home-welcome { margin: 0; padding-top: var(--w-gap-inline); padding-bottom: var(--w-gap-inline); font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: var(--t-h3); line-height: 1; } .home-welcome span { display: block; color: var(--ui-primary); } /* The statement block: the brand line huge in Serif Heavy Italic caps (H1 up to Hero size is the heading face, not Stripes: it is a sentence), the Original Recipe stamp beside it, and KFC's Colonel <-> Stripes lettermark loop. On a phone the loop sits under the words. */ .home-statement { padding: var(--ui-space-12) 0; } .home-statement .wrap { display: grid; gap: var(--w-gap-block); align-items: center; } .home-statement-text { position: relative; } .home-statement-title { font-size: clamp(40px, calc(40px + 32 * var(--ui-fluid)), 72px); line-height: 1; max-width: 9ch; margin-bottom: var(--w-gap-inline); } .home-stamp { width: clamp(96px, 18vw, 150px); height: auto; margin: 0 0 var(--w-gap-inline); } .home-statement-motion { display: block; width: min(100%, 360px); margin: 0 auto; } @media (min-width: 900px) { .home-statement .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--ui-space-12); } .home-stamp { position: absolute; right: 0; top: 0; } } /* The Offers & Rewards band: black, entered through KFC's slanted wipe (transition_3: a black edge at the bucket's angle, drawn as a clip-path), the title in red Serif caps, a sideways row of 3:4 cards. The row is scroll-snap; the card that is not the active one sits at 0.92 and grows to full size as it becomes active (ui-motion 06), which motion.js drives. */ .home-offers { margin-top: var(--ui-space-12); padding: calc(var(--ui-space-12) + 4vw) 0 var(--ui-space-12); background: var(--ui-black); color: var(--ui-white); clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); } .home-offers-title { color: var(--ui-primary); margin: 0; } .home-offer-row { list-style: none; margin: var(--w-gap-block) calc(-1 * var(--ui-grid-margin)) 0; padding: 0 var(--ui-grid-margin); display: grid; grid-auto-flow: column; grid-auto-columns: min(72%, 280px); gap: var(--ui-grid-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ui-grid-margin); scrollbar-width: none; } .home-offer-row::-webkit-scrollbar { display: none; } .home-offer-row > li { scroll-snap-align: start; transform-origin: 50% 100%; } .motion-ok .home-offer-row > li { transition: transform var(--ui-dur-card, 250ms) var(--ui-ease-out); } .motion-ok .home-offer-row > li.is-near { transform: scale(.92); } /* Peek (ui-motion 07): an idle row hints the next card, out a third of a card and back. */ @keyframes kfc-peek { 0%, 100% { translate: 0 0; } 50% { translate: -33% 0; } } .motion-ok [data-carousel].is-peeking > li { animation: kfc-peek var(--ui-dur-peek) var(--ui-ease-standard); } @media (min-width: 1136px) { .home-offer-row { grid-auto-columns: calc((100% - 2 * var(--ui-grid-margin) - 3 * var(--ui-grid-gutter)) / 4); } } /* QA: at 1440 the last card (Join KFC Aruba Rewards) was cut by the screen edge mid-sentence. On a desktop the favourites are laid out whole on the grid, wrapping, never scrolled off the edge: five in a row when there are five, three when there are six, otherwise four. */ @media (min-width: 1136px) { .home-offer-row { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin-left: 0; margin-right: 0; padding: 0; row-gap: var(--w-gap-section); } .home-offer-row:has(> li:nth-child(5)):not(:has(> li:nth-child(6))) { grid-template-columns: repeat(5, minmax(0, 1fr)); } .home-offer-row:has(> li:nth-child(6)):not(:has(> li:nth-child(7))) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-offer-row > li.is-near { transform: none; } } .home-offers .offer-title, .home-offers .offer-price, .home-offers .offer-window { color: var(--ui-white); } .home-offers .offer-window { color: var(--ui-grey-200); } .offer-rewards-card { height: 100%; justify-content: flex-end; padding: var(--w-gap-block); background: var(--ui-primary); aspect-ratio: 3 / 4; } /* In the desktop grid the card fills its own cell; the 3:4 ratio on a row-height card made it wider than the column and pushed it off the screen (QA). */ @media (min-width: 1136px) { .offer-rewards-card { width: 100%; aspect-ratio: auto; } } .offer-rewards-card .offer-title { font-size: var(--t-h3); -webkit-line-clamp: 4; line-clamp: 4; } .offer-rewards-card .btn { align-self: flex-start; margin-top: var(--ui-space-2); } /* Order again: the signed-in customer's own last orders, a row of plain cards on a rule. */ .home-again-title { margin: 0 0 var(--w-gap-inline); color: var(--ui-primary); } .home-again-row { list-style: none; margin: 0; padding: var(--w-gap-inline) 0 0; display: grid; gap: var(--ui-grid-gutter); border-top: var(--ui-border-100) solid var(--ui-grey-200); } @media (min-width: 600px) { .home-again-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1136px) { .home-again-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .home-again-row a { display: flex; flex-direction: column; gap: var(--ui-space-1); padding: var(--w-gap-inline); border: var(--ui-border-100) solid var(--ui-grey-200); border-radius: var(--ui-radius-100); text-decoration: none; color: var(--ui-text); } .home-again-row a:hover { border-color: var(--ui-grey-900); } .home-again-name { font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: var(--t-h5); line-height: 1; } .home-again-meta { font-size: 14px; line-height: 20px; color: var(--ui-text-secondary); } /* Events: dated rows. Only what has not ended; with none, the band is not rendered. */ .home-events h2 { margin: 0 0 var(--w-gap-block); } .home-event-list { list-style: none; margin: 0; padding: 0; border-top: var(--ui-border-400) solid var(--ui-black); } .home-event-list li { padding: var(--w-gap-block) 0; border-bottom: var(--ui-border-100) solid var(--ui-grey-200); } .home-event-when { margin: 0 0 var(--ui-space-1); color: var(--ui-primary); font-size: 16px; line-height: 22px; } .home-event-list h3 { margin: 0 0 var(--ui-space-3); } /* Birthdays: the red band. Photo and words side by side from 900. */ .home-parties { margin-top: var(--ui-space-12); background: var(--ui-primary); color: var(--ui-white); } .home-parties .wrap { display: grid; gap: 0; padding-left: 0; padding-right: 0; max-width: none; } @media (min-width: 900px) { .home-parties .wrap { grid-template-columns: 1fr 1fr; align-items: stretch; } } .home-parties img { display: block; width: 100%; height: 100%; min-height: 240px; aspect-ratio: 3 / 2; object-fit: cover; } .home-parties-text { padding: var(--w-gap-block) var(--ui-grid-margin) var(--w-gap-section); } @media (min-width: 1136px) { .home-parties-text { padding: var(--ui-space-12); } } .home-parties-text .kfc-overline { margin: 0 0 var(--ui-space-2); font-size: 14px; line-height: 20px; } .home-parties-text h2 { margin: 0 0 var(--ui-space-3); color: var(--ui-white); } .home-parties-from { margin: 0 0 var(--ui-space-3); font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 24px; line-height: 1; } .home-parties-text > p { max-width: 48ch; font-size: 16px; line-height: 24px; } .home-parties-packages { list-style: none; margin: var(--w-gap-inline) 0 0; padding: 0; border-top: var(--ui-border-100) solid var(--ui-white); max-width: 480px; } .home-parties-packages li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--w-gap-inline); padding: var(--ui-space-2) 0; border-bottom: var(--ui-border-100) solid var(--ui-white); font-size: 16px; line-height: 22px; } .home-parties-packages strong { font-weight: 400; } /* Careers: words only, on white, at the reading measure. */ .home-careers .kfc-overline { margin: 0 0 var(--ui-space-2); color: var(--ui-text-secondary); font-size: 14px; line-height: 20px; } .home-careers h2 { margin: 0 0 var(--ui-space-3); max-width: 18ch; } .home-careers .answer { max-width: 60ch; } /* The cart bar is sticky at the foot of the screen. A jump to #order, or to anything, must not land under it (Morris's laptop screenshot). */ html:has(.cart-bar:not([hidden])) { scroll-padding-bottom: 96px; } @media (max-width: 599px) { html { scroll-padding-bottom: calc(var(--tab-h) + 16px); } html:has(.cart-bar:not([hidden])) { scroll-padding-bottom: calc(var(--tab-h) + 88px); } } /* ------------------------------------------------------------------ order setup (home) P1-4. A distinct, spacious ordering block rather than a row of outlined boxes: its own band on the page's own grey, a 4px black rule above it — KFC's primary section divider — a heading that says what it is for, and the kiosk's selected treatment on both answers. The band runs to the page edges on a phone by taking the grid margin back and paying it again as padding, so the block is a band and its contents still sit on the grid. */ .order-setup { padding: var(--w-gap-inline) 0 var(--ui-space-1); } .order-block { margin: 0 calc(-1 * var(--ui-grid-margin)); padding: var(--w-gap-block) var(--ui-grid-margin) var(--w-gap-block); background: var(--ui-grey-50); border-top: var(--ui-border-400) solid var(--ui-black); } .order-block-title { margin: 0 0 var(--w-gap-inline); } .fulfilment { display: grid; grid-template-columns: 1fr 1fr; gap: var(--w-gap-tight); margin: 0; } .fulfilment button { display: flex; align-items: center; justify-content: center; gap: var(--w-gap-tight); min-height: 56px; border: var(--ui-border-100) solid var(--ui-grey-200); border-radius: var(--ui-radius-100); /* a selectable card: 1px Grey 200 (stated); the mark carries the contrast */ background: var(--ui-white); color: var(--ui-black); cursor: pointer; font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 16px; } /* Pickup / delivery is the website's version of the kiosk's eat-in / takeaway question, so it gets the kiosk's answer: red line, light red fill, a mark — not a black fill, which read as a toggle switch in a settings form rather than as a choice that had been made. */ .fulfilment button[aria-pressed="true"] { background: var(--w-chosen-fill); border-color: var(--w-chosen-line); border-width: var(--w-chosen-width); color: var(--ui-black); } @media (hover: hover) { .fulfilment button:not([disabled]):hover { border-color: var(--ui-grey-900); } } .fulfilment button[disabled] { color: var(--ui-grey-500); background: var(--ui-grey-50); border-color: var(--ui-grey-200); cursor: not-allowed; } .fulfilment button[disabled] .chosen-mark { border-color: var(--ui-grey-200); } .store-picker > summary { list-style: none; cursor: pointer; } .store-picker > summary::-webkit-details-marker { display: none; } /* The current restaurant, as a row inside the block rather than a form field: white, its own boundary, and the same 8px radius every selectable card on the site uses. */ .store-current { display: flex; align-items: center; gap: var(--ui-space-3); margin-top: var(--w-gap-inline); min-height: 56px; padding: var(--w-gap-tight) var(--ui-space-3); background: var(--ui-white); border: var(--ui-border-100) solid var(--ui-grey-200); border-radius: var(--ui-radius-100); } /* Below 600px the status drops to its own line under the restaurant's name rather than competing with it for the same row — the name is the thing being named and it was the thing that wrapped. */ @media (max-width: 599px) { .store-current { flex-wrap: wrap; row-gap: var(--ui-space-1); } .store-current .status { order: 3; flex-basis: 100%; margin-left: calc(var(--ui-icon-md) + var(--ui-space-3)); } } .store-current .icon { color: var(--ui-black); } .store-current .store-text { flex: 1; min-width: 0; } .store-current .store-label { font-size: 12px; color: var(--ui-text-secondary); display: block; line-height: 16px; } .store-current strong { font-size: 16px; line-height: 20px; } .store-current .change { display: inline-flex; align-items: center; gap: var(--ui-space-1); font-size: 14px; font-weight: 400; color: var(--ui-text-link); text-decoration: underline; text-underline-offset: 3px; } /* m7: the picker had no collapse affordance once open — `.change` was hidden outright and the chevron never flipped. Same control, swapped label, rotated glyph. */ .store-current .change-close { display: none; } .store-picker[open] .change-open { display: none; } .store-picker[open] .change-close { display: inline; } .store-picker[open] .change .icon { transform: rotate(180deg); } .store-current .change .icon { transition: transform var(--ui-dur-press) var(--ui-ease-out); } .status { font-size: 14px; font-weight: 400; white-space: nowrap; } .status-open::before, .status-closed::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--w-gap-tight); vertical-align: 1px; border-radius: var(--ui-radius-none); } .status-open { color: var(--ui-success-dark); } .status-open::before { background: var(--ui-success-main); } .status-closed { color: var(--ui-text-secondary); } .status-closed::before { background: transparent; border: 1.5px solid var(--ui-grey-500); } /* Store tiles = selectable cards: radius 8, 1px Grey 200, selected 1px Grey 900 (+ inset for weight). */ .store-list { list-style: none; margin: var(--ui-space-3) 0 0; padding: 0; display: grid; gap: var(--ui-space-2); } .store-list button { width: 100%; height: 100%; text-align: left; cursor: pointer; background: var(--ui-white); border: var(--ui-border-100) solid var(--ui-grey-200); border-radius: var(--ui-radius-100); padding: var(--ui-space-3) var(--ui-space-4); min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ui-space-1) var(--ui-space-3); align-items: start; align-content: start; } .store-list form { height: 100%; } .store-list button:hover { border-color: var(--ui-grey-900); } /* Same chosen treatment again. A 1px grey-900 hairline plus a 1px inset was the whole signal that this was the restaurant you were ordering from, which is what made a row of four of them read as an administrative form rather than as a choice. */ .store-list button[aria-pressed="true"] { border-color: var(--w-chosen-line); border-width: var(--w-chosen-width); background: var(--w-chosen-fill); box-shadow: none; } .store-list .store-name { font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 16px; line-height: 20px; } .store-list .store-address { grid-column: 1; font-size: 12px; line-height: 16px; color: var(--ui-text-secondary); } /* Whether it is open is its own line under the address, at every width. It used to be a right-hand cell below 1136px and a third line above it, so the same four tiles said the same thing in two different shapes depending on the window. */ .store-list .status { grid-column: 1; margin-top: var(--ui-space-1); } .store-list .chosen-mark { grid-column: 2; grid-row: 1 / span 3; align-self: center; } @media (min-width: 600px) { .store-list { grid-template-columns: 1fr 1fr; gap: var(--ui-grid-gutter); } } @media (min-width: 1136px) { .store-list { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 600px) { .order-setup { padding-top: var(--w-gap-block); } .order-block { padding-top: var(--w-gap-section); padding-bottom: var(--w-gap-section); } .fulfilment { max-width: 420px; gap: var(--w-gap-inline); } } /* Nearest store (store-locate.js): one plain line + a text link, under the picker. */ /* m6: the message and the button that acts on it must stay adjacent. They used to sit at opposite ends of a 1136px row — ~1100px apart — because the line took all the free space. */ .store-locate { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--ui-space-3); margin-top: var(--w-gap-tight); } /* The consequence of the choice, not part of making it: its own space, below the block. */ .order-setup > .notice { margin: var(--w-gap-inline) 0 0; } .nearest-line { margin: 0; flex: 0 1 auto; max-width: 100%; font-size: 14px; line-height: 20px; } .nearest-line[hidden] { display: none; } .locate-button { display: inline-flex; align-items: center; gap: var(--ui-space-1); text-decoration: none; } .locate-button span, .locate-button { text-underline-offset: 3px; } .locate-button[hidden] { display: none; } .deliver-to { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-3); margin-top: var(--ui-space-3); } .deliver-to label { font-weight: 400; font-size: 14px; } .deliver-to select { flex: 1 1 200px; width: auto; } @media (min-width: 1136px) { .order-block .store-locate, .order-block .deliver-to { grid-column: 1 / -1; justify-content: flex-start; } } .login-prompt { display: flex; align-items: center; gap: var(--ui-space-3); margin-top: var(--ui-space-3); font-size: 14px; line-height: 20px; } .login-prompt p { margin: 0; flex: 1 1 0; min-width: 0; } .login-prompt .btn { flex: none; min-height: 44px; } @media (min-width: 1136px) { .order-block { display: grid; grid-template-columns: 420px 1fr; column-gap: var(--ui-space-12); row-gap: var(--w-gap-inline); align-items: center; } /* The picker's own header is a line of text, not a 1280px-wide bar with its status and its Close stranded at opposite ends of the window (the m6 failure, in a different control). */ .order-block .store-picker > summary { max-width: 720px; } .order-block-title { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; } .order-block .fulfilment { grid-column: 1; grid-row: 2; } .order-block .login-prompt { grid-column: 2; grid-row: 2; margin-top: 0; justify-content: flex-end; } .order-block .login-prompt p { flex: 0 1 auto; } .order-block .store-picker { grid-column: 1 / -1; } .order-setup .notice { margin-top: var(--ui-space-4); } /* m7: the summary STAYS. menu.js force-opens the picker at >=1100px, so hiding an open summary here took away both the Close control and the line naming the restaurant, on exactly the screens where the picker is always open. */ .store-picker[open] .store-list { margin-top: var(--ui-space-5); } } .context-line { display: flex; align-items: center; gap: var(--ui-space-3); flex-wrap: wrap; padding: var(--ui-space-3) 0; border-bottom: var(--ui-border-100) solid var(--ui-grey-200); font-size: 14px; } .context-line .spacer { flex: 1; } /* ------------------------------------------------------------------ menu: category strip (sticky) */ .menu-head { padding: var(--ui-space-6) 0 var(--ui-space-2); } /* KFC's PLP puts search at the top right of the listing (plp-desktop-final). */ @media (min-width: 1136px) { .menu-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--w-gap-block); } .menu-head .menu-search { margin-top: 0; } } .category-strip { position: sticky; top: var(--header-h); z-index: 20; background: var(--ui-white); border-bottom: var(--ui-border-100) solid var(--ui-grey-200); } .category-strip ul { list-style: none; margin: 0 auto; padding: var(--ui-space-2) var(--ui-grid-margin); max-width: var(--ui-page-max); display: flex; gap: var(--ui-space-1); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; /* M8: without this, scroll-snap-align: start snaps the first tile PAST the ul's own padding on load, so it sits flush to the viewport edge while everything else on the page starts at the 16px grid margin. */ scroll-padding-left: var(--ui-grid-margin); } .category-strip ul::-webkit-scrollbar { display: none; } /* Eight categories on a strip that scrolls sideways, so the width is not scarce: 104px a tile and a label at 13px, with two lines RESERVED, rather than eight names squeezed into 92px of 12px type with some tiles a line taller than their neighbours. */ .category-strip a { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-1); width: 104px; min-height: var(--tap); padding: var(--ui-space-1) var(--ui-space-1) var(--ui-space-2); text-decoration: none; text-align: center; scroll-snap-align: start; border-bottom: var(--ui-border-300) solid transparent; border-radius: 0; } /* Category switch: the active rule and label cross over rather than snapping, so the strip confirms which section you are in while you scroll past it. */ .motion-ok .category-strip a { transition: border-bottom-color var(--ui-dur-title-line) var(--ui-ease-out); } .motion-ok .category-strip span { transition: color var(--ui-dur-title-line) var(--ui-ease-out); } .category-strip img { width: 56px; height: 56px; object-fit: contain; } /* Overline style (Sans Regular 12 caps). Active = Digital Red + underline (KFC PLP tabs). */ .category-strip span { font-size: 13px; font-weight: 400; text-transform: uppercase; line-height: 16px; min-height: 32px; } .category-strip a[aria-current="true"] { border-bottom-color: var(--ui-primary-text); } .category-strip a[aria-current="true"] span, .category-strip a:hover span { color: var(--ui-primary-text); } /* KFC's mobile PLP (mobile-plp, video 20): the strip is TEXT tabs - Sans, the current one in Digital Red with its underline, synced to the scroll. The photo tiles stay in the markup for the rail's no-JS fallback and are simply not shown. */ .category-strip ul { padding-top: 0; padding-bottom: 0; gap: var(--w-gap-inline); } .category-strip a { width: auto; flex-direction: row; min-height: var(--w-tap-inline); padding: 0 0 2px; white-space: nowrap; } /* hairline: label to its 3px active rule; --ui-strip-h counts it */ .category-strip img { display: none; } .category-strip span { min-height: 0; font-size: 16px; line-height: 24px; font-weight: 400; text-transform: none; } /* The PLP from 1136px, as kfc-aruba.com's own menu draws it (Morris, 2026-09-23): the categories are a ROW of photo tiles across the full width - the category's packshot over its name in Sans caps - under the MENU title, sticky under the header; the listing runs full width below it, four products to a row. Scrolled, the bar shrinks its photos so it does not eat the screen. The same