/* ═══════════════════════════════════════════════════════ Annai Teresa Old Age Home — annai-teresa.css Only custom classes/IDs. No tag-level styles. Uses project's existing :root variables. Requires: Bootstrap 5.3.2 Fonts: Playfair Display + DM Sans (add to your ) ════════════════════════════════════════════════════════ */ /* ── HERO ────────────────────────────────────────────── */ .at-hero { display: grid; grid-template-columns: 1fr; min-height: 520px; } @media (min-width: 992px) { .at-hero { grid-template-columns: 55% 45%; min-height: 580px; } } .at-hero__img-wrap { position: relative; overflow: hidden; min-height: 280px; } @media (min-width: 992px) { .at-hero__img-wrap { min-height: 580px; } } .at-hero__img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform 8s ease; } .at-hero__img-wrap:hover .at-hero__img { transform: scale(1.04); } .at-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(24, 24, 24, 0.08), rgba(24, 24, 24, 0.5)); } @media (min-width: 992px) { .at-hero__overlay { background: linear-gradient(to right, rgba(24, 24, 24, 0.38) 0%, rgba(24, 24, 24, 0.05) 70%, transparent 100%); } } .at-hero__badge { position: absolute; bottom: 20px; left: 20px; background: var(--white); border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow1); } .at-hero__badge-icon { width: 42px; height: 42px; background: var(--primary); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .at-hero__badge-num { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--main); line-height: 1; display: block; } .at-hero__badge-lbl { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--secondary-2); font-weight: 500; margin-top: 2px; display: block; } .at-hero__content { background: var(--main); padding: 36px 20px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } @media (min-width: 992px) { .at-hero__content { padding: 64px 56px; } } .at-hero__content::before { content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: rgba(18, 159, 255, 0.06); pointer-events: none; } .at-hero__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--primary); margin-bottom: 20px; line-height: normal; } .at-hero__eyebrow-line { width: 24px; height: 2px; background: var(--primary); } .at-hero__h1 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 4.5vw, 52px); font-weight: 700; color: var(--white); line-height: 1.1; margin-bottom: 20px; } .at-hero__h1 em { font-style: italic; color: var(--primary); } .at-hero__desc { font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, 0.62); font-weight: 300; margin-bottom: 32px; max-width: 420px; } .at-hero__stats { display: flex; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; margin-bottom: 32px; } .at-hero__stat { flex: 1; padding: 14px 10px; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.1); } .at-hero__stat:last-child { border-right: none; } .at-hero__stat-num { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: var(--white); line-height: 1; display: block; } .at-hero__stat-lbl { font-family: 'DM Sans', sans-serif; font-size: 10px; color: rgba(255, 255, 255, 0.4); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; display: block; margin-top: 4px; } .at-hero__btn-primary { background: var(--primary); color: var(--white); border: none; border-radius: 10px; padding: 14px 28px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 6px 20px rgba(18, 159, 255, 0.35); } .at-hero__btn-primary:hover { opacity: 0.88; transform: translateY(-2px); } .at-hero__btn-ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(255, 255, 255, 0.25); border-radius: 10px; padding: 13px 22px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .at-hero__btn-ghost:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.06); } /* ── SECTION COMMONS ─────────────────────────────────── */ .at-sec-label { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--primary); display: block; margin-bottom: 10px; } .at-sec-title { font-family: 'Playfair Display', serif; font-size: clamp(22px, 3vw, 40px); font-weight: 700; color: var(--main); line-height: 1.15; } .at-sec-title em { font-style: italic; color: var(--primary); } .at-sec-desc { font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--secondary); line-height: 1.8; font-weight: 400; } /* ── ABOUT ───────────────────────────────────────────── */ .at-about { background: var(--white); } .at-about__text { font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.85; color: var(--secondary); margin-bottom: 12px; } .at-about__quote { border-left: 3px solid var(--primary); background: var(--surface); border-radius: 0 10px 10px 0; padding: 16px 20px; margin-top: 24px; } .at-about__quote-text { font-family: 'Playfair Display', serif; font-size: 15px; font-style: italic; color: var(--main); line-height: 1.7; margin: 0 0 6px 0; } .at-about__quote-cite { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--secondary-2); font-weight: 600; } .at-about__mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 340px; } @media (max-width: 767px) { .at-about__mosaic { height: 220px; } } .at-about__mosaic-item { border-radius: 12px; overflow: hidden; position: relative; } .at-about__mosaic-item:first-child { grid-row: span 2; } .at-about__mosaic-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s; } .at-about__mosaic-item:hover .at-about__mosaic-img { transform: scale(1.06); } .at-about__mosaic-tag { position: absolute; bottom: 10px; left: 10px; background: var(--white); border-radius: 6px; padding: 4px 10px; font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; color: var(--primary); } /* ── FEATURES ────────────────────────────────────────── */ .at-features { background: var(--surface); } .at-feat-card { background: var(--white); border-radius: 16px; border: 1.5px solid var(--line); padding: 28px 24px; height: 100%; transition: all 0.22s; position: relative; overflow: hidden; } .at-feat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; } .at-feat-card:hover { box-shadow: var(--shadow1); transform: translateY(-4px); } .at-feat-card:hover::before { transform: scaleX(1); } .at-feat-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; transition: background 0.2s; } .at-feat-card:hover .at-feat-icon { background: rgba(18, 159, 255, 0.1); } .at-feat-title { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: var(--main); margin-bottom: 8px; } .at-feat-desc { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--secondary); line-height: 1.65; } /* ── MEAL SECTION ────────────────────────────────────── */ .at-meals { background: var(--white); } /* Full day packages */ .at-pkg-label { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--secondary-2); margin-bottom: 10px; display: block; } .at-pkg { border: 2px solid var(--line); border-radius: 16px; cursor: pointer; background: var(--white); position: relative; overflow: hidden; transition: all 0.22s; padding: 10px; -webkit-tap-highlight-color: transparent; } .at-pkg::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: opacity 0.2s; } .at-pkg--veg::after { background: linear-gradient(90deg, var(--success), #5ecb3e); } .at-pkg--nveg::after { background: linear-gradient(90deg, var(--critical), #f56565); } .at-pkg.is-on { box-shadow: var(--shadow1); } .at-pkg.is-on::after { opacity: 1; } .at-pkg--veg.is-on { border-color: var(--success); background: rgba(61, 171, 37, 0.04); } .at-pkg--nveg.is-on { border-color: var(--critical); background: rgba(240, 62, 62, 0.04); } .at-pkg__emoji { font-size: 26px; line-height: 1; display: block; margin-bottom: 10px; } .at-pkg__check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; transition: all 0.2s; flex-shrink: 0; } .at-pkg--veg.is-on .at-pkg__check { background: var(--success); border-color: var(--success); color: #fff; } .at-pkg--nveg.is-on .at-pkg__check { background: var(--critical); border-color: var(--critical); color: #fff; } .at-pkg__title { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: var(--main); line-height: 1.2; margin-bottom: 15px; } .at-pkg__meals { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--secondary-2); margin-bottom: 12px; line-height: normal; } .at-pkg__price { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--main); line-height: 1; display: block; margin-bottom: 6px; } .at-pkg--veg.is-on .at-pkg__price { color: var(--success); } .at-pkg--nveg.is-on .at-pkg__price { color: var(--critical); } .at-pkg__badge { display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 1px; background: rgba(240, 167, 80, 0.12); color: var(--yellow); padding: 3px 8px; border-radius: 4px; line-height: normal; } /* Or divider */ .at-or { display: flex; align-items: center; gap: 12px; margin: 22px 0; } .at-or::before, .at-or::after { content: ''; flex: 1; height: 1px; background: var(--line); } .at-or__text { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--secondary-2); white-space: nowrap; } /* Individual meal cards */ .at-mc { border: 2px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--white); cursor: pointer; transition: all 0.22s; -webkit-tap-highlight-color: transparent; } .at-mc:hover { border-color: var(--primary); box-shadow: var(--shadow1); } .at-mc.is-on { border-color: var(--primary); background: rgba(18, 159, 255, 0.03); box-shadow: 0 0 0 3px rgba(18, 159, 255, 0.12); } .at-mc__img { object-fit: cover; width: 100%; display: block; } @media (max-width: 575px) { .at-mc__img { height: 150px; } } @media (min-width: 576px) { .at-mc__img { width: 120px; height: 100%; min-height: 130px; flex-shrink: 0; } } .at-mc__body { padding: 16px; flex: 1; } .at-mc__name { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: var(--main); margin-bottom: 8px; } .at-mc__veg-badge { display: inline-flex; align-items: center; gap: 5px; font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--success); background: rgba(61, 171, 37, 0.1); padding: 3px 9px; border-radius: 5px; margin-bottom: 10px; } .at-mc__nveg-badge { display: inline-flex; align-items: center; gap: 5px; font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--critical); background: rgba(240, 62, 62, 0.1); padding: 3px 9px; border-radius: 5px; margin-bottom: 10px; } .at-mc__dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .at-mc__dot--veg { background: var(--success); } .at-mc__dot--nveg { background: var(--critical); } .at-mc__chips { display: flex; flex-wrap: wrap; gap: 5px; } .at-mc__chip { font-family: 'DM Sans', sans-serif; font-size: 11px; background: var(--surface); color: var(--secondary); padding: 3px 10px; border-radius: 20px; font-weight: 500; } /* Lunch toggle */ .at-lunch-toggle { display: inline-flex; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 10px; } .at-lunch-toggle__sep { width: 1px; background: var(--line); flex-shrink: 0; } .at-lunch-btn { padding: 5px 14px; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; border: none; cursor: pointer; background: var(--white); color: var(--secondary-2); transition: all 0.18s; border-radius: 0; } .at-lunch-btn--veg.is-active { background: rgba(61, 171, 37, 0.1); color: var(--success); border-radius: 0; } .at-lunch-btn--nveg.is-active { background: rgba(240, 62, 62, 0.1); color: var(--critical); border-radius: 0; } /* Meal card right panel */ .at-mc__right { background: var(--surface); border-top: 1.5px solid var(--line); padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; transition: background 0.2s; } @media (min-width: 576px) { .at-mc__right { border-top: none; border-left: 1.5px solid var(--line); min-width: 120px; flex-direction: column; justify-content: center; padding: 16px; } } .at-mc.is-on .at-mc__right { background: rgba(18, 159, 255, 0.07); } .at-mc__price { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--primary); line-height: 1; display: block; } .at-mc__for { font-family: 'DM Sans', sans-serif; font-size: 10px; color: var(--secondary-2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; display: block; margin-top: 3px; } .at-mc__check { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); background: var(--white); display: flex; align-items: center; justify-content: center; font-size: 14px; color: transparent; transition: all 0.22s; flex-shrink: 0; } .at-mc.is-on .at-mc__check { background: var(--primary); border-color: var(--primary); color: var(--white); } /* ── DONATION FORM CARD ───────────────────────────────── */ .at-form-card { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow2); border: 1.5px solid var(--line); background: var(--white); } @media (min-width: 992px) { .at-form-card { position: sticky; top: 24px; } } .at-form-card__head { background: var(--main); padding: 22px 24px; } .at-form-card__head-icon { width: 42px; height: 42px; background: rgba(255, 255, 255, 0.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .at-form-card__head-title { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 2px; } .at-form-card__head-sub { font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.5); } /* Donors strip */ .at-donors { display: flex; overflow-x: auto; scrollbar-width: none; background: rgba(255, 255, 255, 0.04); border-top: 1px solid rgba(255, 255, 255, 0.08); } .at-donors::-webkit-scrollbar { display: none; } .at-donor { flex-shrink: 0; padding: 10px 16px; display: flex; align-items: center; gap: 8px; border-right: 1px solid rgba(255, 255, 255, 0.07); } .at-donor__av { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: var(--white); font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .at-donor__name { font-family: 'DM Sans', sans-serif; font-size: 11px; color: rgba(255, 255, 255, 0.65); white-space: nowrap; font-weight: 500; } .at-donor__amt { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--yellow); font-weight: 700; white-space: nowrap; } /* Form body */ .at-form-body { padding: 20px 22px 24px; } .at-form-title { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: var(--main); margin-bottom: 16px; } /* BS5 scoped overrides */ .at-form-card .form-label { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; color: var(--secondary); margin-bottom: 0; } .at-form-card .form-control, .at-form-card .form-select { } .at-form-card .form-control:focus, .at-form-card .form-select:focus { /* border-color: var(--primary); */ box-shadow: 0 0 0 0; background: var(--white); color: var(--main); outline: none; } .at-form-card .form-control::placeholder { color: var(--secondary-2); opacity: 0.8; } .at-form-card .invalid-feedback { font-family: 'DM Sans', sans-serif; font-size: 11px; } .at-form-card .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } .at-form-card .form-check-label { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--secondary); line-height: 1.5; } .at-form-card .alert-info { background: rgba(18, 159, 255, 0.06); border-color: rgba(18, 159, 255, 0.2); color: var(--secondary); font-family: 'DM Sans', sans-serif; font-size: 12px; border-radius: 10px; } /* Order summary */ .at-order-box { background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; } .at-order-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--secondary-2); } .at-order-row.is-active { color: var(--main); font-weight: 600; } .at-order-row__val {} .at-order-row.is-active .at-order-row__val { color: var(--primary); font-weight: 700; } .at-order-sep { height: 1px; background: var(--line); margin: 8px 0; } .at-order-total-lbl { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--main); } .at-order-total-val { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: var(--primary); } /* Pay button */ .at-pay-btn { width: 100%; background: var(--primary); border: none; border-radius: 12px; padding: 15px; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; color: var(--white); display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 8px 24px rgba(18, 159, 255, 0.3); transition: all 0.2s; margin-bottom: 12px; } .at-pay-btn:hover { opacity: 0.9; transform: translateY(-2px); } .at-form-note { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--secondary-2); text-align: center; line-height: 1.6; margin-bottom: 12px; } .at-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; padding-top: 12px; border-top: 1px solid var(--line); } .at-trust__item { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--secondary-2); font-weight: 600; } /* ── GALLERY ─────────────────────────────────────────── */ .at-gallery { background: var(--main); } .at-gallery .at-sec-label { color: var(--yellow); } .at-gallery .at-sec-title { color: var(--white); } .at-gallery .at-sec-desc { color: rgba(255, 255, 255, 0.5); } .at-gallery__grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; } @media (min-width: 576px) { .at-gallery__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 992px) { .at-gallery__grid { grid-template-columns: 1.7fr 1fr 1fr; grid-template-rows: 240px 200px; } .at-gi:nth-child(1) { grid-row: span 2; } .at-gi:nth-child(4) { grid-column: span 2; } } .at-gi { border-radius: 14px; overflow: hidden; position: relative; } .at-gi--main { grid-column: span 2; aspect-ratio: 16/8; } @media (min-width: 576px) { .at-gi--main { aspect-ratio: 16/9; } } @media (min-width: 992px) { .at-gi--main { grid-column: unset; aspect-ratio: unset; } } .at-gi--sq { aspect-ratio: 1; } @media (min-width: 992px) { .at-gi--sq { aspect-ratio: unset; } } .at-gi__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s; } .at-gi:hover .at-gi__img { transform: scale(1.06); } .at-gi__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(24, 24, 24, 0.7) 0%, transparent 55%); opacity: 0; transition: opacity 0.3s; display: flex; align-items: flex-end; padding: 16px; } .at-gi:hover .at-gi__overlay { opacity: 1; } .at-gi__lbl { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--white); font-weight: 700; } /* ── CTA ─────────────────────────────────────────────── */ .at-cta { background: var(--surface); position: relative; overflow: hidden; } .at-cta::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; border-radius: 50%; background: rgba(18, 159, 255, 0.05); pointer-events: none; } .at-cta__inner { position: relative; z-index: 1; text-align: center; } .at-cta__icon { font-size: 28px; letter-spacing: 8px; display: block; margin-bottom: 16px; } .at-cta__title { font-family: 'Playfair Display', serif; font-size: clamp(24px, 4vw, 48px); font-weight: 700; color: var(--main); line-height: 1.12; margin-bottom: 16px; } .at-cta__title em { font-style: italic; color: var(--primary); } .at-cta__desc { font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--secondary); line-height: 1.75; font-weight: 400; max-width: 500px; margin: 0 auto 32px; } .at-cta__btn { background: var(--primary); color: var(--white); border: none; border-radius: 12px; padding: 16px 40px; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 28px rgba(18, 159, 255, 0.3); transition: all 0.2s; display: inline-flex; align-items: center; gap: 10px; } .at-cta__btn:hover { opacity: 0.9; transform: translateY(-2px); } .at-cta__sub { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--secondary-2); margin-top: 16px; display: block; }