:root { /* Fallbacks; overridden per-brand via inline vars on . */ --brand-accent: #fcd116; --brand-ink: #031b56; } html, body { margin: 0; padding: 0; } body { align-items: center; /* Design frame background: solid light grey #F2F4F8 (no gradient). */ background-color: #f2f4f8; color: var(--brand-ink); display: flex; flex-direction: column; font-family: "Roboto", Sans-serif; min-height: 100vh; } .main { align-items: center; box-sizing: border-box; display: flex; flex-grow: 1; justify-content: center; padding: 2rem 1rem; width: 100%; } /* ---------- Language switcher ---------- */ .lang-switcher { align-items: center; box-sizing: border-box; display: flex; gap: 0.75rem; justify-content: flex-end; padding: 1rem 1.5rem 0; width: 100%; } .lang-link { color: var(--brand-ink); font-weight: 600; letter-spacing: 0.03em; opacity: 0.55; text-decoration: none; text-transform: uppercase; } .lang-link:hover { opacity: 0.85; } .lang-link.is-active { opacity: 1; text-decoration: underline; text-underline-offset: 4px; } .lang-sep { color: var(--brand-ink); opacity: 0.3; } /* ---------- Card ---------- Exact spec from the Figma "Cut Corner Sheet - Horizontal" (Dev Mode): sheet 992x721, white, 98.0059px top-left chamfer, shadow 0 4px 5.8px rgba(0,0,0,0.02). Children are placed with percentages derived from the sheet's 992-wide coordinate system so the layout scales. */ .card { background-color: #fff; /* Cut top-left corner — the Interparking brand-identity chamfer (98px). */ clip-path: polygon(98px 0, 100% 0, 100% 100%, 0 100%, 0 98px); /* A box-shadow would be clipped flat by clip-path, so cast the shadow with a drop-shadow filter that follows the cut-corner silhouette instead. */ filter: drop-shadow(0 4px 5.8px rgba(0, 0, 0, 0.02)); max-width: 992px; overflow: hidden; width: 100%; } /* Hero zone: 992x371 in the design -> fixed aspect ratio. */ .card-hero { aspect-ratio: 992 / 371; position: relative; } /* Skyline: exact Figma vector (992x237), pinned to the top of the sheet. */ .card-skyline { display: block; height: auto; left: 0; position: absolute; top: 0; width: 100%; } /* Parky: 224.94x170.97 at (384, 129) of the sheet. */ .card-parky { height: auto; left: 38.71%; position: absolute; top: 34.76%; width: 22.674%; z-index: 1; } /* Pcard app icon: 119.47x118.92 at (829, 25) of the sheet. */ .card-app-logo { border-radius: 22%; height: auto; position: absolute; right: 4.384%; top: 6.737%; width: 12.043%; z-index: 2; } /* ---------- Body ---------- Titles start at y=327 in the design, i.e. 44px above the hero's bottom edge (371) — pull the flowing content up by that amount (44/992 = 4.435% of the card width). Bottom padding = the design's 40px sheet inset. */ .card-body { margin-top: -4.435%; padding: 0 2rem 40px; position: relative; text-align: center; z-index: 2; } .card-title { /* Design: Roboto 26px / 800 / line-height 120%. */ font-size: 1.625rem; font-weight: 800; line-height: 1.2; margin: 0; } .card-title span { color: var(--brand-ink); } .card-subtitle { /* Design: Roboto 14px / 400 / #6B7280. */ color: #6b7280; font-size: 0.875rem; margin: 0.5rem 0 0; } /* Feature bullets: Roboto 13px / 600 / ink, 15px below the subtitle. */ .card-features { color: var(--brand-ink); display: flex; flex-wrap: wrap; font-size: 0.8125rem; font-weight: 600; gap: 0.5rem 1rem; justify-content: center; list-style: none; margin: 15px 0 0; padding: 0; } .card-features li { align-items: center; display: flex; } .card-features li::before { background-color: var(--brand-accent); border-radius: 50%; content: ""; display: inline-block; height: 8px; margin-right: 0.4rem; width: 8px; } /* ---------- Download row ---------- Design: badges column (208 wide, 10.4px gap) + QR (216x216, borderless), 31.9px apart, 20px below the titles block. */ .card-download { align-items: center; display: flex; flex-wrap: wrap; gap: 31.9px; justify-content: center; margin-top: 20px; } .store-badges { display: flex; flex-direction: column; gap: 10.4px; } .button-store { display: block; } .button-store .button-store-image { display: block; height: auto; width: 208px; } .qr-code { display: block; } .qr-code img { display: block; height: 216px; width: 216px; } /* ---------- Footer ---------- */ /* Design: 70px-high brand-navy bar with the reversed (white) logo centred. */ .footer { background-color: var(--brand-ink); flex-shrink: 0; text-align: center; width: 100%; } .footer-logo-container { align-items: center; display: flex; height: 70px; justify-content: center; } .footer-logo { /* block, not inline-block: as an inline image it adds a baseline descender gap to the wrapping , which pushes the logo off-centre in the bar. */ display: block; /* Design: logo component box is 58.7px tall inside the 70px bar (the SVG carries its own internal padding). */ height: 58.7px; max-width: 100%; width: auto; } /* The Contipark mark is a two-line lockup whose artwork fills its viewBox edge-to-edge (339x100), unlike the padded Interparking box — so it needs a smaller height to sit comfortably inside the same 70px bar. */ .brand-contipark .footer-logo { height: 40px; } /* ---------- Responsive ---------- */ @media screen and (max-width: 640px) { .card { clip-path: polygon(48px 0, 100% 0, 100% 100%, 0 100%, 0 48px); } .card-body { margin-top: 0; padding: 1rem 1.25rem 2rem; } .card-title { font-size: 1.5rem; } .card-download { flex-direction: column; } .qr-code img { height: 180px; width: 180px; } }