:root { --black: #000000; --near-black: #0F0F0F; --dark: #161616; --gold: #E8AE01; --gold-soft: #C7A557; --grey-bg: #F1F1F1; --white: #FFFFFF; --text: #161616; } /* Custom heading font used across the live site (uploaded there as "karona one") */ @font-face { font-family: 'karona one'; font-display: swap; src: url('../fonts/KronaOne-Regular.ttf') format('truetype'); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Jost', sans-serif; font-weight: 300; color: var(--text); background: var(--white); line-height: 1.75; font-size: 16px; } h1, h2, h3, h4 { font-family: 'karona one', sans-serif; font-weight: 400; line-height: 1.35; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } img { max-width: 100%; height: auto; } /* ---------- Header: single centered title, sticky ---------- */ .site-header { background: var(--white); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(0,0,0,.12); } .header-inner { display: flex; align-items: center; justify-content: center; padding: 8px 20px; } .brand { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 14px; color: #54595F; text-decoration: none; text-align: center; } .brand:hover { color: var(--gold); } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: 'karona one', sans-serif; font-size: 15px; font-weight: 500; text-decoration: none; border: none; border-radius: 0; cursor: pointer; padding: 12px 40px; transition: background .2s, color .2s; text-align: center; } .btn-lg { padding: 15px 75px; } .btn-white { background: var(--white); color: var(--black); } .btn-white:hover { background: #161719; color: var(--white); } .btn-outline { background: var(--white); color: var(--black); border: 1px solid #54595F; } .btn-outline:hover { background: var(--near-black); color: var(--white); } .btn-dark { background: var(--black); color: var(--white); } .btn-dark:hover { background: var(--gold); color: var(--black); } .btn-gold { background: var(--gold); color: var(--black); } .btn-gold:hover { background: var(--white); color: var(--black); } /* ---------- Hero: fixed background, text flows over ---------- */ .hero { position: relative; min-height: 100vh; background: url('../images/photo-1651467606797-e1c660cf3fda-scaled.jpeg') center center / cover no-repeat; color: var(--white); display: flex; align-items: center; padding: 90px 0 70px; } @media (min-width: 1025px) { .hero { background-attachment: fixed; } } .hero-overlay { position: absolute; inset: 0; background: var(--black); opacity: .25; } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.75fr 1fr; gap: 70px; /* Heading lines up with the top of the event cards, as on the live pages. */ align-items: start; width: 100%; /* Wider than the 1200px site container so the heading column matches the live hero (~727px at 1280) — otherwise "Dubai Property" wraps too early. */ max-width: 1300px; } .hero h1 { font-size: 70px; /* Default; overridden per site by the rule home.blade.php pushes into . */ font-family: 'karona one', sans-serif; font-weight: 600; line-height: 1.143; color: var(--gold-soft); margin-bottom: 22px; } .hero-sub { max-width: 70%; font-size: 16px; line-height: 31.2px; color: var(--white); margin-bottom: 26px; } .hero-list { list-style: none; } .hero-list li { padding-left: 30px; position: relative; margin-bottom: 10px; font-weight: 400; } .hero-list li::before { content: ''; position: absolute; left: 0; top: .38em; width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle, var(--gold) 0 3.5px, transparent 4px 5.5px, var(--gold) 6px); } .hero-list.dark li { color: var(--text); } .hero-mini-divider { width: 74px; height: 3px; background: var(--white); margin-top: 30px; } .hero-event-card { background: var(--black); /* Single-expo card. Live sets a 320px floor but its cards run taller once the venue lines wrap (Melbourne renders 489px), so the floor here is raised to keep the box from looking cramped. */ min-height: 440px; padding: 50px 34px; max-width: 425px; width: 100%; justify-self: center; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 12px; align-items: center; } .hero-event-card .event-date { font-size: 38px; font-weight: 600; line-height: 1.47; color: var(--white); } .hero-event-card .event-city { font-size: 35px; font-weight: 400; line-height: 1.43; color: var(--white); } .hero-event-card .event-venue { font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--white); max-width: 340px; } .hero-event-card .btn { margin-top: 14px; } .hero-events { display: flex; flex-direction: column; gap: 26px; align-items: center; width: 100%; } /* Sites running several expos (UK has 4, Australia 6) lay the cards out as a two-column grid with smaller type — matching the live pages — instead of one very tall stack. */ /* Live sizes the multi-expo hero as a percentage of the viewport rather than capping it, so the heading keeps its line count on wide screens. Measured against the live pages: 89% wide, columns 1 : 1.25 with a 32px gutter, which reproduces their copy/card widths at both 1280 and 1900. */ .hero-inner--multi { grid-template-columns: 1fr 1.25fr; gap: 32px; width: 89%; max-width: none; } .hero-events.is-multi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* Live builds these as two stacked columns, so fill top-to-bottom then across — --event-rows is set per page from the event count. */ grid-template-rows: repeat(var(--event-rows, 2), auto); grid-auto-flow: column; gap: 20px 65px; align-items: stretch; } .hero-events.is-multi .hero-event-card { /* Live drops multi-expo cards to a 250px box with 30px padding. */ min-height: 250px; max-width: none; padding: 30px 22px; gap: 10px; } .hero-events.is-multi .event-date, .hero-events.is-multi .event-city { font-size: 20px; font-weight: 600; line-height: 30px; } .hero-events.is-multi .event-venue { font-size: 14px; line-height: 20px; max-width: none; } .hero-events.is-multi .btn { margin-top: 8px; padding: 12px 24px; font-size: 15px; } /* ---------- Sections ---------- */ .section { padding: 80px 0; } .section-grey { background: var(--grey-bg); } .section-title { text-align: center; font-size: 40px; font-weight: 400; line-height: 57.6px; color: var(--dark); margin-bottom: 18px; } .section-title.left { text-align: left; } .section-title.white { color: var(--white); } @media (max-width: 767px) { .section-title { font-size: 30px; line-height: 1.44; } } .gold-divider { width: 90px; height: 4px; background: var(--gold); margin: 0 auto 28px; } .gold-divider.left { margin: 0 0 28px; } .black-divider { width: 74px; height: 15px; background: var(--black); margin: 30px 0; } .section-lead { max-width: 820px; margin: 0 auto 34px; text-align: center; line-height: 1.95; } .section-lead.left { margin: 0 0 34px; text-align: left; } .center-block { text-align: center; } .star-icon { width: 90px; flex-shrink: 0; } /* ---------- Developers: heading left, logo collage right (matches live row layout) ---------- */ .dev-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; } .dev-copy .section-title { max-width: 480px; } .dev-text { font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 300; line-height: 22.4px; color: #7A7A7A; text-align: justify; } .developers-collage { display: block; margin: 0 auto; } @media (max-width: 900px) { .dev-grid { grid-template-columns: 1fr; gap: 36px; } } /* ---------- Emirates: heading left, star + text right, cards below ---------- */ .emirates-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 40px; } .emirates-head .section-title { margin-bottom: 0; max-width: 480px; } .star-row { display: flex; align-items: flex-start; gap: 28px; } .star-row .dev-text { text-align: left; font-size: 15px; line-height: 24px; } @media (max-width: 900px) { .emirates-head { grid-template-columns: 1fr; gap: 30px; } } /* ---------- Emirate cards: 3 cols desktop, 1 col mobile (matches live) ---------- */ .emirate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 40px; justify-items: center; } .emirate-grid img { width: 100%; } /* --------------------------------------------------------------------------- Homepage grids: one fixed box per card, whatever is uploaded. --------------------------------------------------------------------------- These images come from the admin and from the live-site import, and their own dimensions vary — the properties grid alone carries squares, 4:5 portraits and a 16:9 landscape, which used to render as cards 317px to 703px tall side by side. Every card now reserves the same square box and the image fills it, cropped from the centre. A fixed box also means the row no longer reflows as images arrive. Cropping (cover) rather than letterboxing (contain) is deliberate here: an uneven band of background around a photo reads as broken, a slight crop does not. The icon grid below is the exception. --------------------------------------------------------------------------- */ .emirate-grid img, .project-card img, .feature-card img, .team-card img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; /* Shows through transparent PNGs and while the image loads. */ background: #ececec; } @media (max-width: 767px) { .emirate-grid { grid-template-columns: 1fr; } } /* ---------- Project cards: 2 cols desktop, 1 col mobile (matches live) ---------- */ .project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; margin-top: 24px; } @media (max-width: 767px) { .project-grid { grid-template-columns: 1fr; } } .project-card { text-align: center; } /* Image sizing lives in the homepage-grids block above. */ .project-card figcaption { font-family: 'karona one', sans-serif; font-weight: 300; font-size: 25px; margin-top: 14px; color: var(--black); } @media (max-width: 767px) { .project-card figcaption { font-size: 25px; } } /* ---------- Invest from ---------- */ .invest-from { background: var(--white); } .invest-kicker { font-size: 24px; font-weight: 400; line-height: 28.8px; color: var(--black); } .invest-amount { font-size: 32px; font-weight: 400; color: var(--gold); margin: 6px 0 18px; } .invest-from .btn { margin-top: 10px; } /* ---------- Why Dubai ---------- */ .why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px; margin-top: 14px; } .why-card { background: var(--white); padding: 30px 22px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.07); } /* "Why Dubai" holds icons, not photos — these must never be cropped, so they sit centred in a fixed-height box and scale down inside it. */ .why-card img { display: block; height: 64px; width: 100%; max-width: 130px; object-fit: contain; object-position: center; margin: 0 auto 16px; } .why-card h3 { font-size: 20px; font-weight: 400; color: #050505; } @media (max-width: 767px) { .why-grid { grid-template-columns: 1fr; } } /* ---------- Feature cards (solutions / awaits) ---------- */ .card-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 20px auto 40px; } @media (max-width: 900px) { .card-trio { grid-template-columns: 1fr; } } .feature-card { background: var(--white); box-shadow: 0 2px 12px rgba(0,0,0,.08); padding-bottom: 26px; text-align: center; } .feature-card img { margin-bottom: 20px; } /* size: homepage-grids block above */ .feature-card h2 { font-size: 14px; font-weight: 400; line-height: 21px; padding: 0 22px; margin-bottom: 12px; color: var(--black); } .feature-card p { padding: 0 24px; } /* ---------- Team grid (sites whose live page has a team section) ---------- */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 20px auto 40px; } @media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } } .team-card { background: var(--white); box-shadow: 0 2px 12px rgba(0,0,0,.08); padding-bottom: 26px; text-align: center; } .team-card img { margin-bottom: 18px; } /* size: homepage-grids block above */ .team-card h3 { font-size: 16px; font-weight: 500; margin-bottom: 6px; padding: 0 20px; color: var(--black); } .team-card p { padding: 0 20px; font-size: 13px; } /* ---------- Testimonials: fixed background like live ---------- */ .testimonials { position: relative; background: url('../images/photo-1707584492157-909361644c6d.avif') center center / cover no-repeat; padding: 90px 0; color: var(--white); } @media (min-width: 1025px) { .testimonials { background-attachment: fixed; } } .testimonials-overlay { position: absolute; inset: 0; background: var(--black); opacity: .62; } .testimonials-inner { position: relative; z-index: 1; } .testimonials .section-title { margin-bottom: 46px; max-width: 900px; } .testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .testimonial-item { display: flex; align-items: flex-start; gap: 40px; } .testimonial-star { width: 92px; flex-shrink: 0; } .testimonial-item h3 { color: var(--white); font-size: 18px; font-weight: 400; margin-bottom: 12px; font-family: 'karona one', sans-serif; } .testimonial-item p { color: var(--white); line-height: 1.65; font-weight: 300; } .white-divider { width: 64px; height: 18px; background: var(--white); margin-top: 46px; } @media (max-width: 860px) { .testimonial-grid { grid-template-columns: 1fr; gap: 40px; } .testimonial-item { gap: 24px; } .testimonial-star { width: 70px; } } /* ---------- Register ---------- */ .register-section { background: var(--white); } .register-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; } @media (max-width: 860px) { .register-cols { grid-template-columns: 1fr; } } .register-copy p { margin: 18px 0 22px; line-height: 1.95; } .register-copy p strong { font-weight: 600; color: var(--text); } .hero-list.dark li::before { background: radial-gradient(circle, var(--black) 0 3.5px, transparent 4px 5.5px, var(--black) 6px); } .hero-list.dark li { color: #545454; } /* Form card styled to match the live JotForm embed */ .form-card { background: var(--white); border: 1px solid #e3e3e3; font-family: Georgia, 'Times New Roman', serif; } .form-card-head { text-align: center; padding: 26px 24px 20px; border-bottom: 1px solid #e3e3e3; } .form-card-head h3 { font-family: Georgia, 'Times New Roman', serif; font-size: 26px; font-weight: 700; color: #141414; margin-bottom: 6px; } .form-card-head p { font-size: 14px; color: #141414; } .form-card .alert { margin: 18px 26px 0; font-family: 'Jost', sans-serif; } .register-form { padding: 24px 26px 0; } .register-form label { display: block; margin-bottom: 20px; font-weight: 700; font-size: 15px; color: #141414; } .register-form .req { color: #d0021b; } .register-form .field-hint { display: block; font-size: 12px; font-weight: 400; color: #57647e; margin-top: 4px; } .register-form input, .register-form select, .register-form textarea { display: block; width: 100%; padding: 10px 12px; margin-top: 8px; border: 1px solid #b8bdc9; border-radius: 3px; background: var(--white); color: var(--text); font-size: 15px; font-family: inherit; font-weight: 400; } .register-form .field-narrow input { max-width: 220px; } .register-form input:focus, .register-form select:focus, .register-form textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); } .form-card-foot { border-top: 1px solid #e3e3e3; margin: 6px -26px 0; padding: 22px 26px; text-align: center; } .btn-book { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; font-weight: 700; background: var(--black); color: var(--white); border: none; border-radius: 4px; padding: 12px 42px; cursor: pointer; } .btn-book:hover { background: #2b2b2b; } .hp-field { position: absolute !important; left: -9999px !important; height: 0; width: 0; opacity: 0; } /* JotForm iframe embed (matches the live site's registration form) */ .form-embed { width: 100%; } .form-embed iframe { width: 100%; min-width: 100%; max-width: 100%; display: block; border: none; } /* ---------- Admin preview bar (scheduled/draft post viewed by a signed-in admin) ---------- */ .preview-bar { background: #1f4fa3; color: var(--white); font-family: 'Jost', sans-serif; font-size: 15px; text-align: center; padding: 12px 18px; line-height: 1.5; } .preview-bar strong { font-weight: 600; letter-spacing: .3px; text-transform: uppercase; font-size: 13px; } .preview-bar a { color: var(--white); text-decoration: underline; margin-left: 8px; white-space: nowrap; } /* ---------- Alerts ---------- */ .alert { padding: 14px 18px; margin-bottom: 20px; } .alert-success { background: #e5f5ea; color: #156a3c; border: 1px solid #a9dfc0; } .alert-error { background: #fbe3e3; color: #8c1d18; border: 1px solid #f0b1ae; } .alert ul { margin-left: 18px; } /* ---------- Blog listing (matches live: hero banner + featured-image cards) ---------- */ .blog-hero { position: relative; min-height: 480px; background: url('../images/photo-1651467606797-e1c660cf3fda-scaled.jpeg') center center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--white); padding: 60px 20px; } .blog-hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.35); } .blog-hero h1 { position: relative; /* Live declares "Krona One" but never loads it, so it renders as the browser's default sans-serif. Mirror that exactly (do NOT use the chunky karona font here). */ font-family: "Krona One", sans-serif; font-size: 64px; font-weight: 500; color: var(--white); text-align: center; line-height: 1.1; } @media (max-width: 767px) { .blog-hero { min-height: 260px; } .blog-hero h1 { font-size: 42px; } } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 20px; } @media (max-width: 960px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } } .blog-card { background: #fff; border-radius: 3px; overflow: visible; box-shadow: 0 0 10px rgba(0,0,0,.15); display: flex; flex-direction: column; color: inherit; transition: box-shadow .2s; } .blog-card:hover { box-shadow: 0 6px 26px rgba(0,0,0,.2); } .blog-card-media { position: relative; aspect-ratio: 16 / 9; background: #eee; border-radius: 3px 3px 0 0; } .blog-card-media a { display: block; width: 100%; height: 100%; } .blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 3px 3px 0 0; } .blog-card-badge { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); background: #61CE70; color: #fff; padding: 7px 15px; border-radius: 999px; font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; /* Imported categories can be long; on a narrow card a nowrap pill would stick out past the card and widen the page, so it wraps instead. */ max-width: calc(100% - 28px); text-align: center; line-height: 1.3; } .blog-card-avatar { position: absolute; left: 30px; bottom: -30px; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: #d8d8d8; z-index: 2; } .blog-card-avatar svg { width: 100%; height: 100%; display: block; } .blog-card-body { padding: 42px 24px 22px; flex: 1; display: flex; flex-direction: column; } .blog-card-title { font-family: "Krona One", sans-serif; /* renders sans-serif — mirrors the live site */ font-size: 20px; font-weight: 500; color: #000; line-height: 24px; margin-bottom: 14px; } .blog-card-title a { color: inherit; text-decoration: none; } .blog-card-title a:hover { color: #CFB070; } .blog-card-excerpt { font-family: 'Jost', sans-serif; font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 14px; flex: 1; } .blog-card-more { display: inline-block; color: #CFB070; font-weight: 500; text-decoration: none; font-family: 'Jost', sans-serif; font-size: 15px; } .blog-card-more:hover { color: var(--gold); } .blog-card-meta { display: flex; gap: 20px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eee; font-family: 'Roboto Slab', Georgia, serif; font-size: 12px; color: #ADADAD; } .blog-card-meta span { display: inline-flex; align-items: center; gap: 6px; } .blog-card-meta svg { width: 13px; height: 13px; opacity: .85; } /* ---------- Single post (matches live: hero image + 2-col with Recent Post sidebar) ---------- */ .post-hero { position: relative; min-height: 520px; display: flex; align-items: center; background: var(--black) center center / cover no-repeat; color: var(--white); padding: 60px 0; } .post-hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.45); } .post-hero .container { position: relative; z-index: 1; } .post-hero h1 { font-family: "Krona One", sans-serif; /* renders sans-serif — mirrors the live site */ font-size: 64px; font-weight: 600; line-height: 1.15; color: var(--white); max-width: 1000px; } .post-hero .post-date { color: var(--gold); margin-top: 18px; font-size: 16px; font-family: 'Jost', sans-serif; } @media (max-width: 767px) { .post-hero { min-height: 340px; } .post-hero h1 { font-size: 32px; } } .post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 50px; align-items: start; } @media (max-width: 960px) { .post-layout { grid-template-columns: 1fr; } } .post-body { font-family: 'Jost', sans-serif; font-size: 16px; color: #000; line-height: 1.75; max-width: 100%; } .post-body p { margin-bottom: 18px; } .post-body h2 { font-family: 'Jost', sans-serif; font-size: 24px; font-weight: 500; color: var(--black); margin: 30px 0 14px; } .post-body h3 { font-family: 'Jost', sans-serif; font-size: 20px; font-weight: 500; color: var(--black); margin: 26px 0 12px; } .post-body h4 { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 500; color: var(--black); margin: 22px 0 10px; } .post-body ul, .post-body ol { margin: 0 0 20px 24px; } .post-body li { margin-bottom: 8px; } .post-body img { margin: 20px 0; border-radius: 6px; max-width: 100%; height: auto; } .post-body a { color: var(--gold-soft); text-decoration: underline; } /* The "Register for the Expo" CTA sits inside .post-body, where the link rule above out-specifies .btn-gold and left it gold-on-gold and underlined. */ .post-body a.btn { text-decoration: none; } .post-body a.btn-gold { color: var(--black); } .post-body a.btn-gold:hover { background: var(--white); color: var(--black); } .post-body table { border-collapse: collapse; width: 100%; margin-bottom: 24px; font-size: 15px; } .post-body th, .post-body td { border: 1px solid #ddd; padding: 10px 14px; text-align: left; } .post-body blockquote { border-left: 4px solid var(--gold); padding: 8px 20px; margin: 20px 0; color: #444; font-style: italic; } .post-body strong { font-weight: 600; } .post-cta { margin-top: 40px; } /* Recent Post sidebar (black card, matches live) */ .recent-posts { background: #070707; border-radius: 4px; overflow: hidden; position: sticky; top: 30px; } .recent-posts-head { background: #070707; color: var(--white); text-align: center; padding: 28px 16px; font-family: "Krona One", sans-serif; /* renders sans-serif — mirrors the live site */ font-size: 32px; font-weight: 600; letter-spacing: -.01em; } .recent-posts-list { background: var(--white); } .recent-post-item { display: block; padding: 22px 22px 24px; border-bottom: 1px solid #efefef; text-decoration: none; color: inherit; } .recent-post-item:last-child { border-bottom: none; } .recent-post-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; margin-bottom: 12px; } .recent-post-item .rp-title { font-family: "Krona One", sans-serif; /* renders sans-serif — mirrors the live site */ font-size: 16px; font-weight: 500; color: var(--black); line-height: 1.4; display: block; } .recent-post-item:hover .rp-title { color: var(--gold-soft); } .recent-post-item .rp-date { font-family: 'Jost', sans-serif; font-size: 12px; color: #999; margin-top: 6px; display: block; } .post-date { font-size: .85rem; color: #6b6b6b; } /* ---------- Footer ---------- */ .site-footer { background: var(--grey-bg); padding-top: 70px; } .footer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 50px; padding-bottom: 60px; align-items: start; } /* Sites that also list "Quick Links" need a fourth column, otherwise it wraps onto its own row and leaves a large hole beside the contact details. */ .footer-grid.has-quicklinks { grid-template-columns: 1fr 0.9fr 1.2fr 0.9fr; gap: 40px; } @media (max-width: 1024px) { .footer-grid.has-quicklinks { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 820px) { .footer-grid, .footer-grid.has-quicklinks { grid-template-columns: 1fr; gap: 34px; } } .footer-brand { text-align: center; } .footer-brand img { max-width: 230px; } .site-footer h2 { font-family: 'karona one', sans-serif; font-size: 16px; font-weight: 400; margin-bottom: 20px; color: #050505; } .footer-list { list-style: none; } .footer-list li { margin-bottom: 16px; color: #6b6b6b; font-size: 15px; } .footer-list a { color: #6b6b6b; text-decoration: none; } .footer-list a:hover { color: var(--gold); } .f-icon { vertical-align: -2px; margin-right: 10px; color: #444343; } .footer-list.locations li { margin-bottom: 20px; } .loc-title { display: block; color: #2b2b2b; font-weight: 400; margin-bottom: 8px; } .loc-address { display: block; color: #6b6b6b; line-height: 1.6; padding-left: 2px; } .loc-address .f-icon { float: left; margin-top: 3px; } .footer-bottom { background: var(--black); color: #ffffff; padding: 18px 0; font-size: 15px; text-align: center; font-family: 'Jost', sans-serif; } .footer-bottom a { color: var(--gold); text-decoration: none; } .footer-bottom .sep { color: #ffffff; } .pagination-wrap { margin-top: 44px; display: flex; justify-content: center; } .pager { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; font-family: 'Jost', sans-serif; } .pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border: 1px solid #e2e2e2; background: #fff; color: #161616; text-decoration: none; font-size: 14px; font-weight: 500; border-radius: 6px; transition: background .15s, border-color .15s, color .15s; } .pager a:hover { border-color: var(--gold, #C7A557); color: var(--gold, #C7A557); } .pager .is-active { background: #161616; border-color: #161616; color: #fff; cursor: default; } .pager .is-disabled { color: #b7b7b7; background: #fafafa; border-color: #eee; cursor: not-allowed; } .pager .pager-dots { border: none; background: transparent; min-width: 20px; padding: 0 4px; color: #888; } /* ---------- Sitemap (the human-readable one at /sitemap) ---------- */ .page-head { background: var(--grey-bg); padding: 64px 0 56px; text-align: center; } .page-head h1 { font-family: 'karona one', sans-serif; font-size: 46px; color: var(--dark); margin-bottom: 10px; } .page-head p { color: #6b6b6b; } .sitemap-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 60px; align-items: start; } .sitemap-block > .sitemap-title:first-child { margin-top: 0; } .sitemap-title { font-family: 'karona one', sans-serif; font-size: 20px; font-weight: 400; color: var(--dark); margin: 38px 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--gold); } .sitemap-count { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 400; color: #8a8a8a; margin-left: 6px; } .sitemap-list { list-style: none; } .sitemap-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid #eee; } .sitemap-list li:last-child { border-bottom: none; } .sitemap-list a { color: var(--text); text-decoration: none; font-weight: 400; } .sitemap-list a:hover { color: var(--gold); text-decoration: underline; } .sitemap-list time { color: #9a9a9a; font-size: 13px; white-space: nowrap; } @media (max-width: 860px) { .sitemap-grid { grid-template-columns: 1fr; gap: 10px; } } @media (max-width: 767px) { .page-head { padding: 44px 0 38px; } .page-head h1 { font-size: 32px; } .sitemap-list li { padding: 11px 0; } } /* ---------- Error pages ---------- */ .error-page { padding: 90px 0 100px; text-align: center; } .error-code { font-family: 'karona one', sans-serif; font-size: clamp(80px, 14vw, 140px); color: var(--gold-soft); line-height: 1; margin-bottom: 8px; } .error-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 10px; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: 36px; } .hero-event-card { margin: 0 auto; } .hero-inner--multi { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 600px) { .hero-events.is-multi { grid-template-columns: 1fr; } } @media (max-width: 767px) { .section { padding: 52px 0; } .hero { padding: 60px 0 50px; min-height: auto; } .hero h1 { font-size: 23px; line-height: 1.7em; } .hero-sub { max-width: 100%; } .btn-lg { padding: 14px 40px; width: 100%; } } /* =========================================================================== Phone layout --------------------------------------------------------------------------- Everything above mirrors the live desktop pages. This block is the phone pass: it exists as one section at the end of the file so it wins over the rules above at the same specificity, and so the desktop rendering can be compared against live without reading around mobile overrides. The per-site hero